/* adjust sizes based on the screen size */
.trapdoor {
  -webkit-transform: translateZ(0px);
  -webkit-font-smoothing: antialiased;
  position: absolute;
  width: 200px;
  height: 50px;
  box-shadow: inset -7px 0px 12px -8px rgba(255,255,255,0.3), inset 7px 0px 12px -8px rgba(0,0,0,0.3);
  background: rgba(255,255,255,0.3);
  -webkit-transition: background 400ms ease-in-out;
  -moz-transition: background 400ms ease-in-out;
  -ms-transition: background 400ms ease-in-out;
  -o-transition: background 400ms ease-in-out;
  transition: background 400ms ease-in-out;
  
  &:hover {
    background: #3F54A5;
    color:#fff;
    .door {
       box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.4);
       -webkit-transform: scale(1.08);
       -moz-transform: scale(1.08);
       -ms-transform: scale(1.08);
       -o-transform: scale(1.08);
       transform: scale(1.08);
    }

   /* adjust for movement */ 
    .doorTop {
    	top: -50%; 
    }
    .doorBottom {
    	top: 100%; 
    }
  }
}
.doorTop {
  top: 0%;
  left: 0px;
  border-left:solid red 1px;
  border-right:solid red 1px;
  border-top:solid red 1px;
  border-radius:10px 10px 0px 0px;
  &:before {
    top: 5px;
  }
}

.doorBottom {
  top: 50%;
  left: 0px;
  border-left:solid red 1px;
  border-right:solid red 1px;
  border-bottom:solid red 1px;
  border-radius:0px 0px 10px 10px;
  &:before {
    top: -20px;
  }
}

.door {
  -webkit-transition: top 400ms, box-shadow 200ms, -webkit-transform 300ms;
  -moz-transition: top 400ms, box-shadow 200ms, -moz-transform 300ms;
  -ms-transition: top 400ms, box-shadow 200ms, -ms-transform 300ms;
  -o-transition: top 400ms, box-shadow 200ms, -o-transform 300ms;
  transition: top 400ms, box-shadow 200ms, transform 300ms;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -ms-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  background-color: #aaaaab;
  position: absolute;
  overflow: hidden;
  width: 100%;
  z-index: 2;
  height: 50%;
  text-align:left;
  padding-left:10px;
  
  
  &:before {
    position: absolute;
    font-size: 1.5em;
    color: #000;
    text-align:center;
    margin:auto;
  }
}


/* department specific */
.contentPrint { &:before { content:"Cutting Edge"; } }
.contentFab { &:before { content:"Making it Happen"; } }
.contentPaint { &:before { content:"Adding Color"; } }
.contentCarp { &:before { content:"Wood You Know?"; } }
.contentScenic { &:before { content:"The Cool Stuff"; } }
.contentSG { &:before { content:"Income Theming"; } }
.contentPM { &:before { content:"Nuts & Bolts"; } }
.contentDesign { &:before { content:"Creativity"; } }
.contentFabSpace { &:before { content:"Large Projects"; } }
.contentCarving { &:before { content:"Unique Creations"; } }
.contentShowroom { &:before { content:"Demonstrations"; } }
.contentAdmin { &:before { content:"Logistics"; } }

/* additional */
div.departmentContainer {
	position:absolute;
	width: 768px;
	height: 384px;
	background-image: url("/images/shop/footprint_composite.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	visibility:hidden;
}
div.trapdoorHolder {
	float:left;/*fix for  buggy browsers*/
	display:table-column;
	width:260px;
	height:130px;
	/*border:1px solid  #666666;*/
	margin:auto;
}
img.shop_map {
	height:90vh;
}

/* Layout */
.divTable {
	display:table;
	width:100%;
	/*border:1px solid  #666666;*/
}
.divRow{
	display:table-row;
	width:auto;
}
.divCell{
	float:left;/*fix for  buggy browsers*/
	display:table-column;
	width:260px;
	height:130px;
	/*border:1px solid  #666666;*/
}
/* information display */
#hiddendiv {
	display:none;
	position: absolute;
	width:400px;
	height:400px;
	background-color:#fff;
	border:1px solid  #666666;
	top: 150px;
	left: 600px;
	animation: fadeIn 2s;
	box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.5);
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}