/* INSTRUCTIONS + KEY
*  | To replace the bold font, find "Optimistic Display Medium" and replace with the relevant font family name.
*  | To replace the normal font, find "Optimistic Text Regular" and replace with the relevant font family name.
*  | To replace the color gradient, find "linear-gradient" and follow the local color instructions.
*  | To replace the submit background color, find "background: #1C2B33 !important;" and replace rgb(12, 35, 64) with the relevant value.
*  | To replace the submit background hover color, find "background: #CBD2D9 !important;" and replace #CBD2D9 with the relevant value.
*  | To replace the white font color, find "color: #CBD2D9!important;" and replace FFF with the relevant hex value.
*  | To replace the dark font color, find "color: FF#FFFF!important;" and replace rgb(12, 35, 64) with the relevant value.
*  | To replace the background image, find "http://d3m889aznlr23d.cloudfront.net/img/events/id/458/458538792/assets/90964fc368f45951a5ee79b36df68d0d.Meta_gradient.png" and replace it with the image URL.
*  | To replace the down arrow color, find "linear-gradient(45deg, transparent 50%, #1C2B33 50%)" and replace all instances of 000 on that line with the hex value.
*/

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

/************* CHANGE NORMAL FONT FAMILY FOR ALL ELEMENTS **************/
.private-content small,
.creative-private-blurb p,
form input,
.private-content .form-holder #access-code-form,
.private-content .form-holder #access-code-form input::placeholder,
.private-content .form-holder #access-code-form h4,
.private-content #access-code-error,
select{
    font-family: Optimistic Text Regular !important;
}

/************** CHANGE BOLD FONT FAMILY FOR ALL ELEMENTS **************/
.private-content h1 {
    font-family: Optimistic Display Medium !important;
}

.private-content .form-holder #access-code-form input {
    font-family: Optimistic Text Bold !important;
}

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

/************** CHANGE PRIMARY DARK FONT COLOR **************/
.private-content .form-holder #access-code-form input,
.private-content #access-code-error{
    color: #1C2B33;
}

/************** CHANGE FONT COLOR OF HEADLINE, AGE RESTRICTION TEXT **************/
.private-content h1,  .private-content .form-holder #access-code-form h4 {
    color: #1C2B33 !important;
}

/************** CHANGE FONT COLOR OF BUTTON TEXT **************/
.private-content .form-holder #access-code-form input[type="submit"]{
    color: #FFFFFF !important;
}

/************** CHANGE FONT COLOR OF BUTTON HOVER STATE **************/
.private-content .form-holder #access-code-form input[type="submit"]:hover{
    color: #1C2B33 !important;
}

/************** CHANGE FONT COLOR OF PLACEHOLDER 👇 **************/
.private-content .form-holder #access-code-form input[name=access_code]::placeholder {
    color: rgb(191, 192, 193);
}

/************** CHANGE NORMAL FONT COLOR OF SOCIAL ICONS 👇 **************/
.creative-private-socialIcons a{
    color: FF#FFFF!important;
}

/************** CHANGE HOVER FONT COLOR OF SOCIAL ICONS 👇 **************/
.creative-private-socialIcons a:hover {
    color: #CBD2D9!important;
}

/************** CHANGE FONT COLOR OF "IS A PRIVATE EVENT" AND BLURB **************/
.private-content small, 
.creative-private-blurb p{
    color: #1C2B33 !important;
}

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

form input {
    font-size: 1rem !important;
}

/************** CHANGE FONT SIZE OF HEADLINE👇 **************/
.private-content h1 {
    font-size: 2rem;
}

/************** CHANGE FONT STYLING OF SUBHEADLINE IN AGE RESTRICTION PRIVACY GATES 👇 **************/
.private-content .form-holder #access-code-form h4 {
    font-size: 1.15rem;
    letter-spacing: 0;
    text-transform: inherit;
    line-height: 1.15;
    text-align: left;
}

/************** CHANGE FONT SIZE OF BLURB 👇 **************/
.creative-private-blurb p {
    font-size: 1rem;
}

/************** CHANGE FONT SIZE OF "IS A PRIVATE EVENT" **************/
.private-content small {
    font-size: 1.15rem;
}

/************** CHANGE SIZE OF SOCIAL ICONS 👇 **************/
.creative-private-socialIcons a {
    font-size: 1.5rem !important;
}

/************** CHANGE FONT COLOR AND CAPITALIZATION OF ERROR TEXT 👇 **************/
.private-content #access-code-error {
    font-size: 1rem;
    text-transform: uppercase;
    line-height: 1.15 !important;
    font-weight: bold;
    text-align: left;
}

/************** CHANGE LETTER SPACING OF INPUTS 👇 **************/
.private-content .form-holder #access-code-form input {
    letter-spacing: 0;
}

/************** CHANGE TEXT ALIGNMENT OF ACCESS CODE INPUT 👇 **************/
.private-content .form-holder #access-code-form input[name=access_code] {
    text-align:left;
}

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

/************** CHANGE LEFT HAND IMAGE **************/
.creative-private-wrapper {
    background-image: url("http://d3m889aznlr23d.cloudfront.net/img/events/id/458/458538792/assets/90964fc368f45951a5ee79b36df68d0d.Meta_gradient.png")!important;
    background-position: center!important;
    background-repeat: no-repeat!important;
    background-size: cover!important;
}

/************** CHANGE BACKGROUND COLOR OF CONTENT DIV **************/
.private-content {
    background: rgba(28,43,51,0.1);
}

/************** CHANGE BACKGROUND OF INPUT AND SELECT **************/
select,
.private-content .form-holder #access-code-form input,
.private-content .form-holder #access-code-form .login-button:focus,
.private-content .form-holder #access-code-form .login-button:hover,
.private-content .form-holder #access-code-form input:focus,
.private-content .form-holder #access-code-form input:hover {
    background: #FFFFFF !important;
}

/************** CHANGE BACKGROUND COLOR OF SUBMIT BUTTON **************/
.private-content .form-holder #access-code-form input[type="submit"]{
    background: #1C2B33 !important;
}

/************** CHANGE BACKGROUND COLOR OF SUBMIT BUTTON ON HOVER **************/
.private-content .form-holder #access-code-form input[type="submit"]:hover{
    background: #CBD2D9 !important;
}

/************** CHANGE COLOR OF DOWN ARROW IN SELECT 👇 **************/
.private-content .form-holder #access-code-form select {
    background-image: linear-gradient(45deg, transparent 50%, #1C2B33 50%), linear-gradient(135deg, #1C2B33 50%, transparent 50%) !important;
}

/************** If you don't want a background color on input elements then specify "none" **************/
.private-content .form-holder #access-code-form input {
    /*background: none !important;*/
}
/************** If you don't want a background color on the submit button then specify "none" **************/
.private-content .form-holder #access-code-form input[type="submit"] {
    /*background: none !important;*/
}

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

/************** CHANGE PADDING OF INPUTS 👇 **************/
.private-content .form-holder #access-code-form input {
    padding: 1.5rem 1rem!important;
}

/************** CHANGE PADDING BETWEEN SOCIAL ICONS 👇 **************/
.creative-private-socialIcons a {
    padding:0 1rem;
}

/************** COMMENT OUT THE LINE BELOW IF YOU WISH TO SHOW THE "IS A PRIVATE EVENT" LINE **************/
.private-content small {
    display: none;
}

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

/************** RIGHT HAND CONTENT **************/
.private-content{
    width: 50%;
    height: 100%;
    position: relative;
    top: inherit;
    left: inherit;
    margin: 0 auto;
    padding-top: 20vh;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 20vh;
    vertical-align: inherit;
    transform: inherit;
    display: inline-block;
    text-align: center;
    z-index: inherit;
    float:right;
}

/************** LEFT HAND CONTENT **************/
.creative-private-img {
    width: 50%;
    height: 100%;
    float:left;
}

/************** REVERSE DIRECTION OF CONTENT DIV AND IMAGE DIV **************/
.creative-private-wrapper {
    width: 100%;
    height: 100vh;
    display: inline-block;
    float: left;
}

/************** SET WIDTH AND CENTER CUSTOMER LOGO **************/
#creative-customer-logo {
    max-width: 20%;
    margin: 0 auto 0 0;
}

/************** BLURB CONTENT MARGIN TOP **************/
.creative-private-blurb{
    float: left;
    margin-bottom: 3rem;
    width: 100%;
    text-align: left;
}

/************** OVERRIDE FORMATTING ON HEADLINE **************/
.private-content h1 {
    text-shadow: none;
    margin: 0;
    text-align: left;
    width: 100% !important;
    margin-bottom: 3rem;
    margin-top: 3rem;
    padding: 0;
}

/************** OVERRIDE FORMATTING ON "IS A PRIVATE EVENT" LINE **************/
.private-content small {
    text-shadow: none !important;
    padding: 0 !important;
    margin-top: 5px;
}

/************** OVERRIDE FORMATTING ON INPUTS **************/
form input {
    margin: 0 !important;
    border-radius: 0 !important;
}

/************** OVERRIDE FORMATTING ON SELECT **************/
select {
    border: none;
    -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;
}

/************** "ACCESS CODE" INPUT WIDTH **************/
.private-content .form-holder #access-code-form #access-code-input{
    width: 60%!important;
    height: 100%!important;
    float:left;
    text-align:left;
}

/************** STRUCTURE SUBMIT BUTTON **************/
.private-content .form-holder #access-code-form input[type="submit"] {
    position: inherit;
    width: 40%;
    height: 100%!important;
    float:right;
}

/************** STRUCTURE AGE RESTRICTED SUBMIT BUTTON **************/
.private-content .form-holder #access-code-form #age-restricted-submit {
    position: inherit;
    max-width: 10rem;
    width: 100%;
    margin-top: 1rem !important;
    float: left;
}

/************** STRUCTURE ACCESS CODE ERROR **************/
.private-content #access-code-error {
    margin-top: 1rem;
}

/************** OVERRIDE FORMATTING ON AGE RESTRICTED INPUT **************/
.private-content .form-holder #access-code-form input {
    width: 100%;
}

/************** OVERRIDE FORMATTING ON SELECT DROPDOWN ARROW **************/
.private-content .form-holder #access-code-form select {
    width: 100%;
    max-width: 15rem;
    padding: 1.5rem 1rem;
    margin-top: 1rem;
    background-position: calc(100% - 20px) 1.75rem, calc(100% - 13px) 1.75rem !important;
    background-size: 7px 7px !important;
    background-repeat: no-repeat !important;
    float: left;
}

/************** SET WIDTH AND CENTER FORM **************/
#access-code-form {
    width:100%;
    margin:0 auto;
}
.form-holder {
    width: 100%;
    max-width: 25rem;
    margin:0 auto;
    float: left;
}
form {
    width: 100%;
    display: inline-block;
    text-align: center;
    margin: 0 auto;
}
.age-input-wrap {
    display: inline-block;
    text-align: center;
    margin-top: 1rem;
    float: left;
}
.age-input-wrap input {
    max-width: 5rem;
}

/************** STRUCTURE SOCIAL ICONS **************/
.creative-private-socialIcons {
    width: 100%;
    display: inline-block;
    text-align: center;
    margin-top: 2rem;
}

/************** SSO BUTTON **************/
.private-content .form-holder #access-code-form .login-button {
    color: #FFFFFF !important;
    background: #1C2B33 !important;
    border-radius: 0 !important;
    font-family: Optimistic Text Bold !important;
    float: left;
}

.private-content .form-holder #access-code-form .login-button:hover {
    color: #1C2B33 !important;
    background: #CBD2D9 !important;
    border-radius: 0 !important;
    font-family: Optimistic Text Bold !important;
}

/* 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 queries */
@media screen and (max-width: 600px) and (min-width: 320px) {
    #creative-customer-logo {max-width: 25%;}
}
@media screen and (max-width: 1000px) and (min-width: 601px) {
    #creative-customer-logo {max-width: 30%;}
}
@media screen and (max-width: 640px) {
    .creative-private-wrapper {height: 100%;}   
    .creative-private-img, .private-content {width: 100%;}
    .creative-private-img {height: auto; padding-bottom: 66%;}
    .private-content { padding-top: 10vh; padding-bottom: 10vh;}
    .private-content h1 {margin-top: 1rem; margin-bottom: 1rem;}
}