/* *********************************************************************************************************************
	One% CSS Grid - 12 Columns Fluid CSS Grid System

	Why One% ? Let’s count ...
		we have 12 columns (magic number divided by 2, 3, 4, 6)

		for 12 columns we need 11 margins

		so if we count margin 3%, then 3% * 11 margins = 33%

		and if we count width of 1 column 5.5%, than 5.5% * 12 columns = 66%

		in the end we have 33% + 66% = 99% aaand ???

		1% is still here so that's the name - One%

	2 starting options ? Let’s count a bit more ...
		1200px - perfectly fits 1280 screens
			12 columns
			margin 3% / 36px (full-width)
			col1 5.5% / 66px (full-width)

		1000px - perfectly fits 1024 screens
			12 columns
			margin 3% / 30px (full-width)
			col1 5.5% / 55px (full-width)
*/





/* *********************************************************************************************************************
 * Main container for all
 */
.onepcssgrid-1000, .onepcssgrid-1200 {
	margin: 0 auto;
	font-family: 'Open Sans', Tahoma, sans-serif;
	padding: 0 0 0 0%; /* THAT'S THE NAME ;) */
}

.onepcssgrid-1200 {
	max-width: 1820px;
}

.onepcssgrid-1000 {
	max-width: 1820px;
}

.onerow {
	clear: both;
	padding: 0 0px;
	margin:0px;
}


	#cartContents {
		margin: 34px 0px 8px 0px;
		width:265px;
		text-align:left;
		border:2px solid #d2d3d4;
		position:absolute;
		top: 120px;
		right: 150px;
		z-index:3333;
		background-color:#ffffff;
		min-height:230px;
		
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
	}	
	

div#cartItemAdded {
	margin: 0px 0px 8px 0px;
	width:265px;
	text-align:left;
	border:4px solid #8ca449;
	border-width:0px 4px 4px 4px;
	position:fixed;
	top: 0px;
	right: 40px;
	z-index:3333;
	background-color:#ffffff;
	min-height:230px;
	
	-moz-border-radius: 0px 0px 10px 10px;
	-webkit-border-radius: 0px 0px 10px 10px;
	border-radius: 0px 0px 10px 10px;
}

fieldset {
    display: block;
    -webkit-margin-start: 2px;
    -webkit-margin-end: 2px;
    -webkit-padding-before: 0.35em;
    -webkit-padding-start: 0.35em;
    -webkit-padding-end: 0.35em;
    -webkit-padding-after: 0.325em;
    border: 0px;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    min-width: -webkit-min-content;
}



/* *********************************************************************************************************************
 * Common columns definitions
 */
.col1, .col2, .col3, .col3h, .col3a, .col4, .col5, .col5a, .col6, .col7, .col7a, .col8, 
.col9, .col9a, .col10, .col11 {
	float: left;
	margin: 0 3% 0 0;
			margin-bottom: 5px;
			padding: 0 0 10px 0;
}


.col12 {
	float: left;
	margin: 0 0 0 0;
			text-align: left;
}

.col1.last, .col2.last, .col3.last, .col4.last, .col5.last, .col6.last, .col7.last, .col8.last, .col9.last, .col10.last, .col11.last, .col12 {
	margin: 0;
}

.colConfirm { width: 65%; margin: 0 25% 0 5%;padding:0; }

.col1 { width: 5.5%; }
.col2 { width: 13.6%; }
.col3 { width: 22.5%;margin: 0 1.25% 0 1.25%;margin-bottom: 5px; }
.col3a { width: 23%;margin: 0 2% 0 0%; }
.col3h { width: 35%; margin: 0px;margin-bottom: 4px;  }
.col4 { width: 31%;margin: 0 1.15% 0 1.15%;margin-bottom: 5px; }
.col5a { width: 41%;margin: 0 2% 0 0%; }
.col5 { width: 41%;margin: 0 0% 0 1.5%; }
.col6 { width: 48%;margin: 0 1% 0 1%;margin-bottom: 10px; }
.col7 { width: 53.5%; }
.col7a { width:57%;margin:0px; }
.col8 { width: 65%; }
.col9 { width: 65%;margin: 0 0% 0 0%; }
.col9a { width: 75%;margin:0; }
.col10 { width: 82%; }
.col11 { width: 90.5%; }
.col12 { width: 100%; margin: 0;padding:0; }

.col1 img, .col2 img, .col3 img, .col3a img, .col4 img, .col5a img, .col5 img, .col6 img, .col7a img, .col7 img, .col8 img, .col9 img, .col9a img, .col10 img, .col11 img, .col12 img {
	width: 100%;
	height: auto;
	display: block;
}


.col3.logo { width: 22.5%;margin: 0 0 0 3%;padding:0; }
.col9.header { width: 72%;margin: 0 1% 0 0;padding:0; }

	.nav-big {
		height:35px;
		margin-bottom:0px;
		margin-top:0px;
		padding:8px 0px 0px 0px;
		display:block;
		text-align:center;
		border:1px solid #ffffff;
		border-width:1px 0px 1px 0px;
		}
		
	a.nav{
	 	font-size: 115%;
	  	letter-spacing:normal;
	  	padding:0% 3% 1% 3%;
		color: #424143;
		font-weight:normal;
		background-color:#d2d3d4;
		margin:0px;
		text-decoration:none;
		border:2px solid #ffffff;
		border-width:0px 2px 0px 0px;
	}
	
	a.nav:hover {
		text-decoration:none;
		color:#ffffff;
		background-color:#659746;
	}



	.col12.footer {
		margin-bottom:0px;
		padding:10px 0px 10px 0px;
		background-color:#412507;
		text-decoration:none;
		color:#d9d3cd;
		font-size:12px;
		font-weight:normal;
		font-family: Arial, sans-serif;
		text-align:center;
	}
		

	
/* *********************************************************************************************************************
 * Disable padding left/right 10px if I'm 1024 or gibber - correct percentage math
 */
@media all and (min-width: 769px) {
	.onepcssgrid-1000 {
		max-width: 1820px;
	}

	.onepcssgrid-1000 .onerow {
		padding: 0;
	}
	
	.col12.header {
		height:84px;
		margin-bottom:0px;
		padding:0px;
	}
	
	.col12.header-search {
		height:250px;
		margin-bottom:0px;
		padding:0px;
	}
	
	.col3.logo { height:125px; }
	.col9.header { height:125px; }
	
	.col12.nav {
		height:35px;
		margin-bottom:0px;
		margin-top:0px;
		padding:0px;
	}

	.home-search {
		width:100%;
		text-align:right;
		height:100px;
		margin-top:0px;
		padding:0px;
		background-color:#ffffff;
		overflow:hidden;
		}
			
	.header-search {
		width:100%;
		text-align:right;
		height:128px;
		margin-top:0px;
		padding:0px;
		background-color:#cbce85;
		overflow:hidden;
		}
		
	.header-status {
		width:100%;
		text-align:right;
		height:130px;
		margin-top:0px;
		padding:0px;
		background-color:#ffffff;
		overflow:hidden;
		}
									
	.nav-search {
		height:45px;
		margin-bottom:0px;
		margin-top:0px;
		padding:0px;
		background-color:#d2d3d4;
		display:none;
		overflow:hidden;
		}
		
	.nav-menu {
		height:45px;
		margin-bottom:0px;
		margin-top:0px;
		padding:0px;
		background-color:#fff;
		display:none;
		}
				


	.header-big {
		display:block;
		height:84px;
		margin-bottom:0px;
		margin-top:0px;
		padding:0px;
		background-color:#dedeca;
		}
		
	img.logo {
		  height: 329px;
		  left: 22px;
		  margin: 0;
		  position: absolute;
		  top: 0;
		  width: 323px;
		  z-index:9999;
		}

	.header-tab {
		display:none;
		height:248px;
		margin-bottom:0px;
		margin-top:0px;
		padding:0px;
		}
				
	.header-mobile {
		display:none;
		height:227px;
		margin-bottom:0px;
		margin-top:0px;
		padding:0px;
		}
			
	.footer-big {
		height:245px;
		margin-bottom:0px;
		margin-top:0px;
		padding:0px;
		display:block;
		}
		
	.footer-mobile {
		height:245px;
		margin-bottom:0px;
		margin-top:0px;
		padding:0px;
		display:none;
		}
		
	.desktop-header-search2 {
		width:250px;
		float:right;
		display:block;
		text-align:left;
		margin-top:15px;
		margin-right:10px;
		font-size:85%;
		font-style:italic;
		color:#413d8b;
		}
		
}


@media (min-width: 986px) and (max-width: 1100px)
{
	img.logo {
		  height: 180px;
		  left: 22px;
		  margin: 0;
		  position: absolute;
		  top: 0;
		  width: 177px;
		  z-index:9999;
		}
		
	.secondLevelImportance {
		float:right;
	}
	
}

@media (min-width: 768px) and (max-width: 985px)
{
	img.logo {
		  height: 180px;
		  left: 22px;
		  margin: 0;
		  position: absolute;
		  top: 0;
		  width: 177px;
		  z-index:9999;
		}
		
	.secondLevelImportance {
		float:right;
	}
	
	.TB_Wrapper {
		height: 500px;
	}
}


@media (min-width: 769px) and (max-width: 922px)
{
	.header-big {
		display:none;
		height:84px;
		margin-bottom:0px;
		margin-top:0px;
		padding:0px;
		background-color:#dedeca;
		}
		

	.header-tab {
		display:block;
		height:248px;
		margin-bottom:0px;
		margin-top:0px;
		padding:0px;
		}
}


/* Landscape phone to portrait tablet */
@media (min-width: 481px) and (max-width: 768px)
{
	.onepcssgrid-1000 {
		max-width: 980px;
	}
	
	.secondLevelImportance {
		display:none;
		float:right;
		}

	.onepcssgrid-1000 .onerow {
		padding: 0;
	}
	
	.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
		float: left;
		margin: 0 1% 0 1%;
		margin-bottom: 10px;
		padding: 1px 0;
	}


.col1 { width: 5.5%; }
.col2 { width: 14%;   }
.col3 { width: 30.5%; margin: 0 1.25% 0 1.25%;margin-bottom: 4px;  }
.col3h { width: 35%; margin: 0px;margin-bottom: 4px;  }
.col4 { width: 48%;margin: 0 0.8% 0 0.8%;margin-bottom: 4px;  }
.col5 { width: 43.5%;margin: 0 0% 0 2%; }
.col6 { width: 48%; margin: 0 0.8% 0 0.8%;margin-bottom: 10px;  }
.col7 { width: 53%;margin: 0 1% 0 0%; }
.col9 { width: 65%;margin: 0 0% 0 0%; }
.col12 { width: 100%; margin: 0;padding:0;  }	

	.desktop-header-search2 {
		width:250px;
		float:right;
		display:none;
		text-align:right;
		margin-top:15px;
		margin-right:10px;
		}
	.col12.header {
		height:84px;
		margin-bottom:0px;
		margin-top:0px;
		padding:0px;
		font-size:85%;
	}
	
	.col3.logo { height:108px; }
	.col9.header { height:108px; }
	
	.col12.nav {
		height:35px;
		margin-bottom:0px;
		margin-top:0px;
		padding:0px;
	}

	a.nav{
		padding:0% 1.85% 1.65% 1.75%;
		font-size: 105%;
	}	
	
	a.navSpecial {
		padding:0% 1.85% 1.65% 1.75%;
		font-size: 105%;
	}	
			
	.nav-search {
		height:45px;
		margin-bottom:0px;
		margin-top:0px;
		padding:0px;
		background-color:#f9d8cb;
		display:none;
		}
		
	.nav-menu {
		height:45px;
		margin-bottom:0px;
		margin-top:0px;
		padding:0px;
		background-color:#fff;
		display:none;
		}
		
		
	.col12.header {
		margin-bottom:0px;
		padding:0px;
	}
	
	.colConfirm { width: 80%; margin: 0 15% 0 5%;padding:0; }


		
	.header-big {
		display:none;
		height:163px;
		margin-bottom:0px;
		margin-top:0px;
		padding:0px;
		}
		
	.header-tab {
		display:block;
		height:84px;
		margin-bottom:0px;
		margin-top:0px;
		padding:0px;
		background-color:#dedeca;
		}
				
	.header-mobile {
		display:none;
		height:227px;
		margin-bottom:0px;
		margin-top:0px;
		padding:0px;
		}
		
	img.logo {
		  height: 140px;
		  left: 22px;
		  margin: 0;
		  position: absolute;
		  top: 0;
		  width: 137px;
		  z-index:9999;
		}
		
	.footer-big {
		height:245px;
		margin-bottom:0px;
		margin-top:0px;
		padding:0px;
		display:block;
		}

	.footer-mobile {
		height:245px;
		margin-bottom:0px;
		margin-top:0px;
		padding:0px;
		display:none;
		}

	.TB_Wrapper {
		height: 350px;
	}
}

/* *********************************************************************************************************************
 * Small devices
 */
@media (min-width: 1px) and (max-width: 480px) {
	.onerow {
	}

	.TB_Wrapper {
		height: 150px;
	}
	
	img.logo {
		  height: 140px;
			position: absolute;
			left: 0;
			right: 0;
			margin: auto;
		  position: absolute;
		  width: 137px;
		  z-index:100;
		}
		
		
	.col1, .col2, .col4, .col3a, .col3h, .col5, .col5a, .col6, .col7, .col7a, .col8, .col9, .col9a, .col10, .col11, .col12 {
		float: none;
		width: 100%;
		margin:0px;
		padding:0px;
	}
	
	.col3 { width: 48%;margin: 0 0.75% 0 1.25%;margin-bottom: 3px;  }

	.col9 { margin: 0 1.5% 0 0%;margin-bottom: 3px;  }
	.col12.header {
		height:128px;
		margin-bottom:0px;
		padding:0px;
		overflow:hidden;
		text-align:center;
		background-color:#d3dacd;
	}
	
	.col12.nav {
		height:90px;
		margin-bottom:0px;
		margin-top:0px;
		padding:0px;
	}
	
	.nav-big {
		display:none;
		}
				
	.nav-search {
		height:59px;
		margin-bottom:0px;
		margin-top:0px;
		padding:0px;
		background-color:#f9d8cb;
		display:block;
		overflow:hidden;
		font-size:70%;
		}
		
	.nav-menu {
		height:59px;
		margin-bottom:0px;
		margin-top:0px;
		padding:0px;
		background-color:#8ca449;
		display:block;
		overflow:hidden;
		}
		

	
	.colConfirm { width: 90%; margin: 0 5% 0 5%;padding:0; }



				
	.header-big {
		display:none;
		height:125px;
		margin-bottom:0px;
		margin-top:0px;
		padding:0px;
		}
		
	.header-tab {
		display:none;
		height:108px;
		margin-bottom:0px;
		margin-top:0px;
		padding:0px;
		}
				
	.header-mobile {
		display:block;
		height:128px;
		margin-bottom:0px;
		margin-top:0px;
		padding:0px;
		}
			
	.footer-big {
		height:375px;
		margin-bottom:0px;
		margin-top:0px;
		padding:0px;
		display:none;
		}
		
	.footer-mobile {
		height:245px;
		margin-bottom:0px;
		margin-top:0px;
		padding:0px;
		display:block;
		}	

}