/**************************************************************************
/* GLOBAL
/*************************************************************************/

html {
	width : 100% ;
    height : 100% ;
    overflow : hidden ;
}

body {
    position : absolute ;
    top : 0 ;
    left : 0 ;
    width : 100% ;
    height : 100% ;
    margin : 0 ;
    padding : 0 ;
    overflow : hidden ;
    
	font-family : 'Roboto', sans-serif ;
    font-size : 14px ;
    -webkit-font-smoothing : antialiased ;
    font-smoothing : antialiased ;
    font-smooth : always ;
	color: #605d5d ;
    background : #282828 ;
}

html, body, body * {
    box-sizing : border-box ;
    -webkit-font-smoothing : antialiased ;
    -moz-osx-font-smoothing : grayscale ;
}

main, section, article, figure {
    margin : 0 ;
}

a, input {
    outline : none ;
}
a {
    text-decoration : none ;
}

button {
    cursor : pointer ;
}

h1 {
    position: fixed ;
    top : -100px ;
    left : 0 ;
    visibility : hidden ;
}

@keyframes fadein {
    0% {
        opacity : 0 ;
    }
    100% {
        opacity : 1 ;
    }
}

@keyframes fadetoright {
    0% {
        opacity : 0 ;
        margin-right : 40px ;
    }
    25% {
        opacity : 0 ;
        margin-right : 40px ;
    }
    100% {
        opacity : 1 ;
        margin-right: 0 ;
    }
}

@keyframes fadefromleft {
    0% {
        opacity : 0 ;
        margin-left : -40px ;
    }
    25% {
        opacity : 0 ;
        margin-left : -40px ;
    }
    100% {
        opacity : 1 ;
        margin-left: 0 ;
    }
}

/**************************************************************************
/* INTRO
/*************************************************************************/

body.intro {
    background : #ffffff ;
    display : table ;
}

#intro-ctn {
    position : relative ;
    display : table-cell ;
    width : 100% ;
    height : 100% ;

    text-align : center ;
    vertical-align : middle ;
}

#intro {
	position: relative;
	width: 500px;
	height: 90px;
    display : inline-block ;
}
#intro > div {
    position : absolute ;
    width : 75px ;
    height : 75px ;
}

#intro .intro1,
#intro .intro2,
#intro .intro3 {
	background-color : #c0c0c0 ;
}
#intro .intro1 {
	left : 0 ;
}
#intro .intro2 {
	left : 85px ;
}
#intro .intro3 {
	left : 170px ;
}
#intro .intro4 {
	left : 255px ;
	width : 245px ;
	background: url('../img/intro/intro-4.png') no-repeat;
}
#intro .intro5 {
	background: url('../img/intro/intro-T.png') no-repeat 3px ;
}
#intro .intro6 {
	top : 40px;
	width : 500px;
	height : 75px;
	background : url('../img/intro/intro-text.png') no-repeat left 50px ;
}

/**************************************************************************
/* CONTAINERS
/*************************************************************************/

#wrap {
	width : 100% ;
    height : 100% ;
    background-size : cover ;
    background-position : center ;
}

#sidebar {
    position : relative ;
    z-index : 10 ;
    top : 0 ;
    left : 0 ;
    float : left ;
    width : 272px ;
    height : 100% ;
    padding : 16px ;
    background : #222 ;
    /* background : rgba(255, 255, 255, 0.5) ; */
    background : rgba(16, 16, 16, 0.67) ;
    box-shadow : 0 0 2px rgba(0, 0, 0, 0.5) ;
    overflow-x : hidden ;
    overflow-y : auto ;
    
    transition : visibility 0s linear 0s, left 1s ease, opacity 1s ease ;
}
.focus-picture #sidebar {
    left : -128px !important ;
    opacity : 0 ;
    visibility : hidden ;
    
    transition : visibility 0s linear 1s, left 1s ease, opacity 1s ease ;
}

.focus-out {
    transition : visibility 0s linear 0s, transform 1s ease, opacity 1s ease ;
}
.focus-picture .focus-out {
    transform : translateX(64px) ;
    opacity : 0 ;
    
    transition : visibility 0s linear 1s, transform 1s ease, opacity 1s ease ;
}

@keyframes focusbtnshow {
    0% {
        opacity : 0 ;
    }
    50% {
        opacity : 0 ;
    }
    80% {
        opacity : 1 ;
    }
    100% {
        opacity : 0.9 ;
    }
}

#focus-picture-ctn {
    position : fixed ;
    z-index : 9 ;
    left : 376px ; /* 384 - 8 */
    bottom : 40px ;
    transform : translate(-50%, -50%) ;
    
    width : 96px ;
    height : 64px ;
}
#focus-picture-btn {
    width : 64px ;
    height : 64px ;
    padding : 0 ;
    margin : 0 0 0 16px ;
    
    border : 0 solid rgba(255, 255, 255, 0.1) ;
    background-color : rgba(255, 255, 255, 0.5) ;
    background-image : url(../img/focus.png) ;
    background-size : 22px ;
    background-repeat : no-repeat ;
    background-position : center ;
    
    outline : none ;
    box-shadow : 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 32px rgba(255, 255, 255, 0.5) ;
    text-align : center ;
    opacity : 0.9 ;
    
    animation : focusbtnshow 2s ;
    transition : all 0.25s, background-size 0.1s ;
}
#focus-picture-btn.active {
    width : 96px ;
    margin : 0 0 0 0 ;
    background-color : rgba(255, 255, 255, 0.25) ;
    border : 2px solid rgba(255, 255, 255, 0.25) ;
}
#focus-picture-btn:hover {
    opacity : 1 ;
    background-color : rgba(255, 255, 255, 0.75) ;
}
#focus-picture-btn:active {
    background-color : rgba(255, 255, 255, 0.9) ;
    background-size : 18px ;
}

#back-ctn {
    position : fixed ;
    z-index : 9 ;
    left : 376px ; /* 384 - 8 */
    top : 96px ;
    transform : translate(-50%, -50%) ;
    
    width : 96px ;
    height : 64px ;
}
#back-btn {
    width : 64px ;
    height : 64px ;
    padding : 0 ;
    margin : 0 0 0 16px ;
    
    border : 0 solid rgba(255, 255, 255, 0.1) ;
    background-color : rgba(255, 255, 255, 0.5) ;
    
    outline : none ;
    box-shadow : 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 32px rgba(255, 255, 255, 0.5) ;
    text-align : center ;
    opacity : 0.9 ;
    
    animation : focusbtnshow 2s ;
    transition : all 0.25s ;
}
#back-btn:hover {
    opacity : 1 ;
    background-color : rgba(255, 255, 255, 0.75) ;
}
#back-btn:active {
    background-color : rgba(255, 255, 255, 0.9) ;
}
#back-btn span {
    position : relative ;
    top : -2px ;

    color : #c00000 ;
    font-family : Cabin ;
    font-size : 32px ;
    text-shadow : -1px 0 0 rgba(255, 255, 255, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.5),
        1px 0 0 rgba(255, 255, 255, 0.5),
        0 -1px 0 rgba(255, 255, 255, 0.5) ;

    transition : font-size 0.1s ;
}
#back-btn:active span {
    font-size : 24px ;
}

.square {
    display : inline-block ;
    width : 14px ;
    height : 14px ;
}

/**************************************************************************
/* HEADER
/*************************************************************************/

#head {
    margin : 24px 0 ;
}

#head hr {
	border-color: #dc2a00;
	border-width: 1px 0 0 0px;
	border-style: solid;
	height: 1px;
	width: 100%;
	margin: 15px 0px 0px 0px;
}

#head > a > img {
    margin-left : 2px ;
    margin-bottom : 16px ;
    width : 236px ;
}

#nav {
    margin : 64px 0 ;
	text-align : center ;
}

#nav > ul {
	margin: 0;
	padding: 0;
}
#nav > ul li {
    list-style : none ;
}
#nav > ul li a {
    font-size : 14px ;
    text-transform : uppercase ;
	color: #a0a0a0 ;
    text-shadow : 0 0 3px rgba(0, 0, 0, 0.5) ;
    letter-spacing : 2px ;
	line-height: 40px;
    text-decoration : none ;
    
    transition : color 0.2s ease ;
}
#nav > ul li a:hover {
    color : #c07070 ;
}
#nav > ul li a.selected {
	color: #ccc ;
}

#nav .nav-categories {
    position : relative ;
    top : -8px ;
    height : auto ;
    text-align : right ;
    padding : 0 16px 0 0 ;
}
#nav .nav-categories li {
    position : relative ;
    height : auto ;
    margin : 8px 0 ;

    transition : padding-right 0.25s ease ;
}
#nav .nav-categories li:hover {
    padding-right : 8px ;
}
#nav .nav-categories li.current {
    padding-right : 8px ;
    transition : padding-right 0s ;
}
#nav .nav-categories li a {
    font-size : 10px ;
    letter-spacing : 1px ;
    line-height : normal ;
}
#nav .nav-categories li a .square {
    position : absolute ;
    top : 5px ;
    right : -16px ;
    width : 9px ;
    height : 9px ;
}
#nav .nav-categories li.current a .square {
    border : 1px solid rgba(255, 255, 255, 0.75) ;
}

#copyright {
    position : fixed ;
    z-index : 20 ;
    left : 0 ;
    bottom : 0 ;
    width : 272px ;
    padding : 16px ;

    text-align : center ;
    color : #606060 ;
    font-size : 10px ;
    background-color : rgba(0, 0, 0, 0.1) ;

    transition : color 1s, background-color 1s ;
}
.focus-picture #copyright {
    color : #a0a0a0 ;
    background-color : rgba(0, 0, 0, 0.5) ;
}

.language-group {
    margin-top : 32px ;
}
.language-btn {
    width : 40px ;
    margin : 8px ;
    padding : 4px ;
    opacity : 0.5 ;
    cursor : pointer ;

    transition : all 0.2s ease ;
}
.language-btn.active {
    opacity : 0.75 ;
}
.language-btn:hover {
    padding : 0 ;
    opacity : 1 ;
}

/**************************************************************************
/* MAIN CONTENT
/*************************************************************************/

#main {
    position : relative ;
	float : right ;
    width : calc(100% - 272px) ;
    height : 100% ;
}

.hr {
	height: 1px;
	border: none;
	margin-bottom: 20px;
}
.clearfix {
	float: none;
	clear: both;
}

/**************************************************************************
/* HOME
/*************************************************************************/

#home {
    
}

#model {
    display : block ;
    position : absolute ;
    
    top : 40px ;
    right : 40px ;
    width : 400px ;
    height : 264px ;
    
    padding : 16px 64px ;
    overflow : hidden ;
    
    line-height : 24px ;
    
    background : white ;
    background : rgba(255, 255, 255, 0.95) ;
    box-shadow : 0 0 4px rgba(0, 0, 0, 0.25) ;
    
    animation : fadetoright 2s ;
}
#model ul {
    list-style : none ;
}
#model ul, #model ul li {
    margin : 0 ;
    padding : 0 ;
}
#model ul li {
    position : relative ;
}
#model .archlog {
    color : #008060 ;
}
#model .archlog .square {
    background-color : #008060 ;
}
#model .archeq {
    color : #80a020 ;
}
#model .archeq .square {
    background-color : #80a020 ;
}
#model .urb {
    color : #00a0c0 ;
}
#model .urb .square {
    background-color : #00a0c0 ;
}
#model h3 {
    padding : 0 ;
    margin : 8px 0 0 0 ;
    font-size : 14px ;
    letter-spacing : 1px ;
    text-transform : uppercase ;
}
#model h3 .square {
    position : absolute ;
    left : -28px ;
    top : 4px ;
}
#model li:first-child h3 {
    margin : 0 ;
}
#model h4 {
    padding : 0 ;
    margin : 0 0 0 16px ;
    font-size : 12px ;
    font-weight : normal ;
    letter-spacing : 0.5px ;
    text-transform : uppercase ;
    color : #605d5d ;
}

#presentation {
    display : block ;
    position : absolute ;
    
    top : 320px ;
    right : 40px ;
    width : 400px ;
    height : 50% ;
    height : calc(100% - 360px) ;
    
    padding : 48px 48px 8px 48px ;
    overflow-y : auto ;
    
    line-height : 24px ;
    
    background : white ;
    background : rgba(255, 255, 255, 0.95) ;
    box-shadow : 0 0 4px rgba(0, 0, 0, 0.25) ;
    
    animation : fadetoright 1.5s ;
}
#presentation p {
    margin : 0 0 20px 0 ;
}

/**************************************************************************
/* ACTU
/*************************************************************************/

[data-page="actus"] #sidebar {
    position : absolute ;
    z-index : 10 ;
    top : 0 ;
    left : 0 ;
}
[data-page="actus"] #main {
    width : 100% ;
}

#actu {
    left : -272px ;
    width : 100% ;
    height : 100% ;
    height : calc(100% - 45px) ;
    overflow-x : hidden ;
    overflow-y : scroll ;
}
#actu .actu {
    position : relative ;
    width : 100% ;
    height : 100% ;
    padding-left : 272px ;
    
    background-size : cover ;
    background-position : center ;
    background-repeat : no-repeat ;
    border-top : 8px solid #202020 ;
    border-bottom : 8px solid #202020 ;
}
.focus-picture #actu .actu {
    background-size : contain ;
}
#actu .actu .content {
	display : inline-block ;
    position : absolute ;
    
    top : 15% ;
    right : 40px ;
    width : 400px ;
    height : 70% ;
    
    padding : 32px 32px 24px 24px ;
    overflow-y : auto ;
    
    line-height : 24px ;
    
    background : white ;
    background : rgba(255, 255, 255, 0.95) ;
    box-shadow : 0 0 4px rgba(0, 0, 0, 0.25) ;
    
    animation : fadetoright 1.5s ;
}
#actu .actu .content h2 {
    margin-bottom : 32px ;
	padding: 1px 0 0 32px ;
    overflow: hidden;
    
	color: #dc2a00;
	font-size: 14px;
	font-weight: 700;
    letter-spacing : 1px ;
	background : url('img/grey-square.png') no-repeat -5px -5px;
}
#actu .actu .content p {
    margin-top : 8vh ;
	margin-left : 32px ;
	font-size : 12px ;
	line-height : 20px ;
    letter-spacing : 0.5px ;
}
#actu .actu .content p .actudate {
	font-weight : bold ;
    letter-spacing : 1px ;
}

@keyframes animactunav {
    0% {
        margin-left : -4px ;
    }
    100% {
        margin-left : 4px ;
    }
}

#actu .actunav {
    position : absolute ;
    right : 208px ;
    width : 64px ;
    height : 128px ;
    overflow : show ;
    
    padding : 0 ;
    margin : 0 ;
    
    color : white ;
    background : transparent ;
    border : none ;
    border-radius : 0 ;
    outline : none ;
    
    transform : rotateZ(90deg) ;
}
#actu .actunav.previous {
    top : -32px ;
    transform : rotateZ(-90deg) ;
}
#actu .actunav.next {
    bottom : -32px ;
    transform : rotateZ(90deg) ;
}
#actu .actunav div {
    position : relative ;
}
#actu .actunav i {
    display : block ;
    position : relative ;
    top : -2px ;
    left : 8px ;
    
    color : #ffffff ;
    font-family : Cabin, monospace ;
    font-size : 48px ;
    font-style : normal ;
    line-height : 0 ; 
    
    transform : scaleX(0.9) ;
    transition : left 0.33s ease, text-shadow 1s ease ;
    
    animation-name : animactunav ;
    animation-duration : 1.5s ;
    animation-iteration-count : infinite ;
    animation-direction : alternate ;
    animation-timing-function : ease-in-out ;
}
#actu .actunav:hover i {
    left : 16px ;
    text-shadow : 0 0 1px #ffffff, 0 0 32px #ffffff ;
}
#actu .actunav span {
    display : block ;
    position : relative ;
    left : 16px ;
    
    color : rgba(255, 255, 255, 0.9) ;
    font-size : 14px ;
    font-style : normal ;
    font-family : 'Roboto' ;
    line-height : 0 ;
    letter-spacing : 1px ;
    text-shadow : 0 0 4px rgba(0, 0, 0, 0.5) ;
    
    opacity : 0 ;
    transform : rotateZ(-90deg) ;
    transition : opacity 0.25s ease, top 0.25s ease ;
}
#actu .actunav.previous span {
    top : 64px ;
    transform : rotateZ(90deg) ;
}
#actu .actunav.next span {
    top : -64px ;
    transform : rotateZ(-90deg) ;
}
#actu .actunav:hover span {
    opacity : 1 ;
}
#actu .actunav.previous:hover span {
    top : 88px ;
}
#actu .actunav.next:hover span {
    top : -88px ;
}
#actu .actunav div:before {
    content : '' ;
    display : block ;
    position : absolute ;
    top : -66px ;
    left : 0 ;
    width : 0 ;
    height : 0 ;

    border-top : 66px solid transparent ;
    border-bottom : 66px solid transparent ;
    border-right :66px solid #202020 ;
}

#actu .actu:first-child .previous {
    display : none ;
}
#actu .actu:last-child .next {
    display : none ;
}

#actubar-ctn {
    position : absolute ;
    bottom : 0 ;
    left : 272px ;
    width : calc(100% - 272px) ;
    height : 45px ;

    overflow : hidden ;
}
#actubar {
    position : relative ;
    left : 0 ;
}
#actubar .actuitem {
    float : left ;
    height : 45px ;
    padding-right : 16px ;

    border-right : 4px solid #202020 ;
    cursor : pointer ;

    transition : background-color 0.25s ease ;
}
#actubar .actuitem:hover {
    background-color : #303030 ;
}
#actubar .actuitem:hover span {
    color : #808080 ;
}
#actubar .actuitem.current span {
    color : #a0a0a0 ;
}
#actubar .actuitem img {
    height : 45px ;
}
#actubar .actuitem span {
    display : inline-block ;
    position : relative ;
    top : -20px ;
    left : 4px ;

    font-size : 11px ;
    font-weight : bold ;
    color : #606060 ;
    line-height : 45px ;
}

/**************************************************************************
/* PROJECTS
/*************************************************************************/

/* Couleurs choisies
    Logements neufs : #008060
    Logements réhabilités : #80a020
    Equipement : #0080a0
    Urbanisme : #00a0c0
    Projecs publiés, mentionnés ou primés : #a07060
    Projets auxquels vous avez échappé : #a08080
*/

[data-page="projects"] #sidebar {
    position : absolute ;
    z-index : 10 ;
    top : 0 ;
    left : 0 ;
}
[data-page="projects"] #main {
    width : 100% ;
}

#projects {
    position : relative ;
    width : 100% ;
    height : 100% ;
    overflow-x : hidden ;
    overflow-y : auto ;
    
    background-size : cover ;
    background-position : center ;
    background-repeat : no-repeat ;
}
.focus-picture #projects {
    overflow : hidden ;
}

#projects .project-ribbon {
    position : fixed ;
    z-index : 10 ;
    top : 0 ;
    left : 272px ;
    width : 6px ;
    height : 100% ;
    
    transition : width 0.5s ease 1s, opacity 0.5s ease 1s, background-color 0.25s ease ;
}
.focus-picture #projects .project-ribbon {
    width : 0 ;
    opacity : 0 ;
    
    transition : width 0.5s ease 0s, opacity 0.5s ease 0s ;
}

/* Liste des catégories */

#projects .categories {
    display : block ;
    position : absolute ;
    
    top : calc(50% - 256px) ;
    left : calc(50% - 120px) ;
    width : 512px ;
    height : 512px ;
    
    padding : 48px ;
    margin : 0 ;
    
    list-style : none ;
    line-height : 24px ;
    
    background : white ;
    background : rgba(255, 255, 255, 0.95) ;
    box-shadow : 0 0 4px rgba(0, 0, 0, 0.25) ;
    
    animation : fadefromleft 1.5s ;
}
#projects .categories li {
    position : relative ;
    padding-left : 48px ;

    background-color : transparent ;

    transition : background-color 0.5s ease, padding 0.5s ease  ;
}
#projects .categories li:hover {
    padding-left : 64px ;
    background-color : #ffffff ;
}

#projects .categories li .square {
    position : absolute ;
    left : 18px ;
    top : 28px ;
}
#projects .categories li a {
    display : inline-block ;
    width : 100% ;
    height : 100% ;

    text-transform : uppercase ;
    font-size : 14px ;
    font-weight : bold ;
    letter-spacing : 1px ;
    line-height : 72px ;
}

/* Liste des projets d'une catégorie */

#projects-list {
    background : #202020 ;
    min-height : 100% ;
}
#projects h2 {
    margin : 0 0 0 282px ;
    padding : 16px ;
}

#projects .no-project {
    width : 100% ;
    margin-top : 40px ;
    margin-left : 400px ;
    font-size : 24px ;
    color : #303030 ;
    letter-spacing : 2px ;
}

#projects .project {
    position : relative ;
    width : 100% ;
    height : 128px ;
    padding-left : 278px ; /* 272 + 6 */
    border-top : 4px solid #202020 ;
    border-bottom : 4px solid #202020 ;
    overflow : hidden ;
}
#projects .project .image-bg {
    position : absolute ;
    z-index : 0 ;
    top : 0 ;
    left : 0 ;
    width : 100% ;
    height : 100% ;
    opacity : 0.25 ;
    
    background-size : cover ;
    background-position : center left ;
    background-repeat : no-repeat ;
}
#projects .project .project-ctn {
    display : inline-block ;
    position : relative ;
    z-index : 1 ;
    width : 100% ;
    height : 100% ;
    margin-left : 0 ;
    background : rgba(32, 32, 32, 0.8) ;
    
    transition : background 0.5s ease, opacity 1s ease, margin-left 0.5s ease ;
}
#projects .project.hidden .project-ctn {
    margin-left : 40px ;
    opacity : 0 ;
}
#projects .project:hover .project-ctn {
    background : rgba(32, 32, 32, 0.9) ;
}
#projects .project .image {
    float : left ;
    width : 30% ;
    height : 100% ;
    opacity : 0.75 ;
    
    background-size : cover ;
    background-position : center ;
    background-repeat : no-repeat ;
    
    transition : opacity 0.5s ease ;
}
#projects .project:hover .image {
    opacity : 1 ;
}
#projects .project .desc {
    float : right ;
    width : 70% ;
    height : 100% ;
    padding : 0 16px ;
}
#projects .project .desc h3 {
    letter-spacing : 1px ;
    opacity : 0.75 ;
    
    transition : margin 0.5s ease ;
}
#projects .project:hover .desc h3 {
    opacity : 1 ;
    margin-left : 8px ;
}
#projects .project .desc p {
    letter-spacing : 0.5px ;
    font-size : 13px ;
    color : #808080 ;
    opacity : 0.9 ;
}
#projects .project:hover .desc p {
    opacity : 1 ;
}

/* Détails d'un projet */

#projects.project-details {
    background : transparent ;
}
#project-bg {
    position : fixed ;
    z-index : 0 ;
    top : 0 ;
    left : 0 ;
    width : 100% ;
    height : 100% ;
    
    opacity : 0.75 ;
    
    background-size : cover /* 100% */ ;
    background-position : center ;
    background-repeat : no-repeat ;
    
    transition : background-size 0.5s ease, opacity 1s ease ;
}
.focus-picture #project-bg {
    background-size : contain /* 90% */ ;
    opacity : 1 ;
}
#project-ctn {
    position : absolute;
    z-index : 1 ;
    top : 0 ;
    right : 40px ;
    width : 480px ;
    
    margin : 40px 0 ;
    
    animation : fadetoright 1.5s ;
}

#projects .project-header {
    padding : 8px 8px 8px 8px ;
    
    line-height : 24px ;
    
    background : #202020 ;
    background : rgba(32, 32, 32, 0.9) ;
    box-shadow : 0 0 4px rgba(0, 0, 0, 0.25) ;
}
#projects.project-details h2 {
    margin : 0 ;
}
#projects.project-details h3 {
    margin : 0 0 16px 0 ;
    padding : 0 16px ;
    letter-spacing : 0.5px ;
    font-size : 13px ;
    color : #808080 ;
    opacity : 0.9 ;
}

#projects .project-pictures {
    margin : 16px 0 ;
    padding : 8px ;
    
    background : white ;
    background : rgba(255, 255, 255, 0.95) ;
    box-shadow : 0 0 4px rgba(0, 0, 0, 0.25), inset 0 0 64px rgba(255, 255, 255, 0.25) ;
}
#projects .project-pictures img {
    position : relative ;
    top : 2px ;
    height : 64px ;
    margin : 8px ;

    border : 2px solid transparent ;
    cursor : pointer ;

    transition : border 0.25s ease ;
}
#projects .project-pictures img:hover {
    border-color : #c00000 ;
}
#projects .project-pictures img.current {
    border-color : #ffffff ;
}

#projects #pictures-nav.project-pictures {
    position : fixed ;
    margin : 0 ;
    padding : 0 ;
    z-index : 8 ;
    bottom : 72px ;
    right : -48px ;
    width : calc(100% - 440px) ;

    background : rgba(255, 255, 255, 0.25) ;
    border : 2px solid rgba(255, 255, 255, 0.25) ;
    border-right : none ;
    opacity : 0 ;
    visibility : hidden ;

    transition : visibility 0s linear 1s, opacity 1s ease, right 1s ease, background-color 0.25s ;
}
#projects #pictures-nav.project-pictures img {
    height : 48px ;
    margin : 4px 8px ;
}
.focus-picture #projects #pictures-nav.project-pictures {
    right : 0 ;
    opacity : 0.9 ;
    visibility : visible ;

    transition : visibility 0s linear 0.5s, opacity 1s ease 0.5s, right 1s ease 0.5s, background-color 0.25s ;
}
.focus-picture #projects #pictures-nav.project-pictures:hover {
    opacity : 1 ;
    background-color : rgba(255, 255, 255, 0.75) ;
}

#projects .project-desc {
    margin : 16px 0 ;
    padding : 48px ;
    
    line-height : 24px ;
    
    background : white ;
    background : rgba(255, 255, 255, 0.95) ;
    box-shadow : 0 0 4px rgba(0, 0, 0, 0.25) ;
}
#projects .project-desc table {
    width : 100% ;
}
#projects .project-desc td {
    border-bottom : 2px solid rgba(0, 0, 0, 0.025) ;
}
#projects .project-desc td:first-child {
    width : 128px ;
    color : #808080 ;
}
#projects .project-info {
    margin-top : 16px ;
    padding : 48px ;
    
    line-height : 24px ;
    
    background : white ;
    background : rgba(255, 255, 255, 0.95) ;
    box-shadow : 0 0 4px rgba(0, 0, 0, 0.25) ;
}

/**************************************************************************
/* AGENCE
/*************************************************************************/

#agence {
    width : 100% ;
    height : 100% ;
    overflow-x : hidden ;
    overflow-y : auto ;
}
#agence h2 {
    color : #ac1a00 ;
    font-size : 14px ;
    letter-spacing : 1px ;
    text-transform : uppercase ;
}
#agence .content {
    position : absolute ;
    z-index : 1 ;
    top : calc(50% - 232px) ;
    right : 5% ;
    width : 960px ;
    height : 464px ;

    animation : fadetoright 1.5s ;
}

#agence .photos {
    float : right ;
    width : 464px ;
    height : 464px ;
    padding : 16px 0 0 16px ;

    background : black ;
    background : rgba(0, 0, 0, 0.9) ;
    box-shadow : 0 0 4px rgba(0, 0, 0, 0.25) ;

    animation : fadetoright 2s ;
}
#agence .photos ul {
    margin : 0 ;
    padding : 0 ;
}
#agence .photos .photo {
    float : left ;
    width : 108px ;
    height : 108px ;
    margin : 0 ;
    padding : 0 ;

    border : 4px solid transparent ;
    list-style : none ;

    transition : border 0.25s ease ;
}
#agence .photos .photo img {
    width : 100px ;
    height : 100px ;
}
#agence .photos .photo.focus {
    border-color : #ffffff ;
}

#agence .names {
    float : right ;
    width : 344px ;
    height : 464px ;
    padding : 20px 8px 8px 32px ;
    margin : 0 0 16px 16px ;

    background : white ;
    background : rgba(255, 255, 255, 0.9) ;
    box-shadow : 0 0 4px rgba(0, 0, 0, 0.25) ;
}
#agence .names ul {
    margin : 0 0 0 -24px ;
    padding : 0 ;
    list-style : none ;
}
#agence .names li {
    margin : 0 ;
    padding : 2px 0 2px 24px ;

    font-size : 12px ;

    transition : background-color 0.25s ease ;
}
#agence .names li.focus {
    background-color : #ffffff ;
}
#agence .names li span {
    font-weight : bold ;
    letter-spacing : 0.5px ;
}
#agence .names a {
    text-decoration : none ;
    color : #dc2a00 ;
}

#agence .names table td:first-child {
    width : 80px ;
}

/**************************************************************************
/* CONTACT
/*************************************************************************/

@keyframes contactshow {
    0% {
        opacity : 0 ;
        height : 600px ;
    }
    25% {
        opacity : 0 ;
        height : 600px ;
    }
    100% {
        opacity : 1 ;
        height : 336px ;
    }
}

#contact {
    position : relative ;
    width : 100% ;
    height : 100% ;
    overflow : hidden ;
}
#contact .content {
    display : inline-block ;
    position : absolute ;
    top : 10% ; /* IE8 filter */
    top : calc(50% + 0px) ;
    right : 10% ;
    transform : translateY(-50%) ;
    
    width : 840px /* 272px */ ;
    height : 336px ;
    
    animation : contactshow 1.5s ;
}
#contact .content > section {
    display : inline-block ;
    position : absolute ;
    
    width : 256px ;
    height : 256px ;
    
    padding : 32px 32px 24px 32px ;
    margin : 8px ;
    overflow-y : auto ;
    
    line-height : 24px ;
    
    background : white ;
    background : rgba(255, 255, 255, 0.95) ;
    box-shadow : 0 0 4px rgba(0, 0, 0, 0.25) ;
}
#contact .content > section.contact-left {
    left : 0 ;
    top : 0 ;
}
#contact .content > section.contact-middle {
    left : 280px ;
    top : 10% ;
}
#contact .content > section.contact-right {
    left : 560px ;
    bottom : 0 ;
}

#contact .content > section h2 {
	color : #ac1a00 ;
	font-size : 16px;
	font-weight : normal ;
	margin : 12px 0 ;
    letter-spacing : 0.5px ;
}
#contact .content > section p {
	margin : 0 0 16px 0 ;
	font-size : 14px ;
	line-height : 16px ;
    letter-spacing : 1px ;
}
#contact .content > section span {
	margin : 0 ;
    font-family : monospace ;
	font-size : 12px ;
}
#contact .content > section a,
#contact .content > section a:hover,
#contact .content > section a:visited
{
	text-decoration : none ;
    
	font-size : 12px ;
	letter-spacing : 1px ;
	color : #dc2a00 ;
}
#contact .content > section a:hover
{
	text-decoration : underline ;
}

#contact .mini-title {
    display : inline-block ;
    font-size : 24px ;
    margin-right : 4px ;
}
#contact .mini-title-sub {
    display : inline-block ;
    font-size : 11px ;
    line-height : 9px ;
}