.video-list-gray {background-color: #f1f1f1; padding: 50px 0 50px 0; position:relative;}

.video-list {
    position:relative;
	display: flex;
	flex-flow: row;
	justify-content: space-between;
	flex-wrap: wrap;
}
.video-list .video-left {
    position: relative;
	display: inline-block;
	width: 68%;
}
.video-list .video-right {
    position: relative;
	display: inline-block;
	width: 26%;
	padding-top: 64px;
	display: flex;
	flex-direction: column;
}
	.video-list .video {
		display: block;
		color: #004330; /* dark green */
		text-align: left; padding: 0;
		font-size: 14px; line-height: 20px;
		position: relative;
	}
	
		/* LEFT */
		.video-list .video-left .video h2 {
			font-size: 28px; line-height: 34px;	text-transform: uppercase;	margin: 0 0 30px 0;
		}		
		.video-list .video a {
			display: inline-block; text-align: center; position: relative;
			padding: 10px; background-color: #fff; text-decoration: none;
			font-size: 100px; line-height: 100px; color: #fff; 
	        display: flex;
            align-items: center;	
            justify-content: center;
            flex-direction: column; 
		}
			.video-list .video a img {
				display: block;	width: 100%; max-width: 100%; position: relative; height: auto;
			}
			.video-list .video-left .video a .play-icon {
				display: block; 
                max-width: 50%; 
                position: absolute; 
                text-align: center;
                left: calc(50% - 10px);
                top: calc(50% - 50px);
			}
            .video-list .video-right .video a .play-icon {
                display: block;
                max-width: 50%;
                position: absolute;
                text-align: center;
                left: calc(50% - 20px);
                top: calc(50% - 25px);
            }
		.video-list .video-left .video p {
			font-size: 14px; line-height: 20px;
			color: #004330; /* dark green */ 
			margin: 20px 0 20px 0; padding: 0; 
		}
	
		/* RIGHT */	
		.video-list .video-right .video {
			flex-grow: 1; flex-shrink: 1; flex-basis: auto;
		}
			.video-list .video-right .video a {
				display: inline-block; max-width: 65%; padding: 7px; font-size: 50px; line-height: 50px; 	            
	            display: flex; 
                align-items: center;	
                justify-content: center;
			}
            .video-list .video-right a img {
				max-height: 130px; /* stupid IE */
			}
			.video-list .video-right .video h2 {
				font-size: 16px; line-height: 22px; text-transform: none; margin: 10px 0 25px 0;
			}
			.video-list .video-right .video p {
				display: none;
			}

/* --- MOBILE MEDIA QUERIES ----------------------------- */
@media screen and (max-width: 1300px) {		
	.video-list-gray {padding: 50px 0% 50px 5%;}
}
@media screen and (max-width: 780px) {
	.video-list-gray {padding: 50px 5% 50px 5%;}
	
	.video-list .video-left {
		display: block;	width: 100%;
	}
	.video-list .video-right {
		display: block;	width: 100%; padding-top: 0px; 
	    display: flex; 
        flex-direction: row; justify-content: space-between;
	}
		.video-list .video-right .video {
			width: 31%; flex-grow: 0; flex-shrink: 0; flex-basis: auto;
		}
		.video-list .video-right .video a {
			display: block; max-width: 100%; padding: 6px; font-size: 50px; line-height: 50px; 
	        display: flex;
            align-items: center;	
            justify-content: center;
		}
		.video-list .video-right .video h2 {
			font-size: 14px; line-height: 20px; margin: 10px 0 10px 0;
		}
}
@media screen and (max-width: 600px) {
	.video-list .video-left .video h2 {
		font-size: 18px; line-height: 24px;	margin: 0 0 20px 0;
	}
}
@media screen and (max-width: 400px) {
		.video-list .video-left .video p {
			margin: 20px 0 40px 0;  
		}
		
	.video-list .video-right {
	    display: flex;
        flex-direction: column; justify-content: space-between;
	}
		.video-list .video-right .video {
			width: 100%; display: block;
		}
		.video-list .video-right .video a {
			display: block; max-width: 100%; padding: 10px; font-size: 100px; line-height: 100px; 
	        display: flex;
            align-items: center;	
            justify-content: center;
		}
            .video-list .video-right a img {
				max-height: none; 
			}
		.video-list .video-right .video h2 {
			margin: 10px 0 25px 0;
		}
}