/* Basis Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: #000;
    background-color: #ffffff;
    width:100%;
    margin:0 auto;
}

header{
    position: sticky;
    z-index: 1000;
    top: 0px;
    background-color: #fff;
    border-bottom: 3px solid #000;
    padding-left:20px;
    padding-right:20px;
}

header .flexcontainer{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    padding-top:10px;
    padding-bottom: 10px;
    margin:0 auto;
}

footer .footerline1 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    padding-top:10px;
    padding-bottom: 10px;
    margin:0 auto;
}

header .flexcontainer .left{
    width: fit-content;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: fit-content;
    font-size:18px;
    font-weight: bold;
    padding-left: 10%;
}

footer .footerline1 .left{
    width: fit-content;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: fit-content;
    font-size:18px;
    font-weight: bold;
}

header .flexcontainer .right{
    flex-shrink: 1;
    flex-basis: 100%;
    text-align: right;
    padding-right:10%;
}

footer .footerline1 .right{
    flex-shrink: 1;
    flex-basis: 100%;
    text-align: right;
}

header .flexcontainer .right ul, footer .footerline1 .right ul{
    list-style: none;
    display: inline-block;
}

header .flexcontainer .right ul li, footer .footerline1 .right ul li{
    display: inline;
}

header .flexcontainer .right ul li a{
    text-decoration: none;
    color:#000;
    font-size:16px;
    font-weight: 500;
    padding: 5px 15px 5px 15px;
}

.back-to-work a{    
    text-decoration: none;
    color:#fff;
    font-size:16px;
    font-weight: 500;
    padding: 5px 15px 5px 15px;
    background-color: #000;
    border-radius: 5px;
}

.back-to-work a:hover{    
    text-decoration: none;
    color:#000;
    font-size:16px;
    font-weight: 500;
    padding: 2px 12px 2px 12px;
    border-radius: 5px;
    background-color: #fff;
    border:#000 3px solid;
}

.back-to-work {
    margin-bottom:30px;
}

footer .footerline1 .right ul li a{
    text-decoration: none;
    color:#fff;
    font-size:16px;
    font-weight: 500;
    padding: 5px 15px 5px 15px;
}


header .flexcontainer .right ul li a.active{
    text-decoration: none;
    color:#fff;
    font-size:16px;
    font-weight: 500;
    background-color: #000;
    padding: 5px 15px 5px 15px;
    border-radius: 5px;
}

footer .footerline1 .right ul li a.active{
    text-decoration: none;
    color:#000;
    font-size:16px;
    font-weight: 500;
    background-color: #fff;
    padding: 5px 15px 5px 15px;
    border-radius: 5px;
}

header .flexcontainer .right ul li a:not(.active):hover{
    text-decoration: none;
    color:#000;
    font-size:16px;
    font-weight: 500;
    padding: 2px 12px 2px 12px;
    border-radius: 5px;
    border:#000 3px solid;
}

footer .footerline1 .right ul li a:not(.active):hover{
    text-decoration: none;
    color:#fff;
    font-size:16px;
    font-weight: 500;
    padding: 2px 12px 2px 12px;
    border-radius: 5px;
    border:#fff 3px solid;
}

footer .footerline2 {
    margin-top: 20px;
}

/* Main Content */
main {
    text-align: center;
    margin-bottom:270px;
    margin-top: 55px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 275px - 100px - 55px);
}

main .videoWork{
    width: 100%;
    max-width: 100%;
}

.videoExperimentShow {
    width: fit-content;
    margin: 0 auto;
}

.imageExperimentShow {
    width: 582px;
    max-width: 582px;
    margin: 600px auto;
}

.hi {
    width: 100%;;
}

.contacthead{
    margin-top:20px;
}

.contact-list {
    list-style: none;
    padding: 0;
    width: fit-content;
    margin: 0 auto;
}

.contact-list li {
    font-size:16px;
    text-align: left;
    margin-bottom: 20px;
}

.contact-list li a {
    text-decoration: none;
    color: #000;
    font-size:18px;
    vertical-align: middle;
}

.contact-list li a img{
    width:30px;
    height:30px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 20px;
}

.contact-list li a:hover span{
    text-decoration: underline;
}

.contact-list li a:hover img, .iconsTuintje img:hover {
    animation: shake 1.5s ease-in-out infinite;
}

@keyframes shake {
    0% { transform: rotate(0deg); }
    5% { transform: rotate(-20deg); }
    10% { transform: rotate(20deg); }
    15% { transform: rotate(-20deg); }
    20% { transform: rotate(20deg); }
    25%, 100% { transform: rotate(0deg); }
}

.projects {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 50px;
    padding: 0px calc(10% + 20px) 0 calc(10% + 20px);
}

.project img {
    width:100%;
    transition: transform 0.3s ease;
}

.project{    
    flex-grow: 1;
    flex-basis: 30%;
}

.project a:hover img {
    transform: scale(1.1);
}

.roboto {
    font-family: 'Roboto', sans-serif;
    font-size: 1.5rem;
    margin: 1rem 0;
}

.poppins {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    margin: 1rem 0;
}

.opensans {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.5rem;
    margin: 1rem 0;
}

.lato {
    font-family: 'Lato', sans-serif;
    font-size: 1.5rem;
    margin: 1rem 0;
}

/* Footer */
footer {
    text-align: center;
    width: 100%;
    padding: 30px 10% 30px 10%;
    background: #181719;
    color: white;
    margin-top: 30px;
}

.aboutleft {
    flex-basis: 25%;
    flex-grow: 0;
    margin-right: 50px;
}

.projPageTextcontentLeft {
    flex-basis: 66.6%;
    flex-grow: 0;
    margin-right: 150px;
    text-align: left;
}

.projPageTextcontentInvertedLeft {
    flex-basis: fit-content;
    flex-grow: 0;
    margin-right: 50px;
    text-align: left;
}

.aboutleft img {
    width: 100%;
    min-width: 300px;
}

.aboutright {
    flex-basis: 75%;
    flex-grow: 1;    
    text-align: left;
    font-size: 16px;
}

.projPageTextcontentRight {
    flex-basis: 33.3%;
    flex-grow: 0;    
    text-align: left;
    font-size: 16px;
}

.projPageTextcontentInvertedRight {
    flex-basis: fit-content;
    flex-grow: 0;    
    text-align: left;
    font-size: 16px;
}

.projPageTextcontentInvertedRight ul, .projPageTextcontentRight ul{
    list-style-type: none;
}


.projPageTextcontentRight h2, .projPageTextcontentLeft h2, .projPageTextcontentInvertedRight h2, .projPageTextcontentInvertedLeft h2{
    font-size:18px;
    font-weight: bold;
    padding-bottom: 10px;
    white-space: nowrap;
}

.projPageTextcontentFull h1{
    font-size:20px;
    font-weight: bold;
}

.projPageTextcontentFull {
    width: 100%;
    margin: 250px auto 50px auto;
    padding: 0 20% 0 20%;
    text-align: left;
}

.projPageTextcontentFull img{
    width: 100%;
    min-width: 300px;
}

.aboutright a{
    text-decoration: none;
    color: #000;
    font-weight: bold;
}

.aboutright a:hover{
    text-decoration: underline;
}

.about, .projPageTextcontent {
    width: 100%;
    margin: 0 auto;
    padding: 0 20% 0 20%;
    display: flex;
}

.projPageTextcontent{
    margin-bottom: 50px;
}

.projPageTextcontent img{
    width: 100%;
}

.florunnercompare, .tuintjecompare {
    display: flex;
    justify-content: center;
    max-width: 100%;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto 100px 0;
}

.florunnercompare p, .tuintjecompare p{
    text-align: left;
    margin-bottom: 20px;
}

.florunnercompareLeft, .tuintjecompareLeft{
    flex-basis: 25%;
    flex-grow: 0;
    flex-shrink: 0;
    padding-right: 50px;
}

.florunnercompareRight, .tuintjecompareRight{
    flex-basis: 75%;
    flex-grow: 0;
    flex-shrink: 0;
}

.florunnercompareLeft img, .florunnercompareRight img, .tuintjecompareLeft img, .tuintjecompareRight img{
    width: 100%;
}

.colorpalatte{
    margin-bottom:0px;
    padding: 0 50px 0 15%;
    display: flex;
    width: 100%;
    margin: 0 auto;
}

.colorpalatte .projPageTextcontentLeft{
    flex-basis: 66.6%;
    flex-grow: 1;
    margin-right: 150px;
    text-align: left;    
    display: flex;
    align-items: center;
}

.colorpalatte .projPageTextcontentRight{
    flex-grow: 0;
    font-size: 16px;
    text-align: left;
    padding-top: 50px;
    padding-bottom: 15px;
    flex-basis: 185px;
    flex-shrink: 0;
}

.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 1 / 3 / 2 / 4; }
.div4 { grid-area: 1 / 4 / 2 / 5; }
.div5 { grid-area: 1 / 5 / 2 / 6; }
.div6 { grid-area: 1 / 6 / 2 / 7; }
.div7 { grid-area: 1 / 7 / 2 / 8; }
.div8 { grid-area: 1 / 8 / 2 / 9; }
.div9 { grid-area: 1 / 9 / 2 / 10; }
.div10 { grid-area: 2 / 1 / 3 / 2; }
.div11 { grid-area: 2 / 2 / 3 / 3; }
.div12 { grid-area: 2 / 3 / 3 / 4; }
.div13 { grid-area: 2 / 4 / 3 / 5; }
.div14 { grid-area: 2 / 5 / 3 / 6; }
.div15 { grid-area: 2 / 6 / 3 / 7; }
.div16 { grid-area: 2 / 7 / 3 / 8; }
.div17 { grid-area: 2 / 8 / 3 / 9; }
.div18 { grid-area: 2 / 9 / 3 / 10; }
.div19 { grid-area: 3 / 1 / 4 / 2; }
.div20 { grid-area: 3 / 2 / 4 / 3; }
.div21 { grid-area: 3 / 3 / 4 / 4; }
.div22 { grid-area: 3 / 4 / 4 / 5; }
.div23 { grid-area: 3 / 5 / 4 / 6; }
.div24 { grid-area: 3 / 6 / 4 / 7; }
.div25 { grid-area: 3 / 7 / 4 / 8; }
.div26 { grid-area: 3 / 8 / 4 / 9; }
.div27 { grid-area: 3 / 9 / 4 / 10; }
.div28 { grid-area: 4 / 1 / 5 / 2; }
.div29 { grid-area: 4 / 2 / 5 / 3; }
.div30 { grid-area: 4 / 3 / 5 / 4; }
.div31 { grid-area: 4 / 4 / 5 / 5; }
.div32 { grid-area: 4 / 5 / 5 / 6; }
.div33 { grid-area: 4 / 6 / 5 / 7; }
.div34 { grid-area: 4 / 7 / 5 / 8; }
.div35 { grid-area: 4 / 8 / 5 / 9; }
.div36 { grid-area: 4 / 9 / 5 / 10; }
.div37 { grid-area: 5 / 1 / 6 / 2; }
.div38 { grid-area: 5 / 2 / 6 / 3; }
.div39 { grid-area: 5 / 3 / 6 / 4; }
.div40 { grid-area: 5 / 4 / 6 / 5; }
.div41 { grid-area: 5 / 5 / 6 / 6; }
.div42 { grid-area: 5 / 6 / 6 / 7; }
.div43 { grid-area: 5 / 7 / 6 / 8; }
.div44 { grid-area: 5 / 8 / 6 / 9; }
.div45 { grid-area: 5 / 9 / 6 / 10; }
.div46 { grid-area: 6 / 1 / 7 / 2; }
.div47 { grid-area: 6 / 2 / 7 / 3; }
.div48 { grid-area: 6 / 3 / 7 / 4; }
.div49 { grid-area: 6 / 4 / 7 / 5; }
.div50 { grid-area: 6 / 5 / 7 / 6; }
.div51 { grid-area: 6 / 6 / 7 / 7; }
.div52 { grid-area: 6 / 7 / 7 / 8; }
.div53 { grid-area: 6 / 8 / 7 / 9; }
.div54 { grid-area: 6 / 9 / 7 / 10; }

@media (max-width: 1200px) {
    .projPageTextcontentFull{
        padding:0 20px 0 20px !important;
    }

    .about, .projPageTextcontent, .florunnercompare, .tuintjecompare {
        flex-wrap: wrap;
        padding: 0 10% 0 10%;
    }
    
    .aboutleft, .projPageTextcontentLeft, .projPageTextcontentInvertedLeft, .florunnercompareLeft, .tuintjecompareLeft {
        flex-basis: 100%;
        margin-right: 0;
        margin-bottom: 30px;
    }
    
    .projPageTextcontentLeft{
        display: flex;
        align-items: center;
    }

    .aboutright, .projPageTextcontentRight, .projPageTextcontentInvertedRight, .florunnercompareRight, .tuintjecompareRight {
        flex-basis: 100%;
    }

    .colorpalatte, .projPageTextcontentLeft{
        flex-wrap: wrap;    
    }

    .colorpalatte .projPageTextcontentLeft div:nth-child(2){
        margin-top: 50px;
        margin-bottom: 50px;
    }
}