/* GLOBAL STYLES
-------------------------------------------------- */
a {
  color: #44B8FF;
}

a.nostyle {
 text-decoration: none;
 color: inherit;
 cursor: auto;
 }

.masthead {
  margin-top: 32px;
  margin-bottom: 32px;
  background-color: #000000;
  -webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
  box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
  line-height: 99px;
}

.masthead-border {
  border-bottom: 1px solid #989da4;
  width: 100%;
}

.logo img {
max-width: 100%;
line-height: 99px;
}

.powered img {
max-width: 100%;
line-height: 99px;
position: absolute;
right: 107px;
}

.powered p {
float: right;
color: #989da4;
margin: 0;
}

.powered a {
color: #989da4
}

.powered a:hover {
text-decoration: underline;
}

.powered a:visited {
color: #989da4;
}

.callout {
  position: relative;
  text-align: center;
  padding: 150px 0 75px 0;
  color: #fff;
  width: 100%;
  overflow: hidden;
}

/* The video element will pull its source from an HTML file.
   In your HTML, link to your video file like this:

   <video autoplay muted loop>
     <source src="videos/your-video-file.mp4" type="video/mp4">
   </video>
*/

.callout video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -60%);
  z-index: -1;
}

.callout .col-xs-12 {
padding: 0 16%;
}

.callout h1 {
font-weight: 200;
}

.callout p {
font-weight: 200;
font-size: 14px;
}

.carousel-caption h2 {
font-weight:200;
font-size: 28px;
margin: 0;
}

.carousel-caption h3 {
font-weight:200;
color: #10a3dd;
font-size: 22px;
margin: 0;
}

.carousel-caption hr {
margin: 13px 0;
}

.carousel-caption a {
color: #44B8FF;
}

.carousel-caption a:hover {
text-decoration: underline;
}

.carousel-caption a:visited {
color: #44B8FF;
}

.callout a {
color: #fff;
font-weight: bold;
}

.callout a:hover {
text-decoration: underline;
}

.callout a:visited {
color: #fff;
font-weight: bold;
}

.marketing {
background: url('images/content-bg.jpg') top center repeat-x;
background-color: #000;
padding: 40px 30px 75px 20px;
color: #fff;
margin-top: -50px;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
}

.featurette h2 {
font-weight:200;
font-size: 28px;
margin: 0 0 5px 0;
}

.featurette h3 {
font-weight:200;
color: #ea2a2e;
font-size: 22px;
margin: 0 0 10px 0;
}

.featurette p {
font-weight: 200;
font-size: 14px;
}

.featurette img {
max-width: 100%;
}

.powered-container {
background-color: #fff;
padding: 60px 60px 30px 60px;
margin-top: -50px;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
}

.powered-container .powered-container-two {
margin-bottom: 30px;
}

.sidebar {
text-align: right;
}

.sidebar a {
color: #ccc;
}

.sidebar a:hover {
text-decoration: underline;
}

.sidebar a:visited {
color: #ccc;
}

.sidebar ul {
list-style: none;
padding: 0;
font-size: 12px;
font-weight: 200;
}

.sidebar ul li {
margin: 3px 0;
}

.sidebar-sub {
margin-bottom: 0;
margin-top: 30px;
}

.footer {
background-color: #2e3136;
border-top: 1px solid #989da4;
color: #cccccc;
padding: 40px 0;
}

.footer a {
color: #ccc;
}

.footer a:hover {
text-decoration: underline;
}

.footer a:visited {
color: #ccc;
}

.footer ul {
list-style: none;
padding: 0;
font-size: 12px;
font-weight: 200;
}

.footer-sub {
margin-bottom: 0;
}

.home-copyright img {
float: right;
}

.powered-by-copyright img {
float: right;
}

.home-copyright {
font-size: 10px;
text-align:right;
}

.powered-by-copyright {
font-size: 10px;
text-align:right;
padding-top: 40px;
}

/* RESPONSIVE STYLES
-------------------------------------------------- */


@media (max-width: 993px) {
  .carousel {
    height: 633px;
    background: #060607;
  }

  .carousel .item {
    height: 633px;
    background-color: #060607;
  }
}

@media (max-width: 767px) {
  .carousel-caption p {
    margin-bottom: 20px;
    font-weight: 200;
    line-height: 1.4;
    margin-bottom: 10px;
  }

  .carousel-caption h2 {
    margin: 0;
  }

  .carousel-caption hr {
    margin: 6px 0;
  }

  .callout .col-xs-12 {
    padding: 0 23px;
  }

  .carousel-image img {
    max-width: 100%;
    min-width: 100%;
  }

 .featurette-image {
    margin-bottom: 15px;
  }

  .powered-logo {
    margin-bottom: 15px;
  }

  .carousel {
    height: 703px;
    background: #060607;
  }

  .carousel .item {
    height: 703px;
    background-color: #060607;
  }

  .carousel-caption .col-md-8, .carousel-caption .col-md-4 {
    padding-right: 0px;
  }

  .copyright {
    padding-top: 0px;
  }

  .featurette img {
    min-width: 100%;
  }

  .marketing {
    padding: 40px 20px 75px 20px;
  }

  .sidebar {
    margin-top: 15px;
  }
}

/* Apply gradient and animation to the first, second, and third slides */
.carousel-inner .first-slide,
.carousel-inner .second-slide,
.carousel-inner .third-slide {
    background: linear-gradient(to bottom, #002f4b, #005377);
    animation: underwater 6s infinite alternate;
}

@keyframes underwater {
    0% { background-position: 40% 40%; }
    100% { background-position: 80% 80%; }
}