/* HEADER */
header { position: fixed; width: 100%; height: 55px; background-color: rgba(37, 37, 37, 0.85); z-index: 101; }

/* HAMBURGER */
.hamburger { padding: 5px 5px; display: inline-block; cursor: pointer; transition-property: opacity, -webkit-filter; transition-property: opacity, filter; transition-property: opacity, filter, -webkit-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; outline: 0; }
.hamburger:hover { opacity: 0.7; }
.hamburger:focus { outline: 0; }
.hamburger-box { width: 30px; height: 24px; display: inline-block; position: relative; }
.hamburger-inner { display: block; top: 50%; margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 30px; height: 4px; background-color: #fff; border-radius: 0px; position: absolute; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; transition-duration: 0.15s; transition-timing-function: ease; }
.hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; }
.hamburger-inner::before { top: -10px; }
.hamburger-inner::after { bottom: -10px; }
.hamburger--spring .hamburger-inner { top: 2px; transition: background-color 0s 0.15s linear; }
.hamburger--spring .hamburger-inner::before { top: 10px; transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spring .hamburger-inner::after { top: 20px; transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spring.is-active .hamburger-inner { transition-delay: 0.32s; background-color: transparent; }
.hamburger--spring.is-active .hamburger-inner::before { top: 0; transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 10px, 0) rotate(45deg); transform: translate3d(0, 10px, 0) rotate(45deg); }
.hamburger--spring.is-active .hamburger-inner::after { top: 0; transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 10px, 0) rotate(-45deg); transform: translate3d(0, 10px, 0) rotate(-45deg); }
.hamburger--spring-r .hamburger-inner { top: auto; bottom: 0; transition-duration: 0.15s; transition-delay: 0s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spring-r .hamburger-inner::after { top: -20px; transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear; }
.hamburger--spring-r .hamburger-inner::before { transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spring-r.is-active .hamburger-inner { -webkit-transform: translate3d(0, -10px, 0) rotate(-45deg); transform: translate3d(0, -10px, 0) rotate(-45deg); transition-delay: 0.32s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--spring-r.is-active .hamburger-inner::after { top: 0; opacity: 0; transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.32s linear; }
.hamburger--spring-r.is-active .hamburger-inner::before { top: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1); }

/* MMENU */
.mm-menu { background: #00b5ed; background: -webkit-linear-gradient(135deg, rgba(0, 180, 235, 1) 10%, rgba(105, 190, 170, 1) 70%);
                                background: -o-linear-gradient(135deg, rgba(0, 180, 235, 1) 10%, rgba(105, 190, 170, 1) 70%);
                                background: -moz-linear-gradient(135deg, rgba(0, 180, 235, 1) 10%, rgba(105, 190, 170, 1) 70%);
                                background: linear-gradient(135deg, rgba(0, 180, 235, 1) 10%, rgba(105, 190, 170, 1) 70%); }
.mm-menu .mm-panels .mm-navbar { background: rgba(37, 37, 37, 0.6); height: 55px; padding-top: 8px; }
.mm-menu .mm-panels > .mm-panel.mm-hasnavbar { padding-top: 55px; }
.mm-menu .mm-next::after, .mm-menu .mm-prev::before { width: 14px; height: 14px; border-left-width: 4px; border-top-width: 4px; }
.mm-menu .mm-btn::after, .mm-menu .mm-btn::before { border-color: #fff; }
.mm-menu .mm-panels .mm-btn { margin-top: 9px; }
.mm-menu .mm-panels .mm-btn:hover { position: absolute; }
.mm-menu .mm-panels .mm-navbar a, .mm-menu .mm-panels .mm-navbar > * { color: #fff; font-family: 'Roboto'; font-weight: 900; font-size: 2.0rem; text-transform: uppercase; }
.mm-menu .mm-navbar-bottom { background: #fff; }
.mm-menu .mm-listview a:hover, .mm-menu .mm-listview a:focus, .mm-menu .dropdown-item:focus, .mm-menu .dropdown-item:hover { background-color: rgba(0, 0, 0, 0.1); }
.mm-menu .mm-listview > li > a, .mm-listview > li > span { color: #fff; font-family: 'Roboto'; font-weight: 900; font-size: 1.8rem; text-transform: uppercase; }
.mm-menu .mm-listview > li .mm-next::after { border-color: #fff; }
.mm-menu .mm-listview > li:not(.mm-divider)::after { left: 0; }
.mm-menu .mm-panels > .mm-panel.mm-justified-listview > .mm-listview > li:not(.mm-divider), .mm-menu.mm-justified-listview .mm-panels > .mm-panel > .mm-listview > li:not(.mm-divider) { max-height: 95px; }

/* HEADER */
#top-md { display: none; }
#top-xs .container-hamburger button { margin-top: 10px; margin-left: 10px; }
#top-xs .logo { text-align: center; margin-top: 10px; }
#top-xs .logo img { width: auto; height: 37px; }

.onclick-menu { position: relative; display: inline-block; }
.onclick-menu:before { content: "click me!"; }
.onclick-menu:focus { pointer-events: none; }
.onclick-menu:focus .onclick-menu-content { opacity: 1; visibility: visible; pointer-events: auto; }
.onclick-menu-content { position: absolute; z-index: 1; /* use opacity to fake immediate toggle */ opacity: 0; visibility: hidden; transition: visibility 0.5s; }

.language-switch { margin-top: 15px; padding-right: 25px; color: #fff; font-family: 'Roboto'; font-size: 1.6rem; font-weight: 700; text-transform: uppercase; }
.language-switch .dropdown .dropdown-toggle { cursor: pointer; color: #bbb; }
.language-switch .dropdown .dropdown-toggle:hover {color: #fff; }
.language-switch .btn { background-color: #fff; }
.language-switch .dropdown-menu { min-width: inherit; left: auto; right: -5px; background-color: rgba(37, 37, 37, 0.6); }
.language-switch .dropdown-item { color: #fff; font-size: 1.5rem; }
.language-switch .dropdown-item:hover { color: #333 }

/* FOOTER */
footer { background-color: #000; padding: 40px 0 20px 0; }
footer ul { list-style: none; margin: 0px; padding: 0 0 0 25px; }
footer .col { margin-bottom: 30px; }
footer .col-1 img { height: auto; margin: 5px 0 5px 0; }
footer .col-1 .a { width: 50px; }
footer .col-1 .asobo { width: 115px; }
footer .col-1a, footer .col-1b { display: inline-block; vertical-align: middle; width: 50%; }
footer .col-1b { border-left: 1px solid #808080; }
footer .col-1b a { color: #808080; font-size: 1.5rem; font-weight: 900; text-transform: uppercase; -webkit-transition: all 0.3s; transition: all 0.3s; } 
footer .col-1b a:hover, footer .col-1b a:focus  { color: #fff; } 

footer .col-3 ul { text-align: center; padding: 0; }
footer .col-3 ul li { display: inline-block; margin: 0 7px; }
footer .col-3 ul li i { color: #000; background-color: #fff; width: 32px; height: 32px; line-height: 3.2rem; border-radius: 50%; text-align: center; -webkit-transition: all 0.3s; transition: all 0.3s; }
footer .col-3 ul li i:hover { color: #fff; background-color: #00b5ed; }

footer .copyright, footer .legal a { color: #b0b0b0; font-size: 1.2rem; }

@media only screen and (min-width: 576px) {

}

@media only screen and (min-width: 768px) {
  header { height: 60px; }
  .nav-pills .nav-link.active, .nav-pills .nav-link.active:focus, .nav-pills .nav-link.active:hover, .nav-pills .nav-item.open .nav-link, .nav-pills .nav-item.open .nav-link:focus, .nav-pills .nav-item.open .nav-link:hover { background-color: transparent; }
  
  #top-xs { display: none; }
  
  #top-md { display: block; padding: 0; }
  #top-md .logo { float: left; margin: 12px 0 0 0; }
  #top-md .logo img { width: auto; height: 35px; }
  #top-md .menu { float: left; margin-left: 4%; display: inline-block; }
  #top-md .menu a { color: #fff; font-family: 'Roboto'; font-size: 1.4rem; }
  #top-md .menu .nav-item { height: 55px; margin: 0 5px; -webkit-transition: all 0.3s; transition: all 0.3s; }
  #top-md .menu .nav-item:hover, #top-md .menu .nav-item.open { border-bottom: 3px solid #00b5ed; height: 60px; }
  #top-md .menu .nav-link { padding: 5px 0; margin: 15px 5px 0 5px; font-weight: 700; text-transform: uppercase; }
  #top-md .menu .nav-itemafter { border-bottom: 2px solid #f00; }
  #top-md .menu .dropdown-menu { background-color: #00b5ed; border: none; }
  #top-md .menu .dropdown-item { color: #fff; }
  #top-md .menu .dropdown-item:focus, #top-md .menu .dropdown-item:hover { color: #00b5ed; }
  
  
  #top-md .social { display: block; float: right; list-style: none; margin-right: 15px; padding: 0; }
  #top-md .social li { display: inline-block; margin: 18px 2px 0 2px; }
  #top-md .social li a { color: #403f3d; background-color: #fff; width: 24px; height: 24px; line-height: 2.4rem; font-size: 1.6rem; border-radius: 50%; text-align: center; -webkit-transition: all 0.3s; transition: all 0.3s; }
  #top-md .social li a:hover { color: #fff; background-color: #00b5ed; }
  #top-md .language-switch { float: right; padding: 0; margin-top: 20px; font-size: 1.4rem; }
  #top-md .language-switch .dropdown-item { font-size: 1.4rem; }
  
  /* FOOTER */
  footer .col-1 img { margin: 8px 0 8px 0; }
  footer .col-1 .a { width: 70px; }
  footer .col-1 .asobo { width: 145px; }
  footer .col-1b li { margin-bottom: 5px; }
  footer .col-1b a { font-size: 1.6rem; } 
  footer .col-3 ul li i { width: 36px; height: 36px; line-height: 3.6rem; font-size: 1.8rem; }
}

@media only screen and (min-width: 768px) and (max-device-width: 991px) {
  header .container { width: 90%; padding-left: 0; padding-right: 0; }
}

@media only screen and (min-width: 992px) {
  #top-md .logo img { height: 38px; }
  #top-md .menu { margin-left: 70px; }
  #top-md .menu .nav-link { margin: 15px 10px 0 10px; }
  #top-md .social { margin-right: 20px; }
  #top-md .social li { margin-top: 18px; }
  #top-md .language-switch { margin-top: 22px; font-size: 1.2rem; }
  #top-md .language-switch .dropdown-item { font-size: 1.2rem; }

  /* FOOTER */
  footer .col-1 img { margin: 6px 0 6px 0; }
  footer .col-1 .a { width: 60px; }
  footer .col-1 .asobo { width: 135px; }
  footer .col-1b li { margin-bottom: 2px; font-size: 1.4rem; }
  footer .col-3 ul { margin-top: 80px; }
  footer .col-3 ul li { margin: 0 2px; }
  footer .col-3 ul li i { width: 30px; height: 30px; line-height: 3.1rem; font-size: 1.6rem; }
}

@media only screen and (min-width: 1200px) {
  
  #top-md .menu .nav-link { margin: 15px 12px 0 12px; }

}