*{
  font-family:"Arial Black";
  text-transform: uppercase;
}

#top-bar{
  min-height:150px;
  background: rgb(0,0,0,1);
  background: rgba(0,0,0,1);
}

#logo-container{
  min-height:50px;
}

#logo{
  line-height:50px;
  color:white;
  text-align:center;
}

#logo img{
  max-height:100px;
}

#nav{
  min-height:50px;
}

#nav a{
  text-decoration: none;
  color:inherit;
}

#nav-option{
  color:white;
  text-align:center;
  line-height:50px;
  height:50px;
}

#nav-option:hover{
  font-size:125%;
  transition:0.4s;
}

.other-bg{
  background:url(../images/background/dust.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding:15px;
}

@media (max-width:767px){      /*Extra small display size*/
  #main-area{
    height:calc(100vh - 300px);
    min-height:450px;
  }
  #main-image{
    height:calc(100vh - 550px);
    min-height:200px;
  }
}

@media (min-width:768px){     /*Small and up*/
  #main-area{
    height:calc(100vh - 150px);
  }
  #main-image{
    height:calc(100vh - 325px);
  }
}

#main-image{
margin-top:50px;
border: 2px solid black;
border-radius:5px;
background-color: #fff;
}

#main-image img{
  left:0;
  right:0;
  margin:auto;
  position:absolute;
  top:0;
  bottom:0;
  max-height:100%;
  max-width:100%;
}

footer{
  background-color:black;
  color:white;
  min-height:50px;
  width:100%;
  bottom:0;
  position:fixed;
  font-size:80%;
}

#footer-left{
  text-align:center;
  line-height:50px;
  height:50px;
}

#footer-right{
  text-align:center;
  line-height:50px;
  height:50px;
}

#footer-left a{
  color:#636f9f;
}

#footer-right a{
  color:#fff;
}

.fade-in{
  animation:opac 0.8s
}

@keyframes opac{
  from{opacity:0} to{opacity:1}
}