/*Naranja: #df9832*/

/*Generales*/
*{box-sizing:border-box; font-family:Roboto, sans-serif}
html, body, form{padding:0; margin:0; }
h1, h2, h3, h4, h5 { font-family:'Roboto Slab', Serif}
.fin{clear:both; font-size:0; height:0}
.columnaCentral { padding-left: 20px; padding-right: 20px; }
.padV{padding-top:50px; padding-bottom:50px}
h2{color:#df9832; font-weight:lighter; font-family:Roboto, sans-serif; font-size:2em; margin-top:0}
.boton{display:block; text-align:center; line-height:80px; border:solid 1px #df9832; color:#df9832; text-decoration:none; margin-top:10px; font-size:1.2em; background:transparent; outline:none; cursor:pointer}
.boton:hover{background:#df9832; color:#fff}
.boton .fa{font-size:1.4em; margin-right:10px}
.ajustado{display:inline-block; padding-right:30px; padding-left:30px}
input[type="submit"]{padding-left:30px; padding-right:30px; margin:0 auto}

/*Topbar*/
#divTopBar{height:80px; background:#000; position:fixed; width:100%; z-index:10001; top:0}
#divTopBar .columnaCentral{padding:0}
#divTopBar a{ float:right; display:inline-block; line-height:80px; height:80px; border:none; color:#fff; outline:none; background:#000; cursor:pointer; text-decoration:none; font-size:1.3em}
#divTopBar a:hover {background-color:#df9832 }
#divTopBar a:hover .fa{color:#fff}
#btnTelefono .fa{float:left; margin-left:-38px; color:#df9832; display:inline-block; width:16px; height:16px; text-align:center; line-height:80px; font-size:1.4em}

/*Selector de idioma*/
#divLang{float:right; display:flex; align-items:center; height:80px; padding:0 10px; gap:8px; background:#000; cursor:pointer}
#divLang:hover{background:#df9832}
#divLang img{display:block; flex-shrink:0}
#divLang::after{content:'\f0d7'; font-family:FontAwesome; color:#fff; margin-left:4px; pointer-events:none; font-size:1em}
#divLang select{background:transparent; border:none; color:#fff; outline:none; cursor:pointer; font-size:1.3em; line-height:80px; height:80px; padding:0; -webkit-appearance:none; -moz-appearance:none; appearance:none}
#divLang select option{background:#000; color:#fff}

/*Header*/
header { height: 600px; position: relative; overflow: hidden; background: #222; }
#divHeader { height: 100%; position: absolute; top: 0; left: 0; width: 100%; z-index: 1; }
#imgHeader { position: absolute; z-index: 9999; }
#divHeader .slick-list, #divHeader .slick-track, #divHeader .slick-slide { height: 100%; }
#divHeader .slick-slide > div { height: 100%; width: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; }

/*MICE*/
#divMice{background-image:url(/static/img/fondo-mice.jpg); background-color:#f0f0f0; background-repeat:no-repeat; background-position:center center; background-attachment:fixed}
.btnMICE{display:block;  padding:0 20px; color:#777; text-align:center;text-decoration:none; margin-bottom:50px}
.btnMICE:last-child{margin-bottom:0}
.btnMICE:hover .spanLetra{background:#df9832; color:#fff;transform:scale(1.1)}
.btnMICE h2{color:#000; font-weight:300; font-size:1.8em; padding-top:20px}
.btnMICE strong{font-weight:300; color:#000; display:block; font-size:1.3em}
.btnMICE p{font-weight:300;margin-bottom:0}
div.btnMICE{cursor:default}
.spanLetra{border:solid 1px #df9832; transition: all .2s ease-out; color:#df9832;width:80px; height:80px; line-height:80px; text-align:center; font-family:'Roboto Slab',Serif; border-radius:40px; display:inline-block; font-size:1.6em }
.divOculto{display:none; clear:both}

/*Who I am*/
#divWhoIAmInt{padding-left:20px; padding-right:20px; }
#divWhoIAmInt p{color:#777; font-weight:300;line-height:1.4em}
#divWhoIAm .divDer{background-image:url(/static/img/fondo-who-i-am.jpg); background-size:cover; background-position:left center; text-align:center;font-size:2em;}
#divWhoIAm .divDer p{ font-family:'La Belle Aurore','Roboto Slab',Serif;padding-left:20px; padding-right:20px; }
#btnJuanMarco{padding-left:90px;display:block; color:#777; text-decoration:none}
#btnJuanMarco strong{color:#000; font-size:1.2em}
#btnJuanMarco .divFotoPerfil{position:relative;display:block; width:71px; height:71px; margin-left:-90px; background-image:url(/static/img/perfil-juan-marco.png); background-repeat:no-repeat;float:left}
#btnJuanMarco p{margin-top:5px; padding-bottom:20px}
#btnJuanMarco:hover .divFotoPerfil:before { content: '\f055'; font-family:FontAwesome; color:#df9832; position:absolute; right:0; bottom:0;font-size:1.3em }
#btnJuanMarco:hover strong{color:#df9832}
#divEnlacesWhoIAm{margin-top:30px}

/*Why us*/
#divWhyUs {background-image:url(/static/img/fondo-mice.jpg);background-color:#f0f0f0; background-repeat:no-repeat; background-position:center center; background-attachment:fixed}
#divWhyUs p,#divWhyUs ul {font-weight:300; color:#777; line-height:1.4em}
#divWhyUsInt .divDer > div {color:#df9832; text-align:center; font-size:1.4em; font-weight:300}
#divWhyUsInt .divDer > div > p { text-align:center; color:#df9832; font-weight:300; }

/*Why CyL*/
#divWhyCyL p{color:#777; font-weight:300;line-height:1.4em}
#divWhyCyLInt{padding-left:20px; padding-right:20px; }
#divWhyCyL .divDer, #divConferences .divDer{ background:#000; vertical-align:middle; position: relative; }
.video-responsive { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background-image: url(/static/img/maxresdefault.jpg); background-size: cover; background-position: center; }
.video-responsive iframe, .video-responsive div { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }
#divVideo, #divVideoConferences { width: 100%; height: 100%; }

/*Meetings*/
#divMeetingsInt{padding-left:20px; padding-right:20px; }
#divMeetingsInt p{color:#777; font-weight:300;line-height:1.4em}
#divMeetings .divDer{min-height: 280px; background-image:url(/static/img/fondo-meetings.jpg); background-size:cover; background-position:left center; text-align:center;font-size:2em;}
#divMeetings .divDer p{ font-family:'La Belle Aurore','Roboto Slab',Serif;padding-left:20px; padding-right:20px; }


/*Incentives*/
#divIncentivesInt{padding-left:20px; padding-right:20px; }
#divIncentivesInt p{color:#777; font-weight:300;line-height:1.4em}
#divIncentives .divDer{min-height: 280px; background-image:url(/static/img/fondo-incentives-2.jpg); background-size:cover; background-position:left center; text-align:center;font-size:2em;}
#divIncentives .divDer p{ font-family:'La Belle Aurore','Roboto Slab',Serif;padding-left:20px; padding-right:20px; }

/*Conferences*/
#divConferencesInt{padding-left:20px; padding-right:20px; }
#divConferencesInt p{color:#777; font-weight:300;line-height:1.4em}
#divConferences .divDer{min-height: 280px; font-size:0; background:#000 /*background-image:url(../img/fondo-conferences.jpg); background-size:cover; background-position:left center; text-align:center;font-size:2em;*/}
/*#divConferences .divDer p{ font-family:'La Belle Aurore','Roboto Slab',Serif;padding-left:20px; padding-right:20px; }*/

/*Events*/
#divEventsInt{padding-left:20px; padding-right:20px; }
#divEventsInt p{color:#777; font-weight:300;line-height:1.4em}
#divEvents .divDer{min-height: 280px; background-image:url(/static/img/fondo-events.jpg); background-size:cover; background-position:left center; text-align:center;font-size:2em;}
#divEvents .divDer p{ font-family:'La Belle Aurore','Roboto Slab',Serif;padding-left:20px; padding-right:20px; }

/*Footer*/
footer{background:#000; color:#aaa}
footer a{color:#aaa; text-decoration:none;}
footer a:hover{color:#fff}
footer .divIzq ul{padding:0; margin:0; list-style-type:none;}
footer .divIzq a{display:block; padding:20px 0; font-size:1.6em; border-bottom:solid 1px #555555; min-width:200px; font-weight:300}
footer .divIzq ul li:last-child a{border-bottom:none}
footer h2{color:#aaa; margin-top:50px; font-size:1.5em}
footer .divDer{ font-size:1.4em;line-height:1.6em;}

/*Formulario*/
.divFormulario{padding:0 0 20px 0; font-size:0px}
.divFormulario .spanTexto{font-size:16px; line-height:38px}
.divFormulario p{font-size:14px; color:#777; display:block; padding-left:40px}
.divFormulario p:before{content:'\f05a'; font-family:FontAwesome; display:block; width:30px; margin-left:-30px; color:#aaa; float:left; text-align:center; font-size:20px}
.divLabel,.divFormulario div>label,.divFormulario > label{ font-size:16px; padding:10px 0 0 0; box-sizing:border-box; line-height:38px}
.divFormulario h2{font-size:18px!important; border-bottom:dashed 1px rgba(0,0,0,.1); padding:10px 0; font-family:rockwell-light,Kameron,serif;}
.divFormulario h2 .fa{width:30px; display:inline-block; text-align:center; }
.divCampo { padding:10px 0 0 0; box-sizing:border-box}
.divCampo input[type="text"], .divCampo input[type="password"], .divCampo input[type="email"], .divCampo input[type="search"],.divCampo textarea,.divCampo select {width:100%;  font-size:16px; line-height:36px; padding:5px 10px;outline:none;box-sizing: border-box;border:solid 2px #ddd; background:#f5f5f5}
.divCampo input[type="text"]:focus, .divCampo input[type="password"]:focus, .divCampo input[type="email"]:focus, .divCampo input[type="search"]:focus,.divCampo textarea:focus,.divCampo select:focus{border:solid 2px #df9832; background:#fff}
.divCampo input[type="checkbox"]{margin-top:15px}
.divCampo label{font-size:16px;margin-right:10px; line-height:40px}
.divCampo select{padding:10px }
input[type="radio"] { transform: scale(1.5); margin-left: 10px; margin-right: 10px; cursor: pointer; }

/*Testimonials*/
.divPerfil{display:block; color:#777; text-decoration:none}
.divPerfil p{font-size:.8em}
.divPerfil strong{color:#000; font-size:1.2em}
.divTestimonialInt{padding-bottom:40px;padding-left:90px;}
.divTestimonialInt .divFotoPerfil{position:relative;border-radius:35px; display:block; width:70px; height:70px; margin-left:-80px; background-image:url(/static/img/foto-perfil.png); background-repeat:no-repeat;float:left; border:solid 5px #eee; background-size:cover; background-position:center center}
.divFotoPerfil.alain-saldana{background-image:url(/static/img/alain-saldana.jpg)}
.divFotoPerfil.amanda-peterson{background-image:url(/static/img/amanda-peterson.jpg)}
.divFotoPerfil.esther-maseda{background-image:url(/static/img/esther-maseda.jpg)}
.divFotoPerfil.javier-marquez{background-image:url(/static/img/javier-marquez.jpg)}
.divFotoPerfil.markus-weber{background-image:url(/static/img/markus-weber.jpg)}

/*Redes sociales*/


#divSociales{ position:absolute;right:10px; z-index:10000; top:10px;font-size:0; perspective:400px}
#divSociales a{display:inline-block; width:60px; height:60px; line-height:60px; font-size:22px; color:#fff; background:rgba(0, 0, 0, 0.68); text-align:center; transition:all .2s}
#divSociales a:hover{background:rgba(223, 152, 50, 1);}
#divSociales > span { display: block; color: #fff; background: #df9832; font-size: 20px; padding: 10px; text-align: center; margin-left: -60px; transform: rotateY(-20deg); transform-origin: right; }

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

    /*Generales*/
    input[type="submit"]{display:block; width:100%}

    /*Topbar*/
    #btnMenuMovil{width:80px;  text-align:center}
    #btnMenuMovil .fa{font-size:1.7em;line-height:80px}
    #btnTelefono{padding-left:48px; padding-right:10px}
    
    /*Header*/
    header { margin-top: 80px; height: 450px; overflow-y: hidden; }
    nav{position:fixed; width:100%; top:80px; background:#333; color:#fff; z-index:10000; display:none}
    nav.activo{display:block}
    nav a{display:block; font-size:1.8em; color:#ffF; text-decoration:none; padding:30px 15px;font-weight:300; color:#aaa}
    nav a:hover{color:#fff}

    #CPHBody_pnlContacto .div50:first-child{padding-bottom:50px}

}



@media only screen and (min-width:1080px) {
    
    /*Generales*/
    .padV{padding-top:100px; padding-bottom:100px}
    .columnaCentral { margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; width: 1000px; }
    .boton{font-size:.90em; line-height:60px}

    /*Topbar*/
    #btnMenuMovil{display:none!important}
    #divTopBar{height:50px; position:relative}
    #divTopBar a{ padding:0 10px 0 36px;}
    #divTopBar a{ float: right; display:inline-block; line-height:50px; height:50px; border:none; color:#fff; outline:none; background:#000; cursor:pointer; text-decoration:none; font-size:.9em}
    #divTopBar a:hover {background-color:#df9832 }
    #divTopBar a:hover .fa{color:#fff}
    #divLang{height:50px}
    #divLang select{line-height:50px; height:50px; font-size:.9em}
    #btnTelefono .fa{float: left; margin-left:-24px; color:#df9832; display:inline-block; width:16px; height:16px; text-align:center; line-height:50px; font-size:1em}
    
    /*Redes sociales*/
    #divSociales{width:60px; right:0; top:50%; margin-top:-160px}
    #divSociales a{display:block;}


    /*Header*/
    #imgHeader{ margin-left:-70px}
    nav{display:block; background:rgb(223, 152, 50); background:rgba(223, 152, 50, 0.90); background:linear-gradient( to right, rgba(223, 152, 50, 0.90),rgba(223, 152, 50, 0.10)); height:90px; z-index:10000; position:absolute; top:510px;width:100%}
    nav a{display:inline-block; line-height:90px; font-size:1.2em; color:#fff; text-decoration:none; padding:0 20px; font-weight:lighter}
    nav a:hover{text-shadow:0 0 15px rgba(255,255,255,1)}

    /*MICE*/
    .btnMICE { float: left; width: 25%; margin-bottom:0}
    .btnMICE h2{ font-size:1.3em}
    .btnMICE strong{ font-size:1em}
    .btnMICE p{ font-size:.85em}

    /*Who I am*/
    #divWhoIAm{display:table; width:100%;}
    #divWhoIAm>div{display:table-cell; width:50%}
    #divWhoIAmInt{float:right; padding-right:100px; width:500px; padding-left:0}
    #divWhoIAmInt p {font-size:.9em;  }
    #divWhoIAm .divDer{vertical-align:middle}
    #divWhoIAm .divDer p{float:left; padding-left:100px; width:500px;font-size:1em; padding-right:0 }
    #divEnlacesWhoIAm{display:table; width:100%}
    #divEnlacesWhoIAm div{display:table-cell; width:50%;}
    #divEnlacesWhoIAm div:first-child{padding-right:10px}
    #divEnlacesWhoIAm div:last-child{padding-left:10px}

    /*Why us*/
    #divWhyUsInt{display:table; width:100%;}
    #divWhyUsInt>div{display:table-cell;vertical-align:middle }
    #divWhyUsInt .divDer{width:430px;padding-left:30px}
    #divWhyUsInt .divDer>div{background-image:url(/static/img/check-naranja.png); background-repeat:no-repeat;background-position:center top; padding-top:220px; }
    #divWhyUsInt p,#divWhyUsInt ul{ font-size:.85em}

    /*Why Cyl*/
    #divWhyCyL{display:table;width:100%}
    #divWhyCyL>div{display:table-cell; width:50%}
    #divWhyCyLInt{float:right; padding-right:100px; width:500px; padding-left:0}
    #divWhyCyLInt p {font-size:.9em;  }
    #divWhyCyLInt .boton{font-size:1.3em}

    /*Meetings*/
    #divMeetings{display:table; width:100%;}
    #divMeetings>div{display:table-cell; width:50%}
    #divMeetingsInt{float:right; padding-right:100px; width:500px; padding-left:0}
    #divMeetingsInt p {font-size:.9em;  }
    #divMeetings .divDer{vertical-align:middle}
    #divMeetings .divDer p{float:left; padding-left:100px; width:500px;font-size:1em; padding-right:0 }
    #divMeetings .boton{font-size:1.3em}

    /*Incentives*/
    #divIncentives{display:table; width:100%;}
    #divIncentives>div{display:table-cell; width:50%}
    #divIncentivesInt{float:right; padding-right:100px; width:500px; padding-left:0}
    #divIncentivesInt p {font-size:.9em;  }
    #divIncentives .divDer{vertical-align:middle}
    #divIncentives .divDer p{float:left; padding-left:100px; width:500px;font-size:1em; padding-right:0 }
    #divIncentives .boton{font-size:1.3em}

    /*Conferences*/
    #divConferences{display:table; width:100%;}
    #divConferences>div{display:table-cell; width:50%}
    #divConferencesInt{float:right; padding-right:100px; width:500px; padding-left:0}
    #divConferencesInt p {font-size:.9em;  }
    #divConferences .divDer{vertical-align:middle}
    #divConferences .divDer p{float:left; padding-left:100px; width:500px;font-size:1em; padding-right:0 }
    #divConferences .boton{font-size:1.3em}

    /*Events*/
    #divEvents{display:table; width:100%;}
    #divEvents>div{display:table-cell; width:50%}
    #divEventsInt{float:right; padding-right:100px; width:500px; padding-left:0}
    #divEventsInt p {font-size:.9em;  }
    #divEvents .divDer{vertical-align:middle}
    #divEvents .divDer p{float:left; padding-left:100px; width:500px;font-size:1em; padding-right:0 }
    #divEvents .boton{font-size:1.3em}

    /*Footer*/
    #divFooter{display:table}
    #divFooter > div { display: table-cell; width: 50%;vertical-align:top }
    footer .divIzq ul{display:inline-block}
    footer .divIzq a {  padding: 10px 0; font-size: 1em; }
    footer h2{ margin-top:0;}
    footer .divDer{font-size:1em}

    /*Formulario*/
    .divLabel,.divFormulario div>label,.divFormulario>label{width:31%; display:inline-block; text-align:right; padding-right:10px;vertical-align: top;}
    .divCampo{width:69%; display:inline-block}
    .divCampo.peq{width:23%}
    .divLabel.peq,.divFormulario div>label.peq,.divFormulario >label.peq{width:23%}

    #CPHBody_pnlContacto{display:table}
    .div50{ width:50%; height:100%; display:table-cell;padding-right:50px }
    .centrado{text-align:center}
}

@media only screen and (max-width:470px) {
    #divTopBar #btnTelefono,
    #divTopBar #btnMenuMovil,
    #divTopBar #divLang,
    #divTopBar #divLang select {
        font-size: 13px;
    }

    #imgHeader{ margin-left:-75px}
}

@media only screen and (max-width:370px) {
    #divTopBar #btnTelefono,
    #divTopBar #btnMenuMovil,
    #divTopBar #divLang,
    #divTopBar #divLang select {
        font-size: 10px;
    }

    #imgHeader{ margin-left:-85px}
}

@media only screen and (min-width:1280px) {
    
    /*Generales*/
    .columnaCentral { width: 1200px; }
    
    /*Who I am*/
    #divWhoIAmInt{width:600px}
    #divWhoIAm .divDer p{width:600px}
    #divEnlacesWhoIAm a{font-size:1em}

    /*Meetings*/
    #divMeetingsInt{width:600px}
    #divMeetings .divDer p{width:600px}

    /*Incentives*/
    #divIncentivesInt{width:600px}
    #divIncentives .divDer p{width:600px}

    /*Conferences*/
    #divConferencesInt{width:600px}
    #divConferences .divDer p{width:600px}

    /*Events*/
    #divEventsInt{width:600px}
    #divEvents .divDer p{width:600px}

    /*Why Cyl*/
    #divWhyCyLInt{width:600px}
}

/*Activities*/
main:has(> #divActivities) {
    background: #f8f8f8;
    display: flex;
    justify-content: center;
    width: 100%;
}
#divActivities {
    display: block;
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
    border: 0;
    margin-top: 50px;
}