/*-- Video Grid for multiple videos + Modal ---------- */

#video-box {width: 100%; margin: 120px auto 100px auto; text-align: center; }
#video-box h2 {font-size: 1.4em }
#video-box > p {width: 60%; margin: 60px auto; font-size: 1em; color: grey; }

.video-grid {width: 80%; max-width: 1000px; margin: 20px auto 70px auto; padding: 0; }
.video-grid .video-thumb { cursor: pointer; width: 100%; margin: 40px auto 15px auto; }
.video-grid p {text-align: center; font-size: 0.9em; color: grey; height: 30px}



/* Video Modal */
#videoModal .modal-dialog { z-index: 9999; 
	width: 85% !important; 
	max-width: 1000px !important; 
    min-height: auto !important; 
    margin: 3vh auto !important;
    }
#videoModal .modal-content { width: 100%; max-width: 100%; height: auto !important; border-radius: 8px }
#videoModal .modal-body { position: relative; padding: 20px 10px 20px 10px; text-align: center; }

/* Video Container */
.video-container { position: relative; width: 85%; margin: 20px 7.5% 0 7.5%; overflow: hidden;
	height: 0; 
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
    }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: lightgrey; }


/* Close Button */
.modal-body button.close { width: 30px; height: 30px; margin: 20px 15px; font-size: 2em;
	background: url("../pix/controls/close-black.png") no-repeat center / cover; 
	}

/* Controls */
.nav-button { position: absolute; z-index: 990; top: 50%; padding: 10px 10px;
	-webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 20px;
    }
.nav-button:hover, 
.nav-button:active { background: rgba(255, 0, 0, 0.7);
    -webkit-transition: background 0.3s ease;
    -moz-transition: background 0.3s ease;
    -o-transition: background 0.3s ease;
    transition: background 0.3s ease;
    }
.nav-button.left, 
.nav-button.right { width: 40px; height: 40px; }  
    	
.nav-button.left {left: 15px; background: url("../pix/controls/bg-arrow-left.png") no-repeat center / cover; }
.nav-button.right {right: 15px; background: url("../pix/controls/bg-arrow-right.png") no-repeat center / cover; }

.video-title {font-family: 'Open Sans', 'Helvetica Neue', sans-serif; font-weight: 300; font-size: 0.8em; line-height: 1.25em; 
	margin: 10px 0 20px; 
	padding: 10px 10% 20px 10%; 
	}


/* M E D I A  Q U E R I E S --------------------------------------------------------- */

@media (max-width: 991px) {
.video-grid {width: 100%; }
#videoModal .modal-dialog { width: 92% !important; }
.video-container { margin-top: 30px; }
.modal-body button.close { margin: 20px 10px; }
}

@media (max-width: 767px) {
.video-grid {width: 90%; }
#videoModal .modal-dialog { width: 95%; }

.modal-body button.close { width: 25px; height: 25px; margin: 15px 8px; }
.nav-button.left, .nav-button.right { width: 30px; height: 30px; }  
.nav-button.left {left: 10px; }
.nav-button.right {right: 10px; }
.video-title {margin: 10px 0 0; }
}

@media (max-width: 575px) { 
.video-grid {width: 80%; }
#videoModal .modal-body { padding: 10px 5px 20px 5px; }
.video-container { margin-top: 40px; }
.nav-button.left, .nav-button.right { width: 25px; height: 25px; }  
.nav-button.left {left: 5px; }
.nav-button.right {right: 5px; }
}

@media (max-width: 479px) {
.video-grid {width: 90%; }
.modal-dialog { width: 92% !important;}
#videoModal .modal-body { padding: 15px 5px 20px 5px; }
.modal-body button.close { width: 20px; height: 20px; margin: 10px 8px; }
.nav-button.left, .nav-button.right { width: 20px; height: 20px; }
.video-title {margin: 0 0 0; padding: 10px 5% 0 5%; }  
}