:root {
  --oScriptsColor1: #804A8A;
  --oScriptsColor2: #141414;
}


#oLoading, #oLoading *,
.popupContainer, .popupContainer *,
#jAlert, #jAlert *,
.botonMenuMobile, .botonMenuMobile *,
#menuMobile, #menuMobile *,
.slider, .slider *,
.solapas, .solapas *,
form, form *,
#oScroll, #oScroll *,
.flotantes, .flotantes * {
    box-sizing: border-box;
}

/* ------------------ Loading -------------------- */

.ui-loader {
    display: none;
}
#oLoading {
    position: fixed;
    z-index: 1000000000000000;
    background: rgba(0,0,0,0.9);
    left: 0; top: 0; width: 100%; height: 100%;
    display: block;
}
#oLoading svg {
    position: absolute;
    width: 11em; height: 11em;
    left: 50%; top: 50%;
    margin-left: -5.5em; margin-top: -5.5em;
    transform-origin: center;
    -webkit-animation-name: loadinganim;
    -webkit-animation-duration: 1s;
    animation-name: loadinganim;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
#oLoading svg .st0{opacity:0.2;fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
#oLoading svg .st1{fill:none;stroke:#ffffff;stroke-width:3;stroke-miterlimit:10;}
@keyframes loadinganim {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* ---------------------- Popups ------------------ */

.popup {
    display: none;
}

.popupContainer {
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    left: 0; top: 0;
    width: 100%; height: 100%;
    overflow-y: auto;
    display: none;
    z-index: 100000;
}
.popupContainer .overlay,
#jAlert .overlay  {
    position: absolute;
    cursor: pointer;
    left: 0; top: 0;
    width: 100%; height: 100%;
    cursor: pointer;
}
.popupContainer .table {
    display: table;
    width: 100%; height: 100%;
}
.popupContainer .table .cell {
    display: table-cell; vertical-align: middle;
    text-align: center;
    position: relative;
    padding: 2em;
}
.popupContainer .popup {
    display: inline-block;
    background: #ffffff;
    width: 100%;
    max-width: 64em;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
    transform: scale(1);
    text-align: left;
    margin: 0;
    box-shadow: 0px 2.8em 1.9em -1.9em rgba(0, 0, 0, 0.5);
    padding: 6em;
}
.popupContainer .popup .cerrar,
#jAlert .alert .botonCerrar  {
    position: absolute;
    top: 2em; right: 2em;
    transition: all 0.2s;
    cursor: pointer;
    background: #171717;
    width: 4em; height: 4em;
    border-radius: 10000px;
    z-index: 100;
    opacity: 0.5;
}
.popupContainer .popup .cerrar:hover,
#jAlert .alert .botonCerrar:hover  {
    background-color: var(--oScriptsColor1);
    opacity: 1;
}

.popupContainer .popup .cerrar svg,
#jAlert .alert .botonCerrar svg {
    width: 1.3em; height: auto;
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%,-50%);
}

.popupContainer .popup .cerrar svg path,
#jAlert .alert .botonCerrar svg path,
.popupContainer .popup .cerrar svg .st0,
#jAlert .alert .botonCerrar svg .st0 {
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-miterlimit: 10;
    transition: all 0.3s;

    transition: all 0.3s;
}
.popupContainer .popup .cerrar:hover svg path,
#jAlert .alert .botonCerrar:hover svg path,
.popupContainer .popup .cerrar:hover svg .st0,
#jAlert .alert .botonCerrar:hover svg .st0 {
    stroke: #ffffff;
}

.popupContainer .popup .contenido {
    position: relative;
}

#popupVideoMP4, #popupVideoYoutube {
    padding: 0.4em;
    max-width: 100em;
}

#popupVideoMP4 video {
    width: 100%;
    display: block;
    background: #000000;
}
#popupVideoMP4 iframe {
    background: #000000;
}

.video-responsive {
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    padding-top: 30px;
    position: relative;
    }
.video-responsive iframe, .video-responsive object, .video-responsive embed {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

@media (max-width: 600px) {
    .popupContainer .popup {
        padding: 5em;
    }
}

@media (max-width: 500px) {
    .popupContainer .popup {
        padding: 4em;
    }
}

@media (max-width: 400px) {
    .popupContainer .popup {
        padding: 3em;
    }
}


/* ---------------------- Menu mobile ------------------ */

.botonMenuMobile {
    position: fixed;
    top: 2em; right: 2em;
    background: var(--oScriptsColor2);
    width: 7em; height: 7em;
    display: none;
    z-index: 100;
    cursor: pointer;
    border-radius: 0.5em;
    transition: all 0.3s;
    z-index: 10000;
}
.botonMenuMobile svg {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%,-50%);
    transition: all 0.3s;
    width: 2.8em; height: auto;
}
.botonMenuMobile svg rect {
    fill: #ffffff;
    transition: all 0.3s;
}

.botonMenuMobile.activo {
    background: #ffffff;
}
.botonMenuMobile.activo svg rect {
    fill: var(--oScriptsColor1);
}

#menuMobile {
    position: fixed;
    right: 0; top: 0;
    width: 40em;
    transform: translateX(40em);
    background: var(--oScriptsColor2);
    border-right: 1px solid #DBDBDB;
    z-index: 10000;
    height: 100%;
    overflow-y: auto;
    display: none;
}
#menuMobile nav {
    padding: 12em 3em;
    display: flex;
    align-items: center;
    min-height: 100%;
    position: relative;
}
#menuMobile nav a {
    display: block;
    font-weight: 400;
    font-size: 2.7em;
    line-height: 1.3em;
    padding: 0.8em 1.4em;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s;
    border-radius: 0.3em;
    opacity: 0.5;
}
#menuMobile nav a:hover {
    color: #ffffff;
    opacity: 1;
}
#menuMobile nav a.activo {
    color: var(--oScriptsColor1);
    background: #ffffff;
    opacity: 1;
}

#menuMobile nav a span {
    display: inline-block; vertical-align: middle;
    margin-right: 0.3em;
}
#menuMobile nav a span svg {
    width: 1em; height: auto;
}
#menuMobile nav a span svg path {
    fill: #ffffff;
}


/* ---------------------- jAlert ------------------ */
#jAlert {
    position:fixed;
    top:0; left:0;
    width:100%; height:100%;
    background: rgba(0,0,0,0.8);
    visibility:hidden;
    z-index:100000;
    -webkit-transition:all 0.3s;
    transition:all 0.3s;
    opacity:0;
    overflow-y: auto;
    z-index: 1000000;
}

#jAlert .table {
    display: table;
    vertical-align:middle; text-align:center;
    width:100%; height:100%;
}
#jAlert .cell {
    display:table-cell; vertical-align:middle; text-align:center;
    padding:0 2em;
}

#jAlert .alert {
    display:inline-block;
    padding: 5em 5em 4.5em;
    background: #ffffff;
    color: #808080;
    text-align:center;
    width:100%; max-width:80em;
    box-sizing:border-box;
    box-shadow: 0px 2.8em 1.9em -1.9em rgba(0, 0, 0, 0.5);
    position:relative;
}
#jAlert .alert .texto {
    font-size: 1.6em;
}
#jAlert .alert iframe {
    width:100%;
}

#jAlert .alert .botonOK {
    padding:1em;
    width:100px;
    margin:auto;
    background-color:var(--oScriptsColor1);
    color:#ffffff;
    margin-top:1.5em;
    text-align:center;
    cursor:pointer;
    font-size:1.8em;
    font-weight:400;
    border-radius: 0.5em;
    transition: all 300ms;
}
#jAlert .alert .botonOK:hover {
    background-color:var(--oScriptsColor2);
    color:#FFF;
}

#jAlert .alert p {
    text-align:justify;
}
#jAlert .alert a {
    color: #439539;
}
#jAlert .alert p.tit {
    font-size:1.6em;
    text-transform:uppercase;
    text-align:center;
}


/* ---------------------- Slider ------------------ */

.slider  {
    width: auto;
}
.slider .mask {
    /*margin: 0 -13px;*/
    
}
.slider .mask {
    position: relative;
    overflow: hidden;
    margin: 0 -1em;
}

.slider .mask .scroll {
    position: relative;
    left: 0; top: 0;
    display: flex;
    flex-wrap: wrap;
}

.slider .item {
    padding: 1em 1em;
    flex: 0 0 20%;
    max-width: 20%;
}
.slider * {
    user-select: none;
}
.slider img {
    pointer-events: none;
    max-width: 100%;
}



.slider .paginacion {
    margin-top: 1em;
    position: relative;
    margin-top: 1em;
    height: 5em;
}
.slider .paginacion .pags {
    height: 100%;
    overflow-x: auto;
}
.slider .paginacion .scrollpags {
    overflow-x: auto;
    margin: 0 7em;
}
.slider .paginacion .scrollpags.sinflechas {
    margin: 0;
}
.slider .paginacion .scrollpags .pags {
    display: flex;
    align-items: center;
    margin: 0 auto;
}
.slider .paginacion .scrollpags .pags div {
    flex: 0 0 1.6em;
    max-width: 1.6em;
    display: inline-block; vertical-align: middle;
    width: 1.6em; height: 1.6em;
    margin: 1em;
    background: var(--oScriptsColor2);
    border: 2px solid var(--oScriptsColor1);
    border-radius: 10000px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s;
}
.slider .paginacion .scrollpags .pags div.activo {
    left: 0px; top: 0px; right: 0px; bottom: 0px;
    border-color: var(--oScriptsColor1);
    background: var(--oScriptsColor1);
}
.slider .paginacion .flechas {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);    
}
.slider .paginacion .pags  {
    min-height: 5em;
}
.slider .paginacion .flechas .flecha {
    position: absolute;
    pointer-events: all;
    cursor: pointer;
    transition: all 0.3s;
    width: 5em; height: 5em;
    background: center no-repeat var(--oScriptsColor1);
    border-radius: 10000px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    user-select: none;
}
.slider .paginacion .flechas .flecha.der {
    left: auto;
    right: 0;
}
.slider .paginacion .flechas .flecha:hover {
    background-color: var(--oScriptsColor2);
}
.slider .paginacion .flechas .flecha svg {
    position: absolute;
    display: block;
    left: 50%; top: 50%;
    transform: translate(-50%,-50%);
    width: 3em; height: 3em;
}
.slider .paginacion .flechas .flecha svg path,
.slider .paginacion .flechas .flecha svg .st0 {
    fill: none;
    stroke: #ffffff;
}
.slider .paginacion .flechas .flecha.disabled {
    opacity: 0.5;
    background-color: #999999;
}


@media (max-width: 800px) {
    .slider  {
        font-size: 9px;
    }
}



/* ---------------------- Formularios ------------------ */

form {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -1.5em;
}

form .campo {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 1.5em;
}
form .campo.c50 { flex: 0 0 50%; max-width: 50%; }

form .campo input[type=color],
form .campo input[type=date],
form .campo input[type=datetime-local],
form .campo input[type=email],
form .campo input[type=file],
form .campo input[type=month],
form .campo input[type=number],
form .campo input[type=password],
form .campo input[type=search],
form .campo input[type=tel],
form .campo input[type=phone],
form .campo input[type=text],
form .campo input[type=time],
form .campo input[type=url],
form .campo input[type=week],
form .campo select,
form .campo textarea {
    display: block;
    width: 100%;
    background: #141414;
    border: 1px solid #141414;
    border-radius: 0.5em;
    padding: 1em 1.5em;
    font-size: 2em;
    line-height: 1em;
    color: #ffffff;
    transition: all 0.3s;
}

form .campo input[type=color]:focus,
form .campo input[type=date]:focus,
form .campo input[type=datetime-local]:focus,
form .campo input[type=email]:focus,
form .campo input[type=file]:focus,
form .campo input[type=month]:focus,
form .campo input[type=number]:focus,
form .campo input[type=password]:focus,
form .campo input[type=search]:focus,
form .campo input[type=tel]:focus,
form .campo input[type=phone]:focus,
form .campo input[type=text]:focus,
form .campo input[type=time]:focus,
form .campo input[type=url]:focus,
form .campo input[type=week]:focus,
form .campo textarea:focus {
    border-color: #804A8A;
}

form .campo input[type=color]::placeholder,
form .campo input[type=date]::placeholder,
form .campo input[type=datetime-local]::placeholder,
form .campo input[type=email]::placeholder,
form .campo input[type=file]::placeholder,
form .campo input[type=month]::placeholder,
form .campo input[type=number]::placeholder,
form .campo input[type=password]::placeholder,
form .campo input[type=search]::placeholder,
form .campo input[type=tel]::placeholder,
form .campo input[type=phone]::placeholder,
form .campo input[type=text]::placeholder,
form .campo input[type=time]::placeholder,
form .campo input[type=url]::placeholder,
form .campo input[type=week]::placeholder,
form .campo textarea::placeholder {
  
  opacity: 0.3;
}

form .campo textarea {
    height: 10em !important;
}
form .campo {

}

form button {
    display: inline-block;
    border: 0;
    font-size: 1em;
    line-height: 1em;
}
form button:hover {
}
form .mensaje {
    background: var(--oScriptsColor1);
    color: #ffffff;
    padding: 0.7em 1.3em;
    border-radius: 0.5em;
    font-size: 10px;
    text-transform: uppercase;
    text-align: left;
    margin-top: 0.5em;
    position: relative;
    display: none;
}
form .mensaje::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 10px 8px;
    border-color: transparent transparent var(--oScriptsColor1) transparent;
    left: 3em;
    bottom: 100%;
}

@media (max-width: 700px) {
    form .campo.c50 { flex: 0 0 100%; max-width: 100%; }
}


/* ---------------------- Solapas ------------------ */
.solapas .contenidos {
    background: #ffffff;
    padding: 6em;
    box-shadow: 0 0 0.9em rgba(0, 0, 0, 0.1);
    border-radius: 0.5em;
}
.solapas .contenidos .contenido {
    display: none;
}
.solapas .scroll {
    width: 100%;
    overflow-x: auto;
}

.solapas .scroll .solapascontainer {
    display: flex;
    padding: 0;
    align-items: stretch;
}



.solapas .scroll .solapascontainer .item {
    padding: 0 0.5em;
}
.solapas .scroll .solapascontainer .item:first-of-type {
    padding-left: 1.5em;
}
.solapas .scroll .solapascontainer .item:last-of-type {
    padding-right: 1.5em;
}

.solapas .solapa {
    background: #E5E5E5;
    padding: 2em 3em 1.6em;
    border-radius: 0.5em 0.5em 0 0;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 0 0.9em rgba(0, 0, 0, 0.1);
    user-select: none;
    width: 20em;
    height: 100%;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
}
.solapas .solapa span {
    font-size: 1.6em;
    transition: all 0.3s;
}
.solapas .solapa.activo {
    background: #ffffff;
}

@media (max-width: 600px) {
    .solapas .contenidos {
        padding: 4em;
    }
}


.desplegable .item {
    margin: 2em 0;
    background: #F4F4F4;
    box-shadow: 0px 0px 0.9em rgba(51, 49, 50, 0.1);
    border-radius: 0.5em;
}
.desplegable .item .titulo {
    padding: 2.5em 6em 2.5em 3em;
    cursor: pointer;
    border-radius: 0.5em;
    background: #ffffff;
    position: relative;
    transition: all 0.3s;
}
.desplegable .item.activo .titulo {
    color: #ffffff;
    background: var(--oScriptsColor1);
}
.desplegable .item .contenido {
    height: 0;
    transition: all 0.3s;
    overflow: hidden;
}
.desplegable .item .contenido .collapse {
    padding: 4em 3em;

}

.desplegable .item .titulo .icono {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 3em;
}
.desplegable .item .titulo .icono svg,
.desplegable .item .titulo .icono img {
    width: 2em;
    transition: all 0.3s;
}

.desplegable .item .titulo .icono path,
.desplegable .item .titulo .icono .st0 {
    fill:none;
    stroke:var(--oScriptsColor2);
    stroke-width:3;
    stroke-miterlimit:10;
    transition: all 0.3s;
}
.desplegable .item.activo .titulo .icono svg,
.desplegable .item.activo .titulo .icono img {
    transform: rotate(180deg);
}
.desplegable .item.activo .titulo .icono .st0 {
    stroke: #ffffff;
}
.desplegable .item.activo .titulo .icono.mas .st0:nth-of-type(1) {
    opacity: 0;
}


/* ---------------------- oScroll ------------------ */

#oScroll {
    position: fixed;
    top: 0px; right: 0px; bottom: 0px;
    width: 18px;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
    z-index: 100000000;
    border-radius: 10000px;
}
#oScroll .up, #oScroll .down {
    position: absolute;
    display: block;
    left: 0; top: 0;
    width: 100%; height: 20px;
    cursor: pointer;
    transition: all 0.3s;
}
#oScroll .up::before, #oScroll .down::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 3px 4px 3px;
    border-color: transparent transparent #4d4d4d transparent;
    position: absolute;
    left: 50%; top: 50%;
    margin-left: -3px; margin-top: -2px;
    transition: all 0.3s;
}
#oScroll .down {
    bottom: 0; top: auto;
}
#oScroll .down::before {
    border-width: 4px 3px 0 3px;
    border-color: #4d4d4d transparent transparent transparent;
}

#oScroll .up:hover::before {
    border-color: transparent transparent #ffffff transparent;
}
#oScroll .down:hover::before {
    border-color: #ffffff transparent transparent transparent;
}

#oScroll .bar {
    position: absolute;
    top: 22px;
    bottom: 22px;
    width: 100%;
}
#oScroll .bar .barslider {
    position: absolute;
    top: 0;
    left: 2px; right: 2px;
    height: 50px;
    cursor: pointer;
    transition: background 0.3s;
}

#oScroll, #oScroll .up, #oScroll .down, #oScroll .bar {
    background: #f0f0f0;
}

#oScroll .bar .barslider {
    background: #c1c1c1;
}

#oScroll .up:hover, #oScroll .down:hover,
#oScroll .bar .barslider:hover, #oScroll .bar .barslider.activo {
    background: #999999;
}

@media (max-width: 900px) {
    .botonMenuMobile,
    #menuMobile {
        display: block;
    }
}


/* ---------------------- flotantes ------------------ */

.flotantes {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    display: none;
}
.flotantes .flotante {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.flotantes .flotante img {
    max-width: none;
}

@media (max-width: 1000px) {
    .flotantes {
        display: none !important;
    }
}