html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
	margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}
:focus, :active {outline: 0; outline: none;	-webkit-tap-highlight-color: rgba(0,0,0,0);	-webkit-tap-highlight-color: transparent;}
body {line-height: 1; color: black; }
ol, ul {list-style: none; }
table {border-collapse: separate; border-spacing: 0;}
caption, th, td {text-align: left; font-weight: normal;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
div, img {image-rendering: -webkit-optimize-contrast;}
* {box-sizing: border-box;}

@font-face {
    font-family: 'LatoLatinLight';
    src: url('../fonts/LatoLatin-Light.eot'); /* IE9 Compat Modes */
    src: url('../fonts/LatoLatin-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/LatoLatin-Light.woff2') format('woff2'), /* Modern Browsers */
         url('../fonts/LatoLatin-Light.woff') format('woff'), /* Modern Browsers */
         url('../fonts/LatoLatin-Light.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;}

@font-face {
    font-family: 'LatoLatin';
    src: url('../fonts/LatoLatin-Regular.eot'); /* IE9 Compat Modes */
    src: url('../fonts/LatoLatin-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/LatoLatin-Regular.woff2') format('woff2'), /* Modern Browsers */
         url('../fonts/LatoLatin-Regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/LatoLatin-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;}
	
@font-face {
    font-family: 'LatoLatinHeavy';
    src: url('../fonts/LatoLatin-Heavy.eot'); /* IE9 Compat Modes */
    src: url('../fonts/LatoLatin-Heavy.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/LatoLatin-Heavy.woff2') format('woff2'), /* Modern Browsers */
         url('../fonts/LatoLatin-Heavy.woff') format('woff'), /* Modern Browsers */
         url('../fonts/LatoLatin-Heavy.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;}

html, body {
	height: 100%;
	width: 100%;}
	
body {
	font-size: 100.01%;
	width: 100%;
	background-color: #323232;
	-webkit-font-smoothing: subpixel-antialiased;}
	
h1 {
	font-family: 'LatoLatinHeavy', Arial, sans-serif;
	font-size: 71px;
	line-height: 86px;
	text-transform: uppercase;
	margin-bottom: 60px;}
	
h2, .rechtliches h2 {
	font-family: 'LatoLatinLight', Arial, sans-serif;
	font-size: 37px;
	line-height: 40px;
	color: #fff;
	text-align: center;
	text-shadow: 0 0 15px #000;}
	
h3 {
	font-family: 'LatoLatinHeavy', Arial, sans-serif;
	font-size: 22px;
	line-height: 30px;
	color: #fff;}

.hbold {
    font-family: 'LatoLatinHeavy', Arial,sans-serif;}
	
.aqua {
	color: #00dcdc;}
.aqualight {
	color: #00F0F0;}
	
.yello {
	color: #f0cd00;}
.yellolight {
	color: #fae100;}
	
.white {
	color: #f2f2f2;}	
	
.green {
	color: #77E364;}
.greenlight {
	color: #86FF71;}
	
.red {
	color: #eb4146;}
.redlight {
	color: #ff4b50;}
	
p {
	font-family: 'LatoLatinLight', Arial, sans-serif;
	font-size: 20px;
	line-height: 31px;
	color: #fff;
	margin-bottom: 25px;}
	
i {
	font-size: 17px;}
	
hr {
	width: 25%;
	height: 0;
	margin-bottom: 30px;
	border-top: dotted 1px #fff;}
	
#wrapper {
	min-height: 100%;
	width: 100%;}
  
a {
	color: #fff;
	text-decoration: none;}
	
a[href^="tel:"] {
  color: #fff;}
  
a[href^="tel:"]:hover {
  color: #fff;}
  
img {
	width: 100%;
	height: auto;}
	
.clearer {
	clear: both;}
	
/* ----------------------------- HEADER ----------------------------- */	

#header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: auto;
	width: 90%;
	max-width: 1512px;
	margin: auto;}

.headerimg {
	margin-top: -35px;}
	
/* ----------------------------- NAVI ----------------------------- */

#menuwrapper {
	position: relative;
	width: 100%;
	height: auto;}
	
.logo {
	position: relative;
	top: 1.2vw;
	width: 22%;
	height: auto;
	min-width: 250px;
	max-width: 330px;}
	
#navi {
	position: absolute;
	width: auto;
	top: 2.5vw;
	right: 0;
	-webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;}
	
#navi li {
	cursor: pointer;
	height: 50px;
    display: block;
	border-radius: 4px;
    float: left;
	transition: all 0.8s ease-in-out 0s;}
	
#navi a {
    color: #323232;
    display: block;
    font-family: 'LatoLatin', Arial, sans-serif;
	font-size: 18px;
	letter-spacing: 1px;
    padding: 17px 15px;}
	
.current {
    background-color: #323232;}
	
#navi .current.aqua > a {
    color: #00F0F0;}
	
#navi .current.yello > a {
    color: #fae100;}
	
#navi .current.white > a {
    color: #f2f2f2;}
	
#navi .current.green > a {
    color: #77E364;}
	
#navi .current.red > a {
    color: #ff4b50;}
	
#navi a:hover {
	transition: all 0.5s ease-in-out 0s;
    text-decoration: none;}
	
#navi li:hover {
	background: rgba(50, 50, 50, 0.2);}
	
#navi li.current:hover {
	background: #323232;}
	
/* for iPhone, iPod Touch and iPad 
#navi ul ul {display:none;}
#navi ul li:hover > ul {display:block;}
#navi li.sub:hover ~ li.close {display:block;} */
	
/* ----------------------------- CONTENT ----------------------------- */
	
#content {
	position: relative;
	padding: 80px 0 30px 0;
	height: auto;
	width: 90%;
	max-width: 1512px;
	margin: auto;}
	
.twotiles, .threetiles, .fourtiles {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;}
	
.fourtiles {
	margin-top: 30px;}
	
.texttile {
	display: block;
	width: 48%;}
	
.tile {
	position: relative;
	box-sizing: border-box;
	width: 31%;
	padding-bottom: 50px;
	margin: 15px 0 20px 0;
	background-image: url("../img/klokwise-mediendesign-endtile.png");
	background-size: 100% auto;
	background-position: 0 100%;
	background-repeat: no-repeat;
	-webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;}
	
.tile:nth-child(even) {
    background-image: url("../img/klokwise-mediendesign-endtileflip.png");}
	
.tile h2 {
	margin: -20% 0 10% 0;
	width: 100%;
	height: auto;}
	
.tile p {
	padding: 10% 7% 0 7%;}
	
.tile a:hover, h6:hover {
	padding: 5px 0;
	border-top: 1px dotted #fff;
	border-bottom: 1px dotted #fff;}
	
.tile .clientweb {
	box-sizing: border-box;
	font-family: 'LatoLatinLight', Arial, sans-serif;
	font-size: 17px;
	line-height: 20px;
	font-style: italic;
	color: #fff;
	position: absolute;
	bottom: 0;
	width: 100%;
	height: auto;
	padding: 0 0 80px 0;
	margin: 0 auto;}
	
.tileservice, .tilekontakt {
	text-align: center;}
	
.tilereferenzen {
	text-align: center;
	margin-bottom: 50px !important;
	padding-bottom: 100px !important;}
.tilereferenzen:hover {
	cursor: pointer;
	transform: scale(1.07);
	/* Backward compatibility */
    -webkit-transform: scale(1.07);
    -moz-transform: scale(1.07);
    -o-transform: scale(1.07);
    -ms-transform: scale(1.05);}
	
#content ul {
	margin-bottom: 40px;}
	
.button {
	position: relative;
	border: none;
	padding: 12px 30px 10px 30px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-family: 'LatoLatinHeavy', Arial, sans-serif;
	font-size: 19px;
	line-height: 25px;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 70px auto 90px auto;
	color: #323232;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
	border-radius: 5px;
	left: 50%;
	transform: translateX(-50%);}

.start {
	background-color: #00dcdc;}
.leistungen {
	background-color: #f0cd00;}
.referenzen {
	background-color: #e6e6e6;}
.ueber {
	background-color: #77E364;}
.start:hover, .leistungen:hover, .referenzen:hover, .ueber:hover {
	background-color: #fff;
	transform: translateX(-50%) scale(1.1);
	/* Backward compatibility */
    -webkit-transform: translateX(-50%) scale(1.1);
    -moz-transform: translateX(-50%) scale(1.1);
    -o-transform: translateX(-50%) scale(1.1);
    -ms-transform: translateX(-50%) scale(1.1);}
	
.kunden {
	display: block;
	margin-top: 40px;
	width: 23%;
	height: auto;
	border: solid 1px #666666;} 
	
.fourtiles img {
	width: 100%;
	height: auto;}
	
iframe {
	margin-top: 80px;}
	
.linesconnecting {
	position: fixed;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;}
	
.empty {
	height: 0;
	padding: 0;
	margin: 0;
	border: 0;}	
	
/* --------------------------- COOKIES etc. -------------------------- */

.rechtliches {
	position: relative;
	box-sizing: border-box;}
.rechtliches h2, .texttile h2 {
	text-align: left;
	margin: 40px 0 20px 0;}
.rechtliches ul {
	padding: 10px 0 0 30px;
	list-style-type: disc;}
	
.rechtliches li {
	font-family: 'LatoLatinLight', Arial, sans-serif;
	font-size: 20px;
	line-height: 31px;
	color: #fff;}
	
tbody, table, #CookieDeclarationChangeConsent, #CookieDeclarationUserStatusLabelOn, #CookieDeclarationUserStatusLabelOff, .CookieDeclarationTableHeader {
	font-family: 'LatoLatinLight', Arial, sans-serif;
	font-size: 20px;
	line-height: 31px;
	color: #fff;}
	
#CookieDeclarationUserStatusLabelOn, #CookieDeclarationUserStatusLabelOff {
	font-family: 'LatoLatinHeavy', Arial, sans-serif;}
	
#CybotCookiebotDialog {
	top: 0 !important;}
	
#CybotCookiebotDialogBodyButtonDecline, #CybotCookiebotDialogBodyButtonAccept {
	width: 230px !important;
	height: 20px;
	padding-top: 5px;
	background-color: #323232;
	border: 0;}	
	
/* ----------------------------- FOOTER ----------------------------- */	
	
#footer {
	position: relative;
	height: auto;
	width: 100%;
	overflow: hidden;}
	
.footerimg {
	margin-left: 50%;
	transform: translateX(-50%);
	margin-bottom: -40px;
	min-width: 1000px;}
	
#footerwrapper {
	position: relative;
	bottom: 15px;
	height: auto;
	width: 90%;
	max-width: 1512px;
	margin: auto;}
	
.logofooter {
	position: absolute;
	bottom: 1.5vw;
	left: 0;
	width: 22%;
	height: auto;
	min-width: 180px;
	max-width: 330px;}
	
.impressum {
	position: absolute;
	width: auto;
	bottom: 2.5vw;
	right: 0;}
	
.impressum p, .impressum a {
	font-family: 'LatoLatin', Arial, sans-serif;
	font-size: 18px;
	line-height: 25px;
	margin-left: 30px;
	color: rgb(255,255,255,0.4);}
	
.impressum p {
	margin-bottom: 0;}
	
.facebook, .xing, .linkedin, .instagram {
	display: inline-block;
	height: 40px;
	width: 40px;
	background-image: url("../img/klokwise-mediendesign-socialmedia.png");
	background-size: auto 100%;
	background-repeat: no-repeat;
	margin-left: 10px !important;
	margin-bottom: -12px;}
	
.facebook {
	background-position: 0 0;
	opacity: 0.4;}	
.xing {	
	background-position: -40px 0;
	opacity: 0.4;}	
.linkedin {	
	background-position: -80px 0;
	opacity: 0.4;}
.instagram {	
	background-position: -120px 0;
	opacity: 0.4;}
.facebook:hover, .xing:hover, .linkedin:hover, .instagram:hover {
	opacity: 0.7;}
	
.textlink:hover {
	padding: 8px 0 5px 0;
	color: rgb(255,255,255,0.7);
	border-top: 1px dotted rgb(255,255,255,0.7);
	border-bottom: 1px dotted rgb(255,255,255,0.7);}
	
/* ----------------------------- MODAL ----------------------------- */	

.imgFull {
	display: none;}
	
/* The Modal (background) */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	padding-top: 5%; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.9);} /* Black w/ opacity */

/* Modal Content (Image) */
.modal-content {
	margin: auto;
	display: block;
	width: 90%;
	max-width: 90vh;
	max-height: 70%;}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
	margin: auto;
	display: block;
	box-sizing: border-box;
	width: 90%;
	max-width: 90vh;
	text-align: left;
	background-color: #f2f2f2;
	padding: 25px 30px 1px 30px;
	height: auto;
	font-family: 'LatoLatinLight', Arial, sans-serif;
	font-size: 30px;
	color: #000;}
	
#caption h3, #caption p , #caption i, #caption a {
	color: #474747;}
	
#caption i {
	line-height: 24px;}
	
#caption a:hover {
	text-decoration: underline;}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
	animation-name: zoom;
	animation-duration: 0.6s;}

@keyframes zoom {
	from {transform:scale(0)}
	to {transform:scale(1)}}

/* The Close Button */
.close {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;}

.close:hover,
.close:focus {
	color: #bbb;
	text-decoration: none;
	cursor: pointer;}
	
	
/* ----------------------------- BREAKPOINTS ----------------------------- */

@media only screen and (max-width: 2300px) {
	
.headerimg {
	margin-top: -20px;}
.footerimg {
	margin-bottom: -25px;}	
}

@media only screen and (max-width: 2050px) {
	
.headerimg {
	margin-top: 0;}
.footerimg {
	margin-bottom: 0;}	
}

@media only screen and (max-width: 1800px) {
	
.headerimg {
	margin-top: -70px;}	
}

@media only screen and (max-width: 1600px) {
	
.headerimg {
	margin-top: -50px;}	
}

@media only screen and (max-width: 1270px) {
	
.tile {
	width: 48%;
	padding-bottom: 50px;}
	
.headerimg {
	margin-top: -30px;}
	
.footerimg {
	min-width: 1500px;}
	
}

@media only screen and (max-width: 1100px) {
	
h1 {
	font-size: 60px;
	line-height: 75px;}
	
#navi {
	position: fixed;
	box-sizing: border-box;
	left: 100%;
	width: 310px;
	top: 0;
	height: 100%;
	padding: 80px 5% 0 5%;
	z-index: 7777;}
	
.slidemenu {
	box-shadow: 0 0 20px 0 #000;
	transform: translateX(-310px);
	-webkit-transform: translateX(-310px);}
	
#navi li {
    float: none;}
	
.backgroundaqua {
    background-color: #00F0F0;}
.backgroundyello {
    background-color: #fae100;}	
.backgroundwhite {
    background-color: #f2f2f2;}
.backgroundgreen {
    background-color: #77E364;}
.backgroundred {
    background-color: #ff4b50;}
	
#content {
	padding: 70px 0 40px 0;
	width: 90%;}
	
.kunden {
	width: 31%;}

}

@media only screen and (max-width: 1000px) {
	
.headerimg {
	margin-top: 0px;}
}

@media only screen and (max-width: 850px) {
	
h1 {
	font-size: 50px;
	line-height: 65px;
	margin-bottom: 50px;}
	
#content {
	padding: 60px 0 0 0;
	width: 90%;}
	
.tile {
	margin: 15px 0 20px 0;}
	
.button {
	margin: 30px auto 55px auto;}
	
.ueber {
	margin: 30px auto 20px auto;}
	
.texttile {
	width: 100%;}
	
.fourtiles {
	margin-top: 25px;}
	
.kunden {
	margin-top: 0;
	margin-bottom: 25px;}	
}

@media only screen and (max-width: 800px) {
	
.headerimg {
	margin-top: -110px;}	
}

@media only screen and (max-width: 750px) {
	
.tile {
	width: 100%;}
	
.headerimg {
	margin-top: -110px;}	
	
.kunden {
	width: 48%;}
}

@media only screen and (max-width: 700px) {
	
.headerimg {
	margin-top: -90px;}
	
.impressum {
	width: 100%;
	text-align: right;}
	
.impressum p {
	margin-left: 0;}
	
.impressum p, .impressum a {
	font-size: 17px;}

}

@media only screen and (max-width: 600px) {
	
h1 {
	font-size: 29px;
	line-height: 39px;
	margin-bottom: 35px;}
	
h2, .rechtliches h2 {
	font-size: 29px;
	line-height: 33px;}
	
p {
	font-size: 19px;
	line-height: 27px;}
	
#content {
	padding: 40px 0 30px 0;
	width: 90%;}
	
.tile {
	margin: 20px 0 10px 0;}
	
.headerimg {
	margin-top: -60px;}
	
.ueber {
	margin: 30px auto 0 auto;}
	
}

@media only screen and (max-width: 554px) {
	
.facebook, .xing, .linkedin, .instagram {
	margin-bottom: 10px;}
	
.footerimg {
	min-width: 2000px;}
	
.fourtiles {
	margin-top: 20px;
	margin-bottom: -50px;}
	
.tilestart {
	margin-bottom: -50px;}
	
.tile .clientweb {
	padding: 0 0 60px 0;}
	
.tile {
	padding: 0 0 35px 0;}
	
.tilereferenzen {
	margin: 10px 0 30px 0 !important;}
	
}

@media only screen and (max-width: 500px) {
	
.headerimg {
	margin-top: -30px;}
	
.logo {
	top: 3.7vw;
	min-width: 200px;}
	
.impressum p, .impressum a {
	font-size: 16px;
	margin-left: 15px;}
	
.impressum a:nth-child(4) {
	margin-left: 0;}
	
}

@media only screen and (max-width: 400px) {
	
.headerimg {
	margin-top: -10px;}
	
.ueber {
	margin: 30px auto -20px auto;}
}