@font-face{font-family:"DINWebPro-Bold";src:url("../Fonts/1448028/0cfa7c07-29e3-473f-a0e0-9f2b6a1c2880.eot?#iefix");src:url("../Fonts/1448028/0cfa7c07-29e3-473f-a0e0-9f2b6a1c2880.eot?#iefix") format("eot"),url("../Fonts/1448028/bb06c1e8-d3a7-48b2-8421-210adb53936c.woff2") format("woff2"),url("../Fonts/1448028/4c553e2f-60f0-4b5a-bb6f-ea7c8b4469d3.woff") format("woff"),url("../Fonts/1448028/12245acd-f8a6-4165-985a-c90be2f6a58f.ttf") format("truetype");}
@font-face{font-family:"DINWebPro-Light";src:url("../Fonts/1448134/69516398-b445-4c2c-8da2-d7c1b043e024.eot?#iefix");src:url("../Fonts/1448134/69516398-b445-4c2c-8da2-d7c1b043e024.eot?#iefix") format("eot"),url("../Fonts/1448134/88630b74-dd81-42a3-be85-b6e27071d630.woff2") format("woff2"),url("../Fonts/1448134/88e96ad4-aca8-4bc8-952e-41e5c10ac48b.woff") format("woff"),url("../Fonts/1448134/cb11d42c-6f16-4a37-8aaa-2d4740433b07.ttf") format("truetype");}
body{width:100%;height:100%;font-size:16px;line-height:24px;background:url('../img/pattern.png') repeat;font-family:'DINWebPro-Light', sans-serif;}
html{width:100%;height:100%;}
.intro-section, .jahre-section, .produkte-section, .ideen-section,
.kunden-section, .kontakt-section, .impressum-section, .datenschutz-section, footer, nav{max-width:1420px;margin:0 auto;}
@media (min-width:768px){.container{width:750px;}
}
@media (min-width:992px){.container{width:970px;}
}
@media (min-width:1200px){.intro-section, .jahre-section, .produkte-section, .ideen-section,
.kunden-section, .kontakt-section, .impressum-section, footer, nav{width:100%;margin:0 auto;}
.container{width:1170px;}
}
@media (min-width:1360px){.container{width:100%;} 
}
.intro-section{
overflow:hidden;
background:url('../img/designbuero-mezger_htg_new.jpg') no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
height:100%;
padding-top:99px;
text-align:center;
position:relative;}
.jahre-section{padding-top:50px;text-align:center;background:#fff;padding-bottom:100px;}
.produkte-section{padding-top:50px;text-align:center;background:#fff;}
.ideen-section{padding-top:50px;text-align:center;background:#fff;}
.kunden-section{padding-bottom:50px;text-align:center;background:#848587;}
.kontakt-section{min-height:60%;padding-top:100px;padding-bottom:100px;text-align:center;background:#fff;}
.impressum-section{padding-top:50px;padding-bottom:50px;text-align:center;background:#848587;color:#fff;}
.datenschutz-section{padding-top:10%;min-height:60%;padding-bottom:50px;text-align:center;background:#fff;}
.img-container{margin:30px 0 70px 0;}
.stand {padding-left:50%;}
@-webkit-keyframes slideIn {
  from {
    -webkit-transform: translate3d(-200%, 0, 0);
    transform: translate3d(-200%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideIn {
  from {
    -webkit-transform: translate3d(-200%, 0, 0);
    transform: translate3d(-200%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}



.header-pic { 
background-repeat: no-repeat; 
background-position:center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
height:100%;
width: 100%;
margin: 7% auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
    }

@-webkit-keyframes slideOut {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility:hidden;

      -webkit-transform: scale(.7) translate3d(180%, -20rem, -10rem);
    transform: scale(.6) translate3d(180%, -20%, 0);
  }
}

@keyframes slideOut {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility:hidden;

    -webkit-transform: scale(.7) translate3d(180%, -20rem, -10rem);
    transform: scale(.6) translate3d(180%, -20%, 0);
  }
}

.slideIn {
  -webkit-animation-name: slideIn;
  animation-name: slideIn;
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
    animation-delay: 1s;
}

.slide-tr {
	-webkit-animation: slide-tr 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-tr 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;

    animation-delay: 1200ms;
}

@-webkit-keyframes slide-tr {
  0% {
  opacity:1;
    -webkit-transform: scale(1) translateY(0) translateX(0);
            transform: scale(1) translateY(0) translateX(0);
  }
  100% {
   opacity:0;
    -webkit-transform: scale(.6) translateY(20px) translateX(180%);
            transform: scale(.6) translateY(20px)  translateX(180%);
  }
}
@keyframes slide-tr {
  0% {
   opacity:1;
    -webkit-transform: scale(1) translateY(0) translateX(0);
            transform: scale(1) translateY(0) translateX(0);
  }
  100% {
   opacity:0;
    -webkit-transform: scale(.6) translateY(20px) translateX(180%);
            transform: scale(.6) translateY(20px) translateX(180%);
  }
}


.slideOut {
  -webkit-animation-name: slideOut;
  animation-name: slideOut;
   -webkit-animation-name: slideOut;
  animation-name: slideOut;
  -webkit-animation-duration:1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
    animation-delay: 1200ms;
}


.header-table {
background:url('../img/Designbuero-Mezger_Bank.png') no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
height:100%;
width: 100%;
margin: 7% auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}



.intro-layer{display:none;width:100%;background-color:rgba(0, 0, 0, .15);min-height:100%;height:auto !important;text-align:left;overflow:hidden;}
.header-jahre,
.header-produkte,
.header-ideen{font-size:50px;color:#fff;}
.header-jahre{margin-top:10%;}
.header-produkte{margin-top:40px;}
.header-ideen{margin-top:40px;}
.intro-layer a, .intro-layer a:focus{color:#fff;transition:color 1s;text-decoration:none;}
.intro-layer a:hover{color:#333;text-decoration:none;transition:color 1s;}
.right{float:right;}
.datenschutz .navbar{background-color:#616264;}
.navbar{margin-bottom:0;min-height:99px;transition:all 0.3s ease 0s;background-color:rgba(0, 0, 0, .15);}
.navbar-default{border-color:transparent;}
.navbar.top-nav-collapse{min-height:80px;background-color:#616264;border-color:transparent;transition:all 0.3s ease 0s;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
.navbar .navbar-collapse{margin-top:30px;margin-right:20px;}
.navbar-brand{height:auto;width:380px;}
.navbar-brand img{margin-left:20px;width:100%;-webkit-transition-property:height, width;-webkit-transition-duration:0.6s;-moz-transition-property:height, width;-moz-transition-duration:0.6s;transition-property:height, width;transition-duration:0.6s;}
.top-nav-collapse .navbar-brand img{width:85%;-webkit-transition-property:height, width;-webkit-transition-duration:0.6s;-moz-transition-property:height, width;-moz-transition-duration:0.6s;transition-property:height, width;transition-duration:0.6s;}
.navbar-right{float:right!important;}
.nav > li > a{padding:0 10px 0 10px;}
.navbar-default .navbar-nav > li > a{color:#fff;letter-spacing:1px;transition:color 0.4s;}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover{background:transparent;color:#000;}
.navbar-custom .nav li a{letter-spacing:1px;color:white;font-size:16px;text-align:right;}
.navbar-collapse{border-color:transparent;box-shadow:none;}
.navbar-custom .navbar-toggle{font-family:'Roboto', sans-serif;color:white;font-size:10px;}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus{background-color:transparent;transition:color 0.8s;color:white;}
.navbar-toggle{position:relative;float:right;padding:9px 10px;margin-top:15px;margin-right:15px;margin-bottom:8px;background-color:transparent;background-image:none;border:none;border-radius:1px;}
.navbar-default .navbar-collapse, .navbar-default .navbar-form{border-color:transparent;}
.navbar-default .navbar-toggle .icon-bar{background-color:#fff;}
.navbar-toggle .icon-bar:nth-of-type(2){top:1px;}
.navbar-toggle .icon-bar:nth-of-type(3){top:2px;}
.navbar-toggle .icon-bar{position:relative;transition:all 500ms ease-in-out;}
.navbar-toggle.active .icon-bar:nth-of-type(1){top:6px;transform:rotate(45deg);}
.navbar-toggle.active .icon-bar:nth-of-type(2){background-color:transparent;}
.navbar-toggle.active .icon-bar:nth-of-type(3){top:-6px;transform:rotate(-45deg);}
.navbar-default .navbar-toggle{border-color:none;}
.down{position:absolute;bottom:25px;right:46%;width: 60px;}
.totop{position:fixed;right:0;bottom:10%;}
img{max-width:100%;height:auto;}
.english{margin-left:35px;}
.erfahrung-section h1, .impressum-section h1{color:#fff;}
h1, .begeisterung-txt h2, .begeisterung-txt h3,.produkte h2, .produkte h3, .ideen h2, .news h2, .news h3{font-family:'DINWebPro-Light', sans-serif;font-size:40px;margin:0 0 30px 0; text-transform: uppercase;}
h1, .produkte h2 {color:#5f6062;}
.begeisterung-txt h2,.begeisterung-txt h3, .produkte h3 {color:#fff;}


#kontakt h1,
#impressum h1{font-size:16px;margin:0;}
b{font-family:'DINWebPro-Bold', sans-serif;}
b, strong{font-weight:normal;}
.left{text-align:left;}
.right{text-align:right;}
.bottom{padding-bottom:30px;}
.begeisterung-txt a,footer a{font-size:16px;line-height:24px;color:#fff;position:relative;}
footer a:hover, footer a:focus{color:#000;outline:none;text-decoration:none;}
footer a:before{content:"";position:absolute;width:100%;height:1px;bottom:0;left:0;background-color:#000;visibility:hidden;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transition:all 0.3s ease-in-out 0s;transition:all 0.3s ease-in-out 0s;}
#kontakt a,
#datenschutz a{font-size:16px;line-height:24px;color:#333;position:relative;}
.begeisterung-txt a:hover,
.begeisterung-txt a:focus,
#kontakt a:hover,
#kontakt a:focus,
#datenschutz a:hover,
#datenschutz a:focus{color:#000;outline:none;text-decoration:none;}
#kontakt a:before,
#datenschutz a:before{content:"";position:absolute;width:100%;height:1px;bottom:0;left:0;background-color:#000;visibility:hidden;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transition:all 0.3s ease-in-out 0s;transition:all 0.3s ease-in-out 0s;}
footer a:hover:before,
#kontakt a:hover:before,
#datenschutz a:hover:before{visibility:visible;-webkit-transform:scaleX(1);transform:scaleX(1);}
.jahre, .produkte, .ideen{height:570px;background:#f1f1f1;padding:30px 25px 25px 30px;text-align:left;z-index:10;position:relative;}
.news{height:526px;background:#f1f1f1;padding:30px 25px 25px 30px;text-align:left;z-index:10;position:relative;}
.news-txt{position:absolute;top:0;left:0;background-color:#5f6062;z-index:300;width:460px;transition:all 0.6s ease-in-out;opacity:0;height:527px !important;line-height:28px;padding:30px 25px 25px 30px;text-align:left;width:100%;}
.news-txt:hover{color:#fff;opacity:1;transition:all 0.6s ease-in-out;cursor:pointer;width:100%;}

.begeisterung-txt{position:absolute;top:0;left:0;background-color:#5f6062;z-index:300;width:460px;transition:all 0.6s ease-in-out;opacity:0;height:570px !important;line-height:28px;padding:30px 25px 25px 30px;text-align:left;width:100%;}
.begeisterung-txt:hover,
.begeisterung-txt:focus{color:#fff;opacity:1;transition:all 0.6s ease-in-out;cursor:pointer;width:100%;}
.begeisterung-txt:hover h1{color:#fff;transition:all 0.6s ease-in-out;}
.jahre .txt div{width:740px;height:300px;float:right;text-align:left;}
.spacetop{margin-top:35px;}
#news .opadd.col-lg-8,
#jahre .opadd.col-lg-4,
#produkte .opadd.col-lg-4,
#ideen .opadd.col-lg-8{padding-left:15px;padding-right:0;}
#jahre .opadd.col-lg-8,
#ideen .opadd.col-lg-4,
#news .opadd.col-lg-4,
#produkte .opadd.col-lg-8,
footer .opadd.col-lg-12{padding-left:0;padding-right:15px;}

#kontakt .opadd.col-lg-8{padding-left:15px;padding-right:0;}
#kontakt .margleft,
#impressum .margleft,
#datenschutz .margleft{padding-left:50px;}
.my-silder{margin:0;padding:0;}
.unslider-arrow{display:block;width:40px;height:80px;top:50%;margin-top:-16px;overflow:hidden;background:no-repeat 50% 50%;background-image:url('../img/arr-right.png');background-size:29px 65px;text-indent:-999em;opacity:.7;transition:opacity .2s;}
.unslider-arrow:hover{opacity:1;}
.unslider-arrow{position:absolute;z-index:2;cursor:pointer}
.unslider-arrow.next{right:20px}
.unslider-arrow.prev{left:20px;-ms-transform:rotate(-180deg);transform:rotate(-180deg);}
#produkte .unslider-arrow.next{right:30px}
#produkte .unslider-arrow.prev{left:10px;-ms-transform:rotate(-180deg);transform:rotate(-180deg);}
.unslider-nav ol{display:none;}
.kundenstimmen{margin-top:50px;}
.dt-underline{position:relative;color:#fff;}
.dt-underline:after{display:block;position:absolute;left:0;bottom:-5px;width:0;height:5px;background-color:#fff;content:"";transition:width 0.4s;}
.dt-underline:hover{color:#fff;cursor:pointer;}
.dt-underline:hover:after{width:100%;}
dt{padding:10px 10px 20px 10px;margin-top:15px;border-bottom:2px solid #fff;}
dt.becker{padding:4px 10px 20px 10px;}
dt.draenert{padding:0 10px 20px 10px; margin-top: 0;}
dd{display:none;margin:0 0 30px 0;padding:25px;float:left;background:#606263;color:#fff;text-align:left;}
dd,dt{line-height:28px;}
.draenert img {height:60px; }
#button{float:right;display:block;height:18px;width:17px;text-indent:-9999px;}
.closed{background:url(button.png) left no-repeat;}
.open{background:url(button.png) right no-repeat;}
footer{background:#848587;color:#fff;padding:10px 0 70px 50px;}
footer a{color:#fff;transition:color 0.3s;}
footer a:hover{transition:color 0.6s;color:#000;text-decoration:none;}
.cookiebanner {
word-wrap: break-word;
}

.cookiebanner-close {
background:#ead1a8;
color: #000;
padding:5px;
margin-right: 10px;
}
 
 video {
 width:930px;
 }
.responsive-video {
	position: relative;
	padding-bottom: 56%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.responsive-video iframe,  
.responsive-video object,  
.responsive-video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}   

@media (max-width:1366px){.navbar .container{background:transparent;}
.jahre, .produkte, .ideen, .news{height:469px;width:auto;}
.begeisterung-txt{height:469px !important;}
.news{height:430px;width:auto;}
video {
  width:780px;
}

@media (max-width:1024px){
.header-table {
margin: 0 auto;
}
.header-pic { 
margin: 0 auto;
}
}
}



@media (max-width:1280px){
  video {
    width:940px;
  }
.header-jahre{margin-top:10%;}
.header-produkte{margin-top:30px;}
.header-ideen{margin-top:30px;}
.jahre, .produkte, .ideen{height:470px;width:100%;}
.begeisterung-txt{height:470px !important;}

@media (max-width:1200px){
.spacetop{margin-top:60px;}
.news {height:280px;}
.jahre{height:220px;}
.produkte{height:220px;}
.ideen{height:220px;}
.right{float:none;}
.begeisterung-txt{line-height:20px;padding:15px 25px 25px 30px;text-align:left;height:220px !important;}
#ideen .opadd.col-lg-8{padding-right:15px;}

#produkte .opadd.col-lg-8,
#ideen .opadd.col-lg-4,
footer .opadd.col-lg-12{padding-left:15px;}
#jahre .opadd.col-lg-4,
#news .opadd.col-lg-8,
#news .opadd.col-lg-4,
#jahre .opadd.col-lg-8{padding-left:15px;padding-right:15px;}
#produkte .opadd.col-lg-4,
#kontakt .opadd.col-lg-8{padding-right:15px;}
#ideen .opadd.col-lg-8{padding-left:15px;padding-right:15px;}
#kontakt .margleft,
#impressum .margleft,
#datenschutz .margleft{padding-left:15px;}
#kontakt .margleft,
#impressum .margleft,
#datenschutz .margleft{padding-bottom:30px;}
h1, .begeisterung-txt h2, .begeisterung-txt h3{font-size:40px;margin:0 0 15px 0;}
footer .oppad.margleft{padding-left:0;}
dt.becker{padding:10px 10px 20px 10px;}
footer{padding:10px 0 80px 0;}
#produkte .unslider-arrow.next{right:20px}
#produkte .unslider-arrow.prev{left:20px;-ms-transform:rotate(-180deg);transform:rotate(-180deg);}
}


@media (max-width:1024px){
.header-table {
margin: 5% auto;
}
.header-pic { 
margin: 5% auto;
}
}


@media (max-width:992px){
body{font-size:14px;line-height:20px;}
.navbar-header{height:30px;}
.navbar .navbar-collapse{margin-top:20px;margin-right:20px;}
.navbar-collapse.collapse{display:block!important;}
.navbar-nav>li, .navbar-nav{float:left !important;}
.navbar-nav.navbar-right:last-child{margin-right:-25px !important;}
.navbar-right{float:right!important;}
.navbar-brand img{margin-left:20px;transition-duration:0.6s;transition-property:height, width;width:85%;}
.navbar-brand{padding:15px 0 0 0;}
.down{right:45%;}
.my-slider img{height:auto;}
.news {height:200px;}
.header-jahre{margin-top:12%;}
.header-produkte{margin-top:25px;}
.header-ideen{margin-top:25px;}
.header-jahre,
.header-produkte,
.header-ideen{font-size:42px;color:#fff;}
}

@media (max-width:740px){
  .news {height:280px;}
  .jahre{height:300px;}
  .produkte{height:300px;}
  .ideen{height:300px;}
  .right{float:none;}
  .begeisterung-txt{height:300px !important;}
.datenschutz-section{padding-top:22%;}
.intro-section{padding-top:80px;}
.navbar{min-height:80px;}
.navbar-header{height:2px;}
.navbar .navbar-collapse{margin-top:20px;margin-right:20px;}
.down .page-scroll img{width:50%;}
.down{right:39%;}
.header-jahre{margin-top:9%;}
.header-produkte{margin-top:15px;}
.header-ideen{margin-top:15px;}
.header-jahre,
.header-produkte,
.header-ideen{font-size:30px;}
.totop{width:40px;height:auto;bottom:5%;}

}
@media (max-width:480px){
.navbar-brand{height:auto;width:320px;}
.down{right:35%;bottom:5px;}
.unslider-arrow{background-size:18px 40px;top:40%;}
.begeisterung-txt h1{font-size:24px;margin:0 0 5px 0;}
.begeisterung-txt{font-size:12px;}

.header-table {
margin: 15% auto;
    width: 120%;
}

.header-pic { 
margin: 15% auto;
    width: 120%;
}


.stand {padding-left:40%;}
}


@media (max-width:375px){.datenschutz-section{padding-top:24%;}
.intro-section{padding-top:70px;}
.navbar{min-height:70px;}
.navbar-brand{width:290px;}
.header-produkte{margin-top:15px;}
.header-ideen{margin-top:15px;}
.inro-section { background: url(../img/designbuero-mezger_htg_new.jpg) no-repeat -320px center;} 
.stand {padding-top: 5%;}

}
@media (max-width:320px){
.navbar-brand{width:260px;}
.header-jahre{margin-top:6%;}
.down{right:34%;bottom:5px;}
.navbar .navbar-collapse{margin-top:10px;margin-right:10px;}
.produkte .begeisterung-txt,
.jahre .begeisterung-txt,
.ideen .begeisterung-txt{display:none;}
}




/*


@media only screen 
   and (max-device-width: 1024px)
   and (orientation: portrait) {
   .header-pic {margin-top: 45px; }
   .intro-section{height:80%;}
.stand {margin-top: 30%;}
.header-table { top: 64%;}
}


@media only screen 
   and (max-device-width: 830px)
   and (orientation: landscape) { 
   
#intro{
    background: url(../img/designbuero-mezger_htg_mobil.jpg) no-repeat center -70px;
    background-size: cover;}   
.stand {
    padding-left: 0;
}  

.header-jahre {
     margin-top: 0;
}
.header-jahre, .header-produkte, .header-ideen {
    font-size: 30px;
}  
}

@media only screen 
   and (max-device-width: 420px)
   and (orientation: portrait) {

   
   .header-pic {   
   padding: 0;
    width: 800px;
    left: -207px;}
   .intro-section{height:100%;}
.stand {margin-top: 14%;padding-left: 42%;}
.header-jahre, .header-produkte, .header-ideen {
    font-size: 28px;
} 
}


@media only screen 
   and (min-device-width: 640px) and (max-device-width: 811px)
   and (orientation: landscape) { 
   
#intro{
    background: url(../img/designbuero-mezger_htg_mobil.jpg) no-repeat center -50px;
    background-size: cover;}   
.stand {
    padding-left: 45%;
}    
}

*/