/* CSS for how to buy page 
 * -------------------------------*/

.full-width-bg {
    background: url(../images/bg-buy.jpg) no-repeat;
    padding: 75px 5%; /* 5% padding left and right is manditory to match other sections */
	
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
    background-position: center center;
}

/* Size up only text on page */
.thirds-single-column p {
	font-size: 18px;
	padding-bottom: 1rem;
}

.border-wrapper {
    /*border: 1px solid #c7c7c7; I don't like this affect for this page */
	padding: 5%;
    text-align: left;
    background: #fff;
	/* If we put padding for button as 'absolute' postioning, we can make sure button is always on bottom of container - brillant right? */
	position: relative; 
}


/* Thirds section 
 * --------------------*/
 #contactSales h3 {
	 background: url(../images/icon-contact-sales.svg) top left/96px 96px no-repeat;
 }
 #contactReseller h3 {
	 background: url(../images/icon-reseller.svg) top left/96px 96px no-repeat;
 }
 #contactDistributor h3 {
	 background: url(../images/icon-distributor.svg) top left/96px 96px no-repeat;
 }
 .level3-icon {
	padding-top: 96px; 
 }
 #buttonContactSales, 
 #buttonContactReseller, 
 #buttonContactDistributor {
	position: absolute; 
	bottom: 0.75rem;
	margin-right: 0.75rem;
 }
 
 /* Fourth setion 
  * --------------------*/
.partner-padding { 
	padding-bottom: 2rem;
}

#detailWhtSection {
	/*background: url(../images/451887905-1.jpg) no-repeat center 55%/cover;*/
	background: url(../images/638615786-buy.jpg) no-repeat center center/cover;
}
/*
article.single-column-title {
	background: url(../images/522558234.jpg) no-repeat center center/cover;
} */

article.single-column-title .element h2 {
	padding-top: 3rem;
	text-shadow: 0px 0px 6px rgba(255, 255, 255, 1);
	
}

/* Manulate postion of last paragraph before 'arrow-button' - put enough 
 * bottom-padding on object so that when width decreases, enough room for 'arrow-button'  
 * is left so that paragraph doesn't crash into button at any browser width */
#preParagraphContactSales,
#preParagraphContactDistributor,
#preParagraphContactReseller {
	padding-bottom: 42px;
}
 
/* Break points
* ------------------- */
@media screen and (max-width: 768px) {
	#preParagraphContactSales, #preParagraphContactDistributor, #preParagraphContactReseller {
		padding-bottom: 62px;
	}
}
 
@media screen and (max-width: 640px) {
	 
	 /* Icon appears before title */
	 .level3-icon {
		/* font-size:36px !important;*/
		padding-top: 17px;
		padding-left: 75px;
		height: 36px;
	}
	
	#contactSales h3, 
	#contactReseller h3,
	#contactDistributor h3 {
		background-size: 64px 64px;
	}

	#preParagraphContactSales,
	#preParagraphContactDistributor,
	#preParagraphContactReseller {
		padding-bottom: 2rem;
	}

	#buttonContactSales, 
	#buttonContactReseller, 
	#buttonContactDistributor {
		bottom: 1.5rem;
	}
}