body.index{
    height: 100%;
    margin: 0;
    background: #452A18;
}
.body_hide {
	opacity: 0;
	transition: .9s opacity ease-in-out;
}
.body_visible {
	opacity: 1;
}
.mobile{
        display:none;
    }
.logo img{
    max-height: 300px;
}

.bg {
  background-image: url('.././images/bg.jpg');
  height: 100%; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* for high resolution display */

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {

.bg {
  background-image: url('.././images/bg_ret.jpg');
  height: 100%; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

}
.container.text{
  background: rgba(0,0,0,0.7);
  border-radius: 10px;
  padding:20px;
    margin-bottom:20px;
}
.content {
  min-height: calc(100vh);
}
.container{
    padding-bottom: 20px;
}
h1{
    font-size: 2rem;
    color:#ffffff;
}
h2{
    font-size: 1.5rem;
}
h3{
    font-size: 1.3rem;
}
.shop a{
    display: block;
}
a {
    color:#EA0B7B;
}
a:hover{
    color:#EA0B7B;
    text-decoration: underline;
}
.btncontainer{
    position:relative;
    height:25em;
}
.icons{
    width: 100%;
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%); 
}
.shop {
    width:33%;
    float:left;
}

.logobtn{
    max-height:300px;
    padding: 10px;
}
.footer a{
    color:#60261C;
    cursor: pointer;
}
.footer a:hover{
     text-decoration: underline;
}
.footer{
    color:#ffffff;
    width:100%;
    height:80px;
    padding:30px 0;
    position: absolute;
    bottom: 0;
}

@media (orientation: landscape){
    .bg {
      background-image: url('.././images/bg.jpg');
    }
}

@media (orientation: portrait){
    .bg {
      background-image: url('.././images/bg_m.jpg');
    }
    .shop {
        width: 90%;
        float: none;
        margin: auto;
    }
}

@media screen and (max-width:1024px) {
    .desktop{
        display:none;
    }
    .mobile{
        display:block;
    }
    
}

@media screen 
  and (device-width: 600px) 
  and (device-height: 960px)  
  and (orientation: landscape){
    .btncontainer {
        height: 30em;
    }
      .logobtn {
        max-height: 250px;
    }
}

@media only screen 
  and (min-device-width: 800px) 
  and (max-device-height: 1200px) 
  and (orientation: landscape){
    .btncontainer {
        
    }
}

@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (orientation: portrait){
    .btncontainer {
        height: 40em;
    }
}

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
    
    .btncontainer {
        height: 40em;
    }
    .shop {
        width: 70%;
    }
}

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {
    .btncontainer {
        height: 25em;
    }
    .logo img {
        max-height: 250px;
    }
    
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
    .btncontainer {
        height: 24em;
    }
    .logobtn {
        max-height: 120px;
    }
    h1 {
    font-size: 1.5rem;
    }
    .logo img {
        max-height: 110px;
    }
}

@media only screen 
  and (min-device-width: 360px)
  and (max-device-height: 740px) 
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 4) { 
    .btncontainer {
        position: relative;
        height: 30em;
    }
    .logobtn {
        max-height: 150px;
    }
}

@media only screen 
  and (device-width: 411px)
  and (device-height: 823px)
  and (orientation: portrait){ 
    .logo img {
        max-height: 130px;
    }
    .btncontainer {
        height: 35em;
    }
    .logobtn {
        max-height: 150px;
    }
    h1 {
        font-size: 1.5rem;
    }
}

@media only screen and (min-width: 360px) and (max-width: 767px) and (orientation: portrait) {  
    .logo img {
        max-height: 130px;
    }
    .logobtn {
        max-height: 150px;
    }
    .btncontainer {
        height: 35em;
    }
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (orientation: portrait) { 
    .btncontainer {
        height: 35em;
    }
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
    .btncontainer {
        height: 30em;
    }
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
    .logo img {
        max-height: 70px;
    }
      .btncontainer {
        height: 15em;
    }
      h1 {
    font-size: 1.5rem;
    }
    .logobtn {
        max-height: 150px;
    }
}

@media only screen  
  and (min-device-width: 360px)
  and (max-device-height: 640px) 
  and (orientation: portrait) {
    .logo img {
        max-height: 120px;
    }
    .btncontainer {
        position: relative;
        height: 27em;
    }
    .logobtn {
        max-height: 130px;
    }
    h1 {
    font-size: 1.5rem;
    }
}

@media only screen 
  and (min-device-width: 360px) 
  and (max-device-height: 640px)
  and (orientation: landscape) {
    .logobtn {
        max-height: 150px;
    }
    h1 {
    font-size: 1.5rem;
    }
    .logo img {
        max-height: 100px;
    }
    .shop {
        width: 33%;
        float: left;
    }
    .btncontainer {
        height: 11em;
    }
}

@media only screen 
  and (device-width: 414px)
  and (device-height: 846px)
  and (orientation: portrait){ 
    .btncontainer {
        height: 35em;
    }
    .logobtn {
        max-height: 160px;
    }
    h1 {
    font-size: 1.5rem;
    }
}

@media only screen 
  and (device-width: 414px)
  and (device-height: 846px)
  and (orientation: landscape){ 
    .logobtn {
        max-height: 180px;
    }
    h1 {
        font-size: 1.5rem;
    }
}

@media only screen 
  and (device-width: 414px)
  and (device-height: 896px)
  and (orientation: portrait){ 
    .logo img {
        max-height: 130px;
    }
    .btncontainer {
        height: 43em;
    }
    .logobtn {
        max-height: 200px;
    }
    h1 {
    font-size: 1.5rem;
    }
}

@media only screen 
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (max-device-height: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
    .logo img {
        max-height: 100px;
    }
    .logobtn {
        max-height: 130px;
    }
    .btncontainer {
        height: 10em;
    }
    h1 {
    font-size: 1.5rem;
    }
}