/*
html, body,div,section,p {
    margin: 0;
    padding: 0;
    font-family: "Lato", sans-serif;
}
*/
* {
    box-sizing: border-box !important;
    font-family: "Lato", sans-serif;
}

.bg {
    background-image: url('./res/bg.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.main {
    display: grid;
    grid-template-rows: 88px 580px 580px 250px;
}

.header {
    align-content: center;
    display: grid;
    grid-template-columns: 200px 200px 1fr;
    padding: 24px;
}

.header div:nth-of-type(2) {
    display: block;
}

/*
.header img {
    height: auto;
    width: 100%;
}*/
.header ul {
    justify-self: end;
    padding-right: 24px;
}

.header ul>li {
    display: inline;
    font-size: 1.2rem;
    margin-left: 24px;
}

.header.sticky {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(229, 231, 229, 70%);
    height: 24px;
}

.header.sticky img {
    width: 70%;
}

.p-sections {
    padding: 8px;
}

.bt-sections {
    border-bottom: solid 6px #606060;
    /* #010101;*/
}

.border-bottom-principal {
    border-bottom: solid 6px #010101
}

.border-bottom-secundario {
    border-bottom: solid 6px #606060;
}

.section-a {
    background: linear-gradient(rgba(1, 1, 1, .25), rgba(1, 1, 1, .25)), url("./res/image473.webp");
    background-size: cover;
    background-position: top center;
    height: 100%;
    /*
        filter: brightness(80%);
        position: relative;
    */
}

/*.section-a div {
    color: white;
    font-size: 4.7rem;
    font-weight: 400;            
}*/
/*.section-a > div.overlay {
    background-color:  rgba(253, 209, 33, 0.7);
    height: 100%;
    width: 100%;
}
div.image {
    height: 100%;
    width: 100%;
    background-image: url("./res/image473.png");
    background-size: cover;
}*/
.section-btns-carousel {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 10px;
}

.section-btns-carousel span {
    background-color: white;
    border-radius: 50%;
    display: inline-block;
    height: 16px;
    width: 16px;
}

.section-btns-carousel span.selected {
    background-color: #fdd122;
}

.section-b {
    /*background-color: #fdd12280;*/
    background:  url("./res/image1042.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    height: 100%;
}

.footer {
    align-content: center;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
}

.header .link {
    cursor: pointer;
    color: #010101;
    text-decoration: none;
}

.header .link:hover {
    text-decoration: underline;
    color: #2e519d;
}

.banner-grid-a {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    padding: 72px;
    padding-bottom: 0;
    padding-top: 0;
}

.primer-parrafo-banner-a {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}


.banner-principal-logo {
    display: grid;
    justify-content: end;
    padding-right: 20px;
}

.banner-principal-logo img {
    height: 140px;
}

.banner-grid-b {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    padding: 72px;
    padding-bottom: 0;
    padding-top: 0;
    font-size: 4.5rem;
    color: #2e519d;
    text-shadow: rgb(255, 255, 255) 4px 0px 0px, rgb(255, 255, 255) 3.87565px 0.989616px 0px, rgb(255, 255, 255) 3.51033px 1.9177px 0px, rgb(255, 255, 255) 2.92676px 2.72656px 0px, rgb(255, 255, 255) 2.16121px 3.36588px 0px, rgb(255, 255, 255) 1.26129px 3.79594px 0px, rgb(255, 255, 255) 0.282949px 3.98998px 0px, rgb(255, 255, 255) -0.712984px 3.93594px 0px, rgb(255, 255, 255) -1.66459px 3.63719px 0px, rgb(255, 255, 255) -2.51269px 3.11229px 0px, rgb(255, 255, 255) -3.20457px 2.39389px 0px, rgb(255, 255, 255) -3.69721px 1.52664px 0px, rgb(255, 255, 255) -3.95997px 0.56448px 0px, rgb(255, 255, 255) -3.97652px -0.432781px 0px, rgb(255, 255, 255) -3.74583px -1.40313px 0px, rgb(255, 255, 255) -3.28224px -2.28625px 0px, rgb(255, 255, 255) -2.61457px -3.02721px 0px, rgb(255, 255, 255) -1.78435px -3.57996px 0px, rgb(255, 255, 255) -0.843183px -3.91012px 0px, rgb(255, 255, 255) 0.150409px -3.99717px 0px, rgb(255, 255, 255) 1.13465px -3.8357px 0px, rgb(255, 255, 255) 2.04834px -3.43574px 0px, rgb(255, 255, 255) 2.83468px -2.82216px 0px, rgb(255, 255, 255) 3.44477px -2.03312px 0px, rgb(255, 255, 255) 3.84068px -1.11766px 0px, rgb(255, 255, 255) 3.9978px -0.132717px 0px;
}

.texto-resaltado-b {
    color: #2e519d;
    text-shadow: rgb(255, 255, 255) 4px 0px 0px, rgb(255, 255, 255) 3.87565px 0.989616px 0px, rgb(255, 255, 255) 3.51033px 1.9177px 0px, rgb(255, 255, 255) 2.92676px 2.72656px 0px, rgb(255, 255, 255) 2.16121px 3.36588px 0px, rgb(255, 255, 255) 1.26129px 3.79594px 0px, rgb(255, 255, 255) 0.282949px 3.98998px 0px, rgb(255, 255, 255) -0.712984px 3.93594px 0px, rgb(255, 255, 255) -1.66459px 3.63719px 0px, rgb(255, 255, 255) -2.51269px 3.11229px 0px, rgb(255, 255, 255) -3.20457px 2.39389px 0px, rgb(255, 255, 255) -3.69721px 1.52664px 0px, rgb(255, 255, 255) -3.95997px 0.56448px 0px, rgb(255, 255, 255) -3.97652px -0.432781px 0px, rgb(255, 255, 255) -3.74583px -1.40313px 0px, rgb(255, 255, 255) -3.28224px -2.28625px 0px, rgb(255, 255, 255) -2.61457px -3.02721px 0px, rgb(255, 255, 255) -1.78435px -3.57996px 0px, rgb(255, 255, 255) -0.843183px -3.91012px 0px, rgb(255, 255, 255) 0.150409px -3.99717px 0px, rgb(255, 255, 255) 1.13465px -3.8357px 0px, rgb(255, 255, 255) 2.04834px -3.43574px 0px, rgb(255, 255, 255) 2.83468px -2.82216px 0px, rgb(255, 255, 255) 3.44477px -2.03312px 0px, rgb(255, 255, 255) 3.84068px -1.11766px 0px, rgb(255, 255, 255) 3.9978px -0.132717px 0px;
}

.banner-grid-2c {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.primer-parrafo-banner-b {
    display: grid;
    justify-content: left;
}

.segundo-parrafo-banner-b {
    display: grid;
    font-weight: bolder;
    font-style: italic;
    justify-content: center;
}

.tercer-parrafo-banner-b {
    display: grid;
    justify-content: right;
}

.mensaje-banner-b {
    font-size: 1.2rem;
    color: #010101 !important;
    padding: 72px;
    padding-bottom: 0;
    padding-top: 0;
}
/*
    Se intento agregar solo el borde en los lados del rectangulo esto funciona en figuras si esquinas redondeadas
*/
/*
.hexagon-rounded-border {
    content: "";
    position: relative;
    margin: 0 auto;
    width: 4.68em;
    height: 7.32em;
    border-radius: 1em/.5em;
    background: #fdd122;
    transition: opacity .5s;
    cursor: pointer;
}

.hexagon-rounded-border:before {
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background: inherit;
    content: '';
    -webkit-transform: rotate(60deg);   
    -ms-transform: rotate(60deg);    
    transform: rotate(60deg);    
}

.hexagon-rounded-border:after {
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background: inherit;
    content: '';
    -webkit-transform: rotate(-60deg);
    
    -ms-transform: rotate(-60deg);
    
    transform: rotate(-60deg);    
}


.hexagon-rounded-shadow {    
    box-shadow: 0px 8px 0 0 white, 0px -11px 0 0 white;
}

.hexagon-rounded-shadow::after, .hexagon-rounded-shadow::before {    
    box-shadow: 0px 8px 0 0 white, 0px -11px 0 0 white;
}

.hexagon-rounded {
    position: relative;
    margin: 0 auto;
    width: 4.33em;
    height: 7.32em;
    border-radius: 1em/.5em;
    background: #101010;
    transition: opacity .5s;
    cursor: pointer;
}

.hexagon-rounded.hexagon-rounded-white{
    background: #ffffff;
    display: grid;
    height: 7.89em;
    width: 4.90em;
}
.hexagon-rounded:before {
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background: inherit;
    content: '';
    -webkit-transform: rotate(60deg);
    
    -ms-transform: rotate(60deg);
    
    transform: rotate(60deg);
    
}

.hexagon-rounded:after {
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background: inherit;
    content: '';
    -webkit-transform: rotate(-60deg);
    
    -ms-transform: rotate(-60deg);
   
    transform: rotate(-60deg);
    
}
*/





.hex-min-rounded {
    align-self: center;
    background: #101010;
    border-radius: 1em/.5em;
    height: 7.32em;
    justify-self: center;
    width: 4.33em;
    display: grid;
    position: absolute;
    z-index: 1;
}

.hex-min-rounded > :first-child {
    position: inherit;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background: inherit;
    background: inherit;
    content: '';
    -webkit-transform: rotate(60deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(60deg);
    /* IE 9 */
    transform: rotate(60deg);
    /* Firefox 16+, IE 10+, Opera */
    z-index: -1;
}

.hex-min-rounded > :nth-child(2) {
    position: inherit;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background: inherit;
    background: inherit;
    content: '';
    -webkit-transform: rotate(-60deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(-60deg);
    /* IE 9 */
    transform: rotate(-60deg);
    /* Firefox 16+, IE 10+, Opera */
}

.hex-bordered-min-rounded {
    align-self: center;
    background: #ffffff;
    border-radius: 1em/.5em;
    height: 7.8em;
    margin: 0 auto;
    justify-self: center;
    width: 4.8em;
    display: grid;
    position: absolute;
    z-index: 1;
}

.hex-bordered-min-rounded > :first-child {
    position: inherit;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background: inherit;
    background: inherit;
    content: '';
    -webkit-transform: rotate(60deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(60deg);
    /* IE 9 */
    transform: rotate(60deg);
    /* Firefox 16+, IE 10+, Opera */
    z-index: -1;
}

.hex-bordered-min-rounded > :nth-child(2) {
    position: inherit;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background: inherit;
    background: inherit;
    content: '';
    -webkit-transform: rotate(-60deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(-60deg);
    /* IE 9 */
    transform: rotate(-60deg);
    /* Firefox 16+, IE 10+, Opera */
}

.hex-rounded {
    align-self: center;
    background: #101010;
    border-radius: 1em/.5em;
    height: 24.32em;
    justify-self: center;
    width: 14.33em;
    display: grid;
    position: absolute;
    z-index: 1;
}

.hex-rounded > :first-child {
    position: inherit;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background: inherit;
    background: inherit;
    content: '';
    -webkit-transform: rotate(60deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(60deg);
    /* IE 9 */
    transform: rotate(60deg);
    /* Firefox 16+, IE 10+, Opera */
    z-index: -1;
}

.hex-rounded> :nth-child(2) {
    position: inherit;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background: inherit;
    background: inherit;
    content: '';
    -webkit-transform: rotate(-60deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(-60deg);
    /* IE 9 */
    transform: rotate(-60deg);
    /* Firefox 16+, IE 10+, Opera */
}

.hex-border-rounded {
    background: #ffffff;
    border-radius: 1em/.5em;
    display: grid;
    height: 25.89em;
    justify-self: center;
    width: 14.90em;
}

.hex-border-rounded > :first-child {
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background: inherit;
    background: inherit;
    content: '';
    -webkit-transform: rotate(60deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(60deg);
    /* IE 9 */
    transform: rotate(60deg);
    /* Firefox 16+, IE 10+, Opera */
}

.hex-border-rounded> :nth-child(2) {
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background: inherit;
    background: inherit;
    content: '';
    -webkit-transform: rotate(-60deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(-60deg);
    /* IE 9 */
    transform: rotate(-60deg);
    /* Firefox 16+, IE 10+, Opera */
}

.btn-hexagon-rounded {
    position: relative;
    margin: 0 auto;
    width: 4.33em;
    height: 7.32em;
    border-radius: 1em/.5em;
    background: #101010;
    transition: opacity .5s;
    cursor: pointer;
}

.btn-hexagon-rounded:before {
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background: inherit;
    content: '';
    -webkit-transform: rotate(60deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(60deg);
    /* IE 9 */
    transform: rotate(60deg);
    /* Firefox 16+, IE 10+, Opera */
}

.btn-hexagon-rounded:after {
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background: inherit;
    content: '';
    -webkit-transform: rotate(-60deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(-60deg);
    /* IE 9 */
    transform: rotate(-60deg);
    /* Firefox 16+, IE 10+, Opera */
}

.text-border {
    color: #2e519d;
    text-shadow: rgb(255, 255, 255) 4px 0px 0px, rgb(255, 255, 255) 3.87565px 0.989616px 0px, rgb(255, 255, 255) 3.51033px 1.9177px 0px, rgb(255, 255, 255) 2.92676px 2.72656px 0px, rgb(255, 255, 255) 2.16121px 3.36588px 0px, rgb(255, 255, 255) 1.26129px 3.79594px 0px, rgb(255, 255, 255) 0.282949px 3.98998px 0px, rgb(255, 255, 255) -0.712984px 3.93594px 0px, rgb(255, 255, 255) -1.66459px 3.63719px 0px, rgb(255, 255, 255) -2.51269px 3.11229px 0px, rgb(255, 255, 255) -3.20457px 2.39389px 0px, rgb(255, 255, 255) -3.69721px 1.52664px 0px, rgb(255, 255, 255) -3.95997px 0.56448px 0px, rgb(255, 255, 255) -3.97652px -0.432781px 0px, rgb(255, 255, 255) -3.74583px -1.40313px 0px, rgb(255, 255, 255) -3.28224px -2.28625px 0px, rgb(255, 255, 255) -2.61457px -3.02721px 0px, rgb(255, 255, 255) -1.78435px -3.57996px 0px, rgb(255, 255, 255) -0.843183px -3.91012px 0px, rgb(255, 255, 255) 0.150409px -3.99717px 0px, rgb(255, 255, 255) 1.13465px -3.8357px 0px, rgb(255, 255, 255) 2.04834px -3.43574px 0px, rgb(255, 255, 255) 2.83468px -2.82216px 0px, rgb(255, 255, 255) 3.44477px -2.03312px 0px, rgb(255, 255, 255) 3.84068px -1.11766px 0px, rgb(255, 255, 255) 3.9978px -0.132717px 0px;
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 600px) {
    .header {
        grid-template-columns: repeat(2, 1fr);
    }

    .header div:nth-of-type(2) {
        display: none;
    }

    .banner-principal-logo img {
        height: 120px;
    }

    /*.section-a div {        
        font-size: 2.7rem;        
    }*/
    .banner-grid-a {
        margin-top: 72px;
    }

    .banner-grid-b div {
        font-size: 2.5rem;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {}