:root {
    --bg-color: #15284c;
}

* {
    padding: 0;
    box-sizing: border-box;
    font-size: 14px;
    margin: 0 auto;
    font-family: Roboto, sans-serif;
}

button {
    transition: 0.3s;
}

body,
html {
    left: 0;
    max-width: 2048px;
}

body {
    position: relative;
    transition: left 0.5s ease;
}

a:link {
    text-decoration: none;
    color: inherit;
}

a:visited {
    color: inherit;
}

div,
button {
    border-radius: 0.2rem;
    font-size: 1.2rem;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.8rem;
}

#innerHeader p b {
    font-size: 20px;
}
#innerHeader p i {
    font-size: 20px;
}
#innerHeader p a {
    font-size: 20px;
}

/*
*
* HEADER
*
*/

header {
    width: 100%;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
}

#innerHeader {
    display: inline-block;
    padding: 3.5rem 10.8% 0.5rem 0.5rem;
    background-color: white;
    text-align: right;
    border-radius: 0;
    height: 9.4rem;
}

#innerHeader i {
    font-size: 1.2rem;
    margin-right: 1.5rem;
    margin-left: 1rem;
}

#innerHeader i:first-child {
    margin-left: 0.5rem;
}

#innerHeader a:last-child i {
    margin-right: 0;
}

#innerHeader span {
    padding: 0.2rem;
    font-size: 1.3rem;
    font-weight: bold;
}

#outerNavBar {
    width: 100%;
    z-index: 10;
    background-color: white;
}

#outerNavBar img {
    display: inline-block;
    width: 10%;
    vertical-align: middle;
    margin: 1rem 12% 1rem 13%;
}

#outerNavBar #navBar .icon-iconos-18 {
    font-size: 2rem;
    margin-top: 0;
    margin-right: 0;
}
.wrapper {
    position: relative;
    border-radius: 0;
    background-color: var(--bg-color);
    height: 3.2rem;
}

#navBar {
    display: inline-flex;
    margin-left: 13%;
    color: white;
    height: 100%;
}

#navBar a {
    width: fit-content;
}

.spanAula {
    cursor: pointer;
    float: right;
    color: white;
    display: inline-block;
    margin-right: 13%;
}

.spanAula:hover span {
    background-color: white;
    color: var(--bg-color);
    font-weight: bold;
}

.spanAula span {
    font-weight: bold;
    border: 2px solid white;
    border-radius: 2rem;
    width: 8.6rem;
    display: inline-block;
    padding: 0.3rem 0.3rem 0.3rem 1.5rem;
    margin-top: 5%;
}

#navBar span {
    white-space: nowrap;
    display: inline-block;
    height: 100%;
    width: auto;
    cursor: pointer;
    padding: 0.8rem 1rem 0.8rem 1rem;
    font-size: 1.2rem;
    position: relative;
    z-index: 100;
}

#navBar span:hover {
    color: white;
    background-color: rgb(37, 73, 137);
    z-index: 101;
}

#navBar span::after {
    display: block;
    content: attr(title);
    font-weight: bold;
    font-size: 1.2rem;
    padding: 0.8rem;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

#navBar i {
    vertical-align: middle;
    transition: 0.5s ease-in-out;
}

#navBar span .icon-iconos-19:before {
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

#lateralBar .selectedItem {
    color: rgb(37, 73, 137);
}

#navBar .selectedItem {
    background-color: rgb(37, 73, 137);
}

#lateralBar {
    position: fixed;
    border-radius: 0;
    height: 100%;
    width: 25rem;
    left: -100%;
    white-space: nowrap;
    top: 0;
    background-color: white;
    color: black;
    text-align: left;
    z-index: 10000;
    transition: 0.5s ease;
}

#lateralBar a {
    font-size: 1.2rem;
}

#lateralBar #closeButton {
    position: absolute;
    right: 0;
    top: -2rem;
}

#lateralBar #closeButton i {
    font-size: 2rem;
}

#index {
    position: relative;
}

#lateralBar div {
    margin: 2rem 2rem 2rem 2rem;
    transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    font-size: 1.5rem;
}
#lateralBar a {
    font-size: 1.5rem;
}
#lateralBar div .icon-iconos-19:before {
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

#lateralBar .down .icon-iconos-19:before {
    transition: 0.5s;
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

#lateralBar i {
    vertical-align: middle;
    transition: 0.5s;
}

#lateralBar .floatingBox {
    display: none;
    position: static;
    width: 90%;
    min-width: auto;
    border-radius: 0 0 0 0;
    margin-left: 5%;
    background-color: transparent;
    box-shadow: none;
    border-left: none;
}

#lateralBar .floatingBox div {
    padding: 0 0;
    margin: 2rem 0 2rem 8%;
    border-radius: 0;
    text-align: left;
    font-size: 3vw;
}

.floatingBox {
    position: absolute;
    z-index: 3;
    border-radius: 0;
    color: black;
    left: 0;
    margin-top: 0.6rem;
    width: max-content;
    background-color: white;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
    font-size: 1.2rem;
    min-width: 100%;
    text-align: center;
    transition: 0.5s;
    max-height: 0;
    cursor: default;
    pointer-events: none;
}

#navBar .floatingBox div {
    opacity: 0;
    transition: 0.5s ease;
}

#lateralBar .floatingBox {
    transition: 0.5s ease-in;
    max-height: 250px;
    pointer-events: all;
}

#navBar span:hover .floatingBox {
    max-height: 500px;
    z-index: 4;
    pointer-events: all;
    cursor: pointer;
}

#navBar span:hover .floatingBox div {
    opacity: 1;
}

.sub_floatingBox {
    border-radius: 0;
}

.floatingBox div {
    border-bottom: 4px solid white;
    padding: 1.4rem;
    font-weight: normal;
    font-size: 1.2rem;
    transition: 0.3s;
}

.floatingBox div:hover {
    border-bottom: 4px solid rgb(37, 73, 137);
    border-radius: 0;
}

.line {
    background-color: #adadad;
    border: 0;
    width: 100%;
}

.sub_floatingBox {
    position: absolute;
    left: 100%;
    width: 12rem;
    background-color: white;
    top: auto;
    opacity: 0;
    margin-top: -2.85rem;
    color: black;
    font-size: 1.2rem;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
}

.floatingBox .sub_floatingBox {
    padding: 0;
}

.floatingBox:hover .sub_floatingBox {
    opacity: 1;
}

.floatingBox div:hover {
    color: var(--bg-color);
}

.floatingBox .sub_floatingBox:hover div {
    color: black;
}

.floatingBox .sub_floatingBox div:hover {
    color: var(--bg-color);
}

#rrss {
    padding: 0.8rem;
    width: 39%;
    display: inline-block;
}

/*
*
* HEADER FIN
*
*/

/*
*
* COOKIES
*
*/

#cookies {
    position: -webkit-sticky; /* Safari */
    position: fixed;
    width: 100%;
    bottom: 0;
    text-align: center;
    min-height: 2.5rem;
    padding: 1rem;
    border-radius: 0;
    background-color: rgba(0, 0, 0, 0.85);
    color: #ffffff;
    z-index: 900000;
}

#cookies_inner {
    padding: 1rem 0;
    width: 95%;
}

.cookies_button,
.cookies_deny {
    margin: 0 1rem 0 0;
    cursor: pointer;
    font-weight: bold;
}

.cookies_button,
.cookies_button a {
    color: var(--bg-color);
}

.cookies_button:hover {
    background-color: var(--bg-color);
    color: white;
}

.cookies_div {
    border-radius: 0;
    margin-top: 1rem;
    font-size: 1.2rem;
    width: 100%;
}

.cookies_button {
    background-color: white;
    padding: 0.5rem;
    border-radius: 0.2rem;
}

#cookies_inner p {
    width: 60rem;
    max-width: 100%;
}

#cookies_inner p a {
    color: rgb(37, 73, 137);
}

/*
*
* COOKIES
*
*/

/*
*
* TRANSPARENCY
*
*/
@media screen and (min-width: 769px) {
    .adjustTransparency {
        width: 70% !important;
    }
}

/* Cards del portal de transparencia */
.adjustTransparency .card {
    box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.adjustTransparency .card:hover {
    box-shadow: 0 0 15px rgba(21, 40, 75, 0.8);
    transform: translateY(-2px);
}

/* Neutralizar cambios de color en el texto/enlaces internos del card */
.adjustTransparency .card .card-text,
.adjustTransparency .card .card-text:hover,
.adjustTransparency .card .card-text:focus {
    color: inherit;
    text-decoration: none;
}

/*
*
* FIN TRANSPARENCY
*
*/

/*
*
* FRONTIER
*
*/

#frontier {
    transition: 0.5s ease-in;
}

#frontier p,
#cursoFrontier p {
    font-size: 1.8rem;
    color: var(--bg-color);
}

#cursoFrontier p:first-child {
    font-weight: bold;
    z-index: 1;
}

#cursoFrontier #smallText {
    font-size: 2.4rem;
}

#cursoFrontier p:nth-child(2),
#fichaFrontier p:nth-child(2) {
    font-size: 3rem;
    font-weight: lighter;
    z-index: 1;
}

#cursoFrontier,
#fichaFrontier {
    height: 36rem;
    position: relative;
    overflow: hidden;
    transition: 0.5s;
    border-radius: 0;
    width: 100%;
    margin-top: 7rem;
}

#carouselWrapper {
    position: absolute;
    top: 12%;
    z-index: 5;
    left: 13%;
    width: 40%;
    height: 30rem;
    overflow: hidden;
}

#cursoFrontier .imgCurso {
    animation-name: frontierAnimation;
    animation-duration: 8s;
}

@keyframes frontierAnimation {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

#oddContainer {
    margin-top: 4rem;
}

#frontier button,
#cursoFrontier button,
#textoAulas button,
#fichaFrontier button {
    background-color: var(--bg-color);
    border: transparent;
    font-size: 1.5rem;
    padding: 1rem;
    margin-top: 1.5rem;
    border-radius: 0.2rem;
    cursor: pointer;
    color: white;
}

#cursoFrontier button,
#fichaFrontier button {
    background-color: white;
    color: var(--bg-color);
    position: absolute;
    z-index: 1;
    top: 22rem;
    right: 1.5rem;
    border-radius: 0.3rem;
    font-weight: bold;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

.salasBox #descCurso p:nth-child(2) {
    font-size: 1.5rem;
    margin-top: 1rem;
}

.salasBox #descCurso {
    height: 20rem;
}

.salasBox #descCurso button {
    width: fit-content;
    padding: 1rem 1.5rem;
    left: auto;
    right: 2rem;
    top: 16.5rem;
}

.salasBox #aulasImg {
    animation: none;
}

#descCurso {
    z-index: 5;
    height: 25rem;
    text-align: left;
    background-color: rgb(37, 73, 137);
    border-radius: 0.5rem;
    position: absolute;
    top: 10%;
    left: 13%;
    width: 40%;
}

#descCurso::after {
    display: block;
    position: absolute;
    z-index: 0;
    background-image: linear-gradient(
        to right,
        rgba(21, 40, 76, 1),
        rgba(21, 40, 76, 0)
    );
    top: 0;
    height: 100%;
    width: 100%;
    content: "";
    border-radius: 0.5rem;
}

#descCurso p {
    color: white;
    position: relative;
    top: 10%;
    left: 10%;
    font-size: 3.3rem;
    white-space: pre-wrap;
    width: 65%;
    margin-left: initial;
}

#cursoFrontier img {
    display: inline-block;
    object-fit: cover;
    width: 100%;
    height: 35rem;
}

#cursoFrontier #aulasImg {
    animation-name: none;
}

.imgCurso {
    overflow: hidden;
    width: 40%;
    margin-right: 13%;
    float: right;
}

.imgCurso img {
    width: 100%;
    height: 30rem;
    object-fit: cover;
}

#imgModif .imgCurso img {
    height: 20rem;
}

/*
*
* FRONTIER FIN
*
*/

/*
*
* ALQUILER AULAS
*
*/

.middleBlock {
    margin: 8rem 0 4rem 0;
    width: 74%;
    position: relative;
}

.middleBlock img {
    width: 60% !important;
    height: 35rem;
}

.middleBlock div {
    position: absolute;
    right: 0;
    top: 4rem;
    width: 45%;
    background-color: rgb(37, 73, 137);
    border-radius: 0.5rem;
    display: inline-block;
    padding: 2.5rem;
}

.middleBlock p {
    position: relative;
    font-size: 1.5rem;
    font-weight: lighter;
    color: white;
    vertical-align: top;
    z-index: 2;
}

.middleBlock div:after {
    left: 0;
    display: block;
    position: absolute;
    z-index: 0;
    background-image: linear-gradient(
        to right,
        rgba(21, 40, 76, 1),
        rgba(21, 40, 76, 0)
    );
    top: 0;
    height: 100%;
    width: 100%;
    content: "";
    border-radius: 0.5rem;
}

.classrooms {
    padding: 1rem 1rem 1rem calc(10% - 0.4rem);
}

.classrooms h1 {
    margin: 2.5rem 4% 0 0;
    font-size: 1.4rem;
}

.classroom {
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
    padding: 0.4rem;
    display: inline-block;
    width: 40%;
    margin: 2rem 4% 2rem 0;
}

.classroom img {
    object-fit: scale-down;
    width: 56%;
    height: 20rem;
    display: inline-block;
}

.classroom div {
    width: 40%;
    margin-left: 2%;
    vertical-align: top;
    display: inline-block;
}

.classroom div p {
    margin-top: 2rem;
}

.classroom div p:first-child {
    margin: 0 0 2rem 1rem;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--bg-color);
}

.classroom div span {
    display: block;
    margin-bottom: 2rem;
}

.classroom div i {
    color: var(--bg-color);
    font-size: 2rem;
    margin: 1rem;
}

.classroom div span i {
    color: var(--bg-color);
    font-size: 1.8rem;
    margin-right: 0.3rem;
}

.classroom {
    width: 45%;
    height: 20rem;
    overflow: hidden;
    margin: 2rem 1% 2rem 0;
}

.classroom img {
    height: 100%;
}

.classroom div {
    text-overflow: ellipsis;
}

.classroom div i {
    margin: 0.5rem;
}

.classroom div p:first-child {
    margin: 1rem 0 1.5rem 1rem;
}

.classroom div span {
    margin-bottom: 1.5rem;
}

.classroom div p {
    margin-top: 1.5rem;
    text-overflow: ellipsis;
}

/*
*
* ALQUILER AULAS FIN
*
*/

/*
*
* CURSOS
*
*/

#cursos,
.cursosBox {
    padding: 5rem 0 5rem 0;
    margin-left: 13%;
    width: 74%;
}

#colaboradores {
    border-radius: 0;
    background-color: var(--bg-color);
    padding: 3rem 0 3rem 6rem;
    width: 100%;
}

.cursosBox {
    padding: 5rem 0 0 0;
    margin-bottom: 5rem;
}

.cajaInvisible:before {
    display: block;
    content: " ";
    margin-top: -8rem;
    height: 8rem;
    visibility: hidden;
}

#cursos h2,
.cursosBox h2 {
    font-size: 2rem;
}

.cursosBox h1 {
    color: var(--bg-color);
    text-align: center;
    margin-bottom: 3rem;
}

.cursosBox h2 {
    font-size: 1.8rem;
    color: #adadad;
}

#colaboradores h2 {
    font-size: 1.3rem;
    color: white;
    font-weight: 600;
}

#cursosCarousel,
.cursosInner {
    margin: 2rem 0 0 0;
}

#innerColaboradores {
    margin: 2rem 0 2rem 0;
}

#cursosCarousel {
    display: grid;
    grid-template-columns: 32% 32% 32%;
    grid-gap: 2rem;
}

#cursos #cursosCarousel {
    height: 28rem;
}

.cursosInner .blueBox {
    height: 42rem;
    margin: 2rem 0 0 0;
    width: 100%;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

.cursosInner .blueBox p {
    padding: 2rem;
    line-height: 1.3;
    color: white;
}

.cursosInner .blueBox a {
    font-size: 1.5rem;
    color: #adadad;
}

.cursosInner .blueBox a:hover {
    text-decoration: underline;
}

.cursoEffect {
    display: inline-block;
    position: relative;
    cursor: pointer;
    margin-right: 1%;
    height: 42rem;
    margin-left: 0;
    overflow: hidden;
    width: 33.5%;
    margin-top: 0.5rem;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
    transition: 1s;
}

.cursoEffect::after {
    transition: 1s;
    pointer-events: none;
    display: block;
    position: absolute;
    z-index: 0;
    background-image: linear-gradient(
        to top,
        rgba(21, 40, 76, 1),
        rgba(21, 40, 76, 0)
    );
    top: 0;
    height: 100%;
    width: 100%;
    content: "";
}

.cursosInner .invisibleBox,
#cursosCarousel .invisibleBox {
    box-shadow: none;
    opacity: 0;
    pointer-events: none;
}

#cursosCarousel .cursoEffect,
.cursosInner .cursoEffect {
    width: 100%;
    margin-right: 2rem;
    margin-top: 2rem;
}

.cursosInner {
    display: grid;
    grid-template-columns: 32% 32% 32%;
    grid-gap: 2rem;
}

.cursosInner .lineCursos {
    display: flex;
}

.lineNews .cursoEffect {
    margin-right: 2rem;
    width: 80%;
}

#cursosCarousel .cursoEffect:last-child,
#cursos .cursoEffect:last-child,
.cursosInner .cursoEffect:last-child {
    margin-right: 0;
}

.cursoEffect img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 0.2rem;
    transition: 0.5s ease-in-out;
}

.countDownInfo {
    color: white;
    z-index: 5;
    pointer-events: none;
    font-weight: bold;
    text-align: center;
    background-color: rgba(21, 40, 76, 1);
    height: 100%;
    width: 100%;
    display: flex;
    padding: 2rem;
    align-items: center;
    justify-content: center;
}

.countDownInfo p {
    pointer-events: none;
    overflow: hidden;
    padding: 0 2rem;
    font-size: 1.2rem;
    margin-top: 1rem;
    font-weight: lighter;
    max-height: 8rem;
    line-height: 2rem;
}

.countDownInfo > div {
    margin: 0 auto;
    width: 100%;
}

#cursos .countDownInfo h2 {
    font-size: 1.2rem;
}

.countDownInfo button {
    font-weight: bold;
    pointer-events: none;
    font-size: 1.2rem;
    margin-top: 2rem;
    padding: 1rem;
    border: 2px solid white;
    background-color: transparent;
    color: white;
}

.cursoEffect:hover button {
    pointer-events: all;
}

.countDownInfo button:hover {
    background-color: white;
    color: var(--bg-color);
    cursor: pointer;
}

.overBox {
    position: absolute;
    bottom: 0;
    z-index: 3;
    padding: 1.5rem;
    color: var(--bg-color);
    font-weight: bold;
    border-radius: 0 0 0.2rem 0.2rem;
    width: 100%;
    border-top: 0;
    transition: 1s;
}

.overBox p {
    font-size: 1.4rem;
    width: 100%;
    max-width: 100%;
    padding-left: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: lighter;
    color: white;
}

.overBox p:first-child {
    font-weight: bold;
}

.overBox div {
    margin-top: 0.5rem;
    display: inline-flex;
    width: 100%;
}

.overBox i {
    font-size: 2.5rem;
    margin-right: 0.8rem;
    vertical-align: middle;
    color: white;
}

.overBox span {
    margin-left: 0;
    font-size: 1.1rem;
    color: white;
}

.cursoEffect:hover .overBox {
    bottom: 100%;
}

.cursoEffect:hover:after {
    top: -100%;
}

.cursoEffect .countDownInfo {
    height: 100%;
    position: absolute;
    transform-origin: top;
    top: 100%;
    left: 0;
    width: 100%;
    overflow: hidden;
    transition: 1s;
}

.cursoEffect:hover .countDownInfo {
    top: 0;
    pointer-events: all;
}

#innerColaboradores {
    height: 6rem;
}

#colaboradores img {
    height: 100%;
    margin-right: 3%;
}

.blueBold {
    font-weight: bold;
    color: var(--bg-color);
}

/*
*
* CURSOS FIN
*
*/

/*
*
* FICHA CURSO
*
*/

.imgCursoFull {
    width: 100%;
    height: 100%;
}

.preForm {
    float: right;
    color: var(--bg-color);
    background-color: white;
}

#cursoFrontierFull {
    height: 30rem;
    position: relative;
    overflow: hidden;
    border-radius: 0;
    transition: 0.5s;
}

#cursoFrontierFull img {
    object-fit: cover;
    width: 100%;
    height: 30rem;
}

#descCursoFull {
    display: block;
    background-color: var(--bg-color);
    color: white;
    width: 100%;
    z-index: 2;
    transition: 0.5s ease-in;
    border-radius: 0;
}

.scriptWarning {
    width: 100vw;
    height: 100vh;
    background-color: #15284c;
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    display: flex;
    justify-items: center;
    align-items: center;
}

.scriptWarning a {
    color: #adadad;
}

.scriptWarning p,
.scriptWarning a {
    font-size: 1.8rem;
}

#cajaPreins {
    position: absolute;
    border-radius: 0;
    padding-left: 2rem;
    border-left: 5px solid var(--bg-color);
    background-color: rgba(255, 255, 255, 0.5);
    margin-top: 4rem;
    right: 10%;
    z-index: 1;
}

#cajaPreins button {
    margin-top: 0;
    margin-right: 10%;
    background-color: var(--bg-color);
    color: white;
    border: 0;
    padding: 1rem;
    font-size: 1.5rem;
    cursor: pointer;
}

#cajaPreins button:hover,
#descCurso button:hover,
#shortCutArrow:hover {
    background-color: rgb(37, 73, 137);
    color: white;
}

#cajaPreins i {
    font-size: 3rem;
    color: var(--bg-color);
    vertical-align: middle;
    margin-right: 0.5rem;
}

#cajaPreins div {
    display: grid;
    grid-template-columns: 3.5rem auto;
    margin-bottom: 2rem;
    font-size: 1.2rem;
}

#cajaPreins div i,
#cajaPreins div p {
    margin: 0;
}

#cajaPreins div b {
    color: var(--bg-color);
    font-size: 0.9rem;
}

#cajaPreins div:nth-child(2) i {
    vertical-align: middle;
}

#cajaPreins div:nth-child(2) p {
    line-height: 1.2;
    font-size: 1.2rem;
}

#cajaPreins div:nth-child(2) .gridP {
    display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: 0.5rem;
    text-align: left;
}

#cajaPreins div:nth-child(2) .gridP * {
    margin-left: 0;
}

#descCursoFull p {
    color: white;
    padding: 1rem 0.6rem 1rem 10%;
    font-size: 2rem;
}

#descCursoFull b {
    font-size: 2rem;
    margin-right: 1rem;
}

#navCurso {
    padding: 1rem 0 1rem 10%;
    background-color: white;
    box-shadow: 0 0 60px -6px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    width: 100%;
    z-index: 2;
}

#navCurso span {
    margin-right: 4rem;
    font-size: 1.2rem;
}

#navCurso span:hover {
    color: var(--bg-color);
    cursor: pointer;
}
#fichaFrontier #descCurso p {
    z-index: 1;
    font-size: 3rem;
    width: 80%;
}

#fichaFrontier #descCurso p:first-child {
    font-weight: bold;
}

#fichaFrontier #descCurso a[title]:hover {
    text-transform: lowercase;
}

#fichaFrontier button {
    top: 16.5rem;
}
#fichaFrontier .detailBox {
    color: white;
    z-index: 5;
    position: relative;
    top: 15%;
    margin: 4vh 0 4vh 0;
    left: 10%;
    display: inline-grid;
    grid-template-columns: auto auto;
    grid-gap: 0.8rem;
}
#fichaFrontier .detailBox div {
    margin: 0;
    font-size: 1.5rem;
}
#fichaFrontier .detailBox div i {
    margin-right: 0.5rem;
    font-size: 2rem;
}
#fichaFrontier #descCurso,
#fichaFrontier #descCurso:after {
    height: 20rem;
}

.fichaDiv {
    width: 74%;
    margin-left: 13%;
    margin-top: 5rem;
    border-radius: 0;
}

.fichaDiv h2 {
    color: var(--bg-color);
    text-align: center;
    font-size: 2rem;
    margin-top: 0;
}

.fichaDiv p,
.fichaDiv ul {
    margin-top: 2rem;
    font-size: 1.2rem;
}

.fichaDiv ul li ul {
    margin-top: 1rem;
}

.fichaDiv > ul {
    list-style-type: none;
    position: relative;
    width: 70%;
}

.fichaDiv ul {
    list-style-type: none;
}

.fichaDiv > ul > li > b {
    padding: 1rem;
}

.fichaDiv > ul > li > .horasModulo {
    margin-right: 1rem;
}

.fichaDiv li {
    background-color: var(--bg-color);
    padding: 1rem;
    border-radius: 0.2rem;
    margin-bottom: 0.5rem;
    color: white;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

.fichaDiv li ul li:last-child {
    margin-bottom: 0;
}

.fichaDiv .subMod {
    color: var(--bg-color);
    background-color: white;
}

.fichaDiv #salidas {
    margin-top: 2rem;
    display: grid;
    width: 70%;
    grid-template-columns: 45% 45%;
    grid-column-gap: 5%;
    grid-row-gap: 1rem;
}

.fichaDiv #salidas li {
    list-style-type: none;
    background-color: var(--bg-color);
    color: white;
    border: 0.5rem;
    padding: 1rem auto;
    text-align: center;
    width: 100%;
}

.square {
    width: 0.8rem;
    vertical-align: middle;
    margin-right: 0.5rem;
}

.fichaDiv #salidas li::before {
    color: var(--bg-color);
}

.horasModulo {
    float: right;
    text-align: right;
    font-weight: bold;
    position: relative;
}

.horasModulo:before {
    content: "";
    width: 0;
    height: 90%;
    border: 1px solid var(--bg-color);
    position: absolute;
    left: -1.5rem;
}

.fichaDiv > ul > li > .horasModulo:before {
    border: 1px solid white;
}

#total {
    font-weight: bold;
    color: white;
    background-color: var(--bg-color);
    margin-left: calc(100% - 6.5rem);
}

#lineaModulo {
    display: none;
    width: 1px;
    height: 100%;
    background-color: var(--bg-color);
    top: 0;
    position: absolute;
    right: 3rem;
}

#requirements #tableHolder {
    background-color: var(--bg-color);
    width: 70%;
    padding: 1.5rem;
    margin-top: 2rem;
    border-radius: 1rem;
}

#requirements table {
    border-radius: 5px;
    -moz-border-radius: 5px;
    border-collapse: collapse;
    border-spacing: 0;
    background-color: transparent;
    width: 100%;
    position: relative;
}

#requirements table,
#requirements td {
    border-radius: 5px;
    -moz-border-radius: 5px;
    border-spacing: 0;
}
#requirements tr {
    position: relative;
    z-index: 1;
}
#requirements tr:first-child {
    border-radius: 0.2rem 0.2rem 0 0;
}
#requirements tr:last-child {
    border-radius: 0 0 0.2rem 0.2rem;
}
#requirements table td {
    margin: 0;
    padding: 2rem;
}
#requirements table tr td:last-child {
    padding-left: 15%;
}
#requirements table tr td:first-child {
    font-weight: bold;
}
#requirements ul {
    margin-top: 0;
}

#requirements li {
    padding: 1rem 1rem 1rem 0;
    margin-bottom: 0.5rem;
    border-bottom: 0;
}
#requirements #desiredLevel {
    transition: transform 0.5s ease;
    z-index: 2;
    position: relative;
}
#requirements #desiredLevel td:nth-child(1) {
    border-radius: 1rem 0 0 1rem;
}
#requirements #desiredLevel td:nth-child(2) {
    border-radius: 0 1rem 1rem 0;
    font-size: 1.2rem;
}

#requirements #desiredLevel td:nth-child(2):before {
    color: var(--bg-color);
}
/****??****/
#requirements td:nth-child(2),
#requirements td:nth-child(3) {
    position: relative;
}
#requirements td:nth-child(2):before,
#requirements td:nth-child(2):after {
    content: "";
    width: 20%;
    height: 1.5rem;
    background-color: var(--bg-color);
    position: absolute;
    left: -10%;
    top: 0;
    z-index: 1;
    pointer-events: none;
}
#requirements td:nth-child(2):after {
    top: auto;
    bottom: 0;
}
/****??****/
#requirements #desiredLevel td:nth-child(2) .line,
#requirements td:nth-child(2) .line {
    width: 3px;
    height: calc(100% - 2rem);
    position: absolute;
    top: 1rem;
    left: 0;
    background-color: white;
}
#requirements #desiredLevel td:nth-child(2) .line {
    background-color: var(--bg-color);
}
#requirements #desiredLevel td:nth-child(2):before,
#requirements #desiredLevel td:nth-child(2):after {
    display: none;
}
#requirements table #desiredLevel td {
    background-color: white;
    color: var(--bg-color);
    position: relative;
}
#requirements #desiredLevel td li p {
    color: var(--bg-color);
}
#requirements #desiredLevel td li i {
    color: var(--bg-color);
}

#requirements td li {
    display: grid;
    background-color: transparent;
    box-shadow: none;
    color: black;
}
#requirements td li p {
    position: relative;
    margin: 0;
}

#requirements td,
#requirements td li {
    color: white;
    position: relative;
}
/*
*
* FICHA CURSO FIN
*
*/

/*
*
* Aulas
*
*/
#aulas {
    margin-left: 13%;
    border-left: 0;
    padding-left: 0;
}
#aulas h2 {
    color: black;
}
#textoAulas {
    margin-left: 0;
    display: grid;
    grid-template-columns: 50% 50%;
}
#textoAulas p span {
    display: block;
    width: 100%;
    text-align: center;
}
#textoAulas button {
    margin-top: 3rem;
}
/*
*
* Fin Aulas
*
*/
/*
*
* ABOUT US
*
*/

.aboutUsWhoWeAre {
    width: 74%;
    margin-left: 13%;
    padding: 4rem 0;
}

.aboutUsWhoWeAre .containerElement {
    margin-top: 6rem;
}

#chooseUsLastDiv {
    margin-bottom: 8rem;
}

.blueBox {
    width: 40%;
    background-color: rgb(37, 73, 137);
    margin-left: 57%;
    z-index: 1;
    display: inline-block;
    position: relative;
}

#valores div {
    cursor: pointer;
    background-color: rgb(37, 73, 137);
}
.blueBox p,
.blueBox h1,
.blueBox h2 {
    position: relative;
    z-index: 2;
}
.blueBox:after,
#valores div:after {
    border-radius: 0.5rem;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background-image: linear-gradient(
        to right,
        rgba(21, 40, 76, 1),
        rgba(21, 40, 76, 0)
    );
}

#valores div:after {
    background-image: linear-gradient(
        to top,
        rgba(21, 40, 76, 1),
        rgba(21, 40, 76, 0)
    );
}
.aboutUsWhoWeAre p {
    margin: 0 0 3rem 0;
    padding: 1.5rem;
    font-size: 1.2rem;
    line-height: 1.6;
    z-index: 1;
    color: white;
}
.aulaDiv .boxTitle {
    line-height: 1.2;
}
.aboutUsWhoWeAre:last-child {
    color: black;
    overflow: auto;
}
.containerElement {
    position: relative;
}
#somos img {
    width: 60%;
    display: inline-block;
    top: -4rem;
    height: calc(100% + 8rem);
    object-fit: cover;
    position: absolute;
    left: 0;
}
#somos .blueBox {
    border-radius: 0.5rem;
    margin-left: 55%;
    width: 45%;
}
.containerElement2 {
    position: relative;
    display: flex;
    justify-items: center;
    align-items: center;
}
.aboutUsWhoWeAre .blueBox h1 {
    padding: 3rem 0 0 0;
    margin-bottom: 0;
    color: white;
}
.aboutUsWhoWeAre .blueBox p {
    padding: 2.5rem;
}
#mision .blueBox {
    position: absolute;
    margin-left: 0;
    left: 0;
}
#mision img {
    width: 55%;
    height: 28rem;
    object-fit: cover;
    margin-left: 45%;
}
#mision p,
#vision p {
    font-size: 1.2rem;
    margin-top: -0.5rem;
    margin-bottom: 0;
}
#vision .blueBox {
    position: absolute;
}
#vision img {
    width: 55%;
    height: 28rem;
    object-fit: cover;
    margin-left: 0;
}
.aboutUsWhoWeAre h1 {
    margin-right: 0;
    text-align: center;
    font-size: 2rem;
    margin-bottom: 10rem;
    color: var(--bg-color);
}
#mision .blueBox h1,
#vision .blueBox h1 {
    margin: 0 auto;
}
#mision .blueBox,
#vision .blueBox {
    width: 45%;
    border-radius: 0.5rem 0 0 0.5rem;
}
#vision .blueBox {
    margin-left: 55%;
    border-radius: 0 0.5rem 0.5rem 0;
}
#comps div .boxTitle {
    font-size: 1.8rem;
    width: 100%;
    position: absolute;
    top: 12rem;
    text-align: center;
    color: white;
}
#valores div {
    text-align: center;
}
#valores div i,
#comps div i,
#boxes div i {
    color: white;
    font-size: 8rem;
    position: absolute;
    left: calc((100% - 8rem) / 2);
    top: 5rem;
    transition: 0.5s ease-in-out;
}
#boxes div:hover {
    background-color: rgb(37, 73, 137);
}
#boxes div i {
    font-size: 6rem;
    position: absolute;
    left: calc((100% - 6rem) / 2);
    top: 7rem;
}
#valores div .boxTitle {
    font-size: 1.8rem;
    width: 100%;
    position: absolute;
    bottom: 8rem;
    z-index: 1;
    text-align: center;
    color: white;
    animation-name: titleFade;
    animation-duration: 1s;
    transition: bottom 1s ease;
}
#aulaStuff h1 {
    width: 100%;
    margin: 0 auto 4rem auto;
}
@keyframes titleFade {
    0% {
        opacity: 0.5;
        bottom: 10rem;
    }
    100% {
        opacity: 1;
        bottom: 8rem;
    }
}
#valores div:hover .hiddenText {
    display: block;
}
#valores div:hover i {
    font-size: 4rem;
    top: 1rem;
    left: calc((100% - 4rem) / 2);
}
#valores div:hover .boxTitle {
    bottom: 100%;
}
#valores,
#comps,
#boxes {
    display: grid;
    grid-template-columns: 32% 32% 32%;
    grid-gap: 1.5rem 2%;
    transition: 2s;
}
#valores .aulaDiv:hover .boxTitle,
#valores .aulaDiv .boxTitle {
    bottom: 4rem;
}
#valores .aulaDiv .boxTitle {
    animation: none;
}

#valores div,
#comps div,
#boxes div {
    margin-bottom: 4rem;
    background-color: rgb(37, 73, 137);
    width: 100%;
    height: 40rem;
    position: relative;
    overflow: hidden;
}
.hiddenText {
    position: absolute;
    text-align: center;
    width: 100%;
    bottom: -25rem;
    padding: 0 5%;
    transition: 1s ease;
}

#valores div:hover .hiddenText {
    bottom: 8rem;
}

#valores div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
*
* ABOUT US FIN
*
*/
/*
*
* Escuelas/Centros
*
*/

.centroBox {
    width: 100%;
}
.centroBox h1 {
    margin: 5rem 0 2rem 10%;
    font-size: 2rem;
}
.centroBox img {
    width: 100%;
    height: 22rem;
    object-fit: cover;
}
.centroInnerBox {
    position: relative;
    height: 30rem;
    margin-bottom: 10rem;
}
.centroInnerBox:last-child {
    margin-bottom: 3rem;
}
.centroInnerBox .blueBox {
    background-color: white;
    color: black;
    font-size: 1.2rem;
    line-height: 1.5rem;
    padding: 2.5rem;
    top: 10rem;
    width: 30rem;
    left: 8%;
    position: absolute;
}
.centroInnerBox .blueBox h2 {
    color: var(--bg-color);
    font-size: 1.8rem;
    margin-bottom: 2rem;
}
.centroInnerBox #box2 {
    top: 12rem;
    left: calc(100% - (30rem + 10%));
}
/*
*
* FIN Escuelas/Centros
*
*/
/*
*
* Elegirnos
*
*/
#elegirnos {
    margin-top: 2rem;
}

.chooseUsBold {
    font-size: 1.2rem;
    margin: 1rem 0 1rem 0;
}

#elegirnos .containerElement,
#elegirnos .containerElement2 {
    position: relative;
    height: 25rem;
}

#elegirnos .containerElement2 {
    height: 30rem;
}

#elegirnos .containerElement2 {
    padding-top: 0;
    margin-top: 4rem;
}
#elegirnos .aboutUsWhoWeAre .containerElement2 .blueBox {
    width: 45%;
}
#elegirnos .aboutUsWhoWeAre .containerElement2 img {
    margin-left: 45%;
    width: 55%;
}
#elegirnos .aboutUsWhoWeAre .containerElement2 .blueBox {
    margin-left: 0;
    border-radius: 0.5rem 0 0 0.5rem;
}
#elegirnos .aboutUsWhoWeAre img {
    object-fit: cover;
    width: 60%;
    margin-top: -4rem;
    height: calc(100% + 8rem);
}

#chooseUsLastDiv img {
    margin-top: 0 !important;
}

#elegirnos .containerElement .blueBox {
    right: 0;
}
#elegirnos .aboutUsWhoWeAre .blueBox {
    position: absolute;
    width: 45%;
    border-radius: 0.5rem;
    height: 100%;
}
#elegirnos .aboutUsWhoWeAre .blueBox p {
    margin: 0;
    font-size: 1rem;
}
/*
*
* FIN Elegirnos
*
*/

/*
*
* FloatingMessage
*
*/
#floatingMessage {
    width: 100%;
    padding: 5rem;
    text-align: left;
    background-color: rgba(21, 40, 76, 0.8);
    color: white;
    border-radius: 0.2rem;
    position: fixed;
    z-index: 100000;
    opacity: 1;
    font-size: 1.5rem;
    top: -15rem;
    animation-name: floatingMessage;
    animation-duration: 8s;
}
@keyframes floatingMessage {
    0% {
        top: -15rem;
        display: block;
    }
    25% {
        top: 0;
    }
    75% {
        top: 0;
    }
    100% {
        top: -15rem;
        display: none;
    }
}
/*
*
* FIN FloatingMessage
*
*/
/*
*
* CERTIFYBAR
*
*/

#certifyBar {
    background-color: white;
    position: fixed;
    right: 0;
    top: 50vh;
    z-index: 999;
    transform: translate(0, -50%);
    border-radius: 0.2rem 0 0 0.2rem;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
    padding: 0.5rem 1rem;
}

#certifyBar img {
    width: 3rem;
    margin: 0.5rem 0 0.5rem 0;
}

/*
*
* CERTIFYBAR FIN
*
*/
/*
*
* SHORTCUTARROW
*
*/
#shortCutArrow {
    display: none;
    position: fixed;
    bottom: 3rem;
    right: calc((10% - 3rem) / 2);
    background-color: rgb(37, 73, 137);
    color: white;
    z-index: 9999;
    cursor: pointer;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
}
#shortCutArrow i {
    font-size: 3rem;
}
/*
*
* SHORTCUTARROW FIN
*
*/
/*
*
* NOTICIAS
*
*/
#noticias {
    width: 74%;
}

#noticias i {
    color: var(--bg-color);
    cursor: pointer;
    position: absolute;
    font-size: 4rem;
    left: -5rem;
    top: 17rem;
}

#noticias button {
    padding: 1rem;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--bg-color);
    border: 2px solid var(--bg-color);
    background-color: transparent;
    font-weight: bold;
}

#noticias h2 {
    color: var(--bg-color);
    text-align: center;
    font-size: 2rem;
}

#noticias b {
    font-size: 2rem;
}

.readMore h2 {
    display: inline-block !important;
    max-height: 7rem;
    overflow: hidden;
}

.readMore {
    height: 5rem;
    margin: 0;
    padding: 0;
    position: relative;
}

.seeMoreButton a {
    width: fit-content;
    display: flex;
    margin-bottom: 8rem;
}

#noticias button:hover {
    background-color: rgb(37, 73, 137);
    border: 1px solid rgb(37, 73, 137);
    color: white;
}

#noticias i:hover {
    color: rgb(37, 73, 137);
}

#noticias i:last-child {
    left: initial;
    right: -5rem;
}

.inner-Wrapper {
    width: 100%;
    padding-left: 0.4rem;
    margin-left: 0;
    transition: 1s ease;
}

.new {
    border-radius: 0.2rem;
    position: relative;
    width: 100%;
    display: inline-block;
    height: 18rem;
    margin: 5rem 0 4rem 0;
    overflow: hidden;
    transition: 0.2s;
}

.new img {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s;
}

.inner-Wrapper > a .new {
    margin: 0;
}

.inner-Wrapper > a:first-child .new {
    margin-top: 2rem;
}

.new:hover {
    -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.3);
    background-color: rgba(37, 73, 137, 0.5);
}

.new:hover img {
    opacity: 1;
    pointer-events: all;
}

.new:hover .leftNew h1,
#noticias .new:hover .leftNew h2,
.new:hover .rightNew h1,
#noticias .new:hover .rightNew h2,
#noticias .new:hover .rightNew h2 b {
    color: white;
}

.new:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
}

.new:hover:after {
    background-image: linear-gradient(
        to right,
        rgba(21, 40, 76, 0.5),
        rgba(21, 40, 76, 0.5)
    );
}

.leftNew {
    position: relative;
    z-index: 1;
    cursor: pointer;
    display: inline-block;
    height: 100%;
    width: 15%;
    object-fit: cover;
}

.new:hover .leftNew {
    color: white;
}

.leftNew h1 {
    margin-top: 3rem;
    color: var(--bg-color);
    font-size: 4rem;
    text-align: center;
}

.leftNew h2 {
    font-size: 3rem;
    text-align: center;
    font-weight: lighter;
}

.rightNew {
    position: relative;
    z-index: 1;
    display: inline-block;
    width: 80%;
    vertical-align: top;
    height: 100%;
}

.rightNew h1 {
    margin-top: 2.5rem;
    font-weight: bold;
    cursor: pointer;
    font-size: 2.5rem;
    color: var(--bg-color);
}

.new .rightNew h2 {
    font-size: 1.5rem;
    display: inline;
    text-align: left !important;
    font-weight: lighter;
}

.new .rightNew b h2 {
    display: block;
}

.floatingDate {
    display: inline-block;
    position: absolute;
    padding: 0.8rem 1.5rem;
    border-radius: 0 0.2rem 0.2rem 0;
    color: rgb(37, 73, 137);
    background-color: white;
    top: 2rem;
    left: 0;
}

.floatingDate:after {
    display: block;
    left: 0;
    position: absolute;
    z-index: 0;
    top: 0;
    height: 100%;
    width: 100%;
    content: "";
    border-radius: 0 0.2rem 0.2rem 0;
}

.newContent {
    height: auto;
    overflow: hidden;
    position: relative;
    line-height: 1.2em;
    max-height: 7em;
    margin-right: -1em;
    padding-right: 1em;
}

.newContent:before {
    content: "...";
    position: absolute;
    right: 0;
    bottom: 0;
}

.newContent:after {
    content: "";
    position: absolute;
    right: 0;
    width: 1em;
    height: 1em;
    margin-top: 0.2em;
    background: white;
}

.rightNew p {
    margin: 1.5rem 0 0 0;
    font-size: 1.4rem;
}

.rightNew b {
    font-size: 1.4rem;
    color: #15284c;
}

.floatingDate p {
    margin: 0;
    position: relative;
    font-size: 2rem;
    font-weight: bold;
    z-index: 1;
}

.rightNew span {
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: bold;
    bottom: 2rem;
    right: 4rem;
    position: absolute;
    color: var(--bg-color);
}

.rightNew span:hover {
    color: rgb(37, 73, 137);
}

#mobileNewsView {
    display: none;
}

/*
*
* NOTICIAS FIN
*
*/
/*
*
* TOOLTIP
*
*/
.toolTip {
    visibility: hidden;
    opacity: 0;
    background-color: #3c3c3b;
    color: white;
    text-align: center;
    padding: 0.5rem;
    border-radius: 0.2rem;
    position: absolute;
    transition: 0.3s;
    font-size: 0.8rem;
    width: 8rem;
    top: 4.5rem;
    left: 0;
    z-index: 10;
}
.toolTip::after {
    content: "";
    position: absolute;
    top: 0;
    font-size: 1.5rem;
    left: 45%;
    margin-top: -10px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #3c3c3b transparent;
}
#preForm div:hover .toolTip {
    visibility: visible;
}
/*
*
* FIN TOOLTIP
*
*/
/*
*
* FOOTER
*
*/

.upperFooter span a {
    float: right;
    margin-right: 5rem;
}

.upperFooter {
    border-radius: 0;
    padding: 0 0 0.5rem 5%;
    font-size: 1.8rem;
    background-color: var(--bg-color);
    color: white;
}
.upperFooter > span:nth-child(1) {
    vertical-align: top;
}
/*
*
* FOOTER FIN
*
*/

/*
*
* TESTING
*
*/

#cajaTexto {
    margin-top: 2rem;
    width: 80%;
    margin-left: 10%;
    text-align: justify;
}

/*
*
* TESTING
*
*/

/*********Ficha Curso**********/

/*
*
* PREFORM
*
*/

#preForm {
    animation-name: fadeInLeft;
    animation-duration: 1.5s;
    position: fixed;
    top: 1rem;
    left: 30%;
    width: 40%;
    z-index: 10000;
    padding: 2rem;
    overflow: auto;
}

#preForm form {
    position: relative;
    background-color: white;
    padding: 2rem;
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 100%;
    }
}

#preForm h2 {
    font-size: 2rem;
    color: var(--bg-color);
    text-align: center;
    margin-bottom: 3rem;
}

#preForm input[type="text"],
#preForm input[type="tel"] {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--bg-color);
    transition: 0.2s;
}

#preForm input[type="text"]:focus,
#preForm input[type="tel"]:focus {
    outline: 0;
}

#preForm form > div > p {
    font-size: 1rem;
}

#preForm form > div {
    width: 80%;
    margin-left: 10%;
    margin-bottom: 3rem;
    position: relative;
}

#preForm form .requirements2 {
    display: grid;
    grid-template-columns: auto auto;
}

#preForm label {
    font-size: 1.3rem;
    color: var(--bg-color);
    pointer-events: none;
    margin-left: 1%;
    transition: 0.2s;
}

#preForm input[type="text"],
#preForm input[type="tel"],
#preForm input[type="submit"] {
    padding: 0.5rem;
}

#preForm input[type="text"]:focus,
#preForm input[type="tel"]:focus,
#preForm input[type="submit"]:focus {
    border-bottom: 1px solid #15284c;
}

#preForm input[type="checkbox"] {
    -webkit-appearance: none;
    margin-right: 1rem;
    height: fit-content;
    border: 1px solid var(--bg-color);
    padding: 8px;
    position: relative;
}

#preForm input[type="checkbox"]:checked {
    color: var(--bg-color);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
        inset 0 -15px 10px -12px rgba(0, 0, 0, 0.05),
        inset 15px 10px -12px rgba(255, 255, 255, 0.1);
}

#preForm input[type="checkbox"]:checked:after {
    content: "\2714";
    position: absolute;
    top: -2px;
    left: 2px;
}
#preForm input[type="submit"] {
    border: 0;
    border-radius: 0.2rem;
    background-color: var(--bg-color);
    color: white;
    font-size: 1.5rem;
    padding: 1rem;
    cursor: pointer;
}
#preForm input[type="submit"]:hover {
    background-color: rgb(37, 73, 137);
}
.blurLayer {
    width: 100%;
    height: 150%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    transition: 0.5s ease;
    background-color: rgba(0, 0, 0, 0.7);
    overflow: hidden;
}
.removeButton2 {
    position: absolute;
    font-size: 2.5rem;
    top: 0.5rem;
    right: 0.5rem;
    color: var(--bg-color);
    cursor: pointer;
}
#removeBud {
    position: fixed;
    z-index: 10000;
    top: 1rem;
    right: 1rem;
    color: white;
}
.cajaFlex {
    display: flex;
}

/*
*
* PREFORM
*
*/

/*
*
* POLITICACOOKIES
*
*/

.cookiesPolitics {
    width: 74%;
    margin: 4rem 0 8rem 13%;
}

.cookiesPolitics h1 {
    font-size: 2rem;
    margin-bottom: 3rem;
}

.cookiesPolitics p {
    margin-bottom: 2rem;
}

.cookiesPolitics h2 {
    display: inline-block;
    font-size: 1.4rem;
    margin: 0 0 1rem 1rem;
}

.cookiesPolitics i {
    display: inline-block;
    color: rgb(37, 73, 137);
}

.cookiesPolitics li p {
    font-size: 1.2rem;
    text-align: left;
    margin-left: 2rem;
}

.cookiesPolitics li ul li h3 {
    display: inline-block;
    margin: 0 0 1rem 1rem;
    font-size: 1.2rem;
}

.cookiesPolitics li ul li p {
    margin-left: 5rem;
}

.cookiesPolitics li ul li i {
    margin-left: 3rem;
    font-size: 0.8rem;
}

.cookiesPolitics li {
    list-style-type: none;
}

.cookiesPolitics a {
    font-style: italic;
    color: rgb(37, 73, 137);
}

.cookiesPolitics a:hover {
    color: #adadad;
}

/*
*
* POLITICACOOKIESFIN
*
*/

/*-----------------------COMIENZA NOTICIAS------------------------------*/

.overBox p {
    font-size: 2rem;
}

.overBox span {
    font-size: 1.7rem;
    font-weight: 500;
}
.overBox p:nth-child(2) {
    font-size: 1.5rem;
    margin-top: 0.3rem;
    margin-bottom: 1rem;
}

.overBox {
    padding: 1.5rem;
}

#cursosCarousel .cursoEffect,
.cursosInner .cursoEffect {
    margin-right: 3rem;
}

#cursos #cursosCarousel {
    height: auto;
    width: 100%;
}

#cursos h2 {
    color: var(--bg-color);
    text-align: center;
}
.overBox p {
    white-space: initial;
    word-break: break-word;
    overflow: initial;
    text-overflow: initial;
}

.seeMoreButton {
    margin-top: 5rem;
}

/*-----------------------FINALIZA NOTICIAS------------------------------*/

/*
*
* EMPRESA
*
*/

.empresa {
    padding-bottom: 0 !important;
    overflow: hidden;
}

body .empresa:nth-child(7) {
    padding-bottom: 6rem !important;
}

.centerGrid p {
    margin-left: 4rem;
}

.empresa h2 {
    margin-bottom: 2rem;
}

.empresa a {
    color: rgb(37, 73, 137);
    font-size: 1.8rem !important;
    margin-top: 2rem;
}

.empresa p a:nth-child(1) {
    font-size: initial !important;
}

.empresa .empresaGrid {
    display: flex;
    margin: 2rem 0;
}

.empresaGrid img {
    margin: 0 2rem 0 0;
}

.tourxPage {
    margin-bottom: 5rem;
}

.tourxHero {
    display: flex;
    align-items: center;
    gap: 3rem;
    padding: 3rem;
    background: #f7f9fc;
    border-left: 8px solid var(--bg-color);
}

.tourxHero img {
    max-width: 260px;
    width: 35%;
}

.tourxHero h1 {
    color: var(--bg-color);
    font-size: 4rem;
    font-weight: 900;
}

.tourxHero p {
    color: #254989;
    font-size: 1.6rem;
    margin-top: 1rem;
}

.tourxSection {
    margin-top: 4rem;
}

.tourxSection h2 {
    text-align: left;
}

.tourxGrid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 3rem;
}

.tourxCard {
    background: var(--bg-color);
    color: white;
    padding: 2rem;
}

.tourxCard h3 {
    font-size: 1.8rem;
    font-weight: 700;
}

.tourxCard ul {
    margin: 1rem 0 0 0;
    padding-left: 1.5rem;
}

.tourxCard li {
    background: transparent;
    box-shadow: none;
    color: white;
    list-style-type: disc;
    margin-bottom: 0.5rem;
    padding: 0;
}

.tourxLinks div {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.tourxLinks a {
    background: var(--bg-color);
    color: white;
    display: inline-block;
    font-size: 1.2rem;
    font-weight: 700;
    padding: 1rem 1.5rem;
    text-decoration: none;
}

.tourxLinks a:hover {
    background: #254989;
    color: white;
}

/*
*
* EMPRESAFIN
*
*/

/*
*
* TABLA CURSOS
*
*/

.coursesTable {
    border: white;
    border-collapse: collapse;
    width: 100%;
}

.coursesTable .tableHead {
    background-color: #15284c;
}

.coursesTable .tableHead th {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    color: white;
}

.coursesTable,
.coursesTable td,
.coursesTable .tableHead th {
    border: 2px solid #15284c;
    text-align: center;
    font-weight: bold;
}

.coursesTable .tableHead th {
    border-right: 2px solid white;
}

.coursesTable .tableHead th:last-child {
    border-right: 2px solid #15284c;
}

/*
*
* TABLA CURSOS FIN
*
*/

/************Responsive************/

/****** INICIO ******/
@media screen and (max-width: 1366px) {
    #navBar span {
        font-size: 1.15rem;
        padding: 0.8rem 0.5rem 0.8rem 0.5rem;
    }

    .cursoEffect {
        height: 38rem;
    }
    #cursosCarousel .cursoEffect,
    .cursosInner .cursoEffect {
        margin-right: 1rem;
    }

    .mobileIcons {
        display: grid;
        grid-template-columns: 33.3% 33.3% 33.3%;
    }

    #lateralBar i {
        font-size: 2rem;
    }

    #lateralBar .floatingBox div {
        font-size: 1.4rem;
    }

    #lateralBar #closeButton {
        top: -1rem;
    }

    #lateralBar #closeButton i {
        font-size: 4rem;
    }
}
@media screen and (max-width: 1280px) {
    #cursoFrontier #smallText {
        font-size: 2rem;
    }

    #oddContainer {
        margin-top: 2rem;
    }

    .aboutUsWhoWeAre .containerElement {
        margin-top: 0.5rem;
    }

    #vision p {
        font-size: 1.5rem;
    }

    #cursos #cursosCarousel {
        width: 200vw;
    }

    #cursoFrontier p:nth-child(2) {
        font-size: 2.4rem;
    }

    .seeMoreButton {
        margin-top: 2rem;
    }

    .seeMoreButton a {
        margin-bottom: 5rem;
    }

    #innerHeader span {
        font-size: 0.9rem;
    }

    .cookies_div {
        margin-right: calc(50% - 5rem);
    }

    #outerNavBar #navBar .icon-iconos-18 {
        color: white;
    }

    #outerNavBar #navBar .icon-iconos-18:before {
        vertical-align: middle;
    }

    #outerNavBar img {
        margin: 1rem 5%;
        width: 15%;
    }

    #otherNews {
        width: 100%;
        margin-left: 0;
    }

    #navBar .icon-iconos-18 {
        font-size: 3rem;
        color: var(--bg-color);
        vertical-align: middle;
        margin-top: 0.5rem;
        margin-right: 10%;
    }

    #certifyBar {
        margin: 2rem 5% 0 0;
    }

    #innerHeader {
        padding: 3.5rem 10.8% 0.5rem 6%;
    }

    #certifyBar img {
        width: 12rem;
    }

    #lateralBar a {
        font-size: 1.2rem;
    }

    #lateralBar #closeButton {
        position: absolute;
        right: 0;
        top: -2rem;
    }

    #lateralBar #closeButton i {
        font-size: 8vh;
    }

    #index {
        position: relative;
    }

    #lateralBar div {
        margin: 2rem 2rem 2rem 2rem;
        transition: all 0.5s linear;
        -webkit-transition: all 0.5s linear;
        -moz-transition: all 0.5s linear;
        font-size: 4vw;
    }
    #lateralBar a {
        font-size: 4vw;
    }
    #lateralBar div .icon-iconos-19:before {
        -ms-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    #lateralBar .down .icon-iconos-19:before {
        transition: 0.5s;
        -ms-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    #lateralBar i {
        vertical-align: middle;
        transition: 0.5s;
        font-size: 5vw;
    }

    .floatingBox {
        display: none;
        position: static;
        width: 90%;
        min-width: auto;
        border-radius: 0 0 0 0;
        margin-left: 5%;
        background-color: transparent;
        box-shadow: none;
        border-left: 4px solid var(--bg-color);
    }

    #lateralBar .floatingBox div {
        padding: 0 0;
        margin: 2rem 0 2rem 8%;
        border-radius: 0;
        text-align: left;
    }

    #navBar {
        margin-left: 5%;
    }

    .spanAula {
        margin-right: 5%;
    }

    .imgCurso {
        margin-right: 5.5%;
        width: 49.5%;
    }

    #descCurso {
        left: 5%;
        width: 45%;
    }

    #navBar a {
        padding: 0 0 0 0;
    }

    @keyframes frontierAnimation2Responsive {
        0% {
            left: -25%;
        }
        100% {
            left: 5%;
        }
    }

    #cursoFrontier p {
        font-size: 2.5rem;
    }

    #cursoFrontier button {
        font-size: 1.2rem;
    }

    #cursos,
    .cursosBox {
        margin-left: 0;
        width: 100%;
    }
    #cursos h2,
    .cursosBox h2 {
        font-size: 2rem;
    }

    .cursosEffect {
        height: 16rem;
    }

    #noticias {
        width: 90%;
        margin-left: 5%;
    }

    .cursosInner .cursoEffect {
        margin-right: 0.5rem;
        margin-top: 0.5rem;
    }

    .cursosInner .cursoEffect:last-child {
        margin-right: 0;
    }

    .overBox {
        padding: 1rem;
    }

    .overBox i {
        margin-right: 0.3rem;
    }

    .upperFooter {
        font-size: 1.2rem;
        padding: 0.5rem 0 0.5rem 5%;
    }

    #preForm {
        top: 4rem;
        left: 25%;
        width: 50%;
    }

    #navCurso span {
        font-size: 1rem;
    }

    #preForm label {
        font-size: 1.1rem;
    }

    .classrooms {
        padding: 1rem 1rem 1rem 5%;
    }

    .classroom {
        width: 45%;
        height: 25rem;
        overflow: hidden;
        margin: 2rem 1% 2rem 0;
    }

    .classroom img {
        height: 100%;
    }

    .classroom div {
        text-overflow: ellipsis;
    }

    .classroom div i {
        margin: 0.5rem;
    }

    .classroom div p:first-child {
        margin: 1rem 0 1.5rem 1rem;
    }

    .classroom div span {
        margin-bottom: 1.5rem;
    }

    .classroom div p {
        margin-top: 1.5rem;
        text-overflow: ellipsis;
    }

    #descCursoFull p {
        padding: 1rem 0.6rem 1rem 5%;
    }

    #navCurso {
        padding: 1rem 0 1rem 5%;
    }

    .fichaDiv {
        margin-left: 10%;
        width: 80%;
    }

    #requirements #tableHolder {
        width: 90%;
    }

    #cajaPreins {
        right: 5rem;
    }

    #cajaPreins div {
        font-size: 1rem;
    }

    #cajaPreins button {
        font-size: 1.5rem;
    }

    #innerColaboradores {
        height: 4rem;
    }

    .aboutUsWhoWeAre {
        width: 100%;
        margin-left: 0;
        padding: 1rem 0;
    }

    .lineNews {
        display: grid;
    }

    .contacto {
        width: 100%;
        margin: 8rem 0;
    }

    /****OuterNavBar****/
    #outerNavBar a img {
        margin: 1rem 5% 0 10%;
        width: 15%;
    }

    #chooseUsLastDiv {
        padding-top: 10rem;
    }

    .mobileIcons div i {
        margin-left: 35%;
        color: var(--bg-color);
    }

    #lateralBar {
        width: 50vh;
    }

    #cursoFrontier #descCurso {
        text-align: center;
        height: 25vh;
        border-radius: 0;
    }

    #descCurso::after {
        border-radius: 0;
    }

    .spanAula {
        display: none;
    }

    #cursoFrontier #smallText {
        font-size: 3.6vw;
        width: 90%;
        left: 5%;
        padding: 0;
    }

    .mobileTextFade {
        display: none;
    }

    .cursoEffect {
        height: 34rem;
    }

    #innerHeader {
        padding: 3.5rem 5% 0.5rem 0.5rem;
    }

    /****Fin OuterNavBar****/

    .cookiesPolitics {
        width: 90%;
        margin: 4rem 0 0 5%;
    }

    .cookiesPolitics h1 {
        text-align: center;
    }

    .cookiesPolitics p {
        font-size: 1.1rem;
        margin-bottom: 1rem;
        text-align: center;
    }

    .cookiesPolitics i {
        width: 5%;
        vertical-align: top;
        margin-top: 1rem;
    }

    .cookiesPolitics h2,
    .cookiesPolitics h3 {
        width: 90%;
    }

    .cookiesPolitics li ul li h3 {
        width: 75%;
    }

    .cookiesPolitics li ul li i {
        margin-top: 0.5rem;
    }

    #otherNews > div {
        grid-template-columns: 32% 32% 32%;
    }

    .imgCurso {
        width: 50%;
    }

    #descCurso {
        width: 100%;
        height: 20rem;
        top: initial;
        bottom: 0;
        left: 0;
    }

    #descCurso p {
        width: 75%;
    }

    #cursoFrontier button {
        left: 0;
        bottom: 0;
        top: initial;
        width: 100%;
        border-radius: 0;
    }

    .cursoEffect {
        width: 280px;
    }

    .cursosBox .cursosInner {
        max-width: 100%;
    }

    #preForm {
        left: 10%;
        width: 80%;
    }

    .aboutUsWhoWeAre p,
    #mision p,
    #vision p,
    #elegirnos .aboutUsWhoWeAre .blueBox p {
        /*font-size: 1.1rem;*/
    }

    .aboutUsWhoWeAre h1 {
        font-size: 1.6rem;
    }

    #mision img,
    #vision img {
        height: 30rem;
    }

    #valores div:hover .hiddenText {
        margin: 0 0 3rem 0;
    }

    #vision .blueBox,
    #mision .blueBox,
    #somos .blueBox {
        width: 45%;
    }
    .invisibleBox {
        display: none;
    }
    #valores div i,
    #comps div i {
        font-size: 6rem;
        left: calc((100% - 6rem) / 2);
    }

    #valores div .boxTitle,
    #comps div .boxTitle {
        font-size: 1.5rem;
    }

    #elegirnos .aboutUsWhoWeAre .blueBox {
        width: 50%;
    }

    .classroom {
        width: 80%;
    }

    .fichaDiv {
        margin-left: 10%;
        width: 80%;
    }

    #aulas {
        margin-left: 0;
        width: 100%;
    }

    .section1 {
        height: 35rem;
    }

    .innerContact {
        overflow: hidden;
        width: 45%;
        margin-left: 5%;
    }

    #noticia {
        margin-left: 10%;
        width: 90%;
    }
}

@media screen and (max-width: 800px),
    screen and (min-width: 680px) and (max-width: 1280px) and (orientation: landscape) {
    #outerNavBar a img {
        margin: 1rem 5% 0 5%;
        width: 20%;
    }

    .innerContact {
        width: 55%;
    }

    #aulas {
        margin-left: 10%;
        width: 90%;
    }

    #chooseUsLastDiv {
        padding-top: 0;
    }

    #newTitle {
        top: 0 !important;
        left: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
    }

    #fichaFrontier .detailBox {
        display: none;
    }

    .leftNew h1 {
        margin-top: 1rem;
    }

    .inner-Wrapper {
        padding: 0;
    }

    .new {
        height: auto;
    }

    .aboutUsWhoWeAre {
        padding: 2rem 0;
    }

    #valores {
        width: 230vw;
    }

    #somos .blueBox {
        height: 100%;
        width: 100%;
        margin-left: 0;
        position: relative;
        opacity: 0.8;
    }

    .upperFooter span a {
        margin-right: 2vw;
    }

    .cursosInner .blueBox {
        width: 42vw;
        margin-left: 5vw;
        margin-top: 0.5rem;
        height: 30rem;
    }

    @keyframes frontierAnimation {
        0% {
            opacity: 0;
        }
        10% {
            opacity: 1;
        }
        40% {
            opacity: 1;
        }
        90% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

    #innerHeader p b,
    #innerHeader p a,
    #innerHeader p i {
        font-size: 1rem;
    }

    #innerHeader i {
        margin-right: 0.5rem;
    }

    #certifyBar img {
        width: 10rem;
    }

    #navBar {
        margin-left: 5%;
    }

    .spanAula,
    .imgCurso {
        margin-right: 5%;
    }

    #descCurso {
        left: 5%;
        width: 50%;
    }

    .imgCurso {
        width: 55%;
    }

    #cursos,
    .cursosBox {
        width: 100%;
        margin-left: 0;
    }

    #cursosCarousel .cursoEffect,
    .cursosInner .cursoEffect {
        margin-left: 5vw;
        width: 100%;
        height: 30rem;
    }

    .overBox div,
    .overBox span {
        display: block;
    }

    #mobileScroller {
        overflow: scroll;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #mobileScroller::-webkit-scrollbar {
        display: none;
    }

    #noticias h2 {
        margin: 0 0 1.5rem 0;
        font-size: 3vw;
    }

    #noticias b {
        font-size: 3vw;
    }

    .rightNew h1 {
        font-size: 3vw;
    }

    .new {
        width: 100%;
    }

    .cursosInner {
        grid-template-columns: 42vw 42vw;
    }

    .aboutUsWhoWeAre {
        margin-left: 0;
        width: 100%;
    }

    .contentValores .aboutUsWhoWeAre {
        width: 100%;
        margin-left: 0;
    }

    .fichaDiv {
        margin-left: 5%;
        width: 90%;
    }

    #requirements #tableHolder {
        width: 100%;
    }

    #requirements #desiredLevel td:nth-child(1) {
        text-align: center;
    }

    #aulas,
    #otherNews {
        margin-left: 5%;
    }

    #otherNews {
        width: 90%;
    }

    #noticia {
        margin-left: 5%;
        width: 90%;
    }

    .contacto {
        margin: 5rem 0 5rem 5%;
        width: 90%;
    }

    .innerContact {
        width: 100%;
        position: relative;
        margin: 2rem 0 0 0;
        top: auto;
        left: auto;
    }

    .googleMap {
        width: 100%;
    }

    .section1 {
        width: 90%;
        margin-left: 5%;
        height: 30rem;
    }

    .aboutUsWhoWeAre h1 {
        margin-bottom: 2rem;
    }

    #elegirnos .aboutUsWhoWeAre img,
    #elegirnos .aboutUsWhoWeAre .containerElement2 img {
        margin: 0;
        height: 100%;
        width: 100%;
        border-radius: 0.2rem;
    }

    #elegirnos .aboutUsWhoWeAre .blueBox,
    #elegirnos .aboutUsWhoWeAre .containerElement2 .blueBox {
        width: 100%;
        border-radius: 0.2rem;
        opacity: 0.8;
        top: 0;
    }

    .chooseUsBold {
        font-size: 1.6rem;
    }

    #elegirnosAboutUs1 .blueBox p,
    #elegirnosAboutUs2 .blueBox p {
        font-size: 1.3rem !important;
    }
    .middleBlock img {
        width: 100% !important;
        height: 25rem;
    }

    .middleBlock div {
        width: 100%;
        height: 100%;
        opacity: 0.8;
        top: 0;
        font-size: 2rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

@media screen and (max-width: 680px) and (orientation: portrait) {
    #fullNoticias .part1,
    #fullNoticias #partsBox {
        display: none;
    }
}

@media screen and (max-width: 680px),
    screen and (min-width: 680px) and (max-width: 1280px) and (orientation: landscape) {
    #innerHeader {
        padding: 0.5rem 0.5rem 0.5rem 0.5rem;
        text-align: center;
        height: auto;
        display: none;
    }

    #newTitle {
        top: 50% !important;
    }

    #oddContainer {
        margin-top: 0;
    }

    #mobileNewsView {
        display: initial;
    }

    #elegirnos .aboutUsWhoWeAre .blueBox {
        position: relative;
    }

    .descNew p:first-child {
        padding: 0 2rem;
        top: 50% !important;
        transform: translate(0, -60%);
    }

    .contentValores .aboutUsWhoWeAre {
        width: 100%;
        margin-left: 0;
    }

    #spacer {
        width: 90vw;
    }

    #spacer:after {
        background-image: linear-gradient(
            to right,
            rgba(21, 40, 76, 1),
            rgba(21, 40, 76, 0)
        );
    }

    .blueBox:after,
    #valores div:after {
        border-radius: 0;
    }

    .blueBox:after {
        background-image: linear-gradient(to right, white, white);
        opacity: 0.8;
    }

    .blueBox p,
    .aboutUsWhoWeAre .blueBox h1 {
        color: var(--bg-color);
    }

    #lateralBar .floatingBox div {
        font-size: 1.2rem;
    }

    .chooseUsBold {
        font-size: 1.2rem;
    }

    #cursosCarousel .cursoEffect,
    .cursosInner .cursoEffect {
        margin-left: 5vw;
        width: 70vw;
    }

    #noticias {
        margin-left: 0;
    }

    #cursosCarousel .cursoEffect,
    .cursosInner .cursoEffect {
        margin-left: 5vw;
        width: 90vw;
        height: 25rem;
    }

    #cursoFrontier #smallText {
        font-size: 1.2rem;
    }

    .leftNew {
        width: 25%;
    }

    .rightNew {
        width: 70%;
    }

    .rightNew h1 {
        font-size: 1.5rem;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .cursoEffect {
        height: 60vh;
        margin-top: 0;
    }

    #cursos #cursosCarousel {
        margin-top: 0;
        width: 235vw;
        padding-bottom: 1rem;
    }

    #innerHeader a {
        font-size: 0.8rem;
    }

    #innerHeader span {
        font-size: 1rem;
    }

    #innerHeader i {
        margin-right: 0.5rem;
        font-size: 0.9rem;
    }
    #outerNavBar {
        height: auto !important;
    }
    #outerNavBar a img {
        width: 50%;
        margin: 1.5vh 0 2vh 25%;
    }
    #cursos {
        padding: 3rem 0 3rem 0;
    }
    #cursosCarousel .cursoEffect {
        margin-right: 2vw;
    }
    #outerNavBar #navBar {
        width: 45%;
        margin-right: 5%;
    }
    #cursoFrontier {
        height: 25rem;
    }

    .cursosInner {
        grid-template-columns: 100%;
    }
    #cursosCarousel .cursoEffect {
        width: 70vw;
    }
    #descCurso {
        left: 0;
        width: 100%;
    }
    .imgCurso {
        margin-right: 0;
    }
    #fichaFrontier,
    #cursoFrontier {
        margin-top: 0;
    }
    #cursosCarousel {
        display: block;
    }
    @keyframes responsiveDescCurso {
        0% {
            left: -15rem;
        }
        100% {
            left: calc((100% - 15rem) / 2);
        }
    }
    #descCurso p {
        font-size: 1.2rem;
        font-weight: bold;
    }
    #cursoFrontier .imgCurso,
    #fichaFrontier .imgCurso {
        width: 100%;
        border-radius: 0;
    }
    #cursoFrontier p:nth-child(2) {
        font-size: 1.5rem;
    }
    #lateralBar {
        width: 100%;
        left: -100%;
        margin-right: 0;
        overflow-y: auto;
    }
    #lateralBar div,
    #lateralBar a {
        font-size: 6vw;
    }
    #lateralBar div {
        margin-left: 10%;
    }
    #lateralBar div i {
        font-size: 2.5rem;
    }
    #lateralBar #index {
        margin: 4rem 2rem 2rem 10%;
    }
    #lateralBar #closeButton i {
        font-size: 4rem;
    }
    #lateralBar #closeButton {
        top: -3.6rem;
        right: 0;
    }
    #outerNavBar #navBar .icon-iconos-18 {
        margin-left: 0;
        margin-top: 1vh;
    }
    p {
        font-size: 1.2rem;
    }
    #preForm {
        left: 0;
        width: 100%;
        height: 105%;
        padding: 0;
        top: 0;
        border-radius: 0;
    }
    #preForm form {
        padding: 3.5rem 0.5rem 1rem 0.5rem;
        min-height: 110%;
    }
    #cursos h2,
    .cursosBox h2,
    #noticias h2 {
        font-size: 1.5rem;
    }

    #noticias b {
        font-size: 2.5rem;
    }

    #fichaFrontier #descCurso p {
        margin-left: 10%;
        font-size: 2rem;
    }
    #fichaFrontier #descCurso p:nth-child(2) {
        margin-bottom: 1.5rem;
    }
    #cursoFrontier,
    #fichaFrontier {
        height: 32rem;
        box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
    }
    .icon-iconos-18:before {
        vertical-align: middle;
    }
    .cursosBox {
        padding: 3rem 0 0 0;
    }
    .cursosBox h2 {
        margin-bottom: 2rem;
    }
    .overBox {
        padding: 1.5rem 0.5rem 1.5rem 0.5rem;
    }
    .overBox i {
        margin-right: 0.2rem;
    }
    .overBox p {
        font-size: 1.5rem;
    }
    .overBox span {
        font-size: 0.9rem;
    }
    #noticias {
        margin-bottom: 2vh;
        width: 100%;
    }

    .seeMoreButton a {
        margin-bottom: 12vh;
    }

    #innerColaboradores {
        margin: 0;
    }

    #colaboradores {
        padding: 2rem 0 0 0;
        text-align: center;
    }

    #colaboradores h2 {
        margin-bottom: 1rem;
    }

    #right-side,
    #left-side {
        font-size: 2rem;
        top: 48%;
    }
    #right-side {
        right: 0.5rem;
    }
    #left-side {
        left: 0.5rem;
    }
    #bb-bookblock img {
        pointer-events: none;
    }
    .bb-item video {
        object-fit: contain;
        height: 100%;
    }
    /*****Ficha Curso*****/
    #cursoFrontierFull {
        height: 12rem;
    }
    #cajaPreins,
    #certifyBar {
        display: none;
    }
    #navCurso {
        display: flex;
        background-color: var(--bg-color);
        width: 100%;
    }
    #navCurso span {
        margin: 0 auto;
        color: white;
        font-size: 1.5rem;
    }
    #descCursoFull {
        width: 100%;
        background-color: white;
        transition: 0.5s;
    }
    #descCursoFull b {
        font-size: 2.5rem;
        color: var(--bg-color);
        display: block;
    }
    #descCursoFull p {
        color: var(--bg-color);
        font-size: 2rem;
    }

    #descCurso p {
        left: auto;
        width: 100%;
    }

    #aulasImg {
        margin-right: 0;
    }

    #noticias i {
        left: 0;
    }

    #noticias i:last-child {
        right: 0;
    }

    #noticias h2 {
        max-height: initial;
    }

    .new {
        width: 95%;
        margin-left: 2% !important;
    }

    .contactHalf {
        display: block;
        width: 100%;
        margin: 2vh 0 5vh !important;
    }

    #requirements table,
    .fichaDiv ul {
        width: 90%;
        margin-left: 5%;
    }

    #presentacion,
    #modulos,
    #salidasProfesionales,
    #requisitosL {
        width: 95%;
        overflow: hidden;
        margin-top: 2rem;
        padding-left: 1rem;
        border-left: 2px solid var(--bg-color);
    }

    .seeMoreButton {
        margin-top: 4vh;
    }

    .fichaDiv h2 {
        font-size: 1.8rem;
    }
    .fichaDiv h2 i {
        font-size: 1.8rem;
        vertical-align: middle;
    }
    .fichaDiv h2 .icon-iconos-19::before {
        transform: rotate(90deg);
        transition: 0.5s;
    }
    .fichaDiv .down .icon-iconos-19::before {
        transform: rotate(180deg);
    }
    #requirements table {
        width: 100%;
    }

    #requirements table td {
        padding: 2rem 1rem 2rem 1rem;
    }

    #requirements ul {
        margin-left: 0;
        width: 90%;
    }

    #requirements table tr td:first-child {
        text-align: center;
    }

    #requirements table p {
        vertical-align: middle;
    }

    #requirements #desiredLevel:hover {
        transform: scale(1.05);
    }
    /****Fin Ficha Curso***/
    #textoAulas {
        grid-template-columns: 95%;
    }
    #textoAulas > div {
        margin-top: 2rem;
    }
    #aulas {
        padding-left: 0;
        width: 90%;
    }
    #boxes {
        grid-template-columns: 47% 47%;
    }
    #boxes div {
        height: 15rem;
    }
    #boxes div i {
        top: 5rem;
        font-size: 5rem;
        left: calc((100% - 5rem) / 2);
    }
    #textoAulas p {
        width: 100%;
    }
    /*****Conocenos*****/
    #vision .blueBox,
    #mision .blueBox,
    #somos .blueBox,
    #elegirnos .aboutUsWhoWeAre .blueBox {
        width: 100%;
        border-radius: 0.2rem 0.2rem 0 0;
    }
    #vision img,
    #mision img,
    #somos img,
    #elegirnos .aboutUsWhoWeAre img {
        border-radius: 0 0 0.2rem 0.2rem;
    }
    #somos img,
    #mision .blueBox,
    #vision .blueBox,
    #somos .blueBox {
        position: static;
        width: 100%;
        transform: scale(1);
        margin-left: 0;
        border-radius: 0 0 0 0;
        background-color: transparent;
    }
    #somos .blueBox {
        position: inherit;
    }
    .aboutUsWhoWeAre h1 {
        width: 100%;
        margin-left: 0;
    }
    .aboutUsWhoWeAre .blueBox p {
        padding: 2.5rem 1.5rem 2.5rem 1.5rem;
        margin-bottom: 0;
    }
    #mision img,
    #vision img,
    #somos img {
        height: 25rem;
        width: 100%;
        border-radius: 0;
        margin: 0;
    }
    .aboutUsWhoWeAre {
        padding: 1rem 0;
    }
    #valores,
    #comps {
        width: 200vw;
        margin-left: 2rem;
        grid-template-columns: 31.2% 31.2% 31.2%;
    }
    #valores div,
    #comps div {
        pointer-events: none;
        border-radius: 0;
    }

    #valores div i,
    #comps div i {
        font-size: 5rem;
        left: calc((100% - 5rem) / 2);
        top: 4rem;
    }

    .centroBox h1 {
        margin: 2rem 0 2rem 5%;
    }
    .centroInnerBox {
        height: auto;
        margin-bottom: 3rem;
    }
    .centroInnerBox .blueBox {
        position: static;
        width: 100%;
    }
    .centroBox .centroInnerBox .blueBox {
        padding: 2.5rem 1.5rem 2.5rem 1.5rem;
    }

    .centroInnerBox:last-child {
        margin-bottom: 1rem;
    }
    #somos,
    #mision,
    #vision {
        width: 100%;
        margin-left: 0;
    }
    #somos {
        margin-bottom: 0;
        padding-bottom: 0;
    }
    #mision {
        margin-top: 0;
        padding-top: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    #vision {
        margin-top: 0;
        padding-top: 0;
    }
    .containerElement {
        border-radius: 0;
    }
    .containerElement2 {
        padding-top: 0;
    }
    #elegirnos,
    .aboutUsWhoWeAre:first-child,
    #elegirnos,
    .aboutUsWhoWeAre:nth-child(2) {
        width: 100%;
        margin-left: 0;
    }
    #elegirnos .containerElement,
    #elegirnos .containerElement2 {
        height: auto;
    }
    #elegirnos .containerElement img,
    #elegirnos .aboutUsWhoWeAre img {
        width: 100%;
        height: 25rem;
        margin: 0;
    }
    #elegirnos .aboutUsWhoWeAre .blueBox,
    #elegirnos .aboutUsWhoWeAre img,
    #elegirnos .aboutUsWhoWeAre .containerElement2 .blueBox,
    #elegirnos .aboutUsWhoWeAre .containerElement2 img {
        width: 100%;
        /*position: relative;*/
        margin-left: 0;
    }
    .aboutUsWhoWeAre .blueBox h1 {
        margin-left: 0;
    }
    #somos h1 {
        margin-left: 0;
    }

    .containerElement2 {
        display: block;
    }
    /*****Fin Conocenos*****/
    /*****Equipo*****/
    #equipo #blueLayer {
        width: 100%;
        height: 20rem;
    }
    #equipo img {
        position: static;
        width: 100%;
        height: 20rem;
        margin-left: 0;
    }
    #equipo #textEquipo {
        top: 5rem;
        left: calc((100% - 22rem) / 2);
    }
    #equipo h1 {
        margin: 3rem 0 2rem 5%;
    }
    #equipo #textEquipo {
        width: 18rem;
        left: calc((100% - 18rem) / 2);
    }
    #equipo #textEquipo h2 {
        font-size: 1.5rem;
    }
    #equipo #textEquipo p {
        font-size: 1rem;
    }
    #formBox {
        padding-left: 0;
        margin-bottom: 3rem;
    }
    /*****Fin Equipo*****/
    /*****Contacto*****/
    .contacto {
        margin: 2rem 0 2rem 0;
        width: 100%;
    }
    .innerContact {
        width: 100%;
        margin-left: 0;
        margin-bottom: 3rem;
        border-radius: 0;
    }
    .googleMap {
        width: 100%;
        float: none;
        margin-left: 0;
    }
    .section1 img {
        height: 12rem;
    }
    .contactHalf span {
        width: auto;
        position: relative;
    }

    .contactHalf span p {
        position: absolute;
    }
    /*****Fin Contacto*****/
    #shortCutArrow {
        display: none;
    }
    #cookies_inner p a,
    .cookies_button {
        font-size: 1.5rem;
    }
    .cookies_button {
        padding: 1rem;
        margin: 0 1rem 1rem 0;
    }
    #innerColaboradores {
        height: 2rem;
    }
    .upperFooter {
        display: grid;
        font-size: 3rem;
        width: 100%;
        padding: 0.5rem 0 0.5rem 0;
    }
    .upperFooter span {
        margin: 0 0 0 0;
        padding: 1.5rem;
        text-align: center;
        width: 100%;
    }
    .upperFooter span:last-child {
        border-top: 1px solid white;
    }
    #cookies #cookies_inner p {
        font-size: 1rem;
    }
    .cookies_button,
    #cookies_inner p a {
        font-size: 1.2rem;
    }
    .cookies_button {
        padding: 0.8rem;
        margin: 0;
        text-align: center;
    }
    #formBox {
        box-shadow: none;
    }

    #formBox .halfBox {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        padding: 1rem;
    }

    .upperFooter span a {
        float: none;
        margin-right: 0;
    }
}

@media screen and (max-width: 1024px) and (orientation: landscape) {
    header {
        position: static;
    }

    #cursoFrontier p:first-child {
        font-size: 1.8rem;
        margin-top: 0.8rem;
    }

    #outerNavBar a img {
        margin: 1rem 5%;
    }

    #innerHeader,
    #certifyBar {
        display: none;
    }

    #elegirnos .aboutUsWhoWeAre .blueBox {
        position: absolute;
    }

    .detailBox {
        display: none !important;
    }

    #fichaFrontier #descCurso {
        bottom: 0;
        top: initial;
        height: 12rem;
        border-radius: 0;
    }

    #fichaFrontier #descCurso p {
        text-align: center;
    }

    #fichaFrontier button {
        top: initial;
        right: 0;
        bottom: 0;
        width: 100%;
        border-radius: 0;
    }

    #noticias .readMore h2,
    #noticias .readMore h2 b {
        font-size: 1.5rem;
    }

    .salasBox #descCurso p:nth-child(2) {
        padding: 0 1rem;
    }
    .cookies_div {
        width: 100%;
    }

    .descNew p:first-child {
        padding: 0 2rem;
        top: 50% !important;
        transform: translate(0, -50%);
    }

    .descNew {
        height: 6rem !important;
    }

    .salasBox #descCurso button {
        top: 60% !important;
    }

    .salasBox #descCurso {
        height: 13rem !important;
    }

    .cookies_button {
        text-align: center;
    }

    #aulas {
        margin: 4rem 5%;
    }

    #equipo img {
        position: absolute;
        top: 0;
    }

    #formBox {
        margin: 0.5rem 0;
    }

    #formBox .halfBox {
        padding: 1rem 0;
    }

    #formBox .halfBox:after {
        z-index: 1;
    }

    #cursoFrontier {
        height: auto !important;
    }

    #lateralBar div,
    #lateralBar a {
        font-size: 1.4rem;
    }

    #lateralBar div {
        margin: 1rem 1rem 1rem 10%;
    }

    #lateralBar #index {
        margin-bottom: 1rem;
    }

    #lateralBar .floatingBox div {
        margin: 1rem 0 1rem 8%;
    }

    #lateralBar div i {
        font-size: 2rem;
    }

    #outerNavBar a img {
        width: 20vw;
        margin-left: 50%;
        transform: translate(-50%, 0);
    }

    #cursoFrontier #smallText {
        font-size: 1.4rem;
    }

    .salasBox #descCurso {
        max-height: 100% !important;
    }

    .fichaDiv p {
        width: 90%;
    }
}

@media screen and (max-width: 680px) {
    .empresa {
        padding: 3rem 5vw 0 5vw !important;
    }

    .empresa .empresaGrid {
        display: block;
    }

    .empresaGrid img {
        margin: 0 0 2rem 45%;
        transform: translate(-50%, 0);
    }

    .centerGrid p {
        margin-left: 0;
    }
}

@media screen and (max-width: 480px) {
    #descCurso {
        min-height: 8rem;
        height: 10rem;
        bottom: 0;
        top: auto;
    }

    #fichaFrontier #descCurso,
    #fichaFrontier #descCurso:after {
        height: 10rem;
        border-radius: 0;
        position: absolute;
        margin-bottom: 10%;
    }

    #fichaFrontier .imgCurso {
        opacity: unset;
        width: 100%;
    }

    #fichaFrontier .detailBox {
        display: none;
    }

    #fichaFrontier #descCurso p:first-child {
        display: inline-block;
        font-size: 2rem;
        margin-top: 1rem;
    }

    #fichaFrontier button {
        top: auto;
        position: sticky;
        width: 100%;
        border-radius: 0;
        margin-bottom: 0.1rem;
    }

    #fichaFrontier {
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
        overflow: visible;
    }

    .fichaDiv h2 {
        margin-top: 1.8rem;
    }

    #presentacion,
    #modulos,
    #salidasProfesionales,
    #requisitosL {
        max-height: 2rem;
        width: 100%;
        display: inline;
        margin-top: 2rem;
        transition: max-height 0.5s ease-in-out;
        border-left: 0 solid var(--bg-color);
        padding: 1rem;
    }

    .fichaDiv p {
        padding: 0 2rem;
    }

    #requirements #tableHolder {
        padding: 1rem;
    }

    .fichaDiv #salidas {
        display: block;
    }

    .fichaDiv h2 i {
        display: none;
    }

    #requirements #tableHolder {
        margin: 1rem 2% 0 2%;
        width: auto;
        border-radius: 0.5rem;
        padding: 0.5rem;
    }

    #requirements table td {
        padding: 1.5rem 0.5rem 1.5rem 0.5rem;
    }

    #requirements #desiredLevel:hover {
        transform: unset;
    }
    /*Hasta aqui*/

    /*De aqui para abajo es lo del menú lateral*/

    #lateralBar div {
        font-size: 6vw;
    }

    #lateralBar {
        overflow: hidden;
    }

    /*Hasta aquí menu lateral*/

    /*De aquí para abajo es lo de conocenos*/

    #somos h1 {
        margin-left: 0;
        z-index: 10;
    }

    #somos .blueBox {
        height: 100%;
        width: 100%;
        position: relative;
        z-index: 2;
        opacity: 1;
    }

    .aboutUsWhoWeAre .blueBox p {
        padding: 1.5rem 1.5rem 1.5rem 1.5rem;
        margin-bottom: 0;
        font-size: 1rem;
    }

    .aboutUsWhoWeAre p,
    #mision p,
    #vision p,
    #elegirnos .aboutUsWhoWeAre .blueBox p {
        font-size: 1rem;
    }

    .aboutUsWhoWeAre .blueBox h1 {
        padding-top: 1.5rem;
    }

    #requirements table tr td:last-child {
        padding-left: 8%;
    }

    .fichaDiv td p {
        padding: 0;
    }

    .contentValores {
        margin-bottom: 0.5rem;
        display: inline-block;
    }

    #mobileScroller {
        margin: 0;
        width: 100%;
    }

    .aboutUsWhoWeAre {
        padding: 0;
    }

    #valores {
        display: -webkit-box;
        width: 80%;
        margin: 0;
    }

    #valores div {
        margin-right: 0.5rem;
        margin-bottom: 0;
        height: 70vh;
    }

    /*hasta aqui conocenos*/

    /*de aquí para abajo Unete al equipo*/
    #formBox .halfBox {
        background-color: transparent;
        padding: 0;
        position: absolute;
        border-radius: 0;
        height: 70vh;
    }

    #formBox {
        border-radius: 0;
        margin-bottom: 0;
        margin-top: 1%;
    }
    /*hasta aqui unete al equipo*/
}

.standartViewMode {
    display: none;
}

@media (min-width: 992px) {
    .selectViewMode {
        display: none;
    }
    .viewMode {
        float: right;
    }
}

@media (max-width: 991px) {
    .viewMode {
        width: 50px;
        height: 50px;
    }

    .desktopIcon {
        display: none;
    }
}

.viewMode {
    width: 30px;
    height: 30px;
    background-color: white;
    border: none;
}

.buttonSelected {
    color: rgb(37, 73, 137);
}

.viewMode:focus {
    outline: none;
}

/*Oxford Index Button*/

@media (max-width: 375px) and (orientation: portrait) {
    #oxfordTestCard .card {
        height: 15vh !important;
    }

    #oxfordTestCard img {
        margin-top: 1rem;
        margin-left: 1rem;
    }

    #oxfordTestCard .container {
        margin-top: 2rem;
    }
}
@media (max-width: 812px) and (orientation: landscape) {
    #oxfordTestCard .card {
        height: 25vh !important;
    }
}

@media (max-width: 1199px) {
    #oxfordTestCard .card {
        width: 250px;
        height: 15vh;
    }

    #oxfordTestCard b,
    #oxfordTestCard p {
        font-size: 17px;
    }
}

@media (min-width: 1000px) and (max-width: 1199px) {
    #oxfordTestCard img {
        margin-top: 1rem;
        margin-left: 1rem;
    }
}

@media (min-width: 1200px) {
    #oxfordTestCard .card {
        width: 20vw;
        height: 15vh;
    }

    #oxfordTestCard b,
    #oxfordTestCard p {
        font-size: 18px;
    }

    #oxfordTestCard img {
        margin-top: 1rem;
        margin-left: 1rem;
    }
}

@media (min-width: 1280px) {
    #oxfordTestCard img {
        margin-top: 1rem;
        margin-left: 1rem;
    }

    #oxfordTestCard b,
    #oxfordTestCard p {
        font-size: 18px;
    }

    #oxfordTestCard .container {
        margin-top: 2rem;
        margin-right: 1rem;
    }
}

#oxfordTestCard .card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    cursor: pointer;
    background-color: rgb(37, 73, 137);
    border-radius: 0.5rem;
}

#oxfordTestCard.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

#oxfordTestCard .container {
    padding: 2px 16px;
}

#oxfordTestCard {
    margin-top: 3rem;
}

#oxfordTestCard b,
#oxfordTestCard p {
    color: white;
}

/*Oxford Index Button End*/

/*OxfordPage*/
@media (min-width: 360px) {
    .oxfordApprovedImg,
    .oxfordTestBoxes {
        width: 330px;
    }
}
@media (max-width: 359px) {
    .oxfordApprovedImg,
    .oxfordTestBoxes {
        width: 280px;
    }
}
@media (min-width: 768px) {
    .oxfordTestBoxes {
        width: 40vw;
    }
    .oxfordApprovedImg,
    .oxfordTestBoxes {
        width: 50%;
    }
}

.oxfordButton {
    background-color: #15284c;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
}

.oxfordApprovedImg,
.oxfordTestBoxes {
    margin-top: 2rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/*OxfordPage End*/

.w7 {
    width: 70px;
    height: 70px;
}

/*
 * SECCIÓN PROPÓSITO
 * Mantiene una composición equilibrada en escritorio y apilada en móvil.
 */
#proposito .containerElement2 {
    min-height: 28rem;
}

#proposito .blueBox {
    position: absolute;
    left: 0;
    width: 45%;
    margin-left: 0;
    border-radius: 0.5rem 0 0 0.5rem;
    z-index: 2;
}

#proposito .blueBox h1 {
    margin: 0 auto;
}

#proposito .blueBox p {
    margin-top: -0.5rem;
    margin-bottom: 0;
    font-size: 1.2rem;
}

#proposito img {
    display: block;
    width: 55%;
    height: 28rem;
    margin-left: 45%;
    object-fit: cover;
    object-position: center;
    border-radius: 0 0.5rem 0.5rem 0;
}

@media screen and (max-width: 768px) {
    #proposito {
        width: 100%;
        margin-left: 0;
        padding: 1rem 0;
    }

    #proposito .containerElement2 {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    #proposito .blueBox {
        position: static;
        width: 100%;
        margin-left: 0;
        border-radius: 0;
    }

    #proposito .blueBox h1 {
        padding-top: 1.5rem;
    }

    #proposito .blueBox p {
        padding: 1.5rem;
        margin: 0;
        font-size: 1rem;
    }

    #proposito img {
        width: 100%;
        height: 20rem;
        margin-left: 0;
        border-radius: 0;
    }
}