/*
Theme Name:
Description:
Author: Jing Zhou | www.lk-service.com
Author URI: http://www.lk-service.com
Version: 1.0 // November 2015
*/


/* -------------------------------------------------------------------------------------- */
/* CSS STYLE TABLE OF CONTENT */
/* -------------------------------------------------------------------------------------- */
/*
- 1.0 Basic Styles/General Structure
- 2.0 Headings
- 3.0 Header
- 4.0 Navigation
--- 4.1 Parent Navigation Elements
--- 4.2 Child Navigation Elements
- 5.0 Main Content
- 6.0 Sidebar
- 7.0 Footer
- 8.0 Misc
*/

/* first for Internet Explorer */
@font-face {
    font-family: UnitWeb;
    src: url(fonts/UnitWeb-Bold.eot);
}
/* then for Firefox */
@font-face {
    font-family: UnitWeb;
    src: url(fonts/UnitWeb-Bold.woff) format('woff');
}


/* -------------------------------------------------------------------------------------- */
/* 1.0 Basic Styles/General Structure
/* -------------------------------------------------------------------------------------- */

body {
    font-family: Helvetica, Arial, Tahoma, sans-serif;
    font-size: 10px;
    font-size: 1.0rem;
}

#hintergrundMitte {
    font-size: 14px;
    font-size: 1.4rem;
}



/* -------------------------------------------------------------------------------------- */
/* 2.0 Headings
/* -------------------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    font-family: UnitWeb, Helvetica, Arial, Tahoma, sans-serif;
}


#main-content h1 {
    color: #fff;
}

/* -------------------------------------------------------------------------------------- */
/* 3.0 Header
/* -------------------------------------------------------------------------------------- */



/* -------------------------------------------------------------------------------------- */
/* 4.0 Navigation
/* -------------------------------------------------------------------------------------- */



/* -------------------------------------------------------------------------------------- */
/* 4.1 Parent Navigation Elements
/* -------------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------------- */
/* 4.2 Child Navigation Elements
/* -------------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------------- */
/* 5.0 Main Content
/* -------------------------------------------------------------------------------------- */

#hintergrundMitte.startseite {
    margin-top: -50px;
}

#main-content {
    padding-top: 10px;
}





/*===== AKTIONS-BOX ===== */

.aktion-box {
    background: #fff;
    margin-bottom: 20px;
}

.aktion-box  h2 {
    margin-top: 15px;
    color: #e63645;
    font-size: 28px;
}

.aktion-box a {
    color: inherit;
}

.aktion-box a:hover {
    color: #67AF1B;
}


/*===== REISEFINDER ===== */

#reisefinder {
    background: url('/images_4.0/basics/jugendtours-reisefinder-bg.gif') left top no-repeat;
    background-size: cover;
    margin-bottom: 0px;
    color: #fff;
}

#reisefinder h2 {
    margin-top: 15px;
}


/*====== GRAFIK MIT TITEL (OSTERN 2016, SOMMER 2016) ====== */

h2.zielgruppe-heading {
    color: #fff;
    text-transform: uppercase;
}

h2#osternH2, h2#herbstH2, h2#sommerH2, h2#silvesterH2, h2#winter{
    position: absolute;
    left: 30px;
    top: 15px;
    text-shadow: 3px 3px 2px rgba(000, 000, 000, 1);
}



/*====== ZEILE INFOBOX, WENN KEINE ZIELE UND CO VORHANDEN SIND ====== */

.infobox {
    padding: 10px 15px;
    color: #fff;
}

.infobox .subAbschnittSubTitle {
    color: #fff;
    text-decoration: none;
    margin-left: 25px;

}

.infobox .subAbschnittSubTitle:hover {
    color: #fff;
    text-decoration: none;
}

/*====== ZEILE REISEART, Z.B.: FERIENLAGER AB..." ====== */

.panel-group {
    margin-bottom: 0;
}

.panel-group .panel {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}

.panel-group .panel+.panel {
    margin-top: -1px;
}

.panel-heading {
    border-radius: 0;
}

h3.panel-title {
    text-transform: uppercase;
    margin-bottom: 10px;
    font-size: 21px;
    font-size: 2.1rem;
    color:#FFF;
}

h3.panel-title a {
    text-decoration: none;
}


.reiseart {
    cursor: hand;
}

.subAbschnittSubTitle {
    color: #fff;
    text-decoration: none;
    margin-left: 25px;
}

.subAbschnittSubTitle:hover {
    color: #1fa22e;
    text-decoration: none;
}

.subAbschnittSubTitle small {
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: bold;
}

.subAbschnittSubTitle i {
    font-size: 80%;
}


.spalteAngebot {
    padding-left: 0;
    padding-right: 0;
}

/* Panels > Plus (+) / Minus (-) Icons */

.panel-heading .accordion-toggle:after {
    font-family: FontAwesome;
    content: "\f068";
    float: right;
    color: #fff;
    margin-top: 12px;
}
.panel-heading .accordion-toggle.collapsed:after {
    content: "\f067";
}


/*===== Panels > Farbe: weinrot ===== */

.weinrot-collapse .panel-heading, .weinrot-collapse  .infobox {
    background: #9d1743;
    color: #fff;
}

.weinrot-collapse .ziel-zeile, .weinrot-collapse .spalteZiel, .weinrot-collapse .spalteAngebot{
    background: #A64263;
}

.weinrot-collapse  .ziel-reihe:hover  .spalteZiel, .weinrot-collapse .ziel-reihe:hover  .spalteAngebot, .weinrot-collapse .ziel-zeile:hover {
    background: #a12c53;
}

/*===== Panels > Farbe: orange ===== */


.orange-collapse .panel-heading, .orange-collapse  .infobox {
    background: #ED7F11;
    color: #fff;
}

.orange-collapse .ziel-zeile, .orange-collapse .spalteZiel, .orange-collapse .spalteAngebot{
    background: #F6A800;
}


.orange-collapse  .ziel-reihe:hover  .spalteZiel, .orange-collapse .ziel-reihe:hover  .spalteAngebot {
    background: #f19309;
}

/*===== Panels > Farbe: braun ===== */


.braun-collapse .panel-heading, .braun-collapse  .infobox {
    background: #402c1b;
    color: #fff;
}

.braun-collapse .ziel-zeile, .braun-collapse .spalteZiel, .braun-collapse .spalteAngebot{
    background: #514625;
}


.braun-collapse  .ziel-reihe:hover  .spalteZiel, .braun-collapse .ziel-reihe:hover  .spalteAngebot {
    background: #483920;
}

/*===== Panels > Farbe: graublau ===== */


.graublau-collapse .panel-heading, .graublau-collapse .infobox {
    background: #2e3e4b;
    color: #fff;
}

.graublau-collapse .ziel-zeile, .graublau-collapse .spalteZiel, .graublau-collapse .spalteAngebot{
    background: #514625;
}


.graublau-collapse  .ziel-reihe:hover  .spalteZiel, .graublau-collapse .ziel-reihe:hover  .spalteAngebot {
    background: #483920;
}


/*===== Panels > Farbe: winterblau ===== */


.winterblau-collapse .panel-heading, .winterblau-collapse .infobox {
    background: #83ccd3;
    color: #fff;
}

.winterblau-collapse .ziel-zeile, .winterblau-collapse .spalteZiel, .winterblau-collapse .spalteAngebot{
    background: #514625;
}


.winterblau-collapse  .ziel-reihe:hover  .spalteZiel, .winterblau-collapse .ziel-reihe:hover  .spalteAngebot {
    background: #483920;
}

/*===== Panels > panel-body ===== */

.spalte {
    padding-top: 5px;
    padding-bottom: 10px;
    height: 50px;
}

.ziel-reihe {
    cursor: pointer;
    font-weight: bold;
    color: #fff;
}


/* Spalte Ziel */

p.ziel-titel {
    margin-bottom: 0;
}

p.ziel-titel:hover {
    color: #1fa22e;
}



/* === Spalte Angebot === */


/* Auslastungspalte */

.spalteAuslastung {
    text-align: center;
    position: relative;
    right: -1px;
}

.plaetze-frei {
    /* Wenn noch verfĂ?gbare PlĂ?tze vorhanden sind */
    background: #009036;
    padding-top: 10px !important;
    font-size: 12px;
}



.plaetze-ausgebucht {
    /* Wenn ausgebucht ist */
    background: #900000;
    padding-top: 10px !important;
    font-size: 12px;
}

.plaetze-wenig {
    background: #facc00;
    padding-top: 10px !important;
    font-size: 12px;
}

@media screen and (min-width: 412px) and (max-width: 584px) {
    .plaetze-frei, .plaetze-wenig, .plaetze-ausgebucht {
        /* Wenn noch verfĂ?gbare PlĂ?tze vorhanden sind */
        padding-top: 10px !important;
        font-size: 9px;
        font-weight: normal;
    }   
}

/*==== Resvervierung einlösen ===== */

#reservierung h2 {
    background: transparent;
    border: 0;
    font-size: 21px;
    color: #1a1817;
}

input.greenSubmit  {
    background: #90bd10;
    color: #fff;
    text-transform: uppercase;
    padding: 4px 5px;
    font-size: 11px;
    font-size: 1.1rem;
    font-weight: bold;
    border: 0;
    border-radius: 2px;
}

input.greenSubmit:hover {
    background: #009038;
    color: #fff;
    text-decoration: none;

}

.fa-input {
    font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}



/* -------------------------------------------------------------------------------------- */
/* Unterseite eines Angebotes
/* -------------------------------------------------------------------------------------- */


h1#zielH1 {
    color: #1A1817;
}

#header-image {
    position: relative;

}

/* ===== ONLINE BUCHEN NUR DESKTOP ===== */



#buchenform-desktop {
    background: #85b713;
    background-image: url('/images_4.0/jugendreisen/assets/global-head.png'), -webkit-gradient(linear, left top, right top, from(#85b713), to(#69900f));
    background-position: right top;
    background-repeat: no-repeat;
    padding-top: 20px;
    padding-bottom: 4px;
    color: #fff;
    margin-bottom: 20px;
}

#buchenform-desktop h2 {
    font-size: 21px;
}

#buchenform-desktop select {
    padding: 0;
    height: 28px;
}

#buchen-button {
    padding-top: 6px;
}

#buchen-button a  {
    padding: 7px 7px;
}



/* ===== ONLINE BUCHEN NUR HANDY ===== */

#buchenform-mobile {
    background: #85b713;
    background-image: url('/images_4.0/jugendreisen/assets/global-head.png'), -webkit-gradient(linear, left top, right top, from(#85b713), to(#69900f));
    background-position: right top;
    background-repeat: no-repeat;
    padding-top: 20px;
    padding-bottom: 4px;
    color: #fff;
    margin-bottom: 20px;
}

#buchenform-mobile h2 {
    font-size: 21px;
}

#buchenform-mobile select {
    padding: 0;
    height: 28px;
}

#buchen-button {
    padding-top: 6px;
}

#buchen-button a  {
    padding: 7px 7px;
}

/* ===== LEISTUNGEN/FREIZEITMĂ?GLICHKEITEN NUR HANDY ===== */

.content-box-widget.orange {
    background: #f6a800;
    padding: 15px;
    color: #fff;
}
.content-box-widget.orange h2 {
    font-size: 21px;
}

#content-moeglichkeiten, #content-leistungen {
    margin-bottom: 20px;
}

#content-leistungen ul {
    margin: 0 0 0 15px;
    padding: 0;
}

#content-leistungen ul li:before {
    font-family: 'FontAwesome';
    content: '\f067';
    margin:0 5px 0 -13px;
    font-size: 80%;
}

#content-leistungen ul li {
    list-style-type: none;
}

/* ===== HIGHLIGHTS/PROGRAMM VOR ORT ===== */


#ziel-meta  {
    margin-bottom: 25px;
}

.ziel-meta-reihe {
    color: #000;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding-top: 10px;
    padding-left: 0;
    padding-right: 0;
}

.kurzinfo, .preisangabe {
    padding-left: 0;
    padding-right: 0;
}

#ziel-meta .preisangabe {
    text-align: right;
}


div.fliesstext {
    margin-bottom: 5px;
}

/* BILDERDATENBANK BOX */

#bilderdatenbank-box {
    position: relative;
    margin-bottom: 20px;
}

#bilderdatenbank-bg {
    position: absolute;
    padding-right: 10px;

}

#bilderdatenbank-icon img {
    width: auto;
}

#bilderdatenbank-link {
    padding-right: 30px;
}

#bilderdatenbank-link a {
    margin-top: 20px;
    display: inline-block;
}

#bilderdatenbank-box h3 {
    font-size: 23px;
    color: #fff;
    float: right;
    margin-top: 25px;
}

#bilderdatenbank-box h3 a {
    font-size: 23px;
    color: #fff;
    text-decoration: none;
    margin-top: 0;
}

#bilderdatenbank-box h3 a:hover {
    color: #90bd10;
    text-decoration: none;
}

a.jugendendtours-bilder-link {
    display: block;
    width: 100%;
}


/* PANELS // ACCORDION // ===== */

.ziel-panels {
    color: #fff;
}

.ziel-panels .ziel-panel-heading {
    padding: 15px;
}

.ziel-panels .panel-heading {
    padding-top: 20px;
    padding-bottom: 20px;
}

.ziel-panels .panel-heading h4.panel-title {
    color: #fff;
}

/* ICONS */

.ziel-panels .panel-heading h4.panel-title i {
    font-size: 80%;
}

.ziel-panels .panel-heading h4.panel-title small.plus-minus:after {
    font-family: FontAwesome;
    content: "\f067";
    color: #fff;
    float: right;
    position: relative;
    top: 5px;
}

.ziel-panels  .highlight-dropdown.active-highlight .panel-heading h4.panel-title small.plus-minus:after
{
    content: "\f068";
}


.ziel-panels  .highlight-dropdown.active-highlight .panel-heading, .ziel-panels  .highlight-dropdown.active-highlight .panel-heading:hover {
    background: #67af1b;
}

.ziel-panels  .highlight-dropdown.active-highlight .panel-heading {
    cursor: default;
}

.ziel-panels  .highlight-dropdown .panel-heading:hover {
    background: #8cbb0e;
}

.ziel-panels  .highlight-dropdown.active-highlight .panel-body {
    border-top: 0;
}

.ziel-panels .ziel-panel-heading, .ziel-panels .panel-heading, .ziel-panels .panel-default > .panel-heading {
    background: #b1c700;
}

.ziel-panels .panel-default > .panel-heading {
    border-color: #fff;
}

.ziel-panels  .panel {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}


.ziel-panels .panel-body {
    background: #67af1b;
    padding: 15px;
}

.ziel-panels ul.plus-icon-li {
    margin-bottom: 0px;
}

/* ===== WARUM BUCHEN ===== */

/* ===== warumS/PROGRAMM VOR ORT ===== */


#warum-meta  {
    margin-bottom: 25px;
}

.warum-meta-reihe {
    color: #000;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding-top: 10px;
    padding-left: 0;
    padding-right: 0;
}

.kurzinfo, .preisangabe {
    padding-left: 0;
    padding-right: 0;
}

#warum-meta .preisangabe {
    text-align: right;
}


div.fliesstext {
    margin-bottom: 5px;
}

/* PANELS // ACCORDION // ===== */

#warum-panels {
    color: #fff;
    margin-top: 20px;
    margin-bottom: 20px;
}

#warum-panels .warum-panel-heading {
    padding: 15px;
}

#warum-panels .panel-heading {
    padding-top: 20px;
    padding-bottom: 20px;
}

#warum-panels .panel-heading h4.panel-title {
    color: #fff;
}

/* ICONS */

#warum-panels .panel-heading h4.panel-title i {
    font-size: 80%;
}

#warum-panels .panel-heading h4.panel-title small.plus-minus:after {
    font-family: FontAwesome;
    content: "\f067";
    color: #fff;
    float: right;
    position: relative;
    top: 5px;
}

#warum-panels  .warum-dropdown.active-warum .panel-heading h4.panel-title small.plus-minus:after
{
    content: "\f068";
}


#warum-panels  .warum-dropdown.active-warum .panel-heading, #warum-panels  .warum-dropdown.active-warum .panel-heading:hover {
    background: #67af1b;
}

#warum-panels  .warum-dropdown.active-warum .panel-heading {
    cursor: default;
}

#warum-panels  .warum-dropdown .panel-heading:hover {
    background: #8cbb0e;
}

#warum-panels  .warum-dropdown.active-warum .panel-body {
    border-top: 0;
}

#warum-panels .warum-panel-heading, #warum-panels .panel-heading, #warum-panels .panel-default > .panel-heading {
    background: #b1c700;
}

#warum-panels .panel-default > .panel-heading {
    border-color: #fff;
}

#warum-panels  .panel {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}


#warum-panels .panel-body {
    background: #67af1b;
    padding: 15px;
}

a.default {
    color: blue;
    text-decoration: underline;
}


/* ===== DIESE REISE BUCHEN ===== */

#reise-online-buchen {

}

#reise-online-buchen .orange {
    padding-top: 20px;
}

.sommerkarte {    
    background: url('/images_4.0/jugendreisen/sommer/assets/sommer-karte-buchen.png') right top no-repeat #f6a800;
}

.herbstkarte {
    background: url('/images_4.0/jugendreisen/herbst/assets/herbst-karte-buchen.png') right top no-repeat #514625;
}

.winterkarte {
    background: url('/images_4.0/jugendreisen/winter/assets/winter-karte-buchen.png') right top no-repeat #83ccd3;
}

.silvesterkarte {
    background: url('/images_4.0/jugendreisen/silvester/assets/silvester-karte-buchen.png') right top no-repeat #2e3e4b;
}

.osternkarte {
    background: url('/images_4.0/jugendreisen/ostern/assets/ostern-karte-buchen.png') right top no-repeat #a64263;
}

#reise-online-buchen {
    color: #fff;
}

#reise-online-buchen h2{
    font-size: 28px;
    text-transform: uppercase;
}

#reisetermine {

}

.terminzeile {
    border-top: 1px solid #fff;
}


.terminzeile.hoversommer:hover {
    background: rgba(237,127,16,0.5);
}

.terminzeile.hoverherbst:hover {
    background: rgba(64,44,27,0.5);
}

.terminzeile.hoverwinter:hover {
    background: rgba(85,174,183,0.5);
}

.terminzeile.hoversilvester:hover {
    background: rgba(31,38,44,0.5);
}


.terminzeile .termin {
    padding-top: 0;
    padding-bottom: 0;
}


.termin-spalte {
    padding-top: 15px;
    padding-bottom: 15px;
}

.termin {
    text-align: center;
}

.termin h4, .termin h4 small {
    padding: 15px 0px 15px 0px;
    margin: 0;
    font-family: Helvetica, Arial, Tahoma, sans-serif;
    font-weight: bold;
    color: #fff;
}

.verfuegbarkeit {
    text-align: center;
    font-weight: bold;
    height: 70px;
}

.verfuegbarkeit p {
    margin-top: 10px;
}

select.abfahrsort-select, a.abfahrttermin-buchen {
    margin-top: 6px;
}


select.abfahrsort-select {
    padding: 0;
    width: 100%;
    float: left;
    font-size: 12px;
    height: auto;
    border-radius: 0;
    height: 25px;
}

a.abfahrttermin-buchen {
    margin-left: 10px;
    float: right;
}

/* ===== ZUSĂ?TZLICHE HINWEISE ===== */

#zusatz-hinweis {
    color: #fff;
    margin-bottom: 20px;
}

#zusatz-hinweis h2 {
    font-size: 21px;
}

.oliv {
    background: #4D5A2E;
    padding-top: 20px;
    padding-bottom: 10px;
}



/* -------------------------------------------------------------------------------------- */
/* 6.0 Sidebar
/* -------------------------------------------------------------------------------------- */
.aside-box {
    color: #fff;
    margin-bottom: 20px;
}
.aside-box-widget {
    padding-top: 0px;
}
.aside-box-widget h2, .aside-box-widget h3  {
    margin-top: 15px;
}


/*===== Link-Boxen /Unterkunft, interaktive Karte =====*/

.box-unterkunft  {
    display: block;
    background: url('images/21-06-k-jugendtours-jr.jpg') left top no-repeat transparent;
    height: 150px;
    margin-bottom: 20px;
}

.box-unterkunft:hover {
    text-decoration: none;
}

.box-unterkunft span.link-boxen-more  {
    position: absolute;
    bottom: 15px;
}

.box-unterkunft:hover span.link-boxen-more  {
    background: #009038;
}

.box-unterkunft:hover h2  {
    color: #90BD10;
}

.box-unterkunft  h2 {
    font-size: 21px;
    margin-top: 15px;
}


.box-interaktive-karte  {
    display: block;
    height: 150px;
    background: url('images/sommer-karte-interaktive.png') left top no-repeat #f6a800;
    margin-bottom: 20px;
}

.box-interaktive-karte:hover {
    text-decoration: none;
}

.box-interaktive-karte span.link-boxen-more  {
    position: absolute;
    top: 15px;
    right: 15px;
}

.box-interaktive-karte:hover span.link-boxen-more  {
    background: #009038;
}

.box-interaktive-karte:hover h2  {
    color: #90BD10;
}

.box-interaktive-karte   h2 {
    font-size: 21px;
    position: absolute;
    bottom: 0px;
}


span.link-boxen-more {
    background: #90bd10;
    color: #fff;
    text-transform: uppercase;
    padding: 4px 5px;
    font-size: 11px;
    font-size: 1.1rem;
    font-weight: bold;
}

span.link-boxen-more:after  {
    font-family: FontAwesome;
    content: "\f105";
    margin-left: 5px;
}





/*===== Empfehlen/Teilen =====*/

#sidebar-empfehlen h2 {
    font-size: 17px;
    text-align: center;
    background: #9aa815;
}

#sidebar-empfehlen {
    background: #9aa815;
}




.share {
    display: block;
    width: 100%;
    padding: 3px;
    background: #f00;
}

.share:hover {
    text-decoration: none;
}

.share i {
    margin-top: 2px;
    margin-left: 2px;
}

.share span {
    display: inline-block;
    position: relative;
    left: 6px;
    top: -5px;
}


.share-facebook {
    background: #3b5998;
}

.share-facebook:hover {
    background: #4273c8;
}

.share-whatsapp {
    background: #34af23;
}

.share-whatsapp:hover {
    background: #5cbe4a;
}

.share-twitter {
    background: #55acee;
}

.share-twitter:hover {
    background: #32bbf5;
}

.share-mail {
    background: #4682B4;
}

.share-mail:hover {
    background: #4682B4;
}

p.share-info  {
    margin-right: 15px;
}

/*===== Bewertungsbild =====*/

#sidebar-bewertungen .bewertung-bild h2  {
    position: absolute;
    top: 0px;
    left: 15px;
}

#sidebar-bewertungen .bewertung-bild .friendlyButton {
    position: absolute;
    bottom: 20px;
    right: 15px;
}

#sidebar-bewertungen .bewertung-bild .friendlyButton a {
    border-radius: 2px;
}



/*===== FAQ =====*/

#sidebar-faq {
    background: #67AF1B;
}

#sidebar-faq-heading h2 {
    font-size: 21px;
    font-size: 2.1rem;
    text-transform: uppercase;
}

#sidebar-faq-heading p {
    color: #185111;
    font-size: 12px;
}

.sidebar-faq-box {
    padding: /* 0 15px */ 15px;
}
.sidebar-faq-dropdown {
    background:#708445;
    border-top: 1px solid #67AF1B;
    border-bottom: 1px solid #67AF1B;
    margin-bottom: -1px;
}

.sidebar-faq-dropdown.active-faq {
    background:#4D5A2E;
}
.sidebar-faq-dropdown.active-faq .faq-dropdown-content{
    display:block;
    background:#4D5A2E;
    font-size: 12px;
    font-size: 1.2rem;
}

.faqToggler {
    /* padding-top: 15px; */
}


.sidebar-faq-box h3 {
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: bold;
    cursor: hand;
    margin-bottom: 0;
    min-height: 30px;
    font-family: Helvetica, Arial, Tahoma, sans-serif;
}


.faq-dropdown-content{
    display:none;
    background:#708445;
    padding-top: 15px;
}


/* PLUS / MINUS ICON */

.sidebar-faq-box small:after {
    font-family: FontAwesome;
    content: "\f067";
    color: #fff;
    float: right;

}
.sidebar-faq-dropdown.active-faq .sidebar-faq-box small:after {
    content: "\f068";
}

input[type=submit].buttonGreenLabel {
    border: 0px;
    margin: 6px;
}

input[type=submit].abfahrttermin-buchen.responsive-button {
    width: 100%;
    padding: 10px;
    background-color: transparent;
    border-width: 0px;
    font-size: 1.6em;
}

a.buttonGreenLabel, input[type=submit].buttonGreenLabel {
    background: #90bd10;
    color: #fff;
    text-transform: uppercase;
    padding: 4px 5px;
    font-size: 11px;
    font-size: 1.1rem;
    font-weight: bold;
}
a.buttonGreenLabel:hover, input[type=submit].buttonGreenLabel:hover {
    background: #009038;
    color: #fff;
    text-decoration: none;
}

a.buttonGreenLabel span.more:after  {
    font-family: FontAwesome;
    content: "\f105";
    margin-left: 5px;
}




/*===== Ferientermine =====*/



#sidebar-ferientermine {
    background: #c6dce5;
}
#sidebar-ferientermine  h3 {
    font-size: 21px;
    color: #395664;
    text-transform: uppercase;
}

select#ferienTermine {
    font-size: 11px;
    padding: 4px!important;
    height: auto;
}

#termine table {
    font-size: 12px;
    font-size: 1.2rem;
}

#termine table th, #termine table td {
    padding: 2px 0px;
    border: 0;
}

#termine table td {
    text-align: right;
}


/*===== Katalog bestellen =====*/

#sidebar-katalog {
    background: #397d7e;
}
#sidebar-katalog  .friendlyButton {
    margin-top: 15px;
}

#sidebar-katalog h3 {
    text-align: right;
    margin-top: 35px;
    margin-bottom: 20px;
}

/*===== Bilderdatenbank =====*/

#sidebar-bilderdatenbank {
    background: url('/images_4.0/jugendreisen/assets/bilddatenbank.png') left top no-repeat #397d7e;
}
#sidebar-bilderdatenbank  .friendlyButton {
    margin-top: 15px;
}

#sidebar-bilderdatenbank h3 {
    text-align: left;
    margin-top: 35px;
    margin-bottom: 20px;
}

#sidebar-bilderdatenbank span {
    text-transform: uppercase;
}

/*===== Betreuerportal =====*/

/* #sidebar-betreuerportal {
background: url('images/betreuerportal.jpg') left top no-repeat #397d7e;
} */
#sidebar-betreuerportal  .friendlyButton {
    position: absolute;
    left: 120px;
    bottom: 20px;
}


/*==== Resvervierung einlösen ===== */

#reservierung-sidebar h2 {
    background: transparent;
    border: 0;
    font-size: 21px;
    color: #1a1817;
}

input.greenSubmit  {
    background: #90bd10;
    color: #fff;
    text-transform: uppercase;
    padding: 4px 5px;
    font-size: 11px;
    font-size: 1.1rem;
    font-weight: bold;
    border: 0;
    border-radius: 2px;
}

input.greenSubmit:hover {
    background: #009038;
    color: #fff;
    text-decoration: none;

}

.fa-input {
    font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}


/* ===== BEWERTUNGEN ===== */

#bewertungen {
    margin-bottom: 25px;
    margin-top: 25px;
}

#bewertungen .bewertung-sterne {
    background: #96C4A2;
    color: #2F312E;
    padding: 20px;
    text-transform: uppercase;
    font-family: UnitWeb;
}

#bewertungen h3 {
    margin: 0;
    color: #facc00;
    text-shadow: 2px 2px 2px rgba(50, 50, 50, 1);
}

#bewertung-einleitung h2 {
    font-size: 21px;
}

#bewertungen .bewertung-sterne i {

}

#bewertungen .bewertung-body {
    background: #D0E1CE;
    padding: 20px;
    height: 400px;
}

.bewertung-body h2 a {
    color: #2F312E;
}

#bewertungen blockquote {
    padding: 0;
    margin: 0 0 21px;
    font-size: 15px;
    border-left: 0;
}

#bewertungen .kleingedruckt {
    color: rgba(47,49,46,.5);
    font-size: 12px;
}


/* ===== SIDEBAR UNTERSEITE ===== */

.aside-box.orange {
    background: #f6a800;
}

/* ===== LEISTUNGEN (SIDEBAR)===== */

#sidebar-leistungen {
    /** padding-top: px;**/     /*** jing hat pixelanzahl vergessen daher */
    padding-bottom: 20px;
}

#sidebar-leistungen h2 {
    font-size: 21px;
    font-size: 2.1rem;
}

#sidebar-leistungen ul {
    margin: 0 0 0 15px;
    padding: 0;
}

#sidebar-leistungen ul li:before, ul.plus-icon-li li:before {
    font-family: 'FontAwesome';
    content: '\f067';
    margin:0 5px 0 -13px;
    font-size: 80%;
}

#sidebar-leistungen ul li, ul.plus-icon-li li {
    list-style-type: none;
}

/* ===== MOEGLICHKEITEN (SIDEBAR)===== */
#sidebar-moeglichkeiten h2, #sidebar-warumbuchen h2 {
    font-size: 21px;
    font-size: 2.1rem;
}

/* -------------------------------------------------------------------------------------- */
/* 7.0 Footer
/* -------------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------------- */
/* 8.0 Misc
/* -------------------------------------------------------------------------------------- */


/* --------------------------------------------------------- */
/* 9.0 BOOTSTRAP GRID COLUMNS --------------------------- */
/* --------------------------------------------------------- */


/* ===== Col-xs and smaller ===== */

@media (max-device-width: 480px) and (orientation: landscape) {
    .spalteAuslastung {
        position: relative;
        right: 0;
        /* height: 37px; */
    }
    .spalte {
        padding-top: 10px;
        padding-bottom: 10px;
        height: 50px;
    }
}

@media (max-width: 767px) {
    .spalteAuslastung {
        /* Wenn noch verfĂ?gbare PlĂ?tze vorhanden sind */
        position: relative;
        right: 0;
        /* height: 37px; */
    }
    .spalte {
        padding-top: 10px;
        padding-bottom: 10px;
        height: 50px;
    }
}


/* ===== Col-sm ===== */

@media (min-width: 768px) and (max-width: 991px) {

}

/* ===== Col-sm and larger/wider ===== */


@media (min-width: 768px) {

}


/* ===== Col-md ===== */

@media (min-width: 992px) and (max-width: 1199px) {

}


/* ===== Col-md and larger/wider ===== */

@media (min-width: 992px) {

}

/* ===== Col-lg ===== */

@media (min-width: 1200px) {

}




/* --------------------------------------------------------- */
/* 9.1 MEDIA QUERIES ------------------------------------------- */
/* --------------------------------------------------------- */

/* --------------------------------------------------------- */
/* INFORMATION --- Version 1.1 --- 2012-VII-05 ------------- */
/* --------------------------------------------------------- */

/* ###

1.) Use e.g. "Respond.js" by Scott Jehl to enable responsive web designs in browsers that don't support CSS3 Media Queries (e.g. Internet Explorer 6, 7, 8) --> https://github.com/scottjehl/Respond/

2.) In this case, I use stages for all sizes. Between 1001 pixel and 1249 pixel the browser uses your basic-CSS. You can always delete some stages. After check the stages and adjust some min/max widths. (e.g. If you want to use only one stage for smartphones up to 320 width and one stage for smartphones and devices up to 960 pixel, delete the stages between and set the two new stages for a larger range.)

3.) If you think "Oh, the iPhone 4 has a 640x960 pixel display, so my stage needs only to fit on this in portrait and landscape orientation", it's a trap. The iPhone 4 has this resolution, but it uses only 320x480 pixel device-width. Or the Samsung Galaxy S2. It has a 480x800 pixel display --> 320x450 pixel and 320x508 pixel device-width in portrait orientation / 533x237 pixel in width and device-width in landscape orientation. // Quick Tip: "Tablet Computer - 150+ Display Measurements" --> http://www.designfalcon.com/#tablets

4.) Think about PNG-Fix for old IE (e.g. "jquery.pngFix.js" by Andreas Eberhard --> http://jquery.andreaseberhard.de/pngFix/), IE Background-Fix (e.g. "backgroundSize.js" by Louis Remi --> https://github.com/louisremi/jquery.backgroundSize.js) and last but noch least a emulator for CSS3 pseudo classes and attribut selectors for old IE (e.g. "Selectivizr.js" by Keith Clark --> http://selectivizr.com/).

5.) More information about "max-width" and "max-device-width": "max-width" refers to the actual viewport and can target specific sizes and orientations; "max-device-width" refers to the device viewport size, regardless of browser-scale, orientation or resizing. Shorthand: "max-width" (and "max-height") = target display area // "max-device-width" (and "max-device-height") = device entire rendering area. Same for "min" values.

6.) Thanks for your time! (: Andi "Licious" Wieser (Oh, you have some time left or further questions? --> andilicious.com // twitter.com/andiliciouscom // fb.com/andiliciouscom // pinterest.com/licious).

### */




/* --------------------------------------------------------- */
/* APPLE MACBOOK PRO RETINA ETC. --------------------------- */
/* --------------------------------------------------------- */

/* Retina Displays/Screens (2880x1800) --------------------- */
@media
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx) {
}




/* --------------------------------------------------------- */
/* SMARTPHONES, TABLETS & TINY DESKTOPS -------------------- */
/* --------------------------------------------------------- */

/* Old Smartphones (portrait and landscape) ---------------- */
@media
only screen and (min-device-width: 240px) and (max-device-width: 320px) {
    /* YOUR STYLES */
}


/* Old Smartphones (e.g. portrait) ------------------------- */
@media
only screen and (max-width: 319px) {
    /* YOUR STYLES */
}


/* Smartphones (portrait and landscape) -------------------- */
@media
only screen and (min-device-width: 320px) and (max-device-width: 640px) {
    /* YOUR STYLES */
}


/* Smartphones (portrait) & Old SP (landscape) ------------- */
@media
only screen and (min-width: 320px) and (max-width: 479px) {
    /* YOUR STYLES */
}


/* Smartphones (landscape) & Old Tablets (Portrait) -------- */
@media
only screen and (min-width: 480px) and (max-width: 639px) {
    /* YOUR STYLES */
}


/* Smartphones & Tablets (portrait & landscape) ------------ */
@media
only screen and (min-device-width: 640px) and (max-device-width: 960px) {
    /* YOUR STYLES */
}


/* Smartphones & Tablets (portrait) & Tiny Desktops -------- */
@media
only screen and (min-width: 640px) and (max-width: 799px) {
    /* YOUR STYLES */
}


/* Smartphones & Tablets (landscape) & Splitted Desktops --- */
@media
only screen and (min-width: 800px) and (max-width: 1000px) {
    /* YOUR STYLES */
}





/* --------------------------------------------------------- */
/* DEVICES BY RATIO ---------------------------------------- */
/* --------------------------------------------------------- */

/* LowRes (e.g. 240x320 / 320x480) ------------------------- */
@media
only screen and (min--moz-device-pixel-ratio: 0.75),
only screen and (-o-min-device-pixel-ratio: 3/4),
only screen and (-webkit-min-device-pixel-ratio: 0.75),
only screen and (min-device-pixel-ratio: 0.75),
only screen and (min-resolution: 0.75dppx) {
    /* YOUR STYLES */
}


/* HighRes ------------------------------------------------- */
@media
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 1.5dppx) {
    /* YOUR STYLES */

    /* e.g. HighRes Logo (use _2x as extension for double-sized images) */
    /* .logo {background-image: url(logo_2x.png); background-size: 50%;} */
}


/* RetinaRes Smartphones (e.g. iPhone 4 / portrait) -------- */
@media
only screen and (min--moz-device-pixel-ratio: 1.5) and (orientation: portrait),
only screen and (-o-min-device-pixel-ratio: 3/2) and (orientation: portrait),
only screen and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait),
only screen and (min-device-pixel-ratio: 1.5) and (orientation: portrait),
only screen and (min-resolution: 1.5dppx) and (orientation: portrait) {
    /* YOUR STYLES */
}


/* RetinaRes Smartphones (e.g. iPhone 4 / landscape) ------- */
@media
only screen and (min--moz-device-pixel-ratio: 1.5) and (orientation: landscape),
only screen and (-o-min-device-pixel-ratio: 3/2) and (orientation: landscape),
only screen and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape),
only screen and (min-device-pixel-ratio: 1.5) and (orientation: landscape),
only screen and (min-resolution: 1.5dppx) and (orientation: landscape) {
    /* YOUR STYLES */
}





/* --------------------------------------------------------- */
/* IPADS --------------------------------------------------- */
/* --------------------------------------------------------- */

/* iPads (portrait and landscape) -------------------------- */
@media
only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    /* YOUR STYLES */
}


/* iPads (portrait) ---------------------------------------- */
@media
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    /* YOUR STYLES */
}


/* iPads (landscape) --------------------------------------- */
@media
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    /* YOUR STYLES */
}


/* iPad Retina (iPad 3; portrait and landscape) ------------ */
@media
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (min-device-pixel-ratio: 2),
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (min-resolution: 2dppx) {
    /* YOUR STYLES */
}





/* --------------------------------------------------------- */
/* COMPUTERS / OTHER DEVICES ------------------------------- */
/* --------------------------------------------------------- */

/* Displays/Screens (e.g. MacBook @ 1280x800) -------------- */
@media
only screen and (min-width: 1250px) and (max-width: 1409px) {
    /* YOUR STYLES */
}


/* Displays/Screens (e.g. 19" WS @ 1440x900) --------------- */
@media
only screen and (min-width: 1410px) and (max-width: 1649px) {
    /* YOUR STYLES */
}


/* Displays/Screens (e.g. 22" WS @ 1680x1050) -------------- */
@media
only screen and (min-width: 1650px) and (max-width: 1889px) {
    /* YOUR STYLES */
}


/* Displays/Screens (e.g. 24" WS @ 1920x1080) -------------- */
@media
only screen and (min-width: 1890px) and (max-width: 2529px) {
    /* YOUR STYLES */
}


/* Really Large Displays/Screens (e.g. 2560x1440) ---------- */
@media
only screen and (min-width: 2530px) {
    /* YOUR STYLES */
}

@media screen and (min-width: 427px) {   
    .auslastungMobile {
        display: none;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .auslastung {
        display: none;        
    }

    .auslastungMobile {
        display: initial;
    }
}

@media screen and (max-width: 426px) {
    .auslastung {
        display: none;
    }

    .auslastungMobile {
        font-size: 9px;
    }    
}


div.alert-danger a {
    color: #005220;
}

.cookiebar {
    position: fixed;
    z-index: 1000001;
    width: 100vw;
    bottom: 0;
    padding: 10px 0;
    color: #666666;
    background-color: #fffdee;
    font-size: 9px;
    line-height: 10px;
}

.cookiebar a {
    color: #F29500;
    text-decoration: underline;
}

.cookiebutton {
    position: absolute;
    right: 10px;
    top: 0;
    color: white;
    background: #7ED321;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
}

#ziel-tab-bar {
    margin-bottom: 20px;
    margin-top: -91px;
}

@media (max-width: 380px) {
    #ziel-tab-bar {
        margin-top: 0px;
    }
}

#ziel-tab-bar>div {
    padding: 15px 0px 0px 0px;
}

#ziel-tab-bar>div.active-reise-tab {
    padding: 0px;
}

#ziel-tab-bar>div>a {
    display: block;
    background-color: #fff;
    color: #000;
    text-align: center;
    padding: 8px;
}

#ziel-tab-bar>div.active-reise-tab>a {
    background-color: rgb(216, 219, 26);
    font-weight: bold;
    padding: 23px 10px 8px 10px;    
}

.mj-faq-links a {
    color: #203932;
}

.panel-reiseart {
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
}

.panel-collapse+.panel-reiseart {
    margin-top: -1px;
}

#reservierung {
    margin-top: 20px;
}

#buchungsschritt-2-auswahl .panel-heading h2, #buchungsschritt-3-auswahl .panel-heading h2 {
    text-transform: uppercase;
}