@charset "UTF-8";
/* CSS Document */

h2 {
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  color: #0d1d32;
  letter-spacing: 1px;
  line-height: 1.25;
  font-size: 16px;
  text-align: right;
    text-transform: uppercase;
}

h3 {
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  color: #0d1d32;
  letter-spacing: 2px;
  line-height: 2.0;
  font-size: 18px;
  text-align: center;
}

h4 {
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  color: #e7d0a4;
  letter-spacing: 2px;
  line-height: 1.25;
  font-size: 16px;
  text-align: left;
}

h5 {
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  color: #e7d0a4;
  letter-spacing: 1px;
  line-height: 1.25;
  font-size: 40px;
  text-align: left;
  padding-bottom: 50px;
  text-transform: uppercase;
}

#splash_header {
	min-height: 100vh;
	position: relative;
}

.header_content {
	position: absolute;
	top: 55%;
	left: 50%;
	transform: translate(-50%,-50%);
	padding: 175px 100px;
    width: 85%;
}

#navbar {
  position: fixed;
  top: 0px;
  width: 100%;
  display: block;
  z-index: 2;
  overflow: hidden;
      	-webkit-transition: all 0.75s;
		-o-transition: all 0.75s;
		transition: all 0.75s; 
}

.tennis {
	background: url(../template_images/aurthur_ashe.jpg);
	background-size: cover;
	background-position: bottom center;
}

.derby {
	background: url(../template_images/kentuckyderby.jpg);
	background-size: cover;
	    background-position: 42% center !important
}

.vip {
	background: url(../template_images/redcarpet.jpg);
	background-size: cover;
	background-position:  68% center;
}

.stadium {
	background: url(../template_images/stadium.jpg);
	background-size: cover;
	background-position: bottom right;
}

.concert_phone {
	background: url(../template_images/concert_phone.jpg);
	background-size: cover;
	background-position: center center;
}

.broadway {
	background: url(../template_images/broadway.jpg);
	background-size: cover;
	background-position: 15% 0%
}

.race {
	background: url(../template_images/race.jpg);
	background-size: cover;
	background-position: 50% bottom;
}

.scroller {
	width: 3px;
	border-radius: 2px 2px 0px 0px;
	position: absolute;
	bottom: 0;
	left: 50%;
    opacity: 1.0;
	transform: translate(-50%,0px);
	height: 80px;
	background: rgba(255,255,255,0.75);
    animation: scrollDown4 3s ease infinite;
    -webkit-transition: opacity 0.75s;
		-o-transition: opacity 0.75s;
		transition: opacity 0.75s; 
}

@keyframes scrollDown4{
    0%{
        transform-origin: top;
        transform: scaleY(0);
    }
    45%{
        transform-origin: top;
        transform: scaleY(1);
    }
    55%{
        transform-origin: bottom;
        transform: scaleY(1);
    }
    100%{
        transform-origin: bottom;
        transform: scaleY(0);
    }
}

.hidden {
    opacity: 0.0!important;
}

.inside_content {
    min-height: 75vh;
    padding: 7.5vh 10%;
    position:  relative;
    display: flex;
    flex-wrap: wrap;
}

.inside_content_holder {
    width: 90%;
    max-width: 1500px;
    margin: 0 auto;
}

.inside_content_holder_left {
    width: calc(1500px * .55);
    margin-left: 45%;
}

.inside_content_holder_right {
    margin-right: 45%;
}

.left_image_holder {
    width: 40%;
    overflow: hidden;
    opacity: 0.15;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}

.right_image_holder {
    width: 40%;
    overflow: hidden;
    opacity: 0.15;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
}

.page_callout_holder {
    width: 90%;
    padding: 3.5vh 5%;
    border-radius: 4px;
}

.page_callout_holder h4 {text-align: center;}

.page_callout {
    padding-bottom: 25px;
    padding-top: 25px;
    position: relative;
}

.page_callout h1 {
    display: block;
    padding-bottom: 10px;
}

.page_callout h4 {
    display: block;
    padding-bottom: 10px;
    padding-top: 10px;
    position: relative;
}

.page_callout:after, .page_callout h4:before {
    content: "";
    position: absolute;
    height: 1px;
    width: 30%;
    background: #e6cfa2;
    left: 35%;
}

.page_callout h4:before {
    top: 0px
}

.membership_form {
    width: 100%;
}

.section_title {
    margin-bottom: 40px;
}

.section_title h1 {
    text-align: center;
    font-size: 40px;
    letter-spacing: 16px;
}

.section_title h4 {
    font-weight: 400;
    letter-spacing: 3px;
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
}

.section_title_left h4 {
    font-weight: 400;
    letter-spacing: 3px;
    line-height: 1.25;
    text-align: left;
    text-transform: uppercase;
}

.membership_title {
    color: #0d1d32;
    font-size: 50px;
    letter-spacing: 8px;
    font-family: 'Raleway';
    text-transform: uppercase;
    font-weight: 400;
    width: 100%;
    padding-bottom: 25px;
}

input[type=text], input[type=tel], input[type=email], select, textarea  {
    border: 0px solid #baa170;
    width: 100%;
    padding: 10px;
    border-radius: 3px;
    background: #f2e4d1;
    color: #0d1d32;
    font-size: 16px;
    letter-spacing: 1px;
    font-family: 'Raleway';
}

textarea {
    min-height: 125px;
}

input::placeholder {
    color: #baa170;
    font-size: 16px;
    letter-spacing: 1px;
    font-family: 'Raleway';
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

.form-row {
    padding: 10px 0px;
}

.title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    padding: 5px 5px 0px 5px;
}

.contactMe, .contactMe * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.contactMe h3 {
    font-size: 18px;
    text-align: left;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-family: 'Raleway';
}

.contactMe .border {
    height: 2px;
    width: 100%;
    margin: 5px 0px 10px 0px;
    background: #0d1d32;
}

.contactMe .btn {
    border: 0px;
    width: 100%;
    padding: 10px;
    border-radius: 2px;
    color: #0d1d32;
    font-size: 20px;
    text-align: center;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-family: 'Raleway';
    box-shadow: 2px 4px 15px rgba(0,0,0,0.05);
    margin-top: 25px;
}

.contactMe .btn:hover {
    box-shadow: 2px 9px 15px rgba(0,0,0,0.15);
    	-webkit-transition: all 0.75s;
		-o-transition: all 0.75s;
		transition: all 0.75s; 
}

.contactbtn {
    background: #e6cfa2 !important;
    color: #0d1d32 !important;
}

.left_col, .right_col {
    position: relative;
    padding-top: 7.5vh;
    padding-bottom: 7.5vh;
}

.fourty {
    width: 35%;
    max-width: calc((1500px * .40) - 5%);
    margin-right: 5%;
}

.fifty {
    width: 45%;
    max-width: calc((1500px * .45) - 5%);
    margin: 0px 2.5%;
}

.sixty {
    width: 55%;
    max-width: calc((1500px * .60) - 5%);
    margin-left: 5%;
}

.membership {
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
    padding-right: 25px;
}

#membership_logo, #contact_logo {
    width: 20%;
    margin: 40px 0% 40px 80%;
}

.membership_logo_two {
	stroke: #0d1d32;
  	stroke-width: 15;
  	stroke-linecap: butt;
  	fill: none;
}

.membership_logo_one {
	fill: #0d1d32;
}

.contact_logo_two {
	stroke: #e6cfa2;
  	stroke-width: 15;
  	stroke-linecap: butt;
  	fill: none;
}

.contact_logo_one {
	fill: #e6cfa2;
}


.membership h1 {
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  color: #0d1d32;
  text-transform: uppercase;
  letter-spacing: .25vw;
  line-height: 1.2;
  font-size: 1vw;
  text-align: right;
   display: block;
}

.membership h1 span {
  display: block;
  font-size: 2vw;
  font-weight: 400;
  letter-spacing: .15vw;
}

.contact_info {
    padding: 40px 0px;
}

.contact_info .border {
    height: 2px;
    width: 40%;
    margin: 10px 0px 12px 60%;
    background: #0d1d32;
}

.inside_two_col  {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    justify-content: center;
}

.vip:before  {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 40%;
    background: url(../template_images/redcarpet.jpg);
	background-size: cover;
	background-position:  68% center;
    opacity: 0.15;
}

.bio_holder {
    display: flex;
    flex-wrap: wrap;
    padding: 5vh 0%;
    margin-bottom: 5vh;
}

.bio_pic_holder {
    width: 35%;
    margin-right: 10%;
    position: relative;
    z-index: 1;
}

.bio_pic {
    width: 100%;
    position: relative;
    z-index: 1;
}

.bio_pic img {
    border-radius: 4px;
}

.bio_pic:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 15px;
    left: 20px;
    background: #0d1d32;
    border-radius: 4px;
    z-index: -1;
}

.bio_text {
    width: 55%;
    padding: 0vh 0%;
}

.bio_text h2 {
    text-align: left;
    font-size: 22px;
}

.bio_text title {
    text-align: left;
    font-size: 22px;
}

.bio_text .border{
    height: 2px;
    width: 40%;
    margin: 15px 60% 20px 0%;
    background: #0d1d32;
}

.testimonial_holder {
    padding: 2.5vh 0%;
}
.testimonial {
    width: 90%;
    border-radius: 4px;
    background: rgba(13,29,50,0.90);
    padding: 2vh 5%;
    margin: 1vh auto;
}

.testimonial h4 {
    line-height: 1.75;
}

.testomonial_name {
    display: block;
    text-align: right;
    padding-top: 15px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 2px;
}

.testomonial_city {
    display: block;
    text-align: right;
    padding-top: 0px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 12px;
}

.gallery-cell {
  width: 100%;
}

.flickity-page-dots {
  bottom: 20px !important;
}

.flickity-page-dots .dot {
      background: #e5cd9f !important;
}

.flickity-page-dots .dot.is-selected {
  background: #e5cd9f;
}

.article_holder {
    margin: 25px 0px 25px 25px;
    padding: 15px 0px;
    position: relative;
}

.article_holder::after {
    content: "";
    position: absolute;
    width: 20%;
    height: 100%;
    border-left: 1px solid #e7d0a4;
    border-top: 1px solid #e7d0a4;
    border-bottom: 1px solid #e7d0a4;
    top: 0;
    left: -25px
    
}

.article_logo {
    width: 50%;
    max-width: 200px;
    padding-top: 20px;
}

.article_title {
        padding: 20px 0px;
        font-family: "Raleway", sans-serif;
        font-weight: 400;
        color: #e7d0a4;
        letter-spacing: 2px;
        line-height: 1.25;
        font-size: 18px;
        text-align: left;
}

.article_link {
    padding-bottom: 15px;
}

.contact_holder {
    display: flex;
    flex-wrap: wrap;
    max-width: 1500px;
    margin: 0 auto;
    padding: 10vh 0px;
}

.contact_holder .contact_info h2 {
    color: #e6cfa2;
}

.contact_holder .contact_info .border, .contact_holder .contactMe .border {
    background: #e6cfa2;
}

.contact_holder .cta_btton {
    text-align: right;
    padding: 2.5vh 0px;
}

.contact_holder .membership_title, .contact_holder h3, .contact_holder .title {
    color:  #e6cfa2;
    text-align: left;
}

#tall {
    background-attachment: fixed !important;
}

.msg {color: #ffffff !important;}


@media screen and (max-width: 1600px) {
    .sixty {width: 50%; margin-left: 5%; margin-right: 5%;}
    .header_content { width: calc(100% - 200px);}
     .inside_content_holder_right {margin-left: -10%;}
}

@media screen and (max-width: 1200px) {
    .fourty {width: 37.5%;margin-right: 2.5%;}
    .membership { padding-right: 0px;}
    .contactMe .btn {padding: 15px; font-size: 16px;}
}

@media screen and (max-width: 1024px) {
    .right_image_holder {width: 100%;opacity: 0.075;}
    .inside_content_holder_right {margin: 0 auto; margin-left: inherit;}
    .vip:before { width: 100%;opacity: 0.05;}
    .fourty {width: 100%;}
    .fifty, .sixty {width: 70%; margin-left: 15%;  margin-right: 15%;}
    .inside_two_col, .contact_holder {flex-wrap: wrap-reverse;}
    .left_col {padding-top:  0px!important; margin-right: 0px;}
    .right_col {margin: auto;}
    #membership_logo, #contact_logo {margin: 0px 40% 20px 40%;}
    .membership h1{text-align: center; font-size:  2vw; margin-bottom: 25px;}
    .membership h1 span {font-size:  4vw;}
    .membership h2, .contact_info h2 {text-align:  center;}
    .contact_holder .left_col {margin: 0 auto; padding-bottom: 0px;}
    .contact_info .border, .contact_info .border {margin: 10px 30% 12px 30%;}
    .contact_info {padding: 0px;}
    .contact_holder .cta_btton { text-align: center; padding: 1.5vh 0px 1vh 0px; margin-top:  25px;}
}

@media screen and (max-width: 768px) {    
    .header_content {width: calc(100% - 100px); padding: 125px 50px;}
    .membership_title { font-size: 36px;}
    .bio_holder {padding: 2.5vh 0%;}
    .bio_pic_holder {width: 50%; margin-right: calc(25% - 10px); margin-left: calc(25% - 10px); padding-bottom:  40px;}
    .section_title_left h4 {padding-bottom: 10px;}
    .bio_text {width: 100%;}
}

@media screen and (max-width: 480px) {
    .fifty, .sixty {width: 80%;}
    .bio_text h2 {font-size: 18px;}
    h2 {font-size: 13px;}
    h4 {letter-spacing: 1px;line-height: 1.5; font-size: 14px;}
    .membership_title {font-size: 30px; letter-spacing: 4px;}
    .contactMe h3 {font-size: 16px; line-height: 1.25; text-align: left; letter-spacing: 2px;}
    input[type=text], input[type=tel], input[type=email], select, textarea {font-size: 14px;}
    .contactMe .btn {font-size: 18px;  letter-spacing: 2px;}
}