.bgImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.heroRow {
    width: 100%;
    height: 100vh;
}

.bgImage {
    width: 100%;
    height: 100%;
}
.heroRow {
    width: 100%;
    height: 100vh;
    position: relative;
}

.heroText {
    position: absolute;
    top: 35%;
    left: 10%;
}

.heroText h1 {
    font-family: 'General Sans';
    font-weight: 600;
    color: white;
    font-size: 4em;
    padding-right: 40%;
    margin: 0;
    padding-bottom: 2vh;
}

.heroText p {
    font-family: 'General Sans';
    font-weight: 300;
    color: white;
    font-size: 2em;
    padding-right: 50%;
    margin: 0;
    padding-bottom: 4vh;
}

a.knowMore {
    font-family: 'General Sans';
    font-weight: 300;
    color: white;
    text-decoration: unset;
    background-color: #7eb056;
    padding: 0.4em 1.4em;
    border-radius: 10px;
    clip-path: polygon(5% 0, 95% 0, 100% 25%, 100% 75%, 95% 100%, 5% 100%, 0 75%, 0 25%);
    display: block;
    text-align: center;
    width: fit-content;
}

.heroRow a {
    display: block;
    width: 22%;
    text-align: center;
    font-size: 1.7em;
}

.title>span {
    font-family: 'General Sans';
    font-weight: 300;
    color: #684b2b;
    text-align: center;
    font-size: 1.3em;
}

.title h2 {
    font-family: 'General Sans';
    font-weight: 600;
    color: #1a1a1a;
    font-size: 2.5em;
    text-align: center;
    margin-bottom: 0;
}

.title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.title h3 {
    color: #7eb156;
    font-size: 1.2em;
    font-family: 'General Sans';
    font-weight: 300;
    margin: 0;
}

div#quienes-somos p {
    color: #666666;
    font-family: 'General Sans';
    text-align: center;
    padding: 0 29%;
    font-size: 1.2em;
    line-height: 140%;
}

div#quienes-somos a {
    margin: 0 auto;
    width: 9%;
    font-size: 1.4em;
}

div#quienes-somos {
    background-color: #e6eede;
    padding: 6% 0;
    position: relative;
}
.leftDrawing svg {
    width: 100%;
    height: 100%;
}

.leftDrawing {
    position: absolute;
    height: 70vh;
    top: 0;
    left: 0%;
    transform: translate(-35%,10%);
    z-index: 10;
}

.rightDrawing {
    position: absolute;
    top: 0%;
    left: 107%;
    transform: translateX(-100%);
    z-index: 10;
    height: 100%;
    width: 29%;
    overflow: clip;
}

.rightDrawing svg {
    width: 100%;
    height: 100%;
    transform: translate(6%,10%);
}

.row2BigImage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.row2BigImage {
    width: 70%;
    height: 100%;
}

.row2SmallImage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}



.row2Images {
    display: flex;
    flex-direction: row;
    width: 50%;
    gap: 1em;
}

.row2SmallerImages {
    display: flex;
    flex-direction: column;
    width: 35%;
    height: 100%;
    gap: 1em;
}


.row2SmallImage {
    width: 100%;
    height: 50%;
}

.row2Text>span {
    font-family: 'General Sans';
    font-weight: 300;
    color: #684b2b;
    font-size: 1.3em;
}

div#que-hacemos {
    display: flex;
    flex-direction: row;
    padding: 0 10%;
    gap: 2%;
}

.row2Text h2>span {
    color: #7eb056;
}

.row2Text h2 {
    font-family: 'General Sans';
    font-weight: 600;
    color: #1a1a1a;
    font-size: 2.5em;
    margin-bottom: 0;
    padding-right: 40%;
}



.row2Text h3 {
    font-family: 'General Sans';
    color: #7eb156;
    font-weight: 300;
    font-size: 1.2em;
}

.row2Text p {
    color: #666666;
    font-family: 'General Sans';
    font-size: 1.2em;
    line-height: 140%;
    padding-right: 35%;
}

.row2Text {
    display: flex;
    flex-direction: column;
    width: 50%;
    padding: 3% 0;
}

.row2Text a.knowMore {
    width: 25%;
    font-size: 1.3em;
}

div#que-hacemos {
    display: flex;
    flex-direction: row;
    padding: 0 10%;
    gap: 2%;
    padding-top: 10vh;
}

div#desmogue {
    padding-top: 10vh;
}

.row3Blurbs {
    display: flex;
    flex-direction: row;
    gap: 1em;
    padding: 0 10%;
    margin-top: 5vh;
}

.row3Blurb h3 {
    font-family: 'General Sans';
    font-weight: 600;
    color: black;
    font-size: 2.5em;
    margin: 0;
    margin-bottom: 2vh;
}
.row3Blurb h3>span {
    color: #7eb056;
}



.row3Blurb p {
    color: #666666;
    font-family: 'General Sans';
    font-size: 1.4em;
    line-height: 140%;
}

.row3Blurb {
    background-color: #f4f4f4;
    aspect-ratio: 1.7/1;
    width: 50%;
    padding: 5%;
}

div#productos {
    margin-top: 10vh;
}

.row4Blurbs {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 8%;
    padding-bottom: 5vh;
}

.row4Blurb {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.row4BlurbImage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.row4BlurbImage {
    width: 20vw;
    height: 20vw;
    background-color: #e6eede;
    clip-path: polygon(  20% 0, 80% 0,  100% 16%, 100% 80%,  80% 100%, 20% 100%,  0 80%, 0 16%);
}

.row4Buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

a.dimensions, a.moreData {
    font-family: 'General Sans';
    font-weight: 300;
    color: white;
    text-decoration: unset;
    background-color: #7eb056;
    padding: 0.4em 1.4em;
    border-radius: 10px;
    clip-path: polygon(5% 0, 95% 0, 100% 25%, 100% 75%, 95% 100%, 5% 100%, 0 75%, 0 25%);
    display: block;
    text-align: center;
    width: fit-content;
    margin-top: 1vh;
}

a.dimensions {
    background-color: black;
}

a.moreData {
    background-color: #f4f4f4;
    color: black;
}
.row4Buttons a {
    width: 100%;
    cursor: pointer;
    font-size: 1.2em;
}

.row4Blurb>h2 {
    font-family: 'General Sans';
    font-weight: 600;
    color: black;
    font-size: 1.7em;
    padding: 0 15%;
    text-align: center;
}

div#productos>.title {
    margin-bottom: 8vh;
}

.kdRow {
    width: 100%;
    height: 100%;
    padding: 0 5%;
    box-sizing: border-box;
    margin-top: 6vh;
}

.kdRow img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.headerNav a {
    font-family: 'General Sans';
    color: white;
    text-decoration: unset;
    font-size: 1.1em;
    white-space: nowrap;
}

@media only screen and (max-width:1600px){
.heroText h1 {
    font-size: 3.4em;
}

.heroText p {
    font-size: 1.6em;
}
.heroRow a {
    width: 20%;
    font-size: 1.5em;
}
.leftDrawing {
    height: 60vh;
    transform: translate(-39%,36%);
}
div#quienes-somos p {
    font-size: 1.2em;
}
.rightDrawing svg {
    transform: translate(12%,10%);
}
.row4Blurbs {
    gap: 1%;
}


.row2Text p {
    font-size: 1.1em;
    padding-right: 35%;
    margin: 0;
    margin-bottom: 3vh;
}
.row2SmallerImages {
    display: flex;
    flex-direction: column;
    width: 30%;
    height: 70%;
    gap: 1em;
    margin: auto;
}
}

@media only screen and (max-width:1100px){
    html body div#quienes-somos a {
    width: 30%;
}
html body .leftDrawing {
    transform: translate(-39%,66%);
}
html body .rightDrawing {
    transform: translateX(-90%);
    width: 39%;
}
html body div#que-hacemos {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

html body .row2Text * {
    padding-right: unset!important;
    text-align: center;
}
html body .row2Text a.knowMore {
    width: 40%;
    padding: 0.4em 1.4em!important;
    margin: 0 auto;
}
html body .row3Blurbs {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
html body .row4Blurbs {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
html body .row4Blurb {
    margin-bottom: 5vh;
}




}

@media only screen and (max-width:550px){
html body .heroText h1 {
    font-size: 2.3em;
    padding-right: 3vh;
}
html body .heroText p {
    font-size: 1.3em;
    padding-right: 35%;
}
html body .heroRow a {
    width: 32%;
    font-size: 1.3em;
}

html body .leftDrawing, .rightDrawing {
    display: none;
}
html body div#quienes-somos p {
    padding: 0 5%;
}
html body html body div#quienes-somos a {
    width: 32%;
}
html body .row2Images {
    width: 100%;
}
html body .row2Text {
    width: 100%;
    padding: 3% 0;
}
html body .row3Blurb {
    width: 100%;
}
html body .row3Blurb h3 {
    font-family: 'General Sans';
    font-weight: 600;
    color: black;
    font-size: 2.1em;
    margin: 0;
    margin-bottom: 2vh;
}
html body .row4BlurbImage {
    width: 40vw;
    height: 40vw;
}

}