@charset 'utf-8';

/** keyframes **/

@keyframes scroll {
    0% { transform: translateY(-2rem) }
    100% { transform: translateY(0rem) }
}


/** section-filme **/

#filme {
    z-index: 3;
    margin: -5% 0 0;
    padding: 0 0 10.0rem;
    position: relative;
}

#filme .play {
    z-index: 2;
    overflow: hidden;
    position: relative;
    max-width: 105.0rem;
}

#filme .play:after {
    inset: -1px;
    z-index: 2;

    content: '';
    display: block;
    position: absolute;
    transition: background 0.3s ease-out;

    background: rgba(0,0,0, 0.3);
}

#filme .play p {
    color: #ffffff;

    left: 6rem;
    right: 6rem;
    bottom: 5.5rem;
    padding: 2.0rem 0 0;
    z-index: 3;
    position: absolute;

    font-size: 1.2rem;
    font-weight: 400;
    font-family: 'Sora';

    letter-spacing: 0.1em;
    text-transform: uppercase;

    border-top: 1px solid #ffffff;
}

#filme .play p svg { width: 1.0rem; }

#filme .play h2 {
    color: #F1EBE3;

    top: calc(50% - 10rem);
    left: 0;
    right: 0;
    z-index: 3;

    font-size: 1.4rem;
    font-weight: 700;
    font-family: 'Sora';

    text-align: center;
    letter-spacing: 0.2em;
    text-transform: uppercase;

    position: absolute;
}

#filme .play .circle {
    z-index: 3;

    top: 50%;
    left: 50%;
    width: 11.0rem;

    position: absolute;
    transform: translate(-50%,-50%);
    transition: transform 0.3s ease-out;
}

#filme .play .image {
    display: block;
    transition: transform 0.3s ease-out;
}

#filme.playing .play {
    cursor: auto;
}

#filme.playing .play:after { display: none }




@media (any-hover: hover) {
    #filme .play:hover:after {
        background: rgba(0,0,0, 0.6);
    }

    #filme .play:hover .circle {
        transform: translate(-50%,-50%) scale(1.1);
    }

    #filme .play:hover .image {
        transform: scale(1.1);
        transition: transform 4s ease-out;
    }
}

@media (max-width: 1240px) {
    #filme {
        padding: 6.0rem 0;
    }

    #filme .play {
        max-width: calc(100% - 40px);
    }

    #filme .play .circle {
        width: 6rem;
    }

    #filme .play h2 {
        top: 1.5rem;
        left: 1rem;
        right: 1rem;
        font-size: 1.2rem;
    }

    #filme .play p {
        left: 1rem;
        right: 1rem;
        bottom: 1.5rem;
        padding: 1rem 0 0;
        font-size: 1.0rem;
    }
}


/** section-view **/

#view,
#view .wrapper {
    position: relative;
}

#view h2 {
    color: #000000;

    top: 0;
    left: 8.3333%;
    width: 50%;
    z-index: 3;

    font-size: 1.8rem;
    font-weight: 400;
    line-height: 2.8rem;
    font-family: 'Sora';

    letter-spacing: 0.05em;
    text-transform: uppercase;

    position: absolute;
}

#view h2 strong {
    font-weight: 700;
}

#view h3 {
    color: white;
    z-index: 3;

    left: 8.3333%;
    bottom: 5.5rem;
    position: absolute;

    font-size: 1.2rem;
    font-weight: 400;
    line-height: 2.4rem;
    font-family: 'Sora';

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

#view svg {
    left: calc(50% - 1.5rem);
    width: 3.0rem;
    bottom: 5.0rem;
    position: absolute;
    animation: scroll 4s infinite alternate;
}

#view:after {
    z-index: 2;

    top: -2px;
    left: 0;
    right: 0;
    height: 18.0rem;

    content: '';
    display: block;
    position: absolute;

    background: linear-gradient(180deg, rgba(241,235,227, 1.0) 0%,
                                        rgba(241,235,227, 0.8) 60%,
                                        rgba(241,235,227, 0.0) 100%);
}

@media (max-width: 1240px) {
    #view h2 {
        left: 20px;
        width: calc(100% - 40px);
        font-size: 1.2rem;
        line-height: 1.8rem;
    }

    #view h3 {
        left: 20px;
        width: calc(100% - 40px);
    }

    #view svg {
        left: calc(50% - 1rem);
        width: 2rem;
        bottom: 1rem;
    }

    #view .cover {
        height: 120vw;
    }

    #view:after {
        height: 8rem;
    }
}


/** section-o-projeto **/

#o-projeto {
    padding: 5.0rem 0 10.0rem;
}

#o-projeto p,
#o-projeto h2,
#o-projeto h3,
#o-projeto button {
    color: #000000;

    font-size: 1.4rem;
    font-weight: 400;
    line-height: 2.4rem;
    font-family: 'Sora';

    letter-spacing: 0.05em;
}

#o-projeto p {
    margin-bottom: 2.6rem;
}

#o-projeto h2 {
    font-size: 1.0rem;
    line-height: 3.4rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 1.4rem;
}

#o-projeto h3 {
    font-size: 1.8rem;
    line-height: 2.8rem;
    text-transform: uppercase;
    margin-bottom: 3.4rem;
}

#o-projeto button {
    display: block;

    color: #E6E6E6;
    background: #312331;

    margin: 5.5rem 0 0;
    padding: 0 1.8rem;

    line-height: 4.2rem;
    border-radius: 0.2rem;
    text-transform: uppercase;

    transition: transform 0.3s ease-out;
}

#o-projeto .left {
    width: 33.3333%;
    margin: 0 8.3333%;
}

#o-projeto .right {
    position: relative;
}

#o-projeto .right .splide {
    width: calc(100% + (100vw - 1200px)/2);
}

#o-projeto .right .splide .splide__track {
    max-height: 100%;
}

#o-projeto .right .splide .splide__slide {
    position: relative;
}

#o-projeto .right .splide .splide__slide:after {
    left: 0;
    right: 0;
    bottom: 0;
    height: 8rem;

    content: '';
    display: block;
    position: absolute;

    background: linear-gradient(0deg, #D2C7B9FF 0%,
                                      #D2C7B999 60%,
                                      #D2C7B900 100%);
}

#o-projeto .right .splide .splide__arrows {
    z-index: 2;

    left: 0;
    right: 0;
    bottom: 1.5rem;

    position: absolute;
}

#o-projeto .right .splide .splide__arrows .splide__arrow {
    width: 3.2rem;
    height: 3.2rem;
    margin: 0 0 0 1.6rem;
    padding: 0;
    opacity: 1;

    display: flex;
    position: static;

    border: 1px solid #FFFFFF;
    border-radius: 50%;

    transform: none;
    background: transparent;
    transition: background 0.3s ease-out;
}

#o-projeto .right .splide .splide__arrows .splide__arrow svg {
    width: 1.3rem;
}

#o-projeto .right .splide .splide__arrows .splide__arrow svg polygon {
    transition: fill 0.3s ease-out;
}


@media (any-hover: hover) {
    #o-projeto button:hover {
        transform: scale(1.1);
    }

    #o-projeto .right .splide .splide__arrows .splide__arrow:hover {
        background: #ffffff;
    }

    #o-projeto .right .splide .splide__arrows .splide__arrow:hover svg polygon {
        fill: #D2C7B9;
    }
}

@media (max-width: 1240px) {
    #o-projeto {
        padding: 3.0rem 0;
    }

    #o-projeto h2 {
        font-size: 0.8rem;
        line-height: 2.2rem;
        margin-bottom: 0.8rem;
    }

    #o-projeto h3 {
        font-size: 1.2rem;
        line-height: 1.8rem;
        margin-bottom: 2.2rem;
    }

    #o-projeto p {
        font-size: 1.0rem;
        line-height: 1.6rem;
        margin-bottom: 1.8rem;
    }

    #o-projeto button {
        font-size: 1.0rem;
        margin: 3.6rem 0 0;
        padding: 0 1.2rem;
        line-height: 3.2rem;
    }

    #o-projeto .left {
        width: calc(100% - 40px);
        margin: 0 20px;
    }

    #o-projeto .right,
    #o-projeto .right .splide, {
    #o-projeto .right .cover
        width: 100vw;
        height: 80vw;
    }


    #o-projeto .right {
        margin: 4rem 0 0;
    }

    #o-projeto .right .splide .splide__slide {
        width: calc(100% - 40px);
    }

    #o-projeto .wrapper {
        max-width: 100%;
        flex-wrap: wrap;
    }
}


/** section-galeria **/

#galeria {
    padding: 0 0 8.0rem;
}

#galeria h2,
#galeria h3 {
    color: #312331;

    font-size: 1.0rem;
    font-weight: 400;
    line-height: 3.4rem;
    font-family: 'Sora';

    letter-spacing: 0.2em;
    text-transform: uppercase;

    margin-bottom: 3.2rem;
}

#galeria h3 {
    font-size: 1.8rem;
    line-height: 2.8rem;
    letter-spacing: 0.1em;
    margin-right: 8.3333%;
}

#galeria h3 strong {
    display: block;
    font-weight: 700;
}

#galeria .splide .splide__slide {
    width: 100%;
    position: relative;
}

#galeria .splide .splide__slide .label {
    color: #ffffff;

    z-index: 3;
    right: 1.6rem;
    bottom: 1.5rem;
    position: absolute;

    font-size: 1.2rem;
    font-weight: 600;
    line-height: 3.2rem;
    font-family: 'Sora';

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

#galeria .splide .splide__slide .cover {
    height: 72rem;
}

#galeria .splide .splide__slide:after {
    z-index: 2;

    left: 0;
    right: 0;
    bottom: 0;
    height: 8rem;

    content: '';
    display: block;
    position: absolute;

    background: linear-gradient(0deg, #000000FF 0%,
                                      #00000000 100%);
}

#galeria .splide .splide__arrows {
    z-index: 2;

    left: 0;
    right: 0;
    bottom: 1.5rem;

    position: absolute;
}

#galeria  .splide .splide__arrows .splide__arrow {
    width: 3.2rem;
    height: 3.2rem;
    margin: 0 0 0 1.6rem;
    padding: 0;
    opacity: 1;

    display: flex;
    position: static;

    border: 1px solid #FFFFFF;
    border-radius: 50%;

    transform: none;
    background: transparent;
    transition: background 0.3s ease-out;
}

#galeria  .splide .splide__arrows .splide__arrow svg {
    width: 1.3rem;
}

#galeria  .splide .splide__arrows .splide__arrow svg polygon {
    transition: fill 0.3s ease-out;
}


@media (any-hover: hover) {
    #galeria  .splide .splide__arrows .splide__arrow:hover {
        background: #ffffff;
    }

    #galeria  .splide .splide__arrows .splide__arrow:hover svg polygon {
        fill: #000000;
    }
}

@media (max-width: 1240px) {
    #galeria {
        padding: 0 0 3rem;
    }

    #galeria h2,
    #galeria h3 {
        width: 100%;
    }

    #galeria h2 {
        font-size: 0.8rem;
        line-height: 2.2rem;
        margin-bottom: 0.8rem;
    }

    #galeria h3 {
        font-size: 1.2rem;
        line-height: 1.8rem;
        margin-bottom: 2.2rem;
    }

    #galeria .splide .splide__slide {
        width: calc(100% - 40px);
        margin: 0;
    }

    #galeria .splide .splide__slide .cover {
        height: 60vw;
    }

    #galeria .splide .splide__slide .label {
        right: 1.5rem;
        bottom: 1rem;
        font-size: 1rem;
        line-height: 2rem;
    }

    #galeria .splide .splide__arrows {
        right: auto;
    }

    #galeria .wrapper {
        margin: 0 20px;
        flex-wrap: wrap;
    }
}


/** section-implantacao **/

#implantacao {
    position: relative;
}

#implantacao:after,
#implantacao:before {
    z-index: 2;

    top: -2px;
    left: 0;
    right: 0;
    height: 26.0rem;

    content: '';
    display: block;
    position: absolute;

    background: linear-gradient(180deg, rgba(241, 235, 227, 1.0) 0%,
                                        rgba(241, 235, 227, 0.8) 60%,
                                        rgba(241, 235, 227, 0.0) 100%);
}

#implantacao:before {
    top: auto;
    bottom: 0;
    height: 12.0rem;

    background: linear-gradient(0deg, rgba(241, 235, 227, 1.0) 0%,
                                      rgba(241, 235, 227, 0.0) 100%);
}

#implantacao p,
#implantacao h2,
#implantacao h3,
#implantacao a {
    color: #000000;

    font-size: 1.4rem;
    font-weight: 400;
    line-height: 2.4rem;
    font-family: 'Sora';

    letter-spacing: 0.05em;
}

#implantacao p {
    max-width: 38rem;
}

#implantacao h2 {
    font-size: 1.0rem;
    line-height: 3.4rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 1.4rem;
}

#implantacao h3 {
    font-size: 1.8rem;
    line-height: 2.8rem;
    text-transform: uppercase;
    margin-bottom: 3.4rem;
}

#implantacao h3 strong {
    display: block;
    font-weight: 700;
}

#implantacao a {
    display: block;

    color: #E6E6E6;
    background: #312331;

    margin: 0 0 1.8rem;
    padding: 0 1.8rem;

    line-height: 4.2rem;
    border-radius: 0.2rem;
    text-transform: uppercase;

    transition: transform 0.3s ease-out;
}

#implantacao .left {
    margin-left: 8.3333%;
}

#implantacao .right {
    margin-right: 8.3333%;
}

#implantacao .wrapper {
    z-index: 3;

    top: 0;
    left: 0;
    right: 0;

    position: absolute;
}


@media (any-hover: hover) {
    #implantacao a:hover {
        transform: scale(1.1);
    }
}

@media (max-width: 1240px) {
    #implantacao h2 {
        font-size: 0.8rem;
        line-height: 2.2rem;
        margin-bottom: 0.8rem;
    }

    #implantacao h3 {
        font-size: 1.2rem;
        line-height: 1.8rem;
        margin-bottom: 2.2rem;
    }

    #implantacao p {
        font-size: 1.0rem;
        line-height: 1.6rem;
        margin-bottom: 1.8rem;
    }

    #implantacao a {
        display: inline-flex;
        font-size: 1.0rem;
        margin: 0 0 1rem;
        padding: 0 1.2rem;
        line-height: 3.2rem;
    }

    #implantacao .cover {
        height: 50rem;
    }

    #implantacao .left,
    #implantacao .right {
        width: calc(100% - 40px);
        margin: 0 20px;
    }

    #implantacao .wrapper {
        flex-wrap: wrap;
    }
}


/** section-localizacao **/

#localizacao {
    padding: 10.0rem 0 6.0rem;
    background: url(./images/localizacao-bg.jpg);
    background-size: cover;
    background-position: bottom right;
}

#localizacao p,
#localizacao h2,
#localizacao h3 {
    color: #000000;

    font-size: 1.4rem;
    font-weight: 400;
    line-height: 2.4rem;
    font-family: 'Sora';

    letter-spacing: 0.05em;
}

#localizacao p {
    max-width: 40rem;
}

#localizacao h2 {
    font-size: 1.0rem;
    line-height: 3.4rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 1.4rem;
}

#localizacao h3 {
    font-size: 1.8rem;
    line-height: 2.8rem;
    text-transform: uppercase;
}

#localizacao h3 strong {
    font-weight: 700;
}

#localizacao .btn {
    color: #E6E6E6;
    background: #312331;

    padding: 0 1.8rem;

    font-size: 1.4rem;
    font-weight: 400;
    line-height: 4.2rem;
    font-family: 'Sora';

    letter-spacing: 0.05em;
    border-radius: 0.2rem;
    text-transform: uppercase;

    transition: transform 0.3s ease-out;
}

#localizacao .btn svg {
    width: 1.8rem;
    margin: 0 0.5rem 0 0;
}

#localizacao .btn svg path { fill: #E6E6E6 }

#localizacao .left {
    margin-left: 16.6666%;
}

#localizacao .right {
    margin-right: 8.3333%;
    text-align: right;
}

#localizacao .image {
    width: 16%;
}

#localizacao .image:nth-child(1) .cover { height: 45.0rem }
#localizacao .image:nth-child(2) { padding: 22rem 0 0 }
#localizacao .image:nth-child(2) .cover { height: 34.0rem }
#localizacao .image:nth-child(3) { padding: 14rem 0 0 }
#localizacao .image:nth-child(3) .cover { height: 50.0rem }
#localizacao .image:nth-child(4) { padding: 18rem 0 0 }
#localizacao .image:nth-child(4) .cover { height: 52.0rem }

#localizacao .zoom {
    width: 36%;
    margin: 35rem 0 0;
    display: block;
    transition: filter 0.3s ease-out,
                transform 0.3s ease-out;
}

@media (any-hover: hover) {
    #localizacao .btn:hover {
        transform: scale(1.1);
    }

    #localizacao .zoom:hover {
        filter: brightness(0.8);
        transform: scale(1.05);
    }
}

@media (max-width: 1240px) {
    #localizacao {
        padding: 3rem 0;
    }

    #localizacao h2 {
        font-size: 0.8rem;
        line-height: 2.2rem;
        margin-bottom: 0.8rem;
    }

    #localizacao h3 {
        font-size: 1.2rem;
        line-height: 1.8rem;
        margin-bottom: 2.2rem;
    }

    #localizacao p {
        font-size: 1.0rem;
        line-height: 1.6rem;
        margin-bottom: 1.8rem !important;
    }

    #localizacao .left,
    #localizacao .right {
        width: calc(100% - 40px);
        margin: 0 20px;
        text-align: left;
    }

    #localizacao .flex {
        flex-wrap: wrap;
    }

    #localizacao .image {
        display: none;
    }

    /*#localizacao .image { padding: 0 !important }
    #localizacao .image .cover { height: 25rem !important }

    #localizacao .image:nth-child(2),
    #localizacao .image:nth-child(4) {
        top: 4rem;
        position: relative;
    }*/

    #localizacao .zoom {
        width: 100%;
        margin: 6rem 0 0;
    }
}


/** section-projetos **/

#projetos {
    padding: 11.0rem 0 9.0rem;
    background: #FFF3D9;
}

#projetos p,
#projetos h2,
#projetos h3 {
    color: #000000;

    font-size: 1.4rem;
    font-weight: 400;
    line-height: 2.4rem;
    font-family: 'Sora';

    letter-spacing: 0.05em;
}

#projetos h2 {
    font-size: 1.0rem;
    line-height: 3.4rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 1.4rem;
}

#projetos h3 {
    font-size: 1.8rem;
    line-height: 2.8rem;
    text-transform: uppercase;
}

#projetos .title {
    margin-left: 8.3333%;
    margin-bottom: 6.5rem;
}

#projetos .list {
    margin-left: 8.3333%;
}

#projetos .list li {
    width: 25%;
}

#projetos .list li h4,
#projetos .list li h5 {
    color: #000000;

    font-size: 1.4rem;
    font-weight: 700;
    line-height: 2.4rem;
    font-family: 'Sora';

    letter-spacing: 0.08em;
}

#projetos .list li h5 {
    margin-bottom: 2.6rem;
}

#projetos .list li img {
    width: 20.0rem;
    margin: 0 0 2.4rem;
}


@media (max-width: 1240px) {
    #projetos {
        padding: 3rem 0;
    }

    #projetos h2 {
        font-size: 0.8rem;
        line-height: 2.2rem;
        margin-bottom: 0.8rem;
    }

    #projetos h3 {
        font-size: 1.2rem;
        line-height: 1.8rem;
        margin-bottom: 2.2rem;
    }

    #projetos p {
        font-size: 1.0rem;
        line-height: 1.6rem;
        margin-bottom: 1.8rem !important;
    }

    #projetos .title {
        margin: 0 20px;
    }

    #projetos .list {
        margin: 0 20px;
        flex-wrap: wrap;
    }

    #projetos .list li {
        width: 100%;
        margin: 3rem 0 0;
    }

    #projetos .list li h4, #projetos .list li h5 {
        font-size: 1.2rem;
        line-height: 1.6rem;
    }

    #projetos .list li h5 {
        margin-bottom: 1.8rem;
    }
}


/** section-contato **/

#modal {
    inset: 0;
    z-index: 100;
    display: none;
    position: fixed;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0, 0);
    transition: background 0.3s ease-out;
}

#modal.visible {
    display: flex;
    background: rgba(0,0,0, 0.4);
}

#modal .window,
#contato {
    padding: 1.0rem 0 10.0rem;
    background: #FFF3D9;
    background-image: url(./images/contato-bg.jpg);
    background-size: auto 80rem;
    background-repeat: repeat-x;
    background-position: bottom center;
}

#modal .window {
    width: calc(100% - 40px);
    margin: auto;
    padding: 4.0rem 0;
    max-width: 85rem;
    position: relative;
    opacity: 0;
    transform: translateY(20%);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

#modal.visible .window {
    opacity: 1;
    transform: translateY(0%);
}

#modal .brand,
#contato .brand {
    width: 42%;
    margin: 0 auto 10.0rem;
    display: block;
}

#modal h2,
#modal .close,
#contato h2 {
    color: #000000;

    font-size: 1.8rem;
    font-weight: 400;
    line-height: 2.8rem;
    font-family: 'Sora';

    text-align: center;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    margin: 0 auto 2.4rem;
    max-width: 58%;
}

#modal h2 {
    max-width: 70rem;
}


#modal .close {
    top: 1rem;
    right: 1rem;
    margin: 0;
    font-weight: 700;
    position: absolute;
}

#modal h2 strong,
#contato h2 strong {
    font-weight: 700;
}

#modal form,
#contato form {
    margin: auto;
    max-width: 42%;
}

#modal form {
    max-width: 45rem;
}

#modal form p,
#contato form p,
.error-message {
    color: #000000;
    margin: 1.8rem 0 2.8rem;

    font-size: 1.2rem;
    font-weight: 400;
    line-height: 2.4rem;
    font-family: 'Sora';

    text-align: center;
    letter-spacing: 0.025em;
}

.error-message {
    color: #990000;

    top: -0.5rem;
    width: 100%;
    margin: 0 0 0.8rem;

    text-align: left;
    font-weight: 700;

    position: relative;
}

.error-message.success {
    color: #21a4de;
    margin: 1.8rem 0 0;
    text-align: center;
}

#modal form p a,
#contato form p a {
    color: #000000;
    font-weight: 700;
}

#modal form input,
#contato form input {
    width: 100%;
    margin: 0 0 0.8rem;
    padding: 0 2rem;

    color: #000000;
    background: #ffffff;

    font-size: 1.2rem;
    font-weight: 400;
    line-height: 4.2rem;
    font-family: 'Sora';

    letter-spacing: 0.1em;
    text-transform: uppercase;

    border-radius: 0.2rem;
}

#modal form button,
#contato form button {
    color: #E6E6E6;

    padding: 0 2.0rem;
    transition: transform 0.3s ease-out;

    font-size: 1.8rem;
    font-weight: 700;
    line-height: 4.8rem;
    font-family: 'Sora';

    letter-spacing: 0.1em;
    text-transform: uppercase;

    border-radius: 0.4rem;
    background-color: #312331;
}

@media (any-hover: hover) {
    #modal form button:hover,
    #contato form button:hover {
        transform: scale(1.1);
    }
}

@media (max-width: 1240px) {
    #modal .window,
    #contato {
        padding: 3rem 0;
    }

    #modal .brand,
    #contato .brand {
        width: 20rem;
        margin: 0 auto 3rem;
    }

    #modal h2,
    #contato h2 {
        font-size: 1.2rem;
        line-height: 1.8rem;
    }

    #modal h2,
    #modal form,
    #contato h2,
    #contato form {
        margin: 0 20px 2.4rem;
        max-width: none;
    }

    #modal form p,
    #contato form p {
        margin: 1.2rem 0 1.8rem;
        font-size: 1rem;
        line-height: 1.6rem;
    }

    #modal form button,
    #contato form button {
        padding: 0 1.4rem;
        font-size: 1.2rem;
        line-height: 3.2rem;
    }
}


/** site-footer **/

.site-footer {
    background: #FFF9E8;
}

.site-footer h2 {
    color: #000000;

    font-size: 1.2rem;
    font-weight: 700;
    line-height: 2.4rem;
    font-family: 'Sora';

    text-align: center;
    letter-spacing: 0.63em;
    text-transform: uppercase;
}

.site-footer .logos {
    margin: 5.0rem auto 8.0rem;
}

.site-footer .logos img:nth-child(1) { width: 21.2rem; height: 8.94rem }
.site-footer .logos img:nth-child(2) { width: 18.8rem; height: 5.25rem }
.site-footer .logos img:nth-child(3) { width: 15.9rem; height: 10.0rem }
.site-footer .logos img:nth-child(4) { width: 12.1rem; height: 10.0rem }
.site-footer .logos img:nth-child(5) { width: 11.4rem; height: 11.6rem }

.site-footer .legal {
    color: #000000;

    font-size: 1.0rem;
    font-weight: 400;
    line-height: 1.2rem;
    font-family: 'Sora';

    padding: 2.6rem 5.0rem;
    text-align: center;
}

.site-footer .legal a {
    display: none;
}

@media (max-width: 1240px) {
    .site-footer h2 {
        font-size: 1rem;
    }

    .site-footer .logos {
        margin: 3.0rem auto 5.0rem;
        flex-wrap: wrap;
    }

    .site-footer .logos img:nth-child(1) { width: calc(0.8 * 21.2rem); height: calc(0.8 * 8.94rem) }
    .site-footer .logos img:nth-child(2) { width: calc(0.8 * 18.8rem); height: calc(0.8 * 5.25rem) }
    .site-footer .logos img:nth-child(3) { width: calc(0.8 * 15.9rem); height: calc(0.8 * 10.0rem) }
    .site-footer .logos img:nth-child(4) { width: calc(0.8 * 12.1rem); height: calc(0.8 * 10.0rem) }
    .site-footer .logos img:nth-child(5) { width: calc(0.8 * 11.4rem); height: calc(0.8 * 11.6rem) }

    .site-footer .logos img {
        margin: 0 20px 3rem;
    }

    .site-footer .legal {
        padding: 1.8rem 20px;
    }
}

@media (max-width: 900px) {
    .site-footer .logos {
        justify-content: center;
    }

    .site-footer .logos img:nth-child(1),
    .site-footer .logos img:nth-child(3) {
        width: calc(33.3333% - 40px);
        object-fit: contain;
    }

    .site-footer .logos img:nth-child(1) { object-position: right bottom }
    .site-footer .logos img:nth-child(3) { object-position: left bottom }
}

@media (max-width: 660px) {
    .site-footer .logos img {
        object-fit: contain;
        object-position: center !important;
    }
    .site-footer .logos img:nth-child(1) { width: calc(0.6 * 21.2rem); height: calc(0.6 * 8.94rem) }
    .site-footer .logos img:nth-child(2) { width: calc(0.6 * 18.8rem); height: calc(0.6 * 5.25rem) }
    .site-footer .logos img:nth-child(3) { width: calc(0.6 * 15.9rem); height: calc(0.6 * 10.0rem) }
    .site-footer .logos img:nth-child(4) { width: calc(0.6 * 12.1rem); height: calc(0.6 * 10.0rem) }
    .site-footer .logos img:nth-child(5) { width: calc(0.6 * 11.4rem); height: calc(0.6 * 11.6rem) }

    .site-footer .legal a {
        color: #288dba;
        margin: 0.5rem 0 0;
        display: block;
        text-decoration: underline;
    }

    .site-footer .legal span {
        display: none;
    }

    .site-footer .legal span.visible {
        display: inline;
    }
}


#pp,
#pp body {
    font-size: 10px;
    line-height: 10px;
    background: #F1EBE3;
}

#pp .content {
    color: #000000;

    width: calc(100% - 30px);
    max-width: 950px;
    margin: 40px auto;

    font-size: 1.4rem;
    font-weight: 400;
    line-height: 2.4rem;
    font-family: 'Sora';

    text-align: justify;
    letter-spacing: 0.05em;
}

#pp .content h2,
#pp .content h3 {
    margin-top: 2em;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 2.8rem;
    text-transform: uppercase;
}

#pp .content h2 {
    font-weight: 600;
    text-align: center;
    margin-bottom: 4em;
}

#pp .content h1 {
    width: 100%;
    max-width: 300px;
    margin: 40px auto 0px;
    display: block;
}

@media (max-width: 992px) {
    #pp, #pp body {
        font-size: 8px;
    }
}