/** {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}*/
header { width: 100%; z-index: 999999; }
.nav-bar { display: none; }

header nav {
 /* background: #FFF;*/
  z-index: 1000;
  width:100%;
  margin: 0px 0 0 0px;
  float: left;
}

header nav ul { list-style: none; margin: 0 auto; display: table; width:33%;}

header nav ul li {
text-align: left; margin: 14px 0px; padding: 0px; display: inline; font-size: 18px; font-weight: 400; 
padding: 0; line-height: 100%; position: relative; font-family: 'Lato', sans-serif; float: left;
/*background: url('../images/seperator2.png') 0 3px no-repeat;*/
}

header nav:after {
  content: "";
  display: block;
  clear: both;
}

header nav ul li a { display: block; color:#C97DBC !important; padding: 0px 22px 0px; float: left; transition-property: height; transition-duration: 5s;}

header nav ul li:hover {color: #FFF !important; background-color: transparent !important;  }
header nav ul li a:hover {color: #FFF !important; background-color: transparent !important;  }
header nav ul li a:focus {color: #FFF !important; background-color: transparent !important; outline: none; text-decoration: none;  }
header nav ul li.current-menu-item > a{color: #FFF !important; font-weight: 400;background-color: transparent!important; position: relative; }

header nav ul li:hover i { color: yellow; }
header nav ul li i { margin-right: 10px; }
header nav ul li:after{content: ''; width: 1px; height: 14px; float: right; position: absolute; right: 0; top: 2px; border:1px solid #C97DBC;  }
header nav ul li:last-child:after{ display: none; }


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

@media all and (max-width: 969px) {

/*body { padding-top: 80px; }*/
header nav{margin: 0px;}
.nav-bar {
  display: block;
  width: 16%;
  position: absolute;
  float: right;
  top: 19px; right:11px;
  background: transparent;
}

.nav-bar span {
  float: left;
  font-size: 20px;
  padding: 20px;
  color: #000;
  display: none;
}

.nav-bar .fa-bars {
  display: block;
    padding: 4px 3px 0px 8px;
    color: #FFF;
    overflow: hidden;
    font-size: 18px;
    line-height: 18px;
   /* font-weight: bold;*/
   font-variant: normal;
    text-decoration: none;
    float: right;
    width: 31px;
    height: 28px;
    background-color:#9C1885;
    border-radius: 4px;
}
 /*i.fa.fa-bars{color: red !important; font-size: 18px;}*/
header nav {
  width: 80%;
  height: auto;
  position: fixed;
  right: 100%;
  top:0px;
  overflow: hidden;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
}

header nav ul li {
  display: block;
  border-bottom: 1px solid #706A6A;
  width: 100%;
  background: none;
}
header nav ul { width: 100%; padding: 0px}
header nav ul li:first-child { margin-left: 0px;}
header nav ul li { margin: 0 0px;}
header nav ul li a:hover{ color: #63AC1F !important; cursor: pointer;}
header nav ul li a { display: block; padding: 10px 0px 10px 20px; color: #FFF !important; width: 100%; text-align: left; }
header nav ul li:first-child a { padding-left: 24px; }
header nav ul li.current-menu-item > a{padding: 10px 0px 10px 20px; font-weight: 400; color: #FFF !important; background-color: #9C1885 !important; }
header nav ul li.current-menu-item > a:after{display: none;}
header nav ul li a:hover{ color: #4083FF !important; width: 100%;}
header nav ul li a:after{display: none;}


header nav ul li .fa-angle-down {
  position: relative;
  top: 3px;}

}


@media screen and (min-width : 641px) and (max-width :767px) {
/*body { padding-top: 80px; }*/

.nav-bar {
  display: block;
  width: 16%;
  position: absolute;
  top: 20px; right: 0;
  background: transparent;}
}

@media screen and (min-width : 479px) and (max-width :640px) {
/*body { padding-top: 80px; }*/

.nav-bar {
  display: block;
  width: 15%;
  position: absolute;
  top: 15px; right: 12;
  background: transparent;
  z-index: 1;
}
header nav {
  width: 80%;
  height: auto;
  position: fixed;
  right: 100%;
  top : 0px;
  overflow: hidden;
  height: 100%;
  background-color: rgba(0,0,0,0.8);}
}

@media screen and (min-width : 480px) and (max-width :639px) {
/*body { padding-top: 80px; }*/

.nav-bar {
  display: block;
  width: 16%;
  position: absolute;
  top: 16px; right: 14px;
  background: transparent;
}
header nav {
  width: 80%;
  height: auto;
  position: fixed;
  right: 100%;
  top : 0px;
  overflow: hidden;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
}}



@media screen and (min-width : 360px) and (max-width :479px) {
/*body { padding-top: 80px; }*/

.nav-bar {
  display: block;
  width: 16%;
  position: absolute;
  top: 16px; right: 6px;
  background: transparent;
  z-index: 9999;
}
header nav {
  width: 80%;
  height: auto;
  position: fixed;
  right: 100%;
  top : 0px;
  overflow: hidden;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
}}


@media screen and (min-width : 320px) and (max-width :359px) {
/*body { padding-top: 80px; }*/

.nav-bar {
  display: block;
  width: 16%;
  position: absolute;
  top: 16px; right: 5px;
  background: transparent;
  z-index: 9999;
}
header nav {
  width: 80%;
  height: auto;
  position: fixed;
  right: 100%;
  top : 0px;
  overflow: hidden;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
}}