#header.header_home .cirkel { }
@media screen and (min-width: 1450px){ #header.header_home .cirkel { width: 150px !important; height: 150px !important;}}

#header.header_home .cirkel:before { background-image:url(img/layout/cirkel_white.png);}

.compleet_link { position: absolute; display: block; top: 50px; left: 50px; width: 150px; height: 150px; z-index: 2;}
.compleet_link:before { position: absolute; content: ""; top: 0px; left: 0px; width: 100%; height: 100%; background: url(img/layout/compleet_link.png?v=2) center center no-repeat; background-size: contain;
	-webkit-transition: 1s;
	transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.75,0,0.25,1);
	transition-timing-function: cubic-bezier(0.75,0,0.25,1);
}
.compleet_link:hover:before { transform: rotate(360deg);}

@media screen and (max-width: 1000px){ .compleet_link { display: none;}}


#home #testimonials { margin: 0px 0px 125px 0px; padding-top: 100px;}


#diensten { background-color: #BEDDAE;}
#diensten h1 { color: #000000; text-transform: none; margin-bottom: 80px; display: block !important;}

#diensten .diensten_previews { max-width: 1200px; top: -30px;}

#diensten .diensten_previews a .text, #diensten .diensten_previews .pretitle { font-family: "Internacional Alt","Courier New",monospace; font-weight: bold; font-style: normal;}

#diensten .diensten_previews .left { width: 100%; text-align: center;}
#diensten .diensten_previews .left a { display: inline-block; width: 33%; max-width: 500px; vertical-align: bottom;}
#diensten .diensten_previews .left a:hover { text-decoration: none;}
#diensten .diensten_previews .left a .text { font-size: 1.2em; line-height: 1.2em;}
#diensten .diensten_previews .left a .desc { display: block; font-size: 0.8em; margin-top: 20px; font-weight: normal; z-index: 1;}
#diensten .diensten_previews .left a .dienst_icon { display: block; height: 130px; background-size: contain; background-repeat: no-repeat; background-position: center center; margin-top: 20px; z-index: 1;}

#diensten .diensten_previews .right { position: fixed; width: 100%; text-align: right; margin-top: 75px; bottom: 50px; left: 50%; margin-left: -500px; max-width: 1000px;}
#diensten .diensten_previews .right .pretitle { position: absolute; top: 8px; left: 25px; font-size: 1em; line-height: 1em; font-weight: bold; z-index: 1;}
#diensten .diensten_previews .right .pretitle span { font-size: 1.2em; display: inline-block; margin-left: 7px; top: 5px;}
#diensten .diensten_previews .right a { font-size: 1em; display: inline-block; margin: 3px;}

@media screen and (min-width: 1000px){
	#diensten .diensten_previews .right a:hover { border: 3px solid #000000; text-decoration: none; margin: 0px;}
}

@media screen and (max-width: 1500px){
	#diensten .diensten_previews .left a { font-size: 1.3em !important;}
}

@media screen and (max-width: 1000px){
	#diensten { position: relative; height: auto; padding: 100px 0px 20px 0px;}
	#diensten .diensten_previews .left a { display: block; width: 100%; margin: 50px auto; padding: 130px 5% 0px 5%;}
	#diensten .diensten_previews .left a .dienst_icon { position: absolute; top: -40px; left: 0px; height: 130px; width: 100%;}
	#diensten .diensten_previews .right { position: relative; left: 0px; margin-left: 0px; text-align: center; max-width: 90%; margin: 150px auto 0px auto;}
	#diensten .diensten_previews .right .pretitle { position: relative; text-align: center; display: block; width: 100%; margin-bottom: 20px; font-size: 1.3em;}
	#diensten .diensten_previews .right a { display: block; font-size: 0.9em;}
}

.contact_desc { text-align: center;}
.contact_desc strong { font-family: "Internacional Alt","Courier New",monospace; font-weight: bold; font-style: normal; font-size: 1.2em; line-height: 1.5em;}

.contact_top { border-bottom: 5px solid #F16861; padding-bottom: 30px; max-width: 860px; margin: 50px auto 0px auto;}
.contact_top .part { display: inline-block; width: 33%; text-align: center; vertical-align: top;}
.contact_top .part .part_icon { display: block; width: 100%; height: 50px; background-position: center center; background-size: contain; background-repeat: no-repeat; margin-bottom: 20px; -webkit-transition: 0.3s; transition: 0.3s; -webkit-transition-timing-function: cubic-bezier(0.75,0,0.25,1); transition-timing-function: cubic-bezier(0.75,0,0.25,1);}
.contact_top .part:hover .part_icon { transform: scale(1.2);}
.contact_top .part .title { font-family: "Internacional Alt","Courier New",monospace; font-weight: bold; font-style: normal; font-size: 1.2em; display: block; margin-bottom: 10px;}
.contact_top .part .desc { font-size: 0.9em; line-height: 1.2em; display: block;}

.contact_title { max-width: 860px; margin: 0px auto; margin-bottom: -60px; font-family: "Internacional Alt","Courier New",monospace; text-align: center; font-weight: bold; font-style: normal; font-size: 2.5em; line-height: 1.5em; min-height: 130px; padding: 50px 100px; background: url(img/layout/dog.png) bottom right no-repeat; background-size: 130px auto;}

.select_container:after { position: absolute; top: 1px; content:"\f0dd" !important; font-family: 'Font Awesome 5 Free' !important; font-weight: 900 !important; font-style: normal !important; color: #F16861; z-index: 1; font-size: 36px; pointer-events: none; top: 5px; right: 20px;}
.select_container { width: 96%; margin: 0px auto 4% auto;}
.select_container select { width: 100%; padding: 12px 15px; background: #eeeeee; color: #848484; font-size: 1em; font-family: "Internacional Alt","Courier New",monospace; font-weight: normal; font-style: normal;}

a#submit_form_contact { width: 96%; text-align: center;}

@media screen and (max-width: 800px){
	.contact_title { background: none; padding: 30px 0px; font-size: 2em;}
	.contact_top .part .desc { display: none;}
}
@media screen and (max-width: 500px){
	.contact_title { font-size: 1.3em;}
}

#footer.contact .footer_items .footer_item { font-size: 0.95em !important;}
@media screen and (min-width: 1000px){
	#footer.contact .footer_items .footer_item:last-of-type { left: -2.5%; padding-right: 0px !important;}
}

#compleet .compleet_top { background: #295540; padding-top: 70px;}
#compleet .compleet_wrapper { width: 90%; max-width: 1450px; margin: 0px auto; padding: 100px 0px;}
#compleet .compleet_circle:before { position: absolute; top: 0px; left: 0px; width: 50%; height: 100%; content: ""; background: url(img/layout/compleet_overlay.png?v=4) center left no-repeat; background-size: contain; z-index: 1; pointer-events: none;}
#compleet svg { height: calc(100vh - 200px); max-height: 700px; max-width: 50%;}
/*
@media screen and (max-width: 1050px){
	#compleet .compleet_circle:before { width: 100%; background-position: center center;}
	#compleet svg { max-height: 700px; width: 100%; max-width: none;}
}
*/
@media screen and (max-width: 1000px){
	#compleet .compleet_circle { max-width: 500px; display: none;}
	#compleet svg { height: auto; max-height: none; width: 100%;}
}
#compleet path { fill: #ffffff; -webkit-transition: 0.3s; transition: 0.3s; -webkit-transition-timing-function: cubic-bezier(0.75,0,0.25,1); transition-timing-function: cubic-bezier(0.75,0,0.25,1); cursor: pointer;}
#compleet path.active { fill: #FAE300;}
#compleet path:hover { fill: #FAE300;}

.compleet_intro { position: absolute; top: 150px; right: 0px; width: 45%; text-align: center;}
@media screen and (max-width: 1200px){ .compleet_intro { top: 100px;}}
.compleet_intro .icon { height: 80px; margin-bottom: 30px; background-size: contain; background-position: center center; background-repeat: no-repeat;}
.compleet_intro .title { font-family: "Internacional Alt","Courier New",monospace; font-weight: bold; font-size: 1.6em; line-height: 1.2em; color: #ffffff;}
.compleet_intro .title span { color: #FAE300;}
.compleet_intro .text { margin-top: 40px; font-family: "Internacional Alt","Courier New",monospace; font-weight: bold; color: #ffffff; line-height: 1.6em;}
.compleet_intro .text b, .compleet_intro .text strong { font-family: "Internacional Alt","Courier New",monospace; font-weight: bold; color: #FAE300;}
.compleet_intro .arrow_down_yellow { margin-top: 20px; display: inline-block; width: 50px; height: 60px; background: url(img/layout/arrow_down.png) center center no-repeat; background-size: contain; cursor: pointer;}

.compleet_bottom { padding: 75px 0px; color: #295540;}
.compleet_bottom h2, .compleet_bottom h3, .compleet_bottom h4, .compleet_bottom h5 { font-family: "Internacional Alt","Courier New",monospace; font-weight: bold; color: #295540; text-align: left; margin: 25px 0px 5px 0px; font-size: 1.5em; line-height: 1.2em; text-transform: none;}

.compleet_nav { background: #295540; padding: 50px 0px;}
.compleet_nav a, .compleet_nav .passive { font-family: "Internacional Alt","Courier New",monospace; font-weight: bold; color: #FAE300;}
.compleet_nav .next { float: right;}
.compleet_nav .passive { color: #ffffff; opacity: 0.3;}


.compleet_mobile { display: none; background: #295540; margin-top: 70px; padding: 50px 0px;}
.compleet_mobile .maintitle { font-family: "Internacional Alt","Courier New",monospace; font-weight: bold; color: #FAE300; text-align: center; font-size: 1.2em;}

.steps { margin: 30px auto 50px auto; max-width: 600px; padding: 0px 5%; font-size: 1.2em;}
@media screen and (max-width: 850px){ .steps { font-size: 1.1em;}}
@media screen and (max-width: 700px){ .steps { font-size: 1em;}}
.steps .party { width: 100%; height: 70px; margin-top: 30px; background: url(img/layout/party.png) center center no-repeat; background-size: contain;}
.step { }
.step .title { font-size: 1em; line-height: 1.2em; padding: 20px 80px 13px 80px; cursor: pointer; color: #295540; margin-bottom: 5px; text-align: center;}
.step .title .name { font-family: "Internacional Alt","Courier New",monospace; font-weight: bold; display: block; font-size: 0.9em; text-transform: uppercase; margin-bottom: 2px; z-index: 2;}
.step .title .desc { display: block; font-size: 13px; line-height: 15px; vertical-align: top; z-index: 2;}
.step .title .count { position: absolute; top: 50%; left: 20px; margin-top: -15px; height: 30px; width: 30px; background: #295540; color: #ffffff; border-radius: 15px; font-family: "Internacional Alt","Courier New",monospace; font-weight: bold; font-size: 1em; line-height: 30px; z-index: 2;}
.step .title .icon { position: absolute; top: 10%; right: 20px; width: 40px; height: 80%; background-size: contain; background-position: center center; background-repeat: no-repeat; z-index: 2;}
.step .title:before { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: #ffffff; content: ""; z-index: 1;}
.step .title:after { position: absolute; bottom: -13px; left: 50%; width: 50px; margin-left: -25px; text-align: center; content:"\f0d7" !important; font-family: 'Font Awesome 5 Free' !important; font-weight: 900 !important; font-style: normal !important; font-size: 1em; display: inline-block; text-decoration: none; font-size: 50px; color: #ffffff; z-index: 0; text-shadow: 0px 6px 0px #295540;}
.step .title.active:before { background: #FAE300;}
.step .title.active:after { color: #FAE300;}

.step .title.count_0 { z-index: 10;}
.step .title.count_1 { z-index: 9;}
.step .title.count_2 { z-index: 8;}
.step .title.count_3 { z-index: 7;}
.step .title.count_4 { z-index: 6;}
.step .title.count_5 { z-index: 5;}
.step .title.count_6 { z-index: 4;}
.step .title.count_7 { z-index: 3;}
.step .title.count_8 { z-index: 2;}
.step .title.count_9 { z-index: 1;}

.step .txt { font-size: 0.9em; line-height: 1.5em; display: none; padding: 20px 0px 20px 0px; line-height: $line_height;}
.step .txt .steptitle { font-size: 0.9em; font-family: "Internacional Alt","Courier New",monospace; font-weight: bold; font-size: 1em; line-height: 1.2em; color: #ffffff; text-align: center; display: block;}
.step .txt .steptitle span { color: #FAE300; font-size: 1.6em; line-height: 1.2em; display: block; margin-bottom: 5px;}
.step .txt * { color: #ffffff;}
.step .txt ul li:before { color: #FAE300 !important;}

@media screen and (max-width: 1000px){
	.compleet_top { display: none;}
	.compleet_bottom { display: none;}
	.compleet_nav { display: none;}
	.compleet_mobile { display: block;}
}


/*
.svg_container { width: 100%; padding-top: 100%;
	.svg_bg { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: url(img/layout/schema.png) center center no-repeat; background-size: cover;}
	svg { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;
		g { }
		path { fill: transparent; stroke-width: 0px; cursor: pointer;
			&:hover { fill: #000000; stroke: #000000; stroke-width: 6px; opacity: 0.3;}
		}
		circle { fill: transparent;}
	}
	.svg_overlay { position: absolute; top: 0px; left: 0px; background: url(img/layout/schema.png) center center no-repeat #e0e7eb; background-size: cover; width: 100%; height: 100%; pointer-events: none; opacity: 0; mask: url("img/layout/path.svg"); display: none;}
	#clipper { pointer-events: none;
		#myClip path { fill: transparent;}
	}
}
*/