/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url("../fonts/roboto-v18-latin-300-3700954b70d2cae8839758d768da4ae2.eot"); /* IE9 Compat Modes */
    src: local('Roboto Light'), local('Roboto-Light'),
         url("../fonts/roboto-v18-latin-300-3700954b70d2cae8839758d768da4ae2.eot") format('embedded-opentype'), /* IE6-IE8 */
         url("../fonts/roboto-v18-latin-300-742706a01668a6ad781d6e12074629d8.woff2") format('woff2'), /* Super Modern Browsers */
         url("../fonts/roboto-v18-latin-300-647eaeb5bd8a79662bf971e741d460da.woff") format('woff'), /* Modern Browsers */
         url("../fonts/roboto-v18-latin-300-17456785afa1d7a7b1b279ababb30a16.ttf") format('truetype'), /* Safari, Android, iOS */
         url("../fonts/roboto-v18-latin-300-b86adc0c85cf6619313d2aadf9460e5e.svg") format('svg'); /* Legacy iOS */
}

/* roboto-regular - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/roboto-v18-latin-regular-595cadbe8aa851d707d27c479faf2a91.eot"); /* IE9 Compat Modes */
    src: local('Roboto'), local('Roboto-Regular'),
         url("../fonts/roboto-v18-latin-regular-595cadbe8aa851d707d27c479faf2a91.eot") format('embedded-opentype'), /* IE6-IE8 */
         url("../fonts/roboto-v18-latin-regular-c576d1093bc44252e3db30d37d04eead.woff2") format('woff2'), /* Super Modern Browsers */
         url("../fonts/roboto-v18-latin-regular-c3613f8013b05836e52c86a3cff04c4e.woff") format('woff'), /* Modern Browsers */
         url("../fonts/roboto-v18-latin-regular-6061c5f1e52cdd4221c688ccf97ca3d0.ttf") format('truetype'), /* Safari, Android, iOS */
         url("../fonts/roboto-v18-latin-regular-b8d800dbe0cb4b18b69d337698d2bbb6.svg") format('svg'); /* Legacy iOS */
}

/* roboto-500 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url("../fonts/roboto-v18-latin-500-e894e93b14d38ddff023f630e61742e8.eot"); /* IE9 Compat Modes */
    src: local('Roboto Medium'), local('Roboto-Medium'),
         url("../fonts/roboto-v18-latin-500-e894e93b14d38ddff023f630e61742e8.eot") format('embedded-opentype'), /* IE6-IE8 */
         url("../fonts/roboto-v18-latin-500-bceb7693c9636e0d14576f5102cdfda9.woff2") format('woff2'), /* Super Modern Browsers */
         url("../fonts/roboto-v18-latin-500-0cdb6486f7f480c7728e04be4b49522a.woff") format('woff'), /* Modern Browsers */
         url("../fonts/roboto-v18-latin-500-01488ee79718d7b00a6aeac343fc329e.ttf") format('truetype'), /* Safari, Android, iOS */
         url("../fonts/roboto-v18-latin-500-82744339445e6c3f16bbdad55dea77cc.svg") format('svg'); /* Legacy iOS */
}

/* roboto-700 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/roboto-v18-latin-700-faaea4979839b81d33d22d3d413db413.eot"); /* IE9 Compat Modes */
    src: local('Roboto Bold'), local('Roboto-Bold'),
         url("../fonts/roboto-v18-latin-700-faaea4979839b81d33d22d3d413db413.eot") format('embedded-opentype'), /* IE6-IE8 */
         url("../fonts/roboto-v18-latin-700-5c613f5ee245d78e53c559ed2685ab27.woff2") format('woff2'), /* Super Modern Browsers */
         url("../fonts/roboto-v18-latin-700-5c55e4a15878129bed98ea431bfc0588.woff") format('woff'), /* Modern Browsers */
         url("../fonts/roboto-v18-latin-700-709eb229ffe9236faa49bbb7effea8f1.ttf") format('truetype'), /* Safari, Android, iOS */
         url("../fonts/roboto-v18-latin-700-2bcb58c25d847f78dbcf6873a33b11c8.svg") format('svg'); /* Legacy iOS */
}

* {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {  
    position: relative;
    margin: 0;
    border: 0;
    background-color: #F3F3F3;
    font-size: 0;
}

body.full-screen {  
    position: fixed;
    right: 0;
    left: 0;
    overflow-y: hidden;
}

body.locked { 
    overflow-y: hidden;
}

.print-only {
    display: none;
}

.static-page {
    margin-right: auto;
    margin-left: auto;
    max-width: 1260px;
}

body.full-screen .static-page {
    margin-right: 0;
    margin-left: 0;
    max-width: 100%;
}

.page-content {
    background-color: #FFF;
    box-shadow: 0px 0px 20px 10px rgba(200,200,200,0.15);
}

#error-message-panel {
    margin: 100px 14px;
    text-align: center;
}

#error-message-panel h1 {
    margin: 40px;
    color: #AAA;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 60px;
}

#error-message-panel p {
    position: relative;
    max-width: 800px;
    margin: 40px auto;
    color: #AAA;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 24px;
}

#error-message-panel a,
#error-message-panel a:visited {
    color: #277CCC;
    font-family: "Roboto", Arial, sans-serif; 
    font-weight: 300;
    font-size: 18px;
    text-decoration: none;
}

#error-message-panel a:hover {
    text-decoration: underline;
}
.standard-button {
    display: inline-block;
    padding: 12px 16px;
    background-color: #4A7DBE;
    background-color: #28528A;
    color: #FFF;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 14px;
    text-transform: uppercase;
    border-radius: 2px;
    -moz-transition: background-color 0.2s, color 0.2s;
    -webkit-transition: background-color 0.2s, color 0.2s;
    -o-transition: background-color 0.2s, color 0.2s;
    transition: background-color 0.2s, color 0.2s;
    cursor: pointer; 
}

.standard-button:hover,
.standard-button:focus {
    background-color: #2D5D9C;
    color: #FFF;
}

.standard-input,
.standard-menu,
.standard-textarea {
    box-sizing: border-box;
    padding: 8px;
    background-color: #FFF;
    border: 1px solid #888;
    border-radius: 0;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
}

.standard-input:focus,
.standard-menu:focus,
.standard-textarea:focus { 
    border: 1px solid #222;
}

.standard-textarea { 
    resize: vertical;
}

.standard-input.error, 
.standard-input.error:focus {
    border: 1px solid rgb(186,55,46);
    background-color: #F7C8C5;
    box-shadow: inset 0 0 0 1px rgb(186,55,46);
}

.standard-close-button {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    opacity: 1;
}

.standard-close-button:hover {
    opacity: 0.7;
}

.standard-close-button::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 24px;
    height: 0;
    margin: auto;
    border-top: 3.8px solid #222;
    transform: rotate(45deg);
    transform-origin: center;
}

.standard-close-button::after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 24px;
    height: 0;
    margin: auto;
    border-top: 3.8px solid #222;
    transform: rotate(-45deg);
    transform-origin: center;
}

.thin-close-button {
    position: absolute;
    width: 30px;
    height: 30px;
    opacity: 1;
    cursor: pointer;
}

.thin-close-button:hover {
    opacity: 0.7;
}

.thin-close-button::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 30px;
    height: 0;
    margin: auto;
    border-top: 2px solid #222;
    transform: rotate(45deg);
    transform-origin: center;
}

.thin-close-button::after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 30px;
    height: 0;
    margin: auto;
    border-top: 2px solid #222;
    transform: rotate(-45deg);
    transform-origin: center;
}

.thin-close-button.light::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 28px;
    height: 0;
    margin: auto;
    border-top: 2px solid #FFF;
    transform: rotate(45deg);
    transform-origin: center;
}

.thin-close-button.light::after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 28px;
    height: 0;
    margin: auto;
    border-top: 2px solid #FFF;
    transform: rotate(-45deg);
    transform-origin: center;
}

.standard-content {
    position: relative;
    max-width: 820px;
}

.wide-content {
    position: relative;
    max-width: 960px;
}

.standard-content-block {
    padding: 30px 60px;
}

.standard-content-slot {
    padding: 0px 60px;
}

.standard-content-lead {
    padding: 30px 60px 0px 60px;
}

.wide-content-block {
    padding: 30px 14px;
}

.standard-content h2,
.wide-content h2 {
    padding: 20px 0px;
    color: #222;
    font-family: "Roboto", Arial, sans-serif; 
    font-weight: 700;
    font-size: 28px;
    word-wrap: break-word;
}

.standard-content h3,
.wide-content h3,
.standard-inline-header {
    color: #222;
    font-family: "Roboto", Arial, sans-serif; 
    font-weight: 700;
    font-size: 18px;
}

.standard-content h4,
.wide-content h4 {
    color: #222;
    font-family: "Roboto", Arial, sans-serif; 
    font-weight: 500;
    font-size: 16px;
}

.standard-content p,
.wide-content p {  
    position: relative;
    padding: 10px 0px;
    color: #222;
    font-family: "Roboto", Arial, sans-serif; 
    font-weight: 300;
    font-size: 18px;
    line-height: 160%;
    word-wrap: break-word;
}

.standard-content a,
.wide-content a,
.standard-content a:visited,
.wide-content a:visited {
    color: #277CCC;
    font-family: "Roboto", Arial, sans-serif; 
    font-weight: 300;
    font-size: 18px;
    text-decoration: none;
}

.standard-content a:hover,
.wide-content a:hover {
    text-decoration: underline;
}

.standard-content p img,
.wide-content p img {  
    height: 1em;
    padding: 0px 4px;
}

.standard-list {
    color: #222;
    font-size: 24px;
    list-style: square;
    margin-left: 24px;
}

.standard-list li{
    padding: 10px 0px;
}

.standard-list p {
    padding: 0;
}

.standard-list a,
.standard-list a:visited {
    color: #277CCC;
    font-family: "Roboto", Arial, sans-serif; 
    font-weight: 300;
    font-size: 18px;
    text-decoration: none;
}

.standard-list a:hover {
    text-decoration: underline;
}

.narrative-text {
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 17px;   
    line-height: 160%;
    word-wrap: break-word;
}

.standard-tab-menu {
    border-bottom: 1px solid #E0E0E0;
}

.standard-menu-tab,
a.standard-menu-tab,
a.standard-menu-tab:visited {
    display: inline-block;
    padding: 10px 16px;
    border-bottom: 3px solid transparent;
    color: #AAA;
    font-family: "Roboto", Arial, sans-serif; 
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
}

.standard-menu-tab.active,
a.standard-menu-tab.active {
    color: #222;
    border-bottom: 3px solid #8BBEFF;
}

a.standard-menu-tab:hover {
    color: #222;
    text-decoration: none;
}

#search-overlay {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;
    height: 0;
    overflow: hidden;
}

#search-overlay.active {
    z-index: 999;
    height: 100%;
    overflow-y: auto;
}

#search-content {
    background-color: #FFF;
    box-shadow: 0 1px 5px rgba(0,0,0,0.3);
}

#search-page {
    position: relative;
    font-size: 16px;
}

#search-form {
    position: relative;
    max-width: 400px;
    padding-right: 7em;
    border: 1px solid #222;
}

#search-placeholder {
    position: absolute;
    top: 50%;
    left: 20px;
    z-index: 0;
    margin-top: -0.5em;
    color: rgba(0,0,0,0.2);
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 1em;
    line-height: 100%;
}

#search-input {
    position: relative;
    box-sizing: border-box;
    z-index: 1;
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 1.125em;
}

#search-buttons {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    height: 100%;
}

.search-button {
    cursor: pointer;
    background-color: #3268AD;
    -moz-transition: background-color 0.2s;
    -webkit-transition: background-color 0.2s;
    -o-transition: background-color 0.2s;
    transition: background-color 0.2s;
}

.search-button:hover,
.search-button:focus {
    background-color: #4E82C7;
}

#search-submit-button {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 3.5em;
    width: 3.5em;
}

#search-location-button,
#search-basic-location-button {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 3.5em;
    border-left: 1px solid #FFF;
}

.search-button img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
}

.search-list-container {
    display: none;
    position: relative;
    height: 440px;
    border-bottom: 1px solid #E0E0E0;
    border-right: 1px solid #E0E0E0;
    border-left: 1px solid #E0E0E0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

#search-results {
    margin: 10px 0px;
}

#search-results ol {
    list-style: none;
}

#search-results li {
}

#search-results h4 {
    padding: 10px 0px;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 16px;
}

#search-results a {
    display: inline-block;
    padding: 6px 0px;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 15px;
    text-decoration: none;
}

#search-results a:hover {
    text-decoration: underline;
}

#search-results p {
    font-weight: 500;
    font-size: 16px;
}

#search-close-button {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 99;
}

#fixed-toolbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 98;
}

body.full-screen #fixed-toolbar {
    display: none;
}

#fixed-toolbar-page {
    position: relative;
}

#fixed-tool-list {
    position: absolute;
    top: 0;
    right: 0;
    margin: 4px;
    list-style: none;
}

.fixed-tool {
    position: relative;
    margin: 10px;
    width: 48px;
    height: 48px;
    background-color: rgba(255,255,255,0.8);
    border: 1px solid #E0E0E0;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
}

.fixed-tool.directional {
    opacity: 0;
    -moz-transition: opacity 0.4s;
    -webkit-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
    transition: opacity 0.4s;
}

.fixed-tool.directional.active {
    opacity: 1;
}

.fixed-tool:hover {
    background-color: #3268AD;
    border: 1px solid #3268AD;
}

.fixed-scroll-tool {
    opacity: 0;
    -moz-transition: opacity 0.4s;
    -webkit-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
    transition: opacity 0.4s;
    cursor: default;
    pointer-events: none;
}

.fixed-scroll-tool.active {
    opacity: 1;
    cursor: pointer;
    pointer-events: auto;
}

.fixed-tool a {
    display: inline-block;
}

.fixed-tool-icon {
    width: 16px;
    height: 16px;
    margin: 16px;
    -moz-background-size: 16px 16px;
    -webkit-background-size: 16px 16px;
    -o-background-size: 16px 16px;
    background-size: 16px 16px;
    background-repeat: no-repeat, repeat;
}

#fixed-search-icon {
    background-image: url("../images/icons/edit-search-icon-wide-black-d3e0e4a66083bbdacc04e20e3248cd4f.png");
}

#fixed-preview-button-icon {
    background-image: url("../images/icons/edit-preview-line-icon-black-19c6eb2757e5aae192de3dd9674fba3a.png");
}

#fixed-save-button-icon {
    background-image: url("../images/icons/edit-save-icon-black-57f4661d18b6c4ae297ace8a29e13d08.png");
    opacity: 0.3;
}

#fixed-comment-button-icon {
    background-image: url("../images/icons/edit-comment-icon-small-black-5360ca98ab0c9b6d115b8fb1b16e293e.png");
}

#fixed-markup-button-icon {
    background-image: url("../images/icons/edit-markup-line-icon-black-1a85a25c08514e97cb3fc78499c29e2d.png");
}

#fixed-clipboard-button-icon {
    background-image: url("../images/icons/edit-clipboard-icon-black-d2c43880b42cb7dbbb1369bc86830e1a.png");
}

#fixed-dashboard-icon {
    background-image: url("../images/icons/edit-user-icon-black-becb67817f149258201fb61312c0068e.png");
}

#fixed-page-top-icon {
    background-image: url("../images/icons/edit-page-top-wide-icon-black-cdb00eaadf9d68b4106b644dd095ed44.png");  
}

#fixed-model-icon {
    background-image: url("../images/icons/edit-four-box-icon-black-2c3f36670614a9c422cbd8c2e7f4f6c6.png");  
}

#fixed-refresh-button-icon {
    background-image: url("../images/icons/edit-refresh-icon-black-a7a22641cc8a7ba50b619c09118ad6d3.png");
}

#fixed-save-button.enabled #fixed-save-button-icon {
    opacity: 1;
}

.fixed-tool:hover #fixed-search-icon {
    background-image: url("../images/icons/edit-search-icon-wide-white-dd427e0384f8404db6554da895d4b638.png");
}

.fixed-tool:hover #fixed-preview-button-icon {
    background-image: url("../images/icons/edit-preview-line-icon-white-9a9f6c01533257d43c884adf68f8dd1a.png");
}

.fixed-tool:hover #fixed-markup-button-icon {
    background-image: url("../images/icons/edit-markup-line-icon-white-3c132a690903b2f28acaad5160ee2610.png");
}

.fixed-tool:hover #fixed-save-button-icon {
    background-image: url("../images/icons/edit-save-icon-white-4c2c20a08f8f7da988653a1e7fb7e0ec.png");
}

.fixed-tool:hover #fixed-comment-button-icon {
    background-image: url("../images/icons/edit-comment-icon-small-white-950ccb5439d2425e37489d1b95496f66.png");
}

.fixed-tool:hover #fixed-clipboard-button-icon {
    background-image: url("../images/icons/edit-clipboard-icon-white-122283bd17ea92557a5d93525d80e8ea.png");
}

.fixed-tool:hover #fixed-dashboard-icon {
    background-image: url("../images/icons/edit-user-icon-white-1e74d74f1692aeb3e004e69d4a1a765e.png");
}

.fixed-tool:hover #fixed-page-top-icon {
    background-image: url("../images/icons/edit-page-top-wide-icon-white-d8bd683fb9d3bbf0a29fc9aafa0f1b80.png");  
}

.fixed-tool:hover #fixed-model-icon {
    background-image: url("../images/icons/edit-four-box-icon-white-fe924b419300952dd5b5478a6b4e3ff0.png");  
}

.fixed-tool:hover #fixed-refresh-button-icon {
    background-image: url("../images/icons/edit-refresh-icon-white-b6e8b55a9156c8dcabff081febf9ab10.png");
}

#fixed-load-animation {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 99;
    width: 48px;
    height: 48px;
    background-color: #FFF;
    border-radius: 50%;
}

#fixed-load-animation .circle-loader {
    font-size: 6px;
}

#page-navigation-section {
    position: relative;
    -moz-transition: height 0.3s;
    -webkit-transition: height 0.3s;
    -o-transition: height 0.3s;
    transition: height 0.3s;
    font-size: 16px;
}

#page-navigation-background {
    background-color: #FFF;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

#section-scroll {
    display: none;
    font-size: 0;
}

.section-scroll-button {
    display: inline-block;
    width: 33.3%;
    background-color: #222;
    background-color: rgba(40,40,40,0.9);
    font-size: 16px;
    cursor: pointer;
}

.section-scroll-button span {
    display: block;
    margin: 0;
    padding: 0.6875em 0.5em;
    color: #FFF;
    font-family: "Roboto", sans-serif;
    font-size: 1em;
    font-weight: 500;
    text-align: center;
    line-height: 100%;
}

#previous-section-button {
    position: relative;
    color: transparent;
}

#previous-section-button::before {
    content: "";
    display: block;
    position: absolute;
    top: 0.625em;
    right: 50%;
    width: 0; 
    height: 0;
    border-top: 0.625em solid transparent;
    border-bottom: 0.625em solid transparent;    
    border-right: 0.625em solid #FFF; 
}

#next-section-button {
    position: relative;
    color: transparent;
}

#next-section-button::after {
    content: "";
    display: block;
    position: absolute;
    top: 0.625em;
    left: 50%;
    width: 0; 
    height: 0; 
    margin: 0 auto;
    border-top: 0.625em solid transparent;
    border-bottom: 0.625em solid transparent;    
    border-left: 0.625em solid #FFF; 
}

#section-menu-button {
    border-right: 2px solid #FFF;
    border-left: 2px solid #FFF;
}

#section-tabs {    
    position: absolute;
    top: 40px;
    left: 40px;
    z-index: 9;
    width: 220px;
    border: 1px solid #E0E0E0;
    list-style: none;
}

body.full-screen #section-tabs { 
    display: none;
}

#section-tabs li:not(:last-child) {
    border-bottom: 1px solid #E0E0E0;
}

#section-tabs li.hidden { 
    display: none;
}

.section-tab,
.all-menu-item,
.back-tab { 
    display: block;
    position: relative;
    padding: 20px 10px;
    border-left: 6px solid transparent;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    -moz-transition: background-color 0.2s, border 0.2s;
    -webkit-transition: background-color 0.2s, border 0.2s;
    -o-transition: background-color 0.2s, border 0.2s;
    transition: background-color 0.2s, border 0.2s;
    overflow: hidden;
}

.section-tab.active,
.all-menu-item.active,
.back-tab.active {
    border-left: 6px solid #8BBEFF;
    background-color: rgba(255,255,255,0.05);
}
    
.section-tab:hover,
.all-menu-item:hover,
.back-tab:hover {
    border-left: 6px solid #8BBEFF;
    background-color: #F3F3F3;
}

a.section-tab {
    text-decoration: none;
}

.section {
    display: none;
    position: relative;
    margin-left: 260px;
    min-height: 800px;
    z-index: 1;
    background-color: #FFF;
    -webkit-overflow-scrolling: touch;
}

body.basic .section {
    min-height: auto;
}

.section.active {
    display: block;
}

.section-content {
    display: none;
    width: 100%;
}

.section-content.active {
    display: inline-block;
}

.section-title {
    font-size: 0;
}

#hero {
    display: inline-block;
    position: relative;
    z-index: 1;
    width: 100%;
}

#page-title {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 80px 40px 80px 40px;
    z-index: 1;
    background-image: linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.6));
}

#page-title h1 {
    padding: 10px 0px;
    color: #FFF;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 36px;
}

#page-title h3 {
    color: #FFF;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 18px;
}

#page-title h4 {
    margin-bottom: 4px;
    color: #FFF;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 14px;
    text-transform: uppercase;
}

#page-title-notice {
    display: inline-block;
    margin: 0 0 10px 0;
    padding: 10px;
    background-color: rgba(45,94,156,0.8);
    color: #FFF;
    font-family: "Roboto",Arial,sans-serif;
    font-weight: 400;
    font-size: 14px;
    text-transform: uppercase;
}

#site-map span,
#site-map a {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 4px;
    color: #FFF;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 14px;
    text-transform: uppercase;
    opacity: 0.6;
}

#site-map span.site-map-active {
    opacity: 1;
}

#site-map a,
#site-map a:active,
#site-map a:visited {
    color: #FFF;
    text-decoration: none;
    -moz-transition: opacity 0.2s;
    -webkit-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

#site-map a:hover {
    opacity: 1;
}

#measurement-unit-options {
    display: inline-block;
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 2;
}

.measurement-unit-option,
a.measurement-unit-option,
a.measurement-unit-option:visited {
    display: inline-block;
    float: left;
    padding: 10px;
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
    opacity: 0.6;
    color: #FFF;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    text-decoration: none;
}

.measurement-unit-option.active,
.measurement-unit-option:hover,
a.measurement-unit-option:hover {
    opacity: 1;
    text-decoration: none;
}

#page-info-container {
    margin: 14px 20px ;
    font-size: 16px;
}

#page-info-tooltip {
    display: inline-block;
    width: 0.9375em;
    height: 0.9375em;
    padding: 0.2em;
    background-color: rgba(255,255,255,0.3);
    opacity: 0.6;
    -moz-transition: opacity 0.2s;
    -webkit-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
}

#page-info-tooltip:hover {
    opacity: 1;
}

#page-info-tooltip span {
    display: block;
    color: #FFF;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 0.9375em;
    line-height: 100%;
}


#hero-image-container {
    position: relative;  
    width: 100%;    
    height: 500px;      
    background-color: #E0E0E0;
    overflow: hidden;
}

#hero-image-frame {
    position: relative;              
    left: 50%;          
    width: 1280px;
    height: 500px;         
    margin-left: -640px;
}

#hero-image {
    display: block;
    position: absolute;
    top: -50px;
    left: 0;
    height: 640px;
    visibility: show;  
}

#hero-image-narrow {
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: auto;
    margin-bottom: -140px;
    visibility: hidden;  
}

#hero-image-placeholder { 
    display: block;
    position: absolute;
    top: -50px;
    left: 0;
    height: 640px;
    opacity: 0.5;
}

#page-footer {
    margin-top: 160px;
    background-color: #353535;
}

#footer-links {
    list-style: none;
    display: inline-block;
    width: 100%;
}

#footer-links li {
    clear: left;
    display: inline-block;
    height: 50px;
    margin: 15px 15px 15px 0px;
}

.footer-link {
    display: inline-block;
    width: 260px;
    background-color: rgba(255,255,255,0.05);
    -moz-transition: background-color 0.2s;
    -webkit-transition: background-color 0.2s;
    -o-transition: background-color 0.2s;
    transition: background-color 0.2s;
}

.footer-link:hover {
    background-color: rgba(255,255,255,0.1);
}

.footer-icon-container {
    float: left;
    position: relative;
    width: 50px;
    height: 50px;
    margin: 10px;
    background-color: #353535;
    border-radius: 50%;
}

.footer-icon-container img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    margin-top: -8px;
    margin-left: -8px;
}

.footer-link span { 
    float: left;
    margin: 25px 15px;
    color: #FFF;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 16px;
}

#sign-out-button {
    cursor: pointer;
}

#footer-info {
    clear: left;
    margin-top: 40px;
    padding: 40px 0px 20px 0px;
    border-top: 1px solid rgba(255,255,255,0.2);
    color: #FFF;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 160%;
    opacity: 0.6;
}

.page-link {
    display: inline-block;
    padding: 10px 10px 10px 10px;
    background-color: #E0E0E0;
    -moz-transition: background-color 0.2s;
    -webkit-transition: background-color 0.2s;
    -o-transition: background-color 0.2s;
    transition: background-color 0.2s;
}

.page-link:hover {
    background-color: #BFBFBF;
}

.page-link:after {
    float: left;
    content: "";
    margin: 16px;
    padding: 16px;
    border: solid #222;
    border-width: 2px 2px 0px 0px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);    
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.page-link-icon-container {
    float: left;
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.page-link-icon-container img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    margin-top: -8px;
    margin-left: -8px;
    opacity: 0.8;
}

.page-link span { 
    float: left;
    width: 200px;
    margin: 15px 0px;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 16px;
}

.content-page-link {
    display: inline-block;
    color: #3268AD;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 17px; 
}

.content-page-link,
.content-page-link.active,
.content-page-link.visited {
    text-decoration: none; 
}

.content-page-link:hover {
    text-decoration: underline;  
}

.content-page-link:after {
    content: "";
    margin-bottom: 0.1em;
    margin-left: 2px;
    padding: 0.15em;
    border: solid #3268AD;
    border-width: 2px 2px 0 0;
    display: inline-block;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);    
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.standard-table-block {
    padding: 26px 0px;
    overflow: hidden;
}

.feature-table {
    position: relative;
    width: 100%;
    margin-top: 10px;
    padding: 0;
    border-spacing: 2px;
    empty-cells: hide;
}

.feature-table th {
    padding: 10px;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    text-align: left;
    vertical-align: top;
    background-color: #DCE7F5;
}

.feature-table td {
    padding: 10px;
    vertical-align: top;
    background-color: #DCE7F5;
    font-size: 0;
}

.feature-table p,
.feature-table span {
    padding: 0;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 16px;
}

.feature-table span {
    font-size: 16px;
    line-height: 160%;
}

.feature-table a,
.feature-table a.visited {
    display: block;
    color: #3268AD;
    font-weight: 400;
    font-size: 16px;
    text-decoration: none;
}

.feature-table a:hover,
.feature-table a.visited:hover {
    text-decoration: underline;
}

.data-table-container {
    overflow-x: auto;
}

.data-table {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    margin-top: 16px;
    padding: 0;
    border-spacing: 2px;
}

.data-table th {
    padding: 10px;
    background-color: #DCE7F5;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 16px;
    text-align: left;
}

.data-table td {
    vertical-align: top;
    padding: 2px 6px 2px 0px;
    padding: 10px;
    background-color: #DCE7F5;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
}

.data-table-title-row th {
    vertical-align: bottom;
    font-weight: 500;
    text-transform: capitalize;
}

.data-table-title-row.alternative-title {
    display: none;
}

.data-table-section-title {
    font-weight: 700px;
}

.data-table a {
    color: #3268AD;
    font-weight: 400;
    font-size: 1em;
    font-style: italic;
    text-decoration: none;
}

.data-table-centered,
.data-table-centered .data-table-title-row th,
.data-table-title-row th.data-table-centered {
    text-align: center;
}

.data-table-centered tr td:nth-child(1),
.data-table-centered .data-table-title-row  th:nth-child(1) {
    text-align: left;
    min-width: 60px;
}

.data-table-total-row td {
    font-weight: 500;
}

.figure-notes h4 {
    padding-top: 5px;
}

.standard-figure-header {
    clear: left;
}

#key-criteria-block {
    margin-top: 20px;
    padding: 16px;
    background-color: #DCE7F5;
}

#key-criteria-block  h3 {
    padding-bottom: 16px;
    color: #222;
    border-bottom: 1px solid rgba(0,0,0,0.5);
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 18px;
}

#key-criteria-block  p {
    margin-top: 20px;
}

#key-criteria-list {
    margin-left: 14px;
    list-style-type: square;
    list-style-position: outside;
}

#key-criteria-list li {
    margin: 20px 0px;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 120%;
}

.model-diagram-section {
    clear: left;
    display: inline-block;
    width: 100%;
}

.model-diagram {
    display: none;
}

.model-diagram.active {
    display: inline-block;
}

.custom-model-diagram-wrapper {
    max-width: 800px;
    margin: 10px 0px;
}

.custom-model-diagram {    
    width: 100%;
    margin-bottom: 10px;
}

#model-diagram-options {
    display: inline-block;
    width: 100%;
    margin-top: 8px;
}

.model-diagram-option {
    display: inline-block;
    margin: 0px 6px 6px 0px;
    padding: 10px;
    background-color: #E0E0E0;
    -moz-transition: background-color 0.2s;
    -webkit-transition: background-color 0.2s;
    -o-transition: background-color 0.2s;
    transition: background-color 0.2s;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 13px;
    text-transform: uppercase;
    cursor: pointer;
}

.model-diagram-option.active {
    display: inline-block;
}

.model-diagram-option.active,
.model-diagram-option:hover,
.model-diagram-option:focus {
    background-color: #BFBFBF;
}

.static-stm-diagram-view {
    float: left;
    display: block;
    margin: 20px 0px 30px 0px;
}

.static-stm-diagram {
    float: left;
    position: relative;
    font-size: 24px;
}

.static-stm-diagram-title  {
    padding: 0px 0px 20px 0px;
    white-space: nowrap;
    color: #000;
    font-family: "Roboto", Arial, sans-serif;  
    font-weight: 700; 
    font-size: 18px;
    text-overflow: ellipsis;
}

.static-stm-message  {
    color: #222;
    font-family: "Roboto", Arial, sans-serif;  
    font-weight: 600; 
    font-size: 16px; 
}

.static-stm-state-couplet {
    position: absolute;
    width: 100%;
}

.static-stm-state {
    position: absolute;
    box-sizing: border-box;
    width: 7.8125em;
    height: 7.1875em;
    background-color: #FFF;
    border: 2px solid #707070;
    border-radius: 3px; 
    overflow: hidden;
}

.static-stm-state-contents {
    display: block;
    position: relative;
    font-size: 16px;  
    padding: 10px 8px;
    overflow: hidden; 
    line-height: 130%;
}

.static-stm-state-label,
a.static-stm-state-label,
a.static-stm-state-label:visited {
    display: block;
    color: #000;
    font-family: "Roboto", Arial, sans-serif;  
    font-weight: 400;
    font-size: 0.9375em; 
    line-height: 130%;
    word-wrap: break-word;
    text-decoration: none;
}

.static-stm-state-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 25px;
    box-shadow: inset 0 -24px 12px -12px #FFF;
    border-bottom: 5px solid #FFF;
}

.static-stm-state-risk-bar {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
}

.static-stm-state-risk-box {
    display: inline-block;
    float: left;
    width: 1em;
    height: 1em;
    padding: 0.25em;
    border-top: 1px solid #222;
    border-right: 1px solid #222;
    color: #222;
    font-family: "Roboto", Arial, sans-serif;  
    font-weight: 400;
    font-size: 15px;
    line-height: 100%;
    text-align: center;
}

.static-stm-state-risk-box.low {
    background-color: #60CD93;
}

.static-stm-state-risk-box.med {
    background-color: #FFE863;
}

.static-stm-state-risk-box.high {
    background-color: #B83F32;
}

.static-stm-transition-label {
    fill: #000;
    font-family: "Roboto", Arial, sans-serif;  
    font-weight: 400; 
    font-size: 12px;
}

.stm-legend-container {
    clear: both;
    width: 100%;
    padding-top: 10px;
}

.stm-legend {
    clear: left;
    max-width: 700px;
    margin: 0px 0px 30px 0px;
    padding: 16px;
    background-color: #DCE7F5;
}

.stm-legend table {
    width: 100%;
}

h3.stm-legend-title {
    padding: 0px 0px 10px 0px;
    color: #222;
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 600;
    font-size: 15px;
}

.stm-legend-header,
.stm-legend-item,
.stm-legend-sep {       
    vertical-align: text-top;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-size: 15px; 
    line-height: 120%;
}

.stm-legend-header {
    padding: 8px 0px;
    text-align: left;
    font-weight: 700;
    white-space: nowrap;
}

.stm-legend-item {
    width: 100%;
    padding: 8px 0px;
    text-align: left;
    font-weight: 400;
}

.stm-legend-sep {
    width: 20px;
    padding: 8px 2px;
    text-align: center;
    font-weight: 400;  
}

#model-keys {
    clear: left;
    overflow-x: auto;
}

#model-description {
    clear: left;
}

.stm-bm-anchor {
    position: relative;
    font-size: 16px;
}

.stm-bm {
    position: absolute;
    top: 0;
    visibility: hidden;
}

.stm-element-image-container {
    position: relative;
    width: 100%;
    margin: 0px 0px 20px 0px;
    cursor: pointer;
    font-size: 0;
}

.stm-element-image {
    width: 100%;
}

p.stm-diagram-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    opacity: 0;
    background-color: #000;
    color: #FFF;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 14px; 
    -moz-transition: opacity 0.2s;
    -webkit-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.stm-element-image-container:hover  p.stm-diagram-caption {
    opacity: 0.7;
}

.transition-graphic-container {
    position: relative;
    max-width: 500px;
}

.transition-graphic-wrapper {  
    display: inline-block;
    width: 100%;
    margin: 0px 0px 20px 0px;
}

.transition-graphic-vector-container {  
    float: left;     
    width: 12%;
    height: 140px;    
}

.transition-graphic-state-box { 
    float: left;       
    width: 44%; 
}

.transition-img-frame { 
    position: relative;
    background-color: #222;
    overflow: hidden;
}

.transition-img-frame,
.transition-img { 
    height: 140px;
}

.transition-img.landscape {
    display: block;
    position: absolute;
    left: -200%;
    right: -200%;
    top: 0;
    bottom: 0;
    margin: auto;
    width: auto; 
}

.transition-img.portrait {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: -200%;
    bottom: -200%;
    margin: auto;
    width: 100%; 
    height: auto; 
}

.transition-img-label {
    margin: 8px 0px 0px 0px;
    color: #222;
    font-family: "Roboto", Arial, sans-serif;  
    font-weight: 400; 
    font-size: 14px;
    word-wrap: break-word;
    line-height: 130%;
    overflow: hidden;
}

.stm-species-list li a {
    font-style: italic;
}

.stm-practice-link {
    margin-bottom: 10px;
}
   
.stm-practice-table-container {
    width: 700px;
} 

.stm-practice-table {
    position: relative;
    border-spacing: 2px;
    padding: 0;
    width: 100%;
    margin: 20px 0px 40px 0px;
    overflow: hidden;
}

.stm-practice-table-header th {
    padding: 10px;
    background-color: #5F88B0;
    color: #FFF;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 13px;
    opacity: 0.8;
    text-align: left;
    vertical-align: bottom;
}

.stm-practice td {
    background-color: #E6F0FA;
}

.stm-practice-table .stm-practice td:nth-child(1) {
    width: 30%;
    font-weight: 600;
    vertical-align: top;
}

.stm-practice-table .stm-practice td:nth-child(2) {
    width: 70%;
    font-weight: 400;
    vertical-align: top;
}

.stm-practice-table p {
    padding: 10px 10px 0px 10px;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 15px;
}

.stm-practice-table a,
.stm-practice-table a.visited {
    display: inline-block;
    padding: 10px 10px 0px 10px;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 15px;
    text-decoration: none;
}

.stm-practice-table td {
    padding-bottom: 10px;
}

.stm-practice a:hover {
    text-decoration: underline;
}

.stm-interpretation-block {
    margin-bottom: 30px;
}

.stm-interpretation-table-container {
    display: none;
}

.stm-interpretation-table {
    position: relative;
    border-spacing: 2px;
    padding: 0;
    width: 100%;
    margin: 20px 0px 40px 0px;
    overflow: hidden;
}

.stm-interpretation-table-header td {
    position: relative;
    background-color: #5F88B0;
    vertical-align: bottom;
}

.stm-interpretation-table-header h3 {
    padding: 0px 10px 10px 10px;
    color: #FFF;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 18px;
}

.stm-interpretation-table-header h4 {
    padding: 0px 10px 0px 10px;
    color: #FFF;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 14px;
    opacity: 0.8;
}

.stm-interpretation-table textarea {
   border: 1px solid transparent;
   background: none;
}

.stm-interpretation-table textarea:focus {
    background: #FFF;
}

.stm-interpretation-criteria {
    width: 30%;
}

.stm-interpretation-details,
.stm-interpretation-details-standard {
    width: 70%;
} 

.stm-interpretation .stm-interpretation-criteria,
.stm-interpretation .stm-interpretation-details,
.stm-interpretation .stm-interpretation-details-standard {
    vertical-align: top;
} 

.stm-interpretation-criteria p {
    font-weight: 500;
}

.characteristic-list {
    margin: 10px 0px 0px 24px;
    color: #E0E0E0;
    font-size: 24px;
    list-style: square;
    margin-left: 24px;
}

.characteristic-list p {
    padding: 0;
}

.characteristic-list a,
.characteristic-list a:visited {
    color: #277CCC;
    font-family: "Roboto", Arial, sans-serif; 
    font-weight: 300;
    font-size: 18px;
    text-decoration: none;
}

.characteristic-list a:hover {
    text-decoration: underline;
}

.class-description-subclass-list li{
    padding: 0;
}

.print-option-block {
    margin: 0px 0px 40px 0px;
}

.print-option-block h3 {
    padding: 10px 0px;
}

.print-option-block input {
    margin: 8px 0px;
    cursor: pointer;
}

.print-option-block label {
    padding-left: 6px;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
}

.print-size-options {
    display: inline-block;
    width: 100%;
    padding-top: 8px;
    font-size: 16px;
}

.print-size-option {
    float: left;
    display: inline-block;
    width: 2.1875em;
    height: 2.1875em;
    margin-right: 4px;
    border: 1px solid transparent;
    border-radius: 2px;
    color: #BFBFBF;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    text-align: center;
    line-height: 100%;
    cursor: pointer;
}

.print-size-option:hover,
.print-size-option.active {
    color: #222;
    border: 1px solid #BFBFBF;
}

.print-size-option span {
    display: inline-block;
    padding-top: 10px;
}

.print-size-option.size-95 span {
    font-size: 0.9375em;
}

.print-size-option.size-100 span {
    font-size: 1.0625em;
}

.print-size-option.size-105 span {
    font-size: 1.1875em;
}

.print-size-option.size-110 span {
    font-size: 1.3125em;
}

#model-diagram-popup {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 9990;
    background-color: #FFF;
    background-color: rgba(255,255,255,0.95);
    background-color: rgba(0,0,0,0.48);
    overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
}

#model-diagram-popup-wrapper {
    padding: 20px 40px;
}

#model-diagram-popup-page {
    display: none;
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    padding: 0px 40px;
    background-color: #FFF;
    border: 1px solid #BFBFBF;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}

#model-diagram-popup-content {
    display: inline-block;
    width: 100%;
    padding: 40px 0px;
}

#model-diagram-popup-close-button {
    top: 24px;
    right: 24px;
    z-index: 9999;
}

.modal-dialog-overlay {
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background-color: rgba(0,0,0,0.48);
    overflow: hidden;
}

.modal-dialog-overlay.active {
    bottom: 0;
    right: 0;
    visibility: visible;
    overflow-y: auto;
}

.modal-dialog-container {
    position: relative;
    top: 20px;
    margin: 0 auto 0 auto;
    opacity: 0;
    -webkit-transition: top 0.5s, opacity 0.5s;
    -moz-transition: top 0.5s, opacity 0.5s;
    -ms-transition: top 0.5s, opacity 0.5s;
    -o-transition: top 0.5s, opacity 0.5s;
    transition: top 0.5s, opacity 0.5s;
}

.modal-dialog-overlay.active .modal-dialog-container {
    opacity: 1;
    top: 20px;
}

#standard-dialog-container,
#input-dialog-container,
#spinner-dialog-container,
#class-dialog-container,
#plant-load-dialog-container {
    position: relative;
    max-width: 440px; 
    padding: 0px 20px;
}

#filter-dialog-container {
    position: relative;
    max-width: 860px;
    padding: 0px 20px 20px 20px; 
}

#photo-dialog-container {
    max-width: 600px; 
    margin-bottom: 100px;
    padding: 0px 20px; 
}

#photo-collection-container {
    max-width: 1020px; 
    padding: 0px 20px; 
}

#download-dialog-container,
#clipboard-dialog-container {
    position: relative;
    max-width: 500px;
    margin-bottom: 60px;
    padding: 0px 20px; 
}

.modal-dialog {
    position: relative;
    background-color: #FFF;
}

.modal-dialog-wrapper {
    padding: 20px 40px;
}

.modal-dialog-close {
    position: absolute;
    top: 10px;
    right: 10px;
}

.modal-dialog-header {
    padding: 20px 0px 0px 0px;
}

.modal-dialog-header h2 {
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 24px;
}

.modal-dialog-body {
    display: inline-block;
    position: relative;
    width: 100%;
}

.modal-dialog-msg {
    min-height: 60px;
}

.modal-dialog-msg-text {
    color: #888;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 16px;
}

.modal-dialog-content {  
    padding: 20px 0px;
}

.modal-dialog input[type="number"] {
  width: 60px;
    margin: 6px 8px;
    color: #222;
    font-family: "Roboto", Arial, sans-serif; 
    font-weight: 400;
    font-size: 16px;
}

.modal-dialog-button-block {
    clear: both;
}

.modal-dialog-button-container {
    float: left;
    width: 50%; 
    background-color: #FFF;
    border-top: 1px solid #BFBFBF;
    border-bottom: 1px solid #BFBFBF;
}

.modal-dialog-proceed,
.modal-dialog-cancel {
    box-sizing: border-box;
    width: 100%;
    padding: 16px 0px;
    background-color: #FFF;
    border: none;
    border-radius: 0;
    color: #222;
    text-align: center;
}

.modal-dialog-proceed {
    border-left: 1px solid #BFBFBF;
}

.modal-dialog-cancel {
    border-left: 1px solid #BFBFBF;
    border-right: 1px solid #BFBFBF;
}

#download-dialog {
    position: relative;
    background-color: #FFF;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}

#download-dialog-header {
    padding: 16px 20px;
    position: relative;
}

#download-dialog-close {
    right: 20px;
    z-index: 99;
    top: 10px;
}

#download-dialog-icon {
    display: block;
    width: 50px;
    margin: 0 auto;
    opacity: 0.6;
}

#available-download-list {
    list-style: none;
}

.download-item {
    position: relative;
    font-size: 16px;
    min-height: 3.75em;
    border-top: 1px solid #E0E0E0;
    cursor: pointer;
}

.download-item:hover,
.download-item:focus {
    background-color: #F3F3F3;
}

.download-item-icon {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    padding: 14px 15px;
    background-color: #BFBFBF;
}

.download-item-icon img {
    width: 25px;
}

.download-item:hover .document-download-icon,
.download-item:focus .document-download-icon {
    background-color: #3268AD;
}

.download-item:hover .tabular-download-icon,
.download-item:focus .tabular-download-icon {
    background-color: #287863;
}

.download-item-title {
    padding: 10px 20px 10px 70px;
}

.download-item-name {
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 17px;
}

.download-item-msg {
    visibility: hidden;
    color: #888;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 14px;
}

.download-item:hover .download-item-msg,
.download-item:focus .download-item-msg {
    visibility: visible;
}

#clipboard-dialog {
    position: relative;
    background-color: #FFF;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}

#clipboard-content {
    position: relative;
}

#clipboard-add-button,
#template-apply-button {
    display: block;
    padding: 16px 0px;
    background-color: #FFF;
    border-top: 1px solid #E0E0E0;
    border-radius: 0;
    color: #222;
    text-align: center;
}

#clipboard-add-button:hover,
#clipboard-add-button:focus,
#template-apply-button:hover,
#template-apply-button:focus {
    background-color: #2D5D9C;
    color: #FFF;
}

#clipboard-items {
    list-style: none;
}

.clipboard-item {
    position: relative;
    font-size: 16px;
    min-height: 3.75em;
    border-top: 1px solid #E0E0E0;
}

.clipboard-item:hover,
.clipboard-item:focus {
    background-color: #F3F3F3;
}

.clipboard-item-icon {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    padding: 14px 15px;
    background-color: #BFBFBF;
}

.clipboard-item-icon img {
    width: 25px;
}

.clipboard-copy-button {
    background-color: #BFBFBF;
    -webkit-transition: background-color 0.2s;
    -moz-transition: background-color 0.2s;
    -ms-transition: background-color 0.2s;
    -o-transition: background-color 0.2s;
    transition: background-color 0.2s;
    cursor: pointer;
}

.clipboard-copy-button:hover,
.clipboard-copy-button:focus {
    background-color: #3268AD;
}

.clipboard-item-title-container {
    padding: 10px 70px 10px 70px;
}

.clipboard-item-title {
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 14px;
}

.clipboard-item-subtitle {
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 13px;
}

.clipboard-remove-button {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    width: 55px;
    border-left: 1px solid #E0E0E0;
    -webkit-transition: background-color 0.2s;
    -moz-transition: background-color 0.2s;
    -ms-transition: background-color 0.2s;
    -o-transition: background-color 0.2s;
    transition: background-color 0.2s;
    cursor: pointer;
}

.clipboard-remove-button:hover {
    background-color: #E0E0E0;
}

.clipboard-remove-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -1px;
    margin-left: -9px;
}

.clipboard-remove-icon::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 18px;
    height: 0;
    margin: auto;
    border-top: 3.8px solid #AAA;
    transform: rotate(45deg);
    transform-origin: center;
}

.clipboard-remove-icon::after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 18px;
    height: 0;
    margin: auto;
    border-top: 3.8px solid #AAA;
    transform: rotate(-45deg);
    transform-origin: center;
}

.clipboard-remove-button:hover .clipboard-remove-icon::before,
.clipboard-remove-button:hover .clipboard-remove-icon::after {
    border-top: 3.8px solid #222;
}

#image-slider-overlay {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 100%;
    z-index: 9990;
    background-color: #000;
    background-color: rgba(0,0,0,0.9);
    overflow-y: auto;
}

#image-slider-wrapper {
    padding: 0px 75px;    
}  
    
#image-slider-content {
    position: relative;
    padding-top: 75px;
}

#image-slider-close-button {
    top: 15px;
    right: 15px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    z-index: 99;
}

#slider {
    display: block;
    position: relative;
    background-color: #000;
    overflow: hidden;
}

.slider-button {
    display: block;
    position: absolute;
    top: 48%;
    width: 60px;
    height: 120px;
    margin-top: -60px;
    z-index: 11; 
    background-color: rgba(0,0,0,0.2);
    opacity: 0;   
    -moz-transition: opacity 300ms;
    -webkit-transition: opacity 300ms;
    -o-transition: opacity 300ms;
    transition: opacity 300ms;
    cursor: pointer;
}

.previous-slide-button {
    left: 20px;
}

.previous-slide-button::after {
    content: "";
    position: absolute;
    top: 30px;
    left: 20px;
    display: inline-block;
    padding: 26px;
    border: solid #FFF;
    border-width: 5px 0 0 5px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.next-slide-button {
    right: 20px;
}

.next-slide-button::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 30px;
    right: 20px;
    padding: 26px;
    border: solid #FFF;
    border-width: 5px 5px 0 0 ;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

#slider:hover .slider-button {
    opacity: 0.8;
}

.slider-button:hover {
    opacity: 1.0;
}

.slide {
    position: relative;
    float: left;
}

.slide-frame { 
    position: relative;
}

.slide-image {
    display: block;
}

.slide-image.landscape {
    width: 100%;
}

.slide-image.portrait {
    width: 50%;
    margin: 0 auto;
}

.slide-overlay {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.active-slide {
    display: block;
}

.slide-overlay.active {
    display: block;
}

.slide-caption {
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    padding: 20px 10px 10px 10px;
    background: rgba(0,0,0,0.1);
    background: -webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5));
    background: -moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5));
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5));
    color: #FFF;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 18px;
    text-shadow: 0px 0px 6px #000;
}

.animate-slow {
    display: block;
    -moz-transition: transform 0.4s ease-out;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    -o-transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
}

.animate-fast {
    -moz-transition: transform 200ms;
    -webkit-transition: -webkit-transform 200ms;
    -o-transition: -webkit-transform 200ms;
    transition: transform 200ms;
}

.modal-dialog-msg, 
#photo-loader-message { 
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 0px;
    padding-left: 0px;
    color: #888;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
}

.modal-dialog-msg a,
.modal-dialog-msg a:visited {
    color: #277CCC;
    text-decoration: none;
}

.modal-dialog-msg a:hover {
    text-decoration: underline;
}

#album-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: -1;
    visibility: hidden;
}

#album-overlay.active {
    z-index: 9990;
    visibility: visible;
}

#album-frame {
    position: absolute;
    top: 50%;
    bottom: 50%;
    right: 0;
    left: 0;
    padding: 0px 20px;
    -moz-transition: top 0.5s, bottom 0.5s;
    -webkit-transition: top 0.5s, bottom 0.5s;
    -o-transition: top 0.5s, bottom 0.5s;
    transition: top 0.5s, bottom 0.5s;
    overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
}

#album-frame.loading {
    top: 0;
    bottom: 0;
}

#album-frame.loaded {
    top: 0;
    bottom: 0;
    overflow-y: auto;
}

#album-page {
    position: relative;
    max-width: 660px;
    min-height: 100%;
    margin-right: auto;
    margin-left: auto;
    background-color: #FFF;  
    border-right: 1px solid #BFBFBF;
    border-left: 1px solid #BFBFBF;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}

#album-photo-stream {
    padding: 20px 40px 60px 40px;
}

.album-image-item.extra {
    display: none;
}

.album-more-button {
    font-size: 21px;
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 2em;
    padding: 0.5em 0;
    background: rgba(0,0,0,0.4);
    border-radius: 50%;
    color: #FFF;    
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    line-height: 100%;
    text-align: center;
    cursor: pointer;
}

#album-overlay.expanded .album-more-button {
    display: none;
}

#album-overlay.expanded {
    overflow-y: hidden;
}

#album-overlay.expanded #album-page {
    max-width: 1040px;
}

#album-overlay.expanded #album-photo-stream {
    padding: 50px 0px 0px 0px;
}

#album-overlay.expanded .photo-stream-img-wrapper {
    display: none;
}

#album-overlay.expanded .photo-stream-caption-container {
    display: none;
}

#album-overlay.expanded .photo-stream-img-wrapper.max {
    display: block;
}

#album-overlay.expanded .photo-stream-img-wrapper.max .photo-stream-img {
    max-width: 100%;
    max-height: 680px;
    margin: 0 auto;
}

#album-overlay.expanded .photo-stream-img-wrapper.max .photo-stream-img-caption {
    display: block;
}

#album-close-button {
    top: 10px;
    right: 10px;
    z-index: 9999;
}

.album-message {
    margin-top: 40px;
    color: #222;    
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 13px;
    text-align: center; 
}

#album-overlay.expanded #album-message {
    display: none;
}

#photo-stream-container.grid  {
    margin: 5px 0px;
}

.photo-stream-segment {
    display: none;
    clear: left;
}

#photo-stream-container.grid .photo-stream-card {
    float: left;
    display: block;
    width: 50%;
}

.photo-stream-img-container {
    position: relative;
}

#photo-stream-container.grid .photo-stream-img-container {
    margin: 5px 5px 5px 0px;
}

.photo-stream-img {
    display: block;
    max-width: 100%;
    max-height: 480px;
    margin: 30px 0px 15px 0px;
}

#photo-stream-container.grid .photo-stream-img {
    margin: 0;
}

.photo-stream-img-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: 0;
    background-color: transparent;
    background-color: rgba(0,0,0,0.3);
    -moz-transition: opacity 0.3s;
    -webkit-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.photo-stream-img-container:hover .photo-stream-img-overlay {
    opacity: 1;
}

.photo-stream-button-overlay {
    font-size: 16px;
    position: absolute;
    top: 50%;  
    left: 50%;
    margin-top: -3.5em;
}

.photo-stream-button-overlay.single {
    width: 7em;
    margin-left: -3.5em;
}

.photo-stream-button-overlay.double {
    width: 14em;
    margin-left: -7em;
}

.photo-stream-button {
    float: left;
    position: relative;
    width: 6.25em;
    height: 6.25em;
    padding: 0.375em;
    background-color: rgba(0,0,0,0.4);
    opacity: 0;
    -moz-transition: opacity 0.3s;
    -webkit-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
    cursor: pointer;
}

.photo-stream-img-container:hover .photo-stream-button,
.photo-stream-button:focus {
    opacity: 1;
}

.photo-stream-preview-button::before {
    position: absolute;
    content: "";
    top: 0.625em;
    bottom: 0.625em;
    left: 0;
    border-left: 1px solid #FFF;
}

.photo-stream-preview-button:focus::before {
    display: none;
}

.photo-stream-button-icon {
    position: relative;
    height: 3.125em;
    width: 3.125em;
    margin: 0.9375em auto 0em auto;
}

.photo-stream-button img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.photo-stream-button p {
    color: #FFF;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 0.8125em;
    text-align: center;
    line-height: 110%;
}

.photo-stream-briefcase-button.flash img {
    -webkit-animation-name: flash-animation;
    -webkit-animation-duration: 150ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: flash-animation;
    -moz-animation-duration: 150ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;

    animation-name: flash-animation;
    animation-duration: 150ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

.photo-stream-img-wrapper {
    position: relative;
    cursor: pointer;
}

.photo-stream-img-caption-icon {
    display: none;
}

.photo-stream-img-caption {
    display: none;
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-size: 16px;
}

.photo-stream-img-caption p {
    float: left;
    margin-left: 6px;
    padding-top: 0.2em;
    color: #FFF;
    font-family: "Roboto", Arial, sans-serif; 
    font-weight: 400;
    font-size: 1em;
    text-shadow: 0 0 4px rgba(0,0,0,0.4);
}

.photo-stream-img-caption img {
    float: left;
    width: 1.5em;
}

.photo-stream-caption-container {
    padding: 0;
    padding: 0px 0px 20px 0px;
}

#photo-stream-container.grid .photo-stream-caption-container { 
    padding: 0px 0px 10px 0px;
}

.photo-stream-lead-caption {      
    padding-right: 2px;
    color: #222;
    font-family: "Roboto", Arial, sans-serif; 
    font-weight: 400;
    font-size: 17px;
}

.photo-stream-caption {
    padding-right: 2px;
    color: #222;
    font-family: "Roboto", Arial, sans-serif; 
    font-weight: 400;
    font-size: 17px;
}

#photo-stream-container.grid .photo-stream-caption {    
    display: block;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.photo-stream-caption a {
    color: #3268AD;
    font-family: "Roboto", Arial, sans-serif; 
    font-weight: 400;
    font-size: 17px;
    text-decoration: none;
}

.photo-stream-caption a:hover {
    text-decoration: underline;
}

#photo-stream-container.grid .photo-stream-caption a {    
    display: block;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#photo-stream-more-button {
    padding-top: 20px;
    text-align: center;
}

#photo-stream-more-button span {
    padding: 10px 20px;
    color: #3268AD;
    font-family: "Roboto", Arial, sans-serif; 
    font-weight: 400;
    font-size: 18px;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
}

#photo-stream-container.grid #photo-stream-more-button {
    clear: left;
}

#briefcase-geo-unit-list,
#briefcase-class-list {
    display: inline-block;
    width: 100%;
    padding-bottom: 40px;
}

.favorites-card {
    float: left;
    display: block;
    width: 228px;
}

.favorites-card-wrapper {
    position: relative;
    margin: 8px 22px 20px 0px;
    padding: 8px;
    overflow: hidden;
    background-color: #FFF;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    -moz-transition: box-shadow 0.3s;
    -webkit-transition: box-shadow 0.3s;
    -o-transition: box-shadow 0.3s;
    transition: box-shadow 0.3s;
    cursor: pointer;
}

.favorites-card-wrapper:hover {
    box-shadow: 0 1px 6px rgba(0,0,0,0.6);
}

.favorites-img-frame {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    background-color: #E3E3E3;
    overflow: hidden;
}

.favorites-img {
    display: block;
    position: absolute;
    top: 0;
    bottom: auto;
    right: -200%;
    left: -200%;
    width: auto;
    height: 100%;
    margin: auto;
}

.favorites-img.portrait {
    display: block;
    position: absolute;
    right: 0;
    left: auto;
    top: 0;
    bottom: auto;
    width: 100%;
    height: auto;
    margin: auto;
}

.favorites-img.default {
    display: block;
    position: absolute;
    top: 25%;
    bottom: auto;
    right: -200%;
    left: -200%;
    width: auto;
    height: 50%;
    margin: auto;
}

.favorites-text {
    display: block;
    position: relative;
    height: 120px;    
    margin: 8px 0px;
    text-decoration: none;
}

.favorites-text p {
    padding: 0;
    color: #222;
    font-family: "Roboto", Arial, sans-serif; 
    font-size: 14px;
    font-weight: 500;
    word-wrap: break-word;
    text-transform: uppercase;
}

.remove-favorite-button {
    display: block;
    position: absolute;
    top: 16px;
    right: 16px;
    width: 14px;
    padding: 4px;
    background-color: #FFF;
    border: 1px solid #AAA;
    border-radius: 50%;
    opacity: 0;
    -moz-transition: opacity 0.3s;
    -webkit-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
    cursor: pointer;
}

.favorites-card-wrapper:hover .remove-favorite-button,
.remove-favorite-button:focus {
    opacity: 1;
}

.info-list {
    margin-top: 10px;
    font-size: 16px;
    list-style: none;
}

.info-list li {
    position: relative;
    margin-bottom: 3em;
    padding: 0 0 0 4em;
}

.info-list-number {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    color: #E0E0E0;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 4em;
    text-align: center;
    text-transform: uppercase;
}

.info-list h3 {
    padding: 0.3em 0;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 1.125em;
}

.info-list-content {
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 1.125em;
    line-height: 160%;
}

#filter-dialog {
    position: relative;
    min-height: 400px;
    background-color: #FFF;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}

#filter-dialog-close {
    position: absolute;
    top: 14px;
    right: 20px;
    color: #3268AD;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 15px;
    text-transform: uppercase;
    cursor: pointer;
}

#filter-menu {
    padding: 0px 20px;
}

#filter-content-container {
}

.filter-content {
    display: none;
}

.filter-description {
    padding: 16px 40px;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 16px;
    font-style: italic;
}
.filter-choice-list {
    list-style: none;
    border-bottom: 1px solid #E0E0E0;
}

.filter-choice {
    padding: 10px 40px;
    background-color: transparent;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 15px;
    cursor: pointer;
}

.filter-choice.active,
.filter-choice:hover,
.filter-choice:focus {
    background-color: #F3F3F3;
}

.filter-choice::before {    
    content: "";
    display: inline-block;
    width: 0.4em;
    height: 1em;
    margin: 0px 15px 0px 2px;
    border: solid #FFF;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);  
}

.filter-choice.active::before {
    border: solid #8BBEFF;
    border-width: 0 3px 3px 0;
}

.filter-range-control {
    padding: 16px 40px;
    display: inline-block;
    width: 100%;
}

.filter-range-control input {
    width: 100px;
    padding: 16px;
    display: inline-block;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 16px;
    -webkit-appearance: none; 
    margin: 0; 
}

.filter-range-control span {
    display: inline-block;
    margin: 0px 6px;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 16px;
}

.filter-label-container {
    font-size: 16px;
}

.filter-label { 
    display: inline-block;
    position: relative;
    margin: 0px 0px 8px 0px;
    padding: 0.625em 0.5em 0.625em 2.75em;
    background-color: #F3F3F3;
    border: 1px solid transparent;
    border-radius: 3px;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 0.875em;
}

.filter-remove-button {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2.125em;
    background-color: #222;
    border-radius: 3px 0px 0px 3px;
    cursor: pointer;
}

.filter-remove-button:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.375em;
    width: 1.3125em;
    height: 1.5px;
    margin-top: -1px;
    background-color: #FFF;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.filter-remove-button:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.375em;
    width: 1.3125em;
    height: 1.5px;
    margin-top: -1px;
    background-color: #FFF;
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.content-navigation-toggle {
    display: none;
    position: relative;
    width: 80px;
    background-color: #F3F3F3;
    border: 1px solid #E0E0E0;
    padding: 10px;
    color: #222;
    font-family: "Roboto", Arial, sans-serif; 
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
}

.content-navigation-toggle::after {
    content: "";
    position: absolute;
    top: 13px;
    right: 12px;
    padding: 4px;
    border: solid #222;
    border-width: 0px 3px 3px 0px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);    
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.content-navigation-toggle.active::after {
    margin-top: 4px;
    -webkit-transform: rotate(225deg);
    -ms-transform: rotate(225deg);    
    -moz-transform: rotate(225deg);
    transform: rotate(225deg);
}

#map-filter-toggle {
    margin-bottom: 10px;
}

.content-navigation-toolbar {
    margin: 20px 0px;
}

.content-navigation-control {
    display: inline-block;
    width: 100%;
    font-size: 16px;
}

.content-navigation-control-label {
    display: inline-block;
    width: 90px;
    padding: 0.5em 0;
    color: #222;
    font-family: "Roboto", Arial, sans-serif; 
    font-weight: 700;
    font-size: 0.875em;
    text-transform: uppercase;
}

.content-navigation-control-options {
    display: inline-block;
}

.content-navigation-control-option {
    display: inline-block;
    margin: 4px 2px;
    padding: 0.5em 1em;
    background-color: transparent;
    -moz-transition: background-color 0.2s;
    -webkit-transition: background-color 0.2s;
    -o-transition: background-color 0.2s;
    transition: background-color 0.2s;
    border: 1px solid #AAA;
    border-radius: 3px;
    color: #888;
    font-family: "Roboto", Arial, sans-serif; 
    font-weight: 400;
    font-size: 0.875em;
    cursor: pointer;
}

.content-navigation-control-option:hover {
    background-color: #F3F3F3;
}

.content-navigation-control-option.active {
    background-color: #F3F3F3;
}

.content-navigation-control-options  input {
    box-sizing: border-box;
    width: 340px;
    margin: 4px 2px;
    padding: 0.5em;
    border: 1px solid #AAA;
    border-radius: 3px;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 0.875em;
}

.content-navigation-control-options  select {
    margin: 4px 2px;
    padding: 0.5em 1em;
    border: 1px solid #AAA;
    border-radius: 3px;
    color: #888;
    font-family: "Roboto", Arial, sans-serif; 
    font-weight: 400;
    font-size: 0.875em;
}

.content-navigation-control-options  input:focus,
.content-navigation-control-options  select:focus {
    border: 1px solid #888;
}

.content-navigation-list-count {
    display: inline-block;
    margin: 6px 0px;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 14px;
}

.content-navigation-all-button {
    float: right;
    display: inline-block;
    margin: 6px 0px;
    color: #3268AD;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 14px;
    cursor: pointer;
}

.content-navigation-list {
    clear: right;
    border-top: 1px solid #E0E0E0;
    list-style: none;
}

.content-navigation-list-item {
    position: relative;
    font-size: 16px;
}

.content-navigation-list-item.hidden,
.content-navigation-list-item.overflow {
    display: none;
}

.list-item-content {
    position: relative;
    font-size: 16px;
    height: 5em;
    padding: 10px 0px;
    border-bottom: 1px solid #E0E0E0;
    overflow: hidden;
}

.list-item-title,
.list-item-content a {
    display: block;
    font-size: 16px;
    margin-left: 5em;
    margin-right: 100px;
    padding: 0px 8px;
    text-decoration: none;
    cursor: pointer; 
}

.list-item-content a:hover,
.list-item-content a.visited {
    text-decoration: none;
}

.list-item-title-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 8px;
    box-shadow: inset 0 -8px 4px -4px #FFF;
    border-bottom: 3px solid #FFF;
}

.list-item-name {
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 1em;  
    text-decoration: none;
}

.list-item-name:hover {
    color: #888;
}

.list-item-symbol {
    display: inline-block;
    color: #888;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 0.875em; 
    text-decoration: none;
    text-transform: uppercase;
}

.list-item-stage {
    float: right;
    color: #3268AD;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 0.75em;
    text-decoration: none;
    text-transform: uppercase;
}

.list-item-img-frame {
    position: absolute;
    top: 10px;
    left: 0;
    width: 5em;
    height: 5em;
    background-color: #F2F2F2;    
    overflow: hidden;
}

.list-item-img {
    display: block;
    position: absolute;
    color: transparent;
}

.list-item-img.landscape {
    top: 0;
    left: -200%;
    right: -200%;
    margin: auto;
    width: auto;
    height: 5em;
}

.list-item-img.portrait {
    left: 0;
    top: -200%;
    bottom: -200%;
    margin: auto;
    width: 5em;
    height: auto;
}

.list-item-option-button {
    position: absolute;
    bottom: 3px;
    right: 0px;
    height: 7px;
    padding: 8px 0px;
    cursor: pointer;
}

.option-dot {
    display: block;
    float: left;
    width: 6px;
    height: 6px;
    margin-right: 3px;
    background-color: #BFBFBF;
    border-radius: 50%;
}

.list-item-options {
    display: none;
    position: absolute;
    bottom: 100%;
    right: 0;
    z-index: 98;
    width: 11em;
    margin-bottom: 10px;
    padding: 20px 30px;
    background-color: rgba(0,0,0,0.9);
    box-shadow: 1px 1px 10px rgba(0,0,0,0.3);
    cursor: pointer;
}

.list-item-preview-button,
.list-item-download-button {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.4);
}

.list-item-option,
a.list-item-option,
a.list-item-option:visited {
    display: block;
    color: #FFF;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 1em;
    opacity: 0.8;
}

.list-item-option:hover,
.list-item-option:focus,
a.list-item-option:hover,
a.list-item-option:focus {
    opacity: 1;
}

.list-item-briefcase-wrapper {
    display: inline-block;
    position: relative;
    width: 30px;
    height: 24px;
}

.list-item-briefcase-button img { 
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.list-item-briefcase-button.flash img {
    -webkit-animation-name: flash-animation;
    -webkit-animation-duration: 150ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: flash-animation;
    -moz-animation-duration: 150ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;

    animation-name: flash-animation;
    animation-duration: 150ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

.list-item-preview-button img,
.list-item-download-button img {
    display: inline-block;
    position: relative;
    width: 22px;
    height: 22px;
    padding-right: 2px;
}

.list-item-info-button {
    display: block;
    position: absolute;
    top: 1.5em;
    right: 0;
    width: 2.25em;
    height: 2.25em;
    text-align: center;
    cursor: pointer; 
}

.list-item-info-icon {
    display: block;
    position: absolute;
    top: 8px;
    right: 0;
    width: 1em;
    height: 1em; 
    background-color: #CCC;
    border-radius: 50%;
    padding: 0.2em;
    color: #FFF;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 100%;
}

.key-criteria-popup {
    position: absolute;
    top: -40px;
    right: 24px;
    z-index: 99;
    width: 440px;
    padding: 20px 30px;
    visibility: hidden;
    background-color: rgba(0,0,0,0.8);
    box-shadow: 1px 1px 10px rgba(0,0,0,0.3);
    opacity: 0;
    -moz-transition: opacity 0s;
    -webkit-transition: opacity 0s;
    -o-transition: opacity 0s;
    transition: opacity 0s;
    -moz-transition-delay: 0.25s;
    -webkit-transition-delay: 0.25s;
    -o-transition-delay: 0.25s;
    transition-delay: 0.25s;
}

.list-item-info-button:hover .key-criteria-popup,
.list-item-info-button:focus .key-criteria-popup {
    visibility: visible;
    opacity: 1;
}

.key-criteria-popup  h3 {
    padding: 4px 16px 10px 16px;
    color: #FFF;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 18px;
}

.key-criteria-list {
    max-height: 220px;
    overflow-y: auto;
    padding: 20px 16px 6px 30px;
    list-style-type: square;
    list-style-position: outside;
    text-align: left;
    background-color: #FFF;
}

.key-criteria-list li {
    float: none;
    width: 100%;
    margin-bottom: 14px;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
}

.preview-class-button {
    cursor: pointer;
}

#map-popup-briefcase-button,
.modal-preview-briefcase-button {
    display: inline-block;
    position: relative;
    margin: 8px 0px 4px 0px;
    padding: 4px;
    font-size: 14px;
    cursor: pointer;
}

#map-popup-briefcase-button-wrapper,
#modal-preview-briefcase-button-wrapper {
    display: inline-block;
    position: relative;
    width: 30px;
    height: 24px;
    margin-right: 4px;
}

#map-popup-briefcase-button img,
.modal-preview-briefcase-button img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

#map-popup-briefcase-button.flash img,
.modal-preview-briefcase-button.flash img {
    -webkit-animation-name: flash-animation;
    -webkit-animation-duration: 150ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: flash-animation;
    -moz-animation-duration: 150ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;

    animation-name: flash-animation;
    animation-duration: 150ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

.modal-preview-briefcase-button  {
    margin-top: 30px;
}

.modal-preview-briefcase-button  span {
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 18px;
}

#modal-preview-frame {
    position: absolute;
    top: 50%;
    bottom: 50%;
    right: 0;
    left: 0;
    padding: 0px 20px;
    -moz-transition: top 0.5s, bottom 0.5s;
    -webkit-transition: top 0.5s, bottom 0.5s;
    -o-transition: top 0.5s, bottom 0.5s;
    transition: top 0.5s, bottom 0.5s;
    overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
}

#modal-preview-frame.loading {
    top: 0;
    bottom: 0;
}

#modal-preview-frame.loaded {
    top: 0;
    bottom: 0;
    overflow-y: auto;
}

#modal-preview-page {
    position: relative;
    max-width: 660px;
    min-height: 101%;
    margin-right: auto;
    margin-left: auto;
    background-color: #FFF;  
    border-right: 1px solid #BFBFBF;
    border-left: 1px solid #BFBFBF;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}

#modal-preview-load-overlay {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(255,255,255,0.9);
}

#modal-preview-frame.replacing #modal-preview-load-overlay {
    display: block;
}

#modal-preview-close-button {
    top: 20px;
    right: 20px;
    z-index: 9999;
}

#modal-preview-wrapper {
    position: relative;
    padding: 20px 40px 40px 40px;
}

#modal-preview-label {
    display: inline-block;
    background-color: #3268AD;
    padding: 6px 12px;
    color: #FFF;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 13px;   
    text-transform: uppercase;
}

#modal-preview-title {
    margin: 20px 0px 0px 0px;
}

#modal-preview-title a,
#modal-preview-title a.visited {
    color: #222;
    text-decoration: none;
}

#modal-preview-title a:hover {
    color: #888;
    color: #3268AD;
}

#modal-preview-title h2 {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 28px;  
}

#modal-preview-title h3 {
    margin-top: 4px;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 16px;  
}

#modal-preview-navigation-bar {
    display: inline-block;
    width: 100%;
    margin: 10px 0px;
}

#modal-preview-previous-button, 
#modal-preview-next-button {
    padding: 8px;
    -webkit-transition: background-color 0.2s;
    -moz-transition: background-color 0.2s;
    -ms-transition: background-color 0.2s;
    -o-transition: background-color 0.2s;
    transition: background-color 0.2s;
    border-radius: 3px;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    line-height: 100%;
    cursor: pointer;
}

#modal-preview-previous-button:hover, 
#modal-preview-next-button:hover {
    background-color: #E0E0E0;
}

#modal-preview-previous-button {
    float: left;
}

#modal-preview-next-button {
    float: right;
}

#modal-preview-previous-button::before {
    content: "";
    display: inline-block;
    margin-right: 4px;
    padding: 4px;
    border: solid #222;
    border-width: 4px 0 0 4px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#modal-preview-next-button::after {
    content: "";
    display: inline-block;
    margin-right: 4px;
    padding: 4px;
    border: solid #222;
    border-width: 4px 4px 0 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.modal-preview-content {
    margin-top: 20px;
    font-size: 16px;
}
    
#modal-preview-image {
    clear: both;
    display: block;
    visibility: hidden;
    width: 100%;
}
    
.modal-preview-subclass-list {
    list-style: none;
}

.modal-preview-subclass-list li  a,
.modal-preview-subclass-list li  a.active,
.modal-preview-subclass-list li  a.visited {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 17px;
    text-decoration: none;
}

#modal-preview-soil-list {
    color: #222;
    font-size: 24px;
    list-style: square;
    margin-left: 24px;
}

#modal-preview-soil-list li {
    margin: 10px 0px;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 16px;
}

.map {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 583px;
    background-color: #222;
    font-size: 16px;
    border: 1px solid #888;
}

body.full-screen .map {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    height: auto;
    z-index: 998;
    border: none;
}

.ol-viewport {
    z-index: 2;
}

.ol-control {
    padding: 0;
}

.ol-control button {
    color: #222;
    background-color: #FFF;
    background-color: rgba(255,255,255,0.8);
    z-index: 3;
}

.ol-zoom {
    top: 20px;
    left: 20px;
    right: auto;
    background-color: transparent;
}

.ol-zoom:hover {
    background: none;
    border: none;
    box-shadow: none;
}

.ol-control button.ol-zoom-in {
    box-shadow: 0px 0px 3px 0px rgba(59, 59, 59, 0.7);
}

.ol-control button.ol-zoom-out {
    margin-top: 3px;
    box-shadow: 0px 0px 3px 0px rgba(59, 59, 59, 0.7);
}

#map-home-button {
    border-radius: 0;
    margin-top: 3px;
    padding: 4px;
    box-shadow: 0px 0px 3px 0px rgba(59, 59, 59, 0.7);
}

#map-home-button img {
    width: 100%;
}

.ol-attribution {
    right: 20px;
    bottom: 20px;
}

.ol-attribution a {
    color: #698AAA;
}

.ol-zoom button:focus, .ol-zoom button:hover {
    background-color: #FFF;
    background-color: rgba(255,255,255,1.0);
}

.ol-attribution button {
    margin: 0;
    background-color: rgba(255,255,255,0.7);
}

.ol-attribution button:focus, .ol-attribution button:hover {
    background-color: #FFF;
    background-color: rgba(255,255,255,1.0);
}

.ol-attribution span {
    color: #222;
}

#map-tools {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 16px;
    z-index: 3;
    box-shadow: 0px 0px 3px 0px rgba(59, 59, 59, 0.7);
}

.map-tool-group {
    clear: left;
    position: relative;
    width: 120px;
    cursor: pointer;
    border-bottom: 1px solid #E0E0E0;
}

.map-tool-group h4 {
    padding: 10px;
    display: block;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 1em;
    line-height: 100%;
}

.map-button {
    background-color: #FFF;
}

.map-menu {
    background-color: #FFF;
}

.map-tool-group-content {
    height: 0;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    -ms-transition: height 0.3s;
    -o-transition: height 0.3s;
    transition: height 0.3s;
    overflow: hidden;
}

.map-tool-group-wrapper {
    margin: 10px 10px 10px 10px;
}

.map-tool-group.active .map-tool-group-content {    
    height: 21.5em;
}

.map-tool-toggle {
    display: block;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 0.8125em;
    height: 0.8125em;
}

.map-tool-toggle::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 0.8125em;
    height: 0;
    margin: auto;
    border-top: 3px solid #222;
    transform-origin: center;
    -webkit-transition: transform 0.3s;
    -moz-transition: transform 0.3s;
    -ms-transition: transform 0.3s;
    -o-transition: transform 0.3s;
    transition: transform 0.3s;
}

.map-tool-toggle::after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 0.8125em;
    height: 0;
    margin: auto;
    border-top: 3px solid #222;
    transform: rotate(90deg);
    transform-origin: center;
    -webkit-transition: transform 0.3s;
    -moz-transition: transform 0.3s;
    -ms-transition: transform 0.3s;
    -o-transition: transform 0.3s;
    transition: transform 0.3s;
}

.map-tool-group.active .map-tool-toggle::before {
    transform: rotate(45deg);
}

.map-tool-group.active .map-tool-toggle::after {
    transform: rotate(135deg);
}

.map-tool {
    max-width: 80px;
    margin: 0 auto 4px auto;
    padding: 4px 0px;
    border-radius: 3px;
    cursor: pointer;
}

.map-tool-label {
    display: block;
    margin-bottom: 1px;
    color: #888;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 0.9375em; 
    text-align: center;
}

.map-tool:hover .map-tool-label,
.map-tool.active .map-tool-label {
    color: #222;
}

.map-tool img {
    display: block;
    width: 50px;
    margin: 0 auto;
}

#road-basemap-option img,
#topo-basemap-option img,
#aerial-basemap-option img,
#hybrid-basemap-option img{
    border-radius: 50%;
}

.line-color-box {
    width: 50px;
    height: 20px;
    margin: 0px auto 6px auto;
    border: 1px solid transparent;
}

.line-color-border-box {
    border: 1px solid #222;
}

.map-tool-checkbox {
    margin-bottom: 20px;
}
.map-tool-checkbox .map-tool-label  {
    margin-bottom: 6px;
}

.map-tool-checkbox-icon {
    display: block;
    position: relative;
    width: 1.25em;
    height: 1.25em;
    margin: 0 auto;
    border: 1px solid #888;
    border-radius: 2px;
}

.map-tool-checkbox[aria-checked="true"] .map-tool-checkbox-icon {
    background-color: #58A1FF;
    border: 1px solid #58A1FF;  
}

.map-tool-checkbox-icon::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0.25em;
    height: 0.75em;
    margin: 0.0625em 0 0 0.4375em;
    border: solid transparent;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.map-tool-checkbox[aria-checked="true"] .map-tool-checkbox-icon::after {
    content: "";
    display: inline-block;
    width: 0.25em;
    height: 0.75em;
    margin: 0.0625em 0 0 0.4375em;
    border: solid #FFF;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.map-tool-group input {
    width: 100%;
    margin-bottom: 16px;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 1em;
}

#map-location-submit-button, 
#geo-unit-geolocation-button,
#class-geolocation-button {
    margin-bottom: 16px;
    padding: 10px;
    background-color: #F3F3F3;
    -webkit-transition: background-color 0.2s;
    -moz-transition: background-color 0.2s;
    -ms-transition: background-color 0.2s;
    -o-transition: background-color 0.2s;
    transition: background-color 0.2s;
    border-radius: 3px;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 1em;
    text-align: center
}

#map-location-submit-button:hover, 
#geo-unit-geolocation-button:hover,
#class-geolocation-button:hover {
    background-color: #E0E0E0;
}

#map-popup {
    position: absolute;
    bottom: 12px;
    left: -130px;
    width: 260px;
    min-height: 210px;
    z-index: 998;
    background-color: white;    
    -webkit-filter: drop-shadow(0 1px 3px rgba(0,0,0,0.7));
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.7));
}

#map-popup:after, #map-popup:before {
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
    content: " ";
    border: solid transparent;
    pointer-events: none;
}

#map-popup:after {
    left: 130px;
    margin-left: -10px;
    border-top-color: white;
    border-width: 10px;
}

#map-popup:before {
    left: 130px;
    margin-left: -11px;
    border-top-color: #BFBFBF;
    border-width: 11px;
}

#map-popup-closer {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 18px;
    height: 18px;
    padding: 8px;
    cursor: pointer;
    opacity: 1;
}

#map-popup-closer:hover {
    opacity: 0.7;
}

#map-popup-closer::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 18px;
    height: 0;
    margin: auto;
    border-top: 3.8px solid #222;
    transform: rotate(45deg);
    transform-origin: center;
}

#map-popup-closer::after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 18px;
    height: 0;
    margin: auto;
    border-top: 3.8px solid #222;
    transform: rotate(-45deg);
    transform-origin: center;
}

.map-popup-content {
    padding: 8px;
    background-color: #FFF;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 16px;
}

.map-popup-title {
    margin-right: 20px;
    font-weight: 400;
    cursor: pointer;
}

.map-popup-title:hover {
    text-decoration: underline;
}

.map-popup-img {
    width: 100%;
}

#map-popup-img-frame {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 135px;
    margin: 4px;
    overflow: hidden;
}

#map-popup-img-frame .map-popup-img {
    position:absolute;
    display: block;
    left: -200%;
    right: -200%;
    top: 0;
    bottom: 0;
    margin: auto;
    width: auto;
    height: 135px;
}

.soil-map-popup-content table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    font-size: 15px;
}

.soil-map-popup-content table th {
    text-align: left;
    padding: 0px 6px 4px 6px;
}

.soil-map-popup-content table td {
    text-align: left;
    padding: 4px 6px;
    background-color: #DBE8FA;
    border: 2px solid #FFF;
    vertical-align: top;
}

.soil-map-popup-content p {
    padding: 0;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 130%;
}

.map-thumbnail {
    display: block;
    position: relative;
    width: 80px;
    height: 50px;
    border: 4px solid #FFF;
    background-color: #FFF;
    box-shadow: 1px 1px 6px rgba(0,0,0,0.7);
    overflow: hidden;
    -moz-transition: width 0.2s, height 0.2s, transform 0.2s;
    -webkit-transition: width 0.2s, height 0.2s, transform 0.2s;
    transition: width 0.2s, height 0.2s, transform 0.2s;
}

.map-thumbnail:hover,
.map-thumbnail:focus {
    width: 128px;
    height: 80px;
    -moz-transform: translate(-24px, -15px);
    -ms-transform: translate(-24px, -15px);
    -webkit-transform: translate(-24px, -15px);
    -o-transform: translate(-24px, -15px);
    transform: translate(-24px, -15px);
}

.map-thumbnail-image {
    position:absolute;
    display: block;
    left: -200%;
    right: -200%;
    margin: auto;
    width: auto;
    height: 50px;
    -moz-transition: height 0.2s;
    -webkit-transition: height 0.2s;
    transition: height 0.2s;
}

.map-thumbnail:hover .map-thumbnail-image,
.map-thumbnail:focus .map-thumbnail-image {
    height: 80px;
}

body.full-screen #map-instructions,
.map-block.full-screen #map-instructions {
    display: none;
}

body.full-screen #map-filter-toolbar {
    position: fixed;
    bottom: 10px;
    left: 20px;
    z-index: 999;
    max-width: 800px;
}

body.full-screen #map-filter-toolbar .content-navigation-toolbar {
    margin: 10px 0px;
}

body.full-screen #map-filter-toolbar .content-navigation-control-label {
    color: #FFF;
    text-shadow: 0 0 2px rgba(0,0,0,0.4);
}

body.full-screen #map-filter-toolbar .content-navigation-control-option {
    background-color: rgba(255,255,255,0.8);
    border: none;
    color: #222;
}

body.full-screen #map-filter-toolbar .filter-label {
    background-color: #FFF;
}

.citation-list {
    clear: right;
    list-style-type: none;
}

.citation {   
    position: relative;
    min-height: 50px;  
    margin-bottom: 10px;    
    padding: 14px 0px;
}

.citation-id {
    display: none;
    color: #000;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 15px;
}

p.citation-title,
.citation-title a,
.citation-title a:visited {
    color: #222;
    padding: 0;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 18px;
    text-decoration: none;
    line-height: 130%;
}

.citation-link:hover {
    text-decoration: underline;
}

p.citation-authors {
    margin-top: 2px;
    padding: 0;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 130%;
}

p.citation-info {
    margin-top: 2px;
    padding: 0;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 130%;
}

.print-citation {
    padding: 8px 0px;
    text-indent: -30px;
    padding-left: 30px;
}

.print-citation a:hover {
    text-decoration: underline;
}

.key-section-header {
    display: inline-block;
    position: relative;
    width: 100%;
    margin: 10px 0px 10px 0px;
    padding: 5px 0px 14px 0px;
    border-bottom: 1px solid #E0E0E0;
    font-size: 16px;
    cursor: pointer;
}

.key-preview-header {
    display: inline-block;
    position: relative;
    width: 100%;
    margin: 10px 0px 20px 0px;
    font-size: 16px;
}

.key-section-header span,
.key-preview-header span {
    display: inline-block;
    padding-right: 80px;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 1.125em;
}

.key-section-header::before {
    content: "";
    position: absolute;
    bottom: 23px;
    right: 10px;
    width: 16px;
    height: 2px;
    background-color: #222;
    -moz-transition: background-color 0.2s;
    -webkit-transition: background-color 0.2s;
    transition: background-color 0.2s;
}

.key-section-header::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 16px;
    right: 17px;
    width: 2px;
    height: 16px;
    background-color: #222;
    -moz-transition: background-color 0.2s;
    -webkit-transition: background-color 0.2s;
    transition: background-color 0.2s;
}

.key-section-header:hover::before,
.key-section-header:hover::after,
.key-section-header:focus::before,
.key-section-header:focus::after {
    background-color: #222;
}

.key-section.active .key-section-header::after {
    display: none;
}

.key-download-link {
    position: absolute;
    right: 40px;
    bottom: 6px;
}

.key-download-link img {
    width: 24px;
}

.key-content {
    display: none;
    margin-bottom: 30px;
}

.key-section.active .key-content {
    display: block;
}

.static-key-lead {
    font-size: 18px;
    line-height: 160%;
}

.static-key-lead-target.key-target-link {
    cursor: pointer;
}

.static-key-lead span,
.static-key-lead-target p {
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 160%;
}

span.static-key-lead-label {
    font-weight: 500;
}

span.static-key-lead-criteria {
    padding-left: 4px;
}

.static-key-lead-target a,
.static-key-lead-target a:visited {
    color: #222;
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    line-height: 160%;
    text-decoration: none;
}

.static-key-lead-target a:hover {
    text-decoration: underline;
}

.static-key-notes {
    list-style: none;
    margin-top: 40px;
}

.static-key-notes li {
    margin: 5px 0px;
}

.static-key-notes span {
    font-weight: 400;
}

.interactive-key-wrapper {
    padding: 0px 80px;
}

.interactive-key-group {
    padding: 10px 0px;
}

.interactive-key-group:not(:first-child) {
    border-top: 1px solid #222;
}

.interactive-key-couplet {
    padding: 10px 0px;
}

.interactive-key-couplet:not(:first-child) {
    border-top: 1px solid #222;
}

.interactive-key,
.interactive-key-lead {
    padding: 10px 0px;
    position: relative;
    font-size: 16px;
    cursor: pointer;
}

.interactive-key-bubble {
    position: absolute;
    top: 50%;
    left: 0;
    width: 16px;
    height: 16px;
    margin-top: -10px;
    border: 1px solid #222;
    border-radius: 50%;
}

.interactive-key-leaf-arrow {
    position: absolute;
    top: 50%;
    left: 0;
    width: 16px;
    margin-top: -8px;
    opacity: 0.8;
    cursor: pointer;
}

.interactive-key:hover .interactive-key-bubble,
.interactive-key-lead:hover .interactive-key-bubble {
    border: 1px solid #222;
}

.interactive-key.selected .interactive-key-bubble,
.interactive-key-lead.selected .interactive-key-bubble {
    background-color: #222;
    border: 1px solid #222;
}

.interactive-key-lead-content {
    margin-left: 30px;
    padding: 10px;
    min-height: 78px;
    background-color: #F3F3F3;
}

.interactive-key-criteria {
    padding-right: 6px;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 1em;
    line-height: 160%;
}

.interactive-key-image-button {
    display: inline;
    position: relative;
    top: 2px;
    height: 1.2em;
    opacity: 0.2;
    cursor: pointer;
}

.interactive-key-target {
    padding-right: 6px;
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 1em;
    line-height: 160%;
}

.interactive-key-sep {
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 160%;
}

.species-link,
.narrative-citation-link {
    color: #3268AD;
    text-decoration: none;
}

.content-info-button { 
    display: inline-block;
    position: relative;
    top: 0.05em;
    width: 1.1875em;
    height: 1.1875em;
    background-color: #58A1FF;
    border-radius: 50%;
    opacity: 0.8;
    cursor: pointer;
}

.content-info-button:after {
    position: absolute; 
    content: "?";
    top: 1px;
    right: 0;
    left: 0;
    color: #FFF;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 0.875em; 
    text-align: center;
}

.content-info-button:hover,
.content-info-button:focus {
    opacity: 1;
}

.content-info-tooltip {
    position: absolute;
    top: -20px;
    left: 34px;
    width: 400px;
    min-height: 3em;
    z-index: 999;
    padding: 0.625em 0.875em;
    padding: 1em 1.5em;
    color: #FFF;
    font-family: "Roboto", Sans-Serif;
    font-weight: 400;
    font-size: 0.875em;
    background-color: #58A1FF;
    visibility: hidden;
    opacity: 0;
    -moz-transition: visibility 0s, opacity 0.2s linear;
    -webkit-transition: visibility 0s, opacity 0.2s linear;
    -o-transition: visibility 0s, opacity 0.2s linear;
    transition: visibility 0s, opacity 0.2s linear;
}

.content-info-button:hover .content-info-tooltip,
.content-info-button:focus .content-info-tooltip {
    visibility: visible;
    opacity: 1;
}

.content-info-tooltip:after {
    position: absolute;
    content: " ";
    top: 20px;
    right: 100%;
    border-width: 10px;
    border-style: solid;
    border-top-color: transparent;
    border-right-color: #58A1FF;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.content-load-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FFF;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 99;
}

.circle-loader-block {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 999;
    background-color: #FFF;
    background-color: rgba(255,255,255,0.6);
}

.circle-loader {
    position: absolute;
    font-size: 10px;
    top: 50%;
    right: 0;
    left: 0;
    z-index: 999;
    width: 1em;
    height: 1em;
    margin: -0.5em auto 0 auto;
    border-radius: 50%;
    -webkit-animation: circle-load 1.1s infinite ease;
    animation: circle-load 1.1s infinite ease;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

@-webkit-keyframes circle-load {
    0%,
    100% {
        box-shadow: 0 -2.08em 0 0 #000,
                    1.44em -1.44em 0 0 rgba(0, 0, 0, 0.1),
                    2em 0 0 0 rgba(0, 0, 0, 0.1),
                    1.4em 1.4em 0 0 rgba(0, 0, 0, 0.1),
                    0 2em 0 0 rgba(0, 0, 0, 0.1),
                    -1.44em 1.44em 0 0 rgba(0, 0, 0, 0.1),
                    -2.08em 0 0 0 rgba(0, 0, 0, 0.4),
                    -1.44em -1.44em 0 0 rgba(0, 0, 0, 0.7);
    }
    12.5% {
        box-shadow: 0 -2.56em 0 0 rgba(0, 0, 0, 0.7),
                    1.44em -1.44em 0 0 #000,
                    2em 0 0 0 rgba(0, 0, 0, 0.1), 
                    1.4em 1.4em 0 0 rgba(0, 0, 0, 0.1), 
                    0 2em 0 0 rgba(0, 0, 0, 0.1), 
                    -1.44em 1.44em 0 0 rgba(0, 0, 0, 0.1), 
                    -2.08em 0 0 0 rgba(0, 0, 0, 0.1), 
                    -1.44em -1.44em 0 0 rgba(0, 0, 0, 0.4);
    }
    25% {
        box-shadow: 0 -2.08em 0 0 rgba(0, 0, 0, 0.4), 
                    1.44em -1.44em 0 0 rgba(0, 0, 0, 0.7), 
                    2em 0 0 0 #000, 
                    1.4em 1.4em 0 0 rgba(0, 0, 0, 0.1), 
                    0 2em 0 0 rgba(0, 0, 0, 0.1), 
                    -1.44em 1.44em 0 0 rgba(0, 0, 0, 0.1), 
                    -2.08em 0 0 0 rgba(0, 0, 0, 0.1), 
                    -1.44em -1.44em 0 0 rgba(0, 0, 0, 0.1);
    }
    37.5% {
        box-shadow: 0 -2.08em 0 0 rgba(0, 0, 0, 0.1), 
                    1.44em -1.44em 0 0 rgba(0, 0, 0, 0.4), 
                    2em 0 0 0 rgba(0, 0, 0, 0.7), 
                    1.4em 1.4em 0 0 #000, 
                    0 2em 0 0 rgba(0, 0, 0, 0.1), 
                    -1.44em 1.44em 0 0 rgba(0, 0, 0, 0.1), 
                    -2.08em 0 0 0 rgba(0, 0, 0, 0.1), 
                    -1.44em -1.44em 0 0 rgba(0, 0, 0, 0.1);
    }
    50% {
        box-shadow: 0 -2.08em 0 0 rgba(0, 0, 0, 0.1), 
                    1.44em -1.44em 0 0 rgba(0, 0, 0, 0.1), 
                    2em 0 0 0 rgba(0, 0, 0, 0.4), 
                    1.4em 1.4em 0 0 rgba(0, 0, 0, 0.7), 
                    0 2em 0 0 #000, 
                    -1.44em 1.44em 0 0 rgba(0, 0, 0, 0.1), 
                    -2.08em 0 0 0 rgba(0, 0, 0, 0.1), 
                    -1.44em -1.44em 0 0 rgba(0, 0, 0, 0.1);
    }
    62.5% {
        box-shadow: 0 -2.08em 0 0 rgba(0, 0, 0, 0.1), 
                    1.44em -1.44em 0 0 rgba(0, 0, 0, 0.1), 
                    2em 0 0 0 rgba(0, 0, 0, 0.1), 
                    1.4em 1.4em 0 0 rgba(0, 0, 0, 0.4),
                    0 2em 0 0 rgba(0, 0, 0, 0.7), 
                    -1.44em 1.44em 0 0 #000, 
                    -2.08em 0 0 0 rgba(0, 0, 0, 0.1), 
                    -1.44em -1.44em 0 0 rgba(0, 0, 0, 0.1);
    }
    75% {
        box-shadow: 0 -2.08em 0 0 rgba(0, 0, 0, 0.1), 
                    1.44em -1.44em 0 0 rgba(0, 0, 0, 0.1), 
                    2em 0 0 0 rgba(0, 0, 0, 0.1), 
                    1.4em 1.4em 0 0 rgba(0, 0, 0, 0.1), 
                    0 2em 0 0 rgba(0, 0, 0, 0.4), 
                    -1.44em 1.44em 0 0 rgba(0, 0, 0, 0.7), 
                    -2.08em 0 0 0 #000, 
                    -1.44em -1.44em 0 0 rgba(0, 0, 0, 0.1);
    }
    87.5% {
        box-shadow: 0 -2.08em 0 0 rgba(0, 0, 0, 0.1), 
                    1.44em -1.44em 0 0 rgba(0, 0, 0, 0.1), 
                    2em 0 0 0 rgba(0, 0, 0, 0.1), 
                    1.4em 1.4em 0 0 rgba(0, 0, 0, 0.1), 
                    0 2em 0 0 rgba(0, 0, 0, 0.1), 
                    -1.44em 1.44em 0 0 rgba(0, 0, 0, 0.4), 
                    -2.08em 0 0 0 rgba(0, 0, 0, 0.7), 
                    -1.44em -1.44em 0 0 #000;
    }
}

@keyframes circle-load {
    0%,
    100% {
        box-shadow: 0 -2.08em 0 0 #000,
                    1.44em -1.44em 0 0 rgba(0, 0, 0, 0.1),
                    2em 0 0 0 rgba(0, 0, 0, 0.1),
                    1.4em 1.4em 0 0 rgba(0, 0, 0, 0.1),
                    0 2em 0 0 rgba(0, 0, 0, 0.1),
                    -1.44em 1.44em 0 0 rgba(0, 0, 0, 0.1),
                    -2.08em 0 0 0 rgba(0, 0, 0, 0.4),
                    -1.44em -1.44em 0 0 rgba(0, 0, 0, 0.7);
    }
    12.5% {
        box-shadow: 0 -2.56em 0 0 rgba(0, 0, 0, 0.7),
                    1.44em -1.44em 0 0 #000,
                    2em 0 0 0 rgba(0, 0, 0, 0.1), 
                    1.4em 1.4em 0 0 rgba(0, 0, 0, 0.1), 
                    0 2em 0 0 rgba(0, 0, 0, 0.1), 
                    -1.44em 1.44em 0 0 rgba(0, 0, 0, 0.1), 
                    -2.08em 0 0 0 rgba(0, 0, 0, 0.1), 
                    -1.44em -1.44em 0 0 rgba(0, 0, 0, 0.4);
    }
    25% {
        box-shadow: 0 -2.08em 0 0 rgba(0, 0, 0, 0.4), 
                    1.44em -1.44em 0 0 rgba(0, 0, 0, 0.7), 
                    2em 0 0 0 #000, 
                    1.4em 1.4em 0 0 rgba(0, 0, 0, 0.1), 
                    0 2em 0 0 rgba(0, 0, 0, 0.1), 
                    -1.44em 1.44em 0 0 rgba(0, 0, 0, 0.1), 
                    -2.08em 0 0 0 rgba(0, 0, 0, 0.1), 
                    -1.44em -1.44em 0 0 rgba(0, 0, 0, 0.1);
    }
    37.5% {
        box-shadow: 0 -2.08em 0 0 rgba(0, 0, 0, 0.1), 
                    1.44em -1.44em 0 0 rgba(0, 0, 0, 0.4), 
                    2em 0 0 0 rgba(0, 0, 0, 0.7), 
                    1.4em 1.4em 0 0 #000, 
                    0 2em 0 0 rgba(0, 0, 0, 0.1), 
                    -1.44em 1.44em 0 0 rgba(0, 0, 0, 0.1), 
                    -2.08em 0 0 0 rgba(0, 0, 0, 0.1), 
                    -1.44em -1.44em 0 0 rgba(0, 0, 0, 0.1);
    }
    50% {
        box-shadow: 0 -2.08em 0 0 rgba(0, 0, 0, 0.1), 
                    1.44em -1.44em 0 0 rgba(0, 0, 0, 0.1), 
                    2em 0 0 0 rgba(0, 0, 0, 0.4), 
                    1.4em 1.4em 0 0 rgba(0, 0, 0, 0.7), 
                    0 2em 0 0 #000, 
                    -1.44em 1.44em 0 0 rgba(0, 0, 0, 0.1), 
                    -2.08em 0 0 0 rgba(0, 0, 0, 0.1), 
                    -1.44em -1.44em 0 0 rgba(0, 0, 0, 0.1);
    }
    62.5% {
        box-shadow: 0 -2.08em 0 0 rgba(0, 0, 0, 0.1), 
                    1.44em -1.44em 0 0 rgba(0, 0, 0, 0.1), 
                    2em 0 0 0 rgba(0, 0, 0, 0.1), 
                    1.4em 1.4em 0 0 rgba(0, 0, 0, 0.4),
                    0 2em 0 0 rgba(0, 0, 0, 0.7), 
                    -1.44em 1.44em 0 0 #000, 
                    -2.08em 0 0 0 rgba(0, 0, 0, 0.1), 
                    -1.44em -1.44em 0 0 rgba(0, 0, 0, 0.1);
    }
    75% {
        box-shadow: 0 -2.08em 0 0 rgba(0, 0, 0, 0.1), 
                    1.44em -1.44em 0 0 rgba(0, 0, 0, 0.1), 
                    2em 0 0 0 rgba(0, 0, 0, 0.1), 
                    1.4em 1.4em 0 0 rgba(0, 0, 0, 0.1), 
                    0 2em 0 0 rgba(0, 0, 0, 0.4), 
                    -1.44em 1.44em 0 0 rgba(0, 0, 0, 0.7), 
                    -2.08em 0 0 0 #000, 
                    -1.44em -1.44em 0 0 rgba(0, 0, 0, 0.1);
    }
    87.5% {
        box-shadow: 0 -2.08em 0 0 rgba(0, 0, 0, 0.1), 
                    1.44em -1.44em 0 0 rgba(0, 0, 0, 0.1), 
                    2em 0 0 0 rgba(0, 0, 0, 0.1), 
                    1.4em 1.4em 0 0 rgba(0, 0, 0, 0.1), 
                    0 2em 0 0 rgba(0, 0, 0, 0.1), 
                    -1.44em 1.44em 0 0 rgba(0, 0, 0, 0.4), 
                    -2.08em 0 0 0 rgba(0, 0, 0, 0.7), 
                    -1.44em -1.44em 0 0 #000;
    }
}

#load-animation {
    position: absolute;
    top: 22px;
    left: 17px;
}

#mobile-load-animation {
    position: absolute;
    top: 17px;
    left: 19px;
}

@-webkit-keyframes fadeit{
    0%{opacity: 1;}
    100%{opacity: 0;}
}

@-moz-keyframes fadeit{
    0%{opacity: 1;}
    100%{opacity: 0;}
}

@keyframes fadeit{
    0%{ opacity: 1; }
    100%{ opacity: 0;}
}

@-webkit-keyframes flash-animation {
    0% {
        top: 0; 
        left: 0;
        width: 100%;
    }
    50% {
        top: -10%; 
        left: -10%;
        width: 120%; 
    }
    100% {
        top: 0; 
        left: 0;
        width: 100%;
    }
}
  
@-moz-keyframes flash-animation {
    0% {
        top: 0; 
        left: 0;
        width: 100%;
    }
    50% {
        top: -10%; 
        left: -10%;
        width: 120%; 
    }
    100% {
        top: 0; 
        left: 0;
        width: 100%;
    }
}

@keyframes flash-animation {
    0% {
        top: 0; 
        left: 0;
        width: 100%;
    }
    50% {
        top: -10%; 
        left: -10%;
        width: 120%; 
    }
    100% {
        top: 0; 
        left: 0;
        width: 100%;
    }
}


@media only screen and (min-width: 1220px) { 
    .stm-practice-table-container {
        width: 100%;
    }
}

@media only screen and (max-width: 1240px) {
    .standard-content-block {
        padding: 20px 80px 20px 40px;
    }
    .standard-content-slot {
        padding: 0px 80px 0px 40px;
    }
    .standard-content-lead {
        padding: 20px 80px 0px 40px;
    }
    .standard-content h2,
    .wide-content h2 {
        padding: 14px 0px;
        color: #222;
        font-family: "Roboto", Arial, sans-serif; 
        font-weight: 700;
        font-size: 28px;
    }
    .stm-narrative-container {
        width: 100%;
        margin-bottom: 30px;
    }
    .stm-diagram-caption {
        right: 20px;
    }
    .table-collection {
        width: 100%;
        padding: 0;
    }
    .transition-graphic-wrapper {
        max-width: 460px;
        margin: 0px 0px 20px 0px;
    }   
    #print-menu-item {
        display: none;
    } 
}

@media only screen and (max-width: 1100px) {     
    .control-label-container label {  
        display: block; 
    }
    .content-info-button { 
        display: block;
        position: relative;
        top: -0.5em;
    }
    .content-info-tooltip {
        top: auto;
        bottom: 100%;
        left: 0;
        margin-bottom: 14px;
    }
    .content-info-tooltip:after {
        top: 100%;
        left: 0;
        right: auto;
        border-top-color: #58A1FF;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
        pointer-events: none;
    }
    #print-page {
        margin: 40px 0px;
    }
    #key-criteria-block {
        margin-top: 10px;
    }
    .key-criteria-popup {
       width: 250px;
    }
}

@media only screen and (max-width: 860px) {  
    .page-content {
        box-shadow: none;
    }
    .standard-content-block {
        padding: 20px 40px;
    }
    .standard-content-slot {
        padding: 0px 40px;
    }
    .standard-content-lead {
        padding: 20px 40px 0px 40px;
    }
    #page-navigation-section {
        position: fixed;
        height: 2.375em;
        bottom: 0;
        right: 0;
        left: 0;
        z-index: 999;
        overflow-y: auto;
    }
    #page-navigation-section.active {
        height: 100%;
    }
    #page-navigation-background {     
        top: 2.375em;
    }
    #section-tabs {  
        display: none;
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        border: none;
    }    
    #page-navigation-section.active #section-tabs {  
        display: block;
    }
    #section-tabs li {
        border-bottom: 1px solid #E0E0E0;
    }
    .section-tab,
    .all-menu-item,
    .back-tab { 
        display: block;
        position: relative;
        text-align: center;
        background-color: #F3F3F3;
    }
    .section-tab.active,
    .all-menu-item.active,
    .back-tab.active,
    .section-tab:hover,
    .all-menu-item:hover,
    .back-tab:hover { 
        background-color: #F3F3F3;
    }
    #section-scroll {
        display: block;
    }
    .section-content {
        padding-bottom: 50px;
    }
    .section {
        margin-left: 0px;
    }  
    .content-navigation-control-options {
        width: 100%;
    }
    .content-navigation-control-label {
        padding: 0.5em 0 0.15em 0;
    }
    .content-navigation-control-options input {
        width: 100%;
    }    
    body.full-screen #map-filter-toolbar {
        bottom: 40px;
    }
    .stm-element-image-container {
        width: 100%;
    }
    .stm-element-image-container.portrait {
        width: 50%;
    }
    .stm-element-image-wrapper {
        padding-right: 0;
    }
    .stm-element-image-container.portrait .stm-element-image-wrapper {
        padding-top: 0;
        padding-right: 10px;
    }
    .stm-diagram-caption {
        right: 0;
    } 
    .stm-interpretation-criteria, 
    .stm-interpretation-details, 
    .stm-interpretation-details-standard {
        display: inline-block;
        width: 100%;
    }
    .list-item-content {
        font-size: 15px;
    }     
    .interactive-key-wrapper {
        padding: 0px 30px;
    }
    .static-key-scroll-container {
        overflow-x: auto;
    }
    .key-content {
        min-width: 500px;
    }
    .interactive-key-content {
        min-width: auto;
    }
    #image-slider-wrapper {
        padding: 0;    
    }       
    #image-slider-content {
        padding: 0;
    }
    #image-slider-close-button {
        background-color: rgba(0,0,0,0.2);
    }
}

@media only screen and (max-width: 750px) {
    .key-criteria-popup {
        padding: 20px;
    }
}

@media only screen and (max-width: 660px) { 
    #album-frame {
        padding: 0;
    }
    #album-page {
        border: none;
    }
    #album-photo-stream {
        padding: 20px 10px 60px 10px;
    } 
    #modal-preview-frame {
        padding: 0;
    }
    #modal-preview-page {
        border: none;
    }
    #modal-preview-title h2 {
        font-size: 24px;
    }    
    .static-stm-diagram {
        font-size: 20px;
    }
    .static-stm-state-risk-box {
        font-size: 11px;
    }
}

@media only screen and (max-width: 600px) { 
    #error-message-panel h1 {
        font-size: 40px;
    }
    .standard-content-block {
        padding: 20px 20px;
    }
    .standard-content-slot {
        padding: 0px 20px;
    }
    .standard-content-lead {
        padding: 20px 20px 0px 20px;
    }
    .wide-content-block {
        padding: 20px 20px;
    }   
    .standard-content h2,
    .wide-content h2 {
        font-size: 26px;
    }
    .standard-content h3,
    .wide-content h3,
    .standard-inline-header {
        font-size: 17px;
    }
    .standard-content p,
    .wide-content p {
        font-size: 17px;
    }
    .standard-content a,
    .wide-content a,
    .standard-content a:visited,
    .wide-content a:visited {
        font-size: 17px;
    }
    .modal-dialog-wrapper {
        padding: 20px 20px;
    }
    .info-list li {
        padding: 0 0 0 3em;
    }
    .info-list-number {
        font-size: 3em;
    }   
    .info-list-content {
        font-size: 17px;
    }
    .list-item-content a {
        font-size: 16px;        
        margin-right: 40px;
    }
    .list-item-name {
        font-size: 0.875em;
    }
    .list-item-stage {
        display: none;
    }  
    .list-item-info-button {
        top: 0.25em;
    }
    a.list-item-option {
        font-size: 1em;
    }
    .search-list-container {
        height: 300px;
    }
    .photo-stream-button p {
        font-size: 0.8125em;
    }    
    .favorites-text p {
        font-size: 14px;
    }
    .narrative-text {
        font-size: 16px;
    }
    a.static-stm-state-label,
    a.static-stm-state-label:visited {
        font-size: 0.875em;
    }
    p.stm-diagram-caption {
        font-size: 14px; 
    }
    #search-list-count,
    #search-full-list-button {
        display: none;
    }
    #hero-image-container {
        height: 340px;
    }
    #hero-image-frame {  
        width: 680px;          
        margin-left: -340px;
    }
    #hero-image,
    #hero-image-narrow {
        top: 0px;
        height: 340px;
    } 
    #hero-image-overlay { 
        padding-top: 76px; 
    } 
    #page-title {  
        padding: 80px 20px 60px 20px;
    }  
    #page-title h1 {
        font-size: 28px;
    }
    #page-footer {
        margin-top: 100px;
        padding-bottom: 40px;
    }
    .content-navigation-tools {
        display: none;
    }
    .content-navigation-tools.active {
        display: block;
    }
    .content-navigation-toggle {
        display: block;
    }
    .filter-menu-tab {
        width: 100%;
        margin-top: 2px;
        padding: 4px 0px;
    }
    .filter-description,
    .filter-choice {
        padding: 10px 20px;
    }
    #modal-preview-wrapper {
        padding: 20px 20px 30px 20px;
    }
    .modal-preview-briefcase-button  span {
        font-size: 17px;
    }
    body.full-screen #map-filter-toolbar {
        bottom: 50px;
    }
    .ol-zoom {
        top: 10px;
        left: 10px;
    }
    .photo-stream-button-overlay {
        display: none;
    }    
    #photo-stream-container.grid .photo-stream-img-container {
        margin: 5px 5px 0px 0px;
    }
    .stm-sidebar {
        margin: 0;
    }
    .stm-element-image-container {
        margin-bottom: 10px;
    } 
    .stm-practice-table-header th:nth-child(1), 
    .stm-practice-table-header th:nth-child(2),
    .stm-practice-table .stm-practice td:nth-child(1), 
    .stm-practice-table .stm-practice td:nth-child(2) {
        display: inline-block;
        width: 100%;
    }       
    .stm-practice-table-header th:nth-child(2),
    .stm-practice-table .stm-practice td:nth-child(2) a {
        padding: 0px 10px 10px 10px;
    } 
    .table-block-header {
        font-size: 16px;
    }
    .feature-table {
        padding: 6px 0px;
    }
    .feature-table th, 
    .feature-table td {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: inline-block;
        width: 100%;
    }
    .feature-table th {
        padding: 10px 10px 0px 10px;
    } 
    .feature-table td {
        padding: 0px 10px 10px 20px;
    }
    .feature-table p {
        font-size: 16px;
    }
    .data-table-block .table-block-content {
        padding: 0px;
    }
    .data-table-title-row.default-title {
        display: none;
    }
    .data-table-title-row.alternative-title {
        display: table-row;
    }
    .data-table a {
        font-size: 1em;
    }
    .stm-legend-header,
    .stm-legend-item {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: inline-block;
        width: 100%;
    }
    .stm-legend-sep {
        display: none;
    }
    .stm-interpretation-table-header h3 {
        padding: 10px;
    }
    .stm-interpretation-criteria p {
        padding-top: 10px;
    }
    #footer-links li {
        width: 100%;
        margin: 15px 0px;
    } 
    .footer-link {
        width: 100%;
    }    
    .static-key-lead span,
    .static-key-lead-target p {
        font-size: 15px;
    }
    .static-key-lead-target a, 
    .static-key-lead-target a:visited {
        font-size: 15px;
    }
    #image-slider-overlay .static-page {
        height: 100%;    
    }
    #image-slider-wrapper {
        height: 100%;
        padding: 0;    
    }
    #image-slider-content {
        height: 100%;    
        padding: 0;
    }
    #slider {
        height: 100%;    
    }
    .slide-carousel {
        height: 100%;    
    }
    .slide {
        height: 100%;  
        overflow: hidden;  
    }
    .slide-frame {
        height: 100%;
    }
    .slide-overlay {
        height: 100%;    
    }
    .slide-image,
    .slide-image.landscape,
    .slide-image.portrait {
        position: absolute;
        top: 0;
        width: auto;
        height: 100%;
        transform: translate(-50%);
        left: 50%;
    }
    .previous-slide-button {
        left: 10px;
    }
    .next-slide-button {
        right: 10px;
    }
}

@media only screen and (max-width: 530px) {
    .narrative-text {
        font-size: 16px;
    }  
    .static-stm-diagram {
        font-size: 17px;
    }
    .static-stm-state-contents {  
        padding: 5px;
    }
    a.static-stm-state-label {
        font-size: 0.75em; 
        line-height: 110%;
    }
    .stm-element-name {
        font-size: 22px;
    }  
    .stm-element-image-container.portrait {
        width: 100%;
    }     
    .data-table td {
        font-size: 14px;
    }
    #modal-preview-close-button {
        right: 14px;
    }
    #modal-preview-soil-list p {
        font-size: 15px;
    }
    #model-diagram-popup {
        background-color: #FFF;
    }
    #model-diagram-popup-wrapper {
        padding: 0;
    }
    #model-diagram-popup-page {
        padding: 0px 20px;
        border: none;
        box-shadow: none;
    }
    .photo-stream-img {
        margin: 10px 0px;
    }
    .photo-stream-caption-container {
        padding: 0px 0px 20px 0px;
    }
    .photo-stream-lead-caption,
    .photo-stream-caption,
    .photo-stream-caption a{
        font-size: 15px;
    }
    #album-photo-stream {
        padding: 40px 10px 60px 10px;
    }
    #briefcase-geo-unit-list,
    #briefcase-class-list {
        padding-bottom: 20px;
    }
    .favorites-card {
        float: none;
        max-width: 320px;
        width: auto;
        margin: 0 auto;
    }
    .favorites-card-wrapper {
        display: inline-block;
        width: 100%;
        margin: 8px 0px 20px 0px;
        padding: 0;
    }
    .favorites-img-frame {
        height: 140px;
        padding-bottom: 0;
    }
    .favorites-img {
        top: -20px;
        height: 200px;
    }
    .remove-favorite-button {
        top: 10px;
        right: 10px;
    }
    .favorites-text {
        height: auto;
        min-height: 86px;   
        margin: 8px;
    }
    .print-citation {
        margin-bottom: 0;
    }
    .print-citation p,
    .print-citation a {
        font-size: 16px;
    }
    .interactive-key-wrapper {
        padding: 0px 14px;
    }
    .content-info-tooltip {
        width: 270px;
        padding: 0.625em 0.875em;
    }
    .print-option-block label { 
        font-size: 15px;
    }
    .list-item-title {
        margin-right: 30px;
    }
    .page-link span {
        margin-right: 20px;
    }
    .page-link::after {
        display: none;
    }
}

@media only screen and (max-width: 358px) {
    .fixed-toolbar {
        display: none;
    }  
    .static-stm-diagram {
        font-size: 16px;
    }
    .publication-text {
        width: 162px;
    }
    .list-item-stage {
        display: none; 
    } 
    .key-criteria-popup {
        padding: 10px;
    } 
}

@media print {
    body:not(.printable) {
        display: none;
    }
    body {
        background-color: #FFF;
        margin: 2rem;
    }
    .screen-only {
        display: none;
    }
    .print-only {
        display: block;
    }
    .print-group {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
        -webkit-column-gap: 25px;
        -moz-column-gap: 25px;
        column-gap: 25px;
    }
    body.single-column-print .print-group {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
    .page-content {
        background-color: transparent;
        box-shadow: none;
    }
    .standard-content {
        position: relative;
        max-width: none;
    }
    .wide-content {
        position: relative;
        max-width: none;
    }
    .standard-content-block {
        padding: 10px 0px;
    }
    .standard-content-slot {
        padding: 0px 0px;
    }
    .standard-content-lead {
        padding: 10px 0px 0px 0px;
    }    
    .wide-content-block {
        padding: 10px 0px;
    }
    .standard-content h2,
    .wide-content h2,
    #key-criteria-block h3 {
        padding: 0;
        color: #000;
        font-family: "Arial", sans-serif; 
        font-weight: 700;
        font-size: 14px;
    }
    .standard-content h3,
    .wide-content h3,
    .standard-inline-header {
        color: #000;
        font-family: "Arial", sans-serif; 
        font-weight: 700;
        font-size: 12px;
    }
    .standard-content h4,
    .wide-content h4 {
        color: #000;
        font-family: "Arial", sans-serif; 
        font-weight: 700;
        font-size: 9px;
    }
    .standard-content p,
    .wide-content p {
        padding: 8px 0px;
        color: #000;
        font-family: "Arial", sans-serif; 
        font-weight: 300;
        font-size: 12px;
        line-height: 130%;
        text-align: justify;
    }
    body.single-column-print .standard-content p,
    body.single-column-print .wide-content p {
        text-align: left;
    }
    .standard-content a,
    .wide-content a,
    .standard-content a:visited,
    .wide-content a:visited {
        color: #000;
        font-family: "Arial", sans-serif; 
        font-weight: 300;
        font-size: 12px;
        text-decoration: none;
    }
    #fixed-toolbar {
        display: none;
    }
    #hero-image-container {
        display: none;
    }
    #briefcase-section {
        display: none;
    }
    #page-footer {
        display: none;
    }
    .section,
    .section-content,
    .section-content.active {
        display: block;
        min-height: 0;
        margin: 0;
        padding: 0;
    }
    .section.skipped,
    .section.screen-only {
        display: none;
    }
    #hero {
        background-color: transparent;
    }
    #page-title {
        width: 100%;
        margin-bottom: 20px;
        padding: 40px 0px 10px 0px;
        position: relative;
        background-color: transparent;
        background-image: none;
        border-bottom: 1px solid #000;
        text-align: center;
    }
    #page-title-notice {
        display: none;
    }
    #site-map {
        display: none;
    }
    #page-title h1 {
        padding: 0;
        color: #000;
        font-family: "Arial", sans-serif;
        font-size: 20px;
        line-height: 120%;
    }
    #page-title h3 {
        padding: 10px 0px;
        color: #000;
        font-family: "Arial", sans-serif;
        font-size: 12px;
    }
    #page-title h4 {
        color: #000;
        font-family: "Arial", sans-serif;
        font-size: 20px;
        font-weight: 700;
        text-transform: none;
        line-height: 120%;
    }   
    #measurement-unit-options {
        display: none;
    }
    #page-navigation-section {
        display: none;
    } 
    #hero-image-container {
        display: none;
    }
    .comment-container {
        display: none;
    }
    .custom-model-diagram-wrapper {
        margin: 8px 0px;
    }
    .custom-model-diagram {
        margin-bottom: 5px;
    }
    .characteristic-list {
        margin: 8px 0px 0px 14px;
    }
    .standard-list {
        margin: 8px 0px 0px 14px;
    }
    .standard-list li,
    .characteristic-list li {
        color: #000;
        font-family: "Arial", sans-serif;
        font-size: 12px;
        font-weight: 400;
        line-height: 130%;
    }
    .characteristic-list p {
        padding: 0;
    }
    .characteristic-list a,
    .characteristic-list a:visited {
        text-decoration: none;
    }
    .standard-table-block {
        padding: 10px 0px;
    }
    .feature-table {
        margin: 5px 0px;
        border-spacing: 0px;
        page-break-inside: auto;
        empty-cells: show;
    }
    body.single-column-print .feature-table {
        width: auto;
    }
    .feature-table tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }
    .feature-table th {
        padding: 4px;
        background-color: transparent;
        border-bottom: 1px solid #000;
        border-left: 1px solid #000;
        width: auto;
        height: 100%;
    }
    .feature-table td {
        vertical-align: top;
        padding: 4px;
        background-color: transparent;
        border-bottom: 1px solid #000;
        border-left: 1px solid #000;
        border-right: 1px solid #000;
    }
    .feature-table td.empty {
        border-left: none;
    }
    .feature-table tr td:first-child {
        border-right: none;        
    }
    .feature-table tr:first-child th,
    .feature-table tr:first-child td {
        border-top: 1px solid #000;        
    }
    .feature-table th,
    .feature-table span,
    .feature-table p,
    .feature-table a,
    .feature-table a.visited {
        color: #000;
        font-family: "Arial", sans-serif;
        font-size: 11px;
        font-weight: 400;
        line-height: 130%;
    }
    .feature-table p {
        padding: 0;
        text-align: initial;
    }
    .data-table {
        margin: 5px 0px;
        border-spacing: 0;
    }
    .data-table th {
        padding: 4px;
        background-color: transparent;
        border-bottom: 1px solid #000;
        border-right: 1px solid #000;
        color: #000;
        font-family: "Arial", sans-serif;
        font-weight: 700;
        font-size: 11px;
    }
    .data-table td {
        padding: 4px;
        background-color: transparent;
        border-bottom: 1px solid #000;
        border-right: 1px solid #000;
        color: #000;
        font-family: "Arial", sans-serif;
        font-size: 11px;
    }
    .data-table a {
        font-size: 1em;
    }
    .data-table tr:first-child th,
    .data-table tr:first-child td {
        border-top: 1px solid #000;        
    }
    .data-table th:first-child,
    .data-table td:first-child {
        border-left: 1px solid #000;        
    }
    .data-table-centered,
    .data-table-centered .data-table-title-row th,
    .data-table-title-row th.data-table-centered {
        text-align: right;
    }
    .data-table-title-row th {
        font-size: 9px;
    }
    .data-table-total-row td {
        font-weight: 700;
    }
    #key-criteria-block {
        display: block;
        margin: 0;
        padding: 0;
        background-color: transparent;
    }
    #key-criteria-block h3 {
        padding-bottom: 4px;
        border: none;
    }  
    #key-criteria-list li {
        margin: 4px 0px;
        color: #000;
        font-family: "Arial", sans-serif;
        font-size: 12px;
    }    
    #key-criteria-block  p {
        margin-top: 0;
    }
    #model-message {
        display: none;
    }
    .model-diagram-section {
        margin: 0;
        border: none;
    }
    #model-diagram {
        padding: 0;
    }
    #model-diagram-options {
       display: none;
    }
    .model-diagram {
        padding: 0;
    }
    .model-diagram.active {
        display: block;
    }
    .stm-subsection {
        padding: 10px 0px 0px 0px;
        border: none;
    }
    .static-stm-diagram-view {
        page-break-inside: avoid;
        display: inline-block;
        float: none;
        margin: 10px 30px 10px 0px;
    }
    .static-stm-diagram {
        page-break-inside: avoid;
        font-size: 15px;
    }
    .static-stm-diagram-full {
        margin: 0px 0px 10px 0px;
    }
    #static-stm-primary-diagram {
        margin: 0;
    } 
    .static-stm-diagram-title {    
        padding: 0px 0px 6px 0px;
        color: #000;
        font-family: "Arial", sans-serif;
        font-size: 10px;
        font-weight: 700;
        text-transform: none;
    }
    .static-stm-state {  
        border: 2px solid #000;
    }
    .static-stm-state-contents {
        padding: 5px;
        overflow: hidden;
    }
    a.static-stm-state-label,
    a.static-stm-state-label:visited {
        color: #000;
        font-family: "Arial", sans-serif;
        font-size: 10px;
    }    
    .static-stm-state-risk-box {
        
        color: #000;
        font-family: "Arial", sans-serif;
        font-size: 10px;
    }
    .static-stm-transition-label {
        color: #000;
        font-family: "Arial", sans-serif;
        font-size: 7px; 
    }
    .stm-legend-title {
        padding: 0;
        color: #000;
        font-family: "Arial", Arial, sans-serif;
        font-weight: 700;
        font-size: 13px;
        text-transform: none;
    }
    .stm-legend {
        max-width: 100%;
        margin: 0px 0px 20px 0px;
        padding: 0;
        background-color: transparent;
    }
    .stm-legend-header,
    .stm-legend-item,
    .stm-legend-sep {       
        vertical-align: text-top;
        color: #000;
        font-family: "Arial", sans-serif;
        font-size: 11px;
    }
    .stm-legend-header {
        padding: 2px 0px;
    }
    .stm-legend-item {
        padding: 2px 0px;
        font-weight: 400;
    }
    .stm-legend-sep {
        padding: 2px 2px;
        font-weight: 400;  
    }
    .static-key-lead {
        line-height: 130%;
    }
    .static-key-lead span {
        color: #000;
        font-family: "Arial", sans-serif; 
        font-weight: 300;
        font-size: 12px;
        line-height: 130%;
    }
    .static-key-lead-target p,
    .static-key-lead-target a,
    .static-key-lead-target a:visited {
        line-height: 130%;
    }
    .stm-interpretation-table {
        margin: 10px 0px 20px 0px;
    }
    .stm-interpretation-table-header td {
        background-color: transparent; 
        vertical-align: bottom;
    }
    .stm-interpretation-table-header h3 {
        padding: 4px 0px 0px 5px;
        color: #000;
        font-family: Arial, sans-serif;
    }
    .stm-interpretation-table-header h4 {
        padding: 4px 5px;
        color: #000;
        font-family: Arial, sans-serif;
        opacity: 1.0;
    }
    .stm-interpretation-criteria p {
        text-align: initial;
    }
    #model-keys {
        margin-bottom: 20px;
    }
    .model-key-title {
        padding: 0px 0px 8px 0px;
        color: #000;
        font-family: "Arial", Arial, sans-serif;
        font-weight: 700;
        font-size: 13px;
        text-transform: none;
    }
    .stm-element-image-container {
        float: none;
        max-width: 400px;
        margin: 6px 0px 10px 0px;
        page-break-inside: avoid;
    }
    p.stm-diagram-caption {
        position: relative;
        margin: 5px 0px 0px 0px;
        padding: 0;
        opacity: 1;
        background-color: transparent;
        color: #000;
        font-family: "Arial", sans-serif; 
        font-weight: 700;
        font-size: 9px;
    }
    .transition-graphic-container {
        max-width: 300px;
        margin-top: 8px;
    }
    .transition-graphic-wrapper {
        margin-bottom: 6px;
    }
    .transition-img-frame,
    .transition-img { 
        height: 80px;
    }
    .transition-img-label {
        margin: 5px 0px 0px 0px;
        padding: 0;
        color: #000;
        font-family: "Arial", sans-serif;
        font-weight: 700;
        font-size: 9px;
    }
    .transition-graphic-vector-container {
        height: 80px;
    }
    .content-page-link {
        display: none;
    }
    .citation {
        min-height: auto;
        margin-bottom: 0;    
        padding: 6px 0px;
    }    
    .print-citation {
        margin-bottom: 0;
        text-indent: -16px;
        padding-left: 16px;
    }
    .print-citation p {
        color: #000;
        font-family: "Arial", sans-serif;
        font-size: 12px;
        line-height: 130%;
    }
    .print-citation a,
    .print-citation a.visited {
        color: #000;
        font-size: 12px;
    }
    .key-content {
        padding: 0;
        font-size: 13px;
        display: block;
    }
    .key-section-header {
        margin: 20px 0px 10px 0px;
        padding: 0px 0px 10px 0px;
        border-bottom: 1px solid #000;
        font-size: 14px;
    }
    .key-section-header span {
        margin: 0;
        font-size: 14px;
    }
    .key-section-header::before,
    .key-section-header::after,
    .key-download-link {
        display: none;
    }
    #print-option-section {
        display: none;
    }
    body.times .standard-content h2,
    body.times .wide-content h2,
    body.times #key-criteria-block h3 {
        font-family: "Times New Roman", serif;
        font-size: 15px;
    }
    body.times .standard-content h3,
    body.times .wide-content h3,
    body.times .standard-inline-header {
        font-family: "Times New Roman", serif;
        font-size: 13px;
    }
    body.times .standard-content h4,
    body.times .wide-content h4 {
        font-family: "Times New Roman", serif;
        font-size: 10px;
    }
    body.times .standard-content p,
    body.times .wide-content p,
    body.times .standard-content a,
    body.times .wide-content a,
    body.times #key-criteria-list li,
    body.times .static-key-lead span {
        font-family: "Times New Roman", serif;
        font-size: 13px;
    }
    body.times .stm-element-subsection-title {
        font-family: "Times New Roman", serif;
        font-size: 14px;
    }
    body.times .stm-legend-header,
    body.times .stm-legend-item,
    body.times .stm-legend-sep { 
        font-family: "Times New Roman", serif;
        font-size: 12px;
    }
    body.times .print-citation p {
        font-family: "Times New Roman", serif;
        font-size: 13px;
    }
    body.times .print-citation a,
    body.times .print-citation a.visited {
        font-family: "Times New Roman", serif;
        font-size: 13px;
    }    
    body.times .key-section-header span {
        font-size: 15px;
    }
    body.print-down-1 .standard-content h2,
    body.print-down-1 .wide-content h2,
    body.print-down-1 #key-criteria-block h3,
    body.print-down-1 .key-section-header span {
        font-size: 13px;
    }
    body.print-down-1 .standard-content h3,
    body.print-down-1 .wide-content h3,
    body.print-down-1 .standard-inline-header {
        font-size: 11px;
    }
    body.print-down-1 .standard-content h4,
    body.print-down-1 .wide-content h4 {
        font-size: 8px;
    }
    body.print-up-1 .standard-content h2,
    body.print-up-1 .wide-content h2,
    body.print-up-1 #key-criteria-block h3,
    body.print-up-1 .key-section-header span {
        font-size: 15px;
    }
    body.print-up-1 .standard-content h3,
    body.print-up-1 .wide-content h3,
    body.print-up-1 .standard-inline-header {
        font-size: 13px;
    }
    body.print-up-1 .standard-content h4,
    body.print-up-1 .wide-content h4 {
        font-size: 10px;
    }
    body.print-up-2 .standard-content h2,
    body.print-up-2 .wide-content h2,
    body.print-up-2 #key-criteria-block h3,
    body.print-up-2 .key-section-header span {
        font-size: 16px;
    }
    body.print-up-2 .standard-content h3,
    body.print-up-2 .wide-content h3,
    body.print-up-2 .standard-inline-header {
        font-size: 14px;
    }
    body.print-up-2 .standard-content h4,
    body.print-up-2 .wide-content h4 {
        font-size: 11px;
    }
    body.print-up-3 .standard-content h2,
    body.print-up-3 .wide-content h2,
    body.print-up-3 #key-criteria-block h3,
    body.print-up-3 .key-section-header span {
        font-size: 17px;
    }
    body.print-up-3 .standard-content h3,
    body.print-up-3 .wide-content h3,
    body.print-up-3 .standard-inline-header {
        font-size: 15px;
    }
    body.print-up-3 .standard-content h4,
    body.print-up-3 .wide-content h4 {
        font-size: 12px;
    }
    body.print-down-1 .standard-content p,
    body.print-down-1 .wide-content p,
    body.print-down-1 .standard-content a,
    body.print-down-1 .wide-content a,
    body.print-down-1 #key-criteria-list li,
    body.print-down-1 .standard-list li,
    body.print-down-1 .characteristic-list li,
    body.print-down-1 .static-key-lead span {
        font-size: 11px;
    }
    body.print-up-1 .standard-content p,
    body.print-up-1 .wide-content p,
    body.print-up-1 .standard-content a,
    body.print-up-1 .wide-content a,
    body.print-up-1 #key-criteria-list li,
    body.print-up-1 .standard-list li,
    body.print-up-1 .characteristic-list li,
    body.print-up-1 .static-key-lead span {
        font-size: 13px;
    }
    body.print-up-2 .standard-content p,
    body.print-up-2 .wide-content p,
    body.print-up-2 .standard-content a,
    body.print-up-2 .wide-content a,
    body.print-up-2 #key-criteria-list li,
    body.print-up-2 .standard-list li,
    body.print-up-2 .characteristic-list li,
    body.print-up-2 .static-key-lead span {
        font-size: 14px;
    }   
    body.print-up-3 .standard-content p,
    body.print-up-3 .wide-content p,
    body.print-up-3 .standard-content a,
    body.print-up-3 .wide-content a,
    body.print-up-3 #key-criteria-list li,
    body.print-up-3 .standard-list li,
    body.print-up-3 .characteristic-list li,
    body.print-up-3 .static-key-lead span {
        font-size: 15px;
    } 
    body.print-down-1 .feature-table th,
    body.print-down-1 .feature-table p,
    body.print-down-1 .feature-table span,
    body.print-down-1 .feature-table a {
        font-size: 10px;
    }    
    body.print-up-1 .feature-table th,
    body.print-up-1 .feature-table p,
    body.print-up-1 .feature-table span,
    body.print-up-1 .feature-table a {
        font-size: 12px;
    }    
    body.print-up-2 .feature-table th,
    body.print-up-2 .feature-table p,
    body.print-up-2 .feature-table span,
    body.print-up-2 .feature-table a {
        font-size: 13px;
    }    
    body.print-up-3 .feature-table th,
    body.print-up-3 .feature-table p,
    body.print-up-3 .feature-table span,
    body.print-up-3 .feature-table a {
        font-size: 14px;
    }
    body.print-down-1 .data-table th,
    body.print-down-1 .data-table td,
    body.print-down-1 .data-table a {
        font-size: 10px;
    }    
    body.print-up-1 .data-table th,
    body.print-up-1 .data-table td,
    body.print-up-1 .data-table a {
        font-size: 12px;
    }    
    body.print-up-2 .data-table th,
    body.print-up-2 .data-table td,
    body.print-up-2 .data-table a {
        font-size: 13px;
    }
    body.print-down-1 .data-table-title-row th {
        font-size: 8px;
    }
    body.print-up-1 .data-table-title-row th {
        font-size: 10px;
    }
    body.print-up-2 .data-table-title-row th {
        font-size: 11px;
    }
    body.print-down-1 p.stm-diagram-caption {
        font-size: 8px;
    }
    body.print-up-1 p.stm-diagram-caption {
        font-size: 10px;
    }
    body.print-up-2 p.stm-diagram-caption {
        font-size: 11px;
    }
    body.print-up-3 p.stm-diagram-caption {
        font-size: 12px;
    }

    body.times.print-down-1 .standard-content h2,
    body.times.print-down-1 .wide-content h2,
    body.times.print-down-1 #key-criteria-block h3,
    body.times.print-down-1 .key-section-header span {
        font-size: 14px;
    }
    body.times.print-down-1 .standard-content h3,
    body.times.print-down-1 .wide-content h3,
    body.times.print-down-1 .standard-inline-header {
        font-size: 12px;
    }
    body.times.print-down-1 .standard-content h4,
    body.times.print-down-1 .wide-content h4 {
        font-size: 9px;
    }
    body.times.print-up-1 .standard-content h2,
    body.times.print-up-1 .wide-content h2,
    body.times.print-up-1 #key-criteria-block h3,
    body.times.print-up-1 .key-section-header span {
        font-size: 16px;
    }
    body.times.print-up-1 .standard-content h3,
    body.times.print-up-1 .wide-content h3,
    body.times.print-up-1 .standard-inline-header {
        font-size: 14px;
    }
    body.times.print-up-1 .standard-content h4,
    body.times.print-up-1 .wide-content h4 {
        font-size: 11px;
    }
    body.times.print-up-2 .standard-content h2,
    body.times.print-up-2 .wide-content h2,
    body.times.print-up-2 #key-criteria-block h3,
    body.times.print-up-2 .key-section-header span {
        font-size: 17px;
    }
    body.times.print-up-2 .standard-content h3,
    body.times.print-up-2 .wide-content h3,
    body.times.print-up-2 .standard-inline-header {
        font-size: 15px;
    }
    body.times.print-up-2 .standard-content h4,
    body.times.print-up-2 .wide-content h4 {
        font-size: 12px;
    }
    body.times.print-up-3 .standard-content h2,
    body.times.print-up-3 .wide-content h2,
    body.times.print-up-3 #key-criteria-block h3,
    body.times.print-up-3 .key-section-header span {
        font-size: 18px;
    }
    body.times.print-up-3 .standard-content h3,
    body.times.print-up-3 .wide-content h3,
    body.times.print-up-3 .standard-inline-header {
        font-size: 16px;
    }
    body.times.print-up-3 .standard-content h4,
    body.times.print-up-3 .wide-content h4 {
        font-size: 13px;
    }
    body.times.print-down-1 .standard-content p,
    body.times.print-down-1 .wide-content p,
    body.times.print-down-1 .standard-content a,
    body.times.print-down-1 .wide-content a,
    body.times.print-down-1 #key-criteria-list li,
    body.times.print-down-1 .standard-list li,
    body.times.print-down-1 .characteristic-list li,
    body.times.print-down-1 .static-key-lead span {
        font-size: 12px;
    }
    body.times.print-up-1 .standard-content p,
    body.times.print-up-1 .wide-content p,
    body.times.print-up-1 .standard-content a,
    body.times.print-up-1 .wide-content a,
    body.times.print-up-1 #key-criteria-list li,
    body.times.print-up-1 .standard-list li,
    body.times.print-up-1 .characteristic-list li ,
    body.times.print-up-1 .static-key-lead span{
        font-size: 14px;
    }
    body.times.print-up-2 .standard-content p,
    body.times.print-up-2 .wide-content p,
    body.times.print-up-2 .standard-content a,
    body.times.print-up-2 .wide-content a,
    body.times.print-up-2 #key-criteria-list li,
    body.times.print-up-12.standard-list li,
    body.times.print-up-2 .characteristic-list li,
    body.times.print-up-2 .static-key-lead span {
        font-size: 15px;
    }
    body.times.print-up-3 .standard-content p,
    body.times.print-up-3 .wide-content p,
    body.times.print-up-3 .standard-content a,
    body.times.print-up-3 .wide-content a,
    body.times.print-up-3 #key-criteria-list li,
    body.times.print-up-3 .standard-list li,
    body.times.print-up-3 .characteristic-list li,
    body.times.print-up-3 .static-key-lead span {
        font-size: 16px;
    }
    body.times.print-down-1 .feature-table th,
    body.times.print-down-1 .feature-table p,
    body.times.print-down-1 .feature-table span,
    body.times.print-down-1 .feature-table a {
        font-family: "Arial", sans-serif;
        font-size: 10px;
    }    
    body.times.print-up-1 .feature-table th,
    body.times.print-up-1 .feature-table p,
    body.times.print-up-1 .feature-table span,
    body.times.print-up-1 .feature-table a {
        font-family: "Arial", sans-serif;
        font-size: 12px;
    }    
    body.times.print-up-2 .feature-table th,
    body.times.print-up-2 .feature-table p,
    body.times.print-up-2 .feature-table span,
    body.times.print-up-2 .feature-table a {
        font-family: "Arial", sans-serif;
        font-size: 13px;
    }    
    body.times.print-up-3 .feature-table th,
    body.times.print-up-3 .feature-table p,
    body.times.print-up-3 .feature-table span,
    body.times.print-up-3 .feature-table a {
        font-family: "Arial", sans-serif;
        font-size: 14px;
    }
    body.print-down-1 a.static-stm-state-label,
    body.print-up-1 a.static-stm-state-label,
    body.print-up-2 a.static-stm-state-label,
    body.print-up-3 a.static-stm-state-label,
    body.times a.static-stm-state-label,
    body.times.print-down-1 a.static-stm-state-label,
    body.times.print-up-1 a.static-stm-state-label,
    body.times.print-up-2 a.static-stm-state-label,
    body.times.print-up-3 a.static-stm-state-label {
        font-family: "Arial", sans-serif;
        font-size: 10px;
    }
    body.print-down-1 .static-stm-state-risk-box,
    body.print-up-1 .static-stm-state-risk-box,
    body.print-up-2 .static-stm-state-risk-box,
    body.print-up-3 .static-stm-state-risk-box,
    body.times .static-stm-state-risk-box,
    body.times.print-down-1 .static-stm-state-risk-box,
    body.times.print-up-1 .static-stm-state-risk-box,
    body.times.print-up-2 .static-stm-state-risk-box,
    body.times.print-up-3 .static-stm-state-risk-box {
        font-family: "Arial", sans-serif;
        font-size: 10px;
    }
    body.times p.stm-diagram-caption {
        font-size: 10px;
    }
    body.times.print-down-1 p.stm-diagram-caption {
        font-size: 9px;
    }
    body.times.print-up-1 p.stm-diagram-caption {
        font-size: 11px;
    }
    body.times.print-up-2 p.stm-diagram-caption {
        font-size: 12px;
    }
    body.times.print-up-3 p.stm-diagram-caption {
        font-size: 13px;
    }
    .print-hidden {
        display: none;
    }
}

.title-tertiary {
    font-size: 24px;
}