@font-face {
font-family: 'baucher';
	src: url('fonts/baucher/baucher-gothic-urw-medium-extended-webfont.eot?') format('eot');
	src: url('fonts/baucher/baucher-gothic-urw-medium-extended-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/baucher/baucher-gothic-urw-medium-extended-webfont.woff2') format('woff2'),
     url('fonts/baucher/baucher-gothic-urw-medium-extended-webfont.woff') format('woff'),
     url('fonts/baucher/baucher-gothic-urw-medium-extended-webfont.ttf') format('truetype'),
     url('fonts/baucher/baucher-gothic-urw-medium-extended-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'sofia_black';
	src: url('fonts/sofia_black/sofia_pro_black_thefontsmaster.com-webfont.eot?') format('eot');
	src: url('fonts/sofia_black/sofia_pro_black_thefontsmaster.com-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/sofia_black/sofia_pro_black_thefontsmaster.com-webfont.woff2') format('woff2'),
     url('fonts/sofia_black/sofia_pro_black_thefontsmaster.com-webfont.woff') format('woff'),
     url('fonts/sofia_black/sofia_pro_black_thefontsmaster.com-webfont.ttf') format('truetype'),
     url('fonts/sofia_black/sofia_pro_black_thefontsmaster.com-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'sofia_bold';
	src: url('fonts/sofia_bold/sofia_pro_bold_thefontsmaster.com-webfont.eot?') format('eot');
	src: url('fonts/sofia_bold/sofia_pro_bold_thefontsmaster.com-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/sofia_bold/sofia_pro_bold_thefontsmaster.com-webfont.woff2') format('woff2'),
     url('fonts/sofia_bold/sofia_pro_bold_thefontsmaster.com-webfont.woff') format('woff'),
     url('fonts/sofia_bold/sofia_pro_bold_thefontsmaster.com-webfont.ttf') format('truetype'),
     url('fonts/sofia_bold/sofia_pro_bold_thefontsmaster.com-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'sofia_light';
	src: url('fonts/sofia_light/sofia_pro_light_thefontsmaster.com-webfont.eot?') format('eot');
	src: url('fonts/sofia_light/sofia_pro_light_thefontsmaster.com-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/sofia_light/sofia_pro_light_thefontsmaster.com-webfont.woff2') format('woff2'),
     url('fonts/sofia_light/sofia_pro_light_thefontsmaster.com-webfont.woff') format('woff'),
     url('fonts/sofia_light/sofia_pro_light_thefontsmaster.com-webfont.ttf') format('truetype'),
     url('fonts/sofia_light/sofia_pro_light_thefontsmaster.com-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'freeland';
	src: url('fonts/freeland/freeland-webfont.eot?') format('eot');
	src: url('fonts/freeland/freeland-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/freeland/freeland-webfont.woff2') format('woff2'),
     url('fonts/freeland/freeland-webfont.woff') format('woff'),
     url('fonts/freeland/freeland-webfont.ttf') format('truetype'),
     url('fonts/freeland/freeland-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}

body {
	margin: 0;
}

a {
	text-decoration: none;
	color: black;
}
a:visited{
	color: black;
}

li{
	list-style-type: none;
}
.head{
	width: 100%;
	text-align: center;
	margin-top: 3vw;
}

.head_content{
	width: 50%;
	margin: auto;
	text-align: center;
}

.logo{
	width: 30%;
    margin: auto;
    text-align: center;
    margin-bottom: 3vw;
}

.logo img{
	width: 100%;
}



h1 {
font-family: 'baucher';
font-size:4vw;
}

.menu {
	width: 100%;
	text-align: center;
	height: 12vw;
}

.menu_content{
	width: 70%;
	height: 100%;
	margin: auto;
	text-align: center;
}

.menu_content div{
	width: 25%;
	text-align: center;
	float: left;
}

.menu_content h3{
	font-family: 'sofia_bold';
	font-size: 2vw;
}
.effect {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  overflow: hidden;
}
.effect:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  right: 50%;
  bottom: 0;
  background: black;
  height: 0.5vw;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.effect:hover:before, .effect:focus:before, .effect:active:before {
  left: 25%;
  right: 25%;
}

.effect2 {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
}
.effect2:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 25%;
  right: 25%;
  bottom: 0;
  background: black;
  height: 0.5vw;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}


/* PAGE 1 */

.intro{
	width: 80%;
	height: 40vw;
	margin: auto;
	background-image: url("img/octopus.jpg");
	background-size: cover;
	background-position: center;
}

.text_intro{
	width: 20%;
}

.text_up{
	background-color: black;
	width: 20%;
	padding-top: 10vw;
}

.text_up h2{
	font-family: 'sofia_black';
	font-size:5vw;
	color: white;
	margin-left: 2vw;
}

.text_down{
	background-color: white;
	width: 44%;
}

.text_down h2{
	font-family: 'sofia_black';
	font-size:5vw;
	color: black;
	margin-top: -4vw;
	margin-left: 2vw;
}


.news{
	width: 80%;
	margin: auto;
	margin-bottom: 10vw;
}

.news_entete h4{
	font-family: 'sofia_bold';
	font-size:2vw;
}

.news hr {
	width: 100%;
	display: block;
    border-style: inset;
    border-width: 0.3vw;
    border-color: black;
}

.article {
	width: 100%;
}

.article_date{
    width: 6%;
    float: left;
    text-align: right;
    margin-left: -7vw;
    margin-top: -0.5vw;
}

.article_date h4{
	font-family: 'sofia_bold';
	font-size: 1vw;
}

.article_titre{
    margin-bottom: -3vw;
    width: 46%;
}

.article_titre h4{
	font-family: 'sofia_bold';
	font-size:3vw;
}

.article_photo{
    width: 55%;
    float: left;
}

.article_photo img{
	width: 100%;
}

.article_photo p{
	font-family: 'sofia_light';
	font-size: 1vw;
}

.article_photo a:hover{
	color: #f3594c;
}

.article_texte{
    width: 42%;
    text-align: justify;
    float: left;
    margin-left: 3%;
}

.article_texte a{
    text-decoration: none;
    color: #f3594c;
}

.article_texte a:hover{
    text-decoration: underline;
    color: #f3594c;
}

#invert {
	margin-left: 0;
	margin-right: 3%;
}

.article_texte p{
    float: left;
    margin-top: 0;
    text-align: justify;
    font-family: 'sofia_light';
    font-size:1.1vw;
    margin-bottom: 3vw;
}

.article hr{
    margin-top: 32vw;
}

.plus_actu{
	width: 100%;
	text-align: center;
}

.plus_actu h5{
	font-family: 'sofia_bold';
	font-size: 1vw;
}

#myList li{ display:none;
}
#test {
    display:none;
}

#loadMore {
    cursor:pointer;
}

.bas_page {
	width: 100%;
	text-align: center;
}

.copyright {
	width: 100%;
	text-align: center;
}

.copyright h6 {
	font-family: 'sofia_light';
	font-size: 1vw;
}


/* PAGE PROJETS */

.color_projets{
	background-color: #384258;
	color: white;
}
.color_projets .logo img{
	-webkit-filter: invert(100%);
    filter: invert(100%);
}

.color_projets a{
	text-decoration: none;
	color: white;
}

.color_projets a:visited{
	color: white;
}

.color_projets .effect:before{
	background:white;
}
.color_projets .effect2:before{
	background:white;
}

.entete_projet{
	width: 80%;
	margin:auto;
	height: 14vw;
	margin-bottom: 8vw;
}

.presentation_projet{
	width: 100%;
}

.slogan_projet{
    width: 40%;
    float: left;
    margin-right: 20%;
}

.slogan_projet h3{
    font-family: 'sofia_black';
    font-size: 3.5vw;
    margin-top: 1vw;
}

.resume_projet{
    width: 40%;
    float: left;
    margin-top: 3vw;
}

.resume_projet p{
	font-family: 'sofia_light';
    font-size: 1.2vw;

}

.photo_projet{
	width: 80%;
	height: 40vw;
	margin: auto;
	background-image: url("img/image2.jpg");
	background-size: cover;
	background-position: center;
	margin-bottom: 9vw;
}

.titre_projet{
	width: 20%;
}

.titre_projet h2{
	color: #f3594c;
    font-family: 'sofia_black';
    font-size: 4vw;
    margin-top: 0;
    margin-left: -5vw;
    padding-top: 5vw;
}

.developpement_projet{
	width: 80%;
	margin: auto;
	margin-bottom: 43vw;
}

.texte_developpement{
	width: 40%;
	float: left;
	margin-right: 10%;
	margin-top: 14vw;
}

.texte_developpement h4{
	font-family: 'sofia_bold';
	font-size: 2vw;
	margin-top: 0;
}

.texte_developpement p{
	font-family: 'sofia_light';
	font-size: 1vw;
}

.visuel_developpement{
	width: 50%;
	float: left;
}

.visuel_developpement img{
	width: 100%;
}

.visuel_developpement iframe{
	width: 100%;
	height: 30vw;
}

/* PAGE EQUIPE */

.color_equipe{
	background-color: #f3594c;
	color: white;
}
.color_equipe .logo img{
	-webkit-filter: invert(100%);
    filter: invert(100%);
}
.color_equipe a{
	text-decoration: none;
	color: white;
}

.color_equipe a:visited{
	color: white;
}

.color_equipe .effect:before{
	background:white;
}
.color_equipe .effect2:before{
	background:white;
}

.entete_equipe{
	width: 80%;
	margin: auto;
}

.slogan_equipe{
	width: 60%;
}

.slogan_equipe h2{
	font-family: 'sofia_black';
	font-size: 4vw;
}

.colonnes_equipe{
	width: 80%;
	margin: auto; 	
    margin-bottom: 150vw;
}

.colonne1{
	width: 45%;
	float: left;
	margin-right: 10%;

}

.colonne1 div{
	margin-bottom: 8vw;
}

.colonne2{
	width: 45%;
	float: left;
}

.colonne2 div{
	margin-bottom: 8vw;
}

.presentation_equipe{
	width: 80%;
}

.presentation_equipe h4{
	font-family: 'sofia_bold';
	font-size:2vw;
	margin-bottom: 1vw;
}

.presentation_equipe p{
	font-family: 'sofia_light';
	font-size:1vw;
	margin-top: 0;
}

.photo_equipe{
	width: 100%;
	height: 30vw;
}

#elliot{
	background-image: url("img/elliot.jpg");
	background-size: cover;
	background-position: center;
}
#elliot h6{
	margin-right: 13vw;
}
#mathilde{
	background-image: url("img/mathilde.jpg");
	background-size: cover;
	background-position: center;
}
#mathilde h6{
	margin-right: 6vw;
    margin-top: -2vw;
}
#victoire{
	background-image: url("img/victoire.jpg");
	background-size: cover;
	background-position: center;
}
#victoire h6{
	margin-right: 9vw;
}
#sophie{
	background-image: url("img/sophie.jpg");
	background-size: cover;
	background-position: center;
}
#sophie h6{
	margin-right: 13vw;
}
#julie{
	background-image: url("img/julie.jpg");
	background-size: cover;
	background-position: center;
}
#julie h6{
	margin-right: 12vw;
	margin-top: -2vw;
}
#alodia{
	background-image: url("img/alodia.jpg");
	background-size: cover;
	background-position: center;
}
#alodia h6{
	margin-right: 9vw;
}

.personne{
	width: 100%;
	padding-top: 26vw;
}

.personne h6{
	float: left;
	font-family: 'sofia_light';
	font-size: 2vw;
	margin-top: 0;
    margin-right: 18vw;
    margin-left: 2vw;
    color: #f3594c;
}

.personne h5{
	float: left;
	font-family: 'freeland';
	font-size: 3vw;
    margin-top: -1vw;
}


/* PAGE CONTACT */

.color_contact{
	background-color: #7dc7c2;
	color: white;
}
.color_contact .logo img{
	-webkit-filter: invert(100%);
    filter: invert(100%);
}

.color_contact a{
	text-decoration: none;
	color: white;
}

.color_contact a:visited{
	color: white;
}

.color_contact .effect:before{
	background:white;
}
.color_contact .effect2:before{
	background:white;
}

.entete_contact{
	width: 80%;
	margin: auto;
	margin-bottom: 30vw;
}

.slogan_contact{
	width: 50%;
	float: left;
	margin-right: 5%;
}

.slogan_contact p{
	font-family: 'sofia_black';
	font-size: 4vw;
}

.fleche{
	float: left;
	width: 17%;
	margin-top: 4vw;
}

.fleche img{
	width: 100%;
	margin-top: 4vw;
}
.mail{
	float: left;
	width: 15%;
	margin-top: 3vw;
	margin-left: 9%;

}

.mail img{
	width: 100%;
	margin-top: 4vw;
}
.adresse{
	width: 80%;
	margin:auto;
	text-align: center;
}
.texte_adresse {
	width: 100%;
	text-align: center;
}
.adresse p{
	font-family: 'sofia_light';
    font-size: 1.5vw;
}

.carte{
	width: 100%;
}