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

@import url(https://fonts.googleapis.com/css?family=Lato:400,700,300,100,400italic);

@import url("chocolat.css");
@import url("form.css");
@import url("slick.css");
@import url("slick-theme.css");

* { padding: 0; margin: 0;  }

body, html { background: url('../img/site/papier.jpg') no-repeat center fixed; background-size: cover; font-size: 16px; font-family: 'Lato', sans-serif; color: #7c807f; text-align: center; line-height: 1.5; }

h1 { font-size: 100%; }
h1 span.headline { font-size: 220%; font-weight: 300; text-transform: uppercase; text-shadow: 0 -1px #006d67, 1px 0 #006d67, 0 1px #006d67, -1px 0 #006d67; color: #fff; }
h1 span.subline {  font-weight: 400; }
h2 { font-size: 130%;  margin-bottom: 25px; font-weight: 400; text-transform: uppercase; color: #006d67; }
h3 { font-size: 110%; margin-bottom: 15px; color: #006d67; font-weight: 700;}

p { margin-bottom: 15px; }
hr {  margin: 50px auto; width: 50%; height: 0; border-top: none; border-bottom: 1px solid #006d67; }
b, strong { font-weight: 700;  }

iframe, object { border: none; width: 100%; max-height: 320px; }

.page_margin { max-width: 940px; padding: 0 10px; margin: 0 auto; }

#header { height: auto; padding: 35px 0; background-color: #fff; background-image: linear-gradient( #ffffff, #fafafa); width: 100%; text-align: center;  -webkit-box-shadow: 0 0 5px  rgba(155,155,155,0.8); box-shadow: 0 0 5px rgba(155,155,155,0.8); }

#teaser { width: 100%; padding: 120px 0; }
.quote { color: #006d67; text-align: center; font-size: 220%;  margin-bottom: 3%; }
.author { text-align: right; font-style: italic; margin-right: 20%; }

#about { background-color: #fff; background-image: linear-gradient( #ffffff, #fafafa); width: 100%; padding: 5% 0;  -webkit-box-shadow: 0 0 5px  rgba(155,155,155,0.8); box-shadow: 0 0 5px rgba(155,155,155,0.8); }

#skills  { background: none; width: 100%; padding: 80px 0;  text-align: center;  }
#skills ul { margin: 3%;  }
#skills ul li { display: inline-block; margin: 7px; padding: 5px 10px; background: #006d67; color: #fafafa; }

#work  { background-color: #fff; background-image: linear-gradient( #ffffff, #fafafa); width: 100%; padding: 80px 0 40px ;  -webkit-box-shadow: 0 0 5px  rgba(155,155,155,0.8); box-shadow: 0 0 5px rgba(155,155,155,0.8); }

.projects {  padding: 0 15%;  color: #fff; margin: 50px auto 0; background: #aaafae;  }
.toggle-details { padding: 3% 5% 5%;}
.toggle-details a.external { color: #006d67; text-decoration: none; margin-right: 2px; }
.toggle-details a.external:before { font-family: 'FontAwesome'; content: '\f101'; color: #006d67; padding: 0 2px 0 4px ; }
.toggle-details a:hover, .toggle-details a.external:hover:before { color: #fff; }
.toggle-details a.external:before:hover { color: #fff; }

.toggle-gallery { width: 45%; float:left; margin: 5% 2%; overflow: auto; }
.toggle-gallery a { float:left; width: 30%; position:relative;  }
.toggle-gallery .thumb { display: block; width: 80%; height: auto; margin: 10%; border: 3px solid #fff;  -webkit-box-shadow: 0 0 5px rgba(100,100,100,0.8); box-shadow: 0 0 5px rgba(100,100,100,0.8); transition: all 0.2s linear 0s; overflow:auto; transform: scale(1.0);  }
.toggle-gallery .thumb:hover { -webkit-box-shadow: 0 0 5px rgba(155,155,155,0.5); box-shadow: 0 0 5px rgba(155,155,155,0.5); transition: all 0.2s linear 0s; overflow:auto; transform: scale(1.1); }
.toggle-info { width: 45%; float: right; margin: 5% 2%; text-align: left; }

.watermark {width: 100%; position:absolute; right: 0; bottom: 0; }

.triangle { width: 0; height: 0; border-style: solid; border-width: 0 10px 20px 10px; border-color: transparent transparent #cccccc transparent; }

.toggle-close { z-index: 1000; margin-bottom: 10px; text-align: right; }
.toggle-close i { font-size: 130%; color: #006d67; cursor: pointer;  }
.toggle-close i:hover {  color: #fff; }

#contact {  background: none; width: 100%; padding: 80px 0;   }

form input[type="text"], form textarea  { display: block; outline: none; width: 50%; border: 1px solid #ddd; padding: 7px 11px; margin: 0 auto 10px; font-family: 'Lato'; font-size: 100%;  }
form img { display: block; margin: 15px auto ; }
form input[type="submit"] { background-color: #006d67; text-transform: uppercase; border: none; font-size: 100%; letter-spacing: 1px; text-decoration: none; padding: 12px 22px; text-align: center; color: #fff !important; display: block;  margin: 0 auto; }
.antispam { display:none;}
.simple_link { color: #006d67; text-decoration: none; margin-right: 2px; font-weight: 700; }
.simple_link:hover { color: #7c807f; }

#map { border-top: 10px solid #006d67; }
#map_canvas { width: 100%; height: 300px; }
#map_canvas h5 { text-transform: none; font-size: 1.75em; color: #006d67; margin: 0; }
#map_canvas p { font-size: 1em; color: #006d67; line-height: 1.25em; }

#footer { background: #006d67; padding: 50px 0; color: #ccc; }
#footer a { color:#fff; text-decoration: none; }

#impressum { position: fixed; top: 0 ; width:100%; background: rgba(170,175,174,0.7); padding: 40px 0; margin: 0 auto; z-index: 1000; color: #fff;}


@media screen and (max-width: 640px) {

h1 span.headline { font-size: 170%; font-weight: 300; text-transform: uppercase; text-shadow: 0 -1px #006d67, 1px 0 #006d67, 0 1px #006d67, -1px 0 #006d67; color: #fff; }
	
.quote { color: #006d67; text-align: center; font-size: 140%;  margin-bottom: 3%; }
.author { text-align: center; font-style: italic; margin-right: 0; font-size: 80%; }
	
.projects { padding: 3%; }

.toggle-details { width: 85%; margin: 0 auto; font-size: 80%; }
.toggle-gallery, .toggle-info { float: none; width: 100%; margin: 0 0 3%; }

.slick-slide { padding: 5px; }
.slick-dots { width: 85%; }

form input[type="text"], form textarea { width: 80%; }
}