#vid-modal-wrapper{
	background:#8696a3;
	padding-top:10px;
	border-radius:10px;
	margin-left:0;
	margin-right:0;
}

.flip-container{

	height:140px;
	display:inline-block;
	text-align:center;
	vertical-align:top;
	margin-bottom:10px;
	padding-left:5px;
	padding-right:5px;
	perspective: 1000px;
	transform-style: preserve-3d;
}




.flip-container:hover .back-card {
	transform: rotateY(0deg);
}
.flip-container:hover .front-card {
	transform: rotateY(180deg);
}

.flip-container p{
	padding:0 5px;
}

.flip-card {
	transition: 0.6s;
	transform-style: preserve-3d;
	width:100%;
	height:100%;
	position: relative;
	
}

.flip-card .front-card h3 {
	font-size:90%;
	padding-left:5px;
	padding-right:5px;
	margin-top:5%;
}

.flip-card .front-card, .flip-card .back-card {
	
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  background-color: red;
	  height: 100%;
	  
	backface-visibility: hidden;
	transition: 0.6s;
	transform-style: preserve-3d;
	position: absolute;
	top: 0;
	left: 0;
	width:100%;
	height:100%;
	cursor:pointer;
	border-radius:5px;
}

.flip-card .back-card img{
	max-width:96%;
	padding:0 2%;
	max-height:100%;
	
	height:auto;
}

.flip-card .front-card {
	z-index: 2;
	transform: rotateY(0deg);
	background:#003663;
}

.flip-card .back-card {
	transform: rotateY(-180deg);
	background:#ff0000;
	
}

.flip-card.red .front-card{
	border:2px solid #ff0000;
}

.flip-card.red .back-card{
	background:#ff0000;
}

.flip-card.grn .front-card{
	border:2px solid #7FBA41;
}

.flip-card.grn .back-card{
	background:#7FBA41;
}

.flip-card.lgt-blue .front-card{
	border:2px solid #5acce0;
}

.flip-card.lgt-blue .back-card{
	background:#5acce0;
}

.flip-card.org .front-card{
	border:2px solid #F7921E;
}

.flip-card.org .back-card{
	background:#F7921E;
}

.flip-card.violet .front-card{
	border:2px solid #7f00ff;
}

.flip-card.violet .back-card{
	background:#7f00ff;
}

/*VIDEO MODAL*/



.modal-backdrop.in {
    filter: alpha(opacity=7);
    opacity: 0.7;
}
 
.modal-content {
    background:#8696a3;
	border-radius:10px !important;
    border: 0;
    -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
    -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
}
 
.modal-body {
    padding: 0 25px 25px 25px;
}
 
.modal-header {
    padding: 25px 25px 15px 25px;
    text-align: right;
}
 
.modal-header, .modal-footer {
    border: 0;
}
 
.modal-header .close {
    float: none;
    font-size: 36px;
    color: #fff;
    font-weight: bold;
    text-shadow: none;
    opacity: 1;
}

.mejs__container, video, .mejs__overlay{
	max-width:100%;
}

.learn-more{
	position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
	text-align:center;
	display:none;
}

.learn-more .tran-bg{
	background: rgba(0, 0, 0, 0.8);
	position: absolute;
    left: 25px;
    right: 25px;
    top: 0;
    bottom: 25px;
	 
}

.learn-more .btn{
	z-index: 9999;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 35px;
    width: 125px;
    margin: auto;
}

.embed-responsive .embed-responsive-item, .embed-responsive embed, .embed-responsive iframe, .embed-responsive object, .embed-responsive video {

    width: 100% !important;
    height: 100% !important;
	min-width: unset !important;
}


@media (max-width: 575.98px) {
	/*.flip-card .front-card h3{
		margin-top:50px;
		
	}*/
	
}
@media (min-width: 768px) and (max-width: 1199.98px) {
	.flip-card .front-card h3 {
		margin-top:13%;
		font-size:85%;
	}	
}

@media (max-width: 767.98px) {
	.flip-card .back-card img{
		width:80%;
	}
}

@media (min-width: 768px) {
	.flip-container:first-of-type {
		padding-left:10px;
	}

	.flip-container:last-of-type{
		padding-right:10px;
	}
}