<!DOCTYPE HTML>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>Tarin Fitness</title>
      <!--CSS SECTION START-->
      <link href="style.css" rel="stylesheet" type="text/css">
      <!--CSS SECTION END-->
   </head>
   <body>
      <!-- body content start here -->
      <!-- header content start here -->
      <header class="header">
         <div class="container">
            <div class="row">
               <div class="col-md-12">
                  <!-- navigation section start here -->
                  <nav>
                     <div class="navigationCtrl">
                        <nav class="navbar navbar-default">
                           <div class="container-fluid">
                              <!-- Brand and toggle get grouped for better mobile display -->
                              <div class="navbar-header">
                                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                 <span class="sr-only">Toggle navigation</span>
                                 <span class="icon-bar"></span>
                                 <span class="icon-bar"></span>
                                 <span class="icon-bar"></span>
                                 </button>
                              </div>
                              <!-- Collect the nav links, forms, and other content for toggling -->
                              <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                 <ul class="nav navbar-nav">
                                    <li class="active">
                                       <a href="#">
                                          <span class="home_icon"></span>HOME <!--<span class="sr-only">(current)</span>-->
                                       </a>
                                    </li>
                                    <li><a href="#">ABOUT US</a></li>
                                    <li><a href="#">MEMBERSHIP</a></li>
                                    <li><a href="#">FACILITIES</a></li>
                                    <li class="logo"><img alt="" src="images/logo.jpg" class="img-responsive" /></li>
                                    <li><a href="#">SERVICES</a></li>
                                    <li><a href="#">GALLERY</a></li>
                                    <li><a href="#">CONTACT US</a></li>
                                    <li><a href="#">CAREERS</a></li>
                                 </ul>
                              </div>
                              <!-- /.navbar-collapse -->
                           </div>
                           <!-- /.container-fluid -->
                        </nav>
                     </div>
                  </nav>
                  <!-- navigation section end here -->
                  <!-- slider section start here -->
                  <div class="sliderMain">
                     <ul class="bxslider">
                        <li><img alt="" src="images/slider_1.jpg" /></li>
                        <li><img alt="" src="images/slider_2.jpg" /></li>
                        <li><img alt="" src="images/slider_3.jpg" /></li>
                        <li><img alt="" src="images/slider_1.jpg" /></li>
                        <li><img alt="" src="images/slider_2.jpg" /></li>
                     </ul>
                     <div id="bx-pager">
                        <a data-slide-index="0" href=""><img alt="" src="thumb/thumb_1.jpg" /></a>
                        <a data-slide-index="1" href=""><img alt="" src="thumb/thumb_2.jpg" /></a>
                        <a data-slide-index="2" href=""><img alt="" src="thumb/thumb_3.jpg" /></a>
                        <a data-slide-index="0" href=""><img alt="" src="thumb/thumb_1.jpg" /></a>
                        <a data-slide-index="1" href=""><img alt="" src="thumb/thumb_2.jpg" /></a>
                     </div>
                  </div>
                  <!-- slider section end here -->
               </div>
            </div>
         </div>
      </header>
      <!-- header content end here -->
      <!-- body container section start here -->
      <div class="bodyContainer">
         <div class="container">
            <div class="row">
               <div class="col-md-8 col-sm-12 col-xs-12">
                  <div class="welcomeMsg gradient_bg">
                     <h3>welcome to <span class="color-blue">tarin fitness</span></h3>
                     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonum sit my nibh euismod tincidunt ut laoreet 
                        dolore magna aliquam erat volutpat. Ut wisi enim ad mi ainim veniam, quis nostrud exerci tation ullamcorper susc
                        ipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
                     </p>
                     <br>
                     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dol
                        ore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lo
                        bortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse 
                        molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
                        blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed.
                     </p>
                     <a class="btn-green" href="#"><span class="plus-icon">+</span>Read More</a>
                  </div>
                  <div class="clearfix"></div>
                  <div class="our_facility">
                     <div class="dashed-heading">our <span class="color-blue">facilities</span></div>
                     <!--<div class="col-md-4 no-padding">-->
                     <img alt="" src="images/our_facilities.png" class="img-responsive img-thumbnail">
                     <!--</div>-->
                     <div class="col-md-8 col-sm-12 col-xs-12 pull-left of">
                        <span class="heading-small">adipiscing elit, sed diam nonum sit my</span>
                        <p>adipiscing elit, sed diam nonum sit my nibh euismod tincidunt ut laoreet  dolore m
                           aliquam erat volutpat. Ut wisi enim ad mi ain im veniam, quis nostrud exerci tatiou
                           amcorper suscipit lobor itis nisl ut aliquip ex ea commodo consequat. Duis aut em
                           ad mi
                        </p>
                        <a href="#" class="btn-green"><span class="plus-icon">+</span>Read More</a>
                     </div>
                  </div>
               </div>
               <div class="col-md-4 col-sm-12 col-xs-12">
                  <div class="video gradient_bg">
                     <h3>featured video <span class="color-blue">session</span></h3>
                     <div class="clearfix"></div>
                     <img alt="" class="img-responsive video_ctrl" src="images/video_thumbnail.jpg">
                     <img alt="" class="img-responsive video_ctrl" src="images/video_thumbnail.jpg">
                  </div>
               </div>
               <div class="clearfix"></div>
            </div>
         </div>
         <div class="full-width">
            <div class="container">
               <div class="row">
                  <div class="col-md-12">
                     <div class="member gradient_bg">
                        <h3>membership <span class="color-blue">info</span></h3>
                        <div class="clearfix"></div>
                        <div class="col-md-4 no-padding col-sm-5 col-xs-12">
                           <ul class="member_contract">
                              <li><span class="membership_duration">guest trial</span><span class="right-arrow"></span><span class="color-blue">$</span>20 per day</li>
                              <li><span class="membership_duration">guest trial</span><span class="right-arrow"></span><span class="color-blue">$</span>20 per day</li>
                              <li><span class="membership_duration">guest trial</span><span class="right-arrow"></span><span class="color-blue">$</span>20 per day</li>
                              <li><span class="membership_duration">guest trial</span><span class="right-arrow"></span><span class="color-blue">$</span>20 per day</li>
                              <li><span class="membership_duration">guest trial</span><span class="right-arrow"></span><span class="color-blue">$</span>20 per day</li>
                           </ul>
                        </div>
                        <div class="col-md-8 col-sm-7 pull-left col-xs-12 memberTxt">
                           <span class="heading-small2">adipiscing elit, sed diam nonum sit my</span>
                           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
                              magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis 
                              nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie 
                              consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praes
                              ent luptatum zzril delenit augue duis dolore te feugait nulla.
                           </p>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- body container section end here -->
      <!-- footer section start here -->
      <footer class="footer">
         <div class="container">
            <div class="row">
               <div class="col-md-4 col-sm-6 col-xs-12 pull-left text-center"><small>copyright@2012    all right reserved</small></div>
               <div class="col-md-8 col-sm-6 col-xs-12 pull-right text-right">
                  <ul class="list-inline">
                     <li><a href="#">home</a></li>
                     <li><a href="#">about us</a></li>
                     <li><a href="#">facilities</a></li>
                     <li><a href="#">membership</a></li>
                     <li><a href="#">gallery</a></li>
                     <li><a href="#">contact us</a></li>
                  </ul>
               </div>
            </div>
         </div>
      </footer>
      <!-- footer section end here -->
      <!-- body content end here -->
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <script type="text/javascript">window.jQuery || document.write('<script src="js/jquery-1.11.1.min.js"><\/script>')</script>
      <script src="js/jquery.bxslider.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script src="js/custom.js"></script>
   </body>
</html>




@charset "utf-8";
/* CSS Document */

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
ol, ul {list-style: none;}
blockquote, q {quotes: none; }
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
table { border-collapse: collapse;	border-spacing: 0;}
a:focus{outline:0px;}
a:hover,a:focus{text-decoration:none;}
img {vertical-align: middle !important;}

body{ margin:0; padding:0; line-height:24px; font-family: 'Roboto', sans-serif; font-weight:400; }
p{ font-size: 14px; line-height:24px; }
h1{font-size: 36px; }
h2{font-size: 30px; }
h3{font-size: 24px; }
h4{font-size: 18px; }
h5{font-size: 14px; }
h6{font-size: 12px; }

/* page css start here */
.header { width:100%; float:left; display:block; /*min-height:567px;*/ height:auto; background:url(../images/banner_bg.jpg) repeat-x 0 0; }
.navigationCtrl { width:100%; float:left; display:block; margin:33px 0 9px 0; height:auto; position:relative; }
.navbar { border-radius:5px; margin-bottom:0; height:auto; max-height:50px; }
.navbar-nav > li > a {  background-color: #329bdd;  border: 1px solid #1b83c4;  box-shadow: 0 0 2px #d0d0d0 inset;  -moz-box-shadow: 0 0 2px #d0d0d0 inset;  -webkit-box-shadow: 0 0 2px #d0d0d0 inset;  -ms-box-shadow: 0 0 2px #d0d0d0 inset;  -o-box-shadow: 0 0 2px #d0d0d0 inset;  color: #fff !important;  display: inline-block;  font-size: 14px;  margin: 1px -1px;  padding: 12px 21px;  text-align: center;}
.navbar-nav > li > a:hover { background: -moz-linear-gradient(90deg, #78a403 0%, #f1ff09 100%);/* FF3.6+ */background: -webkit-gradient(linear, 90deg, color-stop(0%, #78a403), color-stop(100%, #f1ff09));/* Chrome,Safari4+ */background: -webkit-linear-gradient(90deg, #78a403 0%, #f1ff09 100%);/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(90deg, #78a403 0%, #f1ff09 100%);/* Opera 11.10+ */background: -ms-linear-gradient(90deg, #78a403 0%, #f1ff09 100%);/* IE10+ */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#78a403', endColorstr='#f1ff09', GradientType='0'); /* for IE */background: linear-gradient(0deg, #78a403 0%, #f1ff09 100%);/* W3C */ }
.navbar-nav > li:first-child { border-top-left-radius:5px; border-left-bottom-radius:5px; }
.navbar { box-shadow:0 0 1px #fff inset; -moz-box-shadow:0 0 1px #fff inset; -webkit-box-shadow:0 0 1px #fff inset; -o-box-shadow:0 0 1px #fff inset; -ms-box-shadow:0 0 1px #fff inset; }
.navbar-default { background-color:#268dc8; border:1px solid #48a3d9; }
.navbar-nav > .active > a { background: -moz-linear-gradient(90deg, #78a403 0%, #f1ff09 100%);/* FF3.6+ */background: -webkit-gradient(linear, 90deg, color-stop(0%, #78a403), color-stop(100%, #f1ff09));/* Chrome,Safari4+ */background: -webkit-linear-gradient(90deg, #78a403 0%, #f1ff09 100%);/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(90deg, #78a403 0%, #f1ff09 100%);/* Opera 11.10+ */background: -ms-linear-gradient(90deg, #78a403 0%, #f1ff09 100%);/* IE10+ */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#78a403', endColorstr='#f1ff09', GradientType='0'); /* for IE */background: linear-gradient(0deg, #78a403 0%, #f1ff09 100%);/* W3C */}
.logo {  position: relative !important;  top: -34px; z-index:1; }
.home_icon { background: url("../images/home_icon.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); display: inline-block; height: 21px; margin-right: 9px; margin-top: 0;width: 20px; float:left; }
.sliderMain { width:100%; display:block; float:left; position:relative; /*overflow:hidden;*/ margin-top:-100px; }
.camera_wrap, {  display: block;  float: left;  width: 100%;}
.camera_thumbs {  display: block;  float: left;  width: 100%;}
.camera_thumbs_cont {  border-bottom-left-radius: 4px;  border-bottom-right-radius: 4px;  overflow: hidden;  position: relative;  width: 100%;}
.camera_thumbs_cont > div {  float: left;  width: 100%;}
.camera_thumbs_cont ul {  overflow: hidden;  padding: 3px 4px 8px;  position: relative;  text-align: center;}
.camera_thumbs_cont ul li {  display: inline;  padding: 0 4px;  display: block;float: left;height: 114px;width: 173px;}
.bx-wrapper .bx-viewport {  background: none repeat scroll 0 0 transparent !important;  border: 5px solid transparent !important;  left: 0 !important;  transform: translateZ(0px);  box-shadow:none !important; }
#bx-pager a img { border:2px solid #706e6f !important; }
#bx-pager a.active img { border:2px solid #191919 !important; }
#bx-pager a { margin:0 15px; }
.bx-wrapper { margin:0 auto !important; }
#bx-pager {  background-color: #fff;  margin: 0 auto;  padding: 12px 5px;  text-align: center;}
.bx-prev { background:url(../images/bx-prev.png) no-repeat 0 0 !important; }
.bx-next { background:url(../images/bx-next.png) no-repeat 0 0 !important; }
.bx-wrapper .bx-prev { left:30px !important; }
.bx-controls-direction {  position: relative; }
.bx-wrapper .bx-controls-direction a { margin-top:54px !important; }
#bx-pager { position:relative; }
#bx-pager:before { position:absolute; content:''; background:url(../images/slider-thumb-bg.png) no-repeat 0 0; display:inline-block; width:100%; height:50px; top:123px; left:-10px; }
.bodyContainer { width:100%; height:auto; display:block; float:left; padding-top:30px;background: -moz-linear-gradient(90deg, #ffffff 0%, #e4f0f9 100%);/* FF3.6+ */background: -webkit-gradient(linear, 90deg, color-stop(0%, #ffffff), color-stop(100%, #e4f0f9));/* Chrome,Safari4+ */background: -webkit-linear-gradient(90deg, #ffffff 0%, #e4f0f9 100%);/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(90deg, #ffffff 0%, #e4f0f9 100%);/* Opera 11.10+ */background: -ms-linear-gradient(90deg, #ffffff 0%, #e4f0f9 100%);/* IE10+ */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e4f0f9', GradientType='0'); /* for IE */background: linear-gradient(0deg, #ffffff 0%, #e4f0f9 100%);/* W3C */}
.welcomeMsg { display:block; width:100%; float:left; padding:0 20px; margin-top:31px; }
.welcomeMsg > h3 { display:block; width:100%; float:left; font-size:22px; font-weight:700; line-height:45px; color:#000; text-transform:uppercase; position:relative; margin:23px 0 14px; position:relative; }
.welcomeMsg > h3:before {  background: url("../images/heading_bg.png") repeat scroll 0 0 rgba(0, 0, 0, 0);  content: "";  display: inline-block;  height: 13px;  position: absolute;  right: 0;  top: 18px;  width: 360px; }
.welcomeMsg p { color:#484848; font-size:14px; line-height:22px; }
.color-blue { color:#298ec8; }
.btn-green { padding:2px 12px; text-align:center; color:#fff; font-size:12px; border:1px solid #588822; border-radius:5px; margin:24px 0; float:left; position:relative;background: -moz-linear-gradient(90deg, #63a039 0%, #9cc425 100%);/* FF3.6+ */background: -webkit-gradient(linear, 90deg, color-stop(0%, #63a039), color-stop(100%, #9cc425));/* Chrome,Safari4+ */background: -webkit-linear-gradient(90deg, #63a039 0%, #9cc425 100%);/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(90deg, #63a039 0%, #9cc425 100%);/* Opera 11.10+ */background: -ms-linear-gradient(90deg, #63a039 0%, #9cc425 100%);/* IE10+ */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#63a039', endColorstr='#9cc425', GradientType='0'); /* for IE */background: linear-gradient(0deg, #63a039 0%, #9cc425 100%);/* W3C */ }
.btn-green:hover { color:#fff; }
.plus-icon { padding:0 5px; border-radius:10px; color:#fff; margin-right:10px;background: -moz-linear-gradient(90deg, #9cc425 0%, #63a039 100%);/* FF3.6+ */background: -webkit-gradient(linear, 90deg, color-stop(0%, #9cc425), color-stop(100%, #63a039));/* Chrome,Safari4+ */background: -webkit-linear-gradient(90deg, #9cc425 0%, #63a039 100%);/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(90deg, #9cc425 0%, #63a039 100%);/* Opera 11.10+ */background: -ms-linear-gradient(90deg, #9cc425 0%, #63a039 100%);/* IE10+ */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9cc425', endColorstr='#63a039', GradientType='0'); /* for IE */background: linear-gradient(0deg, #9cc425 0%, #63a039 100%);/* W3C */ }.our_facility { display:block; width:100%; float:left; padding:0; }
.heading-small { font-size:16px; font-weight:700; color:#484848; line-height:22px; display:inline-block; padding-bottom:10px; }
.heading-small2 { font-size:16px; font-weight:700; color:#484848; line-height:22px; display:inline-block; padding-bottom:10px; border-bottom:1px solid #c8d3db; margin-bottom:10px; }
p { color:#484848; font-size:14px; line-height:22px; }
.dashed-heading { display:block; width:100%; float:left; font-size:22px; font-weight:700; line-height:45px; color:#000; text-transform:uppercase; position:relative; margin:23px 0 14px; position:relative; }
.dashed-heading:before {  background: url("../images/heading_bg.png") repeat scroll 0 0 rgba(0, 0, 0, 0);  content: "";  display: inline-block;  height: 13px;  position: absolute;  right: 0;  top: 18px;  width: 490px; }
.no-padding { padding:0; }
.our_facility img {  display: inline-block;  float: left;  height: 180px;  width: 180px;  border:1px solid #c0c0c0;  border-radius:0;  padding:5px; margin-right:10px; }
.gradient_bg { border: 2px solid #fff; border-top-left-radius: 10px; border-top-right-radius: 10px;box-shadow: 0 -9px 10px -6px #9f9f9f;-moz-box-shadow: 0 -9px 10px -6px #9f9f9f;-webkit-box-shadow: 0 -9px 10px -6px #9f9f9f;-ms-box-shadow: 0 -9px 10px -6px #9f9f9f;-o-box-shadow: 0 -9px 10px -6px #9f9f9f;background: -moz-linear-gradient(90deg, #ffffff 0%, #e4f0f9 100%);/* FF3.6+ */background: -webkit-gradient(linear, 90deg, color-stop(0%, #ffffff), color-stop(100%, #e4f0f9));/* Chrome,Safari4+ */background: -webkit-linear-gradient(90deg, #ffffff 0%, #e4f0f9 100%);/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(90deg, #ffffff 0%, #e4f0f9 100%);/* Opera 11.10+ */background: -ms-linear-gradient(90deg, #ffffff 0%, #e4f0f9 100%);/* IE10+ */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e4f0f9', GradientType='0'); /* for IE */background: linear-gradient(0deg, #ffffff 0%, #e4f0f9 100%);/* W3C */}
.full-width { width:100%; height:auto; display:block; float:left; }
.video { display:block; width:100%; float:left; /*background:url("../images/welcome_bg.png") no-repeat scroll 0 0 / cover  rgba(0, 0, 0, 0);*/ padding:0 12px; margin-top:31px; }
.video > h3 { display:block; width:100%; float:left; font-size:22px; font-weight:700; line-height:45px; color:#000; text-transform:uppercase; position:relative; margin:23px 0 14px; position:relative; }
.video > h3:before {  background: url("../images/heading_bg.png") repeat scroll 0 0 rgba(0, 0, 0, 0);  content: "";  display: inline-block;  height: 13px;  position: absolute;  right: 0;  top: 18px;  width: 50px; }
.video_ctrl { display:block; margin:0 0 18px; }
ul.member_contract { margin:0; padding:0; }
ul.member_contract > li { margin:0; padding:5px 0; list-style-type:none; border-bottom:1px solid #c8d3db; font-size:14px; line-height:22px; display:inline-block; }
.width_50 { width:50%; float:left; }
.right-arrow { width:7px; height:11px; background:url(../images/right_arrow.png) no-repeat 0 0; display:inline-block; margin-right:18px; }
.membership_duration { width:164px; display:inline-block; text-transform:capitalize; }
.member { display:block; width:100%; float:left; /*background:url("../images/welcome_bg.png") no-repeat scroll 0 0 / cover  rgba(0, 0, 0, 0);*/ padding:0 20px 68px; margin-top:31px; }
.member > h3 { display:block; width:100%; float:left; font-size:22px; font-weight:700; line-height:45px; color:#000; text-transform:uppercase; position:relative; margin:23px 0 14px; position:relative; }
.member > h3:before {  background: url("../images/heading_bg.png") repeat scroll 0 0 rgba(0, 0, 0, 0);  content: "";  display: inline-block;  height: 13px;  position: absolute;  right: 0;  top: 18px;  width: 880px; }
.footer { background-color:#051626; font-size:12px; text-transform:uppercase; color:#fff; min-height:50px; width:100%; float:left; display:block; line-height:50px; border-top:1px solid #888888; }
.footer small { font-size:11px; }
.footer ul.list-inline li a { color:#fff; font-size:11px; }
.footer ul.list-inline li a:hover { color:#fff; }
.video_ctrl { cursor:pointer; }