:root {
	--pa-blue: #156bb1;
	--pa-dark-blue: #0a3558;
	--pa-green: #9cc83d;
	--pa-dark-green: #6f8e2b;
}

/* Custom CSS to override Bootstrap defaults */
html { scroll-behavior: smooth; height: 100%; } /* Prevents having to use JS to enable smooth scrolling anchors */
body { font-family: 'Roboto', sans-serif; }
h1, h2, h3, h4, h5 { font-family: 'Roboto', sans-serif; font-weight: 700; color: var(--pa-blue); }
.btn-primary, .btn-primary:visited { background-color: var(--pa-blue) !important; border-color: var(--pa-dark-blue); }

.logo { max-height: 50px; }
.logo-sm { height: 30px; width: auto; }

/* General classes and styles */
.hidden { display: none; }
.monospace { font-family: monospace; }
.nowrap { white-space: nowrap; }
.small-fonts { font-size: 12px; }
.required::after { content: " *"; color: red; }
.spacer { height: 25px; }
.spacer-lg { height: 50px; }
.video-fluid { width: 100%; height: auto; }
.width-50 { width: 50%; }
.font-75 { font-size: 0.75rem; }

/* Nav overrides -- Don't forget about media queries as well (near bottom) */
#nav-global { box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.15); }
#nav_global_responsive a { color: #ffffff; }
#nav_global_responsive .dropdown-menu a { color: #212529; }
.phonebar a { color: #ffffff; text-decoration: none; }

/* Hero Sections */
.hero {
    display: grid;
    place-items: center;
    /*background-image: url("../somepath/someimage.jpg"); // Paths will come from the CMS inline */
    min-height: 350px;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center;
    background-size: cover;
    text-align: center;
}
.hero h1 { font-size: 5vw; color: #ffffff; }
.hero h2, .hero h3 { color: #ffffff; }
.text-shadow h1, .text-shadow h2, .text-shadow h3, .text-shadow h4, .text-shadow h5, .text-shadow h6 { text-shadow: 2px 2px 2px #000000; }
.text-white a, .text-white a:visited, .text-white a:active, .text-white a:hover, .text-white a:link { text-decoration: none; color: #ffffff; }

/* Custom colors and classes */
.bg-blue { background-color: var(--pa-blue); color: #ffffff; }
.icon { font-size: 1.2em; margin: 0 3px; }
.icon-xxl { font-size: 100px; }
.icon-product-option { max-width: 125px; height: auto; }
.bg-caption { background-color: var(--pa-blue); }
.bg-caption h1, .bg-caption h2, .bg-caption h3, .bg-caption h4, .bg-caption h5, .bg-caption h6 { color: #ffffff; }

/* Colorboxes */
.colorbox { padding: 40px 10px 10px 10px; min-height: 200px; text-align: center; margin-bottom: 5px; position: relative; color: #ffffff; }
.colorbox h1, .colorbox h2, .colorbox h3, .colorbox h4, .colorbox h5 { color: #ffffff; }
.colorbox a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.box-blue { background-color: var(--pa-blue); transition: background-color 0.5s ease; }
.box-blue:hover { background-color: var(--pa-dark-blue); }
.box-green { background-color: var(--pa-green); transition: background-color 0.5s ease; }
.box-green:hover { background-color: var(--pa-dark-green); }

/* Color Swatches (Available Colors) */
.color-swatch { width: 125px; height: auto; }

/* Fleck (homepage character) Anchor */
.fleck-anchor { position: fixed; bottom: 10px; left: 20px; z-index: 9999; }
.fleck-anchor img { width: 175px; height: auto; transition: transform 0.2s; }
.fleck-anchor img:hover { transform: scale(1.1); }
.btn-fleck { background: #6a6a6a; color: #ffffff; }

/* System Layouts */
.product-option { display: inline-block; margin: 5px; }
.product-option img { width: 125px; height: auto; }
.product-option:hover { filter: brightness(40%); }
.table-align-top tr td * { vertical-align: top; }

/* Application Icons */
.app-icon { margin: 5px; width: 125px; font-size: 0.75rem; }
.app-icon img { width: 85px; height: auto; }
.app-icon:hover { filter: brightness(40%); }

/* Overlay "Hover" Boxes */
.hoverbox { position: relative; margin: auto; overflow: hidden; }
.hoverbox .hoverbox-overlay { background: rgba(255,255,255,0.7); position: absolute; height: 100%; width: 100%; left: 0; top: 0; bottom: 0; right: 0; opacity: 0; -webkit-transition: all 0.4s ease-in-out 0s; -moz-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; }
.hoverbox:hover .hoverbox-overlay { opacity: 1; }
.hoverbox-image { width: 100%; }
.hoverbox-details { position: absolute; text-align: center; padding-left: 1em; padding-right: 1em; width: 100%; top: 50%; left: 50%; opacity: 0; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; }
.hoverbox:hover .hoverbox-details { top: 50%; left: 50%; opacity: 1; }
.hoverbox-details p { color: #000000; font-size: 1.75rem; font-family: 'Square Peg', sans-serif; }
.hoverbox-fadeIn-bottom { top: 80%; }

/* Same height boxes */
.full-height {margin-bottom: 15px; }
.full-height-card { margin: 10px 0; }
.full-height-card .card_body { height: 70px; max-height: 72px; display: table-cell; vertical-align: middle; }

/* Sales Rep Map */
#us-map{ display: block; width: 100%; height: 100%; }
#us-map path:hover, #us-map circle:hover { stroke: #1c1b22 !important; stroke-width:2px; stroke-linejoin: round; fill: #494949 !important; cursor: pointer; }
#path67 { fill: none !important; stroke: #a9a9a9 !important; cursor: default; }
#info-box { display: none; position: absolute; top: 0px; left: 0px; z-index: 1; background-color: #ffffff; border: 2px solid #1c1b22; border-radius: 5px; padding: 5px; }

/* System Components */
#svg_sc { display: block; height: 100%; width: 100%; background-image: url('../img/system_components.png'); background-size: cover;  }
#svg_sc path { fill: rgba(255, 255, 255, 0); }
#svg_sc path:hover { fill: rgba(255,255,255,0.6); stroke: var(--pa-blue); stroke-width: 1px; animation: pulse 1s infinite !important }
.animated { animation: pulse 1s infinite; }
@keyframes pulse {
    0% { fill: rgba(255, 255, 255, 0); stroke: var(--pa-blue); stroke-width: 1px; }
    50% { fill: rgba(255, 255, 255, 0.7); stroke: var(--pa-blue); stroke-width: 2px; }
    100% { fill: rgba(255, 255, 255, 0); stroke: var(--pa-blue); stroke-width: 1px; }
}
/* Snugs up layout */
.content_system_components { border:1px dashed var(--pa-blue); margin-bottom:5px; padding:5px 10px 5px 10px; cursor:pointer }
.content_system_components h5 { font-size: 1rem; margin: 0;}
.content_system_components p { font-size: 0.8rem; margin: 0;}

/* Amrize Footer */
@font-face { font-family: 'Univers LT'; src: url('/vendor/webfonts/univers/univers_lt_std_bold.woff') format('woff'); font-weight: normal; font-style: normal; }
#footer-amrize { margin-top: 30px; padding-top: 30px; background: #fff; color: #011e6a; font-family: 'Univers LT', Helvetica, Arial, sans-serif; }

/* Footer */
footer { padding-top: 25px; font-size: 0.8rem; }

/* Media Queries */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

@media (max-width: 576px) {
    .dropdown-item { font-size: 0.75em; }
    /* Fleck (homepage character) Anchor */
    .fleck-anchor img { width: 125px; height: auto; }
}

@media (max-width: 768px) {
    /* Overlay Boxes */
    .wg-box { position: relative; margin: auto; overflow: hidden; }
    .wg-box .wg-box-overlay { background: rgba(0,0,0,0.7); position: absolute; height: 100%; width: 100%; left: 0; top: 0; bottom: 0; right: 0; opacity: 1; -webkit-transition: none; -moz-transition: none; transition: none; }
    .wg-box:hover .wg-box-overlay { opacity: 1; }
    .wg-box-image { width: 100%; }
    .wg-box-details { position: absolute; text-align: center; padding-left: 1em; padding-right: 1em; width: 100%; top: 50%; left: 0%; opacity: 1; -webkit-transform: none; -moz-transform: none; transform: none; -webkit-transition: none; -moz-transition: none; transition: none; }
    .wg-box:hover .wg-box-details { top: 50%; left: 0%; opacity: 1; }
    .wg-box-details h3 { color: #fff; font-weight: 500; letter-spacing: 0.15em; margin-bottom: 0.5em; text-transform: uppercase; font-size: 1em; }
    .wg-box-details p { color: #fff; font-size: 0.8em; }
    .wg-box-fadeIn-bottom { top: 50%; }
}

@media (max-width: 992px) {
	#nav_global_responsive .dropdown-menu { background-color: inherit; border: none; }
	#nav_global_responsive .dropdown-menu a { color: #ffffff; }
	#nav_global_responsive .dropdown-item:hover { background-color: var(--pa-blue); }
}

/*==========  Print-Specific  ==========*/
@media print {
    .no-print, .no-print * { display: none !important; }
}