@font-face {
  font-family: "libre_franklinthin";
  src: url("https://marketing.ticketworks.nl/stlt-resources/owf/fonts/librefranklin-variablefont_wght-webfont.woff2")
      format("woff2"),
    url("https://marketing.ticketworks.nl/stlt-resources/owf/fonts/librefranklin-variablefont_wght-webfont.woff")
      format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "libre_franklinlight";
  src: url("https://marketing.ticketworks.nl/stlt-resources/owf/fonts/librefranklin-light-webfont.woff2")
      format("woff2"),
    url("https://marketing.ticketworks.nl/stlt-resources/owf/fonts/librefranklin-light-webfont.woff")
      format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "libre_franklinextralight";
  src: url("https://marketing.ticketworks.nl/stlt-resources/owf/fonts/librefranklin-extralight-webfont.woff2")
      format("woff2"),
    url("https://marketing.ticketworks.nl/stlt-resources/owf/fonts/librefranklin-extralight-webfont.woff")
      format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "libre_franklinbold";
  src: url("https://marketing.ticketworks.nl/stlt-resources/owf/fonts/librefranklin-bold-webfont.woff2")
      format("woff2"),
    url("https://marketing.ticketworks.nl/stlt-resources/owf/fonts/librefranklin-bold-webfont.woff")
      format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "libre_franklinregular";
  src: url("https://marketing.ticketworks.nl/stlt-resources/owf/fonts/librefranklin-regular-webfont.woff2")
      format("woff2"),
    url("https://marketing.ticketworks.nl/stlt-resources/owf/fonts/librefranklin-regular-webfont.woff")
      format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "libre_franklinmedium";
  src: url("https://marketing.ticketworks.nl/stlt-resources/owf/fonts/librefranklin-medium-webfont.woff2")
      format("woff2"),
    url("https://marketing.ticketworks.nl/stlt-resources/owf/fonts/librefranklin-medium-webfont.woff")
      format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "libre_franklinsemibold";
  src: url("https://marketing.ticketworks.nl/stlt-resources/owf/fonts/librefranklin-semibold-webfont.woff2")
      format("woff2"),
    url("https://marketing.ticketworks.nl/stlt-resources/owf/fonts/librefranklin-semibold-webfont.woff")
      format("woff");
  font-weight: normal;
  font-style: normal;
}


body {
background-color: #FAA21A;
font-family: "libre_franklinregular", Helvetica, Arial, sans-serif;
}

/* All horizontal lines */
hr.mb-4 {
display: none;
}

h1 {
color: #111111;
margin-top: 2rem;
font-family: "libre_franklinbold", Helvetica, Arial, sans-serif;
font-weight: 700;
font-size: 1rem;
margin-bottom: 1rem !important;
}

/* Titel */
h2 {
position: relative;
display: inline-block;
font-size: 3rem;
line-height: 100%;
margin-top: 2rem;
font-family: "libre_franklinbold", Helvetica, Arial, sans-serif;
font-weight: 700;
color: #111111; 
margin-bottom: 2rem;
}

/* Opt-ins en nieuwsbrieven */
h4.mb-3 {
color: #111111;
margin-top: 2rem;
font-family: "libre_franklinbold", Helvetica, Arial, sans-serif;
font-weight: 700;
font-size: 1rem;
margin-bottom: 1rem !important;
}

#container-content h2 {
color: #111111;
margin-top: 2rem;
font-family: "libre_franklinbold", Helvetica, Arial, sans-serif;
font-weight: 700;
font-size: 1rem;
margin-bottom: 1rem;
}

#container-content h2#page-title {
  font-size: 2.5rem;
  }

/* Links */
a {
font-family: "libre_franklinregular", Helvetica, Arial, sans-serif;
color: #FFFFFF;
}

a:hover {
color: #FFFFFF;
}

/* Logo/Afbeelding */
.mx-auto {
height: auto;
width: 16rem;
padding: 3rem;
}

/* Header balk */
#container-header .col-lg-8.offset-lg-2.mb-3 {
margin: 0;
width: 100vw;
height: 22rem;
padding: 0;
line-height: 0;
background-color: #f4f7ee;
background-repeat: no-repeat;
background-position-x: 50%;
background-position-y: 102%;
background-image: url('https://marketing.ticketworks.nl/stlt-resources/owf/images/owf-shape-orange.svg');
background-size: 102%;
}

#container-header .col-lg-8 {
padding: 0;
}

#container-header a {
margin: 0;
width: 100vw;
padding: 0;
position: fixed;
}

#container-header {
width: 100vw;
max-width: 100vw;
margin: 0;
}

/* 'Container' binnen header-balk */
#container-header a {
display: block;
margin: 0 auto;
}

#container-header .row {
display: block;
width: 100vw;
}

#container-content {
padding-bottom: 4rem;
}

#container-footer {
background: none;
}

@media (min-width: 992px) {
#container-header .col-lg-8 {
  max-width: 100vw;
}
}

.mx-auto {
margin-left: 0 !important;
}

/* Buttons */
.btn-success,
.btn-primary {
margin-top: 2rem;
display: inline-block;
padding: 12px 30px;
color: #ffffff;
background-color: #000000;
border: 0;
position: relative;
font-family: "libre_franklinregular", Helvetica, Arial, sans-serif;
font-size: 16px;
border-radius: 40px;
width: auto !important;
display: inline-block;
}

.btn-success:not(:disabled):not(.disabled):active,
.btn-success:focus,
.btn-success:hover,
.btn-primary:hover {
 background-color: #F7C977;
 color: #000000;
}

.btn-primary:not(:disabled):not(.disabled):active, 
.btn-primary:not(:disabled):not(.disabled).active {
 background-color: #F7C977;
 border-color: #F7C977;
 color: #000000;
}

.btn-primary:focus, .btn-primary.focus {
box-shadow: 0 0 0 0.2rem rgba(00, 0, 0, 0.2);
}

/* Form label */
label {
font-family: "libre_franklinregular", Helvetica, Arial, sans-serif;
}

.custom-control-label {
font-family: "libre_franklinregular", Helvetica, Arial, sans-serif;
}
/* Inputs */
.form-control {
border-radius: 0;
border-color: rgb(0, 0, 0, 0);
min-width: 260px;
padding: 11px 15px;
font-size: 16px;
line-height: 24px;
height: 50px;
font-family: "libre_franklinregular", Helvetica, Arial, sans-serif;
color: #111;
background-color: #f5f5f5;
}

.form-control:focus {
background: #f5f5f5;
border-color: #f5f5f5;
outline: none;
box-shadow: none;
}

.lead {
display: none;
}

/* Input e-mail */
.email-address {
background-color: #f5f5f5;
padding: 11px 15px;
line-height: 24px;
height: 50px;
color: #111111;
}

input#emailAddress {
margin-top: -10px;
margin-left: -15px;
width: calc(100% + 30px);
}

/* Checkbox */
.custom-control-input ~ .custom-control-label::before {
border-radius: 5px;
}

.custom-control-input:checked ~ .custom-control-label::before {
color: #ffffff;
border-color: #111111;
background-color: #111111;
border-radius: 0px;
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
border-color: #003B5c;
border-radius: 0;
}

.custom-control-label::after {
background-size: 10px;
}

/* Balk met tekst */
.alert.alert-danger,
.alert.alert-primary {
border-radius: 0;
border: 0;
color: #111111;
border-color: #F7C977;
background: #F7C977;
font-family: "libre_franklinregular", Helvetica, Arial, sans-serif;
border-radius: 12px;
}

.pt-5, .py-5 {
padding-top: 0 !important;
}
.mb-5, .my-5 {
margin-bottom: 0 !important;
}
.mt-5, .my-5 {
margin-top: 0 !important;
}

.col-md-12 {
width: 95%;
}

.description {
font-family: "libre_franklinlight", Helvetica, Arial, sans-serif;
font-size: .875rem;
}

.disclaimer {
font-family: "libre_franklinlight", Helvetica, Arial, sans-serif;
font-size: .875rem;
margin-top: 1rem;
}

@media screen and (max-width: 992px) {
  
  #container-header a {
    position: initial;
  }
}

@media screen and (max-width: 480px) {
/* Logo/Afbeelding */
.mx-auto {
  height: auto;
  width: 8rem;
  padding: 1rem;
}

h2 {
  font-size: 2rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

#container-content h2#page-title {
  font-size: 2rem;
  }

#container-header .col-lg-8.offset-lg-2.mb-3 {
  height: 10rem;
}
}