/******************************************************** 
	GENERAL
*********************************************************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  border-collapse:collapse;
  outline:none;
}

strong { 
	font-weight: bold;
}

@font-face { 
	font-family : 'Caviar Dreams';
	src: url('fonts/CaviarDreams.ttf') format('truetype'); 
}

@font-face { 
	font-family : 'Cabin';
	src: url('fonts/Cabin-Regular.ttf') format('truetype');
}


ol, ul, li {
  list-style: none; 
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

@-ms-viewport {
  width: device-width;
}

html {
  overflow-y: auto;
}

img, video {
  max-width: 100%;
  height: auto;
}

body {
  background-color: #fffefc;
  color: #202020;
  font-family: Century Gothic, sans-serif;
  font-size: 14pt;
  line-height: 1.4;  
}

#load{
  display:none;
}

/******************************************************** 
	GRILLE
*********************************************************/


[class*='container-']:after {
  content: "";
  display: table;
  clear: both;
}
  
/******************************************************** 
	STYLES DE BASE
*********************************************************/

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  color: #939393;
  text-decoration: none;
  -webkit-transition: all 0.6s linear;
  -moz-transition: all 0.6s linear;
  -o-transition: all 0.6s linear;
  -ms-transition: all 0.6s linear;
  transition: all 0.6s linear;
}
a:hover {
  color: #222222;
  -webkit-transition: all 0.6s linear;
  -moz-transition: all 0.6s linear;
  -o-transition: all 0.6s linear;
  -ms-transition: all 0.6s linear;
  transition: all 0.6s linear;
}


.header {
  text-align: center;
  font-style: normal;
  height:20%;
  padding:0px 0px 0px;
  z-index:  100;
}

.logo {
  margin:10px;
  
}

.footer {
  font-family: Century Gothic, georgia;
  clear: both;
  color:#939393;
  width:100%;
  text-align: center;
  font-size: 55%;
  padding: 1% 1%;
}

/******************************************************** 
	STYLES HOMEPAGE
*********************************************************/

.page1{
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  overflow:auto;
  background:white;
}

.social{
  height:35%;
  text-align: right;
}

.social img{
  height:60%;
  margin-top:8px;
  margin-right:5px;
  max-width:57px;
}

.social li{
  list-style: none; 
  display: inline;
  margin: 0px 3px;
}

#twitter{
  background-color:#bbbbbb;
  -webkit-transition: background-color 0.4s linear;
  -moz-transition: background-color 0.4s linear;
  -ms-transition: background-color 0.4s linear;
  -o-transition: background-color 0.4s linear;
  transition: background-color 0.4s linear;
}

#twitter:hover, #twitter:focus {
  background-color:#68a6e4;
}

#pint{
  background-color:#bbbbbb;
  -webkit-transition: background-color 0.4s linear;
  -moz-transition: background-color 0.4s linear;
  -ms-transition: background-color 0.4s linear;
  -o-transition: background-color 0.4s linear;
  transition: background-color 0.4s linear;
}

#pint:hover, #pint:focus {
background-color:#a72a2d;
}

#linkedin{
  background-color:#bbbbbb;
  -webkit-transition: background-color 0.4s linear;
  -moz-transition: background-color 0.4s linear;
  -ms-transition: background-color 0.4s linear;
  -o-transition: background-color 0.4s linear;
  transition: background-color 0.4s linear;
}

#linkedin:hover, #linkedin:focus {
background-color:#4a7db3;
}

.flag{
	z-index: 100;
	position: absolute;
	top: 20px;
	left: 20px;
	cursor:pointer;
}

.page1 .flag{
	top: 15px;
}

.flag p{
	overflow: hidden;
	float:left;
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.flag #english{
	width:24px;
	height:16px;
	background:url(images/EN.png) no-repeat center top;
}
.flag #french{
	width:24px;
	height:16px;
	background:url(images/FR.png) no-repeat center top;
}

.flag #language{
	margin-left:-50px;
	padding-left: 0px;
	z-index: 0;
	opacity:0;
	font-size: 10pt;
	color: #222;
	text-align: left;
	font-weight:bold;
}

.flag:hover #french{
	background:url(images/FR.png) no-repeat center bottom;
}

.flag:hover #english{
   background:url(images/EN.png) no-repeat center bottom;
}

.flag:hover #language{
   opacity:1;
   margin-left:10px;
}

.descript {
  font-family: "Caviar Dreams", Century Gothic, sans-serif;
  background-color: #222222;
  color: #ffffff;
  font-size: 18pt;
  padding:1.1% 10%;
  line-height:1.2;
  
}

.descript-sub {
  font-size: 70%;
}

.jdlp {
	height:70%;
	opacity:1;
    text-align: center;
}


.jdlp img {
	text-align: center;
	margin:2% 2% 0%;
	height:80%;
	max-width:564px;
	max-height:564px;
}

.menu{
  width:100%;
  height:10%;
  text-align: center;
}

.menu li{
  width:100%;
  list-style: none; 
  display: inline;
  margin: 0% 5%;
  color: #939393;
  font-family: "Caviar Dreams", Century Gothic, sans-serif;
}

.menu li a{
  background: url(images/sub_2.png) no-repeat center;
  background-size:25px;
  padding-bottom:12px;
  -webkit-transition: background 0.6s ease;
  -moz-transition: background 0.6s ease;
  -ms-transition: background 0.6s ease;
  -o-transition: background 0.6s ease;
  transition: background 0.6s ease;
}

.menu li a:hover{
  background: url(images/sub_1.png) no-repeat center bottom;
  background-size:25px;
}

/***************************************************
    STYLES PAGE CURRICULUM
****************************************************/

.page2{
  position:absolute;
  overflow:auto;
}

.cv{
  margin : 2% 10%;
  text-align: left;
  color:#222;
  float:left;
}

.cv #about{
	text-align:left;
	width:23%;
	float:left;
	margin : 1.5% 0%;  
	padding-right:1%;
	line-height:230%;
	vertical-align:top;
	font-size: 12pt;
	color:#222;
	font-family: Cabin, calibri, sans-serif;
	border-right:4px solid #c03c32;
}
.cv #about .title{ 
	line-height:140%;
	display:block;
	font-size: 30pt;
	text-shadow: 4px 7px 0px rgba(0, 0, 0, 0.2);
	font-family: "Caviar Dreams", Century Gothic, sans-serif;
}

.cv #about .facts{ 
	padding:5px 10px;
	background:#222;
	color:#fff;
}

.cv #story{
	width:57%;
	float:left;
	margin : 1.5% 0%;  
	padding:0% 6% 0% 6%;
	text-align: justify;
	vertical-align:top;
	font-size: 12pt;
	font-family: Cabin, calibri, sans-serif;;
}

.cv #img{
	float:left;
	width:20%;
	margin : 1.5% 0%; 
	background:url(images/cv/id.jpg) no-repeat center right;
	background-size:auto 100%;
}

.cv img{
	
}

.frise_end{
	border-bottom:4px solid #c03c32;
	font-size:1.5px;
}

.comp{
	position:relative;
	background:#222;
	color:#d3d6d9;
	text-align:center;
	margin : 0% 0% 1% 0%;
	padding: 0% 1% 2%;
	border-bottom:4px solid #c03c32;
}

#lang_comp, #graph_comp, #code_comp, #computer_comp, #video_comp, #seo_comp{display:none;	}

.comp li{
	vertical-align:top;
	display:inline-table;
	margin: 20px 20px;
	width:26%;
}

.comp h1{
	font-family: "Caviar Dreams", Century Gothic, sans-serif;
	padding:2% 0%;
	color:#fff;
	font-size:22pt;
	margin:0px auto;
	text-shadow: 2px 3px 0px rgba(0, 0, 0, 0.3);
	
}

.comp .img{ 
	padding: 0px;
	width:200px;
	height:200px;
	box-shadow: inset 0 0 0 5px #c03c32; 
	background: #222;
	-webkit-border-radius: 50%; 
	-moz-border-radius: 50%; 
	border-radius: 50%;  
	margin: 0 auto; 
	-webkit-transition: all .3s ease; 
	-moz-transition: all .3s ease; 
	transition: all .3s ease; 
	top: 0; 
	position: relative;

}

.comp .img:hover { 
	box-shadow: inset 0 0 0 200px #c03c32; 
    top: -15px; 
    cursor:pointer;
	}

.comp .img span{ 
	display: block; 
	width:200px;
	height:200px;
	}

#lang{background:url(images/cv/lang.png) no-repeat center center;	-webkit-transition: all .5s ease; -moz-transition: all .5s ease; transition: all .5s ease; } #lang:hover{background:url(images/cv/lang_2.png) no-repeat center center;}
#graph{background:url(images/cv/graph.png) no-repeat center center;	-webkit-transition: all .5s ease; -moz-transition: all .5s ease; transition: all .5s ease; } #graph:hover{background:url(images/cv/graph_2.png) no-repeat center center;}
#code{background:url(images/cv/code.png) no-repeat center center;	-webkit-transition: all .5s ease; -moz-transition: all .5s ease; transition: all .5s ease; } #code:hover{background:url(images/cv/code_2.png) no-repeat center center;}
#computer{background:url(images/cv/info.png) no-repeat center center;	-webkit-transition: all .5s ease; -moz-transition: all .5s ease; transition: all .5s ease; } #computer:hover{background:url(images/cv/info_2.png) no-repeat center center;}
#video{background:url(images/cv/video.png) no-repeat center center;	-webkit-transition: all .5s ease; -moz-transition: all .5s ease; transition: all .5s ease; } #video:hover{background:url(images/cv/video_2.png) no-repeat center center;}
#seo{background:url(images/cv/google.png) no-repeat center center;	-webkit-transition: all .5s ease; -moz-transition: all .5s ease; transition: all .5s ease; } #seo:hover{background:url(images/cv/google_2.png) no-repeat center center;}
	

.comp h2{
	color: #ccc;
	text-align:center;
	font-size: 16pt;
	margin-top:10px;
	margin-bottom:10px;	
}

.comp p{
	font-family: Cabin, calibri, sans-serif;
	text-align: justify;
	font-size: 13pt;
	color: #ccc;	
	margin:2% 0;
}

.fun{
	color:#222222;
	background:#fff;
	text-align:center;
	font-size: 15pt;
	padding : 0% 2%;	
}

.fun li{
	display:inline-table;
	width:20%;	
	margin:0% 2%;
	padding: 1% 1%;
}

.fun h1{
	font-family: "Caviar Dreams", Century Gothic, sans-serif;
	color:#222;
	margin : 0% 0% 1% 0%;
	padding: 1% 0%;	
	font-size:22pt;
	text-shadow: 3px 4px 0px rgba(0, 0, 0, 0.3);
}

.fun img{
	position:relative;
	margin:0% 0%;
	top: 0;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.fun li:hover img{
	top: -10px;
}

.fun p{
	font-size: 12pt;
	color:#444;
	text-align: justify;
	margin:3% 0% 7% 0%;
	font-family: Cabin, calibri, sans-serif;
}

/***************************************************
    STYLES FRISE
****************************************************/

h2.ss-subtitle{
	font-family: "Caviar Dreams", Century Gothic, sans-serif;
	width:45%;
	margin: 0 auto;
	text-align:center;
    padding: 10px 0px;
    font-size: 22pt;
    text-transform: uppercase;
    color: #000;
	position: relative;
	text-shadow: 3px 4px 0px rgba(0, 0, 0, 0.2);
	border-bottom: 4px solid #c03c32;
}
.ss-container{
    z-index:999;
    background:#fff;
    width: 100%;
    position: relative;
    text-align: left;
    float: left;
	overflow: hidden;
	margin-bottom:-2px;
	padding-bottom: 100px;
	padding-top:50px;
}

.ss-container:before{
    position: absolute;
    width: 4px;
    background: #c03c32;
    top: 0px;
    left: 50%;
	margin-left: -2px;
    content: '';
    height: 100%;
}
.ss-row{
    width: 100%;
    clear: both;
    float: left;
    position: relative;
    padding: 30px 0;
}
.ss-left, .ss-right{
    float: left;
    width: 50%;
    position: relative;
}
.ss-right{
    padding-left: 2%;
}
.ss-left{
    text-align: right;
    float: left;
    padding-right: 2%;
}
.ss-circle{
    border-radius: 50%;
    overflow: hidden;
    display: block;
    text-indent: -9000px;
    text-align: left;
    -webkit-box-shadow: 
		0px 2px 5px rgba(0,0,0,0.7) inset, 
		0px 0px 0px 12px rgba(61,64,85,0.3);
    -moz-box-shadow: 
		0px 2px 5px rgba(0,0,0,0.7) inset, 
		0px 0px 0px 12px rgba(61,64,85,0.3);
    box-shadow: 
		0px 2px 5px rgba(0,0,0,0.7) inset, 
		0px 0px 0px 12px rgba(61,64,85,0.3);
	background-size: cover;
	background-color: #f0f0f0;
	background-repeat: no-repeat;
	background-position: center center;
	position: static;
}
.ss-small .ss-circle{
	width: 100px;
	height: 100px;
}
.ss-medium .ss-circle{
	width: 200px;
	height: 200px;
}
.ss-large .ss-circle{
	width: 300px;
	height: 300px;
}
.ss-circle-deco:before{
	width: 29%;
	height: 0px;
	border-bottom: 5px dotted rgba(17, 17, 22, 0.3);
	-webkit-box-shadow: 0px 1px 1px #fff;
	-moz-box-shadow: 0px 1px 1px #fff;
	box-shadow: 0px 1px 1px #fff;
	position: absolute;
	top: 50%;
	content: '';
	margin-top: -3px;
}
.ss-circle-deco:after{
	width: 0px;
	height: 0px;
	border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
	content: '';
	position: absolute;
	top: 50%;
	margin-top: -10px;
}
.ss-left .ss-circle-deco:before{
    right: 2%;   
}
.ss-right .ss-circle-deco:before{
    left: 2%;   
}
.ss-left .ss-circle-deco:after{
	right: 0;
	border-right: 10px solid #c03c32;
}
.ss-right .ss-circle-deco:after{
	left: 0;
	border-left: 10px solid #c03c32;
}
.ss-left .ss-circle{
    float: right;
    margin-right: 30%;
}
.ss-right .ss-circle{
    float: left;
    margin-left: 30%;
}

.ss-container .ss-medium h3{
	margin-top: 82px;
}
.ss-container .ss-large h3{
	margin-top: 133px;
}
.ss-container .ss-left h3, .ss-container .ss-left p{
	border-right: 5px solid #c03c32;
	padding-left: 50px;
	text-align:right;
}
.ss-container .ss-right h3, .ss-container .ss-right p{
	border-left: 5px solid #c03c32;
	padding-right: 50px;
	text-align:left;
}

.ss-container h3{
	margin-top:34px;
	font-size: 15pt;
    color: #bbb;
    display: block;
    padding: 15px 15px 5px;
	background: #222;
	text-shadow: 1px 1px 1px rgba(26, 27, 33, 0.8)
}

.ss-container h3 span{
    color: #fff;
    font-size: 13pt;
    display: block;
    padding-bottom: 5px;
}

.ss-container p{
	display: block;
	font-size:12pt;
	font-style:italic;
	padding: 0px 20px 10px;
	font-family: Cabin, calibri, sans-serif;
	background: #222;
	color:#bbb;
	text-shadow: 1px 1px 1px rgba(26, 27, 33, 0.8)
}

.ss-circle-1{
    background:url(images/cv/0.jpg);
}
.ss-circle-2{
    background: url(images/cv/1.jpg);
}
.ss-circle-3{
    background: url(images/cv/2.jpg);
}
.ss-circle-4{
     background: url(images/cv/3.jpg);
}
.ss-circle-5{
    background: url(images/cv/4.jpg);
}
.ss-circle-6{
    background: url(images/cv/5.jpg);
}
.ss-circle-7{
    background: url(images/cv/6.jpg);
}
.ss-circle-8{
    background: url(images/cv/2.jpg);
}
.ss-circle-9{
    background: url(images/cv/7.jpg);
}
.ss-circle-10{
    background: url(images/cv/8.jpg);
}
.ss-circle-11{
    background: url(images/cv/9.jpg);
}



/***************************************************
    STYLES PAGE WORKS
****************************************************/

.works{
  width:100%;
  text-align: center;
  margin : 1% auto ; 
}

.works li{
	display:inline-table;
	margin: 1.5% 1.5%;
}

.works li div{
	text-align:center;
}


/***************************************************
    ANIMATIONS PAGE WORKS
****************************************************/
      

.view {
	border: 10px solid #fff;
	-moz-box-shadow: 0px 2px 6px #888;
	-webkit-box-shadow: 0px 2px 6px #888;
	box-shadow: 0px 2px 6px #888;
    max-width:351px;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    background: #fff;
}
.view .mask, .view .content {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}
.view img {
    display: block;
    position: relative;
}
.view h2 {
    font-family: Century Gothic, georgia;
    font-weight:100;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 18px;
    padding: 10px;
    background: rgba(34, 34, 34, 1);
    margin: 40px 0 0 0
}
.view p {
	font-family: Book Antiqua, georgia;
    font-style: italic;
    font-size: 12pt;
    line-height: 1.2;
    position: relative;
    color: #3b3b3a;
    padding: 10px 20px 20px;
    text-align: center
}
.view-first img {
	    width: 100%;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background-color: rgba(255,255,255, 0.8);
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
.view-first h2 {
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-first p {
   -webkit-transform: translateY(100px);
   -moz-transform: translateY(100px);
   -o-transform: translateY(100px);
   -ms-transform: translateY(100px);
   transform: translateY(100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-first:hover h2,
.view-first:hover p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view-first:hover p {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}

/***************************************************
    STYLE PAGE CONTACT
****************************************************/

.contact1{
	text-transform:uppercase;
	color:#222222;
	text-align:center;
	border-bottom: 2px solid #d3d6d9;
	margin: 2% 4%;
	padding: 1% 4%;
    font-family: "Caviar Dreams", Century Gothic, sans-serif;
	font-size: 17pt;
}

.contact2{
	vertical-align:top;
	text-align:center;
	margin:0 auto;
	width:99%;
}

.contact2 li{
	vertical-align:top;
	width:33%;
	float:left;
	border-collapse:collapse;
	font-family: "Caviar Dreams", Century Gothic, sans-serif;
	font-size: 15pt;
	font-weight:bold;
}

.contact2 img{
	vertical-align:top;
	margin:3% 0% 10%;
	padding: 0 5%;
	width:70%;
	max-width:156px;
}

/***************************************************
    ERREUR 404
***************************************************/

.error{
	padding:20% 0%;
	margin:auto;
	width:80%;
	background:url(images/404.png) no-repeat center #fff;
	background-size:50%;
	text-align:center;
}

.error h1{
  color: #c03c32;
  font-family: "Caviar Dreams", Century Gothic, sans-serif;
  font-style: normal;
  font-size: 50pt;
  text-shadow: 3px 5px 0px rgba(0, 0, 0, 0.2);
}

.error p{
  color: #202020;
  font-family: "Caviar Dreams", Century Gothic, sans-serif;
  font-style: normal;
  font-size: 20pt;
  line-height:1.5;
  text-shadow: 2px 3px 0px rgba(0, 0, 0, 0.2);
}

/***************************************************
    IE
***************************************************/

.ie{
	width:600px;
	height:150px;
}

.ie img{
	float:left;
	width:100px;
	margin:30px;
}

.ie p{
	font-family: Cabin, calibri, sans-serif;
	font-style:italic;
	float:left;
	width:440px;
	margin-top:30px;
	font-size:15px;
}

.ie span{
	font-size:23px;
	font-style:normal;
}

/* --------------- COLORBOX ------------------*/

	/* Ne pas toucher */
	#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
	#cboxOverlay{position:fixed; width:100%; height:100%;}
	#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
	#cboxContent{position:relative;}
	#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
	#cboxTitle{margin:0;}
	#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
	#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
	.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
	.cboxIframe{width:100%; height:100%; display:block; border:0;}
	#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

	/* Peut \352tre modifi\351 */
	#cboxOverlay{background:url(images/overlay.png) repeat 0 0;}
	#colorbox{outline:0;}
		#cboxTopLeft{width:0px; height:0px;}
		#cboxTopRight{width:0px; height:0px;}
		#cboxBottomLeft{width:0px; height:0px;}
		#cboxBottomRight{width:0px; height:0px;}
		#cboxMiddleLeft{width:0px;}
		#cboxMiddleRight{width:0px;}
		#cboxTopCenter{height:0px;}
		#cboxBottomCenter{height:0px;}
		#cboxContent{padding:10px; background:transparent; overflow:hidden;}
			.cboxIframe{background:#000;}
			#cboxError{padding:50px; border:1px solid #ccc;}
			#cboxLoadedContent{border:10px solid #000; background-color:transparent; }
			#cboxTitle{visibility:hidden; position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
			#cboxCurrent{visibility:hidden; position:absolute; bottom:4px; left:58px; color:#949494;}
			#cboxLoadingOverlay{background:transparent;}
			#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}

			/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
			#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none;}
			
			/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
			#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

			#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
			#cboxPrevious{visibility:hidden;  position:absolute; bottom:0; left:0; background:url(images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
			#cboxPrevious:hover{background-position:-75px -25px;}
			#cboxNext{visibility:hidden;  position:absolute; bottom:0; left:27px; background:url(images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
			#cboxNext:hover{background-position:-50px -25px;}
			#cboxClose{position:absolute; top:0px; left:0px; background:url(images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
			#cboxClose:hover{background-position:-25px -25px;}

	/* R\351glages IE6 et IE7 */
	.cboxIE #cboxTopLeft,
	.cboxIE #cboxTopCenter,
	.cboxIE #cboxTopRight,
	.cboxIE #cboxBottomLeft,
	.cboxIE #cboxBottomCenter,
	.cboxIE #cboxBottomRight,
	.cboxIE #cboxMiddleLeft,
	.cboxIE #cboxMiddleRight {
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
	}
	
	
/************* ADAPTATION *************/

@media screen and (max-width: 500px){
    .descript {
    	font-size:18pt;
    	padding:1.1% 7%;
 	}	
 	.contact2 li{
  		font-size: 11pt;
	}
}

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

}

@media screen and (max-width: 800px){
 	.cv{
  		margin : 2% 4%;
  		}	
  		
  	.cv #img{
		display:none;
		}
	.cv #story{
		width:60%;
		font-size: 11pt;
		}
	.cv #about .title{ 
		line-height:140%;
		font-size: 18pt;
	}
	.cv #about{
		font-size: 12pt;
		width:40%;
	}
	.cv #about .facts{ 
		padding:5px 5px;
		font-size:10pt;
	}

	.comp h1, .fun h1, h2.ss-subtitle{
		font-size: 16pt;
	}
	.ss-circle{
	    -webkit-box-shadow: 
			0px 2px 3px rgba(0,0,0,0.7) inset, 
			0px 0px 0px 6px rgba(61,64,85,0.3);
	    -moz-box-shadow: 
			0px 2px 3px rgba(0,0,0,0.7) inset, 
			0px 0px 0px 6px rgba(61,64,85,0.3);
	    box-shadow: 
			0px 2px 3px rgba(0,0,0,0.7) inset, 
			0px 0px 0px 6px rgba(61,64,85,0.3);
	}
	.ss-small .ss-circle{
		width: 50px;
		height: 50px;
		background-size:100%;
	}
	.ss-medium .ss-circle{
		width: 100px;
		height: 100px;
		background-size:100%;
	}
	.ss-large .ss-circle{
		width: 150px;
		height: 150px;
		background-size:100%;
	}
	.ss-container .ss-medium h3{
		margin-top: 40px;
	}
	.ss-container .ss-large h3{
		margin-top: 60px;
	}
	.ss-container h3{
		margin-top:16px;
	}
}

@media screen and (min-width: 1400px){
	.cv #story{
		font-size: 14pt;
		}
	.cv #about .title{ 
		font-size: 36pt;
	}
	.cv #about{
		font-size: 14pt;
	}
	.comp h1, .fun h1, h2.ss-subtitle{
		font-size: 32pt;
	}
}




@media screen and (max-height: 500px){
    .descript {
    	font-size:16pt;
    	padding:1% 10%;
 	}
 	.page1 .flag{
		top: 5px;
	}	
}

@media screen and (max-height: 400px){
    .descript {
    	font-size:13pt;
    	padding:0.8% 10%;
 	}	
}