@media all and (min-width: 992px) {
	.asciiart {
		font: 8px/4px monospace;
	}	
}
@media all and (max-width: 991px) {
	.asciiart {
		font: 6px/3px monospace;
	}	
}
@media all and (max-width: 768px) {
	.asciiart {
		font: 4px/1.5px monospace;
	}	
}
@media all and (max-width: 480px) {
	.asciiart {
		font: 3px/1.5px monospace;
	}		
}

body {
	padding-top: 86px;	
}

main { 
	background-color: #D3E8D6;	
}


main .container {
	background-color: #fff;
	padding-top: 2rem;
	padding-bottom: 2rem;
}

main .container a {
    color: #2EAE9B;
    text-decoration: none;
    -webkit-transition: color .2s ease-in;
            transition: color .2s ease-in;
}
main .container a:hover { color: #444; }

#logo { max-height: 100%; height: auto; }
#logo * { display: block; height: 100%; }
#logo img { max-width: 100%;max-height: 100%; }

header #nav, header #title { padding: 1em;}

header {
	background-color: #73BC7D;
}

header .header-bg {
	background: url("../img/header_empty.png") repeat-x; 
	}  
/* Small devices (landscape phones, 576px and up) */
@media  only screen and (min-width: 576px) and (max-width: 767px) {  
	header  .bg-navbar-custom {
		background: url("../img/header_turbine.png") 260px 0px no-repeat, url("../img/header_molen.png") 325px 0px no-repeat;
	}

}
 
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media only screen and  (min-width: 768px) and (max-width: 991px) {  
	header  .bg-navbar-custom {
		background: url("../img/header_turbine.png") 260px 0px no-repeat, url("../img/header_molen.png") 360px 0px no-repeat,
			url("../img/header_molen.png") 425px 0px no-repeat, url("../img/header_turbine.png") 550px 0px no-repeat;
	}
}
 
/* Large devices (desktops, 992px and up) */
@media only screen and  (min-width: 992px) and (max-width: 1200px) { 
	header  .bg-navbar-custom {
		background: url("../img/header_turbine.png") 260px 0px no-repeat, url("../img/header_molen.png") 360px 0px no-repeat,
			url("../img/header_molen.png") 425px 0px no-repeat, url("../img/header_turbine.png") 550px 0px no-repeat, url("../img/header_turbine.png") 600px 0px no-repeat, url("../img/header_molen.png") 750px 0px no-repeat;
	}
}
 
/* Extra large devices (large desktops, 1200px and up) */
@media only screen and  (min-width: 1200px) {  
	header  .bg-navbar-custom {
		background: url("../img/header_turbine.png") 260px 0px no-repeat, url("../img/header_molen.png") 360px 0px no-repeat,
			url("../img/header_molen.png") 425px 0px no-repeat, url("../img/header_turbine.png") 550px 0px no-repeat, url("../img/header_turbine.png") 600px 0px no-repeat, url("../img/header_molen.png") 750px 0px no-repeat,
			url("../img/header_turbine.png") 1200px 0px no-repeat, url("../img/header_molen.png") 1360px 0px no-repeat;
	}    
}


.navbar-nav .nav-item {
	font-weight: bold;
}

footer {
	border-top: 2px #ccc solid
}

footer .social { padding: 0.5em 1em; }

footer .social a { margin: 0 0.5em; text-decoration: none;}

footer a:link,
footer a:visited {
	color: #555;	
}
footer a:hover,
footer a:active {
	color: #000;	
}

.navbar-toggler {
	background-color: #73BC7D;
}

.card{
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
      transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
  cursor: pointer;
  margin: 0.5rem;
}

.card:hover{
	background-color: #73BC7D;
	color: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
}

.bg-custom {
	background-color: #73BC7D;
}

.index-projecten img {
	display: block;
	max-width: 200px;
	max-height: 200px;
	width: auto;
	height: auto;
}

.index-projecten .list-group-item:hover{
	background-color: #73BC7D;
	color: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
}

.index-projecten .list-group-item:hover h5,
.index-projecten .list-group-item p {
	color: #555;	
}

.index-projecten .list-group-item:hover p {
	color: #fff;	
}