a, a:hover{ text-decoration: none}


/* ============================================================
  NAV
============================================================ */
html,body,ul,li{
  margin: 0 auto;
  padding: 0px;
}
.mlogo > img  {
  height: 25px;
}
nav.main-nav ul {
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 0 auto;
    margin-top: 4px;
}
nav.main-nav li {
  display: inline-block;
  margin: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  width: 100%;
  border-right: 3px solid #fff;
  z-index: 0;
}

nav.main-nav a {
  display: block;
  color: #285064;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  font-family: 'ge_thameenregular' !important;
  font-size: 16px !important;
  font-weight:  bold;
  height: 45px;
}
nav.main-nav a:hover {
  color: #12242d;
}
nav.main-nav span {
  display: block;
  padding: 10px 10px;
}
@media   (max-width: 690px) {
  nav.main-nav li  {
    display: block;
  }
   nav.main-nav li:first-child  {
    padding: 20px 0;
    }
}


@media all and (min-width: 690px) {

  nav.main-nav li:first-child {
    border-right: 0px solid #fff;
    background: none;
    background: transparent url('../img/bg-logo.png')  no-repeat center left;
  }
  nav.main-nav li:first-child a:hover {
    background: #f0f0f0 url('../img/bg-logo.png')  no-repeat center left;
  }


  nav.main-nav li a > .i-btn{
    height: 28px;
    width: 28px;
    float: right;
    -webkit-transform: skewX(20deg);
    -moz-transform: skewX(20deg);
    -ms-transform: skewX(20deg);
    -o-transform: skewX(20deg);
    transform: skewX(20deg);
    margin: 12px 10px 0 5px;
  }

  nav.main-nav li a span {
    -webkit-transform: skewX(20deg);
    -moz-transform: skewX(20deg);
    -ms-transform: skewX(20deg);
    -o-transform: skewX(20deg);
    transform: skewX(20deg);
  }

/*
  nav.main-nav li.active a {
    box-shadow: inset 0 -2px 0 0 white;
    border-bottom: 1px solid #f2f2f2;
  }
*/
  .mlogo  {
    z-index: 3;
    /*position: relative;*/
    -webkit-transform: skewX(20deg);
    -moz-transform: skewX(20deg);
    -ms-transform: skewX(20deg);
    -o-transform: skewX(20deg);
    transform: skewX(20deg);
    border-radius: 0 30px 30px 0;
    width: 100%;
  }
  .mlogo > img {
    margin-top: 10px;
  }
  nav.main-nav ul {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;
    justify-content: space-between;
  }
  nav.main-nav li {
    margin: 0;
    -webkit-transform: skewX(-20deg);
    -moz-transform: skewX(-20deg);
    -ms-transform: skewX(-20deg);
    -o-transform: skewX(-20deg);
    transform: skewX(-20deg);
    transform-origin: left center;

  }
  nav.main-nav a {
    color: #222222;
    z-index: 0;
    background-color: #f0f0f0;
  }
  nav.main-nav a:hover {
    color: #fff;
    background-color: #12242d;
  }
  nav.main-nav a > span {
    -webkit-transform: skewX(20deg);
    -moz-transform: skewX(20deg);
    -ms-transform: skewX(20deg);
    -o-transform: skewX(20deg);
    transform: skewX(20deg);
  }
}

nav.main-nav li a.mlogo{
  z-index: 99;
  text-align: center;
}

/*colors*/
.purble  , .purble > span ,
.purble  { color: #594099}
nav.main-nav a.purble  > span > .fa , a.purble  > span > .fa{ color: #594099}

  nav.main-nav a.purble:hover ,
  nav.main-nav li.active a.purble { background: #594099}
  nav.main-nav a.purble:hover  > span,
  nav.main-nav a.purble:hover  > span > .fa ,
  nav.main-nav li.active a.purble ,
  nav.main-nav li.active a.purble > span ,
  nav.main-nav li.active a.purble  > span > .fa  { color: #ffffff}

.green , .green > span , .green  { color: #3EB54A}
nav.main-nav a.green  > span > .fa , a.green  > span > .fa{ color: #3EB54A}

  nav.main-nav a.green:hover , nav.main-nav li.active a.green  { background: #3EB54A}
  nav.main-nav a.green:hover  > span,
  nav.main-nav a.green:hover  > span > .fa  ,
    nav.main-nav li.active a.green > span ,
  nav.main-nav li.active a.green  > span > .fa { color: #ffffff}

.blue , .blue > span , .blue{ color: #00a7d2}
nav.main-nav a.blue  > span > .fa ,
a.blue  > span > .fa{ color: #00a7d2}

  nav.main-nav a.blue:hover ,
  nav.main-nav li.active a.blue  { background: #00a7d2}
  nav.main-nav a.blue:hover  > span,
  nav.main-nav a.blue:hover  > span > .fa ,
  nav.main-nav li.active a.blue > span ,
  nav.main-nav li.active a.blue  > span > .fa   { color: #ffffff}


/*Mobile*/
@media   (max-width: 690px) {
  nav.main-nav a  {
    margin-bottom: 1px;
  }

/*Colors*/
  .purble  , .purble > span  { color: #594099}
    nav.main-nav a.purble  { background: #594099}
    nav.main-nav a.purble  > span , nav.main-nav   a.purble  > span > .fa  { color: #ffffff}
  .green , .green > span{ color: #3EB54A}
    nav.main-nav a.green  { background: #3EB54A}
    nav.main-nav a.green  > span  , nav.main-nav   a.green  > span > .fa  { color: #ffffff}
  .blue , .blue > span{ color: #00a7d2}
    nav.main-nav a.blue  { background: #00a7d2}
    nav.main-nav a.blue  > span , nav.main-nav   a.blue  > span > .fa  { color: #ffffff}

    /* hover */
    .purble  , .purble > span  { color: #594099}
      nav.main-nav a.purble:hover  { background: #4a318a}
      nav.main-nav a.purble:hover  > span  { color: #ffffff}
    .green , .green > span{ color: #3EB54A}
      nav.main-nav a.green:hover  { background: #2ea139}
      nav.main-nav a.green:hover  > span  { color: #ffffff}
    .blue , .blue > span{ color: #00a7d2}
      nav.main-nav a.blue:hover  { background: #0595ba}
      nav.main-nav a.blue:hover  > span  { color: #ffffff}
}




/* b1 */
nav.main-nav li a > .i-btn.b1{
 background: url('../img/b1.png')  no-repeat 1px 1px;
 background-size: 20px 20px;
}
nav.main-nav li a:hover > .i-btn.b1, nav.main-nav li.active a > .i-btn.b1{
 background: url('../img/b1-h.png')  no-repeat 1px 1px;
 background-size: 20px 20px;
}

/* b2 */
nav.main-nav li a > .i-btn.b2{
 background: url('../img/b2.png')  no-repeat 1px 1px;
 background-size: 20px 20px;
}
nav.main-nav li a:hover > .i-btn.b2, nav.main-nav li.active a > .i-btn.b2{
 background: url('../img/b2-h.png')  no-repeat 1px 1px;
 background-size: 20px 20px;
}

/* b3 */
nav.main-nav li a > .i-btn.b3{
 background: url('../img/b3.png')  no-repeat 1px 1px;
 background-size: 20px 20px;
}
nav.main-nav li a:hover > .i-btn.b3, nav.main-nav li.active a > .i-btn.b3{
 background: url('../img/b3-h.png')  no-repeat 1px 1px;
 background-size: 20px 20px;
}

/* b4 */
nav.main-nav li a > .i-btn.b4{
 background: url('../img/b4.png')  no-repeat 1px 1px;
 background-size: 20px 20px;
}
nav.main-nav li a:hover > .i-btn.b4, nav.main-nav li.active a > .i-btn.b4{
 background: url('../img/b4-h.png')  no-repeat 1px 1px;
 background-size: 20px 20px;
}

/* b5 */
nav.main-nav li a > .i-btn.b5{
 background: url('../img/b5.png')  no-repeat 1px 1px;
 background-size: 20px 20px;
}
nav.main-nav li a:hover > .i-btn.b5, nav.main-nav li.active a > .i-btn.b5{
 background: url('../img/b5-h.png')  no-repeat 1px 1px;
 background-size: 20px 20px;
}

/* b6 */
nav.main-nav li a > .i-btn.b6{
 background: url('../img/b6.png')  no-repeat 1px 1px;
 background-size: 20px 20px;
}
nav.main-nav li a:hover > .i-btn.b6, nav.main-nav li.active a > .i-btn.b6{
 background: url('../img/b6-h.png')  no-repeat 1px 1px;
 background-size: 20px 20px;
}

/* b7 */
nav.main-nav li a > .i-btn.b7{
 background: url('../img/b7.png')  no-repeat 1px 1px;
 background-size: 20px 20px;
}
nav.main-nav li a:hover > .i-btn.b7, nav.main-nav li.active a > .i-btn.b7{
 background: url('../img/b7-h.png')  no-repeat 1px 1px;
 background-size: 20px 20px;
}


/*Mobile*/
@media   (max-width: 690px) {

  nav.main-nav li a > .i-btn{
    height: 28px;
    width: 28px;
    float: right;
    margin: 12px 15px 0 5px;
  }

  nav.main-nav li a > .i-btn.b1{
   background: url('../img/b1-h.png')  no-repeat 1px 1px;
   background-size: 20px 20px;
  }
  nav.main-nav li a > .i-btn.b2{
   background: url('../img/b2-h.png')  no-repeat 1px 1px;
   background-size: 20px 20px;
  }
  nav.main-nav li a > .i-btn.b3{
   background: url('../img/b3-h.png')  no-repeat 1px 1px;
   background-size: 20px 20px;
  }
  nav.main-nav li a > .i-btn.b4{
   background: url('../img/b4-h.png')  no-repeat 1px 1px;
   background-size: 20px 20px;
  }
  nav.main-nav li a > .i-btn.b5{
   background: url('../img/b5-h.png')  no-repeat 1px 1px;
   background-size: 20px 20px;
  }
  nav.main-nav li a > .i-btn.b6{
   background: url('../img/b6-h.png')  no-repeat 1px 1px;
   background-size: 20px 20px;
  }
  nav.main-nav li a > .i-btn.b7{
   background: url('../img/b7-h.png')  no-repeat 1px 1px;
   background-size: 20px 20px;
  }

}


.container {
    margin-right: auto;
    margin-left: auto;
}


@media (min-width: 768px){
  .container {
      width: 750px;
  }
}

@media (min-width: 920px){
  .container {
      width: 900px;
  }
}


@media (min-width: 1000px){
  .container {
      width: 970px;
  }
}