@charset "UTF-8";
/*
 * This file is part of "artools".
 *    Copyright 2009-2011, arNuméral
 *    Author : Yoran Brault
 *    eMail  : yoran.brault@bad_arnumeral.fr (remove bad_ before sending an email)
 *    Site   : http://www.arnumeral.fr
 *    Credits: http://meyerweb.com/eric/tools/css/reset/
 *    Credits: http://www.positioniseverything.net/easyclearing.html
 *
 * "artools" is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License as
 * published by the Free Software Foundation; either version 2.1 of
 * the License, or (at your option) any later version.
 *
 * "artools" is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 * General Public License for more details.
 *
 * You should have received a copy of the GNU General Public
 * License along with "artools"; if not, write to the Free
 * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
 * 02110-1301 USA, or see the FSF site: http://www.fsf.org.
 */
@import url(https://fonts.googleapis.com/css?family=filson:300,300italic,400,400italic,700,700italic);

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
.formatted ol li,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
ul,
li {
  margin: 0;
  padding: 0;
  border: 0 none;
  font-family: inherit;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-size: inherit;
  font-size-adjust: inherit;
  font-stretch: inherit;
  -moz-font-feature-settings: inherit;
  -moz-font-language-override: inherit;
  vertical-align: baseline;
  line-height: 100%;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
}

body {
  font: 12px/140% Verdana, Helvetica, sans-serif;
}

ol,
ul,
li {
  list-style: none outside none;
}

blockquote,
q {
  quotes: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  text-decoration: none;
  color: black;
  cursor: pointer;
}

* {
  outline: none;
}

/* Un truc ajouté je ne sais pka par D7. */
.element-invisible {
  display: none !important;
}

* {
  box-sizing: border-box;
}

:focus {
  outline: 0;
}

.container {
  width: 960px;
  margin: 0 auto;
  position: relative;
}

@media only screen and (max-width: 770px) {
  .container {
    width: auto;
    margin: 0;
    padding: 0 10px;
    display: block;
  }
}

@font-face {
  font-family: 'filson';
  src: url("./fonts/mostardesign_-_filsonsoft-thin-webfont.woff2") format("woff2"), url("./fonts/mostardesign_-_filsonsoft-thin-webfont.woff") format("woff");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'filson';
  src: url("./fonts/mostardesign_-_filsonsoft-light-webfont.woff2") format("woff2"), url("./fonts/mostardesign_-_filsonsoft-light-webfont.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'filson';
  src: url("./fonts/mostardesign_-_filsonsoftregular-webfont.woff2") format("woff2"), url("./fonts/mostardesign_-_filsonsoftregular-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'filson';
  src: url("./fonts/mostardesign_-_filsonsoftmedium-webfont.woff2") format("woff2"), url("./fonts/mostardesign_-_filsonsoftmedium-webfont.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'filson';
  src: url("./fonts/mostardesign_-_filsonsoft-bold-webfont.woff2") format("woff2"), url("./fonts/mostardesign_-_filsonsoft-bold-webfont.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'filson';
  src: url("./fonts/mostardesign_-_filsonsoftblack-webfont.woff2") format("woff2"), url("./fonts/mostardesign_-_filsonsoftblack-webfont.woff") format("woff");
  font-weight: 800;
  font-style: normal;
}

aside#apps {
  text-align: center;
  width: 800px;
  margin: 30px auto;
  background-color: white;
  box-shadow: 0px 2px 20px -10px #000;
  padding: 10px 0;
}

aside#apps label {
  display: block;
  font-size: 20px;
  font-weight: 300;
  padding: 0 5px 10px 5px;
}

@media only screen and (max-width: 480px) {
  aside#apps {
    width: 100%;
    margin: 30px 0;
  }
}

@media only screen and (max-width: 480px) {
  aside#apps .web {
    display: none;
  }
}

aside#apps .list-app {
  width: 500px;
  position: relative;
  display: flex;
  margin: auto;
  justify-content: space-around;
}

@media only screen and (max-width: 480px) {
  aside#apps .list-app {
    width: 100%;
  }
}

.billet {
  background-color: white;
  overflow: hidden;
}

@media only screen and (min-width: 480px) {
  .billet {
    width: 800px;
    margin: 20px auto;
    box-shadow: 0px 2px 20px -10px #000;
  }
}

.billet aside#apps {
  background-color: #f7e7c9;
  box-shadow: none;
}

.billet .illustration {
  width: 100%;
  height: 200px;
  -o-object-fit: cover;
  object-fit: cover;
  margin: 0 auto;
  display: block;
}

@media only screen and (min-width: 480px) {
  .billet .illustration {
    height: 500px;
  }
}

.billet .illustration .credits {
  text-align: right;
  padding: 0 8px;
  color: gray;
}

.billet h2 {
  margin: 20px 25px;
  text-align: left;
  font-weight: 400;
  font-style: normal;
  font-size: 25px;
  font-size: 30px;
  text-transform: uppercase;
  font-family: filson;
  color: #313131;
  line-height: 120%;
}

@media only screen and (max-width: 480px) {
  .billet h2 {
    font-size: 18px;
    line-height: 130%;
  }
}

.billet h2 .emojione {
  height: 20px;
  position: relative;
  top: 2px;
}

@media only screen and (max-width: 480px) {
  .billet h2 .emojione {
    height: 16px;
  }
}

.billet h2 .sup-title {
  font-size: 16px;
  color: #6C6C6C;
  font-family: filson;
  font-weight: 300;
  line-height: 20px;
}

.billet .info {
  text-align: left;
  color: gray;
  margin: -20px 25px 20px 25px;
}

.billet .chapo {
  margin: 20px 25px;
  overflow: hidden;
}

.billet .chapo p,
.billet .chapo .formatted ol li,
.formatted ol .billet .chapo li {
  font-size: 18px;
  color: #2B2B2B;
  line-height: 150%;
}

.billet .chapo p:first-child,
.billet .chapo .formatted ol li:first-child,
.formatted ol .billet .chapo li:first-child {
  margin-top: 0;
}

.billet .chapo p b,
.billet .chapo .formatted ol li b,
.formatted ol .billet .chapo li b,
.billet .chapo p strong,
.billet .chapo .formatted ol li strong,
.formatted ol .billet .chapo li strong {
  font-weight: bold;
}

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

  .billet .chapo p,
  .billet .chapo .formatted ol li,
  .formatted ol .billet .chapo li {
    font-size: 16px;
    line-height: 130%;
    width: calc(100% +20px);
  }
}

.billet .chapo li b {
  font-weight: bold;
}

.billet .marketing-block {
  background-color: #fcece4;
  padding: 30px;
  text-align: center;
  margin-top: 25px;
  border-left: 5px solid #F38E4D;
}

.billet .marketing-block h3 {
  font-family: inherit;
  font-size: 24px;
  color: #F38E4D;
  margin-bottom: 10px;
  font-weight: bold;
}

.billet .marketing-block p {
  font-size: 16px;
  margin-bottom: 20px;
  color: #333;
}

.billet .marketing-block .store-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.billet .marketing-block .store-buttons a.button {
  display: inline-block;
  border: none;
  background: none;
  padding: 0;
}

.billet .marketing-block .store-buttons a.button img {
  height: 40px;
  transition: transform 0.2s;
}

.billet .marketing-block .store-buttons a.button:hover img {
  transform: scale(1.05);
}

.billet .body {
  margin: 20px 25px;
  position: relative;
  font-size: 18px;
}

@media only screen and (max-width: 770px) {
  .billet .body {
    width: 90%;
  }
}

.billet .body .infographie {
  width: 100%;
  margin-bottom: 30px;
}

.billet .body img {
  width: 80%;
  margin: 10px auto;
  display: block;
}

@media only screen and (max-width: 480px) {
  .billet .body img {
    width: calc(100% - 50px);
    height: auto !important;
    display: block;
    margin: 0 -25px;
  }
}

@media only screen and (min-width: 480px) {
  .billet .body img {
    box-shadow: 0px 2px 20px -10px #000;
  }
}

.billet .body .button {
  border: 1px solid rgba(255, 164, 0, 0.4);
  border-radius: 3px;
  padding: 0 3px;
  background-color: #FFA400;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1));
  text-decoration: none;
  color: black;
}

.billet .body .help {
  text-transform: uppercase;
  color: #5656FA;
  text-decoration: none;
  font-size: 12px;
  margin: 8px 0;
}

#block-related-post {
  position: relative;
  width: 800px;
  margin: 0 auto;
}

@media only screen and (max-width: 480px) {
  #block-related-post {
    width: 100%;
    padding: 8px;
  }
}

#block-related-post>.further-reading {
  line-height: 120%;
  font-weight: 300;
  text-transform: uppercase;
  font-style: normal;
  margin-bottom: 20px;
  font-size: 24px;
}

@media only screen and (max-width: 480px) {
  #block-related-post>.further-reading {
    margin: 20px 20px;
  }
}

#block-related-post .card-list {
  padding: 0;
}

@media only screen and (min-width: 480px) {
  #block-related-post .card-list {
    margin: -10px;
  }
}

#block-related-post .card {
  padding-bottom: 20px;
}



.card-list {
  padding: 10px;
}

@media only screen and (min-width: 480px) {
  .card-list {
    display: flex;
    flex-wrap: wrap;
    width: 1100px;
    margin: 0 auto;
  }
}

.card-list .card {
  display: block;
  position: relative;
  margin: 12px;
  background-color: white;
  overflow: hidden;
  box-shadow: 0px 2px 20px -10px #000;
}

@media only screen and (max-width: 480px) {
  .card-list .card {
    width: 100%;
    margin: 12px 0;
  }
}

@media only screen and (min-width: 480px) {
  .card-list .card {
    width: calc(100% / 3 - 3 * 12px);
  }
}

.card-list .card .illustration {
  display: block;
  width: calc(100%);
  height: 250px;
  -o-object-fit: cover;
  object-fit: cover;
  margin: 0;
}

.card-list .card h2 {
  margin: 20px 25px 0 25px;
  font-size: 20px;
  line-height: 120%;
  font-family: filson;
  font-weight: 400;
  text-transform: uppercase;
  font-style: normal;
}

.card-list .card h2 .emojione {
  height: 18px;
  position: relative;
  top: 2px;
}

@media only screen and (max-width: 480px) {
  .card-list .card h2 {
    margin: 20px 20px 0 20px;
    font-size: 16px;
    padding: 0;
    height: inherit;
  }

  .card-list .card h2 .emojione {
    height: 16px;
    position: relative;
    top: 2px;
  }
}

.card-list .card h2 a {
  font-family: filson;
  font-weight: normal;
  color: #3D3D3D;
}

.card-list .card h2 .sup-title {
  font-size: 16px;
  color: #6C6C6C;
  font-family: filson;
  font-weight: 300;
  line-height: 20px;
}

.card-list .card .info {
  position: absolute;
  bottom: 0;
  right: 25px;
  text-align: left;
  margin: 0 0 10px 0;
  color: #A2A2A2;
}

.card-list .card .info .name {
  color: #161616;
}

.card-list .card .chapo {
  display: block;
  overflow: hidden;
  margin: 20px 25px 40px 25px;
}

.card-list .card .chapo p,
.card-list .card .chapo .formatted ol li,
.formatted ol .card-list .card .chapo li {
  font-style: normal;
  font-size: 18px;
  line-height: 130%;
  color: #434343;
  margin: 1em 0;
}

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

  .card-list .card .chapo p,
  .card-list .card .chapo .formatted ol li,
  .formatted ol .card-list .card .chapo li {
    font-size: 18px;
    line-height: 110%;
  }
}

.card-list .card .chapo p:first-child,
.card-list .card .chapo .formatted ol li:first-child,
.formatted ol .card-list .card .chapo li:first-child {
  margin-top: 0;
}

.card-list .card .chapo p:last-child,
.card-list .card .chapo .formatted ol li:last-child,
.formatted ol .card-list .card .chapo li:last-child {
  margin-bottom: 0;
}

.card-list .card .chapo p .emojione,
.card-list .card .chapo .formatted ol li .emojione,
.formatted ol .card-list .card .chapo li .emojione {
  height: 20px;
  position: relative;
  top: 2px;
}

.share {
  padding-left: 15px;
}

.share iframe {
  float: left;
  margin: 0 10px 0 0;
}

footer {
  background-color: #2B2B2B;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  color: white;
  font-size: 15px;
  padding: 10px 0 50px 0;
  position: relative;
}

footer img {
  margin-right: 10px;
}

footer .row {
  display: flex;
  align-items: center;
}

@media only screen and (max-width: 480px) {
  footer .row {
    display: block;
    text-align: center;
  }
}

footer .row .links {
  flex: 1;
  margin: 0 10px;
}

footer .row .links>ul {
  display: flex;
}

@media only screen and (max-width: 480px) {
  footer .row .links>ul {
    display: block;
  }
}

footer .row .links>ul>li {
  flex: 1;
}

footer .row .links>ul>li>a {
  font-family: filson;
  font-weight: 300;
  color: inherit;
}

footer .row .links a {
  color: inherit;
  margin: 0 20px 0 0;
  display: block;
  line-height: 20px;
  font-size: 13px;
}

@media only screen and (max-width: 480px) {
  footer .row .links {
    text-align: center;
    margin: 10px 0;
  }

  footer .row .links a {
    font-size: 12px;
    display: block;
    margin: 5px;
  }
}

footer .copyright {
  text-align: center;
  font-size: 13px;
  line-height: 14px;
  padding: 10px 0 0 0;
}

footer .copyright a {
  display: inline-block;
  color: inherit;
  font-variant: small-caps;
  font-size: 18px;
}

.formatted .illustration {
  float: left;
  margin: 0 10px 10px 0;
}

.formatted h1 {
  clear: both;
  color: #313131;
  font-weight: bold;
  font-size: 40px;
  margin: 1em 0;
  font-weight: 200;
}

.formatted h1 strong {
  font-weight: inherit;
}

.formatted h2 {
  clear: both;
  color: #222222;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -1px;
  text-transform: uppercase;
  line-height: 120%;
  margin: 60px 0 0px 0;
}

.formatted h2 strong {
  font-weight: inherit;
}

.formatted h2:first-of-type {
  margin-top: 0;
}

@media only screen and (max-width: 480px) {
  .formatted h2 {
    margin-top: 30px;
  }
}

.formatted h3 {
  clear: both;
  color: #222222;
  font-size: 20px;
  font-weight: 600;
  line-height: 120%;
  margin: 8px 0 8px 0;
}

.formatted h3 strong {
  font-weight: inherit;
}

.formatted h4 {
  clear: both;
  color: #509BCC;
  font-size: 16px;
  font-weight: 300;
  line-height: 120%;
  margin: 8px 0 8px 0;
}

.formatted h4 strong {
  font-weight: inherit;
}

.formatted b,
.formatted strong {
  font-weight: bold;
}

.formatted i,
.formatted em {
  font-style: italic;
}

.formatted .emoji {
  width: 20px;
  height: 20px;
  display: inline-block;
  position: relative;
  top: 3px;
}

.formatted .text,
.formatted p,
.formatted ol li,
.formatted ul li {
  font-style: normal;
  font-size: 18px;
  line-height: 140%;
  color: #434343;
}

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

  .formatted .text,
  .formatted p,
  .formatted ol li,
  .formatted ul li {
    font-size: 18px;
    line-height: 140%;
  }
}

.formatted iframe {
  width: 700px;
  margin: 10px -16px;
  max-height: calc(100% - 32px);
  height: 393px;
}

@media only screen and (max-width: 480px) {
  .formatted iframe {
    width: calc(100% + 32px);
    height: auto;
  }
}

.formatted .cta {
  background-image: linear-gradient(to bottom, #FE6263, #FE9C5F);
  font-size: 20px;
  font-weight: bold;
  line-height: 54px;
  font-family: Helvetica, sans-serif;
  letter-spacing: -0.5px;
  display: block;
  border-radius: 3px;
  max-width: 221px;
  white-space: nowrap;
  margin: 40px auto;
  text-align: center;
  color: white;
  text-decoration: none;
  padding: 0 10px;
}

.formatted p,
.formatted ol li {
  margin: 1em 0;
  line-height: 150%;
}

.formatted p:first-child,
.formatted ol li:first-child {
  margin-top: 0;
}

.formatted p:last-child,
.formatted ol li:last-child {
  margin-bottom: 0;
}

.formatted .tipstuff {
  color: #265696;
  font-size: 17px;
  font-weight: bold;
}

.formatted .question {
  color: #E2770A;
  font-size: 18px;
}

.formatted a {
  color: #f77d00;
  text-decoration: underline;
}

.formatted ul {
  margin: 5px 10px;
  overflow: hidden;
}

.formatted ul li {
  padding-left: 20px;
  margin: 0;
  position: relative;
  line-height: 130%;
  margin-bottom: 5px;
}

.formatted ul li>ul {
  margin-top: 5px;
}

.formatted ul li>ul li {
  margin-bottom: 5px;
}

.formatted ul li>ul li:before {
  color: #9F9F9F;
}

.formatted ul.tasks li {
  line-height: 24px;
  margin-bottom: 8px;
  font-size: 16px;
  padding-left: 35px;
}

.formatted ul.tasks li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border: 2px solid #F38E4D;
  border-radius: 4px;
}

.formatted ol li {
  margin: 10px 0;
  counter-increment: item;
  display: block;
  margin-bottom: 20px;
}

.formatted ol li:before {
  content: counter(item) "";
  float: left;
  background-color: #6CB0DB;
  margin-right: 6px;
  line-height: 20px;
  width: 20px;
  text-align: center;
  font-size: 12px;
  color: white;
  font-weight: bold;
  border-radius: 50%;
  margin-top: 5px;
}

.formatted .note {
  margin: 15px 0;
  background-color: #FEF1C7;
  border: 1px solid #D9C196;
  padding: 5px 10px;
  border-radius: 5px;
  line-height: 160%;
}

.formatted kbd {
  border-radius: 2px;
  padding: 2px 6px;
  font-size: 12px;
  background-color: #A1CED5;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  color: #333333;
}

@media only screen and (min-width: 480px) {
  form .form-row {
    display: flex;
    margin: 0 -10px;
  }

  form .form-row>.form-item {
    padding-top: 0;
    flex: 1;
    margin: 0 10px !important;
  }
}

form .form-item {
  padding: 8px 0;
}

form .form-item:first-child {
  padding-top: 0;
}

form .form-item:last-child {
  padding-bottom: 0;
}

form .form-item>label {
  font-size: 16px;
  color: #565656;
  display: block;
  margin: 8px 0 8px 0;
  font-weight: 400;
}

form .form-item.focus>label {
  color: #009688;
}

form .form-item.error textarea,
form .form-item.error input,
form .form-item.error select {
  border-color: #A91A10;
}

form .form-item.error>.form-error {
  padding: 4px 0 10px 0;
  display: block;
  color: #A91A10;
  font-size: 12px;
}

form .form-item.error>.form-error p,
form .form-item.error>.form-error .formatted ol li,
.formatted ol form .form-item.error>.form-error li {
  margin: 10px 0;
}

form .form-item .form-description {
  font-size: 11px;
  line-height: 110%;
  margin-top: 4px;
  font-style: italic;
  color: #686868;
}

form .form-item>*[name] {
  padding-right: 16px;
  position: relative;
}

form .form-item>*[name]:after {
  content: 'X';
  position: absolute;
  display: block;
  right: 0;
  top: 0;
  bottom: 0;
  width: 16px;
  background-color: red;
}

form input[type='text'],
form input[type='email'] {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  font-size: 16px;
  line-height: 16px;
  height: 24px;
  padding: 0 0 3px 0;
  border: none;
  border-bottom: 1px solid #C8C8C8;
  transition: border-color 1s ease;
  color: #353535;
  box-shadow: none;
}

form input[type='text']::-moz-placeholder,
form input[type='email']::-moz-placeholder {
  color: #969696;
  font-size: 14px;
}

form input[type='text']::placeholder,
form input[type='email']::placeholder {
  color: #969696;
  font-size: 14px;
}

form input[type='text']:focus,
form input[type='email']:focus {
  border-bottom: 2px solid #009688;
  padding-bottom: 2px;
  transition: border-color 1s ease;
}

.error form input[type='text'],
.error form input[type='email'] {
  border-color: #A91A10;
}

form textarea {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  font-size: 16px;
  line-height: 24px;
  padding: 0 0 8px 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #C8C8C8;
  transition: border-color 1s ease;
  color: #353535;
  width: 100%;
}

form textarea::-moz-placeholder {
  color: #969696;
  font-size: 14px;
}

form textarea::placeholder {
  color: #969696;
  font-size: 14px;
}

form textarea:focus {
  border-bottom: 2px solid #009688;
  padding-bottom: 7px;
  transition: border-color 1s ease;
}

form textarea.error {
  border-color: #A91A10;
}

header {
  background-color: rgba(255, 255, 255, 0);
  border-bottom: 1px solid rgba(0, 0, 0, 0);
  transition: background-color 700ms ease, color 700ms ease, border-color 700ms ease;
  color: white;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
}

body.admin-menu header {
  margin-top: 30px !important;
}

header.small,
body:not(.page-home) header {
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  color: #414141;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  background-color: rgba(255, 255, 255, 0.72);
}

header .container {
  display: flex;
  align-items: center;
  justify-content: right;
  height: 80px;
}

header .logo {
  display: block;
  width: 150px;
  height: 48px;
  background: url("./images/logo.svg") no-repeat;
  background-size: contain;
}

header .logo span {
  display: none;
}

header .menu-icon {
  display: none;
}

header .sections {
  flex: 1;
  margin-top: 5px;
  display: block;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 -10px;
}

header .sections ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

header .sections li a {
  cursor: pointer;
  color: inherit;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 500;
  line-height: 25px;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  font-family: filson;
  padding: 0 5px;
  margin: 0 10px;
  background-color: transparent;
  position: relative;
  display: block;
}

header .sections li a:hover {
  border-color: #FFFFFF;
}

header .sections li a.test-us {
  border: 1px solid white;
  border-radius: 20px;
  padding: 0 16px;
  line-height: 40px;
  transition: all 700ms ease;
}

header .sections li a.test-us:hover {
  color: white;
  background-color: #F38E4D;
  border-color: #F49D66;
}

header .sections li a.social {
  display: block;
  overflow: hidden;
  width: 25px;
  height: 25px;
  text-indent: 100px;
  background-color: red;
  border-radius: 50%;
}

header .sections li a.social:before {
  text-indent: 0px;
  color: white;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 18px;
  display: block;
  text-align: center;
  width: 25px;
  line-height: 25px;
}

header .sections li a .badge {
  position: absolute;
  text-align: center;
  border-radius: 50%;
  width: 21px;
  height: 21px;
  line-height: 21px;
  background: #D55757;
  color: #FFF;
  right: -18px;
  top: 2px;
  text-align: center;
  z-index: 1;
  font-size: 13px;
  font-weight: 700;
}

header.small .test-us a {
  color: white;
  background-color: #F38E4D;
  border-color: #F49D66;
}

@media only screen and (max-width: 480px) {
  header {
    height: 50px;
  }

  header .container {
    display: block;
  }

  header .logo {
    position: absolute;
    left: 0;
    width: 100px;
    height: 33px;
    background-size: contain;
    margin: 0;
  }

  header .menu-icon {
    position: absolute;
    right: 0;
    display: block;
    width: 30px;
    height: 30px;
    font-size: 30px;
    color: #414141;
    z-index: 1;
  }

  header .sections {
    z-index: -1;
    opacity: 0;
    background-color: white !important;
    transition: all 0.5s ease;
    transform: translateY(-300px);
    padding: 0;
    float: none;
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    padding: 70px 0 10px 0;
    display: block;
  }

  header .sections li {
    display: block;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
  }

  header .sections li a {
    padding: 2px 10px;
    border-radius: 0;
    margin: 0;
    border: none !important;
    display: block;
    font-size: 17px;
    text-transform: uppercase;
    position: relative;
  }

  header .sections li a .badge {
    top: 6px;
    right: 10px;
  }

  body.menu-open header .sections {
    transform: translateY(0px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6) !important;
    opacity: 1;
  }

  body.menu-open header .sections ul {
    display: block;
  }

  body.menu-open header .sections ul li {
    display: block;
  }
}

body>.content {
  padding-top: 80px;
}

@media only screen and (max-width: 480px) {
  body>.content {
    padding-top: 50px;
  }
}

body.page-home .video-player {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

body.page-home .video-player .overlay {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: red;
}

body.page-home .video-player iframe {
  position: relative;
  width: 630px;
  height: 470px;
}

@media only screen and (max-width: 480px) {
  body.page-home .video-player iframe {
    width: 90%;
    height: 400px;
  }
}

body.page-home .content {
  padding: 0;
}

body.page-home section {
  background-color: white;
  position: relative;
  overflow: hidden;
}

@media only screen and (max-width: 480px) {
  body.page-home section {
    padding-bottom: 0;
  }
}

body.page-home section h2 {
  font-family: filson, sans-serif;
  font-size: 40px;
  line-height: 140%;
  font-weight: 400;
  color: #373737;
  text-align: center;
  margin: 40px 0;
}

@media only screen and (max-width: 480px) {
  body.page-home section h2 {
    font-size: 20px;
  }
}

body.page-home section h2 strong {
  font-weight: 700;
}

@media only screen and (max-width: 480px) {
  body.page-home section h2 {
    margin: 10px;
  }
}

body.page-home section .intro {
  padding: 18px;
}

body.page-home section .intro p,
body.page-home section .intro .formatted ol li,
.formatted ol body.page-home section .intro li {
  font-size: 18px;
  line-height: 140%;
  margin-bottom: 8px;

}

body.page-home section .intro p strong,
body.page-home section .intro .formatted ol li strong,
.formatted ol body.page-home section .intro li strong {
  font-weight: bold;
}

body.page-home section .attention {
  background-color: rgba(255, 136, 85, 0.26);
  padding: 18px;
  border-left: 2px solid rgba(255, 136, 85, 0.7);
}

body.page-home section .attention p,
body.page-home section .attention .formatted ol li,
.formatted ol body.page-home section .attention li {
  font-size: 18px;
  line-height: 140%;
  margin-bottom: 8px;
}

body.page-home section .attention p strong,
body.page-home section .attention .formatted ol li strong,
.formatted ol body.page-home section .attention li strong {
  font-weight: bold;
}

body.page-home section .attention a {
  text-decoration: underline;
  color: #0645ad;
}

body.page-home section#presentation {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  min-height: 600px;
  height: 85vh;
  width: 100%;
  padding-top: 80px;
}

body.page-home section#presentation video {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: 0;
}

body.page-home section#presentation>.overlay {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-image: url(images/bg-hero.jpg);
  z-index: 1;
  background-color: #fff;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}

body.page-home section#presentation h2 {
  position: relative;
  z-index: 1;
  color: white;
  font-size: 45px;
  text-align: center;
  padding-top: 40px;
  margin-bottom: 0;
  text-shadow: 0 0 5px black;
}

.body.page-home section#presentation intro {
  text-shadow: 0 0 5px black;
}

@media only screen and (max-width: 480px) {
  body.page-home section#presentation h2 {
    font-size: 28px;
  }
}

body.page-home section#presentation .intro {
  z-index: 2;
  position: relative;
  text-align: center;
}

@media only screen and (max-width: 480px) {
  body.page-home section#presentation .intro {
    padding-top: 0;
  }
}

body.page-home section#presentation .intro p,
body.page-home section#presentation .intro .formatted ol li,
.formatted ol body.page-home section#presentation .intro li {
  position: relative;
  z-index: 1;
  font-family: 'filson', sans-serif;
  font-size: 23px;
  font-weight: 400;
  line-height: 140%;
  text-align: center;
  width: 600px;
  margin: 0 auto;
  color: white;
  text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
}

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

  body.page-home section#presentation .intro p,
  body.page-home section#presentation .intro .formatted ol li,
  .formatted ol body.page-home section#presentation .intro li {
    font-size: 18px;
  }
}

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

  body.page-home section#presentation .intro p,
  body.page-home section#presentation .intro .formatted ol li,
  .formatted ol body.page-home section#presentation .intro li {
    width: 90%;
  }
}

body.page-home section#presentation .intro p.emphase,
body.page-home section#presentation .intro .formatted ol li.emphase,
.formatted ol body.page-home section#presentation .intro li.emphase {
  margin: 20px auto;
}

body.page-home section#presentation .intro .play-video {
  margin: 20px 0 0 0;
  color: white;
  display: inline-block;
  height: 48px;
  padding: 0 0 0 60px;
  color: #fff;
  font-size: 20px;
  font-weight: 300;
  line-height: 48px;
  background: url("./images/playbtn.svg") no-repeat 0 0;
  background-size: 48px 48px;
}

body.page-home section#presentation .cta {
  display: block;
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 23px;
  padding: 5px 0;
  margin-top: 40px;
}

@media only screen and (max-width: 480px) {
  body.page-home section#presentation .cta {
    width: 90%;
  }
}

body.page-home section#presentation .cta a {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 500;
  display: inline-block;
  border-radius: 20px;
  padding: 0 16px;
  line-height: 40px;
  color: white;
  background-color: #F38E4D;
  border-color: rgba(255, 255, 255, 0.1);
}

body.page-home section#presentation .cta a:hover {
  background-color: #E87E3A;
}

body.page-home section#presentation .legend {
  position: relative;
  z-index: 9;
  padding-top: 40px;
  padding-bottom: 10px;
  color: white;
  text-align: center;
}

body.page-home section#presentation .legend a.button {
  display: inline-block;
  line-height: 26px;
  border-radius: 16px;
  align-items: center;
}

body.page-home section#presentation .legend a.button i {
  line-height: 26px;
  font-size: 26px;
  padding-right: 6px;
  float: left;
}

body.page-home section#closer {
  position: relative;
  overflow: hidden;
  padding-top: 20px;
  background-color: #5CCDB7;
}

body.page-home section#closer .legend {
  position: relative;
  z-index: 9;
  padding-top: 20px;
  padding-bottom: 10px;
  color: white;
  text-align: center;
}

body.page-home section#closer .legend a.button {
  display: inline-block;
  padding: 0 10px;
  align-items: center;
}

body.page-home section#closer h2 {
  position: relative;
  z-index: 1;
  color: #202020;
  font-weight: 300;
  font-size: 35px;
  text-align: left;
  padding: 40px 0;
}

body.page-home section#closer p,
body.page-home section#closer .formatted ol li,
.formatted ol body.page-home section#closer li {
  position: relative;
  z-index: 1;
  font-family: 'filson', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 140%;
  text-align: center;
  width: 500px;
  margin: 0 auto;
  color: white;
  text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
}

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

  body.page-home section#closer p,
  body.page-home section#closer .formatted ol li,
  .formatted ol body.page-home section#closer li {
    width: 80%;
  }
}

body.page-home section#closer p.intro,
body.page-home section#closer .formatted ol li.intro,
.formatted ol body.page-home section#closer li.intro {
  margin-top: 120px;
}

body.page-home section#closer .cta {
  display: block;
  position: relative;
  z-index: 1;
  background-color: #FF6400;
  text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
  font-size: 23px;
  letter-spacing: 0.5px;
  padding: 5px 0;
  border-radius: 2px;
  margin: 20px auto 10px auto;
  text-align: center;
  width: 500px;
}

@media only screen and (max-width: 480px) {
  body.page-home section#closer .cta {
    width: 90%;
  }
}

body.page-home section#closer .cta a {
  line-height: 140%;
  color: white;
  display: block;
}

body.page-home section#features .features .feature {
  display: flex;
  position: relative;
  overflow: hidden;
  height: 400px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
  padding: 40px 0;
}

body.page-home section#features .features .feature#feature-tasks,
body.page-home section#features .features .feature#feature-dashboard {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 480px) {
  body.page-home section#features .features .feature {
    height: auto;
  }
}

body.page-home section#features .features .feature .phone {
  width: 320px;
  min-width: 320px;
  height: 634px;
}

@media only screen and (max-width: 480px) {
  body.page-home section#features .features .feature .phone {
    width: 100%;
    min-width: 100%;
    height: 399px;
    overflow: hidden;
  }
}

body.page-home section#features .features .feature .phone[data-aosx="new-animation"] {
  opacity: 0;
  transition-property: transform, opacity;
  transform: translate3d(-120px, 30px, 10px);
}

body.page-home section#features .features .feature .phone[data-aosx="new-animation"].aos-animate {
  opacity: 1;
}

body.page-home section#features .features .feature .phone[data-aosx="new-animation"].aos-animate {
  transform: translate3d(16px, 30px, 10px);
}

body.page-home section#features .features .feature .phone[data-aosx="new-animation1"] {
  opacity: 0;
  transition-property: transform, opacity;
  transform: translate3d(120px, 30px, 10px);
}

body.page-home section#features .features .feature .phone[data-aosx="new-animation1"].aos-animate {
  opacity: 1;
}

body.page-home section#features .features .feature .phone[data-aosx="new-animation1"].aos-animate {
  transform: translate3d(16px, 30px, 10px);
}

body.page-home section#features .features .feature .phone img {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 320px;
  position: relative;
  border: 10px solid white;
  box-shadow: 0 0 1px black;
  border-radius: 50px;
}

@media only screen and (max-width: 480px) {
  body.page-home section#features .features .feature .phone img {
    width: 100%;
    margin: 0;
    box-shadow: none;
  }
}

body.page-home section#features .features .feature .text,
body.page-home section#features .features .feature .formatted p,
.formatted body.page-home section#features .features .feature p,
body.page-home section#features .features .feature .formatted ol li,
.formatted ol body.page-home section#features .features .feature li,
body.page-home section#features .features .feature .formatted ul li,
.formatted ul body.page-home section#features .features .feature li {
  color: black;
  margin-left: 40px;
}

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

  body.page-home section#features .features .feature .text,
  body.page-home section#features .features .feature .formatted p,
  .formatted body.page-home section#features .features .feature p,
  body.page-home section#features .features .feature .formatted ol li,
  .formatted ol body.page-home section#features .features .feature li,
  body.page-home section#features .features .feature .formatted ul li,
  .formatted ul body.page-home section#features .features .feature li {
    position: relative;
    left: 0;
    top: 0;
    margin: 0;
  }
}

body.page-home section#features .features .feature .text p,
body.page-home section#features .features .feature .formatted p p,
.formatted body.page-home section#features .features .feature p p,
body.page-home section#features .features .feature .formatted ol li p,
.formatted ol body.page-home section#features .features .feature li p,
body.page-home section#features .features .feature .formatted ul li p,
.formatted ul body.page-home section#features .features .feature li p,
body.page-home section#features .features .feature .text .formatted ol li,
.formatted ol body.page-home section#features .features .feature .text li,
body.page-home section#features .features .feature .formatted p ol li,
body.page-home section#features .features .feature .formatted ol p li,
.formatted body.page-home section#features .features .feature p ol li,
.formatted ol body.page-home section#features .features .feature p li,
body.page-home section#features .features .feature .formatted ol li li,
.formatted ol body.page-home section#features .features .feature li li,
body.page-home section#features .features .feature .formatted ul li ol li,
.formatted ul body.page-home section#features .features .feature li ol li {
  font-size: 18px;
  font-family: 'filson', sans-serif;
  line-height: 1.5;
  font-weight: 400;
}

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

  body.page-home section#features .features .feature .text p,
  body.page-home section#features .features .feature .formatted p p,
  .formatted body.page-home section#features .features .feature p p,
  body.page-home section#features .features .feature .formatted ol li p,
  .formatted ol body.page-home section#features .features .feature li p,
  body.page-home section#features .features .feature .formatted ul li p,
  .formatted ul body.page-home section#features .features .feature li p,
  body.page-home section#features .features .feature .text .formatted ol li,
  .formatted ol body.page-home section#features .features .feature .text li,
  body.page-home section#features .features .feature .formatted p ol li,
  body.page-home section#features .features .feature .formatted ol p li,
  .formatted body.page-home section#features .features .feature p ol li,
  .formatted ol body.page-home section#features .features .feature p li,
  body.page-home section#features .features .feature .formatted ol li li,
  .formatted ol body.page-home section#features .features .feature li li,
  body.page-home section#features .features .feature .formatted ul li ol li,
  .formatted ul body.page-home section#features .features .feature li ol li {
    font-size: 16px;
  }
}

body.page-home section#features .features .feature .text .category,
body.page-home section#features .features .feature .formatted p .category,
.formatted body.page-home section#features .features .feature p .category,
body.page-home section#features .features .feature .formatted ol li .category,
.formatted ol body.page-home section#features .features .feature li .category,
body.page-home section#features .features .feature .formatted ul li .category,
.formatted ul body.page-home section#features .features .feature li .category {
  font-size: 20px;
  color: #737373;
  text-transform: uppercase;
  line-height: 40px;
  font-weight: 400;
}

body.page-home section#features .features .feature .text .title,
body.page-home section#features .features .feature .formatted p .title,
.formatted body.page-home section#features .features .feature p .title,
body.page-home section#features .features .feature .formatted ol li .title,
.formatted ol body.page-home section#features .features .feature li .title,
body.page-home section#features .features .feature .formatted ul li .title,
.formatted ul body.page-home section#features .features .feature li .title {
  font-size: 35px;
  line-height: 40px;
  color: #3D3D3D;
  font-weight: 700;
  margin: 0 0 20px 0;
  font-family: 'filson', sans-serif;
}

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

  body.page-home section#features .features .feature .text .title,
  body.page-home section#features .features .feature .formatted p .title,
  .formatted body.page-home section#features .features .feature p .title,
  body.page-home section#features .features .feature .formatted ol li .title,
  .formatted ol body.page-home section#features .features .feature li .title,
  body.page-home section#features .features .feature .formatted ul li .title,
  .formatted ul body.page-home section#features .features .feature li .title {
    font-size: 25px;
    line-height: 30px;
  }
}

body.page-home section#avis {
  background-color: white;
  padding-bottom: 80px;
}

body.page-home section#avis .scroll-pane {
  display: flex;
  overflow: auto;
}

@media only screen and (max-width: 480px) {
  body.page-home section#avis .scroll-pane {
    -moz-columns: 1;
    columns: 1;
    -moz-column-gap: 0;
    column-gap: 0;
  }
}

body.page-home section#avis .scroll-pane .avis {
  box-shadow: 0 0 13px rgba(0, 0, 0, 0.26);
  min-width: 300px;
  border-radius: 8px;
  margin-bottom: 16px;
  padding: 16px;
  margin: 16px 40px 16px 20px;
  page-break-inside: avoid;
}

body.page-home section#avis .scroll-pane .avis .info {
  color: #838383;
  padding: 10px 0;
  font-size: 13px;
}

body.page-home section#avis .scroll-pane .avis .info .row {
  display: flex;
  align-items: center;
  height: 22px;
}

body.page-home section#avis .scroll-pane .avis .info .row .date {
  text-align: right;
}

body.page-home section#avis .scroll-pane .avis .info .row .title {
  color: black;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  margin-right: 8px;
}

body.page-home section#avis .scroll-pane .avis .info .row .rate {
  color: #FF9500;
}

body.page-home section#avis .scroll-pane .avis .info .row .rate i {
  margin-right: 1px;
}

body.page-home section#avis .scroll-pane .avis .info .row .rate i:before {
  font-size: 16px;
}

body.page-home section#avis .scroll-pane .avis .info .row .author {
  flex: 1;
  text-align: right;
}

body.page-home section#avis .scroll-pane .avis .comment {
  color: #313131;
  font-size: 14px;
}

@media only screen and (max-width: 480px) {
  body.page-home section#avis .scroll-pane .avis .comment {
    font-size: 12px;
  }
}

body.page-home section#avis .scroll-pane .avis .comment p,
body.page-home section#avis .scroll-pane .avis .comment .formatted ol li,
.formatted ol body.page-home section#avis .scroll-pane .avis .comment li {
  line-height: 130%;
  margin-bottom: 10px;
}

body.page-home section#premium {
  background-color: #FEFEFE;
}

body.page-home section#premium .columns {
  display: flex;
  padding-bottom: 40px;
}

@media only screen and (max-width: 480px) {
  body.page-home section#premium .columns {
    width: 100%;
    margin: 0;
    flex-direction: column;
  }
}

body.page-home section#premium .features {
  position: relative;
  width: calc(100% / 2);
  padding-top: 120px;
  padding-bottom: 40px;
  margin: 0 10px 0 10px;
  overflow: hidden;
}

@media only screen and (max-width: 480px) {
  body.page-home section#premium .features {
    width: 100%;
    margin: 20px 0;
  }
}

body.page-home section#premium .features .feature {
  font-size: 18px;
  line-height: 40px;
  position: relative;
  color: #4E4E4E;
  text-align: right;
}

body.page-home section#premium .offer {
  position: relative;
  width: 250px;
  margin: 0 10px 0 10px;
  background-color: white;
  border-radius: 2px;
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.26);
}

@media only screen and (max-width: 480px) {
  body.page-home section#premium .offer {
    width: 100%;
    margin: 20px 0;
  }
}

body.page-home section#premium .offer .title {
  height: 100px;
  line-height: 40px;
  font-size: 20px;
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.1);
}

body.page-home section#premium .offer .title em {
  font-size: 40px;
}

body.page-home section#premium .offer.offer-premium .title {
  background-color: #FF8855;
  color: white;
}

body.page-home section#premium .offer.offer-free .title {
  background-color: #FF8855;
  color: white;
}

body.page-home section#premium .offer .checks {
  padding-top: 20px;
}

body.page-home section#premium .offer .checks div {
  min-height: 40px;
  max-height: 40px;
  text-align: center;
}

body.page-home section#premium .offer .checks div.check:before {
  content: "✔";
  color: #F38E4D;
  font-size: 24px;
}

body.page-home section#presse .apps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

body.page-home section#presse .apps img {
  margin: 15px;
  height: 45px;
}

body.page-home section#use .apps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

body.page-home section#use .apps img {
  margin: 15px;
  height: 45px;
}

body.page-home section#soutien .apps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

body.page-home section#soutien .apps img {
  margin: 15px;
  height: 45px;
}

body .cc-window.cc-floating {
  background-color: white;
  padding: 1em 2em;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 5px 0px;
  box-sizing: border-box;
  border-radius: 8px;
}

body .cc-btn {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 300;
  display: inline-block;
  border-radius: 20px;
  padding: 0 16px;
  line-height: 40px;
  color: white;
  background-color: #F38E4D;
  border-color: rgba(255, 255, 255, 0.1);
}

body .cc-btn:hover {
  background-color: #E87E3A;
}

.page-froide {
  margin-top: 20px;
  margin-bottom: 20px;
}

#view-premium .container {
  width: 600px;
  margin: 0 auto;
}

@media only screen and (max-width: 480px) {
  #view-premium .container {
    margin: 0;
    width: 100%;
  }
}

#view-premium #slide-1 {
  height: 100vh;
  background-image: url("/sites/default/files/assets/premium/slide-1.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#view-premium #slide-1 .message {
  padding: 20px 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  text-align: center;
}

#view-premium #slide-1 .message .title {
  font-size: 40px;
  margin-bottom: 0.8em;
  line-height: 140%;
}

#view-premium #slide-1 .message .sub-title {
  text-transform: uppercase;
  line-height: 140%;
  font-size: 25px;
  font-weight: 300;
}

#view-premium #slide-1 .message .sub-title strong {
  font-weight: 400;
}

#view-premium #slide-2 {
  min-height: 100vh;
  background-image: url("/sites/default/files/assets/premium/slide-2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  padding: 40px 0;
}

#view-premium #slide-2 .container {
  width: 800px;
}

@media only screen and (max-width: 480px) {
  #view-premium #slide-2 .container {
    width: 100%;
  }
}

#view-premium #slide-2>.header {
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 30px;
  text-align: center;
  padding: 20px 0;
  margin: 0 0 40px 0;
}

#view-premium #slide-2 .table {
  display: flex;
}

#view-premium #slide-2 .table .column {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.36);
  overflow: hidden;
}

@media only screen and (max-width: 480px) {
  #view-premium #slide-2 .table .column {
    border-radius: 3px 0 0 3px;
  }
}

#view-premium #slide-2 .table .column.titles {
  margin-right: 10px;
}

@media only screen and (max-width: 480px) {
  #view-premium #slide-2 .table .column.titles {
    margin-right: 0;
  }
}

#view-premium #slide-2 .table .column.premium {
  margin-left: 5px;
}

@media only screen and (max-width: 480px) {
  #view-premium #slide-2 .table .column.premium {
    margin-left: 0;
  }
}

#view-premium #slide-2 .table .column.titles {
  flex: 1;
}

#view-premium #slide-2 .table .column .header {
  height: 30px;
  line-height: 30px;
  background-color: rgba(255, 255, 255, 0.8);
  font-size: 20px;
  text-align: center;
}

#view-premium #slide-2 .table .column .header .title {
  height: 30px;
  line-height: 30px;
}

@media only screen and (max-width: 480px) {
  #view-premium #slide-2 .table .column .header {
    font-size: 10px;
  }
}

#view-premium #slide-2 .table .column .section {
  padding: 0 0 16px 0;
}

@media only screen and (max-width: 480px) {
  #view-premium #slide-2 .table .column .section {
    padding: 0;
  }
}

#view-premium #slide-2 .table .column .section .title {
  font-size: 22px;
  line-height: 30px;
  height: 30px;
  padding-left: 10px;
  text-transform: uppercase;
  white-space: nowrap;
}

@media only screen and (max-width: 480px) {
  #view-premium #slide-2 .table .column .section .title {
    font-size: 14px;
  }
}

#view-premium #slide-2 .table .column .section .features .feature {
  font-size: 18px;
  height: 30px;
  line-height: 30px;
  padding-left: 30px;
}

#view-premium #slide-2 .table .column .section .features .feature:nth-child(odd) {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

#view-premium #slide-2 .table .column .section .features .feature:last-child {
  border-bottom: none;
}

@media only screen and (max-width: 480px) {
  #view-premium #slide-2 .table .column .section .features .feature {
    white-space: nowrap;
    font-size: 12px;
    padding-left: 10px;
  }
}

#view-premium #slide-2 .table .column .section .features .feature .tipstuff-site-cross:before {
  color: gray;
}

#view-premium #slide-2 .table .column .section .features .feature .tipstuff-site-check:before {
  color: #A6002E;
  font-size: 22px;
}

#view-premium #slide-2 .table .column .section.expanded .features {
  max-height: 100000px;
}

#view-premium #slide-2 .table .column.titles .header {
  background-color: transparent;
}

#view-premium #slide-2 .table .column.premium {
  transition: transform .4s ease, box-shadow .4s ease;
}

#view-premium #slide-2 .table .column.premium:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px black;
}

#view-premium #slide-2 .table .column.premium .header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
  background-image: linear-gradient(to bottom, #FE9C5F, #FE6263);
  color: white;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
}

#view-premium #slide-2 .table .column.free {
  transition: transform .4s ease, box-shadow .4s ease;
}

#view-premium #slide-2 .table .column.free:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px black;
}

#view-premium #slide-2 .table .column.free .header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
  background-image: linear-gradient(to bottom, #D5CECE, #D5CECE);
  color: white;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
}

#view-premium #slide-2 .table .column.free {
  border-radius: 3px;
}

@media only screen and (max-width: 480px) {
  #view-premium #slide-2 .table .column.free {
    border-radius: 0;
  }
}

#view-premium #slide-2 .table .column.premium {
  border-radius: 3px;
}

@media only screen and (max-width: 480px) {
  #view-premium #slide-2 .table .column.premium {
    border-radius: 0 3px 3px 0;
  }
}

#view-premium #slide-2 .table .column.free,
#view-premium #slide-2 .table .column.premium {
  width: 130px;
}

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

  #view-premium #slide-2 .table .column.free,
  #view-premium #slide-2 .table .column.premium {
    width: 60px;
  }
}

#view-premium #slide-2 .table .column.free .section .features .feature,
#view-premium #slide-2 .table .column.premium .section .features .feature {
  padding: 0;
  text-align: center;
}

#view-premium #slide-3 {
  min-height: 80vh;
  background-image: url("/sites/default/files/assets/premium/slide-3.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
}

#view-premium #slide-3 .container {
  width: 100%;
  margin: 0;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.7);
}

#view-premium #slide-3 .message {
  text-align: center;
  overflow: hidden;
  padding: 0 20px;
}

#view-premium #slide-3 .message p,
#view-premium #slide-3 .message .formatted ol li,
.formatted ol #view-premium #slide-3 .message li {
  color: white;
}

#view-premium #slide-3 .message p.p1,
#view-premium #slide-3 .message .formatted ol li.p1,
.formatted ol #view-premium #slide-3 .message li.p1 {
  font-size: 26px;
  margin-bottom: 5px;
  padding-top: 20px;
}

#view-premium #slide-3 .message p.p2,
#view-premium #slide-3 .message .formatted ol li.p2,
.formatted ol #view-premium #slide-3 .message li.p2 {
  font-size: 26px;
  margin-bottom: 20px;
}

#view-premium #slide-3 .message p.p3,
#view-premium #slide-3 .message .formatted ol li.p3,
.formatted ol #view-premium #slide-3 .message li.p3 {
  font-size: 26px;
}

#view-premium #slide-3 .message p.p4,
#view-premium #slide-3 .message .formatted ol li.p4,
.formatted ol #view-premium #slide-3 .message li.p4 {
  font-size: 13px;
}

#view-premium #slide-3 .message .cta {
  display: inline-block;
  margin: 40px auto;
  font-size: 26px;
  line-height: 60px;
  color: white;
  border-radius: 6px;
  padding: 0 20px;
  background-image: linear-gradient(180deg, #ff8336, #ff393b);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

article .body .qr-code {
  clear: both;
  overflow: hidden;
  position: relative;
}

article .body .qr-code .wrapper {
  width: 198px;
  float: left;
  margin: 0 10px 0 0;
}

@media only screen and (max-width: 480px) {
  article .body .qr-code .wrapper {
    float: none;
    display: block;
    margin: 0 auto 10px auto;
  }
}

article .body .qr-code .wrapper img {
  float: none;
  border-radius: 0;
  margin: 0 10px 0 0;
}

article .body .qr-code .wrapper a.help {
  float: right;
}

article .body .qr-code .wrapper p,
article .body .qr-code .wrapper .formatted ol li,
.formatted ol article .body .qr-code .wrapper li {
  font-size: 14px;
  line-height: 140%;
  margin: 0 0 5px 0;
}

article .body .qr-code label {
  font-weight: 300;
  font-size: 18px;
}

article .body .qr-code ul {
  max-height: 250px;
  overflow: auto;
}

article .body .qr-code a:active img {
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
}

.qr-codes {
  margin: 20px 0;
}

.qr-codes .qr-code {
  margin: 0 0 20px 0;
}

.node-type-question {
  background-color: #F1F1EE;
}

.billet.help .frame {
  background-color: white;
  padding: 16px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  border-radius: 3px;
  width: 600px;
  margin: 40px auto;
}

@media only screen and (max-width: 480px) {
  .billet.help .frame {
    width: 100%;
  }
}

.billet.help .frame .header {
  width: 100%;
}

.billet.help .frame .header h1 {
  padding: 0;
  margin: 0;
  text-transform: none;
}

.billet.help .frame .body {
  padding: 0 20px;
  overflow: hidden;
  width: auto;
}

.billet.help .frame iframe {
  clear: both;
  display: block;
  width: 600px;
  height: 400px;
  margin: 37px -16px;
}

@media only screen and (max-width: 480px) {
  .billet.help .frame iframe {
    width: 320px;
    height: 200px;
    margin: auto;
  }
}

.page-questions {
  background-color: #F1F1EE;
}

.container.questions {
  width: 600px;
  padding: 30px 0;
}

@media only screen and (max-width: 480px) {
  .container.questions {
    width: 100%;
  }
}

.container.questions a strong {
  color: #FF002A;
  font-weight: 500;
  text-transform: uppercase;
}

.container.questions .title {
  font-size: 30px;
  text-align: center;
  margin: 0 0 10px 0;
  font-weight: 400;
}

.container.questions .sub-title {
  font-size: 20px;
  text-align: center;
  margin: 0 0 20px 0;
  font-weight: 300;
}

.container.questions .menu-0>li {
  background-color: white;
  padding: 16px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  border-radius: 3px;
  margin-bottom: 20px;
}

.container.questions .menu-0>li>a {
  display: block;
  line-height: 30px;
  font-size: 25px;
  margin-bottom: 10px;
  font-weight: 300;
  color: #A8004B;
  pointer-events: none;
  cursor: default;
}

.container.questions .menu-1>li>a {
  display: block;
  font-size: 16px;
  line-height: 130%;
  padding: 6px 40px;
  margin: 0 -16px;
  font-weight: 300;
  color: #252525;
  border-top: 1px solid rgba(0, 0, 0, 0);
  border-bottom: 1px solid rgba(0, 0, 0, 0);
}

.container.questions .menu-1>li>a:hover {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #F1F1EE;
  color: #000000;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.container.questions .menu-0>li.active .menu-1 {
  display: block;
}


.stripe-form {
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.36);
  border-radius: 8px;
  width: 400px;
  margin: 16px auto;
  padding: 16px;
  overflow: hidden;
}

@media only screen and (max-width: 480px) {
  .stripe-form {
    box-shadow: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }
}

.stripe-form img {
  float: left;
  margin-right: 16px;
}

@media only screen and (max-width: 480px) {
  .stripe-form img {
    display: none;
  }
}

.stripe-form label,
.stripe-form .accept {
  font-size: 14px;
}

.stripe-form .cga {
  margin: 16px 0;
  display: flex;
}

.stripe-form .p2 {
  font-size: 14px;
  overflow: hidden;
  margin-bottom: 16px;
}

.stripe-form .p2 p,
.stripe-form .p2 .formatted ol li,
.formatted ol .stripe-form .p2 li {
  line-height: 120%;
}

.stripe-form .message {
  margin-bottom: 16px;
}

.stripe-form .message p,
.stripe-form .message .formatted ol li,
.formatted ol .stripe-form .message li {
  font-size: 16px;
  line-height: 120%;
}

.stripe-form #card-element {
  margin: 16px 0;
  background-color: #BED7EC;
  border-radius: 3px;
  padding: 8px;
}

.stripe-form #form-error {
  font-size: 14px;
  color: #D23413;
  font-weight: bold;
  background-color: #FFE9E9;
  border-left: 2px solid #D23413;
  padding: 6px;
  margin-top: -10px;
  margin-bottom: 16px;
}

.stripe-form #form-message {
  font-size: 14px;
  color: #1372B9;
  font-weight: bold;
  background-color: #C3D7E5;
  border-left: 2px solid #1372B9;
  padding: 6px;
  margin-top: -10px;
  margin-bottom: 16px;
}

.stripe-form .validate {
  margin: 16px 0 0 0;
  display: block;
  background: radial-gradient(ellipse farthest-corner at 15% 15%, #D63C57, #F08A1B);
  padding: 0 16px;
  line-height: 40px;
  font-size: 20px;
  text-align: center;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 8px;
}

body {
  background-color: #F3F3F3;
  font-family: 'filson', sans-serif;
}

body * {
  font-family: 'filson', sans-serif;
}

.tabs.primary {
  display: none;
}

div.profile {
  width: 800px;
  margin: 0 auto;
  padding: 100px 0;
}

form#user-login {
  width: 800px;
  margin: 0 auto;
  padding: 100px 0;
}

form#user-login input {
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 16px;
  margin-bottom: 8px;
  padding: 8px 16px !important;
  height: auto;
  background-color: white;
}

form#user-login input:focus {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.26) inset;
}

form#user-login input[type=submit] {
  margin-top: 32px;
  cursor: pointer;
}

form#user-login input[type=submit]:focus {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.26);
}

form#user-login .error-message {
  color: red;
  margin: 0 0 8px 16px;
}

form#user-login .description {
  color: rgba(0, 0, 0, 0.8);
  margin: 0 0 8px 16px;
}