@font-face {
    font-family: 'Cooper Black';
    src: url(Cooper Black Regular.ttf);
    src: url(cooper-black-webfont.woff);
    font-display: swap;
}
@font-face {
    font-family: 'Microma';
    src: url(Michroma-Regular.ttf);
    font-display: swap;
}
@font-face {
    font-family: 'Candara';
    src: url(Candara.ttf);
    font-display: swap;
}
*{
margin:0;
padding:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box}

body,html{
margin:0;
padding:0;
background-image: url(http://www.transparenttextures.com/patterns/beige-paper.png);
}
#topsec{position:absolute;top:0%;left:0%;height:25%;width:100%;background-color:#110603;}
#lakub{position:absolute;top: 15%;font-size:6vmin;font-family:"Cooper Black";width:100%;text-align:center;color:#d4af37;}
#separ{position:absolute;top:7%;height:2%;width:100%;left:0%;z-index:0;}
#lacho{position:absolute;top: 50%;font-size:4vmin;font-family:"Candara";width:100%;text-align:center;color:#cfb53b;}
#digral{position:absolute;top:25%;height:15%;width:75%;align-items:center;}
#lagral{position:absolute;top:5%;left:10%;width:75%;text-align:center;font-size:3vmin;color:black;font-family:"Candara";margin-top:4%;}
#imgral{position:absolute;top:15%;width:15%;height:20%;left:77%;border:2px solid #cfb53b;box-shadow:5px 5px 5px black;z-index:1;}
#imagr{position:absolute;top:0%;left:0%;width:100%;height:100%;z-index:1;}
#disab{position:absolute;top:55%;height:40%;width:100%;}
#lasab{position:absolute;top:5%;width:100%;text-align:center;font-size:3.5vmin;font-family:"Candara";color:#3c1810;}

/* Tarjetas Reversibles */
 .box {width: 80%;margin: 2% auto;position: relative;}
 #card-container {position: relative;margin: 30px;width: 200px;height: 200px;z-index: 1;float: left;perspective: 1000px;}

 #boxt {position:absolute;top:15%;left:30%;width:50%;}
 #card-containert {position: relative;margin: 30px;width: 200px;height: 200px;z-index: 1;float: left;perspective: 1000px;}

 img {width: 200px;height: 200px;}
 #card, #card2, #card3,#card4, #card5, #card6, #card7, #card8, #card10, #card11 {width: 100%;height: 100%;margin: 10%;transform-style: preserve-3d;transition: all 0.8s linear;box-shadow: 5px 5px 15px rgba(0, 0, 0, .3);}
 #card:hover, #card2:hover, #card3:hover, #card4:hover, #card5:hover, #card6:hover, #card7:hover, #card8:hover, #card10:hover, #card11:hover {transform: rotateY(180deg);box-shadow: -5px 5px 15px rgba(0, 0, 0, .3);}
/* #card .back, #card2 .back, #card3 .back, #card4 .back, #card5 .back, #card6 .back, #card7 .back, #card8 .back, #card10 .back, #card11 .back {transform: rotateY(-180deg);}*/
 #card11{margin-left:15%;}
 .face {position: absolute;width: 100%;height: 100%;backface-visibility: hidden;}
 .back {display: block;transform: rotateY(180deg);box-sizing: border-box;padding: 10px;text-align: center;opacity: 0.85;background: #f9f3e4;}
 h4, p {font-family: 'Candara';}
 h4 {font-size: 3vmin;padding-top: 15px;color: #dd899e;font-family:"Candara";font-weight:600;}
 p {font-size: 2.3vmin;}
 #bc1,#bc2,#bc3,#bc4,#bc5,#bc6,#bc7,#bc8{border:2px solid black;border-radius:12px;background-color:#371007;color:white;box-shadow:2px 2px 2px black;position:absolute;top:60%;left:15%;width:70%;height:20%;font-family:"Candara";font-weight:600;font-size:2.4vmin;}
 #bc1:hover,#bc2:hover,#bc3:hover,#bc4:hover,#bc5:hover,#bc6:hover,#bc7:hover,#bc8:hover{background-color:#f1c8c0;color:#2c2422;}
.prec{font-size:2vmin;font-family:"Candara";font-weight:600;color:#685b14;position:absolute;top:90%;width:100%;text-align:center;}
#tabnut{position:absolute;top:68%;left:35%;width:30%;height:70%;border:2px solid black;box-shadow:5px 5px 5px black;background-color:white;z-index:10;display:none;}
#imnut{position:absolute;top:2%;left:2%;width:96%;height:96%;}
#clnut{position:absolute;top:-2%;left:96%;width:6%;height:4%;border-radius:50%;background-color:darkred;color:white;text-align:center;font-weight:600;font-size:2vmin;}
#clnut:hover{cursor:pointer;background-color:red;}
#dinot{position:absolute;top:150%;width:100%;height:15%;}
#lacons{position:absolute;top:-5%;width:100%;text-align:center;font-size:2.8vmin;font-family:"Candara";font-weight:500;color:#3c1810;height:25%;}
#lapers{position:absolute;top:40%;left:10%;width:80%;text-align:center;font-size:2.7vmin;font-family:"Candara";font-weight:600;color:#525109;height:60%;background-color:#f9d9d2;}
#lpers1{animation: mymove 1s infinite alternate;font-family:"Candara";font-size:3vmin;font-weight:600;color:#97992f;}
@keyframes mymove {
    from {opacity:0;}
    to {opacity: 1;}
}
#dimper{position:absolute;top:170%;height:45%;width:100%;}
#limper{position:absolute;top:5%;width:100%;text-align:center;font-family:"Candara";font-size:3vmin;color:#5a1709;}
#ditruf{position:absolute;top:230%;height:50%;width:100%}
#latruf{position:absolute;top:5%;width:100%;text-align:center;font-size:3.3vmin;font-family:"Candara";font-weight:600;color:#5e180a;}
#ltrude{position:absolute;top:15%;width:100%;text-align:center;font-size:2.8vmin;font-weight:500;color:#3c1810;font-family:"Candara";}
.tdes{position:absolute;top:50%;left:5%;width:90%;font-size:2vmin;font-family:"Candara";color:black;}
#conTest {width: 90%;height:150%;position: relative;left:5%;top:-20%;overflow:hidden;}
.carousel .panel {height:100%;background-size: cover;background-position: center;position: absolute;}
.carousel{height:100%;top:30%;margin-left:20px;}
@media only screen and (min-device-width:300px) and (max-device-width:900px) and (orientation: portrait){
/*@media (max-width:320px)  {*/ 
   /* Celular PORTRAIT*/
  #topsec{height:12%;width:110%;}
  #separ{top:-5%;width:110%;}
  #lakub{font-size:7vmin;top:30%;width:90%;}
  #lacho{font-size:5vmin;top:60%;width:90%;}
  #digral{top:12%;height:12%;width:100%;}
  #lagral{font-size:3.3vmin;width:80%;top:40%;}
  #imgral{top:9%;width:17%;height:7%;left:75%;}
  #disab{top:33%;}
  #lasab{top:-5%;}
  #tabnut{top:38%;left:20%;width:60%;height:40%;}
  #clnut{top:-3%;left:95%;width:8%;height:6%;font-size:4mvin;padding-top:10px;}
  #dinot{top:350%;}
  #dimper{top:365%;}
  #lacons{top:5%;}
  #conTest {height:50%;top:2%;}
  #ditruf{top:385%;}
  #boxt{top:23%;left:7%;}
  .tdes{font-size:1.7vmin;}
}
/*@media only screen and (orientation: landscape){*/
@media only screen and  (min-width:320px) and (max-width:1000px) and (orientation: landscape)  { 
   /* Celular LANDSCAPE */
  #topsec{height:25%;width:100%;}
  #separ{top:-15%;}
  #lakub{font-size:7vmin;top:15%;}
  #lacho{font-size:6vmin;top:55%;}
  #digral{top:25%;height:25%;width:100%;}
  #lagral{font-size:4vmin;top:2%;}
  #imgral{top:5%;width:13%;height:25%;left:80%;}
  #tabnut{top:100%;left:30%;width:40%;height:90%;}
  #clnut{top:-3%;left:98%;width:5%;height:7%;font-size:4mvin;padding-top:5px;}
  #dinot{top:460%;}
  #dimper{top:485%;}
  #lacons{top:5%;}
  #conTest {height:150%;top:-5%;}
  #ditruf{top:560%;}
  #boxt{top:15%;left:35%;}
}

/* DIVIDER BOTTOM */
.divider-container-bottom {display: flex;justify-content: center;min-width: 100%;background-color: transparent;position: relative;z-index: 10;margin: 0 auto;}
.divider-bottom::before {content: "";position: absolute;bottom: -150px;left: 0;display: block;height: 100px;width: 100%;background-image: url("https://blz-contentstack-images.akamaized.net/v3/assets/blt3452e3b114fab0cd/bltf52d4b60a1a29098/border_bottom.png");background-position: center;background-repeat: no-repeat;background-color: transparent;overflow: hidden;z-index:10;}