@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-size-adjust:none;
    outline:none;    
    box-sizing: border-box;
}

::-webkit-input-placeholder { color:rgba(0,0,0,0.15);}
:-moz-placeholder { color:rgba(0,0,0,0.15);}
::-moz-placeholder { color:rgba(0,0,0,0.15);}
:-ms-input-placeholder { color:rgba(0,0,0,0.15);}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background:#eee; }
::-webkit-scrollbar-thumb { background-color: #d5a245; }

html { width:100%; height:100%; margin:0; padding:0; }
body { height:100%; margin:0; padding:0; font-size:13px; background:#fff; }
body, p { font-family: 'Roboto', tahoma, helvetica; }
a { word-break: break-word; }
body.debug:after {
    position: fixed;
    top:0;
    left:0;
    height:24px;
    width:100%;
    background:#e9be6f;
    color:#000;
    content:'DEBUG MODE';
    text-align: center;
    font-size:10px;
    font-weight: 700;
    line-height:24px;
    animation: fadeInDown 1s forwards;
    z-index: 500;
}

/* App */
.app { height: 100%; }

/* Generics */
.small { font-size:.8em; }
.floatright { float:right; }
.hidden { display:none; }
.transparent { opacity: 0; transition: opacity .3s ease-in-out; }

.left { float:left; margin: 0 20px 20px 0; }
.right { float:right;  margin: 0 0 20px 20px; }
.clear { clear: both; }

.relative { position: relative; }
.clickable { transition: opacity .3s cubic-bezier(0.165, 0.840, 0.440, 1.000); cursor: pointer; }
.clickable:hover { opacity: .8; }

.block100 { display:block; width:100%; margin-top:10px;}

.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(0%, 1fr)); }
.grid.auto { grid-template-columns: repeat(auto-fill, minmax(0%, auto)); }
.grid.auto-auto-1fr { grid-template-columns: auto auto 1fr; }

.d-none { display:none !important; }
.m-0 { margin:0 !important; }
.text-center { text-align: center; }

.selectors.disabled { filter:grayscale(1); opacity: .5; pointer-events: none; }

/* Slides */
.main { height:100%; }
.slider { position: relative; overflow:hidden; }
.scrollable { height:100%; overflow:auto; }
.panes { height:100%; -webkit-backface-visibility: hidden; -moz-backface-visibility:    hidden; -ms-backface-visibility:     hidden; backface-visibility:     hidden; }
.green { color:#4ebf61; }

/* Fonts */
h1, h2, h3 { font-family: 'Staatliches'; margin:0; font-weight: 400; }
h1 { font-size: 3em; font-weight: 400; position: relative; }
h2 { font-size: 2em; font-weight: 400; }
h2 span { font-family: 'Staatliches'; font-size: .5em; opacity: .5; display: block; }
h3 { font-size: 1.3em; font-weight: 400; }
hr { background: none; color:rgba(0,0,0,0); position: relative; }

/* Buttons */
button, a.button { height:42px; background: #d5a245; border-radius: 21px; border: 0; font-family: 'Staatliches'; font-size:15px; text-decoration: none; transition: all 0.3s ease-in-out; cursor:pointer; padding: 0 24px; color:#fff; box-shadow: 0 3px #b78834; }
a.button { display: inline-block; line-height: 42px; }
button.green { background: #4ebf61; color: #fff; box-shadow: 0 3px #318d40; }
button .fa-lg {vertical-align: baseline;}
button:not(.card button):active, a.button:active { transition: all .0s ease-in-out; transform: scale(96%) !important; box-shadow: none !important;  }
button:not(.card button):disabled, a.button:disabled, button:not(.card button).disabled, a.button.disabled { background:#ddd; box-shadow: none; }

/* Animations */
.fadeInQueue, .fadeInDownQueue, .fadeInUpQueue, .flipInQueue { opacity: 0; }
[data-lazybg] { display:none; opacity: 0; transition:all .3s ease-in-out; }
[data-lazybg][data-lazybgstate="loading"] { display: block; opacity: 0; animation: fadeIn 1s linear forwards; animation-delay:500ms; }
[data-lazybg][data-lazybgstate="loaded"] { display: block; opacity: 1; }


/* Hero */
.top { height: 30%; min-height: 100px; max-height: 256px; position: relative; }
.top>.hero { height:100% !important; }
.hero { overflow:hidden; position: relative; height:30%; min-height: 100px; max-height: 256px; background-repeat: no-repeat; background-position: center center; background-size:cover; padding:42px; }
.hero:before { content: ''; position: absolute; background: rgba(0,0,0,.33); width: 100%; height: 100%; top: 0; left: 0; }
.hero:after { content: ''; position: absolute; background: #fff; width: 100%; height: 200px; top: 100%; left: 0; transform: skewY(-2deg) scale(1.2); transform-origin: top left; }
.top .logo { position: absolute; top:32px; left:calc(50% + 42px); transform:translateX(-50%); right:auto; width:100%; max-width: 1640px; height:64px; background-repeat: no-repeat; background-position: top left; background-size:contain; z-index: 10; transition: all .3s ease-in-out; }
.hero .title h1 { color:#fff; }

/* Views */
view { width:100%; height:100%; }

    /* Booking */
    view .viewcontent { padding:42px; }
    view .pagecontent { padding:42px; }
    view[name=booking] { display:grid; }
    view[name=booking] .top .logo { left:auto; right:0; transform:none; }

    [data-enablecart="1"] view .viewcontent { max-width: 820px; margin:0 0 0 auto; }
    [data-enablecart="1"] view .pagecontent { max-width: 1640px; margin: 0 auto; }
    [data-enablecart="1"] view[name=booking] { grid-template-columns: 50% 50%; }
    [data-enablecart="1"] view[name=booking] .cartContainer { display:block; }
    [data-enablecart="1"] view[name=booking] .top .logo { width:778px; }    
    
    [data-enablecart=""] view .viewcontent { max-width: 820px; margin:0 auto; }
    [data-enablecart=""] view .pagecontent { max-width: 820px; margin:0 auto; }
    [data-enablecart=""] view[name=booking] { grid-template-columns: 100%; }
    [data-enablecart=""] view[name=booking] .cartContainer { display:none; }
    [data-enablecart=""] view[name=booking] .top .logo { max-width: calc(820px - 48px); left: 50%; transform: translateX(-50%); }
    
    view[name="rate"] .pagecontent { max-width: 800px; }
    view .viewcontent .footer a { text-decoration: none; display: inline-block; }
    view .viewcontent .footer p { margin:0; }


    view[name=booking] .left, view[name=booking] .right { height:100%; }
    view[name=booking] .viewcontent>h2 { margin:10px 0 20px 0; }
    /* view[name=booking] .viewcontent>h2.subtitle_choosedateandguests { display:none; opacity:0; animation:fadeInDown 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; } */

    view[name=booking] .padded {
        position: relative;
        padding: 28px 0 16px;
    }

    view[name=booking] .scrollable.hasNavbuttons { padding-bottom:60px; position: relative; }
    view[name=booking] .scrollable.hasNavbuttons:before {
        content:'';
        position: fixed;
        bottom:0;
        left:0;
        width:100%;
        height:80px;
        background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
        z-index: 99;
        animation:slideup 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
    }

    view[name=booking] [data-name=step2] .description { line-height: 1.5em; margin-top:10px; }
    view[name=booking] [data-name=step2] .description h3 { margin-bottom:.5em; }
    view[name=booking] [data-name=step2] .bookingperiod .description p { margin:0; }
    view[name=booking] [data-name=step2] .bookingperiod .bookingperiod_messages_container { margin:0 0 1em; }
    view[name=booking] [data-name=step2] .files { display:none; }

    /* Checkout */
    view[name=checkout] { display:block; }
    view[name=checkout] h2 { margin-bottom:1em; }
    view[name=checkout] a { text-decoration: none; }

    view[name=checkout] .padded {
        position: relative;
        margin: 0 -42px;
        padding: 28px 42px 16px;
    }

    view[name=checkout] .scrollable.hasNavbuttons { padding-bottom:82px; position: relative; }
    view[name=checkout] .scrollable.hasNavbuttons:before {
        content:'';
        position: fixed;
        bottom:0;
        left:0;
        width:100%;
        height:80px;
        background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
        z-index: 99;
        animation:slideup 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
    }

    view[name=checkout] .checkoutform {
        padding: 20px;
        background: rgba(0,0,0,.025);
        border-radius: 10px;
        box-shadow: inset 0 3px 0 0 rgba(0,0,0,.05);
    }

    view[name=checkout] .checkoutform textarea { height:100px; resize: none; }

    view[name=checkout] .voucherform {
        padding: 20px;
        background: rgba(0,0,0,.025);
        border-radius: 10px;
        box-shadow: inset 0 3px 0 0 rgba(0,0,0,.05);
        margin-bottom:1em;
        display:grid;
        grid-template-columns: 1fr auto;
    }

    view[name=checkout] .voucherform input {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    view[name=checkout] .voucherform button {
        border-radius: 0;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        height:52px;
    }
    
    view[name=checkout] .paymentform {
        padding: 20px;
        background: rgba(0,0,0,.025);
        border-radius: 10px;
        box-shadow: inset 0 3px 0 0 rgba(0,0,0,.05);
    }

    view[name=checkout] .paymentform ul {
        padding: 0;
        list-style: none;
        margin:0;
    }
    
    view[name=checkout] .paymentform ul li {
        display: grid;
        grid-template-columns: 32px 64px 1fr;
        align-items: center;
    }

    view[name=checkout] .paymentform ul li span {
        font-size:13px; font-weight: 600; text-transform: uppercase; margin:10px 0;
    }
    
    [data-enablecart=""] .checkoutcontainer { order: 1; }
    [data-enablecart=""] .checkoutsummary { order: 2; margin-top:20px; }
    [data-enablecart=""] .checkoutsummary>h2 { border-top: 1px solid rgba(0,0,0,.15); padding-top:20px; }
    [data-enablecart="1"] view[name=checkout] .pagecontent>.checkoutgrid { display:grid; grid-template-columns: 1fr 1fr; grid-gap:16px; }
    
    view[name=checkout] .checkoutgrid .checkoutgrid { display: grid; grid-template-columns: 1fr 1fr; grid-gap:16px; }
    view[name=checkout] .checkoutgrid .checkoutgrid-66-1fr { display: grid; grid-template-columns: 66% 1fr; }
    view[name=checkout] .checkoutgrid .checkoutgrid-64-1fr { display: grid; grid-template-columns: 64% 1fr; }
    view[name=checkout] .checkoutgrid .checkoutgrid-1fr-auto { display: grid; grid-template-columns: 1fr auto; }

    view[name=checkout] .dawa { position: relative; }
    view[name=checkout] .dawa_input_container { position: relative; }
    view[name=checkout] .dawa_input_container.validated:after {
        content:'';
        position: absolute;
        left:0;
        top:calc(100% - 8px);
        width:100%;
        height:5px;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
        border-bottom:3px solid #4ebf61;
        animation:hideandfadein2 2s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
    }
    view[name=checkout] .dawa_input_container.error:after {
        content:'';
        position: absolute;
        left:0;
        top:calc(100% - 8px);
        width:100%;
        height:5px;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
        border-bottom:3px solid #cc0000;
        animation:hideandfadein2 2s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
    }
    view[name=checkout] .dawa_content_container {
        width: 100%;
        padding: 0;
        position: absolute;
        top: calc(100% - 5px);
        z-index: 999;
        border: 0;
        margin: 0;
        box-sizing: border-box;
        background:#fff;
    }

    view[name=checkout] .dawa_content {
        background:#fff;
        box-sizing: border-box;
        box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, .1), 0 5px 25px rgba(0,0,0,.1);
    }

    view[name=checkout] .dawa_content ul {list-style: none; padding:0; margin:0; }
    view[name=checkout] .dawa_content ul li { padding:10px 10px; font-size: 12px; margin-left: 0; user-select: none;}
    view[name=checkout] .dawa_content ul li div { height:16px; position:relative; }
    view[name=checkout] .dawa_content ul li.item:nth-child(even) { background: rgba(0,0,0,0.025); }
    view[name=checkout] .dawa_content ul li.item:hover {background: rgba(0,0,0,0.05) !important; cursor:pointer;}
    view[name=checkout] .dawa_content ul li.item.focused { background:#2d3e41 !important; color:#fff; }
    view[name=checkout] .dawa_content ul li.item.focused:hover { background:#263436 !important; cursor:pointer; }

    view[name=checkout] .checkoutbuttons button { width: 100%; }
    view[name=checkout] .checkoutcart .item { margin-bottom:20px; padding-bottom:20px; border-bottom:3px solid rgba(0,0,0,.1); }
    view[name=checkout] .checkoutcart h2 { font-size:20px; }
    view[name=checkout] .checkoutcart h2 + h4 { margin-top:-1em; font-weight: 400; }
    view[name=signagreement] .agreement {
        padding: 20px;
        background: rgba(0,0,0,.025);
        border-radius: 10px;
        box-shadow: inset 0 3px 0 0 rgb(0 0 0 / 5%);
        min-height: 100px;
    }
    view[name=signagreement] .form { padding:20px 0; }

    view[name=bookingconfirmation] .pagecontent { padding:0; }
    view[name=bookingconfirmation] .pagecontent #main { position: relative; top: -32px; }
    view[name=bookingconfirmation] .pagecontent h1:after { display: none; }
    view[name=bookingconfirmation] .pagecontent .tableright img { width:auto; height:auto; }
    

    view[name=rate] .rateform {
        padding: 20px;
        background: rgba(0,0,0,.025);
        border-radius: 10px;
        box-shadow: inset 0 3px 0 0 rgba(0,0,0,.05);
    }
    view[name=rate] .rateform textarea { min-height: 100px; }

/* Fast checkout */    
/* view[name=checkout] .fastcheckout { max-width: 480px; margin:0 auto; } */
view[name=checkout] .fastcheckout button { height:56px; }
view[name=checkout] .fastcheckout p { margin:0; }

/* Labels */
label { display:block; font-size:13px; font-weight: 600; text-transform: uppercase; margin:10px 0; }
label span { opacity: .5; font-size: .8em; }

/* Inputs */
.inputs { margin-bottom:2em; }
.inputwrapper { position: relative; }
.inputwrapper.sidebyside { vertical-align: top; display:inline-block; margin:0 20px 0 0; opacity: 0; animation:fadeInDown 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; }
/* .inputwrapper.sidebyside:nth-child(1) { animation-delay: .0s;}
.inputwrapper.sidebyside:nth-child(2) { animation-delay: .2s;}
.inputwrapper.sidebyside:nth-child(3) { animation-delay: .4s;} */
.inputwrapper.validated:after {
    content:'';
    position: absolute;
    left:0;
    top:calc(100% - 8px);
    width:100%;
    height:5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom:3px solid #4ebf61;
    animation:hideandfadein2 2s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
}

.inputwrapper.error:after {
    content:'';
    position: absolute;
    left:0;
    top:calc(100% - 8px);
    width:100%;
    height:5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom:3px solid #cc0000;
    animation:hideandfadein2 2s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
}

input, textarea {
    width: 100%;
    min-height: 56px;
    background: #fff;
    border: 0;
    border-bottom: 3px solid #d6d6d6;
    border-radius: 5px;
    color: #000;
    font-size: 13px;
    font-family: 'Roboto';
    padding: 0 16px;
    box-shadow: 0 0 100px rgba(0,0,0,.1);
    transition: all .3s ease-in-out, color 1ms;

}
textarea { padding:16px; resize:vertical; }

input[readonly]:not(.datepicker), input:read-only:not(.datepicker) {
    user-select: none;
    pointer-events: none;
}

/* Autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{ box-shadow: 0 0 100px rgba(0,0,0,.1), 0 0 0 30px white inset !important; border-bottom: 3px solid #d6d6d6; }

/* Checkbox */
input[type=checkbox] { display:none; }
input[type=checkbox] + label {
    background: #fff;
    border: 0;
    border-bottom: 3px solid #d6d6d6;
    border-radius: 5px;
    box-shadow: 0 0 100px rgba(0,0,0,1);
    height: 24px;
    width: 24px;
    display:inline-block;
    padding: 0 0 0 0px;
    margin:0 !important;
    position: relative;
    cursor: pointer;
}

input[type=checkbox]:checked + label { background: #4ebf61; border-bottom: 3px solid #319141; }
input[type=checkbox]:checked + label:after {
    content: '\f00c';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    margin: -6px 0 0 0;
    height: 100%;
    text-align: center;
    font-family: 'FontAwesome';
    font-size: 12px;
    color: #fff;
    animation: fadezoom .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
}

input[type=checkbox]:checked ~ label { cursor: pointer; }

/* Radio */
input[type=radio] { display:none; }
input[type=radio] + label {
    background: #fff;
    border: 0;
    border-bottom: 3px solid #d6d6d6;
    border-radius: 50%;
    box-shadow: 0 0 100px rgba(0,0,0,1);
    height: 24px;
    width: 24px;
    display:inline-block;
    padding: 0 0 0 0px;
    margin:0 !important;
    position: relative;
    cursor: pointer;
}

input[type=radio]:checked + label { background: #4ebf61; border-bottom: 3px solid #319141; }
input[type=radio]:checked + label:after {
    content: '\f00c';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    margin: -4px 0 0 0;
    height: 100%;
    text-align: center;
    font-family: 'FontAwesome';
    font-size: 12px;
    color: #fff;
    animation: fadezoom .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
}

input[type=radio]:checked ~ label { cursor: pointer; }

/* Bookingperiodselector */
.bookingperiodselector { display: inline-block; opacity: 0; animation:fadeInDown 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; position: relative; }
.bookingperiodselector .selectwrapper:after {
    content: '\f078';
    background: #d5a245;
    width: 42px;
    height: 100%;
    border-top-right-radius: 28px;
    border-bottom-right-radius: 28px;
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
    font-family: 'FontAwesome';
    color: #fff;
    font-size: .9em;
    text-align: center;
    line-height: 56px;
    padding-right:.25em;
}
.bookingperiodselector .selectwrapper { transition: border-color .3s ease-out; position: relative; height:56px; box-shadow: 0 0 100px rgba(0,0,0,.1); border-radius: 28px; border: 0; }
.bookingperiodselector .selectwrapper:hover { border-color:#ababab; }
.bookingperiodselector .selectwrapper select { 
    background: #fff; 
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0 64px 0 1.5em;
    border-bottom: 3px solid #d6d6d6;
    border-radius: 28px;
    text-overflow: ellipsis;
    appearance: none;
}

/* Numselector */
.numselector { transition: border-color .3s ease-out; width:132px; display:grid; grid-template-columns: 42px 1fr 42px; position: relative; height:56px; box-shadow: 0 0 100px rgba(0,0,0,.1); border-radius: 28px; border: 0; }
.numselector:hover { border-color:#ababab; }
.numselector button { transition: border-color .3s ease-out; border-radius: 0; vertical-align: top; cursor:pointer; display:inline-block; border:0; height:53px; line-height: 58px; font-size:12px; padding:0; }
.numselector button:first-child { border-top-left-radius: 26px; border-bottom-left-radius: 26px; }
.numselector button:last-child { border-top-right-radius: 26px; border-bottom-right-radius: 26px; }
/* .numselector button:active { background:#f0f0f0; } */
.numselector input { cursor:pointer; border-radius: 0; background:none; box-shadow:none; background:transparent; height:56px; text-align: center; font-size:15px; padding:0; }

/* Datepicker */
.datepickerwrap { transition: border-color .3s ease-out; width:178px; display:inline-block; position: relative; height:56px; box-shadow: 0 0 100px rgba(0,0,0,.1); border: 0; border-radius: 26px; }
.datepickerwrap:hover { border-color:#ababab; }
.datepickerwrap input { cursor: pointer; border: 0; background: none; box-shadow: none; background: #ffffff; height: 56px; text-align: center; font-size: 15px; padding: 0 60px 0 20px; border-radius: 26px; border-bottom: 3px solid rgba(0,0,0,.15); user-select: none; }
.datepickerwrap:after { position: absolute; background: #d5a245; width: 45px; height: 53px; line-height: 53px; border-radius: 0; border-top-right-radius: 26px; border-bottom-right-radius: 26px; right: 0; top: 0; padding-right: 3px; text-align: center; font-size: 20px; content: '\f073'; font-family: 'FontAwesome'; font-size: 16px; color: #fff; pointer-events: none; box-shadow: 0 3px #b78834; }
.datepicker_bg { width: 100%; height: 100%; top: 0px; left: 0px; position: fixed; background:rgba(0,0,0,.5); z-index: 1; display:none; }
.ui-datepicker { width:100%; max-width:360px; top:50% !important; transform:translateY(-50%); position: fixed !important; right: 0 !important; left: 0 !important; margin-right: auto !important; margin-left: auto !important; border: 0; background: rgba(242,242,242,1); border-radius: 2px; border-bottom: 2px solid rgba(0,0,0,.15); color: #555; padding: 0 15px 15px 15px; box-sizing: border-box; box-shadow: 0px 0px 200px 0px rgba(0, 0, 0, 0.25); z-index: 102 !important; user-select: none; }
.ui-datepicker-calendar a, .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { font-size:13px; }
.ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .25; }
.ui-datepicker .ui-datepicker-header { margin:0; padding:0; border:0; border-radius:0; margin-left: -15px; margin-right: -15px; }
.ui-datepicker .ui-datepicker-title { height: 50px; background: #e27132; border-bottom: 2px solid rgba(0,0,0,.15); color: #fff; font-size:12px; font-weight: 600; text-transform: uppercase; margin:0; line-height: 50px; }
.ui-datepicker .ui-widget-header .ui-icon { display: none !important; background: none !important; position: relative !important; text-indent: 0 !important; width: 100% !important; height: 100% !important; }
.ui-datepicker .ui-datepicker-prev { left:0; top:0; text-align: left; height:100%; width:50px; padding:0 0 0 15px; cursor:pointer; }
.ui-datepicker .ui-datepicker-prev:hover { opacity: .85; }
.ui-datepicker .ui-datepicker-prev:active { opacity: .5; }
.ui-datepicker .ui-datepicker-prev:before { content: "\f104"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; color: #fff; font-size: 16px; line-height: 50px; padding:0; }
.ui-datepicker .ui-datepicker-next { right:0; top:0; text-align: right; height:100%; width:50px; padding:0 15px 0 0; cursor:pointer; }
.ui-datepicker .ui-datepicker-next:hover { opacity: .85; }
.ui-datepicker .ui-datepicker-next:active { opacity: .5; }
.ui-datepicker .ui-datepicker-next:before { content: "\f105"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; color: #ffff; font-size: 16px; line-height: 50px; padding:0; text-align: right; }
.ui-datepicker .ui-datepicker-next-hover, .ui-datepicker .ui-datepicker-prev-hover { background:none !important; border:0 !important; }
.ui-datepicker .ui-datepicker-calendar th { width:14.28%; font-size: 12px; }
.ui-datepicker .ui-datepicker-calendar.ui-weekpicker-calendar th { width:12%; }
.ui-datepicker-week-col { text-align: left !important; font-size: 12px; }
.ui-datepicker .ui-datepicker-calendar td { padding:3px; }
.ui-datepicker table { margin:0; border-spacing: 0px; border-collapse: separate; table-layout: fixed; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { cursor:pointer; background: #fff; color: #888; border:0; border-bottom:2px solid rgba(0,0,0,.15); border-radius: 3px; padding:10px 5px; text-align: center; font-weight: 600; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover { background:#eee; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border-color: #af5422; background: #e27132; color: #fff; }
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border-color: #e27132; }

/* Respourcetypes */
.resourceTypes { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap:16px; }
.resourceType { display:inline-block; height:100%; padding: 0; vertical-align: top; cursor:pointer; }
.resourceType .card { position:relative; overflow: hidden; background:#e8f2f4; color: #021519; border-radius: 10px; box-shadow: 0 3px 0 rgba(0,0,0,.15); transition: all .2s ease-in-out; height:100%; display: grid; grid-template-rows: auto 1fr; opacity: 0; animation:fadeInUp 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; }
.resourceType .card:not(:has(>div~div)) { grid-template-rows: 1fr; }
.resourceType:nth-child(1) .card { animation-delay:.5s; }
.resourceType:nth-child(2) .card { animation-delay:.6s; }
.resourceType:nth-child(3) .card { animation-delay:.7s; }
.resourceType:nth-child(4) .card { animation-delay:.8s; }
.resourceType:nth-child(5) .card { animation-delay:.9s; }
.resourceType:nth-child(6) .card { animation-delay:1.0s; }
.resourceType:nth-child(7) .card { animation-delay:1.1s; }
.resourceType:nth-child(n+8) .card { animation-delay:1.2s; }
.resourceType .card p { margin:0; }
.resourceType .card span { display: block; }
.resourceType .card:hover  { z-index: 100; box-shadow: 0 3px 0 rgba(0,0,0,.33); }
.resourceType .card:active { transition: all .0s ease-in-out; transform: scale(95%) !important; box-shadow: none; }
.resourceType .card .top { overflow:hidden; position:relative; height:50%; min-height: 120px; max-height: 300px; background-repeat: no-repeat; background-position: center center; background-size:cover; color:#fff; border-top-left-radius: 10px; border-top-right-radius: 10px; }
.resourceType .card .top:after { content: ''; position: absolute; background: #e8f2f4; width: 100%; height: 20%; bottom: -20%; left: 0; transform: skewY(-3deg) scale(1.2); transform-origin: top left; outline: 1px solid transparent; /* Fixes jagged lines in chrome and edge */ }
.resourceType .card .content { padding: 16px 24px; height: 100%; display: grid; grid-template-rows: 1fr auto; }
.resourceType .card .content h3 { margin-bottom:5px; }


.resourceType .card .content .date { display:none; }
.resourceType .card .content .price { display:none; }

.resourceType .card .actions { margin:0 -24px -24px -24px; padding:20px 24px 28px 24px; /* background:rgba(0,0,0,.05); */ box-shadow: inset 0 50px 25px -25px rgba(0,0,0,.05); }
.resourceType .card button { width:100%; height:32px; /* line-height: 32px; */ background: #d5a245; border-radius: 25px; border: 0; transition: translate 0.5s ease-in-out; z-index: 100; cursor:pointer; padding: 0; color:#fff; }

/* Timeslots */
.timeslots { width: 100%; columns: auto 4; column-gap: 16px;}
.timeslot {
    padding:16px 12px;
    margin:8px 0;
    width:100%;
    height:100%;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    border: 0;
    background: #f5f5f5;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    position: relative;
    box-shadow: 0 3px 0 rgb(0 0 0 / 15%);
    transition: all .2s ease-in-out;
    user-select: none;
}
.timeslot.disabled { background:#eee; color:#ccc; box-shadow: none; cursor:default; }
.timeslot.selected, .timeslot.selected:hover, .timeslot.disabled:hover { box-shadow: none; }
.timeslot:hover { box-shadow: 0 3px 0 rgba(0,0,0,.33); }
.timeslot:active:not(.disabled) { transition: all .0s ease-in-out; transform: scale(95%) !important; box-shadow: none;}
.timeslot .pricebadge { position: absolute; display: inline-block; top:-3px; right:-3px; background: #ff00aa; color:#fff; font-size: 12px; font-weight: 600; padding:3px 6px; border-radius: 3px; box-shadow: 0 2px 0 rgb(0 0 0 / 15%); transform: rotate(3deg); font-weight: 400; }
.timeslot.disabled .pricebadge { display: none; }
.timeslot .quantitybadge { display: inline-block; background: #ff00aa; color:#fff; font-size: 10px; font-weight: 600; padding:3px 6px; margin:5px 0 -5px; border-radius: 3px; box-shadow: 0 2px 0 rgb(0 0 0 / 15%); position: relative; }
.notimeslots { text-align: center; }
.notimeslots i { display:block; font-size:128px; padding: 10% 0 5% 0; }

/* Related Products */
.relatedProduct { display:inline-block; width:100%; padding: 0 16px 16px 0; vertical-align: top; cursor:pointer; }
.relatedProduct .card { position:relative; overflow: hidden; background:#e8f2f4; color: #021519; border-radius: 10px; box-shadow: 0 3px 0 rgba(0,0,0,.15); transition: all .2s ease-in-out; display:grid; grid-template-columns: 160px 1fr; }
.relatedProduct .card .img { overflow: hidden; position: relative; background-repeat: no-repeat; background-position: center center; background-size: cover; color: #fff; border-top-left-radius: 10px; border-bottom-left-radius: 10px; height: 100%; }
.relatedProduct .card .content { padding:16px 24px; position: relative; }
.relatedProduct .card .actions { margin:0 -24px -24px -24px; padding:42px 24px 28px 24px; display: flex; justify-content: end; background-color: #00000005; box-shadow: inset 0 50px 25px -25px rgba(0,0,0,.05); position: relative; overflow: hidden; }
.relatedProduct .card .actions:after { content: ''; position: absolute; background: #e8f2f4; width: 100%; height: 50%; top: -28%; left: 0; transform: skewY(-3deg) scale(1.2); transform-origin: top left; outline: 1px solid transparent; }
.relatedProduct .card .actions>div { display: grid; grid-template-columns: 32px 1fr 32px; max-width: 120px; grid-gap: 10px; }
.relatedProduct .card .actions>div input { height: 35px; min-height: 35px; padding: 0; text-align: center; background: #fff; border:0; font-weight: 600; box-shadow: inset 0 3px 0 0 #eee; }
.relatedProduct .card button { height:32px; transition: translate 0.5s ease-in-out; cursor:pointer; padding: 0; }
.relatedProduct .card button:active { /* border-top:3px solid transparent; margin-top:3px; */ box-shadow: none; }
.relatedProduct .card .pricebadge { background: #ff00aa; color: #fff; font-size: 14px; font-weight: 600; padding: 6px 10px; border-radius: 3px; float: right; box-shadow: 0 2px 0 rgb(0 0 0 / 15%); transform: rotate(-3deg); margin: 10px 0 10px 0; }

/* Footer (global footer is hidden by default) */
footer { display: none; }

/* Nav buttons */
.viewcontent .navbuttons { position: fixed; z-index: 100; bottom:0px; width:100%; max-width: 820px; padding:0 24px 16px 24px; }
[data-enablecart=""] .viewcontent .navbuttons  { left: 50%; transform: translateX(-50%); }
[data-enablecart="1"] .viewcontent .navbuttons { right:0px; }
.pagecontent .navbuttons { position: fixed; z-index: 100; left: 50%; transform: translateX(-50%); bottom: 0px; width: 100%; max-width: 1640px; padding: 0 42px 16px; }
[data-enablecart=""] .pagecontent .navbuttons { max-width: 820px; left: 50%; transform: translateX(-50%); }

/* Cart */
.cartBg { position: absolute; width:100vh; height:100vh; background: rgba(0,0,0,.25); top:0; left:0; display:none; z-index:0; }
.cart { height:100%; background: #efefef url('/_img/gasa_bg.png') repeat-x; box-shadow: inset 50px 0 50px -50px rgba(0,0,0,.05); position: relative; display: grid; grid-template-rows: auto 1fr auto auto; max-height: 100vh; padding:42px 42px 24px; }
.cart>h2 { margin-bottom:20px; }
.cart .items,
.checkoutcart .items { overflow-y:auto; overflow-x:hidden; max-width: 736px; position: relative; }

.cart .items:empty:after,
.checkoutcart .items:empty:after { content:'\f01c'; font-family: 'FontAwesome'; font-size:200px; opacity: .05; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); }
.cart .items::-webkit-scrollbar-thumb { background-color: #ccc; }
.cart .item,
.checkoutcart .item,
.confirmselection .item { background: rgba(0,0,0,.05); border-radius: 10px; padding:20px; margin-bottom: 20px; position: relative; }
.cart .item .grid,
.checkoutcart .item .grid,
.confirmselection .item .grid { display:grid; grid-template-columns: 100px 1fr; position: relative; padding:20px; margin:-20px; border-radius: 10px; }

.cart .item .grid:not(:has(>div~div)),
.checkoutcart .item .grid:not(:has(>div~div)),
.confirmselection .item .grid:not(:has(>div~div)) { display: block; }
.cart .item .grid:not(:has(>div~div)) .content, .checkoutcart .item .grid:not(:has(>div~div)) .content, .confirmselection .item .grid:not(:has(>div~div)) .content { padding-left:0; }

.cart .item .grid:has(+ .products),
.checkoutcart .item .grid:has(+ .products),
.confirmselection .item .grid:has(+ .products) { box-shadow:0 3px 0 rgba(0,0,0,.15); }

.cart .products,
.checkoutcart .products,
.confirmselection .products { margin: 20px -20px -20px; padding: 20px 20px 20px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; box-shadow: 0 3px 0 rgba(0,0,0,.15); }

.cart .products .product,
.checkoutcart .products .product,
.confirmselection .products .product { display:grid; grid-template-columns: 1fr auto; grid-gap:20px; }

.cart .fees,
.checkoutcart .fees,
.confirmselection .fees { margin: 20px -20px -20px; padding: 20px 20px 20px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; box-shadow: 0 3px 0 rgba(0,0,0,.15); }

.cart .fees .fee,
.checkoutcart .fees .fee,
.confirmselection .fees .fee { display:grid; grid-template-columns: 1fr auto; grid-gap:20px; }


.cart .item .img,
.checkoutcart .item .img,
.confirmselection .item .img { background-repeat: no-repeat; background-size:cover; background-position: center center; margin:-20px 0 -20px -20px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; }

.cart .item .content,
.checkoutcart .item .content,
.confirmselection .item .content { padding-left:20px; }

.cart .item .content p,
.checkoutcart .item .content p,
.confirmselection .item .content p { margin:5px 0; }

.cart .item .delete,
.checkoutcart .item .delete,
.confirmselection .item .delete,
.fastcheckout .customerinfo .delete { float:right; padding:0; font-size:16px; font-size: 16px; padding: 0; height: 30px; width: 30px; line-height: 30px; background: #ccc; box-shadow: none; margin:-5px; }

.cart .item .price,
.checkoutcart  .item .price,
.confirmselection .item .price { position: absolute; right:20px; bottom:20px; background: #2d3e41; color:#fff; font-size: 20px; padding:6px 8px; border-radius: 5px; font-weight: 700; transform: rotate(-5deg); font-family: 'Staatliches'; font-weight: 400; margin:0; }

.cart .item .price span,
.checkoutcart  .item .price span,
.confirmselection .item .price span  { font-size:10px; text-align: center; display: block; }

.cart .item .badge,
.checkoutcart .item .badge { background: #ff00aa; color:#fff; font-size: 10px; font-weight: 600; padding:3px 6px; border-radius: 3px; position: relative; top:-1px; }

.cart .vouchers .voucher,
.checkoutcart .vouchers .voucher { background: rgba(0,0,0,.05); border-radius: 10px; padding: 20px; margin-bottom: 20px; position: relative; display: grid; align-items: center; grid-template-columns: 1fr 100px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 3px solid rgba(0,0,0,.1); }

.cart .vouchers .voucher .delete,
.checkoutcart .vouchers .voucher .delete { float: right; padding: 0; font-size: 16px; font-size: 16px; padding: 0; height: 30px; width: 30px; line-height: 30px; background: #ccc; box-shadow: none; margin: -5px; }

.cart .voucher .price,
.checkoutcart  .voucher .price { position: absolute; right:60px; top:50%; background: #2d3e41; color:#fff; font-size: 20px; padding:6px 8px; border-radius: 5px; font-weight: 700; transform: rotate(-5deg) translateY(-50%); font-family: 'Staatliches'; font-weight: 400; margin:0; }

.cart .vouchers .voucher label,
.checkoutcart .vouchers .voucher label { margin:0; }

.cart .totals,
.checkoutcart .totals { display:grid; grid-template-columns: 50% 50%; margin-bottom: 20px; }
.cart .totals>div,
.checkoutcart .totals>div { font-family: 'Staatliches'; font-size:16px; }
.cart .totals>div:nth-child(even),
.checkoutcart .totals>div:nth-child(even) { text-align: right; }

.cart .checkoutbuttons button { width: 100%; max-width: 736px; }
.cart .terms { max-width: 736px; }

.cartButton { display:none; position: absolute; top:20px; right:24px; width:50px; height:50px; font-size:16px; line-height: 50px; background:#d5a245; border-radius: 25px; border:0; box-shadow: 0 0 0 5px rgb(213 162 69 / 20%); font-family: 'Staatliches'; transition: translate 0.5s ease-in-out; z-index: 100; text-align: center; padding:0; text-align: center; animation:hideandfadein2 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both; }

.cartButton.green { box-shadow: 0 0 0 5px rgb(69 213 100 / 20%); }
.cartButton.cartvisible { background:rgba(0,0,0,0); box-shadow:none; color:#2d3e41; top:14px; right:12px; animation:hideandfadein 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both; }
.cartButton.cartvisible .count { display:none; }
.cartButton.cartvisible i.fa-shopping-basket:before { content:'\f00d'; }
.cartButton.green:not(.cartvisible):before { z-index: -1; content: ''; width: 110%; height: 110%; top: -5%; left: -5%; transform: translate(-50%, -50%); background: #4ebf61; border-radius: 50%; margin-left: top; position: absolute; animation: ping 1s ease-in-out infinite both; }

.cartButton i { font-size:20px; line-height: 50px; position: relative; vertical-align: baseline; }
.cartButton .count { position: absolute; top:10px; left:5px; background: #e9be6f; color:#000; width:16px; height:16px; line-height: 16px; border-radius: 8px; font-size:11px; font-weight:700; }
.cartButton.green .count { background: #33a346; color:#fff; font-weight: 400;}

.reservationchoice { display:grid; grid-template-columns:36px 1fr; cursor:pointer; user-select: none; margin-top:1em; }
.reservationchoice div:last-child { padding-top:3px; }

.termscontainer { display:grid; grid-template-columns:36px 1fr; cursor:pointer; user-select: none; margin-top:1em; }
.termscontainer div:last-child { padding-top:3px; }
.terms { padding:20px 5px 0; }
.termslink { color:#888; text-decoration: none; padding: 5px 10px 5px 0; display: inline-block; font-weight: 700; }
.gdprlink { color:#888; text-decoration: none; padding: 5px 0; display: inline-block; font-weight: 700; }
.paymentlogos { background: url('/_img/gasa_kortlogoer.png') no-repeat top right; background-size: contain; height:25px; width:138px; float:right; }

/* Rating */
.rating {  transform:scale(.8); opacity: .33; transition: all .3s cubic-bezier(0.075, 0.82, 0.165, 1); cursor:pointer; }
.rating.selected { transform:scale(1.25); filter:grayscale(0); opacity: 1; }

/* Language selector */
.languageSelector { display: none; }

/* Modal */
.modal_content .buttons { margin: 10px -24px -24px; padding: 16px 24px 24px; background: #f0f0f0; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; }
.modal_content .buttons button { width:100%; margin-top:10px; }
.modal_window>.modal_buttons { background: #f0f0f0; margin: 24px -24px -24px -24px; padding: 24px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
.modal_window>.modal_buttons .modal_button_wrapper { margin:0 10px; }

/* Responsive */
@media only screen and (max-height: 840px) {
    .top { height:30%; }
    .top .logo { transform: none; }
    .hero { height:30%; }
    .cart { padding: 24px 24px 16px; }    
}

@media only screen and (max-width: 1640px) {
    .top .logo { top:24px; left:24px; width:calc(100% - 48px); height:72px;  }
    view[name=signagreement] .top .logo { height:48px;  }
    view[name=cancelbooking] .top .logo { height:48px;  }
}

@media only screen and (max-width: 1280px) {

    /* Hero */
    .top { max-height: 128px; }
    .hero { max-height: 128px; }
    .top .logo { top:24px; left:24px; height:48px; transform: none; }

    /* Resourcetypes */
    .resourceTypes { grid-template-columns: 1fr 1fr;}

    /* Timeslots */
    .timeslots { columns: auto 3; }
    
    /* Containers */    
    view .pagecontent { padding:42px 24px; }

    /* Navbuttons */
    view[name=checkout] .scrollable.hasNavbuttons { padding-bottom:52px; }
    .viewcontent .navbuttons { padding:0 16px 16px; }
    .pagecontent .navbuttons { padding:0 16px 16px; }

}

@media only screen and (max-width: 840px) {

    /* Fonts */
    h1 { font-size: 28px; margin-bottom:32px; }
    h1:after { height: 4px; bottom: -16px; }
    h2 { font-size: 24px; }

    /* Views */
    view[name=booking] { display:block; }
    view[name=checkout] { display:block; }    
    [data-enablecart="1"] view[name=checkout] .pagecontent>.checkoutgrid:not(.persistant) { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; width: 100%; }
    
    .top { max-height: 136px; }
    .hero { padding:24px; max-height: 136px; }

    /* cart */
    .cart { width: 100%; min-height:180px; max-height: 100%; overflow:auto; position: absolute; transition: all .5s cubic-bezier(.76,.22,.15,1); left: 0; top:-100%; padding:24px; box-shadow: 0 25px 25px rgb(0 0 0 / 25%); }
    .cart.visible { top:0; }
    .cartBg.visible { display:block; animation: hideandfadein2 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;  }
    .cart .checkoutbuttons { position: static; padding:0; }
    .cart .items:empty:after { display:none; }

    .checkoutcontainer { order: 1; }
    .checkoutsummary { order: 2; margin-top:20px; }
    .checkoutsummary>h2 { border-top: 1px solid rgba(0,0,0,.15); padding-top:32px; }

    /* Resourcetypes */
    .resourceTypes { grid-template-columns: 1fr 1fr 1fr; }
    .resourceType .card .content { padding:16px; }
    .resourceType .card .top { min-height: 100px; }

    /* Numselector */
    .numselector { width:116px; grid-template-columns: 36px 1fr 36px; }
    .numselector button { font-size: 12px; }
    .numselector input { font-size: 13px; }

    /* Datepicker */
    .datepickerwrap { width: 152px; }
    .datepickerwrap input { font-size:13px; padding: 0px 60px 0 16px; }
    .ui-datepicker { top:10px !important; transform: translateY(0); }

    /* Timeslots */
    .timeslot .pricebadge { top:-2px; right:0; font-size:11px; }

    /* Cart */
    [data-enablecart="1"] .cartButton { display:block;}
    [data-enablecart="1"] .cart { height:auto; }
    [data-enablecart="1"] .cart.empty:after { content:''; }

}

@media only screen and (max-width: 640px) {

    .grid { display:block; }
    .inputwrapper.sidebyside:nth-child(even) { margin-right: 0; }
    .bookingperiodselector { width: 100%; }

    /* Views */
    .top { max-height: 100px; }
    .hero { max-height: 100px; }
    .top .logo { height: 36px; }

    .cart .item .grid, .confirmselection .item .grid, .checkoutcart .item .grid { display: block; }
    .cart .item .img, .confirmselection .item .img, .checkoutcart .item .img { display:none; }
    .cart .item .content, .confirmselection .item .content, .checkoutcart .item .content { padding-left:0; }

    .resourceTypes { grid-template-columns: 1fr 1fr; grid-gap: 10px; }
    .terms { text-align: center; }
    .paymentlogos { margin: 0 auto; float:none; }

    .relatedProduct { padding-right:0; }
    .relatedProduct .card { grid-template-columns: 1fr; grid-template-rows: 100px 1fr; }
    view .viewcontent { padding:24px; }
    view[name=checkout] .scrollable.hasNavbuttons { padding-bottom: 50px; }
    view[name=checkout] .checkoutgrid { grid-gap: 0 16px; }
    view[name=bookingconfirmation] .pagecontent .tableright img { margin:0 auto; display:block !important; }
    view[name=bookingconfirmation] table>tbody>tr td:empty { padding:0 !important; }
    [data-enablecart=""] .checkoutsummary>h2 { padding-top:20px; }

    /* Input */
    label { font-size: 11px;}
    input { min-height:46px;}    
    view[name=checkout] .voucherform button { height:43px; }
    view[name=checkout] .fastcheckout button { height:46px; }
    view[name=checkout] .fastcheckout .checkoutgrid { display: block; }
    view[name=checkout] .fastcheckout .checkoutgrid>div:last-child { padding-top:1em; }
    view[name=checkout] .fastcheckout .checkoutgrid>div:last-child label { display: none; }    
}

@media only screen and (max-width: 480px) {
    view[name=checkout] .checkoutgrid .checkoutgrid { display: block; }
}
@media only screen and (max-width: 400px) {
    .resourceTypes { grid-template-columns: 1fr; grid-gap:16px; }
    .timeslots { columns: auto 2; }
}

@media only screen and (max-width: 360px) {

    /* Fonts */
    h1 { font-size: 24px; }
    h2 { font-size: 20px; }
    h2 span { display: block; }    

    /* Datepicker */
    .ui-datepicker { top:10px !important; }
}


/* Print */
@media screen { .print_content { display:none; } }

/* Custom animations */
.puff-out-center { -webkit-animation: puff-out-center 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both; animation: puff-out-center 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both; }
.ping { -webkit-animation: ping 0.8s ease-in-out infinite both; animation: ping 0.8s ease-in-out infinite both; }
@keyframes puff-out-center { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2); opacity: 0; } }
@keyframes ping { 0% { transform: scale(0.5); opacity: 1;  } 100% { transform: scale(1.2); opacity: 0; } }
@keyframes slideup { 0% { bottom: -100%; } 100% { bottom: 0; } }
@keyframes hideandfadein { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } }
@keyframes hideandfadein2 { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fadezoom { 0% { transform: scale(0.25); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }