/* general frame */
.main-wrap {
  display: grid;
  border: 2px solid blue;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.main-wrap.default .header, .main-wrap.home .header, .main-wrap.fourcolumn .header  {
	grid-column: 1 / 2;
}
.main-wrap.default .contentarea, .main-wrap.home .contentarea, .main-wrap.fourcolumn .contentarea {
	grid-column: 2 / 5;
}
.main-wrap.work .contentarea {
	grid-column: 2 / 4;
}
.main-wrap header, .main-wrap main {
	border-right: 2px solid blue;
}
.main-wrap section:last-child {
	border-right: none;
}
.main-wrap .header, .main-wrap .contentarea, .main-wrap .contentbar {
  box-sizing: border-box;
  height: 96vh;
  overflow-y: scroll;
  -ms-overflow-style: none;  // IE 10+
  overflow: -moz-scrollbars-none;  // Firefox
} 
	
@-moz-document url-prefix() { .header, .content, .contentbar {  } }

.contentbar {
	box-sizing: border-box;
}
::-webkit-scrollbar{
	width: 0px;
	display: none;
}

::-webkit-scrollbar-track-piece{
	background-color: transparent;
	-webkit-border-radius: 6px;
}

/* color, fonts, style  */
* {
-webkit-font-smoothing: antialiased;
font-family: 'Times', sans-serif; color: blue;
}
 /*
    When setting the primary font stack, apply it to the Pure grid units along
    with `html`, `button`, `input`, `select`, and `textarea`. Pure Grids use
    specific font stacks to ensure the greatest OS/browser compatibility.
    */
    html, button, input, select, textarea,
    .pure-g [class *= "pure-u"] {
        /* Set your content font stack here: */
        font-family: Times, "Times New Roman", serif;
    }
a {
	text-decoration: none;
	color: blue;
}
a:hover {
	font-style: italic;
}
ul {
	list-style: none;
}
/* HEADER MENU */

h1, ul {
	margin: 0em 0em 0em 0em !important;
	padding: 0em 0em 0em 0em !important;
}
h1 a {
	display: block;
	padding: 0.3em;
	text-align: center;
}
h1 {
	-webkit-margin-after: 0em;
}
h2, h3 {
	font-weight: normal;
	margin: 0 0 0 0 !important;
	font-size: 1em;
	padding: 0 0 0.4em 0 !important;

}
#left_wrapper {
	width: 100%;
	font-size: 1.10em;
}
#left_wrapper h1 a img {
	width: 60%;
	height: auto;
}
#main_menu li {
	border-top: 2px solid blue;
}
#main_menu li a, #main_menu li ul li {
	padding: 0.4em 0;
}
#main_menu li a {
	display: block;
	padding-left: 0.4em;
}
#main_menu li ul li {
	padding: 0 0 0 1em;
}
.accordion-content li img {
	z-index: 9999;
}
#main_menu li:last-child {
	border-bottom: 2px solid blue;
}
#main_menu li ul li:last-child {
	border-bottom: none;
}
ul#main_menu {
	padding-bottom: 1.1rem !important;
}
#main_menu li ul {
display: none;
}
#main_menu li.is-active ul {
	display: block;
}
.accordion-toggle {cursor: pointer;}
  .accordion-content {display: none;}
  .accordion-content.default {display: block;}



/* Project section */


.text-hover-image:hover {
	font-style: italic;
}
.text-hover-image+img {
	display: none;
}

.menu-subitem-work+div { 
	/** Default lightbox to hidden */
	display: none;

	/** Position and style */
	position: fixed;
	z-index: 999;
	width: 80%;
	height: 80%;
	text-align: center;
	top: 0;
	left: 15%;
	}
.menu-subitem-work+div>img {
		/** Pad the lightbox image */
	max-width: 90%;
	max-height: 80%;
	margin-top: 2%;
}
.menu-subitem-work:hover+div { display: block; }

/* Project Works */ 

.contentarea section {
	display: grid;
	justify-items: center;

}
.contentbar {
	padding: 0.45em 0.4em;
	font-size: 1.10em;
	line-height: 1.2em;
	}	
.contentbar section p:first-child  {
	margin-top: 0em;
}

.illustration {
	padding: 1em;
}
.mainonly {
	padding: 0.45em;
	font-size: 4em;
}
.mainonly p {
	margin: 0;
}
.mainmetagrid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	box-sizing: border-box;
	border-bottom: 2px solid blue; 
}
.mainmetagrid div {
	box-sizing: border-box;
	border-right: 2px solid blue;
	padding: 0.6em;
	font-size: 0.9em;
	letter-spacing: 0.05em;
}
.mainmetagrid div p {
	margin: 0;
}
.mainmetagrid div:last-child {
	border-right: 0px solid blue;
}
.main-wrap.fourcolumn .contentarea {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr; 
}

.main-wrap.fourcolumn .contentarea div {
	box-sizing: border-box;
	padding: 0.4em;
	font-size: 1.10em;
}
.video {
	margin: 0;
	padding: 0;
}
/* Media Queries */
 /* MOBILE VIEW */
@media (max-width: 768px) {
	.main-wrap.work .header, .main-wrap.default .header, .main-wrap.home .header, .main-wrap.fourcolumn .header  {
		grid-column: 1 / -1;
	}
	.main-wrap.work .contentarea, .main-wrap.work .contentbar, .main-wrap.default .contentarea, .main-wrap.home .contentarea, .main-wrap.fourcolumn .contentarea {
		grid-column: 1 / -1;
	}
	.main-wrap main, .main-wrap header  {
    	border-right: none;
	}
	.main-wrap .header, .main-wrap .contentarea, .main-wrap .contentbar {
  		height: auto;
	} 
	ul#main_menu {
    	padding-bottom: 0 !important;
	}
	.main-wrap.fourcolumn .contentarea div {
		grid-column: 1 / -1;
	}
	 .accordion-content.default, #main_menu li.is-active ul {display: none;}
}
/* TABLET */
@media (min-width: 768px) and (max-width: 860px) {
	.mainmetagrid
	{
		grid-template-columns: 1fr;
	}
	.mainmetagrid div {
		border-right: 0;
		border-bottom: 2px solid blue;
	}
	.mainmetagrid div:last-child {
		border-bottom: 0px solid blue;
	}
}