/* 
    Created on : 02.02.2017, 11:24:16
    Author     : Tsvetan Kalchev <tk@travelcheck.de>
*/

//colors
$colorWhite: #ffffff;
$colorBlack: #000000;

$alivacolorRed: #e10019;
$travelcheckBlueColor: #00377a;

$alivaColorOliveGreen: #6f791d;
$alivaColorLightGreen: #e9f1e9;
$alivaLightOrange: #fdf2e3;
$alivaColorOrange: #e88423;

$primaryColor: $alivaColorOliveGreen;
$topTitleColor: $alivaLightOrange;
$menuDropdownBackground: $alivaColorLightGreen;
$menuBackground: $alivaColorLightGreen;
$menuTextColor: $colorWhite;

$formSubHeaderBgColor: $alivaColorOliveGreen;
$featuresBgColor: $alivaLightOrange;
$carouselBgColor: $alivaLightOrange;
$dlgWelcomeBgColor: $alivaLightOrange;
$errorColor: #fbc4d1;

$searchFormBackgroundColor: rgba($alivaColorLightGreen, 0.8);
$searchFormSubmitButtonColor: $alivaColorOliveGreen;
$searchFormLabelColor: $primaryColor;
$searchFormControlsBackgroundColor: $alivaColorOliveGreen;
$searchFormInputsBorderColor: $alivaColorOliveGreen;
$searchFormInputsBackgroundColor: $alivaColorLightGreen;
$searchFormInputsTextColor: $primaryColor;
$searchFormFooterBackgroundColor: $alivaColorOliveGreen;
$searchFormFooterTextColor: $colorWhite;

$boxContentColor: $alivaLightOrange;
$boxContentHeaderColor: $colorBlack;

$footerColor: $alivaColorOliveGreen;

$specialsCarouselBackgroundFromColor: $alivaColorOliveGreen;
$specialsCarouselBackgroundToColor: $alivaLightOrange;

$colorRating: $alivaColorOliveGreen;
$colorRatingSelected: $primaryColor;

$btnDefaultBackgroundColor: $alivaColorOliveGreen;
$btnDefaultTextColor: $colorWhite;
$btnDefaultBorderColor: $primaryColor;

$btnDangerBackgroundColor: $alivacolorRed;
$btnDangerTextColor: $colorWhite;
$btnDangerBorderColor: $primaryColor;

$typeAheadBorderColor: #888;

$select2BorderColor: #e7e7e7;
$select2Color: #555555;
$select2BorderColorFocus: #66afe9;

$bgFadeCarouselIndicatorsBgColor: #7da3bf;
$bgFadeCarouselIndicatorsBorderColor: #134884;
$bgFadeCarouselIndicatorsActiveColor: #1a4b88;

$colorGreyLabels: #798fa5;

//fonts
$fontDefault: Arial, Verdana, Sans-serif;

//@extend-elements
//original selectors
//.modal-transparent, .modal-content.modal-transparent
%extend_1 {
    background-color: transparent;
    border: 0;
    padding-bottom: 0;
}

@mixin borderRadius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

$mainFontFamily: Arial,Verdana,Sans-serif;

@mixin mainNarrow() {
    font-family: "Arial Narrow",$mainFontFamily;
    font-stretch: condensed;
}

@mixin borderRadius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

@mixin rotate($angle) {
    -moz-transform: rotate(#{$angle}deg);
    -ms-transform: rotate(#{$angle}deg);
    -o-transform: rotate(#{$angle}deg);
    -webkit-transform: rotate(#{$angle}deg);
    transform: rotate(#{$angle}deg);
}

a {
    color: $primaryColor;
    text-decoration: none;
    &:hover {
        color: $primaryColor;
        text-decoration: none;
    }
    &:focus {
        color: $primaryColor;
        text-decoration: none;
        outline: none;
    }
    &.carousel-control {
        color: $alivaColorOliveGreen;
        &:hover {
            color: $alivaColorOliveGreen;
        }
        &:focus {
            color: $alivaColorOliveGreen;
        }
    }
}
body {
    color: $primaryColor;
    background-color: $featuresBgColor;
    font-family: $fontDefault;
    min-height: 540px;
    &.modal-open {
        overflow: auto;
    }
    &.modal-open[style] {
        padding-right: 0 !important;
    }
}
.icon {
    &.form-control-feedback {
        color: $primaryColor;
    }
    &.ion-android-star {
        color: $colorRating;
    }
}
.slogan-secondary {
    color: $primaryColor;
    width: 100%;
    font-weight: bold;
    font-size: 20px !important;
}
.search-form-text {
    color: $primaryColor;
}
.ss-rating-label {
    color: $primaryColor;
    font-size: 18px;
    float: left;
}
.tophotels-box {
    color: $primaryColor;
    height: 250px;
    background-color: $boxContentColor;
    h3 {
        color: $primaryColor;
    }
    &:hover {
        opacity: 1;
    }
}
.tophotels-info {
    color: $primaryColor;
}
.specials-slide-info {
    color: $primaryColor;
    background-color: rgba($colorWhite, 0.8);
    height: 210px;
    margin-top: 300px;
    margin-left: 30px;
    margin-right: 30px;
    right: 20px;
    padding-left: 50px;
    padding-right: 80px;
    margin-bottom: 20px;
    width: 95%;
    h4 {
        color: $primaryColor;
        font-weight: bold;
        text-align: left;
        font-size: 45px;
        a {
            color: $primaryColor;
        }
    }
    p {
        color: $primaryColor;
        text-align: justify;
        font-size: 18px;
        box-sizing: border-box;
        bottom: 70px;
        top: 70px;
    }
}
.box-container {
    padding-top: 10px;
    padding-bottom: 10px;
    h3 {
        color: $primaryColor;
    }
    .box-content {
        background-color: $boxContentColor;
    }
    a:hover {
        text-decoration: none;
    }
}
.hotelbewertung-text {
    color: $primaryColor;
}
.top-10-caption {
    color: $primaryColor;
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba($colorWhite, 0.8);
    width: 150px;
    height: 150px;
    text-align: center;
    font-weight: bold;
    font-size: 30px;
    border-radius: 50%;
    display: inline-block;
}
.top-10-slide-info {
    color: $primaryColor;
    background-color: rgba($colorWhite, 0.8);
    height: 40%;
    top: auto;
    bottom: 0;
    left: 56%;
    position: absolute;
    overflow: hidden;
    padding-left: 50px;
    padding-right: 50px;
    h4 {
        color: $primaryColor;
        font-weight: bold;
        text-align: left;
        font-size: 45px;
    }
    p {
        text-align: justify;
        font-size: 18px;
        position: relative;
        box-sizing: border-box;
        display: inline-block;
    }
}
.advantage-offers {
    color: $primaryColor;
}
.aktuelle {
    color: $primaryColor;
}
.topangebote-carousel {
    color: $primaryColor;
    .item a {
        h4 {
            color: $primaryColor;
        }
        p {
            color: $primaryColor;
        }
    }
}
.contact-form {
    color: $primaryColor;
    .col-xs-6 {
        padding-left: 0;
        padding-right: 0;
    }
    .col-xs-4 {
        padding-left: 0;
        padding-right: 0;
    }
    .col-xs-2 {
        padding-left: 0;
        padding-right: 0;
    }
}
.control-label {
    color: $primaryColor;
}
#kontaktForm {
    .panel-title {
        color: $primaryColor;
    }
    .contact-text {
        color: $primaryColor;
    }
}
section {
    &.newsletter {
        color: $primaryColor;
    }
    &.features {
        background-color: $featuresBgColor;
        padding: 0;
        &.newsletter {
            background-color: $carouselBgColor;
        }
    }
    &.testimonials {
        margin: 50px 0;
    }
}
#nlForm {
    .panel-title {
        color: $primaryColor;
    }
}
#picsPopup {
    .modal-title {
        color: $primaryColor;
    }
}
#moreInfoPopup {
    .modal-title {
        color: $primaryColor;
    }
}
.top-10-infotext {
    position: absolute;
    background-color: rgba($carouselBgColor, 0.9);
    top: 68%;
    width: 89%;
    height: 130px;
    margin-left: 2%;
    h4 {
        color: $primaryColor;
    }
}
.menu-collapsed {
    background-color: $alivaColorOliveGreen;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
}
#schnellSuche {
    .fastsearch-tabs {
        background-color: $alivaLightOrange;
    }
    .modal-footer {
        background-color: $alivaLightOrange;
    }
    .modal-tabs-content {
        background-color: $alivaColorLightGreen;
    }
}
.mob-buttons-div {
    background-color: $featuresBgColor;
    button {
        background-color: $alivaColorOliveGreen;
        color: $colorWhite;
    }
}
.partner-name-select {
    background-color: $primaryColor;
    width: 10%;
    font-size: 22px;
    color: $colorWhite;
    border-radius: 50%;
    text-align: center;
    padding-left: 10px;
    padding-right: 8px;
}
.voucher-select {
    background-color: $primaryColor;
    width: 10%;
    font-size: 22px;
    color: $colorWhite;
    border-radius: 50%;
    text-align: center;
    padding-left: 10px;
    padding-right: 8px;
}

#individuelleAnfrageForm {
    h5 {
        background-color: $formSubHeaderBgColor;
    }
    > h5 {
        text-align: center;
        font-weight: bold;
    }
}
.errors {
    color: $alivacolorRed;
}
.specials-section-carousel {
    .specials-name {
        color: $colorWhite;
    }
    .carousel-control {
        color: $colorWhite;
        &:active {
            color: $colorWhite;
        }
        &:focus {
            color: $colorWhite;
        }
        &:hover {
            color: $colorWhite;
        }
    }
    .carousel-inner {
        background: $specialsCarouselBackgroundFromColor;
        background: linear-gradient(to bottom, $specialsCarouselBackgroundFromColor 0, $specialsCarouselBackgroundToColor 100%);
        filter: progid:dximagetransform.microsoft.gradient(startcolorstr=#{$specialsCarouselBackgroundFromColor}, endcolorstr=#{$specialsCarouselBackgroundToColor}, gradienttype=0 );
        width: 100%;
        text-align: justify;
        text-justify: distribute-all-lines;
        border-radius: 70px;
    }
}
footer {
    background-color: $footerColor;
    .partner {
        color: $footerColor;
    }
    .partner-name-tcp {
        color: $footerColor;
    }
    .voucher {
        color: $footerColor;
    }
    .box-footer-2nd-text {
        color: $footerColor;
    }
    .footer-last-social {
        color: $footerColor;
    }
    span {
        color: $footerColor;
    }
}
.text-main-font {
    font-family: $fontDefault !important;
}
.contact-form-content {
    background-color: $colorWhite;
}
.carousel-section {
    background-color: $carouselBgColor;
}
.box-footer-2nd-text {
    background-color: $colorWhite;
    border-radius: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
}
.modal-footer {
    padding: 0;
    .btn-danger {
        margin: 20px;
    }
    .btn-success {
        margin: 20px;
    }
}
.modal::-webkit-scrollbar {
    width: 0 !important;
}
.modal-transparent {
    @extend %extend_1;
}
.modal-tabs-content {
    margin-left: -20px;
    margin-right: -20px;
}
.modal-tabs-topheader {
    margin-top: -20px;
    background-color: transparent;
    overflow: hidden;
    margin-left: -20px;
    margin-right: -20px;
}
.modal-tabs-close {
    float: right;
    margin-top: 5px;
}
.dropdown-menu {
    background-color: $menuDropdownBackground;
    border: 1px solid $primaryColor;
}
.container-fluid {
    max-width: 1750px !important;
}
.btn {
    text-transform: none;
    border-width: 0;
    &:hover {
        border-bottom-width: 0;
    }
}
.navbar-right {
    margin-right: 0 !important;
    li {
        a {
            font-size: 20px;
            text-decoration: none;
            padding-right: 15px;
            z-index: 2000;
        }
        &.active a {
            font-weight: bold;
        }
    }
}
@media(min-width: 560px) {
    #dlg-welcome .modal-dialog .modal-content {
        background-size: cover;
        .modal-body .content .inner .logos {
            overflow: hidden;
            .header {
                background-image: url(../../../img/travelcheck-logo-small.png);
                background-position: left center;
                background-repeat: no-repeat;
                float: left;
                height: 125px;
                width: 260px;
            }
            .bestpreis-logo {
                background-image: url(../../../img/bestpreisgarantie-siegel_f-1.png);
                background-position: right center;
                background-repeat: no-repeat;
                float: right;
                height: 180px;
                position: absolute;
                right: 0;
                top: 150px;
                transform: rotate(10deg);
                width: 180px;
            }
        }
    }
}
@media(max-width: 559px) {
    #dlg-welcome .modal-dialog .modal-content {
        background-size: contain;
        .modal-body .content .inner .logos {
            overflow: hidden;
            .header {
                background-image: url(../../../img/travelcheck-logo-small-1.png);
                background-position: left center;
                background-repeat: no-repeat;
                float: left;
                height: 125px;
                width: 260px;
            }
            .bestpreis-logo {
                background-image: url(../../../img/bestpreisgarantie-siegel_f-2.png);
                background-position: right center;
                background-repeat: no-repeat;
                float: right;
                height: 130px;
                position: absolute;
                right: 0;
                top: 150px;
                transform: rotate(10deg);
                width: 180px;
            }
        }
    }
}
@media(min-width: 1200px) {
    #main-menu {
        height: 80px;
        > li {
            position: relative;
            top: 50%;
            transform: translateY(-50%);
        }
    }
    .navbar-header {
        height: 80px;
    }
    #navcol-1 {
        background-color: $menuBackground;
    }
    .dropdown-menu {
        min-width: 280px;
        padding-left: 5px;
        padding-right: 5px;
        border: 1px solid $primaryColor;
    }
    .nav .open > a {
        background-color: $menuBackground;
        &:hover {
            background-color: $menuBackground;
        }
        &:focus {
            background-color: $menuBackground;
        }
    }
    .navbar-right li a:hover {
        color: $primaryColor !important;
    }
}
@media(max-width: 1200px) {
    .navbar-nav {
        background-color: $menuDropdownBackground;
        float: none !important;
        margin-top: 7.5px;
        > li {
            float: none;
            > a {
                padding-top: 10px;
                padding-bottom: 10px;
            }
        }
    }
    #main-menu {
        height: auto;
    }
    .navbar-header {
        float: none;
    }
    .navbar-left {
        float: none !important;
    }
    .navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba($colorWhite, 0.1);;
        &.collapse {
            display: none !important;
        }
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .nav .open > a {
        background-color: $menuDropdownBackground;
        &:hover {
            background-color: $menuDropdownBackground;
        }
        &:focus {
            background-color: $menuDropdownBackground;
        }
    }
    .collapse.in {
        display: block !important;
    }
}
.navbar-default {
    &.transparent {
        background-color: transparent;
    }
    .navbar-toggle {
        .icon-bar {
            background-color: $colorWhite !important;
        }
        &:focus {
            background-color: $primaryColor !important;
        }
        &:hover {
            background-color: $primaryColor !important;
        }
    }
}
.form-control {
    box-shadow: none;
    &.error[readonly] {
        background-color: $errorColor;
    }
}
.form-control[readonly] {
    background-color: $colorWhite;
}
body[orient="portrait"] {
    min-height: 540px;
}
body[orient="landscape"] {
    min-height: 400px;
}
.zooming-circle-holder {
    position: relative;
    padding: 0 !important;
    width: 169px;
    height: 169px;
    border-radius: 50%;
    overflow: hidden;
    display: block;
    margin: 0 auto;
    img {
        display: block;
        margin: 0;
        transition: all 0.5s;
        &:hover {
            transform: scale(1.1);
        }
    }
}
.centered-a {
    text-align: center;
}
.centered-a-container {
    display: block;
    margin: 0 auto;
}
.btn-top-kontakt-mob {
    border-radius: 50%;
    border-color: transparent;
    border-width: 0;
    font-weight: normal;
    font-size: 25px;
    padding-left: 10px;
    padding-right: 10px;
}
.btn-top-schnellsuche-mob {
    border-radius: 50px;
    border-color: transparent;
    border-width: 0;
    font-weight: normal;
    font-size: 25px;
    padding-left: 30px;
    padding-right: 30px;
}
.ss-form {
    margin-top: 15px;
    input {
        font-size: 1em;
        padding-left: 35px !important;
    }
    select {
        font-size: 1em;
        padding-left: 35px !important;
    }
    ul {
        font-size: 1em;
        padding-left: 35px !important;
    }
    .icon {
        font-size: 2em;
        left: 0;
    }
}
.ss-destination-group {
    font-weight: bold;
    font-style: italic;
}
.ss-destination-item {
    padding-left: 15px;
}
.ss-tabs {
    margin-left: -5px;
    margin-right: -5px;
    border: 0;
    border-color: transparent;
    float: left;
}
.tt-suggestion {
    font-size: 1.5em !important;
}
.tt-menu {
    width: 45%;
}
.tt-cursor {
    border: 1px solid $typeAheadBorderColor;
    border-radius: 5px;
}
.bootstrap-tagsinput {
    width: 100%;
    .tag [data-role="remove"] {
        font-size: 15px;
    }
}
.twitter-typeahead {
    width: 100%;
}
.ss-persons-outer-container {
    overflow: hidden;
}
.ss-persons-container {
    float: left;
    position: relative;
    left: 45px;
    &.adults {
        left: 9px !important;
    }
}
.ss-persons-label-container {
    float: left;
}
.ss-advanced-search {
    top: 0;
    margin-top: 0;
    padding: 0;
    width: 100%;
}
.ss-advanced-search-btn {
    width: 100%;
    background-color: transparent;
    color: $colorWhite;
    border-color: transparent;
    font-weight: bold;
}
.modal-close-button {
    &:hover {
        background-color: $alivacolorRed !important;
        border-color: transparent !important;
        border-bottom-width: 0 !important;
    }
    &:focus {
        background-color: $alivacolorRed !important;
        border-color: transparent !important;
        border-bottom-width: 0 !important;
    }
}
.select2-container--default {
    .select2-selection--multiple {
        border: 1px solid $select2BorderColor;
        color: $select2Color;
        display: block;
        font-size: 14px;
        padding: 7px 12px;
        transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
        width: 100%;
    }
    &.select2-container--focus .select2-selection--multiple {
        border-color: $select2BorderColorFocus;
        box-shadow: 0 1px 1px rgba($colorBlack, 0.075) inset,0 0 8px rgba($select2BorderColorFocus, 0.6);
        outline: 0 none;
    }
}
.slider-spacer {
    width: 100px;
}
.slider-horizontal {
    float: left;
    left: 100px;
    margin-top: -20px;
}
.slider-container {
    margin-bottom: 35px;
}
.rating {
    unicode-bidi: bidi-override;
    direction: rtl;
    text-align: center;
    float: left;
    margin-top: 10px;
    margin-left: 10px;
    > span:hover {
        color: transparent;
        cursor: pointer;
        ~ span {
            color: transparent;
            cursor: pointer;
            &:before {
                color: $colorRatingSelected;
            }
        }
        &:before {
            color: $colorRatingSelected;
        }
    }
}
.rating-selected {
    color: $colorRatingSelected !important;
}
.nav-tabs {
    a {
        color: $colorWhite !important;
        font-weight: bold;
    }
    .active a {
        background-color: $featuresBgColor !important;
        color: $primaryColor !important;
        font-weight: bold;
    }
}
.text-centered {
    text-align: center;
}
.text-font-large {
    font-size: 28px;
}
.box-content {
    background-size: cover;
    background-position: center;
    height: 270px;
    &:hover {
        /*opacity: 0.7;*/
    }
    > h3 {
        width: 100%;
        background-color: rgba($colorWhite, 0.5);
        top: 0;
        left: 0;
        color: $boxContentHeaderColor;
    }
}
.pauschalreisen {
    background-image: url(../../../img/pauschalreisen-f.jpg);
}
.lastminute {
    background-image: url(../../../img/lastminute-f.jpg);
}
.topreiseziele {
    background-image: url(../../../img/topreiseziele-f.jpg);
}
.kreuzfahrten {
    background-image: url(../../../img/kreuzfahrten-f.jpg);
}
.flusskreuzfahrten {
    background-image: url(../../../img/flusskreuzfahrten-f.jpg);
}
.windjammer {
    background-image: url(../../../img/windjammer-f.jpg);
}
.hotelsweltweit {
    background-image: url(../../../img/hotelsweltweit-f.jpg);
}
.ferienhaeuser {
    background-image: url(../../../img/ferienhaeuser-f.jpg);
}
.fincas {
    background-image: url(../../../img/fincas-f.jpg);
}
.rhodos {
    background-image: url(../../../img/rhodos.jpg);
}
.bulgarien {
    background-image: url(../../../img/bulgarien.jpg);
}
.ibiza {
    background-image: url(../../../img/ibiza.jpg);
}
.caracao {
    background-image: url(../../../img/caracao.jpg);
}
.barbados {
    background-image: url(../../../img/barbados.jpg);
}
.menorca {
    background-image: url(../../../img/menorca.jpg);
}
.lapalma {
    background-image: url(../../../img/lapalma.jpg);
}
.lagomera {
    background-image: url(../../../img/lagomera.jpg);
}
.teneriffa {
    background-image: url(../../../img/teneriffa.jpg);
}
.grancanaria {
    background-image: url(../../../img/grancanaria.jpg);
}
.lanzarote {
    background-image: url(../../../img/lanzarote.jpg);
}
.fuerteventura {
    background-image: url(../../../img/fuerteventura.jpg);
}
.linienfluege {
    background-image: url(../../../img/linienfluege-f.jpg);
}
.charterfluege {
    background-image: url(../../../img/charterfluege-f.jpg);
}
.golfreisen {
    background-image: url(../../../img/golfreisen-f.jpg);
}
.tennisreisen {
    background-image: url(../../../img/tennisreisen-f.jpg);
}
.fussballreisen {
    background-image: url(../../../img/fussballreisen-f.jpg);
}
.reisenmithund {
    background-image: url(../../../img/reisenmithund-f.jpg);
}
.skireisen {
    background-image: url(../../../img/skireisen-f.jpg);
}
.tauchreisen {
    background-image: url(../../../img/tauchreisen-f.jpg);
}
.partyundeventreisen {
    background-image: url(../../../img/partyundeventreisen-f.jpg);
}
.freizeitparks {
    background-image: url(../../../img/freizeitparks-f.jpg);
}
.img-aktuelles-carousel-wrapper {
    text-align: center;
    a {
        text-align: center;
    }
    div {
        text-align: center;
    }
    img {
        text-align: center;
        display: block;
        margin: 0 auto;
    }
}
.img-responsive {
    display: block;
    margin: 0 auto;
}
.img-topangebote-carousel-wrapper {
    text-align: center;
    h4 {
        font-weight: bold;
    }
    a {
        text-align: center;
    }
}
.carousel-control {
    &.menu-control {
        .glyphicon-menu-left {
            margin-left: -85px;
            left: 50%;
            font-size: 40px;
            height: 40px;
            width: 40px;
            text-shadow: 0 0 10px rgba($colorWhite, 0.96);
            display: inline-block;
            position: absolute;
            top: 50%;
            z-index: 5;
        }
        .glyphicon-menu-right {
            margin-right: -85px;
            right: 50%;
            font-size: 40px;
            height: 40px;
            width: 40px;
            text-shadow: 0 0 10px rgba($colorWhite, 0.96);
            display: inline-block;
            position: absolute;
            top: 50%;
            z-index: 5;
        }
    }
    &.left {
        background-image: none;
    }
    &.right {
        background-image: none;
    }
}
.preis {
    color: $alivacolorRed;
    font-weight: bold;
}
.footer-last {
    color: $colorWhite !important;
    font-family: $fontDefault;
    padding-top: 25px;
    a {
        color: $colorWhite !important;
    }
}
.box-footer-2nd {
    color: $colorWhite !important;
    margin-top: 25px;
    h4 {
        color: $colorWhite !important;
        margin-top: 25px;
    }
}
#voucher-input {
    width: 75%;
    text-align: left;
}
.voucher-money-bg-xs {
    background-image: url(../../../img/geld-320.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: fill;
    margin-top: 5px;
    height: 30px;
}
.voucher-money-bg-sm {
    background-image: url(../../../img/geld-600.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: fill;
    margin-top: 5px;
    height: 60px;
}
.voucher-money-bg-md {
    background-image: url(../../../img/geld-900.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: fill;
    margin-top: 0;
    height: 65px;
}
.voucher-money-bg-lg {
    background-image: url(../../../img/geld.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: fill;
    margin-top: 5px;
    height: 90px;
}
#partner-name-input {
    width: 65%;
}
.partner-name-tcp {
    width: 21%;
    margin-left: 5px;
    background-color: $colorWhite;
    text-transform: none;
}
.footer-wrapper {
    margin-left: 20px;
    margin-right: 20px;
}
.xatonce-carousel {
    .carousel-control {
        width: 4%;
        background-image: none;
        &.left {
            margin-left: 15px;
        }
        &.right {
            margin-right: 15px;
        }
    }
    .cloneditem-1 {
        display: none;
    }
    .cloneditem-2 {
        display: none;
    }
    .cloneditem-3 {
        display: none;
    }
    .cloneditem-4 {
        display: none;
    }
    .cloneditem-5 {
        display: none;
    }
}
@media all and(min-width: 768px) {
    .xatonce-carousel .carousel-inner {
        > {
            .active {
                left: 0;
                &.left {
                    left: -33.333%;
                }
                &.right {
                    left: 33.333%;
                }
            }
            .prev {
                left: -33.333%;
                &.right {
                    left: 0;
                }
            }
            .next {
                left: 33.333%;
            }
            .left {
                left: 0;
            }
        }
        .cloneditem-1 {
            display: block;
        }
        .cloneditem-2 {
            display: block;
        }
    }
}
@media all and(min-width: 768px) and(transform-3d), all and(min-width: 768px) and(-webkit-transform-3d) {
    .xatonce-carousel .carousel-inner > .item {
        &.active {
            transform: translate3d(0, 0, 0);
            left: 0;
            &.right {
                transform: translate3d(33.333%, 0, 0);
                left: 0;
            }
            &.left {
                transform: translate3d(-33.333%, 0, 0);
                left: 0;
            }
        }
        &.next {
            transform: translate3d(33.333%, 0, 0);
            left: 0;
        }
        &.prev {
            transform: translate3d(-33.333%, 0, 0);
            left: 0;
            &.right {
                transform: translate3d(0, 0, 0);
                left: 0;
            }
        }
        &.left {
            transform: translate3d(0, 0, 0);
            left: 0;
        }
    }
}
@media all and(min-width: 992px) {
    .xatonce-carousel .carousel-inner {
        > {
            .active {
                left: 0;
                &.left {
                    left: -16.666%;
                }
                &.right {
                    left: 16.666%;
                }
            }
            .prev {
                left: -16.666%;
                &.right {
                    left: 0;
                }
            }
            .next {
                left: 16.666%;
            }
            .left {
                left: 0;
            }
        }
        .cloneditem-3 {
            display: block;
        }
        .cloneditem-4 {
            display: block;
        }
        .cloneditem-5 {
            display: block;
        }
    }
}
@media all and(min-width: 992px) and(transform-3d), all and(min-width: 992px) and(-webkit-transform-3d) {
    .xatonce-carousel .carousel-inner > .item {
        &.active {
            transform: translate3d(0, 0, 0);
            left: 0;
            &.right {
                transform: translate3d(16.666%, 0, 0);
                left: 0;
            }
            &.left {
                transform: translate3d(-16.666%, 0, 0);
                left: 0;
            }
        }
        &.next {
            transform: translate3d(16.666%, 0, 0);
            left: 0;
        }
        &.prev {
            transform: translate3d(-16.666%, 0, 0);
            left: 0;
            &.right {
                transform: translate3d(0, 0, 0);
                left: 0;
            }
        }
        &.left {
            transform: translate3d(0, 0, 0);
            left: 0;
        }
    }
}
.img-partner-footer-carousel-wrapper {
    height: 65px;
}
.box-footer {
    background-image: url(../../../img/insel-footer.png);
    background-size: cover;
    height: 165px;
    h3 {
        margin-top: 5px;
        font-size: 22px;
        font-weight: bold;
    }
}
.navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-width: 0;
}
.navbar-toggle {
    border-style: none;
}
.navbar-link {
    font-size: x-large;
}
.carousel-title {
    top: 15%;
    font-family: $fontDefault;
    h1 {
        position: absolute;
        right: 0;
        font-size: 50px;
        font-weight: bold;
        text-shadow: 0 0 10px rgba($colorBlack, 0.96);
        color: $topTitleColor !important;
    }
    p {
        position: absolute;
        right: 0;
        top: 75px;
        font-size: 25px;
        font-weight: bold;
        text-shadow: 0 0 10px rgba($colorBlack, 0.96);
        color: $topTitleColor !important;
    }
}
.bg-fade-carousel-indicators-container {
    float: left;
}
.bg-fade-carousel-indicators {
    top: 15%;
    left: auto;
    right: -456px;
    margin-top: 50px;
    white-space: pre-wrap;
    li {
        background-color: $bgFadeCarouselIndicatorsBgColor;
        border-color: $bgFadeCarouselIndicatorsBorderColor !important;
    }
    .active {
        background-color: $bgFadeCarouselIndicatorsActiveColor;
    }
}
.carousel-overlay {
    position: absolute;
    bottom: 100px;
    right: 5px;
    left: 0;
}
.topcarousel {
    min-height: 560px;
    background-size: cover;
    background-position: center center;
}
.homeslide1 {
    background-image: url(../../../img/carousel_home/1-w.jpg);
}
.homeslide2 {
    background-image: url(../../../img/carousel_home/2-w.jpg);
}
.homeslide3 {
    background-image: url(../../../img/carousel_home/3-w.jpg);
}
.top-margin-30 {
    margin-top: 30px;
}
.specialsslide1 {
    background-image: url(../../../img/carousel_home/specials/tauchen.jpg);
}
.specialsslide2 {
    background-image: url(../../../img/carousel_home/specials/ski.jpg);
}
.specialsslide3 {
    background-image: url(../../../img/carousel_home/specials/finca.jpg);
}
.specialsslide4 {
    background-image: url(../../../img/carousel_home/specials/tennis.jpg);
}
.specialsslide5 {
    background-image: url(../../../img/carousel_home/specials/fussball.jpg);
}
.specialsslide6 {
    background-image: url(../../../img/carousel_home/specials/golf.jpg);
}
.specialsslide7 {
    background-image: url(../../../img/carousel_home/specials/party.jpg);
}
.specialsslide8 {
    background-image: url(../../../img/carousel_home/specials/hund.jpg);
}
.specialsslide9 {
    background-image: url(../../../img/carousel_home/specials/freizeitpark.jpg);
}
.specials-header {
    background: $specialsCarouselBackgroundFromColor;
    background: linear-gradient(to bottom, $specialsCarouselBackgroundFromColor 0, $specialsCarouselBackgroundToColor 100%);
    filter: progid:dximagetransform.microsoft.gradient(startcolorstr=#{$specialsCarouselBackgroundFromColor}, endcolorstr=#{$specialsCarouselBackgroundToColor}, gradienttype=0 );
    width: 100%;
    text-align: justify;
    text-justify: distribute-all-lines;
    border-radius: 70px;
    a {
        top: 5px;
        display: inline-block;
        *display: inline;
        color: $colorWhite;
    }
    img {
        vertical-align: baseline;
    }
}
.stretch {
    width: 90%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}
.specials-caption {
    position: absolute;
    top: 100px;
    right: 0;
    padding-right: 15px;
    width: 100%;
    height: 210px;
    text-align: right;
    font-weight: bold;
    font-size: 30px;
    display: inline-block;
    h3 {
        font-size: 50px;
        font-weight: bold;
        color: $colorWhite !important;
        text-shadow: 0 0 10px rgba($colorBlack, 0.96);
    }
    p {
        text-align: right;
        font-size: 25px;
        font-weight: bold;
        color: $colorWhite !important;
        text-shadow: 0 0 10px rgba($colorBlack, 0.96);
    }
}
.specials-navigation {
    position: absolute;
    bottom: 100px;
    right: 10px;
    background-color: transparent;
    width: 100%;
    height: 300px;
    text-align: center;
    font-weight: bold;
    font-size: 30px;
    display: inline-block;
}
.specials-offer-image {
    box-shadow: 10px 10px 5px 0 rgba($colorBlack, 0.75);
    margin-right: 25px;
    margin-bottom: 8px;
    float: left;
}
.img-section-carousel-wrapper {
    text-align: center;
    height: 120px;
    top: 5px;
    a {
        text-align: center;
        height: 120px;
        top: 5px;
    }
}
.staticimage-top-title {
    position: absolute;
    top: 120px;
    right: 0;
    width: 100%;
    h3 {
        font-size: 50px;
        font-weight: bold;
        text-shadow: 0 0 10px rgba($colorBlack, 0.96);
        text-align: right;
        color: $topTitleColor !important;
        text-decoration: none;
        a {
            font-size: 50px;
            font-weight: bold;
            text-shadow: 0 0 10px rgba($colorBlack, 0.96);
            text-align: right;
            color: $topTitleColor !important;
            text-decoration: none;
        }
    }
    p {
        font-size: 25px;
        font-weight: bold;
        text-align: right;
        color: $topTitleColor !important;
        text-shadow: 0 0 10px rgba($colorBlack, 0.96);
    }
}
.vacation-container {
    overflow: hidden;
}
.vacation-item {
    float: left;
    padding-right: 15px;
}
.staticimage-head {
    height: 562px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.mietwagen-title {
    background-image: url(../../../img/mietwagen.jpg);
}
.charter-title {
    background-image: url(../../../img/charterfluege.jpg);
}
.line-title {
    background-image: url(../../../img/linienfluege.jpg);
}
.kreuzfahrten-title {
    background-image: url(../../../img/kreuzfahrten.jpg);
}
.pauschal-title {
    background-image: url(../../../img/pauschalreisen.jpg);
}
.ferienhaeuser-title {
    background-image: url(../../../img/ferienhaeuser.jpg);
}
.freizeitparks-title {
    background-image: url(../../../img/freizeitparks.jpg);
}
.hotels-title {
    background-image: url(../../../img/hotelsweltweit.jpg);
}
.lastminute-title {
    background-image: url(../../../img/lastminute.jpg);
}
.hund-title {
    background-image: url(../../../img/reisenmithund.jpg);
}
.topreiseziele-title {
    background-image: url(../../../img/topreiseziele.jpg);
}
.top-hotels-title {
    background-image: url(../../../img/hotelsweltweit.jpg);
}
.top-10-title {
    background-image: url(../../../img/hotelsweltweit.jpg);
}
.top-10-carousel {
    margin-bottom: 15px;
    .carousel-control {
        text-shadow: none;
        top: 375px;
        width: 4%;
        font-size: 40px;
    }
}
.top-10-left-control {
    left: 56% !important;
}
.top-10-slide {
    background-position: center;
    background-size: cover;
    height: 500px;
}
.top-10-infotext-price {
    font-size: 20px;
    position: absolute;
    bottom: 9px;
    right: 15px;
    font-weight: bold;
}
.btn-info, .btn-success {
    &:hover {
        background-color: $btnDefaultBackgroundColor;
        color: $btnDefaultTextColor;
        border: 1px solid $btnDefaultBorderColor;
    }
    &:active {
            &:hover {
                    background-color: $btnDefaultBackgroundColor;
                    color: $btnDefaultTextColor;
                    border: 1px solid $btnDefaultBorderColor;
            }
            &:focus {
                    background-color: $btnDefaultBackgroundColor;
                    color: $btnDefaultTextColor;
                    border: 1px solid $btnDefaultBorderColor;
            }
    }
    &.active {
            &:hover {
                    background-color: $btnDefaultBackgroundColor;
                    color: $btnDefaultTextColor;
                    border: 1px solid $btnDefaultBorderColor;
            }
            &:focus {
                    background-color: $btnDefaultBackgroundColor;
                    color: $btnDefaultTextColor;
                    border: 1px solid $btnDefaultBorderColor;
            }
            &.focus {
                    background-color: $btnDefaultBackgroundColor;
                    color: $btnDefaultTextColor;
                    border: 1px solid $btnDefaultBorderColor;
            }
    }
    &.focus:active {
            background-color: $btnDefaultBackgroundColor;
            color: $btnDefaultTextColor;
            border: 1px solid $btnDefaultBorderColor;
    }
    background-color: $btnDefaultBackgroundColor;
    color: $btnDefaultTextColor;
    border: 1px solid $btnDefaultBorderColor;
}
.btn-danger {
    &:hover {
        background-color: $btnDangerBackgroundColor;
        color: $btnDangerTextColor;
        border: 1px solid $btnDangerBorderColor;
    }
    &:active {
            &:hover {
                    background-color: $btnDangerBackgroundColor;
                    color: $btnDangerTextColor;
                    border: 1px solid $btnDangerBorderColor;
            }
            &:focus {
                    background-color: $btnDangerBackgroundColor;
                    color: $btnDangerTextColor;
                    border: 1px solid $btnDangerBorderColor;
            }
    }
    &.active {
            &:hover {
                    background-color: $btnDangerBackgroundColor;
                    color: $btnDangerTextColor;
                    border: 1px solid $btnDangerBorderColor;
            }
            &:focus {
                    background-color: $btnDangerBackgroundColor;
                    color: $btnDangerTextColor;
                    border: 1px solid $btnDangerBorderColor;
            }
            &.focus {
                    background-color: $btnDangerBackgroundColor;
                    color: $btnDangerTextColor;
                    border: 1px solid $btnDangerBorderColor;
            }
    }
    &.focus:active {
            background-color: $btnDangerBackgroundColor;
            color: $btnDangerTextColor;
            border: 1px solid $btnDangerBorderColor;
    }
    background-color: $btnDangerBackgroundColor;
    color: $btnDangerTextColor;
    border: 1px solid $btnDangerBorderColor;
}
.icon-feature {
    text-align: center;
    .glyphicon {
        font-size: 60px;
    }
}
.features {
    h2 {
        color: $colorBlack;
    }
    .icon-features {
        margin-top: 15px;
    }
}
.site-footer {
    padding: 20px 0;
    text-align: center;
    h5 {
        color: inherit;
        font-size: 20px;
    }
    .social-icons a {
        display: inline-block;
        width: 32px;
        border: none;
        font-size: 20px;
        border-radius: 50%;
        margin: 4px;
        text-align: center;
        background-color: $colorWhite;
        height: 32px;
        line-height: 32px;
        padding-top: 0;
        &:hover {
            opacity: 1;
        }
    }
}
@media(min-width: 768px) {
    .site-footer {
        h5 {
            text-align: left;
        }
        .social-icons {
            text-align: right;
        }
    }
}
.wrapper2 {
    position: relative;
    padding-bottom: 65.25%;
    padding-top: 30px;
    height: 3000px;
    overflow: auto;
    iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}
.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    width: 100%;
    height: auto;
    iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    &.ratio4x3 {
        padding-bottom: 75%;
    }
}
iframe {
    max-width: 100%;
}
.iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
    background-color: $colorWhite;
    iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}
.error {
    background-color: $errorColor;
}
.carousel-fade {
    .carousel-inner {
        .item {
            transition-property: opacity;
            opacity: 0;
        }
        .active {
            opacity: 1;
            &.left {
                opacity: 0;
                left: 0;
                transform: translate3d(0, 0, 0);
            }
            &.right {
                opacity: 0;
                left: 0;
                transform: translate3d(0, 0, 0);
            }
        }
        .next {
            left: 0;
            transform: translate3d(0, 0, 0);
            &.left {
                opacity: 1;
            }
        }
        .prev {
            left: 0;
            transform: translate3d(0, 0, 0);
            &.right {
                opacity: 1;
            }
        }
    }
    .carousel-control {
        z-index: 2;
    }
}
.menu-placeholder-lg {
    height: 80px;
    background-color: $featuresBgColor;
}
li.main-menu {
    color: $menuTextColor;
    a.a-main-menu {
        color: $menuTextColor;
    }
}
.aktuelles-carousel .item a {
    h4 {
        color: $primaryColor;
    }
    p {
        color: $primaryColor;
    }
}
.top-10-offers-carousel .carousel-control {
    color: $primaryColor;
    &:active {
        color: $primaryColor;
    }
    &:focus {
        color: $primaryColor;
    }
    &:hover {
        color: $primaryColor;
    }
}
.nav-arrows a {
    background-color: $btnDefaultBackgroundColor;
}

.modal-content.modal-transparent {
    @extend %extend_1;
}
#dlg-welcome .modal-dialog .modal-content {
    background-image: url(../../../img/banner-welcome-1.jpg);
    background-position: center top;
    .modal-header {
        background-color: transparent;
        border-bottom: medium none;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    .modal-body {
        height: 450px;
        padding-left: 0;
        padding-right: 0;
        .content {
            .inner {
                background-color: rgba($colorWhite, 0.8);
                font-weight: bold;
                margin-left: 15px;
                margin-right: 15px;
                margin-top: 105px;
                padding-bottom: 5px;
                padding-left: 15px;
                ul {
                    color: $colorBlack;
                    list-style: outside none none;
                    margin-left: 0;
                    padding-left: 1.2em;
                    text-indent: -1.2em;
                    width: 100%;
                    li::before {
                        content: "\f10a";
                        float: left;
                        font-family: Ionicons;
                        line-height: 1;
                        padding-left: 10px;
                        padding-top: 3px;
                        width: 1.2em;
                    }
                }
            }
            .footer {
                background-color: $dlgWelcomeBgColor;
                bottom: 0;
                color: $colorWhite;
                padding: 5px 15px 15px;
                position: absolute;
                top: 355px;
                h3 a {
                    color: $colorWhite;
                }
            }
        }
    }
    .modal-footer {
        background-color: $dlgWelcomeBgColor;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        border-top: medium none;
        button {
            width: 93%;
        }
    }
}
.tm-tag span {
    font-size: 18px !important;
}
.select2.select2-container[style] {
    width: 100% !important;
}
.select2-search input {
    width: 100% !important;
    padding-left: 0 !important;
}
.tt-input input {
    float: left;
    font-size: 1em !important;
}
.ss-children-ages-container select {
    width: 55px;
    padding-left: 0 !important;
}
.no-margin-on-hover:hover {
    margin-top: 0;
}
.no-margin-on-hover-5:hover {
    margin-top: 5px;
}
.box2-content.skireisen {
    background-position: 0 0;
}
.carousel-fullwidth h3 {
    font-weight: bold;
}
h4.contact-form {
    padding-left: 0;
    padding-right: 0;
    margin-left: -15px;
}
.partner-footer-carousel .carousel-inner .item img {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.carousel.carousel-fade {
    .item {
        transition: opacity 1s linear;
        opacity: .5;
    }
    .active {
        &.item {
            opacity: 1;
        }
        &.left {
            left: 0;
            z-index: 2;
            opacity: 0;
            filter: alpha(opacity=0);
        }
        &.right {
            left: 0;
            z-index: 2;
            opacity: 0;
            filter: alpha(opacity=0);
        }
    }
}
.specials-carousel .carousel-control {
    &.left {
        left: 0;
    }
    &.right {
        right: 0;
    }
}
.box-12-content > h3 {
    width: 100%;
    background-color: rgba($colorWhite, 0.5);
    top: 0;
    left: 0;
}
.navbar-brand .glyphicon {
    margin-right: 6px;
}
.testimonials blockquote {
    text-align: center;
}
.greyLabels label {
    color: $colorGreyLabels;
}

.floating-buttons {
    background-color: $alivaColorOliveGreen;
}

#layout-schnellsuche {
    position: absolute;
    top: 107px;
    left: 0;
    height: 376px;
    width: 320px;
    z-index: 5;
    margin-left: 15px;
    background-color: $searchFormBackgroundColor;
    border: none;
    @include borderRadius(0);
    padding-left: 10px;
    padding-right: 10px;
}

#layout-schnellsuche-extended {
    position: absolute;
    top: 107px;
    left: 320px;
    height: 376px;
    width: 820px;
    z-index: 5;
    margin-left: 15px;
    background-color: $searchFormBackgroundColor;
    border: none;
    @include borderRadius(0);
    display: none;
}

#hide-advanced-search-btn {
    left: 25%;
    position: absolute;
}

.caption-search .icon {
    display: inline-block;
}

.caption-search {
    text-align: center;
}

.caption-search a {
    color: $searchFormFooterTextColor !important;
    text-decoration: none;
}

.form-group-multicolumns {
    overflow: hidden;
    margin-bottom: 15px;
}

.multicolumn-column {
    float: left;
}

.multicolumn-column-45 {
    width: 45%;
}

.multicolumn-column-spacer-10 {
    width: 10%;
}

select.select  {
    padding: 0px 6px;
    width: 100%;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;

    -webkit-appearance: none;   
    -moz-appearance: none;  
    appearance: none;

    text-indent: 0.01px;
    text-overflow: '';  
}

select.select:focus  {
    outline: none;
} 

.form-control {
    box-shadow: none;
    border: 1px solid $primaryColor;
    @include borderRadius(0);
    width: 100%;
}

.form-control[readonly] {
    background-color: $colorWhite;
}

.form-control.error[readonly] {
    background-color: $errorColor;
}

.form-control:after {
    top: 42px;
    right: 15px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba($colorBlack, 0);
    border-top-color: $primaryColor;
    border-width: 5px;
    margin-top: -2px;
    z-index: 100;
}

.form-group {
    position:relative;
}

.plusmunus-boxes {
    width: 100%;
    overflow: hidden;
}

.plusminus-box {
    width: 33.333%;
    float: left;
}

.sign.plusminus-box {
    background-color: $searchFormControlsBackgroundColor;
    text-align: center;
    height: 38px;
    vertical-align: central;
    font-size: 26px;
}

.sign.plusminus-box a {
    color: $colorWhite !important;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}

input[type=number] {
    -moz-appearance: textfield;
}

.pricePerValue, .hotelBewertungSliderText, .weiterempfehlungSliderText, .anzahlBewertungenSliderText {
    text-align: right;
    color: $searchFormLabelColor;
    font-size: 15px;
}

.form-control.kidsyears::after {
    border-style: none;
}

.form-control.kidsyears {
    overflow: hidden;
    padding: 0;
}

.form-control.kidsyears .kids {
    float: left;
    width: 20%;
    display: none;
    text-align: center;
}

.form-control.kidsyears input {
    margin-top: 0;
    border-left: none;
    border-top: none;
    border-bottom: none;
}

.form-control.kidsyears select {
    border: 0;
    padding-top: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

.form-control.kidsyears select::-ms-expand {
    display: none;
}

.select2-container .select2-selection {
    height: 40px;
    overflow: auto;
    border-radius: 0;
    border: 1px solid $primaryColor;
    padding: 5px;
} 

div#pricePerSlider.slider.slider-horizontal {
    width: 150px;
}

div#hotelBewertungSlider.slider.slider-horizontal {
    width: 152px;
}

div#hotelBewertungSliderSmall.slider.slider-horizontal {
    width: 184px;
}

div#weiterempfehlungSlider.slider.slider-horizontal {
    width: 150px;
}

div#weiterempfehlungSliderSmall.slider.slider-horizontal {
    width: 174px;
}

div#anzahlBewertungenSlider.slider.slider-horizontal {
    width: 340px;
}

div#anzahlBewertungenSliderSmall.slider.slider-horizontal {
    width: 399px;
}

.slider-handle {
    background-color: $searchFormControlsBackgroundColor;
    background-image: none;
}

.slider-horizontal {
    float: left;
    left: 0;
    margin-top: -10px;
}

.slider-selection, .slider-track-high {
    background-image: none;
    background-color: $searchFormInputsBackgroundColor;
    border: $searchFormInputsBorderColor solid 1px;
    box-shadow: none;
}

.slider-container {
    margin-bottom: 35px;
}

#homeoffers-carousel {
    padding-top: 150px;
}

.homeoffers-carousel-item img {
    position: absolute;
    top: 0;
    right: 0;
}

.ss-form-mask {
    margin-top: 0;
    label {
        color: $searchFormLabelColor;
        font-size: 15px;
        font-weight: bold;
    }
    .btn-default, .btn-default:focus {
        color: $colorWhite;
        background-color: $searchFormSubmitButtonColor;
        text-transform: uppercase;
        width: 270px;
        @include borderRadius(0);
        border: none;
        padding: 0;
        height: 45px;
        bottom: 40px;
        position: absolute;
    }
    input, div.form-control, .select2-container .select2-selection, input.form-control[readonly] {
        background-color: $searchFormInputsBackgroundColor;
        color: $searchFormInputsTextColor;
        border: 1px solid $searchFormInputsBorderColor;
    }
    select.kid_years {
        background-color: $searchFormInputsBackgroundColor;
        color: $searchFormInputsTextColor;
    }
    .material-icons.child-age {
        font-size: 15px;
        color: $searchFormInputsBorderColor;
    }

    .fa.child-age {
        color: $searchFormInputsBorderColor;
    }
}

@media(min-width: 1200px) {
    .search-mask-small {
        display: none;
    }
    
    .search-mask-big {
        display: block;
    }
    
    .schnellsuche-small {
        display: none;
    }
    .dropdown-menu:not(.daterangepicker) {
        min-width: 280px;
        padding-left: 5px;
        padding-right: 5px;
        border: 1px solid $primaryColor;
        left: -190px !important;
    }
    a.star {
        color: $searchFormControlsBackgroundColor;
        font-size: 30px;
    }
    .autocomplete {
        display: none;
        position: absolute;
        top: 55px;
        left: -50px;
        z-index: 1100;
        background-color: $colorWhite;
        -webkit-box-shadow: 6px 21px 24px -8px rgba($colorBlack,0.75);
        -moz-box-shadow: 6px 21px 24px -8px rgba($colorBlack,0.75);
        box-shadow: 6px 21px 24px -8px rgba($colorBlack,0.75);
        border-radius: 4px !important;
        padding-left: 5px;
        padding-right: 5px;
        border-width: 0;
        ul {
            list-style: none;
            margin-left: -30px;
            li {
                min-width: 400px;
                color: $primaryColor;
                a {
                    color: $alivacolorRed;
                }
            }
        }
    }
    
    .schnellsuche-big {
        .autocomplete {
            top: 65px;
            ul {
                li {
                    min-width: 290px;
                }
            }
        }
    }
    
    .extended-search {
        background-color: $searchFormFooterBackgroundColor;
        color: $searchFormFooterTextColor;
        position: absolute;
        left: 0;
        bottom: 0;
        height: 25px;
        width: 100%;
        padding-top: 2px;
    }
    
    #bg-fade-carousel {
        margin-top: -1px;
    }
    
    .homeoffers-carousel-item >div >div >img {
        display: block;
    }

    .homeoffers-carousel-item h3 {
        color: $colorWhite !important;
        @include mainNarrow;
        font-weight: bold;
        font-size: 40px;
        text-align: right;
        top: -10px;
        right: 10px;
        display: inline-block;
        position: absolute;
        text-transform: uppercase;
        text-shadow: 0px 0px 10px rgba($colorBlack, 0.96);
    }

    .homeoffers-carousel-item h4 {
        color: $colorWhite !important;
        font-size: 24px;
        text-align: left;
        top: 45px;
        right: 10px;
        display: inline-block;
        position: absolute;
        text-shadow: 0px 0px 10px rgba($colorBlack, 0.96);
    }

    .homeoffers-carousel-item-info {
        position: absolute;
        top: 382px;
        right: 0;
        width: 812px;
        height: 100px;
        color: $colorWhite;
        padding: 5px;
        font-size: 21px;
        display: block;
    }

    .homeoffers-carousel-item-info.travelcheck {
        position: absolute;
        top: 353px;
        right: 0;
        width: 812px;
        height: 130px;
        color: $colorWhite;
        padding: 5px;
        font-size: 21px;
        display: block;
        background-color: $featuresBgColor;
    }

    .homeoffers-carousel-item-info ul {
        width: 100%;
        list-style: none;
        margin-left: 0;
        padding-left: 1.2em;
        text-indent: -1.2em;
    }

    .homeoffers-carousel-item-info li:before {
        content: "\f10a";
        font-family: "Ionicons";
        line-height: 1;
        float: left;
        width: 1.2em;
        padding-left: 10px;
        padding-top: 3px;
    }

    .homeoffers-carousel-item {
        width: 100%;
        height: 550px;
        background-repeat: no-repeat;
        background-position: center 25%;
        background-size: cover;
        .logos {
            position: absolute;
            top: 85px;
            right: -130px;
            z-index: 10;
            .travelcheck {
                background-image: url(../img/travelcheck-logo-small.png);
                background-repeat: no-repeat;
                background-size: cover;
                width: 250px;
                height: 80px;
            }
            .bestprice {
                background-image: url(../img/bestpreisgarantie-siegel_f-1.png);
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center center;
                height: 150px;
                margin-top: 125px;
                @include rotate(30);
            }
        }
    }

    .homeoffers-carousel-item-price {
        position: absolute;
        top: 292px;
        width: 182px;
        height: 91px;
        right: 3px;
        @include rotate(-5);
        background-color: $colorWhite;
        font-size: 21px;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 0;
        line-height: 165%;
        z-index: 2;
        -webkit-box-shadow: 6px 21px 24px -8px rgba($colorBlack,0.75);
        -moz-box-shadow: 6px 21px 24px -8px rgba($colorBlack,0.75);
        box-shadow: 6px 21px 24px -8px rgba($colorBlack,0.75);
    }

    .homeoffers-carousel-item-price p {
        font-size: 52px;
        text-align: right;
        font-family: cursive;
    }    
}
@media(max-width: 1200px) {
    .search-mask-small {
        display: block;
    }
    
    .search-mask-big {
        display: none;
    }
    
    a.star {
        color: $searchFormControlsBackgroundColor;
        font-size: 20px;
    }
    
    .schnellsuche-basic-small {
        background-color: $colorWhite;
        border-top: $primaryColor solid 1px;
        border-left: $primaryColor solid 1px;
        border-right: $primaryColor solid 1px;
        padding: 15px;
    }
    
    .btn-schnellsuche-small-submit {
        position: relative !important;
        top: 0 !important;
        left: auto;
        right: auto;
        width: 100% !important;
    }
    
    .autocomplete {
        display: none;
        margin-top: 30px;
        left: -15px;
        z-index: 1100;
        background-color: $colorWhite;
        -webkit-box-shadow: 6px 21px 24px -8px rgba($colorBlack,0.75);
        -moz-box-shadow: 6px 21px 24px -8px rgba($colorBlack,0.75);
        box-shadow: 6px 21px 24px -8px rgba($colorBlack,0.75);
        border-radius: 4px !important;
        padding-left: 5px;
        padding-right: 5px;
        border-width: 0;
        ul {
            text-align: left;
            list-style: none;
            margin-left: -30px;
            li {
                min-width: 350px;
                color: $alivacolorRed;
                a {
                    color: $primaryColor;
                }
            }
        }
    }
    #autocomplete-small-destination.autocomplete {
        position: absolute;
        top: 40px;
    }
    
    .extended-search {
        background-color: $searchFormFooterBackgroundColor;
        color: $searchFormFooterTextColor;
        left: 0;
        margin-top: 0;
        bottom: 0;
        height: 25px;
        width: 100%;
        padding-top: 2px;
    }

    .extended-search.opened {
        display: none;
    }

    .schnellsuche-extended-small {
        display: none;
        background-color: $colorWhite;
        border-bottom: $primaryColor solid 1px;
        border-left: $primaryColor solid 1px;
        border-right: $primaryColor solid 1px;
        padding: 15px;
    }
    
    .homeoffers-carousel-item >div >div >img {
        display: none;
    }

    .homeoffers-carousel-item h3 {
        color: $colorWhite !important;
        @include mainNarrow;
        font-weight: bold;
        font-size: 20px;
        text-align: right;
        top: 10px;
        left: 0;
        display: inline-block;
        position: absolute;
        text-transform: uppercase;
        text-shadow: 0px 0px 10px rgba($colorBlack, 0.96);
    }

    .homeoffers-carousel-item h4 {
        color: $colorWhite !important;
        font-size: 22px;
        text-align: left;
        top: 173px;
        right: 0;
        display: inline-block;
        position: absolute;
        text-shadow: 0px 0px 10px rgba($colorBlack, 0.96);
    }

    .homeoffers-carousel-item-info {
        display: none;
    }

    .homeoffers-carousel-item-info.travelcheck {
        position: absolute;
        top: 150px;
        width: 440px;
        height: 130px;
        color: $colorWhite;
        padding: 5px;
        font-size: 21px;
        display: block;
        background-color: $featuresBgColor;
        font-size: 1.2em;
        margin-left: -20px;
    }

    .homeoffers-carousel-item-info ul {
        width: 100%;
        list-style: none;
        margin-left: 0;
        padding-left: 1.2em;
        text-indent: -1.2em;
    }

    .homeoffers-carousel-item-info li:before {
        content: "\f10a";
        font-family: "Ionicons";
        line-height: 1;
        float: left;
        width: 1.2em;
        padding-left: 10px;
        padding-top: 3px;
    }

    .homeoffers-carousel-item {
        width: 100%;
        height: 300px;
        background-repeat: no-repeat;
        background-position: center 25%;
        background-size: cover;
    }

    .homeoffers-carousel-item-price {
        position: absolute;
        top: 210px;
        width: 150px;
        height: 75px;
        right: 3px;
        background-color: $colorWhite;
        font-size: 18px;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 0;
        line-height: 165%;
        z-index: 2;
        -webkit-box-shadow: 6px 21px 24px -8px rgba($colorBlack,0.75);
        -moz-box-shadow: 6px 21px 24px -8px rgba($colorBlack,0.75);
        box-shadow: 6px 21px 24px -8px rgba($colorBlack,0.75);
        opacity: 0.8; 
    }

    .homeoffers-carousel-item-price p {
        font-size: 40px;
        text-align: right;
        font-family: cursive;
    }
}