/* INSTRUCTIONS + KEY
*  | To replace the bold font, find "Circular Std Black" and replace with the relevant font family name.
*  | To replace the normal font, find "Circular Std Book" and replace with the relevant font family name.
*  | To replace the submit background color, find "background:#BE2336!important" and replace none with the relevant value.
*  | To replace the submit background hover color, find "background: #811E25!important;" and replace black with the relevant value.
*  | To replace the square AND country dropdown background color, find "background-color: #ffffff" and replace d2220b with the relevant value.
*  | To replace the white font color, find "color: #BE2336" and replace white with the relevant hex value.
*  | To replace the dark font color, find "color:#231F20" and replace black with the relevant value.
*  | To replace the social media icon hover color, find "color: #FFF" and replace #FFF with the relevant value.
*  | To replace the background image, find "https://d24wuq6o951i2g.cloudfront.net/img/events/458088370/assets/147120f1.mm-splash-c42944905ee07c5d16.gif" and replace it with the image URL.
*  | To replace the down arrow color, find "linear-gradient(45deg, transparent 50%, #000000 50%)" and replace all instances of black on that line with the hex value.
*/

/********************************************************************************************/
/************************************* FONT FAMILY CODE *************************************/
/********************************************************************************************/

/* Regular Font Weight Text */
/* Is a Private Event line, 21+ gate subheadline, input placeholder */
.private-content small,
.private-content .form-holder #access-code-form h4,
.private-content .form-holder #access-code-form input::placeholder,
.private-links {
    font-family: OverpassBold !important;
}

/* Bold font weight text */
/* Headline, input boxes, country dropdown, submit button, error code */
.private-content .form-holder #access-code-form input,
select,
.private-content .form-holder #access-code-form input[type="submit"],
.private-content #access-code-error{
    font-family: OverpassBold !important;
}


.private-content h1 {
    font-family: MakersSerif_W_It;
}

/*******************************************************************************************/
/************************************* FONT COLOR CODE *************************************/
/*******************************************************************************************/

/* Headline */
.private-content h1 {
    color:#231F20;
    text-transform: none;
    letter-spacing: 0px;
}

/* Is a Private Event line */
.private-content small {
    color:#231F20 !important;
}

/* Input boxes and country dropdown */
.private-content .form-holder #access-code-form input,
select{
    color:#231F20!important;
}

/* Submit button Normal State */
.private-content .form-holder #access-code-form input[type="submit"]{
    color:#ffffff!important;    
}

/* Submit Button Hover State */
.private-content .form-holder #access-code-form input[type="submit"]:hover{
    color: #ffffff;
}

/* Input box placeholder text */
.private-content .form-holder #access-code-form input::placeholder {
    color:#231F20;
}

/* 21+ Gate country subheadline text */
.private-content .form-holder #access-code-form h4 {
    color:#231F20;
}

/* Social Icons normal state */
.private-socialIcons a {
    color:#231F20 !important;
    display:none;
}

/* Social icons hover state */
.private-socialIcons a:hover {
    color: #811E25 !important;
    display:none;
}

/* NEW Privacy links in place of social links */
.private-links a {
    color: #BE2336;
}

.private-links a:hover {
    color: #811E25;
}

/* Error text */
.private-content #access-code-error {
    color:#231F20;
}

/*************************************************************************************************/
/************************************* FONT SIZE/STYLE CODE **************************************/
/*************************************************************************************************/

/* Event title headline */
.private-content h1 {
    font-size: 3rem;
}

/* Is a Private Event line */
.private-content small {
    font-size: 1.15rem;
}

/* Input boxes */
form input {
    font-size: 1rem !important;
}

/* 21+ Gate country subheadline*/
.private-content .form-holder #access-code-form h4 {
    font-size: 1rem;
}

/* Social Icons size */
.private-socialIcons a {
    font-size: 1.5rem !important;
}

/* Error text */
.private-content #access-code-error {
    font-size: 1rem;
}

/********************************************************************************************/
/************************************* BACKGROUNDS CODE *************************************/
/********************************************************************************************/

/* Privacy Gate Background image/gif */
.private-wrapper {
    background-color:black;
    background-image: url(https://d24wuq6o951i2g.cloudfront.net/img/events/458088370/assets/147120f1.mm-splash-c42944905ee07c5d16.gif);
}

/* Background color of square container */
.private-content {
    background-color: #ffffff;
}

/* Input boxes background */
.private-content .form-holder #access-code-form input{
    background: none!important;
}

/* Country dropdown background color
 * to make the background look "transparent" match this color to 
 * .private-content background color above */
select{
    background-color: #ffffff;
}

/* Background color when focusing or hovering on input boxes*/
.private-content .form-holder #access-code-form input:focus,
.private-content .form-holder #access-code-form input:hover {
    background: rgba(0,0,0,0.2);
}

/* Submit button normal state */
.private-content .form-holder #access-code-form input[type="submit"]{
    background:#BE2336!important
}

/* Submit button hover state */
.private-content .form-holder #access-code-form input[type="submit"]:hover{
    background: #811E25!important;
}

/* Country dropdown arrow color */
.private-content .form-holder #access-code-form select {
    background-image:linear-gradient(45deg, transparent 50%, #000000 50%),
        linear-gradient(135deg, #000000 50%, transparent 50%);
}



/**********************************************************************************************/
/************************************* MISCELLANEOUS CODE *************************************/
/**********************************************************************************************/

/* If you wish to show the "is a private event" line, comment out or delete display: none*/
.private-content small {
    display: none;
}

/* Input boxes and country dropdown borders normal state */
.private-content .form-holder #access-code-form input,
select{
    border: 2px solid black!important;
}


/* Input boxes and country dropdown borders on focus or hover states*/
.private-content .form-holder #access-code-form input:focus,
.private-content .form-holder #access-code-form input:hover {
    border: 2px solid black;
}

/* Submit button Normal State */
.private-content .form-holder #access-code-form input[type="submit"] {
    border: 2px solid black!important;
}

/* Submit button Hover State */
.private-content .form-holder #access-code-form input[type="submit"]:hover {
    border: 2px solid black!important;
}


/****************************************************************************************************************************/
/****************************************************************************************************************************/
/*************************************************** STRUCTURAL CODE ********************************************************/
/****************************************************************************************************************************/
/****************************************************************************************************************************/


/* Privacy gate container (background gif) */
.private-wrapper {
    background-repeat: repeat;
    background-size: auto;
    width: 100%;
    height: 110vh;
    display: inline-block;
}

/* Square container holding the content */
.private-content {
    width: 35%;
    height: auto;
    position: absolute;
    top: 5%;
    left: 50%;
    margin: 0 auto;
    padding: 5%;
    vertical-align: inherit;
    display: inline-block;
    z-index: inherit;
    transform: translate(-50%, 5%);
}

/* Is a private event line */
.private-content small {
    text-shadow: none !important;
    padding: 0 !important;
    margin-top: 5px;
}

/* Event title/headline */
.private-content h1 {
    text-shadow: none;
    text-align: center;
    margin: 0;
    width: 100% !important;
    margin-bottom: 3rem;
    margin-top: 3rem;
    padding: 0;
}

/* 21+ gate country subheadline */
.private-content .form-holder #access-code-form h4 {
    letter-spacing: 0;
    text-transform: inherit;
    line-height: 1.25;
}

/* Inpiut boxes */
form input {
    margin: 0 !important;
    border-radius: 0 !important;
}

/* Password and email protected gates */
.private-content .form-holder #access-code-form input[name=access_code] {
    width: 60%;
    height: 100%;
    padding: 1.5rem 1rem;
    margin-bottom: 1rem!important;
}

/* Submit on PW or Email protected gates */
.private-content .form-holder #access-code-form input.form-submit.normal {
    position: inherit;
    width: 40%;
    height: 100%;
    padding: 1.5rem 1rem;
}

/* Input boxes */
.private-content .form-holder #access-code-form input {
    letter-spacing: 0;
    width: 100%;
    padding: 1.5rem 1rem;
}

/* Submit button (age gates only) */
.private-content .form-holder #access-code-form #age-restricted-submit {
    position: inherit;
    max-width: 10rem;
    margin-top: 1rem!important;
    margin-bottom: 1rem!important;
    padding: 1.5rem 1rem;
}

/* Country dropdown */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-border-radius: 0px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
select:focus {
    outline:0;
}

/* Country dropdown arrow */
.private-content .form-holder #access-code-form select {
    background-position:calc(100% - 20px) 1.75rem, calc(100% - 13px) 1.75rem;
    background-size:7px 7px;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 15rem;
    padding: 1.5rem 1rem;
    margin-top: 1rem;
}

#customer-logo {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.form-holder {
    width: 100%;
    max-width: 25rem;
    margin: 0 auto;
}

form {
    width: 100%;
    display: inline-block;
    margin: 0 auto;
}

/* Email input box privacy gate */
.private-content .form-holder #access-code-form #access-code-input.email_access {
    margin-bottom: 1rem!important;
    width: 80%;
    height: 100%;
    left: 0;
}

/* age input boxes */
.age-input-wrap {
    display:inline-block;
    margin-top:1rem;
}

.age-input-wrap input {
    max-width:5rem;
}

/* Error text */
.private-content #access-code-error {
    text-transform: uppercase;
    margin-top: 1rem;
    line-height: 1.15 !important;
}

/* Social icons links */
.private-socialIcons a {
    padding: 0 0.75rem;
}

/* Social icons */
.private-socialIcons {
    width:15rem;
    display:none;
    margin-top:0rem;
}

/*Get rid of default styles in iOS*/
input {
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

@media screen and (max-width: 1200px) {
    #customer-logo {max-width: 100%;}
}

@media screen and (max-width: 768px) {
    .private-content {width: 90%; transform: translate(-50%); padding: 10% 5% 5% 5%}
    .private-content h1 {font-size:2rem; margin-bottom:2rem;}
    .private-wrapper {height:120vh; background-size: 50%;}
}

@media screen and (min-width: 769px) {
    .private-content {width: 50%;}
}

@media screen and (min-width: 1300px) {
    .private-content {width: 40%;}
}