/*main,
section {
	background: #F9FAFF;
}

section#projectpage-hero {
	background: linear-gradient(#314159 85%, #F9FAFF 25%);
	color: #E4EFFF;
}*/

section#design-process {
	background: #e4effe;
}

span.label-button, a.label-button {
		color: #E4EFFF !important;
	}

@media (min-width: 992px) {
	div.container-article {
		max-width: 800px;
	}
}

@media only screen and (min-width: 1200px) {
	div.container-article {
	padding: unset;
	}
	.container-article-fullwidth-hero {
		margin: 0 auto;
	}
	.container-article-fullwidth-hero > figure {
	}
}

@media only screen and (max-width: 1455px) {
	.container-article-fullwidth-hero {
		max-width: unset;
		margin: 0 auto;
			}
	div.container-article-fullwidth-hero > figure.context-media-hero picture,
	div.container-article-fullwidth-hero > figure.context-media-hero img {
				border-radius: 0px !important;

	}
}

div.container-article-fullwidth {
	width: unset;
}

/* Project page */

.header * .row {
	align-items: center;
}
header {
	position: relative;
	z-index: 1;
}




/* typography */
.underlined-heading {
	border-bottom: 2px solid #313131;
	margin-bottom: 24px;
}


h1.article {
	font-size: 84px !important;
	line-height: 1.2em !important;
}

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

h1.article {
	font-size: 56px !important;
	line-height: 1.2em;
}
}



/* panel */


.panel {
	padding: 24px 24px 12px 24px;
	background-color: #e4effe;
	border-radius: 15px;
}

.panel li {
	padding: 2px;
	list-style: disc;
	line-height: 24px;
}

.panel ul {
	padding-left: 22px !important;
}



@media only screen and (max-width: 565px) {
	.panel {
	    margin-left: 0px ;
	    margin-right: 0px ;
	}

}

/* case study infobox */
.casestudy-infobox {
	padding: 24px 16px 16px;
	background: #F9FAFF;
	border-radius: 16px;
	height: 100%;
	/*border: 1px solid #e8e8e8;*/
}

.casestudy-infobox li {
	list-style: disc;
}

.casestudy-infobox > img {
	border-radius: 8px;
}

/* image grid */

@media only screen and (min-width: 992px) {

	.image-grid-wrap {
		display: inline-flex;
	    flex-wrap: wrap;
	    flex-direction: row;
	}

	.image-grid {
		width: 49%;
		margin: 0.25px !important;
	}

	figure.image-grid-1 > picture > img {
		border-radius: 15px 0 0 0 !important;
	}

	figure.image-grid-2 > picture > img {
		border-radius: 0 15px 0 0 !important;
	}

	figure.image-grid-3 > picture > img {
		border-radius: 0 0 0 15px !important;
	}

	figure.image-grid-4 > picture > img {
		border-radius: 0 0 15px 0!important;
	}

}


/* Tabs */

.tabs-container {
	margin: 0 auto;
}
/* === Tab Navigation (Buttons) === */
.tabs-nav {
	position: relative;
	display: flex;
	justify-content: left; 
}
.tabs-nav button {
	background: #e4e8ef;
	color: #313131;
	border: 0;
	padding: 12px 24px;
	cursor: pointer;
	border-radius: 15px 15px 0 0;
	font-weight: bold;
    text-decoration: 0.5px underline;
    text-underline-offset: 5px;
}
.tabs-nav button:focus,
.tabs-nav button.active:focus {
	outline: 3px solid #313131	;
	background: #FF58C2;
	outline-offset: 1px;
}

.tabs-nav button:hover {
    text-decoration: 2px underline;	
}
.tabs-nav button.active {
	color: #313131;
	background: #FFFFFF;
    text-decoration: 2px underline;	
	box-shadow: 0px -5px 9px 1px rgb(140 149 159 / 26%);
	border: 1px solid #ccc;

}

button#tab1 {
    margin-right: 8px;
}

button#tab1,
button#tab2 {
    width: 50%;
}
.tab-indicator {
	position: absolute;
	bottom: -6px;
	height: 6px;
	background: #313131;
	transition: left 0.3s ease, width 0.3s ease;
}
/* === Tab Panels (Content Areas) === */
.tabs-content .tab-content {
	display: none;
	padding: 10px;
	border: 1px solid #ccc;
	padding: 16px;
	border-radius: 0 0 16px 16px;
	background: #FFFFFF;	
}
.tabs-content .tab-content.active {
	display: block;
}


/* Before/ after slider */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
* {
  box-sizing:border-box
}
#before-after-slider {
  width:100%;
  position:relative;
  overflow:hidden;
}

#after-image {
  display:block
}

#before-image {
  position:absolute;
  height:100%;
  width:50%;
  top:0;
  left:0;
  overflow:hidden;
  z-index:2;
}

#resizer {
  position:absolute;
  display:flex;
  align-items:center;
  z-index:5;
  top:0;
  left:50%;
  height:100%;
  width:4px;
  background:white;
  /*Stop vertical scrolling on touch*/
  -ms-touch-action: pan-y;
    touch-action: pan-y;
}

#resizer:after {
  background:linear-gradient(62deg,#c93072 5%,#3365c0);
  font-family: "Font Awesome 5 Free";
  content:'\f337';
  font-weight:900;
  display:flex;
  justify-content:center;
  align-items:center;
  color:white;
  position:absolute;
  margin: 0 0 0 -22px;
  width:40px;
  height:40px;
  border-radius:50%;
  border:3px solid white;

}