@import url(_bootstrap-reset.css);
@import url("https://fonts.googleapis.com/css?family=Nunito+Sans:200,400,700&display=swap");
menu {
  padding-inline-start: 0; }

/* --- FONT --- */
@font-face {
  font-family: "Nunito Sans";
  src: url("../assets/QuanticonsBold/QuanticonsBold.woff") format("woff"), url("../assets/QuanticonsBold/QuanticonsBold.ttf") format("truetype"), url("../assets/QuanticonsBold/QuanticonsBold.svg#QuanticonsBold") format("svg");
  font-weight: 400;
  font-style: normal;
  unicode-range: U+F1F4-F21B; }
@font-face {
  font-family: "Nunito Sans";
  src: url("../assets/QuanticonsBold/QuanticonsBold.woff") format("woff"), url("../assets/QuanticonsBold/QuanticonsBold.ttf") format("truetype"), url("../assets/QuanticonsBold/QuanticonsBold.svg#QuanticonsBold") format("svg");
  font-weight: 700;
  font-style: normal;
  unicode-range: U+F1F4-F21B; }
/* --- VARIABLES --- */
/* --- MIXIN --- */
/* --- LAYOUT --- */
/*-- by Muxsan & Maarten van der Velde, march 2020 */
@media (max-width: 70rem) {
  html {
    font-size: 14px; } }

body {
  font-family: "Nunito Sans", sans-serif;
  padding-top: 4rem; }
  @media (max-width: 40rem) {
    body {
      padding-top: 8rem; } }

#menu-border {
  height: 0.25rem;
  overflow: hidden; }
  @media (max-width: 40rem) {
    #menu-border {
      position: relative;
      top: -1px; } }

#menu-border-background {
  height: 8rem;
  background: url(../assets/radii_groen.svg);
  background-size: cover;
  background-position: center; }
  @media (max-width: 40rem) {
    #menu-border-background {
      height: 4rem; } }
  #page-index #menu-border-background {
    height: 25rem; }

#hero {
  padding-top: 0;
  height: 8rem;
  z-index: 100; }
  @media (max-width: 40rem) {
    #hero {
      height: 4rem; } }
  #page-index #hero {
    height: 25rem; }

#hero-content {
  padding: 2rem 0;
  display: table-cell;
  vertical-align: middle; }
  @media (max-width: 40rem) {
    #hero-content {
      padding: 1em 0; } }
  #page-index #hero-content {
    padding: 4em 0; }
    @media (max-width: 40rem) {
      #page-index #hero-content {
        padding: 1em 0; } }
  #hero-content h1 {
    line-height: 1em; }
    @media (max-width: 40rem) {
      #hero-content h1 {
        margin-top: 0;
        font-size: 6.5vw; } }

section {
  padding-top: 2rem;
  padding-bottom: 2rem; }

.column {
  width: 70rem;
  max-width: 100%;
  overflow: hidden;
  margin: 0 auto 0 auto;
  padding: 0; }
  @media (max-width: 70rem) {
    .column {
      padding: 0 1rem; } }

.section-footer {
  float: left;
  width: 75%; }
  @media (max-width: 40rem) {
    .section-footer {
      width: 100%; } }
  .section-footer + .more {
    width: 25%;
    display: inline-block;
    padding: 0; }
    @media (max-width: 40rem) {
      .section-footer + .more {
        width: 100%;
        margin: 0; } }

#pagemenu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4rem;
  line-height: 4rem;
  z-index: 1000; }
  @media (max-width: 40rem) {
    #pagemenu {
      height: 8rem; } }
  #pagemenu #logo {
    float: left;
    height: 4rem;
    overflow: hidden; }
    @media (max-width: 40rem) {
      #pagemenu #logo {
        text-align: center;
        width: 100%; } }
  #pagemenu #logo-pic {
    height: 3rem;
    vertical-align: middle; }
  #pagemenu ul {
    list-style: none;
    color: white;
    text-align: right;
    margin-bottom: 0;
    height: 4rem;
    overflow: hidden; }
    @media (max-width: 40rem) {
      #pagemenu ul {
        display: table;
        width: 100vw;
        height: 4rem;
        margin: 0 -1rem;
        padding: 0; } }
  #pagemenu li {
    display: inline-block;
    padding: 0 0.2em;
    line-height: 4rem;
    color: gray; }
    #pagemenu li a {
      color: black; }
    @media (max-width: 40rem) {
      #pagemenu li {
        display: table-cell;
        text-align: center;
        padding: 0 0.1em; }
        #pagemenu li a {
          display: inline-block; } }
  #pagemenu li:last-child {
    padding-right: 0; }
  #pagemenu #logo-text {
    display: none; }

:target::before {
  content: "";
  display: block;
  height: 60px;
  /* fixed header height*/
  margin: -60px 0 0;
  /* negative fixed header height */ }

#blog article {
  display: inline-block;
  width: 48%;
  margin-right: 3.3%; }
  #blog article:last-child {
    margin-right: 0; }
  @media (max-width: 40rem) {
    #blog article {
      width: 100%;
      margin-right: 0; } }

.blog-date {
  margin-bottom: -2rem;
  font-size: 1rem; }

#content {
  margin-top: 2rem;
  overflow: visible;
  display: flex;
  min-height: calc(100vh - 12rem - 18rem ); }
  @media (max-width: 40rem) {
    #content {
      display: block; } }
  #content h1 {
    margin-top: 0em;
    margin-bottom: 1em; }
  #content h2:first-child {
    margin-top: 0; }
  #content menu {
    flex: 25%; }
    @media (max-width: 40rem) {
      #content menu {
        width: 100%;
        float: none; } }
    #content menu > ul {
      padding-left: 0; }
    #content menu ul {
      list-style: none; }
    #content menu a:active {
      color: gray !important; }
  #content main {
    flex: 75%; }
    @media (max-width: 40rem) {
      #content main {
        width: 100%;
        float: none; } }

/* --- TYPOGRAPHY -- */
h1 {
  font-size: 3.5rem; }
  @media (max-width: 40rem) {
    h1 {
      margin-top: 3.5rem;
      font-size: 2rem; } }
  #page-index h1 {
    font-size: 2.5rem; }

h1,
h2 {
  font-weight: bold; }

h2 {
  font-size: 2rem;
  font-weight: 200;
  margin: 0 0 1em 0; }
  @media (max-width: 40rem) {
    h2 {
      margin-top: 0;
      margin-bottom: 1em; } }

h3 {
  font-weight: 800;
  color: #444; }

a {
  color: #00968c; }
  a i {
    display: inline-block;
    width: 1em;
    background-image: url("../assets/chevron-right.svg");
    background-size: 1.3em; }

#content a {
  color: #29ABE2;
  font-weight: bolder; }
#content img {
  max-width: 100%; }
#content h2, #content h3 {
  margin: 0.8333em 0; }
#content h2 {
  font-weight: 700;
  font-size: 2.15rem;
  margin-bottom: 0.5em;
  color: #000; }
#content h3 {
  font-size: 1.5rem;
  color: #000; }
#content td {
  padding: 0; }
#content table {
  background-color: white;
  width: 100%;
  font-size: 90%;
  margin-bottom: 2em;
  text-align: center;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-left: 5px solid #ffffff;
  border-right: 5px solid #ffffff; }
#content td, #content th {
  vertical-align: top; }
#content tr {
  transition: background-color 300ms;
  cursor: pointer;
  border-bottom: 1px solid transparent; }
  #content tr p {
    margin: 0;
    line-height: 1.6em; }
  #content tr:hover {
    border-bottom: 1px solid #F47721; }
  #content tr.highlight {
    background: #fcd6bc; }
  #content tr.highlight:nth-child(even) {
    background: #fde4d3; }

#footer .column > div {
  width: 33%;
  float: left; }

/* --- THEMING --- */
body {
  background-color: #f6f6f6; }

#logo .battery {
  fill: black;
  transition: fill 250ms; }
#logo .text {
  fill: white; }
#logo:hover .battery {
  fill: teal; }

.more {
  text-align: right; }

.more-footer {
  text-align: right;
  margin: 0; }
  @media (max-width: 40rem) {
    .more-footer {
      text-align: center; } }
  .more-footer a {
    background-color: white;
    border: 1px solid #00968c;
    color: #00968c;
    padding: 0.25em 1em;
    border-radius: 4px;
    display: inline-block;
    text-align: center;
    margin: 1.5em 0; }

#pagemenu {
  background-color: white; }
  #pagemenu a {
    font-size: 1.25rem;
    font-weight: 400;
    color: #555; }
    @media (max-width: 40rem) {
      #pagemenu a {
        font-size: 3.5vw; } }

#hero {
  color: white;
  background-image: url("../assets/radii_groen.svg");
  background-size: cover;
  background-position: center;
  font-size: 130%; }
  @media (max-width: 40rem) {
    #hero {
      font-size: 1.2em; } }
  #hero p {
    margin-bottom: 2rem; }
  #hero .cta {
    padding: 0.3em 1em;
    border-radius: 0.5em;
    font-size: 1.5rem;
    background-color: white;
    color: #00968c;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 300ms; }

#about {
  background-color: white; }
  #about .column {
    text-align: justify-all; }
  #about #about-content {
    width: 75%;
    float: left; }
  #about #about-more {
    float: right;
    width: 25%;
    vertical-align: top; }
    @media (max-width: 40rem) {
      #about #about-more {
        width: 100%; } }

#products-content {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 0 10px; }
  #products-content section {
    flex: 1;
    min-width: 20rem;
    margin: 1%;
    font-size: 1.1rem;
    padding: 1rem;
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 4px 0; }
    #products-content section:first-child {
      margin-left: 0; }
    #products-content section:last-child {
      margin-right: 0; }
    @media (max-width: 70rem) {
      #products-content section {
        width: 100%;
        margin: 0;
        margin-bottom: 2rem;
        font-size: 1.5rem; } }

#products img {
  width: 100%; }
#products .image-wrapper {
  height: 19em; }
  @media (min-width: 40rem) and (max-width: 70rem) {
    #products .image-wrapper {
      float: left;
      width: 20em;
      height: 20em;
      max-width: 50%;
      margin-right: 2em; } }
  @media (max-width: 40rem) {
    #products .image-wrapper {
      width: 80%;
      margin-left: 10%;
      margin-right: 10%;
      height: initial; } }
#products h3 {
  line-height: 1.5;
  height: 1.5em;
  padding-bottom: 0;
  overflow: hidden; }
#products .image-wrapper {
  display: inline-block;
  overflow: hidden; }
#products .description {
  height: 3em;
  overflow: hidden;
  text-overflow: ellipsis; }

.tweet + .tweet + .tweet + .tweet + .tweet {
  display: none; }

.tweet {
  display: block;
  float: left;
  width: 25%;
  font-size: 0.9rem;
  padding: 0.67%; }
  @media (max-width: 40rem) {
    .tweet {
      width: 100%; } }
  .tweet:first-child {
    padding-left: 0; }
  .tweet:last-child {
    padding-right: 0; }
  .tweet header {
    margin-bottom: 0.5rem; }
    .tweet header img {
      height: 3rem;
      border-radius: 3rem;
      margin-right: 0.5em; }
  .tweet .tweet-author-name-container {
    display: inline-block;
    width: 10em;
    line-height: 1.2em;
    vertical-align: top; }
    .tweet .tweet-author-name-container span {
      display: block;
      width: 100%; }
    .tweet .tweet-author-name-container .twitter-author-name {
      font-size: 1rem;
      font-weight: bolder;
      text-transform: capitalize; }
    .tweet .tweet-author-name-container .twitter-author-screenname {
      color: #555555; }
  .tweet .icon-twitter {
    vertical-align: top;
    height: 1.25em;
    width: 1.25em;
    display: inline-block;
    background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h72v72H0z%22%2F%3E%3Cpath%20class%3D%22icon%22%20fill%3D%22%231da1f2%22%20d%3D%22M68.812%2015.14c-2.348%201.04-4.87%201.744-7.52%202.06%202.704-1.62%204.78-4.186%205.757-7.243-2.53%201.5-5.33%202.592-8.314%203.176C56.35%2010.59%2052.948%209%2049.182%209c-7.23%200-13.092%205.86-13.092%2013.093%200%201.026.118%202.02.338%202.98C25.543%2024.527%2015.9%2019.318%209.44%2011.396c-1.125%201.936-1.77%204.184-1.77%206.58%200%204.543%202.312%208.552%205.824%2010.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163%200%206.345%204.513%2011.638%2010.504%2012.84-1.1.298-2.256.457-3.45.457-.845%200-1.666-.078-2.464-.23%201.667%205.2%206.5%208.985%2012.23%209.09-4.482%203.51-10.13%205.605-16.26%205.605-1.055%200-2.096-.06-3.122-.184%205.794%203.717%2012.676%205.882%2020.067%205.882%2024.083%200%2037.25-19.95%2037.25-37.25%200-.565-.013-1.133-.038-1.693%202.558-1.847%204.778-4.15%206.532-6.774z%22%2F%3E%3C%2Fsvg%3E); }
  .tweet .tweet-info {
    color: #888888; }
  .tweet a {
    color: #000000; }
    .tweet a.link {
      font-weight: bolder;
      color: #29ABE2; }

#blog {
  background-color: white; }
  #blog article {
    font-size: 1.1rem;
    margin-bottom: 1em; }
  #blog #blog-more {
    border-top: 1px solid #888;
    padding-top: 2em;
    margin-top: 1em; }

#order {
  background-color: white; }
  #order #order-content {
    width: 75%;
    float: left; }
  #order #order-more {
    float: right;
    width: 25%;
    vertical-align: top; }

#footer {
  background-color: #888890;
  color: #ddd;
  font-size: 1rem; }
  @media (max-width: 40rem) {
    #footer .column > div {
      width: 100%; } }
  #footer h3 {
    font-size: 1rem;
    color: white;
    font-weight: bolder;
    margin-top: 1rem;
    margin-bottom: 0; }
  #footer a {
    color: #ddd;
    text-decoration: none;
    border-bottom: 1px dotted white; }
  #footer .follow {
    text-align: right; }
    @media (max-width: 40rem) {
      #footer .follow {
        text-align: center; } }
  #footer .follow a {
    border: none; }
    #footer .follow a:hover {
      opacity: 0.8; }
  #footer img {
    width: 3rem; }

#content menu {
  padding-right: 1rem; }
  #content menu a {
    font-weight: normal; }
  #content menu li {
    margin-bottom: 1em; }

#page-order #content section {
  padding-top: 0; }

#modal {
  display: none; }

#modal-background {
  background-color: rgba(255, 255, 255, 0.5);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center; }

#modal-window {
  background-color: white;
  border: 1px solid #00968c;
  padding: 1em;
  padding-top: 3em;
  width: 40em;
  height: 25em;
  position: relative; }
  #modal-window button {
    border: 1px solid #00968c;
    padding: 0.3em 1em;
    border-radius: 0.5em;
    font-size: 1rem;
    background-color: white;
    color: #00968c;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 300ms; }

#modal-close {
  position: absolute;
  cursor: pointer;
  right: 1em;
  top: 1em;
  color: #00968c; }

/* FORM STYLING */
#orderform ul,
#contactform ul {
  display: table;
  padding-left: 0;
  width: 100%; }
  @media (max-width: 40rem) {
    #orderform ul,
    #contactform ul {
      display: block; } }
#orderform li,
#contactform li {
  display: table-row; }
  @media (max-width: 40rem) {
    #orderform li,
    #contactform li {
      display: block; } }
  #orderform li:hover,
  #contactform li:hover {
    background-color: #efefef;
    position: relative; }
#orderform label,
#contactform label {
  display: table-cell;
  text-align: right;
  padding-right: 1em;
  width: 10em;
  vertical-align: top;
  line-height: 1.8em;
  margin-bottom: 0.5em; }
  @media (max-width: 40rem) {
    #orderform label,
    #contactform label {
      display: block;
      width: auto;
      font-size: 0.8rem;
      margin-bottom: 0; } }
  @media (max-width: 40rem) {
    #orderform label,
    #contactform label {
      display: block; }
      #orderform label[for='form-address2'], #orderform label[for='form-address3'],
      #contactform label[for='form-address2'],
      #contactform label[for='form-address3'] {
        display: none; } }
#orderform input,
#orderform textarea,
#contactform input,
#contactform textarea {
  display: table-cell;
  height: 1.8em;
  width: 100%;
  line-height: 1.8em;
  margin-bottom: 0.25em;
  border: 1px solid #666;
  padding-left: 0.5em;
  font-weight: 800; }
  #orderform input::placeholder,
  #orderform textarea::placeholder,
  #contactform input::placeholder,
  #contactform textarea::placeholder {
    color: #888;
    font-weight: 400; }
  #orderform input[readonly],
  #orderform textarea[readonly],
  #contactform input[readonly],
  #contactform textarea[readonly] {
    background-color: transparent;
    border: none;
    color: #29ABE2; }
  #orderform input:hover,
  #orderform textarea:hover,
  #contactform input:hover,
  #contactform textarea:hover {
    background-color: white;
    border-color: black; }
  #orderform input:focus,
  #orderform textarea:focus,
  #contactform input:focus,
  #contactform textarea:focus {
    outline: 2px solid #29ABE2;
    border: none; }
#orderform .form-suffix,
#contactform .form-suffix {
  display: table-cell;
  width: 0.5em;
  text-align: left;
  vertical-align: top; }
  @media (max-width: 40rem) {
    #orderform .form-suffix,
    #contactform .form-suffix {
      display: none;
      position: absolute;
      right: 20px; } }
#orderform textarea,
#contactform textarea {
  height: 10em; }
#orderform button[type='submit'],
#contactform button[type='submit'] {
  margin-top: 1em;
  padding: 0.3em 1em;
  border-radius: 0.5em;
  font-size: 1.2rem;
  background-color: white;
  color: #00968c;
  font-weight: bolder;
  cursor: pointer;
  transition: background-color 300ms;
  border: 1px solid #00968c; }
  #orderform button[type='submit']:hover,
  #contactform button[type='submit']:hover {
    color: white;
    background-color: #00968c; }
#orderform button[disabled],
#contactform button[disabled] {
  color: silver;
  border: none; }
#orderform #note,
#contactform #note {
  font-size: 1rem;
  margin-top: 1em; }

/*# sourceMappingURL=style.css.map */