html {
	width: 72%;
	margin: 0 auto;
	font-family: monospace;
}

#pre_page_loader {
	text-align: center;
	height: 30%;
}
#pre_page_loader h1 {
	margin-top: 25%;
}

.li_underline {
	text-decoration: underline;
}

#top_nav_menu {
	float: right;
	display: block;
	margin-right: 5%;
}

#top_title_bar {
	background-color: black;
	height: 5rem;
	display: block;
}

nav ul {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	text-decoration: none;
	margin-top: 1rem;
	display: inline-flex;
	overflow: hidden;
	
 }
 
 nav ul:hover {
	 overflow-x: auto;
 }
 
 nav li {
	 display: inline-block;
	 margin-right: 1rem;
	 text-decoration: none;
	 margin-top: 4px;
	 margin-right: 3rem;
 }
 nav a {
	 border: 1px;
	 color: white;
	 font-size: 20px;
	 text-decoration: none;
	 position: relative;
 }
 
 nav a:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: white;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;

 }
  nav a:hover:after {
	  transform: scaleX(1);
	  transform-origin: bottom left;
  }
 
 #logo {
	 float: left;
	 margin-left: 5%;
	 margin-top: 7px;
 }
 #logo p {
	 color: white;
	 margin: 0px;
	 text-align: center;
	 font-family: monospace;
	 
 }
 
 #big_picture {
	 position: relative;
 }
 #big_picture img {
	 width: 100%;
	 filter: brightness(150%);
 }
 
 #big_picture_transparent_overlay {
	 position: absolute;
	 top: 65%;
	 left: 0%;
	 z-index: 100;
	 background-color: black;
	 opacity: 0.75;
	 width: 40%;
	 height: 96px;
 }
 
 #big_picture_transparent_overlay_text {
	 position: relative;
	 float: right;
	 margin-right: 10px;
 }
 
 #big_picture_transparent_overlay p{
	color: white;
	font-weight: bold;
 }
 
 #bottom_double_column {
	 width: 100%;
	 margin: 0 auto;
	 margin-top: 20px;
	 height: 110%;
 }
 
 #bottom_double_column_left {
	 position: relative;
	 float: left;
	 width: 49%;
	 margin-right: 1%;
 }
 
#bottom_double_column_left img{
	width: 100%;
	margin-top: 1%;
}

.bottom_double_column_right {
	 position: relative;
	 float: right;
	 width: 49%;
	 margin-left: 1%; 
	 display: none;
 }
 
.bottom_double_column_right:hover {
	cursor: pointer;
}
 
 .bottom_double_column_right img{
	width: 47%;
	margin: 1%;
	float: right;
 }
  .bottom_double_column_right img:hover{
	width: 47%;
	margin: 1%;
	outline: 2px solid black;
 }
 
 #info_card_title {
	 width: 100%;
	 background-color: gray;
	 display: table;
 }
 
 #info_card {
	 height: 40rem;
 }
  #info_card_title p {
	position: relative;
	color: white;
	margin: 15px;
 }
 
 #info_card_content {
	background-color: lightgray;
	padding: 20px;	
 }
	
 
 #info_card_title_adres {
	 float: left;
 }
 
 #info_card_title_cost{
	 float: right;
 }
 
 .picture_selected {
	 outline: 2px solid black;
 }
 
#second {
	display: none;
}

#project_section {
	display: none;
}

#details_section {
	display: none;
	text-align: justify;
}

#who_are_we_section {
	display: none;
	text-align: justify;
	width: 95%;
}

#contact_section {
	display: none;
}

#left_swipe {
	position: absolute;
	top: 50%;
	z-index: 100;
	left: 1%;
	display: none;
}
#right_swipe {
	position: absolute;
	top: 50%;
	right: 1%;
	z-index: 100;
	display: none;
}

#picture_menu_slider {
	float: right;
	width: 49%;
	display: block;
}
#picture_menu_slider p:hover{
	text-decoration: underline;
	cursor: pointer;
}

#picture_menu_slider_previous {
	position: relative;
	float: left;
	display: none;
}

#picture_menu_slider_next {
	position: relative;
	float: right;
}

#details_location {
	width: 40%;
	float: left;
	padding-top: 6%;
}

#main_detail_pictures {
	width: 100%;
	float: left;
	display: block;
	margin-bottom: 20px;
}

#details_implantation {
	width: 51%;
	float: right;
	margin-top: 6%;
}

#details_home_layout {
	width: 40%;
	float: left;
	margin-top: 6%;
}

#details_services {
	width: 40%;
	float: right;
	margin-top: 6%;
}

#details_forseen {
	width: 40%;
	float: left;
	margin-top: 6%;	
}

#details_energy_efficency {
	width: 40%;
	float: right;
}

#detail_location_pictures {
	width: 48%;
	float: right;
}

#detail_loc_pictures {
	width: 48%;
	float: left;
}

.details_block {
	display: inline-block;
	width: 100%;
	margin-bottom: 6%;
	position: relative;
	float: left;
}

#detail_layout_pictures_but {
	float: right;
	width: 20%;
}

#detail_layout_pictures_top {
	float: right;
	width: 25%;
}

#solor_panel_img {
	width: 48%;
	float: left;
}

#looking_forward_picture {
	width: 48%;
	float: right;
}
#details_money {
	float: left;
	width: 51%;
}
#details_money_extra {
	float: right;
	width: 33%;
}
	

#who_are_we_section_left{
	width: 31%;
	float: left;
	padding: 1%;
}
#who_are_we_section_left2{
	width: 31%;
	float: left;
	padding: 1%;
}

#who_are_we_section_top_image_left {
	width: 40%;
	float: right;
	margin-left: 5px;	
}

#who_are_we_section_top_image_right {
	width: 40%;
	float: left;
	margin-right: 5px;
	
}
#who_are_we_image_block {
	display: inline-block;
	width: 100%;
}
#who_are_we_section_right {
	width: 32%;
	float: left;
	padding: 1%;	
}

h3 {
	background-color: green;
	padding: 20px;
	color: white;
	border-radius: 20px;
	text-align: center;
}

#contact_section {
	width: 100%;
	position: relative;
	display: flex;
	margin-top: 20%;
}

#left_contact_section {
	float: left;
	width: 50%;
}
	
#right_contact_section {
	float: right;
	width: 50%;
}

#p_title {
	font-size: 32px;
	font-weight: 200;
	font-style: oblique;
}

.contact_info {
	margin-top: 30px;
}

#office {
	max-width: 100%;
	max-height: 100%;
}

.details_block li {
	list-style-type: disclosure-open;
}

#euro_sign {
	width: 25%;
	float: right;
}

#pdf_img {
	float: right;
	width: 25%;
}

#details_menue {
	height: 10rem;
	float: left;
	width: 100%;
}

#details_menue li {
	font-weight: bold;
	padding-bottom: 35px;
}

#details_menue li:hover {
	padding-bottom: 35px;
	border-bottom: 3px solid green;
	cursor: pointer;
}

.details_menue_class {
	padding-bottom: 35px;
	border-bottom: 3px solid green;	
}

#ligging_section {
	display: none;
}

#inplanting_section {
	display: none;
}

#indeling_section {
	display: none;
}

#voorziening_section {
	display: none;
}

#vooruitgekeken_section {
	display: none;
}

#energy_section {
	display: none;
}

#money_section {
	display: none;
}

#money_extra_section {
	display: none;
}

#files_section {
	display: none;
}

#bestanden li:hover{
	text-decoration: underline;
	cursor: pointer;
}

#bestanden {
	float: left;
}

#text_who_are_we {
	display: inline-block;
}

#maatkasten_logo {
	width: 49%;
	float: left;
}
#renovation_company_logo {
	width: 49%;
	float: right;
}

#money_extra_img {
	width: 25%;
	float: left;
}

#previous_project_section {
	display: none;
}

#open_day {
	text-align: center;
	background-color: chartreuse;
	height: 2.5rem;
	margin-bottom: 8px;
}

.previous_pictures {
	position: relative;
	float: left;
	width: 100%;
}

.selectable_previous_picture {
	float: left;
	width: 48%;
	padding: 5px;
}

.banner {
  position: absolute;
  top: 80;
  right: -38;
  background-color: yellow;
  transform: rotate(45deg);
  padding: 5px 40px;
  z-index: 1;
  border-radius: 25px;
}

.banner-text {
  color: black;
  font-weight: bold;
  font-size: 25px;
}

@media screen and (max-width: 1500px) {
	#top_title_bar {
		background-color: black;
		height: 9rem;
		display: block;
	}

}

@media screen and (max-width: 60rem) {
	html {
		width: 98%;
		margin: 0 auto;
		font-family: DIN Round,sans-serif
	}
	#first {
		display: none;
	}
	#bottom_double_column {
		overflow: unset;
		width: 100%;
	}
	#bottom_double_column_left {
		display: block;
		width: 100%;
	}
	#bottom_double_column_left img{
		display: none;
	}
	#changeable_main_picture {
		display: none;
	}
	#info_card {
		 margin-left: 0;
		 height: auto;
	}
	#big_picture_transparent_overlay {
		 display: none;
	}
	#big_picture {
		margin-top: 20px;
	}
	#left_swipe {
		display: block;
	}
	#right_swipe {
		display: block;
	}
	.bottom_double_column_right{
		display: none !important;
	}
	#picture_menu_slider {
		display: none;
	}
	#top_title_bar {
		background-color: black;
		height: 7rem;
		display: block;
	}
	#logo {
		float: unset;
		margin-left: 0%;
	}
	#top_nav_menu {
		float: unset;
	}
	h2 {
		text-align: center;
		background-color: black;
		padding: 20px;
		color: white;
		border-radius: 20px;
		text-align: center;
	}
	
	#who_are_we_section_left{
		width: 100%;
		float: unset;
	}
	
	#who_are_we_section_left2{
		width: 100%;
		float: unset;
	}

	#who_are_we_section_top_image_left {
		width: 40%;
		float: unset;		
	}

	#who_are_we_section_top_image_right {
		width: 40%;
		float: unset;
	}
	
	#who_are_we_image_block {
		display: inline-block;
		width: 100%;
	}
	
	#who_are_we_section_right {
		width: 100%;
		float: unset;	
	}
	#contact_section {
		display: block;
	}
	#left_contact_section {
		float: none;
		width: 100%;
	}
	#right_contact_section {
		float: none;
		width: 100%;
	}
	#details_menue {
		display: none;
    }
	#ligging_section {
		display:  block;
	}

	#inplanting_section {
		display:  block;
	}

	#indeling_section {
		display:  block;
	}

	#voorziening_section {
		display:  block;
	}

	#vooruitgekeken_section {
		display:  block;
	}

	#energy_section {
		display:  block;
	}

	#money_section {
		display:  block;
	}

	#money_extra_section {
		display:  block;
	}

	#files_section {
		display:  block;
	}
	nav ul:hover {
		overflow-x: auto;
	}
	
	#details_money {
		float: left;
		width: 95%;
	}
	#euro_sign {
		width: 20%;
		float: left;
	}
	
	#details_money_extra {
		float: left;
		width: 95%;
	}
	
	#money_extra_img {
		width: 95%;
		float: left;
	}
}
@media screen and (max-width: 50rem) {
	nav li {
		display: block;
		margin-right: 1rem;
		text-decoration: none;
		margin-top: 4px;
		margin-right: 3rem;
	}
	 #top_title_bar {
		background-color: black;
		height: 12rem;
		display: block;
	}
	#details_location {
		width: 95%;
		float: unset;
	}
	#detail_location_pictures {
		width: 95%;
		float: unset;
	}
	#details_implantation {
		width: 95%;
		float: unset;
	}
	#detail_loc_pictures {
		width: 95%;
		float: unset;
	}
	#details_home_layout {
		width: 95%;
		float: unset;
	}
	#detail_layout_pictures_but {
		width: 47%;
		float: unset;
	}
	#detail_layout_pictures_top {
		width: 47%;
		float: unset;
	}
	#solor_panel_img {
		float: unset;
		width: 95%;
	}
	#details_services {
		float: unset;
		width: 95%;
	}
	#details_forseen {
		float: unset;
		width: 95%;
	}
	#looking_forward_picture {
		float: unset;
		width: 95%;
	}
	#details_energy_efficency {
		float: unset;
		width: 95%;
	}
	#ben_house {
		float: unset;
		width: 95%;
	}
	.details_block {
		display: inline-block;
		width: 100%;
		border-bottom: none;
	}
	nav ul {
		display: block;
	}
	.selectable_previous_picture {
		float: left;
		width: 99%;
		padding: 5px;
	}
}

/* Everyting for the spinner*/

.lds-roller {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: black;
  margin: -4px 0 0 -4px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 63px;
  left: 63px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 68px;
  left: 56px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 71px;
  left: 48px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 72px;
  left: 40px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 71px;
  left: 32px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 68px;
  left: 24px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 63px;
  left: 17px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 56px;
  left: 12px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Everything for next and previous button*/

.round {
  text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
}

.round:hover {
  background-color: green;
  color: black;
}

.previous {
  background-color: #ddd;
  color: white;
}

.next {
  background-color: #ddd;
  color: white;
}

.round {
  border-radius: 50%;
}