/* fonts.css | mady by L2 – LUM */

@charset "UTF-8";

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# 00 Import Fonts
# 01 Global Font Tags
# 02 Fonts
--------------------------------------------------------------*/

/*============================
 ***** # 00 IMPORT FONTS *****
==============================

/* CUSTOMIZED FONT IMPORT */
/* Raleway IMPORT */
@font-face {
    font-family: 'Barlow';
    font-weight: bold;
    src: url('/wp-content/themes/l2-childtheme2020/fonts/Barlow_Semi_Condensed/BarlowSemiCondensed-Bold.ttf') format("truetype");
    font-display: swap;
    font-style: normal;
    font-stretch: semi-condensed;
}
@font-face {
    font-family: 'Barlow';
    font-weight: medium;
    src: url('/wp-content/themes/l2-childtheme2020/fonts/Barlow_Semi_Condensed/BarlowSemiCondensed-Medium.ttf') format("truetype");
    font-display: swap;
    font-style: normal;
        font-stretch: semi-condensed;
}

/* Poppins IMPORT */
@font-face {
    font-family: 'Poppins';
    font-weight: 300;
    src: url('/wp-content/themes/l2-childtheme2020/fonts/Poppins/Poppins-Light.ttf') format("truetype");
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: 'Poppins';
    font-weight: 400;
    src: url('/wp-content/themes/l2-childtheme2020/fonts/Poppins/Poppins-Regular.ttf') format("truetype");
    font-display: swap;
    font-style: normal;
}


/* CUSTOMIZED FONT IMPORT END */

/* //////////// SET UP DIFFERENT TAGS //////////// */

/*============================
 ***** # 01 GLOBAL TAGS *****
==============================

GLOBAL FONTSIZE*/

html {
    font-size: 18px;
}

/*TYPE SETTINGS*/

:root {
    --font-family-headlines: "Barlow", sans-serif;
    --font-family-copy: "Poppins", sans-serif;
    --type-scale: 1.333;
}

/*GLOBAL FONTDEF*/

body {
    font-family: var(--font-family-copy);
    font-weight: 400;
    line-height: 1.5rem;
    color: var(--txt-dark-clr, #212121);
}

/* GLOBAL a TAG */

a {
    outline-width: 0;
    text-decoration: none;
    color: #212121;
}

a:hover {
    outline-width: 0;
    text-decoration: none;
    color: var(--prim-clr);
}

/* GLOBAL p TAG */

p, .copytext h4 {
    font-family: var(--font-family-copy);
    font-size: 1rem;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.56rem;
    letter-spacing: 0.5px;
    margin: 0 0 32px 0;
    text-transform: none;
}

/* GLOBAL li TAG */

li {
    font-family: var(--font-family-copy);
    font-size: 1rem;
    font-weight: 400;
    line-height: 2.25rem;
    letter-spacing: 0.36px;
    color: #212121;
}

/*=====================
 ***** # 02 FONTS *****
=======================

//////////// SET UP h1-h6 TAGS IN MEDIA QUERIES ////////////
USED MEDIA QUERIES: 1600 - 1200px, 1199px - 992px, 991px - 768px, 768px - 576px, 575px - 0px
MEDIA QUERY DESKTOP - ALLE SCREENS MIT RESOLUTION VON WIDTH 1600px - 1200px --> Laptop, Big Desktop */

h1,
h2,
.display,
.header_h1 {
    font-family: var(--font-family-headlines);
    font-weight: 900;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: 0;
    margin: 0 0 1rem 0;
    text-transform: uppercase;
}
h3,
h3 p,
h4,
h5,
h6 {
    font-family: var(--font-family-headlines);
    font-weight: 800;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: 0;
    margin: 0 0 1rem 0;
    overflow-wrap: break-word;
    text-transform: uppercase;
}

h1,
.h1,
.header_h1 {
    font-size: calc(2.5rem + (58 - 48) * (100vw - 575px) / (1920 - 575));
    line-height: calc((2.5rem + (58 - 48) * (100vw - 575px) / (1920 - 575)) * 1.25);
}


h2,
.h2 {
    font-size: calc(2rem + (45 - 40) * (100vw - 575px) / (1920 - 575));
    line-height: calc((2rem + (45 - 40) * (100vw - 575px) / (1920 - 575)) * 1.25);
}

h3,
.h3,
.h3 p {
    font-size: calc(1.5rem + (26 - 24) * (100vw - 575px) / (1920 - 575));
    line-height: calc((1.5rem + (26 - 24) * (100vw - 575px) / (1920 - 575)) * 1.25);
}

h4,
.h4 {
    font-size: calc(1rem + (26 - 20) * (100vw - 575px) / (1920 - 575));
    line-height: calc((1rem + (26 - 20) * (100vw - 575px) / (1920 - 575)) * 1.25);
}

h5,
.h5 {
    font-size: calc(1rem + (16 - 16) * (100vw - 575px) / (1920 - 575));
    line-height: calc((1rem + (16 - 16) * (100vw - 575px) / (1920 - 575)) * 1.25);
}

h6,
.h6 {
    font-size: 14px;
    text-transform: uppercase;
}

.display {
    font-size: calc(3.5rem + (66 - 56) * (100vw - 575px) / (1920 - 575));
    line-height: calc((3.5rem + (66 - 56) * (100vw - 575px) / (1920 - 575)) * 1.25);
}


.subtitle-1,
.subtitle-2,
.p-small p,
a .btn-big p,
a .btn-small,
.caption p,
.overline p {
    font-family: var(--font-family-copy);
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: 0;
}


.subtitle-1,
.subtitle-1 p,
.subtitle-2 p,
.subtitle-1-white {
    font-size: 1.3rem;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.33;
    letter-spacing: 0.23px;
    margin: 0 0 1rem 0;
}

.subtitle-2, .subtitle-2 p {
    font-size: 0.777rem;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.71;
    letter-spacing: 0.1px;
    margin: 0 0 1rem 0;
}

.p-small p {
    font-size: 0.777rem;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.71;
    letter-spacing: 0.25px;
}

a.kc_button.btn-big {
    font-size: 0.777rem;
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    line-height: 2.29;
    letter-spacing: 1.35px;
}

a.kc_button.btn-small {
    font-size: 0.666rem;
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    line-height: 2;
    letter-spacing: 1.16px;
}

.caption, .scapt {
  font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.56;
    letter-spacing: 0.5px;
    color: #313541;
}

.overline {
    font-size: 0.555rem;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.6;
    letter-spacing: 1.5px;
}
.bold{
  font-weight: bold;
}