html {
  position: relative;  /* nutné pro patičku dole */
  min-height: 100%;
}

body {font-size: 150%;
			color:  whitesmoke;
			font-family: Anaheim;
			background-image: url("../back.jpg");
			background-size: cover;
		}

img {
  max-width: 100% !IMPORTANT;
  height: auto !IMPORTANT;
  box-sizing: border-box !IMPORTANT
}

h2 {font-size: 150%;
		margin-bottom: 0.5em;
		font-family: Limelight;}

input[type=text] {} 

#videoBack {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

#videoCircle {object-fit: cover;
							border-radius: 50%;
							width: 450px;
						  height: 450px;
							border: 5px solid white;
							box-shadow: 5px 5px 10px rgba(0,0,0, 0.7);
							}


.content {display: none;
					flex-wrap: wrap-reverse;
					max-width: 1300px;
					margin: auto;
				position: relative;
				color: #ffffff;
				margin-top:  12vh;
				margin-bottom: 12vh;
				padding: 0 5vw 0 5vw;
				}

.col {flex-basis: 50%;
			padding: 1.5em;
			text-align: center;
			text-shadow: 1px 1px #303030;
		}

.col p, h2, ul, li {text-align: left;
										font-weight: 100;
										}
.col li {margin-left: 0.8em;
				 margin-bottom: 0.8em;}

.col p {line-height: 140%;
				margin-bottom: 0.8em;}

.panel {background-image: url("../dj.jpg");
						background-size: cover;
						opacity:  0.90;
						width: 60vh;
						right: 0px;
						box-sizing: border-box;
						position:  absolute;
						height: 100vh;
						overflow-y: auto; 
						}


h1#visacka {display: inline-block;
					color: #ffffff;
					 background: rgb(67,15,110);
					background: linear-gradient(45deg, rgba(67,15,110,1) 3%, rgba(132,9,164,1) 43%, rgba(249,176,244,1) 100%); 
					position: relative;
				  padding:  1.7rem;
				  border-radius: 10px;
				  top: 12vh;
				  left:  7vh;
				  transform: rotate(-15deg);
				  box-shadow: -2px 5px 15px #ffffff;
				  font-size: 1.7vw;
				  font-family: Limelight;
				  }

.panel p {position: relative;
					color: #ffffff;
					top: 25vh;
					padding:  0px;
					font-size:  1.4em;
					text-shadow: 2px 2px #202020;
					text-align: center;
					text-transform: uppercase;
					margin: 0px;
					}

.btn {box-shadow:inset 0px 1px 0px 0px #fbafe3;
						background:linear-gradient(to bottom, #ff5bb0 5%, #ef027d 100%);
						background-color:#ff5bb0;
						border-radius:6px;
						border:1px solid #ee1eb5;
						display:inline-block;
						cursor:pointer;
						color:#ffffff;
						font-family:Arial;
						font-size:15px;
						font-weight:bold;
						padding:8px 20px;
						text-decoration:none;
						text-shadow:0px 1px 0px #c70067;
						}

	.panel div {position: relative;
							text-align: center;
							top: 25vh;
							font-size: 250%;
							animation-name: sipka;
  						animation-duration: 2s;
  						animation-iteration-count: infinite;
  						animation-delay: 1s;
  						color: #80e718;	
  					}

  @keyframes sipka {
  	50% {top: 27vh; }
  }						

	.glosa {font-size: 80%;}

/********************************* ID *************************************************************/
	
	#text-content {text-align: left;
 								background: rgba(31, 31, 31, 0.75);
 								border-radius: 0.7em;
 								}
 
 #form-content {text-align: left;
 								background: rgba(31, 31, 31, 0.75);
 								border-radius: 0.7em;
 								display: none;}


label {
 				font-size:  70%;
 			}

input[type="text"], input[type="email"] 
 		{border-radius: 5px;
			padding: 0.4em;
			font-size: 11pt;
			display: block;
			width: 100%;
			border: 1px solid white;
 		}

input[type="date"] {
	font-size: 11pt;
	margin-bottom: 1.5rem;
}				

/************************ PATIČKA VŽDY DOLE	!!!! :-) ***********************************************/
.footer {
  position: absolute;
  bottom: 0px;
  width: 100%;
  box-sizing: border-box;
  /* Set the fixed height of the footer here */
  height: 110px;
  background: rgb(67,15,110);
	background: linear-gradient(233deg, rgba(67,15,110,1) 3%, rgba(132,9,164,1) 43%, rgba(249,176,244,1) 100%);
  color: #9A9A9A;
  font-size: 85%;
  padding-top: 25px;
  box-sizing: border-box;
  text-align: center;
}

.footer p {font-size: 1.2em}

.footer h3 {color: #FFFFFF;
			font-size: 1.8em;
			margin: 0px}
.footer a { font-size: 95%;
			color: #FFFFFF;
			text-decoration: none}
			
.footer a:hover {text-decoration: underline;
				 }

/************************ break points *******************************************************/
@media only screen and (max-width: 1280px) {
	h1#visacka {font-size: 2.5vw}
	
}


@media only screen and (max-width: 1024px) {
	h1#visacka {font-size: 2vw}
	.panel p {font-size:  1.3em}
}

@media only screen and (max-width: 992px) {
			h1#visacka {font-size: 2.2vw}
		  .panel {width: 70vh}
		  #videoCircle {width: 300px; height: 300px}
	   }
   
@media only screen and (max-width: 840px) {
			#videoBack {display: none;}
			.panel {width: 100%}
			.panel p {font-size:  1.2em}
			h1#visacka {font-size: 3vw}
	   }
		

 @media only screen and (max-width: 768px) {
		h1#visacka {font-size: 4vw}
	   }

@media only screen and (max-width: 640px) {
		.panel p {font-size:  1.1em}
		h1#visacka {font-size: 5.8vw}
		#videoCircle {width: 250px; height: 250px}
		.col {flex-basis: 100%;}
		.col p, li {font-size:  90%}
		h2 {font-size: 110%}
		/*body {background-image: none;}*/
		.content {margin-top: 5vh;}
		}