/* --- https://www.w3schools.com/howto/howto_css_split_screen.asp --- */
/* Split the screen in half */
.split {
  /*height: 100%;*/
  height: 70%;
  width: 54%; /* bez zešikmení by tu bylo 50% */
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 20px;
}
.left {
  left: 0;
  background-color: rgba(30,30,30,0.9);
  -webkit-clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%); /* zešikmení */
  clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%); /* zešikmení */ 
  transition: background-color 0.55s;
}
.right {
  right: 0;
  background-color: rgba(25,159,152,0.9);
  -webkit-clip-path: polygon(10% 0, 100% 0%, 100% 100%, 0% 100%); /* zešikmení */
  clip-path: polygon(10% 0, 100% 0%, 100% 100%, 0% 100%); /* zešikmení */
  transition: background-color 0.55s;
}
.left:hover {background-color: rgba(30,30,30,0.7); color: #fff; text-decoration: none;}
.right:hover {background-color: rgba(25,159,152,0.7); color: #fff; text-decoration: none;}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: left;
}

/*
.left .centered {transform: translate(-65%, -50%);}
.right .centered {transform: translate(-35%, -50%);}
*/
.left .centered {transform: translate(-85%, -50%); left: 60%;}
.right .centered {transform: translate(-55%, -50%); left: 60%;}

.left:hover .sipka {background: #35c0bd; transform: scale(1.2); }
.right:hover .sipka {background: #222; transform: scale(1.2); }

/* ---------------------------------------------------------- */

body {background-image: url(img/motiv.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; height: 100vh; color: #fff; font-family: Roboto,sans-serif;}
a {color: #fff;}
h1 {text-transform: uppercase; letter-spacing: 2px; font-weight: bold; margin-bottom: 0;}
h2 {letter-spacing: 2px; font-weight: normal; margin-bottom: 2rem;}
h3 {}
p.popis {margin-bottom: 1.5rem;}

#logo {
  /*width: 300px; height: 300px;*/
  width: 17vw; height: 17vw;
  max-width: 300px; max-height: 300px;
  min-width: 120px; min-height: 120px;
  border-radius: 50%;
  z-index: 10;
  background: rgba(255,255,255,0.9);
  
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -30%);
  text-align: center;
}
#logo img {width: 100%;}

#novinky {
  width: 100%; height: 30%;
  overflow: hidden;  
  z-index: 10;
  background: rgba(255,255,255,0.9);
  color: #222;
  padding: 0 0 2rem 0;
  
  position: absolute;
  bottom: 0%;
  left: 0%;
  /*transform: translate(-50%, -30%);*/
}
#novinky h2 {
  display: inline-block; padding: 1rem 2rem; background: #fff; margin: 0 auto 2rem auto; letter-spacing: 0;
  font-size: 1.1rem;
  border-bottom-right-radius: 2rem;
  border-bottom-left-radius: 2rem;
  color: #199f97;
}
#novinky a {color: #199f97;}

#vlajky {position: absolute; top: 20px; right: 40px; z-index: 10;}
#vlajky a {display: inline-block; margin-left: 5px; text-align: center;}
#vlajky a.active {border: 1px solid #fff; border-radius: 50%; padding: 3px;}




.btn-primary,
.btn-primary:focus {
  color: #fff;
  text-shadow: none;
  background-color: #199f98;
  border: none;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 1rem 2rem;
}
.btn-primary:hover {
  background-color: #35c0bd;
}

.btn-secondary,
.btn-secondary:focus {
  color: #fff;
  text-shadow: none;
  background-color: #333;
  border: none;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 1rem 2rem;
}
.btn-secondary:hover {
  background-color: #111;
}


.sipka {
  display: inline-block; width: 35px; height: 35px; line-height: 33px; text-align: center; border-radius: 50%; 
  background: #199f98; 
  color: #fff;
  transition: transform 0.55s;
}
.right .sipka {background: #222;}



/* --------------- */
/* mensi obrazovky */
/* --------------- */
@media(max-width: 680px) {
  .split {
    width: 100%;
    height: 54%;
    top: auto;
  }
  .left {
    left: auto;
    top: 0;
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 90%, 0% 100%); /* zešikmení */
    clip-path: polygon(0 0, 100% 0%, 100% 90%, 0% 100%); /* zešikmení */ 
  }
  .right {
    right: auto;
    bottom: 0;
    -webkit-clip-path: polygon(0 10%, 100% 0%, 100% 100%, 0% 100%); /* zešikmení */
    clip-path: polygon(0 10%, 100% 0%, 100% 100%, 0% 100%); /* zešikmení */
  }
  h1 {font-size: 2.2rem;}
  h2 {display: none; /*letter-spacing: 0; font-size: 1.8rem; margin-bottom: 0.5rem;*/}
  p.popis {/*display: none;*/ line-height: 1.2; font-size: 0.8rem; margin-bottom: 0.5rem;}
  .btn-primary, .btn-primary:focus { letter-spacing: 1px; padding: 0.5rem 1rem; font-size: 0.9rem;}
  .btn-secondary, .btn-secondary:focus { letter-spacing: 1px; padding: 0.5rem 1rem; font-size: 0.9rem; }
  .left .centered {transform: translate(-50%, -65%);}
  .right .centered {transform: translate(-50%, -35%);}
  
  #logo {width: 17vh; height: 17vh;}
}