@charset "UTF-8";

/*!
* 
* JUL 2024
* int-meetings.com
* jblanco
* 
*/


/* MEDIA BREAKPOINTS ------------------------------------------------

@media (min-width: 576px) {}    sm
@media (min-width: 768px) {}    md
@media (min-width: 992px) {}    lg
@media (min-width: 1200px) {}   xl
@media (min-width: 1400px) {}   xxl

-------------------------------------------------------------------- */





:root {
    --bs-primary:#ff006a;     
    --bs-primary-75:rgba(250, 10, 118, 0.75); 
    --bs-primary-60:rgba(250, 10, 118, 0.6); 
    --bs-primary-50:rgba(250, 10, 118, 0.5); 
    --bs-primary-40:rgba(250, 10, 118, 0.4); 
    --bs-primary-30:rgba(250, 10, 118, 0.3); 
    --bs-primary-20:rgba(250, 10, 118, 0.2); 
    --bs-primary-dark:#ab0c4b;    
    --bs-primary-dark-75:rgb(171, 12, 76, 0.75); 
    --bs-primary-dark-60:rgb(171, 12, 76, 0.6); 
    --bs-primary-dark-50:rgb(171, 12, 76, 0.5); 
    --bs-primary-dark-40:rgb(171, 12, 76, 0.4); 
    --bs-primary-dark-30:rgb(171, 12, 76, 0.3); 
    --bs-primary-dark-20:rgb(171, 12, 76, 0.2); 

    --bs-dark:#000000;
    --bs-dark-rgb:0,0,0;

    --dark-gray:#2E2D2C;
    --dark-gray-alpha:#2e2d2caf;
    --light-gray:#CAC3BC;

    --bs-secondary:#ef2ac1;
    --bs-secondary-10:rgba(239, 42, 193, 0.1); 
    --bs-secondary-50:rgba(239, 42, 193, 0.5); 
    --bs-secondary-light:#f253d4;
   
    --bs-tertiary:#EA5539;
    --bs-tertiary-50:rgb(234, 85, 57, 0.5);
    --bs-tertiary-light:#ED6C4D;

    --bs-quaternary:#0069B3;
    --bs-quaternary-light:#37A7E5;

}
  
@media (prefers-reduced-motion: no-preference) {
    :root {
      scroll-behavior: smooth;
    }
}
  


  


/* COMUNES =========================================================== */

html{
    font-size:16px; /* Tamaño para 1rem */
    scroll-behavior: smooth;
}
body {
    margin: 0;
    padding:0;
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight:300;
    font-size:1rem;
    color:#fff;
    background-color:#0e0e0e;
    overflow-x: hidden;
}

header{
    position: relative;
}



.clearfix{
    clear: both;
    float:none;
}
.disabled{
    opacity:0.45!important;
    pointer-events:none!important;
}
.no-pointer{
    pointer-events:none;
}
.hide{
    display:none!important;
}
small{
    font-size:0.7em;
}



/* pinta (img, svg) de blanco, negro */
.toWhite{
    filter:brightness(0) invert(1);
}
.toBlack{
    filter:brightness(0);
}



/* video background  ---------------------------------------------- */
#background-video {
    height: 100vh;
    width: 100vw;
    object-fit: cover;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    transform: rotateY(180deg);
    -webkit-transform:rotateY(180deg); /* Safari and Chrome */
    -moz-transform:rotateY(180deg); /* Firefox */
  }



/* Button Scroll To Top ---------------------------------------------- */
#scrollToTop {
    display: none; 
    position: fixed; 
    bottom: 20px; 
    right: 30px; 
    z-index: 99; 
    border: none; 
    outline: none; 
    background-color: #000;
    color: white; 
    cursor: pointer; 
    padding: 0.2em 0.6em;; 
    font-size: 2rem; 
  }
  
  #scrollToTop:hover {
    background-color: #333; 
  }

#top-bar.call-to-action{
    top:-100px;
    transition: top 1s;
}
#top-bar.call-to-action.on-top{
    top:0;
}
#bottom-bar.call-to-action{
    bottom:-100px;
    transition: bottom 1s;
}
#bottom-bar.call-to-action.on-bottom{
    bottom:0;
}

@media (max-width: 767px) {
    #top-bar.call-to-action{
        top:-150px;
    }
    #bottom-bar.call-to-action{
        bottom:-100px;
    }
    #top-bar.call-to-action .container-fluid img{
        max-width:150px!important;
    }
    #top-bar.call-to-action .container-fluid p{
        font-size:0.8rem!important;
    }
    #top-bar.call-to-action .container-fluid .btn{
        font-size:0.8rem!important;
    }
}
@media (min-width:768px) and (max-width: 980px) {
    #top-bar.call-to-action{
        top:-150px;
    }
    #bottom-bar.call-to-action{
        bottom:-100px;
    }
    #top-bar.call-to-action .container-fluid img{
        max-width:200px!important;
        margin-top:4px!important;
    }
    #top-bar.call-to-action .container-fluid p{
        font-size:0.8rem!important;
    }
    #top-bar.call-to-action .container-fluid .btn{
        font-size:0.74rem!important;
        white-space: nowrap;
    }
}
@media (max-width: 767px) {
    #bottom-bar.call-to-action .container-fluid img{
        max-width:150px!important;
    }
    #bottom-bar.call-to-action .container-fluid p{
        font-size:0.8rem!important;
    }
    #bottom-bar.call-to-action .container-fluid .btn{
        font-size:0.8rem!important;
    }
}
@media (min-width:768px) and (max-width: 980px) {
    #bottom-bar.call-to-action .container-fluid img{
        max-width:200px!important;
        margin-top:4px!important;
    }
    #bottom-bar.call-to-action .container-fluid p{
        font-size:0.74rem!important;
    }
    #bottom-bar.call-to-action .container-fluid .btn{
        font-size:0.74rem!important;
    }
}


/* TEXTO -------------------------------------------------------------- */

.f-light{
    font-weight:300!important;
}
.f-regular{
    font-weight:500!important;
}
.f-bold{
    font-weight:900!important;
}

h1,h2,h3,h4,h5,h6{
    font-weight:300!important;
}


h1{
    font-size: 2rem;
}


p,h1,h2,h3,h4,h5,h6{
    cursor: default;
}

.mt-5px{
    margin-top:5px;
}

.zi-0{
    z-index:0;
}
.zi-1{
    z-index:1;
}
.multiply{
    mix-blend-mode:multiply;
}
.h-squarecol{
    min-height: calc(100vw/6);
}


@media (min-width: 768px) {
    .mb-md--20{
        margin-bottom:-20px;
    }
}
@media (min-width: 768px) {
    .mb-md--30{
        margin-bottom:-30px;
    }
}






/* ALTURAS ------------------------------------------------------------ */

.h-30{
    height: 30%!important;
}
.h-80{
    height: 80%!important;
}
.h-85{
    height: 85%!important;
}
.h-90{
    height: 90%!important;
}


.vh80{
    height:80vh!important;
}
.vh60{
    height:60vh!important;
}
.vh20{
    height:20vh!important;
}
.vh10{
    height:10vh!important;
}

.min-vh-100{
    min-height:100vh;
}


/* COLOR -------------------------------------------------------------- */
.bg-primary{
    background-color:var(--bs-primary)!important;
}
.bg-primary-75{background-color:var(--bs-primary-75)!important;}
.bg-primary-60{background-color:var(--bs-primary-60)!important;}
.bg-primary-50{background-color:var(--bs-primary-50)!important;}
.bg-primary-40{background-color:var(--bs-primary-40)!important;}
.bg-primary-30{background-color:var(--bs-primary-30)!important;}
.bg-primary-20{background-color:var(--bs-primary-20)!important;}

.bg-primary-dark{
    background-color:var(--bs-primary-dark)!important;
}
.bg-primary-dark-75{background-color:var(--bs-primary-dark-75)!important;}
.bg-primary-dark-60{background-color:var(--bs-primary-dark-60)!important;}
.bg-primary-dark-50{background-color:var(--bs-primary-dark-50)!important;}
.bg-primary-dark-40{background-color:var(--bs-primary-dark-40)!important;}
.bg-primary-dark-30{background-color:var(--bs-primary-dark-30)!important;}
.bg-primary-dark-20{background-color:var(--bs-primary-dark-20)!important;}

.bg-secondary{
    background-color:var(--bs-secondary)!important;
}
.bg-secondary-10{background-color:var(--bs-secondary-10)!important;}
.bg-secondary-50{background-color:var(--bs-secondary-50)!important;}


.bg-tertiary{
    background-color:var(--bs-tertiary)!important;
}
.bg-tertiary-light{
    background-color:var(--bs-tertiary-light)!important;
}
.bg-quaternary{
    background-color:var(--bs-quaternary)!important;
}
.bg-quaternary-light{
    background-color:var(--bs-quaternary-light)!important;
}

.bg-darkgray-alpha{
    background-color:var(--dark-gray-alpha)!important;
}
.bg-black{
    background-color:rgb(0,0,0)!important;
}
.bg-black-95{
    background-color:rgba(0,0,0,0.95)!important;
}
.bg-light-gray{
    background-color:var(--light-gray)!important;
}


.text-primary{
    color:var(--bs-primary)!important;
}
.text-primary-dark{
    color:var(--bs-primary-dark)!important;
}
.text-secondary{
    color:var(--bs-secondary)!important;
}
.text-tertiary{
    color:var(--bs-tertiary)!important;
}
.text-quaternary{
    color:var(--bs-quaternary)!important;
}
.text-quaternary-light{
    color:var(--bs-quaternary-light)!important;
}
.text-light-gray{
    color:var(--light-gray)!important;
}


.border-2-primary{
    border:2px solid var(--bs-primary);
}
.border-2-secondary{
    border:2px solid var(--bs-secondary);
}
.border-2-quaternary{
    border:2px solid var(--bs-quaternary);
}


.bg-fondo{ 
    background: url('../img/kaleidoscope.jpg') center top repeat-y;
    background-size: auto;
}
.bg-fondo-video{ 
    background: url('../img/fondo.jpg') center top repeat-y;
    background-size: cover;
}
.bg-auditorio{
    background: url('../img/auditorio.jpg') top center no-repeat;
    background-size: cover;
}
@media (max-width: 767px) {
    .bg-img02{
        background-position-y: 65%;
    }
}



/* MENU -----------------------------------------------------------------*/


.menu-nav .btn{
    font-size:1.14rem;
    color:white;
    letter-spacing:1px;
    border:0!important;
    text-transform: uppercase;
    flex: 1 1 0;
}
.menu-nav .btn:focus{
    box-shadow:none!important;
}
.menu-nav .btn span{
    display:inline-block;
    margin:auto;
}
  
@media (min-width:768px) and (max-width: 1400px) {
    .menu-nav .btn{
        font-size:0.8rem;
        margin: 5px!important;
        display:flex;
    } 
}   





/* MENU MOBILE -----------------------------------------------------------*/

nav.mobile{
    position: fixed;
    width:100%;
    z-index:1;
}
nav.mobile label .menu {
    position: absolute;
    right: -100px;
    top: -120px;
    z-index: 100;
    width: 180px;
    height: 180px;
    background: #fff;
    border-radius: 50% 50% 50% 50%;
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    box-shadow: 0 0 0 0 #fff, 0 0 0 0 #fff;
    cursor: pointer;    
  }  
 nav.mobile label .hamburger {
    position: absolute;
    top: 125px;
    left: 35px;
    width: 30px;
    height: 2px;
    background: var(--bs-quaternary);
    display: block;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
  }  
 nav.mobile label .hamburger:after,nav.mobile label .hamburger:before {
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: var(--bs-quaternary);
  }  
 nav.mobile label .hamburger:before { top: -10px; }  
 nav.mobile label .hamburger:after { bottom: -10px; }  
 nav.mobile label input { display: none; }  
 nav.mobile label input:checked + .menu {
    box-shadow: 0 0 0 100vw var(--bs-secondary-light), 0 0 0 100vh var(--bs-secondary-light);
    border-radius: 0;
    background: var(--bs-secondary-light);    
  }  
 nav.mobile label input:checked + .menu .hamburger {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);    
  }  
 nav.mobile label input:checked + .menu .hamburger:after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    bottom: 0;    
  }  
 nav.mobile label input:checked + .menu .hamburger:before {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    top: 0;    
  }  
 nav.mobile label input:checked + .menu + .menu-container { 
    transform: translate(-50%, -50%);
    transition: .25s 0s ease-in-out;
}  
 nav.mobile label .menu-container {
    z-index: 200;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(200%, -50%);
    transform: translate(200%, -50%);
    -webkit-transition: .25s 0s ease-in-out;
    transition: .25s 0s ease-in-out;
  }




/* VARIOS  =============================================================== */
/* ====================================================================== */



/* titulos sección */
.tit-section h1,
.fs-tit-section{
    font-size:3rem
}
@media (max-width: 767px) {
    .tit-section h1,
    .fs-tit-section{
        font-size:2rem
    }
    .tit-main h1{
        font-size: 2.2rem;
    }    
} 



/* WELCOME  =============================================================== */
/* ====================================================================== */

.logos-welcome .logo-klockner{
    max-width:300px;
}
.logos-welcome .logo-sepa{
    max-width:210px;
}

@media (max-width: 767px) {
    #welcome{
        min-height:100vh;
    }
}
@media (max-width: 980px) {
    .logos-welcome .logo-klockner{
        max-width:190px;
    }
    .logos-welcome .logo-sepa{
        max-width:130px;
    }
}  


@media (min-width: 980px) and (max-width:1399px) {
    #welcome .slogan h1{
        font-size:2.6rem;
    }
    #welcome .boton-container {
        padding:0!important;
    }
    #welcome .logos-welcome {
        margin-top:-100px!important;
    }
}
@media (min-width: 1200px) {
    #welcome{
        min-height:100vh;
    }
}














/* PROGRAMA  =============================================================== */
/* ====================================================================== */


@media (min-width: 768px) {

}

#programa .frase{
    font-size:2rem;
}

@media (max-width: 991px) {
    #programa .frase{
        font-size:1.6rem;
    }
    #programa .tit-section h1{
        font-size:3rem
    }
} 

@media (max-width: 767px) {
    #programa .tit-section h1{
        font-size:2rem
    }
}

.programa-item {
    font-size:1.2em;
    line-height:1.4em;
    margin-bottom:30px;
}
.programa-item small{
    font-size:0.8em;
}
.programa-item .titulo{
    font-size:1.2em;
    font-weight:700;
}
.programa-item .sub.titulo{
    font-weight:500;
    font-size:1em;
}




.speakers-item{
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction:column;
    margin: 10px 0 0 0;
    background-color:black;
}
.speakers-item p{
    margin-top:auto;
    margin-bottom:auto;
}
.speakers-item .txt{
    font-weight: 300;
    font-size:0.95em;
    line-height: 1.2em;
    text-align:center;
    color:white;
    padding:10px 5px;
}
.speakers-item .txt .txt-small{
    font-size:0.75em;
    font-weight:300;
    line-height: 1.2em;
}
.speakers-item .foto,
.modal .foto{
    display:block;    
    background-color:#989496;
    margin:0 auto;
}



@media (max-width: 767px) {
    .speakers-item{
        justify-content: center!important;
    }

    .tit-speakers{
        font-size:2rem;
    }
} 


/* */
a.bot-modal{
    text-decoration:none!important;
}
.modal h4{
    margin-bottom:30px;
}
@media (max-width: 991px) {
    .modal h4{
        text-align:center;
    }
}


/* FOOTER =============================================================== */
/* ====================================================================== */
#cookies_banner {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    z-index: 999;
    border-radius: 0;
    background-color:var(--bs-gray-500);
    color:white;
}

.contact-link{
    display:inline-block;
    margin-left:auto;
    margin-right:auto;
    padding-left:5px;
    padding-right:5px;
}
.contact-link a{
    color:black;
}

@media (max-width: 767px) {
    .contact-link{
        display:block;
        margin-top:10px;
        margin-bottom:10px;
    }
}

footer .logo-kaleidoscope{
    max-width:460px;
}
footer .logo-sepa{
    max-width:250px;
}
footer .logo-klockner{
    max-width:300px;
}
@media (max-width: 767px) {
    footer .logo-kaleidoscope{
        max-width:300px;
    }
    footer .logo-sepa{
        max-width:180px;
    }
    footer .logo-klockner{
        max-width:220px;
    }
}




/* BOTONES BOOTSTRAP ======================================================== */
.btn{
    border-radius: 0;
    letter-spacing: 1px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-style: normal;
}

.btn h1,
.btn h2,
.btn h3,
.btn h4,
.btn h5,
.btn h6{
    margin-bottom:0;
    letter-spacing:0.1em;
}

.btn span{
    vertical-align: middle;
}

.btn-check:focus+.btn, 
.btn:focus {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(253, 13, 53, 0.25)!important;
}
.btn:hover *{
    cursor:pointer!important;
}

.btn.btn-rounded{
    border-radius:3em;
}

/* primary */
.btn-primary,
.btn-primary.disabled, 
.btn-primary:disabled{
    background-color:var(--bs-primary);
    border-color:var(--bs-primary);
}


/* primary dark*/
.btn-primary-dark,
.btn-primary-dark.disabled, 
.btn-primary-dark:disabled{
    background-color:var(--bs-primary-dark);
    border-color:var(--bs-primary-dark);
    color:white;
}
.btn-primary-dark:hover,
.btn-primary-dark:active,
.btn-primary-dark.active{
    background-color:var(--bs-primary);
    border-color:var(--bs-primary);
    color:white;
}

/* primary alpha*/
.btn-primary.alpha,
.btn-primary.alpha.disabled, 
.btn-primary.alpha:disabled{
    background-color:var(--bs-primary-75);
    border-color:var(--bs-primary-75);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active{
    background-color:var(--bs-primary-dark);
    border-color:var(--bs-primary-dark);
}
.btn-primary:focus{
    background-color:var(--bs-primary-dark);
    border-color:var(--bs-primary-dark);
    box-shadow: 0 0 0 0.25rem rgba(38,202,202, .5);
}




/*outline primary*/
.btn-outline-primary{
    color:var(--bs-primary);
    background-color:transparent;
    border:1px solid var(--bs-primary)!important;
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active{
    color:white;
    background-color:var(--bs-primary)!important;
    border:1px solid var(--bs-primary)!important;
}




/* secondary */
.btn-secondary,
.btn-secondary.disabled, 
.btn-secondary:disabled{
    background-color:var(--bs-secondary);
    border-color:var(--bs-secondary);
}
.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary.active{
    background-color:var(--bs-secondary-light);
    border-color:var(--bs-secondary-light);
}
.btn-secondary:focus{
    background-color:var(--bs-secondary-light);
    border-color:var(--bs-secondary-light);
    box-shadow: 0 0 0 0.25rem rgba(38,202,202, .5);
}


/* tertiary */
.btn-tertiary,
.btn-tertiary.disabled, 
.btn-tertiary:disabled{
    background-color:var(--bs-tertiary);
    border-color:var(--bs-tertiary);
}
.btn-tertiary:hover,
.btn-tertiary:active,
.btn-tertiary.active{
    background-color:var(--bs-tertiary-50);
    border-color:var(--bs-tertiary-50);
}
.btn-tertiary:focus{
    background-color:var(--bs-tertiary-50);
    border-color:var(--bs-tertiary-50);
    box-shadow: 0 0 0 0.25rem rgba(38,202,202, .5);
}


/* quaternary */
.btn-quaternary,
.btn-quaternary.disabled, 
.btn-quaternary:disabled{
    background-color:var(--bs-quaternary);
    border-color:var(--bs-quaternary);
    color:white;
}
.btn-quaternary:hover,
.btn-quaternary:active,
.btn-quaternary.active{
    background-color:var(--bs-quaternary-light);
    border-color:var(--bs-quaternary-light);
    color:white;
}
.btn-quaternary:focus{
    background-color:var(--bs-quaternary-light);
    border-color:var(--bs-quaternary-light);
    box-shadow: 0 0 0 0.25rem rgba(38,202,202, .5);
    color:white;
}


/* gray */
.btn-gray,
.btn-gray.disabled, 
.btn-gray:disabled{
    color:white;
    background-color:var(--bs-gray-600);
    border-color:var(--bs-gray-600);
}
.btn-gray:hover,
.btn-gray:active,
.btn-gray.active{
    color:white;
    background-color:var(--bs-gray-800);
    border-color:var(--bs-gray-800);
}
.btn-gray:focus{
    color:white;
    background-color:var(--bs-gray-800);
    border-color:var(--bs-gray-800);
    box-shadow: 0 0 0 0.25rem rgba(38,202,202, .5);
}


/*outline gray*/
.btn-outline-gray{
    color:var(--light-gray);
    background-color:transparent;
    border:1px solid var(--light-gray)!important;
}

.btn-outline-gray:hover,
.btn-outline-gray:active,
.btn-outline-gray.active{
    color:var(--dark-gray);
    background-color:var(--light-gray)!important;
    border:1px solid var(--light-gray)!important;
}



.modal-content{
    border-radius:0!important;
}













/** ANI LOGO */
#logo-ani{
    width:100%;
    max-width:1080px;
  }
  #logo-ani img{
    position:absolute;
    width:100%;
    max-width:125px;
    display:inline-block;
    /**/
    top:120px;
  }
  #logo-ani img.k{
    top:0;
    left:0;
    /*transform: translateX(0);*/
  }
  #logo-ani img.a1{
    top:0;
    left:100px;
    /*transform: translateX(125);*/
  }
  #logo-ani img.a2{
    top:0;
    left:100px;
    /*transform: translateX(225);*/
  }