/**** CSS USER AGENT RESET ****/
@import url("resetstyle.css");


/**** GRID LAYOUT ****/

header {
    grid-area:header;
  }

  #nav-logo {
    grid-area:nav-logo;
  }

  #logo {
    grid-area:logo;
  }  

  #main-nav {
    grid-area:main-nav;
  }

  #mobile-nav {
    grid-area:mobile-nav;
  }  
  
  #sidebar {
    grid-area:sidebar;
  }

  #hero {
    grid-area:hero;
  }

  #mid-hero {
    grid-area:mid-hero;
  }  
  
  #content {
    grid-area:content;
  }

  #content-wide {
    grid-area:content-wide;
  }  

  #galleries {
    grid-area:galleries;
  }  

  #galleries-editorial {
    grid-area:galleries-editorial;
  } 
  
  #galleries-weddings {
    grid-area:galleries-weddings;
  }   

  #galleries-portrait {
    grid-area:galleries-portrait;
  } 
  
  #galleries-pets {
    grid-area:galleries-pets;
  } 
  
  #galleries-cars {
    grid-area:galleries-cars;
  }  
  
  #galleries-landscapes {
    grid-area:galleries-landscapes;
  }   

  #services {
    grid-area:services;
  }   
  
  #services-photography {
    grid-area:services-photography;
  } 
 
  #services-video {
    grid-area:services-video;
  }  

  #services-ondemand {
    grid-area:services-ondemand;
  } 
 
  #services-proofs {
    grid-area:services-proofs;
  }  
  
  #services-rates {
    grid-area:services-rates;
  } 
 
  #services-avail {
    grid-area:services-avail;
  }  
  
  #services-all {
    grid-area:services-all;
  } 

  #newsletter {
    grid-area:newsletter;
  }
  
footer {
    grid-area:footer;
  }

  

/**** MEDIA QUERIES -- MOBILE, TABLET, DESKTOP ****/ 
/*** MOBILE -- 400px WIDE ***/
@media screen and (min-width:400px) { 
  .grid{
    display:grid;
    grid-gap:10px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: 
      "nav-logo mobile-nav mobile-nav"
      "hero hero hero"
      "content content content"
      "sidebar sidebar sidebar"
      "content-wide content-wide content-wide"
      "mid-hero mid-hero mid-hero" 
      "galleries galleries galleries"
      "galleries-editorial galleries-editorial galleries-editorial"
      "galleries-weddings galleries-weddings galleries-weddings"
      "galleries-portrait galleries-portrait galleries-portrait"
      "galleries-pets galleries-pets galleries-pets"
      "galleries-cars galleries-cars galleries-cars"
      "galleries-landscapes galleries-landscapes galleries-landscapes"
      "services services services"
      "services-photography services-photography services-photography"
      "services-video services-video services-video"
      "services-ondemand services-ondemand services-ondemand"
      "services-proofs services-proofs services-proofs"
      "services-rates services-rates services-rates"
      "services-avail services-avail services-avail"
      "newsletter newsletter newsletter"
      "footer footer footer";
  
  }
    
  #mobile-nav {
    display:grid;
  }
  
  #main-nav {
    display:none;
  }
    
  nav a::after {
    transition: none;
  }

  .menu-btn__burger {
    font-size: 50px;
    cursor: pointer;
    padding: 5%;
}


  /** HERO SLIDER STYLES **/
  .hero-slider {
    width: 100%;
    height: 40vh;
    overflow: hidden;
  }


  /** NEWSLETTER FORM STYLES **/
  .news {
    padding: 4.8px 0 9.6px 0;
    text-align: center;
  }

  input[type="email"] {
    display: inline-block;
    width: 80%;
    padding: 18px 36px;
    margin: 8px 0;
    border: 1px solid #222222;
    box-sizing: border-box;
    height: 70px;
    margin-top: 18px;
    border-radius: 20px;
    border: none;
    box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.15);
  }

  input,
  input::-webkit-input-placeholder {
    font-size: 16px;
    line-height: 3;
  }

  .bt {
    margin-left: -160px;
    font-size: 16px;
    display: inline-block;
    font-weight: 600;
    padding: 16px 32px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    background-color: #ab3f00;
    color: #fff;
  }


  /** SOCIAL ICONS **/
  .social-row {
    margin:auto;
  }

  .social-row img {
    display: inline;
    position:relative;
    left:18%;
    padding: 5px;
    width:10%;
  }


  /** IMG STYLES **/
  .footer-img{
    max-width:35%;
    padding:10px;
    margin:auto;
  }    

  .sidebar-img{
    max-width:100%;
    border-radius:24px;
  }

  /** CONTAINER STYLES **/
  #content {
    padding:0 3%;
  } 
  
  #sidebar {
    margin: 0 0 0 18%;
    padding: 2%;
  }


  /** TEXT STYLES **/
  .bottom-left {
    position: relative;
    bottom: 25%;
    padding: 0 5%;
  }


}



/*** TABLET PORTRAIT -- 800px WIDE ***/  
@media screen and (min-width:800px){
  .grid{
    display:grid;
    grid-gap:10px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: 
      "nav-logo mobile-nav mobile-nav mobile-nav"
      "hero hero hero hero"
      "sidebar sidebar sidebar sidebar"
      "content content content content"
      "content-wide content-wide content-wide content-wide"
      "mid-hero mid-hero mid-hero mid-hero"  
      "galleries galleries galleries galleries"    
      "galleries-editorial galleries-editorial galleries-editorial galleries-editorial"
      "galleries-weddings galleries-weddings galleries-weddings galleries-weddings"
      "galleries-portrait galleries-portrait galleries-portrait galleries-portrait"
      "galleries-pets galleries-pets galleries-pets galleries-pets"
      "galleries-cars galleries-cars galleries-cars galleries-cars"
      "galleries-landscapes galleries-landscapes galleries-landscapes galleries-landscapes"
      "services services services services"
      "services-photography services-photography services-photography services-photography"
      "services-video services-video services-video services-video"
      "services-ondemand services-ondemand services-ondemand services-ondemand"
      "services-proofs services-proofs services-proofs services-proofs"
      "services-rates services-rates services-rates services-rates"
      "services-avail services-avail services-avail services-avail"
      "newsletter newsletter newsletter newsletter"
      "footer footer footer footer";
  }
  
  #main-nav {
    display:none;
  }

  nav a::after {
    transition: none;
  }

  .menu-btn__burger {
    font-size: 50px;
    cursor: pointer;
    padding: 20px;
  }


  /** HERO SLIDER STYLES **/
  .hero-slider {
    width: 100%;
    height: 50vh;
    overflow: hidden;
  }


  /** NEWSLETTER FORM STYLES **/
  .news {
    padding: 4.8px 0 9.6px 0;
    text-align: center;
  }

  input[type="email"] {
    display: inline-block;
    width: 80%;
    padding: 18px 36px;
    margin: 8px 0;
    border: 1px solid #222222;
    box-sizing: border-box;
    height: 70px;
    margin-top: 18px;
    border-radius: 20px;
    border: none;
    box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.15);
  }

  input,
  input::-webkit-input-placeholder {
    font-size: 16px;
    line-height: 3;
  }

  .bt {
    margin-left: -160px;
    font-size: 16px;
    display: inline-block;
    font-weight: 600;
    padding: 16px 32px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    background-color: #ab3f00;
    color: #fff;
  }


  /** SOCIAL ICONS **/
  .social-row {
    margin:auto;
  }

  .social-row img {
    display: inline;
    position:relative;
    left:25%;
    padding: 10px;
    width:8%;
  }  

  /** IMG STYLES **/
  .footer-img{
    max-width:25%;
    padding:10px;
    margin:auto;
  }  

  .sidebar-img{
    max-width:100%;
    border-radius:24px;
  }


  /** CONTAINER STYLES **/
  #content {
    padding:0 3%;
  } 
  
  #sidebar {
    margin: 0 auto;
    padding: 2%;
  }


  /** TEXT STYLES **/
  .bottom-left {
    position: relative;
    bottom: 25%;
    padding: 0 5%;
  }

}



/*** TABLET LANDSCAPE & SMALL LAPTOP -- 1200px WIDE ***/  
@media screen and (min-width:1200px){
  .grid{
    display:grid;
    grid-gap:10px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows:auto;
    grid-template-areas: 
      "nav-logo main-nav main-nav main-nav"
      "hero hero hero hero"
      "sidebar sidebar content content"
      "content-wide content-wide content-wide content-wide"
      "mid-hero mid-hero mid-hero mid-hero"  
      "galleries galleries galleries galleries"
      "galleries-editorial galleries-editorial galleries-editorial galleries-editorial"
      "galleries-weddings galleries-weddings galleries-weddings galleries-weddings"
      "galleries-portrait galleries-portrait galleries-portrait galleries-portrait"
      "galleries-pets galleries-pets galleries-pets galleries-pets"
      "galleries-cars galleries-cars galleries-cars galleries-cars"
      "galleries-landscapes galleries-landscapes galleries-landscapes galleries-landscapes"
      "services services services services"
      "services-photography services-photography services-photography services-photography"
      "services-video services-video services-video services-video"
      "services-ondemand services-ondemand services-ondemand services-ondemand"
      "services-proofs services-proofs services-proofs services-proofs"
      "services-rates services-rates services-rates services-rates"
      "services-avail services-avail services-avail services-avail"
      "newsletter newsletter newsletter newsletter"
      "footer footer footer footer";
  }

  #main-nav {
    display:none;
  }
    
  nav a::after {
    transition: none;
  }

  nav ul{
    margin: 10px 0;
    padding: 20px 0;
    text-align: right;
    text-transform: uppercase;
  }
  
  nav li {
    display: inline;
    list-style-type:none;
    margin: 10px 0;
    padding: 20px;
  }
  
  nav a {
    color: #222222;
    text-decoration: none;
    font-size: 20px;
    cursor: pointer;
    position: relative;
  }

  nav a::after {
    content: '';
    position: absolute;
    height: 3px;
    left: 0;
    bottom: -6px;
    width: 0;
    background: #ab3f00;
    transition: width .2s;
  }

  nav a:hover::after {
    width: 100%;
  }

  .menu-btn__burger {
    font-size: 50px;
    cursor: pointer;
    padding: 20px;
  }


  /** HERO SLIDER STYLES **/
  .hero-slider {
    width: 100%;
    height: 60vh;
    overflow: hidden;
  }


  /** NEWSLETTER FORM STYLES **/
  .news {
    padding: 4.8px 0 9.6px 0;
    text-align: center;
  }
  
  input[type="email"] {
    display: inline-block;
    width: 60%;
    padding: 18px 36px;
    margin: 8px 0;
    border: 1px solid #222222;
    box-sizing: border-box;
    height: 70px;
    margin-top: 18px;
    border-radius: 20px;
    border: none;
    box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.15);
  }

  input,
  input::-webkit-input-placeholder {
    font-size: 16px;
    line-height: 3;
  }
  
  .bt {
    margin-left: -160px;
    font-size: 16px;
    display: inline-block;
    font-weight: 600;
    padding: 16px 32px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    background-color: #ab3f00;
    color: #fff;
  }


  /** SOCIAL ICONS **/
  .social-row {
    margin:auto;
  }

  .social-row img {
    display: inline;
    position:relative;
    left:25%;
    padding: 10px;
    width:8%;
  }


  /** IMG STYLES **/
  .footer-img{
    max-width:25%;
    padding:10px;
    margin:auto;
  }  

  .sidebar-img{
    max-width:100%;
    border-radius:24px;
  }


  /** CONTAINER STYLES **/
  #content {
    padding: 5% 10% 5% 5%;
  } 
  
  #sidebar {
    margin: 0 0 0 18%;
    padding: 2%;
  }


  /** TEXT STYLES **/
  .bottom-left {
    position: relative;
    bottom: 25%;
    padding: 0 5%;
  }

}



/*** SMALL LAPTOP -- 1400px WIDE ***/
@media screen and (min-width:1400px){
  .grid{
    display:grid;
    grid-gap:10px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows:auto;
    grid-template-areas: 
      "nav-logo main-nav main-nav main-nav main-nav main-nav"
      "hero hero hero hero hero hero"
      "sidebar sidebar sidebar content content content"
      ". content-wide content-wide content-wide content-wide ."
      "mid-hero mid-hero mid-hero mid-hero mid-hero mid-hero" 
      "galleries galleries galleries galleries galleries galleries" 
      "galleries-editorial galleries-editorial galleries-editorial galleries-weddings galleries-weddings galleries-weddings"
      "galleries-portrait galleries-portrait galleries-portrait galleries-pets galleries-pets galleries-pets"
      "galleries-cars galleries-cars galleries-cars galleries-landscapes galleries-landscapes galleries-landscapes"
      "services services services services services services"
      "services-photography services-photography services-video services-video services-ondemand services-ondemand"
      "services-proofs services-proofs services-rates services-rates services-avail services-avail"
      "newsletter newsletter newsletter newsletter newsletter newsletter"
      "footer footer footer footer footer footer";
  }
  
  #mobile-nav {
    display:none;
  }

  #main-nav {
    display:grid;
    margin: 1% 0 ;
  }
    
  nav ul{
    padding: 20px 0;
    margin: 20px 0;
    text-align: right;
    text-transform: uppercase;
  }
  
  nav li {
    display: inline;
    list-style-type:none;
    margin: 10px 0;
    padding: 20px;
  }
  
  nav a {
    color: #222222;
    text-decoration: none;
    font-size: 22px;
    cursor: pointer;
    position: relative;
  }

  nav a::after {
    content: '';
    position: absolute;
    height: 3px;
    left: 0;
    bottom: -6px;
    width: 0;
    background: #ab3f00;
    transition: width .2s;
  }

  nav a:hover::after {
    width: 100%;
  }


  /** HERO SLIDER STYLES **/ 
  .hero-slider {
    width: 100%;
    height: 85vh;
    overflow: hidden;
  }


  /** NEWSLETTER FORM STYLES **/
  .news {
    padding: 4.8px 0 9.6px 0;
    text-align: center;
  }
  
  input[type="email"] {
    display: inline-block;
    width: 40%;
    padding: 18px 36px;
    margin: 8px 0;
    border: 1px solid #222222;
    box-sizing: border-box;
    height: 70px;
    margin-top: 18px;
    border-radius: 20px;
    border: none;
    box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.15);
  }

  input,
  input::-webkit-input-placeholder {
    font-size: 16px;
    line-height: 3;
  }
  
  .bt {
    margin-left: -160px;
    font-size: 16px;
    display: inline-block;
    font-weight: 600;
    padding: 16px 32px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    background-color: #ab3f00;
    color: #fff;
  }


  /** SOCIAL ICONS **/
  .social-row {
    margin:auto;
  }

  .social-row img {
    display: inline;
    position:relative;
    left:35%;
    padding: 10px;
    width:5%;
  }  


  /** IMG STYLES **/
  .footer-img{
    max-width:15%;
    padding:10px;
    margin:auto;
  }

  .sidebar-img{
    max-width:100%;
    border-radius:24px;
  }


  /** CONTAINER STYLES **/
  #content {
    padding: 5% 10% 5% 5%;
  }
  
  #sidebar {
    margin: 0 0 0 18%;
    padding: 6% 0 0 0;
  }


  /** TEXT STYLES **/
  .bottom-left {
    position: relative;
    bottom: 25%;
    padding: 0 5%;
  }
  
}


/*** LARGE DESKTOP -- 1800px WIDE ***/
@media screen and (min-width:1800px){
  .grid{
    display:grid;
    grid-gap:10px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: 
      "nav-logo main-nav main-nav main-nav main-nav main-nav"
      "hero hero hero hero hero hero"
      "sidebar sidebar sidebar content content content"
      ". content-wide content-wide content-wide content-wide ."
      "mid-hero mid-hero mid-hero mid-hero mid-hero mid-hero" 
      "galleries galleries galleries galleries galleries galleries"
      "galleries-editorial galleries-editorial galleries-editorial galleries-weddings galleries-weddings galleries-weddings"
      "galleries-portrait galleries-portrait galleries-portrait galleries-pets galleries-pets galleries-pets"
      "galleries-cars galleries-cars galleries-cars galleries-landscapes galleries-landscapes galleries-landscapes"              
      "services services services services services services"
      "services-photography services-photography services-video services-video services-ondemand services-ondemand"
      "services-proofs services-proofs services-rates services-rates services-avail services-avail"
      "newsletter newsletter newsletter newsletter newsletter newsletter"
      "footer footer footer footer footer footer";
  }

  #mobile-nav {
    display:none;
  }
    
  #main-nav {
    display:grid;
    margin: 1% 0;
  }

  nav{
    vertical-align:middle;
  }
    
  nav ul{
    padding: 20px 0;
    margin: 30px 0;
    text-align: right;
    text-transform: uppercase;
  }
    
  nav li {
    display: inline;
    list-style-type:none;
    margin: 10px 0;
    padding: 20px;
  }
    
  nav a {
    color: #222222;
    text-decoration: none;
    font-size: 24px;
    cursor: pointer;
    position: relative;
  }
  
  nav a::after {
    content: '';
    position: absolute;
    height: 3px;
    left: 0;
    bottom: -6px;
    width: 0;
    background: #ab3f00;
    transition: width .2s;
  }
  
  nav a:hover::after {
    width: 100%;
  }


  /** HERO SLIDER STYLES **/ 
  .hero-slider {
    width: 100%;
    height: 85vh;
    overflow: hidden;
  }


  /** NEWSLETTER FORM STYLES **/
  .news {
    padding: 4.8px 0 9.6px 0;
    text-align: center;
  }
  
  input[type="email"] {
    display: inline-block;
    width: 40%;
    padding: 18px 36px;
    margin: 8px 0;
    border: 1px solid #222222;
    box-sizing: border-box;
    height: 70px;
    margin-top: 18px;
    border-radius: 20px;
    border: none;
    box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.15);
  }

  input,
  input::-webkit-input-placeholder {
    font-size: 16px;
    line-height: 3;
  }
  
  .bt {
    margin-left: -160px;
    font-size: 16px;
    display: inline-block;
    font-weight: 600;
    padding: 16px 32px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    background-color: #ab3f00;
    color: #fff;
  }


  /** SOCIAL ICONS **/
  .social-row {
    margin:auto;
  }

  .social-row img {
    display: inline;
    position:relative;
    left:35%;
    padding: 10px;
    width:5%;
  }


  /** IMG STYLES **/
  .footer-img{
    max-width:15%;
    padding:10px;
    margin:auto;
  }

  .sidebar-img{
    max-width:100%;
    border-radius:24px;
  }


  /** CONTAINER STYLES **/
  #content {
    padding: 5% 10% 5% 5%;
  }
  
  #sidebar {
    margin: 0 0 0 18%;
    padding: 2%;
  }


  /** TEXT STYLES **/
  .bottom-left {
    z-index: 1;
    position: relative;
    display: flex;
    justify-content: left;
    align-items: center;
  }

}



/*** BASIC STYLES ***/
  :root {
    /** COLORS **/
    --c-primary:#FFFFFF;
    --c-secondary:#88B8B1;
    --c-dark:#222222;
    --c-medium:#ab3f00;
    --c-light:#eaeaea;
    --c-background:#5E4D50;
  }
  
  body{
    margin:0;
    padding:0;
    font-family:'Roboto', sans-serif;
    color: var(--c-dark);
    overflow-x:hidden;
  }
  
  main > * {
    background-color:var(--c-primary);
    padding:0px;
    box-sizing:border-box;
  }
  
  .secondary {
    background-color:var(--c-primary);
  }


/** FONT STYLES / TEXT STYLES / IMG STYLES **/   
  header h1, footer {
    padding-top:30px;
    text-align:center;
  }

  h1{
    margin:0;
    padding:0;
    font-family:'Aleo', serif;
    font-weight:bold;
    font-size:48px;
    color: var(--c-light);
  }

  .h1-dark{
    margin:0;
    padding:0;
    font-family:'Aleo', serif;
    font-weight:bold;
    font-size:48px;
    text-align:center;
    color: var(--c-dark);
  }

  .h1-medium{
    margin:0;
    padding:0;
    font-family:'Aleo', serif;
    font-weight:bold;
    font-size:48px;
    color: var(--c-medium);
  }

  h2{
    margin:0;
    padding:0;
    font-family:'Aleo', serif;
    font-weight:bold;
    font-size:32px;
    color: var(--c-light);
  }

  .h2-dark{
    margin:0;
    padding:0;
    font-family:'Aleo', serif;
    font-weight:bold;
    font-size:32px;
    color: var(--c-dark);
    text-align:center;
  }

  .h2-dark-v2{
    margin:0;
    padding:0;
    font-family:'Aleo', serif;
    font-weight:bold;
    font-size:32px;
    color: var(--c-dark);
    text-align:left;
  }

  h3{
    margin:0;
    padding:0;
    font-family:'Aleo', serif;
    font-weight:normal;
    font-size:24px;
    color: var(--c-dark);
  }

  h4{
    margin:0;
    padding:0;
    font-family:'Aleo', serif;
    font-weight:normal;
    font-size:20px;
    color: var(--c-light);
  }

  .h4-dark{
    margin:0;
    padding:0;
    font-family:'Aleo', serif;
    font-weight:normal;
    font-size:20px;
    text-align:left;
    color: var(--c-dark);
  }

  .eyebrow {
    margin: 0;
    padding: 10px;
    font-family: 'Roboto', san-serif;
    text-transform: uppercase;
    font-size: 18px;
    text-align:center;
    color: #222222;
  }

  .center-text{
    text-align:center;
  }

  p{
    margin:0;
    padding:10px;
    font-family:'Roboto', san-serif;
    font-size:18px;
    color:var(--c-dark);
  }

  p a{
    text-decoration:none;
    color:#222222;
  }

  .p-bold{
    font-family:'Roboto', san-serif;
    font-size:18px;
    font-weight:bold;
  }

  .nav-img{
    max-width:100%;
  }

  .mid-hero-img{
    width:100%;
    height:55vh;
  }  

  .galleries-editorial{
    width: 100%;
    height: 100%;
    object-fit: cover;
  } 

  .galleries-weddings{
    width: 100%;
    height: 100%;
    object-fit: cover;
  } 

  .galleries-portrait{
    width: 100%;
    height: 100%;
    object-fit: cover;
  } 

  .galleries-pets{
    width: 100%;
    height: 100%;
    object-fit: cover;
  } 

  .galleries-cars{
    width: 100%;
    height: 100%;
    object-fit: cover;
  } 

  .galleries-landscapes{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  
/** CONTENT/CONTAINER STYLES **/
  #nav-logo {
    margin: 5% 0;
    padding: 2% 0;
  }

  #main-nav {
    padding:0;
  }

  #hero {
    padding:0;
  }

  #mid-hero {
    padding:0;
  }

  #content-wide {
    padding:30px;
  }

  #galleries {
    padding-top:30px;
    padding-bottom:10px;
  } 

  #galleries-editorial {
    padding:10px;
  }

  #galleries-weddings {
    padding:10px;
  }

  #galleries-portrait {
    padding:10px;
  }

  #galleries-pets {
    padding:10px;
  }

  #galleries-cars {
    padding:10px;
  }

  #galleries-landscapes {
    padding:10px;
  } 

  #newsletter {
    padding:5%;
    background-color:var(--c-light);
  }

  #services {
    padding-top:30px;
    padding-bottom:10px;
  }

  #services-photography {
    padding:10px;
  }

  #services-video {
    padding:10px;
  }

  #services-ondemand {
    padding:10px;
  }

  #services-proofs {
    padding:10px;
    margin-bottom:10%;
  }

  #services-rates {
    padding:10px;
    margin-bottom:10%;
  }

  #services-avail {
    padding:10px;
    margin-bottom:10%;
  }

  #services-all {
    padding:10px;
  }
 
  #nav-logo > div {
    margin-bottom:0;
  }

  #main-nav > div {
    margin-bottom:0;
  }

  #hero > div {
    margin-bottom:0;
  }

  #mid-hero > div {
    margin-bottom:0;
  }

  #sidebar > div {
    margin-bottom:20px;
  }  

  #content > div {
    margin-bottom:20px;
  }

  #content-wide > div {
    margin-bottom:20px;
  }

  #galleries > div {
    margin-bottom:10px;
  }

  #galleries-editorial > div {
    margin-bottom:10px;
  }

  #galleries-weddings > div {
    margin-bottom:10px;
  }

  #galleries-portrait > div {
    margin-bottom:10px;
  }

  #galleries-pets > div {
    margin-bottom:10px;
  }

  #galleries-cars > div {
    margin-bottom:10px;
  }

  #galleries-landscapes > div {
    margin-bottom:10px;
  }

  #services > div {
    margin-bottom:10px;
  }

  #services-photography > div {
    margin-bottom:10px;
  }

  #services-video > div {
    margin-bottom:10px;
  }

  #services-ondemand > div {
    margin-bottom:10px;
  }

  #services-proofs > div {
    margin-bottom:10px;
  }

  #services-rates > div {
    margin-bottom:10px;
  }

  #services-all > div {
    margin-bottom:10px;
  }

  #services-avail > div {
    margin-bottom:10px;
  }

  #newsletter > div {
    margin-bottom:10px;
  }


/** MOBILE DRAWER STYLES **/
 .sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 2;
    top: 0;
    right: 0;
    background-color: rgba(0,0,0,.85) ;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    text-align:center;
  }
  
  .sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 60px;
    font-weight: normal;
    text-transform: uppercase;
    color: #818181;
    display: block;
    transition: 0.3s;
  
  }
  
  .sidenav a:hover{
    color: #f1f1f1;
  }
  
  .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 65px;
    margin-left: 50px;
  }
  
  nav.navbar {
    position: relative;
    top: 0;
    width: 100%;
    height: 100px; 
  }
  
  .menu-btn {
    position: absolute;
    top: 0;
    right: 0;
  }

  
/** CAROUSEL STYLES **/
  body {
    background-color: #fff;
  }
    
  .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to bottom, rgba(14, 29, 51, 0.8), rgba(14, 29, 51, 0.2));
  }
  
  .hero-slider .carousel-cell {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
  
  .hero-slider .carousel-cell .inner {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    text-align: center;
  }
  
  .hero-slider .carousel-cell .inner .subtitle {
    font-family: "Roboto Slab", serif;
    font-size: 32px;
    line-height: 52px;
    font-weight: 200;
    font-style: italic;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 5px;
  }
  
  .hero-slider .carousel-cell .inner .title {
    font-family: "Aleo", sans-serif;
    font-size: 50px;
    line-height: 58px;
    text-transform: uppercase;
    font-weight:bold;
    letter-spacing: 3px;
    margin-bottom: 40px;
    color:#eaeaea;
  }
  
  .hero-slider .carousel-cell .inner .btn {
    border: 1px solid #fff;
    padding: 14px 18px;
    text-transform: uppercase;
    font-family: "Aleo", sans-serif;
    font-size: 16px;
    letter-spacing: 3px;
    color: #fff;
    text-decoration: none;
    transition: all 0.2s ease;
  }
  
  .hero-slider .carousel-cell .inner .btn:hover {
    background: #fff;
    color: #000;
  }
  
  .hero-slider .flickity-prev-next-button {
    width: 80px;
    height: 80px;
    background: transparent;
  }
  
  .hero-slider .flickity-prev-next-button:hover {
    background: transparent;
  }
  
  .hero-slider .flickity-prev-next-button .arrow {
    fill: white;
  }
  
  .hero-slider .flickity-page-dots {
    bottom: 30px;
  }
  
  .hero-slider .flickity-page-dots .dot {
    width: 20px;
    height: 20px;
    opacity: 1;
    background: none;
    border: 4px solid rgba(255, 255, 255, 0.5);;
    border-radius: 15px;
  }
  
  .hero-slider .flickity-page-dots .dot.is-selected {
    width: 20px;
    height: 20px;        
    background: #ab3f00;
    border: 0;
  }


/** SERVICE CARD STYLES **/
  .card-container {
    margin: 10px auto;
    padding: 10px;
  }

  .card-container:hover .card {
    opacity: .7;
    cursor: pointer;
    filter: grayscale(1);
  }

  .card-container .card {
    margin:0;
    width: 100%;
    box-shadow: 0 0 2px 2px rgba(0,0,0,.05);
    background: #FFF;
    -webkit-transition: .3s all ease;
    transition: .15s all ease;
    border-radius: 12px;
  }

  .card-container .card:hover {
    box-shadow: 0 0 8px 3px rgba(0,0,0,.15);
    transform: scale(1.025);
    opacity: 1;
    filter: grayscale(0);
    transition: .35s all ease;
  }

  .card-container .card img {
    width: 100%;
    padding: 0;
    margin: 0;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }

  .card-container .card .content {
    padding: 15px 20px;
  }

  .card-container .card h3 {
    font: 38px/42px 'Aleo', serif;
    padding: 0;
    margin: 0 0 10px;
    letter-spacing: -.075rem
  }

  .card-container .card p {
    color: #888;
    padding: 0;
    margin: 0;
    font: 400 18px/20px 'Roboto', sans-serif;
  }


  /** GALLERY PAGES & HEADER STYLES **/
  #hero-container {
    width: 100vw;
    height: 65vh;
    max-width: 100%;
    background: center / cover no-repeat url("./img/JH-Photo-Header-Coast.jpg");
    position: relative;
  }

  #hero-container-mid-hero {
    width: 100vw;
    height: 40vh;
    max-width: 100%;
    background: center / cover no-repeat url("./img/JH-photo-ImgBreak-2.jpg");
    position: relative;
  }

  #hero-container-about {
    width: 100vw;
    height: 65vh;
    max-width: 100%;
    background: center / cover no-repeat url("./img/JH-Photo-Header-About.jpg");
    position: relative;
  }

  #hero-container-contact {
    width: 100vw;
    height: 65vh;
    max-width: 100%;
    background: center / cover no-repeat url("./img/JH-Photo-Header-City.jpg");
    position: relative;
  }

  #hero-container-services {
    width: 100vw;
    height: 65vh;
    max-width: 100%;
    background: center / cover no-repeat url("./img/JH-Photo-Header-Services.jpg");
    position: relative;
  }

  #hero-container-editorial {
    width: 100vw;
    height: 60vh;
    max-width: 100%;
    background: top / cover no-repeat url("./img/JHP-Editorial-Cosplay.jpg");
    position: relative;
  }

  #hero-container-editorial-sm {
    width: 100vw;
    height: 45vh;
    max-width: 100%;
    background: top / cover no-repeat url("./img/JHP-Editorial-Cosplay.jpg");
    position: relative;
  }

  #hero-container-editorial-sm a{
    text-decoration:none;
  }

  #hero-container-editorial a{
    text-decoration:none;
  }

  #galleries-editorial a{
    text-decoration:none;
  }

  #hero-container-weddings {
    width: 100vw;
    height: 60vh;
    max-width: 100%;
    background: top / cover no-repeat url("./img/JHP-Weddings-1.jpg");
    position: relative;
  }

  #hero-container-weddings-sm {
    width: 100vw;
    height: 45vh;
    max-width: 100%;
    background: top / cover no-repeat url("./img/JHP-Weddings-1.jpg");
    position: relative;
  }

  #hero-container-weddings-sm a{
    text-decoration:none;
  }

  #hero-container-weddings a{
    text-decoration:none;
  }

  #galleries-weddings a{
    text-decoration:none;
  }

  #hero-container-portrait {
    width: 100vw;
    height: 60vh;
    max-width: 100%;
    background: center / cover no-repeat url("./img/JHP-Portrait-Lightbulb.jpg");
    position: relative;
  }

  #hero-container-portrait-sm {
    width: 100vw;
    height: 45vh;
    max-width: 100%;
    background: center / cover no-repeat url("./img/JHP-Portrait-Lightbulb.jpg");
    position: relative;
  }

  #hero-container-portrait-sm a{
    text-decoration:none;
  }

  #hero-container-portrait a{
    text-decoration:none;
  }

  #galleries-portrait a{
    text-decoration:none;
  }

  #hero-container-pets {
    width: 100vw;
    height: 60vh;
    max-width: 100%;
    background: center / cover no-repeat url("./img/JHP-Pets-Vinz.jpg");
    position: relative;
  }

  #hero-container-pets-sm {
    width: 100vw;
    height: 45vh;
    max-width: 100%;
    background: center / cover no-repeat url("./img/JHP-Pets-Vinz.jpg");
    position: relative;
  }

  #hero-container-pets a{
    text-decoration:none;
  }

  #hero-container-pets-sm a{
    text-decoration:none;
  }

  #galleries-pets a{
    text-decoration:none;
  }

  #hero-container-cars {
    width: 100vw;
    height: 60vh;
    max-width: 100%;
    background: center / cover no-repeat url("./img/JHP-Cars-Habanero-Jetta.jpg");
    position: relative;
  }

  #hero-container-cars-sm {
    width: 100vw;
    height: 45vh;
    max-width: 100%;
    background: center / cover no-repeat url("./img/JHP-Cars-Habanero-Jetta.jpg");
    position: relative;
  }

  #hero-container-cars a{
    text-decoration:none;
  }

  #hero-container-cars-sm a{
    text-decoration:none;
  }

  #galleries-cars a{
    text-decoration:none;
  }

  #hero-container-landscapes {
    width: 100vw;
    height: 60vh;
    max-width: 100%;
    background: center / cover no-repeat url("./img/JHP-Landscapes-MultnomahFalls.jpg");
    position: relative;
  }

  #hero-container-landscapes-sm {
    width: 100vw;
    height: 45vh;
    max-width: 100%;
    background: center / cover no-repeat url("./img/JHP-Landscapes-MultnomahFalls.jpg");
    position: relative;
  }

  #hero-container-landscapes-sm a{
    text-decoration:none;
  }

  #hero-container-landscapes a{
    text-decoration:none;
  }

  #galleries-landscapes a{
    text-decoration:none;
  }
  
  #hero-text {
    z-index: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 65vh;
  }

  #hero-text-galleries {
    z-index: 1;
    position: relative;
    display: flex;
    justify-content: left;
    align-items: center;
    padding-top:40%;
    padding-left:10%;
    height: 40vh;
  }
  
  #hero-text h1 {
    text-transform: capitalize;
    font-size: calc(2rem + 0.9vw);
    color: hsl(216, 33%, 97%);
  }
  
  #hero-overlay {
    background: #000;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    position: absolute;
    top: 0;
  }


  /** GALLERY PAGES MASONRY **/
  .masonry {
    --masonry-gap: 1rem;
    --masonry-brick-width: 550px;
    column-gap: var(--masonry-gap);
    column-fill: initial;
    column-width: var(--masonry-brick-width);
  }

  .masonry > * {
    break-inside: avoid;
    margin-bottom: var(--masonry-gap);
  }

  @supports(grid-template-rows: masonry) {
    .masonry {
      display: grid;
      gap: var(--masonry-gap);
      grid-template-rows: masonry;
      grid-template-columns: repeat(auto-fill, minmax(var(--masonry-brick-width), 1fr));
      align-tracks: stretch;
    }

    .masonry > * {
        margin-bottom: initial;
    }
  }

  .masonry {
    background: #ffffff;
    padding: 2rem;
  }
  
  .brick:nth-child(4n - 7) {
    background: #5A363A;
  }

  .brick:nth-child(4n - 6) {
    background: #82212C;
  }

  .brick:nth-child(4n - 5) {
    background: #3A3E41;
  }

  .brick:nth-child(4n - 4) {
    background: #292A2B;
  }

  .brick {
    color: #ffffff;
    padding:0;
  }
  

  /** FORM STYLES **/
  input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
  }
  
  input[type=submit] {
    background-color: #82212C;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  input[type=submit]:hover {
    background-color: #222222;
  }
  
  .container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
  }