<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--///////////////////////////
navbar Start
/////////////////////////-->
<!--navbar Start-->
<saction id="hit-nav-wrapper">
<div class="container">
<div class="hit-main-logo">
<a href="#"><img class="" src="https://lh3.googleusercontent.com/-N4NB2F966TU/WM7V1KYusRI/AAAAAAAADtA/fPvGVNzOkCo7ZMqLI6pPITE9ZF7NONmawCJoC/w185-h40-p-rw/logo.png"> </a>
</div>
<div class="hit-navbar unset right-slid" id="">
<ul class="hit-nav">
<li><a href="#">Product</a> </li>
<li><a href="#">Integrations</a> </li>
<li><a href="#">Pricing</a> </li>
<li><a href="#">Blog</a> </li>
<li class="signup"><a href="#"> Sign-in</a> </li>
</ul>
</div>
</div>
</saction>
<!--////////////////////////////////
navbar end
///////////////////////////////-->
<section id="lab_video_slider">
<div class="container-fluid">
<div class="row">
<div class="swiper-container">
<div class="swiper-wrapper">
<div id="slide_two" class="swiper-slide">
<div id="lab_video_text_overlay">
<div class="container">
<h2>Lorum Ipsum Deloras </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie</p> <a href="#" class="btn btn-default">View Our Work</a> <a href="#" class="btn btn-warning">Learn About Us</a> </div>
</div>
<video class="slider-video" width="100%" preload="auto" loop="" autoplay="" style="visibility: visible; width: 100%;" poster="">
<source src="https://dl.dropboxusercontent.com/s/931244iox7i0fpk/working-with-espresso.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>
</section>
/*///////////////////////////////NAVBAR///////////////////////////////*/
#hit-nav-wrapper {
background-color: #777;
border-color: #f36;
display: block;
padding: 15px 0px;
}
.hit-main-logo{
display:inline-block;
float:left;
}
.hit-navbar .hit-nav {
padding: 0px;
margin: 0px;
margin-top: 15px;
float: right;
margin-right: 15px;
}
.hit-navbar .hit-nav li{
list-style-type:none;
position: relative;
display: block;
float: left;
}
.hit-navbar > .hit-nav > li > a {
display: block;
padding: 8px 10px;
color: #fff;
font-size: 16px;
line-height: 20px;
font-weight: 400;
text-decoration:none;
font-weight: bold;
text-transform:uppercase;
}
.signup {
height: 40px;
}
li.signup a {
color: #f32841 !important;
border: none;
background: #fff;
padding: 8px 35px !important;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}
li.signup a:hover {
box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18), 0 4px 15px 0 rgba(0,0,0,0.15);
}
li.signup a {
border-radius: 6.25em;
margin-left: 15px;
}
/*/////////////////////////////// VIDEO SLIDER/////////////////////////////////*/
.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
z-index: 1;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-container-android .swiper-slide, .swiper-wrapper {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate(0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.swiper-slide {
-webkit-flex-shrink: 0;
-ms-flex: 0 0 auto;
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: transparent;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
#lab_video_text_overlay {
position: absolute;
color: #FFF;
width: 100%;
top: 25%;
}
#lab_video_text_overlay .container {
text-align: center;
margin: 0px auto;
}
#lab_video_text_overlay .container {
text-align: center;
margin: 0px auto;
background-color: transparent;
}
#lab_video_text_overlay h2 {
font-size:4em
}
#lab_video_text_overlay .btn {
border-radius:0;
text-transform:uppercase;
font-weight:200;
}
#lab_video_text_overlay .btn-warning {
background-color:#F5D328;
}
#lab_video_text_overlay .container {
text-align: center;
margin: 0px auto;
}
#lab_video_text_overlay h2 {
font-size: 4em;
}
#lab_video_text_overlay .btn {
border-radius: 0;
text-transform: uppercase;
font-weight: 200;
}
#lab_video_text_overlay .btn-warning {
background-color: #F5D328;
}
#lab_video_text_overlay {
position: absolute;
color: #FFF;
width: 100%;
top: 25%;
z-index:99;
}
@media screen and (max-width:991px) {
#lab_video_text_wrap {
height: 300px;
}
}
@media screen and (max-width:650px) {
#lab_video_text_wrap {
height: 250px;
}
#lab_video_text_overlay h2 {
font-size: 2em;
}
#lab_video_text_overlay p {
font-size: .9em;
}
}
