@import url(https://fonts.googleapis.com/css?family=Raleway:700|Hind+Guntur:400,700&subset=latin-ext);

	* {box-sizing: border-box; transition: all .15s ease-in-out;}
	::selection {background: #A7FFEB; color: black; text-shadow: none;}

	.group:before,
	.group:after {content: " "; display: table;}
	.group:after {clear: both;}
	html,body { width: 100%; height: 100%; margin:0;padding:0;}
	body {font-family: Hind Guntur; background: white; font-size: 1.2em; -webkit-font-smoothing: antialiased;}
	header {background: #00BFA5; float: left; width: 40%; height: 100%; padding: 50px; position: fixed; top:0;left:0; display: flex; justify-content: center; align-items: center;  transition: box-shadow .25s ease-in-out;}
	header:hover {box-shadow: 2px 0 10px rgba(0,0,0,0.2);}
	header h1 {font-weight: 700; font-size: 8.0em; font-family: Raleway; line-height: 80%; cursor: default;} /*text-shadow: -10px 5px 15px #EEEEEE;*/
	header h3 {margin-top: 20px; text-align: center; font-weight: 400; color: #EEEEEE; font-size: 0.8em;}
	h1 span {color: white; display: block;}
	h2,h3 {color: #222;}
	main {width: 60%; float: right; word-spacing: 1.2px; color: #757575;}
	main h1 {color: #222; font-size: 3em; line-height: 100%; margin:0; margin-bottom: 25px;}
	main a {color: #26A69A; text-decoration: none;}
	main a:hover {text-decoration: underline;}
	.clients {text-align:center;}
	.clients h3 {font-size: 2em; margin-bottom: 50px; color: #222;}
	.clients figure { display: inline-block; margin: 40px;}
	.clients figure img {width: 100%; max-width:130px; opacity: 0.5;}
	.clients figure img:hover {opacity: 1;}
	.clients figcaption {color: #ccc; font-size: 0.8em; margin-top: 10px;}
	.projects figure {position: relative; margin: 0; float: left; width:33.333333333%; display: inline-block; opacity: 0.9; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out;}
	.projects figure:hover { opacity: 1; }
	.projects figcaption:hover {background: rgba(0,0,0,0.8); text-align: center; cursor: pointer}
	.projects figure img {width: 100%; vertical-align: middle;}
	.projects figcaption {position: absolute; background: rgba(0,0,0,0.5); padding: 2px 8px 2px 8px; border-radius: 3px; color: white; bottom: 20px; right: 20px;}
	.projects {margin: 50px 0 50px 0;}
	section {margin-bottom: 15px; padding: 50px;}
	section.contact {text-align: center; margin-top: 65px;}
	section.contact p.big {font-size: 120%;}
	section.contact span {margin-right: 15px; } section.contact span:last-child {margin-right: 0;}
	section.contact a { margin-left: 10px;}
	footer {clear: both; background: #eeeeee; padding: 50px; text-align: left; color: #757575; margin-top: 75px;}

	/*DOCASNE*/
	figure, figure img {max-height: 180px;}

	.noselect {
		-webkit-touch-callout: none; /* iOS Safari */
		  -webkit-user-select: none; /* Safari */
		   -khtml-user-select: none; /* Konqueror HTML */
			 -moz-user-select: none; /* Old versions of Firefox */
			  -ms-user-select: none; /* Internet Explorer/Edge */
				  user-select: none; /* Non-prefixed version, currently
										supported by Chrome, Edge, Opera and Firefox */
	  }

	@media screen and (max-width: 1600px) {
		header h1 {font-size: 5.5em;}
		header h3 {font-size: 0.8em;}
	}
	@media screen and (max-width: 1045px) {
		header h1 {font-size: 4.0em; line-height: 85%;}
		section {padding: 50px;}
	}
	@media screen and (max-width: 800px) {
		header {position: relative; float: none; width: 100%; height: 250px; margin-bottom: 25px;}
		main {width: 100%; float: none; }
		main h1 {font-size: 2.2em;}
		header h3 {display: none;}
		section.contact span {margin-right: 0;}
		section.contact span {display: block;}
		.projects {margin: 0; padding: 0; width: 100%;}
	}
	@media screen and (max-width: 500px) {
		body {font-size: 1em;}
		header h1 {font-size: 3.5em;}
		section {padding: 30px;} footer {font-size: 95%;}
		.projects figure {width: 100%;} .projects figure img { height: auto;}
	}