/**
*	Bootstrap
*
*	tweaked and edited by Matthijs Oosterhof
*
*	Modified: 28-02-2018 | matthijs
*/
body {
    position: relative;
	margin-top: 130px;
	background-color: #006595;
}

@font-face {
	font-family: Maven Pro;
	src: url('../fonts/mavenpro-regular-webfont.woff2') format("woff2"),
	url('../fonts/mavenpro-regular-webfont.woff') format("woff"),
	url('../fonts/mavenpro-regular-webfont.ttf') format("truetype");
}

body, div, span, a, select, textarea, input, button, td {
	font-family: Maven Pro, Verdana, Arial, Helvetica;
}

DIV.container-body HR {
	border: 0px;
	border-bottom: 1px solid grey;
	margin: 20px 0 20px 0;
	width: auto;
}

/* see also data-offset="132" in body tag - needed for the scroll and selecting the menu */
.navbar-fixed-top {
	min-height: 130px; /* width min-height the mobile menu wil push the header down - that is nice */
	border: 0px;
}

DIV.container-content {
	padding: 5px 0px 20px 0;
	margin: 0px;
	position: inherit;
	border: 0px solid green;
}

.col-md-6.center {
	text-align: center;
}

.container-body, .container-footer, .container {
	width: 900px;
	margin: 0 auto;
}

.container-body {
	font-size: 17px;
}

.container-footer {
	padding: 10px 0px 10px 0;
}

#footer.container-content .container-footer .footer-socialmedia {
	text-align: right;
	margin-top: 13px; /* to get it lined with the links at the left */
}

DIV.footer-socialmedia DIV {
	margin-bottom: 10px;
}

DIV.footer-socialmedia IMG{
	width: 32px;
	height: 32px;
}

.navbar-inverse {
	background-color: #008ED2;
}

.navbar-header-brand {
	/* border: 1px solid red; */
}

.header.top {
	font-size: 30px;
	font-weight: bold;
	color: white;
}

/* mobile menu */
.navbar-inverse .navbar-toggle:hover .icon-bar {
    background-color: #FFFFFF;
}

.navbar-inverse .navbar-toggle:hover {
    background-color: #00a3d9;
}

.navbar-inverse .navbar-nav > li > a {
	color: #FFFFFF;
}

.navbar-inverse .navbar-nav > li > a:hover {
	background-color: #1ab5ff;
}

.navbar-inverse .navbar-nav > li.active > a {
	color: white !important;
	background-color: #0077b0 !important;
	background-image: none !important;
}
/* /mobile menu */

div.header {
	color: red;
	font-size: 22px !important;
	margin: 14px 0 0 0;
}

.header.sub {
	font-size: 17px !important;
	font-style: italic;
	color: white;
	text-align: right;
}

.container-body .header {
	font-size: 18px;
	color: red;
}

.hidden {
	display: none;
}

.submit-div .text-muted {
	color: white;
	font-style: italic;
}

.help-block.with-errors {
	margin: 0 15px 0 160px;
	font-size: 14px;
	background-color: white;
	border-radius: 5px;
	padding: 0 0 0 10px;
}

DIV.text.small {
	font-size: 13px;
}

.messages > .danger button.close {
	color: white;
	font-size: 30px;
	opacity: 90;
}

DIV.danger {
	border: 1px solid red;
	border-radius: 3px;
	background-color: red;
	color: white;
}

#submit-loader {
	display: none;
}

/* BOOKS */
DIV#work .header {
	color: black;
	font-size: 30px;
	font-weight: bold;
}

DIV#work .info {
	margin: 20px 0 20px 0;
}

DIV#work .content.book {
	font-style: italic;
}

DIV#work .header.book {
	font-size: 23px;
	margin-top: 0px;
}

#welcome .order-button BUTTON {
	font-size: 30px;
	color: #ffffff;
	border: 1px solid #009ce8;
	border-radius: 3px;
	background-color: #009ce8;
}

#welcome .order-button BUTTON:hover {
	background-color: #3cbfff;
	border: 1px solid #3cbfff;
}

#welcome .order-button {
	text-align: center;
	margin: 20px 0 20px 0;
}

SPAN.book {
	color: red;
}

DIV.product {
	font-size: 15px;
	font-style: normal;
	font-weight: bold;
	padding: 10px 10px 10px 10px;
	border: 1px solid inherit;
	border-radius: 10px;
}

DIV.product:hover {
	background-color: #ffd93e;
}

DIV.price-quantity {
	text-align: right;
	font-size: 18px;
}

DIV#work .content.right {
	text-align: right;
	margin-bottom: 60px;
	font-size: 20px;
	font-weight: bold;
}

DIV#work .header.red {
	color: red;
}

DIV#work .header.green {
	color: green;
}

DIV#work .bookImage.right {
	text-align: right;
}

DIV#work .header.blue {
	color: navy;
}

.center {
	border: 0px solid red;
	text-align: center;
}

.col-md-12.right {
	border: 0px solid red;
	text-align: right;
}

.shipping-info {
	font-size: 20px;
	text-align: center;
	margin: 25px 0 25px 0;
}

.bookImage {
	height: 250px;
	margin-bottom: 10px;
}

DIV#work .header.book.first {
	margin-top: 0px;
	padding-top: 0px;
}

.col-md-6 {
	border: 0px solid red;
}
/* /BOOKS */

.submit-div {
	margin-top: 10px;
	margin-left: 160px;
}

.submit-div.center {
	text-align: center;
}

.submit-div.center {
	margin: 20px 0 0 0;
}

DIV.form-group input,  DIV.form-group textarea, DIV.form-group select {
	margin: 0 0 10px 0;
}

textarea.form-control {
	height: 150px;
}

IMG.swallow, IMG.blackbird, IMG.hedgehog {
	height: 80px;
}

DIV.spacer {
	height: 20px;
}

#welcome {
	background-color: #FFFFFF;
}

#home {
	color: #fff;
	background-color: #5ecbff;
	text-align: center;
	padding: 0px;
	margin: 0px;
}

#home .container-body {
	background-color: #8cdaff;
	background-image: url('../images/bg_eyecatcher.jpg');
    background-size: 100% 100%;
	background-repeat: no-repeat;
	padding: 10px 0 10px 0;
	color: black;
}

#presentation {
	color: #fff;
	background-color: #FFFFFF;
	color: #000000;
}

#about {
	color: #000;
	background-color: #4cd2ff;
}

DIV#about img {
	width: 300px;
	height: auto;
}

#work {
	color: #000;
	background-color: #ffce00;
}

#reviews {
	color: #000;
	background-color: #FFFFFF;
}

#contact {
	color: #fff;
	background-color: #44a12b;
}

#contact.container-content > .container-body a{
	color: white;
}

#footer {
	background-color: #006595;
	color: #9bdeff;
	font-size: 15px;
}

#footer > .container-footer UL {
	margin: 10px 0 0 0;
	padding: 0 0 0 18px;
	color: #00a9fb;
	list-style-type: circle;
}

#footer > .container-footer UL a {
	color: #00a9fb;
}

@media print {
	
	body {
		padding: 0;
		margin: 0;
	}
	
	.dont-print {
		display: none;
	}
}

/* VIEWPORT: normal */
@media(min-width:768px) {
		
	#reviews > .container-body > DIV img {
		width: 33% !important;
	}
		
	.img-left {
		float: left;
	}

	.img-right {
		float: right;
	}
	
	img.left {
		margin: 5px 10px 5px 0;
	}

	img.right {
		margin: 5px 0 5px 5px;
	}
	
}
/* VIEWPORT: normal */

/* VIEWPORT: phone/tablet */
@media(max-width:768px) {

	body, html {
		padding: 0px;
		margin: 0px;
	}

	/* height of the top fixed menu */
	#home {
		margin-top: 128px;
	}

	#page-default-top-margin {
		margin-top: 100px;
	}

	.navbar-header-brand .header.top {
		font-size: 29px;
	}

	.container-body, .container-footer, .container {
		width: 100%;
		margin: 0 auto;
	}

	DIV.container-content {
		padding: 12px;
		margin: 0px;
		width: inherit;
		overflow: hidden; /* prevent horizontal scrollbar */
	}

	DIV.container-footer {
		text-align: center;
		padding: 5px;
	}

	/* MOBILE MENU */
	#bs-example-navbar-collapse-1 {
		margin-top: 25px;
		width: 100%;
		border: 0px;
		text-align: center;
	}

	.navbar-inverse .navbar-nav > li {
		margin: 2px 10px 0 10px;
	}

	.navbar-inverse .navbar-nav > li > a {
		color: #ffffff;
		border-radius: 3px;
		background-color: #009ce8;
	}

	.navbar-inverse .navbar-nav > li > a:hover {
	  background-color:#4cd2ff !important;
	  color: black;
	}

	.navbar-inverse .navbar-nav > li.active > a {
	  color: black !important;
	  background-color: #FFFFFF !important;
	  background-image: none !important;
	}

	.navbar-inverse .navbar-header {
		position: relative;
	}

	/* Remove top border */
	.navbar-inverse div.navbar-collapse {
		border-top: none;
		box-shadow: none;
	}

	.navbar-toggle {
		background-color: black;
		border: 0px;
	}

	.navbar-toggle:hover {
		background-color: blue;
	}
	/* /MOBILE MENU */

	.help-block.with-errors {
		margin: 0 15px 0 15px;
	}
	.submit-div {
		margin: 0px;
		text-align: center;
	}

	DIV#work .bookImage {
		width: 100%;
		height: auto;
	}

	DIV#about img {
		width: 100%;
		height: auto;
	}

	.header.sub {
		text-align: left;
	}

	DIV.text.small {
		font-size: 14px;
	}

	#footer > .container-footer UL {
		color: #00a9fb;
		list-style-type: none;
	}

	#footer > .container-footer UL LI {
		margin-left: -18px;
	}

	#footer.container-content .container-footer .footer-socialmedia {
		text-align: center;
		margin-top: 13px; /* to get it lined with the links at the left */
		border: 0px solid orange; /* Development */
	}

	.shipping-info {
		text-align: center;
	}
	
	img.left, img.right {
		width: 100%;
	}
	
	#reviews > .container-body > DIV img {
		width: 100% !important;
	}
}