* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


html{
    font-size: 20;
    font-family: "Lato";
}

body{
    background-color: #ffffff;
    list-style: none;

    
}




:root{
    --navcolor:#11161f;
    --colorsecondary: #277ec5;
    --colorbar: #275ba7;
    --yellowcolor: #FFDD00;
    --browcolor: #93662b;
    --fontmain: "Mulish";
    --fontsecondary: "Barlow";

}

/* KEYFRAMES */

@keyframes iconscale {
    0%   {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    
    }
    50%  {
        -webkit-transform: scale(0.7);
        -moz-transform: scale(0.7);
        -o-transform: scale(0.7);
        transform: scale(0.7);
    
    }
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
  }


  @keyframes btnscale{
    0%   {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    
    }
    100%  {
        -webkit-transform: scale(0.6);
        -moz-transform: scale(0.6);
        -o-transform: scale(0.6);
        transform: scale(0.6);
    
    }
    
  }

/*PULSE BUTTON*/
.pulse-button {
    position: relative;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
    display: block;
    width: 80px;
    height: 80px;
    font-size: 1.3em;
    font-weight: light;
    font-family: 'Trebuchet MS', sans-serif;
    text-transform: uppercase;
    text-align: center;
    line-height: 100px;
    letter-spacing: -1px;
    color: white;
    border: none;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    box-shadow: 0 0 0 0 #fff;
    -webkit-animation: pulse 1.5s infinite;
  }
  
  .pulse-button:hover {
    -webkit-animation: none;
  }
  
  @-webkit-keyframes pulse {
    0% {
      -moz-transform: scale(0.9);
      -ms-transform: scale(0.9);
      -webkit-transform: scale(0.9);
      transform: scale(0.9);
    }
    70% {
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -webkit-transform: scale(1);
      transform: scale(1);
      box-shadow: 0 0 0 50px rgba(255, 255, 255, 0.089);
    }
    100% {
      -moz-transform: scale(0.9);
      -ms-transform: scale(0.9);
      -webkit-transform: scale(0.9);
      transform: scale(0.9);
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.123);
    }
  }
  

/* GLOBAL CLASS */

.tp-banner-container{
    height: 100vh;
}

.element-center{
    display: flex;
    align-items: center;
    justify-content: center;
}

body a{
    text-decoration: none!important;
}



/* NAV TOP */

.navbar-collapse .navbar-nav a{
    font-size: 16px;
    font-family: "Mulish" sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    color: #000!important;
}

.navbar-collapse .navbar-nav li{
    padding: 4px 10px;
}

.navbar-collapse .navbar-nav li:hover{
    background-color: #e7e7e7;
}

.nav-top{
    background-color: var(--navcolor);
    height: 40px;
    z-index: 999999;
    position: relative;
}
.container-nav-top{
    padding: 6px 0px 3px 25px;
}

.container-nav-top a{
    text-decoration: none;
}

#nav-responsive{
   display: none;
}

.container-nav-top span i{
    margin-right: 10px;
}

.container-nav-top span{
    padding-left: 20px;
    color: #959CA7;
    font-size: 14px;
    font-family: "Mulish";
    font-weight: 600;
}

.btn-slider-buy{
    margin: 60px 0 0 0!important;
}

.btn-slider-buy a{
    width: 60px!important;
    padding: 15px 40px!important;
    color: #a737f5!important;
    font-size: 20px!important;
    font-family: var(--fontmain);
    background-color: #fff!important;
    border-radius: 40px;
    -webkit-box-shadow: 9px 11px 5px -8px rgba(0,0,0,0.45);
-moz-box-shadow: 9px 11px 5px -8px rgba(0,0,0,0.45);
box-shadow: 9px 11px 5px -8px rgba(0,0,0,0.45);
}

.btn-slider-buy a:hover{
    background-color: #a737f5!important;
    color: #fff!important;
    transition: all .7s ease!important;
}

.container-nav-top span:hover{
    color: #fff;
}

/* SLIDER MAIN */

.slider-main{
    height: auto;
    width: 100%;
    position: relative;
}

#navbar{
    position: fixed;
    width: 100%;
    height: 120px;
    background-color:transparent;
    color: #fff;
    transition: 0.4s;
    z-index: 999;
    top: 0;
    padding: 40px 0;
    left: 0;

}

#navbar.sticky{
    background-color: #161c26;
    color: #fff;
    top: 0;
    padding: 0px 0;
}

.items-nav span{
    margin-right: 40px;
    text-align: center;
}

.items-nav span:hover{
    border-top: 2px solid #ffffff88;
    padding-top: 20px;
}

.items-nav a{
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-family: var(--fontsecondary) sans-serif;
}

.whats-btn a{
    text-decoration: none;
    color: #fff;
    font-family: var(--fontmain) sans-serif;
    font-size: 12px;
    letter-spacing: 3px;
    background-color: #00BB2D;
    width: 100px;
    padding:18px 20px;
    border-radius: 3px;
    font-weight: 500;
}

.whats-btn:hover{
    color: #fff;
    transition: all .7s ease;
    -webkit-transform: scale(0);
    transform: scale(0.9);

}


.title-slider1{
    font-family: 'Mulish', sans-serif!important;
    text-transform: uppercase;
    color: #fff;
    text-align: center;

}

.title-slider1 p:nth-child(2){
    font-size: 30px!important;
    margin-bottom: 5px!important;
}
.title-slider1 p:nth-child(4){
    font-size: 15px!important;
    
}
.title-slider1 h2{
    font-family: var(--fontsecondary);
    font-size: 80px!important;
    font-weight: 800;
}

.title-slider2{
    font-family: 'Mulish', sans-serif!important;
    text-transform: uppercase;
    color: #fff;
    text-align: center;

}

.img-logo{
    max-width: 100px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.title-slider2 p{
    margin: 0!important;
    font-weight: 300;
    font-size: 30px;
}
.title-slider2 h2{
    margin: 0!important;
    font-size: 80px;
    font-weight: 600;
    font-family: var(--fontsecondary);
}

.btn-action-slider{
    position: absolute;
    bottom: -20px;
    left: 25%;
}

.box-slider-img a{
    background-color: #fabd29;
    font-size: 16px;
    padding: 1em 3em;
    text-transform: uppercase;
    color: #275ba7!important;
    border-radius: 20px;
    -webkit-box-shadow: 1px 3px 8px 0px rgba(0,0,0,0.20);
-moz-box-shadow: 1px 3px 8px 0px rgba(0,0,0,0.20);
box-shadow: 1px 3px 8px 0px rgba(0,0,0,0.20);
    font-family:  'Mulish', sans-serif!important;
    transition: all .7s ease;
}


.box-slider-img a span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.1s;
  }
  
  .box-slider-img a span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    bottom: 3px;
    right: -20px;
    transition: 0.5s;
    font-size: 40px;
  }
  
  .box-slider-img a:hover span {
    padding-right: 5px;
  }
  
  .box-slider-img a:hover span:after {
    opacity: 1;
    right: -20;
  }

  .box-slider-img a:hover{
      background-color: #e6a40a;
      color: #fff!important;
  }

/* SECTION SECOND */



.second-section{
    
    /*background-image: url(/img/bg-map.png);*/
    background-repeat: no-repeat;
    background-position: top 0 left -600px;
    
    
}

.slider-top-second{
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2em;
}

.slider-second-section{
    background-color: #fff;
    height: 100%;
    width: 70%;
    margin: 0 30px;
    overflow: hidden;
    padding:  0 2rem;
    text-align: center;

}

.slider-second-section:hover{
    transition: all .5s ease;
    -webkit-box-shadow: 1px 3px 8px 0px rgba(0,0,0,0.40);
-moz-box-shadow: 1px 3px 8px 0px rgba(0,0,0,0.40);
box-shadow: 1px 3px 8px 0px rgba(0,0,0,0.40);
}

.slider-second-section .item-slider-icon .icon-top svg{
    width: 60px;
    fill: #275ba7;
    margin-bottom: 15px;
}

.slider-second-section .item-slider-icon p{
    color: #11161fc9;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 0;
    font-family: "Muli", sans-serif;
}

.slider-second-section .item-slider-icon{
    height: 180px;
    width: 100px;
    display: inline-block;
    text-align: center;
    padding: 30px 0;
    margin-bottom: 6px;
    border-right: .5px solid rgba(211, 211, 211, 0.438);
    
}
.slider-second-section .item-slider-icon:hover{
    background-color: rgba(223, 223, 223, 0.637);
    border-bottom: 2px solid #275ba7!important;
}

.guia-content{
    margin: 80px 0 0 0;
    padding: 0 20px;
}

.guia-content .card{
    border: none;
    -webkit-box-shadow: 7px 9px 5px -6px rgba(0,0,0,0.10);
    -moz-box-shadow: 7px 9px 5px -6px rgba(0,0,0,0.10);
    box-shadow: 7px 9px 5px -6px rgba(0,0,0,0.10);
    margin-bottom: 20px;
}
.guia-content .card p{
    font-family: var(--fontmain);
    color: var(--colorbar);
    font-size: 18px;
    font-weight: 600;
}

.guia-content .card  span{
    color: gray;
}

.guia-content .card h3{
    font-size: 20px;
    font-family: var(--fontmain);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--colorbar);

}

.image-card{
    width: 100%;
    height: 100%;
    padding: 15px;
    position: relative;
}

.card .image-card span{
    color: #fff;
    font-weight: 400;
    background-color: #F64444;
    padding: 1px 10px;
    position: absolute;
    top: 30px;
    right: 30px;
}


/* PARALLAX SECTION */

.parallax-content{
    background-image: url(/img/back-at.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    height: 600px;
    display: flex;
    justify-content: center;

}

.parallax-content .text-parallax{
    text-align: center;
    margin-top: 7em;
}

.parallax-content .text-parallax span:nth-child(1){
    display: block;
    font-family: "sacramento";
    font-size: 4.5em;
    line-height: 1.2em;
    color: #fff;
}

.parallax-content .text-parallax span:nth-child(2){
    display: block;
    font-family: var(--fontsecondary);
    font-weight: 800;
    line-height: 1.2em;
    font-size: 4em;
    color: #fff;
}

/* SECTION SALE */



.count-sale .section-count{
    height: 250px;
    position: relative;
    background-color: #fff;
}

.count-section-into{
    width: 90%;
    position: absolute;
    top: -100px;
    background-color: #fff;
    border-top: .6em solid var(--colorbar);
    border-radius: 0 8px 0 0;
}

.numbers-count span{
    font-family: var(--fontmain);
    color: #000;
    font-size: 55px;
    font-weight: 600;
}
.numbers-count p{
    font-family: var(--fontmain);
    color: var(--colorbar);
    font-size: 16px;
    font-weight: 600;
}

.numbers-count .item-count:nth-child(1),.item-count:nth-child(2),.item-count:nth-child(3){
    border-right: .1px solid #e7e7e7;
}

.numbers-count{
    padding-left: 12em;
    
}
.numbers-count .row{
    height: 250px;
}

.count-sale{
    height: auto;
    
}

.count-sale .section-sale{
    height: 180px;
    position: relative;
    background-color:#F0F3F6;
}

.sale-section-into{
    height: auto;
    margin-left: 15em;
    position: absolute;
    top: -40px;
}

.content-img-sale{
    width: 100%;
    height: 100%;
}

.text-sale-section{
    background-color: #275ba7;
    height: 100%;
    padding: 10px 15px 30px 60px;
}

.section-sale .text-sale-section span{
    font-family: var(--fontmain);
    font-size: 60px;
    font-weight: 800;
    color: var(--yellowcolor);
    
}
.section-sale .text-sale-section p{
    font-family: var(--fontsecondary);
    font-size: 40px;
    font-weight: 600;
    color: #fff;
    line-height: 5px;
}

.section-sale .text-sale-section a{
   background-color: var(--yellowcolor);
    display: inline-block;
    padding: 20px 40px;
    color: #000;
    font-size: 14px;
    border-radius: 5px;
    font-weight: 600;
    font-family: var(--fontmain);
    margin-top: 30px;
    letter-spacing: 2px;
    -webkit-box-shadow: 7px 9px 5px -6px rgba(0,0,0,0.29);
-moz-box-shadow: 7px 9px 5px -6px rgba(0,0,0,0.29);
box-shadow: 7px 9px 5px -6px rgba(0,0,0,0.29);
}

.section-sale .text-sale-section a:hover{
    background-color: #00265f;
    color: var(--yellowcolor);
    transition:  all .7s ease;
    opacity: .8;
}



/* MENU SLIDER */

.menu{
    height: 600px;
    background-color: #F0F3F6;
    /*background-image: url('../img/bg-map.png');*/
    background-position: center;
    background-repeat: no-repeat;
}


.box-slider-coment{
    display: flex;
    justify-content: center;
    margin-top: 3em;
    width: 100%;
    height: 100%;
}

.slider-item-coment{
    clip-path: polygon(30% 0%, 100% 0, 100% 83%, 33% 84%, 25% 100%, 14% 83%, 0 83%, 0 0);
    background-color: #fff;
    position: relative;
    width: 470px;
    max-width: 800px;
    height: 100%;
    padding: 50px 45px 55px 95px;
    transition: all 0.6s;
    z-index: 1;

}

.pater-coment{
    filter: drop-shadow(-1px 6px 3px rgba(141, 141, 141, 0.24));
    height: 300px;
}

.box-slider-coment .pater-coment:nth-child(1){
    margin-left: 40px;
}



.img-coment{
    position: absolute;
    left: -60px;
    top: 50px;
    border-radius: 100px;
    border: 8px solid #F0F3F6;
    z-index: 2;
    background-color: transparent;
    -webkit-transition: all .5s linear;
}
.img-coment img{
    border-radius: 600px;
    padding: 4px;

}

.content-coment p{
    color: #275ba7;
    font-size: 18px;
    font-weight: 500;
    padding-bottom: 10px;
}
.content-coment span{
    color: #275ba7;
    font-size: 16px;
    font-weight: 500;
    
}
.content-coment h4{
    font-size: 20px;
    
}

.quote-coment i{
    position: absolute;
    right: 60px;
    font-size: 40px;
    bottom: 120px;
    color: #F0F3F6;
    -webkit-transition: all .5s linear;
}


.slider-item-coment:hover{  
    cursor: pointer;
}

.content-slider-coment{
    
    width: 70%;
    height: 80%;
    margin: 0 40px;
   
    
}

/* SECTION ABOUT */

.about-section{
    width: 100%;
    height: 800px;
    background-image: url(/img/fondovid.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.about-section .title{
    padding-top: 100px;
}

.about-section .title h2{
    color: #FABD29;
    
}
.about-section .title p{
    color: #fff;
    
}

.content-video-about{
    width: 100%;
    text-align: center;
    margin-top: 60px;
}

.content-video-about span{
    position: absolute;
    top: 60%;
    left: 50%;
    padding-right: -50%;
}

.content-video-about i{
    color: #275ba7;
    font-size: 20px;
    position: absolute;
    top: 40%;
    left:40%;
    
}

/* SECTION BOTTOM */

.bottom-section{
    height: 350px;
    width: 100%;
}

.buttons-bottom{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    text-align: center;
}


.buttons-bottom .content-buttons i{
    font-size: 60px;
    font-weight: 100;
    color: #275ba7;
    
}


.icon-content{
    margin-bottom: 1.2em;
    transition: all .3s ease;
}



.buttons-bottom h3{
    font-size: 22px;
    margin-bottom: 20px;
    color: #000;
    
}

.buttons-bottom p{
    color: #275ba7;
}

.buttons-bottom .content-buttons{
    padding: 2em;
    transform: scale(1.0);
    transition: all .7s ease;
}
.buttons-bottom .content-buttons:hover{
    background-color:#275ba7;
    border-radius: 5px;
    transition: all .7s ease;
    
}

/* FOOTER */

.footer-page{
    width: 100%;
    height: 750px;
    
}
.footer-page .content-copy{
    margin: 0 15em;
    height: 100%;
}

.footer-page .footer-top{
    background-color: #161c26;
    height: 670px;
    width: 100%;
    background-size: 130%;
    background-repeat: no-repeat;
}

.footer-page .footer-top .content-info-footer{
    padding: 0 15em;
    padding-top: 8em;
    width: 100%;
}

.footer-page .footer-top a{
    color: #abafb5;
    font-size: 16px;
    font-weight: 500;
    display: block;
    margin: 1em 0;
}

.footer-page .footer-top p{
    color: #abafb5;
    font-size: 16px;
    font-weight: 500;
    line-height: 2em;
    padding: 1.5em 0;
}

.footer-page .footer-top h4{
    color: #fff;
    font-weight: 500;
}

.footer-page .footer-bottom{
    background-color: #11161f;
    height: 80px;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.089);
}
.footer-page .copy-text{
    padding-top: 25px;
    color: rgb(172, 172, 172);
    font-weight: 500;
}

.footer-top .col-info hr{
   border-color: rgba(255, 255, 255, 0.185);
}

.footer-top .col-info a{
    margin: 0;
}

.footer-top .col-info i{
    color: #FABD29;
    font-size: 50px;
    padding: 0px 10px 10px 0;
}
.footer-top .col-info span{
    margin: 0;
    color: rgb(172, 172, 172);
    font-weight: 500;
}

.footer-top .sus-footer input[type="text"]{
    width: 100%;
    height: 60px;
    border: none;
    background-color: white;
    color: #000;
    font-size: 18px;
    font-family: var(--fontmain);
    border-radius: 5px;
    font-weight: 600;
    text-align: left;
    padding: 1em;
    margin: 1em 0 0 0;
}



.footer-top .sus-footer{
    margin-bottom: 2em;
}

.footer-top .sus-footer input[type="text"]:focus{
    border-color: #275ba7!important;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 14, 139, 0.075), 0 0 8px #3f85ee!important;
	  box-shadow: inset 0 1px 1px rgba(0, 14, 139, 0.075), 0 0 8px#3881f0!important;
}
.footer-top .sus-footer button{
    width: 50%;
    height: 60px;
    border: none;
    background-color: #275ba7;
    color: #fff;
    font-size: 14px;
    font-family: var(--fontsecondary);
    border-radius: 3px;
    letter-spacing: 3px;
    font-weight: 600;
    margin-top: 1em;
    
}

.footer-top .sus-footer button:hover{
    cursor: pointer;
    opacity: .8;
    
}


.social-footer{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.social-footer a{
    background-color: #fff;
    border-radius: 200px;
    color: var(--colorbar);
    font-size: 15px;
    padding: 10px 14px;
    margin-right: 10px;
}

@media screen and (max-width:1240px){

    #loginModal .close-button{
        margin: 5px;
    }

    #loginModal .modal-content-custom {
            
        padding: 1rem .2em;
        width: 50%;
        
    }

    .footer-page .footer-top .content-info-footer {
        padding: 8em 6em 0px;
        width: 100%;
    }
    .footer-top{
        height: auto;
    }

    .footer-page .content-copy{
        margin: 0 3em;
    }
    .section-sale .text-sale-section p{
        font-size: 30px;
    }
    .section-sale .text-sale-section a{
       padding: 10px 30px; 
    }

    .layer-1-slider{
        margin-left: 2em;
    }

    .whats-btn a {
        
        width: 80px;
        padding: 12px 10px;
       
        
    }

}



@media screen and (max-width:1028px){
    .footer-page{
        height: auto;
    }
    .footer-page .footer-top{
        height: auto;
    }

    .footer-top .sus-footer button{
        font-size: 12px;
        width: 100%;
    }

    .footer-page .footer-top h4{
        font-size: 1.2rem;
    }
    .count-sale .section-count{
        overflow: hidden;
         height: auto;
     }

     
    .numbers-count{
        padding: 0 2em; 
    }
    .count-section-into{
        width: 100%;
        position: static;
        background-color: #fff;
        border-top: none;
        border-radius: none;
    }

    .sale-section-into{
        margin-left: none;
        position: static;
        top: 0;
        margin-left: 0em;
        width: 100%;
    }

    .footer-top .col-info i{
        font-size: 40px;
    }

    .count-sale .section-sale{
        height: auto;
        position: static;
        width: 100%;
    }

    .about-section{
        height: 600px;
        background-size: auto;
    }

    .buttons-bottom .content-buttons{
        padding: 1em;
    }

    .bottom-section{
        height: auto;
        margin: 2em 0 4em 0;
    }

}

@media screen and (max-width:992px){
    .nav-top{
        display: none;
    }
    #nav-responsive{
        display: flex;
        justify-content: space-between;
        
    }
    
    .navbar{
        display: none;  
    }

    #navbar{
        height: 100px;
        padding: 0px 0;
        
    }

    #navbar.sticky{
        background-color: #ffffff;
        height: auto;
        
    }
    .box-slider-img a{
       font-size: 14px;
        padding: 1em 2em;
    
    }
    
    .slider-main{
        margin-top: 90px;
    }

    .btn-slider-buy{
        margin: 30px 0 0 0!important;
    }
    
    .btn-slider-buy a{
        width: 40px!important;
        padding: 8px 30px!important;
        color: #a737f5!important;
        font-size: 20px!important;
        
       
    }
    
}





@media screen and (max-width: 768px){

    #loginModal .form-box .img-form-login img{
        max-width:120px!important;
        max-height:120px!important;
    }

    .close-button{
        margin: 0px;
    }

    #loginModal .modal-content-custom {
            
        padding: 1rem .2em;
        width: 90%;
        
    }


    .section-sale .text-sale-section p{
        font-size: 25px;
    }

    .title-slider1 h2{
       
        font-size: 40px!important;
        font-weight: 800;
    
    }

    .layer-1-slider{
        margin-left: 1em;
    }

    .title-slider1 p:nth-child(4){
        font-size: 10px!important;
        
    }

    .tp-banner-container{
        height: 50vh;
    }
    

    .box-slider-img img{
        width: 600px;
    }

    .title-slider2 p{
        margin: 0!important;
        font-weight: 300;
        font-size: 30px;
    }
    .title-slider2 h2{
        margin: 0!important;
        font-size: 130px;
        font-weight: 600;
        font-family: var(--fontsecondary);
    }


    .btn-action-slider{
        
        bottom: -20px;
        left: 30%;
    }

    .container-nav-top{
        padding: 6px 0px 3px 0;
        text-align: center;
    }
    .pater-coment{
        height: auto;
        width: auto;
    }
    .slider-item-coment{
        height: auto;
        padding: 40px 45px 85px 65px;
        width: 100%;
    }

    .content-slider-coment{
        width: 100%;
    }

    .quote-coment i{
        right: 40px;
        font-size: 35px;
        bottom: 90px;
    }

    .content-coment p{
        font-size: 16px;
    }
    .content-coment h4 {
        font-size: 18px;
    }

    .title h2{
       font-size: 40px;
    }

    .numbers-count .item-count:nth-child(1), .item-count:nth-child(2), .item-count:nth-child(3){
        border-right: 0px;
        border-bottom: 1px solid #ececec;
    }
    .guia-content{
        margin-bottom: 5em;
    }
    .footer-page .footer-top .content-info-footer{
        height: auto;
        padding: 0 1em;
    }

    .parallax-content .text-parallax{
        margin-top: 4em;
    }

    .parallax-content{
        padding-bottom: 2em;
    }

    .bottom-section{
        height: auto;
        margin: 3em 0;
    }

    .numbers-count .item-count{
        margin: 1em 0;
    }

    .numbers-count{
        position: relative;
        width: 100%;
        margin: .5em 0 4em 0;
        height: auto;
    }

    .section-sale{
        position: static;
        height: auto;
    }

    .section-sale{
        height: 100%;
        width: 100%;
        position: static;
    }
    .sale-section-into{
        position: static;
        margin-left: 0;

    }
    .buttons-bottom{
        align-items: flex-start;
        
    }

    .parallax-content .text-parallax span:nth-child(1){
        font-size: 3em;
    }

    .parallax-content .text-parallax span:nth-child(2){
        font-size: 2em;
    }

    .parallax-content{
        height: 200px;
        background-attachment: inherit;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .about-section{
        position: static;
        height: auto;
        margin-bottom: 2rem;
        background-size: auto;
        padding-bottom: 2rem;
    }

    .about-section .title{
        padding-top: 50px
    }

    .content-video-about{
        margin-top: 40px;
    }

    .footer-page .footer-top .content-info-footer{
        padding: 2em 1em 0px;
    }

    .footer-page .footer-top .content-info-footer{
        margin: 0;
    }
    .footer-page .content-copy{
        margin: 0 1em;
    }
    .footer-page .footer-top{
        height: auto;
    }
    .footer-page .footer-bottom{
        height: 100px;
        
    }
}


@media screen and (max-width:640px){
    .numbers-count{
       
        height: 600px;
    }

    .parallax-content .text-parallax{
        margin-top: 2em;
        height: auto;
    }

    .parallax-content .text-parallax span:nth-child(2){
        font-size: 1.5em
    }

    .btn-action-slider{
        left: 5%;
    }

    .btn-action-slider a{
        padding: .5em 1em;
    }

    .btn-slider-buy{
        margin: 20px 0 0 0!important;
    }
    .btn-slider-buy a{
        width: 20px;
        padding: .3em 1em;
    }

    .title-slider1 h2{
        font-family: var(--fontsecondary);
        font-size: 30px!important;
        font-weight: 800;
    }

    .layer-1-slider{
        margin-left: 1em;
    }

    .content-video-about span{
        position: relative;
    }

    
    


    
}

/* Card Payment Styles */
.form-container .field-container:first-of-type {
    grid-area: name;
}

.form-container .field-container:nth-of-type(2) {
    grid-area: number;
}

.form-container .field-container:nth-of-type(3) {
    grid-area: expiration;
}

.form-container .field-container:nth-of-type(4) {
    grid-area: security;
}

.field-container input {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.field-container {
    position: relative;
}

.form-container {
    display: grid;
    grid-column-gap: 10px;
    grid-template-columns: auto auto;
    grid-template-rows: 90px 90px 90px;
    grid-template-areas: "name name""number number""expiration security";
    max-width: 400px;
    padding: 20px;
    color: #707070;
}

label {
    padding-bottom: 5px;
    font-size: 13px;
}

input {
    margin-top: 3px;
    padding: 15px;
    font-size: 16px;
    width: 100%;
    border-radius: 3px;
    border: 1px solid #dcdcdc;
}

.ccicon {
    height: 38px;
    position: absolute;
    right: 6px;
    top: calc(50% - 5px);
    width: 60px;
}

/* CREDIT CARD IMAGE STYLING */
.preload * {
    -webkit-eweqtransition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
}

#ccsingle {
    position: absolute;
    right: 15px;
    top: 20px;
}

#ccsingle svg {
    width: 100px;
    max-height: 60px;
}

.creditcard svg#cardfront,
.creditcard svg#cardback {
    width: 100%;
    -webkit-box-shadow: 1px 5px 6px 0px black;
    box-shadow: 1px 5px 6px 0px black;
    border-radius: 22px;
}

#generatecard{
    cursor: pointer;
    float: right;
    font-size: 12px;
    color: #fff;
    padding: 2px 4px;
    background-color: #909090;
    border-radius: 4px;
    cursor: pointer;
    float:right;
}

/* CHANGEABLE CARD ELEMENTS */
.creditcard .lightcolor,
.creditcard .darkcolor {
    -webkit-transition: fill .5s;
    transition: fill .5s;
}

.creditcard .lightblue {
    fill: #03A9F4;
}

.creditcard .lightbluedark {
    fill: #0288D1;
}

.creditcard .red {
    fill: #ef5350;
}

.creditcard .reddark {
    fill: #d32f2f;
}

.creditcard .purple {
    fill: #ab47bc;
}

.creditcard .purpledark {
    fill: #7b1fa2;
}

.creditcard .cyan {
    fill: #26c6da;
}

.creditcard .cyandark {
    fill: #0097a7;
}

.creditcard .green {
    fill: #66bb6a;
}

.creditcard .greendark {
    fill: #388e3c;
}

.creditcard .lime {
    fill: #d4e157;
}

.creditcard .limedark {
    fill: #afb42b;
}

.creditcard .yellow {
    fill: #ffeb3b;
}

.creditcard .yellowdark {
    fill: #f9a825;
}

.creditcard .orange {
    fill: #ff9800;
}

.creditcard .orangedark {
    fill: #ef6c00;
}

.creditcard .grey {
    fill: #bdbdbd;
}

.creditcard .greydark {
    fill: #616161;
}

/* FRONT OF CARD */
#svgname {
    text-transform: uppercase;
}

#cardfront .st2 {
    fill: #FFFFFF;
}

#cardfront .st3 {
    font-family: 'Source Code Pro', monospace;
    font-weight: 600;
}

#cardfront .st4 {
    font-size: 54.7817px;
}

#cardfront .st5 {
    font-family: 'Source Code Pro', monospace;
    font-weight: 400;
}

#cardfront .st6 {
    font-size: 30.1112px;
}

#cardfront .st7 {
    opacity: 0.6;
    fill: #FFFFFF;
}

#cardfront .st8 {
    font-size: 24px;
}

#cardfront .st9 {
    font-size: 36.5498px;
}

#cardfront .st10 {
    font-family: 'Source Code Pro', monospace;
    font-weight: 300;
}

#cardfront .st11 {
    font-size: 16.1716px;
}

#cardfront .st12 {
    fill: #4C4C4C;
}

/* BACK OF CARD */
#cardback .st0 {
    fill: none;
    stroke: #0F0F0F;
    stroke-miterlimit: 10;
}

#cardback .st2 {
    fill: #111111;
}

#cardback .st3 {
    fill: #F2F2F2;
}

#cardback .st4 {
    fill: #D8D2DB;
}

#cardback .st5 {
    fill: #C4C4C4;
}

#cardback .st6 {
    font-family: 'Source Code Pro', monospace;
    font-weight: 400;
}

#cardback .st7 {
    font-size: 27px;
}

#cardback .st8 {
    opacity: 0.6;
}

#cardback .st9 {
    fill: #FFFFFF;
}

#cardback .st10 {
    font-size: 24px;
}

#cardback .st11 {
    fill: #EAEAEA;
}

#cardback .st12 {
    font-family: 'Rock Salt', cursive;
}

#cardback .st13 {
    font-size: 37.769px;
}

/* FLIP ANIMATION */
.container {
    perspective: 1000px;
}

.creditcard {
    width: 100%;
    max-width: 400px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: -webkit-transform 0.6s;
    -webkit-transition: -webkit-transform 0.6s;
    transition: transform 0.6s;
    transition: transform 0.6s, -webkit-transform 0.6s;
    cursor: pointer;
}

.creditcard .front,
.creditcard .back {
    position: absolute;
    width: 100%;
    max-width: 400px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    color: #47525d;
}

.creditcard .back {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.creditcard.flipped {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}



/* MODAL STYLE */

       
#loginModal .nav-item .nav-link.active{
    background-color:#f1f1f1;
    color: var(--colorbar);
}

#loginModal .nav-pills .nav-link{
    color: #000;
    font-weight: 600;
}



#loginModal .form-box, .form-box-reg{
    padding:1em .8em;
}

#loginModal .form-box .img-form-login{
    width:100%;
    display:flex;
    justify-content:center;
}

#loginModal .form-box .img-form-login img{
    max-width:120px!important;
}

#loginModal .form-box form p{
    font-size: 12px;
    font-weight: 400;
    padding-bottom: 1em;
}


#loginModal .form-box input[type="submit"],#loginModal .form-box input[type="button"]{
    font-size: 12px;
    background-color: var(--colorbar);
    width: auto;
    margin-top: 1em;
    color: #fff;
}

#loginModal .form-box input[type="submit"]:hover{
    background-color: #FFDD00;
    color: var(--colorbar);
}
#loginModal .form-box input[type="text"],input[type="number"],input[type="email"],input[type="password"] {
    font-size: 12px;
    color: #000!important;
    font-weight: 200;
}

#loginModal .form-box select{
    font-size: 12px;
    color: #000;
}




#loginModal .form-box-reg form p{
    font-size: 12px;
    font-weight: 600;
    padding-bottom: 1em;
}


#loginModal .form-box-reg input[type="button"]{
    font-size: 12px;
    background-color: var(--colorbar);
    width: auto;
    margin-top: 1em;
    color: #fff;
    font-weight: 600;
    font-family: "Barlow", sans-serif;
    letter-spacing: 3px;
}

#loginModal .form-box-reg input[type="button"]:hover{
    background-color: #FFDD00;
    color: var(--colorbar);
    border: none;
}

#loginModal .form-box-reg input[type="text"],input[type="number"],input[type="email"],input[type="password"] {
    font-size: 12px;
    color: #000!important;
}

#loginModal .form-box-reg select{
    font-size: 12px;
    color: #000;
}


#loginModal a:visited {
    color: var(--colorbar);
  }
#loginModal a:hover {
    color: #fbbd25;
  }

.modal-custom {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.315);
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.modal-content-custom {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 1rem 1.5rem;
    width: 30%;
    border-radius: 0.5rem;
}
.close-button {
    width: 4rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    padding: 5px;
    z-index: 9999;
    font-size: 2em;
    color: #000;
    margin: -10px;
}
.close-button:hover {
    opacity: .7;
}
.show-modal {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
    z-index: 1000;
}

.modal-custom ul li{
    list-style: none;
}


.header-examen{
    display:flex;
    justify-content:space-between;
    margin: .2em 5em;
    color: #000;
    font-size: 16px;

}
.name-examen{
    max-width: 100%;
}

.hide-box{
    display: none;
}
.form-pregunta{
    display: flex;
    padding-bottom: 5px;
}
.form-pregunta label{
    font-size: 16px;
   
    
}
.form-pregunta input[type="radio"]{
    width: 20px;
    height: 2em;
}
.pregunta{
    font-size: 18px;
    line-height: 1.5em;
    color: #000;
    margin-bottom: 1.5em;
}
.title-pregunta{
    font-size: 20px;
    font-weight: 600;
    color: #000;
    margin-bottom: 1em;
}

@media screen and (max-width: 578px ){ 
    .header-examen{
        margin: .2em 3em;

    }

    .side-bar{
      width: 180px!important;

      padding-left: .5em!important;
    }
    .name-examen{
        max-width: 200px;
    }

    .content-section {
      margin: 0 1em;
  }

  .tab-materias span{
    display: block;
  }

 }


 .containerExam ul{
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  
  .containerExam ul li{
    color: #000000;
    display: block;
    position: relative;
    float: left;
    width: 100%;
    height: auto;
    font-weight: 500;
  }
  
  .containerExam ul li input[type=radio]{
    position: absolute;
    visibility: hidden;
  }
  
  .containerExam ul li label{
    display: inline-block;
    position: relative;
    font-weight: 500;
    font-size: 1.20em;
    padding: 16px 20px 16px 70px;
    line-height: 1.5em;
    height: auto;
    z-index: 9;
    cursor: pointer;
    -webkit-transition: all 0.25s linear;
  }
  
  
  .containerExam ul li label:hover{
    color: #0b79f7;
  }
  
  .containerExam ul li .check{
    display: block;
    position: absolute;
    border: 2px solid #000;
    border-radius: 100%;
    height: 20px;
    width: 20px;
    top: calc(30%);
    left: 20px;
    z-index: 5;
    transition: border .25s linear;
    -webkit-transition: border .25s linear;
  }
  
   .containerExam ul li .check label:hover{
    border: 2px solid #0b79f7;
  }
  
   .containerExam ul li .check::before {
    display: block;
    position: absolute;
    content: '';
    border-radius: 100%;
    height: 10px;
    width: 10px;
    top: 3px;
    left: 2.5px;
    margin: auto;
    transition: background 0.5s linear;
    -webkit-transition: background 0.5s linear;
  }

  .containerExam ul li label:hover ~ .check::before{
    background: #0b79f7;
  }
  
   .containerExam input[type=radio]:checked ~ .check {
    border: 2px solid #0b79f7;
  }
  
   .containerExam ul li label:hover ~ .check {
    border: 2px solid #0b79f7;
  }
  
   .containerExam input[type=radio]:checked ~ .check::before{
    background: #0b79f7;
  }
  
  .containerExam  input[type=radio]:checked ~ label{
    color: #0b79f7;
  }

  .current-question{
      font-weight: 600;
      font-size: 18px;
  }
  
  .color-false{
    background: #ffd1d1a1;
  }
  .color-true{
    background: #2ce41f6b;
  }

  #table-respuestas > tbody > tr > td{
    font-size: 15px;
    text-align: left;
    border-top: 2px solid #f3f3f3;
  }
  #table-respuestas{
    max-height: 400px;
  }

  .pregunta table tr td{
    font-family: inherit;
    font-size:  18px;
    color: #000;
  }

   .table-outborders > thead > tr > th, .table-outborders > tbody > tr > th, .table-outborders > tfoot > tr > th, .table-outborders > thead > tr > td, .table-outborders > tbody > tr > td, .table-outborders > tfoot > tr > td{
    border-top: none;
  }



  .side-bar{
    width: 250px;
    padding-left: 2.8em;
    transition: .3s ease;
    
}

.fixed-init{
    position: fixed;
    top: 120px;
}
.fixed-init-m{
    position: fixed;
    top: 1em;
}

.add-top{
  top: 60px;
  transition: .3s ease;
}

/* width */
.side-bar .body-resp::-webkit-scrollbar {
width: 10px;
}

/* Track */
.side-bar .body-resp::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey; 
border-radius: 10px;
}

/* Handle */
.side-bar .body-resp::-webkit-scrollbar-thumb {
background: #d0d0d0; 
border-radius: 10px;
border: .5px solid #d0d0d0;
}

/* Handle on hover */
.side-bar .body-resp::-webkit-scrollbar-thumb:hover {
background: #49aeff; 
}


.content-main{
    width: 100%;
    height: auto;

}

.content-resp{
    width: 100%;
    text-align:center;
    
}
.content-resp .title-resp{
    border-radius: 10px;
    text-align:center;
    max-width: 250px;
    margin: auto;
    padding: 0 .5em;
    
}
.content-resp .title-resp h4{
    font-weight: 600;
    color: #fff;
    padding: 5px 0;
    text-transform: uppercase;
}

.body-resp{
    margin: 2em 0;
    overflow-y: auto;
    max-height: 500px;
}

.body-resp .box-inputs span{
    color: #000;
    font-weight: 700;
    font-size: 16px;
    margin: .3em 0em 0 0;
    
}
.body-resp .box-inputs{
    display:flex;
    align-items: center;
    padding: 0 .5em;
    margin-bottom: 5px;
    border-radius: 10px; 
    justify-content: center;
    
}
.box-incisios{
    
    padding: .5em .5em;
    border-radius: 6px;
}
.box-incisios p{
    color: #000;
    /* font-weight: 600; */
}


.box-pregunta h3{
    color: #000;
    font-size: initial;
    font-weight: 600;
}
.box-pregunta{
    
    padding-bottom: 1em;
}

.box-pregunta p{
    color: #000;
    font-size: initial;
    font-size: 15px;
}

.box-pregunta span{
    font-weight: 600;
    color: #000;
}


.body-resp ul{
    list-style: none;
    margin: 0;
    padding: 0;
/* overflow: hidden; */
}

.body-resp .box-inputs ul li span{
    position: absolute;
    z-index: 2;
    left: 75%;
    top: 6px;
    font-size: 14px;
    color: #000;
}


.body-resp .box-inputs ul li input[type=radio]:checked ~ span{
 visibility: hidden;
}

.body-resp ul li{
color: #000000;
display: inline;
position: relative;
float: left;
width: auto;
height: auto;
font-weight: 500;
}

.body-resp ul li input[type=radio]{
position: absolute;
visibility: hidden;
}

.body-resp ul li label{
display: inline-block;
position: relative;
font-weight: 500;
font-size: 1.20em;
padding: 16px 10px 10px 10px;
line-height: 1.5em;
margin-left: .5em;
height: auto;
z-index: 9;
cursor: pointer;
-webkit-transition: all 0.1s linear;
}


.body-resp ul li label:hover{
color: #0b79f7;
}

.body-resp ul li .check{
display: block;
position: absolute;
border: 2px solid #000;
border-radius: 100%;
height: 20px;
width: 20px;
top: calc(30%);
left: 20px;
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}

.body-resp ul li .check label:hover{
border: 2px solid #0b79f7;
}

.body-resp ul li .check::before {
display: block;
position: absolute;
content: '';
border-radius: 100%;
height: 10px;
width: 10px;
top: 3px;
left: 3px;
margin: auto;
transition: background 0.5s linear;
-webkit-transition: background 0.2s linear;
}

/*   .body-resp ul li label:hover ~ .check::before{
background: #0b79f7;
}
*/
.body-resp input[type=radio]:checked ~ .check {
border: 2px solid #0b79f7;
}

.body-resp ul li label:hover ~ .check {
border: 2px solid #0b79f7;
}

.body-resp input[type=radio]:checked ~ .check::before{
background: #0b79f7;
}

.body-resp  input[type=radio]:checked ~ label{
color: #0b79f7;
}

.btn-result{
   /*  position: absolute;
    left: 30%;
    bottom: -2.5em; */
    margin: 2em 0;
    
}
.btn-result button.btn-success{
    border: none;
    padding: 10px 25px;
    background-color: #51bb09;
    border-radius: 20px;
    
}
.btn-result button.btn-primary{
    border: none;
    padding: 10px 25px;
    background-color: #0c84d4;
    border-radius: 20px;
    
}

.content-section table tr td, th{
  color: #000;
  font-size: 15px;
}

.tab-materias{
    margin-bottom: 1.5em;
    height: 150px;
    margin-bottom: -1em;
    
}

.tab-materias span{
  margin-left: 5px;
  
  padding: .8em 9px;
  /* border-radius: 5px 5px 0 0; */
  border-radius: 5px;
  cursor: pointer;
  color: #111111;
  font-size: 12px;
  margin-bottom: 1em;
  font-weight: 600;
  transition: .3s ease;

}

.tab-materias span:hover{
  background-color: #f5f5f5bb;
  color: #000;
}



.tab-materias span.active{

  color: #fff;
  -webkit-box-shadow: 2px 2px 5px -1px rgba(0,0,0,0.30);
-moz-box-shadow: 2px 2px 5px -1px rgba(0,0,0,0.30);
box-shadow: 2px 2px 5px -1px rgba(0,0,0,0.30);
  
}


@media screen and (max-width: 768px){
    .modal-content-custom {
        padding: 1rem .2em;
        width: 90%;
    }  
    
    .close-button{
        margin: -1px;
    }
}