@import url("https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800");
html, body {
  margin:0;
  padding:0;
}
body {
  background:#fbe2c1;
  font-family:'Montserrat', sans-serif;
}
intro {
  display:flex;
  height:100vh;
  background:url(background.jpg);
  background-size:cover;
  background-position:50% 50%;
  align-items:center;
  justify-content:center;
  position:relative;
}
intro #logo {
  width:300px;
  position:absolute;
  left:30px;
  top:30px;
}
intro in {
  display:block;
  width:840px;
  height:840px;
  position:relative;
}
intro letter {
  opacity:0;
  position:absolute;
  background:rgba(255,255,255,0.95);
  border:1px solid white;
  border-radius:3px;
  box-shadow:0px 0px 20px 4px rgba(0,0,0,0.5);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:bold;
  width:32px;
  height:32px;
  color:black;
  transform:scale(0.5) rotate(10deg);
  transition:all 1s;
}
intro letter.ee {
  font-size:35px;
  font-weight:900;
  z-index:1;
  width:40px;
  height:40px;
  margin-left:-4px;
  margin-top:-4px;
}
intro letter.final.ee { opacity:1 !important; }
intro letter.final { transform:scale(1) rotate(0deg) !important; }
intro letter.hidden {
  transform:scale(0.01);
  opacity:0 !important;
}
intro #scroll {
  text-align:center;
  font-size:50px;
  color:white;
  width:80px;
  position:absolute;
  left:50%;
  bottom:30px;
  margin-left:-40px;
  transition:all 0.3s;
  z-index:10;
}
intro #scroll:hover {
  color:#b42d1f;
  transform:scale(1.5);
}
main {
  max-width:1000px;
  text-align:center;
  margin:80px auto 80px auto;
  padding:0 30px 0 30px;
}
main img { width:350px; }
main .slogan {
  font-size:25px;
  line-height:28px;
  font-weight:700;
  margin:20px 0 20px 0;
}
main .mail {
  font-size:25px;
  margin:20px 0 20px 0;
}
main .mail .fa { color:#b42d1f; }
main .sluzby {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}
main .sluzby article {
  width:90px;
  margin:10px;
  font-weight:500;
  line-height:16px;
  font-size:15px;
}
main .sluzby article .fa {
  display:block;
  font-size:32px;
  color:#b42d1f;
  margin-bottom:5px;
}
@media screen and (min-width: 768px) {
  body {
    background:url(background.jpg);
    background-size:cover;
    background-position:50% 50%;
    background-attachment:fixed;
  }
  intro { background:none; }
  main {
    background:rgba(251,224,190,0.8);
    width:auto;
    max-width:100%;
    margin:0;
    padding-top:50px;
    padding-bottom:50px;
  }
}
@media screen and (max-width: 768px) {
  intro { height:100vw; }
  intro in {
    transform:scale(0.40);
    width:0px;
    margin-left:-90vw;
  }
  intro #logo {
    width:100px;
    top:15px;
    left:15px;
    bottom:auto;
  }
  intro #scroll { display:none; }
  main {
    padding:0px 30px 30px 30px;
    margin:35px auto 35px auto;
  }
  main .sluzby article { width:85px; }
}