@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin,latin-ext);

@font-face {
    font-family: 'exodemibolditalic';
    src: url('fonts/exo-semibolditalic-webfont.eot');
    src: url('fonts/exo-semibolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/exo-semibolditalic-webfont.woff2') format('woff2'),
         url('fonts/exo-semibolditalic-webfont.woff') format('woff'),
         url('fonts/exo-semibolditalic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'exobolditalic';
    src: url('fonts/exo-bolditalic-webfont.eot');
    src: url('fonts/exo-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/exo-bolditalic-webfont.woff2') format('woff2'),
         url('fonts/exo-bolditalic-webfont.woff') format('woff'),
         url('fonts/exo-bolditalic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'exodemibold';
    src: url('fonts/exo-semibold-webfont.eot');
    src: url('fonts/exo-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/exo-semibold-webfont.woff2') format('woff2'),
         url('fonts/exo-semibold-webfont.woff') format('woff'),
         url('fonts/exo-semibold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'exomediumitalic';
    src: url('fonts/exo-mediumitalic-webfont.eot');
    src: url('fonts/exo-mediumitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/exo-mediumitalic-webfont.woff2') format('woff2'),
         url('fonts/exo-mediumitalic-webfont.woff') format('woff'),
         url('fonts/exo-mediumitalic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'exoitalic';
    src: url('fonts/exo-italic-webfont.eot');
    src: url('fonts/exo-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/exo-italic-webfont.woff2') format('woff2'),
         url('fonts/exo-italic-webfont.woff') format('woff'),
         url('fonts/exo-italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'exomedium';
    src: url('fonts/exo-medium-webfont.eot');
    src: url('fonts/exo-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/exo-medium-webfont.woff2') format('woff2'),
         url('fonts/exo-medium-webfont.woff') format('woff'),
         url('fonts/exo-medium-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'exolight';
    src: url('fonts/exo-light-webfont.eot');
    src: url('fonts/exo-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/exo-light-webfont.woff2') format('woff2'),
         url('fonts/exo-light-webfont.woff') format('woff'),
         url('fonts/exo-light-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'exoregular';
    src: url('fonts/exo-regular-webfont.eot');
    src: url('fonts/exo-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/exo-regular-webfont.woff2') format('woff2'),
         url('fonts/exo-regular-webfont.woff') format('woff'),
         url('fonts/exo-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'exobold';
    src: url('fonts/exo-bold-webfont.eot');
    src: url('fonts/exo-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/exo-bold-webfont.woff2') format('woff2'),
         url('fonts/exo-bold-webfont.woff') format('woff'),
         url('fonts/exo-bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'exolightitalic';
    src: url('fonts/exo-lightitalic-webfont.eot');
    src: url('fonts/exo-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/exo-lightitalic-webfont.woff2') format('woff2'),
         url('fonts/exo-lightitalic-webfont.woff') format('woff'),
         url('fonts/exo-lightitalic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}


html, body { background-image: url(../images/bg.jpg); background-color: #dadada;  background-position: center top; background-repeat: no-repeat;  height:100%; font-family: 'Open Sans'; margin:0px; padding:0; font-size:14px; color: #4f4f4f; }

/* SYSTEM */
table { border-collapse:collapse;}
table td {padding:0; }
a img { border:none } 

a { outline:none; color: #6f6f6f; text-decoration:none; webkit-transition:all .2s ease; -moz-transition:all .2s ease; -o-transition:all .2s ease; -ms-transition:all .2s ease; transition:all .2s ease;}
a:hover {color: #df0000; text-decoration:none; webkit-transition:all .2s ease; -moz-transition:all .2s ease; -o-transition:all .2s ease; -ms-transition:all .2s ease; transition:all .2s ease;}

hr {background-color: #6f6f6f; border: 0; height: 1px}



.zdjecie {text-align:center;}
.zdjecie img{margin: 10px; padding: 4px; border: solid 3px #6f6f6f; webkit-transition:all .2s ease; -moz-transition:all .2s ease; -o-transition:all .2s ease; -ms-transition:all .2s ease; transition:all .2s ease;}
.zdjecie img:hover{border: solid 3px #df0000; webkit-transition:all .2s ease; -moz-transition:all .2s ease; -o-transition:all .2s ease; -ms-transition:all .2s ease; transition:all .2s ease;}

.zdjecie iframe {padding: 4px; border: solid 3px #df0000; border-radius: 3px; }

a img { border:none ; } 

h1 {font-family: 'exomedium', sans-serif; color: #df0000; font-size: 24px; font-weight: normal; display: inline}
h2 {font-family: 'exomedium', sans-serif; color: #df0000; font-size: 18px; font-weight: normal; display: inline} 

h4 {font-family: 'exomedium', sans-serif; color: #df0000; font-size: 14px; font-weight: normal; display: inline}

.clear {clear: both}
/* /SYSTEM */



#main{min-height:100%; width: 100%; position:relative; overflow: hidden; min-width: 1100px}

#header { width: 100%; padding-top: 30px; width: 990px; margin: 0 auto }
#logo {float: left}
#top_text {float: right; font-family: 'exodemibolditalic'; color: #ffffff; font-size: 20px; margin-top: 10px}
.top_text2 {color: #6f6f6f}
.top_text3 {display: block; color: #df0000; font-size: 30px; margin-left: 140px}



#body {position: relative; width: 990px; margin: 0 auto; padding-bottom: 100px; margin-top: 0px; z-index: 2; }
#menu {margin-top: 70px; margin-left: 50px;}
.menu_button {display: block; width: 300px; height: 65px; background: #fff; margin-bottom: 10px; -moz-box-shadow: 0px 0px 2px 2px #C5C5C5; -webkit-box-shadow: 0px 0px 2px 2px #C5C5C5; box-shadow: 1px 1px 2px 1px #C5C5C5;}
.menu_button div {width: 10px; height: 100%; background: #df0000; float: left; webkit-transition:all .2s ease; -moz-transition:all .2s ease; -o-transition:all .2s ease; -ms-transition:all .2s ease; transition:all .2s ease;}
.menu_button span {color: #6f6f6f; font-family: 'exomedium'; font-size: 22px; display: block; height: 37px; margin-left: 10px; padding-top: 23px; padding-left: 10px; webkit-transition:all .2s ease; -moz-transition:all .2s ease; -o-transition:all .2s ease; -ms-transition:all .2s ease; transition:all .2s ease; }
.menu_button:hover {background: #df0000;}
.menu_button:hover div {background: #fff; webkit-transition:all .2s ease; -moz-transition:all .2s ease; -o-transition:all .2s ease; -ms-transition:all .2s ease; transition:all .2s ease;}
.menu_button:hover span {color: #fff; webkit-transition:all .2s ease; -moz-transition:all .2s ease; -o-transition:all .2s ease; -ms-transition:all .2s ease; transition:all .2s ease;}

.menu_button#active div {background: #fff;}
.menu_button#active span {color: #fff;}
.menu_button#active{background: #df0000;}

#baner { position: absolute; height: 70px; width: 60%;  right: 0; margin-top: 85px; z-index: 1; }

#index_content {margin-top: 50px}
.index_content_block {background: url(../images/img_04.png); width:491px; height: 381px; float: left; -moz-box-shadow: 0px 0px 2px 2px #C5C5C5; -webkit-box-shadow: 0px 0px 2px 2px #C5C5C5; box-shadow: 1px 1px 2px 1px #C5C5C5;}
.index_content_block h2 {font-family: 'exomedium'; background: #df0000; color:#fff; padding: 5px; padding-bottom: 2px; font-size: 30px; position: relative; top: 20px; left: 15px}
.index_content_block div {padding: 15px; margin-top: 20px}
.index_content_block:first-of-type {margin-right: 8px}

#page_content {margin-top: 50px; width: 990px; min-height: 381px; position: relative; -moz-box-shadow: 0px 0px 2px 2px #C5C5C5; -webkit-box-shadow: 0px 0px 2px 2px #C5C5C5; box-shadow: 1px 1px 2px 1px #C5C5C5;}
#page_content h2 {font-family: 'exomedium'; background: #df0000; color:#fff; padding: 5px; padding-bottom: 2px; font-size: 30px; position: relative; top: 20px; left: 15px; position: relative; z-index: 2; text-transform: uppercase}
#page_content div {padding: 15px; margin-top: 20px; position: relative; z-index: 2}
.page_content_top_img {position: absolute; z-index: 1}
.page_content_bottom_img {position: absolute; bottom: 0; z-index: 1}

#footer{position:absolute; bottom:0; width:100%; height: 60px; border-top: solid 0px #005091; font-family: 'crimson_textroman'; z-index: 3; background-image:url(../images/img_06.jpg); background-position:50% 50%; }


#footer_sign {margin:0 auto; margin-top: 10px;  width: 990px;}

#footer_text {float: left; color: #979797;  font-size: 11px; text-shadow: #FFF 1px 1px 1px; margin-top:15px; position: relative;  font-family: 'open sans'; font-size: 10px}
#footer_text2 {color: #df0000}
#footer_logo {float:right; text-align:center; padding-top: 0px; color: #979797; height: 40px; width: 70px;  font-size: 11px; position: relative;
 font-family: 'open sans'; font-size: 10px}
#footer_logo span {text-shadow: #FFF 1px 1px 1px;  }
.komsys_logo_grey {position: absolute; margin-top: 5px }
.komsys_logo_color {position: absolute; height: 0px; width: 0; overflow: hidden; webkit-transition:all .3s ease; -moz-transition:all .3s ease; -o-transition:all .3s ease; -ms-transition:all .3s ease; transition:all .3s ease; margin-top: 5px }
#footer_logo div:hover .komsys_logo_color {height: 25px; width: 70px; webkit-transition:all .3s ease; -moz-transition:all .3s ease; -o-transition:all .3s ease; -ms-transition:all .3s ease; transition:all .3s ease}

#footer_content {width: 1000px; margin: 0 auto}

/* Facebook Panel */

.facebook_left {
    width: 245px;
    height: 389px;
    position: fixed;
	left: -245px;
	top: 280px;
	z-index: 99997;
}
.facebook_right {
    width: 245px;
    height: 389px;
    position: fixed;
	right: -245px;
	top: 220px;
	z-index: 99997;
}
.facebook_left #facebook_icon {
	float: right;
	height: 60px;
    width: 60px;
	right: -60px;
    background: url("fb.png") no-repeat;
	cursor: pointer;
	position: relative;
    z-index: 99998;
}
.facebook_right #facebook_icon {
	float: left;
	height: 60px;
    width: 60px;
	left: -34px;
    background: url("fb.png") no-repeat;
	cursor: pointer;
	position: relative;
    z-index: 99998;
}
.facebook_right .facebook_box {
    background-color: #FFFFFF;
	border: 4px solid #3B5998;
    float: right;
	top: -60px;
	position: relative;
    z-index: 99999;
}
.facebook_left .facebook_box {
    background-color: #FFFFFF;
	border: 4px solid #3B5998;
    float: left;
	top: -60px;
	position: relative;
    z-index: 99999;
}