body{min-height:100vh;background-color:white;font-size:16px;background-color:#fff;}
body, div, a, section, p, li{font-family:poppins;}
a, a:hover{color:#DCC5C1;}
a:hover{text-decoration:underline;}
button{background-color:#DCC5C1;padding:10px 20px;color:white;border-radius:10px;border:none;font-weight:700;font-size:16px;}
button a, button a:hover{color:white;}

h1, h2, h3, h4, h5 , h6{font-family:poppins;color:#666;margin-bottom:1em;}
h2{font-weight:bold;font-size:45px;color:#46443B;letter-spacing:0;text-align:center;position:relative;padding-top:30px}
h2:before{content:'';border-radius:50%;position:absolute;display:block;width:15px;height:15px;top:0px;left:calc(50%);background-color:#DCC5C1;}
h3{font-weight:Bold;font-size:18px;color:#666666;letter-spacing:0;text-align:center;}

.container{max-width:1280px;margin:0 auto;text-align:left;padding:0 0px;}

section{text-align:center;min-height:400px;padding:100px 2% 50px 2%}
section:after{content:'';display:table;clear:both}

header{border-top:solid 5px#DCC5C1;padding:5px 0;background-color:rgba(255, 255, 255, .8);transition:all 0.5s ease;}
header .uk-logo img{transition:all 0.5s ease;}
header a{transition:all 0.5s ease;}

.uk-logo{padding:20px 50px; max-width: 300px;}
.uk-navbar-container:not(.uk-navbar-transparent){background:transparent;}
.uk-button-primary {background-color: #637F7B !important; margin:7px}
header.uk-sticky-fixed.uk-active{opacity:1;box-shadow:0 5px 0px rgb(46 41 32 / 20%);padding:0px 0;}
header.uk-sticky-fixed.uk-active .uk-logo img{width:125px;}

.uk-navbar-nav>li{margin:0 20px}
.uk-navbar-nav li>a{font-family:Poppins;font-weight:700;font-size:12px;color:#777 !important;letter-spacing:.02em;margin:0px 10px;padding:0px;text-align:center;min-height:75px;position:relative }
nav li> a:before{content:'';display:block;position:absolute;left:0px;right:calc(100%);bottom:25px;height:3px;background-color:#DCC5C1;-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out;-webkit-transition-property:right;transition-property:right;}
nav li>a:hover::before{right:0px;}
nav li>a:active::before{right:0px;transition:0s}

#offcanvas-usage {background-color:rgba(255, 255, 255, .9); width:156px;padding:50px 20px; box-shadow:0px 0px 10px rgba(0,0,0,.3);}
#offcanvas-usage li a {font-weight: 700;border-bottom: solid 2px #ccc; line-height: 32px;color:#666}
.uk-offcanvas-close svg {color:black; width: 20px;}

#nav-hamburger {position: absolute; right: 20px;top:0px}

section#hero, section#contact{background-color:#C4D5D3; color:#777}
section#hero .container{max-width:760px;font-size:18px;letter-spacing:0;line-height:25px;}

#hero-photo {background:#AEC7CB;border:3px solid #FFFFFF;}
#hero-iframe {max-width:570px; max-height: 315px; width:100%; height: 350px;}


#pwyw-pricing{background-color:#E1E0DD;}
.callout{background-color:white;border:solid 2px #DCC5C1;border-radius:15px;padding:4%;width:60%;margin:50px auto}
.callout h3{font-size:22px;}
footer{font-weight:Bold;text-align:center;padding:50px 0 100px 0;font-size:23px;color:#9DB0B4;letter-spacing:0;line-height:29px;}

ul.portraitsession{display:flex;flex-wrap:wrap;padding:0px}
ul.portraitsession li{height:20vh;list-style:none;flex-grow:1;margin:20px;}
ul.portraitsession li:last-child{flex-grow:10;}
ul.portraitsession img{max-height:100%;min-width:100%;object-fit:cover;object-position:top;vertical-align:bottom;}
ul.portraitsession li a:hover img{transform: scale(1.05); -webkit-transition: all .2s ease-in-out; 
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;}
ul.portraitsession li:last-child img{object-fit:contain;object-position:left;}



@media (max-aspect-ratio:1/1)
{
  ul.portraitsession li{height:30vh;}
}
@media (max-height:480px)
{
  ul.portraitsession li{height:80vh;}
}
@media (max-aspect-ratio:1/1) and (max-width:480px)
{
  ul.portraitsession{flex-direction:row;}
  ul.portraitsession li{height:auto;width:50%;}
  #hero-iframe {max-width:100%; max-height: 315px; width:100%; height: 170px;}
}




@media only screen and (max-width:1024px) {
  .uk-navbar-nav>li { margin: 0 7px;}
  .uk-logo { padding: 10px 50px
;
}
  h2 {font-size:34px}
  footer {font-size: 16px;}
}

@media only screen and (max-width:900px) {
  section {padding-top: 17%;}
  ul.portraitsession img{object-fit:contain; object-position: center;}
  ul.portraitsession li:last-child img{object-position:center;}

  h2 {font-size:28px}
  footer {font-size: 14px;}
  header .uk-logo img{width:100px;}

}