@import url('https://fonts.googleapis.com/css2?family=Agdasima&family=Alegreya+Sans&family=Bacasime+Antique&family=Cardo&family=Cinzel+Decorative&family=Cinzel:wght@600&family=Cormorant&family=Cormorant+Garamond&family=Courgette&family=Dancing+Script&family=Diphylleia&family=Fira+Sans+Condensed&family=Libre+Baskerville&family=Lora&family=Noticia+Text&family=Philosopher&family=Playfair+Display&family=Quicksand&family=Ysabeau+SC&family=Zilla+Slab&display=swap');

/*body {
 background: #363636;
 margin: 0;
 }
 #screen {
 width: 980px;
 height: 551px;
 margin: 0 auto;
 background: #000;
 overflow: hidden;
 position: relative;
 }
 #slider {
 width: 2700px;
 position: absolute;
 }
 #slider img {
 margin: 0;
 padding: 0;
 width: 980px;
 opacity: 0.2;
 z-index: 1;
 }
 #slider img.open {
 /*width: 980px;*/
/*}

 #play {
 position: absolute;
 top: 150px;
 left: 300px;
 width: 980px;
 height: 551px;
 background: #ccc no-repeat center;
 z-index: 2;
 cursor: pointer;
 display: none;
 }
 #play:before {
 content: '\f01d';
 font-family: FontAwesome;
 font-weight: normal;
 }*/
body{
    margin:0;
    overflow:hidden;
}
#wrapper.vertical,
#preload.vertical,
.image-container.diapo.vertical{
    transform: rotate(-90deg);
    transform-origin:top right;

    position:absolute;
    left:-100vh;

    height:100vw;
    width:100vh;
}
.image-container.diapo.vertical img{
    height:100vw;
    width:100vh;
}
* {
    font-family: 'Open Sans', sans-serif;
}
body, html {
    height: 100%;
    width: 100%;
    /*background: #00368C;*/
}
body {
    /*background: #00368C;*/
}
.nofx,
.nofx *{
    -webkit-transition: none !important;
    -moz-transition: none !important;
    transition: none !important;
    transition: transform 0 linear;

    -webkit-transform: scale(1) translate(0px, 0px) !important;
    transform: scale(1) translate(0px, 0px) !important;
}
img {
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}
#wrapper {
    padding-left: 0;
    /*-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;*/
    height: 100%;
}
.logo-gesmemori{
    width: 200px !important;
}

@media (min-width: 1023px) {

    /*** MOSTRAR OPCIONES****/
    #wrapper.vertical #toggle-sidebar-out {
        display: none;
    }

    #wrapper.vertical #toggle-sidebar {
        display: none !important;
    }

    #wrapper.no-move #video-options {
        display: none;
    }

    #wrapper.no-move #toggle-sidebar {
        display: none !important;
    }

    #wrapper:not(.no-move) #video-options {
        display: block;
    }

    #wrapper:not(.no-move) #toggle-sidebar {
        display: block;
    }

}

#wrapper.no-move * {
    cursor: none;
}
#toggle-screen, #toggle-close, #toggle-fx, #share-buttons {
    -webkit-transition: top 0.5s ease, bottom 0.5s ease;
    -moz-transition: top 0.5s ease, bottom 0.5s ease;
    -o-transition: top 0.5s ease, bottom 0.5s ease;
    transition: top 0.5s ease, bottom 0.5s ease;
}
#ss-next, #ss-prev {
    -webkit-transition: left 0.5s ease, right 0.5s ease;
    -moz-transition: left 0.5s ease, right 0.5s ease;
    -o-transition: left 0.5s ease, right 0.5s ease;
    transition: left 0.5s ease, right 0.5s ease;
}
#wrapper.no-move #ss-next {
    right: -35px;
}
#wrapper.no-move #ss-prev {
    left: -35px;
}
#wrapper.no-move #toggle-screen, #wrapper.no-move #toggle-close, #wrapper.no-move #toggle-fx{
    top: -20px;
}
#wrapper.no-move #share-buttons{
    top: -25px;
}
#preload {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #00368C;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}
#preload .percent {
    font-size: 13px;
    margin-top: 10px;
    margin-bottom: 40px;
    color: #00ACE4;
}
#preload i {
    font-size: 60px;
    color: #00ACE4;
}
#preload.ok {
    display: none;
}
#preload .preload-container {
    width: 260px;
    height: 115px;
}
#preload .preload-container  .preload-text {
    margin-top: 20px;
    font-size: 24px;
    font-weight: 200;
}
#kenburns-slideshow {
    height: 100%;
    /*-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;*/
    background: #000;
}
.ss-slides-wrap {
    max-height: 100%;
}
#wrapper .container-fluid {
    height: 100%;
    padding: 0;
    position: relative;
}
#wrapper div#banner_top {
    position: absolute;
    width: 100%;
    z-index: 2;
    bottom: 0;
    padding: 30px;
    opacity: 1;
    transition: opacity 1s;
    /*-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;*/
}
#wrapper div#banner_top.hide {
    opacity: 0;
}
#wrapper div#banner_top .pesame-text {
    line-height: 8vh;
    padding: 30px 100px;
    font-size: 4vh;
    color: #fff;
    font-family: 'Droid Serif', serif;
}
#wrapper div#banner_top .pesame-name {
    color: #fff;
    font-size: 4vh;
    font-style:italic;
}
#wrapper div#banner_top #banner_username {
    color: #444;
    font-size: 20px;
    text-align: center;
    font-weight: 600;
    margin-top: 20px;
}
#wrapper div#banner_top #user_image_container{
    border-radius: 50%;
    height: 78px;
    width: 78px;
    overflow: hidden;
    margin: 20px auto 10px;
    background: #f0f0f0;
    border: 4px solid #fff;
}
#wrapper div#banner_top #user_image_container img{
    max-height: 70px;
}
#wrapper.toggled {
    padding-left: 310px;
}

#sidebar-wrapper {
    z-index: 1000;
    position: absolute;
    left: 310px;
    width: 0;
    height: 100%;
    margin-left: -310px;
    overflow: hidden;
    background: #174FAC;
    /*-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;*/
}
#toggle-sidebar,#toggle-sidebar-out, #toggle-close-options {
    top: 120px !important;
}
#toggle-sidebar,
#toggle-sidebar-out,
#toggle-options,
#toggle-play,
#toggle-stop,
#toggle-close-options{
    font-size: 25px;
    color: #fff;
    position: absolute;
    left: 0px;
    top: 60px;
    z-index: 2;
    background: #174FAC;
    display: none;
    cursor: pointer;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
}
#toggle-close-options:hover,
#toggle-sidebar:hover,
#toggle-sidebar-out:hover,
#toggle-options:hover {
    color: #fff;
}
#toggle-screen,
#toggle-close,
#toggle-fx{
    position: absolute;
    z-index: 1;
    right: 70px;
    top: 30px;
    cursor: pointer;
    color: #fff;
    opacity: .5;
}
#share-buttons {
    position: absolute;
    z-index: 1;
    right: 130px;
    top: 22px;
    cursor: pointer;
    color: #fff;
    opacity: .5;
}
#toggle-screen:hover,
#toggle-close:hover,
#toggle-fx:hover {
    opacity: 1;
}
#toggle-close {
    right: 30px;
    top: 27px;
    font-size: 23px;
}
#toggle-fx {
    right: 110px;
}
#toggle-text {
    padding-right: 20px;
}
#toggle-text, #toggle-text span, #toggle-text input {
    text-align: left;
    float: left;
    line-height: 60px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}
#toggle-text input{
    background: #fff;
    color: #00ACE4;
    margin-top: 24px;
    margin: 24px 10px 10px 0;
}
#toggle-mute {
    float: left;
    line-height: 60px;
    font-size: 24px;
    color: #fff;
    width: 60px;
    height: 60px;
    margin-left: 10px;
    cursor: pointer;
}
#toggle-play,
#toggle-close-options,
#toggle-stop {
    position: initial;
    display: inline-block;
    float: left;
}
#toggle-close-options {
    float: right;
}
#volume-slider {
    float: left;
    width: 183px;
    height: 10px;
    margin: 26px 0px 0;
}
#video-options {
    width: 0;
    height: 120px;
    /*background: #00368C;*/
    overflow: hidden;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
#video-options.toggled {
    width: 865px;
    display: inline-block;
    padding-left: 60px;
    /*background: #00368C;*/
}
#toggle-options {
    top: 0px;
    right: 0;
    font-size: 21px;
    height: 120px !important;
}
#video-options .music-label {
    float: left;
    line-height: 60px;
    font-size: 12px;
    color: #fff;
    font-weight: 600;
    margin: 0;
}
#video-options #audio-select {
    width: 210px;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    text-overflow: ellipsis;
    float: left;
    height: 22px;
    padding: 0 8px;
    margin-top: 20px;
    margin-left: 10px;
    background: #174FAC;
    border: 0;
    outline: 0;
}
#video-options #audio-select:focus {
    box-shadow: none;
}
#video-options #toggle-options{
    /*background: #00368C;*/
    display: block;
}
#wrapper:not(.toggled) #toggle-sidebar{
    display: block;
}
#wrapper.toggled #toggle-sidebar-out,
#wrapper.toggled #toggle-options {
    left: -53px;
    display: block;
    right: initial;
    border-radius: 0 4px 0 0;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
#wrapper.toggled #toggle-sidebar-out {
    border-radius: 0 0 4px 0;
}
#sidebar-wrapper:hover #toggle-sidebar {
    display: block;
}
#section-toggle-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 100%;
    z-index: 3;
}
#wrapper.toggled #section-toggle-sidebar:hover #toggle-sidebar-out,
#wrapper.toggled #section-toggle-sidebar:hover #toggle-options{
    left: 0;
}
#video-options.toggled #toggle-options {
    left: 0;
}
#wrapper:not(.toggled) #sidebar-wrapper #qr-info {
    min-height: 44%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
@media (min-width: 1420px) and (orientation: portrait) {
   #wrapper:not(.toggled) #sidebar-wrapper #qr-info {
    width: 32%;
    right: 0;
}
}
#sidebar-wrapper #qr-info .bg-mobile{
    background: url(../img/qrcode_bg.png) center no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px
}

#sidebar-wrapper #qr-info div.qr-title {
    font-size: 18px;
    font-weight: 200;
    padding: 20px;
}
#sidebar-wrapper #qr-info img#qr-image {
    width: 90%;
    padding: 60px;
    object-fit: contain;
}
/* AJUSTAR EL CODIGO QR EN LA VERSION MOVIL Y LA TABLET VERTICAL Y HORIZONTAL*/
@media (min-width: 320px) and (max-width: 480px) {
    #sidebar-wrapper #qr-info img#qr-image {
        padding: 24px;
    }
    #section-toggle-sidebar{
        display: none;
    }
    #sidebar-wrapper #qr-info div.qr-title {
        margin-bottom: 0 !important;
    }
}
@media (min-width: 768px) and (max-width: 1024px) { 
    /* CSS */
    #wrapper:not(.vertical) #qr-info img#qr-image {
        width: 74% !important;
        padding: 36px !important;
    }
    #sidebar-wrapper #qr-info div.qr-title {
        margin-bottom: 0 !important;
    }
}   
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    /* CSS */
    #wrapper.vertical #qr-info img#qr-image {
        width: 100%  !important;
        padding: 24%  !important;
    }  
  }




#sidebar-wrapper #brand-info {
    height: 150px;
    background: #fff;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
}
#sidebar-wrapper #brand-info img {
    max-height: 100% !important;
    max-width: 100%;
    object-fit: contain;
    display: inline-block;
    height: 100%;
    width: auto;
}
#sidebar-wrapper #brand-info #brand_image_container{
    height: 140px; 
    padding: 10px;
    text-align: center;
    margin: 0;
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

@media (orientation: portrait){
    .stream  {
        min-width: calc(100vw - 320px);
        padding-left: 0 !important;
        padding-top: 15vh !important;
        transform: scale(1) !important;
    }
}
    /* ORIENTACION HORIZONTAL (YA ESTABA DEFINIDO ASI) */
@media (orientation: landscape) {
    .stream  {
        min-width: calc(100vw - 320px);
        padding-left: 0 !important;
        padding-top: 5vh !important;
        transform: scale(1) !important;
    }
    #brand_image_container {
        left: 0px !important;
        /*top: 5px !important;*/
        height: 140px;
        padding: 10px;
        margin: 1em 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

            /* ESTILOS PANTALLAS HD - 720 CON ESTILOS EN HORIZONTAL Y VERTICAL  */
    @media (max-width: 1919px) {
         
        .logo-gesmemori{
            width: 145px !important;
        }
        /***QUITAR IMG DEL MOVIL***/
        #wrapper:not(.vertical) #sidebar-wrapper #qr-info .bg-mobile{
            background: none !important;
            flex-grow: 1;
            margin-top: 0 !important;
            min-width: 84px;
        }

        /**QR AUMENTAR FONTO BLANCO**/
        #wrapper:not(.vertical) #qr-image{
            background-color: white !important;
            padding: 2px !important;
            border-radius: 8px !important;
        }

        /* ALTURA CON MEDIDA SOBRE PANTALLA USER-INFO */
        #wrapper:not(.vertical) #sidebar-wrapper #user-info {
            padding-top: 20px !important;
            height: 30vh !important;
            /*height: 245px !important;*/
        }

        /* ALTURA Y PADDING CON MEDIDA SOBRE PANTALLA EVENT-INFO*/
        #wrapper:not(.vertical) #event-info  {
            min-height: 0 !important;
            padding-top: 20px !important;
            margin-top: -8px !important;
            height: 30vh;
            padding-bottom: 0 !important;
        }

        /* ALTURA CON MEDIDA SOBRE PANTALLA BRAND-INFO */
        #wrapper:not(.vertical) #brand-info{
           /* height: 20vh !important*/
             height: 20vh;
        }

        /* ALTURA AUTO SOBRANTE PARA QR-INFO Y PROPIEDAD FLEX CON DIRECCION FILA CUANDO NO ES VERTICAL*/
        #wrapper:not(.vertical) #sidebar-wrapper #qr-info {
            height: 21vh;
            min-height: auto;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            margin-left: 30px;
        }

        /* QR-INFO PROPIEDAD FLEX CON DIRECCION COLUMNA CUANDO ES VERTICAL*/
        #wrapper.vertical #sidebar-wrapper #qr-info {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            right: 20px !important;
        }

         /* REDUCIR MARGEN FECHA USUARIO */
        #wrapper:not(.vertical) #sidebar-wrapper #user-info .user-date {
            margin-top: 0 !important;
            /* color: var(--color_datos_hdHorizon) !important; */
            font-family: var(--font_family_datos_hdHorizon) !important;
        }

        /* ESTILO PARA EL NOMBRE DE USUARIO NO SOBREPASE EL CONTENEDOR */
        #wrapper:not(.vertical) .user-name{
            width: auto !important;
            max-height: 200px;
            word-wrap: break-word;
            margin-left: 20px;
            margin-right: 20px;
            font-size: 20px !important;
            font-family: var(--font_family_datos_hdHorizon) !important;
            font-size: var(--font_size_datos_hdHorizon) !important;
            /* color: var(--color_datos_hdHorizon) !important; */
            margin-top: 10px !important;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        } 

        /* REDUCIR EL TAMAÑO DEL TITUTLO EVENTO */
        #wrapper:not(.vertical) #event-info .event_title {
            font-size: 15px !important;
            margin-top: 0px;
            /* color: var(--color_evento_hdHorizon) !important; */
            /* font-family: var(--font_family_evento_hdHorizon) !important; */
        }

        /* REDUCIR TEXTO DEL EEVENTO */
        #wrapper:not(.vertical) #event-info p {
            font-size: 12px !important;
            /* font-family: var(--font_family_evento_hdHorizon) !important; */
            font-size: var(--font_size_evento_hdHorizon) !important;
            /* color: var(--color_evento_hdHorizon) !important; */
        }

        #wrapper:not(.vertical) #banner_top .pesame-text {
            font-family: var(--font_family_texto_hdHorizon) !important;
            font-size: var(--font_size_texto_hdHorizon) !important;
            /* color: var(--color_texto_hdHorizon) !important; */
            line-height: 6vh;
        }

        #wrapper:not(.vertical) #banner_top .pesame-name {
            font-family: var(--font_family_texto_hdHorizon) !important;
            /* color: var(--color_texto_hdHorizon) !important; */
            line-height: 6vh;
        }

        /* QUITAR ALTURA DE LAS FECHAS DEL EVENTO */
        #wrapper:not(.vertical) .fecha {
            margin-bottom: 0px !important;
        }

        /* ESTRECHAR MARGENES DEL EVENTO */
        #wrapper:not(.vertical) .event{
            padding: 0 50px !important;
            margin: 0 auto !important;
            text-align: center;
            position: relative !important;
            bottom: 20px !important;
        }

        /* LOGO Y TITULO DEL EVENTO EN LA MISMA LINEA */
        #wrapper:not(.vertical) .event .logoevent {
            margin-right: 8px;
            display: inline-block !important;
            font-size: 18px;
            /* color: var(--color_evento_hdHorizon) !important; */
        }
        /* LOGO Y TITULO DEL EVENTO EN LA MISMA LINEA */
        #wrapper:not(.vertical) .event h2.event_title {
            display: inline-block !important
        }
      
        /* ICONO RELOJ DEL EVENTO MAS PEQUEÑO */
        #wrapper:not(.vertical) .fa-clock:before {
            content: "\f017";
            font-size: 11px !important;
        }

        /* REDUCIR EL TAMAÑO DEL TEXTO DEL QR Y PONERLO A LA DERECHA */
        #wrapper:not(.vertical) #sidebar-wrapper #qr-info div.qr-title {
            flex-grow: 1;
            margin: 0 !important;
            text-align: left !important;
            padding: 5px 8px 0 12px !important;
            font-family: var(--font_family_qr_hdHorizon) !important;
            font-size: var(--font_size_qr_hdHorizon) !important;
            /* color: var(--color_qr_hdHorizon) !important; */
        }

        /* TAMAÑO DEL QR DENTRO DEL CONTENEDOR Y SUS MARGENES */
        #wrapper:not(.vertical) #sidebar-wrapper #qr-info img#qr-image {
            width: var(--size_qr_width_hdHorizon) !important;
            object-fit: contain;
        }
    }

    /* ESTILOS PANTALLAS 2K Y SUPERIOR CON ESTILOS EN VERTICAL Y VARIBLES DEL USUARIO  */
    @media (min-width: 2560px) {

        #wrapper:not(.toggled) #qr-info img#qr-image {
            width: var(--size_qr_width_2kHorizon) !important;  
            padding: 10% !important;
            object-fit: cover !important;
            object-position: center !important;
        }
        
        #wrapper:not(.toggled) #sidebar-wrapper #qr-info .bg-mobile {
            height: var(--size_qr_height_2kVertical) !important;  
        }

        #wrapper:not(.vertical):not(.toggled) #sidebar-wrapper #qr-info .bg-mobile {
            height: var(--size_qr_height_2kHorizon) !important;  
        }

        #wrapper:not(.toggled) #sidebar-wrapper #qr-info {
            height: calc(100% - 692px);
        }

        /* #wrapper:not(.vertical) #event-info i{
            color: var(--color_evento_2kHorizon) !important;
        } */

        #wrapper:not(.vertical) #event-info p {
            font-family: var(--font_family_evento_2kHorizon);
            font-size: var(--font_size_evento_2kHorizon);
            /* color: var(--color_evento_2kHorizon); */
        }

        #wrapper:not(.vertical) #event-info .event_title{
            font-family: var(--font_family_evento_2kHorizon);
            /* color: var(--color_evento_2kHorizon); */
        }

        #wrapper:not(.vertical) div#banner_top .pesame-text {
            font-family: var(--font_family_texto_2kHorizon);
            font-size: var(--font_size_texto_2kHorizon);
            color: var(--color_texto_2kHorizon);
        }

        #wrapper:not(.vertical) div#banner_top .pesame-name{
            font-family: var(--font_family_texto_2kHorizon);
            color: var(--color_texto_2kHorizon);
        }

        #wrapper:not(.vertical) #sidebar-wrapper #user-info .user-date{
            font-family: var(--font_family_datos_2kHorizon);
            
        }

        #wrapper:not(.vertical) #sidebar-wrapper #user-info .user-name{
            font-family: var(--font_family_datos_2kHorizon);
            font-size: var(--font_size_datos_2kHorizon);
            
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-left: 26px;
            margin-right: 22px;
        }

        #wrapper:not(.vertical) #sidebar-wrapper #qr-info div.qr-title{
            font-family: var(--font_family_qr_2kHorizon);
            font-size: var(--font_size_qr_2kHorizon);
            color: var(--color_qr_2kHorizon);
            line-height: 1.1;
        }
    }
}


#sidebar-wrapper #brand-info #sender_image_container {
    border-radius: 50%;
    height: 70px;
    width: 70px;
    overflow: hidden;
    margin: 0 auto;
    background: #f0f0f0;
}
#sidebar-wrapper #brand-info #sender_image {
    max-width: 70px;
}
#sidebar-wrapper #brand-info #sender_container {
    position: absolute;
    bottom: 15px;
}
#sidebar-wrapper #brand-info #sender_name {
    color: #878787;
    font-weight: 600;
    font-size: 14px;
    margin-top: 25px;
}
#sidebar-wrapper #user-info {
    height: 320px;
    padding-top: 40px;
}
#sidebar-wrapper #user-info .user-image-container {
    overflow: hidden;
    border-radius: 50%;
    width: 85px;
    height: 85px;
    background: #f0f0f0;
    margin: 0 auto;
}
#sidebar-wrapper #user-info .user-image-container  img{
    max-width: 87px;
}

/* 
  --font_family_texto_fullHDVertical: Droid Serif, serif;
  --font_size_texto_fullHDVertical: 2vh;
  --color_texto_fullHDVertical: #fff;
  --font_family_evento_fullHDVertical: Open Sans, sans-serif;
  --font_size_evento_fullHDVertical: 21px;
  --color_evento_fullHDVertical: #2f324f;
  --font_family_datos_fullHDVertical: Droid Serif, serif;
  --font_size_datos_fullHDVertical: 24px;
  --color_datos_fullHDVertical: #fff;
  --font_family_qr_fullHDVertical: Open Sans, sans-serif;
  --font_size_qr_fullHDVertical: 18px;
  --color_qr_fullHDVertical: #fff;
  --font_family_texto_hdHorizon: Droid Serif, serif;
  --font_size_texto_hdHorizon: 4vh;
  --color_texto_hdHorizon: #fff;
  --font_family_evento_hdHorizon: Droid Serif, serif;
  --font_size_evento_hdHorizon: 14px;
  --color_evento_hdHorizon: #fff;
  --font_family_datos_hdHorizon: Droid Serif, serif;
  --font_size_datos_hdHorizon: 20px;
  --color_datos_hdHorizon: #fff;
  --font_family_qr_hdHorizon: Droid Serif, serif;
  --font_size_qr_hdHorizon: 11px;
  --color_qr_hdHorizon: #fff;
  --font_family_texto_hdVertical: Droid Serif, serif;
  --font_size_texto_hdVertical: 2vh;
  --color_texto_hdVertical: #fff;
  --font_family_evento_hdVertical: Open Sans, sans-serif;
  --font_size_evento_hdVertical: 12px;
  --color_evento_hdVertical: #fff;
  --font_family_datos_hdVertical: Droid Serif, serif;
  --font_size_datos_hdVertical: 24px;
  --color_datos_hdVertical: #fff;
  --font_family_qr_hdVertical: Open Sans, sans-serif;
  --font_size_qr_hdVertical: 12px;
  --color_qr_hdVertical: #fff;
*/

/* ESTILOS PANTALLAS FULL HD HASTA 2K CON ESTILOS EN HORIZONTAL  */
@media (min-width: 1920px) and (max-width: 2559px) {

    #wrapper:not(.vertical) #sidebar-wrapper #qr-info img#qr-image {
        width: var(--size_qr_width_fullHDHorizon) !important;  
        padding: var(--size_qr_height_fullHDHorizon) !important;  
        object-fit: contain;
    }

    #wrapper:not(.vertical) #sidebar-wrapper #user-info {
        padding-top: 25px !important;
    }

    #wrapper:not(.vertical) #event-info {
        margin-top: -60px !important;
    }

    #wrapper:not(.vertical) #sidebar-wrapper #user-info .user-name {
        font-size: var(--font_size_datos_fullHDHorizon) !important;
        /* color: var(--color_datos_fullHDHorizon) !important; */
        margin-top: 8px;
        line-height: 30px;
        font-family: var(--font_family_datos_fullHDHorizon) !important;
        padding: 0 20px 0 20px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    #wrapper:not(.vertical) #sidebar-wrapper #user-info .user-date  {
        font-size: 16px;
        margin-top: 16px;
        /* color: var(--color_datos_fullHDHorizon) !important; */
        font-family: var(--font_family_datos_fullHDHorizon) !important;
    }
    #wrapper:not(.vertical)  #event-info i {
        font-size: 18px;
        /* color: var(--color_evento_fullHDHorizon) !important; */
    }
    #wrapper:not(.vertical) #event-info .event_title {
        font-size: 18px;
        /* color: var(--color_evento_fullHDHorizon) !important; */
        font-family: var(--font_family_evento_fullHDHorizon) !important;
        margin-top: 0px;
    }
    #wrapper:not(.vertical) #event-info p {
        font-size: var(--font_size_evento_fullHDHorizon) !important;
        /* color: var(--color_evento_fullHDHorizon) !important; */
        font-family: var(--font_family_evento_fullHDHorizon) !important;
    }
    #wrapper:not(.vertical) #sidebar-wrapper #qr-info div.qr-title {
        font-size: var(--font_size_qr_fullHDHorizon) !important;
        /* color: var(--color_qr_fullHDHorizon) !important; */
        font-family: var(--font_family_qr_fullHDHorizon) !important;
        line-height: 1.2 !important;
    }

    #wrapper:not(.vertical) #banner_top .pesame-text {
        font-size: var(--font_size_texto_fullHDHorizon) !important;
        /* color: var(--color_texto_fullHDHorizon) !important; */
        font-family: var(--font_family_texto_fullHDHorizon) !important;
        line-height: 6.5vh !important;
    }
    #wrapper:not(.vertical) #banner_top .pesame-name {
        /* color: var(--color_texto_fullHDHorizon) !important; */
        font-family: var(--font_family_texto_fullHDHorizon) !important;
        line-height: 6vh !important;
    }

}

#sidebar-wrapper #user-info .user-name {
    font-size: 24px;
    margin-top: 17px;
    line-height: 30px;
    font-family: 'Droid Serif', serif;
}
#sidebar-wrapper #user-info .user-date  {
    font-size: 16px;
    margin-top: 16px;
    color: #fff;
}
#sidebar-wrapper #text-info {
    background: #00ACE4;
    padding: 20px 10px;
    font-size: 12px;
    color: #fff;
    font-weight: 600;
    text-align: center;
}
#sidebar-wrapper #text-info:before {
    content: "\f10d";
    font-family: FontAwesome;
    font-weight: normal;
    margin-right: 5px;
}
#sidebar-wrapper #text-info:after {
    content: "\f10e ";
    font-family: FontAwesome;
    font-weight: normal;
    margin-left: 5px;
}
#sidebar-wrapper #share-info {
    /*background: #00368C;*/
}
#wrapper.toggled #sidebar-wrapper {
    width: 250px;
}

#page-content-wrapper {
    width: 100%;
    padding: 0;
    height: 100%;
    position: relative;
    overflow: hidden;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -250px;
}
.ss-slide {
    background: #000;
}
.ss-slide img {
    width: 100%;
    filter: brightness(0.8);
    -webkit-filter: brightness(0.8);
    -moz-filter: brightness(0.8);
    -o-filter: brightness(0.8);
    -ms-filter: brightness(0.8);

    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);


}
.ss-slide div {
    transition: transform .5s ease-in-out;
    padding: 100px 20%;
    width: 100%;
    height: 180vh;
    background: #303030;
    font-family: "Droid Serif", serif;
}
.ss-slide div h5 {
    margin-top: 15vh;
    margin-bottom: 5vh;
    line-height: initial;
    font-size: 4vh;
    color: #fff;
    font-style: italic;
    font-family: "Droid Serif", serif;
}
.ss-slide div p {
    font-size: 5.5vh;
    line-height: 8vh;
    color: #b3b3b3;
    font-family: "Droid Serif", serif;
}
/* Sidebar Styles */

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #999999;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.2);
}

.sidebar-nav li a:active, .sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
    color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}

/*
@media (min-width: 768px) {
	#wrapper {
		padding-left: 310px;
	}

	#wrapper.toggled {
		padding-left: 0;
	}

	#sidebar-wrapper {
		width: 315px;
	}

	#wrapper.toggled #sidebar-wrapper {
		width: 0;
	}

	#page-content-wrapper {
		padding: 0;
	}

	#wrapper.toggled #page-content-wrapper {
		position: relative;
		margin-right: 0;
	}
}
*/
@media (min-width: 1200px) {
    #wrapper {
        padding-left: 310px;
    }

    #wrapper.toggled {
        padding-left: 0;
    }

    #sidebar-wrapper {
        width: 315px;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 0;
    }

    #page-content-wrapper {
        padding: 0;
    }

    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
    }
}

.portrait .ss-slide img {
    min-width: initial;
    min-height: 100%;
    height: 100%;
    width: 60%;
    margin-top: 130px;
}
.portrait .ss-slide.supervertical img {
    min-width: unset;
    width: 25%;
}
.portrait .ss-slide.vertical img {
    min-width: unset;
    width: 40%;
}

.ss-slide img {
    /* min-width: 100%; */
    width: 100%;
    height: auto !important;
    min-height: initial !important;
}
.ui-slider-horizontal .ui-slider-handle {
    border: none;
    background: #fff;
    font-weight: normal;
    color: #ffffff;
    width: 10px;
    height: 24px;
    top: -7px;
    margin-left: -5px;
    cursor: ew-resize;
    outline: none;
}
.ui-slider-horizontal .ui-slider-handle.ui-state-hover{
    border: none;
    background: #fff;
}
.ui-slider .ui-slider-range {
    background:#00ACE4;
}
#volume-slider {
    border: none;
    background: #1650ac;
}

#toggle-fx {
    opacity: 1;
}
#toggle-fx.off {
    opacity: 0.5;
    color: #f0f0f0;
}

#share-buttons #share-button{
    background-color:rgba(0,0,0,0);
    color: #fff;
}
#share-buttons:hover{
    opacity:1;
}
#share-buttons #share-button:hover{
    border: 0px;
}
#share-buttons.open #share-button,
#share-buttons.open #share-button:active,
#share-buttons:active #share-button{
    box-shadow: none;
}
#share-buttons.open #share-button{
    opacity: 1;
    border: 0px;
}

#share-buttons.open #share-button i{
    opacity: 1;
    color: #fff;
}

/*Animales*/
p.raza {
    font-size: 18px;
}

/*Estrellas ascendentes*/
.stars {
    z-index: 0 !important;
}
.circle-container {
    position: absolute;
    transform: translateY(10vh);
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}
.circle-container .circle {
    width: 200%;
    height: 200%;
    border-radius: 50%;
    mix-blend-mode: screen;
    -webkit-animation: fadein-frames 200ms infinite, scale-frames 4s infinite;
    animation: fadein-frames 200ms infinite, scale-frames 4s infinite;
}
@-webkit-keyframes fade-frames {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fade-frames {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes scale-frames {
    0% {
        transform: scale3d(0.4, 0.4, 1);
    }
    50% {
        transform: scale3d(2.2, 2.2, 1);
    }
    100% {
        transform: scale3d(0.4, 0.4, 1);
    }
}
@keyframes scale-frames {
    0% {
        transform: scale3d(0.4, 0.4, 1);
    }
    50% {
        transform: scale3d(2.2, 2.2, 1);
    }
    100% {
        transform: scale3d(0.4, 0.4, 1);
    }
}
.circle-container:nth-child(1) {
    width: 5px;
    height: 5px;
    -webkit-animation-name: move-frames-1;
    animation-name: move-frames-1;
    -webkit-animation-duration: 30279ms;
    animation-duration: 30279ms;
    -webkit-animation-delay: 31911ms;
    animation-delay: 31911ms;
}
@-webkit-keyframes move-frames-1 {
    from {
        transform: translate3d(87vw, 10.4vh, 0);
    }
    to {
        transform: translate3d(25vw, -112vh, 0);
    }
}
@keyframes move-frames-1 {
    from {
        transform: translate3d(87vw, 10.4vh, 0);
    }
    to {
        transform: translate3d(25vw, -112vh, 0);
    }
}
.circle-container:nth-child(1) .circle {
    -webkit-animation-delay: 213ms;
    animation-delay: 213ms;
}
.circle-container:nth-child(2) {
    width: 2px;
    height: 2px;
    -webkit-animation-name: move-frames-2;
    animation-name: move-frames-2;
    -webkit-animation-duration: 35732ms;
    animation-duration: 35732ms;
    -webkit-animation-delay: 36360ms;
    animation-delay: 36360ms;
}
@-webkit-keyframes move-frames-2 {
    from {
        transform: translate3d(27vw, 10.6vh, 0);
    }
    to {
        transform: translate3d(9vw, -127vh, 0);
    }
}
@keyframes move-frames-2 {
    from {
        transform: translate3d(27vw, 10.6vh, 0);
    }
    to {
        transform: translate3d(9vw, -127vh, 0);
    }
}
.circle-container:nth-child(2) .circle {
    -webkit-animation-delay: 2741ms;
    animation-delay: 2741ms;
}
.circle-container:nth-child(3) {
    width: 4px;
    height: 4px;
    -webkit-animation-name: move-frames-3;
    animation-name: move-frames-3;
    -webkit-animation-duration: 28311ms;
    animation-duration: 28311ms;
    -webkit-animation-delay: 34748ms;
    animation-delay: 34748ms;
}
@-webkit-keyframes move-frames-3 {
    from {
        transform: translate3d(24vw, 10.7vh, 0);
    }
    to {
        transform: translate3d(59vw, -112vh, 0);
    }
}
@keyframes move-frames-3 {
    from {
        transform: translate3d(24vw, 10.7vh, 0);
    }
    to {
        transform: translate3d(59vw, -112vh, 0);
    }
}
.circle-container:nth-child(3) .circle {
    -webkit-animation-delay: 721ms;
    animation-delay: 721ms;
}
.circle-container:nth-child(4) {
    width: 2px;
    height: 2px;
    -webkit-animation-name: move-frames-4;
    animation-name: move-frames-4;
    -webkit-animation-duration: 33249ms;
    animation-duration: 33249ms;
    -webkit-animation-delay: 30353ms;
    animation-delay: 30353ms;
}
@-webkit-keyframes move-frames-4 {
    from {
        transform: translate3d(2vw, 10.5vh, 0);
    }
    to {
        transform: translate3d(6vw, -115vh, 0);
    }
}
@keyframes move-frames-4 {
    from {
        transform: translate3d(2vw, 10.5vh, 0);
    }
    to {
        transform: translate3d(6vw, -115vh, 0);
    }
}
.circle-container:nth-child(4) .circle {
    -webkit-animation-delay: 2084ms;
    animation-delay: 2084ms;
}
.circle-container:nth-child(5) {
    width: 8px;
    height: 8px;
    -webkit-animation-name: move-frames-5;
    animation-name: move-frames-5;
    -webkit-animation-duration: 35970ms;
    animation-duration: 35970ms;
    -webkit-animation-delay: 35085ms;
    animation-delay: 35085ms;
}
@-webkit-keyframes move-frames-5 {
    from {
        transform: translate3d(63vw, 10.6vh, 0);
    }
    to {
        transform: translate3d(35vw, -130vh, 0);
    }
}
@keyframes move-frames-5 {
    from {
        transform: translate3d(63vw, 10.6vh, 0);
    }
    to {
        transform: translate3d(35vw, -130vh, 0);
    }
}
.circle-container:nth-child(5) .circle {
    -webkit-animation-delay: 979ms;
    animation-delay: 979ms;
}
.circle-container:nth-child(6) {
    width: 1px;
    height: 1px;
    -webkit-animation-name: move-frames-6;
    animation-name: move-frames-6;
    -webkit-animation-duration: 29893ms;
    animation-duration: 29893ms;
    -webkit-animation-delay: 26252ms;
    animation-delay: 26252ms;
}
@-webkit-keyframes move-frames-6 {
    from {
        transform: translate3d(31vw, 10.1vh, 0);
    }
    to {
        transform: translate3d(10vw, -121vh, 0);
    }
}
@keyframes move-frames-6 {
    from {
        transform: translate3d(31vw, 10.1vh, 0);
    }
    to {
        transform: translate3d(10vw, -121vh, 0);
    }
}
.circle-container:nth-child(6) .circle {
    -webkit-animation-delay: 2547ms;
    animation-delay: 2547ms;
}
.circle-container:nth-child(7) {
    width: 5px;
    height: 5px;
    -webkit-animation-name: move-frames-7;
    animation-name: move-frames-7;
    -webkit-animation-duration: 31569ms;
    animation-duration: 31569ms;
    -webkit-animation-delay: 20276ms;
    animation-delay: 20276ms;
}
@-webkit-keyframes move-frames-7 {
    from {
        transform: translate3d(80vw, 10.4vh, 0);
    }
    to {
        transform: translate3d(26vw, -121vh, 0);
    }
}
@keyframes move-frames-7 {
    from {
        transform: translate3d(80vw, 10.4vh, 0);
    }
    to {
        transform: translate3d(26vw, -121vh, 0);
    }
}
.circle-container:nth-child(7) .circle {
    -webkit-animation-delay: 3466ms;
    animation-delay: 3466ms;
}
.circle-container:nth-child(8) {
    width: 7px;
    height: 7px;
    -webkit-animation-name: move-frames-8;
    animation-name: move-frames-8;
    -webkit-animation-duration: 34920ms;
    animation-duration: 34920ms;
    -webkit-animation-delay: 29035ms;
    animation-delay: 29035ms;
}
@-webkit-keyframes move-frames-8 {
    from {
        transform: translate3d(43vw, 10.5vh, 0);
    }
    to {
        transform: translate3d(59vw, -119vh, 0);
    }
}
@keyframes move-frames-8 {
    from {
        transform: translate3d(43vw, 10.5vh, 0);
    }
    to {
        transform: translate3d(59vw, -119vh, 0);
    }
}
.circle-container:nth-child(8) .circle {
    -webkit-animation-delay: 2515ms;
    animation-delay: 2515ms;
}
.circle-container:nth-child(9) {
    width: 1px;
    height: 1px;
    -webkit-animation-name: move-frames-9;
    animation-name: move-frames-9;
    -webkit-animation-duration: 29854ms;
    animation-duration: 29854ms;
    -webkit-animation-delay: 12582ms;
    animation-delay: 12582ms;
}
@-webkit-keyframes move-frames-9 {
    from {
        transform: translate3d(44vw, 10.2vh, 0);
    }
    to {
        transform: translate3d(46vw, -104vh, 0);
    }
}
@keyframes move-frames-9 {
    from {
        transform: translate3d(44vw, 10.2vh, 0);
    }
    to {
        transform: translate3d(46vw, -104vh, 0);
    }
}
.circle-container:nth-child(9) .circle {
    -webkit-animation-delay: 2773ms;
    animation-delay: 2773ms;
}
.circle-container:nth-child(10) {
    width: 7px;
    height: 7px;
    -webkit-animation-name: move-frames-10;
    animation-name: move-frames-10;
    -webkit-animation-duration: 34178ms;
    animation-duration: 34178ms;
    -webkit-animation-delay: 34839ms;
    animation-delay: 34839ms;
}
@-webkit-keyframes move-frames-10 {
    from {
        transform: translate3d(2vw, 10.1vh, 0);
    }
    to {
        transform: translate3d(89vw, -122vh, 0);
    }
}
@keyframes move-frames-10 {
    from {
        transform: translate3d(2vw, 10.1vh, 0);
    }
    to {
        transform: translate3d(89vw, -122vh, 0);
    }
}
.circle-container:nth-child(10) .circle {
    -webkit-animation-delay: 1245ms;
    animation-delay: 1245ms;
}
.circle-container:nth-child(11) {
    width: 2px;
    height: 2px;
    -webkit-animation-name: move-frames-11;
    animation-name: move-frames-11;
    -webkit-animation-duration: 31505ms;
    animation-duration: 31505ms;
    -webkit-animation-delay: 36907ms;
    animation-delay: 36907ms;
}
@-webkit-keyframes move-frames-11 {
    from {
        transform: translate3d(86vw, 10.7vh, 0);
    }
    to {
        transform: translate3d(96vw, -134vh, 0);
    }
}
@keyframes move-frames-11 {
    from {
        transform: translate3d(86vw, 10.7vh, 0);
    }
    to {
        transform: translate3d(96vw, -134vh, 0);
    }
}
.circle-container:nth-child(11) .circle {
    -webkit-animation-delay: 288ms;
    animation-delay: 288ms;
}
.circle-container:nth-child(12) {
    width: 2px;
    height: 2px;
    -webkit-animation-name: move-frames-12;
    animation-name: move-frames-12;
    -webkit-animation-duration: 33383ms;
    animation-duration: 33383ms;
    -webkit-animation-delay: 7667ms;
    animation-delay: 7667ms;
}
@-webkit-keyframes move-frames-12 {
    from {
        transform: translate3d(57vw, 10.8vh, 0);
    }
    to {
        transform: translate3d(54vw, -130vh, 0);
    }
}
@keyframes move-frames-12 {
    from {
        transform: translate3d(57vw, 10.8vh, 0);
    }
    to {
        transform: translate3d(54vw, -130vh, 0);
    }
}
.circle-container:nth-child(12) .circle {
    -webkit-animation-delay: 600ms;
    animation-delay: 600ms;
}
.circle-container:nth-child(13) {
    width: 5px;
    height: 5px;
    -webkit-animation-name: move-frames-13;
    animation-name: move-frames-13;
    -webkit-animation-duration: 30960ms;
    animation-duration: 30960ms;
    -webkit-animation-delay: 21760ms;
    animation-delay: 21760ms;
}
@-webkit-keyframes move-frames-13 {
    from {
        transform: translate3d(54vw, 10.4vh, 0);
    }
    to {
        transform: translate3d(19vw, -118vh, 0);
    }
}
@keyframes move-frames-13 {
    from {
        transform: translate3d(54vw, 10.4vh, 0);
    }
    to {
        transform: translate3d(19vw, -118vh, 0);
    }
}
.circle-container:nth-child(13) .circle {
    -webkit-animation-delay: 1480ms;
    animation-delay: 1480ms;
}
.circle-container:nth-child(14) {
    width: 8px;
    height: 8px;
    -webkit-animation-name: move-frames-14;
    animation-name: move-frames-14;
    -webkit-animation-duration: 31782ms;
    animation-duration: 31782ms;
    -webkit-animation-delay: 13127ms;
    animation-delay: 13127ms;
}
@-webkit-keyframes move-frames-14 {
    from {
        transform: translate3d(42vw, 10.8vh, 0);
    }
    to {
        transform: translate3d(46vw, -122vh, 0);
    }
}
@keyframes move-frames-14 {
    from {
        transform: translate3d(42vw, 10.8vh, 0);
    }
    to {
        transform: translate3d(46vw, -122vh, 0);
    }
}
.circle-container:nth-child(14) .circle {
    -webkit-animation-delay: 3250ms;
    animation-delay: 3250ms;
}
.circle-container:nth-child(15) {
    width: 7px;
    height: 7px;
    -webkit-animation-name: move-frames-15;
    animation-name: move-frames-15;
    -webkit-animation-duration: 29873ms;
    animation-duration: 29873ms;
    -webkit-animation-delay: 3138ms;
    animation-delay: 3138ms;
}
@-webkit-keyframes move-frames-15 {
    from {
        transform: translate3d(4vw, 10.7vh, 0);
    }
    to {
        transform: translate3d(94vw, -127vh, 0);
    }
}
@keyframes move-frames-15 {
    from {
        transform: translate3d(4vw, 10.7vh, 0);
    }
    to {
        transform: translate3d(94vw, -127vh, 0);
    }
}
.circle-container:nth-child(15) .circle {
    -webkit-animation-delay: 1161ms;
    animation-delay: 1161ms;
}
.circle-container:nth-child(16) {
    width: 4px;
    height: 4px;
    -webkit-animation-name: move-frames-16;
    animation-name: move-frames-16;
    -webkit-animation-duration: 31143ms;
    animation-duration: 31143ms;
    -webkit-animation-delay: 22276ms;
    animation-delay: 22276ms;
}
@-webkit-keyframes move-frames-16 {
    from {
        transform: translate3d(46vw, 10.9vh, 0);
    }
    to {
        transform: translate3d(27vw, -120vh, 0);
    }
}
@keyframes move-frames-16 {
    from {
        transform: translate3d(46vw, 10.9vh, 0);
    }
    to {
        transform: translate3d(27vw, -120vh, 0);
    }
}
.circle-container:nth-child(16) .circle {
    -webkit-animation-delay: 1947ms;
    animation-delay: 1947ms;
}
.circle-container:nth-child(17) {
    width: 1px;
    height: 1px;
    -webkit-animation-name: move-frames-17;
    animation-name: move-frames-17;
    -webkit-animation-duration: 33955ms;
    animation-duration: 33955ms;
    -webkit-animation-delay: 22699ms;
    animation-delay: 22699ms;
}
@-webkit-keyframes move-frames-17 {
    from {
        transform: translate3d(72vw, 10.3vh, 0);
    }
    to {
        transform: translate3d(11vw, -108vh, 0);
    }
}
@keyframes move-frames-17 {
    from {
        transform: translate3d(72vw, 10.3vh, 0);
    }
    to {
        transform: translate3d(11vw, -108vh, 0);
    }
}
.circle-container:nth-child(17) .circle {
    -webkit-animation-delay: 3543ms;
    animation-delay: 3543ms;
}
.circle-container:nth-child(18) {
    width: 1px;
    height: 1px;
    -webkit-animation-name: move-frames-18;
    animation-name: move-frames-18;
    -webkit-animation-duration: 28796ms;
    animation-duration: 28796ms;
    -webkit-animation-delay: 24075ms;
    animation-delay: 24075ms;
}
@-webkit-keyframes move-frames-18 {
    from {
        transform: translate3d(24vw, 10.4vh, 0);
    }
    to {
        transform: translate3d(67vw, -106vh, 0);
    }
}
@keyframes move-frames-18 {
    from {
        transform: translate3d(24vw, 10.4vh, 0);
    }
    to {
        transform: translate3d(67vw, -106vh, 0);
    }
}
.circle-container:nth-child(18) .circle {
    -webkit-animation-delay: 3743ms;
    animation-delay: 3743ms;
}
.circle-container:nth-child(19) {
    width: 3px;
    height: 3px;
    -webkit-animation-name: move-frames-19;
    animation-name: move-frames-19;
    -webkit-animation-duration: 30806ms;
    animation-duration: 30806ms;
    -webkit-animation-delay: 15244ms;
    animation-delay: 15244ms;
}
@-webkit-keyframes move-frames-19 {
    from {
        transform: translate3d(81vw, 10.1vh, 0);
    }
    to {
        transform: translate3d(26vw, -102vh, 0);
    }
}
@keyframes move-frames-19 {
    from {
        transform: translate3d(81vw, 10.1vh, 0);
    }
    to {
        transform: translate3d(26vw, -102vh, 0);
    }
}
.circle-container:nth-child(19) .circle {
    -webkit-animation-delay: 2292ms;
    animation-delay: 2292ms;
}
.circle-container:nth-child(20) {
    width: 2px;
    height: 2px;
    -webkit-animation-name: move-frames-20;
    animation-name: move-frames-20;
    -webkit-animation-duration: 32719ms;
    animation-duration: 32719ms;
    -webkit-animation-delay: 20209ms;
    animation-delay: 20209ms;
}
@-webkit-keyframes move-frames-20 {
    from {
        transform: translate3d(9vw, 10.3vh, 0);
    }
    to {
        transform: translate3d(67vw, -129vh, 0);
    }
}
@keyframes move-frames-20 {
    from {
        transform: translate3d(9vw, 10.3vh, 0);
    }
    to {
        transform: translate3d(67vw, -129vh, 0);
    }
}
.circle-container:nth-child(20) .circle {
    -webkit-animation-delay: 2665ms;
    animation-delay: 2665ms;
}
.circle-container:nth-child(21) {
    width: 4px;
    height: 4px;
    -webkit-animation-name: move-frames-21;
    animation-name: move-frames-21;
    -webkit-animation-duration: 34371ms;
    animation-duration: 34371ms;
    -webkit-animation-delay: 30536ms;
    animation-delay: 30536ms;
}
@-webkit-keyframes move-frames-21 {
    from {
        transform: translate3d(59vw, 10.2vh, 0);
    }
    to {
        transform: translate3d(88vw, -108vh, 0);
    }
}
@keyframes move-frames-21 {
    from {
        transform: translate3d(59vw, 10.2vh, 0);
    }
    to {
        transform: translate3d(88vw, -108vh, 0);
    }
}
.circle-container:nth-child(21) .circle {
    -webkit-animation-delay: 3038ms;
    animation-delay: 3038ms;
}
.circle-container:nth-child(22) {
    width: 1px;
    height: 1px;
    -webkit-animation-name: move-frames-22;
    animation-name: move-frames-22;
    -webkit-animation-duration: 33439ms;
    animation-duration: 33439ms;
    -webkit-animation-delay: 19410ms;
    animation-delay: 19410ms;
}
@-webkit-keyframes move-frames-22 {
    from {
        transform: translate3d(21vw, 10.7vh, 0);
    }
    to {
        transform: translate3d(22vw, -113vh, 0);
    }
}
@keyframes move-frames-22 {
    from {
        transform: translate3d(21vw, 10.7vh, 0);
    }
    to {
        transform: translate3d(22vw, -113vh, 0);
    }
}
.circle-container:nth-child(22) .circle {
    -webkit-animation-delay: 2434ms;
    animation-delay: 2434ms;
}
.circle-container:nth-child(23) {
    width: 8px;
    height: 8px;
    -webkit-animation-name: move-frames-23;
    animation-name: move-frames-23;
    -webkit-animation-duration: 32988ms;
    animation-duration: 32988ms;
    -webkit-animation-delay: 31655ms;
    animation-delay: 31655ms;
}
@-webkit-keyframes move-frames-23 {
    from {
        transform: translate3d(80vw, 10.4vh, 0);
    }
    to {
        transform: translate3d(42vw, -125vh, 0);
    }
}
@keyframes move-frames-23 {
    from {
        transform: translate3d(80vw, 10.4vh, 0);
    }
    to {
        transform: translate3d(42vw, -125vh, 0);
    }
}
.circle-container:nth-child(23) .circle {
    -webkit-animation-delay: 3459ms;
    animation-delay: 3459ms;
}
.circle-container:nth-child(24) {
    width: 6px;
    height: 6px;
    -webkit-animation-name: move-frames-24;
    animation-name: move-frames-24;
    -webkit-animation-duration: 36467ms;
    animation-duration: 36467ms;
    -webkit-animation-delay: 8185ms;
    animation-delay: 8185ms;
}
@-webkit-keyframes move-frames-24 {
    from {
        transform: translate3d(79vw, 10.2vh, 0);
    }
    to {
        transform: translate3d(6vw, -111vh, 0);
    }
}
@keyframes move-frames-24 {
    from {
        transform: translate3d(79vw, 10.2vh, 0);
    }
    to {
        transform: translate3d(6vw, -111vh, 0);
    }
}
.circle-container:nth-child(24) .circle {
    -webkit-animation-delay: 989ms;
    animation-delay: 989ms;
}
.circle-container:nth-child(25) {
    width: 1px;
    height: 1px;
    -webkit-animation-name: move-frames-25;
    animation-name: move-frames-25;
    -webkit-animation-duration: 36592ms;
    animation-duration: 36592ms;
    -webkit-animation-delay: 26376ms;
    animation-delay: 26376ms;
}
@-webkit-keyframes move-frames-25 {
    from {
        transform: translate3d(52vw, 10.2vh, 0);
    }
    to {
        transform: translate3d(96vw, -129vh, 0);
    }
}
@keyframes move-frames-25 {
    from {
        transform: translate3d(52vw, 10.2vh, 0);
    }
    to {
        transform: translate3d(96vw, -129vh, 0);
    }
}
.circle-container:nth-child(25) .circle {
    -webkit-animation-delay: 3359ms;
    animation-delay: 3359ms;
}
.circle-container:nth-child(26) {
    width: 8px;
    height: 8px;
    -webkit-animation-name: move-frames-26;
    animation-name: move-frames-26;
    -webkit-animation-duration: 34322ms;
    animation-duration: 34322ms;
    -webkit-animation-delay: 24872ms;
    animation-delay: 24872ms;
}
@-webkit-keyframes move-frames-26 {
    from {
        transform: translate3d(3vw, 10.7vh, 0);
    }
    to {
        transform: translate3d(88vw, -129vh, 0);
    }
}
@keyframes move-frames-26 {
    from {
        transform: translate3d(3vw, 10.7vh, 0);
    }
    to {
        transform: translate3d(88vw, -129vh, 0);
    }
}
.circle-container:nth-child(26) .circle {
    -webkit-animation-delay: 2625ms;
    animation-delay: 2625ms;
}
.circle-container:nth-child(27) {
    width: 8px;
    height: 8px;
    -webkit-animation-name: move-frames-27;
    animation-name: move-frames-27;
    -webkit-animation-duration: 32472ms;
    animation-duration: 32472ms;
    -webkit-animation-delay: 11004ms;
    animation-delay: 11004ms;
}
@-webkit-keyframes move-frames-27 {
    from {
        transform: translate3d(19vw, 10.6vh, 0);
    }
    to {
        transform: translate3d(15vw, -129vh, 0);
    }
}
@keyframes move-frames-27 {
    from {
        transform: translate3d(19vw, 10.6vh, 0);
    }
    to {
        transform: translate3d(15vw, -129vh, 0);
    }
}
.circle-container:nth-child(27) .circle {
    -webkit-animation-delay: 2478ms;
    animation-delay: 2478ms;
}
.circle-container:nth-child(28) {
    width: 5px;
    height: 5px;
    -webkit-animation-name: move-frames-28;
    animation-name: move-frames-28;
    -webkit-animation-duration: 34801ms;
    animation-duration: 34801ms;
    -webkit-animation-delay: 7613ms;
    animation-delay: 7613ms;
}
@-webkit-keyframes move-frames-28 {
    from {
        transform: translate3d(83vw, 10.8vh, 0);
    }
    to {
        transform: translate3d(15vw, -131vh, 0);
    }
}
@keyframes move-frames-28 {
    from {
        transform: translate3d(83vw, 10.8vh, 0);
    }
    to {
        transform: translate3d(15vw, -131vh, 0);
    }
}
.circle-container:nth-child(28) .circle {
    -webkit-animation-delay: 3184ms;
    animation-delay: 3184ms;
}
.circle-container:nth-child(29) {
    width: 8px;
    height: 8px;
    -webkit-animation-name: move-frames-29;
    animation-name: move-frames-29;
    -webkit-animation-duration: 34611ms;
    animation-duration: 34611ms;
    -webkit-animation-delay: 15934ms;
    animation-delay: 15934ms;
}
@-webkit-keyframes move-frames-29 {
    from {
        transform: translate3d(79vw, 10.6vh, 0);
    }
    to {
        transform: translate3d(81vw, -133vh, 0);
    }
}
@keyframes move-frames-29 {
    from {
        transform: translate3d(79vw, 10.6vh, 0);
    }
    to {
        transform: translate3d(81vw, -133vh, 0);
    }
}
.circle-container:nth-child(29) .circle {
    -webkit-animation-delay: 1556ms;
    animation-delay: 1556ms;
}
.circle-container:nth-child(30) {
    width: 8px;
    height: 8px;
    -webkit-animation-name: move-frames-30;
    animation-name: move-frames-30;
    -webkit-animation-duration: 33664ms;
    animation-duration: 33664ms;
    -webkit-animation-delay: 7970ms;
    animation-delay: 7970ms;
}
@-webkit-keyframes move-frames-30 {
    from {
        transform: translate3d(13vw, 10.8vh, 0);
    }
    to {
        transform: translate3d(92vw, -117vh, 0);
    }
}
@keyframes move-frames-30 {
    from {
        transform: translate3d(13vw, 10.8vh, 0);
    }
    to {
        transform: translate3d(92vw, -117vh, 0);
    }
}
.circle-container:nth-child(30) .circle {
    -webkit-animation-delay: 3599ms;
    animation-delay: 3599ms;
}
.circle-container:nth-child(31) {
    width: 7px;
    height: 7px;
    -webkit-animation-name: move-frames-31;
    animation-name: move-frames-31;
    -webkit-animation-duration: 29877ms;
    animation-duration: 29877ms;
    -webkit-animation-delay: 28729ms;
    animation-delay: 28729ms;
}
@-webkit-keyframes move-frames-31 {
    from {
        transform: translate3d(78vw, 10.6vh, 0);
    }
    to {
        transform: translate3d(42vw, -115vh, 0);
    }
}
@keyframes move-frames-31 {
    from {
        transform: translate3d(78vw, 10.6vh, 0);
    }
    to {
        transform: translate3d(42vw, -115vh, 0);
    }
}
.circle-container:nth-child(31) .circle {
    -webkit-animation-delay: 505ms;
    animation-delay: 505ms;
}
.circle-container:nth-child(32) {
    width: 1px;
    height: 1px;
    -webkit-animation-name: move-frames-32;
    animation-name: move-frames-32;
    -webkit-animation-duration: 31338ms;
    animation-duration: 31338ms;
    -webkit-animation-delay: 11703ms;
    animation-delay: 11703ms;
}
@-webkit-keyframes move-frames-32 {
    from {
        transform: translate3d(59vw, 11.0vh, 0);
    }
    to {
        transform: translate3d(2vw, -134vh, 0);
    }
}
@keyframes move-frames-32 {
    from {
        transform: translate3d(59vw, 11.0vh, 0);
    }
    to {
        transform: translate3d(2vw, -134vh, 0);
    }
}
.circle-container:nth-child(32) .circle {
    -webkit-animation-delay: 1948ms;
    animation-delay: 1948ms;
}
.circle-container:nth-child(33) {
    width: 8px;
    height: 8px;
    -webkit-animation-name: move-frames-33;
    animation-name: move-frames-33;
    -webkit-animation-duration: 33404ms;
    animation-duration: 33404ms;
    -webkit-animation-delay: 13928ms;
    animation-delay: 13928ms;
}
@-webkit-keyframes move-frames-33 {
    from {
        transform: translate3d(32vw, 10.8vh, 0);
    }
    to {
        transform: translate3d(59vw, -118vh, 0);
    }
}
@keyframes move-frames-33 {
    from {
        transform: translate3d(32vw, 10.8vh, 0);
    }
    to {
        transform: translate3d(59vw, -118vh, 0);
    }
}
.circle-container:nth-child(33) .circle {
    -webkit-animation-delay: 3469ms;
    animation-delay: 3469ms;
}
.circle-container:nth-child(34) {
    width: 1px;
    height: 1px;
    -webkit-animation-name: move-frames-34;
    animation-name: move-frames-34;
    -webkit-animation-duration: 32652ms;
    animation-duration: 32652ms;
    -webkit-animation-delay: 11798ms;
    animation-delay: 11798ms;
}
@-webkit-keyframes move-frames-34 {
    from {
        transform: translate3d(37vw, 10.7vh, 0);
    }
    to {
        transform: translate3d(62vw, -125vh, 0);
    }
}
@keyframes move-frames-34 {
    from {
        transform: translate3d(37vw, 10.7vh, 0);
    }
    to {
        transform: translate3d(62vw, -125vh, 0);
    }
}
.circle-container:nth-child(34) .circle {
    -webkit-animation-delay: 192ms;
    animation-delay: 192ms;
}
.circle-container:nth-child(35) {
    width: 6px;
    height: 6px;
    -webkit-animation-name: move-frames-35;
    animation-name: move-frames-35;
    -webkit-animation-duration: 33797ms;
    animation-duration: 33797ms;
    -webkit-animation-delay: 20256ms;
    animation-delay: 20256ms;
}
@-webkit-keyframes move-frames-35 {
    from {
        transform: translate3d(28vw, 10.4vh, 0);
    }
    to {
        transform: translate3d(87vw, -127vh, 0);
    }
}
@keyframes move-frames-35 {
    from {
        transform: translate3d(28vw, 10.4vh, 0);
    }
    to {
        transform: translate3d(87vw, -127vh, 0);
    }
}
.circle-container:nth-child(35) .circle {
    -webkit-animation-delay: 1777ms;
    animation-delay: 1777ms;
}
.circle-container:nth-child(36) {
    width: 6px;
    height: 6px;
    -webkit-animation-name: move-frames-36;
    animation-name: move-frames-36;
    -webkit-animation-duration: 31292ms;
    animation-duration: 31292ms;
    -webkit-animation-delay: 25880ms;
    animation-delay: 25880ms;
}
@-webkit-keyframes move-frames-36 {
    from {
        transform: translate3d(78vw, 10.2vh, 0);
    }
    to {
        transform: translate3d(29vw, -120vh, 0);
    }
}
@keyframes move-frames-36 {
    from {
        transform: translate3d(78vw, 10.2vh, 0);
    }
    to {
        transform: translate3d(29vw, -120vh, 0);
    }
}
.circle-container:nth-child(36) .circle {
    -webkit-animation-delay: 2117ms;
    animation-delay: 2117ms;
}
.circle-container:nth-child(37) {
    width: 1px;
    height: 1px;
    -webkit-animation-name: move-frames-37;
    animation-name: move-frames-37;
    -webkit-animation-duration: 34847ms;
    animation-duration: 34847ms;
    -webkit-animation-delay: 14034ms;
    animation-delay: 14034ms;
}
@-webkit-keyframes move-frames-37 {
    from {
        transform: translate3d(33vw, 10.5vh, 0);
    }
    to {
        transform: translate3d(61vw, -115vh, 0);
    }
}
@keyframes move-frames-37 {
    from {
        transform: translate3d(33vw, 10.5vh, 0);
    }
    to {
        transform: translate3d(61vw, -115vh, 0);
    }
}
.circle-container:nth-child(37) .circle {
    -webkit-animation-delay: 2625ms;
    animation-delay: 2625ms;
}
.circle-container:nth-child(38) {
    width: 4px;
    height: 4px;
    -webkit-animation-name: move-frames-38;
    animation-name: move-frames-38;
    -webkit-animation-duration: 35029ms;
    animation-duration: 35029ms;
    -webkit-animation-delay: 27978ms;
    animation-delay: 27978ms;
}
@-webkit-keyframes move-frames-38 {
    from {
        transform: translate3d(68vw, 10.4vh, 0);
    }
    to {
        transform: translate3d(38vw, -130vh, 0);
    }
}
@keyframes move-frames-38 {
    from {
        transform: translate3d(68vw, 10.4vh, 0);
    }
    to {
        transform: translate3d(38vw, -130vh, 0);
    }
}
.circle-container:nth-child(38) .circle {
    -webkit-animation-delay: 62ms;
    animation-delay: 62ms;
}
.circle-container:nth-child(39) {
    width: 6px;
    height: 6px;
    -webkit-animation-name: move-frames-39;
    animation-name: move-frames-39;
    -webkit-animation-duration: 34678ms;
    animation-duration: 34678ms;
    -webkit-animation-delay: 20017ms;
    animation-delay: 20017ms;
}
@-webkit-keyframes move-frames-39 {
    from {
        transform: translate3d(84vw, 10.9vh, 0);
    }
    to {
        transform: translate3d(35vw, -126vh, 0);
    }
}
@keyframes move-frames-39 {
    from {
        transform: translate3d(84vw, 10.9vh, 0);
    }
    to {
        transform: translate3d(35vw, -126vh, 0);
    }
}
.circle-container:nth-child(39) .circle {
    -webkit-animation-delay: 32ms;
    animation-delay: 32ms;
}
.circle-container:nth-child(40) {
    width: 2px;
    height: 2px;
    -webkit-animation-name: move-frames-40;
    animation-name: move-frames-40;
    -webkit-animation-duration: 30545ms;
    animation-duration: 30545ms;
    -webkit-animation-delay: 26329ms;
    animation-delay: 26329ms;
}
@-webkit-keyframes move-frames-40 {
    from {
        transform: translate3d(13vw, 10.4vh, 0);
    }
    to {
        transform: translate3d(59vw, -105vh, 0);
    }
}
@keyframes move-frames-40 {
    from {
        transform: translate3d(13vw, 10.4vh, 0);
    }
    to {
        transform: translate3d(59vw, -105vh, 0);
    }
}
.circle-container:nth-child(40) .circle {
    -webkit-animation-delay: 1960ms;
    animation-delay: 1960ms;
}
.circle-container:nth-child(41) {
    width: 7px;
    height: 7px;
    -webkit-animation-name: move-frames-41;
    animation-name: move-frames-41;
    -webkit-animation-duration: 28091ms;
    animation-duration: 28091ms;
    -webkit-animation-delay: 2620ms;
    animation-delay: 2620ms;
}
@-webkit-keyframes move-frames-41 {
    from {
        transform: translate3d(20vw, 11.0vh, 0);
    }
    to {
        transform: translate3d(66vw, -132vh, 0);
    }
}
@keyframes move-frames-41 {
    from {
        transform: translate3d(20vw, 11.0vh, 0);
    }
    to {
        transform: translate3d(66vw, -132vh, 0);
    }
}
.circle-container:nth-child(41) .circle {
    -webkit-animation-delay: 3595ms;
    animation-delay: 3595ms;
}
.circle-container:nth-child(42) {
    width: 1px;
    height: 1px;
    -webkit-animation-name: move-frames-42;
    animation-name: move-frames-42;
    -webkit-animation-duration: 28458ms;
    animation-duration: 28458ms;
    -webkit-animation-delay: 21572ms;
    animation-delay: 21572ms;
}
@-webkit-keyframes move-frames-42 {
    from {
        transform: translate3d(76vw, 10.7vh, 0);
    }
    to {
        transform: translate3d(16vw, -114vh, 0);
    }
}
@keyframes move-frames-42 {
    from {
        transform: translate3d(76vw, 10.7vh, 0);
    }
    to {
        transform: translate3d(16vw, -114vh, 0);
    }
}
.circle-container:nth-child(42) .circle {
    -webkit-animation-delay: 3628ms;
    animation-delay: 3628ms;
}
.circle-container:nth-child(43) {
    width: 8px;
    height: 8px;
    -webkit-animation-name: move-frames-43;
    animation-name: move-frames-43;
    -webkit-animation-duration: 32794ms;
    animation-duration: 32794ms;
    -webkit-animation-delay: 17400ms;
    animation-delay: 17400ms;
}
@-webkit-keyframes move-frames-43 {
    from {
        transform: translate3d(19vw, 10.4vh, 0);
    }
    to {
        transform: translate3d(75vw, -129vh, 0);
    }
}
@keyframes move-frames-43 {
    from {
        transform: translate3d(19vw, 10.4vh, 0);
    }
    to {
        transform: translate3d(75vw, -129vh, 0);
    }
}
.circle-container:nth-child(43) .circle {
    -webkit-animation-delay: 1178ms;
    animation-delay: 1178ms;
}
.circle-container:nth-child(44) {
    width: 4px;
    height: 4px;
    -webkit-animation-name: move-frames-44;
    animation-name: move-frames-44;
    -webkit-animation-duration: 30772ms;
    animation-duration: 30772ms;
    -webkit-animation-delay: 9945ms;
    animation-delay: 9945ms;
}
@-webkit-keyframes move-frames-44 {
    from {
        transform: translate3d(92vw, 10.4vh, 0);
    }
    to {
        transform: translate3d(66vw, -128vh, 0);
    }
}
@keyframes move-frames-44 {
    from {
        transform: translate3d(92vw, 10.4vh, 0);
    }
    to {
        transform: translate3d(66vw, -128vh, 0);
    }
}
.circle-container:nth-child(44) .circle {
    -webkit-animation-delay: 2682ms;
    animation-delay: 2682ms;
}
.circle-container:nth-child(45) {
    width: 6px;
    height: 6px;
    -webkit-animation-name: move-frames-45;
    animation-name: move-frames-45;
    -webkit-animation-duration: 33356ms;
    animation-duration: 33356ms;
    -webkit-animation-delay: 30416ms;
    animation-delay: 30416ms;
}
@-webkit-keyframes move-frames-45 {
    from {
        transform: translate3d(83vw, 10.2vh, 0);
    }
    to {
        transform: translate3d(96vw, -105vh, 0);
    }
}
@keyframes move-frames-45 {
    from {
        transform: translate3d(83vw, 10.2vh, 0);
    }
    to {
        transform: translate3d(96vw, -105vh, 0);
    }
}
.circle-container:nth-child(45) .circle {
    -webkit-animation-delay: 629ms;
    animation-delay: 629ms;
}
.circle-container:nth-child(46) {
    width: 5px;
    height: 5px;
    -webkit-animation-name: move-frames-46;
    animation-name: move-frames-46;
    -webkit-animation-duration: 34092ms;
    animation-duration: 34092ms;
    -webkit-animation-delay: 33089ms;
    animation-delay: 33089ms;
}
@-webkit-keyframes move-frames-46 {
    from {
        transform: translate3d(40vw, 10.8vh, 0);
    }
    to {
        transform: translate3d(4vw, -111vh, 0);
    }
}
@keyframes move-frames-46 {
    from {
        transform: translate3d(40vw, 10.8vh, 0);
    }
    to {
        transform: translate3d(4vw, -111vh, 0);
    }
}
.circle-container:nth-child(46) .circle {
    -webkit-animation-delay: 3694ms;
    animation-delay: 3694ms;
}
.circle-container:nth-child(47) {
    width: 8px;
    height: 8px;
    -webkit-animation-name: move-frames-47;
    animation-name: move-frames-47;
    -webkit-animation-duration: 29494ms;
    animation-duration: 29494ms;
    -webkit-animation-delay: 387ms;
    animation-delay: 387ms;
}
@-webkit-keyframes move-frames-47 {
    from {
        transform: translate3d(43vw, 10.3vh, 0);
    }
    to {
        transform: translate3d(37vw, -121vh, 0);
    }
}
@keyframes move-frames-47 {
    from {
        transform: translate3d(43vw, 10.3vh, 0);
    }
    to {
        transform: translate3d(37vw, -121vh, 0);
    }
}
.circle-container:nth-child(47) .circle {
    -webkit-animation-delay: 3215ms;
    animation-delay: 3215ms;
}
.circle-container:nth-child(48) {
    width: 4px;
    height: 4px;
    -webkit-animation-name: move-frames-48;
    animation-name: move-frames-48;
    -webkit-animation-duration: 29960ms;
    animation-duration: 29960ms;
    -webkit-animation-delay: 20227ms;
    animation-delay: 20227ms;
}
@-webkit-keyframes move-frames-48 {
    from {
        transform: translate3d(77vw, 10.5vh, 0);
    }
    to {
        transform: translate3d(16vw, -134vh, 0);
    }
}
@keyframes move-frames-48 {
    from {
        transform: translate3d(77vw, 10.5vh, 0);
    }
    to {
        transform: translate3d(16vw, -134vh, 0);
    }
}
.circle-container:nth-child(48) .circle {
    -webkit-animation-delay: 351ms;
    animation-delay: 351ms;
}
.circle-container:nth-child(49) {
    width: 4px;
    height: 4px;
    -webkit-animation-name: move-frames-49;
    animation-name: move-frames-49;
    -webkit-animation-duration: 36600ms;
    animation-duration: 36600ms;
    -webkit-animation-delay: 14283ms;
    animation-delay: 14283ms;
}
@-webkit-keyframes move-frames-49 {
    from {
        transform: translate3d(76vw, 10.3vh, 0);
    }
    to {
        transform: translate3d(42vw, -109vh, 0);
    }
}
@keyframes move-frames-49 {
    from {
        transform: translate3d(76vw, 10.3vh, 0);
    }
    to {
        transform: translate3d(42vw, -109vh, 0);
    }
}
.circle-container:nth-child(49) .circle {
    -webkit-animation-delay: 3398ms;
    animation-delay: 3398ms;
}
.circle-container:nth-child(50) {
    width: 5px;
    height: 5px;
    -webkit-animation-name: move-frames-50;
    animation-name: move-frames-50;
    -webkit-animation-duration: 36777ms;
    animation-duration: 36777ms;
    -webkit-animation-delay: 18176ms;
    animation-delay: 18176ms;
}
@-webkit-keyframes move-frames-50 {
    from {
        transform: translate3d(13vw, 10.3vh, 0);
    }
    to {
        transform: translate3d(84vw, -112vh, 0);
    }
}
@keyframes move-frames-50 {
    from {
        transform: translate3d(13vw, 10.3vh, 0);
    }
    to {
        transform: translate3d(84vw, -112vh, 0);
    }
}
.circle-container:nth-child(50) .circle {
    -webkit-animation-delay: 3310ms;
    animation-delay: 3310ms;
}

#contenedorCanvas {
    position: absolute;
    width: 20%;
    height: 100% !important;
    height: auto;
    top: 0;
    left: 40%;
    background-color: white;
    z-index: 9;
}
#contenedorCanvas canvas {
    height: 99% !important;
}
#streaming {
    margin-left: 25px;
}
#btnCapturar {
    margin-left: 20px !important;
    width: 210px;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    height: 22px;
    padding: 0 8px;
    margin-top: 20px;
    border: 0;
    outline: 0;
    line-height: 22px;
    border-radius: 4px;
}
#toggle-close-options {
    height: 120px;
    line-height: 120px;
}
#tmblogo {
    font-size: 14px;
    position: absolute;
    top: 100px;
    right: 125px;
    z-index: 1;
}
#tmblogo img {
    width: 120px;
}
.ss-slide {
    padding-bottom: 1500px;
}
#wrapper #banner_top {
    background-color: rgba(0,0,0,0.3);
}
@media (max-width: 1920px) {
    .ss-slide img {
        min-width: unset;
        width: 70%;
        margin-top: 120px;
    }
    .ss-slide.supervertical img {
        width: 25%;
        margin-top: 0px;
    }
    .ss-slide.vertical img {
        width: 30%;
        margin-top: 50px;
    }
    #wrapper:not(.vertical) #banner_top div {
        font-size: 4vh;
        line-height: 6vh;
    }
    #sidebar-wrapper #user-info {
        height: 310px;
    }
}
@media (max-width: 1280px) {
    #sidebar-wrapper #brand-info #brand_image_container {
        /* height: 100%; */
    }
    #sidebar-wrapper #brand-info #brand_image_container img {
        max-height: 90px;
    }
}

/*Wrapper vertical*/
#wrapper .container-fluid {
    position: absolute;
    width: 100%;
}
#wrapper.vertical #banner_top.vertical {
    background-color: rgba(0,0,0,0.3);
}
#wrapper.vertical #banner_top.vertical div {
    color: white;
}
#wrapper.vertical #kenburns-slideshow {
    width: 100% !important;
}

#wrapper.vertical .ss-slide {
    width: 100% !important;
}
#wrapper.vertical .ss-slide img {
    overflow: auto;
    min-width: unset;
    width: 100% !important;
    height: auto !important;
    filter: brightness(0.8);
    -webkit-filter: brightness(0.8);
    -moz-filter: brightness(0.8);
    -o-filter: brightness(0.8);
    -ms-filter: brightness(0.8);

    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
}
#wrapper.vertical .ss-slide.supervertical {
    padding-bottom: 1000px;
}
#wrapper.vertical .ss-slide:not(.supervertical) {
    padding-top: 20%;
    width: 100% !important;
    height: auto !important;
    padding-bottom: 2000px;
}
#wrapper.vertical .ss-slide:not(.vertical) img {
    overflow: auto;
    width: 90% !important;
    height: auto !important;
    margin-top: 225px;
    background-color: black;
}
#wrapper.vertical .ss-slide.vertical img {
    overflow: auto;
    width: 80% !important;
    height: auto !important;
    margin-top: 50px;
    background-color: black;
}
#wrapper.vertical {
    padding-left: 0;
}
#wrapper.vertical #sidebar-wrapper {
    width: 100%;
    bottom: 0;
    height: 241px;
}
#wrapper.vertical #sidebar-wrapper #user-info {
    position: absolute;
    width: 45%;
    left: 25%;
    height: 365px !important;
    padding-top: 20px;
}
#wrapper.vertical #sidebar-wrapper #brand-info {
    position: absolute;
    top: 0px;
    width: 25%;
    height: 100%;
    
}
#wrapper.vertical #sidebar-wrapper #qr-info {
    position: absolute;
    top: 0px;
    right: 35px;
    width: 25%;
    height: 100% !important;
    min-height: 0;
}

#wrapper.vertical #qr-info img#qr-image {
    /* width: 70%; */
    padding: 18%;
    object-fit: contain;
}

#wrapper.vertical #sidebar-wrapper #qr-info .bg-mobile div {
    position: absolute;
    width: 100%;
    bottom: 141px;
}

#wrapper.vertical #qr-info div.qr-title {
    margin-bottom: 0;
}

#wrapper.vertical #section-toggle-sidebar {
    position: absolute;
    top: auto;
    bottom: 459px;
    width: 100%;
    height: 120px;
    z-index: 1000;
}
#wrapper.vertical #toggle-options {
    /* padding-top: 28px; */
    display: flex;
    justify-content: center;
    align-items: center;
}
#wrapper.vertical #section-toggle-sidebar #toggle-sidebar {
    display: none !important;
}
#wrapper.vertical #video-options.toggled {
    display: block;
}
#wrapper.vertical #wrapper div#banner_top .pesame-text {
    color: #fff;
    font-size: 2vh;
    line-height: 3vh;
    padding: 30px 100px;
    font-family: 'Droid Serif', serif;
}
#wrapper.vertical #wrapper div#banner_top {
    display: none;
    bottom: 350px;
    padding: 10px
}

#event-info {
    min-height: 240px;
    margin-top: -20px;
    padding-bottom: 20px;
    z-index: -1;
}
#event-info i {
    font-size: 30px;
}
#event-info .event {
    padding: 0 15px;
}
#event-info .event_title {
    font-size: 24px;
    font-family: 'Droid Serif', serif;
}
#event-info p {
    font-size: 18px;
    font-weight: 200;
}
@media (max-width: 2000px) {
    #event-info {
        min-height: 220px;
        margin-top: -30px;
    }
    #event-info i {
        font-size: 18px;
    }
    #event-info .event_title {
        font-size: 18px;
        font-family: 'Droid Serif', serif;
        margin-top: 0px;
    }
    #event-info p {
        font-size: 12px;
    }
    #sidebar-wrapper #qr-info div.qr-title {
        font-size: 12px;
    }

}

/*CSS pagina en vertical*/
#wrapper.vertical #event-info {
    position: fixed;
    margin-top: -30.4%;
    width: 100%;
    min-height: unset;
    height: 330px;
    z-index: -1;
    text-align: left;
}
#wrapper.vertical #event-info .event {
    width: 50%;
    margin: 0 auto;
    margin-top: 30px;
}
#wrapper.vertical #event-info .event_title {
    margin-top: -50px;
}
#wrapper.vertical #event-info .event p {
    font-size: 18px;
    margin: 0;
    width: 100%;
}
#wrapper.vertical #event-info .event p.fecha {
    margin-top: 20px;
    text-align: justify;
}
#wrapper.vertical #event-info .event p.fecha_fin {
    text-align: justify;
}
#wrapper.vertical #event-info .event i.logoevent {
    position: relative;
    top: 30px;
    left: -90px;
    font-size: 60px;
}
#wrapper.vertical #event-info .event p i {
    font-size: 18px;
    margin-left: 10px;
    margin-right: 10px;
}
#wrapper.vertical #event-info .event p.fecha_fin i {
    margin-left: 27px;
}
#wrapper.vertical #wrapper div#banner_top {
    display: none;
    bottom: 695px;
    padding: 10px
}
#wrapper.vertical #sidebar-wrapper #qr-info div.qr-title {
    font-size: 12px;
}
#wrapper.vertical #event-info .event.portrait {
    float: left;
    margin-left: 17%;
}

#wrapper.vertical .portrait .ss-slide img {
    width: 100% !important;
    margin-top: 250px;
}
#wrapper.vertical #tmblogo {
    position: absolute;
    top: 100px;
    left: 60px;
    right: unset;
    z-index: 1;
}
#wrapper.vertical #tmblogo img {
    width: 150px;
}
#wrapper.vertical #event-info, #qr-info {
    display: block;
}
#wrapper.vertical .ss-slide:not(.withimage) {
    padding-top: unset;
}
#wrapper.vertical .ss-slide div p {
    font-size: 50px;
    line-height: 80px;
}
#wrapper.vertical #sidebar-wrapper #brand-info #brand_image_container {
    /* top: 100px !important; */
}
/*#wrapper.vertical div#banner_top:not(.vertical) {
    background-color: unset;
}*/
#wrapper.vertical .ss-slide.supervertical.withimage img {
    width: 50% !important;
    margin-top: 150px;
}

/* ESTILOS PANTALLAS HD - 720 CON ESTILOS EN VERTICAL*/
@media (max-width: 1919px) {
    #wrapper.vertical #event-info {
        margin-top: -330px;
    }
    #wrapper.vertical #event-info .event.portrait {
        margin-left: 15%;
    }
    #wrapper.vertical #toggle-mute {
        margin-left: 12%;
    }
    #wrapper.vertical #sidebar-wrapper #qr-info .bg-mobile {
        height: var(--size_qr_height_hdVertical) !important;
     }
    #wrapper.vertical div#banner_top .pesame-text {
        color: #fff;
        font-size: 3vh;
        line-height: 6vh;
    }
}

/* QUITAR MARGEN VERDE DE LA FOTO */
#wrapper:not(.vertical) #brand-info {
    border-right: 0px !important;
}

/* ESTILOS PANTALLAS FULL HD HASTA 2K CON ESTILOS EN VERTICAL  */
@media (min-width: 1920px) and (max-width: 2559px) {

    #wrapper.vertical #event-info .event p.fecha {
        margin-top: 7px;
        text-align: justify;
    }

    #wrapper.vertical #event-info .event.portrait {
        margin-left: 10% !important;
    }

    #wrapper.vertical #sidebar-wrapper #qr-info {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }

    #wrapper.vertical #sidebar-wrapper #qr-info .bg-mobile {
        height: var(--size_qr_height_fullHDVertical);
        margin-top: 20px !important;
    }

    #wrapper.vertical #sidebar-wrapper #qr-info div.qr-title{
        margin: 8px 0 20px !important;
        padding: 0 !important;
        line-height: 1 !important;
        font-size: var(--font_size_qr_fullHDVertical) !important;
        /* color: var(--color_qr_fullHDVertical) !important; */
        font-family: var(--font_family_qr_fullHDVertical) !important;
    }

    #wrapper.vertical #sidebar-wrapper #user-info .user-name{
        font-family: var(--font_family_datos_fullHDVertical) !important;
        font-size: var(--font_size_datos_fullHDVertical) !important;
        /* color: var(--color_datos_fullHDVertical) !important; */
        padding: 0 10px 0 10px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    #wrapper.vertical #sidebar-wrapper #user-info .user-date {
        font-size: 28px;
        margin-top: 7px;
        font-family: var(--font_family_datos_fullHDVertical) !important;
        /* color: var(--color_datos_fullHDVertical) !important; */
    }

    #wrapper.vertical #qr-info img#qr-image {
        width: var(--size_qr_width_fullHDVertical) !important;
        padding: 18% !important;
        object-fit: contain !important;
        object-position: center !important;
    }

    #wrapper.vertical #section-toggle-sidebar {
        bottom: 499px !important;
    }

    #wrapper.vertical #event-info {
        margin-top: -258px;
        height: 259px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #wrapper.vertical #event-info .event {
        margin-top: 20px;
    }
    #wrapper.vertical #event-info .event_title {
        font-size: 25px;
        /* color: var(--color_evento_fullHDVertical) !important; */
        font-family: var(--font_family_evento_fullHDVertical) !important;
    }
    #wrapper.vertical #event-info .event p {
        font-size: 16px;
        line-height: 1.2 !important;
        letter-spacing: 1px;
        font-family: var(--font_family_evento_fullHDVertical) !important;
        font-size: var(--font_size_evento_fullHDVertical) !important;
        /* color: var(--color_evento_fullHDVertical) !important; */
    }
    #wrapper.vertical #event-info .event p i {
        font-size: 16px;
        /* color: var(--color_evento_fullHDVertical) !important; */
    }
    #wrapper.vertical #event-info .event p.fecha_fin i {
        margin-left: 26px;
    }
    #wrapper.vertical #event-info .event i.logoevent {
        font-size: 50px;
        left: -80px;
        /* color: var(--color_evento_fullHDVertical) !important; */
    }
    #wrapper.vertical #event-info .event.portrait {
        margin: unset;
        margin-left: 15%;
        margin-top: 20px;
    }
    #wrapper.vertical div#banner_top .pesame-text {
        font-size: 2.25vh;
        line-height: 4vh;
        font-family: var(--font_family_texto_fullHDVertical) !important;
        font-size: var(--font_size_texto_fullHDVertical) !important;
        color: var(--color_texto_fullHDVertical) !important;
    }

    #wrapper.vertical div#banner_top .pesame-name {
        font-family: var(--font_family_texto_fullHDVertical) !important;
        color: var(--color_texto_fullHDVertical) !important;
    }

    #wrapper.vertical #sidebar-wrapper #brand-info #brand_image_container {
        left: unset !important;
    }
    #wrapper.vertical .ss-slide div p {
        font-size: 36px;
        line-height: 66px;
    }

    #wrapper.vertical #banner_top {
        bottom: 499px;
    }

}

/* ESTILOS PANTALLAS HD - 720 CON ESTILOS EN VERTICAL  */
@media (max-width: 1919px)  {

    #wrapper.vertical #qr-info img#qr-image{
        max-width: var(--size_qr_width_fullHDVertical) !important;
	min-width: 75%;
        /* padding: 22% !important; */
        object-fit: contain;
        object-position: center;
    }

    #wrapper.vertical #event-info {
        margin-top: -218px;
        height: 218px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #wrapper.vertical #event-info .event {
        margin-top: 20px;
    }
    #wrapper.vertical #event-info .event_title {
        font-size: 22px;
        font-family: var(--font_family_evento_hdVertical) !important;
        /* color: var(--color_evento_hdVertical) !important; */
    }
    #wrapper.vertical #event-info .event p {
        font-size: 12px;
        font-family: var(--font_family_evento_hdVertical) !important;
        font-size: var(--font_size_evento_hdVertical) !important;
        /* color: var(--color_evento_hdVertical) !important; */
    }

    #wrapper.vertical #event-info .event .logoevent {
        font-size: 35px !important;
        /* color: var(--color_evento_hdVertical) !important; */
    }

    #wrapper.vertical #event-info .event p i {
        font-size: 12px;
        /* color: var(--color_evento_hdVertical) !important; */
    }
    #wrapper.vertical #event-info .event p.fecha_fin i {
        margin-left: 26px;
    }
    #wrapper.vertical #event-info .event i.logoevent {
        font-size: 50px;
        left: -80px;
    }
    #wrapper.vertical #event-info .event.portrait {
        margin: unset;
        margin-left: 15%;
        margin-top: 39px;
    }
    #wrapper.vertical div#banner_top .pesame-text {
        font-size: 2.25vh;
        line-height: 4vh;
        font-family: var(--font_family_texto_hdVertical) !important;
        font-size: var(--font_size_texto_hdVertical) !important;
        /* color: var(--color_texto_hdVertical) !important; */
    }

    #wrapper.vertical div#banner_top .pesame-name {
        font-family: var(--font_family_texto_hdVertical) !important;
        /* color: var(--color_texto_hdVertical) !important; */
    }

    #wrapper.vertical #sidebar-wrapper #qr-info div.qr-title{
        font-family: var(--font_family_qr_hdVertical) !important;
        font-size: var(--font_size_qr_hdVertical) !important;
        /* color: var(--color_qr_hdVertical) !important; */
        padding: 0 !important;
    }

    #wrapper.vertical #sidebar-wrapper #user-info .user-name{
        font-family: var(--font_family_datos_hdVertical) !important;
        font-size: var(--font_size_datos_hdVertical) !important;
        /* color: var(--color_datos_hdVertical) !important; */
        margin: 0 10px 0 10px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    #wrapper.vertical #sidebar-wrapper #user-info .user-date{
        font-family: var(--font_family_datos_hdVertical) !important;
        /* color: var(--color_datos_hdVertical) !important; */
    }

    #wrapper.vertical #sidebar-wrapper #brand-info #brand_image_container {
        left: unset !important;
    }
    #wrapper.vertical .ss-slide div p {
        font-size: 36px;
        line-height: 66px;
    }

    #wrapper.vertical #moreoptions {
        display: none;
        position: absolute;
        margin-left: 9px;
        width: 270px;
    }

    #wrapper.vertical #banner_top {
        bottom: 460px;
    }

    #wrapper.vertical #video-options, #toggle-options, #toggle-close-options{
        height: 142px !important;
    }

    #wrapper.vertical .fa-angle-left:before{
        position: relative;
        top: 10px;
    }

    #wrapper.vertical #section-toggle-sidebar {
        bottom: 480px;
    }
}

/* ESTILOS PANTALLAS 2K CON ESTILOS EN VERTICAL  */
@media (min-width: 2560px) {

    #wrapper.vertical #event-info .event p.fecha {
        margin-top: 7px;
        text-align: justify;
    }

    #wrapper.vertical #event-info .event.portrait {
        margin-left: 10% !important;
    }

    #wrapper.vertical #sidebar-wrapper #qr-info {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }

    #wrapper.vertical #sidebar-wrapper #qr-info .bg-mobile {
        width: 50% !important;
        margin-top: 20px !important;
    }

    #wrapper.vertical #sidebar-wrapper #qr-info div.qr-title{
        margin: 8px 0 20px !important;
        padding: 0 !important;
        line-height: 1 !important;
        font-family: var(--font_family_qr_2kVertical);
        font-size: var(--font_size_qr_2kVertical) !important;
        color: var(--color_qr_2kVertical);
    }

    #wrapper.vertical #qr-info img#qr-image {
        width: var(--size_qr_width_2kVertical) !important;  
        object-fit: cover !important;
        object-position: center !important;
        padding: 18% !important;
    }

    #wrapper.vertical #section-toggle-sidebar {
        bottom: 615px !important;
    }

    #wrapper.vertical #event-info {
        margin-top: -374px;
        height: 376px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #wrapper.vertical #event-info .event {
        margin-top: 20px;
    }
    #wrapper.vertical #event-info .event_title {
        font-family: var(--font_family_evento_2kVertical);
        font-size: var(--font_size_evento_2kVertical);
        /* color: var(--color_evento_2kVertical); */
    }
    #wrapper.vertical #event-info .event p {
        line-height: 1.2 !important;
        letter-spacing: 1px;
        font-family: var(--font_family_evento_2kVertical);
        font-size: var(--font_size_evento_2kVertical);
        /* color: var(--color_evento_2kVertical); */
    }
    #wrapper.vertical #event-info .event p i {
        font-size: 16px;
        /* color: var(--color_evento_2kVertical); */
    }
    #wrapper.vertical #event-info .event p.fecha_fin i {
        margin-left: 26px;
        /* color: var(--color_evento_2kVertical) !important; */
    }
    #wrapper.vertical #event-info .event i.logoevent {
        font-size: 50px;
        left: -80px;
        /* color: var(--color_evento_2kVertical) !important; */
    }
    #wrapper.vertical #event-info .event.portrait {
        margin: unset;
        margin-left: 15%;
        margin-top: 20px;
    }
    #wrapper.vertical div#banner_top .pesame-text {
        line-height: 5vh;
        font-family: var(--font_family_texto_2kVertical);
        font-size: var(--font_size_texto_2kVertical);
        color: var(--color_texto_2kVertical);
    }

    #wrapper.vertical div#banner_top .pesame-name{
        font-family: var(--font_family_texto_2kVertical);
        font-size: 4vh;
        color: var(--color_texto_2kVertical);
    }
    #wrapper.vertical #sidebar-wrapper #brand-info #brand_image_container {
        left: unset !important;
    }
    #wrapper.vertical .ss-slide div p {
        font-size: 36px;
        line-height: 66px;
    }

    #wrapper.vertical #banner_top {
        bottom: 616px;
    }

    #wrapper.vertical #sidebar-wrapper #user-info .user-name{
        font-family: var(--font_family_datos_2kVertical);
        font-size: var(--font_size_datos_2kVertical);
        /* color: var(--color_datos_2kVertical); */
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    #wrapper.vertical #sidebar-wrapper #user-info .user-date {
        font-size: 28px;
        margin-top: 7px;
        font-family: var(--font_family_datos_2kVertical);
        /* color: var(--color_datos_2kVertical); */
    }

}
/* VERSION MOVIL */
@media (max-width: 1024px) {
    #wrapper.vertical #event-info {
        display: none;
    }
    #wrapper.vertical #tmblogo {
        font-size: 10px;
        left: 40px;
        top: 50px;
    }
    #wrapper.vertical #wrapper div#banner_top {
        bottom: 350px;
    }
    #wrapper.vertical #tmblogo img {
        width: 100px;
    }
    #wrapper.vertical #sidebar-wrapper #qr-info {
        right: 20px;
    }
    #wrapper.vertical #sidebar-wrapper #qr-info div.qr-title {
        font-size: 13px;
    }

    #wrapper.vertical #video-options.toggled {
        width: 100%;
    }
    #wrapper.vertical #toggle-text span {
        font-size: 10px;
    }
    #wrapper.vertical #video-options .music-label {
        font-size: 10px;
    }
    #wrapper.vertical #toggle-text i {
        font-size: 18px;
        margin-left: 18px;
    }
    #wrapper.vertical #video-options .music-label {
        display: none;
    }
    #wrapper.vertical #video-options i.fa-youtube {
        display: none;
    }
    #wrapper.vertical #video-options #audio-select {
        width: 80px;
        margin-left: 0px;
    }
    #wrapper.vertical #moreoptions {
        margin-left: 0px;
    }
    #wrapper.vertical #btnCapturar {
        margin-left: 0px !important;
        overflow: hidden;
    }
    #wrapper.vertical #toggle-mute {
        font-size: 18px;
    }
    #wrapper.vertical #volume-slider {
        width: 65px;
    }
    #wrapper.vertical .ss-slide div p {
        font-size: 26px;
        line-height: 36px;
    }
    #wrapper.vertical .ss-slide.supervertical.withimage img {
        width: 80% !important;
        margin-top: 30px;
    }
    #wrapper.vertical .ss-slide:not(.vertical) img {
        width: 80% !important;
        margin-top: 300px;
    }
    #wrapper.vertical #sidebar-wrapper {
        height: 325px;
    }
    #wrapper.vertical #banner_top {
        bottom: 325px;
    }
    #wrapper.vertical #banner_top div {
        font-size: 14px;
        line-height: 24px;
    }
    #wrapper.vertical #section-toggle-sidebar {
        bottom: 325px;
    }
}

/*Versión en blanco*/
.white .ss-slide, .white .nofx > div, .white #kenburns-slideshow {
    background-color: white;
}
.white #toggle-screen, .white #toggle-close, .white #toggle-fx,
.white .container-fluid i, .white #tmblogo, .white .nofx > div h5,  .white .nofx > div p{
    color: black;
}

#wrapper.vertical #video-options.toggled {
    width: 100%;
}
@media (min-width: 1000px) {
    #video-options.toggled {
        width: 910px;
    }
}
#moreoptions {
    display: none;
    position: absolute;
    margin-left: 9px;
    width: 400px;
}
#btnCapturar {
    float: left;
}
#moreoptions i {
    float: left;
    margin-top: 15px;
    font-size: 30px;
}
#darkmode {
    margin-top: 10px;
    width: 200px;
}
#rotation {
    margin-top: 20px;
    width: 200px;
    margin-right: 3.3%;
}
#modes {
    float: right;
    margin-right: 20px;
}
#darkmode > div, #rotation > div {
    border: unset;
}
#darkmode .bootstrap-switch-label, #rotation .bootstrap-switch-label {
    background-color: lightgray;
}
#darkmode .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
    background-color: #fff;
    color: #000;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
    color: #fff;
}

#wrapper:not(.white) .image-container.diapo {
    background-color: black;
}
.image-container.diapo {
    position: fixed;
    z-index: 9999 !important;
    margin: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
}
#wrapper.vertical .image-container.diapo {
    height: 100vw;
}
.image-container.diapo {
    background: #000;
}
.image-container.diapo img {
    width: 100%;
    height: 100%;
    display: flex;
    object-fit: cover;
}
#wrapper.vertical .image-container.diapo img {
    width: 55vh;
    margin-top: -20vw;
}

#wrapper:not(.white) .container-fluid {
    background-color: black;
}

.stream-container .stream {
    -webkit-transform: scale(1.8);
    -moz-transform: scale(1.8);
    -o-transform: scale(1.8);
    transform: scale(1.8);
    padding-top: 22.2vh;
    padding-left: 19vw;
    border: none;
}

/*CSS página vertical*/
@media (orientation: portrait) {
    .ss-slide {
        width: 100% !important;
        margin-top: -20px;
        margin-left: -20px;
    }
    .ss-slide img {
        overflow: auto;
        width: 100% !important;
        height: auto !important;
        filter: brightness(0.8);
        -webkit-filter: brightness(0.8);
        -moz-filter: brightness(0.8);
        -o-filter: brightness(0.8);
        -ms-filter: brightness(0.8);

        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -o-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
    }
    .ss-slide.vertical {
        padding-bottom: 1000px;
    }
    .ss-slide:not(.vertical) {
        padding-top: 20%;
        width: 100% !important;
        height: auto !important;
        padding-bottom: 2000px;
    }
    .ss-slide:not(.vertical) img {
        overflow: auto;
        width: 100% !important;
        height: auto !important;
        background-color: black;
    }
    #wrapper {
        padding-left: 0;
    }
    #sidebar-wrapper {
        width: 100%;
        bottom: 0;
        height: 365px;
    }
    #sidebar-wrapper #user-info {
        position: absolute;
        width: 45%;
        left: 25%;
        height: 365px;
        padding-top: 70px;
    }
    #sidebar-wrapper #brand-info {
        position: absolute;
        top: 0px;
        width: 25%;
        height: 365px;
    }
    #sidebar-wrapper #qr-info {
        position: absolute;
        top: 0px;
        right: 35px;
        width: 25%;
        height: 365px !important;
    }

    #sidebar-wrapper #qr-info .bg-mobile div {
        position: absolute;
        width: 100%;
        bottom: 50px;
    }

    #section-toggle-sidebar {
        position: absolute;
        top: auto;
        bottom: 434px;
        width: 100%;
        height: 50px;
        z-index: 1000;
    }
    #toggle-options {
        padding-top: 30px;
    }
    #section-toggle-sidebar #toggle-sidebar {
        display: none !important;
    }
    #video-options.toggled {
        display: block;
    }
    #wrapper div#banner_top .pesame-text {
        color: #fff;
        font-size: 2vh;
        line-height: 3vh;
        padding: 30px 100px;
        font-family: 'Droid Serif', serif;
    }
    #wrapper div#banner_top {
        display: none;
        bottom: 350px;
        padding: 10px
    }
}

#event-info {
    min-height: 240px;
    margin-top: -20px;
    padding-bottom: 20px;
    z-index: -1;
}
#event-info i {
    font-size: 30px;
}
#event-info .event {
    padding: 0 15px;
}
#event-info .event_title {
    font-size: 24px;
    font-family: 'Droid Serif', serif;
}
#event-info p {
    font-size: 18px;
    font-weight: 200;
}
@media (max-width: 2000px) {
    #event-info {
        min-height: 220px;
        margin-top: -30px;
    }
    #event-info i {
        font-size: 18px;
    }
    #event-info .event_title {
        font-size: 18px;
        font-family: 'Droid Serif', serif;
        margin-top: 0px;
    }
    #event-info p {
        font-size: 16px;
    }
    #sidebar-wrapper #qr-info div.qr-title {
        font-size: 1.5vh;
    }


}
@media (max-width: 1000px) {
    #sidebar-wrapper #qr-info .bg-mobile {
        margin-top: 0px !important;
    }
}

@media (orientation: portrait) {
    #event-info {
        position: fixed;
        margin-top: -330px;
        width: 100%;
        min-height: unset;
        height: 330px;
        z-index: -1;
        text-align: left;
    }
    #event-info .event {
        width: 25%;
        margin: 0 auto;
        margin-top: 30px;
    }
    #event-info .event_title {
        margin-top: -50px;
    }
    #event-info .event p {
        font-size: 18px;
        margin: 0;
        width: 100%;
    }
    #event-info .event p.fecha {
        margin-top: 20px;
        text-align: justify;
    }
    #event-info .event p.fecha_fin {
        text-align: justify;
    }
    #event-info .event i.logoevent {
        position: relative;
        top: 30px;
        left: -90px;
        font-size: 60px;
    }
    #event-info .event p i {
        font-size: 18px;
        margin-left: 10px;
        margin-right: 10px;
    }
    #event-info .event p.fecha_fin i {
        margin-left: 27px;
    }
    #wrapper div#banner_top {
        display: none;
        bottom: 695px;
        padding: 10px
    }
    #sidebar-wrapper #qr-info div.qr-title {
        font-size: 18px;
    }
    #event-info .event.portrait {
        float: left;
        margin-left: 17%;
    }

    .portrait .ss-slide img {
        width: 100% !important;
        margin-top: 250px;
    }
    #tmblogo {
        position: absolute;
        top: 100px;
        left: 60px;
        right: unset;
        z-index: 1;
    }
    #tmblogo img {
        width: 150px;
    }
    #event-info, #qr-info {
        display: block;
    }
    #toggle-options {
        height: 119px !important;
    }
    .ss-slide:not(.withimage) {
        padding-top: unset;
    }
    .ss-slide div p {
        font-size: 50px;
        line-height: 80px;
    }
    #sidebar-wrapper #brand-info #brand_image_container {
        top: unset !important;
    }
    .ss-slide.vertical.withimage img {
        width: 50% !important;
        margin-top: 100px;
    }
    @media (max-width: 1200px) {
        #event-info {
            margin-top: -300px;
            height: 300px;
        }
        #event-info .event {
            margin-top: 20px;
        }
        #event-info .event_title {
            font-size: 22px;
        }
        #event-info .event p {
            font-size: 16px;
        }
        #event-info .event p i {
            font-size: 16px;
        }
        #event-info .event p.fecha_fin i {
            margin-left: 26px;
        }
        #event-info .event i.logoevent {
            font-size: 50px;
            left: -80px;
        }
        #wrapper div#banner_top {
            display: none;
            bottom: 665px;
            padding: 10px;
        }
        #sidebar-wrapper #brand-info #brand_image_container {
            /* top: 125px !important; */
        }
        .ss-slide div p {
            font-size: 36px;
            line-height: 66px;
        }
    }
    @media (max-width: 1079px) {
        #event-info {
            display: none;
        }
        #tmblogo {
            font-size: 10px;
            left: 40px;
            top: 50px;
        }
        #wrapper div#banner_top {
            bottom: 350px;
        }
        #tmblogo img {
            width: 100px;
        }
        #sidebar-wrapper #qr-info {
            right: 20px;
        }
        #sidebar-wrapper #qr-info div.qr-title {
            font-size: 14px;
        }
        #video-options.toggled {
            width: 725px;
        }
        #toggle-text span {
            font-size: 10px;
        }
        #video-options .music-label {
            font-size: 10px;
        }
        #toggle-text i {
            font-size: 18px;
            margin-left: 18px;
        }
        #video-options .music-label {
            margin-left: 40px;
        }
        #video-options #audio-select {
            width: 120px;
        }
        #btnCapturar {
            margin-left: 9px !important;
            width: 120px;
        }
        #toggle-mute {
            font-size: 18px;
        }
        #volume-slider {
            width: 130px;
        }
        .ss-slide div p {
            font-size: 26px;
            line-height: 36px;
        }
    }
}