/*!
 * Start Bootstrap - Modern Business HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

/* Global Styles */
@charset "utf-8";
html,
body {
    height: 100%;
}

body {
    padding-top: 50px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
    background : url('../images/body_background.jpg') no-repeat fixed top center;
    background-size : cover;
}
/* Preloader */
  
  body {
  overflow: hidden;
}
#preloader {
  position: fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:#FFFFFF; /* change if the mask should have another color then white */
  z-index:99; /* makes sure it stays on top */
  text-align : center;
  opacity : 0.7;
  filter: alpha(opacity=70);
  }
#status {
  width:200px;
  height:100px;
  position:absolute;
  left:50%; /* centers the loading animation horizontally one the screen */
  top:50%; /* centers the loading animation vertically one the screen */
  margin:-100px 0 0 -100px; /* is width and height divided by two */
  text-align : center;
  }
  #status strong {
      color : #007700;
      font-weight: bold;
  }
.img-portfolio {
    margin-bottom: 30px;
}

.img-hover:hover {
    opacity: 0.8;
}

/* Home Page Carousel */

header.carousel {
    height:auto;
    text-align: center;
}

header.carousel .item,
header.carousel .item.active,
header.carousel .carousel-inner {
    height: 100%;
    text-align: center;
}

header.carousel .fill {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

header div .img-reponsive {
    margin: 0 auto;
    padding:  0;
    alignment-adjust: middle;
}

.navbar-brand {
    color : #FFFFFF;
}
/* 404 Page Styles */

.error-404 {
    font-size: 100px;
}

/* Pricing Page Styles */

.price {
    display: block;
    font-size: 50px;
    line-height: 50px;
}

.price sup {
    top: -20px;
    left: 2px;
    font-size: 20px;
}

.period {
    display: block;
    font-style: italic;
}

/* Footer Styles */

footer {
    margin: 50px 0;
}

/* Responsive Styles */

@media(max-width:991px) {
    .customer-img,
    .img-related {
        margin-bottom: 30px;
    }
}

@media(max-width:767px) {
    .img-portfolio {
        margin-bottom: 15px;
    }

    header.carousel .carousel {
        height: 70%;
    }
}

.navbar {
   background: url('../images/menu_background.jpg') top center fixed no-repeat;
   background-size: cover;
   border-bottom : 1px solid #007700;
  
   
}
.navbar-default .navbar-brand {
  color: #007700;
}

.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
  color: #004400;
  background-color: transparent;
}
.navbar-default .navbar-nav > li > a {
  color: #007700;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #FFF;
  
  background-color: #007700;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #FFF;
  background-color: #007700;
}

.navbar-default .navbar-toggle {
  border-color: #007700;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #007700;
}
.navbar-inverse .navbar-brand {
  color: #007700;
}
.navbar-inverse .navbar-nav > li > a {
  color: #007700;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: #fff;
  background-color: #007700;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: #FFFFFF;
  font-weight: bold;
  background-color: #007700;
}
.navbar-inverse .navbar-toggle {
  border-color: #007700;
}

.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
  background-color:  #007700;
}

.spinner {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  text-align: center;
  font-size: 10px;
}

.spinner > div {
  background-color: #007700;
  height: 100%;
  width: 10px;
  display: inline-block;
	
  
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}


.modal-dialog {}
.gallery > .thumbnail {margin-bottom:6px;}

.gallery > .carousel-control.left,.gallery > .carousel-control.right{
  background-image:none;
  margin-top:10%;
  width:5%;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  width: 100%;
}
.youtube-container { display: block; margin: 20px auto; width: 100%; max-width: 600px;}
.youtube-player { display: block; width: 100%; /* assuming that the video has a 16:9 ratio */ padding-bottom: 56.25%; overflow: hidden; position: relative; width: 100%; height: 100%; cursor: pointer; display: block; }
img.youtube-thumb { bottom: 0; display: block; left: 0; margin: auto; max-width: 110%; width: 110%; position: absolute; left:-5%; top: 0; height: auto }
div.play-button { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url("../images/play.png") no-repeat; }
#youtube-iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }