* {margin:0; padding:0; outline:none; border:none; box-sizing:border-box; -moz-box-sizing:border-box; text-rendering: optimizeLegibility;  -webkit-font-smoothing: antialiased;}

/* GLOBAL */

html { }
body {line-height:1; font-family: 'Bitter', serif; font-style: normal; color: #585856; position: relative; overflow-x: hidden}

::-webkit-input-placeholder     {color:#bdbdbd;}
::-moz-placeholder              {color:#bdbdbd; opacity:1;}
:-ms-input-placeholder          {color:#bdbdbd;}
:-moz-placeholder               {color:#bdbdbd; opacity:1;}


img     {max-width:100%; height:auto;}
a       {color:inherit; transition: 0.2s ease-out}
a.cover {position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0); display:block; z-index: 10}

strong	{font-weight: 700;}

ol,
ul,
p			{font-size:20px; line-height: 1.5em; margin-bottom: 1em;}

ul li a,
ol li a,
p a			{transition: 0.2s ease-out}

ul li a:hover,
ol li a:hover,
p a:hover	{text-decoration:none}

h1,h2,h3,h4,h5,h6	{font-weight: normal; line-height: 1.3em}

.inner	{width:100%; max-width: 1596px; padding: 0 50px; margin: auto; position: relative;}
.indent	{width:100%; padding-left: 128px; padding-right: 128px;}

.col-container	{width:calc(100% + 16px); margin-left: -8px; font-size: 0}

.col-1			{width:100%; padding: 8px; display:inline-block; vertical-align: top; font-size: 14px;}
.col-2			{width:50%; padding: 8px; display:inline-block; vertical-align: top; font-size: 14px;}
.col-3			{width:33.333%; padding: 8px; display:inline-block; vertical-align: top; font-size: 14px; position: relative}
.col-4			{width:25%; padding: 8px; display:inline-block; vertical-align: top; font-size: 14px;}

.col-container.wider-gutter			{width:calc(100% + 30px); margin-left: -15px;}
.col-container.wider-gutter .col-1,
.col-container.wider-gutter .col-2,
.col-container.wider-gutter .col-3,
.col-container.wider-gutter .col-4	{padding:8px 15px;}

/* HEADER */

header .inner	{display: flex; flex-direction: row; flex-wrap:nowrap; justify-content: space-between; align-items: center;}

.logo		{width:88px; height: 164px; display: block; position: relative; z-index: 100; background-image: url(/_assets/logo-gumption.svg); background-size: cover; background-repeat: no-repeat;}
.logo img	{}

.header-right nav 						{visibility: hidden; opacity: 0; top:-100%; transition: 0.5s ease-in-out; position: fixed; width: 100%; height: 100%; left: 0; background-color: rgba(255,255,255,0.97); display: flex; justify-content: space-around; align-content: center; flex-direction: column; z-index: 20}
.header-right nav ul					{margin: 0; text-align: center}
.header-right nav ul li					{display: inline-block; font-size: 16px; margin: 1.2vh 0}
.header-right nav ul li a				{text-decoration: none; display: block; padding: 10px; position: relative; overflow: hidden; color: #e5007d; transition: 0.2s ease-out}
.header-right nav ul li a span			{transition: 0.2s ease-in-out; display: block}
.header-right nav ul li:hover a			{color:#BE2970}
.header-right nav ul li:hover a span	{transform: translateY(-3px)}

.header-right nav.open		{visibility: visible; opacity: 1; top:0}
.header-right nav ul li		{display:block; font-size:4vh}
.nav-icon					{display:block}

.header-right nav ul.nav-sub-icons 			{display: flex; flex-direction: row; justify-content: center;}
.header-right nav ul.nav-sub-icons li.mo	{display: none}
.header-right nav ul.nav-sub-icons li		{margin:0 10px;}
.header-right nav ul.nav-sub-icons li img	{height:36px; width:auto; transition: 0.2s ease-out}
.header-right nav ul.nav-sub-icons li:hover img	{filter: saturate(0);}

.header-right nav ul.nav-sub-icons svg		{width:24px;}
.header-right nav ul.nav-sub-icons svg path	{fill:#e5007d}

.header-right nav ul.nav-sub-icons li:hover svg path		{fill:#BE2970}

/* RIGHT SUB NAV */
.sub-nav					{list-style: none; display: flex; align-items: center; position: relative; top:-20px;}
.sub-nav li					{margin-left: 34px;}
.sub-nav li a				{font-size: 20px; color:#585856; text-decoration: none; transition: 0.2s ease-out; display: flex; align-items: center;}
.sub-nav li a img		 	{transition: 0.2s ease-out}
.sub-nav li a:hover img		{filter: saturate(0);}
.sub-nav li a span			{border-bottom: 1px solid #585856; padding-bottom: 0px; display: block}
.sub-nav li a:hover span	{color:#e5007d; border-color:#e5007d;}
.sub-nav li:hover svg path	{fill:#BE2970}
.sub-nav svg		{width:24px;}
.sub-nav svg path	{fill:#e5007d}

.sub-nav .icon-phone svg	{width:18px;}

/* NAV ICON */
.nav-icon 					{width: 30px; height: 30px; z-index: 39; position: absolute; left: 180px; top: 50px; cursor: pointer; opacity: 0; animation: fadeIn 0.5s cubic-bezier(0.65, 0, 0.35, 1) forwards 0.5s;}
.nav-icon span 				{width: 100%; display: block; height: 2px; background-color: #E5007D; position: absolute; top: 0; left: 0; border-radius: 1px; }
.nav-icon span:nth-child(1) {}
.nav-icon span:nth-child(2) {top: 10px; }
.nav-icon span:nth-child(3) {top: 20px; }

.nav-icon.open span 				{}
.nav-icon.open span:nth-child(1) 	{top: 13px; transform: rotate(45deg) }
.nav-icon.open span:nth-child(2) 	{opacity: 0; transform: scale(0) }
.nav-icon.open span:nth-child(3) 	{top: 13px; transform: rotate(-45deg) }

.nav-icon		{}

@keyframes fadeIn {
	to {opacity: 1}
}

/* HOME INTRO */
.intro-section			{padding:50px 0}
.intro-section h1		{font-size:52px; color:#e5007d; line-height: 1.2em;}

/* HERO CONTAINER */
.slide img				{width:100%;}

/* INTRODUCING SECTION */
.introducing		{padding:80px 0}
.introducing p		{font-size:20px;}
.introducing h2		{font-size:36px; line-height: 1.3em; margin: 1.2em 0;}
.introducing p span	{color:#e5007d;}
.introducing .indent{width:100%; max-width: 1464px;}
.introducing p		{margin: 0}

/* CLIENT LOGOS */
.client-logos		{padding-bottom: 80px;}

.logo-carousel .slide ul			{display: flex; flex-wrap: wrap; margin: 0}
.logo-carousel .slide ul li			{width:16.667%; display: inline-flex; align-items: center; justify-content: center; padding:20px;}
.logo-carousel .slide ul li img		{max-height: 100px; width: auto}


/* HOME LISTING */
.panel-listing					{padding-bottom: 80px;}
.panel-listing .col-3			{padding: 0}
.panel-listing .col-container	{display: flex}
.pink.listing					{padding:40px 0; background-color:#E5007D}
.panel-image-outer				{background-color: #ffffff;}
.panel-image					{width:100%; background-size: cover; background-position: center; padding-top: 75%; transition: 0.4s ease-out}
.panel-text						{padding: 40px;}
.panel-text h2					{color:#ffffff; font-size: 36px; margin-bottom: 0.8em; line-height: 1.3em; text-transform: lowercase}
.panel-text p					{color:#ffffff; font-size: 20px; line-height: 1.5em; padding-right: 10px;}
.panel							{position:relative; height: 100%; display: flex; flex-direction: column-reverse;}
.hide-overflow					{overflow:hidden;}

.panel:hover .panel-image	{transform:scale(1.1)}

.col-3:nth-child(1) .panel	{background-color:#e5007d;}
.col-3:nth-child(2) .panel	{background-color:#be2970;}
.col-3:nth-child(3) .panel	{background-color:#9e205d;}

/* HOME TESTIMONIAL */
.home-testimonial						{padding-top:50px; padding-bottom: 120px;}
.home-testimonial blockquote			{width:794px; max-width: 100%; margin: auto; position: relative;}
.home-testimonial blockquote p			{font-size:24px;}
.home-testimonial blockquote cite		{font-size:20px;}
.home-testimonial blockquote:before,
.home-testimonial blockquote:after		{width:75px; height: 65px; background-image: url(/_assets/icon-quote.gif); background-size: cover; content: ''; display: block; position: absolute; top:0; left: -125px;}
.home-testimonial blockquote:after		{transform: rotate(180deg); left: auto; right: -125px;}

/* ENVIRONMENT */
.home-environment			{height:798px; background-size: cover; background-attachment: fixed; background-position: center; background-repeat: no-repeat; position: relative;}
.home-environment:after		{position: absolute; left: 0; top:0; width:100%; height: 100%; content: ''; background-color: rgba(0,0,0,0.45); display: block; z-index: 1}
.home-environment .inner	{position: relative; z-index: 5; display: flex; flex-direction: column; align-items: center; height: 100%;}
.environment-text			{width:100%; max-width: 720px; margin: auto; text-align: center}
.environment-text h2		{color:#ffffff; font-size:52px; margin-bottom: 0.6em;}
.environment-text p			{color:#ffffff; font-size:20px;}

/* CONNECT */
.connect			{padding:80px 0; text-align: center}
.connect ul			{list-style: none; display: flex; justify-content: center}
.connect ul li		{margin:0 29px}
.connect ul li svg	{width:46px;}
.connect ul li svg path	{fill:#e5007d}
.connect ul li:hover svg path	{fill:#BE2970}

.connect h2			{font-size:52px; color:#e5007d; margin-bottom: 1em;}
.connect p			{font-size:20px; margin-bottom:3.5em;}

/* TEXT PAGE */
.text-page .col-2 h2:first-child,
.text-page .col-3 h2:first-child,
.text-page .col-4 h2:first-child	{margin-top:0}

.text-page		{padding:50px 0}
.text-page	h1	{font-size:52px; color:#e5007d}

.intro-text		{margin:2.3em 0}
.intro-text	p	{font-size: 34px; line-height: 1.4em}

.two-col		{column-count: 2}

.services-box		{padding:60px 60px 20px; background-color:#fce6f2; margin: 70px 0}
.services-box p		{margin-bottom: 0}
.services-box h3	{font-size:20px; color:#e5007d; margin-bottom: 2em;}
.services-box h2	{font-size:36px; margin-bottom: 1em;}
.services-box .col-2	{margin-bottom: 40px;}

.services-box.white				{background-color: #ffffff; margin: 0; padding-top: 0; padding-bottom: 0}
.services-box.multiple-list ul	{column-count: 3; margin-left: 20px;}
.services-box.multiple-list ul li	{margin-bottom: 15px}

/* CASE STUDIES */
.case-study-listing			{padding-bottom:90px;}
.case-study-listing .col-3	{padding: 0}

.case-study-image-outer	{overflow:hidden;}
.case-study-image		{background-size:cover; /*height:400px;*/ padding-top: 75%; transition: 0.4s ease-out}
.case-study-panel		{position:relative;}

.case-study-panel:hover .case-study-image {transform:scale(1.1); }

.case-study-panel-text	{display: none}

.case-study-carousel-container		{padding:40px 0 0;}
.case-study-carousel-container .carousel-nav	{margin-top:15px;}
.case-study-carousel .slide			{text-align:center; width: 100%;}
.case-study-carousel .slide img		{width:100%;}

.carousel-nav							{width:100%; text-align: center}
.carousel-nav ul						{list-style:none; font-size: 0}
.carousel-nav ul li						{display:inline-block; margin: 0 3px}
.carousel-nav ul li button				{width:12px; height: 12px; border-radius: 12px; border:1px solid #4e4e4e; transition: 0.2s ease-out; background-color: transparent}
.carousel-nav ul li button:hover		{transform:scale(0.8)}
.carousel-nav ul li.slick-active button	{border:1px solid #E5007D; background-color: #E5007D; transform: scale(1.2);}

/* FORM */
.contact-page h3			{color:#e5007d; font-size: 20px;}
.col-container.form-flex	{display: flex; justify-content: space-between; margin-top: 70px;}

.col-form		{width:60%;}
.col-contact	{width:calc(40% - 50px);}

.col-form-panel		{padding-top:60px;}
.col-contact-panel	{padding:60px 40px; background-color: #fce6f2}

.col-form-panel	h3		{margin-bottom: 60px;}
.col-contact-panel h3	{margin-bottom: 35px;}

.contact-map		{margin-top: 50px;}
.contact-map iframe	{height:336px; width:100%; filter: saturate(0)}

.form-cell							{margin:0 0 20px;}
.form-cell textarea,
.form-cell input[type="text"]		{font-size:20px; background-color:#ebebeb; width: 100%; padding:15px 20px; transition: 0.2s ease-out}
.form-cell textarea:focus,
.form-cell input[type="text"]:focus	{background-color:#dddddd;}
.form-cell textarea						{height:360px;}
.form-cell input[type="submit"]			{background-color: #E5007D; color: #ffffff; padding: 24px 55px; transition: 0.2s ease-out; font-size: 20px;}
.form-cell input[type="submit"]:hover	{background-color:#4e4e4e}

.form-cell-input						{margin-top: 40px;}

.form-cell input.error,
.form-cell textarea.error { border: 1px solid #E0007F; background-color: #ffe5f4; }
.error { color: #E0007F }

::-webkit-input-placeholder { color: #4e4e4e; }
::-moz-placeholder              {color:#4e4e4e; opacity:1;}
:-ms-input-placeholder          {color:#4e4e4e;}
:-moz-placeholder               {color:#4e4e4e; opacity:1;}

.checkbox-container	{display: flex; align-content: center; margin:35px 0 30px 0;}

.container {display: flex; align-items: center; flex-direction: row-reverse; position: relative; cursor: pointer; font-size: 20px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.container input {position: absolute; opacity: 0; cursor: pointer;}
.checkmark {position: relative; display: inline-block; height: 30px; width: 30px; margin-right: 15px; background-color: #ffffff; border:1px solid #585856;}
.container:hover input ~ .checkmark {background-color: #ccc;}
.container input:checked ~ .checkmark {background-color: #e5007d; border-color:#e5007d}
.checkmark:after {content: ""; position: absolute; display: none;}
.container input:checked ~ .checkmark:after {display: block;}
.container .checkmark:after {left: 10px; top: 6px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}

/* ENVIRONMENT */
.col-container.flex-environment	{width:calc(100% + 60px); margin-left: -30px; display: flex}
.col-container.flex-environment .col-2	{padding:30px;}
.col-container.flex-environment .col-2 h2	{font-size:30px; margin: 1.3em 0 0.8em}
.col-container.flex-environment h2:first-child	{margin-top: 0}
.col-container.flex-environment:nth-child(odd)	{flex-direction: row-reverse}

.banner-hero		{height:75vh; background-size: cover; background-repeat: no-repeat; min-height: 640px; position: relative; background-attachment: fixed;}
.banner-hero h1		{color:#ffffff; font-size: 105px; line-height: 1.2em;}
.banner-hero:after	{position: absolute; left: 0; top:0; width:100%; height: 100%; content: ''; background-color: rgba(0,0,0,0.45); display: block; z-index: 1}
.banner-hero .inner	{position: relative; z-index: 5; display: flex; justify-content: center; flex-direction: column; align-items: center; height: 100%;}

#page18	header							{position: absolute; width: 100%; z-index:10}
#page18	header .logo					{background-image: url(/_assets/logo-gumption-white.svg)}
#page18	header .nav-icon span			{background-color: #ffffff;}
#page18	header .nav-icon.open span		{background-color:#e5007d}
#page18	header .sub-nav li a			{color:#ffffff;}
#page18	header .sub-nav li a span		{border-color:#ffffff;}
#page18	header .sub-nav li a:hover span	{color:#ffffff; opacity: 0.5}
#page18	header .sub-nav li a img		{filter: brightness(100); transition: 0s}
#page18	header .sub-nav li svg path		{fill:#ffffff}

/* FOOTER */
footer				{padding:80px 0 20px; background-image: url(/_assets/bg-footer.gif); background-size: cover; background-repeat: no-repeat; color: #ffffff; border-top:5px solid #E5007D;}
footer p			{font-size:20px; margin-bottom: 5px; line-height: 1.5em;}
footer p a			{text-decoration:underline; color: #ffffff}
footer p a:hover	{text-decoration:none;}
footer h2			{font-size: 52px; margin-bottom: 1em;}
footer h3			{font-size: 20px; margin-bottom: 1.5em}

.sign-off			{margin-top: 60px; display: flex; justify-content: space-between}
.sign-off p			{font-size:14px; margin-bottom: 0}
.sign-off ul		{margin:0}

.social-icons			{list-style: none; display: flex;}
.social-icons li		{margin-left:25px;}
.social-icons li svg	{width:22px;}
.social-icons li svg path	{fill:#ffffff}

/* COOKIE BAR */
.cookieBar              { width: 100%; background: url('/_assets/bg_cookiebar.png'); position: fixed; bottom: 0px; left: 0px; text-align: center; padding: 10px 10px; z-index: 99999999; box-sizing:border-box; -moz-box-sizing:border-box; }
.cookieBar p			{color:#ffffff; font-size:14px; font-family:inherit; line-height:1.5em; text-align:center; display:inline-block;}
.cookieBar .acceptBtn   {border:0px; background:#000; border:1px solid #DEDEDE; display:inline-block; margin-top:6px; margin-left:5px; font-family:inherit; font-size:12px; padding:5px 10px; text-decoration:none; color:#FFF; text-transform:uppercase; }


@media (max-width: 1350px) 
{
	/* CONTACT */
	.contact-page .indent	{padding-left:50px; padding-right: 50px;}
}

@media (max-width: 1240px) 
{

	/* FOOTER */
	.sign-off ul	{flex-shrink: 0}
	footer .col-3	{width:100%; padding-top: 0; padding-bottom: 30px;}
	.sign-off		{margin-top: 40px;}
	
	/* CONTACT */
	.contact-page .indent	{padding-left:0; padding-right: 0;}

	
}


@media (max-width: 1160px) 
{
	/* HOME TESTIMONIAL */
	.home-testimonial blockquote		{width:100%; padding-left: 120px; padding-right: 120px;}
	.home-testimonial blockquote:before	{left:0;}
	.home-testimonial blockquote:after	{right:0;}
	
	/* CONTACT */
	.col-contact-panel		{padding-left: 30px; padding-right: 30px;}
	.col-contact-panel p	{font-size: 16px;}
	
	/* ENVIRONMENT */
	.banner-hero	{min-height: 500px;}
	.banner-hero h1	{font-size:40px;}
}
	
	
@media (max-width: 1000px) 
{
	.inner		{padding-left: 25px; padding-right: 25px;}
	.indent		{padding-left: 0; padding-right: 0}
	
	/* HEADER */
	.nav-icon	{left:143px;}
	.sub-nav	{display: none;}
	.nav-icon	{left:auto; right:25px;}
	.header-right nav ul.nav-sub-icons li.mo	{display: block}
	
	/* PANEL COLS */
	.panel-text		{padding: 30px;}
	.panel-text h2	{font-size:32px;}
	.panel-text p	{font-size:14px;}
	
	/* ABOUT PAGE */
	.services-box						{padding-left:30px; padding-right: 30px;}
	.services-box.multiple-list ul		{column-count: 2; margin-left: 15px;}
	.services-box.multiple-list ul li	{padding-right: 10px;}

}


@media (max-width: 880px) 
{

	/* CONTACT */
	.col-container.form-flex	{flex-direction: column; margin-top: 50px;}
	.col-form					{width:100%;}
	.col-contact				{width:100%;}
	.col-form-panel				{padding-top: 0}
	.col-form-panel h3			{margin-bottom: 30px;}
}
	
@media (max-width: 768px) 
{
	/* ABOUT */
	.services-box .col-2	{width:100%}
	
}
	
@media (max-width: 640px) 
{
	
	/* FONT SIZE */
	.text-page h1,
	footer h2,
	.connect h2,
	.environment-text h2,
	.intro-section h1	{font-size:32px;}
	
	p,
	.container,
	.form-cell textarea, .form-cell input[type="text"],
	.contact-page h3,
	.services-box.multiple-list ul,
	.services-box h3,
	.connect p,
	.introducing p,
	.environment-text p,
	.home-testimonial blockquote p,
	.home-testimonial blockquote cite	{font-size: 14px;}
	
	.services-box h2,
	.intro-text p,
	.introducing h2		{font-size: 24px;}
	
	.intro-text	{margin-bottom: 0}
	
	/* HEADER */
	.logo {width: 70px; height: 130px; z-index: 10}
	
	/* INTRODUCING */
	.introducing {padding: 60px 0 80px 0;}
	
	/* PANEL COLS */
	.panel-listing .col-container			{flex-direction: column}
	.panel-listing .col-container .col-3	{width:100%;}
	
	/* HOME LOGOS */
	.logo-carousel .slide ul		{opacity: 1 !important; transform: translateY(0) !important;}
	.logo-carousel .slide ul li		{width:50%; padding: 30px;}	
	.logo-carousel .slide ul li	img	{width:auto; max-height:100px}	
	.slick-track	{opacity: 1 !important;}
	
	/* HOME TESTIMONIAL */
	.home-testimonial 					{padding-top: 0;  padding-bottom: 70px;}
	.home-testimonial blockquote		{width:100%; padding-left: 80px; padding-right: 80px;}
	.home-testimonial blockquote:before,
	.home-testimonial blockquote:after	{width:50px; height: 40px;}
	
	/* ENVIRONMENT HOME */
	.home-environment	{height:100vh; background-attachment: scroll}
	.banner-hero		{ background-attachment: scroll}
	
	/* CONNECT */
	.connect	{padding:60px 0 40px}
	
	/* ABOUT */
	.services-box			{margin:30px 0; padding: 30px 30px 0}
	.services-box .col-2	{margin-bottom: 20px;}
	.services-box.multiple-list	{padding-top: 30px;}
	
	/* CONTACT */
	.form-cell textarea	{height:250px;}
	
	/* ENVIRONMENT */
	.col-container.flex-environment			{flex-direction: column !important}
	.col-container.flex-environment .col-2	{width:100%; padding: 0 30px 20px 30px;}
	.banner-hero h1	{font-size:11vw;}
	
	
	/* FOOTER */
	footer				{padding-top: 40px;}
	.sign-off			{flex-direction: column; margin-top: 20px;}
	.sign-off ul		{margin-top: 30px;}
	.social-icons li	{margin-right: 25px; margin-left: 0}
	
}

@media (max-width: 500px) 
{
	/* CASE STUDIES */
	.col-3	{width:50%;}
	
	.header-right nav ul.nav-sub-icons li img	{height:26px;}
}

@media (max-width: 375px) 
{
    /* IPHONE 6 */
}