@charset "UTF-8";


/* ◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉  RESUME PAGE  ◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉ */

#bio { 
	overflow-y:auto; 
	/*padding-bottom:25em*/
}
#inner { padding-bottom:20em }

/* ============================= ▶ Line divider ▶ ============================= */
div.content.color-3 + div > div#divider:before { 
	position:absolute; top:0px; left:50%;
	width:2px; height:75%;
	background:#bf945d;
	margin-left:-8px;
	content:''; 
	z-index:99
}
.row.title div:after {
	position:absolute;
	font-size:2em; font-family:'EntypoRegular'; color:#bf945d; line-height:0.7;
	text-shadow:none
}
.row.title div.left:after {
	right:50%;
	content:'f';
	-webkit-transform:scaleX(-1);
		 -moz-transform:scaleX(-1);
			 -o-transform:scaleX(-1);
					transform:scaleX(-1);
}
.row.title div.right:after {
	left:50%;
	content:'f';
}
/* ============================= ◀ Line divider ◀ ============================= */


/* ============================= ▶ Section title ▶ ============================= */
.row.title { 
	font-family:'Abel-Regular'; font-size:3em; color:white; line-height:normal;
	text-shadow:0px 1px 0px rgba(0,0,0,0.7);
	height:1.1em;
	margin:3em 0 1.2em;
	width:100%;
}
.row[class*="ss-"]:first-child > div.title { margin:0em 0 1.2em }
.row.title div.left {text-align:right;}
.row.title div.right {text-align:left;}
.row:not(.title) { }
.row.title div { padding:0 1.5em }
/* ============================= ◀ Section title ◀ ============================= */


.row { overflow:hidden }
.row[class*="ss-"] { margin:1.5em 0 }
.row > div { width:50% }
.row.ss-small { min-height:10em }
.row.ss-medium { min-height:18em } 
.row.ss-large { min-height:26em }

.row.ss-small div.text { min-height:10em }
.row.ss-medium div.text { min-height:18em } 
.row.ss-large div.text { min-height:26em }

div.left { float:left }
div.right { float:right }
div.left.box div a { float:right; margin-left:2%; margin-bottom:1em }
div.right.box div a { float:left; margin-bottom:1em }

.text { 
	position:relative;
	background-color:#654d31;
	font-family:'Abel-Regular'; color:white; line-height:normal; text-align:left;
	max-width:50%; height:100%;
	overflow:hidden
}
.job_title h1 {
	font-family: 'Novecentowide'; color:#f6b861; font-size:2em;
	padding:10% 1em 5%
}
.job_title h1 small { font-size:0.75em }
.job_title h2 {
	font-size:1.5em; color:#f6b861; text-align:center; line-height:normal;
	font-family:'Abel-Regular'; font-weight:300;
	text-shadow:0 1px 0px rgba(0,0,0,0.8);
	margin: 0 0 20px 0;
}

.job_title { 
	width:auto; height:100%;
	float:left;
	background-color:#533f2b;
	padding-bottom:1000px; margin-bottom:-1000px;
}
.job_description { 
	width:auto; height:100%;
	display:table
}
.job_description p { 
	padding:5% 1.5em;
	line-height:1.5;
	display:table-cell;
	vertical-align:middle;
	font-size:1.7em !important
}
.job_description i {font-style:normal;color:#f6b861}
.job_description ul {
	list-style-type:none;
	font-size:1.5em;
	display:table-row;
	margin-left:4em
}
.job_description li { padding-left:3em }
.job_description ul li:before {
	content:'W';
	font-family:'EntypoRegular'; color:#f6b861;
	padding-right:0.5em
}
.row.ss-large .job_description { display:block }

.box { position:relative }


/* ============================= ▶ Circle ▶ ============================= */
.ss-circle { 
	border-radius:50%;
	margin:0 10em;
	position:static;
	display:block;
	-webkit-box-shadow: 
		0px 2px 5px rgba(0,0,0,0.7) inset, 
		0px 0px 0px 1em rgba(61,64,85,0.3);
	-moz-box-shadow: 
		0px 2px 5px rgba(0,0,0,0.7) inset, 
		0px 0px 0px 1em rgba(61,64,85,0.3);
	box-shadow: 
		0px 2px 5px rgba(0,0,0,0.7) inset, 
		0px 0px 0px 1em rgba(61,64,85,0.3);
	background-size:cover; background-color:#f0f0f0; background-repeat:no-repeat; background-position:center center;
}
.ss-small div div a {width:10em; height:10em}
.ss-medium div div a {width:18em; height:18em}
.ss-large div div a {width:26em; height:26em}
/* ============================= ◀ Circle ◀ ============================= */


/* ============================= ▶ Triangle ▶ ============================= */
.box .cip:after {
	width:0px; height:0px;
	content: ' ';
	position:absolute; top:45%;
	border-top:10px solid transparent; border-bottom:10px solid transparent;
}
.left.box .cip:after {
	border-right:10px solid #bf945d;
	right:0;
}
.right.box .cip:after {
	border-left:10px solid #bf945d;
	left:0px;
}
/* ============================= ◀ Triangle ◀ ============================= */


/* ============================= ▶ Dotted line ▶ ============================= */
.ss-circle-deco:before {
	width:9em; height:0px;
	border-bottom:0.5em dotted #bf945d;
	position:absolute; top:45%; right:0;
	content: '';
	margin-top:0.8em;
}
.left.box .cip:before { margin-left:1em }
.right.box .cip:before { left:0 }
/* ============================= ◀ Dotted line ◀ ============================= */


/* ============================= ▶ Background images for circle ▶ ============================= */
.ss-circle-1 { background-image:url(../images/r_magic.jpg) }
.ss-circle-2 { background-image:url(../images/r_parietti.jpg) }
.ss-circle-3 { background-image:url(../images/r_filmaster.jpg) }
.ss-circle-4 { background-image:url(../images/r_quickwedding.jpg) }
.ss-circle-5 { background-image:url(../images/r_stratelibri.jpg) }
.ss-circle-6 { background-image:url(../images/r_ifaf.jpg) }
.ss-circle-7 { background-image:url(../images/r_newpeopleteam.jpg) }
.ss-circle-8 { background-image:url(../images/r_myparfum.jpg) }
.ss-circle-9 { background-image:url(../images/r_b1group.jpg) }
.ss-circle-0 { background-image:url(../images/skills-ai-logo.jpg) }

/* ============================= ◀ Background images for circle ◀ ============================= */

/* ◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉  RESUME PAGE  ◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉ */



/* ◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉  BIOGRAPHY PAGE  ◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉ */

section#story h1 { 
	font-family:'Abel-Regular'; font-size:6em;
	margin-bottom:0.6em
}
section#story p {
	font-family:'Abel-Regular'; font-size:2em;
	margin:1.5em 12em
}

/* ◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉  BIOGRAPHY PAGE  ◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉ */



/* ◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉  SKILLS PAGE  ◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉ */

.clicked {
	opacity:1 !important;
	-webkit-transform:scale(1) rotate(0deg) !important;
		 -moz-transform:scale(1) rotate(0deg) !important;
			 -o-transform:scale(1) rotate(0deg) !important;
			-ms-transform:scale(1) rotate(0deg) !important;
					transform:scale(1) rotate(0deg) !important;
	-webkit-transition:-webkit-transform 0.4s linear ;
		 -moz-transition:-moz-transform 0.4s linear;
			 -o-transition:-o-transform 0.4s linear;
			-ms-transition:-ms-transform 0.4s linear;
					transition:transform 0.4s linear;
}
.concealed {
	opacity:0 !important;
	top:-1000px !important;
	height:0;
	visibility:hidden
}
.revealed {
	opacity:1 !important;
	top:9em !important;
	visibility:visible !important;
}
#cn-container {
	margin:auto;
	text-align:center;
}

/* ============================= ▶ Back arrow ▶ ============================= */
.cn-back {
	position:absolute; top:800px; left:20px; right:0; margin:auto;
	cursor:pointer;
	opacity:1;
	font-family:'Abel-Regular'; font-size:3em; text-transform:uppercase;
	/*text-shadow:0 1px 1px rgba(0,0,0,0.6);*/
	-webkit-transition:all 2.4s ease-in-out 1s;
		 -moz-transition:all 0.4s ease-in-out 1s;
	     -o-transition:all 0.4s ease-in-out 1s;
			-ms-transition:all 0.4s ease-in-out 1s;
					transition:all 2.4s ease-in-out 1s;
}
.cn-back:before {
	content:'e';
	font-family: 'spotlight5'; text-transform:none; font-size:0.8em;
	padding-right:0.3em
}
a.cn-back:link, a.cn-back:visited {color:white; text-decoration:none}
.cn-back.clicked {
	top:-25px !important;
	-webkit-transition:top 2.4s linear;
		 -moz-transition:top 0.4s linear;
			 -o-transition:top 0.4s linear;
			-ms-transition:top 0.4s linear;
					transition:top 2.4s linear;
}
/* ============================= ◀ Back arrow ◀ ============================= */


/* ============================= ▶ Headline ▶ ============================= */
h2.skills_headline {
	opacity:0;
	width:80%;
	margin:auto;
	font-family:'Novecentowide'; color:white; font-size:4em; font-style:normal; font-weight:normal;
	position:relative; top:10em; z-index:10000;
	-webkit-transition:all 1s linear 0.7s;
		 -moz-transition:all 1s linear 0.7s;
			 -o-transition:all 1s linear 0.7s;
			-ms-transition:all 1s linear 0.7s;
					transition:all 1s linear 0.7s;
	-webkit-font-smoothing:subpixel-antialiased;
}
h2.skills_headline.clicked { top:0 !important }
/* ============================= ◀ Headline ◀ ============================= */


/* ============================= ▶ 1:Skills categories ▶ ============================= */
#s1-container { position:relative; top:60px }
.s1-left, .s2-left {
	width:50%;
	float:left;
}
.s1-right, .s2-right {
	width:50%;
	float:right;
}
.s1-left div, .s1-right div {
	height:5em; width:35em;
	font-size:1.8em;
	margin:2em;
	box-shadow:0 0 0 8px #fff, 9px 9px 3px rgba(0,0,0,0.5);
}
div.clicked a {
	display:block;
	position:relative; top:-5em;
	text-decoration:none
}
.s1-left div h1, .s1-right div h1 {
	font-family:'Novecentowide';
	color:white; font-size:3em; font-style:normal; font-weight:normal; line-height:2; text-align:left;
	text-shadow:0 1px 1px rgba(0,0,0,0.6);
	position:relative; top:-100%;
	padding-left:1.8em;
	-webkit-font-smoothing:subpixel-antialiased
}
.s1-left div {
	float:right;
	-webkit-transform:scale(0) rotate(36deg);
		 -moz-transform:scale(0) rotate(36deg);
			 -o-transform:scale(0) rotate(36deg);
			-ms-transform:scale(0) rotate(36deg);
					transform:scale(0) rotate(36deg);
}
.s1-right div {
	float:left;
	-webkit-transform:scale(0) rotate(-36deg);
		 -moz-transform:scale(0) rotate(-36deg);
			 -o-transform:scale(0) rotate(-36deg);
			-ms-transform:scale(0) rotate(-36deg);
					transform:scale(0) rotate(-36deg);
}
.s1-left div:nth-child(1) { background-color:#61c1fc }
.s1-left div:nth-child(2) { 
	background-color:#f27438;
	-webkit-transition-delay:0.3s;
		 -moz-transition-delay:0.3s;
			 -o-transition-delay:0.3s;
			-ms-transition-delay:0.3s;
}
.s1-left div:nth-child(3) { 
	background-color:#835dcc;
	-webkit-transition-delay:0.6s;
		 -moz-transition-delay:0.6s;
			 -o-transition-delay:0.6s;
			-ms-transition-delay:0.6s;
					transition-delay:0.6s;
}
.s1-right div:nth-child(1) { background-color:#65c2a9 }
.s1-right div:nth-child(2) { 
	background-color:#e9a637;
	-webkit-transition-delay:0.3s;
		 -moz-transition-delay:0.3s;
			 -o-transition-delay:0.3s;
			-ms-transition-delay:0.3s;
}
.s1-right div:nth-child(3) { 
	background-color:#ce5c5c;
	-webkit-transition-delay:0.6s;
		 -moz-transition-delay:0.6s;
			 -o-transition-delay:0.6s;
			-ms-transition-delay:0.6s;
					transition-delay:0.6s;
}
/* ============================= ◀ 1:Skills categories ◀ ============================= */


/* ============================= ▶ 1:Icon (before) ▶ ============================= */
.s1-left div:before, .s1-right div:before {
	content:'';
	height:5em; width:5em;
	display:block;
	background:url(images/icon-css.jpg); background-size:cover;
	-webkit-transform:scale(0) rotate(-90deg) !important;
		 -moz-transform:scale(0) rotate(-90deg) !important;
			 -o-transform:scale(0) rotate(-90deg) !important;
			-ms-transform:scale(0) rotate(-90deg) !important;
					transform:scale(0) rotate(-90deg) !important;
	-webkit-transform-origin:100% 100% !important;  
		 -moz-transform-origin:100% 100% !important;  
			 -o-transform-origin:100% 100% !important;  
			-ms-transform-origin:100% 100% !important;  
					transform-origin:100% 100% !important;
	-webkit-transition:all 1s linear;
		 -moz-transition:all 1s linear;
			 -o-transition:all 1s linear;
			-ms-transition:all 1s linear;
					transition:all 1s linear;
}

.s1-left div.clicked:before, .s1-right div.clicked:before {
	-webkit-transform:scale(1) rotate(-0) !important;
		 -moz-transform:scale(1) rotate(-0) !important;
			 -o-transform:scale(1) rotate(-0) !important;
			-ms-transform:scale(1) rotate(-0) !important;
					transform:scale(1) rotate(-0) !important;
}
.s1-left div.clicked:nth-child(2):before {
	-webkit-transition-delay:0.2s !important;
		 -moz-transition-delay:0.2s !important;
			 -o-transition-delay:0.2s !important;
			-ms-transition-delay:0.2s !important;
					transition-delay:0.2s !important;
}
.s1-left div.clicked:nth-child(3):before {
	-webkit-transition-delay:0.4s !important;
		 -moz-transition-delay:0.4s !important;
			 -o-transition-delay:0.4s !important;
			-ms-transition-delay:0.4s !important;
					transition-delay:0.4s !important;
}
.s1-right div.clicked:nth-child(2):before {
	-webkit-transition-delay:0.5s !important;
		 -moz-transition-delay:0.5s !important;
			 -o-transition-delay:0.5s !important;
			-ms-transition-delay:0.5s !important;
					transition-delay:0.5s !important;
}
.s1-right div.clicked:nth-child(3):before {
	-webkit-transition-delay:0.7s !important;
		 -moz-transition-delay:0.7s !important;
			 -o-transition-delay:0.7s !important;
			-ms-transition-delay:0.7s !important;
					transition-delay:0.7s !important;
}
/* ============================= ◀ 1:Icon (before) ◀ ============================= */


/* ============================= ▶ 1:Hover (after) ▶ ============================= */
.s1-left div:after, .s1-right div:after {
	opacity:0;
	content:'';
	width:10%; height:5em;
	position:relative; right:-100%; top:-11em;
	display:block
}
.s1-left div:nth-child(1):after { background-color:#3ba4fb }
.s1-left div:nth-child(2):after { background-color:#ec4d1b }
.s1-left div:nth-child(3):after { background-color:#5b37b3 }
.s1-right div:nth-child(1):after { background-color:#3da385 }
.s1-right div:nth-child(2):after { background-color:#dd8219 }
.s1-right div:nth-child(3):after { background-color:#b73838 }
.s1-left div.s1_hover:after, .s1-right div.s1_hover:after {
	opacity:1;
	position:relative; right:-90%;
	-webkit-transition:opacity 1.2s linear, right 0.4s linear;
		 -moz-transition:opacity 1.2s linear, right 0.4s linear;
			 -o-transition:opacity 1.2s linear, right 0.4s linear;
			-ms-transition:opacity 1.2s linear, right 0.4s linear;
					transition:opacity 1.2s linear, right 0.4s linear;
}
/* ============================= ◀ 1:Hover (after) ◀ ============================= */


/* ============================= ▶ 2:Skills list ▶ ============================= */
section[id*=s2-] {
	opacity:0;
	position:absolute; top:-800px; left:0; right:0;
	margin:auto;
	height:0;
	visibility:hidden
}
#s2-css div div {background-color:#61c1fc; text-shadow:0 1px 0 #3ba4fb;}
#s2-jquery div div {background-color:#f27438; text-shadow:0 1px 0 #ec4d1b}
#s2-cms div div {background-color:#835dcc; text-shadow:0 1px 0 #5b37b3}
#s2-psd div div {background-color:#65c2a9; text-shadow:0 1px 0 #3da385}
#s2-ai div div {background-color:#e9a637; text-shadow:0 1px 0 #dd8219}
#s2-ind div div {background-color:#ce5c5c; text-shadow:0 1px 0 #b73838}
div.s2-left div, div.s2-right div {
	border-radius:1em;
	box-shadow:0 0 0 0.7em #fff, 0px 0.8em 3px rgba(0,0,0,0.4);
	width:40em; height:10em;
	clear:both;
	margin:3em 4em;
	position:relative;
}
div.s2-left div { 
	float:right;
	-webkit-transform:scale(0) rotate(36deg);
		 -moz-transform:scale(0) rotate(36deg);
			 -o-transform:scale(0) rotate(36deg);
			-ms-transform:scale(0) rotate(36deg);
					transform:scale(0) rotate(36deg); 
}
div.s2-right div {
	float:left;
	-webkit-transform:scale(0) rotate(-36deg);
		 -moz-transform:scale(0) rotate(-36deg);
			 -o-transform:scale(0) rotate(-36deg);
			-ms-transform:scale(0) rotate(-36deg);
					transform:scale(0) rotate(-36deg); 
}
.cat-skill article {
	height:10em; width:27.5em;
	display:table;
	position:absolute; right:1em
}
.cat-skill ul {
	font-family:'Abel-Regular'; font-size:1.8em; text-transform:uppercase; letter-spacing:1px; text-align:center;
	list-style:none;
	display:table-cell; 
	vertical-align:middle;
}
div.s2-left div:before, div.s2-right div:before {
	content:'';
	height:12em; width:12em;
	display:block;
	border-radius:50%;
	background-size:cover;
	position:absolute; right:30em; top:-1em;
	box-shadow:0 0 0 0.7em #fff;
}
#s2-css > div.s2-left div:nth-child(1):before { background-image:url(images/skills-css-transitions.jpg) }
#s2-css > div.s2-left div:nth-child(2):before { background-image:url(images/skills-css-fluid.jpg) }
#s2-css > div.s2-left div:nth-child(3):before { background-image:url(images/skills-css-cross.jpg) }
#s2-css > div.s2-right div:nth-child(1):before { background-image:url(images/skills-css-responsive.jpg) }
#s2-css > div.s2-right div:nth-child(2):before { background-image:url(images/skills-css-html5.jpg) }

#s2-jquery > div.s2-left div:nth-child(1):before { background-image:url(images/skills-jquery-DOM.jpg) }
#s2-jquery > div.s2-left div:nth-child(2):before { background-image:url(images/skills-jquery-classes.jpg) }
#s2-jquery > div.s2-right div:nth-child(1):before { background-image:url(images/skills-jquery-ajax.jpg) }
#s2-jquery > div.s2-right div:nth-child(2):before { background-image:url(images/skills-jquery-animations.jpg) }

#s2-cms > div.s2-left div:nth-child(1):before { background-image:url(images/skills-cms-custom_templates.jpg) }
#s2-cms > div.s2-left div:nth-child(2):before { background-image:url(images/skills-cms-php.jpg) }
#s2-cms > div.s2-right div:nth-child(1):before { background-image:url(images/skills-cms-custom_posts.jpg) }
#s2-cms > div.s2-right div:nth-child(2):before { background-image:url(images/skills-cms-codex.jpg) }

#s2-psd > div.s2-left div:nth-child(1):before { background-image:url(images/skills-psd-smart_objects.jpg) }
#s2-psd > div.s2-left div:nth-child(2):before { background-image:url(images/skills-psd-web_templates.jpg) }
#s2-psd > div.s2-left div:nth-child(3):before { background-image:url(images/skills-psd-photomanipulation.jpg) }
#s2-psd > div.s2-right div:nth-child(1):before { background-image:url(images/skills-psd-ux_design.jpg) }
#s2-psd > div.s2-right div:nth-child(2):before { background-image:url(images/skills-psd-codeinmind.jpg) }
#s2-psd > div.s2-right div:nth-child(3):before { background-image:url(images/skills-psd-experience.jpg) }

#s2-ai > div.s2-left div:nth-child(1):before { background-image:url(images/skills-ai-logo.jpg) }
#s2-ai > div.s2-left div:nth-child(2):before { background-image:url(images/skills-ai-infographic.jpg) }
#s2-ai > div.s2-right div:nth-child(1):before { background-image:url(images/skills-ai-tech.jpg) }
#s2-ai > div.s2-right div:nth-child(2):before { background-image:url(images/skills-ai-3dtext.jpg) }

#s2-ind > div.s2-left div:nth-child(1):before { background-image:url(images/skills-idn-magazine_creation.jpg) }
#s2-ind > div.s2-left div:nth-child(2):before { background-image:url(images/skills-idn-stylesheets.jpg) }
#s2-ind > div.s2-left div:nth-child(3):before { background-image:url(images/skills-idn-animated_presentation.jpg) }
#s2-ind > div.s2-right div:nth-child(1):before { background-image:url(images/skills-idn-preflight.gif) }
#s2-ind > div.s2-right div:nth-child(2):before { background-image:url(images/skills-idn-data_import.jpg) }
#s2-ind > div.s2-right div:nth-child(3):before { background-image:url(images/skills-idn-typography.jpg) }
/* ============================= ◀ 2:Skills list ◀ ============================= */

/* ◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉  SKILLS PAGE  ◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉ */