@media (max-width: 767px) {
.container-process {
	padding: 75px 50px;
}
}

@media (max-width: 499px) {
.container-process {
	padding: 50px 30px;
}
}


.process-bullets {
	padding-top: 75px;
	padding-bottom: 50px;
}
	@media (min-width: 768px) {
	.process-bullets {
		padding-top: 150px;
		padding-bottom: 75px;
	}

	.process-bullet {
		display: none;
	}
	}
	@media (min-width: 1024px) {
	.process-bullets {
		padding-top: 350px;
		padding-bottom: 15vh;
	}
	}


.process-bullets h2 {
	text-align: left;
	margin-bottom: 10%;
	color: #2b3d43;
}
.process-bullets p {
	margin-bottom: 30px;
}
	@media (max-width: 768px) {
	.process-bullets h2 {
    text-align: left;
    margin-bottom: 30px;
    color: #414042;
    font-size: 1.7rem;
    font-family: 'Averta-Regular';
	}
	}

	@media (min-width: 768px) {
	.process-bullets h5, .process-bullets p {
		text-align: center;
	}
	.process-bullets p {
		margin-bottom: 100px;
	}
	.process-bullets h2 {
		text-align: center;
		margin-bottom: 18%;
		color: #2b3d43;
	}
	}


	@media (min-width: 768px) {
	.process-bullets h2.process-bullet-2 {
		margin: 0 auto;
		margin-bottom: 18%;
	}
	.process-bullets h2.process-bullet-3 {
		margin: 0 auto;
		margin-bottom: 18%;
	}
	.process-bullets h2.process-bullet-2 {
		max-width: 630px;
	}
	.process-bullets h2.process-bullet-3 {
		max-width: 480px;
	}	
	}


/*  VISION  */
.vision {
	position: relative;
}

.vision-video {
	width: 100%;
}
	@media (min-width: 768px) {
	.vision-video {
		float: left;
		width: 60%;
	}
	}
	@media (min-width: 1024px) {
	.vision-video {
		width: 65%;
	}
	}
	@media (min-width: 1200px) {
	.vision-video {
		width: 67%;
	}
	}


.vision-diagram-one {
	float: left;
	margin-left: 75px;
}
	@media (max-width: 767px) {
	.vision-diagram-one {
		display: none;
	}
	}
	@media (min-width: 768px) {
	.vision-diagram-one {
		width: calc(25% - 75px);
	}
	}
	@media (min-width: 1024px) {
	.vision-diagram-one {
		width: calc(20% - 75px);
	}	
	}
	@media (min-width: 1200px) {
	.vision-diagram-one {
		width: calc(18% - 75px);
	}	
	}



.vision-ruleline {
	float: left;
	width: calc(15% - 50px);
	margin-left: 50px;
	height: 2px;
	background-color: #ddd;
}

.vision-box {
	position: absolute;
	width: 430px;
	height: 1200px;
	z-index: -1;
	background-color: #fafafa;
}
	@media (max-width: 767px) {
	.vision-box {
		display: none;
	}	
	}


.vision-orange-left {
	position: absolute;
	width: 30px;
	height: 30px;
	top: -200px;
	background-color: #d24d29;
}
	@media (max-width: 767px) {
	.vision-orange-left {
		display: none;
	}	
	}


.vision-orange-right {
	position: absolute;
	width: 30px;
	height: 60px;
	right: 0;
	bottom: -30px;
	background-color: #d24d29;
}

.vision-diagram-two {
    width: 100%;
    padding: 50px 25px 0;
}
	@media (min-width: 768px) {
	.vision-diagram-two {
		float: left;
		width: 50%;
		margin-right: 50px;
		margin-left: 50px;
		padding: 0;
	}
	}
	@media (min-width: 1024px) {
	.vision-diagram-two {
	}
	}
	@media (min-width: 1200px) {
	.vision-diagram-two {
		width: 60%;
		margin-right: 125px;
	}
	}
	@media (min-width: 1600px) {
	.vision-diagram-two {
		width: 50%;
	}
	}


.vision-image {
	float: right;
	width: calc(40% - 250px);
}
	@media (max-width: 767px) {
	.vision-image {
		display: none;	
	}	
	}
	@media (min-width: 768px) {
	.vision-image {
		width: calc(55% - 150px);
	}	
	}
	@media (min-width: 900px) {
	.vision-image {
		width: calc(55% - 175px);
	}	
	}
	@media (min-width: 1200px) {
	.vision-image {
		width: calc(40% - 175px);
	}	
	}

/*calc(50% - 175px)*/


/*  VISION  */


/* CHARRETE */
.charette-top {
	position: relative;
	padding-bottom: 50px;
}
	@media (min-width: 768px) {
	.charette-top {
		padding-bottom: 250px;
	}
	}
	@media (min-width: 1800px) {
	.charette-top {
		padding-bottom: 350px;
	}
	}


.charette-sketch {
	float: left;
	width: calc(40% - 30px);
	margin-right: 30px;
	margin-top: -45px;
}
	@media (max-width: 767px) {
	.charette-sketch {
		display: none;
	}
	}


.charette-ruleline {
	position: absolute;
	width: 2px;
	height: 450px;
	top: 300px;
	left: 16.5%;
	background-color: #d24d29;
}
	@media (min-width: 500px) {
	.charette-ruleline {
	    height: 250px;
	    top: 150px;
	    left: 19.5%;
	}	
	}
	@media (min-width: 860px) {
	.charette-ruleline {
	    top: 200px;
	}	
	}
	@media (min-width: 950px) {
	.charette-ruleline {
	    height: 275px;
	    top: 200px;
	}	
	}
	@media (min-width: 1024px) {
	.charette-ruleline {
	    top: 225px;
	}	
	}
	@media (min-width: 1024px) {
	.charette-ruleline {
	    top: 35%;
	}	
	}
	@media (min-width: 1200px) {
	.charette-ruleline {
	    top: 40%;
	}	
	}
	@media (max-width: 767px) {
	.charette-ruleline {
		display: none;
	}
	}




.charette-video {
	width: 100%;
}
	@media (min-width: 768px) {
	.charette-video {
		float: right;
		width: 60%;
	}
	}


.charette-video-copy {
	padding-top: 20px;
	padding-left: 30px;
	padding-right: 30px;
}
	@media (min-width: 500px) {
	.charette-video-copy {
		padding-left: 50px;
		padding-right: 50px;
	}
	}
	@media (min-width: 768px) {
	.charette-video-copy {
		max-width: 600px;
		padding-left: 0;
		padding-right: 100px;
	}
	}
	@media (min-width: 1800px) {
	.charette-video-copy {
		max-width: 800px;
	}
	}


.charette-bottom {
    position: relative;
    padding: 0 30px;
    margin: 0 auto;
    margin-top: 75px;
}

	@media (min-width: 500px) {
	.charette-bottom {
	    padding: 0 50px;
	}
	}
	@media (min-width: 768px) {
	.charette-bottom {
	    padding: 0 100px;
	    max-width: 2000px;
	    margin-top: 0;
	}	
	}

.charette-bottom a p {
	margin-top: 10px;
}

.charette-bottom a:hover p {
	color: #d24d29
}

/* CHARRETE */



/*  COLLABORATION  */
.collaboration {
	position: relative;
	padding-bottom: 75px;
}

@media (min-width: 768px) {
.collaboration-left {
	float: left;
	width: 50%;
}
}

@media (min-width: 768px) {
.collaboration-right {
	float: left;
	width: 50%;
}
}

@media (min-width: 768px) {
.collaboration-img-one {
	float: left;
	width: 70%;
}
}


.collaboration-gray-box-one {
	background-color: #ddd;
    padding: 25px;
    position: relative;
    z-index: 5;
    margin: 25px;
    margin-top: -25px;
	text-align: center;
}
	@media (min-width: 500px) {
	.collaboration-gray-box-one {
		margin: -25px 50px 25px 50px;
		text-align: left;
	}
	}
	@media (min-width: 768px) {
	.collaboration-gray-box-one {
		position: absolute;
		width: 40%;
		right: 0;
		top: -50px;
		z-index: 1;
		margin: 0px 0px 0px 50px;
	}
	}
	@media (min-width: 950px) {
	.collaboration-gray-box-one {
		width: 35%;
		top: 50px;
	}
	}
	@media (min-width: 1400px) {
	.collaboration-gray-box-one {
		padding: 40px;
		top: 110px;
	}
	}


.collaboration-img-two {
    width: 240px;
    margin: 0 auto;
}
	@media (min-width: 500px) {
	.collaboration-img-two {
	    width: 270px;
	}
	}
	@media (min-width: 768px) {
	.collaboration-img-two {
		position: absolute;
		right: 100px;
		bottom: 30%;
		width: calc(30% - 150px);
	}
	}
	@media (min-width: 950px) {
	.collaboration-img-two {
		bottom: 5%;
	}
	}
	@media (min-width: 1024px) {
	.collaboration-img-two {
		bottom: 5%;
	}
	}
	@media (min-width: 1400px) {
	.collaboration-img-two {
		bottom: -10%;
	}
	}



@media (min-width: 768px) {
.collaboration-project {
	float: left;
	width: calc(100% - 25px) !important;
	margin-right: 25px;
	margin-top: 110px;
}
}

.collaboration-project .post_preview_image {
	margin-bottom: 40px;
}

@media (min-width: 768px) {
.collaboration-img-three {
	float: left;
	width: 65%;
	margin-left: 25px;
	margin-bottom: 50px;
}
}

@media (min-width: 768px) {
.collaboration-img-four {
	float: left;
	width: calc(100% - 25px) !important;
	margin-left: 25px;
}
}

@media (max-width: 767px) {
.collaboration-img-four {
	display: none;
}
}


.collaboration-gray-box-two {
	position: relative;
	z-index: 2;
	background-color: #ddd;
	padding: 30px;
	text-align: center;
}

.collaboration-gray-box-two-mobile {
	margin: -25px 25px 0 25px;
}
	@media (min-width: 500px) {
	.collaboration-gray-box-two-mobile {
		margin: -25px 50px 0 50px;
	}
	}

@media (min-width: 768px) {
.collaboration-gray-box-two {
	float: right;
	padding: 50px;
	text-align: right;
	margin-right: 25px;
}

.collaboration-gray-box-two-mobile {
	display: none;
}
}

@media (max-width: 767px) {
.collaboration-gray-box-two-desktop {
	display: none;
}
}




.collaboration-ruleline {
	position: absolute;
	width: 55px;
	height: 2px;
	left: 0;
	bottom: -50px;
	background-color: #d24d29;
}
	@media (max-width: 767px) {
	.collaboration-ruleline {
		display: none;
	}
	}
/*  COLLABORATION  */




/* PROCESSS - FEATURED PROJECTS */
h5.see-for-yourself {
	text-align: center;
	margin-bottom: 20px;
}

.see-for-yourself-line {
	position: relative;
	z-index: 2;
	width: 4px;
	height: 140px;
	background-color: #d24d29;
	margin-left: calc(50% - 3px);
	margin-bottom: -30px
}

.process-featuredprojects-slider, .process-featuredprojects-slider2  {
	position: relative;
}

.process-featuredprojects-slider2  {
	background-color: rgba(43, 61, 67, 1);
	margin-bottom: 100px;
}

.process-publications {
	border-top: 1px solid #E1E1E1;
	padding-top: 100px;
	padding-bottom: 100px;
	margin-top: 100px;
}

.publications-button {
	margin-top: 50px;
}

.process-featuredprojects {
	position: relative;
	background-image: url(../../img/header-home.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	text-align: center;
}
	@media (min-width: 768px) {
	.process-featuredprojects {
	} 
	}

.process-featuredprojects p {font-size: 2rem}
	@media (min-width: 768px) {
	.process-featuredprojects p {
		font-size: 3rem
	}
	}

.process-featuredprojects p a {color: #fff; text-decoration: underline;}

.process-featuredprojects-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: rgba(43, 61, 67, .8);
	z-index: 0;
	-moz-transition: all 0.5s ease-in,all 0.5s ease-out;
	-o-transition: all 0.5s ease-in,all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-in,all 0.5s ease-out;
	transition: all 0.5s ease-in,all 0.5s ease-out;
}

.process-featuredprojects-text {
	position: relative;
	z-index: 2;
	color: #fff;
	max-width: 400px;
	margin: 200px auto;
	padding: 0 50px;
}
	@media (min-width: 500px) {
	.process-featuredprojects-text {
		padding: 0;
	}
	}
	@media (min-width: 768px) {
	.process-featuredprojects-text {
		max-width: 610px;
		margin: 350px auto;
		padding: 0;
	}
	}


#process-featuredprojects-text:hover + #process-featuredprojects-overlay {
	background-color: rgba(43, 61, 67, 0);
}

.process-featuredprojects-slider .slick-slide {
	margin: 0;
}

.process-featuredprojects-slider .slick-dots {
	position: absolute;
	left: calc(50% - 49px);
	bottom: 20px;
	z-index: 5;
}
	@media (min-width: 768px) {
	.process-featuredprojects-slider .slick-dots {
		bottom: 200px;
	}	
	}

.process-featuredprojects-slider .slick-dots li {
    margin: 0 8px;
}

.process-featuredprojects-slider .slick-dots li button {
    font-size: 52px;
    line-height: 0;
    display: block;
    width: 24px;
    height: 24px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
    border: 2px solid #fff;
    border-radius: 50%;
    margin: -2px 1px 0px -3px;
}

.process-featuredprojects-slider .slick-dots li.slick-active button:before {
    color: #fff;
}
/* PROCESSS - FEATURED PROJECTS */



























header {
  height: 5.5em;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}
.top-line,
.navigation
{
	width: 100%;
	height: 5em;
	margin: 0;
	padding: 0;
	/*overflow: hidden;*/
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(255,255,255,.9);
	transition: top 0.2s ease-in-out;
}
.top-line {
	top: -1.5em;
	height: 1.5em;
}
	@media (min-width: 500px) {
	.top-line {
		top: 0;
	}
	}
	@media (min-width: 768px) {
	.top-line {
		height: 1.8em;
	}
	}
	@media (min-width: 1024px) {
	.top-line {
		height: 3.8em;
	}
	}

.navigation
{
	top: 0em;
	background-color: rgba(255,255,255,.9);
	z-index: 5;
}
	@media (min-width: 500px) {
	.navigation
	{
		top: 1.5em;
	}
	}
	@media (min-width: 768px) {
	.navigation
	{
		top: 1.8em;
	}
	}
	@media (min-width: 1024px) {
	.navigation
	{
		top: 3.8em;
	}
	}


.navigation-background
{
	background-color: rgba(255,255,255,0);
}
.nav-top {
  top: 0;
}
.top-up {
  top: -5em;
}
.nav-up {
  top: -10em;
}




@media (max-width: 767px) {
	.mix, .sort-by, .view-as {
	  display: none;
	}
}

@media (min-width: 768px) {
	.controls {
		display: none;
	}
}