@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,800');

body, html {
    font-family: 'Open Sans', sans-serif;
    overflow-x: hidden;
}
.wci_intro {
    margin-top: -100px;
    height: 85vh;
    min-height: 600px;
    width: 100%;
    position: relative;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:bottom right;
	background-image: url(../img/bg/wci/wci_intro.jpg);
    
}
.wci_intro_txt {
	position: absolute;
    color: #FFF;
	z-index: 100;
    padding: 20px 40px;
    width: 750px;
	margin: 0px auto;
	top: 20%;
	left: 5%;
	text-align: center;
}
  .wci_intro_txt h2 {
    font-weight: 800; 
	font-size: 28px;
	text-transform: uppercase; 
    line-height: 1.2; 
    color: #FFF;
    text-shadow: 2px 2px 4px  #000;
}
.wci_intro_txt p {
	font-size: 18px;
	font-weight: 300;
    line-height: 1.5; 
    color: #FFF;
	text-shadow: 2px 2px 4px  #000;
}

.wci_challenge_txt {
    margin: 6% auto;
    padding-left: 20%;
    padding-right: 20%;
    text-align: center;
}
.wci_challenge_txt h2 {
    font-weight: 800; 
	font-size: 28px;
	text-transform: uppercase; 
	line-height: 1.2; 
}
.wci_challenge_txt p {
	font-size: 18px;
	font-weight: 300;
	line-height: 1.5; 
}
.components {
    margin: 0px auto;
    text-align: center;
	background-image: url(../img/bg/wci/wci_nutrients.jpg);
	background-size: cover;
	background-position: center center;
	background-repeat: none;
	position: relative;
	padding: 45% 0 0;	
}
.components_txt {
    color: #FFF;
	position: absolute;
	top: 25%;
    left: 7%;
    width: 700px;
	text-align: center;
}
.components_txt h2 {
    font-weight: 800; 
	font-size: 28px;
	text-transform: uppercase; 
	line-height: 1.2; 
    text-shadow: 2px 2px 4px  #000;
}
.components_txt p {
	font-size: 18px;
	font-weight: 300;
	line-height: 1.5; 
}

.wci_pack_ingredients {
    display: block;
    position: relative;
	min-height: 500px;
    width: 100%;
    margin: 0;
    padding: 40px 0px 20px 0px;
    text-align: center;
}
.wci_pack_ingredients h2 {
	font-weight: 800; 
	font-size: 28px;
	text-transform: uppercase; 
	line-height: 1.2; 
    padding-left: 20%;
	padding-right: 20%;
}
.wci_pack_ingredients p {
	font-size: 18px;
	font-weight: 300;
    padding-left: 20%;
	padding-right: 20%;
	line-height: 1.5; 
}
.products_locations { margin: 40px auto 40px auto; }
.locations_title { width: 80%; margin: 40px auto 20px auto; }
.locations_title2 { width: 60%; margin: 40px auto 20px auto; }
.hundredpluslogo {
	margin: 20px 0px 0px 40px;
	width: 200px;
} 
.process {
	background-image: url(../img/bg/wci/wci_process.jpg);
	background-size: cover;
	background-position: top center;
	background-repeat: none;
	position: relative;
	padding: 50% 0 0;	
}
.process_txt {
    width: 700px;
    position: absolute;
    top: 20%;
    left: 10%;
	background-color: rgba(255, 255, 255, 0.9);
	padding: 40px 40px 60px 40px;
}
.process_txt h2 {
	font-weight: 800; 
	font-size: 28px;
	text-transform: uppercase; 
	line-height: 1.2; 
}
.process_txt p {
	font-size: 18px;
	font-weight: 300;
	line-height: 1.5; 
}


.order_pack {
    margin: 5% auto 5% auto;
    text-align: center;
}
.products_locations2 { margin: 40px auto 20px auto;}

.order_pack p {
    font-weight: 800; 
    padding-right: 20%;
    padding-left: 20%;
	font-size: 28px;
	text-transform: uppercase; 
	line-height: 1.2; 
}
.btn-order {
    clear: both;
    border-radius: 0;
	background-color: rgba(0, 0, 0, 0.7);
	color: #FFF;
	padding: 10px 40px;
    font-size: 16px;
}
.btn-order:hover {
    background: #CCCCCC;
    border: 1px solid #FFF;
}

.avp_promo {
	background-image: url(../img/bg/avp/bg_avp_intro.jpg);
	background-size: cover;
	background-position: bottom left;
	background-repeat: none;
	height: auto;
	position: relative;
	text-align: center;
	padding: 45% 0 0;	
}
.avp_promo_txt {
    position: absolute;
    top: 25%;
    left: 7%;
    width: 35%;
    text-align: center;
    color: #000;
}
.avp_promo_txt h1 {
	font-weight: 800; 
	font-size: 28px;
	text-transform: uppercase; 
	line-height: 1.2; 
}

.avp_promo_txt p {
	font-size: 18px;
	font-weight: 300;
	line-height: 1.5; 
}
.btn-avp {
	border-radius: 0;
	background-color: rgba(0, 0, 0, 0.7);
	padding: 10px 20px;
	color: #FFF;
	text-transform: uppercase;
	margin: 10px 10px 10px 10px;
}
.btn-avp:hover {
    background: #CCCCCC;
    border: 1px solid #FFF;
}


/* Extra large devices (large desktops, 2000px and up) */
@media (min-width: 2000px) {  
	.wci_intro_txt, .avp_promo_txt { width: 1000px; }
	.wci_intro_txt h2, .wci_challenge_txt h2, .components_txt h2,
	.process_txt h2, .order_pack p, .avp_promo_txt h1 { font-size: 3em; }
	.wci_intro_txt p, .wci_challenge_txt p, .components_txt p,
	.process_txt p, .wci_pack_ingredients p, .avp_promo_txt p { font-size: 26px; }
	.wci_challenge_txt { 
		width: 800px;
		padding: 0;
	}
	.components_txt { width: 1000px; }
	.wci_pack_ingredients {
		width: 1000px;
		margin: 4% auto;
	}
	.wci_pack_ingredients h2 { font-size: 3em; padding-left: 0; padding-right: 0; }
	.wci_pack_ingredients p { font-size: 26px; padding-left: 0; padding-right: 0; }
	.source_txt { font-size: 16px!important; }
	.process_txt { width: 800px; }
	.btn-order, .btn-avp { margin: 20px auto; font-size: 18px; }
}

/* Large devices (desktops, smaller than 992px) */
@media (max-width: 992px) { 
	.wci_intro {
		height: 100%;
		min-height: 650px;
	}
	.wci_intro_txt { 
		width: 90%;
		top: 25%;
		left: 5%;
		right: 5%;
	}
	.wci_intro_txt h2 { padding: 0; }
	.components_txt {
		width: 80%;
		left: 10%;
		right: 10%;
	}
	.wci_pack_ingredients { padding-right: 0; padding-left: 0; }
	.wci_pack_ingredients p { padding-left: 15%; padding-right: 15%; }
	.process_txt {
		width: 90%;
		left: 5%;
		right: 5%;
		top: 15%;
		padding: 20px 40px;
	}
	.avp_promo_txt { 
		top: 5%;
		width: 55%;
	}

}

/* Medium devices (tablets, smaller than 768px) */
@media (max-width: 768px) {  
	.wci_intro_txt { top: 20%; }
	.wci_intro_txt h2, .wci_challenge_txt h2, 
	.components_txt h2, .wci_pack_ingredients h2,
	.process_txt h2, .order_pack p, .avp_promo_txt h1 { font-size: 24px; }
	.wci_intro_txt p, .wci_challenge_txt p, .wci_pack_ingredients p, 
	.process p, .avp_promo_txt p { font-size: 16px; }
	.process  { padding: 60% 0 0; }
	.products_locations2 { width: 90%; }
}

/* Small devices (landscape phones, smaller than 576px) */
@media (max-width: 576px) {  
	.wci_intro {
		margin-top: 0;
		min-height: 450px;
	}
	.wci_intro_txt {
		top: 5%;
		width: 90%;
		padding: 10px 20px;
	}
	.components {
		padding: 20px 0;
	}
	.components_txt {
		position: relative;		
		width: 90%;
		left: 0;
		margin: 0 auto;
		padding-left: 10px;
		padding-right: 10px;
	}
	.wci_intro_txt h2, .wci_challenge_txt h2, 
	.components_txt h2, .wci_pack_ingredients h2,
	.process_txt h2, .order_pack p, 
	.avp_promo_txt h1 { font-size: 20px; }
	.wci_intro_txt p, .wci_challenge_txt p, 
	.components_txt p, .wci_pack_ingredients p, 
	.process p, .avp_promo_txt p { font-size: 14px; }
	.products_locations { margin: 20px auto 10px auto; }
	.order_pack p {
		padding-left: 10px;
		padding-right: 10px;
	}
	.wci_challenge_txt {
		margin: 10% auto;
		width: 90%;
		padding-left: 10px;
		padding-right: 10px;
	}
	.wci_pack_ingredients {
		width: 90%;
		margin: 0 auto;
		padding-left: 10px;
		padding-right: 10px;
		min-height: auto;
	}
	.wci_pack_ingredients h2 { padding-left: 10px; padding-right: 10px;}
	.wci_pack_ingredients p { padding-left: 10px; padding-right: 10px;}

	.process {
		background-position: top right;
		min-height: 500px;
	}
	.process_txt {
		padding: 10px 20px;
	}
	.avp_promo {
		padding: 20px 0px 0px 0px;
		background-position: top right;
	}
	.avp_promo_txt {
		position: relative;
		background-color: rgba(255, 255, 255, 0.6);
		width: 100%;
		left: 0;
		padding-left: 40px;
		padding-right: 40px;
	}
	.avp_promo_txt h1 { margin: 0px 0px 0px 0px; padding: 0;}
	.btn-order. {
		margin: 20px auto;
		font-size: 14px;
		padding: 10px;
	}
	 .btn-avp { 
		margin: 20px auto; 
		font-size: 14px; 
		padding: 10px; 
		white-space: normal;
		word-wrap: break-word;
		width: 100%;
	}
}