@font-face { 
	font-family: "VideoCaptionFont"; 
	src: url('fonts/segoeuil.ttf');
}


    .leftGroup {
        float: left;
        width: 25% !important;
        
    }  
    .rightGroup {
        float: right;
        width: 75% !important;
        
    }

#TheVideoGroup {

    :after.Group {
        content:"";
        display: table;
        clear: both;
    }
    @media screen and (max-width: 640px) {
        .leftGroup, .rightGroup {
            float: none;
            width: 100% !important;
        }
    }
}


.FeaturedVideo {
background: rgba(255,255,200,0.3);
}


.VideoSegment {
width: 80% !important;
border-bottom: 1px solid rgba(100,100,100,0.2);
border-radius: 16px;
transition: .3s ease-in-out;
}
@media screen and (max-width: 640px) {
.VideoSegment {
width: 90vw !important;
border-bottom: 1px solid rgba(100,100,100,0.3);
}
}
.VideoSegment:hover {
background: rgba(255,255,255,0.5);
}

.VideoClipContainer {
position: relative;
width: 100% !important;
}

.YouTubeMetaDataPanel {
width: 95% !important;
margin-left: 30px;
margin-top: 15px;
margin-bottom: 15px;
}

@media only screen and (max-width: 640px) {
.YouTubeMetaDataPanel {
margin: 0px !important;
}
}

.VideoCaption {
text-align: left !important;
width: 95% !important;
font-family: "VideoCaptionFont";
font-weight: bold;
font-size: 30px;
line-height: 28px;
color: rgba(0,0,0,1);
margin-bottom: 15px;
}

@media only screen and (max-width: 640px) {
.VideoCaption {
width: 100% !important;
font-size: 28px;
line-height: 28px;
}
}

.YouTubeMeta {
text-align: left !important;
width: 95% !important;
font-size: 18px !important;
font-weight: bold;
margin-top: 10px;
margin-bottom: 10px;
color: rgba(90,90,90,1);
}

.YouTubeDescription {
text-align: left !important;
width: 95% !important;
font-size: 22px !important;
}
@media only screen and (max-width: 640px) {
.YouTubeDescription {
width: 100% !important;
text-align: left !important;
font-size: 18px !important;
}
}


.VideoClip {
width: 100% !important;
height: auto;
border-radius: 20px;
margin-top: 15px;
margin-left: 15px;
margin-bottom: 15px;
}
@media only screen and (max-width: 640px) {
.VideoClip {
width: 80vw !important;
}
}


.PlayButton {
position: absolute;
margin-top: 10px;
left: 15;
top: -10;
width: 100%;
height: 100%;
z-index: 200;

border-radius: 20px;
   transition: .05s ease-in-out;
}


.PlayButton:hover {
filter: saturate(12) drop-shadow(0px 0px 8px rgba(255,255,100,1)) drop-shadow(0px 0px 8px rgba(255,255,100,1));

}






.ThumbHighlight {
   opacity: 1;
}

.ThumbHighlight:hover {
box-shadow: 0px 0px 20px 0px rgba(200,0,0,0.9);
}