/*-------------------------------*/
/*           Font face           */
/*-------------------------------*/

@font-face {
    font-family: 'Myriad Pro Semibold';
    src: url('/fonts/myriad_pro/Myriad Pro Semibold.eot');
    src: local('☺'), url('/fonts/myriad_pro/Myriad Pro Semibold.woff') format('woff'), url('/fonts/myriad_pro/Myriad Pro Semibold.ttf') format('truetype'), url('/fonts/myriad_pro/Myriad Pro Semibold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro Regular';
    src: url('/fonts/myriad_regular/Myriad Pro Regular.eot');
    src: local('☺'), url('/fonts/myriad_regular/Myriad Pro Regular.woff') format('woff'), url('/fonts/myriad_regular/Myriad Pro Regular.ttf') format('truetype'), url('/fonts/myriad_regular/Myriad Pro Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*-------------------------------*/
/*            General            */
/*-------------------------------*/

body {
    position: relative;
    overflow-x: hidden;
    width: 100vw;
    font-family: 'Myriad Pro Regular';
}

body,
html { height: 100%;}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {background-color: transparent;}

.homepage .container-fluid{
    height: calc(100vh - 150px);
}

.no-padding{
    padding: 0!important;
}

.no-border{
    border: none!important;
}

::-webkit-scrollbar {
    width: 1px;
    height: 1px;
}

p {
    font-size: 1.2em;
}

/*-------------------------------*/
/*            Loading            */
/*-------------------------------*/

#loading{
    display: block;
    position: absolute;
    width: 100vw;
    height: 100vh;
    background: #fff;
    z-index: 1000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#loading img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

/*-------------------------------*/
/*           Wrappers            */
/*-------------------------------*/

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
    padding-left: 220px;
}

#sidebar-wrapper {
    z-index: 1000;
    left: 220px;
    width: 0;
    height: 100%;
    margin-left: -220px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    border: none;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#sidebar-wrapper::-webkit-scrollbar {
    display: none;
}

#wrapper.toggled #sidebar-wrapper {
    width: 220px;
}

#page-content-wrapper {
    position: relative;
    width: 100%;
    padding-top: 70px;
    padding-bottom: 70px;
    overflow-x: hidden;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -220px;
}

/*-------------------------------*/
/*     Sidebar nav styles        */
/*-------------------------------*/

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 220px;
    margin: 0;
    padding: 0;
    list-style: none;
    height: 100vh;
    border-right: 1px solid #cecece;
}

.sidebar-nav li {
    position: relative;
    line-height: 20px;
    display: inline-block;
    width: 100%;
}

.sidebar-nav li:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: 100%;
    width: 3px;
    background-color: #fff;
    -webkit-transition: width .2s ease-in-out;
    -moz-transition:  width .2s ease-in-out;
    -ms-transition:  width .2s ease-in-out;
    transition: width .2s ease-in-out;

}
.sidebar-nav li:first-child a {
    color: #fff;
    background-color: #1a1a1a;
}
.sidebar-nav li:nth-child(2):before {
    background-color: #EDC136;
}
.sidebar-nav li:nth-child(3):before {
    background-color: #8460A1;
}
.sidebar-nav li:nth-child(4):before {
    background-color: #EA6FA3;
}
.sidebar-nav li:nth-child(5):before {
    background-color: #38B8E7;
}

.sidebar-nav .social{
    display: inline-block;
    padding: 0px;
    margin-top: 20px;
}

.sidebar-nav .social img{
    width: 40px;
}

.sidebar-nav li:hover:before,
.sidebar-nav li.open:hover:before {
    width: 100%;
    -webkit-transition: width .2s ease-in-out;
    -moz-transition:  width .2s ease-in-out;
    -ms-transition:  width .2s ease-in-out;
    transition: width .2s ease-in-out;

}

.sidebar-nav li a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 10px 15px 10px 30px;
    color: #000;
}

.sidebar-nav li a:hover,
.sidebar-nav li a:active,
.sidebar-nav li a:focus,
.sidebar-nav li.open a:hover,
.sidebar-nav li.open a:active,
.sidebar-nav li.open a:focus{
    color: #000;
    outline: none;
    text-decoration: none;
    background-color: transparent;
}

.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 20px;
    line-height: 44px;
}
.sidebar-nav .dropdown-menu {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    border-radius: 0;
    border: none;
    background-color: #222;
    box-shadow: none;
}

/*-------------------------------*/
/*       Hamburger-Cross         */
/*-------------------------------*/

.hamburger {
    position: fixed;
    top: 20px;
    z-index: 999;
    display: block;
    width: 32px;
    height: 32px;
    margin-left: 15px;
    background: transparent;
    border: none;
}
.hamburger:hover,
.hamburger:focus,
.hamburger:active {
    outline: none;
}
.hamburger.is-closed:before {
    content: '';
    display: block;
    width: 100px;
    font-size: 14px;
    color: #fff;
    line-height: 32px;
    text-align: center;
    opacity: 0;
    -webkit-transform: translate3d(0,0,0);
    -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover:before {
    opacity: 1;
    display: block;
    -webkit-transform: translate3d(-100px,0,0);
    -webkit-transition: all .35s ease-in-out;
}

.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom,
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
    position: absolute;
    left: 0;
    height: 4px;
    width: 100%;
    border-radius: 100px;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom {
    background-color: #1a1a1a;
    border-radius: 100px;
}
.hamburger.is-closed .hamb-top {
    top: 5px;
    -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-middle {
    top: 50%;
    margin-top: -2px;
}
.hamburger.is-closed .hamb-bottom {
    bottom: 5px;
    -webkit-transition: all .35s ease-in-out;
}

.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
    background-color: #1a1a1a;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-bottom {
    top: 50%;
    margin-top: -2px;
}
.hamburger.is-open .hamb-top {
    -webkit-transform: rotate(45deg);
    -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
}
.hamburger.is-open .hamb-middle { display: none; }
.hamburger.is-open .hamb-bottom {
    -webkit-transform: rotate(-45deg);
    -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
}
.hamburger.is-open:before {
    content: '';
    display: block;
    width: 100px;
    font-size: 14px;
    color: #fff;
    line-height: 32px;
    text-align: center;
    opacity: 0;
    -webkit-transform: translate3d(0,0,0);
    -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open:hover:before {
    opacity: 1;
    display: block;
    -webkit-transform: translate3d(-100px,0,0);
    -webkit-transition: all .35s ease-in-out;
}

/*-------------------------------*/
/*             Header            */
/*-------------------------------*/

header{
    width: 100%;
    height: 70px;
    position: fixed;
    top: 0;
    z-index: 1;
}

header.yellow{
    background: #eec31f url("/images/habitants/bg-header.jpg") no-repeat left center;
    background-size: contain;
    border-bottom: 1px solid #e3b81c;
}

header.purple{
    background: #8f6bab url("/images/espaces/bg-header.jpg") no-repeat left center;
    background-size: contain;
    border-bottom: 1px solid #8f6bab;
}

header.pink{
    background: #ec6da4 url("/images/usages/bg-header.jpg") no-repeat left center;
    background-size: contain;
    border-bottom: 1px solid #ec6da4;
}

header.blue{
    background: #2eb7e9 url("/images/informations/bg-header.jpg") no-repeat left center;
    background-size: contain;
    border-bottom: 1px solid #d6f1fb;
}

header .page-title{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.8em;
    font-weight: bold;
    color: #000;
    font-family: 'Myriad Pro Semibold';
}

/*-------------------------------*/
/*            Icon back          */
/*-------------------------------*/

.back{
    position: absolute;
    top: 20px;
    left: 10px;
    -webkit-transform: translate3d(0px,0,0);
    -webkit-transition: all .35s ease-in-out;
}

.back button{
    display: inline-block;
    background: transparent url("/images/back.png") no-repeat center center;
    width: 30px;
    height: 30px;
    background-size: contain;
    border: none;
}

/*-------------------------------*/
/*        Profile picture        */
/*-------------------------------*/

.profile-picture .profile{
    display: inline-block;
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0) url(/images/profile.jpg) center center no-repeat;
    background-size: cover;
    margin-right: 10px;
    border-radius: 50%;
    border: 2px solid #fff;/*
    -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);*/
}

.profile-picture{
    position: absolute;
    top: 10px;
    left: 60px;
    -webkit-transform: translate3d(0px,0,0);
    -webkit-transition: all .35s ease-in-out;
}

.profile-picture:after{
    content: '99';
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #adff2f;
    color: #fff;
    border-radius: 50%;
    border: 2px solid #fff;
    padding: 3px 3px;
    font-size: 16px;
    line-height: 16px;
}

/*-------------------------------*/
/*        Search + setup         */
/*-------------------------------*/

.search-setup{
    position: absolute;
    top: 20px;
    right: 15px;
}

.search-setup .search{
    display: inline-block;
    width: 30px;
    height: 30px;
    background: transparent url('/images/search.svg') no-repeat;
    background-size: contain;
    margin-right: 10px;
}

.search-setup .setup{
    display: inline-block;
    width: 30px;
    height: 30px;
    background: transparent url('/images/reglages.svg') no-repeat;
    background-size: contain;
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

/*-------------------------------*/
/*              Delete           */
/*-------------------------------*/

.delete{
    position: absolute;
    top: 25px;
    right: 15px;
    font-size: 1.4em;
}

.delete a{
    color: #000;
}

/*-------------------------------*/
/*            Overlay            */
/*-------------------------------*/

.overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(250,250,250,.8);
    z-index: 16;
}

/*-------------------------------------*/
/*   Availability & Visibility Button  */
/*-------------------------------------*/

#availability-button{
    display: inline-block;
    height: 52px;
    width: 52px;
    position: absolute;
    top: 70px;
    left: 0;
    z-index: 100;
}

#availability-button.z-index{
    z-index: 0;
}

#availability-button span.availability-sub-zone1{
    width: 15px;
    height: 15px;
    background: #88cb23;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 2px solid #fff;
    border-bottom-right-radius: 100%;
    z-index: 3;
    border: 2px solid #fff;
    border-left: 0;
    border-top: 0;
}

#availability-button span.availability-sub-zone2{
    width: 35px;
    height: 35px;
    background: #88cb23;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom-right-radius: 100%;
    z-index: 2;
    border: 2px solid #fff;
    border-left: 0;
    border-top: 0;
}

#availability-button span.availability-sub-zone3{
    width: 50px;
    height: 50px;
    background: #88cb23;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom-right-radius: 100%;
}

#visibility-button{
    display: inline-block;
    height: 50px;
    width: 50px;
    position: absolute;
    top: 70px;
    right: 0;
    z-index: 100;
}

#visibility-button.z-index{
    z-index: 0;
}

#visibility-button span.sub-zone1{
    width: 18px;
    height: 18px;
    background: #e20001;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 100%;
    z-index: 3;
    border-left: 0;
    border-top: 0;
}

#visibility-button span.sub-zone2{
    width: 35px;
    height: 35px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    border-bottom-left-radius: 100%;
    z-index: 2;
    border: 3px solid #e20001;
    border-right: 0;
    border-top: 0;
}

#visibility-button span.sub-zone3{
    width: 50px;
    height: 50px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    border-bottom-left-radius: 100%;
    border: 3px solid #e20001;
    border-right: 0;
    border-top: 0;
}

/*-------------------------------*/
/*           Drag & Drop         */
/*-------------------------------*/

#drag {
    display: block;
    overflow-x: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

#drag::before {
    content: '';
    width: 35px;
    height: 35px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -17px;
    margin-left: -17px;
    background-color: #FFFFFF;
    z-index: 3;
    border-radius: 50%;
}

#info-section{
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #fff;
    font-size: 16px;
    line-height: 50px;
    z-index: 100;
    height: 50px;
    vertical-align: middle;
    background: rgba(255,255,255,0.6);
}

#cursor {
    width: 20%;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    z-index: 3;
    transition-property: width, height, margin-top, margin-left, box-shadow;
    transition-duration: 0s;
    transition-timing-function: linear;
    -webkit-box-shadow: inset 0px -2px 5px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: inset 0px -2px 5px 0px rgba(0, 0, 0, 0.15);
    box-shadow: inset 0px -2px 5px 0px rgba(0, 0, 0, 0.15);
    cursor: -webkit-grab;
    opacity: 1;
}

#cursor:hover {
    width: 20%;
    -webkit-box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.4), inset 0px -2px 5px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.4), inset 0px -2px 5px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.4), inset 0px -2px 5px 0px rgba(0, 0, 0, 0.15);
}

#cursor:hover::after {
    opacity: 1;
}

#cursor.visibility-on{
    top: 65%;
}

#cursor.availability-on{
    left: 25%;
}

#drag #horizon {
    width: 100%;
    height: 8px;
    position: absolute;
    background-color: #FFFFFF;
    z-index: 1;
    top: 50%;
    left: 100%;
    transform: translate(-100%, -50%);
}

#drag #vertical {
    width: 8px;
    height: 100%;
    position: absolute;
    background-color: #fff;
    z-index: 1;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -100%);
}

#drag .quarter {
    width: 50%;
    height: 50%;
    position: absolute;
    /* display: inline-block; */
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    overflow: hidden;
}

.top-left {
    top: 0;
    left: 0;
    -webkit-mask-image: radial-gradient(circle 10px at 100% 100%, transparent 0, transparent 15px, black 16px);
}

.top-right {
    top: 0;
    right: 0;
    -webkit-mask-image: radial-gradient(circle 10px at 0 100%, transparent 0, transparent 15px, black 16px);
}

.bottom-left {
    bottom: 0;
    left: 0;
    -webkit-mask-image: radial-gradient(circle 10px at 100% 0, transparent 0, transparent 15px, black 16px);
}

.bottom-right {
    bottom: 0;
    right: 0;
    -webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 15px, black 16px);
}

.top-left span {
    background-color: #EDC136;
}

.top-right span {
    background-color: #8460A1;
}

.bottom-left span {
    background-color: #EA6FA3;
}

.bottom-right span {
    background-color: #38B8E7;
}

.quarter span {
    position: absolute;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    cursor: pointer;
}

.top-left span {
    bottom: 0;
    right: 0;
    border-top-left-radius: 100%;
}

.top-right span {
    bottom: 0;
    left: 0;
    border-top-right-radius: 100%;
}

.bottom-left span {
    top: 0;
    right: 0;
    border-bottom-left-radius: 100%;
}
.bottom-right span {
    top: 0;
    left: 0;
    border-bottom-right-radius: 100%;
}

.niveau1 { width: 33%; height: 33%; opacity: .5; z-index: 10; }

.niveau2 { width: 66%; height: 66%; opacity: .6; z-index: 5; }

.niveau3 { width: 100%; height: 100%; opacity: .7; z-index: 1; }

.dim{ opacity: 0.1; }


@media screen and (max-width: 414px){

    #container {
        width: 142.5%;
        height: 80%;
        position: absolute;
        top: 12%;
        left: 50%;
        margin-left: -71%;
    }

}

[draggable] {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    /* Required to make elements draggable in old WebKit */
    -khtml-user-drag: element;
    -webkit-user-drag: element;
}

/*--------------------------*/
/*          Points          */
/*--------------------------*/

#visibility-zone{
    position: absolute;
    width: 100%;
    height: calc(100% - 140px);
    background: rgba(255,255,255,0.5);
    z-index: 1;
}

#visibility-zone .white-zone{
    position: absolute;
    display: block;
    width: 15%;
    height: 100%;
    background: #ffffff;
    left: 50%;
    transform: translateX(-50%);
}

#visibility-zone .visibility-inside{
    position: absolute;
    top:10%;
    left: 50%;
    transform: translateX(-50%);
    width: 20%;
    height: 80%;
    background: transparent url('/images/visibility_available/champs_selection_etat-vertical.png') center center no-repeat;
    background-size: contain;
}

#visibility-zone .visibility-inside .sub-zone-visibility{
    position: absolute;
    width: 100%;
    height: 15%;
    left: 50%;
    transform: translateX(-50%);
}

#visibility3{
    top: 0%;
    left: 50%;
}

#visibility3:before{
    content: '';
    display: block;
    width: 40%;
    height: 45%;
    background: rgba(0, 0, 0, 0) url(/images/visibility_available/champs_visibility.png) center center no-repeat;
    background-size: contain;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#visibility2{
    top: 21%;
    left: 50%;
}

#visibility2:before{
    content: '';
    display: block;
    width: 40%;
    height: 45%;
    background: rgba(0, 0, 0, 0) url(/images/visibility_available/champs_visibility.png) center center no-repeat;
    background-size: contain;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#visibility1{
    top: 42.5%;
    left: 50%;
}

#visibility1:before{
    content: '';
    display: block;
    width: 40%;
    height: 45%;
    background: rgba(0, 0, 0, 0) url(/images/visibility_available/champs_visibility.png) center center no-repeat;
    background-size: contain;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#visibility-cancel{
    top: 65%;
    left: 50%;
}

#availability-zone{
    position: absolute;
    width: 100%;
    height: calc(100% - 140px);
    background: rgba(255,255,255,0.5);
    z-index: 1;
}

#availability-zone .white-zone{
    position: absolute;
    display: block;
    width: 100%;
    height: 10%;
    background: #ffffff;
    top: 50%;
    transform: translateY(-50%);
}

#availability-zone .availability-inside{
    position: absolute;
    left: 0%;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 20%;
    background: transparent url('/images/visibility_available/champs_selection_etat.png') center center no-repeat;
    background-size: contain;
}

#availability-zone .availability-inside .sub-zone-availability{
    position: absolute;
    width: 20%;
    height: 100%;
    top: 50%;
    transform: translateY(-50%);
}

#availability3{
    top: 0%;
    left: 82.5%;
}

#availability3:before{
    content: '';
    display: block;
    width: 35%;
    height: 35%;
    background: rgba(0, 0, 0, 0) url(/images/visibility_available/champs_availability.png) center center no-repeat;
    background-size: contain;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#availability2{
    top: 21%;
    left: 61.6%;
}

#availability2:before{
    content: '';
    display: block;
    width: 35%;
    height: 35%;
    background: rgba(0, 0, 0, 0) url(/images/visibility_available/champs_availability.png) center center no-repeat;
    background-size: contain;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#availability1{
    top: 42.5%;
    left: 40%;
}

#availability1:before{
    content: '';
    display: block;
    width: 35%;
    height: 35%;
    background: rgba(0, 0, 0, 0) url(/images/visibility_available/champs_availability.png) center center no-repeat;
    background-size: contain;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#availability-cancel{
    top: 65%;
    left: 9%;
}

/*--------------------------*/
/*          Content         */
/*--------------------------*/

.habitants h2.title-zone{
    color: #eec31f;
    font-size: 1.6em;
}

.espaces h2.title-zone{
    color: #865ea4;
    font-size: 1.6em;
}

.usages h2.title-zone{
    color: #ec6da4;
    font-size: 1.6em;
}

.informations h2.title-zone{
    color: #2eb7e9;
    font-size: 1.6em;
}


/*---------- Habitant 1 ------*/

#habitat_top_zone_agenda.no_scroll{
    position: fixed;
    top: 80px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#habitat_top_zone_agenda{
    position: fixed;
    top: 113px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

/*---------- Habitant 2 ------*/

#habitat-header-img.no_scroll{
    position: fixed;
    top: 70px;
    background: transparent url("/images/habitants/habitants_2/header_scroll.jpg") center center no-repeat;
    background-size: cover;
    width:100%;
    height: 150px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    z-index: 10;
}

#habitat-header-img{
    position: fixed;
    top: 70px;
    background: transparent url("/images/habitants/habitants_2/header.jpg") center center no-repeat;
    background-size: cover;
    width:100%;
    height: 190px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    z-index: 10;
}

/*---------- Espaces 1 ------*/

#espace_top_zone_agenda.no_scroll{
    position: fixed;
    top: 80px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#espace_top_zone_agenda{
    position: fixed;
    top: 113px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

/*---------- Arrow effect ------*/

.relative{
    position: relative;
    display: block;
}

span.arrow{
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    background: url("/images/arrow_rotation.jpg") no-repeat center center;
    background-size: contain;
}

.collapsed span.arrow{
    background: url("/images/arrow.jpg") no-repeat center center;
    background-size: contain;
}

/*--------------------------*/
/*          Footer          */
/*--------------------------*/

footer{
    position: fixed;
    background-color: #FFF;
    width:100%;
    height: 71px;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid #e6e6e6;
}

footer.is-open{
    left: 220px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

footer .relative{
    position: relative;
    height: 70px;
}

footer .map{
    display: block;
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    width: 50px;
    height: 40px;
}

footer .map.map3d{
    background: transparent url('/images/map3d.svg') no-repeat center;
    background-size: contain;
}

footer .map.map2d{
    background: transparent url('/images/map2d.svg') no-repeat center;
    background-size: contain;
}

footer .map.list{
    background: transparent url('/images/list.svg') no-repeat center;
    background-size: contain;
}

footer .home{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0) url(/images/home.svg) no-repeat center;
    background-size: contain;
}

footer .concierge{
    display: block;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 60px;
    height: 40px;
    background: transparent url('/images/concierge.svg') no-repeat center;
    background-size: contain;
}