/*
Theme Name: reykjavik Child
Theme URL: https://www.webmandesign.eu/
Description: reykjavik Child Theme
Author: John Doe
Author URL: http://hostinger-tutorials.com
Template: reykjavik
Version: 1.0.0
Text Domain: reykjavik-child
*/


/*CODE MAT*/

.main-navigation.is-active div#site-navigation-container {
  background: #fefeff;
}

.main-navigation-container .menu>ul>li {
  padding: 0;
  margin: 0;
  float: none;
}

/* FILE: main/menu/_menu.scss */
.menu-item-description {
  display: block;
  max-width: 20em;
  margin-top: 0.382em;
  white-space: normal;
  opacity: .8;
}

/* FILE: main/menu/_menu-primary.scss */
.main-navigation {
  position: relative;
  margin-top: 1em;
  margin-bottom: 1em;
}

@media (min-width: 672px) and (min-width: 879px) {
  .main-navigation {
    float: right;
  }
}

@media (min-width: 880px) {
  .main-navigation {
    float: left;
    margin-right: 1.618em;
  }
}

@media (max-height: 447px) {
  .main-navigation {
    float: right;
  }
}

.main-navigation-container .menu {
  margin-top: 1.618rem;
}

@media (min-width: 672px) {
  .main-navigation-container .menu {
    margin-top: 0;
  }
}

.main-navigation-container ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.main-navigation-container li {
  position: relative;
  padding: 0;
  margin: 0;
}

@media (min-width: 880px) {
  .main-navigation-container li {
    float: left;
    white-space: nowrap;
  }
}

.main-navigation-container a {
  display: block;
  position: relative;
  max-width: 100%;
  padding: 0.618rem 0.382rem;
  text-decoration: none;
  border: 0 solid transparent;
  border-left-width: 2px;
  -webkit-transition: border-color 0.3s;
  -o-transition: border-color 0.3s;
  transition: border-color 0.3s;
}

.main-navigation-container a:hover,
.main-navigation-container a:active,
.main-navigation-container a:focus {
  border-color: currentColor;
}

@media (min-width: 880px) {

  .main-navigation-container .menu:hover .current-menu-item>a,
  .main-navigation-container .menu:hover .current-menu-ancestor>a {
    border-color: inherit;
  }
}

.main-navigation-container .menu .current-menu-item>a,
.main-navigation-container .menu .current-menu-item>a:hover {
  border-color: currentColor;
}

.main-navigation-container .current-menu-item>a {
  position: relative;
  border-color: currentColor;
  z-index: 10;
}

@media (min-width: 880px) {

  .main-navigation-container .focus>a,
  .main-navigation-container .current-menu-ancestor>a {
    position: relative;
    border-color: currentColor;
    z-index: 10;
  }
}

.main-navigation-container .icon {
  margin-right: 0.382em;
}

/* FILE: main/menu/_menu-primary-mobile.scss */
@media (min-width: 879px) {
  .has-navigation-mobile .main-navigation-container {
    visibility: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    line-height: 1.382em;
    overflow-y: auto;
    z-index: 995;
    opacity: 0;
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transition: visibility 0s linear 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    transition: visibility 0s linear 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    -o-transition: visibility 0s linear 0.3s, opacity 0.3s, transform 0.3s;
    transition: visibility 0s linear 0.3s, opacity 0.3s, transform 0.3s;
    transition: visibility 0s linear 0.3s, opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
  }

  .has-navigation-mobile .is-active .main-navigation-container {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transition: visibility 0s linear 0s, opacity 0.3s, -webkit-transform 0.3s;
    transition: visibility 0s linear 0s, opacity 0.3s, -webkit-transform 0.3s;
    -o-transition: visibility 0s linear 0s, opacity 0.3s, transform 0.3s;
    transition: visibility 0s linear 0s, opacity 0.3s, transform 0.3s;
    transition: visibility 0s linear 0s, opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
  }

  .has-navigation-mobile .main-navigation-container .menu {
    position: relative;
    height: 100%;
  }

  .has-navigation-mobile .main-navigation-container .menu>ul {
    max-width: 448px;
    padding: 4.2358rem 1.618rem 5.8538rem;
    margin-left: auto;
    margin-right: auto;
  }

  .has-navigation-mobile .main-navigation-container .menu>ul>li:nth-last-child(2) {
    border-bottom-width: 1px;
    border-bottom-style: solid;
  }

  .has-navigation-mobile .main-navigation-container li {
    border-top-width: 1px;
    border-top-style: solid;
  }
}

@media (max-width: 671px) {
  .has-navigation-mobile .main-navigation-container {
    -webkit-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
  }

  .has-navigation-mobile .main-navigation-container .menu>ul {
    padding-top: 38vh;
  }

  .has-navigation-mobile .main-navigation-container .mobile-search-form+.menu>ul {
    padding-top: 26vh;
  }
}

@media (min-width: 879px) {
  body:not(.has-navigation-mobile) .main-navigation-container .menu {
    margin-top: 0;
  }

  body:not(.has-navigation-mobile) .main-navigation-container li {
    display: inline-block;
    padding: 0;
    margin: 0;
    margin-right: 0.618rem;
  }

  body:not(.has-navigation-mobile) .main-navigation-container a {
    border-left-width: 0;
    border-top-width: 2px;
  }

  body:not(.has-navigation-mobile) .site-header-inner>nav+nav {
    margin-top: 0;
  }
}

.mobile-search-form {
  max-width: 448px;
  padding: 0 1.618rem;
  margin: 4.2358em auto 0;
}

@media (min-width: 880px) {
  .mobile-search-form {
    display: none;
  }
}

@media (max-width: 671px) and (min-height: 448px) {
  .has-navigation-mobile .site-footer>div:last-child {
    margin-bottom: 3.618rem;
  }
}

@-webkit-keyframes comeInFromBottom {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }

  33% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes comeInFromBottom {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }

  33% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@media (max-width: 671px) and (min-height: 448px) {
  .menu-toggle {
    position: fixed;
    width: 100%;
    height: 4.618rem;
    left: 0;
    bottom: -1rem;
    padding: 0 1.618em 0.618em;
    margin: 0;
    line-height: 1.382;
    text-align: center;
    font-size: 1em;
    font-weight: 700;
    border: 0;
    z-index: 999;
    -webkit-box-shadow: 0 -2px 1.618rem rgba(0, 0, 0, 0.2);
    box-shadow: 0 -2px 1.618rem rgba(0, 0, 0, 0.2);
    opacity: 1;
    -webkit-animation: comeInFromBottom 1s;
    animation: comeInFromBottom 1s;
  }
}

.menu-toggle:hover,
.menu-toggle:active,
.menu-toggle:focus {
  opacity: 1;
}

@media (min-width: 672px) and (min-width: 879px),
(max-height: 447px) {
  .menu-toggle {
    margin-right: 1.618rem;
  }

  .is-active .menu-toggle {
    display: inline-block;
    position: fixed;
    width: 3rem;
    right: 0;
    top: 0;
    padding: 0;
    margin-top: 1.618rem;
    line-height: 3rem;
    text-align: left;
    text-indent: -999em;
    border-width: 0;
    z-index: 999;
  }

  .is-active .menu-toggle::before {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    text-indent: 0;
  }

  .admin-bar .is-active .menu-toggle {
    top: 46px;
  }
}

@media (min-width: 880px) {
  .menu-toggle {
    display: none;
  }
}

.menu-toggle::before {
  content: '\f419';
  margin-right: 0.618em;
}

.is-active .menu-toggle::before {
  content: '\f406';
}

@media (min-width: 880px) {
  .menu-toggle-skip-link-container {
    display: none;
  }
}

/* FILE: main/menu/_menu-primary-top-level.scss */
@media (min-width: 880px) {
  .main-navigation-container .menu>ul>li {
    padding-top: 0.382rem;
    padding-bottom: 0.382rem;
    margin-left: 0.618rem;
  }

  .main-navigation-container .menu>ul>li>a {
    border-left-width: 0;
    border-top-width: 2px;
  }
}

/* FILE: main/menu/_menu-primary-sub-menu.scss */
@media (min-width: 880px) {
  .main-navigation-container li ul {
    position: absolute;
    min-width: 100%;
    min-width: calc(100% + 6.472rem);
    left: 0;
    top: 100%;
    padding: 1.618rem;
    margin: 0 -2rem;
    border-top-width: 1px;
    border-top-style: solid;
    -webkit-box-shadow: 0 0.382em 1em rgba(0, 0, 0, 0.25);
    box-shadow: 0 0.382em 1em rgba(0, 0, 0, 0.25);
    opacity: 0;
    z-index: 9;
    pointer-events: none;
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
  }
}

@media (min-width: 1280px) {
  .main-navigation-container li ul {
    -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
    transition: opacity 0.5s, -webkit-transform 0.5s;
    -o-transition: transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s, -webkit-transform 0.5s;
  }
}

.main-navigation-container li ul a {
  padding-left: 1rem;
}

@media (min-width: 880px) {
  .main-navigation-container .reverse-expand ul {
    left: auto;
    right: 0;
  }
}

@media (min-width: 880px) {
  .main-navigation-container li li {
    float: none;
    display: block;
  }

  .main-navigation-container li li>a {
    display: block;
    min-width: 10em;
  }
}

@media (min-width: 880px) and (max-width: 1279px) {
  .main-navigation-container li .sub-menu {
    margin-top: 0;
  }
}

@media (min-width: 879px) {
  .main-navigation-container li li a::before {
    content: '';
    display: inline-block;
    width: .5em;
    height: .5em;
    margin-right: .5em;
    margin-top: .25em;
    border-left: 1px solid;
    border-bottom: 1px solid;
    vertical-align: top;
    opacity: .5;
  }
}

@media (min-width: 880px) {

  .no-js .main-navigation-container li:hover>ul,
  .main-navigation-container li.focus>ul {
    pointer-events: auto;
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
    opacity: 1;
  }
}

/* FILE: main/menu/_menu-primary-sub-sub-menu.scss */
.main-navigation-container li ul ul {
  font-size: 1em;
}

@media (min-width: 880px) {
  .main-navigation-container li ul ul {
    min-width: 0;
    left: 100%;
    top: 0;
    padding: 1.618rem;
    margin: 0;
    margin-top: -1.618rem;
    margin-top: calc(-1.618rem - 1px);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, -webkit-transform 0.3s;
    -o-transition: transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
  }

  .main-navigation-container li ul ul li {
    margin-left: 0;
  }
}

@media (min-width: 880px) {

  .main-navigation-container .reverse-expand ul ul,
  .main-navigation-container li .reverse-expand ul {
    left: auto;
    right: 100%;
  }
}

@media (min-width: 879px) {
  .main-navigation-container li li li a {
    padding-left: 2em;
  }
}

/* FILE: main/menu/_menu-primary-expander.scss */
.main-navigation-container .expander {
  display: none;
}

@media (min-width: 880px) {
  .main-navigation-container .expander {
    display: inline-block;
    position: absolute;
    width: 16px;
    height: 16px;
    right: 0.382em;
    top: 50%;
    border-color: currentColor;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .main-navigation-container .expander::after,
  .main-navigation-container .expander::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    border-width: 1px;
    border-style: solid;
  }

  .main-navigation-container .expander::before {
    width: 8px;
    height: 2px;
    margin: -1px -4px;
  }

  .main-navigation-container .expander::after {
    width: 2px;
    height: 8px;
    margin: -4px -1px;
  }

  .no-js .main-navigation-container li:hover>a .expander::after,
  .main-navigation-container li.focus>a .expander::after {
    visibility: hidden;
  }
}

@media (min-width: 880px) {

  .main-navigation-container .menu-item-has-children>a,
  .main-navigation-container .menu>ul>.menu-item-has-children>a {
    padding-right: calc(16px + 0.764em);
  }
}

/* FILE: main/menu/_menu-primary-description.scss */
@media (min-width: 880px) {
  .main-navigation-container .menu>ul>li>a .menu-item-description {
    display: none;
  }
}

@media (min-width: 880px) {
  .main-navigation-container .megamenu>ul>li>a .menu-item-description {
    margin-bottom: 0.618em;
  }
}

/* FILE: main/menu/__menu-primary-mega.scss */
@media (min-width: 880px) {
  .main-navigation-container .megamenu>ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .main-navigation-container .megamenu>ul>li {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 14em;
    flex: 0 1 14em;
    padding: 0;
    border-width: 0;
    vertical-align: top;
  }

  .main-navigation-container .megamenu>ul>li+li {
    margin-left: 2.61792rem;
  }

  .main-navigation-container .megamenu>ul>li a {
    min-width: 0;
  }

  .main-navigation-container .megamenu>ul>li>a {
    margin-bottom: 1.618em;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9045em;
    font-weight: 700;
    border-width: 0;
    border-radius: 0;
  }

  .main-navigation-container .megamenu>ul>li>a .expander {
    display: none;
  }

  .main-navigation-container .megamenu>ul>li>.sub-menu {
    display: block;
    position: relative;
    min-width: 100%;
    left: 0;
    top: 0;
    padding: 0;
    margin: 1em 0 0;
    background: none;
    border-width: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
  }

  .main-navigation-container .megamenu>ul>li>.sub-menu>li>a {
    padding-right: 1rem;
  }

  .main-navigation-container .megamenu>ul>li>.sub-menu ul {
    -webkit-box-shadow: 0 0.382em 1em rgba(0, 0, 0, 0.25);
    box-shadow: 0 0.382em 1em rgba(0, 0, 0, 0.25);
  }

  .main-navigation-container .megamenu>ul>li>.sub-menu,
  .no-js .main-navigation-container .megamenu>ul>li:hover>.sub-menu,
  .main-navigation-container .megamenu>ul>li.focus>.sub-menu {
    left: 0;
  }

  .main-navigation-container .megamenu>ul>li>a,
  .main-navigation-container .megamenu:hover>ul>.current-menu-item>a,
  .main-navigation-container .megamenu:hover>ul>.current-menu-ancestor>a {
    border-color: currentColor;
  }

  .no-js .main-navigation-container .megamenu:hover ul,
  .main-navigation-container .megamenu.focus ul {
    opacity: 1;
  }
}

@media (min-width: 880px) and (max-width: 1279px) {
  .main-navigation-container .megamenu {
    position: static;
  }
}


/* FIX TEMPLATE */
.site-content {
  overflow: visible;
}

/* SEARCH */
body.search #page #content {
  background: #98FCD5;
}

.search-results.no-widgets-sidebar .site-main form[role="search"],
.search-results.no-widgets-sidebar .site-main .search-form {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  background: #ffffff;
}

body.search .page-header-search {
  padding-top: 6em;
  padding-bottom: 6rem;
}

body.search .page-header-search h1 {
  position: relative;
  font-size: 59px;
  line-height: 150%;
  font-weight: 700;
  display: inline-block;
}

h1.page-title.h1.intro-title:focus {
  outline: none !important;
}

body.search .page-header-search h1.page-title:after {
  top: auto;
  height: 10px;
  width: 23%;
  left: 0%;
  background-color: rgba(0, 0, 0, 1);
  bottom: -30px;
  position: absolute;
  content: "";
}


body.search .page-header-search form[role="search"]::before,
body.search .page-header-search .search-form::before {
  content: '\f400';
  position: absolute;
  width: 2.61792rem;
  height: 100%;
  right: 0;
  top: 0;
  margin: 0px 0;
  text-align: center;
  font-size: 1.618rem;
  z-index: 1;
}

body.search .search-form input {
  border: none !important;
}

body.search .site form[role="search"]::before,
body.search .site .search-form::before {
  position: absolute;
  width: 2.61792rem;
  height: 100%;
  right: auto;
  top: 30%;
  margin: 0;
  text-align: center;
  font-size: 1.1em;
  z-index: 1;
  left: 0;
  line-height: 1;
  font-weight: 700;
}

body.search form[role="search"] input[type="search"],
body.search form[role="search"] .search-field,
body.search .search-form input[type="search"],
body.search .search-form .search-field {
  padding-left: 2.61792rem;
}

body.search article a {
  text-decoration: none;
}

body.search article a:hover {
  text-decoration: underline;
}


/* BLOG */

.content-area #posts article {
  width: 100%;
  margin-bottom: 0em;
  background: #ffffff;
  border: none !important;
}

.content-area #posts article:last-child {
  width: 100%;
  margin-bottom: 4em;
}


/* ACCESSIBILITY */

#pojo-a11y-toolbar {
  z-index: 999;
  position: fixed;
}

@media (max-width: 767px) {
  #pojo-a11y-toolbar.pojo-a11y-toolbar-right {
    margin-top: 1em;
    top: 0px !important;
  }
}

@media (min-width:768px) {
  #pojo-a11y-toolbar {
    position: fixed;
  }
}

@media (min-width:1025px) {
  #pojo-a11y-toolbar {
    position: fixed;
  }
}

#pojo-a11y-toolbar.pojo-a11y-toolbar-right .pojo-a11y-toolbar-toggle {
  right: 200px;
  box-shadow: none !important;
}

#pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a {
  background-color: transparent !important;
  font-size: 270% !important;
  box-shadow: none !important;
  color: #000000;
}

.displayNoneMobile {
  display: none !important;
}

@media (min-width:1025px) {
  .displayNoneMobile {
    display: block !important;
  }
}

.pojo-a11y-toolbar-overlay a {
  text-decoration: none;
}

.pojo-a11y-toolbar-overlay a:hover {
  text-decoration: underline;
}


/* MENU */

header#masthead {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

.menu-toggle {
  display: block;
}

.site-header-content {
  background: none !important;
  border: none !important;
}

.main-navigation {
  margin-left: 1em;
}

.main-navigation.is-active {
  background: #ffffff;
}

.main-navigation.is-active .mobile-search-form {
  display: block;
}

.main-navigation .menu {
  display: none;
}

.main-navigation.is-active .menu,
.main-navigation.is-active div#site-navigation-container {
  display: block;
  background: #FF6F61;
}

#menu-primary a:not(.button) {
  color: #000000;
  display: inline-block;
}

#menu-primary a:not(.button):hover::after,
#menu-primary a:not(.button):focus::after,
#menu-primary li.current_page_item a:not(.button)::after {
  width: 96%;
  transition: 0.3s ease all;
}

#menu-primary a:not(.button):focus {
  outline: none !important;
}

#menu-primary a:not(.button)::after {
  top: 95%;
  height: 4px;
  width: 0%;
  left: 2%;
  background-color: rgba(0, 0, 0, 1);
  transition: 0.3s ease all .3s;
}

#menu-primary a:not(.button)::after {
  content: "";
  position: absolute;
}

#menu-primary a:not(.button):hover,
#menu-primary a:not(.button):focus,
#menu-primary li.current_page_item {
  font-family: Roboto-slab;
  transition: 0.3s ease all;
  font-weight: 700;
}

#menu-primary a:not(.button) {
  font-family: Roboto-slab;
  transition: 0.3s ease all .3s;
}

.main-navigation-container .menu>ul>li {
  margin-left: 0;
}

.main-navigation-container .menu>ul>li>a,
.has-navigation-mobile .main-navigation-container .menu>ul>li:nth-last-child(2) {
  border: none !important;
}

.has-navigation-mobile .main-navigation-container li {
  border: none;
}

.site-header-content {
  padding-top: 0;
  padding-bottom: 0;
}

.site-header-inner,
.header-layout-fullwidth .site-header-inner {
  width: 90% !important;
}

.menu-toggle::before {
  margin-right: 0.5em !important;
  margin-left: 0.5em !important;
}

.main-navigation:not(.is-active) button#menu-toggle {
  font-size: 0px !important;
  background: none;
  border: none !important;
}

body:not(.home) .main-navigation:not(.is-active) button#menu-toggle {
  background: #ff6f61;
}

.main-navigation.is-active .menu-toggle {
  display: inline-block;
  position: fixed;
  width: 80px;
  right: 20px !important;
  top: 10px !important;
  padding: 0;
  margin-top: 1.618rem;
  line-height: 80px;
  text-align: left;
  text-indent: -999em;
  border-width: 0;
  z-index: 999;
  background: none;
  margin: 0;
}

.is-active .menu-toggle::before {
  width: 50%;
  font-size: 40px;
}

.main-navigation:not(.is-active) .menu-toggle::before {
  font-size: 40px !important;
  padding-top: 10px;
}

.mobile-search-form {
  display: none !important;
}


@media (min-width: 672px) and (min-width: 879px),
(max-height: 447px) {
  .is-active .menu-toggle::before {
    width: 50%;
  }
}

@media (max-width: 671px) and (min-height: 448px) {
  .has-navigation-mobile .main-navigation-container {
    padding-right: 10%;
  }

  .main-navigation.is-active .menu-toggle {
    position: fixed;
    bottom: auto;
    background: none;
    box-shadow: none;
    font-size: 0;
    right: 0;
    left: auto;
    top: 0px;
  }

  .main-navigation.is-active .menu-toggle::before {
    font-size: 40px !important;
    margin-right: 0 !important;
    margin-left: 25px !important;
  }

  .menu-toggle {
    position: absolute;
    height: 4.618rem;
    left: 0;
    bottom: auto;
    /*color: #000000!important;*/
  }
}

#menu-toggle {
  color: #000000;
}

button.mobile_menu_bg {
  color: #000000;
}

@media (max-width: 671px) {
  .has-navigation-mobile .main-navigation-container .mobile-search-form+.menu>ul {
    padding-top: 5vh;
  }

  button.mobile_menu_bg:before {
    background: #ff6f61;
  }

  .menu-toggle::before {
    padding-right: 0px !important;
    padding-left: 0px !important;
    padding-bottom: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
  }

  .menu-toggle {
    bottom: auto;
    position: fixed;
    height: 60px;
    width: 70px;
    box-shadow: none;
    left: 10px;
  }
}


body.home .breadcrumbs {
  display: none !important;
}

.elementor-search-form:before {
  display: none;
}

.site-content-inner {
  padding: 0;
}

li {
  padding-bottom: 0.3em;
}

.pageUp .elementor-icon {
  transform: rotate(180deg);
}

.breadcrumbs {
  display: none;
}

/*Accessible Nav (high contrast and font size)*/
.customAccessibleNav {
  width: 0;
  position: absolute;
  top: 15px;
  right: 15px;
  left: auto;
  z-index: 9999999;
}

.customAccessibleNav li {
  display: inline-block;
}

.customAccessibleNav ul {
  list-style-type: none;
}

.customAccessibleNav .offscreen {
  display: none;
}

.customAccessibleNav button {
  background: none;
  color: #ffffff;
  border: 0;
  font-size: 1.5em;
  padding: 0.4em;
}


/*CODE SONIA*/

/*Polices (Elementor configuré pour prendre polices de thèmes)*/

.frontPolice,
h3 {
  font-family: flood-std, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.7em;
}

.roboto-slab {
  font-family: roboto-slab, serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-slab-bold {
  font-family: roboto-slab, serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-italic {
  font-family: roboto, sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-bold {
  font-family: roboto, sans-serif;
  font-weight: 700;
  font-style: normal;
}

.raleway {
  font-family: 'Raleway', sans-serif;
}

.raleway-bold {
  font-family: raleway, sans-serif;
  font-weight: 700;
  font-style: normal;
}

.raleway-extrabold,
h2 {
  font-family: raleway, sans-serif;
  font-weight: 800;
  font-style: normal;
}


/*Cacher contenu du thème*/
.intro-container {
  display: none;
}

/*Custom buttons*/

.customButton a {
  width: 300px !important;
  display: block;
  font-family: flood-std, sans-serif;
  content: "\f061";
}

.customButtonSm a {
  width: 300px !important;
  display: block;
  font-family: flood-std, sans-serif;
  content: "\f061";
}

.customButton .elementor-button-content-wrapper,
.customButtonSm .elementor-button-content-wrapper {
  display: flex;
  align-content: center;
  justify-content: center;
  flex-direction: column-reverse;
}

.customButton .elementor-button-text {
  margin-bottom: 8px;
}

@media (min-width:768px) {
  .customButton a {
    width: 200px !important;
  }
}

@media (min-width:1025px) {
  .customButton a {
    width: 300px !important;
  }
}


/*Text navigation fixe Desktop*/

#sortirDesktopNav.customMenuItem a::before {
  content: "Quitter immédiatement" !important;
}

#effacerDesktopNav.customMenuItem a::before {
  content: "Effacer mes traces" !important;
}

#aideDesktopNav.customMenuItem a::before {
  content: "Besoin d'aide?" !important;
}

#rechercheDesktopNav.customMenuItem a::before {
  content: "Recherche" !important;
}

#sortirDesktopNav.customMenuItem a::before,
#effacerDesktopNav.customMenuItem a::before,
#aideDesktopNav.customMenuItem a::before,
#rechercheDesktopNav.customMenuItem a::before {
  text-transform: uppercase;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute !important;
  height: 100%;
  top: 0;
  right: 0;
  font-size: 25px !important;
  white-space: nowrap;
  overflow: hidden;
  transform: scaleX(0);
  background-color: transparent;
  transform-origin: right;
  transition: background-color 0.3s;
  padding: 0.5em 2em 0.5em 0.5em;
}

#sortirDesktopNav.customMenuItem:hover a::before {
  transform: scaleX(1);
  background-color: #ff2600;
  font-weight: 700;
  width: auto;
}

#effacerDesktopNav.customMenuItem:hover a::before,
#aideDesktopNav.customMenuItem:hover a::before,
#rechercheDesktopNav.customMenuItem:hover a::before {
  transform: scaleX(1);
  background-color: #fff000;
  width: auto;
}

.customMenuItem a {
  height: auto;
}

.customMenuItem .elementor-button-content-wrapper {
  display: flex;
  align-content: center;
  justify-content: center;
  line-height: 0;
}

.customNavMobile .customMenuItem a {
  height: 100%;
}

#rightNav {
  position: fixed;
  z-index: 300;
  top: 25%;
  right: 0;
  width: 80px;
}

#rightNavMobile {
  position: fixed;
  z-index: 300;
  bottom: 0;
}

@media (min-width:768px) {
  .customNavMobile .customMenuItem a {
    padding: 0.5em !important;
  }
}

@media (min-width:1025px) {
  .customNavMobile .customMenuItem a {
    padding: 0.3em !important;
  }
}

/*Custom Header*/


.customHero .swiper-slide-inner {
  margin: 0 0 0 8%;
}

.customHeader .swiper-slide-bg {
  background-position: 70%;
}

.customHeader .swiper-pagination-bullets {
  width: 0;
  top: 50%;
  left: 0.5em;
}

.customHeader .swiper-pagination-bullet {
  border: 1px solid #ffffff;
  opacity: 0.5;
  background: none;
}

.customHeader .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #ffffff;
  opacity: 1;
}


/*Custom carousels*/

.customMediaCarousel .swiper-pagination-bullet {
  border: 1px solid #000000;
  opacity: 0.5;
  background: none;
}

.customMediaCarousel .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #000000;
  opacity: 1;
}

.customCarousel figure {
  background-color: #ffffff;
  padding: 1em 0 0 0;
}

.customCarousel figcaption {
  padding: 0.5em 0 1em 0;
}

.customCarousel .elementor-carousel-image {
  background-color: white;
}

.customCarousel .elementor-carousel-image-overlay {
  border: 6px solid black;
  background-color: rgb(152, 252, 213, 0.35);
}

.customCarousel .elementor-swiper-button {
  background-color: #000000;
  padding: 0.3em 0.2em;
}

.customCarousel .elementor-swiper-button-prev {
  left: -13px;
}

.customCarousel .elementor-swiper-button-next {
  right: -13px;
}

.customP p {
  margin: 0 0 0.5em
}


/*Custom sections*/

.noHeight {
  height: 0;
  padding-left: 3em;
  padding-right: 3em;
}

.customSection {
  padding: 6em 0em 6em 0.25em;
  margin: 0;
}

@media (min-width:768px) {
  section.customSection {
    padding: 6em 1em 6em 1em;
  }
}

.customSection .customSection {
  padding: 2em 0em 0em 0em;
}

.customViolenceSection {
  padding: 2em 0.75em 2em 0.75em;
  margin: 0;
}

@media (min-width:768px) {
  section.customViolenceSection {
    padding: 2em 1em 2em 1em;
  }
}

@media (min-width:1025px) {
  .noHeight {
    padding-left: 0;
    padding-right: 0;
  }
}

.customFooter {
  padding: 6em 0.75em 4em 0.75em;
  margin: 0;
}

.customFooter .customSection {
  padding: 1em 0em 0em 0em;
}


/*Custom Links*/

.customTextLinks a {
  color: inherit;
}

.customTextLinks a:hover {
  text-decoration: underline;
}


/*Accordion*/

.elementor-toggle-icon i:before {
  background-color: #ffffff;
  padding: 5px;
}

.customAccordion .elementor-tab-title a {
  display: grid;
}


/* QUIZ */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
}

.page-id-2587 .site-content-inner {
  width: 100% !important;
  margin: 0;
  max-width: 100%;
}

#quizzie {
  font-family: 'Raleway';
}

#quizzie h1 {
  font-family: 'Raleway';
  font-size: 2.5em;
  margin: 0;
}

#quizzie h2 {
  font-family: 'Raleway';
  font-weight: 300;
  font-size: 2em;
}

#quizzie h1,
#quizzie h2,
#quizzie p {
  text-align: center;
  display: block;
  width: auto;
}

#quizzie .title-partage {
  color: #000000;
  font-family: "Raleway", Sans-serif;
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.5em;
  text-shadow: 0px 3px 6px #89C1A9;
  text-align: left;
}

#quizzie ul {
  list-style: none;
  display: block;
  width: auto;
  padding: 0;
  overflow: visible;
  display: none;
  margin: 0;
  /* Step Questions and Answer Options */
}

#quizzie ul.current {
  display: block;
}

#quizzie ul li {
  display: inline-block;
  float: left;
  width: 49%;
  margin-right: 2%;
  overflow: visible;
  text-align: center;
}

#quizzie ul li.quiz-answer {
  cursor: pointer;
}

#quizzie ul li.question,
#quizzie ul li.results-inner {
  display: block;
  float: none;
  width: 100%;
  text-align: center;
  margin: 0;
}

#quizzie ul li.results-inner {
  padding: 5% 2%;
}

#quizzie ul li.results-inner img {
  width: 250px;
}

#quizzie ul li:last-child {
  margin-right: 0;
}

#quizzie .question-wrap,
#quizzie .answer-wrap {
  display: block;
  margin: 1em 10%;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

#quizzie .answer-wrap {
  -moz-transition: background-color 0.5s ease;
  -o-transition: background-color 0.5s ease;
  -webkit-transition: background-color 0.5s ease;
  background-color: #FFFFFF;
  border-style: solid;
  border-width: 6px 6px 6px 6px;
  border-color: #02010100;
  border-radius: 0px 0px 0px 0px;
  padding: 1em 2em 1em 2em;
  transition: all 0.5s;
}

#quizzie .answer-wrap:hover {
  border-color: #000000;
  transform: scale(1.1);
}

#quizzie .answer-text {
  font-family: "Raleway", Sans-serif;
  font-size: 1.3em;
  font-weight: bold;
  fill: #000000;
  color: #000000;
}

#quizzie .btn-share {
  width: 75%;
  font-family: "Raleway", Sans-serif;
  font-size: 16px;
  font-weight: bold;
  fill: #000000;
  color: #000000;
  -moz-transition: background-color 0.5s ease;
  -o-transition: background-color 0.5s ease;
  -webkit-transition: background-color 0.5s ease;
  background-color: #FFFFFF;
  border-style: solid;
  border-width: 6px 6px 6px 6px;
  border-color: #02010100;
  border-radius: 0px 0px 0px 0px;
  padding: 1em 2em 1em 2em;
  transition: all 0.5s;
  margin-top: 1em;
  text-decoration: none;
  text-align: center;
}

#quizzie .btn-share:hover {
  border-color: #000000;
  transform: scale(1.1);
}

#quizzie p.answer-text {
  margin: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#quizzie #top-section .message-box p a,
#quizzie #top-section .message-aide a {
  color: #fff;
}

/* CUSTOM SECTION */
#quizzie .question {
  padding-top: 50px;
}

#quizzie ul li.question,
#quizzie ul li.results-inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

#quizzie .question-wrap p {
  font-size: 36px;
  line-height: 45px;
}

#quizzie .title-result {
  padding: 0 25px 25px 25px;
  margin: 0;
  font-size: 36px;
  font-weight: 900;
  line-height: 35px;
}

#quizzie .partage-box {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

#quizzie .info-box {
  width: 50%;
  padding-bottom: 2em;
  display: flex;
  flex-direction: column;
}

#quizzie .info-box p {
  text-align: left;
  margin: 0;
}

#quizzie .list-result h1,
#quizzie .list-result p {
  color: #000000;
}

#quizzie .gauge-label {
  max-width: 100%;
  margin: auto;
  height: 40px;
}

#quizzie p.thermo-label {
  margin: 0;
  font-weight: bold;
  color: #000000;
}

#quizzie .list-result {
  width: 100% !important;
}

#quizzie .partage {
  background: #A8D9C4;
  padding: 4em 0;
}

#quizzie .intro-para {
  padding-top: 25px;
}

#quizzie .intro-title {
  text-align: center;
}

#quizzie .intro-title img {
  width: 350px;
  height: auto;
}

#quizzie .back1 {
  background: url(/wp-content/uploads/2020/11/arriere_plan_quiz.png) center center no-repeat;
  background-size: cover;
  min-height: 100vh;
  height: 100%;
  padding: 50px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#quizzie .invisible {
  display: none;
}

#quizzie .results-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1em;
}

#quizzie .section-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1em;
}

#quizzie .btn-quiz {
  font-family: "Raleway", Sans-serif;
  font-size: 1.3em;
  font-weight: bold;
  fill: #000000;
  color: #000000;
  background-color: #FFFFFF;
  border-style: solid;
  border-width: 6px 6px 6px 6px;
  border-color: #02010100;
  border-radius: 0px 0px 0px 0px;
  padding: 0.65em 3em 0.65em 3em;
}

#quizzie .btn-quiz:hover {
  border-color: #000000;
}

#quizzie .introduction {
  color: #000000;
  font-family: "Raleway", Sans-serif;
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.5em;
  text-shadow: 0px 3px 6px #A56AA4;
}

#quizzie .introduction-title {
  padding: 25px;
  margin: 0;
  font-size: 36px;
  font-weight: 900;
  line-height: 35px;
}

#quizzie .message-aide {
  margin-bottom: 60px;
}

#quizzie .button-restart {
  text-align: center;
}

#quizzie .button-restart a {
  cursor: pointer;
}

#quizzie .message-box {
  padding-top: 25px;
}

#quizzie .message-box p {
  margin-bottom: 60px;
}

#quizzie .quiz-hidden {
  display: none;
}


@media only screen and (max-width: 768px) {
  #quizzie .introduction-title {
    font-size: 30px;
  }

  #quizzie .back1 {
    height: 100%;
    padding-bottom: 50px;
  }

  #quizzie .question-wrap p {
    font-size: 25px;
    line-height: 35px;
  }

  #quizzie .title-result {
    font-size: 30px;
    line-height: 35px;
  }

  #quizzie .intro-title img {
    width: 210px;
    height: auto;
  }

  #quizzie .btn-share {
    width: 100%;
  }

  .thermometer--very-high .liquid:before {
    width: 97.5% !important;
  }
}

@media only screen and (max-width: 768px) {
  #quizzie .info-box {
    width: 100% !important;
  }
}

@media only screen and (max-width: 768px) {
  #quizzie ul li {
    width: 100%;
  }
}


.label-questions {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  font-size: 1.5em;
  font-style: italic;
  padding-bottom: 50px;
  margin: 0 !important;
}

/****************************  STYLES BD  ****************************/

/*Page width bd**/
.page-id-3327 .site-content-inner,
.page-id-2972 .site-content-inner,
.page-id-3410 .site-content-inner,
.page-id-81 .site-content-inner,
.page-id-8 .site-content-inner,
.page-id-100 .site-content-inner {
  width: 100% !important;
  margin: 0;
  max-width: 100%;
}

/**************/


/* Bd **/
.bdTitle,
#bdTitleTrace {
  text-align: center;
  margin-top: 0;
  font-family: "Raleway", Sans-serif;
}

#bdTitleSection,
#bdTitleSectionBD2,
#bdTitleSectionBD3 {
  background-color: #FFF58C;
  padding-top: 5em;
  padding-left: 1em;
  padding-bottom: 3em;
  padding-right: 1em;
}

#step0,
#step0bd2,
#step0bd3 {
  padding: 30px;
  margin: auto;
  background-color: white;
}

#step0 iframe,
#step0bd2 iframe,
#step0bd3 iframe {
  margin: auto;
  display: block;
}

#step1bd2,
#step1bd3,
#step2,
#step2alt,
#step3bd2,
#step3bd3,
#step4,
#step5bd2,
#step5bd3,
#step6,
#step6alt,
#step7bd2,
#step7bd3,
#step8 {
  background-color: white;
  padding: 30px;
}

#step1,
#step2bd2,
#step2bd3,
#step3,
#step5,
#step7,
#step9 {
  background-color: #69AAB2;
}

#step9bd2,
#step9bd3 {
  background-color: #A8D9C3;
}

.textIntroBD,
.textIntroBD2,
.textIntroBD3 {
  font-family: "Raleway", Sans-serif;
  margin: 1em;
  font-size: 1em;
  padding: 0em 3em 1em 3em;
  font-weight: bold;
  color: black;
  text-align: left;
}

.textIntroBD a,
.textIntroBD2 a,
.textIntroBD3 a {
  color: black;
  text-decoration: underline;
}

.textIntroBD a:hover,
.textIntroBD2 a:hover,
.textIntroBD3 a:hover {
  text-decoration: none;
}

.textBodyBD {
  font-family: "Raleway", Sans-serif;
  margin: 1em;
  font-size: 1em;
  font-weight: bold;
  color: black;
  text-align: center !important;
}

.textSousTitreBD {
  font-family: "Raleway", Sans-serif;
  font-size: 1.1em;
  padding: 0em 3em 0em 3em;
  font-weight: bold;
  text-align: left;
  color: black;
}

.boutonBDcommencer {
  display: block;
  margin: auto;
  transition: all 0.3s;
  font-family: "Raleway", Sans-serif;
  font-size: 1.3em;
  font-weight: bold;
  text-transform: none;
  fill: #000000;
  color: #000000;
  background-color: #FFFFFF;
  border-style: solid;
  border-width: 6px 6px 6px 6px;
  border-color: #000000;
  border-radius: 0px 0px 0px 0px;
  padding: 0.65em 3em 0.65em 3em;
}

.boutonBDcommencer:hover {
  border-color: #B48DB2;
  background-color: #B48DB2;
  transform: scale(1.05)
}

.bouton-option {
  display: block;
  margin: auto;
  transition: all 0.3s;
  font-family: "Raleway", Sans-serif;
  font-size: 0.9em;
  font-weight: bold;
  text-transform: none;
  text-align: left;
  fill: #000000;
  color: #000000;
  background-color: #FFFFFF;
  border-style: solid;
  border-width: 6px 6px 6px 6px;
  border-color: #02010100;
  border-radius: 0px 0px 0px 0px;
  padding: 0.65em 1em 0.65em 1em;
}

.bouton-option:hover {
  border-color: black;
  transform: scale(1.05)
}

.next-step {
  display: block;
  margin: auto;
  transition: all 0.3s;
  font-family: "Raleway", Sans-serif;
  font-size: 1em;
  font-weight: bold;
  text-transform: none;
  fill: #000000;
  color: #000000;
  background-color: #FFFFFF;
  border-style: solid;
  border-width: 6px 6px 6px 6px;
  border-color: #000000;
  border-radius: 0px 0px 0px 0px;
  padding: 0.65em 3em 0.65em 3em;
}

.next-step:hover {
  border-color: #B48DB2;
  background-color: #B48DB2;
  transform: scale(1.05)
}

@media (min-width: 768px) {
  .imagePlancheBD {
    width: 68%;
    margin-top: 3em;
    margin-bottom: 1em;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1281px) {
  .imagePlancheBD {
    width: 90%;
    margin-top: 3em;
    margin-bottom: 1em;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}


.histoire {
  width: 100%;
  margin: 0 auto;
}

.step:nth-child(odd) {
  background: #FE7867;
}

.step:nth-child(even) {
  background: #A8D9C3;
}

.future {
  display: none;
}

.doneButton {
  display: none;
}

.choix-de-reponses {
  background-image: url("/wp-content/uploads/2021/12/Bg-Questions-BD.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  padding: 1em;
}

.choix-1-4 {
  padding: 0.5em;
  width: 25%;
}

/*Mobile*/

@media (max-width: 768px) {
  .choix-de-reponses {
    display: block;
    margin: auto;
  }

  .choix-1-4 {
    padding: 1em;
    width: 100% !important;
  }

  .choix-1-4 p {
    text-align: center;
    font-weight: bold;
  }

  .choix-1-4 button {
    display: block;
    margin: auto;
  }

  .choix-1-3 {
    padding: 1em;
    width: 100% !important;
  }

  .choix-1-3 p {
    text-align: center;
    font-weight: bold;
  }

  .choix-1-3 button {
    display: block;
    margin: auto;
  }

  .choix-1-2 {
    padding: 1em;
    width: 100% !important;
  }

  .choix-1-2 p {
    text-align: center;
    font-weight: bold;
  }

  .choix-1-2 button {
    display: block;
    margin: auto;
  }

  .imagePlancheBD {
    width: 100%;
    margin-top: 3em;
    margin-bottom: 30px;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .textSousTitreBD {
    font-size: 1em;
    padding: 0;
  }


}

.choix-1-3 {
  padding: 1em;
  width: 33.3%;
}

.choix-1-2 {
  padding: 1em;
  width: 50%;
}


.bouton-option {
  transition: all .3s;
}

.done {
  opacity: 0;
}


.score-box {
  position: fixed;
  background: black;
  color: white;
  padding: 10px;
  font-size: 20px;
  /*display:none; à retirer avant la mise en ligne*/
}

.conclusion {
  background: #ffa7a7 !important;
}




/* THERMOMETRE */

.thermometer,
.thermometer--very-low,
.thermometer--low,
.thermometer--moderate,
.thermometer--high,
.thermometer--very-high {
  max-width: 80%;
  margin: 2rem auto;
}

.thermometer span,
.thermometer--very-low span,
.thermometer--low span,
.thermometer--moderate span,
.thermometer--high span,
.thermometer--very-high span {
  font-family: Verdana;
  font-size: 1rem;
  color: #ccc;
  min-width: 100%;
  text-align: center;
  display: block;
  margin-bottom: 1.25rem;
}

.thermometer .liquid,
.thermometer--very-low .liquid,
.thermometer--low .liquid,
.thermometer--moderate .liquid,
.thermometer--high .liquid,
.thermometer--very-high .liquid {
  display: block;
  width: 100%;
  height: 1.275rem;
  border: 1px solid #d2d2d2;
  border-radius: 10px;
  margin: 0.25rem auto 0;
  position: relative;
}

.thermometer .liquid:before,
.thermometer--very-low .liquid:before,
.thermometer--low .liquid:before,
.thermometer--moderate .liquid:before,
.thermometer--high .liquid:before,
.thermometer--very-high .liquid:before {
  position: absolute;
  content: "";
  height: 70%;
  left: 3px;
  top: 14%;
  border-radius: 10px;
  -webkit-transition: width 0.3s ease;
  transition: width 0.3s ease;
}

.thermometer .liquid-invert,
.thermometer--very-low .liquid-invert,
.thermometer--low .liquid-invert,
.thermometer--moderate .liquid-invert,
.thermometer--high .liquid-invert,
.thermometer--very-high .liquid-invert {
  display: block;
  width: 100%;
  height: 1.275rem;
  border: 1px solid #d2d2d2;
  border-radius: 10px;
  margin: 0.25rem auto 0;
  position: relative;
}

.thermometer .liquid-invert:before,
.thermometer--very-low .liquid-invert:before,
.thermometer--low .liquid-invert:before,
.thermometer--moderate .liquid-invert:before,
.thermometer--high .liquid-invert:before,
.thermometer--very-high .liquid-invert:before {
  position: absolute;
  content: "";
  height: 70%;
  right: 3px;
  top: 14%;
  border-radius: 10px;
  -webkit-transition: width 0.3s ease;
  transition: width 0.3s ease;
}

.thermometer .ruler,
.thermometer--very-low .ruler,
.thermometer--low .ruler,
.thermometer--moderate .ruler,
.thermometer--high .ruler,
.thermometer--very-high .ruler {
  height: 0.625rem;
  width: 100%;
  margin-left: 2px;
}

.thermometer .ruler .ticks--very-low line,
.thermometer--very-low .ruler .ticks--very-low line,
.thermometer--low .ruler .ticks--very-low line,
.thermometer--moderate .ruler .ticks--very-low line,
.thermometer--high .ruler .ticks--very-low line,
.thermometer--very-high .ruler .ticks--very-low line,
.thermometer .ruler .ticks--low line,
.thermometer--very-low .ruler .ticks--low line,
.thermometer--low .ruler .ticks--low line,
.thermometer--moderate .ruler .ticks--low line,
.thermometer--high .ruler .ticks--low line,
.thermometer--very-high .ruler .ticks--low line,
.thermometer .ruler .ticks--moderate line,
.thermometer--very-low .ruler .ticks--moderate line,
.thermometer--low .ruler .ticks--moderate line,
.thermometer--moderate .ruler .ticks--moderate line,
.thermometer--high .ruler .ticks--moderate line,
.thermometer--very-high .ruler .ticks--moderate line,
.thermometer .ruler .ticks--high line,
.thermometer--very-low .ruler .ticks--high line,
.thermometer--low .ruler .ticks--high line,
.thermometer--moderate .ruler .ticks--high line,
.thermometer--high .ruler .ticks--high line,
.thermometer--very-high .ruler .ticks--high line,
.thermometer .ruler .ticks--very-high line,
.thermometer--very-low .ruler .ticks--very-high line,
.thermometer--low .ruler .ticks--very-high line,
.thermometer--moderate .ruler .ticks--very-high line,
.thermometer--high .ruler .ticks--very-high line,
.thermometer--very-high .ruler .ticks--very-high line {
  stroke-width: 2px;
  shape-rendering: crispEdges;
}

.thermometer .ruler .ticks--very-low,
.thermometer--very-low .ruler .ticks--very-low,
.thermometer--low .ruler .ticks--very-low,
.thermometer--moderate .ruler .ticks--very-low,
.thermometer--high .ruler .ticks--very-low,
.thermometer--very-high .ruler .ticks--very-low {
  stroke: white;
}

.thermometer .ruler .ticks--low,
.thermometer--very-low .ruler .ticks--low,
.thermometer--low .ruler .ticks--low,
.thermometer--moderate .ruler .ticks--low,
.thermometer--high .ruler .ticks--low,
.thermometer--very-high .ruler .ticks--low {
  stroke: green;
}

.thermometer .ruler .ticks--moderate,
.thermometer--very-low .ruler .ticks--moderate,
.thermometer--low .ruler .ticks--moderate,
.thermometer--moderate .ruler .ticks--moderate,
.thermometer--high .ruler .ticks--moderate,
.thermometer--very-high .ruler .ticks--moderate {
  stroke: red;
}

.thermometer .ruler .ticks--high,
.thermometer--very-low .ruler .ticks--high,
.thermometer--low .ruler .ticks--high,
.thermometer--moderate .ruler .ticks--high,
.thermometer--high .ruler .ticks--high,
.thermometer--very-high .ruler .ticks--high {
  stroke: green;
}

.thermometer .ruler .ticks--very-high,
.thermometer--very-low .ruler .ticks--very-high,
.thermometer--low .ruler .ticks--very-high,
.thermometer--moderate .ruler .ticks--very-high,
.thermometer--high .ruler .ticks--very-high,
.thermometer--very-high .ruler .ticks--very-high {
  stroke: blue;
}

.thermometer--very-low strong {
  color: white;
}

.thermometer--very-low strong:before {
  content: " freezing";
}

.thermometer--very-low .liquid:before {
  background: white;
  width: 0%;
}

.thermometer--very-low .liquid-invert:before {
  background: white;
  width: 0%;
}

.thermometer--low strong {
  color: green;
}

.thermometer--low strong:before {
  content: " cold";
}

.thermometer--low .liquid:before {
  background: #B2D7ED;
  width: 10%;
}

.thermometer--moderate strong {
  color: red;
}

.thermometer--moderate strong:before {
  content: " ok";
}

.thermometer--moderate .liquid:before {
  background: #B2D7ED;
  width: 50%;
}

.thermometer--high strong {
  color: green;
}

.thermometer--high strong:before {
  content: " hot";
}

.thermometer--high .liquid:before {
  background: #FFF68D;
  width: 70%;
}

.thermometer--very-high strong {
  color: blue;
}

.thermometer--very-high strong:before {
  content: " blazing";
}

.thermometer--very-high .liquid:before {
  background: #FFF68D;
  width: 99%;
}

.thermometer--very-high .liquid-invert:before {
  background: blue;
  width: 99%;
}