/* Custom page CSS
-------------------------------------------------- */


header {
 
  height:0px;


}

.bg-4 {
	background: url('../img/iObserve_standard.png') no-repeat center center fixed; 
    -webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
	padding-top: 190px;
}


/****************************************************/
/******Carousel**************/

img{
     width: 40%;
	}


.carousel-inner {
    
	  background-image: url("../img/binding_dark.jpg");
}
    
.carousel-caption {
	   
	   font-weight: normal;
       font-size: 1.5vw;
      right: 2%;
      left: 42%;
      top: 50%; 
	  transform: translateY(-50%);
      bottom: auto;
      text-align: left;
      text-shadow: none;
	   padding: 50px;
     }


	 
@media (max-width: 767px) { 


.carousel-caption {
       font-size: 10px;
      left: 42%;
	  padding: 2px;
	  line-height: 12px;

     }
	 
.note {
	font-size: 10px;
	}
}

	 
.carousel-indicators{
      font-size: 2em;
      bottom: -1%;
      text-align: left;
      text-shadow: none;	  
        }
		
.carousel-steps{
	text-transform: uppercase;
	min-width: 70px;
	padding: 25px 0px 75px;	
}
.btn{
	
	margin: 6px;
}
        
/***
 * Bootstrap relies on CSS transitions for animation, which makes it
 * easy to override.  Just add the vertical class to your carousel:
 * <div class='carousel vertical'>...</div>
 ***/

.carousel.vertical .carousel-inner {
  height: 100%;
}
.carousel.vertical .item {
  -webkit-transition: 0.6s ease-in-out top;
  -moz-transition:    0.6s ease-in-out top;
  -ms-transition:     0.6s ease-in-out top;
  -o-transition:      0.6s ease-in-out top;
  left:               0;
}
.carousel.vertical .active,
.carousel.vertical .next.left,
.carousel.vertical .prev.right    { top:     0; }
.carousel.vertical .next,
.carousel.vertical .active.right  { top:  100%; }
.carousel.vertical .prev,
.carousel.vertical .active.left   { top: -100%; }        



/**********Hover effect*********************/
.hovereffect {
width:100%;
height:160px;
float:left;
margin: 5px;
overflow:hidden;
position:relative;
text-align:center;
cursor:default;
background-image: url("../img/binding_dark.jpg");


}

.hovereffect .overlay {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
top:0;
left:0;
opacity:0;
background-color:rgba(0,0,0,0.1);
-webkit-transition:all .4s ease-in-out;
transition:all .4s ease-in-out
}

.hovereffect img {
width:66px;
top:70px;
display:inline-block;
position:relative;
-webkit-transition:all .4s linear;
transition:all .4s linear;
}

.hovereffect h2 {
text-transform:uppercase;
color:#fff;
text-align:center;
position:relative;
font-size:17px;

background:rgba(46,46,46,0.5);
-webkit-transform:translatey(-86px);
-ms-transform:translatey(-86px);
transform:translatey(-86px);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
padding:10px;
}

.hovereffect a.info {
text-decoration:none;
display:inline-block;
text-transform:uppercase;
color:#fff;
border:1px solid #fff;
background-color:transparent;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
margin:35px 0 0;
padding:7px 14px;
}
rt6789
.hovereffect a.info:hover {
box-shadow:0 0 5px #fff;
}

.hovereffect:hover img {
-ms-transform:scale(.5);
-webkit-transform:scale(.5);
transform:scale(.5);
opacity:.2;
filter:alpha(opacity=100);
}

.hovereffect:hover .overlay {
opacity:1;
filter:alpha(opacity=100);
}

.hovereffect:hover h2 {
opacity:1;
filter:alpha(opacity=100);
-ms-transform:translatey(0);
-webkit-transform:translatey(0);
transform:translatey(0);
background:rgba(217,27,31,0.9);
}

.hovereffect:hover a.info {
opacity:1;
filter:alpha(opacity=100);
-ms-transform:translatey(0);
-webkit-transform:translatey(0);
transform:translatey(0);
}

.hovereffect:hover a.info {
-webkit-transition-delay:.2s;
transition-delay:.2s;
}