.video-modal,
.video-modal .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 300;
}
.close-video-modal:hover{color:#da2928;}

.video-modal {
	overflow: hidden;
	position: fixed;
	opacity: 0.0;

    -webkit-transform: translate(500%,0%);
    transform: translate(500%,0%);

    -webkit-transition: -webkit-transform 0s linear 0s;
    transition: transform 0s linear 0s;


    /* using flexbox for vertical centering */

    /* Flexbox display */
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;

    /* Horizontal alignment */
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;

    /* Vertical alignment */
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.video-modal .overlay {
    z-index: 0;
    background: rgba(0,93,171,0.80); /* dark blue */

    opacity: 0.0;

    -webkit-transition: opacity 0.2s ease-out 0.05s;
    transition: opacity 0.2s ease-out 0.05s;
}


.video-modal-content {
	position: relative;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	z-index: 1;

	height: auto;
	/*   width: 76%; */
	width: calc(100% - 200px);
	max-width: 1000px;
	max-height: calc(100% - 100px);
	margin: 0 auto;

	overflow-y: visible;

	/*background: #fff;*/ /* container will have a transparent BG—moving the BG color and shadow to the iframe element to make it look more seamless */

	/* Transition looks a bit janky with the iframe */
	/*-webkit-transform: translate(0%,-20%);
    transform: translate(0%,-20%);

    -webkit-transition: -webkit-transform 0.2s ease-out 0.15s;
    transition: transform 0.2s ease-out 0.15s; */
}
/* Mobile Layout Tweaks */
@media (max-width: 640px) {
	.video-modal-content {
		width: calc(100% - 16px);
	}
}

/* close button */
.close-video-modal {
	display: block;
    position: absolute;
    right: 0;
    top: -40px;

    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    color: #fff;

    /*border: 2px solid red;*/
}

/* using a 16:9 image to resize the video frame */
.video-sizer {
	display: block;
	width: 100%;
	height: auto;
}

/* set the iframe element to stretch to fit its parent element */
iframe#youtube {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;

	background: #fff;
	box-shadow: 0px 2px 16px rgba(0,0,0,0.5);
}

/* show the modal */
/* add class to the body */
.show-video-modal .video-modal {
	opacity: 1.0;

	transform: translate(0%,0%);
	-webkit-transform: translate(0%,0%);
}
.show-video-modal .video-modal .overlay {
	opacity: 1.0;
}
.show-video-modal .video-modal-content {
	transform: translate(0%,0%);
	-webkit-transform: translate(0%,0%);
}.video-modal,
.video-modal .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 300;
}
.video-modal {
	overflow: hidden;
	position: fixed;
	opacity: 0.0;

    -webkit-transform: translate(500%,0%);
    transform: translate(500%,0%);

    -webkit-transition: -webkit-transform 0s linear 0s;
    transition: transform 0s linear 0s;


    /* using flexbox for vertical centering */

    /* Flexbox display */
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;

    /* Horizontal alignment */
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;

    /* Vertical alignment */
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.video-modal .overlay {
    z-index: 0;
    background: rgba(0,0,0,.5); /* dark blue */
    opacity: 0.0;
    -webkit-transition: opacity 0.2s ease-out 0.05s;
    transition: opacity 0.2s ease-out 0.05s;
}


.video-modal-content {
	position: relative;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	z-index: 1;

	height: auto;
	/*   width: 76%; */
	width: calc(100% - 200px);
	max-width: 1000px;
	max-height: calc(100% - 100px);
	margin: 0 auto;

	overflow-y: visible;

	/*background: #fff;*/ /* container will have a transparent BG—moving the BG color and shadow to the iframe element to make it look more seamless */

	/* Transition looks a bit janky with the iframe */
	/*-webkit-transform: translate(0%,-20%);
    transform: translate(0%,-20%);

    -webkit-transition: -webkit-transform 0.2s ease-out 0.15s;
    transition: transform 0.2s ease-out 0.15s; */
}
/* Mobile Layout Tweaks */
@media (max-width: 640px) {
	.video-modal-content {
		width: calc(100% - 16px);
	}
}

/* close button */
.close-video-modal {
	display: block;
	position: absolute;
	right: 40px;
	top: 10vh;
	text-decoration: none;
	font-size: 20px;
	font-weight: bold;
	color: #fff;
	z-index: 11;
	font-size: 0px;
	width: 40px;
	height: 40px;
	background: #fff;
	border-radius: 50%;
	line-height: 40px;
	text-decoration: none;transition:0.3s ease all;
}
.close-video-modal:hover{background:#da2928}
.close-video-modal:before {
    content: "\f00d";
    font: normal normal normal 19px/1 FontAwesome;
    text-align: center;
    color: #555;
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
}

/* using a 16:9 image to resize the video frame */
.video-sizer {
	display: block;
	width: 100%;
	height: auto;
}

/* set the iframe element to stretch to fit its parent element */
iframe#youtube {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;

	background: #fff;
	box-shadow: 0px 2px 16px rgba(0,0,0,0.5);
}

/* show the modal */
/* add class to the body */
.show-video-modal .video-modal {
	opacity: 1.0;

	transform: translate(0%,0%);
	-webkit-transform: translate(0%,0%);
}
.show-video-modal .video-modal .overlay {
	opacity: 1.0;
}
.show-video-modal .video-modal-content {
	transform: translate(0%,0%);
	-webkit-transform: translate(0%,0%);
}