@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,500");
@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500");
/* VARIABLE COLOR */
html {
  font-size: 100%; }

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 1em;
  font-weight: normal;
  font-style: normal;
  text-decoration: none; }

body {
  font-family: "Montserrat", sans-serif;
  font-stretch: 100%;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.5;
  padding: 0;
  margin: 0; }

.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
  /* Rounded */ }
  .switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #808080;
    transition: .2s; }
    .switch .slider:before {
      position: absolute;
      content: "";
      height: calc(100% - 4px);
      width: calc((100%/2) - 2px);
      left: 2px;
      bottom: 2px;
      background-color: #FFFFFF;
      transition: .2s; }
  .switch .round {
    border-radius: 25px; }
    .switch .round:before {
      border-radius: 50%; }
  .switch .roundright {
    border-radius: 0 25px 25px 0; }
    .switch .roundright:before {
      border-radius: 0 50% 50% 0; }
  .switch .roundleft {
    border-radius: 25px 0 0 25px; }
    .switch .roundleft:before {
      border-radius: 50% 0 0 50%; }
  .switch input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0; }
    .switch input[type="checkbox"]:checked + .slider {
      background-color: #f47e20; }
    .switch input[type="checkbox"]:checked + .slider:before {
      transform: translateX(calc(100% + 0px)); }

button, input[type=submit] {
  outline: none;
  cursor: pointer;
  background-color: #FFFFFF;
  color: #808080;
  border: 1px solid #FAFAFA;
  border-radius: 2px;
  font-size: 1em;
  text-align: center;
  padding: 0.5em 1em;
  transition: border-color 0.1s, background-color 0.1s; }

.button-XS, button-XS {
  font-size: 0.75em;
  padding: 0.5em 1.2em; }

.button-S, button-S {
  font-size: 0.83em;
  padding: 0.5em 1.2em; }

.button-M, button-M {
  font-size: 1em;
  padding: 0.5em 1.2em; }

.button-L, button-L {
  font-size: 1.17em;
  padding: 0.5em 1.2em; }

.button-XL, button-XL {
  font-size: 1.5em;
  padding: 0.5em 1.2em; }

input[type=text], input[type=password], input[type=phone], input[type=mail], select {
  outline: none;
  height: auto;
  color: #000000;
  font-size: 1em;
  padding: 0.5em; }
  input[type=text]::placeholder, input[type=password]::placeholder, input[type=phone]::placeholder, input[type=mail]::placeholder, select::placeholder {
    color: #C0C0C0; }

.input-xsmall {
  font-size: 0.75em !important;
  padding: 0.5em !important;
  height: auto; }

.input-small {
  font-size: 0.83em !important;
  padding: 0.5em !important;
  height: auto; }

.input-medium {
  font-size: 1em !important;
  padding: 0.5em !important; }

.input-large {
  font-size: 1.17em !important;
  padding: 0.5em !important;
  height: auto; }

.input-xlarge {
  font-size: 1.5em !important;
  padding: 0.5em !important;
  height: auto; }

.input::placeholder {
  opacity: 1; }

select, .select {
  border: solid 1px gray;
  background-color: #FFFFFF;
  appearance: none;
  text-indent: 1px;
  text-overflow: '';
  background: url(arrow-down.svg) no-repeat;
  background-position: center right 5px;
  background-size: 12px;
  color: gray;
  z-index: 1;
  font-size: 1em; }
  select-xs, .select-xs {
    font-size: 0.75em !important;
    padding: 0.5em !important;
    height: auto; }
  select-s, .select-s {
    font-size: 0.83em !important;
    padding: 0.5em !important;
    height: auto; }
  select-m, .select-m {
    font-size: 1em !important;
    padding: 0.5em !important;
    height: 35px; }
  select-l, .select-l {
    font-size: 1.17em !important;
    padding: 0.5em !important;
    height: auto; }
  select-xl, .select-xl {
    font-size: 1.5em !important;
    padding: 0.5em !important;
    height: auto; }

.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
  /* Rounded */ }
  .switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #808080;
    transition: .2s; }
    .switch .slider:before {
      position: absolute;
      content: "";
      height: calc(100% - 4px);
      width: calc((100%/2) - 2px);
      left: 2px;
      bottom: 2px;
      background-color: #FFFFFF;
      transition: .2s; }
  .switch .round {
    border-radius: 25px; }
    .switch .round:before {
      border-radius: 50%; }
  .switch .roundright {
    border-radius: 0 25px 25px 0; }
    .switch .roundright:before {
      border-radius: 0 50% 50% 0; }
  .switch .roundleft {
    border-radius: 25px 0 0 25px; }
    .switch .roundleft:before {
      border-radius: 50% 0 0 50%; }
  .switch input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0; }
    .switch input[type="checkbox"]:checked + .slider {
      background-color: #512c48; }
    .switch input[type="checkbox"]:checked + .slider:before {
      transform: translateX(calc(100% + 0px)); }

/* 
input[type=checkbox], input[type=radio] {
  position: relative;
  font-size: 10px;
  line-height: 1;
  width: 10px;
  height: 10px;
  min-height: 10px;
  max-height: 10px;
  margin-right: 10px;
  left: 1px;
  top: 1px;
  outline-style: none;
  outline-color: transparent;
  outline-width: 0px; }
  input[type=checkbox]:after, input[type=checkbox]:before, input[type=radio]:after, input[type=radio]:before {
    font-family: "LLMS";
    text-align: center;
    font-size: 12px;
    line-height: 1;
    width: 14px;
    height: 14px;
    min-height: 14px;
    max-height: 14px;
    border: 1px solid #A9A9A9;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); }
  input[type=checkbox]::before, input[type=radio]::before {
    content: ' ';
    background-color: #FFFFFF; }
  input[type=checkbox]:after, input[type=radio]:after {
    color: #f47e20;
    background-color: #FFFFFF; }
  input[type=checkbox]:checked[data-icon]::after, input[type=radio]:checked[data-icon]::after {
    content: attr(data-icon); }

input[type=radio]:before, input[type=radio]:after, input[type=radio]:checked {
  border-radius: 50%; }

input[type=radio]:checked:after {
  content: '\e925';
  font-size: 0.9em;
  line-height: calc(0.73 * 2em); }

input[type=checkbox]:before, input[type=checkbox]:after, input[type=checkbox]:checked {
  border-radius: 2px; }

input[type=checkbox]:checked:after {
  content: '\e984'; }


input[type=checkbox], input[type=radio] {
    position: relative;
    width: 1em;
    height: 1em;
    font-size: 1em;
    margin-right: 6px;
    left: 1px;
    top: 1px;
    outline-style: none;
    outline-color: transparent;
    outline-width: 0px;

    &:after,  &:before {
        font-family: "LLMS";
        position: absolute;
        text-align: center;
        font-size: 1.5em;
        line-height: .58;
        border: 0px solid transparent;
        width: calc(100% + 3px);
        height: calc(100% + 3px);
        left: -2px;
        top: -1px;
    }

    &::before {
        content: ' ';
        background-color: $gray;
    }
    &:after {
        color: $primary;
        background-color: $secondary;
    }

    &:checked {

        &[data-icon]::after {
            content: attr(data-icon);
        }
    }
    }

input[type=radio] {
    &:before, &:after, &:checked {
        border-radius: 50%;
    }
    &:checked:after {
        content: '\e925';
        font-size: 0.9em;
        line-height: calc(0.73 * 2em) ;
    }
}

input[type=checkbox] {
    &:before, &:after, &:checked {
        border-radius: 2px;
    }
    &:checked:after {
        content: '\e984';
    }
} */
.screen-XS {
  width: 320px;
  margin-left: auto;
  margin-right: auto;
  font-size: 12px; }

.screen-S {
  width: 640px;
  margin-left: auto;
  margin-right: auto;
  font-size: 13px; }

.screen-M {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  font-size: 14px; }

.screen-L {
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
  font-size: 15px; }

.screen-XL {
  width: 1600px;
  margin-left: auto;
  margin-right: auto;
  font-size: 16px; }

.size-XS {
  font-size: 12px; }

.size-S {
  font-size: 13px; }

.size-M {
  font-size: 14px; }

.size-L {
  font-size: 15px; }

.size-XL {
  font-size: 16px; }

.rounded {
  border-radius: 5px; }

.circle {
  border-radius: 50%; }

.border {
  border-width: 1px;
  border-style: solid; }
  .border-dotted {
    border-width: 1px;
    border-style: dotted; }
  .border-dashed {
    border-width: 1px;
    border-style: dashed; }
  .border-double {
    border-width: 5px;
    border-style: double; }

.size-1 {
  font: normal 300 2em/1em "Montserrat", sans-serif; }

.size-2 {
  font: normal 300 1.5em/1.5em "Montserrat", sans-serif; }

.size-3 {
  font: normal 300 1.17em/1.17em "Montserrat", sans-serif; }

.size-4 {
  font: normal 300 1em/1em "Montserrat", sans-serif; }

.size-5 {
  font: normal 400 0.83em/0.83em "Open Sans", sans-serif; }

.size-6 {
  font: normal 300 0.7em/0.7em "Open Sans", sans-serif; }

.bold {
  font-weight: 600; }

.regular {
  font-weight: 400; }

.light {
  font-weight: 300; }

.alignCenter {
  text-align: center; }

.alignLeft {
  text-align: left; }

.alignRight {
  text-align: right; }

.alignJustify {
  text-align: justify; }

ul, .lists {
  padding-left: 15px; }
  ul li, ul .item, .lists li, .lists .item {
    list-style-type: none;
    position: relative; }
    ul li-disc, ul .item-disc, .lists li-disc, .lists .item-disc {
      list-style-type: disc; }
    ul li-circle, ul .item-circle, .lists li-circle, .lists .item-circle {
      list-style-type: circle; }
    ul li-carre, ul .item-carre, .lists li-carre, .lists .item-carre {
      list-style-type: square; }
    ul li[data-icon]:before, ul .item[data-icon]:before, .lists li[data-icon]:before, .lists .item[data-icon]:before {
      content: attr(data-icon);
      font-family: "LLMS";
      position: absolute;
      left: -1.3em;
      font-size: 1em; }

.primaryColor {
  color: #f47e20; }

.primary {
  background-color: #f47e20; }

.primaryBorder {
  border-color: #f47e20; }

.primaryBorder {
  border-color: #f47e20; }

.primaryDarkColor {
  color: #bb4f00; }

.primaryDark {
  background-color: #bb4f00; }

.primaryDarkBorder {
  border-color: #bb4f00; }

.primaryDarkBorder {
  border-color: #bb4f00; }

.secondaryColor {
  color: #512c48; }

.secondary {
  background-color: #512c48; }

.secondaryBorder {
  border-color: #512c48; }

.secondaryBorder {
  border-color: #512c48; }

.secondaryDarkColor {
  color: #280421; }

.secondaryDark {
  background-color: #280421; }

.secondaryDarkBorder {
  border-color: #280421; }

.secondaryDarkBorder {
  border-color: #280421; }

.diverColor {
  color: #281d22; }

.diver {
  background-color: #281d22; }

.diverBorder {
  border-color: #281d22; }

.diverBorder {
  border-color: #281d22; }

.lightColor {
  color: #FAFAFA; }

.light {
  background-color: #FAFAFA; }

.lightBorder {
  border-color: #FAFAFA; }

.lightBorder {
  border-color: #FAFAFA; }

.whiteColor {
  color: #FFFFFF; }

.white {
  background-color: #FFFFFF; }

.whiteBorder {
  border-color: #FFFFFF; }

.whiteBorder {
  border-color: #FFFFFF; }

.blackColor {
  color: #000000; }

.black {
  background-color: #000000; }

.blackBorder {
  border-color: #000000; }

.blackBorder {
  border-color: #000000; }

.grayColor {
  color: #808080; }

.gray {
  background-color: #808080; }

.grayBorder {
  border-color: #808080; }

.grayBorder {
  border-color: #808080; }

.grayDarkColor {
  color: #A9A9A9; }

.grayDark {
  background-color: #A9A9A9; }

.grayDarkBorder {
  border-color: #A9A9A9; }

.grayDarkBorder {
  border-color: #A9A9A9; }

.grayLightColor {
  color: #D3D3D3; }

.grayLight {
  background-color: #D3D3D3; }

.grayLightBorder {
  border-color: #D3D3D3; }

.grayLightBorder {
  border-color: #D3D3D3; }

.silverColor {
  color: #C0C0C0; }

.silver {
  background-color: #C0C0C0; }

.silverBorder {
  border-color: #C0C0C0; }

.silverBorder {
  border-color: #C0C0C0; }

.successColor {
  color: #78C53C; }

.successBG {
  background-color: #78C53C; }

.successBorder {
  border-color: #78C53C; }

.successBorder {
  border-color: #78C53C; }

.infoColor {
  color: #54c8ff; }

.infoBG {
  background-color: #54c8ff; }

.infoBorder {
  border-color: #54c8ff; }

.infoBorder {
  border-color: #54c8ff; }

.errorColor {
  color: #ff0000; }

.errorBG {
  background-color: #ff0000; }

.errorBorder {
  border-color: #ff0000; }

.errorBorder {
  border-color: #ff0000; }

.warningColor {
  color: #FFA500; }

.warningBG {
  background-color: #FFA500; }

.warningBorder {
  border-color: #FFA500; }

.warningBorder {
  border-color: #FFA500; }

img.cover, .img.cover {
  object-fit: cover; }

img.fit, .img.fit {
  object-fit: cover; }

img.left, .img.left {
  object-position: left; }

img.right, .img.right {
  object-position: right; }

img.top, .img.top {
  object-position: top; }

img.bottom, .img.bottom {
  object-position: bottom; }

.padding {
  padding: 1em; }
  .paddingT-1 {
    padding-top: 1.17em; }
  .paddingT-2 {
    padding-top: 1.5em; }
  .paddingT-3 {
    padding-top: 1em; }
  .paddingT-4 {
    padding-top: 0.75em; }
  .paddingB-1 {
    padding-bottom: 1.17em; }
  .paddingB-2 {
    padding-bottom: 1.5em; }
  .paddingB-3 {
    padding-bottom: 1em; }
  .paddingB-4 {
    padding-bottom: 0.75em; }
  .paddingL-1 {
    padding-left: 1.17em; }
  .paddingL-2 {
    padding-left: 1.5em; }
  .paddingL-3 {
    padding-left: 1em; }
  .paddingL-4 {
    padding-left: 0.75em; }
  .paddingR-1 {
    padding-right: 1.17em; }
  .paddingR-2 {
    padding-right: 1.5em; }
  .paddingR-3 {
    padding-right: 1em; }
  .paddingR-4 {
    padding-right: 0.75em; }

/* SKINS */
h1 {
  font: normal 300 2.2em/1em "Montserrat", sans-serif;
  margin-top: 0.5em;
  margin-bottom: 1em; }

h2 {
  font: normal 300 1.5em/1.5em "Montserrat", sans-serif;
  margin-top: 0.5em;
  margin-bottom: 1em; }

h3 {
  font: normal 300 1.17em/1.17em "Montserrat", sans-serif;
  margin-top: 0.5em;
  margin-bottom: 1em; }

h4 {
  font: normal 300 1em/1em "Montserrat", sans-serif;
  margin-top: 0.5em;
  margin-bottom: 1em; }

h5 {
  font: normal 400 0.83em/0.83em "Open Sans", sans-serif;
  margin-top: 0.5em;
  margin-bottom: 1em; }

h6 {
  font: normal 300 0.7em/0.7em "Open Sans", sans-serif;
  margin-top: 0.5em;
  margin-bottom: 1em; }

p {
  font: normal 300 1em/1.5em "Montserrat", sans-serif;
  margin-top: 0.5em;
  margin-bottom: 1em; }