html {background-color: #BDBDBD;}
body {margin: 0; /* background-color: inherit !important; z-index: -20; font-family: inherit !important; */ }

.maintenance {text-align: center; margin-top: 0; padding-top: 15%; font-variant: all-small-caps; font-weight: 100;}
.no-link {text-decoration: none; color: inherit;}
.fake_link:hover {cursor: pointer;}
.dark_link {text-decoration: none; color: #666666; border-bottom: solid 1px #666666; transition-duration: .5s;}
.dark_link:hover {color: black; border-bottom: solid 1px rgba(255, 255, 255, 0); transition-duration: .5s;}
.display { opacity: 1 !important; transition-duration: 1s; }
#cover { transition: 1s ease; position: fixed; width: 100%; height: 100vh; /* width: 90.1%; */ overflow: hidden; }
/* #accueil.switch #cover { transform: translateY(-110%) !important; /* top: -900px; */ transition: .5s ease; } */
#accueil.switch { transform: translateY(-110%) !important; /* top: -900px; */ transition: .5s ease; }

#accueil.switch #tague_line {
	transform: translateY(-230%) translateX(-50%);
	transition: .5s ease;
}

#img_cover { height: 100%; width: auto; transform: scale(1.22); }

.loader{
	background: url('../imgs/loading.gif') 50% 45% no-repeat;
	background-color: rgba(255,  255,  255, 1);
	cursor: wait;
	height: 100%;
	left: 0;
	z-index: 9 !important;
	position: fixed;
	top: 56px;
	width: 100%;
	z-index: 9999;
}

/*
#barre-top {
	background-color: #333;
	padding: 15px 0;
	position: fixed;
	top:0;
	z-index: 10;
	width: 100%;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}
*/


#header { display: block; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.4); }
header {position: fixed;}
.mdl-layout__header {
	background-color: #333 !important;
	color: white !important;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !important;
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-property: max-height,box-shadow;
    z-index: 10 !important;
}
.mdl-textfield {width: 90% !important;}
.mdl-layout__header .mdl-layout__drawer-button {color: white !important;}
.mdl-layout__drawer {color:#333 !important;}
.mdl-navigation div {display: flex; justify-content: space-between;}
nav .material-icons {line-height: inherit;}
.mdl-layout__drawer .mdl-navigation { padding-top: 8px !important; }
.mdl-layout__drawer {width: 250px !important; transform: translateX(-250px) !important;}
.mdl-layout__drawer.active {-webkit-transform: translateX(0) !important; transform: translateX(0) !important;}
.mdl-layout__drawer .mdl-navigation .mdl-navigation__link:hover {background-color: inherit !important;}
.mdl--nav_top a {color: #d6d6d6 !important;}
.mdl-layout__drawer .mdl-navigation .mdl-navigation__link { padding: 0 !important; }

#bg_nav {position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-color: transparent; z-index: -5; transition: ease-in-out .4s;} /* transform: translateX(-100%); */
#bg_nav.deploy {z-index: 3; background-color: rgba(0, 0, 0, 0.60); transition: ease-in-out .5s; } /* transform: translateX(0%); */

li { list-style-type: none; }

#barre_nav .mdl-layout-title {background-color: transparent !important; height: 56px;}
#barre_nav {
	position: fixed;
    width: 100%;
    transform: translateY(-100%);
    transition-duration: .9s;
    box-shadow: 0 3px 3px rgba(0,0,0,0.16), 0 3px 3px rgba(0,0,0,0.23);
    z-index: 4;
}

.nav_link { transition-duration: .5s; padding: 20px; }
.nav_link:hover { background-color: rgba(51, 51, 51, 0.2); }
	
	
	

.grey {color: #eaeaea; font-weight: 100;}

/*
nav {
  display: flex;
  justify-content: center;
  background-color: #E0E0E0;
  & ul {
    display: flex;
    & a {
      padding: 1rem 2rem;
    }
  }
} 

nav .material-icons {
	font-size: 20px;
	line-height: 0;
	padding-right: 8px;
	position: relative;
    bottom: -3px;
}
*/

.li_hover {
	transition-duration: .5s;
	margin-top: 2px;
	font-family: Roboto;
}

.li_hover:hover {
	transition-duration: .5s;
	background-color: rgba(51, 51, 51, 0.50);
	color: white;
	cursor: pointer;
}

.cmn-t-underline { text-decoration:none; display: inline-block;}
.cmn-t-underline:hover:after {width: 100%; background: white;}

.cmn-t-underline:after {
	content: '';
	display: block;
	height: 3px;
	width: 0;
	background: transparent;
	transition: width .5s ease, background-color .5s ease;
	-webkit-transition: width .5s ease, background-color .5s ease;
	-moz-transition: width .5s ease, background-color .5s ease;
	margin:auto;
}

nav ul {margin: 0; list-style-type: none; padding: 0; display: flex;}
nav ul li {padding: 10px 10px 6px 10px;}

#menu {
	position: fixed;
	right: 0px;
	top: 6px;
	/* 	background-color: ; */
	padding: 10px 18px 0 10px;
	transition-duration: .9s;
	z-index: 1;
}

#menu:hover {cursor: pointer;}

#menu .menu-barres:first-child {transition-duration: .9s;}
#menu .menu-barres:nth-child(2) {transition-duration: .9s;}
#menu .menu-barres:last-child {transition-duration: .9s;}

.menu-barres {height: 3px; width: 24px; background-color: white; border-radius: 0px; margin-bottom: 5px}

#nav {
	visibility: hidden;
	position: fixed;
	width: 100%;
	transform: translateY(-100%);
	transition-duration: .9s;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
	z-index: 3;
}


#nav.active {transform: translateY(112%); transition-duration: .5s; visibility: visible;}
#menu.active .menu-barres:first-child {transform: rotateZ(45deg) translateY(6px) translateX(4px); transition-duration: .5s;}
#menu.active .menu-barres:nth-child(2) {opacity: 0; transition-duration: .4s;}
#menu.active .menu-barres:last-child {transform: rotateZ(-45deg) translateY(-8px) translateX(5px); transition-duration: .5s;}


.image {
	background-size: cover;
	width: 100%;
/* 	height: 100%; */
	opacity: .8;
	position: absolute;
	top: 50px;
/* 	z-index: -1; */
}

h3 {
	margin: 0 !important;
	color: white;
	padding-left: 20px !important;
	font-family: Roboto;
	font-size: 20px !important;
	line-height: inherit !important
}

#tague_line {
	background-color: rgba(51, 51, 51, 0.6);
	box-shadow: 0 3px 6px rgba(0,0,0,0.20), 0 -3px 6px rgba(0,0,0,0.20);
	padding-top: 10px;
	padding-bottom: 40px;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	transform: translateX(-50%) translateY(-50%);
	/*
		margin-top: 50px;
		padding-top: 50px;
	*/
	transition-duration: .5s;
}

#tague_line:hover {
	transition-duration: 1s;
	background-color: rgba(51, 51, 51, .9);	
}

#tague_line button {margin-top: 10%;}
#tague_line .material-icons {padding-right: 5px;}

#tague_line h1 {
	font-variant: all-small-caps;
	font-size: 70px;
	color: white;
	text-shadow: 1px 1px 12px black;
	margin: 0;
}

#tague_line h1 b { font-size: 100%; color: #448AFF;}

#tague_line p {
	font-variant: all-small-caps;
	color: white;
	font-size: 30px;
	letter-spacing: 5px;
	text-shadow: 1px 1px 12px black;
}

.blue_color {color: #448AFF;}

/* BOUTON A PROPOS */

.bouton_about_down {transform: translate(-50%, -40vh) !important;}
.bouton_about_up {transform: translate(-50%, 40vh) !important;}

/*******************/

/*
#sep1 {
	width : 150%;
	height: 100px;
	border-top: solid 1px #333;
	background-color: white;
	transform: translateX(-20%) translateY(95%) rotateZ(5deg);
}

#sep2 {
	width : 150%;
	height: 100px;
	border-top: solid 1px #333;
	background-color: white;
	transform: translateX(-3%) translateY(-6%) rotateZ(-8deg);
}
*/

#h2_a_propos {
	position: absolute;
	top: 70px; /* Ou 50px si c casse */
	font-family: Montserrat;
	color: white;
	text-shadow: 1px 1px 12px black;
	font-size: 200%;
    font-weight: 400;
	padding-left: 40px;
	opacity: 0;
	transition-duration: .6s;
}

#a_propos {
/* 	border: solid 1px black; */
/* 	background-color: white; */
	width: 100%;
/* 	height: 100vh; */
/* 	position: relative; */
/* 	height: 200px; */ /* ==> A modifier pour y mettre un background image parralax */
/*     margin-top: 50px; */
    
/*     opacity: .0; */
/*     transition-duration: 1s; */
}

#image_a_propos {
	background-color: #333;
/* 	transform: translateY(-100%); */
/* 	opacity: 0; */
	height: 40vh;
	z-index: -1;
	overflow: hidden;
	transition-duration: .8s;
	animation-timing-function: cubic-bezier(.47,1.04,.84,1.04);
	position: absolute;
	line-height: 0;
}

#image_a_propos img {width: 150%; top: -50%; left: -50%; position: relative;}

.a_propos_slide {
/* 	transform: translateY(0%) !important; */
/* 	transition-delay: .2s; */
	transition-duration: .6s;
}

#presentation {
	position: relative;
	width: 90%;
	height: 65%;
	left: 50%;
	z-index: 0;
/* 	border: solid 1px black; */
/* 	bottom: 0; */
	transform: translateY(200%) translateX(-50%);
	display: flex;
	transition: .75s ease-in-out;
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	opacity: 0;
}

#presentation.presentation_slide {
	opacity: 1;
	transform: translateY(0%) translateX(-50%);
	transition: .75s ease-in-out;
}

#gauche_a_propos { width: 40%; background-color: white; }
#droite_a_propos {
	width: 60%;
	overflow: auto;
/*
	height: 100%;
	overflow: scroll;
*/
/* 	background-color: ; */
}

#bouton_down {
/* 	position: absolute; */
/* 	bottom: 2%; */
	z-index: 1;
/* 	left: -50%; */
	box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12), 0 1px 1px 0 rgba(0,0,0,.24);
	transition: .5s ease;
}

#bouton_about {
	position: absolute;
	z-index: 1;
	left: 50%;
/* 	top: 50%; */
	transition-duration: .5s;
	transform: translate(-50%, 0%);
}

#accueil.switch #bouton_down {
/* 	transform: translateX(-50%) rotateZ(180deg) !important; */
	box-shadow: 0 -14px 28px rgba(0,0,0,0.25), 0 -10px 10px rgba(0,0,0,0.22);
	transition: .5s ease;
}

.bouton_down_to_top#bouton_down {
/* 	transform: translateY(-60%) translateX(-50%) rotateZ(180deg) !important; */
}

.gradient-colored {
    background: -webkit-linear-gradient(white, #9E9E9E); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(white, #9E9E9E); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(white, #9E9E9E); /* For Firefox 3.6 to 15 */
    background: linear-gradient(white, #9E9E9E); /* Standard syntax */
}

.container-img {
	display:block;
    height:60%;/*set an height */
    line-height:200px;/* set the baseline at 100px from top*/
    overflow:hidden;/* crops/cut off */
}

#PP {
	width: 100%;
	height: auto;
	cursor: pointer;
	vertical-align:middle;
	transition-duration: .5s;
}

#PP:hover { filter: saturate(190%); transition-duration: .2s; transform: scale(1.2); }

.apercu_hidden {
	visibility: hidden;
	display: none;
	opacity: 0;
	transition-duration: .2s;
}

.apercu {
	position: absolute;
	z-index: 1;
	visibility: visible !important;
	display: inherit;
	opacity: 1;
	transition-duration: .3s;
	top: 55px;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	text-align: center;
}

.apercu img {
	max-width: 90%;
	height: auto;
	max-height: 90%;
/* 	transform: translateX(10%) translateY(5%); */
}

.h2_name {
	font-family: Montserrat;
	margin: 0;
	font-size: 250%;
	text-align: center;
	font-variant: all-small-caps;
}

.h2_name b {font-weight: 800;}

#gauche_a_propos p {
	font-family: Montserrat;
	text-align: center;
	margin: 0;
}

#gauche_a_propos p:first-of-type { font-size: 130%; margin-bottom: 6%; }
#droite_a_propos h2 { text-align: center; font-family: Pacifico; }
#droite_a_propos p { margin: 0 5%; }
#contact { width: 100%; transition-duration: .5s; height: 100vh; }

#contact_quit { position: fixed; top: 75px; right: 20px; z-index: 1; }
#contact_quit i { font-size: 60px; color: white; opacity: .6; transition-duration: .5s; }
#contact_quit i:hover { cursor: pointer; opacity: 1; }

#container_pic_contact {
	width: 150px;
	height: 150px;
	position: relative;
	top: 30px;
	left: 50%;
	transform: translateX(-50%);
	background-color: white;
	border-radius: 50%;
	box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.6);
}

.img_conetenu {
	width: 100%;
	height: auto;
	vertical-align:top;
	transition-duration: .4s;
}

.img_conetenu:hover {
	transform: scaleX(2) scaleY(2) translate(0px,-16px);
	transition-duration: .6s;
}

#contact_form {
	position: absolute;
	display: flex;
	top: 50%;
	left: 50%;
	height: 55%;
	min-height: 470px;
	z-index: 1;
	width: 70%;
/* 	transform: translateX(-50%) translateY(-50%); */
	background-color: white;
	box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.35);
	transition-duration: .7s;
}

#contact_form.contact_shown { transform: translateX(-50%) translateY(-50%); transition-duration: .5s; }

#contact_left {width: 40%; z-index: -4;}
#contact_right {width: 60%;}

#contact_right h2 {
	text-align: center;
	font-size: 25px;
	margin: 0;
	padding: 12px 0;
	background-color: rgb(68,138,255); 
	color: white;
}

#contact_right .mdl-textfield {padding: 18px 0;}
#contact_right .mdl-textfield {display: block !important;}
#form_content {padding: 0 20px; width: 90%;}
#form_content form {display: table; width: 100%;}
#back_form {width: 100%; position: absolute; height: 94vh; top: 50px; background-color: rgba(0, 0, 0, 0.6); transition-duration: 1s;}
#back_form:hover {cursor: pointer;}

#coords_form {
	width: 40%;
    bottom: 0;
    position: absolute;
    height: 63%;
    background-color: #6d6d6d;
    z-index: -1;
}

#coords_form h3 {
	text-align: center;
    padding: 0 !important;
    margin-top: 60px !important;
    margin-bottom: 20px !important;
    font-family: Montserrat;
}

#coords_form p { text-align: center; font-size: 18px; color: white; transition-duration: .6s; }
#coords_form p a:hover {color: rgb(68,138,255); transition-duration: .3s; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);}

form #container-bouton-center {text-align: center; width: 100%;}


#barre-footer {
	background-color: #333;
	display: flex;
	padding: 15px 0;
	position: fixed;
	bottom:0;
	z-index: 10;
	width: 100%;
	box-shadow: 0 -3px 3px rgba(0,0,0,0.16), 0 -3px 3px rgba(0,0,0,0.23);
}

#RS {display: flex; justify-content: space-between; width: 150px; margin-left: 30px;}
#signature_oklm {position: absolute; right: 0; bottom: 0; width: 150px;}
footer p {font-size: 20px; color: white; font-family: Roboto; font-weight: 100;}

footer .material-icons {
	font-size: 20px;
	color: white;
	line-height: 0;
	padding-right: 8px;
	position: relative;
    bottom: -3px;
}

.rs_icons {
	width: 20px;
	height: auto;
	transition-duration: .2s;
}

.rs_icons:hover {
	transform: translateY(-5px);
	box-shadow: 0 5px 6px rgba(0,0,0,0.16), 0 5px 6px rgba(0,0,0,0.22);
	transition-duration: .5s;
}

#merci_envoi {margin: 10%; background-color: white; padding: 5%;}



/* CV */
/* #cv_en_tete div {display: flex; justify-content: space-around;} */
.maintenance {display: none;}
#cv_en_tete {width: 80%; position: relative; left: 50%; transform: translateX(-50%);}
#cv_en_tete h2, #cv_en_tete h3, #cv_en_tete h1 {font-family: Montserrat; font-variant: all-small-caps;}
#cv_en_tete h1 {font-size: 5em; font-weight: 800; text-align: center; line-height: .7; margin: 20px 0 10px 0;}
#cv_en_tete h1 span {font-weight: 800;}
#cv_en_tete h2 {text-align: center; line-height: 35px; font-size: 300%; margin: 0; display: flex; justify-content: space-between;}
#cv_en_tete h2 strong {font-size: 120%;}
#cv_en_tete h3 {color: black; font-weight: 100; text-align: center; position: relative; top: 10px; font-size: 250% !important;}

/*
#competences, #formation, #experience, #divers {
	width: 80%;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}
*/

.demo-card-wide > .mdl-card__title { color: #fff; height: 176px; background: url('../imgs/profile-SF.jpg') center / cover; }
.demo-card-wide > .mdl-card__menu { color: #fff; }

#cv { visibility: hidden; position: fixed; width: 100%; height: 100vh; transition-duration: 1s; transition-timing-function: cubic-bezier(.95,0,.09,1); }
#cv_container { position: fixed; width: 85%; top: 70px; display: inline-flex; height: 75vh; left: 50%; transform: translateX(-50%); z-index: 1; background-color: rgba(0, 0, 0, 0.55); }
#right_cv { width: 55%; background-color: white; overflow: auto; }
#left_cv { width: 45%; margin-top: 10%; }
#back_cv { position: fixed; top: 0; width: 100%; height: 100vh; transition-duration: .9s; transition-timing-function: ease-in-out; /* background-color: rgba(0, 0, 0, 0.5); */ }

.bloc_cv { width: 90%; margin: 20px 5% 0 5%; /* padding: 7% 0 3% 5%; */ }
.thead { background-color: rgba(158,158,158,.2); }
.thead:hover, .thead p:hover { cursor: pointer; }
.tbody { background-color: #f7f7f7;  /* padding: 15px 15px 5px 15px; */ }
.presentation_cv { padding: 10px; }
.presentation_cv p { font-family: Montserrat; }

.thead p { font-size: 2em; color: #333; margin: 0; padding: 30px; }
.tbody p:last-child { margin: 0; }

.cv_left_span {}
.cv_right_span { float: right; }
.cv_right_span i { font-size: 40px !important; line-height: .8 !important; }


input {
  display: none;
  visibility: hidden;
}
label {
  display: block;
  border-bottom: 1px solid #CCC;
  color: #666;
}
label:hover {
  color: #000;
}
.section_cv { padding: 15px 15px 5px 15px; }
#compet_expand, #formati_expand, #expe_expand, #dive_expand {
  height: 0px;
  overflow: hidden;
  transition: height 0.5s;
  background-color: #f7f7f7;
  color: #333;
}
#compet:checked ~ #compet_expand { height: 170px; }
#formati:checked ~ #formati_expand { height: 170px; }
#expe:checked ~ #expe_expand { height: 170px; }
#dive:checked ~ #dive_expand { height: 170px; }




.demo-card-wide.mdl-card { width: 360px; position: relative; left: 50%; transform: translateX(-50%); }
.a_disabled {pointer-events:none; font-style: italic; color: rgba(117, 117, 117, 0.75);}
.mdl-layout__drawer .mdl-navigation .mdl-navigation__link {color: inherit !important;}
/* 	.a_disabled .mdl-layout__drawer .mdl-navigation .mdl-navigation__link {color: rgba(117, 117, 117, 0.31);} */
table.mdl-data-table.mdl-js-data-table {width: 100%;}
/* .mdl-data-table td {padding: 10px 5px 10px 15px !important;} */
/* mdl-data-table__cell--non-numeric {border-bottom: none !important;} */
.border_top {border-top: none !important; padding: 0px 5px 10px 15px !important;}
.border_bottom {border-bottom: none !important; padding: 10px 5px 0px 15px !important;}
.tr_sep , .mdl-data-table tbody tr.tr_sep td, .mdl-data-table tbody tr.tr_sep {height: 10px !important;}
.tr_sep td {padding: 0 !important; margin: 0 !important;}
.mdl-data-table {white-space: inherit !important;}
.mdl-textfield__label:after { bottom: 17px !important; }
/* #experience {display: none;} */
th {padding: 8px 24px !important;}
.cv_h2 {
	font-size: 30px;
    line-height: 10px;
}

.cv_h2 i {
	position: absolute;
    right: 24px;
    top: 28px;
}

.cv_h2 i:hover {cursor: pointer;}

#cv_coords, #competences, #formation, #experience, #divers {margin-bottom: 20px;}

#card_coords div {display: flex; justify-content: space-between;}

#cv_maintenance {
	position: absolute;
	display: inline-block;
	top: 100px;
	width: 80%;
	min-height: 100px;
	left: 50%;
	background-color: white;
	z-index: 2;
	text-align: center;
	box-shadow: 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12), 0 3px 5px -1px rgba(0,0,0,.2);
}

.cv_on { transform: translate(-50%, 0%) !important; transition-duration: 1s; transition-timing-function: ease-in-out; }
.cv_off { transform: translate(-50%, -150%); transition-duration: 1s; transition-timing-function: ease-in-out; }




/* CREATIONS */

#creations {
	display: none;
	z-index: 2;
	position: absolute;
	width: 100%;
	height: 100vh;
	background-color: #F5F5F5;
	top: 0;
	left: 0;
	overflow-y: scroll;
}

/* *********** */
#crea_10 > .mdl-card__title { background: url('../includes/creations/GP/form_demande_devis_GP.png') center / cover no-repeat #46B6AC; }
#crea_9 > .mdl-card__title { background: url('../includes/creations/GP/offres_espace_pro/screenshot.png') center / cover no-repeat #46B6AC; }
#crea_8 > .mdl-card__title { background: url('../includes/creations/LPWD/programmation/AFrame-Lehmann/screenshot.png') center / cover no-repeat #46B6AC; }
#crea_7 > .mdl-card__title { background: url('../includes/creations/LPWD/programmation/AFrame-Scene_3D/screenshot.png') center / cover no-repeat #46B6AC; }
#crea_6 > .mdl-card__title { background: url('../includes/creations/LPWD/calendar/screenshot.png') center / cover no-repeat #46B6AC; }
#crea_5 > .mdl-card__title { background: url('../includes/creations/GP/bannieres/screenshot.png') center / cover no-repeat #46B6AC; }
#crea_4 > .mdl-card__title { background: url('../includes/creations/GP/simulateurV10.png') center / cover no-repeat #46B6AC; }
#crea_proj_intern > .mdl-card__title { background: url('../includes/creations/LPWD/chars_latents/screenshot.png') center / cover no-repeat #46B6AC; }
#crea_3 > .mdl-card__title { background: url('../includes/creations/LPWD/Motion_design/screenshot.png') center / cover no-repeat #46B6AC; }
#crea_2 > .mdl-card__title { background: url('../includes/creations/LPWD/Viktor_Hertz/Thriller_hertz.jpg') center / contain no-repeat #333; }
#crea_1 > .mdl-card__title { background: url('../includes/creations/LPWD/programmation/Animated_float_cards_3D/screenshot.png') center / cover no-repeat #46B6AC; }
/* *********** */

.center { text-align: center; }

#creations_container { position: relative; margin-top: 60px; padding: 20px; }
#creations_container .demo-card-square { margin-bottom: 20px; }

.demo-card-square.mdl-card { width: 320px; height: 320px; }
.demo-card-square > .mdl-card__title { color: #fff;	}

#creations_container h1 { font-family: Montserrat; }
#liste_creations { display: flex; flex-wrap: wrap; flex-direction: row; width: 100%; justify-content: space-evenly; }
#liste_creations .mdl-card__title { padding: 0; }
#liste_creations .mdl-card__title h2 { padding: 16px; background-color: rgba(0, 0, 0, 0.3); min-width: 288px; display: inline-block; }


@media screen and (max-width: 700px) {
	
	/* NAV */
	.mdl--nav_top a {display: none !important;}
	
	/* HOME */
	#tague_line h1 { font-size: 40px; line-height: .9; margin-bottom: 15px; }
	#tague_line p { font-size: 26px; }
	
	/* ABOUT */
	#h2_a_propos {top:60px; margin: 0; padding-left: 5%;}
	#droite_a_propos h2 {display: none;}
	#gauche_a_propos {display: none;}
	#droite_a_propos {width: 100%; margin-bottom: 70px; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}
	#droite_a_propos p:first-of-type {margin-top: 5%;}
	#presentation {height: 900px !important; top: -160px; box-shadow: inherit; }
	
	/* CV */
	#cv_en_tete {width: 90%; position: relative; left: 50%; transform: translateX(-50%);}
	#cv_en_tete h1 {font-size: 5em; font-weight: 800; text-align: right; line-height: .7; margin: 10px 0;}
	.demo-card-wide.mdl-card { width: 100%; }
	
	#competences, #formation, #experience, #divers {
		width: 100%;
		box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
		position: relative;
		left: 0;
		transform: translateX(0%);
	}
	
	
	/* CONTACT */
/* 	#contact_form {display: none;} */
	#contact_form #contact_left { display: none; }
	#contact_form { width: 90%; height: 65%; top: 45%; }
	
	#contact_form form #container-bouton-center {
	    bottom: 0;
	    position: absolute;
	    left: 0;
	    margin-bottom: 20px;
	}
	
	#contact_right {width: 100%;}

}