/*
Theme Name: 
Theme URI: 
Description: Bespoke Theme developed by Adrian @ AlphaWebServices.net
Author: Adrian Jones
Version: 1.0
License: 
License URI: 
Tags: 
*/

@font-face {
    font-family: 'Maxular Rx';
    src: url('fonts/Maxular-Rx-Regular.eot'); /* IE9 Compat Modes */
    src: url('fonts/Maxular-Rx-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Maxular-Rx-Regular.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Maxular-Rx-Regular.woff') format('woff'), 
         url('fonts/Maxular-Rx-Regular.ttf') format('truetype'); /* Safari, Android, iOS */
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'Hero New Extra Bold';
    src: url('fonts/Hero-New-ExtraBold.otf');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'Cocogoose';
    src: url('fonts/Cocogoose-Pro-trial.ttf');
    font-style: normal;
    font-weight: normal;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

*		{margin: 0; border: 0; padding: 0; outline: 0; box-sizing: border-box;}
p, a, small, li, textarea, input, td, tr, .gform_confirmation_message, label, div, .uabb-adv-accordion-content p, span {font-family: 'Maxular Rx';}
h1, h2, h3, h4, h5		{font-family: 'Hero New Extra Bold';}
.clear		{clear: both;}
a		{text-decoration: none;}
html		{overflow-y: scroll; background-color: #fff;}
ul		{list-style-type: none;}
img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
.alignright {float:right; }
.alignleft {float:left; }
.aligncenter {display: block; margin-left: auto; margin-right: auto}
img         {max-width: 100%; max-height: 100%;}

.wrapper        {width: 1400px; margin: 0 auto; position: relative;}
.wrapper:after  {content: ""; display: block; clear: both;}

.section        {padding: 60px 0;}
.centered       {text-align: center;}
.flex			{display: flex;}

#mobile-top		{display: none; background: #fff; padding: 15px; position: relative;}
#mobile-top:after	{content: ""; display: block; clear: both;}
#mobile-top .logo	{float: left; max-height: 30px;}
#mobile-top .menu-btn 			{float: right; cursor: pointer; transition: all 0.5s ease-out; margin-top: 5px;}
#mobile-top .menu-btn .btn-line {width: 28px; height: 3px; margin: 0 0 5px 0; background: #9e005d; transition: all 0.5s ease-out;}
#mobile-top .menu-btn .btn-line:nth-child(2)	{margin-left: 5px;}
#mobile-top .menu-btn.close 	{transform: rotate(180deg); margin-top: 0;}
#mobile-top .menu-btn.close .btn-line:nth-child(1) 	{transform: rotate(45deg) translate(5px, 5px);}
#mobile-top .menu-btn.close .btn-line:nth-child(2) 	{opacity: 0;}
#mobile-top .menu-btn.close .btn-line:nth-child(3) 	{transform: rotate(-45deg) translate(7px, -6px);}
#mobile-top .mobile-menu		{position: absolute; top: 100%; right: 15px; background: rgba(255,255,255,0.8); width: 90%; padding: 30px; z-index: 999;}
#mobile-top .mobile-menu li		{display: block;}
#mobile-top .mobile-menu li + li	{margin-top: 20px;}
#mobile-top .mobile-menu li a	{display: inline-block; color: #9e005d; font-size: 20px; text-transform: uppercase; letter-spacing: 1px; padding-left: 15px;}
#mobile-top .mobile-menu li.current-menu-item		{}
#mobile-top .mobile-menu li.current-menu-item a		{background: #9e005d; padding: 12px 15px 10px; border-radius: 20px; -webkit-border-radius: 20px; color: #0fff95;}

#header.home			{height: 100vh; background: #9e005d;}
#header.home > div		{height: 100%;}
#header.home .menu		{padding-top: 80px;}
#header.home .menu > li	{padding: 8px 0;}
#header.home .menu > li > a	{color: #fff; font-size: 20px; text-transform: uppercase; letter-spacing: 1px; padding-top: 2px;}
#header.home .menu > li:hover > a		{color: #0fff95; border: 1px solid #0fff95; border-width: 0 1px; padding: 2px 5px 0;}
#header.home .middle	{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 530px;}
#header.home .middle h3	{color: #fff; font-size: 46px; line-height: 0.83; margin-top: 25px;}
#header.home .middle h3 span	{color: #0fff95;}
#header.home p.corner-text		{font-size: 18px; color: #fff; line-height: 1.44; letter-spacing: 0.9px; width: 400px; text-align: left; border-bottom: 1px solid #0fff95; position: absolute; bottom: 175px; right: -175px; transform: rotate(90deg);}

#header.inner			{}
#header.inner .flex		{height: 100px; justify-content: space-between; align-items: center;}
#header.inner .logo		{width: 260px;}
#header.inner .menu		{}
#header.inner .menu > li	{display: inline-block;}
#header.inner .menu > li + li		{margin-left: 30px;}
#header.inner .menu > li > a		{text-transform: uppercase; color: #9e005d; letter-spacing: 1px; font-size: 20px;}
#header.inner .menu > li.active > a	{background: #9e005d; color: #0fff95; padding: 14px 20px 12px; border-radius: 30px; -webkit-border-radius: 30px;}
#header.inner .menu > li:hover > a	{color: #0fff95;}

.home-top				{height: 600px; background: #770238; position: relative;}
.home-top .col			{width: 50%;}
.home-top .col.man		{position: relative;}
.home-top .col.man:after	{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; mix-blend-mode: multiply; background-blend-mode: multiply; background-image: linear-gradient(to bottom, #0fff95, #0fff95);}
.home-top .mid-content	{position: absolute; top: 50%; left: 0; width: 100%; transform: translatey(-50%);}
.home-top .mid-content .flex > div			{width: 50%; text-align: left;}
.home-top .mid-content .flex > div + div	{padding-left: 75px;}
.home-top .mid-content h2		{font-size: 50px; line-height: 1.3; color: #fff; margin-bottom: 40px;}
.home-top .mid-content p		{font-size: 18px; line-height: 1.44; letter-spacing: 0.9px; color: #fff;}

.whatwedo				{background: #132526; height: 950px;}
.whatwedo > div			{height: 100%;}
.whatwedo > div h2		{width: 450px; color: #fff; font-size: 50px; line-height: 1.3; border-bottom: 1px solid #0fff95; position: absolute; top: 192px; left: -200px; transform: rotate(270deg);}
.whatwedo .grid			{height: 100%; margin-left: 120px;}
.whatwedo .grid > div	{height: 100%;}
.whatwedo .grid .col.colleft	{width: 28%; display: flex; align-items: center; margin-right: 20px;}
.whatwedo .grid .col.colleft > div	{width: 100%; height: 72%; position: relative;}
.whatwedo .grid .col.colright	{width: 70%; display: flex; flex-direction: column;}
.whatwedo .grid .col.colright > div		{height: 33%; display: flex;}
.whatwedo .grid .col.colright > div + div	{height: 67%; margin-top: 20px;}
.whatwedo .grid .col.colright .row1 > div	{width: 35%; margin-right: 20px; height: 100%;}
.whatwedo .grid .col.colright .row1 > div + div		{width: 65%; margin: 0;}
.whatwedo .grid .col.colright .row2 > div	{width: 60%; margin-right: 20px; height: 100%;}
.whatwedo .grid .col.colright .row2 > div + div		{width: 40%; margin: 0; height: 50%;}
.whatwedo .grid .service		{position: relative; overflow: hidden;}
.whatwedo .grid .service:after	{content: ""; display: block; position: absolute; height: 15px; width: 100%; left: 0; bottom: 0; background: rgba(15,255,149,0.85); transition: all 0.5s;}
.whatwedo .grid .service .mob-img	{display: none;}
.whatwedo .grid .service .overlay	{padding: 25px; color: #104547; background: rgba(15,255,149,0.85); position: absolute; left: 0; right: 0; bottom: -100%; transition: all 0.5s;}
.whatwedo .grid .service .overlay .service-title	{font-family: 'Maxular Rx'; text-transform: uppercase; font-size: 18px; line-height: 1.9; letter-spacing: 1px; color: #fff; margin-bottom: 25px; position: relative; padding-left: 30px;}
.whatwedo .grid .service .overlay .service-title:before		{content: ""; display: block; position: absolute; height: 20px; width: 20px; left: 0; top: 2px; background: url(images/title-bg.png) no-repeat center; background-size: contain;}
.whatwedo .grid .service .overlay h3		{font-size: 26px; line-height: 1.3; margin-bottom: 15px;}
.whatwedo .grid .service .overlay p			{font-size: 18px; line-height: 1.44; margin-bottom: 15px;}
.whatwedo .grid .service .overlay a			{display: inline-block; font-family: 'Hero New Extra Bold'; background: #9e005d; color: #fff; border-radius: 30px; -webkit-border-radius: 30px; font-size: 20px; line-height: 1.2; font-weight: 800; padding: 12px 30px;}
.whatwedo .grid .service:hover .overlay		{bottom: 0;}
.whatwedo .grid .service:hover:after		{opacity: 0;}
.whatwedo .grid .service1 .overlay,
.whatwedo .grid .service3 .overlay			{background: rgba(158,0,93,0.85);}
.whatwedo .grid .service1:after,
.whatwedo .grid .service3:after			{background: rgba(158,0,93,0.85);}
.whatwedo .grid .service1 .overlay h3,
.whatwedo .grid .service1 .overlay p,
.whatwedo .grid .service3 .overlay h3,
.whatwedo .grid .service3 .overlay p		{color: #fff;}
.whatwedo .grid .service1 .overlay a,
.whatwedo .grid .service3 .overlay a		{background: #0fff95;}

.about .top-row			{height: 950px; position: relative;}
.about .top-row .flex	{height: 100%;}
.about .top-row .col	{width: 50%; position: relative;}
.about .top-row .colleft img	{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.about .top-row .colright		{background: #0fff95;}
.about .top-row .middle			{position: absolute; width: 100%; left: 0; top: 50%; transform: translatey(-50%);}
.about .top-row .middle h1		{margin-left: 625px; font-size: 100px; line-height: 1.15; color: #104547; margin-bottom: 40px;}
.about .top-row .middle .flex > div		{width: 50%;}
.about .top-row .middle .flex .text		{padding-left: 75px;}
.about .top-row .middle .flex .text p	{font-size: 18px; line-height: 1.44; color: #104547;}
.about .top-row .middle .flex .text p + p	{margin-top: 20px;}
.about .people			{padding: 60px 0; background: #f4faff;}
.about .people h2		{font-size: 50px; line-height: 1.3; color: #9e005d; margin-bottom: 40px;}
.about .people .flex	{justify-content: space-between;}
.about .people .flex > div		{width: 24%; text-align: left; opacity: 0;}
.about .people .flex > div img	{display: block; margin-bottom: 20px;}
.about .people .flex > div h3	{font-size: 26px; line-height: 1.3; color: #104547; margin-bottom: 20px;}
.about .people .flex > div p	{font-size: 18px; line-height: 1.44; color: #104547;}

.contact .left-col		{width: 50%; padding: 75px 0;}
.contact .left-col h1	{font-size: 88px; line-height: 1.15; color: #104547; margin-bottom: 25px;}
.contact .left-col p	{font-size: 18px; line-height: 1.44; color: #104547;}

#location			{height: 550px; background: #9e005d; position: relative;}
#location .map		{position: absolute; top: 0; right: 0; bottom: 0; width: 60%;}
#location .flex		{align-items: center; height: 100%;}
#location .text		{width: 450px;}
#location .text h2	{font-size: 50px; font-weight: 800; color: #fff; line-height: 1.3;}
#location .text p	{font-size: 18px; letter-spacing: 1px; line-height: 1.4; color: #fff; margin-top: 25px; text-transform: uppercase;}
#location .text a	{color: #fff;}

#contact			{padding: 75px 0; background: #0fff95;}
#contact .form h2	{font-family: 'Cocogoose'; font-size: 50px; color: #9e005d; line-height: 1.3; letter-spacing: 2.5px; margin-bottom: 25px;}
#contact .form .gform_wrapper .gform_footer		{padding: 0; margin: 25px 0 0; text-align: center;}
#contact .form .gform_wrapper .gform_footer .gform_image_button		{width: 260px; transition: transform .2s;}
#contact .form .gform_wrapper .gform_footer .gform_image_button:hover		{transform: scale(1.1);}

.logo-carousel			{padding-top: 75px; background: #f5fafe;}
.logo-carousel h3		{font-size: 50px; line-height: 0.76; color: #9e005d; margin-bottom: 40px;}
.logo-carousel .owl-wrap		{margin: 0 100px;}
.logo-carousel .owl-carousel .owl-stage	{display: flex; align-items: center;}
.logo-carousel .owl-carousel .owl-nav button			{padding: 0; margin: 0; height: 50px; width: 28px; position: absolute; top: 50%; transform: translatey(-50%);}
.logo-carousel .owl-carousel .owl-nav button.owl-prev	{float: left; background: url(images/prev.png) no-repeat center; background-size: contain; left: -70px;}
.logo-carousel .owl-carousel .owl-nav button.owl-next	{float: right; background: url(images/next.png) no-repeat center; background-size: contain; right: -70px;}
.logo-carousel .owl-carousel .owl-nav button span		{display: none;}
.logo-carousel .owl-carousel .owl-nav:after		{content: ""; display: block; clear: both;}
.logo-carousel .reviews		{margin-top: 75px; padding: 90px 0; background: #0f4547; overflow: hidden; min-height: 310px;}
.logo-carousel .reviews .speech	{position: absolute; left: -185px; top: -38px; height: 190px; max-height: none;}
.logo-carousel .reviews .flex	{display: flex; justify-content: space-between; align-items: flex-end;}
.logo-carousel .reviews .flex .review		{padding-left: 15%; width: 80%;}
.logo-carousel .reviews .flex .review p		{color: #fff; font-size: 18px; line-height: 1.44;}
.logo-carousel .reviews .flex .client		{width: 15%; position: relative;}
.logo-carousel .reviews .flex .client p.name	{color: #0fff95; margin-bottom: 10px;}
.logo-carousel .reviews .flex .client p.role	{color: #fff; font-size: 14px;}
.logo-carousel .reviews .flex .client:before	{content: ""; display: block; position: absolute; width: 300px; border-top: 1px solid #0fff95; transform: rotate(90deg); left: -165px; top: -110px;}

#footer				{background: #9e005d; padding: 60px;}
#footer .flex		{justify-content: space-between; align-items: flex-end;}
#footer .left img	{width: 260px;}
#footer .left p		{font-size: 16px; line-height: 1.5; letter-spacing: 0.9px; color: #fff; text-transform: uppercase; margin-top: 25px;}
#footer .left p span	{color: #0fff95;}
#footer .left a		{color: #fff;}
#footer .right p	{font-size: 18px; line-height: 1.4; letter-spacing: 1px; color: #fff; margin-bottom: 15px;}
#footer .right ul li		{display: inline-block; vertical-align: middle;}
#footer .right ul li + li	{margin-left: 30px;}
#footer .right ul li a		{color: #fff;}
#footer .right ul li i		{font-size: 50px;}
#footer .right ul li a:hover	{color: #0fff95;}

.blog-index .blog-grid		{display: flex; flex-wrap: wrap; justify-content: space-between;}
.blog-index .blog-grid .post		{width: 23.5%; margin-bottom: 50px;}
.blog-index .blog-grid .post .thumb-img	{margin-bottom: 15px;}
.blog-index .blog-grid .post .thumb-img:before	{content: ""; display: block; padding-top: 66%;}
.blog-index .blog-grid .post .thumb-img:hover	{opacity: 0.7;}
.blog-index .blog-grid .post h2		{color: #104547; font-size: 26px; line-height: 1.3; margin-bottom: 10px;}
.blog-index .blog-grid .post p		{color: #104547; font-size: 18px; line-height: 1.44; margin-bottom: 15px;}
.blog-index .blog-grid .post a.more-button		{display: inline-block; font-family: 'Hero New Extra Bold'; background: #9e005d; color: #fff; border-radius: 30px; -webkit-border-radius: 30px; font-size: 20px; line-height: 1.2; font-weight: 800; padding: 12px 30px;}
.blog-index .blog-grid .post a.more-button:hover		{background: #0fff95;}

.blog-single				{padding: 75px 0;}
.blog-single .flex			{display: flex;}
.blog-single .left-col		{width: 50%;}
.blog-single .left-col h1	{font-size: 88px; line-height: 1.15; color: #104547; margin-bottom: 25px;}
.blog-single .left-col p	{font-size: 18px; line-height: 1.44; color: #104547;}
.blog-single .right-col		{width: 50%; margin-left: 100px;}

.portfolio-head				{background: #0fff95; padding: 60px 0;}
.portfolio-head .flex		{align-items: center;}
.portfolio-head .flex > h2		{font-size: 88px; line-height: 1.15; color: #104547; width: 50%;}
.portfolio-head .flex .right	{width: 50%; border: 1px solid #707070; border-width: 1px 0; overflow: hidden; z-index: 99;}
.portfolio-head .flex .project-list		{position: relative; height: 900px;}
.portfolio-head .flex .project-list .mCSB_container > div		{padding: 30px 5px; position: relative; margin-right: 20px;}
.portfolio-head .flex .project-list .mCSB_container > div + div	{border-top: 1px solid #707070;}
.portfolio-head .flex .project-list .mCSB_container > div:hover	{background: #fff;}
.portfolio-head .flex .project-list .mCSB_container > div h3		{font-size: 26px; color: #104547; line-height: 1.3; margin-bottom: 20px;}
.portfolio-head .flex .project-list .mCSB_container > div p			{font-size: 18px; line-height: 1.44; color: #104547;}
.portfolio-head .flex .project-list .mCSB_container > div > a		{position: absolute; top: 0; left: 0; height: 100%; width: 100%;}
.portfolio-head .flex .project-list .mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar	{background: #9e005d;}

.portfolio .flex		{justify-content: space-between; align-items: flex-end; margin-top: -200px;}
.portfolio .flex .left	{width: 44%;}
.portfolio .flex .right	{width: 50%;}
.portfolio .flex .left .feat-img	{margin-bottom: 50px;}
.portfolio .flex .left .feat-img:before		{content: ""; display: block; padding-top: 135%;}
.portfolio .flex .left .left-text	{}
.portfolio .flex .right .right-img	{margin-top: 50px;}
.portfolio .flex .right .right-img:before	{content: ""; display: block; padding-top: 35%;}
.portfolio .flex h1		{font-size: 26px; line-height: 1.3; color: #104547; margin-bottom: 30px;}
.portfolio .flex p		{font-size: 18px; line-height: 1.44; color: #104547;}
.portfolio .flex p + p	{margin-top: 30px;}
.portfolio .full-img	{margin: 50px 0;}
.portfolio .full-img:before		{content: ""; display: block; padding-top: 35%;}

.generic > div > h1		{font-size: 88px; line-height: 1.15; color: #104547; margin-bottom: 25px;}
.generic p		{font-size: 18px; line-height: 1.44; color: #104547;}
.generic > div > h2		{font-size: 32px; line-height: 1.15; color: #104547; margin-bottom: 25px;}
.generic > div > * + *	{margin-top: 15px;}
.generic > div > * + h2	{margin-top: 40px;}
.generic ul			{list-style-type: disc; margin-left: 30px;}
.generic ul li		{padding: 6px 0; font-size: 18px;}

.packagesTables		{justify-content: space-between; gap: 20px;}
.packagesTables .packagesOuter	{flex-direction: column; border: 1px dashed #9e005d;}
.packagesTables .packagesOuter .cell		{padding: 12px;}
.packagesTables .packagesOuter .title		{min-height: 130px;}
.packagesTables .packagesOuter .title p		{color: #9e005d;}
.packagesTables .packagesOuter .title p span		{font-weight: bold; font-size: 28px;}
.packagesTables .packagesOuter .price		{background: #9e005d; font-weight: bold;}
.packagesTables .packagesOuter .price p		{color: #fff; font-size: 24px;}
.packagesTables .packagesOuter .featuresList	{flex-direction: column;}
.packagesTables .packagesOuter .featuresList > div:nth-of-type(odd)	{background: rgba(158,0,93,0.2);}

.faqSection 		{width: 100%; display: flex; flex-direction: column; gap: 20px;}
.faqSection .faqItem 	{border: 1px dashed #9e005d;}
.faqSection .faqQuestion 	{width: 100%; background: rgba(158,0,93,0.2); border: 0; padding: 18px 50px 18px 18px; text-align: left; cursor: pointer; position: relative; font-size: 24px; font-weight: bold; color: #9e005d;}
.faqSection .faqQuestion span 	{display: block;}
.faqSection .faqQuestion::after 	{content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 32px; font-weight: bold; color: #9e005d; line-height: 1;}
.faqSection .faqItem.active .faqQuestion	{background: #9e005d; color: #fff;}
.faqSection .faqItem.active .faqQuestion::after 	{content: '-'; color: #fff;}
.faqSection .faqAnswer 	{display: none; padding: 0;}
.faqSection .faqItem.active .faqAnswer 	{display: block;}
.faqSection .faqAnswerInner 	{padding: 18px;}
.faqSection .faqAnswerInner p	{line-height: 1.44; color: #104547;}
.faqSection .faqAnswerInner p:last-child	{margin-bottom: 0;}

@media all and (max-width : 1400px) {
	.wrapper		{width: auto; padding: 0 15px;}
	#header.home p.corner-text		{right: -75px; bottom: 125px; width: 300px;}
	.whatwedo > div h2		{left: -160px;}
	.whatwedo .grid .service .overlay		{padding: 15px;}
	.whatwedo .grid .service .overlay h3	{font-size: 20px;}
	.whatwedo .grid .service .overlay a		{font-size: 16px;}
	.logo-carousel .reviews .speech		{left: -165px;}
	.logo-carousel .reviews .flex .review	{padding-left: 18%;}
	.about .top-row			{height: 800px;}
	.about .top-row .middle			{padding-top: 200px;}
	.about .top-row .middle h1		{position: absolute; width: 50%; padding-left: 75px; right: 0; top: -230px; font-size: 56px;}
	.portfolio-head .flex	{justify-content: space-between;}
	.portfolio-head .flex > h2	{width: 45%;}
}

@media all and (max-width : 1200px) {
	.about .top-row .col,
	.about .top-row .middle .flex > div		{width: 35%;}
	.about .top-row .colright,
	.about .top-row .middle h1,
	.about .top-row .middle .flex > div.text	{width: 65%;}
	.portfolio .flex	{margin-top: -100px;}
}

@media all and (max-width : 992px) {
	#mobile-top		{display: block;}
	#header.inner	{display: none;}
	#menu-menu-2	{display: none;}
	.whatwedo,
	.whatwedo .grid			{height: auto;}
	.whatwedo .grid .col.colleft		{height: auto; width: 40%;}
	.whatwedo .grid .col.colright		{width: 60%; display: block;}
	.whatwedo .grid .col.colright > div		{height: auto; display: block;}
	.whatwedo .grid .col.colright .row1 > div,
	.whatwedo .grid .col.colright .row1 > div + div,
	.whatwedo .grid .col.colright .row2 > div,
	.whatwedo .grid .col.colright .row2 > div + div		{width: auto; height: auto; margin-right: 0;}
	.whatwedo .grid .col.colright .row1 > div + div,
	.whatwedo .grid .col.colright .row2 > div + div		{margin-top: 20px;}
	.whatwedo .grid .col.colright .row1 > div:before,
	.whatwedo .grid .col.colright .row2 > div:before	{content: ""; display: block; padding-top: 50%;}
	.whatwedo .grid .service .overlay .service-title	{margin-bottom: 5px;}
	.whatwedo .grid .service .overlay h3				{font-size: 18px;}
	.whatwedo .grid .service .overlay p			{display: none;}
	.logo-carousel .reviews .speech			{height: 120px; left: -95px; top: -85px;}
	.about .top-row			{height: auto;}
	.about .top-row .flex	{display: block; height: auto;}
	.about .top-row .col	{width: auto; background-size: cover!important;}
	.about .top-row .col.colleft:before			{content: ""; display: block; padding-top: 50%;}
	.about .top-row .colright		{display: none;}
	.about .top-row .middle			{position: static; transform: none; padding: 50px 0; background: #0fff95; width: auto; margin-left: 100px;}
	.about .top-row .middle h1		{position: static; margin: 0 0 30px; width: auto; padding: 0;}
	.about .top-row .middle .flex > div.text		{padding: 0; width: auto;}
	.about .people .flex			{flex-wrap: wrap;}
	.about .people .flex > div		{width: 47%; margin-bottom: 40px;}
	.blog-index .blog-grid .post	{width: 31%;}
	.portfolio-head .flex			{flex-wrap: wrap;}
	.portfolio-head .flex > h2		{width: 100%;}
	.portfolio-head .flex .right	{width: 100%; margin-top: 50px;}
	.portfolio .flex				{margin-top: 0; padding-top: 80px;}
	.portfolio-head .flex .project-list		{height: auto;}
	.portfolio-head .flex .project-list .mCSB_container > div	{margin-right: 0;}
}

@media all and (max-width : 768px) {
	#header.home	{height: 80vh;}
	#header.home .middle	{position: static; transform: none; display: inline-block; padding-top: 175px; width: 80%;}
	#header.home .middle h3	{font-size: 6.7vw;}
	.home-top		{height: auto; display: block;}
	.home-top .col	{width: 100%;}
	.home-top .col.man		{height: 60vh;}
	.home-top .mid-content	{position: static; transform: none; padding: 80px 0;}
	.home-top .mid-content h2		{text-align: left; font-size: 36px;}
	.home-top .mid-content .flex	{flex-wrap: wrap;}
	.home-top .mid-content .flex > div		{width: 100%;}
	.home-top .mid-content .flex > div + div		{padding-left: 0;}
	.whatwedo		{height: auto; padding: 30px 0;}
	.whatwedo > div h2		{top: 146px; font-size: 36px; width: 400px;}
	.whatwedo .grid			{height: auto; margin-left: 0; display: block;}
	.whatwedo .grid .col.colleft		{width: 100%; height: auto; display: block; margin-right: 0;}
	.whatwedo .grid .col.colright		{width: 100%; display: block; height: auto;}
	.whatwedo .grid .col.colright > div,
	.whatwedo .grid .col.colright > div + div	{height: auto; display: block; margin-top: 20px;}
	.whatwedo .grid .service			{background-image: none!important;}
	.whatwedo .grid .col.colright .row1 > div:before,
	.whatwedo .grid .col.colright .row2 > div:before,
	.whatwedo .grid .service:after		{display: none;}
	.whatwedo .grid .service .mob-img	{display: block;}
	.whatwedo .grid .service .mob-img:before		{content: ""; display: block; padding-top: 70%;}
	.whatwedo .grid .service .overlay	{position: static;}
	.whatwedo .grid .service1 .mob-img	{margin-left: 120px;}
	.whatwedo .grid .service1 .mob-img:before		{padding-top: 450px;}
	.whatwedo .grid .col.colright .row1 > div,
	.whatwedo .grid .col.colright .row2 > div		{width: auto; margin-right: 0;}
	.whatwedo .grid .col.colright .row1 > div + div,
	.whatwedo .grid .col.colright .row2 > div + div	{width: auto; margin-top: 20px;}
	.logo-carousel h3		{font-size: 36px; line-height: 100%;}
	.logo-carousel .reviews		{padding: 120px 0 50px;}
	.logo-carousel .reviews .speech		{left: -75px; top: -110px; height: 100px;}
	.logo-carousel .reviews .flex		{flex-direction: column;}
	.logo-carousel .reviews .flex .review		{width: 100%; padding-left: 0;}
	.logo-carousel .reviews .flex .client		{width: 100%; text-align: right; margin-top: 10px; padding-top: 10px;}
	.logo-carousel .reviews .flex .client:before	{transform: none; top: 0; right: 0; left: auto;}
	#footer			{padding: 50px 0;}
	#footer .flex	{flex-wrap: wrap;}
	#footer .right	{margin-top: 20px;}
	.about .top-row .middle h1,
	#location .text h2,
	#contact .form h2,
	.contact .left-col h1,
	.blog-single .left-col h1,
	.portfolio-head .flex > h2	{font-size: 38px;}
	#location		{height: auto;}
	#location .flex		{display: block;}
	#location .text		{width: auto; padding: 50px 0;}
	#location .map		{position: static; width: auto;}
	#contact			{padding: 50px 0;}
	.contact .left-col	{width: auto;}
	.blog-index .blog-grid .post	{width: 48%;}
	.blog-single .flex			{flex-wrap: wrap;}
	.blog-single .left-col		{width: 100%; order: 2;}
	.blog-single .right-col		{width: 100%; margin: 0 0 30px; order: 1;}
	.portfolio .flex		{flex-wrap: wrap;}
	.portfolio .flex .left	{width: 100%; display: flex; flex-direction: column;}
	.portfolio .flex .left .left-text	{order: 1; margin-bottom: 50px;}
	.portfolio .flex .left .feat-img	{order: 2;}
	.portfolio .flex .right	{width: 100%;}
}

@media all and (max-width : 576px) {
	.about .top-row .col.colleft:before		{padding-top: 85%;}
	.about .top-row .middle			{margin-left: 50px;}
	.about .people .flex > div		{width: 100%;}
	.about .people h2,
	#location .text h2,
	#contact .form h2		{font-size: 36px;}
}

@media all and (max-width : 450px) {
	#header.home .middle		{width: 290px;}
	#header.home .middle h3		{font-size: 24px;}
	.blog-index .blog-grid .post	{width: 100%;}
}