:root
{
--borde-claro:#1EA0FB;
--color-base:#2A2C3B;
--tabla-clara: #DADADA;
--texto-oscuro:#2f3542;
--color-link:#1EA0FB;
--link-oscuro:#163E5B;
--color-texto:#E6E6E6;
--color-tbody:#2F3243;
--dark-tbody:#111116;
--cover:#373030;
--caja-oscura:#241e1e;
--color-cajas:rgb(41, 39, 39);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Lato", Arial, sans-serif;
}

/**
 * FONTS
 * */
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/S6uyw4BMUTPHjxAwXjeu.woff2") format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/S6uyw4BMUTPHjx4wXg.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

a {
    text-decoration: none;
    color: #fff;
}

[class*="col-"] {
    float: left;
    padding: 15px;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 16.66%;}
.col-4b {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-6b {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.col-13 {width: 33%;}

.clean {
   text-decoration: none;
}

.list__link {
    background-color: transparent;
    color: white;
    text-decoration: none;
    margin: 0 1.8em;
    transition: all 0.7s ease-in-out;
}

.list__link--active {
    background-color: red;
    width: 8em;
    height: 2.5em;
    text-align: center;
    padding: 0.6em;
    margin-right: .5em;
}


.list__link:hover {
    color: #9c9898;
    /*transition: 0.5;*/
}


.list__menu {
    height: 3em;
    margin-left: 1em;
    margin-right: 3em;
    transition: 0.5s;
    position: relative;
    z-index: 10;
}

.animado {
  color: #FFF;
  position: relative;
  text-decoration: none;
}



.animado::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  border-radius: 4px;
  background-color: #EEE;
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform .3s ease-in-out;
}

.animado:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}


.hijoCentrador
{
margin:0 auto;display: inline-block;  position: absolute;  top: 50%;  left: 50%;transform: translate(-50%, -50%);
}


    
 
 .hover-1 {
  --c: #1095c1; /* the color */
  --s: .15em;
  
  line-height:1.1em;
  padding-bottom: calc(2.1*var(--s));
  background: 
    conic-gradient(from 135deg at top,var(--c) 90deg,#0000 0) 
      left 0 bottom var(--s)/calc(2*var(--s)) var(--s) repeat-x,
    conic-gradient(from -45deg at bottom,var(--c) 90deg,#0000 0) 
      left var(--s) bottom 0/calc(2*var(--s)) var(--s) repeat-x;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) 0/var(--_p,0%) padding-box no-repeat;
  transition: .5s;
}
.hover-1:hover {
  --_p: 100%;
  color: var(--c);
}


.hover-3 {
  font-weight:bold;      
  --b: 0.1em;   /* the thickness of the line */
  --c: #FFFF00; /* the color */
  
  color: #FFF;
  padding-block: var(--b);
  background: 
    linear-gradient(var(--c) 50%,#FFFF00 0) 0% calc(100% - var(--_p,0%))/100% 200%,
    linear-gradient(var(--c) 0 0) 0% var(--_p,0%)/var(--_p,0%) var(--b) no-repeat;
  -webkit-background-clip: text,padding-box;
          background-clip: text,padding-box;
  transition: .3s var(--_s,0s) linear,background-size .3s calc(.3s - var(--_s,0s));
}
.hover-3:hover {
  --_p: 100%;
  --_s: .3s;
}



div[class*=box] {
  height: 33.33%;
  width: 100%; 
  display: flex;
  justify-content: center;
  align-items: center;
}

.box-1 { background-color: #0; }
.box-2 { background-color: #0; }
.box-3 { background-color: #0; }

.btn {
  line-height: 50px;
  height: 50px;
  text-align: center;
  width: 250px;
  cursor: pointer;
}

/* 
========================
      BUTTON ONE
========================
*/
.btn-one {
  color: #FFF;
  transition: all 0.3s;
  position: relative;
}
.btn-one span {
  transition: all 0.3s;
}
.btn-one::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transition: all 0.3s;
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-top-style: solid;
  border-bottom-style: solid;
  border-top-color: rgba(255,255,255,0.5);
  border-bottom-color: rgba(255,255,255,0.5);
  transform: scale(0.1, 1);
}
.btn-one:hover span {
  letter-spacing: 2px;
}
.btn-one:hover::before {
  opacity: 1; 
  transform: scale(1, 1); 
}
.btn-one::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: all 0.3s;
  background-color: rgba(255,255,255,0.1);
}
.btn-one:hover::after {
  opacity: 0; 
  transform: scale(0.1, 1);
}


/* 
========================
      BUTTON TWO
========================
*/
.btn-two {
  color: #FFF;
  transition: all 0.5s;
  position: relative; 
}
.btn-two span {
  z-index: 2; 
  display: block;
  position: absolute;
  width: 100%;
  height: 100%; 
}
.btn-two::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: all 0.5s;
  border: 1px solid rgba(255,255,255,0.2);
  background-color: rgba(255,255,255,0.1);
}
.btn-two::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: all 0.5s;
  border: 1px solid rgba(255,255,255,0.2);
  background-color: rgba(255,255,255,0.1);
}
.btn-two:hover::before {
  transform: rotate(-45deg);
  background-color: rgba(255,255,255,0);
}
.btn-two:hover::after {
  transform: rotate(45deg);
  background-color: rgba(255,255,255,0);
}


/* 
========================
      BUTTON THREE
========================
*/
.btn-three {
  color: #FFF;
  transition: all 0.5s;
  position: relative;
}
.btn-three::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: rgba(255,255,255,0.1);
  transition: all 0.3s;
}
.btn-three:hover::before {
  opacity: 0 ;
  transform: scale(0.5,0.5);
}
.btn-three::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transition: all 0.3s;
  border: 1px solid rgba(255,255,255,0.5);
  transform: scale(1.2,1.2);
}
.btn-three:hover::after {
  opacity: 1;
  transform: scale(1,1);
}




/* COVER */
.button-cover {
        text-align:left;
        width:10em;
  position: relative;
  overflow: hidden;
  /*border: 1px solid #18181a;*/
  border:0;
  color: #FFF;
  display: inline-block;
  font-size: 8pt;
  line-height: auto;
  padding: 14px 16px 6px;
  padding-left:0px;
  text-decoration: none;
  cursor: pointer;
  background: #535050;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-cover span:first-child {
  position: relative;
  transition: color 600ms cubic-bezier(0.48, 0, 0.12, 1);
  z-index: 1;
}

.button-cover span:last-child {
  color: white;
  display: block;
  position: absolute;
  bottom: 0;
  transition: all 500ms cubic-bezier(0.48, 0, 0.12, 1);
  z-index: 100;
  opacity: 0;
  top: 50%;
  left: 50%;
  transform: translateY(225%) translateX(-50%);
  height: 14px;
  line-height: 13px;
}

.button-cover:after {
  content: "";
  position: absolute;
  bottom: -50%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--cover);
  transform-origin: bottom center;
  transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1);
  transform: skewY(9.3deg) scaleY(0);
  z-index: 50;
}

.button-cover:hover:after {
  transform-origin: bottom center;
  transform: skewY(9.3deg) scaleY(2);
}

.button-cover:hover span:last-child {
  transform: translateX(-50%) translateY(-50%);
  opacity: 1;
  transition: all 900ms cubic-bezier(0.48, 0, 0.12, 1);
}



.envio {
  display: block;
  width: 200px;
  height: 40px;
  line-height: 40px;
  font-size: 1em;
  text-decoration: none;
  color: #FFF;
  border: 1px solid #FFF;
  letter-spacing: 2px;
  text-align: center;
  position: relative;
  transition: all .35s;
  border-radius:10px;
}

.envio span{
  position: relative;
  z-index: 2;
}

.envio:after{
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
    border-radius:10px;
  background: #FF0000;
  transition: all .35s;
}

.envio:hover{
  color: #fff;
}

.envio:hover:after{
  width: 100%;
}



/*
 BUTTON STYLING
*/

.botonesFX {
  position: relative;
  color: white;
  width: 256px;
  height: 64px;
  line-height: 64px;
  transition: all 0.3s;
  span {
    transition: all 0.3s;
    tranform: scale(1, 1);
  }
}

.botonesFX::before, .botonesFX::after {
  content: '';
  position: absolute;
  transition: all 0.3s;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.botonesFX-one::before {
  left: 4px;
  z-index: 1;
  
  opacity: 0;
  background: rgba(255, 255, 255, 0.1);
  transform: scale(0.1, 1);
}

.botonesFX-one:hover::before {
  opacity: 1;
  transform: scale(1, 1);
}

.botonesFX-one::after {
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.botonesFX-one:hover::after {
  transform: scale(1, .1);
  opacity: 0;
}

/* BTN TWO */
.botonesFX-two::before, .botonesFX-two::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  z-index: 1;
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.botonesFX-two:hover::after {
  animation-name: rotatecw;
  animation-duration: 2s;
}
.botonesFX-two:hover::before {
  animation-name: rotateccw; 
  animation-duration: 3s;
}
.botonesFX-two:hover::after, .botonesFX-two:hover::before {
  left: 96px;
  width: 64px;
  
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotatecw {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

@keyframes rotateccw {
    from {transform: rotate(0deg);}
    to {transform: rotate(-360deg);}
}

/* BTN THREE */
.botonesFX-three::before {
  opacity: 0;
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1, 0.1);
}

.botonesFX-three:hover::before {
  opacity: 1;
  transform: scale(1, 1);
}

.botonesFX-three::after {
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.botonesFX-three:hover::after {
  transform: scale(1, .1);
  opacity: 0;
}

/* BTN FOUR */

.botonesFX-four:hover span {
  transform: scale(1.2, 1.2);
}

.botonesFX-four::before {
  opacity: 0;
  background: rgba(255, 255, 255, 0.1);
  transform: scale(0.1, 0.1);
}

.botonesFX-four:hover::before {
  opacity: 1;
  transform: scale(1, 1);
}

.botonesFX-four::after {
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.botonesFX-four:hover::after {
  transform: scale(0, 0);
  opacity: 0;
}

/* BTN FIVE */
.botonesFX-five::before {
  transition: transform 0.15s, 0.15s border-radius 0.15s;
  opacity: 0;
  background: rgba(255, 255, 255, 0.1);
  transform: scale(0.1, 0.1);
  border-radius: 50%;
}

.botonesFX-five:hover::before {
  opacity: 1;
  transform: scale(1, 1);
  border-radius: 0;
}

.botonesFX-five::after {
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.botonesFX-five:hover::after {
  opacity: 0;
}

/* BTN SIX */
.botonesFX-six::before {
  opacity: 0;
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.3, 1.3);
}

.botonesFX-six:hover::before {
  opacity: 1;
  transform: scale(1, 1);
}

.botonesFX-six::after {
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.botonesFX-six:hover::after {
  transform: scale(0, 0);
  opacity: 0;
}

hr.style-one {
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
}

    .main {
        width: 100%;
        height: 80vh;
    }
    
/*MOSTRAR MAS*/
    
.expandido {
        height:auto;
        transition: all .6s;
}

.contraido {
        height:10em;
        max-height:10em;
        overflow:hidden;
        transition: all .6s;
}
    

.checkbox_toggle {
    display: none;
}


    
    body > article{
        padding-left: 10vmin;
        padding-right: 10vmin;
        /* width: 80vmin; */
    }
    body > footer,
    body > article{
        margin-top: 3%;
    }

/*SLIDER*/

        .EscritorioB{ display: block; }
        .EscritorioI{ display: inline-block; }  
        .MovilB{ display: none !important; }
        .MovilI{ display: none !important; }                 

.iconXLarge{
	font-size:128px;
}

.iconLarge{
	font-size:96px;
}
.iconMedium{
	font-size:64px;
}
.iconSmall{
	font-size:32px;
}
@media screen and (max-width: 900px){
        .EscritorioB{ display: none !important; }
        .EscritorioI{ display: none !important; }   
        .MovilB{ display: block; }
        .MovilI{ display: inline-block; } 
        .NoMovil{display:none !important;}             
    }


    /* .botoncambiatexto */
    .botoncambiatexto {
      display: inline-block;
      position: relative;
      text-decoration: none;
      vertical-align: middle;
      overflow: hidden;
      cursor:pointer;
    }
    .botoncambiatexto:hover { background:rgba(255, 255, 255, 0.1);; }
    .botoncambiatexto span {
        transition: 0.4s;
        transition-delay: 0.1s;
    }
    .botoncambiatexto:before,
    .botoncambiatexto:after {
        content: '';
        position: absolute;
        /*top: 0.67em;*/
        left: 0;
        width: 100%;
        text-align: center;
        opacity: 0;
        transition: .4s,opacity .6s;
    }

    /* :before */
    .botoncambiatexto:before {
        content: attr(data-hover);
        transform: translate(-150%,0);
    }
    /* :after */
    .botoncambiatexto:after {
      content: attr(data-active);
      transform: translate(150%,0);
    }
    /* Span on :hover and :active */
    .botoncambiatexto:hover span,
    .botoncambiatexto:active span {
        opacity: 0;
        transform: scale(0.3);
    }
    /* :before pseudo-element on :hover 
        and :after pseudo-element on :active */
    .botoncambiatexto:hover:before,
    .botoncambiatexto:active:after {
        opacity: 1;
        transform: translate(0,0);
        transition-delay: .4s;
    }
    .botoncambiatexto:active:before {
        transform: translate(-150%,0);
        transition-delay: 0s;
    }

/**RUEDA IMAGENES**/

.rueda{
  position:relative;
  width:160px;
  height:100px;
  transform-style:preserve-3d;
  animation:rotate 35s linear infinite;
}

@keyframes rotate{
  from{
    transform:perspective(1200px) rotateY(0deg);
  }
  
  to{
    transform:perspective(1200px) rotateY(360deg);
  }
}

.rueda span{
  position:absolute;
  width:100%;
  height:100%;
  transform-origin:center;
  transform-style:preserve-3d;
  transform:rotateY(calc(var(--i) * 45deg)) translateZ(380px);
}

.rueda span img{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:contain;
  /*filter: grayscale(1);*/
  -webkit-filter: grayscale(1);
  filter: grayscale(1);  
  background:transparent;
  transition-duration: 1s;
}

.sangria{
text-indent: 2em;
margin-bottom:1em;
}