/* CSS Reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
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, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
}

/* General Styles */

body{
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	background: #f1f2f2;
	color: #595959;
}

img{
	display: block;
}

a{
	text-decoration: none;
	color: #595959;
}

p{
	margin-bottom: 20px;
}

p a:hover{
	filter:brightness(50%);
}

.innercontent{
	position: relative;
	height: 100%;
}

.logo{
	height: 47px;
}

.links{
	display: flex;
}

.links a{
	display: block;
	height: 20px;
	width: 20px;
	margin-right: 10px;
	opacity: 0.5;
}

.links a:hover{
	opacity: 0.65;
}

.links a.instagram{
	background: url(assets/iconInstagram.svg),no-repeat;
  background-size: 100% 100%;
}

.links a.linkedin{
	background: url(assets/iconLinkedIn.svg),no-repeat;
  background-size: 100% 100%;
}

.links a.pinterest{
	background: url(assets/iconPinterest.svg),no-repeat;
  background-size: 100% 100%;
}

.grid img{
	width: 100%;
}

/* Mobile */

@media screen and (max-width: 660px) {

	body{
		position: relative;
		background: #ffffff;
	}

	.logo{
		height: 22px;
	}

	.desktop{
		display: none;
	}

	.overlay{
		display: none;
	}

	.sidebar{
		position: fixed;
		top: 0px;
		height: 100%;
		padding: 20px;
		background: #ffffff;
		z-index: 1;
	}

	.content{
		position: absolute;
		top: 0px;
		left: 0px;
		width:calc(100% - 40px);
		padding:20px 20px 0px 20px;
		background: #f1f2f2;
		z-index: 2;
		transition: left 300ms linear;
	}

	.content.menuOpen{
		left: calc(100% - 100px);
	}

	.meta{
		margin-top: 20px;
	}

	.mobileHeader{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0px 0px 20px 0px;
	}

	.mobileLogo{
		height:22px;
	}

	.navButton{
	  position:relative;
	  width:28px;
	  height:22px;
	}

	.navButton span{
	  display:block;
	  position:absolute;
	  height:2px;
	  width:100%;
	  background:#777777;
	  opacity:1;
	  left:0;
	  transform:rotate(0deg);
	  transition:.25s ease-in-out;
	}

	.navButton span:nth-child(1){
	  top:0px;
	}

	.navButton span:nth-child(2), .navButton span:nth-child(3){
	  top:10px;
	}

	.navButton span:nth-child(4){
	  top:20px;
	}

	.navButton.open span:nth-child(1), .navButton.open span:nth-child(4){
	  top:10px;
	  width:0%;
	  left:50%;
	}

	.navButton.open span:nth-child(2){
	  transform:rotate(45deg);
	}

	.navButton.open span:nth-child(3){
	  transform:rotate(-45deg);
	}

	/* Grids */

	.grid img{
		margin-bottom: 12px;
	}

}


/* Desktop */

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

	.mobile{
		display: none;
	}

	.overlay{
		display: none;
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		z-index: 3;
		background: rgba(79,79,79,0.5);
	}

	.content{
		margin-left: 320px;
		padding: 40px 0px;
	}

	.sidebar{
		position: fixed;
		height: 100%;
		padding: 40px;
		width: 240px;
		background: #f1f2f2;
	}

	.meta{
		position: absolute;
		bottom: 80px;
	}

	.mobileHeader{
		display: none;
	}

	/* Grids */

	.grid{
		display: grid;
		grid-column-gap: 16px;
		margin-bottom: 16px;
	}

	.full{
		grid-template-columns: 1fr;
	}

	.halved{
		grid-template-columns: 1fr 1fr;
	}

	.threeSeven{
		grid-template-columns: 0.3fr 0.7fr;
	}

	.sevenThree{
		grid-template-columns: 0.7fr 0.3fr;
	}

	.fourSix{
		grid-template-columns: 0.4fr 0.6fr;
	}

	.sixFour{
		grid-template-columns: 0.6fr 0.4fr;
	}

	/* Image Hovers */

	.grid img{
		cursor: pointer;
	}

	.grid img:hover{
		opacity: 0.8;
	}

	/* Modal dialog */

	.modal{
		position: absolute;
		top: 60px;
		left: 50%;
		display: none;
		margin: auto;
		padding: 12px;
		background: #fff;
		z-index: 4;
	}

}


/* Tablet */

@media screen and (min-width: 661px) and (max-width: 1160px) {

	.content{
		width:calc(100% - 340px);
	}

	.modal{
		width: 70%;
		left: calc(50% - (35% + 12px));
	}

	.modal img{
		width: 100%;
	}

}


/* Large */

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

	.content{
		width:800px;
	}

	.modal{
		width: 50%;
		left: calc(50% - (25% + 12px));
	}

	.modal img{
		width: 100%;
	}

	.modal.modal9, .modal.modal12{
		width: 30%;
		left: calc(50% - (15% + 12px));
	}

}


/* iPad Pro Lanscape */

@media screen and (min-width: 1200px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2){

	.content{
		width:calc(100% - 340px);
	}

	.modal{
		width: 70%;
		left: calc(50% - (35% + 12px));
	}

	.modal img{
		width: 100%;
	}

	.modal.modal9, .modal.modal12{
		width: 40%;
		left: calc(50% - (20% + 12px));
	}

}