@font-face {
	font-family: 'Roboto';
	src: url('../fonts/Roboto-Thin.woff2') format('woff2'),
	url('../fonts/Roboto-Thin.woff') format('woff');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Oxygen';
	src: url('../fonts/Oxygen-Bold.woff2') format('woff2'),
	url('../fonts/Oxygen-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}


/* 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, font, img, ins, kbd, q, s, samp,small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
}
ul { list-style-type: none; }
em { font-style: italic; }
sup { font-size: x-small; }

/* utility */
.clearfix { clear: both; width:100%; height: 1px; }

.cl { clear: left; }
.fl { float: left; }
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.hidden { display: none; }

/* main styles */
html { overflow: -moz-scrollbars-vertical; overflow-y: scroll; }
body { font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 12px; color: #516168; line-height: 19px; background: #fff; }
a { color: #3A72A2; text-decoration: none; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; }
a.active { color: #D5AD56; font-style: italic; }
a:hover { color: #899c9d; }
h1 a { display: block; width: 215px; height: 95px; text-align: center; position: relative; }
h1 a span { display: block; }
h1 a .tagline { font-family: 'Roboto', sans-serif; font-weight: 100; color: #8b9ca3; font-size: 40px; line-height: 45px; position: relative; left: -3px; }
h1 a .name { font-family: 'Oxygen', sans-serif; font-weight: 700; background: #8b9ca3; color: #fff; font-size: 33px; line-height: 40px; padding: 5px 0 7px; }
h2 { font-size: 19px; margin: 15px 0; font-family: 'Oxygen', sans-serif; font-weight: 700; position: relative; top:4px; }
h3 { font-size: 15px; margin: 17px 0 15px;font-family: 'Oxygen', sans-serif; font-weight: 700; position: relative; top:4px; }
p { margin: 10px 0; }
#wrapper { width: 820px; margin: 20px auto; }

#floater { position: fixed; }

#welcome { width: 215px; float: left; margin-right: 35px; text-align: justify; position: relative; overflow: hidden; }
#welcome ul {  border-top: 1px dotted #B8CAD1;  border-bottom: 1px dotted #B8CAD1; padding: 7px 0 7px 15px; list-style-type: square;}
#welcome ul li { margin: 8px 0; }

#nav { width: 200px; float: left; margin-top: 60px; margin-right: 20px; }
#nav ul li { margin: 5px 0 5px; }

#details { width: 350px; float: left; margin-left: 470px; text-align: justify; margin-top: 60px; min-height: 500px; position: relative; -webkit-transition: all .3s ease-out 0s;	-moz-transition: all .3s ease-out 0s;	-o-transition: all .3s ease-out 0s;	transition: all .3s ease-out 0s; }
#details img { display: block; margin: 10px 0; max-width: 98%; background-color: #E8EBED; border: 1px dotted #B8CAD1; padding: 5px; }
#details a img {  border: 1px dotted #D5AD56; margin-bottom: 25px; max-width: 100%; height: auto;  }
#details a img:hover { border: 1px dotted #B8CAD1; }
#details li { font-weight: bold; font-size: 12px; }
#details .tags { font-size: 11px; color: #D5AD56; font-style: italic; }
#details ul { border-top: 1px dotted #B8CAD1; padding-top: 20px; }
#details h1 { font-size: 23px; margin: 15px 0 15px;font-family: 'Oxygen'; font-weight: 700; position: relative; top:4px; }

#footer { text-align: center; padding: 10px 0; margin: 10px 0; clear: left; border-top: 1px dotted #B8CAD1; position: relative;-webkit-transition: all .3s ease-out 0s;	-moz-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s; }

.fade_out { opacity: 0; }
.fade_in { opacity: 1; }

input, textarea {
	font-family: Verdana,Arial,Helvetica,sans-serif; 
	font-size: 12px; 
	color: #516168; 
	line-height: 19px; 
	background: #fff; 
	padding: 5px;
	border: 1px dotted #B8CAD1;
	width: 100%;
	margin: 2px 0;
	box-sizing: border-box;
}

button {
	font-family: 'Oxygen', sans-serif;
	font-weight: 700;
	background: #8b9ca3;
	color: #fff;
	padding: 5px 15px;
	display: inline-block;
	border: none;
	margin: 5px 0;
	cursor: pointer;
	transition: background .3s ease-out;
}

button:hover,
button:focus {
	background: #D5AD56;
}

#contact-form {
	position: absolute;
	width: 90%;
	bottom: 0;
	background: white;
	padding: 10px;
	transition: transform .3s ease;
	transform: translateX(-101%);
	
	h2 {
		padding: 25px 0;
	}
}

#contact-form.active {
	transform: translateX(0);
}

/* clouds */
#viewport {
	-webkit-perspective:1000;
	-moz-perspective:1000;
	-o-perspective:1000;
	position:fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;
	overflow:hidden;
}
#world {
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-256px;
	margin-top:-256px;
	height:512px;
	width:512px;
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	-o-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-webkit-transition: all 1.5s ease-out 0s;
	-moz-transition: all 1.5s ease-out 0s;
	-o-transition: all 1.5s ease-out 0s;
	transition: all 1.5s ease-out 0s;
}
#world div {
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	-o-transform-style:preserve-3d;
	transform-style:preserve-3d;
}
.cloudBase {
	position:absolute;
	left:256px;
	top:256px;
	width:20px;
	height:20px;
	margin-left:-10px;
	margin-top:-10px;
}
.cloudLayer {
	position:absolute;
	left:50%;
	top:50%;
	width:256px;
	height:256px;
	margin-left:-128px;
	margin-top:-128px;
	-webkit-transition:opacity .5s ease-out;
	-moz-transition:opacity .5s ease-out;
	-o-transition:opacity .5s ease-out;
	transition:opacity .5s ease-out;
}

/* select box */
select {
    padding:3px;
    margin: 10px 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow: 0 3px 0 #8b9ca3, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #8b9ca3, 0 -1px #fff inset;
    box-shadow: 0 3px 0 #8b9ca3, 0 -1px #fff inset;
    background: #f8f8f8;
    color:#516168;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    select { padding-right:18px }
}

label { position:relative }
label:after {
    content:'<>';
    font:11px "Consolas", monospace;
    color:#aaa;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    right:8px; top:2px;
    padding:0 0 2px;
    border-bottom:1px solid #8b9ca3;
    position:absolute;
    pointer-events:none;
}
label:before {
    content:'';
    right:6px; top:0px;
    width:20px; height:20px;
    background:#f8f8f8;
    position:absolute;
    pointer-events:none;
    display:block;
}

#nav #toggle-projects { display: none; }


@media screen and (min-width: 820px) and (max-height: 650px) {
	#welcome {
		box-sizing: border-box;
		height: 90vh;
		overflow-y: scroll;
		width: 235px !important;
		padding-right: 10px;
	}
}


/* tablet and mobile */
@media screen and (max-width: 820px) {
	#wrapper { width: 90%; margin: 0px 5%; }
	
	#floater { position: relative; }
	
	#welcome { width: 45%; float: left; margin-right: 10%; min-width: 215px !important; }
	#welcome h1 { margin-top: 30px; }
	
	#nav { width: 40%; float: left; margin-top: 100px; margin-right: 0px; min-width: 200px !important; }
	
	#nav .wrap { height: 245px; overflow: hidden; position: relative; }
	#nav .wrap ul { height: 200px; overflow: hidden; }
	
	#nav .wrap.expanded { height: auto; overflow: hidden; position: relative; }
	#nav .wrap.expanded ul { height: auto; overflow: hidden; }
	
	#nav #toggle-projects { display: block; font-size: 12px; padding: 5px 0 5px; display: block; position: absolute; bottom: 0; font-style: italic; }
	#nav .wrap.expanded #toggle-projects  { display: none; }
	
	#details { width: 100%; clear: left; margin-top: 20px; margin-left: 0px; margin-top: 10px; border-top: 1px dotted #B8CAD1; }
	#details img { width: 100%; height: auto !important; }
	#details h1 { margin-top: 35px; }
}


/* mobile  */
@media screen and (max-width: 527px) {
	
	body {  }
	
	#welcome { width: 100%; }
	
	#welcome p { margin: 20px 0; }
	
	
	#nav { margin-top: 10px; margin-bottom: 20px; }
}


/* large screens */
@media screen and (min-width: 1150px) {
	#wrapper { width: 1020px; }
	#details { width: 550px; } 
	#details img { max-width: 540px; }
}

@media screen and (min-width: 1300px) {
	#wrapper { width: 1200px; }
	
	#nav { margin-right: 40px; width: 205px; }
	#welcome { margin-right: 50px; width: 215px; }
	
	#details { width: 700px; margin-left: 495px; } 
	#details img { max-width: 700px; }
	#details p { max-width: 80%; }
}