/* font-family: "Akrobat-Regular"; */
@font-face {
  font-family: "Akrobat-Regular";
  src: url("../fonts/Akrobat-Regular.otf");
  font-style: normal;
  font-weight: normal;
}
/* font-family: "Akrobat-Black"; */
@font-face {
  font-family: "Akrobat-Black";
  src: url("../fonts/Akrobat-Black.otf");
  font-style: normal;
  font-weight: normal;
}
/* font-family: "Akrobat-Bold"; */
@font-face {
  font-family: "Akrobat-Bold";
  src: url("../fonts/Akrobat-Bold.otf");
  font-style: normal;
  font-weight: normal;
}
/* font-family: "Akrobat-ExtraBold"; */
@font-face {
  font-family: "Akrobat-ExtraBold";
  src: url("../fonts/Akrobat-ExtraBold.otf");
  font-style: normal;
  font-weight: normal;
}
/* font-family: "Akrobat-ExtraLight"; */
@font-face {
  font-family: "Akrobat-ExtraLight";
  src: url("../fonts/Akrobat-ExtraLight.otf");
  font-style: normal;
  font-weight: normal;
}
/* font-family: "Akrobat-Light"; */
@font-face {
  font-family: "Akrobat-Light";
  src: url("../fonts/Akrobat-Light.otf");
  font-style: normal;
  font-weight: normal;
}
/* font-family: "Akrobat-SemiBold"; */
@font-face {
  font-family: "Akrobat-SemiBold";
  src: url("../fonts/Akrobat-SemiBold.otf");
  font-style: normal;
  font-weight: normal;
}
/* font-family: "Akrobat-Thin"; */
@font-face {
  font-family: "Akrobat-Thin";
  src: url("../fonts/Akrobat-Thin.otf");
  font-style: normal;
  font-weight: normal;
}
body {
  background-color: #e7e7e7;
  color: #ffffff;
}

#header {
  background: url(../img/main.jpg) no-repeat center top;
  text-align: center;
  background-attachment: relative;
  background-position: center center;
  width: 100%;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#main_button {
  font-size: 1.5em;
  color: #ffffff;
  border: solid 1px;
  padding-left: 2em;
  padding-right: 2em;
  padding-top: 0.4em;
  padding-bottom: 0.4em;
  font-family: Akrobat-Regular;
  -webkit-transition: width 0.6s ease;
  -o-transition: width 0.6s ease;
  transition: all 0.6s ease;
}

#main_button:hover,
#main_button:active,
#main_button:focus {
  text-decoration: none;
  background-color: #a4cd21;
  border-color: #a4cd21;
}

#header h1 {
  margin-top: 30vh;
  margin-bottom: 1em;
  font-family: Akrobat-Bold;
  font-size: 5em;
}
@media screen and (max-width: 640px) {
  #header h1 {
    margin-top: 10vh;
    font-size: 2.5em;
    margin-bottom: 3em;
  }
}
@media screen and (max-width: 1022px) and (min-width: 641px) {
  #header h1 {
    margin-top: 27vh;
    font-size: 3.5em;
    margin-bottom: 5em;
  }
}
@media screen and (max-width: 1200px) and (min-width: 1023px) {
  #header h1 {
    margin-top: 27vh;
    font-size: 3.5em;
    margin-bottom: 2em;
  }
}

#header p {
  margin-top: 3em;
  font-size: 4em;
  font-family: Akrobat-Light;
}
@media screen and (max-width: 640px) {
  #header p {
    margin-top: 1.5em;
    font-size: 2.2em;
    margin-bottom: 0em;
  }
}
@media screen and (max-width: 1022px) and (min-width: 641px) {
  #header p {
    margin-top: 3em;
    font-size: 2.5em;
    margin-bottom: 0em;
  }
}
@media screen and (max-width: 1200px) and (min-width: 1023px) {
  #header p {
    margin-top: 3em;
    font-size: 2.5em;
    margin-bottom: 0em;
  }
}

.logo {
  padding-top: 2em;
  text-align: center;
}

.white_logo {
  fill: #ffffff;
}

.pattern-overlay {
  width: 100%;
  background: transparent url(../img/pattern-overlay3.png) repeat scroll 0 0;
}

.gradient-overlay {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  padding-bottom: 5em;
  background: rgba(0, 0, 0, 0.51);
}
@media screen and (max-width: 640px) {
  .gradient-overlay {
    padding-bottom: 0em;
  }
}

/*# sourceMappingURL=main.css.map */