*, *:before, *:after {-webkit-box-sizing: border-box; /* Safari/Chrome, andere WebKit-Browser */-moz-box-sizing: border-box; /* Firefox, andere Gecko-Browser */box-sizing: border-box; /* Opera/IE 8+ */}
html    { font-size: 100%;}
body { color: #282828; font-size: 0.9em; /* 16px */ font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 1.5em; background-color: #fff; /* 24px */}
#page-wrapper { margin: 0 auto; }
#content { width: 100%; padding: 0.8em 10px; }
#content-video { width: 100%; padding: 0.8em 10px; padding-bottom:0px;}
a:link { color: #6e6e6e; text-decoration: none; outline-style: none }
a:visited { color: #6e6e6e; text-decoration: none; outline-style: none  }
a:hover, a:focus, a:active { color: #0079ab;}
p { color: #666; margin-bottom: 25px; }
ul { margin: 0; padding: 0; list-style-type: none; }

h1,h2,h3,h4,h5,h6  {font-weight: bold}
h1 { color: #505050; font-size: 0.75em; font-weight: normal; word-spacing: -0.1em; letter-spacing: 0.15em; margin: 1px 0 0; padding: 0; }
h2  { color: #c00; font-size: 1.3em; }

#hmenu { margin-top: -10px; margin-bottom: -16px; }
#head  { margin-top: 25px; margin-left: 10px; padding-bottom: 20px; }
#logo { display: none }

#nav { display: none}

#pictures  { max-width: 1250px; height:750px; float: left; }
#pictures img { max-width: 100%; }

.videowrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */padding-top: 2px; height: 0;}
.videowrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

#picnav  { margin-top: 10px; }
#gridicon  { width: 20px; float: left; margin-right: 14px; }

.hover-image-container  { display: inline-block; margin-top: 0; height: 16px; overflow: hidden  }
.hover-image-container:hover img { margin-top: -16px }

#arrows  { width: 44px; float: left;    }
#arrows img { margin-right: 8px   }

.hover-image-container-ar  { display: inline-block; margin-top: 0; height: 15px; overflow: hidden  }
.hover-image-container-ar:hover img { margin-top: -15px }

#info      { float: left; ; margin-left: -10px}
#info p { color: #a1a1a1; font-size: 0.9em; line-height: 1.5em; margin: 0 0 0 10px; padding: 0; }

#contact a:link { color: #0091c8 }
#contact a:visited { color: #0091c8  }
#contact a:hover, a:focus, a:active { color: #0079ab;}
#contact li { color: #666; font-size: 1.2em; line-height: 1.6em; list-style: none; }
#contact li.ilink { margin-top: 10px; }
#left {width: auto; float: left}
#middle { width: auto; float: left }
#sidebar { width: auto;float: left;}
#contact    { margin-top: 10px; margin-right: 20px; margin-left: 10px; }
#contact p   { font-size: 1.2em; line-height: 1.6em; margin-bottom: 15px; }
#contact ul   { margin-bottom: 30px }

#grid { float: left; margin-bottom: 20px; padding-right: 10px; }
#grid ul { list-style-type: none; }
#grid li { float: left; margin-bottom: 6px; }
#grid li:nth-child(2n+1) { clear: left }
#grid li:nth-child(1n+1) { clear: none; }
#grid img {max-width: 100%;}
.vp-player-layout { margin: 0; padding: 0; }

h1.home { color: #505050; font-size: 1.4em; font-weight: normal; letter-spacing: 0.1em; margin-bottom: 10px; }


#homelogo { float: left; margin-right: 20px }
#homenav  { float: left; margin-bottom: 10px; }
#homenav ul > li { color: #000; font-size: 0.8em; letter-spacing: 0.15em; margin-right: 12px; list-style: none; display: inline;  }

#homenav a { color: #a1a1a1; outline-style: none}
#homenav a:hover { color: #0079ab; outline-style: none}
#homenav li.aktiv a {color: #282828}
#homenav li.aktiv a:hover { color: #0079ab}

#footer { padding-top: 20px; margin-left: 10px; font-size: 0.75em; line-height: 1.6em; text-transform: uppercase; }

#menuToggle { display: block; position: relative; top: 5px; z-index: 1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
#menuToggle input {display: block; width: 40px; height: 32px; position: absolute; top: -7px; left: -5px; cursor: pointer;
opacity: 0; z-index: 2; -webkit-touch-callout: none;}
#menuToggle span { display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background: #cdcdcd; border-radius: 3px; z-index: 1; -webkit-transform-origin: 4px 0px; transform-origin: 4px 0px; -webkit-transition: background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),opacity 0.55s ease,-webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);transition: background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),opacity 0.55s ease,-webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),opacity 0.55s ease;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),opacity 0.55s ease,
-webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);}
#menuToggle span:first-child {-webkit-transform-origin: 0% 0%; transform-origin: 0% 0%;}
#menuToggle span:nth-last-child(2) {-webkit-transform-origin: 0% 100%; transform-origin: 0% 100%;}
#menuToggle input:checked ~ span{opacity: 1;-webkit-transform: rotate(45deg) translate(-2px, -1px);transform: rotate(45deg) translate(-2px, -1px);background: #232323;}
#menuToggle input:checked ~ span:nth-last-child(3){ opacity: 0; -webkit-transform: rotate(0deg) scale(0.2, 0.2); transform: rotate(0deg) scale(0.2, 0.2);}
#menuToggle input:checked ~ span:nth-last-child(2){ -webkit-transform: rotate(-45deg) translate(0, -1px); transform: rotate(-45deg) translate(0, -1px);}
#menu{ position: absolute; width: auto; margin: -100px 0 0 -50px; padding: 125px 30px 10px 50px; background: #ededed; list-style-type: none;-webkit-font-smoothing: antialiased; -webkit-transform-origin: 0% 0%;transform-origin: 0% 0%;-webkit-transform: translate(-100%, 0);transform: translate(-100%, 0);-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
transition: -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);}
#menu li{ font-size: 1.4em; line-height: 1.4em; letter-spacing: 0.05em; margin-bottom: 16px; }
#menuToggle input:checked ~ ul {-webkit-transform: none; transform: none;}

@media screen and (max-width: 39.9em)
{
#content-video { padding-bottom:13.2%;}
#pictures { height:0; padding-bottom:72.2%;}
}

@media screen and (min-width: 40em)
{
#hmenu { display: none}
#logo { display: inline }
#logo { float: left; margin-right: 20px }
#nav  { display: inline; width: 400px; float: left; }
#nav ul {  }
#nav li { color: #505050; font-size: 0.75em; letter-spacing: 0.15em; list-style: none; display: inline; margin-right:20px; margin-left:0; padding:left:0; }

#nav a:hover { color: #0079ab; outline-style: none}
#nav li.aktiv a {color: #282828}
#nav li.aktiv a:hover { color: #0079ab}

#grid img {height: 167px}
#grid li {margin-right: 10px;}

#content-video { padding-bottom:14.0%;}
#pictures { height:0; padding-bottom:72.2%;}

}

@media screen and (min-width: 55em) 
{
#left {width: 270px; float: left;}
#middle { width: 220px; float: left; margin-right: 80px; }
#sidebar { width: 230px; float: left;}
#sidebar p.top { margin-top: 42px; }
#left ul { margin-top: 11px;   }
#contact li { font-size: 0.8em; line-height: 1.9em; }
#contact p   { font-size: 0.8em; line-height: 1.8em; margin-bottom: 25px; }
#contact ul   { margin-bottom: 10px }
h2.agency   { margin-top: 20px}
h2  { font-size: 0.8em; }
#content-video { padding-bottom:14.6%;}
#pictures { padding-bottom:72.2%;}
#footer { float: right; padding-right:18px }
}

@media screen and (min-width: 72em) 
{ 
#page-wrapper { max-width: 1260px;  }
#content {max-width: 1250px;}
#content-video { width: 1080px; padding: 0.8em 10px; padding-bottom:152px;}
#pictures { max-width: 1250px; height: 100%; padding-bottom: 0;}
#picnav  { float: left; width: 800px }
#grid { width: 1250px; float: left; }