/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */

/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.23, autoprefixer: v9.7.3) */

/* variables */

:root {
/* colors */
  --main-contrast-color: #e97a03; /* orange */
  --line-separators-color: #ddd; /*light-grey*/
  --light-text-color:#aaa; /* Xlight grey*/
  --medium-text-color:#898989; /* Medium grey */
  --almost-black:#1C1C1C; /* self explanatory */
  --base-red:#ED5156;
  --base-yellow:#F6A829;
  --base-blue:#61BCBE;
/* fonts */
	--bold-titles: 'impactregular';
}

/* end variables */

/* responsive notes 

# All styles default for mobile version. MQ used for larger screens
# Media breakpoints : 600px

end responsive notes */

/* fonts */

	@font-face {
    font-family: 'impactregular';
    src: url('../fonts/impact-webfont.woff2') format('woff2'),
         url('../fonts/impact-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

	}

	@font-face {
    font-family: 'OpenSans-ExtraBold-webfont';
    src: url('../fonts/OpenSans-ExtraBold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
	}

	

/* end fonts */


/* general styles */

html, body {

  background: #000;
  background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;
  z-index: 0;
}

a {
 color:inherit;
 font-weight: normal;
 text-decoration: underline;
}

ul {
	list-style: none;
	margin:0;
	padding: 0;
}

ul li {
	margin:0;
	padding: 0;
}

h1, h2, h3 {
	font-weight: normal; /* resetting UA defaults for Chrome rendering engine */
}

h1,h2 {
	font-family: var(--bold-titles),"Helvetica Neue","Helvetica","Arial",sans-serif;
	text-rendering: optimizeLegibility;
	text-transform: uppercase;
}



h2 {
	font-size: 38px;
	line-height: 1em;
	color: var(--almost-black);
}

h2.underlined {
 padding-bottom:5px;
 margin-bottom: 0.3em;
}

 h2.red.underlined {
 border-bottom : 7px solid var(--base-red);
 padding-bottom:5px;
 margin-bottom: 0.3em;
}

h2.blue.underlined {
 border-bottom : 7px solid var(--base-blue);
}

h2.yellow.underlined {
 border-bottom : 7px solid var(--base-yellow);
}


h3 {
	font-size: 1em;
	line-height: 1em;
	margin-bottom: 0.3em;
}

div#main-container {
background: #fff;
z-index:1;
max-width: 378px;
margin:0 auto;
}

section#main-content-area p.focus {
	text-transform: uppercase;
	font-size:1.5em;
	text-align: center;
}

section#main-content-area p {
	margin:0 0 1.2em 0;
}

section#main-content-area a, section#main-content-area a:link, section#main-content-area a:visited {
 color:inherit;
 font-weight: normal;
 text-decoration: underline;
}

section#main-content-area h2 {
	margin:0.3em 0 0.5em 0;
}

section#main-content-area p.addendum {
	font-style: italic;
	border-top:1px solid var(--line-separators-color);
	border-bottom:1px solid var(--line-separators-color);
	padding: 5px;
}

section#main-content-area p.addendum em{
	font-style: normal;
}

.smaller {
	font-size:90%;
}
	


/* end general styles */

/** large screens general styles */

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

	div#main-container {
		border-left:20px solid var(--base-yellow);
		height: 100%;
		max-width:1100px;
		margin:auto; 
	}

}

/** end large screens general styles */


/* header */

header {
	
}


header div#logo-container {
width: 100%;
margin: 45px auto 0 auto;
padding:15px 0 15px 0;
border-bottom: 1px solid var(--line-separators-color);
text-align: center;
}

header nav#header-menu {
	display: block;
	background: var(--light-text-color);
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10;
}

header nav#header-menu ul {
	display: flex;
	justify-content: space-between;
	padding:0 10px;
}

header nav#header-menu ul li.active {
	display: none;
	}



header nav#header-menu ul li a {
	color: white;
	text-transform: uppercase;	
	font-family: 'impactregular';
	font-size:30px;
	/*margin-left: 0.7em;
	margin-right: 0.7em;*/
}

header nav#header-menu ul li a.active {
	display: none;
	margin:0;
}

header div#header-background {
	display: none;
}

/** all nav **/
	
	

	

	header div#page-title-container {
		margin:0 0 1em 0 ;
		padding:0 9px 0 9px;
		background: #fff;
		display: block;
		text-align: center;
	} 

	header div#page-title-container h1 {
		margin:0;
		padding:0;
		font-size: 48px;
		line-height: 48px;
		background: rgb(103,201,255);
background: -moz-linear-gradient(90deg, rgba(103,201,203,1) 0%, rgba(255,184,55,1) 50%, rgba(255,94,100,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(103,201,203,1) 0%, rgba(255,184,55,1) 50%, rgba(255,94,100,1) 100%);
background: linear-gradient(90deg, rgba(103,201,203,1) 0%, rgba(255,184,55,1) 50%, rgba(255,94,100,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#67c9cb",endColorstr="#ff5e64",GradientType=1);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		display: inline-block;
	}


	/** end all nav **/

/* end header */

/** large screens header */

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

	header {
	border-top:none;
	position: relative;
	}

	header nav#header-menu {
	position: relative;
	}

	header nav#header-menu ul li, header nav#header-menu ul li.active {
	display: inline-block;
	margin-left: 0.5em;
	}

	header nav#header-menu ul li:first-child {
		margin-left:15px;
	}

	header nav#header-menu ul li a {
	line-height: 24px;
	font-size: 30px;
	/*letter-spacing:-0.05em;*/
	color: #797979;
	font-weight: 400;
	}

	header nav#header-menu ul li a:hover {
	text-decoration: none;
	font-weight: 600;
	transition: 0.15s;
	}

	header nav#header-menu ul li a.active {
		display: inline;
		background: rgb(103,201,255);
background: -moz-linear-gradient(90deg, rgba(103,201,203,1) 0%, rgba(255,184,55,1) 50%, rgba(255,94,100,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(103,201,203,1) 0%, rgba(255,184,55,1) 50%, rgba(255,94,100,1) 100%);
background: linear-gradient(90deg, rgba(103,201,203,1) 0%, rgba(255,184,55,1) 50%, rgba(255,94,100,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#67c9cb",endColorstr="#ff5e64",GradientType=1);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}



	header div#header-background {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index:3;
	height: 147px;
	border-bottom: 1px solid var(--line-separators-color);
	width: calc(100% - 20px);
	margin-left: 20px;
	}

	header div#logo-container {
	width: 180px;
	margin: 0;
	padding:10px 0 0 15px;
	z-index: 4;
	border:none;

	}

	header.flex-container {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: end;
		    -ms-flex-align: end;
		        align-items: flex-end;
	}

	
	header nav#header-menu {
		display: block;
		text-align: right;
		margin-bottom: 43px;
		z-index: 4;
		background: none;
	}

	header nav#header-menu ul {
	padding: 0 15px 0 0;
	display: inline-block;
	background-color: white;
	}

	header div#page-title-container {
		display: none;
	}
}

/** end large screens header */


/* footer */

footer {
	border-top: 1px solid var(--line-separators-color);
	text-align: center;
	width: 97%;
	margin-top:47px;
	margin-left: auto;
	margin-right: auto;
}
footer div#footer-logo-container {
	text-align: center;
	margin-top:-37px;
	}

footer nav#footer-menu {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 10px;
	}

footer div#footer-contact-information, footer nav#footer-menu {
	border-bottom: 1px solid var(--line-separators-color);
	padding-bottom: 10px;
	margin-bottom: 10px;
}

footer div#footer-legal {
	color: var(--light-text-color);
}

footer a:link {
	text-decoration: underline;
}


/** large screens footer */

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

	footer nav#footer-menu {
	display:none;
	}
}

/** end large screens footer */



/* end footer*/


/* home */



.home header #page-title-container {
	display: none;
}

.home div#logo-container {
	border: none;
}


.home section#main-content-area {
	width: 300px;
	margin:0 auto;
}

/* end home */

/** large screens home */

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


	.home section#main-content-area {
	width: auto;
	margin:auto;
	padding: 15px 30px 15px 15px;
	display: -ms-grid;
	display: grid;
	-ms-grid-rows: auto;
	-ms-grid-columns: 180px 30px auto;
	    grid-template: "sidebar content-area" / 180px auto ;
	grid-column-gap:30px;
	}

	.home section#main-content-area img#me {
		-ms-grid-row: 1;
		-ms-grid-column: 1;
		grid-area: sidebar;
	}

	.home section#main-content-area div#main-content {
		-ms-grid-row: 1;
		-ms-grid-column: 3;
		grid-area: content-area;
	}

	.home section#main-content-area div#main-content div#first-block {
		position: relative;
		z-index: 100;
	}

	.home section#main-content-area div#main-content div#second-block {
		position: relative;
	}

	.home section#main-content-area div#main-content div#second-block h2{
		position: relative;
		z-index: 100;
	}

	
	.home section#main-content-area div#second-block p.focus {
		padding:0 30px;
	}

}

@media screen and (min-width: 600px) and (max-width: 960px) {
	
}

@media screen and (min-width: 600px) and (max-width: 700px) {
	
}

/*** large screen home retina ***/

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

	
}

/*** end large screen home retina ***/

/** end large screens home */

/** portfolio pages **/

.portfolio section#main-content-area {
	margin:0 0 57px 0;
}

.portfolio section#main-content-area a, .portfolio section#main-content-area a:link {
	text-decoration: none;
}

.portfolio section#main-content-area h2 {
	text-align: center;
	margin-bottom:0;
}

.portfolio section#main-content-area article.portfolio-item {
	text-align: center;
	margin-bottom: 30px;
}

.portfolio section#main-content-area article.portfolio-item a {
    
    font-weight: normal;
    color:inherit;
}

.portfolio section#main-content-area article.portfolio-item a:hover {
    text-decoration: none;
}

.portfolio section#main-content-area article.portfolio-item img {
	width: 100%;
	max-width: 375px;
	margin:0 auto;
	display: block;
	border-bottom: 1px solid var(--line-separators-color);
}

.portfolio section#main-content-area article.portfolio-item h3 {
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
	margin-top: 7px
}

.portfolio section#main-content-area a article.portfolio-item.featured {
		font-weight: normal;
		color: var(--almost-black);
	}

.portfolio section#main-content-area a:hover {
		text-decoration: none;
	}

.portfolio section#main-content-area article.portfolio-item p {
    line-height: 1.2em;
}

.portfolio section#main-content-area article.portfolio-item.featured div.portfolio-item-triptych {
		display: none;
	}

.portfolio section#main-content-area article.portfolio-item.featured div.portfolio-item-triptych img {
		border: none;
		width: 100%;
		max-width: none;
	}

/** end portfolio pages **/

/** large screens portfolio pages */

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

	/*** featured portfolio article ***/

	.portfolio section#main-content-area article.portfolio-item.featured {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 49% 20px 49%;
		grid-template-columns: repeat(2, 49%);
		grid-column-gap: 20px;
		margin:30px 30px 30px 20px;
		text-align: left;
		align-items: start;
	}

	.portfolio section#main-content-area article.portfolio-item.featured img {
	max-width: 515px;
	margin:0;
	border: none;
	display: inline;
	width:100%;
	}

	.portfolio section#main-content-area article.portfolio-item.featured div.portfolio-item-description {
		padding: 0 0 0 0;
	}

	.portfolio section#main-content-area article.portfolio-item.featured div.portfolio-item-description p {
		margin: 0 0 0.6	em 0;
	}
	.portfolio section#main-content-area h2 {
		margin-bottom:0.3em;
	}

	.portfolio section#main-content-area article.portfolio-item.featured div.portfolio-item-description h3 {
  	  margin-bottom: 17px;
	}

	.portfolio section#main-content-area article.portfolio-item.featured div.portfolio-item-description p {
  	  line-height: inherit;
	}

	/*** end featured article ***/

	.portfolio section#main-content-area div#portfolio-general-articles {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 1fr 20px 1fr;
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 20px;
  		grid-row-gap: 20px	;
		margin:30px 30px 10px 20px;
	}

	.portfolio section#main-content-area div#portfolio-general-articles article.portfolio-item {
	text-align:left;
	margin-bottom:0;
	}

	.portfolio section#main-content-area div#portfolio-general-articles article.portfolio-item img {
	max-width: none;
	margin:0;
	border: 1px solid var(--line-separators-color);
	display: inline;
	}

	.portfolio section#main-content-area div#portfolio-general-articles article.portfolio-item div.portfolio-item-description {
		padding: 5px;
	}
	
}

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

	.portfolio section#main-content-area article.portfolio-item.featured div.portfolio-item-triptych {
		display: block;
	}

}

/** end large screens portfolio pages */


/** prestations page */

.prestations section#main-content-area div.box p {
		
		margin: 0 0 0.5em 0;
	}

.prestations section#main-content-area div.box h2 {
		font-size:145px;
		margin: 0;
		text-align: center;
	}

.prestations section#main-content-area div#id-box h2 {
		font-size:98px;
	}


.prestations section#main-content-area div.box div.box-content ul li h3 {
		font-size:36px;
		text-transform: uppercase;
		font-family: var(--bold-titles),"Helvetica Neue","Helvetica","Arial",sans-serif;
		line-height: 1.7em;
		margin: 0;
	}
.prestations section#main-content-area div#web-box.box div.box-content ul li h3 {
		line-height: 1.3em;
	}

.prestations section#main-content-area div#blurbs-box h2 {
    	font-size:48px;
    	text-align: left;
    	margin-bottom: 7px;
	}

.prestations section#main-content-area div#blurbs-box p+h2 {
    	margin-top:24px;
	}

@media screen and (max-width: 599px) {
	.prestations section#main-content-area div.box {
		width: auto;
		border-top:23px solid #ddd;
		padding:0 15px 0 15px;
		background: #fff;
		position: relative;
		margin-bottom: 35px;
	}

	.prestations section#main-content-area nav.subnav {
		display: block;
		margin:0 auto 9px auto;
		width: 100%;
		text-align: center;	
	}

	.prestations section#main-content-area nav.subnav ul {
		
	}

	.prestations section#main-content-area nav.subnav ul li {
		display: inline-block;
		padding:0 0.5em;
		text-transform: uppercase;
		border-right: 1px solid var(--line-separators-color);
	}

	.prestations section#main-content-area nav.subnav ul li:last-child {
		border-right: none;
	}

	.prestations section#main-content-area nav.subnav ul li a {
		font-weight: 900;
	}


	.prestations section#main-content-area nav.subnav ul li a:hover {
		text-decoration: none;
	}

	.prestations section#main-content-area div#blurbs-box {
   	 border: none;
	}

	.prestations section#main-content-area div#blurbs-box h2 {
    	font-size:48px;
    	border-top:23px solid var(--line-separators-color);
    	padding: 7px 0 7px 0;
	}

}

/*** couleurs prestations ***/

	.prestations.colored section#main-content-area div#web-box {
		
		border-color: #61BCBE;
	}
	.prestations.colored section#main-content-area div#print-box {
		border-color: #EFA328;
		background-color:rgba(255, 255, 255, 0.5);
	}
	.prestations.colored section#main-content-area div#id-box {
		
		border-color: #ED5156;
	}
	.prestations.colored section#main-content-area div#web-box h2,.prestations.colored section#main-content-area div#web-box h3 {
		color:  #61BCBE;
		color:#278E99;
	}
	.prestations.colored section#main-content-area div#print-box h2, .prestations.colored section#main-content-area div#print-box h3 {
		color: #EFA328;
		color:#DF9722;
	}
	.prestations.colored section#main-content-area div#id-box h2, .prestations.colored section#main-content-area div#id-box h3 {
		color: #ED5156;
	}

/*** end couleurs prestations ***/

/** end prestations page */

/** medium screens prestations page */

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

	.prestations section#main-content-area nav.subnav {
		display: none;
	}

	.prestations section#main-content-area {
		margin: 40px 0 0 30px;
		position: relative;
		display: block;
	}

	.prestations section#main-content-area div.box {
		width: auto;
		float: left;
		border:6px solid #ddd;
		padding:0 15px 10px 15px;
		background: #fff;
		position: relative;
	}

	.prestations section#main-content-area div#web-box {
		max-width: 315px;
		z-index: 5;
		border-color: #61BCBE;
	}
	
	.prestations section#main-content-area div#print-box {
		max-width: 350px;
		margin-left:-50px;
		margin-top:-154px;
		text-align: center;
		z-index: 4;
		border-color: #EFA328;
	}

	.prestations section#main-content-area div#print-box div.box-content {
		padding:0 40px;
	}

	.prestations section#main-content-area div#id-box {
		max-width: 350px;
		margin-left: -50px;
		margin-top: 58px;
		text-align: center;
		z-index: 6;
		border-color: #ED5156;
	}
	
	.prestations section#main-content-area div#blurbs-box {
		max-width: 89%;
		border:none;
		/*padding:40px;*/
	}
}


@media screen and (min-width: 600px) and (max-width: 777px) {

	.prestations section#main-content-area {
		margin: 40px 0 0 15px;
	}

	.prestations section#main-content-area div#web-box {
		max-width: 260px;
		max-width: 43%;
	}
	
	.prestations section#main-content-area div#print-box {
		max-width: 250px;
		max-width: 43%;
		margin-top: -46px;
		margin-left: -23px;
		padding-bottom: 23px;
	}
	.prestations section#main-content-area div#id-box {
		max-width: 230px;
		max-width: 40%;
		margin-left: 9px;
		margin-top: -20px;
	}

	.prestations section#main-content-area div.box h2 {
		font-size:105px;
	}

	.prestations section#main-content-area div#id-box h2 {
		font-size:63px;
	}

	.prestations section#main-content-area div#print-box div.box-content {
		padding: 0 15px;
	}
	
	.prestations section#main-content-area div#print-box div.box-content ul li h3, .prestations section#main-content-area div#id-box div.box-content ul li h3 {
		line-height: 1.3em;
	}
	.prestations section#main-content-area div#print-box div.box-content ul li, .prestations section#main-content-area div#print-box div.box-content ul li h3 {
		display: inline;
	}
	
}

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

	.prestations section#main-content-area {
		margin-left:4%;
	}
}

@media screen and (min-width: 778px) and (max-width: 999px) {

	.prestations section#main-content-area {
		margin-left:7%;
	}


	.prestations section#main-content-area div#web-box {
		max-width: 280px;
	}
	
	.prestations section#main-content-area div#print-box {
		max-width: 310px;
		margin-top: -46px;
		margin-left: -23px;
		padding-bottom: 23px;
	}
	.prestations section#main-content-area div#id-box {
		max-width: 310px;
		margin-left: 9px;
		margin-top: -20px;
	}

	.prestations section#main-content-area div.box h2 {
		font-size:125px;
	}

	.prestations section#main-content-area div#id-box h2 {
		font-size:83px;
	}

	.prestations section#main-content-area div#print-box div.box-content {
		padding: 0 15px;
	}
	
	.prestations section#main-content-area div#print-box div.box-content ul li h3, .prestations section#main-content-area div#id-box div.box-content ul li h3 {
		line-height: 1.3em;
	}
	.prestations section#main-content-area div#print-box div.box-content ul li, .prestations section#main-content-area div#print-box div.box-content ul li h3 {
		display: inline;
	}
	.prestations section#main-content-area div#blurbs-box {
		/*max-width: 69%;*/
	}
	
}

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

	.prestations section#main-content-area div#web-box {
		max-width: 280px;
	}
	
	.prestations section#main-content-area div#print-box {
		max-width: 310px;
	}
	.prestations section#main-content-area div#id-box {
		max-width: 310px;
	}
	
	.prestations section#main-content-area div.box h2 {
		font-size:125px;
	}

	.prestations section#main-content-area div#id-box h2 {
		font-size:83px;
	}
	.prestations section#main-content-area div#blurbs-box {
		max-width: 51%;
		padding:60px;
	}
	
}

/** end medium screens prestations page */

/** large screens prestations page */

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


	.prestations section#main-content-area div.box {
		padding:0 15px 10px 15px;
		background: #fff;
	}

	.prestations section#main-content-area div#web-box {
		z-index: 5;
	}
	
	.prestations section#main-content-area div#print-box {
		
		margin-left:-50px;
		margin-top:-154px;
		z-index: 4;
	}
	.prestations section#main-content-area div#id-box {
		
		margin-left: -50px;
		margin-top: 58px;
		z-index: 6;
	}
	.prestations section#main-content-area div#blurbs-box {
		max-width: 54%;
		padding:60px;
	}
	
	
}

/** end large screens prestations page */