/*
************************************************************
Styles:     flix//theme
************************************************************
*/

@media only screen and (min-width: 0px) and (max-width: 1000px) {

    .mobile {
        display: block;
    }

    .nomobile,
    .nav-site,
    .nav-meta,
    #sticky_navigation_wrapper,
    .aside-canvas,
    .katalog-info {
        display: none;
    }

    h1,
    h1 a {
        font-size: 26px;
    }

    #page {
        width: 100%;
        box-shadow: none;
    }

    .main-canvas {
        width: 94%;
        padding: 15px 3% 0 3%;
    }

    .content-canvas,
    .content-canvas.wide {
        width: 100%;
        padding: 0 0 30px 0;
    }

    .info-canvas {
        padding: 0;
        width: 100%;
    }

    .pagetype-standard .info-canvas {
        margin-top: 0;
    }


    /* *************************************************
    *** Head
    ************************************************* */
    #head {
        background: none;
        background-color: #fe9900;
        height: 70px;
    }

    .logo-wrapper {
        width: 200px;
    }

    #brandingLogo {
        display: none;
        width: 200px;
        height: 47px;
        background-size: 200px 47px;
    }

    #brandingTitle {
        float: left;
        margin: 4px 0 0 3%;
        margin-top: 10px !important;
    }

    #brandingTitle .black {
        font-size: 20px;
        line-height: 22px;
    }

    #brandingTitle .gray {
        font-size: 14px;
        line-height: 20px;
        color: #fff;
    }


    /* ******************************************
     ** Navigation
     ****************************************** */
    /* ********** nav mobile menue *********** */
    .navbutton {
        float: right;
        width: 40px;
        text-align: center;
        padding: 14px 0 0 0;
        cursor: pointer;
        color: #4F4940;
        margin-right: 3%;
    }

    .navbutton .ic_menue {
        display: block;
        height: 20px;
        width: 100%;
        background: url(/_images/ic_mobile_menue.png) center top no-repeat;
        background-size: 40px 84px;
    }

    .navbutton .text {
        margin-top: 3px;
        display: block;
        font-size: 14px;
    }

    .navbutton:hover span,
    .navbutton.active span {
        color: #ffffff;
        background-position: center bottom;
    }


    /* ********** nav1-mobile ********** */
    .nav1-mobile {
        float: left;
        width: 100%;
        display: none;
        font-size: 22px;
        background: #fe9900;
        list-style-type: none;
        margin: 0;
    }

    .nav1-mobile-item {
        float: left;
        width: 100%;
    }

    .nav1-mobile-item:first-child {
        display: none;
    }

    .nav1-mobile-link {
        float: left;
        min-height: 21px;
        width: 94%;
        color: #4F4940;
        padding: 12px 3% 12px 3%;
        display: block;
        border-radius: 0;
        text-align: left;
        text-decoration: none;
        font-size: 22px;
    }

    .nav1-mobile-item.opened {
        background: #ffffff;
    }

    .nav1-mobile-item.active .nav1-mobile-link {
        color: #ffffff;
    }

    .nav1-mobile-item.opened .nav1-mobile-link,
    .nav1-mobile-item.active.opened .nav1-mobile-link {
        color: #fe9900;
    }

    .nav1-mobile-item.active .subnav-nav-trigger span {
        background-position: right -44px;
    }

    .nav1-mobile-link.active {
        color: #fe9900;
    }

    .nav1-mobile-link.subnav,
    .nav1-mobile-link.subnav2 {
        float: left;
        width: 47%;
        padding: 12px 0 12px 3%;
    }

    .subnav-nav-trigger {
        float: left;
        padding: 12px 3% 12px 0;
        width: 47%;
        cursor: pointer;
    }

    .subnav-nav-trigger span {
        float: left;
        height: 21px;
        width: 100%;
        background: url(../_images/ic_subnav-trigger_1.png) right 5px no-repeat;
        background-size: 22px 107px;
    }

    .subnav-nav-trigger.opened span,
    .subnav-nav-trigger.active.opened span {
        background-position: right -92px;
    }


    .nav2-mobile {
        width: 100%;
        display: none;
        margin-left: 0;
        background-color: #ffffff;
    }

    .nav2-mobile-item {
        width: 100%;
        display: block;
    }

    .nav2-mobile-link {
        width: 94%;
        padding: 12px 3% 12px 3%;
        border-left: 0;
        color: #4F4940;
        display: inline-block;
        text-decoration: none;
        font-size: 18px;
    }

    .nav2-mobile-item.active .nav2-mobile-link {
        color: #fe9900;
    }

    .nav2-mobile-item.opened {
        background-color: #FFE3BB;
    }

    .nav2-mobile-item.opened .nav2-mobile-link {
        color: #4F4940;
    }

    .nav1-mobile .nav2-mobile .subnav-nav-trigger span {
        float: left;
        height: 21px;
        width: 100%;
        background: url(../_images/ic_subnav-trigger_2.png) right 5px no-repeat;
        background-size: 22px 107px;
    }

    .nav2-mobile-link.subnav {
        float: left;
        min-height: 21px;
        width: 47%;
        padding: 12px 0 12px 3%;
    }

    .nav2-mobile .subnav-nav-trigger.active span {
        background-position: right -44px;
    }

    .nav2-mobile .subnav-nav-trigger.opened span,
    .nav2-mobile .subnav-nav-trigger.active.opened span {
        background-position: right -92px;
    }


    .nav3-mobile {
        display: none;
        width: 100%;
        position: relative;
        background-color: #FFF7EA;
    }

    .nav3-mobile-item {
        width: 100%;
        display: block;
    }

    .nav3-mobile-link {
        width: 94%;
        padding: 12px 3% 12px 3%;
        border-left: 0;
        color: #4F4940;
        display: inline-block;
        text-decoration: none;
    }

    .nav3-mobile-link.active {
        color: #fe9900;
    }

    .nav2-mobile-item:hover .nav3 {
        display: none;
    }


    /* ********** Search-Mobile ********* */
    .searchbutton {
        float: right;
        width: 40px;
        display: block;
        margin: 14px 10px 12px 0;
        cursor: pointer;
    }

    .searchbutton .icon {
        display: block;
        width: 100%;
        height: 20px;
        background: url(/_images/ic_nav-search.png) center top no-repeat;
        background-size: 21px 100px;
    }

    .searchbutton .text {
        color: #67471c;
        text-align: center;
        margin-top: 3px;
        display: block;
        font-size: 14px;
    }

    .searchbutton.active .icon,
    .searchbutton.active .text {
        color: #ffffff;
        background-position: bottom;
    }

    #mobile-search {
        display: none;
        width: 94%;
        padding: 10px 3%;
        /*border-top: 3px solid #EF7F01;*/
        background-color: #fe9900;
    }

    #mobile-search input.searchform-word {
        width: 87%;
        height: 22px;
        padding: 4px 34px 4px 4px;
        border: 1px solid #ffffff;
        color: #90979e;
        font-family: Arial, sans-serif;
        font-size: 16px;
        background: url(/_images/ic_search.png) 98% 3px no-repeat #ffffff;
        background-size: 24px 118px;
    }

    #mobile-search input.searchform-word:focus {
        border: 1px solid #576471;
        color: #576471;
        background-position: 98% -91px;
    }


    /* *************************************************
   *** Footer
   ************************************************* */
    #footer {
        height: auto;
        width: 94%;
        padding: 20px 3% 100px 3%;
        margin: 0;
        background-color: #ff9700;
    }

    #footer .left {
        width: 100%;
    }

    #footer .right {
        float: left;
        margin-top: 15px;
    }

    #footer-socialmedia {
        margin: 0;
    }

    .nav-footer {
        padding-right: 0px;
        margin-top: 14px;
    }


    /* *************************************************
       *** Pageelements info
       ************************************************* */
    /* ********** twitter-widget ********* */
    #twitter-widget-0 {
        width: 100% !important;
    }


    /* ********** pageElement-image-info ********* */
    .pageElement-image-info .infobox-content {
        padding: 10px 0;
    }


    /* *************************************************
    *** Pageelements main
    ************************************************* */
    /* ********** news-teaser ********* */
    .news-index-box.mainteaser {
        margin: 0;
    }

    .news-index-box.mainteaser .teaser-image {
        width: 100%;
        height: auto;
        max-width: 570px;
        display: block;
        margin-bottom: 5px;
    }

    .news-index-content {
        width: 100%;
    }


    /* ********** events-detail ********* */
    .events-detail .mainimage,
    .news-detail .mainimage,
    .pageElement-image img,
    .events-detail .mainimage img {
        width: 100%;
        height: auto;
        max-width: 580px;
    }


    /* ********** events-detail ********* */
    .vor-ort-main .tabnav-item {
        float: none;
        margin: 0 0 3px 0;
    }

    .vor-ort-main #places-map {
        height: 250px;
    }

    .vor-ort-main .ort,
    .vor-ort-main .news,
    .vor-ort-main .link {
        width: 100%;
        padding: 0;
    }


    /* ********** googlemaps-main ********* */
    #googlemaps-main-mapcontainer {
        height: 250px;
    }


    /* List
    **************************************************************** */
    .list-text,
    .content-canvas.wide .list-text {
        display: block;
    }

    .content-canvas .list-image-wrapper,
    .content-canvas.wide .list-image-wrapper {
        display: block;
        float: none;
        margin-bottom: 5px;
    }


    /* **********  pageElement-overview-pages ********* */
    .overview-item .text-container.width-image,
    .overview-item .text-container.no-image {
        width: 100%;
    }


    /* ********** pageElement-gallery-main  ********* */
    .content-canvas.wide .list-text {
        width: 100%;
    }


    /* ********** news-detail ********* */
    .news-detail .image-container .info-image-box.relation {
        display: none;
    }


    /* ********** vor-ort-main ********* */
    .vor-ort-main .vor-ort-list-elem {

    }


    /* ********** contact form ********** */
    .contactform {
        margin-bottom: 50px;
    }

    .form-row label {
        width: 100%;
        margin: 0;
    }

    .form-row label[for='-1'],
    .form-row label[for='-2'] {
        width: 50px;
    }

    .form-row label[for='mitglied'] {
        width: 135px;
    }

    .form-row input[type='text'],
    .form-row input[type='password'] {
        width: 92%;
    }

    .form-row select {
        width: 97%;
    }

    label[for='optin_agb'] {
        width: 100%;
    }

    .form-row input[type='checkbox'] {
        float: left;
    }

    .plz-ort-input-wrapper {
        width: 100%;
    }

    .plz-input {
        width: 25%;
        margin-right: 2%;
    }

    .ort-input {
        width: 73%;
    }

    .plz-input .textbox {
        width: 77% !important;
    }

    .ort-input .textbox {
        width: 85% !important;
    }

    .defaultform textarea,
    .form-row textarea {
        width: 92%;
        max-width: none;
    }

    .button-submit {
        margin-left: 0;
    }

    .pageElement-contactform {
        width: 100%;
    }

    .ds-inhalt {
        width: 100%;
    }

    .ds-inhalt span {
        width: 90%;
    }

    .nomobile {
        display: none !important;
    }


    /* ***** Buchungsformular ***** */
    #formBuchung .box-buchung {
        width: 92%;
    }

    #formBuchung .info {
        margin-left: 0;
        width: 100%;
    }

    #formBuchung span.label {
        display: block;
    }

    #formBuchung .preise.small {
        display: block;
        width: 100%;
        margin-top: 3px;
    }

    #formBuchung .stern-info {
        margin-left: 0;
    }

    .angebotbutton.mobile {
        display: block;
    }


    #optout {
        width: 100%;
        height: 310px;
    }


    .header-bogen {
        display: none;
    }

    #brandingLogo-mobile {
        display: inline-block;
    }
}