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

.Gotham-Medium {
    font-family: Gotham;
}

.grayBackground {
    background-color: #878582;
}

.grayFontColor {
    color: #B7B7B7;
}

.darkGrayFontColor {
    color: #878582;
}

.whiteFontColor {
    color: #ffffff;
}

.darkGreenBackground {
    background: #13322E;
}

.upperSection {
    height: 59.5%;
}

.lowerSection {
    height: 392px;
}

.rightSection {
    height: 100%;
    min-height: 100vh;
    padding: 75px !important;
    padding-top: 50px !important;
    padding-bottom: 60px !important;
    flex: 90%;
}

.leftSection {
    width: 82px !important;
    flex: 82px !important;
    max-width: 82px !important;
}

.rightSection h1 {
    line-height: inherit;
}

#eurocottonLogo {
    background: url(./Svg/Symbol_Big.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left;
    width: 150px;
    height: 150px;
    margin-bottom: 6em;
    margin-top: 4em;
}

#eurocottonSmallLogo {
    background: url(./Svg/Logotype_White.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left;
    width: 276px;
    height: 43px;
}

#mobileLogo {
    background: url(./Svg/Logotype_Green.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left;
    width: 146px;
    height: 23px;
    align-self: center;
    text-align: center;
    margin: auto;
}

#infoSvg {
    background: url(./Svg/Info_icon.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    height: 31px;
    width: 100%;
    align-self: center;
    float: right !important;
}

#logoBigMobile {
    background: url(./Svg/Symbol_Small.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left;
    width: 107px;
    height: 107px;
    align-self: center;
    margin-left: 27px;
}

.darkGrayFontColor a, .whiteFontColor a {
    color: inherit;
    text-decoration: none;
}

.darkGrayFontColor a:hover, .whiteFontColor a:hover {
    color: inherit;
    text-decoration: none;
}

.displayFlex {
    display: flex;
}

.alignSelfFlexEnd {
    align-self: flex-end;
}

li.nav-item {
    width: 50vw;
    height: 61px;
}

.nav-link {
    height: 100%;
    display: flex !important;
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border-color: transparent !important;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background-color: transparent !important;
    border-color: transparent !important;
}

.nav-tabs .nav-link.active {
    height: 100%;
}

.nav-tabs {
    border-bottom: 0 !important;
}

.tab-pane {
    height: 78vh;
    padding: 25px;
}

.tab-content {
    position: relative;
}

#profile {
    position: absolute;
    width: 100%;
    top: 0;
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    transition: 0.5s ease;
    visibility: hidden;
}

.show#profile {
    height: 78vh;
    padding-bottom: 25px;
    visibility: visible;
}

.paddingTop25 {
    padding-top: 25px;
}

.lowerSectionMobile {
    height: 175px;
    position: absolute;
    width: 100%;
    bottom: 0;
}

.bottomInfo {
    position: absolute;
    width: calc(100% - 200px);
    bottom: 60px;
}

.nav {
    flex-wrap: initial !important;
}

.spaceParagraph {
    margin-top: 25px;
}

@media (min-width: 320px) {
    .display-desktop {
        display: none !important;
    }
    
    .display-mobile {
        display: block !important;
    }
}

@media (min-width: 992px) {
    .display-desktop {
        display: flex !important;
    }
    
    .display-mobile {
        display: none !important;
    }

    .rightSection h1 {
        font-size: 20px;
    }

    .col h5 {
        font-size: 15px;
    }
}

@media (min-width: 1400px) {
    .rightSection h1 {
        font-size: 25px;
    }

    .col h5 {
        font-size: 16px;
    }
}

@media (min-width: 1600px) {
    .rightSection h1 {
        font-size: 30px;
    }

    .col h5 {
        font-size: 18px;
    }
}

@media (min-width: 1900px) {
    .rightSection h1 {
        font-size: 35px;
    }

    .col h5 {
        font-size: 20px;
    }
}