* {
	margin:0;
	padding:0;
}

html, body {
  width: 100%;
  height: 100%;
}

/*curseur en forme de pain + police*/
body {
	cursor: url("../img/pointer/pointer_bread.cur"), pointer; /*Curseur en forme de pain*/
	font-family: helvetica;
	font-size: 1rem;
}

a:link, input[type=submit] {
	cursor: url("../img/pointer/pointer_bread_bw.cur"), pointer; /*Curseur N&B pour liens*/
}

p {
	text-align: justify;
	font-size: 1rem;
	line-height: 1.25rem;
}

/*Règles communes*/

/*images responsives*/
.img_menu img, .img_title img, .img_news img, #titre_about img, #titre_about_mobile img, .thumbnail_project img, .img_project img, .one_img_project img { 		
	max-width: 100%;
	height: auto;
}

/*Organisation des pages*/
.page {
	min-height: 100%; 
  	display: flex;
}

/*images de fond des pages*/
#page_contact {
	background-image: url("../img/background/background_contact.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed; /*empeche l'image de scroller*/
	background-position: center;
}
#page_about {
	background-image: url("../img/background/background_about.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed; /*empeche l'image de scroller*/
	background-position: bottom;
}
@media screen and (min-width: 768px) { /*affichage ordi*/
#page_accueil {
	background-image: url("../img/background/danse_liberte.gif");
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed; /*empeche l'image de scroller*/
	background-position: center;
}
}
@media screen and (min-width: 667px) and (max-width: 767px) { /*affichage mobile*/
#page_accueil {
	background-image: url("../img/background/danse_liberte2.gif");
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed; /*empeche l'image de scroller*/
	background-position: center;
}
}
@media screen and (max-width: 666px) { /*affichage mobile*/
#page_accueil {
	background-image: url("../img/background/danse_liberte3.gif");
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed; /*empeche l'image de scroller*/
	background-position: center;
}
}

/*Page about, contact, news + menu*/
#presentation_about, #presentation_contact, #presentation_news {
	display: flex;
	flex-direction: column;
}
#presentation_contact, #presentation_news, #presentation_about {
	margin: 0 1.5%;
}
#sidenav-sidebar div {
	padding: 2%;
}

/*Page about*/
#paragraphe_about {
	height: 100%;
}
#titre_about {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#cv, #text {
	padding: 2% 0;	
}

/*Page contact*/
#presentation_contact {
	justify-content: center;
	align-items: center;
}
#text_contact a {
	text-decoration: none;
	color: #3d3d40;
}
#text_contact p {
	font-weight: bold;
}
h2 {
	padding-top: 10%;
}

/*Page news*/
.img_news {
	text-align: center;
}

#mc_embed_signup_scroll {
	display: flex;
	align-items: center;
	height: 30px;
}

.email {
	border-radius: 3px;
	width: 200px;
	height: 26px;
}

.button {
	background-color: #5d5d5d;
	border: none;
	border-radius: 5px;
	color: #F8F8FF;
	font-size: 1rem;
	padding: 5px 10px;
	font-weight: bold;
}

.clear {
	margin-left: 5px;
}

#aria-hidden {
	display: none;
}

/*Affichage ordinateur*/
@media screen and (min-width: 813px) {
	/*Page about, contact, news*/
	#presentation_about, #presentation_contact, #presentation_news {
		width: 50%;
		margin-left: 25%;
	}

	/*Page about*/
	#titre_about {
		height: 30%;
		width: 100%;
	}
	#titre_about_mobile {
		display: none;
	}
	#text_about {
		height: 40%;
		width: 100%;
	}
	#mep_presentation_about {
		height: 30%;
	}
	#home_about {
		visibility: hidden;
	}

	/*Page news*/
	#presentation_news h3 {
		margin-top: 1em;
		visibility: hidden;
	}
	.paragraphe_news {
		margin: 3% 0;
	}

	/*Titre Mathilde et Juliette (home)*/
	#home_mobile {
		display: none;
	}
	#home, #home_about {							
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 30%;
		padding: 0 5% 0 5%;
	}
	/*Menu de navigation sur ordinateur*/
	#menu, #menu_about {
		width: 25%;
    	height: 100%;
    	position: fixed;
    	overflow: auto;
    	display: block;
	}
	#sidenav, #navigation_about {
		display: flex;
		flex-direction: column;
		height: 70%;
	}
	#menu_about {
		margin-left: 75%;
	}
}


/*Affichage mobile*/
@media screen and (max-width: 812px) {
	.page {
  		flex-direction: column;
	}

	/*Page about*/
	#titre_about {
		display: none;
	}
	#home_about {
		display: none;
	}
	#menu_about, #presentation_about {
		margin-top: 5%;
	}
	#menu_about {
		padding-bottom: 5%;
	}
	#presentation_about div {
		margin-top: 1.5%;
	}
	#menu_about:nth-child(2) {
    order: 3;
}

	/*Page Contact*/
	#presentation_contact {
		flex-grow: 1;
	}

	/*Page news*/
	#presentation_news h3 {
		display: none;
	}
	.paragraphe_news {
		margin: 3% 1%;
	}

  /*Titre Mathilde et Juliette (home)*/
	#home {
		display: none;
	}
	#header_mobile {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 2% 5% 2% 5%;
	}
	#home_mobile {
		margin-left: 5%;
	}

  /*Menu de navigation sur mobile*/
	#menu {
		display: flex;
		flex-direction: column;
		z-index: 100;
	}
	#sidenav {
    	display: flex;
    	flex-direction: column;
	}
	#sidenav-sidebar {
    	display: none;
		position: fixed;
    	background-color: rgba(255,255,255,0.5);
    	height: 100%;
    	width: 100%;
    	left: 0
    	bottom:0;
    	overflow-y: auto;
    	transform: translateX(-100%);
    	-webkit-transition: translateX(-100%);
    	-moz-transition: translateX(-100%);
    	-ms-transition: translateX(-100%);
    	-o-transition: translateX(-100%);
    	transition: transform 0.2s ease-out;
    	-webkit-transition: transform 0.2s ease-out;
    	-moz-transition: transform 0.2s ease-out;
    	-ms-transition: transform 0.2s ease-out;
    	-o-transition: transform 0.2s ease-out;
    	padding-top: 2%;
	}

	.img_menu img {     /*taille img menu en mobile*/
  		max-height: 30px; 
	}
	#portfolio, #publication {
		max-height: 35px;
	}
	#sidenav-sidebar,.sidenav-activated  {
        display: block;
   	}
    .sidenav-activated #sidenav-sidebar {
        transform: translateX(0);
       	-webkit-transition: translateX(0);
    	-moz-transition: translateX(0);
    	-ms-transition: translateX(0);
    	-o-transition: translateX(0);
    }

	/* Menu Hamburger pour mobile*/
	.hamburger {
  		display: inline-block;
  		cursor: pointer;
  		transition-property: opacity, filter;
  		transition-duration: 0.15s;
  		transition-timing-function: linear;
  		font: inherit;
  		color: inherit;
  		text-transform: none;
  		background-color: transparent;
  		border: 0;
  		margin: 0;
  		overflow: visible;
	}
	.hamburger:hover {
  		opacity: 0.7; 
	}
	.hamburger.is-active:hover {
  		opacity: 0.7;
	}
	.hamburger.is-active .hamburger-inner,
	.hamburger.is-active .hamburger-inner::before,
	.hamburger.is-active .hamburger-inner::after {
  		background-color: #000; 
	}
	.hamburger-box {
  		width: 30px;
  		height: 30px;
  		display: inline-block;
  		position: relative; 
	}

	.hamburger-inner {
  		display: block;
  		top: 50%;
  		margin-top: -2px;
	}
	.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
  		width: 30px;
  		height: 4px;
  		background-color: #000;
  		border-radius: 4px;
  		position: absolute;
  		transition-property: transform;
  		transition-duration: 0.15s;
  		transition-timing-function: ease;
	}
	.hamburger-inner::before, .hamburger-inner::after {
  		content: "";
  		display: block;
  	}
	.hamburger-inner::before {
  		top: -7px;				/*espacement des lignes*/
  	} 
	.hamburger-inner::after {
  		bottom: -7px;			/*espacement des lignes*/
  	} 
	.hamburger--3dy .hamburger-box {
  		perspective: 80px;
	}
	.hamburger--3dy .hamburger-inner {
  		transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); 
  	}
	.hamburger--3dy .hamburger-inner::before, .hamburger--3dy .hamburger-inner::after {
  		transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
  	}
	.hamburger--3dy.is-active .hamburger-inner {
  		background-color: transparent !important;
  		transform: rotateX(-180deg);
  	}
	.hamburger--3dy.is-active .hamburger-inner::before {
    	transform: translate3d(0, 7px, 0) rotate(45deg);		/*longueur de la croix*/
    }  
	.hamburger--3dy.is-active .hamburger-inner::after {
    	transform: translate3d(0, -7px, 0) rotate(-45deg); 		/*longueur de la croix*/
	}
}

@media screen and (max-width: 450px) {
	#menu_about {									/*Ajout d'un fond pour affichage du menu en bas de page*/
		background-color: rgba(255, 255, 255, 0.2);
		flex-grow: 1;
	}
}