@import url("fonts.css");


:root {
    --TEXT: #13478D;
    --SECONDARY-TEXT: rgb(203,216,222);
    --THIRD-TEXT: rgb(121,134,140);
    --MAIN: rgb(0,75,133);
    --SECONDARY: rgb(219,230,234);
    --HOVER: rgb(240,244,247);
    --TITLE: rgb(62,180,226);
    --HOVER-SECONDARY: rgb(0,112,202);
}
body{
    background: url("../images/fondo.jpg");
}


.checkbox-container {
    display: flex;
    position: relative;
    cursor: pointer;
    font-size: 22px;
    user-select: none;
    align-items: center;
}


    .checkbox-container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

.checkbox {
    position: absolute;
    left: calc((100% - 21px) / 2);
    height: 21px;
    width: 21px;
    background-color: var(--SECONDARY);
}


.checkbox-container:hover input ~ .checkbox {
    background-color: var(--MAIN);
}

.checkbox-container input:checked ~ .checkbox {
    background-color: var(--HOVER-SECONDARY);
}

.checkbox:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox-container input:checked ~ .checkbox:after {
    display: block;
}

.checkbox-container .checkbox:after {
    left: 7px;
    top: 1px;
    width: 7.5px;
    height: 15.5px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}



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


#pie{
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0.75em auto 0em auto;
    width:75%;
    flex-wrap:wrap;
}

    #pie img {
        display: block;
        width: 100%;
        flex-basis: 100%;
        padding:0.375em 0em;
        border-bottom: 2.75px solid var(--SECONDARY);
    }

#pie > a{
    display:block;
    text-decoration:none;
    margin:0.75em;
    color:var(--THIRD-TEXT)
}

.btn-fijo{
    position:relative;
}

.btn-upload {
    display: block;
    border-radius: 50%;
    color: white;
    width: 43px;
    height: 43px;
    background: var(--HOVER-SECONDARY);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55em;
    cursor: pointer;
    position: absolute;
    top:0em;
    right:0em;
    margin:0.195em;
    z-index: 1001;
    opacity: 0.91;
}
.btn-upload:hover{
    background: var(--MAIN);
}

.fixed-button {
    border: none!important;
    border-radius: 3.75em;
    padding: 0.95em;
    position: fixed;
    bottom: 0em;
    right: 0em;
    margin: 0.75em;
    background: var(--MAIN);
    color: white;
}
.fixed-button:active,.fixed-button:visited,.fixed-button:focus{
    outline:none!important;
}

.fixed-button2 {
   right:auto;
    border-radius: 1em !important;
    background: var(--HOVER-SECONDARY)!important;
}

.fixed-button2:hover {
    background: var(--TITLE)!important;
}

.fixed-button2 span:last-child {
    text-transform: uppercase;
    font: 11pt 'visbycf-light'!important;
}


    .fixed-button:hover {
        background: var(--HOVER-SECONDARY);
    }
    .fixed-button span:last-child {
        text-transform: uppercase;
        font: 14pt 'visbycf-light';
    }

span.validationStyle {
    color: rgb(229,0,0);
    display: flex;
    align-items: center;
    padding-left: 23px !important;
    font: 600 10pt 'visbycf-light';
    text-transform: capitalize;
    background: url('../images/validation/error.png') no-repeat center left;
    height: 32px;
}

.encabezado{
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    flex-wrap:wrap;
}


.encabezado img{
    width:93%;
    display:block;
}


.contenedor-registro{
    width:75%;
    margin:auto;
}

.contenedor-registro input {
    width: 100%;
    background: var(--SECONDARY);
    border:none!important;
    outline: none !important;
    font: 600 12pt 'visbycf-light';
    padding:0.95em!important;
}

.contenedor-registro input::placeholder {
    text-transform: uppercase;
    font: 600 12pt 'visbycf-light';
}

.contenedor-registro input:hover{
    background:var(--HOVER)!important;
}


.selection-list {
    overflow: hidden;
    overflow-y: auto;
    max-height: 8.97em;
    font: 14pt 'visbycf-light';
    color: var(--THIRD-TEXT);
}

.selection-list > div{
    display:flex;
    align-items:center;
}


    .selection-list > div > div:first-child {
        flex-basis: 97%;
        margin-top:0.45em;
    }
        .contenedor-registro input[type="checkbox"],label[for]{
        cursor:pointer;
    }

 
       
            .contenedor-registro form > div:last-child{
        display:flex;
        align-items:center;
        justify-content:center;
        padding:0.75em!important;
    }

.contenedor-registro form > div > div{
    margin:0.29em 0em!important;
    padding:0em!important;
    padding:0em 0.175em!important;
}



thead th{
    text-transform:uppercase;
    background:var(--THIRD-TEXT)!important;
    color: white!important;
    text-align:center;

}
table{
    width:75%!important;
    margin:0.5em auto 0.5em auto!important;
    background:white;
}
   table th {
        font: 12pt 'visbycf-regular';
    }

    table td {
        font: 10pt 'visbycf-light';
    }


.title-section {
    font: 24pt 'visbycf-light';
    text-align: center;
    color: var(--THIRD-TEXT);
    text-transform: uppercase;
    margin:1em 0em!important;
}

.contenedor-registro button {
    font: 14pt 'visbycf-regular';
    color:white;
    border:none!important;
    outline:none!important;
    text-transform:uppercase;
    padding: 0.55em 0.95em!important;
    border:none!important;
    background:var(--MAIN);
    letter-spacing:3.75px;
}
.contenedor-registro button:hover{
    background:var(--HOVER-SECONDARY)!important;
}


.alert{
    text-transform:uppercase;
}


#menu ul{
    list-style-type:none;
    list-style-position:inside;
    background: var(--MAIN);
    width:75%;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:center;
}

    #menu ul li {
        padding: 1.03em 0.75em;
        text-align:center;
        flex:1;
        transition: all 0.75s ease-in-out;
    }
        #menu ul li:nth-child(3), #menu ul li:nth-child(4){
            flex:1.5;
        }


        #menu ul li a {
            display: block;
            text-decoration: none;
            text-transform: uppercase;
            font: 14pt 'visbycf-regular';
            color: white;
        }

    #menu ul li:hover,.menu-active-item{
        background:var(--HOVER-SECONDARY)!important;
    }



#slider {
    overflow: hidden;
    border-radius:1px;
}

    #slider .carousel-inner {
        max-height: 595px;
    }





    #slider .carousel-indicators li {
        border-radius: 50%;
        width: 13px;
        height: 13px;
        background: white;
        opacity: 1 !important;
        border: 2px solid white !important;
        box-shadow: 0px 0px 15px gray;
    }


    .carousel-caption > div {
        width: 65% !important;
        margin: 27.5px 0px !important;
        font-size: 24pt;
    }

#slider .carousel-control-prev {
    justify-content: flex-start;
    left: -64px;
    opacity: 0;
}

#slider .carousel-control-next {
    justify-content: flex-end;
    right: -64px;
    opacity: 0;
}

#slider:hover .carousel-control-prev {
    animation: animate-next 1.5s ease-in-out;
    opacity: 1;
    left: 0px;
}

#slider:hover .carousel-control-next {
    animation: animate-prev 1.5s ease-in-out;
    opacity: 1;
    right: 0px;
}

#slider li.active {
    background: var(--MAIN) !important;
}

@keyframes animate-next {
    from {
        left: -64px;
        opacity: 0;
    }

    to {
        left: 0px;
        opacity: 1;
    }
}

@keyframes animate-prev {
    from {
        right: -64px;
        opacity: 0;
    }

    to {
        right: 0px;
        opacity: 1;
    }
}

#det-evento{
    display:flex;
    width:75%;
    margin:0.15em auto 0em auto;
    flex-wrap:wrap;
    align-items:center;
}

#det-evento > div{
    flex-basis:50%;
    }

    #det-evento > div:nth-child(3){
        flex-basis:100%;
    }


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


.promotional > div{
    padding:0.55em;

}

.promotional > div:nth-child(2){
    flex-basis:85%;
}

#det-evento iframe {
    width:100%;
    border: none !important;
    height: 379px;
}

        #det-evento video{
            width:85%;
            margin:auto;
            display:block;

        }

#info{
    border:0.125px solid var(--THIRD-TEXT);
    padding:0.25em;
    background:rgba(0,0,0,0.1175);
    width:100%;
    user-select:none;
}
#info span:nth-child(1){
    width:20%;
    display:inline-block;
}
#info span:nth-child(1) {
    font: 900 14pt 'visbycf-regular';
}
#info span:nth-child(2) {
    font: 900 12pt 'visbycf-light';
}

        .info-evento > div {
            margin: 0.35em 0em;
        }
.info-evento > div{
    text-align:center;
}

    .info-evento > div:nth-child(1){
        color: var(--TEXT);
    }

    .info-evento > div:nth-child(2), .info-evento > div:nth-child(3) {
        font: 900 18pt 'visbycf-regular';
        text-transform: capitalize;
    }


@media screen and (min-width:240px) and (max-width: 1023px) and (orientation:portrait) {

    .encabezado img:first-child {
        width: 100% !important;
    }

    .encabezado img:last-child{
        width:195%!important;
    }

  
    .fa-calendar-days,.fa-location-dot{
        font-size:2em!important;
    }

    .carousel-inner {
        padding: 1em !important;
    }

    .fa-calendar-days {
        font-size: 2em!important;
    }

    .fa-location-dot {
        font-size: 2em !important;
    }



    #menu{
        display:none!important;
    }

    #slider .carousel-inner {
        max-height: 415px!important;

    }

    #inicio{
        width:95%!important;
    }

    .nav-menu{
        top:1.91em!important;
    }

    #det-evento{
        flex-wrap:wrap!important;
        width:100%!important;
    }
    #det-evento > div{
        flex-basis:100%!important;
    }

    .promotional{
        flex-wrap:wrap-reverse!important;
    }
    .promotional > div{
        flex-basis:100%!important;
    }

    #det-evento video{
        width:100%!important;
    }

    table {
        border: 0;
        width:95%!important;
    }

        table thead {
            border: none;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
        }

        table tr {
            display: block;
            margin-bottom: .625em;
        }

        table td {
            border-bottom: 1px solid #ddd;
            display: block;
            font-size: .8em;
            text-align: right;
        }

            table td::before {
                content: attr(data-label);
                float: left;
                font-weight: bold;
                text-transform: uppercase;
            }

            table td:last-child {
                border-bottom: 0;
            }
   .title-section{
       font-size:22pt;
   }

   .contenedor-registro form > div{
       flex-wrap:wrap!important;
   }

   .contenedor-registro form > div > div{
       flex-basis:100%!important;
   }

   .contenedor-registro{
       width:100%!important;
       padding:0.5em!important;
   }

   .selection-list{
       max-height:315px!important;
   }
    .selection-list > div{
        flex-wrap:wrap!important;
    }
    .selection-list > div > div{
        flex-basis:100%!important;
        margin:0.250em 0em!important;
    }
        
        .selection-list > div > div:last-child {
            display: flex;
            padding-right: 1.15em !important;
            justify-content: end;
        }

        #info > div > span{
            width:100%!important;
        }
}

@media screen and (min-width:240px) and (max-width: 1023px) and (orientation:landscape) {

    .encabezado img:first-child {
        width: 100% !important;
    }

    .encabezado img:last-child {
        width: 195% !important;
    }
  

    .fa-calendar-days, .fa-location-dot {
        font-size: 2em !important;
    }

    .carousel-inner {
        padding: 1em !important;
    }

    .fa-calendar-days {
        font-size: 2em !important;
    }

    .fa-location-dot {
        font-size: 2em !important;
    }



    #menu {
        display: none !important;
    }

    #slider .carousel-inner {
        max-height: 415px !important;
    }

    #inicio {
        width: 95% !important;
    }

    .nav-menu {
        top: 1.91em !important;
    }

    #det-evento {
        flex-wrap: wrap !important;
        width: 100% !important;
    }

        #det-evento > div {
            flex-basis: 100% !important;
        }

    .promotional {
        flex-wrap: wrap-reverse !important;
    }

        .promotional > div {
            flex-basis: 100% !important;
        }

    #det-evento video {
        width: 100% !important;
    }

    table {
        border: 0;
        width: 95% !important;
    }

        table thead {
            border: none;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
        }

        table tr {
            display: block;
            margin-bottom: .625em;
        }

        table td {
            border-bottom: 1px solid #ddd;
            display: block;
            font-size: .8em;
            text-align: right;
        }

            table td::before {
                content: attr(data-label);
                float: left;
                font-weight: bold;
                text-transform: uppercase;
            }

            table td:last-child {
                border-bottom: 0;
            }

    .title-section {
        font-size: 22pt;
    }

    .contenedor-registro form > div {
        flex-wrap: wrap !important;
    }

        .contenedor-registro form > div > div {
            flex-basis: 100% !important;
        }

    .contenedor-registro {
        width: 100% !important;
        padding: 0.5em !important;
    }

    .selection-list {
        max-height: 315px !important;
    }

        .selection-list > div {
            flex-wrap: wrap !important;
        }

            .selection-list > div > div {
                flex-basis: 100% !important;
                margin: 0.250em 0em !important;
            }

                .selection-list > div > div:last-child {
                    display: flex;
                    padding-right: 1.15em !important;
                    justify-content: end;
                }

    #info > div > span {
        width: 100% !important;
    }
    
}