@font-face {
  font-family: 'Varela Round';
  font-style: normal;
  font-weight: 400;
  src: local('Varela Round'), local('VarelaRound-Regular'), url(font.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
* {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img {
	max-width: 100%;
	width: auto;
	height: auto;
} 
strong, b {
	font-weight: bold;
	color:#00ae85;
}
em, i {
	font-style: italic;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
p {
	margin: 1em 0;
	font-family: 'Varela Round', Helvetica, Arial, sans-serif;
}

/* -----------------------------------------------
= TITRE
----------------------------------------------- */
/* Move your body */
body {
	background:#f2f2f2;
	color:#919191;
	font-size: 1.250em;
	line-height: 1.2em;
	font-family: 'PT Sans', Helvetica, Arial, sans-serif;
	font-weight: 400;
}

/* Titles */
h1, .h1-like,
h2, .h2-like,
h3, .h3-like,
h4, .h4-like,
h5, .h5-like,
h6, .h6-like {
	font-family: 'Varela Round', Helvetica, Arial, sans-serif;
}
h1, .h1-like {
	font-size:1.8em;
	color:#00ae85;
	font-weight: 700;
}
h2, .h2-like {
	font-size:0.9em;	
}
h3, .h3-like {
	color:#00ae85;
	font-size: 2em;
	font-weight: 400;
	line-height: 1em;
	margin-bottom: 0.5em;
}
h4, .h4-like {
	color:#00ae85;
	font-size:1.6em;
	margin-top: 0.625em;
}
h5, .h5-like {
	color:#00ae85;
	font-size: 2.5em;
	font-weight: 400;
}
h6, .h6-like {
	
}

/* Links & Zelda */
a {
	text-decoration: none;
	color:#63B8FF;
}

/* Main */
.main {
	width: 96%;
	max-width: 1160px;
	margin:0 auto;
}


/* -----------------------------------------------
= HEADER
----------------------------------------------- */
.header {
	background:#f2f2f2;
	border-bottom: 1px solid #f9f9f9;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,.05);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.05);
	box-shadow: 0 1px 3px rgba(0,0,0,.05);
	padding: 22px 0;
	text-transform: uppercase;
	position: fixed;
	top:0;
	left:0;
	width: 100%;
	z-index: 999;
}
.ct-header {
	width: 96%;
	max-width: 1160px;
	margin:0 auto;
}
/* Logo & title */
.heading {
	padding:20px 0 0 100px;
	background:url('img/logo_vgz.png') left top no-repeat;
	float: left;
	height: 80px;
	cursor: pointer;
	-webkit-transition:background-position .25s ease-in-out;
	-moz-transition:background-position .25s ease-in-out;
	-ms-transition:background-position .25s ease-in-out;
	-o-transition:background-position .25s ease-in-out;
	transition:background-position .25s ease-in-out;
}
.heading h1 {
	margin-bottom: 5px;
}
.heading:hover {
	background-position: left bottom;
}
/* Menu */
.header nav {
	float: right;
	font-size: 0.9em;
	margin-top: 20px;
	font-family: 'Varela Round', Helvetica, Arial, sans-serif;
}
.menu li {
	display: inline-block;
	margin: 0 10px;
}
.menu li a {
	display: block;
	color:#919191;
	padding: 8px 15px;
	border:1px solid transparent;
}
.menu a:hover {
	color:#00ae85;
}
.menu a.current {
	color:#00ae85;
	border-radius:20px;
	border: 1px solid #f9f9f9;
	-moz-box-shadow: 0 2px 0 rgba(216,216,216,.5), inset 0 -2px 0 rgba(255,255,255,.25);
	-webkit-box-shadow: 0 2px 0 rgba(216,216,216,.5), inset 0 -2px 0 rgba(255,255,255,.25);
	box-shadow: 0 2px 0 rgba(216,216,216,.5), inset 0 -2px 0 rgba(255,255,255,.25);
}


/* -----------------------------------------------
= PROFILE
----------------------------------------------- */
.profile {
	margin-top: 140px;
}
.apropos {
	width:100%;
	padding:150px 42% 150px 0;
	background:url('img/profile_pics.png') no-repeat center right;
}

/* -----------------------------------------------
= SOCIAL…LIST
----------------------------------------------- */
.social {
	margin: 20px 0 40px 0;
	overflow: hidden;
}
.socialist {
	text-align:center;
	position: relative;
	margin:0 auto;
}
.socialist li {
	display: inline-block;
	margin-right:20px;
	font-size: 0;
}
.socialist li:first-child {
	margin-left: 20px;
}
.socialist a {
	display:block;
	text-indent: -999em;
	background: url('img/socials_sprite.png') 0 0 no-repeat;
	height: 55px;
	width: 50px;
}
.socialist .dribbble:hover {
	background-position: -51px 0;
}
.socialist .twitter {
	background-position: 0 -57px;
}
.socialist .twitter:hover {
	background-position: -51px -57px;
}
.socialist .pinterest {
	background-position: 0 -114px;
}
.socialist .pinterest:hover {
	background-position: -51px -114px;
}

/* Line On Sides */
/* http://css-tricks.com/line-on-sides-headers */
.social {
  line-height: 0.5;
  text-align: center;
}
.social .socialist {
  display: inline-block;
  position: relative;  
}
.social .socialist:before,
.social .socialist:after {
  content: "";
  position: absolute;
  height: 0px;
  border-bottom: 1px solid #e0e0e0;
  border-top: 1px solid #fff;
  top: 33px;
  width: 600px;
}
.social .socialist:before {
  right: 100%;
  margin-right: 10px;
}
.social .socialist:after {
  left: 100%;
  margin-left: 10px;
}

/* -----------------------------------------------
= PROJECTS
----------------------------------------------- */
.projets {
	padding-bottom: 20px;
	border-bottom: 1px solid #fff;
}
.sliderwrapper {
	position: relative;
}
.projectsSlider figure img {
	-moz-box-shadow: 0 1px 0 #fff;
	-webkit-box-shadow: 0 1px 0 #fff;
	box-shadow: 0 1px 0 #fff;
	border-radius: 10px;
}
/* Slider - bxslider */
.bx-wrapper {
	position: relative;
	padding: 0;
}
.bx-wrapper img {
	max-width: 100%;
	display: block;
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
	position: absolute;
	bottom: -30px;
	width: 100%;
}
.bx-wrapper .bx-pager {
	text-align: center;
	position: absolute;
	z-index: 110;
	width: 100%;
	top:80%;
}
.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
	display: inline-block;
}
.bx-wrapper .bx-pager.bx-default-pager a {
	background: url('img/bullets_slider.png') no-repeat 0 0;
	display: inline-block;
	width: 23px;
	height: 23px;
	text-indent: -999em;
	margin: 0 2px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
	background-position: 0 -23px;
}
/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev,
.bx-wrapper .bx-next {
	background: url('img/nav_slider.png') no-repeat 0 0;
	text-indent: -999em;
	height: 61px;
	width: 54px;
	display: none;
	position: absolute;
	top:45%;
	margin-top: -30px;
	cursor: pointer;
	z-index: 110;
}
.bx-wrapper .bx-prev {
	left:20px;
}
.bx-wrapper .bx-prev:hover {
	background-position: 0 -120px;
}
.bx-wrapper .bx-next {
	background-position: -108px 0;
	right:20px;
}
.bx-wrapper .bx-next:hover {
	background-position: -108px -120px;
}

.bx-wrapper .bx-controls-direction a.disabled {
	display: none;
}

.projets .moar {
	color:#bdbdbd;
	border-radius:20px;
	padding: 8px 15px;
	border: 1px solid #f9f9f9;
	-moz-box-shadow: 0 2px 0 rgba(216,216,216,.5), inset 0 -2px 0 rgba(255,255,255,.25);
	-webkit-box-shadow: 0 2px 0 rgba(216,216,216,.5), inset 0 -2px 0 rgba(255,255,255,.25);
	box-shadow: 0 2px 0 rgba(216,216,216,.5), inset 0 -2px 0 rgba(255,255,255,.25);
	float: right;
	text-transform: uppercase;
	font-family: 'Varela Round', Helvetica, Arial, sans-serif;
	font-size: 0.9em;
	font-weight: 700;
}
.projets .moar:hover {
	color:#00ae85;
}

/* Projects zoom - fancybox */
.projectsZoom {
	display: none;
}

/* Projets sur mobile */
.projets .mobile-projects {
	display:none;
}
.projets .mobile-projects li {
	margin-bottom: 1em;
}
.projets .mobile-projects h4 {
	font-size:1.2em;
	margin-bottom: 0.25em;
}

/* -----------------------------------------------
= CONTACT
----------------------------------------------- */
.contact {
	border-top: 1px solid #e0e0e0;
	padding-top: 25px;
	padding-bottom: 40px;
	border-bottom: 1px solid #fff;
}
.contact .infos {
	width:34.48%;
	margin-right: 1.7%;
	float: left;
}
.contact .message {
	width:51.72%;
	margin-right: 1.7%;
	float: left;
}
.contact .envoyer {
	width: 10.34%;
	float: right;
}

.contact input[type=text],
.contact input[type=email],
.contact textarea {
	-moz-box-shadow: inset 0 0 7px rgba(189,189,189,.15);
	-webkit-box-shadow: inset 0 0 7px rgba(189,189,189,.15);
	box-shadow: inset 0 0 7px rgba(189,189,189,.15);
	background:#fcfcfc;
	border-radius: 10px;
	border:1px solid #e2e2e2;
	width: 100%;
	padding:15px;
	font-size: 1em;
	font-family: 'PT Sans', Helvetica, Arial, sans-serif;
}
.contact input[type=text] {
	margin-bottom: 15px;
}
.contact textarea {
	height: 131px;
	max-width: 100%;
	max-height: 131px;
}
.contact .btn_envoyer {
	background: url('img/btn_envoyer.png') no-repeat center;
	height: 131px;
	width: 100%;
	border:0;
	font-family: 'Varela Round', Helvetica, Arial, sans-serif;
	font-size:1em;
	color:#f2f2f2;
	cursor:pointer;
}

.contact input[type=text]:focus,
.contact input[type=email]:focus,
.contact textarea:focus {
	outline: none;
	border:1px solid #00ae85;
}

.contact input.inputerror,
.contact textarea.inputerror {
	border:1px solid #f00;
}

/* Notifications */
.contact .noty {
	padding:10px;
	text-align: center;
	margin: 1em 0;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	display: none;
}
.contact .noty.success {
	border:1px solid #4F8A10;
	color: #4F8A10;
	background-color: #DFF2BF;
}
.contact .noty.error {
	border:1px solid #D8000C;
	color: #D8000C;
	background-color: #FFBABA;
}

/* -----------------------------------------------
= FOOTER (DE MERDE)
----------------------------------------------- */
.footer {
	text-align: center;
	font-size:0.6em;
	border-top: 1px solid #e0e0e0;
	padding-top: 20px;
	margin-bottom: 20px;
}


/* -----------------------------------------------
= FANCYBOX
----------------------------------------------- */
/*! fancyBox v2.1.4 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
	padding: 0;
	margin: 0;
	border: 0;
	outline: none;
	vertical-align: top;
}
.fancybox-wrap {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 8020;
}
.fancybox-skin {
	position: relative;
	background: #f9f9f9;
	color: #444;
}
.fancybox-opened {
	z-index: 8030;
}
.fancybox-outer, .fancybox-inner {
	position: relative;
}

.fancybox-inner {
	overflow: hidden;
}
.fancybox-type-iframe .fancybox-inner {
	-webkit-overflow-scrolling: touch;
}
.fancybox-error {
	color: #444;
	margin: 0;
	padding: 15px;
	white-space: nowrap;
}
.fancybox-image, .fancybox-iframe {
	display: block;
	width: 100%;
	height: 100%;
}
.fancybox-image {
	max-width: 100%;
	max-height: 100%;
}
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
	background-image: url('img/fancybox_sprite.png');
}
#fancybox-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -22px;
	margin-left: -22px;
	background-position: 0 -108px;
	opacity: 0.8;
	cursor: pointer;
	z-index: 8060;
}
#fancybox-loading div {
	width: 44px;
	height: 44px;
	background: url('img/fancybox_loading.gif') center center no-repeat;
}
.fancybox-close {
	position: absolute;
	top: -40px;
	right: -40px;
	width: 45px;
	height: 45px;
	cursor: pointer;
	z-index: 8040;
}
.fancybox-nav {
	position: absolute;
	top: 0;
	width: 40%;
	height: 100%;
	cursor: pointer;
	text-decoration: none;
	background: transparent url('img/blank.gif'); /* helps IE */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	z-index: 8040;
}
.fancybox-prev {
	left: 0;
}
.fancybox-next {
	right: 0;
}
.fancybox-nav span {
	position: absolute;
	top: 50%;
	width: 60px;
	height: 65px;
	margin-top: -32px;
	cursor: pointer;
	z-index: 8040;
	visibility: hidden;
}
.fancybox-prev span {
	left: 20px;
	background-position: 0 -47px;
}
.fancybox-next span {
	right: 20px;
	background-position: 0 -111px;
}
.fancybox-nav:hover span {
	visibility: visible;
}
.fancybox-tmp {
	position: absolute;
	top: -99999px;
	left: -99999px;
	visibility: hidden;
	max-width: 99999px;
	max-height: 99999px;
	overflow: visible !important;
}

/* Overlay helper */
.fancybox-lock {
	overflow: hidden;
}
.fancybox-overlay {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	display: none;
	z-index: 8010;
	background: url('img/fancybox_overlay.png');
}
.fancybox-overlay-fixed {
	position: fixed;
	bottom: 0;
	right: 0;
}
.fancybox-lock .fancybox-overlay {
	overflow: auto;
	overflow-y: scroll;
}

/* Title helper */
.fancybox-title {
	visibility: hidden;
	font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
	position: relative;
	text-shadow: none;
	z-index: 8050;
}
.fancybox-opened .fancybox-title {
	visibility: hidden;
	display:none;
}
.fancybox-title-float-wrap {
	position: absolute;
	bottom: 0;
	right: 50%;
	margin-bottom: -35px;
	z-index: 8050;
	text-align: center;
}
.fancybox-title-float-wrap .child {
	display: inline-block;
	margin-right: -100%;
	padding: 2px 20px;
	background: transparent; /* Fallback for web browsers that doesn't support RGBa */
	background: rgba(0, 0, 0, 0.8);
	-webkit-border-radius: 15px;
	   -moz-border-radius: 15px;
	        border-radius: 15px;
	text-shadow: 0 1px 2px #222;
	color: #FFF;
	font-weight: bold;
	line-height: 24px;
	white-space: nowrap;
}
.fancybox-title-outside-wrap {
	position: relative;
	margin-top: 10px;
	color: #fff;
}
.fancybox-title-inside-wrap {
	padding-top: 10px;
}
.fancybox-title-over-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	color: #fff;
	padding: 10px;
	background: #000;
	background: rgba(0, 0, 0, .8);
}

/* -----------------------------------------------
= 404
----------------------------------------------- */
.error404,
.error404 body {
	height: 100%;
}
.display-table {
   display: table;
   width: 100%;
   height: 100%;
}
.display-table-cell {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
   text-align: center;
}
.error404 h2 {
	font-size:36px;
	text-transform: uppercase;
	color:#63B8FF;
	margin: 35px 0 10px 0;
}
.error404 h3 {
	font-size:18px;
	color:#919191;
	text-transform: uppercase;
}

/* -----------------------------------------------
= MEDIAQUERIES.
----------------------------------------------- */
@media screen and (max-width: 1100px) {
	/* Profile */
	.apropos {
		padding-right: 48%;
	}
}

@media screen and (max-width: 1024px){
	/* Contact */
	.contact .infos {
		width: 100%;
		float: none;
	}
	.contact .infos input {
		width: 49%;
		float: left;
	}
	.contact .infos input[type=text] {
		margin-right: 2%;
	}

	.contact .message {
		width: 83.72%;
	}
	.contact .envoyer {
		width: 14.34%;
	}
}

@media screen and (max-width: 800px) {
	/* Header */
	.header {
		position: static;
	}
	.ct-header {
		text-align: center;
	}
	.ct-header .heading,
	.ct-header nav {
		float:none;
		width: 100%;
		display: inline-block;
	}
	.ct-header .heading {
		width: 100%;
		max-width:440px;
		text-align: left;
	}

	/* Profile */
	.profile {
		margin-top: 0;
	}
	.apropos {
		padding-right: 40%;
		background-position: 170% center;
	}	
}

@media screen and (max-width: 640px){
	/* Projets */
	.projets .sliderwrapper {
		display: none;
		visibility: hidden;
	}
	.projets .mobile-projects {
		display: block;
	}
}

@media screen and (max-width: 640px){
	/* Header */
	.header nav {
		display: none;
	}

	/* Profile */
	.apropos {
		padding:40px 42% 20px 0;
		background:url('img/profile_pics-half.png') no-repeat center right;
	}

	/* Contact */
	.contact .infos input {
		width: 100%;
		float: none;
	}
	.contact .infos input[type=email] {
		margin-bottom: 20px;
	}

	.contact .message {
		width: 74.72%;
	}
	.contact .envoyer {
		width: 23.34%;
	}
}

@media screen and (max-width: 400px){
	body {
		-webkit-text-size-adjust: none;
	}
	/* Header */
	h1 {
		font-size:1.4em;
	}
	h2 {
		font-size:0.57em;
	}
	.ct-header {
		max-width: 320px;
		margin: 0 auto;
	}
	.ct-header .heading {
		padding-left: 90px;
	}

	/* Profile */
	.apropos {
		padding:40px 0 20px 0;
		background: none;
	}

	/* Contact */
	.contact .message,
	.contact .envoyer {
		float: none;
		width: 100%;
	}
}

/* -----------------------------------------------
= RETINA @2X
----------------------------------------------- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    .heading {
		background:url('img/logo_vgz@2x.png') left top no-repeat;
		background-size:72px 160px;
	}

	.socialist a {
	background: url('img/socials_sprite@2x.png') 0 0 no-repeat;
	background-size: 101px 170px;
	}

	.contact .btn_envoyer {
		background: url('img/btn_envoyer@2x.png') no-repeat center;
		background-size: 108px 120px;
	}

	.projets .pager a {
		background: url('img/bullets_slider@2x.png') no-repeat 0 0;
		background-size:23px 46px;
	}
}