#header nav{ margin: 0 auto;}
.desktopMenu ul{ margin: 0px; padding: 0px; }
.desktopMenu ul li{ display: inline-block; float:left; margin: 0px; padding: 0px 8px;}
.desktopMenu ul li a{
  font-size:14px;
  line-height:20px;
  font-weight: 700;
  text-transform:uppercase;
  color:#fff;
  text-decoration:none;
  padding:25px 0;
  display:block;
  }
.desktopMenu ul li a:hover{ color:#FF265C;}
.desktopMenu ul li a{ position: relative;}
.desktopMenu ul li.current-menu-item a:after,
.desktopMenu ul li.current_page_parent a:after,
.desktopMenu ul li.current-menu-ancestor.menu-item-has-children a:after{ content:''; width:100%; height:3px; background-color:#fff; position:absolute; left: 0px; bottom: 0px;}
.desktopMenu ul li ul.sub-menu li.current-menu-item a{color:#FF265C;}
.desktopMenu ul > li.menu-item-has-children{ padding-right:26px;}
.desktopMenu ul > li.menu-item-has-children > a:before{content:''; width:0; height:0; position:absolute; right:-18px; top:31px;
  border-left:6px solid transparent;
	border-right:6px solid transparent;
	border-top:10px solid #fff;}

#header section{ overflow: visible;}
.desktopMenu ul li ul.sub-menu{background-color:#000; border-bottom:#585858 solid 1px; position:absolute; left:0; top:71px; width:100%; text-align: center; opacity:0;
visibility:hidden;
padding-top:40px; padding-bottom:40px;

text-align: left;
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;}
.desktopMenu ul li:hover ul.sub-menu{ opacity: 1; visibility: visible;}
.desktopMenu ul li ul.sub-menu li{ min-width: 130px; text-align: center; width: 16.66%;}
.desktopMenu ul li ul.sub-menu li a{ display:inline-block; font-size:20px; font-weight: 700; text-transform:capitalize; padding-top: 0px; padding-bottom: 0px;}
.desktopMenu ul li ul.sub-menu li a:after{ display: none;}
.desktopMenu ul li ul.sub-menu li a:before, .mobileMenu ul li ul.sub-menu li a:before{ content:''; width:100px; height:100px; display:block; margin: 0 auto; margin-bottom:4px;
background-size: 105px;
background-position: center center;
background-repeat:no-repeat;
border-radius: 50%;
}
.desktopMenu ul li ul.sub-menu li.clarity a:before,
.mobileMenu ul li ul.sub-menu li.clarity a:before{background-image: url('../images/clarity.svg');}
.desktopMenu ul li ul.sub-menu li.sharpen a:before,
.mobileMenu ul li ul.sub-menu li.sharpen a:before{background-image: url('../images/sharpen.svg');}
.desktopMenu ul li ul.sub-menu li.regrain a:before,
.mobileMenu ul li ul.sub-menu li.regrain a:before{background-image: url('../images/regrain.svg');}
.desktopMenu ul li ul.sub-menu li.pixel a:before,
.mobileMenu ul li ul.sub-menu li.pixel a:before{background-image: url('../images/pixel.svg');}
.desktopMenu ul li ul.sub-menu li.chroma a:before,
.mobileMenu ul li ul.sub-menu li.chroma a:before{background-image: url('../images/chroma.svg');}
.desktopMenu ul li ul.sub-menu li.brickwall a:before,
.mobileMenu ul li ul.sub-menu li.brickwall a:before{background-image: url('../images/brickwall.svg');}

.mobileMenu{ display:none;}
.accordionTrigger {
    width: 30px;
    height: 30px;
    right: 20px;
    top: 10px;
    z-index: 9;
    margin-left: 8px;
    cursor: pointer;
    display: inline-block;
}
.accordionTrigger span{position: relative; display: block;}
.accordionTrigger span::before {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    right: 5px;
    top: 10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 14px solid #fff;
}
.accordionTrigger.active span::before{border-top: 14px solid #FF265C; transform:rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg);}
.mobileMenu:before, .mobileMenu .sub-menu:before{ content:''; display:block; z-index: -1; width: 100%; height: 100%; min-height:950px; background-color:rgba(000,000,000,0.4); position: absolute; left: 0; top:0;}
.mobileMenu .sub-menu:before{background-color:rgba(000,000,000,1); z-index: 1;}
.menuLogo{ text-align: center; padding:40px 0;}
.menuLogo img{ height: 80px; margin: 0 auto;}

.mobileMenu .compatibleLinks{ position: static; color:#fff; max-width: 320px; margin: 0 auto;}
.mobileMenu .compatibleLinks ul{ padding-top: 0px; text-align: center; display: block;}
.mobileMenu .compatibleLinks ul li:first-child{ width: 100%; padding-left: 0px;}
.mobileMenu .compatibleLinks ul li{ display: inline-block; padding: 0 12px; padding-left: 24px; padding-bottom: 6px;}

.mobileMenu ul li.current-menu-item > a{ color:#000;}
.mobileMenu ul li.current-menu-parent.parent > a{color:#000;}
.mobileMenu ul li ul.sub-menu li.current-menu-item a{ color:#FF265C;}
.mobileMenu ul li.current_page_parent > a{color:#000;}
/* menu icon start here */
  div#menuIcon span {
  display: block;
  position: absolute;
  height: 7px;
  width: 7px;
  background: #FF265C;
  opacity: 1;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  }
  div#menuIcon {
  width: 32px;
  height: 32px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  }

  #menuIcon span:nth-child(even) {
  left: 38%;
  border-radius: 50%;
  }

#menuIcon span:nth-child(odd) {left:0px; border-radius: 50%;}
#menuIcon span:nth-child(1), #menuIcon span:nth-child(2), #menuIcon span:nth-child(3) {top: 0px;}
#menuIcon span:nth-child(4), #menuIcon span:nth-child(5), #menuIcon span:nth-child(6) {top: 11px;}
#menuIcon span:nth-child(7), #menuIcon span:nth-child(8), #menuIcon span:nth-child(9) {top: 22px;}
#menuIcon span:nth-child(3) {left: 74%;}
#menuIcon span:nth-child(6) {left: 74%;}
#menuIcon span:nth-child(9) {left: 74%;}
  #menuIcon.open span:nth-child(1) {
    width: 22px;
    transform: rotate(45deg);
    left: -4px;
    border-radius: 50px;
    top: 4px;
    height:5px;
  }
  #menuIcon.open span:nth-child(3) {
    width: 22px;
    transform: rotate(-45deg);
    border-radius: 50px;
    left: 39%;
    top: 4px;
    height:5px;
  }
  #menuIcon.open span:nth-child(7) {
    width: 22px;
    transform: rotate(-45deg);
    left: -4px;
    border-radius: 50px;
    top: 20px;
    height:5px;
  }
  #menuIcon.open span:nth-child(9) {
    width: 22px;
    transform: rotate(45deg);
    border-radius: 50px;
    left: 39%;
    top: 20px;
    height: 5px;
  }
  #menuIcon.open span:nth-child(2) {top:9px; opacity:0; visibility:hidden;}
  #menuIcon.open span:nth-child(5) {left:33%; opacity:0; visibility:hidden;}
  #menuIcon.open span:nth-child(6) {left:33%; opacity:0; visibility:hidden;}
  #menuIcon.open span:nth-child(8) {top:9px; opacity:0; visibility:hidden;}
/* menu icon end here */
.res-nav-link{ position: absolute;right:20px; top:20px; display: none;}
@media screen and (min-width: 0px) and (max-width:1100px) {

.desktopMenu{display:none;}
.mobileMenu{display:block;}
.res-nav-link{ display:block;}

.mobileMenu {
    position: fixed;
     left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    overflow-y: scroll;
    padding: 0 0px;
        padding-top: 0px;
    padding-top: 0px;
    padding-top: 70px;
    z-index: 999;
    background-image: url('../images/menu-bg.jpg');
    background-position: center center;
    background-size: cover;
    opacity: 0;
}
body.open-menu .mobileMenu {
    left: 0;
    opacity: 1;
}
.mobileMenu ul li.active .accordionTrigger{ position: absolute; right: 30px; top:90px;}

.mobileMenu ul{ list-style-type:none; margin: 0px; padding: 0px; padding-top: 40px;}
.mobileMenu ul li{ text-align: center; margin: 0px; padding: 5px 0;}
.mobileMenu ul li a{ font-family: 'bebas-neue-by-fontfabric', sans-serif; font-size: 50px; line-height: 54px; color:#fff; text-decoration:none;}
.mobileMenu ul li ul{ background-color:#000; padding: 0 30%; padding-top:70px!important; position: absolute; left: 0; top:70px; height: 100vh; width: 100%; display:none;}
.mobileMenu ul li ul li{ width: 50%; display: inline-block; float: left; padding-bottom: 20px; background-color:#000; position:relative; z-index: 1;}
.mobileMenu ul li ul li a{ font-size: 20px; line-height: 26px; font-family: 'Roboto', sans-serif; font-weight: 700;}
.parentMenu{font-family: 'bebas-neue-by-fontfabric', sans-serif; font-size: 36px; line-height: 42px; color:#fff; left: 33px; top:16px; position: absolute; z-index: 1;}
}
@media screen and (min-width: 0px) and (max-width:900px) {
.mobileMenu ul li ul{ padding: 0 20%;}
}
@media screen and (min-width: 0px) and (max-width:767px) {
  .mobileMenu ul li a{ font-size: 40px; line-height: 46px;}
}
@media screen and (min-width: 0px) and (max-width:550px) {
.mobileMenu ul li ul{ padding: 0 20px;}
.mobileMenu ul li{ padding: 8px 0;}
.mobileMenu ul li a{ font-size: 34px; line-height: 38px;}
}