/* Style général */

body {
	font-family: 'Open Sans', sans-serif;
	background-color:#dadada;
}

hr {
	width:9.375rem;
	height:.3125rem;
	border:none;
	background:#ffffff;
	margin-left:0;
}

hr.mx-lg-0 {
	background:#9cd9d9;
}

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

a:hover,
a:focus,
a:active {
	text-decoration:none;
	color:inherit;
}

/* Header */

.navbar-responsive {
	background:#005961;
}

.navbar-responsive ul {
	text-align:center;
}

.navbar-responsive li {
	height:4rem;
	line-height:4rem;
}

.navbar-responsive li a {
	color:#cccccc;
}

.nav {
	display:flex;
    position:absolute;
    right:0;
    top:1.25rem;
}

.nav-mobile {
	display:none;
	position:absolute;
    right:0;
    top:0rem;
}

.navbar {
	margin:0;
	padding:0;
	float:right;
}

.navbar ul {
	display:flex;
}

.navbar ul li {
	margin-left:20px;
}

.navbar ul li a{
	color:#ffffff;
	height:40px;
}

.navbar ul li a.hvr-underline-from-left::before {
	color:#c7b5b3;
}

header {
	background:url(../img/site/header.jpg) no-repeat;
	background-position:center;
	background-size:cover;
	height:40.625rem;
	min-height:40.625rem;
	position:relative;
	padding:3.125rem 20.125rem 0;
}

header h1 {
	font-size: 2.2rem;
	color: #ffffff;
	font-weight:900;
}
	
header h1 span {
	font-weight:normal;
}

.logonavbar {
   display:flex;
   justify-content:space-between;
}

.subtitle {
	background:url(../img/site/subtitle.png);
	width:15.875rem;
	height:8.75rem;
	position:absolute;
	top:11rem;
}

h1.catchphrase {
	font-family:Lobster, cursive;
	margin:18.5rem auto 0;
	width:24.125rem;
    font-weight:normal;
    font-size:3rem;
}

span.word {
	font-weight:900;
}

.photo {
	display:block;
	position:absolute;
	bottom:0;
	right:0%;
	background:url(../img/site/photo_bulles.png) no-repeat;
	width:576px;
	height:484px;
	transform:translateX(-67%)
}

a.down-arrow {
	margin:2rem auto 0;
	width:4.125rem;
	height:4.125rem;
	display:block;
}

a.down-arrow img {
	animation: arrow 2s ease-in-out infinite;
}

@-webkit-keyframes arrow {
	0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
    40% {-webkit-transform: translateY(-30px) }
    60% {-webkit-transform: translateY(-20px);}
}

@keyframe arrow {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-20px);}
}

/* Container */

section.about, section.langues, section.experience, section.studies, section.adds {
	padding:6.25rem 0 6.25rem;
	width:100%;
	background:#f3f3f3;
}

.flex-col, .flex-col-top {
	display:flex;
	flex-direction:column;
}

.flex-col {
	display:initial;
}


/* Section about*/

section.about h3 {
	font-size:1.50rem;
	margin-bottom:1.25rem;
}

section.about p {
	text-align:justify;
}

section.about ul {
	list-style:url('../img/site/puce1.png') !important;
	margin-left:3rem;
}

.right img {
	width:76%;
    margin-top:0px;
    margin-left:10.25rem;
}

.social-networks {
	margin-top:2.6rem;
	text-align:left;
}

.social-networks img {
	width:4.0625rem;
	height:auto;
	margin-right:0.3125rem;
}

a span.link {
	background:url(../img/site/link.png) no-repeat top right;
	padding:0 17px 0 0;
	width:12px;
	height:12px;
}

a span.tel {
	background:url(../img/site/phone.png) no-repeat top right;
	padding:0 17px 0 0;
	width:14px;
	height:15px;
}


/* Section Formation */

section.studies {
	background:none;
}

section.studies h2 {
	font-size:1.5rem;
}

article.form {
	background:#0c424d;
	height:12.25rem;
	position:relative;
	margin:2rem 1.5rem;
	padding:5rem 1.5rem 1rem;
}

article.form p {
	text-align:left;
}

section.studies h3 {
	font-size:1.25rem;
}

section.studies h4 {
	top:2rem;
}

article div.dateForm {
	width:10.9375rem;
	height:4.375rem;
	line-height:4.375rem;
	background:#57aabb;
	color:#ffffff;
	font-weight:bolder;
	font-size:1.5rem;
	position:absolute;
	top:-1.5rem;
	left:-1rem;
}

/* Section langues Compétences*/

section.langues {
	background:#03343e;
	text-align:center;
	color:#ffffff;
}

section.langues h2 {
	font-size:1.50rem;
	color:#ffffff;
}

section.langues p, section.langues .percent {
	color:#cccccc;
}

section.langues p {
	margin:2rem 0 3rem;
}

section.langues hr, section.studies hr {
	margin:auto !important;
}

section.langues .percent {
	font-size:6.25rem;
	margin-right:.975rem;
	line-height:6.25rem;
	font-weight:bolder;
}

section.langues .flex, section.studies .flex {
	display:flex;
	align-items:center;
	margin-top:1.5625rem;
}

.progress-container {
	width:100%;
}

.progress-container strong {
	color:#ffffff;
	font-size:1.2rem;
}

.progress {
	background:#3b3b3b;
}

.progress-bar {
	background:#3ec3fe;
}


/* Section Expériences */

section.experience, section.studies {
	text-align:center;
}

section.experience hr, section.studies hr {
	margin:0 auto 5rem !important;
}

article {
	background:#008da9;
	color:#ffffff;
	padding:5rem 1.5rem 1rem;
	height:13.25rem;
	position:relative;
	margin:2rem 1.5rem;
}

article h3 {
	font-family:'Open' sans-serif;
	position:absolute;
	top:.3125rem;
	right:1.5rem;
	font-size:1.2rem;
}

article h3::before {
	content: url(../img/site/puce2.png);
	margin-right:.3125rem;
}

article ul {
	text-align:left !important;
}

article ul li {
	font-size:0.895rem;
}

article ul li::before {
	content: url(../img/site/puce2.png);
	margin-right:.3125rem;
}

article h4 {
	position:absolute;
	top:2rem;
	right:1.5rem;
	font-size:.825rem;
	color:#cccccc;
}

article div.periode {
	width:10.9375rem;
	height:4.375rem;
	line-height:4.375rem;
	background:#0c424d;
	color:#f3f3f3;
	font-weight:bold;
	font-size:1.rem;
	position:absolute;
	top:-1.5rem;
	left:-1rem;
}

.angle {
	position:absolute;
	left:-.95rem;
    top:2.8066rem;
	width:0;
    height:0;
    border-left:.75rem solid transparent;
    border-right:.75rem solid transparent;
    border-bottom:.75rem solid #031a1f;
    transform:rotateZ(45deg)
}

article p {
	text-align:justify;
	margin-top:0;
}


/* Section compléments */

section.adds {
	background:none;
	text-align:center;
}

section.adds h2 {
	font-size:1.50rem;
	color:#0d404a;
}

section.adds hr {
	margin:0 auto 2rem !important;
}

section.adds ul {
	text-align:center;
	margin-top:4rem;
}

section.adds ul li {
	height:1.5rem;
	line-height:1.5rem;
	text-align:center;
}

section.adds ul li::before {
	content:url(../img/site/puce1.png);
	margin-right:.3125rem;
}


/* Footer */

footer {
	background:#ffffff;
	color:#aaaaaa;
	padding:3.125rem 0 3.125rem;
	width:100%;
	text-align:center;
}

footer .social-networks {
	text-align:center;
	margin:0;
}

footer a {
	color:#000000;
}

@media screen and (min-width: 360px) and (max-width: 530px) {
	
	/* Header Mobile */
	
	.nav {
		display:none;
	}

	.navbar {
		width:20%;
	}
	
	.nav-mobile {
		display:block;
	}
	
	.photo {
		display:none;
	}
	
	header {
		padding:1.25rem 0 0;
	}
	
	div.logo h1 {
		font-size:1.41rem;
	}
	
	.subtitle {
		position:inherit;
		margin:6rem auto 0;
	}
	
	h1.catchphrase {
		font-size:2.5rem;
		width:20rem;
		margin:6.5rem auto 0;
	}
	
	.row {
		margin:0;
	}
	
		
	/* Container Mobile */
	
	.right img {
		width:100%;
		margin-top:50px;
		margin-left:0;
	}
	
	.social-networks {
		text-align:center;
	}
	
	section.langues .percent {
		font-size:3.125rem;
	}
	
	section.langues .progress-container {
		text-align:left;
	}
	
	.flex-col-top {
		margin-top:5rem;
	}
	
	.progress-container strong {
		font-size:.7rem;
	}
	
	article, article.form {
		font-size:.95rem;
		height:auto;
	}
	
	article div.periode, article div.dateForm {
		width:10rem;
		height:2rem;
		line-height:2rem;
		font-size:1rem;
	}
	
	article h3, article.form h3 {
		top:1rem;
		right:.18rem;
		width:100%;
		text-align:center;
	}
	
	article.form h3 {
		font-size:1rem;
		word-wrap: break-word;
	}
	
	article h3::before {
		content:'';
	}
	
	article h3 {
		font-size:1rem;
	}
	
	article h4, article.form h4 {
		top:3.5rem;
		right:.18rem;
		width:100%;
		text-align:center;
	}
	
	.angle {
		top:.416rem;
	}
	
	article p {
		margin-top:1rem;
		text-align:left;
	}
	
	section.adds ul li {
		height:4.5rem;
	}
}

@media screen and (min-width: 530px) and (max-width: 768px) {
	
	/* Header Mobile */
	
	.nav {
		display:none;
	}
	
	.navbar {
		right:0;
		width:30%;
	}

	.nav-mobile {
		display:block;
		right:0;
	}
	
	header {
		padding:1.25rem 0 0;
	}
	
	div.logo h1 {
		font-size:1.41rem;
	}
	
	.subtitle {
		position:inherit;
		margin:3rem auto 0;
	}
	
	h1.catchphrase {
		font-size:2.5rem;
		width:20rem;
		margin:10.5rem auto 0;
	}
	
	.row {
		margin:0;
	}
	
	/* Container Mobile */
	
	.right img {
		width:100%;
		margin-top:50px;
		margin-left:0;
	}
	
	.flex-col-top {
		margin-top:5rem;
	}
}

@media screen and (min-width: 768px) and (max-width: 950px) {
	
	/* Header Mobile */
	
	.nav {
		display:none;
	}
	
	.navbar {
		right:0;
		width:30%;
	}

	.nav-mobile {
		display:block;
		right:0;
	}
	
	.photo {
		display:none;
	}
	
	header {
		padding:1.25rem 0 0;
	}
	
	div.logo h1 {
		font-size:1.41rem;
	}
	
	.subtitle {
		position:inherit;
		margin:3rem auto 0;
	}
	
	h1.catchphrase {
		font-size:2.5rem;
		width:20rem;
		margin:10.5rem auto 0;
	}
	
	.row {
		margin:0;
	}
	
	/* Container Mobile */
	
	.right img {
		width:100%;
		margin-top:50px;
		margin-left:0;
	}
	
	figure {
		width:20.6875rem;
	}
}

@media screen and (min-width: 950px) and (max-width: 1024px) {
	
	/* Header Mobile */
	
	.nav {
		display:none;
	}
	
	.navbar {
		right:0;
		width:30%;
	}

	.nav-mobile {
		display:block;
		right:0;
	}
	
	.photo {
		display:none;
	}
	
	header {
		padding:1.25rem 0 0 !important;
	}
	
	div.logo h1 {
		font-size:1.41rem;
	}
	
	.subtitle {
		position:inherit;
		margin:3rem auto 0;
	}
	
	h1.catchphrase {
		font-size:2.5rem;
		width:20rem;
		margin:10.5rem auto 0;
	}
	
	.row {
		margin:0;
	}
	
	/* Container Mobile */
	
	.right img {
		width:100%;
		margin-top:50px;
		margin-left:0;
	}
	
	.flex-col-top {
		margin-top:5rem;
	}
}

@media screen and (min-width: 1024px) and (max-width: 1600px) {
	.photo {
		display:none;
	}
	
	.subtitle {
		position:inherit;
		margin:6rem auto 0;
	}
	
	h1.catchphrase {
		font-size:2.5rem;
		width:20rem;
		margin:5.5rem auto 0;
	}
	
	.flex-col-top {
		margin-top:0;
	}
}