*{
  font-size: 100%;
  font-family: 'Poppins', sans-serif;
}

#loader-page-virtual{
	position: fixed;
	width: 100%;
	height: 100vh;
	background: #fff url('assets/load.gif') no-repeat center center;	
	z-index: 3;
}

.card-body {
    min-height: 90px;
}

.card-text{
  font-size: 10pt;
  text-align: center;
}

canvas.deepar { 
    width: 75%;
    margin: 15px auto 0 auto;
  /*position: static;*/
  /*  height: 480px;*/
  /*  width: 370px;*/
    border: 0px none; 
    border-radius: 10px;
    display: block; 
    /*margin-left: 6.8%;*/
    /*margin-top: 30px;*/
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
#containerV{
    background-image: url("assets/bg-wave.png");
    height: 1280px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    }
#container-wrapper{
    padding-top:30px;
    padding-bottom:60px;
    padding-right:50px;
}
#loader-wrapper{
    width: 100%;
    height: 100%;
    /* background-image: url("assets/bg-wave.png"); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
   
}
  .blank-content{
    max-width: 900px;
    min-height:600px;
    border: none;
    background-color: #fff;
    background-size: cover;
  }
  
  .title-blank{
      color: #000;
      margin-left: 350px;
  }
  .navbar{
    background-color: #738b77 !important;
    box-shadow: 0 -1px 2px 2px rgba(0,0,0,.2);
}
.navbar .navbar-nav .nav-link{
  color: #fff;
}
.navbar .navbar-nav .nav-link:hover {
  color: yellow;
}

  body {
    margin: 0px;
    padding: 0px;    
       
  }
  .model-click {
    margin-left: 280px;
  }
  .model{
  border: none;
  }
  .model img{
  height: 300px;
  width: 250px;
  border-radius: 15px;
  }

  .btn-primary{
    text-align: right !important;
    margin-top: 10% !important;
    background-color: #2e9347 !important;
    border-color: #2e9347 !important;
    -webkit-appearance: none;
  }
 .title-product-text{
    margin-top: 10px;
    color: #000;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
  }
  .badge {
    height: 35px;
    width: 35px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    color: white;
    
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
  }
  
  .badge:active{
        border: 1.5px solid #2e9347;
  }
  
  .badge:hover{
      opacity: 0.4;
  }
  
  .btn-primary:hover{
      opacity: 0.5;
  }
  
  .card:hover{
      opacity: 0.5;
  }
  
  
  .back-button {
    position: absolute;
    margin-top: 1%;
    height: 35px;
    width: 35px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    background: none;
    margin-left: 3%;
    
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
  }

  .title-color-text{
    color: #2e9347;
  }

  .color-wrapper a{ 
    float: left;
    margin: 5px;
  }

  .hide-batris-glossy-1{
    display: none;
  }
  .hide-batris-glossy-2{
    display: none;
  }
  .hide-batris-glossy-3{
    display: none;
   }
  
  .hide-batris-matte-1{
    display: none;
  }
  .hide-batris-matte-2{
    display: none;
  }
  .hide-batris-matte-3{
    display: none;
  }
  .hide-batris-matte-4{
    display: none;
  }
  .hide-batris-matte-5{
    display: none;
  }
  .hide-batris-matte-6{
    display: none;
  }
  .hide-batris-matte-7{
    display: none;
  }
 .hide-batrisyia-cream-matte-1{
   display: none;
 }
 .hide-batrisyia-cream-matte-2{
  display: none;
}
.hide-batrisyia-cream-matte-3{
  display: none;
}
.hide-batrisyia-cream-matte-4{
  display: none;
}
.hide-batrisyia-cream-matte-5{
  display: none;
}
.hide-batrisyia-cream-matte-6{
  display: none;
}
.hide-batrisyia-lip-gel-1{
  display: none;
}
.hide-batrisyia-lip-glossier-1{
  display: none;
}
.hide-batrisyia-lip-glossier-2{
  display: none;
}
.hide-two-way-cake-1{
  display: none;
}
.hide-two-way-cake-2{
  display: none;
}
.hide-two-way-cake-3{
  display: none;
}
#click-show-1:active{
  border-color: #2e9347;
}
#click-show-2:active{
  border-color: #2e9347;
}
#click-show-3:active{
  border-color: #2e9347;
}
#click-show-4:active{
  border-color: #2e9347;
}
#click-show-5:active{
  border-color: #2e9347;
}
@media (max-width: 1368px) and (min-width:992px) {
  canvas.deepar { 
    /*position: static;*/
    /*margin-top: 30px;*/
    /*  height: 480px;*/
    /*  width: 370px;*/
    /*  border: 0px none; */
    /*  border-radius: 5px;*/
    /*  background-color: black; */
    /*  display: block; */
      /*margin-left: 7.1%;*/
      
      -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
  
    .blank-content{
      margin-top: 140px;
    border-radius: 15px;
    }
  
    .blank-canvas { 
      height: 550px;
      width: 350px;
      border: 0px none; 
      border-radius: 5px;
      background-color: black; 
      display: block; 
      margin-left: 6%;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      
    }
  
  .back-button {
    position: absolute;
    margin-top: 1%;
    margin-left: 3.5%;
    height: 35px;
    width: 35px;
    color: #2e9347;
}
#containerV{
    background-image: url("assets/bg-wave.png"); 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    max-height: 1500px;
    }
    #container-wrapper{
    padding-top:30px;
    padding-bottom:30px;
    padding-right:50px;
}
#container-wrapper{
  max-width: 900px;
}
.model-click{
  margin-left: -25px;
}
#loader-wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 5rem;
    width: 100%;
    height: 100%;
    /* background-image: url("assets/bg-wave.png"); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
  }
  .title-blank{
      color: #000;
      margin-left: 0px;
  }
}

/* ipad air ++ */
@media (max-width: 991px) and (min-width: 819px) {
  .blank-content{
    border-radius: 15px;
    margin-top: 150px;
    max-width: 750px;
    min-height: 250px;
  }
  #container-wrapper{
    max-width: 750px;
    min-height: 250px;
  }
  .blank-canvas{
    height: 550px;
    width: 360px;
    border: 0px none; 
    border-radius: 5px;
    background-color: black; 
    display: block; 
    margin: auto; 
    margin-left: 0px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  .card-text{
    font-size: 9pt;
  }
  canvas.deepar { 
    /*position: static;*/
    /*margin-left: 10px;*/
    margin: 40px auto 0 auto;
    /*  height: 400px;*/
    /*  width: 300px;*/
    /*  border: 0px none; */
    /*  border-radius: 5px;*/
    /*  background-color: black; */
    /*  display: block; */
      
    /*  -webkit-tap-highlight-color: rgba(0,0,0,0);*/
    }

  #containerV{
    background-image: url("assets/bg-wave.png"); 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
     max-height: 1500px;
    }
    
    #loader-wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 5rem;
    width: 100%;
    height: 100%;
    /* background-image: url("assets/bg-wave.png"); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
  }
  .title-blank{
      color: #000;
      margin-left: 0px;
  }
  .model-click {
    margin-left: -50px;
  }
}
/* ipad mini */
@media (max-width: 818px) and (min-width: 767px) {
  .blank-content{
    border-radius: 15px;
    margin-top: 150px;
    max-width: 750px;
    min-height: 250px;
  }
  .blank-canvas{
    height: 400px;
    width: 300px;
    border: 0px none; 
    border-radius: 5px;
    background-color: black; 
    display: block; 
    margin: auto; 
    margin-left: 0px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  .card-text{
    font-size: 9pt;
  }
  canvas.deepar { 
    margin: 40px auto 0 auto;
    /*position: static;*/
    /*margin-left: 1%;*/
    /*  height: 550px;*/
    /*  width: 360px;*/
    /*  border: 0px none; */
    /*  border-radius: 5px;*/
    /*  background-color: black; */
    /*  display: block; */
      
    /*  -webkit-tap-highlight-color: rgba(0,0,0,0);*/
    }
    #container-wrapper{
    padding-top:30px;
    padding-bottom:30px;
    padding-right:0px;
     }
 
 #containerV{
    background-image: url("assets/bg-wave.png"); 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    max-height: 1500px;
    }
    #loader-wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 5rem;
    width: 100%;
    height: 100%;
    /* background-image: url("assets/bg-wave.png"); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
  }
  .title-blank{
      color: #000;
      margin-left: 0px;
  }
  .model-click {
    margin-left: -50px;
  }
  #container-wrapper{
    max-width: 750px;
    min-height: 250px;
  }
} 

/* Samsung a51/a71 iphone xr*/
@media (max-width: 766px) and (min-width: 377px) {
  .blank-content{
    border-radius: 15px;
    margin-top: 150px;
    max-width: 360px;
    min-height: 100px;
  }
  .blank-canvas{
    position: static;
    height: 400px;
    width: 300px;
    border: 0px none; 
    border-radius: 5px;
    background-color: black; 
    display: block; 
    margin-top: 12.7%;
    margin-left: 0px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  .card-text{
    font-size: 9pt;
  }
  canvas.deepar { 
    /*position: static;*/
    /*margin-top: 25px;*/
    /*margin-left: 27px;*/
    /*  height: 400px;*/
    /*  width: 310px;*/
    /*  border: 0px none; */
    /*  border-radius: 5px;*/
    /*  background-color: black; */
    /*  display: block; */
      
    /*  -webkit-tap-highlight-color: rgba(0,0,0,0);*/
    }
    .back-button {
      position: absolute;
      margin-top: 1%;
      margin-left: 7%;
      height: 35px;
      width: 35px;
      color: #2e9347;
  }
  
 #containerV{
    background-image: url("assets/bg-wave.png"); 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    max-height: 1500px;
    }
    #container-wrapper{
    padding-top:0px;
    padding-bottom:0px;
    padding-right:0px;
}
#loader-wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 5rem;
    width: 100%;
    height: 100%;
    /* background-image: url("assets/bg-wave.png"); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
  }
  .title-blank{
      color: #000;
      margin-left: 0px;
  }

  .model-click {
    margin-left: 15px;
  }
}
/* samsung s8+ */
@media (max-width: 373px) and (min-width: 0px) {
  .blank-content{
    border-radius: 15px;
    margin-top: 150px;
    max-width: 360px;
    min-height: 100px;
  }
 
  .blank-canvas{
    position: static;
    height: 400px;
    width: 300px;
    border: 0px none; 
    border-radius: 5px;
    background-color: black; 
    display: block;
    margin-top: 13.4%;
    margin-left: 0px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }

  .card-text{
    font-size: 8pt;
    text-align: center;
  }
  canvas.deepar { 
    /*position: static;*/
    /*margin-top: 25px;*/
    /*margin-left: 2px;*/
    /*  height: 400px;*/
    /*  width: 310px;*/
    /*  border: 0px none; */
    /*  border-radius: 5px;*/
    /*  background-color: black; */
    /*  display: block; */
      
    /*  -webkit-tap-highlight-color: rgba(0,0,0,0);*/
    }

    .back-button{
      margin-left: 4%;
    }

    
   #containerV{
    background-image: url("assets/bg-wave.png"); 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    max-height: 1500px;
    }
    
    #container-wrapper{
    padding-top:0px;
    padding-bottom:0px;
    padding-right:0px;
}
#loader-wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 5rem;
    width: 100%;
    height: 100%;
    /* background-image: url("assets/bg-wave.png"); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
  }
  .title-blank{
      color: #000;
      margin-left: 0px;
  }
  .model-click {
    margin-left: 0px;
  }
  .model-click {
    margin-left: 15px;
  }
}


/*iphone 12 */
@media (max-width: 399px) and (min-width: 390px) {
  .blank-content{
    border-radius: 15px;
    margin-top: 150px;
    max-width: 360px;
    min-height: 100px;
    
  }
 
  canvas.blank-canvas{
    position: static;
    height: 400px;
    width: 300px;
    border: 0px none; 
    border-radius: 5px;
    background-color: black; 
    display: block;
    margin-top: 4.5%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }

  canvas.deepar { 
    /*position: static;*/
    /*margin-top: 25px;*/
    /*margin-left: 16px;*/
    /*  height: 400px;*/
    /*  width: 310px;*/
    /*  border: 0px none; */
    /*  border-radius: 5px;*/
    /*  background-color: black; */
    /*  display: block; */
      
    /*  -webkit-tap-highlight-color: rgba(0,0,0,0);*/
    }
    #containerV{
    background-image: url("assets/bg-wave.png"); 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    max-height: 1500px;
    }
    #container-wrapper{
    padding-top:0px;
    padding-bottom:0px;
    padding-right:0px;
}
#loader-wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 5rem;
    width: 100%;
    height: 100%;
    /* background-image: url("assets/bg-wave.png"); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
  }
  .title-blank{
      color: #000;
      margin-left: 0px;
  }
  .model-click {
    margin-left: 15px;
  }
}
/*iphone 6 7 8 SE*/
@media (max-width: 389px) and (min-width: 365px) {
  .blank-content{
    border-radius: 15px;
    margin-top: 150px;
    max-width: 360px;
    min-height: 100px;

  }
 
  canvas.blank-canvas{
    position: static;
    height: 400px;
    width: 300px;
    border: 0px none; 
    border-radius: 5px;
    background-color: black; 
    display: block;
    margin-top: 5%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }

  .card-text{
    font-size: 9pt;
    text-align: center;
  }
  canvas.deepar { 
    /*position: static;*/
    /*margin-top: 25px;*/
    /*margin-left: 8px;*/
    /*  height: 400px;*/
    /*  width: 310px;*/
    /*  border: 0px none; */
    /*  border-radius: 5px;*/
    /*  background-color: black; */
    /*  display: block; */
      
    /*  -webkit-tap-highlight-color: rgba(0,0,0,0);*/
    }
    
   #containerV{
    background-image: url("assets/bg-wave.png"); 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    max-height: 1500px;
    }
    
    #container-wrapper{
    padding-top:0px;
    padding-bottom:0px;
    padding-right:0px;
}
#loader-wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 5rem;
    width: 100%;
    height: 100%;
    /* background-image: url("assets/bg-wave.png"); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
  }
  .title-blank{
      color: #000;
      margin-left: 0px;
  }
  .model-click {
    margin-left: 15px;
  }
 }