@import url('https://fonts.googleapis.com/css?family=Open+Sans');
/* ------------- material icon ------------- */

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('/static/fonts/woff2/material-icon-font.woff2') format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

html {
    font-family: 'Open Sans', sans-serif;
}

body{
    margin: 0px;
}

button, body, table, tr, th, td, p, h1, h2, h3, h4, h5, h6, input, label, textarea, small, span, a, .highcharts-root{
	font-family: 'Open Sans', sans-serif;
}

a.material-icons, button.material-icons{
    font-family: 'Material Icons' !important;
}

:root{
    /*--mdc-theme-primary: #343434;*/
    --menu-hover-color: orange;
}

/* ------------- menu ------------- */

.my-menu{
    color: white;
    text-decoration: none;
    font-weight: bold;
    padding: 0px 3px;

    -webkit-transition: color 0.3s, border-color 0.9s;
    -moz-transition:    color 0.3s, border-color 0.9s;
    -ms-transition:     color 0.3s, border-color 0.9s;
    -o-transition:      color 0.3s, border-color 0.9s;
    transition:         color 0.3s, border-color 0.9s;
}

.my-menu.my-menu-active{
    border-bottom: 2px solid white;
}

.my-menu:hover{
    color: var(--menu-hover-color);
    border-color: var(--menu-hover-color);

    -webkit-transition: color 0.5s, border-color 0.5s;
    -moz-transition:    color 0.5s, border-color 0.5s;
    -ms-transition:     color 0.5s, border-color 0.5s;
    -o-transition:      color 0.5s, border-color 0.5s;
    transition:         color 0.5s, border-color 0.5s;
}

.my-menu-divider{
    padding: 0px 3px;
}

.my-menu-logo{
    vertical-align: middle;
    text-decoration: none;
    width: 32px;
    height: 32px;

}

.st0{
    fill: white;

    -webkit-transition: fill 0.5s;
    -moz-transition:    fill 0.5s;
    -ms-transition:     fill 0.5s;
    -o-transition:      fill 0.5s;
    transition:         fill 0.5s;
}

.logo-hover{
    fill: var(--menu-hover-color);

    -webkit-transition: fill 0.3s;
    -moz-transition:    fill 0.3s;
    -ms-transition:     fill 0.3s;
    -o-transition:      fill 0.3s;
    transition:         fill 0.3s;
}

@media (max-width: 480px){
    #horizontal-menu{
        display: none;
    }

    #vertical-menu-icon{
        display: initial;
    }

    #vertical-menu-title{
        display: initial;
    }

    .mdc-toolbar__section.mdc-toolbar__section--align-start{
        justify-content: flex-start;
    }
}

@media (min-width: 480px){
    #horizontal-menu{
        display: initial;
    }

    #vertical-menu-icon{
        display: none;
    }

    #vertical-menu-title{
        display: none;
    }

    .mdc-toolbar__section.mdc-toolbar__section--align-start{
        justify-content: center;
    }
}

.mdc-temporary-drawer__header-content{
    background-color: var(--mdc-theme-primary);
}

/* ------------- slider -------------*/
.rslides_tabs {
    margin: 0px;
    padding: 0px;
    text-align: center;
}

.rslides_tabs li {
    display: inline;
    float: none;
    _float: left;
    *float: left;
    margin-right: 5px;
}

.rslides_tabs a {
    text-indent: -9999px;
    overflow: hidden;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    background: #ccc;
    background: rgba(0,0,0, .2);
    display: inline-block;
    _display: block;
    *display: block;
    -webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
    -moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
    box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
    width: 9px;
    height: 9px;
}

.rslides_tabs .rslides_here a {
    background: #222;
    background: rgba(0,0,0, .8);
}

.caption {
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    text-align: center;
    background: #000;
    background: rgba(0,0,0, .8);
    color: #fff;
}

/* ------------- heading divider ------------- */
@media (max-width: 799px){
    h1.heading-divider {
        margin-top: 5px;
        color: #343434;
        position: relative;
        text-align: center;
        font-weight: bold;
    }

    h1.heading-divider span {
        background-color: white;
        padding: 0 15px;
        position: relative;
        z-index: 1;
    }

    /*
    h1.heading-divider:before {
        background: #343434;
        content: "";
        display: block;
        height: 3px;
        position: absolute;
        top: 50%;
        width: 100%;
    }

    h1.heading-divider:before {
        left: 0;
    }
    */
}

@media (min-width: 800px) {
    h1.heading-divider{
        margin-top: 5px;
        color: #343434;
        text-align: center;
    }

    h1.heading-divider span:before{
        display: inline-block;
        background: url('/static/img/general/divider-right.png');
        content: '';
        -webkit-background-size: 290px 40px;
        background-size: 290px 40px;
        width: 290px;
        height: 40px;
        vertical-align: middle;
    }

    h1.heading-divider:after{
        display: inline-block;
        background: url('/static/img/general/divider-left.png');
        content: '';
        -webkit-background-size: 290px 40px;
        background-size: 290px 40px;
        width: 290px;
        height: 40px;
        vertical-align: middle;
    }
}

/* ------------- contents -------------*/
.item-picture{
    background: url('/static/img/image-placeholder.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    height: 300px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;border-radius: 10px;
}