@charset "UTF-8";
/* CSS Document */

html {min-height:100%; position:relative; background-color:#2E2D2C; background-size:100%; }
body {margin:0; padding: 0;}

.logo {width: 30%; position: absolute; top: 15%; left: 35%; }
.logo:hover {animation: beat .55s alternate; animation-iteration-count: 7; transform-origin: center; }
.kleineslogo {width: 10%; position: fixed; top: 0.5%; left: 45%; z-index: 2; }

.header {width: 100%; position: fixed; top: 0; padding-top: 4.5%; padding-bottom: 1%; font-size: 1.5em; font-family: "BodoniFLF-Roman"; clear: left; text-align: center; display: table; background-color:#2E2D2C; box-shadow: 2px 0px 70px rgba(255,255,255,0.5); z-index: 1; }
.header ul {width: 50%; padding:0; margin: 0; display: table-cell; vertical-align: middle; }
.header li {display: inline; list-style: none; margin-left:15px; margin-right:15px; }
.header li a {text-decoration:none; color: #B2B2B1; }
.header a:hover {color:ghostwhite; }

.menu1 {width: 100%; position:absolute; top: 79%; font-size: 1.5em; font-family: "BodoniFLF-Roman"; clear: left; text-align: center; }
.menu1 ul {padding:0; margin: 0; }
.menu1 li {display: inline; list-style: none; margin-left:15px; margin-right:15px; }
.menu1 li a {text-decoration:none; color:#B2B2B1; }
.menu1 a:hover {color:ghostwhite; }

.content {width: 90%; position: relative; margin: 15% auto 0 auto; }
.content img {width: 30%; float: left; padding-right: 3%; padding-left: 4%; padding-bottom: 250px; }
.content .column1 {float: left; width: 23%; margin-right: 3%; padding-right: 3%; border-right: solid 1px ghostwhite; margin-top: 2%; }
.content .column2 {float: left; width: 23%; margin-right: 3%; padding-right: 3%; border-right: solid 1px ghostwhite; margin-top: 2%; }
.content h2 {margin-bottom: 3%; color: #B2B2B1; font-family: mr-eaves-xl-modern, sans-serif; font-style: normal; font-weight: 100; font-size: 1.5em; text-align: center; margin-top: 0; }
.content p {color: #B2B2B1; font-family: mr-eaves-xl-modern, sans-serif; font-style: normal; font-weight: 100; font-size: 1em; line-height: 1.5; /*margin-bottom: 2.5%;*/ }
.content span {width: 1.3em; float: left; font-size: 250%; line-height: 110%; font-family: "BodoniFLF-Roman"; color: ghostwhite; }

.content1 {width: 90%; position: relative; margin: 15% auto 0 auto; }

.content2 {width: 90%; position: relative; margin: 15% auto 0 auto; padding-left: 4%; }
.content2 img {width: 30%; position: relative; }
.content2 .arrow {width: 25px; height: 25px; position: relative; margin-bottom: 14%; clear: left; text-align: center; }

.content3 {width: 90%; position: relative; padding-left: 100px; margin: 15% auto 0 auto; clear: left; text-align: center; }
.content3 .row {width: 100%; float: none; }
.content3 .skill {width: 22.5%; float: left; margin-top: 5%; }
.content3 .skill img {width: 100%; min-width: 22.5%; position: relative; }
.content3 .skill .points {width:4.5%; float: left; }
.content3 .skill .rating {width: 22.5%; margin-left: auto; margin-right: auto; padding-left: 3%; }

.content4 {position: relative; padding-left: 250px; margin: 15% auto 0 auto; clear: left; text-align: center; }
.content4 .row {width: 100%; float: none; }
.content4 .skill {width: 22.5%; float: left; margin-top: 5%; }
.content4 .skill img {width: 100%; min-width: 22.5%; position: relative; }
.content4 .skill .points {width:4.5%; float: left; }
.content4 .skill .rating {width: 22.5%; margin-left: auto; margin-right: auto; }

.sliderpic {height: 330px; margin-left: auto; margin-right: auto;}
div.w3-content.w3-display-container {width: 70%; position: relative; margin: 15% auto 16% auto; box-shadow: 2px 0px 70px rgba(255,255,255,0.5); }
div.w3-content.w3-display-container div.w3-display-topleft.w3-container.w3-padding-16.w3-black {margin-top: 14.7%; font-size: 1.5em; }
/*div.w3-content.w3-display-container img.mySlides {width: 35%; margin-left: auto; margin-right: auto; }*/

.w3-padding-16 {padding-top: 16px!important; padding-bottom: 37px!important; }
div.w3-display-bottommiddle.w3-container.w3-padding-16.w3-black {width: 100%; position: absolute; top:100%; clear: left; text-align: center; font-family: mr-eaves-xl-modern, sans-serif; font-style: normal; font-weight: 100; font-size: 1em; }

.copy {font-family: "BodoniFLF-Roman"; font-size:1.0em;}

.footer {width: 100%;  position: fixed; bottom: 0; background-color: #B2B2B1; clear: left; text-align: center; font-family: "BodoniFLF-Roman"; display: table; }
.footer ul {padding:0; margin:1% 0 0 0; display: table-cell; vertical-align: middle; }
.footer li {display:inline; padding-left:10px; padding-right:10px; }
.footer li a {text-decoration:none; color:black;  }
.footer a:hover {color:ghostwhite; }

.footer2 {width: 100%;  position: fixed; bottom: 0; background-color:#2E2D2C; box-shadow: 2px 0px 70px rgba(255,255,255,0.5); clear: left; text-align: center; font-family: "BodoniFLF-Roman"; display: table; color: #B2B2B1; }
.footer2 ul {padding:0; margin:1% 0 0 0; display: table-cell; vertical-align: middle; }
.footer2 li {display:inline; padding-left:10px; padding-right:10px; }
.footer2 li a {text-decoration:none; color: #B2B2B1; }
.footer2 a:hover {color:ghostwhite; }

/* Heart beat animation */
@keyframes beat{
	0% { transform: scale(1.0); }
	50% { transform: scale(1.3); }
	100% { transform: scale(1.0); }
}

/* Contact page */
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: ghostwhite;
  font-size: 0.875em;
}

input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {
  color: ghostwhite;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: ghostwhite;
  font-size: 0.875em;
}

input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {
  color: ghostwhite;
}

input::placeholder, textarea::placeholder {
  color: ghostwhite;
  font-size: 0.875em;
}

input:focus::placeholder, textarea::focus:placeholder {
  color: ghostwhite;
}

input::-ms-placeholder, textarea::-ms-placeholder {
  color: ghostwhite;
  font-size: 0.875em;
}

input:focus::-ms-placeholder, textarea:focus::-ms-placeholder {
  color: ghostwhite;
}

/* on hover placeholder */

input:hover::-webkit-input-placeholder, textarea:hover::-webkit-input-placeholder {
  color: #2E2D2C;
  font-size: 0.875em;
}

input:hover:focus::-webkit-input-placeholder, textarea:hover:focus::-webkit-input-placeholder {
  color: #2E2D2C;
}

input:hover::-moz-placeholder, textarea:hover::-moz-placeholder {
  color: #2E2D2C;
  font-size: 0.875em;
}

input:hover:focus::-moz-placeholder, textarea:hover:focus::-moz-placeholder {
  color: #2E2D2C;
}

input:hover::placeholder, textarea:hover::placeholder {
  color: #2E2D2C;
  font-size: 0.875em;
}

input:hover:focus::placeholder, textarea:hover:focus::placeholder {
  color: #2E2D2C;
}

input:hover::placeholder, textarea:hover::placeholder {
  color: #2E2D2C;
  font-size: 0.875em;
}

input:hover:focus::-ms-placeholder, textarea:hover::focus:-ms-placeholder {
  color: #2E2D2C;
}

header {
	font-family: mr-eaves-xl-modern, sans-serif; font-style: normal; font-weight: 100; 
	color: ghostwhite;
  position: relative;
  margin: 100px 0 25px 0;
  font-size: 1.5em;
  text-align: center;
}

#form {
  position: relative;
  width: 500px;
  margin: 50px auto 100px auto;
}

input {
  font-family: mr-eaves-xl-modern, sans-serif; font-style: normal; font-weight: 100; 
  font-size: 0.875em;
  width: 470px;
  height: 50px;
  padding: 0px 15px 0px 15px;
  
  background: transparent;
  outline: none;
  color: #726659;
  
  border: solid 1px #B2B2B1;
  border-bottom: none;
  
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
}

input:hover {
  background: ghostwhite;
  color: #2E2D2C;
}

textarea {
  width: 470px;
  max-width: 470px;
  height: 110px;
  max-height: 110px;
  padding: 15px;
  
  background: transparent;
  outline: none;
  
  color: ghostwhite;
  font-family: mr-eaves-xl-modern, sans-serif; font-style: normal; font-weight: 100; 
  font-size: 0.875em;
  
  border: solid 1px #B2B2B1;
  
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
}

textarea:hover {
  background: ghostwhite;
  color: #2E2D2C;
}

#submit {
  width: 502px;
  
  padding: 0;
  margin: -5px 0px 0px 0px;
  
  font-family: mr-eaves-xl-modern, sans-serif; font-style: normal; font-weight: 100; 
  font-size: 0.875em;
  color: ghostwhite;
  
  outline:none;
  cursor: pointer;
  
  border: solid 1px #B2B2B1;
  border-top: none;
}

#submit:hover {
	background: ghostwhite;
  color: #2E2D2C;
}

@media screen and (min-width: 405px) and (max-width: 800px) {
	
	.logo {top: 10%; }
	.menu1 {top: 75%; font-size: 0.9em; }
	.menu1 li {margin-left: 7px; margin-right: 7px; }
	
	.header {font-size: 1em; padding-top: 7%; }
	.header ul {padding: 0 3% 0 3%; }
	.header li {margin-left: 5px; margin-right: 5px; }
	.kleineslogo {padding-top: 1.5%; }
	
	.content {margin: 20% auto 0 auto; }
	.content img {width: 35%; padding-left: 33%; padding-bottom: 5%; }
	.content .column1 {width: 90%; padding: 0 0 0 4%; margin-bottom: 5%; border: none; }
	.content .column2 {width: 90%; padding: 0 0 0 4%; margin-bottom: 10%; border: none; }
	.content .column h2 {margin: 0; }
	.content .column1 p {text-align: left; font-size: 0.7em; }
	.content .column2 p {text-align: left; font-size: 0.7em; }
	
	.content2 {margin: 20% auto 0 auto; }
	.content2 img.circles {width: 29%; }
	.content2 .arrow {margin-bottom: 12%; }
	
	.content3 {padding-left: 10%;  }
	.content4 {padding-left: 25%; }
	
	div.w3-content.w3-display-container {width: 100%; margin-top: 20%; }
	.sliderpic {height: 150px; }
	div.w3-display-bottommiddle.w3-container.w3-padding-16.w3-black {font-size: 1em; }
	
	#form {width: 85%; margin: 12% 0 0 0; }
	header {font-size: 1em; margin-top: 20%; }
	input {width: 85%; height: 35px; margin-left: 12%; }
	input#name {width: 85%; height: 35px; margin-left: 12%; }
	input#emil {width: 85%; height: 35px; margin-left: 12%; }
	textarea#message {width: 85%; height: 60px; margin-left: 12%;  }
	input#submit {width: 92.3%; height: 35px; margin-left: 12%; margin-top: -1%; }
	
	.footer {font-size: 0.5em; }
	.copy {font-size: 0.3em; }

}

@media screen and (max-width: 400px) {
	
	.logo {width: 70%; left: 15%; top: 15%; }
	.menu1 {top: 75%; font-size: 1.3em; }
	.menu1 li {margin-left: 7px; margin-right: 7px; }
	
	.header {padding-top: 17%; font-size: 0.5em; }
	.header li {margin-left: 5px; margin-right: 5px; }
	.kleineslogo {width: 12%; top: 2%; left: 44%; }
	
	.content {margin: 30% auto 0 auto; }
	.content img {width: 75%; padding-left: 12%; padding-bottom: 10%; }
	.content .column1 {width: 90%; padding: 0 0 0 5%; margin-bottom: 10%; border: none; }
	.content .column2 {width: 90%; padding: 0 0 0 5%; margin-bottom: 20%; border: none; }
	.content .column h2 {margin: 0; }
	.content .column1 p {text-align: left; }
	.content .column2 p {text-align: left; }
	
	.content2 {margin-top: 30%; }
	.content2 img {width: 75%; padding-left: 11%; display: block; }
	.content2 .arrow {transform: rotate(90deg); margin-left: 38%; }
	
	.content3 {padding-left: 10%;  }
	.content4 {padding-left: 25%; }
	
	div.w3-content.w3-display-container {width: 100%; margin-top: 30%; }
	.sliderpic {height: 200px; }
	.w3-padding-16 {padding-bottom: 50px!important; }
	div.w3-display-bottommiddle.w3-container.w3-padding-16.w3-black {font-size: 0.7em; }
	
	#form {width: 75%; margin: 12% 0 0 0; }
	header {font-size: 1em; margin-top: 30%; }
	input {width: 75%; height: 35px; margin-left: 20%; font-size: 0.5em; }
	input#name {width: 75%; height: 35px; margin-left: 20%; font-size: 0.5em; }
	input#emil {width: 75%; height: 35px; margin-left: 20%; font-size: 0.5em; }
	textarea#message {width: 75%; height: 60px; margin-left: 20%; font-size: 0.5em;  }
	input#submit {width: 90%; height: 35px; margin-left: 20%; margin-top: -1%; font-size: 0.5em; }
	
	.footer {font-size: 0.5em; }
	p.copy {font-size: 0.7em; }
	.copy {font-size: 0.3em; }
}