/*
Theme Name:     twentyseventeen child
Description:    http://www.epn.tv
Author:         EPN
Template:       twentyseventeen

(optional values you can add: Theme URI, Author URI, Version)
*/

/* @import url("../twentyseventeen/style.css"); */

a:link, a:hover, a:visited {
	color: #dde9ed;
	text-decoration: none;
}

a:hover {
	color: #83e1f5;
}

a.special:link, a.special:hover, a.special:visited {
	color: #83e1f5;
	text-decoration: none;
}

a.special:hover {
	color: #dde9ed;
}

body {
    background-color: #333333;
    font-family: "Open Sans", "lucida sans unicode", "lucida grande", "Trebuchet MS", verdana, arial, helvetica, sans-serif;
	font-size: 100%;
	margin: 0 auto;
    padding: 0;
    text-align: center;
}

p {
	line-height:1.1em; /* Fallback Fixes Squished Lines on Mobile Viewports */
}

hr {
	margin-top:30px; border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0));
}

h1, h2 {
	line-height:1.1em;
}

h1.TopTitle {
	color:#fff;
	font-family:Arial, Tahoma, Verdana, Sans-serif;
	font-size:30px;
	font-weight:bold;
	text-align:center;
	line-height:1.1em;
	text-shadow: 0px 1px 4px #1c2d4b;
	text-transform: uppercase;
}

.BackToTopIcon{
	position:fixed;
	bottom:8px;
	right:20px;
	z-index:9999;
}

	
.blackBG {
    background-color:#000;
}

.ashBG {
	background: url(../../../images/TimelineBG.png);
	background-repeat: repeat-x;
	background-color: #efefef;
}

.ashDarkBG {
	background: url(../../../images/TimelineBG.png);
	background-repeat: repeat-x;
	background-color: #0c2130;
}

.ashBlueBG {
	background: url(../../../images/TimelineBG.png);
	background-repeat: repeat-x;
	background-color: #093941;
}

.graphicBG {
    background: url(../../../images/SplashBG.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

@media only screen and (min-width: 1280px) {
	.graphicBG {
		background-attachment: fixed;
	}
}

.graphicTintedBG {
	background: linear-gradient(0deg,rgb(0, 0, 0),rgba(1, 12, 129, 0.4)), url(../../../images/SplashBG.jpg);
	background-size: cover;
}

.tealDarkBG {
	background-color: #005374;
}

.tealBG {
	background-color: #006996;
}

.mainContent {
	position: relative;
    clear: both;
    color: #333;
    font-size: 0.8125em;
    line-height: 1.5em;
    margin: 0 auto;
    padding: 1em 0; 
    width: 90%;
}


/*  SECTIONS  */ /* NOT SURE IF THIS DOES ANYTHING */
.new {
	clear: both;
	padding: 0px;
	margin: 0px;
}

	/*  GROUPING  */
	.group:before, .group:after { content:""; display:table; }
	.group:after { clear:both;}
	/* .group { zoom:1; } For IE 6/7  - Doesn't Validate */


		/*  COLUMN SETUP  */
		.col {
			display: inline-block;
			float:left;
			margin: 1% 0% 1% 0%;
		}
		
		.no-margin { margin:0 !important; }
		
			.span_1_of_3 {
				width: 33.33%;
			}

			.span_2_of_3 {
				width: 66.66%;
			}
			.span_3_of_3 {
				width: 100%;
			}

			.span_1_of_4 {
				width: 25%;
			}

			.span_2_of_4 {
				width: 50%;
			}
			
			.span_3_of_4 {
				width: 75%;
			}

				.white {
					background-color:#fff;
				}

				.black {
					background-color:#000;
				}
				
				.grey {
					background-color:#3b3e44;
				}
				
				.lime {
					background-color:lime;
				}
				
				.magenta {
					background-color: magenta;
				}
				
				.cyan {
					background-color: cyan;
				}


.socialIcons { 
	margin:5px;
	border-radius:2px;
}

ul {
    list-style: outside none none;
	list-style-type: none;
    padding:0;
}

ul.menu_nav  {
	padding: 0;
}

ul.menu_nav li {
    display: inline-block;
    margin: 0% 1% 0% 1%;
    color: #fff;
}


/* FEATURED YOUTUBE VIDEO EMBED - BEGIN */
.yt_featuredWrap {
    margin: 0 auto;
	background-color:#000;
    /*max-width: 640px;
    width: 80%;*/
}
.video-container {
    position: relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 49.6%;

}
.video-container iframe, .video-container object, .video-container embed {
    position: absolute;
	height: 100%;
	width: 100%;
    top: 0;
	left: 0;
	border: 0 !important; 
}

/* FEATURED YOUTUBE VIDEO EMBED - END */

.hover_description {
	color:#fff;
	text-align:right;
	padding-right:10px;
}

.shows_grdWrapper {
	width: 100%;
}

.grd_sq:hover {
	box-shadow: 1px 2px 20px #ffa;
}

@media only screen and (max-width: 768px) {
	
	.row1, .row2 {
		float:left;
		width: 32.33%;
		margin-bottom: 1.5%;
	}
	
	.row3 {
		float:left;
		width: 32.33%;
		margin: 0%;
	}
	
	.col1, .col2 {
		margin-right: 1.5%;
	}
	
	.col3 {
		margin-right: 0%;
	}
}

@media only screen and (min-width: 769px) {

	.row1, .row2 {
		float:left;
		width: 32.33%;
		margin-bottom: 1%;
	}
	
	.row3 {
		float:left;
		width: 32.33%;
		margin: 0%;
	}
	
	.col1, .col2, .col3 {
		margin-left: 1%;
	}
}


.yt_RecentWrapper {
	width: 100%;
	margin-left:0.33%;
}

	.viewimage {
		float: left;
		width: 12.13%;
		margin: 0.33% 0.33% 0.33% 0%;
	}


.sub_and_follow {
	color:#fff;
	font-size: 22px; 
	text-align: left;
	margin-bottom: 0%;
	text-shadow: 1px 2px 2px #000;
}

.subsLogoWrap {
	margin-left:0.5%;
}

.subsLogo {
    float: left;
	/* 100 - 0.33(margin left/right) * 10(sides) = 96.7 */
	/* Each image should be a percentage width / 96.7 */
	margin: 0.5% 0.5% 0.5% 0;
	/* equal 5 parts is width: 19.34% */
}


/* Rule for calculating width %:
	Add up total pixel width for each logo, divide each logo width by that value,
	then remove 0.66% from that value to account for margin-left/right.
*/
.logo1 {
    /* width: 12.1%; */
	width: 19.5%;
}

.logo2 {
	/* width: 22.2%; */
	width: 19.5%;
}

.logo3 {
	/* width: 20.4%; */
	width: 19.5%;
}

.logo4 {
	/* width: 17.6%; */
	width: 19.5%;
}

.logo5 {
	/* width: 24.4%; */
	width: 19.5%;
}

select {
	width:100%;
	padding:4px;
	background-color:#2c3c59;
	border: 1px solid #797f8d;
	border-radius:4px;
	color:#fff;
}


/* General Responsive BEGIN */

@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0% 1% 0%;
	}
	.sub_and_follow {
		font-size: 13px; 
	}
}

@media only screen and (max-width: 480px) {
	.span_2_of_2, .span_1_of_2, .span_1_of_3, .span_1_of_4, .span_2_of_4, .mobile_shift_down  { width: 100% !important; }
	
	/* YouTube WD Mobile Thumbnails */
	.ytwd_gallery_item { 
		width: 100% !important; 
	}
	
	ul.menu_nav {
		padding:0 5% 0 5%;
	}
	
	ul.menu_nav li {
		display: block;
		background-color:#565656;
		margin:1%;
		border-radius:2px;
	}
	
	.vic_headshot {
		width:100% !important;
		height:100% !important;
		padding-bottom:10px;
	}
}

@media only screen and (min-width: 481px) {
	.ytwd_gallery_item  { width: 50% !important; }	
}

@media only screen and (min-width: 768px) {
	.ytwd_gallery_item  { width: 33.3% !important; }
}

@media only screen and (max-width: 768px) {
	
	.mobile_shift_down { width: 100%;}
	
	.BackToTopIcon{
		display:none;
	}
	
	.hover_description {
		display:none;
	}
}

@media only screen and (max-width: 1280px) {
	.menu_shift_down { width: 100%;}
}
	

/* General Responsive END */



/* Timeline Responsive code - BEGIN */

/* General WP Timeline Fixes */

.wptl-embed iframe, .wptl-embed embed, .wptl-embed source, .wptl-embed object
{
	width:100% !important; /* Fixes Broken Width on Mobile Viewports */
}

.wptl-readmore-center {
	display:none;
}

.img-left, .info-img, .wp-post-image {
	width: 100% !important;
	height: 100% !important;
}

.timeline-details p {
	text-align: left;
}

.timeline-details h2 {
	color: #00a4c8;
}

.tlmobile-visible {
	display:none !important; /* disable h1 date on small viewports */
}

/* General Fixes End */

@media only screen and (max-width: 480px) {

	.socialIcons {
		width:10%;
	}
	
	.TimeLnWrapper {
		padding:0;
	}
	.wpex-timeline-list.show-icon .style-center > li .wpex-timeline-label .timeline-details {
		padding: 8px 8px !important;
	}
	
	.wpex-timeline-list.show-icon .wpex-timeline > li .wpex-content-left .tlday {
		font-size: 38px !important;
	}
	
	.wpex-timeline-list.show-icon .wpex-timeline.style-center > li .wpex-content-left .wpex-leftdate {
		padding: 10px 0 0 20px !important;
	}
	
	.wpex h2, .wpex h2 a, .wpex .timeline-details h2, .wpex .timeline-details h2 {
		font-size: 18px;
	}
}
	
@media only screen and (max-width: 480px) {
	
	#vb_head {
		font-size:4.4vw;
	}
	
	#vb_desc {
		font-size:4.2vw;
	}
	
	#vb_ytLink {
		font-size:4.0vw;
	}
	
	#history p {
		font-size: 15px;
	}
}

@media only screen and (min-width: 481px) {
	.TimeLnWrapper {
		padding:0 5%;
	}
	
	#vb_head {
		font-size:2.8vw;
	}
	
	#vb_desc {
		font-size:2.4vw;
	}
	
	#vb_ytLink {
		font-size:2vw;
	}
	
	#history  p {
		font-size: 16px;
	}
	
}

@media only screen and (min-width: 768px) {
	.TimeLnWrapper {
		padding:0 10%;
	}
	
	#vb_head {
		font-size:1.9vw;
	}
	
	#vb_desc {
		font-size:1.5vw;
	}
	
	#vb_ytLink {
		font-size:1.3vw;
	}
	
	#history p {
		font-size: 17px;
	}
}

@media only screen and (min-width: 1280px) {
	.TimeLnWrapper {
		padding:0 20%;
	}
	
	#vb_head {
		font-size:1.6vw;
	}
	
	#vb_desc {
		font-size:1.2vw;
	}
	
	#vb_ytLink {
		font-size:1.0vw;
	}
	
	#history p {
		font-size: 19px;
	}

}

/* Timeline Responsive code - END */


/* YouTube WD Stuff */

.ytwd_channel_info_cell {
	text-align:left !important;
}

.ytwd_channel_header_wrapper {
	display:none;
}

.ytwd_main_video_info {
    background: #f5f5f5 !important;
	padding: 4% !important;
}

.ytwd_show_more_divaider {
	padding: 16px 8px !important;
	background-color: #f6f6f6 !important;
	box-shadow: 0px 20px 40px rgba(0,0,0,.1) !important;
	border: 1px solid #C9C6C6 !important;
	border-radius: 4px;
}

.ytwd_item_title, .ytwd_video_view_counts {
	line-height:1.2em !important;
}

.ytwd_item_title {
	margin-bottom:14px;
}

.ytwd_video_description, .ytwd_video_published_at1, .ytwd_video_description1, .ytwd_video_published_at2, .ytwd_video_description2, .ytwd_video_published_at3, .ytwd_video_description3, .ytwd_video_published_at4, .ytwd_video_description4, .ytwd_video_published_at5, .ytwd_video_description5, .ytwd_video_published_at6, .ytwd_video_description6, .ytwd_video_published_at7, .ytwd_video_description7, .ytwd_video_published_at8, .ytwd_video_description8, .ytwd_video_published_at9, .ytwd_video_description9 {
	line-height:1.2em;
}

.ytwd_video_title {
	line-height:1.4em !important;
}

.ytwd_customDate {
	font-size: 12px;
	color: #959595;
}

/* Very Simple Contact Form Styling BEGIN */

#vscf input, #vscf textarea {
	width:100%;
	border-radius:4px !important;
	border: 2px solid #deefff;
}

#vscf input:focus, #vscf textarea:focus {
    background-color: #add8e6;
}

#vscf_send {
	width:100px !important;
	background-color:#46b1ff;
	font-size:1.4em;
	border:1px solid #fff !important;
}

#vscf p {
	text-align:left !important;
	font-size:1.3em;
	color: #d4e1e6;
}

#contact_info  {
	font-size:1.2em;
	color: #d4e1e6;
}