@import url('../fonts/font/font-style.css');

body {
	background:#fff;
	font-family: 'OpenSans';
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

a {
	transition: all 0.3s ease;
	
}

a {
	text-decoration: none;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}

h1,h2,h3,h4,h5,h6 {font-family: 'Exo2-SemiBold';}




.ThubnailSlider {float:left; margin:40px auto; width:100%;}

.ThubnailSlider .carousel-showmanymoveone .carousel-control {
  width: 4%;
  background-image: none;
}
.ThubnailSlider .carousel-showmanymoveone .carousel-control.left {
  margin-left: 15px;
}
.ThubnailSlider .carousel-showmanymoveone .carousel-control.right {
  margin-right: 15px;
}
.ThubnailSlider .carousel-showmanymoveone .cloneditem-1,
.ThubnailSlider .carousel-showmanymoveone .cloneditem-2,
.ThubnailSlider .carousel-showmanymoveone .cloneditem-3 {
  display: none;
}
@media all and (min-width: 768px) {
  .ThubnailSlider .carousel-showmanymoveone .carousel-inner > .active.left,
  .ThubnailSlider .carousel-showmanymoveone .carousel-inner > .prev {
    left: -50%;
  }
  .ThubnailSlider .carousel-showmanymoveone .carousel-inner > .active.right,
  .ThubnailSlider .carousel-showmanymoveone .carousel-inner > .next {
    left: 50%;
  }
  .ThubnailSlider .carousel-showmanymoveone .carousel-inner > .left,
  .ThubnailSlider .carousel-showmanymoveone .carousel-inner > .prev.right,
  .ThubnailSlider .carousel-showmanymoveone .carousel-inner > .active {
    left: 0;
  }
  .ThubnailSlider .carousel-showmanymoveone .carousel-inner .cloneditem-1 {
    display: block;
  }
}
@media all and (min-width: 768px) and (transform-3d), all and (min-width: 768px) and (-webkit-transform-3d) {
  .ThubnailSlider .carousel-showmanymoveone .carousel-inner > .item.active.right,
  .ThubnailSlider .carousel-showmanymoveone .carousel-inner > .item.next {
    -webkit-transform: translate3d(50%, 0, 0);
            transform: translate3d(50%, 0, 0);
    left: 0;
  }
  .ThubnailSlider .carousel-showmanymoveone .carousel-inner > .item.active.left,
  .ThubnailSlider .carousel-showmanymoveone .carousel-inner > .item.prev {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
    left: 0;
  }
  .ThubnailSlider .carousel-showmanymoveone .carousel-inner > .item.left,
  .ThubnailSlider .carousel-showmanymoveone .carousel-inner > .item.prev.right,
  .ThubnailSlider .carousel-showmanymoveone .carousel-inner > .item.active {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    left: 0;
  }
}
@media all and (min-width: 992px) {
  .ThubnailSlider .carousel-showmanymoveone .carousel-inner > .active.left,
  .ThubnailSlider .carousel-showmanymoveone .carousel-inner > .prev {
    left: -25%;
  }
.ThubnailSlider .carousel-showmanymoveone .carousel-inner > .active.right,
  .ThubnailSlider .carousel-showmanymoveone .carousel-inner > .next {
    left: 25%;
  }
  .ThubnailSlider .carousel-showmanymoveone .carousel-inner > .left,
  .ThubnailSlider .carousel-showmanymoveone .carousel-inner > .prev.right,
  .ThubnailSlider .carousel-showmanymoveone .carousel-inner > .active {
    left: 0;
  }
  .ThubnailSlider .carousel-showmanymoveone .carousel-inner .cloneditem-2,
  .ThubnailSlider .carousel-showmanymoveone .carousel-inner .cloneditem-3 {
    display: block;
  }
}
@media all and (min-width: 992px) and (transform-3d), all and (min-width: 992px) and (-webkit-transform-3d) {
  .ThubnailSlider .carousel-showmanymoveone .carousel-inner > .item.active.right,
  .ThubnailSlider .carousel-showmanymoveone .carousel-inner > .item.next {
    -webkit-transform: translate3d(25%, 0, 0);
            transform: translate3d(25%, 0, 0);
    left: 0;
  }
  .ThubnailSlider .carousel-showmanymoveone .carousel-inner > .item.active.left,
  .ThubnailSlider .carousel-showmanymoveone .carousel-inner > .item.prev {
    -webkit-transform: translate3d(-25%, 0, 0);
            transform: translate3d(-25%, 0, 0);
    left: 0;
  }
  .ThubnailSlider .carousel-showmanymoveone .carousel-inner > .item.left,
  .ThubnailSlider .carousel-showmanymoveone .carousel-inner > .item.prev.right,
  .ThubnailSlider .carousel-showmanymoveone .carousel-inner > .item.active {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    left: 0;
  }
}


.MainContainer {width:100%; margin:0px auto 0; float:left;}
.MainContainer .TwoSection {float:left; width:100%; margin:0 auto;}
.MainContainer .TwoSection .OurStory {float:left; width:100%; margin:0 auto;}
.MainContainer .TwoSection .OurStory:nth-of-type(even) .Overlay .OurStoryText {float:right; right:0;}
.MainContainer .TwoSection .OurStory .Overlay {width: 100%; background:rgba(0,0,0,.3); position: relative; height:580px; overflow:hidden;}
.MainContainer .TwoSection .OurStory .Overlay img {width:100%; z-index:-1; position:relative; height:100%;}
.MainContainer .TwoSection .OurStory .Overlay .OurStoryText {position:absolute; top:0; height:100%; width:50%; background:rgba(0,0,0,0.8); float:left; padding:50px 0 0;}
.MainContainer .TwoSection .OurStory .Overlay .OurStoryText h2 {text-transform:uppercase; font-size:40px; color:#fff; margin:30px auto 15px; display:table; text-align:center;}
.MainContainer .TwoSection .OurStory .Overlay .OurStoryText p {width:90%; display:table; margin:0 auto 20px; font-size:15px; color:#fff; text-align:center;} 

.WelcomeSection {float: left; width: 100%; padding:40px 0 20px; background: url(../images/mudBike/tyreBg.jpg) no-repeat center fixed; background-size: cover; margin:50px auto 50px;}
.WelcomeSection h2 {font-size:40px; color:#fff; text-align:center; display:table; margin:0px auto;}
.WelcomeSection .WelcomeMainSec {float:left; width:100%; margin:30px auto;}
.WelcomeSection .WelcomeMainSec ul {list-style:none; margin:0 auto; float:left; width:100%; padding:0}
.WelcomeSection .WelcomeMainSec ul li {float:left; width:31%; margin-right:2%;}
.WelcomeSection .WelcomeMainSec ul li .MainBlock {float: left; width: 100%; padding: 10px 10px 0; border: 1px solid #fff; border-radius: 4px; background: #fff; position: relative; top: 0; left: 0;}
.WelcomeSection .WelcomeMainSec ul li .MainBlock h3 {font-size:24px; text-align:center; color:#000; display:table; margin:0px auto 15px; text-transform:uppercase;}
.WelcomeSection .WelcomeMainSec ul li .MainBlock img {max-width:100%; border-radius:0px; display:table; padding:5px 5px 0;}
.WelcomeSection .WelcomeMainSec ul li .MainBlock a {text-decoration: none; position: absolute; bottom: -1px; font-size: 18px; color:#FF4500; background: #000; padding: 15px; right: -1px; border-radius: 0 0 4px 0px;}
.WelcomeSection .WelcomeMainSec ul li .MainBlock a:hover,
.WelcomeSection .WelcomeMainSec ul li .MainBlock a:focus {background:#FF4500; color:#fff;} 

.ImgGallery {float:left; width:100%; margin:0px auto;}
.ImgGallery img {max-width:100%; width:100%;}
.ImgGallery .MainGallery {padding:15px; border:1px solid #000; border-radius:4px; float:left; width:100%;}
.ImgGallery .thumbnail {padding:0; position:relative; top:0; left:0; border:none;}
.ImgGallery .thumbnail .Overlay {position:absolute; background:rgba(0,0,0,0); width:100%; height:100%; transition:1s ease;}
.ImgGallery .thumbnail:hover,
.ImgGallery .thumbnail:focus {outline:none;}
.ImgGallery .thumbnail:hover .Overlay {background:rgba(0,0,0,0.5);}
.ImgGallery .thumbnail .fa {font-size:40px; display:table; position:absolute; top:50%; margin:0 auto; text-align:center; left:50%; opacity:0}
.ImgGallery .thumbnail:hover .fa {color:#FF4500; opacity:1;} 

.ImgGallery .GalleryText {width:100%; margin:0 auto; border-top:1px solid #000; padding:20px 0 0; margin:15px auto 0;}
.ImgGallery .GalleryText p {font-size:16px; color:#000; text-align:center;}
.ImgGallery .GalleryText .BtnSec {float:left; width:100%; margin:10px auto 0;}
.ImgGallery .GalleryText .BtnSec span {width:auto; float:left; margin:8px auto 0;}
.ImgGallery .GalleryText .BtnSec span .fa {float:left; font-size:15px; color:#000; margin:4px auto 0;}
.ImgGallery .GalleryText .BtnSec span strong {float:left; margin-left:5px; font-size:15px; color:#000;}
.ImgGallery .GalleryText .BtnSec .btn-default {width:auto; min-width:100px; padding:6px 12px; text-align:center; font-size:15px; float:right; border:1px solid #FF4500; color:#FF4500}
.ImgGallery .GalleryText .BtnSec .btn-default:hover,
.ImgGallery .GalleryText .BtnSec .btn-default:focus {background:#FF4500; color:#fff; border:1px solid #FF4500;}  

.ImgGallery .page-header {margin:0 auto 20px;}
.ImgGallery .col-lg-4 {padding-left:0;}

.ContactSection {float:left; width:100%; margin:40px auto 0;}
.ContactSection .OurStory {float:left; width:100%; margin:0 auto;}
.ContactSection .OurStory .Overlay {width: 100%; background:rgba(0,0,0,.3); position: relative; height:400px; overflow:hidden;}
.ContactSection .OurStory .Overlay img {width:100%; z-index:-1; position:relative; height:100%;}
.ContactSection .OurStory .Overlay .OurStoryText {position:absolute; top:0; height:100%; width:50%; background:rgba(0,0,0,0.8); float:left; padding:80px 0% 0 12%;}
.ContactSection .OurStory .Overlay .OurStoryText h2 {font-size:40px; color:#fff; margin:30px auto 15px; display:table; text-align:left; text-transform:uppercase; width:100%; float:left;}
.ContactSection .OurStory .Overlay .OurStoryText p {width:100%; display:table; margin:0 auto 0px; font-size:15px; color:#fff; text-align:left; }
.ContactSection .OurStory .Overlay .OurStoryText p strong {font-weight:bold;font-family: 'Exo2-Bold';} 
.ContactSection .OurStory .Overlay .OurStoryText .Email {width:100%; margin:20px auto 0; float:left;}
.ContactSection .OurStory .Overlay .OurStoryText .Email strong {margin-right:10px; font-family: 'OpenSans';}

footer {float:left; width:100%; margin:0 auto; background:#000; padding:15px 0 0px;}
footer p {font-size:13px; color:#fff; text-align:center}
.SocialIcon {float:left; width:100%; margin:0 auto 20px;}
.SocialIcon ul {list-style:none; padding:0; width:auto; display:table; margin:0 auto;}
.SocialIcon ul li {width:auto; float:left; margin-right:15px;}
.SocialIcon ul li .fa {color:#fff; font-size:40px; transition: all 0.5s ease;}
.SocialIcon ul li:hover .fa,
.SocialIcon ul li:focus .fa {color:#FF4500}  


/*intro style start*/

.IntroSection {float:left; width:100%; margin:0 auto; background: url(../images/landing.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;}
.IntroSection img {max-width:100%; width:50%; margin:25px auto 0;}
.IntroSection .IntroText {float:right; width:42%; position:relative; left:0; top:259px;}
.IntroSection .IntroText a {width:auto; display:table; margin:0 auto;}
.IntroSection .IntroText img {width: auto; margin: 0 auto; display: table; position: relative; transition: all 0.5s ease; top:0px; transform: scale(1); left: 70px;}
.IntroSection .IntroText a:hover img,
.IntroSection .IntroText a:focus img {transform: scale(1.1);} 
.IntroSection .IntroText h3 {text-align: center; line-height:35px; width: 88%; margin: 0 auto; color: #282425; font-size:40px; position: absolute; top:180px; font-family: 'Utsaah-BoldItalic'; float: right; right: -40px;}
.IntroSection .IntroText ul {float: none; width: auto; margin: 50px auto 0; padding: 0; list-style: none; line-height: 44px; top: 80px; position: relative; display: table; right: auto; left:80px;}
.IntroSection .IntroText ul li {float:left; margin-right:10px;}
.IntroSection .IntroText ul li:last-child {margin:0 auto;}
.IntroSection .IntroText ul li a {text-decoration:none; float:left;}
.IntroSection .IntroText ul li a .fa {font-size:30px; width:60px; height:60px; border-radius: 100%; transition: all 0.5s ease; background: #282425; color: #fff; 
border: 1px solid #282425; display: table; margin: 0px auto 0; text-align: center; padding: 0; line-height:58px;}
.IntroSection .IntroText ul li a:hover .fa,
.IntroSection .IntroText ul li a:focus .fa{background:#fe5f01; color:#fff; border: 1px solid #fe5f01;} 

/*intro style end*/


/*----------------------------------responsive style------------------------------------*/

@media screen and (max-width: 1280px) {
	
}

@media screen and (max-width: 1030px) {
	
	
}

@media screen and (max-width: 970px) {
	
}


@media screen and (max-width: 800px) {
	
}

@media screen and (max-width: 740px) {
	
}

@media screen and (max-width: 736px) {
	
}

@media screen and (max-width: 731px) {
	
}

@media screen and (max-width: 640px) {
	
}


@media screen and (max-width: 600px) {
	
	
}

@media screen and (max-width: 570px) {
	
}

@media screen and (max-width: 420px) {
	
}

@media screen and (max-width: 360px) {
	
}

@media screen and (max-width: 320px) {
	
}