@import url('https://fonts.googleapis.com/css2?family=Raleway:ital@0;1&display=swap');



body {
    font-family: "Raleway", sans-serif;
	font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
    color: #000;
    background-color: #000;
    margin: 0;
    padding: 0;
    height: 100vh;
}



div.full {
    position: relative;
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

div.lavastrana {text-align:center;position:relative;box-sizing: border-box;width:50%;padding:0;margin:0;border:0;background-image:url(/pict/bg.jpg);background-postion:center top;background-size:cover;left:0;}
a {color:#dc9100;text-decoration:none;font-weight:bold;}
a:hover {text-decoration:underline;opacity: 0.5; filter: alpha(opacity=50);}

/* Obal pre pozadie */
.bgwrap {
    position: relative;
    width: 50%;
    height: auto;
    min-height: 100%;
    overflow: hidden;
	text-align:center;
	
	
}

/* Vrstvy pozadia */
.bgwrap .bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

/* Animácie pre 5 obrázkov */

/*
.bg1 { background-image: url(/pict/jkl.jpg); animation: fade1 25s infinite; }
.bg2 { background-image: url(/pict/jkl2.jpg); animation: fade2 25s infinite; }
.bg3 { background-image: url(/pict/jkl3.jpg); animation: fade3 25s infinite; }
.bg4 { background-image: url(/pict/jkl4.jpg); animation: fade4 25s infinite; }
.bg5 { background-image: url(/pict/jkl5.jpg); animation: fade5 25s infinite; }
.bg5 { background-image: url(/pict/jkl6.jpg); animation: fade6 25s infinite; }

@keyframes fade1 { 0%, 20% {opacity: 1;} 25%,100% {opacity: 1;} }
@keyframes fade2 { 20%, 40% {opacity: 1;} 0%,15%,45%,100% {opacity: 0;} }
@keyframes fade3 { 40%, 60% {opacity: 1;} 0%,35%,65%,100% {opacity: 0;} }
@keyframes fade4 { 60%, 80% {opacity: 1;} 0%,55%,85%,100% {opacity: 0;} }
@keyframes fade5 { 80%, 100% {opacity: 1;} 0%,75%,95% {opacity: 0;} }
@keyframes fade6 { 80%, 100% {opacity: 1;} 0%,75%,95% {opacity: 0;} }
*/


.bg1, .bg2, .bg3, .bg4, .bg5 {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: fadeCycle 24s infinite;
  animation-timing-function: ease-in-out;
}

.bg1 { background-image: url(/pict/jkl.jpg); animation-delay: 0s; }
.bg2 { background-image: url(/pict/jkl2.jpg); animation-delay: 4s; }
.bg3 { background-image: url(/pict/jkl3.jpg); animation-delay: 8s; }
.bg4 { background-image: url(/pict/jkl4.jpg); animation-delay: 12s; }
.bg5 { background-image: url(/pict/jkl5.jpg); animation-delay: 16s; }

@keyframes fadeCycle {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  30%  { opacity: 1; }
  40%  { opacity: 0; }
  100% { opacity: 0; }
}


.trans{opacity: 1.0; filter: alpha(opacity=100);transition: opacity 2s;}
.trans:hover{opacity: 0.5; filter: alpha(opacity=50);transition: opacity 0.5s;}


div.pravastrana {position:absolute;box-sizing: border-box;width:40%;padding:0;margin:0;border-width:0 0 0 0;border-style:solid;border-color:#fff;right:0;float:right;height: auto;  min-height: 100%;}
img.icohead {position: relative;padding:0;margin:10px;border:0;filter: invert(1);width:80px;}


img.podpis {position:absolute;right:30px;bottom:100px;width:400px;filter: invert(1);}
div.podpis2 {position:absolute;box-sizing: border-box;padding:0;margin:0;border:0;right:150px;bottom:80px;color:#fff;font-size:1.2em;}
h1.hlnadpis {font-size:3em;font-weight:normal;color:#fff;padding:50px 50px 0 50px;margin:0;}
h2.nadpis2 {font-size:1.5em;font-weight:normal;color:#fff;padding:30px 50px 0 50px;margin:0;}
div.popis2 {font-size:1.0em;font-weight:normal;color:#fff;padding:15px 50px 0 50px;margin:0;}
div.uvodnytext {position:relative;box-sizing: border-box;width:100%;padding:30px 50px 30px 50px;margin:0;border:0;font-size:1.2em;color:#fff;}
div.ifrfull {width:100%;padding:0;margin:30px 0 0 0;border:0;position:relative;background: rgba(255, 255, 255, 0.05); }
DIV.ifrvideo {box-sizing: border-box;width:47%;padding:30px 0 0 50px;margin:0;border:0;display:inline-block;position:relative;float:left;}
DIV.textvideo {box-sizing: border-box;width:100%;padding:15px 15px 30px 15px;margin:0 0 0 0;border:0;float:left;position:relative;color:#fff;}
iframe.videoframe {aspect-ratio:16/9;border:1px solid #fff;}
div.iconfull {width:100%;padding:0;margin:30px 0 0 0;border:0;position:relative;text-align:center; }
h3.nadpis3 {font-size:3em;font-weight:normal;color:#fff;padding:50px 50px 0 50px;margin:0;text-align:center;}
h3.nadpis4 {font-size:1.5em;font-weight:normal;color:#fff;padding:30px 50px 0 50px;margin:0;text-align:center;}
div.koncertfull {width:100%;padding:0;margin:0;border:0;position:relative; text-align:center;background-image:url(/pict/bg.jpg);background-postion:center top;background-size:cover;}
iframe.videokoncert {aspect-ratio:16/9;border:1px solid #fff;margin:50px 5%;box-sizing: border-box;width:90%;}
DIV.bottomfullblack {box-sizing: border-box;width:100%;margin:0;padding:30px 0;border:0;color:#fff;text-align:center;position:relative;text-transform: uppercase;background-image:url(/pict/bg.jpg);background-postion:center top;background-size:cover;}
DIV.album {transition: 0.5s;padding:0;margin:5px;border:0;display:inline-table;width:14%;box-sizing: border-box;aspect-ratio: 1 / 1;background-size:cover;background-position:center center;}
DIV.bottomfull3 {box-sizing: border-box;width:100%;margin:2px auto;padding:30px 60px;border-width:0 0 0 0;border-color:#fff;border-style:solid;color:#fff;text-align:center;color:#fff;}
H2.pcth {line-height:130%;font-family: "Raleway", sans-serif;text-align:center;display:block;padding:60px 60px 30px 60px;margin:0;font-size:2.5em;font-weight:normal;color:#fff;text-transform: uppercase;}
DIV.obsahtextinclude {box-sizing: border-box;width:100%;margin:0;border:0;text-align:center;padding:30px 60px;color:#fff;}
button.tlacitko {font-size:1.0em;display:inline-block;font-family: "Raleway", sans-serif;cursor:hand;cursor:pointer;padding:20px;background-color:#d40000;margin:5px;border:1px solid #d40000;color:#fff;}
button.tlacitko:hover {opacity: 0.5; filter: alpha(opacity=50);}
div.formular {margin:auto;padding:0;}
td.obsah {background:transparent;background-image:url(/pict/black5.png);color:#000;padding:15px;margin:5px;border:0;font-size:1.0em;text-align:center;}
input.cptch {font-size:1.0em;font-family: "Raleway", sans-serif;background-position:left center;background-repeat:no-repeat;padding-left:115px;width:10%;background-color:#fff;border:1px solid #d5d5d5;padding:20px 20px 20px 115px;color:#000;margin:5px;}
input.cptch2 {font-size:1.0em;font-family: "Raleway", sans-serif;width:15%;background-color:#fff;border:1px solid #d5d5d5;padding:20px 20px 20px 20px;color:#000;margin:5px;}

DIV.fotogaleria {display:inline-block;cursor:hand;cursor:pointer;width:20%;aspect-ratio: 5 / 3.5;margin:0 0 0 0;padding:0;border:0;background-size: cover;background-position:center center;float:left;}

@media screen and (max-width: 1200px) {
	DIV.ifrvideo {width:80%;float:none;padding:30px 0 0 0;}
}


@media screen and (max-width: 900px) {
	h1.hlnadpis {font-size:3em;padding:30px 30px 0 30px;}
	input.cptch {width:15%;}
	input.cptch2 {width:25%;}  
	img.podpis {width:300px;}
	div.podpis2 {right:110px;font-size:1.1em;}
}

@media screen and (max-width: 800px) {
	div.full {display: block;  flex-direction: column;} 
	.bgwrap { width: 100%; aspect-ratio:9/16;}
	div.lavastrana {width:100%;}
	h3.nadpis3 {font-size:1.7em;padding:30px 30px 0 30px;}
	h3.nadpis4 {font-size:1.0em;}
	DIV.bottomfullblack {padding:0;}
	DIV.album {width:25%;}
	DIV.bottomfull3 {padding:0 15px;}
	H2.pcth {padding:30px 30px 0 30px;font-size:1.5em;}
	input.cptch {width:50%;}
	input.cptch2 {width:80%;} 
	div.formular {margin:auto;padding:0;}
	DIV.obsahtextinclude {padding:30px 15px 50px 15px;}
	DIV.textvideo {padding:15px 15px 15px 15px;}
	DIV.ifrfull {padding:0 0 15px;}
}