@import url("reset.css"); /* important */

body   {
	margin:0px;
	padding:0px; 
	font-family: "Helvetica Neue", "Arial", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;  
    cursor: default;
	color: #131313;
	background: url('../images/bg-base.png') #eaeaea repeat-x left top;
}

#open-box { 
    margin: 10px auto 0px 0px;
    width: 940px;
    float: left;
	position:relative;
}
#open-box .top-section{ 
    background: url('../images/top.png') no-repeat center 0px;
    margin: 0px auto;
    display:block;
    float: left;
    width: 940px;
    height:20px;
}
#open-box .middle-section{ 
    background: url('../images/middle.png') repeat-y center 0px;
    margin: 0px auto;
    display:block;
    float: left;
    width: 940px;
    min-height:20px;
}
#open-box .bottom-section{ 
    background: url('../images/bottom.png') no-repeat center 0px;
    margin: 0px auto;
    display:block;
    float: left;
    width: 940px;
    height:35px;
}
#open-box .middle-section p{ 
    font-size: 12px;
    color: #ff0000;
    margin: 10px auto 10px 20px;
    display:block;
    float: left;
    width: 900px;
}
#open-box .close-icon{ 
    width: 14px;
    height: 14px;
    position: absolute;
    top: 10px;
    right: 10px;
    color: #2D98C2;
    font-size: 12px;
    line-height: 14px;
    text-transform: uppercase;
}
#open-box .close-icon a{ 
    text-decoration: none;
    color: #2D98C2;
}



#root{
	width: 940px;
	height: auto;
	margin: 0px auto;
	display: block;
}
#overlay{
	width: 940px;
	height: auto;
	display: block;
	margin: 0px auto;
	float: left;
}
#header{
	width: 940px;
	height: 90px;
	display: block;
	margin: 0px auto;
	float: left;
}
#header .logo{
	width: 72px;
	height: 54px;
	display: block;
	margin: 18px auto 0px 18px;
	float: left;
	border-right: 1px solid #ddd;
}
#header .logo a{
	width: 54px;
	height: 54px;
	display: block;
	background: url('../images/logo-icon.png') no-repeat;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
}
#header .logo a:hover{
    -webkit-transition: all 0.5s cubic-bezier(0.42, 0, 0.58, 1) 0;
    -moz-transition: all 0.5s cubic-bezier(0.42, 0, 0.58, 1) 0; 
    -ms-transition: all 0.5s cubic-bezier(0.42, 0, 0.58, 1) 0;
    -o-transition: all 0.5s cubic-bezier(0.42, 0, 0.58, 1) 0;
    transition: all 0.5s cubic-bezier(0.42, 0, 0.58, 1) 0;
    transform: rotate(360deg); 
    -o-transform: rotate(360deg); 
    -ms-transform: rotate(360deg); 
    -moz-transform: rotate(360deg); 
    -webkit-transform: rotate(360deg); 
    }
#header h1{
	width: 180px;
	height: 50px;
	display: block;
	margin: 23px auto 0px 18px;
	font-size: 11px;
	float: left;
	color: #7C808A;
	text-transform: uppercase;
	font-weight: 300;
	border-right: 1px solid #ddd;
}
#header h1 span{
	color: #4E4E4E;
}
#header h2{
	width: 265px;
	height: 38px;
	display: block;
	margin: 30px auto 0px 18px;
	font-size: 14px;
	float: left;
	color: #4E4E4E;
	text-transform: uppercase;
	font-weight: 300;
}
#header h2 span{
	color: #111;
}
#header h1 span strong, #header h2 span strong{
	font-weight: 300;
}
#header .header-contact{
	width: auto;
	height: auto;
	display: block;
	margin: 23px 20px 0px auto;
	float: right;
}
#header .header-contact a{
	color: #131313;
	text-decoration: none;
}
#header .header-contact .box1{
	width: 130px;
	height: 40px;
	display: block;
	margin: 0px auto 0px auto;
	float: left;
	font-size:12px;
	line-height: 20px;
	background: url("../images/icon-con.png") no-repeat left center;
	padding-left: 25px; 
}
#header .header-contact .box1 span.mob{
	width: 125px;
	height: 14px;
	display: block;
	margin: 3px auto 0px auto;
}
#header .header-contact .box1 span.mail{
	width: 125px;
	height: 14px;
	display: block;
	margin: 2px auto 0px auto;
}
#header .header-contact .box2{
	width: 130px;
	height: 40px;
	display: none;/* block */
	margin: 0px auto 0px auto;
	float: left;
	font-size:12px;
	line-height: 20px;
	background: url("../images/icon-shop.png") no-repeat left center;
	padding-left: 34px; 
}
#header .header-contact .box2 span.open{
	width: 125px;
	height: 14px;
	display: block;
	margin: 3px auto 0px auto;
}
#header .header-contact .box2 span.pause{
	width: 125px;
	height: 14px;
	display: block;
	margin: 2px auto 0px auto;
}
/* end header */

#nav{
	width: 940px;
	height: 40px;
	display: block;
	margin: 0px auto;
	float: left;
	background: url('../images/bg-nav.png') repeat-x;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom:1px solid #f1f1F1; 
}
#nav ul.nav{
	float: left;
	margin-left: 20px;
}
#nav ul.nav li{
	float: left;
	height: 40px;
	line-height: 40px;
	font-size: 11px;
	text-transform: uppercase;
	text-shadow: 1px 1px 0 #c0c0c0;
	font-family: Verdana;
}
#nav ul.nav li a{
	float: left;
	color: #222;
	text-decoration: none;
	-webkit-transition:color 0.24s ease-in;  
    -moz-transition:color 0.24s ease-in;  
    -o-transition:color 0.24s ease-in;  
    transition:color 0.24s ease-in; 
}
#nav ul.nav li a:hover, #nav ul.nav li a.active{
	color: #595959;
    text-decoration: none;
}
#nav ul.nav li span.section-nav{
	float: left;
	color: #fff;
	text-decoration: none;
	margin: 0px 13px;
	height: 40px;
	width: 1px;
	background: #c1c1C1;
    border-right: 1px solid #777;
}
#nav .social-media{
	width:auto;
	height: 40px;
	display: block;
	margin: 0px 5px 0px auto;
	float: right;
}
#nav .social-media .fb-like{
	width:auto;
	height: 20px;
	display: block;
	margin: 10px 8px 0px auto;
	float: left;
}
#nav .social-media a.facebook{
	width:30px;
	height: 30px;
	display: block;
	margin: 5px 5px 0px auto;
	float: left;
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
	background: url("../images/icon-facebook.png") no-repeat;
}
#nav .social-media a.googleplus{
	width:30px;
	height: 30px;
	display: block;
	margin: 5px auto 0px auto;
	float: left;
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
	background: url("../images/icon-google.png") no-repeat;
}
#nav .social-media .anime{
    -webkit-transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1) 0;
    -moz-transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1) 0; 
    -ms-transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1) 0;
    -o-transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1) 0;
    transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1) 0;
}
#nav .social-media .anime:hover{
	filter: alpha(opacity=35);
    -moz-opacity: 0.35;
    -khtml-opacity: 0.35;
    opacity: 0.35;
    -webkit-transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1) 0;
    -moz-transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1) 0; 
    -ms-transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1) 0;
    -o-transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1) 0;
    transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1) 0;
}
/* end nav */


#banner{
	width: 940px;
	height: auto;
	display: block;
	margin: 0px auto;
	float: left;
	position: relative;
}
#shadow-bottom-banner { 
	background: url("../images/shadow.png") 50% 0% no-repeat transparent;
	display: block;
	float: left;
	height: 22px;
	margin: 0px auto;
	width: 940px;
}
#news{
	width: 940px;
	min-height: 30px;
	display: block;
	margin: 3px auto 10px auto;
	float: left;
	background: url("../images/line-news.png") center top no-repeat transparent;
}
#news h2{
	width: 900px;
	height: 15px;
	display: block;
	margin: 10px auto 0px 18px;
	font-size: 13px;
	float: left;
	color: #4E4E4E;
	text-transform: uppercase;
	font-weight: 300;
}
#news p{
	width: 900px;
	display: block;
	margin: 10px auto 10px 18px;
	font-size: 12px;
	float: left;
}
#overlay-box{
	width: 940px;
	min-height:160px;
	display: block;
	margin: 0px auto 12px auto;
	float: left;
	background: white;
}
#overlay-box img{
	display: block;
	margin: 0px auto;
	border: none;
	color: white;
}
.preload-zoom { 
    -webkit-transition: all .3s ease-out; 
    -moz-transition: all .3s ease-out; 
    -o-transition: all .3s ease-out; 
    transition: all .3s ease-out;
}
.preload-zoom:hover { 
    -moz-transform: scale(1.4);
    -webkit-transform: scale(1.4);
    -o-transform: scale(1.4);
    transform: scale(1.4);
    -ms-transform: scale(1.4);
    filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
    M11=1.4, M12=-0, M21=0, M22=1.4);
    }
#overlay-box .box{
	width: 286px;
	height: 260px;
	display: block;
	margin: 20px auto 0px 20px;
	float: left;
	overflow: hidden;
}
#overlay-box .box-img{
	width: 286px;
	height: 100px;
	display: block;
	margin: 0px auto;
	float: left;
	overflow: hidden;
}
#overlay-box .box-img a{
	color: #fff;
	text-decoration: none;
	border: none;
}
#overlay-box .box-img a img{
	width: 286px;
	height: 100px;
	display: block;
	margin: 0px;
	border:none;
	color: #fff;
}
#overlay-box .box h3{
	width: 286px;
	height: 55px;
	display: block;
	margin: 10px auto 0px 0px;
	font-size: 12px;
	float: left;
	color: #333;
	text-transform: uppercase;
	font-weight: 300;
	border-bottom: 3px solid #2d98c2;
}
#overlay-box .box h3 a{
	text-decoration: none;
	color: #2d98c2;
}

#overlay-box .box h3 strong{
	font-weight: 300;
}
#overlay-box .box p{
	width: 286px;
	display: block;
	margin: 10px auto 0px 0px;
	font-size: 12px;
	float: left;
	color: #4E4E4E;
}
#footer{
	width: 940px;
	height:90px;
	display: block;
	margin: 0px auto;
	float: left;
}
#footer .project{
	width: 400px;
	display: block;
	margin: 0px auto 0px 18px;
	font-size: 11px;
	float: left;
	color: #7C808A;
}
#footer .project a.signature{
	width: 167px;
	height:14px;
	display: inline-block;
	text-decoration: none;
	color: #4E4E4E;
	margin-top:4px;
	background: url("../images/signature_jozefkucera.png") 100% 60% no-repeat;
}
#footer .project span.sponzor{
	width: 380px;
	display: block;
	margin: 0px auto 6px 0px;
	font-size: 11px;
	color: #686868;
}
#footer .project span.sponzor small{
	font-size: 11px;
}
#footer .project a{
	text-decoration: none;
	color: #4E4E4E;
}
#footer .project a span{
	color: #e904a0;
}
#footer .partners{
	width: auto;
	display: block;
	margin: 0px 13px 0px auto;
	font-size: 11px;
	float: right;
}
#footer .partners span.part1{
	width: 215px;
	height: 30px;
	display: block;
	margin: 0px auto;
	float: left;
	background: url("../images/icon-microsoft.png") no-repeat;
}
#footer .partners span.part2{
	width: 180px;
	height: 28px;
	display: block;
	margin: 0px auto;
	float: left;
	background: url("../images/icon-eset.png") no-repeat;
}