/**
 * STRUCTURE
 * ----------------------------------------------------------------
 * _______________01. IMPORT
 * _______________02. GLOBAL
 * _______________03. SITE ELEMENTS
 * _______________04. PAGES
 *		
 * ------------------------------------------------------------------*/



/** 
 * 01. IMPORT
 * ------------------------------------------------------------------*/
@import url(reset.css); 
/* ------------------------------------------------------------------*/



/** 
 * 02. GLOBAL
 * ------------------------------------------------------------------*/
* {margin: 0; padding: 0;}
html, body {height: 100%;}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 16px;
	color: #464546;
}
a {color: #8c8c8c; text-decoration: none; outline: none;}
.wrapper {
	width: 968px; /* Real width: 1008px */
	margin: 40px auto;
	position: relative;
	padding-top: 139px;
	padding-left: 20px;
	padding-right: 20px;
}
a img {border: 0;}
#logo {
	width: 400px;
	position: absolute;
	top: -4px;
	left: 19px; /* Actually -1px */
	height: 64px;
	overflow: hidden;
}
#logo a {height:64px}
#logo a img {border: 0; width: auto}
/*
#logo a {
	display: block;
	height: 64px;
	width: 84px;
	background: url(../images/mwd_logo_white.png) no-repeat;
	text-indent: -999em;
}
*/


#header {
	position: absolute;
	top: 0;
	right: 22px;
	width: 720px;
}
#header a {
	z-index: 1;
	position: relative;	
}
#header-article {
	overflow: hidden;
	position: relative;
	border-top: 1px solid #464546;
	padding-top: 8px;
}
#header-article .col {
	float: left;
	width: 160px;
	position: relative;
}
#header-article .col a {
	color: #464546;
}
#header-article .col-wide {
	width: 200px;
}
#header-article .col-share {
	width: 160px;
	position: relative;
	z-index: 1;	
}
#header-article .fb-like {
	float: right;
	top: 0px;
	width: 85px!important;
	right: -10px;
}
#header-article #___plusone_0 {
	float: left;
	width: 70px!important;
}

#helpnav {
	position: absolute;
	top: 0;
	right: 20px; /* .wrapper {padding-right: 20px} */
}
#helpnav ul {}
#helpnav li {float: left; list-style: none;}
#helpnav a {color: #464546; text-decoration: none;}
#helpnav a.active {}
#helpnav #Sprachwahl {display: inline;}

#nav {
	float: left;
	width: 227px;
	position: relative;
	background: url(../images/bg_nav_top.png) left top no-repeat;
}
#nav_main {
	padding: 15px 0 0 0;
	border-top: 1px solid #464546;		
	
	width: 108px;
}
.nav_sub {
	padding: 15px 0 0 0;
	border-top: 1px solid #464546;		

	position: absolute;
	left: 119px;
	top: 0;
	width: 108px;
	display: none;
}
.active .nav_sub, .trail .nav_sub {display: block}
#nav li {
	list-style: none;
	margin: 0;
}
#nav a {
	color: #8c8c8c;
	text-decoration: none;
	display: block;
	padding: 6px 0 5px 0;
	outline: none;
	height: 14px;
}
#nav a span {padding: 0 5px 0 1px;} /* Textausrichtung */
#nav li {background: url(../images/bg_nav_main_li.png) left bottom no-repeat;} /* Hauptnavigation: breiter Streifen */



/* a:hover or li.active */

/*
#nav a:hover span, #nav .active a span {
	color: #464546;
	color: red;
	background: url(../images/bg_nav_li_a_active.png) right bottom no-repeat;
	padding-bottom: 6px;
	border: 1px solid red!important;
}
#nav li.hover {
	background: url(../images/bg_nav_li_active.png) left bottom no-repeat;	
}
*/

#nav li a:hover, #nav li.active a, #nav li.trail a {color: #464546; background: url(../images/bg_nav_li_active.png) right bottom no-repeat; height: 14px;}
#nav li a:hover span, #nav li.active a span, #nav li.trail a span {background: url(../images/bg_nav_li_a_active.png) right bottom no-repeat; padding-bottom: 5px; height: 14px; display: inline-block; line-height: 16px;} /* Neue angepasste Linie anzeigen */


/* Subnav */
#nav li.active .nav_sub a, #nav li.trail .nav_sub a {background: none; color: #8c8c8c}
#nav li.active .nav_sub a span, #nav li.trail .nav_sub a span {background: none;}

#nav .nav_sub li {background: url(../images/bg_nav_sub_li.png) left bottom no-repeat!important} /* Subnavigation: schmaler Streifen */

#nav li .nav_sub a:hover,
#nav .nav_sub li.active a,
#nav .nav_sub li.trail a {color: #464546; background: url(../images/bg_nav_li_active.png) right bottom no-repeat!important;}
#nav li .nav_sub a:hover span,
#nav .nav_sub li.trail a span,
#nav .nav_sub li.active a span {background: url(../images/bg_nav_li_a_active.png) right bottom no-repeat!important; padding-bottom: 5px!important;}

/* Hide Login Link */
#nav .nav-login {
	display: none;
}

/* Reference Categories*/
#nav_categories {

	width: 108px;
	position: absolute;
	right: 0;
	top: 40px;
}


li.dontshow {
	visibility: hidden;
	display: none;
}
li.dontshow .nav_sub {
	visibility: visible;
}

#footer {
	border-top: 1px solid #464546;
	padding-top: 7px;
	margin-top: 25px;
	padding-bottom: 60px;
	clear: both;
	overflow: hidden;
}
#footer ul {overflow: hidden;}
#footer li {list-style: none; float: left; margin-right: 10px;}
#footer a {color: #959595; text-decoration: none;}


#main {
	margin-left: 247px;	
	padding: 25px 0 0 0;
	border-top: 1px solid #464546;
	width: 720px;
}

h1 {
	font-size: 12px;
}
#main p {
	margin-bottom: 1em;	
}
#main a:hover {color: #464546;}


/* ------------------------------------------------------------------*/



body #black {
	background: #262626;
	color: #fff;
}

#black a:hover {color: #fff;}

#black #kundentabelle td {background-image: url(../images/bg_row_black.png)}
#black #kundentabelle th.col_last {background-image: url(../images/icon_sort_last_black.png)}
#black #kundentabelle .headerSortDown.col_last {background-image: url(../images/icon_sort_desc_last_black.png)}
#black #kundentabelle .headerSortDown {background-image: url(../images/icon_sort_desc_black.png)}
#black #kundentabelle .headerSortUp.col_last {background-image: url(../images/icon_sort_asc_last_black.png)}
#black #kundentabelle .headerSortUp {background-image: url(../images/icon_sort_asc_black.png)}
#black #kundentabelle th {background-image: url(../images/icon_sort_black.png)}    

#black #kundentabelle tbody tr.active td {color: #fff;}

#black .address {border-bottom: 1px solid #fff;}

#black #jobs .ce_text.spacer {border-bottom: 1px solid #fff;}


#black #helpnav, #black #helpnav a {color: #fff;}
#black #nav li a:hover, #black #nav li.active a, #black #nav li.trail a {color: #fff;}
#black #nav_main,
#black #main,
#black #footer {
	border-top: 1px solid #fff;
}
#black #nav {
	background: url(../images/bg_black_nav_top.png) left top no-repeat;
	border-top: none;
}
#black .nav_sub {
	border-top: 1px solid #fff;	
}

#black #nav li {background: url(../images/bg_black_nav_main_li.png) left bottom no-repeat;} /* Hauptnavigation: breiter Streifen */

#black #nav li a:hover, #black #nav li.active a, #black #nav li.trail a {color: #fff; background: url(../images/bg_black_nav_li_active.png) right bottom no-repeat;}
#black #nav li a:hover span, #black #nav li.active a span, #black #nav li.trail a span {background: url(../images/bg_black_nav_li_a_active.png) right bottom no-repeat;} /* Neue angepasste Linie anzeigen */


/* Subnav */
#black #nav li.active .nav_sub a, #black #nav li.trail .nav_sub a {background: none; color: #8c8c8c}
#black #nav li.active .nav_sub a span, #black #nav li.trail .nav_sub a span {background: none;}

#black #nav .nav_sub li {background: url(../images/bg_black_nav_sub_li.png) left bottom no-repeat!important;} /* Subnavigation: schmaler Streifen */

#black #nav li .nav_sub a:hover,
#black #nav .nav_sub li.active a,
#black #nav .nav_sub li.trail a {color: #fff; background: url(../images/bg_black_nav_li_active.png) right bottom no-repeat!important;}
#black #nav li .nav_sub a:hover span,
#black #nav .nav_sub li.trail a span,
#black #nav .nav_sub li.active a span {background: url(../images/bg_black_nav_li_a_active.png) right bottom no-repeat!important; padding-bottom: 5px!important;}

#black .portfolio_item a {
	color: #fff;	
}

#black .portfolio_item {
	border-bottom: 1px solid #fff;
}
#black .portfolio_item.hover {border-bottom: 2px solid #fff;}

#black .address h1 {
	color: #fff;
}


#white .datscher {
	height: 223px;
	width: 202px;
	/*background: url(../images/datscher_white.png) left top no-repeat;*/
	position: absolute;
	top: 419px;
	left: 961px;
}
#black .datscher {
	height: 223px;
	width: 202px;
	/*background: url(../images/datscher_black.png) left top no-repeat;*/
}


.page {padding-top: 1px;} /* ??? */

/*
.page {
    margin: 0px;
    bottom: 0px;
    width: 600px; 
    float: left;
    height: 100%;
	position: relative;
}
*/

.black{
    color:#fff;
   
    background:#464546 url(../images/datscher_black.png) 200px 600px no-repeat;
}
.white{
    color:#464546;
    background:#fff url(../images/datscher_white.png) 1100px 600px no-repeat;
}

#white .debug {
    list-style:none;
    margin:20px 0px 0px 550px;
	color:#aaa;
}
#white .debug strong {color:#f0f0f0;}

#black .debug {
    list-style:none;
    margin:20px 0px 0px 550px;
	color:#f0f0f0;
}
#black .debug strong {color:#aaa;}



/**
 * LANGUAGE SWITCH
 */
/* Switch Button */
.switch {
	display: none; /* Hide button as default and show in enhance.js */
	height: 100%;
	width: 200px;
	display: block;
	text-indent: -999em;
	position: absolute;
	left: 0;
	top: 0;		
}
#toblack {
	background: #464546;
}
#towhite {
	background: #fff;
	z-index: 10;
	display: none;
}

/* Datscher */
#white.page {
	/*background: url(../images/datscher_white2.gif) center 465px no-repeat;*/
}
#black.page {
	background: #464546 /*url(../images/datscher_black.png) center 465px no-repeat*/;
	height: 100%;

}





#white .content {margin-left: 228px;} 

#black {}



/* Kunden Tabelle */
#kundentabelle table {width: 100%;}
#kundentabelle .headerSortUp {background: url(../images/icon_sort_asc.png) right 8px  no-repeat;}
th.headerSortDown {}
#kundentabelle th { 
    background: url(../images/icon_sort.png) right 8px  no-repeat;     
    cursor: pointer; 
    font-weight: bold;
	padding: 3px 1px;
	padding: 1px 1px 5px 1px;
	text-align: left;
} 
#kundentabelle td {padding: 6px 1px 5px 1px; margin-right: 10px; background: url(../images/bg_row.png) right bottom no-repeat; color: #8c8c8c;}
#kundentabelle .headerSortDown {background: url(../images/icon_sort_desc.png) right 8px  no-repeat; }

/* Last Col */
#kundentabelle td.col_last {background: url(../images/bg_row_last.png) right bottom no-repeat;}

#kundentabelle .headerSortUp.col_last {background: url(../images/icon_sort_asc_last.png) right 8px  no-repeat;}
#kundentabelle th.col_last {background: url(../images/icon_sort_last.png) right 8px  no-repeat;  }
#kundentabelle .headerSortDown.col_last {background: url(../images/icon_sort_desc_last.png) right 8px  no-repeat;}

/* Effect on hover over tr row */
#kundentabelle tbody tr.active td {
	background: url(../images/bg_row_active.png) right bottom no-repeat;
	color: #464546;
}
#kundentabelle tbody tr.active .col_last {
	background: url(../images/bg_row_last_active.png) right bottom no-repeat;
}



/* Profil */
#profil {width: 720px;}


/* Kompetenzen */
#kompetenzen {}
#kompetenzen table td {vertical-align: top; padding: 0 20px 16px 0; width: 235px; white-space: normal; height: 160px;}
#kompetenzen table tr {}
#kompetenzen table div.main {margin: 0; padding: 0; width: 215px;}
#kompetenzen table td div.meta {display: none; width: 215px;}
#kompetenzen table td a {color: #8c8c8c; text-decoration: none;}
#kompetenzen table td:last-child {padding: 0 0 16px 0;}

/* Team */
#team {overflow: hidden; width: 721px;}
#team .ce_text {
	width: 227px;
	margin-right: 20px;
	float: left;
	color: #8c8c8c;
}
#team .ce_text:last-child {margin-right: 0}
#team .ce_text .image_container {margin-bottom: 12px;}
#team .ce_text span {color: #464546;}

/* Jobs */
#jobs {width: 475px;}
#jobs .ce_text.spacer {padding-bottom: 35px; border-bottom: 1px solid #464546;}


/* Kontakt */
#kontakt {width: 475px;}
#kontaktform {}
#kontaktformular div.hidden,
#kontaktformular-62 div.hidden {display: none;}
#kontaktformular,
#kontaktformular-62 {width: 475px; margin-bottom: 45px;}
#kontaktform .left {float: left;}
#kontaktform .right {margin-left: 247px;}
#kontaktform label {}
#kontaktform input.text {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #959595; padding: 3px 2px; margin-top: 3px; width: 221px; border-top: 1px solid #8c8c8c; border-right: 1px solid #d1d0d1; border-bottom: 1px solid #d1d0d1; border-left: 1px solid #b0aeae;}
#kontaktform .textarea {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #959595; padding: 3px 2px ;margin-top: 3px; height: 72px; width: 468px; border-top: 1px solid #8c8c8c; border-right: 1px solid #d1d0d1; border-bottom: 1px solid #d1d0d1; border-left: 1px solid #b0aeae;}
#kontaktform .checkbox_container {float: left;}
#kontaktform .checkbox_container label {vertical-align: top}
#kontaktform .submit_container {float: right; margin-top: -2px;}



/* Aktuelles */
#aktuelles .ce_text {padding-bottom: 26px; border-bottom: 1px solid #464546; margin-bottom: 25px;}
#aktuelles .ce_text.small {width: 475px;}
#aktuelles .image_container img {display: block;}
#aktuelles .ce_text h1 {margin: 20px 0 5px;}
#aktuelles .ce_text:last-child,
#aktuelles .ce_text.last-child {padding-bottom: 0!important; border-bottom: 0!important; margin-bottom: 0!important;}



/* Referenzen: Übersicht */
#ref_overview {overflow: hidden; width: 721px;}
#ref_overview .ce_text {border-bottom: 1px solid #464546; width: 227px; margin-right: 20px; float: left; margin-bottom: 19px;}
#ref_overview .ce_text:nth-child(3n) {margin-right: 0;} /* CSS3 */
#ref_overview .ce_text.col_last {margin-right: 0;} /* For older browsers via jQuery */
#ref_overview .image_container img {display: block;}
#ref_overview .ce_text p {margin: 4px 0}
#ref_overview .ce_text.hover {border-bottom: 2px solid #464546;}
#ref_overview .ce_text.hover p {margin: 4px 0 3px 0}
#ref_overview .cat {color: #8c8c8c;}

#ref_overview .ce_text a img {border: none; display: block;}

.portfolio_item {
	border-bottom: 1px solid #464546; width: 227px; margin-right: 20px; float: left; margin-bottom: 19px;
}
.portfolio_item img {display: block; border: none;}
.portfolio_item:nth-child(3n) {margin-right: 0;}
.portfolio_item p {margin: 4px 0!important;}
.portfolio_item.hover {border-bottom: 2px solid #464546;}
.portfolio_item.hover p {margin: 4px 0 3px 0!important}
.portfolio_item a {color: #464546;}
#referenzen {width: 721px;} /* .:TODO:. Set a module specific ID; not the contao ID */

.thumb_slideshow {height: 150px; overflow: hidden;}
.thumb_slideshow a {height: 150px; width: 227px; display: block;}

/**
 * Headline 2
 */



/* Headline 3 */







/* Kompetenzen Tabelle */
/*#kompetenzen table td {width: 274px;}*/

/* Page: Sitemap */
#sitemap.mod_article h1 {margin-bottom: 10px}
#sitemap.mod_article ul {
	list-style-position: inside;
	list-style: none;
}
#sitemap.mod_article a {
	border-bottom: 1px solid #4a494a;	
}
#sitemap.mod_article ul ul {margin-left: 135px;}
#sitemap.mod_article a {color: #8c8c8c; text-decoration: none;}
#sitemap.mod_article a:hover {color: #464546;}
#sitemap.mod_article li.submenu {margin-bottom: 10px;}
#sitemap.mod_article a {padding: 5px 1px; display: block;}
#sitemap.mod_article a:hover {
	color: #4a494a;
	border-bottom: 2px solid #4a494a;
	padding: 5px 1px 4px 1px;
}

/* Black Page */
#black #sitemap.mod_article a {border-bottom: 1px solid #fff;}
#black #sitemap.mod_article a:hover {border-bottom: 2px solid #fff;}
#black #sitemap.mod_article a:hover {color: #fff;}


/* Site: Adressen */
.address {
	border-bottom: 1px solid #464546;
	height: 355px;
	position: relative;
	color: #8c8c8c;
}
.address.second {padding-top: 25px; border-bottom: 0;}
.address h1 {color: #464546}
#map1 {
	position: absolute;
	top: 0;
	right: 0;
	border: 1px solid #abaaa5;
	height: 312px;
	width: 473px;
	
}
#map2 {
	position: absolute;
	top: 25px;
	right: 0;
	border: 1px solid #abaaa5;
	height: 312px;
	width: 473px;
}





/* Newsletter */
#tl_subscribe input.text {width: 210px; margin-right: 12px; margin-top: 3px;}
#tl_subscribe .submit {}
#newsletter .ce_text.small {width: 475px;}



/* Onlinebewerbung */
#bewerbung {position: relative;}
#bewerbung .info {width: 475px;}
#bewerbung .desc {position: absolute; top: 0; right: 0; width: 225px; color: #8c8c8c;}
#bewerbung .desc h1 {color: #464546;}
#bewerbung .ce_form {width: 475px;}

.frm-bewerbung {margin-top: 15px}
.frm-bewerbung label {display: block; line-height: 20px;}
.frm-bewerbung input.text {width: 219px; margin-bottom: 5px;}
.frm-bewerbung textarea {width: 466px; height: 70px;}
.frm-bewerbung .uploads { position: absolute; top: 73px; left: 247px;}
.frm-bewerbung .uploads div {margin-top: 4px; background: url(../images/bg_input.png) left top no-repeat; border: 1px solid #d1d0d1; border-top: 1px solid #8c8c8c; border-left: 1px solid #b0aeae; padding: 5px;}
.frm-bewerbung .upload {font-size: 12px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #464546;}
.frm-bewerbung .submit_container {text-align: right; padding-top: 12px;}
.frm-bewerbung .submit_container input {}

/* Default Forms */
input.text,
textarea {background: url(../images/bg_input.png) left top no-repeat; border: 1px solid #d1d0d1; border-top: 1px solid #8c8c8c; border-left: 1px solid #b0aeae; padding: 4px 3px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #959595;}
input.submit {font-size: 12px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #464546;}




/* Ref Single */
#ref_single {position: relative;}
#ref_single h1 {font-weight: bold;}
#ref_single h1 span {color: #8C8C8C; font-weight: normal;}
.ref_slideshow {}
.ref_slideshow img {width: 720px}
.ref_info {color: #8C8C8C; margin-bottom: 1em;}
.ref_info a {color: #464546;}
#ref_overview .ce_text a {color: #464546;}
.toggle_info {margin: 0 0 1em 0;}
.toggle_info a {padding-right: 12px;}
.hide_info {background: url(../images/bg_hide_info.png) right 6px no-repeat;}
.show_info {background: url(../images/bg_show_info.png) right 6px no-repeat;}

#ref_single .ce_gallery {position: relative;}
#ref_single .ce_gallery table {}

/* Ref Single Paginations */
#ref_single .pagination {text-align: right; float: right;}
#ref_single .pagination li {display: inline; margin: 0; list-style: none; padding: 0;}
#ref_single .pagination p {display: none;}

#ref_single .pagination .last,

#ref_single .pagination .first {display: none;}
#ref_single .pagination a,
#ref_single .pagination span {padding: 1px 5px;}
#ref_single .pagination .current,
#ref_single .pagination a:hover {color: #464546; border-bottom: 1px solid #464546;}

/* Portfolio Overview: die Übersicht der Thumbs in einer Kategorie (oder alle) */
/* Portfolio Overview Pagination */
#portfolio_overview .pagination {text-align: right; margin-bottom: 50px;}
#portfolio_overview .pagination p {display: none;}
#portfolio_overview .pagination li {display: inline; margin: 0; list-style: none; padding: 0;}
#portfolio_overview .pagination a,
#portfolio_overview .pagination span {padding: 1px 5px;}
#portfolio_overview .pagination .current,
#portfolio_overview .pagination a:hover {color: #464546; border-bottom: 1px solid #464546;}
#black #portfolio_overview .pagination .current,
#black #portfolio_overview .pagination a:hover {color: #fff;}



/* Logos */
.logos #main .mod_article {padding-bottom: 40px; overflow: hidden;}
.logos #main .ce_image {float: left;}
.logos #main .ce_image a {outline: none;}
.logos #main .ce_image a img {border: 0;}
.logos #main .ce_image a:hover {border-bottom: 2px solid #000;}

#logo-slideshow {width: 720px; padding-bottom: 30px; float: left; }

.logo_slideshow {position: relative;}
#slideshow_pager {position: relative; clear: both; margin-top: 9px;}
#slideshow_slides {display: inline;}
#slideshow_pager a {padding: 2px 5px; outline: none;}
#slideshow_slides a.activeSlide, #slideshow_slides a:hover {color: #464546; border-bottom: 1px solid #464546}

#slideshow_controls {position: absolute; top: 0; right: 0; height: 9px; width: 30px; padding-top: 3px;}
#slideshow_controls a {display: block; height: 9px; width: 9px; padding: 0;}
#slideshow_controls a#pause {background: url(../images/ctrl_pause.png) no-repeat; text-indent: -999em;  float: left; margin-right: 7px;}
#slideshow_controls a#play {background: url(../images/ctrl_play.png) no-repeat; text-indent: -999em; display: block; float: left;}




#frm-login label {
	width: 100px;
	display: block;
	float: left;
}
#frm-login .submit_container {
	margin-top: 7px;	
}
#frm-login .submit_container input {width: 135px;}
#frm-login .text {margin-bottom: 3px;}

/* Flowplayer Videos */
.player {
	display: block;
	height: 480px;
	width: 720px;
	text-align: center;
}
.player img { /* Center the play button */
	position: relative;
	top: 50%;
	margin-top: -40px;
}






/** Client Upload **/
#frm-client-upload input {
	color: #464546;
	font-family: Arial,Helvetica,sans-serif;
	font-size: 12px;
	font-weight: bold;	
}
.ce_downloads {
	margin-top: 2.5em;	
}
.ce_downloads h1 {
	margin-bottom: 1em;
}
.ce_downloads .mime_icon {
	vertical-align: middle;	
}
.ce_downloads p {
	margin-bottom: 0.2em!important;
}



.frm-route input {
	font-family: Arial,Helvetica,sans-serif;
	font-size: 12px;
}


/* Clearfix Class */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	font-size: 0; 
	height: 0;
	visibility: hidden;
}
*:first-child+html .clearfix {min-height: 0;} 
* html .clearfix {height: 1%;}

#clients .ce_image {
	float: left;
}
#clients .ce_image img,
#clients .ce_gallery img {display: block;}
#clients #kundentabelle {clear: left; margin-top: 25px;}


/* Draggables */
#draggable {position: relative; margin-top: -206px; border: 1px solid #fff; border-left: none;}
#draggable .ce_image {cursor: move!important; display: inline; position: absolute;}
#draggable .ce_image a {}
#draggable .ce_image .image_container {display: inline; }
#draggable-height {visibility: hidden;}
#draggable .front {z-index: 100!important;}