@import url("../fonts/fonts.css");
:root {
  --brand1: #34547d;
  --brand2: #8d8159;
  --brand3: #a13767;
  --brand4: #f49b2e;
  --brand5: #383e42;
  --brandcontrast: #ffffff;
  --textlink: #2f5e9a;
  --panel: #eef1f2;
  --page: #ffffff;
  --body: #222222;
  --bodyfont: "Silka";
  --bodyweight: 300;
  --headingfont: "P22Mackinac";
  --headingweight: 400;
  --subheadingfont: "Silka";
  --subheadingweight: 600;
  --pulloutfont:"Silka";
  --pulloutweight: 400;
  --menufont: "P22Mackinac";
  --menuweight: 400;
  --buttonfont: "Silka";
  --buttonweight: 500;
  --linkfont: "Silka";
  --linkweight: 500;
  --iconfont: "antisocial";
  --bodysize: 16px;
  --basesize: 1em;
  --menusize: 1em;
  --contentwidth: 960px;
  --contentpadding: 8em;
  --boxpadding: 3em;
}

@-ms-viewport {
  width: device-width;
}
*, *:before, *:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

a, a:visited {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  text-decoration: none;
}

a, a img, textarea:focus, input:focus, :focus {
  outline: none;
}

input, textarea, button {
  border: none;
  outline: none;
}

a:hover, input[type=submit]:hover, input[type=button]:hover, button:hover, video {
  cursor: pointer;
}

input[type=submit], input[type=button], input[type=search], input[type=text], input[type=password], textarea {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

img, video {
  display: block;
  border: 0;
  max-width: 100%;
}

header, section, footer, aside, nav, main, article, figure {
  display: block;
}

::-moz-selection {
  background-color: rgba(0, 0, 0, 0.1);
}

::-moz-selection, ::selection {
  background-color: rgba(0, 0, 0, 0.1);
}

object {
  display: block;
}

h1, h2, h3, h4, h5, h6, p, ul, ol {
  margin-top: 0;
  position: relative;
}

h1, h2, h3 {
  display: block;
  margin-bottom: 0.4em;
  font-family: var(--headingfont);
  font-weight: var(--headingweight);
}

h4, h5, h6 {
  display: block;
  margin-bottom: 0.8em;
  font-family: var(--subheadingfont);
  font-weight: var(--subheadingweight);
}

h1 {
  font-size: 3.2em;
  font-family: var(--subheadingfont);
}

h2 {
  font-size: 2.6em;
}

h3 {
  font-size: 2.2em;
}

h4 {
  font-size: 1.8em;
}

h5 {
  font-size: 1.5em;
}

p, ul, ol {
  font-size: 1.4em;
}

ul, ol {
  margin-bottom: 1em;
  padding-top: 0.5em;
  padding-left: 1.5em;
  line-height: 1.5;
}

li {
  margin-bottom: 0.8em;
}

input, textarea {
  font-size: 1.6em;
  font-family: var(--bodyfont);
  font-weight: var(--bodyweight);
}

button, a.button {
  font-size: 1.6em;
  font-family: var(--buttonfont);
  font-weight: var(--buttonweight);
  text-transform: uppercase;
  background-color: var(--brand1);
  color: var(--brandcontrast);
  padding: 0.6em 0.8em;
}

strong {
  font-weight: 500;
}

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
}

html {
  font-size: var(--bodysize);
}

body {
  font-size: 1em;
  font-family: var(--bodyfont);
  font-weight: var(--bodyweight);
  line-height: 1.4;
  background-color: var(--page);
  color: var(--brand5);
  overflow-x: hidden;
}
body > div {
  width: 100%;
  margin: 0 auto;
}
body > div:first-of-type {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100%;
}

header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  padding: 4.7em 1em 1.6em 1em;
  background-image: url("../assets/logo-acteon_white.svg");
  background-repeat: no-repeat;
  background-position: center 2.5em;
  background-size: 6em auto;
  font-size: var(--basesize);
  background-color: var(--brand1);
}
header h1 {
  color: var(--brandcontrast);
  margin-bottom: 0;
}

main {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: block;
  position: relative;
  font-size: var(--basesize);
  width: 100%;
  overflow-x: hidden;
}
main > div > div {
  width: 100%;
  max-width: var(--contentwidth);
  margin: 0 auto;
}

footer {
  display: block;
  position: relative;
  padding: 3em 0;
  line-height: 1.4;
  font-size: var(--basesize);
  background-color: var(--brand5);
  color: var(--brandcontrast);
}
footer img#footerlogo {
  width: 9em;
}
footer > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  max-width: var(--contentwidth);
  margin: 0 auto;
  padding: 0;
  gap: 3em;
}
footer p {
  font-size: 1.4em;
  margin: 0;
}
footer a {
  color: var(--brandcontrast);
}

a {
  color: var(--textlink);
}

p a, li a {
  font-weight: var(--linkweight);
}

a.link, span.link, h6.link {
  font-family: var(--linkfont);
  font-weight: var(--linkweight);
  color: var(--body);
  font-size: 1.2em;
  text-transform: uppercase;
}
a.link:after, span.link:after, h6.link:after {
  content: ">";
  font-family: var(--iconfon);
  font-weight: 400;
  color: var(--brand4);
  margin-left: 0.5em;
}
a.link.contrast:after, span.link.contrast:after, h6.link.contrast:after {
  color: var(--brand5);
}

main > div:not([id]) p a {
  font-weight: var(--linkweight);
}

div.brand1, button.brand1, a.button.brand1 {
  background-color: var(--brand1);
  color: var(--brandcontrast);
}
div.brand1 a, button.brand1 a, a.button.brand1 a {
  color: var(--brandcontrast);
}
div.brand1 a.button, button.brand1 a.button, a.button.brand1 a.button {
  display: table;
}

h1.brand1, h2.brand1, h3.brand1, h4.brand1, h5.brand1, h5.brand1 {
  color: var(--brand1);
}

div.brand2, button.brand2, a.button.brand2 {
  background-color: var(--brand2);
  color: var(--brandcontrast);
}
div.brand2 a, button.brand2 a, a.button.brand2 a {
  color: var(--brandcontrast);
}
div.brand2 a.button, button.brand2 a.button, a.button.brand2 a.button {
  display: table;
}

h1.brand2, h2.brand2, h3.brand2, h4.brand2, h5.brand2, h5.brand2 {
  color: var(--brand2);
}

div.brand3, button.brand3, a.button.brand3 {
  background-color: var(--brand3);
  color: var(--brandcontrast);
}
div.brand3 a, button.brand3 a, a.button.brand3 a {
  color: var(--brandcontrast);
}
div.brand3 a.button, button.brand3 a.button, a.button.brand3 a.button {
  display: inline-block;
}

h1.brand3, h2.brand3, h3.brand3, h4.brand3, h5.brand3, h5.brand3 {
  color: var(--brand3);
}

div.brand4, button.brand4, a.button.brand4 {
  background-color: var(--brand4);
  color: var(--brandcontrast);
}
div.brand4 a, button.brand4 a, a.button.brand4 a {
  color: var(--brandcontrast);
}
div.brand4 a.button, button.brand4 a.button, a.button.brand4 a.button {
  display: inline-block;
}

h1.brand4, h2.brand4, h3.brand4, h4.brand4, h5.brand4, h5.brand4 {
  color: var(--brand4);
}

div.brand5, button.brand5, a.button.brand5 {
  background-color: var(--brand5);
  color: var(--brandcontrast);
}
div.brand5 a, button.brand5 a, a.button.brand5 a {
  color: var(--brandcontrast);
}
div.brand5 a.button, button.brand5 a.button, a.button.brand5 a.button {
  display: inline-block;
}

h1.brand5, h2.brand5, h3.brand5, h4.brand5, h5.brand5, h5.brand5 {
  color: var(--brand5);
}

div.secondary, button.secondary, a.button.secondary {
  background-color: var(--panel);
  color: var(--body);
}
div.secondary a, button.secondary a, a.button.secondary a {
  color: var(--brand1);
}
div.secondary a.button, button.secondary a.button, a.button.secondary a.button {
  display: table;
}

h1.secondary, h2.secondary, h3.secondary, h4.secondary, h5.secondary, h5.secondary {
  color: var(--brand1);
}

form input[type=checkbox] {
  position: absolute;
  visibility: hidden;
  opacity: 0;
}
form input[type=checkbox]:checked + .checkmark > div {
  background-color: var(--brand1);
}
form .checkitem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 1em 0 0.3em 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
form .checkmark {
  width: 1.5em;
  height: 1.5em;
  background-color: var(--brandcontrast);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
form .checkmark > div {
  width: 100%;
  height: 100%;
}
form .check-option-text {
  margin-left: 0.5em;
}
form input.invalid {
  border-left: 6px solid #ec0000;
}

div.error.show {
  background-color: #ec0000;
  color: #ffffff;
  padding: 0.5em 0.7em;
  margin-bottom: 2em;
}
div.error.show p {
  margin-bottom: 0;
}

p.socialicons {
  line-height: 1;
}
p.socialicons a {
  font-family: var(--iconfont);
  font-size: 2.5em;
  margin-right: 0.4em;
}

.videobanner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: var(--brand5);
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}
.videobanner > div {
  width: auto;
  max-width: none;
}
.videobanner video {
  height: auto;
  max-height: 60em;
  width: auto;
  max-width: 100%;
  z-index: 1;
}
.videobanner .playhead {
  width: 8em;
  height: 8em;
}
.videobanner p.audionote {
  display: block;
  position: absolute;
  z-index: 9;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 0.3em 0.8em;
  font-size: 14px;
}

.playhead {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 4em;
  height: 4em;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M9 7l24 13L9 33V7z' fill='%23fff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 56% center;
  background-size: 50%;
  z-index: 10;
}

.linkstrip {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 3em 0;
  margin-bottom: 4rem;
}
.linkstrip > div {
  position: relative;
  width: 33.3333%;
  padding: 0 0 0.7em 0;
  margin: 0 3.2em;
}
.linkstrip > div p {
  font-size: 1.15em;
}
.linkstrip > div a {
  display: block;
  padding-bottom: 1em;
  font-size: 1.8em;
}

.quicklinkstrip > div {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[4];
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  padding: 2.8em 3em 3.4em 3em;
  margin-bottom: 4rem;
}
.quicklinkstrip > div h2 {
  -ms-grid-column-span: 4;
  grid-column: span 4;
  margin-bottom: 0.8em;
}
.quicklinkstrip > div a {
  font-size: 1.6em;
  text-transform: none;
}

.quotestrip > div, .singlequote > div, .callstrip > div {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  max-width: var(--contentwidth);
  text-align: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 2em;
}
.quotestrip h3, .singlequote h3, .callstrip h3 {
  margin-bottom: 0;
}

.singlequote {
  height: 18em;
  position: relative;
  overflow: hidden;
}
.singlequote > div {
  position: relative;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 3em 3em 2.4em 3em;
}
.singlequote h3 {
  font-size: 3.2em;
  margin-bottom: 0.2em;
  color: #666666;
  padding: 0 3em;
}
.singlequote p {
  margin-bottom: 0;
  font-size: 1.4em;
  font-weight: 400;
}
.singlequote.brand1 h3 {
  color: var(--brandcontrast);
}
.singlequote.wide h3 {
  padding: 0;
}
.singlequote.slim h3 {
  padding: 0 6em;
}

.quotestrip {
  height: 18em;
  position: relative;
  overflow: hidden;
}
.quotestrip > div {
  position: absolute;
  height: 100%;
  top: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 3em 3em 2.4em 3em;
}
.quotestrip > div:not(:only-child) {
  -webkit-animation: quotecarousel 10s ease-in-out forwards infinite;
          animation: quotecarousel 10s ease-in-out forwards infinite;
}
.quotestrip > div:not(:only-child):nth-child(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.quotestrip > div:not(:only-child):nth-child(2) {
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}
.quotestrip h3 {
  font-size: 2.4em;
  margin-bottom: 0.2em;
  color: #666666;
  padding: 0 0.5em;
}
.quotestrip p {
  margin-bottom: 0;
  font-size: 1.4em;
  font-weight: 400;
}
.quotestrip.brand1 h3 {
  color: var(--brandcontrast);
}
.quotestrip.wide h3 {
  padding: 0;
}
.quotestrip.slim h3 {
  padding: 0 6em;
}

@-webkit-keyframes quotecarousel {
  0% {
    top: 100%;
  }
  2% {
    top: 0%;
  }
  49% {
    top: 0%;
  }
  51% {
    top: -100%;
  }
  100% {
    top: -100%;
  }
}

@keyframes quotecarousel {
  0% {
    top: 100%;
  }
  2% {
    top: 0%;
  }
  49% {
    top: 0%;
  }
  51% {
    top: -100%;
  }
  100% {
    top: -100%;
  }
}
.textblock {
  padding: 4rem 3rem;
}
.textblock h5 {
  margin: 2em 0 0.5em 0;
}
.textblock ul + h5 {
  margin-top: 3em;
}

.imageblock {
  padding: 3rem 3rem 2.5rem 3rem;
}

div.iconstrip {
  padding: 3em 0 7em 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-top: 12rem;
}
div.iconstrip h2 {
  text-align: center;
  margin-bottom: 0.4em;
}
div.iconstrip > div {
  padding: 2rem 3rem 3rem 3rem;
  width: 100rem;
  margin: 0 auto;
}
div.iconstrip > div > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
div.iconstrip a {
  text-align: center;
  font-size: 1.4em;
  margin: 0;
  font-weight: 500;
  color: var(--body);
}
div.iconstrip a img {
  display: block;
  height: 6em;
  margin: 1em auto 0.5em auto;
}
div.iconstrip a:hover {
  color: var(--brand4);
}

div.tabular {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 2em auto;
  grid-template-columns: auto auto;
  gap: 2em;
}
div.tabular p {
  margin-bottom: 0;
}

div.buttongroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 3em;
  margin-bottom: 5em;
}
div.buttongroup > a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  padding: 0.6em 3em;
  font-size: 1.4em;
  font-weight: var(--buttonweight);
  background-color: var(--brand4);
  color: var(--body);
}

@media only screen and (max-width: 1000px) {
  body {
    font-size: 1.6vw;
  }
}
@media only screen and (max-width: 540px) {
  body {
    font-size: 2vw;
  }
  .textblock {
    padding: 1.5rem;
  }
  .videobanner p.audionote {
    font-size: 10px;
  }
  .quotestrip h3 {
    font-size: 2.6em;
    padding: 0;
  }
}
/*# sourceMappingURL=layout.css.map */