@import url(assets/fonts/fonts.css);

*{
	outline: none !important;
}

strong{
    font-weight: 400;
}

body{
	color: #fff;
	overflow: hidden;
	font-family: 'Gotham';
	font-weight: 200;
}

h1,h2,h3,h4,h5,h6{
	font-family: 'Mercury';
	font-weight: normal;
}

p{
    font-size: 3.8vw;
    font-family: 'Gotham Regular';
    font-weight: 100;
    line-height: 16px;
}

.flowhidden{
overflow: hidden;
}




#first-slider{
    width:100%;
    z-index: 5;

}

.red{
	width:100vw;
	height: 100vh;
	background: black;
	color: #fff;
	text-align: center;
	vertical-align: middle;
	font-size: 40px;
}

#layer-below{
	position: absolute;
	overflow-x: hidden;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	width:100vw;
	height: 100vh;
	overflow-y: scroll;

}

#layer-above{
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	width:100vw;
	height: 101vh;
	overflow-x: hidden;
	overflow-y: hidden;
}

#layer-above.scroll{
    overflow-y: auto;
}


.slice-angle {
    content: "";
    position: absolute;
    transform: rotate(-9.5deg);
    transform-origin: 0% 100% 0px;
    display: block;
    background: #0F1727;
}
		
div#slice1 {
    left: 0;
    top: 0;
    width: 115vw;
    height: 52vh;
}

div#slice2 {
    left: 0;
    top: 51vh;
    width: 128vw;
    height: 150vw;
}

 
div#slice3{
    left: 0;
    top: 161vh;
    width: 125vw;
    height: 72vw;
}

div#slice4{
    width: 115vw;
    height: 60vw;
    top: 260vh;
    left: 0vw;
}

div#slice5 {
    width: 206vw;
    height: 52vh;
    bottom: -370vh;
    left: 0;
    position: absolute;
    content: "";
    display: block;
    background: #0f1727;
}



#first-scroll-content{
	width: 100%;
    height: 100vh;
    overflow: hidden;
    
}


.red.bg1{
	background-image: url(assets/img/slides/01.jpeg);
}

.red.bg2{
	background-image: url(assets/img/slides/02.jpeg);
}

.red.bg3{
	background-image: url(assets/img/slides/03.jpeg);
}

.red.bg4{
	background-image: url(assets/img/slides/04.jpeg);
}

.bgcenter{
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}


#logo{
	position: absolute;
    z-index: 2;
    top: 50vh;
    left: 50vw;
    margin-left: -27.75vw;
    margin-top: -25vw;
    width: 55.5vw;
    opacity: 0;
}

#logo > img {
	width: 100%;

}


#tagline {
    position: absolute;
    z-index: 2;
    top: 50vh;
    margin-top: 14vw;
    left: 50vw;
    margin-left: -32.3vw;
    font-weight: 300;
}

#tagline > h3 {
	font-weight: 300;
	margin-top:-5vw;
	font-family: 'Gotham';
    font-size: 4vw;
}

#cities{
    position: absolute;
    z-index: 2;
    top: 50vh;
    left: 50vw;
    width: 89vw;
    margin-left: -45vw;
    margin-top: 22vw;
}

.city{
	margin:0;
	margin-top:-5vw;
	font-family: 'Gotham';
	font-size: 22px;
    text-transform: uppercase;
    color: #C89316;
    font-weight: 300;
}

.city > img {
     width:100%;
}

#club{
    position: absolute;
    right: 14vw;
    z-index: 2;
    top: 80vh;
    width: 75vw;
    opacity: 0;
    margin-right: -30px;
}

#club, #who-we-are, #who-you-like, #footer{
	color: rgba(255, 255, 255, 0.72);
}

@media screen and (min-width: 320px) {
    
}

#club h1, #who-we-are h1, #who-you-like h1{
	margin-bottom: 0;
	font-size: 46px;
	margin-top: 0;
}

#footer h1{
    font-size: 33px;
    font-family: 'Gotham';
    font-weight: 400;
}

#app-logos img {
    width: 40%;
}

#club > h1,   #who-you-like h1, #who-we-are h1 {
	font-family: 'Mercury';
}

#club p,   #who-you-like p, #who-we-are p {
	margin-bottom: 0;
    text-align: center;
    font-size: 3.5vw;
    line-height: 4vw;
}

#svgslice{
	position: absolute;
	top: 114.12vw;
	width:100vw;

}

#svgslice > img {
	width: 100%;
	margin-bottom: -4px;
}

#second-slider{
    width: 100vw;
    position: absolute;
    right: 0;
    z-index: -1;
    margin-top: 0;
    top: 74vh;
}

#second-slider .red{
	
	height: 117vh;
}

#third-slider{
    position: absolute;
    z-index: 1;
    top: 158vh;
    width: 100vw;
}

#third-slider .red{
	height: 124vh;
}


#contact-form-bg {
    width: 100%;
    height: 155vh;
    background: #fff;
    position: absolute;
    top: 270.5vh;
    left: 0;
    z-index: -1;
    background-image: url(assets/img/pattern/gold2.png);
    background-size: 5%;
}

#contact-form{
    position: absolute;
    width: 80vw;
    top: 389.2vh;
    left: 43.45vw;
    margin-left: -35vw;
    z-index: -1;
    text-align: center;
}

#page-content input, #page-content textarea, #popup input, #popup  textarea, #page-content select{
    width: 96%;
    height: 31px;
    margin-bottom: 10px;
    padding-left: 6px;
    border: solid 1px #cecece;
    background: rgba(255, 255, 255, 0.6);
}

#page-content textarea, #popup  textarea{
	height: 80px;

}

#popup > h4 {
	color: #0f1727;
    font-family: 'Gotham';
    margin: 0;
    margin-bottom: 15px;
    margin-top: 10px;
}

#popup > h1{
	font-family: 'Mercury';
    color: #0f1727;
    font-size: 33px;
    margin: 0;
}

#background-pattern-one.active {
    width: 78vw;
    height: 22vw;
    position: relative;
    top: -68%;
    left: 23%;
    transform-origin: 0 100%;
    transform: rotate(45deg);
    background-image: url(assets/img/pattern/blue.png);
    background-size: 8%;
}

#background-pattern-two {
    width: 78vw;
    height: 19vw;
    position: relative;
    margin: 0;
    top: 40vw;
    left: 12%;
    transform-origin: 0 0;
    transform: rotate(-45deg);
    background-image: url(assets/img/pattern/blue.png);
    background-size: 8%;
}


div#who-we-are{
	
    position: absolute;
    top: 164vh;
    width: 80vw;
    left: 50vw;
    margin-left: -40vw;
    opacity: 1;
}



.slick-dots li button:before{
	font-size: 35px;
	color: #fff;
}

.slick-dots li.slick-active button:before{
	color: #fff;
}


div#who-you-like {
    position: absolute;
    top: 202vh;
    width: 80vw;
    left: 50vw;
    margin-left: -40vw;
    opacity: 1;
    z-index: 1;
}

.slick-dots{
	text-align:center;
}
.slick-dots > li:nth-child(1){
	margin-left: -4px;
}


#footer{
    position: absolute;
    top: 420vh;
    left: 50vw;
    width: 26vw;
    margin-left: -13vw;
}

#footer-links {
    width: 74vw;
    position: absolute;
    top: 443vh;
    left: 50vw;
    text-align: center;
    margin-left: -37vw;
    padding-bottom: 40px;
}

div#footer-links ul{
	padding: 0;
	margin-bottom: 9px;
}

div#footer-links li > a {
    color: #fff;
    text-decoration: none;
    font-size: 2.95vw;
    text-transform: uppercase;
}

div#footer-links li {
    list-style: none;
    display: inline-block;
    margin-right: 7px;
    margin-left: 3px;
    margin-bottom: 2px;
    font-family: 'Gotham Regular';
}


#copyright{
    font-size: 2.4vw;
    font-weight: 300;
    font-family: 'Gotham';
    margin:0;
}

#page-content button, #popup button{
	background: #fff;
    transition: 0.3s;
    color: #BE973C;
    border: #BE973C solid 1px;
    padding: 8px 17px;
    text-transform: uppercase;
    font-weight: 400;
    cursor: pointer;
    font-family: 'Gotham';
}


#app-section > img{
    width: 100%;
}



/*concierge icons*/


#bell-icon1{
    position: absolute;
    top: 39%;
    left: 37%;
}

#bell-icon2{
    position: absolute;
    top: 29%;
    left: 48%;
}

#bell-icon3{
    position: absolute;
    top: 29%;
    left: 71%;
}

#bell-icon4{
    position: absolute;
    top: 39%;
    left: 78.5%;
}

#mock-phone{
    position: absolute;
    top: 310vh;
    left: 45vw;
    width: 74vw;
    z-index: 2;
    margin-left: -33vw;

}

#become-partner{
    margin: 16px; 
    margin-top: 3vw;
    margin-bottom: 3vw;
}

#become-partner > a {
    background: #C0860B;
    color: #fff;
    text-decoration: none;
    padding: 10px;
    font-family: 'Gotham Regular';
    font-weight: bold;
    font-size: 3vw;
    display: inline-block;
    margin-bottom: 1.5vh;

}


/*Pop Up Styles*/



#popup-container{
    position: absolute;
    width: 100vw;
    height: 100vw;
    background: rgba(0, 0, 0, 0.89);
    z-index: 1;
    margin: 0;
    top: 0;
    left: 0;
}

#popup{
    width: 800px;
    height: 80vh;
    position: absolute;
    top: 50vh;
    background: #fff;
    left: 50%;
    margin-left: -400px;
    margin-top: -131vh;
    border-radius: 5px;
    color: #000;
    box-sizing: border-box;
    padding: 0 24px;
}

#popup  * {
    font-family: 'Gotham Regular';
    color: #040404;
}


.row:after, .row:before {
    
    display: block;
    content:"";
    float: none;
    clear:both;
}

.col6{
    width:50%;
    float: left;
    box-sizing: border-box;
    padding: 0 14px;
}

#popup p {
    font-weight: 300;
    font-size: 13px;
    margin-top: 4px;
}

#popup h4{
    margin-bottom: 0;
    font-weight: bold;
}


#popup input:focus, #popup  textarea:focus{
    border: solid 1px #b46f2e;
}

#popup button:hover{
    background: #BE973C;
    color: #fff;
}

#popup-close > h2 {
    font-family: monospace;
}


#popup-close {
    position: absolute;
    top: 12px;
    right: 20px;
}


#popup-close > h2{
    margin: 0;
    color: #b5b5b5;
    cursor: pointer;
}

#popup-content-holder{
    height: 100%;
}

#popup-close > h2:hover{
    color: #2f2f2f;
}

.popup-scroll{
        height: 78%;
    overflow-y: scroll;
}


#popup ul{
        padding-left: 4px;
    font-weight: 300;
    text-align: left;
    font-size: 14px;
}

#popup ul > li{
    margin: 8px 0;
    line-height: 18px;
    font-size: 13px;
    list-style:none;
}


#contact-form {
    color:#000;
}

#contact-form > h4{

    font-family: 'Gotham Regular';
}


#city-flipper{
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    margin-top: 14.4vh;
    margin-left: 5.7vh;
    overflow: hidden;
}

#city-flipper h5{
    font-size: 3.2vw;
    color: #C0860B;
    margin-top:0;
    opacity:0;
}

#city-flipper span{
        font-family: 'Gotham Regular';
    font-weight: normal;
}

.rotating{
    /*display: flex;*/
    width: 200px !important;
}


#third-slider-content h2{
    text-align: center;
    font-size: 6vw;
    color: #fff;
}

#mock-phone h1{
    color: #0f1727;
    font-size: 6vw;
    text-align: center;
}


div#slice5:after {
    content: "";
    display: block;
    width: 100%;
    height: 14vh;
    position: relative;
    background: #0f1727;
    bottom: 0vh;
    transform: rotate(-9.5deg);
    transform-origin: 0% 100% 0px;
}


.first-scroll-slider{
-webkit-clip-path: polygon(0 11.5%, 100% 0, 100% 90.5%, 0 100%);
clip-path: polygon(0 11.5%, 100% 0, 100% 90.5%, 0 100%);
}


#menu-btn-container{
    position: absolute;
    top: 4.27vw;
    right: 2vw;
    z-index: 6;
    opacity: 1;
}

#menu-btn-container.home{
     opacity: 0;
}


 
.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before{
    background-color: #d2d2d2;
}

#menu-container{
    width: 50vw;
    height: 50vw;
    background: rgba(15, 23, 39, 0);
    z-index: 5;
    position: absolute;
    margin: 0;
    padding: 0;
    top: -28vw;
    right: -31vw;
    border-radius: 59%;
    transition-timing-function: ease-in-out;
    transition-duration: .35s;
    transition-property: all;

}

#menu-container.active{
    width: 250vw;
    height: 250vw;
    right: -45vw;
    position: fixed;
    background: rgba(15, 23, 39, 0.83);
}

.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
     width: 35px;
    height: 2px;
   
}

.hamburger{
    padding: 0;
}


#overlay-menu li {
    list-style: none;
    text-align: center;
    padding: 4vh;
    margin: -2vh 0;
    font-size: 7vw;
    opacity:0;
    transition-timing-function: ease-in-out;
    transition-duration: .35s;
    transition-property: all;
    /*transition-delay: .4s;*/
}

#overlay-menu li.active{
    margin: 1vh 0;
    opacity: 1;
}

#overlay-menu li:hover{
    background: rgba(144, 167, 212, 0.06);
}

#overlay-menu{
        position: fixed;
    z-index: 5;
    display: none;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    top: 0
}

#overlay-menu ul{
    padding: 0;
    width: 100%;
}


#overlay-menu.active{
    display: flex;
}

body{
    margin:0;
    overflow-y:auto;
}

body.scroll{
    overflow-y: hidden;
}

#header{
    content: "";
    position: absolute;
    transform: rotate(-9.5deg);
    transform-origin: 0% 100% 0px;
    display: block;
    background: #0F1727;
    left: 0;
    top: 0;
    width: 115vw;
    height: 25vh;
}

#page-logo{
    width: 17.4vh;
    visibility: inherit;
    opacity: 1;
    margin-top: 2.3vh;
    margin-left: 6.25vw;
    top: 0vh;
    left: 0vw;
    position: absolute;
    z-index: 2;
}

#page-content{
    color: #0f1727;
    padding: 0 7vw;
    padding-top: 26vh;
    padding-bottom: 15vh;
    background-image: url(assets/img/pattern/gold2.png);
    background-size: 7%;

}


#main-body #footer{
    position: static;
    background: #0F1727;
    width:100vw;
    margin:0;
    padding-bottom: 5vh;
}

#main-body #footer:before{
    content: "";
    display: block;
    width: 107vw;
    height: 20vw;
    background: #0f1727;
    transform: rotate(-9.5deg);
    transform-origin: 0% 100% 0px;
}

#generic-page #footer-links {
    position: static;
    margin:0;
    width: auto;
}

#generic-page #app-section{
    text-align: center;
    width: 80%;
    margin: 0 auto;
    margin-top: -7vw;
}

#app-section > div > img{
    width:31%;
}

#page-content ul > li{
    font-family: 'Gotham Regular';
    font-size: 3.8vw;
    list-style:none;
    margin-bottom: 3vw;
}

#page-content ul{
    padding-left: 5vw;
}

#overlay-menu a{
    text-decoration: none;
    color: #fff;
}

ol{
    padding-left: 6vw;
}

.col12{
    width:100%;
}

#landscape{
    display: none;
    justify-content: center;
    align-items: center;
}

#landscape > div{
    width:60vw;
    justify-content: center;
    align-items: center;
    display: flex;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Gotham Regular';

}

@media screen and (orientation: landscape) and (max-width: 799px)  {
    
    #landscape{
        width:100vw;
        height: 100vh;
        background: #0F1727;
        z-index: 9999;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        content:"";
        display: flex;
    }

}

.ui-loader{
    display: none;
}


#layer-above.scroll {
    overflow-y: auto;
    /*touch-action: none;*/
    touch-action: pan-y;
}

div#club-heading {
    position: absolute;
    left: 50vw;
    z-index: 2;
    top: 36vh;
    width: 75vw;
    margin-left: -37.5vw;
    opacity: 0;
}

div#second-slider-heading {
    position: absolute;
    left: 50vw;
    z-index: 1;
    top: 106vh;
    width: 75vw;
    margin-left: -37.5vw;
    opacity: 1;
    text-align: center;
}

div#third-slider-heading {
    position: absolute;
    top: 263vh;
    z-index: 1;
    width: 75vw;
    margin-left: -35.5vw;
    left: 50vw;
    opacity: 1;
    text-align: center;
}

div#layer-below:before {
    width: 100%;
    height: 400vh;
    background: rgba(0, 0, 0, 0.5);
    content: "";
    display: block;
    opacity: 1;
    z-index: 6;
    position: absolute;
}

.slick-slider h3 {
    font-size: 8.6vw;
    text-align: center;
}

.slick-slider h1{
    font-size: 8.6vw;
    margin-bottom: 1px;
}

#second-slider-heading  h3{
    font-size: 5vw;
    margin-top: 1px;
}

#third-slider-heading  h1{
    font-size: 8vw;
}


html.iosmobilscrollfix, html.iosmobilscrollfix body{
    overflow-x: hidden !important;
    touch-action: pan-y !important;
    max-width:100vw;
    position: relative;
}

#first-slider .bgcenter{
    background-position-y:-29%;
}

.help-block, .help-block.form-error{
    display: block;
    margin-top: 11px;
    color: #af0909 !important;
}

label.form-checkbox{
    font-size: 1vw;
}

#generic-page.fixed{
    position: fixed;
}

html, body, #layer-above.scroll{
    -webkit-overflow-scrolling: touch;
    position: relative;
}

@media screen and (min-width: 600px){

    div#who-you-like{
        top: 210vh;
    }

    div#second-slider-heading{
        top: 114vh;
    }

}

.bgpushdown3{
    background-position-y:3vh;
}