html {
  height: 100%
}

.bitter-headline1 {
  font-family: "Bitter", serif;
  font-optical-sizing: auto;
  font-weight: 300; 
  font-style: normal;
}

#identificador {
    color: black;
}

.open-sans-bodyText {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

#logo-buttons-container {
    display: grid;
    grid-template-columns: 38% 62%;
    height: fix-content; 
    margin-bottom: 17px;
}

div.legal-Contenedor {
    display: grid;
    place-items: center;
    
    background-image: url("/SO2026patron2.jpg");
    background-color: rgba(255,255,255,0.75);
    background-blend-mode: lighten;
    background-repeat: repeat;
    background-size: 75px, 75px;
    width:  100%;
    height: auto;
}


hr.gradient-line {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(239, 189, 96, 0), rgba(239, 188, 96, 1), rgba(239, 189, 96, 0));
}

button.nav-button {
    color: #5d5d64;
    background-image: url("/SO2026FondoPlata.jpg");
    background-size: cover;
    border-top-color: #b7cfda;
    border-bottom-color: #b7cfda;

    font-family: "Bitter", serif;
    font-optical-sizing: auto;
    font-weight: 300; 
    font-style: normal;
    letter-spacing: .2rem;
    font-size: .75rem;

    border-width: 2px;
    border-style: double;
    border-radius: 8px;
    
    margin: 5px;
}





#div-boton-registro {
    grid-column-start: 1;
    grid-column-end: 3;

    grid-row-start: 3;
    grid-row-end: 4;

    display: flex;
    align-items: center;
    justify-content: center;
}
#botonRegistro {
    width: fit-content;
    height: fit-content;
    
    padding: .5em;  
}


div.canvas2 {
    display: grid;
    place-items: center;
}

@media (max-width: 800px) {
    body {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        z-index: 0;
        height: 100vh;
        margin: 0;
        padding: 0
    }

    #firstContainer {
    position: fixed;
    inset-inline-start: 0px;
    inset-block-start: 0px;
    object-fit: cover;
    object-position: center;
    z-index: -1;
    opacity: 0.55;
    height: 100%;
    }
   
    #logolink1 {
        justify-self: center;
        align-self: center;
    }
    #logohead1 {
        width: 95%;
        height: auto;
        
    }
    .img-p-contenedor {
        display: grid;
        place-items: center;
        margin:  5em 0em;
        width:  100%;
        height: fit-content;
    }

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

    div.p-contenedor {
        display: flex;
        flex-direction: column;
        justify-content: center;

        background-image: url("/SO2026patron2.jpg");
        background-repeat: repeat;
        background-size: 75px, 75px;
        width:  100%;
        height: fit-content;

        border-style: groove none;
        padding: .5em 0em;

        text-align: center;
    }


    .info-p {
        width: 100%;
    }

    div.taller-container {
        display: grid;
        justify-content: center;
        grid-template-columns: 95%;
    }

    #buttons-container {
        display: flex;
        flex-direction: column;
        align-content: space-evenly;
        align-content: start;
    }

    .div-Master {
    width: 90%;
    border-style: groove;
    }

    img.img-Master {
    width: 100%;
    }
    
    #forms-container {
        margin: 1.5em 0em; 
    }

    #form-container {
         display: grid;
         justify-content: center;
         grid-template-columns: 1.5fr 1.8fr;
         grid-template-rows: repeat(3, 32%);
         row-gap: .7em;
         margin: 1em .5em;
    }
}

@media (min-width: 801px) {
    body {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        z-index: 0;
        height: 100vh;
        margin: 0;
        padding: 0
    }

    #firstContainer {
    position: fixed;
    inset-inline-start: 0px;
    inset-block-start: 0px;
    object-fit: fill;
    object-position: center;
    z-index: -1;
    opacity: 0.55;
    width: 100%;
    }
    
    #logolink1 {
        justify-self: center;
    }
    #logohead1 {
        width: 90%;
        height: auto;
        
    }

    #forms-container {
   
        width: 65%;
    }

    #form-container {
         display: grid;
         justify-content: center;
         grid-template-columns: 1.2fr 3fr;
         grid-template-rows: repeat(3, 32%);
         row-gap: .7em;
         margin: 2.5em;
    }
    .img-p-contenedor {
        display: flex;
        justify-content: space-evenly;
        align-content: start;
        margin: 5rem;
    }

    .img-contenedor {
        width: 40%;
        height: auto;
    }

    .p-contenedor {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        background-image: url("/SO2026patron2.jpg");
        background-repeat: repeat;
        background-size: 75px, 75px;
        width:  100%;
        height: auto;

        border-style: groove;
        padding: 1% 10%;
    }

    .info-p {
        width: 49%;
        text-align: justify;
    }

    div.taller-container {
        display: grid;
        justify-content: center;
        grid-template-columns: 49%;
    }

    #buttons-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-content: start;
    }

    .div-Master {
         width: 25%;
         border-style: groove;
    }

    img.img-Master {
          width: 100%;
    }
}


h1 {
    font-family: "Bitter", serif;
    font-optical-sizing: auto;
    font-weight: 300; 
    font-style: normal;
    letter-spacing: .1rem;
}

h2 {
    font-family: "Bitter", serif;
    font-optical-sizing: auto;
    font-weight: 400; 
    font-style: normal;
    letter-spacing: .1rem;
}
p { 
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;  
    line-height: 1.9;
    
}

li {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
}

label {

    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;  
    

}

@media (max-width: 800px) {
    #reviews-container {
        display: flex;
        gap: 1em;
        flex-direction: column;
        justify-content: space-evenly;
        align-content: start;
        margin: 4rem;
    }
    
    .reviews {
        width: 85%;
        margin: 4%;
    }
    
    .review-text {
        width: 100%;
    }
    input.sc-image {
        height: 100%;
        width: auto;
    }
    
    footer {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-content: start;
        height: fix-content;
        background-image: url("/SO2026Fondo2.jpg");
        background-size: cover;
        border-top: 2px double;
        border-top-color: #5d5d64;
    }
    #social-media-buttons {
        display: grid;
        grid-template-columns: 35%;
        gap: 2rem;
        grid-auto-rows: 5rem;
    }
}

@media (min-width: 801px) {

    #reviews-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        margin: 4rem;
        gap: 1em;
    }
    
    .reviews {
        width: 25%;
        margin: 4%;
    }
    
    .review-text {
        width: 40%;
    }
    input.sc-image {
        max-height: 187px;
        height: 47%;
        width: auto;
    }
    
    footer {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        height: fix-content;
        background-image: url("/SO2026Fondo2.jpg");
        background-size: cover;
        border-top: 2px double;
        border-top-color: #5d5d64;
    }
    #social-media-buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    
}



p.footer-text {
    color: #5d5d64;
    text-decoration:none; 
}

a.footer-links {
    color: #5d5d64;
    text-decoration:none; 
}