/*	----------------------------------------	
	TheGuestsShadow.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;}



/*	----------------------------------------	
	!FORMATS
	---------------------------------------- */
html { height:100%; }

body { color:#333; font-family:Helvetica,Arial,Verdana,sans-serif; min-height:99vh; padding:20px; position:relative; 
	background-color:#f6d1d1; background-image:url('img/bg220.png'); background-repeat:repeat;
	}

body.hp { color:#fff; font-family:Helvetica,Arial,Verdana,sans-serif; padding:20px; min-height:100%;
	background-color:#000;
	background-image:url('img/CT2.jpg'); 
	background-size:auto; 
	background-repeat:no-repeat;
	background-position:top center, top;
	}

h1 { font-weight:bold; font-size:150%; }
h2 { font-size:150%; margin:0 0 0.5em; }
	h1+h2 { margin-top:0.5em; }
h3 { font=size:125%; font-weight:bold; margin-top:1.5em; line-height:1.5em; }
h4 { font-weight:bold; margin-top:1.5em; line-height:1.5em; }

br.conditional { display:none; }
p { line-height:150%; max-width:40em; }
p+p { margin-top:1.2em; }
h1+p { margin-top:1.8em; }
h3+p { margin-top:0.6em; }

a { color:#333; text-decoration:underline; }
.hp a { color:#ff0; }

ol.numbers { list-style:decimal; list-style-position:outside; }
ol.numbers li { max-width:40em; margin-left:1.5em; margin-top:0.25em; }

ul.bullets { list-style:disc; list-style-position:outside; }
ul.bullets li { max-width:40em; margin-left:1.5em; margin-top:0.25em; }


.nav { position:absolute; top:20px; left:75%; }
.nav a { text-decoration:none; }
.nav li { line-height:300%; }
.nav li.active { color:#666; font-weight:bold; }
.hp .nav { font-weight:bold; position:relative; top:auto; left:auto; margin-top:2em; }
.hp .nav li { font-size:150%; line-height:200%; }

#TGSlogo { max-width:60%; }
.hp #TGSlogo { max-width:75%; filter: invert(100%) sepia(0%) saturate(7474%) hue-rotate(15deg) brightness(122%) contrast(100%); opacity:0.8; }

img.ArtworxTO { clear:all; display:block; margin:1em 0 2em 75px; max-height:40px !important; }
.hp img.ArtworxTO { max-height:60px !important; }

.event { background:rgba(255,255,255,0.75); display:inline-block; margin:50px; padding:20px; max-width:500px; }

.grid-item { break-inside:avoid; display:inline-block; margin:0 1.0em 1.0em 0; position:relative; width:100%; vertical-align:top; }

.lantern-grid { column-count:1; display:block; margin:1.5em 0 3.0em; position:relative; }
.lantern-grid .grid-item { background-color:#fff; height:200px; max-width:44%; overflow:hidden; }
.lantern-grid .grid-item img { position:absolute; bottom:0; left:0; z-index:1; max-width:100%; }
.lantern-grid .grid-item p { background:rgba(255,255,255,0.75); font-size:110%; font-weight:bold; position:absolute; top:5px; left:5px; z-index:3; }

.sponsors { clear:both; margin-top:2em; width:100%; }
.sponsors img { max-height:80px !important; }

iframe { margin-top:2.0em; max-width:100%; }


/*	----------------------------------------	
	!MEDIA QUERIES
	---------------------------------------- */
@media only screen and (min-width:600px){

h1 { font-size:225%; }
.lantern-grid .grid-item { background-color:#fff; height:200px; max-width:29.5%; }
#TGSlogo { max-height:200px; max-width:auto; }
.hp #TGSlogo { max-height:400px; }
img.ArtworxTO { margin:1em 0 2em 70px; }
.hp img.ArtworxTO { margin:1em 0 2em 20%; }

}

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

h1 { font-size:300%; }
a:hover, a:active { color:#00f; }
.hp a:hover, a:active { color:#0ff; }

.hp #TGSlogo { max-width:49% !important; max-height:400px; }
.hp .info { position:absolute; left:51%; top:100px; max-width:45%; }
.hp .nav li { display:inline-block; margin-right:2em;  }

.lantern-grid .grid-item { height:220px; max-width:22%; }
.sponsors { position:absolute; bottom:0; left:0; }

}

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

br.conditional { display:block; }

.hp img.ArtworxTO { margin:1em 0 2em 145px; }
.hp .info { top:180px; }
.hp .nav { position:absolute; top:410px; left:50%; }

.lantern-grid .grid-item { max-width:17.5%; }

}