/* ----------- iPhone 5, 5s, 5c an 5se ----------- */
/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
	 .mybox {
	width:100%;
}
	.mytitle {
		padding:1.5rem;
		font-size:1rem
	}
.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;}
  .view-menu {
    font-size: 15px;
    /*top: 100px;*/
    letter-spacing: 1px;
    /*left:calc(50% - 62px);*/
  }
  .logo {
    transform: scale(0.65);
    -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 {
    width: 250px;
    height: 31px;
    background-image: url(../images/slogan.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    transform: scale(0.65);
    -webkit-transition: transform 1s ease-in;
    -moz-transition: transform 1s ease-in;
    -o-transition: transform 1s ease-in;
    position: absolute;
    z-index: 9;
    bottom: 80px;
  }
  .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 only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-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 {
    color: #fff;
    transform: scale(0.65);
    -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.65);
    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;
  }
}
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {

	  	 .mybox {
	width:100%;
}
	.mytitle {
		padding:1.5rem;
		font-size:1.25rem
	}

  .view-menu {
    font-size: 15px;
    /*top: 100px;*/
    letter-spacing: 1px;
    /*left:calc(50% - 83px);*/
  }
  .logo {
      transform: scale(0.75);
    -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.75);
    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: 90px;
    -webkit-transition: transform 1s ease-in;
    -moz-transition: transform 1s ease-in;
    -o-transition: transform 1s ease-in;
  }
}
/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {

	  	 .mybox {
	width:100%;
}
	  	.mytitle {
		padding:3rem;
		font-size:1.5rem
	}
	  
.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;}
  .view-menu {
    font-size: 15px;
    /*top: 60px;*/
    letter-spacing: 1px;
    /*left:calc(50% - 75px);*/
  }
  .logo {
      transform: scale(0.85);
    -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.85);
    position: absolute;
    z-index: 9;
    bottom: 40px;
    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;
  }
}
/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Portrait */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {

	  	 .mybox {
	width:100%;
}
	  	.mytitle {
		padding:1.5rem;
		font-size:1.25rem
	}
.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;}
  .view-menu {
    font-size: 15px;
    /*top: 100px;*/
    letter-spacing: 1px;
  }
  .logo {
    transform: scale(0.85);
    -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.85);
    position: absolute;
    z-index: 9;
    bottom: 30px;
    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;
  }
}
/* Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-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: 50px;*/
    letter-spacing: 1px;
    /*left:calc(50% - 63px);*/
  }
  .logo {
    transform: scale(0.85);
    -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.85);
    position: absolute;
    z-index: 9;
    bottom: 30px;
    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;
  }
}
/* ----------- iPhone 13 ----------- */
/* 2532x1170 pixels at 460ppi */
@media only screen 
    and (device-width: 390px) 
    and (device-height: 844px) 
    and (-webkit-device-pixel-ratio: 3)and (orientation: portrait) {
 .view-menu {
    font-size: 15px;
    /*top: 50px;*/
    letter-spacing: 1px;
    /*left:calc(50% - 63px);*/
  }.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;}
	.logo {
     transform: scale(0.85);
    -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.85);
    -webkit-transition: transform 1s ease-in;
    -moz-transition: transform 1s ease-in;
    -o-transition: transform 1s ease-in;
    position: absolute;
    z-index: 9;
    bottom: 50px;
  }
}