*
* This will reverse the displayed order of the system so that it runs in the
* opposite order to our source, effectively flipping the system over.
*
*
*
* This will cause the system to fill up from either the centre or the right
* hand side. Default behaviour is to fill up the layout system from the left.
*
* There are plenty more options available to us: explore them below.
*/
/* Default/mandatory classes.
========================================================================== */
/**
* 1. Allows us to use the layout object on any type of element.
* 2. We need to defensively reset any box-model properties.
* 3. Use the negative margin trick for multi-row grids:
* http://csswizardry.com/2011/08/building-better-grid-systems/
*/
.o-layout {
display: block;
/* [1] */
margin: 0;
/* [2] */
padding: 0;
/* [2] */
list-style: none;
/* [1] */
margin-left: -24px;
/* [3] */
font-size: 0; }
/**
* 1. Allows us to manipulate grids vertically, with text-level properties,
* etc.
* 2. Default item alignment is with the tops of each other, like most
* traditional grid/layout systems.
* 3. By default, all layout items are full-width (mobile first).
* 4. Gutters provided by left padding:
* http://csswizardry.com/2011/08/building-better-grid-systems/
*/
.o-layout__item {
display: inline-block;
/* [1] */
vertical-align: top;
/* [2] */
width: 100%;
/* [3] */
padding-left: 24px;
/* [4] */
font-size: 1rem; }
/* Gutter size modifiers.
========================================================================== */
/**
* Tiny gutters between items.
*/
.o-layout--tiny {
margin-left: -8px; }
.o-layout--tiny > .o-layout__item {
padding-left: 8px; }
/**
* Small gutters between items.
*/
.o-layout--small {
margin-left: -24px; }
.o-layout--small > .o-layout__item {
padding-left: 24px; }
/**
* Large gutters between items.
*/
.o-layout--large {
margin-left: -40px; }
.o-layout--large > .o-layout__item {
padding-left: 40px; }
/**
* Huge gutters between items.
*/
.o-layout--huge {
margin-left: -80px; }
.o-layout--huge > .o-layout__item {
padding-left: 80px; }
/**
* No gutters between items.
*/
.o-layout--flush {
margin-left: 0; }
.o-layout--flush > .o-layout__item {
padding-left: 0; }
/* Vertical alignment modifiers.
========================================================================== */
/**
* Align all grid items to the middles of each other.
*
* Input:
*
* 1 2 3 4 5
* 1 2 - 4 5
* 1 2 - 4 5
* - 2 - - 5
* - 2 - - 5
*
* Output:
*
* - 2 - - 5
* 1 2 - 4 5
* 1 2 3 4 5
* 1 2 - 4 5
* - 2 - - 5
*/
.o-layout--middle > .o-layout__item {
vertical-align: middle; }
/**
* Align all grid items to the bottoms of each other.
*
* Input:
*
* 1 2 3 4 5
* 1 2 - 4 5
* 1 2 - 4 5
* - 2 - - 5
* - 2 - - 5
*
* Output:
*
* - 2 - - 5
* - 2 - - 5
* 1 2 - 4 5
* 1 2 - 4 5
* 1 2 3 4 5
*/
.o-layout--bottom > .o-layout__item {
vertical-align: bottom; }
/* Fill order modifiers.
========================================================================== */
/**
* Fill up the layout system from the centre.
*
* Input:
*
* 1 2 3 - -
*
* Output:
*
* - 1 2 3 -
*/
.o-layout--center {
text-align: center; }
.o-layout--center > .o-layout__item {
text-align: left; }
/**
* Fill up the layout system from the right-hand side.
*
* Input:
*
* 1 2 3 - -
*
* Output:
*
* - - 1 2 3
*/
.o-layout--right {
text-align: right; }
.o-layout--right > .o-layout__item {
text-align: left; }
/**
* Reverse the rendered order of the grid system.
*
* Input:
*
* 1 2 3 4 5
*
* Output:
*
* 5 4 3 2 1
*/
.o-layout--reverse {
direction: rtl; }
.o-layout--reverse > .o-layout__item {
direction: ltr;
text-align: left; }
.o-wrapper {
position: relative;
padding-right: 24px;
padding-left: 24px;
margin-right: auto;
margin-left: auto;
max-width: 1920px; }
.o-wrapper:after {
content: "" !important;
display: block !important;
clear: both !important; }
.o-wrapper--indent1 {
padding-right: 8%;
padding-left: 8%; }
.o-wrapper--indent2 {
padding-right: 14%;
padding-left: 14%; }
@media screen and (max-width: 900px) {
.o-wrapper {
padding-left: 8px;
padding-right: 8px; } }
.btn, form #form_save {
color: #FFF;
background: #E20715;
border: 0;
text-transform: uppercase;
transition: background-color .2s ease; }
.btn:not(.btn--white), form #form_save:not(.btn--white) {
font-size: 1.21429rem;
line-height: 1.29412;
padding: 0.71429rem 0.85714rem; }
@media screen and (max-width: 900px) {
.btn:not(.btn--white), form #form_save:not(.btn--white) {
font-size: 1.07143rem;
line-height: 1.46667;
padding: 0.57143rem 0.71429rem; } }
.btn:active, form #form_save:active {
outline: none; }
.btn:hover, form #form_save:hover {
background: #A20C1B;
cursor: pointer; }
.btn.btn--white, form .btn--white#form_save {
color: #FFF;
border: 1px solid #FFF;
background: transparent;
padding: 0.71429rem 0.57143rem; }
@media screen and (max-width: 900px) {
.btn.btn--white, form .btn--white#form_save {
padding: 0.57143rem 0.42857rem; } }
.btn.btn--white:hover, form .btn--white#form_save:hover {
background: #FFF;
color: #E20715; }
.nav ul {
margin: 0;
list-style: none; }
.nav .nav__item {
display: inline-block; }
.nav--pagination {
position: relative;
display: block;
text-align: center;
font-size: 1.21429rem;
line-height: 1.29412;
margin: 1.71429rem 0;
color: #E20715; }
.nav--pagination .nav__item {
display: inline-block;
width: 2.85714rem;
height: 2.85714rem;
padding-top: 0.42857rem; }
.nav--pagination .nav__item a {
display: inline-block;
width: 100%;
height: 100%;
transition: none; }
.nav--pagination .nav__item a.icon {
width: 0.71429rem; }
.nav--pagination .nav__item a:hover {
text-decoration: none;
color: #A20C1B; }
.nav--pagination .nav__item.nav__item--active {
border: 0.14286rem solid #E20715;
border-radius: 50%; }
.nav--pagination .nav__item.nav__item--active a:hover {
cursor: default;
color: #E20715; }
.nav--pagination.nav--pagination--white {
color: #FFF; }
.nav--pagination.nav--pagination--white a {
color: #FFF; }
.nav--pagination.nav--pagination--white a:hover {
color: #FFF;
opacity: .4; }
.nav--pagination.nav--pagination--white .nav__item--active {
border-color: #FFF; }
.nav--pagination.nav--pagination--white .nav__item--active a:hover {
color: #FFF;
opacity: 1; }
.nav--blue-blocks {
display: block; }
.nav--blue-blocks ul {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center; }
.nav--blue-blocks .nav__item {
text-align: center;
margin: 0 1% 4% 1%; }
@media screen and (max-width: 900px) {
.nav--blue-blocks .nav__item {
margin: 0 1% 4% 1%; } }
@media screen and (max-width: 640px) {
.nav--blue-blocks .nav__item {
margin: 0 2% 4% 2%; } }
@media screen and (max-width: 350px) {
.nav--blue-blocks .nav__item {
margin: 0 1% 2% 0; } }
.nav--blue-blocks a {
font-size: 1.57143rem;
line-height: 1;
display: block;
line-height: 1;
width: 10.35714rem;
height: 10.35714rem;
padding: 1.71429rem 0;
background-color: #00C4F3;
color: #FFF;
text-decoration: none;
background-position: center calc(100% - 20px); }
.nav--blue-blocks a:hover {
background-color: #0480A2; }
.nav--tabs {
display: block;
margin-top: -0.42857rem; }
.nav--tabs .nav__item {
position: relative;
display: block;
text-align: left;
margin: 0 0 1.07143rem -0.71429rem; }
.nav--tabs .nav__item a {
font-size: 1rem;
line-height: 1.57143;
display: block;
line-height: 1;
color: #FFF;
text-decoration: none;
background-color: #091B2B;
background-position: right 1.07143rem bottom 1.07143rem;
padding: 1.07143rem;
width: 100%;
min-height: 12.14286rem; }
.nav--tabs .nav__item a:hover {
background-color: #00C4F3; }
.nav--tabs .nav__item h3 {
font-size: 1.57143rem;
line-height: 1;
margin-bottom: 0.71429rem; }
.nav--tabs .nav__item.nav__item--active:after {
right: 100%;
top: 1.64286rem;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-right-color: #00C4F3;
border-width: 0.71429rem;
margin-top: -0.71429rem; }
.nav--tabs .nav__item.nav__item--active a {
background-color: #00C4F3; }
.nav--mobile-tabs {
position: relative; }
.nav--mobile-tabs ul {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-line-pack: stretch;
align-content: stretch;
-ms-flex-align: start;
align-items: flex-start; }
.nav--mobile-tabs .nav__item {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-ms-flex-item-align: auto;
align-self: auto;
background-color: #091B2B;
padding: 0.71429rem;
border-right: 0.14286rem solid #223340; }
.nav--mobile-tabs .nav__item.nav__item--active {
background-color: #00C4F3; }
.nav--mobile-tabs .nav__item a {
display: block;
min-height: 2.85714rem;
background-position: center center;
background-size: contain; }
.icon {
background-repeat: no-repeat;
background-position: 0 0;
-webkit-backface-visibility: hidden; }
.icon__search {
background-image: url(../img/icon__search.svg);
background-position: 0 0.21429rem;
padding-left: 0.71429rem; }
.icon__search--red {
background-image: url(../img/icon__search--red.svg);
background-position: 0 0.21429rem;
padding-left: 0.71429rem; }
.icon__menu {
background-image: url(../img/icon__menu.svg);
background-position: right center; }
.header__nav--primary .nav__item:last-child a:before {
content: "";
display: inline-block;
width: 17px;
height: 12px;
background-image: url(../img/icon__wallet--header.svg);
background-repeat: no-repeat; }
.header__nav--primary .nav__item .dropdown-menu .nav__item:last-child a:before {
display: none; }
.icon__twitter--footer {
background-image: url(../img/icon__twitter--footer.svg); }
.icon__instagram--footer {
background-image: url(../img/icon__instagram--footer.svg); }
.icon__facebook--footer {
background-image: url(../img/icon__facebook--footer.svg); }
.icon__gplus--footer {
background-image: url(../img/icon__gplus--footer.svg); }
.icon__route {
background-image: url(../img/icon__route.svg); }
.icon__park {
background-image: url(../img/icon__park.svg); }
.icon__wallet {
background-image: url(../img/icon__wallet.svg); }
.icon__info {
background-image: url(../img/icon__info.svg); }
.icon__seat {
background-image: url(../img/icon__seat.svg); }
.icon__food {
background-image: url(../img/icon__food.svg); }
.icon__meet {
background-image: url(../img/icon__meet.svg); }
.icon__check {
background-image: url(../img/icon__check.svg); }
.icon__car {
background-image: url(../img/icon__car.svg); }
.icon__bus {
background-image: url(../img/icon__bus.svg); }
.icon__train {
background-image: url(../img/icon__train.svg); }
.icon__taxi {
background-image: url(../img/icon__taxi.svg); }
.icon__bike {
background-image: url(../img/icon__bike.svg); }
.icon__facebook--small {
background-image: url(../img/icon__facebook--small.svg); }
.icon__facebook {
background-image: url(../img/icon__facebook.svg); }
.icon__food_and_drinks {
background-image: url(../img/icon__food_and_drinks.svg); }
.icon__twitter--small {
background-image: url(../img/icon__twitter--small.svg); }
.icon__agenda {
background-image: url(../img/icon__agenda.svg); }
.icon__bestek {
background-image: url(../img/icon__bestek.svg); }
.icon__grafiek {
background-image: url(../img/icon__grafiek.svg); }
.icon__lijst {
background-image: url(../img/icon__lijst.svg); }
.icon__maps {
background-image: url(../img/icon__maps.svg); }
.icon__persoon {
background-image: url(../img/icon__persoon.svg); }
.icon__wegwijzer {
background-image: url(../img/icon__wegwijzer.svg); }
.icon__scroll {
background-image: url(../img/scroll-icon.svg);
width: 44px;
height: 44px;
display: inline-block; }
.icon__prev,
.icon__next {
display: inline-block;
border-right: 0.07143rem solid;
border-bottom: 0.07143rem solid;
width: 0.5rem;
height: 0.5rem;
transform: rotate(-45deg);
vertical-align: middle; }
.icon__prev {
transform: rotate(135deg); }
.agenda-items {
background: #223340;
color: #FFF;
padding-right: 0; }
.agenda-items .o-layout {
margin-left: -1.71429rem; }
@media screen and (max-width: 900px) {
.agenda-items .o-layout {
margin-left: -0.57143rem; } }
.agenda-items .o-layout__item {
position: relative;
padding-top: 25%;
background-size: cover;
overflow: hidden;
background-position: center;
background-repeat: no-repeat; }
@media screen and (max-width: 900px) {
.agenda-items .o-layout__item {
padding-top: 50%; } }
@media screen and (max-width: 640px) {
.agenda-items .o-layout__item {
padding-top: 100%; } }
.agenda-items .agenda-items__content {
background: rgba(34, 51, 64, 0.2) url(../img/bg-fader.png) 0 0 repeat-x;
position: absolute;
z-index: 20;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding-top: 5%;
padding-left: 1.42857rem;
padding-right: 15%;
line-height: 1;
transition: all .3s ease-in-out; }
@media screen and (max-width: 900px) {
.agenda-items .agenda-items__content {
padding-left: 1.07143rem; } }
.agenda-items .agenda-items__content:not(.archive):hover, .agenda-items .agenda-items__content:not(.archive).agenda-items__content--active {
background: rgba(226, 7, 21, 0.8);
text-shadow: none; }
.agenda-items .agenda-items__content:not(.archive):hover .agenda-items__links, .agenda-items .agenda-items__content:not(.archive).agenda-items__content--active .agenda-items__links {
opacity: 1;
transform: translateY(0); }
.agenda-items .agenda-items__month {
display: inline-block;
border-bottom: 0.21429rem solid #FFF;
padding-bottom: 0.57143rem;
margin-bottom: 0.57143rem; }
.agenda-items .agenda-items__title {
font-size: 1.78571rem;
line-height: 1.76;
line-height: 1.2; }
.agenda-items .agenda-items__links {
margin: 0;
list-style: none;
transform: translateY(50%);
transition: all .2s ease-in-out;
opacity: 0; }
.agenda-items .agenda-items__links li {
margin-bottom: 0.57143rem; }
@media screen and (min-width: 900px) and (max-width: 1100px) {
.agenda-items .agenda-items__links li:not(:first-child) {
display: none; } }
.agenda-items .agenda-items__sold-out {
position: absolute;
text-shadow: none;
font-size: 1.07143rem;
bottom: 8%;
right: 5%;
background: url(../img/sold-out--white.svg) 0 0 no-repeat;
width: 5.5rem;
height: 5.57143rem;
text-align: center;
padding-top: 1.07143rem;
color: #091B2B; }
.bgbar {
position: absolute;
left: 0;
height: 28.57143rem;
width: 100%;
transition: all .3s ease-in-out; }
.bgbar__bg {
width: 100%;
height: 100%; }
.home-agenda .home-agenda__bgbar-1 {
top: -60%; }
.home-agenda .home-agenda__bgbar-1 .bgbar__bg {
background: #223340;
transform: skewY(2deg);
opacity: .8; }
.home-agenda .home-agenda__bgbar-2 {
top: -50%; }
.home-agenda .home-agenda__bgbar-2 .bgbar__bg {
background: #223340;
transform: skewY(-4deg);
opacity: .5; }
.home-agenda__bgbar-3 {
top: -300%; }
.home-agenda__bgbar-3 .bgbar__bg {
background: #091b2b;
transform: skewY(5deg); }
.home-today .bgbar {
bottom: -160%; }
.home-today .bgbar .bgbar__bg {
background: #223340;
transform: skewY(-2deg); }
.parking-article--transit .bgbar {
top: -2.42857rem;
background: #f7f8f8;
transform: skewY(-2deg); }
.page__header .bgbar--page-header {
top: 50%;
transform: skewY(2deg);
opacity: .4;
background-color: #223340; }
.page__footer .bgbar--page-footer1 {
top: -85%;
transform: skewY(-2deg);
background-color: #091B2B; }
.page__footer .bgbar--page-footer2 {
bottom: -70%;
transform: skewY(2deg);
background-color: #223340; }
.footer .bgbar {
top: -2.42857rem;
background: #091B2B;
transform: skewY(-2deg); }
.radio-toggle {
padding-top: 2.14286rem; }
@media screen and (max-width: 900px) {
.radio-toggle {
padding-top: 0.71429rem; } }
input[type=radio],
input[type=checkbox] {
display: none; }
input[type=radio]:checked + label,
input[type=checkbox]:checked + label {
background-position: left bottom; }
input[type=radio][disabled] + label,
input[type=checkbox][disabled] + label {
opacity: 0.4; }
label {
display: inline-block;
vertical-align: middle;
margin: 0 1.71429rem 1.71429rem 0; }
label.label--radio {
display: inline-block;
background: url(../img/input--radio.svg) left 0 no-repeat;
padding: 0.35714rem 0 0.35714rem 2.85714rem;
cursor: pointer; }
label a {
color: inherit; }
label a:hover {
text-decoration: none; }
.event-counter {
display: none;
margin-top: 2.85714rem; }
.event-counter .event-counter__days,
.event-counter .event-counter__hours,
.event-counter .event-counter__mins {
font-size: 1.21429rem;
line-height: 1.29412;
display: inline-block;
width: 5rem;
height: 5rem;
border: 0.14286rem solid #FFF;
border-radius: 50%;
margin: 0 3%;
text-align: center; }
.event-counter .event-counter__days span,
.event-counter .event-counter__hours span,
.event-counter .event-counter__mins span {
font-size: 1.78571rem;
line-height: 1.76;
display: inline-block;
color: inherit;
width: 100%;
height: 100%;
line-height: 4.85714rem;
margin-bottom: 0.85714rem; }
@media screen and (max-width: 1280px) {
.event-counter .event-counter__days,
.event-counter .event-counter__hours,
.event-counter .event-counter__mins {
margin: 0 2%; } }
@media screen and (max-width: 1100px) {
.event-counter .event-counter__days,
.event-counter .event-counter__hours,
.event-counter .event-counter__mins {
font-size: 1rem;
line-height: 1.57143;
width: 3.57143rem;
height: 3.57143rem; }
.event-counter .event-counter__days span,
.event-counter .event-counter__hours span,
.event-counter .event-counter__mins span {
font-size: 1.42857rem;
line-height: 1.1;
line-height: 3.42857rem; } }
.block-list .block-list__anchor {
color: inherit; }
.block-list .block-list__anchor:hover {
text-decoration: none; }
.block-list .block-list__anchor:hover .block-list__title {
color: #A20C1B; }
.block-list .block-list__image {
margin-bottom: 1.07143rem;
width: 100%; }
.block-list .block-list__title {
margin-bottom: 0.35714rem;
color: #E20715; }
.block-list time {
display: inline-block;
margin-bottom: 0.57143rem; }
@media screen and (min-width: 900px) {
.block-list .o-layout__item {
margin-bottom: 1.42857rem; } }
.result-list {
margin-bottom: 4.28571rem; }
.result-list dt {
margin-bottom: 0.71429rem; }
.result-list dd {
margin: 0 0 1.07143rem 0;
padding-bottom: 1.07143rem;
border-bottom: 0.14286rem solid #bbc0c5; }
.result-list h4 {
margin-bottom: 0; }
.result-list a:hover {
text-decoration: none;
color: #A20C1B; }
.result-list em {
font-style: normal;
background-color: #c5c7c8;
padding: 0.07143rem 0.35714rem; }
.testimonial {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-line-pack: stretch;
align-content: stretch;
-ms-flex-align: center;
align-items: center; }
@media screen and (max-width: 640px) {
.testimonial {
-ms-flex-wrap: wrap;
flex-wrap: wrap; } }
.testimonial .testimonial__image {
-ms-flex: 0 1 auto;
flex: 0 1 auto;
border-radius: 50%; }
@media screen and (max-width: 640px) {
.testimonial .testimonial__image {
margin-bottom: 1.71429rem; } }
.testimonial .testimonial__quote {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
margin-left: 1.71429rem; }
.testimonial .testimonial__quote q {
display: block;
font-size: 1.35714rem;
line-height: 1.15789;
color: #4a4a4a;
margin-bottom: 1.71429rem; }
.testimonial .testimonial__quote cite {
font-style: normal; }
.header {
position: fixed;
z-index: 1000;
top: 0;
width: 100%;
max-width: 1920px;
min-height: 5.71429rem;
background: #E20715;
padding: 24px 0;
color: #FFF;
margin-left: 0;
transition: max-height .3s ease-in; }
@media screen and (max-width: 900px) {
.header {
padding: 1.28571rem 0 2.85714rem 0;
min-height: 2.85714rem;
max-height: 4.28571rem;
overflow: hidden; }
.header.header--expanded {
max-height: 100%;
overflow-y: auto; }
.header .header__navs {
position: relative; } }
.header .header__logo {
margin-bottom: 0;
margin-left: 1.71429rem; }
.header .header__logo a {
display: block;
background: url(../img/gelredome-logo.svg) 0 0 no-repeat;
background-size: contain;
height: 2.78571rem;
outline: none; }
@media screen and (min-width: 900px) {
.header .header__logo {
max-width: 18.28571rem; } }
@media screen and (max-width: 900px) {
.header .header__logo {
margin-left: 0.57143rem;
max-width: 10.78571rem; } }
.header .header__burger {
position: absolute;
top: 0.28571rem;
right: 0.57143rem;
width: 3.57143rem;
height: 3.57143rem; }
@media screen and (min-width: 900px) {
.header .header__burger {
display: none; } }
.header a {
display: inline-block;
color: #FFF;
text-decoration: none; }
@media screen and (min-width: 900px) {
.header__nav {
position: absolute;
right: 1.71429rem;
margin: 0; } }
@media screen and (max-width: 900px) {
.header__nav {
display: block;
margin: 1.5rem 0.57143rem 0 0.57143rem; }
.header__nav ul,
.header__nav .nav__item {
width: 100%; } }
.header__nav.header__nav--primary {
font-size: 1.21429rem;
line-height: 1.29412; }
.header__nav.header__nav--primary .nav__item:hover {
cursor: pointer; }
.header__nav.header__nav--primary .nav__item:last-child > a {
padding-right: 0; }
@media screen and (min-width: 1280px) {
.header__nav.header__nav--primary .nav__item > a {
padding-right: 1.07143rem;
padding-left: 1.07143rem; } }
@media screen and (min-width: 900px) {
.header__nav.header__nav--primary {
bottom: 0; }
.header__nav.header__nav--primary .nav__item:hover {
cursor: pointer; }
.header__nav.header__nav--primary .nav__item:hover > a {
border-color: #A20C1B; }
.header__nav.header__nav--primary .nav__item > a {
border-bottom: 0.28571rem solid transparent;
padding-bottom: 1.14286rem;
padding-left: 0.57143rem; }
.header__nav.header__nav--primary .nav__item > a:hover {
border-color: #A20C1B; }
.header__nav.header__nav--primary .nav__item--active a {
border-color: #FFF; } }
@media screen and (max-width: 900px) {
.header__nav.header__nav--primary {
padding-top: 3.57143rem; }
.header__nav.header__nav--primary .nav__item > a {
display: block;
border-bottom: 0.07143rem solid #ed656e;
padding-top: 0.71429rem;
padding-bottom: 0.71429rem; }
.header__nav.header__nav--primary .nav__item > a.icon__wallet--header {
background-position: left center; }
.header__nav.header__nav--primary .nav__item--active a {
color: #ed6b73; }
.header__nav.header__nav--primary .dropdown-menu {
display: none; }
.header__nav.header__nav--primary .dropdown-menu.show {
display: block;
position: static !important;
width: 100%;
transform: none !important; }
.header__nav.header__nav--primary .dropdown-menu.show .dropdown-item {
border-bottom: 0.07143rem solid #ed656e; } }
@media screen and (min-width: 1280px) {
.header__nav.header__nav--primary .nav__item > a {
padding-left: 0.85714rem;
padding-right: 0.85714rem; } }
.header__nav.header__nav--primary .dropdown-menu {
font-size: 1.21429rem;
line-height: 1.29412;
padding: 0 8px 0.5rem; }
@media screen and (min-width: 1280px) {
.header__nav.header__nav--primary .dropdown-menu {
padding: 0.5rem 0; } }
@media screen and (min-width: 900px) {
.header__nav.header__nav--primary .dropdown-menu {
padding: 0.5rem 0; } }
.header__nav.header__nav--primary .dropdown-menu li {
display: block; }
.header__nav.header__nav--primary .dropdown-menu .dropdown-item {
padding: 0; }
.header__nav.header__nav--primary .dropdown-menu .dropdown-item a {
border: none;
margin-left: 0; }
@media screen and (min-width: 900px) {
.header__nav.header__nav--primary .dropdown-menu .dropdown-item a {
padding: 0.25rem 0.85714rem; } }
.header__nav.header__nav--primary .dropdown-menu .dropdown-item a:hover, .header__nav.header__nav--primary .dropdown-menu .dropdown-item a:focus {
color: #091B2B;
text-decoration: none;
background: transparent;
border-color: transparent; }
.header__nav.header__nav--primary .dropdown-menu .dropdown-item a.active, .header__nav.header__nav--primary .dropdown-menu .dropdown-item a:active {
color: #FFF;
text-decoration: none;
background-color: #E20715; }
@media screen and (min-width: 900px) {
.header__nav.header__nav--meta {
top: 1.28571rem;
font-size: 0.85714rem;
line-height: 1.83333; }
.header__nav.header__nav--meta .nav__item {
margin-left: 0.57143rem; } }
@media screen and (max-width: 900px) {
.header__nav.header__nav--meta ul {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-line-pack: stretch;
align-content: stretch;
-ms-flex-align: start;
align-items: flex-start; }
.header__nav.header__nav--meta .nav__item:not(.header__search) {
-ms-flex-order: 0;
order: 0;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-ms-flex-item-align: auto;
align-self: auto;
border: 0.07143rem solid #FFF;
text-align: center;
width: 50%; }
.header__nav.header__nav--meta .nav__item:not(.header__search):last-child {
margin-left: 1.07143rem; }
.header__nav.header__nav--meta a {
width: 100%;
height: 100%;
padding: 0.57143rem; } }
.header__nav.header__nav--meta .nav__item--active {
opacity: .4; }
@media screen and (min-width: 900px) {
.header__search .header__search-anchor {
width: 1.42857rem;
height: 1.42857rem;
background-position: center center;
transition: opacity .2s ease-out;
opacity: 1; }
.header__search .header__search-anchor.u-visibility-hidden {
opacity: 0; }
.header__search .header__search-form {
position: relative;
float: right;
width: 13.57143rem;
margin-top: -0.14286rem;
font-size: 0.85714rem;
line-height: 1.83333;
transition: width .5s ease; }
.header__search .header__search-form.u-hidden-visually {
width: 0; } }
@media screen and (max-width: 900px) {
.header__search .header__search-anchor {
display: none; }
.header__search .header__search-form {
position: absolute;
top: 0;
left: 0.57143rem;
right: 0.57143rem; } }
.header__search .header__search-input {
width: 100%;
padding-left: 1.78571rem;
-webkit-appearance: none;
appearance: none;
border-radius: 0; }
@media screen and (min-width: 900px) {
.header__search .header__search-input {
float: right; } }
@media screen and (max-width: 900px) {
.header__search .header__search-input {
padding: 0.71429rem; } }
.header__search .header__search-input:focus {
outline: none; }
.header__search .header__search-submit {
position: absolute;
top: 0;
min-width: 1.71429rem;
height: 100%;
background-position: center center;
background-color: transparent;
border: 0; }
@media screen and (max-width: 900px) {
.header__search .header__search-submit {
right: 1.71429rem;
background-size: 1.21429rem; } }
.header__mobile-bg {
position: fixed;
z-index: 999;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #223340;
opacity: .75;
transition: all .5s ease; }
.hero {
position: relative;
background: #223340;
color: #FFF; }
.hero .hero__image {
line-height: 0;
opacity: .7;
max-height: 100vh; }
@media screen and (max-width: 900px) {
.hero .hero__image {
opacity: .35;
min-height: 32.85714rem;
max-height: calc(100vh + 50px); }
.hero .hero__image img {
position: relative;
left: 50%;
transform: translate(-50%, 0);
max-width: none;
min-height: 32.85714rem;
height: auto; } }
.hero .hero__content {
position: absolute;
top: 45%;
z-index: 20;
text-align: center;
width: 100%;
transform: translateY(-50%); }
@media screen and (max-width: 900px) {
.hero .hero__content {
padding: 0 1.71429rem; } }
.hero .hero-scroll {
position: absolute;
display: none;
transition: all 1s ease;
left: 15px;
right: 15px;
height: 40px;
z-index: 1;
display: block;
text-align: center; }
@media screen and (min-width: 640px) {
.hero .hero-scroll {
bottom: 20%; } }
@media screen and (min-width: 900px) {
.hero .hero-scroll {
bottom: 150px; } }
@media screen and (min-width: 1280px) {
.hero .hero-scroll {
bottom: 250px; } }
@media screen and (min-width: 1600px) {
.hero .hero-scroll {
bottom: 30%; } }
.hero .hero-scroll i {
transition: all 0.3s ease; }
.hero .hero-scroll:hover i {
transform: scale(1.1, 1.1);
border-radius: 100%; }
.hero .hero__subtitle,
.hero .hero__title {
line-height: 1;
margin-bottom: 0; }
.hero .hero__title {
margin-bottom: 0.21429rem; }
.hero .hero__title {
font-size: 5.35714rem;
line-height: 1.17333; }
@media screen and (max-width: 900px) {
.hero .hero__title {
font-size: 2.5rem;
line-height: 1.25714; } }
.hero a {
display: inline-block;
margin: 1.71429rem 0.57143rem; }
@media screen and (max-width: 900px) {
.hero a {
display: block; } }
.hero .hero__buttons {
margin-top: 0.57143rem; }
.hero .hero__sold-out {
font-size: 1rem;
line-height: 1.57143;
position: absolute;
z-index: 10;
left: 75%;
top: 64%;
background: url(../img/sold-out.svg) 0 0 no-repeat;
width: 10.92857rem;
height: 10.85714rem;
text-align: center;
padding-top: 3.57143rem;
margin-right: 0.57143rem; }
.hero .hero__sold-out span {
display: inline-block;
font-size: 1.42857rem; }
@media screen and (max-width: 640px) {
.hero .hero__sold-out {
transform: scale(0.5);
top: 60%;
left: 61%; } }
.home-agenda {
margin-top: -6rem; }
.home-agenda .agenda-items {
position: relative;
z-index: 10;
width: 100%; }
.home-agenda__header {
position: relative;
color: #FFF;
padding: 2.5rem; }
@media screen and (max-width: 900px) {
.home-agenda__header {
padding: 1.42857rem; } }
.home-agenda__header .home-agenda__header-text {
position: absolute;
z-index: 10;
bottom: 0.71429rem;
left: 0;
width: 100%;
text-align: center; }
@media screen and (max-width: 900px) {
.home-agenda__header .home-agenda__header-text {
bottom: -0.85714rem; } }
.home-agenda__footer {
position: relative;
padding-top: 2.85714rem;
padding-bottom: 5.71429rem;
background: #122333;
text-align: center;
overflow: hidden; }
.home-agenda__footer .btn, .home-agenda__footer form #form_save, form .home-agenda__footer #form_save {
position: relative;
z-index: 10; }
.home-today {
position: relative;
background: #122333;
color: #FFF;
text-align: center;
padding-bottom: 6.07143rem;
overflow: hidden; }
@media screen and (max-width: 900px) {
.home-today {
padding-bottom: 2.85714rem; } }
.home-today .home-today__content {
position: relative;
z-index: 10;
width: 100%; }
.home-today .home-today__title {
margin-bottom: 2.14286rem; }
.home-article {
position: relative;
text-align: center;
background: #223340;
overflow: hidden;
color: #FFF; }
.home-article .home-article__bg {
position: absolute;
z-index: 5;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center top;
opacity: .7; }
.home-article .home-article__content {
position: relative;
z-index: 10;
background: rgba(34, 51, 64, 0.2) url(../img/bg-fader.png) 0 0 repeat-x;
padding: 12% 15%; }
.home-article .home-article__title {
margin-bottom: 0.71429rem; }
.home-article .home-article__text {
text-transform: none;
line-height: 1.3; }
.parking-article {
position: relative;
text-align: center;
padding-top: 2.85714rem;
padding-bottom: 5.71429rem; }
.parking-article.parking-article--light {
background-color: #f7f8f8; }
.parking-article .parking-article__title {
margin-bottom: 1.07143rem; }
.parking-article .parking-article__content {
position: relative; }
@media screen and (min-width: 900px) {
.parking-article p {
max-width: 65%;
margin-left: auto;
margin-right: auto; } }
.parking-article.parking-article--transit {
padding-top: 3.57143rem;
padding-bottom: 0; }
.parking-article.parking-article--transit .parking-article__title {
margin-bottom: 2.14286rem; }
.parking-article.parking-article--transit .nav__item a {
padding-bottom: 13.57143rem; }
.parking-article.parking-article--disabled {
z-index: 10;
background-repeat: no-repeat; }
.parking-article.parking-article--disabled .parking-article__content .o-layout {
transform: translateY(60%);
max-width: 1920px;
padding-top: 2.85714rem;
padding-bottom: 2.85714rem;
text-align: left;
background: linear-gradient(to bottom, #f7f8f8 0%, #f7f8f8 65%, rgba(255, 255, 255, 0) 100%); }
.parking-article.parking-article--disabled .parking-article__content h4,
.parking-article.parking-article--disabled .parking-article__content p {
max-width: 90%;
margin-left: auto;
margin-right: auto;
margin-bottom: 1.07143rem; }
@media screen and (max-width: 900px) {
.parking-article.parking-article--disabled .parking-article__content {
padding-right: 0;
margin-top: 14.28571rem; }
.parking-article.parking-article--disabled .parking-article__content .o-layout {
transform: translateY(0);
background: #f7f8f8;
padding-bottom: 1.71429rem; } }
@media screen and (min-width: 900px) {
.parking-article.parking-article--disabled .parking-article__content .o-layout__item {
min-height: 28.57143rem; } }
.parking-location {
position: relative; }
.parking-location .parking-location__gradient {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to bottom, #f7f8f8 0%, rgba(255, 255, 255, 0) 100%); }
.parking-location .parking-location__balloon {
position: absolute;
z-index: 11;
bottom: 46%;
left: 50%;
width: 15.71429rem;
margin-left: -7.85714rem;
background-color: #FFF;
text-align: center;
padding: 0.71429rem;
box-shadow: 0 0.14286rem 0.28571rem 0 rgba(0, 0, 0, 0.1);
filter: drop-shadow(0 0.14286rem 0.28571rem rgba(0, 0, 0, 0.1)); }
@media screen and (max-width: 1280px) {
.parking-location .parking-location__balloon {
bottom: 47%; } }
@media screen and (max-width: 900px) {
.parking-location .parking-location__balloon {
bottom: 49%; } }
@media screen and (max-width: 640px) {
.parking-location .parking-location__balloon {
bottom: 53%; } }
.parking-location .parking-location__balloon .vcard {
margin-bottom: 0.71429rem; }
.parking-location .parking-location__balloon .vcard .org {
font-weight: bold; }
.parking-location .parking-location__balloon button {
font-size: 1rem;
line-height: 1.57143;
padding: 0.57143rem 0.71429rem;
margin-bottom: 0.71429rem; }
.parking-location .parking-location__balloon:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-top-color: #FFF;
border-width: 10px;
margin-left: -10px; }
.parking-location .parking-location__balloon .parking-location__dot {
position: absolute;
left: 50%;
bottom: -2.14286rem;
width: 0.71429rem;
height: 0.71429rem;
margin-left: -0.35714rem;
background-color: #E20715;
border-radius: 50%; }
.page {
position: relative;
margin-top: 6.21429rem;
background-attachment: fixed;
background-size: cover;
overflow: hidden; }
@media screen and (max-width: 900px) {
.page {
margin-top: 4.28571rem; } }
.page .page__bg {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #091B2B;
opacity: .75; }
.page__header {
padding-top: 4.28571rem;
padding-bottom: 0.71429rem;
color: #FFF; }
.page__header .page__header-emphasized {
border-left: 0.42857rem solid #E20715;
padding-left: 1.14286rem;
margin-bottom: 2.14286rem; }
.page__header .page__header-emphasized .page__subtitle,
.page__header .page__header-emphasized .page__title {
margin-bottom: 0.71429rem;
line-height: 1; }
.page__header .o-layout {
position: relative;
z-index: 10; }
.page__header strong {
font-size: 1.57143rem;
line-height: 1; }
.page__main__top {
position: relative;
background: url(../img/page-bg--top.png) left top no-repeat;
background-size: 70% 100%;
height: 3.57143rem; }
.page__main__top.page__main__top--full-width {
background-size: 100% 100%; }
@media screen and (max-width: 900px) {
.page__main__top {
background-size: 100% 100%; } }
.page__main {
background: url(../img/page-bg--white.png) left top repeat-y;
background-size: 70% 100%;
min-height: 990px; }
.page__main.page__main--full-width {
background-size: contain; }
@media screen and (max-width: 900px) {
.page__main {
background-size: contain; } }
.page__content {
padding-top: 3.57143rem;
padding-bottom: 5.71429rem; }
@media screen and (min-width: 900px) {
.page__content:not(.page__content--full-width) {
max-width: 90%; } }
.page__content h2 {
font-size: 1.85714rem;
line-height: 1.69231; }
.page__content time {
color: #9B9B9B; }
.page__content .page__content__video {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 1.78571rem;
height: 0;
margin-bottom: 1.71429rem; }
.page__content .page__content__video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.page__content .page__content__social {
margin-left: 0;
list-style: none; }
.page__content .page__content__social li {
display: inline;
margin-right: 0.57143rem; }
.page__content .page__content__social .icon__twitter--small,
.page__content .page__content__social .icon__facebook--small {
display: inline-block;
width: 2.85714rem;
height: 2.85714rem; }
.page__content .page__content__social .icon__twitter--small:hover,
.page__content .page__content__social .icon__facebook--small:hover {
opacity: .4; }
.page__footer {
position: relative;
padding-top: 40px;
padding-bottom: 80px;
background-color: #122333;
overflow: hidden; }
.footer {
position: relative;
z-index: 20; }
.footer__doormat {
position: relative;
background: #091B2B;
color: #E7E9EB;
padding-top: 3.57143rem;
padding-bottom: 5rem; }
.footer__doormat .nav__item {
display: block;
margin-bottom: 1.14286rem; }
.footer__doormat a {
color: #E7E9EB; }
.footer__doormat .footer__payoff {
position: relative;
right: -1.42857rem;
background: url(../img/het-grootste-theater-van-nl.svg) 0 0 no-repeat;
background-size: cover;
padding-top: 41%; }
@media screen and (max-width: 900px) {
.footer__doormat {
padding-top: 2.85714rem;
padding-bottom: 2.85714rem; }
.footer__doormat .footer__payoff {
right: auto; } }
@media screen and (max-width: 640px) {
.footer__doormat .nav {
margin-bottom: 2.85714rem; }
.footer__doormat .footer__subtitle {
margin-bottom: 1.07143rem; } }
.footer__end {
background: #E20715;
padding-top: 1.71429rem;
padding-bottom: 1.71429rem;
color: #FFF; }
@media screen and (max-width: 640px) {
.footer__end {
text-align: center; } }
.footer__end a {
display: inline-block;
color: #FFF; }
.footer__end .nav__item {
display: inline-block;
vertical-align: middle; }
.footer__social {
display: inline-block;
margin-right: 0.71429rem; }
@media screen and (max-width: 640px) {
.footer__social {
display: block;
margin-right: 0; } }
.footer__social .nav__item {
margin-right: 0.71429rem; }
@media screen and (max-width: 640px) {
.footer__social .nav__item {
margin-left: 0.71429rem;
margin-bottom: 1.78571rem; } }
.footer__social .nav__item .icon {
width: 2.07143rem;
height: 2.07143rem;
background-size: contain; }
@media screen and (max-width: 640px) {
.footer__social .nav__item .icon {
width: 3.07143rem;
height: 3.07143rem; } }
.footer__social .nav__item .icon:hover {
opacity: .5; }
.footer__links {
display: inline-block; }
@media screen and (max-width: 640px) {
.footer__links .nav__item {
display: block;
margin-bottom: 0.85714rem; } }
@media screen and (min-width: 640px) {
.footer__links .nav__item:not(:last-child)::after {
content: '\00a0\00a0|\00a0';
padding-right: 6px; }
.footer__links .nav__item:first-child::after {
padding-left: 6px; } }
.addthis_inline_share_toolbox {
margin-bottom: 2.14286rem; }
.at-style-responsive .at-share-btn {
border-radius: 50%;
margin-right: 0.57143rem; }
form .form-group {
margin-bottom: 30px; }
form label {
font-size: 1rem;
font-weight: normal;
margin: 0px 0px 10px 0px;
display: block;
font-family: 'Open Sans', sans-serif, Helvetica, Arial;
text-transform: capitalize; }
form label.required:after {
content: " *";
display: inline-block;
padding-left: 5px;
font-size: 0.8rem; }
form input[type=text],
form input[type=email],
form textarea {
height: 45px;
width: 100%;
max-width: 550px;
border: none;
padding: 10px 15px;
box-shadow: 0 0px 3px rgba(0, 0, 0, 0.2);
border-radius: 5px; }
form textarea {
height: 250px; }
form .required-text {
margin: 0px 0px 30px 0px;
color: #9B9B9B; }
form .form-group--has-error input[type=text],
form .form-group--has-error input[type=email],
form .form-group--has-error textarea {
border: 1px solid #E20715; }
form .form-group--has-error .help-block {
margin-top: 10px;
color: #E20715;
display: block; }
.threesixty-tour {
display: none; }
@media (min-width: 576px) {
.threesixty-tour {
display: block;
position: relative;
width: 653px;
height: 1489px;
background: url("../img/virtual-tour/360-tour-plan.png") no-repeat; } }
@media (min-width: 900px) and (max-width: 1100px) {
.threesixty-tour {
left: -99px; } }
.threesixty-tour a {
display: block;
position: absolute; }
@media (min-width: 768px) {
#virtual-modal .modal-dialog {
position: absolute;
left: 15px;
right: 15px;
width: auto; } }
#virtual-modal .close {
border: 1px solid #cccccc;
font-size: 28px;
line-height: 28px;
border-color: white;
background: #FFFFFF;
border-radius: 100%;
cursor: pointer;
display: block;
height: 30px;
position: absolute;
padding: 0;
right: -8px;
top: -8px;
width: 30px;
z-index: 1051; }
#virtual-modal .modal-body {
height: calc(100vh - 200px); }
#virtual-modal .modal-body iframe {
width: 100%;
height: 100%; }
.modal-open {
overflow: hidden; }
.modal {
display: none;
overflow: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
-webkit-overflow-scrolling: touch;
outline: 0; }
.modal.fade .modal-dialog {
transform: translate(0, -25%);
transition: transform 0.3s ease-out; }
.modal.in .modal-dialog {
transform: translate(0, 0); }
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto; }
.modal-dialog {
position: relative;
width: auto;
margin: 10px; }
.modal-content {
position: relative;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.2);
border: 1px solid #999;
border-radius: 5px;
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
background-clip: padding-box;
outline: 0; }
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000; }
.modal-backdrop.fade {
opacity: 0; }
.modal-backdrop.in {
opacity: 0.5; }
.modal-header {
padding: 15px;
border-bottom: 1px solid #e5e5e5; }
.modal-header .close {
margin-top: -2px; }
.modal-title {
margin: 0;
line-height: 1.428571429; }
.modal-body {
position: relative;
padding: 15px; }
.modal-footer {
padding: 15px;
text-align: right;
border-top: 1px solid #e5e5e5; }
.modal-footer .btn + .btn, .modal-footer form #form_save + .btn, form .modal-footer #form_save + .btn, .modal-footer form .btn + #form_save, form .modal-footer .btn + #form_save, .modal-footer form #form_save + #form_save, form .modal-footer #form_save + #form_save {
margin-left: 5px;
margin-bottom: 0; }
.modal-footer .btn-group .btn + .btn, .modal-footer .btn-group form #form_save + .btn, form .modal-footer .btn-group #form_save + .btn, .modal-footer .btn-group form .btn + #form_save, form .modal-footer .btn-group .btn + #form_save, .modal-footer .btn-group form #form_save + #form_save, form .modal-footer .btn-group #form_save + #form_save {
margin-left: -1px; }
.modal-footer .btn-block + .btn-block {
margin-left: 0; }
.modal-scrollbar-measure {
position: absolute;
top: -9999px;
width: 50px;
height: 50px;
overflow: scroll; }
@media (min-width: 768px) {
.modal-dialog {
width: 600px;
margin: 30px auto; }
.modal-content {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); }
.modal-sm {
width: 300px; } }
@media (min-width: 992px) {
.modal-lg {
width: 900px; } }
@media screen and (min-width: 900px) {
.nav-overlay {
background-color: #000000;
height: 100%;
position: fixed;
top: 0;
left: 0;
width: 100%;
opacity: 0;
z-index: -1;
transition: opacity .4s ease-out; }
.nav-overlay.is-active {
opacity: .6;
z-index: 90;
transition: opacity .4s ease-out; } }
.spinner {
display: inline-block;
border: 3px solid #D8D8D8;
border-radius: 50%;
border-top-color: transparent;
animation: spin 1s linear infinite;
-webkit-animation: spin 1s linear infinite; }
@keyframes spin {
to {
-webkit-transform: rotate(360deg); } }
.video-pp .video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%; }
.video-pp .video iframe, .video-pp .video object, .video-pp .video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.hero__video {
background-size: cover;
background-repeat: no-repeat;
background-position: center center; }
@media screen and (max-width: 640px) {
.hero__video {
overflow: hidden; }
.hero__video video {
width: unset;
height: 480px;
margin-left: -30%; } }
@media screen and (max-width: 900px) and (min-width: 640px) {
.hero__video {
overflow: hidden; }
.hero__video video {
width: unset;
height: 640px;
margin-left: -20%; } }
/* ==========================================================================
#CLEARFIX
========================================================================== */
/**
* Attach our clearfix mixin to a utility class.
*/
.u-clearfix:after {
content: "" !important;
display: block !important;
clear: both !important; }
/* ==========================================================================
#SPACING
========================================================================== */
/**
* Utility classes to put specific spacing values onto elements. The below loop
* will generate us a suite of classes like:
*
* .u-margin-top {}
* .u-padding-left-large {}
* .u-margin-right-small {}
* .u-padding {}
* .u-padding-right-none {}
*/
.u-padding {
padding: 24px !important; }
.u-padding-tiny {
padding: 8px !important; }
.u-padding-small {
padding: 24px !important; }
.u-padding-large {
padding: 40px !important; }
.u-padding-huge {
padding: 80px !important; }
.u-padding-none {
padding: 0 !important; }
.u-padding-top {
padding-top: 24px !important; }
.u-padding-top-tiny {
padding-top: 8px !important; }
.u-padding-top-small {
padding-top: 24px !important; }
.u-padding-top-large {
padding-top: 40px !important; }
.u-padding-top-huge {
padding-top: 80px !important; }
.u-padding-top-none {
padding-top: 0 !important; }
.u-padding-right {
padding-right: 24px !important; }
.u-padding-right-tiny {
padding-right: 8px !important; }
.u-padding-right-small {
padding-right: 24px !important; }
.u-padding-right-large {
padding-right: 40px !important; }
.u-padding-right-huge {
padding-right: 80px !important; }
.u-padding-right-none {
padding-right: 0 !important; }
.u-padding-bottom {
padding-bottom: 24px !important; }
.u-padding-bottom-tiny {
padding-bottom: 8px !important; }
.u-padding-bottom-small {
padding-bottom: 24px !important; }
.u-padding-bottom-large {
padding-bottom: 40px !important; }
.u-padding-bottom-huge {
padding-bottom: 80px !important; }
.u-padding-bottom-none {
padding-bottom: 0 !important; }
.u-padding-left {
padding-left: 24px !important; }
.u-padding-left-tiny {
padding-left: 8px !important; }
.u-padding-left-small {
padding-left: 24px !important; }
.u-padding-left-large {
padding-left: 40px !important; }
.u-padding-left-huge {
padding-left: 80px !important; }
.u-padding-left-none {
padding-left: 0 !important; }
.u-margin {
margin: 24px !important; }
.u-margin-tiny {
margin: 8px !important; }
.u-margin-small {
margin: 24px !important; }
.u-margin-large {
margin: 40px !important; }
.u-margin-huge {
margin: 80px !important; }
.u-margin-none {
margin: 0 !important; }
.u-margin-top {
margin-top: 24px !important; }
.u-margin-top-tiny {
margin-top: 8px !important; }
.u-margin-top-small {
margin-top: 24px !important; }
.u-margin-top-large {
margin-top: 40px !important; }
.u-margin-top-huge {
margin-top: 80px !important; }
.u-margin-top-none {
margin-top: 0 !important; }
.u-margin-right {
margin-right: 24px !important; }
.u-margin-right-tiny {
margin-right: 8px !important; }
.u-margin-right-small {
margin-right: 24px !important; }
.u-margin-right-large {
margin-right: 40px !important; }
.u-margin-right-huge {
margin-right: 80px !important; }
.u-margin-right-none {
margin-right: 0 !important; }
.u-margin-bottom {
margin-bottom: 24px !important; }
.u-margin-bottom-tiny {
margin-bottom: 8px !important; }
.u-margin-bottom-small {
margin-bottom: 24px !important; }
.u-margin-bottom-large {
margin-bottom: 40px !important; }
.u-margin-bottom-huge {
margin-bottom: 80px !important; }
.u-margin-bottom-none {
margin-bottom: 0 !important; }
.u-margin-left {
margin-left: 24px !important; }
.u-margin-left-tiny {
margin-left: 8px !important; }
.u-margin-left-small {
margin-left: 24px !important; }
.u-margin-left-large {
margin-left: 40px !important; }
.u-margin-left-huge {
margin-left: 80px !important; }
.u-margin-left-none {
margin-left: 0 !important; }
/* ==========================================================================
#PRINT
========================================================================== */
/**
* Very crude, reset-like styles taken from the HTML5 Boilerplate:
* https://github.com/h5bp/html5-boilerplate/blob/5.3.0/dist/doc/css.md#print-styles
* https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css#L205-L282
*/
@media print {
/**
* 1. Black prints faster: http://www.sanbeiji.com/archives/953
*/
*,
*:before,
*:after,
*:first-letter,
*:first-line {
background: transparent !important;
color: #000 !important;
/* [1] */
box-shadow: none !important;
text-shadow: none !important; }
a,
a:visited {
text-decoration: underline; }
a[href]:after {
content: " (" attr(href) ")"; }
abbr[title]:after {
content: " (" attr(title) ")"; }
/**
* Don't show links that are fragment identifiers, or use the `javascript:`
* pseudo protocol.
*/
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: ""; }
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid; }
/**
* Printing Tables: http://css-discuss.incutio.com/wiki/Printing_Tables
*/
thead {
display: table-header-group; }
tr,
img {
page-break-inside: avoid; }
img {
max-width: 100% !important; }
p,
h2,
h3 {
orphans: 3;
widows: 3; }
h2,
h3 {
page-break-after: avoid; } }
/* ==========================================================================
#HIDE
========================================================================== */
/**
* Hide only visually, but have it available for screen readers:
* http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.u-hidden-visually {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important; }
/**
* Hide visually and from screen readers.
*/
.u-hidden {
display: none !important; }
/* ==========================================================================
#WIDTHS
========================================================================== */
/**
* A series of width helper classes that you can use to size things like grid
* systems. Classes can take a fraction-like format (e.g. `.u-2/3`) or a spoken-
* word format (e.g. `.u-2-of-3`). Use these in your markup:
*
*
*
* The following will generate a 12 and a 16 column grid system.
*/
.u-1\/12 {
width: 8.33333% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/12 {
position: relative;
right: auto;
/* [1] */
left: 8.33333% !important; }
.u-pull-1\/12 {
position: relative;
right: 8.33333% !important;
left: auto;
/* [1] */ }
.u-2\/12 {
width: 16.66667% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/12 {
position: relative;
right: auto;
/* [1] */
left: 16.66667% !important; }
.u-pull-2\/12 {
position: relative;
right: 16.66667% !important;
left: auto;
/* [1] */ }
.u-3\/12 {
width: 25% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/12 {
position: relative;
right: auto;
/* [1] */
left: 25% !important; }
.u-pull-3\/12 {
position: relative;
right: 25% !important;
left: auto;
/* [1] */ }
.u-4\/12 {
width: 33.33333% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/12 {
position: relative;
right: auto;
/* [1] */
left: 33.33333% !important; }
.u-pull-4\/12 {
position: relative;
right: 33.33333% !important;
left: auto;
/* [1] */ }
.u-5\/12 {
width: 41.66667% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-5\/12 {
position: relative;
right: auto;
/* [1] */
left: 41.66667% !important; }
.u-pull-5\/12 {
position: relative;
right: 41.66667% !important;
left: auto;
/* [1] */ }
.u-6\/12 {
width: 50% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-6\/12 {
position: relative;
right: auto;
/* [1] */
left: 50% !important; }
.u-pull-6\/12 {
position: relative;
right: 50% !important;
left: auto;
/* [1] */ }
.u-7\/12 {
width: 58.33333% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-7\/12 {
position: relative;
right: auto;
/* [1] */
left: 58.33333% !important; }
.u-pull-7\/12 {
position: relative;
right: 58.33333% !important;
left: auto;
/* [1] */ }
.u-8\/12 {
width: 66.66667% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-8\/12 {
position: relative;
right: auto;
/* [1] */
left: 66.66667% !important; }
.u-pull-8\/12 {
position: relative;
right: 66.66667% !important;
left: auto;
/* [1] */ }
.u-9\/12 {
width: 75% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-9\/12 {
position: relative;
right: auto;
/* [1] */
left: 75% !important; }
.u-pull-9\/12 {
position: relative;
right: 75% !important;
left: auto;
/* [1] */ }
.u-10\/12 {
width: 83.33333% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-10\/12 {
position: relative;
right: auto;
/* [1] */
left: 83.33333% !important; }
.u-pull-10\/12 {
position: relative;
right: 83.33333% !important;
left: auto;
/* [1] */ }
.u-11\/12 {
width: 91.66667% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-11\/12 {
position: relative;
right: auto;
/* [1] */
left: 91.66667% !important; }
.u-pull-11\/12 {
position: relative;
right: 91.66667% !important;
left: auto;
/* [1] */ }
.u-12\/12 {
width: 100% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-12\/12 {
position: relative;
right: auto;
/* [1] */
left: 100% !important; }
.u-pull-12\/12 {
position: relative;
right: 100% !important;
left: auto;
/* [1] */ }
/**
* Create a 12 and a 16 column grid system on screens over 1200px wide, and give
* them a Responsive Suffix of `@lg`, e.g.:
*
*
*/
@media screen and (max-width: 1100px) {
.u-1\/12\@in-between {
width: 8.33333% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/12\@in-between {
position: relative;
right: auto;
/* [1] */
left: 8.33333% !important; }
.u-pull-1\/12\@in-between {
position: relative;
right: 8.33333% !important;
left: auto;
/* [1] */ }
.u-2\/12\@in-between {
width: 16.66667% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/12\@in-between {
position: relative;
right: auto;
/* [1] */
left: 16.66667% !important; }
.u-pull-2\/12\@in-between {
position: relative;
right: 16.66667% !important;
left: auto;
/* [1] */ }
.u-3\/12\@in-between {
width: 25% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/12\@in-between {
position: relative;
right: auto;
/* [1] */
left: 25% !important; }
.u-pull-3\/12\@in-between {
position: relative;
right: 25% !important;
left: auto;
/* [1] */ }
.u-4\/12\@in-between {
width: 33.33333% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/12\@in-between {
position: relative;
right: auto;
/* [1] */
left: 33.33333% !important; }
.u-pull-4\/12\@in-between {
position: relative;
right: 33.33333% !important;
left: auto;
/* [1] */ }
.u-5\/12\@in-between {
width: 41.66667% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-5\/12\@in-between {
position: relative;
right: auto;
/* [1] */
left: 41.66667% !important; }
.u-pull-5\/12\@in-between {
position: relative;
right: 41.66667% !important;
left: auto;
/* [1] */ }
.u-6\/12\@in-between {
width: 50% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-6\/12\@in-between {
position: relative;
right: auto;
/* [1] */
left: 50% !important; }
.u-pull-6\/12\@in-between {
position: relative;
right: 50% !important;
left: auto;
/* [1] */ }
.u-7\/12\@in-between {
width: 58.33333% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-7\/12\@in-between {
position: relative;
right: auto;
/* [1] */
left: 58.33333% !important; }
.u-pull-7\/12\@in-between {
position: relative;
right: 58.33333% !important;
left: auto;
/* [1] */ }
.u-8\/12\@in-between {
width: 66.66667% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-8\/12\@in-between {
position: relative;
right: auto;
/* [1] */
left: 66.66667% !important; }
.u-pull-8\/12\@in-between {
position: relative;
right: 66.66667% !important;
left: auto;
/* [1] */ }
.u-9\/12\@in-between {
width: 75% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-9\/12\@in-between {
position: relative;
right: auto;
/* [1] */
left: 75% !important; }
.u-pull-9\/12\@in-between {
position: relative;
right: 75% !important;
left: auto;
/* [1] */ }
.u-10\/12\@in-between {
width: 83.33333% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-10\/12\@in-between {
position: relative;
right: auto;
/* [1] */
left: 83.33333% !important; }
.u-pull-10\/12\@in-between {
position: relative;
right: 83.33333% !important;
left: auto;
/* [1] */ }
.u-11\/12\@in-between {
width: 91.66667% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-11\/12\@in-between {
position: relative;
right: auto;
/* [1] */
left: 91.66667% !important; }
.u-pull-11\/12\@in-between {
position: relative;
right: 91.66667% !important;
left: auto;
/* [1] */ }
.u-12\/12\@in-between {
width: 100% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-12\/12\@in-between {
position: relative;
right: auto;
/* [1] */
left: 100% !important; }
.u-pull-12\/12\@in-between {
position: relative;
right: 100% !important;
left: auto;
/* [1] */ } }
@media screen and (max-width: 1280px) {
.u-1\/12\@large {
width: 8.33333% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/12\@large {
position: relative;
right: auto;
/* [1] */
left: 8.33333% !important; }
.u-pull-1\/12\@large {
position: relative;
right: 8.33333% !important;
left: auto;
/* [1] */ }
.u-2\/12\@large {
width: 16.66667% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/12\@large {
position: relative;
right: auto;
/* [1] */
left: 16.66667% !important; }
.u-pull-2\/12\@large {
position: relative;
right: 16.66667% !important;
left: auto;
/* [1] */ }
.u-3\/12\@large {
width: 25% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/12\@large {
position: relative;
right: auto;
/* [1] */
left: 25% !important; }
.u-pull-3\/12\@large {
position: relative;
right: 25% !important;
left: auto;
/* [1] */ }
.u-4\/12\@large {
width: 33.33333% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/12\@large {
position: relative;
right: auto;
/* [1] */
left: 33.33333% !important; }
.u-pull-4\/12\@large {
position: relative;
right: 33.33333% !important;
left: auto;
/* [1] */ }
.u-5\/12\@large {
width: 41.66667% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-5\/12\@large {
position: relative;
right: auto;
/* [1] */
left: 41.66667% !important; }
.u-pull-5\/12\@large {
position: relative;
right: 41.66667% !important;
left: auto;
/* [1] */ }
.u-6\/12\@large {
width: 50% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-6\/12\@large {
position: relative;
right: auto;
/* [1] */
left: 50% !important; }
.u-pull-6\/12\@large {
position: relative;
right: 50% !important;
left: auto;
/* [1] */ }
.u-7\/12\@large {
width: 58.33333% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-7\/12\@large {
position: relative;
right: auto;
/* [1] */
left: 58.33333% !important; }
.u-pull-7\/12\@large {
position: relative;
right: 58.33333% !important;
left: auto;
/* [1] */ }
.u-8\/12\@large {
width: 66.66667% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-8\/12\@large {
position: relative;
right: auto;
/* [1] */
left: 66.66667% !important; }
.u-pull-8\/12\@large {
position: relative;
right: 66.66667% !important;
left: auto;
/* [1] */ }
.u-9\/12\@large {
width: 75% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-9\/12\@large {
position: relative;
right: auto;
/* [1] */
left: 75% !important; }
.u-pull-9\/12\@large {
position: relative;
right: 75% !important;
left: auto;
/* [1] */ }
.u-10\/12\@large {
width: 83.33333% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-10\/12\@large {
position: relative;
right: auto;
/* [1] */
left: 83.33333% !important; }
.u-pull-10\/12\@large {
position: relative;
right: 83.33333% !important;
left: auto;
/* [1] */ }
.u-11\/12\@large {
width: 91.66667% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-11\/12\@large {
position: relative;
right: auto;
/* [1] */
left: 91.66667% !important; }
.u-pull-11\/12\@large {
position: relative;
right: 91.66667% !important;
left: auto;
/* [1] */ }
.u-12\/12\@large {
width: 100% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-12\/12\@large {
position: relative;
right: auto;
/* [1] */
left: 100% !important; }
.u-pull-12\/12\@large {
position: relative;
right: 100% !important;
left: auto;
/* [1] */ } }
@media screen and (max-width: 900px) {
.u-1\/12\@medium {
width: 8.33333% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/12\@medium {
position: relative;
right: auto;
/* [1] */
left: 8.33333% !important; }
.u-pull-1\/12\@medium {
position: relative;
right: 8.33333% !important;
left: auto;
/* [1] */ }
.u-2\/12\@medium {
width: 16.66667% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/12\@medium {
position: relative;
right: auto;
/* [1] */
left: 16.66667% !important; }
.u-pull-2\/12\@medium {
position: relative;
right: 16.66667% !important;
left: auto;
/* [1] */ }
.u-3\/12\@medium {
width: 25% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/12\@medium {
position: relative;
right: auto;
/* [1] */
left: 25% !important; }
.u-pull-3\/12\@medium {
position: relative;
right: 25% !important;
left: auto;
/* [1] */ }
.u-4\/12\@medium {
width: 33.33333% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/12\@medium {
position: relative;
right: auto;
/* [1] */
left: 33.33333% !important; }
.u-pull-4\/12\@medium {
position: relative;
right: 33.33333% !important;
left: auto;
/* [1] */ }
.u-5\/12\@medium {
width: 41.66667% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-5\/12\@medium {
position: relative;
right: auto;
/* [1] */
left: 41.66667% !important; }
.u-pull-5\/12\@medium {
position: relative;
right: 41.66667% !important;
left: auto;
/* [1] */ }
.u-6\/12\@medium {
width: 50% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-6\/12\@medium {
position: relative;
right: auto;
/* [1] */
left: 50% !important; }
.u-pull-6\/12\@medium {
position: relative;
right: 50% !important;
left: auto;
/* [1] */ }
.u-7\/12\@medium {
width: 58.33333% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-7\/12\@medium {
position: relative;
right: auto;
/* [1] */
left: 58.33333% !important; }
.u-pull-7\/12\@medium {
position: relative;
right: 58.33333% !important;
left: auto;
/* [1] */ }
.u-8\/12\@medium {
width: 66.66667% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-8\/12\@medium {
position: relative;
right: auto;
/* [1] */
left: 66.66667% !important; }
.u-pull-8\/12\@medium {
position: relative;
right: 66.66667% !important;
left: auto;
/* [1] */ }
.u-9\/12\@medium {
width: 75% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-9\/12\@medium {
position: relative;
right: auto;
/* [1] */
left: 75% !important; }
.u-pull-9\/12\@medium {
position: relative;
right: 75% !important;
left: auto;
/* [1] */ }
.u-10\/12\@medium {
width: 83.33333% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-10\/12\@medium {
position: relative;
right: auto;
/* [1] */
left: 83.33333% !important; }
.u-pull-10\/12\@medium {
position: relative;
right: 83.33333% !important;
left: auto;
/* [1] */ }
.u-11\/12\@medium {
width: 91.66667% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-11\/12\@medium {
position: relative;
right: auto;
/* [1] */
left: 91.66667% !important; }
.u-pull-11\/12\@medium {
position: relative;
right: 91.66667% !important;
left: auto;
/* [1] */ }
.u-12\/12\@medium {
width: 100% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-12\/12\@medium {
position: relative;
right: auto;
/* [1] */
left: 100% !important; }
.u-pull-12\/12\@medium {
position: relative;
right: 100% !important;
left: auto;
/* [1] */ } }
@media screen and (max-width: 640px) {
.u-1\/12\@small {
width: 8.33333% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/12\@small {
position: relative;
right: auto;
/* [1] */
left: 8.33333% !important; }
.u-pull-1\/12\@small {
position: relative;
right: 8.33333% !important;
left: auto;
/* [1] */ }
.u-2\/12\@small {
width: 16.66667% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/12\@small {
position: relative;
right: auto;
/* [1] */
left: 16.66667% !important; }
.u-pull-2\/12\@small {
position: relative;
right: 16.66667% !important;
left: auto;
/* [1] */ }
.u-3\/12\@small {
width: 25% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/12\@small {
position: relative;
right: auto;
/* [1] */
left: 25% !important; }
.u-pull-3\/12\@small {
position: relative;
right: 25% !important;
left: auto;
/* [1] */ }
.u-4\/12\@small {
width: 33.33333% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/12\@small {
position: relative;
right: auto;
/* [1] */
left: 33.33333% !important; }
.u-pull-4\/12\@small {
position: relative;
right: 33.33333% !important;
left: auto;
/* [1] */ }
.u-5\/12\@small {
width: 41.66667% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-5\/12\@small {
position: relative;
right: auto;
/* [1] */
left: 41.66667% !important; }
.u-pull-5\/12\@small {
position: relative;
right: 41.66667% !important;
left: auto;
/* [1] */ }
.u-6\/12\@small {
width: 50% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-6\/12\@small {
position: relative;
right: auto;
/* [1] */
left: 50% !important; }
.u-pull-6\/12\@small {
position: relative;
right: 50% !important;
left: auto;
/* [1] */ }
.u-7\/12\@small {
width: 58.33333% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-7\/12\@small {
position: relative;
right: auto;
/* [1] */
left: 58.33333% !important; }
.u-pull-7\/12\@small {
position: relative;
right: 58.33333% !important;
left: auto;
/* [1] */ }
.u-8\/12\@small {
width: 66.66667% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-8\/12\@small {
position: relative;
right: auto;
/* [1] */
left: 66.66667% !important; }
.u-pull-8\/12\@small {
position: relative;
right: 66.66667% !important;
left: auto;
/* [1] */ }
.u-9\/12\@small {
width: 75% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-9\/12\@small {
position: relative;
right: auto;
/* [1] */
left: 75% !important; }
.u-pull-9\/12\@small {
position: relative;
right: 75% !important;
left: auto;
/* [1] */ }
.u-10\/12\@small {
width: 83.33333% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-10\/12\@small {
position: relative;
right: auto;
/* [1] */
left: 83.33333% !important; }
.u-pull-10\/12\@small {
position: relative;
right: 83.33333% !important;
left: auto;
/* [1] */ }
.u-11\/12\@small {
width: 91.66667% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-11\/12\@small {
position: relative;
right: auto;
/* [1] */
left: 91.66667% !important; }
.u-pull-11\/12\@small {
position: relative;
right: 91.66667% !important;
left: auto;
/* [1] */ }
.u-12\/12\@small {
width: 100% !important; }
/**
* 1. Defensively reset any leftover or conflicting `left`/`right` values.
*/
.u-push-12\/12\@small {
position: relative;
right: auto;
/* [1] */
left: 100% !important; }
.u-pull-12\/12\@small {
position: relative;
right: 100% !important;
left: auto;
/* [1] */ } }
.u-hide-text {
text-indent: -100%;
overflow: hidden;
white-space: nowrap;
font-size: 0; }
.u-visibility-hidden {
visibility: hidden; }
.u-opacity-hidden {
opacity: 0; }
.disable-scrolling {
height: 100%;
overflow: hidden;
width: 100%;
position: fixed; }
@media screen and (max-width: 480px) {
.u-hide\@tiny {
display: none; } }
@media screen and (max-width: 640px) {
.u-hide\@small {
display: none; } }
@media screen and (max-width: 900px) {
.u-hide\@medium {
display: none; } }
@media screen and (max-width: 1100px) {
.u-hide\@in-between {
display: none; } }
@media screen and (max-width: 1280px) {
.u-hide\@large {
display: none; } }
@media screen and (min-width: 480px) {
.u-show\@tiny {
display: none; } }
@media screen and (min-width: 640px) {
.u-show\@small {
display: none; } }
@media screen and (min-width: 900px) {
.u-show\@medium {
display: none; } }
@media screen and (min-width: 1100px) {
.u-show\@in-between {
display: none; } }
@media screen and (min-width: 1280px) {
.u-show\@large {
display: none; } }
.dropup,
.dropdown {
position: relative; }
.dropdown-toggle::after {
display: inline-block;
width: 0;
height: 0;
margin-left: 0.255em;
vertical-align: 0.255em;
content: "";
border-top: 0.3em solid;
border-right: 0.3em solid transparent;
border-bottom: 0;
border-left: 0.3em solid transparent; }
.dropdown-toggle:empty::after {
margin-left: 0; }
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 10rem;
padding: 0.5rem 0;
margin: 0.125rem 0 0;
font-size: 1rem;
color: #091B2B;
text-align: left;
list-style: none;
background-color: #E20715;
background-clip: padding-box;
border: 0 solid rgba(0, 0, 0, 0.15); }
.dropup .dropdown-menu {
margin-top: 0;
margin-bottom: 0.125rem; }
.dropup .dropdown-toggle::after {
display: inline-block;
width: 0;
height: 0;
margin-left: 0.255em;
vertical-align: 0.255em;
content: "";
border-top: 0;
border-right: 0.3em solid transparent;
border-bottom: 0.3em solid;
border-left: 0.3em solid transparent; }
.dropup .dropdown-toggle:empty::after {
margin-left: 0; }
.dropright .dropdown-menu {
margin-top: 0;
margin-left: 0.125rem; }
.dropright .dropdown-toggle::after {
display: inline-block;
width: 0;
height: 0;
margin-left: 0.255em;
vertical-align: 0.255em;
content: "";
border-top: 0.3em solid transparent;
border-bottom: 0.3em solid transparent;
border-left: 0.3em solid; }
.dropright .dropdown-toggle:empty::after {
margin-left: 0; }
.dropright .dropdown-toggle::after {
vertical-align: 0; }
.dropleft .dropdown-menu {
margin-top: 0;
margin-right: 0.125rem; }
.dropleft .dropdown-toggle::after {
display: inline-block;
width: 0;
height: 0;
margin-left: 0.255em;
vertical-align: 0.255em;
content: ""; }
.dropleft .dropdown-toggle::after {
display: none; }
.dropleft .dropdown-toggle::before {
display: inline-block;
width: 0;
height: 0;
margin-right: 0.255em;
vertical-align: 0.255em;
content: "";
border-top: 0.3em solid transparent;
border-right: 0.3em solid;
border-bottom: 0.3em solid transparent; }
.dropleft .dropdown-toggle:empty::after {
margin-left: 0; }
.dropleft .dropdown-toggle::before {
vertical-align: 0; }
.dropdown-divider {
height: 0;
margin: 0.5rem 0;
overflow: hidden;
border-top: 1px solid #bbc0c5; }
.dropdown-item {
display: block;
width: 100%;
padding: 0.25rem 1.5rem;
clear: both;
font-weight: 400;
color: #A20C1B;
text-align: inherit;
white-space: nowrap;
background-color: transparent;
border: 0; }
.dropdown-item:hover, .dropdown-item:focus {
color: #091B2B;
text-decoration: none;
background-color: #E20715; }
.dropdown-item.active, .dropdown-item:active {
color: #FFF;
text-decoration: none;
background-color: #E20715; }
.dropdown-item.disabled, .dropdown-item:disabled {
color: #D8D8D8;
background-color: transparent; }
.dropdown-menu.show {
display: block; }
.dropdown-header {
display: block;
padding: 0.5rem 1.5rem;
margin-bottom: 0;
font-size: 0.875rem;
color: #D8D8D8;
white-space: nowrap; }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
border: 0; }
.sr-only-focusable:active, .sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
overflow: visible;
clip: auto;
white-space: normal;
-webkit-clip-path: none;
clip-path: none; }
.form-control {
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
.form-control::-ms-expand {
background-color: transparent;
border: 0; }
.form-control:focus {
color: #495057;
background-color: #fff;
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
.form-control:-ms-input-placeholder {
color: #6c757d;
opacity: 1; }
.form-control::placeholder {
color: #6c757d;
opacity: 1; }
.form-control:disabled, .form-control[readonly] {
background-color: #e9ecef;
opacity: 1; }
select.form-control:not([size]):not([multiple]) {
height: calc(2.25rem + 2px); }
select.form-control:focus::-ms-value {
color: #495057;
background-color: #fff; }
.form-control-file,
.form-control-range {
display: block;
width: 100%; }
.col-form-label {
padding-top: calc(0.375rem + 1px);
padding-bottom: calc(0.375rem + 1px);
margin-bottom: 0;
font-size: inherit;
line-height: 1.5; }
.col-form-label-lg {
padding-top: calc(0.5rem + 1px);
padding-bottom: calc(0.5rem + 1px);
font-size: 1.25rem;
line-height: 1.5; }
.col-form-label-sm {
padding-top: calc(0.25rem + 1px);
padding-bottom: calc(0.25rem + 1px);
font-size: 0.875rem;
line-height: 1.5; }
.form-control-plaintext {
display: block;
width: 100%;
padding-top: 0.375rem;
padding-bottom: 0.375rem;
margin-bottom: 0;
line-height: 1.5;
background-color: transparent;
border: solid transparent;
border-width: 1px 0; }
.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg {
padding-right: 0;
padding-left: 0; }
.form-control-sm {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
line-height: 1.5; }
select.form-control-sm:not([size]):not([multiple]) {
height: calc(1.8125rem + 2px); }
.form-control-lg {
padding: 0.5rem 1rem;
font-size: 1.25rem;
line-height: 1.5; }
select.form-control-lg:not([size]):not([multiple]) {
height: calc(2.875rem + 2px); }
.form-group {
margin-bottom: 1rem; }
.form-text {
display: block;
margin-top: 0.25rem; }
.form-row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -5px;
margin-left: -5px; }
.form-row > .col,
.form-row > [class*="col-"] {
padding-right: 5px;
padding-left: 5px; }
.form-check {
position: relative;
display: block;
padding-left: 1.25rem; }
.form-check-input {
position: absolute;
margin-top: 0.3rem;
margin-left: -1.25rem; }
.form-check-input:disabled ~ .form-check-label {
color: #6c757d; }
.form-check-label {
margin-bottom: 0; }
.form-check-inline {
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-align: center;
align-items: center;
padding-left: 0;
margin-right: 0.75rem; }
.form-check-inline .form-check-input {
position: static;
margin-top: 0;
margin-right: 0.3125rem;
margin-left: 0; }
.valid-feedback {
display: none;
width: 100%;
margin-top: 0.25rem;
font-size: 80%;
color: #28a745; }
.valid-tooltip {
position: absolute;
top: 100%;
z-index: 5;
display: none;
max-width: 100%;
padding: .5rem;
margin-top: .1rem;
font-size: .875rem;
line-height: 1;
color: #fff;
background-color: rgba(40, 167, 69, 0.8);
border-radius: .2rem; }
.was-validated .form-control:valid, .form-control.is-valid,
.was-validated
.custom-select:valid,
.was-validated form.bbg-ajax-form .form-widget--select select.form-control:valid,
form.bbg-ajax-form .form-widget--select .was-validated select.form-control:valid,
.custom-select.is-valid,
form.bbg-ajax-form .form-widget--select select.is-valid.form-control {
border-color: #28a745; }
.was-validated .form-control:valid:focus, .form-control.is-valid:focus,
.was-validated
.custom-select:valid:focus,
.was-validated form.bbg-ajax-form .form-widget--select select.form-control:valid:focus,
form.bbg-ajax-form .form-widget--select .was-validated select.form-control:valid:focus,
.custom-select.is-valid:focus,
form.bbg-ajax-form .form-widget--select select.is-valid.form-control:focus {
border-color: #28a745;
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); }
.was-validated .form-control:valid ~ .valid-feedback,
.was-validated .form-control:valid ~ .valid-tooltip, .form-control.is-valid ~ .valid-feedback,
.form-control.is-valid ~ .valid-tooltip, .was-validated
.custom-select:valid ~ .valid-feedback, .was-validated form.bbg-ajax-form .form-widget--select select.form-control:valid ~ .valid-feedback, form.bbg-ajax-form .form-widget--select .was-validated select.form-control:valid ~ .valid-feedback,
.was-validated
.custom-select:valid ~ .valid-tooltip,
.was-validated form.bbg-ajax-form .form-widget--select select.form-control:valid ~ .valid-tooltip, form.bbg-ajax-form .form-widget--select
.was-validated select.form-control:valid ~ .valid-tooltip,
.custom-select.is-valid ~ .valid-feedback, form.bbg-ajax-form .form-widget--select select.is-valid.form-control ~ .valid-feedback,
.custom-select.is-valid ~ .valid-tooltip, form.bbg-ajax-form .form-widget--select select.is-valid.form-control ~ .valid-tooltip {
display: block; }
.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
color: #28a745; }
.was-validated .form-check-input:valid ~ .valid-feedback,
.was-validated .form-check-input:valid ~ .valid-tooltip, .form-check-input.is-valid ~ .valid-feedback,
.form-check-input.is-valid ~ .valid-tooltip {
display: block; }
.was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label {
color: #28a745; }
.was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before {
background-color: #71dd8a; }
.was-validated .custom-control-input:valid ~ .valid-feedback,
.was-validated .custom-control-input:valid ~ .valid-tooltip, .custom-control-input.is-valid ~ .valid-feedback,
.custom-control-input.is-valid ~ .valid-tooltip {
display: block; }
.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before {
background-color: #34ce57; }
.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before {
box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(40, 167, 69, 0.25); }
.was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label {
border-color: #28a745; }
.was-validated .custom-file-input:valid ~ .custom-file-label::before, .custom-file-input.is-valid ~ .custom-file-label::before {
border-color: inherit; }
.was-validated .custom-file-input:valid ~ .valid-feedback,
.was-validated .custom-file-input:valid ~ .valid-tooltip, .custom-file-input.is-valid ~ .valid-feedback,
.custom-file-input.is-valid ~ .valid-tooltip {
display: block; }
.was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label {
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); }
.invalid-feedback {
display: none;
width: 100%;
margin-top: 0.25rem;
font-size: 80%;
color: #dc3545; }
.invalid-tooltip {
position: absolute;
top: 100%;
z-index: 5;
display: none;
max-width: 100%;
padding: .5rem;
margin-top: .1rem;
font-size: .875rem;
line-height: 1;
color: #fff;
background-color: rgba(220, 53, 69, 0.8);
border-radius: .2rem; }
.was-validated .form-control:invalid, .form-control.is-invalid,
.was-validated
.custom-select:invalid,
.was-validated form.bbg-ajax-form .form-widget--select select.form-control:invalid,
form.bbg-ajax-form .form-widget--select .was-validated select.form-control:invalid,
.custom-select.is-invalid,
form.bbg-ajax-form .form-widget--select select.is-invalid.form-control {
border-color: #dc3545; }
.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus,
.was-validated
.custom-select:invalid:focus,
.was-validated form.bbg-ajax-form .form-widget--select select.form-control:invalid:focus,
form.bbg-ajax-form .form-widget--select .was-validated select.form-control:invalid:focus,
.custom-select.is-invalid:focus,
form.bbg-ajax-form .form-widget--select select.is-invalid.form-control:focus {
border-color: #dc3545;
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); }
.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-control:invalid ~ .invalid-tooltip, .form-control.is-invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-tooltip, .was-validated
.custom-select:invalid ~ .invalid-feedback, .was-validated form.bbg-ajax-form .form-widget--select select.form-control:invalid ~ .invalid-feedback, form.bbg-ajax-form .form-widget--select .was-validated select.form-control:invalid ~ .invalid-feedback,
.was-validated
.custom-select:invalid ~ .invalid-tooltip,
.was-validated form.bbg-ajax-form .form-widget--select select.form-control:invalid ~ .invalid-tooltip, form.bbg-ajax-form .form-widget--select
.was-validated select.form-control:invalid ~ .invalid-tooltip,
.custom-select.is-invalid ~ .invalid-feedback, form.bbg-ajax-form .form-widget--select select.is-invalid.form-control ~ .invalid-feedback,
.custom-select.is-invalid ~ .invalid-tooltip, form.bbg-ajax-form .form-widget--select select.is-invalid.form-control ~ .invalid-tooltip {
display: block; }
.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
color: #dc3545; }
.was-validated .form-check-input:invalid ~ .invalid-feedback,
.was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-feedback,
.form-check-input.is-invalid ~ .invalid-tooltip {
display: block; }
.was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label {
color: #dc3545; }
.was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before {
background-color: #efa2a9; }
.was-validated .custom-control-input:invalid ~ .invalid-feedback,
.was-validated .custom-control-input:invalid ~ .invalid-tooltip, .custom-control-input.is-invalid ~ .invalid-feedback,
.custom-control-input.is-invalid ~ .invalid-tooltip {
display: block; }
.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before {
background-color: #e4606d; }
.was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before {
box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(220, 53, 69, 0.25); }
.was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label {
border-color: #dc3545; }
.was-validated .custom-file-input:invalid ~ .custom-file-label::before, .custom-file-input.is-invalid ~ .custom-file-label::before {
border-color: inherit; }
.was-validated .custom-file-input:invalid ~ .invalid-feedback,
.was-validated .custom-file-input:invalid ~ .invalid-tooltip, .custom-file-input.is-invalid ~ .invalid-feedback,
.custom-file-input.is-invalid ~ .invalid-tooltip {
display: block; }
.was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label {
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); }
.form-inline {
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-ms-flex-align: center;
align-items: center; }
.form-inline .form-check {
width: 100%; }
@media (min-width: 576px) {
.form-inline label {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 0; }
.form-inline .form-group {
display: -ms-flexbox;
display: flex;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-ms-flex-align: center;
align-items: center;
margin-bottom: 0; }
.form-inline .form-control {
display: inline-block;
width: auto;
vertical-align: middle; }
.form-inline .form-control-plaintext {
display: inline-block; }
.form-inline .input-group {
width: auto; }
.form-inline .form-check {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
width: auto;
padding-left: 0; }
.form-inline .form-check-input {
position: relative;
margin-top: 0;
margin-right: 0.25rem;
margin-left: 0; }
.form-inline .custom-control {
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center; }
.form-inline .custom-control-label {
margin-bottom: 0; } }
.custom-control {
position: relative;
display: block;
min-height: 1.5rem;
padding-left: 1.5rem; }
.custom-control-inline {
display: -ms-inline-flexbox;
display: inline-flex;
margin-right: 1rem; }
.custom-control-input {
position: absolute;
z-index: -1;
opacity: 0; }
.custom-control-input:checked ~ .custom-control-label::before {
color: #fff;
background-color: #007bff; }
.custom-control-input:focus ~ .custom-control-label::before {
box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
.custom-control-input:active ~ .custom-control-label::before {
color: #fff;
background-color: #b3d7ff; }
.custom-control-input:disabled ~ .custom-control-label {
color: #6c757d; }
.custom-control-input:disabled ~ .custom-control-label::before {
background-color: #e9ecef; }
.custom-control-label {
margin-bottom: 0; }
.custom-control-label::before {
position: absolute;
top: 0.25rem;
left: 0;
display: block;
width: 1rem;
height: 1rem;
pointer-events: none;
content: "";
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: #dee2e6; }
.custom-control-label::after {
position: absolute;
top: 0.25rem;
left: 0;
display: block;
width: 1rem;
height: 1rem;
content: "";
background-repeat: no-repeat;
background-position: center center;
background-size: 50% 50%; }
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
background-color: #007bff; }
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"); }
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
background-color: #007bff; }
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E"); }
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
background-color: rgba(0, 123, 255, 0.5); }
.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
background-color: rgba(0, 123, 255, 0.5); }
.custom-radio .custom-control-label::before {
border-radius: 50%; }
.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
background-color: #007bff; }
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E"); }
.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
background-color: rgba(0, 123, 255, 0.5); }
.custom-select, form.bbg-ajax-form .form-widget--select select.form-control {
display: inline-block;
width: 100%;
height: calc(2.25rem + 2px);
padding: 0.375rem 1.75rem 0.375rem 0.75rem;
line-height: 1.5;
color: #495057;
vertical-align: middle;
background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
background-size: 8px 10px;
border: 1px solid #ced4da;
border-radius: 0;
-webkit-appearance: none;
appearance: none; }
.custom-select:focus, form.bbg-ajax-form .form-widget--select select.form-control:focus {
border-color: #80bdff;
outline: 0;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(128, 189, 255, 0.5); }
.custom-select:focus::-ms-value, form.bbg-ajax-form .form-widget--select select.form-control:focus::-ms-value {
color: #495057;
background-color: #fff; }
.custom-select[multiple], form.bbg-ajax-form .form-widget--select select[multiple].form-control, .custom-select[size]:not([size="1"]), form.bbg-ajax-form .form-widget--select select[size].form-control:not([size="1"]) {
height: auto;
padding-right: 0.75rem;
background-image: none; }
.custom-select:disabled, form.bbg-ajax-form .form-widget--select select.form-control:disabled {
color: #6c757d;
background-color: #e9ecef; }
.custom-select::-ms-expand, form.bbg-ajax-form .form-widget--select select.form-control::-ms-expand {
opacity: 0; }
.custom-select-sm {
height: calc(1.8125rem + 2px);
padding-top: 0.375rem;
padding-bottom: 0.375rem;
font-size: 75%; }
.custom-select-lg {
height: calc(2.875rem + 2px);
padding-top: 0.375rem;
padding-bottom: 0.375rem;
font-size: 125%; }
.custom-file {
position: relative;
display: inline-block;
width: 100%;
height: calc(2.25rem + 2px);
margin-bottom: 0; }
.custom-file-input {
position: relative;
z-index: 2;
width: 100%;
height: calc(2.25rem + 2px);
margin: 0;
opacity: 0; }
.custom-file-input:focus ~ .custom-file-control {
border-color: #80bdff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
.custom-file-input:focus ~ .custom-file-control::before {
border-color: #80bdff; }
.custom-file-input:lang(en) ~ .custom-file-label::after {
content: "Browse"; }
.custom-file-label {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 1;
height: calc(2.25rem + 2px);
padding: 0.375rem 0.75rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
border: 1px solid #ced4da; }
.custom-file-label::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 3;
display: block;
height: calc(calc(2.25rem + 2px) - 1px * 2);
padding: 0.375rem 0.75rem;
line-height: 1.5;
color: #495057;
content: "Browse";
background-color: #e9ecef;
border-left: 1px solid #ced4da; }
.bbg-ajax-form-div .modal-content {
background: none;
border: none;
box-shadow: none; }
.bbg-ajax-form-div .modal-content .modal-header {
border: none;
padding-left: 0;
padding-right: 0; }
.bbg-ajax-form-div .modal-content .modal-body {
padding-left: 0;
padding-right: 0; }
form.bbg-ajax-form .bbg-ajax-form {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px; }
form.bbg-ajax-form .bbg-ajax-form .form-group {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
margin-bottom: 1.64286rem; }
@media (min-width: 576px) {
form.bbg-ajax-form .bbg-ajax-form .form-group {
-ms-flex: 0 0 66.66667%;
flex: 0 0 66.66667%;
max-width: 66.66667%; } }
form.bbg-ajax-form .bbg-ajax-form label {
text-transform: none; }
form.bbg-ajax-form .bbg-ajax-form input {
border: solid 1px #ccc;
box-shadow: inset 0 1px 0 0 #ECECEC;
border-radius: 5px;
max-width: unset; }
form.bbg-ajax-form .bbg-ajax-form .form-group--has-error input, form.bbg-ajax-form .bbg-ajax-form .form-group--has-error select {
color: #E20715;
border: solid 1px #E20715;
box-shadow: none; }
form.bbg-ajax-form .bbg-ajax-form .form-group--has-error .help-block {
display: inline-block;
margin-top: 0.71429rem;
color: #E20715; }
form.bbg-ajax-form button[type="submit"]:disabled {
background: #A9A9A9; }
form.bbg-ajax-form button[type="submit"] .spinner {
height: 1.11117rem;
width: 1.11117rem; }
form.bbg-ajax-form input[type="checkbox"] + label::before {
content: " ";
display: inline-block;
height: 1.14286rem;
width: 1.14286rem;
background: url("/frontend/img/checkbox-unchecked.svg") no-repeat;
vertical-align: bottom;
margin-right: 1rem; }
form.bbg-ajax-form input[type="checkbox"] + label::after {
content: "";
display: none; }
form.bbg-ajax-form input[type="checkbox"] + label .form-group__required-symbol {
margin-left: 0.21429rem; }
form.bbg-ajax-form input[type="checkbox"]:checked + label::before {
background: url("/frontend/img/checkbox-checked.svg") no-repeat; }
form.bbg-ajax-form .checkbox {
height: calc(43rem / 14 + 2px);
padding-top: 0.71429rem;
padding-bottom: 0.71429rem; }
form.bbg-ajax-form .form-group--has-error .checkbox {
color: #E20715; }
form.bbg-ajax-form .form-widget--select select.form-control {
box-shadow: inset 0 1px 0 0 #ECECEC;
border-radius: 5px;
height: calc(43rem / 14 + 2px); }
form.bbg-ajax-form .radio {
margin-top: 0.71429rem;
margin-bottom: 0.71429rem; }
form.bbg-ajax-form .radio label {
margin-bottom: 0; }
form.bbg-ajax-form input[type="radio"] + label::before {
content: " ";
display: inline-block;
vertical-align: bottom;
width: 1.21429rem;
height: 1.21429rem;
margin-right: 0.71429rem;
background: url("/frontend/img/radio-unchecked.svg") no-repeat; }
form.bbg-ajax-form input[type="radio"]:checked + label::before {
background: url("/frontend/img/radio-checked.svg") no-repeat; }
form.bbg-ajax-form .form-group--has-error .form-widget--choices {
color: #E20715; }
form.bbg-ajax-form textarea {
box-shadow: inset 0 1px 0 0 #ECECEC;
border-radius: 5px;
width: 100%;
max-width: unset; }