/*------------------------------------*\
#FONTS
\*------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');


/*------------------------------------*\
#Variables
\*------------------------------------*/

/* @link https://utopia.fyi/space/calculator?c=320,36,1.2,1800,56,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */
:root {
        --header-size: 13vh;
        --button-bgc-rad: 225deg;
}

/*------------------------------------*\
#Global
\*------------------------------------*/

html {
        font-family: 'Roboto', Arial, sans-serif;
        scroll-behavior: smooth;
}

body {
        margin: 0;
}

/*------------------------------------*\
#Components
\*------------------------------------*/

/* ----- Main ----- */
.c-main-container {
        margin: 0 auto;
        max-width: 100vw;
        height: 100vh;
        /* background-color: rgb(245, 241, 112); */
}


/* ----- Header ----- */
.c-header {
        z-index: 4;
        width: 100vw;
        height: var(--header-size);
        position: fixed;
        /* background-color: rgb(132, 106, 106); */

        display: flex;
        justify-content: space-around;
        align-items: center;
        /* margin: 1% 0; */

        /* border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px; */
        border-bottom-color: #FFF;

        background: #ffffff;
        /* backgr  ound: #966a6a; */
        /* 
        box-shadow:  7px 7px 12px #d6d6d6,
             -7px -7px 12px #ffffff; */

        /* box-shadow: 6px 6px 12px #ebebeb,
                -6px -6px 12px #ffffff; */
}

.c-header-img {
        height: 100%;
}

.c-header-link {
        text-decoration: none;
        color: rgb(47, 44, 45);
        font-size: 1.5rem;
        font-weight: 400;
        font-family: 'Roboto', Arial, sans-serif;
        cursor: default;
}



.c-header-link__line {
        width: 0px;
        margin: 0;
        border: 0px solid crimson;
        color: crimson;
        transition: width 0.2s ease-in-out;
}

.c-header-link:hover~.c-header-link__line {
        width: 100%;
        border: 1px solid crimson;
}

.c-header-link:active~.c-header-link__line {
        width: 100%;
        border: 1px solid crimson;
}



/* ----- Section ----- */
.c-section {
        top: var(--header-size);
        width: 100%;
        height: calc(100vh - var(--header-size));
        position: relative;
        overflow: hidden;
        /* background-color: rgb(151, 114, 114); */

        /* display: flex; */
}

.c-text-small {
        font-size: 1.2rem;
        font-weight: 300;
}

.c-text-small-x {
        font-size: 1rem;
        font-weight: 300;
}

/* .c-section__top {
        flex-direction: row;
} */

.c-section__bottom {
        /* margin-top: 3%; */
}

.c-section-text-container {

        margin-top: 2%;
        margin-left: 2%;

        position: absolute;
        top: 0;
        width: 50%;
        height: 80%;
        /* clip-path: polygon(60% 0, 45% 80%, 0 80%, 0 0); */
        background-color: #fff;
        /* background-color: rgb(151, 114, 114); */

        padding: 2%;
        padding-right: 10%;
        transition: clip-path 0.5s ease-in-out;

        /* box-shadow: 6px 6px 12px #ebebeb,
                -6px -6px 12px #ffffff; */
}

.c-section-text-hide {
        /* clip-path: polygon(0 0, 0 100%, 0 100%, 0 0); */
        width: 0%;
}

.c-section__bottom .c-section-text-container {
        /* clip-path: polygon(45% 0, 100% 0%, 100% 100%, 60% 100%); */
        background-color: #fff;
        right: 0;
        padding-right: 0%;
        /* padding-left: 20%; */
        margin-right: 2%;
}

.c-section__bottom .c-section-text-hide-2 {
        /* clip-path: polygon(100% 0, 100% 0%, 100% 100%, 100% 100%); */
        width: 0%;
}

.c-section-img-container {
        width: 100%;
}

.c-section-img {
        width: 100%;
        /* height: 100%; */
}

.c-section-text {
        position: relative;
}



.c-section__top .c-section__header {
        top: 0;
        /* font-size: 3.5rem; */
        font-size: 3.5rem;
        font-weight: 700;
        color: #DF1E2F;
}

.c-section__top .c-section__text {
        font-size: 1.7rem;
        font-weight: 400;
        /* margin-right: 45%; */
}

.c-section__bottom .c-section__text {
        font-size: 1.7rem;
        font-weight: 400;
        /* margin-left: 45%; */
}

.c-section__bottom .c-section__header {
        /* margin-left: 45%; */
        top: 0;
        font-size: 3.5rem;
        font-weight: 700;
        color: #DF1E2F;
}


.c-footer {
        margin: 0;
        height: 15vh;
        width: 100%;
        background-color: #DF1E2F;


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

.c-footer-header {
        color: #FFFFFF;
        font-size: 1.5rem;
        font-weight: 400;
        margin-bottom: 1%;
        /* margin-top: 3%; */
}

.c-footer-content {
        text-align: center;
        font-size: 1.2rem;
        color: #FFFFFF;
}

/* .c-footer-section {
        width: 30%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
}

.c-footer-section-header {
        color: #FFFFFF;
        font-size: 1.5rem;
        font-weight: 400;
        margin-bottom: 0;
        margin-top: 3%;
}

.c-footer-section-content-ul {
        margin-top: 0;
}

.c-footer-section-content-li-item {
        list-style-type: none;
        margin-bottom: 0;
        margin-top: 0;
} */

/* OPTIONS */

.c-options-container {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
}

.c-option-container {
        width: 30%;
        height: 75%;
        background-color: #ffffff;
        border-radius: 5px;

        box-shadow: 20px 20px 60px #bebebe,
                -20px -20px 60px #ffffff;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;

        padding: 2%;

}

.c-option-title {
        text-align: center;
        font-size: 2.5rem;
        font-weight: 700;
        color: #DF1E2F;
        margin-top: 4%;
        margin-bottom: 5%;
}

.c-option-info {
        font-size: 1.2rem;
        text-align: center;
}

.c-option-button {
        background-color: #DF1E2F;
        /* background: linear-gradient(var(--button-bgc-rad), #ef2032, #c91b2a); */
        border-radius: 5px;
        display: inline-block;
        cursor: pointer;
        color: #ffffff;
        font-family: 'Roboto';
        font-size: 1.4rem;
        font-weight: bold;
        padding: 3% 10%;
        text-decoration: none;
        transition: all 0.2s ease-in-out;
}

.c-option-button:hover {
        transform: translateY(-4%);
        /* background: linear-gradient(225deg, #ef2032, #c91b2a); */
        box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
}

.c-option-button:active {
        transform: translateY(1%);
        /* --button-bgc-rad: 135deg; */
        background-color: linear-gradient(135deg, #ef2032, #c91b2a);
}

/* CAROUSEL */
/* .c-carousel-container {
        width: 100%;
        height: 100%;

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;

}

/* .c-carousel {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        height: 50vh;
        background-color: rgb(68, 154, 81);
} */

/* .c-carousel__item {
        background-color: rgb(201, 124, 124);
        width: 20%;
        height: 30%;
}*/

.c-section__photos {
        height: calc(100vh - var(--header-size));
        width: 100%;
        /* height: 100%; */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        margin-bottom: 0;
}

.c-photos__header {
        font-size: 3.5rem;
        font-weight: 700;
        color: crimson;
}

.c-photos__footer {

        font-size: 1.5rem;
        font-weight: 300;
        color: crimson;
}


.slider-wrapper {
        /* margin: 5%; */
        width: 812px; 
        height: 541px;
        /* width: 75vw;
        height: 50vw; */
        /* margin-bottom: 2%; */
        position: relative;
        overflow: hidden;
}

.slides-container {
        width: 100%;
        display: flex;
        /* overflow: scroll; */
        scroll-behavior: smooth;
        list-style: none;
        margin: 0;
        padding: 0;
        overflow: hidden
}

.slide-arrow {
        position: absolute;
        display: flex;
        top: 0;
        bottom: 0;
        margin: auto;
        height: 4rem;
        background-color: white;
        border: none;
        width: 2rem;
        font-size: 3rem;
        padding: 0;
        cursor: pointer;
        opacity: 0.5;
        transition: opacity 100ms;
}

.slide-arrow:hover,
.slide-arrow:focus {
        opacity: 1;
}

#slide-arrow-prev {
        left: 0;
        padding-left: 0.25rem;
        border-radius: 0 2rem 2rem 0;
}

#slide-arrow-next {
        right: 0;
        padding-left: 0.75rem;
        border-radius: 2rem 0 0 2rem;
}

.c-slide {
        width: 100%;
        /* height: 100%; */
        /* flex: 1 0 100%; */
}

/* @media screen and (max-width: 1020px) {
        .c-slide {
                width: 100%;
                flex: 1 0 100%;
        }
} */


.c-slide:nth-child(1) {
        background-color: #49b293;
}

.c-slide:nth-child(2) {
        background-color: #b03532;
}

.c-slide:nth-child(3) {
        background-color: #6a478f;
        margin: 0;
}

.c-slide:nth-child(4) {
        background-color: #da6f2b;
}

.c-carousel__img {
        /* float: left; */
        /* height: 100%; */
        /* width: 100%; */
        /* object-fit:scale-down; */
        /* object-fit: scale-down; */
}

@media only screen and (max-width: 450px) {

}




/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 1200px) {

        .c-section {
                top: var(--header-size);
                width: 100%;
                height: calc(80vw - var(--header-size));
        }

        .c-section-text-container {
                padding-right: 3%;
        }

        .c-section-text {
                margin-right: 0%;
        }

        .c-section__top .c-section-text-container {
                height: 80%;
        }

        .c-section__top .c-section__header {
                font-size: 2.5rem;
        }

        .c-section__top .c-section__text {
                margin-right: 0%;
                font-size: 1rem;
        }

        .c-section__bottom .c-section-text-container {
                height: 80%;
                padding-left: 0%;
        }

        .c-section__bottom  .c-section__header {
                font-size: 2.5rem;
                margin: 0 3%;
        }

        .c-section__bottom  .c-section__text {
                margin-left: 3%;
                margin-right: 0%;
                font-size: 1rem;
        }

        .c-option-title { 
                text-align: center;
        }

        .c-section__options {
                height: calc(100vw - var(--header-size));
        }

        .c-section__photos {
                height: calc(100vw - var(--header-size));
        }

        .c-photos__footer {
                text-align: center;
                font-size: 0.9rem;
                font-weight: 300;
                color: crimson;
        }

        .c-option-container {
                width: 40%;
                height: 80%;
        }

        .slider-wrapper {
                /* margin: 5%; */
                width: 75vh;
                height: 50vh;
                /* width: 40vw; */
                /* height: 30vw; */
                /* margin-bottom: 2%; */
                position: relative;
                overflow: hidden;
        }
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 450px) {
        br {
                display: block;
                margin: 5px 0;
                content: " ";
        }

        :root {
                --header-size: 8vh;
        }

        .c-header-link {

                font-size: 0.7rem;
                font-weight: 400;
        }

        .c-header-img {
                height: 60%;
        }

        .c-text-small {
                font-size: 0.5rem;
                font-weight: 300;
        }
        
        .c-text-small-x {
                font-size: 0.5rem;
                font-weight: 300;
        }

        .c-section {
                top: var(--header-size);
                width: 100%;
                height: calc(80vw - var(--header-size));
                position: relative;
                overflow: hidden;
                /* background-color: rgb(151, 114, 114); */

                /* display: flex; */
        }

        .c-section-text-container {

                top: 0;
                width: 65%;
                padding: 2% !important;
                /* height: 80%; */
                /* clip-path: polygon(80% 0, 45% 80%, 0 80%, 0 0); */
                background-color: #fff;
                /* background-color: rgb(151, 114, 114); */
                /* padding-right: 2%; */
                /* transition: clip-path 0.5s ease-in-out; */
                transition: width 0.5s ease-in-out;

                /* box-shadow: 6px 6px 12px #ebebeb,
                        -6px -6px 12px #ffffff; */
        }

        .c-section__bottom .c-section-text-container {
                width: 85%;
                padding: 2%;
                /* clip-path: polygon(45% 0, 100% 0%, 100% 100%, 60% 100%); */
                background-color: #fff;
                right: 0;
                padding-right: 0%;
                padding-left: 0%;
                margin-right: 2%;
        }

        .c-section__top .c-section__header {
                top: 0;
                margin-top: 0;
                margin-bottom: 0;
                font-size: 1.6rem;
                font-weight: 700;
                color: #DF1E2F;
        }

        .c-section__top .c-section__text {
                font-size: 0.8rem;
                font-weight: 400;
                /* margin-right: 45%; */
                margin: 3%;
        }

        .c-section__bottom .c-section__text {
                font-size: 0.8rem;
                font-weight: 400;
                margin-left: 1%;
        }

        .c-section__bottom .c-section__header {
                margin-top: 0;
                margin-bottom: 0;
                margin-left: 0%;
                top: 0;
                font-size: 1.6rem;
                font-weight: 700;
                color: #DF1E2F;
        }

        .c-section__options {
                height: 55vh;
        }

        .c-section__photos {
                height: 35vh;

        }

        .c-options-container {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                align-items: center;
        }

        .c-option-container {
                width: 80%;
                height: 43%;
                background-color: #ffffff;
                border-radius: 5px;
        
                box-shadow: 20px 20px 60px #bebebe,
                        -20px -20px 60px #ffffff;
        
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
        
                padding: 2%;
        
        }

        .c-options-title-text-container {
                padding: 1%;
                padding-right: 3%;
                
        }

        .c-option-title {
                font-size: 1.5rem;
                font-weight: 700;
                color: #DF1E2F;
                margin-top: 4%;
                margin-bottom: 5%;
        }

        .c-option-info {
                font-size: 0.8rem;
                text-align: justify;
        }

        .c-option-button {
                background-color: #DF1E2F;
                /* background: linear-gradient(var(--button-bgc-rad), #ef2032, #c91b2a); */
                border-radius: 5px;
                display: inline-block;
                cursor: pointer;
                color: #ffffff;
                font-family: 'Roboto';
                font-size: 0.5rem;
                font-weight: bold;
                padding: 3% 5%;
                text-decoration: none;
                transition: all 0.2s ease-in-out;
        }


        .c-photos__header {
                font-size: 1.3rem;
                font-weight: 700;
                color: crimson;
        }
        
        .c-photos__footer {
                text-align: center;
                font-size: 0.9rem;
                font-weight: 300;
                color: crimson;
        }

        .slider-wrapper {
                /* margin: 5%; */
                /* width: 812px; */
                /* height: 541px; */
                width: 75%; 
                height: 50%;
                /* margin-bottom: 2%; */
                position: relative;
                overflow: hidden;
        }

        .c-carousel__img { 
                /* width: 100%; */
                /* height: 100%; */
                object-fit: cover;
        }

        

        .c-footer {
                margin: 0;
                height: 10vh;
                width: 100%;
                background-color: #DF1E2F;
        
        
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
        }
        
        .c-footer-header {
                color: #FFFFFF;
                font-size: 1rem;
                font-weight: 400;
                margin-bottom: 1%;
                /* margin-top: 3%; */
        }
        
        .c-footer-content {
                text-align: center;
                font-size: 0.8rem;
                color: #FFFFFF;
        }
        

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 3000px) {

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1480) {}