/* ==========================================================================
   General
   ========================================================================== */
   
body {
  font-family: 'Lato', sans-serif;
  background: #c4dedf;
  font-weight: 300;
}

h1,
h2,
h3,
h4,
h5,
h6 { font-weight: 400; }

img { max-width: 100%; }

a {
  color: #fff;
  -webkit-transition: all .5s ease-out;
  transition: all .5s ease-out;
}

a:hover {
  color: #60929b;
  text-decoration: none;
}

/* ==========================================================================
   Mountain animation
   ========================================================================== */
   
.animation-container { overflow: hidden; }

.back-mountain,
.front-mountain,
.car {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -100;
}

.back-mountain {
  background: url(../img/back-mountain.png) center bottom repeat-x;
  -webkit-animation: mountain 150s linear infinite;
  animation: mountain 150s linear infinite;
}

.front-mountain {
  background: url(../img/front-mountain.png) center bottom repeat-x;
  -webkit-animation: mountain 100s linear infinite;
  animation: mountain 100s linear infinite;
}

.car { background: url(../img/car.png) center bottom no-repeat; }
 @-webkit-keyframes mountain {
 from {
 background-position: center bottom;
}
 to {
 background-position: -300em bottom;
}
}
 @keyframes mountain {
 from {
 background-position: center bottom;
}
 to {
 background-position: -300em bottom;
}
}

/* ==========================================================================
   header
   ========================================================================== */

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

/* ==========================================================================
   logo
   ========================================================================== */
   
.logo {
  background: url(../img/logo.png) 0 50% no-repeat;
  width: 100px;
  height: 40px;
  display: block;
  -webkit-background-size: 60px 24px;
  background-size: 60px 24px;
}

/* ==========================================================================
   social icons
   ========================================================================== */

.social-icons {
  padding-left: 0;
  margin-bottom: 0;
}

.social-icons li {
  display: inline-block;
  list-style: none;
  margin-right: .5em;
}

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

.social-icons a {
  width: 35px;
  height: 35px;
  line-height: 35px;
  background: #87d6d9;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  color: #fff;
}

.social-icons a:hover { background: #1bdbdb; }

/* ==========================================================================
   Subscription form 
   ========================================================================== */
   
    .form-control::-webkit-input-placeholder {
 color: rgb(199, 199, 199);
}
.form-control:-moz-placeholder {
 color: rgb(199, 199, 199);
}
.form-control::-moz-placeholder {
 color: rgb(199, 199, 199);
}
.form-control:-ms-input-placeholder {
 color: rgb(199, 199, 199);
}

.sub-form { padding-top: 4.5em; }

.center-block { float: none; }

.form-control {
  background-color: #fff;
  border: 1px solid #fff;
  -webkit-box-shadow: none;
  box-shadow: none;
  height: 50px;
}

.form-control:focus {
  border-color: #fff;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.input-group-btn:last-child>.btn { margin-left: 0; }

.btn-default {
  color: #fff;
  background-color: #87d6d9;
  border-color: #87d6d9;
  -webkit-transition: all .5s ease-out;
  transition: all .5s ease-out;
  padding: 12px;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
  color: #fff;
  background-color: #1bdbdb;
  border-color: #1bdbdb;
}

.btn-default:focus,
.btn-default:active { outline: none; }

#mc-notification { margin: 8px 0 0; }

.alert,
.alert-input input[type="email"] { color: #ea5050; }

.success,
.success-input input[type="email"] { color: #21b014; }

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

 
@media (min-width: 768px) {

.logo {
  background: url(../img/logo.png) center center no-repeat;
  -webkit-background-size: 100px 40px;
  background-size: 100px 40px;
}

.btn-default { padding: 12px 2em; }
}

/* ==========================================================================
   small devices 
   ========================================================================== */

@media (max-width: 330px) {

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

@media (max-height: 800px) {

.car {
  -webkit-background-size: 400px 382px;
  background-size: 400px 382px;
}

.sub-form { padding-top: 0; }
}

@media (max-height: 640px) {

.car {
  -webkit-background-size: 200px 191px;
  background-size: 200px 191px;
}

.sub-form { padding-top: 1.5em; }

.back-mountain {
  -webkit-background-size: 753px 240px;
  background-size: 753px 240px;
}

.front-mountain {
  -webkit-background-size: 660px 250px;
  background-size: 660px 250px;
}
}

@media (max-height: 496px) {

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

.sub-form { padding-top: 0; }

.back-mountain {
  -webkit-background-size: 475px 180px;
  background-size: 475px 180px;
}

.front-mountain {
  -webkit-background-size: 501px 190px;
  background-size: 501px 190px;
}
}

@media (max-height: 400px) {

.back-mountain {
  -webkit-background-size: 471px 150px;
  background-size: 471px 150px;
}

.front-mountain {
  -webkit-background-size: 422px 160px;
  background-size: 422px 160px;
}

.car {
  -webkit-background-size: 150px 143px;
  background-size: 150px 143px;
}

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

.sub-form { padding-top: 0; }
}

@media (max-height: 340px) {

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

.car {
  -webkit-background-size: 100px 96px;
  background-size: 100px 96px;
}
}