<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 ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="navigation-wrap start-header start-style">
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="" target="_blank">Logo</a>
<div class="collapse navbar-collapse" id="mynav">
<ul class="navbar-nav for_desktop">
<li>
<a href="#">CALENDAR</a>
</li>
<li>
<a href="#">BEACHCLUB</a>
</li>
<li>
<a href="#">Nightclub</a>
</li>
<li>
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">CORPORATE EVENTS</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</li>
<li>
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">RESERVATIONS</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
<!--========================================
Desktop Overlay menu
===========================================-->
<div class="menu for_desktop">
<a href="#" class="menu-link">
<span class="menu-icon">
<span class="menu-line menu-line-1"></span>
<span class="menu-line menu-line-2"></span>
<span class="menu-line menu-line-3"></span>
</span>
</a>
</div>
<div class="menu-overlay for_desktop">
<div class="overlay_btn_bx">
<ul>
<li><a href="" class="outline_btn">Bottle Service</a></li>
<li><a href="" class="outline_btn">Tickets</a></li>
</ul>
</div>
<div class="menu_bx">
<div class="logo_bx">
<a class="navbar-brand" href="" target="_blank">Mayan</a>
</div>
<div class="inner_menu">
<div class="menu_row">
<div class="menu_col_1">
<div class="menu_items">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Tickets</a></li>
<li><a href="">Bottle Service</a></li>
<li><a href="">Corporate Events</a></li>
</ul>
</div>
</div>
<div class="menu_col_2">
<div class="menu_items">
<ul>
<li><a href="">Photos</a></li>
<li><a href="">Videos</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Press</a></li>
</ul>
</div>
</div>
<div class="menu_col_3">
<div class="menu_items">
<ul>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
<li><a href="">FAQs</a></li>
<li><a href="">Dress Code</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="menu_locations_bx">
<div class="l_title">
<p>Locations</p>
</div>
<div class="location_list">
<ul class="">
<li class=""><a href="#">Beachclub</a></li>
<li class=""><a href="#">Nightclub</a></li>
<li class=""><a href="#">After Hours</a></li>
</ul>
</div>
</div>
<div class="menu_socials_box">
<ul class="social_list">
<li>
<a target="_blank" href="#"><i class="fa fa-facebook"></i> </a>
</li>
<li>
<a target="_blank" href="#"><i class="fa fa-twitter"></i> </a>
</li>
<li>
<a target="_blank" href="#"><i class="fa fa-instagram"></i></a>
</li>
</ul>
</div>
<div class="menu_bottom_list">
<div class="">
<ul>
<li><a href="">Privacy Policy</a></li>
<li><a href="">Terms</a></li>
</ul>
</div>
</div>
</div>
</div>
<!--========================================
Mobile Overlay menu
===========================================-->
<div class="mobile_menu for_mobile">
<a href="#" class="mobile_menu_link">
<span class="menu-icon">
<span class="menu-line menu-line-1"></span>
<span class="menu-line menu-line-2"></span>
<span class="menu-line menu-line-3"></span>
</span>
</a>
</div>
<div class="menu-overlay for_mobile">
<div class="overlay_btn_bx">
<ul>
<li><a href="" class="outline_btn">EVENTS</a></li>
</ul>
</div>
<div class="mobile_menu_bx">
<div class="inner_menu">
<div class="menu_row">
<div class="menu_col_1">
<div class="menu_items">
<ul>
<li><a href="">Tickets</a></li>
<li><a href="">Nightclub</a></li>
<li><a href="">Beachclub</a></li>
<li><a href="">AFTER HOURS</a></li>
</ul>
</div>
</div>
<div class="menu_col_2">
<div class="menu_items contact_items">
<ul>
<li><a href="">Contact</a></li>
<li><a href="">Dress Code</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="mobile_nav_sep"></div>
<div class="mobile_locations_bx">
<div class="l_title">
<p>Las Vegas</p>
</div>
<div class="location_list">
<ul class="">
<li class=""><a href="#">Beachclub</a></li>
<li class=""><a href="#">Nightclub</a></li>
<li class=""><a href="#">After Hours</a></li>
</ul>
</div>
</div>
<div class="mobile_nav_sep"></div>
<div class="mobile_ua_bx">
<div class="ua_title">
<p>United Arab Emirates</p>
</div>
<div class="location_list">
<ul class="">
<li class=""><a href="#">Careers</a></li>
</ul>
</div>
</div>
<div class="mobile_nav_sep"></div>
<div class="mobile_socials_box">
<ul class="social_list">
<li>
<a target="_blank" href="#"><i class="fa fa-facebook"></i> </a>
</li>
<li>
<a target="_blank" href="#"><i class="fa fa-twitter"></i> </a>
</li>
<li>
<a target="_blank" href="#"><i class="fa fa-instagram"></i></a>
</li>
<li>
<a target="_blank" href=""> <i class="fa fa-vimeo"></i> </a>
</li>
</ul>
</div>
<div class="mobile_bottom_list">
<div class="">
<ul>
<li><a href="">Join The Mailing List</a></li>
<li><a href="">Privacy</a></li>
<li><a href="">Terms</a></li>
<li><a href="">Accessibility</a></li>
</ul>
</div>
</div>
</div>
</div>
</header>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
/* ==========================================================================
Fonts
========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
/* ==========================================================================
Global Styles
========================================================================== */
article,
aside,
details,
video,
figcaption,
figure,
footer,
header,
nav,
section,
summary {
display: block;
}
html,
body {
width: 100%;
overflow-x: hidden !important;
scroll-behavior: smooth;
height: 100%;
}
body {
margin: 0;
background: #fff;
height: 100%;
font-family: "Montserrat", sans-serif;
}
button:active,
select {
outline: none;
border: none;
}
ul li,
ul {
margin: 0;
padding: 0;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
text-indent: 1px;
text-overflow: "";
}
select::-ms-expand {
display: none;
}
p {
padding: 0;
margin: 0;
}
a {
outline: none;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
a:hover,
a:focus,
a:active {
text-decoration: none;
outline: none;
color: #132953;
}
ul,
ol {
list-style: none;
list-style-image: none;
padding: 0;
margin: 0;
}
/*==========================================================================
Heading Tags
==========================================================================*/
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
font-family: "Bebas Neue", cursive;
}
/* ===============================================
#Navigation
================================================== */
header {
position: relative;
}
.start-header {
opacity: 1;
transform: translateY(0);
padding: 20px 0;
box-shadow: 0 10px 30px 0 rgba(138, 155, 165, 0.15);
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.start-header.scroll-on {
box-shadow: 0 5px 10px 0 rgba(138, 155, 165, 0.15);
padding: 10px 0;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.start-header.scroll-on .navbar-brand img {
height: 24px;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.navigation-wrap {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 1000;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
background-color: #000000;
}
.navbar-brand {
font-family: "Great Vibes", cursive;
font-style: normal;
font-weight: normal;
font-size: 40px;
color: #c2a267 !important;
padding: 0;
margin: 0;
}
.navbar-toggler {
float: right;
border: none;
padding-right: 0;
}
.navbar-toggler:active,
.navbar-toggler:focus {
outline: none;
}
.navbar-toggler-icon {
width: 24px;
height: 17px;
background-image: none;
position: relative;
border-bottom: 1px solid #000;
transition: all 300ms linear;
}
.navbar-toggler-icon:after,
.navbar-toggler-icon:before {
width: 24px;
position: absolute;
height: 1px;
background-color: #000;
top: 0;
left: 0;
content: "";
z-index: 2;
transition: all 300ms linear;
}
.navbar-toggler-icon:after {
top: 8px;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
transform: rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
transform: translateY(8px) rotate(-45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
border-color: transparent;
}
.navbar-nav {
margin-left: auto;
}
.navbar-nav li a {
color: #fff !important;
font-weight: 500;
transition: all 200ms linear;
}
.navbar-nav li:hover .navbar-nav li a {
color: #fff !important;
}
.navbar-nav li.active .navbar-nav li a {
color: #fff !important;
}
.navbar-nav li a {
position: relative;
padding: 5px 0;
display: inline-block;
text-transform: upppercase;
}
.navbar-nav li:after {
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 2px;
content: "";
background-color: #c2a267;
opacity: 0;
-ms-transition: -webkit-transform 0.3s ease-out, border-color 0.3s ease-out;
-webkit-transition: -webkit-transform 0.3s ease-out, border-color 0.3s ease-out;
transition: transform 0.3s ease-out, border-color 0.3s ease-out;
-ms-transform: scaleX(0);
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
.navbar-nav li:last-child {
margin-right: 75px;
}
.navbar-nav li:hover:after {
bottom: 0;
opacity: 1;
-ms-transform: scaleX(1);
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.navbar-nav li.active:hover:after {
opacity: 0;
}
.navbar-nav li {
position: relative;
margin-right: 20px;
-ms-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.navbar-nav li .dropdown-menu {
transform: translate3d(0, 10px, 0);
visibility: hidden;
opacity: 0;
max-height: 0;
display: block;
padding: 0;
margin: 0;
transition: all 200ms linear;
}
.navbar-nav li.show .dropdown-menu {
opacity: 1;
visibility: visible;
max-height: 999px;
transform: translate3d(0, 0px, 0);
}
.dropdown-menu {
padding: 10px 0;
margin: 0;
font-size: 13px;
letter-spacing: 1px;
color: #212121;
background-color: #000;
border: none;
border-radius: 3px;
box-shadow: 0 5px 10px 0 rgba(138, 155, 165, 0.15);
transition: all 200ms linear;
}
.dropdown-toggle::after {
display: inline-block;
color: #c2a267;
}
.navbar-nav .dropdown-item {
padding: 3px 15px;
color: #212121;
border-radius: 2px;
transition: all 200ms linear;
border-left: 2px solid transparent;
padding-left: 20px;
padding-top: 12px;
padding-bottom: 12px;
border-radius: 0;
}
.dropdown-item:hover,
.dropdown-item:focus {
color: #c2a267 !important;
background-color: transparent;
border-left: 2px solid #c2a267;
}
.main-menu {
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
}
.nav-open .main-menu {
opacity: 1;
visibility: visible;
background: rgba(0, 0, 0, 0.92);
}
.main-menu .nav li a {
color: #fff;
font-size: 20px;
font-weight: 600;
text-align: center;
}
.nav-button {
position: relative;
z-index: 1111;
border: solid 1px #fff;
height: 42px;
display: block;
width: 50px;
padding: 12px;
}
.nav-button #nav-icon {
width: 24px;
height: 22px;
display: inline-block;
position: relative;
cursor: pointer;
}
.nav-button #nav-icon span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #2c2520;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.25s ease-in-out;
-moz-transition: 0.25s ease-in-out;
-o-transition: 0.25s ease-in-out;
transition: 0.25s ease-in-out;
}
.nav-button #nav-icon span:nth-child(1) {
top: 0;
}
.nav-button #nav-icon span:nth-child(2),
#nav-icon3 span:nth-child(3) {
top: 7px;
}
.nav-button #nav-icon span:nth-child(4) {
top: 14px;
}
.nav-open #nav-icon span:nth-child(1) {
top: 9px;
width: 0;
left: 50%;
}
.nav-open #nav-icon span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.nav-open #nav-icon span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.nav-open #nav-icon span:nth-child(4) {
top: 9px;
width: 0;
left: 50%;
}
.nav-open {
overflow: hidden !important;
display: inline-block;
position: fixed;
}
.flex-center {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
}
.overlay_container {
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
/* ===============================================
Mobile Overlay menu
================================================== */
.mobile_menu {
position: absolute;
top: 35px;
right: 20px;
height: 46px;
width: 46px;
display: inline-block;
}
.mobile_menu_link {
width: 100%;
height: 100%;
position: absolute;
z-index: 1002;
background: transparent;
border: 1px solid #c2a267;
box-sizing: border-box;
}
.for_mobile {
display: none !important;
}
.mobile_menu_bx .menu_row {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
}
.mobile_menu_bx .menu_bx {
margin-left: auto;
position: relative;
display: flex;
align-items: center;
}
.mobile_menu_bx ul li a {
text-align: center;
}
.mobile_menu_bx .menu_col_1,
.mobile_menu_bx .menu_col_2 {
width: 100%;
padding-right: 0;
}
.mobile_nav_sep {
width: 100%;
height: 1px;
background: linear-gradient(270.01deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.24) 51.37%, rgba(255, 255, 255, 0) 100%);
}
.mobile_locations_bx .l_title p,
.ua_title p {
text-shadow: 0 2px 4px rgb(0 0 0 / 50%);
font-family: "Montserrat";
text-transform: uppercase;
color: #c2a267;
margin-bottom: 30px;
font-size: 12px;
line-height: 1.25;
font-weight: bold;
}
.mobile_locations_bx .location_list ul li {
display: block;
}
.mobile_ua_bx .location_list ul li::after {
display: none;
}
.mobile_locations_bx .location_list {
margin-bottom: 30px;
}
.mobile_ua_bx,
.mobile_socials_box {
margin-top: 30px;
margin-bottom: 30px;
}
.mobile_bottom_list ul li a {
display: block;
color: #c2a267 !important;
text-transform: uppercase;
font-size: 12px;
line-height: 1.83;
}
.mobile_bottom_list ul li:first-child {
padding-left: 0;
}
.mobile_bottom_list ul li {
display: inline-block;
padding: 0 16px;
margin-bottom: 0.5em;
color: rgba(255, 255, 255, 0.72);
font-family: "Open Sans";
font-size: 14px;
line-height: 1.5;
text-shadow: 0 2px 4px rgb(0 0 0 / 50%);
}
/* ===============================================
Desktop Overlay menu
================================================== */
.menu_bx {
margin-left: auto;
position: relative;
display: flex;
align-items: center;
}
.menu {
position: absolute;
top: 35px;
right: 20px;
height: 46px;
width: 46px;
display: inline-block;
}
.menu-link {
width: 100%;
height: 100%;
position: absolute;
z-index: 1002;
background: transparent;
border: 1px solid #c2a267;
box-sizing: border-box;
}
.menu-icon {
position: absolute;
width: 20px;
height: 14px;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 1px;
}
.menu-line {
background-color: #c2a267;
height: 2px;
width: 100%;
border-radius: 2px;
position: absolute;
left: 0;
transition: all 0.25s ease-in-out;
}
.menu-line.menu-line-2 {
width: 10px;
margin: auto;
text-align: center;
display: inline-block;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.menu-line-3 {
bottom: 0;
}
.menu.open .menu-line-1 {
transform: translateY(7px) translateY(-50%) rotate(-45deg);
}
.menu.open .menu-line-2 {
opacity: 0;
}
.menu.open .menu-line-3 {
transform: translateY(-7px) translateY(50%) rotate(45deg);
}
.menu-overlay {
background-color: #000;
padding-top: 150px;
padding-bottom: 50px;
height: 100%;
width: 100%;
position: fixed;
text-align: center;
transition: opacity 0.2s ease-in-out;
z-index: 1001;
opacity: 0;
visibility: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow-y: scroll;
}
.menu-overlay.open {
opacity: 1;
visibility: visible;
}
.outline_btn {
background-image: linear-gradient(to right, #c2a267, #c2a267);
background-repeat: no-repeat;
background-size: 0 100%;
transition: background-size 1s 0s;
padding: 14px 24px;
font-size: 12px;
letter-spacing: 0.18em;
border: 1px solid #c2a267;
color: #ffffff;
text-transform: uppercase;
display: inline-block;
}
.outline_btn:hover {
background-size: 100% 100%;
color: #fff;
}
.overlay_btn_bx ul li {
display: inline-block;
padding-right: 15px;
}
.overlay_btn_bx ul li:last-child {
padding: 0;
}
.overlay_btn_bx {
position: fixed;
top: 35px;
right: 85px;
display: inline-block;
}
.logo_bx a {
font-family: "Great Vibes", cursive;
font-style: normal;
font-weight: normal;
font-size: 40px;
color: #c2a267 !important;
padding: 0;
margin: 0;
}
.menu_row {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
}
.inner_menu {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: 700px;
}
.menu_col_1 {
width: 40%;
padding-right: 30px;
}
.menu_col_2 {
padding-right: 30px;
width: 30%;
}
.menu_col_3 {
width: 30%;
}
.menu_items ul li {
margin-bottom: 18px;
color: rgba(255, 255, 255, 0.72);
font-family: "Open Sans";
font-size: 14px;
line-height: 1.5;
text-shadow: 0 2px 4px rgb(0 0 0 / 50%);
text-align: left;
}
.menu_items ul li a {
display: block;
font-size: 20px;
font-weight: bold;
letter-spacing: 0.05em;
color: #ffffff;
line-height: 1.2;
text-shadow: 0 2px 4px rgb(0 0 0 / 50%);
text-transform: uppercase;
}
.menu_bx {
position: relative;
display: flex;
align-items: center;
flex-direction: column;
width: 100%;
max-width: 700px;
margin: 0 auto;
}
.logo_bx {
margin-bottom: 90px;
}
.l_title {
margin-top: 90px;
}
.l_title p {
color: rgba(255, 255, 255, 0.54);
font-size: 14px;
font-weight: bold;
line-height: 1.28;
text-shadow: 0 2px 4px rgb(0 0 0 / 50%);
text-transform: uppercase;
margin-bottom: 10px;
}
.location_list ul li {
position: relative;
display: inline-block;
padding-left: 20px;
padding-right: 24px;
}
.location_list ul li a {
color: #ffffff;
font-family: "Montserrat";
font-size: 14px;
font-weight: bold;
line-height: 1.28;
text-shadow: 0 2px 4px rgb(0 0 0 / 22%);
text-transform: uppercase;
}
.location_list ul li:after {
position: absolute;
display: block;
content: " ";
right: -1px;
top: 0;
bottom: 0;
margin: auto;
width: 2px;
height: 14px;
background-color: #ffffff;
}
.menu_socials_box {
margin-top: 65px;
}
.social_list li {
display: inline-block;
}
.social_list li a {
display: block;
border: 2px solid #c2a267;
color: #c2a267;
width: 49px;
height: 49px;
line-height: 49px;
border-radius: 50%;
text-align: center;
}
.social_list li a i {
font-size: 22px;
}
.menu_bottom_list {
margin-top: 65px;
}
.menu_bottom_list ul li:first-child {
padding-left: 0;
}
.menu_bottom_list ul li {
display: inline-block;
position: relative;
padding-left: 12px;
padding-right: 15px;
}
.menu_bottom_list ul li a {
display: block;
color: #ffffff;
font-size: 12px;
line-height: 1.83;
text-transform: uppercase;
}
.menu_bottom_list ul li:last-child:after {
display: none;
}
.menu_bottom_list ul li:after {
display: block;
position: absolute;
content: " ";
right: -2px;
top: 0;
bottom: 0;
margin: auto;
height: 9px;
width: 1px;
background-color: #ffffff;
}
@media (max-width: 767px) {
.navbar-nav li:after {
display: none;
}
.navbar-nav li::before {
position: absolute;
display: block;
top: 15px;
left: 0;
width: 11px;
height: 1px;
content: "";
border: none;
background-color: #000;
vertical-align: 0;
}
.dropdown-toggle::after {
position: absolute;
display: block;
top: 10px;
left: -23px;
width: 1px;
height: 11px;
content: "";
border: none;
background-color: #000;
vertical-align: 0;
transition: all 200ms linear;
}
.dropdown-toggle[aria-expanded="true"]::after {
transform: rotate(90deg);
opacity: 0;
}
.dropdown-menu {
padding: 0 !important;
background-color: transparent;
box-shadow: none;
transition: all 200ms linear;
}
.dropdown-toggle[aria-expanded="true"] + .dropdown-menu {
margin-top: 10px !important;
margin-bottom: 20px !important;
}
}
@media only screen and (max-width: 991px) {
.for_desktop {
display: none;
}
.for_mobile {
display: block !important;
}
.inner_menu {
padding-bottom: 6px;
}
.l_title {
margin-top: 25px;
}
}
(function($) {
"use strict";
$(function() {
var header = $(".start-style");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 10) {
header.removeClass('start-style').addClass("scroll-on");
} else {
header.removeClass("scroll-on").addClass('start-style');
}
});
});
//Animation
$(document).ready(function() {
$('body.hero-anime').removeClass('hero-anime');
});
//Menu On Hover
$('body').on('mouseenter mouseleave', '.nav-item', function(e) {
if ($(window).width() > 750) {
var _d = $(e.target).closest('.nav-item');
_d.addClass('show');
setTimeout(function() {
_d[_d.is(':hover') ? 'addClass' : 'removeClass']('show');
}, 1);
}
});
$(function() {
$(".menu-link").click(function(e) {
e.preventDefault();
$(".menu-overlay").toggleClass("open");
$(".menu").toggleClass("open");
});
});
$(function() {
$(".mobile_menu_link").click(function(e) {
e.preventDefault();
$(".menu-overlay").toggleClass("open");
$(".mobile_menu").toggleClass("open");
});
});
})(jQuery);
