/* !BANNER LAYOUT */

/* !SWISS TECH ILLUSTRATION */
.container-banner {
	background-color: #3e3e3e;
	background-image: url('../img/illustration-main-tall.jpg');
	background-repeat: no-repeat;
	min-height: 380px;	
}

.banner-content {
	background-color: rgba(0,0,0,0.7);
}


/* banner background on extra-large desktops */
@media (min-width: 1200px) {
	.container-banner {
		background-size: cover;				/* picture will fill the viewport width */
		background-position: 30% 0%;		/* and shift to maintain poinf of interest in sight */
		padding-top: 30px;					/* the content only starts below 60px */
	}
}

/* banner background on normal desktops */
@media (min-width: 992px) and (max-width: 1199px) {
	.container-banner {
		background-position: 30% 0;	/* picture won't scale, but is placed to show point of interest */
		padding-top: 30px;					/* the content only starts below 60px */
	}
}

/* banner layout below the desktop screen size */
@media (max-width: 991px) {
	.container-banner {
		padding-top: 300px;					/* wrap content is placed underneath, 300px of pictures cleared for viewing */
		background-size: cover;
		background-position: 15% 0;		/* the picture is slightly shifted upward, and shifts to maintain point of interest in sight */
	}
	
	.banner-wrap {
		background-color: rgba(130,191,66,0.8);	/* a gray transparent background is set on the banner wrap, in case picuture extend downward */
		background-color: rgba(0,0,0,0.7); /* overwrite for current illustration */
	}

	.banner-content {
		background-color: transparent;
	}
}



/* !LUMINESCENT FURNITURE ILLUSTRATION */
/* design of the banner, its background and text color */
/*
.container-banner {
	background-color: #3e3e3e;
	background-image: url('../img/photo-furniture.jpg');
	background-repeat: no-repeat;
	min-height: 380px;	
}
*/


/* banner background on extra-large desktops */
/* picture will fill the viewport width */
/* and shift to maintain poinf of interest in sight */
/* the content only starts below 60px */
/*
@media (min-width: 1200px) {
	.container-banner {
		background-size: cover;
		background-position: 30% 80%;
		padding-top: 60px;
	}
}
*/

/* banner background on normal desktops */
/* picture won't scale, but is placed to show point of interest */
/* the content only starts below 60px */
/*
@media (min-width: 992px) and (max-width: 1199px) {
	.container-banner {
		background-position: 30% center;
		padding-top: 60px;
	}
}
*/

/* banner background on small desktops or tablets */
/* content is placed underneath, 300px of pictures cleared for viewing */
/* the picture is slightly shifted upward, and shifts to maintain point of interest in sight */
/* a gray transparent background is set on the banner wrap, in case picuture extend downward */
/*
@media (max-width: 991px) {
	.container-banner {
		padding-top: 300px;
		background-position: 20% -80px;
	}
	
	.banner-wrap {
		background-color: rgba(64,64,64,0.5);
	}
}
*/


/* headline for the banner */
.container-banner h1 {
	font-size: 28px;
	color: inherit;
}

/* banner text on extra-large desktops */
@media (min-width: 1200px) {
	.container-banner p { font-size: 19px; }
}

/* banner text on normal desktops */
@media (min-width: 992px) and (max-width: 1199px) {
	.container-banner p { font-size: 17px; }
}

/* banner background on small desktops or tablets */
@media (min-width: 768px) and (max-width: 991px) {
	.container-banner p { font-size: 19px; }
}

/* the banner content is wrapped in a div to manipulate it more easily */
.banner-wrap {
	/* margin-bottom: 25px; */
	padding-bottom: 15px;
}


/* !BUSINESSES LAYOUT */

/* column layout */
.container-business {
	margin-top: 30px;
	margin-bottom: 30px;
}

/* business style box */
.business-box {
	border: 1px solid #D2D2D2;	
	border-radius: 0 0 4px 4px;
	background-color: #f2f2f2;
	box-shadow: 0px 1px 0px rgba(150,150,150,0.23)
}

/* column minimum height on extra large desktops */
@media (min-width: 1200px) {
	.business-box { min-height: 465px; }
}

/* column minimum height on normal desktops */
@media (min-width: 992px) and (max-width: 1199px) {
	.business-box { min-height: 440px; }
}

/* 	removing gutters and box ornaments when screen is narrow */
@media (max-width: 767px) {
	.container-business {
		padding-left: 0;
		padding-right: 0;
	}

	.business-box {
		border-left: 0;
		border-right: 0;
		border-radius: 0;
	}
}

/* styling business title and preparing to host a background */
.business-box h2 {
	color: white;						/* white headline on darker background */
	background-color: #696969;			/* dark gray color as default background */
	background-position: center center;	/* background image will be centered */
	/* background-size: 1000% auto; */
	background-size: cover;				/* the background always fits area width, is responsive */
	box-sizing: border-box;				/* making sure not to inherit somethinfg different */
	height: 240px;						/* height corresponds to 36 over 24 image ratio */
	margin: 0 0 10px 0;					/* a bit of maring below */
	padding: 25px 0 0 25px;				/* shifting away text from edges */
}

/* keeping the same widht over height ratio on normal desktops */
@media (min-width: 992px) and (max-width: 1199px) {
	.business-box h2 { height: 193px; }
}

/* the different backgrounds */
.business-box h2.materials { background-image: url('../img/illustration-materials.jpg'); }
.business-box h2.solarcells { background-image: url('../img/illustration-solarcells.jpg'); }
.business-box h2.equipment { background-image: url('../img/illustration-equipment.jpg'); }

.business-box p {
	margin-left: 25px;
	margin-right: 25px;
}

.business-button {
	margin-bottom: 25px;
}

/* Button to bottom in column views */
@media (min-width: 992px) {
	.business-button {
		position: absolute;
		bottom: 0;
	}
	.business-box p:nth-last-child(2) {
		margin-bottom: 65px;
	}
}

/* LATEST NEWS LAYOUT */

/* giving some room above the NEWS button */
.container-news .center-text {
	padding-top: 15px;
}

/* !CUSTOMERS LAYOUT */

.container-customers {
	color: #696969;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: #f2f2f2;
	/* background shadows top and bottom */
	background-image: url('../img/shadow-top.png'), url('../img/shadow-bottom.png');	
	background-repeat: no-repeat, no-repeat;
	background-position: center top, center bottom;
}

/* making this header discrete */
.container-customers h3 {
	color: #696969;
	font-weight: normal;
}

/* carousel */
/* making room for buttons on both ends */
.carousel-container {
	padding-left: 35px;
	padding-right: 35px;
}

/* expect on very, very narrow screens */
@media (max-width: 390px) {
	.carousel-container { 
		padding: 0;
	}
}

/* making some room under the first image for the next beneath */
.carousel img:first-child {
	margin-bottom: 15px;
}


/* !NEWSLETTER LAYOUT */
.container-newsletter {
	width: 390px;
	min-height: 200px;
	margin: 30px auto;
/* 	background-color: red; */
}

@media (max-width: 420px) {
	.container-newsletter {
		width: auto;
		margin: 30px 15px;
	}
}