/*
* Style codé par Éric Pausé
sur une base de Skeleton V2.0.4

* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/

/* Pixel Ratio
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media only screen and (min-width: 320px) {

  /* Small screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 

  /* Small screen, retina, stuff to override above media query */

}

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

  /* Medium screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 

  /* Medium screen, retina, stuff to override above media query */

}

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

  /* Large screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 

  /* Large screen, retina, stuff to override above media query */

}


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.etalon { position: fixed;
		  opacity:0.4;
		  display: none;}

.etalon li { display: block;
			 height: 40px;
			 background: red;
			 margin-top:2px;}
			 
.et_1300 {width: 1300px;}
.et_1024 {width: 1024px;}
.et_870 {width: 870px;}
.et_800 {width: 800px;}
.et_700 {width: 700px;}
.et_550 {width: 550px;}
.et_450 {width: 450px;}

.container {
  width: 100%;
  height: 100%;
  max-width: 1296px;
  margin: 0 auto;
  padding: 0 ;
  box-sizing: border-box;}
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }
  

/* For devices larger than 550px */
@media (min-width: 550px) {
	
  .container {
    width: 100%;
	height: auto;
	min-height:100%;
	float:left;
	padding-right: 4%;
	background-image: url(../images/nav/reflect_desktop.png),url(../images/nav/background_container_desktop.jpg);
	background-size: auto, calc(22% - 20px) 1px ;
	background-position: top left, top left;
	background-repeat: no-repeat, repeat-y;}
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html{ height: 100%;}

body { height: 100%;
}

html {
  font-size: 62.5%; }
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1;
  font-weight: 400;
  font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
  color: #000; }


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/*---------Declarations du font face----------------*/

@font-face {
    font-family: 'roboto_slabbold';
    src: url('../fonts/roboto/robotoslab_bold/RobotoSlab-Bold-webfont.eot');
    src: url('../fonts/roboto/robotoslab_bold/RobotoSlab-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto/robotoslab_bold/RobotoSlab-Bold-webfont.woff') format('woff'),
         url('../fonts/roboto/robotoslab_bold/RobotoSlab-Bold-webfont.ttf') format('truetype'),
         url('../fonts/roboto/robotoslab_bold/RobotoSlab-Bold-webfont.svg#roboto_slabbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto_slablight';
    src: url('../fonts/roboto/robotoslab_light/RobotoSlab-Light-webfont.eot');
    src: url('../fonts/roboto/robotoslab_light/RobotoSlab-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto/robotoslab_light/RobotoSlab-Light-webfont.woff') format('woff'),
         url('../fonts/roboto/robotoslab_light/RobotoSlab-Light-webfont.ttf') format('truetype'),
         url('../fonts/roboto/robotoslab_light/RobotoSlab-Light-webfont.svg#roboto_slablight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto_slabregular';
    src: url('../fonts/roboto/robotoslab_regular/RobotoSlab-Regular-webfont.eot');
    src: url('../fonts/roboto/robotoslab_regular/RobotoSlab-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto/robotoslab_regular/RobotoSlab-Regular-webfont.woff') format('woff'),
         url('../fonts/roboto/robotoslab_regular/RobotoSlab-Regular-webfont.ttf') format('truetype'),
         url('../fonts/roboto/robotoslab_regular/RobotoSlab-Regular-webfont.svg#roboto_slabregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'robotobold';
    src: url('../fonts/roboto/roboto_bold/Roboto-Bold-webfont.eot');
    src: url('../fonts/roboto/roboto_bold/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto/roboto_bold/Roboto-Bold-webfont.woff') format('woff'),
         url('../fonts/roboto/roboto_bold/Roboto-Bold-webfont.ttf') format('truetype'),
         url('../fonts/roboto/roboto_bold/Roboto-Bold-webfont.svg#robotobold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'robotolight';
    src: url('../fonts/roboto/roboto_light/Roboto-Light-webfont.eot');
    src: url('../fonts/roboto/roboto_light/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto/roboto_light/Roboto-Light-webfont.woff') format('woff'),
         url('../fonts/roboto/roboto_light/Roboto-Light-webfont.ttf') format('truetype'),
         url('../fonts/roboto/roboto_light/Roboto-Light-webfont.svg#robotolight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/roboto/roboto_regular/Roboto-Regular-webfont.eot');
    src: url('../fonts/roboto/roboto_regular/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto/roboto_regular/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/roboto/roboto_regular/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/roboto/roboto_regular/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


/*----------------------TYPOGRAPHY----------------------------*/

 h1, h2, h3, h4, h5, h6 {
  font-family: 'roboto_slabbold';
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 300; }
h1 { font-size: 4rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.3; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; } 

/* Larger than phablet */

  
/* @media (min-width: 550px) {*/

h1, h2, h3, h4, h5, h6 {letter-spacing: 0.05em;}

h1, h3, h4, h5, h6 {
  font-family: 'roboto_slabbold';
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 300; }
h2 {
  font-family: 'roboto_slablight';
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 100;
   }	
	
  h1 { font-size: 36px; }
  h2 { font-size: 24px; }
  h3 { font-size: 24px; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
/*}*/

h1 span{ 
	font-family: 'roboto_slablight';
	font-weight:100;}

h2 span{ 
	font-family: 'roboto_slabregular';
	font-weight:bold;}

.project_role h3, .project_description h3 {color: #000;}


.current, .display, .infos, caption {
  font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
  font-size:18px;	
  margin-bottom: 9px;
  line-height: 26px;
  font-weight: 200; }

.infos {color: #808080;} 

.display {
	letter-spacing: 0.02em;}
	

.main_nav .menu {
	letter-spacing: 0.05em;}

.num_page p, .num_project_desktop p,.num_project_mobile p, .num_page p .max_page, .num_page p .active_page {
	font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
	font-size:18px;
	color: #000;
	font-weight: 100;
	line-height:38px;}
.num_page p span {
	font-size: 0.6em;}
	
.button p{
	line-height:36px;}
	
.copyright p {
	font-size: 16px;
	color: #404040;
	line-height: 24px;}
	
.current .bold {
	font-weight: bold;}
	
.legend { text-align:left;
		  display: block;
		  font-style: normal;
		  font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
		  font-weight: 200;
		  font-size: 18px;
		  margin-bottom: 14px;
		  line-height: 24px;
		  /*border-left: solid 2px #000;
		  padding-left: 14px;*/
		  clear: both;
		  }


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a { text-decoration:none;}

.main_nav a {
	font-family: 'robotobold';
	font-size: 20px;
	color: #404040;
	text-decoration:none;}
	
.menu a { font-family: 'robotobold';
		  font-size:16px;
		  text-transform: uppercase;
		  letter-spacing: 0.1em;
		  border-bottom: solid 1px #404040;
		  }

.menu a:hover {
	color: #595959;
	border-bottom: solid 1px #595959;}
	
.menu a:active, .menu a.selected {
	color: #fff;
	background-position: right top;
	border-bottom: solid 3px #FFF;}
	
.menu a:hover {
    -webkit-animation-name: grow_border; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 0.15s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
	-webkit-animation-fill-mode: forwards;
    animation-name: grow_border;
    animation-duration: 0.15s;
    animation-iteration-count: 1;
	animation-fill-mode: forwards;}
	
/* Chrome, Safari, Opera */
@-webkit-keyframes grow_border {
    0%   {border-bottom: solid 1px #595959;}
    100% {border-bottom: solid 3px #595959;}
}

/* Standard syntax */
@keyframes grow_border {
    0%   {border-bottom: solid 1px #595959;}
    100% {border-bottom: solid 3px #595959;}
}

.menu a.selected:hover {
	-webkit-animation-name: neutralised_menu; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 0.15s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
	-webkit-animation-fill-mode: forwards;
    animation-name: neutralised_menu;
    animation-duration: 0.15s;
    animation-iteration-count: 1;
	animation-fill-mode: forwards;
	}
/* Chrome, Safari, Opera */
@-webkit-keyframes neutralised_menu {
    0%   {border-bottom: solid 3px #FFF;}
    100% {border-bottom: solid 3px #FFF;}
}

/* Standard syntax */
@keyframes neutralised_menu {
    0%   {border-bottom: solid 3px #FFF;}
    100% {border-bottom: solid 3px #FFF;}
}

.mail {
	color: #000;
	text-decoration: underline;}

.mail a {
	font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
	font-size: 18px;
	text-decoration: underline;}
.mail a:hover, .mail:hover{
	color: #595959;}
.mail a:active {
	color: #fff;}

.projects li a {
	color:#000;
	font-size: 18px;
	font-weight:100;
	text-decoration:none;}
.projects li span {
	
	font-family: 'robotobold';}
.projects li a:hover {
	text-decoration: underline;
	color: #595959;}

.infos a {color: #000;}
.infos a:hover {text-decoration: underline;}

.pagination_mobile { display: none;}

.title a {
	text-decoration:underline;}
.title a:hover {
	color:#595959;}



/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: block;
  height: 38px;
  padding: 0 14px;
  color: #808080;
  text-align: center;
  font-family: 'robotoregular';
  font-size: 16px;
  font-weight: 100;
  line-height: 38px;
  letter-spacing: 0;
  text-transform: inherit;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 4px;
  border: solid 1px #cccccc;
  border-bottom: solid 3px #cccccc;

  background: -webkit-linear-gradient(#FFF,#FFF, #f0f0f0); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#FFF, #FFF,#f0f0f0); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#FFF,#FFF, #f0f0f0); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#FFF,#FFF, #f0f0f0); /* Standard syntax */
  
 }
  
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #4b4b4b;
  border: solid 1px #b0b0b0;
  border-bottom: solid 3px #b0b0b0;
  cursor: pointer;
  /*border: solid 1px #999999;*/
  outline: 0; 
  /*background-position: top;*/}


.filter .button {
	  width:140px;}

.filter .button:active, .filter .selected, .download:active, .see_project:active {
	
  
 border: solid 1px #e59b22;
 	border-bottom: solid 3px #e59b22;
 	background-color:#ffac26;
	background: -webkit-linear-gradient(#ffac26, #ffac26); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#ffac26,#ffac26); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#ffac26,#ffac26); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#ffac26,#ffac26);
  color: #fff;
  
  }


.prev_arrow,.prev_arrow_disabled, .next_arrow, .next_arrow_disabled {
	display: block;
	width: 10px;}
	
.prev_arrow, .prev_arrow_disabled{
	background-image: url(../images/nav/left_arrow.png); 
	background-position: bottom;
	background-repeat: no-repeat;
	}

.next_arrow, .next_arrow_disabled{
	background-image: url(../images/nav/right_arrow.png); 
	background-position: bottom;
	background-repeat: no-repeat;}
	
.prev_arrow:hover, .next_arrow:hover, .back:hover {
	background-position: center;}
	
.prev_arrow_disabled:hover, .next_arrow_disabled:hover{
	background-position: bottom;
	cursor:default;}
	
.next_arrow:active, .prev_arrow:active, back:active {
	background-position: top;}
	
.back {
	width: 80px;
	line-height: 36px;
	background-image: url(../images/nav/left_arrow.png);
	background-repeat: no-repeat;
	background-position: 14px bottom;
	text-align:left;
	padding:0px;
	padding-left:36px;
	padding-right:20px;
	width:auto;
	line-height:38px;}
	
.back:hover{background-position: 14px center;}

.back:active{background-position: 14px top;}
	
.top_page {
	width: 100px;
	background-image: url(../images/nav/top_arrow.png);
	background-position: 14px bottom;
	background-repeat: no-repeat;
	padding-left: 42px;
	padding-right: 14px;
	float: right;
	line-height: 36px;}

.top_page:hover{
	background-position: 14px center;
	}
.top_page:active{
	background-position: 14px top;
	background-color: #FFF;
	color: #000;
	}



.see_project {
	margin-top: 14px;
	width: 200px;
	line-height: 36px;}

.download {
	line-height:36px;
	width: 200px;
	margin: auto;}

.disabled {display: none;}
a.disabled:hover, a.disabled:active { 
	background-position: center ,bottom;
	background-image: inherit, url(../images/nav/background_grey.png) !important;
	border: solid 1px #808080;
	cursor: default;}
	
.primary, .download {
	border: solid 1px #2BBF45;
	border-bottom: solid 3px #26a63e;
	background-color: #2BBF45;
	color: #FFF;
	
  background: -webkit-linear-gradient(#2BBF45,#2BBF45); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#2BBF45,#2BBF45); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#2BBF45,#2BBF45); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#2BBF45,#2BBF45); /* Standard syntax */}
  
.primary:hover, .primary:active, .download:hover, .download:active {
	border: solid 1px #2cbf47;
 	border-bottom: solid 3px #2cbf47;
 	background-color:#32d950;
	background: -webkit-linear-gradient(#32d950, #32d950); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#32d950,#32d950); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#32d950,#32d950); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#32d950, #32d950);
  color: #fff;}
	





/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: none; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin:0;
  font-size: 100%; }
li {
  margin-bottom: 0; }


/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 0; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 0; }


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }
/*-----------------------------------------------*/ 

/*------ MON STYLE---------------------------*/

/*------ coloration des élements---------------------------

.column, .columns {
	background-color: #06C;
}

.container { background-color: #00F;}

/*------ navigation principale---------------------------*/


.main_nav {
	height:100%;
	text-align: right;
	padding: 36px 28px 0px 20px;}

.logo img {
	width: 85%;
	height:auto;}
	
.menu{
	float: right;}

.menu .mobile { display: none;}

.menu li:nth-child(2){
		margin-top: 28px;}
		
.menu li:nth-child(3){
		margin-top: 28px;}
	
.desktop .portfolio, .desktop .about, .lang_desktop {
	line-height: 1.5;
	padding-bottom: 6px;}


.lang_desktop {float: right;}
	
.menu .lang_desktop a, .menu .lang_desktop p { 
	float: left;
	height: 100%;}
.menu .lang_desktop p { 
	color : #404040;
	margin: 0px 5px;
	line-height: 30px;
	cursor: default;}
	

/*---------------------*/

.clear {
	clear:both;}

.footer_desktop {
	float: right;
	margin-top:42px;}
	
.footer_desktop li,.footer_desktop li a {
	display: block;
	height: 28px;}

.footer_desktop li {
	float: left;
	margin-left: 14px;
	margin-bottom: 14px;}
	
.footer_desktop li a {
	background-image: url(../images/nav/social_desktop.png);
	text-indent: 6000px;
	overflow:hidden;}
	
.behance {
	width: 42px;
	background-position: left bottom;}
.behance:hover {
    background-position: left center;}
.behance:active {
    background-position: left top;}

.linkedin {
	width: 29px;
	background-position: -42px bottom;}
.linkedin:hover {
    background-position: -42px center;}
.linkedin:active {
    background-position: -42px top;}
	


.twitter {
	width: 32px;
	background-position: -71px bottom;}
.twitter:hover {
    background-position: -71px center;}
.twitter:active {
    background-position: -71px top;}

.pinterest {
	width: 20px;
	background-position: -103px bottom;}
.pinterest:hover {
    background-position: -103px center;}
.pinterest:active {
    background-position: -103px top;}
	
.vimeo {
	width: 31px;
	background-position: -123px bottom;}
.vimeo:hover {
    background-position: -123px center;}
.vimeo:active {
    background-position: -123px top;}
	
	
.copyright { 
	width: 200px;
	float:right;
	margin-top: 20px;}

/*----------------------------------------*/

.content {
	padding-top: 50px;
	padding-bottom: 56px;}

.content img.twelve {
	border: solid 1px #d9d9d9;
	padding:14px;}

/*----------------------------------------*/

.title {
	margin-bottom:28px;}


.filter {
	float: left;
	margin: 0px 0px 14px 0px;
}

.filter li {
	display: block;
	height: 40px;
	float: left;
	margin-right: 14px;
	margin-bottom: 14px;}
	
.filter .display {
	line-height:40px;
	margin-left: 0px;}

/*----------------------------------------*/
.projects, .projects ul {
	width: 100%;}

.projects li, .projects li a,.img_container img {
	display:block;}
	
.projects li {
	max-width:  293px;
	float:left;
	margin: 0px 4% 28px 0px;
	border: solid 1px #cccccc;}

.description { 
padding-left: 14px;
				padding-bottom:14px;}

	
	
.img_container {
	max-width:  293px;
	max-height: 215px;
	width: 100%;
	height: auto;
	overflow: hidden;}
.img_container img {
	width:100%;
	height: auto;
	/*border-radius: 8px;*/}

.projects li:nth-child(3n+3) {
	margin-right: 0px;}
	

.img_container {
	background-image: url(../images/nav/eye_project_off.png) ; 
	background-position: center;
	background-repeat: no-repeat;
	background-color: #000;
	overflow:hidden;}

.description {
	margin-top: 10px;
	line-height: 24px;}
	
/*.img_container img {filter: grayscale(100%);
		    -webkit-filter: grayscale(100%);
		    -moz-filter: grayscale(100%);}
.img_container img:hover  {
	filter: grayscale(0%);
	-webkit-filter: grayscale(0%);
	-moz-filter: grayscale(0%);}*/
/*--------------------------PAGINATIONS---------------------------*/

.pagination {
	width: 100%;
	padding: 14px 0px 14px 0px;
	float: left;
	border-top: solid 1px #d9d9d9;
	text-align: right;
	line-height: 40px;
	margin-top: 28px;}

.pagination_bloc div{
	display: block;
	float: right;
	margin-left:14px;
	}
.content .pagination {
	margin-top: 0px;

}
	
.projects_pagination {
	width: 100%;
	border-bottom: solid 1px #d9d9d9;
	padding: 0px 0px 14px 0px;
	float: left;
	text-align: right;
	line-height: 40px;
	margin-bottom: 28px;}
	
.back { float: left;}

.projects_pagination .prev_arrow,.projects_pagination .prev_arrow_disabled , .projects_pagination .next_arrow, .projects_pagination .next_arrow_disabled, .projects_pagination .num_project_desktop, .disabled  {
	float:right;
	margin-left:14px;}
.num_project_mobile {display : none;}

.num_page, .num_project_desktop {
	margin-right:0px;
	}

body .num_page { float: right;}


	



/*----------------------ABOUT-------------------------------*/


.photo img {
	width:100%;
	height:auto;}

.presentation h1 {
	display:block;
	width: 100%;
	vertical-align: middle;}
	
.resume {
	padding: 28px 0px 28px 0px;
	margin-top: 28px;
	border-top: solid 1px #d9d9d9;}
	
.separator {
	width:100%;
	height:15px;
	background-image: url(../images/about/square.png),url(../images/about/square_border.jpg); 
	background-position: center, center center;
	background-repeat: no-repeat, repeat-x;}
	
.download {
	margin-top: 28px;}



/*----------------------PROJECTS-------------------------------*/

.top_content {
	height: 100%;
	float: left;
	margin-bottom: 28px;}

.project_video  {
	margin-bottom: 28px;}
	
.project_video iframe {
	max-width: 838px;
	max-height: 465px;
	width:100%;}

.project_description, .project_role{
	padding: 28px;
	background-image: url(../images/nav/corner_01.png), url(../images/nav/corner_02.png), url(../images/nav/corner_03.png),url(../images/nav/corner_04.png);
	background-repeat: no-repeat;
	background-position: top left, top right, bottom right, bottom left;
	height: 100%;}
	
.project_role { background-color: #000;}
.project_role li, .project_role h3 { color: #fff;}



.title_resume, .title_home {
	padding: 28px;

	background-image: url(../images/nav/corner_01.png), url(../images/nav/corner_02.png), url(../images/nav/corner_03.png),url(../images/nav/corner_04.png);
	background-repeat: no-repeat;
	background-position: top left, top right, bottom right, bottom left;
	height: 100%;
	width:100%;}
	
.main {margin-bottom:0px;}

.filter {padding-top:28px;}

.project_description {
	margin:0;}

.top_content h3 {
	margin: 0px;
	margin-bottom: 8px;}

.paragraph h3 {
	margin: 0px;
	margin-bottom: 28px;}
		
.project_role ul li p {
	font-weight: regular;
	letter-spacing: 0.02em;}

.paragraph {
	margin-bottom: 28px;
	}

.paragraph img {
	float: left;
	margin-bottom: 28px;
	width: 100%;
	height: auto;}

.paragraph img.support {
	clear: both;
	margin-bottom: 28px;
	margin-right: 28px;
	max-width: 100%;
	width: auto;
	height: auto;}

.half_width_left {
	margin:0px;}
	
.social_content { float: left;
					margin: 0px;}

.social_content li, .social_content li a {
	display:block;
	height: 31px;
	text-indent: 6000px;
	overflow: hidden;}

.social_content li {
	margin-right: 14px;
	float: left;}

.social_content li a {
	background-image: url(../images/nav/social_content.png);}
	
.social_content li a.button {
	background-image: none;
	margin: 0px;
	height: 38px;
	text-indent: 0px;
	background-color: #2BBF45;
	}
.social_content li.project_link {
	height:43px;}

.social_content .behance {
	width: 48px;
	background-position: left bottom; }
	
.social_content .behance:hover {
	background-position: left top; }
	
.social_content .linkedin {
	width: 32px;
	background-position: -48px bottom; }
	
.social_content .linkedin:hover {
	background-position: -48px top; }

.social_content .twitter {
	width: 37px;
	background-position: -81px bottom; }
	
.social_content .twitter:hover {
	background-position: -81px top; }

.social_content .pinterest {
	width: 23px;
	background-position: -118px bottom; }
	
.social_content .pinterest:hover {
	background-position: -118px top; }
	

	




	


/*-----------------------------------------------------*/




.footer_mobile {
	display: none;}	




	

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than desktop */
@media (max-width: 1150px) {
	
.container {
	background-image:none;
	padding:0;}
	
/*-----MAIN NAV ---*/

.main_nav{
	width: 100% !important;
	height:114px;
	background-image: url(../images/nav/reflect_desktop.png),url(../images/nav/background_container_desktop.jpg);
	background-size: 100% auto , 100%;
	background-position: top left, top left;
	background-repeat: no-repeat, repeat;
	margin:0;
	padding: 28px 8.66666666667% 0px 8.66666666667%;
	}

.logo img { width: 85%;
			height:auto;
			float :left;}
	
.menu { 
	display :block;
	width:100%;
	}
	
.menu li { 
margin: 0;
float: left;}

.menu .desktop {display: none;}
.menu .mobile {	display: block;
				height: 28px;
				float: right;
				margin-top: 20px;}
				
.menu .mobile:nth-child(4) {margin-left: 28px;}

.mobile .portfolio, .mobile .about {
	line-height: 1.5;
	padding-bottom: 6px;}


/*-----*/	
	
.menu .lang_mobile { margin-top: 14px;}

.footer_desktop, .main_nav .mail, .main_nav .copyright {
	display: none !important;}

/*--------CONTENT------*/

/* PORTFOLIO */

.content {width:100% !important;
overflow:hidden !important;
margin:0px !important;}

.title, .filter, .projects, .pagination {
	width: 82.6666666667% !important;
	margin-left:8.66666666667% !important;}
	
/* ABOUT */

.content .row, .separator {
	width: 82.6666666667% !important;
	margin-left:8.66666666667% !important;}
	

	
/* PROJECT FOCUS */

.projects_pagination, .content_project  {
	width: 82.6666666667% !important;
	margin-left:8.66666666667% !important;}

.content_project .title, .content_project .pagination {
	width: 100% !important;
	margin-left:0% !important;}

.project_video iframe {
	width: 100% !important;
	max-width: 886px !important;
	max-height: 650px !important;}
	



/*------FOOTER MOBILE--------*/

.footer_mobile {
	background-image: url(../images/nav/reflect_desktop.png),url(../images/nav/background_container_desktop.jpg);
	background-size: 100% auto , 100%;
	background-position: top left, top left;
	background-repeat: no-repeat, repeat;
	margin:0;
	padding: 28px 8.66666666667% 56px 8.66666666667%;
	display: block;}
	
.footer_mobile ul, .footer_mobile .mail, .footer_mobile .copyright {
	float:none !important;}
	
.footer_mobile ul li,.footer_mobile ul li a {
	display: block;
	height: 43px;
	margin: 0;
	padding:0;}

.footer_mobile ul li {
	float: left;
	margin-right: 14px;
	margin-bottom: 0px;}
	
.footer_mobile ul li a {
	background-image: url(../images/nav/social_mobile.png);
	text-indent: 6000px;
	overflow:hidden;}
	
.behance {
	width: 56px;
	background-position: left bottom;}
.behance:hover {
    background-position: left center;}
.behance:active {
    background-position: left top;}

.linkedin {
	width: 37px;
	background-position: -56px bottom;}
.linkedin:hover {
    background-position: -56px center;}
.linkedin:active {
    background-position: -56px top;}

.twitter {
	width: 42px;
	background-position: -93px bottom;}
.twitter:hover {
    background-position: -93px center;}
.twitter:active {
    background-position: -93px top;}

.vimeo{
	width: 38px;
	background-position: -162px bottom;}
.vimeo:hover {
    background-position: -162px center;}
.vimeo:active {
    background-position: -162px top;}

.mail {
	margin-top:14px;
	text-decoration: none;}

.mail a {
	color: #404040;}
.mail a:hover {
	color: #595959;}
.mail a:active {
	color: #fff;}
	
.copyright {width: auto;}

.project_video iframe {
	width:100%;
	height: 500px !important;}


	
}

/* Larger than tablet */
@media (max-width: 870px) {
	
.pagination_mobile { display: block;
	border-bottom: solid 1px #d9d9d9;	
	padding: 14px 0px;
	margin-bottom: 28px;}
	
.projects li{
	width: 48% !important;
	margin: 0px 0% 28px 0px !important;}
	


.projects li:nth-child(odd) {
	margin-right: 4% !important;}
	
/* PROJECT FOCUS */

.project_description, .project_role  {
	width: 100% !important;
	margin-left: 0% !important;}
	
.project_description {
	margin-bottom: 28px;}
	
/* RESUME*/
.resume .six {
	width: 100% !important;}
	
.project_video iframe {
	width:100%;
	height: 400px !important;}
	

.resume .six {margin-left:0px;}


}

/* Larger than tablet */
@media (max-width: 800px) {
	
/* PROJECT DISPLAY */


	
.project_video iframe {
	width:100%;
	height: 350px !important;}

.project_video iframe {
	width:100%;
	height: 320px !important;}


	
}

/* Larger than tablet */
@media (max-width: 700px) {
	

/* PROJECT DISPLAY */

.filter li{
	/*clear: both !important;*/
	margin: 0px 14px 14px 0px;}

/* ABOUT */




}

/* Larger than tablet */
@media (max-width: 560px) {
	
.filter li{
	/*clear: both !important;*/
	margin: 0px 14px 14px 0px;}
	
/* MAIN NAV */	

.logo {width: 60px;
	   overflow: hidden;}

.logo img { width: 205px;
			height: auto; }
	
/* PROJECT DISPLAY */

.projects li {width: 100% !important;}

.projects li {
	margin-right: 0%;}
	
.num_page {margin: 0px;}

/* RESUME */

.photo { width: 30.6666666667% !important;
		margin-bottom: 14px;}
		
		
.project_video iframe {
	width:100%;
	height: 240px !important;}
	
	
.menu .desktop {display:none;}
.menu .mobile {
	display:block;
	height:43px;
	float: right;
	margin-top:4px;
	border:none !important;}
	
/*------*/

.mobile .about, .mobile .portfolio{ 
	height: 43px;
	display:block;
	padding: 0px;
	text-indent: 6000px !important;
	overflow: hidden;
	color: rgba(0,0,0,0);
	margin-top:8px;
	border: none !important;}
	
.mobile .about:hover, .mobile .portfolio:hover, .mobile .selected {
	border: none !important;
	}
	
.mobile .portfolio {
	width: 44px !important;
	background: url(../images/nav/house_mobile.png) bottom no-repeat;}

.mobile .portfolio:hover {
	background-position: center;}

.mobile .portfolio:active {
	background-position: top;}
	
.mobile .about{
	width: 32px !important;
	background: url(../images/nav/about_mobile.png) bottom no-repeat;}
	
.mobile .about:hover{
	background-position: center;
	color: rgba(0,0,0,0);}

.mobile .about:active, .mobile .selected{
	background-position: top;
	color: rgba(0,0,0,0) !important;}

.lang_mobile:active, .lang_mobile .selected{
	background-position: top;
	color: #FFFFFF !important;}	
	

}


@media (max-width: 450px) {
	
/* MAIN NAV */	

/*.back { margin-right: 80%;}*/
.num_project_desktop {display : none;}
.num_project_mobile { 
	display: block;	
	margin-top: 14px;}
	
.project_video iframe {
	width:100%;
	height: 200px !important;}

}