<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="images/favicon.ico">
<title>Carousel Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="//soldierupdesigns.com/carousel/css/bootstrap.min.css" rel="stylesheet">
<link href="//soldierupdesigns.com/carousel/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="//soldierupdesigns.com/carousel/css/font-awesome.min.css" rel="stylesheet">
<link href="//soldierupdesigns.com/carousel/css/jquery-ui.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Custom styles for this template -->
<link href="//soldierupdesigns.com/carousel/css/sticky-footer.css" rel="stylesheet">
<link href="//soldierupdesigns.com/carousel/css/metro.css" rel="stylesheet">
<link href="//soldierupdesigns.com/carousel/css/list-group-custom.css" rel="stylesheet">
<link href="//soldierupdesigns.com/carousel/css/tabs.css" rel="stylesheet">
</head>
<body id="page-top" name="page-top" class="active" data-spy="scroll" data-target=".navbar-fixed-top">
<div class="hidden" id="page-top" name="page-top"></div>
<!-- Fixed navbar -->
<nav class="navbar navbar-custom navbar-inverse navbar-fixed-top nav-justified" id="nav" name="nav">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand hidden-lg hidden-md" href="#">Project name</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav nav-justified">
<a class="navbar-brand hidden-sm hidden-xs" href="#">Project name</a>
<li class="active"><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li class="dropdown menu-large">
<a data-href="#" data-target="#megamenu1" class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;">Mega Menu <b class="caret"></b></a>
<ul class="dropdown-menu megamenu row" id="megamenu1" name="megamenu1">
<li class="col-sm-3 drop-menu">
<!-- Link Header One -->
<h4 class="mega-header">Link Header One</h4>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</li>
<li class="col-sm-3 drop-menu">
<!-- Link Header Two -->
<h4 class="mega-header">Link Header Two</h4>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</li>
<li class="col-sm-3 drop-menu">
<!-- Link Header Three -->
<h4 class="mega-header">Link Header Three</h4>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</li>
<li class="col-sm-3">
<!-- Link Header Four -->
<h4 class="mega-header">Link Header Four</h4>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<div class="container">
<div class="row">
<div class="carousel-caption">
<div class="col-md-6">
<img class="img-responsive img-thumbnail" src="//soldierupdesigns.com/carousel/images/portfolio-1.jpg">
</div>
<div class="col-md-6">
<h1>Slide 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p>
<p><a class="btn btn-lg btn-default" data-href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="row">
<div class="carousel-caption">
<div class="col-md-6">
<img class="img-responsive img-thumbnail" src="//soldierupdesigns.com/carousel/images/portfolio-2.jpg">
</div>
<div class="col-md-6">
<h1>Slide 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p>
<p><a class="btn btn-lg btn-primary" data-href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="row">
<div class="carousel-caption">
<div class="col-md-6">
<img class="img-responsive img-thumbnail" src="//soldierupdesigns.com/carousel/images/portfolio-3.jpg">
</div>
<div class="col-md-6">
<h1>Slide 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p>
<p><a class="btn btn-lg btn-danger" data-href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<ul class="nav nav-justified nav-carousel">
<li data-target="#carousel" data-slide-to="0" class="carousel-border active"><a data-href="#">Link One<small class="hidden-sm hidden-xs">Lorem ipsum dolor sit</small></a></li>
<li data-target="#carousel" data-slide-to="1"class="carousel-border"><a data-href="#">Link Two<small class="hidden-sm hidden-xs">Lorem ipsum dolor sit</small></a></li>
<li data-target="#carousel" data-slide-to="2"><a data-href="#">Link Three<small class="hidden-sm hidden-xs">Lorem ipsum dolor sit</small></a></li>
</ul>
</div>
<!-- Begin page content -->
<div class="container-fluid">
<div class="page-header">
<h1>Metro Icon</h1>
</div>
<div class="row col-xs-12">
<div class="col-md-3 col-sm-6 col-xs-12 pull-left">
<div class="panel panel-blue">
<div class="panel-body">
<p class="text-center"><i class="fa fa-envelope fa-5x"></i></p>
</div>
<div class="panel-footer">
<p>mail</p>
</div>
</div>
<div class="panel panel-orange col-xs-6 pull-left">
<div class="panel-body">
<p class="text-center"><i class="fa fa-envelope fa-5x"></i></p>
</div>
<div class="panel-footer">
<p>mail</p>
</div>
</div>
<div class="panel panel-red col-xs-6 pull-right">
<div class="panel-body">
<p class="text-center"><i class="fa fa-envelope fa-5x"></i></p>
</div>
<div class="panel-footer">
<p>mail</p>
</div>
</div>
<div class="panel panel-green">
<div class="panel-body">
<p class="text-center"><i class="fa fa-envelope fa-5x"></i></p>
</div>
<div class="panel-footer">
<p>mail</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 pull-left">
<div class="panel panel-green">
<div class="panel-body">
<p class="text-center"><i class="fa fa-envelope fa-5x"></i></p>
</div>
<div class="panel-footer">
<p>mail</p>
</div>
</div>
<div class="panel panel-red">
<div class="panel-heading"><h4>What Is Bootstrap?</h4></div>
<div class="panel-body">
<p>Bootstrap is front end frameworkto build custom web applications that are fast, responsive & intuitive. It consist of CSS and HTML for typography, forms, buttons, tables, grids, and navigation along with custom built-in jQuery plug-ins. and then some other stuff is thrown in just for filling purposes and does not have any purpose what so ever just content for filling purposes</p>
</div>
<div class="panel-footer">
<p>Panel Footer here</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 pull-left">
<div class="panel panel-blue">
<div class="panel-body">
<p class="text-center"><i class="fa fa-envelope fa-5x"></i></p>
</div>
<div class="panel-footer">
<p>mail</p>
</div>
</div>
<div class="panel panel-orange col-xs-6 pull-left">
<div class="panel-body">
<p class="text-center"><i class="fa fa-envelope fa-5x"></i></p>
</div>
<div class="panel-footer">
<p>mail</p>
</div>
</div>
<div class="panel panel-red col-xs-6 pull-right">
<div class="panel-body">
<p class="text-center"><i class="fa fa-envelope fa-5x"></i></p>
</div>
<div class="panel-footer">
<p>mail</p>
</div>
</div>
<div class="panel panel-green">
<div class="panel-body">
<p class="text-center"><i class="fa fa-envelope fa-5x"></i></p>
</div>
<div class="panel-footer">
<p>mail</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 pull-left">
<div class="panel panel-red">
<div class="panel-heading"><h4>What Is Bootstrap?</h4></div>
<div class="panel-body">
<p>Bootstrap is front end frameworkto build custom web applications that are fast, responsive & intuitive. It consist of CSS and HTML for typography, forms, buttons, tables, grids, and navigation along with custom built-in jQuery plug-ins. and then some other stuff is thrown in just for filling purposes and does not have any purpose what so ever just content for filling purposes</p>
</div>
<div class="panel-footer">
<p>Panel Footer here</p>
</div>
</div>
<div class="panel panel-green">
<div class="panel-body">
<p class="text-center"><i class="fa fa-envelope fa-5x"></i></p>
</div>
<div class="panel-footer">
<p>mail</p>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row col-xs-12">
<div class="page-header">
<h1 class="text-center">Custom List Group</h1>
</div>
<div class="col-xs-12 col-md-6 pull-left">
<h3 class="text-center text-primary">Basic Group</h3>
<ul class="list-group">
<li class="list-group-item list-group-item-green">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-blue">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-orange">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-red">Vestibulum at eros</li>
<li class="list-group-item">Morbi leo risus</li>
</ul>
</div>
<div class="col-xs-12 col-md-6 pull-left">
<h3 class="text-center text-primary">Linked Group</h3>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-green">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-blue">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-orange">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-red">Vestibulum at eros</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="page-header">
<h1>Tabbed Marketing</h1>
</div>
<div class="row col-xs-12">
<section style="background:#efefe9;">
<div class="container">
<div class="row">
<div class="board">
<!-- <h2>Welcome to IGHALO!<sup>™</sup></h2>-->
<div class="board-inner">
<ul class="nav nav-tabs" id="myTab">
<div class="liner"></div>
<li class="active">
<a data-target="#home" href="#" data-href="#" data-toggle="tab" title="welcome">
<span class="round-tabs one">
<i class="glyphicon glyphicon-home"></i>
</span>
</a>
</li>
<li>
<a data-target="#profile" href="#" data-href="#" data-toggle="tab" title="profile">
<span class="round-tabs two">
<i class="glyphicon glyphicon-user"></i>
</span>
</a>
</li>
<li>
<a data-target="#messages" href="#" data-href="#" data-toggle="tab" title="bootsnipp goodies">
<span class="round-tabs three">
<i class="glyphicon glyphicon-gift"></i>
</span>
</a>
</li>
<li>
<a data-target="#settings" href="#" data-href="#" data-toggle="tab" title="blah blah">
<span class="round-tabs four">
<i class="glyphicon glyphicon-comment"></i>
</span>
</a>
</li>
<li>
<a data-target="#doner" href="#" data-href="#" data-toggle="tab" title="completed">
<span class="round-tabs five">
<i class="glyphicon glyphicon-ok"></i>
</span>
</a>
</li>
</ul>
</div>
<!-- Tabbed Content -->
<div class="tab-content">
<div class="tab-pane fade in active" id="home">
<h2 class="head text-center">Welcome to Bootsnipp<sup>™</sup> <span style="color:#f48260;">♥</span></h2>
<div class="col-md-4">
<img class="img-responsive img-thumbnail" src="//soldierupdesigns.com/img/bg.jpg" Title="Demo Background Image" alt="demo image">
</div>
<div class="col-md-8">
<p class="narrow text-left lead">
Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim.
</p>
<p class="text-center">
<a href="" class="btn btn-success btn-outline-rounded green">Some Link <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a>
</p>
</div>
</div>
<div class="tab-pane fade" id="profile">
<h2 class="head text-center">Create a Bootsnipp<sup>™</sup> Profile</h2>
<div class="col-md-4">
<img class="img-responsive img-thumbnail" src="//soldierupdesigns.com/img/bg.jpg" Title="Demo Background Image" alt="demo image">
</div>
<div class="col-md-8">
<p class="narrow text-left lead">
Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim.
</p>
<p class="text-center">
<a href="" class="btn btn-success btn-outline-rounded green">Some Link <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a>
</p>
</div>
</div>
<div class="tab-pane fade" id="messages">
<h2 class="head text-center">Bootsnipp goodies</h2>
<div class="col-md-4">
<img class="img-responsive img-thumbnail" src="//soldierupdesigns.com/img/bg.jpg" Title="Demo Background Image" alt="demo image">
</div>
<div class="col-md-8">
<p class="narrow text-left lead">
Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim.
</p>
<p class="text-center">
<a href="" class="btn btn-success btn-outline-rounded green">Some Link <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a>
</p>
</div>
</div>
<div class="tab-pane fade" id="settings">
<h2 class="head text-center">Drop comments!</h2>
<div class="col-md-4">
<img class="img-responsive img-thumbnail" src="//soldierupdesigns.com/img/bg.jpg" Title="Demo Background Image" alt="demo image">
</div>
<div class="col-md-8">
<p class="narrow text-left lead">
Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim.
</p>
<p class="text-center">
<a href="" class="btn btn-success btn-outline-rounded green">Some Link <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a>
</p>
</div>
</div>
<div class="tab-pane fade" id="doner">
<div class="text-center">
<i class="img-intro icon-checkmark-circle"></i>
</div>
<h2 class="head text-center">thanks for staying tuned! <span style="color:#f48260;">♥</span> Bootstrap</h2>
<div class="col-md-4">
<img class="img-responsive img-thumbnail" src="//soldierupdesigns.com/img/bg.jpg" Title="Demo Background Image" alt="demo image">
</div>
<div class="col-md-8">
<p class="narrow text-left lead">
Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim.
</p>
<p class="text-center">
<a href="" class="btn btn-success btn-outline-rounded green">Some Link <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a>
</p>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- Footer -->
<footer id="footer">
<div class="col-lg-10 col-lg-offset-1 text-center">
<div class="container">
<p style="font-weight: 700; letter-spacing: 1px; text-transform: uppercase;">Copyright © <span class="text-primary"><a class="text-primary" href="//soldierupdesigns.com" target="_self" title="Soldier-up Designs Homepage">Soldier-up Designs</a></span> 2015</p>
<ul class="nav pull-right scroll-top" style="cursor:pointer;">
<li><a data-href="#" title="Scroll to top" style="color:#000000;"><i class="glyphicon glyphicon-chevron-up"></i></a></li>
</ul>
</div>
</div>
</footer>
<script src="//soldierupdesigns.com/carousel/js/jquery.min.js"></script>
<script src="//soldierupdesigns.com/carousel/js/jquery-ui.min.js"></script>
<script src="//soldierupdesigns.com/carousel/js/bootstrap.min.js"></script>
</body>
</html>
@import url(http://fonts.googleapis.com/css?family=Kreon:400,700);
html, body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
-webkit-font-smoothing: antialiased;
font: normal 100% arial,sans-serif;
}
html {
position: relative;
}
body{
margin:0;
padding:0;
width:100%;
max-width:100%;
overflow-x:hidden;
background:#efefef;
}
article, aside, div, dt, figcaption, footer, form, header, hgroup, html, main, nav {
display: block;
}
/*NAVBAR CUSTOM*/
.navbar-brand {
float: left;
font-size: 150%;
width:auto;
}
.social li img{
width:50%;
height:50%;
}
@media (min-width: 767px) {
.navbar-nav.nav-justified > li{
float:none;
}
}
.navbar-nav {
margin: 1px 1px;
z-index:100;
clear:none;
}
/* customize nav style */
.navbar-custom {
background-color: #2e2e2e;
font-weight:700;
text-transform:uppercase;
border-width:0;
}
.navbar-custom .navbar-nav>li>a {
color: #ddd;
}
.navbar-collapse{
background:#2e2e2e;
margin:0;
padding:0;
}
.navbar-nav.nav-justified > li:nth-child(2),
.navbar-nav.nav-justified > li:nth-child(3),
.navbar-nav.nav-justified > li:nth-child(4),
.navbar-nav.nav-justified > li:nth-child(5){
border-right:1px #5e5e5e solid;
}
.navbar-nav.nav-justified > li:nth-child(3) > a:hover,
.navbar-nav.nav-justified > li:nth-child(4) > a:hover,
.navbar-nav.nav-justified > li:nth-child(5) > a:hover,
.navbar-nav.nav-justified > li:nth-child(3) > a:focus,
.navbar-nav.nav-justified > li:nth-child(4) > a:focus,
.navbar-nav.nav-justified > li:nth-child(5) > a:focus{
border-bottom: 4px #ff0000 solid;
background:#222222;
}
.navbar-nav.nav-justified > li:nth-last-child > a:hover,
.navbar-nav.nav-justified > li:nth-last-child > a:focus,
.navbar-nav.nav-justified > li:nth-last-child > a .active{
margin-bottom:-4px;
}
.navbar-nav.nav-justified > .navbar-nav .active,
.navbar-nav.nav-justified > .active,
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .active > a{
border-bottom: 2px #ff0000 solid;
font-weight:700;
text-transform:uppercase;
outline:none;
box-shadow: 0px 3px 9px rgba(250, 250, 250, 0.45) inset;
z-index:103;
}
.navbar-nav.nav-justified > li:first-child{
border-right:1px #5e5e5e solid;
border-bottom:none;
}
.navbar-custom .dropdown-menu{
right:0;
}
.navbar-custom .navbar-nav>.dropdown>a .caret {
border-top-color: #999;
border-bottom-color: #999;
}
.navbar-collapse.in { /*3.0.2 bug workaround*/
overflow-y: visible;
}
.navbar-toggle {
outline:0;
}
/*CAROUSEL FADE START*/
.carousel-fade .carousel-inner .item {
opacity: 0;
-webkit-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
z-index:1;
}
body{
background:#222;
overflow-x:hidden;
padding-bottom:0;
margin-bottom:0;
}
.carousel-fade .carousel-inner .active {
opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
opacity: 0;
z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
#carousel .nav a small {
display:block;
}
#carousel .nav {
font-weight:700;
text-transform:uppercase;
background:#222;
color:#fff;
z-index:10;
outline:none;
}
#carousel .nav a {
border-radius:0px;
color:#fff;
}
#carousel{
z-index:51;
}
.nav-carousel{
padding-bottom:0%;
width: 100%;
z-index:101;
-webkit-transition: all 3s ease-in-out;
transition: all 3s ease-in-out;
margin-bottom:0;
height:auto;
position:absolute;
bottom:0;
border-bottom: .5px #ededed solid;
border-top: .5px #ededed solid;
}
.carousel-border{
border-right:2px solid #fff;
}
.nav-carousel > .active > a, .nav-carousel > .active > a:hover, .nav-carousel > .active > a:focus, #carousel a:hover, #carousel a:focus{
background-color: #ff0000;
color: #fff;
outline:none;
cursor:pointer;
}
.nav-carousel.affix{
width: 100%;
position: static;
z-index:101;
height:auto;
padding-bottom:0%;
}
.nav-carousel > li{
z-index:100;
padding-bottom:0%;
}
html,
body,
.carousel,
.carousel-inner,
.carousel-inner .item {
height: 100%;
margin-bottom:0;
padding:0;
z-index:1;
}
.carousel-inner .item .container .row{
margin:10% 15% 5% 0%;
padding:0;
}
.item:nth-child(1) {
background: url('//soldierupdesigns.com/carousel/images/slide1.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin:0;
padding:0;
z-index:-1;
width:100%;
height:100%;
font-size:100%;
}
.item:nth-child(2) {
background: url('//soldierupdesigns.com/carousel/images/slide2.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin:0;
padding:0;
z-index:-1;
width:100%;
height:100%;
font-size:100%;
}
.item:nth-child(3) {
background: url('//soldierupdesigns.com/carousel/images/slide3.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin:0;
padding:0;
z-index:-1;
width:100%;
height:100%;
font-size:100%;
}
.carousel-caption{
z-index: 52;
display: block;
right: 0;
bottom: 0;
left: 0;
top: 0;
padding-bottom: 30px;
background: rgba(44, 44, 44, 0.8);
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin:0;
padding:0;
height: 100% !important;
}
.carousel-caption .col-md-6{
margin-top:7%;
}
.carousel-inner .item .active > .carousel-caption {
z-index: 52;
display: block;
}
.carousel-caption p > .btn{
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 800;
padding-top:1%;
letter-spacing: 1px;
text-transform: uppercase;
}
/* RESPONSIVE Carousel CSS
-------------------------------------------------- */
@media (min-width: 768px) {
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 10%;
font-size: 21px;
line-height: 1.4;
}
}
/*CAROUSEL FADE END*/
/*Page-header styling*/
.page-header > h1{
color:#fff;
}
/*
========================================
=======CUSTOM BOOTSTRAP Buttons=========
========================================
*/
/*BTN-SUCCESS*/
.btn-success:hover,
.btn-success:focus,
.btn-success.focus,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
color: #fff;
background-color: #449d44;
border-color: #398439;
box-shadow: inset 0 0 0 2px #398439;
}
/*BTN-DANGER*/
.btn-danger:hover,
.btn-danger:focus,
.btn-danger.focus,
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
color: #fff;
background-color: #c9302c;
border-color: #ac2925;
box-shadow: inset 0 0 0 2px #ac2925;
}
/*BTN-PRIMARY*/
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
color: #fff;
background-color: #286090;
border-color: #204d74;
box-shadow: inset 0 0 0 2px #204d74;
}
.btn-default {
border: 2px solid #219ab3;
color: #219ab3;
background-color: transparent;
}
.btn-inverse {
background-color: #222;
border-color: #080808;
color: #9d9d9d;
}
.btn-inverse:hover,
.btn-inverse:focus,
.btn-inverse.focus,
.btn-inverse:active,
.btn-inverse.active,
.open > .dropdown-toggle.btn-inverse {
border: 1px solid #219ab3;
outline: 0;
color: #000;
background-color: #219ab3;
}
.btn {
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 400;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.btn-default:hover,
.btn-default:focus {
border: 1px solid #219ab3;
outline: 0;
color: #000;
background-color: #219ab3;
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 0;
}
/* Set the fixed height of the footer here */
#footer{
height: 75px;
margin-top:5%;
z-index:120;
color:#ffffff;
margin-left:0;
margin-right:0;
font-weight:700;
background-color: #434343;
}
#footer p{
height:100%;
line-height:100%;
padding:1%;
}
footer a {
color:#efefef;
}
.scroll-top {
position:fixed;
bottom:0;
right:6%;
z-index:50;
background: #ff0000;
color:#fff;
font-size:24px;
border-top-left-radius:3px;
border-top-right-radius:3px;
}
.scroll-top i{
color:#fff
}
.scroll-top i a:link,.scroll-top i a:visited {
color:#fff;
}
.scroll-top a:hover {
color:#222;
}
footer li i:hover, footer li a:hover {
color:#ff0000;
}
/*
----------------------PANEL CUSTOM----------------------------------------
*/
.panel-custom > .panel-heading {
color: #ff0000;
background-color: #000000;
}
.panel-custom > .panel-body {
color: #9fa7b7;
background-color: #5a6378;
border:none;
}
.panel-body h3{
color:#ffffff;
font-weight:700;
text-transform:uppercase;
margin-bottom:4%;
}
.panel-custom > .panel-footer {
color: #ffffff;
background-color: #414859;
border:none;
max-height:100%;
height:60px;
margin-bottom:15%;
}
.panel-custom > .panel-heading .badge {
color: #ff3300;
background-color: #ffffff;
}
.panel-heading.post-heading1{
background-image: url("../images/escalade.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment: static;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
max-width:100%;
height:300px;
}
.panel-heading.section41{
background-image:url("../images/eee.gif");
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment: static;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
max-width:100%;
max-height:100%;
height:250px;
}
.panel-heading.section42{
background-image:url("../images/444.gif");
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment: static;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
max-width:100%;
max-height:100%;
height:250px;
}
.panel-heading.section43{
background-image:url("../images/990000.gif");
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment: static;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
max-width:100%;
max-height:100%;
height:250px;
}
.dropdown-menu{
position: absolute;
z-index: 51;
float: left;
min-width: 160px;
margin: 2px 0px 0px;
font-size: 14px;
text-align: left;
list-style: outside none none;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.176);
}
.nav-justified > .dropdown .dropdown-menu{
margin-top:10px;
}
/* MEGA MENU STYLE
********************************/
/* To Dropdown navbar dropdown on hover */
.navbar-nav > li:hover > .dropdown-menu{
display: block;
background:#3e3e3e; /* remove background to make transparent*/
box-shadow:none; /*get rid of shadow to make transparent*/
margin-top:0px; /*to adjust padding of dropdown in respect to navbar bottom */
opacity:1;
}
.navbar-nav > li > .dropdown-menu > .open{
margin-top:1px !important;
padding-top:1px;
}
.menu-large{
position: static !important;
margin-top:1px;
}
.megamenu{
padding: 20px 0px;
width:100%;
}
.megamenu> li > ul{
padding: 0;
margin: 0;
background:#3e3e3e;
}
.megamenu> li > ul > li{
list-style: none;
}
.drop-menu{
border-right: 1.5px solid #fff;
}
.megamenu> li > ul > li > a{
display: block;
padding: 2% 5%;
clear: both;
font-size: 120%;
line-height: 100%;
color: #ff0000 !important;
white-space: normal;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
width:55%;
margin:0 0 0 15%;
}
.megamenu> li > ul > li > a:hover,
.megamenu> li > ul > li > a:focus{
text-decoration: none;
color: #fff !important;
background-color: #ff0000;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
border-right: 5px solid #fff;
}
.megamenu.disabled > a,
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus{
color: #fff;
}
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus{
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
cursor: not-allowed;
}
li.dropdown-header.megaheader{
color: #ff3300;
font-size: 100%;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.mega-header{
background:rgba(45, 45, 45, 0.8);
font-weight:900;
text-transform:uppercase;
padding:2% 2% 4% 2%;
color:#ffffff;
text-align:center;
line-height:100%;
border-bottom:4px solid #fff;
width:auto;
outline:0;
}
@media (max-width: 768px){
.megamenu{
margin-left:0;
margin-right:0;
}
.megamenu> li {
margin-bottom:30px;
}
.megamenu> li:last-child{
margin-bottom: 0;
}
.megamenu.dropdown-header{
padding: 3px 15px !important;
}
.navbar-nav .open .dropdown-menu .dropdown-header{
color:#fff;
}
}
$('.carousel').carousel();
$(document).ready( function()
{
var carouselContainer = $('.carousel');
var slideInterval = 2500;
$('#carousel').carousel({
interval: slideInterval
});
var clickEvent = false;
$('#carousel').on('click', '.nav-carousel a', function() {
clickEvent = true;
$('.nav-carousel li').removeClass('active');
$(this).parent().addClass('active');
}).on('slid.bs.carousel', function(e)
{
if(!clickEvent)
{
var count = $('.nav-carousel').children().length -1;
var current = $('.nav-carousel li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id)
{
$('.nav-carousel li').first().addClass('active');
}
}
clickEvent = false;
});
function toggleCaption()
{
$('.carousel-caption').hide();
var caption = carouselContainer.find('.active').find('.carousel-caption');
caption.delay(500).toggle("slide", {direction:"right"}).animate({duration: "fast", easing: "linear"});
}
carouselContainer.carousel({
interval: slideInterval,
cycle: true,
pause: "hover"
}).on('slid.bs.carousel', function()
{
toggleCaption();
});
});
/* highlight the top nav as scrolling occurs */
$('body').scrollspy({ target: '#nav' })
$(document).ready(function() {
var bodyHeight = $("body").height();
var vwptHeight = $(window).height();
if (vwptHeight > bodyHeight)
{
$("footer#footer").css("position","absolute").css("bottom",0);
}
});
/* smooth scrolling for scroll to top */
$('.scroll-top').click(function(){
$('body,html').animate({scrollTop:0},1000);
})
// Dropdown Menu Fade
jQuery(document).ready(function(){
$(".dropdown").hover(
function() { $('.dropdown-menu', this).fadeIn("fast");
},
function() { $('.dropdown-menu', this).fadeOut("fast");
});
});
// Dropdown Menu Fade
jQuery(document).ready(function(){
$(".dropdown").hover(
function() { $('.dropdown-menu', this).stop().fadeIn("fast");
},
function() { $('.dropdown-menu', this).stop().fadeOut("fast");
});
});
/* affix the Carousel Buttons to Carousel Item on scroll */
$('.nav-carousel').bind({
offset:
{
top: $('#carousel').height()-$('.nav-carousel').height()
}
});
/* Popover Declaration */
$('[data-toggle="popover"]').popover();
$('body').click(function(e)
{
//only buttons
if($(e.target).data('toggle') !== 'popover'
&& $(e.target).parents('.popover.in').length === 0){
$('[data-toggle="popover"]').popover('hide');
}
//buttons and icons within buttons
/*
if ($(e.target).data('toggle') !== 'popover'
&& $(e.target).parents('[data-toggle="popover"]').length === 0
&& $(e.target).parents('.popover.in').length === 0)
{
$('[data-toggle="popover"]').popover('hide');
}
*/
});
//Easing Scroll replace Anchor name in URL and Offset Position
$(function() {
$('a[href*=#]:not([href=#])').click(function()
{
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname)
{
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top -60
}, 1000);
return false;
}
}
});
});
//Tabs Tooltip function
$(function(){
$('a[title]').tooltip();
});
