body {
    height: 100vmin;
}

main {
    overflow: auto;
    height: 85vmin;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
}

#video {
    position: relative;
    width: 100%;
}
video {
    height: auto;
    width: 100%;
    object-fit: cover;
}

#slogan{
    font-family: PlayFair;
    font-style: italic;
    text-align: center;
    margin: 12vmin 4.5vmin 3vmin 4.5vmin;
    font-size: 2rem;
}

#equipment {
    width: 100%;
    padding: 10vmin;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
#equipment .title {
    width: 100%;
    font-size: 2rem;
    font-family: PlayFair
    text-align: center;
    margin-bottom: 3rem;
}
#equipment .content {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
#items {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.item {
    position: relative;
    margin: 0 4.5vmin;
    width: calc(25% - 9vmin);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.item-name {
    font-family: PlayFair;
    font-size: 1.6rem;
    font-weight: 600;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    z-index: 20;
    margin-right: -3vmin;
    text-align: center;
}
.item-image {
    width: 70%;
    margin-right: 3vmin;
    filter: drop-shadow(5px 5px 5px #000000);
    z-index: 20;
}
.item-description {
    width:  calc(25% - 9vmin);
    margin: 0 4.5vmin;
    text-align: center;
    margin-top: 1.5vmin;
}
.item-bg {
    position: absolute;
    width: 100%;
    height: 50%;
    top: 50%;
    transform: translate(0, -50%);
    background: rgb(160,160,160);
    background: linear-gradient(90deg, rgba(160,160,160,0.8) 0%, rgba(160,160,160,0.4) 35%, rgba(160,160,160,0.3) 100%);
    border-radius: 20px;
    z-index: 1;
}
#facts div{
    width:12%;
    text-align: center;
    margin:0 4vmin;
}
#facts img {
    width: 100%;
}

#tableware {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background: rgba(230, 230, 230);
    padding: 10vmin 0;
    justify-content: center;
}
#tableware .title:first-child {
    font-size: 2rem;
    font-family: PlayFair
    width: 100%;
    text-align: center;
    margin-bottom: 3rem;
}
#tableware .title:not(:first-child) {
    position: relative;
    font-family: Public Sans;
    font-weight: 600;
    font-size: 1.25rem;
    padding: 0 3vmin;
    margin: 0 6vmin;
    width: calc(25% - 8vmin);
}
#tableware img {
    width: 100%;
}

#services {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 10vmin 0;
    justify-content: center;
}
#services .title:first-child {
    font-size: 2rem;
    font-family: PlayFair
    width: 100%;
    text-align: center;
    margin-bottom: 3rem;
}
#services .title:not(:first-child) {
    position: relative;
    font-family: Public Sans;
    font-weight: 600;
    font-size: 3rem;
    margin: 0 4vmin;
    height: 14rem;
    text-align: center;
    vertical-align: middle;
    border: solid 1px rgba(230, 230, 230);
    background:rgba(235, 235, 235);
    padding: 0 3vmin;
    width: calc(33% - 8vmin);
    line-height: 14rem;
}

#about {
    width: 100%;
    padding: 10vmin 10vmin 10vmin 10vmin;
}
#about .title {
    font-size: 2rem;
    text-align: left;
    font-family: PlayFair
}
#about .content {
    width: 100%;
    display: flex;
    justify-content: center;
}
#about .content .col:first-child {
    width: 60%;
    padding: 3vmin 9vmin;
}
#about .content .col:last-child {
    width: 40%;
    padding: 3vmin 3vmin 3vmin 9vmin;
}
#about .subtitle {
    width: 100%;
    padding-left: 30vmin;
    padding-top: 4.5vmin;
    font-size: 1.4em;
    font-weight: 450;
}
#about p {
    font-size: 1.25rem;
    text-align: justify;
}
#about p.link {
    text-align: right;
}

#parallax.parallax {
    background-image: url("../images/equipo.jpg");
}
.parallax {
    width: 100%;
    min-height: 400px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#philosophy {
    width: 100%;
    padding: 10vmin 10vmin 10vmin 10vmin;
}
#philosophy .title {
    font-size: 2rem;
    text-align: left;
    font-family: PlayFair
}
#philosophy .content {
    width: 100%;
    display: flex;
    justify-content: center;
}
#philosophy .content .col:first-child {
    width: 40%;
    padding: 3vmin 9vmin;
}
#philosophy .content .col:last-child {
    width: 60%;
    padding: 3vmin 3vmin 3vmin 9vmin;
}
#philosophy p {
    font-size: 1.25rem;
    text-align: justify;
}
#philosophy p.link {
    text-align: right;
}
#more-about, #more-philosophy, #more-clients, #more-clients-2, #less-clients {
    display: none;
    font-size: 1.1em;
    text-align: right;
    margin-top: 2vmin;
    margin-left: auto;
    text-decoration: underline;
    cursor: pointer;
}

.divider {
    border-right: solid 1px rgba(0, 0, 0, 0.3);
}

#second-video {
    width: 100%;
}

#second-video .video {
    width: 100%;
    object-fit: cover;
    overflow: hidden;
}

#clients {
    width: 100%;
    padding: 10vmin 10vmin 10vmin 10vmin;
}
#clients .title {
    font-size: 2rem;
    text-align: left;
    font-family: PlayFair
}
#clients .content {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 6vmin 6vmin 4vmin 6vmin;
    flex-wrap: wrap;
}
#clients .content.more-1, #clients .content.more-2 {
    display:none;
    padding-top: 0;
}
#clients .content:not(.more-1), #clients .content:not(.more-2) {
    padding-bottom: 0;
}
#clients p {
    font-size: 1.25rem;
    text-align: justify;
}
#clients p#more-clients, #clients p#more-clients-2, #clients p#less-clients {
    text-align: right;
}
#more-clients, #more-clients-2, #less-clients {
    margin-top: 0;
}
#more-clients {
    display: block;
}
.client {
    width: 25%;
    padding: 0 3vmin 6vmin 3vmin;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.client img:not(.award) {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    margin-bottom: 0.35em;
    -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
}
.awards {
    display: flex;
    align-items: center;
}

#brasa-sabor {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
#brasa-sabor img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 4.5/3;
}
#brasa, #cazuela {
    position: relative;
    width: 50%;
}
#brasa .title, #cazuela .title {
    position: absolute;
    font-family: Public Sans;
    font-weight: 600;
    left:50%;
    transform: translate(-50%, 0);
    font-size: 28vmin;
    color: white;
}
#brasa .title {
    top: -7vmin;
}
#cazuela .title {
    bottom: -10vmin;
}

#fotos {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
#fotos {
    justify-content: space-evenly;
    padding: 10vmin;
}
#fotos img {
    width: 350px;
    aspect-ratio: 4/3;
    object-fit: cover;
}


/*
subtitle {
    width: 100%;
    padding-left: 30vmin;
    padding-top: 4.5vmin;
    font-size: 1.4em;
    font-weight: 450;
}
*//*
p + p {
    padding-top: 0.8rem;
}
*/


#footer, #footer2 {
    width: 100%;
    padding: 4vmin 10vmin;
    background: black;
    color: white;
    display: flex;
    justify-content: space-between;
}
#footer > div:not(:nth-child(2)) {
    display:flex;
    align-items:center;
}
#footer > div:nth-child(2) {
    display:flex;
    flex-direction: column;
    justify-content: center;
}
#footer > div:first-child img {
    height: 10vmin;
}
#footer > div p + p, #footer2 > div p + p  {
    padding-top: 0;
}
#footer2 div p {
    display: inline-block;
}
#footer2 > div:first-child {
    margin-top: .55em;
}
#footer2 {
    justify-content: center;
    padding-top: 0;
}
#footer2 a, #footer a {
    color: white;
    cursor: pointer;
}
#footer2 a:hover, #footer a:hover {
    font-style: italic;
}

#escudo img {
    width: 200px;
}


@media (max-aspect-ratio: 4/3) {

    html {
        overflow: auto;
    }

    body {
        padding-top: 15vmin;
    }

    main {
        flex-direction: column;
        height: calc(100vh - 15vmin);
        justify-content: flex-start;
        height: auto;
    }

    video {
        height: auto;
    }

    #slogan {
        font-size: 1.5rem;
    }

    .item {
        width: 100%;
        margin: 6vmin 0 0 0;
    }
    .item-description {
        width: 100%;
        margin: 3vmin 0 6vmin 0;
    }
    .item-description:first-child {
        order: 1;
    }
    .item-description:nth-child(2) {
        order: 5;
    }
    .item:nth-of-type(1) {
        order: 1;
    }
    .item-description:nth-of-type(1) {
        order: 2;
    }
    .item:nth-of-type(2) {
        order: 3;
    }
    .item-description:nth-of-type(2) {
        order: 4;
    }
    .item:nth-of-type(3) {
        order: 5;
    }
    .item-description:nth-of-type(3) {
        order: 6;
    }
    .item:nth-of-type(4) {
        order: 7;
    }
    .item-description:nth-of-type(4) {
        order: 8;
    }
    #facts {
        flex-wrap: wrap;
    }
    #facts div {
        width: calc(50% - 8vmin);
        margin: 4vmin;
    }

    #tableware .title:not(:first-child) {
        width: calc(100% - 12vmin);
        margin-bottom: 6vmin;
    }

    #services .title:not(:first-child) {
        width: calc(100% - 12vmin);
        margin-bottom: 6vmin;
    }

    #about .content{
        flex-wrap: wrap;
        height: auto;
    }
    #about .content .col:first-child, #about .content .col:last-child {
        width: 100%;
        padding: 0;
    }
    #about .content .col:last-child {
        padding-top: 1.25rem;
    }
    #about .subtitle {
        padding: 4.5vmin 0 0 0;
        text-align: center;
    }
    .about, .philosophy {
        display: none;
    }

    #philosophy .content{
        flex-wrap: wrap;
        height: auto;
        padding: 0;
    }
    #philosophy .content .col:first-child, #philosophy .content .col:last-child {
        width: 100%;
        padding: 0;
    }
    #philosophy .content .col:last-child {
        padding-top: 1.25rem;
    }
    #more-about, #more-philosophy {
        display: block;
        cursor: pointer;
    }

    #clients .content {
        padding: 6vmin 0 4vmin 0;
    }
    .client {
        width: 50%;
    }

    #brasa, #cazuela {
        width: 100%;
    }
    #fotos img {
        width: 100%;
    }

    .divider {
        display: none;
    }

    #footer {
        flex-direction: column;
        align-items: center;
    }
    #footer > div {
        margin: 6vmin 0;
    }
    #footer2 {
        flex-direction: column-reverse;
        align-items: center;
    }
    #footer2 span {
        display: none;
    }
    #footer2 br {
        display: block;
    }
    #copyright {
        margin-top: 4vmin;
    }
    #footer2 div, #footer div:nth-child(2) {
        min-width: 300px;
    }
    #footer2 div p {
        display: block;
    }
    #escudo img {
        width: 100px;
    }

}

@media (max-aspect-ratio: 16/9) {
    #brasa .title, #cazuela .title {
        font-size: 22vmin;
    }
}

@media only screen and (max-device-width: 1366px) {
    .parallax {
        background-attachment: scroll;
    }
}
@media only screen and (max-aspect-ratio: 1) {
    .parallax {
        min-height: 200px;
    }
}