/* GLOBAL 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, section, 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: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup,
menu, nav, section {
    display: block;
}

/* Fonts */
/* oswald-regular - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/oswald-v16-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Oswald Regular'), local('Oswald-Regular'),
       url('/fonts/oswald-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/oswald-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/oswald-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/oswald-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/oswald-v16-latin-regular.svg#Oswald') format('svg'); /* Legacy iOS */
}
/* oswald-700 - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/oswald-v16-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Oswald Bold'), local('Oswald-Bold'),
       url('/fonts/oswald-v16-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/oswald-v16-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/oswald-v16-latin-700.woff') format('woff'), /* Modern Browsers */
       url('/fonts/oswald-v16-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/oswald-v16-latin-700.svg#Oswald') format('svg'); /* Legacy iOS */
}

html {
    -webkit-text-size-adjust: none;
	height: 100%;
	min-height: 100%;
}

.clear {
    clear: both;
}

body {
    background-color: #F3DEB1;
    font-size: 22px;
    color: #9a3644;
	background: url(bg.jpg); 
	background-size: cover;
	background-repeat: no-repeat;
	background-position: left center;
	background-attachment: fixed;
  	font-family: 'Oswald', sans-serif;
  	text-shadow: 0.05em 0.05em 0.05em #fcfcfc;
}

#layer {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	border-bottom: 10px solid #9a3644;
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAABJJREFUCB1jSEhIeMZAFMCpEgCyyAQNj9/mfgAAAABJRU5ErkJggg==) repeat;
	z-index: -1;
}

#content {
	width: 50%;
    margin: 100px 5% 0 45%;
}

#content #titlebox h1 {
    font-size: 60px;
    line-height: 80px;
    font-weight: bold;
}

#content #titlebox p {
    font-size: 30px;
    line-height: 36px;
    font-weight: bold;
    margin: 10px 0;
    color: #1b1b1b;
}
#content #titlebox p a, #content #titlebox p a:visited, #content #titlebox p a:active {
    color: #7c7c7c;
}

#content #titlebox p a:hover {
	color: #9a3644;
}

#projectlist {
	margin: 20px 0;
	width: 100%;
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;
}

#projectlist img {
	border-radius: 25%;
	border:5px solid #1b1b1b;
	margin-right: 25px;
	transition: all 0.5s ease;
	filter: grayscale(0.7);
	-webkit-filter: grayscale(0.7);
	-moz-filter: grayscale(0.7);
	-o-filter: grayscale(0.7);
	-ms-filter: grayscale(0.7);
}
#projectlist img:hover {
	border:5px solid #9a3644;
	filter: grayscale(0.2);
	-webkit-filter: grayscale(0.2);
	-moz-filter: grayscale(0.2);
	-o-filter: grayscale(0.2);
	-ms-filter: grayscale(0.2);
}

/* MAKE IT RESPONSIVE */
@media screen and (max-width: 800px) {
    #content {
    	width: 90%;
        margin: 50px 5% 0 5%;
    }
}