@import url(https://fonts.googleapis.com/css?family=Oswald:400,700,300);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300italic,300,400italic,600);
@import url('https://fonts.googleapis.com/css2?family=Blinker:wght@300;600;700&display=swap');

html, body {width:100%;height:100%;padding:0;margin:0;}
h1, h2, h3{font-family: 'Oswald', sans-serif; font-weight: 400; text-transform: uppercase;}
p{ font-family: 'Open Sans', sans-serif; line-height: 1.8em;}
.container{ width: 80%; margin: 0 auto; padding: 10px 0; position: relative;}
.container h1{ margin-top: 100px; font-size: 2.2em; letter-spacing: 5px;}
.container h1, .container p{ position: relative;}
.number span{font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 3.2em; text-transform: uppercase; display: block; width: 80px; height: 80px; margin: 0 auto; padding: 0px; position: relative;}
.number span.first span.line, .number span.second span.line, .number span.four span.line{ border-left: 5px solid #0086B9; border-bottom: 5px solid #0086B9; position: absolute; left: -5px; bottom: -5px; height: 80%; width: 80%;}
.number span.first{border: 5px solid #AAE5FC; color: #000; margin-top: 200px;}
.number span.second{border: 5px solid #AAE5FC; color: #fff; margin-top: 80px;}
.number span.third{border: 5px solid #AAE5FC; color: #000; margin-top: 300px;}
.number span.four{border: 5px solid #AAE5FC; color: #fff; margin-top: 100px;}
.line-title-b{ border-bottom: 3px solid #000; margin: 30px auto; width: 5%;}
.line-title-w{ border-bottom: 3px solid #fff; margin: 30px auto; width: 5%;}
.float-right{ float: right;}
.float-left{ float: left;}
.skrollable {position:fixed;z-index:100;}
.skrollr-mobile .skrollable {position:absolute;}
.skrollable .skrollable {position:absolute;}
.skrollable .skrollable .skrollable {position:static;}
#video{position: absolute;top: 0;left: 0;z-index: -1;overflow: hidden;width: 100%;height: auto;}
#video video{width: 100% !important;height: 100% !important;}


.solomobile {
 display:none!important;
}

nav { position: fixed; top: 0; background: none; width: 100% !important; height: auto; padding: 5px; z-index: 11;}
nav .logo{ float: left;}
nav ul.menu{ float: left; margin: 10px 0;}
/* nav ul.menu .idioma{ margin-left: 30px;}
nav ul.menu .idioma a{ text-decoration: none;}
nav ul.menu .idioma a.active{font-weight: 700;} */
nav ul.menu.elidioma{ margin-left: 1%; float: right;}
nav ul .idioma a{ text-decoration: none;}
nav ul .idioma a.active{font-weight: 700;}

nav ul li{ list-style: none; float: left; font-size: 1.2em; font-family: 'Oswald', sans-serif; font-weight: 300;}
nav ul li a{ padding: 3px 10px; color: #fff;}
nav ul li a:hover, nav ul li a:active{ color: #fff;}
.back-nav{ background: #00243E; position: fixed; top: 0; height: 80px; width: 100%; z-index: 10;}
#LaboratorioExperencias:before  { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 50%; background: #FDFDFD; -webkit-transform: skew(0deg, 10deg); -moz-transform: skew(0deg, 10deg); -ms-transform: skew(0deg, 10deg); -o-transform: skew(0deg, 10deg); transform: skew(0deg, 10deg); } 
#LaboratorioExperencias:after { content: ''; position: absolute; top: 0; right: 0; height: 100%; width: 50%; background: #FDFDFD; -webkit-transform: skew(0deg, -10deg); -moz-transform: skew(0deg, -10deg); -ms-transform: skew(0deg, -10deg); -o-transform: skew(0deg, -10deg); transform: skew(0deg, -10deg); z-index: -2;}
#contact:before { content: ''; position: absolute; top: -80px; left: 0; height: 20%; width: 50%; background: #084E83; -webkit-transform: skew(0deg, 10deg); -moz-transform: skew(0deg, 10deg); -ms-transform: skew(0deg, 10deg); -o-transform: skew(0deg, 10deg); transform: skew(0deg, 10deg); } 
#contact:after { content: ''; position: absolute; top: -80px; right: 0; height: 20%; width: 50%; background: #084E83; -webkit-transform: skew(0deg, -10deg); -moz-transform: skew(0deg, -10deg); -ms-transform: skew(0deg, -10deg); -o-transform: skew(0deg, -10deg); transform: skew(0deg, -10deg); z-index: -2;}
.container-intro{ padding-top: 200px;}
.container-intro h1{ font-size: 1.5em; font-family: 'Oswald', sans-serif; font-weight: 300; color: #69E0DB;}
.container-intro h2{ border: 3px solid #69E0DB; display: block; width: 30%; margin: 0 auto; padding: 1.5%; font-size: 3em; letter-spacing: 4px; text-transform: uppercase;}

.container-intro h1 {
  animation-duration: 2s;
  animation-name: intro1;
}

@keyframes intro1 {
  from {letter-spacing: 20px;}
    to {letter-spacing: 0px;}
}

.container-intro h2 {animation-duration: 2s;animation-name: intro2; color:#69E0DB;}

@keyframes intro2 {
  from {opacity: 0; margin-top: 100px;}
    to {opacity: 1;margin-top: 0px;}
}

#intro,
#LaboratorioExperencias, 
#TurismoHospitalidad, 
#TurismoEventos,
#section-1,
#section-2,
#section-3,
#section-4,
#contact{ 
    width: 100%;
}

#section-2, #TurismoHospitalidad, #TurismoEventos{
    -webkit-transform: skewY(-10deg);
    -moz-transform: skewY(-10deg);
    -ms-transform: skewY(-10deg);
    -o-transform: skewY(-10deg);
    transform: skewY(-10deg);
}


#TurismoEventos h1, #TurismoEventos h2, #TurismoEventos p, #TurismoEventos .slide .line-title-b, #TurismoEventos .line-title-w, #TurismoEventos .number span, #TurismoEventos .number span.first span.line,
#TurismoHospitalidad h1, #TurismoHospitalidad h2, #TurismoHospitalidad p, #TurismoHospitalidad .team-menu .line, #TurismoHospitalidad .line-title-w,
#section-2 h1, #section-3 h1,
#section-2 h2, #section-3 h2,
#section-2 p, #section-3 p,
#section-2 .team-menu .line, #section-2 .line-title-w,
.number span.second, .line-title-b, .celular, .celular2, label-1, label-2, label-3{
    -webkit-transform: skewY(10deg);
    -moz-transform: skewY(10deg);
    -ms-transform: skewY(10deg);
    -o-transform: skewY(10deg);
    transform: skewY(10deg);
}

#TurismoEventos .slide .line-title-b{
    -webkit-transform: skewY(10deg)!important;
    -moz-transform: skewY(10deg)!important;
    -ms-transform: skewY(10deg)!important;
    -o-transform: skewY(10deg)!important;
    transform: skewY(10deg)!important;
}

#TurismoEventos .number span.first span.line{
    -webkit-transform: skewY(0deg) !important;
    -moz-transform: skewY(0deg) !important;
    -ms-transform: skewY(0deg) !important;
    -o-transform: skewY(0deg) !important;
    transform: skewY(0deg) !important;
}


#enjoy{
    -webkit-transform: skewY(10deg);
    -moz-transform: skewY(10deg);
    -ms-transform: skewY(10deg);
    -o-transform: skewY(10deg);
    transform: skewY(10deg);
}

#enjoy h1{
    -webkit-transform: skewY(-10deg) !important;
    -moz-transform: skewY(-10deg) !important;
    -ms-transform: skewY(-10deg) !important;
    -o-transform: skewY(-10deg) !important;
    transform: skewY(-10deg) !important;
}

#enjoy h1{ font-size: 3.5em; top: 200px; border-top: 2px solid #fff; border-bottom: 2px solid #fff; display: inline-block; padding: 10px 0; color:#fff;} 
#intro{ top: 0px; color: #fff !important; position: fixed; z-index: 1; text-align: center; height: 1000px;}
#LaboratorioExperencias .bg_idea{background: url(../img/img_01_experiencias.jpg) no-repeat top left; width: 100%; height: 100%; position: absolute; top: 90px; left: 0; z-index: 1;}

#section-1 .bg_idea{background: url(../img/img_01_ideas.jpg) no-repeat top left; width: 100%; height: 100%; position: absolute; top: 120px; left: 0; z-index: 1;}
#TurismoEventos .bg_idea2{background: url(../img/img_03_eventos.jpg) no-repeat top left; width: 100%; height: 100%; position: absolute; top: 110px; left: 0; z-index: 1;}
#section-1 .slide, #LaboratorioExperencias .slide, #TurismoEventos .slide { z-index: 3;}

#LaboratorioExperencias{ margin-top: 700px; height: 800px; color: #000 !important; position: relative; z-index: 2; text-align: center; }
#TurismoHospitalidad{ margin-top: 40px; height: 600px; background: url(../img/img_02_hospitalidad.jpg) no-repeat 0 -500px; color: #fff !important; position: relative; z-index: 2; text-align: center;}
#TurismoEventos{ margin-top: 270px; height: 900px; color: #000 !important; position: relative; z-index: 2; text-align: center; }
#section-1{ margin-top: 150px; height: 1100px; color: #000 !important; position: relative; z-index: 2; text-align: center; }
#section-2{ margin-top: -300px; height: 600px; background: url(../img/img_02_equipo.jpg) no-repeat 0 -500px; color: #fff !important; position: relative; z-index: 2; text-align: center;}
#section-3{ margin-top: -100px; height: 350px; background: #F6F6F6; color: #000 !important; z-index: 5; text-align: right; box-shadow: 0 0 25px #ccc;}
#section-4{ margin-top: 200px; height: 1800px; background: #fff; color: #000 !important; position: relative; z-index: 1; text-align: center; background: url(../img/img_03_desarrollo.jpg) no-repeat top left #fff;}
#enjoy{ margin-top: -250px; height: 1200px; background: url(../img/img_video.jpg) no-repeat; color: #000 !important; position: relative; z-index: 3; text-align: center;}
#contact{ margin-top: -500px; height: 1000px; padding-bottom: 100px; color: #fff !important; position: relative; z-index: 1; z-index: 3; text-align: center; background: url("../img/img_04_contacto.jpg") no-repeat left 30px;}
#contact form{ color: #000; width: 60%; margin: 0 auto;}
#contact form input{ width: 100%; padding: 8px; margin-bottom: 20px; border: 1px solid #fff; background: none; box-shadow: none; color: #fff;}
#contact form textarea{ width: 100%; padding: 8px; margin-bottom: 20px; border: 1px solid #fff; background: none; height: 100px; resize: none; box-shadow: none; color: #fff;}
#contact form input[type=submit]{ width: 20%; padding: 16px 8px; margin-bottom: 20px; box-shadow: none; color: #fff; text-transform:uppercase;}

#section-1 .slide{ float: none; margin: 0 auto;}
#section-1 .slide .carousel-indicators{ bottom: 0px; position: relative;}
#section-1 .slide .carousel-indicators li{border: 2px solid #555;}

.ilus-1 svg{ position: absolute; top: 500px; right: 100px; width: 400px; height: 350px; z-index: 4;}

#section-1 h1,
#LaboratorioExperencias h1,
#TurismoHospitalidad h1,
#TurismoEventos h1,
#section-2 h1,
#section-3 h1,
#section-4 h1,
#contact h1{ margin-top: 30px;}

#footer{ margin-top: -100px; padding: 40px 0; position: relative; height: auto; width: 100%; background: #00243E; color: #555; z-index: 4; text-align: center;}
#footer img{ opacity: .2;}
#footer p{ color: #fff; margin-top: 20px;}
#footer span{ font-size: .8em;}

#section-2 .team-menu, #TurismoHospitalidad .team-menu { text-align: left; position: relative; margin: -50px 0 50px 0;}
#section-2 .team-menu .line, #TurismoHospitalidad .team-menu .line{ border: 1px solid #fff; margin-bottom: 10px;}
#section-2 .team-menu .circle, #TurismoHospitalidad .team-menu .circle{ width: 10px; height:10px; border-radius: 50%; background: #fff; position: absolute; left: -5px; top: -5px;}
#section-2 .team-menu h1, #TurismoHospitalidad .team-menu h1{ margin: 0 0 10px 10px; font-size: 1.5em; font-weight: 400; letter-spacing: 1px;}
#section-2 .team-menu h2 { margin: 0 0 10px 10px; font-size: 1.5em; font-weight: 300; letter-spacing: 1px;}
#TurismoHospitalidad .team-menu h2 { margin: 0 0 10px 0px; font-size: 1.5em; font-weight: 300; letter-spacing: 1px; color: aqua;}
#section-2 .celular, #TurismoHospitalidad .celular2{ width: 550px; margin: 0 auto; position: relative;}
#TurismoHospitalidad .celular2 .label-1{ background: url(../img/eventos_bigger_img.png) no-repeat 0 50px; width: 550px; height: 513px; position: absolute;}
#section-2 .celular .label-1{ background: url(../img/celular_layer01.png) no-repeat 0 50px; width: 550px; height: 513px; position: absolute;}
#section-2 .celular .label-2{ background: url(../img/celular_layer02.png) no-repeat top left; width: 550px; height: 513px; position: absolute;}
#section-2 .celular .label-3{ background: url(../img/celular_layer03.png) no-repeat top left; width: 550px; height: 513px; position: absolute;}
#section-2 .team-menu .item-1, #TurismoHospitalidad .team-menu .item-1, #section-2 .team-menu .item-2,
#section-2 .team-menu .item-3{ cursor: pointer;}
#section-3 .team-text { margin-top: 60px;}
#section-3 .text-2, #section-3 .text-3{ display: none;}
#section-4 .system{ margin-top: 100px;}
#section-4 .system .col-md-7{ width: 61%;}
#section-4 .system .line{ height: 300px; border-right: 1px solid #000; width: 2px; margin: -250px auto 0 auto; z-index: -1; position: absolute; left: 49.8%;}
#section-4 .system h1{ margin: 0px; letter-spacing: 0px; font-weight: 300; color: #29A1D2; font-size: 1.8em; border: 1px solid #29a1d2; padding: 5px; display: inline-block;}
#section-4 .system .circle{ background: #BDCAD3; width: 50px; height: 50px; border-radius: 50%; margin: 0 auto; border: 1px solid #000; z-index: 5;}
#section-4 .system p{ color: #7f7d7e; padding-top:10px;}
.separation-01{background: rgba(77, 205, 200, 0.5);height: 150px;width: 100%;}


@media(max-width:1290px){
#section-4 .system .line{ margin: -300px auto 0 auto;}
#section-1, #LaboratorioExperencias, #TurismoEventos{ margin-top: 500px;}
}


@media(max-width:1120px){
    #section-1, #LaboratorioExperencias, #TurismoEventos{ margin-top: 500px;}
    .container-intro h2{ width: 30%;}
    #section-2 .celular,  #TurismoHospitalidad .celular2{ margin: -50px 0 0 -160px;}
    #section-4{ height: 2000px;}
    #section-4 .system .line{ margin: -400px auto 0 auto; height: 400px;}
}

@media(max-width:991px){
    body{ overflow-x:hidden;}
    .line, .circle-tip{ display: none;}
    .system .col-sm-5, #section-4 .system .col-md-12{ width: 100%; text-align: center;}
    .system .col-sm-5{ margin-bottom: 20px;}
}

@media(max-width:900px){
    .container{ width: 90%;}
    #section-1, #LaboratorioExperencias, #TurismoEventos{ margin-top: 400px;}
    #contact{ background: url("../img/img_04_contacto.png") no-repeat center center}
    #section-4{ height: 1800px;}
}

@media(max-width:790px){
    .container{ width: 90%;}
    #section-1, #LaboratorioExperencias, #TurismoEventos{ margin-top: 380px;}
    .back-nav{ height: 130px;}
    nav{ text-align: center;}
    nav .logo {float: none;}
    nav ul.menu {display: inline-flex;float: none; padding: 0; width: 68%;} 
}


@media(max-width: 768px) {
/* .navbar-nav {
  float: right!important;
} */

.bigger_tech .menu_desktop {
    display:none!important;

}


}


@media(max-width:680px){
    #section-2, #TurismoHospitalidad{ margin-top: -200px;}
    #section-2 .celular, #TurismoHospitalidad .celular2 { display: none;}
    .team-text{ width: 100%; text-align: center;}
    #section-3{ height: auto; padding-bottom: 30px;}
    #section-4 .system h1{ margin-bottom: 20px;}
    #video{ display: none;}
    .img_mobile{ background: url("../img/intro.jpg") no-repeat center center; height: 200%; width: 100%; top: 0; left:0px; position: absolute; z-index: -1;}
    #contact form input[type="submit"]{ width: 40%;}
}

@media(max-width:640px){
    #section-1, #LaboratorioExperencias, #TurismoEventos{ margin-top: 500px;}
    .container-intro {padding-top: 240px;}
    .container-intro h2{ font-size: 2em;}
    .container-intro h2 {width: 50%;}
}

@media(max-width:560px){
    nav ul.menu { width: 100%;}
    #contact form {width: 90%;}
    #section-4{ height: 2000px;}
}

@media(max-width:470px){
    .back-nav {
        display:none!important;
    }

    .navbar-brand>img {
        margin-left: -18px;
    }

    nav ul li{ font-size: .9em;}

    .navbar-brand { padding: 7px 15px;}
    .navbar-inverse {
        background-color:#23A571!important;
        border-color: rgb(0 0 0 / 8%)!important;
    }
    
    .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
        background-color: rgb(0 0 0 / 8%)!important;
    }

    .navbar-nav {
        margin: 7.5px -5px!important;
    }



}


@media(max-width:414px){


        
    .bigger_tech .navbar-collapse {
        border-top: 1px solid transparent!important;
        margin-top: 32px!important;
    }
        
    .bigger_tech nav ul li {
        font-size: 18px!important;
        text-align: left!important;
        float:initial;
    }
        
    .bigger_tech .navbar-nav {
        margin: 7.5px -5px!important;
    }
    
    .bigger_tech .navbar-brand>img {
        margin-left:-18px;
    }
        
    .bigger_tech .navbar-toggle{
        margin-top: 20px!important;
    }
        
    .bigger_tech .navbar-inverse .navbar-toggle {
         border-color: #eee!important;
    }

    .bigger_tech nav {
        position: fixed!important;
    }

    .bigger_tech nav ul .idioma {
        margin-left: 0px;
        border-top: solid 1px rgb(255 255 255 / 15%);
        margin-top: 10px;
        
    }

    .bigger_tech #section-4 {
        height: 2042px!important;
    }

    .bigger_tech #footer img {
        opacity: 1!important;
        width: 50%!important;
    }

}






@media(max-width:410px){
    nav ul li a {padding: 3px 5px;}
    #section-2 .team-menu{ padding: 0px;}
    #section-2 .team-menu h1{ font-size: 1em;}
    #section-2 .team-menu h2{ font-size: 1em;}
    #enjoy{ margin-top: -100px;}
}

@media(max-width:360px){
    nav ul.menu .idioma {margin-left: 5px;}
    #section-4{ height: 2200px;}
}

/* Restyling Bigger tech  */


.bigger_tech h1, .bigger_tech h2, .bigger_tech h3, .bigger_tech .number span {
    font-family: 'Blinker', sans-serif;
    font-weight: 600;
}

.bigger_tech .back-nav {
    background: #22a571!important;
}


.bigger_tech #section-4 {
    height: 1600px;!important;
}



.bigger_tech nav ul li {
    font-family: 'Blinker'!important;
    font-weight: 300; 
    
}

.bigger_tech .number span.second, .bigger_tech .number span.four {
    border: 5px solid #9ce8c6!important;
}


.bigger_tech .number span.first span.line, .bigger_tech .number span.second span.line, .bigger_tech .number span.four span.line {
border-left: 5px solid #45d492!important;
border-bottom: 5px solid #45d492!important;
}

.bigger_tech #section-4 .system h1 {
border: 1px solid #23a571!important;
color: #23a571!important;
}

.bigger_tech .number span.first {
 border: 5px solid #9ce8c6!important; 
}

.bigger_tech .container-intro h1 {
 color: #9ce8c6!important;
 font-family: 'Blinker', sans-serif;
  font-weight: 600;    
    
}

.bigger_tech .container-intro h2 {
 color: #fff!important;
 border: 3px solid #fff!important;
 font-family: 'Blinker', sans-serif;    
 font-weight: 600;    
}


.bigger_tech video {
    /* filter: hue-rotate(290deg) contrast(0.88); */
    filter: hue-rotate(-54deg) contrast(0.88);
}


.bigger_tech #section-2 .container, .bigger_tech #TurismoHospitalidad .container .number, .bigger_tech #TurismoHospitalidad .container .team-menu {
    filter: hue-rotate(290deg) contrast(0.88);
}

.bigger_tech #footer { 
 /* background-color: #08535D!important; */
 /* background-color: #3c765e!important;*/

 background-color:#004D45!important;;
}

.bigger_tech #footer img {
    opacity: .7;
}

.bigger_tech #enjoy { 
filter: hue-rotate(330deg);
}

.bigger_tech #contact::after { 
background: #00b86f;
}

.bigger_tech #contact::before { 
    background: #00b86f;
}