@import '/css/root.css';

.logo-1,
.logo-2 {
    margin: 200px auto;
}

#slogan {
    margin-bottom: 70px;
}

#slogan span {
    color: var(--yellow);
    font-family: var(--semi);
}

.icon-down {
    width: 30px;
    cursor: pointer;
    transition: top ease 0.5s;
    transition: transform ease 300ms;
}
.icon-down:hover {
    transform: translate(0, 10px)
}


/* ------------------------------- */

.intro-container {
    position: relative;
}

.intro-col-1 {
    margin: -18vh auto auto -15px
} 

.intro-col-2 {
    position: absolute;
}

/* ------------------------------- */

.card-button {
    width: 40px;
    margin-bottom: 30px;
}

.card-icon {
    color: var(--yellow);
}

.card-1, 
.card-2, 
.card-3,
.card-footer {
    background-color: var(--background);
}

.card-title {
    margin: 20px;
}

/* ------------------------------- */

.portfolio-header {
    margin-top: 100px;
}

.case-2,
.case-4 {
    margin-top: 60px;
}

.case-info {
    margin-top: 10px;
}

.case-subheader {
    margin-left: 15px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.case-link {
    font-family: var(--regular);
    font-size: var(--body);
    color: var(--yellow);
    margin-right: 15px;
}

.case-link:hover {
    color: var(--darkgray);
} 

.case-product {
    margin-left: 15px;
}

.case-button {
    width: 35px;
    position: absolute;
    margin: 15px auto auto -50px;
}

/* ------------------------------- */

.contact-container {
/* position: relative; */
background-image: url(/input/images/schild-geel.svg);
background-repeat: no-repeat;
background-position: center;
background-size: auto 100%;
margin: 150px auto;
}

.contact-header {
    margin-top: 50px;
}

.contact-button {
    margin-top: -30px;
    margin-bottom: 50px;
}

.contact-button a:hover {
    color: var(--yellow);
}

/* ------------------------------- */

/* screen size LG en lager*/
@media (max-width: 992px) {
    .intro-col-1  {
        margin: -10vh auto auto -15px
    }
}

@media (max-width: 768px) {
    .case-2,
    .case-3,
    .case-4 {
        margin-top: 40px;
    }
}

/* screen size XS en lager*/
@media (max-width: 576px) {
    .logo-1,
    .logo-2 {
        margin: 150px auto;
    }
    
    .intro-col-1  {
        margin: -8vh auto auto -15px
    }

    .contact-header h1{
        font-size: 2rem;
    }

    .case-button {
        width: 25px;
        margin: 15px auto auto -40px;
    }
}





/* @media (min-width:) */