.box-effect *, .box-effect *:after, .box-effect *:before {

	box-sizing: border-box

}





.is-out-of-screen {

	position: absolute;

	left: -9000px

}

.box-effect  .overlay {

	display: block;

	position: absolute;

	left: 0;

	top: 0;

	right: 0;

	bottom: 0;

	z-index: 3;

	background: #fff;

	opacity: 0

}

.disable-transitions, .disable-transitions * {

	transition: none !important

}

.ui-gray-background {

	background-color: #f3f3f3

}

.ui-light-background {

	background-color: #fff

}

.ui-dark-background {

	background-color: #fff

}





ul, ol {

	list-style: none;

	padding: 0;

	margin: 0

}

.screen {

	position: relative

}



@media screen and (min-width:768px) and (min-height:416px) {

.screen {

	min-height: 100vh

}

.screen--auto {

	min-height: 0

}

.screen.vertical-align {

	display: -ms-flexbox;

	display: flex;

	-ms-flex-align: center;

	align-items: center;

	-ms-flex-pack: center;

	justify-content: center

}

}



@media screen and (min-width:768px) and (min-height:416px) {

.screen--bottom--md-up {

	display: -ms-flexbox;

	display: flex;

	-ms-flex-direction: column;

	flex-direction: column;

	-ms-flex-pack: end;

	justify-content: flex-end

}

}

.with-scroller .scroller {

	position: fixed;

	left: 0;

	top: 0;

	width: 100%;

	height: 100vh

}

.with-scroller .scroller__content {

	position: relative;

	width: 100%;

	min-height: 100vh;

	overflow: hidden

}

.projects {

	margin-top: 54px;

	margin-top: 5.4rem;

	margin-right: -30px;

	margin-bottom: 54px;

	margin-bottom: 5.4rem;

	margin-left: -30px;

	position: relative

}

.projects:first-child {

	margin-top: 0

}

.projects:last-child {

	margin-right: 0

}

.projects:last-child {

	margin-bottom: 0

}

.projects:first-child {

	margin-left: 0

}



@media screen and (min-width:768px) and (min-height:416px) {

.projects {

	margin-top: 7rem;

	margin-right: 0px;

	margin-bottom: 10.9rem;

	margin-left: 0px

}

.projects:first-child {

	margin-top: 0

}

.projects:last-child {

	margin-right: 0

}

.projects:last-child {

	margin-bottom: 0

}

.projects:first-child {

	margin-left: 0

}

}



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

.projects {

	margin-top: 10.5rem;

	margin-right: 0px;

	margin-bottom: 18.9rem;

	margin-left: 0px

}

.projects:first-child {

	margin-top: 0

}

.projects:last-child {

	margin-right: 0

}

.projects:last-child {

	margin-bottom: 0

}

.projects:first-child {

	margin-left: 0

}

}



@media screen and (min-width:1700px) and (min-height:1000px) {

.projects {

	margin-top: 10.5rem;

	margin-right: 0px;

	margin-bottom: 27.4rem;

	margin-left: 0px

}

.projects:first-child {

	margin-top: 0

}

.projects:last-child {

	margin-right: 0

}

.projects:last-child {

	margin-bottom: 0

}

.projects:first-child {

	margin-left: 0

}

}

.projects:after {

	content: "";

	display: block;

	width: 100%;

	height: 0;

	overflow: hidden;

	clear: both

}

.projects li {

	float: left;

	width: 100%

}

.project {

	padding-top: 100%;

	float: left;

	position: relative

}

.project--top {

	z-index: 1

}

.project__content {

	position: absolute;

	right: 0;

	bottom: 0;

	width: 100%;

	height: 100%

}

.project__content .h4, .project__content p {

	position: relative;

	z-index: 2

}

.project__background {

	position: absolute;

	left: 0;

	top: 0;

	width: 100%;

	height: 100%;

	overflow: hidden

}

.project__background img {

	position: absolute;

	left: 0;

	top: -5%;

	width: 110%;

	height: 110%

}

.project__background--type1:before {

	content: '';

	position: absolute;

	right: -35%;

	top: -54%;

	width: 120%;

	height: 100%;

	background: radial-gradient(ellipse at center, #239f46 0%, rgba(239,168,173,0) 60%, rgba(255,255,255,0) 100%);

	z-index: 1

}

.project__background--type1:after {

	content: '';

	position: absolute;

	left: -50%;

	bottom: -50%;

	width: 150%;

	height: 100%;

	background: radial-gradient(ellipse at center, #d82533 0%, rgba(239,168,173,0) 60%, rgba(255,255,255,0) 100%);

	z-index: 1

}

.project__background--type2:before {

	content: '';

	position: absolute;

	left: -50%;

	top: -50%;

	width: 120%;

	height: 120%;

	background: radial-gradient(ellipse at center, #fc712c 0%, rgba(254,198,171,0) 60%, rgba(255,255,255,0) 100%);

	z-index: 1

}

.project__background--type2:after {

	content: '';

	position: absolute;

	left: -50%;

	bottom: -50%;

	width: 120%;

	height: 120%;

	background: radial-gradient(ellipse at center, #0bcbd2 0%, rgba(157,234,237,0) 60%, rgba(255,255,255,0) 100%);

	z-index: 1

}

.project__background--type3:before {

	content: '';

	position: absolute;

	right: -35%;

	top: -54%;

	width: 120%;

	height: 100%;

	background: radial-gradient(ellipse at center, #2878db 0%, rgba(169,201,241,0) 60%, rgba(255,255,255,0) 100%);

	z-index: 1

}

.project__background--type3:after {

	content: '';

	position: absolute;

	left: -50%;

	bottom: -50%;

	width: 150%;

	height: 100%;

	background: radial-gradient(ellipse at center, #239f46 0%, rgba(239,168,173,0) 60%, rgba(255,255,255,0) 100%);

	z-index: 1

}

.project__background--type4:before {

	content: '';

	position: absolute;

	left: -30%;

	top: -60%;

	width: 120%;

	height: 120%;

	background: radial-gradient(ellipse at center, #0bcbd2 0%, rgba(157,234,237,0) 60%, rgba(255,255,255,0) 100%);

	z-index: 1

}

.project__background--type4:after {

	content: '';

	position: absolute;

	left: -50%;

	bottom: -50%;

	width: 120%;

	height: 120%;

	background: radial-gradient(ellipse at center, #fc712c 0%, rgba(254,198,171,0) 70%, rgba(255,255,255,0) 100%);

	z-index: 1

}

.project__background--type5:before {

	content: '';

	position: absolute;

	left: -52%;

	top: -44%;

	width: 120%;

	height: 100%;

	background: radial-gradient(ellipse at center, #d82533 0%, rgba(239,168,173,0) 70%, rgba(255,255,255,0) 100%);

	z-index: 1

}

.project__background--type5:after {

	content: '';

	position: absolute;

	left: -50%;

	bottom: -50%;

	width: 150%;

	height: 100%;

	background: radial-gradient(ellipse at center, #239f46 0%, rgba(239,168,173,0) 60%, rgba(255,255,255,0) 100%);

	z-index: 1

}

.project__background--type-osa:before {

	content: '';

	position: absolute;

	left: -30%;

	top: -60%;

	width: 120%;

	height: 120%;

	background: radial-gradient(ellipse at center, #fc712c 0%, rgba(252,113,44,0) 60%, rgba(255,255,255,0) 100%);

	z-index: 1

}

.project__background--type-osa:after {

	content: '';

	position: absolute;

	left: -50%;

	bottom: -50%;

	width: 120%;

	height: 120%;

	background: radial-gradient(ellipse at center, #0bcbd3 0%, rgba(11,203,211,0) 70%, rgba(255,255,255,0) 100%);

	z-index: 1

}

.project__background--type-camping-world:before {

	content: '';

	position: absolute;

	left: -30%;

	top: -60%;

	width: 120%;

	height: 120%;

	background: radial-gradient(ellipse at center, #ef9d00 0%, rgba(239,157,0,0) 60%, rgba(255,255,255,0) 100%);

	z-index: 1

}

.project__background--type-camping-world:after {

	content: '';

	position: absolute;

	left: -50%;

	bottom: -50%;

	width: 120%;

	height: 120%;

	background: radial-gradient(ellipse at center, #0089c8 0%, rgba(0,137,200,0) 70%, rgba(255,255,255,0) 100%);

	z-index: 1

}

.project-large h3, .project-large p {

	position: relative;

	margin: 0

}

.project-large h3 small {

	display: block;

	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

	font-weight: 400

}

.project-large h3 img {

	display: block;

	margin-top: 6px

}

.project-large p {

	line-height: 1.38889em

}

.project-large .project__content {

	display: -ms-flexbox;

	display: flex;

	-ms-flex-direction: column;

	flex-direction: column;

	-ms-flex-pack: justify;

	justify-content: space-between;

	padding: 26px 30px;

	transition-property: box-shadow, width, height;

	transition-duration: .8s

}

.project-large .project__content__spacer {

	-ms-flex: 1 0 auto;

	flex: 1 0 auto

}

.project-large.is-visible .project__content {

	box-shadow: 0 100px 200px rgba(0,0,0,0.5)

}

.has-hover .project-large:hover.project-ready .project__content {

	width: calc(100% + 40px);

	height: calc(100% + 40px)

}

.has-hover .project-large:hover.project-ready .project__content _:-ms-input-placeholder, :root .has-hover .project-large:hover.project-ready .project__content {

width:108%;

height:108%

}

.has-hover .project-large:hover.project-ready .project__content _:-ms-lang(x), .has-hover .project-large:hover.project-ready .project__content _:-webkit-full-screen, .has-hover .project-large:hover.project-ready .project__content {

width:108%;

height:108%

}

.project-placeholder {

	width: 50%;

	padding-top: 50%

}

.project-small {

	width: 50%;

	padding-top: 50%

}

.project-small--light .project__content {

	background: #fff

}

.project-small--dark .project__content {

	background: #2c2929

}

.project-small--a .project__content {

	background: #d82533

}

.project-small--c .project__content {

	background: #2878db

}

.project-small .project__content {

	display: -ms-flexbox;

	display: flex;

	-ms-flex-pack: center;

	justify-content: center;

	-ms-flex-align: center;

	align-items: center

}

.project-small .project__btn, .project-small .project__link {

	position: static

}

.project-small .project__btn:before, .project-small .project__link:before {

	display: block;

	position: absolute;

	left: 0;

	top: 0;

	right: 0;

	bottom: 0;

	content: ""

}

.project-small .project__link {

	text-align: center;

	line-height: 27px

}

.project-small .project__link__line {

	display: inline-block;

	border-bottom: 1px solid rgba(255,255,255,0.5);

	transition-property: border-color

}

.project-small .project__link .icon {

	display: inline-block;

	margin-top: 20px

}

.has-hover .project-small .project__link:hover .project__link__line {

	border-color: transparent

}

.badge {

	position: absolute;

	left: 0;

	bottom: 73px;

	display: block;

	width: 60px;

	height: 60px;

	border-radius: 80px;

	color: #fff;

	text-align: center;

	font-size: 18px;

	font-weight: 600;

	line-height: 60px;

	transition-property: opacity;

	transition-duration: .8s;

	opacity: 0

}

.is-visible .badge {

	opacity: 1

}

.badge--a {

	background-color: #d82533

}

.badge--b {

	background-color: #239f46

}

.badge--c {

	background-color: #2878db

}

.badge--d {

	background-color: #fc712c;

	font-size: 15px;

	padding-right: 2px

}

.badge--e {

	background-color: #0bcbd2

}



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

.projects li {

	width: 50%

}

.projects li:nth-child(2n+1) {

	clear: left

}

.project-large {

	width: 50%;

	padding-top: 50%

}

.project-large h3 img {

	margin-top: 35px

}

.project-large .project__content {

	padding: 40px 50px

}

.badge {

	left: -90px;

	bottom: 15px;

	width: 80px;

	height: 80px;

	font-size: 24px;

	line-height: 80px

}

.badge--d {

	font-size: 20px;

	padding-right: 4px

}

}



@media screen and (min-width:1700px) and (min-height:1000px) {

.project-large h3 img {

	margin-top: 35px

}

.project-large .project__content {

	padding: 72px 80px

}

.badge {

	left: -140px;

	bottom: 20px;

	width: 120px;

	height: 120px;

	border-radius: 120px;

	font-size: 40px;

	line-height: 120px

}

.badge--d {

	font-size: 30px

}

}

.appear-overlay {

	position: absolute;

	left: 0;

	top: 0;

	width: 100%;

	height: 100%;

	overflow: hidden;

	transform: scale(1.0075)

}

.appear-overlay:before, .appear-overlay:after {

	display: block;

	content: "";

	position: absolute;

	left: 0;

	top: -5%;

	width: 100%;

	height: 110%;

	background: #221f1f

}

.appear-overlay:before {

	opacity: 1;

	transition: opacity 0ms;

	transition-delay: 560ms;

	will-change: opacity

}

.appear-overlay:after {

	background: #2c2929;

	width: 110%;

	transform: translateX(-110%);

	transition: transform 1500ms cubic-bezier(0.55, 0, 0.1, 1);

	will-change: transform

}

.appear-overlay.is-active:before {

	opacity: 0

}

.appear-overlay.is-active:after {

	transform: translateX(100%)

}





.has-hover .project-large:hover.project-ready .project__content {

    width: calc(100% + 40px);

    height: calc(100% + 40px);

}





@media (max-width:766px) {

	.projects {

		display: -ms-flexbox;

		display: flex;

		-ms-flex-direction: column;

		flex-direction: column

	}

	.projects li:nth-child(3), .projects li:nth-child(5), .projects li:nth-child(6), .projects li:nth-child(8) {

		-ms-flex-order: 1;

		order: 1

	}

	.projects li:nth-child(7), .projects li:nth-child(9), .projects li:nth-child(10) {

		-ms-flex-order: 3;

		order: 3

	}

	}

	







	

/* 





@media screen and (max-width:979px) and (max-height:415px) and (orientation:landscape), (max-width:768px) {

	.projects {

		display: -ms-flexbox;

		display: flex;

		-ms-flex-direction: column;

		flex-direction: column

	}

	.projects li:nth-child(3), .projects li:nth-child(5), .projects li:nth-child(6), .projects li:nth-child(8) {

		-ms-flex-order: 1;

		order: 1

	}

	.projects li:nth-child(7), .projects li:nth-child(9), .projects li:nth-child(10) {

		-ms-flex-order: 3;

		order: 3

	}

	}

	

	@media screen and (min-width:768px) and (max-width:979px) and (min-height:416px) {

	.project-placeholder {

		display: none

	}

	.projects {

		margin-left: 0;

		margin-right: 0

	}

	.projects li {

		width: 33%

	}

	.project-small {

		width: 100%;

		padding-top: 100%

	}

	.project-small .project__btn {

		-ms-flex-direction: column;

		flex-direction: column;

		text-align: center

	}

	.project-small .project__btn .icon:not(:last-child) {

		margin: 0 0 7px

	}

	.project-large h3 img {

		margin-top: 13px

	}

	.project-large p {

		font-size: 1.6rem;

		line-height: 1.375em

	}

	.project-large .project__content {

		padding: 40px

	}

	.projects .project-large {

		width: 66%;

		padding-top: 66%

	}

	.badge {

		left: 0;

		bottom: 70px;

		width: 70px;

		height: 70px;

		font-size: 20px;

		line-height: 70px

	}

	.badge--d {

		font-size: 18px;

		padding-right: 4px

	}

	} */