@charset "utf-8";
/*-------------------------------------------*/
/*	#gMenu No.03（動きのあるメニュー）
/*-------------------------------------------*/

/*	Menuの数によって数字を変更　
/*      theme-optionsにて数字を取得して変更出来る様にする。
/*----------------------------------------------------*/
/*左寄席にしたい場合はここから*/
#gMenu .menu > li {
 width : calc(100% / 7) !important;/*数字変更 重要*/
 text-align:center !important;
 /*float:right !important;/*右寄席*/
}
 
#gMenu .menu > li.current_menu_item,
#gMenu .menu > li.current-menu-item,
#gMenu .menu > li.current-menu-ancestor,
#gMenu .menu > li.current_page_item,
#gMenu .menu > li.current_page_ancestor,
#gMenu .menu > li.current-page-ancestor {
 width : calc(100% / 7) !important;/*数字変更 重要*/
}
/*ここまでコメントアウト*/

/* タブレット縦画面になった時のメニューの設定 */ 
@media (max-width: 769px) { 
#gMenu .menu > li {
 width : 100% !important;
 text-align:center !important;
}
 
#gMenu .menu > li.current_menu_item,
#gMenu .menu > li.current-menu-item,
#gMenu .menu > li.current-menu-ancestor,
#gMenu .menu > li.current_page_item,
#gMenu .menu > li.current_page_ancestor,
#gMenu .menu > li.current-page-ancestor {
 width : 100% !important;
 }
 
#gMenu {
  /*display: none;*//* レスポンシブメニューを使用しない場合はコメントアウト */
}

 #gMenu .assistive-text span { 
 display:block;
 margin:5px 2% 0px 2%;/*--- 縮めた時のMENUの文字のmargin ---*/
 }
 
 #gMenu .menu li a { 
padding-left:10px;/*--- 縮めた時のMENUの文字のmargin ---*/
 }

#gMenu #gMenuInner {
 background-color: rgba( 192,210,210,0.85 ) ;/*スマホサイズになった時のメニューの背景色*/
 }

#gMenu .menu li:first-child a {/*縮めた時のメニューの左を角丸にしない*/
 border-radius:0px 0 0 0px !important;        /* CSS3草案 */  
 -webkit-border-radius:0px 0 0 0px !important;    /* Safari,Google Chrome用 */  
 -moz-border-radius:0px 0 0 0px !important;   /* Firefox用 */
}

#gMenu .menu li:last-child a {/*縮めた時のメニューの右を角丸にしない*/
 border-radius: 0 0px 0px 0 !important;        /* CSS3草案 */  
 -webkit-border-radius: 0 0px 0px 0 !important;    /* Safari,Google Chrome用 */  
 -moz-border-radius: 0 0px 0px 0 !important;   /* Firefox用 */
}

#gMenu .menu li:first-child a:hover {/*縮めた時のメニューの左を角丸にしない*/
 border-radius:0px 0 0 0px !important;        /* CSS3草案 */  
 -webkit-border-radius:0px 0 0 0px !important;    /* Safari,Google Chrome用 */  
 -moz-border-radius:0px 0 0 0px !important;   /* Firefox用 */
}

#gMenu .menu li:last-child a:hover {/*縮めた時のメニューの右を角丸にしない*/
 border-radius: 0 0px 0px 0 !important;        /* CSS3草案 */  
 -webkit-border-radius: 0 0px 0px 0 !important;    /* Safari,Google Chrome用 */  
 -moz-border-radius: 0 0px 0px 0 !important;   /* Firefox用 */
}

}

#gMenu {
 clear:both;
 display:block;
 overflow:visible;
 position:relative;
 width:100%;
  /* アニメーション */
 animation-name: fadeIn !important;
 -webkit-animation-name: fadeIn !important;
 -webkit-animation-duration:1s; /* ヘッダーなど下の要素とかさなるので数値に注意 */
 -webkit-animation-delay:0s;
 animation-duration:1s;
 animation-delay:0s;
}
 
#gMenu.itemClose .menu {
 display:none;/* 折り畳んだメニューが隠れる様に指定 */
}
 
#gMenu.itemOpen .menu {
 display:block;
}
 
#gMenu .assistive-text {
 display:block;
 overflow:hidden;
 position:relative;
 left:0px;
 font-weight:lighter;
 text-align:left;
 font-family:'Lato', sans-serif;
 cursor:pointer;
 /*background-color:#e5e5e5;*/
 border-top:1px;
}
 
#gMenu .assistive-text span {
 display:block;
 overflow:hidden;
 padding:8px 0px;
 /*width:94%;*/
 /*margin:0px 3%;*/
}
 
 #gMenu .screen-reader-text {
 position: absolute;
 left: -9000px;
}
 
#gMenu #gMenuInner {
 overflow:visible;
 display:block;
 position:relative;
 padding:0px;
}
 
#gMenu #gMenuInner.innerBox {
 margin:0px;
 width:100%;
}

#gMenu .menu {
 /**zoom: 1;*/
 display:block;
 overflow:visible;
 /*font-size: 13px;*/
 list-style: none;
 margin:0;
 padding:0px;
 /*border-top:1px solid #e5e5e5;*/
}

/*追加の為削除検討*/
#gMenu .menu:before, 
#gMenu .menu:after {
 content: "";
 display: table;
}

/*追加の為削除検討*/ 
#gMenu .menu:after {
 clear: both;
}

#gMenu .menu li {
position: relative;
 width:100%;
 display:block;
 /*float: left;*/
 /*margin: 0;*/
 /*padding: 0;*/
 /*text-align: center;*/
}

#gMenu .menu a {
font-size:25px;/*メニュー子メニュー孫メニューの全ての文字サイズ*/
 line-height: 40px; /*メニュー文字の上下中央寄せ メニューの幅により調整*/
}

/* メニュー子メニュー孫メニューの日本語文字サイズ */
#gMenu .menu .ja a {
font-size: 14px !important;/* メニュー設定でja指定 日本語の方が大きいので指定 */
}

/* メニュー子メニュー孫メニューの英語文字サイズ */
#gMenu .menu .en a {
font-size: 25px !important;/* メニュー設定でen指定 */
}

#gMenu .menu li a {
 display: block;
 overflow:hidden;
 height: 38px;
 /*padding: 6px 15px 3px;/*メニューの高さも調整 上 左右 下の順 上と下は3pxの差 初期値 11px 9px*/
 /*padding: 15px 0 11px;*/
 margin:0px;
 /*line-height:110%;*/
 /*line-height: 1;*/
 text-decoration: none;
 letter-spacing:0px;
 text-align:left;
 position:relative;
 /*border-bottom:1px solid #e5e5e5;*/
 font-family: 'Reenie Beanie', cursive !important;/*子メニューの文字タイプ 重要*/
 /*font-size:25px;*//*メニューの文字のサイズ　メニューの高さも変わるので調整*/
 font-weight:bolder;
 color:#666;/*子メニューの文字の色*/
 /*color: #fff;*/
 /*background: #8a9b0f;*/
}

#gMenu .menu li a strong {
 font-family: 'Reenie Beanie', cursive !important;/*メニューの文字タイプ 重要*/
 /*font-size:25px;*//*メニューの文字のサイズ　メニューの高さも変わるので調整*/
 font-weight:bolder;
 color:#666;/*メニューの文字の色*/
/*
normal   普通
bold     太字
bolder   相対的に文字を太くする
lighter  相対的に文字を細くする
100から900までの100単位の数値
*/
}
 
#gMenu .menu li a span {
 display: none;/* わからない 削除検討 */
}
 
#gMenu .menu > li.current_page_item > a,
#gMenu .menu > li.current-menu-item > a,
#gMenu .menu > li.current_page_ancestor > a,  
#gMenu .menu li.current_page_item > a,
#gMenu .menu li > a:hover {
 background-color:#f5f5f5;
/* color:#ccc; */
 /*border-radius: 5px;*//* CSS3草案 */  
 /*-webkit-border-radius: 5px;*//* Safari,Google Chrome用 */  
 /*-moz-border-radius: 5px;*//* Firefox用 */
}
 
#gMenu .menu li li span	{
 display:none;/* わららない 削除検討 */
}
 
#gMenu .menu li li a {
 padding-left:25px;
}
 
#gMenu .menu li li li a {
 padding-left:35px;
}
 
#gMenu .menu li li li li a {
 padding-left:45px;
}

/* ふわっとするメニュー */
/* ここから */
#gMenu * {
 -webkit-transition: 0.7s;
 -moz-transition: 0.7s;
 -ms-transition: 0.7s;
 -o-transition: 0.7s;
 transition: 0.7s;
}
/* ここまで */

/* ここから追加 */
#gMenu .menu li a {
  background-color: rgba( 192,210,210,0.85 ) ;/*メニューの背景色 重要*/
}

#gMenu .menu li:first-child a {/*メニューの左を角丸*/
 border-radius:5px 0 0 5px !important;        /* CSS3草案 */  
 -webkit-border-radius:5px 0 0 5px !important;    /* Safari,Google Chrome用 */  
 -moz-border-radius:5px 0 0 5px !important;   /* Firefox用 */
}

#gMenu .menu li:last-child a {/*メニューの右を角丸*/
 border-radius: 0 5px 5px 0 !important;        /* CSS3草案 */  
 -webkit-border-radius: 0 5px 5px 0 !important;    /* Safari,Google Chrome用 */  
 -moz-border-radius: 0 5px 5px 0 !important;   /* Firefox用 */
}

#gMenu .menu ul.sub-menu li:first-child a  {/* 子メニューの左の角丸をなくす */
 border-radius: 0px !important;        /* CSS3草案 */  
 -webkit-border-radius: 0px !important;    /* Safari,Google Chrome用 */  
 -moz-border-radius: 0px !important;   /* Firefox用 */
}

#gMenu .menu ul.sub-menu li:last-child a {/* 子メニューの右の角丸をなくす */
 border-radius: 0px !important;        /* CSS3草案 */  
 -webkit-border-radius: 0px !important;    /* Safari,Google Chrome用 */  
 -moz-border-radius: 0px !important;   /* Firefox用 */
}

#gMenu .menu li ul {
 list-style: none;
 position: absolute;
 z-index: 100;
 top: 100%;
 left: 0;
 /*transition: .2s;/* アニメーション */
 width: 100%;
 margin: 0;
 padding: 0;
}

#gMenu .menu li ul li {
 overflow: hidden;
 width: 100%;
 height: 0;
 color: #fff;
 /*transition: .5s;/* アニメーション */
}

#gMenu .menu li ul li a {
 /*padding: 13px 13px;*/
 /*background: #7c8c0e;*//* 子メニュー孫メニューの色 */
 /*text-align: left;*/
 /*font-size: 14px;*//* 子メニュー孫メニュー文字サイズ */
 /*font-weight: normal;*/
}

#gMenu .menu > li:hover > a {
/*background: #7c8c0e;*/
}

#gMenu .menu > li:hover li:hover > a {
  /*background: #6e7c0c;*/
}

#gMenu .menu li:hover > ul > li {
overflow: visible;
 height: 38px;/* 子メニューの高さ #gMenu .menu li aのheightと同じにする */
}

#gMenu .menu li ul li ul {
 top: 0;
 left: 100%;
 z-index:100;
}

#gMenu .menu li:last-child ul li ul {
 left: -100%;
 width: 100%;
}

#gMenu .menu li ul li ul li a {  
/*background: #616d0b;*/
}
 
#gMenu .menu li:hover ul li ul li:hover > a {
 /*background: #535d09;*/
}
 
#gMenu .menu li ul li ul:before {
 position: absolute;
 content: "";
 top: 13px;
 left: -20px;
 width: 0;
 height: 0;
 border: 5px solid transparent;
 /*border-left-color: #454e08;*/
}

#gMenu .menu li:last-child ul li ul:before {
 position: absolute;
 content: "";
 top: 13px;
 left: 200%;
 margin-left: -20px;
 /*border: 5px solid transparent;*/
 /*border-right-color: #454e08;*/
}

/* ここまで追加 */
/*-------------------------------------------*/
/* PC iPad3より大きい場合
/*-------------------------------------------*/
@media (min-width: 770px) {
#gMenu {
 border-top:none;
 border-bottom:none;
}
 
#gMenu:after {
 content: ".";
 display: block;
 clear: both;
 height: 0;
 visibility: hidden;
}

#gMenu #gMenuInner.innerBox {
 /*width:94%;*/
 /*margin:0px 3%;*/
}
 
#gMenu.itemClose .menu,
#gMenu.itemOpen .menu {
 display:block;
}

#gMenu .menu {
 /*border-left:1px solid #e5e5e5;*/
 /*border-top:none;*/
}
 
#gMenu .menu:after {
 content: ".";
 display: block;
 clear: both;
 height: 0;
 visibility: hidden;
}

#gMenu .assistive-text {
 position: absolute;
 top: -9000px;
} /* display:noneだと読み上げない / 横にオフセットするとIEで読み込みまでの間表示される */  

#gMenu .menu li a {
 border-bottom:none;
}
 
#gMenu .menu > li {
 float: left;
 width:auto;
 border-bottom:none;
 overflow:visible;
}
 
#gMenu .menu > li > a {
 text-align:center;
 /*border-right:1px solid #e5e5e5;*/
 border-bottom:none;
}
 
#gMenu .menu > li.current_page_ancestor > a {
 background-color:#f5f5f5;
}
 
#gMenu .menu > li > a span { /* わららない 削除検討 */
 display: block;
 font-size:10px;
 line-height:140%;
 letter-spacing:1px;
 font-family:verdana, Arial, Helvetica, sans-serif;
 color:#999;
}
 
#gMenu .menu > li ul {
 /*display:none;*//*tablet.cssにて指定*/
}

 #gMenu .menu li li a {
 padding-left:15px;
}
 
 #gMenu .menu li li li a {
 padding-left:15px;
}

#gMenu .menu li li li li a {
 padding-left:15px;
}

#gMenu .menu li:hover ul {
 display:block;
 position:absolute;
 z-index:100;
 border-top:1px solid #e5e5e5;
 position:absolute;
 width:calc(100% / 1) !important;
 box-shadow:1px 1px 3px rgba(0,0,0,0.2);
 opacity:0.97;
}

 #gMenu .menu li:hover li {
 background:#fff;
 /*border-bottom:1px solid #e5e5e5;*/
 width:calc(100% / 1) !important;
 position:relative;
}
 
/*子子メニューの幅*/
 #gMenu .menu li:hover ul li ul {
 position:absolute;
 left:calc(100% / 1) !important;
/*top:10px;*/
 border-top:none;
}
 
#gMenu .menu li:hover ul li ul,
#gMenu .menu li:hover ul li ul li {
 /*display:none;*//*tablet.cssにて指定*/
}
 
#gMenu .menu li:hover ul li:hover ul,
#gMenu .menu li:hover ul li:hover ul li	{
 display:block;
}
 
#gMenu .menu li:hover ul li:hover ul {
/*border-top:1px solid #e5e5e5;*/
 }
}/* @media (min-lwidth: 770px) ここまで */

/*-------------------------------------------*/
/*    フルサイズ (PCのみに指定したい場合はここ)
/*-------------------------------------------*/
@media (min-width: 1121px) { /* スクロール分の余裕を持たせたい場合は20pxプラスで指定 */
.innerBox,
#gMenu #gMenuInner.innerBox {
 width:1121px !important;/* コンテンツの全体の幅を決める */
 margin:0px auto;
 }
}/* @media (min-width: 950px) ここまで */

/* 追加 */
/* @media (max-width: 949px) */
/*------------------------------------------------------------------------------------------------*/
/*    縮小して949px以下（1px小さく設定）になった場合の設定 (PCで縮小した場合やiPadの縦画面やスマホに対応させる)
/*------------------------------------------------------------------------------------------------*/
@media (max-width: 1120px) { 

}
 
@media (max-width: 480px) { 
}
 
/* main-nav ここから */
ul#main-nav {
 width:950px;
 clear: both !important;
 margin: 0 !important;
 padding: 10px 10px 0px 10px !important;
 height: 35px !important;
 overflow: hidden !important;
 list-style-type: none;
}

ul#main-nav li {
 list-style-type: none !important;
 float: left !important;
 width: 13%;
 padding:0;
 margin:0;
 text-align:center;
}

ul#main-nav li a {
 font-family: 'Reenie Beanie', cursive !important;/*子メニューの文字タイプ*/
 font-size: 20px !important;
 display: block !important;
 width:auto !important;
 line-height: 35px !important;
 color: #fff !important;
 text-align: center !important;
 margin: 0 !important;
 text-shadow:0 -1px 0px #333,0 1px 0px #555;
 text-decoration:none !important;
 background-color: #333 !important;
}

ul#main-nav li a:hover {
 background-color: #555 !important;
 color: #fff !important;
}

ul#main-nav li:first-child a {
 border-radius:5px 0 0 5px;
 border-left:0;
 box-shadow:-1px 0px 0px rgba(225,225,225,0.3) inset,
            0px 1px 1px rgba(0,0,0,0.1) inset,
            0px -1px 1px rgba(0,0,0,0.3) inset,
            0px 1px 3px #666;
}

ul#main-nav li:last-child a {
 border-radius:0 5px 5px 0;
 box-shadow: 1px 0px 0px rgba(225,225,225,0.3) inset,
              0px 1px 1px rgba(0,0,0,0.1) inset,
              0px -1px 1px rgba(0,0,0,0.3) inset,
              0px 1px 3px #666;
}
/* main-nav ここまで */
@media (max-width: 1120px) {
ul#gallery-category-nav {
 width:auto !important;
 }
}

/*スマホのみ*/
@media screen and (max-width: 770px) {
#responsive-menu-button {
margin-top: -15px;
margin-right: -15px;
}

#responsive-menu-container #responsive-menu, #responsive-menu-container #responsive-menu ul {
margin-top: 5px;
margin-left: 10px;
margin-bottom: 5px;
 }
}

#responsive-menu-button, #responsive-menu-container {
  display: none;
  -webkit-text-size-adjust: 100%; }

@media screen and (max-width: 770px) {
  #responsive-menu-container {
    display: block; }

  #responsive-menu-container {
    position: fixed;
    top: 0;
    bottom: 0;
    /* Fix for scroll bars appearing when not needed */
    z-index: 99998;
    padding-bottom: 5px;
    margin-bottom: -5px;
    overflow-y: auto;
    overflow-x: hidden; }
    #responsive-menu-container .responsive-menu-search-box {
      width: 100%;
      padding: 0 2%;
      border-radius: 2px;
      height: 50px;
      -webkit-appearance: none; }
    #responsive-menu-container.push-left, #responsive-menu-container.slide-left {
      transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
      -moz-transform: translateX(-100%); }
      .responsive-menu-open #responsive-menu-container.push-left, .responsive-menu-open #responsive-menu-container.slide-left {
        transform: translateX(0);
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0); }
    #responsive-menu-container.push-top, #responsive-menu-container.slide-top {
      transform: translateY(-100%);
      -ms-transform: translateY(-100%);
      -webkit-transform: translateY(-100%);
      -moz-transform: translateY(-100%); }
      .responsive-menu-open #responsive-menu-container.push-top, .responsive-menu-open #responsive-menu-container.slide-top {
        transform: translateY(0);
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0); }
    #responsive-menu-container.push-right, #responsive-menu-container.slide-right {
      transform: translateX(100%);
      -ms-transform: translateX(100%);
      -webkit-transform: translateX(100%);
      -moz-transform: translateX(100%); }
      .responsive-menu-open #responsive-menu-container.push-right, .responsive-menu-open #responsive-menu-container.slide-right {
        transform: translateX(0);
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0); }
    #responsive-menu-container.push-bottom, #responsive-menu-container.slide-bottom {
      transform: translateY(100%);
      -ms-transform: translateY(100%);
      -webkit-transform: translateY(100%);
      -moz-transform: translateY(100%); }
      .responsive-menu-open #responsive-menu-container.push-bottom, .responsive-menu-open #responsive-menu-container.slide-bottom {
        transform: translateY(0);
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0); }
    #responsive-menu-container, #responsive-menu-container:before, #responsive-menu-container:after, #responsive-menu-container *, #responsive-menu-container *:before, #responsive-menu-container *:after {
      box-sizing: border-box;
      margin: 0;
      padding: 0; }
    #responsive-menu-container #responsive-menu-search-box, #responsive-menu-container #responsive-menu-additional-content, #responsive-menu-container #responsive-menu-title {
      padding: 25px 5%; }
    #responsive-menu-container #responsive-menu, #responsive-menu-container #responsive-menu ul {
      width: 100%; }
      #responsive-menu-container #responsive-menu ul.responsive-menu-submenu {
        display: none; }
        #responsive-menu-container #responsive-menu ul.responsive-menu-submenu.responsive-menu-submenu-open {
          display: block; }
      #responsive-menu-container #responsive-menu ul.responsive-menu-submenu-depth-1 a.responsive-menu-item-link {
        padding-left: 10%; }
      #responsive-menu-container #responsive-menu ul.responsive-menu-submenu-depth-2 a.responsive-menu-item-link {
        padding-left: 15%; }
      #responsive-menu-container #responsive-menu ul.responsive-menu-submenu-depth-3 a.responsive-menu-item-link {
        padding-left: 20%; }
      #responsive-menu-container #responsive-menu ul.responsive-menu-submenu-depth-4 a.responsive-menu-item-link {
        padding-left: 25%; }
      #responsive-menu-container #responsive-menu ul.responsive-menu-submenu-depth-5 a.responsive-menu-item-link {
        padding-left: 30%; }
      #responsive-menu-container #responsive-menu ul.responsive-menu-submenu-depth-6 a.responsive-menu-item-link {
        padding-left: 35%; }
    #responsive-menu-container li.responsive-menu-item {
      width: 100%;
      list-style: none; }
      #responsive-menu-container li.responsive-menu-item a {
        width: 100%;
        display: block;
        text-decoration: none;
        padding: 0 5%;
        position: relative; }
        #responsive-menu-container li.responsive-menu-item a .fa {
          margin-right: 15px; }
        #responsive-menu-container li.responsive-menu-item a .responsive-menu-subarrow {
          position: absolute;
          right: 0;
          top: 0;
          bottom: 0;
          text-align: center;
          overflow: hidden; }
          #responsive-menu-container li.responsive-menu-item a .responsive-menu-subarrow .fa {
            margin-right: 0; }

  .responsive-menu-button .responsive-menu-button-icon-inactive {
    display: none; }

  #responsive-menu-button {
    z-index: 99999;
    display: none;
    overflow: hidden; }
    #responsive-menu-button img {
      max-width: 100%; }

  .responsive-menu-label {
    display: inline-block;
    font-weight: 600;
    margin: 0 5px;
    vertical-align: middle; }

  .responsive-menu-accessible {
    display: inline-block; }

  .responsive-menu-accessible .responsive-menu-box {
    display: inline-block;
    vertical-align: middle; }

  .responsive-menu-label.responsive-menu-label-top, .responsive-menu-label.responsive-menu-label-bottom {
    display: block;
    margin: 0 auto; } }
@media screen and (max-width: 770px) {
  /*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
  /*
   * Boring
   */
    .responsive-menu-button {
      padding: 0 0;
      display: inline-block;
      cursor: pointer;
      transition-property: opacity, filter;
      transition-duration: 0.15s;
      transition-timing-function: linear;
      font: inherit;
      color: inherit;
      text-transform: none;
      background-color: transparent;
      border: 0;
      margin: 0;
      overflow: visible; }
      .responsive-menu-button:hover {
        opacity: 1; }
    .responsive-menu-box {
      width: 25px;
      height: 19px;
      display: inline-block;
      position: relative; }
    .responsive-menu-inner {
      display: block;
      top: 50%;
      margin-top: -1.5px; }
      .responsive-menu-inner, .responsive-menu-inner::before, .responsive-menu-inner::after {
        width: 25px;
        height: 3px;
        background-color: #fff;
        border-radius: 4px;
        position: absolute;
        transition-property: transform;
        transition-duration: 0.15s;
        transition-timing-function: ease; }
      .responsive-menu-inner::before, .responsive-menu-inner::after {
        content: "";
        display: block; }
      .responsive-menu-inner::before {
        top: -8px; }
      .responsive-menu-inner::after {
        bottom: -8px; }
    .responsive-menu-boring .responsive-menu-inner, .responsive-menu-boring .responsive-menu-inner::before, .responsive-menu-boring .responsive-menu-inner::after {
      transition-property: none; }
      .responsive-menu-boring.is-active .responsive-menu-inner {
        transform: rotate(45deg); }
        .responsive-menu-boring.is-active .responsive-menu-inner::before {
          top: 0;
          opacity: 0; }
        .responsive-menu-boring.is-active .responsive-menu-inner::after {
          bottom: 0;
          transform: rotate(-90deg); }
    .responsive-menu-button {
      width: 55px;
      height: 55px;
      background: #000;
      position: fixed;
      top: 15px;
      right: 5%; }
      .responsive-menu-button:hover {
        background: #000; }
      .responsive-menu-button .responsive-menu-box {
        color: #fff; }
    .responsive-menu-label {
      color: #fff;
      font-size: 14px;
      line-height: 13px; }
    #responsive-menu-button {
      display: inline-block;
      transition: transform 0.5s, background-color 0.5s; } }
@media screen and (max-width: 770px) {
  #responsive-menu-container {
    width: 50%;
    left: 0;
    background: #212121;
    transition: transform 0.5s;
    text-align: left; }
    #responsive-menu-container #responsive-menu-wrapper {
      background: #212121; }
    #responsive-menu-container #responsive-menu-additional-content {
      color: #fff; }
    #responsive-menu-container .responsive-menu-search-box {
      background: #fff;
      border: 2px solid #dadada;
      color: #333; }
      #responsive-menu-container .responsive-menu-search-box:-ms-input-placeholder {
        color: #c7c7cd; }
      #responsive-menu-container .responsive-menu-search-box:-webkit-input-placeholder {
        color: #c7c7cd; }
      #responsive-menu-container .responsive-menu-search-box:-moz-placeholder {
        color: #c7c7cd;
        opacity: 1; }
      #responsive-menu-container .responsive-menu-search-box::-moz-placeholder {
        color: #c7c7cd;
        opacity: 1; }
    #responsive-menu-container .responsive-menu-item-link, #responsive-menu-container #responsive-menu-title, #responsive-menu-container .responsive-menu-subarrow {
      transition: background-color 0.5s, border-color 0.5s; }
    #responsive-menu-container #responsive-menu-title {
      background-color: #212121;
      color: #fff;
      font-size: 13px; }
      #responsive-menu-container #responsive-menu-title a {
        color: #fff;
        text-decoration: none; }
        #responsive-menu-container #responsive-menu-title a:hover {
          color: #fff; }
      #responsive-menu-container #responsive-menu-title:hover {
        background-color: #212121;
        color: #fff; }
        #responsive-menu-container #responsive-menu-title:hover a {
          color: #fff; }
      #responsive-menu-container #responsive-menu-title #responsive-menu-title-image {
        display: inline-block;
        vertical-align: middle;
        margin-right: 15px; }
    #responsive-menu-container #responsive-menu li.responsive-menu-item .responsive-menu-item-link {
      font-size: 13px; }
      #responsive-menu-container #responsive-menu li.responsive-menu-item a {
        line-height: 40px;
        border-top: 1px solid #212121;
        border-bottom: 1px solid #212121;
        color: #fff;
        background-color: #212121; }
        #responsive-menu-container #responsive-menu li.responsive-menu-item a:hover {
          color: #fff;
          background-color: #3f3f3f;
          border-color: #212121; }
          #responsive-menu-container #responsive-menu li.responsive-menu-item a:hover .responsive-menu-subarrow {
            color: #fff;
            border-color: #fff;
            background-color: #3f3f3f; }
        #responsive-menu-container #responsive-menu li.responsive-menu-item a .responsive-menu-subarrow {
          height: 40px;
          line-height: 40px;
          width: 40px;
          color: #fff;
          border-left: 1px solid #212121;
          background-color: #212121; }
          #responsive-menu-container #responsive-menu li.responsive-menu-item a .responsive-menu-subarrow:hover {
            color: #fff;
            border-color: #fff;
            background-color: #3f3f3f; }
      #responsive-menu-container #responsive-menu li.responsive-menu-item.responsive-menu-current-item > .responsive-menu-item-link {
        background-color: #212121;
        color: #fff;
        border-color: #212121; }
        #responsive-menu-container #responsive-menu li.responsive-menu-item.responsive-menu-current-item > .responsive-menu-item-link:hover {
          background-color: #3f3f3f;
          color: #fff;
          border-color: #3f3f3f; } }