/*=====================================================***** The side navigation menu *****=================================================*/

.main-nav{-webkit-transition: 0.5s;-moz-transition: 0.5s;-ms-transition: 0.5s;transition: 0.5s; position:absolute; left:0px; right:0px; z-index:999;background:#1f1f1f;}
.shrink .main-nav{box-shadow:0px 5px 12px rgba(0,0,0,.5);-webkit-transition: 0.5s;-moz-transition:0.5s;-ms-transition:0.5s;transition:0.5s; background:#1f1f1f;}

.navbar-brand img {max-height:80px;-webkit-transition: 0.5s;-moz-transition: 0.5s;-ms-transition: 0.5s;transition: 0.5s;}
.shrink .navbar-brand img {max-height:60px;-webkit-transition: 0.5s;-moz-transition: 0.5s;-ms-transition: 0.5s;transition: 0.5s;}

.navbar-brand{padding:48px 0;}
.shrink .navbar-brand{padding:10px 0;}

.navbar .navbar-nav .nav-link {color:#fff; padding:14px 0px; font-size:40px; line-height:1;}
.navbar .nav-item.active .nav-link,.navbar .nav-item .nav-link:hover{color:#000;}
.navbar-toggler:focus {box-shadow:none !important;}

.navbar-toggler-icon {background-image:none !important;}
@media (min-width:1300px) {.offcanvas-header .btn-close {position:absolute; right:120px; top:85px;}}

@media (min-width: 1199.98px) and (max-width: 1359.98px) {}
@media (min-width: 991.98px) and (max-width: 1199.98px) {.navbar-brand img {max-height:50px !important;}.navbar-brand{padding:20px 0 !important;}}
@media (min-width: 768px) and (max-width: 991.98px) {.navbar-brand img,.imglogo img {max-height:77px !important;}.navbar-brand{padding:10px 0 !important;}.main-nav {position:static; background:#000;}}


/********************************* Mobile Navigation ***********************/
@media (max-width:767.98px) {
.main-nav {position:static; background:#000; height: 159px;}
.navbar .navbar-nav .nav-link {font-size:20px;}

.navbar-brand img,.imglogo img {max-height:50px !important;} .navbar-brand{padding:15px 0 !important;}
.navbar-nav>li+li {margin-left:0px;border-left:none;}
.menu .menuContent {
  
  top: 12% !important;
  
 
}
.menu .menuContent {

font-size: 20px !important;

}
}
@media (max-width:575.98px) {.navbar-brand img,.imglogo img {max-height:72px !important;}}



/**********************Nav******************/
input {
  display: none;
}

.open {
  background-color: #fff;
  width: 23px;
  height: 4px;
  display: block;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  top: 0px;
  z-index: 999;
}

.open:before {
  content: "";
  background-color: #fff;
  width: 24px;
  height: 4px;
  display: block;
  border-radius: 2px;
  position: relative;
  top: -8px;
  transform: rotate(0deg);
  transition: all 0.3s ease;
}

.open:after {
  content: "";
  background-color: #fff;
  width: 24px;
  height: 4px;
  display: block;
  border-radius: 2px;
  position: relative;
  top: 4px;
  transform: rotate(0deg);
  transition: all 0.3s ease;
}

.menuOpen {
  
  height: 51px;
  display: block;
  padding: 5px;
  cursor: pointer;
  float: right;
}

.menuOpen:hover .open:before {
  top: -9px;
}

.menuOpen:hover .open:after {
  top: 5px;
}

.menu {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: #000;
  z-index: 99;
}

.menu label {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 20px;
  top: 20px;
  background-size: 100%;
  cursor: pointer;
}

.menu .menuContent {
  position: relative;
top: 20%;
font-size: 24px;
text-align: center;
padding-bottom: 20px;
margin-top: -170px;
max-width: 700px;
margin: auto;
}

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

.menu ul li a {
  display: block;
  color: white;
  text-decoration: none;
  transition: color 0.2s;
  font-family: Trebuchet MS;
  text-transform: uppercase;
  padding: 10px 0;
}

.menu ul li a:hover {
  color: #f0f0f0 !important;
}

.menu ul li:hover {
  
}

.menuEffects {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s;
}

.menuEffects ul {
  transform: translateY(0%);
  transition: all 0.5s;
}

#menuToggle:checked ~ .menuEffects {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s;
}

#menuToggle:checked ~ .menuEffects ul {
  opacity: 1;
}

#menuToggle:checked ~ .menuOpen .open {
  background-color: transparent;
}

#menuToggle:checked ~ .menuOpen .open:before {
  content: "";
  background-color: white;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

#menuToggle:checked ~ .menuOpen .open:after {
  content: "";
  background-color: white;
  transform: rotate(-45deg);
  position: relative;
  top: 0;
  right: 0;
  z-index: 1;
}

#menuToggle:not(:checked) ~ .menuEffects ul {
  transform: translateY(-30%);
}

/************************************/