@charset "UTF-8";
/*!
Theme Name: Scratch from Nicolas Chapelain
Description: Designed for adviso.fr
Author: Nicolas Chapelain
Version: 1.0.0
 */
/*MENU LANGUES */
#menu-item-341-en, #menu-item-341-fr{display:none!important}

html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
:root{
	--orange:#e1671b
}
body {
	margin: 0;
	font-family: 'Red Hat Display', sans-serif; 
	line-height:1.2em; 
	color:#000000
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}
#masthead{transition-duration:0.2s}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1, h2, h3, h4{
	font-family: 'Merriweather', serif;
	color:#000000; 
	}
h2{line-height:1.4em}
h3, h4{line-height:1.2em}
h1 {
	font-size: 2em;
	margin: 0.67em 0;
	text-align: center;
	line-height:1.4em!important;
}
img{}
p{margin-bottom:10px!important; margin-top: 0}
p, section, td{line-height:1.3em}
.site-main a:visited, a{color:#e1671b; text-decoration:none; transition: 0.5s}
.orange{color:#e1671b}
.asterisk{font-family: sans-serif; font-weight:300}
.cta-orange{font-size:20px; margin:0; padding: 10px 20px; border-radius:25px 0 25px 25px; line-height:1em; background:#e1671b; color:#FFFFFF!important; transition-duration:0.5s; font-weight:300}
.cta-orange:hover{background:#000000;}

.cta-noir{font-size:18px; margin:0; padding: 10px 20px; border-radius:25px 0 25px 25px; line-height:1em; background:#000000; color:#FFFFFF!important; transition-duration:0.5s}
.cta-noir:hover{background:#e1671b;}
a.reverse{color:#000000}
a.reverse:hover{color:var(--orange)!important}
a.reverse:visited{color:#000000}
.text-center{text-align:center}
.blanc{
	color:#FFFFFF;
}
.blanc:hover{
	color:var(--orange);

}
footer#footer{
	background:#000000; 
	color:#FFFFFF; 
	padding:20px; 
	display: block; 
	bottom:0; 
	clear:both}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #000000;
	font-family: 'Red Hat Display', sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 2rem;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 2rem;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: var(--orange);
}

a:visited {
	
}

a:hover,
a:focus,
a:active {
	color: inherit;
}

a:focus {
	
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
	text-align:right;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
	transition-duration:0.6s;
	height:0px;
	overflow:hidden;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	
}
button.menu-toggle{
	background:transparent; 
	border:none; 
	padding:0.5rem 0.8rem;
	text-align:right;
	float:right;
	margin-top:5px
}
.menu-main-container ul {display:block; clear:both}
.site-navigation{text-align:right}
.mobilof{display:none} 
/* article footer */
 .list-posts-container article.list-posts .list-post{
	display:flex; 
	border-radius:6px;
}
.list-posts-container article.list-posts{
	max-width:1000px; 
	margin-left:5px; 
	margin-right:5px;
}
.list-posts-container article.list-posts a{
		margin:0
	}
	.list-posts-container article.list-posts .tags{
		
		margin-top:50px; 
		line-height: 1em
	}
.list-posts-container article.list-posts .entry-header{width:100%}
	.list-posts-container article.list-posts .imagearticleok{
		width:100%;
		z-index:1;
		margin-top:-100px!important;
		bottom: 0;
		
    position: absolute;
	}
article.list-posts .tags a{
	transition-duration:0.5s
}
.list-posts .tags.light a:hover{
			color:#000000;
		}
 .list-posts .tags.dark a:hover{
			color:#FFFFFF;
		}
	.list-posts-container article.list-posts .company{
		position:relative;
		top:0;
	}
	.list-posts-container article.list-posts .company img{
		max-height: 40px!important; 
		width: auto!important
	}
	.list-posts-container article.list-posts .imagearticleok img{
		width:100%!important;
		height:auto!important;
		vertical-align:bottom;
		border-radius:0 0 6px 6px
	}
	
	.list-posts-container article.list-posts header{
		position:relative;
		z-index:3;
		
		
		
	}
	.list-posts-container article.list-posts h2{
		font-size: 1.4rem!important
	}
	.list-posts-container article.list-posts .list-post{
		display:block;
		height:100%;
		position:relative;
	}
.list-posts-container article.list-posts > a{
	width:100%
}
 .list-posts-container .mobileon{display:block!important}
/* fin list posts footer */
	
@media screen and (max-width: 768px) {
	.list-posts-container article.list-posts h2{
		font-size: 1.7rem!important
	}
	.mobileon{display:block!important}
	.list-posts-container article.list-posts .imagearticleok{
		margin-top:0px;
    position: relative;
	}
	article.list-posts .entry-header{
		width:100%!important;
		z-index:3;
	}
	article.list-posts a{
		margin:0
	}
	article.list-posts .tags{
		
		margin-top:50px; 
		line-height: 1em;
		width:100%
	}
	article.list-posts .imagearticleok{
		width:100%;
		z-index:1;
		margin-top:-100px;
	}
	article.list-posts .company{
		position:relative;
		top:0;
		margin-bottom:10px;
	}
	article.list-posts .company img{
		max-height: 40px!important; 
		width: auto!important
	}
	article.list-posts .imagearticleok img{
		width:100%!important;
		height:auto!important;
		vertical-align:bottom;
		border-radius:0 0 6px 6px
	}
	.mobileon{display:block!important}
	article.list-posts header{
		position:relative;

	}
	article.list-posts h2{
		font-size: 1.7rem!important
	}
	article.list-posts .list-post{
		display:block;
	}
	.textcommeclients{
		font-size:1.3rem!important
	}
	.entry-content section.texthp:last-child{
		
	}
	section.clients p{
		margin-left:0!important;
		text-align:center;
		margin:0!important;
		font-size:0.8em!important
	}
	.howto.howto0{top:185px;}
	.howto.howto1{top:235px;}
	.howto.howto2{top:285px;}
	.howto.howto3{top:335px;}
	.howto.howto4{top:385px;}
	.howto.howto5{top:435px;}
	.howto.howto6{top:485px;}
	.howto.howto7{top:535px;}
	.howto.howto8{top:570px;}
	.howto.howto9{top:605px;}
	
	.sectionsticky h2{
		margin-bottom:10px!important
	}
	.howto{
			font-size:1.3rem!important; 
		line-height:1.1em;
		padding-top:5px;
		padding-bottom:5px
		}
	section.texthp{
		font-size:1.7em!important;
	}
	
	h1.h1, h1.entry-title, .texthp h2{
		font-size:2.4rem!important;
		line-height:1.3em!important;
	}
	#site-navigation{
		transition-duration:0.6s;
		height:60px;
	}
	#site-navigation.toggled{
		transition-duration:0.6s;
		height:auto;
	}
	#site-navigation ul{
		width:100%;
		display: block;
		margin-left:-35px;
		opacity:0;
		height:0px;
		transition-duration:0.6s;
		overflow:hidden;
		text-align:center;
	}
	#site-navigation ul li{
		display: block;
		text-align: center;
		
	}
	#site-navigation ul li a{
		display: block;
		padding:10px 0;
	}
	
	#site-navigation.toggled ul#primary-menu.menu{
		height:auto;
		opacity:1;
		display: block!important;
		transition-duration:0.6s;
		overflow: auto;
		margin-top: 60px;
		margin-left:none!important
	}
	#primary-menu.menu {
		margin-left:none!important
	}
	#site-navigation ul li.lang-item, #primary-menu li.lang-item-fr:before{display:inline-flex}
	div.ok{display:none}
	.clients.texthp{display: block}
	.clients.texthp p{
		display: block
	}
	
}

@media screen and (min-width: 37.5em) {
	.menu-main-container ul li {display: inline-block}
.mobilof{display:block} 
	.menu-toggle {
		display: none;
		transition-duration:0.6s;
		height:0px;
	}

	.main-navigation ul {
		display: flex;
		height:auto;
		overflow: auto;
		
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}
body {
   height: 100%;
}
video.fullscreen {
  position: absolute;
  z-index: 0;
  object-fit: cover;
  width:100%;
  height:100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  &::-webkit-media-controls {
     display:none !important;
  }
}

.container {
   position: relative;
   display: grid;
   place-items: center;
   width: 100%;
   margin: 0 auto;
}
.content {
  z-index: 1;
}
.container p {display:none;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}
#welcome{ }
#welcome::before{
        content: "";
        animation: animate infinite 25.5s;
        padding-left: 10px;
    }
  
    @keyframes animate {
   
0% {content: "bienvenue !";opacity:0}
0.5% {content: "bienvenue !";opacity:1}
4.88% {content: "bienvenue !";opacity:1}
5.38%{content: "bienvenue !";opacity:0}
5.88% {content: "";opacity:0}
6.38%{content: "欢迎！";opacity:1}
10.76%{content: "欢迎！";opacity:1}
11.26%{content: "欢迎！";opacity:0}
11.76% {content: "";opacity:0}
12.26%{content: "أهلاً وسهلاً";opacity:1}
16.64%{content: "أهلاً وسهلاً";opacity:1}
17.14%{content: "أهلاً وسهلاً";opacity:0}
17.64% {content: "";opacity:0}
18.14%{content: "welkom!";opacity:1}
22.52%{content: "welkom!";opacity:1}
23.2%{content: "welkom!";opacity:0}
23.52% {content: "";opacity:0}
24.02%{content: "welcome!";opacity:1}
28.4%{content: "welcome!";opacity:1}
28.9%{content: "welcome!";opacity:0}
29.40% {content: "";opacity:0}
29.9%{content: "willkommen!";opacity:1}
34.28%{content: "willkommen!";opacity:1}
34.78%{content: "willkommen!";opacity:0}
35.28% {content: "";opacity:0}
35.78%{content: "καλώς ορίσατε!";opacity:1}
40.16%{content: "καλώς ορίσατε!";opacity:1}
40.64%{content: "καλώς ορίσατε!";opacity:0}
41.16% {content: "";opacity:0}
41.64%{content: "aloha!";opacity:1}
46.04%{content: "aloha!";opacity:1}
46.54%{content: "aloha!";opacity:0}
47.04% {content: "";opacity:0}
47.54%{content: "ᐊᕆᐅᙵᐃᐹ";opacity:1}
51.92%{content: "ᐊᕆᐅᙵᐃᐹ";opacity:1}
52.42%{content: "ᐊᕆᐅᙵᐃᐹ";opacity:0}
52.92% {content: "";opacity:0}
53.42%{content: "benvenuti!";opacity:1}
57.8%{content: "benvenuti!";opacity:1}
58.3%{content: "benvenuti!";opacity:0}  
58.8% {content: "";opacity:0}
59.3%{content: "ようこそ！";opacity:1}
63.68%{content: "ようこそ！";opacity:1}
64.18%{content: "ようこそ！";opacity:0}  
64.68% {content: "";opacity:0}
65.18%{content: "witaj!";opacity:1}
69.56%{content: "witaj!";opacity:1}
70.06%{content: "witaj!";opacity:0}  
70.56% {content: "";opacity:0}
71.06%{content: "bem-vindos!";opacity:1}
75.44%{content: "bem-vindos!";opacity:1}
75.94%{content: "bem-vindos!";opacity:0} 
76.44% {content: "";opacity:0}
76.94%{content: "bun venit!";opacity:1}
81.32%{content: "bun venit!";opacity:1}
81.82%{content: "bun venit!";opacity:0} 
82.32% {content: "";opacity:0}
82.82%{content: "¡bienvenidos!";opacity:1}
87.2%{content: "¡bienvenidos!";opacity:1}
87.70%{content: "¡bienvenidos!";opacity:0} 
88.2% {content: "";opacity:0}
88.70%{content: "välkommen!";opacity:1}
93.08%{content: "välkommen!";opacity:1}
93.58%{content: "välkommen!";opacity:0} 
94.08% {content: "";opacity:0}
94.58%{content: "ласкаво просимо!";opacity:1}
99%{content: "ласкаво просимо!";opacity:1}
99.5%{content: "ласкаво просимо!";opacity:0} 
100%{content: "bienvenue !";opacity:0} 
    }
#letswork::before{
        content: "";
        animation: lets infinite 6s;
    }
  
    @keyframes lets {
   
0% {content: "Let's work together!";opacity:0}
5% {content: "Let's work together!";opacity:1}
45% {content: "Let's work together!";opacity:1}
50%{content: "Let's work together!";opacity:0}
51%{content: "Let's change!";opacity:0}
56%{content: "Let's change!";opacity:1}
95%{content: "Let's change!";opacity:1}
100%{content: "Let's change!";opacity:0}
}
#letswork2::before{
        content: "";
        animation: lets2 infinite 6s;
    }
  
    @keyframes lets2 {
   
0% {content: "Let's join forces!";opacity:0}
5% {content: "Let's join forces!";opacity:1}
45% {content: "Let's join forces!";opacity:1}
50%{content: "Let's join forces!";opacity:0}
51%{content: "Let's change the world together!";opacity:0}
56%{content: "Let's change the world together!";opacity:1}
95%{content: "Let's change the world together!";opacity:1}
100%{content: "Let's change the world together!";opacity:0}
}
.tile {
    -webkit-transform: translateY(50px) translateZ(0);
    transform: translateY(50px) translateZ(0);
    -webkit-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    transition-delay: 0.5s;
    -webkit-transition: 0.8s;
    -o-transition: 0.8s;
    transition: 0.8s;
    opacity: 0;
}
.bottom-right.inView {
    opacity: 1;
    -webkit-transform: translateY(0px) translateZ(0);
    transform: translateY(0px) translateZ(0);
}
.inView {
    opacity: 1;
    -webkit-transform: translateY(0px) translateZ(0);
    transform: translateY(0px) translateZ(0);
}

video.fullscreen {
	opacity:0.4;
	
  position: absolute;
  z-index: 0;
  object-fit: cover;
  width:100%;
  height:100vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  &::-webkit-media-controls {
     display:none !important;
  }
}

.videocontainer {
   position: relative;
   display: grid;
   place-items: center;
   height: 80%;
   width: 100%;
   margin: 0 auto;
  
}
.videocontainer p{display: none}

.content {
  z-index: 1;
}

body, html{
   height: 100%;

}
.sectionsticky{position: sticky; top: 58px; background:#FFFFFF; z-index:1; padding-top:1rem!important; padding-bottom:1px!important}
.sectionsticky h2{margin-bottom:30px; margin-top:0px; font-size:1.7em}
header.site-header{width:100%}
header .marges{display: flex;}
header div.site-branding img {max-width:115px; height:auto; padding:10px 0}
header .container > *{ width:50%; }
#primary-menu{
	right:0;
	height:100%;
	align-items:center;
	margin-left:auto;
}
#primary-menu li:first-child{margin-left:auto}
.site-header{position: fixed; z-index:10; background:#F5F5F5}
.site-main{padding-top:80px}
.marges{margin-left:auto; margin-right:auto; padding-left:20px; padding-right:20px; max-width:1200px}
#primary-menu li{
	height:100%;
	text-transform: uppercase; 
	color:#000000; 
	font-size:15px; 
	font-weight:300;
	display: flex;
    align-items: center;
	transition-duration:0.3s
}
#primary-menu li a{
	color:#000000; 
	display: flex;
    align-items: center;
    height: 100%;
	padding-left:1rem;
	padding-right:1rem
}
#primary-menu li a:hover{
	color:#FFFFFF;
}
#site-navigation > div {
	display: flex;
    align-items: center;
    height: 100%;
}
#primary-menu li:hover, #primary-menu li.activemenu{
	background:var(--orange);
}

#primary-menu li a:hover,#primary-menu li.activemenu a{
	color:#FFFFFF
}
#primary-menu li.lang-item-fr a{
	padding-left:0;
}
#primary-menu li.lang-item-en a{
	padding-right:0
}
#primary-menu li.lang-item-fr:before{
	content:"/";
}
div#hp{margin-top:-25px; height:100%}
.traithp div{width:50%; height:300px; border-right:1px solid #000000}
.merri{font-family: 'Merriweather', serif;}
.redhat{font-family: 'Red Hat Display', sans-serif;}
section.texthp{
	max-width:800px; 
	margin-left:auto; 
	margin-right:auto; 
	font-size: 2.2rem; 
	font-weight:300; 
	text-align:center; 
	padding-top: 2rem; 
	padding-bottom: 2rem
}
section.texthp strong{font-weight:700}
:root {
  --underline-intrinsic-width: 6;
  --underline-width: 8;
  --underline-color: #e1671b;
  --underline-cap-width: 0px;
  --underline-offset-y: -2px;
  --underline-padding-x: 0.12em;
}
  
section.texthp strong {
  display: inline;
  --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
  padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale)));
  box-decoration-break: clone;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(180deg, var(--underline-color), var(--underline-color));
  background-position-x:
    calc(var(--underline-cap-width) * var(--underline-width-scale)),
    0,
    100%;
  background-position-y: calc(100% - var(--underline-offset-y) * -1);
  background-size:
    calc(100% - calc(var(--underline-cap-width) * var(--underline-width-scale) * 2)) calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px),
	auto calc(var(--underline-width) * 1px);
  --underline-width: 18;
  --underline-offset-y: -3px;
}
.howto{
	font-weight: bold; 
	text-align:left;
	background:#FFFFFF;
	font-size:1.5rem;
	padding-top:5px; 
	padding-bottom:5px;
	margin-bottom:0!important
}
	.howto0{position:sticky; top:180px; z-index:12; color:#803811}
	.howto1{position:sticky; top:220px; z-index:11; color:#9f3f1c}
	.howto2{position:sticky; top:260px; z-index:10; color:#bb4525}
	.howto3{position:sticky; top:300px; z-index:9; color:#c7512a}
	.howto4{position:sticky; top:340px; z-index:8; color:#d0622e}
	.howto5{position:sticky; top:380px; z-index:7; color:#d87232}
	.howto6{position:sticky; top:420px; z-index:6; color:#e08236}
	.howto7{position:sticky; top:460px; z-index:5; color:#e1934f}
	.howto8{position:sticky; top:500px; z-index:4; color:#dfa36d}
.howto9{position:sticky; top:540px; z-index:4; color:#deb288}
.howto span{ font-weight:300; color:#000000; background:none!important }
.textdegrade{
	background:linear-gradient(90deg, #bc496c 0%, #ec671d 50%, #f49715 100%);
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}
.textdegradevert{
	background:linear-gradient(0deg, #dbccb7 0%, #e28537 35%, #c24728 65%, #7d3710 100%);
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}

.clients{
	display:flex;
}
.clients > p{
	flex:1 1 0;
	line-height:1.7em;
	font-size: 1.5rem;
}
.clients > p span{

}
.textcommeclients{font-size: 1.5rem;line-height:1.3em; font-weight: 300;}
.textcommeclients strong{font-weight:700}

.colonnelaterale.hashtags{
			margin-top:2.5rem;
	
		}
article#article .worksentence{display: inline-block; margin-left:auto; margin-right:auto}
		article#article .qi-block-tag-cloud a, article#article .colonnelaterale.hashtags a{
			display: block;
			color:#000000;
			font-weight:500;
			font-size:1.1em;
			text-decoration:none;
			line-height:1.4em;
			padding-left:1.2rem;
			transition-duration:0.5s;
		}
article#article .colonnelaterale.hashtags a:hover{
	color:var(--orange);
}
		article#article blockquote{ 
			margin-top:3rem
		}
		article#article blockquote cite{ 
			font-family:'Red Hat Display', sans-serif;
			font-size:1rem
		}
article#article blockquote p:last-child{line-height:1em}
		
		article#article blockquote p, article#article blockquote{
			font-family: 'Merriweather', serif!important;
			font-size:1.3rem; 
			font-weight:700;
			text-align:left!important;
		}
		article#article blockquote:before {
		
  content: '“';
			font-family: 'Merriweather', serif;
			font-weight: 900;
			font-size:3rem; 
			position:absolute;
			margin-left:-2.0rem
		}
		article#article blockquote:after {
		
  content: '”';
			font-family: 'Merriweather', serif;
			font-weight: 900;
			font-size:3rem; 
			display:block;
			margin-top:-1.5rem;
			margin-right:-1.5rem;
			text-align: right
		}

.contactinfo a:hover{color:#000000}
div.villes h2{
	color:#FFFFFF;}

	div.villes{color: #FFFFFF;
		
	text-align:center!important;
		display:block;
		width:100%!important;
		background-size: cover;
		background-position:center center;
		border-radius:6px;
		margin-bottom:0.5rem;
		margin-top:2rem;
		position:relative;
		height:200px;
		filter: sepia(20%);
		transition-duration:0.5s
	}
div.filtre{
	background:rgba(223,103,42,0.1);
	position:relative;
	height:100%; width:100%;
	vertical-align:center;
	padding-top:60px;
	border-radius:6px
}
div.messageup{
	position:absolute;
	height:100%;
	width:100%;
	opacity:0;
	transition-duration:0.5s;
	padding-top:3rem;
	
	
	background:rgba(0,0,0,1);
	z-index:10;
	border-radius:6px
}
div.messageup h3{
	color:var(--orange);
	text-align:center;
	font-size:1.2rem;
	
	
}
div.villes:hover div.messageup{
	opacity:1
}
div.villes:hover{
	filter: sepia(0%);
}

	.adresses a{}

.contactinfo{
	font-size:1.1em
}
.contactinfo a{font-size:1rem}
.qodef-e-item-separator{display:none}
h1.h1, h1.entry-title, .texthp h2{
	font-size:3.5rem; 
	background:linear-gradient(-90deg, #ddb994 0%, #e28537  17%, #e1671b 35%, #c24728 65% , #943c18 100%);
		line-height:1.4em!important;
	-webkit-background-clip: text!important;
  -webkit-text-fill-color: transparent!important;
text-align:center}

.dark{color:#000000}
		.light{color:#FFFFFF}
:root{
  --pourcent: 0.98;
}
		
		.company img{
			width:50px; 
			height:auto; 
			}
		.list-posts:hover .company img{}
		.company{top:18px; position:absolute; margin-left:0; width:100%}
		.list-posts:hover .company{}
.list-posts .tags{
	line-height:1em;
	z-index:3;
	margin-left:20px;
	width:62%;
}
.entry-header{position:relative}
		.list-posts:hover .tags a{
			
			/*transform-origin: 0 100%;
  			-webkit-animation: animate-selection 300ms; 
  			animation-name: animate-selection;
  			animation-duration: 300ms;
			transform: scale(var(--pourcent));*/
		}
		.list-posts .tags a{font-size:12px;}
		.list-posts .h2{height:100%; display:flex; align-items:center}
		.list-posts .titrearticle{
			
			font-size:2.4rem; 
			line-height:1.2em!important;
			margin:0;
			width:100%!important;
			display:block!important;
			
			
			
		}
		@keyframes animate-selection {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(var(--pourcent));
  }
}
		
		.list-posts:hover .titrearticle{
			/*font-size:calc(var(--pourcent)*2.5rem);*/
			/*transform-origin: 50% 50%;
  -webkit-animation: animate-selection 300ms; 
  animation-name: animate-selection;
  animation-duration: 300ms;
			transform: scale(var(--pourcent));*/
		}
	
		.list-posts{
			transition-duration:0.3s;
			margin-top:20px;
			margin-bottom:20px;
			transition: -webkit-transform 0.25s cubic-bezier(0.625, 0.125, 0.305, 0.875);
    transition: transform 0.25s cubic-bezier(0.625, 0.125, 0.305, 0.875);
    transition: transform 0.25s cubic-bezier(0.625, 0.125, 0.305, 0.875), -webkit-transform 0.25s cubic-bezier(0.625, 0.125, 0.305, 0.875);
    transition-duration: 0.25s, 0.25s;
    transition-timing-function: cubic-bezier(0.625, 0.125, 0.305, 0.875), cubic-bezier(0.625, 0.125, 0.305, 0.875);
    transition-delay: 0s, 0s;
    transition-property: transform, -webkit-transform;
		}
		.list-posts:hover{
			
    -webkit-transform: scale(var(--pourcent));
    -ms-transform: scale(var(--pourcent));
    transform: scale(var(--pourcent))

			
			/*padding:1px 1%;
			
			transform-origin: 50% 50%;
  -webkit-animation: animate-selection 300ms; 
  animation-name: animate-selection;
  animation-duration: 300ms;
			transform: scale(var(--pourcent));
			transition-delay: 0s, 0s;*/
		}

		.tags.light a, .tags.light a:visited{
			color:#ffffff;
		}
		.tags.dark a, .tags.dark a:visited{
			color:#000000;
		}
		.imagearticleok{
			width:35%;
			position:relative;
}
		.imagearticleok img{width:100%; height:100%; border-radius:0 6px 6px 0; margin:0}
.list-posts .mobileon{display:none}
		.tags a {
			display:inline-block; 
			
			transition-duration:0.3s;
		}
article.list-posts .entry-header header{
	height:100%
}
		article.list-posts .entry-header{
			position:relative;
			display:block;
			width:65%; 
			padding:15px 20px; 
			color:#000000;
			transition-duration:0.3s;
			align-items:center;

			
		}
		
		
		.tags{position:absolute; bottom:20px}
		
.list-post{
	display:flex;
	border-radius:6px
}
		
		
   		.imagearticle{transition-duration:0.5s; margin-left:auto; margin-right:auto; width:100% }
		
		@media (max-width: 768px) {
			
			.list-posts header{width:100%!important}
		}

html, body{
		
		-moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
	}
	
	
	.videocontainer .content{display: flex; width:100%}
	.changeisgood{width:50%; font-size:2.8rem}
	.footer{display:flex}
	.footer > div{flex: 1 1 0; text-align:left;display: flex; align-items:center}
	footer#footer{
		align-items:center;
	background:#262626; 
	color:#FFFFFF; 
	padding:20px 0; 
	display: block; 
	bottom:0; 
	clear:both; font-size:0.8em}
	.footer div.legal{text-align:center}
	.footer > div{flex: 1 1 0; text-align:left;display: flex; align-items:center}
	
	#footer .reseaux img{
		max-width: 30px;
		height:auto;
		border-radius:50%; 
		border:1px solid #FFFFFF;
		transition-duration:0.3s;
	}
	#footer .reseaux img:hover{
		border:1px solid var(--orange);
	}
	.flex.footer  p.right{
		text-align:right;
		width:100%;
	}
	/*.menu-item-247 a:after{
		content:'*';
		font-family:sans-serif;
		color:var(--orange);
		font-weight:300;
		font-size:1.4em;
		opacity:1;
		animation: asteriskmenu;
		animation-duration:3s;
		animation-iteration-count: infinite;
		
	}

	.menu-item-247.activemenu a:after, .menu-item-247:hover a:after{
		color:#FFFFFF!important;
		animation: none;
	}
	
	@keyframes asteriskmenu {
  0%   {opacity:1}
  50%  {opacity:0}
  100%  {opacity:1}
}*/
.joinimg{
	
	background-size:cover;
	background-position:center center;
	min-height:450px;
	margin-left:-20px;
	margin-right:-20px;

-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;
}


	@media (max-width:768px){
		.mobile100{width:100%!important}
		.videocontainer .content{display: block!important}
	.changeisgood{display: block; text-align:center!important; width:100%!important; font-size:2.5em;
		margin-top:0; margin-bottom:10px}
		.howto{height:auto}
		h1.h1page{font-size:2rem!important}
		
	}
.white{color:white}	
h1.h1page{
	font-family: 'Merriweather', serif!important;
    background: none!important;
    font-size: 2.8rem!important;
    margin-top: 100px;
    margin-bottom: 100px!important;
    text-align: center;
    font-weight: normal!important;
		}
		
		
		
		
	.list-posts-container {
		display: flex;
	}
	.list-posts-container article {
		width:33%
	}
	.col-droite{padding-top:30px}
		.contenuarticle{
			display: flex;
			
		}
		.contenuarticle .colonnecentrale{
			flex:2.2 1 0;
			margin-right:2rem
		}
		.contenuarticle .colonnelaterale{
			flex:1 1 0;
			margin-left:1rem
		}
		.colonnelaterale.blockquote{
			padding-top:2.5rem
		}
		.lignevideo{height:auto}
		.lignevideo div{
			height:100%;
		}
		.mavid{
	width:100%;
			height:100%
		}
		.lignevideo {
			display:flex
		}
		.lignevideo > div {
			flex:1 1 0; 
			margin-right:1px!important;
		}
		.lignevideo > div:last-child{
			margin-right:0px;
		}
.fullvideo .videocontaint{
	min-height:400px;
	max-height:400px;
	overflow:hidden;
	position: relative;
    
}
.fullvideo .videocontaint{

	position: relative;
    display: grid;
    place-items: center;
}
.videocontaint video{
	position: absolute;
    z-index: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	
    
}

.image__overlay > div{
	border-radius:6px
}	
.image__overlay {
	z-index:2;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.25s;
	padding:10px;
	margin-top:0px;

	
}
.image__overlay.disparait:hover{animation: disparait;
	animation-delay:1s;
	animation-duration:100s;}
@keyframes disparait {
  0% {opacity: 1;}
  2% {opacity: 0; display:none}
}
.image__overlay > div{
	background: rgba(0, 0, 0, 0.6);
	width: 100%;
	height: 100%;
	color: #ffffff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}


.image__overlay--primary {
	
}

.image__overlay>* {
	transform: translateY(20px);
	transition: transform 0.25s;
}

.image__overlay:hover {
	opacity: 1;
}

.image__overlay:hover>* {
	transform: translateY(0);
}

.image__description {
	font-size: 1.5em;
	font-family:'Merriweather', serif;
	text-align:center;
}
		@media (max-width:768px){
			.colonnelaterale.blockquote{
				padding-top:0;
				padding-bottom:1.5rem;
			}
			.fullvideo{
	min-height:none;
				max-height:none;}
			
			.lignevideo {
				display : block
			}
			.contenuarticle{
				display:block;
			}
			.colonnecentrale, .contenulaterale{
				display: block;
				margin-right:0!important;
				margin-left:0!important
				
			}
		}
.sound:hover{
			cursor:pointer
		}
.list-articles-footer .list-post{min-height:350px}
.list-articles-footer .company{
	margin-bottom:10px
}
.list-articles-footer{background:#f4efe7}
	article#article{
	padding-top: 30px;	
	font-family: 'Red Hat Display', sans-serif; 
}
article#article .companyname{
	text-align:center;
	font-size:1.5em;
	font-weight:700;
	color: #e1671b;
}

article#article h1{
	font-family: inherit;
	font-size: 1em;
	font-weight:300;
}
article#article .resume{
	font-size:2rem; 
	font-weight:bold;
	max-width: 600px; 
	margin-left:auto; 
	margin-right: auto;
	line-height:1.2em;
	margin-top:2rem;
	margin-bottom:2rem!important;
	font-family:'Merriweather', serif;
}


article#article .authoravatar img{
	width:40px; height: auto; 
	border-radius:50%;
}
article#article .authorsocial img{
	width:40px; height: auto; 
	transition-duration:0.5s;
	border-radius:50%;
	border:1px solid #000000;
}
	article#article .authorsocial img:hover{
	
	border:1px solid var(--orange);
}

article#article .authorname {
	font-weight:300;
	font-size:0.8em
}
article#article .authorname strong {
	font-weight:bold;
	
}
article#article .entry-content h2{
	font-size:2rem; 
	margin-top:2rem;
	margin-bottom: 1rem
}
article#article .entry-content{font-family: 'Red Hat Display', sans-serif;
	line-height:1.4em;
color:#000000
}
article#article .entry-content p{margin-bottom:1rem}
article#article .entry-content p, article#article .entry-content ol, article#article .entry-content ul{
	text-align: justify;
	font-family: 'Red Hat Display', sans-serif;
	line-height:1.4em;
	color:#000000
}
article#article .entry-content ul, article#article .entry-content ol{
	padding-left: 1rem;
	margin-left:0
}
article#article .entry-content ul li{
	margin-bottom:1rem
}
article#article .images img{
	height:500px; 
	width:auto!important;
	max-width:none!important;
	transform: scale(1.1) translateZ(0);
    transition: transform .35s cubic-bezier(.25,.46,.45,.94);
    will-change: transform;
	position:absolute;
	left:-100%
}

article#article .images img:hover{
	transform: scale(1.02) translateZ(0);
	
}
article#article .images .qodef-gutenberg-row{
	display:flex;
	align-items: center:
	
}

article#article .images .qodef-gutenberg-row > div {
	height:500px;
	flex-grow: 1;
  position: relative;
  border: 1px solid lighten(black, 10);
  transition: all 1000ms ease-in-out;
  
 
}
	
}
article#article .images .qodef-gutenberg-row > div:hover {
	 flex-grow: 4.3!important;
   
}
article#article .images .qodef-gutenberg-row > div:before {
  
  
    transform: translate(-50%, -50%)!important;
    color: white;
  }
article#article .images .qodef-e-image-holder{
	text-align:center;
	align-content:center
}
strong.surligne{
	 display: inline;
  --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
  padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale)));
  box-decoration-break: clone;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(180deg, var(--underline-color), var(--underline-color));
  background-position-x:
    calc(var(--underline-cap-width) * var(--underline-width-scale)),
    0,
    100%;
  background-position-y: calc(100% - var(--underline-offset-y) * -1);
  background-size:
    calc(100% - calc(var(--underline-cap-width) * var(--underline-width-scale) * 2)) calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px),
	auto calc(var(--underline-width) * 1px);
  --underline-width: 9;
  --underline-offset-y: -2px;
}
		article#article .entry-content strong {
  display: inline;
  --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
  padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale)));
  box-decoration-break: clone;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(180deg, var(--underline-color), var(--underline-color));
  background-position-x:
    calc(var(--underline-cap-width) * var(--underline-width-scale)),
    0,
    100%;
  background-position-y: calc(100% - var(--underline-offset-y) * -1);
  background-size:
    calc(100% - calc(var(--underline-cap-width) * var(--underline-width-scale) * 2)) calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px),
	auto calc(var(--underline-width) * 1px);
  --underline-width: 8;
  --underline-offset-y: -1px;
}
		
		
		@media (max-width:768px){
			
			.list-articles-footer article.list-posts{
				min-height:auto;
			margin-left:0;
			margin-right:0;
			}
			.list-articles-footer article.list-post{
				min-height:auto;
			margin-left:0;
			margin-right:0;
			}
			.imgflex{height:300px!important}
		}
		
		article#article .imagearticle {
	text-align:center;
	
	
		margin-top:2rem;
			border-radius:6px
}
	article#article .imagearticle img {max-width:300px; height:auto; margin:0}
.wp-block-quote{margin-bottom:1rem}
.dark{color:#000000}
		.light{color:#FFFFFF}

		
		.list-posts-footer .company img{
			width:20px; 
			height:auto; 
			position:relative;
			max-height:20px;
			align-items:bottom
			}
		
		.list-posts-footer .company{
			margin-left:0; 
			width:100%; 
			position:relative;
		top:0;
			align-items:bottom;
			vertical-align:bottom;
		}
		
		
		.list-posts-footer .h2{height:100%; display:flex; align-items:center}
		.list-posts-footer .titrearticle{
			margin-top:0;
			padding-top:0;
			font-size:0.8rem; 
			line-height:1.2em!important;
			margin:0;
			width:100%!important;
			display:block!important;
			
			
			
		}
		
.list-articles-footer .list-posts .tags{
	width:90%
}
	
		.list-posts-footer{
			margin-right:15px!important		
		}
		.list-posts-footer > *:last-child{
			margin-right:0!important		
		}
		.list-posts-footer:hover{
			cursor: pointer;
			
		}

		.list-posts-footer .imagearticleok{width:35%}
		 .list-posts-footer .imagearticleok img{
			 width:100%; 
			 height:auto; 
			 border-radius:0 0 6px 6px; 
			 margin:0;
			 position:relative
}
		

		article.list-posts-footer header{
			
			width:65%; 
			padding:5px 10px; 
			color:#000000;		
			align-items:center;

			
		}
		
		
		
   		.list-posts-footer.imagearticle{margin-left:auto; margin-right:auto; width:100% }
		.list-posts-footer{
			transition-duration:0.3s;
			transition: -webkit-transform 0.25s cubic-bezier(0.625, 0.125, 0.305, 0.875);
    transition: transform 0.25s cubic-bezier(0.625, 0.125, 0.305, 0.875);
    transition: transform 0.25s cubic-bezier(0.625, 0.125, 0.305, 0.875), -webkit-transform 0.25s cubic-bezier(0.625, 0.125, 0.305, 0.875);
    transition-duration: 0.25s, 0.25s;
    transition-timing-function: cubic-bezier(0.625, 0.125, 0.305, 0.875), cubic-bezier(0.625, 0.125, 0.305, 0.875);
    transition-delay: 0s, 0s;
    transition-property: transform, -webkit-transform;
		}
		.list-posts-footer:hover{
			cursor: pointer;
    -webkit-transform: scale(var(--pourcent));
    -ms-transform: scale(var(--pourcent));
    transform: scale(var(--pourcent))

		}
		@media (max-width: 768px) {
			.list-posts-container{display:block}
			.list-posts-footer{display:block; margin-left:0; margin-right:0; margin-bottom:20px}
			.list-posts-footer header{width:100%!important}
			.list-posts-container article{width: auto}
		}
footer .logo img{
	transition-duration:0.5s
}
footer .logo img:hover{opacity:0.6}
		

.blocblanc{

padding:10px;
background:#ffffff;
margin:-20px;

}
.blocblanc >div {
width:calc(50% - 5px);
float:left;
min-height:500px;
margin-bottom:10px;
transition-duration:0.5s;
background-size:100% auto;
background-position:bottom;
background-repeat: no-repeat;
	position:relative

}
.blocblanc >div:hover{
background-image: none!important
}
.blocblanc::after{
content: "";
  clear: both;
  display: table;
}
p.show{
	position:absolute;
width:100%; 
margin-left:auto;
margin-right:auto;
margin-top:3rem;
font-weight:100;
opacity:0;
transition-duration:0.3s;
}
p.hide{
margin-top:3rem;
opacity:1;
transition-duration:0.3s;
text-align:center;
}
p.hide img{
	width:230px;
	height:auto;
	
}
.blocblanc >div:hover p.hide{
opacity:0;
}
.blocblanc >div:hover p.show{
opacity:1
}
.blocblanc >div.noirstyle p.show{
color:#000000
}
.blocblanc >div.blancstyle p.show{
color:#FFFFFF
}


p.show strong{font-weight:900}


.blocblanc >div:nth-child(odd)  {
margin-right:10px;

}
.blocblanc h2{
	    padding-top: 4rem;
	margin-top:0
}
.noirstyle{
background-color:#000000;
color:#FFFFFF;
}
.blancstyle{
background-color:#FFFFFF;
color:#000000;
}
.noirstyle:hover{
background-color:#FFFFFF;
color:#000000;

}
.blancstyle:hover{
background-color:#000000;
color:#FFFFFF;
}
.blocblanc >div:nth-child(even)  {


}


.traithp.white >div {
border-right:1px solid #FFFFFF
}

.blocblanc h2{
font-size:2.5rem;
text-align:center;
transition-duration:0.5s;
margin-bottom: 0;
}
.blocblanc p{
text-align:center;
font-size: 1.2rem
}
.noirstyle h2{
color:#FFFFFF}
.noirstyle:hover h2{
color:#000000}
.blancstyle:hover h2{
color:#FFFFFF}
@media (max-width:768px){
.blocblanc >div {

width:100%;
float:none;
min-height:500px;
margin-bottom:10px;
transition-duration:0.5s;
background-size:100% auto;
background-position:bottom;
background-repeat: no-repeat;
margin-right:0
}
}
  /* CSS Document */