* {
    margin: 0;
    padding: 0;
    font-family: 'Heebo', sans-serif;
}

html {
    width: 100%;
    height: 100vh;
    scroll-behavior: smooth;
}

body {
    height: 100%;
    width: 100%;
}

.app-wrapper {
    margin-top: 0.5vmax;
    border-radius: 0.1vmax;
    padding-top: 1.1vmax;
    justify-self: center;
    width: 72vmax;
    background-color:#f8f8f85e;
    box-shadow: 0px 0.1vmax 0.23vmax 0px #00000030;
}

.header-container {
    display: grid;
    grid-template-columns: 1fr min-content;
    padding: 0.7vmax 1vmax 2.3vmax 1vmax;
}

.logo {
    grid-column: 1;
    width: 26vmax;
}

.language-selector {
    grid-column: 2;
    display: grid;
    grid-gap: 0.35vmax;
    grid-template-columns: repeat(4, min-content);
    align-items: last baseline;
}

.contacts-language-flag {
    grid-column: 2;
    display: inline-flex;
    grid-gap: 0.35vmax;
    align-items: last baseline;
}

.language-icon-flag {
    width: 1.6vmax;
    user-select: none;
    box-shadow: 0px 0px 0.1vmax 0px;
    border-radius: 0.1vmax;
}

.language-icon {
    width: 1.6vmax;
    cursor: pointer;
    user-select: none;
    box-shadow: 0px 0px 0.1vmax 0px;
    border-radius: 0.1vmax;
}

.language-icon:hover {
    border-style: solid;
    border-width: 0.05vmax;
}

.motto-wrapper {
    display: grid;
    align-items: center;
    height: 32vmax;
    border-radius: 0.15vmax;
    border-width: 0vmax;
    border-top-style: solid;
    border-bottom-style: solid;
    border-color: white;
    background-image: url(./background.jpg);
    background-repeat: no-repeat;
    background-attachment: inherit;
    background-size: 100%;
    position: relative;
}

.company-motto {
    display: grid;
    grid-template-rows: 2.9fr 1fr;
    text-align: center;
    height: 100%;
}

.page-nav {
    position: relative;
    top: 1.2vmax;
    left: -2vmax;
    width: 76vmax;
    height: 4vmax;
    background-color: #fafafa;
    border-radius: 0.15vmax;
    box-shadow: 0px 0.1vmax 0.1vmax 0px #0000001a;
}

.page-nav-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 0.5vmax;
    height: 100%;
}

.page-buttons {
    display: grid;
    grid-template-columns: min-content max-content;
    align-items: center;
    text-align: center;
    height: 100%;
    background-color: #00000006;
    padding-left: 0.4vmax;
    padding-right: 0.4vmax;
    color: #584b4b;
    font-size: 1.4vmax;
}

.page-buttons:hover {
    cursor: pointer;
    user-select: none;
    background-color: #7bbee542;
}

.page-nav-image {
    width: 4.2vmax;
    justify-self: center;
    align-self: center;
    padding-right: 0.5vmax;
}

.company-profile-wrapper {
    display: grid;
    grid-gap: 1vmax;
    padding-left: 6vmax;
    padding-right: 6vmax;
    padding-top: 4vmax;
    margin-bottom: 2vmax;
    border-top-style: solid;
    border-top-width: 0.2vmax;
    border-top-color: #f4f4f4;
}

.recommendations-title {
    grid-column: 1;
    grid-row: 3;
}

.recommendations-list {
    grid-column: 1;
    grid-row: 4;
    overflow-y: auto;
    overflow-x: auto;
}

.recommendations-wrapper {
    display: grid;
    padding: 1vmax;
    justify-content: center;
    grid-gap: 1vmax;
    grid-template-columns: repeat(auto-fit, 7vmax);
}

.recommendations-title {
    font-size: 1.7vmax;
    text-align: center;
}

.recommendations-img {
    align-self: start;
    justify-self: center;
    width: 6vmax;
    cursor: pointer;
    user-select: none;
    box-shadow: -0.1vmax 0.5vmax 0.7vmax 0vmax #0000001c;
}

.recommendations-img:hover {
    box-shadow: -0.1vmax 0.5vmax 0.7vmax 0vmax #0000004a;
}

.company-documents-list {
    grid-column: 1;
    grid-row: 2;
    overflow-y: auto;
    overflow-x: auto;
}

.documents-wrapper {
    display: grid;
    padding: 1vmax;
    justify-content: center;
    grid-gap: 1vmax;
    grid-template-columns: repeat(auto-fit, 7vmax);
}

.documents-img {
    align-self: start;
    justify-self: center;
    width: 6vmax;
    cursor: pointer;
    user-select: none;
    box-shadow: -0.1vmax 0.5vmax 0.7vmax 0vmax #0000001c;
}

.documents-img:hover {
    box-shadow: -0.1vmax 0.5vmax 0.7vmax 0vmax #0000004a;
}


.logistics-wrapper {
    display: grid;
    grid-gap: 1vmax;
    padding-left: 6vmax;
    padding-right: 6vmax;
    padding-top: 3vmax;
    margin-bottom: 2vmax;
    border-top-style: solid;
    border-top-width: 0.2vmax;
    border-top-color: #f4f4f4;
}

.transport-wrapper {
    display: grid;
    grid-gap: 1vmax;
    padding-left: 6vmax;
    padding-right: 6vmax;
    padding-top: 3vmax;
    margin-bottom: 2vmax;
    border-top-style: solid;
    border-top-width: 0.2vmax;
    border-top-color: #f4f4f4;
}

.company-documents-wrapper {
    display: grid;
    grid-gap: 1vmax;
    padding-left: 6vmax;
    padding-right: 6vmax;
    padding-top: 3vmax;
    margin-bottom: 2vmax;
    border-top-style: solid;
    border-top-width: 0.2vmax;
    border-top-color: #f4f4f4;
}

.warehousing-wrapper {
    display: grid;
    grid-gap: 1vmax;
    padding-left: 6vmax;
    padding-right: 6vmax;
    padding-top: 3vmax;
    margin-bottom: 2vmax;
    border-top-style: solid;
    border-top-width: 0.2vmax;
    border-top-color: #f4f4f4;
}

.company-contacts-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1vmax;
    padding-left: 6vmax;
    padding-right: 6vmax;
    padding-top: 3vmax;
    margin-bottom: 2vmax;
    border-top-style: solid;
    border-top-width: 0.2vmax;
    border-top-color: #f4f4f4;
}

.end-of-page-space {
    height: 30vmax;
}

#root {
    display: grid;
}

#language-choice-text {
    color: #737373;
    grid-column: 1;
    font-size: 1.4vmax;
    padding-right: 0.3vmax;
}

#language-en {
    grid-column: 2;
}

#language-bg {
    grid-column: 4;
}

#company-profile-title {
    grid-column: 1;
    grid-row: 1;
    font-size: 2.2vmax;
    color: #03070d;
}

#company-profile-text {
    grid-column: 1;
    grid-row: 2;
    font-size: 1.1vmax;
    color: #061926d1;
    padding-right: 1.5vmax;
}

#CompanyprofileTextPart5 {
    font-size: 1.3vmax;
}

#logistics-title {
    grid-column: 1;
    grid-row: 1;
    font-size: 2.2vmax;
    color: #03070d;
}

#logistics-text {
    grid-column: 1;
    grid-row: 2;
    font-size: 1.1vmax;
    color: #061926d1;
    padding-right: 1.5vmax;
}

#CompanylogisticsTextPart2 {
    font-size: 1.3vmax;
}

#transport-title {
    grid-column: 1;
    grid-row: 1;
    font-size: 2.2vmax;
    color: #03070d;
}

#transport-text {
    grid-column: 1;
    grid-row: 2;
    font-size: 1.1vmax;
    color: #061926d1;
    padding-right: 1.5vmax;
}

#CompanytransportTextPart2 {
    font-size: 1.3vmax;
}

#CompanytransportTextPart7 {
    font-size: 1.3vmax;
}

#CompanytransportTextPart12 {
    font-size: 1.3vmax;
}

#company-documents-title {
    grid-column: 1;
    grid-row: 1;
    font-size: 2.2vmax;
    color: #03070d;
}

#warehousing-title {
    grid-column: 1;
    grid-row: 1;
    font-size: 2.2vmax;
    color: #03070d;
}

#warehousing-text {
    grid-column: 1;
    grid-row: 2;
    font-size: 1.1vmax;
    color: #061926d1;
    padding-right: 1.5vmax;
}

#CompanywarehousingTextPart2 {
    font-size: 1.3vmax;
}

#CompanywarehousingTextPart7 {
    font-size: 1.3vmax;
}

#company-contacts-title {
    grid-column: 1;
    grid-row: 1;
    font-size: 2.2vmax;
    color: #03070d;
}

#address-wrapper {
    font-size: 1.1vmax;
    grid-column: 1;
    grid-row: 2;
}

#address-company-name {
    font-size: 1.3vmax;
    color: #061926d1;
}

#address-company-address {
    font-size: 1.3vmax;
    color: #061926d1;
}

#company-contacts-text {
    grid-column: 1;
    grid-row: 3;
    font-size: 1.1vmax;
    color: #061926d1;
    padding-right: 1.5vmax;
}

#CompanycontactsTextPart1 {
    font-size: 1.5vmax;
}

#CompanycontactsTextPart2 {
    font-size: 1.5vmax;
}

#CompanycontactsTextPart3 {
    font-size: 1.5vmax;
}

#contacts-image-wrapper {
    justify-self: center;
    grid-column: 2;
    grid-row: 1/5;
}

#ISO9001-logo {
    width: 13vmax;
    grid-row: 1;
}

#nsbs-logo {
    width: 13vmax;
}

#nsbs-logo-wrapper {
    grid-row: 1;
}

#nsbs-logo:hover {
    box-shadow: -0.1vmax 0.5vmax 0.7vmax 0vmax #0000004a;
}

#fiata-logo {
    width: 13vmax;
    grid-row: 1;
}

#bvl-logo:hover {
    box-shadow: -0.1vmax 0.5vmax 0.7vmax 0vmax #0000004a;
}

#bvl-logo {
    width: 13vmax;
}

#bvl-logo-wrapper {
    grid-row: 1;
}

#copyright {
    padding-top: 1vmax;
    text-align: center;
    font-size: 1vmax;
    border-top-style: solid;
    border-top-width: 0.2vmax;
    border-top-color: #f4f4f4;
}

@media only screen and (max-width: 600px) {
    .app-wrapper {
      width: 100%;
    }

    .language-selector {
        grid-gap: .7vmax;
    }

    .language-icon {
        width: 3.4vmax;
    }

    .motto-wrapper {
        width: unset;
        left: unset;
    }

    .page-nav {
        height: unset;
        width: unset;
        left: unset;
        padding-top: 1vmax;
        padding-bottom: 1vmax;
    }

    .page-nav-wrapper {
        grid-template-columns: auto;
    }

    .page-buttons {
        text-align: left;
        align-items: center;
        grid-template-rows: auto;
        grid-template-columns: auto 0.9fr;
        font-size: 2.2vmax;
    }

    .page-nav-image {
        width: 6.2vmax;
        padding: 1vmax;
    }

    .company-profile-wrapper {
        padding-left: 1vmax;
        padding-right: 2vmax;
    }

    .logistics-wrapper {
        padding-left: 1vmax;
        padding-right: 2vmax;
    }

    .transport-wrapper {
        padding-left: 1vmax;
        padding-right: 2vmax;
    }

    .company-documents-wrapper {
        padding-left: 1vmax;
        padding-right: 2vmax;
    }

    .warehousing-wrapper {
        padding-left: 1vmax;
        padding-right: 2vmax;
    }

    .company-contacts-wrapper {
        grid-gap: 2vmax;
        padding-left: 1vmax;
        padding-right: 2vmax;
    }

    .recommendations-wrapper {
        height: unset;
        grid-template-columns: repeat(auto-fill, 12vmax);
    }

    .recommendations-title {
        font-size: 3vmax;
        grid-row: 3;
    }
    
    .recommendations-list {
        grid-row: 4;
        overflow-y: auto;
        overflow-x: auto;
    }

    .recommendations-img {
        width: 11vmax;
    }

    .recommendations-img:hover {
        width: 12vmax;
    }

    .documents-wrapper {
        height: unset;
        grid-template-columns: repeat(auto-fill, 12vmax);
    }

    .documents-title {
        font-size: 3vmax;
        grid-row: 3;
    }
    
    .documents-list {
        grid-row: 4;
        overflow-y: auto;
        overflow-x: auto;
    }

    .documents-img {
        width: 11vmax;
    }

    .documents-img:hover {
        width: 12vmax;
    }

    .company-documents-img {
        width: 11vmax;
    }

    .company-documents-img:hover {
        width: 12vmax;
    }

    #language-choice-text {
        font-size: 2.2vmax;
    }

    #company-profile-title {
        font-size: 3vmax;
        padding-left: 1.5vmax;
    }

    #company-profile-text {
        font-size: 2.3vmax;
        padding-left: 1.5vmax;
    }

    #CompanyprofileTextPart5 {
        font-size: 2.5vmax;
    }

    #logistics-title {
        font-size: 3vmax;
        padding-left: 1.5vmax;
    }

    #logistics-text {
        font-size: 2.3vmax;
        padding-left: 1.5vmax;
    }

    #CompanylogisticsTextPart2 {
        font-size: 2.5vmax;
    }

    #transport-title {
        font-size: 3vmax;
        padding-left: 1.5vmax;
    }

    #transport-text {
        font-size: 2.3vmax;
        padding-left: 1.5vmax;
    }

    #CompanytransportTextPart2 {
        font-size: 2.5vmax;
    }
    
    #CompanytransportTextPart7 {
        font-size: 2.5vmax;
    }
    
    #CompanytransportTextPart13 {
        font-size: 2.5vmax;
    }

    #company-documents-title {
        font-size: 3vmax;
        padding-left: 1.5vmax;
    }

    #warehousing-title {
        font-size: 3vmax;
        padding-left: 1.5vmax;
    }

    #warehousing-text {
        font-size: 2.3vmax;
        padding-left: 1.5vmax;
    }

    #CompanywarehousingTextPart2 {
        font-size: 2.5vmax;
    }
    
    #CompanywarehousingTextPart7 {
        font-size: 2.5vmax;
    }

    #company-contacts-title {
        font-size: 3vmax;
        padding-left: 1.5vmax;
        grid-column: 1/3;
        grid-row: 1;
    }

    #address-wrapper {
        font-size: 2.3vmax;
        padding-left: 1.5vmax;
        grid-column: 1/3;
        grid-row: 3;
    }

    #address-company-name {
        font-size: 2.4vmax;
    }

    #address-company-address {
        font-size: 2.3vmax;
    }

    #company-contacts-text {
        font-size: 2.3vmax;
        padding-left: 1.5vmax;
        grid-column: 1/3;
        grid-row: 4;
    }

    #CompanycontactsTextPart1 {
        font-size: 2.5vmax;
    }
    
    #CompanycontactsTextPart2 {
        font-size: 2.5vmax;
    }
    
    #CompanycontactsTextPart3 {
        font-size: 2.5vmax;
    }

    #contacts-image-wrapper {
        grid-row: 2;
        grid-column: 1/3;
        justify-self: center;
    }

    #copyright {
        font-size: 1.7vmax;
    }
}

@media only screen and (max-width: 430px) {

    a {
        word-break: break-word;
    }

    .motto-wrapper {
        background-repeat: unset;
    }

    .header-container {
        grid-gap: 2vmax;
    }

    .page-nav-wrapper {
        padding-left: 0;
        padding-right: 0 !important;
    }

    .language-selector {
        grid-column: 1;
    }

    .recommendations-title {
        font-size: 7vw;
    }

    .company-contacts-wrapper {
        grid-template-columns: 1fr;
    }

    #language-choice-text {
        font-size: 5.2vw;
    }


    #ISO9001-logo {
        grid-row: 1;
    }

    #fiata-logo {
        grid-row: 1;
    }

    .motto-wrapper {
        display: grid;
        align-items: center;
        height: 25vmax;
        border-radius: 0.15vmax;
        border-width: 0vmax;
        border-top-style: solid;
        border-bottom-style: solid;
        border-color: white;
        background-image: url(./background.jpg);
        background-repeat: no-repeat;
        background-attachment: inherit;
        background-size: 100%;
        position: relative;
    }

}

@media only screen and (max-width: 370px) {

    a {
        word-break: break-word;
    }

    .motto-wrapper {
        background-repeat: unset;
    }

    .header-container {
        grid-gap: 2vmax;
    }

    .page-nav-wrapper {
        padding-left: 0;
        padding-right: 0 !important;
    }

    .language-selector {
        grid-column: 1;
    }

    .recommendations-title {
        font-size: 7vw;
    }

    .company-contacts-wrapper {
        grid-template-columns: 1fr;
    }

    #language-choice-text {
        font-size: 5.2vw;
    }

    #ISO9001-logo {
        grid-row: 1;
    }

    #fiata-logo {
        grid-row: 1;
    }

    .motto-wrapper {
        display: grid;
        align-items: center;
        height: 22vmax;
        border-radius: 0.15vmax;
        border-width: 0vmax;
        border-top-style: solid;
        border-bottom-style: solid;
        border-color: white;
        background-image: url(./background.jpg);
        background-repeat: no-repeat;
        background-attachment: inherit;
        background-size: 100%;
        position: relative;
    }

}