@charset "utf-8";

/* -- Page Texts Style -- */
body, html { font-family:"Open Sans", Verdana, Arial,Geneva, Helvetica, sans-serif; color:#aaa; font-size:14px; }
a:link,	a:visited, a:hover,	a:active{ text-decoration: none; font-family:Verdana, Arial, Helvetica, sans-serif; }
a:link, a:visited {color:#aaa;}
a:visited {}
a:hover, a:active {color:#cc0000;}
a:active{}

hr { 
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(204,0,0,0), rgba(204,0,0,0.75), rgba(204,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(204,0,0,0), rgba(204,0,0,0.75), rgba(204,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(204,0,0,0), rgba(204,0,0,0.75), rgba(204,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(204,0,0,0), rgba(204,0,0,0.75), rgba(204,0,0,0)); 
}
h1 {font-size:3em;}
h2 {font-size:2.5em;}
h3 {font-size:2em;}
h4 {font-size:1.5em;}
h5 {font-size:1em;}
h6 {font-size:0.9em;}
h7 {font-size:0.8em;}

.TextAlign {text-align:center;}
.Title {font-size: 1em;}
.SubTitle {font-size:0.9em;}
.SmallTitle {font-size:0.8em;}
.VerySmallTitle {font-size:0.7em;}

body { color:#3a3a3a; background:#1f1f1f}
header {position:fixed; top:0; z-index:10 ; width:100% !important; background:#282828; min-height:54px; border-bottom:1px solid #3d3d3d;-webkit-box-shadow: #000000 0 0 10px; -moz-box-shadow: #000000 0 0 5px; box-shadow: #000000 0 0 10px;}

/* footer */
footer { padding:10px; margin:15px 0; text-align:center; font-size: 11px;}
footer p { font-style:normal; font-size: 11px; margin:5px; font-weight: normal; color: #aaa; text-shadow: 0px 1px 0px rgba(0, 0, 0, 1)}
footer p span:before { content: "© ";}

#container { margin: 0 auto; width:60% !important; clear:both;}

/* LOGO */
header #container #logo a { float:left; width:140px; height:50px; display:block; overflow:hidden; margin:0px 10px 2px; background:transparent url(images/assets.png) 0px 0px no-repeat; }
header #container #logo a:hover { background-position:0px -50px}

nav { float:right; margin:5px 0;}
nav ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;  }
nav ul li { float: left; }
nav ul li a { display: block; color:#fff; text-align: center; padding: 14px 16px; text-decoration: none; }
nav ul li a:hover{ background-color: #111; color: #fff; }
nav ul li a:hover:not(.active) { background-color: #111; }
nav ul li .active { background-color: #333; color:#ccc;}

#wrapper {margin-top:65px;}
#widgetTitle {margin:0 auto; color:#aaa; font-size: 1.8em; font-weight:bold; text-transform: capitalize; padding:0 0 5px; text-shadow:1px 1px 5px #000; }
#widget {margin:0 auto 60px; padding:0; color: #777777; vertical-align: top; text-decoration: none; font-size: 13px; line-height: 21px; }

/* videoGallery */
#videoGallery a:hover, #showMore a:hover {
	background-color: rgba(0,0,0,0.9);
	-webkit-box-shadow: #000000 0 0 10px;
	-moz-box-shadow: #000000 0 0 5px;
	box-shadow: #000000 0 0 10px;
}
#videoGallery a, #showMore a {-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background-color:#000; -webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5); box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);}
#videoGallery {text-align:center; width:100%; display:table; position:relative; }
#videoGallery a { float:left; margin:1%; width:23%; height:120%; max-height:120%; text-align:center; overflow:hidden; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; -webkit-transition:all 0.5s ease; transition:all 0.5s ease;}
#videoGallery a p { padding:1px 5px; margin-top:-5px; text-align:left; color:#aaa; white-space: nowrap; font-size:.9em; height:20%; max-height:20%; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; -icab-text-overflow: ellipsis; -khtml-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -webkit-text-overflow: ellipsis; }
#videoGallery a:hover p { color:#fff; }
#videoGallery a:hover img { opacity:0.6; }
#videoGallery a img { width:100%; height:100%; }
#showMore {width:100%; margin: 2% auto 0; text-align:center; }
#showMore a {background-color:#000; color:#bbb; padding:1% 2%; font-weight:bold; margin:10px;}
#showMore a:hover { background-color:#cc0000; color:#fff; }

/* WATCH */
#YT { margin:0px auto 0; width:100%; background:#1d1d1d; color: #aaa; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; -webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);}
/*#YT iframe { background-color:#1d1d1d; width:100%; height:607px;  }*/
#YT #videoHolder {text-align:center;}
#YT #videoHolder iframe { background-color:#000; width: 100%; height: 33.4vw;}
#YT #link{ font-weight:bold; color:#600}
#YT #info{ padding:0 40px 15px; font-size:1em;}
#YT #info #title,  #fb-root h1{color: #aaa; font-size:1.8em; font-weight:bold; text-shadow:1px 1px 5px #000; padding:10px 0; }

#YT .more-less .more-block p{ font-size:.9em; margin:10px 0 20px; }
a.adjust{ margin:5px auto 0; padding:5px 10px; display:block; font-size:1em; font-weight:bold; background:#ddd; color:#1d1d1d; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; width:200px; text-align:center; text-decoration:none; text-transform:uppercase; }
a.adjust:hover{ background:#1d1d1d; color:#FFF; -webkit-transition: all 400ms; /*safari and chrome */ -moz-transition: all 400ms ease; /* firefox */ -o-transition: all 400ms ease; /* opera */ transition: all 400ms ease;}

/* FB Comments */
#fb-root {background:#1d1d1d; color:#ccc; margin-top:25px; padding:0 40px 15px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);}
#fb-root h1{text-align:center; }

/*==============================
		Mobile Devices
================================*/
@media screen and (max-width:1440px){ /* Samsung Galaxy Tab - Landscape {1024x600} */
	#container { width:75% !important;}
	#videoGallery a { margin:1%; width:23%;}
	#YT #videoHolder iframe { width: 100%; height: 41.6vw; }
}

@media screen and (max-width:1024px){ /* Samsung Galaxy Tab - Landscape {1024x600} */
	#videoGallery a { margin:1%; width:31.3333333333%;}
	#YT #info{ padding:0 20px 15px; }
}

@media screen and (max-width:800px){ /* Samsung Galaxy Tab (7.7, 8.9, 10.1) - Landscape {1280x800} */
	#container { width:80% !important;}
	#videoGallery a { margin:1%; width:48%;}
	#YT #videoHolder iframe { width: 100%; height: 43.8vw; }
	#showMore {margin: 3% auto 0;}
	#showMore a {padding:2% 5%;}
	#YT #info{ padding:0 20px 15px; }
}

@media screen and (max-width:640px){/* Samsung Galaxy Note 3 - Landscape and Tap */
	#videoGallery {display: block; padding:1% 0 }
	#videoGallery a { margin:2%; width:96%; display:block; float:none; }
	#showMore {margin: 4% auto 0;}
	#showMore a {padding:2% 6%;}
	#YT #info #title {font-size:1.3em;}
}

@media screen and (max-width:480px){
	#videoGallery a { margin:2%; width:96%;}
	#showMore {margin: 5% auto 0;}
	#showMore a {padding:3% 30%;}
	#YT #info #title {font-size:1.3em;}
}

@media screen and (max-width:360px){ /* Samsung Galaxy Note 3 {360x640} */
	#videoGallery a { margin:2%; width:96%;}
	#YT #info #title {font-size:1.2em;}
}

@media screen and (max-width:320px){ /* Samsung Galaxy Tab {320x568} */
	#videoGallery a { margin:2%; width:96%;}
	#YT #info #title {font-size:1.2em;}
}