/*   
Theme Name: Pearl Beach
Description: Theme for Pearl Beach
Author: Olga Buhaiova
Author URI:
Version: 1.1
*/

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}

/*@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@200;400;600&display=swap');*/

@font-face {
    font-family: 'CooperMd';
    src: url('assets/fonts/CooperBT/cooper_medium_bt-webfont.eot');
    src: url('assets/fonts/CooperBT/cooper_medium_bt-webfont.eot?#iefix') format('embedded-opentype'),
    url('assets/fonts/CooperBT/cooper_medium_bt-webfont.woff') format('woff'),
    url('assets/fonts/CooperBT/cooper_medium_bt-webfont.ttf') format('truetype'),
    url('assets/fonts/CooperBT/cooper_medium_bt-webfont.svg#cooper_md_btmedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

*,*:after,*:before {
    box-sizing: border-box;
}
:root {
    --colorBrown: #D2AF69;
    --mainFont: 'Catamaran', sans-serif;
}
html{
    scroll-behavior: smooth;
}
body {
    font: 400 16px Roboto, sans-serif;
    line-height: 160%;
    color: #1C2A50;
    max-width: 1940px;
    margin: 0 auto;
}
body.no-scroll {
    overflow: hidden
}

.container {
    max-width: 1340px;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}
input[type="text"],
input[type="email"],
input[type="tel"]{
    border: 1px solid #717171;
    height: 64px;
    font: 18px/62px var(--mainFont);
    color: white;
    background: none;
    padding: 0 25px;
}
input:focus{
    outline: none;
}
input::-moz-placeholder { color: white; }
input::-webkit-input-placeholder { color: white; }
input:-ms-input-placeholder { color: white; }
input::-ms-input-placeholder { color: white; }
input::placeholder { color: white; }

input[type="submit"]{
    background: var(--colorBrown);
    border: 1px solid var(--colorBrown);
    height : 64px;
    font: 18px/62px var(--mainFont);
    color: white;
    padding: 0 25px;
    cursor: pointer;
    transition: all 0.2s linear;
}
input[type="submit"]:hover{
    background: var(--colorBlack);
    border: 1px solid var(--colorBlack);
}
.btn{
    height: 52px;
    padding: 0 50px;
    color: #7d7980;
    background: none;
    border: 1px solid #7d7980;
    transition: all 0.2s linear;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    justify-content: center;
    cursor: pointer;
    text-transform: uppercase;
    font: 14px/50px var(--mainFont);
    letter-spacing: 1px;
}
.btn:hover{
    background : #7d7980;
    color: white;
}

.btn.black_btn{
    background: #000;
    color: white;
    border: 1px solid #000;
}
.btn.black_btn:hover{
    border: 1px solid #000;
    background: none;
    color:  #000;
}
/* footer at bottom */
html{
    height: 100%;
}
body{
    display: flex;
    flex-direction: column;
    height: 100%;
}
header{
    flex: 0 0 auto;
    height: 76px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 2;
}

footer{
    flex: 0 0 auto;
}

header .logo_wrap{
    text-align: center;
    width: 100%;
}
header .logo img{
    width : 265px;
}
.header_menu_container{
    padding: 0 40px 0 0;
}
.header_menu_container a{
    color: white;
    text-decoration: none;
    font: 14px/36px var(--mainFont);
    white-space: nowrap;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
}
.header_menu_container ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}
.header_menu_container ul li {
    margin: 0;
    padding: 0 25px;
    position: relative;
}
.header_menu_container ul li.current-menu-item a:after {
    width: 100%;
    background: white;
    bottom: 0;
    left: 0;
}
.header_menu_container ul li.menu-item-has-children .sub-menu{
    position: absolute;
    display: flex;
    flex-direction: column;
    right: 0;
    padding: 10px;
    background: rgba(0,0,0,.2);
    visibility: hidden;
    opacity: 0;
    transition: all .2s linear;
}
.header_menu_container ul li.menu-item-has-children:hover .sub-menu{
    visibility: visible;
    opacity: 1;
}
.header_menu_container ul li.menu-item-has-children .sub-menu a:after{
    display: none;
}
.header_menu_container a:after {
    position: absolute;
    content: '';
    height: 2px;
    width: 70%;
    left: 15%;
    bottom: 5px;
    background: transparent;
    transition: all 0.2s ease-in-out;
}
.header_menu_container a:hover:after {
    width: 100%;
    background: white;
    bottom: 0;
    left: 0;
}
.burger-wrap{
    display: none;
}
main{
    flex: 1 0 auto;
    margin: -76px 0 0 0;
}
.full_screen{
    width : 100%;
    height: 100vh;
    position: relative;
    min-height: 770px;

}
.full_screen:after{
    content: '';
    position: absolute;
    width : 100%;
    height : 100%;
    background : rgba(0,0,0,0.5);
    left: 0;
    top: 0;
}

.full_screen video{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.full_screen video[data-device="mobile"]{
    display: none;
}
.full_screen .full_screen_image{
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    background-size: cover;
    background-position: center;
    left: 0;
    max-width: 1940px;
}
@media(min-width: 1940px){
    .full_screen .full_screen_image{
        left: calc(50% - 970px);
    }
}
.full_screen .text_wrap{
    position: absolute;
    width : 100%;
    height : 100%;
    top: 0;
    left: 0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 1;
    padding: 75px 0;
}
.full_screen .text *{
    text-shadow: 0 0 15px rgba(0,0,0,0.95);
}
.full_screen .text h1{
    font: 42px 'CooperMd';
    margin: 20px 20px 10px;
}
.full_screen .text p{
    max-width: 480px;
    font: 200 20px/28px var(--mainFont);
    margin: 0 auto;
}
.explore{
    position: absolute;
    bottom: 20px;
    color: white;
    z-index: 1;
    text-align: center;
    width: 100%;
    padding-top: 50px;
    font: 14px/36px var(--mainFont);
    text-shadow: 0 0 15px rgba(0,0,0,0.95);
    cursor: pointer;
    display: block;
    text-decoration: none;
}
.explore:before{
    position: absolute;
    content: '';
    width: 40px;
    height: 40px;
    top: 0;
    left: calc(50% - 20px);
    background: url(assets/img/explore.svg) center no-repeat;
    -webkit-animation: knock-top 1.85s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    -o-animation: knock-top 1.85s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    animation: knock-top 1.85s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.collection_listing{
    background: #ccc;
    padding: 90px 0;
    position: relative;
}
.collection_listing .white_bg,
.accomodations .white_bg,
.activity_detail .white_bg{
    background: white;
    padding: 40px 20px 80px;
    text-align: center;
    position: relative;
}
.collection_listing h2,
.reviews h2,
.wining_dining h2,
.activity_detail h2{
    font: 36px 'CooperMd';
    text-align: center;
}
.collection_listing .text,
.accomodations .text,
.wining_dining .text,
.activity_detail .activity_info .text,
.activity_detail .text{
    max-width: 760px;
    font: 400 16px/28px var(--mainFont);
    margin: 20px auto 50px;
    position: relative;
    z-index: 2;
}
.collection_listing .listings_wrap{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -60px;
    justify-content: space-between;
}
.collection_listing .listings_wrap a{
    display: flex;
    width: calc((100% - 120px) / 4);
    color: white;
    text-decoration: none;
    font: 14px/36px var(--mainFont);
    text-transform: uppercase;
    position: relative;
    box-shadow: 0 0 30px rgba(0,0,0,0.4);
    margin: 15px 0;
    text-shadow: 0 0 15px rgba(0,0,0,0.95);
    transition: all 0.2s linear;
}
.collection_listing .listings_wrap a:hover{
    box-shadow: none;
}
.collection_listing .listings_wrap a .background:before{
    content: '';
    position: absolute;
    width: 100%;
    height : 100%;
    top: 0;
    left: 0;
    transition: all 0.2s linear;
    background : #57a9ac;
    opacity: 0;
    z-index: 2;
}
.collection_listing .listings_wrap a .background:after{
    content: '';
    position: absolute;
    width: 100%;
    height : 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.2);
    z-index: 1;
}
.collection_listing .listings_wrap a:hover .background:before{
    opacity: 0.5;
}
.collection_listing .listings_wrap a .title{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 30px;
    z-index: 3;
}
.collection_listing .listings_wrap a .background{
    background-size: cover;
    background-position: center;
    display: block;
    width: 100%;
    padding-top: 100%;
    position: relative;
}
.collection_listing .listings_wrap a .simpleParallax{
    position: absolute;
    width: 100%;
    height : 100%;
    top: 0;
    left: 0;
}
.collection_listing .listings_wrap a img{
    width : 100%;
}
.activity_detail{
    padding: 90px 0;
    background : #57a9ac;
    position: relative;
}
.activity_detail .activity_info_wrap{
    display: flex;
    max-width: 1100px;
    margin: 0 auto;
    flex-wrap: wrap;
}
.activity_detail .activity_info_wrap .image_wrap{
    width: 50%;
    margin-right: 40px;
    display: flex;
    align-items: flex-start;
}
.activity_detail .activity_info_wrap .image_wrap img{
    width: 100%;
}
.activity_detail .activity_info{
    text-align: left;
    font: 200 20px/28px var(--mainFont);
    display: flex;
    flex-direction: column;
    width: calc(50% - 40px);
    justify-content: center;
    position: relative;
}
.activity_detail .activity_info .btn{
    position: absolute;
    bottom: 0;
}
.activity_detail .activity_info .title{
    color: #7d7980;
}
.activity_detail .activity_info .text{
    margin: 20px 0 80px;
}
.back_link{
    text-transform: uppercase;
    font: 14px/28px var(--mainFont);
    text-decoration: none;
    color: black;
    margin: 60px 0 0;
    display: inline-block;
    padding: 0 0 0 15px;
    background: url(assets/img/back.svg) left 8px / 5px no-repeat;
    transition: all 0.2s linear;
}
.back_link:hover{
    color: #57a9ac;
}
.center_shell{
    width : 70px;
}
.accomodations{
    background : #d5ddd4;
    padding: 90px 0;
    position: relative;
}
/*.accomodations:before {
    content: '';
    width: 400px;
    height: 400px;
    position: absolute;
    background: url(assets/img/big_shell.svg) center / contain no-repeat;
    right: 50px;
    bottom: -180px;
}*/
.accomodations .carousel_wrap {
    margin: 0 -60px 90px;
    width : calc(100% + 120px);
    box-shadow: 0 0 30px rgba(0,0,0,0.4);
}
.accomodations .carousel_wrap .carousel_cell {
    width: 100%;
}
.accomodations .carousel_wrap img{
    width : 100%;
    display: block;
    margin-bottom: 0;
}
.accomodations .facilities_wrap {
    display: flex;
    max-width: 1100px;
    margin: 0 auto;
    flex-wrap: wrap;
}
.accomodations .image_wrap {
    width: 50%;
    margin-right: 40px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}
.accomodations .images_tabs{
    display: flex;
    flex-direction: row;
    font: 12px var(--mainFont);
    margin: 20px 0 0;
    position: relative;
    z-index: 1;
}
.accomodations .images_tabs div{
    margin-right: 20px;
    cursor: pointer;
    opacity: 0.4;
    transition: all 0.2s linear;
}
.accomodations .images_tabs div.active{
    opacity: 1;
    cursor: inherit;
}
.accomodations .image_wrap img {
    width: 100%;
}
.accomodations .facilities_info {
    text-align: left;
    font: 200 20px/28px var(--mainFont);
    display: flex;
    flex-direction: column;
    width: calc(50% - 40px);
    justify-content: center;
    position: relative;
}
.accomodations .facilities_info .title {
    font: 32px 'CooperMd';
    margin: 0 0 20px;
}
.accomodations .facilities_info .subtitle {
    color: #7d7980;
}
.accomodations .facilities_info .text {
    margin: 20px 0 40px;
}
.accomodations .btn {
    position: absolute;
    bottom: 0;
}
.accomodations .icons {

    display: flex;

    margin: 0 0 100px;
}
.accomodations .icons span {
    width: 35px;
    height: 35px;
    display: flex;
    margin: 0 30px 0 0;
}
.accomodations .icons span img {
    max-width: 100%;
    max-height: 100%;
}

.fullscreen_carousel{
    height: 100vh;
    position: relative;
    min-height: 770px;
}
.fullscreen_carousel .carousel_cell{
    width : 100%;
    height: 100vh;
    min-height: 770px;
    background-size: cover;
    background-position: center;
}
.fullscreen_carousel .carousel_cell img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.fullscreen_carousel .carousel_wrap {
    width : 100%;
    height: 100%;

    clip: rect(0, auto, auto, 0);
    position: absolute;
}
.fullscreen_carousel .flickity-viewport {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    transform: translateZ(0px);
    will-change: transform;
}
.fullscreen_carousel .flickity-prev-next-button,
.accomodations .carousel_wrap .flickity-prev-next-button,
.wining_dining .carousel_wrap .flickity-prev-next-button{
    border-radius: 0;
    opacity: 1;
    height: 54px;
    z-index: 10;
}
.fullscreen_carousel .flickity-prev-next-button svg,
.accomodations .carousel_wrap .flickity-prev-next-button svg,
.wining_dining .carousel_wrap .flickity-prev-next-button svg{
    display: none;
}
.fullscreen_carousel .previous,
.accomodations .carousel_wrap .previous,
.wining_dining .carousel_wrap .previous{
    left: 20px;
    background: url(assets/img/left_arrow.svg) center / contain no-repeat;
}
.fullscreen_carousel .next,
.accomodations .carousel_wrap .next,
.wining_dining .carousel_wrap .next{
    right: 20px;
    background: url(assets/img/right_arrow.svg) center / contain no-repeat;
}

/*.flickity-enabled.is-fade .flickity-slider > * {
    pointer-events: none;
    z-index: 0;
}

.flickity-enabled.is-fade .flickity-slider > .is-selected {
    pointer-events: auto;
    z-index: 1;
}*/

.fullscreen_carousel .flickity-slider{
    transform: none !important;
}

.fullscreen_carousel .carousel_cell{
    left: 0 !important;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: -1;
    transform: none !important;
}

.fullscreen_carousel .carousel_cell.is-selected{
    opacity: 1;
    z-index: 0
}
.fullscreen_carousel .text_wrap{
    position: absolute;
    width : 100%;
    height : 100%;
    top: 0;
    left: 0;
    color: #fff;
    z-index: 1;
}
.fullscreen_carousel .text_wrap .book_now{
    border: 1px solid #fff;
    color: #fff;
    margin: 30px 0 0;
}

.fullscreen_carousel .text_wrap .book_now:hover{
    background: rgba(256,256,256,0.2);
}

.fullscreen_carousel .text_wrap .container{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.fullscreen_carousel .text_wrap.center_text .container{
    justify-content: center;
}
.fullscreen_carousel .text_wrap.left_text .container{
    justify-content: flex-start;
}
.fullscreen_carousel .text_wrap .inner_wrap{
    border: 2px solid white;
    width: calc(100% - 40px);
    max-width: 600px;
    box-shadow: 0 0 30px rgba(0,0,0,0.4);
    background: rgba(0,0,0,0.45);
    padding: 40px 80px;
}
.fullscreen_carousel .text_wrap .title{
    /*font: 32px var(--mainFont);*/
    /*font: 32px 'CooperMd';*/
    font: 36px 'CooperMd';
    /*margin: 0 0 20px;*/
    margin: 0 0 30px;

}
.fullscreen_carousel .text_wrap .link{
    text-transform: uppercase;
    font: 14px/28px var(--mainFont);
    text-decoration: none;
    color: white;
    display: inline-block;
    margin: 20px 0 0 0;
}
.fullscreen_carousel .text_wrap .link span{
    font: 21px/28px var(--mainFont);
    margin: 0 0 0 4px;
    transition: all 0.2s linear;
}
.fullscreen_carousel .text_wrap .link:hover span{
    margin: 0 0 0 14px;
}
.reviews{
    text-align: center;
    background : #f1edd2;
    padding: 90px;
    position: relative;
    overflow: hidden;
}
.reviews .rating{
    width : 144px;
    height : 16px;
    background: url(assets/img/rating.svg) center no-repeat;
    margin: 50px auto 20px;
}
.reviews .rating div{
    background: url(assets/img/rating_full.svg) center left no-repeat;
    height : 16px;
    width : 144px;
}
.reviews .carousel_cell{
    width : 100%;
    padding: 0 0 40px;
}
.reviews .flickity-page-dots .dot{
    background: rgba(255,255,255,0);
    opacity: 1;
    border: 1px solid #c9c5af;
    width: 13px;
    height: 13px;
    margin: 0 5px;
}
.reviews .flickity-page-dots .dot.is-selected{
    background: #c9c5af;
}
.reviews .carousel_cell .text{
    max-width: 760px;
    font: 400 16px/28px var(--mainFont);
    margin: 20px auto;
}

.reviews .carousel_cell .title{
    font: 24px 'CooperMd';
    margin: 30px 0 30px;
}
.reviews .name{
    font: 600 16px/28px var(--mainFont);
}
.reviews .container{
    position: relative;
}
section.image_text{
    padding: 130px 0;
    background: #c7b9b2;
    position: relative;
    overflow: hidden;
}
/*section.image_text:before{
    content: '';
    width: 400px;
    height : 400px;
    position: absolute;
    background: url(assets/img/big_shell.svg) center / contain no-repeat;
    right: 50px;
    bottom: -100px;
}*/
.image_text_wrap{
    width: calc(100% - (100% - 1340px)/2);
    float: right;
    display: flex;
    z-index: 1;
    align-items: center;
    height: auto;
    position: relative;
    background: #fff;
    box-shadow: 0 0 30px rgba(0,0,0,0.4);
    margin-right: 0;
    transition: all 1s cubic-bezier(0.8, 0, 0.5, 1);
}

.image_text_wrap .img_wrap{
    max-width: 40%;
    margin-right: 50px;
    position: relative;
    display: flex;
    min-height: 480px;
}
.image_text_wrap .img_wrap img{
    max-width: 100%;
    display: block;
    transition: all 1.5s cubic-bezier(0.8, 0, 0.5, 1);
    object-fit: cover;
}
.image_text_wrap .img_wrap .transparent_img{
    opacity: 0;
}
.image_text_wrap .img_wrap .absolute_img{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
}

@media (min-width: 767px){
    .image_text_wrap.revealator-below .absolute_img{
        left: -100%;
    }
    .image_text_wrap.revealator-below{
        margin-right: -100%;
    }
}

.image_text_wrap .text_wrap{
    padding: 30px 40px 30px 0;
    max-width: 540px;
    position: relative;
    z-index: 1;
}
.image_text_wrap .link{
    text-transform: uppercase;
    font: 14px/28px var(--mainFont);
    text-decoration: none;
    color: black;
    display: inline-block;
    margin: 20px 0 0 0;
    opacity: 0.4;
    transition: all 0.2s linear;
}
.image_text_wrap h2, h2 {
    /*font: 24px 'CooperMd';*/
    font: 36px 'CooperMd';
    margin: 30px 0 30px;
}
.image_text_wrap .link:hover{
    opacity: 1;
}
.wining_dining{
    background: #cdcdc5;
    text-align: center;
    padding: 90px 0;
    position: relative;
}
.wining_dining .container{
    padding: 0 30px;
}
.wining_dining .container .white_bg{
    background: #fff;
    padding: 50px 15px;
    box-shadow: 0 0 30px rgba(0,0,0,0.4);
}
.wining_dining .carousel_wrap{
    margin: 70px -60px;
    width: calc(100% + 120px);
    box-shadow: 0 0 30px rgba(0,0,0,0.4);
    overflow: hidden;
}
.wining_dining .carousel_cell{
    width : 100%;
}
.wining_dining .carousel_cell img{
    width : 100%;
    display: block;
}
.wining_dining .link{
    font: 18px/28px var(--mainFont);
    color: black;
    display: inline-block;
    opacity: 0.4;
    transition: all 0.2s linear;
}
.wining_dining .link:hover{
    opacity: 1;
}
.wining_dining h3 {
    font : 32px 'CooperMd';
    margin: 40px 40px;
}
.contact_us{
    background: #f1edd2;
    padding: 90px 0;
    position: relative;
    overflow: hidden;
}
.contact_us .container{
    display: flex;
    flex-direction: row;
    align-items: center;
    z-index: 1;
    position: relative;
}
/*.contact_us:before {
    content: '';
    width: 400px;
    height: 400px;
    position: absolute;
    background: url(assets/img/big_shell.svg) center / contain no-repeat;
    right: 50px;
    bottom: -100px;
}*/
.nf-form-cont{
    position: relative;
    z-index: 1;
}
.contact_us #map{
    width: 630px;
    height: 390px;
    background : white;
    margin: 0 40px 0 0;
}
.contact_us h2{
    font: 32px 'CooperMd';
    margin: 0 0 20px;
}

.alternative_menu{
    background: #f1edd2;
    padding: 90px 0;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.shell{
    content: '';
    position: fixed;
    right: 50px;
    bottom: -90px;
    width: 400px;
    height: 400px;
    background-size: cover;
    background-position: center center;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
}
.shell_wrap{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    clip: rect(0, auto, auto, 0);
    z-index: 1;
}
.white_bg .content_wrap,
.white_bg a ,
.container .text_wrap{
    position: relative;
    z-index: 2;
}
/*.shell_bg{
    content: '';
    width: 310px;
    height: 310px;
    position: absolute;
    right: 96px;
    bottom: -60px;
    background: url(assets/img/big_shell.svg) center / contain no-repeat;
}
.alternative_menu:before {
    content: '';
    width: 400px;
    height: 400px;
    position: absolute;
    background: url(assets/img/big_shell.svg) center / contain no-repeat;
    right: 50px;
    bottom: -100px;
}*/
.alternative_menu .icons_wrap {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 70px 0 0;
    position: relative;
    flex-wrap: wrap;
}
.alternative_menu .image_wrap {
    height : 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.alternative_menu .icons_wrap .icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    z-index:300;
}
.alternative_menu .icons_wrap .icon:hover .text{
    opacity: 1;
}
.alternative_menu .text {
    text-transform: uppercase;
    font: 14px/28px var(--mainFont);
    text-decoration: none;
    color: black;
    display: inline-block;
    margin: 20px 0 0 0;
    opacity: 0.4;
    transition: all 0.2s linear;
}
footer{
    background: url(assets/img/footer_bg.jpg) center / cover no-repeat;
    position: relative;
    padding: 0 0 40px;
    overflow: hidden;
}
.footer_bg_wrap{
    position: absolute;
    top: 0;
    width : 100%;
    height: 100%;
    left: 0;
}
footer .footer_bg{
    background: url(assets/img/footer_bg.jpg) center / cover no-repeat;
    clip: rect(0, auto, auto, 0);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
footer .footer_bg .parallax_image{
    position: fixed;
    top: 0;
    left: 0;
    width : 100%;
    height : 100%;
    background-size: cover;
    background-position: center;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
}
footer .footer_bg .simpleParallax{
    height: 100%;
    position: relative;
}
footer .footer_bg .simpleParallax img{
    object-fit: cover;
    width : 100%;
    height : 100%;
}
footer:before{
    z-index: 1;
    content: '';
    height: 80%;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+100 */
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
.flickity-button:disabled{
    display: none !important;
}
.reach_us{
    background: #d4ddd4;
    padding: 90px 0;
    position: relative;
}
.reach_us .text_wrap{
    background: #fff;
    padding: 90px 40px;
    text-align: center;
}
.reach_us .title{
    font: 32px 'CooperMd';
    margin: 0 0 20px;
}
.spa_relaxation_text{
    background: #f1edd2;
    padding: 90px 0;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.full_screen .simpleParallax{
    min-height: 100%;
    position: relative;
    width: 100%;
    height: 100vh;
}
.carousel_cell .simpleParallax{
    min-height: 100%;
    position: relative;
    width: 100%;
    height: 100vh;
}
/*.spa_relaxation_text:before {
    content: '';
    width: 400px;
    height: 400px;
    position: absolute;
    background: url(assets/img/big_shell.svg) center / contain no-repeat;
    right: 50px;
    bottom: -100px;
}*/
.spa_relaxation_text .title {
    font: 32px 'CooperMd';
    margin: 0 0 20px;
}
.spa_relaxation_text .text {
    margin: 0 auto;
    max-width: 640px;
}
.wining_dining_text_section img{
    width: 690px;
    max-width: 690px;
}

footer .container{
    position: relative;
    font-size: 14px;
    z-index: 2;
}
footer .book_now{
    color: #fff;
    width: 300px;
    border: 1px solid #fff;
    margin: 60px auto;
    display: block !important;
}
footer .book_now:hover{
    background: rgba(0,0,0, 0.6);
}
footer .cols_wrap{
    display: flex;
    justify-content: space-between;
    color: #fff;
}
footer .logo_wrap img{
    width : 300px;
    margin: 0 0 40px;
}
footer .cols_wrap .title{
    font: 18px 'CooperMd';
    margin: 30px 0 30px;
}
footer .cols_wrap .contact_info{
    width: 200px;
    margin-bottom: 30px;
}
footer a{
    color: #fff;
    text-decoration: none;
}
footer ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
footer .phone,
footer .mail{
    display: flex;
    align-items: center;
    margin: 0 0 20px;
}
footer .phone a{
    margin-right: 10px;
}
footer .phone img,
footer .mail img{
    margin-right: 10px;
    width: 14px;
}
footer .phone a + img{
    margin: 0 0 0 5px;
}
footer input[type="email"]{
    height: 50px;
    line-height: 50px;
    width : 270px;
    border: 1px solid #fff;
}
footer input[type="submit"]{
    background: none;
    border: none;
    padding: 0;
    width : 270px;
    text-align: right;
    text-transform: uppercase;
}
footer .menu-main-menu-container a{
    display: block;
    margin-bottom: 10px;
}
footer .follow_us {
    display: flex;
}
footer .follow_us img{
    width: 17px;
    margin: 0 15px 0 0;
}

.parallax-background {
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


#bookNow{
    top: 30%;
    cursor: pointer;
    z-index: 70;
    transition: all .7s cubic-bezier(.19,1,.22,1);
    width: 80px;
    position: fixed;
    right: -20px;
    transform: translateX(0) translateY(0);
    background-color: #b3b8b3;
    color: #fff;
    height: 180px;
    box-shadow: 0 0 40px rgba(0,0,0,0.2);
}
.navbar-btn-label{
    top: 82px;
    transform: translateX(22px) rotate(-90deg);
    position: absolute;
    right: 14px;
    opacity: 1;
    font: 400 12px/1.3 Open Sans,sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all .7s cubic-bezier(.19,1,.22,1);
    color: #fff;
    background: url(assets/img/down-arrow.svg) center right / 19px no-repeat;
    padding-right: 25px;
}
.navbar-btn-label span {
    display: block;
    width: 90px;
}
.collection_listing.the_rooms .listings_wrap a .background{
    padding-top: 52%;
}
.collection_listing.the_rooms .listings_wrap a .hover_background{
    position: absolute;
    width : 100%;
    height : 100%;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: all .2s linear;
}
.collection_listing.the_rooms .listings_wrap a:hover .hover_background{
    opacity: 1;
}
.collection_listing.the_rooms .listings_wrap a:hover .background:before {
    opacity: 0;
}
.collection_listing.the_rooms .listings_wrap a .title {
    color: #000;
    height: 30%;
    top: 100%;
    text-shadow: none;
}

.page-template-activity-inner-tpl .wp-block-media-text {
    display   : flex;
}
.page-template-activity-inner-tpl .wp-block-media-text.has-media-on-the-right {
    flex-direction: row-reverse;
}

.page-template-activity-inner-tpl .wp-block-media-text__media img,
.page-template-activity-inner-tpl .wp-block-media-text__media video {
    height: auto;
}

.page-template-activity-inner-tpl .wp-block-media-text .wp-block-media-text__content {
    padding: 30px 40px;
    flex-basis: 60%;
    text-align: initial;
}
.page-template-activity-inner-tpl .wp-block-media-text .wp-block-media-text__content strong{
    font: 200 20px/28px var(--mainFont);
    color: #7d7980;
}
.page-template-activity-inner-tpl .wp-block-media-text .wp-block-media-text__media{
    flex-basis: 40%;
}
.page-template-activity-inner-tpl .content_wrap{
    max-width: 1100px;
    margin: 0 auto;
}
.wp-block-image img {
    height: auto;
}

.booking_overlay{
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
    background: rgba(0,0,0,.8);
    z-index: 80;
    transition: all .3s linear;
    opacity: 1;
    visibility: visible;
    display: block;
    transform: scale(1);
}
.booking_popup{
    position: fixed;
    top: 100px;
    width: 470px;
    left: calc(50% - 235px);
    max-height: calc(100% - 200px);
    z-index: 90;
    padding: 2px;
    background: #fff;
    transition: all .3s linear;
    opacity: 1;
    visibility: visible;
    display: block;
    transform: scale(1);
}
.booking_popup .popupchick{
    background: #fff;
    padding: 20px;
}
.booking_popup .popupchick input[type="text"],
.booking_popup .popupchick select{
    width: 100%;
    height: 50px;
    margin: 0 0 15px;
    border-radius: 0;
    color: #000;
    padding: 0 20px;
}
.booking_popup .popupchick input[type="submit"]{
    width : 100%;
    height: 50px;
    line-height: 50px;
    font: 400 12px/1.3 Open Sans,sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.booking_popup .popupchick input[type="submit"]:hover{
    background : #b9aca5;
}
.booking_popup .popupchick .row_wrap{
    position: relative;
    display: flex;
    column-gap: 20px;
}
.booking_popup .popupchick .col_wrap{
    flex-direction: column;
    display: flex;
}
.booking_popup .popupchick .label{
    position: relative;
}
.booking_popup .popupchick .title{
    font: 24px 'CooperMd';
    margin: 0 0 10px;
    text-align: center;
}
.booking_overlay.hidden,
.booking_popup.hidden{
    opacity: 0;
    visibility: hidden;
    top: 0;
}
.booking_popup.hidden{
    transform: scale(0.5);
}
.booking_popup .close{
    position: absolute;
    right: -13px;
    top: -14px;
    cursor: pointer;
}
.booking_popup .close img{
    width : 30px;
}
.booking_popup iframe{
    width : 100%;
    height: 100%;
    border: none;
}

@media(max-width: 1500px) {
    .header_menu_container ul li {
        padding: 0 10px;
    }
    .header_menu_container {
        padding: 0 10px 0 0;
    }
    .image_text_wrap {
        width : calc(100% - 60px);
    }
    /*.image_text_wrap img {
        max-width : 50%;
        margin-right: 30px;
    }*/
    .image_text_wrap .text_wrap {
        padding : 10px 20px 10px 0;
    }
    .image_text_wrap h2 {
        margin: 0 0 10px;
    }
    .wining_dining .carousel_wrap {
        margin: 70px -40px;
        width: calc(100% + 80px);
    }
}
@media(max-width: 1400px) {
    .accomodations .big_image,
    .collection_listing .listings_wrap{
        margin: 0 -35px;
        width: calc(100% + 70px);
    }
}
@media(max-width: 1200px) {
    header .logo img {
        width: 200px;
    }
    .header_menu_container a {
        font            : 13px/36px var(--mainFont);
    }
    .image_text_wrap .img_wrap{
        min-height: auto;
    }
}
@media(max-width: 1023px) {
    .header_menu_container ul li.menu-item-has-children .sub-menu {
        position: relative;
        padding: 0;
        display: none;
    }
    .header_menu_container ul li.menu-item-has-children:hover .sub-menu {
        display: block;
    }
    footer .logo_wrap{
        text-align: center;
    }
    .contact_us #map {
        width  : 370px;
        height : 320px;
    }
    .alternative_menu .icons_wrap {
        display: block;
        text-align: center;
        margin: 70px auto 0;
        max-width: 700px;
        z-index: 100;
    }
    .alternative_menu .icons_wrap .icon {
        display: inline-block;
        min-width: 190px;
        margin: 0 0 50px;
    }
    .image_text_wrap {
        width: calc(100% - 20px);
    }
    header .logo img {
        width: 240px;
        display: block;
        margin-left: 20px;
    }
    header .burger-wrap {
        opacity           : 1;
        visibility        : visible;
        cursor            : pointer;
        display           : block;
        position          : relative;
        float             : right;
        height            : 100%;
        padding: 25px 20px 25px;
        -webkit-transform : scale(1, 1);
        -ms-transform     : scale(1, 1);
        transform         : scale(1, 1);
    }

    header .burger {
        display  : block;
        width: 30px;
        height: 24px;
        position : relative;
        float    : right;
        top      : calc(50% - 14px);
    }

    header .burger span {
        visibility         : visible;
        opacity            : 1;
        height             : 2px;
        background         : white;
        top                : calc(50% - 1px);
        left               : 0;
        width              : 100%;
        position           : absolute;
        -webkit-transition : all 0.35s ease-in-out;
        -o-transition      : all 0.35s ease-in-out;
        transition         : all 0.35s ease-in-out;
    }

    header .burger:before, header .burger:after {
        content            : '';
        width              : 100%;
        height             : 2px;
        position           : absolute;
        background         : white;
        left               : 0;
        -webkit-transition : all 0.4s ease-in-out;
        -o-transition      : all 0.4s ease-in-out;
        transition         : all 0.4s ease-in-out;
        -webkit-transform  : rotate(0);
        -ms-transform      : rotate(0);
        transform          : rotate(0);
    }

    header .burger.opened span {
        visibility : hidden;
        opacity    : 0;
        width      : 0;
        left       : 50%;
    }

    header .burger:before {
        top : 0;
    }

    header .burger:after {
        bottom : 0;
    }

    header .burger.opened:before {
        top               : calc(50% - 1px);
        -webkit-transform : rotate(225deg);
        -ms-transform     : rotate(225deg);
        transform         : rotate(225deg);
    }

    header .burger.opened:after {
        bottom            : calc(50% - 1px);
        -webkit-transform : rotate(-225deg);
        -ms-transform     : rotate(-225deg);
        transform         : rotate(-225deg);
    }

    header .header_menu_container {
        max-height         : 0;
        overflow           : hidden;
        top: 76px;
        width              : 100%;
        position           : absolute;
        left               : 0;
        opacity            : 0;
        margin             : 0;
        background         : rgba(0, 0, 0, 0.8);
        -webkit-transition : all 0.4s ease-in-out;
        -o-transition      : all 0.4s ease-in-out;
        transition         : all 0.4s ease-in-out;
    }

    header .header_menu_container ul {
        margin  : 0;
        padding : 0;
        display: block;
    }
    header .header_menu_container.active {
        max-height : 600px;
        opacity    : 1;
    }

    header .header_menu_container li {
        display       : block;
        text-align    : center;
        font          : 500 14px/50px 'Montserrat', sans-serif;
        border-bottom : 1px solid rgba(255, 255, 255, 0.2);
    }

    .header_menu_container li:after {
        display : none;
    }
    .alternative_menu .icons_wrap .icon {
        min-width: 190px;
    }
    footer .cols_wrap{
        flex-wrap: wrap;
        justify-content: space-around;
    }
    footer .cols_wrap .col{
        width: 300px;
        margin: 20px 30px;
    }
}
@media(max-width: 840px) {
    .booking_popup {
        max-height: calc(100% - 80px);
        top      : 40px;
        width    : calc(100% - 30px);
        left     : 15px;
    }
}
@media(max-width: 767px) {
    footer .cols_wrap .col{
        width: 300px;
        margin: 20px 20px;
    }
    .full_screen video[data-device="desktop"]{
        display: none;
    }
    .full_screen video[data-device="mobile"]{
        display: block;
    }
    .fullscreen_carousel .text_wrap .inner_wrap {
        padding: 10px 30px;
    }
    .collection_listing .listings_wrap a {
        display : flex;
        width   : calc((100% - 30px) / 2);
    }
    .image_text_wrap{
        flex-direction: column;
        float: none;
        margin: 0 auto;
        padding: 40px 20px;
        text-align: center;
    }
    .image_text_wrap .img_wrap{
        margin: 0 0 30px;
        max-width: calc(100% - 40px);
    }
    .reviews {
        padding    : 90px 30px;
    }
    .flickity-prev-next-button {
        top    : auto;
        bottom : 0px;
    }
    .wining_dining h3 {
        margin: 40px 0;
    }
    .activity_detail .activity_info_wrap .image_wrap {
        width         : 100%;
        margin-right  : 0;
        margin-bottom : 40px;
    }
    .activity_detail .activity_info {
        width          : 100%;
    }
    .contact_us .container {
        flex-direction : column-reverse;
    }
    .contact_us #map {
        margin: 40px 0 0 0;
        position: relative;
    }
    .accomodations .facilities_wrap {
        flex-direction: column;
    }
    .accomodations .image_wrap {
        width         : 100%;
        margin-right  : 0;
        margin-bottom : 40px;
    }
    .accomodations .facilities_info {
        width          : 100%;
    }
    .page-template-activity-inner-tpl .wp-block-media-text {
        flex-direction: column !important;
    }
    .page-template-activity-inner-tpl .wp-block-media-text .wp-block-media-text__media {
        max-width: 400px;
    }
    .page-template-activity-inner-tpl .wp-block-media-text__content p ,
    .page-template-activity-inner-tpl .has-text-align-right ,
    .page-template-activity-inner-tpl .has-text-align-left {
        text-align: center !important;
    }
}





@keyframes knock-top {
    0% {
        -webkit-transform : translateY(0px);
        -moz-transform    : translateY(0px);
        -ms-transform     : translateY(0px);
        -o-transform      : translateY(0px);
        transform         : translateY(0px);
    }
    10% {
        -webkit-transform : translateY(3px);
        -moz-transform    : translateY(3px);
        -ms-transform     : translateY(3px);
        -o-transform      : translateY(3px);
        transform         : translateY(3px);
    }
    20% {
        -webkit-transform : translateY(-5px);
        -moz-transform    : translateY(-5px);
        -ms-transform     : translateY(-5px);
        -o-transform      : translateY(-5px);
        transform         : translateY(-5px);
    }
    33% {
        -webkit-transform : translateY(1px);
        -moz-transform    : translateY(1px);
        -ms-transform     : translateY(1px);
        -o-transform      : translateY(1px);
        transform         : translateY(1px);
    }
    46% {
        -webkit-transform : translateY(-5px);
        -moz-transform    : translateY(-5px);
        -ms-transform     : translateY(-5px);
        -o-transform      : translateY(-5px);
        transform         : translateY(-5px);
    }
    59% {
        -webkit-transform : translateY(1px);
        -moz-transform    : translateY(1px);
        -ms-transform     : translateY(1px);
        -o-transform      : translateY(1px);
        transform         : translateY(1px);
    }
    69% {
        -webkit-transform : translateY(0px);
        -moz-transform    : translateY(0px);
        -ms-transform     : translateY(0px);
        -o-transform      : translateY(0px);
        transform         : translateY(0px);
    }
    100% {
        -webkit-transform : translateY(0px);
        -moz-transform    : translateY(0px);
        -ms-transform     : translateY(0px);
        -o-transform      : translateY(0px);
        transform         : translateY(0px);
    }
}

@-khtml-keyframes knock-top {
    0% {
        -webkit-transform : translateY(0px);
        -moz-transform    : translateY(0px);
        -ms-transform     : translateY(0px);
        -o-transform      : translateY(0px);
        transform         : translateY(0px);
    }
    10% {
        -webkit-transform : translateY(3px);
        -moz-transform    : translateY(3px);
        -ms-transform     : translateY(3px);
        -o-transform      : translateY(3px);
        transform         : translateY(3px);
    }
    20% {
        -webkit-transform : translateY(-5px);
        -moz-transform    : translateY(-5px);
        -ms-transform     : translateY(-5px);
        -o-transform      : translateY(-5px);
        transform         : translateY(-5px);
    }
    33% {
        -webkit-transform : translateY(1px);
        -moz-transform    : translateY(1px);
        -ms-transform     : translateY(1px);
        -o-transform      : translateY(1px);
        transform         : translateY(1px);
    }
    46% {
        -webkit-transform : translateY(-5px);
        -moz-transform    : translateY(-5px);
        -ms-transform     : translateY(-5px);
        -o-transform      : translateY(-5px);
        transform         : translateY(-5px);
    }
    59% {
        -webkit-transform : translateY(1px);
        -moz-transform    : translateY(1px);
        -ms-transform     : translateY(1px);
        -o-transform      : translateY(1px);
        transform         : translateY(1px);
    }
    69% {
        -webkit-transform : translateY(0px);
        -moz-transform    : translateY(0px);
        -ms-transform     : translateY(0px);
        -o-transform      : translateY(0px);
        transform         : translateY(0px);
    }
    100% {
        -webkit-transform : translateY(0px);
        -moz-transform    : translateY(0px);
        -ms-transform     : translateY(0px);
        -o-transform      : translateY(0px);
        transform         : translateY(0px);
    }
}

@-o-keyframes knock-top {
    0% {
        -webkit-transform : translateY(0px);
        -moz-transform    : translateY(0px);
        -ms-transform     : translateY(0px);
        -o-transform      : translateY(0px);
        transform         : translateY(0px);
    }
    10% {
        -webkit-transform : translateY(3px);
        -moz-transform    : translateY(3px);
        -ms-transform     : translateY(3px);
        -o-transform      : translateY(3px);
        transform         : translateY(3px);
    }
    20% {
        -webkit-transform : translateY(-5px);
        -moz-transform    : translateY(-5px);
        -ms-transform     : translateY(-5px);
        -o-transform      : translateY(-5px);
        transform         : translateY(-5px);
    }
    33% {
        -webkit-transform : translateY(1px);
        -moz-transform    : translateY(1px);
        -ms-transform     : translateY(1px);
        -o-transform      : translateY(1px);
        transform         : translateY(1px);
    }
    46% {
        -webkit-transform : translateY(-5px);
        -moz-transform    : translateY(-5px);
        -ms-transform     : translateY(-5px);
        -o-transform      : translateY(-5px);
        transform         : translateY(-5px);
    }
    59% {
        -webkit-transform : translateY(1px);
        -moz-transform    : translateY(1px);
        -ms-transform     : translateY(1px);
        -o-transform      : translateY(1px);
        transform         : translateY(1px);
    }
    69% {
        -webkit-transform : translateY(0px);
        -moz-transform    : translateY(0px);
        -ms-transform     : translateY(0px);
        -o-transform      : translateY(0px);
        transform         : translateY(0px);
    }
    100% {
        -webkit-transform : translateY(0px);
        -moz-transform    : translateY(0px);
        -ms-transform     : translateY(0px);
        -o-transform      : translateY(0px);
        transform         : translateY(0px);
    }
}

@-ms-keyframes knock-top {
    0% {
        -webkit-transform : translateY(0px);
        -moz-transform    : translateY(0px);
        -ms-transform     : translateY(0px);
        -o-transform      : translateY(0px);
        transform         : translateY(0px);
    }
    10% {
        -webkit-transform : translateY(3px);
        -moz-transform    : translateY(3px);
        -ms-transform     : translateY(3px);
        -o-transform      : translateY(3px);
        transform         : translateY(3px);
    }
    20% {
        -webkit-transform : translateY(-5px);
        -moz-transform    : translateY(-5px);
        -ms-transform     : translateY(-5px);
        -o-transform      : translateY(-5px);
        transform         : translateY(-5px);
    }
    33% {
        -webkit-transform : translateY(1px);
        -moz-transform    : translateY(1px);
        -ms-transform     : translateY(1px);
        -o-transform      : translateY(1px);
        transform         : translateY(1px);
    }
    46% {
        -webkit-transform : translateY(-5px);
        -moz-transform    : translateY(-5px);
        -ms-transform     : translateY(-5px);
        -o-transform      : translateY(-5px);
        transform         : translateY(-5px);
    }
    59% {
        -webkit-transform : translateY(1px);
        -moz-transform    : translateY(1px);
        -ms-transform     : translateY(1px);
        -o-transform      : translateY(1px);
        transform         : translateY(1px);
    }
    69% {
        -webkit-transform : translateY(0px);
        -moz-transform    : translateY(0px);
        -ms-transform     : translateY(0px);
        -o-transform      : translateY(0px);
        transform         : translateY(0px);
    }
    100% {
        -webkit-transform : translateY(0px);
        -moz-transform    : translateY(0px);
        -ms-transform     : translateY(0px);
        -o-transform      : translateY(0px);
        transform         : translateY(0px);
    }
}

@-moz-keyframes knock-top {
    0% {
        -webkit-transform : translateY(0px);
        -moz-transform    : translateY(0px);
        -ms-transform     : translateY(0px);
        -o-transform      : translateY(0px);
        transform         : translateY(0px);
    }
    10% {
        -webkit-transform : translateY(3px);
        -moz-transform    : translateY(3px);
        -ms-transform     : translateY(3px);
        -o-transform      : translateY(3px);
        transform         : translateY(3px);
    }
    20% {
        -webkit-transform : translateY(-5px);
        -moz-transform    : translateY(-5px);
        -ms-transform     : translateY(-5px);
        -o-transform      : translateY(-5px);
        transform         : translateY(-5px);
    }
    33% {
        -webkit-transform : translateY(1px);
        -moz-transform    : translateY(1px);
        -ms-transform     : translateY(1px);
        -o-transform      : translateY(1px);
        transform         : translateY(1px);
    }
    46% {
        -webkit-transform : translateY(-5px);
        -moz-transform    : translateY(-5px);
        -ms-transform     : translateY(-5px);
        -o-transform      : translateY(-5px);
        transform         : translateY(-5px);
    }
    59% {
        -webkit-transform : translateY(1px);
        -moz-transform    : translateY(1px);
        -ms-transform     : translateY(1px);
        -o-transform      : translateY(1px);
        transform         : translateY(1px);
    }
    69% {
        -webkit-transform : translateY(0px);
        -moz-transform    : translateY(0px);
        -ms-transform     : translateY(0px);
        -o-transform      : translateY(0px);
        transform         : translateY(0px);
    }
    100% {
        -webkit-transform : translateY(0px);
        -moz-transform    : translateY(0px);
        -ms-transform     : translateY(0px);
        -o-transform      : translateY(0px);
        transform         : translateY(0px);
    }
}

@-webkit-keyframes knock-top {
    0% {
        -webkit-transform : translateY(0px);
        -moz-transform    : translateY(0px);
        -ms-transform     : translateY(0px);
        -o-transform      : translateY(0px);
        transform         : translateY(0px);
    }
    10% {
        -webkit-transform : translateY(3px);
        -moz-transform    : translateY(3px);
        -ms-transform     : translateY(3px);
        -o-transform      : translateY(3px);
        transform         : translateY(3px);
    }
    20% {
        -webkit-transform : translateY(-5px);
        -moz-transform    : translateY(-5px);
        -ms-transform     : translateY(-5px);
        -o-transform      : translateY(-5px);
        transform         : translateY(-5px);
    }
    33% {
        -webkit-transform : translateY(1px);
        -moz-transform    : translateY(1px);
        -ms-transform     : translateY(1px);
        -o-transform      : translateY(1px);
        transform         : translateY(1px);
    }
    46% {
        -webkit-transform : translateY(-5px);
        -moz-transform    : translateY(-5px);
        -ms-transform     : translateY(-5px);
        -o-transform      : translateY(-5px);
        transform         : translateY(-5px);
    }
    59% {
        -webkit-transform : translateY(1px);
        -moz-transform    : translateY(1px);
        -ms-transform     : translateY(1px);
        -o-transform      : translateY(1px);
        transform         : translateY(1px);
    }
    69% {
        -webkit-transform : translateY(0px);
        -moz-transform    : translateY(0px);
        -ms-transform     : translateY(0px);
        -o-transform      : translateY(0px);
        transform         : translateY(0px);
    }
    100% {
        -webkit-transform : translateY(0px);
        -moz-transform    : translateY(0px);
        -ms-transform     : translateY(0px);
        -o-transform      : translateY(0px);
        transform         : translateY(0px);
    }
}