//@c2:#5344ac; @c3:#5142a8;
@import '/filesweek/animate.less';
//@p:#5848b7;
@p:#2d4968;
@s:#BFAA32;
//@s:#ff4122;
@ao : #204b86 ;
@ac : #00d0e0 ;
@dc :#ffad00 ;
@bb : #ffffff;
@nn : #000000;
@g1:#444444;
@g2:#888888;
@g3:#e2e2e2; 
@success: #28a745;
@info: #17a2b8;
@warning: #ffc107;
@danger: #dc3545; 
@movil: ~"(min-width: 576px)"; @xmovil: ~"(max-width: 576px)"; //sm
@tablet: ~"(min-width: 768px)"; @xtablet: ~"(max-width: 768px)"; //md
@grande: ~"(min-width: 992px)"; @xgrande: ~"(max-width: 992px)"; //lg
@amplio: ~"(min-width: 1200px)"; @xamplio: ~"(max-width: 1200px)";//xl
.flex(){display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex;}
.sombra(@color:fade(@nn,15%) ){ -webkit-box-shadow: 0px 0px 10px 0px @color; -moz-box-shadow: 0px 0px 10px 0px @color; box-shadow: 0px 0px 10px 0px @color; }
.tanc(@x:0.5s){-webkit-transition: all @x ease-in-out; -o-transition: all @x ease-in-out; transition: all @x ease-in-out;}
.vrespon { position: relative; height: 0; overflow: hidden; padding-bottom: 56.25%;
    a {display: flex;}
    > * , img {position: absolute; top:0; left: 0; width: 100%; height: 100%;}
    //x,y y/x*100 = res //4,3 (3/4)*100 = 75%
    &.p16x9v  {padding-bottom: 177.777%;}
    &.p3x2v  {padding-bottom: 150%;}
    &.p4x3v  {padding-bottom: 133.333%;}
    &.p1x1  {padding-bottom: 100%;}
    &.p4x3  {padding-bottom: 75%;}
    &.p3x2  {padding-bottom: 66.666%;}
    &.p16x9  {padding-bottom: 56.25%;}
    &.p2x1  {padding-bottom: 50%;}
    &.p8x3  {padding-bottom: 37.5%;}
    &.p3x1  {padding-bottom: 33.33%;}
    &.p32x9 { padding-bottom:28.125% }   
    &.responsive{
        > *:nth-child(2){
            display: none;
        }
        @media @xmovil {
            padding-bottom: 100%!important;
            &.r16x9v  {padding-bottom: 177.777%!important;}
            &.r3x2v  {padding-bottom: 150%!important;}
            &.r4x3v  {padding-bottom: 133.333%!important;}
            &.r1x1  {padding-bottom: 100%!important;}
            &.r4x3  {padding-bottom: 75%!important;}
            &.r3x2  {padding-bottom: 66.666%!important;}
            &.r16x9  {padding-bottom: 56.25%!important;}
            &.r2x1  {padding-bottom: 50%!important;}
            &.r8x3  {padding-bottom: 37.5%!important;}
            &.r3x1  {padding-bottom: 33.33%!important;}
            &.r32x9 { padding-bottom:28.125%!important;}
            
            > *:nth-child(1){
                display: none
            }
            > *:nth-child(2){
                display: initial;
            }
        }
    }
}
* { font-family: 'Montserrat', sans-serif; font-weight:normal; color:@g1; }
a,h1,h2{font-weight: 800;}
h3,h4,h5,h6{font-weight:300;}

.parallax {
    background-image: url("/imagenes/bg_forms_iw_st2.png");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    &.only{
        *{color: @bb}
        >div{
            .flex();
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 100%;
            padding: 70px 0em;
            //background-color: fade(@p,75%);
        }
    }
    &.classespera{
        background-image: url("/filesweek/img/cabeza2.jpg");
        *{color: @bb}
        [classespera]{
            h1{margin-top: 4em;}
            [flexespera]{
                padding: 4em 0em;
                .flex();
                flex-wrap: wrap;
                justify-content: center;
                >*{
                    text-align: center;
                    width: calc(~'100% / 3');
                    padding: 1.5em 0em;
                    >span{
                        font-weight: bold;
                    }
                }
            }
        }
    }
}
.morado{
    background-color: @p;
    *{color: @bb;}
    padding: 70px 0em;
}
.gris{
    background-color: lighten(@g3,7%);
    *{color: @g1;}
    padding: 70px 0em;
}
.blanco{
    padding: 70px 0em;
}
.blanco2{
    padding: 35px 0em;
}
#contenidofull{overflow-x: hidden;}
body{
    overflow-x: hidden;
    header{
        background-color: @p;
        width: 100%;
        //height: 100vh;
        *{color: @ao;}
        >div{
            .flex();
            flex-direction: column;
            justify-content:space-between;
            //background-color: fade(@p,15%);
            width: 100%;
            height: 100%;
            >section{
                .flex();
                justify-content: center;
                align-items: center;
                flex-direction: column;
                width: 100%;
                height: calc(~'100% - 65px');
                flex-grow:1;
                padding: 0em 1em;
                h1{
                    font-size: 80px;
                    @media @xgrande {font-size: 32px;}
                }
                >div{ 
                    .flex();
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    width: 100%;
                    padding: 1em 0em;
                    img {
                        width: 100%;
                        max-width: 530px;
                        &#imglogos{ max-width: 300px; }
                    }
                }
            }
            >nav{ 
                background-color: @p;
                .flex();
                height: 65px;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                &.menu-fixed {
                    position:fixed;
                    z-index:1000;
                    top:0;
                }                
                *{.tanc}
                >div{ 
                    .flex();
                    height: 65px;
                    justify-content: space-between;
                    align-items: center;
                    &::before,&::after{content: none!important;}
                    @media @xtablet{width: 100%;}
                    >aside{
                        a{padding: 0px 15px;}
                    }
                    >div{
                        .flex();
                        >ul{ margin: 0px; padding: 0px; list-style-type: none;
                            .flex();
                            >li{
                                .flex();
                                >a{
                                    .flex();
                                    justify-content: center;
                                    align-items: center;
                                    padding: 0px 15px;
                                    height: 65px;
                                    color: @bb;
                                    &:hover,&.liga_activo{
                                        background-color: darken(@p,15%);
                                        color: lighten(@s,10%);
                                        text-decoration:none;
                                    }
                                }
                            }
                        }
                        @media @xgrande {
                            &#menusuperior{
                                position: fixed;
                                //background-color: fade(@p,85%);
                                top: 65px;
                                right: -100%;
                                bottom: 0;
                                max-width: 300px;
                                min-width: 200px;
                                width: 100%;
                                overflow: auto;
                                z-index: 100;
                                >ul{
                                    flex-direction:column;
                                    width: 100%;
                                    li{ width: 100%;
                                        a{ width: 100%; border-bottom: 1px solid fade(@bb,50%); }
                                    }
                                }
                                &.burger_m_activo{
                                    right: 0;
                                }
                            }
                        }
                    }
                    >.hamburger{
                        display: none;
                        @media @xgrande {
                            .flex();
                        }
                        justify-content: center;
                        align-items: center;
                        padding: 0em 20px;
                        height: 65px;
                        font-size: 2em;
                        cursor: pointer;
                        &:hover,&.burger_activo{
                            background-color: darken(@p,15%);
                            color: lighten(@s,10%);
                            i{color: lighten(@s,10%);}
                            text-decoration:none;
                        }
                    }
                }
            }
        }
    }
    footer {
        background-color: @p; color: @bb; padding-bottom: 25px; padding-top: 25px; font-size: .9em;
        border-top: 5px solid darken(@p,15%);
        *{color: @bb!important;}
        .footerfinal{
            .flex(); justify-content: center; align-items: center; flex-direction: column; padding: 0px 20px;
            p {margin: 0px; text-align: center;}
            a {color: @bb!important;; text-decoration: none;
                &:hover,&.liga_activo {color: lighten(@s,10%) !important;}
            }
            &>div{
                width: 100%; max-width: 1338px; .flex(); justify-content:space-between; align-items: center;
                @media @xgrande {flex-direction: column;}
            }
        }
    }
}
.flexincolum{
    @media @grande {
        .flex();
        align-items: center;
    }
}
.btn-new{
    .tanc();
    background-color: @s;
    color: @bb;
    border-radius: 0px;
    border: 2px solid @s;
    i{color: @bb;}
    &:hover{
        background-color: @bb;
        color: @s;
        i{color: @s;}
        border: 2px solid @s;
    }
}

.calendario{
    width: 100%;
    *{.tanc();}
    font-size: 1.1em;
    th{font-size: 1.3em; border-bottom: 1px solid @g1; }
    td,th{ padding: .5em; }
    td:nth-child(1){ border-right: 1px solid @g1; width: 60px; }
    tr:hover{ background-color: @g3; }
}
.imgfotante{
    float: right;
    width: 250px;
    margin: 40px 15px -290px 0px;
    position: relative;
    z-index: 2;
    @media @xgrande {
        float: none;
        margin: 40px auto 0px auto;
        width: 100%;
        max-width: 300px;
    }
}
.cuadricula{
    .flex();
    flex-wrap: wrap;
    >aside{
        width: 50%;
        .flex();
        justify-content: center;
        align-items: center;
        >.vrespon{width: 100%;}
        background-color: @p;
        &.fx{
            padding: 4em;
            flex-direction: column;
            justify-content: space-between;
            align-items: initial;
            h4{font-weight: 600; font-size: 2em;}
            p{font-size: 1.2em;}
        }

    }
    .btn-dark{
        .tanc();
        background-color: @g2;
        color: @bb;
        border-radius: 0px;
        border: 2px solid @g2;
        &:hover{
            background-color: @p;
            color: @bb;
            border: 2px solid @bb;
        }
    }
    @media @xgrande {
        >aside{
            width: 100%;
            &:nth-child(1){ order: 1; }
            &:nth-child(2){ order: 2; }
            &:nth-child(3){ order: 4; }
            &:nth-child(4){ order: 3; }
            &:nth-child(5){ order: 5; }
            &:nth-child(6){ order: 6; }
            &:nth-child(7){ order: 8; }
            &:nth-child(8){ order: 7; }
            &:nth-child(9){ order: 9; }
            &:nth-child(10){ order: 10; }
            &:nth-child(11){ order: 12; }
            &:nth-child(12){ order: 11; }
            &:nth-child(13){ order: 13; }
            &:nth-child(14){ order: 14; }
            &:nth-child(15){ order: 16; }
            &:nth-child(16){ order: 15; }
        }
    }
}
.imgtext{
    .tanc();
    border: 1px solid fade(@g1,25%);
    background-color: @bb;
    >div:nth-child(2){
        padding: 1em 0em;
        *{text-align: center;}
    }
    &:hover{
        .sombra();
    }
}

 ::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder { color: #cbcbcb; }
 input[type="text"], input[type="email"], textarea { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; text-shadow: none; }
 textarea { resize: none; }
 select { -webkit-appearance: none; -moz-appearance: none; appearance: none; text-indent: 0.01px; text-overflow: ''; }
 form input[type="radio"], form input[type="checkbox"], .wsite-com-product-option-groups input[type="radio"], .wsite-com-product-option-groups input[type="checkbox"] { width: 16px; height: 16px; border: 1px solid #dcdcdc !important; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; text-shadow: none; }
 form input[type="radio"], form input[type="radio"] { border-radius: 8px; }
 form input[type="checkbox"], form input[type="checkbox"] { background-color: white; border-radius: 0; }
 form input[type="radio"]:after, form input[type="radio"]:after { display: block; border-radius: 8px; box-sizing: border-box; content: ""; }
 form input[type="radio"]:checked:after, form input[type="radio"]:checked:after { background: #dcdcdc; border: 2px solid #fafafa; width: 14px; height: 14px; }
 form input[type="checkbox"]:after, form input[type="checkbox"]:after { position: relative; top: 1px; left: 4px; width: 3px; height: 6px; border: solid #dcdcdc; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
 form input[type="checkbox"]:checked:after, form input[type="checkbox"]:checked:after { display: block; content: " "; }
 form input, form textarea, form select { height: auto; padding: 8px !important; margin-bottom: 15px; background: white; color: #626262; border: 1px solid #dcdcdc; border-radius: 3px; font-family: 'Lato', sans-serif; font-size: 14px; font-weight: 400; line-height: normal; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; }


 .formularios{
     width: 100%;
     max-width: 600px;
     margin: 1em auto;
    *{.tanc();}
    font-size: 1.1em;
    th{font-size: 1.3em; border-bottom: 1px solid @g1; }
    td,th{ padding: .5em; vertical-align: middle;}
    tr:hover{ background-color: @g3; }
    input,textarea{margin: 0px; width: 100%;}
    textarea{min-height:100px}
    td:nth-child(1){ width: 175px; text-align: right; }
}
.btn-formulario{
    .tanc();
    background-color: @p;
    color: @bb;
    border-radius: 0px;
    border: 2px solid @p;
    &:hover{
        background-color: @bb;
        color: @p;
        border: 2px solid @p;
    }
}
[getcalendario]>.locultas{display: none;}

//VENTANA
.ventanav {
    position: fixed; z-index: 99999; top: 65px; left: 65px; bottom: 65px; right: 65px; background-color: fade(@p, 75%); color: @bb; font-weight: bold; padding: 25px; font-size: 1.5em; 
    border: 1px solid @bb;
    display: none;
    .sombra();
    .contenidov {
        height: 100%; width: 100%;
        .barrav {
            border-bottom: solid 1px @bb; .flex(); justify-content:space-between; background-color: fade(@p, 50%);
            *{color: @bb!important;}
            #barrat{flex-grow: 1; overflow: hidden; max-height: 30px;}
            .botonv {
                width: 30px; height: 30px; .flex(); justify-content: center; align-content: center; align-items: center;
                &:hover {
                    background-color: fade(@bb, 50%); cursor: pointer;
                }
            }
        }
        .convidev {
            width: 100%; height: calc(~'100% - 30px'); 
            background-repeat: no-repeat; background-position: center;
            overflow: auto;
            background-color: rgba(255,255,255,.7);
            padding: 1em;
            a{color: lighten(@s,10%); .tanc(); text-decoration: none;
                &:hover{
                    color: @p;
                    text-decoration: none;
                }
            }
        }
    }
}
.logos{
    .flex();
    justify-content: center;
    align-items: center;
    >*{width: 160px;}
    @media @xtablet {
        height: 160px;
    }
}
.redessup{
    display: none;
    //.flex();
    justify-content: flex-end;
    align-items: center;
    padding: 15px 25px 0px 25px;
    img{
        width: 25px;
        height: 25px;
        margin: 0px 5px;
        opacity: .85;
        .tanc();
        &:hover{
            opacity: 1;
        }
    }
}

.rotando (@x:0deg) {
    -ms-transform: rotate(@x);
    -webkit-transform: rotate(@x);
    transform: rotate(@x);
}
.llamaanimacion (@nombre:'rotar'; @tiempo:.25s; @rep:1; @mode:forwards){
    -webkit-animation-name: @nombre;
    -moz-animation-name: @nombre;
    -ms-animation-name: @nombre;
    -o-animation-name: @nombre;
    animation-name: @nombre;
    -webkit-animation-duration: @tiempo;
    -moz-animation-duration: @tiempo;
    -ms-animation-duration: @tiempo;
    -o-animation-duration: @tiempo;
    animation-duration: @tiempo;
    -webkit-animation-iteration-count: @rep;
    -moz-animation-iteration-count: @rep;
    -ms-animation-iteration-count: @rep;
    -o-animation-iteration-count: @rep;
    animation-iteration-count: @rep;
    -webkit-animation-fill-mode: @mode;
    -moz-animation-fill-mode: @mode;
    -ms-animation-fill-mode: @mode;
    -o-animation-fill-mode: @mode;
    animation-fill-mode: @mode;
}
@-webkit-keyframes rotar {.cuantorota;}
@-moz-keyframes rotar {.cuantorota;}
@-ms-keyframes rotar {.cuantorota;}
@-o-keyframes rotar {.cuantorota;}
@keyframes rotar {.cuantorota;}
@-webkit-keyframes rotarx {.cuantorota2;}
@-moz-keyframes rotarx {.cuantorota2;}
@-ms-keyframes rotarx {.cuantorota2;}
@-o-keyframes rotarx {.cuantorota2;}
@keyframes rotarx {.cuantorota2;}
.cuantorota () { from {.rotando(-90deg)} to {.rotando(0deg)}}
.cuantorota2 () { from {.rotando(0deg)} to {.rotando(-90deg)}}

.recinst {
    border-bottom: 1px solid fade(@g2, 50%); 
    h3 {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        margin: .4em 0em;
        font-weight: 400;
        color: @p;
        cursor: pointer;
        span{
            color: @p;
            width: 25px;
            height: 25px;
            .rotando(-90deg)
        }
    }
    h4 {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        margin: 0;
        font-weight: 400;
        color: @p;
        cursor: pointer;
        span{
            color: @p;
            width: 18px;
            height: 18px;
            .rotando(-90deg)
        }
    }
    h3, h4 {
        &:hover{
            color: @dc;
            span{
                color: @dc;
                .llamaanimacion()
            }
        }
    }
    & + aside{
        display: none;
        padding: 10px;
        padding-left: 35px;
        border-bottom: 1px solid fade(@g2, 50%);
        background-color: fade(@g2, 15%);
        p{margin: 0px}
        h4{margin: 15px 0px 0px 0px}
    }
    &.recinst2 {
        background-color: fade(@s, 5%);
        h3,h4 {
            color: @s;
            span{ 
                color: @s;
                .rotando(0deg)
            }
            &:hover {
                color: @dc;
                span{
                    color: @dc;
                    .llamaanimacion('rotarx');
                }
            }
        }
    }
}
.expositores{
    .flex();
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    >*{ 
        max-width: calc(~'100% / 5'); 
        padding: 1em;
        width: 100%;
        @media @xtablet {
            max-width: calc(~'100% / 3'); 
        }
        @media @xmovil {
            max-width: calc(~'100% / 1'); 
        }
    }
}
[carruselcontenedor] {
    background-image: url(/imagenes/load-c.svg); 
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color: @g3;
    .carrusel{
        position: absolute; top:0; left: 0; width: 100%; height: 100%;
        > [botones]{ 
            position: absolute; width: 100%; .flex(); justify-content: center; align-items: center; bottom: -30px;
            .tanc();
            > [derecha],> [izquierda]{
                cursor:pointer;
                background-image: url(/imagenes/flechas2.svg);
                background-repeat: no-repeat;
                background-size: cover;
                width: 15px;
                height: 15px;
                //border-radius: 15px;
                opacity: .5;
                //box-shadow: 0px 0px 5px fade(@nn,45%);
                margin: 0px 10px;
                &:hover{
                    opacity: .8;
                    //box-shadow: 0px 0px 5px fade(@nn,100%);
                }
            }
            > [derecha] { background-position: right;
            }
            > [izquierda] { background-position: left; }
            >[botones-selec] {
                .flex(); justify-content: center; align-items: center;
                @media (max-width: 576px){ display: none; }
                span {
                    //background-color: @ao;
                    background-color: @bb;
                    width: 10px;
                    height: 10px;
                    margin: 0px 10px;
                    border-radius: 5px;
                    font-size: 0px;
                    opacity: .5;
                    box-shadow: 0px 0px 5px fade(@nn,45%);
                    .flex();
                    cursor: pointer;
                    &:hover{
                        opacity: .8;
                        //box-shadow: 0px 0px 5px fade(@nn,100%);
                    }
                    &.activoc {
                        opacity: 1!important;
                        background-color: @bb;
                        //box-shadow: 0px 0px 5px fade(@nn,100%);
                        cursor:default!important;
                    }
                }
            }
        }
        >[items] { width: 100%; height: 100%;
            >* { width: 100%; height: 100%; display: none; opacity: 0;
                &.activoc{ display: block; opacity: 1; }
                img { width: 100%; height: 100%; }
            }
        }
        &:hover,&[hover]{
            >[botones] {
                bottom: 25px;
            }
        }
    }
    &[carruselcontenedor="responsivo"]{
        @media (max-width: 768px){ background-color: @g3; padding-bottom: 100%!important;}
    }
}
[flex]{
    background-color: @p;
    padding: 1em;
    .flex();
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    @media @xgrande { font-size: 25px; }
    @media (max-width: 400px) { font-size: 15px; }
}
.cbx-funtion(@color:#005794,@colora:#fff,@colorfondo:#bbbbbb,@colorsombra:#000){
    display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
        justify-content: center;
        margin-top: 15px;
        flex-wrap: wrap;
        > .cbx-toggle{ 
            display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; 
            align-items: center;
            &:not(:nth-child(1)){ margin-left:10px }
            label:nth-child(1){ margin-right: 10px; font-weight:normal }
            input{ display:none; 
                &:checked{ 
                    + label[for]{
                        &:before { background: fade(@color,50%); }
                        span {
                            background: fade(@color,100%);
                            transform: translateX(20px);
                            transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease;
                            box-shadow: 0 3px 8px fade(@color,20%);
                            &:before {
                                transform: scale(1);
                                opacity: 0;
                                transition: all 0.4s ease;
                            }
                        }
                    }
                }
            }
            label[for]{
                position: relative;
                display: block;
                width: 40px;
                height: 20px;
                cursor: pointer;
                -webkit-tap-highlight-color: transparent;
                transform: translate3d(0, 0, 0);
                &:before{
                    content: "";
                    position: relative;
                    top: 3px;
                    left: 3px;
                    width: 34px;
                    height: 14px;
                    display: block;
                    background: @colorfondo;
                    border-radius: 8px;
                    transition: background 0.2s ease;            
                }
                span{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 20px;
                    height: 20px;
                    display: block;
                    background: fade(@colora,100%);
                    border-radius: 10px;
                    box-shadow: 0 3px 8px fade(@colorsombra,50%);
                    transition: all 0.2s ease;
                }
                span:before{
                    content: "";
                    position: absolute;
                    display: block;
                    margin: -18px;
                    width: 56px;
                    height: 56px;
                    background: fade(@color,50%);
                    border-radius: 50%;
                    transform: scale(0);
                    opacity: 1;
                    pointer-events: none;
                }
            }
        }
    }
    .cbx-contenido{
        .cbx-funtion(@p);
        &.rojo{.cbx-funtion(red);}
        &.verde{.cbx-funtion(green);}
    }