/*
Theme Name: Kemmera Sun
Author: Kemmera Sun (development)
Description: Diese Themes wurde von Kemmera Sun erstellt für Christian Gehrig
Version: 1
Text Domain: chris-malt.com
*/
@font-face {
	font-family: 'avenir';
	src:url('http://chris-malt.com/fonts/AvenirLTStd-Light.otf') format('opentype');
    font-weight: 100;
}
@font-face {
	font-family: 'avenir';
	src:url('http://chris-malt.com/fonts/AvenirLTStd-Book.otf') format('opentype');
    font-weight: 400;
}
@font-face {
	font-family: 'avenir';
	src:url('http://chris-malt.com/fonts/AvenirLTStd-Medium.otf') format('opentype');
    font-weight: 600;
}
@font-face {
	font-family: 'avenir';
	src:url('http://chris-malt.com/fonts/AvenirLTStd-Heavy.otf') format('opentype');
    font-weight: 900;
}
body,html {
    margin: 0;
    padding: 0;
    width: 100%;
 
    background-color: whitesmoke;
    transition: all 400ms ease-in-out;
    -webkit-tap-highlight-color: transparent;
}
p,h1,h2,h3,h4,h5,li,ul,a {
margin: 0;
padding: 0;
list-style: none;
font-weight: 400;
font-family: avenir;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-style: normal;
font-family: avenir;
}
h4 {
color: rgb(60, 60, 60);
font-size: 17px;
font-weight: 900;
}
h5{
font-weight: 300;
letter-spacing: 0px;
color: rgb(60, 60, 60);
padding-top: 5px;
font-size: 16px;
}
h1 {
}
img {
width: 100%;
height: auto;
}
section {
width: 100%;
box-sizing: border-box;
padding-bottom: 200px;
}
header {
display: flex;
width: 100%;
justify-content: space-between;
position: fixed;
z-index: 100;
top: 0;
}
.kemmera {
height: 21px;
width: 34px;
margin: 50px;
position: relative;
cursor: pointer;
}
.kemmera .strich {
height: 3px;
width: 90%;
background-color: 444338;
border-radius: 50px;
}
.logo {
margin-bottom: 0;
margin-top: 50px;
margin-left: 50px;
display: table;
cursor:pointer;
}
._1,._2,._3 {
position: absolute;
border-radius: 100px;
}
._1 {
top: 0;
}
._2 {
top: 50%;
margin-top: -1.5px
}
._3 {
bottom: 0;
}
.logo img {
height: auto;
width: auto;
}
.gre {
/*background-color: #444339; */
}
.flex {

display: flex;
flex-wrap: wrap;
}
.dir {
flex-direction: column;
}
.mid {
justify-content: space-around;
}
.start {
color: white;
}
.start p {
font-size: 30px;
}
.wh {
color: white;
width: 300px;
}
.white {
/*background-color: #f2f2f2; */
}
.hl {
width: 50%;
border: 50px solid transparent;
box-sizing: border-box;
float: left;
}
.logo img{
width: 100px;
margin: 0px;
height: auto;
}
.ref {
border: 50px solid transparent;
padding: 0px;
margin-top: 30px;
padding-left: 30px;
padding-right: 30px;
}
.wrk {
width: 100%;
overflow: hidden;
}
.po {
width: 300px;
height: 300px;
margin: 20px;
float: left;
display: table;
}
.slider {
width: 300%;
margin-left: 30px;
}
footer {
height: 100%;
width: 100%;
box-sizing: border-box;
border: 100px solid transparent;
color: white;
}
footer h1,footer button {
text-align: center;
display: table;
}
footer h3 {
color: orange;
}
nav {
position: fixed;
height: 100%;
width: 100%;
background-color: #444339;
top: 0;
color: white;
z-index: 100000;
}
nav.flex {
display: none;
} 
nav ul li a {
font-size: 50px;
line-height: 1.1;
font-weight: 500;
margin: 50px;
transition: all 300ms ease-in-out;
display: inline-block;
color: white;
text-decoration: none;
letter-spacing: 1px;
}
nav span.es {
font-family: avenir;
margin: 20px;
letter-spacing: 1px;
}
._10 {
height: 100%;
padding-bottom: 0;
}
.wh {
margin-top: 300px;
padding-bottom: 200px;
padding-right: 70px;
}
.list,.animation {
display: table;
width: 100%;
border: solid 100px transparent;
border-top-width: 200px;
border-bottom-width: 200px;
}












.start p {
font-size: 50px;

line-height: 1.1;
font-weight: 300;
}
.start p span.cll span span{
display: inline-table;
position: relative;
font-weight: 300;
color: #84796b;

}
.start p span.cll{
display: table;


position: relative;
}
.start p span.cll span.cll2 {
display: table;
transition: all 500ms ease;
transform-origin: left;
}
.start p span span span::after {
content :" ";
display: block;
position: absolute;
bottom: -0px;
height: 3px; 
width: 100%;
background-color: orange;
border-radius: 100px;
background-color: #84796b;
}
.why .wh h1{
font-weight: 400;
font-size: 40px;
}
.why .wh p {
padding-top: 20px;
line-height: 1.8;
font-size: 12px;
letter-spacing: 1px;
font-weight: 300;
}
.why {
padding-left: 100px;
padding-right: 50px;
}
.list h2{
line-height: 1.8;
color: rgb(60, 60, 60);
text-transform: uppercase;
font-size: 12px;
letter-spacing: 2px;
font-weight: 400;
padding-bottom: 15px;
}
.list h3,.animation h3,.animation h2  {
font-size: 50px;
line-height: 1.1;
font-weight: 500;
padding-bottom: 30px;
padding-right: 30px;
}
.lissse ul {
margin-top: 50px;
}

.lissse ul li::before {
content: " ";
display: block;
position: absolute;
height: 5px;
width: 5px;
background-color: rgb(60, 60, 60);
left: 0;
top: 50%;
border-radius: 50px;
margin-top: -2.5px;
}
.ref h1 {
font-weight: 400;
line-height: 1.8;
color: rgb(60, 60, 60);
letter-spacing: 1px;
font-size: 40px;
padding-bottom: 100px;


font-size: 50px;
line-height: 1.1;
font-weight: 300;

}
.wrk {
/*background-color: #f2f2f2; */
color: rgb(60, 60, 60);
}
.wrk h1 {
padding-top: 30px;
font-weight: 400;
letter-spacing: 0px;
color: rgb(60, 60, 60);
font-size: 16px;
}
.wrk p {
font-weight: 300;
letter-spacing: 0px;
color: rgb(60, 60, 60);
padding-top: 5px;
}
.wrk h2 {
font-size: 30px;
margin-left: 50px;
padding-bottom: 40px;
font-weight: 600;
letter-spacing: 2px;
}
._00 {
transform:translate(0,30%) rotate(5deg);
opacity: 0;
}
footer .cll2 {
    
}
body.work section{
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}
.referenzen img.ii {
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 20px;
height: 400px;
width: auto;
}
.referenzen h3 {
font-size: 50px;
line-height: 1.1;
font-weight: 500;

}
.referenzen h2 {
color: rgb(60, 60, 60);
text-transform: uppercase;
font-size: 11px;
letter-spacing: 1px;
font-weight: 500;
padding-bottom: 10px;
word-spacing: 5px;
}
.referenzen button {
line-height: 1.8;
color: rgb(60, 60, 60);
text-transform: uppercase;
font-size: 12px;
letter-spacing: 4px;
font-weight: 400;
background-color: transparent;
border: none !important;
}
.referenzen a {
color: orange !important;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 4px;
font-weight: 900;
padding-bottom: 10px;
background-color: transparent !important;
margin: 0;
padding: 0;
border: none !important;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10;
}
footer {
}
.list p,.animation p  {
font-size: 15px;
font-weight: 500;
padding-bottom: 30px;
line-height: 1.8;
padding-right: 30px;
}
.list p {
font-weight: 300;
letter-spacing: 0px;
color: rgb(60, 60, 60);
padding-top: 5px;
font-size: 16px;
}
.hlf {
width: 50%;
padding-top: 0px;
padding-bottom: 0;
padding-top: 0;
min-width: 500px;
max-width: 700px;
}
.hlf:first-child { 

}
.hlf:last-child {

}
section:last-child {
padding-bottom: 0;
}
img.ful {
border: 100px solid transparent;
box-sizing: border-box;
border-top-width: 40px;

}
.list.uuo {
    width: 100%;
    border: 0px solid transparent;
    box-sizing: border-box;
}
.list.uuo h2,.list.uuo h1, .list.uuo p{
    width: 100%;
}
.kopf {
padding: 40px;
padding-top: 300px;
padding-bottom: 200px;
background: url(https://media.istockphoto.com/photos/the-interior-of-the-room-in-plain-monochrome-light-pink-color-with-picture-id1205633394?k=6&m=1205633394&s=612x612&w=0&h=DIIRa1gu5vstdNQ8zDE9vbZKx9j7y-4qULUkRKuLdaU=);
background-size: cover;
margin-bottom: 100px;
}
nav ul li{
display: inline-table;
}
nav ul {
display: inline-table;
margin: auto;
}
.sml_con {
position: absolute;
bottom: 50px;
margin: auto;
left: 50%;
font-size: 15px;
margin-left: -160px;
transition: all 300ms ease-in-out;
}
.sml_con a{
font-size: 15px;
font-family: avenir;
font-weight: 400;
letter-spacing: 0;
color: orange;
}
.login {

}
.clickers button {
background-color: transparent;
border: 2px solid orange;
border-radius: 100px;
color: orange;
font-family: avenir;
padding-left: 30px;
padding-right: 30px;
padding-top: 6px;
padding-bottom: 6px;
font-size: 14px;
letter-spacing: 1px;
margin-right: 10px;
}
.clickers {
padding-top: 30px;
}
.kooo {
padding-left: 50px;
padding-bottom: 35px;
}
.kooo p{
padding: 0;
}
.kooo a {
color: rgba(60, 60, 60, 0.73);
font-size: 15px;
font-weight: 500;
line-height: 1.8;
text-decoration: none;
}
.kooo h4 {
line-height: 1.8;
color: orange;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 2px;
font-weight: 800;
}
.kooo p {
color: rgba(60, 60, 60, 0.73);
font-size: 15px;
font-weight: 500;
line-height: 1.8;
}
.login .list.flex {
display: flex;
}
.kopf h2{
font-size: 50px;
max-width: 700px;
line-height: 1.1;
font-weight: 300;

}
.kopf h1 {
padding-bottom: 10px;
line-height: 1.8;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 4px;
font-weight: 400;
}
.with {
transform:translate(0,100px) rotate(5deg);
opacity: 0;
}
.scrolltra {

}
.pad-- {
transform: translate(15px,-15px)
}
.pad- {
transform: translate(-0px,15px);
}
._500er {
transition: all 800ms ease;
}
._1000er {
transition: all 1000ms ease;
}
.opac {
transform: translate(0,50px);
opacity: 0;
}
.opac10 {
transform: translate(0,0px) !important;
opacity: 0;
}
.opacn {
opacity: 0;
}
footer h1{
font-size: 50px;
max-width: 700px;
line-height: 1.1;
font-weight: 300;

color: white;
}
.referenzen h2.kiu {
font-size: 50px;
line-height: 1.1;
font-weight: 300;

padding-bottom: 30px;
text-transform: none;
letter-spacing: 0px;
}
.ai--{
    transform: translate(0,50px);
    opacity: 0;
}
nav span.es {
background-color: transparent;
border: 2px solid orange;
border-radius: 100px;
color: orange;

padding-left: 30px;
padding-right: 30px;
padding-top: 6px;
padding-bottom: 6px;
font-size: 14px;
letter-spacing: 1px;
margin-right: 40px;
}
svg {
width: 200px;
margin: auto;
height: auto;
}
.hhhh {
position: absolute;
top: 100px;
left: 800px;
transform: rotate(200deg);

}
.wp-block-image {
margin: 0;
}
.blocks-gallery-grid.columns-3 .blocks-gallery-image, .blocks-gallery-grid.columns-3 .blocks-gallery-item, .wp-block-gallery.columns-3 .blocks-gallery-image, .wp-block-gallery.columns-3, .blocks-gallery-item  {
    margin-right: 0;
    margin: 0;
    padding: 0;
}

.blocks-gallery-grid.columns-3 .blocks-gallery-image, .blocks-gallery-grid.columns-3 .blocks-gallery-item, .wp-block-gallery.columns-3 .blocks-gallery-image, .wp-block-gallery.columns-3 .blocks-gallery-item,.blocks-gallery-item img {
height: auto;
width: 100%;
}
@media all and (min-width : 600px) {
    .list h3 {
        font-size: 40px;
    }
   .wp-block-image {
margin: 0;
}
.blocks-gallery-grid.columns-3 .blocks-gallery-image, .blocks-gallery-grid.columns-3 .blocks-gallery-item, .wp-block-gallery.columns-3 .blocks-gallery-image, .wp-block-gallery.columns-3, .blocks-gallery-item  {
    margin-right: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.blocks-gallery-grid.columns-3 .blocks-gallery-image, .blocks-gallery-grid.columns-3 .blocks-gallery-item, .wp-block-gallery.columns-3 .blocks-gallery-image, .wp-block-gallery.columns-3 .blocks-gallery-item,.blocks-gallery-item img {
height: auto !important;
} 
}
.fullheader {

}
.blocks-gallery-grid .blocks-gallery-image figure, .blocks-gallery-grid .blocks-gallery-item figure, .wp-block-gallery .blocks-gallery-image figure, .wp-block-gallery .blocks-gallery-item figure {
height: auto !important;
align-items: flex-start !important;
}
footer h1 {
line-height: 1.8;
color: rgb(60, 60, 60);
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px;
font-weight: 500;
padding-bottom: 20px;
text-align: left;
}
footer h2 {
font-size: 50px;
line-height: 1.1;
font-weight: 500;
padding-bottom: 30px;
text-transform: normal;
}
footer .start {
padding: 0;
}
.kopf-full h1{
padding-bottom: 10px;
line-height: 1.8;
color: white;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 2px;
font-weight: 500;
}
.kopf-full p {
font-size: 50px;
max-width: 700px;
line-height: 1.1;
font-weight: 500;
font-family: avenir;
color: white;
letter-spacing: 1px;
}
.kopf-full {
padding-left: 100px !important;
padding-right: 100px !important;
padding-top: 300px;
padding-bottom: 300px;
}
.kunden-logos .blocks-gallery-item {
min-width: 200px !important;
max-width: 200px !important;
border: 40px solid transparent;
box-sizing: border-box;
border-top-width: 0px;
border-left-width: 0px;
border-right-width: 60px;
}

.list.team {
font-size: 15px;
font-weight: 400;
}
.list.team {
padding-bottom: 30px;
display: table;
width: 100%;
max-width: 100%;
}


.list.team  > div > div > div > div {
min-width: 300px;
margin-right: 30px;
max-width: 300px;
}
.list.team  > div > div > div {
display: flex;
flex-wrap: wrap;
}
.list.team  > div > div > div > div > div {
    margin-bottom: 20px;
cursor: pointer;
padding-bottom: 20px;
}
.list.team > div {
max-width: 100% !important;
}
.team p {
}
.team figure {
padding-bottom: 10px;
}
.referenzen > div > div {
height: 100%;
display: flex;
align-items: center;
}
.referenzen > div > div > div {
margin-left: 100px;
}
.referenzen > div > div > div:last-child {
margin-right: 100px;
margin-left: 0px !important;
}
._300er {
transition: opacity 800ms ease;
}
.durchs {
background-color: transparent !important;
}
.einzel {
margin: 0;
padding: 0;
width: 100%;
background-color: whitesmoke;
transition: all 400ms ease-in-out;

}
.animation {
border-top-width: 300px;
}
.animation h2 {
font-weight: 500;
font-size: 40px;
color: color: rgba(0, 0, 0, 0.81);
padding-bottom: 0px;
white-space: nowrap;
}
.animation h3 {
font-weight: 400;
font-size: 40px;

color: color: rgba(0, 0, 0, 0.81);
}
.animation p{
font-weight: 300;
letter-spacing: 0px;
font-size: 16px;
color: color: rgba(0, 0, 0, 0.81);
padding-top: 15px;
}
.animation img{
max-width: 50% !important;
margin-right: auto !important;
display: block;
width: 200px;
position: absolute;
transform: rotate(2100deg);
left: 0px;
opacity: 0.02;

}
.animation img:nth-child(1) {
transform: rotate(020deg);
}
.animation img:nth-child(2) {
transform: rotate(020deg);
}
.animation img:nth-child(3) {
transform: rotate(100deg);
}
.animation > div > div > div {
max-width: 300px;
min-width: 300px;
position: relative;
margin: 0 !important;
}
.animation > div > div > div > figure > img {
max-height: 200px;
max-width: 200px;  
}
nav .logo {
position: absolute;
top: 0;
transition: all 300ms ease-in-out;
}
.team p {
font-weight: 300;
letter-spacing: 0px;
color: rgb(60, 60, 60);
padding-top: 5px;
font-size: 16px;
}
.wp-block-columns {
    flex-wrap: wrap !important;
    
}
.list .wp-block-column{
    max-width: 700px !important;
    min-width: 500px !important;
}
.referenzen .wp-block-column{

}
.kunden-logos img {
object-fit: contain !important;
}
.wp-block-gallery.is-cropped .blocks-gallery-item img{
    height: auto !important;
}
.kunden-logos .blocks-gallery-item {
margin: 0 !important;
}
nav .menbutton {
position: absolute;
top: 0;
right: 0;
}
nav .kemmera .strich {
background-color: white;
position: absolute;
top: 50%;
margin-top: -1px;
}
nav ._1 {
transform: rotate(45deg);
}
nav ._3{
transform: rotate(-45deg);
}
nav .kemmera{
height: 21px;
width: 24px;
margin: 50px;
position: relative;
cursor: pointer;
}
.kunden-logos {
width: 100%;
}
.list.kunden-logos > div {
max-width: 100% !important;
}
@media (max-width: 1200px) { 
    .list h3, .animation h3, .animation h2{
        padding-right: 0px;
    }
    .hlf {
        width: 100%;
    }
    .list p {
        padding-right: 0px;
    }
    .kooo {
        padding-left: 0px;
    }
    .referenzen > div > div {
flex-direction: column-reverse;
border: 50px solid transparent;
align-items: flex-start;
width: 100%;
box-sizing: border-box;
    }
    .referenzen.opac10{

    }
    .referenzen > div > div > div:last-child {
        margin-right: 0px;
    }
    .referenzen > div > div > div {
    margin-left: 0px;
    width: 100%;
    }
    .referenzen {
padding-top: 100px;
/* display: table; */
width: 100%;
    }
    .referenzen > div {
    display: table;
    width: 100%;
    }
    .referenzen img {
        border-radius: 2px;
    }
    .wp-block-column:not(:first-child) {
    margin-left: 0px !important;
    }
}

@media (max-width: 1100px) { 
    .list, .animation {
        border: solid 50px transparent;
    }
    .animation {
        border-top-width: 300px;
    }
    .kopf-full {
        padding-left: 50px !important;
        padding-right: 50px !important;
    }
}
@media (max-width: 1022px) {
    .animation img {
    display: none;
    border-top-width: 50px;
    }
    .animation .wp-block-columns {
        max-width: 300px;
    }
    .list p, .animation p {
        padding-right: 0px;
    }
} 
@media (max-width: 1000px) { 
    .start{
        padding: 0;
    }
    .blocks-gallery-item {
        width: 100% !important;
        margin: 0px !important;
    }
    .kopf-full {
        display: flex;
            padding: 0 !important;
        height: 100%;
        padding-left: 50px !important;
        padding-right: 50px !important;
        padding-bottom: 50px !important;
        
    }
    .kopf-full > div {
        align-self: flex-end;
        padding-bottom: 100px !inportant;
        padding-top: 0 !important;
    }
    .list > div {
        max-width: 500px;
    }

}
@media (max-width: 700px) { 
    footer{
        border: 50px solid transparent;
        height: auto;
    }
    footer .flex {
    display: block;
    }
    .kooo {
    padding-left: 0px;
    }
    .list, .animation {
    border: 50px solid transparent;
    }
    .animation {
    border-top-width: 200px;
    }
    .kopf-full p {
        font-size: 40px;
    }

    nav ul li a {
        font-size: 30px;
    
    }
    .list h3 {
        font-size: 30px;
    }
 
}
@media (max-width: 601px) { 
.list .wp-block-column,.hlf {
    min-width: auto !important;
}
    .sml_con {
        left: 0;
        margin-left: 0;
    }
        .kopf-full p {
        font-size: 35px;
    }
    .animation .wp-block-columns,.animation > div > div > div {
        max-width: 100%;
    }
    nav ul li {
        width: 100%;
    }
    nav ul {
        margin-left: 50px;
    }
       nav ul li a {
    margin: 20px;

        margin-left: 0;
    }
}

@media (max-width: 550px) { 
    .animation > div > div > div > figure > img {
        display: none;
    }
    .kopf-full {
    padding-left: 50px !important;
    padding-right: 50px !important;
    }
        .kopf-full p {
        font-size: 30px;
    }
            .kopf-full h1 {
        font-size: 10px;
    }
    .animation h2 {
        font-size: 30px;
    }
}
@media (max-width: 451px) { 
    .kopf-full {
    padding-left: 20px !important;
    padding-right: 20px !important;
    }
    nav .kemmera{
        margin: 30px;
    }
    .logo {
        margin-top: 20px;
margin-left: 20px;
    }
    .kemmera {
        margin: 29px;
    }
    .referenzen > div > div {
        border-width: 20px;
    }
    .animation,.list,footer {
        border-width: 20px;
    }
    .animation {
        border-top-width: 200px;
    }
}
@media (max-width: 370px) { 
    .list.team  > div > div > div > div,.animation > div > div > div {
        min-width: auto;
    }
    .hlf {
    width: 100%;
    }
}
@media (max-width: 300px) { 
    footer h2 {
    word-break: break-all;
    }
}