/* *********************************************************************************************************************
	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;
	padding: 0 0 0 1%; /* THAT'S THE NAME ;) */
}

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

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

.onerow {
	clear: both;
	/* padding: 0 10px;
 */
}

/* *********************************************************************************************************************
 * Common columns definitions
 */
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
	float: left;
	margin: 0 3% 0 0;
}

.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;
}

.col1 { width: 5.5%; }
.col2 { width: 14%; }
.col3 { width: 22.5%; }
.col4 { width: 31%; }
.col5 { width: 39.5%; }
.col6 { width: 48%; }
.col7 { width: 56.5%; }
.col8 { width: 65%; }
.col9 { width: 73.5%; }
.col10 { width: 82%; }
.col11 { width: 17%; }
/* .col11 { width: 90.5%; } */
.col12 { width: 99%; margin: 0; }

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

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

	.onepcssgrid-1000 .onerow {
		padding: 0;
	}
}

/* *********************************************************************************************************************
 * Small devices
 */

@media all and (max-width: 768px) {
	.onerow {
	    width: 94%;
	    padding: 0 1%;
	}

	.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11 {
		/* float: none; */
		width: 99%;
	}
	
	.logokep {
		display: none;
	}
	#fofej {
		background: none;
	}
	#header {
		height: 50px;
	}
	.menuitemtop {
		padding-bottom: 10px;
		padding-top: 10px;
		margin-bottom: 3px;
		
	}

}

.menuitemtop {
	font-weight: bold;
	font-size: 15px;
	display: inline;
	background: #F5E725;
	text-align: center;
}
#fofej ul {
	margin: 0 auto;
	padding: 0 0 0 1%;
}

.buttons img {
	margin: 0 auto;
	padding: 0 0 0 1%;
	max-width: 184px;
}

.embed-container { 
	position: relative; 
	padding-bottom: 56.25%; 
	height: 0; 
	overflow: hidden; 
	max-width: 100%; 
} 
.embed-container iframe, .embed-container object, .embed-container embed { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
}

/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}


/* NAV */

/* Basic Styles */
body {
    /* background-color: #ece8e5; */
}
nav {
    /* height: 40px; */
    width: 100%;
    /* background: #455868; */
    /* font-size: 11pt;  */
    /* font-weight: bold;  */
    position: relative;
    /* border-bottom: 2px solid #283744; */
}
nav ul {
    padding: 0;
    margin: 0 auto;
    margin-top: 10px;
    /* width: 600px;  */
    /* height: 40px; */
}
nav li {
    display: inline;
    float: left;
}
nav a {
    /* color: #fff;*/
    display: inline-block;
    /* width: 100px; */
    /* text-align: center; */
    /* text-decoration: none; */
    /* line-height: 40px; */
    /* text-shadow: 1px 1px 0px #283744; */
}
nav li a {
    /* border-right: 1px solid #576979; */
    /* box-sizing:border-box; */
    /* -moz-box-sizing:border-box; */
    /* -webkit-box-sizing:border-box; */
}
nav li:last-child a {
    /* border-right: 0; */
}
nav a:hover, nav a:active {
    /* background-color: #8c99a4; */
}
nav a#pull {
    display: none;
}

/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
    nav { 
	height: auto;
    }
    nav ul {
	width: 100%;
	display: block;
	height: auto;
    }
    nav li {
	width: 50%;
	float: left;
	position: relative;
    }
    nav li a {
	/* border-bottom: 1px solid #576979; */
	/* border-right: 1px solid #576979; */
    }
    nav a {
	/* text-align: left; */
	width: 100%;
	/* text-indent: 25px;  */
    }
}

/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
    nav {
	/* border-bottom: 0; */
    }
    nav ul {
	display: none;
	height: auto;
    }
    nav a#pull {
	display: block;
	background-color: #80B7BC;
	width: 100%;
	position: relative;
	height: 36px;
	font-weight: bold;
	padding-top: 5px;
	font-size: 19pt;
	margin-top: 10px;
    }
    nav a#pull:after {
	content:"";
	background: url('nav-icon.png') no-repeat;
	width: 30px;
	height: 30px;
	display: inline-block;
	position: absolute;
	right: 15px;
	top: 10px;
    }
}

/*Smartphone*/
@media only screen and (max-width : 320px) {
    nav li {
	display: block;
	float: none;
	width: 100%;
    }
    nav li a {
	/* border-bottom: 1px solid #576979; */
    }
}