<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.1.0/css/flag-icon.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<!------ Above HEAD tag CODE below ---------->
<h1 class="text-center">Example 6 - Background Image with hidden text</h1>
++++
<nav class="navbar navbar-inverse navbar-static-top example6">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar6">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text
</a>
</div>
<div id="navbar6" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
<!------ Include the above in your HEAD tag ---------->
<h1 class="text-center">Example 3 - Increase entire navbar height</h1>
<div class="example3">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar3">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://disputebills.com"><img src="https://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png" alt="Dispute Bills">
</a>
</div>
<div id="navbar3" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
<!------ Include the above in your HEAD tag ---------->
<h1 class="text-center">Example 2 - Increase logo size and add menu to right side</h1>
<div class="container example2">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://disputebills.com"><img src="https://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png" alt="Dispute Bills">
</a>
</div>
<div id="navbar2" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
<div style="padding-left:16px">
<h2>Responsive Login Form in Navbar</h2>
<p>Navigation menu with a login form and a submit button inside of it.</p>
<p>Resize the browser window to see the responsive effect.</p>
</div>
*************************************
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="wrapper">
<nav class="navbar fixed-top navbar-expand-lg navbar-dark fixed-top">
<div class="container">
<a href="#menu-toggle" class="navbar-toggler " id="menu-toggle"><i class="myfa fa fa-ellipsis-h"></i></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">All</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Images</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Videos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Maps</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MSN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Office Online</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Outlook.com</a>
</li>
</ul>
<ul class="navbar-nav ml-auto ">
<li class="nav-item avatar-profile">
</li>
<li class="nav-item dropdown d-none d-sm-block">
<a class="nav-link " href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-bars"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="#"><i class="fa fa-cog"></i> Setting</a>
<a class="dropdown-item" href="#"><i class="fa fa-history"></i> Search history</a>
<a class="dropdown-item" href="#"><i class="fa fa-star"></i> My interest</a>
<a class="dropdown-item" href="#"><i class="fa fa-check"></i> My saves</a>
<a class="dropdown-item" href="#"><i class="fa fa-gamepad"></i> Fun & Games</a>
<a class="dropdown-item" href="#"><i class="fa fa-comment"></i> Feedback</a>
<a class="dropdown-item" href="#"><i class="fa fa-lock"></i> SafeSearch</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<!-- Masthead -->
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>
<div class="col-lg-2 mb-4 ">
<h4 class="card-header myh4">Flowers</h4>
<a href="#"><img class="card-img-top" src="https://images.pexels.com/photos/992734/pexels-photo-992734.jpeg?auto=compress&cs=tinysrgb&h=350" alt=""></a>
</div>
</li>
<li>
<div class="col-lg-2 mb-4">
<h4 class="card-header myh4">Business </h4>
<a href="#"><img class="card-img-top" src="https://images.pexels.com/photos/179912/pexels-photo-179912.jpeg?auto=compress&cs=tinysrgb&h=350" alt=""></a>
</div>
</li>
<li>
<div class="col-lg-2 mb-4 ">
<h4 class="card-header myh4">Culture</h4>
<a href="#"><img class="card-img-top" src="https://images.pexels.com/photos/1008241/pexels-photo-1008241.jpeg?auto=compress&cs=tinysrgb&h=350" alt=""></a>
</div>
</li>
<li>
<div class="col-lg-2 mb-4 ">
<h4 class="card-header myh4">Pets</h4>
<a href="#"><img class="card-img-top" src="https://images.pexels.com/photos/1038914/pexels-photo-1038914.jpeg?auto=compress&cs=tinysrgb&h=350" alt=""></a>
</div>
</li>
<li>
<div class="col-lg-2 mb-4 ">
<h4 class="card-header myh4">Adventure</h4>
<a href="#">
<img class="card-img-top" src="https://images.pexels.com/photos/708392/pexels-photo-708392.jpeg?auto=compress&cs=tinysrgb&h=350">
</a>
</div>
</li>
<li>
<div class="col-lg-2 mb-4 ">
<h4 class="card-header myh4">Nature</h4>
<a href="#"><img class="card-img-top" src="https://images.pexels.com/photos/623080/pexels-photo-623080.jpeg?auto=compress&cs=tinysrgb&h=350" alt=""></a>
</div>
</li>
</ul>
</div>
//////////////////////////
.navbar {
background-color: #f17115;
}
.navbar .navbar-brand {
color: #ecf0f1;
}
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
color: #ecdbff;
}
.navbar .navbar-text {
color: #ecf0f1;
}
.navbar .navbar-text a {
color: #ecdbff;
}
.navbar .navbar-text a:hover,
.navbar .navbar-text a:focus {
color: #ecdbff;
}
.navbar .navbar-nav .nav-link {
color: #ecf0f1;
border-radius: .25rem;
margin: 0 0.25em;
}
.navbar .navbar-nav .nav-link:not(.disabled):hover,
.navbar .navbar-nav .nav-link:not(.disabled):focus {
color: #ecdbff;
}
.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-nav .nav-item.active .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link:focus,
.navbar .navbar-nav .nav-item.show .nav-link,
.navbar .navbar-nav .nav-item.show .nav-link:hover,
.navbar .navbar-nav .nav-item.show .nav-link:focus {
color: #ecdbff;
background-color: #000f40;
}
.navbar .navbar-toggle {
border-color: #000f40;
}
.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:focus {
background-color: #000f40;
}
.navbar .navbar-toggle .navbar-toggler-icon {
color: #ecf0f1;
}
.navbar .navbar-collapse,
.navbar .navbar-form {
border-color: #ecf0f1;
}
.navbar .navbar-link {
color: #ecf0f1;
}
.navbar .navbar-link:hover {
color: #ecdbff;
}
@media (max-width: 575px) {
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ecf0f1;
}
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ecdbff;
}
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ecdbff;
background-color: #000f40;
}
}
@media (max-width: 767px) {
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ecf0f1;
}
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ecdbff;
}
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ecdbff;
background-color: #000f40;
}
}
@media (max-width: 991px) {
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ecf0f1;
}
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ecdbff;
}
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ecdbff;
background-color: #000f40;
}
}
@media (max-width: 1199px) {
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ecf0f1;
}
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ecdbff;
}
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ecdbff;
background-color: #000f40;
}
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ecf0f1;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ecdbff;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ecdbff;
background-color: #000f40;
}
.navbar {
background-color: #001d7b;
}
.navbar .navbar-brand {
color: #ecf0f1;
}
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
color: #ecdbff;
}
.navbar .navbar-text {
color: #ecf0f1;
}
.navbar .navbar-text a {
color: #ecdbff;
}
.navbar .navbar-text a:hover,
.navbar .navbar-text a:focus {
color: #ecdbff;
}
.navbar .navbar-nav .nav-link {
color: #ecf0f1;
border-radius: .25rem;
margin: 0 0.25em;
}
.navbar .navbar-nav .nav-link:not(.disabled):hover,
.navbar .navbar-nav .nav-link:not(.disabled):focus {
color: #ecdbff;
}
.navbar .navbar-nav .dropdown-menu {
background-color: #001d7b;
border-color: #f17115;
}
.navbar .navbar-nav .dropdown-menu .dropdown-item {
color: #ecf0f1;
}
.navbar .navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar .navbar-nav .dropdown-menu .dropdown-item:focus,
.navbar .navbar-nav .dropdown-menu .dropdown-item.active {
color: #ecdbff;
background-color: #f17115;
}
.navbar .navbar-nav .dropdown-menu .dropdown-divider {
border-top-color: #f17115;
}
.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-nav .nav-item.active .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link:focus,
.navbar .navbar-nav .nav-item.show .nav-link,
.navbar .navbar-nav .nav-item.show .nav-link:hover,
.navbar .navbar-nav .nav-item.show .nav-link:focus {
color: #ecdbff;
background-color: #f17115;
}
.navbar .navbar-toggle {
border-color: #f17115;
}
.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:focus {
background-color: #f17115;
}
.navbar .navbar-toggle .navbar-toggler-icon {
color: #ecf0f1;
}
.navbar .navbar-collapse,
.navbar .navbar-form {
border-color: #ecf0f1;
}
.navbar .navbar-link {
color: #ecf0f1;
}
.navbar .navbar-link:hover {
color: #ecdbff;
}
@media (max-width: 575px) {
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ecf0f1;
}
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ecdbff;
}
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ecdbff;
background-color: #f17115;
}
}
@media (max-width: 767px) {
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ecf0f1;
}
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ecdbff;
}
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ecdbff;
background-color: #f17115;
}
}
@media (max-width: 991px) {
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ecf0f1;
}
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ecdbff;
}
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ecdbff;
background-color: #f17115;
}
}
@media (max-width: 1199px) {
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ecf0f1;
}
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ecdbff;
}
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ecdbff;
background-color: #f17115;
}
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ecf0f1;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ecdbff;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ecdbff;
background-color: #f17115;
body{overflow-x:hidden;
position:relative;
background-color:#343a40;
background:url('https://www.bing.com/az/hprichbg/rb/ChottelDjerid_EN-IN9315193811_1920x1080.jpg') no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;-o-background-size:cover;
background-size:cover;;
padding-top:10rem;
}
header.masthead.text-white.text-center {
padding-top: 3rem;
}
section.features-icons{
padding-top: 15rem;
}
.carousel-control-next, .carousel-control-prev {
position: absolute;
top: 3px;
bottom: 28px;
width:3rem !important;
background:#000;
}
.myoverlay{
position: fixed;
background: rgba(42, 35, 29, 0.7803921568627451);
height:100%;
width:100%;
z-index: 1273;
}
.mylogo{
float:left;
background-image: url('https://www.bing.com/s/a/hpc23.png');
background-position: 0 0;
margin: -7px 21px 0 0;
width: 132px;
height: 52px;
}
/*--carousel--*/
.card-section{
background: transparent;
position: absolute;
left: 0;
right: 0;
top: 74%;
}
.mycard-body {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1.25rem;
}
.card-body{
padding:0px !important;
}
.card-header{
background: rgba(42, 35, 29, 0.7803921568627451) !important;
border-radius: 0px !important;
padding: 8px !important;
text-indent:8px;
}
.card-gal-item {
overflow: hidden;
padding: 4px;
}
.card-gal-item .box {
height: 117px;
overflow: hidden;
}
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: transparent;
background-clip: border-box;
border: 1px solid rgba(0,0,0,.125);
border-radius: none;
}
.card-img-top {
width: 100%;
border-top-left-radius:0;
border-top-right-radius: 0;
}
.myform{
border-radius: 0px !important;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
}
.mybg-dark{
background: rgba(42, 35, 29, 0.7803921568627451) !important;
}
.mybtn{
background: #20c997 !important;
border-color: #20c997 !important;
}
/*--button css--*/
.mybtn-secondary{
color: #000;
background: transparent !important;
border-color: #000;
font-size:14px;
}
.mybtn-secondary:hover{
color:#fff;
border-color: #6c757d;
background-color: #6c757d !important;
font-size:14px;
}
button.btn.btn-default {
position: absolute;
top: 0px;
height: 48px;
width: 50px;
border-radius: 0;
right: 5px;
background: transparent;
outline: none;
}
.fa-2x{
font-size:22px;
color: #238fb6;
}
h4.card-title.myh4 a {
color: #fff;
text-decoration: none;
}
.myh4{
font-size:15px;
margin-bottom:0px !important;
font-weight: normal;
color:#fff;
}
.myp-text{
font-size: 14px;
}
.mylead{
font-size: 19px;
}
.h-145{
height: 145px !important;
width: 100%;
}
.call-to-action{
position:relative;
background-color:#DDDDDD;
padding-top:35px;
padding-bottom:5px;
}
/*--footer--*/
.myfooter{
padding-top: 5px;
padding-bottom: 3px;
}
ul.list-inline.small.mb-2 a {
color: #6c757d!important;
}
p.color-icon a i{
color: #6c757d !important;
}
.social-icons{
color: #6c757d!important;
font-size:17px;
}
.heading-title{
font-size: 22px;
font-weight: normal;
text-transform:uppercase;
line-height: 2;
margin-top: 10px;
text-indent: 4px;
}
/*my gallery*/
.gallery{
padding-top: 1rem;
padding-bottom: 4rem;
}
.gal-item {
overflow: hidden;
padding: 1px;
}
.gal-item .box {
height: 250px;
overflow: hidden;
}
.box img {
height: 100%;
width: 100%;
object-fit: cover;
-o-object-fit: cover;
}
/*--Gallery Zoom--*/
.item {
position: relative;
}
.item img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.item:hover img {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.item:hover .post-title b
{
background-color: rgba(51, 51, 51, 0.58);
position: absolute;
top: 205px;
right: 0;
color: #FFF;
padding: 10px 15px;
}
.dropdown-menu {
min-width: 16rem;
padding: 1.5rem 0px;
border: none;
border-radius: 0;
}
.dropdown-item {
display: block;
width: 100%;
padding: 10px 1.5rem;
clear: both;
font-weight: 400;
color: #212529;
text-align: inherit;
white-space: nowrap;
background-color: transparent;
border: 0;
}
.avatar-profile img {
width: 35px;
height: 34px;
border-radius: 100%;
overflow: hidden;
margin-right: 11px;
margin-left: 11px;
}
/*--Sidebar--*/
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
top: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.myfa{
display: inline-block;
font-size: 25px;
vertical-align: middle;
}
.sidebar-nav {
position: absolute;
top: 80px;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li a:active, .sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav>.sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav>.sidebar-brand a {
color: #999999;
}
.sidebar-nav>.sidebar-brand a:hover {
color: #fff;
background: none;
}
@media(min-width:768px) {
#wrapper {
padding-left: 0;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
width: 0;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
#menu-toggle{
display:none;
}
/*----Responsive---*/
@media (max-width: 480px){
header.masthead {
padding-top: 12rem;
padding-bottom: 12rem;
}
#menu-toggle{
display:block;
}
.myhead{
font-size:20px;
}
.mylead{
font-size:16px;
}
}
@media (max-width: 600px) and (min-width: 481px){
#menu-toggle{
display:block;
}
}
}
$(window).on("scroll", function(){
if( $(this).scrollTop() > 10 ){
$("nav.navbar").addClass("mybg-dark");
$(".navbar-dark .navbar-nav .nav-link").css({"color" : "#fff"});
}else{
$("nav.navbar").removeClass("mybg-dark");
$(".navbar-dark .navbar-nav .nav-link").css({"color" : "rgba(255,255,255,.5)"});
}
});
$(document).ready(function(){
$(".fancybox").fancybox({
openEffect: "none",
closeEffect: "none"
});
});
$(function(){
$(".myform").on("click", function(e){
$("body").toggleClass("myoverlay");
});
$(document).on("click",function(e){
if( $(e.target).is("body, .myform") == false ){
$("body").removeClass("myoverlay");
}
});
});
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
