/*Colors
white:      #FBFAF6
light grey: #D3CECA
red:        #D56154
gold:       #CAA988
dark grey:  #3D3D3C



*/
html, body, div {
    padding: 0px;
    margin: 0px;
}

a {
    text-decoration: none;
    cursor: pointer;
}


body {
    font-family: 'Work Sans', sans-serif;
    overflow-x: hidden;
    background-color:#D3CECA;
}

.hero {
    overflow-y: hidden;
    height: 100vh;
    background-image: url(assets/GettyImages-157510865-SW_retusche_grau.jpg);
    background-position: center;
    background-size: cover;
    display: grid;
    grid-template-rows: 20% 1fr;

}

.hero__banner {
    height: 10vh;
    width: auto;
    background-color: #D56154;
    padding: 5vh 3rem;
}

.logo-type {
    width: 100%;
    text-align: right;
}

.logo-type__icon {
    width: 16rem;
}

.hero__container {
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hero__img {
    position: absolute;
    top: 0px;
    left: -50%;
    z-index: -1;
    height: 100vh;
    width: auto;
}

.signet {
    text-align: right;
}

.signet__icon {
    width: 4rem;
    
}

.hero__claim {
    color: #FBFAF6;
    font-weight: 500;
    font-size: 1.5rem;
    text-transform: uppercase;
    line-height: 2.2rem;
}

.contact {
    display: block;
    padding: 4rem 2rem;
}

.contact__text {
    font-size: 1.1rem;
    line-height: 1.8rem;
    text-align: left;
    grid-area: text;
}

.contact__img {
    width: 100%;
    margin: 4rem 0rem;
    grid-area: img;
}

.contact__btn {
    grid-area: btn;
    text-align: center;
}

.contact__btn__link {
    color: #FBFAF6;
    background-color: #D56154;
    font-size: 1.25rem;
    padding: 0.7rem 1.3rem;
    transition-property: background-color, color;
    transition-duration: 0.3s;
}

.contact__btn__link:hover {
    background-color:#3D3D3C;
}

.footer {
    background-color: #3D3D3C;
    font-size: 0.8rem;
    text-align: center;
    padding: 1.5rem 0rem;
}

.footer__elm {
    color: #FBFAF6;
}

/*
----- 700px
*/

@media (min-width: 700px) {
    .hero__banner {
        padding: 5vh 6rem;
    }

    .hero__container {
        padding: 6rem;
    }
    
    .hero__claim {
        font-size: 2.5em;
        line-height: 3.5rem;
        margin: 0;
    }
    .logo-type__icon {
        width: 20rem;
    }
    .contact {  
        padding: 6rem;
    }
    .contact__img {
        margin: 6rem 0rem;
    }
}

/*
----- 1000px
*/

@media (min-width: 1000px) {
    .hero {
        height: 80vh;
        grid-template-rows: 25% 1fr;

    }
    .hero__banner {
        padding: 5vh 6rem;
    }
    .hero__container {
        padding: 3rem 6rem 6rem 6rem;
    }

    .hero__claim {
        width: 70%;
        font-weight: 400;
        font-size: 2.7rem;
    }
    .contact {
        margin: 0 auto;
        max-width: 1300px;
        display: grid;
        grid-template-columns: 7fr 4fr;
        grid-column-gap: 6rem;
        grid-template-rows: auto;
        grid-template-areas: 
        "text img"
        "btn img"; 
    }
    .contact__img {
        margin: 0;
    }
    .contact__text {
        margin: 0;

    }
    .contact__btn {
        text-align: left;
    }

}

/*
----- 1250px
*/

@media (min-width: 1250px) {
    .hero__claim {
        width: 65%;
    }
    .contact {
        grid-column-gap: 12rem;
    }

    .contact__text {
        font-size: 1.3rem;
        line-height: 2rem;
    }

}

/*
----- 1500px
*/

@media (min-width: 1500px) {
    .hero__container, .logo-type {
        width: 100%;
        max-width: 1300px;
        margin: 0 auto;
    }
}

/*
----- 1800px
*/

@media (min-width: 1800px) {
    .hero__claim {
        font-size: 3.2rem;
        font-weight: 400;
        line-height: 4.5rem;
    }
}