.page-template-template-home {

	.home-block {
		height: 180px;
		padding: 0;
		background-size: cover;
		background-position: right;
		position: relative;
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.ie9 & {
			padding-top: 20px;
		}

		@include responsive('>', 'tablets', (
			height: 220px
		));

		@include responsive('>', 'tablets-l', (
			height: 300px
		));


		&:after {
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			background: rgba(255,255,255,0.2);
			top: 0;
			left: 0;
			z-index: 0;
		}

		&__content {
			width: 45%;
			z-index: 1;

			p {
				font-size: 20px;
    			font-weight: 500;

				@include responsive('<',1023px,(
					font-size: 16px
				));

				@include responsive('<', 'tablets', (
					font-size: 13px,
					font-weight:200
				));

				@include responsive('<', 'phones', (
					font-size: 13px,
					font-weight:400
				));
				
			}

			@include responsive('>', 'tablets-l', (
				width: 58%
			));

			img {
				position: absolute;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: -1;
				object-fit: cover;
			}

			.home-block-text {
				padding: 20px 0 0 20px;
			}

			.thin-home-box {
				width:75%;

				p {
					color:#fff;
				}

				.home-block__title {
					color:#fff;
					text-shadow: none;
				}
			}
		}

		&--trade {
			height:150px;
			height:100%;
		}

		&__title {
			color: $colorGreyDark;
			font-size: 20px;
		    display: block;
		    line-height: 1.1em;
		    text-shadow: 0px 0px 10px #ffffff;

		    &:hover {
		    	text-decoration: underline;
		    }

		    @include responsive('>', 'tablets', (
				font-size: 25px
			));

		    @include responsive('>', 'tablets-l', (
				font-size: 38px
			));
		}

		&__desc {
			margin-top: 8px;
			font-size: 20px;
    		line-height: 1.2em;
    		text-shadow: 0px 0px 10px #ffffff;

    		@include responsive('>', 'tablets', (
				font-size: 16px
			));

    		@include responsive('>', 'tablets-l', (
				font-size: 20px
			));
		}

		.trade-image {
			img {
				object-position: 100% 100%;
				object-fit: cover;
				background-color: #575352;
			}

			a {
				color:#fcc800;
			}
		}
	}

	.multi-carousel {

		&__item {
			text-align: center;
			padding: 0 10px;
			border-right: 1px solid $colorGreyMedium;

			&:last-child {
				border-right: none;
			}

			a {
				color: $colorGreyDark;

				&:hover {
			    	text-decoration: underline;
			    }
			}
		}
	}

	.footer-image {
		width: 100%;
		height: 140px;
		position: relative;

		@include responsive('>', 'tablets', (
			height: 310px
		));

		@include responsive('>', 'wide-screen', (
			height: 600px
		));

		img {
			position: absolute;
			width:100%;
			height: auto;
			bottom:0;
		}
	}
}