
    :root {
        --text: #000000;
--links: #E00025;
--titles: #000000;
--page-background: #FFFFFF;
--highlight: #E00025;
--boxes-background: #FFFFFF;
--boxes-border: #000000;
--section-titles: #FFFFFF;
--section-titles-background: #000000;
--header-background: #FFFFFF;
--header-links: #000000;
--footer-background: #FFFFFF;
--footer-links: #E00025;
    }
    
/* ==========================================================================
COLOR BIG HEADER THEME
========================================================================== */

/* 
The CSS rules below apply to the whole portal.
Some suggestions:
- You should add below CSS rules that apply to elements that show up in all pages (such as the 
header or footer) or built-in pages such as the Explore page, the MapBuilder, the ChartBuilder and the API 
page.
- For CSS that applies to a specific user-created page, add it directly in the "CSS" 
tab in the page edit section. This makes it easier to keep track of which classes 
are page specific and which ones are generic and apply to the whole portal.
*/


/* Portal Header - Logo and main navigation
========================================================================== */

.portal-header {
    padding: 0;
    border-bottom: none;
    height: auto;
}

.ods-responsive-menu--collapsed.portal-header {
    height: auto;
    border-bottom: none;
    background-color: #FFFFFF;
}

.ods-responsive-menu-placeholder__container {
    flex: 1 1 auto;
}

.portal-logo-primary {
    margin-left: 0;
    margin-top: 2px;
    height: 90px;
    width: auto;
}

.portal-header-logo-container {
    height: 79px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-between;
        -ms-flex-pack: space-between;
            justify-content: space-between;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;    
    background-color: #FFFFFF; /* background color behind logo for two tone effect */
    padding: 0 13px;
    margin-top: 13px;
    margin-bottom: 13px;
}

.portal-header-logo-container a:hover {
    text-decoration: none;
}

/* Logo */
.ods-front-header__logo {
    width: auto; /* Logo width */
    height: 55px; /* Logo height */
}

/* Logo size in responsive mode */
.ods-responsive-menu--collapsed .ods-front-header__logo {
    width: auto; /* Logo width in mobile mode */
    max-height: 60px; /* Logo max height in mobile mode */
}

.ods-responsive-menu--collapsed .portal-header-logo-container {
    height: 60px;
}

.ods-responsive-menu-placeholder__toggle {
    flex: 0 0 auto;
    position: static;
    order: 1;
    color: #000000;
}

.ods-responsive-menu-collapsible__toggle-button {
    opacity: .7;
}

.ods-responsive-menu-collapsible__toggle-button:hover {
    color: #000000;
    opacity: 1;
}

.ods-responsive-menu-placeholder__toggle:hover {
    background-color: transparent;
}

.portal-navigation {
    border-bottom: 3px solid #E00025;
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.ods-front-header__menu {
    margin: 0 20px 0 0;
}

.ods-front-header__menu-item-link {
    border: none;
    font-size: 1.4rem;
    font-weight: 400;
    text-transform: capitalize;
    letter-spacing: .8px;
    line-height: 50px;
    padding: 0 17px;
    opacity: 1;
}

.ods-front-header__menu-item-link:hover,
.ods-front-header__menu-item-link--active {
    background-color: #E00025;
    color: #FFFFFF; /* Header link color when the link is active */
}


/* Management Menu
   ========================================================================== */

.ods-front-header__management-menu {
    position: absolute;
    top: 90px;
    right: 13px;
    line-height: 50px;
    font-size: .833rem;
}

.ods-front-header__management-menu-item {
    margin: 0 0 0 26px;
}

.ods-front-header__management-menu-item-link--active, 
.ods-front-header__management-menu-item-link:hover {
    border: none;
    color: #000000;
}

.ods-front-header__account-avatar-container {
    margin-bottom: 0;
    vertical-align: middle;
}

.ods-front-header__management-menu-item--backoffice {
    padding: 0;
    border: none;
    background: none;
}

/* Button "Back Office" in header */
.ods-front-header__management-menu-item--backoffice .ods-front-header__management-menu-item-link--backoffice {
    display: inline-block;
    color: #000000;
    border: 1px solid #000000;
    padding: 5px;
    background-color: transparent;  
    border-radius: 4px;
}

.ods-front-header__management-menu-item-link--backoffice:hover {
    color: #FFFFFF;
    background-color: #000000;
}

.ods-front-header__management-menu-item-link {
    padding-bottom: 0;
    color: #000000;
}


/* Header - Mobile (small screens)
   ========================================================================== */

.ods-responsive-menu-placeholder.ods-responsive-menu-placeholder--active {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.ods-responsive-menu--collapsed .ods-responsive-menu-collapsible__content {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.ods-responsive-menu-collapsible--collapsed .portal-header-logo-container {
    display: none;
}

.ods-responsive-menu-collapsible--collapsed .ods-front-header__menu-item-link {
    width: 100%;
    border-left: none;
}

.ods-responsive-menu-collapsible--collapsed .portal-navigation,
.ods-responsive-menu-collapsible--collapsed .ods-front-header__menu,
.ods-responsive-menu-collapsible--collapsed .portal-management-menu {
    width: 100%;
}

/* Management Menu - Mobile (small screens)
   ========================================================================== */

.ods-responsive-menu-collapsible--collapsed .ods-front-header__management-menu {
    padding: 13px;
}

.ods-responsive-menu-collapsible--collapsed .ods-front-header__management-menu-item {
    padding-left: 0;
}

.ods-responsive-menu-collapsible--collapsed .ods-front-header__management-menu-item--backoffice {
    padding: 0;
}

.ods-responsive-menu-collapsible--collapsed .ods-front-header__management-menu-item-link--backoffice {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}


/**
 * @license
 * MyFonts Webfont Build ID 3931219, 2020-07-30T09:49:43-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: UniversLTPro-55Roman by Linotype
 * URL: https://www.myfonts.com/fonts/linotype/univers/pro-55-roman/
 * Copyright: Copyright &amp;#x00A9; 2017 Monotype GmbH. All rights reserved.
 * 
 * Webfont: UniversLTPro-65Bold by Linotype
 * URL: https://www.myfonts.com/fonts/linotype/univers/pro-65-bold/
 * Copyright: Copyright &amp;#x00A9; 2014 Monotype GmbH. All rights reserved.
 * 
 * 
 * 
 * © 2020 MyFonts Inc



body {
    font-family: Univers LT Roman;
}
  
@font-face {
  font-family: "Univers LT Roman";
  src: url('https://s3-eu-central-1.amazonaws.com/aws-ec2-eu-central-1-opendatasoft-staticfileset/stadt-stgallen/theme_font/5c8d59c2-9c85-4a22-88e3-bf3fba01dcd8.woff2') format('woff2'), url('https://s3-eu-central-1.amazonaws.com/aws-ec2-eu-central-1-opendatasoft-staticfileset/stadt-stgallen/theme_font/fc51d03b-0d7d-45df-9415-3c6270c80749.woff') format('woff');
}
@font-face {
  font-family: "Univers LT Bold";
  src: url('https://s3-eu-central-1.amazonaws.com/aws-ec2-eu-central-1-opendatasoft-staticfileset/stadt-stgallen/theme_font/8a711a0d-3f17-4bfe-887b-6229858332b3.woff2') format('woff2'), url('https://s3-eu-central-1.amazonaws.com/aws-ec2-eu-central-1-opendatasoft-staticfileset/stadt-stgallen/theme_font/05a79c4b-9e9d-46e4-9d4b-610be05371c4.woff') format('woff');
}

*/