@charset "UTF-8";

/*
Theme Name: Sara Harris Photo 2021
Theme URI: https://saraharrisphotography.com/
Author: Consociate Media
Author URI: https://consociate.marketing
Text Domain: shp2021
*/

body { font-family: montserrat, sans-serif; font-weight: 400; text-align: left; font-size: 18px; background: #fff; padding-top: 80px }
body.home { padding-top: 0 }

.light { font-weight: 300 }
b, .strong { font-weight: 700 }
.caps {text-transform: uppercase }

h1, h2, h3, h4, h5 { font-weight: 400; color: #000; margin-bottom: 15px; font-family: 'Ovo', serif; margin-top: 0 }

h1 { font-size: 60px }
h2 { font-size: 52px }
h3 { font-size: 44px }
h4 { font-size: 36px }
h5 { font-size: 28px }
h6 { font-size: 24px }

p { margin: 0 0 1em 0 }

ul { list-style: inherit; padding-left: 25px }

.logo-header { margin-bottom: 50px }

.center { text-align: center }
.left { text-align: left }
.right { text-align: right }

.float-r { float: right}

.blue { background-color: #1A428A }

hr { border-top: 1px solid #000; border-bottom: 0 !important; margin: 1.75em 0; opacity: 1 !important }
.wp-block-separator.alignwide { width: 100% !important }

/* Navbar */

.navbar-brand { width: 225px; padding: 15px }
.bg-dark { background-color: #000 !important }
.navbar-expand-lg .navbar-nav .nav-link { font-size: 14px; font-weight: 200; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.25); margin: 0 15px; padding: 5px 0; letter-spacing: .05em; color: rgba(255,255,255,.75) }
.navbar-expand-lg .navbar-nav .nav-link:hover { color: #fff; border-bottom: 1px solid rgba(255,255,255,.5) }
.menu-item { line-height: 1.2; }

/* Home navbar background fade */
.home .bg-dark {
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.60) 100%);
	background-color: transparent !important
}
.home .navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,1);
}
/* Home navbar background scroll */
.home .bg-dark.navbar-fixed-top.scrolled {
  background-color: #000 !important;
  transition: background-color 800ms linear;
}
.home .bg-dark.navbar-fixed-top.scrolled .nav-link {
  color:#fff;
}
.navbar-fixed-top.scrolled .navbar-brand {
  width: 175px;
  transition: width 200ms ease
}

.dropdown-menu { padding-bottom: 0; background: #868686; color: #fff }
a.dropdown-item { color: #fff; text-transform: uppercase }
a.dropdown-item:hover { background-color: transparent }

.sub-menu-toggle { display: none } /* Hides strange +/- button from Navwalker dropdowns */

p { font-size: inherit }

.white { padding: 100px 0 75px 0 }

.block { background-color: #fff; padding: 35px; margin-bottom:25px; position: relative; z-index: 5 }

#intro { background: url("images/bg-fade-top.png") repeat-x center top; width: 100%; border-top: 5px solid #fff; text-align: center }

#about .block { position: relative; z-index: 6; padding-left: 0 }
.offset-pic { margin-left:-75px; margin-right: 50px; position: relative; z-index: 5 }

#latest { width: 100%; background-size: cover; padding: 150px 0; text-align: center }
#latest .block { padding: 50px 35px 25px ; border: 3px solid #000; background: rgba(255,255,255,.85) }
#latest .blurb { margin-bottom: 25px }
#latest a.btn { margin-bottom: -85px; display: inline-block; color: #fff }

footer { background: #000; color: #fff; padding: 50px; font-weight: 200; font-size: 18px; letter-spacing: .05em }
.social { display: inline; float: right; margin-right: 10px }

/* Pages */

#cta { background: url("/wp-content/uploads/2021/08/pic-waypoint-oysters-1920.jpg") center center no-repeat; 
	width: 100%; background-size: cover; padding: 0; border-bottom: 5px solid #fff }
#cta .overlay { background: rgba(0,0,0,.75); width: 100%; height: 100%; padding: 75px 0 }
#cta .vp-portfolio__items-style-fade .vp-portfolio__item-meta-title {
	font-size: 20px;  border: 1px solid #000; padding: 10px 15px 8px 15px; color: #000
}
#cta .vp-portfolio__item-img-wrap { max-height: 250px }
#cta [data-vp-layout=tiles] .vp-portfolio__item-wrap .vp-portfolio__item { border-radius: 25px; }
#cta h3 { color: #fff }

/* Blog */

.post { margin-bottom: 25px }
.post .title { font-family: 'Ovo', serif; font-size: 32px; line-height: 36px; }
.moretag { font-family: montserrat, sans-serif; font-weight: 700; font-style: italic; margin-top: 15px; display: block }

/* Links */

a { font-weight: 700; text-decoration: none; color: #c5bca9 }

#latest a, #latest a:hover { color: #000 }

.social a { color: #fff; font-size: 24px; margin: 0 3px }

.nf-form-fields-required { margin-bottom: 25px }

/* Images */

img { width: 100%; height: auto }

.wp-block-image { margin-bottom: 25px !important }

.vp-portfolio__item-img img {height: 100% !important }

/* Buttons */

.btn { font-size: 16px }
.btn-black { background: #000; color: #fff; padding: 10px 15px 10px 20px; border-radius:0; letter-spacing: .22em; text-transform: uppercase; font-weight: 200 }
.btn-black:hover { background: #fff; border: 1px solid #000; color: #000; }

/* Visual Porfolio */

#portfolio .row>* { padding-left:0; padding-right: 0 }
#portfolio .vp-portfolio__item-meta-title {
	letter-spacing: .15em; font-size: 27px; background-color: rgba(0,0,0,0.75); padding: 13px 20px 10px 20px; border: 1px solid #fff; text-transform: uppercase
}

/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/

/* Extra large devices (large desktops, 1200px and up)
 * No media query since this is the default in Bootstrap because it is "mobile first"
 */
@media (min-width: 1200px) {

}

/* Large devices (desktops, 992px and up) */
@media (max-width: 1199px) {

}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (max-width: 991px) {

}

/* Small devices (landscape phones, 544px and up) */
@media (max-width: 767px) {
	
	 /* Breaks WP BLOCK columns early w/ tweaks */
	.wp-block-columns { display:block } 
	.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:nth-child(2n) {
    margin-left:0 }
	
	.m-reverse {
        flex-direction: column-reverse;
    }
	
	.social { margin-right: 0; float: none }
	
	#cta .vp-portfolio__items-style-fade .vp-portfolio__item-meta-title { font-size: 20px }
}

/* Extra small devices (portrait phones, less than 544px) */
@media (max-width: 543px) {

}

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Custom media queries
*/

/* Set width to make card deck cards 100% width */
@media (max-width: 950px) {

}