



* { 
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;
	outline: none;
	vertical-align: top;
	/*border:solid red 1px;*/
}

@font-face {
    font-family: brandon-grotesque; 
 src: url(fonts/Brandon_reg.otf);
}



.all{
width:100%;
/*height:100%;*/
}


header{
position:relative;
background-color:#169276;
min-width:60em;
max-width:100%;
height: 140px;
	font-family: "brandon-grotesque", sans-serif ;
	text-transform: uppercase;
	z-index:1900;
}


.centrovanie{
margin:0px auto;
position:relative;
min-width:60em;
max-width:77em;
height:140px;
  z-index:100;
}


.vsk {
position:absolute;
top:1ex;
right:4.5em;
width:3em;
height:3em;



  transition-property: opacity;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  transition-delay: 0s;
  display: inline;
  padding: 0px;
  opacity: 0.33;
  
  z-index:200;

}

.vsk:hover {
  opacity: 1;
}


.vang {
position:absolute;
top:1ex;
right:1em;
width:3em;
height:3em;


  transition-property: opacity;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  transition-delay: 0s;
  display: inline;
  padding: 0px;
  opacity: 0.33;
   z-index:200;
  

	
}


.vang:hover {
  opacity: 1;
}





.logo{	
position:absolute;
left:3em;
top:1ex;
width:16em;
height:7em;
margin-left:1%;
}


.lista{
position:absolute;
top:140px;
/*alebo nic*/
min-width:60em;
max-width:100%;
height:3.5em;
z-index: 1200;
width: 100%;
}




.lista-1{
margin:0px auto;
position:relative;	
top:0px;
left:0px;
min-width:60em;
max-width:60em;
height:3.5em;
z-index:600;
}


	

.lista a{
  color:white;
  text-decoration:none;
  text-align:center;
  font-size: 14px;
  font-family:  sans-serif ;
text-transform: uppercase;
 font-weight: bold;
 font-family: "brandon-grotesque", sans-serif ;
}










.a1,.b1,.c1,.d1,.e1,.f1,.a2,.b2,.c2,.d2,.e2,.f2,.a3,.b3,.c3,.d3,.e3,.f3{
position:absolute;
top:0px;
float:left;
height:100%;
padding-top:2.4ex;
text-align: center;
z-index:600;
transition-property:background-color;
transition-duration: 1s;
transition-timing-function: ease;
width:16.66%;
}



.a1,.b1,.c1,.d1,.e1,.f1{
background-color:#077562;
}

.a2,.b2,.c2,.d2,.e2,.f2{
background-color:white;
}

.a3,.b3,.c3,.d3,.e3,.f3{
background-color:white;
}


.a1,.a2,.a3{
left:0%;
}
.b1,.b2,.b3{
left:16.66%;
}
.c1,.c2,.c3{
left:33.33%;
}
.d1,.d2,.d3{
left:49.99%;
}
.e1,.e2,.e3{
left:66.66%
}

.f1,.f2,.f3{
left:83.33%;
}



.a1 a,.b1 a,.c1 a,.d1 a,.e1 a,.f1 a,.a2 a,.b2 a,.c2 a,.d2 a,.e2 a,.f2 a,.a3 a,.b3 a,.c3 a,.d3 a,.e3 a,.f3 a{
font-size:15px;
 transition-duration:1s;
 transition-timing-function: ease;
 display:inline-block;

}





.a1 a,.b1 a,.c1 a,.d1 a,.e1 a,.f1 a{
color:white;
opacity:1;
padding-bottom:5px;

}

.a2 a,.b2 a,.c2 a,.d2 a,.e2 a,.f2 a{
color:#169276;
opacity:1;
transition-property:opacity;
border-bottom:solid #169276 2px;
padding-bottom:5px;
}


.a3 a,.b3 a,.c3 a,.d3 a,.e3 a,.f3 a{
opacity:0.2;
color:#169276;
transition-property:opacity;
padding-bottom:5px;

}
	









.kryt-1{
position:absolute;
display:inline-block;
width:100%;
min-width:60em;
height:3.5em;
background-color:#077562;
padding: 1em;
z-index:20;
transition-duration: 1s;
transition-timing-function: ease;
}
 
 
 
 .kryt-2-active, .kryt-2-neactive{
position:absolute;
display:inline-block;
min-width:60em;
width:100%;
height:3.5em;
-webkit-transition: all 500ms; 
 transition: all 500ms;	 
 background-color:#e3e3e3;
 z-index:10;  
  transition-delay:0ms;
 }
 
 
.kryt-2-active{
top:0em;
/*top:10em;*/
 -webkit-transform: translate3d(0,100%, 0); 
transform: translate3d(0,100%, 0);
}

.kryt-2-neactive{
 top:3.5em;
 /*top:13.5em;*/
 -webkit-transform: translate3d(0,-100%, 0); 
transform: translate3d(0,-100%, 0);
}
 


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







.lista2,.lista2-vidiet{
position:absolute;
top:3.5em;
width:100%;
height:3.5em; 
 padding: 1em;
 padding-left: 7%;
 opacity:1;
background: rgba(f5, f5, f5, .5);
}


.lista2{
visibility:hidden;
transition-property:visibility;
-webkit-transition: all 0ms; 
transition: all 0ms;	
transition-timing-function: ease;
transition-delay:0ms;     /* odklad zaciatku vyditelnosti listi */
/*transition-duration: 2s;*/
}

.lista2 a,.lista2-vidiet a{
margin-left:2ex;
margin-right:2ex;	
padding-top:0.8ex;
color:#169276;
opacity:0;
font-weight: bold;
float:left;
min-width:5em;
}

.lista2-vidiet{ 
visibility:visible;	
transition-delay:50ms; 

}


.lista2-vidiet a{
opacity:1;
transition-property:opacity;
-webkit-transition: all 1500ms; 
transition: all 1500ms;	
transition-timing-function: ease;
transition-delay:0ms;       /* odklad zaciatku vynorovania sa textu */
transition-duration: 1600ms;   /* cas vynorovania sa textu */
transition-timing-function: ease;
}
 
/*--------------------------------------------------------------------------------------------------------------------------------------------------------*/





.lista3,.lista3-vidiet{
position:absolute;
top:3.5em;
width:100%;
height:3.5em; 
 padding: 1em;
 padding-left: 17.5%;
 opacity:1;
background: rgba(f5, f5, f5, .5);
}


.lista3{
visibility:hidden;
transition-property:visibility;
-webkit-transition: all 0ms; 
transition: all 0ms;	
transition-timing-function: ease;
transition-delay:0ms;     /* odklad zaciatku vyditelnosti listi */
/*transition-duration: 2s;*/
}

.lista3 a,.lista3-vidiet a{
margin-left:2ex;
margin-right:2ex;		
padding-top:0.8ex;
color:#169276;
opacity:0;
font-weight: bold;
float:left;
}

.lista3-vidiet{ 
visibility:visible;	
transition-delay:50ms; 

}


.lista3-vidiet a{
opacity:1;
transition-property:opacity;
-webkit-transition: all 1500ms; 
transition: all 1500ms;	
transition-timing-function: ease;
transition-delay:0ms;       /* odklad zaciatku vynorovania sa textu */
transition-duration: 1600ms;   /* cas vynorovania sa textu */
transition-timing-function: ease;
}

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


.lista4,.lista4-vidiet{
position:absolute;
top:3.5em;
width:100%;
height:3.5em; 
 padding: 1em;
 padding-right: 14%;
 opacity:1;
background: rgba(f5, f5, f5, .5);
}


.lista4{
visibility:hidden;
transition-property:visibility;
-webkit-transition: all 0ms; 
transition: all 0ms;	
transition-timing-function: ease;
transition-delay:0ms;     /* odklad zaciatku vyditelnosti listi */
/*transition-duration: 2s;*/
}

.lista4 a,.lista4-vidiet a{
margin-left:2ex;
margin-right:2ex;	
padding-top:0.8ex;
color:#169276;
opacity:0;
font-weight: bold;
float:right;
min-width:14em;
}

.lista4-vidiet{ 
visibility:visible;	
transition-delay:50ms; 

}


.lista4-vidiet a{
opacity:1;
transition-property:opacity;
-webkit-transition: all 1500ms; 
transition: all 1500ms;	
transition-timing-function: ease;
transition-delay:0ms;       /* odklad zaciatku vynorovania sa textu */
transition-duration: 1600ms;   /* cas vynorovania sa textu */
transition-timing-function: ease;
}

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


 
 
.lista1-vidiet a:hover,.lista2-vidiet a:hover,.lista3-vidiet a:hover,.lista4-vidiet a:hover,.lista5-vidiet a:hover{
text-decoration:underline;
}






































