:root{

    --cc-h-main: #009933;
    --cc-r-main: 0,153,51;

    --cc-h-accent: #66CC33;
    --cc-r-accent: 102,204,51;

    --cc-h-main-pro: #009245;
    --cc-r-main-pro: 0,146,69;

    --cc-h-aacent-pro: #7AC943;
    --cc-r-accent-pro: 122,201,67;

    --cc-h-offwhitebeige: #FEFCF2;
    --cc-r-offwhitebeige: 254,252,242;

    --cc-h-offwhite: #e6e6e6;
    --cc-r-offwhite: 230,230,230;

    --cc-h-offblack: #333333;
    --cc-r-offblack: 51,51,51;


    --xvar: .7;
    --fdist: .5vw;

    --vpad: max(16vw,12vh);
    --vs: .5;
    --vbr: 3vw;

    /*--vpad: 0;*/
    /*--vs: 0;*/
    /*--vbr: 0;*/

    --round: max(.3vw,.7vh);

}

* {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:middle;
    background: transparent;
    color: var(--cc-h-offblack);
    box-sizing: border-box;
    user-select: none;
    /*border: solid 1px deepskyblue;*/
}

html{
    /*scroll-behavior: smooth;*/
    scrollbar-width: none;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: inherit;
    cursor: inherit;
}

img{
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

input, textarea{
    /*background: rgba(255,255,255,.3);*/
    background: rgba(0,0,0,.12);
    border: solid 1px rgba(255,255,255,.1);
    color: white;
    border-radius: .3vw;
    font-size: 1.2vw;
    width: 100%;
    font-family: "AvenirN", sans-serif;
    padding: .5vw;
    margin: .2vw 0;
}

body{
    margin: 0;
    /*font-family: "Avenir Next", "AvenirN", sans-serif;*/
    font-family: "AvenirN", sans-serif;
    /*background: var(--cc-h-offw);*/
    color: var(--cc-h-offblack);
    background: var(--cc-h-offwhitebeige);
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;
    overflow-x: hidden;
    overflow-y: scroll;
}

body::-webkit-scrollbar{
    display: none;
}

#vbg{
    width: 100vw;
    height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    /*padding: 12vw;*/

    position: fixed;
    top: 100vh;
    left: 0;
    z-index: 200;
    /*opacity: .3;*/
    /*display: none;*/
}

#vb{
    position: absolute;
    width: calc(100vw - var(--vpad));
    height: calc(100vh - var(--vpad));
    /*width: 100vw;*/
    /*height: 100vh;*/
    border-radius: var(--vbr);
    object-fit: cover;
    object-position: center;
}

#vs{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: calc(100vw - var(--vpad));
    height: calc(100vh - var(--vpad));
    /*width: 100vw;*/
    /*height: 100vh;*/
    border-radius: var(--vbr);
    box-shadow: inset 0 0 12px rgba(0,0,0, var(--vs));
    overflow: hidden;
}

#logo{
    z-index: 99999;
    width: 100vw;
    height: 100vh;
    object-fit: contain;
    object-position: center center;
    filter: drop-shadow(16px 16px 25px rgba(0,0,0,.7));
    padding: max(16vw,12vh);
    opacity: .95;
    /*margin-bottom: -100vh;*/
    /*margin-bottom: -50vh;*/
    /*transform: translateY(-50vh);*/
}

#menu{
    z-index: 999;
    position: fixed;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    top: -70px;
    left: 0;
    width: 100vw;
    height: 70px;
    /*background: rgba(var(--cc-r-offwhite),.9);*/
    background: rgba(var(--cc-r-offwhitebeige),.9);
    filter: drop-shadow(7px 7px 12px rgba(0,0,0,.1));

    /*display: none;*/
}

#mpic{
    /*position: absolute;*/
    cursor: pointer;
    display: flex;
    width: 60px;
    height: 60px;
    object-fit: contain;
    object-position: center center;
    margin-left: 16px;
}

#mitems{
    z-index: 9999;
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100vw;
    height: 70px;
    padding: 0;
    background: rgba(var(--cc-r-offwhitebeige),0);
    color: black;
    /*backdrop-filter: blur(12px);*/
    /*opacity: 0;*/
    /*background: rgba(255,255,255,.7);*/
}

.mitem{
    z-index: 9999999999999;
    cursor: pointer;
    /*color: var(--cc-h-dark);*/
    color: var(--cc-h-accent);
    margin: 0 1vw;
    opacity: .7;
    transition: .3s;
    font-weight: bold;
    font-size: .7vw;
    /*border: solid 1px deeppink;*/
}

.mcta{
    color: white;
    position: absolute;
    right: 0;
    /*background: #134062;*/
    background: var(--cc-h-main);;
    opacity: .9;
    border-radius: var(--round);
    padding: var(--round) calc(var(--round) * 2);
}

.mmct{
    color: var(--cc-h-main);
}

.mlang{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 12vw;
    opacity: .9;
}

.mlone{
    font-weight: normal;
    font-size: .7vw;
    margin: .3vw;
    opacity: .5;
    transition: .3s;
}

.mlcn{
    opacity: .2;
}

.lsel{
    transition: .3s;
    opacity: 1;
}

.xp{
    position: absolute;
    bottom: 0;
    height: calc(var(--vpad) / 2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    font-weight: bold;
    font-size: 1.6vw;
    overflow: hidden;
    text-align: center;
    /*border: solid 1px deeppink;*/
}

#xp1{
    /*color: var(--cc-h-accent);*/
    color: var(--cc-h-offwhitebeige);
    filter: drop-shadow(3px 3px 3px rgba(0,0,0,.9));
    opacity: 0;
    z-index: 999999;
}

#xp2{
    /*color: var(--cc-h-offwhitebeige);*/
    color: var(--cc-h-accent);
    filter: drop-shadow(3px 3px 3px rgba(0,0,0,.1));
}

#lax{
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    /*opacity: .3;*/
    z-index: 99;
    /*overflow: hidden;*/
    /*border: solid 1px deeppink;*/
}

.lax{
    position: absolute;
    width: 100vw;
    height: 250vh;
    object-fit: cover;
    object-position: center center;
    will-change: transform;
}

#laxclip{
    z-index: 100;
    position: absolute;
    width: 100vw;
    height: 250vh;
    object-fit: cover;
    object-position: center center;
    will-change: transform;
    overflow: hidden;
    background: var(--cc-h-offwhitebeige);
    /*opacity: .7;*/
    transform: translateY(250vh);
}

.laxtxt{
    position: absolute;
    top: 5vw;
    width: 90vw;
    color: #000000;
    font-size: 2vw;
    font-weight: bold;
    /*justify-content: center;*/
}

#laxtxta{
    text-align: left;
    color: black;
    opacity: .7;
    text-shadow: unset;
}

#laxtxtb{
    text-align: right;
    color: white;
    opacity: .9;
    text-shadow: unset;
}

#laxfoot{
    z-index: 200;
    width: 100vw;
    height: 250vh;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

#lfbox{
    position: absolute;
    background: rgba(var(--cc-r-accent),.75);
    height: 2vw;
    width: 100vw;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ltup{
    height: 5vw;
    width: 94vw;
    /*border: solid 1px deeppink;*/
}

#laxtxtc{
    bottom: unset;
    top: 1.2vw;
    text-align: left;
    color: black;
    opacity: .7;
}

#laxtxtd{
    top: unset;
    bottom: 1vw;
    text-align: right;
    color: white;
    opacity: .7;
}

.sec{
    z-index: 9;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /*border: solid 1px coral;*/
}

#sec1{
    height: 100vh;
    /*background: var(--cc-h-offblack)*/
    /*border: solid 1px deeppink;*/
}

#sec2{
    z-index: 200;
    /*height: 50vh;*/
    /*visibility: hidden;*/
    /*z-index: 99999;*/
    /*background: var(--cc-h-offwhitebeige);*/
    /*border-radius: calc(var(--round) * 3);*/
    /*box-shadow: 0 0 21px rgba(0,0,0, .3);*/
}

#sec3{
    z-index: 200;
    /*z-index: 999999;*/
    /*background: var(--cc-h-offwhitebeige);*/
    /*margin-top: calc(var(--round) * 3);*/
}

#sec4{
    padding: 5vw;
    padding-top: 0;
    z-index: 999;
    height: 80vh;
}

#sec5{
    z-index: 200;
    background: #00290E;
}

.card{
    z-index: 9999999;
    margin: 3vw;
    height: 70vh;
    width: 20vw;
    border-radius: calc(var(--round) * 3);
    background: white;
    overflow: hidden;
    transition: .7s;
    display: flex;
    align-items: center;
    justify-content: center;
    /*filter: drop-shadow(12px 12px 25px rgba(0,0,0,.7));*/
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    will-change: transform;
}

.ttc{
    position: absolute;
    bottom: 5vw;
    width: 18vw;
    overflow: hidden;
    transition: .3s;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.inc{
    width: 18vw;
    font-size: .7vw;
    color: rgba(0,0,0,.7);
    border-radius: var(--round);
    background: rgba(var(--cc-r-accent),.1);
    margin-bottom: .5vw;
    padding: calc(var(--round) / 2) var(--round);
    text-align: center;
    font-weight: bold;
}

.cctitle{
    position: absolute;
    color: var(--cc-h-main);
    font-size: 1.2vw;
    font-weight: bold;
    width: 100%;
    text-align: center;
    top: 35vh;
    padding: .5vw;
    transition: .3s;
    opacity: .9;
}

.ccpic{
    width: 20vw;
    height: 30vh;
    position: absolute;
    object-fit: cover;
    object-position: center center;
    top: 0;
    transition: .3s;
    /*opacity: .9;*/
}

.infopay{
    border-radius: var(--round);
    width: 19vw;
    height: 9vw;
    background: rgba(var(--cc-r-offwhitebeige),.1);
    position: absolute;
    bottom: .5vw;
    right: 1.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.infonotes{
    border-radius: var(--round);
    width: 19vw;
    height: 9vw;
    /*background: rgba(var(--cc-r-offwhitebeige),.1);*/
    position: absolute;
    bottom: .5vw;
    right: 1.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: rgba(0,0,0,.12);
    border: solid 1px rgba(255,255,255,.3);
}

.infonotes:before{
    width: 100%;
    text-align: center;
    content: 'Hotel address or any additional info/notes?';
    text-transform: uppercase;
    color: white;
    opacity: .5;
    font-size: .7vw;
    position: absolute;
    top: .5vw;
}

#notesbox{
    display: flex;
    left: 1.5vw;
    right: unset;
}

#notestxt{
    width: 19vw;
    height: 9vw;
    /*padding: 1vw;*/
    font-size: 1vw;
    resize: none;
    background: transparent;
    border: none;
    padding-top: 1.6vw;
}

#ip2{
    display: none;
    left: 1.5vw;
    right: unset;
}

.ipt{
    color: white;
    position: absolute;
    top: .5vw;
    font-weight: bold;
    font-size: 1vw;
}

.ipp{
    position: absolute;
    top: 1.7vw;
    color: white;
    opacity: .5;
    font-size: .7vw;
}

.ipb{
    color: black;
    position: absolute;
    bottom: 4vw;
    font-weight: normal;
    font-size: .7vw;
}

#ppar{
    position: absolute;
    bottom: 7vw;
    color: rgba(var(--cc-r-offblack),.8);
    font-size: .7vw;
    /*display: flex;*/
    display: none;
    align-items: center;
    justify-content: center;
    opacity: .8;
}

#ppar:after{
    content: attr(data-xt);
    position: absolute;
    bottom: -1vw;
    color: rgba(var(--cc-r-offwhite),.8);
    font-size: .7vw;
    opacity: .7;
    font-weight: bold;
}

#ppar>img{
    position: absolute;
    top: -1.6vw;
    width: 1.2vw;
    height: 1.2vw;
    object-position: center center;
    object-fit: contain;
    opacity: .7;
}

#ctacustom{
    position: relative;
    top: 130vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: var(--cc-h-accent);
    color: #ffffff;
    font-size: 2vw;
    width: 100vw;
    padding: 3vw;
    text-align: center;
}


#error{
    position: absolute;
    bottom: 6vw;
    width: 20vw;
    height: 4vw;
    font-size: .7vw;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    font-weight: bold;
    opacity: 0;
    background: transparent;
    /*background: #7ac943;*/
}

#ei{
    pointer-events: none;
    stroke: black;
    stroke-width: 2px;
    width: 2vw;
    height: 2vw;
    margin-right: 1vw;
    position: absolute;
    top: 0;
}

#em{
    position: absolute;
    bottom: 1vw;
}

.ccbuy{
    cursor: pointer;
    position: absolute;
    bottom: 1vw;
    width: 18vw;
    background: var(--cc-h-accent);
    padding: .3vw;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: rgba(0,0,0,1);
    font-size: 2.1vw;
    font-weight: normal;
    border-radius: var(--round);
    transition: .3s;
    opacity: .95;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.ccnob{
    pointer-events: none;
    cursor: none;
    background: none;
    box-shadow: none;
}

.ccbuy:after{
    content: attr(data-post);
    width: 2vw;
    position: absolute;
    right: 1vw;
    text-align: center;
    font-weight: bold;
    font-size: .5vw;
    color: rgba(255,255,255,.9);
    overflow: hidden;
    line-height: 1.2;
    white-space: pre;
    display: inline-block;
}

.ccbuy:before{
    content: attr(data-fx);
    width: 2.5vw;
    position: absolute;
    left: 1vw;
    text-align: left;
    font-weight: normal;
    font-size: .5vw;
    color: rgba(0,0,0,.9);
    line-height: 1.2;
    white-space: pre;
    display: inline-block;
}



#title{
    position: absolute;
    top: 5vw;
    width: 100vw;
    padding: 3vw;
    object-fit: contain;
    object-position: bottom center;
}

#txt{
    position: absolute;
    width: 100vw;
    padding: 3vw;
    top: 25vw;
    font-size: 1.8vw;
    text-align: justify;
}

#pinfo{
    display: none;
    position: absolute;
    right: 0;
    top: 1vw;
    margin: 0;
    font-size: 1vw;
    color: rgba(255,255,255,.3);
    background: none;
    box-shadow: none;
    text-align: right;
}

#pinfo>.svb{
    pointer-events: none;
    position: absolute;
    right: 1vw;
    opacity: .3;
}

#info{
    display: none;
    z-index: 9999999;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top:0;
    left: 0;
    opacity: 0;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: rgba(var(--cc-r-accent),.97);
}

#ipic{
    height: 100vh;
    width: 30vw;
    object-position: center center;
    object-fit: cover;
}

#ibox{
    position: relative;
    height: 100vh;
    width: 70vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 3vw;
    overflow-y: scroll;
    overscroll-behavior: contain;
    /*background: rgba(255,0,0,.3);*/
}

#itour{
    z-index: 9999999;
    position: fixed;
    top: 0;
    width: 70vw;
    height: 7vw;
    font-size: 4vw;
    /*color: var(--cc-h-offblack);*/
    color: rgba(var(--cc-r-main),.95);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    /*filter: drop-shadow(12px 12px 25px rgba(0,0,0,.7));*/
    background: linear-gradient(180deg, rgba(var(--cc-r-accent),.99) 0%, rgba(var(--cc-r-accent),.95) 80%, rgba(var(--cc-r-accent),0) 100%);

    /*border: solid 1px deeppink;*/

    /*text-shadow: 2px 4px 3px rgba(0,0,0,0.3);*/
    /*text-shadow: 0px 3px 0px rgba(var(--cc-r-main),.9), 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,0.1);*/
    /*text-shadow: 6px 6px 2px rgba(0,0,0,0.1);*/
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),  0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
}

#itourtxt{
    /*color: var(--cc-h-offblack);*/
    color: black;
    opacity: .9;
    font-size: 1.2vw;
    margin-bottom: 3vw;
    margin-top: 5vw;
    padding: 0 3vw;
    /*border: solid 1px deeppink;*/
}

#inotes{
    margin-top: 3vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 5vw;
}

.in{
    width: 45vw;
    font-size: 1vw;
    color: black;
    border-radius: var(--round);
    background: rgba(var(--cc-r-offwhite),.3);
    margin-bottom: .5vw;
    padding: calc(var(--round) / 2) var(--round);
    text-align: center;
}

.ino{
    color: white;
    background: rgba(var(--cc-r-offblack),.3);;
}

#itime{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52vw;
}

.it{
    width: 52vw;
    height: 4vw;
    line-height: 1.1;
    font-weight: bold;
    color: var(--cc-h-offblack);
    font-size: 1vw;
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: .43vw;
    padding-left: 6vw;
    overflow: hidden;
    /*border: solid 1px deeppink;*/
}

.it:before{
    z-index: 10;
    position: absolute;
    left: 0;
    top: 0;
    content: attr(data-time);
    background: var(--cc-h-main);
    color: var(--cc-h-offwhite);
    font-weight: bold;
    /*padding: calc(var(--round) / 2) var(--round);*/
    border-radius: var(--round);
    width: 5vw;
    height: 2vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.it:after{
    z-index: 7;
    content: '';
    background: var(--cc-h-main);
    position: absolute;
    top: 1vw;
    left: 1.85vw;
    height: 3vw;
    width: 3px;
}

.it:last-child{
    height: 2vw;
}

#ipay{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    background: var(--cc-h-main);
    width: 100%;
    height: 5vw;
}

#ipnotes{

}

#infox{
    z-index: 99999999999;
    cursor: pointer;
    position: absolute;
    top: 1vw;
    right: 1vw;
    width: 2vw;
    height: 2vw;
    object-fit: contain;
    object-position: center center;
    opacity: .3;
    transition: .3s;
}



#overpay{
    z-index: 99999998;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    height: 100vh;
    width: 70vw;
    top: calc(100vh - 11vw);
    right: 0;
    pointer-events: none;
    /*border: solid 1px aqua;*/
}

#opgap{
    top: 0;
    height: 6vw;
    width: 70vw;
    background: transparent;
}

.ccb{
    pointer-events: all;
}

.svb{
    cursor: pointer;
    fill: none;
    stroke-width: 1px;
    stroke: white;
    stroke-linecap: round;
    stroke-linejoin: round;
    width: 2vw;
    height: 2vw;
    object-fit: contain;
    object-position: center center;
    opacity: .7;
    transition: .3s;
}

#opbox{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 70vw;
    height: calc(100vh - 5vw);
    background: rgba(var(--cc-r-main),.99);
    /*box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;*/
    box-shadow: rgba(0, 0, 0, .7) 0 25px 75px 7px;
    /*border: solid 1px deeppink;*/
}

#optop{
    position: absolute;
    top: 6vw;
    width: 100%;
    height: 5vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    z-index: 999999999999999999;
    /*border: solid 1px deeppink;*/
}

#opbot{
    position: absolute;
    top: 11vw;
    width: 100%;
    height: calc(100vh - 11vw);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /*border: solid 1px coral;*/
    /*pointer-events: none;*/
}

#ppl {
    color: white;
    opacity: .9;
    width: 7vw;
    font-size: .7vw;
    text-align: center;
    font-weight: bold;
}

#ptotal{
    position: absolute;
    right: 1vw;
    top: 1vw;
    margin: 0;
}


.poption{
    cursor: pointer;
    position: absolute;
    top: 0;
    width: 100%;
    height: 3vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /*border: solid 1px deeppink;*/
}

.optit{
    color: white;
    opacity: .9;
    width: 12vw;
    font-size: .7vw;
    text-align: center;
    font-weight: bold;
    padding-left: 2vw;
    /*border: solid 1px deeppink;*/
}

.srel{
    pointer-events: none;
    position: absolute;
    margin-left: -9vw;
}

.soff{
    stroke: black;
}

.poption > .ccnob{
    left: 1vw;
    opacity: .5;
    top: 1vw;
}

[data-op="off"]{
    opacity: .3;
}

[data-op="off"] > .ccnob{
    text-decoration: line-through;
    text-decoration-color: rgba(255,255,255,.7);
    text-decoration-thickness: 1px;
}

[data-op="off"]>.optit{
    color: black;
}

[data-op="off"] > .son{
    display: none;
}

[data-op="on"] > .soff{
    display: none;
}

#op1{
    top: -1vw;
    opacity: 0;
    pointer-events: none;
}

#op2{
    top: 2vw;
    opacity: 0;
    pointer-events: none;
}

#op3{
    top: 3vw;
    padding: 2vw;
}

#op4{
    top: 6vw;
    padding: 2vw;
}

.poption>input{
    font-size: 1vw;
    border: solid 1px rgba(255,255,255,.3);
    margin: .5vw;
}

.poption>input::placeholder{
    color: white;
    opacity: .3;
}

.poption>input:first-child, .poption>input:last-child{
    margin: 0;
}

#tdate{
    cursor: pointer;
    position: absolute;
    bottom: 1.3vw;
    width: 21.7vw;
    height: 2.4vw;
    background: rgba(var(--cc-r-accent),.2);
    border-radius: var(--round);
    color: rgba(255,255,255,1);
    font-weight: bold;
    font-size: 1.2vw;
    white-space: nowrap;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s;
}

#tdate::placeholder{
    color: white;
    opacity: .8;
}

#datebox{
    z-index: 999999;
    position: absolute;
    bottom: 1vw;
    /*background: deeppink;*/
}

#ptotaldeposit{
    display: none;
    position: absolute;
    left: 2vw;
    bottom: 1vw;
    margin: 0;
    height: 3vw;
    opacity: .5;
}

#ptotalupfront{
    position: absolute;
    right: 2vw;
    bottom: 1vw;
    margin: 0;
    height: 3vw;
}

#pper{
    position: absolute;
    left: 1vw;
    top: 1vw;
    margin: 0;
    opacity: .5;
}

/*#thankyou{*/
/*    display: none;*/
/*    z-index: 99999999;*/
/*}*/

#footer{
    z-index: 99999;
    position: relative;
    height: 75vh;
    /*height: 100px;*/
    width: 100vw;
    /*background: rgba(0,0,0,.3);*/
    /*background: rgba(var(--cc-r-main),.9);*/
    /*background: #00290E;*/
    background: linear-gradient(114.52810449018193deg, rgba(0, 41, 14,1) 11.477562438935028%,rgba(0, 40, 13,1) 11.477562438935028%,rgba(3, 26, 10,1) 96.5876320530044%);
    display: flex;
    align-items: center;
    justify-content: center;

}

#underfoot{
    z-index: 99999;
    position: relative;
    height: 5vh;
    width: 100vw;
    /*background: rgba(0,0,0,.7);*/
    /*background: #333333;*/
    /*background: #111111;*/
    /*background: rgba(3, 26, 10,1);*/
    background: #010d05;
    display: flex;
    align-items: center;
    justify-content: center;
}

#pp{
    cursor: pointer;
    display: flex;
}

.uf{
    /*width: 50vw;*/
    /*position: absolute;*/
    font-size: 1.6vh;
    font-weight: normal;
    /*color: #EBEB75;*/
    color: white;
    opacity: .3;
    position: absolute;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#clc{
    object-fit: contain;
    object-position: center center;
    height: 2.1vh;
    margin-left: 1vh;
    margin-right: .5vh;
    transition: .3s;
    filter: saturate(0%);
}



#ufl{
    left: 3vw;
}

#ufr{
    right: 3vw;
    cursor: pointer;
    transition: .3s;
}

#clist{
    width: 35vw;
    height: 75vh;
    position: absolute;
    left: 3vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

#messagebox{
    position: absolute;
    top: 0;
    right: 10vw;
    width: 48vw;
    height: 75vh;
    padding: 5vh;
    display: flex;
    flex-direction: column;

    /*background: rgba(235,196,117,.02);*/
}

#mtxt{
    height: 100%;
    resize: none;
}

#myou{

}

#ema{
    color: var(--cc-h-accent);
    transform: translateY(3vh);
    font-size: 2.5vw;
    font-weight: bold;
    cursor: pointer;
    transition: .7s;
    opacity: .7;
    user-select: text;
}

#con{
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 5vh;
}

.spacer{
    width: 2vw;
    height: 2vw;
}

#fufore{
    position: absolute;
    left: 3vw;
    width: 25vw;
    text-align: left;
    padding-left: 2vw;
    background: var(--mcs-h-green);
    bottom: 3vw;
}



#fuforeco{
    position: absolute;
    right: 3vw;
    width: 25vw;
    text-align: right;
    padding-right: 2vw;
    background: var(--mcs-h-green);
    bottom: 3vw;
}

#fufore2{
    position: absolute;
    left: 3vw;
    width: 25vw;
    text-align: left;
    padding-left: 2vw;
    /*background: var(--mcs-h-orange);*/
    background: var(--mcs-h-green);
    bottom: 3vw;
}



#fuforeco2{
    position: absolute;
    right: 3vw;
    width: 25vw;
    text-align: right;
    padding-right: 2vw;
    /*background: var(--mcs-h-orange);*/
    background: var(--mcs-h-green);
    bottom: 3vw;
}


.mainrev>.pevid{
    transform: scale(1);
    /*transform: rotate(3deg);*/
    filter: grayscale(1) contrast(1.2);
    transition: 2s;
    opacity: .5;
}



.coni{
    color: #ffffff;
    font-size: 1.1vw;
    font-weight: bold;
    cursor: pointer;
    transition: .7s;
    opacity: .7;
    text-align: center;
    line-height: 1.2;
}

.conless{
    opacity: .7;
    font-weight: normal;
    font-size: 3.2vw;
}

.telo{
    position: relative;
    padding: .5vw;
    padding-bottom: .7vw;
    background: var(--cc-h-accent);
    transition: .3s;
    margin-top: 2vw;
    cursor: pointer;
    border-radius: .3vw;
    color: rgba(0,0,0,.7);
    box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 4px, rgba(0, 0, 0, 0.5) 0px 7px 13px -3px, rgba(0, 0, 0, 0.5) 0px -3px 0px inset;
}

.telo:before{
    content: attr(data-tip);
    position: absolute;
    right: 0;
    white-space: nowrap;
    color: #ffffff;
    top: -1.2vw;
    font-size: .7vw;
    font-weight: bold;
    padding-right: 1vw;
}

#telink{
    user-select: text;
}

.tmess{
    text-align: right;
    padding-right: 1vw;
}

.talk{
    font-weight: normal;
    font-size: 4.3vw;
    /*font-size: 7vw;*/
    opacity: .7;
    position: absolute;
    top: 2vh;
    text-transform: uppercase;
}

#fsoc{
    z-index: 300;
    right: 3vw;
    position: absolute;
    display: flex;
    flex-direction: column;
}

.svs{
    cursor: pointer;
    height: 5vh;
    width: 5vh;
    fill: var(--cc-h-accent);
    opacity: .7;
    stroke: none;
    transition: .3s;
    padding: .5vh;
    margin: 1vh;
    display: flex;
    flex-direction: row;
    z-index: 99999999999999;
}

.vsep{
    height: 2vh;
}

#aus{
    z-index: -1;
    color: var(--mcs-h-yellow);
    opacity: .2;
    font-size: 28vw;
    white-space: nowrap;
    position: absolute;
}

#eqh{
    /*z-index: -1;*/
    color: var(--mcs-h-yellow);
    /*color: deeppink;*/
    opacity: .1;
    font-size: 24vw;
    white-space: nowrap;
    /*border: solid 1px deeppink;*/
    position: absolute;
    top: 0;
    height: 20vw;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-left: -3vw;
}

#eqp{
    /*z-index: -1;*/
    color: var(--mcs-h-yellow);
    /*color: deeppink;*/
    opacity: .1;
    font-size: 18.5vw;
    white-space: nowrap;
    /*border: solid 1px deeppink;*/
    position: absolute;
    top: 0;
    height: 20vw;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#eqht{
    position: absolute;
    top: 0;
    color: white;
    font-size: 2.1vw;
    opacity: .9;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20vw;
    white-space: normal;
    padding: 0 5vw;
    text-align: center;
    line-height: 2;
}

#eqht2{
    position: absolute;
    top: 1.6vw;
    color: white;
    font-size: 2.2vw;
    opacity: .9;
    width: 60vw;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
    padding: 3vw 3vw;
    text-align: left;
    line-height: 1;
    /*border: solid 1px deeppink;*/
}

#copyright{
    color: white;
    opacity: .3;
    font-size: 1.6vh;
    position: absolute;
    bottom: 1vh;
}

#qrlogo{
    position: absolute;
    top: 7.5vw;
    left: 7vw;
    height: 12vh;
    width: 27vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /*border-radius: var(--round);*/
    /*overflow: hidden;*/
}

#qrl1{
    height: 100%;
    width: 50%;
    object-fit: contain;
    object-position: center left;
}

#qrl2{
    height: 100%;
    width: 50%;
    object-fit: contain;
    object-position: center center;
}

#toast{
    display: none;
    z-index: 999999999999999;
    position: fixed;
    top: 0;
    bottom: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    opacity: 0;
    width: 100vw;
    height: 100vh;
    background: var(--cc-h-accent);
}

#tmain{
    color: white;
    font-weight: bold;
    font-size: 4vw;
    width: 90vw;
    text-align: center;
    opacity: .9;
}

#tsub{
    margin-top: 0;
    color: black;
    font-weight: bold;
    font-size: 1vw;
    width: 80vw;
    text-align: center;
    opacity: .7;
}

@media (hover: hover) and (pointer: fine) {

    .mitem:hover{
        /*color: var(--cc-h-main);*/
        transition: .3s;
        opacity: 1;

        transform: scale(1.2);
    }

    .mcta:hover{
        color: white;
        transform: scale(1.1);
    }

    .mlang:hover{
        transform: scale(1);
    }

    .mlone:hover{
        opacity: 1;
    }

    .mlcn:hover{
        opacity: .5;
    }

    .ccbuy:hover{
        transition: .3s;
        transform: scale(1.03);
        opacity: 1;
    }

    .card:hover{
        transform: scale(1.2);
        transition: .3s;
    }

    .card:hover > .ttc{
        transition: .3s;
        opacity: 0;
        transform: scale(0);
    }

    .card:hover>.ccpic{
        width: 25vw;
        height: 50vh;
        /*transform: scale(1.2);*/
        transition: .3s;
        /*opacity: 1;*/
    }

    .card:hover>.cctitle{
        top: 52vh;
        transform: scale(1.1);
        opacity: 1;
    }

    #infox:hover{
        transition: .3s;
        transform: scale(1.2);
        opacity: .7;
    }

    .svb:hover{
        stroke-width: 2px;
        opacity: .9;
        transition: .3s;
        transform: scale(1.2);
    }

    #tdate:hover{
        transform: scale(1.2);
        transition: .3s;
        background: rgba(var(--cc-r-accent),.5);
    }

    #ufr:hover #clc{
        transition: .3s;
        transform: scale(1.6);
        filter: saturate(100%);
    }

    #ufr:hover{
        transition: .3s;
        transform: scale(1.1);
        opacity: .7;
    }

    #ema:hover{
        transform: translateY(3vh) scale(1.2);
        opacity: 1;
        transition: .3s;
    }

    .mainrev>.pevid:hover{
        transform: scale(1.2);
        filter: grayscale(0) contrast(1);
        transition: .7s;
        opacity: 1;
    }

    .telo:hover{
        transform: scale(1.1);
        transition: .3s;
    }

    .svs:hover{
        opacity: 1;
        transform: scale(1.1);
        stroke: none;
        transition: .3s;
    }

    #svfb:hover{
        fill: #1c62e6;
    }

    #svig:hover{
        fill: #d20063;
    }

    #svtw:hover{
        fill: #57aaed;
    }

    #svyt:hover{
        fill: #c90020;
    }

    #svpi:hover{
        fill: #ba001d;
    }

    #svin{
        transform: scale(1.2);
    }

    #svin>path{
        stroke: #35e0a1;
    }

    #svin:hover{
        fill: #35e0a1;
        transform: scale(1.3);
    }

    .nom{
        display: flex;
    }

    .omo{
        display: none;
    }

}

/* FONTS */

@font-face {
    font-family: 'AvenirN';
    src: local('Avenir Next Ultra Light'), local('AvenirNext-UltraLight'),
    url('fonts/av.woff2') format('woff2'),
    url('fonts/av.woff') format('woff'),
    url('fonts/av.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AvenirN';
    src: local('Avenir Next Bold'), local('AvenirNext-Bold'),
    url('fonts/avb.woff2') format('woff2'),
    url('fonts/avb.woff') format('woff'),
    url('fonts/avb.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}



/* MOB */

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

    #info{
        flex-direction: column;
    }

    #ipic{
        height: 20vh;
        width: 100vw;
    }

    #ibox{
        width: 100vw;
    }

    #sec1{

    }

    #sec4{
        flex-direction: column;
        height: unset;
    }

    .card{
        margin: 5vw;
        height: 80vw;
        width: 80vw;
        border-radius: calc(var(--round) * 3);
        background: white;
        overflow: hidden;
        transition: .7s;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ccpic{
        width: 80vw;
        height: 40vw;
        top: 0;
    }

    .cctitle{
        font-size: 5vw;
        top: 40vw;
    }




    .ttc{
        bottom: 14vw;
        width: 80vw;
    }

    .inc{
        width: 70vw;
        font-size: 2.5vw;
        margin-bottom: 1.2vw;
    }

    #itour{
        top: 20vh;
        width: 100vw;
        height: 21vw;
        font-size: 6vw;
        color: rgba(var(--cc-r-main),1);
        background: linear-gradient(180deg, rgba(var(--cc-r-accent),.99) 0%, rgba(var(--cc-r-accent),.95) 80%, rgba(var(--cc-r-accent),0) 100%);
        text-shadow: 0px 2px 1px rgba(0,0,0,0.1),  0px 4px 6px rgba(0,0,0,0.05), 0px 9px 11px rgba(0,0,0,0.05);

    }

    #itourtxt{
        font-size: 4vw;
        margin-bottom: 7vw;
        margin-top: 16vw;
        padding: 0 3vw;
        text-align: justify;
    }

    #infox{
        top: 2vw;
        right: 2vw;
        width: 7vw;
        height: 7vw;
        opacity: .7;
    }



    .laxtxt{
        position: absolute;
        top: 16vw;
        width: 95vw;
        color: #000000;
        font-size: 2vw;
        font-weight: bold;
        /*justify-content: center;*/
    }

    #laxtxta{
        font-size: 4.5vw;
        opacity: .7;
    }

    #laxtxtb{
        color: #FFFFFF;
        padding-top: 9vw;
        font-size: 4.5vw;
        opacity: 1;
        text-shadow: rgb(0, 0, 0) 2px 0px 0px, rgb(0, 0, 0) 1.75517px 0.958851px 0px, rgb(0, 0, 0) 1.0806px 1.68294px 0px, rgb(0, 0, 0) 0.141474px 1.99499px 0px, rgb(0, 0, 0) -0.832294px 1.81859px 0px, rgb(0, 0, 0) -1.60229px 1.19694px 0px, rgb(0, 0, 0) -1.97998px 0.28224px 0px, rgb(0, 0, 0) -1.87291px -0.701566px 0px, rgb(0, 0, 0) -1.30729px -1.5136px 0px, rgb(0, 0, 0) -0.421592px -1.95506px 0px, rgb(0, 0, 0) 0.567324px -1.91785px 0px, rgb(0, 0, 0) 1.41734px -1.41108px 0px, rgb(0, 0, 0) 1.92034px -0.558831px 0px;
    }

    #laxtxtc{
        top: 1.2vw;
        opacity: .7;
        font-size: 5.5vw;
        padding-top: 2vw;
    }

    #laxtxtd{
        bottom: 1vw;
        opacity: .7;
        font-size: 7vw;
        margin-bottom: 3vw;
    }

    #title{
        top: 30vw;
    }

    #txt{
        width: 100vw;
        padding: 3vw;
        top: 40vh;
        font-size: 5vw;
        text-align: justify;
    }

    .xp{
        bottom: 7vh;
        height: unset;
        width: 70vw;
        font-size: 5vw;
        text-shadow: rgb(0, 0, 0) 2px 0px 0px, rgb(0, 0, 0) 1.75517px 0.958851px 0px, rgb(0, 0, 0) 1.0806px 1.68294px 0px, rgb(0, 0, 0) 0.141474px 1.99499px 0px, rgb(0, 0, 0) -0.832294px 1.81859px 0px, rgb(0, 0, 0) -1.60229px 1.19694px 0px, rgb(0, 0, 0) -1.97998px 0.28224px 0px, rgb(0, 0, 0) -1.87291px -0.701566px 0px, rgb(0, 0, 0) -1.30729px -1.5136px 0px, rgb(0, 0, 0) -0.421592px -1.95506px 0px, rgb(0, 0, 0) 0.567324px -1.91785px 0px, rgb(0, 0, 0) 1.41734px -1.41108px 0px, rgb(0, 0, 0) 1.92034px -0.558831px 0px;
    }

    #menu{
        cursor: pointer;
        top: -75px;
        width: 100vw;
        height: 50px;
    }

    #mpic{
        height: 40px;
        width: 40px;
        margin-left: 0;
        margin-right: 7px;
    }


    #mitems{
        top: 0;
        width: 100vw;
        height: 50px;
        padding: 0 2vw;
    }

    .mitem{
        opacity: .7;
        font-size: 2.7vw;
        margin: 0 2vw;
    }

    .mcta{
        right: 1vw;
        opacity: .9;
    }

    .mlang{
        display: none;
    }





    #footer{
        position: relative;
        height: 200vw;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #underfoot{
        position: relative;
        height: 5vh;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .uf{
        font-size: 1.6vh;
        font-weight: normal;
        opacity: .3;
        position: absolute;

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    #clc{
        object-fit: contain;
        object-position: center center;
        height: 2.1vh;
        margin-left: 1vh;
        margin-right: .5vh;
        transition: .3s;
        transform: scale(1.6);
        filter: none;
    }

    #ufl{
        left: 3vw;
    }

    #ufr{
        right: 3vw;
        cursor: pointer;
        transition: .3s;
    }


    #clist{
        width: 100vw;
        height: 70vw;
        position: absolute;
        left: unset;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #messagebox{
        position: absolute;
        top: unset;
        bottom: 20vw;
        left: 0;
        right: unset;
        width: 100vw;
        height: 90vw;
        padding: 3vw;
        display: flex;
        flex-direction: column;
    }


    input, textarea{
        border-radius: .3vw;
        font-size: 4vw;
        width: 100%;
        padding: .5vw 1vw;
        margin: .2vw 0;
    }

    #mtxt{
        height: 100%;
        resize: none;
    }

    #myou{

    }

    #ema{
        transform: none;
        font-size: 7.3vw;
        font-weight: bold;
        cursor: pointer;
        transition: .7s;
        opacity: .7;
    }

    #con{
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 47vw;
    }

    #fsoc{
        z-index: 300;
        position: absolute;
        display: flex;
        flex-direction: row;
        width: 100vw;
        bottom: 0;
        align-items: center;
        justify-content: center;
        padding: 3vw;
        right: 0;
    }

    .svs{
        cursor: pointer;
        height: 12vw;
        width: 12vw;
        opacity: .7;
        stroke: none;
        transition: .3s;
        display: flex;
        flex-direction: row;
        z-index: 99999999999999;
    }

    .coni{
        font-size: 5.5vw;
        font-weight: bold;
        cursor: pointer;
        transition: .7s;
        opacity: .7;
        text-align: center;
    }

    .conless{
        opacity: .7;
        font-weight: normal;
        font-size: 8vw;
    }

    .telo{
        font-size: 4vw;
        padding: .5vw;
        padding-bottom: 1.2vw;
        transition: .3s;
        margin-top: 10vw;
        width: 94vw;
        border-radius: .7vw;
        color: rgba(0,0,0,.7);
        box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 4px, rgba(0, 0, 0, 0.5) 0px 7px 13px -3px, rgba(0, 0, 0, 0.5) 0px -3px 0px inset;
    }

    .telo:before{
        content: attr(data-tip);
        position: absolute;
        text-align: center;
        white-space: nowrap;
        color: #ffffff;
        top: -5vw;
        font-size: 3vw;
        font-weight: bold;
        padding-right: 0;
        width: 94vw;
    }

    /*#tete{*/
    /*    margin-left: 1vw;*/
    /*}*/

    #ques{
        font-size: 3.2vw;
    }

    #ques2{
        font-size: 9.3vw;
        margin-top: 2vw;
    }




    .talk{
        font-weight: normal;
        font-size: 11vw;
        opacity: .9;
        position: absolute;
        top: 4vw;
        left: 4vw;
    }

    #tmsmall{
        font-size: 4.3vw;
        opacity: .5;
        font-weight: normal;
    }

    .buba{
        position: absolute;
        top: 20vw;
        right: 0;
        opacity: .7;
        width: 12vw;
        height: 12vw;
    }

    #tmain{
        color: white;
        font-weight: bold;
        font-size: 4.3vw;
        width: 90vw;
        text-align: center;
        opacity: .9;
    }

    #tsub{
        margin-top: 4vh;
        color: black;
        font-weight: bold;
        font-size: 3.4vw;
        width: 60vw;
        text-align: center;
        opacity: .7;
    }

    #inotes{
        margin-top: 16vw;
        margin-bottom: 15vw;
    }

    .in{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 12vw;
        width: 90vw;
        font-size: 3.5vw;
        background: rgba(var(--cc-r-offwhite),.3);
        padding: 1vw 7vw;
        margin-bottom: 1.2vw;
    }

    .ino{
        color: white;
        background: rgba(var(--cc-r-offblack),.3);;
    }

    .inc{
        font-size: 2.8vw;
    }

    #itime{
        width: 90vw;
    }

    .it{
        width: 90vw;
        height: 16vw;
        font-size: 3.4vw;
        padding-top: 1.8vw;
        padding-left: 16vw;
    }

    .it:before{
        width: 14vw;
        height: 7vw;
    }

    .it:after{
        top: 1vw;
        left: 7vw;
        height: 17vw;
        width: 3px;
    }

    .it:last-child{
        height: 7vw;
    }

    #overpay{
        height: 100vh;
        width: 100vw;
        top: calc(100vh - 30vw);
    }

    #opgap{
        top: 0;
        height: calc(20vh + 25vw);

        width: 100vw;
        background: transparent;
        pointer-events: none;
        /*border: solid 1px deepskyblue;*/
    }

    #opbox{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100vw;
        height: calc(100vh);
        background: var(--cc-h-main);
        /*box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;*/
        box-shadow: rgba(0, 0, 0, .7) 0 25px 75px 7px;
    }

    #qrlogo{
        z-index: 99999999999999999;
        left: unset;
        top: 2vw;
        right: 2vw;
        height: 16vw;
        width: 16vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        /*border-radius: var(--round);*/
        /*overflow: hidden;*/
    }

    #qrl2{
        height: 100%;
        width: 100%;
        object-fit: contain;
        object-position: center center;
    }

    #pp{
        display: none;
    }

    .uf{
        font-size: 3vw;
        opacity: .5;
    }


    .ccbuy{
        bottom: 3vw;
        width: 46vw;
        padding: 1vw;
        font-size: 4.2vw;
        min-height: 10vw;
        /*border: solid 1px deeppink;*/
        z-index: 999999999999;
    }

    .card>.ccbuy{
        width: 72vw;
    }

    .ccbuy:after{
        width: 7vw;
        right: 2vw;
        font-size: 2vw;
    }

    .ccbuy:before{
        width: 7vw;
        left: 2vw;
        font-size: 1.8vw;
    }

    #pper{
        display: none;
    }

    #optop{
        background: var(--cc-h-main);
        height: 12vw;
        top: 18vw;

        padding-left: 3vw;

        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    #ppl{
        font-size: 3.5vw;
        width: 25vw;
        right: unset;
    }

    .svb{
        height: 5vw;
        width: 5vw;
        stroke-width: 2px;
    }

    .poption{
        cursor: pointer;
        position: absolute;
        top: 0;
        width: 100%;
        min-height: 10vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        /*border: solid 1px deeppink;*/
    }

    .optit{
        position: absolute;
        left: 10vw;
        text-align: left;
        font-size: 3.5vw;
        width: 50vw;
    }

    .poption>.ccbuy{
        position: absolute;
        right: 2vw;
        left: unset;
        width: 42vw;
    }

    .poption>.ccbuy:after{
        width:9vw;
    }

    .poption>.svb{
        position: absolute;
        right: unset;
        left: 12vw;

        /*border: solid 1px salmon;*/
    }

    [data-op="off"]{
        opacity: .5;
    }

    #tdate{
        position: absolute;
        bottom: unset;
        top: 52.5vw;
        width: 96vw;
        height: 7vw;
        font-size: 4vw;
        text-align: left;
        border-radius: 0;
    }


    #op1{
        top: 3vw;
    }

    #op2{
        top: 12vw;
    }

    #op3{
        top: 12vw;
        padding: 2vw;
        flex-direction: column;
    }

    #op4{
        top: 35.5vw;
        padding: 2vw;
        flex-direction: column;
    }

    .poption>input{
        padding: .5vw 1vw;
        font-size: 4vw;
        margin: 1vw;
    }

    .poption>input::placeholder{
        color: white;
        opacity: .3;
    }

    .poption>input:first-child, .poption>input:last-child{
        margin: 0;
    }

    #ppar{

        position: absolute;
        bottom: 29vw;
        color: rgba(var(--cc-r-offblack),1);
        font-size: 2vw;
        /*display: flex;*/
        align-items: center;
        justify-content: center;
        opacity: .9;
    }

    #ppar:after{
        content: attr(data-xt);
        position: absolute;
        bottom: -2.5vw;
        color: rgba(var(--cc-r-offwhite),.8);
        font-size: 2vw;
        opacity: .7;
        font-weight: bold;
    }

    #ppar>img{
        position: absolute;
        top: -5vw;
        width: 4vw;
        height: 4vw;
        object-position: center center;
        object-fit: contain;
        opacity: .7;
    }

    #ei{
        stroke-width: 2px;
        width: 5vw;
        height: 5vw;
        margin-right: 1vw;
        position: absolute;
        top: 2vw;
    }

    #opbot{
        top: calc(25vw);
        width: 100%;
        height: calc(100vh - 20vh - 25vw);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background: var(--cc-h-main);
        pointer-events: all;
    }

    .ipt{
        top: 1vw;
        font-size: 5vw;
    }

    .ipp{
        top: 6vw;
        opacity: .7;
        font-size: 4vw;
    }

    .ipb{
        bottom: 2vw;
        font-size: 3vw;
    }



    .nom{
        display: none;
    }

    .omo{
        display: flex;
    }

    #pinfo{
        font-size: 3vw;
        color: rgba(255,255,255,.7);
        right: 3vw;
    }

    #datebox{
        bottom: 30vw;
    }

    #ctacustom{
        color: #ffffff;
        font-size: 6vw;
        padding: 10vw;
        top: 150vh;
    }

    #error{
        bottom: unset;
        top: 61vw;
        width: 96vw;
        height: 20vw;
        font-size: 3vw;
        border-radius: var(--round);
        background: rgba(254,252,242,.9);
    }


    .infonotes{
        width: 96vw;
        height: 20vw;
        position: absolute;
        bottom: unset;
        top: 61vw;
        right: unset;
        left: 2vw;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background: rgba(0,0,0,.12);
        border: solid 1px rgba(255,255,255,.3);
    }

    .infonotes:before{
        width: 100%;
        text-align: left;
        content: 'Hotel address or any additional info/notes?';
        text-transform: uppercase;
        color: white;
        opacity: .4;
        font-size: 3vw;
        position: absolute;
        top: .5vw;
        left: 1vw;
    }

    #notesbox{
        display: flex;
        left: 2vw;
        right: unset;
    }

    #notestxt{
        width: 95vw;
        height: 20vw;
        /*padding: 1vw;*/
        font-size: 4vw;
        resize: none;
        background: transparent;
        border: none;
        padding-top: 6vw;
    }

    .infopay{
        width: 96vw;
        height: 30vw;
        position: absolute;
        bottom: 3vw;
        right: 2vw;
    }

    #ptotalupfront{
        position: absolute;
        right: unset;
        bottom: 11vw;
        margin: 0;
        height: 3vw;
    }


}