@font-face {
  font-family: 'GothamLight';
  src: url('../../fonts/GothamLight.eot'); /* IE9 Compat Modes */
  src: url('../../fonts/GothamLight.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../fonts/GothamLight.woff') format('woff'), /* Pretty Modern Browsers */
       url('../../fonts/GothamLight.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../../fonts/GothamLight.svg#svgFontName') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'GothamBold';
  src: url('../../fonts/GothamBold.eot'); /* IE9 Compat Modes */
  src: url('../../fonts/GothamBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../fonts/GothamBold.woff') format('woff'), /* Pretty Modern Browsers */
       url('../../fonts/GothamBold.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../../fonts/GothamBold.svg#svgFontName') format('svg'); /* Legacy iOS */
}
.mobile_debug{
    display:none;
    color:#0F0;
    font-size:2vmax;
    position:fixed;
    top:20px;
}
html, body{
    width:100%;
    height:100%;
    font-size: 0;
    background:#000;
    color:#FFF;    
    font-family: 'GothamLight';
    overflow: hidden;
}
.wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.client_page_container {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding-right: 17px; /* This hides the right scrollbar */
    padding-bottom: 17px; /* This hides the bottom scrollbar */
}

.content::-webkit-scrollbar { 
    display: none; 
}
em{
    font-style: normal;
}
strong{
    font-weight: normal;
}
a{
    color:#000;
    -o-transition:all 0.5s;
    -moz-transition:all 0.5s;
    -webkit-transition:all 0.5s;
    transition:all 0.5s;
    text-decoration: none;
}
a:hover{
    color:#666;
}
p.grey{
    color:#999;
}
.container_main,
.container_menu
{
    position:fixed;
    display:block;
    width:100%;
    height:100%; 
    top:0; 
}
.mobile_checker{
    width:0;
    height:0;
    position:fixed;
    display:block;
}
/***  
*
*        LOGO HLC   
*
***/
.logo_container{
    position:fixed;
    display:block;
    top:0px;
    left:20px;
    width:100px;
    cursor:pointer;
    z-index:250;
}
.logo_container img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
}
.logo_container img.white{
    display:none;
}

@media (orientation: portrait){
	.logo_container {
		left: 10px;
		width: 70px;
	}
}
/*** 
*
*     CLIENT CONTAINER   
*
***/
.client_page_container{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
}
.client_page,
.bg{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
}
/*
*
*     ______________ CLIENTS ______________
*
*
*/
.cercle_noir{
    right:0;
    opacity:0.9;
    pointer-events: none;
}
.client_menu_container{
    position:fixed;
    /*background:rgba(255, 0, 0, 0.3);*/
    right:0;
    top:0;
    bottom:0;
    margin:auto 0;
    z-index:21;
    cursor:pointer;
}
.cercle_noir,
.client_menu_container{
    width:700px;
    height:700px;
    
}
.fleche{
    position:absolute;
    width:16px;
    height:48px;
    margin:auto;
    left:20px;
    top:0;
    bottom:0;
}
.client_menu_container ul{
    position:absolute;
    margin:0;
    padding:0;    
    width:340px;
    height:150px;
    margin:auto;
    top:0;
    bottom:0;
    left:70px;
}
.client_menu_container li{
    font-family: 'GothamBold';
    position:relative;
    display:block;
    color:#444444;
    font-size:20px;
    line-height:50px;
    cursor:pointer;
    -o-transition:all 0.4s ease-in-out;
    -moz-transition:all 0.4s ease-in-out;
    -webkit-transition:all 0.4s ease-in-out;
    transition:all 0.4s ease-in-out;
}
.client_menu_container li.selected{
    color:#FFFFFF;
}

.bt_close{
    position:fixed;   
}
/*
*
*   PORTRAIT
*
*/
#portrait{
    background:#FFF;
}
#portrait .bg{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    overflow:hidden;
}
#portrait .bg .black{
    position:absolute;
    width:100%;
    height:50%;
    top:0;
    left:0;
}
#portrait .bg .down{
    position:absolute;
    width:100%;
    height:50%;
    bottom:0;
    left:0;
}
#portrait .bg .left{
    position:absolute;
    width:60%;
    height:auto;
    margin:auto;
    left:0;
    top:0;
    bottom:0;
}
#portrait .bg .right{
    position:absolute;
    width:40%;
    height:auto;
    margin:auto;
    right:0;
    top:0;
    bottom:0;
}






#portrait .bg .mobile{
    display:none;
}
#portrait .quote{
    position:absolute;
    width:50%;
    height:100%;
    top:0;
    left:auto;
    right:8%;
    bottom:0;
    margin:auto;
}
#portrait .bg img,
#portrait .quote img,
#portrait .quote_mobile img{
    position:absolute;
    width:100%;
    height:100%;
}
/***
*
*   WORK IN PROGRESS
*
***/

#workinprogress .clickAndPlay{
	font-family: 'GothamBold';
	position:absolute;
	top:0;
	z-index: 20;
	background:#000;
	border:1px solid #000;
	color:#FFF;
	font-size:14px;
	padding:5px 10px;
	opacity:0;
	pointer-events: none;
	/*-webkit-transition:all .5s ease-out;
	transition:all .5s ease-out;*/
}
#workinprogress .content{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    /*background:rgba(255, 0, 0, 0.2);*/
}

#workinprogress .bg{
    background:#F0F0F0;
    /*background:url("../img/time0_img0.jpg");*/
}

#workinprogress .content .img_container{
    position:absolute;
    width:auto;
    overflow:hidden;
    opacity:0;
    z-index: 0;
    cursor: -moz-grab; 
    cursor: -webkit-grab; 
    cursor: grab;
}

#workinprogress .content .img_container:active{
    cursor: -moz-grabbing; 
    cursor: -webkit-grabbing; 
    cursor: grabbing;
}

#workinprogress .content .img_container img{
    width:100%;
}
#workinprogress .content .img_container.r{
    border-radius:50%;
    overflow:hidden;
}
/*
*
*     PRODUITS
*
*/
#produit .bg{
    background:#FFF;
}
#produit video{
    position:absolute;
}
#produit .main_panel{
    position:absolute;
    background:#FFF;
    width:50%;
    height:96%;
    left:1%;
    right:50%;
    top:0%;
    bottom:0%;
    margin:auto;
    overflow:hidden;
}
#produit .main_panel .img_transition,
#produit .main_panel .img_container{
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    margin:auto;
    max-width:960px;
    max-height:1000px;
}
#produit .main_panel .img_transition img,
#produit .main_panel .img_container img{
    width:100%;
    height:auto;
}


#produit .main_panel .dots_container{
    text-align: center;
    position:absolute;
    bottom:0;
    top:auto;
    left:0;
    right:0;
    margin:auto;
    height:50px;
    /*background:url("../img/bg_dots.png") repeat-x;*/
}
#produit .main_panel .dot_container{
    position:relative;
    display:inline-block;
    border-radius : 50%;
    width:14px;
    height:14px;
    margin:20px 5px 0;
    cursor:pointer;
}
#produit .main_panel .dot_contour{
    position:absolute;
    width:14px;
    height:14px;
    border:1px dotted #CCC;
    border-radius:50%;
}

#produit .main_panel .dot{
    position:absolute;
    width:8px;
    height:8px;
    top:2px;
    left:2px;
    background:#CCC;
    border-radius:50%;
}
#produit .right_main{
    position:absolute;
    background:#FFF;
    width:45%;
    height:46%;
    left:52%;
    top:0%;
    bottom:50%;
    margin:auto;
    text-align:center;
}
#produit .right_main img{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}
#produit .right_main .hashtag{
    position:absolute;
    left:0;
    right:0;
    margin:auto;
    bottom:auto;
    width:100%;
    max-width:600px;
}
#produit .right_main .adresse{
    position:absolute;
    left:0;
    right:0;
    margin:auto;
    top:auto;
    width:100%;
    max-width:600px;
}
#produit .bt_container{
    position:absolute;
    background:#FFF;
    width:45%;
    height:46%;
    left:52%;
    bottom:2%;
    margin:auto;
}
#produit .bt_container .right_bt{
    position:absolute;
    width:31%;
    height:100%;
    background:#FFF;
    cursor:pointer;
    overflow:hidden;
}
#produit .bt_container .right_bt:nth-child(1){
    left:0;
    right:auto;
}
#produit .bt_container .right_bt:nth-child(2){
    left:0;
    right:0;
    margin:auto;
}
#produit .bt_container .right_bt:nth-child(3){
    left:auto;
    right:0;
}
#produit .bt_container .img_container img,
#produit .bt_container .img_container{
    width:auto;
    height:100%;
}
#produit .bt_container .right_bt .rollover{
    position:absolute;
    background:#FFF;
    display:block;
    overflow:hidden;
    width:100%;
    height:20%;
    font-size:1.5vmax;
    text-align: center;
    padding-top:1vmax;
    color:#000;
    top:100%;
    -webkit-transition:all .5s;
    transition:all .5s;
}
#produit .bt_container .right_bt:hover .rollover{
    top:80%;
    -webkit-transition:all .5s;
    transition:all .5s;
}
#produit .bt_container .link{
    font-family: 'GothamBold';
    font-size:2.5vw;
    position:absolute;
    text-align: center;
    left:0;
    right:0;
    top: 30%;
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%); 
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
#produit .bt_container .link a{
    color:#000000;
    text-decoration: underline;
    font-family: 'GothamBold';
}
#produit .bt_container .link a:hover{
    color:#000000;
}
/*  SELECTIONS */
h2::selection {
    background: black; /* WebKit/Blink Browsers */
    color:#FFF;
}
h2::-moz-selection {
    background: black; /* Gecko Browsers */
    color:#FFF;
}
h3::selection {
    background: black; /* WebKit/Blink Browsers */
    color:#FFF;
}
h3::-moz-selection {
    background: black; /* Gecko Browsers */
    color:#FFF;
}
b::selection {
    background: black; /* WebKit/Blink Browsers */
    color:#FFF;
}
b::-moz-selection {
    background: black; /* Gecko Browsers */
    color:#FFF;
}
i::selection {
    background: black; /* WebKit/Blink Browsers */
    color:#FFF;
}
i::-moz-selection {
    background: black; /* Gecko Browsers */
    color:#FFF;
}
em::selection {
    background: black; /* WebKit/Blink Browsers */
    color:#FFF;
}
em::-moz-selection {
    background: black; /* Gecko Browsers */
    color:#FFF;
}
strong::selection {
    background: black; /* WebKit/Blink Browsers */
    color:#FFF;
}
strong::-moz-selection {
    background: black; /* Gecko Browsers */
    color:#FFF;
}
br::selection {
    background: black; /* WebKit/Blink Browsers */
    color:#FFF;
}
br::-moz-selection {
    background: black; /* Gecko Browsers */
    color:#FFF;
}
p::selection {
    background: black; /* WebKit/Blink Browsers */
    color:#FFF;
    opacity:1;
}
p::-moz-selection {
    background: black; /* Gecko Browsers */
    color:#FFF;
}
div::selection {
    background: black; /* WebKit/Blink Browsers */
    color:#FFF;
    opacity:1;
}
div::-moz-selection {
    background: black; /* Gecko Browsers */
    color:#FFF;
}

#workinprogress .img_container::selection {
    background:rgba(0, 0, 0, 0);
}
#workinprogress .img_container::-moz-selection {
    background:rgba(0, 0, 0, 0);
}
#workinprogress .img_container img::selection {
    background:rgba(0, 0, 0, 0);
}
#workinprogress .img_container img::-moz-selection {
    background:rgba(0, 0, 0, 0);
}
.mCSB_scrollTools .mCSB_dragger{
    z-index:3 !important;
    
}
/***
*
*  MOBILE MODE
*
***/
@media (max-width:1024px){
    
    .client_menu_container li{
        font-size:14px;
    }
    .cercle_noir, 
    .client_menu_container{
        width:500px;
        height:500px;
    }
}
@media (orientation: landscape) and (max-width:767px){
    .logo_container{
        width:13vmax;
    }
}
@media (orientation: portrait) {
    
    #workinprogress .content .img_container.h{
        width:40%;
    }
    #workinprogress .content .img_container.w{
        width:60%;
    }    
    #workinprogress .content .img_container.r{
        width:50%;
    }
    #workinprogress .content .img_container.s{
        width:20%;
    }
    
    .logo_container{
        top:0px;
    }
    /*
    #portrait .quote .signature{
        font-size:1.5vmax;
    }
    */
    .mobile_checker{
        display:none;
    }
    
    #portrait .bg .left,
    #portrait .bg .right{
        display:none;
    }
    #portrait .bg .mobile{
        display:block;
        position:absolute;
        width:100%;
        height:auto;
        margin:auto;
        left:0;
        right:0;
        top:0;
        bottom:auto;
    }
    #portrait .quote{
        left:0;
        right:0;
        top:50%;
    }
    
    #portrait .bg .up{
       display:none;
    }
    #portrait .bg .down{
        height:100%;
    }
    #produit .main_panel{
        width:96%;
        height:70%;
        left:0%;
        right:0%;
        top:1%;
        bottom:auto;
    }
    #produit .right_main{
        width:49%;
        height:27%;
        left:2%;
        right:auto;
        top:auto;
        bottom:1%;    
    }
    #produit .bt_container{
        width:46%;
        height:27%;
        left:52%;
        bottom:1%;
        margin:auto;
        margin:auto;
    }
    #produit .bt_container .right_bt{
        width:48.5%;
        height:100%;
    }
    #produit .bt_container .right_bt:nth-child(2){
        right:0;
        left:auto;
        margin:0;
    }
    #produit .bt_container .right_bt:nth-child(3){
        display:none;
        
    }
    #produit .bt_container .right_bt .rollover{
        font-size:2vmax;
    }
}