/* all */
/* padding and border are included in the total width and height of the elements */
* {
    box-sizing: border-box;
}

/* layout of every page */
body {
 background-color: #ffffff;
 font-family: Raleway, monospace;
 font-size: 100%;
 text-decoration: none;
 padding: 30px;
}

/* links */
a:link {
    color: grey;
	background: transparent;
	text-decoration: underline;
}
.navigation a:link {
	text-decoration: none; 
}
a:visited {
    color: grey;
	background: transparent;
	text-decoration: none;
}
a:hover {
    color: orange;
	background: transparent;
	text-decoration: none;
}
a:active {
    color: red;
	background: transparent;
	text-decoration: none;
}

/* link to the top of the page */
.top {
	display: none;
}

/* centering icon*/
.icon-position {
	text-align: center;
}

/* sections */
.section {
	font-weight: 300;
	text-align: center;
	color: grey;
	margin-top: 10px;
	margin-bottom: 10px;
	position: static;
}

/* my name */
h1 {
	font-size: 2em;
	font-weight: 100;
	text-align: center;
	color: #404040;
	padding-top: 50px;
	padding-bottom: 50px;
	position: static;
}

/* navigation list */
ul.navigation {
	list-style-type: none;
    margin: 0;
    padding: 0;
    height: 75px;
	position: static;
    top: 50px;
	width: 100%;
	text-align: center;
	background-color: transparent;
	overflow: hidden;
}
li.navigation {
	display: inline-block;
	text-align: center;
    padding: 20px;
}
	
/* logos */
ul.logo-list {
	list-style-type: none;
    margin: 0px;
    padding: 0px;
    position: static;
	width: 100%;
	text-align: center;
	background-color: transparent;
	overflow: hidden;
}
li.logo-list {
	display: inline-block;
	text-align: center;
    padding: 0px 0px 80px 0px;
}
li.logo-list-small {
	display: inline-block;
	text-align: center;
    padding: 0px 0px 30px 0px;
}
.logo {
	position: relative;
	float: left;
}
.large {
	width: 100px;
	height: 100px;
}
.small {
	width: 50px;
	height: 50px;
}
.logo-navigation {
	position: relative;
	width: 50px;
	height: 50px;
	float: left;
}
.logo-img {
	display: block;
	width: 100%;
	opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
	transition: opacity 1s;
}
.logo img:hover {
	opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
.logo-description {
	visibility: hidden;
	position: absolute;
	background-color: transparent;
	width: 100px;
	padding: 3px;
	text-align: center;
	font-size: 0.75em;
}
.logo:hover .logo-description {
	visibility: visible;
}
.active {
    background-color: #E0E0E0;
}

/* footer */
footer {
	position: static;
	width: 100%;
	text-align: center;
	font-size: 0.75em;
	font-weight: 300;
	color: grey;
	background-color: transparent;
}

/* project page */
.title {
	max-width: 1000px;
	letter-spacing: 3px;
	font-size: 1.2em;
	text-align: center;
	margin: auto;
	padding: 20px;
}
.collaboration {
	max-width: 1000px;
	font-size: 0.9em;
	margin: auto;
}
.description {
	list-style-type: none;
	padding: 10px 0px;
	max-width: 1000px;
	font-size: 0.75em;
	line-height:180%;
	margin: auto;
}
.project {
	max-width: 1000px;
	font-size: 0.9em;
	text-align: justify;
	margin: auto;
}
.image img {
	width: 100%;
    max-width: 1000px;
	image-orientation: from-image;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.image-small img {
	width: 100%;
    max-width: 500px;
	image-orientation: from-image;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.image-double img {
	width: 100%;
    max-width: 225px;
	image-orientation: from-image;
	display: inline-block;
}
.scrollx {
	overflow-x: auto;
}

/* about */
.about {
	max-width: 500px;
	margin: auto;
}
.about-section {
	border: 1px dotted grey;
	margin: 10px;
	padding: 30px 30px 30px 30px;
	font-weight: 300;
}
.about-section p {
	font-size: 0.9em;
	text-align: justify;
}
.about-image img {
	width: 100%;
    max-width: 300px;
	image-orientation: from-image;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.about-image-comment {
	font-size: 0.75em;
	color: grey;
	text-align: center;
	padding: 5px 0px 0px 0px;
}

/* resume */
.resume {
	max-width: 1000px;
	margin: auto;
}
.resume-section {
	border: 1px dotted grey;
	margin: 10px;
	padding: 30px 30px 30px 30px;
	font-weight: 300;
}
.resume-list {
	list-style-type: circle;
    margin: 0;
    padding: 0;
	font-size: 0.9em;
}
.resume-section h3{
	text-transform: uppercase;
}
.resume-section p {
	font-size: 0.9em;
	text-align: justify;
}