/* ----------- Galaxy S3 ----------- */
/* Portrait */
@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {
.our-story {
  font-size: 14px;
  padding-top:20px;
}
.our-story a:hover {  color: #000; text-decoration: none;}
.our-story a {  color: #000; text-decoration: none;}
	 .mybox {
	width:100%;
}
	.mytitle {
		padding:1.5rem;
		font-size:1rem
	}

  .view-menu {
    font-size: 15px;
    /*top: 100px;*/
    letter-spacing: 1px;
    /*left:calc(50% - 48px);*/
  }
  .logo {
    transform: scale(.5);
    -webkit-transition: transform 1s ease-in;
    -moz-transition: transform 1s ease-in;
    -o-transition: transform 1s ease-in;
    position: absolute;
    top: calc(50% - 65px);
    z-index: 9;
  }
  .slogan {
    transform: scale(.5);
    position: absolute;
    z-index: 9;
    bottom: 80px;
    left: calc(50% - 125px);
  }
  .myfooter {
    font-size: 9px;
    line-height: 1.4rem;
    letter-spacing: 4px;
    color: #DEB825;
    text-align: center;
    position: absolute;
    z-index: 9;
    left: calc(50% - 125px);
    bottom: 40px;
    -webkit-transition: transform 1s ease-in;
    -moz-transition: transform 1s ease-in;
    -o-transition: transform 1s ease-in;
  }
}
/* Landscape */
@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) {
.our-story {
  font-size: 14px;
  padding-top:20px;
}
.our-story a:hover {  color: #000; text-decoration: none;}
.our-story a {  color: #000; text-decoration: none;}
 .mybox {
	width:100%;
}
	.mytitle {
		padding:3rem;
		font-size:1rem
	}

  .view-menu {
    font-size: 15px;
    /*top: 50px;*/
    letter-spacing: 1px;
    /*left:calc(50% - 63px);*/
  }
  .logo {
    transform: scale(.5);
    -webkit-transition: transform 1s ease-in;
    -moz-transition: transform 1s ease-in;
    -o-transition: transform 1s ease-in;
    position: absolute;
    top: calc(50% - 65px);
    left: calc(50% - 165px);
    z-index: 9;
  }
  .slogan {
    transform: scale(.5);
    position: absolute;
    z-index: 9;
    bottom: 80px;
    left: calc(50% - 125px);
  }
  .myfooter {
    font-size: 10px;
    line-height: 1.55rem;
    letter-spacing: 4.5px;
    color: #DEB825;
    text-align: center;
    position: absolute;
    z-index: 9;
    left: calc(50% - 135px);
    bottom: 30px;
    -webkit-transition: transform 1s ease-in;
    -moz-transition: transform 1s ease-in;
    -o-transition: transform 1s ease-in;
  }
}
/* ----------- Galaxy S4, S5 and Note 3 ----------- */
/* Portrait */
@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {}
/* Landscape */
@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {}
/* ----------- Google Pixel, HTC One ----------- */
/* Portrait */
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
.our-story {
  font-size: 14px;
  padding-top:20px;
}
.our-story a:hover {  color: #000; text-decoration: none;}
.our-story a {  color: #000; text-decoration: none;}
 .mybox {
	width:100%;
}
	.mytitle {
		padding:3rem;
		font-size:1rem
	}

  .view-menu {
    font-size: 15px;
    /*top: 100px;*/
    letter-spacing: 1px;
    /*left:calc(50% - 83px);*/
  }
  .logo {
    transform: scale(.5);
    -webkit-transition: transform 1s ease-in;
    -moz-transition: transform 1s ease-in;
    -o-transition: transform 1s ease-in;
    position: absolute;
    top: calc(50% - 65px);
    left: calc(50% - 165px);
    z-index: 9;
  }
  .slogan {
   transform: scale(.5);
    position: absolute;
    z-index: 9;
    bottom: 80px;
    left: calc(50% - 125px);
  }
  .myfooter {
    font-size: 24px;
    line-height: 3rem;
    letter-spacing: 4.5px;
    color: #DEB825;
    text-align: center;
    position: absolute;
    z-index: 9;
    left: calc(50% - 220px);
    bottom: 80px;
    -webkit-transition: transform 1s ease-in;
    -moz-transition: transform 1s ease-in;
    -o-transition: transform 1s ease-in;
  }
}
/* Landscape */
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
.our-story {
  font-size: 14px;
  padding-top:20px;
}
.our-story a:hover {  color: #000; text-decoration: none;}
.our-story a {  color: #000; text-decoration: none;}
	 .mybox {
	width:100%;
}
	.mytitle {
		padding:3rem;
		font-size:1rem
	}

  .view-menu {
    font-size: 15px;
    /*top: 50px;*/
    letter-spacing: 1px;
    /*left:calc(50% - 68px);*/
  }
  .logo {
    transform: scale(.5);
    -webkit-transition: transform 1s ease-in;
    -moz-transition: transform 1s ease-in;
    -o-transition: transform 1s ease-in;
    position: absolute;
    top: calc(50% - 65px);
    left: calc(50% - 165px);
    z-index: 9;
  }
  .slogan {
    transform: scale(.5);
    position: absolute;
    z-index: 9;
    bottom: 80px;
    left: calc(50% - 125px);
  }
  .myfooter {
    font-size: 14px;
    line-height: 1.50rem;
    letter-spacing: 4.5px;
    color: #DEB825;
    text-align: center;
    position: absolute;
    z-index: 9;
    left: calc(50% - 155px);
    bottom: 30px;
    -webkit-transition: transform 1s ease-in;
    -moz-transition: transform 1s ease-in;
    -o-transition: transform 1s ease-in;
  }
}
/* ----------- Google Pixel XL, Galaxy S6 ----------- */
/* Portrait */
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) and (orientation: portrait) {
.our-story {
  font-size: 14px;
  padding-top:20px;
}
.our-story a:hover {  color: #000; text-decoration: none;}
.our-story a {  color: #000; text-decoration: none;}
 .mybox {
	width:100%;
}
	.mytitle {
		padding:3rem;
		font-size:1rem
	}

  .view-menu {
    font-size: 15px;
    /*top: 100px;*/
    letter-spacing: 1px;
    /*left:calc(50% - 83px);*/
  }
  .logo {
    transform: scale(.5);
    -webkit-transition: transform 1s ease-in;
    -moz-transition: transform 1s ease-in;
    -o-transition: transform 1s ease-in;
    position: absolute;
    top: calc(50% - 65px);
    left: calc(50% - 165px);
    z-index: 9;
  }
  .slogan {
    transform: scale(.5);
    position: absolute;
    z-index: 9;
    bottom: 80px;
    left: calc(50% - 125px);
  }
  .myfooter {
    font-size: 24px;
    line-height: 3rem;
    letter-spacing: 4.5px;
    color: #DEB825;
    text-align: center;
    position: absolute;
    z-index: 9;
    left: calc(50% - 220px);
    bottom: 80px;
    -webkit-transition: transform 1s ease-in;
    -moz-transition: transform 1s ease-in;
    -o-transition: transform 1s ease-in;
  }
}
/* Landscape */
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) and (orientation: landscape) {
.our-story {
  font-size: 14px;
  padding-top:20px;
}
.our-story a:hover {  color: #000; text-decoration: none;}
.our-story a {  color: #000; text-decoration: none;}
 .mybox {
	width:100%;
}
	.mytitle {
		padding:3rem;
		font-size:1rem
	}

  .view-menu {
    font-size: 15px;
    /*top: 50px;*/
    letter-spacing: 1px;
    /*left:calc(50% - 68px);*/
  }
  .logo {
     transform: scale(.5);
    -webkit-transition: transform 1s ease-in;
    -moz-transition: transform 1s ease-in;
    -o-transition: transform 1s ease-in;
    position: absolute;
    top: calc(50% - 65px);
    left: calc(50% - 165px);
    z-index: 9;
  }
  .slogan {
    transform: scale(.5);
    position: absolute;
    z-index: 9;
    bottom: 80px;
    left: calc(50% - 125px);
  }
  .myfooter {
    font-size: 14px;
    line-height: 1.50rem;
    letter-spacing: 4.5px;
    color: #DEB825;
    text-align: center;
    position: absolute;
    z-index: 9;
    left: calc(50% - 155px);
    bottom: 30px;
    -webkit-transition: transform 1s ease-in;
    -moz-transition: transform 1s ease-in;
    -o-transition: transform 1s ease-in;
  }
}
/* ----------- 360 x 718 ----------- */
/* Portrait */
@media screen and (device-width: 360px) and (device-height: 718px) and (-webkit-device-pixel-ratio: 4) and (orientation: portrait) {
.our-story {
  font-size: 14px;
  padding-top:20px;
}
.our-story a:hover {  color: #000; text-decoration: none;}
.our-story a {  color: #000; text-decoration: none;}
 .mybox {
	width:100%;
}
	.mytitle {
		padding:3rem;
		font-size:1rem
	}

  .view-menu {
    font-size: 15px;
    /*top: 100px;*/
    letter-spacing: 1px;
    /*left:calc(50% - 83px);*/
  }
  .logo {
    transform: scale(.5);
    -webkit-transition: transform 1s ease-in;
    -moz-transition: transform 1s ease-in;
    -o-transition: transform 1s ease-in;
    position: absolute;
    top: calc(50% - 65px);
    left: calc(50% - 165px);
    z-index: 9;
  }
  .slogan {
    transform: scale(.5);
    position: absolute;
    z-index: 9;
    bottom: 80px;
    left: calc(50% - 125px);
  }
  .myfooter {
    font-size: 24px;
    line-height: 3rem;
    letter-spacing: 4.5px;
    color: #DEB825;
    text-align: center;
    position: absolute;
    z-index: 9;
    left: calc(50% - 220px);
    bottom: 70px;
    -webkit-transition: transform 1s ease-in;
    -moz-transition: transform 1s ease-in;
    -o-transition: transform 1s ease-in;
  }
}
/* Landscape */
@media screen and (device-width: 360px) and (device-height: 718px) and (-webkit-device-pixel-ratio: 4) and (orientation: landscape) {
.our-story {
  font-size: 14px;
  padding-top:20px;
}
.our-story a:hover {  color: #000; text-decoration: none;}
.our-story a {  color: #000; text-decoration: none;}
 .mybox {
	width:100%;
}
	.mytitle {
		padding:3rem;
		font-size:1rem
	}

  .view-menu {
    font-size: 15px;
    /*top: 50px;*/
    letter-spacing: 1px;
    /*left:calc(50% - 68px);*/
  }
  .logo {
     transform: scale(.5);
    -webkit-transition: transform 1s ease-in;
    -moz-transition: transform 1s ease-in;
    -o-transition: transform 1s ease-in;
    position: absolute;
    top: calc(50% - 65px);
    left: calc(50% - 165px);
    z-index: 9;
  }
  .slogan {
    transform: scale(.5);
    position: absolute;
    z-index: 9;
    bottom: 70px;
    left: calc(50% - 125px);
  }
  .myfooter {
    font-size: 14px;
    line-height: 1.50rem;
    letter-spacing: 4.5px;
    color: #DEB825;
    text-align: center;
    position: absolute;
    z-index: 9;
    left: calc(50% - 155px);
    bottom: 30px;
    -webkit-transition: transform 1s ease-in;
    -moz-transition: transform 1s ease-in;
    -o-transition: transform 1s ease-in;
  }
}
/* ----------- 360 x 760 ----------- */
/* Portrait */
@media screen and (device-width: 360px) and (device-height: 760px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
  .our-story {
  font-size: 14px;
  padding-top:20px;
}
.our-story a:hover {  color: #000; text-decoration: none;}
.our-story a {  color: #000; text-decoration: none;}
	body {
    padding: 18px;
  }
 .mybox {
	width:100%;
}
	.mytitle {
		padding:3rem;
		font-size:1rem
	}

  .view-menu {
    font-size: 15px;
    /*top: 100px;*/
    letter-spacing: 1px;
    /*left:calc(50% - 83px);*/
  }
  .logo {
    transform: scale(.5);
    -webkit-transition: transform 1s ease-in;
    -moz-transition: transform 1s ease-in;
    -o-transition: transform 1s ease-in;
    position: absolute;
    top: calc(50% - 65px);
    left: calc(50% - 165px);
    z-index: 9;
  }
  .slogan {
    transform: scale(.5);
    position: absolute;
    z-index: 9;
    bottom: 80px;
    left: calc(50% - 125px);
  }
  .myfooter {
    font-size: 24px;
    line-height: 3rem;
    letter-spacing: 4.5px;
    color: #DEB825;
    text-align: center;
    position: absolute;
    z-index: 9;
    left: calc(50% - 220px);
    bottom: 70px;
    -webkit-transition: transform 1s ease-in;
    -moz-transition: transform 1s ease-in;
    -o-transition: transform 1s ease-in;
  }
}
/* Landscape */
@media screen and (device-width: 360px) and (device-height: 760px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
  
	.our-story {
  font-size: 14px;
  padding-top:20px;
}
.our-story a:hover {  color: #000; text-decoration: none;}
.our-story a {  color: #000; text-decoration: none;}
	body {
    padding: 15px;
  }
 .mybox {
	width:100%;
}
	.mytitle {
		padding:3rem;
		font-size:1rem
	}
	
  .view-menu {
    font-size: 15px;
    /*top: 50px;*/
    letter-spacing: 1px;
    /*left:calc(50% - 68px);*/
  }
  .logo {
    transform: scale(.5);
    -webkit-transition: transform 1s ease-in;
    -moz-transition: transform 1s ease-in;
    -o-transition: transform 1s ease-in;
    position: absolute;
    top: calc(50% - 65px);
    left: calc(50% - 165px);
    z-index: 9;
  }
  .slogan {
    transform: scale(.5);
    position: absolute;
    z-index: 9;
    bottom: 70px;
    left: calc(50% - 125px);
  }
  .myfooter {
    font-size: 14px;
    line-height: 1.50rem;
    letter-spacing: 4.5px;
    color: #DEB825;
    text-align: center;
    position: absolute;
    z-index: 9;
    left: calc(50% - 155px);
    bottom: 30px;
    -webkit-transition: transform 1s ease-in;
    -moz-transition: transform 1s ease-in;
    -o-transition: transform 1s ease-in;
  }
}

/* ----------- 360 x 760 ----------- */
/* Portrait */
@media screen and (device-width: 360px) and (device-height: 760px) and (-webkit-device-pixel-ratio: 4) and (orientation: portrait) {
.our-story {
  font-size: 14px;
  padding-top:20px;
}
.our-story a:hover {  color: #000; text-decoration: none;}
.our-story a {  color: #000; text-decoration: none;}
 .mybox {
	width:100%;
}
	.mytitle {
		padding:3rem;
		font-size:1rem
	}

  .view-menu {
    font-size: 15px;
    /*top: 100px;*/
    letter-spacing: 1px;
    /*left:calc(50% - 83px);*/
  }
  .logo {
    transform: scale(.5);
    -webkit-transition: transform 1s ease-in;
    -moz-transition: transform 1s ease-in;
    -o-transition: transform 1s ease-in;
    position: absolute;
    top: calc(50% - 65px);
    left: calc(50% - 165px);
    z-index: 9;
  }
  .slogan {
    transform: scale(.5);
    position: absolute;
    z-index: 9;
    bottom: 80px;
    left: calc(50% - 125px);
  }
  .myfooter {
    font-size: 24px;
    line-height: 3rem;
    letter-spacing: 4.5px;
    color: #DEB825;
    text-align: center;
    position: absolute;
    z-index: 9;
    left: calc(50% - 220px);
    bottom: 70px;
    -webkit-transition: transform 1s ease-in;
    -moz-transition: transform 1s ease-in;
    -o-transition: transform 1s ease-in;
  }
}
/* Landscape */
@media screen and (device-width: 360px) and (device-height: 760px) and (-webkit-device-pixel-ratio: 4) and (orientation: landscape) {
.our-story {
  font-size: 14px;
  padding-top:20px;
}
.our-story a:hover {  color: #000; text-decoration: none;}
.our-story a {  color: #000; text-decoration: none;}
 .mybox {
	width:100%;
}
	.mytitle {
		padding:3rem;
		font-size:1rem
	}

  .view-menu {
    font-size: 15px;
    /*top: 50px;*/
    letter-spacing: 1px;
    /*left:calc(50% - 68px);*/
  }
  .logo {
    transform: scale(.5);
    -webkit-transition: transform 1s ease-in;
    -moz-transition: transform 1s ease-in;
    -o-transition: transform 1s ease-in;
    position: absolute;
    top: calc(50% - 65px);
    left: calc(50% - 165px);
    z-index: 9;
  }
  .slogan {
    transform: scale(.5);
    position: absolute;
    z-index: 9;
    bottom: 70px;
    left: calc(50% - 125px);
  }
  .myfooter {
    font-size: 14px;
    line-height: 1.50rem;
    letter-spacing: 4.5px;
    color: #DEB825;
    text-align: center;
    position: absolute;
    z-index: 9;
    left: calc(50% - 155px);
    bottom: 30px;
    -webkit-transition: transform 1s ease-in;
    -moz-transition: transform 1s ease-in;
    -o-transition: transform 1s ease-in;
  }
}

@media screen and (device-width: 1018px) and (device-height: 435px) and (-webkit-device-pixel-ratio: 1) and (orientation: landscape) {
.our-story {
  font-size: 14px;
  padding-top:20px;
}
.our-story a:hover {  color: #000; text-decoration: none;}
.our-story a {  color: #000; text-decoration: none;}
		 .mybox {
	width:100%;
}
	  	.mytitle {
		padding:3rem;
		font-size:1.5rem
	}

  .view-menu {
    font-size: 15px;
    /*top: 15px;*/
    letter-spacing: 1px;
    /*left:calc(50% - 63px);*/
  }
  .logo {
    transform: scale(0.55);
    -webkit-transition: transform 1s ease-in;
    -moz-transition: transform 1s ease-in;
    -o-transition: transform 1s ease-in;
    position: absolute;
    top: calc(50% - 65px);
    left: calc(50% - 165px);
    z-index: 9;
  }
  .slogan {
    transform: scale(0.55);
    position: absolute;
    z-index: 9;
    bottom: 80px;
    left: calc(50% - 125px);
  }
  .myfooter {
    font-size: 9px;
    line-height: 1.25rem;
    letter-spacing: 4.5px;
    color: #DEB825;
    text-align: center;
    position: absolute;
    z-index: 9;
    left: calc(50% - 135px);
    bottom: 15px;
    -webkit-transition: transform 1s ease-in;
    -moz-transition: transform 1s ease-in;
    -o-transition: transform 1s ease-in;
  }
}
@media screen and (device-width: 360px) and (device-height: 720px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
.our-story {
  font-size: 14px;
  padding-top:20px;
}
.our-story a:hover {  color: #000; text-decoration: none;}
.our-story a {  color: #000; text-decoration: none;}
		  	 .mybox {
	width:100%;
}
	.mytitle {
		padding:1.5rem;
		font-size:1.25rem
	}

  .view-menu {
    font-size: 15px;
    /*top: 15px;*/
    letter-spacing: 1px;
    /*left:calc(50% - 63px);*/
  }
  .logo {
    transform: scale(.5);
    -webkit-transition: transform 1s ease-in;
    -moz-transition: transform 1s ease-in;
    -o-transition: transform 1s ease-in;
    position: absolute;
    top: calc(50% - 65px);
    left: calc(50% - 165px);
    z-index: 9;
  }
  .slogan {
    transform: scale(.5);
    position: absolute;
    z-index: 9;
    bottom: 80px;
    left: calc(50% - 125px);
  }
  .myfooter {
    font-size: 9px;
    line-height: 1.25rem;
    letter-spacing: 4.5px;
    color: #DEB825;
    text-align: center;
    position: absolute;
    z-index: 9;
    left: calc(50% - 135px);
    bottom: 15px;
    -webkit-transition: transform 1s ease-in;
    -moz-transition: transform 1s ease-in;
    -o-transition: transform 1s ease-in;
  }
}