/*-------------------------------------------------------------------------------------

Name: Meganav

Version:    1.0

Author: vedhathemes

-------------------------------------------------------------------------------------*/





/**

****************************************

@File: Meganav Styles



* This file contains the styling for the actual menu, this

is the file you need to edit to change the look of the

result.



/*

========================

content table

=========================

01.import

02. General css

03. default menu css

  04. simple nav 

  05. megamenu

  06. right-nav

  07.shoppin nav

  08- Submenus nav

  09- center-logo-sep

  10- off-canvas-left

  11.off-canvas-right

  12. off-canvas-full

  13. simple right nav

  14. attributes

  15. media query

*/





/*===============================

  01. import

  ===============================*/



@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900');



/*end of import*/





/*===============================

  02. General css

  ===============================*/



.mega_mn_body {

  margin: 0;

  padding: 0;

  font-family: 'Montserrat', sans-serif;

}



.mega_mn_menu a {

  text-decoration: none;

}



.mega_mn_menu a:focus {

  outline: none;

}



.clearfix_mn {

  display: table;

  clear: both;

}



.mega_mn_menu {

  background: #f36c29;

  width: 100%;

  box-sizing: border-box;

}



.nav-container {

  padding: 0 30px;

  width: 100%;

max-width: 100%;
    margin: 0 auto;

  box-sizing: border-box;
      margin-top: -13px;

}

.white-bg

{

  background: #fff !important;

  border-bottom: 1px solid #eee;

}





/*end of General css*/





/*===============================

  03. default menu css

  ===============================*/





/*logo*/



.mega_mn_menu .logo {

  width: 15%;

  float: left;

}



.mega_mn_menu .logo a {

  font-size: 30px;

  color: #fff;

  font-weight: 600;

  display: block;

  padding: 20px 0;

}



.mega_mn_menu .logo a span {

  font-weight: 300;

}





/*nav section*/





/*hamburger*/



.hum-line {

  width: 100%;

  height: 3px;

  background: #fff;

  margin: 6px 0;

  transition: .5s ease-in-out;

  transition-delay: 0, 0, 0.5s;

}



.menu-box {

  float: right;

  /*padding:18px 0px;*/

  position: relative;

  width: 25px;

  margin-top: 17px;

  height: 25px;

}



.menu-box.clicked .line-1 {

  transform: rotate(45deg);

  position: absolute;

  top: 45%;

}

li.estimate-btn {
    color: #FFF;
    border: 2px solid #7abdc1;
    border-radius: 0px;
    padding: 0px;
    /* display: inline-block; */
    font-size: 14px;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: inset 0 0 0 0 #7abdc1;
    -webkit-transition: ease-out 1s;
    -moz-transition: ease-out 1s;
        transition: ease-out 1s;
    background: none;
}

li.estimate-btn:hover {
    box-shadow: inset 400px 0 0 0 #7abdc1;
}
.mega_mn_menu nav>ul>li.estimate-btn a {
    padding: 11px 20px;
}



.menu-box.clicked .line-2 {

  transform: rotate(45deg);

  opacity: 0;

  top: 45%;

  position: absolute;

}



.menu-box.clicked .line-3 {

  transform: rotate(-45deg);

  position: absolute;

  top: 45%;

}





/*===============================

  04. simple nav 

  ===============================*/



.mega_mn_menu nav {

  width: 67%;

  float: right;

}

.navbar {

    border-radius: 0px;

        margin-bottom: 0px;

}



.mega_mn_menu nav ul {

  padding: 0px;

  text-align: center;

  margin: 0px;
      

 /* position: relative;*/
     margin-top: 10px;

}



.mega_mn_menu nav ul li {

  display: inline-block;

  position: relative;
  margin-left: -8px;

}



.mega_mn_menu nav>ul>li:hover {

  background: none;

}



.mega_mn_menu nav>ul>li>a {

  text-transform: uppercase;

  color: #fff;

  text-decoration: none;

  

    padding: 23px 19px;

  letter-spacing: 1px;

  display: block;


}



.mega_mn_menu nav>ul>li>a>i {

  font-size: 14px;

  padding: 7px;

}



.mega_mn_menu .drop-list {

  width: 200px;

  position: absolute;

  background: #fff;

  text-align: left;

  visibility: hidden;

  display: block;

  transform: translateY(-2em);

  transition: all 1s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;

  opacity: 0;

  z-index: 9;

}



.mega_mn_menu .drop-list.block-nav {

  visibility: visible;

  display: block;

  opacity: 1;

  transform: translateY(0%);

  transition-delay: 0s, 0s, 0.3s;

}



.mega_mn_menu .drop-list li {

  width: 100%;

}



.mega_mn_menu .drop-list li a {

  display: block;

  padding: 10px 20px;

  border-bottom: 1px solid #fff;

  font-size: 13px;

  color: #000;

  text-align: left;

}



.mega_mn_menu ul.drop-list li a:hover {

  background: #f16c28;

  color:#fff;

}



.mega_mn_menu ul.drop-list.double-list {

  width: 280px;

}



.mega_mn_menu ul.drop-list.double-list li {

  width: 50%;

  float: left;

}



.mega_mn_menu .mn_dropdown>a {

  position: relative;

  padding-right: 24px;

}



.mega_mn_menu .mn_dropdown>a:after {

  position: absolute;

  content: "\e64b";

  font-family: 'themify';

  font-size: 8px;

  padding: 1px 3px;

  top: 50%;

  margin-top: -6px;

}





/*===============================

  05. megamenu

  ===============================*/



.mega_mn_menu li.megamenu {

  position: unset !important;

}



.mega_mn_menu .megalist {

  width: 100%;

  left: 0;

  right: 0;

  margin: 0 auto;

}



.mega_mn_menu .megalist .list-col {

  width: calc(100% / 4);

  float: left;

}



.mega_mn_menu .megalist .list-col ul li {

  display: block;

  text-align: left;

}



.mega_mn_menu .megalist .list-col ul li a {

  padding: 10px 20px;

  border-bottom: 1px solid #fff;

  font-size: 13px;

  display: block;

  color: #fff;

}



.mega_mn_menu .megalist .list-col ul li a:hover {

  background: #8859d4;

}





/*===============================

  06. right-nav

  ===============================*/



.mega_mn_menu  .menu-box {

  display: none;

}



.mega_mn_menu  .right-nav {

  float: left;

  width: 15%;

}





/*search*/



.mega_mn_menu .search-box-wrapper {

  position: relative;

  width: 100%;

}



.mega_mn_menu .search-box {

  float: right;

  padding: 17px 0px;

  position: relative;

}



.mega_mn_menu .search-box i {

  width: 30px;

  height: 30px;

  border: 1px solid #eee;

  border-radius: 5px;

  color: #fff;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 13px;

}



.mega_mn_menu .search-input {

  position: absolute;

  right: 0;

  top: 100%;

  width: 100%;

  background: #79caf9;

  padding: 13px 20px;

  visibility: hidden;

  display: block;

  transform: translateY(-2em);

  transition: all 0.8s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;

  opacity: 0;

}



.mega_mn_menu .search-input.search-block {

  visibility: visible;

  display: block;

  opacity: 1;

  transform: translateY(0%);

  transition-delay: 0s, 0s, 0.3s;

}



.mega_mn_menu .search-input input {

  width: 100%;

  height: 30px;

  border: 0px;

  border-radius: 2px;

  padding: 0 10px;

  box-sizing: border-box;

}





/*content*/



.main-content {

  min-height: : 100vh;

}





/*===================================

  07.shoppin nav

  ===================================*/



.mega_mn_menu.shopping-nav {

  background: none;

}



.mega_mn_menu .top-nav-space {

  max-width: 1100px;

}



.mega_mn_menu.shopping-nav .top-nav {

  background: #5c2ca6;

  width: 100%;

  height: 58px;

}



.mega_mn_menu.shopping-nav .top-nav .logo {

  width: auto;

}



.mega_mn_menu.shopping-nav .top-nav .logo a {

  padding: 17px 0;

}



.mega_mn_menu .shopping-search {

  width: 100%;

  max-width: 500px;

  float: left;

  background: #fff;

  margin: 8px 25px;

  border-radius: 3px;

}



.mega_mn_menu .shopping-search .input-box {

  width: 90%;

  float: left;

}



.mega_mn_menu .shopping-search .input-box input {

  width: 100%;

  height: 35px;

  margin: 3px 0;

  border: 0px;

  padding: 0 20px;

  box-sizing: border-box;

}



.mega_mn_menu .shopping-search .search-icon {

  width: 10%;

  float: left;

  text-align: center;

  padding: 11px 10px;

  box-sizing: border-box;

  border-left: 1px solid #e3e1e1;

}



.mega_mn_menu.shopping-nav .right-nav {

  float: right;

  width: auto;

}
.fixed-nav {
   /* top: 25px;*/
}
.scroll-background {
    top: 0px;
}


.mega_mn_menu.shopping-nav .right-nav ul {

  padding: 0px;

  margin: 0px;

}



.mega_mn_menu.shopping-nav .right-nav ul li {

  display: inline-block;

}



.mega_mn_menu.shopping-nav .right-nav ul li.mn_dropdown {

  position: relative;

}



.mega_mn_menu.shopping-nav .right-nav ul li.mn_dropdown ul.drop-list {

  right: 0;

}



.mega_mn_menu.shopping-nav .right-nav>ul>li>a {

  color: #fff;

  font-weight: 500;

  font-size: 13px;

  padding: 20px 10px;

  display: block;

}



.mega_mn_menu.shopping-nav .right-nav>ul>li.mn_dropdown>ul.drop-list li a .cart-inner p {

  margin: 0;

}



.mega_mn_menu.shopping-nav .right-nav>ul>li.mn_dropdown>a i {

  font-size: 20px !important;

  padding-right: 5px;

  position: relative;

}



.mega_mn_menu.shopping-nav .right-nav>ul>li.mn_dropdown>a.cart-list i:after {

  position: absolute;

  content: "3";

  background: #16e0b5;

  width: 18px;

  height: 18px;

  display: flex;

  border-radius: 50%;

  font-size: 12px;

  justify-content: center;

  align-items: center;

  line-height: 0;

  top: -7px;

  left: -10px;

}



.mega_mn_menu.shopping-nav .right-nav>ul>li.mn_dropdown>ul.drop-list li a .cart-inner .product-list img {

  width: 100%;

  max-width: 100%;

}



.mega_mn_menu.shopping-nav .right-nav>ul>li.mn_dropdown>ul.drop-list.cart-drop {

  width: 320px;

}



.mega_mn_menu.shopping-nav .right-nav>ul>li.mn_dropdown>ul.drop-list.cart-drop li a {

  padding: 10px;

}



.mega_mn_menu.shopping-nav .right-nav>ul>li.mn_dropdown>ul.drop-list>li>a .cart-inner .product-list {

  width: 70%;

  float: left;

}



.mega_mn_menu.shopping-nav .right-nav>ul>li.mn_dropdown>ul.drop-list>li>a .cart-inner .product-list img {

  width: 30%;

  float: left;

}




.mega_mn_menu.shopping-nav .right-nav>ul>li.mn_dropdown>ul.drop-list>li>a .cart-inner .product-list span {

  width: 70%;

  float: left;

  padding: 10px;

  box-sizing: border-box;

  display: block;

  font-weight: 600;

}



.mega_mn_menu.shopping-nav .right-nav>ul>li.mn_dropdown>ul.drop-list>li>a .cart-inner .product-list samp {

  display: block;

  font-family: 'Montserrat', sans-serif;

  font-weight: 400;

  font-size: 12px;

  padding-top: 5px;

}



.mega_mn_menu.shopping-nav .right-nav>ul>li.mn_dropdown>ul.drop-list>li>a .cart-inner .quantity {

  width: 30%;

  float: left;

  text-align: right !important;

}



.mega_mn_menu.shopping-nav .right-nav>ul>li.mn_dropdown>ul.drop-list>li>a .cart-inner .quantity span {

  width: 25px;

  height: 25px;

  display: flex;

  justify-content: center;

  align-items: center;

  float: right;

  margin-top: 10px;

  border-radius: 2px;

  background: #238ac6;

}



.mega_mn_menu .right-nav .main-nav .mn_dropdown>a::after {

  content: " ";

}



.mega_mn_menu .mn_submenu a {

  position: relative;

}



.mega_mn_menu .mn_submenu>a::after {

  content: "\e649";

  position: absolute;

  right: 20px;

  font-family: 'themify';

  font-size: 9px;

  top: 50%;

  margin-top: -5px;

}



.mega_mn_menu.shopping-nav .right-nav>ul>li.mn_dropdown>ul.drop-list>li>a .cart-inner .quantity i {

  display: block;

}



.mega_mn_menu.shopping-nav .right-nav>ul>li.mn_dropdown>ul.drop-list>li .proceed_check a {

  text-align: center;

  background: #16e0b5;

  padding: 15px 0;

  font-weight: 600;

}





/*===================================

  .shoppin nav -second nav

  ===================================*/



.mega_mn_menu.shopping-nav .bottom-nav {

  background: #eee;

}



.mega_mn_menu.shopping-nav nav {

  width: 100%;

}



.mega_mn_menu.shopping-nav nav>ul {

  display: flex;

  flex-grow: 1;

}



.mega_mn_menu.shopping-nav nav>ul>li {

  flex-grow: 1;

}



.mega_mn_menu.shopping-nav nav>ul>li>a {

  padding: 15px 10px;

  color: #000;

  text-transform: capitalize;

  font-weight: 400;

  letter-spacing: 0px;

}



.mega_mn_menu.shopping-nav nav>ul>li:hover {

  background: #ccc;

}



.mega_mn_menu.shopping-nav nav>ul>li .drop-list {

  background: #dcdcdc;

}



.mega_mn_menu.shopping-nav nav>ul>li .megalist .list-col ul li a {

  border-bottom: 1px solid #c9c9c9;

  font-size: 12px;

  color: #363636;

}



.mega_mn_menu.shopping-nav nav>ul>li .drop-list li a {

  border-bottom: 1px solid #c9c9c9;

  font-size: 12px;

  color: #363636;

}



.mega_mn_menu.shopping-nav nav>ul>li .drop-list li a:hover {

  background: #ccc;

}





/*==================================

    08- Submenus nav

    ==================================*/



.mega_mn_menu .mn_submenu {

  position: relative;

}



.mega_mn_menu .mn_submenu-list {

  position: absolute;

  left: 100%;

  top: 0;

  background: #fff;

  border-left: 1px solid #5c2ca6;

  width: 200px;

  visibility: hidden;

  display: block;

  transform: translateX(-2em);

  transition: all 0.8s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;

  opacity: 0;

  z-index: 9;

}



.mega_mn_menu .mn_submenu-list.block-nav {

  visibility: visible;

  display: block;

  opacity: 1;

  transform: translateX(0%);

  transition-delay: 0s, 0s, 0.3s;

}





/*================================

  09- center-logo-sep

  ================================*/



.mega_mn_menu .center-logo-sep nav {

  margin: 0 auto;

  float: none;

  width: 100%;

}



.mega_mn_menu .logo-nav .nav-container {

  position: relative;

}



.mega_mn_menu .logo-nav {

  background: #eef8fe;

}



.mega_mn_menu .logo-nav h1 {

  margin: 0px;

  padding: 14px 10px;

  text-align: center;

  font-weight: 400;

  font-size: 30px;

}



.mega_mn_menu .center-logo-sep .menu-box {

  position: absolute;

  top: 0;

  right: 30px;

}



.mega_mn_menu .center-logo-sep .menu-box .hum-line {

  background: #000;

}





/*===================================

    10- off-canvas-left

    ===================================*/



.off-canvas {

  position: relative;

}



.menu-of-left,

.menu-of-right,

.menu-of-full {

  width: 20px;

}



.off-canvas .menu-of-left,

.off-canvas .menu-of-right,

.off-canvas .menu-of-full {

  position: absolute;

  margin-top: -12.5px;

  right: 40px;

  top: 50%;

}



.off-canvas .menu-of-left .hum-line,

.off-canvas .menu-of-right .hum-line,

.off-canvas .menu-of-full .hum-line {

  background: #222;

  margin: 4px 0;

}



.off-canvas .menu-of-left .hum-line,

.off-canvas h1 {

  text-align: left;

}



.mega_mn_menu .of-menu-left {

  width: 250px;

  background: #333;

  position: fixed;

  top: 0;

  height: 100%;

  left: -250px;

  transition: .3s ease-in-out;

}



.mega_mn_menu .of-menu-left.fixed {

  left: 0;

}



.mega_mn_menu .of-menu-left li {

  padding: 0;

  list-style: none;

  display: block;

}



.canvas-left {

  transition: .3s ease-in-out;

}



.canvas-left.padding-canvas-left {

  padding-left: 250px;

}



.mega_mn_menu .of-menu-left ul {

  padding-top: 60px;

}



.mega_mn_menu .of-menu-left ul li {

  padding: 10px 0;

  text-align: left;

}



.mega_mn_menu .of-menu-left ul li a {

  display: block;

  padding: 0 30px;

  font-size: 25px;

  color: #a5a5a5;

  font-weight: 500;

  opacity: 0;

  transition: .3s ease-in-out;

  transform: translate(-30px, 0);

  transition-delay: .3s;

}



.mega_mn_menu .of-menu-left ul li a:hover {

  color: #fff;

}



.mega_mn_menu .of-menu-left.fixed ul li a {

  opacity: 1;

  transform: translate(0px, 0);

}



.mega_mn_menu .of-menu-left.fixed ul {

  position: relative;

}



.menu-of-left.clicked .line-1,

.menu-of-right.clicked .line-1,

.menu-of-full.clicked .line-1 {

  transform: rotate(45deg);

  top: 45%;

  position: absolute;

}



.menu-of-left.clicked .line-3,

.menu-of-right.clicked .line-3,

.menu-of-full.clicked .line-3 {

  transform: rotate(-45deg);

  top: 45%;

  position: absolute;

}



.menu-of-left.clicked .line-2,

.menu-of-right.clicked .line-2,

.menu-of-full.clicked .line-2 {

  transform: translateX(-40px);

  opacity: 0;

  transition: .3s ease-in-out;

}





/*===================================

    11.off-canvas-right

    ===================================*/



.canvas-right.padding-canvas-right {

  padding-right: 250px;

}



.mega_mn_menu .of-menu-right {

  width: 250px;

  background: #333;

  position: fixed;

  top: 0;

  height: 100%;

  right: -250px;

  transition: .3s ease-in-out;

  overflow: hidden;

}



.mega_mn_menu .of-menu-right.fixed {

  right: 0;

}



.mega_mn_menu .of-menu-right li {

  padding: 0;

  list-style: none;

  display: block;

}



.mega_mn_menu .of-menu-right ul {

  padding-top: 60px;

}



.mega_mn_menu .of-menu-right ul li {

  padding: 10px 0;

  text-align: left;

}



.mega_mn_menu .of-menu-right ul li a {

  display: block;

  padding: 0 30px;

  font-size: 25px;

  color: #a5a5a5;

  font-weight: 500;

  opacity: 0;

  transition: .3s ease-in-out;

  transform: translate(-30px, 0);

  transition-delay: .3s;

}



.mega_mn_menu .of-menu-right ul li a:hover {

  color: #fff;

}



.mega_mn_menu .of-menu-right.fixed ul li a {

  opacity: 1;

  transform: translate(0px, 0);

}



.mega_mn_menu .of-menu-right.fixed ul {

  position: relative;

}



.canvas-right {

  transition: .3s ease-in-out;

}





/*===================================

    12. off-canvas-full

    ===================================*/



.mega_mn_menu nav.menu-full {

  left: -100%;

  margin: 0 auto;

  width: 100% !important;

  background: none;

  height: 100%;

  z-index: 9;

  box-sizing: border-box;

  position: fixed !important;

  transition: .3s ease-in-out;

}



.mega_mn_menu nav.menu-full.full-clicked {

  left: 0;

}



.mega_mn_menu nav.menu-full .of-menu-full {

  background: rgba(0, 0, 0, 0.9);

  width: 100%;

  height: 100%;

  box-sizing: border-box;

  padding: 80px;

}



.mega_mn_menu .of-menu-full {

  position: relative;

}



.mega_mn_menu .of-menu-full li {

  display: block;

}



.mega_mn_menu .of-menu-full li a {

  display: block;

  padding: 10px 0px;

  text-align: left;

  color: #fff;

}



.mega_mn_menu .of-menu-full a {

  opacity: 0;

  transition: 1s ease-in-out;

  transform: translate(-30px, 0);

  transition-delay: .3s !important;

}



.mega_mn_menu nav.menu-full.full-clicked .of-menu-full a {

  opacity: 1;

  transform: translate(0px, 0);

}



.mega_mn_menu ul.nav-full li a {

  font-weight: 600;

  font-size: 25px;

}



.mega_mn_menu .small-nav a {

  font-weight: 200;

  font-size: 20px;

}



.mega_mn_menu .menu-btn a {

  background: #00a1ff;

  display: block;

  padding: 15px 20px;

  width: 300px;

  border-radius: 5px;

  font-weight: 600;

  color: #fff;

  font-size: 20px;

  margin-top: 20px;

}



.mega_mn_menu .menu-list-left {

  width: 50%;

  float: left;

}



.mega_mn_menu .menu-right {

  float: right;

  width: 50%;

}



.mega_mn_menu .menu-right p {

  color: #fff;

  font-weight: 300;

  line-height: 25px;

  opacity: 0;

  transition: 1s ease-in-out;

  transform: translate(-30px, 0);

  transition-delay: .5s !important;

}



.mega_mn_menu nav.menu-full.full-clicked .menu-right p {

  opacity: 1;

  transform: translate(0px, 0);

}



.mega_mn_menu .social-menu-full ul {

  text-align: left;

}



.mega_mn_menu .social-menu-full li {

  display: inline-block;

}



.mega_mn_menu .social-menu-full li a {

  display: block;

  padding: 10px;

}



.mega_mn_menu .close-btn-full {

  position: absolute;

  right: 20px;

  top: 30px;

}



.mega_mn_menu .close-btn-full {

  color: #fff;

}



.full-canvas .menu-of-full {

  cursor: pointer;

}





/*===================================

  13. simple right nav

  ===================================*/



.mega_mn_menu .right-simple-nav nav {

  float: right;

}



.mega_mn_menu .right-simple-nav ul {

  text-align: right;

}





/*===================================

  15. media query

  ===================================*/



@media screen and (min-width:768px) {

  /*===================================

  14. attributes

  ===================================*/

  /*fixed menu*/

  .mega_mn_menu .fixed-nav {

    position: fixed;

    width: 100%;

    left: 0;

    right: 0;

    margin: 0 auto;

  }

  .mega_mn_menu .no-background {

    transition: .3s all ease-in-out;

  }

  .mega_mn_menu .scroll-background {

  /*  background: #fff !important;*/

    transition: .3s all ease-in-out;

  }

  .mega_mn_menu .scroll-background nav>ul>li>a {

    color: #fff;

  }

  .mega_mn_menu .scroll-background nav>ul>li:hover {

   /* background: #f16c28;*/

  }

  .mega_mn_menu .scroll-background .drop-list {

    background: #fff;

  }

  .mega_mn_menu .scroll-background .drop-list li a {

    border-bottom: 1px solid #fff;

    color: #222;

  }

  .mega_mn_menu .scroll-background .drop-list li a:hover {

    background: #f16c28;



  }

  .mega_mn_menu .scroll-background .megalist .list-col ul li a {

    border-bottom: 1px solid #ccc;

    color: #222;

  }

  .mega_mn_menu .scroll-background .megalist .list-col ul li a:hover {

    background: #f16c28;

  }

  .mega_mn_menu .scroll-background .search-box i {

    color: #222;

    border: 1px solid #fff;

  }

  .mega_mn_menu .scroll-background .logo a {

        color: #fff;
    padding-top: 28px;

  }

  /*fixed-transparent-black menu*/

  .mega_mn_menu .transparent-black {

   /* background: rgba(0, 0, 0, 0.3);*/

    transition: .3s all ease-in-out;

  }

  /*fixed-transparent-white menu*/

  .mega_mn_menu .transparent-white {

    background: rgba(225, 225, 225, 0.3);

    transition: .3s all ease-in-out;

  }

  /*sticky navbar*/

  .sticky-banner {

    height: 70% !important;

  }

  .mega_mn_menu.sticky-navbar {

    position: -webkit-sticky;

    position: sticky;

    top: 0;

  }

  /*===================================

  end of attributes

  ===================================*/

}



/*===================================

  image header

  ====================================*/

  .mega_mn_menu .image-list .drop-list

  {

    width: 400px !important;

    display: flex !important;

  }

  .mega_mn_menu .image-list .drop-list > li

  {

    width: 50% !important;

    float: left !important;

  }

  .mega_mn_menu .drop-list .image-side-wrapper

  {

    background: url(../images/sky-demo.jpg);

    background-size: cover;

  }

  .mega_mn_menu .list-col img

  {

    max-width: 100%;

  }

  .mega_mn_menu .mega-img-list

  {

    padding: 10px;

  }

  .mega_mn_menu .mega-img-list h4

  {

    text-transform: capitalize;

    margin: 0px;

    padding: 0px;

    font-weight: 500;

    font-size: 14px;

    color: #fff;

  }

  .mega_mn_menu .mega-img-list p

  {

    color: #fff;

    font-size: 11px !important;

    line-height: 18px !important;

  }

/*===================================

  end of image header

  ====================================*/





/* Large devices (large desktops, 1200px and up) */



@media screen and (min-width: 1000px) and (max-width: 1200px) {

  .mega_mn_menu nav>ul>li>a {

    font-size: 10px;

    padding: 25px 14px;

  }

  .mega_mn_menu ul.nav-full li a {

    font-size: 20px;

  }

  .mega_mn_menu .of-menu-full li a {

    padding: 7px 0px;

  }

  .mega_mn_menu .small-nav a {

    font-size: 16px;

  }

  .mega_mn_menu .menu-right p {

    font-size: 13px;

    line-height: 20px;

  }

  .mega_mn_menu .social-menu-full li a {

    font-size: 14px;

    padding-right: 10px;

  }

}





/* Medium devices (desktops, 1000px and up) */



@media screen and (max-width: 1000px) {



  .mega_mn_menu

  {

    min-height: 65px;

  }

  /*logo*/

  .mega_mn_menu .logo {

    width: 150px;

    float: none;

    text-align: center;

    margin: 0 auto;

    position: absolute;

    left: 0;

    right: 0;

  }

  /*===================================

  navbar default

  ===================================*/

  .mega_mn_menu nav {

    width: 250px !important;

    float: none;

    position: fixed;

    left: -250px;

    background: #222;

    min-height: 100%;

    overflow-y: scroll;

    height: 100%;

    z-index: 9;

    transition: left .5s ease-in-out;

    top: 0;

  }

  .mega_mn_menu nav.nav_on {

    left: 0;

  }

  .mega_mn_menu nav li {

    width: 100%;

    text-align: left;

  }

  .mega_mn_menu nav li a {

    padding: 15px 20px !important;

    font-size: 10px !important;

    border: 1px solid #333;

  }

  .mega_mn_menu nav li a:hover {

    background: #444;

  }

  .mega_mn_menu .mn_dropdown>a:after {

    right: 20px;

  }

  .mega_mn_menu .drop-list {

    position: relative;

    display: none;

    width: 100%;

    background: #333;

  }

  .mega_mn_menu .drop-list li a {

    border-bottom: 1px solid #444;

    padding-left: 40px !important;

  }

  .mega_mn_menu nav>ul>li:hover {

    background: unset;

  }

  .mega_mn_menu .drop-list li a:hover {

    background: #444;

  }

  .mega_mn_menu .drop-list.double-list {

    width: 100%;

  }

  .mega_mn_menu .drop-list.double-list li {

    width: 100% !important;

    float: none;

  }

  .mega_mn_menu .drop-list {

    opacity: 1;

    display: none;

    visibility: unset;

    transform: translateY(0%);

    transition: unset;

    transition-delay: 0 !important;

    max-width: 350px;

    width: 100%;

  }

  /*===================================

   right nav

   ===================================*/

  .mega_mn_menu .right-nav {

    float: left;

  }

  .mega_mn_menu .search-box {

    float: left;

  }

  .mega_mn_menu .search-input {

    left: 0;

  }

  .mega_mn_menu .search-input.search-block {

    width: 200px;

  }

  .mega_mn_menu .menu-box {

    display: block;

  }

  /*===================================

    mega menu

   ===================================*/

  .mega_mn_menu .megalist .list-col {

    width: 100%;

    float: none;

  }

  .mega_mn_menu .megalist .list-col ul li a {

    border-bottom: 1px solid #444;

  }

  /*===================================

   shopping nav

   ===================================*/

  .mega_mn_menu.shopping-nav nav>ul {

    display: block;

  }

  .mega_mn_menu.shopping-nav nav>ul>li>a {

    color: #fff;

    text-transform: uppercase;

  }

  .mega_mn_menu .shopping-search {

    max-width: 300px;

  }

  .mega_mn_menu .shopping-search .input-box {

    width: 80%;

  }

  .mega_mn_menu .shopping-search .search-icon {

    width: 20%;

  }

  .mega_mn_menu.shopping-nav nav>ul>li .drop-list {

    background: #333;

  }

  .mega_mn_menu.shopping-nav nav>ul>li .drop-list li a {

    color: #eee;

    border-bottom: 1px solid #444;

  }

  .mega_mn_menu.shopping-nav nav>ul>li .megalist .list-col ul li a {

    color: #eee;

    border-bottom: 1px solid #444;

  }

  .mega_mn_menu.shopping-nav nav>ul>li:hover {

    background: #1e1e1e;

  }

  .mega_mn_menu.shopping-nav nav>ul>li .drop-list li a:hover {

    background: #1e1e1e;

  }

  .mega_mn_menu span.cart-display,

  .cart-display {

    display: none !important;

  }

  .mega_mn_menu .shopping-search {

    border-radius: 0px;

    margin-left: 10px;

  }

  .mega_mn_menu.shopping-nav .top-nav .logo {

    width: 100%;

    position: relative;

    border-bottom: 1px solid #74c0ed;

  }

  .mega_mn_menu.shopping-nav .top-nav .logo a {

    padding: 10px 0;

  }

  .mega_mn_menu .top-nav-space {

    padding: 0px;

  }

  .mega_mn_menu.shopping-nav .right-nav {

    float: right;

    margin-right: 55px;

    margin-top: 16px;

  }

  .mega_mn_menu.shopping-nav .right-nav>ul>li>a {

    padding: 10px 5px;

  }

  .mega_mn_menu.shopping-nav .menu-box {

    margin-top: -40px;

  }

  .mega_mn_menu.shopping-nav .right-nav>ul>li.mn_dropdown>ul.drop-list li a {

    padding: 10px !important;

  }

  .mega_mn_menu.shopping-nav .right-nav>ul>li.mn_dropdown {

    position: unset;

  }

  .mega_mn_menu.shopping-nav .right-nav>ul>li.mn_dropdown>ul.drop-list.cart-drop {

    position: absolute;

  }

  .mega_mn_menu .account-list {

    position: absolute;

  }

  /*===================================

   mn_submenu-list

   ===================================*/

  .mega_mn_menu .mn_submenu-list {

    background: #4e5254;

  }

  .mega_mn_menu .mn_submenu-list {

    transform: translateX(0em);

    transition: none;

  }

  .mega_mn_menu .mn_submenu-list {

    position: relative;

    left: 0;

    width: 100%;

    transform: translateX(0em);

    transition: none;

    display: none;

    visibility: visible;

    opacity: 1;

  }

  /*===================================

      off-canvas-left

      ===================================*/

  .logo-nav h1 {

    font-size: 20px;

  }

  .mega_mn_menu .of-menu-left ul li a {

    font-size: 18px !important;

    padding: 0px 20px !important;

  }

  /*===================================

      off-canvas-right

      ===================================*/

  .mega_mn_menu .of-menu-right ul li a {

    font-size: 18px !important;

    padding: 0px 20px !important;

  }

  .canvas-right.padding-canvas-right {

    padding-right: 250px;

  }

  .mega_mn_menu .of-menu-right {

    left: -250px;

  }

  .mega_mn_menu .of-menu-right.fixed {

    left: 0;

  }

  .mega_mn_menu .of-menu-right ul li {

    padding: 10px 0;

  }





  /*===================================

      full nav

      ===================================*/

  .mega_mn_menu .of-menu-full a {

    border: 0px;

    padding: 8px 20px !important;

    font-size: 14px !important;

  }

  .mega_mn_menu .social-menu-full li {

    width: unset;

  }

  .mega_mn_menu .social-menu-full li a {

    padding-left: 0 !important;

    padding-right: 10px;

  }

  .mega_mn_menu .menu-right p {

    font-size: 14px;

  }

  .mega_mn_menu .menu-btn a {

    width: 90%;

    box-sizing: border-box;

  }

  /*===================================

  image header

  ====================================*/

  .image-list .drop-list

  {

    opacity: 1;

    display: block !important;

    visibility: unset;

    transform: translateY(0%);

    transition: unset;

    transition-delay: 0 !important;

    max-width: 350px;

    width: 100%;

  }

  .image-list .drop-list > li

  {

    width: 100% !important;

    float: none !important;

  }

  .drop-list .image-side-wrapper

  {

    background: url(../images/sky-demo.jpg);

    background-size: cover;

    display: none;

  }

/*===================================

  end of image header

  ====================================*/



}





/* Small devices (tablets, 768px and up) */



@media screen and (max-width: 768px) {

  .mega_mn_menu .menu-right {

    display: none !important;

  }

}





/* Small devices (tablets, 500px and up) */



@media screen and (max-width: 500px) {

  .mega_mn_menu.shopping-nav .top-nav .logo a {

    text-align: left;

  }

  .mega_mn_menu .shopping-search {

    width: 100%;

    max-width: 100%;

    margin-left: 0px;

  }

  .mega_mn_menu .top-nav-space {

    padding: 0 15px !important;

  }

  /*===================================

      shopping menu

      ===================================*/

  .mega_mn_menu.shopping-nav .right-nav {

    margin-top: -100px;

  }

  .mega_mn_menu.shopping-nav .menu-box {

    margin-top: -94px;

  }

  .mega_mn_menu .menu-box {

    width: 18px;

  }

  /*===================================

        off-canvas-left

        ===================================*/

  .logo-nav h1 {

    font-size: 20px;

  }

  .canvas-left.padding-canvas-left {

    padding-left: 0px;

  }

  .of-menu-left {

    width: 200px;

  }

  /*===================================

        off-canvas-right

        ===================================*/

  .canvas-right.padding-canvas-right {

    padding-right: 0px;

  }

  .mega_mn_menu .of-menu-right {

    width: 200px;

  }

  /*===================================

          full menu

        ===================================*/

  .mega_mn_menu .menu-right {

    display: none;

  }

  .mega_mn_menu .menu-list-left {

    width: 100%;

  }

  .mega_mn_menu nav.menu-full .of-menu-full {

    padding: 20px;

  }

  .close-btn-full {

    right: 20px;

    top: 12px;

  }

  .mega_mn_menu ul.nav-full li a {

    z-index: 9;

  }

  .mega_mn_menu ul.nav-full li a:hover {

    background: none;

  }

  .mega_mn_menu .close-btn-full {

    z-index: 999;

  }

}