@font-face {
    font-family: 'liberation_serifbold';
    src: url('fonts/LiberationSerif-Bold-webfont.eot');
    src: url('fonts/LiberationSerif-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/LiberationSerif-Bold-webfont.woff2') format('woff2'),
         url('fonts/LiberationSerif-Bold-webfont.woff') format('woff'),
         url('fonts/LiberationSerif-Bold-webfont.ttf') format('truetype'),
         url('fonts/LiberationSerif-Bold-webfont.svg#liberation_serifbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'liberation_serifitalic';
    src: url('fonts/LiberationSerif-Italic-webfont.eot');
    src: url('fonts/LiberationSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/LiberationSerif-Italic-webfont.woff2') format('woff2'),
         url('fonts/LiberationSerif-Italic-webfont.woff') format('woff'),
         url('fonts/LiberationSerif-Italic-webfont.ttf') format('truetype'),
         url('fonts/LiberationSerif-Italic-webfont.svg#liberation_serifitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'liberation_serifregular';
    src: url('fonts/LiberationSerif-Regular-webfont.eot');
    src: url('fonts/LiberationSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/LiberationSerif-Regular-webfont.woff2') format('woff2'),
         url('fonts/LiberationSerif-Regular-webfont.woff') format('woff'),
         url('fonts/LiberationSerif-Regular-webfont.ttf') format('truetype'),
         url('fonts/LiberationSerif-Regular-webfont.svg#liberation_serifregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
*, *:before, *:after { box-sizing: border-box; padding: 0; margin: 0;  }
html { font-size: 62.5%; overflow-y: scroll;}
body { font-family: 'liberation_serifregular'; padding:0; margin:0; color:#666666; line-height:170%; font-size:1.6rem; background:url(../images/back.jpg) repeat; background-attachment:fixed;  }
a:link, a:hover, button.btn-primary, button.rsform-reset-button, .mainnav ul li::after, a::after { transition: all 0.6s ease;  }
a:link, a:visited { color:#5E720D; }
a.btn { background: #5E720D; display: inline-block; padding: 5px 25px; color: #fff; border-radius: 30px; margin-top: 10px; text-decoration: none; }
a.btn:hover { background: #85A10A; }
.space { margin-right:8px; }
.point { margin:0 10px 0 10px; }
.container { width:90%; margin-right:auto; margin-left:auto; clear:both;   }
.container-big { width: 90%; margin-left: auto; margin-right: auto; clear: both;}
.antispam { display:none;}

/* Cookie */
.cc-window.cc-floating { font-size: 1.2rem !important; bottom:50px !important; }

/* Header */

#pflaster-wrapper { opacity:0.5; width:150px; height:150px; right:0; top:0; position:absolute; overflow:hidden; }
#pflaster-wrapper span { width:250px; height:250px; -webkit-animation:spin 90s linear infinite; -moz-animation:spin 90s linear infinite; animation:spin 90s linear infinite; background:url(../images/Bildzeichen-mobil.png) no-repeat; background-size:contain; position:absolute; right:-130px; top:-130px; opacity:0.5; overflow:hidden;}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
header { clear:both; width:100%; position:relative; z-index: 3000; height:70vh; }
#noheader header {min-height: 100px; height: inherit;}
#headermain { position:relative; z-index:1; }
a#logo { width:200px; height:66px; background:url(../images/Logo-Galabau-Michael-Schroeder.png) no-repeat; display:block; background-size:contain; margin-top:2rem; margin-left:2rem; float:left; }
header .desktop { display: none; visibility: hidden; position:relative; z-index: 1;}
header .mobile { display: block; visibility: visible; position:relative; z-index: 1;}

/* Nav */
.mainnav {float:left; margin:3.5rem 0 0 3rem;  }
.navbar { position:absolute; top:0; background-color: #5E720D; left: 0; width: 100%; transform: translateX(-100%); transition: 0.5s; z-index:1; padding-bottom:10px;}
.navbar.active { transform: translateX(0);transition: 0.5s; }
.menuopen {	color:#5E720D; cursor: pointer;	transition: 0.3s;	z-index: 9999;  }
.hamburger { position:absolute; width:40px; height:40px;  }
.top-menu {  top: 0;  width: 23px;  height: 3px; background-color: #5E720D; position:absolute;  transition: 0.6s ease; border-radius:1px;}
.mid-menu {  top: 6px;  width: 23px;  height: 3px; background-color: #5E720D; position:absolute;  transition: 0.6s ease;  border-radius:1px;}
.bottom-menu { top: 12px;  width: 23px;  height: 3px; background-color: #5E720D; position:absolute;  transition: 0.6s ease;  border-radius:1px;}
.top-animate  {  top:5px; width: 25px;  height: 3px;  -webkit-transform: rotate(45deg);  transform: rotate(45deg); transition: 0.6s ease;  background-color:#fff; z-index:2; }
.active .mid-animate {  opacity:0;  transition: 0.6s ease;}
.active .bottom-animate {    top:5px; left:0;  width: 25px;  height: 3px; -webkit-transform: rotate(-225deg);  transform: rotate(-225deg);  transition: 0.6s ease; background-color:#fff; z-index:2;}
.mainnav ul   { margin:4.5rem 0 0 5.0rem; list-style-type:none; padding:0; }
.mainnav ul > li { margin-bottom:1.5rem; }
.mainnav ul > li > a:visited, .mainnav ul > li > a:link { font-size:1.9rem; font-weight:400; color:#fff; text-decoration:none;  }
.mainnav ul li::after  { content:""; width:10px; height:2px; background:transparent; display:block;  }
.mainnav ul li#current::after, .mainnav ul li:hover::after  { content:""; width:10px; height:2px; background:#fff; display:block;  }
.mainnav ul li.divider { display:none; visibility:hidden; }

/* Slider */
#slider { position: absolute; top:0; left:0;}
span.zitat_text { box-decoration-break: clone; background-color: #5E720D; opacity: 0.7; color: #fff; font-size: 1.5rem; padding: 0.5rem 1rem; line-height: 2.2;}
.zitat::before { content:""; width:20px; height:1px; background:#5E720D; display:block; margin:3rem auto; }
.zitat { color:#5E720D; margin-top: 1rem; font-size: 1.2rem; width: 100%; }
.n2-ss-section-main-content { top:10%; }

/* About */
#about, #referenzen { margin-top: 8rem; padding: 0 1rem;}
#about figure img { width: 100%; height: auto; border-radius: 100%; };


/* Footer */
footer { width:100%; color:#999999; font-size: 1.6rem; line-height: 1.3;  }
.fuss { background:url(../images/Bildzeichen-mobil.png) no-repeat center top; background-size: 40px 40px; padding-top:6rem;  margin-top:2rem; margin-bottom: 2rem;}
footer a:link, footer a:visited { color:#999999; border-bottom:1px solid transparent; padding:0 0 0.5rem 0; text-decoration:none; }
footer a:hover, footer a:active, footer li.current a { border-bottom:1px solid #999; }
footer #kontakt .hidden { display:none; visibility:hidden; }
footer nav ul { display:flex; display: -ms-flexbox; list-style-type:none; justify-content: center; padding:0; margin:0; }
footer nav ul li:first-child:after { content: ""; width:5px; height:5px; border-radius:100%; background:#999;  display:inline-block; margin:0 20px 0 20px; vertical-align:middle; }
    
/* Typo */
h1 { color: #999; font-size: 1.8rem; font-weight: normal; margin: 6rem 0 1rem 0; display:block; }
h1 span, #about h2 span.letter, #referenzen h2 span.letter { background-color: #5E720D;color:#fff; margin-right: 0.15rem; border-radius: 100%; width: 2rem; height: 2rem; display: inline-block; line-height: 2rem; text-align: center; }
h2 { color: #666666; font-size: 3.1rem; font-family: 'liberation_serifbold'; -webkit-font-smoothing: antialiased; letter-spacing: 1px; line-height: 1.2; margin:0.5rem 0 4rem 0;}
.intro_text { padding: 1rem; box-shadow: 0 0 2px #00000038;-moz-hyphens: auto; hyphens: auto; }
#about h2, #referenzen h2 { color: #999; font-size: 1.8rem; font-weight: normal; margin: 6rem 0 1rem 0; font-family: 'liberation_serifregular'; letter-spacing: 0.5px;}
#about h2 .h2-second-line, #referenzen h2 .h2-second-line { font-family: 'liberation_serifbold'; display: block; margin: 1rem 0 0 0; color: #666;}
#about h2 .h2-first-line::after { content:""; height: 1px; width: 25px; background: #999; display: inline-block; vertical-align: middle; margin-left: 0.5rem;}
#referenzen h2 .h2-first-line::after { content:""; height: 1px; width: 15px; background: #999; display: inline-block; vertical-align: middle; margin-left: 0.5rem;}
#referenzen .col-1-of-2:last-child { text-align: center; }
h3 { font-family: 'liberation_serifbold'; margin: 2rem 0 1rem 0;}
.full_text ul { list-style-type: circle; padding: 0 0 0 1.5rem;}
.imprint h2 { font-size: 2rem; margin: 3rem 0 0.5rem 0;}
.imprint h3 {font-size: 1.8rem; }
hr { height: 1px; background:#ccc; border: none;  }

/* Grid */
.row {    max-width: 156rem;    margin: 0 auto; }
.row:not(:last-child) { margin-bottom: 8rem; }
.row::after { content: ""; display: table; clear: both; }

/* Referenzen */
.thumb_box { border-radius: 100%; width: 80% !important; height: 80% !important; }
li.thumbWrapper { background-color:transparent !important; }
li.thumbWrapper .tg-captionBox { display: none; visibility: hidden;}

/* Kontakt */
input, textarea { border:1px solid #ccc; padding: 1.5rem 1rem; width: 100%; font-family: 'liberation_serifregular'; font-size: 1.4rem;}
input[type="checkbox"] { width: 30px; }
.dsgvo { font-size: 1.5rem; line-height: 1.2;}
.sidebar { font-size: 1.5rem; line-height: 1.5;}
button.btn-submit { transition:all .5s; color:#fff; padding: 1.2rem 1.5rem; margin-top: 2rem; margin-bottom:3rem; background: rgb(201,222,150); background: -moz-linear-gradient(top, rgba(201,222,150,1) 0%, rgba(94,114,13,1) 100%); 
    background: -webkit-linear-gradient(top, rgba(201,222,150,1) 0%,rgba(94,114,13,1) 100%); background: linear-gradient(to bottom, rgba(201,222,150,1) 0%,rgba(94,114,13,1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9de96', endColorstr='#5e720d',GradientType=0 ); border:0; cursor: pointer; }
button.btn-submit:hover { box-shadow: 0 2px 5px #00000067; }
button.btn-submit:active { transform: scale(0.95;)}
.form-group { margin-bottom:1.5rem; }

@media only screen and (min-width: 480px) {
    #about figure img { width: 70%; }
}

@media only screen and (min-width:960px) {
#pflaster-wrapper { opacity:1; }
footer #kontakt { display:flex; display: -ms-flexbox; justify-content: space-between; color:#999999; }
footer #kontakt .hidden { display:block; visibility:visible; }
footer #kontakt ul { padding:0; margin:0; list-style-type:none; }
footer #kontakt .daten { text-align:center; }
footer #kontakt .daten div {  display:inherit;   }	
footer { padding:9rem 0 2rem 0; font-size: 1.7rem; margin: 5rem 0 3rem 0; background-size:60px 60px;}

/* Slider */

.zitat { margin-top: 3rem; font-size: 1.5rem; }
.inhalt-slide { width: 45%; top:40%; transform: translateY(-40%); }
.bild-slide { display:inherit; visibility:visible; min-height: 100vh;    min-width: 100%;    overflow: hidden;    position: absolute;    top: 0;    z-index: -1;}
span.zitat_text { font-size: 2.2rem; padding: 0.5rem 2rem; line-height: 2.5;}
.zitat {  margin-top: 2rem; }


/* Grid */
.row [class^="col-"] { float: left; }
.row [class^="col-"]:not(:last-child) { margin-right: 6rem; }
.row .col-1-of-2 { width: calc((100% - 6rem) / 2); }
.row .col-1-of-3 { width: calc((100% - 2 * 6rem) / 3); }
.row .col-2-of-3 { width: calc(2 * ((100% - 2 * 6rem) / 3) + 6rem); }
.row .col-1-of-4 { width: calc((100% - 3 * 6rem) / 4); }
.row .col-2-of-4 { width: calc(2 * ((100% - 3 * 6rem) / 4) + 6rem); }
.row .col-3-of-4 { width: calc(3 * ((100% - 3 * 6rem) / 4) + 2 * 6rem); }
}

/* Main Breakpoint */
@media only screen and (min-width:1200px) {
body { font-size: 2rem;}
header { height:100vh; }
header .mobile { display: none; visibility: hidden;}
header .desktop { display: block; visibility: visible;}
.fixed-header {  position: fixed;  top: 4rem;  left: 50%;  transform: translate(-50%, -50%); background:#fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); z-index:4000; }
header .desktop nav ul { list-style-type: none; margin: 0; padding: 0 3rem; display: flex; display : -ms-flexbox; justify-content : space-between; line-height: 100px; }
header .desktop nav ul li a { font-size: 1.7rem; position: relative; text-decoration: none;}
header .desktop nav ul li#current a, header.desktop nav ul li a:hover, header.desktop nav ul li a:active { color:#85A10A; text-decoration: none; }
header .desktop nav ul li a::after  { content:""; width:10px; height:2px; background:transparent; display:block; position: absolute; bottom: -8px; }
header .desktop nav ul li#current a::after, header.desktop nav ul li a:hover::after  { content:""; width:10px; height:2px; background:#5E720D; display:block;  }
#pflaster-wrapper { width: 400px; height: 400px;}
#pflaster-wrapper span { background:url(../images/Bildzeichen.png) no-repeat; background-size:contain; position:absolute; right:-190px; top:-190px; width: 400px; height: 400px; }
.container { width:70%; max-width:1200px; margin-left:auto; margin-right: auto; clear:both; }
.container-big { width: 90%; max-width: 1560px; margin-left: auto; margin-right: auto; clear: both;}
.fuss {  background-size: 60px 60px; padding-top: 10rem; margin-top: 10rem; }
footer #kontakt .daten { text-align:left; display:flex; display: -ms-flexbox; justify-content: center; }
footer #kontakt .daten div {  display:inline-block;  }	
footer #kontakt .daten div:last-child .space:before { content: ""; width:5px; height:5px; border-radius:100%; background:#999;  display:inline-block; margin:0 20px 0 20px; vertical-align:middle; }
#about, #referenzen { margin-top: 14rem;}
#about figure img { width: 100%; }
.full_text ul { margin-right:5rem; float: left;}
.slider-overlay { background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 62%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 62%,rgba(255,255,255,1) 100%); 
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 62%,rgba(255,255,255,1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); position: absolute; 
    width: 100%; height: 100vh;z-index:1; top: 0; left:0;}

/* Typo */
h1 { font-size: 3rem; }
h1 span, #about h2 span.letter, #referenzen h2 span.letter {   width: 3rem; height: 3rem; line-height: 3rem; }
h2 { font-size: 4.5rem;}
.intro_text { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; column-gap: 4rem; padding: 2rem;}
#about h2, #referenzen h2 { font-size: 2.5rem;}
#about h2 .h2-second-line, #referenzen h2 .h2-second-line  { font-size: 5rem; }
#about h2 .h2-first-line::after {   width: 230px;}
#referenzen h2 .h2-first-line::after {   width: 130px;}
}

@media only screen and (min-width:1500px) {
    #about figure img {  transform: translateX(-30%) };
    #about { padding: 0; }
}