/* ==========================================================================
   General styles
   ========================================================================== */
   
body,
html {
  height: 100%;
/*   overflow: hidden; */
}

body {
  font-family:"Red Hat Text", "Futura", sans-serif;
  background: #333 fixed;
   background:url(../img/bg.jpg);
  background-repeat: no-repeat;
  background-size: auto;
  color: #fff;
  font-weight: 300;
  font-size; 20px;
}

body:before {
  content: '';
/*   background: rgba(0,0,0,0.4); */
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
}

a:hover { text-decoration: none; }
a{
      margin-top: 16px;
      text-transform: uppercase;
      font-size: 14px;
      text-decoration: none;
      cursor: pointer;
      display: inline-block;
      padding: 15px;
      font-family: inherit;
      text-shadow: none;
      user-select: none;
      transition: all,.1s,ease-in;
      background:url(../img/bg.png);
      border: 0px solid #333;
      color: #FFFFFF;
      }

img { max-width: 100%; }

/* ==========================================================================
   Progress bar
   ========================================================================== */
   
.progress {
  overflow: hidden;
  margin-bottom: 0;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
}

.progress-bar {
  background-color: #1565C0;
  color: #fff;
  text-align: right;
  padding-right: 2em;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

/* ==========================================================================
   animation
   ========================================================================== */

.animation-container {
  position: fixed;
  top: 0;
  bottom: 0;
  overflow: hidden;
  z-index: -100;
  width: 100%;
}

.clouds {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background: transparent url(../img/clouds.png) repeat-x 50% 50%;
  background-size: cover;
  -webkit-animation: clouds 100s linear 0s infinite both;
  animation: clouds 100s linear 0s infinite both;
}
 @-webkit-keyframes clouds {
 from {
 background-position: 0 50%, 50% 50%;
}
 to {
 background-position: -150em 50%, 50% 50%;
}
}
 @keyframes clouds {
 from {
 background-position: 0 50%, 50% 50%;
}
 to {
 background-position: -150em 50%, 50% 50%;
}
}

/* ==========================================================================
   Top Header styles
   ========================================================================== */
   

.top-header { margin: 3em 0 1.5em; }

.top-header h1 {
  font-size: 2.618em;
  font-weight: 300;
}

p {
font-size: 1.636em;
padding-bottom: 10px;
}

/* ==========================================================================
   social media styles
   ========================================================================== */
   
.social { padding-bottom: 3em; }

.social p {
  font-size: 1.5em;
  color: #fff;
}

.social-icons {
  list-style: none;
  padding-left: 0;
}

.social-icons li {
  display: inline-block;
  padding-right: 1em;
}

.social-icons li:last-child { padding-right: 0; }

.social-icons a {
  display: block;
  width: 40px;
  height: 40px;
  line-height: 42px;
  color: #fff;
  background: #1565C0;
  -webkit-transition: all .8s ease;
  transition: all .8s ease;
  font-size: .8em;
}

.social-icons a:hover {
  color: #fff;
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}


.links {
  font-size: 100%;
  font-weight: 600;}

/* ==========================================================================
   Small devices (tablets, 768px and up)
   ========================================================================== */

@media (min-width: 768px) {

.top-header { margin: 5.5em 0 1.5em; }

.top-header h1 {
  font-size: 3.236em;
 /*  font-weight: 700;
 text-transform: uppercase;*/
}


/* ==========================================================================
   Medium devices (desktops, 992px and up)
   ========================================================================== */

@media (min-width: 992px) {

.top-header { margin: 6.5em 0 3em; }

.top-header h1 { font-size: 3.636em; }
}