/* Banner styles */

/* Containers */
.sc__v2__banner {
  height: 345px;
  overflow: hidden;
  position: relative;
}

.sc__v2__banner__darkbg {
  background: #222;
}

.sc__v2__banner img {
  position: absolute;
  width: 100%;
  height: 100%;
}



/* Image backgrounds */ 
#sc__v2__feature-unlimitedplan {
  background-image: url(../images/sc-docs-banner-1.jpg);
  background-repeat:  no-repeat;
  background-position:  center;
  height: 342px;

}

#sc__v2__feature-valuepacks {
  background-image: url(../images/sc-docs-banner-2.jpg);
  background-repeat:  no-repeat;
  background-position:  center;
  height: 342px;

}

#sc__v2__feature-concretepack {
  background-image: url(../images/concrete-banner.jpg);
  background-repeat:  no-repeat;
  background-position:  center;
  height: 342px;

}

#sc__v2__feature-digitalswms {
  background-image: url(../images/swms-on-your-mobile.jpg);
  background-repeat:  no-repeat;
  background-position:  center;
  height: 342px;

}

/*************** BANNER STYLES ****************/

/* Style 1
	- overlay on left side with dark box
	- used by WHSE banner graphic
*/

.sc__v2__feature .overlay.style1 {
  position: absolute;
  bottom: 70px;
  left: 0px;
}

.sc__v2__banner .overlay.style1 .overlay-content {
  background: rgba(40,40,40,0.90);
  width: 450px;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  padding: 20px 25px;
  color: #fff;
  font-family: 'Source Sans Pro', sans-serif;
  letter-spacing: 0.5px;
  box-sizing: border-box;
  font-size: 10pt;
  line-height: 1.7;
  font-weight: 300;
}

.sc__v2__banner .overlay.style1 h3 {
  font-weight: 600;
  font-size: 17.6pt;
  margin-bottom: 14px;
  line-height: 1.2;
  margin-top:0;
  font-weight: 400;
  color: #fff;
}

.sc__v2__banner .overlay-content a {
  color: #fff;
}

.sc__v2__banner .overlay.style1 .sc__v2__btn {
  padding: 7px 30px;
  font-size: 10.5pt;
  font-weight: 600;
}

.sc__v2__banner .overlay.style1 ul {
  margin-top: 0;
}


/*
	Contact Banner
	- Custom banner
	- Image left, text on the right
	- Has different version for mobile

*/

.sc__v2__banner .overlay.textright {
	position: absolute;
    bottom: 30px;
    right: 20px;
    max-width: 53%;

}

.sc__v2__banner h3.grey {

    line-height: 1.5;
    font-size: 24pt;
    font-weight: 400;
    margin-bottom: 20px;

}

.sc__v2__banner.contactBanner .cta {
    margin-top: 40px;
    color: #289FD7;
    font-size: 16pt;
    font-weight: 300;
    text-align: right;
}

.sc__v2__banner.contactBanner .cta a {
	color: #289FD7;
	font-weight: 600;
}

.sc__v2__banner.contactBanner span,
.sc__v2__banner.contactBanner span a{
	color: #52555a
}

.sc__v2__banner.contactBanner a:hover {
	color: #8ccb45;
}

@media screen and (max-width: 1099px) {
	.sc__v2__banner h3.grey {
		font-size: 19.5pt;
	}

	.sc__v2__banner.contactBanner {
		height: 305px;
	}
	.sc__v2__banner.contactBanner .cta {
    	margin-top: 20px;
    }

    .desktopOnlySlider {
	    display: none;
    }

    .sc__v2__hidedesktop.contactBanner {
	    display: block;
    }

    /*.unslider-nav {
	    display: none;
    }*/
}

@media screen and (max-width: 908px) {
	.sc__v2__banner h3.grey {
		font-size: 16pt;
	}

	.sc__v2__banner.contactBanner {
		height: 285px;
	}
	.sc__v2__banner.contactBanner .cta {
    	margin-top: 20px;
    	font-size: 12pt;
    }
}

@media screen and (max-width: 800px) {
	.sc__v2__banner.contactBanner .sc__v2__inlinelist {
		display: none;
	}

	.sc__v2__banner.contactBanner {
		height: 230px;
	}

	.sc__v2__banner h3.grey {
		font-size: 14pt;
	}
}

@media screen and (max-width: 600px) {
	.sc__v2__banner.contactBanner {
		height: 180px;
	}
	.sc__v2__banner .overlay.textright {
		bottom: 20px;
	}

	.sc__v2__banner h3.grey {
		font-size: 12pt;
	}
}

@media screen and (max-width: 499px) {
	.sc__v2__banner.contactBanner {
		display: none;
	}
}


/*
	Full image banner
	- has a CTA button overlay
	- Used by take 5 campaign I think
*/

.sc__v2__feature-fullimage .sc__v2__feature-cta {
    margin: 0;
    position: relative;
    left: 710px;
    margin-top: 180px;
}

@media screen and (max-width: 1099px) {
  .sc__v2__feature-fullimage {
    height: 330px;
    background-size: cover;
  }
  .sc__v2__feature-fullimage .sc__v2__feature-cta {
    left: 71%;
    margin-top: 150px;
  }

  .sc__v2__banner img {
    position: absolute;
    width: 100%;
    height: auto;
  }

}

@media screen and (max-width: 891px) {
  .sc__v2__feature-fullimage {
    height: 300px;
  }
  .sc__v2__feature-fullimage .sc__v2__feature-cta {
    left: 72%;
    margin-top: 150px;
  }
}

@media screen and (max-width: 780px) {
  .sc__v2__feature-fullimage {
    background: url(../images/take5promo-mobile.jpg) no-repeat center;
    height: 300px;
    background-size: cover;
  }
  .sc__v2__feature-fullimage .sc__v2__feature-cta {
      left: 0;
      margin: 0 auto;
      width: 150px;
      margin-top: 150px;
  }
}

@media screen and (max-width: 600px) {
  .sc__v2__banner .overlay.style1 .overlay-content {
    width: 100%;
  }

}
@media screen and (max-width: 300px) {
  .sc__v2__banner {
      height: 425px;
  }
}

/*
	Orange feature
	- Used for case study with video and testimonial

*/

.sc__v2__feature-orange {
    display: none;
}

.sc__v2__feature-orange .sc__v2__wrapper {
  background: #de7d07;
  color: #fff;
  margin-bottom: 20px;
  overflow: hidden;
}

.sc__v2__feature .sc__v2__feature-img {
  width: 550px;
  height: 315px;
  display: inline-block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  vertical-align: top;
}

.sc__v2__feature .sc__v2__feature-text {
  width: 43%;
  display: inline-block;
  padding: 25px 30px 0 50px;
  box-sizing: border-box;
}

.sc__v2__feature .sc__v2__feature-text h3 {
  color: #fff;
  font-style: italic;
  font-weight: 200;
  font-family: 'Open Sans', 'Whitney A', 'Whitney B', sans-serif;
  margin-bottom: 25px;
  line-height: 1.4;
  font-size: 15pt;
}

.testimonial-author {
  font-style: italic;
  color: rgba(255,255,255,0.6);
  margin-bottom: 25px;
}

.sc__v2__feature-cta {
  margin: 20px -5px;
}

.sc__v2__btn, a.sc__v2__btn {
	border: none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding: 10px 20px;
  margin: 10px 3px;
  display: inline-block;
  min-width: 100px;
  text-align: center;
  text-decoration: none;
}

.sc__v2__btn_lge, a.sc__v2__btn_lge {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 20px 40px;
    margin: 10px 10px;
    display: inline-block;
    min-width: 250px;
    text-align: center;
    text-decoration: none;
    font-size: 14pt;
}


/*
	Full background, with text over center
	- Used for NZ banner
	- Used for updated contact banner as well
*/

#sc__v2__banner-nz1 {
	background-image: url(../images/sc_nz_banner1-bg.jpg);
	background-size: cover;
}

#sc__v2__banner-contact1 {
	background-image: url(../images/sc_contact_banner2-bg.jpg);
	background-size: cover;
}

.sc__v2__banner-content-textcenter {
	max-width: 400px;
	margin: 0 auto;
	text-align: center;
	color: #fff;
	padding: 60px 0;
}

.sc__v2__banner-content-textright {
	max-width: 480px;
	float: right;
	text-align: left;
	color: #fff;
	padding: 60px 40px 60px 0;
}

.sc__v2__banner-content-textleft {
	max-width: 480px;
	float: left;
	text-align: left;
	color: #fff;
	padding: 60px 40px 60px 60px;
}

.sc__v2__banner-content-textcenter h2,
.sc__v2__banner-content-textcenter h3 {
	color: #fff;
	font-weight: 300;
	font-family: "Open Sans", sans-serif;
	line-height: 1.5;
}

.sc__v2__banner-content-textcenter h2 {
	font-size: 20pt;
	letter-spacing: 1px;
}

.sc__v2__banner-content-textcenter h3 {
	font-size: 12pt;
	max-width: 75%;
	margin: 0 auto 20px;
	letter-spacing: 0.5px;
}

#sc__v2__banner-nz1 .sc__v2__feature-cta {
	border: 1px solid #fff;
	background: none;
	color: #fff;
}

#sc__v2__banner-nz1 .sc__v2__feature-cta:hover {
	background: #fff;
	color: #289FD7;
}

#sc__v2__banner-contact1 h2 {
	font-size: 20pt;
	line-height: 1.5;
	font-weight: 400;
	color: #444;
	text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
	max-width: 90%;
}
#sc__v2__banner-contact1 h3 {
	font-size: 11pt;
	font-weight: 400;
	max-width: 95%;
	line-height: 1.3;
	color: #444;
	text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
}


/* font styles */

/* UNLIMITED PLAN */
#sc__v2__feature-unlimitedplan h2 {
	color: #000;
	margin-top: 20px; 
	max-width: 290px;
	line-height: 1.5;
}

#sc__v2__feature-unlimitedplan h3 {
	color: #000;
	margin-top: 20px; 
	max-width: 290px;
	line-height: 1.5;
}



#sc__v2__feature-unlimitedplan .sc__v2__yellowHighlight {
	background: #fff200;
	color: #000; 
	padding: 8px 26px; 
	display: inline-block;
	font-weight: bold; 
}

#sc__v2__feature-unlimitedplan .sc__v2__btn {
	border: 0px solid #000; 
	color: #fff;
	background: rgba(0,0,0,0.7);
	margin: 0; 
	display: block; 
	max-width: 150px;
	padding: 8px 10px;
}

#sc__v2__feature-unlimitedplan .sc__v2__btn:hover {
	color: #8ccb45;
	background: #000; 
}

@media screen and (max-width: 915px) {
	.sc__v2__banner-content-textright {
		max-width: 450px;
		float: none;
		text-align: center;
		margin: 0 auto;
		padding: 20px 0px 20px 0;
	}
	
	#sc__v2__feature-unlimitedplan .sc__v2__banner-content-textright {
		max-width: 480px;
		float: right;
		text-align: left;
		color: #fff;
		padding: 60px 40px 60px 0;
	}

	#sc__v2__banner-contact1 .sc__v2__banner-overlay {
		background: rgba(239,239,239,0.85);
		height: 68%;
		position: absolute;
		width: 100%;
		margin-top: 50px;
	}
	
	.sc__v2__banner-content-textleft {
		max-width: 480px;
		float: left;
		text-align: left;
		color: #fff;
		padding: 40px 40px 40px 40px;
	}
}

@media screen and (max-width: 599px) {
	#sc__v2__feature-unlimitedplan {
	  background-image: none;
	  background-color: #a4dbdc;
	
	}
	
	#sc__v2__feature-unlimitedplan .sc__v2__banner-content-textright {
		max-width: 90%;
		float: none;
		text-align: center;
		color: #fff;
		padding: 40px 40px 40px 40px;
		margin: 0 auto;
	}
	
	#sc__v2__feature-unlimitedplan .sc__v2__btn {
		margin: 0 auto;
	}
	
	#sc__v2__feature-unlimitedplan h3 {
		max-width: 100%; 
	}
	
}

@media screen and (max-width: 450px) {
		#sc__v2__banner-contact1 {
	    background-position: -150px;
		}

	#sc__v2__banner-contact1 h2 {
		font-size: 16pt;
		line-height: 1.4;
		max-width: 90%;
		margin: 20px auto;
		font-weight: 300;
	}

		#sc__v2__banner-contact1 h3 {
			display: none;
		}

		.sc__v2__banner-content-textcenter {
			padding: 20px 0;
		}

		.sc__v2__banner-content-textcenter h2 {
			font-size: 17pt;
    	max-width: 95%;
    	margin: 20px auto;
		}

		#sc__v2__banner-contact1 .sc__v2__banner-overlay {
			    height: 50%;
					bottom: 0px;
		}

		.sc__v2__banner-content-textright {
			padding: 0px;
		}

		.sc__v2 p.cta {
			font-size: 11pt;
		}
}


.sc__v2__linedHeading {
  line-height: 0.5;
  text-align: center;
 
}
.sc__v2__linedHeading span {
  display: inline-block;
  position: relative;  
}
.sc__v2__linedHeading span:before,
.sc__v2__linedHeading span:after {
  content: "";
  position: absolute;
  height: 5px;
  border-top: 3px solid white;
  top: 2px;
  width: 600px;
}
.sc__v2__linedHeading span:before {
  right: 100%;
  margin-right: 15px;
}
.sc__v2__linedHeading span:after {
  left: 100%;
  margin-left: 15px;
}



#sc__v2__feature-valuepacks .sc__v2__banner-content {
	max-width: 240px; 
	overflow: hidden; 
}

#sc__v2__feature-valuepacks .sc__v2__banner-content-textleft {
	padding: 60px 0px 60px 0px;
    margin: 0 40px 0 60px;
}

#sc__v2__feature-concretepack .sc__v2__banner-content {
	max-width: 370px; 
	overflow: hidden; 
	float: left; 
}

#sc__v2__feature-concretepack .sc__v2__banner-content-textleft {
	padding: 90px 0px 60px 0px;
    margin: 0 40px 0 60px;
}

#sc__v2__feature-concretepack .sc__v2__banner-content-textleft-col2 {
	max-width: 370px; 
	float: right; 
	margin: 0 40px 0 60px;
	padding: 90px 0px 60px 0px;
}


#sc__v2__feature-concretepack .sc__v2__banner-content-textleft-col2 p {
	color: #fff; 
	font-size: 13pt;
}

#sc__v2__feature-valuepacks h3,
#sc__v2__feature-concretepack h3,
#sc__v2__feature-digitalswms h3  {
	color: #fff;
    font-size: 20pt;
    font-weight: 600;
    margin-bottom: 20px; 
    margin-top: 20px; 
    line-height: 1.3; 
}

#sc__v2__feature-digitalswms h3 {
	max-width: 300px; 
	margin-top: -15px; 
}

#sc__v2__feature-valuepacks h4,
#sc__v2__feature-concretepack h4 {
	font-weight: 400;
    font-size: 12pt;
    line-height: 1.4;
    margin-bottom: 20px;
}

#sc__v2__feature-digitalswms p { 
	color: #fff;
	font-size: 11pt; 
	max-width: 340px; 
}

#sc__v2__feature-valuepacks .sc__v2__btn,
#sc__v2__feature-concretepack .sc__v2__btn,
#sc__v2__feature-digitalswms .sc__v2__btn {
	background: #8ccb45; 
	color: #fff; 
}

#sc__v2__feature-valuepacks .sc__v2__btn:hover,
#sc__v2__feature-concretepack .sc__v2__btn:hover,
#sc__v2__feature-digitalswms .sc__v2__btn:hover  {
	background: #289fd7; 
	color: #fff; 
	cursor: pointer; 
}

#sc__v2__feature-concretepack .sc__v2__inlinelist span:before {
	content: "\b7\a0";
    color: #fff;
    font-size: 16pt;
}

#sc__v2__feature-valuepacks .sc__v2__linedHeading {
	font-size: 12pt; 
	margin-top: 20px; 
}

@media screen and (max-width: 915px) {
	#sc__v2__feature-concretepack .sc__v2__banner-content-textleft-col2 { 
		display: none; 
	}
	
	#sc__v2__feature-concretepack .sc__v2__banner-content-textleft {
		padding: 50px 0px 60px 0px; 
	}
	
	.sc__homepage.sc__v2 #sc__v2__feature-concretepack h3,
	.sc__homepage.sc__v2 #sc__v2__feature-digitalswms h3,
	.sc__homepage.sc__v2 #sc__v2__feature-digitalswms p  {
		text-align: left; 
	}
	
	.sc__homepage.sc__v2 #sc__v2__feature-digitalswms .banner_dark_overlay {
		    background-color: rgba(0,0,0, 0.5);
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	}
}


/* Common styles */
.sc__v2__banner .cta.ltblue,
.sc__v2__banner .cta.ltblue a {
	color: #289FD7;
	text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
}
.sc__v2__banner .cta.ltblue a {
	font-weight: bold;
}


.white-heading {
	color: #fff; 
}