* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  text-indent: -999em;
}
html, body {
  background: #8560a8;
  height: 100%;
  position: relative;
}
main {
  background-image: url(./img/bg-desktop-1600.jpg);
  background-size: cover;
  background-position: 50% 32%;
  position: relative;
  height: 100%;
  backface-visibility: hidden;
  animation: mainIn 1s;
}
.logo {
  animation: slideDown 1.5s;
  background-image: url(./img/logo-ccm-desktop.jpg);
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
  display: block;
  margin: 0 auto;
  width: 30vh;
  height: 15vh;
  transition: 0.5s;
}
.logo:hover {
  transform: translateY(-15px);
}
footer {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  padding-bottom: 7vh;
  overflow: hidden;
}
footer > div {
  animation: slideUp 1.5s;
}
.description {
  background-image: url(./img/text-desc-desktop.png);
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
  display: block;
  margin: 0 auto 2vh;
  width: 32vh;
  height: 2.1vh;
}
.contactNav {
  display: flex;
  background: #fff;
  width: 60vh;
  margin: 0 auto;
  border-radius: 120px;
  overflow: hidden;
  padding: 1.2vh;
}
.contactNav a {
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
  display: block;
  margin: 0 auto;
  width: 28vh;
  height: 6vh;
  transition: .35s;
}
.contactNav .mail {
  background-image: url(./img/text-email-desktop.png);
}
.contactNav .phone {
  background-image: url(./img/text-number-desktop.png);
}
.contactNav a:hover {
  opacity: 0.65;
}

@keyframes slideDown {
  0%, 50% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes slideUp {
  0%, 50% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes mainIn {
  0% {
    filter: grayscale(1) blur(12px);
  }
  100% {
    filter: grayscale(0) blur(0px);
  }
}

@media only screen and (min-width: 1640px) {
  main {
    background-image: url(./img/bg-desktop-2500.jpg);
  }
}
@media only screen and (max-width: 1080px) {
  main {
    background-image: url(./img/bg-mobile.jpg);
    background-size: 100% auto;
    background-position: 0 22%;
  }
  .logo {
    background-image: url(./img/logo-ccm-mobile.jpg);
    width: 35vw;
  }
  footer {
    background: #8560a8;
    padding: 6vh 0;
  }
  .description {
    background-image: url(./img/text-desc-mobile.png);
    height: 3vw;
  }
  .contactNav {
    background: transparent;
    border-radius: 0;
    justify-content: center;
    width: 100%;
  }
  .contactNav a {
    width: 40vw;
    height: 8vw;
    max-height: 48px;
    max-width: 238px;
    margin: 0;
  }
  .contactNav .mail {
    background-image: url(./img/text-email-mobile.png);
  }
  .contactNav .phone {
    background-image: url(./img/text-number-mobile.png);
  }
}