/* General ------------------------------------------------------------------ */
/* -------------------------------------------------------------------------- */
/* Tipografías */
@font-face {
    font-family: "ArcaMajora3-Bold";
    src: url("../fonts/ArcaMajora3-Bold.otf");
}
@font-face {
    font-family: "ArcaMajora3-Heavy";
    src: url("../fonts/ArcaMajora3-Heavy.otf");
}
@font-face {
    font-family: "MyriadPro-Regular";
    src: url("../fonts/MyriadPro-Regular.otf");
}
/* Tipografía DegularDisplay */
 .medium {
    font-family: degular-display,sans-serif;
    font-weight: 500;
    font-style: normal;
 }
 .semibold {
    font-family: degular-display,sans-serif;
    font-weight: 600;
    font-style: normal;    
 }
 .bold {
    font-family: degular-display,sans-serif;
    font-weight: 700;
    font-style: normal;
 }
/* Reseteo estilos */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
a {
    color: #fff;
	text-decoration: none;
}
ul {	
    margin-bottom: 0px;
    padding-left: 0px;
}
li {
	list-style: none;
}
button, input, textarea, select, option {
  background: transparent;
  box-shadow: 0px 0px 0px transparent;
  border: 0px solid transparent;
  text-shadow: 0px 0px 0px transparent;
}
button:hover, input:hover, textarea:hover, select:hover, option:hover {
  background: transparent;
  box-shadow: 0px 0px 0px transparent;
  border: 0px solid transparent;
  text-shadow: 0px 0px 0px transparent;
}
button:active, input:active, textarea:active, select:active, option:active {
  outline: none;
  border: none;
}
button:focus, input:focus, textarea:focus, select:focus, option:focus {
  outline: 0;
}
/* General ------------------------------------------------------------------ */
/* -------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}
/* Body --------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
body {
    color: #fff!important;
    background-color: #3B215C!important;
    font-family: degular-display,sans-serif;
    font-weight: 500;
    font-style: normal;
}
/* Scroll */
/* width */
::-webkit-scrollbar { width: 0px; height: 0px; }
/* Track */
::-webkit-scrollbar-track { background: #fff0; } 
/* Handle */
::-webkit-scrollbar-thumb { background: #444; border: solid 4px #000; border-radius: 12px; }
/* Handle on hover */
::-webkit-scrollbar-thumb:hover { background: #888; }
/* End Scroll */
/* Header ------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
header {
    background-color: #fff;
    height: 13vw;
    padding: 1vw 3vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#logo {
    background-color: #fff;
    width: 11vw;
    height: 11vw;
    border-radius: 6vw;
    z-index: 105;
}
#logo a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#logo img {
    min-width: 101%;
}
#btn_menu {
    width: 9vw;
    position: absolute;
    top: 2vw;
    right: 3vw;
    cursor: pointer;
    z-index: 110;
}
#btn_menu img {
    width: 100%;
}
#volver_arriba {
    background-image: url("../img/volver_arriba_2.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 5vw;
    height: 5vw;
    position: fixed;
    right: 3vw;
    bottom: 3vw;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 100%;
    box-shadow: 0px 0px 10px #362B8D;
    z-index: 99;
}
#volver_arriba img {
    width: 100%;
}
#volver_arriba:hover img {
    opacity: 0;
    filter: contrast(1.1);
}
#cont_menu {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 100;
    display: none;
}
#cont_menu nav {
    background-color: #621AFFdd;
    width: 45vw;
    height: 100%;
    padding: 15vw 4vw 4vw 4vw;
    position: absolute;
    right: 0px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-direction: column;
    transition: all 2s;
}
@keyframes desplegar_menu_ani {
    from { right: -45vw; }
    to { right: 0vw; }
}
#cont_menu ul {
    height: 90%;
    padding-bottom: 5vh;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-direction: column;
}
#cont_menu li {
    font-family: "ArcaMajora3-Bold";
    font-size: 4vh;
    text-align: right;
}
#cont_menu li:hover {
    text-decoration: underline;
}
#cont_menu .redes {
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
#cont_menu .redes a {
    height: 5vh;
    margin-left: 1vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
#cont_menu .redes a:hover {
    transform: scale(1.2);
}
#cont_menu .redes img {
    width: auto;
    height: 100%;
}
@media screen and (max-width: 500px) {    
    header {
        height: 26vw;
        padding: 2vw 6vw;
    }
    #logo {
        width: 22vw;
        height: 22vw;
        border-radius: 12vw;
        z-index: 100;
    }
    #btn_menu {
        width: 18vw;
        top: 4vw;
        right: 6vw;
    }
    #volver_arriba {
        width: 15vw;
        height: 15vw;
        right: 6vw;
        bottom: 6vw;
        box-shadow: 0px 0px 20px #362B8D;
    }
    #cont_menu nav {
        width: 80vw;
        padding: 30vw 8vw 8vw 8vw;
    }
    @keyframes desplegar_menu_ani {
        from { right: -80vw; }
        to { right: 0vw; }
    }
    #cont_menu ul {
        height: 90%;
    }
    #cont_menu .redes a {
        height: 7vh;
        margin-left: 2vw;
    }
}
/* Footer ------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
footer {
    background-color: #621AFF;
}
footer div {
    padding: 0vw 0vw 3vw 0vw;
    display: flex;
    align-content: center;
    justify-content: center;
}
footer p {
    font-size: 1.2vw;
    font-weight: 300!important;
    letter-spacing: 0.05vw;
    text-align: center;
}
footer a {
    color: #fff;
    text-decoration: underline;
}
@media screen and (max-width: 500px) {
    footer div {
        padding: 0vw 0vw 6vw 0vw;
    }
    footer p {
        font-size: 2.4vw;
        font-weight: 300!important;
        letter-spacing: 0.1vw;
    }
}
/* Main --------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* General */
main {
    background-color: #fff;
}
section {
    overflow: hidden;
}
section div {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.izquierda, .derecha {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.cont_h2 {
    color: #372459;
    height: 10vw;
}
.cont_h2 h2 {
    color: #372459;
    background-color: #37245922;
    height: 3.8vw;
    margin: 0vw 0vw;
    padding: 1vw 1vw 0vw 1vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "ArcaMajora3-Bold";
    font-size: 4.8vw;
    border-radius: 6vw;
}
@media screen and (max-width: 500px) {
    .izquierda, .derecha {
        width: 100%;
        height: 100%;
    }
    .cont_h2 {
        height: 20vw;
    }
    .cont_h2 h2 {
        height: 7.4vw;
        margin: 0vw 0vw;
        padding: 2vw 2vw 0vw 2vw;
        font-size: 9.6vw;
        border-radius: 12vw;
        transform: scale(0.9);
        white-space: nowrap;
    }
}
/* INICIO */
#inicio {
    width: 100%;
    position: relative;
}
#inicio h1 {
    color: #0000;
    position: absolute;
    z-index: -10;
}
#inicio .cont_inicio {
    width: 100%;
    height: 40vw;
    display: flex;
}
#inicio .izquierda {
    background-color: #3B215C;
    width: 55%;
    padding: 2vw 5vw;
    align-items: center;
    justify-content: flex-end;
}
#inicio .izquierda h2 {
    width: 100%;
    font-family: "ArcaMajora3-Heavy";
    font-size: 4.7vw;
    line-height: 4.7vw;
    z-index: 1;
}
#inicio .izquierda h2 span {
    text-decoration: underline;
}
#inicio .izquierda a {
    color: #3B215C;
    background-color: #DED7FF;
    margin: 3vw 0vw 0vw -2vw;
    padding: 0.3vw 3.5vw 0.5vw 3.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2vw;
    border-radius: 2vw;
    z-index: 1;
}
#inicio .izquierda a:hover {
    color: #DED7FF;
    background-color: #621AFF;
}
#inicio .izquierda img {
    width: auto;
    height: 100%;
    position: absolute;
    right: 0vw;
    bottom: 0vw;
    z-index: 0;
}
#inicio .derecha {
    width: 45%;
}
#inicio .derecha .arriba {
    background-color: #B9A5E3;
    height: 50%;
    padding: 0vw 6vw;
    flex-direction: column;
}
#inicio .derecha .arriba h2 {
    font-family: "ArcaMajora3-Heavy";
    font-size: 3.2vw;
    line-height: 3.2vw;
    text-align: center;
}
#inicio .derecha .arriba a {
    color: #3B215C;
    background-color: #DED7FF;
    margin: 1.5vw 0vw -1vw 0vw;
    padding: 0.3vw 4vw 0.5vw 4vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2vw;
    border-radius: 2vw;
}
#inicio .derecha .arriba a:hover {
    color: #DED7FF;
    background-color: #3B215C;
}
#inicio .derecha .abajo {
    height: 50%;
    overflow: hidden;
}
#inicio .derecha .abajo img {
    width: 100%;
}
@media screen and (max-width: 500px) {
    #inicio .cont_inicio {
        height: auto;
        flex-direction: column;
    }
    #inicio .izquierda {
        width: 100%;
        padding: 8vw 10vw;
        align-items: flex-start;
        overflow: hidden;
    }
    #inicio .izquierda h2 {
        font-size: 8vw;
        line-height: 8vw;
    }
    #inicio .izquierda a {
        margin: 6vw 0vw 0vw 0vw;
        padding: 0.6vw 7vw 1vw 7vw;
        font-size: 4vw;
        border-radius: 4vw;
    }
    #inicio .derecha {
        width: 100%;
        flex-direction: column-reverse;
    }
    #inicio .derecha .arriba {
        height: 50vw;
        padding: 0vw 12vw;
    }
    #inicio .derecha .arriba h2 {
        font-size: 6.4vw;
        line-height: 6.4vw;
    }
    #inicio .derecha .arriba a {
        margin: 3vw 0vw -2vw 0vw;
        padding: 0.6vw 8vw 1vw 8vw;
        font-size: 4vw;
        border-radius: 4vw;
    }
    #inicio .derecha .centro {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #inicio .derecha .centro img {
        width: 100%;
    }
    #inicio .derecha .abajo {
        height: auto;
    }
}
/* QUIÉNES SOMOS */
#quienes_somos {
    width: 100%;
    position: relative;
}
#quienes_somos .cont_quienes_somos {
    height: 46vw;
}
#quienes_somos .izquierda {
    width: 33%;
    overflow: hidden;
}
#quienes_somos .izquierda img {
    width: auto;
    height: 100%;
}
#quienes_somos .derecha {
    width: 67%;
    height: 100%;
}
#quienes_somos .derecha .arriba {
    background-color: #B9A5E3;
    height: 60%;
    padding: 5vw;
}
#quienes_somos .derecha .arriba p {
    color: #372459;
    font-size: 1.9vw;
    line-height: 1.7vw;
}
#quienes_somos .derecha .arriba p span {
    font-weight: bolder;
}
#quienes_somos .derecha .centro {
    display: none;
}
#quienes_somos .derecha .abajo {
    height: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#quienes_somos .nuestros_objetivos {
    width: 25%;
    height: 100%;
    display: flex;
    padding-left: 2vw;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}
#quienes_somos .nuestros_objetivos h3 {
    color: #372459;
    font-size: 2vw;
}
#quienes_somos .nuestros_objetivos img {
    width: 45%;
}
#quienes_somos .derecha .abajo ul {
    width: 75%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#quienes_somos .derecha .abajo li {
    width: 16vw;
    height: 16vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 2vw;
    line-height: 1.7vw;
    border-radius: 100%;
}
#quienes_somos .derecha .abajo li:nth-child(1) {
    background-color: #362B8D;
}
#quienes_somos .derecha .abajo li:nth-child(2) {
    background-color: #805DD6;
}
#quienes_somos .derecha .abajo li:nth-child(3) {
    background-color: #621AFF;
}
#quienes_somos .derecha .abajo li span {
    font-weight: bolder;
}
@media screen and (max-width: 500px) {
    #quienes_somos .cont_quienes_somos {
        height: auto;
    }
    #quienes_somos .izquierda {
        display: none;
    }
    #quienes_somos .derecha {
        width: 100%;
        height: auto;
    }
    #quienes_somos .derecha .arriba {
        height: auto;
        padding: 10vw 5vw;
    }
    #quienes_somos .derecha .arriba p {
        font-size: 3.8vw;
        line-height: 3.4vw;
    }
    #quienes_somos .derecha .centro {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #quienes_somos .derecha .centro img {
        width: 100%;
    }
    #quienes_somos .derecha .abajo {
        height: 50vw;
        padding: 10vw 5vw;
        flex-direction: column;
    }
    #quienes_somos .nuestros_objetivos {
        width: 100%;
        height: auto;
        padding-left: 4vw;
    }
    #quienes_somos .nuestros_objetivos h3 {
        font-size: 4vw;
    }
    #quienes_somos .nuestros_objetivos img {
        width: 15%;
    }
    #quienes_somos .derecha .abajo ul {
        width: 100%;
        height: auto;
        margin-top: 2vw;
    }
    #quienes_somos .derecha .abajo li {
        width: calc(100%/3);
        height: 30vw;
        font-size: 4vw;
        line-height: 3.4vw;
    }
}
/* SALUD MENTAL */
#salud_mental {
    background-color: #fff;
    width: 100%;
    position: relative;
}
#salud_mental .cont_salud_mental {
    height: 46vw;
}
#salud_mental .izquierda {
    width: 39%;
}
#salud_mental .izquierda .arriba {
    background-color: #621AFF;
    height: 45%;
    padding-left: 3vw;
    justify-content: flex-start;
}
#salud_mental .izquierda .arriba h2 {
    font-family: "ArcaMajora3-Bold";
    font-size: 4.4vw;
    line-height: 4.8vw;
}
#mental_txt_arr_2 {
    display: none;
}
#salud_mental .izquierda .arriba h2 span {
    font-family: "MyriadPro-Regular";
}
#salud_mental .izquierda .abajo {
    height: 55%;
    overflow: hidden;
}
#salud_mental .izquierda .abajo img {
    width: auto;
    height: 100%;
}
#salud_mental .izquierda a {
    color: #fff;
    background-color: #621AFF;
    padding: 0.3vw 4vw 0.5vw 4vw;
    position: absolute;
    left: 3vw;
    bottom: 2vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2vw;
    border-radius: 2vw;
}
#salud_mental .izquierda a:hover {
    color: #621AFF;
    background-color: #fff;
}
#salud_mental .derecha {
    width: 61%;
}
#salud_mental .derecha ul {
    width: 100%;
    height: 100%;
}
#salud_mental .derecha li {
    color: #362B8D;
    background-color: #B9A5E3;
    height: calc(100%/9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: degular-display,sans-serif;
    font-size: 2.8vw;
    font-weight: 600;
    font-style: normal;
}
#salud_mental .derecha li:nth-child(2n) {
    background-color: #DED7FF;
}
@media screen and (max-width: 500px) {
    #salud_mental .cont_salud_mental {
        height: auto;
        flex-direction: column;
    }
    #salud_mental .izquierda {
        width: 100%;
    }
    #salud_mental .izquierda .arriba {
        height: auto;
        padding: 10vw 5vw;
    }
    #salud_mental .izquierda .arriba h2 {
        width: 100%;
        font-size: 8vw;
        line-height: 8vw;
    }
    #mental_txt_arr {
        display: none;
    }
    #mental_txt_arr_2 {
        display: block;
        text-align: center;
    }
    #salud_mental .izquierda .abajo {
        height: 45vw;
    }
    #salud_mental .izquierda .abajo img {
        width: 100%;
        height: auto;
    }
    #salud_mental .izquierda a {
        padding: 0.6vw 8vw 1vw 8vw;
        left: auto;
        bottom: 4vw;
        font-size: 4vw;
        border-radius: 4vw;
    }
    #salud_mental .derecha {
        width: 100%;
    }
    #salud_mental .derecha ul {
        width: 100%;
        height: auto;
    }
    #salud_mental .derecha li {
        height: calc(100%/9);
        padding: 1vw 0vw;
        font-size: 5vw;
    }
}
/* ÁREA JURÍDICA */
#area_juridica {
    width: 100%;
    position: relative;
}
#area_juridica .cont_area_juridica {
    height: 46vw;
    flex-direction: column;
}
#area_juridica .arriba {
    background-color: #621AFF;
    height: 28%;
}
#area_juridica .arriba h2 {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "ArcaMajora3-Bold";
    font-size: 3.9vw;
    text-align: center;
}
#area_juridica .abajo {
    height: 72%;
}
#area_juridica .abajo div {
    width: calc(100%/3);
    height: 100%;
}
#area_juridica .abajo .izquierda {
    overflow: hidden;
}
#area_juridica .abajo .izquierda img {
    width: auto;
    height: 100%;
}
#area_juridica .abajo .centro {
    background-color: #362B8D;
    height: 99.9%;
    flex-direction: column;
    font-size: 1.5vw;
    line-height: 1.5vw;
    text-align: center;
    border-radius: 100%;
}
#area_juridica .abajo .centro h3 {
    margin-bottom: 1.5vw;
    font-size: 1.7vw;
    line-height: 1.5vw;
    text-align: center;
}
#area_juridica .abajo .centro p {
    font-size: 1.7vw;
    line-height: 1.5vw;
    text-align: center;
}
#area_juridica .abajo .derecha {
    background-color: #DED7FF;
    padding: 2.8vw;
    justify-content: flex-end;
}
#area_juridica .abajo .derecha p {
    color: #372459;
    font-size: 1.9vw;
    line-height: 1.7vw;
}
#area_juridica .abajo .derecha p span {
    font-weight: bolder;
}
#area_juridica .abajo .derecha a {
    color: #fff;
    background-color: #362B8D;
    width: 100%;
    margin: 5vw 0vw 0vw 0vw;
    padding: 0.3vw 0vw 0.5vw 0vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2vw;
    border-radius: 2vw;
}
#area_juridica .abajo .derecha a:hover {
    color: #362B8D;
    background-color: #B9A5E3;
}
@media screen and (max-width: 500px) {
    #area_juridica .cont_area_juridica {
        height: auto;
    }
    #area_juridica .arriba {
        height: 50vw;
    }
    #area_juridica .arriba h2 {
        padding: 0vw 10vw;
        font-size: 8vw;
    }
    #area_juridica .abajo {
        height: auto;
        flex-wrap: wrap;
    }
    #area_juridica .abajo .izquierda {
        width: 40%;
        height: 70vw;
    }
    #area_juridica .abajo .centro {
        width: 58%;
        height: 58vw;
        margin: 1%;
    }
    #area_juridica .abajo .centro h3 {
        margin-bottom: 3vw;
        font-size: 3.4vw;
        line-height: 3vw;
    }
    #area_juridica .abajo .centro p {
        font-size: 3.4vw;
        line-height: 3vw;
    }
    #area_juridica .abajo .derecha {
        width: 100%;
        padding: 5.6vw;
    }
    #area_juridica .abajo .derecha p {
        font-size: 3.8vw;
        line-height: 3.4vw;
        text-align: center;
    }
    #area_juridica .abajo .derecha a {
        width: 60%;
        margin: 5vw 0vw 0vw 0vw;
        padding: 0.5vw 0vw 1vw 0vw;
        font-size: 4vw;
        border-radius: 4vw;
    }
}
/* FORMACIÓN */
#formacion {
    width: 100%;
    position: relative;
}
#formacion .cont_formacion {
    flex-direction: column;
}
#formacion p {
    color: #362B8D;
    padding: 0vw 6vw;
    font-size: 2.8vw;
    line-height: 2.5vw;
    text-align: center;
}
#formacion p span {
    font-weight: bolder;
}
#formacion ul {
    width: 100%;
    margin-top: 3vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
#formacion li {
    width: 20%;
    height: 20vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: degular-display,sans-serif;
    font-size: 2.8vw;
    font-weight: 700;
    font-style: normal;
    line-height: 2.4vw;
    text-align: center;
    border-radius: 100%;
}
#formacion li:nth-child(1),
#formacion li:nth-child(5) {
    background-color: #621AFF;
}
#formacion li:nth-child(2),
#formacion li:nth-child(4) {
    background-color: #805DD6;
}
#formacion li:nth-child(3) {
    background-color: #362B8D;
}
#formacion a {
    color: #362B8D;
    background-color: #B9A5E3;
    margin: 5vw 0vw 2vw 0vw;
    padding: 0.2vw 4vw 0.6vw 4vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3vw;
    border-radius: 3vw;
}
#formacion a:hover {
    color: #fff;
    background-color: #362B8D;
}
@media screen and (max-width: 500px) {
    #formacion p {
        padding: 0vw 5vw;
        font-size: 5vw;
        line-height: 4.8vw;
    }
    #formacion ul {
        padding: 0vw 2vw;
        margin-top: 20vw;
        flex-wrap: wrap;
    }
    #formacion li {
        width: calc(100%/3);
        height: 32vw;
        margin-top: -4vw;
        font-size: 5.6vw;
        line-height: 4.8vw;
    }
    #formacion a {
        margin: 15vw 0vw 8vw 0vw;
        padding: 0.4vw 8vw 1.2vw 8vw;
        font-size: 6vw;
        border-radius: 6vw;
    }
}
/* LA OLA DBT */
#la_ola_dbt {
    width: 100%;
    position: relative;
}
#la_ola_dbt .cont_la_ola_dbt {
    height: 45vw;
}
#la_ola_dbt .izquierda {
    width: 66%;
}
#la_ola_dbt .izquierda .arriba {
    background-color: #372459;
    height: 30%;
}
#la_ola_dbt .izquierda .arriba p {
    padding: 0vw 9vw;
    font-size: 2vw;
    font-weight: 400;
    line-height: 1.8vw;
}
#la_ola_dbt .izquierda .arriba p span {
    font-weight: bolder;
}
#la_ola_dbt .izquierda .centro {
    display: none;
}
#la_ola_dbt .izquierda .abajo {
    height: 70%;
    justify-content: flex-start;
    flex-direction: column;
}
#la_ola_dbt .nuestro_programa {
    padding: 3vw 0vw 0vw 4vw;
    align-items: flex-start;
    flex-direction: column;
}
#la_ola_dbt .nuestro_programa h3 {
    color: #372459;
    font-size: 2vw;
}
#la_ola_dbt .nuestro_programa img {
    width: 6vw;
    margin-top: 1vw;
}
#la_ola_dbt .izquierda .abajo ul {
    padding: 1vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
#la_ola_dbt .izquierda .abajo li {
    width: 25%;
    height: 16vw;
    padding: 0vw 2vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: degular-display,sans-serif;
    font-size: 2vw;
    font-weight: 700;
    font-style: normal;
    line-height: 1.7vw;
    text-align: center;
    border-radius: 100%;
}
#la_ola_dbt .izquierda .abajo li:nth-child(1) {
    background-color: #362B8D;
}
#la_ola_dbt .izquierda .abajo li:nth-child(2) {
    background-color: #805DD6;
}
#la_ola_dbt .izquierda .abajo li:nth-child(3) {
    background-color: #621AFF;
}
#la_ola_dbt .izquierda .abajo li:nth-child(4) {
    background-color: #372459;
}
#la_ola_dbt .izquierda .abajo a {
    color: #fff;
    background-color: #362B8D;
    margin: 1vw 0vw 0vw 0vw;
    padding: 0.2vw 3vw 0.6vw 3vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2vw;
    border-radius: 2vw;
}
#la_ola_dbt .izquierda .abajo a:hover {
    color: #362B8D;
    background-color: #B9A5E3;
}
#la_ola_dbt .derecha {
    background-color: #3A2793;
    width: 34%;
    position: relative;
    overflow: hidden;
}
#la_ola_dbt .derecha img {
    width: 100%;
    height: auto;
}
@media screen and (max-width: 500px) {
    #la_ola_dbt .cont_la_ola_dbt {
        height: auto;
        flex-direction: column;
    }
    #la_ola_dbt .izquierda {
        width: 100%;
    }
    #la_ola_dbt .izquierda .arriba {
        height: 30vw;
    }
    #la_ola_dbt .izquierda .arriba p {
        padding: 0vw 2vw;
        font-size: 4vw;
        line-height: 3.6vw;
        text-align: center;
    }
    #la_ola_dbt .izquierda .centro {
        background-color: #3A2793;
        width: 100%;
        height: 70vw;
        position: relative;
        display: flex;
        overflow: hidden;
    }
    #la_ola_dbt .izquierda .centro div {
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #la_ola_dbt .izquierda .centro img {
        width: 100%;
        height: auto;
    }
    #la_ola_dbt .izquierda .abajo {
        height: 80vw;
    }
    #la_ola_dbt .nuestro_programa {
        padding: 6vw 0vw 0vw 8vw;
    }
    #la_ola_dbt .nuestro_programa h3 {
        font-size: 4vw;
    }
    #la_ola_dbt .nuestro_programa img {
        width: 12vw;
        margin-top: 2vw;
    }
    #la_ola_dbt .izquierda .abajo {
        height: auto;
        align-items: flex-start;
    }
    #la_ola_dbt .izquierda .abajo ul {
        width: 65%;
        padding: 4vw;
        flex-wrap: wrap;
    }
    #la_ola_dbt .izquierda .abajo li {
        width: 50%;
        height: 28vw;
        padding: 0vw 4vw;
        font-size: 3.8vw;
        line-height: 3.4vw;
    }
    #la_ola_dbt .izquierda .abajo a {
        margin: 0vw;
        padding: 0.4vw 3vw 1.2vw 3vw;
        position: absolute;
        top: 44vw;
        right: 2vw;
        font-size: 3.5vw;
        border-radius: 4vw;
    }
    #la_ola_dbt .derecha {
        display: none;
    }
}
/* LA OLA CANNÁBICA */
#la_ola_cannabica {
    width: 100%;
    position: relative;
}
#la_ola_cannabica .cont_la_ola_cannabica {
    height: 46vw;
}
#la_ola_cannabica .izquierda {
    background-color: #362B8D;
    width: 42%;
    overflow: hidden;
}
#la_ola_cannabica .izquierda img {
    width: auto;
    height: 100%;
}
#la_ola_cannabica .derecha {
    width: 58%;
}
#la_ola_cannabica .derecha .arriba {
    color: #362B8D;
    background-color: #DED7FF;
    height: 22%;
}
#la_ola_cannabica .derecha .arriba .izquierda {
    display: none;
}
#la_ola_cannabica .derecha .arriba p {
    padding: 0vw 10vw 0vw 3vw;
    font-size: 1.9vw;
    line-height: 1.7vw;
}
#la_ola_cannabica .derecha .arriba p span {
    font-weight: bolder;
}
#la_ola_cannabica .derecha .centro {
    color: #362B8D;
    background-color: #B9A5E3;
    height: 56%;
}
#la_ola_cannabica .derecha .centro p {
    padding: 0vw 8vw 0vw 3vw;
    font-size: 2.8vw;
    line-height: 2.4vw;
}
#la_ola_cannabica .derecha .abajo {
    height: 22%;
}
#la_ola_cannabica .derecha .abajo a {
    color: #fff;
    background-color: #362B8D;
    margin: 0vw;
    padding: 0.2vw 3vw 0.6vw 3vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8vw;
    border-radius: 3vw;
}
#la_ola_cannabica .derecha .abajo a:hover {
    color: #362B8D;
    background-color: #ccc1fc;
}
@media screen and (max-width: 500px) {
    #la_ola_cannabica .cont_la_ola_cannabica {
        height: auto;
    }
    #la_ola_cannabica .izquierda {
        display: none;
    }
    #la_ola_cannabica .derecha {
        width: 100%;
    }
    #la_ola_cannabica .derecha .arriba {
        height: 70vw;
    }
    #la_ola_cannabica .derecha .arriba .izquierda {
        background-color: #362B8D;
        width: 55%;
        display: flex;
        overflow: hidden;
    }
    #la_ola_cannabica .derecha .arriba .izquierda img {
        width: auto;
        height: 100%;
    }
    #la_ola_cannabica .derecha .arriba p {
        width: 45%;
        padding: 6vw;
        font-size: 5.8vw;
        line-height: 5vw;
    }
    #la_ola_cannabica .derecha .centro {
        height: 60vw;
    }
    #la_ola_cannabica .derecha .centro p {
        padding: 5vw;
        font-size: 5.4vw;
        line-height: 5vw;
        text-align: center;
    }
    #la_ola_cannabica .derecha .abajo {
        height: 30vw;
    }
    #la_ola_cannabica .derecha .abajo a {
        margin: 0vw;
        padding: 0.4vw 6vw 1.2vw 6vw;
        font-size: 5.6vw;
        border-radius: 6vw;
    }
}
/* CONTACTO */
#contacto {
    background-color: #621AFF;
    width: 100%;
    position: relative;
}
#contacto .cont_contacto {
    padding: 5vw 5vw 0vw 5vw;
}
#contacto .izquierda {
    width: 20%;
}
#contacto .izquierda img {
    width: 90%;
}
#contacto .centro {
    width: 70%;
}
#contacto .centro p {
    font-size: 2.8vw;
    line-height: 2.6vw;
}
#contacto .centro p:nth-child(2) {
    display: none;
}
#contacto .derecha {
    width: 10%;
}
#contacto .derecha .redes {
    margin-left: -3vw;
    flex-direction: column;
}
#contacto .derecha .redes a {
    display: flex;
    align-items: center;
    justify-content: center;
}
#contacto .derecha .redes a:nth-child(2) {
    margin: 2.4vw 0vw;
}
#contacto .derecha .redes a:hover {
    transform: scale(1.2);
}
#contacto .derecha .redes a img {
    width: 42%;
}
@media screen and (max-width: 500px) {
    #contacto .cont_contacto {
        padding: 5vw 5vw 0vw 5vw;
        flex-wrap: wrap;
    }
    #contacto .izquierda {
        width: 50%;
    }
    #contacto .izquierda img {
        width: 90%;
    }
    #contacto .centro {
        width: 50%;
    }
    #contacto .centro p:nth-child(1) {
        display: none;
    }
    #contacto .centro p:nth-child(2) {
        display: flex;
    }
    #contacto .centro p {
        padding-left: 5vw;
        font-size: 4.6vw;
        line-height: 4.4vw;
    }
    #contacto .derecha {
        width: 100%;
    }
    #contacto .derecha .redes {
        margin-left: 0vw;
        flex-direction: row;
    }
    #contacto .derecha .redes a:nth-child(2) {
        margin: 0vw;
    }
    #contacto .derecha .redes a {
        height: 30vw;
        margin: 0vw 10vw;
    }
    #contacto .derecha .redes a img {
        width: 12vw;
    }
}