/*	----------------------------------------	
	CraftsAbyss.com
	Stylesheet
	---------------------------------------- */


/*	----------------------------------------	
	!RESET 
	based on http://meyerweb.com/eric/tools/css/reset/ v2.0 
	---------------------------------------- */
html,body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,em,img,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,section,summary,time,mark,audio,video{border:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:baseline;text-rendering:optimizeLegibility;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
img,video{max-width:100%;}
b,strong{font-weight:bold;}
i,em{font-style:italic;}
a{text-decoration:none;}



/*	----------------------------------------	
	!GLOBAL FORMATS
	---------------------------------------- */
body { color:#666; font-family:Helvetica,Arial,Verdana,sans-serif; margin:100px auto 50px; text-align:center; 
	background-color:#000;
	background-image:url('../img/CAheader.jpg'), linear-gradient(#000,#333); 
	background-size:100% auto, 100% auto; 
	background-repeat:no-repeat, no-repeat;
	background-position:top center, top;
	}

body.Homepage { margin:120px auto 50px; 
	background-color:#333;
	background-image:url('../img/CAheader-hp.jpg'), linear-gradient(#000,#333); 
	background-size:100% auto, 100% auto; 
	background-repeat:no-repeat, no-repeat;
	background-position:top center, top;
	}

body.hour { 
	background-image:url('../img/CAheader.jpg'), linear-gradient(#000,#000); 
	}


h2 { color:#fff; font-size:150%; line-height:1.5em; margin:1em auto 2em; }
	h2.left { max-width:40em; text-align:left; }
p { color:#ff0; font-weight:bold; }
a { color:#fff; }
	h2 a { text-decoration:underline; }

.quiet { display:none; }

#Link { content:''; display:block; margin-top:-100px; height:100px; width:100%; }
#Link a { display:block; height:100px; width:100%; }


@media only screen and (min-width:600px){
	body { margin:150px 15px 100px; }
	body.Homepage { margin:200px 15px 100px; }
	#Link { height:150px; margin-top:-150px; }
	#Link a { height:150px; }
}
@media only screen and (min-width:800px){
	body.Homepage { margin:300px 15px 100px; }
}
@media only screen and (min-width:1150px){
	body.Homepage { margin:450px 15px 100px; }
}



/*	----------------------------------------	
	!HOME PAGE
	---------------------------------------- */
//.thumbnail-grid { float:left; margin:0 auto; overflow:auto; }
.thumbnail-grid { display:grid; grid-template-columns:auto auto; column-gap:15px; margin:15px; }

.grid-item { float:left; margin:0 15px 15px 0; width:100%; height:auto; position:relative; }
	.hour .grid-item { height:240px; max-width:200px; margin-bottom:30px; }
	.hour .grid-item p { position:relative; margin-top:1em; ; text-align:center; }
	.yarn .grid-item { height:240px; max-width:200px; margin-bottom:30px; }
	.yarn .grid-item p { position:absolute; bottom:0; }
.grid-item img { width:auto; height:auto; object-fit:cover; }
	.hour .grid-item img { max-height:200px; max-width:200px; }
	.yarn .grid-item img { max-height:200px; max-width:200px; }
	

li.videoblue::after { background:url('../img/smoke-blue.gif') top center no-repeat; background-size:100% auto; content:''; position:absolute; top:0; left:0; bottom:0; right:0; z-index:-1; pointer-events:none; }
li.videogreen::after { background:url('../img/smoke-green.gif') top center no-repeat; background-size:100% auto; content:''; position:absolute; top:0; left:0; bottom:0; right:0; z-index:-1; pointer-events:none; }
li.videoorange::after { background:url('../img/smoke-orange.gif') top center no-repeat; background-size:100% auto; content:''; position:absolute; top:0; left:0; bottom:0; right:0; z-index:-1; pointer-events:none; }
li.videored::after { background:url('../img/smoke-red.gif') top center no-repeat; background-size:100% auto; content:''; position:absolute; top:0; left:0; bottom:0; right:0; z-index:-1; pointer-events:none; }



@media only screen and (min-width:600px){
.thumbnail-grid { grid-template-columns:auto auto auto; }
}
@media only screen and (min-width:800px){
.thumbnail-grid { grid-template-columns:auto auto auto auto; }
.hour .thumbnail-grid { grid-template-columns:auto auto auto; max-width:750px; margin:0 auto; }
}
@media only screen and (min-width:1000px){
.thumbnail-grid { grid-template-columns:auto auto auto auto auto; }
.hour .thumbnail-grid { grid-template-columns:auto auto auto; }
}



/*	----------------------------------------	
	!DETAIL PAGES
	---------------------------------------- */
.Episode { display:block; position:relative; width:320px; height:180px; margin:0 auto 50px; }
.Episode iframe { display:block; position:absolute; top:0; width:100%; height:100%; }

.hero { display:block; width:95%; height:auto; margin:0 auto 75px; position:relative; }
.unfolded { display:block; width:95%; height:auto; margin:0 auto 150px; position:relative; }
.unfolded img { max-height:100%; width:auto; }

.overlay { position:absolute; top:0; bottom:0; left:0; right:0; width:100%; height:100%; opacity:0; transition:0.25s ease; }
.overlay img { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.unfolded:hover .overlay { opacity:0.95; }


@media only screen and (min-width:600px){
.Episode { width:600px; height:340px; margin-bottom:75px; }
}
@media only screen and (min-width:800px){
.Episode { width:800px; height:455px; margin-bottom:100px; }
}
@media only screen and (min-width:1050px){
.Episode { width:1000px; height:565px; margin-bottom:150px; }
.hero { width:1000px; height:750px; margin-bottom:150px; }
.unfolded { width:1000px; }
}


/*	----------------------------------------	
	!TEASER
	---------------------------------------- */
body.Teaser { background:#000; margin:0; }