body {
	
	margin: 0px;
	padding: 0px;
	font-family: "EB Garamond", serif;
	font-size: 20px;
	
}

div#cookie_box {
    color: #fff;
    background: #c10230;
    padding: 9px 10px;
    position: fixed;
    bottom: -100%;
    z-index: 25;
    left: 0px;
    width: 100%;
    text-align: center;
    display: block;
	box-sizing: border-box;
	font-size: 16px;
	animation: cookie_box_hello 2s 7s;	
	animation-fill-mode: forwards;
}

#realisations_zone a, #realisations_zone a:hover, #realisations_zone a:active  {
	color: #C71943;
}

body.blog-item section#wrapper_full div.content a {
	
	color: #c10230;	
	
}

@keyframes cookie_box_hello {
	
	from {
		
		bottom: -100%;
		
	}
	
	to {
		bottom: 0%;
	}
	
}



div#cookie_box a, div#cookie_box a:visited, div#cookie_box span {
	font-weight: bold;
	cursor: pointer;
	color: #fff;
	animation: cookie_box_hello 2s;
	display: inline-block;
	zoom: 1;
	*display: inline;
	text-decoration: underline;
	margin-left: 15px;
	
}

.overflow_hidden {
	overflow: hidden;
}

section#global_wrapper {
	overflow-x: hidden;
}

body, div, section, p, a, li, ul, span {
	outline: none;
}

section#wrapper section#homepage {
	
	position: absolute;
    left: 0;
    width: 100%;
    height:100vh;
	display: block;
	background-color: #fff;
	box-sizing: border-box;
	// border: 15px solid #1b0007;
    overflow: hidden;
	padding: 15px;
}


section#hello {
	
	width: 33%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateY(-50%);
	/* background: rgba(255, 255, 255, 0.9); */
	padding: 20px;
	box-sizing: border-box;
	
}

section#hello p {
	
	display: none;
	
}

.homepage_background_elements {
	
	background: rgba(255,255,255, 0.95);
	
}

span#section_active_portfolio {
	display: none;
}

section#social_network {
	font-style: italic;
	position: absolute;
	width: 20px;
	bottom: -250px;
	right: 15px;
	text-align: center;
	margin: auto 15px 15px auto;
	animation: socialnetwork_entrance 1.2s 1.5s;
	animation-fill-mode: forwards;
}

@keyframes socialnetwork_entrance {
	
	from {
		bottom: -250px;
	} to {
		bottom: 15px;
	}
	
}

#social_network label {
	transform: rotate(90deg);
	display: block;
	margin-bottom: 30px;
}

section#social_network a:not(:last-child) {
	display: block;
	margin-bottom: 20px;
}

section#social_network a {
	display: block;
	width: 20px;
	height: 20px;
}


section#social_network a img, #hamburger-1 {
	transition: all ease 0.1s;
}

a.instagram {
	height: 20px; width: 20px; display: block; background: url(../img/insta_black.svg);
	transition: all ease 0.3s;
}
a.instagram:hover {
	background: url(../img/insta_rouge.svg)
}

a.facebook {
	height: 20px; width: 20px; display: block; background: url(../img/facebook_black.svg);
	transition: all ease 0.3s;
}

a.facebook:hover {
	background: url(../img/facebook_rouge.svg)
}

a.linkedin {
	height: 20px; width: 20px; display: block; background: url(../img/linkedin_black.svg);
	transition: all ease 0.3s;
}

a.linkedin:hover {
	background: url(../img/linkedin_rouge.svg)
}

footer section {
	
	display: inline-block;
	zoom: 1;
	*display: inline;
	width: 33%;
	text-align: left;
	
}

footer {
	
	margin: 0px 7.5vw 40px 7.5vw;
	font-weight: bold;
	font-size: 15px;
	
}

footer img {
	
	margin: 110px auto 70px auto;
	
}

footer .social {
	font-style: italic;
	font-size: 20px;
}

footer .social a {
	display: inline-block;
	zoom: 1;
	*display: inline;
}

#contact > footer > section.align_left > div.red {
	font-size: 18px;
}

span#compteur_portfolio {
	display: none;
}

.red_title {
	
	color: #c10230;
	font-style: italic;
	font-size: 25px;
	
}

.msg {
    font-size: 17px;
    padding: 10px;
    margin-top: 30px;
    margin-bottom: 0px !important;
	color: #fff;
	display: none;
}

#error_msg {
    background: #C10230;
	animation: shake 1s;
	white-space: initial;
}

#success_msg {
    background: #000;
	animation: fadeInUp 1s;
	white-space: initial;
}



.rotate_90deg {
	transform: rotate(90deg); 
}

span.red_line_width {
	display: inline-block;
	zoom: 1;
	*display: inline;
	height: 1px;
	width: 0px !important;
	background: #c10230;
	animation: red_line_width_animation 2s;
	animation-fill-mode: forwards;
	margin-right: 5px;
}

span.black_line_width {
	display: inline-block;
	zoom: 1;
	*display: inline;
	height: 1px;
	width: 0px !important;
	background: #000;
	animation: red_line_width_animation 2s;
	animation-fill-mode: forwards;
	margin-right: 5px !important;
	padding: 0px !important;
}

span.red_line_height {
	display: block;
	height: 0px;
	width: 1px;
	background: #c10230;
	animation: red_line_height_animation 2s;
	animation-fill-mode: forwards;
	margin: 25px 7px;
}

@keyframes red_line_width_animation {
	to { width: 63px;  }
}

@keyframes red_line_height_animation {
	to { height: 63px;  }
}

section#hello p {
		
	font-size: 45px;
	margin: 10px auto;
		
}

section#hello a.button {
	
	opacity: 0;
	animation: fadeIn 1s 6.5s;
	animation-fill-mode: forwards;
	
}

@keyframes fadeIn {
	
	from {
		opacity: 0;
	} to {
		opacity: 1;
	}
	
}

section#about_us div#meet_the_team div#our_services, section#about_us div#meet_the_team div#our_services_description  {
	
	display: inline-block;
	zoom: 1;
	*display: inline;
	vertical-align: top;
	
}

section#about_us div#meet_the_team div#our_services_description {
	
	width: 365px;
	
}

section#about_us div#meet_the_team div#our_services_description div {

	margin-left: 30px;
	width: 525px;

}

div#our_services_description div {
	
	display: none;
	
}

section#about_us span.first {
	
	cursor: pointer;
	transition: all ease 0.3s;
	
}

section#about_us span.first:hover, section#about_us span.first.active {
	
	color: #c10230;
	
}

div#our_services_description span.red {
	font-weight: bold;
}



.fadeInRight {
	opacity: 0;
	animation: fadeInRight 1s 1s;	
	animation-fill-mode: forwards;
	transition: all ease 0.3s;
}

section#portfolio {
	
	padding-bottom: 200px;
	
}

section#portfolio nav {
	
	right: 15px;
	
}

div#logo {
	
	position: fixed;
	z-index: 20;
	top: 0px;
	left: -400px;
	/* animation: logo_entrance 1.8s 0.62s; */
	animation: logo_entrance 0.5s 0.8s;
	animation-fill-mode: forwards;
	background: rgba: (255, 255, 255, 0);
	
}

div#logo_white {
	
	position: absolute;
	top: 0px;
	left: 0px;
}

@keyframes logo_entrance {
	
	to {
		left: 0px;
	}
	
}

div#logo img {
	animation: fadein_background_logo 1.5s 3s;
	animation-fill-mode: forwards;
}

@keyframes fadein_background_logo {
	
	to {
		background-color: rgba(255, 255, 255, 0.9);
	}
	
}


div#logo div.line {
	position: absolute;
	background: #c10230;
	height: 5px;
	width: 41px;
	top: 60px;
}


div#logo_white div.line {
	position: absolute;
	background: #fff;
	height: 5px;
	width: 41px;
	top: 51px;
}

div#logo img, div#logo_white img {
	margin-left: 70px;
}

nav.fixed div#logo_white img {
	width: 122px;
}

div#logo img {
	/* width: 45%; */
	width: 150px;
}

div#logo h1 {
	margin-top: 35px;
}	

  .button, section#portfolio section#caroussel_container section.titre,
  .button, section#portfolio_mosaique section.titre
  {
    text-decoration: none;
    color: #36363C;
    display: inline-block;
	zoom: 1;
	*display: inline;
    padding: 4px 5px 6px 5px;
    transition: all .5s ease-out;
    box-sizing: border-box;
    text-decoration: none;
    box-shadow: inset 0 -5px 0 #c10230;
	font-weight: bold;
  }
  
  section#portfolio section#caroussel_container section.titre,
  section#portfolio_mosaique section.titre
  {
	  color: #fff;
	  font-style: italic;
	  padding: 0px 0px 12px 0px;
	  font-size: 20px;
  }
  
  .button:hover{
      box-shadow: inset 0 -55px 0 0 #c10230;
      color: white;
   }
  
  
.memphis_effect {
    position: absolute;
    width: 100%;
    height: 100vh;
    left:0;
    background-repeat: no-repeat;
    background-position: center center;
	animation-fill-mode: forwards;
	background-repeat: repeat;
	
}

.memphis-layer1 {
    background-image: url(../img/elements-graphiques1-01-01.png);
}
.memphis-layer2 {
    background-image: url(../img/elements-graphiques2-01-01.png);
}
.memphis-layer3 {
    background-image: url(../img/elements-graphiques3-01-01.png);
}

/* Exemple de ligne commenté juste au-dessus */


div#hamburger_menu.fixed.global {
	
	position: fixed;
	height: 80px;
	z-index: 200;
	top: -95px;
	padding-right: 40px;
    padding-top: 18px;
	right: 0px;
	transition: all ease 1s;
	
}


nav.fixed div#logo_white h1 {
	
	margin-top: 18px;
	
}

div#hamburger_menu.fixed.global .line {
	background: #fff;
}

nav.fixed div.triangle {
	border-top: 15px solid #1b0007;
	bottom: -15px;
	transition: all ease 0.5s;
}

.fond_rouge {
	border-top: 15px solid #C10230 !important;
	transition: all ease 0.5s;
}

nav.fixed {
	position: fixed;
	height: 80px;
	z-index: 40;
	background: #1b0007;
	width: 100%;
	display: block;
	top: -95px;
	transition: all ease 1s;
}

nav.fixed div.hamburger {
	
	padding-right: 40px;
    padding-top: 18px;
	
}

nav.fixed.animate, div#hamburger_menu.fixed.global.animate {
	top: 0px;
}

nav.fixed ul {
	
	position: absolute;
	right: 15px;
	margin-top: 20px;
	
}

nav.fixed li {
	
	display: inline-block;
	zoom: 1;
	*display: inline;
	font-size: 25px;
	font-weight: bold;
	
}

nav.fixed li a {
	
	color: #fff;
	
}

nav.fixed li:not(:last-child) {
	
	margin-right: 20px;
	
}





/* Spécial Hamburger */

div#hamburger_menu.homepage {
	
	position: fixed;
	right: -145px;
	top: 45px;
	z-index: 1;
	font-size: 18px;
	animation: menu_entrance 1.2s 1s;
	animation-fill-mode: forwards;
  
}



div#hamburger_menu a.button {
	font-size: 30px;
	position: absolute;     
	top: -10px;
    right: 70px;
}


div#hamburger_menu.fixed span.button {
    font-size: 30px;
    position: absolute;
    top: 8px;
    right: 110px;
    color: #fff;
	cursor: pointer;
}



@keyframes menu_entrance {
	from {
		right: -135px;
	}
	
	to {
		right: 45px;
	}
}

div#hamburger_menu.inverse_color {
	z-index: 20;
}

div#hamburger_menu.inverse_color span.line {

	background: #fff;

}

.hamburger .line{
  width: 33px;
  height: 5px;
  background-color: #000;
  display: block;
  margin: 7px auto;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.hamburger.is-active .line {
	margin: 8px auto;
}

div.hamburger {
  float: right;
  padding-left: 25px;
}

.hamburger:hover{
  cursor: pointer;
}

.hamburger.is-active .line:nth-child(2){
  opacity: 0;
}

.hamburger.is-active .line:nth-child(1){
  -webkit-transform: translateY(13px) rotate(45deg);
  -ms-transform: translateY(13px) rotate(45deg);
  -o-transform: translateY(13px) rotate(45deg);
  transform: translateY(13px) rotate(45deg);
}

.hamburger.is-active .line:nth-child(3){
  -webkit-transform: translateY(-13px) rotate(-45deg);
  -ms-transform: translateY(-13px) rotate(-45deg);
  -o-transform: translateY(-13px) rotate(-45deg);
  transform: translateY(-13px) rotate(-45deg);
}


div.triangle {
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 15px solid #fff;
	position: absolute; bottom: 0px; left: 50%; z-index: 20; transform: translateX(-50%);
}


.border {

	position: absolute; background: #1b0007; z-index: 10;

}

.border-bottom {
	
	right: 0%; bottom: 0%; width: 0%; height: 15px;
	animation: border-bottom 0.4s linear;
	animation-fill-mode: forwards;
	
}

@keyframes border-bottom {
	from { width: 0%; } to { width: 100%; }
}

.border-left {
	
	left: 0%; bottom: 0%; width: 15px; height: 0%;
	animation: border-left 0.4s linear 0.4s;
	animation-fill-mode: forwards;
	
}

@keyframes border-left {
	from { height: 0%; } to { height: 100%; }
}

.border-top {
	
	left: 0%; top: 0%; width: 0%; height: 15px;
	animation: border-top 0.4s linear .8s;
	animation-fill-mode: forwards;
	
}

@keyframes border-top {
	from { width: 0%; } to { width: 100%; }
}

.border-right {
	
	right: 0%;
	top: 0%;
	width: 15px;
	height: 0%;
	animation: border-right 0.4s linear 1.2s;
	animation-fill-mode: forwards;
	transition: all ease 0.5s;
	
}

#menu_homepage, #menu_global {
	transition: all ease 0.5s;
	position: relative;
}

#menu_homepage ul, #menu_global ul {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	margin: 0px;
	padding: 0px;
	width: 100%;
	line-height: 39px;
	left: 0%;
}

#menu_homepage ul li a, #menu_global ul li a  {
	color: #1b0007;
	font-weight: bold;
	text-decoration: none;
	font-size: 30px;
	margin-left: 100%;
}

#menu_homepage a.is_coming, #menu_global a.is_coming {
	margin-left: 0%;
}

#menu_homepage a.active, #menu_global a.active  {
	color: #fff;
}

#menu_homepage.unroll {
	right: 15px !important;
}

#menu_global.unroll {
	right: 0px !important;
}

ul.menu {
	margin-top: 30%;
	list-style-type: none;
}

.unroll .menu {
	display: inline-block;
	zoom: 1;
	*display: inline;
}

@keyframes border-right {
	from { height: 0%; } to { height: 100%; }
}

/* SCROLLBAR CUSTOMISÉ */

/* width */
::-webkit-scrollbar {
    width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #5f5f5f; 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #c10230; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #830020; 
}


section#portfolio, section#about_us, section#portfolio_mosaique {
	
	background: #1b0007;
	color: #fff;
	
}

section#about_us section.wrapper, section#contact section.wrapper, section#clients section.wrapper, section#blog section.wrapper {
	margin: auto 7.5vw;
}

section#clients {
	
	background: url("../img/background_clients_horizontal.jpg");    
	background-repeat: no-repeat;
    background-position: top 100px left 7.5vw;
	
}

section#clients {
	
	padding-top: 190px;
	padding-bottom: 100px;
	text-align: left;
	
}

section#clients div.logo-item {
	
	display: inline-block;
	*display: inline;
	zoom: 1;
	width: 24% !important;
	text-align: center;
	
}

section#clients img {
	
	margin: 20px 20px;
	height: 34px;
	
}

section#contact input {
	font-family: "EB Garamond", serif !important;
}

section#contact textarea {
	font-family: "EB Garamond", serif !important;
	font-size: initial;
	height: 110px;
}

section#about_us span.second, section#about_us span.first {
	
	line-height: 32px;	
	font-weight: bold;
	
}

section#white_container {
	border: 15px solid #1b0007;
}

section#contact {
	
	background: url("../img/background_contact_us_horizontal.jpg");    
	background-repeat: no-repeat;
    background-position: top 100px left 7.5vw;
	padding-top: 200px;
	
}

section#contact input, section#contact textarea {
	
	/* padding: 10px 20px; */
	background: #c10230;
	color: #fff;
}

section#contact {
	
	white-space: nowrap;
}

section#contact input {
	width: 47.5%;
}

section#contact input.margin-right {
	margin-right: 5%;
}

section#contact textarea {
	
	width: 101%;
	border: none;
	
}


section#contact input, section#contact textarea {
	
	border: none;
	margin-bottom: 15px;
	font-style: italic;
	padding: 6px 11px;
	box-sizing: border-box;
	font-size: 22px;
	font-family: initial;
	
}

.align_center {
	text-align: center;
}

.align_right {
	text-align: right;
}

.align_left {
	text-align: left;
}

.red {
	color: #C10230;
}

section#contact img, section#contact div.formulaire {

	vertical-align: bottom;
	display: inline-block;
	zoom: 1;
	*display: inline;

}

section#contact div.formulaire {
	
	margin-top: 30px;
	border-box: box-sizing;
	
}

section#contact div.formulaire div {
	
	margin-bottom: 30px;
	
}

section#contact img.main {
	
	width: 55%;
	margin-right: 5%;
	
}

section#contact button {
	
	background: none;
	border: none;
	font-family: initial;
	cursor: pointer;
	font-size: 18px;
	
}

section#contact div.formulaire {
	
	width: 50%;
	
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #e1a4ad;
opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #e1a4ad;
}

::-ms-input-placeholder { /* Microsoft Edge */
color: #e1a4ad;
}

section#portfolio a, section#portfolio span.link {
	color: #fff;
	cursor: pointer;
}

section#portfolio section.content img,
section#portfolio_mosaique section.content img {
	width: 60%;
}

section#portfolio section.content section.description,
section#portfolio_mosaique section.content section.description {
	width: 39.5%
}

section.description a.button { font-size: 18px; }

section#portfolio section.content img,
section#portfolio section.content section.description,
section#portfolio_mosaique section.content img,
section#portfolio_mosaique section.content section.description {
	
	display: inline-block;
	zoom: 1;
	*display: inline;
	vertical-align: top;
	
}

section#portfolio_mosaique section.content section.description,
section#portfolio section.content section.description {
	
	box-sizing: border-box;
	padding: 30px 30px 0px 30px;
	
	
}


section#portfolio section#caroussel_container {
	
	padding-top: 30px;
	position: relative;
	width: 10000vw;
	/* background: url("../img/background_portfolio.jpg");    
	background-repeat: no-repeat;
    background-position: left 15px center; */
	
}

section#about_us {
	padding-top: 200px;
	padding-bottom: 100px;
	background: url("../img/background_about_us_horizontal.jpg") #1b0007; 
	background-repeat: no-repeat;
	background-position: top 100px left 7.5vw; 
}

section#web, section#event, section#press, section#graphic_design {
	
	display: none;
	
}

section#portfolio span.link {
	box-shadow: inset 0 -7px 0 #1b0007;
	margin-right: 30px;
}

section#portfolio span.link:hover, section#portfolio span.link.active  {
      box-shadow: inset 0 -55px 0 0 #c10230;
}


section.item  {
  width: 85vw;
  margin: 100px 7.5vw 100px 7.5vw;
  display: inline-block;
	zoom: 1;
	*display: inline;
  font-size: 20px;
}

section#portfolio_own_menu span {
	color: #fff;
	cursor: pointer;
}

section#portfolio_own_menu {
  width: 85vw;
  margin: 0px 7.5vw 50px 7.5vw;
  display: inline-block;
	zoom: 1;
	*display: inline;
  font-size: 20px;
}

section#portfolio_own_menu.mobile {
	display: none;
}

section#nav_caroussel, section#blog {
	position: relative;
	z-index: 1;
}

img.medaillon {
	width: 150px !important;
}



body.no-homepage.blog-item div.auteur {
	margin: 50px auto 75px auto;
	padding: 20px 0px;
}

section#nav_caroussel #link_zone,
section#blog #link_zone {
	width: 25px;
	top: 200px;
    right: 55px;
	cursor: pointer;
	position: absolute;
}

section#blog section#link_zone {
	top: 50%; transform: translateY(-50%); display: none;
}


body.no-homepage.blog-item div.vignette {
	display: inline-block;
	vertical-align: top;
}

body.no-homepage.blog-item div.who {
	display: inline-block;
	vertical-align: top;
	margin-left: 30px;
	margin-top: 30px;
}

section#blog a.read_more, body.blog-archive a.read_more {
	color: #c10230 !important;
	display: block;
	margin-bottom: 50px;
}

#blog > section.wrapper section.blog-item p {

	
}

section#nav_caroussel span.next {
	height: 30px; width: 34px; display: block; background-image: url('../img/fleche_droite_blanc.svg'); margin-bottom: 2px;
	transition: all ease 0.2s;
}

section#blog span.next {
	height: 30px; width: 34px; display: block; background-image: url('../img/fleche_droite_rouge.svg'); margin-bottom: 2px;
	transition: all ease 0.2s;
}

section#nav_caroussel span.next:hover {
	background-image: url('../img/fleche_droite_rouge.svg');
}

section#nav_caroussel span.empty,
section#blog span.empty {
	height: 32px; width: 34px; display: none;
}

section#nav_caroussel span.previous {
	height: 30px; width: 34px; display: block; background-image: url('../img/fleche_gauche_blanc.svg');
	transition: all ease 0.2s;
}

section#blog span.previous {
	height: 30px; width: 34px; display: block; background-image: url('../img/fleche_gauche_rouge.svg');
	transition: all ease 0.2s;
}

section#nav_caroussel span.previous:hover {
	background-image: url('../img/fleche_gauche_rouge.svg');
}

.animation_next {
	margin-left: -100.4vw;
	transition: all ease 1s;
}

.animation_prev {
	margin-left: 0vw;
	transition: all ease 1s;
}

nav.second ul {
	
	text-align: right;
	margin-right: 30px;
}

nav.second ul li {
	display: inline-block;
	zoom: 1;
	*display: inline;
	font-size: 22px;
	font-weight: bold;
}

nav.second ul li:not(:last-child) {
	margin-right: 20px;
}



 #about_us .wrapper img {
	
	display: inline-block;
	zoom: 1;
	*display: inline;
	width: 20%;
	
 }
 
 #about_us .wrapper section.presentation {
	
	display: inline-block;
	zoom: 1;
	*display: inline;
	
	width: 78%;
	
	vertical-align: top;
	
	margin-top: 30px;
	
	padding-left: 30px;
	
	box-sizing: border-box;
	
 }
 
 #about_us div.titre {
	 
	 font-size: 30px;
	 font-weight: bold;	
	 font-style: italic;
	 margin-bottom: 30px;
	 
 }
 
 #about_us span.first { 
	display: inline-block;
	zoom: 1;
	*display: inline;
 }
 
 #about_us span.second {
	display: inline-block;
	zoom: 1;
	*display: inline;
	width: 300px;
 }
 
 div#meet_the_team {
	 margin-top: 30px;
 }
 
 div#meet_the_team span {
	 width: 250px;
 }
 
 
 
 div#meet_the_team span.red, section#contact span.red  {
	 color: #c10230;
	 font-style: italic;
 }
 
 section#contact span.red {

	font-size: 25px;

 }
 
 .mobile_only {
	 display: none;
 }
 
 #meet_the_team #our_services span.first.red {
	 cursor: initial;
 }
 
body.no-homepage.blog-item hr {
		margin: 50px auto;
}
 
section.blog-item div.image_zone {
	width: 100%;
	height: 15vw;
    background-position: center !important;
    background-size: 120% !important;
}

section.blog-item div.image_zone:hover {
	background-size: 123% !important;
	transition: all ease 0.3s;
}

section.blog-item {
	display: inline-block;
	*display: inline;
	zoom: 1;
	width: 30%;
	vertical-align: top;
}

/* woluweb - était codé comme ceci, très manuel et donc marge pas correcte lorsqu'on ajoute des articles */
/*
section.blog-item:nth-of-type(1),  
section.blog-item:nth-of-type(2),  
section.blog-item:nth-of-type(4),  
section.blog-item:nth-of-type(5),  
section.blog-item:nth-of-type(7),  
section.blog-item:nth-of-type(8),  
section.blog-item:nth-of-type(10),  
section.blog-item:nth-of-type(11),  
section.blog-item:nth-of-type(13),  
section.blog-item:nth-of-type(14) {
	margin-right: 4%;
}
*/
section.blog-item:nth-of-type(3n+1),section.blog-item:nth-of-type(3n+2) {
	margin-right: 4%;
}

section.blog-item img {
	width: 100%;
}

section.blog-item p {
	text-align: justify;
}

section#blog {
	background: url(../img/background_blog_horizontal.jpg);
	background-repeat: no-repeat;
	background-position: top 100px left 7.5vw;padding-top: 190px;
	padding-bottom: 100px;
	text-align: left;
}

section#blog span.title, body.blog-archive span.title {
	display: block;
	color: #c10230;
	font-size: 22px;
	font-weight: bold;
	margin: 10px 10px 0px 0px;
}

section#blog span.details, body.blog-archive span.details {
	color: #c10230;
}

section#blog span.details {
	font-size: 90%;
}


 
 
 /* Tablette en paysage, écran d'ordinateur de taille petite et moyenne */
 @media screen and (max-width: 1280px) {

	section#hello {
		
		left: 20%;
		width: 65%;
		top: 50%;
		transform: translateY(-50%);
		
	}

}
 
 /* Smartphone en paysage, tablette en portrait et petite tablette en paysage */
 @media screen and (max-width: 1150px) {
	 
	body.no-homepage.blog-item div.quick_link p {
		margin-top: 20px;
	}
	
	body.blog-item div.quick_link {
		padding: 15px 0px !important;
	}
	 
	body.blog-item div#title_zone, body.blog-archive div#title_zone {
		position: initial !important;
		top:  initial !important;
		transform:  initial !important;
		left: initial !important;
	}
	
	body.blog-item div.image_zone_background, body.blog-archive div.image_zone_background {
		height: initial !important;
		padding-bottom: 30px;
	}
	 
	body.blog-item section#wrapper_full img.full_width, body.blog-archive section#wrapper_full img.full_width {
		width: 100% !important;
	}
	
	body.blog-item #wrapper_full div.content {
		width: 100%;
		text-align: justify;
		margin-top: 30px;
	}

	section#blog section.blog-item,
	body.no-homepage.blog-archive section.blog-item
	{
		width: 48%;
		margin-right: 0%;
	}
	
	section#blog section.blog-item:nth-child(odd),
	body.no-homepage.blog-archive  section.blog-item:nth-child(odd) {
		margin-right: 3%;
	}
 
	
	section#portfolio {
	
		padding-bottom: 90px;
	
	}
	
	section#hello p {
		
		font-size: 40px;
		
	}
	
	.mobile_only {
		display: block;
	}
	
	section#portfolio span.link {
		margin-right: 0px;
	}
	
	.desktop_only {
		display: none;
	}
	
	section#portfolio_own_menu.mobile {
		display: block;
		margin: auto 7.5vw auto 7.5vw;
		text-align: left;
		padding-top: 40px;
	}
	
	section#portfolio section#caroussel_container {
		padding-top: 2vh;
	}
	
	
	section#portfolio section.content img {
		width: 88%;
	}
	
	section#portfolio_mosaique section.content img {
		width: 98%;
	}
	
	section#portfolio section.content section.description {
		width: 93%;
	}
	
	section#portfolio_mosaique section.content section.description {
		width: 98%;
		padding: 30px 0px;
	}
	
	#menu_homepage, #menu_global {
		
		width: 100% !important;
		right: -100% !important;
		
	}
	
	#menu_homepage.unroll {
		right: 0px !important;
	}
	
	#menu_homepage ul li a, #menu_global ul li a {
		
		font-size: 50px;
		line-height: 60px;
		
	}
	
	section#contact img.main, section#contact div.formulaire {
		width: 100%;
		display: block;
	}
	
	#about_us .wrapper img, #about_us section.presentation  {
		width: 100% !important;
	}
	
	section#about_us div#meet_the_team div#our_services_description div {
		margin-left: 0px;
		width: initial;
		margin-top: 30px;
	}
	
	footer section {
		width: 100%;
		display: block;
		margin: 40px auto;
		text-align: center !important;
	}
	
	div#our_services, div#our_services span.first {
		width: 100%;
	}
	
	section#about_us div#meet_the_team div#our_services_description {
		width: initial !important;
	}
 
}
 
 
 
 
 
 /* Smartphone en mode portrait */
 @media screen and (max-width: 480px) {
	
	#our_services {
		display: none !important;
	}
	
	div#our_services_description div {
		display: block;
	}
	
	section#contact textarea {
		width: 101.05%;
	}
	
	section#hello {
		left: 15%;
		width: 75%;
	}
	
	section#hello p {
		
		font-size: 32px;
		
	}
	
	div#logo {
		width: 75%;
	}
	
	div#logo img {
		width: 137px;
	}
	
	div#hamburger_menu.homepage a {
		display: none;
	}
	
	div#hamburger_menu.homepage {
		top: 27px;	
	}
	
	section#nav_caroussel #link_zone {
		right: 25px;
	}
	
	section#portfolio span.link {
		margin-bottom: 12px;
	}
	
	section#portfolio section.content section.description {
		width: 100%;
	}
	
	section#contact input {
		width: 100%;
		display: block;
	}
	
	section#contact textarea {
		height: 200px !important;
	}
	
	@keyframes menu_entrance {
		100% {
			right: 36px;
		}
	}
	
	footer img {
		margin: 60px auto 30px auto;
	}
	
	#hamburger_menu > span {
		display: none !important;
	}
		
	div#logo h1 {
		margin-top: 25px;
	}
	
	div#logo img {
		margin-left: 56px;
	}
	
	div#logo div.line {
		top: 46px;
	}
	
}




a.link_no_underline {
	text-decoration: none;
}







/** Pages blog **/

body.blog-item div#by_who {
	font-size: 20px;
}

body.blog-item div#title_zone h1,
body.blog-archive div#title_zone h1 {
	margin-top: 0px; margin-bottom: 0px;font-weight: bold; font-size: 45px;
}

body.blog-item section#wrapper_full img,
body.blog-archive section#wrapper_full img {
	width: 38%;
	margin-right: 5%;
	display: inline-block;
	*display: inline;
	zoom: 1;
	vertical-align: top;
}

body.blog-item div.content,
body.blog-archive div.content {
	display: inline-block;
	*display: inline;
	zoom: 1;
	width: 54%;
	vertical-align: top;
}

body.blog-item section#wrapper_full,
body.blog-archive section#wrapper_full {
	margin: 30px;
}

body.blog-item div.image_zone_background,
body.blog-archive div.image_zone_background {

	height: 25vw;
	background: url("../img/background_full.png");
	position: relative;

}

body.blog-item div#title_zone,
body.blog-archive div#title_zone {
	
	position: absolute;
	top: 50%;
	transform: translateY(-50%) translateX(-50%);
	left: 50%;
	background: rgba(255,255,255, 0.9);
	padding: 29px 50px 0px 50px;
	font-size: 45px !important;
}

body.blog-item p:first-of-type {
	margin-top: 0px;
}

body.blog-item div.quick_link img {
	width: 150px !important;
}

body.blog-item div.quick_link {
	border-bottom: 1px solid #bcbcbc;
	padding: 30px 0px;
}

body.blog-item div.quick_link:last-of-type {
	border: none;
}

body.blog-item div.quick_link a {
	text-decoration: none;
	color: #c10230;
}

body.blog-item span.more_recent {
	font-weight: bold;
	margin-top: 50px;
	margin-bottom: 20px;
	display: block;
}













body.no-homepage div#hamburger_menu.homepage {
	
	display: none;
	
}

body.no-homepage div#logo {
	
	position: absolute;
	animation: none;
	left: 0px;
	display: none;
	
}

body.no-homepage nav.fixed {
	
	top: 0px;
	left: 0px;
	
}

body.no-homepage div#hamburger_menu.fixed.global {
	
	top: 0px;
	
}

body.no-homepage div.image_zone_background {
	
	margin-top: 65px;
	
}

body.no-homepage div.content li {
	margin: 30px auto;
}

body.no-homepage div.content {
	text-align: justify;
}

body.no-homepage #menu_global ul a:hover {
	
	color: #fff;
	
}













/** Fin - Pages blog **/

















/** Page mentions légales & visualisation articles **/

body.no-homepage section#global_wrapper {
	min-height: 95vh;
	border-bottom: 15px solid #1b0007;
	border-left: 15px solid #1b0007;
	border-right: 15px solid #1b0007;
}

body.no-homepage section#wrapper {
	margin: auto auto; width: 760px; text-align: justify;
}

body.no-homepage h1, h2, h3, h4 {
font-size: initial;
font-weight: bold;
color: #c10230;
margin-top: 40px;
}
body.no-homepage h1 {
font-size: 30px;
color: #000;
}
body.no-homepage h2 {
font-size: 22px;
text-align: center;
}
body.no-homepage h3 {
font-size: 18px;
}
body.no-homepage h4 {
font-size: 14px;
}
body.no-homepage div.hr {
width: 60%;
display: block;
margin: 50px auto;
height: 15px;
background: #c10230;
}

body.no-homepage.blog-item div.quick_link p {
	display: inline-block;
}

body.blog-item .tag {
	background-color: #fff;
    border: 1px solid #cbcbcb;
    color: #cbcbcb !important;
    display: inline-block;
    font-family: open sans,sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 28px;
    margin: 0 10px 10px 0;
    padding: 0 10px;
    text-decoration: none;
}



@media screen and (max-width: 1150px) {
	section#clients div.logo-item {
		width: 32% !important;
	}
	
	section#portfolio_mosaique section.item section.content {
	    overflow: auto;
		height: 88vh;
	}
	
	section#portfolio_mosaique section.item {
		margin-top: 30px !important;
	}
}

@media screen and (max-width: 850px) {
	section#clients div.logo-item {
		width: 48% !important;
	}
	
	#portfolio_mosaique figure {
		width: 50% !important;
	}
	
	
	
}

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

	
	section#portfolio_mosaique section.item section.content {
	    overflow: auto;
		height: 80vh;
	}
	
}

@media screen and (max-width: 490px) {
	section#clients div.logo-item {
		width: 100% !important;
	}
	
	#portfolio_mosaique figure {
		width: 100% !important;
	}
}




@media screen and (max-width: 850px) {
 
body.no-homepage.blog-archive section.blog-item,
section#blog section.blog-item {
	width: 100%;
	margin-right: 0%;
}

body.no-homepage.blog-archive section.blog-item div.image_zone,
section.blog-item div.image_zone {
	height: 45vw;
}
 
 body.no-homepage section#wrapper {
	width: 100% !important;
	padding: 0 50px;
	box-sizing: border-box;
 }
 
}

/** Fin - Page mentions légales & visualisation articles **/