@charset "utf-8";

/* -----------------------------------------------------------------------------------------------------------------------------------------------------------
   ----- PROFILES/INDEX --------------------------------------------------------------------------------------------------------------------------------------
   ----------------------------------------------------------------------------------------------------------------------------------------------------------- */

.profiles {
	position: relative;
	margin: 50px auto auto auto;
}
.profiles ul li {
	display: inline-block;
	padding: 0% 0%;
	transition: 0.3s;
	position: relative;
	margin: 0%;
	width: 100%;
	border-bottom: solid 1px rgba(255,255,255,0.0);
}
.profiles ul li a img {
	position: relative;
	margin: auto;
	width: 12.5%;
	padding: 0% 43.75%;
	height: auto;
	opacity: 0.1;
	transition: 0.5s;
}
.profiles ul li a img:hover {
	opacity: 1.0;
}
.client {
	position: absolute;
	margin: auto;
	font-size: 120%;
	font-weight: 700;
	white-space: nowrap;
	left: 50%;
	top: 50%;
	-webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
	color: #fff;
	text-transform: uppercase;
	float: left;
}

.clr01:hover {
	background-color: #002b70;
}
.clr02:hover {
	background-color: cyan;
}
.clr03:hover {
	background-color: #e5cf5c;
}
.clr04:hover {
	background-color: #ba000c;
}
.clr05:hover {
	background-color: #ff9933;
}
.clr06:hover {
	background-color: #002233;
}
.clr07:hover {
	background-color: #8a8f99;
}
.clr08:hover {
	background-color: #55802a;
}
.clr09:hover {
	background-color: #cc9900;
}
.clr10:hover {
	background-color: #552D80;
}
.clr11:hover {
	background-color: #00394d;
}
.clr12:hover {
	background-color: #1F001F;
}
.clr13:hover {
	background-color: #660000;
}
.clr14:hover {
	background-color: #456f99;
}
.clr15:hover {
	background-color: #cc9900;
}
.clr16:hover {
	background-color: #004c66;
}



/* -----------------------------------------------------------------------------------------------------------------------------------------------------------
   ----- ABOUT -----------------------------------------------------------------------------------------------------------------------------------------------
   ----------------------------------------------------------------------------------------------------------------------------------------------------------- */

.banner {
	position: relative;
	width: 100%;
	height: auto;
	min-height: 550px;
	padding: 5% 0% 15% 0%;
	background-color: #001433;
	background-image: url(../profiles/images/banner_01_bludrm.png);
	background-position: center 60%;
	background-repeat: no-repeat;
	overflow: hidden;
	box-shadow: 0px 0px 30px #000;
}
.bnnr02 {
	background-color:#063840;
	background-image: url(../profiles/images/banner_02_glt.png);
}
.bnnr03 {
	background-color:#001f4d;
	background-image: url(../profiles/images/banner_03_sprlmnhz.png);
}
.bnnr04 {
	background-color:#4d0005;
	background-image: url(../profiles/images/banner_04_strwbrry.png);
}
.bnnr05 {
	background-color:#804c1a;
	background-image: url(../profiles/images/banner_05_pnppl.png);
}
.bnnr06 {
	background-color:#001824;
	background-image: url(../profiles/images/banner_06_skywlkr.png);
}
.bnnr07 {
	background-color:#2e3033;
	background-image: url(../profiles/images/banner_07_pltnm.png);
}
.bnnr08 {
	background-color:#223311;
	background-image: url(../profiles/images/banner_08_srdsl.png);
}
.bnnr09 {
	background-color:#664c00;
	background-image: url(../profiles/images/banner_09_crlmlk.png);
}
.bnnr10 {
	background-color:#462966;
	background-image: url(../profiles/images/banner_10_grndddypp.png);
}
.bnnr11 {
	background-color:#001c26;
	background-image: url(../profiles/images/banner_11_zkttlz.png);
}
.bnnr12 {
	background-color:#1f001f;
	background-image: url(../profiles/images/banner_12_prpl.png);
}
.bnnr13 {
	background-color:#330000;
	background-image: url(../profiles/images/banner_13_kmkz.png);
}
.bnnr14 {
	background-color:#456f99;
	background-image: url(../profiles/images/banner_14_kingxiii.png);
}
.bnnr15 {
	background-color:#993600;
	background-image: url(../profiles/images/banner_15_fbf.png);
}
.bnnr16 {
	background-color:#004c66;
	background-image: url(../profiles/images/banner_16_trnwrck.png);
}
.bnnrL01 {
	background-color:#FFFFFF;
	background-image: url(../images/product-pg01_straw.png);
}
.bnnrL02 {
	background-color:#FFFFFF;
	background-image: url(../images/product-pg02_rasp.png);
}
.bnnrL03 {
	background-color:#FFFFFF;
	background-image: url(../images/product-pg03_black.png);
}
.bnnrL04 {
	background-color:#FFFFFF;
	background-image: url(../images/product-pg04_melon.png);
}
.cart {
	position: absolute;
	width: 90%;
	top: 50%;
	left: 75%;
	transform: translateX(-50%) translateY(-50%);
	float: left;
	-webkit-animation-name: slidr1;
	-webkit-animation-duration: 4s;
	-webkit-animation-iteration-count: 1;
	animation-name: slidr1;
	animation-duration: 4s;
	animation-iteration-count: 1;
}
@-webkit-keyframes slidr1 {
	0% 			{opacity: 0; left: 50%;}
	40% 		{opacity: 1; left: 50%;}
	100% 		{opacity: 1; left: 75%;}
}
@keyframes slidr1 {
	0% 			{opacity: 0; left: 50%;}
	40% 		{opacity: 1; left: 50%;}
	100% 		{opacity: 1; left: 75%;}
}

.info {
	position: absolute;
	top: 20%;
	left: 32.5%;
	transform: translateX(-50%);
	margin: auto auto auto auto;
	padding: 0% 0% 0% 0%;
	width: 50%;
	height: auto;
	text-align: left;
	-webkit-animation-name: slidr2;
	-webkit-animation-duration: 4s;
	-webkit-animation-iteration-count: 1;
	animation-name: slidr2;
	animation-duration: 4s;
	animation-iteration-count: 1;
}
@-webkit-keyframes slidr2 {
	0% 			{opacity: 0; left: 20%;}
	40% 		{opacity: 0; left: 20%;}
	100% 		{opacity: 1; left: 32.5%;}
}
@keyframes slidr2 {
	0% 			{opacity: 0; left: 20%;}
	40% 		{opacity: 0; left: 20%;}
	100% 		{opacity: 1; left: 32.5%;}
}

.info h1 {
	font-size: 60%;
	letter-spacing: 1em;
	margin: auto auto 2% auto;
	color: #ffd23f;
}
.info h2 {
	font-size: 260%;
	text-shadow: -1px 4px 10px rgba(0,0,0,0.5);
}
.info p {
	margin: auto auto 5% auto;
	font-size: 50%;
	font-weight: 400;
	width: 100%;
	color: rgba(0,0,0,0.8);
}
.shdw_txt {
	text-shadow: 0px 5px 10px rgba(0,0,0,0.5);
}
.info h3 {
	font-size: 60%;
	margin: auto auto 2% 10%;
	text-transform: uppercase;
}
.banner ul {
	position: relative;
	margin: auto auto;
	width: 80%;
	height: auto;
	text-align: center;
	-webkit-animation-name: slidr3;
	-webkit-animation-duration: 4s;
	-webkit-animation-iteration-count: 1;
	animation-name: slidr3;
	animation-duration: 4s;
	animation-iteration-count: 1;
}
@-webkit-keyframes slidr3 {
	0% 			{opacity: 0; top: -8%;}
	50% 		{opacity: 0; top: -8%;}
	100% 		{opacity: 1; top: 0%;}
}
@keyframes slidr3 {
	0% 			{opacity: 0; top: -8%;}
	50% 		{opacity: 0; top: -8%;}
	100% 		{opacity: 1; top: 0%;}
}

.banner ul li {
	position: relative;
	display: inline-block;
	width: 23.5%;
}
.banner ul li p {
	display: block;
	font-size: 45%;
	font-style: italic;
	margin: -10% auto auto auto;
}
.info a {
	position: relative;
	width: 80%;
	display: block;
	text-align: center;
	color: #FFF;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 65%;
	margin: 5% auto auto auto;
	background-color: rgba(0,0,0,0.8);
	padding: 2% 0% 1.5% 0%;
	transition: 0.3s;
}
.info a:hover {
	color: #000000;
	background-color: #ffd23f;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.ppg-0201, .ppg-0202 {
	position: relative;
	margin: auto auto;
	width: 40%;
	display: inline-block;
	padding: 10% 0%;
}
.ppg-0201 img {
	margin: auto auto auto auto;
	width: 200px;
}
.ppg-0202 img {
	margin: auto auto auto auto;
	width: 90px;
}
.ppg-0201 h4, .ppg-0202 h4 {
	font-size: 20pt;
}
.ppg-0201 a {
	margin: 5% auto auto auto;
	font-size: 14pt;
	font-weight: 600;
	text-transform: uppercase;
	background: #FFFFFF;
	padding: 3% 4% 2.5% 5%;
	display: inline-block;
	color: rgba(0,0,0,0.8);
	transition: 0.3s;
}
.ppg-0201 a:hover {
	background-color: #ffd23f;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.ppg-0202 p {
	font-size: 14pt;
}
.about {
	padding: 10% 0%;
	background-color: #1A1A1A;
	background-image: url(../images/cart_blk.png);
	background-position: left center;
	background-repeat: no-repeat;
}
.abt01 {
	margin: auto auto auto 40%;
	display: inline-block;
	width: 50%;
}
.abt01 h4 {
	font-size: 100%;
	width: 90%;
	margin: auto auto auto auto;
	padding: 0% 0% 2% 0%;
	text-transform: uppercase;
	display: block;
}
.abt01 p {
	font-size: 65%;
	width: 90%;
	margin: auto auto auto auto;
	padding: 0% 0% 2% 0%;
	display: block;
}
.abt01 a {
	border: 1px solid rgba(255,255,255,0.5);
	font-size: 60%;
	margin: auto auto auto auto;
	padding: 2% 4% 1.25% 4%;
	text-transform: uppercase;
	font-weight: 700;
	color: #fff;
	transition: 0.75s;
}
.abt01 a:hover {
	border: 1px solid #fff;
	color: rgba(0,0,0,0.8);
	background-color: #fff;
	box-shadow: 0px 0px 15px #000;
}
.tree {
	padding: 15% 55% 5% 5%;
	background-image: url(../images/leaves.jpg);
	background-position: 100% center;
	background-attachment: fixed;
  background-size: 50% auto;
	background-repeat: repeat-y;
	background-color: #fb6562;
	box-shadow: 0px 0px 30px #000;
}
.tree h5 {
	font-size: 200%;
	width: 90%;
	margin: auto auto auto auto;
	padding: 0% 0% 2% 0%;
	text-transform: uppercase;
	display: block;
}
.tree p {
	font-size: 65%;
	width: 90%;
	margin: auto auto auto auto;
	padding: 0% 0% 2% 0%;
	display: block;
}
.tree a {
	border: 1px solid rgba(255,255,255,0.5);
	font-size: 60%;
	margin: auto auto auto auto;
	padding: 2% 4% 1.25% 4%;
	text-transform: uppercase;
	font-weight: 700;
	color: #fff;
	transition: 0.75s;
}
.tree a:hover {
	border: 1px solid #fff;
	color: rgba(0,0,0,0.8);
	background-color: #fff;
	box-shadow: 0px 0px 15px rgba(0,0,0,0.8);
}
.tree img {
	width: 40%;
	padding: 20% 30% 0% 30%;
}

.facts {
	position: relative;
	margin: auto;
	width: 100%;
	padding: 10% 0%;
	color: rgba(0,0,0,0.8);
	background-color: #FFFFFF;
}
.factstable {
	position: relative;
	margin: auto;
	width: 100%;
	max-width: 300px;
	padding: 5% 5%;
}
.factstable h2 {
	font-size: 16pt;
}
.factstable p, table {
	position: relative;
	margin: 5% auto;
	width: 100%;
	font-size: 11pt;
	color: rgba(0,0,0,0.8);
	text-align: left;
	font-weight: 300;
}
table td, th{
	width: 50%;
	border: solid 1px rgba(0,0,0,0.20);
	padding: 1.5%;
}
table a {
	color: rgba(0,0,0,0.8);
	text-decoration: underline;
}

.window-popup {
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	top: 0%;
	left: 0%;
	display: none;
}
.wp-content {
	position: absolute;
	width: 30%;
	height: auto;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%) ;
	padding: 5% 2.5%;
	background-color: rgba(255,255,255,1);
	box-shadow: 0px 0px 30px rgba(0,0,0,0.9);
}
.wp-content img {
	position: relative;
	margin: auto auto 2.5% auto;
	width: 80%;
	height: auto;
}
.wp-content p {
	position:  relative;
	margin: auto 10% 15% 10%;
	width: auto;
	height: auto;
	font-size: 50%;
	font-weight: 300;
	color: #000;
}
.wp-content h3 {
	position:  relative;
	margin: auto 2.5%;
	width: auto;
	height: auto;
	font-size: 60%;
	font-weight: 700;
	color: #000;
}

.continue a {
	position: relative;
	margin: auto auto 5% auto;
	display: block;
	width: 80%;
	height: auto;
	padding: 2.5% 0% 2% 0%;
	background-color: #ffd23f;
	color: #000000;
	font-size: 60%;
	font-weight: 700;
	text-transform: uppercase;
	font-family: 'Quicksand', sans-serif;
	transition: 0.3s;
}
.continue a:hover {
	cursor: pointer;
	color: #FFFFFF;
	background-color: #3bceac;
}
#button-popup-close {
	position: relative;
	margin: auto;
	display: block;
	width: 80%;
	height: auto;
	padding: 2.5% 0% 2% 0%;
	background-color: #ccc;
	color: #666;
	font-size: 60%;
	font-weight: 700;
	text-transform: uppercase;
	font-family: 'Quicksand', sans-serif;
	transition: 0.3s;
}
#button-popup-close:hover {
	color: #FFF;
	background-color: #ee4266;
}

.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX {}

/* ===========================================================================================================================================================
   ===== MEDIA QUERIES ======================================================================================================================================= 
   =========================================================================================================================================================== */
   
@media only screen and (min-width : 0px) and (max-width : 768px) {
	
		/* -----------------------------------------------------------------------------------------------------------------------------------------------------------
		 ----- PROFILES/INDEX --------------------------------------------------------------------------------------------------------------------------------------
		 ----------------------------------------------------------------------------------------------------------------------------------------------------------- */

	.profiles {
		position: relative;
		margin: 70px auto auto auto;
	}
	.profiles ul li {
		display: inline-block;
		padding: 0% 0%;
		transition: 0.3s;
		position: relative;
		margin: 0% auto;
		width: 100%;
		border-bottom: solid 0px rgba(255,255,255,0.1);
		box-shadow: inset 0px 0px 15px rgba(0,0,0,0.5);
	}
	.profiles ul li:nth-child(1) {
		background-color: rgba(0, 43, 112, 0.25);
	}
	.profiles ul li:nth-child(2) {
		background-color: rgba(0, 255, 255, 0.25);
	}
	.profiles ul li:nth-child(3) {
		background-color: rgba(229, 207, 92, 0.25);
	}
	.profiles ul li:nth-child(4) {
		background-color: rgba(186, 0, 12, 0.25);
	}
	.profiles ul li:nth-child(5) {
		background-color: rgba(0, 34, 51, 0.25);
	}
	.profiles ul li:nth-child(6) {
		background-color: rgba(138, 143, 153, 0.25);
	}
	.profiles ul li:nth-child(7) {
		background-color: rgba(85, 128, 42, 0.25);
	}
	.profiles ul li:nth-child(8) {
		background-color: rgba(204, 153, 0, 0.25);
	}
	.profiles ul li:nth-child(9) {
		background-color: rgba(31, 0, 31, 0.35);
	}
	.profiles ul li:nth-child(10) {
		background-color: rgba(69, 111, 153, 0.25);
	}
	.profiles ul li:nth-child(11) {
		background-color: rgba(153, 54, 0, 0.35);
	}
	.profiles ul li:nth-child(12) {
		background-color: rgba(0, 76, 102, 0.25);
	}
	.profiles ul li:nth-child(13) {
		background-color: rgba(102, 0, 0, 0.25);
	}

	.profiles ul li a img {
		position: relative;
		margin: auto;
		width: 12.5%;
		padding: 0% 43.75% 0% 43.75%;
		height: auto;
		opacity: 0.0;
		transition: 0.3s;
	}
	.client {
		position: absolute;
		margin: auto;
		font-size: 80%;
		font-weight: 700;
		white-space: nowrap;
		left: 50%;
		top: 50%;
		-webkit-transform: translateY(-50%) translateX(-50%);
		transform: translateY(-50%) translateX(-50%);
		color: #fff;
		text-transform: uppercase;
		float: left;
	}

	.banner {
		position: relative;
		width: 100%;
		height: auto;
		min-height: 667px;
		padding: 20% 0%;
		background-size: 300%;
		background-position: top;
		background-repeat: no-repeat;
		overflow: hidden;
		box-shadow: 0px 0px 30px #000;
	}
	
  .cart {
		position: relative;
		margin: auto auto -20% auto;
		width: 300%;
		top: 0%;
		left: 50%;
		transform: translateX(-50%) translateY(-0%);
		float: left;
		-webkit-animation-name: slidr1A;
		animation-name: slidr1A;
	}

	@-webkit-keyframes slidr1A {
		0% 			{opacity: 0; top: -5%;}
		40% 		{opacity: 1; top: 0%;}
		100% 		{opacity: 1; top: 0%;}
	}
	@keyframes slidr1A {
		0% 			{opacity: 0; top: -5%;}
		40% 		{opacity: 1; top: 0%;}
		100% 		{opacity: 1; top: 0%;}
	}

	.info {
		position: relative;
		top: 0%;
		left: 0%;
		transform: translateX(0%);
		margin:auto auto;
		padding: 0% 0% 0% 0%;
		width: 90%;
		height: auto;
		text-align: center;
		-webkit-animation-name: slidr2;
		animation-name: slidr2;
	}
	@-webkit-keyframes slidr2 {
		0% 			{opacity: 0; left: -10%;}
		40% 		{opacity: 0; left: -10%;}
		100% 		{opacity: 1; left: 0%;}
	}
	@keyframes slidr2 {
		0% 			{opacity: 0; left: -10%;}
		40% 		{opacity: 0; left: -10%;}
		100% 		{opacity: 1; left: 0%;}
	}

	.info h1 {
		font-size: 12.5pt;
		letter-spacing: 0em;
		margin: auto auto 2.5% auto;
		text-shadow: 0px 0px 0px rgba(0,0,0,0.0);
	}
	.info h2 {
		font-size: 120%;
	 text-shadow: -1px 4px 8px rgba(0,0,0,0.5);
	}
	.info p {
		margin: 10% auto;
		font-size: 60%;
		font-weight: 400;
		width: 90%;
		color: rgba(0,0,0,0.8);
	}
	.info a {
		position: relative;
		width: 80%;
		display: block;
		text-align: center;
		color: #FFF;
		font-weight: 600;
		text-transform: uppercase;
		font-size: 65%;
		margin: 5% auto auto auto;
		background-color: rgba(0,0,0,0.8);
		padding: 5% 0% 4% 0%;
		transition: 0.3s;
	}
  .ppg-0201, .ppg-0202 {
		position: relative;
		margin: auto auto;
		width: 80%;
		display: inline-block;
		padding: 10% 10% 20% 10%;
	}
	.ppg-0201 h4, .ppg-0202 h4 {
		font-size: 18pt;
	}
	.shdw_txt {
		text-shadow: 0px 5px 10px rgba(0,0,0,0.5);
	}
	.info h3 {
		font-size: 60%;
		margin: auto auto 2% auto;
		text-transform: uppercase;
	}
	.banner ul {
		position: relative;
		margin: auto auto;
		width: 80%;
		height: auto;
		text-align: center;
		-webkit-animation-name: slidr3A;
		animation-name: slidr3A;
	}
	@-webkit-keyframes slidr3A {
		0% 			{opacity: 0; top: -8%;}
		50% 		{opacity: 0; top: -8%;}
		100% 		{opacity: 1; top: 0%;}
	}
	@keyframes slidr3A {
		0% 			{opacity: 0; top: -8%;}
		50% 		{opacity: 0; top: -8%;}
		100% 		{opacity: 1; top: 0%;}
	}

	.banner ul li {
		position: relative;
		display: inline-block;
		width: 47.5%;
	}
	.banner ul li p {
		display: block;
		font-size: 60%;
		font-style: italic;
		margin: -10% auto auto auto;
	}
	.about {
		padding: 20% 0%;
		background-color: #262626;
		background-image: url(../images/cart_blk.png);
		background-position: 75% center;
		background-repeat: no-repeat;
	}
	.abt01 {
		margin: auto auto auto auto;
		display: inline-block;
		width: 90%;
	}
	.abt01 h4 {
		font-size: 100%;
		width: 90%;
		margin: auto auto auto auto;
		padding: 0% 0% 2% 0%;
		text-transform: uppercase;
		display: block;
	}
	.abt01 p {
		font-size: 60%;
		width: 90%;
		margin: auto auto auto auto;
		padding: 0% 0% 5% 0%;
	}
	.abt01 a {
		border: 1px solid rgba(255,255,255,0.5);
		font-size: 60%;
		margin: auto auto auto auto;
		padding: 4% 15% 3.5% 15%;
		text-transform: uppercase;
		font-weight: 700;
		color: #fff;
	}
	.facts {
		padding: 25% 0%;
	}
	.tree {
		padding: 20% 30% 10% 5%;
		background-image: url(../images/leaves2.jpg);
		background-attachment: unset;
		background-size: 25% 100%;
		background-position: top right;
		background-repeat: repeatY;
		background-color: #fb6562;
		box-shadow: 0px 0px 30px #000;
	}
	.tree h5 {
		font-size: 200%;
		width: 90%;
		margin: auto auto auto auto;
		padding: 0% 0% 2% 0%;
		text-transform: uppercase;
		display: block;
	}
	.tree p {
		font-size: 65%;
		width: 90%;
		margin: auto auto auto auto;
		padding: 0% 0% 10% 0%;
		display: block;
	}
	.tree a {
		border: 1px solid rgba(255,255,255,0.5);
		font-size: 60%;
		margin: auto auto auto auto;
		padding: 5% 15% 4.5% 15%;
		text-transform: uppercase;
		font-weight: 700;
		color: #fff;
		transition: 0.75s;
	}
	.tree img {
		width: 50%;
		padding: 20% 25% 0% 25%;
	}
	
	.wp-content {
		width: 80%;
		padding: 8% 0% 7.5% 0%;
	}
}