html {
font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body {
margin: 0;
}  article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
} audio,
canvas,
progress,
video {
display: inline-block; vertical-align: baseline; } audio:not([controls]) {
display: none;
height: 0;
} [hidden],
template {
display: none;
}  a {
background-color: transparent;
} a:active,
a:hover {
outline: 0;
}  abbr[title] {
border-bottom: 1px dotted;
} b,
strong {
font-weight: bold;
} dfn {
font-style: italic;
} h1 {
font-size: 2em;
margin: 0.67em 0;
} mark {
background: #ff0;
color: #000;
} small {
font-size: 80%;
} sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}  img {
border: 0;
} svg:not(:root) {
overflow: hidden;
}  figure {
margin: 1em 40px;
} hr {
box-sizing: content-box;
height: 0;
} pre {
overflow: auto;
} code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}   button,
input,
optgroup,
select,
textarea {
color: inherit; font: inherit; margin: 0; } button {
overflow: visible;
} button,
select {
text-transform: none;
} button,
html input[type="button"], input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; cursor: pointer; } button[disabled],
html input[disabled] {
cursor: default;
} button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
} input {
line-height: normal;
} input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
} input[type="search"] {
-webkit-appearance: textfield; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
} fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
.wpcf7-list-item-label{
color: rgba(255, 255, 255, 0.8);
} legend {
border: 0; padding: 0; } textarea {
overflow: auto;
} optgroup {
font-weight: bold;
}  table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}    .hidden,
[hidden] {
display: none !important;
} .pure-img {
max-width: 100%;
height: auto;
display: block;
}
.pure-g {
letter-spacing: -0.31em; *letter-spacing: normal; *word-spacing: -0.43em; text-rendering: optimizespeed;   display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap; -ms-flex-line-pack: start;
align-content: flex-start;
} @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
table .pure-g {
display: block;
}
} .opera-only :-o-prefocus,
.pure-g {
word-spacing: -0.43em;
}
.pure-u {
display: inline-block;
*display: inline; zoom: 1;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
} .pure-u-1,
.pure-u-1-1,
.pure-u-1-2,
.pure-u-1-3,
.pure-u-2-3,
.pure-u-1-4,
.pure-u-3-4,
.pure-u-1-5,
.pure-u-2-5,
.pure-u-3-5,
.pure-u-4-5,
.pure-u-5-5,
.pure-u-1-6,
.pure-u-5-6,
.pure-u-1-8,
.pure-u-3-8,
.pure-u-5-8,
.pure-u-7-8,
.pure-u-1-12,
.pure-u-5-12,
.pure-u-7-12,
.pure-u-11-12,
.pure-u-1-24,
.pure-u-2-24,
.pure-u-3-24,
.pure-u-4-24,
.pure-u-5-24,
.pure-u-6-24,
.pure-u-7-24,
.pure-u-8-24,
.pure-u-9-24,
.pure-u-10-24,
.pure-u-11-24,
.pure-u-12-24,
.pure-u-13-24,
.pure-u-14-24,
.pure-u-15-24,
.pure-u-16-24,
.pure-u-17-24,
.pure-u-18-24,
.pure-u-19-24,
.pure-u-20-24,
.pure-u-21-24,
.pure-u-22-24,
.pure-u-23-24,
.pure-u-24-24 {
display: inline-block;
*display: inline;
zoom: 1;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}
.pure-u-1-24 {
width: 4.1667%;
*width: 4.1357%;
}
.pure-u-1-12,
.pure-u-2-24 {
width: 8.3333%;
*width: 8.3023%;
}
.pure-u-1-8,
.pure-u-3-24 {
width: 12.5000%;
*width: 12.4690%;
}
.pure-u-1-6,
.pure-u-4-24 {
width: 16.6667%;
*width: 16.6357%;
}
.pure-u-1-5 {
width: 20%;
*width: 19.9690%;
}
.pure-u-5-24 {
width: 20.8333%;
*width: 20.8023%;
}
.pure-u-1-4,
.pure-u-6-24 {
width: 25%;
*width: 24.9690%;
}
.pure-u-7-24 {
width: 29.1667%;
*width: 29.1357%;
}
.pure-u-1-3,
.pure-u-8-24 {
width: 33.3333%;
*width: 33.3023%;
}
.pure-u-3-8,
.pure-u-9-24 {
width: 37.5000%;
*width: 37.4690%;
}
.pure-u-2-5 {
width: 40%;
*width: 39.9690%;
}
.pure-u-5-12,
.pure-u-10-24 {
width: 41.6667%;
*width: 41.6357%;
}
.pure-u-11-24 {
width: 45.8333%;
*width: 45.8023%;
}
.pure-u-1-2,
.pure-u-12-24 {
width: 50%;
*width: 49.9690%;
}
.pure-u-13-24 {
width: 54.1667%;
*width: 54.1357%;
}
.pure-u-7-12,
.pure-u-14-24 {
width: 58.3333%;
*width: 58.3023%;
}
.pure-u-3-5 {
width: 60%;
*width: 59.9690%;
}
.pure-u-5-8,
.pure-u-15-24 {
width: 62.5000%;
*width: 62.4690%;
}
.pure-u-2-3,
.pure-u-16-24 {
width: 66.6667%;
*width: 66.6357%;
}
.pure-u-17-24 {
width: 70.8333%;
*width: 70.8023%;
}
.pure-u-3-4,
.pure-u-18-24 {
width: 75%;
*width: 74.9690%;
}
.pure-u-19-24 {
width: 79.1667%;
*width: 79.1357%;
}
.pure-u-4-5 {
width: 80%;
*width: 79.9690%;
}
.pure-u-5-6,
.pure-u-20-24 {
width: 83.3333%;
*width: 83.3023%;
}
.pure-u-7-8,
.pure-u-21-24 {
width: 87.5000%;
*width: 87.4690%;
}
.pure-u-11-12,
.pure-u-22-24 {
width: 91.6667%;
*width: 91.6357%;
}
.pure-u-23-24 {
width: 95.8333%;
*width: 95.8023%;
}
.pure-u-1,
.pure-u-1-1,
.pure-u-5-5,
.pure-u-24-24 {
width: 100%;
}
@media screen and (min-width: 35.5em) {
.pure-u-sm-1,
.pure-u-sm-1-1,
.pure-u-sm-1-2,
.pure-u-sm-1-3,
.pure-u-sm-2-3,
.pure-u-sm-1-4,
.pure-u-sm-3-4,
.pure-u-sm-1-5,
.pure-u-sm-2-5,
.pure-u-sm-3-5,
.pure-u-sm-4-5,
.pure-u-sm-5-5,
.pure-u-sm-1-6,
.pure-u-sm-5-6,
.pure-u-sm-1-8,
.pure-u-sm-3-8,
.pure-u-sm-5-8,
.pure-u-sm-7-8,
.pure-u-sm-1-12,
.pure-u-sm-5-12,
.pure-u-sm-7-12,
.pure-u-sm-11-12,
.pure-u-sm-1-24,
.pure-u-sm-2-24,
.pure-u-sm-3-24,
.pure-u-sm-4-24,
.pure-u-sm-5-24,
.pure-u-sm-6-24,
.pure-u-sm-7-24,
.pure-u-sm-8-24,
.pure-u-sm-9-24,
.pure-u-sm-10-24,
.pure-u-sm-11-24,
.pure-u-sm-12-24,
.pure-u-sm-13-24,
.pure-u-sm-14-24,
.pure-u-sm-15-24,
.pure-u-sm-16-24,
.pure-u-sm-17-24,
.pure-u-sm-18-24,
.pure-u-sm-19-24,
.pure-u-sm-20-24,
.pure-u-sm-21-24,
.pure-u-sm-22-24,
.pure-u-sm-23-24,
.pure-u-sm-24-24 {
display: inline-block;
*display: inline;
zoom: 1;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}
.pure-u-sm-1-24 {
width: 4.1667%;
*width: 4.1357%;
}
.pure-u-sm-1-12,
.pure-u-sm-2-24 {
width: 8.3333%;
*width: 8.3023%;
}
.pure-u-sm-1-8,
.pure-u-sm-3-24 {
width: 12.5000%;
*width: 12.4690%;
}
.pure-u-sm-1-6,
.pure-u-sm-4-24 {
width: 16.6667%;
*width: 16.6357%;
}
.pure-u-sm-1-5 {
width: 20%;
*width: 19.9690%;
}
.pure-u-sm-5-24 {
width: 20.8333%;
*width: 20.8023%;
}
.pure-u-sm-1-4,
.pure-u-sm-6-24 {
width: 25%;
*width: 24.9690%;
}
.pure-u-sm-7-24 {
width: 29.1667%;
*width: 29.1357%;
}
.pure-u-sm-1-3,
.pure-u-sm-8-24 {
width: 33.3333%;
*width: 33.3023%;
}
.pure-u-sm-3-8,
.pure-u-sm-9-24 {
width: 37.5000%;
*width: 37.4690%;
}
.pure-u-sm-2-5 {
width: 40%;
*width: 39.9690%;
}
.pure-u-sm-5-12,
.pure-u-sm-10-24 {
width: 41.6667%;
*width: 41.6357%;
}
.pure-u-sm-11-24 {
width: 45.8333%;
*width: 45.8023%;
}
.pure-u-sm-1-2,
.pure-u-sm-12-24 {
width: 50%;
*width: 49.9690%;
}
.pure-u-sm-13-24 {
width: 54.1667%;
*width: 54.1357%;
}
.pure-u-sm-7-12,
.pure-u-sm-14-24 {
width: 58.3333%;
*width: 58.3023%;
}
.pure-u-sm-3-5 {
width: 60%;
*width: 59.9690%;
}
.pure-u-sm-5-8,
.pure-u-sm-15-24 {
width: 62.5000%;
*width: 62.4690%;
}
.pure-u-sm-2-3,
.pure-u-sm-16-24 {
width: 66.6667%;
*width: 66.6357%;
}
.pure-u-sm-17-24 {
width: 70.8333%;
*width: 70.8023%;
}
.pure-u-sm-3-4,
.pure-u-sm-18-24 {
width: 75%;
*width: 74.9690%;
}
.pure-u-sm-19-24 {
width: 79.1667%;
*width: 79.1357%;
}
.pure-u-sm-4-5 {
width: 80%;
*width: 79.9690%;
}
.pure-u-sm-5-6,
.pure-u-sm-20-24 {
width: 83.3333%;
*width: 83.3023%;
}
.pure-u-sm-7-8,
.pure-u-sm-21-24 {
width: 87.5000%;
*width: 87.4690%;
}
.pure-u-sm-11-12,
.pure-u-sm-22-24 {
width: 91.6667%;
*width: 91.6357%;
}
.pure-u-sm-23-24 {
width: 95.8333%;
*width: 95.8023%;
}
.pure-u-sm-1,
.pure-u-sm-1-1,
.pure-u-sm-5-5,
.pure-u-sm-24-24 {
width: 100%;
}
}
@media screen and (min-width: 48em) {
.pure-u-md-1,
.pure-u-md-1-1,
.pure-u-md-1-2,
.pure-u-md-1-3,
.pure-u-md-2-3,
.pure-u-md-1-4,
.pure-u-md-3-4,
.pure-u-md-1-5,
.pure-u-md-2-5,
.pure-u-md-3-5,
.pure-u-md-4-5,
.pure-u-md-5-5,
.pure-u-md-1-6,
.pure-u-md-5-6,
.pure-u-md-1-8,
.pure-u-md-3-8,
.pure-u-md-5-8,
.pure-u-md-7-8,
.pure-u-md-1-12,
.pure-u-md-5-12,
.pure-u-md-7-12,
.pure-u-md-11-12,
.pure-u-md-1-24,
.pure-u-md-2-24,
.pure-u-md-3-24,
.pure-u-md-4-24,
.pure-u-md-5-24,
.pure-u-md-6-24,
.pure-u-md-7-24,
.pure-u-md-8-24,
.pure-u-md-9-24,
.pure-u-md-10-24,
.pure-u-md-11-24,
.pure-u-md-12-24,
.pure-u-md-13-24,
.pure-u-md-14-24,
.pure-u-md-15-24,
.pure-u-md-16-24,
.pure-u-md-17-24,
.pure-u-md-18-24,
.pure-u-md-19-24,
.pure-u-md-20-24,
.pure-u-md-21-24,
.pure-u-md-22-24,
.pure-u-md-23-24,
.pure-u-md-24-24 {
display: inline-block;
*display: inline;
zoom: 1;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}
.pure-u-md-1-24 {
width: 4.1667%;
*width: 4.1357%;
}
.pure-u-md-1-12,
.pure-u-md-2-24 {
width: 8.3333%;
*width: 8.3023%;
}
.pure-u-md-1-8,
.pure-u-md-3-24 {
width: 12.5000%;
*width: 12.4690%;
}
.pure-u-md-1-6,
.pure-u-md-4-24 {
width: 16.6667%;
*width: 16.6357%;
}
.pure-u-md-1-5 {
width: 20%;
*width: 19.9690%;
}
.pure-u-md-5-24 {
width: 20.8333%;
*width: 20.8023%;
}
.pure-u-md-1-4,
.pure-u-md-6-24 {
width: 25%;
*width: 24.9690%;
}
.pure-u-md-7-24 {
width: 29.1667%;
*width: 29.1357%;
}
.pure-u-md-1-3,
.pure-u-md-8-24 {
width: 33.3333%;
*width: 33.3023%;
}
.pure-u-md-3-8,
.pure-u-md-9-24 {
width: 37.5000%;
*width: 37.4690%;
}
.pure-u-md-2-5 {
width: 40%;
*width: 39.9690%;
}
.pure-u-md-5-12,
.pure-u-md-10-24 {
width: 41.6667%;
*width: 41.6357%;
}
.pure-u-md-11-24 {
width: 45.8333%;
*width: 45.8023%;
}
.pure-u-md-1-2,
.pure-u-md-12-24 {
width: 50%;
*width: 49.9690%;
}
.pure-u-md-13-24 {
width: 54.1667%;
*width: 54.1357%;
}
.pure-u-md-7-12,
.pure-u-md-14-24 {
width: 58.3333%;
*width: 58.3023%;
}
.pure-u-md-3-5 {
width: 60%;
*width: 59.9690%;
}
.pure-u-md-5-8,
.pure-u-md-15-24 {
width: 62.5000%;
*width: 62.4690%;
}
.pure-u-md-2-3,
.pure-u-md-16-24 {
width: 66.6667%;
*width: 66.6357%;
}
.pure-u-md-17-24 {
width: 70.8333%;
*width: 70.8023%;
}
.pure-u-md-3-4,
.pure-u-md-18-24 {
width: 75%;
*width: 74.9690%;
}
.pure-u-md-19-24 {
width: 79.1667%;
*width: 79.1357%;
}
.pure-u-md-4-5 {
width: 80%;
*width: 79.9690%;
}
.pure-u-md-5-6,
.pure-u-md-20-24 {
width: 83.3333%;
*width: 83.3023%;
}
.pure-u-md-7-8,
.pure-u-md-21-24 {
width: 87.5000%;
*width: 87.4690%;
}
.pure-u-md-11-12,
.pure-u-md-22-24 {
width: 91.6667%;
*width: 91.6357%;
}
.pure-u-md-23-24 {
width: 95.8333%;
*width: 95.8023%;
}
.pure-u-md-1,
.pure-u-md-1-1,
.pure-u-md-5-5,
.pure-u-md-24-24 {
width: 100%;
}
}
@media screen and (min-width: 64em) {
.pure-u-lg-1,
.pure-u-lg-1-1,
.pure-u-lg-1-2,
.pure-u-lg-1-3,
.pure-u-lg-2-3,
.pure-u-lg-1-4,
.pure-u-lg-3-4,
.pure-u-lg-1-5,
.pure-u-lg-2-5,
.pure-u-lg-3-5,
.pure-u-lg-4-5,
.pure-u-lg-5-5,
.pure-u-lg-1-6,
.pure-u-lg-5-6,
.pure-u-lg-1-8,
.pure-u-lg-3-8,
.pure-u-lg-5-8,
.pure-u-lg-7-8,
.pure-u-lg-1-12,
.pure-u-lg-5-12,
.pure-u-lg-7-12,
.pure-u-lg-11-12,
.pure-u-lg-1-24,
.pure-u-lg-2-24,
.pure-u-lg-3-24,
.pure-u-lg-4-24,
.pure-u-lg-5-24,
.pure-u-lg-6-24,
.pure-u-lg-7-24,
.pure-u-lg-8-24,
.pure-u-lg-9-24,
.pure-u-lg-10-24,
.pure-u-lg-11-24,
.pure-u-lg-12-24,
.pure-u-lg-13-24,
.pure-u-lg-14-24,
.pure-u-lg-15-24,
.pure-u-lg-16-24,
.pure-u-lg-17-24,
.pure-u-lg-18-24,
.pure-u-lg-19-24,
.pure-u-lg-20-24,
.pure-u-lg-21-24,
.pure-u-lg-22-24,
.pure-u-lg-23-24,
.pure-u-lg-24-24 {
display: inline-block;
*display: inline;
zoom: 1;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}
.pure-u-lg-1-24 {
width: 4.1667%;
*width: 4.1357%;
}
.pure-u-lg-1-12,
.pure-u-lg-2-24 {
width: 8.3333%;
*width: 8.3023%;
}
.pure-u-lg-1-8,
.pure-u-lg-3-24 {
width: 12.5000%;
*width: 12.4690%;
}
.pure-u-lg-1-6,
.pure-u-lg-4-24 {
width: 16.6667%;
*width: 16.6357%;
}
.pure-u-lg-1-5 {
width: 20%;
*width: 19.9690%;
}
.pure-u-lg-5-24 {
width: 20.8333%;
*width: 20.8023%;
}
.pure-u-lg-1-4,
.pure-u-lg-6-24 {
width: 25%;
*width: 24.9690%;
}
.pure-u-lg-7-24 {
width: 29.1667%;
*width: 29.1357%;
}
.pure-u-lg-1-3,
.pure-u-lg-8-24 {
width: 33.3333%;
*width: 33.3023%;
}
.pure-u-lg-3-8,
.pure-u-lg-9-24 {
width: 37.5000%;
*width: 37.4690%;
}
.pure-u-lg-2-5 {
width: 40%;
*width: 39.9690%;
}
.pure-u-lg-5-12,
.pure-u-lg-10-24 {
width: 41.6667%;
*width: 41.6357%;
}
.pure-u-lg-11-24 {
width: 45.8333%;
*width: 45.8023%;
}
.pure-u-lg-1-2,
.pure-u-lg-12-24 {
width: 50%;
*width: 49.9690%;
}
.pure-u-lg-13-24 {
width: 54.1667%;
*width: 54.1357%;
}
.pure-u-lg-7-12,
.pure-u-lg-14-24 {
width: 58.3333%;
*width: 58.3023%;
}
.pure-u-lg-3-5 {
width: 60%;
*width: 59.9690%;
}
.pure-u-lg-5-8,
.pure-u-lg-15-24 {
width: 62.5000%;
*width: 62.4690%;
}
.pure-u-lg-2-3,
.pure-u-lg-16-24 {
width: 66.6667%;
*width: 66.6357%;
}
.pure-u-lg-17-24 {
width: 70.8333%;
*width: 70.8023%;
}
.pure-u-lg-3-4,
.pure-u-lg-18-24 {
width: 75%;
*width: 74.9690%;
}
.pure-u-lg-19-24 {
width: 79.1667%;
*width: 79.1357%;
}
.pure-u-lg-4-5 {
width: 80%;
*width: 79.9690%;
}
.pure-u-lg-5-6,
.pure-u-lg-20-24 {
width: 83.3333%;
*width: 83.3023%;
}
.pure-u-lg-7-8,
.pure-u-lg-21-24 {
width: 87.5000%;
*width: 87.4690%;
}
.pure-u-lg-11-12,
.pure-u-lg-22-24 {
width: 91.6667%;
*width: 91.6357%;
}
.pure-u-lg-23-24 {
width: 95.8333%;
*width: 95.8023%;
}
.pure-u-lg-1,
.pure-u-lg-1-1,
.pure-u-lg-5-5,
.pure-u-lg-24-24 {
width: 100%;
}
}
@media screen and (min-width: 80em) {
.pure-u-xl-1,
.pure-u-xl-1-1,
.pure-u-xl-1-2,
.pure-u-xl-1-3,
.pure-u-xl-2-3,
.pure-u-xl-1-4,
.pure-u-xl-3-4,
.pure-u-xl-1-5,
.pure-u-xl-2-5,
.pure-u-xl-3-5,
.pure-u-xl-4-5,
.pure-u-xl-5-5,
.pure-u-xl-1-6,
.pure-u-xl-5-6,
.pure-u-xl-1-8,
.pure-u-xl-3-8,
.pure-u-xl-5-8,
.pure-u-xl-7-8,
.pure-u-xl-1-12,
.pure-u-xl-5-12,
.pure-u-xl-7-12,
.pure-u-xl-11-12,
.pure-u-xl-1-24,
.pure-u-xl-2-24,
.pure-u-xl-3-24,
.pure-u-xl-4-24,
.pure-u-xl-5-24,
.pure-u-xl-6-24,
.pure-u-xl-7-24,
.pure-u-xl-8-24,
.pure-u-xl-9-24,
.pure-u-xl-10-24,
.pure-u-xl-11-24,
.pure-u-xl-12-24,
.pure-u-xl-13-24,
.pure-u-xl-14-24,
.pure-u-xl-15-24,
.pure-u-xl-16-24,
.pure-u-xl-17-24,
.pure-u-xl-18-24,
.pure-u-xl-19-24,
.pure-u-xl-20-24,
.pure-u-xl-21-24,
.pure-u-xl-22-24,
.pure-u-xl-23-24,
.pure-u-xl-24-24 {
display: inline-block;
*display: inline;
zoom: 1;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}
.pure-u-xl-1-24 {
width: 4.1667%;
*width: 4.1357%;
}
.pure-u-xl-1-12,
.pure-u-xl-2-24 {
width: 8.3333%;
*width: 8.3023%;
}
.pure-u-xl-1-8,
.pure-u-xl-3-24 {
width: 12.5000%;
*width: 12.4690%;
}
.pure-u-xl-1-6,
.pure-u-xl-4-24 {
width: 16.6667%;
*width: 16.6357%;
}
.pure-u-xl-1-5 {
width: 20%;
*width: 19.9690%;
}
.pure-u-xl-5-24 {
width: 20.8333%;
*width: 20.8023%;
}
.pure-u-xl-1-4,
.pure-u-xl-6-24 {
width: 25%;
*width: 24.9690%;
}
.pure-u-xl-7-24 {
width: 29.1667%;
*width: 29.1357%;
}
.pure-u-xl-1-3,
.pure-u-xl-8-24 {
width: 33.3333%;
*width: 33.3023%;
}
.pure-u-xl-3-8,
.pure-u-xl-9-24 {
width: 37.5000%;
*width: 37.4690%;
}
.pure-u-xl-2-5 {
width: 40%;
*width: 39.9690%;
}
.pure-u-xl-5-12,
.pure-u-xl-10-24 {
width: 41.6667%;
*width: 41.6357%;
}
.pure-u-xl-11-24 {
width: 45.8333%;
*width: 45.8023%;
}
.pure-u-xl-1-2,
.pure-u-xl-12-24 {
width: 50%;
*width: 49.9690%;
}
.pure-u-xl-13-24 {
width: 54.1667%;
*width: 54.1357%;
}
.pure-u-xl-7-12,
.pure-u-xl-14-24 {
width: 58.3333%;
*width: 58.3023%;
}
.pure-u-xl-3-5 {
width: 60%;
*width: 59.9690%;
}
.pure-u-xl-5-8,
.pure-u-xl-15-24 {
width: 62.5000%;
*width: 62.4690%;
}
.pure-u-xl-2-3,
.pure-u-xl-16-24 {
width: 66.6667%;
*width: 66.6357%;
}
.pure-u-xl-17-24 {
width: 70.8333%;
*width: 70.8023%;
}
.pure-u-xl-3-4,
.pure-u-xl-18-24 {
width: 75%;
*width: 74.9690%;
}
.pure-u-xl-19-24 {
width: 79.1667%;
*width: 79.1357%;
}
.pure-u-xl-4-5 {
width: 80%;
*width: 79.9690%;
}
.pure-u-xl-5-6,
.pure-u-xl-20-24 {
width: 83.3333%;
*width: 83.3023%;
}
.pure-u-xl-7-8,
.pure-u-xl-21-24 {
width: 87.5000%;
*width: 87.4690%;
}
.pure-u-xl-11-12,
.pure-u-xl-22-24 {
width: 91.6667%;
*width: 91.6357%;
}
.pure-u-xl-23-24 {
width: 95.8333%;
*width: 95.8023%;
}
.pure-u-xl-1,
.pure-u-xl-1-1,
.pure-u-xl-5-5,
.pure-u-xl-24-24 {
width: 100%;
}
}
.tns-outer{padding:0 !important}.tns-outer [hidden]{display:none !important}.tns-outer [aria-controls],.tns-outer [data-action]{cursor:pointer}.tns-outer.ms-touch{overflow-x:scroll;overflow-y:hidden;-ms-overflow-style:none;-ms-scroll-chaining:none;-ms-scroll-snap-type:mandatory;-ms-scroll-snap-points-x:snapInterval(0%, 100%)}.tns-slider{transition:all 0s}.tns-slider>.tns-item{box-sizing:border-box}.tns-horizontal.tns-subpixel{white-space:nowrap}.tns-horizontal.tns-subpixel>.tns-item{display:inline-block;vertical-align:top;white-space:normal}.tns-horizontal.tns-no-subpixel:after{content:'';display:table;clear:both}.tns-horizontal.tns-no-subpixel>.tns-item{float:left;margin-right:-100%}.tns-no-calc{position:relative;left:0}.tns-gallery{position:relative;left:0}.tns-gallery>.tns-item{position:absolute;left:-100%;transition:-webkit-transform 0s, opacity 0s;transition:transform 0s, opacity 0s}.tns-lazy-img{transition:opacity 0.6s;opacity:0.6}.tns-lazy-img.loaded{opacity:1}.tns-ah{transition:height 0s}.tns-ovh{overflow:hidden}.tns-hdx{overflow-x:hidden}.tns-hdy{overflow-y:hidden}.tns-visually-hidden{position:absolute;left:-10000em}.tns-transparent{opacity:0;visibility:hidden}.tns-fadeIn{opacity:1;filter:alpha(opacity=100);z-index:0}.tns-normal,.tns-fadeOut{opacity:0;filter:alpha(opacity=0);z-index:-1} :root{
--header-size: 80px;
--light-blue: #2ba6b5;
--blue: #225f6c;
--dark-blue: #161d25;
--black: #02000a;
--grey: #939598;
--light-grey: #eeeeed;
--transition-speed: 0.4s;
--transition-speed-fast: 0.2s;
--soft-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1.000);
--ease-in-out: cubic-bezier(0.770, 0.000, 0.175, 1.000);
--barba-transition: 0.4s;
}
body{
color: var(--black);
font-family: 'Ubuntu', sans-serif;
line-height: 140%;
font-size: 92%;
}
body.nav-on, body.rens-on{
overflow: hidden;
}
h1, h2, h3{
line-height: 120%;
}
h1{
font-size: 1.5em;
}
h2{
font-size: 1.3em;
}
h3{
font-size: 1.1em;
}
a{
color:var(--black);
}
.vertically-centered{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.vertically-centered > *{
margin-top: auto;
margin-bottom: auto;
}
.horizontally.vertically-centered > *{
margin-right: auto;
margin-left: auto;
}
.centered{
text-align: center;
}
.wrapper{
padding-right: 20px;
padding-left: 20px;
box-sizing: border-box;
}
.spacing{
margin: 40px auto;
}
.shadow{
box-shadow: 5px 5px 10px rgba(0,0,0,0.15);
}
.spacer{
width: 100%;
height: var(--header-size);
}
.pure-g{
-ms-flex-line-pack: center;
align-content: center;
}
a{
text-decoration: none;
} header{
height: var(--header-size);
background: #fff;
}
header a{
text-decoration: none;
}
header #logo img{
display: block;
width: 110px;
max-width: 100%;
height: auto;
}
header #trigger-nav{
position: relative;
z-index: 4;
transition: color 0.2s, opacity 0.2s;
}
.rens-on header #trigger-nav{
opacity: 0;
pointer-events: none;
}
header #trigger-nav:before{
content:'menu';
}
.nav-on header #trigger-nav{
color: var(--light-blue);
}
.nav-on header #trigger-nav:before{
content: 'close';
}
header .trigger-contact{
position: relative;
z-index: 3;
transition: color 0.2s, opacity 0.2s;
}
.nav-on header .trigger-contact{
opacity: 0;
pointer-events: none;
}
header .trigger-contact:before{
content:'contact';
}
.contact-on header .trigger-contact{
color: var(--light-blue);
}
.contact-on header .trigger-contact:before{
content: 'close';
}
.header-left > a, .header-right > a{
display: inline-block;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
header .header-left{
padding-right: 0;
}
header .header-right{
text-align: right;
padding-left: 0;
}
header .header-right .actus{
display: none;
} nav{
position: fixed;
top: 0; right: 0; bottom: 0; left: 0; 
z-index: 3;
box-sizing: border-box;
background-image: url(//www.myg-marine.fr/wp-content/themes/hors-lignes/img/bg-menu-mobile.jpg);
background-size: cover;
overflow: auto;
opacity: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
pointer-events: none;
transition: opacity 0.4s, -webkit-transform 0s 0.4s;
transition: opacity 0.4s, transform 0s 0.4s;
}
.nav-on nav{
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
pointer-events: auto;
transition: opacity 0.4s, -webkit-transform 0s 0s;
transition: opacity 0.4s, transform 0s 0s;
}
nav ul{
list-style-type: none;
padding: 0;
margin: 0;
}
nav .menu-perso{
opacity: 0;
-webkit-transform: translateX(20px);
transform: translateX(20px);
transition: opacity 0.4s, -webkit-transform 0.4s;
transition: opacity 0.4s, transform 0.4s;
}
.nav-on nav .menu-perso{
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
nav .menu-perso li{
margin: 20px 0;
}
nav .menu-perso a{
color: #fff;
font-weight: 500;
font-size: 1.8em;
text-decoration: none;
text-transform: lowercase;
}
nav .menu-perso a.mentions-nav{
font-size: 1.2em;
font-weight: 400;
margin-top: 20px;
}
nav .menu-auto{
margin-top: 40px;
margin-bottom: 40px;
opacity: 0;
-webkit-transform: translateX(40px);
transform: translateX(40px);
transition: opacity 0.6s, -webkit-transform 0.6s;
transition: opacity 0.6s, transform 0.6s;
}
.nav-on nav .menu-auto{
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
nav .menu-auto span{
display: block;
margin-bottom: 20px;
color: #fff;
font-weight: 500;
font-size: 1.8em;
text-decoration: none;
text-transform: lowercase;
}
nav .menu-auto li{
margin-bottom: 10px;
}
nav .menu-auto li a{
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-size: 0.9em;
letter-spacing: 0.1em;
}
nav .menu-auto li img{
width: 25px;
margin-right: 15px;
vertical-align: bottom;
} #carousel{
height: calc(100vh - var(--header-size)); padding: 0 10px;
box-sizing: border-box;
position: relative;
overflow: hidden;
transition: height var(--transition-speed);
transition-timing-function: var(--ease-in-out);
}
.home #carousel, .expanded-carousel #carousel{
height: calc(100vh - var(--header-size));
}
#carousel > div{
width: 100%;
height: 100%;
position: relative;
background: var(--light-grey);
}
#carousel > div .loader{
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
#carousel #expand{
position: absolute;
bottom: 0; left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
height: 40px;
width: 40px;
outline: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
background: var(--dark-blue);
transition: -webkit-transform var(--transition-speed);
transition: transform var(--transition-speed);
}
.home #carousel #expand{
-webkit-transform: translate(-50%, 100%);
transform: translate(-50%, 100%);
}
#carousel #expand img{
width: 20px;
transition: -webkit-transform 0.4s;
transition: transform 0.4s;
}
.expanded-carousel #carousel #expand img{
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
#carousel canvas{
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
#carousel #back{
position: absolute;
top: 0; right: 10px; bottom: 0; left: 10px;
z-index: 1;
background: var(--dark-blue);
opacity: 0.25;
transition: opacity var(--transition-speed);
}
.home #carousel #back, .expanded-carousel #carousel #back{
opacity: 0;
pointer-events: none;
}
#carousel .arrow{
position: absolute;
bottom: 0;
z-index: 2;
width: 35px;
cursor: pointer;
opacity: 0;
transition: opacity var(--transition-speed);
}
.home #carousel .arrow, .expanded-carousel #carousel .arrow{
opacity: 1;
}
#carousel #prev{
left: 10px;
-webkit-transform: translateY(-50%) translateX(0%);
transform: translateY(-50%) translateX(0%);
}
#carousel #next{
right: 10px;
-webkit-transform: translateY(-50%) translateX(0%);
transform: translateY(-50%) translateX(0%);
}
#carousel .nav-bar{
display: none;
}
#carousel .pagination{
display: none;
} .content{
min-height: calc(50vh - (var(--header-size) / 2));
background: var(--light-grey);
color: var(--blue);
position: relative;
z-index: 2;
margin-top: calc((50vh - (var(--header-size) / 2)) * -1);
transition: margin-top var(--transition-speed);
}
.expanded-carousel .content{
margin-top: 0;
}
.home .content{
min-height: 0;
}
.content a{
color: var(--blue);
}
.content-wrapper{
padding-top: 50px;
padding-bottom: 50px;
}
.content h1{
margin-top: 0;
margin-bottom: 30px;
}
.content h2{
font-size: 1em;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top:40px;
margin-bottom: 20px;
}
.content h3{
font-size: 1em;
margin-top:30px;
margin-bottom: 20px;
} .liste-produits{
margin-bottom: 0;
}
.liste-produits .produit h2{
font-size: 1em;
text-transform: uppercase;
letter-spacing: 0.1em;
margin: 0;
}
.liste-produits a{
text-decoration: none;
}
.liste-produits .visuel{
background-size: cover;
background-position: center;
position: relative;
}
.liste-produits .visuel a{
position: absolute; 
top:0; right:0; bottom:0; left:0;
}
.liste-produits .details{
padding-right: 15px;
padding-left: 15px;
box-sizing: border-box;
}
.liste-produits .produit{
min-height: 90px;
margin-bottom: 15px;
}
.liste-produits .produit:last-child{
margin-bottom:0;
}
.liste-produits .produit .visuel{
min-height: 90px;
} .liste-references .reference{
padding: 10px 10px 10px 0;
box-sizing: border-box;
} .liste-references .reference span{
display: block;
padding-bottom: 46%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-color: #fff;
} .liste-nuances .nuance{
display: inline-block;
width: 40px;
height: 40px;
margin-right: 20px;
} .liste-pdf .pdf{
display: inline-block;
width: 120px;
margin-right: 10px;
vertical-align: top;
padding: 10px;
}
.liste-pdf .pdf-image{
display: block;
margin: auto;
width: 80px;
}
.liste-pdf .pdf-image img{
display: block;
width: 100%;
}
.liste-pdf .pdf-titre{
font-size: 0.8em;
margin-top: 10px;
display: block;
text-align: center;
} .gallery-icon{
display: block;
width: 100%;
padding: 0 5px;
box-sizing: border-box;
}
.gallery-icon a{
display: block;
width: 100%;
}
.gallery-icon img{
display: block;
width: 100%;
border: none !important;
} .partage .link{
display: inline-block;
background: var(--blue);
color:#fff;
text-decoration: none;
padding: 15px 20px;
margin-right: 20px;
} .renseignements{
margin-bottom: 0;
}
.renseignements a{
display: inline-block;
font-size: 1em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
text-decoration: none;
padding-bottom: 8px;
position: relative;
}
.renseignements a:after{
content:'';
position: absolute;
right: 0; bottom: 0; left: 0;
height: 3px;
background:var(--blue);
} .formulaire{
position: fixed;
top: 0; right: 0; bottom: 0; left: 0; 
z-index: 2;
box-sizing: border-box;
background: var(--black);
overflow: auto;
opacity: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
pointer-events: none;
transition: opacity 0.4s, -webkit-transform 0s 0.4s;
transition: opacity 0.4s, transform 0s 0.4s;
}
.formulaire-contact{
z-index: 2;
}
.rens-on .formulaire-rens, .contact-on .formulaire-contact{
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
pointer-events: auto;
transition: opacity 0.4s, -webkit-transform 0s 0s;
transition: opacity 0.4s, transform 0s 0s;
}
.formulaire .close{
display: none;
position: absolute;
top: 20px; left: 20px;
width: 40px;
height: 40px;
margin: auto;
cursor: pointer;
}
.formulaire .close:before{
content:'';
width: 100%;
height: 1px;
position: absolute;
top: 50%; left: 50%;
background-color: var(--light-blue);
-webkit-transform: translateX(-50%) rotate(-45deg);
transform: translateX(-50%) rotate(-45deg)
}
.formulaire .close:after{
content:'';
width: 100%;
height: 1px;
position: absolute;
top: 50%; left: 50%;
background-color: var(--light-blue);
-webkit-transform: translateX(-50%) rotate(45deg);
transform: translateX(-50%) rotate(45deg)
}
.formulaire-rens .close{
display: block;
}
.formulaire h2{
display: inline-block;
font-size: 1em;
text-transform: uppercase;
letter-spacing: 0.1em;
text-decoration: none;
padding-bottom: 8px;
position: relative;
margin: 0 0 30px;
color:#fff;
opacity: 0;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
transition: opacity 0.4s, -webkit-transform 0.4s;
transition: opacity 0.4s, transform 0.4s;
}
.rens-on .formulaire-rens h2, .contact-on .formulaire-contact h2{
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.formulaire h2:after{
content:'';
position: absolute;
right: 0; bottom: 0; left: 0;
height: 3px;
background:#fff;
}
.formulaire .wpcf7{
opacity: 0;
-webkit-transform: translateX(-40px);
transform: translateX(-40px);
transition: opacity 0.6s, -webkit-transform 0.6s;
transition: opacity 0.6s, transform 0.6s;
margin-bottom: 40px;
max-width: 500px;
margin: 0 auto 40px auto;
}
.rens-on .formulaire .wpcf7, .contact-on .formulaire .wpcf7{
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.formulaire label{
display: none;
}
.formulaire input, .formulaire textarea{
width: 100%;
background: transparent;
color: rgba(255,255,255,0.8);
padding: 5px 10px;
box-sizing: border-box;
border: none;
border-bottom: 1px solid rgba(255,255,255,0.3);
}
.formulaire input{
margin-bottom: 15px;
}
.formulaire textarea{
height: 100px;
border: 1px solid rgba(255,255,255,0.3);
padding: 10px;
margin: 20px 0;
}
.formulaire .submit-button{
text-align: center;
position: relative;
margin-top: 30px;
}
.formulaire input[type="submit"]{
width: auto;
background: var(--blue);
color:#fff;
border: none;
font-weight: 500;
color: #fff;
text-transform: uppercase;
letter-spacing: 0.2em;
padding: 15px 30px;
margin-bottom: 0;
}
.formulaire div.wpcf7 .ajax-loader{
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
margin-left: 10px;
}
.formulaire .wpcf7-not-valid-tip{
font-size: 0.8em;
margin-top: -1em;
}
.formulaire div.wpcf7-response-output {
color: #fff;
margin: 0;
font-size: 0.9em;
padding: 10px;
margin-top: 20px;
}
.formulaire .contact-infos{
display: none;
} body .actus{
margin-bottom: 0;
}
.actu{
padding-bottom: 30px;
margin-bottom: 30px;
border-bottom: 2px solid #fff;
}
.actu:last-child{
padding-bottom: 0;
margin-bottom: 0;
border-bottom: none;
}
.content .actu h2{
margin-bottom: 10px;
}
.actu .date{
font-size: 0.9em;
}
.actu a{
font-weight: 600;
}
.content .back-link, .content .close-link{
float: right;
padding: 0 0 30px 30px;
}
.content .back-link img, .content .close-link img{
display: block;
width: 30px;
} #map{
opacity: 0;
pointer-events: none;
transition: opacity var(--transition-speed);
}
.contact-on #map{
opacity: 1;
pointer-events: auto;
} footer{
display: none;
} .barba-container{
position: relative;
}
.barba-loader{
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: var(--light-grey);
opacity: 0;
pointer-events: none;
transition: opacity var(--barba-transition);
}
.transition-page-out .barba-loader{
opacity: 1;
}
.barba-loader .loader{
position: absolute;
top: 80px; left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 50px;
} .lity-iframe .lity-container {
max-width: 1150px;
}
.lity-container {
width: 65%;
pointer-events: none;
}
.lity-content img{
margin:auto;
max-height: 80vh !important;
}
.lity-content::after {
display:none;
}
.lity-close {
width: 50px;
height: 50px;
font-size:50px;
}
@media (min-width: 360px) {
.wrapper{
padding-right: 30px;
padding-left: 30px;
}
#carousel{
padding: 0 15px;
}
#carousel #back {
right: 15px; left: 15px;
}
.content-wrapper{
padding-top: 50px;
padding-bottom: 50px;
}
}
@media (min-width: 568px) { }
@media (min-width: 768px) {
:root{
--header-size: 100px;
}
body{
font-size: 94%;
}
.wrapper {
padding-right: 60px;
padding-left: 60px;
}
header #logo img {
width: 130px;
}
header #trigger-nav{
padding-right: 40px;
position: relative;
}
header #trigger-nav span{
height: 20px;
width: 2px;
display: inline-block;
position: absolute;
top: 50%; right: 10px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
header #trigger-nav span:before, header #trigger-nav span:after{
content:'';
position: absolute;
top:0; right: -10px;
background-color: var(--blue);
height: 100%;
width: 2px;
transition: right 0.2s, left 0.2s, -webkit-transform 0.2s, background-color 0.2s;
transition: right 0.2s, left 0.2s, transform 0.2s, background-color 0.2s;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
header #trigger-nav span:after{
right: auto; left: -10px;
}
.nav-on header #trigger-nav span:before, .nav-on header #trigger-nav span:after{
background-color: var(--light-blue);
}
.nav-on header #trigger-nav span:before{
right: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.nav-on header #trigger-nav span:after{
left: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
nav .container-menus{
height: calc(90% - var(--header-size));
}
nav .menu-perso{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: right;
}
nav .menu-perso li {
margin: 40px 0;
}
nav .menu-perso li:last-child {
margin-bottom: 0;
}
nav .menu-perso li:first-child{
margin-top: 0;
}
nav .menu-perso a {
font-size: 2em;
}
nav .menu-auto {
margin-top: 0;
margin-bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
nav .menu-auto span {
margin-bottom: 40px;
font-size: 2em;
}
nav .menu-auto li {
margin-bottom: 15px;
}
nav .menu-auto li:last-child {
margin-bottom: 0;
}
#carousel{
padding: 0 20px;
}
.content-wrapper {
padding-top: 60px;
padding-bottom: 60px;
}
.content h1{
margin-bottom: 40px;
}
.content h2{
margin-top:50px;
margin-bottom: 20px;
}
.content h3{
font-size: 1em;
margin-top:30px;
margin-bottom: 10px;
}
.liste-produits .produit {
min-height: 120px;
}
.liste-produits .produit .visuel{
min-height: 120px;
}
.liste-produits .details {
padding-right: 60px;
padding-left: 30px;
} }
@media (min-width: 1024px) {
nav{
background-image: url(//www.myg-marine.fr/wp-content/themes/hors-lignes/img/bg-menu.jpg);
background-size: cover;
background-position: center;
right: 20px; bottom: 20px; left: 20px;
}
header{
position: fixed;
top:0; right: 0; left:0;
z-index: 3;
}
.header-spacer{
height: var(--header-size);
}
header .header-left, header .header-right{
text-align: center;
padding: 0;
} 
.rens-on header #trigger-nav {
opacity: 1;
pointer-events: auto;
}
.nav-on header .trigger-contact{
opacity: 1;
pointer-events: auto;
}
nav{
top: var(--header-size);
}
nav .spacer{
display: none;
}
nav .container-menus {
height: 100%;
}
nav .menu-perso{
text-align: right;
padding-left: 0;
padding-right: 140px;
-webkit-transform: translateX(-40px);
transform: translateX(-40px);
transition: opacity 0.6s, -webkit-transform 0.6s;
transition: opacity 0.6s, transform 0.6s;
}
nav .menu-perso li {
margin: 60px 0;
}
nav .menu-perso li:last-child {
margin-top: 100px;
}
nav .menu-auto{
padding-left: 140px;
padding-right: 0;
}
#main{
position: relative;
overflow: hidden;
}
#main:before {
content: '';
position: fixed;
top: 0; right: 0; bottom: 0;
z-index: 4;
width: 20px;
background: #fff;
}
#main:after {
content: '';
position: fixed;
right: 0; bottom: 0; left: 0; 
z-index: 3;
height: 20px;
background: #fff;
}
#carousel {
height: calc(100vh - var(--header-size));
padding-bottom: 20px;
position: fixed;
width: 100%;
}
#carousel #expand{
display: none;
}
#carousel #back{
right: 20px; left: 20px;
}
#carousel .nav-bar{
display: block;
position: absolute;
right: 0; bottom: 0; left: 0;
z-index: 2;
height: 0;
text-align: center;
opacity: 0;
pointer-events: none;
transition: opacity var(--transition-speed);
}
.home #carousel .nav-bar, .expanded-carousel #carousel .nav-bar{
opacity: 1;
pointer-events: auto;
}
.suivez-on #carousel .nav-bar{
opacity: 0;
pointer-events: none;
}
#carousel .nav-bar a{
display: inline-block;
width: 40px;
height: 40px;
position: relative;
margin: 0 10px;
background: rgba(255,255,255,1);
opacity: 0.5;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
transition: opacity var(--transition-speed-fast), -webkit-transform var(--transition-speed-fast);
transition: opacity var(--transition-speed-fast), transform var(--transition-speed-fast);
}
#carousel .nav-bar a.marked{
opacity: 1;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
#carousel .nav-bar img{
display: block;
-webkit-filter: invert(1);
filter: invert(1);
width: 50%;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.suivez-on #carousel #back{
opacity: 0.25;
pointer-events: auto;
}
.content{
min-height: calc(100vh - var(--header-size) - 20px);
transition: -webkit-transform 0.6s;
transition: transform 0.6s;
transition-timing-function: var(--ease-in-out);
width: calc(50% - 20px);
position: relative;
left: 50%;
}
.home .content, .expanded-carousel .content{
min-height: calc(100vh - var(--header-size) - 20px);
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.content-wrapper {
padding-top: 60px;
padding-bottom: 80px;
}
.content .back-link, .content .close-link{
position: absolute;
top: auto; left: 0;
padding: 0;
-webkit-transform: translateY(-15%);
transform: translateY(-15%);
}
.content .back-link img, .content .close-link img {
width: 33px;
}
.formulaire{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
top: var(--header-size); right: 20px; bottom: 20px; left: 50%;
opacity: 0;
pointer-events: none;
-webkit-transform: translateX(100%);
transform: translateX(100%);
transition: -webkit-transform 0.6s, opacity 0s 0.6s;
transition: transform 0.6s, opacity 0s 0.6s;
transition-timing-function: var(--ease-in-out);
}
.formulaire .spacer{
display: none;
}
.contact-on .formulaire-contact, .rens-on .formulaire-rens{
opacity: 1;
pointer-events: auto;
-webkit-transform: translateX(0);
transform: translateX(0);
transition: -webkit-transform 0.6s, opacity 0s 0s;
transition: transform 0.6s, opacity 0s 0s; 
transition-timing-function: var(--ease-in-out);
}
.formulaire h2 {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
.formulaire .wpcf7 {
-webkit-transform: translateX(0);
transform: translateX(0);
margin-bottom: 0;
opacity: 1;
transition-delay: 0s;
}
.formulaire-contact {
z-index: 3;
}
.suivez-nous{
left: 20px; right: 50%;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.suivez-nous .close {
right: 20px; left: auto;
}
.suivez-on .suivez-nous{
opacity: 1;
pointer-events: auto;
-webkit-transform: translateX(0);
transform: translateX(0);
transition: -webkit-transform 0.6s, opacity 0s 0s;
transition: transform 0.6s, opacity 0s 0s; 
transition-timing-function: var(--ease-in-out);
}
#barba-wrapper{
margin-top: 0;
}
.barba-loader .loader{
top: calc( (100vh - var(--header-size) - 20px) / 2 );
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#map{
position: fixed !important;
top: var(--header-size); right: 50%; bottom: 20px; left: 20px;
}
footer{
display: none;
}
}
@media (min-width: 1280px) {
:root {
--header-size: 110px;
}
body{
font-size: 96%;
}
body.menu-on, body.rens-on{
overflow: auto;
}
.wrapper {
padding-right: 80px;
padding-left: 80px;
}
header #logo img {
width: 140px;
}
header .trigger-contact{
display: none;
}
header .header-right .actus{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
}
header .header-right .actus .container-actus{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-right: 30px;
box-sizing: border-box;
overflow: hidden;
}
header .header-right .actus span{
text-transform: uppercase;
font-weight: 600;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg) translateY(50%);
transform: translateX(-50%) translateY(-50%) rotate(-90deg) translateY(50%);
display: block;
position: relative;
top: 50%;
}
header .header-right .actus .tns-outer{
position: relative;
}
header .header-right .actus .tns-nav{
position: absolute;
top: 50%; left: -32px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
header .header-right .actus .tns-nav button{
display: block;
height: 8px;
width: 8px;
border-radius: 50%;
padding: 0;
margin: 6px 0;
border: none;
background: var(--black);
opacity: 0.15;
}
header .header-right .actus .tns-nav .tns-nav-active{
background: var(--blue);
opacity: 1;
}
header .header-right .actus .tns-item{
height: 100%;
}
header .header-right .actus .slider-actus{
text-align: left;
font-size: 0.9em;
}
header .header-right .actus h3{
margin-top: 0;
margin-bottom: 5px;
}
header .header-right .actus a{
color: var(--blue);
}
header .header-right .actus p{
color: var(--grey);
margin: 0;
}
nav{
right: 30px; bottom: 30px; left: 30px;
overflow: hidden;
}
nav .menu-perso {
padding-right: 180px;
}
nav .menu-perso a {
font-size: 2.2em;
}
nav .menu-auto {
padding-left: 180px;
}
nav .menu-auto span {
margin-bottom: 60px;
font-size: 2.2em;
}
#main:before{
width: 30px;
}
#main:after{
height: 30px;
}
#carousel{
padding: 0 30px 30px 30px;
}
#carousel #back{
right: 30px; left: 30px;
}
#carousel .arrow{
display: none;
}
#carousel #prev{
transition: -webkit-transform var(--transition-speed-fast), left var(--transition-speed-fast), opacity var(--transition-speed-fast);
transition: transform var(--transition-speed-fast), left var(--transition-speed-fast), opacity var(--transition-speed-fast);
}
#carousel > div:hover #prev{
left: 20px;
opacity: 1;
}
#carousel #next{
transition: -webkit-transform var(--transition-speed-fast), right var(--transition-speed-fast), opacity var(--transition-speed-fast);
transition: transform var(--transition-speed-fast), right var(--transition-speed-fast), opacity var(--transition-speed-fast);
}
#carousel > div:hover #next{
right: 20px;
opacity: 1;
}
#carousel .nav-bar:before{
content: '';
position: absolute;
top: -23px; right: 0; left: 0;
height: 1px;
background: rgba(255,255,255,0.5);
}
#carousel .nav-bar a{
margin: 0 15px;
width: 45px;
height: 45px;
}
#carousel .nav-bar a:hover{
opacity: 1;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
#carousel .pagination{
display: block;
position: absolute;
top: 50%; right: 10px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
opacity: 0;
pointer-events: none;
z-index: 2;
transition: opacity var(--transition-speed);
}
.home #carousel .pagination, .expanded-carousel #carousel .pagination{
opacity: 1;
pointer-events: auto;
}
.suivez-on #carousel .pagination{
opacity: 0;
pointer-events: none;
}
#carousel .pagination span{
cursor: pointer;
display: block;
position: relative;
width:5px;
height: 40px;
padding: 0 10px;
margin: 5px 0;
opacity: 0.5;
transition: opacity var(--transition-speed-fast);
}
#carousel .pagination span:after{
content: '';
background: #fff;
position: absolute;
top: 0; bottom: 0; left: 50%;
width: 5px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
#carousel .pagination span:hover{
opacity: 0.7;
}
#carousel .pagination span.active{
opacity: 1;
}
.content {
width: calc(50% - 30px);
min-height: calc(100vh - var(--header-size) - 30px);
}
.home .content{
min-height: calc(100vh - var(--header-size) - 30px);
}
.content-wrapper {
padding-top: 100px;
padding-bottom: 140px;
}
.liste-produits{
padding: 0 40px 0 80px;
}
.content .back-link, .content .close-link{
position: absolute;
left: 0;
padding: 0;
}
.content .back-link img, .content .close-link img {
width: 40px;
}
.formulaire {
right: 30px; bottom: 30px;
}
.formulaire .close{
display: block;
width: 50px;
height: 50px;
top: 40px; left: 40px;
}
.suivez-nous{
left: 30px; right: 50%;
}
.suivez-nous .close{
right: 40px; left: auto;
}
.barba-loader .loader{
top: calc( (100vh - var(--header-size) - 30px) / 2 );
}
#map{
left: 30px; bottom: 30px;
}
footer {
display: block;
position: static;
font-size: 0.9em;
letter-spacing: 0.1em;
}
footer .left{
position: fixed;
top: 0; bottom: 0; left: 0;
z-index: 3;
width: 30px;
background: #fff;
}
footer .right{
position: fixed;
top: 0; bottom: 0; right: 0;
z-index: 4;
width: 30px;
}
footer .left a, footer .right a{
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%) rotate(-90deg);
transform: translateY(-50%) translateX(-50%) rotate(-90deg);
white-space: nowrap;
line-height: 1em;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
}
}
@media (min-width: 1680px) {
:root {
--header-size: 120px;
}
body{
font-size: 98%;
}
h1{
font-size: 1.8em;
}
.spacing{
margin: 60px auto;
}
.wrapper {
padding-right: 120px;
padding-left: 120px;
}
header #logo img {
width: 150px;
}
nav .menu-perso {
padding-right: 280px;
}
nav .menu-perso li:last-child {
margin-top: 200px;
}
nav .menu-perso a {
font-size: 2.6em;
}
nav .menu-auto {
padding-left: 280px;
}
nav .menu-auto span {
font-size: 2.6em;
}
#carousel .nav-bar a{
width: 45px;
height: 45px;
margin: 0 25px;
}
.liste-produits {
padding: 0 40px 0 120px;
margin-bottom: 0;
} .gallery-icon{
padding: 0 10px;
}
.renseignements {
margin-bottom: 0;
}
.formulaire .close{
top: 60px; left: 60px;
}
.suivez-nous .close{
right: 60px; left: auto;
}
.actu {
padding-bottom: 40px;
margin-bottom: 40px;
}
}
@media (min-width: 1920px) {
body{
font-size: 100%;
}
header .header-right .actus span {
-webkit-transform: translateX(-25%) translateY(-50%) rotate(-90deg) translateY(50%);
transform: translateX(-25%) translateY(-50%) rotate(-90deg) translateY(50%);
}
.content .back-link img, .content .close-link img {
width: 50px;
}
}