@charset "utf-8";

/* Notes:

Colors: 
    White:      #ffffff
    Mint:       #D0E0DE     208,224,222
    Sea Foam:   #A1C1BE     161,193,190
    Moss:       #607372     96,115,114
    Sand:       #E2E3D9     226, 227, 217
    Moca:       #59554E     89, 85, 78       @60% = #9b9995
    Charcoal:   #1C2222     
    
Fonts: Google
    font-family: 'Source Sans Pro', sans-serif;
    font-family: 'Comfortaa', cursive;
*/

body{
    color:#59554E;
    font-family:'Source Sans Pro',sans-serif;
    font-size:1.1em;
    font-weight:300;
    letter-spacing:.02em;
    line-height:1.3em;
    overflow-x:hidden;
}

.container{padding-left:30px;padding-right:30px;}

h1, h2, h3, h4, h5, h6{
    color:#607372;
    font-family:'Comfortaa', cursive;
    letter-spacing:.1;
    text-align:center;
    width:100%;
}
h1{border-bottom:1px solid;font-size:1.15em;line-height:1.1;margin-bottom:8px;margin-top:8px;}
h2{border-bottom:1px solid;font-size:1.2em;margin-bottom:1em;}
h3, h4, h5, h6{font-size:1em;}

@media (min-width:768px){
    h1{border-bottom:1px solid;font-size:1.5em;margin-bottom:16px;margin-top:16px;}
    h2{border-bottom:1px solid;font-size:1.3em;}
    h3, h4, h5, h6{font-size:1.2em;}
}

.no-wrap{white-space:nowrap;}

/* general links */
a, a:link, a:visited, a:hover, a:active{text-decoration:none;}
a, a:link, a:visited, a:active{color:#59554E;}
a:hover{color:#A1C1BE;}
a:focus{outline:0;}

/* all buttons */
a.btn,button{border:0;text-decoration:none;}
a:hover.btn,button:hover,a:focus.btn,button:focus,a:active.btn,button:active{}
a:focus.btn,a.btn.focus,button:focus{box-shadow: 0 0 0 0.2rem rgba(208,224,222,0.5);}

a.btn-outline{border:1px solid #59554E;}
a.btn-outline:hover{border:1px solid #D0E0DE;background-color:#D0E0DE;color:#59554E;}

/* jumbo/hero button */
a:link.btn-hero,
a:visited.btn-hero,
a:active.btn-hero{background-color:rgba(255,255,255,.75);color:#59554E;}
a:hover.btn-hero{background-color:#fff;}
a.btn.btn-hero{margin-top:2em;}

/* footer contact button */
footer a:link.btn-footer-contact,
footer a:visited.btn-footer-contact,
footer a:active.btn-footer-contact{background-color:#fff;color:#59554E;text-decoration:none;}
footer a:hover.btn-footer-contact{background-color:#A1C1BE;}

/* nav */
.navbar{background-color:#fff;}

.navbar-light .navbar-brand,
.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus,
.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-text,
.navbar-light .navbar-text a,
.navbar-light .navbar-text a:hover,
.navbar-light .navbar-text a:focus
{color:rgba(96,115,114,1.0);}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {color:rgba(161,193,190,1.0);}

.navbar-light .navbar-nav .nav-link.disabled{color:rgba(96,115,114,0.3);}
.navbar-light .navbar-toggler{color:rgba(96,115,114,1.0);border-color: rgba(96,115,114,0.2);}

.navbar-light .navbar-toggler-icon{
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(96,115,114,0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

a.dropdown-item{color:#607372;}
a.dropdown-item:hover, a.dropdown-item:focus{color:#607372;background-color:#D0E0DE;}
a.dropdown-item.active, a.dropdown-item:active{background-color:#A1C1BE;}
a.dropdown-item.disabled, a.dropdown-item:disabled{color:rgba(96,115,114,0.3);background-color:transparent;}

@media (max-width:575px){a.navbar-brand{width:260px;}}
@media (max-width:989px){nav a.nav-link:hover{background-color:rgba(208,224,222,.3);color:#59554E;}}

/* main */
main{margin-top:84px;} /* accommodates the fixed navbar */

.script-type{font-family:'Allura', cursive;font-size:1.5em;line-height:1em;}
.beige-bkgd{background-color:#E2E3D9;}
.mint-bkgd{background-color:#D0E0DE;}
.seafoam-bkgd{background-color:#A1C1BE;}
.white-text{color:#ffffff;}

i.fa.fa-heart{margin-left:.5em;font-size:.8em;}
i.fa.fa-times-circle{color:#A1C1BE;cursor:pointer;font-size:.7em;}

.large-copy{margin:0;padding-top:12px;text-align:center;}
.large-copy p{font-size:1.3em;line-height:1.3em;}

.shadow{text-shadow:2px 2px 2px #59554E;}
.no-shadow{text-shadow:none;}

/* jumbo | banner images */
.jumbo-img-index{height:300px;margin-bottom:24px;}
.jumbo-img-services,
.jumbo-img-about,
.jumbo-img-contact,
.jumbo-img-gallery-wedding,
.jumbo-img-gallery-mitzvah,
.jumbo-img-gallery-portrait,
.jumbo-img-gallery-branding{height:400px;padding:24px;margin-bottom:48px;}

section#services, 
section#testimonial,
section#about-testimonials{margin-bottom:48px;}

@media (max-width:575px){
    .large-copy p{font-size:.75em;line-height:1em;}
    .jumbo-img-index,
    .jumbo-img-services,
    .jumbo-img-about,
    .jumbo-img-contact,
    .jumbo-img-gallery-wedding,
    .jumbo-img-gallery-mitzvah,
    .jumbo-img-gallery-portrait,
    .jumbo-img-gallery-branding,
    section#services,
    section#testimonial,
    section#about-testimonials{margin-bottom:0;}
}
@media (max-width:767px){
    .large-copy{padding:inherit 12px;}
    .large-copy p{font-size:1em;line-height:1.2em;}
    p.hero-left{padding-left:8px;padding-right:90%;}
    a.btn.btn-hero{margin-top:12em;}
    .jumbo-img-services,
    .jumbo-img-about,
    .jumbo-img-contact,
    .jumbo-img-gallery-wedding,
    .jumbo-img-gallery-mitzvah,
    .jumbo-img-gallery-portrait,
    .jumbo-img-gallery-branding{padding:0 12px 12px 12px;}
}

.jumbo-img-index{background-image:url("../images/index-Cleveland-museum-of-art-wedding_Elizabeth-Glorioso-Photography-short.jpg");background-position:center center;}
.jumbo-img-services{background-image:url("../images/services-engagement-session-cleveland-ohio-Elizabeth-Glorioso-Photography-short.jpg");background-position:center center;}
.jumbo-img-about{background-image:url("../images/about-Elizabeth-glorioso-candid-self-portrait-short.jpg");background-position:center center;}
.jumbo-img-contact{background:url("../images/contact-kids_photo-field-cleveland-Elizabeth-Gloriso-Photography-short.jpg");background-position:center center;}
.jumbo-img-gallery-wedding{background-image:url("../images/wedding-ceremony-our-lady-of-angels-Rocky-river-ohio-Elizabeth-Glorioso-Photography-short.jpg");background-position:center center;}
.jumbo-img-gallery-mitzvah{background-image:url("../images/mitzvah-Fairmount-temple-cleveland-ohio-mitzvah-Elizabeth-Glorioso-Photography-short.jpg");background-position:center center;}
.jumbo-img-gallery-portrait{background-image:url("../images/portrait-stan-hywett-hall-engagement-Elizabeth-Glorioso-Photography-short.jpg");background-position:right center;}
.jumbo-img-gallery-branding{background-image:url("../images/branding-headshots-dance-cleveland-Elizabeth-Glorioso-Photography-short.jpg");background-position:center center;}

@media (min-width:768px){
    .jumbo-img-index{background-image:url("../images/index-Cleveland-museum-of-art-wedding_Elizabeth-Glorioso-Photography.jpg");background-position:left center;}
    .jumbo-img-services{background-image:url("../images/services-engagement-session-cleveland-ohio-Elizabeth-Glorioso-Photography.jpg");}
    .jumbo-img-about{background-image:url("../images/about-Elizabeth-glorioso-candid-self-portrait-v2.jpg");background-position:right center;}
    .jumbo-img-contact{background:url("../images/contact-kids_photo-field-cleveland-Elizabeth-Gloriso-Photography-v2.jpg");background-position:right center;}
    .jumbo-img-gallery-wedding{background-image:url("../images/wedding-ceremony-our-lady-of-angels-Rocky-river-ohio-Elizabeth-Glorioso-Photography.jpg");background-position:left center;}
    .jumbo-img-gallery-mitzvah{background-image:url("../images/mitzvah-Fairmount-temple-cleveland-ohio-mitzvah-Elizabeth-Glorioso-Photography.jpg");}
    .jumbo-img-gallery-portrait{background-image:url("../images/portrait-stan-hywett-hall-engagement-Elizabeth-Glorioso-Photography.jpg");background-position:center center;}
    .jumbo-img-gallery-branding{background-image:url("../images/branding-headshots-dance-cleveland-Elizabeth-Glorioso-Photography.jpg");}
}

/* cards: index, about-testimonials, and gallery */
.card{border-radius:0;display:inline-block;width:100%;} /* display is for card-columns fix */
section#gallery div.card{border:0;} /* targets gallery cards, not index and about pages */
div.card h2{border-bottom:0;}
div.card-body p:first-child{text-align:left;}
div.card-body p:last-child{text-align:right;}
div.col-sm-4.card.gallery-cards{padding:auto .75em .75em .75em}
img.img-fluid.brand-outline{border:1px solid rgba(0, 0, 0, 0.125);}

/* spacing around gallery cards */
.no-gutter-card-deck.card-columns{column-gap:0;} /* removes space between columns in masonry grid */
.no-gutter-card-deck > .card{margin:0;padding:.4em;} /* removes space between rows in masonry grid */
.ui-tabs .ui-tabs-panel{padding:.5em;}

@media (max-width:575px){
    div.card{border:0px;}
    div.card#branding-card img{border:0;}
    div.card h2{border-bottom:1px solid;padding-top:8px;width:80%}
    div.card-body p:first-child,div.card-body p:last-child{text-align:center;}
    .card-columns{
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
    .no-gutter-card-deck > .card{margin:0;padding:.05em;} /* removes space between rows in masonry grid */
    .ui-tabs .ui-tabs-panel{padding:.1em;}
}
@media (max-width:767px){
    div.card h2{font-size:1.4em;}
    .no-gutter-card-deck > .card{padding:.2em;}
    .ui-tabs .ui-tabs-panel{padding:.25em;}
}
@media (max-width:989px){
    div.card h2{font-size:1.2em;}
}

/* testimonial - index */
section#testimonial{min-height:200px;}
section#testimonial div#quote{width:80%;margin-left:auto;margin-right:auto;}
.testimonial-author{color:#607372;text-align:center;}
.bold-italic{font-weight:500;font-style:italic;}

/* index */
section#intro{color:#ffffff;}
section#intro h1{
    border-bottom:0;
    color:#fff;
    font-size:1.15em;
    font-family:'Comfortaa',cursive;
    font-weight:600;
    margin-top:11em;
    text-align:center;
    text-shadow:2px 2px 2px #59554E;
    width:100%;
}

@media (min-width:768px){
    section#intro h1{font-size:1.4em;margin-top:8.5em;text-align:right;}
}
@media (min-width:990px){
    section#intro h1{font-size:1.5em;}
}

/* services */
div#service-list{background-color:rgba(255,255,255,0.5);border:1px solid #607372;border-radius:4px;font-size:.9em;padding-top:6px;}
div.service-name{text-align:right;width:30%;}
div.service-desc{margin-left:20px;text-align:left;width:60%;}
p.img-caption{font-size:.7em;}
p.img-caption a{text-decoration:underline;}
.service-gallery-btn{margin-top:40px;}

/* gallery pages */
/* JQUERY UI ELEMENTS: tabs (galleries) */
.gallery-subtitle{color:#fff;font-size:1.4em;line-height:1.3;text-align:center;}
section#gallery{margin-bottom:48px;padding:0;}
@media (max-width:575px){section#gallery{margin-bottom:12px;}}

/*section#gallery .ui-widget.ui-widget-content{background-color:transparent;}*/
section#gallery .ui-widget-header{
    background:none;
    border:0;
    color:#59554E;
    font-size:.8em;
    font-weight:normal;
}
section#gallery .ui-widget.ui-widget-content{border:0;width:100%;height:auto;}

.ui-tabs{padding:0;}
#tabs-1,#tabs-2,#tabs-3,#tabs-4{border:1px solid #D0E0DE;}
@media (max-width:575px){#tabs-1,#tabs-2,#tabs-3,#tabs-4{border:0;border-top:1px solid #D0E0DE;}}

/* tab UI styles */
.ui-corner-all, .ui-corner-top, .ui-corner-left, ui-corner-right, .ui-corner-bottom{border-radius:0;}
.ui-state-default,.ui-state-active:focus{outline:0;}

.ui-state-default, 
.ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default, 
.ui-button, 
html .ui-button.ui-state-disabled:hover, 
html .ui-button.ui-state-disabled:active{
    border:0;
    background:none;
    background-color:#E2E3D9;
    color:#59554E;
}
span.ui-icon{margin-right:10px;}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    background-color:#D0E0DE;
    font-weight:normal;
    color:#59554E;
}
                /*
                .ui-widget-content {
                    border: 1px solid #D0E0DE;
                    background:#ffffff;
                    color:#59554E;
                }
                */
@media (max-width:767px){
    section#gallery .ui-widget-header{font-size:.65em;}
    a#tab-link-1.ui-tabs-anchor,
    a#tab-link-2.ui-tabs-anchor,
    a#tab-link-3.ui-tabs-anchor,
    a#tab-link-4.ui-tabs-anchor{padding:.5em .5em;}
}

@media (max-width:575px){
    section#gallery .ui-widget-header{font-size:.5em;}
    a#tab-link-1.ui-tabs-anchor,
    a#tab-link-2.ui-tabs-anchor,
    a#tab-link-3.ui-tabs-anchor,
    a#tab-link-4.ui-tabs-anchor{padding:.5em .5em;}
}

/* lightbox */
.featherlight-previous,.featherlight-next{background-color:rgba(89,85,78,.5);height:40px;width:40px;}
.featherlight-previous{left:auto;right:105px;}
.featherlight-next{left:auto;right:65px;}
.featherlight-next:hover,.featherlight-previous:hover{background-color:rgba(89,85,78,1);}

.featherlight-next span,
.featherlight-previous span{
    color:#E2E3D9;
    display:inline-block;
    font-size:20px;
    line-height:20px;
    margin-top:-10px;
    text-shadow:none;
}

.featherlight .featherlight-close-icon{
    background-color:rgba(161,193,190,.5);
    color:#E2E3D9;
    font-weight:600;
    line-height:40px;
    position:absolute;
    right:25px;
    top:25px;
    width:40px;
    z-index:9999;
}
.featherlight .featherlight-close-icon:hover{background-color:rgba(161,193,190,1);}

@media only screen and (max-width:1024px){
    .featherlight .featherlight-close-icon{right:10px;top:10px;}
    .featherlight-previous{left:auto;right:90px;}
    .featherlight-next{left:auto;right:50px;}
}
@media (max-width:767px){
    .featherlight-previous,.featherlight-next{height:25px;width:25px;}
    .featherlight-previous{left:auto;right:60px;}
    .featherlight-next{left:auto;right:35px;}
    .featherlight-next span,
    .featherlight-previous span{
        font-size:14px;
        line-height:14px;
        margin-top:-7px;
    }
    .featherlight .featherlight-close-icon{
        line-height:25px;
        width:25px;
    }
}
@media (max-width:575px){.gallery-subtitle{color:#fff;font-size:1.2em;line-height:1.2;text-align:center;}}

/*
                #share-buttons{
                    border:1px solid #59554E;
                    float:right;
                    font-size:1rem;
                    text-align:center;
                    padding:4px 8px;
                    position:relative;
                    z-index:100;
                }
                a.pinterest-share-btn, div.fb-share-btn {display:inline-block;}
                div.fb-share-btn a{margin-right:5px;}
                span[data-pin-log="button_pinit_bookmarklet"]{position:relative;top:2px;}
                span[data-pin-log="button_pinit_bookmarklet"]:hover{opacity:0.5;}
*/

/* about */
section#about-testimonials{padding-left:0;padding-right:0;border:1px solid rgba(0,0,0,.125);}
div.tests div{border-right:1px solid #59554E;height:100%;}
div.tests div:last-child{border-right:0;}
@media (max-width:575px){section#about-testimonials{border:0;}}

/* contact */
section#contact-form{border:0;}
iframe{width:100%;min-height:710px;margin-bottom:40px;}
p#connect a i{
    color:#59554E;
    display:inline-block;
    height:25px;
    line-height:1.6em;
    margin-bottom:10px;
    text-align:center;
    width:25px;
}
p#connect a i:hover{color:#A1C1BE;}

@media (min-width:768px){
    section#contact-form{border:1px solid rgba(0,0,0,.125);margin-bottom:48px;}
    section#contact-form iframe{margin-bottom:0;}
}

/* top link */
a#top-link{
    background-color:#E2E3D9;
    position:fixed;
    right:0;
    bottom:20px;
    font-size:0.8em;
    outline:none;
    padding:5px 10px 5px 5px;
    text-align:center;
    width:36px;
    z-index:99;
}
a#top-link:hover{background-color:#D0E0DE;color:#59554E;}
a#top-link:focus{outline:0;}

/* footer */
footer{background-color:#59554E;color:#E2E3D9;}
footer p{font-size:1.2em;}
footer div#copyright{background-color:#9b9995;font-size:0.5em;}
footer p#connect{font-size:.9em;font-weight:300;}
footer p#connect a i{color:#E2E3D9;}

/* footer links */
footer a, footer a:link, footer a:visited, footer a:hover, footer a:active{text-decoration:underline;}
footer a, footer a:link, footer a:visited, footer a:active{color:#E2E3D9;}
footer a:hover{color:#A1C1BE;}
footer p:first-child{line-height:1.25;}

@media (min-width:768px){
    footer p{font-size:1.4em;}
    footer p#connect{font-size:1em;}
}