*,::before,::after{
box-sizing: border-box;}

html{
box-sizing: inherit;
font-size: 62.5%;
height: 100%;
}

/* Fonts */

    /* merriweather-regular - latin */
    @font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 400;
    src: url('../assets/fonts/merriweather-v21-latin-regular.woff2') format('woff2'),
        url('../assets/fonts/merriweather-v21-latin-regular.woff') format('woff');
    }
    /* merriweather-italic - latin */
    @font-face {
    font-family: 'Merriweather';
    font-style: italic;
    font-weight: 400;
    src: url('../assets/fonts/merriweather-v21-latin-italic.woff2') format('woff2'),
        url('../assets/fonts/merriweather-v21-latin-italic.woff') format('woff');
    }
    /* merriweather-700 - latin */
    @font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 700;
    src: url('../assets/fonts/merriweather-v21-latin-700.woff2') format('woff2'),
        url('../assets/fonts/merriweather-v21-latin-700.woff') format('woff');
    }
    @font-face{
    font-family: 'Loved-by-the-king';
    font-style: normal;
    font-weight: 400;
    src:  	url('../assets/fonts/loved-by-the-king-v9-latin-regular.woff2') 	format('woff2'),
            url('../assets/fonts/loved-by-the-king-v9-latin-regular.woff')  	format('woff');
    }


/* General */
    .none{
        display: none;
    }
    .content{
        display: grid;
        justify-content: center;

        color: white;
        font-family: 'Merriweather';
        overflow-x: hidden;
        left: 0;
    }
    strong{
        font-weight: 600;
        color: #bb133e;
    }
    .hidden{
        opacity: 0;
    }
    .title{
        font-size: 4.8rem;
        font-weight: 700;
        padding-top: 3rem;
    }
    .subtitle{
        font-size: 2.4rem;
        padding: 0.5rem;
        font-weight: 700;
    }
    .paragraph{
        font-size: 1.6rem;
    }
    .text--blue{
        color: #00152e
    }
    .text--lightblue{
        color: #0160ad;
    }
    .text--red{
        color: #bb133e;
    }
    .text--white{
        color: white;
    }
    .section__wrapper--process{
        background-image: linear-gradient(-45deg,#00152e, #0160ad);
        background-repeat: no-repeat;
        width: 100%;
    }
/* Menu */
    .header{
        width: 100vw;
        background-color: white;
    }
    .navigation{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 2rem;
        text-transform: uppercase;
        border-bottom: solid 0.4rem #c00131;
        box-shadow: 0rem 3px 0.9rem black;
        height: 10rem;
        
    }
    .menu{
        display: flex;
    }
    .menu__item{
        padding: 2rem 2rem 0.5rem 2rem;
        display: flex;
        flex-flow: column;
        align-items: center;
        position: relative;
        z-index: 30;
    }
    .menu__heart{
        opacity: 0;
        margin-top: 0.9rem;
        transform: scale(0.8)
    }
    .menu__heart--active{
        opacity: 1;
    }
    .menu__item--link:hover + .menu__heart{
        opacity: 1;
    }
    .menu__item--logo{
        transform: scale(0.7);
        animation: move-in 1.5s ease-out;
    }
    .menu__item--link{
        text-decoration: none;
        color: #00152e;
        transition: all 0.2s ease-out;
    }
    .menu__item--link:hover{
        color: #bb133e;
        transform: scale(1.1);
    }
    .menu__item--cart{
        transform: scale(0.8);
        padding-top: 0rem;
        
    }
    .cart--amount{
        color: white;
        align-self: center;
        position: absolute;
        z-index: 20;
        margin-right: -0.4rem;
        padding-left: 1rem;
        padding-bottom: 1.1rem;
    }
    .dot {
        height: 3rem;
        width: 3rem;
        background-color: #bb133e;
        border-radius: 50%;
        position: absolute;
        z-index: 19;
      }
      .amount{ 
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }

/* specify  */

    .content{
        background-image: linear-gradient(-45deg,#00152e, #0160ad);
        background-repeat: no-repeat;
        display: flex;
        flex-flow: column;
        overflow-x: hidden;
    }
    .content__wrapper{
        display: flex;
        flex-flow: column;
        width: 96rem;
        margin: 0rem auto;  
        /* background-image: url("/assets/img/background-illustrations.png"); !!! */
    }
    .content__wrapper--status{
        display: flex;
        align-items: center;
    }
    .content__wrapper--home{
        align-items: center;
        width:100vw;
    }
    .content__title{
        color: white;
        font-size: 4.8rem;
    }
    .content__title--red{
        color: #bb133e;
    }
    .content__subtitle{
        font-size: 3.6rem;
        padding-bottom: 6rem;
    }
    .content__text{
        color: white;
        font-size: 1.6rem;
    }
    .content__text--red{
        color: #bb133e;
    }
    
    .specifys__wrapper{
        display: flex;
        flex-flow: wrap;
        position: sticky;
        bottom: 0;
    }
    .specify__wrapper{
        display: flex;
        flex-direction: column;
        margin: 0rem 10rem;
        align-items: center;
    }
    .specify__headerimage{
        align-self: center;
        transform: scale(0.5);
        animation: move-in 3s;
    }
/* Truck drives into the view */
    @keyframes move-in {
        0% {
          margin-left: 100vw;
        }
        100% {
          margin-left: 0vw;
        }
      }
    .specify__text{
        font-family: 'Loved-by-the-king',sans-serif;
        font-size: 5rem;
        text-shadow: -0.2rem 0rem #bb133e;
        padding-top: 2rem;
    }
    .specify__image--top{
        opacity: 0;
        position: absolute;
        z-index: 1;
        transition: all .5s ease-in-out;
        
    }
    .specify__image--top:hover{
        opacity: 1;
        transform: scale(1.1);
    }
    
    .specify__wrapper{
        display: flex;
        flex-direction: column;
        justify-items: center;
        padding-bottom: 2rem; 
        position: sticky;
        bottom: 0;
    }
    .specify__image--bottom{
        transition: all .5s ease-in-out;
    }
    .specify__image--bottom:hover{
        transform: scale(1.1);
    }
    

/* Home */

    .part__home--landingscreen{
        height: 100vh;
        display: flex;
        flex-flow: column;
    }
    .part__home--process{
        margin: 0rem auto;
        width: 96rem;
    }
    .part__wrapper{
        margin: 0rem auto;
        width: 96rem;
        margin-bottom: 20rem;
    }
    .part__home--win{
        justify-content: center;
        margin: 0rem auto;
        width: 96rem;
    }

    /* Landingscreen */
    .landingscreen__image{
        padding: 0rem;
        margin-left: -3rem;
        height: 60vh;
        /* animation: move-in 1.5s ease-out; */
    }
    .landingscreen__wrapper{
        display: flex;
        align-items: center;
        z-index: 2;
        margin-top: -5rem;
        animation: none;
    }
    .landingscreen__cta{
        transform: rotate(4.98deg);
        font-family: 'Loved-by-the-king';
        font-size: 3rem;
    }
    .landingscreen__arrow{

        z-index: 30;
        transform: scale(0.7);
        margin-bottom: 5vh;   
    }
    .red-bar--intro{
        position: absolute;
        width: 100%;
        margin-top: -30.5rem;
        left: 0;
    }
    .red-bar--process{
        position: absolute;
        width: 100%;
        margin-top: -20rem;
        left: 0;
    }
    .red-bar--win{
        position: relative;
        width: 100%;
        margin-top: -20rem;
        left: 0;
    }
    
    .bar__box{
        width: 100vw;
        overflow: hidden;
    }

    /* Intro */
    .intro__title{
        grid-area: title;
        margin-bottom: 2rem;
        width: 90
    }
    .intro__paragraph{
        padding-bottom: 3rem;
        padding-left: 5rem;
        line-height: 2.2rem;
    }
    .intro__grid{
        display: grid;
        grid-template-areas: 
        "title title"
        "text image";
    }
    .intro__text{
        grid-area: text;
    }
    .intro__image{
        grid-area: image;
    }
    
    /* Process */
    .process__title{
        margin-top: 20rem;
    }
    .process__grid{
        padding: 5rem;
        display: grid;
        grid-row-gap: wrap;
        grid-template-columns: 10rem 50% auto;
        grid-template-rows: auto auto auto;
        grid-template-areas: 
        "number1 text1 illustration1"
        "number2 text2 illustration2"
        "number3 text3 illustration3";
        line-height: 1.8rem;
        align-items: center;
    }
    .process__number{
        font-size: 5rem;
    }
    
    .process__image{
        height: 30rem;
        justify-self: center;
    }
    .process__cta--link{
        display: flex;
        width: 96rem;
        justify-content: flex-end; 
        text-decoration: none;
        font-size: 8rem;
        padding: 0rem 4rem;
    }
    .process__cta{
        transform: rotate(-20deg);
        transition: 0.2s ease-in-out;
        font-size: 3rem;
        font-weight: 700;
        padding: 0.6rem;
        margin-top: 1rem;
        width: max-content;
        background-color: white;
        color: #bb133e;
        border: 0.4rem #bb133e solid;
        border-radius: 1rem;
        cursor: pointer;
        animation: 10s all ease-in-out;
      
    }
    .process__cta:hover{
        transform: scale(1.1);
    }
/* Win */
    .win__grid{
        display: grid;
        grid-template-columns: 60% auto;
        grid-template-areas: 
        "title title"
        "paragraph1 image"
        "paragraph2 image"
    }
    .win__title{
        grid-area: title;
        color: #bb133e;
        padding-bottom: 3rem;
    }
    .win__paragraph{
        margin-left: 5rem;
    }
    .win__paragraph-1{
        grid-area: paragraph1;
    }
    .win__paragraph-2{
        grid-area: paragraph2;
    }
    .win__image{
        grid-area: image;
        transform: rotate(20deg);
        margin-left: 8rem;
    }
/* Trucks */
    .title--explanation{
        font-size: 2.4rem;
        line-height: 2.8rem;
    }
    .trucks__wrapper{
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin: 0rem auto;
        display: sticky;
        bottom: 0;
        padding-top: 4rem;
        
    }
    .truck__wrapper{
        width: 32rem;
        transition: all 0.5s ease-out;
    }
    .truck__wrapper:hover{
        transform: scale(1.1)
    }
    .content__wrapper--trucks{
        height: 80vh;
        display: flex;
        flex-flow: column;
        justify-content: flex-start;
    }
    .truck__title{
        text-decoration: none;
        color: white;
        font-size: 3.6rem;
        font-family: "Loved-by-the-king";
        margin-left: 1.5rem;
        align-self: center;
    }
    .truck__link{
        text-decoration: none;
    }

/* Detail */
.content__wrapper--detail{
    width: 96rem;
    margin: 0rem auto;
    align-items: center;
}
    .detail__grid{
        display: grid;
        grid-template-columns: 60% auto;
        grid-template-areas: 
        "title title"
        "image description"
        "image price"
        "back button";
    }
    .detail__title{
        grid-area: title;
        padding-bottom: 4rem;
    }
    .detail__image{
        grid-area: image;
    }
    .detail__button{
        grid-area: button;
        align-self: center;
        padding-top: 2rem;
    }
    .detail__back{
        grid-area: back;
        display: flex;
        align-items: center;
        font-size: 2rem;
        text-decoration: none;
        color: white;
        padding-top: 5rem;
        cursor: pointer;
        
    }
    .detail__back>img{
        padding-right: 1rem;
        cursor: pointer;
    }
    .detail__back:hover, .detail__back>img:hover{
        transform: scale(1.05) translate(-2rem);
        cursor: pointer;
    }
    .detail__description{
        grid-area: description;
        font-size: 2rem;
        line-height: 2.7rem;
    }
    .detail__price{
        grid-area: price;
        font-size: 3rem;
        align-self: flex-end;
    }

/* Contact */
    .contact__wrapper{
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-areas: 
        "contact location"
        "contact-details location-details";
        margin-top: 5rem;
    }
    .contact__contact-details, .contact__festival-dates{
        display: flex; 
        flex-flow: column;
        font-size: 2.4rem;
        line-height: 2.9rem;
        padding-left: 2rem;
    }
    .contact__contact-details{
        border-left: #bb133e solid 0.2rem;
        grid-area: contact-details;
        margin-top: 1rem;
    }
    .contact-details--link{
        color: white;
        text-decoration: none;

    }
    .contact-details__adress1, .contact-details__adress2{
        font-style: italic;
        font-weight: 400;
    }
    .contact-details__name{
        font-weight: 700;
    }

    .contact__festival-dates{
        display: grid;
        grid-template-columns: 50% 50%;
        align-content: center;
        line-height: 2.9rem;
        border-left: #bb133e solid 0.2rem;
        margin-top: 1rem;
    }
    .contact-details__office, .contact-details__adress2{
        padding-bottom: 2.9rem;
    }
    .festival-dates__date{
        font-style: italic;
    }
    .subtitle__contact{
        padding-bottom: 2rem;
        padding-left: 0;
        color: #bb133e;  
        margin-left: -2rem;
    }
    .subtitle__win{
        color: #bb133e;
    }
    .subtitle__truck{
        font-family: "Loved-by-the-king";
        font-size: 4.5rem;
        line-height: 3.2rem;
        font-weight: 500;
    }

    /* Cart */
    .checkout__wrapper{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding-left: 3rem;
    }
    .cart__wrapper{
        display: flex;
        flex-flow: column;
        width: 96rem;
        padding-right: 9rem;
    }
    .scroll{
        max-height: 30vh;
        overflow-y: scroll;
    }
    /**/
    ::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 7px;
      }
      ::-webkit-scrollbar-thumb {
        border-radius: 4px;
        border-color: white;
        background-color: #bb133e;
        -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
        box-shadow: 0 0 1px rgba(255, 255, 255, .5);
      }
    /**/
    .red-bar--cart{
        position: absolute;
        width: 100vw;
        margin-top: -30rem;
        /* margin-left: -36rem; */
        right: 0;
        z-index: -1;
    }
    .cart__list{
        height: 100vh;
    }
    .cart__line, .cart__total{
        display: grid;
        grid-template-columns: 50% 25% 25%;
        grid-template-areas:
        "product amount price";
        margin-right: 1.5rem;
    }
    .cart__line{
        border-bottom: #bb133e solid 0.3rem; /*!!!*/
        padding: 2rem 0rem;
        align-items: center;
        
    }
    .cart__label{
        font-size: 2.4rem;

    }
    .cart__item{
        font-size: 1.6rem;
    }
    .cart__item--product-amount{
        display: flex;
        align-content: center;
    }
    .total__wrapper{
        grid-area: price;
    }
    .total__wrapper > .price__wrapper{
        margin-top: 2rem;
    }
    .proceed--link{
        padding-top: 2rem;
    }
    .cart__total{
        margin-top: 2rem;
    }
    .total__label{
        font-size: 3rem;
    }
    .cart__input--number, .cart__input--button{
        background: white;
        border: 0.2rem #bb133e solid;
        font-size: 1.6rem;
        width: 5rem;
        border-radius: 0.5rem;
        cursor: pointer;
    }
    .detail--input, .date--input{
        background: white;
        border: 0.2rem #bb133e solid;
        font-size: 1.6rem;
        width: 5rem;
        border-radius: 0.5rem;
        cursor: pointer;
    }

    .cart__input--button{
       width: max-content;
       margin-bottom: 3rem; 
       background-color: transparent;
       border-color: #bb133e;
       color: white;
    }
    .cart__input--delete{
        margin: 0rem 0rem 0rem 0.5rem;
        background: url('../assets/img/cart-delete.svg');
        width: 2.6rem;
        height: 2.9rem;
        border: none;
    }
    .cart__input--delete:hover{
        cursor: pointer;
    }
    .payment__wrapper{
        display: flex;
        flex-flow: column;
        justify-content: space-between;
    }
    .total__wrapper{
        display: flex;
        flex-flow: column;
    }
    .grandtotal__wrapper{
        padding-top: 10rem;
    }
    .grandtotal__total{
        font-size: 4rem;
        font-weight: 700;
    }
    .grandtotal__price{
        font-size: 3rem;
        padding-left: 3rem;
    }
    .cards__radio-button{
        opacity: 0;
    }
    .cards__wrapper{
        display: flex;
    }
    .details-grid{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin: 0rem auto;
    }
    [type=radio] { 
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
      }
      
      /* IMAGE STYLES */
      [type=radio] + img {
        cursor: pointer;
      }
      
      /* CHECKED STYLES */
      [type=radio]:checked + img {
        outline: 2px solid #f00;
      }

    .detail--input{
        width: 24rem;
        margin: 0.4rem 0rem;
    }
    .details-grid label input{
        margin-top: 0.5rem;
    }
    .cart__details, .cart__payment{
        margin-left: 9rem;
        margin-top: 2rem;
    }
    .payment__wrapper{
    display: flex;
    flex-flow: column;
    flex-wrap: nowrap;
    align-items:  center;
    }
    .subtitle__payment{
        padding-top: 4rem;
    }
    .detail__wrapper{
        display: flex;
        flex-flow: column;
        align-items: center;
    }
    .date--input{
        width: 30rem;
        margin: 0.4rem 0rem;
    }
    .date--inputex{
        width: 14rem;
        margin: 0rem 1rem;
    }
    .date--label{
        display: flex;

    }
/* Truck */
    
    .content__truck{
        background-image: linear-gradient(-45deg,#00152e, #0160ad);
        overflow-x: hidden;
        height: min-content;
        background-repeat: repeat;
    }
    .truck__items{
        display: flex;
        justify-content: space-evenly;
    }
    .truck__item{
        display: flex;
        flex-flow: column;
        padding: 1rem 0rem;
        border: 0.4rem #bb133e solid;
        border-radius: 1rem;
        align-items: center;
        transform: scale(0.75);
        box-shadow: 0.2rem 0.2rem 0.4rem  black 0.3;
    }
    .item__button, .cart__button{
        font-size: 2rem;
        font-weight: 700;
        padding: 0.6rem;
        margin-top: 1rem;
        width: max-content;
        background-color: white;
        color: #bb133e;
        border: 0.4rem #bb133e solid;
        border-radius: 1rem;
        cursor: pointer;
        animation: 10s all ease-in-out;
        text-decoration: none;
    }
    .item__button:hover, .cart__button:hover{
        /* background-color: #bb133e;
        color: white;
        border: 0.4rem white solid; */
        font-weight: 900;
        box-shadow: 0.2rem 0.2rem 0.4rem  black;
    }
    .content__wrapper--truck{
        justify-content: flex-start;
        padding-top: 2rem;
        position: sticky;
        top: 0;
        align-items: center;
    }
    .truck__image{
        height: 20.9rem;
        margin: 0rem 1rem;
    }
    .arrows__wrapper{
        display: flex;
        justify-content: space-between;
        width: 96rem;
        position: absolute;
        z-index: 10;
        top: 50%;
    }
    .arrow__link{
        opacity: 0.8;
        animation: 0.8s all ease-in-out;
    }
    .arrow__link--left:hover{
        transform:translateX(-0.2rem);
    }
    .arrow__link--right:hover{
        transform:translateX(0.2rem);
    }

    .paragraph__truck1{
        line-height: 1.8rem;
        padding-top: 2rem;
    }
    /* Detail */