/* hero slideshow */
#hero_wrapper {
	position: relative;	
	opacity: 0;
	min-height: 545px;
	transition: opacity 2s ease-in;
}
.loaded #hero_wrapper {
	opacity: 1;
}
#hero #hero-overlay,
#hero .slide,
#hero_captions .caption {
	width: 100%;
}
#hero #hero-overlay,
#hero .slide p,
#hero_captions .caption,
#hero_captions .caption .container  {
	min-height: 545px;
}

#hero .slide {
	position: relative;	
}
#hero #hero-overlay {
	background-image: url(../_img/home/slider_overlay.png);
	background-position: center top;	
	position: absolute;
	top: 0;
	z-index: 200;
}
#hero .slide p {
	background-position: center top;	
}
#hero .slide p img {
	display: none;
}

#hero-pager {
	position: absolute;
	z-index: 202;
	right: 2.5%;
	bottom: 5%;
	color: #fff;
}
#hero-pager span {
	display: inline-block;
	width: 24px;
	height: 24px;
	background-image: url(../_img/home/hero-pager.png);
	text-indent: -4500px;
	cursor: pointer;
	
}
#hero-pager span.cycle-pager-active {
	background-position: 24px 0;	
}



#hero_captions  {
	position: absolute;
	top: 0;
	z-index: 201;
	width: 100%;
	
}
#hero_captions .caption .container {
	 display: flex;
 	 align-items: center;
  	justify-content: flex-end;
}
#hero_captions .caption h4 {
	text-align: right;
	color: #fff;
	font-family: Roboto,  sans-serif;
	font-weight: 300;	
	font-size: 3em;
	line-height: 1.25;
}
#hero_captions .caption.caption--projects h4 {
	color:#fff;
}
#hero_captions .caption.caption--procurement h4 {
	color:#fff;
}
#hero_captions .caption.caption--professional h4 {
	color:#fff;
}


/* intro */
#intro .content h1 {
	color: #78206e;	
}









/** companies widget **/
#companies_widget {
	background-image: url(../_img/home/companies-widget/wrapper_BG.png);
	background-repeat: no-repeat;
	background-position: center top;
}
/* left side: heading and buttons */
#companies_widget h2 {
	font-size: 4em;
	line-height: 1.2;
	color: #a5daf1;
	margin-bottom: 85px;
}
#companies_widget ul {
	background: none;
	list-style: none;
}
#companies_widget ul li {
	margin-bottom: 45px;	
}
#companies_widget ul li a {
	background-image: url(../_img/home/companies-widget/button_matrix-4streams.png);
	display: block;
	width: 530px;
	height: 58px;
	text-indent: -4568px;
	transition: background-position 0.2s ease-in-out;
}
#companies_widget ul li#cw-projects-button a {
	background-position: 0 0;
}
#companies_widget ul li#cw-professional-button a {
	background-position: -530px 0;
}
#companies_widget ul li#cw-procurement-button a {
	background-position: -1060px 0;
}
#companies_widget ul li#cw-precision-button a {
	background-position: -1590px 0;
}

/* hovers or actives */
#companies_widget ul li#cw-projects-button a.active {
	background-position: 0 -58px;
}
#companies_widget ul li#cw-professional-button a.active {
	background-position: -530px -58px;
}
#companies_widget ul li#cw-procurement-button a.active {
	background-position: -1060px -58px;
}
#companies_widget ul li#cw-precision-button a.active {
	background-position: -1590px -58px
}

/* logo bit */
#cw-stage {
	width: 570px;
	height: 515px;
	background-image: url(../_img/home/companies-widget/pencil_logo.png);
	background-repeat: no-repeat;
	background-position: center top;
	position: relative;
}

#cw-stage figure {
	position: absolute;
	top: 0; left: 0;
	display: none;
}
#cw-stage figure figcaption {
	text-align: center;	
	color: #083d51;
	font-size: 1.3em;
}





/** projects section */
.wrapper--projects .content {
	font-size: 1.4em;
	line-height: 1.5;
}
.wrapper--projects .content .massive {
	display: block;
	font-size: 3.333em;	
	color: rgba(120,32,110, 1);
}



/** promise section **/
#our_promise .content h2 {
	color: rgba(120,32,110, 1);	
}

#our_promise .content blockquote {
	max-width: 690px;
	padding: 10px 0px 0px 120px;
	font-size: 2em;
	line-height: 1.4;
	font-style: italic;
	color: rgba(120,32,110, 0.65);
}





/** coverage **/
#coverage {
	background-image: url(../_img/home/coverage_BG.jpg);
	background-position: center;
	background-repeat: no-repeat;
}

#coverage .col2 .content {
	padding: 60px;
}
#coverage .col2 .content p {
	max-width: 360px;
	color: #fff;	
}




@media (max-width: 1200px) {
	#hero_wrapper,
	#hero #hero-overlay,
	#hero .slide p,
	#hero_captions .caption,
	#hero_captions .caption .container {
		min-height: 340px;
	}
	#hero .slide p {
		background-size: cover	
	}
	
	#companies_widget {

		background-position: calc(50% - 320px) top;
	}
	
	/* changes to widget: hide right side completely */
	#companies_widget .col2 {
		display: none;
	}
	#companies_widget h2 {
		text-align: center;	
	}
	/* use the list to show the logos */
	#companies_widget ul {
		display: flex;
	}
	#companies_widget ul li {
		flex: 1;
		margin: 0 20px;
	}
	#companies_widget ul li a {
		height: 0;
		padding-top: 70.877%;
		background-repeat: no-repeat;
		display: block;
		width: auto;
		background-size: 100% auto;
		background-position: center top;
		transition: padding-top 0.2s ease-in-out;
	}
	#companies_widget ul li#cw-projects-button a {
		background-image: url(../_img/home/companies-widget/projects_logo_w_text_and_button.png);
		background-position: center top;
	}
	#companies_widget ul li#cw-procurement-button a {
		background-image: url(../_img/home/companies-widget/procurement_logo_w_text_and_button.png);
		background-position: center top;
	}
	#companies_widget ul li#cw-professional-button a {
		background-image: url(../_img/home/companies-widget/professional_logo_w_text_and_button.png);
		background-position: center top;
	}
	
	#companies_widget ul li#cw-precision-button a {
		background-image: url(../_img/home/companies-widget/precision_logo_w_text_and_button.png);
		background-position: center top;
	}
	
	/* hovers or actives */
	#companies_widget ul li#cw-projects-button a.active {
		background-position: center top;
		padding-top: 104%;
	}
	#companies_widget ul li#cw-procurement-button a.active {
		background-position: center top;
		padding-top: 104%;
	}
	#companies_widget ul li#cw-professional-button a.active {
		background-position: center top;
		padding-top: 104%;
	}
	#companies_widget ul li#cw-precision-button a.active {
		background-position: center top;
		padding-top: 104%;
	}

	
	
	

}


@media (max-width: 940px) {
	#hero #hero-overlay {
		background-image: url(../_img/home/slider_overlay_mobile.png);
		background-position: left top;	
	}
	.wrapper--projects .content .massive {
		font-size: 2.5em;
		line-height: 1.1;	
	}
	#intro .content h1 strong {
		display: block;	
	}
	#our_promise .content blockquote {
		max-width: none;
		padding: 10px;
		font-size: 2em;
		line-height: 1.4;
	}
	#companies_widget {
		background: #fff;
	}
	#companies_widget ul {
		display: block;
	}
	#companies_widget ul li {
		flex: none;
		display: block;
		margin: 0 auto 40px auto;
		max-width: 350px;
	}
	#companies_widget ul li a {
		height: 0;
		padding-top: 70.877%;
		background-repeat: no-repeat;
		display: block;
		width: auto;
		background-size: 100% auto;
		background-position: center top;
		transition: padding-top 0.2s ease-in-out;
	}
	#coverage {
		background-image: url(../_img/home/coverage_BG_mobile.jpg);
	}
	
}

@media (max-width: 740px) {
	#hero_wrapper,
	#hero #hero-overlay,
	#hero .slide p,
	#hero_captions .caption,
	#hero_captions .caption .container {
		min-height: 250px;
	}
	
	
	#hero_captions .caption h4 {
		font-size: 2em;
		line-height: 1.25;
	}
	#companies_widget h2 {
		font-size: 3em;
	}
	.wrapper--projects .content .massive {
		font-size: 2em;
		line-height: 1.1;	
	}
	
	


}

@media (max-width: 540px) {
	#hero_wrapper,
	#hero #hero-overlay,
	#hero .slide p,
	#hero_captions .caption,
	#hero_captions .caption .container {
		min-height: 250px;
	}
	
	#hero #hero-s4 p{
		background-position: -100px 0;	
	}
	#hero_captions .caption h4 {
		text-align: center;	
	}
	#hero_captions .caption h4 i.br {
		display: none;
	}
	
	#hero_captions .caption h4 span {
		background: rgba(8,61,81,0.8);
	}
	#companies_widget {
		background-position: center top;
	}
	
	#companies_widget h2 {
		font-size: 2.5em;
		margin-bottom: 30px;
	}
	.wrapper--projects .content .massive {
		font-size: 1.4em;
		line-height: 1.1;	
	}
	
	#companies_widget ul li {
		max-width: 250px;
	}
	
	
	#coverage .col2 .content {
		padding: 20px;
	}

	#our_promise .content blockquote {

		padding: 10px 0px 0px 20px;
		font-size: 1.4em;
		line-height: 1.4;

	}
}