@charset "UTF-8";
/* CSS Document */

/* All CSS without a query targets portrait (under 480px) */

* {
margin: 0px;
padding: 0px;
border: 0px;
}
@font-face {
  font-family: 'Arial Nova';
  font-style: normal;
  font-weight: normal;
  src: local('Arial Nova'), url('font/ArialNova.woff') format('woff');
  }
@font-face {
  font-family: 'Arial Nova Bold';
  font-style: normal;
  font-weight: normal;
  src: local('Arial Nova Bold'), url('font/ArialNova-Bold.woff') format('woff');
  }  
@font-face {
  font-family: 'Arial Nova Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Arial Nova Italic'), url('font/ArialNova-Italic.woff') format('woff');
  }
@font-face {
  font-family: 'Arial Nova Light';
  font-style: normal;
  font-weight: normal;
  src: local('Arial Nova Light'), url('font/ArialNova-Light.woff') format('woff');
  }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
  opacity:0;  /* make things invisible upon start */
  animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */
  animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  animation-duration:1s;
}
.fade1 {
  animation-delay: 0s;
}
.fade2 {
  animation-delay: 0.2s;
}
.fade3 {
  animation-delay: 0.4s;
}
.fade4 {
  animation-delay: 0.6s;
}
html { 
  background: url(bg.gif) no-repeat right center fixed; 
  background-color: #000000;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
body {
  align-content: center;
  font-family: 'Arial Nova Light';
  letter-spacing: 0.03em;
  color: #FFFFFF;
}
a {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
h2 {
  font-family: 'Arial Nova Bold';
  font-size: 1.3em;
  margin: 0 0 0.5em;
}
#header, #subTitle, #main, #contact {
  width: 80%;
  margin: 2rem auto;
}
#header img {
  width: 100%;
}
#printLogo {
  display: none;
}
#subTitle {
  font-family: 'Arial Nova Italic';
  text-align: center;
}
.box {  
  border: #FFFFFF 2px solid;
  border-left: none;
  border-right: none;
  padding: 1.6em;
  text-align: center;
}
#main p {
  padding: 0.5em 0;
}
#footer {
  font-size: 0.8em;
  margin: 2em 0 0;
  text-align: center;
}
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 768px) {
  #header, #subTitle,  #contact {
    width: 40%;
  }
  body: {
    background-position: left;
  }
}
@media screen and (min-width: 992px) {
  
}
@media screen and (min-width: 1200px) {
  #header, #subTitle,  #contact {
    width: 30%;
  }
  #main {
    width:50%;
  }
}
@media print {
  body, a {
    color: #000000;
  }
  #printLogo {
    display: block;
  }
  #logo {
    display: none;
  }
}