html, body {height:101%;margin:0;width:100%;}
body {overflow-y:scroll;font-family: 'Titillium Web', sans-serif; Arial, sans-serif;font-size:16px;color:white;/*background-image:url(../images/bg-about.jpg);background-size:100%;background-repeat:repeat-y;*/background-color: #403f3f;}
/* GRID */
.fullwidth {width:100%;min-height:1px;}
.row {max-width:1440px;margin:auto;clear:both}
#header:after,#header:before,#main:before,#main:after,#footer:before,#footer:after,.row:before,.row:after,.col:before, .col:after, #team:before, #team:after {display: table;content:" ";box-sizing: border-box;clear:both}
.col {float:left;min-height:1px}
.one {width:8.333333%}
.two {width:16.666666%}
.three {width:24.999999%}
.four {width:33.333333%}
.five {width:41.666666%}
.six {width:49.999999%}
.seven {width:58.333333%}
.eight {width:66.666666%}
.nine {width:74.999999%}
.ten {width:83.333333%}
.eleven {width:91.666666%}
.twelve {width:100%}
/*CONTENT*/
.subnavi ul li{display:block;}
.border-right {border-right: 1px dotted white;}
.top-25 {margin-top:25px;}
.bottom-25 {margin-bottom:25px;}
img {vertical-align:top}
h1 {/*text-transform:uppercase;*/color:white;font-weight:300;margin:25px 0}
h2 {color:white;font-weight:400;font-size:1.3em;margin:20px 0}
h3 {color:white;font-weight:400;font-size:1.125em;}
.duce h3 {color:white;font-weight:400;font-size:1.125em;margin:25px 0;}
.team-col img {margin:0;padding:0;vertical-align:top}
#mainnavi {text-transform:uppercase;float:right;margin-top:45px;}
#mainnavi ul {list-style:none;margin:0;padding:0;}
#mainnavi li {float:left}
#mainnavi a {border-bottom:5px solid white;display:block;margin:0 15px;text-decoration:none;color:white;font-size:16px}
#mainnavi a.active {border-bottom:5px solid #C85C04;}

/* +++++++++  UNTERNAVI  +++++++++++ */


#mainnavi ul li {position:relative;}
#mainnavi ul li:hover ul {display:block;}
#mainnavi ul li ul {top: 100%;position: absolute;overflow: visible;z-index: 999;width: 180%;display: none;margin: 0;padding-top: 20px;}
#mainnavi ul li ul li {float:none;margin-right:0px;}
#mainnavi ul li ul li > a {font-size:1em;text-transform:none;background-color:#C85C04;color:white;border-bottom:1px dotted white;padding:4px;}
#mainnavi ul li ul li > a:hover {background-color:#b8b9b8;color:white;}




#logo {margin-top:39px;}
#logo p a {color:white;font-weight:500;text-transform:uppercase;text-decoration:none;}
.logo img {max-width:100%;}
#main {padding-bottom:40px;background-image:url(team-bg.jpg);background-size:100% auto;background-repeat:no-repeat;background-color:#878787}
#header:after,#header:before,#main:before,#main:after,#footer:before,#footer:after,.row:before,.row:after,.col:before, .col:after, #team:before, #team:after {display: table;content:" ";box-sizing: border-box;clear:both}
#teaser {/*background-color:green;*/margin-top:80px;margin-bottom:80px;max-width:100%;height:auto;}
#teaser img {width:95%;}
#teaser h2 {font-size: 1em;font-weight: normal;background-color:#5B5B5B;scolor: white;padding:5% 7%;width:81%;margin:0px;outline:medium none;text-transform:uppercase;}
.teaser-action {width:100%;height:10%;overflow:hidden;transition: all ease 1s;position:absolute;bottom:0; left:0;z-index:9999999;background-color:rgba(60, 100, 173,0.9);}
.teaser-action:hover {height:100%}
#teaser a {text-decoration:none;}
#teaser h2 > a:hover {background-color:red;}
.line {background-image:url(../images/teaser/linie.gif);background-repeat:repeat-x;width:100%;margin-bottom:20px;}
.metanavi {text-align:left;text-transform:uppercase;}
.metanavi a {display:block;}
.metanavi p {font-size:0.9em;padding-bottom:10px;}
.copyright p {font-size:0.9em;padding-bottom:10px;}
.metanavi a {text-decoration:none;color:white;}
#metanavi {list-style-type:none;margin-top:-25px;width:88%;margin-left:-25px;font-size:0.9em;}
#metanavi li a {display:block;border-bottom:1px dotted white;}
#metanavi li a:hover {background-color:white;color:gray;}
.profile img {max-width:100%;margin-top: 20px;}
.content-headline {color: #C85C04;margin-top:0px; margin-left:20px;}
.text p {padding-left: 20px;}
.text h2 {margin-left:20px;font-weight:300;}
.text h3 {margin-left:20px;font-weight:300;}
.text p > a {text-decoration:none;font-weight:600;color:white;}
.imprint h1 {color: #C85C04;}
select {background-color:blue;}
. {bottom-25margin-bottom:25px;}
.small a > h2 {font-size:0.9em!important;}
.player-headline {color: rgba (40,40,40,1);margin-top:0px;font-size:1em;}
p a {font-weight:400;text-decoration:underline;color:white;}
.modified {font-size:0.75em;}
span.new {color:#b70f2b;text-transform:uppercase;}
span.cd {color:#282828;text-transform:uppercase;font-size:1em;}
hr {font-size:1px}
.cover img{width:80%;padding:2%;border:1px dotted gray;}
.cd-info {margin-left:-20px;list-style-type:circle;color:#282828;}
strong {color:#605F5F;}
.new img {max-width:100%;}
.fa {padding-right:16px!important;text-align:right!important;width:5%;}
.date {font-size:0.7em;padding-top:5px;text-align:left;padding-left:10px;}
.bottom {margin-bottom:25px;}
.bottom50 {margin-bottom: 50px;}
.underline {text-decoration: underline!important;}

/* #####################  FLIP THAT #################################*/

/* entire container, keeps perspective */
.flip-container {perspective: 1000;}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {transform: rotateY(180deg);}

.flip-container, .front, .back {width: 100%;height: 403px;}

/* flip speed goes here */
.flipper {transition: 2s;transform-style: preserve-3d;position: relative;}

/* hide back of pane during swap */
.front, .back {backface-visibility: hidden;position: absolute;top: 0;left: 0;}

/* front pane, placed above back */
.front {z-index: 2;	/* for firefox 31 */transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {transform: rotateY(180deg);}

/* ################# rotate ###############################*/
.box {
  display: inline-block;
  width: 480px;
  height: 270px;
  transition: all ease-in 0.3s;
}

.box:hover { background-color: rgba(200, 92, 4, 0.8); }

.box:hover .image-caption {
  background-color: transparent;
  margin-top: 40px;
}

.image-caption {
  position: absolute;
  display: inline-block;
  width: 480px;
  text-align: center;
  padding: 5px 0;
  color: #ffffff;
  text-transform: uppercase;
  font-family: 'Titillium Web', sans-serif; Arial, sans-serif;
  font-size: 20px;
  text-shadow: 0px 2px 2px rgba(0,0,0,0.8);
  margin-top: 207px;
  background-color: rgba(200, 92, 4, 0.9);
  transition: all ease-in 0.3s;
}

.desc {
  position: absolute;
  width: 370px;
  margin-top: 150px;
  text-decoration: none;
  text-align: center;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  color: transparent;
  text-shadow: 0px 2px 2px rgba(0,0,0,0);
  transition: all ease-in 0.3s;
}

.see-more { text-decoration: underline; }

.content {
  display: inline-block;
  width: 100%;
  height: auto;
  background: url(../images/rotate/sandra-bronder-info-01.jpg) no-repeat;
  background-size: 100% auto;
}

.content2 {
  display: inline-block;
  width: 100%;
  height: auto;
  background: url(../images/rotate/sandra-bronder-info-02.jpg) no-repeat;
  background-size: 100% auto;
}

.content3 {
  display: inline-block;
  width: 100%;
  height: auto;
  background: url(../images/rotate/sandra-bronder-info-03.jpg) no-repeat;
  background-size: 100% auto;
}


.content4 {
  display: inline-block;
  width: 100%;
  height: auto;
  background: url(../images/rotate/sandra-bronder-info-04.jpg) no-repeat;
  background-size: 100% auto;
}

.on {
  color: #ffffff;
  text-shadow: 0px 2px 2px rgba(0,0,0,0.8);
}

#player tr td {color:#403F3F;padding:5px;}
#player tr:nth-child(even) {background: #CCC;}
#player tr:nth-child(odd) {background: #FFF;}

.songs {list-style-type:none;margin-left:-25px;width:50%;}
.songs li {display:block;border-bottom:1px dotted white;}
.songs li:nth-child(even) {background-color:#CCCCCC;color:#403F3F;}

@media handheld, only screen and (max-width:1300px) {
.row {max-width:1000px}
.one {width:50px}
.three {width:300px} 
.seven {width:600px} 
.ten {width:900px}
.service-wrapper {max-width:441px}
.service-title h1 {font-size:1.5em}
#digital, #produktion {top:39%}
/*.service-content {width:31%;padding: 3.75% 10%;}*/
.direction-next, .direction-prev {height:43px;width:70px}
.nivo-controlNav a {max-width: 165px;}
#slides {min-height:570px}
.referenz-description {padding: 4%;position: absolute;bottom: 0;width: 92%;}
.referenz {position: relative;}
}

@media handheld, only screen and (max-width:1100px) {
.row {max-width:900px}
.one {width:50px}
.three {width:200px} 
.seven {width:600px} 
.two {width:200px}
.eight {width:800px}
.ten {width:800px}
.service-wrapper {max-width:392px}
.service-title {bottom: 10px;}
.service-title h1 {font-size:1em}
#digital, #produktion {top:35%}
/*.service-content {width:31%;padding: 6% 10%;}*/
#klassik-close, #produktion-close, #digital-close, #marketing-close {font-size:21px}
#mainnavi a {font-size:14px}

.team-description h2,.team-description2 h2 {font-size:17px}
.team-description p, .team-description2 p {font-size:14px}
.nivo-controlNav a {max-width:138px}
.direction-next, .direction-prev {width:60px;background-size:100% auto;}
#slides {min-height:533px}
.service p {font-size:14px!important;margin:0}
#main {min-height:700px}
.referenz {min-height: 133px;}
.referenz-description p {font-size:14px}
.referenz-link {max-height: 133px;overflow:hidden}
}

@media handheld, only screen and (max-width:950px) {
.row {max-width:700px}
.one {width:25px}
.two {width:200px}
.three {width:150px} 
.seven {width:500px} 
.eight {width:800px}
.ten {width:650px}
#logo {width:100%}
#digital, #produktion {top: 29%;}
.service-wrapper {max-width: 319px;}
.service-content {width: 41%;padding: 15px 5%;}
#mainnavi a {font-size:12px}
.nivo-controlNav a {max-width: 102px;}
.nivo-directionNav a {top:107%!important}
#slides {min-height:411px}
.referenz {min-height: 109px;}
.referenz-link {max-height: 109px;overflow: hidden;}
#player tr td {display:block;width:90%;}
}

@media handheld, only screen and (max-width:765px) {
.row {padding:0 5%;}
.one, .two, .three, .four, .five, .six, .seven, .eight, .nine, .ten, .eleven, .twelve {width:100%}
#logo-div {text-align:center}
#logo {width: auto;}
#mainnavi ul {margin:0}
#mainnavi li {width:100%}
#mainnavi a {font-size: 15px;padding:10px 0}
#slides {display:none}
#mainnavi ul li ul { display: none; position: relative;padding: 0; width: 100%;}
.slides-col {display:none}
h1 {font-size:15px}
.col p {width:100%!important}
.service {width:100%;position:relative;background-color: #9B070E!important;max-height:none;}
.service-content {width: 90%;position:relative!important}
.service img {width:100%}
.block {display:block}
#marketing-close, #digital-close, #klassik-close, #produktion-close {display:none}
.referenz {width:100%}
.referenz-link {max-height:none}
.referenz-description {position: relative;}
#filternavi li {width:100%}
.fa{display:none}
.kontakt1, .kontakt2 {width: 100%;}
.team-col {width:100%}
#video {width: 90%!important;margin-left: -45%!important;height: 178px!important;margin-top: 0px!important;left:50%;top: 10px!important;}
.team-col:last {margin-top:-100%}
#video-screen-wrapper {overflow:hidden;position: absolute;top: 98%;left: 0;}
.main2 {min-height:4100px!important}
.main2 .ten {position:relative}
#slider {display:none;}
.nivo-controlNav {display:none;}
.breadcrumb {display:none;}
#player tr td {overflow: hidden;}
#player tr td {display:block;width:90%;}
}