@charset "UTF-8";


@font-face {
	font-family: 'Novecentowide';
	src: url('../font/novecentowide-book-webfont.eot');
	src: url('../font/novecentowide-book-webfont.eot?#iefix') format('embedded-opentype'),
			 url('../font/novecentowide-book-webfont.woff') format('woff'),
			 url('../font/novecentowide-book-webfont.ttf') format('truetype'),
			 url('../font/novecentowide-book-webfont.svg#NovecentowideBook') format('svg');
	font-weight:normal;
	font-style:normal;
}
@font-face {
	font-family: 'spotlight5';
	src:url('../font/spotlight5.eot');
	src:url('../font/spotlight5.eot?#iefix') format('embedded-opentype'),
			url('../font/spotlight5.woff') format('woff'),
			url('../font/spotlight5.ttf') format('truetype'),
			url('../font/spotlight5.svg#spotlight5') format('svg');
	font-weight:normal;
	font-style:normal;
}
@font-face {
  font-family: 'Abel-Regular';
  src: url('../font/Abel-Regular.eot');
  src: url('../font/Abel-Regular.eot?#iefix') format('embedded-opentype'),
       url('../font/Abel-Regular.woff') format('woff'),
       url('../font/Abel-Regular.ttf') format('truetype'),
       url('../font/Abel-Regular.svg#Abel-Regular') format('svg');
	font-weight:normal;
	font-style:normal;
}
@font-face {
	font-family: 'EntypoRegular';
	src: url('../font/Entypo-webfont.eot');
	src: url('../font/Entypo-webfont.eot?#iefix') format('embedded-opentype'),
			 url('../font/Entypo-webfont.woff') format('woff'),
			 url('../font/Entypo-webfont.ttf') format('truetype'),
			 url('../font/Entypo-webfont.svg#EntypoRegular') format('svg');
	font-weight:normal;
	font-style:normal;
}
@font-face {
	font-family: 'icomoon';
	src:url('../font/icomoon.eot');
	src:url('../font/icomoon.eot?#iefix') format('embedded-opentype'),
		url('../font/icomoon.woff') format('woff'),
		url('../font/icomoon.ttf') format('truetype'),
		url('../font/icomoon.svg#icomoon') format('svg');
	font-weight:normal;
	font-style:normal;
}

[data-icon]:before {
	font-family: 'spotlight5';
	content:attr(data-icon);
	padding-right:5px;
	font-weight:normal; font-variant:normal; text-transform:none; line-height:1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


/* ============================= ▶ Reset ▶ ============================= */
ul, ol, dl,h1, h2, h3, h4, h5, h6, p {padding:0; margin:0}
a img { border:none }
a:link {color:#414958; text-decoration:underline}
a:visited {color:#4E5869; text-decoration:underline}
a:hover, a:active, a:focus { text-decoration:none }
* { box-sizing:border-box; -moz-box-sizing:border-box }
/* ============================= ◀ Reset ◀ ============================= */


/* ============================= ▶ Layout ▶ ============================= */
body, html { height:100% }
body {
	color:white;
	margin:0; padding:0;
}
header {
	text-align:center;
	position:absolute; top:0;
	height:16em; width:100%;
}
[class^=color-] {
	-webkit-transition: all 0.5s linear;
		 -moz-transition: all 0.5s linear;
				  transition: all 0.5s linear;
}
.color-0 { background-color:#e6616b }
.color-1 { background-color:#b46279 }
.color-2 { background-color:#608cb3 }
.color-3 { background-color:#f6b861 }

.color-0-a { background-color:rgba(230,97,107,0.6) }
.color-1-a { background-color:rgba(180,98,121,0.6) }
.color-2-a { background-color:rgba(96,140,179,0.6) }
.color-3-a { background-color:rgba(246,194,87,0.6) }

footer {
	position:absolute; bottom:0;
	width:100%; height:8em;
	text-align:center;
}
.container {
	width:100%; min-height:100%;
	/*min-width:768px;*/
	margin:0 auto;
	background: #3be3cc;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxMCUiIHN0b3AtY29sb3I9IiMzYmUzY2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMzNiOGJkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
	background: -moz-linear-gradient(top,  #3be3cc 10%, #33b8bd 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,#3be3cc), color-stop(100%,#33b8bd));
	background: -webkit-linear-gradient(top,  #3be3cc 10%,#33b8bd 100%);
	background: -o-linear-gradient(top,  #3be3cc 10%,#33b8bd 100%);
	background: -ms-linear-gradient(top,  #3be3cc 10%,#33b8bd 100%);
	background: linear-gradient(to bottom,  #3be3cc 10%,#33b8bd 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3be3cc', endColorstr='#33b8bd',GradientType=0 );
	position:relative;
	overflow:hidden
}
.content {
	position:absolute; top:16em; bottom:8em;
	width:100%;
	overflow-y:auto
}
/* ============================= ◀ Layout ◀ ============================= */


/* ============================= ▶ Header ▶ ============================= */
#logo {font-family: 'Abel-Regular'; font-size:7em}
#logo > span { font-size:0.7em }
#claim {font-family: 'Novecentowide'; font-size:2.3em}
.phone, .email {
	width:12em; height:12em;
	position:absolute; top:0;
}
.phone { left:4.2% }
.email { right:4% }
.phone:before, .email:before {
	font-size:8em; line-height:normal;
  margin:auto; padding:0;
  position: absolute; top:0; left:0; bottom:0; right:0;
}
div.phone a, div.email a {
	display:block;
	width:100%; height:100%;
	position:absolute;
	z-index:2
}
.bk_home:link, .bk_home:hover, .bk_home:visited {color:#FFF; text-decoration:none}
/* ============================= ◀ Header ◀ ============================= */


/* ============================= ▶ Footer ▶ ============================= */
address {
	display:inline-block;
	font-family: 'Novecentowide'; font-style:normal; font-size:2em;
	padding:0 1.2em; margin:1em 0
}
.myadress:before, .mycountry:before {position:relative; top:4px; line-height:2}
.myname { text-shadow:1px 1px #1d686a }
/* ============================= ◀ Footer ◀ ============================= */


/* ============================= ▶ Float ▶ ============================= */
.fltrt {
	float:right;
	margin-left:8px;
}
.fltlft {
	float:left;
	margin-right:8px;
}
.clearfloat {
	clear:both;
	height:0;
	font-size:1px; line-height:0px;
}
/* ============================= ◀ Float ◀ ============================= */


/* ============================= ▶ Navigation ▶ ============================= */
nav {
	width:89%; height:100%;
	margin:auto;
}
nav > section {
	width:50%; height:50%;
	position:relative;
	text-align:center; line-height:100%;
	overflow:hidden;
	/*padding:0 20px 0 10px;*/
	-webkit-box-sizing:border-box;
		 -moz-box-sizing:border-box;
					box-sizing:border-box;
}
nav > section img {
	max-width:100%;
	opacity:1;
}
nav > section a:link, nav > section a:hover, nav > section a:visited { display:block }

div[class^="arrow_"] {
	font-family: 'spotlight5'; font-size:6em;
	font-weight:normal; font-variant:normal; text-transform:none; line-height:inherit;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	width:20%; height:1em;
	position:absolute; top:50%;
	-webkit-transform:translateY(-50%);
			-ms-transform:translateY(-50%);
					transform:translateY(-50%);
	z-index:10;
	opacity:0;
	cursor:pointer
}
.arrow_web, .arrow_art { right:0.5em }
.arrow_dtp, .arrow_resume { left:0.5em }

nav > section:nth-child(1) { float:left }
nav > section:nth-child(2) { float:right }
nav > section:nth-child(3) { float:left }
nav > section:nth-child(4) { float:right }
/* ============================= ◀ Navigation ◀ ============================= */


/* ============================= ▶ Display page ▶ ============================= */
.bl-icon {
	cursor:pointer;
	margin-bottom:3em;
	height:100%
}
.bl-icon:before {
	display:block;
	font-size:4em;
	/*margin-bottom:10px;*/
}
.bl-icon img {
	opacity:0.1;
	position:absolute; top:0; bottom:0; left:0; right:0;
	margin:auto
}
.layout_container > section .client_closure {
	position:absolute; top:20px; right:8em;
	cursor:pointer;
	z-index:100;
	opacity:0;
	pointer-events:none;
}
.client_closure:before {
	font-family: 'icomoon';
	content:"\e005"
}
.skill_area-box {
	position:relative;
	width:100%; height:100%;
	cursor:pointer;
	opacity:1;
}
.client_area,
div.bl-panel-items > div > div {
	opacity:0;
	pointer-events:none;
	position:absolute; top:0; /*left:30px; right:30px;*/ left:0; right:0; bottom:30px; /* ••••••••••• ATTENZIONE ••••••••••• */
	padding:0 20px;
	overflow:hidden;
	/*overflow-y:auto;*/    /* Scroll disabled */
}
.client_area p {
	margin:0 auto;
	padding-bottom:15px;
	font-size:1.7em; line-height:1.8;
}
.client_area h2 {
	font-size:3em; font-weight:300; line-height:normal; font-family: 'Abel-Regular'; text-shadow:0 1px 0px rgba(0,0,0,0.8);
	margin:0 0 20px 0;
}
.client_area article { padding:20px 40px 20px 0px }
.client_area article h3 {
	font-size:1.4em; font-weight:700; letter-spacing:2px;
	margin:0 0 10px 0; padding-top:20px;
}
.client_area article a { color:rgba(0,0,0,0.2) }
.client_area > ul {
	list-style:none;
	padding:0; margin:0;
}
.client_area > ul li {
	display:inline-block;
	width:26%;
	margin:0.5% 1.6%;
	position:relative /* marylou */
}
.client_area > ul li a {
	display:block;
	padding:0;
	border:0.8em solid rgba(0,0,0,0.1);
	margin:0 -0.8em
}
.client_area > ul li a img {
	display:block;
	max-width:100%;
}

#layout_container {
	position:absolute; left:5%; right:5%;
	overflow:hidden;
	width:90%; height:100%
}
#layout_container > section {width:50%; height:50%;}
.layout_container > section {
	-webkit-transition: all 0.5s ease-in-out;
		 -moz-transition: all 0.5s ease-in-out;
					transition: all 0.5s ease-in-out;
}
.layout_container > section:nth-child(1) {
	position:absolute; left:0; top:0;
	background:#e6616b;
}
.layout_container > section:nth-child(2) {
	position:absolute; right:0; top:0;
	background:#b46279;
}
.layout_container > section:nth-child(3) {
	position:absolute; left:0; bottom:0;
	background:#608cb3;
}
.layout_container > section:nth-child(4) {
	position:absolute; right:0; bottom:0;
	background:#f6b861;
}
.layout_container > section.bl-expand {
	width:100% !important; height:100% !important;
	float:none
}

.layout_container.bl-expand-item > section:not(.bl-expand),
.layout_container.bl-expand-item > section.bl-scale-down {
	-webkit-transform: scale(0.5);
		 -moz-transform: scale(0.5);
			-ms-transform: scale(0.5);
					transform: scale(0.5);
	opacity:0;
	z-index:90;
}
.layout_container > section.bl-expand-top { z-index:100; }
.skill_area-box {
	-webkit-transition: opacity 0.2s linear 0.5s;
		 -moz-transition: opacity 0.2s linear 0.5s;
					transition: opacity 0.2s linear 0.5s;
}
section.bl-expand .skill_area-box {
	opacity: 0;
	-webkit-transition: opacity 0s linear;
		 -moz-transition: opacity 0s linear;
					transition: opacity 0s linear;
}
.skill_area-box h2 {
	-webkit-transition: all 0.2s ease-in-out;
		 -moz-transition: all 0.2s ease-in-out;
					transition: all 0.2s ease-in-out;
}
.client_area,
.client_closure {
	-webkit-transition: opacity 0.1s linear 0s;
		 -moz-transition: opacity 0.1s linear 0s;
					transition: opacity 0.1s linear 0s;
}
section.bl-expand .client_area,
section.bl-expand .client_closure {
	pointer-events: auto;
	opacity: 1;
	-webkit-transition: opacity 0.3s linear 0.5s;
		 -moz-transition: opacity 0.3s linear 0.5s;
					transition: opacity 0.3s linear 0.5s;
}
/* ============================= ◀ Display page ◀ ============================= */

/* ============================= ▶ PANEL ▶ ============================= */
div.bl-panel-items,
div.bl-panel-items > div {
	width:100%; height:100%;
	position:absolute; top:16em; left:0;
}
div.bl-panel-items > div > div {
	margin:0 auto;
	opacity:1;
	bottom:0; top:0;
	pointer-events:auto;
	text-align:center;
	height:100%
}
div.bl-panel-items > div > div p { font-size:1.3em }
div.bl-panel-items > div > div img {
	max-width:100%; max-height:90%;
	position:absolute; left:0; right:0; bottom:12em;
	margin:auto;
}
div.bl-panel-items > div > div span + span {
	max-width:100%; max-height:90%;
	position:absolute; left:0; right:0; bottom:0;
	margin:auto;
}
div.bl-panel-items {
	top:100%;
	z-index:98;
	background-color:#00CCCC
}
div.bl-panel-items > div {
	opacity:0;
	-webkit-transform: translateY(0);
		 -moz-transform: translateY(0);
			-ms-transform: translateY(0);
					transform: translateY(0);
	-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0s linear 0.5s;
		 -moz-transition: -moz-transform 0.5s ease-in-out, opacity 0s linear 0.5s;
					transition: transform 0.5s ease-in-out, opacity 0s linear 0.5s;
}
div.bl-panel-items.bl-panel-items-show nav span {
	float: left;
	margin: 5px;
}
div.bl-panel-items nav span.next-showcase-picture {
	font-weight:700; letter-spacing:2px; text-transform:uppercase; line-height:2em;
	display: block;
	cursor: pointer;
	margin-right: 2em;
}
div.bl-panel-items.bl-panel-items-show nav {
	opacity: 1;
	top: -200px;  /* •••••••• */
}
div.bl-panel-items > div.bl-show-work {
	z-index:1000;
	opacity:1;
	-webkit-transform: translateY(-100%);
		 -moz-transform: translateY(-100%);
			-ms-transform: translateY(-100%);
					transform: translateY(-100%);
	-webkit-transition: -webkit-transform 1.5s ease-in-out;
		 -moz-transition: -moz-transform 1.5s ease-in-out;
					transition: transform 1.5s ease-in-out;
}
div.bl-panel-items > div.bl-hide-current-work {
	opacity:0;
	-webkit-transition: -webkit-transform 2.5s ease-in-out, opacity 0.5s ease-in-out;
		 -moz-transition: -moz-transform 2.5s ease-in-out, opacity 0.5s ease-in-out;
				  transition: transform 2.5s ease-in-out, opacity 0.5s ease-in-out;
	-webkit-transform: translateY(-100%) scale(0.5);
		 -moz-transform: translateY(-100%) scale(0.5);
		 	-ms-transform: translateY(-100%) scale(0.5);
					transform: translateY(-100%) scale(0.5);
	z-index:0;
}
.etichetta {
	height:auto; width:auto;
	position:absolute; top:0; left:-300px;
	border-top-left-radius:12px; 	border-top-right-radius:12px;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICAgIDxzdG9wIG9mZnNldD0iNzAlIiBzdG9wLWNvbG9yPSIjZmZmOWY5IiBzdG9wLW9wYWNpdHk9IjAuMDYiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZlZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	background: -moz-linear-gradient(top,  rgba(255,255,255,0.2) 0%, rgba(255,249,249,0.06) 70%, rgba(254,255,255,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.2)), color-stop(70%,rgba(255,249,249,0.06)), color-stop(100%,rgba(254,255,255,0)));
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0.2) 0%,rgba(255,249,249,0.06) 70%,rgba(254,255,255,0) 100%);
	background: -o-linear-gradient(top,  rgba(255,255,255,0.2) 0%,rgba(255,249,249,0.06) 70%,rgba(254,255,255,0) 100%);
	background: -ms-linear-gradient(top,  rgba(255,255,255,0.2) 0%,rgba(255,249,249,0.06) 70%,rgba(254,255,255,0) 100%);
	background: linear-gradient(to bottom,  rgba(255,255,255,0.2) 0%,rgba(255,249,249,0.06) 70%,rgba(254,255,255,0) 100%);
}
.etichetta h3 {
	font-family: 'Novecentowide';
	text-align:center; font-size:1.8em; font-weight:normal;
	margin:1.5em auto; padding:0 1em;
	text-shadow:0 1px 1px rgba(0,0,0,0.6)
}
.etichetta ul {
	  font-family: 'Abel-Regular'; font-size:2em;
		list-style-type:none;
		margin:2em 1em 8em
}
.etichetta li { padding:0.2em 0 }
.etichetta li > button {
	width: 100%;
	background-color: #608cb3;
	border-radius: 12px;
	cursor: pointer;
	border: none;
	padding: 0.5em;
	box-shadow: 0 3px 0 0 #2b4a66;
	margin: 1em auto 0.5em;
	-webkit-appearance: none;
       -moz-appearance: none;
}
.etichetta li > button:hover {
	background-color:#cf525b;
	box-shadow: 0 3px 0 0 #ae424a;
}
.etichetta li > button > a {
	font-size: 1rem;
    text-align: center;
	text-decoration: none;
	color: white;
}
.divider {
	width:90%; height:1px;
	background-color:rgba(255,255,255,0.5);
	opacity:0.5;
	margin:auto
}
.lineDivider {
	margin: 1em auto;
	border-bottom: 1px solid white;
	opacity: 0.5;
}
nav#controls {
	position:absolute; right:-300px; top:0;
	z-index:9999;
	opacity:1;
	width:8em; height:auto;
	border-radius:12px;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICAgIDxzdG9wIG9mZnNldD0iNzAlIiBzdG9wLWNvbG9yPSIjZmZmOWY5IiBzdG9wLW9wYWNpdHk9IjAuMDYiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZlZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	background: -moz-linear-gradient(top,  rgba(255,255,255,0.2) 0%, rgba(255,249,249,0.06) 70%, rgba(254,255,255,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.2)), color-stop(70%,rgba(255,249,249,0.06)), color-stop(100%,rgba(254,255,255,0)));
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0.2) 0%,rgba(255,249,249,0.06) 70%,rgba(254,255,255,0) 100%);
	background: -o-linear-gradient(top,  rgba(255,255,255,0.2) 0%,rgba(255,249,249,0.06) 70%,rgba(254,255,255,0) 100%);
	background: -ms-linear-gradient(top,  rgba(255,255,255,0.2) 0%,rgba(255,249,249,0.06) 70%,rgba(254,255,255,0) 100%);
	background: linear-gradient(to bottom,  rgba(255,255,255,0.2) 0%,rgba(255,249,249,0.06) 70%,rgba(254,255,255,0) 100%);
}
nav#controls span {
	display:block;
	float:none;
	text-align:center;
	padding:0 10px; margin:auto
}
.showcase_closure { height:auto }
.showcase_closure h2 {
	font-family: 'Novecentowide'; font-size:8em; font-weight:normal; line-height:normal;
	margin:0 0 10px 0; padding:0
}

.next-showcase-picture h2 {
	font-family: 'Novecentowide'; font-size:8em; font-weight:normal; line-height:normal;
	margin:0; padding:0 0 0.25em 0
}
.showcase_closure h2:hover,
.next-showcase-picture h2:hover { text-shadow:1px 1px #8d3d43 }

.pagination {
	font-size:10em; text-align:center; line-height:0.5;
	list-style-type:none;
	text-align:center;
	margin-top:0.25em; 
}
.pagination li {
	width:60%; height:auto;
	display:inline-block;
	padding-bottom:calc(60% - 8px); margin-bottom:0.1em;
	position:relative; z-index:10;
	border-radius:50%;
	cursor:pointer;
	border:4px solid white;
}
.pagination li.current {
	background-color:white;
	pointer-events:none;
}
/*
.pagination li:before {
	 content:"\25CB";
	 opacity:0.7;
	 cursor:pointer;
}
.pagination li.current:before {
	content:"\25CF";
	opacity:0.9;
	cursor:crosshair;
}
*/
.flag { margin-left:1em }
.flag img { max-width:100% }
.client_title {
	height:2em; width:100%;
	background-color:rgba(255,255,255,0.2);
	display:inline;
	float:left;
	position:relative; bottom:0em;
	font-family: 'Abel-Regular'; font-size:2.5em; line-height:2.3em;
	text-shadow:0 1px 0 #333;
	opacity:0
}
/* ============================= ◀ PANEL ◀ ============================= */

#resume_text {font-size:1.5em; line-height:1; text-align:left}
#resume_text h1 { font-size:2.5em }
#resume_text h2 { font-size:1.8em }
#resume_text h3 { font-size:1.2em }
#resume_text ul {
	list-style:none;
	margin-bottom:2em;
	width:25%;
	padding:0.5em;
}
#resume_text ul:nth-child(1n) { background-color:#993333 }
#resume_text ul:nth-child(2n) {
	background-color:#0066FF;
	float:right
}
.castoro {
	border-radius:100%;
	width:20em; height:20em;
	background-image:url(../images/web.gif);
	background-position:center;
	background-size:cover;
	position:relative;
	margin-top:10em; margin-bottom:10em
}
.castoro:nth-child(1) { background-image:url(../images/web.gif); left:0; top:0; position:relative; margin-left:-20em }
.castoro:nth-child(2) { background-image:url(../images/dtp.gif); right:0; bottom:0; position:relative; float:right; margin-right:-20em; margin-top:0 }
.castoro:nth-child(3) { background-image:url(../images/art.gif); left:0; position:relative; clear:both; margin-left:-20em  }


/* ◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉ DIRECTION-AWARE HOVER ◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉ */
.da-thumbs li a,
.da-thumbs li a img {
	display:block;
	position:relative;
}
.da-thumbs li a { overflow:hidden }
.da-thumbs li a div {
	position:absolute;
	background:rgba(230,97,107,0.5);
	background:rgba(255,255,255,0.2);
	width:100%; height:100%;
	font-family:'Abel-Regular'; font-size:2.5em; line-height:2.3em;
	text-shadow:0 1px 0 #333;
}
.da-thumbs li a div span {
	display:block;
	padding:10px 0; margin:40px 20px 20px 20px;
	text-transform:uppercase; font-weight:normal; color:rgba(255,255,255,1);
	text-shadow:1px 1px 1px rgba(0,0,0,0.2);
	border-bottom:1px solid rgba(255,255,255,0.5);
	box-shadow:0 1px 0 rgba(0,0,0,0.1), 0 -10px 0 rgba(255,255,255,0.3);
}

.exp h2,
.exp h2 img {
	display:block;
	position:relative;
}
.exp h2 { overflow:hidden }
.exp h2 div {
	position:absolute; top:-100%;
	background:rgba(255,255,255,0.2);
	width:100%; height:100%;
	font-family:'Abel-Regular'; font-size:1.5em; line-height:2.3em;
	text-shadow:0 1px 0 #333;
}
.exp h2 div span {
	display:block;
	padding:10px 0;
	text-transform:uppercase; font-weight:normal; color:rgba(255,255,255,1);
	text-shadow:1px 1px 1px rgba(0,0,0,0.2);
	border-top:1px solid rgba(255,255,255,0.5); border-bottom:1px solid rgba(255,255,255,0.5);
	box-shadow:0 -1px 0 rgba(0,0,0,0.1),inset 0 -1px 0 rgba(0,0,0,0.1);
}
/* ◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉ DIRECTION-AWARE HOVER ◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉ */



/* ◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉ MODAL WINDOW ◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉ */
.reveal-modal-bg {
	position:fixed; top:0; left:0;
	height:100%; width:100%;
	background:#000;
	background:rgba(0,0,0,.8);
	z-index:100;
	display:none;
	}
.reveal-modal {
	visibility:hidden;
	position:absolute; top:100px; left:0; right:0;
	width:50%;
	/*background:#eee url(../images/modal-gloss.png) no-repeat -200px -80px;*/
	z-index:101;
	margin:auto; padding:3em 4em;
	-webkit-border-radius:8px;
		 -moz-border-radius:8px;
					border-radius:8px;
	-webkit-box-shadow:0 0 10px rgba(0,0,0,.4);
		 -moz-box-shadow:0 0 10px rgba(0,0,0,.4);
				  box-shadow:0 0 10px rgba(0,0,0,.4);
	}
#phoneModal { background-color:#9dd492 }
#emailModal { background-color:#dc7573 }

div.modal-table { display:table }
div.modal-tablecell {
	display:table-cell; vertical-align:middle;
	width:30%
}
div.modal-tablecell + div.modal-tablecell { width:70% }
.reveal-modal img { max-width:100% }
.reveal-modal h1 {
	font-family:'Abel-Regular'; font-size:4em;
	padding-left:1em
}

.reveal-modal.small 		{ width:200px; margin-left:-140px;}
.reveal-modal.medium 		{ width:400px; margin-left:-240px;}
.reveal-modal.large 		{ width:600px; margin-left:-340px;}
.reveal-modal.xlarge 		{ width:800px; margin-left:-440px;}

.reveal-modal .close-reveal-modal {
	font-size:3.6em; line-height:0.5;
	position:absolute; top:12px; right:15px; color:white; font-weight:bold;
	text-shadow:0 -1px 1px rbga(0,0,0,.6);
	cursor:pointer;
	}
/* ◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉ MODAL WINDOW ◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉ */



/* ============================= ▶ Tablet ▶ =================================== */
@media screen and (max-width:960px ) {
	.client_area { overflow-y:auto }
	.client_area > ul li {
		width:100%;
		margin:0.5% 30px; padding:10px 50px;
	}
}
/* ============================================================================ */



/* ============================= ▶ Phone ▶ ==================================== */
@media screen and (max-width:767px ) {

	.container {
		display:flex;
		flex-direction:column;
		/*overflow: auto;*/
	}
	#cn-container { overflow:auto }
	header,
	.content,
	footer {
		height:auto;
		position:relative; top:auto; bottom:auto; left:auto; right:auto;
	}
	header {
		height:auto;
		display:flex;
		flex-wrap:wrap;
	}
	.content { flex-grow:2 }
	footer { height:30px !important }

	#header-container {
		order:1;
		width:100%;
		padding-bottom:10px;
	}
	.phone,
	.email {
		order:2;
		width:50%;
		position:relative; left:auto; right:auto;
	}


	#layout_container { left:0; right:0; width:100%;  }
	#layout_container > section { width:50%; height:50%; }

 [class^="color-"] { display:none !important  }
 #inner[class^="color-"] { display:block !important  }


	address {
		font-family: 'Abel-Regular';
		margin:auto;
 }
 .myname { display:none }

 .reveal-modal { width:96% }
 .reveal-modal h1 { font-size:3em; letter-spacing:1px  }
 div.modal-tablecell { width:20% }
 div.modal-tablecell + div.modal-tablecell { width:80% }

 .client_area > ul li { padding:0; margin:auto; }

 div.bl-panel-items > div { top:20px }
 div.bl-panel-items > div > div img { bottom:0 }

 /* ------ Skills ------------------------------------------------------------- */
 .container .s1-left,
 .container .s1-right,
 .container .s2-left,
 .container .s2-right {
	 width:100%;
	 float:none;
 }
 .container .s1-left div,
 .container .s1-right div {
	 float:none;
	 width:calc(100% - 4em);
	 margin:3em 2em;
	 }

}
/* ============================================================================ */