@charset "UTF-8";

/*
Theme Name: Segro Events
Theme URI:
Author: Peppermint
Author URI: https://peppermint.pl/
Description: Custom WordPress theme designed for <code>segro events</code>.
Version: 1.0
Tags: quad, company, custom, marketing, segro, events
*/

@font-face {
    font-family: 'Roboto';
    font-weight: normal;
    src: url('./assets/fonts/Roboto-Medium.woff2') format('woff2'),
        url('./assets/fonts/Roboto-Medium.woff') format('woff');
}

@font-face {
    font-family: 'Roboto Bold';
    font-weight: normal;
    src: url('./assets/fonts/Roboto-Bold.woff2') format('woff2'),
        url('./assets/fonts/Roboto-Bold.woff') format('woff');
}

html {
    overflow-x: hidden;
}

body {
    font-family: 'Roboto', sans-serif;
    overflow-x: hidden;
}

.fw-bold {
    font-family: 'Roboto Bold' !important;
    font-weight: normal !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Roboto', sans-serif;
    overflow-wrap: break-word;
    text-wrap: balance;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

body {
    position: relative;
    width: 100vw;
    height: auto;
    min-height: 100vh;
}

main {
    position: relative;
    width: 100vw;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;   
}

.right-side {
    background-image: url('./assets/img/bg.jpg');
    background-size: cover;
    background-position: right center;
    min-height:100vh;
    height:100%;
}

.form {
    background-color: #FFFFFF;
    height: fit-content;
    width: auto;
    max-width: 476px;
    width: 90%;
}

.text-danger {
    color: rgb(198 12 15) !important;
}

h1 {
    font-size: 36px;
}

.form-control {
    padding: 12px 14px;
    font-size: 14px;
}

.form-check {
    cursor: pointer;
}

.form-check-label {
    font-size: 10px;
    color: #4e4e4e;
    cursor: pointer;
}

#form-status {
    font-size: 14px;
}

#form-status span.error {
    color: #CC171E;
}

#form-status span.success {
    color: #0f9902;
}

@media (max-width: 767.98px) { 
    .right-side {
        background-position: right top;
        min-height:10vh;
    }
    .logo {
        width: 100px;
    }

    .fs-2 {
        font-size: calc(1rem + .1vw) !important;
    }
    .display-5 {
        font-size: calc(1rem + 2vw);
    }
    .h2, h2
        {
            font-size: calc(1rem + .5vw);
        }
}