/* CSS Document TYPONAUT */

body {
background: #999 url("../_pics/plaz.jpg") no-repeat fixed center;
background-size: cover;
}

section { position: absolute; top:30px; right:0; left:0; }
header  { position: relative; top:30%; left:0;  }
footer { position: absolute; bottom:0px; left:0;  }

h1, p.font2, p.font3 {font-family: 'Header14'; }
p, a#red  {font-family: 'TriviaSerif10';}


h1, p {
	display: block;
	margin: 0 auto;
	text-align: center;
}
body h1 { font-size: 4vw; line-height: 100%; 	}
p { font-size: 22px; }
span { font-size: 16px; }


a {
	color: #FFF;
	opacity: 0.6;
 }

a:hover {
 opacity: 1;
 }


/* doplňkový text */
/* definujme nejprve základní blok s textem */

p.info { 
	display: block;
	font-size: 16px; 
	text-align: left;
	padding: 10px;
	color: #000;
}

 p.info a {
	color: #5498d4;
	opacity: 1;
}

 p.info a:hover {
	background-color: #fff;
}

/* teď jednotlivé dva bloky a jejich transformace*/

p.jedna { 
	border-radius: 0 0 0 0;
	width: 200px;
	margin: 20px 50px;
	transform: rotate(160deg);
	background-color: rgba(255,255,255,0.4);
}

p.jedna:hover { 
	border-radius: 0 0 100px 0;
	margin: 40px 150px;	
	transform: rotate(-10deg);
	background-color: rgba(255,255,255,0.8);

}


/* p.dva nakonec nepoužito */
p.dva { 
	width: 200px;
	margin: 100px 600px;
	transform: rotate(-110deg);
		background-color: rgba(255,255,255,0.2);
}

p.dva:hover { 
	width: 500px;
	margin: -300px 400px;
	transform: rotate(0deg);
	background-color: rgba(255,255,255,0.8);
}

p.jedna, p.jedna:hover, p.dva, p.dva:hover {
	transition: 1s ease-in-out;
 }




/* tohle je asi "bio" */

p.font1 {
	position: relative; top: 0;
	text-align: left;
	font-size: 200px;
	opacity: 0.2;
	letter-spacing: 1em;
	color: red;
	text-shadow: 2px 2px 8px black;
}

p.font1:hover {
	font-size: 20px;
	opacity: 1;
	letter-spacing: 0;
}

p.font2 {
	position: absolute; top: 100px;
	font-size: 10vw;
	opacity: 0.3;
	z-index: 100;
}

p.font2:hover {
	font-size: 5vw;
	opacity: 1;
}

p.font3 {
	position: relative; top: 0%;
	font-size: 150px;
	color: white;
	opacity: 0.4;
}

p.font3:hover {

	font-size: 15px;

}


a, p.font1, p.font2, p.font3 {
	transition: 2.5s ease-in-out;
}

a:hover, p.font1:hover {
	transition: 0.8s ease-in-out;
 }


a#red {
	color: red;
	font-size: 20px;
	padding: 30px;
	opacity: 1;
	display:block;
 }


/* proměna loga */

div#logo {
margin: 5px auto;
width: 254px;
height: 250px;
opacity: 0.7;
  -webkit-transition: 2s ease-in-out;
  -moz-transition: 2s ease-in-out;
  -o-transition: 2s ease-in-out;
transform: rotate(-180deg);
}

div#logo:hover {
margin: 0px auto;
opacity: 0.3;
transform: rotate(0deg);
}



/* EOF */