html, body {margin: 0; padding: 0; height: 100%; text-align: center;}
section {min-height: 100%;}
a {text-decoration: none;}
li {list-style-type: none;}

h1, h2, h3, a {font-family: 'Roboto', sans-serif; font-weight: 500; color: #27348b; text-transform: uppercase;}
h2, a {color: #b3b2b2;}
h3 {font-size: 40px; padding-top: 12%; margin-bottom: 5px; margin: 0;}
h4, p {font-family: 'Roboto Slab', serif; color: #494949;}

hr {width: 30px; height: 3px; background: #494949; border: 0; margin: 0 auto 40px auto;}
#logo, li, img, .button, .fa-bars {transition: all 300ms; -webkit-transition: all 300ms; -moz-transition: all 300ms; -o-transition: all 300ms;}
.fa-bars {display: none;}

/* HEADER **********************************************/

header {width: 100%; height: 10%; position: fixed; top: 0; left: 0; background: #27348b; box-shadow: 0 1px 3px rgba(0, 0, 0, 1); z-index: 1;}

#logo {width: 7%; float: left; margin: 14px 0 auto 50px;}
#logo:hover {opacity: 0.5;}
#logo img {width: 100%; background: #FFFFFF; padding: 5%; border-radius: 10px;}

header nav {float: right; margin: 0.8% 50px auto 0;}
header nav ul li {float: left; margin-left: 25px;}
header nav ul li {font-size: 20px;}
header nav ul li:hover {padding-top: 5px;}

/* HOME **********************************************/
	
#home {background: url(../img/background.jpg); background-position: center center; background-size: cover; background-attachment: fixed;}
#home h1 {margin: 20% auto 0 auto; font-size: 500%;}
#home h2 {margin: 0 auto 0 auto; font-size: 200%;}
#home img {width: 32px; margin-top: 150px; opacity: 0.7;}
#home img:hover {opacity: 1;}

/* ABOUT **********************************************/

#about img {width: 240px;}
#about img:hover {transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1);}
#about h4 {font-size: 25px;}
#about p {width: 700px; margin: 0 auto 0 auto;}
#about_list {font-family: 'Roboto Slab', serif; color: #494949;}
#about_list {text-align: left; margin-left: 26%;}
#about_list li {list-style-type: circle;}

/* FLATS **********************************************/

#flats {background-color: #f0f0f0;}
#projects {width: 900px; margin: 0 auto 0 auto;}
#projects ul {padding: 0;}
#projects ul li {width: 33.3%; float: left; margin-bottom: 15px;}
#projects img {width: 280px; height: 170px; border-radius: 5px;}
#projects img:hover {transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);}

/* CONTACT **********************************************/

form input:first-child {margin-top: 10px;}
form input, textarea {font-family: 'Roboto Slab', serif; font-size: 15px; margin-bottom: 0.1%; border-radius: 2px; border: 2px solid; bottom-color: #27348b;}
form input {width: 550px; height: 30px;} 
form textarea {width: 550px; height: 200px; resize: none}

.input_text {color: #494949 ; padding-left: 10px;}
.input_check {color: #494949 ; padding-left: 10px; display: none;}

::-webkit-input-placeholder {color: #999999;}
::-moz-input-placeholder {color: #999999;}
:-ms-input-placeholder {color: #999999;}
:-moz-input-placeholder {color: #999999;}

.button {background-color: #f0f0f0; color: #27348b; width: 550px; height: 50px;}
.button:hover {background-color: #27348b; color: #f0f0f0;}

#con {color: #494949; width: 100%;padding-top: 0.5%; margin: 0 auto 0 auto;}
#con ul {padding: 6%;}
#con ul li {width: 33.3%; float: left; margin-bottom: 1%;}
#con a {color: #27348b; text-transform: none}

/* FOOTER **********************************************/

footer {width: 100%; height: 60px; background-color: #b3b2b2;}
footer p {font-size: 12px; color: #27348b; padding-top: 1.5%; margin: 0 40% 0 40%}

footer nav {float: right; margin: 0 50px 0 0; padding-top: 0.5%;}
footer nav ul li {float: left; margin-left: 25px;}
footer nav ul li {font-size: 15px; color: #27348b;}
footer nav ul li:hover {padding-top: 5px;}


/* MEDIA QUERIES **********************************************/

/* TABLETS */

@media screen and (max-width: 1024px) {
	header {height: auto;}
	#logo {width: 100px; margin-top: 5px;}
	header nav {margin-top: 0;}
	header nav ul li {font-size: 12px;}
	#home h1 {font-size: 90px; margin-top: 200px;}
	#home h2 {font-size: 22px;}
	h3 {padding-top: 12%;}
	#about p {width: 80%;}
	#projects {width: auto;}
	#projects ul li {width: 100%; float: none;}
	#projects ul li:last-child {padding-bottom: 20%;}
	#projects img {width: 50%; height: auto;}
	form input, form textarea {width: 60%;}
	.button {width: 60%;}
	#con {width: auto;}
	#con ul li {width: 100%; float: none;}
	#con ul li:last-child {padding-bottom: 20%;}
	#con img {width: 50%; height: auto;}
	footer {height: auto;}
	#logo {width: 100px; margin-top: 5px;}
	footer nav {margin-top: 0;}
	footer nav ul li {font-size: 12px;}
	
	#flat1, #flat2, #flat3, #flat4, #flat5, #flat6 {width: auto;}	
	#flat1 ul li, #flat2 ul li, #flat3 ul li, #flat4 ul li, #flat5 ul li, #flat6 ul li {width: 100%; float: none;}
	#flat1:last-child ul, #flat2:last-child ul, #flat3:last-child ul, #flat4:last-child ul, #flat5:last-child ul, #flat6:last-child ul {padding-bottom: 20%;}
}
	
/* MOBILES */

@media screen and (max-width: 480px) {
	#logo {width: 30%; margin-left: 10%;}
	header nav {margin: 0; float: none;}
	.fa-bars {font-size: 30px; display: inline-block; height: 100%; width: 100%; cursor: pointer; text-align: right; float: right; margin: -13% 10% 0 0;}
	.fa-bars:hover {opacity: 0.5;}
	header nav ul {height: 0; overflow: hidden; margin: 0, padding: 0; width: 100%;}
	header nav ul.open {height: auto;}
	header nav ul li {width: 100%; padding: 5px 0; margin: 0; font-size: 15px; border-top: 1px solid #dddddd;}
	header nav ul li:hover {background-color: #eeeeee;}
	#home h1 {width: 100%; font-size: 100%; margin-top: 200px;}
	#home h2 {width: 70%; height: auto;}
	#projects img {width: 70%; height: auto;}
	#con {width: auto; height: auto;}
	form input, form textarea {width: 70%;}
	.button {width: 70%;}
	footer nav {margin: 0 auto; float: none;}
	footer p {margin-top: 12%; margin-right: 1%; margin-left: 1%; padding-bottom: 4%; text-align: center;}

	#flat1, #flat2, #flat3, #flat4, #flat5, #flat6 {width: auto; height: auto;}	
}


/* PRIVATE POLICY **********************************************/

#privatp {background: white; background-position: center center;}
#privatp h1 {margin: 100px auto 0 auto; font-size: 50px; text-decoration: underline;}
#privatp h4 {margin: 50px auto 0 auto; font-size: 25px;}
#privatp p {width: 80%; margin: 0 auto 0 auto; font-size: 16px;}
#privatp img {width: 32px; margin-top: 150px; opacity: 0.7;}
#privatp img:hover {opacity: 1;}

/* IMPRESSUM **********************************************/

#imp {background-color: #f0f0f0; background-position: center center;}
#imp h3 {margin: 0 auto 0 auto; font-size: 50px; text-decoration: underline;}
#imp h4 {margin: 20px auto 0 auto; font-size: 25px;}
#imp p {width: 80%; margin: 0 auto 0 auto; font-size: 16px;}
#imp img {width: 32px; margin-top: 150px; opacity: 0.7;}
#imp img:hover {opacity: 1;}
#imp a {color: #27348b; text-transform: none}

/* FLATS **********************************************/

#flat1, #flat3, #flat5 {background-color: white; background-position: center center;}
#flat1 h3, #flat3 h3, #flat5 h3 {margin: 80px auto 0 auto; font-size: 30px; padding-top: 1%;}
#flat1 h4, #flat3 h4, #flat5 h4 {text-align: left; margin: 0 1%;}
#flat1 ul li, #flat3 ul li, #flat5 ul li {width: 33.33%; float: left; padding: 0 1px;}
#flat1 td, #flat3 td, #flat5 td {border-bottom: 1px solid #ddd; padding: 0 10px;}
#flat1 th, #flat3 th, #flat5 th {font-size: 100%; color: #27348b; text-decoration: underline;}

#flat2, #flat4, #flat6 {background-color: #f0f0f0; background-position: center center;}
#flat2 h3, #flat4 h3, #flat6 h3 {margin: 100px auto 0 auto; font-size: 30px; padding-top: 6%;}
#flat2 h4, #flat4 h4, #flat6 h4 {text-align: left; margin: 0 1%;}
#flat2 ul li, #flat4 ul li, #flat6 ul li {width: 33.33%; float: left; padding: 0 1px;}
#flat2 td, #flat4 td, #flat6 td {border-bottom: 1px solid #ddd; padding: 0 10px;}
#flat2 th, #flat4 th, #flat6 th {font-size: 100%; color: #27348b; text-decoration: underline;}

/* Imagegallery ***************************************/

#gallery {border: 1px solid #ccc; border-radius: 5px;}
#gallery:hover {transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);}
#gallery img {width: auto; height: 170px; display: block; margin-left: auto; margin-right: auto;}
#desc {padding: 15px; text-align: center; font-family: 'Roboto', sans-serif; color: #b3b2b2;}
* {box-sizing: border-box;}
.responsive {padding: 6px 6px; float: left; width: 16.66666%;}

@media only screen and (max-width: 700px) {
    .responsive {width: 49.99999%; margin: 6px 0;}}

@media only screen and (max-width: 500px) {
    .responsive {width: 100%;}}
.clearfix:after {content: ""; display: table; clear: both;}