/* ----------------------------------------------------------------------------------------------
Website Neugestaltung www.strickler-reisen.ch / 2018 / ©by Strickler Reisen AG / erstellt von Tourdata AG
------------------------------------------------------------------------------------------------- */


/* ~~ Allgemein ~~ */

body {
    font-family: Calibri, Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    letter-spacing: 0.025em;
    background-color: #fff;
    margin: 0;
    padding: 0;
    text-align: center;
    color: #004983; /* alt #000070 */
    height: 100%;
}

ul, ol, dl {
    padding: 0;
    margin: 0;
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    padding: 0;
    color: #004983; /* alt #000070 */
    text-align: left;
    font-family: Helvetica, Calibri, Arial, sans-serif;
}

p {
    margin: 0;
    padding: 0;
    color: #004983; /* alt #000070 */
    text-align: left;
    font-family: Calibri, Arial, Helvetica, sans-serif;
}

h1 {
    text-transform: uppercase;
}

a img {
    border: none;
}

a:link {
    text-decoration: none;
    color: #004983; /* alt #000070 */
}

a:visited {
}

a:hover {
    text-decoration: underline;
    color: #004983; /* alt #000070 */
}

a:active, a:focus {
    text-decoration: none;
    color: #004983; /* alt #000070 */
}

::after, ::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/* ~~ Verschiedene float/clear-Klassen ~~ */
.fltrt {
    float: right;
    margin-left: 8px;
}

.fltlft {
    float: left;
    margin-right: 8px;
}

.clearfloat {
    clear: both;
    height: 0;
    font-size: 1px;
    line-height: 0px;
}
/* ~~ Überschriften ~~ */

/* ~~ Formulare ~~ */
.formular {
    text-align: left;
}

    .formular textarea, .formular select {
        -webkit-appearance: none; /* Pfeil abschalten */
        -moz-appearance: none; /* Pfeil abschalten */
        appearance: none; /* Pfeil abschalten */
        /* ---*/
        width: 100%;
        border: 1px solid LightGray;
        padding: .5em .75em;
        /*box-shadow: 0 2px 1px 0 rgba(0,0,0,0.2);*/
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }
        /* Pfeile in Felder abschalten für IE 10 */
        .formular select::-ms-expand {
            display: none;
        }

    .formular .DropDown.Disabled {
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: none;
        background: rgb(248,248,248);
        box-shadow: none;
        border: none;
    }

        .formular .DropDown.Disabled::-ms-expand {
            display: none;
        }

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

    .formular select, .formular textarea {
        border: none;
        border-radius: 0;
        font-size: 16px;
        width: 100%;
        box-sizing: border-box;
    }
    /* Input & Textarea */
    .formular input, .formular textarea {
        background-color: white;
        border: 1px solid LightGray;
        padding: .75em 1em .5em 1em;
        -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.1), inset 0px 0px 1px rgba(255,255,255,0.3);
        -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.1), inset 0px 0px 1px rgba(255,255,255,0.3);
        box-shadow: 0px 1px 3px rgba(000,000,000,0.1), inset 0px 0px 1px rgba(255,255,255,0.3);
    }

.formulartextarea {
    resize: vertical;
}

.formular input:hover, .formular input:active, .formular textarea:hover, .formular textarea:active {
    border: 1px solid #LightGray;
}
/* Select */
.formular select {
    width: 100%;
    border: 1px solid #bbb;
    padding: .75em 1em .5em 1em;
    -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.1), inset 0px 0px 1px rgba(255,255,255,0.3);
    -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.1), inset 0px 0px 1px rgba(255,255,255,0.3);
    box-shadow: 0px 1px 3px rgba(000,000,000,0.1), inset 0px 0px 1px rgba(255,255,255,0.3);
}

    .formular select:hover, .formular input:hover {
        -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.2), inset 0px 0px 1px rgba(255,255,255,0.3);
        -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.2), inset 0px 0px 1px rgba(255,255,255,0.3);
        box-shadow: 0px 1px 3px rgba(000,000,000,0.2), inset 0px 0px 1px rgba(255,255,255,0.3);
    }

    .formular select::-ms-expand {
        display: none;
    }

    .formular select.selectfeld {
        background-color: white;
        background-image: url('../images/select-arrow.png');
        background-position: right;
        background-repeat: no-repeat;
        padding-right: 25px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .formular input:focus, .formular select:focus, .formular select.DropDown:focus {
        border-color: #004983; /* alt !important */
        -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.2), inset 0px 0px 1px rgba(255,255,255,0.3);
        -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.2), inset 0px 0px 1px rgba(255,255,255,0.3);
        box-shadow: 0px 1px 3px rgba(000,000,000,0.2), inset 0px 0px 1px rgba(255,255,255,0.3);
        outline: 0 none;
        background-color: transparent !important;
    }
/* Checkbox & Radio */
.formular input[type='checkbox'], .formular input[type='radio'] {
    width: auto;
    /*float: left;*/
    margin-right: .75em;
    background: transparent; /*border: none;*/
}

    .formular input[type='checkbox']:checked, .formular input[type='checkbox']:not(:checked), .formular input[type='radio']:checked, .formular input[type='radio']:not(:checked) {
        background: transparent;
        position: relative;
        margin: 0;
        padding: 0;
    }

    .formular input[type='checkbox'] + label, .formular input[type='radio'] + label {
        cursor: pointer;
    }

.formular input[type='image'] {
    width: auto;
    border: none;
    background: none;
    height: auto;
    box-shadow: none;
    padding: 0;
}

.formular input, .formular textarea, .formular select {
    background-color: white;
    border: 1px solid LightGray;
    padding: .75em 1em .5em 1em;
    margin: 10px auto;
    width: 95%;
    /*font-size: larger;*/
    -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.1), inset 0px 0px 1px rgba(255,255,255,0.3);
    -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.1), inset 0px 0px 1px rgba(255,255,255,0.3);
    box-shadow: 0px 1px 3px rgba(000,000,000,0.1), inset 0px 0px 1px rgba(255,255,255,0.3);
}

.formular fieldset.gutschein div.Name, .formular fieldset.gutschein div.Adresse, .formular fieldset.gutschein div.EMail, .formular fieldset:nth-child(2), .formular fieldset.offerteadresse div.Name, .formular fieldset.offerteadresse div.Adresse, .formular fieldset.offerteadresse div.EMail, .formular fieldset.kontaktperson div, .formular fieldset .fahrzeugleft {
    width: 40%;
    float: left;
}

.formular fieldset.gutschein div:first-child, .formular fieldset.offerteadresse div:first-child, .formular fieldset.offerteadresse div:nth-child(2), .formular fieldset.anlass div:first-child {
    width: 40%;
}

.formular fieldset.gutschein div.Name + div, .formular fieldset.gutschein div.Adresse + div, .formular fieldset.gutschein div.EMail + div, .formular fieldset.offerteadresse div.Name + div, .formular fieldset.offerteadresse div.Adresse + div, .formular fieldset.offerteadresse div.EMail + div {
    width: 40%;
    float: left;
}

.formular fieldset .textfeld, .formular fieldset div input:not(.textfeld), .formular fieldset.anlass .fahrzeugright div.labelcheck {
    width: 95%;
}

    .formular fieldset.anlass .fahrzeugleft div.labelcheck label, .formular fieldset.anlass .fahrzeugright div.labelcheck label {
        width: 215px;
    }

    .formular fieldset.anlass .fahrzeugleft div:not(.labelcheck) input, .formular fieldset.anlass .fahrzeugright div.labelcheck input {
        width: auto;
    }

.formular fieldset.anlass .fahrzeugleft div:not(.labelcheck), .formular fieldset.anlass .fahrzeugright div:not(.labelcheck) {
    width: 100%;
}

.formular fieldset.anlass .fahrzeugright {
    width: 40%;
    float: left;
}

.formular .checkboxsmart label {
    width: 215px;
    display: inline-block;
    float: none;
    margin-right: auto;
}

.formular .textbox {
    width: 100%;
    display: inline-block;
    font-size: inherit;
}

.formular fieldset textarea#off_mitteilung {
    width: calc(80% - 30px);
}

.formular fieldset.offerte {
    width: 100%;
}

    .formular fieldset.offerte div {
        width: 40%;
    }

.fahrzeugleft input, .fahrzeugright input {
    width: auto;
}

fieldset {
    margin: 1em 0px;
    padding: 1em 0;
    border: 0;
}

    fieldset p {
        margin: 2px 12px 10px 10px;
    }

    fieldset.login label, fieldset.register label, fieldset.changePassword label {
        display: block;
    }

    fieldset label.inline {
        display: inline;
    }

.fahrzeugleft .labelcheck label, .fahrzeugright .labelcheck label {
    padding: 10px 0;
}

legend {
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}

fieldset label {
    width: 100%;
    display: inline-block;
    float: left;
    font-weight: bold; /*font-size: 1.17em;*/
}

fieldset.kontaktperson label br {
    display: none;
}

fieldset input.TextKlein {
    width: 95px;
}

input.checkbox1 {
    width: auto;
}

input[type="submit"], input[type="reset"] {
    float: left;
    width: 100%;
}

fieldset.Button {
    width: 100%;
}

.formular fieldset.Button input[type="reset"] {
    float: right;
    width: 22.5%;
    background-color: #f1f1f1;
    color: #004983;
    font-size: 140%;
    text-transform: uppercase;
    padding: .4em 1em .3em;
    margin-right: 45%;
}

.formular fieldset.Button input[type="submit"] {
    float: left;
    width: 22.5%;
    background-color: #004983 !important;
    color: #fff;
    font-size: 140%;
    text-transform: uppercase;
    padding: .4em 1em .3em;
}

fieldset .checkboxsmart label {
    width: auto;
    display: inline-block;
    float: left;
    margin-right: 10px;
}

textarea {
    resize: vertical;
}

    input:hover, input:active, textarea:hover, textarea:active {
        border: 1px solid LightGray;
    }

input, select, textarea {
    background-color: #F1F1F1;
}

.selectfeld {
    width: 100%;
}
/* ~~ Buttons ~~ */
a.btn {
    /*-moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
    box-shadow: inset 0px 1px 0px 0px #ffffff;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
    background: -moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
    background: -webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
    background: -o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
    background: -ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
    background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);*/
    background-color: #004983; /* alt #000070 */
    background: #004983; /* alt #000070 */
    border: 1px solid rgba(000, 000, 128, 1);
    display: inline-block;
    cursor: pointer;
    color: #fff;
    font-family: Arial;
    font-size: 15px;
    padding: 6px 24px;
    text-decoration: none;
    letter-spacing: 0.045em;
    /*text-shadow: 0px 1px 0px #ffffff;*/
    width: auto;
    -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.1), inset 0px 0px 1px rgba(255,255,255,0.3);
    -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.1), inset 0px 0px 1px rgba(255,255,255,0.3);
    box-shadow: 0px 1px 3px rgba(000,000,000,0.1), inset 0px 0px 1px rgba(255,255,255,0.3);
}

    a.btn:hover {
        /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
        background: -moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
        background: -webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
        background: -o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
        background: -ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
        background: linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0);*/
        background-color: #004983; /* alt #000070 */
        background: #004983; /* alt #000070 */
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #fff;
    }

    a.btn:active {
        position: relative;
        top: 1px;
    }
/* ~~ Navigation oben ~~ */
#TopNavigation {
    position: relative;
    right: 0;
    top: 0;
}

#Header a:link, nav a {
    color: #004983;
}

#nav-menue {
    margin: 0 auto;
    height: 50px;
    width: 100%;
    position: relative;
    z-index: 500;
}

.menue-button {
    display: block;
    position: absolute;
    right: 5px;
    top: 0;
    padding: 0.5em;
    color: white;
    cursor: pointer;
    text-decoration: none;
}

    .menue-button img {
        height: 2em;
    }

#nav-menue:target #Steuerung {
    display: block;
}

#nav-menue:target .menue-button-beschr-open {
    display: none;
}
/*header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 500;
}*/

/*#Steuerung {
    float: left;
    width: 100%;
    display: none;
    margin: 75px 0 0;
}

    #Steuerung ul {
        width: auto;
        margin: 0;
        padding: 15px 0;
        float: left;
        text-align: left;
    }

    #Steuerung li {
        font-weight: bold;
        color: #005da8;
        width: 100%;
        margin: auto 35px;
        height: 100%;
        line-height: 35px;
        text-align: left;
        position: relative;
        border-bottom: none;
        float: left;
    }



        #Steuerung li a {
            text-decoration: none;
            color: #005da8;
        }*/

/* ~~ Layout ~~ */
#Wrapper {
    width: 100%;
    height: 100%;
    text-align: center;
}

#Container {
    width: 100%;
    height: 100%;
    margin: auto;
}

#Header {
    width: 100%;
    height: 85px;
    background-color: rgba(0,73,131,0.7); /* alt #000070 */
    position: relative;
    z-index: 600;
}

#TopNavigation a:link {
    color: #004983;
}

#Logo {
    width: 80%;
    position: absolute;
    left: 0;
    padding: 10px 0 0;
    display: block;
}

    #Logo span {
        color: #dadada;
        text-transform: uppercase;
        font-size: 130%;
        position: relative;
        top: -2px;
        background-image: -webkit-linear-gradient(#000000, #fff);
        -webkit-background-clip: text; /*-webkit-text-fill-color: transparent;*/
		  white-space: nowrap;
    }

        #Logo span:after {
            background: none;
            content: attr(data-text);
            left: 0;
            position: absolute;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75);
            top: 0;
            z-index: -1;
        }

    #Logo div {
        height: 75px;
        width: auto;
    }

        #Logo div img {
            height: 55%;
            width: auto;
        }

#BannerSlider {
    overflow: hidden;
    position: relative;
    width: 100%;
    margin: 0 auto 0;
    /* margin-bottom: -60px; */
    height: auto; /*190px*/
    background-color: #fff;
}
    /*#BannerSlider {
    overflow: hidden;
    position: relative;
    width: 100%;
    margin: -95px auto 0;
}*/

    #BannerSlider ul {
        display: block;
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto; /*190px*/
    }

        #BannerSlider ul.slides li {
            position: relative;
            height: auto;
        }

    #BannerSlider section {
        display: block;
        width: 100%;
        height: auto;
    }

    #BannerSlider .flex-direction-nav {
        height: 45px;
        display: inline-block;
        position: absolute;
        z-index: 900;
        top: 45%;
        left: 0;
    }

#InhaltHome {
    width: 95%;
    max-width: 1300px;
    position: relative;
    margin: 0 auto;
    font-size: 150%;
    text-align: left;
}

    #InhaltHome p {
        text-align: justify;
    }

    #InhaltHome .titelhome {
        text-transform: uppercase;
        font-size: 30px;
        position: relative;
        top: 10px;
        line-height: 50px;
        font-family: Helvetica, Calibri, Arial, sans-serif;
    }

    #InhaltHome .begriffehome {
        font-size: 25px;
    }

    #InhaltHome span.spruch .begriffehome {
        width: 100%;
        display: inline-block;
        text-align: left;
    }

    #InhaltHome span.spruch {
        display: inline-block;
        width: auto;
        text-align: right;
    }

    #InhaltHome span.quelle {
        font-size: 75%;
        width: auto;
        position: relative;
        top: -10px;
    }

#Inhalt {
    width: 100%;
    max-width: 1300px;
    position: relative;
    margin: 0 auto;
}

#InhaltAllgemein {
    width: 90%;
    max-width: 1300px;
    position: relative;
    margin: 0 auto;
    /*top: -100px;*/
    z-index: 100;
    /*background-color: rgba(255, 255, 255, 0.9);*/
    padding: 15px 25px;
}

    #InhaltAllgemein .LinkZurueck {
        position: absolute;
        top: 10px;
        right: 25px;
        font-size: 80%;
    }

    #InhaltAllgemein.kontakt p {
        width: 100%;
        text-align: left;
    }

    #InhaltAllgemein.kontakt .maps {
        width: 100%;
        display: inline-block;
        margin: 35px auto 15px;
    }

        #InhaltAllgemein.kontakt .maps iframe {
            width: 100%;
            margin: 15px auto auto;
        }

    #InhaltAllgemein.kontakt span {
        display: block;
        float: left;
        height: auto;
        position: relative;
        width: 50%;
    }

#HomeReisearten, #Standardreisen, #Reiseangebote, #Carflotte, #CarDetails {
    width: 90%;
    margin: 20px auto 0;
}

#Reisen.standardreisen {
    width: 95%;
    height: 100%;
    margin: auto;
    background-color: #fff;
    display: inline-block;
    padding: 15px 0;
}

#Reisen.buchungsablauf {
    width: 100%;
    max-width: 1300px;
    height: auto;
    min-height: 400px;
    margin: 5px auto 0;
    padding: 0px;
    position: relative;
    /*top: -115px;*/
    background-color: rgb(255, 255, 255, 0.9);
    display: block;
    z-index: 100;
}

    #Reisen.buchungsablauf div#Reiseangebote {
        width: 100%;
    }

.HomeReiseart, .IndexStandardreise, .CarflotteCar {
    width: 100%;
    height: auto;
    margin: 0 0 15px;
    box-sizing: border-box;
    float: left;
    position: relative;
    -webkit-box-shadow: 0 2px 3px #d9d9d9;
    -moz-box-shadow: 0 2px 3px #d9d9d9;
    box-shadow: 0 2px 3px #d9d9d9;
}

.HomeReiseartBild, .IndexStandardreiseBild, .CarflotteBild {
    width: auto;
    height: auto;
    overflow: hidden;
    margin: 15px;
    z-index: 2;
}

    .HomeReiseartBild img, .IndexStandardreiseBild img, .CarflotteBild img {
        width: 100%;
        height: auto;
    }

.HomeReiseartBeschreibung {
    width: auto;
    min-height: 85px;
    padding: 15px;
    text-align: left;
    color: #000;
}

.IndexStandardreiseBeschreibung {
    width: auto;
    /*min-height: 160px;*/
    padding: 5px 15px;
    text-align: left;
    color: #000;
}

.HomeReiseart a, .IndexStandardreise a .CarflotteCar a {
    text-decoration: none;
}

.HomeReiseart .btn.btn-Reiseart, .CarflotteCar .btn.btn-Reiseart {
    margin: 15px;
    background-color: #004983; /* alt #000070 */
    color: #fff;
    line-height: 55px;
    font-size: 150%;
    text-transform: uppercase;
}

    .HomeReiseart .btn.btn-Reiseart a, .CarflotteCar .btn.btn-Reiseart a {
        color: #fff;
        line-height: 55px;
    }

.HomeReiseartTitel, .IndexStandardreiseTitel, .CarflotteBezeichnung {
    width: 100%;
    height: auto;
    color: White;
    height: 55px;
    font-weight: 700;
    z-index: 5;
    background-color: rgba(0,73,131,0.8); /* alt rgba(000,000,112,0.5) */
    opacity: 0.7;
    filter: alpha(opacity=70);
}

    .HomeReiseartTitel h3, .IndexStandardreiseTitel h3, .CarflotteBezeichnung h3 {
        padding: 0 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-transform: uppercase;
        line-height: 55px;
        font-size: 150%;
        color: #fff;
    }

.IndexStandardreiseBeschreibung h5 {
    position: absolute;
    bottom: 0;
}

.IndexStandardreiseDatum {
    font-weight: bold;
    margin: auto auto 5px;
}

.IndexStandardreisePreis {
    text-align: left;
    margin: auto auto 10px 15px;
    height: 25px;
}

    .IndexStandardreisePreis strong {
        font-size: 125%;
    }

.StandardreiseDetail .StandardreiseTitel h3 {
    color: #0069A6;
}

.StandardreiseDetail .StandardreiseTitel h1 {
    padding: 35px 0 0 10px;
}

.StandardreiseDetail {
    margin-top: 0;
    /*position: relative; top: -100px;*/
    text-align: left;
}

.StandardreiseBuchen {
    width: 100%;
}

.StandardreiseBuchenDetail {
    width: 100%;
    margin-top: 90px;
    float: right;
    text-align: center;
    padding: 5px;
    background-color: #efefef;
}

    .StandardreiseBuchenDetail span {
        width: 100%;
    }
/* Team-Seite */
.personal {
    width: 100%;
    height: 100%;
    margin: auto;
    display: inline-block;
}

.PersonInhaber {
    box-sizing: border-box;
    float: left;
    margin: 10px 10px 50px;
    width: 100%;
}

    .PersonInhaber span.Text {
        line-height: 35px;
        font-size: inherit;
        margin-left: 0;
        display: table;
    }

.Person {
    box-sizing: border-box;
    float: left;
    margin: 10px;
    width: 100%;
    position: relative;
}

    .PersonInhaber span:first-child, .Person span:first-child {
        float: left;
        margin-right: 5px;
    }

    .Person span:nth-child(2) {
        position: relative;
        bottom: 0;
        float: left;
        text-align: left;
		  min-height: 115px;
    }

    .Person .home3 {
        text-transform: uppercase;
        width: auto;
        background-color: #004983;
        color: #fff;
        padding: 5px 10px;
        margin: 10px auto;
        display: inline-block;
    }
/* Seite Carflotte */
#Carflotte {
    width: 100%;
    height: 100%;
    margin: auto;
    display: inline-block;
}

.CarDetails .CarDetailsBilder, .CarDetails .CarDetailsBeschreibung {
    width: 90%;
    height: auto;
    margin: 35px 15px;
    background-color: #fff;
    padding: 0;
    text-align: left;
}

.CarDetails {
    display: flex;
    margin: 20px auto 0;
    flex-direction: column;
}

    .CarDetails + hr {
        width: 100%;
        border: 0;
        height: 3px;
        background-image: linear-gradient(to right, rgba(112,153,186,0), rgba(112,153,186,75), rgba(112,153,186,0));
    }

    .CarDetails .CarDetailsBilder span {
        width: 100%;
        height: auto;
        margin: 0 10px 20px;
        display: inline-block;
        -webkit-box-shadow: 0 2px 3px #d9d9d9;
        -moz-box-shadow: 0 2px 3px #d9d9d9;
        box-shadow: 0 2px 3px #d9d9d9;
    }

    .CarDetails .CarDetailsBilder img:hover {
        -webkit-transform: scale(1.05); /* Safari and Chrome */
        -moz-transform: scale(1.05); /* Firefox */
        -ms-transform: scale(1.05); /* IE 9 */
        -o-transform: scale(1.05); /* Opera */
        transform: scale(1.05);
        -webkit-transition: 0.5s ease-in-out;
        transition: 0.5s ease-in-out;
        box-shadow: 0 10px 8px -8px #7d7d7d;
    }

    .CarDetails .CarDetailsBilder .fancybox {
        display: inline-block;
    }

.fancybox-wrap {
    left: 10px;
}

.CarDetails span.CarBezeichnung {
    width: 100%;
    color: White;
    height: 35px;
    font-size: 125%;
    font-weight: 700;
    z-index: 5;
    background-color: rgba(0,73,131,0.8); /* alt rgba(000,000,112,0.5) */
    opacity: 0.7;
    filter: alpha(opacity=70);
    display: block;
    line-height: 32px;
    text-indent: 15px;
}

.CarDetails .CarBeschreibung {
    padding: 0 0 25px 25px;
}

.CarDetails .CarDetailsBeschreibung h3 {
    margin: 15px auto auto;
}

.CarDetails .CarDetailsBeschreibung ul {
    margin: 10px auto;
}

    .CarDetails .CarDetailsBeschreibung ul li {
        list-style-type: "... ";
        line-height: 1.5em;
        margin-left: 10px;
    }

.CarDetails .CarDetailsBilderSlider {
    width: 100%;
    height: 720px;
    /* margin: 0px;
    padding: 0px;*/
    overflow: hidden;
    position: relative;
    top: 0;
}

.CarDetails .CarDetailsBilderSlider {
    overflow: hidden;
    position: relative;
    top: 35px;
    width: 100%;
    height: 100%;
    margin-bottom: -60px;
    overflow: hidden;
}

    .CarDetails .CarDetailsBilderSlider .flexslider {
        margin: 0;
    }

    .CarDetails .CarDetailsBilderSlider ul {
        display: block;
        margin: 0;
        padding: 0;
        width: 95%;
        height: 490px;
    }

        .CarDetails .CarDetailsBilderSlider ul.slides li {
            position: relative;
            height: 100%;
        }

    .CarDetails .CarDetailsBilderSlider section {
        display: block;
        width: 100%;
        height: 100%;
    }

    .CarDetails .CarDetailsBilderSlider .flex-direction-nav {
        height: 45px;
        display: inline-block;
        position: absolute;
        z-index: 900;
        top: 45%;
        left: 0;
    }
	 
/* POST IT MIT NADEL */
.quote-container {
    margin-top: 120px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 20px;
    /*background: rgba(0, 0, 0, 0.7);*/
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
    z-index: 100;
}

.personbild:hover ~ .quote-container {
    visibility: visible;
    opacity: 1;
}

.popup {
    margin: 70px auto;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    width: 30%;
    position: relative;
    transition: all 5s ease-in-out;
    font-family: Calibri, Arial, Helvetica, sans-serif;
    font-size: 1em;
    letter-spacing: 0.025em;
    text-align: center;
    color: #004983;
}

    .popup h2 {
        margin: 0 auto;
        font-size: 1em;
        letter-spacing: 0.025em;
        color: #004983;
    }

    .popup .close {
        position: absolute;
        top: 20px;
        right: 30px;
        transition: all 200ms;
        font-size: 30px;
        font-weight: bold;
        text-decoration: none;
        color: #333;
    }

        .popup .close:hover {
            color: #06D85F;
        }

    .popup .content {
        max-height: 30%;
        overflow: auto;
        text-align: justify;
        margin-top: 7px;
        line-height: normal;
    }
/* Die eigentliche Textnachricht */

.note {
    position: relative;
    width: 300px;
    margin: 0 auto;
    padding: 20px;
    box-shadow: 0 5px 5px 2px rgba(0,0,0,0.3);
    text-align: left;
    font-size: .9em;
    letter-spacing: 0.025em;
    color: #004983;
}
    /* Wahlweise kann noch ein Autor mit angegeben werden */

    .note .author {
        display: block;
        margin: 40px 0 0 0;
        text-align: right;
    }

    .note img {
        width: 45%;
        height: auto;
        margin: auto auto 10px;
        border: 10px solid #fff;
        box-shadow: 0 3px 3px 2px rgba(0,0,0,0.3);
    }
/* Die eigentliche gelbe Box */

.yellow { /* Der Hintergrund */
    background: #fefabc; /* Old browsers */
    background: -moz-linear-gradient(top, #fefabc 0%, #f9f593 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefabc), color-stop(100%, #f9f593)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #fefabc 0%, #f9f593 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fefabc 0%, #f9f593 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #fefabc 0%, #f9f593 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefabc', endColorstr='#f9f593', GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #fefabc 0%, #f9f593 100%); /* W3C; A catch-all for everything else */ /* Hintergrund Ende */ /* Wer einen durchgehend gefaerbten Hintergrund will kommentiert das obige aus und aktiviert die folgende Zeile */ /* background:#fefabc; fefdca zu f7f381*/ /* Die Drehung des Post it */
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    transform: rotate(-2deg);
    transform: scale(1.1) translate3d(0, 0, 0);
    border-bottom-right-radius: 60px 5px;
}
/* Die Stecknadel */

.pin {
    background-color: #aaa;
    display: block;
    height: 32px;
    width: 2px;
    position: absolute;
    left: calc(50% + 55px);
    top: -18px;
    z-index: 1;
}

    .pin:after {
        background-color: #A31;
        background-image: radial-gradient(25% 25%, circle, hsla(0,0%,100%,.3), hsla(0,0%,0%,.3));
        border-radius: 50%;
        box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.1), inset 3px 3px 3px hsla(0,0%,100%,.2), inset -3px -3px 3px hsla(0,0%,0%,.2), 23px 20px 3px hsla(0,0%,0%,.15);
        content: '';
        height: 12px;
        left: -5px;
        position: absolute;
        top: -10px;
        width: 12px;
    }

    .pin:before {
        background-color: hsla(0,0%,0%,0.1);
        box-shadow: 0 0 .25em hsla(0,0%,0%,.1);
        content: '';
        height: 24px;
        width: 2px;
        left: 0;
        position: absolute;
        top: 8px;
        transform: rotate(57.5deg);
        -moz-transform: rotate(57.5deg);
        -webkit-transform: rotate(57.5deg);
        -o-transform: rotate(57.5deg);
        -ms-transform: rotate(57.5deg);
        transform-origin: 50% 100%;
        -moz-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -o-transform-origin: 50% 100%;
    }

#FusszeileKontakt {
    background-color: rgba(0,73,131,0.7); /* alt #000070 */
    color: #dadada;
    padding: 25px 0;
}

    #FusszeileKontakt span {
        width: 95%;
        float: left;
        text-align: left;
        padding-left: 2.5%;
    }

    #FusszeileKontakt a, #FusszeileKontakt h2 {
        color: #dadada;
    }

#Fusszeile {
    background-color: #7d7d7d;
}

.FusszeileInhalt, .fusszeilekontakt {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    display: inline-block;
}

    .FusszeileInhalt div {
        width: 100%;
        height: auto;
        padding: 10px;
        text-align: center;
		  box-sizing: border-box;
    }

        .FusszeileInhalt div span {
            width: 100%;
            box-sizing: border-box;
            color: #dadada;
        }

            .FusszeileInhalt div span a {
                color: #dadada;
            }

                .FusszeileInhalt div span a:last-child:after {
                    content: '';
                    width: 100%;
                    display: block;
                }



/* Layout für Mobilgeräte: 481px bis 1080px (SamsungS4, iPhone6Plus) Portrait. */
@media only screen and (min-width: 481px) and (max-width: 1080px) and (orientation:portrait) {
	
	.HomeReiseart, .IndexStandardreise, .CarflotteCar {
    width: calc(50% - 30px);
    height: auto;
    margin: 0 15px 15px;
    box-sizing: border-box;
    float: left;
    position: relative;
    -webkit-box-shadow: 0 2px 3px #d9d9d9;
    -moz-box-shadow: 0 2px 3px #d9d9d9;
    box-shadow: 0 2px 3px #d9d9d9;
}
.IndexStandardreiseBeschreibung {
    width: auto;
    min-height: 175px;
    padding: 5px 15px;
    text-align: left;
    color: #000;
}
.CarDetails {
    display: flex;
    margin: 20px auto 0;
    flex-direction: row;
}
.Person {
    box-sizing: border-box;
    float: left;
    margin: 10px;
    width: 45%;
    position: relative;
}
	
}



/* Layout für Tablet-PCs: 481 bis 768 px. Erbt Stile vom: Layout für Mobilgeräte. */
@media only screen and (min-width: 481px) and (orientation:landscape) {
	#Header {
    width: 100%;
    height: 105px;
    background-color: rgba(0,73,131,0.7); /* alt #000070 */
    position: relative;
    z-index: 600;
}
    #Logo {
        width: auto;
        position: absolute;
        left: 0;
        padding: 25px 0 0 25px;
        display: block;
    }
	     #Logo span {
        color: #dadada;
        text-transform: uppercase;
        font-size: 150%;
        position: relative;
        top: -2px;
        background-image: -webkit-linear-gradient(#000000, #fff);
        -webkit-background-clip: text; /*-webkit-text-fill-color: transparent;*/
    }

    .toggle span img {
        width: 35px;
        height: auto;
        position: absolute;
        right: 10px;
        top: -10px;
    }

    #TopNavigation {
        position: relative;
        right: 5px;
        top: 25px;
    }

    #InhaltHome {
        width: 100%;
        max-width: 1300px;
        position: relative;
        margin: 0 auto;
        font-size: 150%;
        text-align: left;
    }
    #InhaltHome p {
        text-align: justify;
        padding: 0 15px;
    }

    .HomeReiseartBild, .IndexStandardreiseBild, .CarflotteBild {
        width: auto;
        height: auto;
        overflow: hidden;
        margin: 15px;
        z-index: 2;
    }

    #Reisen.buchungsablauf {
        width: 90%;
        max-width: 1300px;
        height: auto;
        min-height: 400px;
        margin: -125px auto 0;
        padding: 15px;
        position: relative;
        top: -115px;
        background-color: rgb(255, 255, 255, 0.9);
        display: block;
        z-index: 100;
    }

    #InhaltAllgemein {
        width: 90%;
        max-width: 1300px;
        position: relative;
        margin: 0 auto;
        /*top: -100px;*/
        z-index: 100;
        /*background-color: rgba(255, 255, 255, 0.9);*/
        padding: 15px 25px;
    }

        #InhaltAllgemein.kontakt span {
            display: block;
            float: left;
            height: auto;
            position: relative;
            width: 40%;
        }

    .HomeReiseart, .IndexStandardreise {
        width: calc(50% - 30px);
        height: auto;
        min-height: 450px;
        margin: 35px 15px;
        background-color: #fff;
        padding: 0;
    }

    .IndexStandardreiseBeschreibung {
        width: auto;
        min-height: 160px;
        padding: 5px 15px;
        text-align: left;
        color: #000;
    }

    #FusszeileKontakt span {
        width: 30%;
        float: left;
        text-align: left;
        padding-left: 15px;
    }

    .FusszeileInhalt div span a:last-child:after {
        content: '';
        width: 100%;
        display: none;
    }

    .CarDetails {
        display: flex;
        margin: 20px auto 0;
        flex-direction: row;
    }

        .CarDetails .CarDetailsBilder, .CarDetails .CarDetailsBeschreibung {
            width: calc(50% - 30px);
            height: auto;
            margin: 35px 15px;
            background-color: #fff;
            padding: 0;
            text-align: left;
        }
		  .CarDetails .CarDetailsBilder .fancybox {
        display: inline-block;
    }
	
	.Person {
    box-sizing: border-box;
    float: left;
    margin: 10px;
    width: 45%;
    position: relative;
}

	/* POST IT MIT NADEL */
	.quote-container {
		 margin-top: 120px;
		 position: absolute;
		 top: 0;
		 bottom: 0;
		 left: 105px;
		 right: 0;
		 /*background: rgba(0, 0, 0, 0.7);*/
		 transition: opacity 500ms;
		 visibility: hidden;
		 opacity: 0;
		 z-index: 100;
	}
            
}


/* Desktoplayout: 769 bis maximal 1675px (vorher 1232).  Erbt Stile von: den Layouts für Mobilgeräte und Tablet-PCs. */
@media only screen and (min-width: 769px) and (orientation:landscape) {
    /* ~~ Navigation oben ~~ */
    /*#TopNavigation #Steuerung {
        display: block;
        text-align: left;
        margin: 0 auto;
        position: relative;
        left: 0;
        float: none;
    }

    #Steuerung {
        margin: 1em 0;
    }

        #Steuerung li {
            width: auto;
            text-align: center;
            line-height: 50px;
        }

            #Steuerung li:first-child {
                margin-left: 0;
            }*/

#Header {
    width: 100%;
    height: 85px;
    background-color: rgba(0,73,131,0.7); /* alt #000070 */
    position: relative;
    z-index: 600;
}
    #TopNavigation .menue-button {
        display: none;
    }

    #TopNavigation {
        position: absolute;
        right: 5px;
        top: 25px;
    }

    nav {
        margin: 10px auto 0;
        padding: 0;
        background-color: transparent;
        width: 100%;
        max-width: 1300px;
        height: 50px;
        position: relative;
        z-index: 500;
    }

        nav ul {
            float: right;
            padding: 0;
            margin: 0;
            list-style: none;
            text-transform: uppercase;
            position: relative;
            top: 0;
            right: 15px;
            background-color: transparent; /* z-index: 100;*/
        }

            nav ul li {
                margin: 0px auto 0 35px;
                display: inline-block;
                float: left;
                background-color: transparent;
                color: inherit;
                font-weight: 700;
                text-align: left;
                width: auto;
                white-space: nowrap;
                position: relative;
            }

            nav ul ul li {
                width: auto;
                float: none;
                display: inline-block;
                position: relative;
            }

        nav a {
            display: block;
            padding: 14px 20px;
            color: #FFF;
            font-size: 17px;
            text-decoration: none;
        }

        #Header a:link, nav a {
            color: #fff;
        }

        nav ul ul.menureiseangebote {
            position: absolute;
            right: 0;
            top: 48px;
            left: inherit;
            border-top: 2px solid #004983;
        }

        nav ul ul.menuueberuns {
            position: absolute;
            right: 0;
            top: 48px;
            left: inherit;
            border-top: 2px solid #004983;
        }

    /* ~~ Formulare ~~ */

    .formular {
        text-align: left;
        height: 100%;
        min-height: 300px;
    }

    input, textarea, select {
        font-size: medium;
        margin: 0 auto 5px auto;
    }

    fieldset.gutschein div.Name, fieldset.gutschein div.Adresse, fieldset.gutschein div.EMail, fieldset.offerteadresse div.Name, fieldset.offerteadresse div.Adresse, fieldset.offerteadresse div.EMail {
        width: 50%;
        float: left; /*margin-right: 105px;*/
    }

    fieldset.offerte div {
        width: 50%;
        float: left;
    }

    fieldset label {
        /*width: 215px;*/
        display: inline-block;
        float: none;
    }

    fieldset.kontaktperson label br {
        display: inline;
    }

    .textfeld {
        width: 190px;
    }

    fieldset .checkboxsmart label {
        width: 215px;
        display: inline-block;
        float: none;
        margin-right: auto;
    }

    .selectfeld {
        width: 225px;
    }

    .plzfeld {
        width: 40px;
    }

    .ortfeld {
        width: 142px;
    }

    .textfeldklein {
        width: 90px;
    }

    .textfeldgross {
        width: 367px;
    }

    .textarea {
        width: 372px;
    }

    .textarea2 {
        width: 100%;
    }
    /* ~~ Layout ~~ */

    #Container {
        margin: auto;
        height: 100%; /* alt alc(100vh - 39px) */
        min-height: 1041px;
        background-color: rgba(237,237,237,0.4);
    }

    #BannerSlider {
        height: auto; /*calc(100vh - 300px)*/
        /*max-height: 720px;*/
        margin: -95px auto 0;
        /* padding: 0px;*/
        overflow: hidden;
        position: relative;
        top: 0;
    }

        #BannerSlider ul {
            display: block;
            margin: 0;
            padding: 0;
            width: 100%;
            height: auto; /*calc(100vh - 300px)*/
            /*max-height: 720px;*/
        }

    #Reisen {
        width: 100%;
        height: 100%;
        margin: auto;
        /*background-color: rgba(237,237,237,0.4);*/
        display: inline-block;
    }

        #Reisen h1 {
            width: 100%;
            max-width: 1300px;
            margin: 0 auto;
            text-align: left;
        }

        #Reisen.standardreisen {
            width: 100%;
            height: 100%;
            margin: auto;
            background-color: #fff;
            display: inline-block;
            padding: 15px 25px;
        }
            #Reisen.buchungsablauf {
        width: 100%;
        max-width: 1300px;
        height: auto;
        min-height: 400px;
        margin: -125px auto 0;
        padding: 15px;
        position: relative;
        top: -115px;
        background-color: rgb(255, 255, 255, 0.9);
        display: block;
        z-index: 100;
    }

    #HomeReisearten, #Standardreisen, #Reiseangebote, #Carflotte {
        width: 100%;
        max-width: 1300px;
        margin: 0 auto;
    }

    .HomeReiseart, .IndexStandardreise {
        width: calc(33% - 30px);
        height: auto;
        min-height: 450px;
        margin: 35px 15px;
        background-color: #fff;
        padding: 0;
    }

    .CarflotteCar {
        width: calc(33% - 30px);
        height: auto;
        margin: 35px 15px;
        background-color: #fff;
        padding: 0;
    }
    .CarDetails .CarDetailsBilder span {
                width: 45%;
                height: auto;
                margin: 0 10px 20px;
                display: inline-block;
                -webkit-box-shadow: 0 2px 3px #d9d9d9;
                -moz-box-shadow: 0 2px 3px #d9d9d9;
                box-shadow: 0 2px 3px #d9d9d9;
            }

    .CarDetails .CarDetailsBilder .fancybox {
        display: flex;
    }

    .HomeReiseart a:hover, .IndexStandardreise a:hover, .CarflotteCar a:hover {
        text-decoration: none;
    }

        .HomeReiseart:hover .HomeReiseartBild img, .IndexStandardreise a:hover .IndexStandardreiseBild img, .CarflotteCar:hover .CarflotteBild img {
            -webkit-transform: scale(1.25); /* Safari and Chrome */
            -moz-transform: scale(1.25); /* Firefox */
            -ms-transform: scale(1.25); /* IE 9 */
            -o-transform: scale(1.25); /* Opera */
            transform: scale(1.25);
            -webkit-transition: all 0.7s ease;
            transition: all 0.7s ease;
        }

    .HomeReiseartBild, .IndexStandardreiseBild, .CarflotteBild {
        width: calc(100% - 30px);
        height: 235px;
        overflow: hidden;
        z-index: 2;
    }

    .HomeReiseart .btn.btn-Reiseart, .CarflotteCar .btn.btn-Reiseart {
        margin: 15px;
        background-color: #004983; /* alt #000070 */
        color: #fff;
        line-height: 55px;
        font-size: 150%;
        text-transform: uppercase;
    }

        .HomeReiseart .btn.btn-Reiseart a, .CarflotteCar .btn.btn-Reiseart a {
            color: #fff;
            line-height: 55px;
        }

    .IndexStandardreiseBilder {
        width: calc(33% - 30px);
        height: 260px !important;
        overflow: hidden;
        margin: 15px;
        float: left;
    }

        .HomeReiseartBild img, .IndexStandardreiseBild img, .IndexStandardreiseBilder img, .CarflotteBild img {
            width: 100%;
            height: auto;
        }

    .StandardreiseDetail .StandardreiseTitel h1 {
        padding: 5px 0 0 15px;
    }

    .StandardreiseDetail .StandardreiseTitel h3 {
        color: #0069A6;
    }

    .StandardreiseDetail {
        margin-top: -100px;
        /*position: relative; top: -100px;*/
        text-align: left;
    }

    .StandardreiseBuchen {
        width: 100%;
    }

    .StandardreiseBuchenDetail {
        width: 350px;
        float: right;
        margin-top: inherit;
        text-align: left;
        padding: 5px;
        background-color: #efefef;
    }

        .StandardreiseBuchenDetail span {
            width: 100%;
            display: inline-block;
        }

    #InhaltAllgemein {
        width: 100%;
        max-width: 1300px;
        position: relative;
        margin: 0 auto;
        /*top: -100px;*/
        z-index: 100;
        /*background-color: rgba(255, 255, 255, 0.9);*/
        padding: 15px 25px;
    }

    /* Team-Seite */
    .PersonInhaber span.Text {
        font-size: inherit;
        line-height: normal;
        margin-left: 255px;
    }

    .Person {
        box-sizing: border-box;
        float: left;
        margin: 10px;
        width: calc(100% / 3 - 70px);
        height: 250px;
    }

    .Copy {
        text-align: right;
        width: auto;
        float: right;
    }

    #FusszeileKontakt {
        background-color: rgba(0,73,131,0.7); /* alt #000070 */
        color: #dadada;
        padding: 25px 0;
    }

        #FusszeileKontakt span {
            width: 30%;
            float: left;
            text-align: left;
            padding-left: 15px;
        }

        #FusszeileKontakt a, #FusszeileKontakt h2 {
            color: #dadada;
        }

    #Fusszeile {
        background-color: #7d7d7d;
    }

    .FusszeileInhalt, .fusszeilekontakt {
        width: 100%;
        max-width: 1300px;
        margin: 0 auto;
        display: inline-block;
    }

        .FusszeileInhalt div {
            width: 100%;
            height: auto;
            padding: 10px;
            text-align: center;
        }

            .FusszeileInhalt div span {
                width: auto;
                box-sizing: border-box;
                color: #dadada;
            }

                .FusszeileInhalt div span a {
                    color: #dadada;
                }
}

@media only screen and (max-width: 1024px) and (orientation:landscape) {
	#Header {
    width: 100%;
    height: 105px;
    background-color: rgba(0,73,131,0.7); /* alt #000070 */
    position: relative;
    z-index: 600;
}
#TopNavigation {
        position: absolute;
        right: 5px;
        top: 50px;
    }
	 nav ul ul.menureiseangebote {
            position: absolute;
            right: 0;
            top: 48px;
            left: inherit;
            border-top: 2px solid #004983;
        }
	 nav ul ul li {
                width: auto;
                float: left;
                display: inline-block;
                position: relative;
            }
}

@media only screen and (max-width: 1920px) and (orientation:landscape) {
    #BannerSlider {
        width: 100%;
        height: auto; /*400px*/
        /* margin: 0px;
    padding: 0px;*/
        overflow: hidden;
        position: relative;
        top: 0;
    }

        #BannerSlider ul {
            display: block;
            margin: 0;
            padding: 0;
            width: 100%;
            height: auto; /*400px*/
        }

    #Logo span {
        position: relative;
        top: 0;
        right: 0;
    }
}