body {
    font-family: var(--defaultFont);
    background-color: #ECEBE7;
}

.row {
    margin-left:auto;
    margin-right:auto;
}
p {
    font-size:16px;
}
h1 {
    font-size:45px;
    font-family: var(--defaultMediumFont);
}
h2 {
    font-size:45px;
    font-family: var(--defaultMediumFont);
}
h3 {
    font-size:28px;
    font-family: var(--defaultFont);
}
h4 {
    font-size:16px;
    font-family: var(--defaultMediumFont);
}

h3.bold {
    font-size:28px;
    font-family: var(--defaultMediumFont);
}

span.bold {
    font-size:inherit;
    font-family: var(--defaultMediumFont);
}

span.semi {
    font-family: var(--defaultMediumFont);
}

.container-fluid {
    padding:0;
}

.mob {
    display:none;
    }

:root {
    --defaultFont: 'FranklinGothicBook';
    --defaultMediumFont: 'FranklinGothicDemi';
    --defaultBoldFont: 'FranklinGothic';
  }

@font-face {
    font-family: 'FranklinGothicDemi';
    src: url(../fonts/BM_FranklinGothicURW-Dem.eot) format('eot'), url(../fonts/BM_FranklinGothicURW-Dem.otf) format('otf'), url(../fonts/BM_FranklinGothicURW-Dem.ttf) format('ttf'), url(../fonts/BM_FranklinGothicURW-Dem.woff) format('woff'), url(../fonts/BM_FranklinGothicURW-Dem.woff2) format('woff2');
  }
  @font-face {
    font-family: 'FranklinGothicBook';
    src: url(../fonts/BM_FranklinGothicURWBoo.eot) format('eot'), url(../fonts/BM_FranklinGothicURWBoo.otf) format('otf'), url(../fonts/BM_FranklinGothicURWBoo.ttf) format('ttf'), url(../fonts/BM_FranklinGothicURWBoo.woff) format('woff'), url(../fonts/BM_FranklinGothicURWBoo.woff2) format('woff2');
  }
  @font-face {
    font-family: 'FranklinGothic';
    src: url(../fonts/FranklinGothicTOTDem.eot) format('eot'), url(../fonts/FranklinGothicTOTDem.otf) format('otf'), url(../fonts/FranklinGothicTOTDem.ttf) format('ttf'), url(../fonts/FranklinGothicTOTDem.woff) format('woff'), url(../fonts/FranklinGothicTOTDem.woff2) format('woff2');
  }


.mt-50 {
    margin-top:50px;
}

.mt-70 {
    margin-top:70px;
}

.mb-30 {
    margin-bottom:30px;
}

.mb-20 {
    margin-bottom:20px;
}

header {
    background: url('../img-new/BHU-2024-hoszig-baumitjatekHU-HEADER3-xxl.jpg') top center no-repeat;
    min-height: 610px;

    height: 100%;
    .logo {
        margin-top:15px;
        margin-left:15px;
    }
    .callout {
        position:absolute;
        padding:30px;
        top:170px;
        margin-left:15px;
        max-width:514px;
        background-color: #DF0A25;
        color:white
    }
}

header .container {
    max-width:1340px;
}

.callout h2 {
        font-family: var(--defaultBoldFont);
        color:white
}

.cards-container {
    display:flex;
    flex-direction: row;
    gap:20px;
    /* padding-left:15px;
    padding-right:15px; */
    .card {
        min-height:450px;
        width:25%;
        max-width:307px;
        padding:20px 10px 10px;
        border-top: 4px solid #fff;
        &.card-1 {
            background: linear-gradient(180deg, #000 6.92%, rgba(0, 0, 0, 0.00) 63.88%), url('../img-new/card-1.jpg'), lightgray 50%;
        }
        &.card-2 {
            background: linear-gradient(180deg, #000 6.92%, rgba(0, 0, 0, 0.00) 63.88%), url('../img-new/card-2.jpg'), lightgray 50%;
            background-position: center;
        }
        &.card-3 {
            background: linear-gradient(180deg, #000 6.92%, rgba(0, 0, 0, 0.00) 63.88%), url('../img-new/2025-card-3.jpg'), lightgray 50%;
        }
        &.card-4 {
            background: linear-gradient(180deg, #000 6.92%, rgba(0, 0, 0, 0.00) 63.88%), url('../img-new/card-4.jpg'), lightgray 50%;
        }
        background-repeat: no-repeat!important;
        background-size: cover!important;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        h3 {
            color:white;
            font-size: 24px;
            /* padding:20px; */
            &.red {
                color: #DF0A25;
            }
        }
    }
    max-width:1310px;
}

.card h3 {
    color:white;
    font-size:24px;
}

.card:hover {
    border-top: 4px solid #DF0A25;

}
button {
    &.red {
      font-family: var(--defaultMediumFont);
      font-style: normal;
      /* font-weight: 500; */
      font-size: 16px;
      line-height: 16px;
      text-align: center;
      text-transform: uppercase;
      color: white;
      border: none;
      cursor: pointer;
      pointer-events: all;
      transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
      background: #DF122C;
      box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
      border-radius: 2px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 10px 44px;
      gap: 10px;

      &:hover {
        background-color: darken(#DF122C, 10%);
      }
      &.w-100 {
        padding: 10px 20px;
        width:100%;
        margin-top: 20px;

      }
    }
    .red:hover {
        background-color: darken(#DF122C, 10%);
      }
    a {
        color:white!important;
    }
    a:hover {
        color:white!important;
        text-decoration: none!important;
    }
}
button.red:hover {
    background-color: #b2081e;
  }

  button a {
    color:white!important;
  }
   button a:hover {
    color:white!important;
	text-decoration: none!important;
  }

 .footer .container {
    max-width: 1340px;
 }

.social {
    margin-top:8px;
    margin-bottom:60px;
    display: flex;
    gap:20px;
    img {
        width: 30px;
        height: 30px;

    }
}

@media screen and (max-width:1921px) {
    header {
        background: url('../img-new/BHU-2024-hoszig-baumitjatekHU-HEADER3-dt.jpg') top center no-repeat;
        min-height: 610px;
        height: 100%;
    }
}

@media screen and (max-width:1360px) {
    header .container{
        max-width:1140px;
    }
    .cards-container{
        max-width:1140px;
    }
    .footer .container{
        max-width:1140px;
    }
}

@media screen and (max-width:992px) {
    body {
        p {
            font-size:16px;
        }
        h1 {
        font-size:36px;
        }
        h2 {
            font-size:30px;
        }
        h3 {
            font-size:20px;
            /* font-family: var(--defaultFont); */
        }
        h3.bold {
            font-size:20px;
            font-family: var(--defaultMediumFont);
        }
    }

    header {
        background: url('../img-new/BHU-2024-hoszig-baumitjatekHU-HEADER3-dt.jpg') center center no-repeat;
        min-height: 400px;
        height: 100%;
        -webkit-background-size: auto;
        -moz-background-size: auto;
        -o-background-size: auto;
        background-size: cover;

        .callout {
            position:absolute;
            padding:30px;
            top:400px;
            max-width:100%;
            background-color: #DF0A25;
            color:white
        }
    }

    .dt {
        display:none;
    }
    .mob {
        display:block;
    }
    .callout {
        padding:20px 16px;
        width:100%;
        background-color: #DF0A25;
        color:white
    }
    .mob-col {
        .cards-container {
            flex-direction: column;
            gap:20px;
            .card {
                min-height:400px;
                width: calc(100% - 30px);
                max-width: 100%;
                padding: 20px 10px 10px;
                background-position: center center!important;
                margin-left: auto;
                margin-right: auto;
                &.card-1 {
                    background: linear-gradient(180deg, rgba(0, 0, 0, 0.50) 6.92%, rgba(0, 0, 0, 0.00) 63.88%), url('../img-new/card-1.jpg'), lightgray 50%;
                }
                &.card-2 {
                    background: linear-gradient(180deg, rgba(0, 0, 0, 0.50) 6.92%, rgba(0, 0, 0, 0.00) 63.88%), url('../img-new/card-2.jpg'), lightgray 50%;
                }
                &.card-3 {
                    background: linear-gradient(180deg, rgba(0, 0, 0, 0.50) 6.92%, rgba(0, 0, 0, 0.00) 63.88%), url('../img-new/2025-card-3.jpg'), lightgray 50%;
                }
                &.card-4 {
                    background: linear-gradient(180deg, rgba(0, 0, 0, 0.50) 6.92%, rgba(0, 0, 0, 0.00) 63.88%), url('../img-new/card-4.jpg'), lightgray 50%;
                }
            }
        }
    }
    p {
        font-size:16px;
    }
    h1 {
    font-size:36px;
    }
    h2 {
        font-size:30px;
    }
    h3 {
        font-size:20px;
        /* font-family: var(--defaultFont); */
    }
    h3.bold {
        font-size:20px;
        font-family: var(--defaultMediumFont);
    }
}

@media screen and (max-width:576px) {
    body {
        p {
            font-size:14px;
        }
        h1 {
        font-size:24px;
        }
        h2 {
            font-size:24px;
        }
        h3 {
            font-size:16px;
            /* font-family: var(--defaultFont); */
        }
        h3.bold {
            font-size:16px;
            font-family: var(--defaultMediumFont);
        }
        h4 {
            font-size:14px;
        }
    }
    .mt-50 {
        margin-top:22px;
    }

    .mt-70 {
        margin-top:30px;
    }

    .mb-30 {
        margin-bottom:22px;
    }

    .mb-20 {
        margin-bottom:20px;
    }

    header {
        background: url('../img-new/headerimg-mob-sml2.jpg') top center no-repeat;
        min-height: 300px;
        height: 100%;
        -webkit-background-size: auto;
        -moz-background-size: auto;
        -o-background-size: auto;
        background-size: auto;
        background-position: top center;
        .logo {
            margin-top:15px;
            margin-left:16px;
            img {
                width:37px;
                height:37px;
            }
        }
    }
    .mob-col {
        .cards-container {
            .card {
                min-height:250px;
            }
        }
    }
    p {
        font-size:14px;
    }
    h1 {
    font-size:24px;
    }
    h2 {
        font-size:24px;
    }
    h3 {
        font-size:16px;
        /* font-family: var(--defaultFont); */
    }
    h3.bold {
        font-size:16px;
        font-family: var(--defaultMediumFont);
    }
    h4 {
        font-size:14px;
    }
}