/*
Theme Name:     Twenty Twenty-Four Child
Theme URI:      https://wordpress.org/themes/twentytwentyfour/
Description:    Child theme for the Twenty Twenty-Four theme
Author:         Axel Dalbard
Author URI:     https://msite.com
Template:       twentytwentyfour
Version:        1.0
License:        GNU General Public License v2 or later
License URI:    https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:    twentytwentyfour-child
*/

/**
****************************************************************************************
*  Fonts
****************************************************************************************
*/
@font-face {
    font-family: 'SuisseIntl-Bold-WebS';
    src: url('fonts/SuisseIntl-Bold-WebS.eot');
    src: url('fonts/SuisseIntl-Bold-WebS.woff2') format('woff2'),
         url('fonts/SuisseIntl-Bold-WebS.woff') format('woff'),
         url('fonts/SuisseIntl-Bold-WebS.ttf') format('truetype'),
		 url('fonts/SuisseIntl-Bold-WebS.eot') format('embedded-opentype'),
         url('fonts/SuisseIntl-Bold-WebS.svg#SuisseIntl-Bold-WebS') format('svg');
}

@font-face {
    font-family: 'SuisseIntl-BoldItalic-WebS';
    src: url('fonts/SuisseIntl-BoldItalic-WebS.eot');
    src: url('fonts/SuisseIntl-BoldItalic-WebS.eot') format('embedded-opentype'),
         url('fonts/SuisseIntl-BoldItalic-WebS.woff2') format('woff2'),
         url('fonts/SuisseIntl-BoldItalic-WebS.woff') format('woff'),
         url('fonts/SuisseIntl-BoldItalic-WebS.ttf') format('truetype'),
         url('fonts/SuisseIntl-BoldItalic-WebS.svg#SuisseIntl-BoldItalic-WebS') format('svg');
}

@font-face {
    font-family: 'SuisseIntl-Book-WebS';
    src: url('fonts/SuisseIntl-Book-WebS.eot');
    src: url('fonts/SuisseIntl-Book-WebS.eot') format('embedded-opentype'),
         url('fonts/SuisseIntl-Book-WebS.woff2') format('woff2'),
         url('fonts/SuisseIntl-Book-WebS.woff') format('woff'),
         url('fonts/SuisseIntl-Book-WebS.ttf') format('truetype'),
         url('fonts/SuisseIntl-Book-WebS.svg#SuisseIntl-Bold-WebS') format('svg');
}

@font-face {
    font-family: 'SuisseIntl-BookItalic-WebS';
    src: url('fonts/SuisseIntl-BookItalic-WebS.eot');
    src: url('fonts/SuisseIntl-BookItalic-WebS.eot') format('embedded-opentype'),
         url('fonts/SuisseIntl-BookItalic-WebS.woff2') format('woff2'),
         url('fonts/SuisseIntl-BookItalic-WebS.woff') format('woff'),
         url('fonts/SuisseIntl-BookItalic-WebS.ttf') format('truetype'),
         url('fonts/SuisseIntl-BookItalic-WebS.svg#SuisseIntl-BookItalic-WebS') format('svg');
}

@font-face {
    font-family: 'SuisseIntl-Light-WebS';
    src: url('fonts/SuisseIntl-Light-WebS.eot');
    src: url('fonts/SuisseIntl-Light-WebS.eot') format('embedded-opentype'),
         url('fonts/SuisseIntl-Light-WebS.woff2') format('woff2'),
         url('fonts/SuisseIntl-Light-WebS.woff') format('woff'),
         url('fonts/SuisseIntl-Light-WebS.ttf') format('truetype'),
         url('fonts/SuisseIntl-Light-WebS.svg#SuisseIntl-Light-WebS') format('svg');
}

@font-face {
    font-family: 'SuisseIntl-LightItalic-WebS';
    src: url('fonts/SuisseIntl-LightItalic-WebS.eot');
    src: url('fonts/SuisseIntl-LightItalic-WebS.eot') format('embedded-opentype'),
         url('fonts/SuisseIntl-LightItalic-WebS.woff2') format('woff2'),
         url('fonts/SuisseIntl-LightItalic-WebS.woff') format('woff'),
         url('fonts/SuisseIntl-LightItalic-WebS.ttf') format('truetype'),
         url('fonts/SuisseIntl-LightItalic-WebS.svg#SuisseIntl-LightItalic-WebS') format('svg');
}

@font-face {
    font-family: 'SuisseIntl-Medium-WebS';
    src: url('fonts/SuisseIntl-Medium-WebS.eot');
    src: url('fonts/SuisseIntl-Medium-WebS.eot') format('embedded-opentype'),
         url('fonts/SuisseIntl-Medium-WebS.woff2') format('woff2'),
         url('fonts/SuisseIntl-Medium-WebS.woff') format('woff'),
         url('fonts/SuisseIntl-Medium-WebS.ttf') format('truetype'),
         url('fonts/SuisseIntl-Medium-WebS.svg#SuisseIntl-LightItalic-WebS') format('svg');
}

@font-face {
    font-family: 'SuisseIntl-MediumItalic-WebS';
    src: url('fonts/SuisseIntl-MediumItalic-WebS.eot');
    src: url('fonts/SuisseIntl-MediumItalic-WebS.eot') format('embedded-opentype'),
         url('fonts/SuisseIntl-MediumItalic-WebS.woff2') format('woff2'),
         url('fonts/SuisseIntl-MediumItalic-WebS.woff') format('woff'),
         url('fonts/SuisseIntl-MediumItalic-WebS.ttf') format('truetype'),
         url('fonts/SuisseIntl-MediumItalic-WebS.svg#SuisseIntl-MediumItalic-WebS') format('svg');
}

@font-face {
    font-family: 'SuisseIntl-Regular-WebS';
    src: url('fonts/SuisseIntl-Regular-WebS.eot');
    src: url('fonts/SuisseIntl-Regular-WebS.eot') format('embedded-opentype'),
         url('fonts/SuisseIntl-Regular-WebS.woff2') format('woff2'),
         url('fonts/SuisseIntl-Regular-WebS.woff') format('woff'),
         url('fonts/SuisseIntl-Regular-WebS.ttf') format('truetype'),
         url('fonts/SuisseIntl-Regular-WebS.svg#SuisseIntl-Regular-WebS') format('svg');
}

@font-face {
    font-family: 'SuisseIntl-RegularItalic-WebS';
    src: url('fonts/SuisseIntl-RegularItalic-WebS.eot');
    src: url('fonts/SuisseIntl-RegularItalic-WebS.eot') format('embedded-opentype'),
         url('fonts/SuisseIntl-RegularItalic-WebS.woff2') format('woff2'),
         url('fonts/SuisseIntl-RegularItalic-WebS.woff') format('woff'),
         url('fonts/SuisseIntl-RegularItalic-WebS.ttf') format('truetype'),
         url('fonts/SuisseIntl-RegularItalic-WebS.svg#SuisseIntl-RegularItalic-WebS') format('svg');
}

@font-face {
    font-family: 'SuisseIntl-SemiBold-WebS';
    src: url('fonts/SuisseIntl-SemiBold-WebS.eot');
    src: url('fonts/SuisseIntl-SemiBold-WebS.eot') format('embedded-opentype'),
         url('fonts/SuisseIntl-SemiBold-WebS.woff2') format('woff2'),
         url('fonts/SuisseIntl-SemiBold-WebS.woff') format('woff'),
         url('fonts/SuisseIntl-SemiBold-WebS.ttf') format('truetype'),
         url('fonts/SuisseIntl-SemiBold-WebS.svg#SuisseIntl-SemiBold-WebS') format('svg');
}

@font-face {
    font-family: 'SuisseIntl-SemiBoldItalic-WebS';
    src: url('fonts/SuisseIntl-SemiBoldItalic-WebS.eot');
    src: url('fonts/SuisseIntl-SemiBoldItalic-WebS.eot') format('embedded-opentype'),
         url('fonts/SuisseIntl-SemiBoldItalic-WebS.woff2') format('woff2'),
         url('fonts/SuisseIntl-SemiBoldItalic-WebS.woff') format('woff'),
         url('fonts/SuisseIntl-SemiBoldItalic-WebS.ttf') format('truetype'),
         url('fonts/SuisseIntl-SemiBoldItalic-WebS.svg#SuisseIntl-SemiBoldItalic-WebS') format('svg');
}

@font-face {
    font-family: 'SuisseIntl-Thin-WebS';
    src: url('fonts/SuisseIntl-Thin-WebS.eot');
    src: url('fonts/SuisseIntl-Thin-WebS.eot') format('embedded-opentype'),
         url('fonts/SuisseIntl-Thin-WebS.woff2') format('woff2'),
         url('fonts/SuisseIntl-Thin-WebS.woff') format('woff'),
         url('fonts/SuisseIntl-Thin-WebS.ttf') format('truetype'),
         url('fonts/SuisseIntl-Thin-WebS.svg#SuisseIntl-Thin-WebS') format('svg');
}

@font-face {
    font-family: 'SuisseIntl-ThinItalic-WebS';
    src: url('fonts/SuisseIntl-ThinItalic-WebS.eot');
    src: url('fonts/SuisseIntl-ThinItalic-WebS.eot') format('embedded-opentype'),
         url('fonts/SuisseIntl-ThinItalic-WebS.woff2') format('woff2'),
         url('fonts/SuisseIntl-ThinItalic-WebS.woff') format('woff'),
         url('fonts/SuisseIntl-ThinItalic-WebS.ttf') format('truetype'),
         url('fonts/SuisseIntl-ThinItalic-WebS.svg#SuisseIntl-ThinItalic-WebS') format('svg');
}


/*
font-family: 'SuisseIntl-Bold-WebS';
font-family: 'SuisseIntl-BoldItalic-WebS';
font-family: 'SuisseIntl-Book-WebS';
font-family: 'SuisseIntl-BookItalic-WebS';
font-family: 'SuisseIntl-Light-WebS';
font-family: 'SuisseIntl-LightItalic-WebS';
font-family: 'SuisseIntl-Medium-WebS';
font-family: 'SuisseIntl-MediumItalic-WebS';
font-family: 'SuisseIntl-Regular-WebS';
font-family: 'SuisseIntl-RegularItalic-WebS';
font-family: 'SuisseIntl-SemiBold-WebS';
font-family: 'SuisseIntl-SemiBoldItalic-WebS';
font-family: 'SuisseIntl-Thin-WebS';
font-family: 'SuisseIntl-ThinItalic-WebS';

*/

body {
    background: #F4F5F6;
}

/* Text Wrapper */
.global-tw-h-xxl {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--Gap-Text-Wrapper-XL, 14px);
	max-width: var(--Width-Text-Wrapper, 740px);
}

.global-tw-h-xl {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--Gap-Text-Wrapper-L, 12px);
	max-width: var(--Width-Text-Wrapper, 740px);
}

.global-tw-h-l, .global-tw-h-m {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--Gap-Text-Wrapper-M, 8px);
	max-width: var(--Width-Text-Wrapper, 740px);
}

.global-tw-h-s {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--Gap-Text-Wrapper-S, 6px);
	max-width: var(--Width-Text-Wrapper, 740px);
}

.global-tw-h-xs, .global-tw-sh-l, .global-tw-sh-n {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--Gap-Text-Wrapper-XS, 4px);
	max-width: var(--Width-Text-Wrapper, 740px);
}

/* New Global Headline */

.new-global-headline, body .new-global-headline {
	font-family: "SuisseIntl-Bold-WebS";
	font-style: normal;
}

.new-global-headline-xs, body .new-global-headline-xs {
	font-size: var(--Typography-Headline-XS-New, 25px);
	line-height: 140%;
	font-weight: 700;
}

.new-global-headline-s, body .new-global-headline-s {
	font-size: var(--Typography-Headline-S-New, 31px);
	line-height: 140%;
	font-weight: 700;
}

.new-global-headline-m, body .new-global-headline-m {
	font-size: var(--Typography-Headline-M-New, 38px);
	line-height: 120%;
	font-weight: 700;
}

.new-global-headline-l, body .new-global-headline-l {
	font-size: var(--Typography-Headline-L-New, 48px);
	line-height: 120%;
	font-weight: 900;
}

.new-global-headline-xl, body .new-global-headline-xl {
	font-size: var(--Typography-Headline-XL-New, 60px);
	line-height: 120%;
	font-weight: 900;
}

.new-global-headline-xxl, body .new-global-headline-xxl {
	font-size: var(--Typography-Headline-XXL-New, 75px);
	line-height: 120%;
	font-weight: 900;
}


/* New Body */

.global-body-normal, body .global-body-normal {
	font-family: "SuisseIntl-Regular-WebS";
	font-size: var(--Typography-Body-Normal, 20px);
	font-style: normal;
	font-weight: 400;
	line-height: 160%;
}

:root {

    /* New Padding Variables */
	--Padding-Section-Top-Bottom: var(--Size-120, 120px);
	--Padding-Section-Right-Left: var(--Size-32, 32px);
	--Padding-Container-Top-Bottom: var(--Size-84, 84px);
	--Padding-Item: var(--Size-40, 40px);
	--Padding-Item-S: var(--Size-28, 28px);
	/* New Padding Variables - END */

    /* New Gap Variables */
	--Gap-Row-Column-Bento: var(--Size-16, 16px);
	--Gap-Row-Column-Text: var(--Size-32, 32px);
	--Gap-Row-Column-Content: var(--Size-64, 64px);
	--Gap-Item: var(--Size-32, 32px);
	--Gap-Item-S: var(--Size-24, 24px);
	--Gap-Text-Wrapper-XS: var(--Size-4, 4px);
	--Gap-Text-Wrapper-S: 6px;
	--Gap-Text-Wrapper-M: var(--Size-8, 8px);
	--Gap-Text-Wrapper-L: var(--Size-12, 12px);
	--Gap-Text-Wrapper-XL: 14px;
	--Gap-Label-Button: var(--Size-12, 12px);
	/* New Gap Variables - END*/

    --Width-Text-Wrapper: 740px;

    
	/* New Variables Headline */
	--Typography-Headline-XS-New: 25px;
	--Typography-Headline-S-New: 31px;
	--Typography-Headline-M-New: 38px;
	--Typography-Headline-L-New: var(--Size-48, 48px);
	--Typography-Headline-XL-New: var(--Size-60, 60px);
	--Typography-Headline-XXL-New: 75px;
	/* New Variables Headline - END*/

    /* New Variables Body */
	--Typography-Body-Normal: var(--Size-20, 20px);
	--Typography-Body-Large: var(--Size-28, 28px);
	--Typography-Body-Button-New: var(--Size-20, 20px);
	--Typography-Body-Label-New: 14px;
	/* New Variables Body - END */
}

@media (max-width: 1024px) {

    :root {

        /* New Padding Variables */
		--Padding-Section-Top-Bottom: var(--Size-80, 80px);
		--Padding-Section-Right-Left: var(--Size-24, 24px);
		--Padding-Container-Top-Bottom: var(--Size-64, 64px);
		--Padding-Item: var(--Size-24, 24px);
		--Padding-Item-S: var(--Size-20, 20px);
		/* New Padding Variables - END */

        /* New Gap Variables */
		--Gap-Row-Column-Bento: 14px;
		--Gap-Row-Column-Text: var(--Size-24, 24px);
		--Gap-Row-Column-Content: var(--Size-48, 48px);
		--Gap-Item: var(--Size-24, 24px);
		--Gap-Item-S: 18px;
		--Gap-Text-Wrapper-XS: 2px;
		--Gap-Text-Wrapper-S: var(--Size-4, 4px);
		--Gap-Text-Wrapper-M: 6px;
		--Gap-Text-Wrapper-L: var(--Size-8, 8px);
		--Gap-Text-Wrapper-XL: var(--Size-12, 12px);
		--Gap-Label-Button: 10px;
		/* New Gap Variables - END*/

        /* New Variables Headline */
		--Typography-Headline-XS-New: var(--Size-20, 20px);
		--Typography-Headline-S-New: 25px;
		--Typography-Headline-M-New: 31px;
		--Typography-Headline-L-New: 38px;
		--Typography-Headline-XL-New: var(--Size-48, 48px);
		--Typography-Headline-XXL-New: var(--Size-60, 60px);
		/* New Variables Headline - END*/

        /* New Variables Body */
		--Typography-Body-Normal: 18px;
		--Typography-Body-Large: var(--Size-24, 24px);
		--Typography-Body-Button-New: var(--Size-16, 16px);
		--Typography-Body-Label-New: 14px;
		/* New Variables Body - END */

    }
}

@media (max-width: 768px) {

    :root {

        /* New Padding Variables */
		--Padding-Section-Top-Bottom: var(--Size-64, 64px);
		--Padding-Section-Right-Left: var(--Size-20, 20px);
		--Padding-Container-Top-Bottom: var(--Size-48, 48px);
		--Padding-Item: var(--Size-20, 20px);
		--Padding-Item-S: var(--Size-16, 16px);
		/* New Padding Variables - END */

        /* New Gap Variables */
		--Gap-Row-Column-Bento: var(--Size-12, 12px);
		--Gap-Row-Column-Text: var(--Size-20, 20px);
		--Gap-Row-Column-Content: var(--Size-32, 32px);
		--Gap-Item: var(--Size-20, 20px);
		--Gap-Item-S: 14px;
		--Gap-Text-Wrapper-XS: 2px;
		--Gap-Text-Wrapper-S: 3px;
		--Gap-Text-Wrapper-M: var(--Size-4, 4px);
		--Gap-Text-Wrapper-L: 6px;
		--Gap-Text-Wrapper-XL: var(--Size-8, 8px);
		--Gap-Label-Button: var(--Size-8, 8px);
		/* New Gap Variables - END*/

        /* New Variables Headline */
		--Typography-Headline-XS-New: var(--Size-20, 20px);
		--Typography-Headline-S-New: var(--Size-20, 20px);
		--Typography-Headline-M-New: 25px;
		--Typography-Headline-L-New: 31px;
		--Typography-Headline-XL-New: 38px;
		--Typography-Headline-XXL-New: var(--Size-48, 48px);
		/* New Variables Headline - END*/

        /* New Variables Body */
		--Typography-Body-Normal: var(--Size-16, 16px);
		--Typography-Body-Large: var(--Size-20, 20px);
		--Typography-Body-Button-New: var(--Size-16, 16px);
		--Typography-Body-Label-New: 14px;
		/* New Variables Body - END */

    }
}

.ib-wrapper {
    background: #F4F5F6;
    display: flex;
    flex-direction: column;
    padding: var(--Padding-Section-Top-Bottom, 120px) var(--Padding-Section-Right-Left, 32px);
    align-items: center;
    justify-content: center;
    max-width: 1220px;
    margin: 0 auto;
    min-height: 90vh;
    width: 100%;
}

.ib-inner-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 800px;
    width: 100%;
    gap: var(--Gap-Row-Column-Content, 64px);
}

.ib-inner-wrapper figure img {
    width: 50%;
    margin: 0;
}

.ib-tw {
    margin: 0;
}

.ib-headline, .ib-paragraph {
    color: #243746;
    margin: 0;
    width: 100%;
    text-align: center;
}

.ib-btn-wrapper {
    margin: 0;
}

.ib-btn-wrapper a {
    display: inline-flex;
    height: 48px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    padding: 0 24px;
    flex-direction: column;
    border-radius: 200px;
    background: #FF6C0E;
    color: #1D2C38;
    border: 1px solid #FF6C0E;
    text-decoration: none;
    text-transform: none;
    font-family: 'SuisseIntl-Medium-WebS';
    font-weight: 500;
    font-style: normal;
    font-size: 20px;
    line-height: 140%;
    transition: opacity 0.3s;
}

.ib-btn-wrapper a:hover, .ib-btn-wrapper a:focus, .ib-btn-wrapper a:active {
    background-color: rgba(255, 108, 14, 0.9);
    color: #1D2C38;
    transition: opacity 0.3s;
}

@media (max-width: 1024px) {
    .ib-btn-wrapper a {
        height: 44px;
        padding: 0 24px;
        font-size: 16px;
        line-height: 140%;
    }
}
