/* created by Pieter Boersma on 10 - 01 - 2019 */

:root {
	--scarletRed: #840000;
	--darkBrown: #3B2500;
	--padding: 20px;
	
	--default-font-size: 16px;
	--default-h1-font-size: 25px;
	--desktop-h1-font-size: 35px;
	--mobile-smaller-font-size: 12px;
	--desciption-font-size: 12px;
	
	--default-line-height: 25px;
	--slightly-bigger-line-height: 30px;
	--h1-line-height: 35px;
}

* { box-sizing: border-box; }

html { font-family: helvetica; line-height: var(--default-line-height); }

[class*="col-"] { width: 100%; }

h1 {font-size: var(--default-h1-font-size); line-height: var(--h1-line-height); font-weight: bold; padding-left: 20px; padding-top: 20px; padding-right: 20px; }
h2 { font-size: 27.5px; line-height: 27.5px; }
p { font-size: var(--default-font-size); line-height: var(--default-line-height); padding-left: 20px; color: #FFFFFF; padding-top: 20px; }

.button-contact-red { -webkit-appearance: none; height: 60px; line-height: 0px; background-color: var(--scarletRed); border: none; font-size: var(--default-font-size); color: #FFFFFF; margin-top: 20px; font-weight: bold; width: 90% !important; margin-left: auto; margin-right: auto; display: block; cursor: pointer; }
.button-contact-brown { -webkit-appearance: none; height: 60px; line-height: 0px; background-color: var(--darkBrown); border: none; font-size: var(--default-font-size); color: #FFFFFF; margin-top: 20px; font-weight: bold; width: 90% !important; margin-left: auto; margin-right: auto; display: block; cursor: pointer; }
.button-contact-white { -webkit-appearance: none; height: 60px; line-height: 0px; background-color: #FFFFFF; border: none; font-size: var(--default-font-size); color: var(--scarletRed); margin-top: 20px; font-weight: bold; width: 90% !important; margin-left: auto; margin-right: auto; display: block; cursor: pointer; }

.a_link { text-decoration: none; color: #FFFFFF; }
.a_navigation_bar_active { position: relative; color: #FFFFFF; background-color: var(--scarletRed); text-decoration: none; padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; }
.arrow { height: 30px; width: auto; padding-left: 40px; padding-right: 40px; display: none; cursor: pointer; }
.a_navigation_bar { color: #000000; text-decoration: none; padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px;}
.div_404-wrapper { padding-left: 20px; line-height: var(--default-line-height) !important;  }
.div_index_slider_circle, .div_index_slider_circle_active { width: 30px; height: 30px; display: inline-block; border-radius: 100%; margin-left: 4px; margin-right: 4px; cursor: pointer; }
.div_index_slider_circle { background-color: transparent; border: 5px solid #FFFFFF; }
.div_index_slider_circle_active { background-color: #FFFFFF; }
.li_navigation_bar, .li_navigation_bar_active { text-align: center; display: block; width: 90%; margin-left: 5%; padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; }
.li_navigation_bar_active { background-color: var(--scarletRed); }
.ul_arrow_listed { list-style-image: url("../img/icon/arrow.png"); line-height: var(--slightly-bigger-line-height); }
.mt-20 { margin-top: 20px; }

#button_index_slider { -webkit-appearance: none; height: 60px; line-height: 0px; background-color: #FFFFFF; border: none; font-size: var(--default-font-size); color: #000000; margin-top: 20px; font-weight: bold; width: 90% !important; margin-left: auto; margin-right: auto; display: block; }
#button_index_slider > a { text-decoration: none; color: #000000; }
#div_index_slider_circle_wrapper { margin: auto; text-align: center; position: absolute; bottom: 20px; }
#div_index_slider_previous { -webkit-transform: scaleX(-1); transform: scaleX(-1); }
#div_index_slider_wrapper { background-image: url("../img/slider/binding_mobile.jpg"); height: 600px; background-size: cover; position: relative; }
#div_index_text_wrapper { padding-left: var(--padding); }
#div_sub_main_wrapper h1 { padding-left: 0px; }


#h1_index_slider { color: #FFFFFF; }
#img_logo { height: 120px; display: block; margin: auto; margin-bottom: 20px; }
#ul_navigation_bar { list-style-type: none; margin: 0; padding: 0; overflow: hidden; }

@media only screen and (max-width: 599px){
	#div_jumbotron { background-color: var(--darkBrown); color: #FFFFFF; height: 300px; text-align: center; }
	#h1_index {  }
	#img_index_logo { width: 40%; position: absolute; left: 30%; }
}

@media only screen and (min-width: 600px) and (max-width: 899px){
	#div_jumbotron { background-color: var(--darkBrown); height: 300px; color: #FFFFFF; }
	#div_index_part1 { height: 300px; width: 70%; display: flex; position: absolute; left: 15%; }
	#h1_index { margin: auto; text-align: center; padding: 0px; font-size: 40px; line-height: 45px; }
	#img_index_logo { margin: auto; width: 100px; margin-left: 80px; }
}

@media only screen and (min-width: 900px){

	[class*="col-"] { line-height: 30px; }

	.col-1 	{ width: 8.33%; }
	.col-2 	{ width: 16.66%; }
	.col-3 	{ width: 25%; }
	.col-4 	{ width: 33.33%; }
	.col-5 	{ width: 41.66%; }
	.col-6 	{ width: 50%; }
	.col-7 	{ width: 58.33%; }
	.col-8 	{ width: 66.66%; }
	.col-9 	{ width: 75%; }
	.col-10 { width: 83.33%; }
	.col-11 { width: 91.66%; }
	.col-12 { width: 100%; }
	
	.arrow { display: inline-block; }
	.button-contact-red, .button-contact-brown, .button-contact-white { width: 16.66vw !important; margin: 0; margin-top: 20px; margin-left: 0px; }
	.li_navigation_bar, .li_navigation_bar_active { float: left; line-height: 60px; width: initial; margin-left: 0px; }
	.li_navigation_bar_active { height: 125px; background-color: var(--scarletRed); position: relative; }
	.li_navigation_bar_active::after { background-image: url("../img/triangle.png"); background-size: 100% 100%; display: inline-block; position: absolute; top: 100%; left: 0px; width: 100%;  height: 20px; content: ""; }
	
	#button_index_text, #button_index_slider { margin-left: 20px; width: 25% !important; }
	#div_index_slider_circle_wrapper { left: 20.835%; }
	#div_index_slider_wrapper { background-image: url("../img/slider/binding_desktop.jpg"); }
	#div_index_text_wrapper { max-width: 66.66%; position: relative; z-index: -1;}
	#div_index_slider_text_wrapper { max-width: 50%; }
	
	#div_jumbotron { background-color: var(--darkBrown); height: 300px; color: #FFFFFF; }
	#div_index_part1 { height: 300px; width: 70%; display: flex; position: absolute; left: 15%; }
	#h1_index { margin: auto; text-align: center; padding: 0px; font-size: 40px; line-height: 45px; }
	#img_index_logo { margin: auto; width: 100px; margin-left: 80px; }
	
	
	#img_logo { height: 60px; margin-bottom: 0px; }
	#li_navigation_bar_logo { margin-right: 30px; }
	
	
	#ul_navigation_bar { position: relative; z-index: 2; overflow: visible; height: 80px; }
	
	
	h1 { font-size: var(--desktop-h1-font-size); line-height: var(--desktop-h1-font-size); }
}