@font-face {
    font-family: "Lato";
    src: url('../shared/fonts/Lato-Black.ttf');
    font-weight: 900;
}

@font-face {
    font-family: "Lato";
    src: url('../shared/fonts/Lato-BlackItalic.ttf');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: "Lato";
    src: url('../shared/fonts/Lato-Bold.ttf');
    font-weight: 800;
}

@font-face {
    font-family: "Lato";
    src: url('../shared/fonts/Lato-BoldItalic.ttf');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: "Lato";
    src: url('../shared/fonts/Lato-Regular.ttf');
    font-weight: 400;
}

@font-face {
    font-family: "Lato";
    src: url('../shared/fonts/Lato-Italic.ttf');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "Lato";
    src: url('../shared/fonts/Lato-Light.ttf');
    font-weight: 300;
}

@font-face {
    font-family: "Lato";
    src: url('../shared/fonts/Lato-LightItalic.ttf');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: "Lato";
    src: url('../shared/fonts/Lato-Thin.ttf');
    font-weight: 100;
}

@font-face {
    font-family: "Lato";
    src: url('../shared/fonts/Lato-ThinItalic.ttf');
    font-weight: 100;
    font-style: italic;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    min-height: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-family: var(--body-font-family);
    font-size: var(--body-font-size);
    line-height: var(--body-line-height);
    background-color: var(--body-background-colour);
    color: var(--body-colour);
    display: flex;
    flex-direction: column;
}

h1 {
    color: var(--header1-colour);
    font-family: var(--header1-font-family);
    font-size: var(--header1-font-size);
    line-height: var(--header1-line-height);
    text-transform: var(--header1-transform);
    font-weight: var(--header1-weight);
}

h2 {
    color: var(--header2-colour);
    font-family: var(--header2-font-family);
    font-size: var(--header2-font-size);
    line-height: var(--header2-line-height);
    text-transform: var(--header2-transform);
    font-weight: var(--header2-weight);
}

h3 {
    color: var(--header3-colour);
    font-family: var(--header3-font-family);
    font-size: var(--header3-font-size);
    line-height: var(--header3-line-height);
    text-transform: var(--header3-transform);
    font-weight: var(--header3-weight);
}

h4 {
    color: var(--header4-colour);
    font-family: var(--header4-font-family);
    font-size: var(--header4-font-size);
    line-height: var(--header4-line-height);
    text-transform: var(--header4-transform);
    font-weight: var(--header4-weight);
}

a {
    color: var(--link-colour);
    display: inline-block;
    position: relative;
}

a:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--primary-colour);
    transform-origin: bottom right;
    transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
}

a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

img {
    width: 100%;
    height: auto;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.responsive-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.responsive-container iframe,
.responsive-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

div>*:first-child,
section>*:first-child,
main>*:first-child,
article>*:first-child {
    margin-top: 0;
}

div>*:last-child,
section>*:last-child,
main>*:last-child,
article>*:last-child {
    margin-bottom: 0;
}

a.button,
button,
.btn {
    background: none;
    position: relative;
    text-transform: uppercase;
    display: flex;
    border: var(--body-colour) 2px solid;
    outline: none;
    text-align: center;
    font-size: 1rem;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    color: var(--body-colour);
    padding: calc(var(--spacing) / 4) var(--spacing);
    cursor: pointer;
    transition: color 0.3s ease-out;
    overflow: hidden;
    z-index: 1;
}
a.button:before, button:before, .btn:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 110%;
    transform: translateX(-125%) skew(45deg);
    transition: transform 0.3s ease-out;
    content: '';
    z-index: -1;
    background: var(--body-colour);
}
a.button:hover, button:hover, .btn:hover {
    color: var(--body-background-colour);
}

a.button:hover:before, button:hover:before, .btn:hover:before {
    transform: translateX(-25%) skew(45deg);
}

a.button.primary, button.primary, .btn-primary {
    border-color: var(--primary-colour);
    color: var(--primary-colour);
}
a.button.primary:hover, button.primary:hover, .btn-primary:hover {
    color: var(--body-background-colour);
}
a.button.primary:before, button.primary:before, .btn-primary:before {
    background: var(--primary-colour);
}

a.button.secondary, button.secondary, .btn-secondary {
    border-color: var(--secondary-colour);
    color: var(--primary-colour);
}
a.button.secondary:hover, button.secondary:hover, .btn-secondary:hover {
    color: var(--body-background-colour);
}
a.button.secondary:before, button.secondary:before, .btn-secondary:before {
    background: var(--secondary-colour);
}

button.fc-button, button.tertiary, a.button.tertiary, a.button.info, button.info, .btn-info {
    border-color: var(--fourth-colour);
    color: var(--fourth-colour);
}
a.button.tertiary:hover, button.tertiary:hover, .btn-tertiary:hover, a.button.info:hover, button.info:hover, .btn-info:hover {
    color: var(--body-background-colour);
}
a.button.tertiary:before, button.tertiary:before, .btn-tertiary:before, a.button.info:before, button.info:before, .btn-info:before {
    background: var(--fourth-colour);
}

.btn-default {
    border-color: var(--tertiary-colour);
    color: var(--tertiary-colour);
}
a.btn-default.primary:hover, button.btn-default:hover, .btn-default:hover {
    color: var(--body-background-colour);
}
a.btn-default:before, button.btn-default:before, .btn-default:before {
    background: var(--tertiary-colour);
}

button.danger, a.button.danger, .btn-danger {
    border-color: #f00;
    color: #f00;
}
a.button.danger:hover, button.danger:hover, .btn-danger:hover {
    color: var(--body-colour);
}
a.button.danger:before, button.danger:before, .btn-danger:before {
    background: #f00;
}

button.warning, a.button.warning, .btn-warning {
    border-color: var(--secondary-colour);
    color: var(--secondary-colour);
}
a.button.warning:hover, button.warning:hover, .btn-warning:hover {
    color: var(--body-background-colour);
}
a.button.warning:before, button.warning:before, .btn-warning:before {
    background: var(--secondary-colour);
}

a.button.icon:before, button.icon:before, a.fc-button:before, button.fc-button:before {
    content: none;
}

a.button:after, a.btn:after, button:after, .modal button:after {
    content: none;
}

.submitting a.button,
.loading a.button,
a.button.loading,
.submitting button,
.loading button,
button.loading {
    cursor: not-allowed;
    opacity: 0.5;
}

.submitting a.button:after,
.loading a.button:after,
a.button.loading:after,
.submitting button:after,
.loading button:after,
button.loading:after {
    content: '';
    display: inline-block;
    border: 2px solid hsl(222, 100%, 95%);
    border-left-color: rgb(230, 237, 255);
    border-left-color: hsl(243, 80%, 62%);
    border-radius: 50%;
    width: calc(var(--inner-spacing) / 2);
    height: calc(var(--inner-spacing) / 2);
    animation: donut-spin 1.2s linear infinite;
    position: absolute;
    top: 37%;
    right: var(--inner-spacing);
}

.submitting-finished a.button:after,
.submitting-finished button:after {
    content: '✓';
    display: inline-block;
    animation: bounceInBottom 5s ease-in-out;
    position: absolute;
    right: var(--inner-spacing);
    top: 20%;
    opacity: 0;
}

@keyframes donut-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes bounceInBottom {
    0% {
        transform: translateY(100%);
    }

    15% {
        opacity: 1;
        transform: translateY(0%);
    }

    90% {
        opacity: 1;
        transform: translateY(0%);
    }

    100% {
        opacity: 0;
        transform: translateY(-100%);
    }
}

i.loading {
    animation: donut-spin 1.2s linear infinite;
}

.cc_dialog button {
    display: inline-block;
}

article[itemProp="blogPost"] h2 {
    margin-top: 0;
}

.text-columns {
    columns: 2;
}

.text-columns.three-columns {
    columns: 3;
}

.text-columns>p {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

@media (max-width: 768px) {

    .text-columns,
    .text-columns-three-columns {
        columns: 1;
    }
}

.message,
.callout {
    display: block;
    width: 100%;
    padding: var(--inner-spacing);
    background-color: var(--primary-colour);
    color: #fff;
    border: #ccc 1px solid;
    text-align: center;
    margin-bottom: var(--inner-spacing);
}

.message {
    text-transform: capitalize;
}
.message.error {
    background-color: var(--body-colour);
}

.message:empty {
    display: none;
}

main {
    padding: var(--spacing) 0;
}

main>.message {
    margin: var(--inner-spacing) 0;
}

.primary-panel {
    background: linear-gradient(to bottom, var(--primary-colour), var(--secondary-colour));
    color: var(--body-background-colour);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0px var(--spacing);
    margin-bottom: var(--spacing);
}

.panel .padding,
.panel .content,
.primary-panel .padding,
.primary-panel .content {
    padding: var(--inner-spacing);
}

.panel {
    margin-bottom: var(--inner-spacing);
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.95), rgba(240, 240, 240, 0.6));
    border-radius: 1px;
    box-shadow: rgba(0, 0, 0, 0.05) 2px 2px var(--inner-spacing);
    backdrop-filter: blur(10px);
}

.panel h1,
.panel h2 {
    color: var(--body-colour);
}

span.payment-danger {
    font-weight: bold;
    color: red;
}

div.payment-danger {
    display: block;
    background-color: red;
    margin-bottom: 1rem;
    padding: 1rem;
    color: #fff;
}

div.payment-danger a {
    display: inline-block;
    background-color: #fff;
    padding: 0.5rem;
    margin-top: 1rem;
    color: #000;
}

form label {
    display: inline-block;
    margin-top: calc(var(--inner-spacing) / 2);
}

label.tooltip>span {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    position: relative;
}

label.tooltip>span:hover>div.tooltip-content,
div.tooltip-content:hover {
    display: block;
}

div.tooltip-content {
    display: none;
    width: 200px;
    position: absolute;
    top: 1.25rem;
    background: white;
    z-index: 9;
    padding: 1rem;
    border: #ccc 1px solid;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 1rem;
    font-size: 0.75rem;
}

form .label {
    margin-top: calc(var(--inner-spacing) / 2);
}

form .label+label {
    margin-top: 0;
}

form div input:last-child,
form div>.label:last-child {
    /*margin-bottom: calc(var(--inner-spacing) / 2);*/
}

.radio label {
    margin-top: 0;
}

label {
    font-size: calc(var(--body-font-size) * 0.95);
    position: relative;
    display: inline-block;
}

input,
textarea,
select,
#card-element {
    padding: calc(var(--inner-spacing) / 2);
    width: 100%;
    display: block;
    font-size: 1rem;
    background-color: var(--body-background-colour);
    border: rgba(100, 100, 100, 0.5) 1px solid;
    transition: all 0.3s ease-out;
    font-family: var(--body-font-family);
    position: relative;
    z-index: 2;
    box-shadow: rgba(0, 0, 0, 0.1) 0rem 0rem 0rem;
}

input[type="checkbox"],
input[type="radio"] {
    padding: 0;
    width: auto;
    display: inline-block;
    position: relative;
    margin-right: calc(var(--inner-spacing) / 2);
}

input:focus,
textarea:focus,
select:focus,
#card-element.StripeElement--focus {
    box-shadow: rgba(0, 0, 0, 0.05) 0.15rem 0.15rem 0.15rem;
    outline: none;
}

.icon-inline,
.input-with-icon {
    display: flex;
    align-items: stretch;
}

.icon-inline div,
.input-with-icon>i {
    display: flex;
    align-items: center;
    background: rgb(225, 225, 225);
    border: #bbb 1px solid;
    border-right: none;
    padding: 0 calc(1rem / 1.5);
    width: 2.5rem;
    text-align: center;
    transition: all 0.3s ease-out;
    position: relative;
    z-index: 1;
}

.icon-inline:focus-within,
.input-with-icon:focus-within>i {
    box-shadow: rgba(0, 0, 0, 0.1) 0rem 0rem 0rem;
}

.icon-inline div:after,
.input-with-icon>i:after {
    position: absolute;
    width: 1px;
    background-color: #bbb;
    height: 100%;
    content: '';
    top: 0;
    right: 0;
}

.material-design-icon>.material-design-icon__svg {
    bottom: 0 !important;
}

.icon-inline input,
.icon-inline select,
.input-with-icon input,
.input-with-icon select {
    border-left: none;
}

#apply-coupon {
    border-radius: 0;
}

.tabs .tab-menu {}

.tabs .tab-content {}

.tabs ul.tab-menu {
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0;
    padding-bottom: calc(var(--inner-spacing) / 2);
    margin-bottom: 0;
}

.tabs ul.tab-menu li {
    display: inline-block;
}

.tabs ul.tab-menu li a {
    display: inline-block;
    padding: calc(var(--inner-spacing) / 2);
    text-align: center;
    cursor: pointer;
    font-size: 1rem;
}

.tabs ul.tab-menu li a.active {}

.tabs ul.tab-menu li a.active:after {
    transform: scaleX(1);
}

.tabs .tab-content {
    display: none;
    border: #ccc 1px solid;
    padding: var(--inner-spacing);
}

.tabs .tab-content.no-padding {
    padding: 0;
}

.tabs .tab-content.no-border {
    border: none;
}

.tabs .tab-content.active {
    display: block;
}

table {
    width: 100%;
    border-spacing: 0;
}

table td,
table th {
    padding: var(--inner-spacing) calc(var(--inner-spacing) / 2);
    text-align: left;
}

table th {
    background: var(--body-colour);
    color: var(--body-background-colour);
    font-weight: normal;
    padding: calc(var(--inner-spacing) / 2);
}

table th a {
    color: var(--body-background-colour) !important;
}

table tbody tr:nth-child(even) {
    position: relative;
    background: var(--fourth-colour-10);
}

table tbody tr:hover {
    background: linear-gradient(to bottom right, var(--fourth-colour), var(--tertiary-colour));
    color: var(--body-background-colour);
}

table tbody tr:hover .icon-inline {
    color: var(--body-colour);
}

table tbody td {
    cursor: pointer;
}

.toggle-modal {
    cursor: pointer;
}

details {
    margin-bottom: var(--inner-spacing);
    border: rgba(0, 0, 0, 0.25) 1px solid;
}
details > *{
    padding: calc(var(--inner-spacing) / 2) var(--inner-spacing);
    margin: 0;
}

details summary > div {
    display: inline-flex;
    justify-content: space-between;
    width: calc(100% - var(--inner-spacing));
}

details[open] {
    
}

details summary {
    cursor: pointer;
}

.modal {
    width: 100%;
    position: fixed;
    height: 100%;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    transition: all 0.3s ease-out;
    background: var(--primary-colour);
    z-index: 999;
    display: flex;
    align-items: center;
    flex-direction: column;
    color: var(--body-background-colour);
    max-height: 100vh;
    overflow-y: auto;
}

dialog {
    width: 100%;
    overflow-y: auto;
    max-width: 600px;
    max-height: 75vh;
    /*background: linear-gradient(to bottom right, var(--fourth-colour), var(--tertiary-colour));*/
    box-shadow: var(--body-colour) 0px 0px var(--spacing);
    border: var(--body-background-colour) 1px solid;
    transform: translateX(-50%) translateY(-50%);
    z-index: 2;
    position: fixed;
    top: 50%;
    left: 50%;
    margin: 0;
    padding: 0;
    border: none;
}

dialog header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    background: var(--primary-colour);
    padding: var(--inner-spacing);
    z-index: 9;
}

dialog header h1,
dialog header h2,
dialog header h3,
dialog header h4 {
    color: var(--body-background-colour);
    margin: 0;
    font-weight: normal;
}

dialog header .material-design-icon.close-icon {
    cursor: pointer;
    color: var(--body-background-colour);
}

dialog .content {
    padding: var(--inner-spacing);
}

.modal>div {
    max-height: 100vh;
    padding: calc(var(--spacing) * 2);
    min-width: 300px;
    max-width: 75%;
}

.modal.active {
    transform: translateX(0);
}

dialog>button#close {
    position: absolute;
    top: var(--inner-spacing);
    right: var(--inner-spacing);
    background: none;
    color: var(--body-background-colour);
    padding: 0;
}

dialog legend button {
    color: var(--body-background-colour);
}
dialog legend button:before {
    content: none;
}

dialog h3 {
    margin: 0;
    font-weight: normal;
}

dialog > form > fieldset {
    border: none;
    margin: 0;
}

dialog.form {
    border: none;
}

dialog.form > form > fieldset {
    box-shadow: none;
}

dialog.form > form > fieldset > legend {
    margin-left: calc(var(--inner-spacing) * -1);
    width: calc(100% + (var(--inner-spacing) * 2));
    display: flex;
    justify-content: space-between;
    padding: calc(var(--inner-spacing) / 2) var(--inner-spacing) !important;
}

dialog.form > form > fieldset > legend button {
    background: none;
    border: none;
    box-shadow: none;
    cursor: pointer;
    padding: 0;
}

dialog.form > form > fieldset > legend > div {
    display: flex;
    align-items: center;
}

dialog::backdrop {
    backdrop-filter: blur(5px) brightness(75%);
}

.modal h5 {
    color: var(--body-background-colour);
    font-family: var(--header1-font-family);
    font-size: var(--header1-font-size);
    line-height: var(--header1-line-height);
    text-transform: var(--header1-transform);
    font-weight: var(--header1-weight);
    margin-bottom: var(--inner-spacing);
}

.modal .toggle-modal, .modal .close {
    position: fixed;
    top: var(--spacing);
    right: var(--spacing);
    background: none;
    color: var(--body-background-colour);
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0 !important;
    font-size: var(--spacing);
    border: none;
}

.modal .toggle-modal:before, .modal .close:before {
    content: none;
}

.pill {
    border: var(--body-background-colour) 1px solid;
    padding: calc(var(--inner-spacing) / 2);
    margin-right: var(--inner-spacing);
    cursor: pointer;
    transition: all 0.3s ease-out;
}

.pill.active,
.pill:hover {
    background: var(--body-background-colour);
}

footer {
    color: var(--body-background-colour);
    padding: var(--spacing) 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
    margin-top: auto;
}


footer h4 {
    font-size: var(--inner-spacing);
    color: var(--body-background-colour);
    font-weight: 400;
    margin-bottom: 0;
}

footer a.logo {
    display: block;
    width: 100px;
    margin-left: auto;
}

@media (max-width: 768px) {
    footer a.logo {
        margin-left: 0;
    }
}