@font-face {
  font-family: 'mathilderegular';
  src: url('../fonts/mathilde-webfont.eot');
  src: url('../fonts/mathilde-webfont.eot?#iefix') format('embedded-opentype'),
  url('../fonts/mathilde-webfont.woff') format('woff'),
  url('../fonts/mathilde-webfont.ttf') format('truetype'),
  url('../fonts/mathilde-webfont.svg#mathilderegular') format('svg');
  font-weight: normal;
  font-style: normal;

}

/*********************************************************************************/
/* Basic                                                                         */
/*********************************************************************************/

*
{
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

body, input, textarea
{
  color:#8a8a8a;
  font-family:Arial,Verdana,sans-serif;
  line-height: 1.85em;
  font-weight: 300;
}

a
{
  color: #dca4c1;
  text-decoration: none;
  -moz-transition: color .2s ease-in-out;
  -webkit-transition: color .2s ease-in-out;
  -o-transition: color .2s ease-in-out;
  -ms-transition: color .2s ease-in-out;
  transition: color .2s ease-in-out;
}

a:hover
{
  text-decoration: underline;
}

strong, b
{
  font-weight: 600;
  color: #3e3e3e;
}

h1, h2, h3, h4, h5, h6
{
  color: #545f63;
  font-family: 'Gilda Display', serif;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
{
  text-decoration: none;
  color: inherit;
}

h2, h3, h4, h5, h6
{
  font-weight: 700;
}

h1
{
  font-weight: 300;
}

h1 strong
{
  font-weight: 700;
}

em, i
{
  font-style: italic;
}
h1.name, p.job{color:#545f63; font-family: 'Gilda Display', serif;}

form
{
}

form input,
form select,
form textarea
{
  -webkit-appearance: none;
}

form input[type=text],
form input[type=password],
form select,
form textarea
{
  width: 100%;
  border: 0;
  padding: 0.75em;
  font-size: 1em;
  border-radius: 8px;
  background: #282828;
  color: #bbb;
  box-shadow: inset 0px 2px 5px 0px rgba(0,0,0,0.05), 0px 1px 0px 0px rgba(255,255,255,0.025);
}

form input[type=text]:focus,
form input[type=password]:focus,
form select:focus,
form textarea:focus
{
  box-shadow: inset 0px 2px 5px 0px rgba(0,0,0,0.05), 0px 1px 0px 0px rgba(255,255,255,0.025), 0px 0px 2px 2px #74CAEE;
}

form textarea
{
  height: 15em;
}

form .formerize-placeholder
{
  color: #555 !important;
}

form ::-webkit-input-placeholder
{
  color: #555 !important;
}

form :-moz-placeholder
{
  color: #555 !important;
}

form ::-moz-placeholder
{
  color: #555 !important;
}

form :-ms-input-placeholder
{
  color: #555 !important;
}

form ::-moz-focus-inner
{
  border: 0;
}
.error
{
  width: 50%;
  margin: auto;
}
.data-cell{
  width: 50%;
}
.smiley-cell{
  width: 30%;
}
.text-cell{
  width: 70%;
}
.smiley{

}
.success i{
  vertical-align: middle;
}
.success span{
  margin-left:10px;
  line-height: 44px;
  vertical-align: middle;
}

br.clear
{
  clear: both;
}

p, ul, ol, dl, table
{
  margin-bottom: 2em;
}

section,
article
{
  margin-bottom: 3em;
}

section > :last-child,
article > :last-child
{
  margin-bottom: 0;
}

section:last-child,
article:last-child
{
  margin-bottom: 0;
}

.image
{
  display: inline-block;
  border-left: 1px solid #D9D9D9;
  border-right: 1px solid #D9D9D9;
}

.image img
{
  display: block;
  width: 100%;
}

.image-full
{
  display: block;
  width: 100%;
  /*margin: 0 0 2em 0;*/
}

.image-left
{
  float: left;
  margin: 0 2em 2em 0;
}

.image-centered
{
  display: block;
  margin: 0 0 2em 0;
}

.image-centered img
{
  margin: 0 auto;
  width: auto;
}

.button
{
  position: relative;
  display: inline-block;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 8px;
  text-shadow: -1px -1px 0.5px rgba(0,0,0,0.5);
  overflow: hidden;
  background: ##dca4c1;
  background-image: -moz-linear-gradient(top, rgba(97,184,219,0), #dca4c1);
  background-image: -webkit-linear-gradient(top, rgba(97,184,219,0), #dca4c1);
  background-image: -o-linear-gradient(top, rgba(97,184,219,0), #dca4c1);
  background-image: -ms-linear-gradient(top, rgba(97,184,219,0), #dca4c1);
  background-image: linear-gradient(top, rgba(97,184,219,0), #dca4c1);
  box-shadow: inset 0px 0px 0px 1px #dca4c1, inset 0px 2px 1px 0px rgba(255,255,255,0.75);
  -moz-transition: background-color .2s ease-in-out;
  -webkit-transition: background-color .2s ease-in-out;
  -o-transition: background-color .2s ease-in-out;
  -ms-transition: background-color .2s ease-in-out;
  transition: background-color .2s ease-in-out;
}

.button:before
{
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url('images/bg.png');
}

.button:hover
{
  background-color: #dca4c1;
  color: #fff !important;
}

.button:active
{
  background-image: -moz-linear-gradient(top, #dca4c1, rgba(77,164,199,0));
  background-image: -webkit-linear-gradient(top, #dca4c1, rgba(77,164,199,0));
  background-image: -o-linear-gradient(top, #dca4c1, rgba(77,164,199,0));
  background-image: -ms-linear-gradient(top, #dca4c1, rgba(77,164,199,0));
  background-image: linear-gradient(top, #dca4c1, rgba(77,164,199,0));
  box-shadow: inset 0px 0px 0px 1px #dca4c1, inset 0px -2px 1px 0px rgba(255,255,255,0.75);
  top: 1px;
}

.button-alt
{
  background-color: #393939;
  background-image: -moz-linear-gradient(top, rgba(50,50,50,0), rgba(45,45,45,1));
  background-image: -webkit-linear-gradient(top, rgba(50,50,50,0), rgba(45,45,45,1));
  background-image: -o-linear-gradient(top, rgba(50,50,50,0), rgba(45,45,45,1));
  background-image: -ms-linear-gradient(top, rgba(50,50,50,0), rgba(45,45,45,1));
  background-image: linear-gradient(top, rgba(50,50,50,0), rgba(45,45,45,1));
  box-shadow: inset 0px 0px 0px 1px #242424, inset 0px 2px 1px 0px rgba(255,255,255,0.2);
}

.button-alt:hover
{
  background-color: #444;
}

.button-alt:active
{
  background-image: -moz-linear-gradient(top, rgba(45,45,45,1), rgba(50,50,50,0));
  background-image: -webkit-linear-gradient(top, rgba(45,45,45,1), rgba(50,50,50,0));
  background-image: -o-linear-gradient(top, rgba(45,45,45,1), rgba(50,50,50,0));
  background-image: -ms-linear-gradient(top, rgba(45,45,45,1), rgba(50,50,50,0));
  background-image: linear-gradient(top, rgba(45,45,45,1), rgba(50,50,50,0));
  box-shadow: inset 0px 0px 0px 1px #242424, inset 0px -2px 1px 0px rgba(255,255,255,0.2);
}

.button-big
{
}

ul.social
{
  cursor: default;
  margin: 0;
}

ul.social li
{
  position: relative;
  display: inline-block;
  margin: 0.25em;
  top: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #444;
  background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.2));
  background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.2));
  background-image: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.2));
  background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.2));
  background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.2));
  -moz-transition: background-color .2s ease-in-out, top .2s ease-in-out;
  -webkit-transition: background-color .2s ease-in-out, top .2s ease-in-out;
  -o-transition: background-color .2s ease-in-out, top .2s ease-in-out;
  -ms-transition: background-color .2s ease-in-out, top .2s ease-in-out;
  transition: background-color .2s ease-in-out, top .2s ease-in-out;
  box-shadow: inset 0px 0px 0px 1px #282828, inset 0px 2px 1px 0px rgba(255,255,255,0.1);
}

ul.social li a
{
  display: block;
  position: relative;
  /*background: url('images/social.png');*/
  width: 48px;
  height: 48px;
  /*text-indent: -9999em;*/
  outline: 0;
}

ul.social li.facebook a						{ background-position: 0px 0px; }
ul.social li.facebook:hover				{ background-color: #3C5A98; }
ul.social li.twitter a						{ background-position: -48px 0px; }
ul.social li.twitter:hover				{ background-color: #2DAAE4; }
ul.social li.rss a							{ background-position: -96px 0px; }
ul.social li.rss:hover					{ background-color: #F2600B; }
ul.social li.dribbble a						{ background-position: -144px 0px; }
ul.social li.dribbble:hover				{ background-color: #C4376B; }
ul.social li.linkedin a						{ background-position: -192px 0px; }
ul.social li.linkedin:hover				{ background-color: #0077B5; }
ul.social li.tumblr a						{ background-position: -240px 0px; }
ul.social li.tumblr:hover				{ background-color: #51718A; }
ul.social li.googleplus a					{ background-position: -288px 0px; }
ul.social li.googleplus:hover			{ background-color: #DA2713; }
ul.social li.viadeo a					{ /*background: url('images/viadeo.png');*/ background: none;}
ul.social li.viadeo:hover			{ background-color: #F4982B; }

ul.social li:hover
{
  top: -5px;
}

ul.social li:active
{
  top: 0;
}

.box
{
  background: #fff;
  box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.15), 0px 2px 3px 0px rgba(0,0,0,0.1);
  text-align: center;
}

.box .image-full
{
  position: relative;
}

#about .experience .timeline-wrapper { display:inline-block; position:relative;}
#about .experience .timeline { width:2px; background:#8a8a8a; position:absolute; left:2px; top:10px; bottom:104px; right:0px; border-radius:2px;}
#about .experience .timeline .top-circle { height:8px; width:8px; background:#8a8a8a; border-radius:8px; margin-left:-3px; margin-top:-3px;}
#about .experience .position { text-align:left; margin-left:20px; margin-top:50px;}
#about .experience .position a { color:inherit; text-decoration:inherit;}
#about .experience .position .circle { width:14px; height:14px; border-radius:14px; background:#fff; border:2px solid #999; margin-left:-24px; position:absolute;}
#about .experience .position.current .circle,
#about .experience .position.current .date { border-color:#dca4c1;}
#about .experience .position .date { font-size:0.875rem; line-height:14px; margin-bottom:6px;}
#about .experience .position .date .arrow { }
#about .experience .position .title { font-family:'Gilda Display'; font-weight:400; font-size:1.25rem; line-height:20px; margin-bottom:6px;}
#about .experience .position .company {font-size:1rem; line-height:18px; color:#dca4c1;}
#about .experience .position#pistenoire {margin-top:50px;}
#about .experience .position#webgeneve { margin-bottom:40px;}
#about .experience .button { background-color:#dca4c1; border-radius:40px; color:#ffffff; display:block; cursor:pointer; font-family:"lato"; font-weight:900; font-size:1rem; height:60px; line-height:60px;
text-align:center; transition:all 0.2s linear 0s; margin:0 auto; width:60%}
#about .experience .button:hover { opacity:.7; border-bottom:none;}


/*********************************************************************************/
/* Wrappers                                                                      */
/*********************************************************************************/

.wrapper
{
  background-image: url('images/bg.png');
  box-shadow: inset 0px 1px 0px 0px rgba(0,0,0,0.05), inset 0px 2px 3px 0px rgba(0,0,0,0.1);
}

.wrapper-first
{
  box-shadow: none;
}

.wrapper-style1
{
  background-image: none;
  background-color: #fff;
}

.wrapper-style2
{
  background-color: #fafafa;
  text-shadow: 1px 1px 0px #fff;
}

.wrapper-style3
{
  background-color: #f4f4f4;
  text-shadow: 1px 1px 0px #fff;
}

.wrapper-style4
{
  background-color: #303030;
  color: #999;
  text-shadow: -1px -1px 0px #181818;
}

.wrapper-style4 h1,
.wrapper-style4 h2,
.wrapper-style4 h3,
.wrapper-style4 h4,
.wrapper-style4 h5,
.wrapper-style4 h6
{
  color: #fff;
}

.wrapper-style4 .row-special
{
  border-top: solid 1px rgba(0,0,0,0.5);
  border-bottom: solid 1px rgba(0,0,0,0.5);
  box-shadow: inset 0px 1px 0px 0px rgba(255,255,255,0.1), 0px 1px 0px 0px rgba(255,255,255,0.1);
}

/*********************************************************************************/
/* Nav                                                                           */
/*********************************************************************************/

#nav
{
  background-color: #f4f4f4;
  text-align: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 10000;
  cursor: default;
}

/*div.logo { float:left; width:20%;margin-left: 240px;}
h1.boule { margin: 0 !important;}
h1.boule a { background:url(../images/logo.png) no-repeat top center; display:block; float:left; height:47px; margin-top:20px; text-indent:-040685px; width:47px;}
h2.baseline  { border-left:1px solid #cccccc; color:#272727; float:left; font-weight:normal; font-family: 'mathilderegular'; font-size:35px; margin:10px 0 0 10px; padding-left:10px; padding-top: 20px;}*/

#nav ul
{
  margin: 0 ;
  padding-top: 4px;
}

#nav li
{
  display: inline-block;
}

#nav a
{
  position: relative;
  display: block;
  color: #272727;
  text-decoration: none;
  outline: 0;
  font-family: 'Gilda Display', serif;
  font-size:18px;
}

#nav a:hover
{
  color: #dca4c1 !important;
}

#nav a.active:before
{
  content: '';
  display: block;
  position: absolute;
  bottom: -0.6em;
  left: 50%;
  margin-left: -0.75em;
  border-left: solid 0.75em transparent;
  border-right: solid 0.75em transparent;
  border-top: solid 0.6em #282828;
}

/*********************************************************************************/
/* Articles                                                                      */
/*********************************************************************************/

#top
{
}

#top .me
{
  border-radius: 50%;
  overflow: hidden;
}

#top p
{
}

#top p a
{
  color: inherit;
}

/*********************************************************************************/
/* Copyright                                                                     */
/*********************************************************************************/

#copyright
{
  color: #666;
  text-decoration: none;
}

#copyright a
{
  color: #dca4c1;

  -moz-transition: color .2s ease-in-out;
  -webkit-transition: color .2s ease-in-out;
  -o-transition: color .2s ease-in-out;
  -ms-transition: color .2s ease-in-out;
  transition: color .2s ease-in-out;
}

#copyright a:hover
{
  color: #dca4c1;
  text-decoration: underline;
}