/******* general *********/
*{
	box-sizing: border-box;
}

span.help-block.form-error{
	color: #FA1F69;
}

.container{
	max-width: 750px; /* Max width rules !*/
	width: 750px;
	margin: 0 auto;
}

.floatL{
	float: left;
}

.floatR{
	float: right;
}

.clear{
	clear: both;
}

img{
	max-width: 100%;
}

body, html { 
	font-size: 100%; 
	padding: 0; 
	margin: 0;
	font-family:"Source Sans Pro";
	background-color:#FFFFFF;
	overflow-x:hidden;
}

a:link {
	color: #FFFFFF;
}

a:visited {
	color: #FFFFFF;
}

a:hover {
	color:#FA1F69;
}

a.actif {
	color:#FA1F69;
}

a {
	text-decoration: none;
}

/* Viewport */

.hidden{
	opacity: 0;
}

.visible{
	opacity: 1;
	transition: opacity 20s;
}


/************* HOME HEADER ***********/

/*** IMAGE VOLE ***/

img.vole {
	max-height: 45px;
	position: absolute;
	animation : tourneetdescend 90s infinite;
	z-index: 1000;
}

@keyframes tourneetdescend {
	0% {
		transform: translateY(0) rotateZ(0);
	}
	100% {
		transform: translateY(2090px) rotateZ(70000deg);
	}
}

/************* MENU *******************/

header .menu_head{
	display: none;
}

.menu{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-top: 30px;
}

nav.menu a {
	text-decoration: none; 
	font-family: "Source Sans Pro"; 
	text-align: center; 
	line-height: 46px;
}

nav.menu img {
	height: 20px;
	width: 20px;
}

.menu_head {
	background-color:#282D30;
	height: 250px;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: fixed;
	z-index: 1000;
}

.cross-close {
	color: #FFFFFF;
	width: 25px;
	height: 25px;
	cursor: pointer;
	margin: 5px;
	font-size: 24px;
	position: absolute;
	right: 5px;
}

.hide {
	display: none;
}


/*             HEAD              */
h2.bouton_menu {
	text-align: right;
	font-family: source sans Pro;
	font-weight: 200;
	margin-right: 30px;
	right: 10px;
	top: 10px;
	position: fixed;
	z-index: 1000;
	cursor: pointer;
	color: #FA1F69;
}

.top {
	background: url(../img/home/fonthaut.png) no-repeat center;
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
	height: 350px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

img[alt=logo_alibert-creation] {
	max-width: 50%;
	width: auto;
	max-height: 80%;
	margin: 0 auto;
}

.chiffre {
	font-size:3.75rem; 
	font-weight:700; 
	color:#FA1F69;
	margin: 30px 10px;
	font-family:"Source Sans Pro"; 
}

.ennonce {
	font-size:1.9rem; 
	font-weight:100; 
	color:#FA1F69;
	font-family:"Source Sans Pro";
}

.ennonce.app{
	margin-top: 30px;
}

.work {
	max-width: 1024px;
}

.soustitre {
	font-size:1rem;
	color:#000000;
	width: 100%;
}

.soustitre.projet_home .chiffre {
	padding-left: 10px;
}

.soustitre p {
	width: 60%;
	padding: 0 10px;
}

.soustitre.presa img, .soustitre.work img {
	max-width: 40%;
	width: auto;
	max-height: 400px;
	padding: 0 10px;
}

.presa{
	max-width: 1024px;
}

.more, .submit, .submitPopUp { 
	background-color:#FA1F69;
	color:#FFFFFF;
	height: 26px;
	width:115px; 
	text-align:center;
	margin: 20px 10px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}

.more:hover, .submit:hover, .submitPopUp:hover {
	border: 2px solid #FA1F69;
	height: 24px;
	background-color:#FFFFFF;
	text-align:center;
	margin: 20px 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.more:hover a, .submit:hover a{
	color:#FA1F69;
}


.chiffre.container {
	margin-bottom: 20px;
}

article.soustitre.projet_home .flex.projet {
	justify-content: center;
}

/*****************Annimation******************/

.flex {
	display: flex;
}

.flex_jc_between {
	justify-content: space-between;
}

.flex_ai_center {
	align-items: center;
}

.flex_ai_start {
	align-items: flex-start;
}

section.flex.projet.home{
	margin-top: -5px;
}

section.flex.projet.margin_portfolio{
 	
}

.effet1 {
	height: 100%;
	width: 54%;
}

.effet2, .effet1{
	height: 100%;
	margin-bottom: 0;
	margin-top: -5px;
}

article.soustitre.projet_home .effet2 {
		margin-top: 0px;
	}


.grid figure {
	position: relative;
	text-align: center;
	cursor: pointer;
	margin: 0 0 0 0;
	overflow: hidden;
}

.grid figure p {
	width: 100%;
}

.grid figure p span {
	font-weight: 700;
	font-size: 2rem;
}

.grid figure figcaption {
	color: #000000;
	text-transform: uppercase;
	font-size: 1.25em;
	backface-visibility: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;

}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
	z-index: 900;
	font-size: 0;
}

figure.effect-oscar img {
	opacity: 1;
	transition: opacity 0.35s;
}

figure.effect-oscar figcaption {
	padding: 3em;
	background-color: rgba(58,52,42,0);
	transition: background-color 0.35s;
	font-family:"Source Sans Pro";
	font-weight:100;
}

figure.effect-oscar figcaption::before {
	position: absolute;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px;
	border: 1px solid #FA1F69;
	content: '';
}


figure.effect-oscar figcaption::before,
figure.effect-oscar p {
	opacity: 0;
	transition: opacity 0.35s, 
	transform 0.35s;
	transform: scale(0);
}

figure.effect-oscar:hover figcaption::before,
figure.effect-oscar:hover p {
	opacity: 1;
	transform: scale(1);
}

figure.effect-oscar:hover figcaption {
	background-color: rgba(58,52,42,0);
}

figure.effect-oscar:hover img {
	opacity: 0.4;
}


/**************************FOOTER***********************/
footer {
	margin:0 auto;
	padding: 50px 0;
}

.basp { 
	font-size:34px;
	font-weight:100;
	font-family:"Source Sans Pro";
	color:#000000;
	text-align:center; 
}

.barfooter { 
	width: 40%;
	margin:auto;
	margin-top:20px;
}

.barfooter:before, .barfooter:after {
	display: block;
	content: " ";
	width: 35%;
	background-color: black;
	height: 1px;
}

.barfooter:after{
	float: right;
}

.iconfooter { 
	width:25%;
	display: flex;
	margin: 28px auto;
	justify-content: space-between;
}

a.linkedin {
	background: url('../img/footer/socialNetWork.png') no-repeat -2px -2px;
	width: 20px;
	height: 25px;
}

a.behance {
	background: url('../img/footer/socialNetWork.png') no-repeat -25px -2px;
	width: 37px;
	height: 25px;
}

a.facebook{
	background: url('../img/footer/socialNetWork.png') no-repeat -66px -3px;
	width: 10px;
	height: 24px;
}

a.contact{
	background: url('../img/footer/socialNetWork.png')  no-repeat -79px -2px;
	width: 37px;
	height: 25px;
}
	

/* POP UP */
.popup-button {
    margin-bottom: 60px;
}

.submit, .submitPopUp { 
	height: 25px;
	border: none;
}

.flex.submitButton{
	display: flex;
	justify-content: center;
}

.submit:hover, .submitPopUp:hover {
	height: 25px;
	color: #FA1F69;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    max-width: 500px;
    min-width: 320px;
    height: 500px;
    z-index: 5000;
    visibility: hidden;
    background: #473542;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    border-radius: 50%;
}
 
.form {
	justify-content: space-between;
	margin-bottom: 15px;
}

.form input {
	width: 250px;
	border-left: 0;
	border-top: 0;
}

.form textarea {
	resize: none;
	width: 250px;
	border-left: 0;
	border-top: 0;
}


.form input:focus, .form textarea:focus{
	outline: 1px solid #FA1F69;
	outline-offset: 0;
}

.show {
    visibility: visible;
}
 
.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 1000;
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
 
.show ~ .overlay {
    opacity: 1;
    visibility: visible;
}
 
.popup-content {
    color: #fff;
    position: relative;
    border-radius: 3px;
    margin: 0 auto;
    padding: 6% 10%;
}
 
.popup-content h3 {
    margin: 0;
    text-align: center;
    font-size: 3.4em;
    font-weight: 300;
    position: relative;
}
 
.popup-content h3:before {
    position: absolute;
    width: 47px;
    height: 38px;
    content: "";
    top: 18px;
    left: 0px;
}
 
.popup-content .para {
    color: #73556b;
    margin-bottom: 30px;
    text-align: justify;
}
 
.popup-content > div {
    padding: 0px;
    margin: 0;
    font-weight: 300;
    font-size: 1.15em;
}

#popup .popup-content .fa.fa-times{
	display: none;
}

.close {
    background: url(../img/home/close.png) no-repeat;
    height: 49px;
    width: 49px;
    position: absolute;
    right: 40px;
    top: 40px;
    z-index: 2000;
    cursor: pointer;
    opacity: 1;
}
 
/* Effet blur */
.show.blur-effect ~ .overlay {
    background: rgba(123,53,92,0.4);
}

/* * * * * Présentation * * * * */

.stretch {
	align-items: flex-start;
	justify-content: flex-start;
	margin: 0 6.6666667%;
}

.texticon {
	width:100%; 
	font-size:12px;
	color:#000000;
	text-align:center;
	margin-bottom:10px;
}

.hautpage {
	min-width: 100%;
	overflow: hidden;
	background-image: url(../img/presentation/hautpage-01.png);
	background-repeat: no-repeat;
	background-size: cover;
	height: 400px;
}

.photopresa { 
	width: 175px;
	margin-left: 10%;
}

.textheadpresa { 
	margin-top: 93px;
	font-size: 25px;
	color: #FFFFFF;
	font-family: "Source Sans Pro";
	font-weight: 100;
}

.textpresa { 
	text-align: center;
	font-size: 41px;
	font-family: "Source Sans Pro";
	font-weight: 100;
	color: #FFFFFF;
	line-height: 100px;
}

.button {
	background-color: #FA1F69;
	color: #FFFFFF;
	border: none;
	width: 40%;
	height: 30px;
	margin-top: 40px;
	cursor: pointer;
}

.button:hover{
	color: #FA1F69;
	background-color: #FFFFFF;
	border: 2px solid #FA1F69;
}

.l1presa { 
	font-size: 25px;
	color: #FFFFFF;
	font-family: "Source Sans Pro";
	font-weight: 100;
}

.col1, .col2, .col3{
	width: 50%;
	padding: 0 10px;
}

.col3{
	margin-top: 50px;
}

.intro {
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
	font-size: 12px;
	font-family: "Source Sans Pro";
	font-weight: 400;
	color: #000000;
	display: flex;
	justify-content: space-around;
}

.iconcaractere {
	width: 30%;
	position: absolute;
	bottom: 0px;
	left: 0px;
}

.caractere { 
	margin-top: 20px; 
	font-size: 12px;
}

.iconhobbies {
	background: url('../img/sprite_presa.png') no-repeat -9px -307px;
	width: 307px;
	height: 31px;
	margin-top: 20px;
}

.competences {
	font-size: 12px;
	color: #000000;
	font-family: "Source Sans Pro";
	font-weight: 400;
	margin-top: 20px;
	margin-bottom: 20px;
}

.colonne1 .skills{
	margin-top: 20px;
}

.skills{
	justify-content: center;
}

.icon_html{
	background: url('../img/sprite_presa.png') no-repeat -187px -99px;
	width: 79px;
	height: 78px;
	margin: 0 auto;
}

.icon_js {
	background: url('../img/sprite_presa.png') no-repeat 0 -97px;
	width: 79px;
	height: 79px;
	margin: 0 auto;
}

.icon_php{
	background: url('../img/sprite_presa.png') no-repeat -96px -99px;
	width: 78px;
	height: 79px;
	margin: 0 auto;
}

.icon_sql{
	background: url('../img/sprite_presa.png') no-repeat -275px -101px;
	width: 79px;
	height: 79px;
	margin: 0 auto;
}

.icon_jquery{
	background: url('../img/sprite_presa.png') no-repeat -198px -204px;
	width: 78px;
	height: 79px;
	margin: 0 auto;
}

.icon_bootstrap{
	background: url('../img/sprite_presa.png') no-repeat 0 -201px;
	width: 78px;
	height: 78px;
	margin: 0 auto;
}

.icon_silex{
	background: url('../img/sprite_presa.png') no-repeat -88px -200px;
	width: 79px;
	height: 78px;
	margin: 0 auto;
}

.icon_illu{
	background: url('../img/sprite_presa.png') no-repeat -101px 0;
	width: 79px;
	height: 78px;
	margin: 0 auto;
}

.icon_photoshop{
	background: url('../img/sprite_presa.png') no-repeat -280px 0;
	width: 78px;
	height: 78px;
	margin: 0 auto;
}

.icon_indesign{
	background: url('../img/sprite_presa.png') no-repeat -194px 0;
	width: 78px;
	height: 78px;
	margin: 0 auto;
}

.text_skills{
	width: 80%;
	margin: 0 auto;
}

/**************** Page portfolio *****************/

.hautportfolio { 
	background-image:url(../img/projet/portfolio/hautportfolio-01.png);
	height:300px;
	width:100%;
}

.hautportfolio h2.bouton_menu {
	color: #FA1F69;
}

.air_min_width {
	min-width: 100%;
}

.imglogo {
	z-index: 1; 
	display: block; 
	margin-left: auto; 
	margin-right: auto; 
	padding-top: 60px; 
}

.title_portfolio.chiffre {
	padding: 10px 20px;
	margin: auto auto;
}

.title_portfolio.chiffre span.ennonce {
	padding: 20px;
}

.flex.end{
	justify-content: space-between;
	margin-bottom: 0px;
}

.caracteristiques img{
	max-height: 90px;
	line-height: 90px;
}

.caracteristiques{
	border-right: 1px solid black;
	border-left: 1px solid black;
	display: flex;
	justify-content: space-around;
	width: 60%;
}

.hautportfolioQ {
	margin-left: 10%;
	padding-top: 120px;
}			

.portfolioparti1 { 
	width: 50%;
	margin-left: 20px;
	margin-top: 110px; 
}

.textintro { 
	margin-top: 20px;
	color: #000000;
	font-size: 12px;
	font-family: "Source Sans Pro";
	width: 60%;
}

.triangle{
	max-height:420px; 
	margin-top:-110px;
}

.flex.intro{
	justify-content: space-between;
}

.portfolioparti3 {
	margin-right: 10px;
	display: flex;
	flex-wrap: nowrap;
}

.flex.projetPortfolio{
	max-width: 1024px;
	margin: 25px auto 0;
	justify-content: space-between;
	align-items: flex-start;
}

.projetImg1 {
	height: auto;
	width: 60%;
	max-height: 100%;
	padding: 0 10px;
}

.projetTitre1 {
	margin-top: 80px;
	padding-left: 10px;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

.projetTitre1 + .textprojet {
	margin-left: -45px;
}

.textprojet {
	color: #000000;
	font-size: 12px;
	padding: 0 10px;
}

.projetTitre2 { 
	color: #000000;
	font-size: 20px;
}

/******* Page Contact *******/
.foncote {
	width:32%;
	margin-left:10%;
	height: 80vh;
}

h2.para{
	text-align: center;
	color: #FA1F69;
}

.formulaire_contact {
	margin-left: 15%;
}

.formulaire{
	width: 80%;
	margin-top: 50px;
	justify-content: center;
}

p.msg_success {
	display: block;
    font-family: 'kabel';
    font-weight: 100;
    color: #FA1F69;
    text-align: center;
}

.submitButton {
    display: flex;
    justify-content: center;
}

.submitPopUp {
	margin-top: -5px;
}

.submitPopUp:hover {
	margin-top: -5px;
}

.formPopUp .form textarea {
	width: 100%;
	margin-top: 10px;
}

/* * * * Projet * * * * */
.nom_projet_mobile{
	display: none;
}

.hautPaul { 
	background-image:url(../img/projet/paul/hautp-01.png);
	background-repeat: no-repeat;
	height:400px;
	width:100%;
}

.hautprojet .chiffre{
	margin-top: 0;
}

.hautprojet{
	background-size:100%;
}

.hautFanPage { 
	background-image: url(../img/projet/lovequentin/hautquentin-01.png);
	background-repeat: no-repeat;
	height: 400px;
	width: 100%;
}

.hautSpiny {
	background-image: url(../img/projet/spiny/hautspiny-01.png);
	background-repeat: no-repeat;
	height: 400px;
	width: 100%;
}

.hautLesmecs { 
	background-image: url(../img/projet/lesmecs/header-01.png);
	background-repeat: no-repeat;
	height: 400px;
	width: 100%;
}

.hautKabel { 
	background-image: url(../img/projet/kabel/header-01.png);
	background-repeat: no-repeat;
	height: 400px;
	width: 100%;
}

.video1K {
	width: 40%;
	margin-left: 10%;
}

.video2K {
	width: 40%;
	margin-left: 20%;
}

.hautAir { 
	background-image: url(../img/projet/air/header-01.png);
	background-repeat: no-repeat;
	height: 400px;
	width: 100%;
}

.hautCatfinder { 
	background-image: url(../img/projet/catfinder/header-01.png);
	background-repeat: no-repeat;
	height: 400px;
	width: 100%;
}

.textprojet1 {
	width: 100%;
	color: #000000;
	font-size: 12px;
}

.projetparagraphe {
	margin-top: 80px;
	padding: 0 10px;
	width: 60%;
}

.projetImg2 {
	width: 30%;
	padding: 0 10px;
	margin-top: 40px;
}

.projetTitre3 { 
	margin-top: 46px;
	color: #000000;
	font-size: 20px;
	margin-left: 5%;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg); 
}

.img1L {
	height: 428px; 
	margin-top: -110px;
}

.img2L {
	width: 100%; 
	float: left;
}		

.img3L {
	width:100%; 
	float:left;
}	

.nom_projet{
	display: none;
}

.img1P {
	width: 100%;
}

.img3P{
	margin-bottom: 20px;
}

	/******************* page 404 *****************/

#phrase404 {
	color: #000000; 
	text-align: center; 
	width: 100%; 
	margin: auto; 
	line-height: 3;
}

#erreur {
	color: #FA1F69; 
	text-align: center; 
	font-size: 240px;
}

/* Media queries */

@media(max-width: 1100px) {
	h2.bouton_menu {
		color: #000;
	}

	.work, .presa {
		padding: 0 10px;
	}
}

@media(max-width: 720px) {
 
    h1 {
        font-size: 42px;
    }

	#popup .popup-content .fa.fa-times{
	display: block;
	}

	.modal {
	    position: fixed;
	    top: 10%;
	    left: 20%;
	    width: 15%;
	    max-width: 300px;
	    min-width: 300px;
	    height: 450px;
	    -webkit-transform: translateX(0) translateY(0);
	    -moz-transform: translateX(0) translateY(0);
	    -ms-transform: translateX(0) translateY(0);
	    transform: translateX(0) translateY(0);
	    border-radius: 0;
	}

	.close{
		background-image: none;
	}

	.close .fa.fa-times {
		display: block;
	    font-size: 24px;
	    position: absolute;
	    right: -20px;
	    top: -20px;
	    z-index: 2000;
	    cursor: pointer;
	    opacity: 1;
	}

/* * * * * Presa * * * * */

	.hautpage{
		height: 300px;
	}

	.photopresa{
		display: none;
	}

	.textpresa{
		font-size: 24px;
	}

	.textheadpresa{
		margin-top: 20px;
		margin-left: 10%;
		width: 80%;
	}

	.l1presa{
		font-size: 18px;
	}

	.intro{
		margin-top: 10px;
		display: block;

	}

	.col1, .col2, .col3{
		width: 100%;
		margin: auto;
	}

	.presentation1{
		margin-top: 10px;
	}

	/* * * * * Portfolio * * * * */
	section.flex.projet.margin_portfolio {
		margin-top: 0;
	}
	.effet{
		width: 100%;
	}

	.effet1 {
		width: 100%;
	}

 	section.flex.projet{
 		display: block;
 		width: 100%;
 	}

 	.flex.end{
 		margin-bottom:0px;
 	}

 	/* * * * * Page contact * * * * */
 	.foncote{
		display: none;
	}

	/* * * * * Home page * * * * */
	section.flex.projet.home{
		margin-top: 0; 
	}

	/* * * * * Projet * * * * */
	.nom_projet_mobile{
		display: none;
	}

	.video1K {
		width:60%; 
	}

	.video2K {
		width:40%; 
		float:none; 
		margin-left:auto; 
		margin-right:auto; 
		display:block;
	} 

	.portfolioparti1{
		margin-top: 20px;
	}

	.textintro{
		width: 80%;
	}

	.flex.projetPortfolio{
		display: block;
	}

	.flex.projetPortfolio.order{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.projetTitre1, .projetTitre3{
		margin-top: 50px;
		margin-left: 10%;
		transform: none;
		margin-top: 10px;
		order: -2;
	}

	.projetTitre3~.textprojet, .projetTitre1~.textprojet{
		order: -1;
	}

	.projetImg1{
		order: 1;
	}

	.textprojet{
		width: 80%;
		margin-left: 10%;
		margin-top: 10px;
	}

	.projetparagraphe{
		width: 80%;
	}

	.projetImg2{
		width: 100%;
	}

	.projetImg1{
		margin-left: 10%;
	}

	.portfolioparti3{
		position: absolute;
		top: 300px;
		right: 200px;
	}

	.triangle{
		max-height: 320px;
		position: absolute;
		top: 250px;
		right: 20px;
	}

}
 
@media(max-width: 480px) {
 
    #popup .popup-content .fa.fa-times{
	display: block;
	}

    /* * * * HOME * * * */
    
	.ennonce{
		font-size: 1.2rem;
	}

	.soustitre.home_projet{
		width: 100%;
	}

	.soustitre {
		margin-bottom: 20px;
	}

	.soustitre p{
		font-size: 0.8rem;
		width: 100%;
	}

	.soustitre.presa img, .soustitre.work img {
		max-width: 100%;
	}
    
    .work{
    	width: 100%;
    }

	.work .flex, .presa .flex {
		flex-direction: column;
	}

	.work .flex > p, .presa .flex > p {
		width: 100%;
	}

 	section.flex.projet{
 		display: block;
 		width: 100%;
 	}

 	.effet2, .effet1, article.soustitre.projet_home .effet2{
 		margin-top: -5px;
 	}

 	.iconfooter{
 		width: 35%;
 	}
 
	/* * * * * Portfolio * * * * */

	.effet1 {
		width: 100%;
	}


	/* * * * * Contact * * * * */
	.foncote{
		display: none;
	}

	.form_contact{
		margin: 0 auto;
	}

	.formulaire{
		width: 90%;
	}


	/* * * * * Projet * * * * */
	.flex.intro {
		margin-left: 10%;
	}

	.nom_projet_mobile {
		display: block;
		font-size:1.9rem; 
		font-weight:700; 
		color:#FA1F69;
		font-family:"Source Sans Pro";
		line-height: 200px;
		margin-left: 10%;
	}

	.nom_projet {
		display: none;
	}

	.hautPaul { 
		height: 200px;
	}

	.hautFanPage { 
		height: 200px;
	}

	.hautSpiny {
		height: 200px;
	}

	.hautLesmecs { 
		height: 200px;
	}

	.hautKabel { 
		height: 200px;
	}

	.hautAir { 
		height: 200px;
	}

	.hautCatfinder { 
		height: 200px;
	}

	.chiffre{
		display: none;
	}

	.hautport{
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 160px;
	}

	.triangle{
		display: none;
	}

	.portfolioparti1{
		margin-top: 20px;
		width: 100%;
	}

	.textintro{
		width: 90%;
	}

	.flex.projetPortfolio{
		display: block;
	}

	.flex.projetPortfolio.order{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.projetTitre3~.textprojet, .projetTitre1~.textprojet{
		order: -1;
	}

	.projetImg1{
		order: 1;
		height: initial;
	}

	.projetImg1.img3P {
		margin-bottom: 50px;
	}

	.colonne1 {
		margin-top: 20px;
	}

	.projetTitre1, .projetTitre3{
		margin-top: 50px;
		margin-left: 10%;
		transform: none;
		margin-top: 10px;
		order: -2;
	}

	.projetTitre3{
		margin-top: -30px;
	}

	.textprojet{
		width: 80%;
		margin-left: 10%;
		margin-top: 10px;
	}

	.projetparagraphe{
		width: 80%;
		margin-top: 0;
	}

	.projetImg2{
		width: 100%;
	}

	.projetImg1{
		height: 200px;
	}

	/* * * * * Presa * * * * */
	.hautpage{
		height: 300px;
	}

	.photopresa{
		display: none;
	}

	.textpresa{
		font-size: 24px;
	}

	.textheadpresa{
		margin-top: 20px;
		margin-left: 10%;
		width: 80%;
	}

	.l1presa{
		font-size: 18px;
	}

	.intro{
		margin-top: 10px;
		display: block;
	}

	.col1, .col2, .col3{
		width: 100%;
	}

	.presentation1{
		margin-top: 10px;
	}

/* * * * * Pop up * * * * */
    h1 {
        font-size: 32px;
    }
 
    .popup-content h3 {
        font-size: 2em;
    }

    .close {
        right: 1px;
        top: 1px;
    }

	.modal {
	    position: fixed;
	    top: 15%;
	    left: 15%;
	    width: 15%;
	    max-width: 300px;
	    min-width: 300px;
	    height: 450px;
	    -webkit-transform: translateX(0) translateY(0);
	    -moz-transform: translateX(0) translateY(0);
	    -ms-transform: translateX(0) translateY(0);
	    transform: translateX(0) translateY(0);
	    border-radius: 0;
	}

	.close{
		background-image: none;
	}

	.close .fa.fa-times {
		display: block;
	    font-size: 24px;
	    position: absolute;
	    right: 10px;
	    top: 10px;
	    z-index: 2000;
	    cursor: pointer;
	    opacity: 1;
	}
 
}