html{
	font-size: 62.5%
}

body{	margin-left:auto;
		margin-right:auto;
		margin-top:0;
		margin-top:0;
		font-size:1.5rem;
		font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
		color: #574e42;
}

header img{
		margin-top: 0;
}

h1{		font-size:2.5rem; 
		display: block;
		width: 85vw;
		font-weight:normal;
		text-align:center;
		color: #fff;
		background-color: #7D170F;
		margin-top: 3rem;
		margin-bottom: 3rem;
		font-family: "Quicksand", serif;
		margin-left:auto;
		margin-right:auto;		
		padding: 1rem 2px 1rem 2px;
} 



/* Encadré "Bénédicte Lamothe" */

header p {display:block;
		background-image: url("../images/header-benedicte-lamothe.jpg");
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size:100%;
		margin:0;
		height:438px;
		font-family: "Quicksand", serif;
		color: #ffffff;
		font-size: 3rem;
		padding: 0.3rem 3rem;
		text-align: left;		
}

header span{font-family: 'Lobster', cursive, serif;
		padding: 0.2rem 0.3rem 0.6rem 0.3rem ;
		text-align: center;
		color: #ff3333;
		font-size: 4rem;
		background-color: rgba(255,255,255,0.7);
		border: 0.5rem solid #ff3333;
		width: 330px;
		display: block;
		margin-top: 10rem;
}

#logo {	display: block;
		position:relative;
		left: 10%;
		top: 6rem;
		font-family: "Lato", sans-serif;
}

#slide2		
	{background: #fff center 0 no-repeat fixed;
}	

/*Menu*/

nav{	text-transform: uppercase;
		text-align:center;
		position: fixed;
		top:0px;
		width:100%;
		box-shadow: 0 5px 8px rgba(0, 0, 0, 0.28);
		z-index: 2;
		font-weight:300;
}

nav ul{	color: #fff;
		background: linear-gradient(to right, #BF1717, #E63316, #F07E2A); 
		letter-spacing: 0.1rem;
		margin:0;
		padding-left: 0;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
}


.active{background-color:#999999;
}

.active:hover{
		color:#574e42;
}

nav li{	display:table-cell;
		list-style-type: none;
		width: auto;
}

nav a {	color:#fff;
		font-size: 1.8rem;
		text-decoration:none;
		line-height:4.5rem;
		width:auto;
		padding: 0 1em 0 1em;
		vertical-align:center;
		display:block;	
}
	 
nav a:hover {
		color:#7D170F;
}
	 
.article-seo {
	margin-left:10%;
}
		

/* Ma photo */	

#benedicte{
		float: left;
		margin-right: 20px;
		margin-bottom: 20px;
		transform: translateY(5px);
		-ms-transform: translateY(5px);
		-webkit-transform: translateY(5px);
		-moz-box-shadow: 3px 3px 5px 0px #999999;
		-webkit-box-shadow: 3px 3px 5px 0px #999999;
		box-shadow: 3px 3px 5px 0px #999999;
		z-index: 1;
}


/* corps de texte */		
	
p, body p ul li, .puce{		
		margin-top: 1em; 
		padding:0;
		line-height: 1.5em;
		font-size: 1.2em;
		font-family: "Lato", "Calibri", sans-serif;
		margin-left: 10%;
		margin-right: 10%;
}

body p ul li{line-height: 1.2em;
		font-size: 1em;
}

hr {	width:90%;
	color:#999999;
	margin-top: 1em;
}

p a{color: #ff3333;
	text-decoration: none;
	}
		
p a:hover{color: #7D170F;
		text-decoration: none;}

.text-center {
  text-align: center !important;
}


#hugo {	width: 100%;
		margin-top:2em;
}		


/* Font Awesome */

.fas {
	font-size:8rem;
	margin-bottom:2rem;
}

.fa-h1 {
		font-size: 3rem!important;
		color:#fff;
		margin-bottom:0!important;
}

.fa-p  {
		font-size: 4rem!important;
		margin-bottom:0!important;
}

.fa-petit  {
		font-size: 2rem!important;
		margin-bottom:0!important;
		color: #ff3333!important;
}

#carte-cv, #carte-realisations, #carte-photos, #carte-articles, #carte-sites, #carte-affiches {
	border: solid 0.4rem #ff3333;
    background-color: white;
    width: 21rem;
    margin-left:3rem;
    margin-right:3rem;
    padding-top:3rem;
	padding-bottom:3rem;
	display:flex;
	flex-direction:column;
	align-items: center;
}

#blocs{display: flex;
		flex-direction: row;
		justify-content: center;
		margin:5rem;
	}		



/*Footer*/		
		
#citation2{	display: block;
		/*background-image: url("../images/footer-benedicte-lamothe.jpg");*/
		background-repeat: no-repeat;
		background-size: contain;
		height: 249px;
		background-attachment:fixed;
}		
	
#mots-cles{	display: block;
		background-image: url("../images/benedicte.lamothe.png");
		background-repeat: no-repeat;
		background-size: contain;
		height: 400px;
		background-attachment:fixed;
		margin-left: 5%;
		background-position: center;
}
	
#footer{color: #fff;
		background-color: #999999;
		font-size: 1em;
		padding-top: 0.5em;
		text-align:center;
}

#bloc-twitter{
		margin-top:2em;
		margin-bottom: 1em;
}

#widgets li{	
		list-style-type: none;
		width: auto;
}

#footer p{font-size: 1em;
		margin: 0px;
}

#footer a{color: #ccc;
		text-decoration: none;
}

#footer a:hover{
		color:#574e42;
		text-decoration: none;
}

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

footer ul li, footer ul li a, footer ul li em{
		display: inline-block;
		vertical-align: middle;
}

#widgets li, #widgets li a{
		vertical-align: top;
}

footer div{vertical-align: top;
}

#retrouvez {
		font-size: 1em;
		line-height: 1.1em;
}

.reseaux{font-size: 0.8em;
		font-family: "Roboto Condensed";
		display: inline-block;
		padding: 0.5em 0.5em 0 0;
		text-align: center;
		width: 48px;
}

#facebooktext, #twittertext, #linkedintext, #instagramtext, #pinteresttext {
	font-size:1.3rem!important;
	margin:0 0.8rem 0.5rem 0.8rem!important;
}

.reseaux img{		
		margin-left:8%;
	}

.reseaux:hover{
		transform: translateY(-3px);
		-ms-transform: translateY(-3px);
		-webkit-transform: translateY(-3px);
}

.cv{	padding: 0;
		font-size: 0.8em;
		text-align: right;
		vertical-align: top;
}

.cv:hover{
		transform: translateY(-3px);
		-ms-transform: translateY(-3px);
		-webkit-transform: translateY(-3px);
}

#mentions { 
		background: linear-gradient(to right, #BF1717, #E63316, #F07E2A); 
		color: #ffffff;
		vertical-align: middle;
		margin-top: 0;
		padding: 1.5em;
		text-align:center;
}

#mentions a {		
		color: #ffffff;
		text-decoration: none;
}

#mentions a:hover{
		color:#999999;
		text-decoration: none;
}

ul li img{vertical-align: middle;
}

footer ul li:first-child{
		padding-right:5%
}

/*Portfolio*/

#affiche1, #affiche5, #affiche3, #affiche4{
		height: 300px;
		border: 2px solid #fff;
		/*box-shadow: 3px 3px 8px #555;*/
		margin-right: 20px;
		margin-bottom: 20px;
}

#maquette1, #maquette5, #maquette6{
		width: 250px;
		border: 2px solid #fff;
		/*box-shadow: 3px 3px 8px #555;*/
		margin-right: 30px;
		margin-bottom: 20px;
}

/* Photos */

ul.photos{
		display: flex;
		flex-direction: row;
		flex-wrap:wrap;
		justify-content: center;
		margin-left:6%;
		margin-right:6%;
}

ul.photos li{
		display: inline-block;
		list-style-type: none;
		padding-top: 20px;
		padding-right: 10px;
		margin-right:auto;
		margin-left:auto;
}

.photo {
		box-shadow: 3px 3px 8px #555;
		border: solid 5px #fff;
		margin: 5px;
}


.photo2 {
		box-shadow: 3px 3px 8px #555;
		border: none;
		margin: 5px;
}

/* Fin Portfolio */


/* Formulaire de contact */

input, textarea{
		padding: 8px;
		width: 300px;
}

.g-recaptcha{
	display: inline-block;
	margin-bottom: 3rem;
}

label {
	font-size:1.5rem;
}

#rgpd {
	height:20px!important;
}

#submit {
	color: #ff3333;
	font-family:"Roboto", "Calibri", sans-serif;
	font-size: 1.2em;
	font-weight: 500;
	line-height: 3rem;
	text-transform: uppercase;
    background-color: #fff;
    border: solid 2px #ff3333;
    cursor: pointer;
    margin-bottom:5rem;
    padding: 10px 50px;
    text-align: center;
    transition: 0.5s;
    border-radius: 2px;
    letter-spacing:2px;
    box-shadow: 1px 1px 3px #555;
}

#submit:hover {    
    background-color: #eee;
}

/* Fin Formulaire de contact */


/* CV */

.cv p {margin-right:5%;
}

#linkedin2 {
		transform: translateY(10px);
		-ms-transform: translateY(10px);
	}		
		
#formation{
		display:inline-block;
		width:45%;
		margin-left: 5%;
		vertical-align: top;
}		

.cv2 {width:98%;
}

/*#formation h1{
		width:95%;
		margin-left:0;
}*/
		
#formation p, #experience p{
		margin: 1em 0 0 0;
}

.date{	display: inline-block;
		vertical-align: top;
		padding-right: 0px;
		width:3em;
}

.description{
		display: inline-block;
		width:70%;
}
	
#cispm, #espagne{
		font-size: 92%;
}

h2{		font-size: 1.3em;
		color: #ff3333;
		margin: 1.5em 0 1em 5%;
}

#experience {
		display:inline-block;
		width:45%;
		vertical-align: top;
}

/*#experience h1{
		width:95%;
		margin-left:5%;
}*/

#experience p{
		margin-bottom: 0.7em;
		margin-top: 0em;
		margin-left: 7%;
}

#experience .date{
		line-height:1.5em;
		font-size:1.2em;
}

#experience .date .type-experience{
		font-size:1em;
		color:#999999;
}

#sr{	margin-left: 5%;
		margin-bottom: 0.7em;
		color: #ff3333;
		margin-top: 0em;
}

.sr{	font-size: 92%;
}
		
.grand_carre{
		height: 22px;
		width: 22px;
		background-color: #ff3333;
		float: left;
		margin-bottom: 0;
		margin-right: 8px;
}

#competences{
		margin-top:2em;
		}

#logiciels, #CMS{
		display: inline-block;
		width: 260px;
		margin-right: 20px;
		margin-top: 0px;
		vertical-align: top;
}

#langages, #langages2{ 
		display: inline-block;
		width: 250px;
		margin-right: 10px;
		margin-top: 30px;
		vertical-align: top;
		height: 100px;
}
	
#grammaire, #anglais, #seo{
		display: inline-block;
		margin-right: 14px;
		vertical-align: top;
		height: 80px;
		width: 250px;
}

#cm{	display: inline-block;
		margin-right: 14px;
		vertical-align: top;
		height: 80px;
		width: 270px;
}

#formation img{
		padding-right: 12px;
		float: left;
}
	
#js img{	padding-bottom: 5px;
		padding-top: 10px;
}	

#html5 img{
		padding-top: 2px;
}

#sql img{padding-top: 6px;
}

	
#formation .carre {	
		height: 20px;
		width: 20px;
		margin-right: 2px;
		background-color: #ff3333;
		display: inline-block;
		margin-top: -5px;
}

#formation .carre_vide{
		height: 20px;
		width: 20px;
		margin-right: 2px;
		background-color: #cccccc;
		display: inline-block;
		margin-top: -5px;
}	
			
 .nom{
		vertical-align: top;
		height: 60px;
}

/*Fin CV */


/* Responsive */

@media screen and (min-width: 1100px) and (max-width: 1292px){
	header p{
		background-size:contain;
	}
}


@media screen and (min-width: 1000px) and (max-width: 1099px){
	header p{
		background-size:contain;
	}

}


@media screen and (min-width: 794px) and (max-width: 990px){

	header p{
		background-size:contain;
	}
	
	.description{
		width:50%;
	}

	.photo, .photo2 {
		max-width: 700px;
}
}


@media screen and (min-width: 721px) and (max-width: 793px){

	header p{
		background-size:contain;
	}
	
	.description{
		width:50%;
	}

	nav ul{
		flex-direction: column;
		}		

	.photo, .photo2 {
		max-width: 500px;
}
}


@media screen and (max-width: 720px) {

	html{
	font-size: 55%
}

	nav {position: relative;
	}
	
	header span{
		float: none;
		display: block;
		margin:1rem;
		width:auto;
	}
	
	header p{
		/*background-position:80%;*/
		/*background-size: contain;*/
		padding:0;
		height:200px;
	}
	
	#citation1{
		text-align:center;
		margin-left:0;
		margin-right:0;
		margin-top:0px;
		width:100%;
		height:100px;
	}
		
	body{display: block;
		width: 100%;
		padding-right: 1em;
		margin-right: 2em;
	}
	
	nav{	width:auto;
	}
	
	nav ul{
		font-size: 0.9em;
		letter-spacing: 0em;
		flex-direction: column;
	}
	
	nav li{
		list-style-type: none;
		display:inline;
	}
	
	
	#benedicte{
		margin-left:20px;
	}


	#blocs{display: flex;
		flex-direction: column;
		justify-content: center;
		margin-bottom:3rem;
		align-items: center;
	}	

	#carte-cv, #carte-realisations, #carte-photos {
	border: solid 0.4rem #ff3333;
    background-color: white;
    width: 21rem;
    margin:2rem;
    padding-top:1rem;
	padding-bottom:1rem;
	display:flex;
	flex-direction:column;
	align-items: center;
}

	.photo, .photo2 {
	max-width: 300px;
}

	#formation h1, #experience h1{
		width:85vw;
		margin-left:auto;
		margin-right:auto;
	}

	section#formation, section#experience{
		display:initial;
		margin-left:1%;
		margin-right:1%;
		width:100%;
	}
	
	.date {
		padding-left:2%;
		width:4.5em;
	}
	
	#experience .date, #experience p{
		width:95%;
	}
	
	#experience .date{
		margin-top:1em;
		margin-left:0;
		/*font-weight:bold;*/
		width:100%;
	}
	
	#experience p{
	margin-left:0;
	padding-right:5%;
	padding-left:5%;
	}

	#logiciels div.nom, #CMS div.nom {
		height:20px;
	}
	
	#competences .nom {
		text-align: left;
		vertical-align: top;
		padding-top: 5px;
		line-height: 1em;
	}	
	
	.description{
		width:60%;
	}
	
	#mots-cles{
		background-image:none;
		height:auto;
	}
	
	#competences img{
		padding-right: 20px;
		padding-bottom: 20px;
		float: left;
}
	
	.carre {
		height: 14px;
		width: 14px;
		background-color: #e75b10;
		display: inline-block;
		margin-right: 0.5px;
		margin-top: 1px;
}

	.carre_vide{
		height: 14px;
		width: 14px;
		margin-right: 0.5px;
		margin-top: 1px;
		color: rgba(255,255,255,0);
		display: inline-block;
	}
	
	#logiciels, #CMS, #langages, #langages2, #divers{
		display: inline;
		width:100%;
		height:auto;
	}
	
	#grammaire, #anglais, #seo, #CMS, #logiciels, #competences, .nom{
		margin-left:2em;
	}
	
	#competences .nom{
		display: inline;
		height:0;
		width:100%;
	}
	
	#site1{
		margin-left:0;
		margin-right:0;
	}
	
	#site1 img{
		display:block;
		width:100%;
	}
	
		#photo4, #photo6, #photo5{
		display:block;
		width:95%;
		margin-left:0;
	}
	
	ul.photos{
		margin-left:0;
		}
	
	#mots-cles{
	margin-left:0;
	}
	
	#divers {
		margin-left: 0;
	}
			
	
	#retrouvez{
		width:100%;
	}
	
	.cv{
		width:100%;
		text-align: center;
	}
	
	#code{
		margin-top:0;
		font-size:1em;
		}
	
	#citation2{
		background-image:none;
		height:auto;
	}
	
	input, textarea {
		width:auto;
	}
	
}

/*Fin media queries */