/* ----------------- GLOBAL ------------------ */

html, body {
	height: 100%;
	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


html {
	font-family: 'PT Sans', sans-serif;
}

.container {
	height: 100%;
}

.container-inner { overflow: hidden; }

a {
	text-decoration: none;
	color: #444;
}

a:hover {
	background-color: #444;
	color: white;
}

h1, h2, h3, h4, h5, h6 { font-weight: 400; }

p { font-size: 14px; }

.text-red { color: #4d74d7; }
.text-blue{ color: #f9284a; }
.text-orange { color: #f57c00; }
.text-purple { color: #ab47bc; }

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

/* --------------- NAVIGATION ---------------- */

nav {
	padding: 15px 2.2390243% 0 0.914634%;
	width: 8.6309%;
	position: fixed;
	background-color: #fff;
}

.avatar div {
	width: 120px;
	height: 150px;
	background: url("../images/sprite.png") 0 0 no-repeat;
}

.avatar:hover div { background: url("../images/sprite.png") 0 -150px no-repeat; }

nav ul { padding: 0; }

nav ul li {
	list-style: none;
	margin: 10px 0;
}

nav ul li a {
	padding: 0px 0px 2px 0px;
	font-size: 16px;
}
nav .social { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } 
nav .social li { float: left; }
nav .social li a { background: none; display: block; padding: 0; padding-right: 5px; }



nav .grey-nav li a {
	background-color: grey;
	color: black;
}

nav .grey-nav li a:hover {
	background-color: #333;
	color: white;
}

nav .black-nav li a {
	color: white;
	background-color: transparent;
}

nav .black-nav li a:hover {
	background-color: #333;
	color: white;
}

nav .black-nav li p {
	color: white;
}

/* --- Mobile NAV --- */

.mobile-nav {
	width: 100%;
	padding: 0;
}

#mobile-menu a { background-color: white; color: #444; }

.mobile-nav-header {
	display: block;
	width: 100%;
	height: 40px;
	overflow: hidden;
}
	
.mobile-nav-header .avatar {
	width: 20%;
	height: 100%;
	display: block;
	float: left;
}

.mobile-nav-header .avatar div {
	width: 100%;
	height: 100%;
	background-position-x: center;
	background-position-y: 20%;
}

.mobile-title {
	width: 60%;
	height: 100%;
	background-color: #fff;
	float: left;
}

.mobile-title h3 {
	color: #8c8c8c;
	margin: 0;
	text-align: center;
	font-size: 24px;
	padding: 0;
	line-height: 40px;
}

.hamburger {
	width: 20%;
	height: 100%;
	display: block;
	float: left;
	background-color: #fff;
}

/* ---- Hamburger Icon ----- */

#nav-icon {
	width: 30px;
  height: 25px;
  position: relative;
  margin: 10px 10px 7px auto;
	-webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon span {
	display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background-color: #a1a1a1;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon span:nth-child(2) {
  top: 8px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon span:nth-child(3) {
  top: 16px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -3px;
	left: 5px;
}

#nav-icon.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#nav-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
	top: 18px;
	left: 5px;
}

#mobile-menu {
	position: fixed;
	background-color: #f9f9f9;
	width: 100%;
	visibility: hidden;
	opacity: 0;
	height: 0px;
	-webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

nav #mobile-menu li {
	margin: 0;
	text-align: center;
}

nav #mobile-menu li a {
	display: block;
	padding: 10px 0;
	color: #3c3c3c;
}

nav #mobile-menu li a:active {
	background-color: #8c8c8c;
	color: #fff;
}

nav #mobile-menu li a:hover {
	background-color: #8c8c8c;
	color: #fff;
}

#mobile-menu.mobile-menu-open { visibility: visible; height: 190px; opacity: 1; }


.tablet-nav{ display: none; }
.mobile-nav{ display: none; }


/* ---------------- HOME ------------------ */

.content {
	margin-left: 12.1951219%;
	padding-top: 15px;
	padding-right: 0.9%;
	width: 86.9048781%;
}

.content ul {
	overflow: auto;	
	width: 100%;
}

.content ul li {
	display: block;
	padding-bottom: 170px;
}

.content ul li .city { max-width: 1200px;}

.content ul li img {
	display: block;
	margin: auto;
	max-width: 100%;
	height: auto;
}

.content ul li .detail {
	margin-top: 50px;
	max-height: 700px;
	max-width: 900px;
}

.content .intro-text {
	max-width: 610px;
	padding: 0 10px;
	font-size: 15px;
	margin: 50px auto 0;
}

.content li h2 {
	text-align: center;
}

.content li h3 {
	text-align: center;
}

.caption {
	text-align: center;
	word-wrap: break-word;
  max-width: 700px;
	margin: 0 auto;
}

.caption h4 {
	font-weight: 400;
	margin: 15px 0 0;
}

.caption p {
	margin-top: 7px;
}

.about {
	padding-left: 30px;
}

.about h4:first-of-type { margin-top: 0px; }

.about img { float: left; margin-right: 15px; width: 200px; }

.about h4 { margin-bottom: 15px; }

.about p { margin: 6px 0; }

.about p:last-of-type{ max-width: 800px; }

.about div:nth-child(5) { margin-top: 30px; }

.mail, small { font-size: 10px; }


/* ----------- Drawings --------------- */

.drawings li:nth-child(4) img {
	width: 400px;
}

.drawings li:nth-child(10) img {
	width: 800px;
}

.mobile-intro { display: none; }

/* ---------------- Responsive -------------------- */

@media (min-width: 768px) {
	.skills {
		overflow: hidden;
		margin-top: 30px;
	}
	
	.skills div {
		float: left;
	}
	
	.skills h4 { margin-bottom: 0; }
	
	.skills div:first-of-type { margin-right: 100px; }
	
	.floated { float: left; }
	
	.clearfix { content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both; }
}

@media (min-width: 1024px) {
	nav {
		width: 10.1%;
	}
	
	nav .mail {
		word-break: break-all;
	}
	
	.content {
		margin-left: 13.3536583%;
		width: 85.7463417%;
		padding-top: 0.9%;
	}
	
	.content .debut-desktop { display: block; }
	.content .debut-mobile {display: none;}
	.content .fscreen { display: none; }
}

@media (min-width: 1300px) { .content .fscreen { display: block; } }

@media (min-width: 1440px) {
	nav {
		padding: 15px 20px 0 15px;
		width: 165px;
	}
	
	.content {
		margin-left: 200px;
		min-width: 1240px;
	}
	
	.content ul li img {
		margin: auto;
		max-width: 1000px;
		max-height: 1000px;
	}
	
	.content ul .sw2025 img {
		max-width: 100%;
		max-height: 100%;
	}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait),
			 only screen and (min-width: 768px) and (max-width: 1024px)	{
	.desktop-nav {
		display: none;
	}
	
	.tablet-nav {
		display: block;
		width: 98.170732%;
		padding: 0.914634%;
		height: auto;
	}
	
	.tablet-nav .avatar { float: left; }
	
	.tablet-nav .avatar div {
		width: 60px;
		height: 60px;
		background-size: cover;
	}
	
	.tablet-nav ul {
		float: left;
		overflow: hidden;
	}
	
	.tablet-nav .social li { width: 50px; }
	
	.tablet-nav ul li {
		float: left;
		border-right: 1px solid #ccc;
		margin: 5px 0;
	}
	
	.tablet-info p {
		margin: 0;
		padding: 0 12px;
		font-size: 11px;
	}
	
	.tablet-menu {
		width: 56%;
	}
	
	.tablet-menu li  {
		width: 24%;
	}
	
	.tablet-menu li a {
		padding: 0 10px;
	}
	
	.tablet-menu li small {
		padding: 0 10px;
	}
	
	.tablet-menu li:last-child {
		width: 30%;
		border-right: none;
		font-size: 12px;
	}

	.content {
		width: 98.170732%;
		padding: 75px 0.914634% 0.914634%;
		margin: 0;
	}
	
	.content .fscreen { display: none; }
	.content .debut-mobile {display: none;}
	
	.about { padding: 0 15px; margin-top: 30px; }
}

@media only screen (max-device-width: 767px),
			 only screen and (max-width: 767px) {			 
				 
	.desktop-nav { display: none; }
	
	.content .debut-desktop { display: none; }
	.content .debut-mobile { display: block; }
	.content .fscreen { display: none; }
	
	.mobile-nav { display: block; }

	.mobile-nav .social { background-color: #f9f9f9; }
	
	.mobile-nav .social li { float: none; }
	
	.content {
		margin: 0;
		width: 98.170732%;
		padding: 44px 0.914634% 0.914634%;
	}
	
	.content .intro-text { margin-top: 15px; }
	
	.mobile-intro {
		display: block;
		text-align: center;
	}
	
	.content .mobile-intro li {
		padding-bottom: 15px;
	}
	
	.content .mobile-intro li p {
		margin: 0;
	}
	
	.content .mobile-intro p { margin-bottom: 5px; }
	
	.content .mobile-intro  .name { margin-bottom: 5px; }
	
	.content ul li .city { max-width: 100%;}
	
	.content ul li .detail { max-width: 100%; }
	
	.content ul li { padding-bottom: 70px; }
	
	.content ul li .detail { margin-right: 200px; }
	
	.about { padding: 0 5px; }
	
	.about img {
		float: none;
		display: block;
    margin: 15px auto 0;
    max-width: 100%;
    height: auto;
	}
	
	.about div:first-of-type { margin-top: 15px; }
	
	.about h4 { text-align: center; background-color: #444; color: white; }
	
	.about br { display: none; }
	
	.about div { margin-bottom: 20px; }
	
	.about div:nth-child(5) { margin-top: 15px; }
}


------- DEBUT 2020 ----------------------------

.fscreen {
	width: 400px;
	text-align: center;
	margin: 0 auto;
}

.content ul .hide { display: none; }