/* -------------------------------- 

Primary style

-------------------------------- */

@font-face {
  font-family: 'News Cycle';
  font-style: normal;
  font-weight: 400;
  src: local('News Cycle'), local('NewsCycle'), url(../font/01.woff2) format('woff2'), url(../font/02.woff) format('woff');
}




*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6em;
  font-family: 'News Cycle', sans-serif;
  color: #fff;
 background:url(../img/background.gif);
}

a {
  color: #196a74;
  text-decoration: none;
}

/* -------------------------------- 

Main Components 

-------------------------------- */
.cd-background-wrapper {
 
  position: relative;

}
.no-touch .cd-background-wrapper {
  -webkit-perspective: 4000px;
  -moz-perspective: 4000px;
  perspective: 4000px;
}
.cd-background-wrapper::before {
  /* never visible - this is used in jQuery to check the device type */
  content: 'web';
  display: none;
}
.touch .cd-background-wrapper::before {
  /* never visible - this is used in jQuery to check the device type */
  content: 'mobile';
}

.cd-floating-background {
  position: relative;
}
.cd-floating-background img {
  display: block;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* fixes a Firefox bug - images not correctly rendered*/
  background-color: rgba(255, 255, 255, 0.01);
}


.cd-floating-background p {
  display: block;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  color:#000000;
  /* fixes a Firefox bug - images not correctly rendered*/
  background-color: rgba(255, 255, 255, 0.01);
}



.cd-floating-background img:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
}
.no-touch .cd-floating-background {
  top: 0;
  left: 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
.no-touch .cd-floating-background.is-absolute {
  position: absolute;
}
.no-touch .cd-floating-background img:first-child {
  -webkit-transform: translateZ(50px);
  -moz-transform: translateZ(50px);
  -ms-transform: translateZ(50px);
  -o-transform: translateZ(50px);
  transform: translateZ(50px);
}
.no-touch .cd-floating-background img:nth-child(2) {
  -webkit-transform: translateZ(290px);
  -moz-transform: translateZ(290px);
  -ms-transform: translateZ(290px);
  -o-transform: translateZ(290px);
  transform: translateZ(290px);
}
.no-touch .cd-floating-background img:nth-child(3) {
  -webkit-transform: translateZ(400px);
  -moz-transform: translateZ(400px);
  -ms-transform: translateZ(400px);
  -o-transform: translateZ(400px);
  transform: translateZ(400px);
}



.no-touch .cd-floating-background .menu {
  -webkit-transform: translateZ(600px);
  -moz-transform: translateZ(600px);
  -ms-transform: translateZ(600px);
  -o-transform: translateZ(600px);
  transform: translateZ(600px);
}

 

.no-touch .cd-floating-background .logo {
  -webkit-transform: translateZ(400px);
  -moz-transform: translateZ(400px);
  -ms-transform: translateZ(400px);
  -o-transform: translateZ(400px);
  transform: translateZ(400px);

display:block; overflow:hidden; right: 40%; top:20%; width:20%; height:100px;  position:fixed; text-indent:-9999px; z-index:556;  

}

 

.no-touch .cd-floating-background .menu1 {
  -webkit-transform: translateZ(600px);
  -moz-transform: translateZ(600px);
  -ms-transform: translateZ(600px);
  -o-transform: translateZ(600px);
  transform: translateZ(600px);
}


.menu { display:block;   margin:-30% auto; z-index:555; padding:0 0 0 38%;}



.menu1 { display:block; overflow:hidden; margin:-42% auto; z-index:555; position:relative; width:1000px;}
 
#blok { display:block; float:left;  z-index:775; position:relative;  background:url(../img/tlo_menu.png);  -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;}



#blok p { text-transform:uppercase; font-size:22px; text-decoration:underline; color:#fff; margin:0 0 10px 0; 	text-shadow: 0px 0px 2px #000;  }



 


#blok a { color:#000; font-size:18px; margin:-50% 0 0 -50%;   text-align:center; position:relative;
transition-duration:200ms; 
transition-property:all; 
-webkit-transition-duration:200ms; 
-webkit-transition-property:all;
-ms-transition-duration:200ms; 
-ms-transition-property:all; }

#blok a:hover { font-size:40px; transform:translate(-40px,-0px); position:static;  }




.blok1 { display:block; overflow:hidden; float:left; margin:15px; width:20%; background:url(../img/tlo_menu.png); padding:5px; text-align:center; height:39px;  -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;
transition-duration:200ms; 
transition-property:all; 
-webkit-transition-duration:200ms; 
-webkit-transition-property:all;
-ms-transition-duration:200ms; 
-ms-transition-property:all; }  



.blok1:hover { height:200px; display:block; overflow:hidden; transition: 0.5s ease-in; }




.blok1 p { text-transform:uppercase; font-size:18px; text-decoration:underline; color:#fff; margin:0 0 10px 0; 	text-shadow: 0px 0px 2px #000;  }

.blok1 a { color:#fff; font-size:15px; 	  margin:4px;   float:left; width:100%;
transition-duration:200ms; 
transition-property:all; 
-webkit-transition-duration:200ms; 
-webkit-transition-property:all;
-ms-transition-duration:200ms; 
-ms-transition-property:all; }

.blok1 a:hover { font-size:17px; }





.no-touch.no-preserve-3d .cd-floating-background {
  /* we target browsers that don't support preserve-3d and show just a standard image - no effect visible */
  position: relative;
}












#stopka { display:block; overflow:hidden; margin:-5% auto; z-index:558; position:absolute; bottom:0; width:100%; height:30px; text-align:center;}

#stopka p { font-size:11px; color:#000; margin:15px auto; }


#main {   margin:0 auto; float:right; width:70%; position: relative;    }

.box { width:800px;  float:left; display:block; overflow:hidden; padding:50px 0 0 0;}
.box img { float:left; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.46); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.46);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.46); margin:5px; padding:5px;}
.box p { float:left; display:block; overflow:hidden; width:400px;  color:#000; padding:25px; font-size:20px;}


#logo_subsite a { position:fixed; top:0; left:0; width:335px; height:310px; background:url(../img/logo_back.png); text-indent:-99999px; }

 


.menu_wrap { margin:0 auto; display:block;  width:100%; height:104px; background:url(img/tlo_menu_glowne.gif) repeat-x; }
.f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; height:60px;   width:100%;  background:url(img/tlo_menu_glowne.gif) repeat-x; 
-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.27); }

.foto { float:left; margin:20px;}


@media only screen and (max-width: 1100px) {
.menu { display:block;   margin:-30% auto; z-index:555; padding:0 0 0 25%;}
}

@media only screen and (max-width: 930px) {
#logo_subsite a { position:fixed; top:0; left:0; z-index:999; width:242px; height:25px; background:url(../img/logo_back_m.png); text-indent:-99999px; }
#main {   margin:0 auto; float:left; width:100%; position: relative; }

.box { width:100%;}

.box img { width:80%; float:left; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.46); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.46);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.46); margin:5px 5px 5px 10%; padding:5px;}

.box p { float:left; display:block; overflow:hidden; width:400px;  color:#000; padding:25px; font-size:14px;}

.foto img { width:100%;}

.menu { display:block;   margin:-30% auto; z-index:555; padding:0 0 0 20%; width:70%;}
.menu_wrap { margin:0 auto; display:block;  width:70%; height:400px; background:url(img/tlo_menu_glowne.gif) repeat-x; }
#blok { display:block; float:left;  z-index:775; position:relative; background:url(../img/tlo_menu.png);  -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;}
#blok p { text-transform:uppercase; font-size:12px; text-decoration:underline; color:#fff; margin:0 0 10px 0; 	text-shadow: 0px 0px 2px #000;  }
#blok a:hover { font-size:12px; transform:translate(-40px,-0px); position:static;  }
 
}
@media only screen and (max-width: 670px) {
.menu { display:block;   margin:-30% auto; z-index:555; padding:0; width:70%;}
.menu_wrap { margin:0 auto; display:block;  width:670px; height:1000px; background:url(img/tlo_menu_glowne.gif) repeat-x; }
#blok { display:block; width:100%; text-align:center; z-index:775; position:relative; float:left;  background:url(../img/tlo_menu.png);  -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;}
#blok p { text-transform:uppercase; font-size:12px; text-decoration:underline; color:#fff; margin:0 0 10px 0; 	text-shadow: 0px 0px 2px #000;  }
#blok a { font-size:16px;  }
#blok a:hover { font-size:16px;  }
 
}

@media only screen and (max-width: 400px) {
.menu { display:block;   margin:-30% auto; z-index:555; padding:0; width:60%;}
.menu_wrap { margin:0 auto; display:block;  width:400px; height:1000px; background:url(img/tlo_menu_glowne.gif) repeat-x; }
#blok { display:block; width:100%; text-align:center; z-index:775; position:relative; float:left;  background:url(../img/tlo_menu.png);  -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;}
#blok p { text-transform:uppercase; font-size:12px; text-decoration:underline; color:#fff; margin:0 0 10px 0; 	text-shadow: 0px 0px 2px #000;  }
#blok a { font-size:16px;  }
#blok a:hover { font-size:16px;  }
 
}