#testimonials .container:before,
#testimonials .container:after,
#testimonials .title:after {
	background-repeat: no-repeat;
	background-size: 100%;
	content: "";
	z-index: 0;
}

#testimonials .container:before,
#testimonials .container:after {
	position: absolute;
}

#testimonials {
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	background-image: url(../img/testimonials/bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
}

#testimonials .container {
	position: relative;
	background-color: white;
}

#testimonials .title {
	position: relative;
	font-family: TsukushiBRoundGothic, sans-serif;
	font-weight: bold;
	text-align: center;
	z-index: 5;
}

#testimonials .title:after {
	position: absolute;
	left: 50%;
	background-image: url(../img/testimonials/title_underline.png);
	-webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	        transform: translateX(-50%);
	width: 100%;
	z-index: -1;
}

#testimonials .blocks {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}

#testimonials .block {
	cursor: pointer;
	display: block;
}

#testimonials .block .preview {
	position: relative;
}

#testimonials .block .preview:before {
	position: absolute;
	top: 0;
	left: 0;
	background-color: white;
	content: "";
	height: 100%;
	opacity: 0;
	pointer-events: none;
	-webkit-transition: background-color .3s, opacity .3s;
	-o-transition: background-color .3s, opacity .3s;
	transition: background-color .3s, opacity .3s;
	width: 100%;
	z-index: 2;
}

#testimonials .block .preview:hover:before {
	opacity: .2;
}

#testimonials .block .preview .play {
	position: absolute;
	opacity: .8;
	z-index: 20;
}

#testimonials .block .preview .play .triangle {
	border-color: transparent transparent transparent white;
	border-style: solid;
	width: 0;
	height: 0;
}

@media (min-width: 1440px) {
	#testimonials {
		padding-top: 80px;
		padding-bottom: 80px;
	}

	#testimonials .container {
		border-radius: 40px;
		padding: 40px;
		width: 1116px;
	}

	#testimonials .container:before {
		top: 240px;
		left: -110px;
		height: 522px;
		width: 94px;
	}

	#testimonials .container:after {
		top: -30px;
		right: -104px;
		height: 758px;
		width: 121px;
	}

	#testimonials .title {
		font-size: 50px;
		line-height: 67px;
		margin-bottom: 77px;
	}

	#testimonials .title:after {
		bottom: -29px;
		height: 76px;
	}

	#testimonials .block {
		margin-bottom: 26px;
		width: calc((100% - 43px * 2) / 3);
	}

	#testimonials .block:not(:nth-child(3n+3)) {
		margin-right: 43px;
	}

	#testimonials .block .preview {
		margin-bottom: 16px;
	}

	#testimonials .block .organisation {
		font-size: 16px;
		font-weight: bold;
		line-height: 26px;
	}

	#testimonials .block .role {
		font-size: 16px;
		line-height: 26px;
	}

	#testimonials .block .play {
		top: calc(100% - 50px);
		right: 10px;
		height: 40px;
		width: 40px;
	}

	#testimonials .block .play .triangle {
		border-width: 20px 0 20px 30px;
	}
}

@media (max-width: 1440px) and (min-width: 751px) {
	#testimonials {
		padding-top: calc(100vw * 80 / 1440);
		padding-bottom: calc(100vw * 80 / 1440);
	}

	#testimonials .container {
		border-radius: calc(100vw * 40 / 1440);
		padding: calc(100vw * 40 / 1440);
		width: calc(100vw * 1116 / 1440);
	}

	#testimonials .container:before {
		top: calc(100vw * 240 / 1440);
		left: calc(100vw * -110 / 1440);
		height: calc(100vw * 522 / 1440);
		width: calc(100vw * 94 / 1440);
	}

	#testimonials .container:after {
		top: calc(100vw * -30 / 1440);
		right: calc(100vw * -104 / 1440);
		height: calc(100vw * 758 / 1440);
		width: calc(100vw * 121 / 1440);
	}

	#testimonials .title {
		font-size: calc(100vw * 50 / 1440);
		line-height: calc(100vw * 67 / 1440);
		margin-bottom: calc(100vw * 77 / 1440);
	}

	#testimonials .title:after {
		bottom: calc(100vw * -29 / 1440);
		height: calc(100vw * 76 / 1440);
	}

	#testimonials .block {
		margin-bottom: calc(100vw * 26 / 1440);
		width: calc((100% - (100vw * 43 / 1440) * 2) / 3);
	}

	#testimonials .block:not(:nth-child(3n+3)) {
		margin-right: calc(100vw * 43 / 1440);
	}

	#testimonials .block .preview {
		margin-bottom: calc(100vw * 16 / 1440);
	}

	#testimonials .block .organisation {
		font-size: calc(100vw * 16 / 1440);
		font-weight: bold;
		line-height: calc(100vw * 26 / 1440);
	}

	#testimonials .block .role {
		font-size: calc(100vw * 16 / 1440);
		line-height: calc(100vw * 26 / 1440);
	}

	#testimonials .block .play {
		top: calc(100% - (100vw * 50 / 1440));
		right:  calc(100vw * 10 / 1440);
		height:  calc(100vw * 40 / 1440);
		width:  calc(100vw * 40 / 1440);
	}

	#testimonials .block .play .triangle {
		border-width:  calc(100vw * 20 / 1440) 0  calc(100vw * 20 / 1440)  calc(100vw * 30 / 1440);
	}
}

@media (min-width: 751px) {
	#testimonials .container:before {
		background-image: url(../img/testimonials/left_bg.png);
	}

	#testimonials .container:after {
		background-image: url(../img/testimonials/right_bg.png);
	}

	#testimonials .block:nth-child(-n+3) .preview {
		-webkit-box-shadow: 5px 5px 0 0 var(--blue);
		        box-shadow: 5px 5px 0 0 var(--blue);
	}

	#testimonials .block:nth-child(n+4) .preview {
		-webkit-box-shadow: 5px 5px 0 0 var(--pink);
		        box-shadow: 5px 5px 0 0 var(--pink);
	}
}

@media (max-width: 750px) {
	#testimonials {
		padding-top: calc(100vw * 54 / 750);
		padding-bottom: calc(100vw * 54 / 750);
	}

	#testimonials .container {
		border-radius: calc(100vw * 20 / 750);
		padding: calc(100vw * 25 / 750) calc(100vw * 15 / 750);
		width: calc(100vw * 711 / 750);
	}

	#testimonials .title {
		font-size: calc(100vw * 44 / 750);
		line-height: calc(100vw * 58 / 750);
		margin-bottom: calc(100vw * 70 / 750);
	}

	#testimonials .title:after {
		bottom: calc(100vw * -29 / 750);
		height: calc(100vw * 59 / 750);
	}

	#testimonials .blocks {
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
	}

	#testimonials .block {
		width: calc(50% - (100vw * 10 / 750));
	}

	#testimonials .block:nth-child(odd) {
		margin-right: calc(100vw * 20 / 750);
	}

	#testimonials .block:not(:nth-last-child(-n+2)) {
		margin-bottom: calc(100vw * 40 / 750);
	}

	#testimonials .block .preview {
		-webkit-box-shadow: 5px 5px 0 0 var(--blue);
		        box-shadow: 5px 5px 0 0 var(--blue);
		margin-bottom: calc(100vw * 18 / 750);
	}

	#testimonials .block .organisation {
		font-size: calc(100vw * 23 / 750);
		font-weight: bold;
		line-height: calc(100vw * 30 / 750);
	}

	#testimonials .block .role {
		font-size: calc(100vw * 23 / 750);
		line-height: calc(100vw * 30 / 750);
	}

	#testimonials .block .play {
		top: calc(100% - (100vw * 50 / 750));
		right:  calc(100vw * 10 / 750);
		height:  calc(100vw * 40 / 750);
		width:  calc(100vw * 40 / 750);
	}

	#testimonials .block .play .triangle {
		border-width:  calc(100vw * 20 / 750) 0  calc(100vw * 20 / 750)  calc(100vw * 30 / 750);
	}
}