@import url(https://fonts.googleapis.com/css?family=Roboto:300);
body
{
	margin:0;
	background-color: #99FFCC; 
	font-family: "Roboto",Arial, Helvetica, sans-serif;
	text-align:center;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale; 
	margin-top: 70px
}
h1
{
	color:white;
}
header
{
	/*background-color:#00FFAA;*/
	/*background-color: #4F8;*/
	background-color: #9fc;
	border-bottom: 10px solid white;
	height:70px;
	position: fixed;
	top: 0;
	width: 100%;
	
}
header h1
{
	margin: 10px
}
nav
{
	width:100%;
	background-color: white;
	font-size: 120%;
	font: "Roboto",sans-serif;
	padding:20px 0;
	/*border-radius: 15px;
	margin-left: 26%;
	position: fixed;*/
}
nav a
{
	color:black;
	font-weight: bold;
	text-decoration: none;
	padding: 0 1.5em;
	font: "Roboto";
}
nav a:hover 
{
	color: #00FFAA;	
}

section
{
	/*color: #FFF;*/
	background-color: #BFD;
	font-size: 100%;
	font-family: Arial, Helvetica, sans-serif;
	margin: 30px 26%;
	padding: 5px 20px;
	/*box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);*/
	/*border-radius: 15px;*/
	/*border:2px solid #BFD;*/
	/*float:right;width:61%;*/
	/*border: 2px solid white;*/
}

/*section:hover{background-color: #99FFCC;border:2px solid black;}*/
section a:hover{color: white}
section a {color:#339066; text-decoration: none}
section ul{text-align: left;/*margin-left: 20%;*/}
section ul li{padding: 5px;}
section h3{/*text-align: left;padding-left: 10%; */}

div#extra
{
	float:left;
	clear:left;
	width:30%;
	padding:15px;
	border-right: 2px solid white;
	border-bottom: 2px solid white;
	border: 2px solid white;
	margin:15px;
}
div#extra2
{
	float:left;
	clear:left;
	width:30%;
	margin:15px;
}

.nespravne
{
	font font-weight: bold;
	color:red;
	/*position: fixed;
	top:190px;
	right:41%;*/
	width: 16%;
	/*margin-left: calc(42% - 2px);*/
	margin: 15px auto;
	background-color: white;
	padding: 5px;
	border: 2px solid red;
	border-radius: 10px;
}

footer
{
	clear:both;
	width:100%;
	background-color:#FFF;
    height: 30px;
    padding: 20px 0;
    position: relative;
    bottom:0;
    font-family: "Roboto",Serif;
    font-size: 110%;
    letter-spacing: 2px;
    font-weight: bold;
    text-align: center;
    border-top: 20px solid #AAFFDD;
}

/* Download Button*/
	.btn 
	{
	  background-color: DodgerBlue;
	  border: none;
	  color: white;
	  padding: 8px 200px;
	  cursor: pointer;
	  font-size: 20px;
	}
	.btn:hover 
	{
	  background-color: RoyalBlue;
	}


/*Prrihlasovaci formular*/
	.login-page {
	  width: 360px;
	  /*padding: 8% 0 0;*/
	  margin:auto;
	}
	.form {
	  position: relative;
	  z-index: 1;
	  background: #FFFFFF;
	  max-width: 360px;
	  margin: 0 auto 100px;
	  padding: 45px;
	  text-align: center;
	  /*box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);*/
	}
	.form a:hover{
		color: black
	}
	.form input {
	  font-family: "Roboto", sans-serif;
	  outline: 0;
	  background: #f2f2f2;
	  width: 100%;
	  border: 0;
	  margin: 0 0 15px;
	  padding: 15px;
	  box-sizing: border-box;
	  font-size: 14px;
	}
	.form button {
	  font-family: "Roboto", sans-serif;
	  text-transform: uppercase;
	  outline: 0;
	  background: #00FFAA;
	  width: 100%;
	  border: 0;
	  padding: 15px;
	  color: #FFFFFF;
	  font-size: 14px;
	  -webkit-transition: all 0.3 ease;
	  transition: all 0.3 ease;
	  cursor: pointer;
	}
	.form button:hover,.form button:active,.form button:focus {
	  background: #00AA77;
	}
	.form .message {
	  margin: 15px 0 0;
	  color: #b3b3b3;
	  font-size: 12px;
	}
	.form .message a {
	  color: #4CAF50;
	  text-decoration: none;
	}
	.form .register-form {
	  display: none;
	}
	.container {
	  position: relative;
	  z-index: 1;
	  max-width: 300px;
	  margin: 0 auto;
	}
	.container:before, .container:after {
	  content: "";
	  display: block;
	  clear: both;
	}
	.container .info {
	  margin: 50px auto;
	  text-align: center;
	}
	.container .info h1 {
	  margin: 0 0 15px;
	  padding: 0;
	  font-size: 36px;
	  font-weight: 300;
	  color: #1a1a1a;
	}
	.container .info span {
	  color: #4d4d4d;
	  font-size: 12px;
	}
	.container .info span a {
	  color: #000000;
	  text-decoration: none;
	}
	.container .info span .fa {
	  color: #EF3B3A;
	}


/*Klikanie na obrazky*/
	#myImg,#myImg2, section img
	{
	  border-radius: 5px;
	  cursor: pointer;
	  transition: 0.3s;
	}

	#myImg:hover,#myImg2:hover, section img:hover {opacity: 0.7;}

	/* The Modal (background) */
	.modal 
	{
	  display: none; /* Hidden by default */
	  position: fixed; /* Stay in place */
	  z-index: 1; /* Sit on top */
	  padding-top: 100px; /* Location of the box */
	  left: 0;
	  top: 0;
	  width: 100%; /* Full width */
	  height: 100%; /* Full height */
	  overflow: auto; /* Enable scroll if needed */
	  background-color: rgb(0,0,0); /* Fallback color */
	  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
	}
	/* Modal Content (image) */
	.modal-content 
	{
	  margin: auto;
	  display: block;
	  width: 80%;
	  max-width: 700px;
	}
	/* Caption of Modal Image */
	#caption 
	{
	  margin: auto;
	  display: block;
	  width: 80%;
	  max-width: 700px;
	  text-align: center;
	  color: #ccc;
	  padding: 10px 0;
	  height: 150px;
	}
	/* Add Animation */
	.modal-content, #caption 
	{  
	  -webkit-animation-name: zoom;
	  -webkit-animation-duration: 0.6s;
	  animation-name: zoom;
	  animation-duration: 0.6s;
	}

	@-webkit-keyframes zoom 
	{
	  from {-webkit-transform:scale(0)} 
	  to {-webkit-transform:scale(1)}
	}

	@keyframes zoom 
	{
	  from {transform:scale(0)} 
	  to {transform:scale(1)}
	}
	/* The Close Button */
	.close 
	{
	  position: absolute;
	  top: 15px;
	  right: 35px;
	  color: #f1f1f1;
	  font-size: 40px;
	  font-weight: bold;
	  transition: 0.3s;
	}
	.close:hover,
	.close:focus 
	{
	  color: #bbb;
	  text-decoration: none;
	  cursor: pointer;
	}
	/* 100% Image Width on Smaller Screens */
	@media only screen and (max-width: 700px)
	{
	  .modal-content 
	  {
	    width: 100%;
	  }
	}