/* meu reset */
.flat-menu ul,
.flat-menu li,
.flat-menu a,
.flat-menu p {
  margin          : 0;
  padding         : 0;
  list-style      : none;
  text-decoration : none;
}

/**.flat-menu > ul > li.active{
	background: rgba(51, 51, 51, 0.05);
}**/

/* menu layout */
.flat-menu {
  background  : #ffffff;
  margin      : 0px auto;
  min-width   : 200px; /* min width 200px */
  max-width   : 1920px; /* max width 1920px */
  min-height  : 40px;
  position    : relative;
  z-index     : 999;
  width       : 100%;
  font-size   : 15px; /* font size */
  font-family : arial; /* font name */
}

/* ul tag layout */
.flat-menu > ul {
  /*min-height: 40px;*/
  float : left;
  width : 100%;
}

/* li tag layout */
.flat-menu > ul > li {
  float       : left;
  padding     : 14px 15px;
  line-height : 18px;
  cursor      : pointer
}

/* li before layout */
.flat-menu > ul > li:not(.last-nav):before {
  content    : "";
  display    : block;
  height     : 12px;
  width      : 2px;
  background : #000;
  position   : relative;
  float      : right;
  top        : 2px;
  right      : -15px;
}

/* a tag layout */
.flat-menu ul li a {
  color          : #444;
  font-weight    : bold;
  text-transform : capitalize
}

.flat-menu > ul > li#flat_menu > a,
.flat-menu > ul > li:not(.shopping_bg):hover > a {
  color : #fff;
}

/* li hover */
.flat-menu > ul > li#flat_menu,
.flat-menu > ul > li:not(.shopping_bg):hover {
  background         : #000;
  transition         : all 0.3s linear 0s;
  -ms-transition     : all 0.3s linear 0s;
  -webkit-transition : all 0.3s linear 0s;
  -moz-transition    : all 0.3s linear 0s;
  -o-transition      : all 0.3s linear 0s;
}

/* column 1 to 6 responsive layout */
.flat-menu .column-1 {
  width  : 16.33333333333333%;
  margin : 0px 1% 10px;
  float  : left;
}

.flat-menu .column-2 {
  width  : 32.66666666666667%;
  margin : 0px 1% 10px;
  float  : left;
}

.flat-menu .column-3 {
  width  : 47.99999999999999%;
  margin : 0px 1% 10px;
  float  : left;
}

.flat-menu .column-4 {
  width  : 63.33333333333332%;
  margin : 0px 1% 10px;
  float  : left;
}

.flat-menu .column-5 {
  width  : 79.66666666666665%;
  margin : 0px 1% 10px;
  float  : left;
}

.flat-menu .column-6 {
  width  : 97.99999999999998%;
  margin : 0px 1% 10px;
  float  : left;
}

/* .clearfix class */
.flat-menu .clearfix {
  clear   : both;
  display : table;
  margin  : 0px;
  padding : 0px;
}

/* .dropdown-menu class layout */
.flat-menu > ul > li > .dropdown-menu {
  max-width : 50%;
}

/* .dropdown-menu class layout */
.flat-menu ul li .dropdown-menu {
  position    : absolute;
  background  : #ffffff;
  top         : 47px;
  padding     : 13px 20px;
  margin-left : -14px;
  margin-top  : 2px;
  cursor      : default;
  border      : 1px solid rgba(0, 0, 0, 0.13);
}

/* .dropdown-menu-full-width class layout */
.flat-menu ul li .dropdown-menu-full-width {
  position           : absolute;
  left               : 0px;
  background         : #ffffff;
  top                : 40px;
  padding            : 13px 20px;
  margin-top         : 2px;
  width              : 100%;
  cursor             : default;
  border             : 1px solid rgba(0, 0, 0, 0.13);
  -webkit-box-sizing : border-box;
  -moz-box-sizing    : border-box;
  box-sizing         : border-box;
}

/* .effect-1 class for submenu animation */
.flat-menu ul li:hover > .effect-1,
.flat-menu ul li:hover > .effect-2 {
  transition         : all 0.2s ease-in 0s;
  -ms-transition     : all 0.2s ease-in 0s;
  -webkit-transition : all 0.2s ease-in 0s;
  -moz-transition    : all 0.2s ease-in 0s;
  -o-transition      : all 0.2s ease-in 0s;
}

/* .effect-1 class layout */
.flat-menu ul li .effect-1,
.flat-menu ul li .effect-2 {
  visibility : hidden;
  opacity    : 0;
  height     : 0px;
  overflow   : hidden;
}

/* .effect-1 class hover effect */
.flat-menu ul li:hover > .effect-1,
.flat-menu ul li:hover > .effect-2 {
  visibility : visible;
  opacity    : 1;
  height     : auto;
  overflow   : visible;
}

/* .dropdown-menu + .dropdown-menu-full-width before layout */
.flat-menu ul li .dropdown-menu:before,
.flat-menu ul li .dropdown-menu-full-width:before {
  content    : "";
  display    : block;
  height     : 5px;
  width      : 100%;
  background : rgba(255, 0, 0, 0.00);
  position   : absolute;
  left       : 0px;
  top        : -5px;
}

/* li tag layout with in dropdown menu */
.flat-menu ul li .dropdown-menu li,
.flat-menu ul li .dropdown-menu-full-width li {
  position       : relative;
  padding-top    : 8px;
  padding-bottom : 8px;
  margin-bottom  : 1px;
  font-size      : small;
  border-bottom  : 1px solid rgba(0, 0, 0, 0.05);
  text-align     : left;
}

/* li last child layout with in .dropdown-menu class */
.flat-menu ul li .dropdown-menu li:last-child {
  border-bottom : none;
}

/* a tag layout with in .dropdown-menu class */
.flat-menu ul li .dropdown-menu li a {
  color : rgba(0, 0, 0, 0.50);
}

/* a tag hover with in .dropdown-menu + .dropdown-menu-full-width class */
.flat-menu ul li .dropdown-menu li:hover > a,
.flat-menu ul li .dropdown-menu-full-width li:hover > a {
  color              : #27499d;
  /* animation */
  transition         : all 0.3s linear 0s;
  -ms-transition     : all 0.3s linear 0s;
  -webkit-transition : all 0.3s linear 0s;
  -moz-transition    : all 0.3s linear 0s;
  -o-transition      : all 0.3s linear 0s;
}

/* .grid class for represent the grid system */
.flat-menu .grid div {
  background : rgba(0, 0, 0, 0.10);
  padding    : 5px 0px;
  text-align : center;
  font-size  : small;
}

/* second level .dropdown-menu layout */
.flat-menu ul li .dropdown-menu li .dropdown-menu {
  position    : absolute;
  left        : 100%;
  top         : -19px;
  margin-left : 35px;
}

/* second level .dropdown-menu before layout */
.flat-menu ul li .dropdown-menu li .dropdown-menu:before {
  content    : "";
  display    : block;
  height     : 100%;
  width      : 60px;
  background : rgba(255, 0, 0, 0.00);
  position   : absolute;
  left       : -50px;
  top        : 0px;
}

/* second level .dropdown-menu after layout */
.flat-menu ul li .dropdown-menu li .dropdown-menu:after {
  content       : "";
  display       : block;
  height        : 0px;
  width         : 0px;
  border-right  : 10px solid rgba(255, 255, 255, 1.00);
  border-top    : 10px solid rgba(0, 0, 0, 0.00);
  border-bottom : 10px solid rgba(0, 0, 0, 0.00);
  position      : absolute;
  top           : 18px;
  left          : -10px;
}

/* image layout */
.flat-menu img {
  width              : 92%;
  padding            : 0;
  margin             : 4%;
  float              : left;
  display            : block;
  -webkit-box-shadow : inset 0px 0px 10px 2px rgba(0, 0, 0, .14);
  box-shadow         : inset 0px 0px 10px 2px rgba(0, 0, 0, .14);
  -webkit-box-sizing : border-box;
  -moz-box-sizing    : border-box;
  box-sizing         : border-box;
}

/* h1 tag layout */
.flat-menu h1 {
  margin    : 0px;
  padding   : 0px;
  font-size : medium;
  color     : rgba(0, 0, 0, 0.70);
  padding   : 5px 0px;
}

/* hr tag layout */
.flat-menu hr {
  border : 1px solid rgba(0, 0, 0, 0.05);
}

/* p tag layout */
.flat-menu p {
  color       : rgba(0, 0, 0, 0.77);
  font-size   : 14px;
  line-height : 18px;
}

/* fontawesome direction icon layout */
.flat-menu ul li .dropdown-menu li .fa.fa-chevron-right {
  position    : absolute;
  right       : 0px;
  color       : rgba(0, 0, 0, 0.24);
  font-size   : xx-small;
  line-height : 14px;
}

/* .social-bar class layout */
.flat-menu > ul > .social-bar {
  float       : right;
  height      : 40px;
  margin      : 0px 1px;
  line-height : 0px;
  width       : 5%;
  text-align  : center;
}

/* a tag layout with in .social-bar class */
.flat-menu > ul > .social-bar > a {
  width   : 100%;
  height  : 100%;
  display : block;
  color   : #FFFFFF;
}

/* fontawesome icons hover effect */
.flat-menu > ul > .social-bar:hover i {
  transform         : scale(1.1, 1.1);
  -webkit-transform : scale(1.1, 1.1);
  -ms-transform     : scale(1.1, 1.1);
  -moz-transform    : scale(1.1, 1.1);
  -o-transform      : scale(1.1, 1.1);
}

/* fontawesome google icon layout */
.flat-menu > ul > .social-bar .fa.fa-google-plus {
  background    : #ee4d4e;
  width         : 100%;
  height        : 100%;
  color         : #FFFFFF;
  line-height   : 38px;
  border-bottom : 2px solid #E01516;
}

/* fontawesome twitter icon layout */
.flat-menu > ul > .social-bar .fa.fa-twitter {
  background    : #19b8ff;
  width         : 100%;
  line-height   : 39px;
  height        : 100%;
  color         : #FFFFFF;
  border-bottom : 2px solid #0099DD;
}

/* fontawesome facebook icon layou */
.flat-menu > ul > .social-bar .fa.fa-facebook {
  background    : #4e6bab;
  width         : 100%;
  line-height   : 40px;
  height        : 100%;
  color         : #FFFFFF;
  border-bottom : 2px solid #394F7F;
}

/* buttons active layout 1 to 5 */
.flat-menu .button-1:active,
.flat-menu .button-2:active,
.flat-menu .button-3:active,
.flat-menu .button-4:active,
.flat-menu .button-5:active {
  border-bottom : none
}

/* buttons layout 1 to 5 */
.flat-menu .button-1,
.flat-menu .button-2,
.flat-menu .button-3,
.flat-menu .button-4,
.flat-menu .button-5 {
  min-width               : 100px;
  height                  : 40px;
  font-size               : 16px;
  font-weight             : bold;
  text-transform          : capitalize;
  -moz-border-radius      : 4px;
  -webkit-border-radius   : 4px;
  border-radius           : 4px;
  -moz-background-clip    : padding;
  -webkit-background-clip : padding-box;
  background-clip         : padding-box;
  border-top              : none;
  border-left             : none;
  border-right            : none;
  color                   : #FFFFFF;
  cursor                  : pointer;
  text-align              : center;
}

/* buttons color 1 to 5 */
.flat-menu .button-1 {
  background-color : #57bf77;
  border-bottom    : 2px solid #2d914d;
}

.flat-menu .button-2 {
  background-color : #19b7ff;
  border-bottom    : 2px solid #1399d6;
}

.flat-menu .button-3 {
  background-color : #896dcf;
  border-bottom    : 2px solid #613DBA;
}

.flat-menu .button-4 {
  background-color : #fb6f51;
  border-bottom    : 2px solid #E52D06;
}

.flat-menu .button-5 {
  background-color : #00c9cf;
  border-bottom    : 2px solid #35b1b5;
}

/* input layout */
.flat-menu input {
  -moz-border-radius      : 4px;
  -webkit-border-radius   : 4px;
  border-radius           : 4px;
  -moz-background-clip    : padding;
  -webkit-background-clip : padding-box;
  background-clip         : padding-box;
  background-color        : #f1f3f5;
  border                  : 1px solid #DBE0E5;
  padding                 : 5px;
}

/* input focus to change background color */
.flat-menu input:focus {
  background-color : rgba(17, 35, 59, 0.10);
}

/* .alpha class layout */
.flat-menu .alpha {
  margin-left : 0px !important;
}

/* .omega class layout */
.flat-menu .omega {
  margin-right : 0px !important;
}

/* .offset-by-one up to five classes layout */
.flat-menu .offset-by-one {
  padding-left : 1%;
}

.flat-menu .offset-by-two {
  padding-left : 2%;
}

.flat-menu .offset-by-three {
  padding-left : 3%;
}

.flat-menu .offset-by-four {
  padding-left : 4%;
}

.flat-menu .offset-by-five {
  padding-left : 5%;
}

/* .mobile-button class */
.flat-menu .mobile-button {
  display : none;
}

/* animation effects only for above screen 768px */
@media screen and (min-width : 768px) {

  /* .effect-2 class layout */
  .flat-menu ul li .effect-2 {
    margin-top : 40px;
  }

  /* .effect-2 class hover effect */
  .flat-menu ul li:hover > .effect-2 {
    margin-top : 2px;
  }
}

/* tablet layout*/
@media screen and (max-width : 768px) {

  /* .column-1 to 6 layout */
  .flat-menu .column-1,
  .flat-menu .column-2,
  .flat-menu .column-3,
  .flat-menu .column-4,
  .flat-menu .column-5,
  .flat-menu .column-6 {
    width  : 100%;
    margin : 0px 0% 10px;
  }

  /* li tag layout */
  .flat-menu > ul > li {
    float              : none;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
    position           : relative;
    border-bottom      : 1px solid rgba(0, 0, 0, 0.05);
  }

  /* li before layout */
  .flat-menu > ul > li:before {
    display : none;
  }

  /* .dropdown-menu class layout */
  .flat-menu > ul > li > .dropdown-menu {
    max-width : 100%;
  }

  /* .dropdown-menu class layout */
  .flat-menu ul li .dropdown-menu {
    z-index            : 999;
    padding            : 13px 20px;
    margin-top         : -2px;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
  }

  /* second level .dropdown-menu layout */
  .flat-menu ul li .dropdown-menu li .dropdown-menu {
    position           : relative;
    left               : 0px;
    width              : 100%;
    top                : 0px;
    margin-left        : 0px;
    visibility         : visible !important;
    opacity            : 1 !important;
    border             : none;
    margin             : 9px 0px;
    padding            : 0px;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
  }

  /* second level .dropdown-menu a tag layout */
  .flat-menu .dropdown-menu .dropdown-menu a {
    padding-left : 10px;
  }

  /* third level .dropdown-menu a tag layout */
  .flat-menu .dropdown-menu .dropdown-menu .dropdown-menu a {
    padding-left : 20px;
  }

  /* fourth level .dropdown-menu a tag layout */
  .flat-menu .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-menu a {
    padding-left : 30px;
  }

  /* fifth level .dropdown-menu a tag layout */
  .flat-menu .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-menu a {
    padding-left : 40px;
  }

  /* sixth level .dropdown-menu a tag layout */
  .flat-menu .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-menu a {
    padding-left : 50px;
  }

  /* li last child layout with in .dropdown-menu class */
  .flat-menu ul li .dropdown-menu li:last-child {
    border-bottom : 1px solid rgba(0, 0, 0, 0.05);
  }

  /* fontawesome direction icon layout */
  .flat-menu ul li .dropdown-menu li .fa.fa-chevron-right {
    transform         : rotate(90deg);
    -moz-transform    : rotate(90deg);
    -ms-transform     : rotate(90deg);
    -webkit-transform : rotate(90deg);
    -o-transform      : rotate(90deg);
  }

  /* .effect-1 class layout */
  .flat-menu ul li .effect-1 {
    visibility : hidden;
    opacity    : 0;
    height     : 0px;
    overflow   : hidden;
  }

  /* .effect-1 class hover effect */
  .flat-menu ul li:hover > .effect-1 {
    visibility : visible;
    opacity    : 1;
    height     : auto;
    overflow   : visible;
  }

  /* .effect-1 class hover animation */
  .flat-menu ul li:hover > .effect-1 {
    transition         : all 0.2s ease-in 0.2s;
    -ms-transition     : all 0.2s ease-in 0.2s;
    -webkit-transition : all 0.2s ease-in 0.2s;
    -moz-transition    : all 0.2s ease-in 0.2s;
    -o-transition      : all 0.2s ease-in 0.2s;
  }

  /* .offset-by-one up to 5 classes layout */
  .flat-menu .offset-by-one,
  .flat-menu .offset-by-two,
  .flat-menu .offset-by-three,
  .flat-menu .offset-by-four,
  .flat-menu .offset-by-five {
    padding-left : 0%;
  }

  /* .dropdown-menu-full-width class layout */
  .flat-menu ul li .dropdown-menu-full-width {
    margin-top : -2px;
  }

  /* .social-bar class layout */
  .flat-menu > ul > .social-bar {
    float : left;
    width : 45px;
  }

  /* .mobile-button class */
  .flat-menu .mobile-button {
    width    : 50%;
    position : absolute;
    height   : 40px;
    z-index  : 999;
    top      : -2px;
    right    : 0px;
    cursor   : pointer;
    display  : block;
    opacity  : 0;
  }

  /* ul hidden */
  .flat-menu ul {
    height   : 42px;
    overflow : hidden;
  }

  /* .mobile-button class checked to expand submenu */
  .flat-menu .mobile-button:checked + ul {
    height   : auto;
    overflow : visible;
  }
}

/* li first child after layout */
@media screen and (max-width : 768px) {
  .flat-menu > ul > li:first-child:after {
    background     : rgba(0, 0, 0, 0.22);
    float          : right;
    content        : "|||||";
    display        : block;
    height         : 39px;
    width          : 60px;
    position       : absolute;
    font           : bold 25px/32px arial;
    padding        : 0px;
    top            : 0px;
    right          : 0px;
    color          : #FFFFFF;
    text-align     : center;
    letter-spacing : -2px;
    text-indent    : 16px;
  }
}

.flat-menu ul li:first-child a {
      color: #FFFFFF;
}