/* ####################################################### */
/* ###################### main menu ###################### */
/* Remove margins and padding from the list, and add a black background color */

.top-menu {
  max-width:             1020px;
  padding:               0px;
  margin-left:           auto;
  margin-right:          auto;
  margin-bottom:         2px;
  margin-top:            4px;
}
.c-menu {
  display:               block;
  width:                 calc(100% - 160px);
  text-align:            left;
  float:                 left;
  padding:               0px;
  margin-top:            0px;
  margin-bottom:         0px;
  margin-right:          auto;
  margin-left:           auto;
}

.s-menu {
  display:               block;
  width:                 160px;
  height:                41px;
  float:                 left;
  text-align:            left;
  padding:               0px;
  margin:                auto;
}
.s-menu form {
  padding:               0px;
  margin:                auto;
  background-color:      transparent;
}

input.header-search-input {
  width:                 145px;
  height:                28px;
  box-sizing:            border-box;
  font-size:             1.em;
  float:                 left;
  color:                 #63717f;
  -webkit-border-radius: 10px;
  -moz-border-radius:    10px;
  border-radius:         10px;
  background-color:      #FFFFFF;
  background-image:      url("../IMG/search-icon-png-21.jpg");
  background-position:   5px 6px;
  background-repeat:     no-repeat;
  background-size:       15px 15px;

  padding-left:          22px;
  margin-top:            2px;
  margin-left:           6px;
  margin-right:          10px;
}

li.c-search {
  display:               none;
}

@media screen and (max-width:480px) {
  .c-menu {
    width:               100%;
  }
  .s-menu {
    display:             none;
  }
}

/* ####################################################### */
/* ####################################################### */

.header-icons .icons-navigation li a span {
  height:                40px;
  width:                 40px;
}

.header-icons a span {
  display:               block;
}

.header-icons .icons-navigation li a {
  margin-left:           2px;
  margin-right:          2px;
  padding:               2px;
  display:               block;
  text-decoration:       none;
  cursor:                pointer;
  border:                1px solid transparent;
}

ul.icons-navigation {
  list-style-type:       none;
  margin:                0px;
  padding:               0px;
  overflow:              hidden;
}

ul.icons-navigation li {
  list-style:            none;
  float:                 left;
  position:              relative;
  padding:               0px;
  font-size:             1.1em;
  line-height:           16px;
  border-left-width:     0;
  height:                45px;
  width:                 45px;
}

.nav-button {
  background-color:      transparent;
  background-repeat:     no-repeat;
  background-attachment: scroll;
  background-clip:       border-box;
  background-origin:     padding-box;
  background-position-x: 0%;
  background-position-y: 0%;
  background-size:       auto auto;
  padding:               0 !important;
}

.nav-button-qr {
  background-position:   0px 0px;
}

.nav-button-facebook {
  background-position:   0px -41px;
}

.nav-button-rss {
  background-position:   -41px 0px;
}

.nav-button-dog {
  background-position:   -41px -41px;
}

/* ####################################################### */

ul.top-nav {
  list-style-type:       none;
  overflow:              hidden;
  background-image:      url("../IMG/menubg.gif");
  background-repeat:     repeat-x;
  background-size:       1px 41px;
  margin:                0px;
  padding:               0px;
}
ul.top-nav li {
  float:                 left;
  cursor:                pointer;
  background-color:      transparent;
  background:            url("../IMG/menubar.gif");
  background-repeat:     no-repeat;
  background-position:   right bottom;
  vertical-align:        middle;

  padding:               0px;
  margin:                0px;
}
ul.top-nav li.s-search {
  float:                 left;
  border-radius:         0px!important;
  background:            transparent;
  height:                36px;
  padding-left:          0px;
  padding-top:           5px;
}

ul.top-nav li a {
  display:               inline-block;
  color:                 #6e665a;
  text-align:            center;
  text-decoration:       none;
  transition:            1s;
  font-size:             1.4em;
  border:                0px;
  vertical-align:        middle;
  margin:                0px;
  padding-top:           10px;
  padding-bottom:        10px;
  padding-left:          10px;
  padding-right:         10px;

  box-shadow:            0px 0px 0px rgb(156, 145, 127);
}
ul.top-nav li a:hover {
  color:                 #6e665a;
  background:            rgb(255,255,255); /* Old browsers */
  background:            -moz-linear-gradient(top, rgba(245,245,162,1) 0%, rgba(255,255,200,1) 100%); /* FF3.6-15 */
  background:            -webkit-linear-gradient(top, rgba(245,245,162,1) 0%, rgba(255,255,200,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background:            linear-gradient(to bottom, rgba(245,245,162,1) 0%, rgba(255,255,200,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter:                progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
  box-shadow:            0px 0px 5px rgb(156, 145, 127);
  background-color:      rgb(255,255,255);

  padding-top:           42px;
}
#c-menu ul li .active {
  color:                 rgb(243, 240, 233);
  background:            rgb(255,255,255); /* Old browsers */
  background:            -moz-linear-gradient(top, rgba(124,111,92,1) 0%, rgba(178,169,154,1) 100%); /* FF3.6-15 */
  background:            -webkit-linear-gradient(top, rgba(124,111,92,1) 0%, rgba(178,169,154,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background:            linear-gradient(to bottom, rgba(124,111,92,1) 0%, rgba(178,169,154,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter:                progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
  box-shadow:            0px 0px 5px rgb(156, 145, 127);
  background-color:      rgb(255,255,255);
}

ul.top-nav li.icon {
  display:               none;
}
@media screen and (max-width:1000px) {
  .top-menu {
    float:               left;
    width:               100%;
    height:              100%;
  }
  .c-menu {
    height:              100%;
  }

  ul.top-nav {
    background-color:    #DDD3C4;
    padding:             0px;
    margin:              0px;
  }
  ul.top-nav li {
    padding:             0px;
    margin:              0px;
    height:              41px;
  }
  ul.top-nav li a {
    display:             block;
  }
  ul.top-nav li a:hover {
    height:              21px;
    line-height:         21px;
    padding-top:         10px;
  }
  ul.top-nav li:not(:first-child) {
    display:             none;
  }
  ul.top-nav li.icon {
    float:               right;
    display:             block;
    width:               60px;
    height:              40px;
  }
  ul.top-nav li.icon a {
    float:               right;
    text-align:          center;
    width:               60px;
    padding:             10px;
    margin:              0px;
  }
  ul.top-nav li.s-search {
    background:          none;
  }
  ul.top-nav.responsive {
    position:            relative;
    padding:             0px;
    margin:              0px;
    margin-bottom:       6px;
  }
  ul.top-nav.responsive li {
    float:               none;
    display:             inline;
  }
  ul.top-nav.responsive li a {
    width:               calc(100% - 100px);
    display:             block;
    text-align:          left;
    margin-bottom:       4px;
  }
  ul.top-nav.responsive li:first-child a {
    margin-bottom:       10px;
  }
  ul.top-nav.responsive li:not(:first-child) a {
    border-bottom:       0px solid #FFFFFF;
    box-shadow:          0px 0px 5px rgb(156, 145, 127);
  }
  ul.top-nav.responsive li a:hover {
    height:              21px;
    line-height:         21px;
    padding-top:         10px;

    background-color:    transparent;
    background:          rgb(255,255,255); /* Old browsers */
    background:          -moz-linear-gradient(top, rgba(245,245,162,1) 0%, rgba(255,255,200,1) 100%); /* FF3.6-15 */
    background:          -webkit-linear-gradient(top, rgba(245,245,162,1) 0%, rgba(255,255,200,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background:          linear-gradient(to bottom, rgba(245,245,162,1) 0%, rgba(255,255,200,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter:              progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
    box-shadow:          0px 0px 5px rgb(156, 145, 127);
  }
  ul.top-nav.responsive li.icon {
    position:            absolute;
    float:               right;
    display:             block;
    width:               60px;
    height:              40px;
    right:               0px;
    top:                 0px;
    margin:              0px;
    padding-left:        6px;
  }
  ul.top-nav.responsive li.icon a {
    float:               right;
    width:               100%;
    height:              21px;
    text-align:          center;
    padding:             10px;
    margin:              0px;
    box-shadow:          0px 0px 0px rgb(156, 145, 127);
  }
  ul.top-nav.responsive li.c-search {
    float:               none;
    display:             none;
  }
  nav.c-search {
    float:               left;
  }
}

@media screen and (max-width:1000px) {
  ul.top-nav li a, ul.top-nav.responsive li a:hover {
    height:              22px;
    line-height:         22px;
    padding-top:         10px;
  }
  ul.top-nav li.icon a, ul.top-nav li.icon a:hover {
    height:              22px;
    padding-top:         10px;
  }
  ul.top-nav.responsive li.icon a, ul.top-nav.responsive li.icon a:hover  {
    height:              22px;
    padding-top:         10px;
  }
}

@media screen and (max-width:550px) {
  ul.top-nav li a, ul.top-nav.responsive li a:hover {
    height:              26px;
    line-height:         26px;
    padding-top:         6px;
  }
  ul.top-nav li.icon a, ul.top-nav li.icon a:hover {
    height:              26px;
    padding-top:         6px;
  }
  ul.top-nav.responsive li.icon a, ul.top-nav.responsive li.icon a:hover  {
    height:              26px;
    padding-top:         6px;
  }
}

@media screen and (max-width:480px) {
  ul.top-nav.responsive li.c-search {
    float:               none;
    display:             inline;
  }
  ul.top-nav.responsive input.header-search-input {
    width:               calc(100% - 24px);
    height:              41px;

    background-position: 5px 6px;
    background-repeat:   no-repeat;
    background-size:     22px 22px;

    font-size:           1.2em;
    margin-top:          8px;
    padding-left:        32px;
  }
  ul.top-nav.responsive li.c-search form {
    margin-left:         0px;
    margin-bottom:       8px;
  }
  ul.top-nav.responsive li a {
    display:             block;
    text-align:          left;
    width:               100%;
    margin-bottom:       4px;
  }
  .top-menu {
    height:              58px;
    margin-bottom:       4px;
  }
  ul.top-nav {
    background-image:    url("../IMG/menubg.gif");
    background-repeat:   repeat-x;
    background-size:     2px 56px;
  }
  ul.top-nav li, ul.top-nav.responsive li {
    height:              54px;
    background:          url("../IMG/menubar.gif");
    background-repeat:   no-repeat;
    background-position: right top;
    background-size:     2px 56px;
  }
  ul.top-nav li a, ul.top-nav.responsive li a {
    height:              34px;
    line-height:         34px;
  }
  ul.top-nav li a:hover, ul.top-nav.responsive li a:hover {
    background:          none;
    height:              34px;
    line-height:         34px;
  }
  .top-menu {
    height:              100%;
  }
  .fa-bars::before {
    font-size:           1.8em;
  }
  ul.top-nav li.icon {
    height:              50px;
    padding-left:        16px;
    padding-top:         4px;
  }
  ul.top-nav li.icon a {
    padding-top:         4px;
    height:              34px;
    box-shadow:          0px 0px 0px rgb(156, 145, 127);
  }
  ul.top-nav.responsive li.icon {
    padding-top:         4px;
    height:              34px;
  }
  ul.top-nav.responsive li.icon a {
    padding-top:         4px;
    height:              34px;
    box-shadow:          0px 0px 0px rgb(156, 145, 127);
  }
}

@media screen and (max-width:480px) {
  ul.top-nav li a, ul.top-nav.responsive li a:hover {
    height:              34px;
    line-height:         34px;
    padding-top:         4px;
  }
  ul.top-nav li.icon a, ul.top-nav li.icon a:hover {
    height:              34px;
    padding-top:         4px;
  }
  ul.top-nav.responsive li.icon a, ul.top-nav.responsive li.icon a:hover  {
    height:              34px;
    padding-top:         4px;
  }
}

/* ####################################################### */

/* external css: flickity.css */

.carousel {
  background:            transparent;
}
.carousel-cell {
  height:                140px;
  width:                 250px;
  box-sizing:            border-box;
  border-radius:         5px !important;

  background-image:      url("../IMG/menubgH.gif");
  background-size:       2px 140px;

  float:                 left;
  cursor:                hand;
  border:                0;
  overflow:              none;
  margin-left:           0;
  margin-right:          4px;
  margin-top:            0;
  margin-bottom:         0;
  padding:               0;

  box-shadow:            0px 0px 0px rgb(156, 145, 127);
}
.carousel-cell:hover {
  background-color:      transparent;
  background:            rgb(245,245,162); /* Old browsers */
  background:            -moz-linear-gradient(top, rgba(245,245,162,1) 0%, rgba(255,255,200,1) 100%); /* FF3.6-15 */
  background:            -webkit-linear-gradient(top, rgba(245,245,162,1) 0%, rgba(255,255,200,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background:            linear-gradient(to bottom, rgba(245,245,162,1) 0%, rgba(255,255,200,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter:                progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */

  box-shadow:            0px 0px 5px rgb(156, 145, 127);
}

.carousel-d {
  display:               block;
  text-align:            left;
  height:                140px;
  color:                 white;
  box-sizing:            border-box;
  color:                 #1b1b1b;
  font-size:             12px;
  padding:               0;
  margin-left:           0;
  margin-right:          0;
  margin-top:            2px;
  margin-bottom:         2px;
  float:				         left;
}

.carousel-d.is-selected .carousel-cell {
  background:            rgb(245,245,162); /* Old browsers */
  background:            -moz-linear-gradient(top, rgba(245,245,162,1) 0%, rgba(255,255,200,1) 100%); /* FF3.6-15 */
  background:            -webkit-linear-gradient(top, rgba(245,245,162,1) 0%, rgba(255,255,200,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background:            linear-gradient(to bottom, rgba(245,245,162,1) 0%, rgba(255,255,200,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter:                progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
}

h1.service {
  position:              absolute;
  top:                   5px;
  left:                  10px;
  font-weight:           700;
  color:                 #009ee0;
  font-size:             12px;
  width:                 175px;
  margin:                0;
  padding:               0;
}
h2.service {
  position:              absolute;
  top:                   40px;
  left:                  10px;
  color:                 #9c9080;
  width:                 170px;
  height:                20px;
  font-size:             18px;
  margin:                0;
  padding:               0;
}
.service-next-line {
  display:               block;
  font-size:             18px;
}
p.service {
  width:                 228px;
  color:                 #005fa0;
  position:              absolute;
  top:                   88px;
  left:                  10px;
  font-size:             12px;
  margin:                0;
  padding:               0;
}
span.line-break {
  display:               inline;
}
span.line-break:before {
  content:               "\a ";
  white-space:           pre;
}
img.service {
  border:                0;
  position:              absolute;
  top:                   10px;
  left:                  165px;
}
img.service-more {
  border:                0;
  position:              relative
}

.flickity-viewport {
  width:                 100%;
}

.flickity-prev-next-button {
  width:                 60px;
  height:                140px;
  border-radius:         0px;
  background:            #333;
  opacity:               0.6;
  filter:                alpha(opacity=60); /* For IE8 and earlier */
  -webkit-box-shadow:    0px 0px 8px 0px rgba(0,0,0,0.75);
  -moz-box-shadow:       0px 0px 8px 0px rgba(0,0,0,0.75);
  box-shadow:            0px 0px 8px 0px rgba(0,0,0,0.75);
}
.flickity-prev-next-button:hover {
  background:            rgb(235,235,112);
}
.flickity-prev-next-button .arrow {
  fill:                  white;
}
.flickity-prev-next-button:hover .arrow {
  fill:                  rgb(100,100,100);
}
.flickity-prev-next-button.no-svg {
  color:                 rgb(165, 157, 138);
}
.flickity-prev-next-button.previous {
  left:                  0px;
}
.flickity-prev-next-button.next {
  right:                 0px;
}

@media screen and (max-width:380px) {
  .flickity-prev-next-button {
    width:                 50px;
  }
}
@media screen and (max-width:360px) {
  .flickity-prev-next-button {
    width:                 40px;
  }
}

/* ####################################################### */