@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

body {
   background-color: #ece8e1;
   font-size: 16px;
}

header {
   margin: 0;
   padding: 0;
}

#container-header {
   position: absolute;
   top: 0;
   left: 0;
   width: 100vw;
   margin: 0;
   padding: 0;
}

#container-header .row,
#container-header .offset-lg-2,
#container-header .col-lg-8,
#container-header .mb-3 {
   width: 100vw;
   margin: 0;
   padding: 0;
}

#container-header a::after {
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   content: "";
   background-image: url('https://marketing.ticketworks.nl/stlt-resources/atlas/images/atlastheater-logo.svg');
   background-repeat: no-repeat;
   background-size: 300px;
   width: 600px;
   height: 180px;
}

hr {
   display: none;
}

#container-content {
   margin-top: 180px;
}

h1 {
   font-size: 0;
}

h2#page-title,
P,
a,
label,
h4.mb-3 {
   font-family: Roboto;
   color: #3c3c3b;
margin-top: 1rem;
}

.btn-primary,
.btn-success {
   font-family: "overpass-variable", sans-serif;
   font-variation-settings: "wght" 400;
   font-size: 20px;
   color: #FFFFFF;
   background-color: #FF5000;
   border-color: #FF5000;
}

.btn-lg,
.btn-group-lg>.btn {
   padding: 0.5rem 1rem;
   font-size: 18px;
   text-transform: uppercase;
   line-height: 1.5;
   border-radius: 0;
}

input[type="submit"].btn-block,
#buttons .col-sm-12 {
   width: auto;
}

.btn-primary:hover,
.btn-success:hover {
   color: #FFFFFF;
   background-color: #3c3c3b;
   border-color: #3c3c3b;
}

.alert-primary {
   color: #3c3c3b;
   background-color: #FFC7AD;
   border-color: #FFC7AD;
}

a:hover {
   color: #FF5000;
   text-decoration: underline;
}

.alert-danger {
   color: #FF5000;
   font-size: 16px;
   background-color: #FFC7AD;
   border-color: #FFC7AD;
}

.help-block,
.help-block-error {
   color: #ff6658;
   position: relative;
   font-size: 16px;
}

.btn-primary:not(:disabled):not(.disabled):active {
   background-color: #FF5000;
}

.btn-primary:focus,
.btn-primary.focus {
   box-shadow: 0 0 0 0.1rem rgb(0, 66, 81, .4);
}

.btn-success:not(:disabled):not(.disabled):active {
   background-color: #FF5000;
}

.btn-success:focus,
.btn-success.focus {
   box-shadow: 0 0 0 0.1rem rgba(255, 80, 0, 0.4);
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-primary.dropdown-toggle:focus {
   box-shadow: 0 0 0 0.2rem rgba(255, 80, 0, 0.4);
}


.btn-primary:not(:disabled):not(.disabled):active {
   background-color: #FF5000;
}

.btn-primary:focus,
.btn-primary.focus {
   box-shadow: 0 0 0 0.1rem rgb(0, 66, 81, .4);
}

.btn-success:not(:disabled):not(.disabled):active {
   background-color: #FF5000;
}

.btn-success:focus,
.btn-success.focus {
   box-shadow: 0 0 0 0.1rem rgba(255, 102, 88, 0.4);
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-primary.dropdown-toggle:focus {
   box-shadow: 0 0 0 0.2rem rgba(255, 102, 88, 0.4);
}

input[type="submit"].btn-block,
.btn-block {
   display: inline-block;
   width: auto;
}

.custom-control-input:checked~.custom-control-label::before {
   color: #3c3c3b;
   border-color: #ff6658;
   background-color: #ff6658;
}


@media (max-width: 992px) {

   #container-header a::after {
      background-image: url('https://marketing.ticketworks.nl/stlt-resources/atlas/images/atlas-logo-sm.svg');
      background-repeat: no-repeat;
      background-size: 100px;
      width: 100px;
      height: 120px;
   }

   #container-content {
      margin-top: 120px;
   }
}