/* ### default ### */
:root {
    --side-white-space--: 16%;
    --color-yellow--: #ffc20f;
    --color-red--: #f50002;
    --color-logo-gray--: #666666;
    --color-gray--: #878787;
    --color-text--: #272727;
    --color-text-white--: #e7e7e7;
}

@font-face {
    font-family: MyriadR;
    src: url("../fonts/MyriadPro-Regular.otf");
}

* {
    margin: 0;
    box-sizing: border-box;
    font-size: 16px;
    font-family: MyriadR;
    overflow: hidden;
    scroll-behavior: smooth;
    word-spacing: 0.3em;
}

html {
    overflow-y: scroll;
    color: var(--color-text--);
}

.row {
    display: flex;
}

.col {
    display: flex;
    flex-direction: column;
}

.f1 {
    flex: 1;
    color: var(--color-text-white--);
}

.f {
    width: 100%;
}

.z {
	width: 100% !important;
    padding-right: var(--side-white-space--) !important;
}

.z p {
	text-indent:-1.5em;
	padding-left: 1.5em;
}

.z ol {
	padding-left: 1.5em;
	list-style: none; /* Remove list bullets */
	/*list-style-type: circle;*/
}

.z ol li {
	font-size: 0.8rem;
	line-height: 1.8;
}

.z ol li::before {
  content: "•"; /* Insert content that looks like bullets */
  padding-right: .5em;
  color: var(--color-yellow--); /* Or a color you prefer */
}

h1 {
    font-size: 2.8rem;
    margin-bottom: 18px;
}

h2 {
    font-size: 2.2rem;
    margin-bottom: 18px;
    min-width: 10em;
}

p {
    font-size: .8rem;
    line-height: 1.8;
}

sup {
	font-size: revert;
}

.ccbutton {
    color: var(--color-text-white--);
    background: #F4B407;
    padding: 8px 18px;
    border-radius: 50px;
    max-height: min-content;
    width: fit-content;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    border: 2px solid var(--color-yellow--);
    transition: color .2s linear, background .2s linear;
    line-height: 1;
}

.ccbutton:hover {
    background: rgba(244, 180, 7, 8%);
    color: var(--color-yellow--);
}

img {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

img.square {
    width: 3rem;
    aspect-ratio: 1;
    margin-bottom: 12px;
}

img.language {
	width: 1.5em;
}

section {
    max-width: 100vw;
    overflow: hidden;
    margin-top: 2em;
}

.borr {
    border-right: 1px solid black;
}

a {
    color: var(--color-red--);
    text-decoration: none;
    font-size: inherit;
}

a:hover {
    text-shadow: 1px 1px var(--color-gray--);
}

/* ### header ### */

abbr {
	text-decoration-color: var(--color-yellow--);
	text-decoration-thickness: 0.1em;
	font-size: inherit;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15%;
    z-index: 10;
    position: fixed;
    top: 0;
    height: 100px;
    width: 100%;
    padding: 6px var(--side-white-space--);
    background: white;
    box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.75);
}

header nav {
    align-items: center;
    gap: 40px;
}

header a {
	height: 80%;
}

header a img, header img {
	display: block;
	/*height: 80%;
	width: auto;*/
}

header img.monique {
	aspect-ratio: 1.82;
	width: 128px;
}

header img.techniek {
	aspect-ratio: 2.23;
	width: 157px;
}

header a img {
    height: 100%;
}

header svg {
    position: fixed;
}

header svg:nth-of-type(odd) {
    transform: scaleY(-1);
}

/* ### Media ### */

@media only screen and (max-width: 1200px) {
    section#home .wrapper {
        padding-top: 80px;
    }
}

@media only screen and (max-width: 1000px) {
    section#home .wrapper {
        padding-top: 180px;
    }
}

@media only screen and (max-width: 800px) {
    section#home .wrapper {
        padding-top: 200px;
    }

	section#home .z {
		padding: 1em !important;
	}
}

@media only screen and (max-width: 720px) {
	header {
        padding: 6px 20px;
        height: 80px;
    }

    header .row {
    	display: none;
    }
    
    section#home .wrapper {
        padding-top: 0;
    }

    section#home {
        gap: 0 !important;
    }

    section#home .col {
    	width: auto !important;
    }

    section#diensten .wrapper {
    	display: contents !important;
      flex-direction: column;
    }

    section#diensten .wrapper a {
      display: inline-block;
    }

    section#diensten .row {
    	padding-top: 1em !important;
        flex-direction: column;
    }

    section#info {
        flex-direction: column;
    }

    section#info .f {
        width: 100%;
    }

    section#info .col {
   	padding: 8px 70px !important;
	}

    section#werk {
        padding: 0 12px !important; 
    }

    section#werk nav img {
        min-width: 12em !important;
        max-height: 6em !important;
        margin-left: 2em;
    }

    section#overOns {
        flex-direction: column;
    }

    section#overOns .col {
    	padding: 0 !important;
    }

    section#overOns .f p {
    	height: 20em;
    }

    section#home {
        flex-direction: column;
    }

    section#contact {
    	padding-top: 10% !important;
        flex-direction: column;
    }
    section#contact .c2 {
    	margin-top: 1em;
    }
}

/* ### sections ### */

/* ## home ## */

section#home {
    margin-top: 100px;
    gap: 80px;
    padding-top: 60px;
}

section#home .wrapper {
    flex: 1;
    height: min-content;
    transform-origin: bottom;
}

section#home .wrapper img {
    width: 100%;
    aspect-ratio: 1.8;
}

section#home .scrlbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--color-yellow--);
    position: relative;
    top: -60px;
    fill: var(--color-text-white--);
}

section#home .scrlbtn svg {
    transform: scale(.8);
}

section#home .col {
    padding: 16px;
    padding-left: var(--side-white-space--);
    width: min-content;
    min-width: 40%;
    position: relative;
}

/* ## OverOns ## */

section#overOns {
    margin-top: -116px;
    margin-bottom: 2em;
    padding: 0 var(--side-white-space--);
    padding-top: 120px;
    background: var(--color-text--);
    color: var(--color-text-white--);
    gap: 20px;
}

section#overOns .col {
    padding: 32px 80px 60px;
    padding-right: 0;
    gap: 12px;
}

/*section#overOns .col a {
	position: absolute;
	bottom: 7em;
	right: 5em;
}*/

section#overOns img {
    align-self: flex-start;
    object-fit: contain;
}

/* ## grijzekop ## */

.grijzekop {
	border: 2px solid white;
	position: relative;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	width: 20em;
	height: 10em;
	background: var(--color-gray--);
	align-items: center;
	justify-content: center;
}

.grijzekop h3 {
    text-align: center;
    font-size: 1.2rem;
    color: var(--color-text-white--);
    font-weight: lighter;
}

/* ## diensten ## */
section#diensten .row {
    padding: 10em var(--side-white-space--);
    align-items: center;
}

section#diensten .wrapper {
	position: absolute;
	display: flex;
	/*flex-wrap: wrap;*/
	right: var(--side-white-space--);
	width: max-content;
}

section#diensten .wrapper img {
	height: 10em;
	padding: 0em 1em;
}

section#diensten .row:nth-of-type(3) {
    padding: 0;
    margin-bottom: 5em;
    gap: 1em;
    flex-wrap: wrap;
}

section#diensten div.row div.item img {
    height: 13em;
	 aspect-ratio: 16/10;
}

section#diensten .row:nth-of-type(3) .item {
	 /*aspect-ratio: 16/10;*/
    position: relative;
    height: min-content;
    padding: 0.5em;
    border: 1px solid var(--color-gray--);
    box-shadow: -2px -2px 5px var(--color-yellow--) inset;
}

section#diensten .row:nth-of-type(3) .item .overlay {
    position: absolute;
    background: rgba(102, 102, 102, 90%);
    height: 13em;
    top: 0.5em;
    opacity: 0;
    z-index: -1;
    transition: opacity .2s linear;
    text-align: center;
    color: var(--color-text-white--);
    justify-content: center;
    cursor:help;
    padding: 0 1em;
	 aspect-ratio: 16/10;
}

section#diensten .row:nth-of-type(3) .item:hover .overlay {
    opacity: 1;
    z-index: 3;
}

section#diensten .row:nth-of-type(3) .item .overlay h2 {
    color: var(--color-yellow--);
    min-width: 0em;
}

/* ## info ## */

section#info {
    /*padding-right: var(--side-white-space--);*/
    gap: 30px;
} 

section#info .wrapper {
    position: relative;
}

section#info .wrapper .bottom {
	width: 22em;
	height: 16em;
	background: var(--color-text--);
	position: absolute;
	z-index: -1;
	bottom: 4px;
}

section#info .wrapper .top {
	margin-left: var(--side-white-space--);
	padding-bottom: 40px;
}

section#info .wrapper img {
	aspect-ratio: 1.125/1;
	width: 450px;
	height: 400px;
	border: 2px solid white;
}

section#info .col {
    padding: 8px 70px;
    padding-left: 15em;
}

section#info .col h2 {
    margin-top: 12px;
}

/* ## werk ## */

section#werk {
    padding: 10em var(--side-white-space--);
}

section#werk .row {
    align-items: center;
    gap: 8px;
}

section#werk nav {
    flex: 1;
    gap: 12px;
    margin: 12px 4px;
    overflow: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}

section#werk nav a {
	scroll-snap-align: center;
	width: fit-content;
	height: fit-content;
	margin: 0em 1em;
	/*display: block;*/
	overflow: visible;
}

section#werk nav a:first-child {
	scroll-snap-align: start;
}

section#werk nav a:last-child {
	scroll-snap-align: end;
}

section#werk nav a img {
    min-width: 16em;
    max-height: 7.5em;
    scroll-snap-align: center;
}

section#werk .row svg {
    transform: rotate(90deg);
    width: 3em;
    height: 3em;
    fill: var(--color-yellow--);
    cursor: pointer;
    transition: fill .2s linear;
}
section#werk .row svg:nth-of-type(2) {
    transform: rotate(-90deg);
}

section#werk svg:hover {
    fill: var(--color-gray--);
}

/* ## contact ## */

section#contact {
	position: relative;
	padding: 5% var(--side-white-space--);
	overflow: hidden;
	background: var(--color-gray--);
}

section#contact a {
    color: var(--color-yellow--);
}

section#contact img {
   position: absolute;
	width: 2em;
	height: 2em;
}

section#contact img:first-child {
   transform: rotate(90deg);
	left: 10%;
	top:1em;
}
section#contact img:last-child{
   transform: rotate(270deg);
   right: var(--side-white-space--);
	bottom:1em;
}

section#contact div .kop::after {
    content: '';
    display: block;
    position: relative;
    bottom: 0;
    left: 0;
    width: 80%;
    height: 2px;
    margin-top: 4px;
    margin-bottom: 8px;
    background: linear-gradient(90deg, var(--color-yellow--) 40%, rgba(255, 195, 15, 60%) 60%);
}

section#contact .c1 p {
    text-align: left;
    width: 80%;
}

section#contact .c2 .item {
    align-items: center;
    line-height: 2;
    margin-top: 5px;
}

section#contact .c2 .item address {
	line-height: 1.5em;
}

section#contact .c2 .item .div {
	width: 48px;
	height: 48px;
}

section#contact .c2 .item .col {
	gap: 1.2em;
}

section#contact .c2 .item svg {
    fill: var(--color-text-white--);
    height: fit-content;
    width: fit-content;

    transform: scale(.8);
}

/* ### Footer ### */

footer {
    align-items: center;
    height: 40px;
    padding: 0 var(--side-white-space--);
}

footer .item {
    padding: 0 2%;
    height: fit-content;
    font-size: .7rem;
}

footer .item a:hover {
    text-shadow: 1px 1px var(--color-text--);
}