/**
 * @file
 * Global rules
 *
 * Theme global rules.
 */

html {
  height: 100%;
  font-size: var(--font-size-s);
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  line-height: 1.5;
}
html, body {
  position: relative;
  font-family: 'Raleway', sans-serif;
  color: var(--color-grey-dark);
  background: var(--color-primary-grad);
  font-weight: 500;
}
body {
  overflow-x: hidden;
}
body * {
  box-sizing: border-box;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
p, h1, h2, h3 {
  position: relative;
}
::selection {
  background-color: var(--color-primary);;
  color: #fff;
}
a:focus, button:focus, div:focus, input:focus{
  outline: none;
}


/**
 * Links
 */

a {
  color: var(--color-grey-dark);
  text-decoration: none;
}


/**
 * Style element
 */
h1.txt-xxxl {
  font-size: var(--font-size-xxxl);
}
h1 {
  font-size: var(--font-size-xxl);
  color: var(--color-neutral);
  text-transform: uppercase;
}
h2 {
  font-size: var(--font-size-xl);
  font-weight: 800;
}
h3 {
  font-size: var(--font-size-l);
}
h4 {
  font-size: var(--font-size-m);
}
p.txt-xs {
  font-size: var(--font-size-xs);
}
span.subtitle {
  font-size: var(--font-size-subtitle);
  font-weight: 300;
}
hr.left {
  margin-left: 0;
}
h1::after{
  position: absolute;
  content: '';
  border-bottom: 2px solid;
  bottom: -0.778rem;
  left: 50%;
  transform: translateX(-50%);
  color: #DC0000;
  width: 268px;
}
li::marker {
  font-size: 0.7rem;
}
@media all and (min-width: 1000px) {
  h1::after{
    width: 438px;
  }
}


/**
 * Colors
 */
.color-prim {
  color: var(--color-primary);
}
.color-prim-grad {
  color: var(--color-primary-grad);
}
.color-second {
  color: var(--color-secondary);
}
.bg-prim {
  color: var(--color-primary);
}
.prim {
  color: var(--color-primary);
}
.bg-brown {
  background-color: var(--color-tertiary);
}