/************************************************************************************************/
/* */
/* HTML */
/* */
/************************************************************************************************/
html {
margin:0;
background-image:url('../img/bg-image.png');
background-repeat: repeat;
background-attachment:;
padding:0;
}
body {
margin:auto;
width:70%;
padding:0;
}
p, h1, h2, h3 {
color: #475965;
}
.highlight {
color:#719BAC;
font-weight:bold;
}
/************************************************************************************************/
/* */
/* FONTS */
/* */
/************************************************************************************************/
/* nunito-regular - latin */
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 400;
src: url('../fonts/nunito-v25-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/nunito-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/nunito-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/nunito-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/nunito-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/nunito-v25-latin-regular.svg#Nunito') format('svg'); /* Legacy iOS */
}
/* cinzel-regular - latin */
@font-face {
font-family: 'Cinzel';
font-style: normal;
font-weight: 400;
src: url('../fonts/cinzel-v19-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/cinzel-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/cinzel-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/cinzel-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/cinzel-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/cinzel-v19-latin-regular.svg#Cinzel') format('svg'); /* Legacy iOS */
}
/************************************************************************************************/
/* */
/* CLEARFIX */
/* */
/************************************************************************************************/
.clearfix:after {
content: ".";
clear: both;
display: block;
visibility: hidden;
height: 0px;
}
/************************************************************************************************/
/* */
/* UP DIV DISPLAY */
/* */
/************************************************************************************************/
#up{
position:fixed;
width: 30px;
z-index:5;
height: 30px;
bottom: 30px;
display:none;
right: 16%;
}
/************************************************************************************************/
/* */
/* HEADER & TOP IMG */
/* */
/************************************************************************************************/
header{
padding-bottom:;
height:100vh;
width: 100%;
background-color:#719BAC;
}
.kontaktbox-top {
margin: auto;
width: 470px;
}
.kontaktdaten-top {
color: #475965;
padding:3%;
text-align:center;
font-family: 'Cinzel', serif;
font-size:150%;
}
#logo {
margin-left: 34%;
width:32%;
padding-top: 15%;
}
/************************************************************************************************/
/* */
/* CSS - NAVBAR */
/* */
/************************************************************************************************/
nav{
font-size:120%;
opacity:0.9;
text-align:center;
padding-top:2%;
font-family: 'Cinzel', serif;
}
ul {
padding:0;
font-family: 'Cinzel', serif;
margin:0;
font-size: 120%;
}
ul li
{
list-style:none;
display:inline-block;
font-family: 'Cinzel', serif;
}
.naht {
position:relative;
font-family: 'Cinzel', serif;
vertical-align: middle;
color: #475965;
display: inline-block;
height: 50px;
line-height: 60px;
text-align: center;
transition: 0.5s;
padding: 0 3%;
margin:2%;
cursor: pointer;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-webkit-transition:0.5s;
}
.naht:hover {
color: #FCF4E8;
}
.naht::before, .naht::after {
width: 100%;
height:100%;
z-index: 3;
content:'';
position: absolute;
top:0;
left:0;
box-sizing: border-box;
-webkit-transform: scale(0);
-moz-transition:scale(0);
-webkit-transition:scale(0);
transition: 0.5s;
}
.effekt::before {
border-bottom: 3px dotted #FCF4E8;
border-left: 0;
-webkit-transform-origin: 0% 100%;
-moz-transition:0% 100%;
-webkit-transition:0% 100%;
}
.effekt::after {
border-top: 0;
border-right: 0;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin:50% 50%;
}
.naht:hover::after, .naht:hover::before {
-webkit-transform: scale(1);
-moz-transform: scale(1);
}
ul a
{
color: #FCF4E8;
text-decoration:none;
}
/********************************************************************************/
/* */
/* HAMBURGER ANIMIERT */
/* */
/********************************************************************************/
.icon {
width:80px;
height:80px;
cursor: pointer;
background:#719BAC;
position:absolute;
}
.hamburger {
width: 40px;
height: 4px;
background: #999999;
position: absolute;
top:7%;
left:2%;
//transform: translate(-50%,-50%);
box-shadow: 0 2px 5px rgb(0,0,0,.2);
transition: .5%;
display:none;
}
.hamburger:before,
.hamburger:after
{
content: "";
position: absolute;
width: 40px;
height: 4px;
background: #999999;
box-shadow: 0 2px 5px rgba(0,0,0, .2);
transition: .5s;
}
.hamburger:before{
top: -11px;
}
.hamburger:after{
top: 11px;
}
.icon.active .hamburger {
background: rgba(0,0,0,0);
box-shadow: 0 2px 5px rgb(0,0,0,0);
}
.icon.active .hamburger:before {
top:0;
transform: rotate(45deg);
}
.icon.active .hamburger:after {
top:0;
transform: rotate(135deg);
}
@media (max-width:921px)
{
.hamburger {
display:block;
margin-left:87%;
}
.icon{
margin-left: 87%;
}
ul{
width:100%;
display:none;
}
ul.active{
width:100%;
}
ul li {
display:block;
text-align: center;
}
}
@media (min-width:922px)
{
ul{
display:block !important;
}
}
/********************************************************************************/
/* */
/* SLIDESHOW */
/* */
/********************************************************************************/
/* Slideshow container */
.slideshow {
width: 100%;
height:auto;
position: relative;
margin: auto;
}
.mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5, .mySlides6, .mySlides7, .mySlides8, .mySlides9, .mySlides10, .mySlides11, .mySlides12, .mySlides13, .mySlides14, .mySlides15, .mySlides16, .mySlides17, .mySlides18, .mySlides19, .mySlides20, .mySlides21, .mySlides22, .mySlides23, .mySlides24, .mySlides25, .mySlides26, .mySlides27, .mySlides28, .mySlides29, .mySlides30, .mySlides31, .mySlides32, .mySlides33, .mySlides34, .mySlides35, .mySlides36, .mySlides37, .mySlides38 {
border-radius:50px;
border: 2px solid #475965;
}
.sliderbild{
width:100%;
height:auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.slidertext {
color: #f2f2f2;
font-size: 2.5em;
font-family: 'Nunito', sans-serif;
padding: 3% 2%;
background-color:#271d19;
position: absolute;
bottom: 8px;
width:480px;
opacity:0.8;
margin-bottom:5%;
margin-left:5%;
text-align: center;
border-radius:20px;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 13px;
width: 13px;
margin: 0 5px;
margin-top:2%;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.dot.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/********************************************************************************/
/* */
/* Leistung */
/* */
/********************************************************************************/
.leistung h1{
padding-top:4%;
text-align:center;
margin-top:0;
color:#475965;
font-size: 250%;
font-family: 'Cinzel', serif;
}
.leistung {
width:100%;
background-color: #FCF4E8;
color: #475965;
}
.leistungbox, .leistungbox-lieferung {
padding-top:2%;
padding-bottom:3%;
margin-left:3%;
margin-right:1%;
font-size:120%;
float:left;
line-height:160%;
font-family: 'Nunito', sans-serif;
width:28%;
}
.leistungtext {
width: 100%;
color: #475965;
}
.leistungbox h3 ,.leistungbox-lieferung h3{
font-family: 'Cinzel', serif !important;
}
.leistung-bild{
width:100%;
height:auto;
}
figure img {
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
figure:hover img {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
/********************************************************************************/
/* */
/* About/ Ãœber mich */
/* */
/********************************************************************************/
.about h1{
padding-top:4%;
text-align:center;
margin-top:0;
font-family: 'Cinzel', serif;
color:#475965;
font-size: 250%;
}
.about {
background-color: #719BAC;
width:100%;
font-family: 'Nunito', sans-serif;
}
.aboutbox {
font-family: 'Nunito', sans-serif;
padding-top: 3%;
padding-bottom:3%;
margin-left:4%;
font-size:1em;
line-height:150%;
}
.aboutbox-text {
font-family: 'Nunito', sans-serif;
padding-top:0%;
padding-left:3%;
padding-right:3%;
padding-bottom:3%;
float:left;
font-size:120%;
line-height:160%;
width:50%;
}
.abouttext {
color:#475965 !important;
}
.frederikuhlenbrock{
float:left;
margin-left:3%;
margin-top:5%;
}
.aboutname {
font-size:1.9em;
color:#475965;
padding-top:0%;
margin-bottom:0;
}
.abouttitle {
font-size:130%;
padding-top:2%;
color:#475965;
margin-top:0;
}
.portrait {
border-radius: 20%;
width: 20%;
margin-left:15%;
float:left;
height:auto;
border: 2px solid #475965;
}
.zitatbox {
background-color: #FCF4e8;
padding:4%;
color: #719BAC;
text-align:center;
width:30%;
float:left;
font-family: 'Nunito', sans-serif;
}
.zitat {
font-size:150%;
color:#719BAC;
margin-bottom:0;
}
.autor {
margin-top:0.4em;
color:#475965;
font-size:100%;
}
/********************************************************************************/
/* */
/* PORTFOLIO */
/* */
/********************************************************************************/
.portfolio{
width: 100%;
background-color: #FCF4e8;
}
.portfoliobox {
font-family: 'Nunito', sans-serif;
margin-bottom:0%;
margin-left:4%;
font-size:1em;
line-height:150%;
width: 93%;
height:auto;
}
.portfolio h1{
font-size: 250%;
padding-top:4%;
text-align:center;
margin-top:0;
font-family: 'Cinzel', serif;
color:#475965;
}
/********************************************************************************/
/* */
/* PORTFOLIO SLIDESHOW */
/* */
/********************************************************************************/
.pf-maincontainer-slide{
width:29%;
float:left;
margin-left:2%;
margin-right:2%;
margin-top:3%;
}
.pf-subcontainer-slide {
width:100%;
position:relative;
}
/********************************************************************************/
/* */
/* KONTAKT */
/* */
/********************************************************************************/
.kontakt h1{
padding-top:4%;
text-align:center;
margin-top:0;
font-family: 'Cinzel', serif;
color:#475965;
font-size: 250%;
}
.kontakt {
background-color: #719BAC;
width:100%;
}
.karte {
width: 42%;
height: 300px;
border:0;
float:left;
border: solid 1px #475965;
margin-bottom:2%;
margin-right:4%;
margin-top:4%;
}
.kontakt-container {
border-radius: 5px;
background-color: #719BAC;
padding-right: 43px;
width:35%;
float:left;
font-family: 'Nunito', sans-serif;
font-size: 1em;
color:#475965;
margin-left: 5%;
}
.adressdaten {
font-family: 'Nunito', sans-serif;
font-size: 1em;
color: #475965;
width:400px;
float:left;
line-height:150%;
}
.adressdaten p {
font-family: 'Nunito', sans-serif;
font-size: 120%;
line-height:150%;
color: #475965;
margin-top:0;
}
.adressdaten h3{
margin:0;
padding:0;
}
input[type=text], input[type=email], select, textarea {
width: 100%;
font-family: 'Nunito', sans-serif;
padding: 12px;
font-size:0.8em;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #475965;
color:#FCF4E8;
padding: 12px 20px;
border: none;
margin-bottom:10%;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: lightgray;
}
.g-recaptcha {
margin-bottom:15px;
}
.kontakt a{
text-decoration:none;
color:#475965;
}
/********************************************************************************/
/* */
/* FOOTER */
/* */
/********************************************************************************/
footer {
width:100%;
position:absolute;
left:0;
background-color: #475965;
text-align: center;
height:150px;
}
.copyright {
color: #FCF4E8;
text-align: center;
margin:0;
padding-top: 3%;
font-size: 1.2em;
height: 30px;
font-family: 'Nunito', sans-serif;
}
footer a {
text-decoration:none;
color: #FCF4E8;
font-size: 0.8em;
font-family: 'Nunito', sans-serif;
}
/************************************************************************
*
* Impressum
*
*************************************************************************/
.impressum {
font-size:100%;
line-height:150%;
padding:2% 4%;
background:#719BAC;
font-family: 'Nunito', sans-serif;
padding-bottom:100px;
}
.impressum p {
margin-top:0;
}
.impressum p, .impressum h2, .impressum h3, .impressum h4{
width: 70%;
margin: auto;
color:#475965;
line-height:150%;
}
/************************************************************************
*
* Datenschutz
*
*************************************************************************/
.dse {
font-size:100%;
font-family: 'Nunito', sans-serif;
background:#719BAC;
padding-bottom:80px;
}
.dse p, .dse h2, .dse h3 {
width: 70%;
margin: auto;
line-height:150%;
}
.dse a {
text-decoration:none;
color:#475965;
font-family: 'Nunito', sans-serif;
}