* {
  margin: 0;
  padding: 0;
}

body {
  background-color: white;

}
input{
  display: none;
}

a, li {
  list-style: none;
  text-decoration: none;
}

#app {
  display: flex;
}

/*-Menu-*/

#btn:checked~aside>label>.fa-bars{
  opacity: 0;
}
#btn:checked~aside>label>.fa-times{
  transform: translateX(12vw);
  opacity: 1;
}

menu {
  position: fixed;
  left: 0;
  top: 0;
  width: 15vw;
  height: 100vh;
  background-color: rgba(25, 25, 25, .9);
  overflow-y: scroll;
}

menu ul, h1{
  color: white;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 1.5vw;
}
ul:hover{
  cursor: pointer;
}

h1{
  text-align: left;
  padding-left: 1vw;
  color: white;
  text-shadow: 2px 2px 5px black;
}
menu li:hover {
  background-color: #ff6b22;
}

menu li a {
  color: #949393;
}

menu li a:hover {
  color: white;
  font-size: 1.7vw;
}

.menu{
  display: none;
}

.fa-bars, .fa-times {
  position: fixed;
  padding: .5vw;
  cursor: pointer;
  transition: all 2s ease .1s;
}
.fa-times{
  color: #ff6b22;
  opacity: 0;
}
.up{
  display: none;
  position: fixed;
  overflow: hidden;
  width: 2vw;
  height: 2vw;
  bottom: 2vh;
  right: 2vh;
  background: #ff6b22;
}
.fa-arrow-up{
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  color: white;
  animation: up 0.5s infinite ease;
}
@keyframes up {
  to{top:0%;}
  from{top:10%;}
}
.menu-enter-active, .menu-leave-active {
  transition: all 2s ease;
}

.menu-enter, .menu-leave-to {
  left: -15vw;
}

/*-Page-*/

aside {
  width: 99.1vw;
}

.titul, .plan, .mapa img,.mapa, .mission{
  width: 100%;
  min-height: 100vh;
}
.titul{
  background-image: url("../img/title_bg.JPG");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.titul > p{
  position: absolute;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 4vw;
  top: 5vw;
  right: 10vw;
  text-shadow: 2px 2px 5px white;
}

/* Plan*/
.plan{
  background-image: url("../img/plan_bg.jpg");
  background-repeat: no-repeat;
  background-size: 160% 100%;
  background-position: right bottom;
  background-attachment: fixed;
  padding-top: 5vh;
}

.plan_box{
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.plan_titul{
  color: white;
  font-weight: bold;
  font-size: 2vw;
  font-family: sans-serif;
  text-align: center;
  text-shadow: 2px 2px 5px black;
  margin-bottom: 5vh;
}
.plan_city p, .plan_date p, .plan_status p{
  font-weight: bold;
  font-size: 1.5vw;
  font-family: sans-serif;
  margin-bottom: 2vw;
  text-align: left;
  color: white;
  text-shadow: 2px 2px 5px black;
}
.plan_date p{
  text-align: left;
}

.plan_status p{
   text-align: center;
}
/*Mapa*/
.mapa img{
  background-image: url("../img/map_bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
/*Mission*/
.mission{
  display: flex;
  flex-direction: column;
  background-image: url("../img/mission_bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  margin-top: -1vh;
  padding-top: 5vh;
}

.mission_box{
  position: relative;
  left: 15vw;
  width: 30vw;
  height: 15vw;
  border-radius: 1vw;
  margin-bottom: 5vh;
  color: white;
  border: 1px solid black;
  background-color: rgba(0, 0, 0, .8);
}
.mission>.mission_box:nth-child(even){
  transform: translateX(40vw);
}
.missionars{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

div>img{
  width: 4vw;
  height: 4vw;
}
.missionars>div{
  position: relative;
}
.missionars>div:hover:after{
  opacity: 1;
  transition: opacity .5s linear;
}
.ab1::after,.mz1::after,.mz2::after,.mm1::after,.mk1::after,
.vh1::after,.if1::after,.fb1::after,.fr1::after,.jd1::after,
.jj1::after,.jt1::after,.vc1::after,.ps1::after,.rd1::after,
.sv1::after,.rb1::after,.jb1::after,.js1::after,.vm1::after,
.pg1::after,.mp1::after,.mh1::after,.ms1::after,.ps2::after,
.ph1::after,.mm2::after,.rr1::after,.bl1::after,.ja1::after,
.jn1::after,.jj2::after,.jz1::after,.jm1::after{
  content: "Michal Zamkovský";
  position: absolute;
  text-align: center;
  left: -50%;
  width: 200%;
  bottom: -1.3vw;
  font-family: sans-serif;
  font-weight: bold;
  opacity: 0;
  transition: opacity .5s linear;
}
.ab1::after{
  content: "Artur Bilyk";
}
.bl1::after{
  content: "Bystrik Letavay";
}
.mz2::after{
  content: "Martin Zanovit";
}
.mh1::after{
  content: "Martin Huk";
}
.mk1::after{
  content: "Marián Kováčik";
}
.mm1::after{
  content: "Milan Mikloško";
}
.mm2::after{
  content: "Martin Macko";
}
.mp1::after{
  content: "Marián Papík"
}
.ms1::after{
  content: "Martin Šabo"
}
.fb1::after{
  content: "František Boldy"
}
.fr1::after{
  content: "František Romaňák"
}
.ja1::after{
  content: "Ján Andrejov";
}
.jd1::after{
  content: "Juraj Dubec";
}
.jj1::after{
  content: "Ján Janok";
}
.jj2::after{
  content: "Jozef Jackanin";
}
.jm1::after{
  content: "Jozef Mihok";
}
.jn1::after{
  content: "Jozef Novák";
}
.jt1::after{
  content: "Ján Tomaškovič";
}
.js1::after{
  content: "Jiří Šindelář";
}
.jz1::after{
  content: "Ján Zoričák";
}
.if1::after{
  content: "Ivan Flimel";
}
.vc1::after{
  content: "Virgil Čierny";
}
.vh1::after{
  content: "Václav Hypius";
}
.vm1::after{
  content: "Viktor Mišuth";
}
.ps1::after{
  content: "Pavol Sendrej";
}
.ps2::after{
  content: "Peter Slobodník";
}
.ph1::after{
  content: "Peter Hertel";
}
.pg1::after{
  content: "Patrik Grotkovský";
}
.rb1::after{
  content: "Róbert Bezák";
}
.rd1::after{
  content: "Rastislav Dluhý"
}
.rr1::after{
  content: "Róbert Režný"
}
.sv1::after{
  content: "Štefan Varecha";
}
.jb1::after{
  content: "Jozef Bednárik";
}