/*

Title
Headline
Text

Container Default
Container Small

*/

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {

  --color-background: #f7f7f7;
  --color-text: #090909;

  --color-brand: #344254;
  --color-brandInverted: #f7f7f7;

  --color-accent1: #D5DCE6;
  --color-accent2: blue;
  --color-accent3: blue;
  --color-accent4: blue;

  --color-black: #090909;
  --color-white: #f7f7f7;

  --color-gray1: #111;
  --color-gray2: #424242;
  --color-gray3: #999;
  --color-gray4: #eee;
  --color-gray5: #f2f2f2;

  --color-yes: green;
  --color-no: red;

  --text-font: "Montserrat";
  --headline-font: "Montserrat";
  --title-font: "Montserrat";

  /* mobile */
  --text-s-size: 13px;    --text-s-lineHeight: 1.7;
  --text-size: 16px;   --text-lineHeight: 1.7;
  --text-l-size: 22px;    --text-l-lineHeight: 1.7;
  
  --headline-size: 34px;  --headline-lineHeight: 1.05;
  --title-size: 42px;     --title-lineHeight: 1.25;
}

/* desktop */
@media (min-width: 1000px){
  :root {
    --text-s-size: 12px;    --text-s-lineHeight: 1.75;
    --text-size: 16px;      --text-lineHeight: 1.75;
    --text-l-size: 22px;    --text-l-lineHeight: 1.75;

    --headline-size: 60px;  --headline-lineHeight: 1.2;
    --title-size: 55px;     --title-lineHeight: 1.2;
  }
}

/* tv */
@media (min-width: 1500px){
  :root {
    --text-s-size: 20px;    --text-s-lineHeight: 1.8;
    --text-size: 18px;      --text-lineHeight: 1.8;
    --text-l-size: 20px;    --text-l-lineHeight: 1.8;
    
    --headline-size: 60px;  --headline-lineHeight: 0.95;
    --title-size: 24px;     --title-lineHeight: 1.15;
  }
}

body {
  color: var(--color-text);
  background-color: var(--color-background);
  font-family: var(--text-font);
  font-size: var(--text-size);
  line-height: var(--text-lineHeight);
}

.p, p {
  margin-bottom: 20px !important;
}

#main-content ul {
  margin-bottom: 20px;
  list-style: square;
  margin-left: 40px;
}

.text-s, .text-small {
  font-size: var(--text-s-size);
  line-height: var(--text-s-lineHeight);
}

.text-l, .text-large {
  font-size: var(--text-l-size);
  line-height: var(--text-l-lineHeight);
}

/*
.h2, h2, .headline {
  font-family: var(--headline-font);
  font-size: var(--headline-size);
  line-height: var(--headline-lineHeight);
  font-weight: 700;
}
  */

.h1, h1, .title {
  margin-bottom: 20px !important;
  font-family: var(--title-font);
  font-size: var(--title-size);
  line-height: var(--title-lineHeight);
  font-weight: 700;
}

input,
textarea {
  width: 100%;
  background: #eee !important;
  padding: 4px !important;
  border-radius: 4px;
}

textarea {
  min-height: 240px;
}

@media (min-width: 1024px) {
  .media-text-grid[style*="--mt-cols"] {
    grid-template-columns: var(--mt-cols);
  }
  .content-slide-text[style*="--text-max-width"] {
    max-width: var(--text-max-width);
  }
}