@import url(https://fonts.googleapis.com/css?family=Lora);
@import url(https://fonts.googleapis.com/css?family=Montserrat);
@font-face {
    font-family: tinyHands;
    src: url('/trunk/BFTinyHand-Regular.otf');
}
*{margin:0;padding:0}
* html .galleria li div span{width:400px;} /* MSIE bug */
html{
	height: 100%;
	text-rendering:optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	font-weight: 400;
}
	body{
		background: white;
		color:black;
		font: 'Arial', Gadget, sans-serif;
		height:100%;
	}
	h1{
		font-size: 1.6rem;
	}
	h2{
		font-size: 1rem;
	}
	h1, h2, .prelude_txt1, .prelude_header1{
		font-weight: normal;
		text-transform: uppercase;
		text-align: left;
	}
	h1, h2, .cat_title, .unit, .work_cat, .prelude_txt1, .prelude_header1{
		font-family: 'Montserrat', sans-serif;
		letter-spacing: 1.2px;
		line-height: 1.4;
		color: #636363;
	}
	a{
		color: black;
		outline:none;
		text-decoration: none;
	}
	a:hover{
		color: black;
	}
	.caption{
		color: #909090;
		font-size: 0.75em;
		font-family: 'Montserrat', sans-serif;
	}

	.link{
		color: black;
		border-bottom: 2px solid #FF8F40;
	}
	.link:hover{
		background-color: #FFE98E;
	}
	img{
    	max-width: 100%;
	}


/** wrapper **/
#main{
	display: grid;
	grid-template-columns: 377px 1fr 1fr;
	grid-gap:15px;
	padding-left: 10px;
	padding-right: 10px;
	margin-left: auto;
	margin-right: auto;
	max-width: 1220px;
	height: auto;
}
/** main page image **/
	#root{
		position: absolute;
		top:0px;
		min-width: 100%;
    		height: 100%;
    		background-image: url('/img/index/root.jpg');
    		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
  		background-size: cover;
  		background-position: top;
  		background-repeat: no-repeat;
	}

/*******/
.title{
	display: inline-block;
}
.title a
{
	text-align: center;
	font-size: 1.6rem;
	font-family: 'Montserrat', sans-serif;
	color: #636363;
	border-bottom: none;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-top: 25px;
	display: inline-block;
	padding-left: 15px;
	padding-right: 5px;
}

/** sidemenu **/
#sidemenu{
	position: fixed;
	_position:absolute;
  	top:0;
	margin: 0% auto; /* Will not center vertically and won't work in IE6/7. */
	max-width: 1220px;
	left: 0;
	right: 0;
	filter: alpha(opacity=90);
    -moz-opacity: 0.9;
	opacity: 0.9;
	z-index: 3;
}
.white{
	background-color: white;
}
.transparent{
}

#sidemenu .category{
	display:inline-block;
	margin-bottom: 0px;
	margin-left: 4%;
	text-align: center;
	max-width: 160px;
}

#sidemenu .category a{
	font-family: 'Montserrat', sans-serif;
	font-size: 0.70rem;
	letter-spacing: 0.2rem;
	text-transform: uppercase;
	padding-top: 10px;
	padding-bottom: 2px;
	display:inline-block;
}

#sidemenu .category a:hover{
	color: black;
	font-weight: bold;
}
/** category page **/
	.work_cat{
			margin-left: 8px;
			font-size: 0.9rem;
			border-bottom: 1px solid #636363;
			grid-column: span 3;
	}
	.cat_title{
		display: inline-block;
		padding: 8px;
		max-width: 387px;
		height: auto;
		font-size: 0.75rem;
		z-index: 5;
	}
	.cat_title:hover{
		filter: alpha(opacity=50);
		-moz-opacity: 0.5;
		opacity: 0.5;
	}

/** gallery page **/
	.grid, .text, .index{
  		margin-top:90px;
  		margin-bottom: 25px;
		font-family: 'Montserrat', sans-serif;
		min-width:300px;
		z-index:1;
	}
	.grid, .index, .news{
		text-align: left;
	}
	.grid{
  		grid-column: 2;
		grid-column: span 2;
  		display: grid;
  		grid-gap: 15px ;
  		grid-auto-rows: max-content;
  		grid-template-columns: 1fr 1fr;
	}
	.index{
		grid-column: span 3;
		display: grid;
  		grid-gap: 15px ;
		grid-template-columns: 1fr 1fr 1fr;
	}
	.text{
  		grid-column: 1;
  	}
  	.text, .cv{
  		background-color: #fbfbfb;
  	}
  	.text, .cv, .news{
		text-align: justify;
		font-size: 0.75rem;
		line-height: 1.5;
		padding:20px;
		min-width: min-content;
  	}
	.grid .cv{
		grid-column: span 2;
	}
	.grid div{
		align-self: start;
  	}
  .grid .anecdotal, .grid .news, .index .prelude_txt1{
		min-width: min-content;
		align-self: stretch;
		text-align: justify;
	}
  .grid .anecdotal, .grid .news{
  font-size: 0.80rem;
  }

  .grid .anecdotal{
    max-width: 408px;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 20px;
		padding-right: 20px;
  }
	.grid .anecdotal{
		border: 1px solid #999393;
		border-left: 2px dotted #999393;
		background-color: #FFF5F5;
	}
  .prelude_txt1, .prelude_txt2{
    text-align: justify;
  }
  .index .prelude_date{
    font-size: 3vw;
    font-weight: bold;
    background-color: #f3f3f3;
  }
  .index .prelude_txt1{
  font-size: calc(10px + 3 * ((100vw - 320px) / 680));
  }
  .index .prelude_txt2{
  font-size: calc(8px + 2 * ((100vw - 320px) / 680));
  }
  .index .prelude_txt2 h2{
  font-size: calc(8px + 2 * ((100vw - 320px) / 680));
  text-decoration: underline;
  }
  .prelude_header1{
    font-size: calc(9px + 5 * ((100vw - 320px) / 680));
  }
  .prelude_header2{
    font-size: calc(22px + 10 * ((100vw - 320px) / 680));
    font-weight: bold;
    text-align: center;
  }
  .prelude_date, .prelude_txt1, .prelude_header1, .prelude_header2{
    align-items: center;
    justify-content: center;
    display: flex;
  }
	.double{
		grid-column: span 2 ;
	}
	.triple{
		grid-column: span 3 ;
	}
	.cvyear{
		margin-top: 10px;
		font-family: 'Montserrat', sans-serif;
		font-weight: bold;
	}
	.cvline{
		padding-left: 35px;
	}
	.news{
		align-self:stretch;
		margin-bottom:5px;
		background:rgba(255,255,255,0.4);
	}
	.unit{
		font-size:1rem;
		text-transform:uppercase;
		padding: 5px 0px 5px 0px;
		margin-bottom: 8px;
		text-align: left;
		display: block;
		border-bottom: 1px solid #a8a8a8;
	}
	.item{
		font-family: 'Montserrat', sans-serif;
		display: block;
		margin-bottom: 5px;
	}
	.unitcontent{
		text-align: justify;
		padding: 20px;
  		background-color: #f5f5f5;
  		align-self: stretch;
	}
	.powerid{
		width: 100%;
		font-size:0.70rem;
		font-family: 'Montserrat', sans-serif;
		letter-spacing: 1px;
		line-height: 1.4;
	}
	.powerid .s1{
		width: 40px;
		padding: 5px 15px 5px 15px;
		background-color: #cdd6dd;
	}
	.powerid .s2{
		padding-left: 10px;
		background-color: #eaeaea;
	}
	.trump{
		font-family: tinyHands;
		font-size:85%;
		color: #636363;
		letter-spacing: 0.6px;
	}

	.calendly-inline-widget{
		min-width:1000px;
		height:800px;
	}

/** small screen **/
@media (max-width: 950px) {
	.double{
		grid-column: span 1;
	}
	.grid{
		grid-template-columns: 1fr;
	}
	.calendly-inline-widget{
		min-width: 500px;
		height:1600px;
	}
  .index .prelude_date{
    font-size: 2.4rem;
  }
  .index .prelude_txt h1, .index .prelude_date h1{
    font-size: 1rem;
  }
  .index .prelude_txt{
    font-size: 0.8rem;
  }
}

@media (max-width: 720px) {
		#main{
			grid-template-columns: 1fr;
		}
		.grid, .text, .index{
			margin-bottom: 10px;
	  	}
	  	.text{
	  		margin-top:100px;
	  	}
	  	.grid, .gridbio, .separation{
	  		padding-top:0px;
	  		margin-top:0px;
	  	}
      .newspage
      {
        margin-top: 90px;
      }
	  	#sidemenu .category{
	  	}
	  	.index, .grid{
			grid-template-columns: 1fr 1fr;
		}
		.double{
			grid-column: span 2;
		}
    .prelude_date{
      font-size: 2rem;
    }
    .prelude_txt1, .prelude_date{
      font-size: 0.8rem;
    }
    .index .prelude_txt1{
      font-size: 0.8rem;
    }
    .index .prelude_txt2{
      font-size: 0.7rem;
    }
		.work_cat{
			grid-column: span 2;
			margin:0px;
		}
		.cat_title{
			padding:0px;
		}
}

@media (max-width: 440px) {
	.title{
		display: block;
	}
	.grid{
		grid-template-columns: 1fr;
	}
	.double{
		grid-column: span 1;
	}
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	/* IE10+ CSS styles go here */
	.grid, .text, .index{
		position: relative;
		margin-top: 20px;
	}
	#sidemenu{
		position: relative;
	}
	#sidemenu div{
		display: inline-block;
	}
	.text, .gridbio{
		float: left;
		width: 350px;
	}
	.grid{
		float: left;
		padding-left: 20px;
		width: 750px;
		text-align: left;
	}
	.grid div{
		/**display: inline-block;**/
		vertical-align: text-top;
	}
	.grid .cvyear, .grid .cvline{
		display: block;
	}
	.grid div img, .unitcontent{
		width: auto;
		margin-bottom: 10px;
	}
	.gridbio{
		float: left;
		width: 350px;
		margin-right: 20px;
	}
	.cat_title{
	}
	.category{
		margin-left: 50px;
		width: 110px;
	}
}

@media (max-width: 800px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.grid, .text, .index{
  		padding-top:60px;
  	}
}