/* Grawlix | Stick figure - v1.2 | getgrawlix.com */





/* ! ------ 1. INTRO */

/* LET’S GO!
 * Here’s the deal: Coding is hard. It’s tedious.
 * It’s infuriating. It’s one letter out of place
 * place and your whole project goes out the
 * proverbial window.
 *
 * Our goal is to help you publish comics on the web.
 * So we documented this theme to help you get started 
 * in a hurry. You want to change something? It’s
 * probably here.
 */

/* USEFUL LINKS
 * When in doubt, ask for help at www.getgrawlix.com/forum.
 * Learn about CSS at http://htmldog.com/guides/css/
 * and http://www.w3schools.com/css/.
 * Get updates at twitter.com/grawlixcomix/.
 * Support us and get insider info at patreon.com/grawlixocmix/.
 */

/* HEY CSS PURISTS:
 * We used px, not ems or rems, because our users think
 * in pixels, not typographic units. Normally we’d go
 * for content-first measurements like rems or ems,
 * but in this case pixels make more sense. Adjust
 * the code below as you see fit.
 */


/* Get the Foundation layout grid. “Classic” archives 
 * (those for the CMS version 1.3 and before) use this 
 * grid code.
 */
@import url('foundation.min.css');




/* ! ------ 2. GENERAL */

/* Site-wide parameters. When in doubt, readers’
 * browsers defer to this. Learn about background
 * properties at
 * https://css-tricks.com/almanac/properties/b/background/
*/

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	
}


html, body {
	  overflow: auto;


 
}


:root {
  --mainLight: #f0fff1;
  --mainDark: #112e4ccc;
  --accent: #81ffb0;
  --accentL: #31c995cc;
  --accentD: #31c9958c;
  --navBar: #ffffff1c;
  --offWhite: #ffffff;
  --oceanTop: #180d13;
  --oceanBottom: #074856;
}


body {
	min-height: 102vh;
	margin: 0;
	padding: 0;
	color: var(--mainLight);
	font-family: "filson-soft",sans-serif;
	font-weight: 300;
	font-size: 11pt;
	line-height: 20pt;
	background: linear-gradient(to bottom, var(--oceanTop) 0%,var(--oceanBottom) );
	background-color: var(--oceanTop);
	position: relative;

	
  
}




/* BORDER RADIUS */

img, nav, main, div {
		 -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
}


article{
	 border-radius: 3px 3px 0px 0px;
	 color: var(--mainLight);


}

.blogPromo{
	border-radius: 0px 0px 3px 3px;
}


/* HEADERS */

h2{
	font-size: 30px;
	padding: 10px;
	margin-bottom: 40px;

	font-weight: 200;
	letter-spacing: 2px;
	border-bottom: 2px solid;
	width: 200px;
}

h3{
	font-size: 18px;
	font-weight: 200;
	letter-spacing: 2px;
	margin-bottom: 20px;
}


/* HEADERS */


/* unvisited link */
nav a:link {
    color: var(--accent);
    text-decoration: none;
}

/* visited link */
nav a:visited {
    color: var(--accent);
}

/* mouse over link */
nav a:hover {
    opacity: .5;
    
}

::-webkit-input-placeholder { /* WebKit browsers */
  	color: var(--mainDark);
     opacity: 1 !important;
}


/* unvisited link */
a:link {
    color: var(--mainLight);
    text-decoration: underline;
}

/* visited link */
a:visited {
    color: var(--mainLight);
}




/* ! ------ 3. IMAGES */

/* We recommend you leave this alone unless you understand RWD.
 * Learn more at https://css-tricks.com/almanac/properties/m/max-width/
 */

a img { border: none; }
img { max-width: 100%; display: block; }
figure { margin: 0; }




/* ! ------ 4. COMIC _SITE_ WIDTH */



mainGrid{
    padding: .5rem;
    display: grid;
    grid-template-columns: 1fr minmax(200px, 850px) 1fr;  
    grid-template-rows: auto auto auto ;
    grid-gap: .4rem 0;
    justify-items: center;
    z-index: 10;


  
}

.headerGrid,  footer{
  grid-column: 2 / 3;
  z-index: 10;
}

.contentGrid{
	grid-column :1/4;
}


 .contentGrid{
    display: grid;
    grid-template-columns: 1fr minmax(200px, 850px) 1fr;  
    grid-gap: .4rem 0;
    justify-items: center;
    z-index: 10;
 }

 nav,.socialGrid,.blogGrid, .promo, main{
 	grid-column :2/3;
 	 z-index: 10;
 }

 .comicNavGrid{
	display: grid;
    grid-template-columns: 1fr minmax(200px, 500px) 1fr;
    grid-gap: .3rem .3rem;
    width: 100%;
 }

 .navcontainer{
	display: grid;
    grid-template-columns: 1fr minmax(200px, 500px) 1fr;
    grid-gap: .3rem .3rem;
    width: 100%;
 }


.socialGrid{
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: .4rem  ;
    width: 100%;
    height: auto;
   
    
}

.blogGrid{
	display: grid;
    grid-template-columns: 1fr  160px;
	grid-template-rows: auto 1fr;    
	grid-gap: 0rem .3rem;
    width: 100%;
    
}


header img {
	grid-column: 2 / 3;
	padding-bottom: 20px;
	max-height: 170px;

}


figure {
	grid-column: 1/ 4;

	
}

main{
	 background-color: var(--navBar);
	 padding: 40px;
	 font-weight: 300;
	 width: 100%;
	 min-height: 300px;
	 display: flex;
	text-align: center;
	justify-content: center;
}


.static-layout-list{
	 

	display: flex;
	align-items: center;

	flex-direction: column;

}




/* ! ------ 6. BLOG POST */

/* Content in the news-of-the-day message.
 */

 


.blogGrid article{
	 grid-column: 1 / 3;
	 grid-row: 1/2;
	 background-color: var(--offWhite);
	 color: #1e1b1e;
	 padding: 20px;
	 font-weight: 500;
	 font-size: 14px;
	 font-style: italic;

}

#blog-post .meta{
	font-size: 24px;
	padding-bottom: 20px;
	padding-top: 20px;
	font-weight: 400;
}


.sidePromo{
	 grid-column: 2 / 3;
	 grid-row: 1/3;
	 width: 100%;
	 height: 600px;
}

.blogPromo{
	 grid-column: 1 / 3;
	 grid-row: 2/3;
	 width: 100%;
	 background-color: var(--navBar);
	 height: 100%;
	 padding: 20px;
	 background:url('/images/wave2.jpg');
	 background-repeat:repeat;
	 background-size: 500px;
	 background-position: center top;
}


@media (max-width: 600px) {

.blogGrid article, .blogPromo {
	 grid-column: 1 / 3;
	 grid-row: auto;
}

.sidePromo{
	display: none;
}
 
}



/* ! ------ 7. MENU */

/* Include site-wide navigation (a.k.a.
 * the menu) and back/next links.
 */



nav{
	font-size: 16px;
	letter-spacing: 2px;
	
}

.button-group {

	 grid-column: 2 / 3;
	 display: flex;
	 justify-content: space-evenly;
	 align-items:center;
	 width: 100%;
	 padding-top: 30px;
	  padding-bottom: 30px;

}


li {
  display: inline-block;

}


ul {
	padding: 0;
	display: flex;
	justify-content: center;
	align-items:center;
}

nav .icon{
	height: 20px;
	width: auto;
}


nav.backnext-nav{
   
	background-color: var(--navBar);
	display: flex;
	justify-content: center;
	align-items:center;
	width: 100%;
	padding: 12px;


}

nav.backnext-nav li{
   
	padding-right: 20px;
	padding-left: 20px;


}

.social{
	
 	width: 100%;
 	height: 100%;
 	display: flex;
  	justify-content: center;
  	align-items: center;
  	flex-direction: column;
  	background-color: var(--navBar);
  	 padding-top: 20px;
    padding-bottom: 20px;

  

}

.social h1{
	color: var(--mainLight);
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 1.5px;
}

.social .icon{
	height: 50px;
	padding: 10px;
	width: auto;
}

.icon:hover{
  opacity: .5;
  
}





footer{
	padding: 20px;
	padding-bottom: 200px;
	display: flex;
	justify-content: center;
	align-items:center;
	text-align: center;
	width: 100%;
	color: var(--mainLight);
}

 


.promo{
	
}


@media (max-width: 600px) {

.signup, .social {
	 grid-column: 1 / 4;
	 justify-content: space-evenly;
  	align-items: center;
	
}

}

/* ! ------ 9. ARCHIVES */

/* Version 1.4 of the Grawlix CMS introduced a 
 * new HTML structure for archives. It’s more
 * of a hierarchy than the old way and allows 
 * for marker images.
 */



/* ! --- 9a. Archive layout */

/* Everything in this structure is inside an 
 * unordered list (UL). This bit removes the 
 * default bullet points.
 */
.archive{
	display: flex;
    align-items: center;
    flex-direction: column;
}

.archive-content ul {

}

/* Various types of layouts. */
.archive-layout--list {
	display: flex;
	flex-direction: column;
}
.archive-layout--grid {
	display: flex;
	flex-wrap: wrap;
}
.archive-layout--inline {
}



/* ! --- 9b. Columns */

/* If you want a grid-based archive layout (v1.4), 
 * how many columns do you want? Uncomment the 
 * appropriate sets below to divide the grid into 
 * two, three, four, or five markers across.
 */

/* Create a two-up layout grid. */
/*
.archive-layout--grid .archive-marker {
	width: 45%;
	margin-right: 5%;
}
*/

/* Create a three-up layout grid. */
.archive-layout--grid .archive-marker {
	width: 30%;
	margin-right: 3%;
}

/* Create a four-up layout grid. */
/*
.archive-layout--grid .archive-marker {
	width: 24%;
	margin-right: 1%;
}
*/

/* Create a five-up layout grid. */
/*
.archive-layout--grid .archive-marker {
	width: 19%;
	margin-right: 1%;
}
*/


/* ! --- 9c. Archive levels */

/* Styles for various “ranks” of markers, such as 
 * volume, chapter, scene, etc. 
 */
.archive-level-1 {
	font-size: 1rem;
}
.archive-level-2 {
	font-size: 0.8rem;
}
.archive-level-3 {
	font-size: 0.6rem;
}

/* ! --- 9d. Archive details */

/* Add a little space between markers. */
.archive-marker {
	margin-bottom: 2rem;
}

/* Markers’ images typically need a little space too. */
.archive-marker header img {
	margin-bottom: 0.5rem;
}

/* Page items also need some breathing room. */
.archive-page {
	margin: 1.5%;

}

/* Make publication dates look a little less important — and less distracting. */
.archive-page time {
	font-size: 0.75em;
	display: block;
}

.thumb img{
	height: 220px;

}


@media (max-width: 600px) {

.thumb img{
	height: 60px;

}
}



/* ! --- 10. Share/follow */

.share-icons img {
	max-width: 32px;
}



/* ! --- 11. Utility */

/* Breaks are old-fashioned, but reliable
 * across every major browser.
 */
.clearfix {
	clear: both;
}
.clearfix:before,.clearfix:after{
	content:" ";
	display:table;
}







/* What else would you like to see?
 * Share your thoughts about this theme
 * with the community at:
 * http://www.getgrawlix.com/forum/categories/feedback
 */


	
/* PARALLAX */

.keyart, .keyart_layer {
	z-index: 0;
	
}




.keyart div{
	
	
}

.keyart_layer {
	position: fixed;

}

.keyart_layer.parallax {
	
}
	#keyart-bg {
			
			
	width: 100%;
	height: 300vh;
	top: -100px;	
	background-image: url("/images/particlesBack2.png");
	background-repeat: repeat;
	background-size: 1000px;
	opacity: .1;
	
	}

	#keyart-0 {
			
	width: 100%;
	height: 300vh;
	top: 0;	
	background-image: url("/images/particlesBack.png");
	background-repeat: repeat;
	background-size: 1000px;
	opacity: .4;
	}

	#keyart-1 {
	width: 100%;
	height: 300vh;
	top: -400px;	
	background-image: url("/images/particlesMid.png");
	background-repeat: repeat;
	background-size: 1600px;

	opacity: .6;
	}

	#keyart-2 {
			
	position: fixed;
	width: 1050px;
	top: 0;
	left: 50%; 
	margin-left: -525px; 
	opacity: 1;
	
	}


	#keyart-2 div{
	
	background-repeat:no-repeat;
	position:absolute;
	display:block;
	overflow:hidden;
	opacity: .6;
}
	
div#bg-3-1{
	background:url('/images/header.png');
	background-repeat: no-repeat;
	width:1045px;
	height:600px;
	top: -20px;
}



div#bg-3-2{
	background:url('/images/footer.png');
	width:1021px;
	height:600px;
	top: 1800px;
	opacity: .6;
	
}

@media (max-width: 600px) {

#keyart-2 div{

	display: none;
}