@import url("https://use.typekit.net/xqz4trq.css");

:root {
    --black: #000000;
    --white: #ffffff;
    --red01: #b0191e;
    --red02: #ffb3b8;
    --grey01: #f2f2f2;
    --grey02: #808080;
    --grey03: #707070;
    --green01: #5cf0a0;
    --blue01: #5cebf0;
    --blue02: #40a4a8;
    --logo-width: 145px;
    --component-margin: 120px;
    --component-margin-mobile: 40px;
    --component-margin-double: 240px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 15px;
    color: var(--black);
    background-color: var(--white);
    width: 100%;
    height: 100%;
}


/* Added by Perran as part of FE review to make footer sticky */
body {
  display: flex;
  flex-direction: column;
}

.umb-block-list {
  flex-grow: 1;
  position:relative;
  z-index:8;
}


ul {
    margin: 30px 0;
    padding-inline-start: 20px;
}

li {
    margin: 10px 0;
    line-height:1.3;
}

p,td,th {
    /*margin: 30px 0;*/
    /* Changed by Perran as part of FE review */
    margin: 25px 0px;
    line-height:1.3;
}
blockquote {
    margin:0px 30px 25px 30px;
    line-height:1.3;
}
blockquote p:last-child {
    margin-bottom: 0px;
}

p:first-child,
blockquote:first-child,
ul:first-child {
    margin-top: 0;
}
p:last-child,
blockquote:last-child,
ul:last-child {
    margin-bottom: 0;
}
address {
	font-style: normal;
}

/* Added by Perran as part of FE review */
.umb-block-list p {
    font-size:20px;
}

.tableWrapper {
	position: relative;
	overflow-x: auto;
	margin:40px 0px;
}
table {
	border: 0px;
	border-collapse: collapse;
	width: 100%;
	margin: 40px 0px;
}
.tableWrapper table {
    margin:0px;   
}
@media(max-width:767px){
    table {
    	width: max-content;
    }
}
td, 
th {
	padding: 7px;
	border: 1px solid rgba(0,0,0,0.5);
}
th {
	background: rgba(0,0,0,0.05);
}
tr:nth-child(2n) td {
	background: rgba(0,0,0,0.03);
}

table,thead,tbody,tr,td,th {
    font-size:inherit;
}
.infographic {
	width:100%;
	position:relative;
}
.infographic::after {
	padding: 49.2%;
	content: "";
	display: block;
}
.infographic iframe {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	width: 100%;
	/* min-height: 360px; */
	border: 0px;
	display: block;
	height: 100%;
}

h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5 {
    margin-bottom:25px;
    margin-top:0px;
    line-height:1.15;
}
@media(max-width:767px){
    h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5 {
        margin-bottom:30px;
    }
}
/*h1,.h1,h2,.h2 {
    margin-bottom:50px;
}*/

h1 + p,.h2 + p,h2 + p,.h2 + p,h3 + p,.h3 + p,h4 + p,.h4 + p,h5 + p,.h5 + p {
    margin-top:0px;
}

.title-text {
    font-family: "bebas-kai", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 150px;
    text-transform: uppercase;
    margin: 0 0 20px 0;
    color: var(--red01);
}

.title-text-sm {
    font-size: 40px;
    color: var(--black);
}

.subtitle-text {
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 35px;
    /* Removed by Perran as part of FE review */
    /*margin: 0;*/
}

.subtitle-text-lg {
    font-size: 50px;
}

.subtitle-text-sm {
    font-size: 25px;
}

.link {
    text-decoration: none;
    color: var(--black);
}

.link-text {
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    color: var(--black);
}

.heebo {
    font-family: "heebo", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.neue-haas {
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.bebas-kai {
    font-family: "bebas-kai", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
}

.rubik {
    font-family: "rubik", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 2;
}

.form-text {
    font-family: "heebo", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
}

.form-text-bold {
    font-family: "heebo", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.outer-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.background-red {
    background-color: var(--red01);
}

.background-grey {
    background-color: var(--grey01);
}

.border-white {
    border: 1px solid var(--white);
    border-width: 1px 0 0 0;
}

.component {
    width: 100%;
    max-width: 1600px;
    /*overflow: hidden;*/
}
/* Added by Perran trying to align component margins */
.umb-block-list .outer-wrapper .component {
    padding-bottom:var(--component-margin);
}
@media(max-width:767px){
    .umb-block-list .outer-wrapper .component {
        padding-bottom:var(--component-margin-mobile);
    } 
}

.umb-block-list .outer-wrapper .component.text-image.full {
    padding-top:var(--component-margin);
}
@media(max-width:767px){
    .umb-block-list .outer-wrapper .component.text-image.full {
        padding-top:0px;
        padding-bottom:0px;
    } 
    .umb-block-list .outer-wrapper[style*="background"]:not([class*="background-"]) {
        margin-bottom:var(--component-margin-mobile);
    } 
    .umb-block-list .outer-wrapper[class*="background"] {
        padding-top:var(--component-margin-mobile);
        padding-bottom:var(--component-margin-mobile);
    }
}

.outer-wrapper[style*="background"] + .outer-wrapper:not([style*="background"]):not([class*="background-"]),
.outer-wrapper[class*="background-"] + .outer-wrapper:not([style*="background"]):not([class*="background-"]){
	margin-top: var(--component-margin);
}
@media(max-width:767px){
    .outer-wrapper[style*="background"] + .outer-wrapper:not([style*="background"]):not([class*="background-"]),
    .outer-wrapper[class*="background-"] + .outer-wrapper:not([style*="background"]):not([class*="background-"]){
        margin-top: var(--component-margin-mobile);
    }
}

.outer-wrapper:first-child .component:not(.banner):not(.banner-small) {
	margin-top: var(--component-margin-double);
}
@media(max-width:767px){
    .outer-wrapper:first-child .component:not(.banner):not(.banner-small) {
    	margin-top: var(--component-margin-mobile);
    }
}

.umb-block-list .outer-wrapper .component.text-quote {
    padding-bottom:0px;   
}
.umb-block-list .outer-wrapper .component.text-quote[style*="background"] {
    padding-bottom:var(--component-margin);   
}
@media(max-width:767px){
    .umb-block-list .outer-wrapper .component.text-quote[style*="background"] {
        padding-bottom:var(--component-margin-mobile);   
    }
    .outer-wrapper.banner-outer .component.banner {
    	padding-bottom: 0px;
    }
}

.arrow-button {
    background: none;
    border: 1px solid var(--red01);
    border-radius: 25px;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 20px;
    font-size: 20px;
    cursor: pointer;
    outline: none;
    text-decoration: none;
    color: var(--black);
    max-width: fit-content;
}

.arrow-button svg {
    stroke: var(--red01);
    fill: none;
    stroke-width: 1.5;
    width: 25px;
}

.arrow-button:hover {
    background: var(--red01);
    color: var(--white);
}

.arrow-button:hover svg * {
    stroke: var(--white);
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 20px;
    padding: 20px;
    text-decoration: none;
    color: var(--white);
    background-repeat: no-repeat;
    background-size: cover;
}

.card img {
	padding-bottom: 20px;
}

.card .info {
    flex: 1;
    margin-bottom: 20px;
}
.card.card--fscnews .info,
.card.card--fscevent .info,
.card.card--fsccasestudy .info {
	display: none;
}



.card .date {
    font-weight: bold;
}
.card.card--fsccasestudy .date {
	display: none;
}

.card .neue-haas {
    font-size: 40px;
    margin: 0;
}

.card p {
    font-size: 20px;
    margin: 0;
}

.card .badge {
    background: var(--white);
    color: var(--black);
    padding: 5px 10px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 5px;
    align-self: flex-start;
}

.more {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: bold;
}

.more svg {
    width: 25px;
    fill: none;
    stroke-width: 1.5;
    stroke: var(--black);
}

.card .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0;
    width: 100%;
    overflow: hidden;
    padding: 0 20px 0;
    background-color: var(--green01);
    color: var(--black);
    transition: all 0.4s ease;
}

.card .overlay svg {
    fill: none;
    stroke-width: 1.5;
    stroke: var(--white);
    position: absolute;
    bottom: 0;
    left: -100%;
    width: 100%;
    height: 175px;
    padding: 20px;
    transition: left 0.4s;
}

.card .overlay p {
    position: relative;
    font-size: 18px;
}

.card:hover .overlay {
    height: 100%;
    padding: 20px;
}

.card:hover .overlay svg {
    left: 0;
    transition: left 0.4s ease 0.2s;
}

.grecaptcha-badge {
	right: calc(100% + 20px) !important;
}

.form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form .row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}

.form .row.justify-end {
    justify-content: flex-end;
}

.form .form-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.form .field-validation-error {
    color: var(--red01);
    font-size: 14px;
}

.form select,
.form textarea,
.form input:not([type="submit"]) {
    appearance: none;
    border-radius: 0;
    background: var(--grey01);
    border: none;
    padding: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    resize: none;
    outline: none;
    width: 100%;
}

.form select,
.form input {
    height: 45px;
}

.form .select {
    position: relative;
}

.form .select img {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--black);
    stroke-width: 1.5;
    transition: transform 0.2s ease;
    pointer-events: none;
}

.form .radio,
.form .checkbox {
    position: relative;
    width: 20px;
    height: 20px;
}

.form .radio input,
.form .checkbox input {
    background: var(--white);
    border: 1px solid var(--green01);
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease;
}
.background-red .form .radio input,
.background-red .form .checkbox input {
    border:1px solid black;   
}

.form .radio input:checked,
.form .checkbox input:checked {
    background: var(--green01);
}
.background-red .form .radio input:checked,
.background-red .form .checkbox input:checked {
    background: black;
}

.form .radio img,
.form .checkbox img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.form .checkbox img {
    width: 15px;
    height: 15px;
}

.form .radio input {
    border-radius: 50%;
}

.form .radio img {
    width: 10px;
    height: 10px;
}

.form .mandatory {
    font-size: 12px;
}

.form .captcha {
    width: 100%;
}

.form .submit {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 30px;
    font-weight: bold;
    color: var(--black);
}
.background-red .form .submit {
	color: white;
}

.form .submit svg {
    fill: none;
    stroke: var(--red01);
    stroke-width: 2;
    width: 30px;
}
.background-red .form .submit svg {
	stroke: white;
}

.component:not(.banner):not(.menu):not(.header):not(.footer):not(#home-banner)
    a:not(.card):not(.arrow-button):not(.more):not(.link) {
    text-decoration: none;
    color: var(--black);
    padding: 0 3px;
    background-image: linear-gradient(var(--red02), var(--red02));
    background-position: 0 100%;
    background-size: 100% 6px;
    background-repeat: no-repeat;
}
.background-red .component:not(.banner):not(.menu):not(.header):not(.footer):not(#home-banner) 
    a:not(.card):not(.arrow-button):not(.more):not(.link) {
	color: white;
	background: none;
	text-decoration: underline;
}
@media (max-width: 768px) {
    .title-text {
        font-size: 75px;
        margin: 0 0 10px 0;
    }

    .title-text-sm {
        font-size: 20px;
    }

    .subtitle-text {
        font-size: 20px;
    }

    .subtitle-text-lg {
        font-size: 40px;
    }

    .link-text {
        font-size: 18px;
    }

    .form select,
    .form textarea,
    .form input {
        font-size: 19px;
    }
}

@media (max-width: 480px) {
    .title-text {
        font-size: 50px;
    }

    .title-text-sm {
        font-size: 20px;
    }

    .subtitle-text {
        font-size: 16px;
    }

    .subtitle-text-lg {
        font-size: 30px;
    }

    .link-text {
        font-size: 15px;
    }
}


.videoWrapper {
	position: relative;
	width: 100%;
	margin:30px 0px;
}
p:last-child .videoWrapper {
    margin-bottom:0px;   
}
.videoWrapper::before {
	content: "";
	padding-bottom: 56.25%;
	width: 100%;
	display: block;
}
.videoWrapper iframe {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
iframe[src*="youtube"],iframe[src*="vimeo"] {
    opacity:0;
    transition:0.3s opacity;
}
.videoWrapper iframe[src*="youtube"],iframe[src*="vimeo"] {
    opacity:1;
}