<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 ---------->
<body id="page-top" name="page-top" class="active">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="nav-btn btn-dark btn-lg accordion-toggle pull-left" title="Follow Us" role="tab" id="social-collapse" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"></a>
<a id="menu-toggle" href="#" class="nav-btn btn-dark btn-lg toggle">
<i class="fa fa-bars" style="color:#fff;"></i>
</a>
<a id="to-top" class="btn btn-lg btn-inverse" href="#top">
<span class="sr-only">Toggle to Top Navigation</span>
<i class="fa fa-chevron-up"></i>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<a class="navbar-brand" href="#">
<img height="20" width="20" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAB+0lEQVR4AcyYg5LkUBhG+1X2PdZGaW3btm3btm3bHttWrPomd1r/2Jn/VJ02TpxcH4CQ/dsuazWgzbIdrm9dZVd4pBz4zx2igTaFHrhvjneVXNHCSqIlFEjiwMyyyOBilRgGSqLNF1jnwNQdIvAt48C3IlBmHCiLQHC2zoHDu6zG1iXn6+y62ScxY9AODO6w0pvAqf23oSE4joOfH6OxfMoRnoGUm+de8wykbFt6wZtA07QwtNOqKh3ZbS3Wzz2F+1c/QJY0UCJ/J3kXWJfv7VhxCRRV1jGw7XI+gcO7rEFFRvdYxydwcPsVsC0bQdKScngt4iUTD4Fy/8p7PoHzRu1DclwmgmiqgUXjD3oTKHbAt869qdJ7l98jNTEblPTkXMwetpvnftA0LLHb4X8kiY9Kx6Q+W7wJtG0HR7fdrtYz+x7iya0vkEtUULIzCjC21wY+W/GYXusRH5kGytWTLxgEEhePPwhKYb7EK3BQuxWwTBuUkd3X8goUn6fMHLyTT+DCsQdAEXNzSMeVPAJHdF2DmH8poCREp3uwm7HsGq9J9q69iuunX6EgrwQVObjpBt8z6rdPfvE8kiiyhsvHnomrQx6BxYUyYiNS8f75H1w4/ISepDZLoDhNJ9cdNUquhRsv+6EP9oNH7Iff2A9g8h8CLt1gH0Qf9NMQAFnO60BJFQe0AAAAAElFTkSuQmCC" class="img-responsive pull-left" alt="Responsive image">
iEDUCATION</a>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">SCHOOL <span class="caret"></span></a>
<ul class="dropdown-menu mega-dropdown-menu ">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">ENROL THEM</li>
<div id="menCollection" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<a href="#"><img src="http://placehold.it/254x150/ff3546/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a>
<h4><small>SAMEER RAI CLASS- 5</small></h4>
<button class="btn btn-primary" type="button">Rs. 1000</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
<div class="item">
<a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2"></a>
<h4><small>SAMEER RAI CLASS- 8</small></h4>
<button class="btn btn-primary" type="button">Rs. 1000</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
<div class="item">
<a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3"></a>
<h4><small>SAMEER RAI CLASS- 10</small></h4>
<button class="btn btn-primary" type="button">Rs. 1000</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
<!-- Controls -->
<a class="left carousel-control" href="#menCollection" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#menCollection" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
<li class="divider"></li>
<li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">JOIN</li>
<li><a href="#">STUDENTS</a></li>
<li><a href="#">SCHOOLS</a></li>
<li><a href="#">TUITIONS</a></li>
<li><a href="#">NGOS</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">ADDMISSION</li>
<li><a href="#">DAY-SCHOLAR</a></li>
<li><a href="#">BOARDING</a></li>
<li><a href="#">Coloured Headers</a></li>
<li><a href="#">Primary Buttons & Default</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">HELP</li>
<li><a href="#">MONEY</a></li>
<li><a href="#">MONEY + KID</a></li>
<li><a href="#">RESORCES</a></li>
<li><a href="#">REFER</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">STUDENTS<span class="caret"></span></a>
<ul class="dropdown-menu mega-dropdown-menu ">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">ENROL THEM</li>
<div id="menCollection" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<a href="#"><img src="http://placehold.it/254x150/ff3546/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a>
<h4><small>SAMEER RAI CLASS- 5</small></h4>
<button class="btn btn-primary" type="button">Rs. 1000</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
<div class="item">
<a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2"></a>
<h4><small>SAMEER RAI CLASS- 8</small></h4>
<button class="btn btn-primary" type="button">Rs. 1000</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
<div class="item">
<a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3"></a>
<h4><small>SAMEER RAI CLASS- 10</small></h4>
<button class="btn btn-primary" type="button">Rs. 1000</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
<!-- Controls -->
<a class="left carousel-control" href="#menCollection" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#menCollection" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
<li class="divider"></li>
<li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">SCHOOLING</li>
<li><a href="#">STUDENTS</a></li>
<li><a href="#">SCHOOLS</a></li>
<li><a href="#">TUITIONS</a></li>
<li><a href="#">NGOS</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">COURSES</li>
<li><a href="#">DAY-SCHOLAR</a></li>
<li><a href="#">BOARDING</a></li>
<li><a href="#">Coloured Headers</a></li>
<li><a href="#">Primary Buttons & Default</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">TUITIONS</li>
<li><a href="#">MONEY</a></li>
<li><a href="#">MONEY + KID</a></li>
<li><a href="#">RESORCES</a></li>
<li><a href="#">REFER</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">TEACHERS<span class="caret"></span></a>
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">ENROL THEM</li>
<div id="menCollection" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<a href="#"><img src="http://placehold.it/254x150/ff3546/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a>
<h4><small>SAMEER RAI CLASS- 5</small></h4>
<button class="btn btn-primary" type="button">Rs. 1000</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
<div class="item">
<a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2"></a>
<h4><small>SAMEER RAI CLASS- 8</small></h4>
<button class="btn btn-primary" type="button">Rs. 1000</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
<div class="item">
<a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3"></a>
<h4><small>SAMEER RAI CLASS- 10</small></h4>
<button class="btn btn-primary" type="button">Rs. 1000</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
<!-- Controls -->
<a class="left carousel-control" href="#menCollection" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#menCollection" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
<li class="divider"></li>
<li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">JOIN</li>
<li><a href="#">STUDENTS</a></li>
<li><a href="#">SCHOOLS</a></li>
<li><a href="#">TUITIONS</a></li>
<li><a href="#">NGOS</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">SERVICE</li>
<li><a href="#">DAY-SCHOLAR</a></li>
<li><a href="#">BOARDING</a></li>
<li><a href="#">Coloured Headers</a></li>
<li><a href="#">Primary Buttons & Default</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">SUPPORT</li>
<li><a href="#">MONEY</a></li>
<li><a href="#">MONEY + KID</a></li>
<li><a href="#">RESORCES</a></li>
<li><a href="#">REFER</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">COURSES<span class="caret"></span></a>
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">ENROL THEM</li>
<div id="menCollection" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<a href="#"><img src="http://placehold.it/254x150/ff3546/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a>
<h4><small>SAMEER RAI CLASS- 5</small></h4>
<button class="btn btn-primary" type="button">Rs. 1000</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
<div class="item">
<a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2"></a>
<h4><small>SAMEER RAI CLASS- 8</small></h4>
<button class="btn btn-primary" type="button">Rs. 1000</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
<div class="item">
<a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3"></a>
<h4><small>SAMEER RAI CLASS- 10</small></h4>
<button class="btn btn-primary" type="button">Rs. 1000</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
<!-- Controls -->
<a class="left carousel-control" href="#menCollection" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#menCollection" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
<li class="divider"></li>
<li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">JOIN</li>
<li><a href="#">STUDENTS</a></li>
<li><a href="#">SCHOOLS</a></li>
<li><a href="#">TUITIONS</a></li>
<li><a href="#">NGOS</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">ADDMISSION</li>
<li><a href="#">DAY-SCHOLAR</a></li>
<li><a href="#">BOARDING</a></li>
<li><a href="#">Coloured Headers</a></li>
<li><a href="#">Primary Buttons & Default</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">HELP</li>
<li><a href="#">MONEY</a></li>
<li><a href="#">MONEY + KID</a></li>
<li><a href="#">RESORCES</a></li>
<li><a href="#">REFER</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">HELP<span class="caret"></span></a>
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">ENROL THEM</li>
<div id="menCollection" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<a href="#"><img src="http://placehold.it/254x150/ff3546/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a>
<h4><small>SAMEER RAI CLASS- 5</small></h4>
<button class="btn btn-primary" type="button">Rs. 1000</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
<div class="item">
<a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2"></a>
<h4><small>SAMEER RAI CLASS- 8</small></h4>
<button class="btn btn-primary" type="button">Rs. 1000</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
<div class="item">
<a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3"></a>
<h4><small>SAMEER RAI CLASS- 10</small></h4>
<button class="btn btn-primary" type="button">Rs. 1000</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
<!-- Controls -->
<a class="left carousel-control" href="#menCollection" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#menCollection" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
<li class="divider"></li>
<li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">PEOPLE</li>
<li><a href="#">STUDENTS</a></li>
<li><a href="#">SCHOOLS</a></li>
<li><a href="#">TUITIONS</a></li>
<li><a href="#">NGOS</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">SCHOOLS</li>
<li><a href="#">DAY-SCHOLAR</a></li>
<li><a href="#">BOARDING</a></li>
<li><a href="#">Coloured Headers</a></li>
<li><a href="#">Primary Buttons & Default</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">NGOS</li>
<li><a href="#">MONEY</a></li>
<li><a href="#">MONEY + KID</a></li>
<li><a href="#">RESORCES</a></li>
<li><a href="#">REFER</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModal" aria-hidden="true">
<div class="modal-dialog modal-default">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Login to Hosting Portal - Control Panel</h3>
</div>
<div class="modal-body">
<article class="container-form center-block">
<!-- Form Content HERE! -->
<form method="post" accept-charset="utf-8" autocomplete="off" role="form" class="form-horizontal" action="https://secure.yourwebhosting.com/secureLogin" enctype="application/x-www-form-urlencoded">
<fieldset>
<input type='hidden' name='__token_timestamp__' value='1426572610'>
<input type='hidden' name='__token_val__' value='4d96cad055fac46518825357fcb49390'>
<input type="hidden" name="destination" value="http://www.yourwebhosting.com/controlpanel/index.bml">
<!-- Name input-->
<div class="form-group">
<label class="sr-only" for="credential_0">Username: </label>
<div class="col-xs-12">
<input id="credential_0" name="credential_0" type="text" placeholder="Your Username" class="form-control">
</div>
</div>
<!-- Email input-->
<div class="form-group">
<label class="sr-only" for="credential_1">Password: </label>
<div class="col-xs-12">
<input id="email" type="password" name="credential_1" value="" placeholder="Your Password" class="form-control">
</div>
</div>
<!-- Form actions -->
<div class="form-group pull-right">
<div class="col-md-12 text-right">
<button type="submit" name="submit" value="Sign In" class="btn btn-lg">Submit</button>
</div>
</div>
</fieldset>
</form>
</article>
</div>
<div class="modal-footer">
Login Problems?
<button type="submit" class="btn btn-dark" data-dismiss="modal" data-href="#collapseTwo" data-toggle="collapse" data-target="#collapseTwo" style="cursor:pointer;">Contact Me</button>
</div>
</div>
</div>
</div>
</div>
<aside id="accordion" class="social text-vertical-center">
<div class="accordion-social">
<ul class="panel-collapse collapse in nav nav-stacked" role="tabpanel" aria-labelledby="social-collapse" id="collapseOne">
<li><a href="https://www.facebook.com/soldierupdesigns" target="_blank"><i class="fa fa-lg fa-facebook"></i></a></li>
<li><a href="https://twitter.com/soldierupdesign" target="_blank"><i class="fa fa-lg fa-twitter"></i></a></li>
<li><a href="https://www.plus.google.com/+soldierupdesigns" target="_blank"><i class="fa fa-lg fa-google-plus"></i></a></li>
<li><a href="https://github.com/blayderunner123" target="_blank"><i class="fa fa-lg fa-github"></i></a></li>
<li><a href="https://linkedin.com/in/blayderunner123" target="_blank"><i class="fa fa-lg fa-linkedin"></i></a></li>
<li><a href="skype:live:soldierupdesigns?call"><i class="fa fa-lg fa-skype" target="_blank"></i></a></li>
<li><a href="http://stackexchange.com/users/4992378/blayderunner123" target="_blank"><i class="fa fa-lg fa-stack-exchange"></i></a></li>
</ul>
</div>
</aside>
<div class="masthead">
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
<li data-target="#bs-carousel" data-slide-to="1"></li>
<li data-target="#bs-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item slides active">
<div class="slide-1"></div>
<div class="hero">
<hgroup>
<h1>We are creative</h1>
<h3>Get start your next awesome project</h3>
</hgroup>
<button class="btn btn-hero btn-lg" role="button">See all features</button>
</div>
</div>
<div class="item slides">
<div class="slide-2"></div>
<div class="hero">
<hgroup>
<h1>We are smart</h1>
<h3>Get start your next awesome project</h3>
</hgroup>
<button class="btn btn-hero btn-lg" role="button">See all features</button>
</div>
</div>
<div class="item slides">
<div class="slide-3"></div>
<div class="hero">
<hgroup>
<h1>We are amazing</h1>
<h3>Get start your next awesome project</h3>
</hgroup>
<button class="btn btn-hero btn-lg" role="button">See all features</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-offset-1 col-md-7">
<div class="panel panel-default">
<div class="bs-callout bs-callout-danger">
<h4>First we need to create the Sidebar, To-top and Social buttons framework</h4>
<p>
First we need to define the buttons we are later going to code for the sidebar navigation this will be the foundation that we reference to so remember what you name them.
</p>
<p>
<b>1. </b> To get a basic buttons we just add class <span class="nocode">.btn</span> to the <code><a></code> element.<br>
<b>1.a. </b> we also need to add the <span class="nocode">.toggle</span> class to the sidebar to fire later during a hover event.
<blockquote>
<b>Note: </b> I have added custom buttons CSS called <span class="nocode">.btn-dark</span> which gives you that <span class="nocode">.btn-inverse</span> look.
</blockquote>
<pre class="prettyprint linenums:1">
<a href="#" class="btn btn-dark btn-lg toggle">
<span class="sr-only">Toggle Sidebar Navigation</span>
<i class="fa fa-bars"></i>
</a>
<a class="btn btn-lg btn-dark" href="#top">
<span class="sr-only">Toggle to Top Navigation</span>
<i class="fa fa-chevron-up"></i>
</a></pre>
</p>
<p> </p>
</div>
</div>
<div class="panel panel-default">
<div class="bs-callout bs-callout-danger">
<p>
<b>2. </b> next we need to add the id elements to reference in the jQuery they are: <span class="nocode">menu-toggle</span>, and <span class="nocode">to-top</span>.<br>
<blockquote>
<b>Note: </b> I have added custom buttons CSS called <span class="nocode">.btn-dark</span> which gives you that <span class="nocode">.btn-inverse</span> look.
</blockquote>
<pre class="prettyprint linenums:1">
<a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>
<a id="to-top" class="btn btn-lg btn-dark" href="#top">
<span class="sr-only">Toggle to Top Navigation</span>
<i class="fa fa-chevron-up"></i>
</a></pre>
</p>
<p>
In this example we are going to add the <span class="nocode">.panel-default</span> for Bootstrap default panel styling.
</p>
</div>
</div>
</div>
<div class="col-md-4 hidden-xs hidden-sm">
<div class="panel panel-default">
<div class="bs-callout bs-right-panel">
<a href="//www.ipage.com/join/index.bml?bannerID=550&AffID=743889">
<img class="img-responsive" src="http://www.ipage.com/affiliate/banners/550" style="border:0px" alt="affiliate_link"/>
</a>
</div>
</div>
<div class="panel panel-default">
<div class="bs-callout bs-right-panel">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- bs-right-panel -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1487659930909767"
data-ad-slot="6784370337"
data-ad-format="auto">
</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class="panel panel-default">
<div class="bs-callout bs-right-panel">
<div class="row">
<h3 class="text-primary">Download Resume below</h3>
</div>
<div class="row">
<a type="button" class="btn btn-success btn-lg btn-block" href="https://drive.google.com/open?id=0By_9nIhC1083ZV9xQ0tDUUdsQkk" target="_blank">Click to view & download</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<script>
$(document).ready(function(){
$("[rel='tooltip']").tooltip();
});
</script>
</body>
/*!
* Soldier-up Designs - Soldier-up Designs New Homepage (https://soldierupdesigns.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
/* Global Styles */
*, *: before, *:after {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
body {
width: 100%;
height: 100%;
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
overflow-x: hidden;
}
html {
width: 100%;
height: 100%;
}
a:hover{
text-decoration:none;
}
.navbar-brand>img{
margin: auto 0px auto 15px;
padding: auto;
}
.navbar-header{
margin-left:-4%!important;
}
.navbar-left{
margin-left:38.7px;
}
.navbar-right{
margin-right:21px;
}
.navbar-inverse{
border:none;
}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
border:none;
}
#to-top {
position: fixed;
right: .2%;
bottom: .2%;
z-index: 799;
}
.btn-dark {
border-radius: 0;
color: #fff;
background-color: rgba(0, 0, 0, 0.4);
}
.btn-dark:hover, .btn-dark:focus, .btn-dark:active {
color: #fff;
background-color: rgba(0, 0, 0, 0.7);
}
.btn-light {
border-radius: 0;
color: #333;
background-color: rgb(255, 255, 255);
}
.btn-light:hover, .btn-light:focus, .btn-light:active {
color: #333;
background-color: rgba(255, 255, 255, 0.8);
}
.btn {
border-radius: 0px;
overflow: hidden;
border:none;
}
.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: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: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 {
color: #333;
background-color: #efefef;
border-color: #ccc;
}
.btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
box-shadow: inset 0 0 0 5px #adadad;
}
.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 {
color: #fff;
background-color: #080808;
border-color: #333;
box-shadow: inset 0 0 0 2px #333;
}
.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-danger.active, .btn-danger.focus, .btn-danger:active, .btn-danger:focus, .btn-danger:hover, .open>.dropdown-toggle.btn-danger {
color: #c9302c;
background-color: #fff;
box-shadow: inset 0 0 0 2px #c9302c;
border-color: #ac2925;
}
.panel {
border-radius: 0;
margin-top: 0;
}
.accordion-toggle{
z-index: 801;
position: fixed;
top: 0;
left: .5%;
}
.accordion-toggle:hover, .accordion-toggle:focus{
cursor:pointer;
}
.nav-btn{
display:block;
top: 0px;
padding-top: 10px;
padding-bottom: 15px;
text-align:center;
}
.contact-panel{
border-radius:0;
background-color: #d9534f;
border-color: #d43f3a;
margin-bottom:0;
position:fixed;
bottom:0;
width:100%;
}
.accordion label{
color:#fff;
}
.accordion input{
border-radius:0;
}
.panel-heading,
.panel-heading:hover,
.panel-heading:focus,
.panel-heading.focus,
.panel-heading:active,
.panel-heading.active{
cursor:pointer;
background-color: #c9302c;
border-color: #ac2925;
outline:none;
}
.accordion-toggle{
text-align:center;
width:2.7%;
min-width: 50px;
}
.accordion-toggle span:after{
/* symbol for "opening" panels */
font-family: 'FontAwesome';
/* essential for enabling glyphicon */
content:"\f078";
position:absolute;
top:0;
bottom:0;
right:5%;
color: white;
text-align:right;
float:right;
vertical-align:middle;
margin-top:0;
font-weight:700;
font-size:120%;
text-decoration:none;
}
.collapsed span:after{
/* symbol for "collapsed" panels */
content:"\f077";
}
.contact-panel{
border-radius:0;
background-color: #d9534f;
border-color: #d43f3a;
margin-bottom:0;
position:fixed;
bottom:0;
width:100%;
vertical-align:middle;
}
.btn-dark{
border-radius: 0;
color: #fff;
background-color: rgba(0,0,0,0.4);
}
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active,
.btn-dark.active{
color: #fff;
background-color: rgba(0,0,0,0.7);
}
@media(min-width: 768px){
.contact-panel{
width:50%;
}
}
.social {
z-index: 801;
position: fixed;
top: 10%;
left: .5%;
padding: 0;
margin: 0;
font-size: 100%;
width:2.7%;
}
.social ul {
background: #222;
}
.social ul li {
list-style: none outside none;
display: block;
background: #222;
padding: 0;
margin: 0;
}
.nav>li>a:focus, .nav>li>a:hover {
text-decoration: none;
background-color: #222;
}
.social i {
width:100%;
min-width: 50px;
height: 100%;
min-height: 50px;
color: #FFF;
background-color: #222;
font-size: 22px;
text-align: center;
padding-top: 12px;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.social .fa-facebook:hover {
background: #4060A5;
border: 1px solid #4060A5;
}
.social .fa-twitter:hover {
background: #00ABE3;
border: 1px solid #00ABE3;
}
.social .fa-google-plus:hover {
background: #e64522;
border: 1px solid #e64522;
}
.social .fa-github:hover {
background: #343434;
border: 1px solid #343434;
}
.social .fa-linkedin:hover {
background: #0094BC;
border: 1px solid #0094BC;
}
.social .fa-stack-overflow:hover {
background: #FEA501;
border: 1px solid #FEA501;
}
.social .fa-skype:hover {
background: #00C6FF;
border: 1px solid #00C6FF;
}
.social .fa-stack-exchange:hover {
background: #4D86C9;
border: 1px solid #4D86C9;
}
.social .fa-rss:hover {
background: #e88845;
border: 1px solid #e88845;
}
#social-collapse:after {
font-family: 'FontAwesome';
content: "\f068";
float: none;
position: relative;
color: white;
}
#social-collapse.collapsed:after {
content: "\f067";
}
ol.linenums{
counter-reset:linenumber;
}
ol.linenums li{
list-style-type:none;
counter-increment:linenumber;
}
ol.linenums li:before{
content: counter(linenumber);
float:left;
margin-left:-4em;
text-align:right;
width:3em;
}
.mt {
margin-top: 2%;
}
.masthead{
display: table;
position: relative;
min-width: 100%;
min-height: 100%;
width: 100%;
height: 100%;
background: transparent url("../img/bg.jpg") no-repeat fixed 0px 0px / cover;
z-index: 800;
background-color:#000;
}
.text-white{
color:#fff;
}
.text-vertical-center {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.text-vertical-center h1 {
margin: 0;
padding: 0;
font-size: 4.5em;
font-weight: 700;
}
section {
padding-bottom: 5%;
}
.bg-inverse {
color: #FFF;
background-color: #333;
}
.centered {
text-align: center;
}
.mt {
margin-top: 2%;
}
.text-vertical-center {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.text-vertical-center h1 {
margin: 0;
padding: 0;
font-size: 4.5em;
font-weight: 700;
}
hr.small {
max-width: 100px;
}
small{
color:black !important;
}
.page-header{
text-align: center;
}
/*page styling*/
.bs-callout {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #eee;
border-image: none;
border-radius: 3px;
border-style: solid;
border-width: 1px 1px 1px 5px;
margin-bottom: 5px;
padding: 20px;
}
.bs-right-panel{
padding: 10px;
width:100%;
float:none;
text-align:center;
margin:0 auto;
}
.bs-right-panel img{
width:100%;
margin:0;
padding:0;
}
.bs-callout:last-child {
margin-bottom: 0px;
}
.bs-callout h4,
.bs-callout h5 {
margin-bottom: 10px;
margin-top: 5px;
font-weight: 600;
}
.bs-callout-danger {
border-left-color: #d9534f;
}
.bs-callout-danger h4,
.bs-callout-danger h5{
color: #d9534f;
}
.header-title {
color: #fff;
}
.title-thin {
font-weight: 300;
}
.service-item {
margin-bottom: 30px;
}
/*
========================
Social Accordion Styling
========================
*/
.nav-stacked > li > a {
position: relative;
display: block;
padding: 0!important;
margin: 0!important;
}
.nav-stacked > li > a:focus, .nav-stacked > li > a:hover {
text-decoration: none;
background-color: #222;
}
.nav-tabs.nav-justified {
border-bottom: 0 none;
width: 100%;
}
.nav-tabs.nav-justified > li {
display: table-cell;
width: 1%;
float: none;
}
.container-form .nav-tabs.nav-justified > li > a, .container-form .nav-tabs.nav-justified > li > a:hover, .container-form .nav-tabs.nav-justified > li > a:focus {
background: #333333;
border: 0 none;
color: #ffffff;
margin-bottom: 0;
margin-right: 0;
border-radius: 0;
padding: 6% 3%;
line-height: 1.5;
font-weight: 600;
font-size: 100%;
outline: 0 none;
}
/*
===============================
Custom Bootstrap Form Styling
===============================
.container-form .nav-tabs.nav-justified > .active > a, .container-form .nav-tabs.nav-justified > .active > a:hover, .container-form .nav-tabs.nav-justified > .active > a:focus {
background: #ffffff;
color: #333333;
}
.container-form .nav-tabs.nav-justified > li > a:hover, .container-form .nav-tabs.nav-justified > li > a:focus {
background: #de2f18;
}
.tabs-login {
background: #ffffff;
border: medium none;
margin-top: -1px;
padding: 10px 30px;
}
.container-form h2 {
color: #222222;
}
.container-form {
margin: 0 auto;
padding: 2%}
.container-form h1 {
border: 2px solid #222;
background: #222;
color: #fff;
text-transform: uppercase;
font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 800;
letter-spacing: 1px;
-webkit-box-shadow: inset 0 0 0 2px #fff;
-moz-box-shadow: inset 0 0 0 2px #fff;
box-shadow: inset 0 0 0 2px #fff;
}
form {
background: #d9534f;
margin-top: -2%;
width: 100%}
label {
color: #fff;
}
::-webkit-input-placeholder {
color: #fff !important;
font-weight: 800;
text-transform: uppercase;
}
.form-control:-moz-placeholder {
color: #fff !important;
opacity: 1;
font-weight: 800;
text-transform: uppercase;
}
::-moz-placeholder {
color: #fff !important;
opacity: 1;
font-weight: 800;
text-transform: uppercase;
}
:-ms-input-placeholder {
color: #fff !important;
font-weight: 800;
text-transform: uppercase;
}
:focus::-webkit-input-placeholder {
color: #333 !important;
font-weight: 800;
text-transform: uppercase;
}
.form-control:focus:-moz-placeholder {
color: #333 !important;
opacity: 1;
font-weight: 800;
text-transform: uppercase;
}
:focus::-moz-placeholder {
color: #333 !important;
opacity: 1;
font-weight: 800;
text-transform: uppercase;
}
:focus:-ms-input-placeholder {
color: #333 !important;
font-weight: 800;
text-transform: uppercase;
}
[type="text"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
color: #333;
}
.container-form .checkbox {
margin-top: -15px;
}
.container-form .btn {
background-color: #222222;
border-color: #222222;
color: #ffffff;
border-radius: 0;
font-size: 18px;
line-height: 1.33;
padding: 10px 16px;
width: 100%;
box-shadow: inset 0 0 0 2px #fff;
}
.container-form .btn:hover, .container-form .btn:focus {
background: #ffffff;
border-color: #ededed;
box-shadow: inset 0 0 0 2px #222;
color: #222;
-webkit-transition: background .8s ease-in-out;
-moz-transition: background .8s ease-in-out;
-ms-transition: background .8s ease-in-out;
transition: background .8s ease-in-out;
}
*/
.form-control {
background-color: #090909 !important;
background-image: none;
border: none;
border-radius: 0;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
display: block;
font-size: 14px;
height: 34px;
line-height: 1.42857;
padding: 6px 12px;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
width: 100%;
color: #inherit !important;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-ms-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
outline: none;
}
.form-control:hover {
border-color: rgba(100, 00, 00, 0.50);
background-color: #222222 !important;
background-image: none;
color: #inherit !important;
color: #fff;
-webkit-box-shadow: 0 0 10px rgba(09, 09, 09, 0.8);
-moz-box-shadow: 0 0 10px rgba(09, 09, 09, 0.8);
box-shadow: 0 0 10px rgba(09, 09, 09, 0.8);
}
.form-control:focus {
border-color: rgba(22, 22, 22, .75);
outline: 0;
outline: thin dotted 9;
background: #fff !important;
color: #333 !important;
-webkit-box-shadow: 0 0 8px rgba(22, 22, 22, .6);
-moz-box-shadow: 0 0 8px rgba(22, 22, 22, .6);
box-shadow: 0 0 8px rgba(22, 22, 22, .6);
}
.nocode{
font-weight:700;
color:#c7254e;
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}
pre, .nocode{
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}
.prettyprint code > .atv,
.prettyprint code > .atn,
.prettyprint code > .pun {
background:#c7254e!important;
color:#fff!important;
}
blockquote
{
font-size: 80% !important;
page-break-inside: avoid;
border: 3px solid #fff;
width: 80%;
-webkit-box-shadow: inset 5px 0px 0px 0px #f60, 8px 8px 8px 2px #888;
-mox-box-shadow: inset 5px 0px 0px 0px #f60, 8px 8px 8px 2px #888;
-ms-box-shadow: inset 5px 0px 0px 0px #f60, 8px 8px 8px 2px #888;
box-shadow: inset 5px 0px 0px 0px #f60, 8px 8px 8px 2px #888;
padding: 10px 20px;
margin: 0 0 20px;
font-size: 17.5px;
border-left: none;
}
.updated{
display:block;
position:relative;
width:100%;
margin:0;
padding:.5%;
text-align:center;
background:#ededed;
color:#222222;
}
ins{
background:#c9302c;
border-color:#ac2925;
}
.addthis_recommended_vertical{
background:#c9302c;
border-color:#ac2925;
}
.mega-dropdown {
position: static !important;
}
.mega-dropdown-menu {
padding: 20px 0px;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
}
.mega-dropdown-menu > li > ul {
padding: 0;
margin: 0;
}
.mega-dropdown-menu > li > ul > li {
list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
display: block;
color: #222;
padding: 3px 5px;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
text-decoration: none;
}
.mega-dropdown-menu .dropdown-header {
font-size: 18px;
color: #ff3546;
padding: 5px 60px 5px 5px;
line-height: 30px;
}
.carousel-control {
width: 30px;
height: 30px;
top: -35px;
}
.left.carousel-control {
right: 30px;
left: inherit;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
font-size: 12px;
background-color: #fff;
line-height: 30px;
text-shadow: none;
color: #333;
border: 1px solid #ddd;
}
/*
Fade content bs-carousel with hero headers
Code snippet by maridlcrmn (Follow me on Twitter @maridlcrmn) for Bootsnipp.com
Image credits: unsplash.com
*/
/********************************/
/* Fade Bs-carousel */
/********************************/
.fade-carousel {
position: relative;
height: 100vh;
}
.fade-carousel .carousel-inner .item {
height: 100vh;
}
.fade-carousel .carousel-indicators > li {
margin: 0 2px;
background-color: #f39c12;
border-color: #f39c12;
opacity: .7;
}
.fade-carousel .carousel-indicators > li.active {
width: 10px;
height: 10px;
opacity: 1;
}
/********************************/
/* Hero Headers */
/********************************/
.hero {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
color: #fff;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0,0,0,.75);
-webkit-transform: translate3d(-50%,-50%,0);
-moz-transform: translate3d(-50%,-50%,0);
-ms-transform: translate3d(-50%,-50%,0);
-o-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}
.hero h1 {
font-size: 6em;
font-weight: bold;
margin: 0;
padding: 0;
}
.fade-carousel .carousel-inner .item .hero {
opacity: 0;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
.fade-carousel .carousel-inner .item.active .hero {
opacity: 1;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
/********************************/
/* Overlay */
/********************************/
.overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
background-color: #080d15;
opacity: .7;
}
/********************************/
/* Custom Buttons */
/********************************/
.btn.btn-lg {padding: 10px 40px;}
.btn.btn-hero,
.btn.btn-hero:hover,
.btn.btn-hero:focus {
color: #f5f5f5;
background-color: #1abc9c;
border-color: #1abc9c;
outline: none;
margin: 20px auto;
}
/********************************/
/* Slides backgrounds */
/********************************/
.fade-carousel .slides .slide-1,
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
height: 100vh;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.fade-carousel .slides .slide-1 {
background-image: url(https://ununsplash.imgix.net/photo-1416339134316-0e91dc9ded92?q=75&fm=jpg&s=883a422e10fc4149893984019f63c818);
}
.fade-carousel .slides .slide-2 {
background-image: url(https://ununsplash.imgix.net/photo-1416339684178-3a239570f315?q=75&fm=jpg&s=c39d9a3bf66d6566b9608a9f1f3765af);
}
.fade-carousel .slides .slide-3 {
background-image: url(https://ununsplash.imgix.net/photo-1416339276121-ba1dfa199912?q=75&fm=jpg&s=9bf9f2ef5be5cb5eee5255e7765cb327);
}
/********************************/
/* Media Queries */
/********************************/
@media screen and (min-width: 980px){
.hero { width: 980px; }
}
@media screen and (max-width: 640px){
.hero h1 { font-size: 4em; }
}
/*******************************/
/* Footer Queries */
/*******************************/
footer,.footer {
position: absolute;
bottom: 0;
width: 100%;
background:#0c1a1e; min-height:350px; font-family: 'Open Sans', sans-serif;
}
.footerleft { margin-top:50px; padding:0 36px; }
.logofooter { margin-bottom:10px; font-size:25px; color:#fff; font-weight:700;}
.footerleft p { color:#fff; font-size:12px !important; font-family: 'Open Sans', sans-serif; margin-bottom:15px;}
.footerleft p i { width:20px; color:#999;}
.paddingtop-bottom { margin-top:50px;}
.footer-ul { list-style-type:none; padding-left:0px; margin-left:2px;}
.footer-ul li { line-height:29px; font-size:12px;}
.footer-ul li a { color:#a0a3a4; transition: color 0.2s linear 0s, background 0.2s linear 0s; }
.footer-ul i { margin-right:10px;}
.footer-ul li a:hover {transition: color 0.2s linear 0s, background 0.2s linear 0s; color:#ff670f; }
.social:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
.icon-ul { list-style-type:none !important; margin:0px; padding:0px;}
.icon-ul li { line-height:75px; width:100%; float:left;}
.icon { float:left; margin-right:5px;}
.copyright { min-height:40px; background-color:#000000;}
.copyright p { text-align:left; color:#FFF; padding:10px 0; margin-bottom:0px;}
.heading7 { font-size:21px; font-weight:700; color:#d9d6d6; margin-bottom:22px;}
.post p { font-size:12px; color:#FFF; line-height:20px;}
.post p span { display:block; color:#8f8f8f;}
.bottom_ul { list-style-type:none; float:right; margin-bottom:0px;}
.bottom_ul li { float:left; line-height:40px;}
.bottom_ul li:after { content:"/"; color:#FFF; margin-right:8px; margin-left:8px;}
.bottom_ul li a { color:#FFF; font-size:12px;}
.navbar{
border:none;
border-radius: 0px;
}
.navbar-footer{
margin-bottom:0px !important;
position: static;
bottom: 0px;
}
.navbar-footer:after{
content:"";
margin:0px auto;
padding:0px;
}
