<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 ---------->
<div id="page-top" name="page-top" class="active" data-spy="scroll" data-target=".navbar-static-top"></div>
<div class="slideout-menu" id="slideout-menu">
<h3 class="slideout-menu">Menu <a href="#" class="slideout-menu-toggle">×</a></h3>
<ul class="slideout-menu-list">
<li class="active"><a href="#page-top"><strong>Page Top </strong></a></li>
<li><a href="#posts">Posts</a></li>
<li><a href="#section3">About</a></li>
<li><a href="#section4">News</a></li>
<li><a href="#section5">Contact</a></li>
<li><a href="#footer">Page Bottom</a></li>
</ul>
</div><!--/.slideout-menu-->
<div class="main">
<header class="masthead">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 title-block">
<h1 class="title"><a href="#" title="Bootstrap Binding Sticky Navigation and Viewport Sizes Images Template"><span class="text-danger"><b>Bootstrap </b></span> Binding <span class="text-danger"><b>Sticky </b></span>Navigation & <span class="text-danger">Viewport </b></span>Sizing</a><br>
<small>An image <span class="text-danger"><b>That</b></span>Covers the <span class="text-danger"><b>Viewport</b></small></h1>
</div>
<div class="col-sm-6">
<div class="pull-right hidden-xs">
</div>
</div>
</div>
</div>
</header>
<!-- Fixed navbar -->
<div class="navbar navbar-custom navbar-inverse navbar-static-top" id="nav" name="nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav nav-justified">
<li class="active"><a href="#page-top"><strong>Page Top </strong></a></li>
<li><a href="#posts">Posts</a></li>
<li><a href="#section3">About</a></li>
<li><a href="#section4">News</a></li>
<li><a href="#section5">Contact</a></li>
<li class="dropdown menu-large">
<a data-href="#" class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;">Categories <b class="caret"></b></a>
<ul class="dropdown-menu megamenu row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header megaheader">Glyphicons</li>
<li><a href="#">Available glyphs</a></li>
<li class="disabled"><a href="#">How to use</a></li>
<li><a href="#">Examples</a></li>
<li class="divider"></li>
<li class="dropdown-header megaheader">Dropdowns</li>
<li><a href="#">Example</a></li>
<li><a href="#">Aligninment options</a></li>
<li><a href="#">Headers</a></li>
<li><a href="#">Disabled menu items</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header megaheader">Button groups</li>
<li><a href="#">Basic example</a></li>
<li><a href="#">Button toolbar</a></li>
<li><a href="#">Sizing</a></li>
<li><a href="#">Nesting</a></li>
<li><a href="#">Vertical variation</a></li>
<li class="divider"></li>
<li class="dropdown-header megaheader">Button dropdowns</li>
<li><a href="#">Single button dropdowns</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header megaheader">Input groups</li>
<li><a href="#">Basic example</a></li>
<li><a href="#">Sizing</a></li>
<li><a href="#">Checkboxes and radio addons</a></li>
<li class="divider"></li>
<li class="dropdown-header megaheader">Navs</li>
<li><a href="#">Tabs</a></li>
<li><a href="#">Pills</a></li>
<li><a href="#">Justified</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header megaheader">Navbar</li>
<li><a href="#">Default navbar</a></li>
<li><a href="#">Buttons</a></li>
<li><a href="#">Text</a></li>
<li><a href="#">Non-nav links</a></li>
<li><a href="#">Component alignment</a></li>
<li><a href="#">Fixed to top</a></li>
<li><a href="#">Fixed to bottom</a></li>
<li><a href="#">Static top</a></li>
<li><a href="#">Inverted navbar</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#footer">Page Bottom</a></li>
<li><a data-target="#" href="#" class="slideout-menu-toggle" data-toggle="slideout-menu"><i class="fa fa-bars"></i> More</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container -->
</div><!--/.navbar -->
</div>
<div class="container">
<div class="row">
<h2>Some Text Here to display that image<br>is fixed to viewport</h2>
</div>
</div>
<!-- Begin page content -->
<div class="container fluid">
<div class="divider" id="posts"></div>
<div class="row">
<div class="col-lg-8 col-sm-12">
<div class="panel panel-lg panel-custom">
<div class="panel-heading post-heading1">
</div>
<div class="panel-body">
<h3>My First Post about nothing - Totally Nothing</h3>
<p><i class="fa fa-user"> </i><a data-href="#user1" style="color:#0099FF; font-weight:700;">John Doe</a> <i class="fa fa-clock-o"> </i> 10/17/2014 10:59 AM</p>
<p class="post-content">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 jQuery plug-ins and support for responsive layouts. With dozens of reusable components for navigation, pagination, labels, alerts etc...</p>
</div>
<div class="panel-footer"><a type="button" class="btn btn-primary pull-right" data-href="button-link" style="color:#ffffff; font-weight:700; text-transform:uppercase;">Read More</a></div>
</div>
<div class="panel panel-lg panel-custom">
<div class="panel-heading post-heading1">
</div>
<div class="panel-body">
<h3>My First Post about nothing - Totally Nothing</h3>
<p><i class="fa fa-user"> </i><a data-href="#user1" style="color:#0099FF; font-weight:700;">John Doe</a> <i class="fa fa-clock-o"> </i> 10/17/2014 10:59 AM</p>
<p class="post-content">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 jQuery plug-ins and support for responsive layouts. With dozens of reusable components for navigation, pagination, labels, alerts etc...</p>
</div>
<div class="panel-footer"><a type="button" class="btn btn-primary pull-right" data-href="button-link" style="color:#ffffff; font-weight:700; text-transform:uppercase;">Read More</a></div>
</div>
</div>
<div class="col-lg-4 col-sm-12">
<div class="panel panel-lg panel-custom">
<div class="panel-heading">
<h4 class="post-heading1">Login</h4>
</div>
<div class="panel-body">
<p class="post-content">
<form role="form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" id="focusedInput" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control" id="focusedInput" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-6 pull-left">
<div class="checkbox pull-left">
<label>
<input type="checkbox"> Remember Me
</label>
</div>
</div>
<div class="col-sm-6 pull-right">
<button type="submit" class="btn btn-primary pull-right">SIGN IN</button>
</div>
</div>
<hr>
<br>
<div class="col-lg-6 col-sm-12">
<a class="btn btn-block btn-social btn-twitter" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-twitter']);">
<i class="fa fa-twitter"></i> Twitter
</a>
</div>
<div class="col-lg-6 col-sm-12">
<a class="btn btn-block btn-social btn-facebook" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-facebook']);">
<i class="fa fa-facebook"></i> Facebook
</a>
</div>
</form>
</p>
</div>
<div class="panel-footer">
<br>
<p class="text-center" style="font-size:90%;">
<span class="col-sm-6"><a data-href="#fpassword" style="color:white; text-decoration:none; cursor:pointer">Forgot Password?</a></span>
<span class="col-sm-6"><a data-href="#naccount" style="color:white; text-decoration:none;">No account?<span style="color:red; cursor:pointer"> Sign Up!</span></a></span>
</p>
</div>
</div>
<div class="panel panel-lg panel-custom">
<div class="panel-heading">
<h4 class="post-heading1">Newsletter</h4>
</div>
<div class="panel-body">
<p class="post-content">
<form role="form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input type="text" class="form-control input-lg" id="focusedInput" placeholder="Your Email">
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-block btn-primary pull-right">SIGN UP</button>
</div>
</form>
</p>
</div>
<div class="panel-footer">
<p class="text-center" style="font-size:90%; margin-top:2%;">
Design, build, test, and prototype using Bootstrap in real-time from your Web browser
</p>
</div>
</div>
<div class="panel panel-lg panel-custom">
<div class="panel-heading">
<h4 class="post-heading1">Recent Articles</h4>
</div>
<div class="panel-body">
<p class="post-content">
<div class="list-group" style="z-index:1;">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">Article Title 1</h4>
<p class="list-group-item-text">Fusce nisl arcu, mattis non consequat et, vestibulum at dolor. Pellentesque in orci nisi. Pellentesque.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Article Title 2</h4>
<p class="list-group-item-text">Fusce nisl arcu, mattis non consequat et, vestibulum at dolor. Pellentesque in orci nisi. Pellentesque.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Article Title 3</h4>
<p class="list-group-item-text">Fusce nisl arcu, mattis non consequat et, vestibulum at dolor. Pellentesque in orci nisi. Pellentesque.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Article Title 4</h4>
<p class="list-group-item-text">Fusce nisl arcu, mattis non consequat et, vestibulum at dolor. Pellentesque in orci nisi. Pellentesque.</p>
</a>
</div>
</p>
</div>
<div class="panel-footer">
<p class="text-center" style="font-size:90%; margin-top:2%;">
<a data-href="#archive" style="color:red; cursor:pointer;">View Archive</a>
</p>
</div>
</div>
</div>
</div>
</div><!--End Posts Section-->
<div class="divider" id="section3"></div>
<div class="container">
<div class="col-sm-10 col-sm-offset-1 text-center">
<h1>About "<span class="text-danger">This</span> Business"</h1>
<p class="lead">Suspendisse potenti. Aliquam erat volutpat. Fusce in venenatis ligula. Integer et sapien sit amet erat vulputate vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris facilisis, justo vitae gravida lacinia, erat dui congue neque, ut sodales lectus lorem in nulla. Phasellus finibus nunc eget magna auctor congue. Duis auctor turpis in sapien luctus, vestibulum interdum nibh posuere.<br>
In iaculis nunc mauris, gravida blandit mauris semper a. Morbi scelerisque urna vitae sapien condimentum, eu hendrerit nunc commodo. Etiam massa ex, bibendum a arcu scelerisque, posuere placerat ligula. Maecenas eu posuere justo. Proin leo leo, ornare nec dolor quis, viverra dictum odio. Vivamus tempus a elit sit amet tempus. Phasellus porttitor quam nec tellus fringilla ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis mollis sapien, et efficitur ex mattis et. In tincidunt libero at mi molestie, id tempor orci interdum. Nam eu eros quis sem luctus suscipit. Mauris egestas suscipit faucibus. Aliquam placerat nunc nibh, a aliquet est dictum non. Etiam nisl tortor, ornare ac orci at, blandit varius diam.</p>
<hr>
<img src="http://soldierupdesigns.com/parallax/images/beach.jpg" class="img-responsive" style="width:100%">
<hr>
</div><!--/col-->
</div><!--/container-->
<div class="divider" id="section4"></div>
<div class="container">
<div class="row" style="color:#101010; background:#ededed; padding-top:2%;">
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div>
<img src="http://soldierupdesigns.com/parallax/images/eee.gif" class="img-responsive lazyOwl">
</div>
<div class="panel-body">
<p class="lead">Care for Your Tats!</p>
<p>Tattoos are important because they are tattoos...</p>
<p>
<img class="img-responsive img-circle" src="http://soldierupdesigns.com/parallax/images/fff.gif" width="40" height="40">
</p>
</div>
</div><!--/panel-->
</div><!--/col-->
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-thumbnail">
<img src="http://soldierupdesigns.com/parallax/images/444.gif" class="img-responsive lazyOwl">
</div>
<div class="panel-body">
<p class="lead">Some Really Important Stuff!!</p>
<p>This is a post about some really important stuff...</p>
<p>
<img class="http://soldierupdesigns.com/parallax/img-responsive img-circle" src="images/ff6600.gif" width="40" height="40">
</p>
</div>
</div><!--/panel-->
</div><!--/col-->
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-thumbnail"><img src="http://soldierupdesigns.com/parallax/images/990000.gif" class="img-responsive lazyOwl"></div>
<div class="panel-body">
<p class="lead">Hey Look another Post</p>
<p>Do these posts seem like they are going on forever? well...</p>
<p>
<img class="img-responsive img-circle" src="http://soldierupdesigns.com/parallax/images/ff6600.gif" width="40" height="40">
</p>
</div>
</div><!--/panel-->
</div><!--/col-->
</div><!--/row-->
</div><!--/container-->
<div class="divider" id="section5" name="section5"></div>
<div class="container">
<h3 class="text-center">Contact <span class="text-danger">Us</span></h3>
<hr>
<div class="col-md-5 col-xs-12">
<div class="row">
<!-- Map -->
<iframe width="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" seamless src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3465.778125113836!2d-104.70084685000003!3d38.79848080000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x871340d4945a460f%3A0xf58d9316b01a6f4b!2sColorado+Springs+Airport%2C+Colorado+Springs+Airport+(COS)%2C+Colorado+Springs%2C+CO+80916!5e1!3m2!1sen!2sus!4v1418119859361" style="height:500px; min-height:100%;"></iframe>
<a href="https://www.google.com/maps/place/Colorado+Springs+Airport,+Colorado+Springs+Airport+(COS),+Colorado+Springs,+CO+80916/@38.7984808,-104.7008469,796m/data=!3m3!1e3!4b1!5s0x871340d4938d4dd1:0xaad06d1e8d691575!4m2!3m1!1s0x871340d4945a460f:0xf58d9316b01a6f4b"></a>
</div>
</div>
<div class="col-md-7 col-xs-12">
<div class="row form-group">
<div class="col-xs-3">
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" required="">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" id="middleName" name="firstName" placeholder="Middle Name" required="">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name" required="">
</div>
</div>
<div class="row form-group">
<div class="col-xs-5">
<input type="email" class="form-control" name="email" placeholder="Email" required="">
</div>
<div class="col-xs-5">
<input type="email" class="form-control" name="phone" placeholder="Phone" required="">
</div>
</div>
<div class="row form-group">
<div class="col-xs-10">
<input type="homepage" class="form-control" placeholder="Website URL" required="">
</div>
</div>
<div class="row form-group">
<div class="col-xs-10">
<button class="btn btn-danger pull-right">Contact Us</button>
</div>
</div>
<div class="col-xs-12 pull-right">
<address>
<strong>"<span class="text-danger">This</span> Business"</strong><br>
123 Some Ave, Suite 555<br>
Colorado Springs, CO 80914<br>
P: (123) 456-7890
</address>
<address>
<strong>Email Us</strong><br>
<a href="mailto:#">first.last@domain.com</a>
</address>
</div>
</div>
</div><!--/End Contact Section-->
<div class="container">
<div class="col-sm-8 col-sm-offset-2 text-center">
<hr>
<ul class="social list-inline center-block">
<li><a href="http://facebook.com/soldierupdesigns"><img src="http://soldierupdesigns.com/parallax/images/facebook_icon.png"></a></li>
<li><a href="http://twitter.com/soldierupdesign"><img src="http://soldierupdesigns.com/parallax/images/twitter_icon.png"></a></li>
<li><a href="http://plus.google.com/+soldierupdesigns"><img src="http://soldierupdesigns.com/parallax/images/googleplus_icon.png"></a></li>
<li><a href="http://linkedin.com"><img src="http://soldierupdesigns.com/parallax/images/linkedin_icon.png"></a></li>
</ul>
<hr>
<h4>Hey! You Really Should <span class="text-danger">Follow</span> US!!!</h4>
</div><!--/col-->
<hr>
</div><!--/container-->
<hr>
<!-- 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-danger">This</span> Business" 2014</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>
@import url(http://fonts.googleapis.com/css?family=Kreon:400,700);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
html, body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
-webkit-font-smoothing: antialiased;
font: normal 14px 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;
}
.main{
position:static;/* Don't Change - Positioning */
top:0;
left:0;
min-height: 100%;
height: auto !important;
margin-bottom:4%;
}
header{
background-color: #f16251;
position:absolute;/* Don't Change - Positioning */
top:0;
left:0;
right:0;
bottom:0;
background:url('http://soldierupdesigns.com/parallax/images/beach.jpg');
background-position:center center;
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:80%;
}
header h1,header h2,header h3 a,header a,header a:hover {
color:#101010;
font-weight:800;
text-decoration:none;
}
header h3 {
font-family: 'Kreon', serif;
background: #ffcc33;
padding:10px;
border-radius:3px;
font-size:34px;
padding:12px 10px 6px 10px;
}
header .dropdown-menu1 {
top:74px;
background: #ffcc33;
border-width:0;
z-index:120;
}
h1, h2, h3, h4, h5, h6 {
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.row {
margin-left:0px;
margin-right:0px;
}
.main > .container {
padding: 60px 15px 0;
color:#fff;
}
@media (min-aspect-ratio: 16/9){
header{
position:absolute;/* Don't Change - Positioning */
width:100%;
height:auto; /* actually taller than viewport */
background:url('http://soldierupdesigns.com/parallax/images/beach.jpg');
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
margin:0;
}
}
@media (max-aspect-ratio: 16/9){
header{
position:absolute;/* Don't Change - Positioning */
width:auto; /* actually wider than viewport */
height:100%;
background:url('http://soldierupdesigns.com/parallax/images/beach.jpg');
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
margin:0;
}
}
/* If supporting object-fit, overriding 'class="main"' default: */
@supports (object-fit: cover){
header{
background:url('http://soldierupdesigns.com/parallax/images/beach.jpg');
background-position:center center;
margin:0;
top: 0;
left: 0;
right: 0;
object-fit: cover;
}
}
h2{
margin:0;
padding:0;
font-size:200%;
line-height:100%;
font-weight:800;
height:20%;
max-height:100%;
}
.title-block{
background-color: #222222;
width:50%;
word-wrap: break-word;
}
.middle-text-block{
background-color: #222222;
width:50%;
word-wrap: break-word;
margin:25%;
font-weight:800;
font-size:100%;
padding:2% 0 2% 0;
}
.title a{
color:#ffffff;
}
.title a small{
color:#ffffff;
}
#nav {
width: 100%;
z-index:101;
-webkit-transition: all .6s ease-in-out;
margin-bottom:0;
height:auto;
position:absolute;
bottom:0;
}
#nav.affix {
position: fixed;
top: 0;
z-index:100;
-webkit-transition: all .6s ease-in-out;
height:6%;
}
.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;
}
/* 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-custom .navbar-nav li>a:hover, .navbar-nav li .open {
background-color: #ff0000;
height:15%;
}
.navbar-custom .navbar-nav li>.navbar-custom .navbar-nav .active a {
background:#000;
height:15%;
}
.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;
}
.divider {
height:100px;
}
.panel {
border-width:0;
}
.goToTop {
position: fixed;
top: 0;
height: 70px;
z-index: 1;
}
#focusedInput {
background-color: #414859;
border:none;
}
#focusedInput:focus{
border-color: rgba(82,168,236,.8);
outline: 0;
outline: thin dotted \9;
-moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
box-shadow: 0 0 8px rgba(82,168,236,.6);
background-color: #ffffff;
}
/* Set the fixed height of the footer here */
#footer{
height: 50px;
background-color: #434343;
margin-top:50px;
padding-top:20px;
z-index:120;
color:#ffffff;
font-weight:700;
}
footer a {
color:#efefef;
}
.scroll-top {
position:fixed;
bottom:0;
right:6%;
z-index:100;
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;
}
section {
color: #ffffff;
min-height: 400px;
height: auto !important;
height: 100%;
padding-top:100px;
}
.container .credit {
margin: 20px 0;
}
/*
----------------------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("http://soldierupdesigns.com/parallax/images/beach.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;
}
/*
----------------------SIDENAV----------------------------------------
*/
#slideout-menu{
height:100%;
position: fixed;
top: 0%;
}
.slideout-menu {
left: -250px;
width: 250px;
height: auto;
background: #2e2e2e;
z-index: 200;
}
.slideout-menu h3 {
position: relative;
padding: 12px 10px;
color: #fff;
font-size: 1.2em;
font-weight: 400;
border-bottom: 4px solid #222;
background:#101010;
}
.slideout-menu .slideout-menu-toggle {
position: absolute;
top: 12px;
right: 10px;
display: inline-block;
padding: 6px 9px 5px;
font-family: Arial, sans-serif;
font-weight: bold;
line-height: 1;
background: #222;
color: #999;
text-decoration: none;
vertical-align: top;
}
.slideout-menu .slideout-menu-toggle:hover {
color: #fff;
}
.slideout-menu .slideout-menu-list {
list-style: none;
font-weight: 300;
border-top: 1px solid #151515;
border-bottom: 1px solid #454545;
}
.slideout-menu .slideout-menu-list li {
border-top: 1px solid #454545;
border-bottom: 1px solid #151515;
}
.slideout-menu .slideout-menu-list li a {
position: relative;
display: block;
padding: 10px;
color: #ffffff;
text-decoration: none;
}
.slideout-menu .slideout-menu-list li a:hover {
background: #000;
color: #fff;
}
.slideout-menu .slideout-menu-list li a i {
position: absolute;
top: 15px;
right: 10px;
opacity: .5;
}
.navbar-header .slideout-menu-toggle {
font-size: 1.2em;
color: #999;
text-decoration: none;
}
.navbar-header .slideout-menu-toggle:hover {
color: #fff;
}
.navbar-header .slideout-menu-toggle i {
vertical-align: top;
margin: 5px 3px 0 0;
}
/* 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 */
}
.menu-large {
position: static !important;
}
.megamenu{
padding: 20px 0px;
width:100%;
}
.megamenu> li > ul {
padding: 0;
margin: 0;
background:#3e3e3e;
}
.megamenu> li > ul > li {
list-style: none;
}
.megamenu> li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #ffffff;
white-space: normal;
}
.megamenu> li ul > li > a:hover,
.megamenu> li ul > li > a:focus {
text-decoration: none;
color: #fff;
background-color: #f5f5f5;
font-weight:700;
}
.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;
}
@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;
}
}
/*BOOTSTRAP SOCIAL*/
/*
* Social Buttons for Bootstrap
*
* Copyright 2013-2014 Panayiotis Lipiridis
* Licensed under the MIT License
*
* https://github.com/lipis/bootstrap-social
*/
.btn-social{position:relative;padding-left:44px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.btn-social>:first-child{position:absolute;left:0;top:0;bottom:0;width:32px;line-height:34px;font-size:1.6em;text-align:center;border-right:1px solid rgba(0,0,0,0.2)}
.btn-social.btn-lg{padding-left:61px}.btn-social.btn-lg :first-child{line-height:45px;width:45px;font-size:1.8em}
.btn-social.btn-sm{padding-left:38px}.btn-social.btn-sm :first-child{line-height:28px;width:28px;font-size:1.4em}
.btn-social.btn-xs{padding-left:30px}.btn-social.btn-xs :first-child{line-height:20px;width:20px;font-size:1.2em}
.btn-social-icon{position:relative;padding-left:44px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:34px;width:34px;padding:0}.btn-social-icon>:first-child{position:absolute;left:0;top:0;bottom:0;width:32px;line-height:34px;font-size:1.6em;text-align:center;border-right:1px solid rgba(0,0,0,0.2)}
.btn-social-icon.btn-lg{padding-left:61px}.btn-social-icon.btn-lg :first-child{line-height:45px;width:45px;font-size:1.8em}
.btn-social-icon.btn-sm{padding-left:38px}.btn-social-icon.btn-sm :first-child{line-height:28px;width:28px;font-size:1.4em}
.btn-social-icon.btn-xs{padding-left:30px}.btn-social-icon.btn-xs :first-child{line-height:20px;width:20px;font-size:1.2em}
.btn-social-icon :first-child{border:none;text-align:center;width:100% !important}
.btn-social-icon.btn-lg{height:45px;width:45px;padding-left:0;padding-right:0}
.btn-social-icon.btn-sm{height:30px;width:30px;padding-left:0;padding-right:0}
.btn-social-icon.btn-xs{height:22px;width:22px;padding-left:0;padding-right:0}
.btn-adn{color:#fff;background-color:#d87a68;border-color:rgba(0,0,0,0.2)}.btn-adn:hover,.btn-adn:focus,.btn-adn:active,.btn-adn.active,.open>.dropdown-toggle.btn-adn{color:#fff;background-color:#ce563f;border-color:rgba(0,0,0,0.2)}
.btn-adn:active,.btn-adn.active,.open>.dropdown-toggle.btn-adn{background-image:none}
.btn-adn.disabled,.btn-adn[disabled],fieldset[disabled] .btn-adn,.btn-adn.disabled:hover,.btn-adn[disabled]:hover,fieldset[disabled] .btn-adn:hover,.btn-adn.disabled:focus,.btn-adn[disabled]:focus,fieldset[disabled] .btn-adn:focus,.btn-adn.disabled:active,.btn-adn[disabled]:active,fieldset[disabled] .btn-adn:active,.btn-adn.disabled.active,.btn-adn[disabled].active,fieldset[disabled] .btn-adn.active{background-color:#d87a68;border-color:rgba(0,0,0,0.2)}
.btn-adn .badge{color:#d87a68;background-color:#fff}
.btn-bitbucket{color:#fff;background-color:#205081;border-color:rgba(0,0,0,0.2)}.btn-bitbucket:hover,.btn-bitbucket:focus,.btn-bitbucket:active,.btn-bitbucket.active,.open>.dropdown-toggle.btn-bitbucket{color:#fff;background-color:#163758;border-color:rgba(0,0,0,0.2)}
.btn-bitbucket:active,.btn-bitbucket.active,.open>.dropdown-toggle.btn-bitbucket{background-image:none}
.btn-bitbucket.disabled,.btn-bitbucket[disabled],fieldset[disabled] .btn-bitbucket,.btn-bitbucket.disabled:hover,.btn-bitbucket[disabled]:hover,fieldset[disabled] .btn-bitbucket:hover,.btn-bitbucket.disabled:focus,.btn-bitbucket[disabled]:focus,fieldset[disabled] .btn-bitbucket:focus,.btn-bitbucket.disabled:active,.btn-bitbucket[disabled]:active,fieldset[disabled] .btn-bitbucket:active,.btn-bitbucket.disabled.active,.btn-bitbucket[disabled].active,fieldset[disabled] .btn-bitbucket.active{background-color:#205081;border-color:rgba(0,0,0,0.2)}
.btn-bitbucket .badge{color:#205081;background-color:#fff}
.btn-dropbox{color:#fff;background-color:#1087dd;border-color:rgba(0,0,0,0.2)}.btn-dropbox:hover,.btn-dropbox:focus,.btn-dropbox:active,.btn-dropbox.active,.open>.dropdown-toggle.btn-dropbox{color:#fff;background-color:#0d6aad;border-color:rgba(0,0,0,0.2)}
.btn-dropbox:active,.btn-dropbox.active,.open>.dropdown-toggle.btn-dropbox{background-image:none}
.btn-dropbox.disabled,.btn-dropbox[disabled],fieldset[disabled] .btn-dropbox,.btn-dropbox.disabled:hover,.btn-dropbox[disabled]:hover,fieldset[disabled] .btn-dropbox:hover,.btn-dropbox.disabled:focus,.btn-dropbox[disabled]:focus,fieldset[disabled] .btn-dropbox:focus,.btn-dropbox.disabled:active,.btn-dropbox[disabled]:active,fieldset[disabled] .btn-dropbox:active,.btn-dropbox.disabled.active,.btn-dropbox[disabled].active,fieldset[disabled] .btn-dropbox.active{background-color:#1087dd;border-color:rgba(0,0,0,0.2)}
.btn-dropbox .badge{color:#1087dd;background-color:#fff}
.btn-facebook{color:#fff;background-color:#3b5998;border-color:rgba(0,0,0,0.2)}.btn-facebook:hover,.btn-facebook:focus,.btn-facebook:active,.btn-facebook.active,.open>.dropdown-toggle.btn-facebook{color:#fff;background-color:#2d4373;border-color:rgba(0,0,0,0.2)}
.btn-facebook:active,.btn-facebook.active,.open>.dropdown-toggle.btn-facebook{background-image:none}
.btn-facebook.disabled,.btn-facebook[disabled],fieldset[disabled] .btn-facebook,.btn-facebook.disabled:hover,.btn-facebook[disabled]:hover,fieldset[disabled] .btn-facebook:hover,.btn-facebook.disabled:focus,.btn-facebook[disabled]:focus,fieldset[disabled] .btn-facebook:focus,.btn-facebook.disabled:active,.btn-facebook[disabled]:active,fieldset[disabled] .btn-facebook:active,.btn-facebook.disabled.active,.btn-facebook[disabled].active,fieldset[disabled] .btn-facebook.active{background-color:#3b5998;border-color:rgba(0,0,0,0.2)}
.btn-facebook .badge{color:#3b5998;background-color:#fff}
.btn-flickr{color:#fff;background-color:#ff0084;border-color:rgba(0,0,0,0.2)}.btn-flickr:hover,.btn-flickr:focus,.btn-flickr:active,.btn-flickr.active,.open>.dropdown-toggle.btn-flickr{color:#fff;background-color:#cc006a;border-color:rgba(0,0,0,0.2)}
.btn-flickr:active,.btn-flickr.active,.open>.dropdown-toggle.btn-flickr{background-image:none}
.btn-flickr.disabled,.btn-flickr[disabled],fieldset[disabled] .btn-flickr,.btn-flickr.disabled:hover,.btn-flickr[disabled]:hover,fieldset[disabled] .btn-flickr:hover,.btn-flickr.disabled:focus,.btn-flickr[disabled]:focus,fieldset[disabled] .btn-flickr:focus,.btn-flickr.disabled:active,.btn-flickr[disabled]:active,fieldset[disabled] .btn-flickr:active,.btn-flickr.disabled.active,.btn-flickr[disabled].active,fieldset[disabled] .btn-flickr.active{background-color:#ff0084;border-color:rgba(0,0,0,0.2)}
.btn-flickr .badge{color:#ff0084;background-color:#fff}
.btn-foursquare{color:#fff;background-color:#f94877;border-color:rgba(0,0,0,0.2)}.btn-foursquare:hover,.btn-foursquare:focus,.btn-foursquare:active,.btn-foursquare.active,.open>.dropdown-toggle.btn-foursquare{color:#fff;background-color:#f71752;border-color:rgba(0,0,0,0.2)}
.btn-foursquare:active,.btn-foursquare.active,.open>.dropdown-toggle.btn-foursquare{background-image:none}
.btn-foursquare.disabled,.btn-foursquare[disabled],fieldset[disabled] .btn-foursquare,.btn-foursquare.disabled:hover,.btn-foursquare[disabled]:hover,fieldset[disabled] .btn-foursquare:hover,.btn-foursquare.disabled:focus,.btn-foursquare[disabled]:focus,fieldset[disabled] .btn-foursquare:focus,.btn-foursquare.disabled:active,.btn-foursquare[disabled]:active,fieldset[disabled] .btn-foursquare:active,.btn-foursquare.disabled.active,.btn-foursquare[disabled].active,fieldset[disabled] .btn-foursquare.active{background-color:#f94877;border-color:rgba(0,0,0,0.2)}
.btn-foursquare .badge{color:#f94877;background-color:#fff}
.btn-github{color:#fff;background-color:#444;border-color:rgba(0,0,0,0.2)}.btn-github:hover,.btn-github:focus,.btn-github:active,.btn-github.active,.open>.dropdown-toggle.btn-github{color:#fff;background-color:#2b2b2b;border-color:rgba(0,0,0,0.2)}
.btn-github:active,.btn-github.active,.open>.dropdown-toggle.btn-github{background-image:none}
.btn-github.disabled,.btn-github[disabled],fieldset[disabled] .btn-github,.btn-github.disabled:hover,.btn-github[disabled]:hover,fieldset[disabled] .btn-github:hover,.btn-github.disabled:focus,.btn-github[disabled]:focus,fieldset[disabled] .btn-github:focus,.btn-github.disabled:active,.btn-github[disabled]:active,fieldset[disabled] .btn-github:active,.btn-github.disabled.active,.btn-github[disabled].active,fieldset[disabled] .btn-github.active{background-color:#444;border-color:rgba(0,0,0,0.2)}
.btn-github .badge{color:#444;background-color:#fff}
.btn-google-plus{color:#fff;background-color:#dd4b39;border-color:rgba(0,0,0,0.2)}.btn-google-plus:hover,.btn-google-plus:focus,.btn-google-plus:active,.btn-google-plus.active,.open>.dropdown-toggle.btn-google-plus{color:#fff;background-color:#c23321;border-color:rgba(0,0,0,0.2)}
.btn-google-plus:active,.btn-google-plus.active,.open>.dropdown-toggle.btn-google-plus{background-image:none}
.btn-google-plus.disabled,.btn-google-plus[disabled],fieldset[disabled] .btn-google-plus,.btn-google-plus.disabled:hover,.btn-google-plus[disabled]:hover,fieldset[disabled] .btn-google-plus:hover,.btn-google-plus.disabled:focus,.btn-google-plus[disabled]:focus,fieldset[disabled] .btn-google-plus:focus,.btn-google-plus.disabled:active,.btn-google-plus[disabled]:active,fieldset[disabled] .btn-google-plus:active,.btn-google-plus.disabled.active,.btn-google-plus[disabled].active,fieldset[disabled] .btn-google-plus.active{background-color:#dd4b39;border-color:rgba(0,0,0,0.2)}
.btn-google-plus .badge{color:#dd4b39;background-color:#fff}
.btn-instagram{color:#fff;background-color:#3f729b;border-color:rgba(0,0,0,0.2)}.btn-instagram:hover,.btn-instagram:focus,.btn-instagram:active,.btn-instagram.active,.open>.dropdown-toggle.btn-instagram{color:#fff;background-color:#305777;border-color:rgba(0,0,0,0.2)}
.btn-instagram:active,.btn-instagram.active,.open>.dropdown-toggle.btn-instagram{background-image:none}
.btn-instagram.disabled,.btn-instagram[disabled],fieldset[disabled] .btn-instagram,.btn-instagram.disabled:hover,.btn-instagram[disabled]:hover,fieldset[disabled] .btn-instagram:hover,.btn-instagram.disabled:focus,.btn-instagram[disabled]:focus,fieldset[disabled] .btn-instagram:focus,.btn-instagram.disabled:active,.btn-instagram[disabled]:active,fieldset[disabled] .btn-instagram:active,.btn-instagram.disabled.active,.btn-instagram[disabled].active,fieldset[disabled] .btn-instagram.active{background-color:#3f729b;border-color:rgba(0,0,0,0.2)}
.btn-instagram .badge{color:#3f729b;background-color:#fff}
.btn-linkedin{color:#fff;background-color:#007bb6;border-color:rgba(0,0,0,0.2)}.btn-linkedin:hover,.btn-linkedin:focus,.btn-linkedin:active,.btn-linkedin.active,.open>.dropdown-toggle.btn-linkedin{color:#fff;background-color:#005983;border-color:rgba(0,0,0,0.2)}
.btn-linkedin:active,.btn-linkedin.active,.open>.dropdown-toggle.btn-linkedin{background-image:none}
.btn-linkedin.disabled,.btn-linkedin[disabled],fieldset[disabled] .btn-linkedin,.btn-linkedin.disabled:hover,.btn-linkedin[disabled]:hover,fieldset[disabled] .btn-linkedin:hover,.btn-linkedin.disabled:focus,.btn-linkedin[disabled]:focus,fieldset[disabled] .btn-linkedin:focus,.btn-linkedin.disabled:active,.btn-linkedin[disabled]:active,fieldset[disabled] .btn-linkedin:active,.btn-linkedin.disabled.active,.btn-linkedin[disabled].active,fieldset[disabled] .btn-linkedin.active{background-color:#007bb6;border-color:rgba(0,0,0,0.2)}
.btn-linkedin .badge{color:#007bb6;background-color:#fff}
.btn-microsoft{color:#fff;background-color:#2672ec;border-color:rgba(0,0,0,0.2)}.btn-microsoft:hover,.btn-microsoft:focus,.btn-microsoft:active,.btn-microsoft.active,.open>.dropdown-toggle.btn-microsoft{color:#fff;background-color:#125acd;border-color:rgba(0,0,0,0.2)}
.btn-microsoft:active,.btn-microsoft.active,.open>.dropdown-toggle.btn-microsoft{background-image:none}
.btn-microsoft.disabled,.btn-microsoft[disabled],fieldset[disabled] .btn-microsoft,.btn-microsoft.disabled:hover,.btn-microsoft[disabled]:hover,fieldset[disabled] .btn-microsoft:hover,.btn-microsoft.disabled:focus,.btn-microsoft[disabled]:focus,fieldset[disabled] .btn-microsoft:focus,.btn-microsoft.disabled:active,.btn-microsoft[disabled]:active,fieldset[disabled] .btn-microsoft:active,.btn-microsoft.disabled.active,.btn-microsoft[disabled].active,fieldset[disabled] .btn-microsoft.active{background-color:#2672ec;border-color:rgba(0,0,0,0.2)}
.btn-microsoft .badge{color:#2672ec;background-color:#fff}
.btn-openid{color:#fff;background-color:#f7931e;border-color:rgba(0,0,0,0.2)}.btn-openid:hover,.btn-openid:focus,.btn-openid:active,.btn-openid.active,.open>.dropdown-toggle.btn-openid{color:#fff;background-color:#da7908;border-color:rgba(0,0,0,0.2)}
.btn-openid:active,.btn-openid.active,.open>.dropdown-toggle.btn-openid{background-image:none}
.btn-openid.disabled,.btn-openid[disabled],fieldset[disabled] .btn-openid,.btn-openid.disabled:hover,.btn-openid[disabled]:hover,fieldset[disabled] .btn-openid:hover,.btn-openid.disabled:focus,.btn-openid[disabled]:focus,fieldset[disabled] .btn-openid:focus,.btn-openid.disabled:active,.btn-openid[disabled]:active,fieldset[disabled] .btn-openid:active,.btn-openid.disabled.active,.btn-openid[disabled].active,fieldset[disabled] .btn-openid.active{background-color:#f7931e;border-color:rgba(0,0,0,0.2)}
.btn-openid .badge{color:#f7931e;background-color:#fff}
.btn-pinterest{color:#fff;background-color:#cb2027;border-color:rgba(0,0,0,0.2)}.btn-pinterest:hover,.btn-pinterest:focus,.btn-pinterest:active,.btn-pinterest.active,.open>.dropdown-toggle.btn-pinterest{color:#fff;background-color:#9f191f;border-color:rgba(0,0,0,0.2)}
.btn-pinterest:active,.btn-pinterest.active,.open>.dropdown-toggle.btn-pinterest{background-image:none}
.btn-pinterest.disabled,.btn-pinterest[disabled],fieldset[disabled] .btn-pinterest,.btn-pinterest.disabled:hover,.btn-pinterest[disabled]:hover,fieldset[disabled] .btn-pinterest:hover,.btn-pinterest.disabled:focus,.btn-pinterest[disabled]:focus,fieldset[disabled] .btn-pinterest:focus,.btn-pinterest.disabled:active,.btn-pinterest[disabled]:active,fieldset[disabled] .btn-pinterest:active,.btn-pinterest.disabled.active,.btn-pinterest[disabled].active,fieldset[disabled] .btn-pinterest.active{background-color:#cb2027;border-color:rgba(0,0,0,0.2)}
.btn-pinterest .badge{color:#cb2027;background-color:#fff}
.btn-reddit{color:#000;background-color:#eff7ff;border-color:rgba(0,0,0,0.2)}.btn-reddit:hover,.btn-reddit:focus,.btn-reddit:active,.btn-reddit.active,.open>.dropdown-toggle.btn-reddit{color:#000;background-color:#bcddff;border-color:rgba(0,0,0,0.2)}
.btn-reddit:active,.btn-reddit.active,.open>.dropdown-toggle.btn-reddit{background-image:none}
.btn-reddit.disabled,.btn-reddit[disabled],fieldset[disabled] .btn-reddit,.btn-reddit.disabled:hover,.btn-reddit[disabled]:hover,fieldset[disabled] .btn-reddit:hover,.btn-reddit.disabled:focus,.btn-reddit[disabled]:focus,fieldset[disabled] .btn-reddit:focus,.btn-reddit.disabled:active,.btn-reddit[disabled]:active,fieldset[disabled] .btn-reddit:active,.btn-reddit.disabled.active,.btn-reddit[disabled].active,fieldset[disabled] .btn-reddit.active{background-color:#eff7ff;border-color:rgba(0,0,0,0.2)}
.btn-reddit .badge{color:#eff7ff;background-color:#000}
.btn-soundcloud{color:#fff;background-color:#f50;border-color:rgba(0,0,0,0.2)}.btn-soundcloud:hover,.btn-soundcloud:focus,.btn-soundcloud:active,.btn-soundcloud.active,.open>.dropdown-toggle.btn-soundcloud{color:#fff;background-color:#c40;border-color:rgba(0,0,0,0.2)}
.btn-soundcloud:active,.btn-soundcloud.active,.open>.dropdown-toggle.btn-soundcloud{background-image:none}
.btn-soundcloud.disabled,.btn-soundcloud[disabled],fieldset[disabled] .btn-soundcloud,.btn-soundcloud.disabled:hover,.btn-soundcloud[disabled]:hover,fieldset[disabled] .btn-soundcloud:hover,.btn-soundcloud.disabled:focus,.btn-soundcloud[disabled]:focus,fieldset[disabled] .btn-soundcloud:focus,.btn-soundcloud.disabled:active,.btn-soundcloud[disabled]:active,fieldset[disabled] .btn-soundcloud:active,.btn-soundcloud.disabled.active,.btn-soundcloud[disabled].active,fieldset[disabled] .btn-soundcloud.active{background-color:#f50;border-color:rgba(0,0,0,0.2)}
.btn-soundcloud .badge{color:#f50;background-color:#fff}
.btn-tumblr{color:#fff;background-color:#2c4762;border-color:rgba(0,0,0,0.2)}.btn-tumblr:hover,.btn-tumblr:focus,.btn-tumblr:active,.btn-tumblr.active,.open>.dropdown-toggle.btn-tumblr{color:#fff;background-color:#1c2d3f;border-color:rgba(0,0,0,0.2)}
.btn-tumblr:active,.btn-tumblr.active,.open>.dropdown-toggle.btn-tumblr{background-image:none}
.btn-tumblr.disabled,.btn-tumblr[disabled],fieldset[disabled] .btn-tumblr,.btn-tumblr.disabled:hover,.btn-tumblr[disabled]:hover,fieldset[disabled] .btn-tumblr:hover,.btn-tumblr.disabled:focus,.btn-tumblr[disabled]:focus,fieldset[disabled] .btn-tumblr:focus,.btn-tumblr.disabled:active,.btn-tumblr[disabled]:active,fieldset[disabled] .btn-tumblr:active,.btn-tumblr.disabled.active,.btn-tumblr[disabled].active,fieldset[disabled] .btn-tumblr.active{background-color:#2c4762;border-color:rgba(0,0,0,0.2)}
.btn-tumblr .badge{color:#2c4762;background-color:#fff}
.btn-twitter{color:#fff;background-color:#55acee;border-color:rgba(0,0,0,0.2)}.btn-twitter:hover,.btn-twitter:focus,.btn-twitter:active,.btn-twitter.active,.open>.dropdown-toggle.btn-twitter{color:#fff;background-color:#2795e9;border-color:rgba(0,0,0,0.2)}
.btn-twitter:active,.btn-twitter.active,.open>.dropdown-toggle.btn-twitter{background-image:none}
.btn-twitter.disabled,.btn-twitter[disabled],fieldset[disabled] .btn-twitter,.btn-twitter.disabled:hover,.btn-twitter[disabled]:hover,fieldset[disabled] .btn-twitter:hover,.btn-twitter.disabled:focus,.btn-twitter[disabled]:focus,fieldset[disabled] .btn-twitter:focus,.btn-twitter.disabled:active,.btn-twitter[disabled]:active,fieldset[disabled] .btn-twitter:active,.btn-twitter.disabled.active,.btn-twitter[disabled].active,fieldset[disabled] .btn-twitter.active{background-color:#55acee;border-color:rgba(0,0,0,0.2)}
.btn-twitter .badge{color:#55acee;background-color:#fff}
.btn-vimeo{color:#fff;background-color:#1ab7ea;border-color:rgba(0,0,0,0.2)}.btn-vimeo:hover,.btn-vimeo:focus,.btn-vimeo:active,.btn-vimeo.active,.open>.dropdown-toggle.btn-vimeo{color:#fff;background-color:#1295bf;border-color:rgba(0,0,0,0.2)}
.btn-vimeo:active,.btn-vimeo.active,.open>.dropdown-toggle.btn-vimeo{background-image:none}
.btn-vimeo.disabled,.btn-vimeo[disabled],fieldset[disabled] .btn-vimeo,.btn-vimeo.disabled:hover,.btn-vimeo[disabled]:hover,fieldset[disabled] .btn-vimeo:hover,.btn-vimeo.disabled:focus,.btn-vimeo[disabled]:focus,fieldset[disabled] .btn-vimeo:focus,.btn-vimeo.disabled:active,.btn-vimeo[disabled]:active,fieldset[disabled] .btn-vimeo:active,.btn-vimeo.disabled.active,.btn-vimeo[disabled].active,fieldset[disabled] .btn-vimeo.active{background-color:#1ab7ea;border-color:rgba(0,0,0,0.2)}
.btn-vimeo .badge{color:#1ab7ea;background-color:#fff}
.btn-vk{color:#fff;background-color:#587ea3;border-color:rgba(0,0,0,0.2)}.btn-vk:hover,.btn-vk:focus,.btn-vk:active,.btn-vk.active,.open>.dropdown-toggle.btn-vk{color:#fff;background-color:#466482;border-color:rgba(0,0,0,0.2)}
.btn-vk:active,.btn-vk.active,.open>.dropdown-toggle.btn-vk{background-image:none}
.btn-vk.disabled,.btn-vk[disabled],fieldset[disabled] .btn-vk,.btn-vk.disabled:hover,.btn-vk[disabled]:hover,fieldset[disabled] .btn-vk:hover,.btn-vk.disabled:focus,.btn-vk[disabled]:focus,fieldset[disabled] .btn-vk:focus,.btn-vk.disabled:active,.btn-vk[disabled]:active,fieldset[disabled] .btn-vk:active,.btn-vk.disabled.active,.btn-vk[disabled].active,fieldset[disabled] .btn-vk.active{background-color:#587ea3;border-color:rgba(0,0,0,0.2)}
.btn-vk .badge{color:#587ea3;background-color:#fff}
.btn-yahoo{color:#fff;background-color:#720e9e;border-color:rgba(0,0,0,0.2)}.btn-yahoo:hover,.btn-yahoo:focus,.btn-yahoo:active,.btn-yahoo.active,.open>.dropdown-toggle.btn-yahoo{color:#fff;background-color:#500a6f;border-color:rgba(0,0,0,0.2)}
.btn-yahoo:active,.btn-yahoo.active,.open>.dropdown-toggle.btn-yahoo{background-image:none}
.btn-yahoo.disabled,.btn-yahoo[disabled],fieldset[disabled] .btn-yahoo,.btn-yahoo.disabled:hover,.btn-yahoo[disabled]:hover,fieldset[disabled] .btn-yahoo:hover,.btn-yahoo.disabled:focus,.btn-yahoo[disabled]:focus,fieldset[disabled] .btn-yahoo:focus,.btn-yahoo.disabled:active,.btn-yahoo[disabled]:active,fieldset[disabled] .btn-yahoo:active,.btn-yahoo.disabled.active,.btn-yahoo[disabled].active,fieldset[disabled] .btn-yahoo.active{background-color:#720e9e;border-color:rgba(0,0,0,0.2)}
.btn-yahoo .badge{color:#720e9e;background-color:#fff}
/*
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
*
* Uses the built in easing capabilities added In jQuery 1.1
* to offer multiple easing options
*
* TERMS OF USE - EASING EQUATIONS
*
* Open source under the BSD License.
*
* Copyright © 2001 Robert Penner
* All rights reserved.
*
* TERMS OF USE - jQuery Easing
*
* Open source under the BSD License.
*
* Copyright © 2008 George McGinley Smith
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without modification,
* are permitted provided that the following conditions are met:
*
* Redistributions of source code must retain the above copyright notice, this list of
* conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list
* of conditions and the following disclaimer in the documentation and/or other materials
* provided with the distribution.
*
* Neither the name of the author nor the names of contributors may be used to endorse
* or promote products derived from this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
* OF THE POSSIBILITY OF SUCH DAMAGE.
*
*/
jQuery.easing.jswing=jQuery.easing.swing;jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(e,f,a,h,g){return jQuery.easing[jQuery.easing.def](e,f,a,h,g)},easeInQuad:function(e,f,a,h,g){return h*(f/=g)*f+a},easeOutQuad:function(e,f,a,h,g){return -h*(f/=g)*(f-2)+a},easeInOutQuad:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f+a}return -h/2*((--f)*(f-2)-1)+a},easeInCubic:function(e,f,a,h,g){return h*(f/=g)*f*f+a},easeOutCubic:function(e,f,a,h,g){return h*((f=f/g-1)*f*f+1)+a},easeInOutCubic:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f+a}return h/2*((f-=2)*f*f+2)+a},easeInQuart:function(e,f,a,h,g){return h*(f/=g)*f*f*f+a},easeOutQuart:function(e,f,a,h,g){return -h*((f=f/g-1)*f*f*f-1)+a},easeInOutQuart:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f+a}return -h/2*((f-=2)*f*f*f-2)+a},easeInQuint:function(e,f,a,h,g){return h*(f/=g)*f*f*f*f+a},easeOutQuint:function(e,f,a,h,g){return h*((f=f/g-1)*f*f*f*f+1)+a},easeInOutQuint:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f*f+a}return h/2*((f-=2)*f*f*f*f+2)+a},easeInSine:function(e,f,a,h,g){return -h*Math.cos(f/g*(Math.PI/2))+h+a},easeOutSine:function(e,f,a,h,g){return h*Math.sin(f/g*(Math.PI/2))+a},easeInOutSine:function(e,f,a,h,g){return -h/2*(Math.cos(Math.PI*f/g)-1)+a},easeInExpo:function(e,f,a,h,g){return(f==0)?a:h*Math.pow(2,10*(f/g-1))+a},easeOutExpo:function(e,f,a,h,g){return(f==g)?a+h:h*(-Math.pow(2,-10*f/g)+1)+a},easeInOutExpo:function(e,f,a,h,g){if(f==0){return a}if(f==g){return a+h}if((f/=g/2)<1){return h/2*Math.pow(2,10*(f-1))+a}return h/2*(-Math.pow(2,-10*--f)+2)+a},easeInCirc:function(e,f,a,h,g){return -h*(Math.sqrt(1-(f/=g)*f)-1)+a},easeOutCirc:function(e,f,a,h,g){return h*Math.sqrt(1-(f=f/g-1)*f)+a},easeInOutCirc:function(e,f,a,h,g){if((f/=g/2)<1){return -h/2*(Math.sqrt(1-f*f)-1)+a}return h/2*(Math.sqrt(1-(f-=2)*f)+1)+a},easeInElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return -(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e},easeOutElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return g*Math.pow(2,-10*h)*Math.sin((h*k-i)*(2*Math.PI)/j)+l+e},easeInOutElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k/2)==2){return e+l}if(!j){j=k*(0.3*1.5)}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}if(h<1){return -0.5*(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e}return g*Math.pow(2,-10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j)*0.5+l+e},easeInBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}return i*(f/=h)*f*((g+1)*f-g)+a},easeOutBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}return i*((f=f/h-1)*f*((g+1)*f+g)+1)+a},easeInOutBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}if((f/=h/2)<1){return i/2*(f*f*(((g*=(1.525))+1)*f-g))+a}return i/2*((f-=2)*f*(((g*=(1.525))+1)*f+g)+2)+a},easeInBounce:function(e,f,a,h,g){return h-jQuery.easing.easeOutBounce(e,g-f,0,h,g)+a},easeOutBounce:function(e,f,a,h,g){if((f/=g)<(1/2.75)){return h*(7.5625*f*f)+a}else{if(f<(2/2.75)){return h*(7.5625*(f-=(1.5/2.75))*f+0.75)+a}else{if(f<(2.5/2.75)){return h*(7.5625*(f-=(2.25/2.75))*f+0.9375)+a}else{return h*(7.5625*(f-=(2.625/2.75))*f+0.984375)+a}}}},easeInOutBounce:function(e,f,a,h,g){if(f<g/2){return jQuery.easing.easeInBounce(e,f*2,0,h,g)*0.5+a}return jQuery.easing.easeOutBounce(e,f*2-g,0,h,g)*0.5+h*0.5+a}});
/* affix the navbar after scroll below header */
$('#nav').affix({
offset: {
top: $('header').height()-$('#nav').height()
}
});
/* highlight the top nav as scrolling occurs */
$('body').scrollspy({ target: '#nav' })
/* smooth scrolling for scroll to top */
$('.scroll-top').click(function(){
$('body,html').animate({scrollTop:0},1000);
})
$(document).ready(function()
{
var bodyHeight = $("body").height();
var vwptHeight = $(window).height();
if (vwptHeight > bodyHeight)
{
$("footer#footer").css("position","absolute").css("bottom",0);
}
});
/*URL ReWrite for Anchor Links and Animate on Scroll*/
$(function()
{
$('a[href*=#]:not([href=#])').click(function()
{
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname)
{
//Set Variables
var target = $(this.hash);
//Declare Anchor target Action
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length)
{
$('html,body').animate({
scrollTop: target.offset().top+0
}, 1000);
return false;
}
}
});
});
/* Dropdown Menu Fade */
jQuery(document).ready(function()
{
$(".dropdown").hover(
function()
{
$('.dropdown-menu', this).fadeIn("slow");
},
function()
{
$('.dropdown-menu', this).fadeOut("fast");
});
});
// Dropdown Menu Fade
jQuery(document).ready(function()
{
$(".dropdown").hover(
function()
{
$('.dropdown-menu', this).stop().fadeIn("slow");
},
function()
{
$('.dropdown-menu', this).stop().fadeOut("fast");
});
});
/*Slideout Menu */
$(document).ready(function()
{
$('.slideout-menu-toggle').on('click', function(event)
{
event.preventDefault();
// create menu variables
var slideoutMenu = $('.slideout-menu');
var slideoutMenuWidth = $('.slideout-menu').width();
// toggle open class
slideoutMenu.toggleClass("open");
// slide menu
if (slideoutMenu.hasClass("open"))
{
slideoutMenu.animate({
left: "0"
});
}
else
{
slideoutMenu.animate(
{
left: -slideoutMenuWidth
}, 250);
}
});
});
