section.banner {
	position: relative;
	@media (min-width: $screen-sm) {
		overflow: hidden;
		display: flex;
		align-items: center;
		padding: 80px 0;
	}
	@media (min-width: $screen-xl) {
		height: 840px;
		height: calc( 100vh - 71px );
	}
	.video-home, .canvas {
		top: 0;
		left: 0;
		width: 100%;
		@media (min-width: $screen-sm) {
			position: absolute;
		}
	}
	h6 {
		margin: 0;
	}
	h1 {
		margin: 30px 0 0 0;
	}
	.btn-custom {
		margin-top: 20px;
		width: 240px;
		@media (min-width: $screen-sm) {
			margin-top: 40px;	
		}
	}
	.text-container {
		margin-top: 20px;
		@media (min-width: $screen-sm) {
			margin-top: 0;
		}
	}
	.go-down {
		position: absolute;
		bottom: -60px;
		left: 50%;
		transform: translateX(-50%);
		width: 21px;
		height: 27px;
		padding: 0;
		background: none;
		background-image: url('../images/arrow-go-down.png');
		background-repeat: no-repeat;
		background-position: center;
		background-size: 21px 27px;
		border: 0;
		@media (min-width: $screen-sm) {
			bottom: 60px;
		}
	}
}

@keyframes type {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.animate-letters {
	margin: 0;
	text-align: center;
	span.char {
		opacity: 0;
	}
	&.animate {
		span.char {
			animation-name: type;
			animation-fill-mode: forwards;		
		}
		.first-word {
			span.char {
				&:nth-of-type(1) {
					animation-delay: 0.1s;
				}
				&:nth-of-type(2) {
					animation-delay: 0.2s;
				}
				&:nth-of-type(3) {
					animation-delay: 0.3s;
				}
				&:nth-of-type(4) {
					animation-delay: 0.4s;
				}
				&:nth-of-type(5) {
					animation-delay: 0.5s;
				}
			}
		}
		.second-word {
			span.char {
				&:nth-of-type(1) {
					animation-delay: 0.7s;
				}
				&:nth-of-type(2) {
					animation-delay: 0.8s;
				}
				&:nth-of-type(3) {
					animation-delay: 0.9s;
				}
				&:nth-of-type(4) {
					animation-delay: 1s;
				}
				&:nth-of-type(5) {
					animation-delay: 1.1s;
				}
				&:nth-of-type(6) {
					animation-delay: 1.2s;
				}
				&:nth-of-type(7) {
					animation-delay: 1.3s;
				}
			}
		}
		.third-word {
			span.char {
				&:nth-of-type(1) {
					animation-delay: 1.5s;
				}
				&:nth-of-type(2) {
					animation-delay: 1.6s;
				}
				&:nth-of-type(3) {
					animation-delay: 1.7s;
				}
				&:nth-of-type(4) {
					animation-delay: 1.8s;
				}
				&:nth-of-type(5) {
					animation-delay: 1.9s;
				}
			}
		}
		.plus {
			animation-name: type;
			animation-fill-mode: forwards;			
			&.first-plus {
				animation-delay: 0.6s;	
			}
			&.second-plus {
				animation-delay: 1.4s;
			}				
		}
	}
	
	.underline {
		position: relative;
		display: block;
		@media (min-width: $screen-sm) {
			display: inline-block;
		}
		&:after {
			@media (min-width: $screen-lg) {
				content: '';
				position: absolute;
				bottom: 6px;
				left: 0;
				width: 100%;
				height: 3px;
				background-color: #000;
			}
		}
	}
	.plus {
		display: inline-block;
		width: 20px;
		height: 20px;
		margin: 10px 0;
		@include retina-background-image('../images/icon-plus','png', '34px', '34px');
		background-repeat: no-repeat;
		background-size: 100%;
		opacity: 0;
		transition: opacity 0.3s ease-in-out;
		@media (min-width: $screen-sm) {
			width: 34px;
			height: 34px;
			margin: 0 10px;
		}
	}
}

section.we-do {
	padding: 130px 0 30px 0;
	@media (min-width: $screen-md) {
		padding: 200px 0;	
	}
	.h1 {
		@media (min-width: $screen-sm) {
			text-align: left;
		}
	}
	.h6 {
		margin: 0 0 20px 0;
	}
	p {
		margin: 40px 0;
		@media (min-width: $screen-sm) {
			margin: 40px 0 60px 0;	
		}
	}
}

figure.item {
	position: relative;
	&:hover figcaption {
		opacity: 1;
	}
	figcaption {
		position: absolute;
		top: 15px;
		left: 15px;
		right: 15px;
		bottom: 15px;
		padding: 15px;
		background-color: rgba(255, 255, 255, 0.8);
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transition: all 0.3s ease-in-out;
		h6 {
			margin: 0;
			font-weight: bold;
			@include rem('font-size', 2.2rem);
		}
		.check {
			position: absolute;
			bottom: 30px;
			left: 0;
			right: 0;
			&:before {
				content: '';
				width: 26px;
				height: 2px;
				background-color: #000;
				vertical-align: middle;
				display: inline-block;
				margin-right: 9px;
			}
		}
	}
}	


figure.item-2 {
	position: relative;
	background-size: cover;
	height: 300px;
	@media (min-width: $screen-lg) {
		height: 390px;
	}
	.big & {
		@media (min-width: $screen-md) {
			height: 400px;	
		}
		@media (min-width: $screen-lg) {
			height: 530px;	
		}
	}
	&:hover {
		figcaption {
			top: 15px;
			left: 15px;
			right: 15px;
			bottom: 15px;
			padding: 15px;
		}
		.check {
			opacity: 1;
		}
	}
	figcaption {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 30px;
		
		background-color: rgba(255, 255, 255, 0.8);
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		transition: all 0.3s ease-in-out;
		h6 {
			margin: 0;
			font-weight: bold;
			@include rem('font-size', 2.2rem);
		}
		.category {
			display: block;
			margin-bottom: 35px;
		}
		.check {
			position: absolute;
			bottom: 30px;
			left: 0;
			right: 0;
			opacity: 0;
			transition: all 0.3s ease-in-out;
			&:before {
				content: '';
				width: 26px;
				height: 2px;
				background-color: #000;
				vertical-align: middle;
				display: inline-block;
				margin-right: 9px;
			}
		}
	}
}	

section.selected-work {
	padding: 40px 0;
	&.portfolio {
		position: relative;
		h1 {
			text-align: center;
			margin: 80px 0 100px 0;	
		}
		.badge-side {
			@media (min-width: $screen-md) {
				width: 30px;
				height: 100px;
				background-color: $aqua;
				position: absolute;
				left: 0;
				top: 400px;
			}
		}
	}
	h2 {
		text-align: center;
	}
	.row .row {
		@media (min-width: $screen-md) {
			margin: 0;	
		}	
	}
	.projects {
		padding: 0 15px;
	}
	figure.item {
		height: 240px;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		@media (min-width: $screen-sm) {
			height: 300px;
		}
		@media (min-width: $screen-xl) {
			height: 390px;
		}
		&.item-big {
			@media (min-width: $screen-md) {
				height: 600px;
			}
			@media (min-width: $screen-xl) {
				height: 780px;
			}
		}
	}
	img {
		filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
	    filter: grayscale(100%);
	    -webkit-filter: grayscale(100%);
	    transition: filter 0.3s ease-in-out, -webkit-filter 0.3s ease-in-out;
	}
	a:hover img {
	    filter: none;
	    -webkit-filter: grayscale(0);
	}
	.btn-custom {
		margin-top: 50px;
	}
}

section.studio {
	padding: 40px 0;
	@media (min-width: $screen-sm) {
		padding: 165px 0;	
	}
	.text-wrapper {
		@media (min-width: $screen-sm) {
			padding-top: 105px;
		}
		@media (min-width: $screen-xl) {
			padding-top: 135px;	
		}
	}
	h2 {
		@media (min-width: $screen-md) {
			margin-left: -80px;
		}
		@media (min-width: $screen-xl) {
			margin-left: -250px;	 
		}
	}
	.btn-custom {
		margin-top: 20px;
		@media (min-width: $screen-sm) {
			margin-top: 50px;	
		}
	}
	img {
		&:focus, &:hover {
			outline: none;	
		}
	}

}


button.slick-arrow {
	background-color: $aqua;
	border: 0;
	width: 50px;
	height: 50px;
	z-index: 600;
	background-size: 18px 14px;
	background-repeat: no-repeat;
	background-position: center;
	transition: all 0.3s ease-in-out;

	&.slick-prev {
		left: 0;
		background-image: url('../images/arrow-white-left.png');
	}
	&.slick-next {
		right: 0;
		background-image: url('../images/arrow-white-right.png');
	}
	&:before {
		display: none;
	}
}

.slick-dots {
	bottom: 15px;
	li {
		width: 8px;
		height: 8px;
		&:before {
			display: none;
		}
		&.slick-active {
			button {
				&:before {
					border: 1px solid #fff;
					background: transparent;
				}
			}
		}
		button {
			width: auto;
			height: auto;
			&:before {
				content: '';
				width: 8px;
				height: 8px;
				background: #fff;
				opacity: 1;
				border-radius: 50%;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}
}

section.single-photography, section.single-movie {
	padding: 30px 0;
	@media (min-width: $screen-md) {
		padding: 50px 0;	
	}
	.description {
		margin-bottom: 40px;
	}
	.buttons-wrapper {
		padding: 0 0 50px 0;
	}
	
	.slick-slide:focus {
		outline: none;
	}
	
	.slider-nav {
		.slick-thumbnail {
			height: 160px;
		    background-size: cover;
		    background-position: center;
		    img {
			    height: 100%;
			    max-width: 100%;
		    }
		}
		.slick-thumbnail:not(.slick-current) {
			opacity: 0.5;
		}
	}
}

section.single-photography {
	.paginationWrapper {
		text-align: center;
		padding-bottom: 20px;
	}
	.slick-prev, .slick-next {
		background: none;
		border: 0;
		width: 9px;
		height: 7px;
		background-size: 9px 7px;
		background-repeat: no-repeat;
		
		position: static;
		display: inline-block;
	    transform: none;
	    &:before {
		    display: none;
	    }
	}
	
	.slick-prev {
		background-image: url('../images/icon-arrow-left-black.png');
	}
	.slick-next {
		background-image: url('../images/icon-arrow-right-black.png');
	}
	
	.pagingInfo {
		display: inline-block;
		padding: 0 10px;
		@include rem('font-size', 1.3rem);
		font-weight: bold;
	}
}

section.we-think-ahead {
	padding: 50px 0;
	@media (min-width: $screen-md) {
// 		padding: 170px 0;	
	}
	h2 {
		position: relative;
		&:before {
			content: '';
			display: block;
			width: 50px;
			height: 6px;
			background-color: $aqua;
			position: absolute;
			left: 0;
			top: -45px;
		}
	}
}

section.careers {
	padding: 40px 0;
	@media (min-width: $screen-sm) {
		padding: 70px 0;	
	}
	h2 {
		text-align: center;
	}
	a {
		margin-bottom: 20px;
		display: block;
		h6 {
			margin: 0;
		}
	}
	span {
		display: block;
		margin-bottom: 10px;
		margin-top: 10px;
		color: #000;
		position: relative;
		transition: all 0.3s ease-in-out;
		&:before {
			content: '';
			width: 30px;
			height: 2px;
			background-color: #000;
			display: inline-block;
			margin-right: 10px;
		    vertical-align: super;
		    transition: all 0.3s ease-in-out;
		}
		&:hover {
			color: $aqua;
			&:before {
				background-color: $aqua;
			}
		}
	}
	p {
		margin-bottom: 30px;
	}
	.btn-custom {
		margin-top: 40px;
		margin-bottom: 40px;
		@include center-block;
	}
}

section.what-we-do {
	padding: 60px 0;
	@media (min-width: $screen-sm) {
		padding: 120px 0;	
	}
	h2 {
		font-weight: bold;
		margin: 0 0 10px 0;
		@include rem('font-size', 2.2rem);
	}
	.check {
		margin-top: 10px;
		margin-bottom: 40px;
		display: inline-block;
		background-image: url('../images/arrow-right-black.png');
		background-size: 18px 14px;
		background-position: right 10px center;
		background-repeat: no-repeat;
		padding-right: 38px;
		transition: all 0.3s ease-in-out;
		@media (min-width: $screen-sm) {
			margin-top: 20px;
		}
		&:hover {
			background-position: right 0 center;
		}
	}
	.btn-custom {
		margin-top: 30px;
		@media (min-width: $screen-sm) {
			margin-top: 90px;
		}
	}
	
	.box-we-do {
		@media (max-width: $screen-xs-max) {
			margin-bottom: 40px;
		}
	}
}

section.office-photo {
	padding: 30px 0;
	@media (min-width: $screen-md) {
		padding: 60px 0;	
	}
}

section.how-we-do {
	padding: 40px 0;
	h4 {
		margin: 35px 0 10px 0;	
	}
	img {
		display: block;
		margin: 0 auto 40px auto;
		@media (min-width: $screen-md) {
			margin: 0;
		}
	}
}

section.process {
	padding: 50px 0;
	@media (min-width: $screen-md) {
		padding: 125px 0;	
	}
	
	.timeline {
		position: relative;

	
		&-grid {
			margin-top: 130px;
			
			.item {
				min-height: 282px;
				border-left: 2px solid #f2f1f1;
				border-right: 2px solid #f2f1f1;
			}
		}
	
		&-items {
			
			position: absolute;
			left: 0;
			right: 0;
			top: 100px;
			
			.name {
				padding-top: 55px;
				@include rem('font-size', 3.4rem);
			}
			
			.line {
				min-height: 10px;
				background-color: #00ecff;
				position: relative;
				display: inline-block;
				width: 100%;
				
				&:after {
					content: '';
					display: block;
					position: absolute;
						right: -30px;
					width: 0;
					height: 0;
					border: {
						style: solid;
						width: 5px 15px;
						color: transparent;
					};
					border-left-color: #00ecff;
					border-bottom-color: #00ecff;
				}
				
				&-1 {
					margin-bottom: 30px;
					background-color: #9bf8ff;
					
					
					&:after {
						border-left-color: #9bf8ff;
						border-bottom-color: #9bf8ff;
					}
				}
				&-2 {
					margin-top: 20px;
					margin-bottom: 10px;
					background-color: #00ecff;
					
					&:after {
						border-left-color: #00ecff;
						border-bottom-color: #00ecff;
					}
				}
				&-3 {
					margin-top: 10px;
					margin-bottom: 20px;
					background-color: #00cddc;
					
					&:after {
						border-left-color: #00cddc;
						border-bottom-color: #00cddc;
					}
				}
				

			}
			
		}
	}

	figure {
		position: relative;
		figcaption {
			position: absolute;
			left: 15px;
			bottom: 30px;
			@include rem('font-size', 3.4rem);
		}
	}
}

section.project-www {
	padding: 30px 0;
	@media (min-width: $screen-md) {
		padding: 120px 0;	
	}
}


section.our-offices {
	padding: 40px 0;
	@media (min-width: $screen-md) {
		padding: 50px 0 110px 0;	
	}
	
	

	
	figure {
		background-color: #fff;
		
		
		height: 280px;
		position: relative;
		transition: all 0.3s ease-in-out;
		margin-bottom: 40px;
		@media (min-width: $screen-md) {
			margin-bottom: 0;
		}
		img {
			height: 100%;
// 			width: 100%;
			opacity: 0;
			transition: opacity 0.3s ease-in-out;
		}
		figcaption {
			width: 100%;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
			color: #000;
			transition: all 0.3s ease-in-out;
			h3 {
				@include rem('font-size', 4rem);
				font-weight: bold;
				margin: 0 0 10px 0;
			}
		}
		&:hover {
			img {
				opacity: 1;
			}
			figcaption {
				color: #fff;
			}
		}
	}
	
	a {
		display: block;
// 		background-color: #f0f;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		
		&.bdg {
			background-image: url('#{$img}/bydgoszcz_kontakt.jpg');
		}
		&.wwa {
			background-image: url('#{$img}/warszawa_kontakt.jpg');
		}
		
		
		&:hover {
			figure {
				background-color: transparent;	
			}
		}
	}
}

section.our-history {
	padding: 70px 0;
	@media (min-width: $screen-md) {
		padding: 100px 0;
	}
	@media (min-width: $screen-lg) {
		padding: 195px 0;
	}
	h1 {
		margin-top: 40px;
	}
}

section.basics {
	padding: 55px 0 30px 0;
	@media (min-width: $screen-md) {
		padding: 65px 0;	
	}
	h2 {
		margin-top: 40px;
		@media (min-width: $screen-lg) {
			margin-top: 225px;
		}
	}
}

section.welcome-inside {
	padding: 20px 0;
	@media (min-width: $screen-md) {
		padding: 80px 0;	
	}
	@media (min-width: $screen-lg) {
		padding: 170px 0;
	}
	.text {
/*
		@media (min-width: $screen-md) {
			z-index: 123;
			position: absolute;
			top: -115px;
		}
*/
	}
	.btn-arrow {
		display: inline-block;
		margin-bottom: 20px;
		@media (min-width: $screen-md) {
			margin-top: 170px;
			margin-bottom: 0;
		}
	}
}

section.bdp {
	padding: 100px 0 70px 0;
	position: relative;
	@media (min-width: $screen-xs) {
		padding: 170px 0 130px 0;	
	}
	@media (min-width: $screen-lg) {
		padding: 210px 0;	
	}
	.bigLetter {
		@include rem('font-size', 40rem);
		color: #f6f7f9;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		font-weight: 700;
		z-index: -1;
		@media (min-width: $screen-sm) {
			@include rem('font-size', 74rem);	
		}
	}
	h2 {
		position: relative;
		margin: 0;
		.underline {
			position: relative;
			display: block;
			@media (min-width: $screen-sm) {
				display: inline-block;
			}
			&:after {
				@media (min-width: $screen-lg) {
					content: '';
					position: absolute;
					bottom: 6px;
					left: 0;
					width: 100%;
					height: 3px;
					background-color: #000;
				}
			}
		}
		.plus {
			display: inline-block;
			width: 20px;
			height: 20px;
			margin: 10px 0;
			@include retina-background-image('../images/icon-plus','png', '34px', '34px');
			background-repeat: no-repeat;
			background-size: 100%;
			@media (min-width: $screen-sm) {
				width: 34px;
				height: 34px;
				margin: 0 10px;
			}
		}
	}
	p {
		margin: 30px 0;
		@media (min-width: $screen-sm) {
			margin: 50px 0;	
		}
	}
}

section.we-love {
	padding: 30px 0;
	@media (min-width: $screen-sm) {
		padding: 100px 0;	
	}
	p.h1 {	
		z-index: 1234;
		position: relative;
		margin-bottom: 30px;
		@media (min-width: $screen-xl) {
			padding-left: 100px;	
		}
	}
	.image {
		@media (min-width: $screen-md) {
			margin-left: -16.6666666667%;
		}
	}
}

section.few-photos {
	padding: 30px 0;
	@media (min-width: $screen-sm) {
		padding: 70px 0;	
	}
}


.social-panel {
	position: absolute;
	top: -50px;
	@media (min-width: $screen-md){
		left: -30px;
		top: 0;
	}
	a {
		display: inline-block;
		&:hover,
		&:focus {
			color: $aqua;
		}
		
		
		&:not(:first-child) {
			margin-left: 60px;	
		}
		@media (min-width: $screen-md){
			text-align: center;
			display: block;
			margin-left: 0;
			margin-top: 65px;
			&:not(:first-child) {
				margin-left: 0;	
			}
		}
	}
}


.buttons-wrapper {
	padding: 50px 0;
	button {
		display: inline-block;
		@include rem('font-size', 1.4rem);
		@include rem('line-height', 1.4rem);
		font-weight: bold;
		border: 0;
		border-bottom: 1px solid transparent;
		background-color: transparent;
		padding: 0;
		padding-bottom: 2px;
		margin-left: 10px;
		&.active {
			border-bottom: 1px solid #000;
		}
	}
	
	.nav-cats {
		@media (max-width: $screen-sm-max) {
			margin-top: 40px;
		}
	}
}

section.photography {
	.title-header {
		padding: 50px 0 80px 0;
	}
	
	.photos {
		padding-bottom: 200px;
	}
	figure.item {
		margin-top: 160px;
	}
	.first-column figure.item:first-of-type {
		margin-top: 0;
	}
}

section.blog {
	padding: 0 0 80px 0;
	.title-header {
		padding: 50px 0;
	}
}

section.single-article {
	.back-wrapper {
		padding: 45px 0;
	}
	.article-header {
		padding-bottom: 120px;
		h5 {
			font-weight: bold;
		}
		h1 {
			margin: 35px 0;
		}
		.leader {
			@include rem('font-size', 2.4rem);
		}
	}
	.content {
		position: relative;
		padding: 40px 0;
		@media (min-width: $screen-md) {
			padding: 150px 0;	
		}
	}
	.author {
		padding-bottom: 30px;
		border-bottom: 2px solid grey;
		margin-bottom: 30px;
		@media (min-width: $screen-md) {
			position: absolute;
			top: 0;
			right: 40px;
			width: 165px;
			margin-bottom: 0;
			padding-bottom: 0;
			border: 0;
		}
		@media (min-width: $screen-xl) {
			right: 150px;	
		}
		.img-wrapper {
			margin-bottom: 25px;
		    float: left;
			margin-right: 20px;
			@media (min-width: $screen-md) {
				float: none;
				margin-right: 0;
			}
			img {
				border-radius: 50%;
				width: 50px;
				height: 50px;
				margin: 0 auto;
				@media (min-width: $screen-md) {
					width: 120px;
					height: 120px;					
				}
			}
		}
		h6 {
			margin: 0;
			font-weight: bold;
		}
		.author-title {
			@include rem('font-size', 1.4rem);
			@include rem('line-height', 1.4rem);
			margin-top: 3px;
		}
		.publish-date {
			@include rem('font-size', 1.4rem);
			margin: 15px 0;
			@media (min-width: $screen-md) {
				margin: 30px 0;	
			}
		}
		ul.share {
			list-style: none;
			margin: 15px 0 0 0;
			padding: 0;
			li {
				display: inline-block;
				margin-right: 1px;
				&:before {
					display: none;
				}
				a {
					display: block;
					color: #fff;
					width: 36px;
					height: 36px;
					line-height: 36px;
					text-align: center;
					background-color: $share-black-bg;
					transition: all 0.3s ease-in-out;
					&:hover {
						background-color: $aqua;
					}
				}
			}
		}
	}
	
	.article-content {
		margin-bottom: 30px;
		h3 {
			@include rem('font-size', 4rem);
			line-height: 40px;
			margin: 0 0 40px 0;
		}
		p {
			margin-bottom: 40px;
			
			a {
				&:hover {
					color: #00e9fb;
					transition: all 0.25s linear;
				}
			}
		
		}
		
		
	}
	
	.article-movie, .article-image {
		margin-bottom: 70px;
	}
}

.back-to-posts {
	text-align: center;
	a.button-with-dash {
		@include rem('font-size', 2rem);
		font-weight: normal;
	}
}

.read-also {
	padding-bottom: 70px;
}

section.newsletter {
	padding: 70px 0;
	h3.h2 {
		margin: 0;
		@include rem('font-size', 4rem);
		margin-bottom: 40px;
	}
	input {
		@include rem('font-size', 1.6rem);
		text-align: center;
		padding: 13px 20px;
		width: 100%;
		border: 2px solid $newsletter-border;
		&::-webkit-input-placeholder {
		    color: $newsletter-placeholder;
		}
		&:-moz-placeholder {
		   color: $newsletter-placeholder;
		   opacity: 1;
		}
		&::-moz-placeholder {
		   color: $newsletter-placeholder;
		   opacity: 1;
		}
		&:-ms-input-placeholder {
		   color: $newsletter-placeholder;
		}
		
		@media (max-width: $screen-sm-max) {
			margin-bottom: 20px;
		}
		
	}
	button.btn-custom.btn-aqua-bg {
		display: block;
		width: 100%;
		padding: 13px 20px;
		color: #000;
		font-weight: bold;
	}
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

section.movies {
/*
	padding: 60px 0;
	.buttons-wrapper {
		padding: 0 0 50px 0;
	}
*/
	.item {
		margin-bottom: 90px;
		h5 {
			@include rem('font-size', 2.2rem);
			font-weight: bold;
			margin: 0;
		}
		.infos {
			padding-top: 30px;
		}
		.details-wrapper {
			text-align: right;
		}
	}
	
}


section.contact-page {
	padding: 40px 0;

	.contact-info {
		padding: 30px 0;
		@media (min-width: $screen-md){
			padding: 80px 0;	
		}
		h3 {
			font-weight: normal;
			margin: 0;
			.small {
				color: #000;
			}
		}
	}
	.addresses {
		padding: 50px 0;
		@media (min-width: $screen-md){
			padding: 100px 0;	
		}
	}
	.maybe-you-know {
		padding: 60px 0 50px 0;
		position: relative;
		@media (min-width: $screen-md){
			padding: 180px 0 100px 0;	
		}
		.social-panel {
			top: 0;
			left: 15px;
			@media (min-width: $screen-md){
				top: 60px;
			}
		}
	}
	.roles {
		padding: 0 0 40px 0;
		@media (min-width: $screen-md){
			padding: 0 0 230px 0;	
		}
		.h6 {
			margin: 0 0 40px 0;
			font-weight: bold;
			@media (max-width: $screen-md){
				margin-bottom: 20px;
			}
		}
		.box-contact {
			@media (max-width: $screen-md-max) {
				margin-bottom: 60px;
			}
		}
	}
	.contact-form {
		position: relative;
		.h4 {
			font-weight: bold;
			margin: 0 0 20px 0;
			@media (min-width: $screen-md){
				margin: 0 0 90px 0;	
			}
		}
		.wpcf7 {
			input[type="text"], textarea {
				
				@extend .form-control;
				
/*
				width: 100%;
				border: 2px solid $border-input;
				padding: 11px 20px;
				transition: all 0.3s ease-in-out;
				&::-webkit-input-placeholder {
				    color: $placeholder;
				}
				&:-moz-placeholder {
				   color: $placeholder;
				   opacity:  1;
				}
				&::-moz-placeholder {
				   color: $placeholder;
				   opacity:  1;
				}
				&:-ms-input-placeholder {
				   color: $placeholder;
				}
*/
/*
				&:focus {
					border-color: $aqua;
					&::-webkit-input-placeholder {
					    color: #000;
					}
					&:-moz-placeholder {
					   color: #000;
					   opacity:  1;
					}
					&::-moz-placeholder {
					   color: #000;
					   opacity:  1;
					}
					&:-ms-input-placeholder {
					   color: #000;
					}
				}
*/
			}
			textarea {
				resize: none;
				min-height: 300px;
			}
			.submit-container {
				text-align: right;
			}
			.submit {
				background-color: transparent;
				border: 0;
				color: #000;
				width: fit-content;
				display: inline-block;
				&:before {
					content: '';
					width: 36px;
					height: 2px;
					background-color: #000;
					display: inline-block;
					margin-right: 11px;
					vertical-align: middle;
				}
			}
			.wpcf7-form-control-wrap {
				//display: block;
				margin-bottom: 30px;
			}
			span.wpcf7-not-valid-tip {
				@include rem('font-size', 1.2rem);
				position: absolute;
			}
			.wpcf7-response-output {
				color: #fff;
				padding: 10px 20px;
				border: 0;
				margin: 1em 0 0;
			}
			.wpcf7-validation-errors {
				background-color: #f1c40f;
			}
			.wpcf7-mail-sent-ok {
				background-color: #2cc36b;
			}
			.wpcf7-mail-sent-ng, .wpcf7-spam-blocked {
				background-color: #e74c3c;
			}			
		}
	}
}


section.clients {
	padding: 30px 0;
	text-align: center;
	@media (min-width: $screen-sm) {
		padding: 50px 0;	
	}
	@media (min-width: $screen-md) {
		padding: 100px 0;	
	}
	.logos {
		span {
			display: inline-block;
			margin-bottom: 30px;
			&:not(:first-child) {
				margin-left: 60px;
			}
			@media (min-width: $screen-md) {
				margin-bottom: 0;
			}
			img {
			    filter: grayscale(100%);
			    transition: all 0.3s ease-in-out;
			    opacity: 0.3;
			}
			&:hover img {
			    filter: grayscale(0%);
			    opacity: 1;
			}
		}
	}
	.logos + .logos {	
		@media (min-width: $screen-md) {
			margin-top: 70px;	
		}
	}
	.btn-custom {
		margin-top: 0;
		@media (min-width: $screen-md) {
			margin-top: 80px;
		}
	}
}


section.contact {
	padding: 170px 0 20px 0;
// 	overflow: hidden;
	@media (min-width: $screen-sm) {
		padding: 100px 0;	
	}
	.underline {
		text-decoration: underline;
	}
	h3 {
		font-weight: 400;
		margin: 0;
		&.phone {
			margin-top: 30px;
		}
		&.mail {
			margin-bottom: 30px;
		}
	}
	.small {
		color: #000;
		@include rem('font-size', 2.6rem);
	}
	.socials {
		margin-top: 40px;
		@media (min-width: $screen-sm) {
			margin-top: 80px;	
		}

		a {
			@include rem('font-size', 1.8rem);
			display: inline-block;
			@media (min-width: $screen-sm) {
				@include rem('font-size', 2.2rem);	
			}
			&:not(:first-child) {
				margin-left: 20px;
			}
			@media (min-width: $screen-md) and (max-width: $screen-md-max) {
				display: block;
				margin-left: 0 !important;
			}
			
			
			&:hover {
				text-decoration: underline;
			}
		}
	}
	.text-copyright {
// 		margin: 20px 0 0 0;
		@include rem('font-size', 1.6rem);

			opacity: 0.3;
			@media (min-width: $screen-sm) {
				margin-top: 80px;
			}
	}
	&.short {
		position: relative;

		padding: 70px 0 20px 0;
		@media (min-width: $screen-sm) {
			padding: 100px 0;	
		}
		p:not(.text-copyright) {
			@include rem('font-size', 2.2rem); 
			strong {
				color: $aqua;
			}
		}
		h3 {
			&, .small {
				@include rem('font-size', 2.2rem);
				@include rem('line-height', 3rem);
			}
			&.phone, &.mail {
				margin: 0;
			}
		}
		.socials {
			margin-top: 30px;
			@media (min-width: $screen-md) and (max-width: $screen-md-max) {
				
				margin-top: 0;
			}
		}
		.text-copyright {

		}
	}
	&.mega-short {
		padding: 50px 0 0 0;
		@media (min-width: $screen-sm) {
			padding: 0 0 100px 0;	
		}
		.text-copyright {
			opacity: 0.3;
			margin-top: 0;
		}
		.socials {
			margin-top: 0;
		}
	}
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


// PORTFOLIO

.portfolio-title {
	padding: 30px 0;
	@media (min-width: $screen-md) {
		padding: 100px 0;	
	}
	h1 {
		margin: 15px 0;
		@media (min-width: $screen-md) {
			margin: 30px 0;	
		}
	}
	h5 {
		margin: 0;	
	}

	.small-title {
		margin: 0;
		font-size: 2.4rem;
		line-height: 3rem;
		font-weight: 400;
		margin: 0;
		margin-bottom: 30px;
		display: block;
	}
	
	.line-header {
		margin-bottom: 80px;
		display: block;
	}
	
	.button-url {
		padding-top: 30px;
		
		.btn-fixed-width {
			margin-right: 50px;
			@media (max-width: 560px) {
				margin-bottom: 20px;
			}
		}
	}
}

.portfolio-sections {
	figure {
		position: relative;
	}
	figcaption {
		@include rem('font-size', 1.4rem);
		color: $figcaption-grey;
		text-align: center;
		margin: 5px 0 0 0;
		position: absolute;
		bottom: -40px;
		left: 0;
	    right: 0;
	}
	h3 {
		margin: 0 0 15px 0;
		@media (min-width: $screen-md) {
			margin: 0 0 30px 0;	
		}
	}
	.text-wrapper {
		padding-top: 50px;
		padding-bottom: 50px;
		@media (min-width: $screen-md) {
			padding-top: 100px;
			padding-bottom: 100px;
			padding-left: 16.66666666666%;
			padding-right: 16.66666666666%;
		}
	}
	.text-wrapper2 {
		padding-top: 50px;
		padding-bottom: 50px;
		padding-left: 15px;
		padding-right: 15px;
		@media (min-width: $screen-md) {
			padding-top: 100px;
			padding-bottom: 100px;
			padding-left: 8.333333333333%;
			padding-right: 8.333333333333%;
		}
	}
	.section-content-wrapper {
		@media (min-width: $screen-md) {
			display: flex;
			align-items: center;
		}
	}
	.background {
		background-size: cover;
	}
	.margin {

		&.small {
			padding: 20px 0; // 40px
			@media (max-width: $screen-sm) {
				padding: 10px 0;
			}
		}
		&.normal {
			padding: 60px 0; // 60px
			@media (max-width: $screen-sm) {
				padding: 20px 0;
			}
		}
		&.big {
			padding: 120px 0; // 80px
			@media (max-width: $screen-sm) {
				padding: 40px 0;
			}
		}
									
	}
	.two-columns-paragraph {
		p {
			@media (min-width: $screen-md) {
				column-count: 2;
				column-gap: 100px;
			}
		}
	}
}

.portfolio-image-with-text {
	.container-custom .text-wrapper {
		@media (max-width: $screen-md) {
			padding-left: 15px;
			padding-right: 15px;
		}
	}
	.button-url {
		padding-top: 30px;
	}
	.line-header {
		margin-bottom: 80px;
	}
	.pull-right-md {
		@media (min-width: $screen-md) {
			float: right !important;
		}
	}
	
	.figure-up {
		margin-top: -30%;
	}
	.figure-down {
		display: flex;
		height: 100%;
		justify-content: flex-end;
		align-items: flex-end;
	}
}

.portfolio-full-width-color-or-image {
	background-size: cover;
	padding: 150px 0;
	@media (min-width: $screen-sm) {
		padding: 100px 0;
	}
	@media (min-width: $screen-md) {
		padding: 160px 0;
	}
	@media (min-width: $screen-lg) {
		padding: 240px 0;
	}
	h3 {
		text-align: center;
	}
}

.portfolio-video-sections {
	.portfolio-full-width-color-or-image.portfolio-full-width-color {
		padding: 50px 0;
		@media (min-width: $screen-sm) {
			padding: 50px 0;
		}
		@media (min-width: $screen-md) {
			padding: 80px 0;
		}
		@media (min-width: $screen-lg) {
			padding: 100px 0;
		}		
	}	
}

.portfolio-text-two-columns {
	padding: 30px 0;
	@media (min-width: $screen-sm) {
		padding: 70px 0;
	}
	@media (min-width: $screen-md) {
		padding: 110px 0;
	}
	@media (min-width: $screen-lg) {
		padding: 150px 0;
	}
}

.portfolio-small-image-with-background {
	background-size: cover;
	padding: 50px 0;
	@media (min-width: $screen-sm) {
		padding: 100px 0;
	}
	@media (min-width: $screen-md) {
		padding: 150px 0;
	}
	@media (min-width: $screen-lg) {
		padding: 200px 0;
	}
}

.portfolio-video-header {
	position: relative;		
	
		
	.forText {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 0;
		right: 0;
	}
	* {
		color: #fff;
	}		
	
	overflow: hidden;
	
	video {
		@media (max-width: $screen-lg-max) {
			width: auto;
			height: 850px;
		}
		
		@media (max-width: $screen-md-max) {
			width: auto;
			height: 700px;
		}
		
		@media (max-width: $screen-sm-max) {
			width: auto;
			height: 600px;
		}
		
	}
	
	h1 {
		margin: 15px 0;
		@media (min-width: $screen-md) {
			margin: 20px 0;	
		}
	}
	.h5 {
		display: inline-block;
		margin-top: 20px;
		margin-bottom: 0;
		@media (min-width: $screen-md) {
			margin-top: 30px;	
		}
	}
	.line-header {
		margin-bottom: 80px;
	}		
	
/*
	@media (max-width: $screen-sm) {
		padding-top: 93px;
	}
*/
	@media (min-width: $screen-sm) and (max-width: $screen-sm-max) {		
		padding-top: 71px;
	}
	
	@media (min-width: $screen-xl) {
		height: 840px;
		height: calc( 100vh - 71px );
	}
	
	.link-line:before {
		background-color: #fff !important;
	}
	
	&.bg-header {
		height: calc( 100vh - 80px );
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	
}


.ekko-lightbox {
	.modal-dialog {
		margin: 60px auto;
		@media (min-width: $screen-md) {
			max-width: 920px !important;
		}
		@media (min-width: $screen-lg) {
			max-width: 1200px !important;
		}
	}
	.modal-content {
		border-radius: 0;
		border: 0;
		box-shadow: none;
	}
	.modal-title {
		display: none;
	}
	.modal-body, .modal-header {
		padding: 0;
		border: 0;
	}
	& + .modal-backdrop.in {
		opacity: 0.8;
	}
	.close {
		position: absolute;
		right: 0px;
		top: -40px;
		float: none;
		text-shadow: none;
		opacity: 1;
		color: #fff;
		font-size: 30px;
	}
}







.section-portfolio-next {
	.text {
		font-size: 34px;
		line-height: (45 / 34);
		margin-bottom: 1em;
		margin-top: 1.5em;
	}
	
	
	.blackbox {
		color: #fff;
		
		@media (min-width: $screen-md) {
			display: flex;
			align-items: center;
			padding: 120px 0px;
		}
		@media (max-width: $screen-md-max) {
			padding: 50px 0px;
		}
		
		.link-line {
			color: #fff;
			&:before {
				background-color: #fff;
			}
		}
		.text {
			margin-bottom: 0.3em;
		}
		
		p {
			margin-bottom: 50px;
		}
		
		.btn-custom.btn-aqua-bg {
			position: relative;
			margin-left: 50px;
			&:before {
				content: url('#{$img}/arrow-blue-right.png');
				background: #fff;
			    line-height: 55px;
			    position: absolute;
			    left: -2px;
			    top: -2px;
			    transform: translateX(-100%);
			    padding: 0 20px;
			    
			}
			
		}
		
		
		.btn-custom.btn-aqua-bg:hover {
			background: #fff;
		}
	}
}




.section-business {
	padding: 120px 0;
	
	h1 {
		margin-top: 0;
	}
	
	.contact {
		font-size: 36px;
		margin-top: 2em;
		margin-bottom: 3em;
		
		small {
			font-size: 0.7em;
		}
		
		@media (max-width: 992px) {
			font-size: 28px;
		}
	}
	.submit {
		background-color: transparent;
		border: 0;
		color: #000;
		&:before {
			content: '';
			width: 36px;
			height: 2px;
			background-color: #000;
			display: inline-block;
			margin-right: 11px;
			vertical-align: middle;
		}
	}
}


.section-career {
	padding: 40px 0;
	h1 {
		margin: 80px 0 100px;
	}
	
	.career-list {
		text-align: center;
		margin-top: 200px;
	}
	
	.box {
		margin-top: 60px;
		h4 {
			margin-bottom: 50px;
			font-weight: 700;
		}
		.submit {
			background-color: transparent;
			border: 0;
			color: #000;
			&:before {
				content: '';
				width: 36px;
				height: 2px;
				background-color: #000;
				display: inline-block;
				margin-right: 11px;
				vertical-align: middle;
			}
		}
	}
}


.list-blue-arrow {
	list-style: none;
	position: relative;
	padding-left: 40px;
	margin-bottom: 60px;
	> li {
		&:before {
			content: '';
			background-image: url('#{$img}/arrow-blue-right.png');
			width: 18px;
			height: 14px;
			display: inline-block;
			padding: 0;
			position: absolute;
			left: 0;
			margin-top: 8px;
		}
	}
}











.section-studio {
	
	p {
		margin-bottom: 30px;
	}
	
	.row-gallery {
		margin-bottom: 100px;
		
		.content {
			padding-top: 50px;
		}
	}
	
	.row-price {
		margin-bottom: 130px;
		h3 {
			margin-top: 0;
		}
	}
	.row-additionals {

		margin-bottom: 130px;
	}
	.row-equipments {
		h3 {
			margin-top: 0;	
			margin-bottom: 130px;
		}
		
		margin-bottom: 130px;
	}
	.row-plan {
		.box-dimensions {
			padding-top: 70px;
		}
	}
}


.box-equipment {
	background-image: url('#{$img}/arrow-blue-right.png');
	background-position: 0px 8px;
	background-repeat: no-repeat;
	padding-left: 40px;
}





.video-teaser-agency {
	
	position: relative;
	
	
	video {
		max-width: 100%;
	}
	
	.play {
		position: absolute;
		top: calc( 50% - ( 165px / 2 ) );
		width: 100%;
		@include center-block;
		text-align: center;
		
		> a {
			display: inline-block;
			
			
			svg {
				fill: #000;
				display: block;
				@media (max-width: $screen-xs-max) {
					width: 50px;
				}
			}
			
			
			&:hover,
			&:focus {
				svg {
					fill: $aqua;
				}
			}
		}
	}
	

	
	.teaser {
		position: absolute;
		top: 0;
		opacity: 1;
		left: 0;
	}
	.video {
		
	}
	
	&.playing {
		.play {
			display: none;
		}
		.teaser {
			opacity: 0;
			visibility: hidden;
		}
		.video {
			
		}
	}
	
}


.section-404 {
	.btn-custom {
		margin-top: 30px;
	}
	
	
	.content {
		margin-top: 30vh;
	}
}
section.three-columns {	
	
	.border-bottom {
		border-bottom: 1px solid #e2e1e1;
	}
	
	.content-three {
		padding-left: 40px;
		margin-bottom: 60px;
		position: relative;
		.head-three {
			font-weight: 600;
			h3 {
				font-size: 1.6rem;
			    line-height: 2.5rem;
			    margin: 0;
			    font-weight: 600;
			}
		}
		&:before {
			content: url('../images/arrow-blue-right.png');
			position: absolute;
			top: 0px;
			left: 5px;
		}
	}
	
	.content-three2 {
		margin-bottom: 100px;
		position: relative;
		font-size: 1.4rem;
		line-height: 2rem;
		font-weight: 700;
		
		@media (max-width: $screen-xs-max) {
			margin-bottom: 50px;    
		}
		
		.head-three {
			font-size: 40px;
			line-height: 6rem;
		}		
	}
	.line-header:after {
		content: '';  
		left: 0;
		right: 0;
		margin: auto;
		bottom: -40px;
	}
	.three-header {
		padding-bottom: 20px;
		//margin-bottom: 30px;
	}
	
	@media (max-width: $screen-xs-max) {
		text-align: center !important;    
	}

	
	
}
section.multi-logos {

	.logos-row {
		padding-top: 60px;
	}
	.logos-img {
		max-width: 100%;
		display: block;
		left: 0;
		right: 0;
		margin: auto;
	}
	.logos-button {
		padding-top: 60px;
	}
	.line-header {
		margin-bottom: 80px;
	}
	.line-header:after {
		content: '';  
		left: 0;
		right: 0;
		margin: auto;
		bottom: -40px;
	}
}
section.animate-letter {  
	position: relative;  
}

section.share {
	padding: 60px 0;	
}

section.portfolio-container-image {
	figure {
		display: inline-block;
	}
}	
	
//efekt bialej kartki		
.portfolio-video-sections .for-white-paper {
	position: relative;
}						
.portfolio-video-sections .white-paper {
	position: absolute;
	top: 0%;
	right: 0%;
	bottom: 0%;
	left: 0%;
	opacity: 1;
	background-color: white;
	-webkit-animation-duration: 1.2s;
    animation-duration: 1.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}
						
/*
@-webkit-keyframes customfadeInUp {
	0% {
		top: 100%;
		bottom: 0%;
	}
	40% {
		top: 0%;
		bottom: 0%;
	}
	60% {
		top: 0%;
		bottom: 0%;
	}
	100% {
		top: 0%;
		bottom: 100%;
	}
}
	
@keyframes customfadeInUp {
	0% {
		top: 100%;
		bottom: 0%;
	}
	40% {
		top: 0%;
		bottom: 0%;
	}
	60% {
		top: 0%;
		bottom: 0%;
	}
	100% {
		top: 0%;
		bottom: 100%;
	}
}
*/

@-webkit-keyframes customfadeInUp {
	0% {
// 		top: 0%;
		opacity: 1;
	}	
	100% {
// 		top: 100%;
opacity: 0;
	}
}
	
@keyframes customfadeInUp {
	0% {
// 		top: 0%;
		opacity: 1;
	}	
	100% {
// 		top: 100%;
opacity: 0;
	}
}

.portfolio-video-sections .customfadeInUp {
	-webkit-animation-name: customfadeInUp;
	animation-name: customfadeInUp;
}

section.reference {
	
	.slick-reference-carousel {		
				
		@media (max-width: $screen-lg) {
			padding-top: 120px;
		}
		
		.reference-single {
			
			outline: 0 !important;
			font-style: italic;
			line-height: 1.8;
			opacity: 1;
			color: #000;
			transition: all 0.3s ease-in-out;
			
			&.opacity {
				transition: all 0.3s ease-in-out;
				color: transparent !important;
				
				.reference-title {
					transition: all 0.3s ease-in-out;
					color: transparent !important;
				}	
			}
			
			.reference-title {
				font-style: normal;
				color: $placeholder;
				padding-bottom: 20px;
				transition: all 0.3s ease-in-out;
			}	
		}
	}
	
	.button-container {
		padding-top: 50px;
	}
	
	button.slick-arrow {
		background: transparent;
		width: auto;
		height: auto;
		opacity: 1 !important;
		position: absolute;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
				
		&:before {
			content: "";
			width: 30px;
			height: 2px;
			background-color: #000;
			display: inline-block;
			margin-right: 10px;
			vertical-align: super;
			transition: all .3s ease-in-out;			
		}
		
		&:hover {
			color: $aqua;
			
			&:before {
				background-color: $aqua;			
			}
		}
		
	}
	
	.slick-reference-prev {
		left: -200px;
		
		@media (max-width: $screen-lg) {
			top: 40px !important;
			left: 0;
		}
	}
	
	.slick-reference-next {
		right: -200px;
		
		@media (max-width: $screen-lg) {
			top: 70px !important;
			right: auto;
			left: 0;
		}		
	}
}


.all-reference {
	position: relative;
	padding: 100px 0;
	
	@media (max-width: $screen-sm) {
		padding: 50px 0;
	}
	
	@media (min-width: $screen-lg) {
		h1 {
			margin-left: 40px;
		}
	}
	
	img {
		margin-top: -20px;
		-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
		filter: grayscale(100%);
	}
	
	.single-reference {
		
		font-style: italic;
		line-height: 1.8;
		padding: 70px 0;
		
		@media (max-width: $screen-sm) {
			padding: 40px 0;
		}
		
		.reference-title {
			font-style: normal;
			color: $placeholder;
			padding-bottom: 20px;
			transition: all 0.3s ease-in-out;
		}

	}	
	
	.reference-pagination {
		text-align: center;
		margin-top: 30px;
		
		a {
			color: $placeholder;
			padding: 15px;
			
			&:hover {
				color: $aqua;
				
				&.next, &.prev {
					position: relative;
					
					&:before {
						background-color: $aqua;
					}
				}
			}
			
			&.next, &.prev {
				position: relative;
				
				&:before {
					content: "";
					width: 20px;
					height: 2px;
					background-color: #000;
					display: inline-block;
					margin-right: 10px;
					vertical-align: super;
					transition: all .3s ease-in-out;
				}
			}
		}
		
	}	
}

.section-sitemap {
	ul.children li {
		list-style-type: none;
		padding-left: 15px;
		position: relative;
		
		&:before {
			content: "";
			width: 8px;
			height: 1px;
			background-color: #000;
			left: 0;
			top: 10px;
			position: absolute;
		}
	}
}

.portfolio-reference {
	padding: 100px 0 200px;
	
	@media (max-width: $screen-lg-max) {
		padding: 70px 0 140px;
	}
	
	@media (max-width: $screen-xs-max) {
		padding: 50px 0 100px;
	}
}