/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/


@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');


/* HOME */

#home-section-1 {
    overflow-x: hidden;
    
    overflow-y: visible;
}

#JS-icon > div > img {
    border-radius: 999px;
    box-shadow: 1px 1px 3px #c2c2c2, -1px -1px 3px #ffeded;
}

#flower-arrangement {
    position: absolute;
    width: 750px;
}

#home-RSVP-button > div > div > a {
    box-shadow: -2px -2px 2px rgba(134, 134, 134, 0.5) inset, 6px 6px 6px rgba(129, 129, 129, 0.5);
    background: url("https://johnsoe.weddinginvite.page/wp-content/uploads/MARBLE_2_ROSE_GOLD_recoloured_pink_seamless_500x500_25darker.jpg") center 16% no-repeat;
}

#home-RSVP-button > div > div > a > span {
    margin: 1px 10px 1px 15px;
}

#home-date > div > span {
    background-color: #b88487bd;
    color: transparent;
    text-shadow: 2px 2px 3px rgba(255,255,255,0.5);
        -webkit-background-clip: text;
        -moz-background-clip: text;
    background-clip: text;
}

/*
#title-John > div > h1 {
    font-size: 90px;
    margin-bottom: -25px;
}

#title-and > div > h1 {
    font-size: 35px;
    margin-left: 70px;
}

#title-Soe > div > h1 {
    font-size: 90px;
    margin-left: 18px;
    margin-top: -35px;
}
*/

#johnsoe-illustration > div > div > div > img {
 margin-left: 0px;
 z-index: 5;
}





/* RSVP */

#JS-icon-header > div > a > img {
    border-radius: 999px;
    box-shadow: 1px 1px 3px #c2c2c2, -1px -1px 3px #ffeded;
}

.elementor-element-c9db8d1 {
    text-align: center;
}

.elementor-element-c9db8d1 > div > form {
    color: #B89C99;
    font-family: 'Zilla Slab', serif;
}

#rsvp-shortcode > div > div > p , #rsvpForm {
    font-family: 'Zilla Slab', serif;
    color: #B89C99;
    font-size: 20px;
}

#rsvpPlugin > #rsvpNew {
    margin-bottom: 120px;
}


/* BUTTONS */
/* page password enter button */ .elementor-element-c9db8d1 > div > form > p > input,
/* "New Attendee Registration" button */ #rsvpPlugin > #rsvpNew > input,
/* "Complete your RSVP! */ #rsvpPlugin > form#rsvp > p > input,
/* "Add Additional Guest */ div#addRsvpButtonContainer > button#addRsvp,
/* RSVP button */ form#rsvpForm > p > input,
/* remove additional guest */ div.rsvpAdditionalAttendee > div.rsvpAdditionalAttendeeQuestions > p > button,
/* edit reservation yes */ #rsvpPlugin > form > input {
    background: #AC8C91;
    border-radius: 10px;
    font-family: 'Manrope', sans-serif;
    
}


/* INPUT FIELDS */
/* page password field */ #pwbox-303,
/* modify registration First Name */ form#rsvp > p > input#firstName,
/* modify registration Last Name */ form#rsvp > p > input#lastName,
/* modify registration Passcode */ form#rsvp > p > input#passcode,
/* new registration First Name */ form#rsvpForm > div > input#attendeeFirstName,
/* new registration Last Name */ form#rsvpForm > div > input#attendeeLastName,
/* new registration Email Address */ form#rsvpForm > div > input#mainEmail,
/* additional registration */ div.rsvpAdditionalAttendeeQuestions > input, div.rsvpAdditionalAttendee > div.rsvpFormField > input,
/* additional registration */ div.rsvpAdditionalAttendeeQuestions > div.rsvpFormField > input,
/* mobile */ div.rsvpCustomQuestions > div > input,
/* age */ div.rsvpCustomQuestions > div > select {
    background: #ffffff;
    margin-left: 15px;
    border-radius: 10px;
    font-family: 'Manrope', sans-serif;
    border-color: rgba(194, 194, 194, 0.514);
}

/* Custom Question Fields */
div.rsvpCustomQuestions > div > textarea {
    background: #ffffff;
    border-radius: 10px;
    font-family: 'Manrope', sans-serif;
    border-color: rgba(194, 194, 194, 0.514);
    margin-top:10px;
}

form#rsvpForm > div.rsvpBorderTop {
    margin-top:50px;
    padding-top: 40px;
    padding-bottom:30px;
}

form#rsvpForm > div.rsvpCustomQuestions {
    margin-bottom: 150px;
}

#rsvpPlugin > p {
    font-family: 'Zilla Slab', serif;
    color: #B89C99;
}

#rsvpPlugin > p > strong {
    font-family: 'Roboto Mono', monospace;
}

#rsvpPlugin > form#rsvp > p {
    font-family: 'Manrope', sans-serif;
    text-transform: uppercase;
    font-size: 15px;
    color: #B89C99;
}


/* additional registration */

form#rsvpForm > h3 {
    font-size: 23px;
}

form#rsvpForm > h3 > span#add-guest-instructions {
    font-size: 19px;
    color: rgb(160, 160, 160);
}



div#addRsvpButtonContainer {
    text-align: center !important;
}

div.rsvpAdditionalAttendee {
    margin-top: 50px;
    padding-top: 50px;
}

div#additionalRsvpContainer {
    margin-bottom: 50px;
}



@media screen and (max-width: 400px) {

    /* INPUT FIELDS */

    /* page password field */ #pwbox-303,
    /* modify registration First Name */ form#rsvp > p > input#firstName,
    /* modify registration Last Name */ form#rsvp > p > input#lastName,
    /* modify registration Passcode */ form#rsvp > p > input#passcode,
    /* new registration First Name */ form#rsvpForm > div > input#attendeeFirstName,
    /* new registration Last Name */ form#rsvpForm > div > input#attendeeLastName,
    /* new registration Email Address */ form#rsvpForm > div > input#mainEmail,
    /* additional registration */ div.rsvpAdditionalAttendeeQuestions > div.rsvpFormField > input {
        margin-left: 0px;
    }

    form#rsvpForm > div.rsvpCustomQuestions {
        margin-bottom: 100px;
    }

}