/********** Typography *********/
@font-face {
  font-family: 'SuperMarket';
  src: url('/user/themes/bootstrap/fonts/supermarket-webfont.eot');
  src: url('/user/themes/bootstrap/fonts/supermarket-webfont.eot') format('embedded-opentype'), url('/user/themes/bootstrap/fonts/supermarket-webfont.woff') format('woff'), url('../fonts/supermarket-webfont.ttf') format('truetype'), url('../fonts/supermarket-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}


.features {
    text-align: center;
}

.features h1, .features h4 {
    margin-bottom: 0;
    line-height: 1.2;
}

.features > p {
    font-size: 1.1rem;
}

.features p {
    margin-top: 0;
}

.features ul {
    margin: 3rem 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

.features li {
    padding: 1rem 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.features li i {
    font-size: 6rem;
    margin: 0 auto;
}

#histats_counter{
  display: inline-block !important;
}

.sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.titleMain {
    padding: 0px;
    margin-bottom: 15px;
    line-height: 3em;
    border-bottom: 1px solid #eee;
}
.titleMain h3, .titleMain-bw h3 {
    color: #0054aa;
    font-family: 'SuperMarket' !important;
    font-size: 32px;
    /*padding-bottom: 9px;*/
    border-bottom: 1px solid #0054aa;
    display: inline;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/********** Header CSS *********/
.navbar-brand {
    float: left;
    /* height: 50px; */
    /* padding: 15px 15px; */
    font-size: 18px;
    line-height: 20px;
}
.top-nav {
  padding: 2px 0 0 0;
  background: #03468A;
}
ul.topbar-nav li {
  display: inline-block;
  padding: 0 3px;
  /*margin-bottom: 5px;*/
  color: #ffffff;
  font-size: 1rem;
  font-family: 'SuperMarket';
}
.topbar-nav a,
.topbar-nav span {
  color: #ffffff;
}
.topbar-nav a span {
  margin-right: 5px;
  color: #5BC0DE;
}
.topbar-nav .topbar-fontsize h2,
.topbar-nav .topbar-fontcolor h2 {
  font-size: 1rem;
}
.topbar-nav .topbar-fontsize button {
  border-radius: 50%;
  cursor: pointer;
  width: 26px;
  height: 26px;
  border: 0px;
  padding: 0px;
  background-color: #fff;
}
.topbar-nav .topbar-fontcolor button {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  padding: 0px;
}
.topbar-nav .topbar-fontsize .active {
  background-color: #fff;
  color: #0054aa;
}
.topbar-nav .topbar-fontcolor .bgw-textblue {
  background-color: #ffffff;
  color: #0054aa;
}
.topbar-nav .topbar-fontcolor .bgb-textwhite {
  background-color: #000000;
  color: #ffffff;
}
.topbar-nav .topbar-fontcolor .bgb-textyellow {
  background-color: #000000;
  color: #FFF200;
}
.topbar-nav .topbar-fontsize a:hover {
  background-color: #022A50;
}
.topbar-nav .topbar-lang a {
  position: relative;
  display: block;
  margin-top: 3px;
  padding: 2px 4px 2px 4px;
  color: #000;
  border-radius: 15%;
  background: #fff;
}
.topbar-nav .topbar-lang a:hover {
  color: #0054aa;
  background-color: #fff;
}
.topbar-nav .topbar-lang a.active {
  background: #5BC0DE;
  color: #000;
}
@media screen and (max-width: 770px) {
  ul.topbar-nav li {
    padding: 0px;
  }
}


@media all and (min-width: 40em) {
    .features li {
        width: 50%;
    }
}
@media all and (min-width: 60em) {
    .features li {
        width: 33.33%;
    }
}

.multitext{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.navbar-default {
    background: #0054AA !important;
    border-color: #e7e7e7;
}

.logo {
    background: url(/user/themes/bootstrap/assets/logo.png) !important;
    width: 600px;
    height: 110px;
    display: block;
    background: #fff;
}

#news{
    padding: 20px 0 20px 0;
    margin: 0px;
}

.news-item{
    padding: 10px 10px 0 10px;
}

.navbar-toggle {
    background-color: #fff !important;
}


.navbar-default .navbar-nav>li>a {
    color: #fff !important;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    color: #555 !important;
    background-color: #e7e7e7;
}

/*-------------------------------------------------------------------*/
/*jssor slider loading skin spin css*/
.jssorl-spin img {
  margin-top: 0px;
  position: relative;
  top: 50%;
  width: 38px;
  height: 38px;
  animation-name: jssorl-009-spin;
  animation-duration: 1.6s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes jssorl-009-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/*********Slide banner**************/
#slide-banner {
  /*background: url(../images/featured-bg.jpg);*/
  background-size: 100% 100%;
  padding: 0;
  /*margin-top: -20px;*/
}
.slide {
  margin-left: 0px;
  margin-right: 0px;
}
/***********************************/
/*jssor slider bullet skin 057 css*/
.jssorb057 .i {
  position: absolute;
  cursor: pointer;
}
.jssorb057 .i .b {
  fill: none;
  stroke: #333;
  stroke-width: 2000;
  stroke-miterlimit: 10;
  stroke-opacity: 0.4;
}
.jssorb057 .i:hover .b {
  stroke-opacity: .7;
}
.jssorb057 .iav .b {
  stroke-opacity: 1;
}
.jssorb057 .i.idn {
  opacity: .3;
}
/*jssor slider arrow skin 051 css*/
.slider-l {
  display: block;
  position: absolute;
  cursor: pointer;
  width: 55px;
  height: 55px;
  top: 0px;
  left: 25px;
}
.slider-l .a {
  fill: none;
  stroke: #fff;
  stroke-width: 360;
  stroke-miterlimit: 10;
}
.slider-l:hover {
  opacity: .8;
}
.slider-l.slider-ldn {
  opacity: .5;
}
.slider-l.slider-lds {
  opacity: .3;
  pointer-events: none;
}
/***********************************/
.slider-r {
  display: block;
  position: absolute;
  cursor: pointer;
  width: 55px;
  height: 55px;
  top: 0px;
  right: 25px;
}
.slider-r .a {
  fill: none;
  stroke: #fff;
  stroke-width: 360;
  stroke-miterlimit: 10;
}
.slider-r:hover {
  opacity: .8;
}
.slider-r.slider-rdn {
  opacity: .5;
}
.slider-r.slider-rds {
  opacity: .3;
  pointer-events: none;
}
/***********************************/
.slider-b {
  position: absolute;
  bottom: 16px;
  right: 10px;
}
.slider-b div,
.slider-b div:hover,
.slider-b .av {
  position: absolute;
  /* size of bullet elment */
  width: 12px;
  height: 12px;
  filter: alpha(opacity=70);
  opacity: .7;
  overflow: hidden;
  cursor: pointer;
  border: #ccc 1px solid;
}
.slider-b div {
  background-color: gray;
}
.slider-b div:hover,
.slider-b .av:hover {
  background-color: #d3d3d3;
}
.slider-b .av {
  background-color: #fff;
}
.slider-b .dn,
.slider-b .dn:hover {
  background-color: #555555;
}
/* jssor slider arrow navigator skin 03 css */
.banner-l,
.banner-r {
  display: block;
  position: absolute;
  /* size of arrow element */
  width: 55px;
  height: 55px;
  cursor: pointer;
  background: url(../images/icons/a03.png) no-repeat;
  overflow: hidden;
}
.banner-l {
  background-position: -3px -33px;
}
.banner-r {
  background-position: -63px -33px;
}
.banner-l:hover {
  background-position: -123px -33px;
}
.banner-r:hover {
  background-position: -183px -33px;
}
.banner-l.banner-ldn {
  background-position: -243px -33px;
}
.banner-r.banner-rdn {
  background-position: -303px -33px;
}
/*********************************/
/*jssor slider bullet skin 031 css*/
.favorite-b {
  position: absolute;
}
.favorite-b .i {
  position: absolute;
  cursor: pointer;
}
.favorite-b .i .b {
  fill: #000;
  fill-opacity: 0.5;
  stroke: #fff;
  stroke-width: 1200;
  stroke-miterlimit: 10;
  stroke-opacity: 0.3;
}
.favorite-b .i:hover .b {
  fill: #fff;
  fill-opacity: .7;
  stroke: #000;
  stroke-opacity: .5;
}
.favorite-b .iav .b {
  fill: #fff;
  stroke: #000;
  fill-opacity: 1;
}
.favorite-b .i.idn {
  opacity: .3;
}
.favorite-l {
  display: block;
  position: absolute;
  cursor: pointer;
  width: 55px;
  height: 55px;
  top: 70px;
  left: 25px;
}
.favorite-l .a {
  fill: #ddd;
  fill-opacity: .7;
  stroke: #000;
  stroke-width: 160;
  stroke-miterlimit: 10;
  stroke-opacity: .7;
}
.favorite-l:hover {
  opacity: .8;
}
.favorite-l.favorite-ldn {
  opacity: .4;
}
.favorite-l.favorite-lds {
  opacity: .3;
  pointer-events: none;
}
.favorite-r {
  display: block;
  position: absolute;
  cursor: pointer;
  width: 55px;
  height: 55px;
  top: 70px;
  right: 25px;
}
.favorite-r .a {
  fill: #ddd;
  fill-opacity: .7;
  stroke: #000;
  stroke-width: 160;
  stroke-miterlimit: 10;
  stroke-opacity: .7;
}
.favorite-r:hover {
  opacity: .8;
}
.favorite-r.favorite-rdn {
  opacity: .4;
}
.favorite-r.favorite-rds {
  opacity: .3;
  pointer-events: none;
}
/*********************************/
.owl-carousel {
  padding-bottom: 20px !important;
}
.owl-prev,
.owl-next {
  display: none;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 35%;
  transform: translateY(-50%);
  display: block !important;
  /*border: 0px solid black;*/
}
.owl-prev,
.owl-next {
  display: block;
}
.owl-prev {
  left: -60px !important;
}
.owl-next {
  right: -60px !important;
}
.owl-prev span,
.owl-next span {
  transform: scale(3, 3);
  color: #ccc;
}
@media screen and (max-width: 770px) {
  .owl-prev {
    left: -5px !important;
  }
  .owl-next {
    right: -5px !important;
  }
}
/**********************************/

.footer {
   height: auto !important; 
   color: #fff;
   font-family: 'SuperMarket';
 }

.footer ul{
    margin: 10px !important;
}

.footer img{
    height: 60px !important;
    margin: 0 10px;

}

.footer ul li { display: inline; }

@media (max-width: 650px) {
    .logo{
        width: 100% ;
    }

    .footer img {
    height: 40px !important;
    margin: 0 10px;
    }
}


/* Mobile first layout SmartMenus Core CSS (it's not recommended editing these rules)
   You need this once per page no matter how many menu trees or different themes you use.
-------------------------------------------------------------------------------------------*/
.sm {
  box-sizing: border-box;
  position: relative;
  z-index: 9999;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.sm,
.sm ul,
.sm li {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: normal;
  direction: ltr;
  text-align: left;
}
.sm-rtl,
.sm-rtl ul,
.sm-rtl li {
  direction: rtl;
  text-align: right;
}
.sm > li > h1,
.sm > li > h2,
.sm > li > h3,
.sm > li > h4,
.sm > li > h5,
.sm > li > h6 {
  margin: 0;
  padding: 0;
}
.sm ul {
  display: none;
}
.sm li,
.sm a {
  position: relative;
}
.sm a {
  display: block;
}
.sm a.disabled {
  cursor: default;
}
.sm::after {
  content: "";
  display: block;
  height: 0;
  font: 0px/0 serif;
  clear: both;
  overflow: hidden;
}
.sm *,
.sm *::before,
.sm *::after {
  box-sizing: inherit;
}
.sm-blue {
  background: transparent;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.sm-blue a,
.sm-blue a:hover,
.sm-blue a:focus,
.sm-blue a:active {
  padding: 10px 20px;
  /* make room for the toggle button (sub indicator) */
  padding-right: 58px;
  background: transparent;
  color: #fff;
  /*font-family: "PT Sans Narrow", "Arial Narrow", Arial, Helvetica, sans-serif;*/
  font-family: 'SuperMarket';
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  text-decoration: none;
  /*text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);*/
}
.sm-blue a.current {
  background: #006892;
  background-image: linear-gradient(to bottom, #006188, #006f9c);
  color: #fff;
}
.sm-blue a.disabled {
  color: #a1d1e8;
}
.sm-blue a .sub-arrow {
  position: absolute;
  top: 50%;
  margin-top: -17px;
  left: auto;
  right: 4px;
  width: 34px;
  height: 34px;
  overflow: hidden;
  font: bold 16px/34px monospace !important;
  text-align: center;
  text-shadow: none;
  /*background: rgba(0, 0, 0, 0.1);*/
  border-radius: 4px;
}
.sm-blue a .sub-arrow::before {
  content: '+';
}
.sm-blue a.highlighted .sub-arrow::before {
  content: '-';
}
.sm-blue > li:first-child > a,
.sm-blue > li:first-child > :not(ul) a {
  /*border-radius: 8px 8px 0 0;*/
}
.sm-blue > li:last-child > a,
.sm-blue > li:last-child > *:not(ul) a,
.sm-blue > li:last-child > ul,
.sm-blue > li:last-child > ul > li:last-child > a,
.sm-blue > li:last-child > ul > li:last-child > *:not(ul) a,
.sm-blue > li:last-child > ul > li:last-child > ul,
.sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > a,
.sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a,
.sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul,
.sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a,
.sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a,
.sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul,
.sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a,
.sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a,
.sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul {
  /*border-radius: 0 0 8px 8px;*/
}
.sm-blue > li:last-child > a.highlighted,
.sm-blue > li:last-child > *:not(ul) a.highlighted,
.sm-blue > li:last-child > ul > li:last-child > a.highlighted,
.sm-blue > li:last-child > ul > li:last-child > *:not(ul) a.highlighted,
.sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted,
.sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted,
.sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted,
.sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted,
.sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted,
.sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted {
  border-radius: 0;
}
.sm-blue ul {
  background: #fff;
}
.sm-blue ul ul {
  /*background: rgba(102, 102, 102, 0.1);*/
}
.sm-blue ul a,
.sm-blue ul a:hover,
.sm-blue ul a:focus,
.sm-blue ul a:active {
  background: transparent;
  color: #666;
  font-size: 18px;
  line-height: 24px;
  text-shadow: none;
  border-left: 8px solid transparent;
}
.sm-blue ul a.current {
  background: #006892;
  background-image: linear-gradient(to bottom, #006188, #006f9c);
  color: #fff;
}
.sm-blue ul a.disabled {
  color: #b3b3b3;
}
.sm-blue ul ul a,
.sm-blue ul ul a:hover,
.sm-blue ul ul a:focus,
.sm-blue ul ul a:active {
  border-left: 16px solid transparent;
}
.sm-blue ul ul ul a,
.sm-blue ul ul ul a:hover,
.sm-blue ul ul ul a:focus,
.sm-blue ul ul ul a:active {
  border-left: 24px solid transparent;
}
.sm-blue ul ul ul ul a,
.sm-blue ul ul ul ul a:hover,
.sm-blue ul ul ul ul a:focus,
.sm-blue ul ul ul ul a:active {
  border-left: 32px solid transparent;
}
.sm-blue ul ul ul ul ul a,
.sm-blue ul ul ul ul ul a:hover,
.sm-blue ul ul ul ul ul a:focus,
.sm-blue ul ul ul ul ul a:active {
  border-left: 40px solid transparent;
}
.sm-blue ul li {
  /*border-top: 1px solid rgba(0, 0, 0, 0.05);*/
  line-height: 36px;
}
.sm-blue ul li:first-child {
  border-top: 0;
}
@media (min-width: 768px) {
  /* Switch to desktop layout
  -----------------------------------------------
     These transform the menu tree from
     collapsible to desktop (navbar + dropdowns)
  -----------------------------------------------*/
  /* start... (it's not recommended editing these rules) */
  .sm-blue ul {
    position: absolute;
    width: 8em;
  }
  .sm-blue li {
    float: left;
  }
  .sm-blue.sm-rtl li {
    float: right;
  }
  .sm-blue ul li,
  .sm-blue.sm-rtl ul li,
  .sm-blue.sm-vertical li {
    float: none;
  }
  .sm-blue a {
    white-space: nowrap;
  }
  .sm-blue ul a,
  .sm-blue.sm-vertical a {
    white-space: normal;
  }
  .sm-blue .sm-nowrap > li > a,
  .sm-blue .sm-nowrap > li > :not(ul) a {
    white-space: nowrap;
  }
  /* ...end */
  .sm-blue {
    background: transparent;
    /* margin-top: -60px; */
  }
  .sm-blue a,
  .sm-blue a:hover,
  .sm-blue a:focus,
  .sm-blue a:active,
  .sm-blue a.highlighted {
    padding: 24px 20px;
    background: transparent;
    color: #fff;
  }
  .sm-blue a:hover,
  .sm-blue a:focus,
  .sm-blue a:active,
  .sm-blue a.highlighted {
    background: #0DA0F4;
  }
  .sm-blue a.current {
    background: transparent;
    color: #fff;
  }
  .sm-blue a.disabled {
    background: transparent;
    color: #a1d1e8;
  }
  .sm-blue a .sub-arrow {
    /*top: auto;*/
    margin-top: 0;
    bottom: 1px;
    /*left: 50%;
        margin-left: -5px;
        right: auto;*/
    width: 0;
    height: 0;
    border-width: 5px;
    border-style: solid dashed dashed dashed;
    border-color: #a1d1e8 transparent transparent transparent;
    background: transparent;
    border-radius: 0;
  }
  .sm-blue a .sub-arrow::before {
    display: none;
  }
  .sm-blue > li:first-child > a,
  .sm-blue > li:first-child > :not(ul) a {
    /*border-radius: 8px 0 0 8px;*/
  }
  .sm-blue > li:last-child > a,
  .sm-blue > li:last-child > :not(ul) a {
    /*border-radius: 0 8px 8px 0 !important;*/
  }
  .sm-blue > li {
    border-left: 0px solid #2b82ac;
  }
  .sm-blue > li:first-child {
    border-left: 0;
  }
  .sm-blue ul {
    border: 0px solid #a8a8a8;
    padding: 7px 0;
    background: #fff;
    /*border-radius: 0 0 4px 4px !important;*/
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
  }
  .sm-blue ul ul {
    border-radius: 4px !important;
    background: #fff;
  }
  .sm-blue ul a,
  .sm-blue ul a:hover,
  .sm-blue ul a:focus,
  .sm-blue ul a:active,
  .sm-blue ul a.highlighted {
    border: 0 !important;
    padding: 9px 23px;
    background: transparent;
    color: #2b82ac;
    border-radius: 0 !important;
  }
  .sm-blue ul a:hover,
  .sm-blue ul a:focus,
  .sm-blue ul a:active,
  .sm-blue ul a.highlighted {
    background: #0DA0F4;
    color: #fff;
  }
  .sm-blue ul a.current {
    background: #006892;
    background-image: linear-gradient(to bottom, #006188, #006f9c);
    color: #fff;
  }
  .sm-blue ul a.disabled {
    background: #fff;
    color: #b3b3b3;
  }
  .sm-blue ul a .sub-arrow {
    top: 50%;
    margin-top: -5px;
    bottom: auto;
    left: auto;
    margin-left: 0;
    right: 10px;
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent #a1d1e8;
  }
  .sm-blue ul li {
    border: 0;
  }
  .sm-blue .scroll-up,
  .sm-blue .scroll-down {
    position: absolute;
    display: none;
    visibility: hidden;
    overflow: hidden;
    background: #fff;
    height: 20px;
  }
  .sm-blue .scroll-up-arrow,
  .sm-blue .scroll-down-arrow {
    position: absolute;
    top: -2px;
    left: 50%;
    margin-left: -8px;
    width: 0;
    height: 0;
    overflow: hidden;
    border-width: 8px;
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent #2b82ac transparent;
  }
  .sm-blue .scroll-down-arrow {
    top: 6px;
    border-style: solid dashed dashed dashed;
    border-color: #2b82ac transparent transparent transparent;
  }
  .sm-blue.sm-rtl.sm-vertical a .sub-arrow {
    right: auto;
    left: 10px;
    border-style: dashed solid dashed dashed;
    border-color: transparent #a1d1e8 transparent transparent;
  }
  .sm-blue.sm-rtl > li:first-child > a,
  .sm-blue.sm-rtl > li:first-child > :not(ul) a {
    /*border-radius: 0 8px 8px 0;*/
  }
  .sm-blue.sm-rtl > li:last-child > a,
  .sm-blue.sm-rtl > li:last-child > :not(ul) a {
    /*border-radius: 8px 0 0 8px !important;*/
  }
  .sm-blue.sm-rtl > li:first-child {
    border-left: 1px solid #2b82ac;
  }
  .sm-blue.sm-rtl > li:last-child {
    border-left: 0;
  }
  .sm-blue.sm-rtl ul a .sub-arrow {
    right: auto;
    left: 10px;
    border-style: dashed solid dashed dashed;
    border-color: transparent #a1d1e8 transparent transparent;
  }
  .sm-blue.sm-vertical {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  }
  .sm-blue.sm-vertical a {
    padding: 9px 23px;
  }
  .sm-blue.sm-vertical a .sub-arrow {
    top: 50%;
    margin-top: -5px;
    bottom: auto;
    left: auto;
    margin-left: 0;
    right: 10px;
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent #a1d1e8;
  }
  .sm-blue.sm-vertical > li:first-child > a,
  .sm-blue.sm-vertical > li:first-child > :not(ul) a {
    border-radius: 8px 8px 0 0;
  }
  .sm-blue.sm-vertical > li:last-child > a,
  .sm-blue.sm-vertical > li:last-child > :not(ul) a {
    border-radius: 0 0 8px 8px !important;
  }
  .sm-blue.sm-vertical > li {
    border-left: 0 !important;
  }
  .sm-blue.sm-vertical ul {
    border-radius: 4px !important;
  }
  .sm-blue.sm-vertical ul a {
    padding: 9px 23px;
  }
}
/*# sourceMappingURL=sm-blue.css.map */
.main-nav {
  position: relative;
  background: #0054aa;
  padding-top: 10px;
  margin-top: -10px;
  font-family: 'SuperMarket';
}
.main-nav:after {
  clear: both;
  content: "\00a0";
  display: block;
  height: 0;
  font: 0px/0 serif;
  overflow: hidden;
}
.brand {
  width: 360px;
}
@media (min-width: 768px) {
  .brand {
    /* width: 300px; */
  }
}
.nav-brand {
  float: left;
  margin: 0;
}
.nav-brand a {
  display: block;
  padding: 0px 10px 10px 20px;
  color: #0054aa;
  /*font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
  font-family: 'SuperMarket';
  font-size: 22px;
  font-weight: normal;
  line-height: 29px;
  text-decoration: none;
}
#main-menu {
  clear: both;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  /*float: right;*/
}
@media (min-width: 768px) {
  #main-menu {
     float: right; 
     clear: none; 
  }
}
/* Mega menus */
/* make mega menus take the full width of .main-nav */
#main-menu,
#main-menu > .has-mega-menu {
  position: static !important;
}
#main-menu .mega-menu {
  margin-left: 0 !important;
  right: 0 !important;
  width: auto !important;
  max-width: none !important;
}
#main-menu > .has-mega-menu .scroll-up,
#main-menu > .has-mega-menu .scroll-down {
  margin-left: 0 !important;
}
/* clear any floats inside the mega menus */
#main-menu .mega-menu > li {
  overflow: auto;
}
/* reset mega menu list/link styles (which are inherited from the SmartMenus core/theme styles) */
#main-menu .mega-menu {
  color: #0054aa;
  background: #F2F2F2;
}
#main-menu .mega-menu ul {
  position: static;
  display: block;
  margin: 0.83em 0;
  border: 0;
  padding: 0;
  width: auto;
  background: transparent;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  line-height: 200%;
}
#main-menu .mega-menu ul li {
  display: list-item;
  list-style-type: none;
  border: 0;
}
#main-menu .mega-menu a {
  display: inline;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
  list-style-type: none;
  font-size: 18px;
}
#main-menu .mega-menu ul li a {
  color: #666;
}
#main-menu .mega-menu ul li a:hover {
  color: #0054aa;
}
h3.mega-menu-subtitle,
h3.mega-menu-subtitle a,
h3.mega-menu-subtitle a:hover {
  font-size: 24px;
  color: #0054aa;
  margin: 0px;
  padding-top: 20px;
  line-height: 0.8rem;
}
/* simple columns inside the mega menus */
#main-menu .mega-menu .column-1-3 {
  padding: 20px;
}
@media (min-width: 768px) {
  #main-menu .mega-menu .column-1-3 {
    float: left;
    width: 33.33%;
  }
}
/* Sample image placeholder */
.mega-menu-sample-image {
  margin: 0.83em 0;
  border: 1px solid;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
/* Mobile menu top separator */
#main-menu:before {
  content: '';
  display: block;
  height: 1px;
  font: 1px/1px sans-serif;
  overflow: hidden;
  background: #fff;
}
@media (min-width: 768px) {
  #main-menu:before {
    display: none;
  }
}
/* Mobile menu toggle button */
.main-menu-btn {
  float: right;
  margin: 10px;
  position: relative;
  display: inline-block;
  width: 29px;
  height: 29px;
  text-indent: 29px;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* hamburger icon */
.main-menu-btn-icon,
.main-menu-btn-icon:before,
.main-menu-btn-icon:after {
  position: absolute;
  top: 50%;
  left: 2px;
  height: 2px;
  width: 24px;
  background: #fff;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
.main-menu-btn-icon:before {
  content: '';
  top: -7px;
  left: 0;
}
.main-menu-btn-icon:after {
  content: '';
  top: 7px;
  left: 0;
}
/* x icon */
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon {
  height: 0;
  background: transparent;
}
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:before {
  top: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:after {
  top: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* hide menu state checkbox (keep it visible to screen readers) */
#main-menu-state {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}
/* hide the menu in mobile view */
#main-menu-state:not(:checked) ~ #main-menu {
  display: none;
}
#main-menu-state:checked ~ #main-menu {
  display: block;
}
@media (min-width: 768px) {
  /* hide the button in desktop view */
  .main-menu-btn {
    position: absolute;
    top: -99999px;
  }
  /* always show the menu in desktop view */
  #main-menu-state:not(:checked) ~ #main-menu {
    display: block;
  }
}
/* IGNORE: Unrelated generic demo styles */
.demo-text {
  margin: 3em 22px;
}
.demo-text p {
  margin-bottom: 1em;
}
.demo-text a {
  color: #999;
}