/* ==========================================================================
   Author's custom styles
   ========================================================================== */

.fiche-openned{
    overflow: hidden;
}

#lab-panorama{
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  bottom: 0;
}

#bg{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #03123E url(../images/interface/labs/bg.jpg) no-repeat 0 0 scroll; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 1;


    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.wide-1 #bg{
    top: -25%;
    left: -25%;
    right: -25%;
    bottom: -25%;
}

.wide-2 #bg{
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
}

.research-container{
    position: relative;
    top: 0;
    margin-left: 300px;
    z-index: 2;
}

.lyt-mo .research-container{
    margin-left: 0;
    display: none;
}

.lyt-mo .research-container.active-research{
    display: block;
}

.lyt-mo #research-left-col{
    position: relative;
    text-align: left;
    width: auto;
    top: auto;
    left: auto;
    padding-bottom: 0;
}

.lyt-mo .research{
    width: auto!important;
}

.lyt-mo #lab-panorama{
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    overflow: visible;
}

.lyt-mo .lab-container{
    top: auto!important;
    left: auto!important;
}

.lyt-mo #fiche-wrapper {
  top: 50px;
  overflow-x: hidden;
}

.lyt-mo #fiche {
  max-width: none;
  padding: 20px;
  position: relative;
}

.lyt-mo .close-fiche-link{
    width: 22px;
    height: 22px;
    display: block;
    margin-top: 2px;
    margin-right: 10px;
    border: 2px solid #fff;
    border-radius: 13px;
    float: left;
    background: transparent url(../images/interface/labs/cross.png) no-repeat center center;
    opacity: .5;
}

.lyt-mo .close-fiche-link:hover{
    opacity: 1;
}

.active-research.research-container{
    z-index: 3;
}

.research{
    text-align: center;
    height: 400px;
}

.lab-container{
    display: inline-block;
    margin: 10px;
    position: relative;
    min-width:100px;
}

#research-left-col{
    position: absolute;
    top: 0;
    left: 0;
    width: 250px;
    padding: 20px;
    z-index: 2;
    color: white;
}

#research-left-col h1{
    color: white;
    opacity: .7;
}

#research-left-col p{
    color: white;
    font-weight: 400;
}

#back-button{
    width: 20px;
    height: 20px;
    display: none;
    background: transparent url(../images/interface/labs/back-arrow.png) no-repeat 0 0;
    opacity: .5;
}

#back-button:hover{
    opacity: 1;
}

.wide-1 #back-button,
.wide-2 #back-button{
    display: block;
}


#fiche-wrapper{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.9);
    z-index: 3;
    cursor: pointer;
}

#fiche{
    position: absolute;
    padding: 0 20px;
    color: white;
    max-width: 250px;
    cursor: default;
}

#fiche h2{
    color: white;
}

#fiche p{
    line-height: 18px;
}

#fiche.fade p{
    position: relative;
    overflow: hidden;
}

#fiche.fade p:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40%;
  height: 1.2em;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 50%);
}

.fiche-link {
    font-family: 'Lato', sans-serif;
    color: #fff;
    text-decoration: none;
    text-align: left;
    background: rgba(255,255,255,0);

    display: inline-block;
    padding: 10px 15px;
    border: 1px solid #fff;
    border-radius: 4px;

    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.fiche-link:hover{
    background: rgba(255,255,255,.1);
}

/*.back-button{
    width: 13px;
    height: 13px;
    opacity: .5;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
    background: transparent url(../img/back-button.png) no-repeat 0 0;
}*/

#lab-panorama svg{
    width: 100%;
    height: 100%;
    display: inline-block;
}

#lab-panorama svg g{
    cursor: pointer;
}

.fiche-openned svg text::selection { background: none; }

#lab-panorama svg path{
    fill : none;
    stroke : #fff;
    stroke-opacity : 0.5;
}

#lab-panorama svg g:hover path{
    fill-opacity : 0.8;
}

.lab-label{
   font-family: 'Lato', sans-serif;
    font-weight:400;
    position: absolute;
    color: white;
    font-size: 0.9em;
    line-height: 1.3em;
    display: block;
    left: 0;
    right: 0;
    margin-top: 35px;
    text-align: center;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

#lab-panorama .clearfix:before,
#lab-panorama .clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

#lab-panorama .clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

#lab-panorama .clearfix {
    *zoom: 1;
}

/*
 * Patch tmp Ipad
 * TODO -> solve
 */


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { 
	.lyt-ho .dgt-full { 
	min-width: 2000px;
	}
}