html{
	box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
	margin: 40px auto;
	max-width: 980px;
	color: #CCC;
	font-family: 'Lato', serif;
	background-color: #000;

	/*fix skinny fonts on ios*/
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: subpixel-antialiased;
	text-rendering: optimizeLegibility;
}

#content {
	position: absolute;
	max-width: 980px;
	padding: 40px 20px ;
}

#content p{
	font-size: 28px;
	font-weight: 300;
	letter-spacing: 1px;
	line-height: 150%;
	color: #DDD;
	margin: 30px 0;
	xborder: solid red 1px;
}

h1{
	margin-left: -10px;
}

h2{
	font-family: 'Oswald', sans-serif;
	font-size: 24px;
	letter-spacing: 4px;
	color: #FFF;
	line-height: 42px;
	margin: 40px 0 20px 0;
	xborder: solid red 1px;

}

/*.section-break{
	width: 100%;
	height: 25px;
	border-bottom: thin dotted #555;
	margin-bottom: 25px;
	xborder: solid red 1px;
}*/


.section{
	width: 100%;
	xheight: 25px;
	xborder-top: thin dotted #555;
	xmargin-bottom: 25px;
	xborder: solid red 1px;
	margin-top:40px;
}

a {
	text-decoration: none;
}

p a {
	color: #FFF;
	border-bottom:thin solid #FFF;
}

/*thumb menu*/

#thumbs{
	padding-top:20px;
	overflow: auto;
}

.thumb{
	float:left;
	width: calc(50% - 10px);
	padding-bottom: 20px;
}

.thumb-title{
	line-height: 50px;
	height: 50px;
	letter-spacing: 3px;
	text-transform: uppercase;
	text-align: center;
	font-family: 'Oswald', sans-serif;
	font-size: 17px;
}

.thumb a{
	color: #AAA;
	transition: all 0.4s;
}

.thumb a:hover{
	color: #FFF;
	opacity:1;
}

.thumb a:after:hover{
	opacity:1;
}

.thumb:nth-child(odd){
	margin-right: 20px;
}

.frame{
	overflow: hidden;
}

.thumb img{
	display: block; 
	width: 100%;
	height: 100%;

	-webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
	transition:         all 600ms cubic-bezier(0.19, 1, 0.22, 1);

	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

.thumb img:hover{
	-webkit-filter: grayscale(1%);
	filter: grayscale(1%);

	-ms-transform: scale(1.03); /* IE 9 */
	-webkit-transform: scale(1.03); /* Safari */
	transform: scale(1.03);
}

/*social icons*/

.hello{
	clear: both;
	width: 190px;
	height: 200px;
	margin: 0 auto ;
	padding: 50px 0;
}

.social-icon{
	height: 70px;
	width: 70px;
	display:inline-block;
	opacity:0.6;
	-webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
	transition:         all 600ms cubic-bezier(0.19, 1, 0.22, 1);
}

.social-icon:hover{
	opacity:1;
	-ms-transform: scale(1.1); /* IE 9 */
	-webkit-transform: scale(1.1); /* Safari */
	transform: scale(1.1);
}

#mail{
	background-image: url(../img/mail-with-circle.svg);
	margin-right:40px;
}

#twitter{
	background-image: url(../img/twitter-with-circle.svg);
}

/*mobile layout*/

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

	h1 img{
		width: 100%;
	}

	.thumb {
		width: 100%;
	}

	.thumb:nth-child(odd){
		margin-right: 0;
	}

	#content p{
		font-size: 18px;
	}

	h2{
		font-size: 20px;
	}
}

/*modernizer touch overrides*/

.touchevents .social-icon  {
	opacity:1;
}

.touchevents .thumb img  {
	-webkit-filter: grayscale(1%);
	filter: grayscale(1%);
}

/*video player*/

#vid-popup{
	position: fixed;
	top:0;
	left:0;
	height:100%;
	width:100%;
	z-index: 99;
	background-color: #000;
	display: none;
}

#close-btn{
	position:absolute;
	top: 20px;
	right: 20px;
	height: 40px;
	width: 40px;
	background-image: url(../img/circle-with-cross.svg);
	cursor: pointer;
}