@font-face {
    font-family: 'Platypi';
    src: url('content/font/Platypi-ExtraBold.woff2') format('woff2'),
        url('content/font/Platypi-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Platypi';
    src: url('content/font/Platypi-ExtraBoldItalic.woff2') format('woff2'),
        url('content/font/Platypi-ExtraBoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Platypi';
    src: url('content/font/Platypi-BoldItalic.woff2') format('woff2'),
        url('content/font/Platypi-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Platypi';
    src: url('content/font/Platypi-Bold.woff2') format('woff2'),
        url('content/font/Platypi-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Platypi';
    src: url('content/font/Platypi-Medium.woff2') format('woff2'),
        url('content/font/Platypi-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Platypi';
    src: url('content/font/Platypi-Italic.woff2') format('woff2'),
        url('content/font/Platypi-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Platypi';
    src: url('content/font/Platypi-MediumItalic.woff2') format('woff2'),
        url('content/font/Platypi-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Platypi';
    src: url('content/font/Platypi-Light.woff2') format('woff2'),
        url('content/font/Platypi-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Platypi';
    src: url('content/font/Platypi-LightItalic.woff2') format('woff2'),
        url('content/font/Platypi-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('content/font/Poppins-BoldItalic.woff2') format('woff2'),
        url('content/font/Poppins-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Platypi';
    src: url('content/font/Platypi-Regular.woff2') format('woff2'),
        url('content/font/Platypi-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('content/font/Poppins-Black.woff2') format('woff2'),
        url('content/font/Poppins-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('content/font/Poppins-BlackItalic.woff2') format('woff2'),
        url('content/font/Poppins-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('content/font/Poppins-Bold.woff2') format('woff2'),
        url('content/font/Poppins-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('content/font/Poppins-ExtraBold.woff2') format('woff2'),
        url('content/font/Poppins-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('content/font/Poppins-ExtraLight.woff2') format('woff2'),
        url('content/font/Poppins-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('content/font/Poppins-ExtraBoldItalic.woff2') format('woff2'),
        url('content/font/Poppins-ExtraBoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('content/font/Poppins-ExtraLightItalic.woff2') format('woff2'),
        url('content/font/Poppins-ExtraLightItalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Platypi';
    src: url('content/font/Platypi-SemiBold.woff2') format('woff2'),
        url('content/font/Platypi-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Platypi';
    src: url('content/font/Platypi-SemiBoldItalic.woff2') format('woff2'),
        url('content/font/Platypi-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('content/font/Poppins-SemiBold.woff2') format('woff2'),
        url('content/font/Poppins-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('content/font/Poppins-Italic.woff2') format('woff2'),
        url('content/font/Poppins-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('content/font/Poppins-ThinItalic.woff2') format('woff2'),
        url('content/font/Poppins-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('content/font/Poppins-LightItalic.woff2') format('woff2'),
        url('content/font/Poppins-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('content/font/Poppins-Light.woff2') format('woff2'),
        url('content/font/Poppins-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('content/font/Poppins-Thin.woff2') format('woff2'),
        url('content/font/Poppins-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('content/font/Poppins-MediumItalic.woff2') format('woff2'),
        url('content/font/Poppins-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('content/font/Poppins-Medium.woff2') format('woff2'),
        url('content/font/Poppins-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('content/font/Poppins-Regular.woff2') format('woff2'),
        url('content/font/Poppins-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('content/font/Poppins-SemiBoldItalic.woff2') format('woff2'),
        url('content/font/Poppins-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

:root {
    --bild: all 1s ease-in-out;
    --textF: "Poppins", sans-serif;
    --titlF: "Platypi", serif;
    --darkC: #001F29;
    --mainC: #FFB801;
    --lumiC: #eee;
}

h1 {
    color: white;
    font-family: var(--titlF);
    font-size: 8em;
    padding: 0;
    margin: 0;
    color: var(--darkC);
}

h2 {
    font-family: var(--titlF);
    font-size: 5.4em;
    padding: 0;
    margin: 0;
    margin-top: 90px;
    margin-bottom: 15px;
    color: var(--darkC);
    text-align: center;
}

p, b {
    font-family: var(--textF);
}

main {
    margin: 60px;
}

[class*="row"]  {
    max-width: 1920px;
    margin: auto;
    display: grid;
    grid-gap: 30px;
    padding: 15px 0;
}

.row-2 {
    grid-template-columns: repeat(2, 1fr); 
}

.row-2 .overlay {
    width: 92%;
    height: 88%;
    margin: 4%;
  }

.row-3 {
    grid-template-columns: repeat(3, 1fr); 
}


.row-4 {
    grid-template-columns: repeat(4, 1fr); 
}

.hold img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: all .9s ease-in-out;
}

.hold:hover img {
    opacity: 0.3;
    filter: blur(6px);
    transform: scale(1.2);
    transition: all .9s ease-in-out, transform 1.4s ease-in-out, opacity 2s ease-in-out;
}

.hold {
    height: 100%;
    width: 100%;
    position: relative;
    background: var(--darkC);
    overflow: hidden!important;
    display: block;
    transition: all 0.6s ease-in-out;
    border-radius: 6px;
    box-shadow: 0px 0px 30px -15px var(--darkC);
}

.row-2 .hold::after {
    padding-bottom: 66%;
}

.hold:hover {
    transform: scale(1.0); 
    box-shadow: 0px 0px 30px -7px var(--darkC);
}

.hold::after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.overlay {
    position: absolute; 
    text-align: center;
    box-sizing: border-box;
    top: 0; 
    opacity:0;
    width: 88%;
    height: 88%;
    color: white;
    border: solid 3px;
    border-radius: 3px;
    margin: 6%;
    transition: all 0.6s ease-in-out;
  }
  
.overlay .inner {
    display: block;
    height: 100%;
    transform: translateY(45%);
    color: white;
}

.overlay .inner b, .overlay .inner p {
    padding: 0; 
    line-height: 0;
    font-size: 1em;
}

.overlay .inner b {
    font-size: 1.5em;
}

.hold:hover .overlay {
    opacity: 1;
    transition: all 0.6s ease-in-out;
}

.hold:hover .overlay .inner {
    opacity: 1;
    transition: all 0.6s ease-in-out;
}

#kontakt {
    background-color: var(--lumiC);
    padding: 60px;
    border-radius: 6px;
}

#kontakt p {
    margin-top: -10px;
}

#kontakt p, #kontakt a {
    color: var(--darkC);
}

#kontakt .row {
    grid-gap: 0px;
}