/*
Theme Name: Supérate Themes 2021
Author: Plataformas Web (Superate)
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: superatethemes
*/

/*===============================
    * VARIABLES *
===============================*/
:root {
    --azul-prosoli          : #0C2A5E;
    --bg-hero               : #0C2A5E90;
    --amarillo              : #E3B24E;
    --rojo-prosoli          : #FF081C;
    --fuentes               : 'Arial, Helvetica, sans-serif';
    --ancho-contenedor      : 1280px;
    --gris-text             : #596E7F;
}

@import "./templates-parts/frase-gloria/frase-gloria.css";

@font-face {
    font-family: gothamBlackOTF;
    src: url(./assets/fonts/Gotham-Black.otf);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: gothamBoldOTF;
    src: url(./assets/fonts/Gotham-Bold.otf);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: gothamLightOTF;
    src: url(./assets/fonts/Gotham-Light.otf);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: gothamXtraLightOTF;
    src: url(./assets/fonts/Gotham-Thin.otf);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: gothamBookTTF;
    src: url(./assets/fonts/GothamBook.ttf),
    url('./assets/fonts/GothamBook.ttf')  format('truetype'); /* Safari, Android, iOS */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: gothamBoldTTF;
    src: url(./assets/fonts/GothamBold.ttf),
    url('./assets/fonts/GothamBold.ttf')  format('truetype'); /* Safari, Android, iOS */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: gothamMediumTTF;
    src: url(./assets/fonts/GothamMedium.ttf),
    url('./assets/fonts/GothamMedium.ttf')  format('truetype'); /* Safari, Android, iOS */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: gothamLightTTF;
    src: url(./assets/fonts/GothamLight.ttf),
    url('./assets/fonts/GothamLight.ttf')  format('truetype'); /* Safari, Android, iOS */
    font-weight: normal;
    font-style: normal;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: gothamLightOTF, "Merriweather Sans";
    line-height: 1.5;
    color: #616160;
}

img {
    width: 100%;
}


h1, h2, h3,
h4, h5, h6 {
    color: var(--azul-prosoli);
    padding-bottom: 15px;
}


/*===================================
* Generales
===================================*/
.section-line {
    width: 150px;
    border-bottom: solid 1px var(--rojo-prosoli);
    padding: 10px 0px;
}

.section-title {
    width: 100%;
    padding-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.section-title h2 {
    width: 90%;
    font-size: 35px;
    line-height: 40px;
    color: var(--azul-prosoli);
    text-align: center;
    font-family: gothamXtraLightOTF;
}


/*===================================
* Header
===================================*/
.header-mobile {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

@media only screen and (min-width: 992px) {
    .header-mobile {
        display: none;
    }
}

.header-mobile-container {
    width: 95%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.block-institucional {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.blocks-mobile {
    width: calc(100% - 40px);
    height: 80px;
    display: flex;
    justify-content: space-between;
}

.blocks-mobile .logo {
    width: 100px;
}

.blocks-mobile .logo a {
    width: 100%;
    display: block;
}

.blocks-mobile .page-name {
    display: none;
}

.block-search {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
}

.mobile-search {
    width: calc(100% - 70px);
    border: solid 0.5px #f5f5f5;
    border-radius: 30px;
}

.block-search .escudo-rd {
    height: 100%;
}

.block-search .escudo-rd img {
    width: auto;
    height: 100%;
}

.mobile-search .search-form {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    border: solid 0.5px #f5f5f5;
    border-radius: 30px;
}

.mobile-search label {
    width: 100%;
}

p#mensajeValidacion {
    width: auto;
    position: absolute;
    padding: 10px;
    background-color: darkred;
    color: white;
    display: none;
}

#error {
    max-width: 255px;
    display: none;
    position: relative;
    bottom: 0px;
    background-color: #fff;
    padding: 15px;
    color: red;
    line-height: 15px;
    border: solid 0.5px;
    z-index: 9999;
}

.mobile-menu {
    width: 100%;
    display: none;
    position: relative;
    top: 0;
    left: -100%;
    background-color: var(--azul-prosoli);
    transition: all 0.3s ease-in-out;
    margin-top: 10px;
    z-index: 999;
}

.showMenu {
    left: 0%;
    display: block;
    transition: all 0.3s ease-in-out;
}

.mobile-menu nav {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 0px;
}

.mobile-menu nav ul {
    width: 100%;
}

.mobile-menu nav ul li {
    font-size: 20px;
    list-style: none;
}

.mobile-menu nav ul li a {
    display: block;
    color: #fff;
    padding: 10px 30px;
    margin: 0px 20px;
    border-bottom: solid 1px #f5f5f5;
}

.mobile-menu nav ul li a:hover {
    background-color: #fff;
    color: var(--azul-prosoli);
}

#showMenu, #hideMenu {
    width: 40px;
    font-size: 30px;
    color: var(--azul-prosoli);
    text-align: right;
    cursor: pointer;
}



.header-desktop {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 15px 0px;
    position: relative;
}

.header-desktop .header-container {
    width: 90%;
    max-width: 1290px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-desktop .logo {
    width: 150px;
}

.header-desktop .header-right {
    width: calc(100% - 200px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: none;
    padding-left: 30px;
    margin-left: 30px;
}

@media only screen and (max-width: 992px) {
    .header-desktop {
        display: none;
    }
}

.header-mobile .header-menu ul, .header-desktop .header-menu ul {
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding: 0;
    padding-top: 16px;
    margin: 0;
    list-style: none;
}

.header-mobile .header-menu li, .header-desktop .header-menu li {
    width: calc(100% / 3);
    text-align: center;
    font-size: 14px;
}

.header-mobile .header-menu a, .header-desktop .header-menu a {
    width: 100%;
    display: block;
    color: var(--gris-text);
    text-decoration: none;
    transition: all ease-in-out 0.3s;
}

.header-mobile .header-menu a:hover, .header-desktop .header-menu a:hover {
    color: var(--rojo-prosoli);
    transition: all ease-in-out 0.3s;
}

.header-desktop .block-right {
    width: 300px;
    max-width: 300px;
}

.header-menu .current-menu-item {
    border: none;
    color: var(--rojo-prosoli);
}

.header-menu .current-menu-item a {
    color: var(--rojo-prosoli);
}

/** MENU HEADER **/

@media only screen and (min-width: 992px) {
    .page-name h3 {
        color: var(--gris-text);
        display: block;
        font-size: 20px;
        margin: 0;
        padding: 0;
    }
}

/** SEARCH FORM **/
.header-mobile .search, .header-desktop .search {
    width: 100%;
    border-radius: 30px;
    box-shadow: 0px 0px 10px rgba(221,221,221,0.5);
}

.header-mobile .search-form, .header-desktop .search-form {
    width: 100%;
    display: flex;
}

.header-mobile .search-field label, .header-desktop label {
    width: 100%;
}

.header-mobile .search-field, .header-desktop .search-field {
    width: 100%;
    height: 50px;
    padding: 20px;
    border: 0;
    border-radius: 30px 0px 0px 30px;
}

.header-mobile .search-submit, .header-desktop .search-submit {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 0px 30px 30px 0px;
    cursor: pointer;
}

.header-mobile .search-submit, .header-desktop .search-submit:hover {
    background-color: var(--azul-prosoli);
    color: #fff;
    transition: all 0.3s ease;
}

#form .search-inputs {
    width: 100%;
    display: flex;
}


/*===================================
* Header
===================================*/
.desktop-menu {
    width: 100%;
    display: none;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    z-index: 9999;
}

@media only screen and (min-width: 992px) {
    .desktop-menu {
        display: flex;
    }
}

.header-menu {
    width: 100%;
}

.header-menu .menu-menu-header-container {
    display: flex;
    justify-content: center;
}

.desktop-menu .header-menu ul {
    justify-content: flex-end;
    padding: 0;
    margin: 0;
}

.desktop-menu .menu-menu-principal-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.current-menu-ancestor, .current-menu-item {
    border-bottom: solid 1px var(--rojo-prosoli);
}

.item__multimedia {
    border-bottom: none;
}

.desktop-menu ul {
    width: 95%;
    max-width: 1290px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    list-style: none;
    margin: 0;
}

ul li > .sub-menu {
    display: none;
    background-color: #274374;
}

.desktop-menu ul > li a {
    height: 100%;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    font-size: 16px;
    padding: 15px 10px;
    line-height: 15px;
    text-decoration: none;
    border-bottom: solid 1px transparent;
}

.desktop-menu ul > li a:hover {
    color: #fff;
    transition: all ease 0.3s;
    background-color: var(--bg-hero);
    border-bottom: solid 1px var(--rojo-prosoli);
}

.desktop-menu ul > li a i {
    width: 100%;
    text-align: center;
}

.sub-menu .current_page_item a {
    color: var(--azul-prosoli);
    transition: all ease 0.3s;
    background-color: #fff;
    border-bottom: solid 1px var(--rojo-prosoli);
}

.sub-menu li {
    width: 100%;
    position: relative;
}

.desktop-menu .sub-menu > li .sub-menu {
    display: none;
    position: absolute;
    top: 0;
    right: -100%;
}

.desktop-menu .sub-menu > li:hover .sub-menu {
    display: flex;
}

.desktop-menu .sub-menu > li a {
    padding: 10px 20px;
}

ul li > .sub-menu li a {
    flex-wrap: nowrap;
    justify-content: space-between;
}

ul li > .sub-menu li a i {
    width: auto;
}

.desktop-menu .sub-menu > li a:hover {
    background-color: #fff;
    color: Var(--azul-prosoli);
}

.desktop-menu ul > li:hover ul {
    width: 250px;
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    background-color: var(--bg-hero);
}


/**************************************
* Accesibilidad
**************************************/
#pojo-a11y-toolbar {
    z-index: 99999 !important;
}

/**************************************
* REDES SOCIALES
**************************************/
.icon-bar {
    width: 100%;
    display: none;
    justify-content: space-between;
    bottom: 0;
    left: 0;
    position: fixed;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    z-index: 10000;
}

@media only screen and (min-width: 992px) {
    .icon-bar {
        width: auto;
        display: block;
        right: 0;
        bottom: 50%;
        left: unset;
        transform: translateY(50%);
    }
}

.icon-bar a {
    width: calc(100%);
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    transition: all 0.3s ease;
    color: white;
    font-size: 20px;
}

.twitter {
    background: #55ACEE;
    color: white;
}

.facebook {
    background: #3B5998;
    color: white;
}

.instagram {
    background: #405de6;
    color: white;
}

.youtube {
    background: #FF0000;
    color: white;
}


/**************************************
* Banner
**************************************/
#banner {
    height: 30vh !important;
    clip-path: polygon(100% 0px, 100% 85%, 50% 100%, 0px 85%, 0px 0px);
    background-color: #f5f5f5;
}

@media only screen and (min-width: 992px) {
    #banner {
        height: 100vh !important;
    }
}

#banner .bg-hero.desktop {
    display: none;
}

@media only screen and (min-width: 992px) {
    #banner.bg-hero.desktop {
        display: block;
    }
}

#banner .mobile {
    display: block;
}

@media only screen and (min-width: 992px) {
    #banner .mobile {
        display: none;
    }
}

.banner-item {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center;
    background-size: cover;
}

.bg-hero {
    display: none;
}

@media only screen and (min-width: 992px) {
    .bg-hero {
        width: 99%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.bg-hero video {
    position: absolute;
    min-width: 100vw;
    min-height: 100vh;
    height: 100vh;
}

@media only screen and (min-aspect-ratio: 16/9) {
    .bg-hero video {
        width: 100vw;
        height: auto;
    }
}

@media only screen and (max-aspect-ratio: 16/9) {
    .bg-hero video {
        width: auto;
        height: 100vh;
    }
}

#banner iframe {
    width: 100%;
    height: 100%;
}

.banner-caption {
    width: 600px;
    color: #fff;
    text-align: center;
}

.banner-caption h1 {
    line-height: 35px;
}


/**************************************
* DESCRIPCION SUPERATE
**************************************/
.section-descripcion {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 40px;
}

.superate-container {
    width: 95%;
    max-width: 1290px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

@media only screen and (min-width: 992px) {
    .superate-container {
        justify-content: space-between;
    }
}

.tarjeta {
    width: 80%;
}

@media only screen and (min-width: 992px) {
    .tarjeta {
        width: 50%;
    }

    .tarjeta img {
        width: 90%;
    }
}

.descripcion-superate {
    width: 95%;
    padding: 50px 30px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

@media only screen and (min-width: 992px) {
    .descripcion-superate {
        width: calc(54% - 64px);
    }
}

.title-superate {
    width: 100%;
}

@media only screen and (min-width: 992px) {
    .title-superate {
        width: 100%;
        color: var(--azul-prosoli);
        text-align: center;
        line-height: 35px;
    }
}

.title-superate h1 {
    line-height: 30px;
    text-align: center;
}

.superate-text {
    text-align: justify;
    line-height: 1.5;
}

.consultate-movil {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
    margin-top: 30px;
}

.consultate-desktop {
    display: none;
}

@media only screen and (min-width: 992px) { 
    .consultate-movil {
        display: none;
    }

    .consultate-desktop {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f5f5f5;
        margin-top: 30px;
    }
}

.consultate a {
    width: 100%;
    display: flex;
    justify-content: center;
}

.consultate img {
    width: 100%;
}


/**************************************
*  CERTIFICACIONES
**************************************/
.section-certificaciones {
    width: 100%;
    display: flex;
    justify-content: center;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 100% 90%, 50% 100%, 0 90%);
    background-size: cover;
    background-repeat: no-repeat;
}

.certificaciones-bg {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 80px 0px;
    background-color: rgba(12, 42, 94, 0.8);
}

.certificaciones-container {
    width: 95%;
    max-width: 1290px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.section-certificaciones .section-title h2 {
    color: #fff;
}

.certificaciones {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 50px;
}

.certificado-item a {
    width: 100%;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.certificado-item a:hover {
    color: var(--amarillo);
}

@media only screen and (min-width: 992px) {
    .certificado-item {
        width: calc(100% / 3);
    }
}

.certificado-img {
    width: auto;
    height: 250px;
}

.certificado-img img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    transition: all 0.3s ease-in-out;
}

.certificado-item a:hover img {
    transform: scale(1.1);
    transition: all 0.3s ease-in-out;
}

.certificado-title {
    z-index: 99;
    padding-top: 15px;
}


/**************************************
* Noticias
**************************************/
.section-noticias {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 80px;
    overflow-x: hidden;
    /*clip-path: polygon(0 0, 100% 0, 100% 90%, 100% 90%, 50% 100%, 0 90%);*/
}

.noticias-container {
    width: 90%;
    max-width: 1290px;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 80px;
}

.noticias-content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.noticia-item {
    width: 100%;
    background-color: var(--azul-prosoli);
    margin: 5px 5px 20px 5px;
}

@media screen and (min-width: 992px) {
    .noticia-item {
        width: calc((100% / 3) - 15px);
    }
}

.noticia-img {
    width: 100%;
    height: 250px;
}

.noticia-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.noticia-description {
    width: calc(100% - 32px);
    padding: 16px;
}

.noticia-date {
    text-transform: capitalize;
    color: #fff;
    padding-bottom: 30px;
}

.noticia-text {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 150px;
    flex-direction: column;
}

.noticia-title h2 {
    font-size: 22px;
    line-height: 27px;
    color: #fff;
}

.noticia-title a, .noticia-btn a {
    color: #fff;
    text-decoration: none;
}

.noticia-title a:hover h2, .noticia-btn a:hover {
    color: var(--amarillo);
}

.noticia-btn {
    width: 100%;
    text-align: right;
}

.elementor-widget-container p {
    padding: 10px 0px;
}

.page-numbers.dots {
    color: #fff;
}

.elementor-widget-theme-post-title .elementor-heading-title {
    color: var(--azul-prosoli) !important;
    font-size: 32px;
}

.elementor.elementor-12068 {
    padding-top: 50px;
}

.elementor-location-single h3 {
    color: var(--azul-prosoli);
    font-size: 25px;
}

/**************************************
* COMPONENTES PROSOLI
**************************************/
.section-componentes {
    width: 100%;
    display: flex;
    justify-content: center;
    background-attachment: fixed;
    background-color: #f5f5f5;
    background-position: center, center;
    background-repeat: no-repeat;
    background-size: cover;
    clip-path: polygon(0 0, 50% 10%, 100% 0, 100% 90%, 100% 90%, 50% 100%, 0 90%);
}

.componentes__bg {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    padding: 200px 0px;
    background-color: rgba(12, 42, 94, 0.8);
    clip-path: polygon(0 0, 50% 10%, 100% 0, 100% 90%, 100% 90%, 50% 100%, 0 90%);
}

.componentes-container {
    width: 100%;
    max-width: 1290px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.componentes__bg .section-title h2 {
    color: #fff;
}

.swiper-container {
    padding-top: 100px;
}

.componente-item {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.componente-img {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.componente-title {
    width: 100%;
    text-align: center;
    padding-top: 20px;
    color: #fff;
}

.componente-title h3 {
    color: #fff;
}

.swiper-button-next, .swiper-button-prev {
    color: #fff;
}

/* MODAL
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
    --lightgray: #efefef;
    --blue: steelblue;
    --black: rgba(0, 0, 0, 0.8);
    --bounceEasing: cubic-bezier(0.51, 0.92, 0.24, 1.15);
}
  
* {
    padding: 0;
    margin: 0;
}

a {
    color: blue;
    text-decoration: none;
}

.open-modal {
    font-weight: bold;
    color: #fff;
    padding: 0.75rem 1.75rem;
    margin-bottom: 1rem;
    border-radius: 5px;
    cursor: pointer;
}

.open-modal:hover h3 {
    color: var(--amarillo);
}
  
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--black);
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    transition: all 0.35s ease-in;
    font-family: gothamLightTTF, "Merriweather Sans";
}

div[class="modal is-visible"] {
    visibility: visible !important;
    opacity: 1 !important;
}

.modal-dialog {
    position: relative;
    max-width: 600px;
    max-height: 90vh;
    border-radius: 5px;
    overflow: auto;
    cursor: default;
    color: #fff;
}

.modal-header,
.modal-footer {
    background: var(--lightgray);
}

.modal header {
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding-bottom: 20px;
}

.modal header h1 {
    color: #fff;
    padding: 0;
    margin: 0;
}

.modal-header .close-modal {
    font-size: 1.5rem;
}

.close {
    color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 50px;
    cursor: pointer;
}

.modal p + p {
    margin-top: 1rem;
    text-align: justify;
}

.modal-container h3 {
    padding-bottom: 15px;
    color: #fff;
}

.modal li {
    padding: 10px 0px;
}

.modal-container p {
    padding: 10px 0px;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--azul-prosoli);
    border-radius: 10px;
} 

/**************************************
* VIDEOS YOUTUBE
**************************************/
.ytvideos {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 80px 0px;
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
}

.ytvideos-container {
    width: 95%;
    max-width: 1290px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.video-player {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 30px;
}

.all-videos {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

@media only screen and (min-width: 992px) {
    .all-videos {
    width: 85%;
}
}

#player {
    width: 100%;
    height: 495px;
}

.video-item {
    width: 100%;
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 20px;
}

@media only screen and (min-width: 992px) {
    .video-item {
        width: calc((100% / 3) - 5px);
    }
}

.video-btn {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 50px 0px;
    background-color: rgba(0, 0, 0, 0.3);
    color: #f5f5f5;
    cursor: pointer;
}

.video-btn i {
    font-size: 50px;
    transition: all 0.3s ease;
}

.video-btn:hover i {
    color: var(--azul-prosoli);
    transition: all 0.3s ease;
}

.video-title {
    width: calc(100% - 20px);
    display: flex;
    justify-content: center;
    padding: 0px 30px;
    margin-top: 20px;
}

.video-title h3 {
    font-size: 16px;
}


/**************************************
* FRASE DE GLORIA
**************************************/
.frase-section {
    width: 100%;
    display: flex;
    justify-content: center;
    background-attachment: fixed;
    background-color: #f5f5f5;
    background-position: center, center;
    background-repeat: no-repeat;
    background-size: cover;
    clip-path: polygon(0 0, 50% 10%, 100% 0, 100% 90%, 100% 90%, 50% 100%, 0 90%);
}


@media screen and (min-width: 992px) {
    .frase-section {
        padding-top: 0px;
    }
}

.frase-bg {
    display: flex;
    justify-content: center;
    background-color: rgba(12, 42, 94, 0.8);
    clip-path: polygon(0 0, 50% 10%, 100% 0, 100% 90%, 100% 90%, 50% 100%, 0 90%);
}

@media screen and (min-width: 992px) {
    .frase-bg {
        padding-top: 80px;
    }
}

.frase-container {
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column-reverse;
    margin: 150px 0px 0px 0px;
}

@media only screen and (min-width: 992px) {
    .frase-container {
        margin: 0px;
    }
}

.frase-item {
    width: 100%;
    display: flex;
    flex-wrap: wrap;    
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
}

@media screen and (min-width: 992px) {
    .frase-item {
        flex-direction: row;;
    }
}

.frase-img {
    width: 100%;
    margin-bottom: -10px;
}

@media screen and (min-width: 992px) {
    .frase-img {
        width: 32%;
    }
}

.frase-text {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

@media screen and (min-width: 992px) {
    .frase-text {
        width: 45%;
    }
}

.frase-text h3 {
    color: #fff;
    text-align: center;
    padding: 0px 0px 40px 0px;
}

.frase-autor {
    width: 70%;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.frase-autor h1 {
    width: 100%;
    color: #fff;
    font-size: 45px;
    padding: 0;
    margin: 0;
    font-family: gothamXtraLightOTF;
    font-weight: 300;
}

.autor-line {
    width: 60%;
    margin: 10px 0px 20px 0px;
    border-bottom: solid 1px var(--rojo-prosoli);
}

.frase-logo-superate {
    width: 50%;
    padding-bottom: 50px;
}

@media screen and (min-width: 992px) {
    .frase-logo-superate {
        width: 30%;
    }
}


/**************************************
*  PROYECTOS
**************************************/
.section-proyectos {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 40px 0px;
}

.proyectos-container {
    width: 95%;
    max-width: 1290px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.proyectos-all {
    width: 100%;
    flex-wrap: wrap;
    display: flex;
    justify-content: flex-start;
}

.proyecto-item {
    width: 100;
    padding: 10px;
    overflow: hidden;
}

@media only screen and (min-width: 992px) {
    .proyecto-item {
        width: calc((100% / 3) - 20px);
    }
}


/**************************************
*  ACTIVIDADES
**************************************/
.section-actividades {
    width: 100%;
    display: flex;
    justify-content: center;
    background-attachment: fixed;
    background-color: #f5f5f5;
    background-position: center, center;
    background-repeat: no-repeat;
    background-size: cover;
    clip-path: polygon(0 0, 50% 10%, 100% 0, 100% 90%, 100% 100%, 0 100%);
}

.actividades_bg {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: rgba(12, 42, 94, 0.8);
    clip-path: polygon(0 0, 50% 10%, 100% 0, 100% 90%, 100% 100%, 0 100%);
}

.actividades-container {
    width: 95%;
    max-width: 1290px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 140px 0px 80px 0px;
}

.section-actividades .section-title h2 {
    color: #fff;
}

.actividades-all {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 50px;
}

@media only screen and (min-width: 992px) {
    .actividades-all {
        flex-wrap: nowrap;
    }
}

.actividad-item {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 20px;
}

.actividad-item h1, .actividad-item h3 {
    color: #fff;
}

.actividad_bg {
    width: 100%;
    padding: 32px;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    background-color: rgba(12, 42, 94, 0.4);
}

@media only screen and (min-width: 992px) {
    .actividad_bg {
        flex-wrap: nowrap;
        align-items: center;
    }
}

.actividad-title {
    width: 100%;
    border-bottom: solid 1px;
    margin-bottom: 20px;
}

@media only screen and (min-width: 992px) {
    .actividad-title {
        width: 70%;
        border-bottom: none;
        margin-bottom: 0px;
    }
}

.actividad-title h1 {
    font-size: 30px;
    line-height: 35px;
}

@media only screen and (min-width: 992px) {
    .actividad-title h1 {
        font-size: 25px;
        line-height: 30px;
    }
}

.actividad-details {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

@media only screen and (min-width: 992px) {
    .actividad-details {
        width: 70%;
        flex-wrap: wrap;
        border-left: solid 1px;
        margin-left: 20px;
        padding-left: 20px;
    }
}

.actividad-date {
    width: 100%;
    padding-bottom: 15px;
}

@media only screen and (min-width: 992px) {
    .actividad-date {
        width: 100%;
        padding-bottom: 30px;
    }
}

.actividad-details h3 {
    text-transform: uppercase;
}


/**************************************
*  FORMULARIO CONTACTO
**************************************/
.section-contacto {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #f5f5f5;
}

.two-columns {
    width: 100%;
    max-width: 1290px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 80px 30px;
}

@media only screen and (min-width: 992px) {
    .two-columns {
        justify-content: space-between;
    }
}

.form_front {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

div#wpcf7-f17011-p18603-o1 {
    width: 100%;
}

.contact-info {
    width: 100%;
    padding-bottom: 50px;
}

@media only screen and (min-width: 992px) {
    .form_front {
        width: 50%;
        padding-right: 50px;
    }
    
    .contact-info {
        width: 50%;
        padding-left: 50px;
        padding-bottom: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        flex-direction: column;
        justify-content: center;
        border-left: solid 1px var(--azul-prosoli);
    }
}

.contact-info div {
    padding-bottom: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.contact-info div i {
    font-size: 24px;
    padding-right: 15px;
    color: var(--azul-prosoli);
}

.two-columns .section-title {
    padding-bottom: 50px;
    justify-content: center;
}

.contact-icono img {
    width: 40%;
}

.contact-icono {
    width: 100%;
    display: flex;
    justify-content: center !important;
    text-align: center;
}

#wpcf7-f17011-o1 {
    width: 100%;
}

.group-form {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.group-form, .email, .asunto, .mensaje {
    margin-bottom: 20px;
}

.form_front input, .form_front textarea {
    background-color: transparent;
}

.form_front input {
    width: 100%;
    height: 40px;
    padding: 15px;
    border: none;
    border-bottom: solid 1px var(--azul-prosoli);
}

.group-form {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

.group-form label {
    width: 100%;
    max-height: 66px;
}

.group-form i {
    display: none;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    right: 10px;
    bottom: 16%;
}

.form_front textarea {
    width: 100%;
    padding: 10px;
    border: 0;
    border-bottom: solid 1px var(--azul-prosoli)
}

.form_front input[type="submit"] {
    width: 100%;
    padding: 10px;
    height: 40px;
    border: 0;
    background-color: var(--azul-prosoli);
    color: #fff;
}

.input-error {
    width: 100%;
    display: block;
    background-color: #fff;
    color: #bb2929;
    padding: 10px;
    z-index: 999;
}

.correct-input {
    border: solid 2px #1ed12d;
    color: #1ed12d;
}

.correct-label {
    color: #1ed12d;
}

.incorrect-input {
    border: solid 2px #bb2929;
}

.incorrect-label {
    color: #bb2929;
}


/**************************************
*  MAPS
**************************************/
.location_maps {
    width: 100%;
    height: 400px;
}


/**************************************
*  INSTITUCIONES RELACIONADAS
**************************************/
.instituciones {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

@media only screen and (min-width: 992px) {
    .instituciones {
        justify-content: space-between;
    }
}

.institucion {
    width: calc(100% / 2);
    padding: 15px;
}

@media only screen and (min-width: 992px) {
    .institucion {
        width: 200px;
        padding: 15px;
    }
}

.institucion a img {
    transition: all 0.3s ease;
}

.institucion a:hover img {
    transform: scale(1.2);
    transition: all 0.3s ease;
}


/**************************************
*  FOOTER
**************************************/

@media screen and (min-width: 800px) { /* Con esto lo ocultamos en la pc y se deja visible solo en mobile */
.mostrarenmobile {
		display: none;
	    width: 75%;
        padding: 0px 32px;
        flex-wrap: wrap;
        justify-content: center;
        color: #fff;
	}
}
.foter {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: var(--azul-prosoli);
    padding: 60px 0px 30px 0px
}

.footer-container {
    width: 95%;
    max-width: 1290px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-block1, .footer-block3 {
    width: 36%;
    display: none;
}

@media only screen and (min-width: 992px) {
    .footer-block1, .footer-block3 {
        display: block;
    }
}

.footer-block2 {
    width: 100%;
    padding: 0px 32px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    color: #fff;
}

@media only screen and (min-width: 992px) {
    .footer-block2 {
        width: 75%;
        padding: 0px 32px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        color: #fff;
    }
}

.redes-sociales {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-bottom: 30px;
}

@media only screen and (min-width: 992px) {
    .redes-sociales {
        display: none;
    }
}

.redes-sociales a {
    width: calc(100%);
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    font-size: 30px;
}

.escudo-logo {
    width: 230px;
}

.footer-name {
    width: 100%;
    text-align: center;
    font-size: 22px;
}

.footer-address {
    width: 100%;
    text-align: center;
    padding: 10px 0px;
}

.footer-contact {
    width: 100%;
    text-align: center;
}

.footer-menu {
    width: 100%;
    display: flex;
    justify-content: center;
}

.footer-menu nav {
    width: 100%;
    display: flex;
    justify-content: center;
}

.footer-menu ul {
    display: flex;
    justify-content: space-between;
}

.footer-menu nav li {
    list-style: none;
    padding: 0px 15px;
}

.footer-menu nav a {
    color: var(--blue);
    padding: 10px 0px;
    display: block;
}

.footer-menu nav a:hover {
    color: var(--rojo-prosoli);
}

#selloNorticDesktop {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.footer-copy {
    width: 100%;
    text-align: center;
    margin-top: 30px;
    color: white;
}


/**************************************
*  FORMULARIOS
**************************************/
.provincias {
    display: none;
}

.show_provincia {
    display: block;
}

div#apoyo {
    height: 140px;
}

input, select {
    width: 100%;
    height: 40px;
    padding: 0px 10px;
}

input[type="checkbox"] {
    height: auto;
}

select[multiple="multiple"] {
    height: 100px;
}

.btnSolicitar {
    cursor: pointer;
}


/**************************************
*  PROGRAMS PAGE
**************************************/

.page_hero {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.page_hero::before {
    content: "";
    width: 100%;
    display: block;
    position: absolute;
    background-color: var(--bg-hero);
    height: 100%;
}

.page_hero .bg_hero {
    width: 100%;
    max-width: 1290px;
    position: absolute;
    bottom: 0;
    z-index: 999;
}

.page_hero .page_title {
    font-size: 35px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    margin: 0;
    padding: 0;
}

@media only screen and (min-width: 992px) {
    .page_hero .page_title {
        width: 600px;
        font-size: 50px;
        line-height: 55px;
        text-align: left;
    }
}

.breadcrumb {
    width: 100%;
    padding: 8px 15px;
    margin-bottom: 20px;
    list-style: none;
    border-radius: 4px;
    color: #fff;
}

.breadcrumb a {
    color: var(--amarillo);
    text-decoration: none;
}

.archives-items {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.items {
    width: 95%;
    max-width: 1290px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 30px 0px;
    margin: 10px;
}

.item {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

@media only screen and (min-width: 992px) {
    .item {
        justify-content: space-between;
    }
    
    .item:nth-of-type(2n) {
        flex-direction: row-reverse;
    }
}

.item-image {
    width: 100%;
    padding-bottom: 16px;
}

@media only screen and (min-width: 992px) {
    .item-image {
        width: 50%;
    }
}

.item-image img {
    width: 100%;
    object-fit: cover;
}

.item-details {
    width: 100%;
}

@media only screen and (min-width: 992px) {
    .item-details {
        width: 50%;
        padding: 20px 50px;
    }
}

@media only screen and (min-width: 992px) {
    .item-text {
        padding-bottom: 50px;
    }
}
.item-title {
    width: 100%;
    margin: 0;
    font-size: 30px;
    line-height: 35px;
}

.item-description {
    width: 100%;
    padding: 16px 0px;
}

.item-btn {
    background-color: var(--azul-prosoli);
    padding: 10px 20px;
    color: #fff;
    transition: all 0.3s ease-in-out;
}

.item-btn:hover {
    background-color: var(--rojo-prosoli);
}


/**************************************
*  INTERNAL PAGE
**************************************/
.internal-page {
    width: 95%;
    max-width: 1290px;
    display: flex;
    padding: 30px 0px;
    font-family: gothamLightOTF;
}

@media only screen and (min-width: 992px) {
    .internal-page {
        padding: 80px 0px;
    }
}

.content-page {
    width: 100%;
    text-align: justify;
}

@media only screen and (min-width: 992px) {
    .content-page {
        width: calc(80% - 50px);
        margin-right: 50px;
        text-align: justify;
    }
}

.content-page img {
    width: 100%;
    height: auto;
}

.content-page p {
    padding-bottom: 15px;
}

.content-page li {
    padding-bottom: 15px;
}

.sidebar-page {
    display: none;
}

@media only screen and (min-width: 992px) {
    .sidebar-page {
        width: 25%;
        display: block;
    }   
}

.sidebar-menu {
    width: 100%;
    position: sticky;
    top: 50px;
}

.sidebar-menu ul {
    font-family: gothamLightOTF;
    list-style: none;
}

.sidebar-menu ul li {
    border-bottom: solid 0.5px var(--bg-hero);
}

.sidebar-menu ul li:first-child {
    color: var(--azul-prosoli);
    font-weight: bold;
}

.sidebar-menu ul li:first-child a:hover {
    color: var(--azul-prosoli);
    cursor: default;
}

.sidebar-menu ul li a {
    width: 100%;
    display: block;
    padding: 10px;
}

.sidebar-menu ul li a:hover {
    color: var(--amarillo);
}

.current_page_item a {
    color: var(--amarillo);
}


/**************************************
*  SOMOS SUPERATE
**************************************/
.content-page .swiper-wrapper {
    height: auto;
}

.content-page .swiper-container {
    padding: 0;
}

.elemento-superate {
    width: 100%;
    background-color: var(--azul-prosoli);
    padding: 50px 30px;
    color: #fff;
    border-radius: 10px;
}

.elemento-titulo {
    font-size: 22px;
    line-height: 22px;
    text-align: center;
    padding-bottom: 15px;
}

.elemento-descripcion {
    font-size: 16px;
    text-align: justify;
    line-height: 18px;
}


/**************************************
*  MARCO LEGAL
**************************************/
.marco-items {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.marco-item {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    background-color: #f5f5f5;
    margin-bottom: 30px;
}

@media only screen and (min-width: 992px) {
    .marco-item {
        flex-direction: row;
    }
}

.marco-item a {
    width: 100%;
    height: 100%;
    background-color: var(--azul-prosoli);
}

@media only screen and (min-width: 992px) {
    .marco-item a {
        width: 25%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        background-color: var(--azul-prosoli);
        padding: 20px;
    }
}
.marco-item a:hover {
    background-color: var(--amarillo);
}

.marco-icono {
    width: 100%;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

@media only screen and (min-width: 992px) {
    .marco-icono {
        justify-content: center;
    }
}

.marco-icono i {
    font-size: 40px;
}

.marco-icono p {
    width: 100%;
    text-align: center;
    padding-top: 0px;
}

.download-details {
    width: 25%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

@media only screen and (min-width: 992px) {
    .download-details {
        width: 100%;
    }
}

.download-details p {
    padding: 0px;
    padding-top: 15px;
}

.text-download p {
    padding: 0;
}

.marco-text {
    width: 100%;
    padding: 30px 20px 0px 20px;
}

.marco-title {
    width: 100%;
    color: var(--azul-prosoli);
    line-height: 25px;
    padding-bottom: 15px;
}

.marco-title h3 {
    padding: 0;
}

.marco-descripcion {
    width: 100%;
}


/**************************************
*  PAGINA DE CONTACTO
**************************************/
.contact-page {
    width: 100%;
}

/**************************************
*  PAGINA CERTIFICACIONES
**************************************/
.premios, 
.certificaciones-internacionale, 
.certificaciones-nacionale {
    margin-top: 30px;
}

.certificacion-item {
    width: 100%;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: solid 0.5px var(--bg-hero);
}

.certificacion-inter {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border-bottom: solid 0.5px var(--bg-hero);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

@media only screen and (min-width: 992px) {
    .certificacion-inter {
        flex-wrap: nowrap;
        justify-content: space-between;
    }
}

.certificacion-inter .centificacion-img {
    width: 50%;
}

@media only screen and (min-width: 992px) {
    .certificacion-inter .centificacion-img {
        width: 15%;
    }
}

@media only screen and (min-width: 992px) {
    .certificacion-inter .certificacion-text {
        width: calc(85% - 40px);
    }
}

.certificacion-inter .certificacion-title {
    width: 100%;
    text-align: center;
}

@media only screen and (min-width: 992px) {
    .certificacion-inter .certificacion-title {
        text-align: left;
    }
}

.premios ul {
    padding: 0px 30px;
}

.premios li {
    list-style: disc;
}

.premio-item {
    width: 100%;
    border-bottom: solid 0.5px var(--bg-hero);
    margin-bottom: 20px;
    padding-bottom: 20px;
}


/**************************************
*  PAGINA PREGUNTAS FRECUENTES
**************************************/
.faq-page {
    width: 95%;
    max-width: 900px;
    display: flex;
    justify-content: center;
    padding: 50px 0px;
}

.acordeon-container {
    background-color: #f5f5f5;
}

.cont-acordeon {
    width: 100%;
    border-bottom: solid 1px #fff;
}

.acordeon-header {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--azul-prosoli);
    margin: 0;
    transition: 0.3s;
    color: #fff;
    cursor: pointer;
}

.acordeon-header:hover {
    background-color: var(--bg-hero);
}

.acordeon-header h3 {
    width: 80%;
    font-size: 20px;
    line-height: 25px;
    color: #fff;
    padding: 0;
}

.acordeon-header i {
    font-size: 20px;
    line-height: 25px;
    color: #fff;
    padding: 0;
}

.acordeon-content {
    padding: 0;
    box-sizing: border-box;
    border: none;
    overflow: hidden;
    transition: 0.3s;
}

.acordeon-content p {
    text-align: justify;
}

.acordeon-content ul {
    width: 90%;
    margin: 0 auto;
}

.acordeon-text {
    padding: 10px;
    box-sizing: border-box;
    border: solid 1px var(--azul-prosoli);
    text-align: justify;
}

/**************************************
*  PAGINA COMPONENTES SUPERATE
**************************************/
.page-componente-container {
    width: 100%;
    max-width: 1290px;
    padding: 50px 0px;
}

.componente-acordeon {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    cursor: pointer;
}

.componente-header {
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.componente-header::before {
    content: "";
    background-color: var(--bg-hero);
    width: 100%;
    height: 100%;
    position: absolute;
}

.page-componente-container .componente-title {
    width: 100%;
    padding-top: 0;
    text-align: center;
    z-index: 9;
}

.page-componente-container .componente-title h1 {
    width: 100%;
    padding-bottom: 20px;
    margin: 0px;
    font-size: 25px;
    line-height: 25px;
    color: #fff;
}

.componente-content {
    width: 100%;
    padding: 10px;
}

.componente-text {
    text-align: justify;
}

.componente-text p, .componente-text li {
    margin-bottom: 15px;
}

.componente-text ol {
    width: 100%;
    padding: 0px 15px;
}

.componente-text strong {
    color: var(--azul-prosoli);
}

.componente-header span.dinamycIcon {
    width: 60px;
    height: 60px;
    background-color: var(--azul-prosoli);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
    right: 0;
    color: #fff;
    font-size: 40px;
    padding: 25px;
    z-index: 9;
    transition: all 0.3s ease;
}

.componente-header span.dinamycIcon:hover {
    color: var(--amarillo);
}


/**************************************
*  SITEMAP
**************************************/
.sitemap {
    margin: 0 auto;
    background-color: #f5f5f5;
    padding: 30px 50px;
}

.sitemap ul {
    padding-left: 30px;
}
.sitemap ul ul {
    padding-left: 60px;
}

.sitemap li {
    padding: 0;
}

.sitemap a {
    color: var(--azul-prosoli);
}


/**************************************
*  ¿COMO SUPERARTE?
**************************************/
.blocks-section {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 50px 0px;
}

.blocks {
    width: 90%;
    max-width: 1290px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.block {
    width: 100%;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.16);
    border-radius: 30px;
    margin-bottom: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 40px;
}

@media only screen and (min-width: 992px) {
    .block {
        width: calc(33% - 30px);
        margin: 0px 15px 40px 15px;
    }
}

.block-superate {
    height: 471px;
}

@media only screen and (min-width: 992px) {
    .block-superate {
        height: auto;
    }
}

.block-icon {
    width: 30%;
}

.block-title {
    width: 100%;
    text-align: center;
}

.block-title h3 {
    width: 100%;
    font-size: 25px;
    line-height: 25px;
    color: var(--amarillo);
    padding: 20px 0px;
}

.block-text {
    width: 100%;
    text-align: center;
}

.block-img {
    width: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.block-btn {
    width: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    margin-top: 20px;
}

.block-btn a {
    width: 100%;
    height: 50px;
    background-color: var(--azul-prosoli);
    color: #fff;
    justify-content: center;
    align-items: center;
    transition: all .3s ease-in-out;
    border-radius: 10px;
}

.form-mobile {
    display: flex;
}

@media only screen and (min-width: 992px) {
    .form-mobile {
        display: none;
    }
}

.form-desktop {
    display: none;
}

@media only screen and (min-width: 992px) {
    .form-desktop {
        display: flex;
    }
}

.block-btn a:hover {
    background-color: var(--amarillo);
    color: #000;
}

/**************************************
*  PAGINA 404
**************************************/
.page-404 {
    width: 100%;
    padding: 150px 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.logo-404 {
    margin-bottom: 30px;
}

.page-404 p {
    width: 100%;
    text-align: center;
}

.msg-404 {
    margin-bottom: 20px;
    font-size: 25px;
}

.link-404 {
    color: var(--azul-prosoli);
    font-weight: bold;
    font-size: 20px;
}

.page-404 ul {
    text-align: center;
    list-style: none;
    margin-bottom: 30px;
}

/**************************************
*  ENLACES DE INTERES
**************************************/
.section-enlaces {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 0px;
    background-color: #f5f5f5;
}

.enlaces-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    max-width: 1290px;
}

.enlaces-container .enlaces {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.section-enlaces .enlaces .enlace {
    width: calc((100% / 2) - 20px);
    margin: 5px;
}

@media only screen and (min-width: 992px) {
    .section-enlaces .enlaces .enlace {
        width: calc((100% / 6) - 20px);
    }
}

.enlaces .enlace a img {
    transition: all 0.3s ease;
}

.enlaces .enlace a:hover img {
    transform: scale(1.1);
    transition: all 0.3s ease;
}

/**************************************
*  QUOTES POSTS
**************************************/
blockquote:before {
    content: '\f10d';
}

blockquote:after {
    content: '\f10e';
}

blockquote:before, blockquote:after {
    font-family: "Font Awesome 5 Free"; font-weight: 900;
    font-size: 40px;
    padding: 10px;
} 

blockquote {
    display: flex;
    align-items: center;
    padding: 20px;
    background-color: #f5f5f5;
    font-size: 20px;
}

.btnBackTop {
    width: 60px;
    height: 60px;
    position: fixed;
    right: 20px;
    bottom: 50px;
    background-color: rgba(12, 42, 94);
    border-radius: 100%;
    color: white;
    border: solid 3px white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
	z-index: 999;
}

ul.redesSociales {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
}