/*PROMĚNNÉ */
@color-pink: #d31b35;
@color-light-pink: rgb(237, 214, 218);
@color-dark-pink: #cf0015;
@color-white: #fff;
@color-blue: #003873;
@color-light-grey: #dbdbdb;
@color-table: #f0f0f0;
@color-table-odd: #fbfbfb;
@color-black: #000;
@gold-gradient: #e19c30, #ffdeaa 29%, #e19c30 82%, #ebc891;
@silver-gradient: #9c9c9c, #dbdbdb 29%, #aaaaaa 82%, #ebebeb;
@bronze-gradient: #b46830, #f5a333 29%, #b96e31 82%, #eb9d32;

@font-size-base: 1.6rem;

* {
    padding: 0;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    text-decoration: none;
    font-size: @font-size-base;
    outline: none;
}

@media (max-width: 767px) {
    html {
        font-size: 50%;
    }
}

@media (min-width: 768px) {
    html {
        font-size: 55%;
    }
}

body{
    border-top: 20rem solid @color-dark-pink;
    @media(max-width: 767px){
        border-top: 8rem solid transparent;
    }
}
body.homepage{
    padding-top: 0;
    border-top: 20rem solid transparent;
    @media(max-width: 767px){
        border-top: 8rem solid transparent;
    }
}

h2, .h2 {
    color: @color-pink;
    font-size: @font-size-base * 2.5;
    font-weight: 800;
    padding-bottom: 3rem;
    line-height: 1;
    small {
        font-size: @font-size-base * 2.5;
        font-weight: 300;
    }
}

h3 {
    color: @color-pink;
    font-size: @font-size-base * 2.5;;
    font-weight: 300;
    padding: 2rem 0;
}

h4 {
    font-size: @font-size-base * 1.5;
    font-weight: 300;
    line-height: 1.5;
    strong {
        font-size: @font-size-base * 2.5;
        line-height: 1;
        display: block;
    }
}

h5 {
    font-size: @font-size-base * 1.4;
    color: @color-blue;
    font-weight: 800;
}

p {
    padding-bottom: 1em;
    &:last-of-type{
        padding-bottom: 2em;
    }
    &.nadpis{
        padding-bottom: 0em;
    }
    a {
        color: @color-pink;
        text-decoration: underline;
        &:hover {
            text-decoration: none;
        }
    }
}

.doku-box{
    padding: 2rem 3rem 0 3rem;
    margin-bottom: 3rem;
    background-color: @color-light-grey;
    h3{
        padding-top: 0!important;
        padding-bottom: 1rem;
    }
    ul{
        padding-bottom: 3rem!important;
    }
}

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

.text-right {
    text-align: right;
}

.transform-vertical(@percentage) {
    position: absolute;
    top: @percentage;
    transform+_: translateY(-@percentage);
    -webkit-transform+_: translateY(-@percentage);
    -moz-transform+_: translateY(-@percentage);
    -ms-transform+_: translateY(-@percentage);
    -o-transform+_: translateY(-@percentage);
}

.transform-horizontal(@percentage) {
    position: absolute;
    left: @percentage;
    transform+_: translateX(-@percentage);
    -webkit-transform+_: translateX(-@percentage);
    -moz-transform+_: translateX(-@percentage);
    -ms-transform+_: translateX(-@percentage);
    -o-transform+_: translateX(-@percentage);
}

.transform-rotate(@deg) {
    transform+_: rotate(@deg);
    -webkit-transform+_: rotate(@deg);
    -moz-transform+_: rotate(@deg);
    -ms-transform+_: rotate(@deg);
    -o-transform+_: rotate(@deg);
}
.transition(@time) {
    -webkit-transition: all 250ms ease;
    -moz-transition: all 250ms ease;
    -ms-transition: all 250ms ease;
    -o-transition: all 250ms ease;
    transition: all 250ms ease;

}

.font(@size: @font-size-base, @color: @color-black, @weight: 300) {
    font-size: @size;
    color: @color;
    font-weight: @weight;
}

.border-radius (@radius: 5px) {
    border-radius: @radius;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

.border-radius (@tlbr,@trbl) {
    border-radius: @tlbr @trbl;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

.border-radius (@topleft, @topright, @bottomleft, @bottomright: 5px) {
    border-radius: @topleft @topright @bottomright @bottomleft;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

body.homepage {
    background: url("../img/hp-bg.jpg") @color-white top center no-repeat;
}

/* IKONY*/
.icon {
    background-image: url("../img/icons.png");
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;

    &.icon-avatar {
        width: 41px;
        height: 42px;
        background-position: -5px -5px;
    }

    &.icon-calendar {
        width: 41px;
        height: 42px;
        background-position: -56px -5px;
    }

    &.icon-facebook {
        width: 13px;
        height: 26px;
        background-position: -107px -5px;
    }

    &.icon-kabinka {
        width: 32px;
        height: 32px;
        background-position: -130px -5px;
    }

    &.icon-key {
        width: 41px;
        height: 42px;
        background-position: -107px -47px;
    }

    &.icon-lanovka {
        width: 32px;
        height: 32px;
        background-position: -5px -99px;
    }

    &.icon-location-point {
        width: 41px;
        height: 42px;
        background-position: -47px -99px;
    }

    &.icon-map-location-black {
        width: 30px;
        height: 30px;
        background-position: -98px -99px;
    }

    &.icon-map-location-blue {
        width: 30px;
        height: 30px;
        background-position: -138px -99px;
    }

    &.icon-map-location-green {
        width: 30px;
        height: 30px;
        background-position: -98px -139px;
    }

    &.icon-map-location-red {
        width: 30px;
        height: 30px;
        background-position: -138px -139px;
    }

    &.icon-map-location {
        width: 41px;
        height: 42px;
        background-position: -172px -5px;
    }

    &.icon-medal {
        width: 41px;
        height: 42px;
        background-position: -178px -57px;
    }

    &.icon-price-tag {
        width: 41px;
        height: 42px;
        background-position: -178px -109px;
    }

    &.icon-search-red {
        width: 18px;
        height: 18px;
        background-position: -5px -57px;
    }

    &.icon-search-white {
        width: 18px;
        height: 18px;
        background-position: -33px -57px;
    }

    &.icon-ski-stick-man {
        width: 21px;
        height: 20px;
        background-position: -61px -57px;
    }

    &.icon-bus {
        width: 25px;
        height: 16px;
        background-position: -235px -158px;
    }

    &.icon-vlak {
        width: 32px;
        height: 32px;
        background-position: -5px -161px;
    }

    &.icon-vlek {
        width: 32px;
        height: 32px;
        background-position: -47px -161px;
    }

    &.icon-wifi {
        width: 23px;
        height: 20px;
        background-position: -145px -175px;
    }
    &.icon-skipass {
        width: 23px;
        height: 20px;
        background-position: -86px -175px;
    }
    &.icon-pool {
        width: 23px;
        height: 20px;
        background-position: -235px -174px;
    }
    &.icon-sauna {
        width: 23px;
        height: 20px;
        background-position: -205px -174px;
    }
    &.icon-whirlpool {
        width: 23px;
        height: 20px;
        background-position: -174px -175px;
    }
    &.icon-fitness {
        width: 23px;
        height: 20px;
        background-position: -115px -174px;
    }
}

/* BUTTONS */
.btn {
    padding: 0 3rem;
    white-space: nowrap;
    .font(1.4, @color-pink, 700);
    display: inline-block;
    vertical-align: middle;
    .border-radius(2rem);
    height: 4.1rem;
    border: none;
    position: relative;
    text-transform: uppercase;
    background: @color-white;
    line-height: 4.1rem;
    &:hover {
        text-decoration: none;
        background: @color-pink;
        color: @color-white;
    }
    &.btn-icon {
        padding: 0;
        width: 4.1rem;
        .text-center;
        i {
            vertical-align: middle;
        }
    }
    &.btn-arrow {
        padding-right: 4.5rem;
        &:after {
            content: "";
            margin: 0 1.414rem;
            border-right: solid 2px @color-pink;
            border-top: solid 2px @color-pink;
            height: 1rem;
            width: 1rem;
            vertical-align: middle;
            .transform-vertical(50%);
            .transform-rotate(45deg);
        }
    }
    &:hover.btn-arrow:after {
        border-right: solid 2px @color-white;
        border-top: solid 2px @color-white;
    }
    &.btn-blue {
        background: @color-blue;
        color: @color-white;
        &.btn-arrow:after {
            border-right: solid 2px @color-white;
            border-top: solid 2px @color-white;
        }
        &:hover {
            background: @color-pink;
        }
    }
    &.btn-pink {
        background: @color-pink;
        color: @color-white;
        &.btn-arrow:after {
            border-right: solid 2px @color-white;
            border-top: solid 2px @color-white;
        }
        &:hover {
            background: @color-blue;
        }
    }
    .btn-corner & {
        height: 8rem;
        width: 8rem;
        .border-radius(50%);
        bottom: -3rem;
        right: -3rem;
        position: absolute;
        &.btn-arrow:after {
            .transform-horizontal(10%);
            .transform-vertical(30%);
            .transform-rotate(45deg);
        }
        & .icon {
            .transform-horizontal(30%);
            .transform-vertical(30%);
        }
    }
}

.btn-corner {
    position: relative;
    overflow: hidden;
    height: 100%;
    pointer-events: none;
    a {
        pointer-events: auto;
    }
}

.more {
    font-weight: 700;
    color: @color-pink;
    text-decoration: underline;
    &:hover{
        text-decoration: none;  
    }
}

/* Table */
.table {
    display: table;
    background-size: cover;
    width: 100%;
}

.table > div {
    display: table-cell;
}

header {
    position: fixed;
    width: 100%;
    top: 0;
    background: @color-dark-pink;
    z-index: 200;
    .homepage & {
        background: none;
    }
    .scroll & {
        background: @color-dark-pink;
        .menu-wrapper {
            height: 8rem;
        }
    }
    nav {
        .menu-wrapper {
            position: relative;
            height: 20rem;
            .transition(200);
            pointer-events: none;
            & > *{
                pointer-events: all;
            }
        }
        .search {
            display: inline-block;
            .transition(200);
            .transform-vertical(40%);
            .transform-horizontal(100%);
            .scroll & {
                .transform-vertical(100%);
                .transform-horizontal(100%);
                margin-top: -1em;
                a{
                    margin-bottom: 0em;
                }
            }
            margin-top: -2em;
            input {
                display: inline-block;
                padding: 1rem 2rem;
                .border-radius(2rem);
                width: 25rem;
                border: none;
                outline: none;
                .font(@font-size-base*0.95, @color-black, 400);
                &::placeholder {
                    font-style: italic;
                    color: #a1a1a1;
                }
            }
            button {
                margin-left: -4rem;
                border: none;
                outline: none;
                background: transparent;
                width: 18px;
                height: 18px;
                padding: 0.7rem 0;
            }
            a {
                display: inline-block;
                .font(@font-size-base, @color-white, 600);
                padding: 0.2rem .5rem;
                margin-bottom: 1em;
                text-transform: uppercase;
                &:hover {
                    text-decoration: underline;
                }
            }
        }
        .menu {
            display: inline-block;
            width: 55%;
            .transform-horizontal(50%);
            .transform-vertical(40%);
            .scroll & {
                .transform-horizontal(50%);
                .transform-vertical(50%);
            }
            ul {
                list-style: none;
                .text-center;      
                @media (min-width: 992px) {
                     align-items: center;
                     display: flex;
                }
                li {
                    display: inline-block;
                    padding: 0 1.0rem;
                    @media (min-width: 992px) and (max-width: 1199px) {
                        padding: 0 .3rem;
                    }
                    a {
                        .font(@font-size-base, @color-white, 600);
                        padding: 0.2rem .5rem;
                        text-transform: uppercase;
                        &:hover {
                            text-decoration: underline;
                        }
                    }
                    .open & {
                        display: block;
                    }
                }
            }
        }
        .logo {
            display: inline-block;
            .transform-horizontal(0%);
            a {
                display: block;
                color: transparent;
                background: url("../img/logo.png") no-repeat;
                background-size: 100%;
                height: 17.1rem;
                width: 25.5rem;
                background-size: contain;
                .transition(200);
                .homepage & {
                    background-image: url("../img/hp-logo.png");
                }
                .scroll & {
                    background-image: url("../img/logo.png");
                    height: 12rem;
                    width: 15rem;
                }
                h1 {
                    margin: 0;
                    width: 0;
                    height: 0;
                    overflow: hidden;
                }
                @media (max-width: 767px) { 
                    height: 9rem!important;
                    width: 12rem!important;
                }
            }
        }

    }
}

@media (max-width: 991px) {
    header, .scroll header {
        nav {
            .menu-wrapper {
                height: 9rem;
            }
        }
    }
}
header nav .menu-wrapper.open {
    .menu {
        display: initial !important;
        background: @color-dark-pink;
        margin-top: 16rem;
        width: 100%;
        li {
            display: block;
            padding: 1.5rem 0;
            a {
                .font(@font-size-base*1.5, @color-white, 600);
            }
            &:hover {
                background: @color-table;
                a {
                    color: @color-black;
                }
            }
        }
    }
}

/* BURGER TRIGGER */
#nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {
    width: 35px;
    height: 30px;
    position: absolute;
    right: 1rem;
    top: 50%;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: translateY(-50%) rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

#nav-icon1 span, #nav-icon3 span, #nav-icon4 span {
    display: block;
    position: absolute;
    height: 6px;
    width: 100%;
    background: @color-white;
    border-radius: 6px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

#nav-icon1 span:nth-child(1) {
    top: 0px;
}

#nav-icon1 span:nth-child(2) {
    top: 12px;
}

#nav-icon1 span:nth-child(3) {
    top: 24px;
}

#nav-icon1.open span:nth-child(1) {
    top: 12px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}

#nav-icon1.open span:nth-child(2) {
    opacity: 0;
    left: -60px;
}

#nav-icon1.open span:nth-child(3) {
    top: 12px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}
.blue, .green {
    background: @color-blue;
    margin-top: 2rem;
    &.green{
        background-color: #8BC34A;
        margin-top: 0;
        text-align: center;
    }
    &.table{
        p{
            margin: 0;
            padding: 0;
            text-align: center;
            font-weight: 600;
            color: #fff;
            a{
                margin: 0 1rem;
            }
        }
    }

    padding: 2rem 4rem;
    a{
        white-space: nowrap;
    }
    a,strong {
        color: @color-white;
        font-size: 1.7rem;
        text-transform: uppercase;
        strong {
            padding-right: 2rem;
        }
    }
    a:hover{
        text-decoration: underline;
    }
    strong {
        padding-right: 2rem;
    }
    & > div{
        vertical-align: middle;
    }
    & > div:nth-child(2) {
        text-align: right;
    }
    @media(max-width: 600px){
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 10;
        padding: .5rem;
        line-height: 1.25;
        text-align: center;
        a,strong {
            color: @color-white;
            font-size: 1.4rem;
        }
        strong {
            padding-right: 1rem;
        }
        .search-button{
            display: none;
        }
        &.blue{
            display: none;
        }
    }
}

.mobile-search-button {
    display: none !important;
    @media(max-width: 600px){
        display: block !important;
        text-align: center;
        padding: 1rem !important;
        button {
            background: #003873;
            color: #fff;
        }
    }
}
/* Formulář hledání */

.search-form {
    @media(min-width: 800px){
        margin: 0 -15px;
    }
    form {
        padding-top: 0rem;
    }
    .row {
        padding: 2rem 2rem;
        div[class*='col-'] {
            display: table;
            padding: 0 2rem;
        }
    }

    .input-rounded{
        display: inline-block;
        padding: 1rem 2rem;
        .border-radius(2rem);
        width: 25rem;
        border: none;
        outline: none;
        .font(@font-size-base*0.95, @color-black, 400);
        &::placeholder {
            font-style: italic;
            color: #a1a1a1;
        }
    }
    .form-control {

        @media(max-width: 767px){
            &:first-child{
                width: 80%;
            }
        }
        display: table-cell;
        vertical-align: middle;
	width: 100%;
        border-bottom: solid 1px @color-light-grey;
        i {
            float: right;
        }
        label, select {
            text-transform: uppercase;
            display: block;
        }
        label {
            font-size: 1.5rem;
            font-weight: 700;
        }
        input {
            padding: 0.4rem 0;
            font-size: @font-size-base *1.2;
            font-weight: 300;
            border: none;
            width: 80%;
            outline: none;
            height: 4.5rem;
            cursor: pointer;
            &[type=checkbox]{
                width: 2rem;
                height: 2.5rem;
                vertical-align: middle;
                margin-right: 1rem;
            }
        }

        #slider {
            display: inline-block;
            width: 50%;
            margin: 2rem 2rem;
            &.noUi-target {
                height: 0.6rem;
                border: none;
            }
            .noUi-handle {
                background: #6A6A6A;
                box-shadow: none;
                width: 2rem;
                height: 2rem;
                outline: none;
                cursor: pointer;
                .border-radius(50%);
                &:after, &:before {
                    background: none;
                }
            }
            .noUi-connects {
                background: @color-light-grey;
                .noUi-connect {
                    background: @color-pink;
                }
            }
        }
        .slider input[type='text'] {
            width: 15%;
            border: none;
            text-align: center;
            font-size: @font-size-base * 0.9;
        }
    }

}
/*
.sel {
    font-size: 1rem;
    display: inline-block;
    background-color: transparent;
    position: relative;
    cursor: pointer;
    height: 4.5rem;
    width: 100%;
}


.sel::before {
    position: absolute;
    content: url("../img/down-arrow.png");
    left: 100%;
    top: calc(50% - 1em);
}
*/
.sel, .date-input{
    position: relative;
    &::before{
        position: absolute;
        content: url("../img/down-arrow.png");
        right: 1rem;
        top: calc(50% - 1em);
        cursor: pointer;
        pointer-events: none;
    }
    & > input {
        width: 100%!important;
    }
}

.sel.active::before {
    transform: rotateX(-180deg);
}

.sel__placeholder {
    display: block;
    font-size: @font-size-base *1.2;
    color: @color-black;
    padding: 0.2em 0.5em;
    text-align: left;
    pointer-events: none;
    user-select: none;
    visibility: visible;
    font-weight: 300;
}

.sel.active .sel__placeholder {
    visibility: hidden;
}

.sel__placeholder::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.2em 0.5em;
    content: attr(data-placeholder);
    visibility: hidden;
}

.sel.active .sel__placeholder::before {
    visibility: visible;
}

.sel__box {
    position: absolute;
    top: calc(100% + 4px);
    left: -4px;
    display: none;
    list-style-type: none;
    text-align: left;
    font-size: 1em;
    background-color: #FFF;
    width: calc(100% + 8px);
    box-sizing: border-box;
    max-height: 30rem;
    overflow: auto;
}

.sel.active .sel__box {
    display: block;
    animation: fadeInUp 500ms;
    z-index: 3;
}

.sel__box__options {
    display: list-item;
    font-size: @font-size-base;
    color: @color-blue;
    padding: 0.5em 1em;
    user-select: none;
}

.sel__box__options.selected::after {
    display: inline;
}

.sel__box__options:hover {
    background-color: @color-table;
}

.sel.sel-checkbox .sel__box__options{
    padding: 0;
    label{
        padding: 0.5em 1em;
    }
}
.daterangepicker {
    td.in-range {
        background-color: @color-table;
    }
    td.active, td.active:hover {
        background: @color-pink;
    }
    .calendar-table tr td:nth-child(6){
        background: #00387340;
        border-radius: 0;
    }
}

.main-content {
    .heading-img {
        margin: 0 auto;
        text-align: center;
        img {
            padding: 8rem 2rem;
            width: 70rem;
            max-width: 100%;
        }
    }
    p{
        text-align: justify;
    }
    padding-top: 0;
    @media (max-width: 991px) {
        /*     padding-top: 12rem;*/
    }
    .container {
        background: @color-white;
    }

    .content {
        margin-top: 3rem;
        @media (min-width: 991px) {
            padding-left: 3rem;
        }

    }
    .relative {
        position: relative;
    }
    .top-nav {
        position: relative;
        min-height: 13rem;
        padding:0;
        &.has-image{
            background: @color-light-grey;
            &:after {
                width: 100%;
                content: "";
                background: url("../img/menu-wave.png") top center no-repeat;
                height: 139px;
                position: absolute;
                top: 0;
                z-index: 100;
            }
            .heading {
                min-height: 6rem;
                h2 {
                    .transform-vertical(50%);
                }
                img {
                    height: 35rem;
                    width: 100%;
                    object-fit: cover;
                }
            }
        }
        .heading {
            h2 {
                background: @color-white;
                vertical-align: middle;
                padding: 2rem;
                margin-right: 2rem;
            }
        }
    }
    .sub-menu {
        background: @color-light-grey;
        .text-center;
        position: relative;
        min-height: 6rem;
        @media (max-width: 400px) {
            min-height: 12rem;
        }
        ul {
            list-style: none;
            width: 100%;
            .transform-vertical(50%);
            .transform-horizontal(50%);
            li {
                display: inline-block;
                padding: 0 1.5rem;
                a {
                    font-size: @font-size-base * 1.3;
                    color: @color-black;
                    font-weight: 300;
                    &:hover {
                        color: @color-pink;
                    }
                }
                &.active a {
                    color: @color-pink;
                    font-weight: 800;
                }
            }
        }
    }
}

/* hotel-description */
.price-buttons{
    padding-top: 2rem;
}
.hotel-description,.area-description{
    p{
        /*strong{
            display: block;
            padding-top: 1rem;
        }*/
        padding: .5rem 0;
    }
    ul,ol{
        padding-left: 4rem;
        padding-bottom: 1rem;
    }
}

/* badges */
.badges {
    padding-bottom: 3rem;
}

.badge {
    display: inline-block;
    padding: .5rem 1rem;
    height: 3rem;
    margin-bottom: .4rem;
    .text-center;
    white-space: nowrap;
    .border-radius(2rem);
    font-weight: 700;
    font-size: 1.3rem;
    min-width: 6.5rem;
    &.badge-icon{
        min-width: auto;
    }
    .featured-products & {
        display: block;
        .transform-vertical(5%);
        .border-radius(0, 2rem, 0, 2rem)
    }
    &.badge-1 {
        background-image: svg-gradient(to top right, @gold-gradient);
    }
    &.badge-2 {
        background-image: svg-gradient(to top right, @silver-gradient);
    }
    &.badge-3 {
        background-image: svg-gradient(to top right, @bronze-gradient);
    }
    &.badge-blue {
        background: @color-blue;
        color: @color-white;
    }
    &.badge-pink {
        background: @color-pink;
        color: @color-white;
        i {
            vertical-align: middle;
        }
        .featured-products & {
            .transform-vertical(95%);
        }
    }
}

/* Featured products */
.featured-products {
    h3, p {
        .text-center;
    }
    .row {
        padding-top: 4rem;
    }
    .products {
        padding-top: 4rem;
        .product {
            position: relative;
            border: solid .1rem @color-light-grey;
            margin-bottom: 2rem;
            cursor: pointer;
            .img-wrapper {
                position: relative;
                img {
                    width: 100%;
                }
            }
            .info-wrapper {
                padding: 1.5rem 2rem;
                h5 {
                    font-weight: 300;
                }
                p {
                    text-align: left;
                    padding-bottom: 0;
                    strong, & {
                        font-size: 1.5rem;
                    }
                }
            }
            .price-wrapper {
                padding: 0 4rem 2rem 2rem;
                text-transform: uppercase;
                font-size: 1.5rem;
                font-weight: 700;
                strong {
                    color: @color-pink;
                    font-size: 2.5rem;
                    white-space: nowrap;
                }
            }
            .detail {
                position: absolute;
                height: 100%;
                width: 100%;
                top: 0;
                pointer-events: none;
                a {
                    pointer-events: auto;
                }
            }
            .badges{
                position: absolute;
                top: 5%;
                right: 0;
                .badge{
                    position: relative;
                    border-radius: 2rem 0 0 2rem;
                }
            }
        }
    }
}

/* simple gallery */
.simple-gallery {
    margin: 4rem -1.5rem;
    position: relative;
    .slick-list {
        /*margin: 0 1.7rem;*/
    }
    .slick-slide {
        padding: 0 0.8rem;
        img {
            width: 100%;
            object-fit: cover;
        }
    }
    .slick-arrow {
        border: none;
        background: @color-pink;
        height: 5rem;
        width: 5rem;
        z-index: 5;
        margin: 0;
        color: transparent;
        overflow: hidden;
        outline: none;
        &:hover {
            background: @color-blue;
        }
        &:after {
            content: "";
            width: 1.5rem;
            height: 1.5rem;
            border-bottom: solid 2px @color-white;
            border-right: solid 2px @color-white;
        }
        &.slick-prev {
            .transform-horizontal(0%);
            .transform-vertical(50%);
            &:after {
                .transform-horizontal(55%);
                .transform-vertical(50%);
                .transform-rotate(135deg);
            }
        }
        &.slick-next {
            .transform-horizontal(100%);
            .transform-vertical(50%);
            &:after {
                .transform-horizontal(45%);
                .transform-vertical(50%);
                .transform-rotate(-45deg);
            }
        }
    }
}

/* simple table */
.simple-table {
    width: 100%;
    background: @color-table;
    border: solid 3px @color-table;
    tbody tr:nth-child(odd) td {
        background: @color-table-odd;
    }
    td {
        padding: 0.5rem;
        width: 12%;
        &:first-child {
            padding-left: 3rem;
            white-space: nowrap;
            width: 30rem;
        }
        &:last-child {
            padding-right: 3rem;
        }
    }
    thead {
        h5 {
            .text-center;
            padding: 4rem 0;
        }
    }
}
/* notes table */
.notes-table{
    td + td{
        font-weight: 600;
        text-align: right;
        white-space: nowrap;
    }
    td{
        border-bottom: .1rem solid @color-blue;
        &.red{
            color: @color-pink;
        }
        &.green{
            color: @color-blue;
        }
    }
}

/* price table */
.responsive-table-wrapper {
    background-color: #efeff0;
    .responsive-table {
        position: relative;
        margin-left: 10rem;
        .price-table > tbody > tr,
        .price-table > thead > tr{
            th.fcol,
            td.fcol {
                position: fixed;
                background-color: @color-table-odd;
                width: 10rem;
                left: .6rem;
                font-weight: 600;
            }
            & th.fcol,
            &:nth-child(even) > td:first-child{
                background-color: @color-table; 
            }
        }
    }
}

.price-table-detail,
.price-table, body .page table {
    width: 100%;
    background: @color-table;
    border: solid 3px @color-table;
    tbody tr:first-child td{
        border-top: 1px solid #cf0015;
    }
    tbody tr:nth-child(odd) td,
        tbody tr:nth-child(odd).odd td,
        tbody tr:nth-child(odd) td.odd {
        background: @color-table-odd; 
    }
    tbody tr:nth-child(odd).even td,
        tbody tr:nth-child(odd) td.even,
        tbody tr.even td.even  {
        background: @color-table; 
    }
    tbody tr:nth-child(odd).odd td,
        tbody tr:nth-child(odd) td.odd,
        tbody tr.odd td.odd {
        background: #fbfbfb ; 
    }
    /*    tbody:nth-child(odd) td.column-area{
            background: @color-table-odd !important; 
        }
        tbody:nth-child(even) td.column-area{
            background: @color-table !important; 
        }*/
    tbody.hoverable:nth-child(odd):hover td.column-area,
        tbody.hoverable:nth-child(even):hover td.column-area{
        background: @color-light-pink !important;
    }
    td,th{
        white-space: nowrap;
        padding: 0.5rem;
        .text-center;
    }
    th{
        white-space: normal;
    }
    .column-area,
    .column-hotel{
        padding: 0.5rem 1rem;
        text-align: left;
    }
    tbody {
        .hosts{
            .text-center;
        }
        a{
            color: #000;
            &:hover{
                text-decoration: underline;
            }
        }
        &.hoverable:hover td,
            tr:hover td{
            background: @color-light-pink !important;
        }
        .price{
            cursor: pointer;
            text-align: center;
            padding: 0.5rem 2rem;
            &:hover,&.highlight{
                background: @color-pink!important;
                color: #fff;
                a{
                    color: #fff;                    
                }
            }
            a{
                display: block;
                color: @color-pink;
                &:hover{
                    color: #fff;
                }
            }
        }       
    }
}
.price-table-detail{
    td,th {
        color: #000;
        padding: 0!important;
        a{
            padding: 0.5rem!important;
            color: @color-pink !important;
            &:hover{
                color: #fff!important;
            }
        }
    }
    tbody tr:nth-child(even) td {
        background: @color-table;
    }
}

.price-table-footer{
    padding: 2rem 2rem 1rem;
}

.responsive-table{
    max-width: 100%;
    overflow: auto;
}

.table-annotation {
    width: 80%;
    margin: 3rem;
    line-height: 1;
    list-style: none;
    li:before {
        content: "•";
        padding-right: 1.5rem;
        color: @color-pink;
        vertical-align: middle;
        font-size: @font-size-base * 2;
    }
}

#cboxLoadedContent{
    padding: 2rem 0;
}

/* LEFT MENU */
.left-side-bar {
    .left-menu {
        position: relative;
        h2 {
            text-transform: uppercase;
        }
        margin: 3rem 0;
        border-right: solid 1px @color-light-grey;
        ul {
            list-style: none;
            width: 80%;
            line-height: 1.5;
            li a {
                color: @color-black;
                &:hover {
                    text-decoration: none;
                    color: @color-pink;
                    font-weight: 400;
                }
            }
        }
        .btn-open {
            display: none;
            .border-radius(0, 2rem, 0, 2rem);
            width: 3rem;
            padding: 0;
            z-index: 10;
            top: 50%;
            position: fixed;
            left: 0;
            @media (min-width: 768px) and (max-width: 991px) {

            }
            &:after {
                content: "";
                border-bottom: solid 2px @color-white;
                border-right: solid 2px @color-white;
                width: 1rem;
                height: 1rem;
                vertical-align: middle;
                .transform-vertical(50%);
                .transform-horizontal(45%);
                .transform-rotate(-45deg);
            }

        }
    }
    @media (max-width: 768px) {
        left: -28.2rem;
        width: 30rem;
    }
    @media (min-width: 768px) and (max-width: 991px) {
        left: -28rem;
        width: 30rem;
    }
    @media (max-width: 991px) {
        position: absolute;
        z-index: 40;
        &:before {
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            margin: 0 -16px;
            background: @color-white;
            z-index: 30;
        }

        &.open {
            left: 0;
            &:before {
                z-index: -5;
            }
            & > div {
                background-color: @color-white;
            }
            .btn-open {
                &:after {
                    .transform-vertical(50%);
                    .transform-horizontal(45%);
                    .transform-rotate(135deg);
                }
            }
        }

        .btn-open {
            display: initial !important;
        }
    }

}

.right-side-bar {
    h4 {
        .h2;
        .font(@font-size-base*1.5, @color-pink, 800);
        padding-bottom: 1rem;
        text-align: left;
    }
    h5{
        font-size: 1.6rem;
    }
    & > div {
        margin-bottom: 2rem;
    }
    p{
        padding-bottom:.5rem;
    }
    .side-bar-parrams{
        @media (max-width: 767px) {
            margin-top: 2rem;
        }
        ul {
            background: @color-table;
            padding: 2rem 2rem 1rem 2rem;
            list-style: none;
            li {
                @media (max-width: 767px) {
                    display: inline-block;
                    &.heading {
                        display: block;
                    }
                }
                table {
                    width: 100%;
                    margin-bottom: .5rem;
                    td {
                        .text-center;
                    }
                }
                p {
                    font-size: @font-size-base;
                    line-height: 1.5;
                }
            }
        }
    }
    .side-bar-gallery {
        .text-center;
        h5 {
            color: @color-pink;
            text-align: left;
        }
        ul {
            list-style: none;
            li {
                padding: 1rem 0;
                img {
                    width: 100%;
                    transform: none;
                }
            }
        }
    }
}

.map {

    .map-wrapper {
        iframe {
            width: 100%;
            height: 50vw;
            max-height: 40rem;
        }
        img {
            width: 100%
        }
    }
}

/* page style */
body .page{
    padding-top: 4rem;
    @media(max-width: 600px){
        padding-top: 6rem;
    }
    h3{
        font-weight: 400;
        font-size: 3rem;
        @media(max-width: 600px){
            font-size: 2.6rem;
        }
    }
    h4{
        font-weight: 600;
    }
    ol, ul{
        padding: 1rem 0 1rem 4rem;
    }
    ol ol, ul ul{
        padding-top: 0;
    }
    #referenceFiles{
        h3{
            padding-bottom: 1rem;
        }
        ul{
            padding: 0;
            list-style: none;
            li{
                background: @color-table;
                padding: 0.5rem 1.5rem;
                &:nth-child(odd){
                    background: @color-table-odd;
                }
                a{
                    color: #000;
                    &:hover{
                        text-decoration: underline;
                    }
                }
            }
        }
    }
    .ramecek-tab{
        width: auto;
        td{
            padding: 0;
            &.podkladtop{
                padding: .5rem 1rem;
            }
        }
    }
    table.ramecek,
    table.ramecek-tab{
        tr{
            &:hover{
                td{
                    background-color: #efeff0 !important;
                    &.podkladtop{
                        background-color: #fbfbfb !important;
                    }
                }
            }
        }
    }
    .podkladtop{
        padding: .5rem 1rem;
        color: @color-pink;
        font-size: 2.2rem;
        font-weight: 600;
        background-color: #fbfbfb !important;
        @media(max-width: 600px){
            font-size: 2rem;
        }
    }

    iframe{
        display: block;
        max-width: 100%!important;
    }
}


/* forms */
.form-message,
.alert.alert-success,
.form_message {
    background-color: #6ebc46;
    font-size: 20px;
    font-weight: 600;
    padding: 10px;
    margin-bottom: 20px;
    p {
        color: #fff;
        font-size: 18px;
        font-weight: 600;
        position: relative;
        text-align: center;
        font-weight: 600;
        max-width: 500px;
        width: 100%;
        margin: 0px auto;
        padding: 5px;
        &:before {
            content: '';
            display: block;
            position: absolute;
            top: 10px;
            left: -35px;
            height: 10px;
            width: 20px;
            border-bottom: 3px solid #fff;
            border-left: 3px solid #fff;
            transform: rotate(-45deg);
        }
    }
}
body .page form{
    max-width: 50rem;
    width: 100%;
    margin: 0 auto;
    text-align: left;
    &.reservation-form{
        max-width: 80rem;
    }
    input[type=text],  select,  textarea {
        width: 100%;
        padding:  .5rem;
        border: 1px solid #e0e0e0;
        font-size: 14px;
        resize: none;
        max-height: 20rem;
    }
    input[type=text]{
        padding: .6rem .5rem;
    }
    .control-group,  .form-group,.form-actions {
        margin-bottom: 10px;
    }


    .error, .error .help-block,  {
        color: @color-dark-pink;
        display: block;
        font-weight: 400;
    }
    .error input, .error select, .error textarea,
    input.error ,select.error , textarea.error {
        border-color: @color-dark-pink;
    }
    label {
        font-weight: 600;
        font-size: 14px;
        .required {
            color: @color-dark-pink;
        }
    }

    .form-actions {
        text-align: center; 
        input {
            border: 0;
            cursor: pointer;
        }
    }
    .control-group-radio {
        margin-bottom: 20px;
        .radio {
            display: block;
            margin-left: 20px;
            margin-top: 5px;
        }
    }
    .control-group.control-group-checkbox {
        padding-left: 60px;
        label {
            font-size: 12px;
            font-weight: 400;
        }
        input[type=checkbox] {
            float: left;
            margin-left: -20px;
        }
    }
    .g-recaptcha {
        &> div{
            margin: 0 auto;
        }
        margin-top: 20px;
        margin-bottom: 10px;
        transform-origin: left;
    }
    .day-price .controls{
        float: right;
        color: #cf0014;
        font-weight: 600;
        font-size: 1.8rem;
    }
    .detail-href{
        float: right;
        a{
            color: #cf0014;
        }
    }
}

/* pagination */
.pagination{
    list-style: none;
    li{
        display: inline-block;
        a{
            display: block;    
            padding: .25rem 1rem;
            margin: 0 .125rem;
            color: #003873;
            &.active,&:hover{
                background-color: @color-blue;    
                color: #fff
            }
        }
    } 
}

/* FOOTER */
#footer-products {
    margin-top: 4rem;
    background: url("../img/footer-products-bg.jpg") top center no-repeat;
    background-size: cover;
    position: relative;
    padding: 8rem 0;
    .click{
        cursor: pointer;
    }
    h4 {
        text-transform: uppercase;
        background: @color-pink;
        display: inline-block;
        text-align: right;
        padding: 3rem;
        margin-left: -2rem;
        color: @color-white;
        width: 90%;
        .transform-vertical(20%);
        @media (min-width: 520px) and (max-width: 991px) {
            right: 5rem;
            max-width: 60%;
            font-size: @font-size-base;
            strong {
                font-size: @font-size-base*1.5;
            }
        }
        @media (min-width: 992px) and (max-width: 1199px) {
            font-size: @font-size-base*1.2;
            strong {
                font-size: @font-size-base*1.8;
            }
        }
    }
    p {
        padding: 0 0 0 4rem;
        font-size: @font-size-base *1.3;
        font-weight: 300;

        float: left;
        max-width: 55%;
        background-color: rgba(255, 255, 255, 0.5);
        .transform-vertical(85%);
        @media (max-width: 991px) {
            right: 5rem;
        }
        a{
            font-size: @font-size-base *1.3;
            font-weight: 300;
            text-decoration: none;
            color: #000;
            &:hover{
                text-decoration: underline;
            }
        }

    }

    .table > div {
        padding: 2rem;
        vertical-align: middle;
        width: 33%;

        @media (max-width: 991px) {
            width: 100%;
            max-width: 40rem;
            margin: 0 auto;
            display: block;
        }
        & > div {
            position: relative;
            height: 323px;

        }
        &:nth-child(1) > div {
            background: url("../img/footer-product-1.jpg") no-repeat right top;
        }
        &:nth-child(2) > div {
            background: url("../img/footer-product-2.jpg") no-repeat right top;
        }
        &:nth-child(3) > div {
            background: url("../img/footer-product-3.jpg") no-repeat right top;
        }
    }
}

footer {
    nav {
        padding: 3rem 0;
        @media(min-width: 601px){
            float: left;
        }
        .menu-wrapper {
            ul {
                list-style: none;
                li {
                    display: inline-block;
                    padding: 0 3rem;
                    @media(max-width: 600px){
                        display: block;
                        text-align: center;
                        margin: 0 auto;
                    }
                    a {
                        .font(@font-size-base, @color-blue, 600);
                        &:hover {
                            color: @color-pink;
                        }
                    }
                }
            }
        }
    }
    .footer-menu {
        border-bottom: solid 1px @color-light-grey;
        text-align: center;
        & > a {
            @media(min-width: 601px){
                float: right;
            }
            margin: 3rem 0;
        }
    }
    .copy {
        .text-center;
        padding: 3rem 0;
        font-size: @font-size-base * 0.9;
    }

}