/* BY DEFAULT */


@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');

/*

COLOR:

gold: #c6a571
white-off: #f5f4f3
dark-grey: #343434
grey: #ababab
light-grey: #f5f4f3
sand: #d1c7bd

background: #fefcfb
*/

html {
  height: 100%;
}

* {
  	margin: 0;
  	padding: 0; 
  	list-style: none;
  	box-sizing: border-box;
  	text-decoration: none;
  	font-family: 'Open Sans';
  	color: #231f20;
  	font-size: 1.063rem;
  	font-weight: 300;
}

body {
   	background-color: #fefcfb;
}

h2 {
	font-weight: 600;
	font-size: 1.75rem;
}

main ul {
	width: 100%;
}

main ul li {
  	list-style-image: url("../_images/list_item.png");
  	background-repeat: no-repeat;
	background-position: center;
	min-height: 20px;
}

header {
	min-height: 200px;
	background-color: #343434;
}

#logo {
	float: left;
	margin-left: 80px;
	margin-top: 54px;
}

#logo img {
	width: 340px;
	height: auto;
}

#menu {
	float: right;
	margin-right: 80px;
	margin-top: 52px;
}

#menu ul li {
	display: inline-block;
	float: left;
	padding-right: 20px;
}

#menu ul li:nth-child(3) {
	padding-right: 0;
    margin-top: 24px;
}

#menu a, #menu button {
	background-color: #343434;
	color: #c6a571;
	padding-top: 16px;
	padding-bottom: 16px;
	padding-left: 20px;
	padding-right: 20px;
	border-style: solid;
	border-color: #c6a571;
	border-radius: 8px;
}

#menu a:hover, #menu button:hover {
	cursor: pointer;
	color: #f5f4f3;
	border-color: #f5f4f3;
}

#menu ul li:nth-child(3) button {
	background-color: #343434;
	border-color: #343434;
	padding: 0;
}

.wrapper_full {
	width: 100%;
	height: auto;
	display: flex; /* equal height of the children */
}

.top_margin {
	margin-top: 40px;
}

/* ------ */

#wrapper_top_left {
	width: 50%;
	height: 200px;
	float: left;
	/*background-color: #9a1155;*/
}

#wrapper_top_right {
	width: 50%;
	height: 200px;
	float: left;
	/*background-color: #9f5178;*/
}

/* ------ */

#header_image {
	height: 460px;
	background: url("../_images/header_image.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-position-y: 0px;
	background-size: cover;
	overflow: hidden;
}

/* ------ */

#wrapper_mid_left #left_container {
	float: right;
	width: 100%;
	max-width: 360px;
}

#wrapper_mid_left {
	flex: 1;
	padding-top: 44px;
  	padding-bottom: 80px;
  	padding-right: 100px;
  	padding-left: 100px;
	background-color: #d1c7bd;
}

#wrapper_mid_right #right_container {
	float: left;
	width: 100%;
	max-width: 400px;
}

#wrapper_mid_right {
	flex: 1;
	padding-top: 40px;
  	padding-bottom: 80px;
  	padding-right: 100px;
  	padding-left: 100px;
	background-color: #ababab;
}

.option_image {
	height: 200px;
	width: auto;
	opacity: 0.6;
}

body#rijinstructeur .option_image {
    height: auto;
    width: 100%;
    max-width: 350px;
    opacity: 1.0;
	border-radius: 20px;
}

.option_image img {
	object-fit: cover;
}

main a.button {
	display: inline-block;
	color: #343434;
	background-color: #c6a571;
	padding-top: 16px;
	padding-bottom: 16px;
	padding-left: 20px;
	padding-right: 20px;
	border: none;
	border-radius: 8px;
	font-weight: 400;
	margin-top: 40px;
}

main a.button:hover {
	cursor: pointer;
	background-color: #231f20;
	color: #f5f4f3;
}

main a#motor_button {
    margin-top: 20px;
}

.ul_wrapper {
	margin-left: 20px;
}

main .ul_wrapper ul li a {
	font-weight: 400;
}

main .ul_wrapper ul li a:hover {
	font-weight: 400;
	color: #f5f4f3;
}

/* ------ */

main .h1_wrapper {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 80px;
	padding-bottom: 80px;
	padding-left: 40px;
	padding-right: 40px;
	text-align: center;
}

main .h1_wrapper h1 {
	font-weight: 600;
	font-size: 1.875rem;
}

main .h1_wrapper p {
	margin-top: 40px;
	font-size: 1.5rem; 
}



/* ------ */

#card_left {
	flex: 1;
	padding-top: 80px;
  	padding-bottom: 80px;
  	padding-right: 100px;
  	padding-left: 100px;
	background-color: #343434;
}

#card_left #card_foto {
	width: 200px;
	height: 200px;
	float: right;
	background: url("../_images/dave.png");
	background-repeat: no-repeat;
	background-position: center;
	border-style: solid;
	border-color: #c6a571;
	border-radius: 100px;
	border-width: 6px;
}

#card_right {
	flex: 1;
	padding-top: 80px;
  	padding-bottom: 80px;
  	padding-right: 100px;
  	padding-left: 100px;
	background-color: #d1c7bd;
}

#card_right span {
	display: block;
}

#card_right #address {
	display: block;
}

#card_right #name {
	font-weight: 800;
}

#card_right #address span:nth-child(2), #card #address span:nth-child(3) {
	display: inline-block;
	float: left;
	margin-right: 8px;
}

#card_right #person {
	margin-top: 20px;
}


/* ------ */

main .h2_wrapper_image {
	width: 100%;
	background: url("../_images/map.png");
}

main .h1_wrapper h2 {
	font-weight: 600;
	font-size: 1.875rem;
}

/* ------ */

footer {
	width: 100%;
	height: auto;
	padding-top: 80px;
	padding-bottom: 80px;
	background-color: #343434;
}

.spacer {
	display: block;
	width: 100%;
	height: 6px;
	background-color: #c6a571;
}

footer #wrapper_bottom_left {
	display: inline-block;
	width: 50%;
}

footer #wrapper_bottom_left_container {
	float: right;
	margin-right: 100px;
	width: 360px;
}

footer #wrapper_bottom_left_container span {
	display: block;
	margin-bottom: 20px;
	color: #f5f4f3;
	font-weight: 700;
}

footer #bottom_left_mid_container {
	margin-top: 20px;
}

footer #bottom_left_bottom_container {
	margin-top: 20px;
}

footer #wrapper_bottom_left_container ul {
    margin-top: 20px;
    margin-bottom: 32px;
}

footer #wrapper_bottom_left_container li {
	margin-bottom: 12px;
}

footer #wrapper_bottom_left_container a {
	color: #c6a571;
	background-color: #343434;
	border: none;
	margin-bottom: 16px;
}

footer #wrapper_bottom_left_container a:hover {
	color: #f5f4f3;
}

/* - - - - - */

footer #wrapper_bottom_right {
	display: inline-block;
	width: 50%;
}

footer #wrapper_bottom_right_container {
	display: block;
	margin-left: 100px;
}

footer #wrapper_bottom_right #instagram_link {
	display: block;	
	height: 24px;
	margin-left: 24px;
	margin-bottom: 20px;
	padding: 8px 0px 4px 12px;
}

footer #wrapper_bottom_right #instagram_link img {
	display: inline-block;
	float: left;
	width: 24px;
	height: 24px;
}

footer #wrapper_bottom_right a {
	display: inline-block;
	float: left;
	padding: 0px 12px 4px 12px;
	background-color: #343434;
	border-style: none;
	color: #c6a571;
	cursor: pointer;
}

footer #wrapper_bottom_right a:hover {
	color: #f5f4f3;
}

footer #wrapper_bottom_right #instagram_picture {
	display: block;
	width: 100%;
	max-width: 300px;
}

footer #wrapper_bottom_right #instagram_picture span {
	display: block;
	width: 100%;
	max-width: 300px;
	color: #f5f4f3;
	font-size: 0.75rem;
	text-align: center;
	padding-top: 4px;
}

footer #wrapper_bottom_right #instagram_picture img {
	display: block;
	width: 100%;
	height: auto;
	border-style: solid;
	border-color: #c6a571;
	border-radius: 20px;
}


@media only screen and (max-width: 1366px) {}

@media only screen and (max-width: 1024px) {

#header_image {
	background-position-y: -50px;
	background-position: center;
	background-size: cover;
	overflow: hidden;
}

}

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

header .wrapper_full {
	width: 100%;
	height: auto;
	display: block;
  	padding-right: 20px;
  	padding-left: 20px;
}

#header_image {
	background-position-y: 0px;
	background-position: center;
	background-size: cover;
	overflow: hidden;
}

header .top_margin {
	margin-top: 0px;
}

#wrapper_top_left {
	width: 100%;
	float: none;
	padding-top: 60px;
}

#wrapper_top_left #logo  {
	float: none;
	width: 340px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
}

#wrapper_top_right {
	width: 100%;
    max-width: 320px;
    height: 80px;
    float: none;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
}

#wrapper_top_right #menu {
	float: none;
	width: 100%;
	max-width: 350px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	padding-top: 0px;
}

#menu a {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 12px;
    padding-right: 12px;
}
	
#menu ul li:nth-child(3) {
    margin-top: -14px;
}

#logo img {
	width: 100%;
}

/* - - - - - */

main #wrapper_mid_left #left_container {
	float: none;
	display: block;
	width: 100%;
	max-width: 100%;
}

main #wrapper_mid_right #right_container {
	float: none;
	display: block;
	width: 100%;
	max-width: 100%;
}

main #wrapper_mid_left {
	padding-top: 40px;
  	padding-bottom: 40px;
  	padding-right: 40px;
  	padding-left: 40px;
}

main #wrapper_mid_right {
	padding-top: 40px;
  	padding-bottom: 40px;
  	padding-right: 40px;
  	padding-left: 40px;
}

/* - - - - - */

main #card_left {
	padding-top: 40px;
  	padding-bottom: 40px;
  	padding-right: 40px;
  	padding-left: 40px;
}

#card_left #card_foto {
	float: none;
	margin-left: auto;
	margin-right: auto;
}

main #card_right {
	flex: none;
	display: block;
	padding-top: 40px;
  	padding-bottom: 40px;
  	padding-right: 40px;
  	padding-left: 40px;
}

#card_right #card_text {
	width: 260px;
	margin-left: auto;
	margin-right: auto;
	/*text-align: center;*/
}

/* - - - - */

footer {
	padding-left: 40px;
	padding-right: 40px;
}

footer #wrapper_bottom_left {
	display: block;
	float: none;
	width: 100%;
}

footer #wrapper_bottom_left #wrapper_bottom_left_container {
	display: block;
	float: none;
	width: 100%;
	margin: 0;
}

footer #wrapper_bottom_right {
	display: block;
	float: none;
	width: 100%;
}

footer #wrapper_bottom_right #wrapper_bottom_right_container {
	display: block;
	float: none;
	width: 100%;
	margin: 0;
}

}

/* smaller than iPad mini */
@media only screen and (max-width: 767px) {

main .wrapper_full {
    width: 100%;
    height: auto;
    display: block;
}

/* - - - - */

main #card_left {
	flex: none;
	display: block;
}

}

@media only screen and (max-width: 700px) {


/* - - - - */

#header_image {
	height: 300px;
	background-position-x: -410px;
}

footer .wrapper_full {
	display: block;
}

footer #wrapper_bottom_right {
	margin-top: 40px;
}

}

@media only screen and (max-width: 360px) {

* {
    font-size: 1.0rem;
}

header .wrapper_full {
    padding-bottom: 40px;
}

#wrapper_top_left #logo {
    width: auto;
}

#wrapper_top_left {
    height: 160px;
}

#menu ul li a {
    display: block;
    margin-top: 10px;
}

#menu ul li button {
	display: block;
    margin-top: -14px;
}

#menu ul li:nth-child(3) {
    display: block;
    margin-top: 6px;
}

#header_image {
    display: block;
    clear: both;
    height: 300px;
    background-position-x: -440px;
}

#card_right #card_text {
    width: 100%;
}

}