/* ====================================================== */
/* Mantelli Trailer Sales - Custom CSS file */
/* Updated 03/16/2016 */
/* ====================================================== */
/* ===== Used to set the style for the Welcome page ===== */
/* ====================================================== */
html {
  width: 100%;
  height: 100%;
  min-width: 300px;
}

body {
  background: url(../../img/cover/cover-01-sm.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
  background-size: cover !important;
  min-height: 100%;
  overflow: auto;
  margin-bottom: -60px; /* set for footer space on wide screens */
}

@media (min-width: 768px) { /* HD Picture for larger displays */
  body {
    background: url(../../img/cover/cover-01-lg.jpg) no-repeat center center fixed;
  }
}

/*  Sets the logo  */
/* =============== */
.cover-logo {
  margin: 10px -10px 20px -10px;
}
@media (min-width: 480px) {
  .cover-logo {
    margin: 30px 0px 40px 0px;
 }
}
@media (min-width: 768px) {
  .cover-logo {
    margin: 50px auto 75px;
  }
}

/*  Welcome background  */
/* ==================== */
.welcome-bg {
  width: 100%;
  height: 70px;
  background: transparent url(../../img/cover/enter_bckgrd_border-70-opt.png) repeat-x;
  color: #FFCC00;
  padding-top: 16px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  text-align: center;
  text-shadow: 1px 1px 3px #000000;
}
@media (min-width: 480px) {
  .welcome-bg {
    padding-top: 10px;
    font-size: 18px;
  }
}
@media (min-width: 768px) {
  .welcome-bg {
    padding-top: 2px;
    font-size: 22px;
  }
}

/*  Enter Button  */
/* ============== */
.enter-btn {
  text-align: center;
  margin-top: 20px;
}
@media (min-width: 480px) {
  .enter-btn {;
    margin-top: 30px;
  }
}
@media (min-width: 786px) {
  .enter-btn {;
    margin-top: 50px;
  }
}
.enter-button {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  padding: 12px 24px;
  border: 1px solid #ae7a0d;
  border-radius: 8px;
  background: #ffc815;
  background: -webkit-gradient(linear, left top, left bottom, from(#ffc815), to(#ae7a0d));
  background: -moz-linear-gradient(top, #ffc815, #ae7a0d);
  background: linear-gradient(to bottom, #ffc815, #ae7a0d);
    -webkit-box-shadow: #000000 2px 2px 5px 0px;
    -moz-box-shadow: #000000 2px 2px 5px 0px;
  box-shadow: #000000 2px 2px 5px 0px;
  text-shadow: #000000 1px 1px 1px;
  font: normal normal bold 20px arial;
  color: #ffffff;
  text-decoration: none;
}
.enter-button:hover, .enter-button:focus {
  border: 1px solid ##f8ae12;
  background: #fff019;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff019), to(#d19210));
  background: -moz-linear-gradient(top, #fff019, #d19210);
  background: linear-gradient(to bottom, #fff019, #d19210);
  color: #ffffff;
  text-decoration: none;
}
.enter-button:active {
  background: #ae7a0d;
  background: -webkit-gradient(linear, left top, left bottom, from(#ae7a0d), to(#ae7a0d));
  background: -moz-linear-gradient(top, #ae7a0d, #ae7a0d);
  background: linear-gradient(to bottom, #ae7a0d, #ae7a0d);
}

/*  Used to position footer at the botton on larger screens & normal for smaller screens  */
/* ====================================================================================== */
.cover-footer {
  position: absolute;
  bottom: auto;
  width: 100%;
  height: 80px; /* Sets the fixed height of the footer */
  background-color: transparent;
  margin-top: 60px;
}
@media (min-width: 480px) {
  .cover-footer {
    margin-top: 100px;
  }
}
@media (min-width: 768px) {
  .cover-footer {
    margin-top: 140px;
  }
}
@media (min-width: 992px) {
  .cover-footer {
    margin-top: 180px;
  }
}
@media (min-width: 1200px) {
  .cover-footer {
    bottom: 0;
    height: 60px;
    padding-top: 0px;
  }
}

/*  Copyright notice  */
/* ================== */
.cover-footer-note {
  color: #ffffff;
  padding-top: 60px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-style: italic;
  font-weight: bold;
  text-align: center;
  text-shadow: 1px 1px 3px #000000;
}
@media (min-width: 480px) {
  .cover-footer-note {
    padding-top: 10px;
  }
}
@media (min-width: 768px) {
  .cover-footer-note {
    padding-top: 20px;
  }
}
.cover-footer-left-arrow {
  padding-left: 20px;
}
.cover-footer-right-arrow {
  padding-right: 20px;
}

/*  Hover Float Effect  */
/* ==================== */
.hvr-float {
  display: inline-block;
  vertical-align: middle;
    -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
    -webkit-transition-property: transform;
  transition-property: transform;
    -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-float:hover, .hvr-float:focus, .hvr-float:active {
    -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}