html{
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
	height:100%;
	margin:0;
}

*, *:before, *:after {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

body{
	background: #F1F2F6;
	font-family: "poppins", helvetica, arial,  sans-serif;
	border:0;
	margin:0;
}

.hide-overflow{
	overflow-x: hidden;
}

a{
	text-decoration: none;
	border:none;
	outline:none;
}

a:active{
	border:none;
	text-decoration: none;
	outline:none;
}

a:visited{
	border:none;
	text-decoration: none;
	outline:none;
}

h1{
	color: #21232B;
	font-family: "lulo-one", helvetica, sans-serif;
	font-size:36px;
	font-style: normal;
	font-weight:700;
	line-height:40px;
	margin: 0px;
	padding-bottom:24px;
	text-transform: uppercase;
}

h2{
	color: #21232B;
	font-size:24px;
	font-style: normal;
	font-weight:600;
	margin: 0px;
	padding-bottom:28px;
}

h3{
	color: #21232B;
	font-size: 20px;
	font-style: normal;
	font-weight: 500;
	line-height:1.5em;
	margin: 0px;
	padding-bottom:28px;
}

p{
	font-size:16px;
	color: #000000bf;
	margin:0;
}

button{
	border-radius:4px;
	font-size:18px;
	font-weight:600;
	padding: 4px 16px;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

img{
    border: 0;
    vertical-align: middle;
}

.wrapper{
	margin:auto;
	max-width: 1300px;
}

.nav{
	display: flex;
	align-items: center;
	justify-content: space-between;
	clear:both;
}

.navigation{
	display: flex;
	align-items: center;
	justify-content: space-between;
	clear:both;
	padding: 40px 20px;
}

.nav-menu{
	display: none;
}

.nav-list{
	display: flex;
	align-items: center;
	justify-content: space-between;
	clear:both;
}

.nav-list a {
	color: #2c2c2c;
	font-size:16px;
	font-weight:500;
	padding-right:45px;
	text-decoration: none;
}

.topnav{
	display:none;
}

.nav-list a:last-child {
	background:none;
	padding:0 0 3px 0;
	line-height:0;
}

a.menu-icon {
  display: none;
}

.nav-list button.menu-btn {
	display:none;
}

.summary{
	position:relative;
	clear:both;
	padding: 40px 20px;
	text-align: left;
}

.summary-text{
	font-size: 18px;
	font-weight:400;
	line-height: 3rem;
	margin-bottom:24px;
}

.experience{
	position:relative;
	clear:both;
	padding: 40px 20px;
	text-align: left;
}

.exp-item{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 0 24px 0;
	clear:both;
}

.exp-text{
	font-size:18px;
}

.exp-col{
	display:flex;
	flex-direction:row;
	width:100%;
}

.company-logo{
	height:45px;
	padding-right:15px;
}

.company{
	display:inline-flex;
	align-items: center;
	font-weight:600;
	width:100%;
}

.role{
	padding-left:0px;
	width:100%;
}

.duration{
	color:#999999;
	display:flex;
	justify-content: flex-end;
	width:100%;
}

.work{
	position:relative;
	padding: 40px 20px;
	clear:both;
	text-align: left;
}

.work-item{
	margin-bottom:32px;	
	width:100%
}

.work-preview{
	background-color: #ECEDF2;
	border-radius:8px;
	display: flex;
	justify-content: center;
	margin-bottom:16px;
	position:relative;
	width:100%;
}

.work-preview img{
	width:98%
}

.overlay {
	border-radius:8px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition: .4s ease;
	background-color: #13121925;
  }

.overlay:hover {
	opacity: 1;
}

.overlay-label{
	border-radius: 4px;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	padding: 12px 12px 0 0;
}

p.overlay-label{
	background: #13121980;
	color: #ffffff;
	font-size: 14px;
	line-height:1rem;
	padding: 6px;
}

.work-desc{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width:100%;
	margin:24px 0 80px 0;
}

.work-text{
	font-size: 18px;
	font-weight: 400;
	line-height: 3rem;
}

.work-logo{
	height:24px;
}

.full-logo{
	margin: 0;
}

.freed{
	height:21px;
}

.klaviyo{
	height:28px;
}

.meta{
	height:21px;
}

.freed-lg{
	height:31px;
}

.klaviyo-lg{
	height: 36px;
}

.meta-lg{
	height: 31px;
}

#menu{
	display: none;
}

.mob-links{
	background: #21232B;
	display: flex;
	flex-direction: column;
	padding: 10px 40px;
	width: 100%;
}
  
.mob-links a {
	color: #F1F2F6;
	padding: 24px 16px;
	text-decoration: none;
	font-size: 18px;
	font-weight: 500;
	display: block;
	z-index: 999;
}

#menu-toggle{
	display: none;
	height: 24px;
	width: 24px;
}
  
.active{
	background: url("../images/close.svg") no-repeat;
	transition: 300ms;
}

.inactive{
	background: url("../images/menu.svg") no-repeat;
	transition: 300ms;
}



/*--------------------------------
     Case Study Pages
----------------------------------*/

.cs-h1{
	font-size:32px;
}

.cs-ppg{
	font-size: 16px;
	line-height: 2em;
}

.wrapper-case-study{
	margin: auto;
	padding: 0 5%;
}

.hero{
	display: flex;
	flex-direction: row;
	clear: both;
	overflow-x: hidden;
}

.hero-left{
	padding: 20px 6% 0 6%;
	width: 45%;
}

.hero-right{
	width: 55%;
}

.hero-image{
	height: 750px;
}

.screens{
	margin: 180px 0 0 0;
	text-align: center;
	display: flex;
    flex-direction: column;
    justify-content: center;
}

.screens-heading{
	text-align:left;
}

.screens-ppg{
	padding: 0 0 24px 0;
	text-align:left;
}

.screens-image{
	width: 100%;
}

.gallery{
	text-align: center;
}

.gallery-cell {
	width: 100%;
}

.gallery-cell:before {
	display: block;
	text-align: center;
}

.flickity-button{
	background: #c9c9c9bf;
}

.flickity-button:hover{
	background: #909090bf;
}

.flickity-prev-next-button.next{
	right:-8px;
}

.flickity-prev-next-button.previous{
	left:-8px;
}



@media screen and (max-width: 1350px) {

	.hero-left{
		width: 50%;
	}

	.hero-right{
		width: 50%;
	}

	.hero-image{
		height:650px;
	}
	
}






/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 850px) {

	.wrapper-case-study{
		margin:auto;
		padding: 0;
	}
	
	.nav-desk{
		display: none;
	}

	.navigation{
		padding: 40px 40px;
	}

	#menu-toggle{
		display:block;
	}

	.summary{
		padding: 40px 40px;
	}

	.experience{
		padding: 40px 40px;
	}

	.work{
		padding: 40px 40px;
	}
	
	.full-logo{
		display:none;
		margin: 30px 0 0 0;
	}

	.freed{
		height:20px;
	}
	
	.klaviyo{
		height:26px;
	}
	
	.meta{
		height:20px;
	}

	.work-right{
		display:none;
	}

	.exp-item{
		display: flex;
		align-items: start;
		justify-content: space-between;
		padding: 0 0 32px 0;
		clear:both;
	}

	.exp-col{
	display:flex;
	flex-direction:column;
	width:100%;
	}

	.company-logo{
		height:65px;
		padding-right:16px;
	}

	.role{
		padding: 0;
	}

	.duration{
		justify-content: flex-start;
	}

}