/* ------------------------------------------------------------------------------

	1. CSS Général
	2. Document Setup
	3. Menu Style
	4. À propos Style
	5. Compétences Style
	6. Expérience Style
	7. Formation Style
	8. Portfolio Style
	9. Contact Style
	10. Footer Style
	11. Responsive style
		
---------------------------------------------------------------------------------
/* 1. CSS Général
-------------------------------------------------------------------------------*/

* {
	padding: 0;
	margin: 0;
}

p,
h1,
h2,
h3,
h4 {
	font-family: 'Open Sans' !important;
}

body {
	/* font-weight: 300; */
	position: relative;
	background: #f2f2f2;
	width: 100%;
	height: 100%;
	overflow: scroll;
	overflow-x: hidden;
	color: #000;
	font-family: 'Open Sans' !important;
	font-size: 16px;
}

p {
	/* font-size: 16px; */
	line-height: 21px;
	font-weight: 400;
	padding-bottom: 22px;
	margin: 0px;
	/* color: #474d5d; */
}


h1 {
	font-size: 50px;
	line-height: 70px;
	font-weight: 700;
	margin: 0px;
	padding-bottom: 8px;
	color: #ffffff;
}

h2 {
	font-size: 36px;
	line-height: 38px;
	padding-bottom: 0px;
	font-weight: 300;
	text-transform: uppercase;
	margin: 0;
	color: #fff;
	/* font-family: font; */
}

h3 {
	font-size: 24px;
	line-height: 30px;
	padding-bottom: 6px;
	font-weight: 700;
	margin: 0;
}

h4 {
	font-size: 18px;
	line-height: 24px;
	padding-bottom: 6px;
	font-weight: 400;
	margin: 0;
	font-style: italic;
}

a {
	text-decoration: none;
	/* color:#fff; */
	outline: none;
}



/*----------------------------------------------------
 2.	Document Setup
------------------------------------------------------*/
.wrapper {
	width: 100%;
}

/* .container .row{
	margin:0px;
} */


/* h3.subHeading {
	font-weight:600;
	font-size:18px;
	padding-bottom:22px;
} */

.heading {
	text-align: center;
	padding-bottom: 45px;
}

/*----------------------------------------------------
 3.	Menu Style
------------------------------------------------------*/
header {
	position: relative;
}

.menu {
	margin-top: 0px;
	position: static;
	left: 0px;
	right: 0px;
	text-transform: uppercase;
}

.navwrapper {
	padding: 0;
	width: auto;
	margin-top: 0px;
	position: relative;
	z-index: 15;
	/* background:#262b37; */
}

.navbar-header {
	display: none;
}

.nav>li>a {
	display: inline-block;
}

.navbar-nav>li {
	float: none;
	display: inline-flex;
	align-content: space-between;
}

.navbar-nav {
	margin: 0 auto;
	text-align: center;
	float: none;
	justify-content: center;
	flex-direction: row;
}

.navbar-toggle {
	margin-top: 14px;
}

.navbar-collapse {
	padding: 0;
}

.navbar-collapse.in {
	max-height: 100%;
}

.navbar.navbar-fixed-top {
	margin: 0px auto;
	background: #3f9fce;
	/* background-color: transparent; */
	border: none;
	font-size: 16px;
	text-transform: uppercase;
	box-shadow: 0 0 1em #034E6F;
}

.navbar.navbar-fixed-top a {
	color: #fff;
	padding: 22px 25px;
	line-height: 18px;
	text-align: center;
}

.navbar-toggle {
	border-color: #fff;
	padding: 0;
}

.navbar.navbar-fixed-top a:hover {
	color: #222;
	background: none;
}

/*----------------------------------------------------
 4.	À propos Style
------------------------------------------------------*/

.apropos {
	position: relative;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(184deg, #43aed2, #3672c3);
	transform: skewY(-4deg);
	transform-origin: top left;
}

.apropos .container {
	padding-top: 250px;
	padding-bottom: 50px;
	transform: skewY(4deg);
}

.apropos .presentation {
	display: flex;
	flex-direction: row;
}

.apropos h3 {
	margin: 0 0 1em 0;
}

.proPic {
	display: flex;
	align-items: center;
	justify-content: center;
}

.apropos img {
	/* margin-top: 20px; */
	max-width: 300px;
	height: auto;
	box-shadow: 0 0 3em #034E6F;
}

.apropos h2,
.apropos h3,
.apropos p {
	color: #fff;
}

.btn-Download {
	font-size: 16px;
	background: #ffc107;
	color: #101010;
	padding: 16px 22px;
	display: inline-block;
	border-radius: 5px;
	margin-top: 1em;
}

.btn-Download:hover {
	background: #fff;
	color: #101010;
	text-decoration: none;
}

/* EFFET H3 */
.typewriter h3 {
	color: #fff;
	overflow: hidden;
	border-right: .15em solid #fff;
	/* typewriter cursor */
	white-space: nowrap;
	/* single line */
	letter-spacing: .15em;
	animation:
		typing 3.5s steps(30, end) 1s normal both,
		/* mouv */
		blink-caret 2s linear infinite;
	/* typewriter cursor animation */
}

/* The typing effect */
@keyframes typing {
	from {
		width: 0
	}

	to {
		width: 11.2em
	}
}

/* The typewriter cursor effect */
@keyframes blink-caret {

	from,
	to {
		border-color: transparent
	}

	50% {
		border-color: #fff
	}
}

/*----------------------------------------------------
 5.	Compétences Style
------------------------------------------------------*/

.competences {
	background: #f2f2f2;
}

.competences .container {
	padding-top: 85px;
	padding-bottom: 89px;
}

.competences h2 {
	color: #222;
}

.competences .skills {
	margin: 0 auto;
	margin-bottom: 23px;
	text-align: center;
	padding: 0px;
	float: none;
}

.competences .skills img {
	margin: 0 auto;
	margin-bottom: 33px;
	width: auto;
	max-width: 152px;
}

.competences .skills h3 {
	text-transform: uppercase;
}

.competences .skills li {
	list-style-type: none;
}


/*----------------------------------------------------
 6. Expérience Style
------------------------------------------------------*/
.experience {
	background: #fff;
}

.experience .container {
	padding-top: 85px;
	padding-bottom: 120px;
}

.experience h2 {
	color: #222;
}

.workDetails .rightArea {
	/* border-left: solid 1px #ccc; */
	padding-bottom: 40px;
}

.workDetails:last-child .rightArea {
	padding-bottom: 0px;
}

.workYear {
	font-size: 17px;
	color: #fff;
	/* background:#f74d4d; */
	/* background-color: #f45e53; */
	text-align: center;
	width: 120px;
	height: 120px;
	padding: 40px 0 40px 0;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	margin: auto;
	box-shadow: 5px 5px 2px #ddd;
	background-color: #f45e53;
}

.arrowpart {
	float: left;
	width: 15px;
	height: 50px;
	background: url(../img/arrow-left.png) no-repeat 0 23px;
	margin-top: 10px;
}

.details {
	width: auto;
	background: #f2f2f2;
	/* border-bottom:solid 4px #eeeeee; */
	padding: 22px 47px 6px 47px;
	margin-left: 15px;
	text-align: left;
	box-shadow: 8px 5px 2px #ddd;
	border-radius: 10px;
}

.details h3 {
	padding-bottom: 3px;
}



/*----------------------------------------------------
 7.	Formation Style
------------------------------------------------------*/
.formation {
	background: #f2f2f2;
}

.formation .container {
	padding-top: 85px;
	padding-bottom: 120px;
}

.formation h2 {
	color: #222;
}

.formation .heading p {
	padding-bottom: 41px;
}

.formation .arrowpart {
	background: url(../img/arrow-left-light.png) no-repeat 0 23px;
}

.formation .details {
	background: #fff;
	/* border-bottom:solid 4px #e8e7e7; */
}

.formation .workYear {
	background-color: #3765af;
}

.formation .workDetails .rightArea {
	border-left-color: #ccc;
}


/*----------------------------------------------------
8. Portfolio Style
------------------------------------------------------*/
.portfolio {
	/* background:#34ACF7; */
	width: 100%;
	min-height: 80px;
	background-image: linear-gradient(to top left, #43aed2, #3672c3);
}

.portfolio .container {
	padding-top: 85px;
	padding-bottom: 120px;
	text-align: center;
}

.portfolio ul {
	list-style-type: none;
}

.portfolio input {
	display: none;
}

.portfolio label {
	cursor: pointer;
	padding: 16px 18px;
	margin-bottom: 2em;
	font-size: 14px;
	line-height: 15px;
	color: #ffffff;
	text-transform: uppercase;
	display: inline-block;
	border: solid 1px #fff;
	font-weight: normal;
	transition-duration: 0.2s;
	-webkit-transition-duration: 0.2s;
}

.portfolio label:hover {
	/* border:solid 1px #474d5d; */
	color: #222;
	background: #ffffff;
	transition-duration: 0.2s;
	-webkit-transition-duration: 0.2s;
}

.portfolio label.current {
	background: #ffc107;
	border: solid 1px #ffc107;
	color: #222;
}

.gallery {
	display: block;
	width: 90%;
	margin: 0% auto;
}

.gallery li {
	display: inline-block;
	overflow: hidden;
	/* padding-bottom: 1em; */
	padding: 0.5em;
	opacity: 1;
	-webkit-transition: all .3s linear;
	transition: all .3s linear;
}

.gallery img {
	/* width: 250px; */
	width: 100%;
	height: auto;
	box-shadow: 0 2px 5px 0 #034E6F;
}

input#web-item:checked~.gallery li:not(.web-item),
input#graphisme-item:checked~.gallery li:not(.graphisme-item),
input#edition-item:checked~.gallery li:not(.edition-item) {
	opacity: .1;
}

.fade {
	opacity: 1;
	transition: opacity .25s ease-in-out;
	-moz-transition: opacity .25s ease-in-out;
	-webkit-transition: opacity .25s ease-in-out;
}

.no-btn {
	background: none;
	border: none;
}

/*----------------------------------------------------
9. Loisirs Style
------------------------------------------------------*/
.loisirs {
	background: #f2f2f2;
}

.loisirs .container {
	padding-top: 85px;
	padding-bottom: 120px;
}

.loisirs h2 {
	color: #222;
}

.loisirs .heading p {
	padding-bottom: 41px;
}

.loisirs .skills {
	margin: 0 auto;
	margin-bottom: 23px;
	text-align: center;
	padding: 0px;
	float: none;
}



/*----------------------------------------------------
9. Contact Style
------------------------------------------------------*/

.contact {
	background: #fff;
	color: #222;
}

.contact .container {
	padding-top: 85px;
	padding-bottom: 30px;
}

.topCon {
	padding-bottom: 0px !important;
}

.contact h2 {
	color: #222;
	/* font-size: 18px; */
}

.contact h3 {
	color: #222;
	/* font-size: 18px; */
}

.contact p {
	margin-top: 20px;
	/* color:#fff; */
	line-height: 19px;
	padding-bottom: 14px;
}

.contact a {
	color: #3765af;
}

.contact a:hover {
	color: #000;
	text-decoration: none;
}

.contact .skills {
	margin: 0 auto;
	margin-bottom: 23px;
	text-align: center;
	padding: 0px;
	float: none;
}

#social li {
	display: inline-block;
}

/* #social img:hover {
	padding-bottom: 10px;
	border-bottom: 3px solid #3765af;
} */

#social img {
	max-width: 40px;
	height: auto;
}

/*----------------------------------------------------
 10. Footer Style
------------------------------------------------------*/


/*---------------------------------------------------------------------------------
11. Responsive style
-------------------------------------------------------------------------------*/

@media screen and (min-width: 1200px) {
	.workYear {
		width: 120px;
		height: 120px;
		padding-top: 35px;
	}

	.formation .workYear {
		padding-top: 48px;
	}
}


@media screen and (max-width: 991px) {
	.navbar.navbar-fixed-top a {
		padding-left: 10px;
		padding-right: 10px;
	}

	.proPic {
		text-align: center;
	}
}


@media screen and (max-width: 810px) {
	body {
		min-height: 700px;
	}

}


@media screen and (max-width: 767px) {
	.navbar-header {
		display: block;
	}

	.navbar-nav li:first-child {
		display: none;
	}

	.apropos .container {
		padding-top: 0;
	}

	.proPic {
		display: none;
	}

	.workYear {
		margin: 0 auto;
	}

	.workDetails .rightArea {
		border-left: none;
	}

	.arrowpart {
		float: none;
		width: 100%;
		height: 40px;
		background: url(../img/arrow-top.png) no-repeat 50% 100%;
	}

	.formation .arrowpart {
		background: url(../img/arrow-top-light.png) no-repeat 50% 100%;
	}

	.details {
		margin-left: 0px;
	}

	ul.navbar-nav li a {
		display: block;
	}
}

/* EFFET MENU BURGER */
.bar1,
.bar2,
.bar3 {
	width: 25px;
	height: 4px;
	background-color: #fff;
	margin: 6px;
	transition: 0.4s;
}

.change .bar1 {
	/* -webkit-transform: rotate(-45deg) translate(-5px, 5px); */
	transform: rotate(-45deg) translate(-8px, 7px);

}

.change .bar2 {
	opacity: 0;
}

.change .bar3 {
	/* -webkit-transform: rotate(45deg) translate(20px, -5px); */
	transform: rotate(45deg) translate(-7px, -6px);

}

@media screen and (max-width: 650px) {
	#wrapper {
		top: 200px !important;
	}
}


@media screen and (max-width: 480px) {
	/* .navbar.navbar-fixed-top a{
		line-height: 17px;
		padding-top:11px;
		padding-bottom:11px;
	} */

	.apropos img {
		width: 100%;
	}

	.bntDownload {
		font-size: 13px;
		padding: 16px 14px;
	}
}