/*   
Theme Name: LH Design Studio
Author: Sandlapper Creative
Author URI: http://www.sandlappercreative.com
Version: 1.0
*/

/*Reset*/
a,hr{padding:0}a,input[type=checkbox]{vertical-align:baseline}article,aside,figure,footer,header,hgroup,hr,img.aligncenter,nav,section{display:block}abbr,address,article,aside,audio,b,blockquote,body,caption,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0;margin:0;padding:0}td,td img{vertical-align:top}embed,img,object{max-width:100%;height:auto;}html{overflow-y:scroll}ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}a{font-size:100%;background:0 0;margin:0}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help}.alignleft,img.alignleft{float:left;margin:15px 15px 15px 0}alignright,img.alignright{float:right;margin:15px 0 15px 15px}.aligncenter,img.aligncenter{margin:15px auto}table{border-collapse:collapse;border-spacing:0;font:100%}th{vertical-align:bottom}td{font-weight:400}hr{height:1px;border:0;border-top:1px solid #ccc;margin:1em 0}input,select{vertical-align:middle}pre{white-space:pre-line;word-wrap:break-word}input,select,textarea{font:99% sans-serif}a:active,a:hover{outline:0}small{font-size:85%}strong,th{font-weight:700}sub,sup{font-size:75%;line-height:0;position:relative}sup{top:-.5em}sub{bottom:-.25em}code,kbd,pre,samp{font-family:monospace,sans-serif}.clickable,button,input[type=button],input[type=submit],label{cursor:pointer}button,input,select,textarea{margin:0}button{width:auto;overflow:visible}.ie7 img{-ms-interpolation-mode:bicubic}.ie6 html{filter:expression(document.execCommand("BackgroundImageCache",false,true))}.clearfix:after,.clearfix:before{content:"\0020";display:block;height:0;overflow:hidden}.clearfix:after{clear:both}.clearfix{zoom:1}.ie6 input,input[type=radio]{vertical-align:text-bottom}


/*Styles*/

body{}
body, select, input, textarea{ font-family: Raleway, Helvetica, Arial, sans-serif;}

a{ color: #D9B19A;}
a:hover, a:focus{ color: #585657;}
.button, button{ -webkit-appearance: none; display: inline-block; color: #fff; font-weight: 600; text-transform: uppercase; letter-spacing: .2em; text-decoration: none; background-color: #D9B19A; font-size: 14px; line-height: 14px; padding: 20px 45px; margin-top: 40px; border: none;}
.button:hover, button:hover, .button:focus, button:focus{ background-color: #333; color: #fff;}
.screen-reader{ position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;}
a, button, img, .gform-button{ transition: all .1s ease 0s;}

h1, h2, h3, h4, h5, h6{ line-height: normal; font-weight: 400;}
h1{ font-size: 48px;}
h2{ font-size: 36px; color: #D9B19A;}
h3{ font-size: 30px;}
h4{ font-size: 24px;}
h5{ font-size: 21px;}
h6{ font-size: 18px;}
.lede{ text-transform: lowercase; font-size: 21px; font-weight: 400;}

.page-wrap{}
.wrapper, .container{ width: 95%; max-width: 1400px; margin: 0 auto;}
.wrapper:after{ content: ""; display: table; clear: both;}

nav ul{ list-style: none; position: relative; float:left; margin:0; padding:0;}
nav ul a{ display: block; line-height: 32px; text-decoration: none;}
nav ul li{ position: relative; float: left; margin: 0; padding: 0;}
nav ul li.current-menu-item a, .nav ul li:hover > a{}
nav ul ul{ display: none; position: absolute; top: 100%; left: 0; padding: 0; text-align: left;}
nav ul ul li{ float: none; width: 200px;}
nav ul ul a{ line-height: 120%;}
nav ul ul ul{ top: 0; left: 100%;}
nav ul li:hover > ul{ display: block;}

.header{ position: fixed; z-index: 99; top: 0; width: 100%; transition: all .25s ease 0s;}
.header.scroll{ background-color: rgba(255,255,255,.95); border-bottom: 1px solid #f4f4f4; transition: all .25s ease 0s;}
.logged-in .header{ top: 32px;}
.header .container{ display: flex; justify-content: space-between; align-items: center;}
.header .logo{ max-width: 100px; opacity: 1; visibility: visible; margin-top: 20px;}
.header .scroll-logo{ width: 80px; opacity: 0; visibility: hidden; margin: 15px 0;}
.header .scroll-logo, .header.scroll .logo{ display: none; opacity: 0; visibility: hidden;}
.header.scroll .scroll-logo{ display: block; opacity: 1; visibility: visible;}
.header .nav{ font-size: 14px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700;}
.header .nav li{ margin-left: 50px;}
.header .nav a{ color: #fff;}
.header.scroll .nav a{ color: #585657;}
.header .nav li:hover > a, .header .nav li.current-menu-item a, .header.scroll .nav li:hover > a, .header.scroll .nav li.current-menu-item a{ color: #D9B19A !important;}
.rmp-container ul li a{ font-size: 16px !important; letter-spacing: .1em !important; text-transform: uppercase !important;}

.content{ color: #585657; font-size: 21px; line-height: 36px; font-weight: 300;}
.content p{ margin-top: 25px;}
.content ul{ list-style: disc; margin: 15px 0 0 30px;}
.content ol{ margin: 15px 0 0 30px;}
.content strong, .content b{ font-weight: 600;}
.meta{}

.sidebar{}

.navigation, .navigation ul{ padding: 0; margin: 0; font-size: 14px; text-transform: uppercase; font-weight: 400;}
.navigation li a, .navigation li a:hover, .navigation li.active a, .navigation li.disabled{ color: #fff; text-decoration: none;}
.navigation li{ display: inline;}
.navigation li a, .navigation li a:hover, .navigation li.active a, .navigation li.disabled{ background-color: #D9B19A; cursor: pointer; padding: 5px 10px;}
.navigation li a:hover, .navigation li.active a{ background-color: #585657; color: #fff;}

.search-form{}
.search-input{}
.search-submit{}

.footer{ margin: 100px 0; font-size: 14px; color: #585657;}
.footer .container{ display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #D9B19A; padding-top: 40px;}
.footer .credit{ font-size: 12px; margin-top: 10px;}
.footer .credit a{ color: #585657; text-decoration: none;}
.footer .credit a:hover{ color: #D9B19A;}
.footer .footer-right ul, .flex .contact-widget ul{ font-size: 18px; margin-left: 0;}
.footer .footer-right ul li{ display: inline-block; margin-left: 20px;}
.flex .contact-widget ul li{ display: inline-block; margin-right: 20px;}
.footer .footer-right ul li a, .flex .contact-widget ul li a{ background-color: #D9B19A; width: 35px; height: 35px; border-radius: 100px; color: #fff; display: flex; justify-content: center; align-items: center; text-decoration: none;}
.footer .footer-right ul li a:hover, .flex .contact-widget ul li a:hover{ background-color: #585657;}
.footer .footer-left br{ display: none;}

.video-wrapper{ position: relative; padding-bottom: 56.25%; height: 0;}
.video-wrapper iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.cta{ font-size: 16px; line-height: 16px; text-transform: uppercase; text-decoration: none; color: #D9B19A; letter-spacing: .2em; font-weight: 700; padding-bottom: 10px; border-bottom: 1px solid #D9B19A; margin-top: 30px; display: inline-block;}
.cta:hover{ color: #333; border-bottom: 1px solid #585657;}

.lity .lity-content{  max-width: 600px !important; padding: 40px 60px;}
.lity .lity-content::after{ box-shadow: none !important;}
.lity .lity-container{ background-color: #fff; overflow-y: scroll; padding-bottom: 40px;}
.lity .lity-content p{ margin-bottom: 25px; font-size: 16px; line-height: 26px;}
.lity .lity-content p:nth-of-type(1){ margin-top: 30px;}
.lity .lity-close{ position: absolute !important; top: 15px !important; right: 15px !important; color: #585657 !important; text-shadow: none !important;}

.gform_wrapper{ margin-top: 40px;}
.gform_body input, .gform_body textarea{ border: none; background: none; font-size: 16px !important; padding: 20px !important; background-color: rgba(206,179,154,.15);}
.gform_body label, .gform_body legend{ font-weight: 600 !important; text-transform: uppercase; font-size: 14px !important; letter-spacing: .1em;}
.gform_wrapper .gform_required_legend{ display: none !important;}


/* Home */

.hero{ background-size: cover; background-position: center center; position: relative;}
.hero-container{ background-color: rgba(0,0,0,.15); position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.home .hero:after{ content: ""; padding-bottom: 66.667%; display: block;}
.home .hero .hero-container:after{ content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.5) 100%); background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%); background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=0 );}
.home .hero .wrapper{ position: absolute; bottom: 60px; left: 0; right: 0; text-align: center; z-index: 9;}
.home .hero h1{ font-size: 170px; line-height: 85px; font-weight: 400; color: #D9B19A; text-transform: uppercase;}
.home .hero h1 span{ display: block; color: #fff; font-weight: 100;}
.home .hero h2{ font-size: 21px; text-transform: uppercase; font-weight: 700; letter-spacing: .2em; color: #fff; margin: 55px 0 50px;}
.home .hero .cta{ margin-top: 0;}
.home .hero .cta:hover{ color: #fff; border-bottom: 1px solid #fff;}
.home .intro{ margin: 70px 0 0;}
.home .intro:after{ clear: both; display: table; content: "";}
.home .intro .intro-container{ background-color: rgba(206,179,154,.15); width: 97.5%; float: right; padding: 60px 8% 60px 0; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center;}
.home .intro .intro-visual{ background-size: cover; background-position: center center; width: 40%; position: relative;}
.home .intro .intro-visual:before{ content: ""; display: block; padding-bottom: 90%;} 
.home .intro .intro-visual:after{ content: ""; display: block; width: 100%; height: 100%; border: 1px solid #e3d3c5; position: absolute; top: 20px; left: 20px; z-index: -1;}
.home .intro .intro-content{ width: 55%; font-size: 18px; line-height: 42px; font-weight: 400;}


/* Flex */

.flex .hero, .blog .hero, .single-post .hero{ color: #fff;}
.flex .hero:after{ content: ""; padding-bottom: 42%; display: block;}
.flex .hero .hero-container:after, .blog .hero .hero-container:after, .single-post .hero .hero-container:after{ content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: -moz-linear-gradient(top,  rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%); background: linear-gradient(to bottom,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#00000000',GradientType=0 );}
.flex .hero .wrapper, .blog .hero .wrapper, .single-post .hero .wrapper{ position: absolute; bottom: 60px; left: 0; right: 0; z-index: 9;}
.flex .hero h1, .blog .hero h1, .single-post .hero h1{ font-size: 48px; font-weight: 300;}
.flex .hero h1:after, .blog .hero h1:after, .single-post .hero h1:after{ content: ""; display: block; width: 200px; height: 1px; background-color: #D9B19A; margin: 20px 0;}
.flex .hero p, .blog .hero p, .single-post .hero .post-categories{ font-size: 18px;}
.flex .page-section{ margin-top: 100px;}
.flex .basic-container .wrapper{ padding-right: 20%; box-sizing: border-box;}
.flex .team-container h2, .flex .work-container h2{ text-align: center; font-size: 36px; font-weight: 400;}
.flex .team-container h2:after, .flex .work-container h2:after{ content: ""; display: block; width: 200px; height: 1px; background-color: #D9B19A; margin: 20px auto 60px;}
.flex .team-container .team-grid, .flex .work-container .projects-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px;}
.flex .team-container .single-team, .flex .work-container .single-project{ text-align: center;}
.flex .team-container .team-visual, .flex .work-container .project-visual{ background-size: cover; background-position: center center; border-radius: 10000px; margin-bottom: 20px; position: relative;}
.flex .team-container .team-visual:after, .flex .work-container .project-visual:after{ content: ""; display: block; padding-bottom: 100%;}
.flex .team-container .single-team .team-visual:before, .flex .work-container .single-project .project-visual:before{ content: "+"; background-color: rgba(206,179,154,.75); display: flex; justify-content: center; align-items: center; color: #fff; font-size: 200px; font-weight: 100; width: 80%; height: 80%; position: absolute; top: 10%; left: 10%; border-radius: 10000px; opacity: 0; visibility: hidden; transition: all .25s ease 0s;}
.flex .team-container .single-team .team-visual a, .flex .work-container .single-project .project-visual a{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.flex .team-container .single-team h3, .flex .work-container .single-project h3{ font-size: 26px; color: #D9B19A; font-weight: 400; margin-bottom: 5px;}
.flex .team-container .single-team h4, .team-lightbox h4, .flex .work-container .single-project h4{ font-size: 16px; font-weight: 600; margin-bottom: 5px;}
.flex .team-container .single-team h5, .team-lightbox h5{ font-size: 14px; font-weight: 400;}
.flex .team-container .single-team a, .flex .work-container .single-project h3 a{ text-decoration: none;}
.flex .team-container .single-team:hover .team-visual:before{ opacity: 1; visibility: visible; transition: all .25s ease 0s;}
.flex .team-container .single-team .team-visual.no-bio:before{ display: none;}
.flex .team-container .single-team:hover a{ color: #585657;}
.team-lightbox .lightbox-intro{ display: flex; align-items: center;}
.team-lightbox .lightbox-headshot{ width: 125px; height: 125px; background-size: cover; background-position: center center; margin-right: 30px;}
.team-lightbox h3{ font-size: 26px; font-weight: 400; margin-bottom: 3px;}
.team-lightbox h4{ margin-bottom: 5px;}
.flex .content-container .wrapper{ display: flex; justify-content: space-between;}
.flex .content-container .content-headlines{ width: 30%;}
.flex .content-container .content-content{ width: 65%;}
.flex .content-container .content-headlines h2, .flex .icon-container h2{ font-size: 36px; font-weight: 400; margin-top: 10px; color: #D9B19A;}
.flex .fwimg-container img{ margin: 0 auto; display: block;}
.flex .grid-container .image-grid{ display: grid; grid-template-columns: repeat(2,1fr); gap: 20px;}
.flex .grid-container .single-image{ background-size: cover; background-position: center center;}
.flex .grid-container .single-image:after{ display: block; content: ""; padding-bottom: 56.25%;}
.flex .callout-container{ display: flex; justify-content: space-between; align-items: stretch;}
.flex .callout-container .callout-visual{ background-size: cover; background-position: center center; width: 30%;}
.flex .callout-container .callout-content{ padding: 150px 5%; width: 70%; box-sizing: border-box;}
.flex .callout-container .callout-content h2{ font-size: 36px; font-weight: 400; margin: 10px 0 30px; color: #D9B19A;}
.flex .icon-container{ text-align: center;}
.flex .icon-container .icons-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 60px; margin-top: 60px;}
.flex .icon-container .icon-visual a, .flex .icon-container .icon-visual{ display: block; width: 100px; height: 100px; margin: 0 auto; display: flex; justify-content: center; align-items: center; margin-bottom: 30px;}
.flex .icon-container .icon-visual img{ max-width: 100%; max-height: 100%; width: auto; height: auto;}
.flex .icon-container .single-icon h3{ font-size: 18px; line-height: 24px; font-weight: 400;}
.flex .contact-container .wrapper{ display: flex; justify-content: space-between;}
.flex .contact-container .contact-content{ width: 30%; padding: 100px 0;}
.flex .contact-container .contact-visual{ width: 70%; background-size: cover; background-position: center center;}
.flex .contact-container .lede{ font-size: 16px;}
.flex .testimonial-container{ text-align: center; background-color: rgba(206,179,154,.15); padding: 120px 0; background-image: url(images/quote.png); background-size: 45px; background-position: top 60px center; background-repeat: no-repeat;}
.flex .testimonial-container .wrapper{ max-width: 900px;}
.flex .testimonial-container ul.slick-dots{ margin: 0; bottom: -110px !important;}
.flex .testimonial-container .slick-dots li button::before{ font-size: 15px !important; color: #fff; opacity: 1;}
.flex .testimonial-container .slick-dots li.slick-active button::before{ color: #D9B19A;}
.flex .testimonial-container blockquote{ font-size: 21px; line-height: 31px; font-weight: 400;}
.flex .testimonial-container .quote-source{ font-size: 14px; text-transform: uppercase; letter-spacing: .1em;}




/* Single Project */

.single-project .header .logo{ display: none; opacity: 0; visibility: hidden;}
.single-project .header .scroll-logo{ display: block; opacity: 1; visibility: visible;}
.single-project .header .nav a{ color: #585657;}
.single-project .header .nav li.work a{ color: #D9B19A;}
.single-project .content{ padding: 180px 0 100px;}
.single-project .content .wrapper{ max-width: 940px;}
.single-project .project-headings{ text-align: center; margin-bottom: 40px;}
.single-project .project-headings h1{ font-size: 48px; font-weight: 400;}
.single-project .project-headings h1:after{ content: ""; display: block; width: 200px; height: 1px; background-color: #D9B19A; margin: 20px auto;}
.single-project .project-headings h2{ font-size: 21px; font-weight: 600;}
.single-project .project-headings h3{ font-size: 18px; line-height: 28px; font-weight: 400;}
.single-project .project-description{ padding: 0 20px;}
.single-project .project-galleries{ max-width: 940px; border: 1px solid #D9B19A; padding: 20px; margin-bottom: 60px;}
.single-project .slick-dots{ display: none !important;}
.single-project .slide-thumb{ opacity: .5 !important; margin: 0 10px;}
.single-project .slide-thumb.slick-current{ opacity: 1 !important;}
.single-project .slick-dotted.slick-slider{ margin-bottom: 0 !important;}
.single-project .slider-nav{ margin-top: 20px;}
.single-project .slider-nav .slide-thumb{ background-size: cover; background-position: center center;}
.single-project .slider-nav .slide-thumb:after{ content: ""; padding-bottom: 100%; display: block;}
.single-project .slick-next{ right: -60px; width: 20px; height: 35px; background-image: url(images/arrow-right.png) !important; background-size: cover !important; background-position: center center;}
.single-project .slick-prev{ left: -60px; width: 20px; height: 35px; background-image: url(images/arrow-left.png) !important; background-size: cover !important; background-position: center center;}
.single-project .slick-prev::before, .single-project .slick-next::before{ content: "" !important;}


/* Blog */

.blog .hero:after, .single-post .hero:after{ content: ""; padding-bottom: 30%; display: block;}
.blog .content .wrapper{ padding: 60px 0 100px; box-sizing: border-box;}
.blog article{ padding-right: 25%; margin-bottom: 75px; padding-bottom: 60px; border-bottom: 1px solid #F8F4F0;}
.blog article .featuredimg{ background-size: cover; background-position: center center; position: relative; margin-bottom: 30px;}
.blog article .featuredimg:after{ content: ""; display: block; padding-bottom: 50%;}
.blog article .featuredimg:before{ content: "+"; background-color: rgba(206,179,154,.75); display: flex; justify-content: center; align-items: center; color: #fff; font-size: 200px; font-weight: 100; width: calc(100% - 40px); height: calc(100% - 40px); position: absolute; top: 20px; bottom: 20px; right: 20px; left: 20px; opacity: 0; visibility: hidden; transition: all .25s ease 0s;}
.blog article .featuredimg:hover:before{ opacity: 1; visibility: visible; transition: all .25s ease 0s;}
.blog article .featuredimg a{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.blog article h2{ font-size: 30px;}
.blog article h2:after{ content: ""; display: block; width: 200px; height: 1px; background-color: #D9B19A; margin: 20px 0;}
.blog article h2 a{ text-decoration: none; color: #585657;}
.blog article h2 a:hover{ color: #D9B19A;}
.blog article .post-categories, .single-post .post-categories{ margin: 0 0 15px;}
.blog article .post-categories li, .single-post .post-categories li{ display: inline-block;}
.blog article .post-categories li a, .single-post .post-categories li a{ text-decoration: none; font-weight: 400; margin-right: 20px; text-transform: uppercase; font-size: 14px; color: #585657; letter-spacing: .1em;}
.single-post .post-categories li a{ color: #fff;}
.blog article .post-categories li a:hover, .single-post .post-categories li a:hover{ color: #D9B19A;}
.blog article time, .single-post article time{ font-size: 12px; text-transform: uppercase; display: block; letter-spacing: .2em; font-weight: 400; margin-top: 30px;}
.single-post .entry-content{ padding: 60px 20% 100px 0;}
.single-post .entry-content iframe{ margin: 45px 0 15px;}
.single-post .related h2{ color: #585657; text-align: center;}
.single-post .related h2:after{ content: ""; display: block; width: 200px; height: 1px; background-color: #D9B19A; margin: 20px auto 35px;}
.single-post .related-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; text-align: center;}
.single-post .related-grid h3{ font-size: 21px; margin-top: 15px;}
.single-post .related-grid h3 a{ text-decoration: none;}
.single-post .related-visual{ background-size: cover; background-position: center center; position: relative;}
.single-post .related-visual:after{ content: ""; padding-bottom: 56.25%; display: block;}
.single-post .related-visual a{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}


/* Media queries */

@media (max-width: 960px) {
	.flex .hero:after, .blog .hero::after, .single-post .hero::after{ padding-bottom: 56.25%;}
	.flex .hero h1{ font-size: 36px;}
	.flex .team-container .team-grid{ grid-template-columns: repeat(2, 1fr);}
	.header .nav{ display: none;}
	.footer .container{ flex-direction: column; justify-content: center; text-align: center;}
	.footer .footer-right ul li{ margin: 30px 10px 0;}
	.home .hero h1{ font-size: 100px; line-height: 50px;}
	.home .intro{ margin: 0;}
	.home .intro .intro-container{ width: 100%; float: none;}
	.home .intro .intro-container{ flex-direction: column;}
	.home .intro .intro-visual{ width: 65%;}
	.home .intro .intro-content{ width: 65%; margin-top: 45px;}
	.home .footer{ margin-top: 0;}
	.home .footer .container{ border-top: none;}
	.flex .content-container .wrapper{ display: block;}
	.flex .content-container .content-content, .flex .content-container .content-headlines{ width: 100%;}
	.flex .team-container .team-grid, .flex .grid-container .image-grid, .flex .work-container .projects-grid{ grid-template-columns: repeat(2, 1fr);}
	.flex .basic-container .wrapper, .blog article, .single-post .entry-content{ padding-right: 0;}
	.flex .contact-container .wrapper{ flex-direction: column;}
	.flex .contact-container .contact-content{ width: 100%; padding: 0; text-align: center;}
	.flex .contact-container .contact-visual{ margin: 45px auto 0; width: 100%;}
	.flex .contact-container .contact-visual:after{ content: ""; display: block; padding-bottom: 100%;}
}

@media (max-width: 768px) {
	.home .hero:after, .flex .hero:after, .blog .hero::after, .single-post .hero::after{ padding-bottom: 100%;}
	.flex .team-container .team-grid, .flex .grid-container .image-grid, .flex .work-container .projects-grid{ grid-template-columns: repeat(1, 1fr); max-width: 400px; margin: 0 auto;}
	.home .intro .intro-visual, .home .intro .intro-content{ width: 85%;}
	.flex .callout-container{ flex-direction: column;}
	.flex .callout-container .callout-visual, .flex .callout-container .callout-content{ width: 100%;}
	.flex .callout-container .callout-content{ padding: 30px 5%;}
	.flex .callout-container .callout-visual:after{ content: ""; padding-bottom: 56.25%; display: block;}
	.flex .icon-container .icons-grid, .single-post .related-grid{ grid-template-columns: repeat(1,1fr);}
	.single-project .project-galleries{ width: 75%; margin: 0 auto 60px;}
}

@media (max-width: 600px) {
	.home .hero h1{ font-size: 72px; line-height: 36px;}
	.home .hero h2{ font-size: 18px;}
	.single-project .project-headings h1, .flex .hero h1, .blog .hero h1, .single-post .hero h1{ font-size: 36px;}
}

@media (max-width: 500px) {
	.home .hero:after{ padding-bottom: 125%;}
}