* {
    scroll-behavior: smooth;
}

html, body {
    overflow-x: hidden;
}

body {
    font-family: 'Lato', sans-serif;
}

/* navbar */
.navbar {
    background-color: #e0f2ff;
    /*background-color: #266696;*/
}

img.logo {
    height: 3rem;
}

nav div.container-fluid {
    margin-left: 1.3rem;
}

.navbar-brand {
    margin-right: auto !important;
    padding: 0;
}

/* navbar - font */

nav .navbar-nav li a {
    position: relative;
    color: #266696;
}

nav.navbar.navbar-expand-lg {
    padding: 0;
}

a.navbar-brand {
    padding: 0;
}

/* navbar - bottom border */

nav .navbar-nav li a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #266696;
    transition: width 0.3s ease;
}

nav .navbar-nav li a:hover::before {
    width: 100%;
}

ul.dropdown-menu.show {
    background-color: #e0f2ff;
    border: 0;
}

.dropdown-item:hover {
    background-color: transparent;
}

a.dropdown-item:hover {
    border-bottom: none;
}

button.navbar-toggler {
    border: 0;
    color: #266696;
}



/* index bg */
#indexbg {
    background-image: linear-gradient(70deg, rgba(37,102,150,0.8492647058823529) 0%, rgba(255,255,255,0.571953781512605) 100%), url('/images/indexbg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    padding: 1.2rem;
    opacity: 0;
    animation: fadeIn 2s ease forwards;
}

/* fadein animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#Noticias{
    padding: .5rem;
}

/* headers */

h1.indexheader {
    color: white;
    font-weight: bolder;
    font-size: 4rem;
}

h2.indexp {
    color: white;
    font-size: 1.5rem;
    font-weight: lighter;
}

h3.indext {
    color: white;
    font-weight: bold;
    font-size: 20px;
}

h2 {
    color: white;
    font-size: 1.9rem;
    font-weight: bolder;
}

h3 {
    color: white;
    font-size: 1.2rem;
    font-weight: lighter;
}

/*
h2 {
    color: white;
    font-size: 1.2rem;
    font-weight: lighter;
}

h4 {
    color: white;
    font-size: 1.9rem;
    font-weight: bolder;
}*/

h4.mediumtitle {
    color: #266696;
    font-weight: bolder;
}

h4.darktitle {
    color: #266696;
    font-weight: bolder;
}

h5.bluetitle {
    text-align: center;
    font-size: 1.3rem;
    font-weight: bold;
    color: #266696
}

/*text*/
p.lighttext {
    color: white;
    font-weight: lighter;
    font-size: 1.3rem;
}

p.darktext {
    color: #262626;
    font-weight: 500;
    font-size: 1.2rem;
}

p.mediumtext {
    text-align: center;
    font-size: 20px;
}

p.bluetext {
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: #266696;
}


/*buttons*/

.btn-hover {
    background-color: transparent;
}

.btn-warning {
    background-color: transparent;
    color: white;
    border: solid white 1px;
    border-radius: 1.2rem;
    font-weight: lighter;
    --bs-btn-active-bg: white;
    --bs-btn-active-border-color: white;
}

    .btn-warning:hover, .btn-warning:active, .btn-warning:focus, .btn-warning:checked {
        background-color: white;
        color: #266696;
        border: solid white 1px;
        border-radius: 1.2rem;
    }

.btn-danger, .btn-info {
    border-radius: 1.2rem;
    color: white;
}

    .btn-info:hover {
        border-radius: 1.2rem;
        color: white;
    }

.btn.btn-outline-success {
    --bs-btn-border-color: #266696;
}

    .btn.btn-outline-success:hover, .btn.btn-outline-success a:hover {
        background: #266696;
        color: white;
        --bs-btn-hover-border-color: #266696;
    }

/*bg*/
section#bluebg {
    background-color: #e0f2ff;
}

#darkbluebg {
    background-color: #256696;
    border: solid 0.5rem;
    border-color: white;
}

/* carousel */
.subtitle {
    font-weight: bold;
    color: #266696;
    text-align: center;
}

.scarousel {
    opacity: 0;
    animation: fadeIn 2s ease forwards;
}

#carouselcont {
    padding: 0;
}

.card {
    position: relative;
}

    .card#cardindex {
        position: relative;
    }

.carousel-control-prev-icon {
    background-color: #266696;
    border: solid #266696;
    border-radius: 20px;
}

.carousel-control-next-icon {
    background-color: #266696;
    border: solid #266696;
    border-radius: 20px;
}

/*.last.card img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
}*/


/* cards overlay */

.overlay-texti {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    /*height: 30%;*/
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0d33508a;
    color: white;
    padding: 0.3rem;
    box-sizing: border-box;
    margin: auto;
    font-size: 0.8rem;
    font-weight: bold;
}


/*sección servicios*/
#serviciosbg {
    background-image: linear-gradient(90deg, rgba(0, 1, 1, 0.267) 0%, rgba(0, 1, 1, 0.267) 100%), url('../images/indexbg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    padding: 1.3rem;
    opacity: 0;
    animation: fadeIn 2s ease forwards;
}

#serviciosi p {
    font-weight: bold;
    font-size: 1rem;
    color: white;
}

#serviciosi i {
    color: white;
    font-size: 80px;
}

#iconserv {
    text-align: center;
}

.overlay-text {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0d33509e;
    color: white;
    padding: 0.6rem;
    box-sizing: border-box;
    margin: auto;
    font-weight: lighter;
}

#serviciosii {
    animation: fadeIn 2s ease forwards;
    padding: 0;
}

hr {
    border: solid 2.5px;
    border-color: #266696;
}

.row {
    --bs-gutter-x: var(--bs-gutter-x) 0;
}


#masinfo {
    justify-content: center;
    text-align: center;
    font-size: 20px;
    color: #266696;
}

#introserv img.serv {
    border: solid 0.5rem;
    border-color: white;
    height: 100%;
    width: 100%;
}

/* img intro serv css
    #introserv {
    background-image: url(../images/intro.png);
    background-repeat: no-repeat;
    background-size: cover;
    border: solid 0.5rem;;
    border-color: white;
}*/

/*servicios desglosados*/

#serviciosdesg {
    padding: 0;
}

#smontaje, #ssoldadura, #sfresado, #saislamientos, #sniveles, #selectricas, #sestructurales, #sautomatizacion, #sducteria {
    background-size: 100%;
    background-repeat: no-repeat;
    height: 22rem;
}

@media (max-width: 576px) {
    #smontaje, #ssoldadura, #sfresado, #saislamientos, #sniveles, #selectricas, #sestructurales, #sautomatizacion, #sducteria {
        background-size: 100%;
        background-repeat: no-repeat;
        height: 300px;
    }
}

@media (max-width: 525px) {
    #smontaje, #ssoldadura, #sfresado, #saislamientos, #sniveles, #selectricas, #sestructurales, #sautomatizacion, #sducteria {
        background-size: 100%;
        background-repeat: no-repeat;
        height: 180px;
    }
}

/*#smontaje:hover, #ssoldadura:hover, #sfresado:hover, #saislamientos:hover, #sniveles:hover, #selectricas:hover, #sestructurales:hover, #sautomatizacion:hover, #sducteria:hover {
    transform: scale(0.5);
 }*/

#smontaje {
    background-image: url(../images/montajes2.png);
}

#ssoldadura {
    background-image: url(../images/soldadura2.png);
}

#sfresado {
    background-image: url(../images/fresado2.png);
}

#saislamientos {
    background-image: url(../images/aislamientos2.png);
}

#sniveles {
    background-image: url(../images/nivelsuelo2.png);
}

#selectricas {
    background-image: url(../images/electricas2.png);
}

#sestructurales {
    background-image: url(../images/estructurales2.png);
}

#sautomatizacion {
    background-image: url(../images/automatizacion.png);
}

#sducteria {
    background-image: url(../images/ducteria2.png);
}

/*seccion comercializadora*/
#introcomer img.introcom {
    border: solid 0.5rem;
    border-color: white;
    height: 100%;
    width: 100%;
}

/*
#introcomer {
    background-image: url(../images/comintro.png);
    border: solid 0.5rem;;
    border-color: white;
}*/

/*seccion comunidad*/

#comunidadsec {
    padding: 40px;
    opacity: 0;
    animation: fadeIn 2s ease forwards;
}

.card-title {
    font-weight: lighter;
    color: #256696;
}

.card-text {
    color: #256696;
    font-weight: bold;
}

.card-body {
    background-color: ghostwhite
}

#comerii {
    padding: 0;
}

/*comunidad - noticias ;; cortadora laser*/

#cortadoralaser {
    background-image: url(../images/noticia1.png);
}



/*seccion partners*/
#partnerbg {
    background-image: linear-gradient(90deg, rgba(0, 1, 1, 0.60) 0%, rgba(0, 1, 1, 0.60) 100%), url('../images/introcanalair.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    padding: 1.3rem;
    opacity: 0;
    animation: fadeIn 2s ease forwards;
}

#bluebg img.canalairlogo {
    border: solid 0.5rem;
    border-color: white;
    height: 100%;
    width: 100%;
}

/*
#introcanalair {
    background-image: url(../images/canalairlogo.png);
    border: solid 0.5rem;;
    border-color: white;
}*/

@media (max-width: 576px) {
    #introcanalair {
        background-image: url(../images/canalairlogo.png);
    }
}

#partnersec {
    opacity: 0;
    animation: fadeIn 2s ease forwards;
    padding: 0;
}

#canalairi p {
    font-weight: bold;
    color: #266696;
}

#canalairi i {
    color: #266696;
    font-size: 100px;
}

#canalairi {
    text-align: center;
}

/*certificaciones*/



/*seccion nosotros*/

#nosotrosbg {
    background-image: linear-gradient(90deg, rgba(0, 1, 1, 0.267) 0%, rgba(0, 1, 1, 0.267) 100%), url('../images/prueba.png');
    background-size: cover;
    background-repeat: no-repeat;
    padding: 0.9rem;
    opacity: 0;
    animation: fadeIn 2s ease forwards;
}

/* #nosotrosbg h2 {
    width: 80%;
}*/

#nosotrosbg2 {
    background-image: linear-gradient(90deg, rgba(0, 1, 1, 0.267) 0%, rgba(0, 1, 1, 0.267) 100%), url('../images/nosotrosv.png');
    background-size: cover;
    background-repeat: no-repeat;
    padding: 1.2rem;
    opacity: 0;
    animation: fadeIn 2s ease forwards;
}

.square {
    background-color: whitesmoke;
    color: #266696;
    border: solid 2px;
    border-radius: 20px;
    justify-content: center;
}

    .square i {
        font-size: 4rem;
        padding: 0.5rem;
    }

    .square p {
        width: 80%;
        text-align: center;
        margin: auto;
    }


/*seccion contacto*/
#contacto {
    background-image: linear-gradient(90deg, rgba(0, 1, 1, 0.267) 0%, rgba(0, 1, 1, 0.267) 100%), url('../images/indexbg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    padding: 1.3rem;
    opacity: 0;
    animation: fadeIn 2s ease forwards;
}

div.maps {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;
}

iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.square2 {
    background-color: whitesmoke;
    color: #266696;
    border: solid 2px;
    border-radius: 20px;
    justify-content: center;
}

    .square2 i {
        font-size: 1rem;
        padding: 0.5rem;
    }

    .square2 p {
        width: 80%;
        text-align: center;
        margin: auto;
    }

#form {
    background-color: rgba(159, 179, 216, 0.784);
    padding: 1.3rem;
    border: solid rgba(159, 179, 216, 0.784);
    border-radius: 1rem;
    color: white;
}

#sucursales {
    background-color: #e0f2ff
}

footer {
    background-color: #266696;
}

    footer p {
        color: white;
        font-weight: bold;
        font-size: 11px;
        padding: 10px;
    }

#InfoProducto .imagenes {
    display: flex;
    gap: 20px;
}

#InfoProducto .carousel-indicators {
    position: absolute;
}

#InfoProducto .carousel {
    max-width: 500px;
}

    #InfoProducto .carousel img {
        max-width: 400px;
    }

#InfoProducto .principal {
    display: flex;
}

#InfoProducto .img {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    #InfoProducto .img img {
        width: 70px;
        display: block;
    }

#InfoProducto .carousel-indicators button {
    width: max-content !important
}

.img button {
    border: none;
}

/*--------
media query
---------*/

/*index*/

@media only screen and (min-width:300px) {
    /*navbar*/
    a.nav-link {
        font-size: 1rem;
    }

    #indexbg {
        background-image: linear-gradient(140deg, rgba(37,102,150,0.8492647058823529) 0%, rgba(255,255,255,0.571953781512605) 100%), url(../images/indexbg.jpg);
        padding: 0.9rem;
    }

    h1.indexheader {
        font-size: 1.4rem;
    }

    h2.indexp {
        font-size: 1.2rem;
    }

    h3.indext {
        font-size: 1.1rem;
        ;
    }

    /*buttons index*/
    .btn-warning {
        font-size: 0.7rem;
        padding: 0.2rem;
    }

    .btn-danger,
    .btn-info {
        padding: 0.3rem;
        margin-left: 0px;
        font-size: 0.7rem;
    }

    /*carousel*/

    #cardCarousel.carousel-inner {
        display: flex;
        flex-wrap: nowrap;
    }

    #cardCarousel .carousel-item {
        flex: 0 0 100%;
    }

    .overlay-texti {
        font-size: 0.7rem;
        text-align: center;
    }

    .card#cardindex {
        height: auto;
    }

    /*headers y text secciones*/
    h2 {
        font-size: 1.1rem;
        color: white;
        font-weight: bolder;
    }

    h3 {
        font-size: 1.1rem;
    }

    h4 {
        font-size: 1.1rem;
    }

    p.darktext {
        font-size: 1.1rem;
    }

    p.lighttext {
        font-size: 1.1rem;
    }

    p.bluetext {
        font-size: 1.1rem;
    }

    /*seccion servicios*/
    #serviciosi i {
        font-size: 3rem;
    }

    #serviciosi p {
        font-size: 0.7rem;
    }

    .overlay-text {
        font-size: 0.7rem;
        font-weight: bold;
        padding: 0;
    }

    /*seccion contacto*/
}

@media only screen and (min-width:350px) {
    h4.darktitle {
        padding-top: 1rem;
    }
}

@media only screen and (min-width:400px) {
    /*navbar*/
    a.nav-link {
        font-size: 1rem;
    }

    #indexbg {
        background-image: linear-gradient(140deg, rgba(37,102,150,0.8492647058823529) 0%, rgba(255,255,255,0.571953781512605) 100%), url(../images/indexbg.jpg);
    }

    h1.indexheader {
        font-size: 1.4rem;
    }

    h2.indexp {
        font-size: 1rem;
    }

    h3.indext {
        font-size: 0.8rem;
        ;
    }

    /*buttons index*/
    .btn-warning {
        font-size: 0.7rem;
        padding: 0.2rem;
    }

    .btn-danger,
    .btn-info {
        padding: 0.4rem;
        font-size: 0.9rem;
    }

    /*carousel*/

    #cardCarousel.carousel-inner {
        display: flex;
        flex-wrap: nowrap;
    }

    #cardCarousel .carousel-item {
        flex: 0 0 100%;
    }

    .overlay-texti {
        font-size: 0.7rem;
        text-align: center;
    }

    .card#cardindex {
        height: auto;
    }

    /*headers y text secciones*/

    h2 {
        font-size: 1.2rem;
    }

    h3 {
        font-size: 1.2rem;
    }

    h4 {
        font-size: 1.2rem;
    }

    p.darktext {
        font-size: 1.2rem;
    }

    h4.darktitle {
        font-size: 1.2rem;
        padding-top: 1rem;
    }

    p.lighttext {
        font-size: 1.2rem;
    }

    p.bluetext {
        font-size: 1.2rem;
    }

    /*seccion servicios*/
    #serviciosi i {
        font-size: 3.2rem;
    }

    #serviciosi p {
        font-size: 0.7rem;
    }

    .overlay-text {
        font-size: 0.8rem;
        padding: 0.4rem;
    }
}

/*max-width carousel*/
@media only screen and (min-width:575px) {
    #carousel-small {
        display: none;
    }
}

@media only screen and (max-width:575px) {
    #carousel-big {
        display: none;
    }

    .card#cducteria {
        height: 6rem;
    }

    img.ducteria.card-img-top {
        height: 6rem;
    }
}

@media only screen and (max-width:575px) {
    .card#cducteria {
        height: 10rem;
    }

    img.ducteria.card-img-top {
        height: 10rem;
    }
}

@media only screen and (min-width:576px) {
    #indexbg {
        background-image: linear-gradient(140deg, rgba(37,102,150,0.8492647058823529) 0%, rgba(255,255,255,0.571953781512605) 100%), url(../images/indexbg.jpg);
    }

    h1.indexheader {
        font-size: 2.8rem;
        line-height: 2.8rem;
    }

    h2.indexp {
        font-size: 1rem;
    }

    h3.indext {
        font-size: 0.8rem;
        ;
    }

    /*buttons index*/
    .btn-warning {
        font-size: 0.8rem;
        padding: 0.45rem;
    }

    .btn-danger,
    .btn-info {
        padding: 5px;
        margin-right: 10px;
        margin-bottom: 10px;
        font-size: 0.8rem;
    }

    /*headers y text secciones*/

    h2 {
        font-size: 1.25rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    h4 {
        font-size: 1.25rem;
    }

    p.darktext {
        font-size: 1.25rem;
    }

    h4.darktitle {
        font-size: 1.25rem;
        padding-top: 0;
    }

    p.lighttext {
        font-size: 1.25rem;
    }

    p.bluetext {
        font-size: 1.25rem;
    }

    /*seccion servicios*/
    #serviciosi i {
        font-size: 4.5rem;
    }

    #serviciosi p {
        font-size: 1rem;
    }

    .overlay-text {
        font-size: 0.69rem;
        font-weight: lighter;
        padding: 0.4rem;
    }
}


@media only screen and (min-width:768px) {
    #indexbg {
        background-image: linear-gradient(140deg, rgba(37,102,150,0.8492647058823529) 0%, rgba(255,255,255,0.571953781512605) 100%), url(../images/indexbg.jpg);
    }

    h1.indexheader {
        font-size: 2.9rem;
        line-height: 3rem;
    }

    h2.indexp {
        font-size: 1.2rem;
    }

    h3.indext {
        font-size: 1rem;
        ;
    }

    /*buttons index*/
    .btn-warning {
        font-size: 0.7rem;
    }

    .btn-danger,
    .btn-info {
        font-size: 0.8rem;
    }

    /*carousel*/

    #cardCarousel.carousel-inner {
        display: flex;
        flex-wrap: nowrap;
    }

    #cardCarousel .carousel-item {
        flex: 0 0 100%;
    }

    .overlay-texti {
        font-size: 0.7rem;
        text-align: center;
    }

    /*seccion servicios*/

    .overlay-text {
        padding: 0.6rem;
        font-weight: light;
    }

    /*headers y text secciones*/

    h2 {
        font-size: 1.35rem;
    }

    h3 {
        font-size: 1.35rem;
    }

    h4 {
        font-size: 1.35rem;
    }

    p.darktext {
        font-size: 1.35rem;
    }

    h4.darktitle {
        font-size: 1.35rem;
    }

    p.lighttext {
        font-size: 1.35rem;
    }

    p.bluetext {
        font-size: 1.35rem;
    }
}

@media only screen and (min-width:992px) {
    #indexbg {
        background-image: linear-gradient(90deg, rgba(37,102,150,0.8492647058823529) 0%, rgba(255,255,255,0.571953781512605) 100%), url(../images/indexbg.jpg);
    }

    h1.indexheader {
        font-size: 3.9rem;
        line-height: 3.5rem;
    }

    h2.indexp {
        font-size: 1.4rem;
    }

    h3.indext {
        font-size: 1.4rem;
        ;
    }

    /*buttons index*/
    .btn-warning {
        font-size: 0.8rem;
        padding: 0.4rem;
    }

    .btn-danger,
    .btn-info {
        font-size: 0.9rem;
    }

    /*carousel*/

    #cardCarousel.carousel-inner {
        display: flex;
        flex-wrap: nowrap;
    }

    #cardCarousel .carousel-item {
        flex: 0 0 100%;
    }

    .overlay-texti {
        font-size: 0.8rem;
        text-align: center;
    }

    .card#cardindex {
        height: auto;
    }

    /*seccion servicios*/

    .overlay-text {
        font-size: 1rem;
        padding: 0.4rem;
        font-weight: light;
    }

    /*headers y text secciones*/

    h2 {
        font-size: 1.3rem;
    }

    h3 {
        font-size: 1.3rem;
    }

    h4 {
        font-size: 1.3rem;
    }

    p.darktext {
        font-size: 1.3rem;
    }

    h4.darktitle {
        font-size: 1.3rem;
    }

    p.lighttext {
        font-size: 1.3rem;
    }

    p.bluetext {
        font-size: 1.3rem;
    }
}

@media only screen and (min-width:1200px) {
    #indexbg {
        background-image: linear-gradient(90deg, rgba(37,102,150,0.8492647058823529) 0%, rgba(255,255,255,0.571953781512605) 100%), url(../images/indexbg.jpg);
    }

    h1.indexheader {
        font-size: 3.9rem;
        line-height: 3.9rem;
    }

    h2.indexp {
        font-size: 1.7rem;
    }

    h3.indext {
        font-size: 1.3rem;
    }

    /*buttons index*/
    .btn-warning {
        font-size: 1rem;
        padding: 0.4rem;
    }

    .btn-danger,
    .btn-info {
        font-size: 1rem;
    }

    /*carousel*/

    #cardCarousel.carousel-inner {
        display: flex;
        flex-wrap: nowrap;
    }

    #cardCarousel .carousel-item {
        flex: 0 0 100%;
    }

    .overlay-texti {
        font-size: 0.9rem;
        text-align: center;
    }

    .card#cardindex {
        height: 32vh;
    }

    /*seccion servicios*/

    .overlay-text {
        padding: 0.4rem;
        font-weight: light;
    }

    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.3rem;
    }

    h4 {
        font-size: 1.3rem;
    }

    p.darktext {
        font-size: 1.3rem;
    }

    h4.darktitle {
        font-size: 2rem;
    }

    p.lighttext {
        font-size: 1.3rem;
    }

    p.bluetext {
        font-size: 1.3rem;
    }
}

@media only screen and (min-width:2000px) {
    #indexbg {
        background-image: linear-gradient(90deg, rgba(37,102,150,0.8492647058823529) 0%, rgba(255,255,255,0.571953781512605) 100%), url(../images/indexbg.jpg);
    }

    h1.indexheader {
        font-size: 4rem;
        line-height: 4rem;
    }

    h2.indexp {
        font-size: 1rem;
    }

    h3.indext {
        font-size: 0.8rem;
        ;
    }

    /*buttons index*/
    .btn-warning {
        font-size: 1rem;
        padding: 0.4rem;
    }

    .btn-danger,
    .btn-info {
        font-size: 1rem;
    }

    /*carousel*/

    #cardCarousel.carousel-inner {
        display: flex;
        flex-wrap: nowrap;
    }

    #cardCarousel .carousel-item {
        flex: 0 0 100%;
    }

    .overlay-texti {
        font-size: 1.4rem;
        text-align: center;
    }

    .card#cardindex {
        height: auto;
    }

    /*seccion servicios*/

    .overlay-text {
        padding: 0.4rem;
        font-weight: light;
        font-size: 1rem;
    }

    h4 {
        font-size: 3rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    p.darktext {
        font-size: 1.4rem;
    }

    h4.darktitle {
        font-size: 2.3rem;
    }

    p.lighttext {
        font-size: 1.5rem;
    }
}