/*========================================
   < 1200px
=======================================*/
@media screen and (max-width: 1200px) {
    .content-big {
        width: 100%;
        box-sizing: border-box;
    }
}

/* ======================================
   > 1100px Navi
====================================== */
@media screen and (min-width: 1100px){
    #navi-main ul.nav {margin-right: 0 !important;}
    #navi-main ul.nav li:hover ul.nav-child { display: block !important; }
	#navi-main.scrolled ul.nav {margin: 18px 0 0 0;}
	#navi-main.scrolled ul.nav li a {color: #d99238;}
}
/*========================================
   < 1000px
=======================================*/
@media screen and (max-width: 1000px) {
    .content {
        box-sizing: border-box;
        padding: 0 20px;
    }

    .content-subsite {
        margin-top: -450px;
    }

    #content-top {
        box-sizing: border-box;
    }
    div.column-buffets {
        text-align: center;
    }

    .column-karten {
        text-align: center;
    }

    .column-gutschein {
        text-align: center;
    }

    .column-jobs {
        text-align: center;
    }

    .column-bilder {
        text-align: center;
    }

    .column-events {
        text-align: center;
    }

    .column-aktionen {
        text-align: center;
    }

    .aktionsbanner {
        float: none;
    }

    #plank-text {
        top: 840px;
        color: #3d1910;
    }

    #planke {
       background-image:  none;
        background-size: auto 100%;
        width: 100%;
        height: auto;
        overflow: hidden;
        padding-bottom: 38px;
        margin-top: 90px;
    }

    #planke .planke-banner {

        background-image:  url("../img/bg_planke2.png") ;
        background-size: auto 100%;
        width: 100%;
        height: auto;
        overflow: hidden;
        padding-bottom: 38px;
        position: relative;
        text-align: center;
        padding-top: 30px;
    }

    #zaun .planke-banner {
        background-size: auto 100%;
        width: 100%;
        height: auto;
        overflow: hidden;
        padding-bottom: 38px;
        position: relative;
        text-align: center;
        padding-top: 30px;
    }

    #plank-text h1,
    #plank-text h3 {
        color: #3d1910;
    }

    .pic-360-degree {
        width: 100%;
    }

    .mail {
        color: #3d1910 !important;
    }

    #restaurant-explanation-text .two-columns-left {
        padding: 0 0px 0 0 !important;
    }

    .mexican_hat {
        display: none;
    }

    .explanation_text_jobs {
        width: 100%;
        text-align: center;
        margin-top: 50px;
    }

    .button-bewirb-dich {
        display: inline-block;
    }

    .map_restaurants_jobs {
        display: none;
    }

    #jobs {
        text-align: center;
    }

    #background_jobs_purple {
        margin-top: 960px;
    }

    #container-rotated-pics {
        display: inline-block;
        margin: 0 auto;
    }

    .pic_jobs_1 {
        margin-top: 0px;
    }

    ul.sigFreeContainer {
        width: 100%;
        padding: 0 !important;
        margin: 0 !important;
    }

    #gutschein {
        background-size: 140% auto;
        height: auto;
        padding-top: 55%;
        background-position: top center;
        position: relative;
    }

    #gutschein p.desc {
        margin: 15px 0 30px 0;
        width: 100%;
        text-align: center;
    }

    #gutschein #buttons-gutschein {
        width: 100%;
        text-align: center;
        margin: 0;
    }

    #gutschein div.select-purple {
        position: absolute;
        top: 55%;
        right: 10%;
    }

    #gutschein div.select-purple div.styled-select-container {
        margin: 0;
    }

    #slider-highlights-schulanfang {
        display: none;
    }
}

/*========================================
    < 960px
======================================= */
@media screen and (max-width: 960px) {

    h2,
    .headline-footer {
        font-size: 30px;
        line-height: 36px;
    }

    .content {
        width: 100%;
        box-sizing: border-box;
    }

    #infos-footer {
        height: auto !important;
        box-sizing: border-box;
    }

    ul.sigFreeContainer,
    .three-columns-left,
    .three-columns-middle,
    .three-columns-right {
        width: 100% !important;
        text-align: center;
        float: none;
    }

    #plank-text {
        width: 100%;
    }

    .button_brown_plank a,
    a.button_brown_plank {
        display: inline-block;
        position: static;

    }

    div.three-columns-middle {
        margin-top: 20px;
    }

    div.three-columns-right {
        margin-top: 20px;
    }

    .pics {
        display: inline-block;
    }

    .mo-do {
        float: none;
    }

    .footer-restaurant {
        width: 50% !important;
    }

    .col-left-footer {
        width: 50%;
    }

    .col-right-footer {
        width: 50%;
    }

    #infos-footer-macarena {
        left: 0px;
    }

    .two-columns-left {
        padding: 0;
    }

    #OT_defList {
        padding-left: 0px;
    }

    #OT_logo {
        margin: 26px 0 0 0;
    }

    #reservieren-button-overlay {
        margin: 0 auto;
        position: relative;
        text-align: center;
        background-repeat: no-repeat;
    }

    #position-btn-reservieren {
        width: 100%;
        display: inline-block;
        text-align: center;
        margin-top: 20px;
    }

    .fliesstext-big {
        width: 100%;
        text-align: center;
    }

    .pics_buffets {
        width: 100%;
    }

    .fliesstext-position {
        margin-top: 50px;
    }

    #slider-highlights {
        width: 100%;
    }

    #map-restaurants {
        padding: 0 20px 70px 20px;
    }

    #amigo .amigo-gecko {
        top: 150px;
        right: 45px;
    }

    #pic_one_scale {
        display: none;
    }

    #pic_two_scale {
        display: none;
    }

    #map-restaurants img {
        width: 100%;
    }

    #teaser-content-start {
        height: auto;
    }

    #content-main-top{
        height: auto;
    }

    #mittagsangebot.kalender-2-col #angebot-mittagsbuffet-zeit {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }

    #mittagsangebot #angebot-mittagsbuffet-zeit {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }

    #mittagsangebot .content .container-kalender-inner {
         text-align: center;
    }

    .kalender-position {
        display: inline-block;
    }

    #mittagsangebot .content h5.headline-kalender {
        position: relative;
    }

    #btn_jobs_single {
        width: 100%;
    }
}

/*=======================================
    < 940px
====================================== */

@media screen and (max-width:940px){

    .two-columns-left {
        width: 100%;
        text-align: center;
        height: auto;
        margin-top: 40px;
    }

    .two-columns-right {
        width: 100%;
        text-align: center;
        height: auto;
        margin-top: 40px;
    }

    .two-columns-text {
        padding: 0;
    }

    #restaurant-explanation-text .two-columns-left {
        width: 100%;
        text-align: center;
        height: auto;
        margin-top: 0px;
        padding: 0;
    }

    #restaurant-explanation-text .two-columns-right {
        width: 100%;
        text-align: center;
        height: auto;
        margin-top: 40px;
        padding: 0;
    }

    .pic_rotate_left {
        transform: rotate(0deg);
    }

    .pic_rotate_right {
        transform: rotate(0deg);
    }

    .button_brown {
        margin: 15px auto 0px;
    }
}

/* ======================================
    < 900px
====================================== */

@media screen and (max-width: 900px) {
    #slider-highlights-surfboard {
        /* display: none; */
        position: absolute;
        left: -7%;
        width: 35%;
    }

    .wipping-plakat-surfboard {
        left: 30%;
    }
}

/* ======================================
   < 869px
====================================== */

@media screen and (max-width: 869px){

    #container-payment-footer {
        margin-top: 0px;
    }

    #container-payment-footer img{
        margin: 30px 5px 5px 5px;
    }

    .nav_menu {
        margin-top: -40px;
        display: inline-block;
        text-align: center;
    }

    #headline-footer {
        width: 100%;
        text-align: center;
    }

    #infos-footer .col-full-footer {
        padding-left: 0px !important;

    }

    .footer-restaurant {
        text-align: center;
    }

    .col-left-footer {
        width: 100% !important;
        text-align: center;
    }

    .more-info {
        width: 100% !important;
    }

    .col-right-footer {
        width: 100% !important;
        text-align: center;
    }
}


/*======================================
   < 820px
====================================== */

@media screen and (max-width: 820px){

    #OT_restaurantLbl {
        margin: 0 auto;
        text-align: center;
    }

    #OT_restaurant {
        margin: 0 auto;
        text-align: center;
    }

    #OT_partySizeLbl {
        margin: 0 auto;
        text-align: center;
    }

    #OT_partySize {
        margin: 0 auto;
        text-align: center;
    }

    #OT_dateLbl {
        position: unset;
        margin: 0 auto;
        text-align: center;
    }

    #OT_date {
        position: unset;
        margin: 0 auto;
        text-align: center;
    }

    #OT_timeLbl {
        position: unset;
        margin: 0 auto;
        text-align: center;
    }
    #OT_time {
        position: unset;
        margin: 0 auto;
        text-align: center;
    }

    #OT_submitWrap input {
        position: relative;
        right: auto;
        top: 10px;
        margin: 20px auto 0;
    }

    #reservierung div.styled-select-container {
        margin: 0 auto;
    }

    /* #reservierung {
        margin-top: 20px;
    } */

    #gutschein {
        margin-top: 20px;
    }

    #OT_defList {
        text-align: center;
    }


}

/*======================================
   < 800px
====================================== */

@media screen and (max-width: 800px){
    #container-rotated-pics {
        width: 100%;
    }

    .pic_jobs_1 {
        width: 80%;
        height: auto;
        padding-bottom: 50%;
        margin: 0 auto;
        background-size: cover;
        background-position: center;

        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    #content-jobs-select {
        margin-top: 0;
    }

    .pic_jobs_2{
        display: none;
    }

    div#fd.eb .eb-post-content .eb-post-head,
    div#fd.eb .eb-post-content .eb-post-body,
    div#fd.eb .eb-post-content .eb-tags,
    div#fd.eb .eb-post-content .eb-post-foot,
    div#fd.eb .eb-post-content .eb-post-rating {
        padding-left: 0;
        text-align: center;
    }

    div#fd.eb .col-cell {
        width: 100%;
        display: block;
    }

    div#fd.eb .eb-post-thumb.is-full{
        position: relative;
        top: 0;
        left: 0;
        margin: 0 auto;
    }

    div#fd.eb .eb-rating{
        float: none;
        text-align: center;
    }
}

/*=====================================
   < 797px
====================================== */

@media screen and (max-width: 797px) {

    .kalender-position {
        width: 329px;
    }

    table.kalender-mittagsangebot {
        margin: 35px 0 0px 0;
    }

    #mittagsbuffet-month {
        margin-top: 35px;
    }

    #mittagsangebot .content {
        padding: 65px 20px 15px;
    }
}

/*======================================
   < 780px
====================================== */

@media screen and (max-width: 780px){
    #container-tafel {
        position: relative;
        padding-left: 15%;
        display: block;
        box-sizing: border-box;
    }

    #container-tafel img {
        width: 100%;
    }

    #slider-highlights-rattle {
        display: none;
    }
}

/*======================================
   < 767px
====================================== */

@media screen and (max-width: 767px) {

    #map-restaurants .map-restaurants{
        display: none;
    }

    #map-restaurants {
        padding:0 0 10px;
    }

    #form-amigo .col-amigo {
        width: 100%;
    }

    #form-amigo .col-amigo input {
        margin: 0 auto;
    }

    #form-amigo .col-amigo .styled-select-container {
        margin: 0 auto;
    }

    .buttons-restaurants-low-res {
        display: block !important;
    }

    .row-fluid .span6 {
        margin-bottom: 25px;
    }

    .row-fluid .span6:last-child {
        margin-bottom: 0;
    }

    .mittagsbuffet-kategorie-container {
        width: 100%;
        float: none;
    }

    .mittagsbuffet-kategorie-headline {
        margin-top: 35px;
    }

    .angebot-mittagsbuffet-row {
        padding: 0 30px 0;
    }
}

/*======================================
   < 730px
====================================== */

@media screen and (max-width: 730px) {
    .headline_mitarbeiter {
        font-size: 45px;
    }

    .underline_mitarbeiter {
        margin-top: 20px;
    }
}


/*=======================================
   < 670px
====================================== */

@media screen and (max-width: 670px) {

    .job-single-content {
        text-align: center;
    }

    .jobs_text_details {
        width: 100%;
        float: none;
    }

    h3,
    .headline-3 {
        font-size: 24px;
        line-height: 28px;
    }
}

/*========================================
    < 660px
======================================== */

@media screen and (max-width: 660px) {
    #container-tafel {
        padding-left: 0;
    }

    #container-tafel #slider-highlights-bulletinboard-mobil {
        display: inline-block;
        width: 85%;
        margin-left: 18%;
    }

    #slider-highlights-bulletinboard-mobil {
        display: inline-block;
        width: 85%;
        margin-left: 18%;
    }

    #slider-highlights-bulletinboard{
        display: none;
    }

    #slider-highlights-surfboard {
        animation: none;
    }

    #slider-highlights-surfboard img {
        width: 100%;
        bottom: 0;
        position: absolute;
        left: 0;
        animation: none;
    }

    #slider-highlights-surfboard .surfboard-small {
        display: block;
    }

    #slider-highlights-surfboard .slider-large {
        display: none;
    }

    #slider-highlights-surfboard .wipping-plakat-surfboard {
        display: none;
    }
}

/*========================================
   < 650 px
======================================= */

@media screen and (max-width: 650px) {

    #subsites h1 {
        font-size: 40px;
        line-height: 50px;
    }

    .headline_jobs {
        font-size: 50px;
    }
}


/*========================================
   < 640px
======================================= */

@media screen and (max-width: 640px) {
    h1,
    .headline-1 {
        font-size: 32px;
        line-height: 34px;
    }

    .pics_buffets {
        width: 100% !important;
        height: auto !important;
    }

    ul.sigFreeClassic li.sigFreeThumb {
        width: 150px;
        height: 105px;
        border: 3px #fff solid;
    }
}



/*=======================================
   < 630px
====================================== */

@media screen and (max-width: 630px) {

    #reservierung-headline h1 {
        font-size: 40px;
        line-height: 0px;
    }

    #reservierung-headline img {
        margin-top: 30px;
    }
}


/* ======================================
   < 600px
======================================= */

@media screen and (max-width:600px) {

    #navi-main a.logo-lang {
        display: inline-block;

    }

    .headline_mitarbeiter {
        font-size: 35px;
        line-height: 40px;
    }

    .underline_mitarbeiter {
        margin-top: 5px 20px 0;
    }

    .two-columns-left-pic {
        width: 100%;
        margin-bottom: 100px;
    }

    .two-columns-right-pic {
        width: 100%
    }

    .jsn-master#jsn_form_1::before {
      background-size: 100%;
    }

    .jsn-master#jsn_form_2::before,
    .jsn-master#jsn_form_3::before {
        background-size: 100%;
    }

    .city_select_area {
        width: 100%;
        text-align: center;
        float: none;
        margin-top: 0;
    }

    .city_select_area .styled-select-container {
        float: none;
        display: inline-block;
        padding: 0;
    }

    .city_button_container {
        width: 100%;
        text-align: center;
        float: none;
        margin-top: 0;
        padding: 0;
    }

    div#fd.eb .eb-help-print {
        display: none !important;
    }

    #gutschein p.desc {
        margin: 15px 0 15px 0;
        font-size: 14px;
        line-height: 20px;
    }

    #gutschein div.select-purple {
        position: inherit;
        margin: 0 auto;
    }
}

/*======================================
   < 560px
====================================== */

@media screen and (max-width:560px) {

    .headline_jobs {
        font-size: 45px;
    }

    .pic-360-degree img.pic-360-degree {
        display: none;
    }

    .pic-360-degree #button-360-degree {
        height: 256px;
        width: 100%;
        float: left;
        text-align: center;
    }

    .pic-360-degree #button-360-degree .button-360-degree-position {
        display: inline-block;
        position: relative;
    }

}


/*=======================================
   < 530px
====================================== */

@media screen and (max-width:530px){

    /* #subsite-restaurant h1{
        font-size: 48px;
        line-height: 55px;
    } */

    .mittagsbuffet-kategorie-container ul {
        padding: 30px 0 0 0;
    }
}

/*=========================================
   < 510px
========================================= */

@media screen and (max-width:510px) {

    .headline_jobs {
        font-size: 40px;
    }
}


/*=========================================
   < 500px
========================================= */

@media screen and (max-width: 500px) {

    #subsites h1 {
        font-size: 30px;
        line-height: 40px;
    }
}

/*=========================================
   < 480px
========================================= */

@media screen and (max-width: 480px) {

    #reservierung-headline h1 {
        font-size: 35px;
        line-height: 0px;
    }
}

/* =========================================
   < 467px
========================================= */

@media screen and (max-width: 467px){

    /* #subsite-restaurant h1{
        font-size: 40px;
    } */

    .headline_jobs {
        font-size: 35px;
    }
}


/* ==========================================
   < 450px
========================================== */

@media screen and (max-width: 450px) {

    #content-top {
        height: 350px;
    }

    .content-subsite,
    #content-subsite-calender {
        margin-top: -250px;
    }

    #planke {
        margin-top: 40px;
    }

    .jobs_headline {
        font-size: 20px;
    }

    div#slider-arrow-right,
    div#slider-arrow-left {
        margin: -13px 0 0 0
    }

    .planke-banner {
        padding: 30px 0;
    }
}


/* ==========================================
   < 440px
========================================== */

@media screen and (max-width: 440px) {

    .footer-restaurant {
        width: 100% !important;
        float: none;
        text-align: center;
    }

    #headline-footer {
        width: 100%;
        text-align: center;
    }

    .button-360-degree-position {
        right: 0px;
    }

    div#fd.eb .eb-entry h1{
        font-size: 35px;
    }
}


/*===========================================
   < 415px
=========================================== */

@media screen and (max-width: 415px){

    #reservierung-headline h1 {
        font-size: 25px;
        line-height: 0px;
    }

    #reservierung-headline img {
        margin-top: 20px;
    }

    .headline_suchen {
        font-size: 34px;
        line-height: 55px;
    }

    .headline_jobs {
        font-size: 30px;
    }
}


/* ===========================================
   < 400px
============================================ */

@media screen and (max-width: 400px){
    h1,
    .headline-1 {
        font-size: 24px;
        line-height: 26px;
    }


    .position_planke {
        top: -100px;
    }

    #plank-text {
        top: 730px !important;
    }

    .two-columns-text h1{
        font-size: 30px;
    }

    #subsites h1 {
        font-size: 24px;
        line-height: 30px;
    }

    p.headline_text {
        font-size: 24px;
    }

    div#fd.eb .eb-entry h1{
        font-size: 26px;
    }

    div#fd.eb .eb-section-heading {
        font-size: 26px;
    }
}

/* ====================================================
  < 380px
====================================================== */

@media screen and (max-width: 380px) {

    .mittagsbuffet-kategorie-headline {
        font-size: 26px;
    }

    #mittagsangebot .content .container-kalender-inner {
        padding: 0;
    }
}


/* ====================================================
   < 360px
====================================================== */

@media screen and (max-width: 360px){
    .headline_jobs {
        font-size: 25px;
    }
}


@media screen and (max-width: 1120px){
    /* =====================================================
    NAVI TOUCH
    =====================================================  */
    #navi-main a.logo-lang img { position: absolute; width: auto; height: 60px; }
    #navi-main #open-navi-mobil { display: block; z-index: 10000; padding-right: 20px; }

    #navi-main #close-navi-mobil { display: block; }

    #navi-main ul.nav {
        z-index: 15000;
        margin: 0;
        position: fixed;
        right: 0;

        margin-right:-180%;
        top: 0;
        height: 100%;
        padding-bottom: 30%;
        width: auto;
        background-color: #d3db68;

        -webkit-box-shadow: 3px 0px 5px 4px rgba(0,0,0, 0.5);
        -moz-box-shadow:    3px 0px 5px 4px rgba(0,0,0, 0.5);
        -ms-box-shadow:     3px 0px 5px 4px rgba(0,0,0, 0.5);
        -o-box-shadow:      3px 0px 5px 4px rgba(0,0,0, 0.5);
        box-shadow:         3px 0px 5px 4px rgba(0,0,0, 0.5);

        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }

    #navi-main ul.nav li { float:none; display: block; text-align: center; margin:0; }
    #navi-main ul.nav li a { display: block; padding: 15px 40px; font-size: 24px; line-height: 32px; }
    #navi-main ul.nav li:nth-child(2n+1) { background-color: #bac05f;}

    /* NAVI INFO */
    #navi-main ul.nav li a.symbol-info,
    #navi-main ul.nav li a.symbol-whatsapp,
    #navi-main ul.nav li a.symbol-contact {
        font-size: 24px;
        width: auto;
        height: auto;
        background: transparent;
        float: none;
    }


    /* SUBMENU */
    #navi-main ul.nav li ul.nav-child {
        margin: 0;
        padding: 5px 0;
        display: none;
        position: relative;
        border-radius: 0;

        background-color: #d3db68;

        -webkit-box-shadow: inset 0px 0 5px rgba(0,0,0, 0.4);
        -moz-box-shadow: inset 0px 0 5px rgba(0,0,0, 0.4);
        box-shadow: inset 0px 0 5px rgba(0,0,0, 0.4);
    }

    #navi-main ul.nav li ul.nav-child li { background-color: transparent; }

    #navi-main ul.nav li ul.nav-child li a { font-size: 18px; line-height: 32px; }
    #navi-main ul.nav li ul.nav-child li:nth-child(2n+1) { background-color: #bac05f; }
    #navi-main ul.nav li:hover ul.nav-child li a { color: #fff; }

    /* für Whatsapp-Logo */
    /* #navi-main ul.nav li:last-of-type a {
        padding: 15px 40px 0;
    }

    #navi-main ul.nav li:last-of-type ul.nav-child {
        padding: 0;
        display:block;
        background-color: transparent;
    }

    #navi-main ul.nav li:last-of-type ul.nav-child li {
        background-color: #d3db68;
    }

    #navi-main ul.nav li:last-of-type ul.nav-child li a {
        padding: 0 40px;
    } */
}