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

}

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

}

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

}

@media print {
  h3 {
      margin-top: 1.5em;
      margin-bottom: 0.5em;
      page-break-before: always;
  }
  
  .header {
     display: none;
  }
}

/*@media screen {*/

	* {
		border: 0;
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: 100%;
		outline: none;
	}

	html, body {
		width: 100%;
		height: 100%;
		font-family: 'ubunturegular', Verdana, sans-serif;
		font-size: 18px;
		color: #666;
	}
	
	.wrapper {
		width: 1260px;
		margin: 0 auto;
		overflow: hidden;
	}
	
	.two-third-col {
		width: 820px;
		float: left;
		margin: 0 30px 30px 0;
	}
	
	/* .one-half-col {
		width: 615px;
		float: left;
		margin: 0 30px 30px 0;
	} */
	
	.one-quarter-col {
		width: calc(1170px / 4);
		float: left;
		margin: 0 30px 30px 0;
	}
	
	.one-third-col {
		width: 400px;
		float: left;
		margin: 0 30px 30px 0;
	}
	
	/* .one-sixth-col {
		width: 185px;
		float: left;
		margin: 0 30px 30px 0;
	} */
	
	.one-half-col:nth-child(2n), .one-third-col:nth-child(3n), .two-third-col + .one-third-col, .one-quarter-col:nth-child(4n), .one-sixth-col:nth-child(6n) {
		margin-right: 0;
	}
	
	.general-section {
		padding: 4em 0;
	}
	
	.page-subtitle {
		font-size: 2em;
		margin-bottom: 2em;
		text-align: center;
		color: #264d7c;
		font-family: 'ubuntubold', Verdana, sans-serif;
		font-weight: normal;
	}
	
	*::selection {
		color: white;
		background: #1F3863;
	}

	*::-moz-selection {
		color: white;
		background: #1F3863;
	}
	
	/*** header ***/
	
	#header {
		position: fixed;
		width: 100%;
		transition: background 0.2s ease-in;
		z-index: 900;
	}
	
	#header.triggered {
		background: #264d7c;
	}
	
	#header .wrapper {
		border-bottom: 1px solid white;
		padding: 10px 0;
		position: relative;
	}
	
	#header.triggered .wrapper {
		border: 0;
	}
	
	#header h1 {
		font-weight: normal;
		font-size: 1.2em;
		float: left;
		font-weight: normal;
	}
	
	#header h1 a {
		color: white;
		display: block;
		text-decoration: none;
		line-height: 30px;
		padding-left: 35px;
		background: url('../images/fractal-it-white-logo.svg') left center no-repeat;
		-moz-background-size: 25px auto;
		-o-background-size: 25px auto;
		-webkit-background-size: 25px auto;
		-ms-background-size: 25px auto;
		background-size: 25px auto;
	}
	
	#main-menu {
		float: right;
		line-height: 30px;
	}
	
	#main-menu ul {
		margin: 0;
		padding: 0;
		list-style: none;
		font-family: 'ubuntulight', Verdana, sans-serif;
	}
	
	#main-menu ul li {
		float: left;
		margin: 0 1em;
	}
	
	#main-menu ul li a {
		color: white;
		text-decoration: none;
	}
	
	#main-menu ul li a:hover, #main-menu ul li a.active {
		text-decoration: underline;
	}
	
	#header #main-menu-link {
		width: 36px;
		height: 30px;
		display: none;
		text-indent: -9999em;
		text-align: center;
		position: absolute;
		right: 0;
		cursor: pointer;
		-moz-transition: all 0.3s ease-in;
		-o-transition: all 0.3s ease-in;
		-webkit-transition: all 0.3s ease-in;
		-ms-transition: all 0.3s ease-in;
		transition: all 0.3s ease-in;
	}
	
	#header #main-menu-link span {
		display: block;
		background: white;
		width: 36px;
		left: 0;
		height: 4px;
		top: 14px;
		position: absolute;
		-moz-transition: all 0.3s ease-in;
		-o-transition: all 0.3s ease-in;
		-webkit-transition: all 0.3s ease-in;
		-ms-transition: all 0.3s ease-in;
		transition: all 0.3s ease-in;
	}
	
	#header #main-menu-link span::before {
		content: "";
		display: block;
		position: absolute;
		background: white;
		width: 36px;
		left: 0;
		height: 4px;
		-moz-transition: all 0.3s ease-in;
		-o-transition: all 0.3s ease-in;
		-webkit-transition: all 0.3s ease-in;
		-ms-transition: all 0.3s ease-in;
		transition: all 0.3s ease-in;
		top: 0;
		transform: translateY(-300%);
		-moz-transform: translateY(-300%);
		-o-transform: translateY(-300%);
		-webkit-transform: translateY(-300%);
		-ms-transform: translateY(-300%);
	}
	
	#header #main-menu-link span::after {
		content: "";
		display: block;
		position: absolute;
		background: white;
		width: 36px;
		left: 0;
		height: 4px;
		-moz-transition: all 0.3s ease-in;
		-o-transition: all 0.3s ease-in;
		-webkit-transition: all 0.3s ease-in;
		-ms-transition: all 0.3s ease-in;
		transition: all 0.3s ease-in;
		top: 0;
		transform: translateY(300%);
		-moz-transform: translateY(300%);
		-o-transform: translateY(300%);
		-webkit-transform: translateY(300%);
		-ms-transform: translateY(300%);
	}
	
	#header #main-menu-link:hover span, #header #main-menu-link:hover span::before, #header #main-menu-link:hover span::after,
	#header.toggled #main-menu-link:hover span::before, #header.toggled #main-menu-link:hover span::after {
		background: #264d7c;
	}
	
	#header.toggled #main-menu-link span {
		background: transparent;
	}
	
	#header.toggled #main-menu-link span::before {
		background: white;
		transform: translateY(0) rotate(45deg);
		-moz-transform: translateY(0) rotate(45deg);
		-o-transform: translateY(0) rotate(45deg);
		-webkit-transform: translateY(0) rotate(45deg);
		-ms-transform: translateY(0) rotate(45deg);
	}
	
	#header.toggled #main-menu-link span::after {
		background: white;
		transform: translateY(0) rotate(-45deg);
		-moz-transform: translateY(0) rotate(-45deg);
		-o-transform: translateY(0) rotate(-45deg);
		-webkit-transform: translateY(0) rotate(-45deg);
		-ms-transform: translateY(0) rotate(-45deg);
	}
	
	/*** home ***/

	#home {
		width: 100%;
		min-height: 100vh;
		color: white;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2c66b6+0,264d7c+50,264d7c+100 */
		background: #2c66b6; /* Old browsers */
		background: -moz-linear-gradient(left, #2c66b6 0%, #264d7c 50%, #1E3D63 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left, #2c66b6 0%,#264d7c 50%,#1E3D63 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right, #2c66b6 0%,#264d7c 50%,#1E3D63 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c66b6', endColorstr='#264d7c',GradientType=1 ); /* IE6-9 */
	}
	
	#home-background {
		width: 100%;
		min-height: 100vh;
		background: url('../images/home-background.png') left top;
		
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: flexbox;
		display: -moz-flex;
		display: -o-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		
		-moz-flex-direction: column;
		-o-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	
	#home-background .wrapper {
		margin: auto;
	}
	
	#site-titles {
		width: 50%;
		margin: auto;
		padding: 50px 0 0 0;
		overflow: hidden;
	}
	
	#site-titles h2 {
		font-size: 2.8em;
		font-weight: normal;
		margin: 0;
		font-family: 'ubuntulight', Verdana, sans-serif;
		line-height: 120%;
		padding: 1em 0 0.8em 215px;
		background: url('../images/fractal-it-white-logo.svg') left center no-repeat;
		-moz-background-size: 185px auto;
		-o-background-size: 185px auto;
		-webkit-background-size: 185px auto;
		-ms-background-size: 185px auto;
		background-size: 185px auto;
	}
	
	#site-titles h2 strong {
		font-size: 1.7em;
		font-family: 'ubuntubold', Verdana, sans-serif;
		font-weight: normal;
	}
	
	#site-titles h2 span {
		font-family: 'ubunturegular', Verdana, sans-serif;
	}
	
	#start-visit {
		display: block;
		margin: 8em auto 0.5em auto;
		text-indent: -9999em;
		background: url('../images/fractal-id-start-visit-white.svg') center center no-repeat;
		-moz-background-size: 100% 100%;
		-o-background-size: 100% 100%;
		-webkit-background-size: 100% 100%;
		-ms-background-size: 100% 100%;
		background-size: 100% 100%;
		width: 150px;
		height: 50px;
		transition: all 0.2s ease-in;
	}
	
	#start-visit:hover {
		margin: 8.5em auto 0 auto;
	}
	
	/*** skillz ***/
	
	.skill-element::before {
		content: "";
		height: 4em;
		font-size: 1.2em;
		width: 60%;
		margin: 0 auto;
		display: block;
		border-bottom: 1px solid #999;
		margin-bottom: 0.8em;
	}
	
	.skill-ideas::before {
		background: url('../images/fractal-it-ideas-green.svg') center top no-repeat;
		-moz-background-size: auto 3.2em;
		-o-background-size: auto 3.2em;
		-webkit-background-size: auto 3.2em;
		-ms-background-size: auto 3.2em;
		background-size: auto 3.2em;
	}
	
	.skill-devices::before {
		background: url('../images/fractal-it-devices-green.svg') center top no-repeat;
		-moz-background-size: auto 3.2em;
		-o-background-size: auto 3.2em;
		-webkit-background-size: auto 3.2em;
		-ms-background-size: auto 3.2em;
		background-size: auto 3.2em;
	}
	
	.skill-frameworks::before {
		background: url('../images/fractal-it-working-green.svg') center top no-repeat;7
		-moz-background-size: auto 3.2em;
		-o-background-size: auto 3.2em;
		-webkit-background-size: auto 3.2em;
		-ms-background-size: auto 3.2em;
		background-size: auto 3.2em;
	}
	
	.skill-element h4 {
		position: relative;
		text-align: center;
		color: #2c66b6;
		margin-bottom: 0.8em;
		font-size: 1.2em;
	}
	
	.skill-element div {
		font-family: 'ubuntulight', Verdana, sans-serif;
	}
	
	#technologies {
		margin-top: 30px;
		padding: 4em 0;
		background: #608ABB;
		color: white;
		text-align: center;
		overflow: hidden;
	}
	
	/* #technologies .one-quarter-col, #technologies .one-half-col {
		margin-bottom: 3em;
	} */
	
	#technologies ul li {
		float: left;
		width: calc(100% / 9);
	}
	
	#technologies span, #technologies a {
		display: block;
		padding-top: 90px;
		font-family: 'ubuntubold', Verdana, sans-serif;
	}
	
	.technologie-python span {
		background: url('../images/fractal-it-technologie-python.png') center top no-repeat;
		-moz-background-size: auto 70px;
		-o-background-size: auto 70px;
		-webkit-background-size: auto 70px;
		-ms-background-size: auto 70px;
		background-size: auto 70px;
	}
	
	.technologie-php-mysql span {
		background: url('../images/fractal-it-technologie-php-mysql.png') center top no-repeat;
		-moz-background-size: auto 70px;
		-o-background-size: auto 70px;
		-webkit-background-size: auto 70px;
		-ms-background-size: auto 70px;
		background-size: auto 70px;
	}
	
	.technologie-mongoDB span {
		background: url('../images/fractal-it-technologie-mongoDB.png') center top no-repeat;
		-moz-background-size: auto 70px;
		-o-background-size: auto 70px;
		-webkit-background-size: auto 70px;
		-ms-background-size: auto 70px;
		background-size: auto 70px;
	}
	
	.technologie-nodeJS span {
		background: url('../images/fractal-it-technologie-nodeJS.png') center top no-repeat;
		-moz-background-size: auto 70px;
		-o-background-size: auto 70px;
		-webkit-background-size: auto 70px;
		-ms-background-size: auto 70px;
		background-size: auto 70px;
	}
	
	.technologie-reactJS span {
		background: url('../images/fractal-it-technologie-reactJS.png') center top no-repeat;
		-moz-background-size: auto 70px;
		-o-background-size: auto 70px;
		-webkit-background-size: auto 70px;
		-ms-background-size: auto 70px;
		background-size: auto 70px;
	}
	
	.technologie-emberJS span {
		background: url('../images/fractal-it-technologie-emberJS.png') center top no-repeat;
		-moz-background-size: auto 70px;
		-o-background-size: auto 70px;
		-webkit-background-size: auto 70px;
		-ms-background-size: auto 70px;
		background-size: auto 70px;
	}
	
	.technologie-twitterAPI span {
		background: url('../images/fractal-it-technologie-twitterAPI.png') center top no-repeat;
		-moz-background-size: auto 70px;
		-o-background-size: auto 70px;
		-webkit-background-size: auto 70px;
		-ms-background-size: auto 70px;
		background-size: auto 70px;
	}
	
	.technologie-facebookAPI span {
		background: url('../images/fractal-it-technologie-facebookAPI.png') center top no-repeat;
		-moz-background-size: auto 75px;
		-o-background-size: auto 75px;
		-webkit-background-size: auto 75px;
		-ms-background-size: auto 75px;
		background-size: auto 75px;
	}
	
	.technologie-googleAPI span {
		background: url('../images/fractal-it-technologie-googleAPI.png') center top no-repeat;
		-moz-background-size: auto 70px;
		-o-background-size: auto 70px;
		-webkit-background-size: auto 70px;
		-ms-background-size: auto 70px;
		background-size: auto 70px;
	}
	
	/*** projects ***/

	.dropshadow {
		position: absolute;
	    width: 100%;
	    height: 100%;
	    box-shadow: inset 5px 5px 18px 0px rgba(0,0,10,0.65);
	    z-index: 2;
	}
	
	#project-wrapper {
		overflow: hidden;
	}	
	
	.project {
		width: 100%;
		height: 0;
		padding-bottom: 100%;
		position: relative;
		overflow: hidden;
		float: left;
	}
	
	.project-content {
		position: absolute;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	
	.project-description {
		position: absolute;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(52, 107, 173, 0.8);
		z-index: 3;
		
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: flexbox;
		display: -moz-flex;
		display: -o-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		
		-moz-flex-direction: column;
		-o-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		
		opacity: 0;
		transition: all 0.2s ease-in;
	}
	
	.project-content:hover .project-description {
		opacity: 1;
	}
	
	.project-description::before {
		content: "";
		position: absolute;
		top: 10%;
		bottom: 10%;
		left: 50%;
		right: 50%;
		display: block;
		border-top: 2px solid white;
		border-bottom: 2px solid white;
		transition: all 0.2s ease-in 0.2s;
	}
	
	.project-content:hover .project-description::before {
		left: 10%;
		right: 10%;
	}
	
	.project-description::after {
		content: "";
		position: absolute;
		top: 50%;
		bottom: 50%;
		left: 10%;
		right: 10%;
		display: block;
		border-left: 2px solid white;
		border-right: 2px solid white;
		transition: all 0.2s ease-in 0.2s;
	}
	
	.project-content:hover .project-description::after {
		top: 10%;
		bottom: 10%;
	}
	
	.project-description-inner {
		margin: auto;
		color: white;
		text-align: center;
		padding: 14%;
	}
	
	.project-description-inner h4 {
		text-transform: uppercase;
		font-weight: normal;
		font-size: 1.4em;
		margin: 0 0 0.5em 0;
		position: relative;
		transition: all 0.2s ease-in 0.2s;
		top: 0.2em;
		opacity: 0;
		font-family: 'ubuntubold', Verdana, sans-serif;
	}
	
	.project-content:hover .project-description-inner h4  {
		top: 0;
		opacity: 1;
	}
    
	.project-description-inner h5 {		
		font-weight: bold;
        #color: #EEE;
		font-size: 1em;
		margin: -0.5em 0 1em 0;
	}
    
	
	.project-description-inner p {
		margin: 0 0 0.5em 0;
		position: relative;
		transition: all 0.2s ease-in 0.4s;
		top: 0.2em;
		opacity: 0;
		font-family: 'ubuntulight', Verdana, sans-serif;
	}
	
	.project-content:hover .project-description-inner p  {
		top: 0;
		opacity: 1;
	}
	
	.project-content img {
		display: block;
		width: 120%; /* for parallax */
		height: auto;
		position: absolute;
		z-index: 1;
		/* No trasition: slows down parralax
        transition: all 0.15s ease-in;
        */
		-moz-backface-visibility: hidden;
		-o-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-transform: translateZ(0) scale(1.0, 1.0);
	}
	
	.project-content:hover img {
		-moz-filter: blur(2px);
		-o-filter: blur(2px);
		-webkit-filter: blur(2px);
		-ms-filter: blur(2px);
		filter: blur(2px);
	}
	
	/*** team ***/
	
	#equipe {
		position: relative;
	}
	
	#inner-team {
		background: white;
		padding: 4em 0;
		font-family: 'ubuntulight', Verdana, sans-serif;
	}
	
	.team-member {
		margin-bottom: 0.8em;
	}
	
	.team-member h4 {
		font-family: 'ubuntubold', Verdana, sans-serif;
		font-weight: normal;
		font-size: 1.2em;
	}
	
	.team-member h4 a {
		color: #666;
		text-decoration: none;
	}
	
	.team-member h4 a:hover {
		text-decoration: underline;
	}
	
	.team-member h5 {
		font-family: 'ubunturegular', Verdana, sans-serif;
		font-weight: normal;
		font-size: 1.1em;
		margin-bottom: 1.3em;
		color: #2c66b6;
	}
	
	.team-member p {
		margin-bottom: 1em;
	}
	
	.team-leader h4 {
		font-size: 1.4em;
	}
	
	.team-leader h5 {
		font-size: 1.2em;
	}
	
	/*** contact ***/
	
	#contact {
		text-align: center;
		
		background: #2c66b6; /* Old browsers */
		background: -moz-linear-gradient(left, #2c66b6 0%, #264d7c 50%, #264d7c 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left, #2c66b6 0%,#264d7c 50%,#1E3D63 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right, #2c66b6 0%,#264d7c 50%,#1E3D63 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c66b6', endColorstr='#264d7c',GradientType=1 ); /* IE6-9 */
		
		color: white;
		padding: 0;
	}
	
	#contact-background {
		width: 100%;
		height: 100%;
		background: url('../images/home-background.png') left top;
		padding: 4em 0;
	}
	
	#contact .page-subtitle {
		color: white;
	}
	
	#contact h4 {
		font-size: 1.5em;
		font-weight: normal;
	}
	
	#contact-social {
		text-align: center;
		margin: 2em 0;
	}
	
	#contact-social a {
		display: inline-block;
		width: 60px;
		height: 60px;
		text-indent: -9999em;
		position: relative;
		overflow: hidden;
	}
	
	#mail-contact {
		margin-right: 30px;
		background: #333;
	}
	
	#linkedin-contact {
		background: #333;
	}
	
	#contact-social a::before {
		content: "";
		position: absolute;
		top: 50%;
		right: 50%;
		bottom: 50%;
		left: 50%;
		border-radius: 50%;
		display: block;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#5bd747+0,264d7c+100 */
		background: #5bd747; /* Old browsers */
		background: -moz-radial-gradient(center, ellipse cover, #497CB9 0%, #1E3D63 100%); /* FF3.6-15 */
		background: -webkit-radial-gradient(center, ellipse cover, #497CB9 0%,#1E3D63 100%); /* Chrome10-25,Safari5.1-6 */
		background: radial-gradient(ellipse at center, #497CB9 0%,#1E3D63 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5bd747', endColorstr='#264d7c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
		transition: all 0.2s ease-in;
	}
	
	#contact-social a:hover::before {
		top: -15px;
		right: -15px;
		bottom: -15px;
		left: -15px;
	}
	
	#mail-contact::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: block;
		background: url('../images/fracta-it-mail-white.svg') center center no-repeat;
		-moz-background-size: 60% auto;
		-o-background-size: 60% auto;
		-webkit-background-size: 60% auto;
		-ms-background-size: 60% auto;
		background-size: 60% auto;
	}
	
	#linkedin-contact::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: block;
		background: url('../images/fracta-it-linkedin-white.svg') center center no-repeat;
		-moz-background-size: 50% auto;
		-o-background-size: 50% auto;
		-webkit-background-size: 50% auto;
		-ms-background-size: 50% auto;
		background-size: 50% auto;
	}
	
	/*** footer ***/
	
	#footer {
		background: #eee;
		padding: 1em 0;
	}
	
	#footer-menu {
		text-align: center;
		font-size: 0.9em;
	}
	
	#footer-menu ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	#footer-menu ul li {
		display: inline-block;
		margin: 0 1em;
	}
	
	#footer-menu ul li a {
		color: #999;
		text-decoration: none;
	}
	
	#footer-menu ul li a:hover, #footer-menu ul li a.active {
		color: #666;
	}
/*}
*/
@media screen and (max-width: 1320px) {

	body {
		font-size: 16px;
	}
    
    .project-description-inner {		
		font-size: 0.9em;
    }
	
	.wrapper {
		width: 940px;
	}
	
	.two-third-col {
		width: calc(1850px / 3);
	}
	
	/* .one-half-col {
		width: 485px;
	} */
	
	.one-quarter-col {
		width: calc(850px / 4);
	}
	
	.one-third-col {
		width: calc(880px / 3);
	}
	
	/* .one-sixth-col {
		width: 185px;
	} */
	
	.one-half-col:nth-child(2n), .one-third-col:nth-child(3n), .two-third-col + .one-third-col, .one-quarter-col:nth-child(4n), .one-sixth-col:nth-child(6n) {
		margin-right: 0;
	}
	
	/*** home ***/
	
	#site-titles {
		width: 66.66%;
	}
	
	#site-titles h2 {
		padding-left: calc(850px / 4);
		-moz-background-size: 182px auto;
		-o-background-size: 182px auto;
		-webkit-background-size: 182px auto;
		-ms-background-size: 182px auto;
		background-size: 182px auto;
	}
	
	#start-visit {
		width: 140px;
		height: 47px;
	}
}

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

	body {
		font-size: 15px;
	}
    
    .project-description-inner {		
		font-size: 1em;
    }    
	
	.wrapper {
		width: 720px;
	}
	
	.two-third-col {
		width: 470px;
	}
	
	/* .one-half-col {
		width: 485px;
	} */
	
	.one-quarter-col {
		width: calc(630px / 4);
	}
	
	.one-third-col {
		width: calc(660px / 3);
	}
	
	/* .one-sixth-col {
		width: 185px;
	} */
	
	.one-half-col:nth-child(2n), .one-third-col:nth-child(3n), .two-third-col + .one-third-col, .one-quarter-col:nth-child(4n), .one-sixth-col:nth-child(6n) {
		margin-right: 0;
	}
	
	/*** home ***/
	
	#site-titles {
		width: 75%;
	}
	
	#site-titles h2 {
		font-size: 2.5em;
		padding-left: calc(630px / 4);
		-moz-background-size: 127px auto;
		-o-background-size: 127px auto;
		-webkit-background-size: 127px auto;
		-ms-background-size: 127px auto;
		background-size: 127px auto;
	}
	
	#start-visit {
		width: 130px;
		height: 44px;
	}
	
	/*** technologies ***/
	
	#technologies ul li {
		width: calc(100% / 3);
		margin-bottom: 30px;
	}
	
	#technologies span, #technologies a {
		display: block;
		padding-top: 70px;
		font-family: 'ubuntubold', Verdana, sans-serif;
	}
	
	.technologie-python span {
		background: url('../images/fractal-it-technologie-python.png') center top no-repeat;
		-moz-background-size: auto 50px;
		-o-background-size: auto 50px;
		-webkit-background-size: auto 50px;
		-ms-background-size: auto 50px;
		background-size: auto 50px;
	}
	
	.technologie-php-mysql span {
		background: url('../images/fractal-it-technologie-php-mysql.png') center top no-repeat;
		-moz-background-size: auto 50px;
		-o-background-size: auto 50px;
		-webkit-background-size: auto 50px;
		-ms-background-size: auto 50px;
		background-size: auto 50px;
	}
	
	.technologie-mongoDB span {
		background: url('../images/fractal-it-technologie-mongoDB.png') center top no-repeat;
		-moz-background-size: auto 50px;
		-o-background-size: auto 50px;
		-webkit-background-size: auto 50px;
		-ms-background-size: auto 50px;
		background-size: auto 50px;
	}
	
	.technologie-nodeJS span {
		background: url('../images/fractal-it-technologie-nodeJS.png') center top no-repeat;
		-moz-background-size: auto 50px;
		-o-background-size: auto 50px;
		-webkit-background-size: auto 50px;
		-ms-background-size: auto 50px;
		background-size: auto 50px;
	}
	
	.technologie-reactJS span {
		background: url('../images/fractal-it-technologie-reactJS.png') center top no-repeat;
		-moz-background-size: auto 50px;
		-o-background-size: auto 50px;
		-webkit-background-size: auto 50px;
		-ms-background-size: auto 50px;
		background-size: auto 50px;
	}
	
	.technologie-emberJS span {
		background: url('../images/fractal-it-technologie-emberJS.png') center top no-repeat;
		-moz-background-size: auto 50px;
		-o-background-size: auto 50px;
		-webkit-background-size: auto 50px;
		-ms-background-size: auto 50px;
		background-size: auto 50px;
	}
	
	.technologie-twitterAPI span {
		background: url('../images/fractal-it-technologie-twitterAPI.png') center top no-repeat;
		-moz-background-size: auto 50px;
		-o-background-size: auto 50px;
		-webkit-background-size: auto 50px;
		-ms-background-size: auto 50px;
		background-size: auto 50px;
	}
	
	.technologie-facebookAPI span {
		background: url('../images/fractal-it-technologie-facebookAPI.png') center top no-repeat;
		-moz-background-size: auto 55px;
		-o-background-size: auto 55px;
		-webkit-background-size: auto 55px;
		-ms-background-size: auto 55px;
		background-size: auto 55px;
	}
	
	.technologie-googleAPI span {
		background: url('../images/fractal-it-technologie-googleAPI.png') center top no-repeat;
		-moz-background-size: auto 50px;
		-o-background-size: auto 50px;
		-webkit-background-size: auto 50px;
		-ms-background-size: auto 50px;
		background-size: auto 50px;
	}
	
	/*** projects ***/
	
	.project-description-inner {
		padding: 15%;
	}
	
	#projets .one-third-col:nth-child(3n) {
		margin-right: 30px;
	}
	
	#projets .one-third-col {
		width: 345px;
	}
	
	#projets .one-third-col:nth-child(2n) {
		margin-right: 0;
	}

}

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

	body {
		font-size: 14px;
	}
	
	.wrapper {
		width: auto;
		margin: 0 20px;
	}
	
	/* .one-sixth-col {
		width: 185px;
	} */
	
	.one-half-col:nth-child(2n), .one-third-col:nth-child(3n), .two-third-col + .one-third-col, .one-quarter-col:nth-child(4n), .one-sixth-col:nth-child(6n) {
		margin-right: 0;
	}
	
	/*** home ***/
	
	#home-background .wrapper {
		margin: auto 20px;
	}
	
	#site-titles {
		width: 75%;
	}
	
	#site-titles h2 {
		padding-left: 33%;
		-moz-background-size: calc(33% - 30px) auto;
		-o-background-size: calc(33% - 30px) auto;
		-webkit-background-size: calc(33% - 30px) auto;
		-ms-background-size: calc(33% - 30px) auto;
		background-size: calc(33% - 30px) auto;
	}
	
	#start-visit {
		width: 110px;
		height: 37px;
	}
	
	/*** skillz ***/
	
	#competences .one-third-col {
		width: calc((100% - 60px) / 3);
	}
	
	#technologies span, #technologies a {
		display: block;
		padding-top: 60px;
		font-family: 'ubuntubold', Verdana, sans-serif;
	}
	
	.technologie-python span {
		background: url('../images/fractal-it-technologie-python.png') center top no-repeat;
		-moz-background-size: auto 40px;
		-o-background-size: auto 40px;
		-webkit-background-size: auto 40px;
		-ms-background-size: auto 40px;
		background-size: auto 40px;
	}
	
	.technologie-php-mysql span {
		background: url('../images/fractal-it-technologie-php-mysql.png') center top no-repeat;
		-moz-background-size: auto 40px;
		-o-background-size: auto 40px;
		-webkit-background-size: auto 40px;
		-ms-background-size: auto 40px;
		background-size: auto 40px;
	}
	
	.technologie-mongoDB span {
		background: url('../images/fractal-it-technologie-mongoDB.png') center top no-repeat;
		-moz-background-size: auto 40px;
		-o-background-size: auto 40px;
		-webkit-background-size: auto 40px;
		-ms-background-size: auto 40px;
		background-size: auto 40px;
	}
	
	.technologie-nodeJS span {
		background: url('../images/fractal-it-technologie-nodeJS.png') center top no-repeat;
		-moz-background-size: auto 40px;
		-o-background-size: auto 40px;
		-webkit-background-size: auto 40px;
		-ms-background-size: auto 40px;
		background-size: auto 40px;
	}
	
	.technologie-reactJS span {
		background: url('../images/fractal-it-technologie-reactJS.png') center top no-repeat;
		-moz-background-size: auto 40px;
		-o-background-size: auto 40px;
		-webkit-background-size: auto 40px;
		-ms-background-size: auto 40px;
		background-size: auto 40px;
	}
	
	.technologie-emberJS span {
		background: url('../images/fractal-it-technologie-emberJS.png') center top no-repeat;
		-moz-background-size: auto 40px;
		-o-background-size: auto 40px;
		-webkit-background-size: auto 40px;
		-ms-background-size: auto 40px;
		background-size: auto 40px;
	}
	
	.technologie-twitterAPI span {
		background: url('../images/fractal-it-technologie-twitterAPI.png') center top no-repeat;
		-moz-background-size: auto 40px;
		-o-background-size: auto 40px;
		-webkit-background-size: auto 40px;
		-ms-background-size: auto 40px;
		background-size: auto 40px;
	}
	
	.technologie-facebookAPI span {
		background: url('../images/fractal-it-technologie-facebookAPI.png') center top no-repeat;
		-moz-background-size: auto 45px;
		-o-background-size: auto 45px;
		-webkit-background-size: auto 45px;
		-ms-background-size: auto 45px;
		background-size: auto 45px;
	}
	
	.technologie-googleAPI span {
		background: url('../images/fractal-it-technologie-googleAPI.png') center top no-repeat;
		-moz-background-size: auto 40px;
		-o-background-size: auto 40px;
		-webkit-background-size: auto 40px;
		-ms-background-size: auto 40px;
		background-size: auto 40px;
	}
	
	/*** projets ***/
	
	#projets .one-third-col {
		width: calc(50% - 15px);
	}
	
	/***team ***/
	
	#equipe .one-third-col, #equipe .two-third-col {
		float: none;
		margin-right: 0;
		width: auto;
	}
	
}

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

	body {
		font-size: 14px;
	}
	
	.wrapper {
		width: auto;
		margin: 0 10px;
	}
	
	.one-half-col:nth-child(2n), .one-third-col:nth-child(3n), .two-third-col + .one-third-col, .one-quarter-col:nth-child(4n), .one-sixth-col:nth-child(6n) {
		margin-right: 0;
	}
	
	/*** header ***/
	
	#header {
		font-size: 1.1em;
	}
	
	#header .wrapper {
		height: 30px;
		transition: all 0.3s ease-in;
	}
	
	#header.toggled .wrapper {
		height: 190px;
	}
	
	#main-menu {
		float: none;
		clear: both;
	}
	
	#main-menu ul li {
		float: none;
		text-align: center;
		line-height: 40px;
	}
	
	#header #main-menu-link {
		display: block;
		top: 10px;
	}
	
	/*** home ***/
	
	#home-background .wrapper {
		margin: auto 10px;
	}
	
	#site-titles {
		width: 100%;
	}
	
	#site-titles h2 {
		font-size: 2.1em;
		padding-left: 0;
		background: transparent;
		text-align: center;
	}
	
	#start-visit {
		width: 100px;
		height: 34px;
	}
	
	/*** skillz ***/
	
	#competences .one-third-col {
		width: 100%;
		float: none;
		margin-right: 0;
	}
	
}

@media screen and (max-width: 480px) {
	
	#site-titles h2 {
		font-size: 1.8em;
	}
	
	#technologies ul li {
		width: 50%;
	}
	
	/*** projets ***/
	
	#projets .one-third-col {
		width: 100%;
		/*float: none; why ?? breaks layout on 1 col */
		margin-right: 0;
	}
	
}