@font-face { 
font-family: 'archistico_bold';
src: url('typos/archistico/archistico_bold_webfont.eot');
src: url('typos/archistico/archistico_bold_webfont.eot?#iefix') format('embedded-opentype'),
url('typos/archistico/archistico_bold_webfont.woff') format('woff'),
url('typos/archistico/archistico_bold_webfonf.ttf') format('truetype');
;}

@font-face { 
font-family: 'walkway_semibold';
src: url('typos/walkway_semibold/walkway_semibold_webfont.eot');
src: url('typos/walkway_semibold/walkway_semibold_webfont.eot?#iefix') format('embedded-opentype'),
url('typos/walkway_semibold/walkway_semibold_webfont.woff') format('woff'),
url('typos/walkway_semibold/walkway_semibold_webfont.ttf') format('truetype'),
url('typos/walkway_semibold/walkway_semibold_webfont.svg#walkway_SemiBold') format('svg');
}

@font-face { 
font-family: 'OldSansBlack';
src: url('typos/oldsansblack/OldSansBlack.ttf') format('truetype');
}
@font-face { 
font-family: 'oswald-light';
src: url('typos/oswald/oswald-light.ttf') format('truetype');
}
@font-face { 
font-family: 'oswald-regular';
src: url('typos/oswald/oswald-regular.ttf') format('truetype');
}

@font-face { 
font-family: 'droidsans'; 
src: url('typos/droidsans/droidsans.ttf') format('truetype');
}
@font-face { 
font-family: 'droidsans-bold';
src: url('typos/droidsans/droidsans-bold.ttf') format('truetype');
}

@font-face { 
font-family: 'gravitybold';
src: url('typos/gravity/gravity_bold.ttf') format('truetype');
}
@font-face { 
font-family: 'gravitybook';
src: url('typos/gravity/gravity_book.ttf') format('truetype');
}
@font-face { 
font-family: 'gravitylight';
src: url('typos/gravity/gravity_light.ttf') format('truetype');
}
@font-face { 
font-family: 'gravityregular';
src: url('typos/gravity/gravity-regular.ttf') format('truetype');
}
@font-face { 
font-family: 'gravityultralight';
src: url('typos/gravity/gravity-ultralight.ttf') format('truetype');
}



/*Reset CSS*/

*
{
box-sizing: border-box;
}

h1,h2,h3,h4,h5,h6,p
{
margin:0;
}

ul 
{
list-style-type: none;
}

/*global*/

html
{

height:100%;
}


body
{
margin: 0;
background: linear-gradient(to right,#323232 0%, #505050 120%);
background: -webkit-linear-gradient(left,#323232 0%, #505050 120%);
background: -moz-linear-gradient(left,#323232 0%, #505050 120%);
}





         /* INDEX */



#index
{
width: 100%;
height: 100vh;
overflow: hidden;
    
}

#index .left
{
width: 50%;
height: 100vh;
background: url(img/menu.gif);
display: inline-block;
border-right: solid grey 1px;
z-index: 0;
}

#index #img
{
position: absolute;
top: calc(50vh - (40vw / 2));
left:  calc(50vw - (40vw / 2));
width: 40vw;
max-width: 300px;
border-radius: 50%;
z-index: 1;
}
#index #imgb
{
position: absolute;
top: calc(50vh - (41vw / 2));
left:  calc(50vw - (41vw / 2));
width: 41vw;
max-width: 300px;
border-radius: 50%;
z-index: 1;

-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-ms-filter: blur(5px);
-o-filter: blur(5px);
filter: blur(5px);
}

#index .right
{
position: absolute;
display:inline-block;
width: 50%;
height: 100vh;
background-color:#121212 ;
float: right;
z-index: 0;
overflow: hidden;
}

#index .right .lines
{
position: absolute;
display:inline-block;
width: 100vw;
height: auto;
left: -50vw;
bottom: 0;
z-index: 0;
}

#index .right .skull
{
position: absolute;
display:block;
width: 100vw;
max-width: 700px;
height: auto;
left: -50vw;
top: calc((100vh / 2) - (84vw / 2));
z-index: 0;
}

@media only screen and (min-width:700px)
{
    
#index .right .skull
{
position: relative;
display:block;
width: 600px;
left:inherit;
align-content: center!important;
margin: 0 auto;
top: calc((100vh / 2) - ((84px * 6)/ 2));
z-index: 0;
}
    
}


#index .lang
{
display:block;
width: 50%;
right: 0;
position: absolute;
text-decoration:none;
z-index: 1;
top: calc((100vh / 2) + (30vh / 2));
}

@-webkit-keyframes clignote {
0%{color: rgba(20, 120, 150, 1);}
50%{color: white;}
100%{color: rgba(20, 120, 150, 1);}
}

#index .lang a
{
width: 100%;
display: block;
    
text-transform: uppercase;
letter-spacing:0px;
text-align:right; 
text-decoration:none;
background-color: rgba(200, 200, 200, 0);
font-family:'gravitylight','Oswald-light',"Century Gothic","Arial","Helvetica Neue";
font-size: 20px;  
padding: 1px 0;
padding-right: 5px;

border-bottom: solid rgba(20,120,150,0) 2px;
color: rgba(20, 120, 150, 1);

-webkit-animation-name: clignote;
-webkit-animation-duration: 4s; 
-webkit-animation-iteration-count:infinite;
-moz-animation-name: clignote;
-moz-animation-duration: 4s; 
-moz-animation-iteration-count:infinite;
-ms-animation-name: clignote;
-ms-animation-duration: 4s; 
-ms-animation-iteration-count:infinite;
-o-animation-name: clignote;
-o-animation-duration: 4s; 
-o-animation-iteration-count:infinite;
animation-name: clignote;
animation-duration: 4s; 
animation-iteration-count:infinite;
    

transition: linear;
transition-duration: 0.4s;
z-index: 1;
}

#index .lang a:hover
{
text-decoration:none;
border-bottom: solid rgba(20,120,150,1) 2px;
background-color: rgba(200, 200, 200, 0.1);
color: white!important;
padding-right: 10px;
letter-spacing:1px;
transition: linear;
transition-duration: 0.2s;
}


#index .foo1
{
animation-name: clignote;
animation-delay: 2s;
}


@media only screen and (min-width:600px)
{
#index #img
{
position: absolute;
top: calc(50vh - (300px / 2));
left:  calc(50vw - (300px / 2));
display:block;
width: 300px;
max-width: 300px;
border-radius: 50%;
z-index: 50;
}
#index #imgb
{
position: absolute;
top: calc(50vh - (300px / 2));
left:  calc(50vw - (300px / 2));
display:block;
width: 320px;
border-radius: 50%;
z-index: 1;

-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-ms-filter: blur(5px);
-o-filter: blur(5px);
filter: blur(5px);
}
#index .lang
{
display:block;
width: 50%;
right: 0;
position: absolute;
text-decoration:none;
z-index: 1;
top: calc((100vh / 2) + (300px / 2));
}
}

    /* INDEX */



   /* MOBILE */

    /* HEADER */

.ribbon-front 
{
width: 0px;
height: 0px;
float: left;
opacity: 0;
visibility:hidden
}	

nav
{
width: 100%;    
}

/* bouton */

input:checked {
margin-left: -15px;
border: 1px solid grey;
}

input#isexpanded {
display: none!important;
margin-left: -15px;
border: 1px solid grey;
}


#expand-btn {
display: inline-block;
}

#expand-btn .cross
{
display: none;
}

#isexpanded:checked ~ #expand-btn .menu-burger, #isexpanded:checked ~ * #expand-btn .menu-burger 
{
display: none;
}

#isexpanded, div.expandable, span.expandable 
{
display: none;
}

#isexpanded:checked ~ * .expandable {
display: inline;
}

#isexpanded:checked ~ .expandable, #isexpanded:checked ~ * .expandable {
display: inline;
}

#isexpanded:checked ~ header.expandable, #isexpanded:checked ~ * header.expandable {
background-image: none;
display: inline;

-webkit-box-shadow:0px 0px 2px 2px rgba(0, 0, 0, 0); 
-moz-box-shadow:0px 0px 2px 2px rgba(0, 0, 0, 0); 
-o-box-shadow:0px 0px 2px 2px rgba(0, 0, 0, 0); 
-ms-box-shadow:0px 0px 2px 2px rgba(0, 0, 0, 0); 
box-shadow:0px 0px 2px 2px rgba(0, 0, 0, 0); 
}

#isexpanded:checked ~ #new, #isexpanded:checked ~ * #new,
#isexpanded:checked ~ #bio, #isexpanded:checked ~ * #bio,
#isexpanded:checked ~ #projet, #isexpanded:checked ~ * #projet,
#isexpanded:checked ~ #artwork, #isexpanded:checked ~ * #artwork,
#isexpanded:checked ~ #artw, #isexpanded:checked ~ * #artw,
#isexpanded:checked ~ #proj, #isexpanded:checked ~ * #proj,
#isexpanded:checked ~ #ment, #isexpanded:checked ~ * #ment
{
margin-top: 0px!important;
top:0;
transition: linear;
transition-duration: 0.2s;
}

#isexpanded:checked ~ header.expandable nav>a, #isexpanded:checked ~ * header.expandable nav>a 
{
overflow: visible;
width: 200px;
margin-right: -20px;
margin-top: -25px;
z-index:16;
transition: linear;
transition-duration: 0.2s;
}

#isexpanded:checked ~ #menu #expand-btn, #isexpanded:checked ~ * #menu #expand-btn
{
background-image: none;
background-color: rgba(34, 34, 34, 0.9);
}

#isexpanded:checked ~ div.expandable, #isexpanded:checked ~ * div.expandable {
display: flex;
position: absolute;
justify-content: center;
display: flex;
width: 100%;
height: calc(100vh - 60px)!important;
opacity: 1;
background-color: #222;
top:60px;

padding: 0;
padding-bottom: 10px;
background-image: none;
background-color: rgba(34, 34, 34, 0.9);
transition: linear;
transition-duration: 0.2s;
}

/* fin bouton*/

nav>div
{
width: 100%;
height: 60px;
}

label
{
width: 100%;
height: 60px;
position: absolute;
top:0px;

background: url(img/menu.gif);
}

label .menu-burger
{
font-size:50px;
text-align: center; 
text-decoration:none;
text-transform: uppercase;
color: #ffffff;
font-family:"Helvetica Neue";
width: 50px;
height: 50px;

display: block;
float: left;
left: 0;
padding:0;
margin: 5px;
}

label .cross
{
display: none;

font-size:25px;
text-align: center; 
text-decoration:none;
text-transform: uppercase;
color: #ffffff;
font-family:'walkway_semibold',"Helvetica Neue";
left:-2px;
display: block;
float: left;
width: 50px;
height: 50px;
padding:0;
margin: 5px;
}

label:focus .menu-burger
{
display: none;
left: -55px;
}

label:focus .menu-burger .cross
{
display: block;
}

#menu
{
position: fixed;
display: inline;
background: url(img/menu.gif);
width: 100%;
padding: 0;
margin: 0;
height:60px; 
top: 0;
z-index: 10;

-webkit-box-shadow:0px 0px 2px 2px rgba(0, 0, 0, 0.5); 
-moz-box-shadow:0px 0px 2px 2px rgba(0, 0, 0, 0.5); 
-o-box-shadow:0px 0px 2px 2px rgba(0, 0, 0, 0.5); 
-ms-box-shadow:0px 0px 2px 2px rgba(0, 0, 0, 0.5); 
box-shadow:0px 0px 2px 2px rgba(0, 0, 0, 0.5); 

border-left: solid white 0px;
border-right: solid white 0px;
transition: linear;
transition-duration: 0.2s;
}

#menu #img00
{
display:none;
width: 0;
opacity: 1;
padding-bottom: 0px;
bottom: 0;
margin: 0 auto;
opacity:0;
visibility: hidden;
}

#menu nav>a #img0
{
display:block;
width: 80%;
opacity: 1;
padding-bottom: 0px;
bottom: 0;
margin: 0 auto;
}

#menu nav>a:hover #img0
{
display:none;
width: 80%;
opacity: 0;

transition-duration: 0s;
visibility: hidden;
}

#menu a:hover #img00
{
display:block;
width: 80%;
opacity: 1;
padding-bottom: 0px;
bottom: 0;
margin: 0 auto;
opacity:1;
visibility:visible;

transition-duration: 0s;
}

nav>a:hover
{
transition-duration: 0s;
background-color: rgba(0,0,0,0);
}

#menu a
{
overflow: visible;
}

nav>a
{
width: 75px;
height: 60px;
display: block;
right: 0;
position: absolute;
top: 0;
transition: linear;
transition-duration: 0.05s;
}

#menu nav ul
{

position: relative;
display: inline-block;
width: auto;
margin: auto;
padding: 0;
}

#menu nav ul li
{
position: relative;
padding: 10px  0;
text-decoration:none;
transition: linear;
transition-duration: 0.1s;
}

#menu nav ul li:hover
{
position: relative;
padding: 10px  0;
transition: linear;
transition-duration: 0.1s;
}

#menu nav ul li a
{
opacity: 1;
color: #FFF;
font-weight:400;
font-size:20px;
text-align: center; 
text-decoration:none;
letter-spacing:0px;
text-transform: uppercase;

font-family:'gravityregular',"Century Gothic","Arial","Helvetica Neue";
transition: linear;
transition-duration: 0.1s;
}

#menu nav ul li a.cont
{
opacity: 1;

font-weight:400;
font-size:20px;
text-decoration:none;
text-transform: uppercase;
color:#121212;

font-family:'gravitybold',"Century Gothic","Arial","Helvetica Neue";
transition: linear;
transition-duration: 0.1s;
}


#menu nav ul li:hover a
{
width: auto;
text-decoration:none; 
color: #999999;
letter-spacing:1px;
transition: linear;
transition-duration: 0.1s;
}


#menu nav ul li:hover a.cont
{
width: auto;
text-decoration:none;
color:rgba(20,120,150,1);
transition: linear;
transition-duration: 0.1s;
} 

#menu nav .copy_r
{
display: none;
}

#lien 
{
position: relative;
width: auto;
display: inline-block;
margin:0 auto!important;
padding-bottom: 20px;
padding-top: 20px;
left: calc(((100% - 120px) / 2) - 18px);
text-decoration: none!important;

-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
}

#lien  a
{
padding: 10px;
margin: 0;
width: auto;
display: inline;
}


#lien a #img3
{
opacity: 0.3;
width: 30px;
background-color: rgb(21, 21, 21);
-webkit-border-radius:40px; 
-moz-border-radius:40px; 
-o-border-radius:40px; 
-ms-border-radius:40px; 
border-radius:40px;
}

#lien a #img3:hover
{
opacity: 1;
}

            /* CORP */


           /* GLOBAL */
iframe
{
margin: 0 auto;
display:inline;
min-height: 100%;
min-height: 100vh;
width: 100%;
border-style: none;
}
iframe
{
position: absolute;
top:60px;
margin: 0 auto;
display:inline;
min-height: 100%;
min-height: 100vh;
width: 100%;
display: inline;
float:left;
border-style: none;
}

#contact iframe{
    position: relative;
}

#indic
{
font-family: "Century Gothic","Arial","Helvetica Neue";
color: white;
}

body div
{
display: block;
}

body #contenu
{
display: inline;
float:left;
}

#wowslider-container1 .carousel
{    
width: 100%;
padding-top: calc((100% * 9.3) / 16);
border-spacing:0;
z-index: 500;
}

.carousel .owl-controls .owl-nav{
display: none;
}

#wowslider-container1 .carousel .owl-controls,
.carousel .owl-controls
{
display: block;
position: absolute;
height: 40px;
width: 100%;
bottom:0px;
margin: 0 auto;
background-color: rgba(0,0,0,0);
}

.carousel .owl-controls .owl-dots{
display: block;
position: relative;
margin: 15px auto;
padding:0 calc((100% - ( 6 * 5px ) - ( 6 * ( 10px * 2)) - 4px) / 2 );
z-index: 100;
}

@media only screen and (min-width:1024px)
{
#new .carousel .owl-controls .owl-dots{
display: block;
position: relative;
margin: -8px auto;
z-index: 100;
}

}

@media only screen and (min-width:1780px)
{
#new .carousel .owl-controls .owl-dots{
display: block;
position: relative;
margin: -10px auto;
z-index: 100;
bottom: 25px;
}

}

@media only screen and (min-width:1800px)
{
#new .carousel .owl-controls .owl-dots{
display: block;
position: relative;
margin: -15px auto;
z-index: 100;
bottom: calc(( 100vh - 1028px ) * -1);
}
}

#wowslider-container1 .carousel .owl-controls .owl-dots{
display: block;
position: absolute;
margin: 0 auto;
padding: 5px;
z-index: 100;
transition: linear;
transition-duration: 0.2s;
}

.carousel .owl-controls .owl-dots .owl-dot{
width: 5px;
height: 5px;
margin: 0 10px;
display: inline-block;
background-color: #999999;
border-radius: 50%;
transition: linear;
transition-duration: 0.2s;
}

@media only screen and (min-width:1024px)
{

#wowslider-container1 .carousel .owl-controls
{
display: block;
position: relative;
height: auto;
width: 100%!important;
bottom:22px;
margin: 0 auto;
background-color: rgba(0,0,0,0);text-align: center;
}

#wowslider-container1 .carousel .owl-controls .owl-dots{
position: absolute;
display: block;
float: left;
width: auto;
margin: 0 auto!important;
left: 50%;
transform: translate(-50%, -50%);
}
}

#wowslider-container1 .carousel .owl-controls .owl-dots .owl-dot{
width: 8px;
height: 8px;
margin: 10px;
display: inline-block;
background-color: #999999;
border-radius: 50%;
transition: linear;
transition-duration: 0.2s;
}

.carousel .owl-controls .owl-dots .owl-dot:hover{

background-color: #222;
transition: linear;
transition-duration: 0.2s;
}

#wowslider-container1 .carousel .owl-controls .owl-dots .owl-dot:hover{

background-color: #222;
transition: linear;
transition-duration: 0.2s;
}

.carousel .owl-controls .owl-dots .owl-dot.active{
width: 8px;
height: 8px;
margin-bottom: -1.5px;
display: inline-block;
background-color:  rgba(20,120,150,1);
transition: linear;
transition-duration: 0.2s;
}

#wowslider-container1 .carousel .owl-controls .owl-dots .owl-dot.active{
width: 6px;
height: 6px;
margin: 10px 11px;
margin-bottom: 11px;
display: inline-block;
background-color:  #FFF;
transition: linear;
transition-duration: 0.2s;
}

#wowslider-container1 .carousel .owl-stage-outer{
width: 100%;
display: block;
top: 0;
height: auto;
position: absolute;
width: 100%;
}

#wowslider-container1 .carousel .owl-stage{
width: auto;
height: 100%;
top:0;
left: 0px;
}

#wowslider-container1 .carousel .owl-stage .owl-item{
margin: 0 auto;
display:inline;
top: 0!important;
left: 0!important;
width: 100%;
visibility: hidden;
}

#wowslider-container1 .carousel .owl-stage .active{
width: 100%;
visibility: visible;
}

#wowslider-container1 .carousel img{
width: 100vw;
min-width: 320px;
max-width: 1023px; 
height:auto;
max-height:100vh;
}


@media only screen and (min-width:1024px)
{

#wowslider-container1 .carousel img{
width: 62.5vw;
min-width: 625px;
max-width: 1050px;
}

#wowslider-container1 .carousel
{    
padding-top: calc((100% * 9) / 16);
}
}


/* PAGES */

          /* BIOGRAPHIE */

#bio  {

top:60px;
margin:0 auto;
position: relative;
width: 100%;
padding: 0;
z-index: 1;
display: block;
}

#in
{
width: 100%;
padding: 0;
padding-bottom: 200px;
margin:0 auto;
position: relative;
}

#in>div>p
{
width: 100%;
padding: 0;
padding:0 20px;
}

#bio #me
{
display: none;
}

#bio .textbio
{
position: relative;
display: block;
width: auto;
height: auto;
}

.photo
{
opacity: 1;
position:relative;
width:100%; 
height: auto;
max-height: 80vh;
background-color: black;
margin-bottom: 10px;
display: block;
float: left;
padding-right: 40%;
overflow: hidden;
}

.photo > img
{
width: 100%;
display: block;
float: left;
position: relative;
}

.photo img + div
{
position: absolute;
width: calc(100vw - 40px);
display: block;
float: right!important;
bottom: 0px;
right: 0;
padding-right: 20px;
margin: 0 auto;
}

.photo #zero
{
width: 100%;
display: block;
margin-bottom: 10px;
height: auto;
letter-spacing:1px;
text-align: right; 
font-family:'gravitybold',"Arial","Helvetica Neue";
font-weight:600;
font-size: 50px; 
text-transform:uppercase;
text-decoration:none;
color:#999999;
}

#bio div #un{
width: 100%;
display: block;
font-style: italic;
margin-bottom: 25px;
right: 0;
float: right;

letter-spacing:0px;
font-size: 20px;
text-align: right; 
text-decoration:none;
color: rgba(20, 120, 150, 1); 
font-family:'gravitybook',"Arial","Helvetica Neue";
}


@media only screen and (min-width:405px)
{

#bio div #un
{
max-width: calc(( 70 * 700px) / 100);
}

}


#bio div #deux
{
width:100%;
display: block;
font-weight:600;
font-size: 20px;
text-align: right; 
color: rgba(20, 120, 150, 1); 
font-family:'gravityregular';
top:30%;

z-index: 12;
}

#para
{
position: relative; 
width:100%;

z-index: 12;
text-align: justify;
margin-bottom: 5px;

font-weight:400;
font-size: 14px;
text-decoration:none;
color: rgba(255, 255, 255, 1); 
font-family:'gravityregular',"Arial","Helvetica Neue";

}

#bio p#para em
{ 
color:rgba(20,120,150,1);
}

.textbio .serv
{
position: relative; 
width:100%;
text-align: justify;
padding:0 20px;
padding-top: -10px;
padding-bottom: 10px;
margin-bottom: 20px;
font-size: 14px;
color: rgba(255, 255, 255, 1); 
background-color: #222;
font-family:'gravityregular',"Arial","Helvetica Neue";
}

.textbio .serv span:first-child
{
margin-top: 0px!important;    
}
.textbio .serv span:last-child
{
margin-bottom: 10px!important;    
}

.textbio .serv span
{
width:100%;
height: 2px;
position: relative;
display: block;
float:left;
margin: 10px auto;
padding: 0!important;
background-color: rgba(20,120,150,1);    
z-index: 0;
}

.textbio .serv .print h2,
.textbio .serv .web h2,
.textbio .serv .prod h2,
.textbio h3
{
position: relative; 
width:100%;
padding-bottom: 5px;
padding: 0px;
text-align: right;
letter-spacing: 0.5px;
font-size: 35px;
color: rgba(20,120,150,1); 
font-family:'gravitybook',"Arial","Helvetica Neue";
}
.textbio h3
{
position: relative; 
width:100%;
margin-bottom: 10px;
padding: 0 20px;
text-align: left;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 35px;
color: rgba(20,120,150,1); 
font-family:'gravitybook',"Arial","Helvetica Neue";
}

.textbio .serv .print p,
.textbio .serv .web p,
.textbio .serv .prod p
{
position: relative; 
width:100%;
text-align: left;
font-size: 14px;
color: rgba(255, 255, 255, 1); 
font-family:'gravityregular',"Arial","Helvetica Neue";
}

.textbio .serv .print img,
.textbio .serv .web img,
.textbio .serv .prod img
{
position: relative; 
width:100%;
max-width: 200px;
text-align: center;
display: block;
margin: 0 auto;
font-size: 14px;
color: rgba(255, 255, 255, 1); 
font-family:'gravityregular',"Arial","Helvetica Neue";
}

.textbio .serv .web
{
position: relative;
width: auto;
height: auto;
text-align: center;
display: block;
margin: 0 auto;
}

.textbio .serv .web div:first-child
{
position: relative; 
display: inline-block;
}

.textbio .serv .web div:last-child
{
width: 100%!important;
position: relative; 
display: inline-block;
display: none;
}


@media only screen and (min-width:500px){
    
.textbio .serv
{
position: relative; 
width:100%;
padding:0 20px;
padding-top: -10px;
padding-bottom: 10px;
margin-bottom: 20px;
font-size: 14px;
color: rgba(255, 255, 255, 1); 
background-color: rgba(34, 34, 34, 0.8);
}

.textbio .serv span:first-child
{
margin-top: 0px!important;    
}
.textbio .serv span:last-child
{
margin-bottom: 0px!important;    
}

.textbio .serv span
{
width:100%;
height: 2px;
position: relative;
display: block;
float:left;
margin: 10px auto;
padding: 0!important;
background-color: rgba(20,120,150,1);    
z-index: 0;
}

.textbio .serv .print h2,
.textbio .serv .web h2,
.textbio .serv .prod h2
{
position: relative; 
width:100%;
padding-bottom: 5px;
text-align: right;
letter-spacing: 0.5px;
font-size: 35px;
color: rgba(20,120,150,1); 
font-family:'gravitybook',"Arial","Helvetica Neue";
}
    
.textbio .serv .web div
{
position: relative; 
display: inline-block;
margin: auto;
}

.textbio h3
{
position: relative; 
width:100%;
padding: 0 20px;
}

.textbio .serv .print,
.textbio .serv .web,
.textbio .serv .prod
{
position: relative; 
width:100%;
height: auto;
padding-bottom: 5px;
display: flex;
justify-content: center;
letter-spacing: 0px;
font-size: 35px;
color: rgba(20,120,150,1); 
font-family:'gravitybook',"Arial","Helvetica Neue";
}

.textbio .serv .web h2
{
text-align: left;
}

.textbio .serv .print div:first-child,
.textbio .serv .prod div:first-child
{
position: relative; 
width:100%;
max-width: 200px;
display:inline-block;
float: left;
left: 0;
}
.textbio .serv .web div:first-child
{
position: relative; 
width:50%;
display:inline-block;
float: right;
right:0;
}

.textbio .serv .web div:first-child
{
position: relative; 
display: none;
}

.textbio .serv .print div:last-child,
.textbio .serv .prod div:last-child
{
position: relative; 
display:inline-block;
text-align: justify;
margin: auto;
right:0;
}
.textbio .serv .web div:last-child
{
position: relative; 
width:50%;
max-width: 200px;
display:inline-block;
text-align: justify;
margin: auto;
left: 0;
}

.textbio .serv .print img,
.textbio .serv .web img,
.textbio .serv .prod img
{
width:100%;
max-width: 200px;
float: left
}
}

.textbio .serv .web img
{
width:100%;
max-width: 200px;
float: right;
}
}

#download
{
padding: 20px;
padding-top: 0px;
margin: 0 auto!important;
position: relative; 
height: 210px;
z-index: 11;
margin-bottom: 20px;
}

#download div
{
    width: 280px!important;
    position: relative;
    margin: 0 auto;
}

a#cv
{
position: relative; 
opacity: 1;
width: 130px;
height: 130px;
background: rgba(20,120,150,1); 
display: inline-block;
padding: 45px 0;
margin: 5px;
text-align: center;
font-weight:600;
letter-spacing:1px;
font-size: 30px;
text-decoration:none;
color: #999999; 
font-family:'gravityregular',"Arial","Helvetica Neue";
float: left;
z-index: 12;
border-radius: 1px;
transition: linear;
transition-duration: 0.2s;
}

a#book
{
position: relative; 
opacity: 1;
width: 130px;
height: 130px;
background: rgba(20,120,150,1);
display: inline-block;
padding: 45px 0;
margin: 5px;
text-align: center;
font-weight:600;
letter-spacing:1px;
font-size: 30px;
text-decoration:none;
color: #999999; 
font-family:'gravityregular',"Arial","Helvetica Neue";
float: left;
z-index: 12;
border-radius: 1px;
transition: linear;
transition-duration: 0.2s;
}

#cv p
{
position: relative; 
width: auto;
display: block;
margin: 0 auto;
transition: linear;
transition-duration: 0.4s;
-webkit-border-radius:40px; 
-moz-border-radius:40px; 
-o-border-radius:40px; 
-ms-border-radius:40px; 
border-radius:40px;
transition: linear;
transition-duration: 0.2s;
}

#cv:hover
{
background: #222;
margin-top: 2px;
color: #FFF; 
transition: linear;
transition-duration: 0.2s; 
}

#book p
{
position: relative; 
width: auto;
display: block;
margin: 0 auto;
transition: linear;
transition-duration: 0.2s;
}

#book:hover
{
background: #222;
margin-top: 2px;
color: #FFF; 
transition: linear;
transition-duration: 0.2s;
}


         /* CONTACT */


#contact 
{
top:60px;
margin:0 auto;
position: relative;
width: 100%;
padding: 0;
}

#contact .join_me h1
{
background-color: #FFF;
width: 100%;
padding: 0px 5%;
text-align:right;
display: inline-block;
letter-spacing:0px;
font-size: 50px;
text-decoration:none;
text-transform: uppercase;
float: left;
color:#222;
font-family:'gravitybold',"Century Gothic","Arial","Helvetica Neue";
}

.cola,
.colb{
padding: 5%;
left:0%;

position: relative;
width: 100%;
display: block;
float: left;
text-align:justify;
}

.col
{
padding: 0;
position: relative;
width: 100%;
display: block;
float: left;
max-height: 50vh;
overflow: hidden;
border-bottom: 2px solid rgba(20,120,150,1);
}
.col iframe
{
position: relative;
width: 100%;
display: block;
float: left;
top: 0;
border-style: none;
}

.cola{
position: relative; 
left:0;
font-weight:200;
letter-spacing:0px;
font-size: 14px;
text-decoration:none;
color: rgba(255, 255, 255, 1); 
font-family:'gravityregular',"Century Gothic","Arial","Helvetica Neue";
}

#contact div p,
#contact .colb label
{
position: relative; 
width: auto;
padding:5px 0;
display: block;
font-weight:normal;
letter-spacing:0px;
font-size: 14px;
text-decoration: none;
color: rgba(255, 255, 255, 1); 
font-family:'gravityregular',"Century Gothic","Arial","Helvetica Neue";
float: left;
}

#contact .cola div
{
position: relative!important;
color: #999999;
margin: 0 calc((100% - 320px) / 2 );
width: auto;
min-height: 200px;
height: auto;
display: block;
}

#contact .cola div button
{
position: relative;
color: #999999;
display: inline-block;
float: left;
background-color: rgba(20,120,150,1)!important;
width: 150px!important;
height: 150px!important;
margin: 5px;
padding: 20px 0;
border: none;
border-radius: 1px;
transition: linear;
transition-duration: 0.1s;
}

#contact .cola button:hover
{
color: #FFF;
background-color: #222!important;
margin-top:2px;
transition: linear;
transition-duration: 0.2s;

}

#contact .cola div p
{
position: relative;
width: auto;
float: none;
color: #999999;
font-family:'gravitybold',"Century Gothic","Arial","Helvetica Neue";
}

#contact .cola button:hover p
{
color: #FFF;
transition: linear;
transition-duration: 0.2s;
}

#contact .cola div a
{
position: relative;
text-decoration:none;
text-align: center;
color: #999999;
text-align: center;
margin: 0 auto;
font-size: 12px;
overflow: hidden;
}

#contact .cola a img
{
position: relative;
color: #999999;
margin: 10px auto;
text-align: center;
width: 60px!important;
display: block;
transition: linear;
transition-duration: 0.2s;
}

#contact .cola button:hover img
{
transform: scale(1.1);
transition: linear;
transition-duration: 0.2s;
}

#contact .cola a#mail img
{
width: 80px!important;
}

#contact .colb
{
    background-color: #222;
}

#contact .colb label
{
position: relative;
margin-bottom: -10px;
padding: 0px;
background: none;
display: block;
height: auto!important;
float: left;
width: 100%;
text-transform:uppercase;
text-align: left;
color: rgba(20,120,150,1);
font-weight:400;
font-size: 18px;
letter-spacing: 1px;
font-family:'gravityregular',"Arial","Helvetica Neue";
transition: linear;
transition-duration: 0.2s;
}

#contact .colb input, 
#contact .colb textarea
{
position: relative;
height: 0px;
display: block;
background-color: rgba(60, 60, 60, 0);
color: #999999;
padding: 5px 0;
margin-bottom: 10px;
font-weight:400;
font-size: 14px;
font-family:'gravityregular',"Arial","Helvetica Neue";
float: left;
border: none;
border-radius: 0%!important;
border-bottom: 1px solid rgba(20, 120, 150, 1);
transition: linear;
transition-duration: 0.2s;
}

#contact .colb textarea{
width: 100%;
min-height: 150px;
height: auto!important;
overflow: auto!important;
overflow: visible;
}

#contact .colb input{
    text-align: right;
}

#contact  .colb  div {
width: 100%;
position: relative;
float: left;
display:block;
}

#contact .colb input, 
#contact  .colb textarea
{
position: relative;
width: 100%;
}

#contact .colb button
{
font-weight:400;
width: 100%;
position:relative;
display:inline;
border-radius: 0px;
border: none;
margin-bottom:20px;
color: rgba(150,150,150,1);
text-transform:uppercase;
padding: 10px;
margin-top: 0px;
background-color: #222;
font-family:'gravitybook',"Arial","Helvetica Neue";
transition: linear;
transition-duration: 0.2s;
}

#contact .colb input::-moz-placeholder, 
#contact .colb input:-moz-placeholder, 
#contact .colb input::placeholder, 
#contact .colb input:placeholder,
#contact  .colb textarea::-moz-placeholder, 
#contact  .colb textarea:-moz-placeholder,
#contact  .colb textarea::placeholder, 
#contact  .colb textarea:placeholder
{
opacity: 0;
color: rgba(153, 153, 153, 0);
transition: linear;
transition-duration: 0.2s;
}

#contact .colb input:focus, 
#contact .colb input:focus, 
#contact  .colb textarea:focus, 
#contact  .colb textarea:focus
{
color: #999999;
height: auto!important;
padding-top: 10px;
transition: linear;
transition-duration: 0.2s;
}

#contact .colb input:hover, 
#contact .colb textarea:hover
{
color: #999999;
height: auto!important;
padding-top: 10px;
transition: linear;
transition-duration: 0.2s;
}

#contact .colb input:rempli, 
#contact .colb textarea.input:rempli
{
color: #999999;
height: auto!important;
padding-top: 10px;
transition: linear;
transition-duration: 0.2s;
}

#contact .colb div:hover label
{
letter-spacing: 1px;
padding: 0;
transition: linear;
transition-duration: 0.2s;
}

#contact .colb div:hover input, 
#contact .colb div:hover textarea
{
color: #999999;
height: auto!important;
padding-top: 10px;
transition: linear;
transition-duration: 0.2s;
}

#contact .colb div:focus input, 
#contact .colb div:focus textarea
{
color: #999999;
height: auto!important;
padding-top: 10px;
transition: linear;
transition-duration: 0.2s;
}

#contact .colb button:hover
{
color: #FFF;
background-color: rgba( 80, 80, 80, 1);
}

#contact h2
{
display: block;
margin-bottom: 20px;
font-weight:400;
letter-spacing:0px;
text-transform: uppercase;
font-size: 35px;
text-align: center; 
text-decoration:none;
color: #999999;
font-family:'gravitybold',"Century Gothic","Arial","Helvetica Neue";
}

form
{
margin-bottom: 20px;
}

.colb span.error-message
{
    color: #e23333;
    font-family:'gravity','gravityregular','droidsans',"Century Gothic","Arial","Helvetica Neue";
}

.colb p
{
    color: #33e25b!important;
    font-family:'gravity','gravityregular','droidsans',"Century Gothic","Arial","Helvetica Neue";
}

             /* PROJETS */


#projet  h2
{
position: relative;
text-transform: uppercase;
width:100%;
height: 100%;
display:block;
font-size: 35px;
z-index: 52;
}


#projet .title 
{
padding: 10px;
font-family:'gravityregular',"Century Gothic","Arial","Helvetica Neue";
background-color: #fff;
align-content: center;
}

#projet .title h1
{
width: auto;
    height: auto;
    display: inline-block;
font-weight:bold;
text-align:right;
line-height: 40px;
margin: 0;
letter-spacing:0px;
font-size: 50px;
text-decoration:none;
float: right;
color:#222;
font-family:'OldSansBlack',"Century Gothic","Arial","Helvetica Neue";
}

#projet .title .slct 
{
    width: auto;
    display: inline-block;
    align-content: center;
    
    text-align: center;
    float: left;
    position: relative;
    margin:0 auto;
    margin-right: 10px;
    margin-top: 10px;
}

#projet .title a.select
{
width: auto;
position:relative;
font-family:'gravitylight',"Century Gothic","Arial","Helvetica Neue";
color:rgba(20,120,150,1);
font-size: 20px;
margin:2px 2px;
padding: 5px;
text-decoration:none;
display: inline-block!important;
float: right;
border: solid rgba(20,120,150,1) 1px;
}

#projet .title a.select:hover
{
font-family:'gravitylight',"Century Gothic","Arial","Helvetica Neue";
color:#FFF;
font-size: 20px;
background-color: rgba(20,120,150,1);
padding: 5px;
text-decoration:none;
display: inline-block!important;
border: solid #FFF 1px;
}

#projet .title a.click
{
font-family:'gravitylight',"Century Gothic","Arial","Helvetica Neue";
color:#FFF;
font-size: 20px;
background-color: rgba(20,120,150,1);
margin:2px 2px;
padding: 5px;
text-decoration:none;
display: inline-block;
border: solid #FFF 1px;
}

#projet 
{
position: relative;
top: 60px;
margin: 0;
padding: 0;
width:100%;
height: 100%;
display:block;
padding-bottom: 70px!important;

-webkit-border-radius:0px; 
-moz-border-radius:0px; 
-o-border-radius:0px;
border-radius:0px; 
}


             /* ARTWORK */


h3 a{
color: white;
text-decoration:none;
}

#artwork
{
position: relative;
margin: 0;
padding: 0;
width:100%;
height: 100%;
display:block;
top:60px;
padding-bottom: 120px;

-webkit-border-radius:0px; 
-moz-border-radius:0px; 
-o-border-radius:0px;
border-radius:0px; 
}

#artwork img,
#produit img,
#com_visu img
{
width: 100%;
}

#artwork div.title
{
position: fixed;
width: 100%;
display:block;
margin:0 auto;
background-color: #fff;
text-align: right;
z-index: 6;
top:60px;
right: 0;
}

#artwork .title h1{    
font-weight:bold;
padding-right: 5px;
letter-spacing:0px;
font-size: 50px; 
text-decoration:none;
background-color: #fff;
color: #222;
font-family:'OldSansBlack',"Century Gothic","Arial","Helvetica Neue";
}

#artwork div#galerie
{
position:relative;
margin:0 auto;
width: 100%;
top:60px;
}

#rang
{
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
}

#artwork div#galerie .pop
{
    width: 100%;
    height: auto;
    background-color: #222;
    color: #fff;
    letter-spacing:0px; 
    font-family:'gravitylight','oswald-light',"Century Gothic","Arial","Helvetica Neue";
}

#artwork div#galerie .pop h4
{
    letter-spacing: 1px;
    font-size: 35px;
}
    
#rang .titl h2
{
    color: white;
    width: auto;
    position: relative;
    display: block;
    margin:0 5px;
    padding: 10px 0; 
    font-size: 35px; 
    border-bottom:2px solid rgba(20,120,150,1);
    font-style:italic;
    text-transform: uppercase;
    font-family:'gravitylight','oswald-light',"Century Gothic","Arial","Helvetica Neue";
}

#rang #container
{
    width: 100%;
    height: auto;
    display: block;
    padding: 5px;
    float: left;
    position: relative;
    background-color: #222;
}

#rang #container #img
{
    width: calc(100% - 10px);
    height: calc(((100vw - 20px) * 6) / 16);
    margin:5px;
    float: left;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    display: block;
    float: left;
}

#rang #container #img img
{
    width: 100%;
    position: absolute;
    display: block;
    align-content: center;
    top:-20px;
    opacity: 1;
transition: linear;
transition-duration: 0.1s;
}
#artwork div#galerie .pop:target
{
transition-delay: 0.1s;
transition-duration: 0.5s;
}

#rang #container #img .hover
{
    position: absolute;
    top: 0;
    visibility: hidden;
    overflow: hidden;
    background-color:rgba(0, 0, 0, 0.5) ;
    color: #fff;
    width: 100%;
    height: 100%;
    font-family:'gravitylight','oswald-light',"Century Gothic","Arial","Helvetica Neue";
    font-style:normal;
    opacity: 0;
transition: linear;
transition-delay: 0.1s;
transition-duration: 0.2s;
}
#rang #container a#img:hover .hover
{
    visibility: visible;
    opacity: 1;
transition: linear;
transition-delay: 0.1s;
transition-duration: 0.2s;
}
#rang #container a#img:hover img
{
    width:120%;
transition: linear;
transition-duration: 0.2s;
}

#rang #container #img .hover h3
{
font-weight: 100;
position: absolute;
letter-spacing:0px;
font-size: 20px; 
text-decoration:none;
float: left;
padding-bottom: 50px;
margin-left: 20px;
bottom: 0px;
display: block;
text-transform:uppercase;
opacity: 0;
transition: linear;
transition-delay: 0.1s;
transition-duration: 0.2s;
}
#rang #container #img:hover .hover h3
{
padding-bottom: 30px;
opacity: 1;
transition: linear;
transition-delay: 0.1s;
transition-duration: 0.2s;
}

#rang #container #img .hover h3 .line
{
width: 20px; 
position: absolute;
padding-right: 20px;
bottom: 30px;
left: -20px;
height: 2px;
background-color: rgba(20,120,150,1);
transition: linear;
transition-duration: 0.5s;
}
#rang #container #img:hover .hover h3 .line
{
width: calc(100% + 20px); 
transition: linear;
transition-duration: 0.3s;
}

#rang #container #img .hover .cross
{
width: calc(((100vw - 10px) * 6) / 16); 
height: 100%;
position:relative;
float: right;
display: block;
font-size: 150px; 
text-align: center;
justify-content: center;
align-items: center;
padding: 5%;
overflow: hidden;
background-color: rgba(20,120,150,1);
    
    right:calc(((100vw - 10px) * 6) / -16);
transition: linear;
transition-duration: 0.3s;
}
#rang #container #img:hover .hover .cross
{
    right: 0;
transition: linear;
transition-duration: 0.2s;
}

#rang #container #img .hover .cross .vert
{
    position: absolute;
    background-color: #fff;
    width: 3px;
    align-content: center;
    height: auto;
    padding-bottom:calc(100% - 28%);
    margin: 0 auto;
    left: calc(50% - 0.5px);
transition: linear;
transition-duration: 0.5s;
transition-duration: 0.2s;
    
}

#rang #container #img .hover .cross .hor
{
    position: absolute;
    background-color: #fff;
    width: calc(100% - 28%);
    align-content: center;
    left: 14%;
    height: 3px;
    top: calc(50% - 0.5px);
    margin: 0 auto;
transition: linear;
transition-duration: 0.5s;
transition-duration: 0.2s;
}

#rang #container .owl-controls{
    width: 100%;
    
}

#rang #container .owl-controls .owl-dots{
    width: auto;
    height: auto;
    text-align: center;
    margin: 0 auto;
    align-content: center;
}

#rang #container .owl-controls .owl-dots .owl-dot{
    display: inline-block;
    background-color: #999999;
    width: 6px;
    height: 6px;
    margin: 1px 6px;
    border-radius: 50%;
}

#rang #container .owl-controls .owl-dots .active{
    
    width: 8px;
    height: 8px;
    margin: 0 5px;
    background-color: rgba(20,120,150,1)!important;

}


/*             700px         */


@media only screen and (min-width:700px){
#rang #container #img
{
    width: calc(100% - 10px);
    height: calc((((100vw - 20px) * 6) / 16) / 2);
    margin:5px;
    float: left;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    display: block;
    float: left;
}

#rang #container #img img
{
    width: 100%;
    position: absolute;
    display: block;
    align-content: center;
    top:-20px;
    opacity: 1;
transition: linear;
transition-duration: 0.1s;
}
#artwork div#galerie .pop:target
{
transition-delay: 0.1s;
transition-duration: 0.5s;
}

#rang #container #img .hover
{
    position: absolute;
    top: 0;
    visibility: hidden;
    overflow: hidden;
    background-color:rgba(0, 0, 0, 0.5) ;
    color: #fff;
    width: 100%;
    height: 100%;
    font-family:'gravitylight','oswald-light',"Century Gothic","Arial","Helvetica Neue";
    font-style:normal;
    opacity: 0;
transition: linear;
transition-delay: 0.1s;
transition-duration: 0.2s;
}
#rang #container a#img:hover .hover
{
    visibility: visible;
    opacity: 1;
transition: linear;
transition-delay: 0.1s;
transition-duration: 0.2s;
}
#rang #container a#img:hover img
{
    width:120%;
transition: linear;
transition-duration: 0.2s;
}

#rang #container #img .hover h3
{
font-weight: 100;
position: absolute;
letter-spacing:0px;
font-size: 20px; 
text-decoration:none;
float: left;
padding-bottom: 50px;
margin-left: 20px;
bottom: 0px;
display: block;
text-transform:uppercase;
opacity: 0;
transition: linear;
transition-delay: 0.1s;
transition-duration: 0.2s;
}
#rang #container #img:hover .hover h3
{
padding-bottom: 30px;
opacity: 1;
transition: linear;
transition-delay: 0.1s;
transition-duration: 0.2s;
}

#rang #container #img .hover h3 .line
{
width: 20px; 
position: absolute;
padding-right: 20px;
bottom: 30px;
left: -20px;
height: 2px;
background-color: rgba(20,120,150,1);
transition: linear;
transition-duration: 0.5s;
}
#rang #container #img:hover .hover h3 .line
{
width: calc(100% + 20px); 
transition: linear;
transition-duration: 0.3s;
}

#rang #container #img .hover .cross
{
width: calc(((50vw - 20px) * 6) / 16); 
height: 100%;
position:relative;
float: right;
display: block;
font-size: 150px; 
text-align: center;
justify-content: center;
align-items: center;
padding: 5%;
overflow: hidden;
background-color: rgba(20,120,150,1);
    
    right:calc(((50vw - 10px) * 6) / -16);
transition: linear;
transition-duration: 0.3s;
}
#rang #container #img:hover .hover .cross
{
    right: 0;
transition: linear;
transition-duration: 0.2s;
}

#rang #container #img .hover .cross .vert
{
    position: absolute;
    background-color: #fff;
    width: 3px;
    align-content: center;
    height: auto;
    padding-bottom:calc(100% - 25%);
    margin: 0 auto;
    left: calc(50% - 0.5px);
transition: linear;
transition-duration: 0.5s;
transition-duration: 0.2s;
    
}

#rang #container #img .hover .cross .hor
{
    position: absolute;
    background-color: #fff;
    width: calc(100% - 25%);
    align-content: center;
    left: 14%;
    height: 3px;
    top: calc(50% - 0.5px);
    margin: 0 auto;
transition: linear;
transition-duration: 0.5s;
transition-duration: 0.2s;
}
}


/*             1024px         */


@media only screen and (min-width:1024px){
#rang #container #img
{
    width: calc(100% - 10px);
    height: calc((((100vw - 30px) * 6) / 16) / 3);
    margin:5px;
    float: left;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    display: block;
    float: left;
}

#rang #container #img img
{
    width: 100%;
    position: absolute;
    display: block;
    align-content: center;
    top:-20px;
    opacity: 1;
transition: linear;
transition-duration: 0.1s;
}
#artwork div#galerie .pop:target
{
transition-delay: 0.1s;
transition-duration: 0.5s;
}

#rang #container #img .hover
{
    position: absolute;
    top: 0;
    visibility: hidden;
    overflow: hidden;
    background-color:rgba(0, 0, 0, 0.5) ;
    color: #fff;
    width: 100%;
    height: 100%;
    font-family:'gravitylight','oswald-light',"Century Gothic","Arial","Helvetica Neue";
    font-style:normal;
    opacity: 0;
transition: linear;
transition-delay: 0.1s;
transition-duration: 0.2s;
}
#rang #container a#img:hover .hover
{
    visibility: visible;
    opacity: 1;
transition: linear;
transition-delay: 0.1s;
transition-duration: 0.2s;
}
#rang #container a#img:hover img
{
    width:120%;
transition: linear;
transition-duration: 0.2s;
}

#rang #container #img .hover h3
{
font-weight: 100;
position: absolute;
letter-spacing:2px;
font-size: 20px; 
text-decoration:none;
float: left;
padding-bottom: 50px;
margin-left: 20px;
bottom: 0px;
display: block;
text-transform:uppercase;
opacity: 0;
transition: linear;
transition-delay: 0.1s;
transition-duration: 0.2s;
}
#rang #container #img:hover .hover h3
{
padding-bottom: 30px;
opacity: 1;
transition: linear;
transition-delay: 0.1s;
transition-duration: 0.2s;
}

#rang #container #img .hover h3 .line
{
width: 20px; 
position: absolute;
padding-right: 20px;
bottom: 30px;
left: -20px;
height: 2px;
background-color: rgba(20,120,150,1);
transition: linear;
transition-duration: 0.5s;
}
#rang #container #img:hover .hover h3 .line
{
width: calc(100% + 20px); 
transition: linear;
transition-duration: 0.3s;
}

#rang #container #img .hover .cross
{
width: calc(((33vw - 25px) * 6) / 16); 
height: 100%;
position:relative;
float: right;
display: block;
font-size: 150px; 
text-align: center;
justify-content: center;
align-items: center;
padding: 5%;
overflow: hidden;
background-color: rgba(20,120,150,1);
    
    right:calc(((33vw - 25px) * 6) / -16);
transition: linear;
transition-duration: 0.3s;
}
#rang #container #img:hover .hover .cross
{
    right: 0;
transition: linear;
transition-duration: 0.2s;
}

#rang #container #img .hover .cross .vert
{
    position: absolute;
    background-color: #fff;
    width: 3px;
    align-content: center;
    height: auto;
    padding-bottom:calc(100% - 22%);
    margin: 0 auto;
transition: linear;
transition-duration: 0.5s;
transition-duration: 0.2s;
    
}

#rang #container #img .hover .cross .hor
{
    position: absolute;
    background-color: #fff;
    width: calc(100% - 28%);
    align-content: center;
    left: 14%;
    height: 3px;
    top: calc(50% - 0.5px);
    margin: 0 auto;
transition: linear;
transition-duration: 0.5s;
transition-duration: 0.2s;
}
}




#projet  h2
{
position: relative;
width:100%;
height: 100%;
display:block;
font-size: 35px;
}

#projet 
{
position: relative;
top: 60px;
margin: 0;
padding: 0;
width:100%;
height: 100%;
display:block;
margin-bottom: 150px;

-webkit-border-radius:0px; 
-moz-border-radius:0px; 
-o-border-radius:0px;
border-radius:0px; 
}



#projet .title h1
{  
letter-spacing:0px;
font-size: 50px; 
text-decoration:none;
color: #222;
font-family:'OldSansBlack',"Century Gothic","Arial","Helvetica Neue";

}

#projet div#galerie
{
position:relative;
margin:0 auto;
align-content: center;
width: auto!important;
height: auto;
}

#artwork div#galerie
{
position:relative;
margin:0 auto;
align-content: center;
width: auto;
height: auto;
}

div#galerie div.bloc
{
width: 100%;
display: block;
position: relative;
text-decoration:none;
overflow: hidden;
float: left;
}


label
{
width: 100%;
height: 60px;
position: absolute;
top:0px;
background: url(img/menu.gif);
}


#btnplus
{
background-color: rgba(0,0,0,0)!important;
width: 100vw!important;
height: auto;
padding: 10px;
}

#btnplus:hover
{
    background-color: rgba(0,0,0,0)!important;
}

#show-btn 
{
position: relative;
display: block;
width: 100%;
height: calc(100vw - 10px);
margin: 0 auto;
align-content: center!important;
max-width: 350px;
max-height: 350px;
color: rgba(20,120,150,1);
background-color: rgba(20,120,150,0);
border: 3px solid rgba(20,120,150,1);
border-radius: 50%;
}

#show-btn:hover
{
background-color: rgba(20,120,150,1);
color: #222!important;
border: 5px solid #3C3C3C;
border-radius: 50%;
}

#show-btn .hori
{
top:calc(50%);
left:calc(50% - (175px / 2));
position: absolute;
float: left;
display: block!important;
width: 175px!important;
height: 3px!important;
align-content: center;
margin: 0 auto;
background-color: rgba(20,120,150,1);
}

#show-btn .ver
{
top:calc(50% - (175px / 2));
left:calc(50% - 3px);
position: absolute;
float: left;
display: block!important;
width: 3px!important;
height: 175px!important;
margin: 0 auto!impportant;
align-content: center!important;
padding: 0;
background-color: rgba(20,120,150,1);
}

#show-btn:hover .hori
{
background-color: #3C3C3C!important;
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
transition: linear;
transition-duration: 0.2s;
}

#show-btn:hover .ver
{
background-color: #3C3C3C!important;
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
transition: linear;
transition-duration: 0.2s;
}

div#galerie div#show-btn
{
position: relative;
}


div#galerie #show-btn
{
position: relative;
color: #147896;
font-size: 200px;
text-decoration:none;
text-align: center;
cursor: pointer;
}

div#galerie #show-btn:active, div#galerie #show-btn:hover, div#galerie #show-btn:focus{
}

/*
$galerie.find('.hide').fadeIn();
$galerie.find('.hide').removeClass('noexist');

$galerie.find('.hide:not(.noexist)').addClass('noexist').stop().fadeOut();
$galerie.masonry('reload');

*/


div#galerie div.bloc>a.thumb
{
position: relative;
display: block;
font-family:'gravitybold',"Century Gothic","Arial","Helvetica Neue";

margin: 0;
padding: 0;
width:100%;
transition: linear;
transition-duration: 0.2s;
}

div#galerie div.bloc a.thumb img
{

display: block;
width:100%;
position: relative;
transition: linear;
transition-duration: 0.2s;
}

div#galerie div.bloc span>span
{
position:relative;
float: left;
width: 100%;
padding: 10px;
display:none;

font-family:'gravitybold',"Century Gothic","Arial","Helvetica Neue";
transition: linear;
transition-duration: 0.2s;
}

div#galerie div.bloc span .horiz
{

transition: linear;
transition-duration: 0.4s;
}

div#galerie div.bloc span .vert
{

transition: linear;
transition-duration: 0.4s;
}

div#galerie div.bloc:hover a.thumb>span
{
background-color:rgba(0,0,0,0);
opacity: 1;

transition: linear;
transition-duration: 0.2s;
}

#projet div#galerie div.bloc:hover>a
{
display: block;
transition: linear;
transition-duration: 0.2s;
}

div#galerie div.bloc:hover a.thumb span .horiz
{
width:100px;
display: block;
float: left;
height:3px;
position: absolute;
margin: 0 auto;
background-color:rgba(20,120,150,1);
padding: 0px;
top: calc(30px + (100px / 2));
opacity: 1;
transition: linear;
transition-duration: 0.2s;
}

div#galerie div.bloc:hover a.thumb span .vert
{
width:3px;
position: absolute;
height: 100px;
display: block;
padding: 0;
top: 30px;
left: calc((100%) / 2);
margin:0 auto;
background-color:rgba(20,120,150,1);
transition: linear;
opacity: 1;
transition-duration: 0.2s;
}

div#galerie div.bloc:hover a.thumb img
{
width: 101%!important;
opacity: 0.8;
position:relative;
background-color:rgba(0,0,0,1);
left:0;
transition: linear;
transition-duration: 0.2s;

-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-ms-filter: blur(3px);
-o-filter: blur(3px);
filter: blur(3px);
}

div#galerie div.bloc a#img
{
z-index: 5;
overflow: hidden!important;
}

div#galerie div.bloc a#span
{
display: none;
}

div#galerie div.bloc:hover a#img
{
z-index: 0;    
position: relative;
opacity: 0.5;
background-color:rgba(0,0,0,1);
transition: linear;
transition-duration: 0.2s;
}

div#galerie div.bloc:hover a#span
{
z-index: 5;    
display: flex;
position:absolute;
float: left;
width:100%;
bottom:0;
min-height: 250px;
}

div#galerie div.bloc:hover a#span>span
{margin: auto;
width: 100px;
bottom:0;
display: inline-block;
align-content: center;

}

div#galerie div.bloc span.titre
{ 
position:absolute;
display: block;
text-transform: uppercase;
text-align: right!important;
width:auto;
color: #FFF;
padding-right:0!important;
bottom:50px;
padding-left: 0px;
font-style: normal;
font-weight:400;
font-size: 20px;
left: 0;
bottom: 20px;
transition: linear;
transition-duration: 0.2s;
}


div#galerie div.bloc:hover span.titre
{ 
border-bottom: 2px rgba(20,120,150,1) solid;
padding-left: 30px;
transition: linear;
transition-delay: 0.2s;
transition-duration: 0.8s;
}

div#galerie div.bloc span.descr
{ 
color:rgba(0,0,0,0);
display:none;
opacity:0;
z-index:1;

font-weight:bold;
}

.bloc:hover
{
background-color:rgba(0,0,0,1)
}



#artwork div#galerie .pop
{
visibility: hidden!important;
width: 0px;
height: 0px!important;
z-index: 0;
position: relative;
float: left;
}

#artwork div#galerie .pop div
{
width: 100%;
z-index: 0;
position: relative;
color: #FFF;
text-decoration: none;
font-style: italic;
font-size: 20px;
text-align: right;
font-family:'gravitybold',"Century Gothic","Arial","Helvetica Neue";
}

#artwork div#galerie .pop span
{
width: 100%!important;
height: 2px;
background-color: rgba(20,120,150,1);
z-index: 0;
position: relative;
float: left;
}
#artwork div#galerie .pop h3
{
width: 100%;
z-index: 0;
position: relative;
text-transform: uppercase; 
padding: 1px 2%!important;
float: left;
font-style: normal;
}
#artwork div#galerie .pop h4
{
position: relative;
width: 100%;
height: auto!important;
text-decoration: none;
font-style: italic;
font-weight: 400;
font-size: 14px;
padding-right: 2%;
padding: 10px 2%;
text-align: right;
font-family:'gravityregular','droidsans',"Century Gothic","Arial","Helvetica Neue";
}

#artwork div#galerie .pop:target
{
position: fixed!important;
visibility: visible!important;
width: 100%!important;
height: 100%!important;
left: 0;
overflow: hidden;
padding: 2%;
top:-33px!important;
margin-top: calc(65px + 28px);
z-index: 6!important;
background: rgba(0,0,0,0.8);
}

#artwork div#galerie .pop:target a
{
position: relative;
display: block;
padding: 0 auto!important;
width:auto;
margin: 0 auto!important;
overflow: hidden
}
#artwork div#galerie .pop:target img
{
width: 100%;
margin: 0 auto!important;
max-height: 80vh!important;
margin: 0 auto!important;
}

@media only screen and (min-width:700px)
{
#artwork div#galerie .pop:target img.rect
{
width: auto!important;
display: block;
}
    
    #artwork{
        padding-bottom: 0;
    }
}

.info 
{
display:none;
}


#wowslider-container1
{
width: 100%;
height: auto;
position:relative;
margin: 0;
padding: 0px;
left:0;
border-spacing:0;
table-layout:fixed;
z-index:50;
}

#wowslider-container1 .ws_images ul{
position:relative;
width: 100%; 
left:0;
margin:0;
padding:0;
border-spacing:0;
table-layout:fixed;
list-style:none;
z-index: -1
}

#wowslider-container1 .ws_images
{
z-index: -1
}

.ws_thumbs 
{ 
position: absolute;
width:35px;
right:0px!important;
top: 0;
margin: 0;
padding: 0;
overflow:visible!important;
display:block;
z-index: 100;
}

.ws_thumbs a { 
position:relative; 
width: 100%;
padding: 0!important;
margin: 0!important;
height: 35px;
float: left;
}

.ws_thumbs a img{
opacity:0.5;
}

.ws_thumbs a:hover img{
opacity:1;
}

.ws_thumbs div{
position:relative;
width:100%;
}

.ws_thumbs  a img{

width:100%;
margin:0px!important;
max-width:none;
}

.info ul img
{
top: 0!important;
left: 0!important;
width: 100%;
opacity: 1;
padding: 0;
margin: 0 auto;
}

.info h2
{
position: relative;
width: auto!important;
max-width: 75%;
display: inline;
font-weight:bold;
text-align: right;
color:rgba(20,120,150,1);
background-color: none;
font-family:'gravitybold',"Century Gothic","Arial","Helvetica Neue";
padding: 5px 5% 5px 5px;
float: right;
margin-top: -60px;

z-index:0;
}
/*
margin-top: calc(((100% * 9) / 16) - 45px);*/
.info p
{
width: 100%;
position:relative;
padding: 0px 5%;
margin-top:40px;

color:rgba(20,120,150,1);
text-align:justify;
color: #222;
font-size: 14px;;

display: block;
float:left;
font-family:'gravityregular','droidsans',"Century Gothic","Arial","Helvetica Neue";
}
div.plus
{
    display: block;
    float: left;
    width: 100%;
    padding: 0 5%;
    margin-top: 20px;
text-decoration: none;
transition: linear;
transition-duration: 0.1s;
}
a.suite
{
width: 50px;
height: 50px;
padding-left: 5px;
padding-bottom: 10px;
position: relative;
display: block;
margin: 0 auto;
background-color: #999;
border: 1px solid rgba(20, 120, 150, 0);
transition: linear;
transition-duration: 0.1s;
}
a.suite:hover
{
text-decoration: none;
padding-left: 5px;

background-color: #FFF;
border: 1px solid rgba(20,120,150,1);
border-bottom: 2px solid rgba(20,120,150,1);
    
transition: linear;
transition-duration: 0.1s;
}
a.suite p
{
bottom: 1px;
position: absolute;
margin: 0 auto;
color:#FFF;
font-size: 50px;
text-decoration: none;
font-family:'gravitylight','droidsans',"Century Gothic","Arial","Helvetica Neue";
transition: linear;
transition-duration: 0.1s;

}
a.suite:hover p
{
color:rgba(20,120,150,1);
transition: linear;
transition-duration: 0.1s;

}

.info div.mat ul
{
width: 100%;
padding: 10px 5%;
position: relative;
margin: 0;
padding: 0;
color: #BABABA;
font-size: 14px;
text-align:justify;

}

.info div.mat h3
{ 
position: relative;
padding: 10px 5%;
padding: 0;
font-family:'gravitybold',"Century Gothic","Arial","Helvetica Neue";
color:rgba(20,120,150,1);
font-weight:bold;
font-size: 20px;
text-align: center;
border-radius: 0px;
}

.info div.mat
{
font-family:'gravityregular','droidsans',"Century Gothic","Arial","Helvetica Neue";
position:relative;
background-color: #222;
background: url(img/menu.gif);
display: inline-block;
width: 100%;
margin: 0;
padding: 10px 5%;
padding-bottom: 5%;
}

#projet div#galerie div.bloc.unfold
{
display:inline-block;
width: 100%;
z-index:5;
top:10px;
right:0;
left:0;
margin: 0 auto;
overflow: hidden;
border-radius: 0px;
position:absolute;
background-color: #FFF;
}

#artwork div#galerie div.bloc.unfold
{
display: block;
text-decoration:none;
overflow: hidden;
float: left;
}

#artwork div#galerie div.bloc.unfold .thumb
{
position: relative;
background-color: rgba(0,0,0,1);
display: block;
font-family: 'gravitybold',"Century Gothic","Arial","Helvetica Neue";
margin: 0;
padding: 0;
width: 100%;
transition: linear;
transition-duration: 0.2s;
}

#projet div#galerie div.bloc.unfold .thumb
{
display:none;
}

#projet div#galerie div.bloc.unfold span
{
display:none;
}

#projet div#galerie div.bloc.unfold .info
{
display:block;
}

#projet div#galerie #btnplus
{
}
#projet div#galerie #show-btn
{
    position: relative;
}

.hidden
{
position: absolute;
}

                /* NEWS */


#new
{
position: relative;
margin-top: 60px!important;
margin:0 auto;
width: 100%;
padding: 0;
transition: linear;
transition-duration: 0.2s;
}

#new>div#demo
{
display:block;
position:relative;
width: 100%;
max-height: 100vh;
padding: 0;
margin: 0;
overflow:hidden;
}

#new div.fond
{
position: absolute;
width:100%;
right: 0;
bottom: 0;
z-index: 1;
}

#new div.fond .down
{
position: relative;
width:auto;
margin: 0 auto;
bottom: 20px;
display: none;
float: right;
z-index: 1;
right: 5px;
}

#new div.fond .down span
{
position: relative;
width: 38px;
height: 38px;
display: block;
margin: 0 auto;
padding: 12px;
background-color: rgba(0,0,0, 0.2);
border-radius: 50%;
transition: linear;
}

#new div.fond .down img
{
transform: rotate(180deg);
display: block;
}

#new div.fond .down img:first-child
{
position: relative;
width: 10px;
margin: 0 calc((100% - 10px) / 2);
transition: linear;
}

#new div.fond .down img:last-child
{
position: relative;
width: 14px;
margin: 0 calc((100% - 14px) / 2);
    transition: linear;
}

@-webkit-keyframes anim1 {
0%{
    bottom: 20px;
transition: linear;
}
25%{
    bottom: 18px;
transition: linear;
}
50%{
    bottom: 30px;
transition: linear;
}
75%{
    bottom: 25px;
transition: linear;
}
100%{
    bottom: 20px;
transition: linear;
}
}

@-webkit-keyframes anim2 {
0%{
    margin-top: 0;
    transition: linear;
}
50%{
    margin-top: -5px;
    transition: linear;
}
100%{
    margin-top: 0px;
    transition: linear;
}
}

@-webkit-keyframes anim3 {
0%{
    margin-top: 0;
    transition: linear;
}
50%{
    margin-top: 5px;
    transition: linear;
}
100%{
    margin-top: 0px;
    transition: linear;
}
}

#new #demo:hover div.fond .down
{
    transition: linear;
animation-name: anim1;
animation-duration: 0.6s; 

}

#new #demo:hover div.fond .down img:first-child
{
    transition: linear;
animation-name: anim2;
animation-duration: 0.6s; 
}

#new #demo:hover div.fond .down img:last-child
{
    transition: linear;
animation-name: anim3;

    margin-top: 0px;
animation-duration: 0.6s; 
}

.fond02
{
position:absolute;
    display: none;
float: left;
bottom: -4px;
right: -3px;
z-index: -1;
}

.fond02 img
{
right: 0;
}

#new iframe
{ 
position:relative;
margin:0 auto;
float:left;
width: 100%;
display: inline;
height: calc((100vw * 9) / 16);
min-height: 200px;
border-style: none;
top: 0;
}

.fond01
{
position: relative;
bottom: -5px;
right: 15px;
display: none;
width: auto;
float: right;
margin: 0 -10px;
z-index: 1;
}

.fond01 #tit
{
max-width: 120px;
}

#new .typo
{
position: absolute;
display: inline-block;
color: rgba(20,120,150,1);
margin: 10px;
bottom: 0;
right: 0px;
float: left;
max-width: 80vw;
z-index: 1;
}

#new .typo .o10
{
font-family:'gravityregular','droidsans',"Century Gothic","Arial","Helvetica Neue";
font-weight: 500;
text-align: left;
line-height: 35px;
font-style:normal;
padding: 5px;
font-size: 35px;
background-color: rgba(20,120,150,0);
}
#new .typo .o10 p
{
color: #646464;
font-size: 29px;
font-weight: 400;
text-align: left;
line-height: 30px;
letter-spacing:2.5px;
text-transform:inherit;
}

#new .typo .o7
{
font-family:'gravitybold';
color:white;
font-size: 40px;
font-style: normal;
text-align: right;
line-height: 35px;
display: none;
}

#new #serv_01,
{
margin-top: 8px;
font-family:'gravity','gravityregular','droidsans',"Century Gothic","Arial","Helvetica Neue";
background-color: rgba(20,120,150,1);
font-size: 20px;
font-style:normal;
text-align: center;
line-height: 40px;
text-decoration: none;
}

#new #serv_02
{
font-family:'gravity','gravityregular','droidsans',"Century Gothic","Arial","Helvetica Neue";
text-align: center;
}

#new #serv_01 #img1,
#new #serv_01 #img2,
#new #serv_01 #img3
{
position:relative;
font-family:'gravity','gravityregular','droidsans',"Century Gothic","Arial","Helvetica Neue";
background-color: rgba(20,120,150,1)!important;
font-size: 20px;
font-style:normal;
text-align: center;
line-height: 40px;
text-decoration: none;
cursor: pointer;
}

#new #serv_01 #img1 .hover,
#new #serv_01 #img2 .hover,
#new #serv_01 #img3 .hover
{
background-color: rgba(20,120,150,1)!important;
}

#new #serv_01 #img1 img,
#new #serv_01 #img2 img,
#new #serv_01 #img3 img
{
width: calc( 100% - 40px);
max-width: 250px;
text-align: center;
align-content: center
}

#new #serv_01 .owl-item h3
{
    text-transform: uppercase;
    font-size: 20px;
    margin: -35px 0 -15px 0;
    color: #222;
    transition: linear;
}

#new #serv_01 .owl-item h4
{
    font-size: 18px;
    display: inline-block;
    margin: -35px 0 -15px 0;
    color: #999999;
    transition: linear;
    transition-duration: 0.2s ;
} 

#new #serv_01 .owl-item p,
#new #serv_02 .des_1,
#new #serv_02 .des_2,
#new #serv_02 .des_3
{
    background-color: rgba(34, 34, 34, 0);
    color:rgba(153, 153, 153, 0)!important;
    height: 0px;
    font-size: 14px;
    line-height: 0px;
    padding: 0px 35px;
    transition: linear;
    transition-delay: 0.1s;
    transition-duration: 0.4s ;
}

#new #serv_01 #img1:hover p,
#new #serv_01 #img2:hover p,
#new #serv_01 #img3:hover p
{
    background-color: rgba(34, 34, 34, 1);
    font-size: 14px;
    line-height: 18px;
    transition: linear;
    transition-delay: 0.05s;
    transition-duration: 0.1s ;
}

#new #serv_01 #img1:hover p,
#new #serv_01 #img2:hover p,
#new #serv_01 #img3:hover p
{
    height: auto;
    padding: 35px;
    transition: linear;
    transition-delay: 0.15s;
    transition-duration: 0.2s ;
}

#new #serv_01 #img1:hover p,
#new #serv_01 #img2:hover p,
#new #serv_01 #img3:hover p
{
    color: rgb(153, 153, 153, 1)!important;
    transition: linear;
    transition-delay: 0.2s;
    transition-duration: 0.2s ;
}

#new #serv_01 #img1:hover h4,
#new #serv_01 #img2:hover h4,
#new #serv_01 #img3:hover h4  
{
    font-size: 18px;
    margin: -35px 0 -15px 0;
    color: #FFF;
    transition: linear;
    transition-duration: 0.4s ;
}

#new #serv_01 #img1 span,
#new #serv_01 #img2 span,
#new #serv_01 #img3 span   
{
    position: relative;
    width: 10px;
    height: 10px;
    margin: 10px auto;
    margin-top: 10px;
    border-radius: 50%;
    background-color: #999999;
    transition: linear;
    transition-duration: 0.2s ;
}

#new #serv_01 #img1:hover span,
#new #serv_01 #img2:hover span,
#new #serv_01 #img3:hover span  
{
    margin-top: 6px;
    background-color: #222;
    transition: linear;
    transition-duration: 0.2s ;
}

/* bouton */

input:checked 
{
display: none;
border: 1px solid blue;
}

input#descr1, input#descr2, input#descr3 
{
display: none;
width: 0px;
height: 0px;
margin-left: 0px;
border: 1px solid blue;
}

#des_1,des_2,des_3 
{
display: none!important;
}

#descr1:checked ~ #img1, #descr1:checked ~ * #img1,
#descr2:checked ~ #img2, #descr2:checked ~ * #img2,
#descr3:checked ~ #img3, #descr3:checked ~ * #img3
{
cursor: context-menu!important;
color: rgb(153, 153, 153, 1);
}

#descr1:checked ~ #img1 em, #descr1:checked ~ * #img1 h4,
#descr2:checked ~ #img2 em, #descr2:checked ~ * #img2 h4,
#descr3:checked ~ #img3 em, #descr3:checked ~ * #img3 h4
{
color: #FFF;
}

#descr1:checked ~ #img1 span, #descr1:checked ~ * #img1 span,
#descr2:checked ~ #img2 span, #descr2:checked ~ * #img2 span,
#descr3:checked ~ #img3 span, #descr3:checked ~ * #img3 span
{
    background-color: #222!important;
}

#descr1:checked ~ #img1 p, #descr1:checked ~ * #img1 p,
#descr2:checked ~ #img2 p, #descr2:checked ~ * #img2 p,
#descr3:checked ~ #img3 p, #descr3:checked ~ * #img3 p
{
    background-color: rgba(34, 34, 34, 1);
    color: #999999!important;
    font-size: 14px;
    line-height: 18px;
    transition: linear;
    transition-delay: 0.05s;
    transition-duration: 0.1s ;
    height: auto;
    padding: 35px;
    transition: linear;
    transition-delay: 0.15s;
    transition-duration: 0.2s ;
    color: rgb(153, 153, 153, 1);
    transition: linear;
    transition-delay: 0.2s;
    transition-duration: 0.2s ;
}

/* fin bouton*/

@media only screen and (min-width:582px)
{

.fond01
{
position: relative;
bottom: -10px;
right: 20px;
display: none;
width: auto;
float: left;
margin: 0 -30px;
z-index: 1;
}

.fond01 #tit
{
max-width: 250px;
}

#new .typo
{
position: absolute;
display: inline-block;
margin: 20px;
bottom: 0;
right: 0;
float: left;
max-width: 80vw;
z-index: 1;
}

#new .typo .o10
{
font-size: 40px;
text-align: left;
line-height: 40px;
padding: 0 5px;
}
}

@media only screen and (min-width:550px)
{
#new .typo .o10
{
font-family:'gravity','gravityregular','droidsans',"Century Gothic","Arial","Helvetica Neue";
font-size: 35px;
width: auto;
text-align: left;
line-height: 42px;
padding: 0 5px;
}
#new .typo .o10 p
{
color: #646464;
font-size: 25px;
font-weight: 400;
text-align: left;
letter-spacing: 5.5px;
line-height: 35px;
text-transform:inherit;
}
}

#new div.deux
{
margin:0;
position:relative;
display:inline-block;
float: left;

width: 100%;
color: white;
text-align:justify;
padding: 0px 20px;
font-family:'gravityregular','droidsans',"Century Gothic","Arial","Helvetica Neue";
}

#new div.deux h2
{ 
font-size: 35px;
color:rgba(20,120,150,1);
font-family:'gravityregular',"Century Gothic","Arial","Helvetica Neue";
margin: 20px 0px;
margin-top: 10px;
text-align:left;
text-transform: uppercase;
}

#new div.deux p#un
{
font-style: italic;
font-size:20px;
color: rgba(200, 200, 200, 1); 
font-family:'gravityregular','droidsans',"Century Gothic","Arial","Helvetica Neue";
text-align:right;
}

#new #rang
{ 
padding: 0;
position:relative;
margin: 0 auto;
display:block;
float:left;
width: 100%;
height: auto!important;
overflow: hidden;
}

#new #rang:first-child
{ margin-top: 10px;
}

#new #rang .titl
{ 
padding: 0px 2%;
    margin-bottom: 10px;
    margin-top: 50px;

}

#new #rang .titl h2
{ 
padding: 0px 0px;
font-style: normal;
}

#new #rang img
{ 
padding: 0;
left: 0!important;
}



/* Pages projets Individuelles */

div#proj
{
    width: 100%;
    height: auto;
    position: relative;
    display: block;
    top:60px;
}

div#proj .img img
{
    width: 100%;
    height: auto;
    display: inline-block;
    float: left;
    margin: 0!important;
    padding: 0!important;
}

div#proj .img iframe
{
    position: relative;
    width: 100%;
    height: calc((100vw * 9) / 16);
    min-height: auto;
    top: 0;
    display: inline-block;
    margin: 0!important;
    padding: 0!important;
}

div#proj .text
{
    position: relative;
    width: 100%;
    padding: 0 15px;
    display: block;
    float: left;
}

div#proj #doc1
{
    padding-bottom: 50px;
    text-align: justify;
}

div#proj .text h1
{
    color: rgba(20,120,150,1);
    font-size: 50px;
    text-align: right;
    margin-top:-60px;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-family:'gravitybold','droidsans',"Century Gothic","Arial","Helvetica Neue";
}

div#proj .text h2
{
    width: 100%;
    color: #999999;
    font-size: 30px;
    text-align: right;
    margin: 5px 0;
    margin-top: 0px;
    text-transform: uppercase;
    font-family:'gravitylight','droidsans',"Century Gothic","Arial","Helvetica Neue";
}

div#proj .text h3
{
    width: 100%;
    color: #222;
    font-size: 20px;
    text-align: right;
    margin: 5px 0;
    margin-bottom: 50px;
    text-transform: uppercase;
    font-family:'gravitybook','droidsans',"Century Gothic","Arial","Helvetica Neue";
}

div#proj .text h4
{
    width: 100%;
    color: rgba(20,120,150,1);
    font-size: 18px;
    text-align: left;
    margin: 5px 0;
    text-transform: uppercase;
    font-family:'gravityregular','droidsans',"Century Gothic","Arial","Helvetica Neue";
}

div#proj .text p,
div#proj .text li
{
    width: 100%;
    color: #FFF;
    font-size: 14px;
    text-decoration: none;
    list-style: none;
    margin: 10px 0;
    font-family:'gravityregular','droidsans',"Century Gothic","Arial","Helvetica Neue";
}

div#proj .text p.date
{
    width: 100%;
    color: #999999;
    font-size: 10px;
    text-align: right;
    margin: 5px 0;
    bottom: 0;
    text-transform: lowercase;
    font-family:'gravityregular','droidsans',"Century Gothic","Arial","Helvetica Neue";
}

div#proj .text li
{
    text-decoration: none;
    list-style: none;
    text-align: left;
    margin: 0px;
    font-family:'gravityregular','droidsans',"Century Gothic","Arial","Helvetica Neue";
}

div#proj .text ul
{
    text-decoration: none;
    list-style: none;
    column-count: 2;
    text-align: left;
    margin: 10px;
    font-family:'gravityregular','droidsans',"Century Gothic","Arial","Helvetica Neue";
}

@media only screen and (min-width:700px)
{
    
div#proj
{
display: block;
float: right;
margin:0 auto;
margin-bottom: -100px;
}

div#proj .img
{
    width: calc(((100vw) * 60) / 100);
    height: auto;
    display: inline-block;
    float: left;
    margin: 0!important;
    padding: 0!important;
}

div#proj .img img
{
    width: 100%;
}

div#proj .img iframe
{
    position: relative;
    width: 100%;
    height: calc(((((100vw) * 60) / 100) * 9) / 16);
    min-height: auto;
    top: 0;
    display: inline-block;
    margin: 0!important;
    padding: 0!important;
}

div#proj .text
{
    width: calc(((100vw) * 37.5) / 100);
    padding: 0 15px 0 15px;
    display: inline-block;
    float: right;
}

div#proj #doc1
{
    padding-bottom: 100px;
    text-align: left;
}

div#proj .text h1
{
    margin-top:150px;
    display: block;
    float: right;
}

div#proj .text h2
{
    display: block;
    float: right;
}

div#proj .text h3
{
    margin-bottom: 100px;
    display: block;
    float: right;
}

div#proj #doc1 p
{
    display: block;
    float: right;
}

div#proj .text h4
{
    max-width: 300px;
}

div#proj #doc2
{
    height: auto;
    overflow: visible;
}

div#proj #doc2 p,
div#proj #doc2 ul
{
    max-width: 300px;
}

div#proj .text p.date
{
    position: static;
    bottom: 0;
    max-width: 9000px!important;
    
}

div#proj .text ul
{
    max-width: 300px;
    margin-bottom: 100px;
}
    
}

@media only screen and (min-width:1024px)
{
    
div#proj
{
    top:0px;
display: block;
    float: right;
width: calc(100% - 50px);
margin:0 auto;
margin-bottom: -50px;
}

div#proj .img
{
    width: calc(((100vw - 50px) * 60) / 100);
    height: auto;
    display: inline-block;
    float: left;
    margin: 0!important;
    padding: 0!important;
}

div#proj .img img
{
    width: 100%;
}

div#proj .text
{
    width: calc(((100vw - 50px) * 38.2) / 100);
    padding: 0 15px 0 15px;
    margin: 0 auto;
    float: right;
    display: inline-block;
}

div#proj #doc1
{
    padding-bottom: 100px;
    text-align: left;
}

div#proj .text h1
{
    margin-top:150px;
    width: 100%;
}

div#proj .text h3
{
    margin-bottom: 100px;
}

div#proj .text h4
{
    max-width: 300px;
}

div#proj #doc1 p
{
    max-width: 450px;
    margin: 0 auto;
    display:block;
    float: none;
}

div#proj #doc2
{
    height: auto;
    overflow: visible;
    margin: 0 auto;
    
    float: right;
    display: inline-block;
}

div#proj #doc2 p,
div#proj #doc2 ul
{
    max-width: 300px;
}

div#proj .text p.date
{
    position: static;
    bottom: 0;
    max-width: 9000px!important;
    
}

div#proj .text ul
{
    max-width: 300px;
    margin-bottom: 100px;
}
}

@media only screen and (min-width:1300px)
{

div#proj #doc2
{
    padding-left: calc(((((100%) * 38.2) / 100) - 450px) / 2);
}
}

/* Mentions Légales */

div#ment
{
    width: 100%;
    height: auto;
    position: relative;
    display: block;
    top:60px;
    padding-bottom: 60px;
}

div#ment .title{
    width: 100%;
    height: auto;
    position: relative;
    background-color: #222;
    padding: 50px 15px;
    border-bottom: 2px rgb(20, 120 ,150) solid;
}

div#ment .title h1{
font-size: 50px;
text-transform: uppercase;
font-family:'gravitybold','droidsans',"Century Gothic","Arial","Helvetica Neue";
text-align:right;
color: #FFF;
}

div#ment .rules{
    width: auto;
    height: auto;
    position: relative;
    /*background-color: #FFF;/*
    margin: 0 15px;
    padding: 20px 0;*/
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

div#ment .rules>div
{
    color: #FFF;
}


@media only screen and (min-width:700px)
{

div#ment .rules
{
    column-count: 2;
}

div#ment .rules>div
{
      
  /* display: inline-block; width: 100%; */
  -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
          page-break-inside: avoid; /* Firefox */
               break-inside: avoid; /* IE 10+ */
               break-inside: avoid-column;
}
    
}


@media only screen and (min-width:1024px)
{

div#ment .rules
{
    column-count: 3;
}

div#ment .rules>div
{
      
  /* display: inline-block; width: 100%; */
  -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
          page-break-inside: avoid; /* Firefox */
               break-inside: avoid; /* IE 10+ */
               break-inside: avoid-column;
}
div#ment
{
    top:0px;
display: block;
    float: right;
width: calc(100% - 50px);
margin:0 auto;
}

    
}

div#ment .rules .chptr
{
    width: auto!important;
    display: block;
    float: left;
    font-size: 30px;
    text-transform: uppercase;
    padding: 20px 0px 10px 15px;
    font-family:'gravitybold','droidsans',"Century Gothic","Arial","Helvetica Neue";
    border-bottom: 1px solid rgba(20, 120 ,150);
}

div#ment .rules p
{
    font-size: 14px;
    padding: 20px 15px;
    display: inline-block;
    font-family:'gravityregular','droidsans',"Century Gothic","Arial","Helvetica Neue";
}



/* FOOTER */

footer{
position: relative;
width: calc(100% + 10px);
height: auto!important;
max-height: 300px!important;
overflow: hidden;
z-index: 3;
display: block;
padding-top: 30px;
    float: none;
margin-left: -10.5px;
margin-bottom: -100px!important;
}

#bio ~ footer{
width: calc(100% + 10px);
height: auto!important;
max-height: 300px!important;
z-index: 5;
display: block;
overflow: hidden;
padding-top: 25px;
margin-left: -10.5px;
margin-bottom: -100px!important;

}

#bio{
display: inline-block;
z-index: 5;
}


@-webkit-keyframes footer {
0%{transition: linear;left: 0; box-shadow:0px 0px 2px 2px rgba(255,255,255, 0.2);}
15%{transition: linear;box-shadow:0px 0px 5px 5px rgba(255,255,255, 0.5);}
50%{transition: linear;left:calc(100vw); box-shadow:0px 0px 2px 2px rgba(255,255,255, 0.5);}
60%{transition: linear;box-shadow:0px 0px 5px 5px rgba(255,255,255, 0.5);}
100%{transition: linear;left: 0; box-shadow:0px 0px 2px 2px rgba(255,255,255, 0.2);}
}

span.ball{
width: 10px;
height: 1px;
background-color: #FFF;
float: left;
border-radius: 50%;
top: -2.5px;
left:-20px;

-webkit-transform: rotate(0.5deg);
-moz-transform: rotate(0.5deg);
-o-transform: rotate(0.5deg);
transform: rotate(2deg);

z-index:50;
-webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255, 0.2); 
-moz-box-shadow:0px 0px 0px 0px rgba(255,255,255, 0.2); 
-o-box-shadow:0px 0px 0px 0px rgba(255,255,255, 0.2); 
-ms-box-shadow:0px 0px 0px 0px rgba(255,255,255, 0.2); 
box-shadow:0px 0px 0px 0px rgba(255,255,255, 0.2); 

-webkit-animation-name: footer;
-webkit-animation-duration: 4s; 
-webkit-animation-iteration-count:infinite;
-moz-animation-name: footer;
-moz-animation-duration: 4s; 
-moz-animation-iteration-count:infinite;
-ms-animation-name: footer;
-ms-animation-duration: 4s; 
-ms-animation-iteration-count:infinite;
-o-animation-name: footer;
-o-animation-duration: 4s; 
-o-animation-iteration-count:infinite;
animation-name: footer;
animation-duration: 8s; 
animation-iteration-count:infinite;

transition: linear;
transition-duration: 0.4s;
}

#second{
    background-color: #121212;
    margin: 0!important;
    padding:0px 0px;
    width: calc((100% + 10px));
    text-align: left!important;
    z-index: 3;
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    transform: rotate(2deg);
    overflow: hidden;
    border-top: 2px #999999 solid;
}

a.up{
    
    -webkit-transform: rotate(-12deg);
    -moz-transform: rotate(-12deg);
    -o-transform: rotate(-12deg);
    transform: rotate(-12eg);
    background-color:#147896; 
    color: white;
    width: 250px;
    padding-bottom:80px;
    height: 50px;
    text-decoration: none;
    display: inline;
    z-index: 1;
    float: right;
    margin-right: -30px;
    margin-bottom: -70px;
    transition: linear;
    transition-duration: 0.2s;
}

a.up:hover{
    
    -webkit-box-shadow:0px 0px 2px 2px rgba(0, 0, 0, 0.6); 
    -moz-box-shadow:0px 0px 2px 2px rgba(0, 0, 0, 0.6); 
    -o-box-shadow:0px 0px 2px 2px rgba(0, 0, 0, 0.6); 
    -ms-box-shadow:0px 0px 2px 2px rgba(0, 0, 0, 0.6); 
    box-shadow:0px 0px 2px 2px rgba(0, 0, 0, 0.6); 
    -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    transform: rotate(-15eg);
    transition: linear;
    transition-duration: 0.2s;
}

a.up:hover p{
    padding-bottom: 10px;
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    transform: rotate(15deg); 
    top: 3px;
    transition: linear;
    transition-duration: 0.2s;
}

a.up p{
    -webkit-transform: rotate(12deg);
    -moz-transform: rotate(12deg);
    -o-transform: rotate(12deg);
    transform: rotate(12deg); 
    text-align: right; 
    position: absolute;
    display: block;
    right:0;
    padding: 5px 10px;
    margin: 0 auto;
    width: auto;
    font-family: 'gravityregular',"Century Gothic","Arial","Helvetica Neue";
    text-transform: uppercase;
    font-size: 20px;
    top: 3px;
    margin-right: 25px;
    transition: linear;
    transition-duration: 0.2s;
}

a.up p img{
    width: 18px;
    position: relative;
    display: block;
    margin: 0 auto;
}

a.up p img:last-child{
    width: 10px;
    position: relative;
    display: block;
    margin: 0 auto;
    margin-top:-2px;
    transition: linear;
    transition-duration: 0.2s;
}

a.up:hover p img:first-child{
    transition: linear;
    transition-duration: 0.2s;
  animation-duration: 0.3s;
  animation-name: slideup;
}

a.up:hover p img:last-child{
    transition: linear;
    transition-duration: 0.2s;
  animation-duration: 0.8s;
  animation-name: slidein;
}

@-webkit-keyframes slidein {
0%{width: 10px;
    margin: 0 auto;
    margin-top: 0px;
    transition: linear;}
25%{width: 13px;
    margin: 0 auto;
    margin-top:2px;
    transition: linear;}
50%{width: 10px;
    margin: 0 auto;
    margin-top:-2px;
    transition: linear;}
55%{width: 12px;
    margin: 0 auto;
    margin-top:-1px;
    transition: linear;}
60%{width: 10px;
    margin: 0 auto;
    margin-top:-2px;
    transition: linear;}
}

@-webkit-keyframes slideup {
0%{width: 18px;
    margin: 0 auto;
    margin-top: 0px;
    transition: linear;}
60%{width: 20px;
    margin: 0 auto;
    margin-top:-2px;
    transition: linear;}
100%{width: 18px;
    margin: 0 auto;
    margin-top:0px;
    transition: linear;}
}

footer .footer{
    position: relative;
    width: calc((100% - 32px))!important;
    max-width: 900px!important;
    background-color: #121212;
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    transform: rotate(-2deg);
    margin: 0 auto;
    margin-left: 15px;
    margin-top: -10px;
    z-index: 3;
}

footer .footer a.logo img{
    max-width: calc((1000px / 10) * 2)!important;
    width: 100px;!important;
    position: relative;
    top: -10px!important;
    padding:0 0px;
}

footer .footer a.logo{
    
    width: 20%!important;
    position: relative;
    float: left;
    display: inline-block;
}

footer .footer .other{
    width: 100%;
    top: 11px;
    position: relative;
    display: block;
    align-content: none!important;
    color: white;
    color: #4C4C4C!important; 
    text-decoration: none!important;
}

footer .footer .other .mentions{
    display: inline-block;
    position: relative;
    max-width: 100%;
    margin:0 10px;
    padding-bottom: 10px;
    text-align: right;
    top: -39px;
    float: right;
    border-top: 1px white solid;
}

footer .footer .other .mentions a{
    font-family: 'gravityregular',"Century Gothic","Arial","Helvetica Neue";
    width: 100%!important;
    font-size: 14px;
    padding-top: 10px;
    top: 0!important;
    text-transform: uppercase;
    color: #999;
    text-decoration: none;
}

footer .footer .other .mentions p{
    font-family: 'gravityregular','droidsans',"Century Gothic","Arial","Helvetica Neue";
    font-size: 10px;
    text-align:justify;
    padding-top: 5px;
    margin-bottom: 10px;
}

footer .footer .other .cont{
    
    top: -2px;
    position: absolute;
    width: auto;
    color: #147896!important; 
    padding:0 10px 0 0px;
    margin-right: 0px;
    display: block;
    float: right;
    right: 0;
    width: auto;
    text-align: right;
    max-width: 20%;
    font-family: 'gravitybold',"Century Gothic","Arial","Helvetica Neue";
    text-transform: uppercase;    
    font-weight: 400;
    letter-spacing: 1px;    
    font-size: 18px;
}

footer .footer .other .cont a{
    position: absolute;
    right: 0;
    padding-right: 10px;
    color: rgba(20,120,150,1)!important; 
    text-decoration: none!important;
    transition: linear;
    transition-duration: 0.15s;
}

footer .footer .other .cont a:hover{
    color: #999999!important; 
    transition: linear;
    transition-duration: 0.15s;
}


@media only screen and (min-width:600px)
{

             /* PROJETS */

#projet  h2
{
position: relative;
width:100%;
height: 100%;
display:block;
}

#projet 
{
position: relative;
margin:0 auto!important;
align-content: center;
width:100%;
height: 100%;
display:block;

-webkit-border-radius:0px; 
-moz-border-radius:0px; 
-o-border-radius:0px;
border-radius:0px; 
}


#artwork div#galerie
{
width: 100%;
position:relative;
margin:0 auto;
padding:0px;  
}

#projet div#galerie
{
width: auto;
position:relative;
display: block;
padding:0px!important;
margin:0 auto!important;
align-content: center;
}

div#galerie div.bloc
{
margin: 5px 5px;
width: calc(50% - 15px)!important;
display: block;
position: relative;
text-decoration:none;
overflow: hidden;
}
    
div#galerie #btnplus
{
    height: auto!important;
}
      
div#galerie #btnplus #show-btn
{
height: calc(50vw - 25px)!important;
}
    
#projet div#galerie div.title
{
margin: 5px 5px;
display: block;
padding-top:100px!important;
}

#projet div#galerie div.bloc.unfold
{
display:inline-block;
width: 100%!important;
z-index: 5;
top:10px;
right:0;
left:0;
overflow: hidden;
border-radius: 0px;
position:absolute;
}

#projet div#galerie div.bloc.unfold .thumb
{
display:none;
}

#projet div#galerie div.bloc.unfold span
{
display:none;
}

#projet div#galerie div.bloc.unfold .info
{
display:block;
}

.hidden
{
position: absolute;
}
}

/* TABLETTE */
@media only screen and (min-width:700px)
{

             /* HEADER */

/* bouton */

input:checked {
display: none;
margin-left: -15px;
border: 1px solid blue;
}
input#isexpandable {
margin-left: -15px;
border: 1px solid blue;
}


#expand-btn {
display: none;
}


#isexpanded:checked ~ #expand-btn .menu-burger, #isexpanded:checked ~ * #expand-btn .menu-burger 
{
display: inline-block;
}

#isexpanded, div.expandable, span.expandable {
display: inline-block;

}
#isexpanded,div.expandable {
display:inline-block;


}

#isexpanded:checked ~ * .expandable {
display: inline;

}

#isexpanded:checked ~ .expandable, #isexpanded:checked ~ * .expandable {
display: inline;
}

#isexpanded:checked ~ div.expandable, #isexpanded:checked ~ * div.expandable {
display: inline;
position: relative;
justify-content: none;
width: 100%;
height: auto;
background-color: none;
top:0;

padding: 0;
background-image: url(img/menu.gif) ;
}

#isexpanded:checked ~ header.expandable, #isexpanded:checked ~ * header.expandable {
background-image: url(img/menu.gif) ;
display: inline;

-webkit-box-shadow:0px 0px 2px 2px rgba(0, 0, 0, 0.5); 
-moz-box-shadow:0px 0px 2px 2px rgba(0, 0, 0, 0.5); 
-o-box-shadow:0px 0px 2px 2px rgba(0, 0, 0, 0.5); 
-ms-box-shadow:0px 0px 2px 2px rgba(0, 0, 0, 0.5); 
box-shadow:0px 0px 2px 2px rgba(0, 0, 0, 0.5); 
}

#isexpanded:checked ~ #new, #isexpanded:checked ~ * #new 
{
margin-top: 60px!important;
transition: linear;
transition-duration: 0.2s;
}

#isexpanded:checked ~ header.expandable nav>a, #isexpanded:checked ~ * header.expandable nav>a 
{
overflow: visible;
width: 75px;
margin-right: 0px;
margin-top: 0px;
z-index:15;
}

#isexpanded:checked ~ #menu #expand-btn, #isexpanded:checked ~ * #menu #expand-btn
{
background-image: none;
background-color: none;
}

#isexpanded:checked ~ #new, #isexpanded:checked ~ * #new,
#isexpanded:checked ~ #bio, #isexpanded:checked ~ * #bio,
#isexpanded:checked ~ #projet, #isexpanded:checked ~ * #projet,
#isexpanded:checked ~ #artwork, #isexpanded:checked ~ * #artwork,
#isexpanded:checked ~ #artw, #isexpanded:checked ~ * #artw,
#isexpanded:checked ~ #proj, #isexpanded:checked ~ * #proj,
#isexpanded:checked ~ #ment, #isexpanded:checked ~ * #ment
{
margin-top: 60px!important;
top:0;
}

/* fin bouton*/

nav>div
{
width: 100%;
height: 60px;
}

label
{
width: 100%;
height: 60px;
position: absolute;
top:0px;
visibility: hidden;

background: url(img/menu.gif);
}

label .menu-burger
{
display: none;
width: 0;
}

label .cross
{
display: none;
width: 0;
}

#menu, header.expandable
{
display: inline-block;
background: url(img/menu.gif);
width: 100%;
position:fixed;
}

nav>a:hover
{
transition: linear;
transition-duration: 0.2s;
background-color: rgba(0,0,0,0);
}

#menu a
{
overflow: hidden;
}

nav>a
{
width: 75px;
height: 60px;
display: block;
right: 0;
position: absolute;
top: 0;
background-color: rgba(20,120,150,0);
z-index: 5;

transition: linear;
transition-duration: 0.2s;
}
    
#menu nav ul
{
position: relative;
top:0px;
background: none;
width: 100%;
padding: 0px 10px;
z-index: 2;
float: left;
}

#menu nav ul li
{
width: auto;
float: left;
margin:0 0px;
padding: 18px 15px;
padding-bottom: 18px
}

#menu nav ul li:hover
{
padding-bottom: 18px;
padding: 18px 15px;
background-color: rgba(34, 34, 34, 0);
border-bottom:solid rgb(20, 120, 150) 2px;
}


#menu nav ul li.cont:hover
{
padding-bottom: 0;

background-color: rgba(0,0,0,0);
border-bottom:solid rgba(20, 120, 150, 0) 0px;
}

#menu nav ul li:focus
{
padding-bottom: 18px;

background-color: rgba(34, 34, 34, 0);
border-bottom:solid rgb(20, 120, 150) 2px;
}

#menu nav ul li a
{
width: 100%;
color: #999999;
letter-spacing: 1px;
font-size: 18px;
}

#menu nav ul li a.cont
{
width: 100%;
font-size: 18px;
font-weight: inherit;
}

#menu nav ul li a.cont:hover
{
width: 100%;
font-size: 18px;
font-weight: inherit;
}

#menu nav ul li:hover a
{
text-decoration:none;
letter-spacing: 1px;
color:#FFF;
}

#menu nav ul li.cont
{
border-bottom:solid rgba(20, 120, 150, 0) 0px;
}

#menu nav ul li:hover a.cont
{
text-decoration:none;
letter-spacing: 0px;
color:rgba(20,120,150);
}

#menu nav ul li:focus a
{
text-decoration:none;
color:#FFF;
}



        /* CORP */

/* CONTACT */

.cola,
.colb
{
padding: 5% 15%;
}

.colb label
{
visibility: visible;
}

.colb
    {
        margin-bottom: -100px!important
    }



/* PROJET */


div#galerie div.bloc
{
margin: 5px 5px;
width: calc( 50% - 15px )!important;
display: inline-block;
float: left;
}

#projet div#galerie div.bloc.unfold
{
margin: 5px 5px;
width:calc(100% - 10px)!important;
min-width: 0;
}

#artwork div#galerie .pop div
{
position: relative;
color: #FFF;
top:-60px;
text-decoration: none;
font-style: italic;
text-align: right;
background-color: rgba(0,0,0,0.3);
padding-bottom: 2px;
}


input#show:checked ~ label#show-btn, input#show:checked ~ * label#show-btn 
{
background:#222;
}



#projet div#galerie #btnplus
{
    padding: calc((50vw - 350px) / 2);
    max-height: calc(50vw - 25px)!important;
}
#projet div#galerie #show-btn
{
    position: relative;
    max-height: calc(50vw - (50vw - 350px) - 25px)!important;
}

/* GLOBAL */
iframe
{
margin: 0 auto;
display:inline;
min-height: 100%;
min-height: 100vh;
width: 100%;
position:absolute;
border-style: none;
}

    #contact iframe{
        position: relative;
    }


/* PAGES */

/* NEWS */

#new iframe
{     
display: block;
position: relative;
width: 100%;
left: 0px;
padding: 0px;
height: 400px;
min-height:400px;
border-style: none;
margin-bottom: -140px;
    padding-bottom: 0;
}

#new div.deux
{
margin:0;
position:relative;
display:inline-block;
float: left;
width: 100%;
color: white;
text-align:justify;
padding: 10px 10%;
}

@media only screen and (min-width:780px)
{
    #new div.typo .o10
    {
        font-size:45px;
        line-height: 55px;
    }
    
    #new .typo .o10 p
    {
    color: #646464;
    font-size: 30px;
    font-weight: 400;
    text-align: left;
    line-height: 42px;
    letter-spacing: 8.3px;
    text-transform:inherit;
    }
}
    
#new div.deux h3
{ 
font-size: 20px;
color:rgba(20,120,150,1);
}

#new div.deux p em
{ 
color:rgba(20,120,150,1);
}

#new div.deux p#un
{
font-style: italic;
font-size:20px;
color: rgba(200, 200, 200, 1); 
text-align:right;
}
       
#new #rang
{
    width: 100%;
    height: auto;
    position:relative;
}
    
#new #rang .titl
{ 
padding: 0 10%;
position:relative;
display:block;
width: 100%;
}

#new #serv_01
{
width: 100%;
background-color: rgba(20,120,150,1);
padding: 0px 1px 40px;
height: auto;
overflow:hidden;
padding: 0 auto;
text-align: center;
}

#new #serv_01 #img1,
#new #serv_01 #img2,
#new #serv_01 #img3
{
visibility: visible;
width: calc((100% / 3) - 5px);
max-width: 300px;
display: inline-block;
align-content: center;
}

#new #serv_01 .owl-item h3
{
    font-size: 20px;
}
    
#new #serv_01 .owl-item p
{
display: none;
}

#new #serv_01 #img1 span,
#new #serv_01 #img2 span,
#new #serv_01 #img3 span   
{
    position: relative;
    display: block;
    width: 8px;
    height: 8px;
    margin: 10px auto;
    border-radius: 50%;
    background-color: #999999;
    transition: linear;
    transition-duration: 0.2s ;
}

#new #serv_01 #img1:hover span,
#new #serv_01 #img2:hover span,
#new #serv_01 #img3:hover span  
{
    font-size: 20px;
    background-color: #222;
    transition: linear;
    transition-duration: 0.2s ;
}

/* bouton */
#descr1:checked ~ #img1 span, #descr1:checked ~ * #img1 span,
#descr2:checked ~ #img2 span, #descr2:checked ~ * #img2 span,
#descr3:checked ~ #img3 span, #descr3:checked ~ * #img3 span
{
    background-color: #222!important;
}

#serv_02 .des_1 p,
#serv_02 .des_2 p,
#serv_02 .des_3 p
{
    margin: 0 auto;
    max-width: 700px;
}
    
#descr1:checked ~ #serv_02 .des_1, #descr1:checked ~ * #serv_02 .des_1,
#descr2:checked ~ #serv_02 .des_2, #descr2:checked ~ * #serv_02 .des_2,
#descr3:checked ~ #serv_02 .des_3, #descr3:checked ~ * #serv_02 .des_3
{
    background-color: #222;
    color: #999999!important;
    font-size: 14px;
    line-height: 18px;
    transition: linear;
    transition-delay: 0.05s;
    transition-duration: 0.1s ;
    height: auto;
    padding: 50px;
    margin: 0!important;
    transition: linear;
    transition-delay: 0.15s;
    transition-duration: 0.2s ;
    transition: linear;
    transition-delay: 0.2s;
    transition-duration: 0.2s ;
}


/* fin bouton*/

/* BIOGRAPHIE */
    
#bio
{
background-color: #000;
}

#in
{
width: 100%;
height: auto;
padding: 0;
margin:0 auto;
margin-bottom: -120px;
padding-bottom: 150px;
position: relative;
background-color: rgba(0,0,0, 1);
overflow: hidden;
}

#in>div p#para
{
width: auto;
padding: 0;
padding:0 5%;
}

#bio #me
{
display: none;
}


.photo
{
position:relative;
width:50%; 
height: auto;
margin-bottom: 0px;
padding-right: 0;
left:0;
overflow: visible;
display: inline-block;
float: left;
padding-top: 150px;
}

#in .textbio
{
position:relative;
width:50%; 
height: auto;
float: right;
display: inline-block;
padding-top: 150px;
}

div.photo>img
{
width: 40vh;
min-height: calc(100vh - 100px);
top:100px;
position: fixed;
}

div.photo div
{
width: 100%;
height: 100%;   
padding-top: 150px;
padding-right: 0px;
}

#zero
{
width: 100%;
position:relative; 
display: block;
margin-left: 0px;
text-align: right; 
top:-5px;
font-weight:bold;
font-size: 50px; 
text-decoration:none;/*
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);*/

z-index: 12;
}

    #bio div #un{
width: auto;
max-width: 400px;
position: relative; 
display: block;
font-style: italic;
margin-bottom: 5px;
padding-left: 20px;
right: 0;
float: right;
letter-spacing:0px;
font-size: Large;
text-align: right; 
text-decoration:none;
color: rgba(20, 120, 150, 1); 
z-index: 12;
}

#bio div #deux
{
width:100%;
position: relative; 
display: inline-block;
float: right;
padding-left: calc(50% + 5%);
margin-bottom: 10px;
font-weight:600;
letter-spacing:0px;
font-size: 20px;
text-align: right; 
color: rgba(20, 120, 150, 1); 

}

#para
{
position: relative; 
width:auto;
right: 0;
z-index: 12;
text-align: justify;
margin-bottom: 20px;

font-weight:400;
font-size: 14px;
text-decoration:none;
color: #FFF; 
}
    
.textbio .serv
{
position: relative; 
width:100%;
min-width: 355px!important;
display: block;
float: right;
padding:0 20px;
padding-top: -10px;
padding-bottom: 0px;
margin-bottom: 20px;
font-size: 14px;
color: rgba(255, 255, 255, 1); 
background-color: rgba(34, 34, 34, 0.8);
}

.textbio .serv span:first-child
{
margin-top: 0px!important;    
}
.textbio .serv span:last-child
{
margin-bottom: 0px!important;    
}

.textbio .serv span
{
width:100%;
height: 2px;
position: relative;
display: block;
float:left;
margin: 10px auto;
padding: 0!important;
background-color: rgba(20,120,150,1);    
z-index: 0;
}

.textbio .serv .print h2,
.textbio .serv .web h2,
.textbio .serv .prod h2
{
position: relative; 
width:100%;
padding-bottom: 5px;
text-align: right;
letter-spacing: 0.5px;
font-size: 25px;
color: rgba(20,120,150,1); 
font-family:'gravitybook',"Arial","Helvetica Neue";
}
    
.textbio h3
{
position: relative; 
width:100%;
margin-bottom: 10px;
padding: 0 20px;
text-align: left;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 35px;
color: rgba(20,120,150,1); 
font-family:'gravitybook',"Arial","Helvetica Neue";
}

.textbio .serv .print,
.textbio .serv .web,
.textbio .serv .prod
{
position: relative; 
width:100%;
height: auto;
padding-bottom: 5px;
display: flex;
justify-content: center;
letter-spacing: 0px;
font-size: 35px;
color: rgba(20,120,150,1); 
font-family:'gravitybook',"Arial","Helvetica Neue";
}

.textbio .serv .web h2
{
text-align: left;
}

.textbio .serv .print div:first-child,
.textbio .serv .prod div:first-child
{
position: relative; 
width:100%;
height: auto;
margin: auto;
display:inline-block;
float: left;
left: 0;
}
.textbio .serv .web div:first-child
{
position: relative; 
width:50%;

margin: auto;
float: right;
right:0;
}

.textbio .serv .print div:last-child,
.textbio .serv .prod div:last-child
{
position: relative; 
display:inline-block;
text-align: justify;
margin: auto;
right:0;
}
.textbio .serv .web div:last-child
{
position: relative; 
width:50%;
display:inline-block;
text-align: justify;
margin: auto;
left: 0;
}

.textbio .serv .print img,
.textbio .serv .web img,
.textbio .serv .prod img
{
width:100%;
max-width: 200px;
}

#download
{
padding: 20px 0;
width: 100%;
z-index: 11;
}







        /* FOOTER */

footer{
position: relative;
width: calc(100% + 10px);
height: auto!important;
max-height: 300px!important;
overflow: hidden;
z-index: 3;
display: block;
padding-top: 30px;
    float: none;
margin-left: -10px;
bottom: -130px;
}

#bio ~ footer{
margin-top: -60px;
}
    
#second{
    background-color: #121212;
    margin: 0!important;
    padding:5px 0 40px 0!important;
    width: calc(105% - 20px);
    text-align: left!important;
    z-index: 3;
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    transform: rotate(2deg);
    overflow: hidden;
    border-top: 2px #999999 solid;
    
}


a.up:hover{
    
    -webkit-box-shadow:0px 0px 2px 2px rgba(0, 0, 0, 0.6); 
    -moz-box-shadow:0px 0px 2px 2px rgba(0, 0, 0, 0.6); 
    -o-box-shadow:0px 0px 2px 2px rgba(0, 0, 0, 0.6); 
    -ms-box-shadow:0px 0px 2px 2px rgba(0, 0, 0, 0.6); 
    box-shadow:0px 0px 2px 2px rgba(0, 0, 0, 0.6); 
    -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    transform: rotate(-15eg);
    transition: linear;
    transition-duration: 0.2s;
}

a.up:hover p{
    padding-bottom: 10px;
    transition: linear;
    transition-duration: 0.25s;
}

a.up p{
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    transform: rotate(10deg); 
    text-align: right; 
    position: absolute;
    display: block;
    right:0;
    padding: 6px;
    width: auto;
    font-family: 'gravityregular',"Century Gothic","Arial","Helvetica Neue";
    text-transform: uppercase;
    font-size: 20px;
    top: 5px;
    margin-right: 40px;
    transition: linear;
    transition-duration: 0.2s;
}

footer .footer{
    position: relative;
    width: calc((100% - 40px))!important;
    max-width: 900px!important;
    background-color: #121212;
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    transform: rotate(-2deg);
    margin: 0 auto;
    z-index: 3;
}

footer .footer a.logo img{
    max-width: calc((1000px / 10) * 2)!important;
    width: auto;
    position: relative;
    top: 0px!important;
    padding:0 20px;
    left: 5px;
}

footer .footer a.logo{
    
    width: 20%!important;
    position: relative;
    float: left;
    display: inline-block;
    top: -10px;
}

footer .footer .other{
    width: 80%;
    top: 30px;
    position: relative;
    display: inline-block;
    align-content: none!important;
    color: white;
    color: #4C4C4C!important; 
    text-decoration: none!important;
}

footer .footer .other .mentions{
    display: inline-block;
    position: relative;
    max-width: 60%;
    padding:0 10px;
    margin-top: -5px;
    text-align: right;
    float: right;
    border-right: 1px white solid;
    border-top: 0px white solid;
    top: 0;
}

footer .footer .other .mentions a{
    font-family: 'gravityregular',"Century Gothic","Arial","Helvetica Neue";
    font-size: 14px;
    top: 0!important;
    text-transform: uppercase;
    color: #999;
    border-top: 0px white solid;
    padding: 0;
}

footer .footer .other .mentions p{
    font-family: 'gravityregular',"Century Gothic","Arial","Helvetica Neue";
    font-size: 10px;
    text-align: right;
}

footer .footer .other .cont{
    
    top: -5px;
    position: relative;
    color: #147896!important; 
    padding:0 0 0 10px;
    margin-right: 30px;
    display: inline-block;
    float: right;
    width: auto;
    max-width: 20%;
    font-family: 'gravitybold','OldSansBlack',"Century Gothic","Arial","Helvetica Neue";
    text-transform: uppercase;    
    font-weight: 400;
    letter-spacing: 1px;    
    font-size: 18px;
    text-align: left;
    right: auto;
}

footer .footer .other .cont a{
    color: #147896!important; 
    text-decoration: none!important;
    transition: linear;
    transition-duration: 0.15s;
    padding-right: 0;
    position: relative;
}

footer .footer .other .cont a:hover{
    color: #4C4C4C!important; 
    transition: linear;
    transition-duration: 0.15s;
}

}


@media only screen and (min-width:1024px)
{

             /* PROJETS */

#projet  h2
{
position: relative;
width:100%;
height: 100%;
display:block;
}

#projet 
{
position: relative;
top: 0px;
left:25px;
width:calc(100% - 50px);
}

#projet div.title
{
padding: 10px;
}

#projet div.title h1
{
margin: 0 10px;
}

#projet div.title .slct
{
margin: 10px;
}



             /* ARTWORK */


h3 a{
color: white;
text-decoration:none;
}

#artwork
{
position: relative;
left:50px;
width:calc(100% - 50px);
top:0;
padding-bottom: 0;
}

#artwork div.title
{
width: calc(100% - 50px);
top:0px;
position: fixed;
}

#artwork div#galerie
{
margin:0 auto;
}

#projet div#galerie
{
width: 100%!important;
position:relative;
margin:0 auto;
padding: 0;
padding-top:0px!important;
}





/* bouton */
    


div#galerie div.bloc
{
width: calc(( 100% - 35px ) / 3 )!important;
padding: 0!important;
overflow: hidden!important;
margin: 5px!important;
}

div#galerie div.bloc span.descr
{ 
color:rgba(0,0,0,0);
display:none;
opacity:0;
z-index:1;

font-weight:bold;
}

.bloc:hover
{
position: relative;
display: block;
float: left;

background-color:rgba(0,0,0,1)
}

    
#btnplus
{
    background-color: rgba(0,0,0,0)!important;
height: auto!important;
padding: 5px;
}

#btnplus:hover
{
    background-color: rgba(0,0,0,0)!important;
}

#show-btn 
{
display: block;
width: 100%;
height: calc(100vw - 5px);
margin: 0 auto;
align-content: center!important;
max-width: 325px;
max-height: 325px;
color: rgba(20,120,150,1);
background-color: rgba(20,120,150,0);
border: 3px solid rgba(20,120,150,1);
border-radius: 50%;
}

#show-btn:hover
{
background-color: rgba(20,120,150,1);
color: #222!important;
border: 5px solid #3C3C3C;
border-radius: 50%;
}

#show-btn .hori
{

left: calc(150px / 2);
position: absolute!important;
float: left;
display: block!important;
width: 175px!important;
height: 3px!important;
align-content: center!important;
top: calc((100% - 3px) / 2)!important;
}

#show-btn .ver
{
top: calc( 140px / 2 );
left: calc((100% - 3px) / 2)!important;
display: block!important;
width: 3px!important;
height: 175px!important;
margin: 0 auto!impportant;
align-content: center!important;
}

#show-btn:hover .hori
{

left: calc(150px / 2);
position: absolute!important;
float: left;
display: block!important;
width: 175px!important;
height: 5px!important;
align-content: center;
background-color: #3C3C3C!important;
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
transition: linear;
transition-duration: 0.2s;
top: calc((100% - 5px) / 2);
}

#show-btn:hover .ver
{
top: calc( 140px / 2 );
left: calc((100% - 5px) / 2);
display: block!important;
width: 5px!important;
height: 175px!important;
margin: 0 auto!impportant;
align-content: center!important;
background-color: #3C3C3C!important;
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
transition: linear;
transition-duration: 0.2s;
}



#artwork div#galerie .pop:target
{
position: fixed!important;
visibility: visible!important;
width: calc(100% - 50px )!important;
height: 100%!important;
left: 0;

left:50px;
padding: 2%;
top:0!important;
margin-top: 65px;
}


#wowslider-container1
{
position: relative;
max-width:65vw!important;
width: 65%; 
display: block;
float: left;
z-index:50;
}

#wowslider-container1 .ws_images ul{
position:relative;
width: 100%;
left:0;
border-spacing:0;
table-layout:fixed;
list-style:none;
}

#wowslider-container1 .ws_images
{
z-index: -1
}

.ws_thumbs 
{ 
position: absolute;
width:35px;
left:0%!important;
top: 0;
margin: 0;
padding: 0;
overflow:visible!important;
display:block;
z-index: 100;
}

.ws_thumbs a { 
position:relative; 
width: 100%;
padding: 0!important;
margin: 0!important;
height: 35px;
float: left;
}

.ws_thumbs a img{
opacity:0.5;
}

.ws_thumbs a:hover img{
opacity:1;
}

.ws_thumbs div{
position:relative;
width:100%;
}

.ws_thumbs  a img{

width:100%;
margin:0px!important;
max-width:none;
}

.info ul img
{
top: 0!important;
left: 0!important;
width: 100%!important;
opacity: 1;
padding: 0;
margin: 0 auto;
}

.info h2
{
position: relative;
width:35%!important;
top:0;
right: 0;
height: auto!important;
display: inline-block;
font-weight:bold;
text-align: right;
padding: 4% 3% 5px 5px;
margin: 0;

z-index:0;
}

.info p
{
position: relative;
width:35%!important;
display: inline-block;
top: 0;
height: 65%;
right: 0;
float: right;
overflow: hidden;
margin: 0!important;
padding: 5% 3%;
overflow-y:visible;
}

div.plus
    {
        width: 35%;
        right: 0;
        position: absolute;
        bottom:0;
        display: block;
    }

a.suite p
    {
    width: auto!important;
    height: auto;
    padding: 0px 5%;
    margin: 0 auto!important;
    overflow: visible;
    right:inherit;
    top: inherit;
    }

.info div.mat ul
{
width: 35%;
padding: 10px 5%;
position: relative;
margin: 0;
padding: 0;
color: #BABABA;
font-size: 14px;
text-align:justify;

}

.info div.mat h3
{ 
position: relative;
padding: 10px 5%;
padding: 0;
color:rgba(20,120,150,1);
font-weight:bold;
font-size: 20px;
text-align: center;
border-radius: 0px;

}

.info div.mat
{
position:absolute;
background-color: #222;
background: url(img/menu.gif);
display: inline-block;
width: 35%;
display: block;
right: 0;
bottom: 0;
margin: 0!important;
padding:10px 5%;
padding-bottom: 20px;

}

unfold .info 
{
display:none;
}

unfold .info 
{
display:block;
width: 100%;
position: relative;
}

#projet div#galerie div.bloc.unfold
{
display:inline-block;
width: calc(100% - 10px)!important;
z-index:5;
right:0;
left:0;
padding: 0;
padding-bottom: 56%;
margin: 0 auto;
overflow: hidden;
border-radius: 0px;
position:relative;
}

#projet div#galerie div.bloc.unfold .thumb
{
display:none;
}

#projet div#galerie div.bloc.unfold span
{
display:none;
}

#projet div#galerie div.bloc.unfold .info
{
display:block;
}

.hidden
{
position: absolute;
}
}


@media only screen and (min-width:1024px)
{

        /* HEADER */


label
{
width: 100%;
height: 60px;
position: absolute;
top:0px;
right: 0;
visibility: visible;

background: url(img/menu.gif);
}

label .menu-burger
{
font-size:50px;
text-align: center; 
text-decoration:none;
text-transform: uppercase;
color: #ffffff;
font-family:"Helvetica Neue";

display: block;
float: right;
right: 0;
width: 45px;
height: 45px;
margin: 2px;
}

label .cross
{
display: block;

font-size:25px;
text-align: center; 
text-decoration:none;
text-transform: uppercase;
color: #ffffff;
font-family:"Helvetica Neue";
display: block;
float: right;
right: 0;
width: 45px;
height: 45px;
margin: 2px;
}

label:focus .menu-burger
{
display: block;
left: 0;
}

label:focus .menu-burger .cross
{
display: block;
}


/* bouton */

input:checked {
margin-left: -15px;
border: 1px solid grey;
}
input#isexpandable {
margin-left: -15px;
border: 1px solid grey;
}


#expand-btn {
display: block;
}

#expand-btn .cross
{
display: none;
}

#isexpanded:checked ~ #expand-btn .menu-burger, #isexpanded:checked ~ * #expand-btn .menu-burger 
{
display: none;
}

#isexpanded, div.expandable, span.expandable {
display: flex;
}

#isexpanded, div.expandable {
position: absolute;
display: flex;
justify-content: center;
width: 100%;
height: calc(100vh - 60px)!important;
min-height: 650px;
opacity: 1;
padding: 0;
top: 60px;
}

#isexpanded:checked ~ div.expandable, #isexpanded:checked ~ * div.expandable {
position: absolute;
display: flex;
justify-content: center;
display: flex;
top:60px;
width: 100%;
height: calc(100vh - 60px)!important;
opacity: 1;
padding: 0;
}

header.expandable {
left: -230px;
visibility: visible;
}

#isexpanded:checked ~ * header.expandable {
display:block;
}

#isexpanded:checked ~ .expandable, #isexpanded:checked ~ * header.expandable {
position: fixed; 
left: -1px!important;
}

#isexpanded:checked ~ header.expandable, #isexpanded:checked ~ * header.expandable {
background-image: url(img/menu.gif) ;
display: inline;

-webkit-box-shadow:0px 0px 2px 2px rgba(0, 0, 0, 0.5); 
-moz-box-shadow:0px 0px 2px 2px rgba(0, 0, 0, 0.5); 
-o-box-shadow:0px 0px 2px 2px rgba(0, 0, 0, 0.5); 
-ms-box-shadow:0px 0px 2px 2px rgba(0, 0, 0, 0.5); 
box-shadow:0px 0px 2px 2px rgba(0, 0, 0, 0.5); 
}

#isexpanded:checked ~ header.expandable nav>a, #isexpanded:checked ~ * header.expandable nav>a 
{
overflow: visible;
width: 220px;
margin: calc(( 280px - 220px ) / 2);
margin-top: 40px;
padding: 0;
z-index:15;
}

#isexpanded:checked ~ #new, #isexpanded:checked ~ * #new
{
margin-top: 0px!important;
}

#isexpanded:checked ~ #menu #expand-btn, #isexpanded:checked ~ * #menu #expand-btn
{
background-image: none;
background-color: rgba(34, 34, 34, 0);
}

#isexpanded:checked ~ header.expandable, #isexpanded:checked ~ * header.expandable {
display: inline;
}

#isexpanded:checked ~ div.copy_r, #isexpanded:checked ~ * div.copy_r {
display: block;
}

#isexpanded, label.back {
position: fixed;
right: 0;
top: 0;
height: 100vh;
background: rgba(34, 34, 34, 0.0);
transition: linear;
transition-duration: 0.2s;
}

#isexpanded:checked ~ label.back, #isexpanded:checked ~ * label.back {
width: calc(100vw - 280px);
right: 0;
top: 0;
height: 100vh;
background: rgba(34, 34, 34, 0.8);
transition: linear;
transition-duration: 0.3s;
}

#isexpanded:checked ~ #new, #isexpanded:checked ~ * #new,
#isexpanded:checked ~ #bio, #isexpanded:checked ~ * #bio,
#isexpanded:checked ~ #projet, #isexpanded:checked ~ * #projet,
#isexpanded:checked ~ #artwork, #isexpanded:checked ~ * #artwork,
#isexpanded:checked ~ #artw, #isexpanded:checked ~ * #artw,
#isexpanded:checked ~ #proj, #isexpanded:checked ~ * #proj,
#isexpanded:checked ~ #ment, #isexpanded:checked ~ * #ment
{
margin-top: 0px!important;
top:0;
}
/* fin bouton*/

/* menu */

#menu
{
display:block;
float: left;
background: url(img/menu.gif);
width: 280px;
height: 100%;
min-height: 520px;
position: fixed;
padding: 0;
left: -230px;
visibility: visible;
font-family:'gravitybold',"Century Gothic","Arial","Helvetica Neue";
background-color: #222;

-webkit-box-shadow:0px 0px 1px 1px rgba(0, 0, 0, 0.5); 
-moz-box-shadow:0px 0px 1px 1px rgba(0, 0, 0, 0.5); 
-o-box-shadow:0px 0px 1px 1px rgba(0, 0, 0, 0.5);
box-shadow:0px 0px 1px 1px rgba(0, 0, 0, 0.5); 
border-left: solid grey 1px;
border-right: solid grey 1px;
z-index: 15;

transition: linear;
transition-duration: 0.2s;
}

iframe
{
width: 100%;
margin: 0 auto;
left: 0px;
border-style: none;
}

#menu:hover
{
border-left: solid white 1px;
border-right: solid white 1px;
transition: linear;
transition-duration: 0.2s;
}
    
#menu:hover
{
width: 280px;
height: 100%;
position: fixed; 
left: -1px;
display: block;
font-family:'gravitybold',"Century Gothic","Arial","Helvetica Neue";
visibility: visible;
opacity: 1;

transition: linear;
transition-duration: 0.3s;
}
    
#menu nav .copy_r
{
display: none;
position: absolute;
font-size: 8px;
text-align: center;
color: #999;
font-family: 'gravitybook',"Century Gothic","Arial","Helvetica Neue";
bottom: -20px;
}
    
#menu:hover nav .copy_r
{
display: block;
}

/*   */

#menu nav>a #img00
{
position: absolute;
margin: 0 auto;
width: 100%;
opacity:1;
visibility:visible;

z-index: 5;
}

#menu nav>a #img0
{
position: absolute;
width: 100%;
opacity:1;
left: 0;
visibility:visible;

z-index: 6;
}

nav>a:hover #img0
{
width: 100%;
opacity:1;
z-index: 6;
}

#menu nav>a:hover #img00
{
width: 100%;
opacity:1;

z-index: 10;
}

nav>a
{
position: relative;
width: 220px;
height:220px;
background-color: rgba(0,0,0,0);
margin: calc(( 280px - 220px ) / 2);
margin-top: 40px;

-webkit-border-radius:50%; 
-moz-border-radius:50%; 
-o-border-radius:50%; 
-ms-border-radius:50%; 
border-radius:50%;
}

nav>a:hover
{
background-color: rgba(0,0,0,0);
}

/*  */

#menu nav
{
height: auto;
padding: 0px!important;
margin: 0px!important;
}

.back
{
position: fixed;
right: 0px;
top: 0;
width: 0px;
height: 100vh;
background: rgba(34, 34, 34, 0);
z-index: 14;
transition: linear;
transition-duration: 0.2s;
}

#menu:hover + .back
{
right: 0;
top: 0;
width: calc(100vw - 280px);
height: 100vh;
background: rgba(34, 34, 34, 0.8);
transition: linear;
transition-duration: 0.3s;
}

div.expandable:first-child
{
position: absolute;
display: flex;
justify-content: center;
width: 100%;
height: calc(100vh - 60px)!important;
opacity: 1;
padding: 0;
}

#menu nav ul 
{
position: relative;
display: inline-block;
width: auto;
margin:auto;
padding: 0;
}

#menu nav ul li
{
display: block;
width: 100%;
margin: 0px 0px;
padding: 8px 0;
letter-spacing: 0px;
opacity:1;
border-bottom: solid rgba(0,0,0,0) 2px;
transition: linear;
transition-duration: 0.1s;
}

#menu nav ul li:hover
{
display: block;
width: 100%;
margin: 0px 0px;
padding: 8px 0;
letter-spacing: 0px;
opacity:1;
transition: linear;
transition-duration: 0.1s;
}

#menu nav ul li a
{
width: 100%;
letter-spacing: 0px;
}  

#menu nav ul li:hover a
{
width: 100%;
letter-spacing: 0px;
}  

#menu nav ul li a:hover
{
letter-spacing: 0px;
}  

#menu nav ul li:hover a.cont
{
color: rgba(20,120,150,1);
letter-spacing: 1px;
transition: linear;
transition-duration: 0.1s;
}  

#menu nav ul li.cont:hover
{
padding-bottom: 8px;
}  

#menu nav ul li p
{
width: 100%;
}    


/* ribbon style */

#menu .ribbon-front {

display: none;
font-family: "Century Gothic","Arial","Helvetica Neue";
color: white;

width:15px;
background: url(img/menu-icone.png);
position: absolute;
top:0px;
left:60%;
z-index: 3;
}

#menu:hover .ribbon-front a #img1 {

font-family: "Century Gothic","Arial","Helvetica Neue";
color: white;
width:50px;
position: absolute;
top:50px;
left: 100px;

-webkit-border-radius:50%; 
-moz-border-radius:50%; 
-o-border-radius:50%; 
-ms-border-radius:50%; 
border-radius:50%;

-webkit-box-shadow:0px 0px 1px 1px rgba(0, 0, 0, 0.4); 
-moz-box-shadow:0px 0px 1px 1px rgba(0, 0, 0, 0.4); 
-o-box-shadow:0px 0px 1px 1px rgba(0, 0, 0, 0.4); 
-ms-box-shadow:0px 0px 1px 1px rgba(0, 0, 0, 0.4); 
box-shadow:0px 0px 1px 1px rgba(0, 0, 0, 0.4);
transform : rotate(-90deg);

transition-duration: 0.6s;
}

#menu .ribbon-front a #img1  {

font-family: "Century Gothic","Arial","Helvetica Neue";
color: white;
width:50px;
position: absolute;
top:50px;
left: 100px;

-webkit-border-radius:50%; 
-moz-border-radius:50%; 
-o-border-radius:50%; 
-ms-border-radius:50%; 
border-radius:50%;



transition-duration: 0.6s;
}

#menu .ribbon-front #img2  {

font-family: "Century Gothic","Arial","Helvetica Neue";
color: white;
width:50px;
position: absolute;
top:50px;
left: 100px;

-webkit-border-radius:50%; 
-moz-border-radius:50%; 
-o-border-radius:50%; 
-ms-border-radius:50%; 
border-radius:50%;

-webkit-box-shadow:0px 0px 1px 1px rgba(0, 0, 0, 0.4); 
-moz-box-shadow:0px 0px 1px 1px rgba(0, 0, 0, 0.4); 
-o-box-shadow:0px 0px 1px 1px rgba(0, 0, 0, 0.4); 
-ms-box-shadow:0px 0px 1px 1px rgba(0, 0, 0, 0.4); 
box-shadow:0px 0px 1px 1px rgba(0, 0, 0, 0.4);
}

#indic
{
font-family: "Century Gothic","Arial","Helvetica Neue";
color: white;
}



body
{
margin: 0 auto;

}

    
    
    
/* NEWS */

#new
{
display: block;
    float: right;
width: calc(100% - 50px);
max-width: 1850px;
margin:0 auto;
margin-top: 0!important;
margin-bottom: -200px;
}

#new div.deux
{
margin:0;

position:relative;
display:inline-block;
float: left;

width: 100%;
color: white;
text-align:justify;
padding: 20px calc((100% / 2) - 400px);
}

#new #rang .titl h2
{ 
padding: 0 15%;
position:relative;
margin: 0 auto;
display:block;
width: 100%;
padding:0 calc((100% / 2) - 400px);
}


#new iframe
{ 
display: inline-block;
position: relative;
width: 100%;
padding: 0px!important;
height: 550px;
min-height: 600px;
margin: 0!important;
margin-bottom:180px!important;
padding-top: 0px!important;
top:0px!important;
border-style: none;
}

.fond
    {
        width: 100vw!important;
        max-width: 100vw!important;
        display: inline;
        float: left;
        position:absolute;
    }
    
.typo
{
        position:absolute;
}


#new .typo
{
position: absolute;
display: inline-block;
color: rgba(20,120,150,1);
margin: 20px;
bottom: 0;
right: 14px;
float: right;
max-width: 80vw;
z-index: 1;
}
#new .typo .o10
{
font-family:'gravity','gravityregular','droidsans',"Century Gothic","Arial","Helvetica Neue";
font-weight: 500;
text-align: L;
font-size: 35px;
background-color: rgba(20,120,150,0);
line-height: 35px;
padding: 0 5px;
}

          /* BIOGRAPHIE */

#bio  {
width: 100%;
height: auto;
padding-top: 100px;
background-color: black;
top: 0;

padding-left: 50px!important;
padding-bottom: 100px;
}

#in
{
position: relative;
width: auto;
height: auto!important;
background-color: black;
padding: 0px;
overflow: visible;
}

#in>div p#para
{
width: 60%;
padding: 0;
margin:0;
margin-bottom: 20px;
}

#bio #me
{
display: none;
}

.photo
{
width: 100%;
}

.photo img
{
    width: auto!important;
    max-height: 100vh;
    bottom: 0;
}

.photo div
{
width: 100%;
height: auto!important;
position: relative;
padding-right: calc((100% / 2) - 300px)!important;
margin-bottom: 20px!important;
    
}
    
#in .textbio
{
width: auto;
height: auto;
padding: 0 calc((100% / 2) - 300px);
margin: 0 auto;
overflow: visible;
}
    
.textbio h3
{
    padding: 0px;
}

#zero
{ 
float: right;
right:auto;
margin: 0!important;

font-weight:bold;
font-size: 50px; 
text-decoration:none;

z-index: 12;
}

#bio div #un{
display: block;
font-style: italic;
text-decoration:none;
color: rgba(20, 120, 150, 1); 
}

#para
{
width: 600px!important;
text-align: justify;
display: block;

font-weight:400;
font-size: 14px;
text-decoration:none;
color: rgba(255, 255, 255, 1); 
}

a#cv
{ 
opacity: 1;
}




/* CONTACT */

#contact
{
top:0;
width:calc(100% - 50px);
left:25px;
}

#contact .join_me
{
    margin: 0 auto;
}

.cola,
.colb
{
width: calc((100% / 2)) ;
padding: 5%;
}


.colb label
{
visibility: visible;
}



/* Footer */

footer{
position: relative;
width: calc(100% + 10px);
height: auto!important;
max-height: 300px!important;
overflow: hidden;
z-index: 3;
display: block;
padding-top: 30px;
float: none;
margin-left: -10px;
margin-bottom: -100px!important;
bottom: 0px;

}

    footer .footer{
        left:15px;
    }
footer #lien{
        left: calc((100% - 150px) / 2 + 5px);
    }
    
    footer .footer a.logo{
        left: 1.5%;
    }
    
    footer:hover .footer a.logo{
        left: 1.5%;
    }
     
    a.up{
        top: 5px;
    }
    
    a.up p{
        top: 5px;
    }



}


@media only screen and (min-width:1400px)
{

.info p
{
padding: 8%;
}

.info h2
{
font-size: 35px;
}

.info div.mat ul
{
padding:0 8%;
}

div#galerie
{
max-width: 1600px;
margin: 0 auto;
}

div#galerie div.bloc
{
width: calc(( 100% - 45px ) / 4 )!important;

min-width: 300px!important;
padding: 0!important;
overflow: hidden!important;
}

#artwork div#galerie .pop:target img
{
width: auto;
max-width: 100%;
display: block;
}     

#new div.fond .down
{
display: block;
}
}


@media only screen and (min-width:1850px)
{ 
#new
{
top:0px;
position: relative;
width: 1850px;left: 0;
max-width: 1850px;
float: none;
margin: 0 auto!important;
margin-bottom: 60px;
}
}