/* Mobile-first design */
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-size: 100%;
    font-family: 'Montserrat', sans-serif;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
    background-color: #355070;
    background-image: none;
    color: white;
    height : auto;
    margin : 0;
    width : 100%;
}

.menu-toggle {
    display: block;
    position : relative;
    background-color: #fff;
    border: none;
    color: #355070;
    font-weight: 600;
    padding: 0.5em 1em;
    font-size: 1em;
    border-radius: 0.5em;
    cursor: pointer;
}

nav {
    width: 100%;
    display: block;
    margin : 0;
    padding : 0;
}

nav ul {
    display: block;
    list-style: none;
    margin: 0 0 0 4%;
    padding: 0;
    background-color: #355070;
    text-align: center;
    max-height: 0; /* Collapsed by default */
    overflow: hidden; /* Hide content when collapsed */
    transition: max-height 0.4s ease-in-out;
}

.nav-item {
    list-style: none;
    display: inline-block;
    padding: 0;
    position: relative;
    border-bottom: 1px solid #6d597a;
    width: 100%;
    margin: 0;
}

nav ul li {
    border-bottom: 1px solid #6d597a;
    display: inline-block;
    width: 100%;
    padding: 0;
    margin: 0;
}

nav ul li a {
    display: block;
    padding: 1em;
    color: white;
    text-decoration: none;
}

nav ul li a:hover {
    background-color: #6d597a;
    color : #fff;
}

.banner, .banner-narrow {
    text-align: center;
    background-color: #6d597a;
    max-height: 60vh;
    min-height: 60vh;
}

.banner-content  {
    margin-top : 1.2em;
    min-height : inherit;
}

.banner-narrow .banner-content {
    margin-top : 0;
}

.banner-title {
    margin-top: -0.5em;
    font-size: 2.2em;
    top: 9vh;
}

.banner-copy {
    font-size: 1.3em;
    top: 14vh;
}

.banner-copy .note {
    font-size: 96%;
}

.banner-copy br {
display : none;
}


#home-banner, #faq-banner {
    background: url("media/wyreside-hall-wedding-pianist-portrait.jpg") no-repeat;
    background-position: center;
    background-size: cover;
}

#bio-banner {
    background: url("media/session-accordionist-craig-smith.jpg") no-repeat;
    background-position: center;
    background-size: cover;
}

#bio-banner .banner-content {
    background: none;
    background-color: rgba(255,255,255,0.6);
    min-height: 90vh;
    padding : 0 5%;
}

#media-banner {
    background: url("media/wild-boar-wedding-pianist.jpg") no-repeat;
    background-position: center;
    background-size: cover;
}

#packages-banner {
    background: url("media/eaves-hall-wedding-pianist-portrait.jpg") no-repeat;
    background-position: center;
    background-size: cover;
}

#venues-banner {
    background: url("media/mitton-hall-wedding-pianist.jpg") no-repeat;
    background-position: center;
    background-size: cover;
}

#contact-banner {
    background: url("media/wyresdale-park-wedding-pianist.jpg") no-repeat;
    background-position: center;
    background-size: cover;
}

#songs-banner {
    background: url("media/hidden-river-barn-wedding-piano.jpg") no-repeat;
    background-position: center;
    background-size: cover;
}

main {
    padding: 1em 1em 0 1em;
}

.portrait-right {
    float: none;
    display: block;
    margin: 1em auto;
    width: 100%;
    height: auto;
}

h2 {
    font-size: 1.5em;
    text-align: center;
}

.availability-button {
    font-size: medium;
    font-size: 65%;
    font-weight: 600;
}

.testimonial, .testimonial-small {
    position: static;
    width: 90%;
    margin: 1em 5%;
    background: #355070;
    border-radius: 2em;
    font-size: 130%;
    font-family: "Lora", serif;
    font-weight: 600;
    padding: 0.5em 1em;
    left: -3em;
    color: #fff;
    text-align: center;
}

.para-bullets li {
    margin-top : 1em;
}

.video-container {
    display : block;
    width : 100%;
    max-width : 100%;
    margin : 1em 0;
    min-height : 34.5em;
    max-height : 34.5em;
    overflow-x : hidden;
    border-bottom : 1px solid #dbdbdb;
}


.instagram-media {
    width: 100% !important;
    min-width: auto !important; 
}

.form-container {
    width: 100%;
    overflow: hidden;
    padding : 1em 4% 0 4%;
}

input, textarea, #form_button {
    min-width: unset;
    min-width : 100%;
}

input[type="date"] {
    min-width: unset;
    min-width: 92%;
    max-width: 100%;
}

.pb-left, .pb-right {
    width: 100%;  
}

.pp-left, .pp-right {
    display: none;
}

footer {
    text-align: center;
    padding-bottom: 0;
    font-size: 0.8em;
}

.mob-hide {
    display: none;
}

.mobile-only {
    display: inline;
}

.songlist {
    box-sizing : border-box;
    width : 99%;
    margin: 0 0.5% 1em 0.5%;
    padding : 0.5em 5%;
    border: 4px solid #355070;
    border-radius: 1em;
    text-align: center;
    display: block;
}

.songlist ul, .songlist h3 {
    margin: 0;
}

.songlist li {
    list-style: none;
    margin-left: -40px;
}

.index-bullets {
    display: inline;
}

.gallery-tile {
    flex: 0 0 calc((100% - 2%) / 2);
}

.venue-list {
    grid-template-columns: repeat(2, 1fr);
}

#venue-banner {
    display: none;
}

/* Ensures nothing overflows */
* {
    box-sizing: border-box;
}