@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";

.btn {
    border-radius: 0;
    border-width: 3px;
}

#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
    color: #ffffff;
    -webkit-transform: rotateX(90deg) translateY(-23px);
    -moz-transform: rotateX(90deg) translateY(-23px);
    transform: rotateX(90deg) translateY(-23px);
    -ms-transform: none;
}

    #cssmenu > ul > li:hover > a::before,
    #cssmenu > ul > li > a:hover::before {
        background: #007bff;
    }

#cssmenu > ul > li.active > a {
    color: #ffffff;
}

#cssmenu > ul > li > a {
    padding: 16px 20px;
    font-size: 14px;
    color: white;
    letter-spacing: 1px;
    text-decoration: none;
    /*background: #000000;*/
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    /*border-style:solid;
    border-color:#007bff;
    border-width:1px;
    margin-left:2px;*/
}


    #cssmenu > ul > li > a::before {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: -1;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding: 16px 20px;
        color: #ffffff;
        background: #19799f;
        content: attr(data-title);
        -webkit-transition: background 0.3s;
        -moz-transition: background 0.3s;
        transition: background 0.3s;
        -webkit-transform: rotateX(-90deg);
        -moz-transform: rotateX(-90deg);
        transform: rotateX(-90deg);
        -webkit-transform-origin: 50% 0;
        -moz-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -ms-transform: translateY(- -18px);
    }


.flip-container {
    perspective: 1000px;
}
    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 155px;
    height: 40px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
    padding-left: 50px;
}

.vertical.flip-container {
    position: relative;
}

.vertical .back {
    transform: rotateX(180deg);
}

.vertical.flip-container .flipper {
    transform-origin: 100% 20px; /* half of height */
}

.vertical.flip-container:hover .flipper {
    transform: rotateX(-180deg);
}

.btn-round {
    background-image: linear-gradient(to bottom right, #0056b3, #4da3ff);
    border-radius: 4rem;
    color: white;
    transition: 0.3s;
    box-shadow: 0.1rem 0.2rem #4da3ff;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-family: 'Exo 2', sans-serif;
    min-width: 160px;
}

    .btn-round:hover {
        background-image: linear-gradient(to bottom right, #4da3ff, #0056b3);
        color: white;
        box-shadow: 0.1rem 0.2rem #0056b3;
    }

    .btn-round:focus, .btn-primary.focus {
        background: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
    }


* {
    margin: 0px;
    padding: 0px;
}


.context {
    width: 100%;
    position: absolute;
    top: 50vh;
}

    .context h1 {
        text-align: center;
        color: #fff;
        font-size: 50px;
    }


.area {
    background: #4e54c8;
    background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
    width: 100%;
    height: 100vh;
}

.circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

    .circles li {
        position: absolute;
        display: block;
        list-style: none;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.2);
        animation: animate 25s linear infinite;
        bottom: -150px;
    }

        .circles li:nth-child(1) {
            left: 25%;
            width: 80px;
            height: 80px;
            animation-delay: 0s;
        }


        .circles li:nth-child(2) {
            left: 10%;
            width: 20px;
            height: 20px;
            animation-delay: 2s;
            animation-duration: 12s;
        }

        .circles li:nth-child(3) {
            left: 70%;
            width: 20px;
            height: 20px;
            animation-delay: 4s;
        }

        .circles li:nth-child(4) {
            left: 40%;
            width: 60px;
            height: 60px;
            animation-delay: 0s;
            animation-duration: 18s;
        }

        .circles li:nth-child(5) {
            left: 65%;
            width: 20px;
            height: 20px;
            animation-delay: 0s;
        }

        .circles li:nth-child(6) {
            left: 75%;
            width: 110px;
            height: 110px;
            animation-delay: 3s;
        }

        .circles li:nth-child(7) {
            left: 35%;
            width: 150px;
            height: 150px;
            animation-delay: 7s;
        }

        .circles li:nth-child(8) {
            left: 50%;
            width: 25px;
            height: 25px;
            animation-delay: 15s;
            animation-duration: 45s;
        }

        .circles li:nth-child(9) {
            left: 20%;
            width: 15px;
            height: 15px;
            animation-delay: 2s;
            animation-duration: 35s;
        }

        .circles li:nth-child(10) {
            left: 85%;
            width: 150px;
            height: 150px;
            animation-delay: 0s;
            animation-duration: 11s;
        }



@keyframes animate {

    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100% {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}

.contacttop {
    width: 100%;
    height: 40px;
    background: #007bff;
    font-size: 12px;
    padding: 12px 0;
    left: 0;
    right: 0;
    top: 0;
    position: absolute;
    z-index: 1030;
    color: #727272;
}

.short_contact_list ul li {
    display: inline-block;
    list-style: none;
}

    .short_contact_list ul li a {
        color: white;
        margin-right: 50px;
    }

        .short_contact_list ul li a i {
            color: black;
            margin-right: 7px;
        }

.social_media_links a {
    font-size: 15px;
    color: white;
    margin-right: 12px;
}

#hotelmanbg {
    background: url(../img/bgimage.jpg) center top no-repeat fixed;
    background-size: cover;
    position: relative;
}

.form-control {
    border-radius: 0;
    font-size: 0.8rem;
    height: unset;
    color: #000000;
}


#regform input, #regform select, #regform textarea {
    width: 100%;
}

#regform h4 {
    font-size: 1rem;
    font-style: italic;
    color: #000000;
}

#regform label {
    color: #000000;
}

#regform .row {
    padding: 20px 0 5px 0;
    border-bottom: 1px solid #ffffff;
}

#rsvform {
    font-size: 0.9rem;
    padding-top: 20px;
}

    #rsvform input, #rsvform select {
        width: 80%;
    }

    #rsvform .row {
        padding: 3px 0 0 0;
        border-bottom: unset;
    }

::-webkit-input-placeholder { /* Edge */
    color: #ebb380;
}

:-ms-input-placeholder { /* Internet Explorer */
    color: #ebb380;
}

::placeholder {
    color: #ebb380;
}

.table {
    border-color: #ffffff;
}

.roomStat {
    border-style: solid;
    background-color: #e8f4f8;
    float: left;
    text-align: center;
    position: relative;
    min-height: 50px;
    min-width: 60px;
}

.roomA {
    float: left;
    text-align: left;
    position: relative;
    min-width: 120px;
    width: 16%;
}

@media (min-width: 1240px) {
    .roomStat {
        width: 8%;
    }
}

@media (max-width: 1239px) {
    .roomStat {
        width: 13%;
    }
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 800px;
        margin: 1.75rem auto;
    }
}

.ui-datepicker-trigger {
    height: 20px;
}

.table td {
    padding: 0.25rem;
}

.modal-open {
    overflow: scroll !important;
}

.sweep {
    animation-name: move;
    animation-duration: 2s;
    animation-iteration-count: 1;
}


@keyframes move {
    0% {
        bottom: 0;
        right: 0;
        transform: rotateZ(30deg);
    }

    12.5% {
        bottom: 0;
        left: 50%;
        margin-left: -10px;
        transform: rotateZ(-90deg);
    }

    25% {
        bottom: 0;
        left: 0;
        transform: rotateZ(30deg);
    }

    37.5% {
        top: 50%;
        margin-top: -10px;
        left: 0;
        transform: rotateZ(-90deg);
    }

    50% {
        top: 0;
        left: 0;
        transform: rotateZ(30deg);
    }

    62.5% {
        top: 0;
        left: 50%;
        margin-left: -10px;
        transform: rotateZ(-90deg);
    }

    75% {
        top: 0;
        right: 0;
        transform: rotateZ(30deg);
    }

    87.5% {
        top: 50%;
        right: 0;
        margin-top: -10px;
        transform: rotateZ(-90deg);
    }

    100% {
        bottom: 0;
        right: 0;
        transform: rotateZ(30deg);
    }
}

.controlSmaller {
    display: block;
    width: 100%;
    height: 25px;
    padding: 2px 8px;
    font-size: 12px;
    font-family: Consolas;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.btn-top {
    white-space: normal;
    width: 90px;
    height: 50px;
    color: black;
    font-size: 10px;
    font-weight: bold;
    border-color: #2e6da4;
    display: inline-block;
    padding: 3px 6px;
    margin-bottom: 0;
    line-height: 1.42857143;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: linear-gradient(to bottom right,#8083eb,#e980eb);
    border: 1px solid transparent;
    border-radius: 50px;
    margin-bottom: 3px;
}

.btn-circle {
    height: 80px;
    width: 80px;
    border-radius: 50%;
    background: #d2f2ae;
    border-color: #8c40e0;
    border-width: 6px;
}

.btn-top:focus,
.btn-top:active:focus,
.btn-top.active:focus,
.btn-top.focus,
.btn-top:active.focus,
.btn-top.active.focus {
}

.btn-top:hover,
.btn-top:focus,
.btn-top.focus {
    color: white;
    text-decoration: none;
}

.btn-top:active,
.btn-top.active {
}

.btn-top.disabled,
.btn-top[disabled],
.LabelTextbox {
    background: rgba(0,0,0,0);
    border: none;
}

#printHeader {
    display: none;
}

@media print {
    #printHeader {
        display: block;
        margin-bottom: 30px;
    }

    ::-webkit-input-placeholder {
        color: transparent !important;
    }

    :-moz-placeholder {
        color: transparent !important;
    }

    ::-moz-placeholder {
        color: transparent !important;
    }

    :-ms-input-placeholder {
        color: transparent !important;
    }
}

.calendarDay {
    position: relative;
}

    .calendarDay .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
        bottom: 100%;
        left: 50%;
        margin-left: -60px;
    }

    .calendarDay:hover .tooltiptext {
        visibility: visible;
    }

.table-dark th, .table-dark td, .table-dark thead th {
    border-color: #32383e !important;
}

@media print {
    .calendarTable {
        color: black !important;
    }

    .table-dark th, .table-dark td, .table-dark thead th {
        -webkit-print-color-adjust: exact;
    }

    .calendarDay {
        -webkit-print-color-adjust: exact;
    }
}

#page-border {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border: 2px solid black;
}

#footer {
    position: fixed;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0,0.7);
    padding: 0 0 30px 0;
    color: #eee;
    font-size: 14px;
    z-index: 1000;
    width: 100%;
}

    #footer .copyright {
        text-align: center;
        padding-top: 30px;
    }

.image_container {
    width: 100%;
    height: 350px;
    text-align: center;
    line-height: 200px;
}

    .image_container img {
        vertical-align: middle;
    }