/**DocBlock
 * 
 * @site         http://tomleiferdesign.de/
 * @author       TLD
 */

  
/* ======================================== Allgemein ======================================== */

    @font-face{
        font-family:"Avenir LT W01_85 Heavy1475544";
        src:url("fonts/6af9989e-235b-4c75-8c08-a83bdaef3f66.eot?#iefix");
        src:url("fonts/6af9989e-235b-4c75-8c08-a83bdaef3f66.eot?#iefix") format("eot"),url("fonts/d513e15e-8f35-4129-ad05-481815e52625.woff2") format("woff2"),url("fonts/61bd362e-7162-46bd-b67e-28f366c4afbe.woff") format("woff"),url("fonts/ccd17c6b-e7ed-4b73-b0d2-76712a4ef46b.ttf") format("truetype"),url("fonts/20577853-40a7-4ada-a3fb-dd6e9392f401.svg#20577853-40a7-4ada-a3fb-dd6e9392f401") format("svg");
    }
    @font-face{
        font-family:"Avenir LT W01 95 Black";
        src:url("fonts/a24b3f55-c8c8-41a1-a77e-7cdf417d82f6.eot?#iefix");
        src:url("fonts/a24b3f55-c8c8-41a1-a77e-7cdf417d82f6.eot?#iefix") format("eot"),url("fonts/16695c2d-c755-45a2-bdcf-c54843f39afd.woff2") format("woff2"),url("fonts/5a05cf7f-f332-456f-ae67-d8c26e0d35b3.woff") format("woff"),url("fonts/c33278bc-988e-440b-b4be-6acc095e6044.ttf") format("truetype"),url("fonts/7bdad4a5-289b-42f9-b6fa-c5883b9e9f23.svg#7bdad4a5-289b-42f9-b6fa-c5883b9e9f23") format("svg");
    }
    @font-face{
        font-family:"AvenirNextLTW02-Regular";
        src:url("fonts/7a1b7ae7-5c29-481f-83ac-652e932c5509.eot?#iefix");
        src:url("fonts/7a1b7ae7-5c29-481f-83ac-652e932c5509.eot?#iefix") format("eot"),url("fonts/bb590848-4012-46d6-a8d5-48c9893a176b.woff2") format("woff2"),url("fonts/3a42a252-67ff-4186-88cf-762f56719ca1.woff") format("woff"),url("fonts/dbc39ae3-2636-4653-a23e-8938bce2cf51.ttf") format("truetype"),url("fonts/8e46b6cb-85f2-4400-a9d8-7cbd8ed30dd8.svg#8e46b6cb-85f2-4400-a9d8-7cbd8ed30dd8") format("svg");
    }
    @font-face{
        font-family:"Avenir Next LT W02SC Demi";
        src:url("fonts/093cecaf-bae9-4928-87d7-de460ba3bfa7.eot?#iefix");
        src:url("fonts/093cecaf-bae9-4928-87d7-de460ba3bfa7.eot?#iefix") format("eot"),url("fonts/373db362-010f-4a93-8677-0e79c739f520.woff2") format("woff2"),url("fonts/eea58f26-3cc8-41c5-8dd3-cb71287f9bef.woff") format("woff"),url("fonts/ba2cc6b9-5b84-43bd-a52f-12493b937908.ttf") format("truetype"),url("fonts/adc8a73e-7eef-4ffa-9ab8-73b0a1824b56.svg#adc8a73e-7eef-4ffa-9ab8-73b0a1824b56") format("svg");
    }
    @font-face{
        font-family:"Avenir Next LT W04 Bold";
        src:url("fonts/6ff8ab07-ccb4-4a91-8f0f-2bd4367902e8.eot?#iefix");
        src:url("fonts/6ff8ab07-ccb4-4a91-8f0f-2bd4367902e8.eot?#iefix") format("eot"),url("fonts/91799b0e-0ef8-446e-b274-5509412e1242.woff2") format("woff2"),url("fonts/97fb5311-bdbd-46bc-bf69-3bcf8c744cda.woff") format("woff"),url("fonts/88093bd3-b377-4278-8abe-8460dd24d0e8.ttf") format("truetype"),url("fonts/0fde1539-69df-4e3d-83ef-ae23d10dd2a5.svg#0fde1539-69df-4e3d-83ef-ae23d10dd2a5") format("svg");
    }
    @font-face{
        font-family:"LiebeErika W01 Regular";
        src:url("fonts/08ef29ed-79a2-43ce-91b2-7852ccf12eae.eot?#iefix");
        src:url("fonts/08ef29ed-79a2-43ce-91b2-7852ccf12eae.eot?#iefix") format("eot"),url("fonts/398eaadc-f600-435f-9cec-097ff3d30776.woff2") format("woff2"),url("fonts/c253d506-67cc-4414-91f4-0d69a6f0403c.woff") format("woff"),url("fonts/68f62060-2b4f-4777-bc34-eae00be12329.ttf") format("truetype"),url("fonts/a240ff8f-8aad-4a4f-b721-c333ff504441.svg#a240ff8f-8aad-4a4f-b721-c333ff504441") format("svg");
    }
    @font-face{
        font-family:"LiebeErika W01 Medium";
        src:url("fonts/53664206-9131-49b6-98a9-09b2af3ce8b7.eot?#iefix");
        src:url("fonts/53664206-9131-49b6-98a9-09b2af3ce8b7.eot?#iefix") format("eot"),url("fonts/df4260dc-adf9-4264-bbda-d116474595b3.woff2") format("woff2"),url("fonts/74fcc3b4-1ecb-46c1-a4f7-3126a93013dc.woff") format("woff"),url("fonts/89921b51-49cd-4e1f-ba50-97ebf1b8b183.ttf") format("truetype"),url("fonts/78d27f06-9ced-4275-aedd-7eb42e24a1e6.svg#78d27f06-9ced-4275-aedd-7eb42e24a1e6") format("svg");
    }
    @font-face{
        font-family:"LiebeErika W01 Bold";
        src:url("fonts/6ffc3a05-2cc2-48cb-81d8-9480a8eb671d.eot?#iefix");
        src:url("fonts/6ffc3a05-2cc2-48cb-81d8-9480a8eb671d.eot?#iefix") format("eot"),url("fonts/d18ef016-91d0-4c02-ae06-0b15e75a9f5e.woff2") format("woff2"),url("fonts/a7774d68-9938-46d6-8bce-2786f9ad2966.woff") format("woff"),url("fonts/da54b3fc-d17e-4d2e-a14a-6b71368c3341.ttf") format("truetype"),url("fonts/b8421e34-ed55-4b6c-b972-b340b5e7c793.svg#b8421e34-ed55-4b6c-b972-b340b5e7c793") format("svg");
    }
    @font-face{
        font-family:"LiebeErika W01 Black";
        src:url("fonts/09461ed2-204a-4a6b-9306-3124715f30ec.eot?#iefix");
        src:url("fonts/09461ed2-204a-4a6b-9306-3124715f30ec.eot?#iefix") format("eot"),url("fonts/6c7ec21d-526a-4378-b386-6d8d510e8bfe.woff2") format("woff2"),url("fonts/a227969d-463c-41c2-8a2e-47a3710b300d.woff") format("woff"),url("fonts/c123360a-168e-44ed-b6cf-3e55b2d3cdbf.ttf") format("truetype"),url("fonts/a3a46133-8f0f-45b2-9fe6-8136eb43c524.svg#a3a46133-8f0f-45b2-9fe6-8136eb43c524") format("svg");
    }


  li.lang-item {display: none}
  
  .fancybox-close {
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    color:rgba(0, 0, 0, 0) !important;
}
  
* { box-sizing: border-box; }

body {
    font-family: "AvenirNextLTW02-Regular",Helvetica,Arial,sans-serif;
    font-weight: normal;
    font-size: 18px;
    line-height: 30px;
    color: #000;
    background-color: #fff;
    animation: fadein 2s;
    -moz-animation: fadein 1s; /* Firefox */
    -webkit-animation: fadein 1s; /* Safari and Chrome */
    -o-animation: fadein 1s; /* Opera */
}

video {
  filter: saturate(100%);
  -webkit-filter: saturate(100%);
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
  
.margin-top-50 {
    margin-top: 50px;
}

a:focus {
    outline: 0px solid rgba(51, 51, 51, 0.3);
}

.page {
    z-index: 0;
    background: #FFEDED;
}

::-moz-selection { /* Code for Firefox */
    color: #fff;
    background: #C03;
}

::selection {
    color: #fff;
    background: #C03;
}

/*================ Mobile Nav ========================*/
img.logo-mobile {
    display: none;
    }

/*=======Mobile-Nav========*/
    
#site-navigation-mobile {
  display: none;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 99999;
  padding: 0;
  height: 50px;
}
#site-navigation-mobile div.content {
  display: none;
  height: 100vh;
  background-color: #000;
}
#site-navigation-mobile button {
  position: absolute;
  top: 9px;
    right: 7px;
  border: 0;
  text-indent: 200%;
  overflow: hidden;
  background: rgba(255,255,255,0) url("img/burger.png") center no-repeat;
  background-size: 80%;
  width: 30px;
  height: 30px;
  outline: none;
  -webkit-transition: all 400ms ease;
  transition: all 400ms ease;
}
#site-navigation-mobile button.expanded {
  background: rgba(255,255,255,0) url("img/burger-close.png") center no-repeat;
  background-size: 80%;
  width: 30px;
  height: 30px;
}
#site-navigation-mobile a.home-button {
  display: block;
  width: 214px;
  padding: 11px 10px 6px;
}

.nav-mobile li {
    float: none;
    text-align: center;
}

.nav-mobile .inner-nav {
    width: 100%
}

.nav-mobile .inner-nav a{
    font-size: 22px;
}

.nav-mobile .inner-nav a.tld-link::after {
    content: '';
    display: block;
    height: 1px;
    opacity: 0;
    background: #fff;
    transition: opacity .2s ease, background-color .2s ease;
}

.nav-mobile .inner-nav a.tld-link.active {
    text-decoration: underline;
}

.nav-mobile .row {
    height: 100vh;
}

.nav-mobile .row .box{
    margin-top: -50px;
}
/* ======================================== TYPO ======================================== */
.txtCasePreview small {
    font-size: 20px;
    line-height: 30px;
    }

h1, h2, h3, h4, h5, h6 {
    color: #000;
    font-weight: 400;
}

h1 {
    font-size: 56px;
    line-height: 60px;
}


h2 {
    font-family: "Mercury Display A", "Mercury Display B";
    font-size: 47px;
    line-height: 57px;
    
}

.referenzUnterSeiteSection1 .box h2, .agenturSeiteSection2 .box h2, .intro-text .box h2 {
    font-size: 47px;
    line-height: 57px;
}

.referenzUnterSeiteSection1 .box h2:after, .agenturSeiteSection2 .box h2:after, .intro-text .box h2:after {
    display: none;
}

.box h2.noUnderline:after {
    display: none;
}

h3 {
    /*font-family: "AvenirNextLTW02-Regular",Helvetica,Arial,sans-serif;*/
    /*font-family:'Avenir LT W01 95 Black',Helvetica,Arial,sans-serif;*/
    /*font-family:'Avenir Next LT W04 Bold',Helvetica,Arial,sans-serif;*/
    /*font-family:'Avenir Next LT W02SC Demi',Helvetica,Arial,sans-serif;*/
    font-family:'Avenir LT W01_85 Heavy1475544',Helvetica,Arial,sans-serif;
    font-size: 24px;
    line-height: 31px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

h4 {
    font-family: "Mercury Display A", "Mercury Display B";
    font-size: 47px;
    line-height: 57px;
}

p {
    margin-bottom: 15px;
    font-size: 22px;
    line-height: 35px;
}

li {
    margin-bottom: 15px;
    font-size: 22px;
    line-height: 35px;
}

ul {
    margin-left: 22px;
}

.box, .box-first, .box-large, .box-nested, .box-row {
    color: #000;
}

strong {
    font-family:'Avenir LT W01_85 Heavy1475544',Helvetica,Arial,sans-serif;
    font-weight: normal;
}

p.small {
    font-size: 15px;
    line-height: 25px;
}

p.tld-tag a {
    font-size: 14px;
    text-transform: uppercase;
    border: 1px solid;
    line-height: 15px;
    padding: 5px 8px;
    margin-right: 15px;
    letter-spacing: 1px;
    font-family: "AvenirNextLTW02-Regular",Helvetica,Arial,sans-serif;
    text-decoration: none;
    transition: all 0.3s;
}

p.tld-tag a:hover {
   text-decoration: none;
   color: #fff;
   background-color: #000;
}

p.small-serif {
    /*font-family: "Mercury Display A", "Mercury Display B";*/
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    text-transform: uppercase;
    margin-bottom: 4px;
    letter-spacing: 1px;
}

p:empty{
    display: none;
}


a {
    display: inline-block;
    color: #fff;
}
	a:hover,
	a:focus  {
	    color: #fff;
	}


.single .site-content a,
.wrapperArchivJobs .content a:hover {
    text-decoration: underline;
}

.intro-text a,
.wrapperArchivJobs .content a {
    color: #000;
    }


a.tld-link:after {
    content: '';
    display: block;
    height: 1px;
    opacity: 0;
    background: #fff;
    transition: opacity .2s ease, background-color .2s ease;
}

a.tld-link:hover:after {
    opacity: 1;
    background: #fff;
}

.main-nav-Referenzen.active:after, .main-nav-Team.active:after, .main-nav-Kontakt.active:after, .main-nav-Kompetenzen.active:after {
    opacity: 1;
    background: #fff;
}

.entry-title {
    font-size: 7vw;
}

.box.white h1, .box.white h2, .box.white h3, .box.white p, .box.white a, .box.white a:hover{
    color: #fff;
}

.box.black h1, .box.black h2, .box.black h3, .box.black p, .box.black a, .box.black a:hover{
    color: #000;
}

.wp-caption-text {
    color: #000;
    font-family: "AvenirNextLTW02-Regular",Helvetica,Arial,sans-serif;
    color: #000;
}

.box.initial a {
    color: #000;
}

/* Erster Buchstabe innerhalb eines p Tag als Initial ueber 3 Zeilen 
.dropCaps p:first-child:first-letter {
	float: left; 
	font-size: 120px;
	line-height: 50px;
	margin: 10px 5px 0px 0px;
}
*/

/* Unterschrich fuer h2-Ueberschriften bei Cases, Agentur-, Kontakt-Seite*/
.centerBox.unterstrich,
.centerBox.unterstrichBlack {
    padding-bottom: 50px;
}
	.unterstrich h2:after {
		    content: '';
		    display: block;
		    background: #fff;
		    height: 3px;
		    max-width: 30px;
		    width: 100%;
		    margin: 15px auto;
		}
	.unterstrichBlack h2:after {
		    content: '';
		    display: block;
		    background: #000;
		    height: 3px;
		    max-width: 30px;
		    width: 100%;
		    margin: 15px auto;
		}
	.unterstrich h3:after {
		    content: '';
		    display: block;
		    background: #fff;
		    height: 3px;
		    max-width: 30px;
		    width: 100%;
		    margin: 15px auto;
		}
	.unterstrichBlack h3:after {
		    content: '';
		    display: block;
		    background: #000;
		    height: 3px;
		    max-width: 30px;
		    width: 100%;
		    margin: 15px auto;
		}
/* ======================================== Container, Wrapper ======================================== */
body .wrapper{
	background-color: #fff;
}

.content {
    max-width: 1400px;
    margin: 0 auto;
}

.wrapperStandardPage .content {
    max-width: 800px;
    margin: 0 auto;
}

div.section {
    padding: 100px 0 75px;
    /*background-position: top center;*/
}

.wrapperReferenzenUnterSeite section,
.wrapperAgentur section,
.wrapperKontakt section,
.wrapperTeam section,
.wrapperLeistungen section,
.wrapperStartseite section,
.wrapperArchivJobs section{
	padding-top: 100px;
	padding-bottom: 75px;
}

.wrapperAgentur .centered-box {
    position: relative;
    transform: translate(0px, 0%);
}
	.wrapperAgentur .centered-box h1,
	.wrapperAgentur .centered-box h3 {
	    color: #000;
	}

/* ======================================== Hilfsklassen ======================================== */

.centerBox{
	text-align: center;
}

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.hidden{
	display: none;
}

/* ======================================== Sonstiges ======================================== */

/* Dient zur Verschleierung der Email-Adressen */
.email > ins:before {content: "@"; text-decoration: none}
.email ins, .email del {text-decoration: none}
.email > del {display: none}


/* ======================================== Header - Image ======================================== */
.header-img h1:after,
.header-section h1:after,
.video-wrap h1:after, .centered-box h1:after {
    content: '';
    display: block;
    background: #fff;
    height: 3px;
    max-width: 30px;
    width: 100%;
    margin: 20px auto 33px auto;
}

/* in der mobile-Ansicht wird das TLD-Logo gegen reinen Text ausgetauscht */
.frontpage-img-ersatz{
	display: none;
}


/* ======================================== NAVIGATION ======================================== */
nav .content {
    margin: 0 auto;
}

.home nav{
    width: 100%;
    z-index: 100;
    background-color: #c14817; /* Originalfarbe: #000, jh */
    position: absolute;
    bottom: 0;
    padding-right: 2rem;
    padding-left: 2rem;
    padding-top: 10px;
    padding-bottom: 10px;
}

nav{
    width: 100%;
    background-color: #c14817; /* Originalfarbe #000, jh */
    position: relative;
    padding-right: 2rem;
    padding-left: 2rem;
    padding-top: 10px;
    padding-bottom: 10px;
    z-index: 9999;
}

.sprachswitch {
    float: right;
}


nav ul.meta a{
    font-size: 12px;
    text-transform: uppercase;
}

img.logo{
    width: 298px;
    height: auto;
    margin-bottom: -18px;
}

nav li
{
    float: left;
    padding-left: 25px;
}

nav ul {
    float: left;
}

.main-navigation ul, .main-navigation li {
    border: none
}

.main-navigation ul, .main-navigation li a:focus{
    color: #fff;
}

.next-outer, .prev-outer {
    position: fixed;
    width: 110px;
    z-index: 10;
}

.next-outer {
	left: auto !important;
	right: 0px !important;
}

.prev-outer {
	left: 0px !important;
	right: auto !important;
}

.next-outer.leistungsbereich .next-inner, .prev-outer.leistungsbereich .prev-inner  {
    padding-bottom: 30px;
}

.prev-outer.leistungsbereich .prev-inner  {
    margin-left: -30px;
}

.next-inner, .prev-inner {
    height: 59vh;
    width: auto;
    position: relative;
	padding-bottom: 20px;
}



.next-inner .case-link {
   text-align: right;
   transform: rotate(90deg);
}

.next-inner .case-link a, .prev-inner .case-link a {
   /* width: 60px;
    height: 118px;
    background-size: 60px auto; */
	width: auto;
	height: auto;
	text-align: center;
	text-decoration: underline;
	letter-spacing: 1px;
	font-size: 15px;
	line-height: 21px;
}

.prev-inner .case-link a {
    /* background-image: url('img/assets/prev_projekt_de_black_60x118.png');*/
    margin-left: 20px; 
	color: #000;
	transform: rotate(270deg);
}

.next-inner .case-link a {
    /* background-image: url('img/assets/next_projekt_de_black_60x118.png');
    margin-right: 20px; */
	color: #000;

}

.midnightHeader.white .prev-inner .case-link a{
    /* background-image: url('img/assets/prev_projekt_de_white_60x118.png');
    margin-left: 20px; */
	color: #fff;
}

.midnightHeader.white .next-inner .case-link a{
    /* background-image: url('img/assets/next_projekt_de_white_60x118.png');
    margin-right: 20px; */
	color: #fff;
}


/* === vor-zurueck-buttons fuer mobile === */
.next-preview-mobile{
	text-align: center;
	display: none;			/* breakpoint bei 1280px */
}
.next-preview-mobile a{
	color: #000;
	letter-spacing: 1px;
	font-size: 15px;
	line-height: 21px;
}

.case-study-wrap .next-preview-mobile a{
	color: #fff;
}


/* ======================================== MASONRY-GRID ======================================== */

#ajax-load-more {
    margin-right: 20px;
    margin-left: 20px;
}

.item{
    position: relative;
}

.item a{
    position: relative;
    max-width: 100%;
}

	.item a img{
    	/*transition: all 0.5s;*/
	}
	
	.item a:hover img{
    	/*filter: brightness(1.2);*/
    	/*-webkit-filter: grayscale(1);
    	filter: grayscale(1);
    	transition: all 0.5s;*/
	}

.item a.hochformat{
    max-width: 60%;
}

.item p.small {
    position: absolute;
    background-color: #000;
    color: #fff;
    padding: 5px 10px;
    right: 0;
    z-index: 5;
}

.item p.small a:hover{
	text-decoration: underline;
}


.item p.date{
    font-size: 19px;
    line-height: 23px;
    margin-top: 38px;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.item p.spitzmarke{
     font-size: 19px;
     line-height: 23px;
     margin-top: 20px;
     text-transform: uppercase;
     letter-spacing: 2px;
     margin-bottom: 10px;
}

.home .item p.spitzmarke{
    color: #000;
}

.home .item p.date{
    color: #000;
}

.item h2{
    font-size: 47px;
    line-height: 57px;
}

.item h2::after{
    content: '';
    display: block;
    background: black;
    height: 3px;
    max-width: 25px;
    width: 100%;
    margin-top: 15px;
}

.item-text-box h2::after{
    content: '';
    display: none;
}

.item .txtCasePreview{
	line-height: 25px;
	padding-top: 10px;
}
	.wrapperStartseite .item .txtCasePreview small, .wrapperStartseite .item p.tld-tag a{
		color: #000;
		border-color: #7A7A7A;
	}
	.wrapperStartseite .item p.tld-tag a:hover {
	    background-color: #000;
	    color: #fff;
	    border-color: #000;
	}

.alm-reveal{
    height: 100%;
}

/* clear fix */
.alm-reveal:after {
  content: '';
  display: block;
  clear: both;
}

.item-sizer {
    width: 46%;
}

.gutter-sizer {
    width: 8%;
}

.item-outer {
    width: 46%;
    margin: 50px 0;
}

.item-full-width {
    width: 100%;
}

.item-news {
    margin: 60px 15% 0;
}

.item-text-box {
     padding: 25px;
}

.item-text-box h2, .item-text-box p{
    font-family:'LiebeErika W01 Regular';
    font-size: 50px;
    color: rgb(233, 28, 29);
    text-transform: uppercase;
    margin-top: 20px;
    line-height: 55px;
}

.item-text-box p.date{
    margin-top: 20px;
}

.item-text-box a{
    color: rgb(233, 28, 29);
    text-transform: uppercase;
    text-decoration: underline;
}

.wrapperArchiv .item-text-box {
     padding: 25px;
     border-color: #fff !important;
}

.wrapperArchiv .item-text-box h2,.wrapperArchiv .item-text-box p{
    font-family:'LiebeErika W01 Regular';
    font-size: 50px;
    color: #fff !important;
    text-transform: uppercase;
    margin-top: 20px;
    line-height: 55px;
}

.wrapperArchiv .item-text-box p.date{
    margin-top: 20px;
    font-size: 19px;
}

.wrapperArchiv .item-text-box a{
    color: #fff  !important;
    text-transform: uppercase;
}
.wrapperArchiv .item-text-box a:hover{
    color: #000  !important;
}


.item-text-box p.date{
    font-family: "AvenirNextLTW02-Regular",Helvetica,Arial,sans-serif;
}

.btn-load-more {
    font-family: "AvenirNextLTW02-Regular",Helvetica,Arial,sans-serif;
    background-color: rgba(0,0,0,0);
    color: #000;
    font-size: 36px;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    text-decoration: underline;
    text-transform: none;
    font-weight: normal;
}


.btn-load-more:after {
    width: 0px;
    display: inline-block;
    z-index: 0;
    content: '';
}

.btn-load-more.loading:after {
   background-image: url('img/loading_white.gif');
    height: 56px;
    width: 50px;
    text-decoration: none;
    margin: 0;
    display: inline-block;
    z-index: 0;
    content: '\00a0\00a0\00a0\00a0';
    left: 0;
    top: 0;
    overflow: hidden;
    -webkit-transition: width 0.25s ease-in-out;
    -moz-transition: width 0.2s ease-in-out;
    transition: width 0.2s ease-in-out;
    background-size: 50px;
    margin-bottom: -14px;
}

.done {
    opacity: 0.2;
}
        
.btn-load-more:hover {
    background-color: rgba(0,0,0,0);
}

#shortcode_output {
    padding-bottom: 200px;
}

.alm-btn-wrap {
    text-align: center;
    overflow: hidden;
    display: block;
    position: absolute;
    bottom: -140px;
    padding: 0;
    margin: 0;
    width: 100%;
}

/* ===== Sonderfall: Hilfskategorien  ===== */

.item-outer .hilfs-beitrag a{
	text-decoration: underline;
}
.item-outer .hilfs-beitrag h2{
	color: #fff;
}
.hilfs-beitrag h2::after {
    content: '';
    display: block;
    background: black;
    height: 0px;
    max-width: 0px;
    width: 100%;
    margin-top: 15px;
}




/* ======================================== Single Work ======================================== */
.row {margin-bottom: 20px;}
.video-wrap {
    height: 35vw;
    position: relative;
    z-index: 0;
}

#video_background {
    height: 35vw;
    margin: 0 auto;
    	position: absolute;
	top: 0px;
	right: 0px;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -1000;
	overflow: hidden;
        transform: translateX(-50%) translateY(-50%);
    left: 50%;
    top: 50%;
    background-color: #000;   
}

#video_background.team-video {
    transform: translateX(-50%) translateY(-55%);
}

.header-section{
    height: 35vw;
    background: #763BA5;
}

.abdunkler {
    background-color: rgba(0,0,0,0); /* Original-Opazität an 4. Stelle 0.4, jh */
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 35vw;
}

.header-img {
    height: 35vw;
    z-index: 0;
    position: relative;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.centered-box {
    position: relative;
    transform: translate(0px, -50%);
    top: 50%;
    text-align: center;
}

.centered-box h3, .centered-box h4{
    color: #fff;
}

.centered-box h4{
    margin-top: 13px;
}

.centered-box h4:after{
    content: '';
    display: block;
    background: #fff;
    height: 3px;
    max-width: 30px;
    width: 100%;
    margin: 33px auto;
}



.centered-box h1{
    font-size: 47px;
    line-height: 57px;
    font-family: "Mercury Display A", "Mercury Display B";
    font-style: normal;
    font-weight: 400;
    line-height: 70px;
    color: #fff;
}

.single-post .bild{
	text-align: center;
}

.bild img {
    margin: 100px auto;
}

/*.single .box.initial p:nth-child(1):first-letter {
float: left; 
color: #000;
font-size: 75px;
line-height: 50px;
padding: 10px 5px 0px 0px;
}
*/
.SinglePostKategorie div + div{
	padding-top: 10px;
}

.box.SinglePostKategorie {
    width: 80%
}

.single .site-content .SinglePostKategorie a {
    text-decoration: none;
    color: #000;
    font-size: 14px;
    text-transform: uppercase;
    border: 1px solid;
    border-color: #7A7A7A;
    line-height: 15px;
    padding: 5px 8px;
    margin-right: 15px;
    letter-spacing: 1px;
    font-family: "AvenirNextLTW02-Regular",Helvetica,Arial,sans-serif;
    margin-bottom: 15px;
    transition: all 0.3s;
}

.single .site-content .SinglePostKategorie a:hover {
    background-color: #000;
    color: #fff;
    border-color: #000;
}

/* ======================================== Single Case-Study ======================================== */

.over-content {
    margin-left: -180px;
    margin-right: -180px;
    z-index: 10;
}

.over-content-right {
    margin-right: -180px;
    z-index: 10;
}

.over-content-left {
    margin-left: -180px;
    z-index: 10;
}

.box h1, .box h2 {
    color: inherit;
}

.box h1 {
    font-size: 24px;
    line-height: 31px;
    font-family:'Avenir LT W01_85 Heavy1475544',Helvetica,Arial,sans-serif;
    margin-bottom: 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    
}

.box h2 {
    font-size: 47px;
    line-height: 57px;
}

.box h2:after {
    content: '';
    display: block;
    background: #fff;
    height: 3px;
    max-width: 30px;
    width: 100%;
    margin: 20px auto 33px auto;
}

.box.black h2:after {
    background: #000;
}

.intro-text h2 {
    line-height: 50px;
}
.centered-box h2 {
    color: #fff;
}

.case-footer-fakt {
    text-align: center;
    
}
.case-footer-fakt p{
    font-size: 15px;
    line-height: 25px;
}


.case-footer-fakt h2{
    font-size: 70px;
    line-height: 80px;
}

.case-footer-fakt h2::after {
    content: '';
    display: block;
    height: 3px;
    max-width: 30px;
    width: 100%;
    margin: 27px auto 21px auto;
}

.case-footer-fakt.black h2::after {
    background-color: #000;
}

.case-footer-fakt.white h2::after {
    background-color: #fff;
}

.case-footer-fakt.black h2 {
    color: #000;
}

.case-footer-fakt.white h2 {
    color: #fff;
}

.case-footer-fakt-inner {
    float: right;
}

.SinglePostKategorie.white {
    color: #fff;
}

.single .site-content .SinglePostKategorie.white a{
    color: #fff;
    border-color: #fff;
}

.single .site-content .SinglePostKategorie.white a:hover {
    border-color: #fff;
    background-color: #fff;
    color: #000
}

.case-footer .btn-load-more {
    margin-top: 100px;
    margin-bottom: 100px;
}

.case-footer-testimonial .white h2 {
    color: #fff;
}

.case-footer-testimonial .white p {
    color: #fff;
}

.case-footer-testimonial .black h2 {
    color: #000;
}

.case-footer-testimonial .black p {
    color: #000;
}

.case-footer-testimonial p {
    margin: 25px 0 50px;
}

/* ======================================== OWL-Slider ======================================== */

.owl-section {
    padding: 125px 0;
    background-color: #000;
}

.owl-section.white .owl-wrapper .owl-carousel .owl-controls .owl-dots .owl-dot span{ 
    background-color: #fff;
}

.owl-section.black .owl-wrapper .owl-carousel .owl-controls .owl-dots .owl-dot span{ 
    background-color: #000;
}

.owl-wrapper {
	position: relative;
	margin-top: 250px;
}
 
 .owl-item {
	opacity: 0.5;
	margin-top: 30px;
        transition: all 0.5s;
 }
  .owl-item.active {
	opacity: 0.5;
        transition: all 0.5s;
 }
 
   .owl-item.active.center {
	opacity: 1;
        transition: all 0.5s;
 }
 
 .owl-wrapper {
    margin: 0 auto;
}
 .ipad-mocki {
	position: absolute;
        top: 0px;
        left: 50%;
        z-index: 0;
        border: 30px solid #000;
        border-radius: 21px;
}
 .ipad-mocki-abdecker-left {
	position: absolute;
	top: 0px;
	left: 50%;
	z-index: 9;
	width: 1px;
	border-left: 30px solid #000;
	margin-top: 30px;
}
 
 .ipad-mocki-abdecker-right {
	position: absolute;
	top: 0px;
	left: 50%;
	z-index: 9;
	width: 1px;
	border-left: 30px solid #000;
	margin-top: 30px;
}
 
 .owl-dots .owl-dot {
    display: inline-block;
}

.owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 5px 7px;
    display: block;
    -webkit-backface-visibility: visible;
    -webkit-transition: opacity 200ms ease;
    -moz-transition: opacity 200ms ease;
    -ms-transition: opacity 200ms ease;
    -o-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

.owl-carousel .owl-controls .owl-nav .owl-prev {
    border: 0px solid red;
    position: absolute;
    width: 30%;
    height: 100%;
    top: 0px;
}

.owl-carousel .owl-controls .owl-nav .owl-next {
    border: 0px solid green;
    position: absolute;
    width: 30%;
    height: 100%;
    top: 0px;
    right: 0;
}

.owl-theme .owl-dots .owl-dot.active span {
        opacity: 0.5;
}


.owl-theme .owl-controls {
    margin-top: 90px !important;
    text-align: center;
}



/* ======================================== FOOTER ======================================== */
.site-footer .box {
    color: #fff;
}

.site-footer .content {
    margin: 50px auto;
}

.scrollToTop{
	width:60px; 
	height:60px;
	padding: 13px 5px 10px 10px; 
	text-align:center; 
	background: whiteSmoke;
	font-weight: normal;
	color: #444;
	text-decoration: none;
	position:fixed;
	bottom: 42px;
	right:24px;
	display:none;
	background-color: #000;
	z-index: 10;
}
.scrollToTop:hover{
	text-decoration:none;
}

.site-footer {
    background-color: #000; /* Originalfarbe #474747, JH */
}

.footer-logo {
    width: 40px;
    height: auto;
    position: absolute;
    left: 50%;
    z-index: 99999;
    margin-left: -750px;
    margin-top: 64px;
}

.site-footer .footer-tld-name{
	letter-spacing: 2px;
}


.site-footer a{
    color: #fff;
}

.site-footer input{
    background-color: rgb(71, 71, 71);
    border-bottom: 1px solid rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    font-size: 15px;
    padding: 5px 0 5px 0;
    font-family: "AvenirNextLTW02-Regular",Helvetica,Arial,sans-serif;
    width: 95%;
}

.site-footer input::-webkit-input-placeholder {
   color: #b3b3b3;
   font-size: 15px;
}

.site-footer input:-moz-placeholder { /* Firefox 18- */
   color: #b3b3b3;
   font-size: 15px;
   font-family: "AvenirNextLTW02-Regular",Helvetica,Arial,sans-serif;
}

.site-footer input::-moz-placeholder {  /* Firefox 19+ */
   color: #b3b3b3;
   font-size: 15px;
   font-family: "AvenirNextLTW02-Regular",Helvetica,Arial,sans-serif;
}

.site-footer input:-ms-input-placeholder {  
   color: #b3b3b3;
   font-size: 15px;
   font-family: "AvenirNextLTW02-Regular",Helvetica,Arial,sans-serif;
}

img.footer-logo-02 {
    width: 215px;
    height: auto;
    margin-top: -4px;
}

.site-footer .linkFooter{
	margin-bottom: 5px;
}

.tld-link2:hover {
    text-decoration: underline;
}

.socialNav a.tld-link:after {
    content: '\00a0\00a0|';
    display: inherit;
    height: 0px;
    width: 1px;
    color: #fff;
    opacity: 1;
}

.socialNav a.tld-link:last-child:after {
    opacity: 0;
}

.socialNav a.tld-link:hover {
    text-decoration: underline;
}

/* ==================== socialNav ===================*/

.site-footer .socialNav  a {
    margin: 0px 10px;
}
.site-footer .socialNav a:first-child {
    margin: 0px 0px;
    margin-right: 10px;
}

/* ==================== Newsletter ===================*/

footer form.cr_form input{
	width: 67%;
	float: left;
}

/* Submit-Button */
footer form.cr_form .cr_button{
	width: 30%;
	float: left;
	margin-left: 3%;
	font-size: 15px;
	font-weight: normal;
	font-family: "AvenirNextLTW02-Regular",Helvetica,Arial,sans-serif;
	padding: 6px 6px;
	background-color: #000;
	text-transform: none;
}
	footer form.cr_form .cr_button:hover,
	footer form.cr_form .cr_button:focus{
		background-color: #000;
	}


/* ======================================== FRONTPAGE ======================================== */

body.home {
    background-color: #000;
}

body.home .wrapper {
    background-color: #FFEDED;
}


body.home .btn-load-more {
    color: #000;
}

body.home .btn-load-more.loading:after {
   background-image: url('img/loading.gif');
}

.frontpage-img {
    width: 573px;
    height: auto;
    margin-right: 25px;
    margin-top: -7px;
}

.frontpage-text {
    max-width: 1400px;
    margin-top: -100px;
    z-index: 5;
}

.frontpage-text a {
    display: inline-block;
    position: relative;
    padding-bottom: 0px;
    color: #fff;
    border-bottom: 2px solid white;
}

.frontpage-text a:hover {
    color: #fff;
}

body.home .centerBox.unterstrichBlack h2:after{
    content: '';
    display: block;
    background: #000;
    height: 3px;
    max-width: 30px;
    width: 100%;
    margin: 15px auto;
}

body.home .centerBox.unterstrichBlack h3:after{
    display: none;
}

body.home .centerBox.unterstrich h2:after{
    content: '';
    display: block;
    background: #fff;
    height: 3px;
    max-width: 30px;
    width: 100%;
    margin: 15px auto;
}

body.home .centerBox.unterstrich h3:after{
    display: none;
}

.wrapperArchivJobs .centerBox.unterstrich h3:after{
    display: none;
}

.wrapperArchivJobs .centerBox.unterstrich h2:after{
    content: '';
    display: block;
    background: #fff;
    height: 3px;
    max-width: 30px;
    width: 100%;
    margin: 15px auto;
    margin-bottom: 50px;
}

.startsection p.small {
    color: #fff;
    margin-top: 6%;
    letter-spacing: 1px;
}

.startsection {
    height: 100vh;
    width: 100%;
    /* background-image: url('img/bg.jpg'); */
    background-color: #c14817; /* Originalfarbe #000; jh */
    background-position: 50% 0px;
}

.startsection-bg {
    position: absolute;
    height: 100%;
    width: 100%;
    background-position: 50% 0px;
    opacity: 0;
    -webkit-background-size: cover;
    background-size: cover;
}

.startsection h1{
    color: #fff;
    font-size: 56px;
    text-align: left;
    line-height: 71px;
    font-family: "AvenirNextLTW02-Regular",Helvetica,Arial,sans-serif;
    font-weight: normal;
    text-transform: none;
    letter-spacing: 0;
}

a.scroll-down {
    border-bottom: 0;
    cursor: pointer;
}

a.scroll-down:hover {
    text-decoration: underline;
}

.startsection .row {
    position: absolute;
    height: 100%;
    width: 100%
}

.alm-listing li img {
    position: relative;
    left: 0px;
    top: 0px;
    border-radius: 3px;
}

.abdunkler-frontpage {
    background-color: rgba(0,0,0,0); /* Original-Opazität an 4. Stelle 0.6, jh */
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

#logo-container {
  position: relative;
  height: 260px;
  width: 100%;
  overflow: hidden;
  margin-top: -80px;
}

#logo-container-inner { width: 100% }

.top { top: 0px; }

.bottom { bottom: 0px; }

.left { left: 0px; }

.right { right: 0px; }

.logo-slide {
  width: 260px;
  height: 260px;
  font-size: 50px;
  color: #fff;
  padding: 0 20px;
  line-height: 260px;
}

.toLeft { float: left; }

/* ========== Instagram-Grid ========== */

#sb_instagram #sbi_images .sbi_item {
    border: 3px solid #fff;
}

/* ========== "Unsere Leistungen" ========== */
.agenturSeiteSection2{
	padding-top: 50px;
	padding-bottom: 100px;
	background-color: #212121;	/* Anthrazit */
}

	.agenturSeiteSection2 .box,
	.agenturSeiteSection2 h3,
	.agenturSeiteSection2 h2,
	.agenturSeiteSection2 h4{
		color: #fff;
	}

.agenturSeiteSection2 .agenturLeistungen .box {
	background-repeat: no-repeat;
	background-size: cover;	/* bildschirmfuellend */
	height: 400px;
}

/* === Grid === */
.agenturLeistungen .col-md-6{
	padding-right: 15px;
	padding-left: 15px;
	padding-bottom: 30px;
}

.agenturLeistungen h3{
	padding-top: 165px;
}
	.agenturLeistungen h3:after {
	    content: '';
	    display: block;
	    background: #fff;
	    height: 3px;
	    max-width: 30px;
	    width: 100%;
	    margin: 15px auto;
	}

/* ========== "Instagram" ========== */
.agenturSeiteInstragram{
	background-color: #000;
	padding-bottom: 100px !important;
}

/* ========== "Auftraggeber" ========== */
.agenturSeiteSection4{
	padding-top: 50px;
	padding-bottom: 100px;
	background-color: #c14817;	/* grapefruit Originalfarbe: #EC4D52, jh */
}
	.agenturSeiteSection4 .box,
	.agenturSeiteSection4 h3,
	.agenturSeiteSection4 h2,
	.agenturSeiteSection4 h4{
		color: #fff;
	}
	
/* ===== owl-Slider ===== */

#owl-auftraggeber .owl-item{
	margin-top: 0px;
}

#owl-auftraggeber .owl-item{
	opacity: 1;
}
/* ========== "Awwards" ========== */
.agenturSeiteSection5 {
	background: url('https://tomleiferdesign.de/wp-content/uploads/2016/07/awwards_bg2.jpg');
	color: #fff; /* Originalfarbe #fff, wiederhergestellt,  jh */
	list-style: none;
	background-size: 100%;
	padding: 150px 0 !important;
}
.agenturSeiteSection5 h2 {
    color: #fff;
}
.agenturSeiteSection5 .content {
    max-width: 860px;
    text-align: center;
}

/* ========== "Jobs" ========== */	
.agenturSeiteSection6 a{
	color: #000;
	text-decoration: underline;
	list-style: none;
}




/* ======================================== Leistungen-Seiten ======================================== */



/* ===== Image-Overlay ===== */

.overlayoneLeistungen a{
	width: 100%;
}

.overlayoneLeistungen:hover h3{
	display: none;
}

/* kleine Bilder */
.overlayoneLeistungen{
    width: 100%;
    height: 228px;
    display: inline-block;
    position: relative;
}
    
.overlayinnLeistungen{
    background-color: rgba(29, 29, 29, 0); /* Original-Opazität an 4. Stelle 0.59, jh */
    height: 100%;
    width: 100%;
    opacity: 0;
    top: 0;
    left: 0;
    position: absolute;
    padding: 50px;
    transition: opacity .5s;
}
	.overlayinnLeistungen:hover {
	    opacity: 1;
	    transition: opacity .5s;
	}



	
/* ======================================== Referenz-Unter-Seiten ======================================== */
/* Also cd, ed, id sb */

.referenzUnterSeiteSection2{
	background-color: #212121;  /* Anthrazit */
	color: #fff;
}

.referenzUnterSeiteSection2 h2,
.btn-load-more{
	color: #fff;
}

.referenzUnterSeiteSection2 .item h2::after {
    background: #fff;
}


/* ======================================== Team -Seite ======================================== */
.teamBoxContenthover h3{
    letter-spacing: 0;
    text-transform: none;
}

.agenturSeiteSection3 .teamBilder{
	padding-top: 50px;
}


.teamGrid{
	max-width: 1400px;
	margin: 0 auto;
}
	.teamGrid .box{
		padding: 0rem 1rem 30px 1rem ;	
	}
	.teamGrid .box div + div{
		margin-top: 30px;
	}

.teamBox .teamBoxContenthover {
	padding: 25px 20px 10px 20px;
}

.teamBox .teamBoxContenthover,
.teamBox .teamBoxContenthover h3,
.teamBox .teamBoxContenthover h4{
	color: #fff;
}
.teamBox .teamBoxContenthover h3{
	font-size: 25px;
	line-height: 20px;
	font-family: "Mercury Display A", "Mercury Display B";
}
.teamBox .teamBoxContenthover h4{
	font-size: 20px;
	font-family: "AvenirNextLTW02-Regular",Helvetica,Arial,sans-serif;
	line-height: 36px;
}
.teamBox .teamBoxContenthover h4:after{
	content: '';
    display: block;
    background: #fff;
    height: 3px;
    max-width: 30px;
    width: 100%;
    margin: 8px auto;
    left: 20px;
    position: absolute;
}
.teamBox .teamBoxContenthover p{
	margin-bottom: 0px;
	font-size: 20px !important;
	line-height: 27px;
	margin-top: 25px;
}

/* ===== Image-Overlay ===== */

/* kleine Bilder */
.overlayone{
    max-width: 437px;
    max-height: 281px;
    display: inline-block;
    position: relative;
}
/* mittel grosse Bilder */
.overlayone2{
    max-width: 437px;
    max-height: 600px;
    display: inline-block;
    position: relative;
}
/* grosse Bilder */
.overlayone3{
    max-width: 903px;
    max-height: 591px;
    display: inline-block;
    position: relative;
}
    
.overlayinn{
    background-color: rgba(29, 29, 29, 0.59);
    height: 100%;
    width: 100%;
    opacity: 0;
    top: 0;
    left: 0;
    position: absolute;
    padding: 70px;
    transition: opacity .5s;
}
	.overlayinn:hover {
	    opacity: 1;
	    transition: opacity .5s;
	}

/* ======================================== Kontakt -Seite ======================================== */

/* ===== Header LOGO ===== */
.kontakt-header {
    position: relative;
}


.boxAbsoluteCenter{
	position: absolute;
    left: 50%;
    top: 50%;
    width: 700px;
    height: 150px;
    margin: -75px 0 0 -350px;
    /* sorgt fue die Zentrierung */
}
	.boxAbsoluteCenter .centered-box h3,
	.boxAbsoluteCenter .centered-box h1{
		color: #000;
	}


.kontakt-header .centered-box h1::after {
    background: #000;
}


/* ========== Content ========== */
.kontaktSeiteSection1 address{
	font-style: normal;
}

/* ========== Ansprechpartner/innen ========== */
.anreise {
	margin-top: 50px;
	}
.kontaktSeiteSection2{
	padding-top: 50px;
	padding-bottom: 100px;
	background-color: #212121;	/* Anthrazit */
}
	.kontaktSeiteSection2 .box,
	.kontaktSeiteSection2 h3,
	.kontaktSeiteSection2 h2,
	.kontaktSeiteSection2 h4{
		color: #fff;
	}

.kontaktSeiteSection2 img{
	width: 100%;
}
.kontaktSeiteSection2 .box img{
	max-width: 405px;
}

.kontaktSeiteSection2 .row {
    padding-bottom: 75px;
}
p.kontakt-email-telefon {
    margin-bottom: -7px;
}

.box.kontakt-infos p.small{
    font-size: 18px;
    line-height: 30px;
    position: relative;
}

.box.kontakt-infos h4{
    font-size: 25px;
	line-height: 36px;
}

.box.kontakt-infos p.line-after{
    margin-bottom: 30px;
}

.box.kontakt-infos p.line-after:after{
    content: '';
    display: block;
    background: #fff;
    height: 3px;
    max-width: 30px;
    width: 100%;
    margin: 15px auto;
    left: 0;
    position: absolute;
}


/* ======================================== jobs.html ======================================== */

.wrapperArchivJobs > .content > .row ul{
	list-style-type: none;
}

.wrapperArchivJobs > .content > .row ul li p{
	margin-bottom: 0px;
	font-size: 22px;
	line-height: 45px;
	color: #fff;
}

.wrapperArchivJobs > .content > .row .box p{
	color: #fff;
}
.category-jobs .wrapperArchivJobs > .content > .row .box p,
.category-news .wrapperArchivJobs > .content > .row .box p{
	color: #000 !important;
}
.wrapperArchivJobs > .content > .row .box p {
    color: #fff;
}

.wrapperArchivJobs > .content > .row .box a{
	color: #fff;
	text-decoration: underline;
}
.category-jobs .wrapperArchivJobs > .content > .row .box a,
.category-news .wrapperArchivJobs > .content > .row .box a{
    color: #000;
}

.wrapperArchivJobs > .content > .row ul li p a{
	text-decoration: underline;
	color: #fff;
}

.wrapperArchivJobs > .content > .row p.marginBottomNull{
	margin-bottom: 0px;
}

/* ======================================== Standard-Page (Impressum, Datenschutz, etc.) ======================================== */

.wrapperStandardPage section:first-child{
    padding-top: 100px;
}

.wrapperStandardPage section + section {
    padding-top: 50px;
    padding-bottom: 50px;
}

.wrapperStandardPage h3{
	padding-bottom: 25px;
}

.wrapperStandardPage p{
    font-size: 18px;
    line-height: 30px;

}

.wrapperStandardPage a{
	color: #000;
	text-decoration: underline;
}

/* Datenschutzseite */
.page-id-5259 li {
    margin-bottom: 3px;
    font-size: 18px;
    line-height: 30px;
}

/* ======================================== Allgeimeine Archiv Seiten / Referenz-Seite ======================================== */

.refrenzen-head {
    height: 22vw;
    width: 100%;
    background-image: url('https://tomleiferdesign.de/wp-content/uploads/2016/08/bg_referenzen5.jpg');
    background-size: 100% auto;
}

.refrenzen-head .abdunkler {
    z-index: 0;
    height: 22vw;
    background-color: rgba(0,0,0,0); /* Original-Opazität an 4. Stelle 0.4, jh */
}

.refrenzen-head .unternav-wrap {
   height: 22vw;
    position: relative;
    
}

.refrenzen-head .unternav-wrap .navLeistungsbereichte{
    position: absolute;
    bottom: 177px;
    margin-left: 10px;
}



.refrenzen-head.refernzUnterseite .unternav-wrap .navLeistungsbereichte{
    position: absolute;
    bottom: 84px;
    margin-left: 10px;
}
.page-template-page-referenzen header .header-img,
.archive header .header-img {
	background-color: #EB4E53;	/* Granatapfel-Rot */
}

.page-template-page-referenzen .header-img,
.archive .header-img  {
    height: 333px;	/* alte Angabe height: 17.5vw; */
}



/* ueberschreibt den Wert von .page */
.page-template-page-referenzen,
.archive{
	background-color: #212121;		/* Anthrazit */
}

body .wrapperReferenzen,
body .wrapperArchiv {
    background-color: #212121; 			/* Anthrazit */
    padding-top: 170px;
}

.refernz-h1:after {
    background-color: #fff !important;
}

body .wrapperArchivJournal{
	background-color: #fff;
}

/* ========== Sub-Menu mit den Kategorien ========== */

.archivWrapper .nav {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}
.archivWrapper .nav > li {
  position: relative;
  display: block;
  text-transform: uppercase;
}
.archivWrapper .nav > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}
.archivWrapper .nav > li > a:hover,
.archivWrapper .nav > li > a:focus {
 	text-decoration: underline;
}
.archivWrapper .nav > li.disabled > a {
  color: #777777;
}
.archivWrapper .nav > li.disabled > a:hover,
.archivWrapper .nav > li.disabled > a:focus {
  color: #777777;
  text-decoration: none;
  background-color: transparent;
  cursor: not-allowed;
}
.archivWrapper .nav .open > a,
.archivWrapper .nav .open > a:hover,
.archivWrapper .nav .open > a:focus {
  background-color: #eeeeee;
  border-color: #337ab7;
}
.archivWrapper .nav .nav-divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.archivWrapper .nav > li > a > img {
  max-width: none;
}
.archivWrapper .nav-tabs > li {
  float: left;
  margin-bottom: -1px;
  padding-left: 1px;
  padding-right: 7px;
}

.archivWrapper .nav-tabs > li + li{
  padding-left: 15px;
}


.archivWrapper .nav-tabs > li > a {
  	padding: 10px 16px;
}
.archivWrapper .nav-tabs > li.active > a,
.archivWrapper .nav-tabs > li.active > a:hover,
.archivWrapper .nav-tabs > li.active > a:focus {
 	text-decoration: none;
 	background-color: #212121;
	color: #fff;
}
.archivWrapper .nav-tabs.nav-justified {
  width: 100%;
  border-bottom: 0;
}
.archivWrapper .nav-tabs.nav-justified > li {
  float: none;
}
.archivWrapper .nav-tabs.nav-justified > li > a {
  text-align: center;
  margin-bottom: 5px;
}
.archivWrapper .nav-tabs.nav-justified > .dropdown .dropdown-menu {
  top: auto;
  left: auto;
}
@media (min-width: 768px) {
  .archivWrapper .nav-tabs.nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .archivWrapper .nav-tabs.nav-justified > li > a {
    margin-bottom: 0;
  }
}
.archivWrapper .nav-tabs.nav-justified > li > a {
  margin-right: 0;
  border-radius: 4px;
}
.archivWrapper .nav-tabs.nav-justified > .active > a,
.archivWrapper .nav-tabs.nav-justified > .active > a:hover,
.archivWrapper .nav-tabs.nav-justified > .active > a:focus {
  border: 1px solid #dddddd;
}
@media (min-width: 768px) {
  .archivWrapper .nav-tabs.nav-justified > li > a {
    border-bottom: 1px solid #dddddd;
    border-radius: 4px 4px 0 0;
  }
  .archivWrapper .nav-tabs.nav-justified > .active > a,
  .archivWrapper .nav-tabs.nav-justified > .active > a:hover,
  .archivWrapper .nav-tabs.nav-justified > .active > a:focus {
    border-bottom-color: #ffffff;
  }
}

.archivWrapper .nav-pills > li {
  float: left;
}

.archivWrapper .nav-pills > li > a {

  	font-size: 14px;
	text-transform: uppercase;
	border: 1px solid;
	line-height: 15px;
	padding: 5px 8px;
	margin-right: 15px;
	margin-bottom: 8px;
	letter-spacing: 1px;
	font-family: "AvenirNextLTW02-Regular",Helvetica,Arial,sans-serif;
}
	.archivWrapper .nav-pills > li a:hover{
		background-color: #fff;
		color: #000;
		text-decoration: none;
	}
	.archivWrapper .nav-pills > li + li {
	  margin-left: 2px;
	}
.archivWrapper .nav-pills > li.active > a,
.archivWrapper .nav-pills > li.active > a:hover,
.archivWrapper .nav-pills > li.active > a:focus {
  color: #ffffff;
  background-color: #337ab7;
}

.archivWrapper .tab-content > .tab-pane {
  display: none;
}
.archivWrapper .tab-content > .active {
  display: block;
}
.archivWrapper .nav-tabs .dropdown-menu {
  margin-top: -1px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
.archivWrapper .clearfix:before,
.archivWrapper .clearfix:after,
.archivWrapper .nav:before,
.archivWrapper .nav:after {
  content: " ";
  display: table;
}
.archivWrapper .clearfix:after,
.archivWrapper .nav:after {
  clear: both;
}
.archivWrapper .center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.archivWrapper .pull-right {
  float: right !important;
}
.archivWrapper .pull-left {
  float: left !important;
}
.archivWrapper .hide {
  display: none !important;
}
.archivWrapper .show {
  display: block !important;
}
.archivWrapper .invisible {
  visibility: hidden;
}
.archivWrapper .text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.archivWrapper .hidden {
  display: none !important;
}
.archivWrapper .affix {
  position: fixed;
}


.archivWrapper .tab-content {
    padding-top: 10px;
    max-width: 1024px;
}

.archivWrapper .bs-example {
	margin-top: -47px;
}
.page-template-page-test{
    background: #212121;
}




/* ===== Eltern-Kategorien ===== */
.navLeistungsbereichte ul.content {
	display: -webkit-flex;
	display: flex;
}
	.navLeistungsbereichte ul.content li{
		list-style: none;
		text-transform: uppercase;
		letter-spacing: 1px;
		margin-bottom: 0;
	}
		.navLeistungsbereichte ul.content li + li{
			padding-left: 15px;
			
		}
		.navLeistungsbereichte ul.content li a{
			padding: 10px 16px;
			letter-spacing: 1px;
		}	
			.navLeistungsbereichte ul.content li a:focus{
				text-decoration: none;
			}	
			.navLeistungsbereichte ul.content li a:hover,
			.navLeistungsbereichte ul.content li a:focus{	
				color: #fff;
			}
			.navLeistungsbereichte .ui-state-active a{
				background-color: #212121;
				padding: 10px 16px;
			}


/* ===== Kind-Kategorien ===== */
.navLeistungsbereichte li{
	list-style: none;
	
}
	.navLeistungsbereichte li{
		padding-left: 1px;
		padding-right: 7px;
	}
	.navLeistungsbereichte li:last-child{
		padding-right: 0px;
	}
	
	.navLeistungsbereichte .ui-tabs-panel li a {
	    font-size: 14px;
	    text-transform: uppercase;
	    border: 1px solid;
	    line-height: 15px;
	    padding: 5px 8px;
	    margin-right: 15px;
	    margin-bottom: 8px;
	    letter-spacing: 1px;
	    font-family: "AvenirNextLTW02-Regular",Helvetica,Arial,sans-serif;
	}
	
	.navLeistungsbereichte .ui-tabs-panel li a:hover {
	    background-color: #fff;
	    color: #000;
	    text-decoration: none;
	}
	
	.navLeistungsbereichte li a:hover{
		text-decoration: underline;
	}
	.navLeistungsbereichte li a:focus{
		color: #fff;
	}
	.tab-content li {
		margin-top: 5px;
		margin-left: 0px;
		padding-right: 0;
	}
	.tab-content li:first-child {
		margin-left: 0px;
		padding-right: 0;
	}
	
	/* Uebergeordnete Box fuer den Content der einzelnen Tabs */
	.navLeistungsbereichte .tab-content{
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		padding-left: 7px;
		padding-right: 7px;
		margin-bottom: -85px;
		height: 45px;
		margin-top: 20px;
		margin-left: 0;
	}
	.tab-content li a.active{
	    background-color: #fff;
	    color: #000;
	    text-decoration: none;
	}
	.tab-active {
	    display: block !important;
	}
	.tab-inactive {
	    display: none !important;
	}
	
/* ========== Ajax load more / Content ========== */
		
.wrapperReferenzen h2,
.wrapperArchiv h2, p.tld-tag a{
	color: #fff;
	border-color: #fff;
	}
	p.tld-tag a:hover{
	    background-color: #fff;
	    color: #000;
	    text-decoration: none;
	}
	.wrapperReferenzen .item h2::after,
	.wrapperArchiv .item h2:after{
	    background: #fff;	
	}	

/* ======================================== Cookie Hinweis ======================================== */

#cookieHinweis { 
	padding:5px;
	padding-right:40px;
	position:fixed;
   	bottom:0px; 
   	z-index:10000; 
   	width:100%;
	font-size:12px; 
   	line-height:16px;
   	text-align:right; 
  	background: rgba(51, 51, 51, 0.7);
 }

	#cookieHinweis p{
		margin-bottom: 0px;
		font-size: 16px;
		line-height: 25px;
		color: #fff;
	}

	#cookieHinweis a {
		color: #fff;
		text-decoration:none;
	}
		#cookieHinweis a:hover {
			text-decoration:underline;
		}

	#closeCookie{
		font-size: 30px;
		transform: rotate(45deg);
		padding-left: 10px;
	}
		a#closeCookie:hover{
			text-decoration: none;
			cursor: pointer;
			color: #555;
		}

/* ======================================== Owl Carousel ======================================== */

/* 
 *  Owl Carousel - Animate Plugin
 */
.owl-carousel .animated {
  -webkit-animation-duration: 1000ms;
  animation-duration: 1000ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.owl-carousel .owl-animated-in {
  z-index: 0;
}
.owl-carousel .owl-animated-out {
  z-index: 1;
}
.owl-carousel .fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* 
 * 	Owl Carousel - Auto Height Plugin
 */
.owl-height {
  -webkit-transition: height 500ms ease-in-out;
  -moz-transition: height 500ms ease-in-out;
  -ms-transition: height 500ms ease-in-out;
  -o-transition: height 500ms ease-in-out;
  transition: height 500ms ease-in-out;
}

/* 
 *  Core Owl Carousel CSS File
 */
.owl-carousel {
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  /* position relative and z-index fix webkit rendering fonts issue */
  position: relative;
  z-index: 1;
}
.owl-carousel .owl-stage {
  position: relative;
  -ms-touch-action: pan-Y;
}
.owl-carousel .owl-stage:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.owl-carousel .owl-stage-outer {
  position: relative;
  overflow: hidden;
  /* fix for flashing background */
  -webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel .owl-controls .owl-nav .owl-next,
.owl-carousel .owl-controls .owl-dot {
  cursor: pointer;
  cursor: hand;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.owl-carousel.owl-loaded {
  display: block;
}
.owl-carousel.owl-loading {
  opacity: 0;
  display: block;
}
.owl-carousel.owl-hidden {
  opacity: 0;
}
.owl-carousel .owl-refresh .owl-item {
  display: none;
}
.owl-carousel .owl-item {
  position: relative;
  min-height: 1px;
  float: left;
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.owl-carousel .owl-item img {
  display: block;
  width: 100%;
  -webkit-transform-style: preserve-3d;
}
.owl-carousel.owl-text-select-on .owl-item {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}
.owl-carousel .owl-grab {
  cursor: move;
  cursor: -webkit-grab;
  cursor: -o-grab;
  cursor: -ms-grab;
  cursor: grab;
}
.owl-carousel.owl-rtl {
  direction: rtl;
}
.owl-carousel.owl-rtl .owl-item {
  float: right;
}

/* No Js */
.no-js .owl-carousel {
  display: block;
}

/* 
 * 	Owl Carousel - Lazy Load Plugin
 */
.owl-carousel .owl-item .owl-lazy {
  opacity: 0;
  -webkit-transition: opacity 400ms ease;
  -moz-transition: opacity 400ms ease;
  -ms-transition: opacity 400ms ease;
  -o-transition: opacity 400ms ease;
  transition: opacity 400ms ease;
}
.owl-carousel .owl-item img {
  transform-style: preserve-3d;
}

/* 
 * 	Owl Carousel - Video Plugin
 */
.owl-carousel .owl-video-wrapper {
  position: relative;
  height: 100%;
  background: #000;
}
.owl-carousel .owl-video-play-icon {
  position: absolute;
  height: 80px;
  width: 80px;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: -40px;
  background: url("owl.video.play.png") no-repeat;
  cursor: pointer;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  -webkit-transition: scale 100ms ease;
  -moz-transition: scale 100ms ease;
  -ms-transition: scale 100ms ease;
  -o-transition: scale 100ms ease;
  transition: scale 100ms ease;
}
.owl-carousel .owl-video-play-icon:hover {
  -webkit-transition: scale(1.3, 1.3);
  -moz-transition: scale(1.3, 1.3);
  -ms-transition: scale(1.3, 1.3);
  -o-transition: scale(1.3, 1.3);
  transition: scale(1.3, 1.3);
}
.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
  display: none;
}
.owl-carousel .owl-video-tn {
  opacity: 0;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  -webkit-transition: opacity 400ms ease;
  -moz-transition: opacity 400ms ease;
  -ms-transition: opacity 400ms ease;
  -o-transition: opacity 400ms ease;
  transition: opacity 400ms ease;
}
.owl-carousel .owl-video-frame {
  position: relative;
  z-index: 1;
}

 .caseAbstandRechts{
 	background: green;
 }

/* 
 * 	Media Querry Small Screen
 */

.over-content {
    margin-left: -180px;
    margin-right: -180px;
    z-index: 10;
    display: none;
    overflow: hidden;
}

@media (max-width : 1760px) {
	
	.over-content {
    margin: 0;
    }
}


@media (max-device-width : 1480px) {
	
	.content{
	    max-width: 1100px;
	}
	
	.footer-logo {
	    margin-left: -600px;
	}
	
	.frontpage-text {
	    max-width: 1100px;
	}
	.frontpage-img {
	    width: 443px;
	    margin-right: 11px;
	}
	
	.navLeistungsbereichte .tab-content {
	    width: 100%;
	}
}