html {
  scroll-behavior: smooth;
}

body
{
overflow-x: hidden;
background-color:#FFFFFF;
margin: 0px 0px 0px 0px;
font-family:Roboto Slab;
}

.page0
{
    
    height: 100vh;
    width: 100%;
    z-index:1;
}

.page
{
    
    padding-top:40px;
    width: 100wv;
    z-index:1;
    padding-bottom:80px;
}


.normalpage
{

margin-left:auto;
margin-right:auto;
text-align:center;
width: 80%;
text-align: center;
position: relative;
font-size: 2em;
z-index:10;
}





h1
{     
z-index:10;
letter-spacing:-3;
color: #222222;
font-size: 3em;
margin-top: 0px;
margin-bottom: 0px;
}

@media screen and (max-width: 1280px) 
{
h1
{
font-size:2em;
}

}




h2
{     
  letter-spacing:-1;
  
    font-size: 1.8em;
    margin-top: 0px;
    margin-bottom: 6px;
}


@media screen and (max-width: 1280px) 
{
h2
{
font-size: 1.3em;
line-height:1.0em;
}
}



.ikona
{
padding-left:10px;
padding-right:10px;
padding-top:20px;
transition: 0.25s linear;
width:25%;
}

.ikona:hover
{
padding-left:10px;
padding-right:10px;
padding-top:20px;
 transition: 0.25s linear;
 transform: scale(1.1);
width:25%;
}



.topmenu
{
background-color:black;

    text-align: right;
    color: #eeeeee;
    position: fixed;
    top: 0px;
    z-index: 100;
    width: 100%;
    font-size:1.2em;
}
.inside
{
display:inline-block;
padding:20px;
padding-left:0px;
padding-right:10px;
}




.moderni
{
font-size: 1em;
line-height:1.2em;
font-family:Roboto Slab;
}





.vyhody
{
line-height:1.0em;
color:#ff4a4a;
}

@media screen and (max-width: 1280px) 
{
.vyhody
{
font-size: 0.95em;
}
}

.rightvideo
{
width:560px;
height:315px;
}

@media screen and (max-width: 1280px) 
{
.rightvideo
{
width:400px;
height:205px;
}
}


@media screen and (max-width: 1280px) 
{
.normalpage
{
width:80%;

}
}


.hoste
{
display:inline-block;
padding:20px;
}


.miniatura
{
width:200px;
filter:grayscale(1);
}

.miniatura:hover
{
width:200px;
filter:grayscale(0);
}

.videoloop
{
position:absolute;
z-index:0;
height: 100vh;
width: 100vw;
overflow: hidden;
left:0;
object-fit: fill;
}

.trans
{
    border: 1px solid #ffffff;
    display: inline-block;
    color: #ffffff;
    padding: 10px;
    margin-bottom:10px;
}


.fotka {
  background-color:#FFFFFF;
  margin:2px;
  padding:2px;
  width:24.1%;
  height:24%;
  
  transition: 0.25s linear;
}

.fotka:hover
{

transform: scale(1.10);
}

a:link
{
color:#eeeeee;
}
a:visited
{
color:#eeeeee;
}
a:hover
{
color:#ffffff;
}
a:active
{
color:#eeeeee;
}





.inside a:link
{
color:#eeeeee;
}

.inside a:visited
{
color:#eeeeee;
}

.inside a:active
{
color:#ffffff;
}

.inside a:hover
{
color:#ffffff;
}


.predator
{
 display:inline-block;
}

.predator:hover
{
 display:inline-block;
 filter:grayscale(1);
}

.manipulace
{
    
    display: inline-table;
    color: #ffffff;
    padding: 10px;
    margin-bottom:10px;
    width:150px;
        font-size: 0.8em;
    line-height: 1.2em;
}

.manimage
{
border: 1px solid #eeeeee;
margin-bottom: 10px;
}


.tooltip
{
    position: absolute;
    width: 300px;
    text-align: center;
    background-color: #AA2222;
    padding: 10px;
    margin-top: -90px;
    margin-left: -80px;
    display:none;
}
.tooltip:after
{
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top-color: #AA2222;
	border-bottom: 0;
	margin-left: -20px;
	margin-bottom: -20px;
  
  }

.hlavninapis
{
 background-color:#ffffff;
 padding:20px;
 display:inline-block;
 padding:40px;
}



@media screen and (max-width: 390px) 
{
.normalpage
{
font-size:1.3em;

}
}


@media screen and (max-width: 390px) 
{
.hlavninapis
{
display:inherit;
padding:10px;
}
}

@media screen and (max-width: 390px) 
{
h1
{
font-size:1.4em;
}
}

@media screen and (max-width: 390px) 
{
.topmenu
{
text-align:center;
}
}

@media screen and (max-width: 390px) 
{
.inside
{
padding:0px;
}
}

@media screen and (max-width: 390px) 
{
.topmenu
{
padding:0px;
padding-top:10px;
height:70px;
}
}