#ytstream {
	background-image: repeating-linear-gradient(135deg, #ffdd65 0%, #ffaa5c 29%, #ff49c0 61%, #8e59ff 100%);
	background-size: calc(100% + 40px) calc(100% + 40px);
	background-position: -25px; 
	filter: drop-shadow(0px 20px 20px #020202c2);
	overflow: hidden;
	position: relative;
	margin: 0 auto;
/*	margin-top: 2vh;*/
	border: 4px solid #ffffff66;
	border-radius: 18px;
/*	max-width: calc(90vh * 16 / 9);*/
/*	max-height: 90vh;*/
/*	width: calc(94vw - 8px);*/
/*	height: calc(94vw * 9 / 16);*/
	width: calc(94vw - 8px);
	height: calc(94vw * 9 / 16);
	max-width: 1200px;
	max-height: 675px;
	transition: width 0.3s ease 0s;
}

/*#canvas {
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(30px);
  opacity: 0.5;
}
.containerCanvas {
  background: #161a20;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  position: relative;
}*/

/*@media only screen and (max-width: 640px){*/
@media only screen and (max-width: 550px){
#ytstream.full {
    border: 0;
    background: #020202e8;
    border-radius: 0;
    width: calc(100% + 20px);
    max-width: 1000000px;
    margin-left: -10px;
    filter: drop-shadow(0px 40px 40px #020202c2);
    height: calc(100vw * 9 / 16);
}
#ytstream.full #player {
    height: calc(100vw * 9 / 16);
    width: 100vw;
    border-radius: 0;
}
#ytstream.half #player {
    width: 93vw;
}
}
/*:not(.full)*/
 #ytstream > iframe {
 	pointer-events: none;
    border-radius: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	width: calc(94vw - 8px);
	max-width: 1200px;
	height: 100%;
	transition: all 0.3s ease 0s;
}
#ytstream.paused > iframe {
    filter: brightness(.7) grayscale(.3);
    /* transition: all; */
    transition: all 0.3s ease 0s;
}
#ytstream:fullscreen > iframe{
	width: 100%;
	max-width: 10000000px;
	border: 0;
	border-radius: 0;
    transition: all 0.3s ease 0s;
}
#ytstream:fullscreen {
	border: 0;
	border-radius: 0;
    transition: all 0.3s ease 0s;
    background-image: none;
}
#ytstream.full > iframe{
 	pointer-events: all;
}
#ytstream.full #fullscreen-button{
 	display: none;
}

/*@media only screen and (max-width: 640px){*/
@media only screen and (max-width: 550px){
	#ytstream {
		height: calc(94vw * 3 / 4);
	}
	#ytstream > iframe {
		width: 129vw;
	/*    makni fit to frame*/
	}

}

body{
    background: linear-gradient(195deg, #a3cfdf 0, #00ccfd 10%, #00648c 40%, #013b60 90%);
/*    background-image: url('../images/shorewaves.jpg');*/
    background-size: cover;
    background-repeat: no-repeat;
    height: calc(100vh - 10px);
/*    padding: 10px;*/
}
#bimage {
    position: fixed;
    left: -10px;
    right: -10px;
    top: -10px;
    z-index: -1;
    display: block;
/*    background-image: url('https://data.ceskekormidlo.cz/Zajezd/16367/140920.jpeg');*/
    height: calc(100vh + 10px);
    background-size: cover;
    background-repeat: no-repeat;
	-webkit-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
	opacity: 0;
/*	transform: rotate(180deg);*/
}

.content {
    position: fixed;
    left: 0;
    right: 0;
    margin-left: 20px;
    margin-right: 20px;
    z-index: 9999;
}



#ytstream:not(.full) + input.wide, #ytstream.full + input + input.wide {
	display: block;
}
#ytstream:not(.full) + input.float, #ytstream.full + input + input.wide {
	display: none;
}



	
@media (max-width: 750px){
	.column.value{
		min-width: 300px;
		margin: 0 auto 10px;
		float: none;
	}
}



@media (min-width: 750px){
	.section {
		padding: 14rem 0 15rem;
	}
}
@media (min-width: 550px){
	.section {
		padding: 12rem 0 11rem;
	}
}
.section.dark {
    background-color: #013b60;
    background-size: cover;
    color: #fff;
}
.section.lite{
    background-color: #fff;
    background-size: cover;
    color: #013b60;
}
.section.hero {
	padding-top: 20px;
	padding-right: 10px;
	padding-left: 10px;
	user-select: none;
}
.section {
    padding: 8rem 0 7rem;
    text-align: center;
}

.button, button, input[type="submit"], input[type="reset"], input[type="button"] {    color: #FFF;
    background-color: #441696ba;
    border-color: #441696;
    color: #fff;
    border-radius: 8px;
}
.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus {
    color: #ffffff;
    border-color: #cebeeae8;
    background: #6949a0ba;
}
.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
    height: 40px;
    padding: 0 20px;
    font-size: 12px;
    font-weight: 600;
    line-height: 38px;
}

iframe.weather{
	background: #f1f1f1;
	width:300px;
	height:144px;
	margin:0 auto;
	display:block;
/*	filter: drop-shadow(0px 10px 10px #020202c2);*/
/*	border: 4px solid #f1f1f1;*/
	border-radius: 10px;
}

img.cameraButton{
	filter: drop-shadow(0px 2px 2px #020202c2);
	border: 2px solid #f1f1f1;
	border-radius: 10px;
	transition: all 0.15s ease 0s;
}
img.cameraButton:hover{
	background-image: repeating-linear-gradient(135deg, #ffdd65 0%, #ffaa5c 29%, #ff49c0 61%, #8e59ff 100%);
	background-size: calc(100% + 40px) calc(100% + 40px);
	background-position: -25px; 
	filter: drop-shadow(0px 10px 10px #020202c2);
	border: 2px solid #ffffff00;
	border-radius: 10px;
	transition: all 0.3s ease 0s;
	cursor:pointer;
    width: calc(100% + 12px);
	margin: -4px;
}
img.cameraButton.active {
  animation: hide 0.4s ease-in-out 1;
  pointer-events: none;
  transition-property: filter, opacity;
  filter: grayscale(0) brightness(1.1) drop-shadow(0px 0px 26px #f73fb7c3);
  transition: all 0.2s ease 0s;
  background-image: repeating-linear-gradient(135deg, #ffdd65 0%, #ad6d33 29%, #ff49c0 61%, #4a2f85 100%);
  background-size: calc(100% + 40px) calc(100% + 40px);
  background-position: -25px;
  border: 2px solid #ffffff00;
/*    pointer-events: none;*/
  /*opacity: .5;*/
  /*transition-delay: 1s;*/
}
@keyframes hide {
  0%  {opacity: 1;transform: scale(1);}
  70% {opacity: 0;transform: scale(1.2);}
  80% {opacity: 0;transform: scale(.8);}
  100% {opacity: 1;transform: scale(1.0);}
}

.camSection p{
	color: #ffffff;
	font-weight: 600;
	margin: 0;
	filter: drop-shadow(0px 2px 4px #020202c2);
	top: -36px;
	position: relative;
	z-index: 20;
	pointer-events: none;
	transition: all 0.2s ease 0s;
}
img.cameraButton.active + p{
	top: -42px;
    font-size: 21px;
    margin-bottom: -20px;
	transition: all 0.2s ease 0s;
}


.linkLogo{
	transition: all 0.2s ease 0s;
	user-select: none;
	cursor: pointer;
}
.linkLogo.round{
	max-width: 160px !important;
	border-radius: 50%;
}
.linkLogo:hover{
	filter: drop-shadow(0px 10px 10px #020202c2);
	translate: 0 -8px;
}



iframe.weather{
	background-image: url(../images/pre_face.gif);
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
}


.loader{
height: 50%;
width: 100%;
text-align: center;
padding: 0;
margin: 0;
display: inline-block;
vertical-align: middle;
top: 50%;
position: relative;
pointer-events: none;
}
/*.loader iframe{
transform: translate(-50%, -50%);
}
.loader svg path, .loader svg rect{
fill: #000000d1;
}*/


/*PAUSE ICON*/
#pauseIcon{
	display: none;
}
#ytstream.paused #pauseIcon{
	display: block;
	position: absolute;
	width: 80px;
	margin: 0 auto;
	left: calc(50% - 40px);
	top: calc(50% - 50px);
	pointer-events: none;
	opacity: 80%;
}
#pauseIcon .bar{
	background: white;
	width: 35px;
	height: 100px;
	float: left;
	border-radius: 10px;
}
#pauseIcon .separator{
	background: none;
	width: 10px;
	height: 200px;
	float: left;
}



	/* Larger than tablet */
@media (min-width: 550px) {
	.container.mobile, .onlymobile{
		display: none !important;
	}
}
@media (max-width: 550px) {
	.container.desktop, .onlydesktop{
		display: none !important;
	}
	.container.mobile .six.columns{
		width: calc(50% - 10px);
		margin-right:10px;
	}
}