/*
* HTML5 Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*
* Detailed information about this CSS: h5bp.com/css
*
* ==|== normalize ==========================================================
*/
/* =============================================================================
Custom Variables
========================================================================== */
:root {
/** Primary Colors **/
--color-primary: #73000a;
--color-secondary: #000;
--color-tertiary: #FFF;
/** BG Colors **/
--color-dark-garnet: #570008;
--color-azalea: #844247;
--color-rose: #CC2E40;
--color-atlantic: #466A9F;
--color-congaree: #1F414D;
--color-horseshoe: #65780B;
--color-grass: #CED318;
--color-honeycomb: #a49137;
--color-warm-gray: #676156;
--color-sandstorm: #FFF2E3;
--color-light-gray: #ececec;
--color-dark-gray: #5C5C5C;
--color-silver: #c7c7c7;
--color-mineshaft: #363636;
/** Shadows **/
--inset-box-shadow: inset 0 0 30px rgb(0 0 0 / 60%);
--headline-text-shadow: 5px 5px 20px rgb(0 0 0 / 100%);
/** Hover states **/
--scale-up-photo: scale3d(1.05, 1.05, 1);
/** Fonts **/
--primary-font: 'Berlingske Sans', 'Arial', sans-serif;
--primary-font-condensed: 'Berlingske Sans Extracondensed', 'Impact', sans-serif;
--primary-font-serif: 'Berlingske Serif', 'Georgia', serif;
}
/* =============================================================================
HTML5 display definitions
========================================================================== */
article, aside, details, figcaption, figure, footer, header, .hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
/* =============================================================================
Base
========================================================================== */
/*
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
*/
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; }
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate
* Also: hot pink! (or customize the background color to match your design)
*/
/* =============================================================================
Links
========================================================================== */
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }
/* =============================================================================
Typography
========================================================================== */
/*
* Addresses font sizes and margins set differently in IE6/7
* Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
h2 {
font-size: 1.5em;
margin: 0.83em 0;
}
h3 {
font-size: 1.3em;
margin: 1em 0;
}
h4 {
font-size: 1.17em;
margin: 1.33em 0;
}
h5 {
font-size: 1em;
margin: 1.67em 0;
}
h6 {
font-size: 0.87em;
margin: 2.33em 0;
}
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
iframe { width: 100%; }
dfn { font-style: italic; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 75%; }
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* =============================================================================
Lists
========================================================================== */
ul, ol { margin: .5em 0 1em; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
/* =============================================================================
Embedded content
========================================================================== */
/*
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
*/
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
/*
* Correct overflow not hidden in IE9
*/
svg:not(:root) { overflow: hidden; }
/* =============================================================================
Figures
========================================================================== */
figure { margin: 0; }
/* =============================================================================
Forms
========================================================================== */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }
/*
* 1. Correct color not inheriting in IE6/7/8/9
* 2. Correct alignment displayed oddly in IE6/7
*/
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
/*
* 1. Correct font-size not inheriting in all browsers
* 2. Remove margins in FF3/4 S5 Chrome
* 3. Define consistent vertical alignment display in all browsers
*/
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
input:focus,
button:focus { outline: thin dotted; outline: -webkit-focus-ring-color auto 5px; }
/*
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
*/
button, input { line-height: normal; }
/*
* 1. Display hand cursor for clickable form elements
* 2. Allow styling of clickable form elements in iOS
* 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
*/
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
/*
* Re-set default cursor for disabled elements
*/
button[disabled], input[disabled] { cursor: default; }
/*
* Consistent box sizing and appearance
*/
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
/* Add placeholder text styles */
::-webkit-input-placeholder { color: #A2A2A2; }
:-moz-placeholder { /* Firefox 18- */color: #A2A2A2; }
::-moz-placeholder { /* Firefox 19+ */color: #A2A2A2; }
:-ms-input-placeholder { color: #A2A2A2; }
/*
* Remove inner padding and border in FF3/4: h5bp.com/l
*/
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
/*
* 1. Remove default vertical scrollbar in IE6/7/8/9
* 2. Allow only vertical resizing
*/
textarea { overflow: auto; vertical-align: top; resize: vertical; }
/* Formstack */
.fsform-container .bHnpuH {
color: #A94342;
}
/* =============================================================================
Tables
========================================================================== */
table { border-collapse: collapse; border-spacing: 0; margin: 1em 0; }
td { vertical-align: top; }
/*
* Amazium V1.0.0
* Copyright 2011, Mike Ballan
* www.amazium.co.uk
*/
/* Standard 1140px ----------- */
.grid_1 { width:65px; }
.grid_2 { width:160px; }
.grid_3 { width:255px; }
.grid_4 { width:350px; }
.grid_5 { width:445px; }
.grid_6 { width:540px; }
.grid_7 { width:635px; }
.grid_8 { width:730px; }
.grid_9 { width:825px; }
.grid_10 { width:920px; }
.grid_11 { width:1015px; }
.grid_12 { width:1110px; }
.column { margin:0 15px 0 15px; float:left; display:inline; }
.row {
margin:0 auto;
width:1170px;
}
.row .row {
margin:0 -15px 0 -15px;
width:auto;
display:inline-block;
}
.wrapper {
position: relative;
padding-left: 15px;
padding-right: 15px;
float: left;
}
/***** Smaller than 1139px *****/
@media only screen and (min-width: 960px) and (max-width: 1139px) {
.grid_1 { width:50px; }
.grid_2 { width:130px; }
.grid_3 { width:210px; }
.grid_4 { width:290px; }
.grid_5 { width:370px; }
.grid_6 { width:450px; }
.grid_7 { width:530px; }
.grid_8 { width:610px; }
.grid_9 { width:690px; }
.grid_10 { width:770px; }
.grid_11 { width:850px; }
.grid_12 { width:930px; }
.column { margin:0 15px 0 15px; float:left; display:inline; }
.row { margin:0 auto; width:990px;}
.row .row {
margin:0 -15px 0 -15px;
width:auto;
display:inline-block;
}
}
/***** iPad Smaller than 959px *****/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.grid_1 { width:24px; }
.grid_2 { width:92px; }
.grid_3 { width:172px; }
.grid_4 { width:216px; }
.grid_5 { width:280px; }
.grid_6 { width:344px; }
.grid_7 { width:408px; }
.grid_8 { width:470px; }
.grid_9 { width:536px; }
.grid_10 { width:600px; }
.grid_11 { width:664px; }
.grid_12 { width:728px; }
.column { margin:0 10px 0 10px; float:left; display:inline; }
.row { margin:0 auto; width:768px; }
.row .row { margin:0 -10px 0 -10px; width:auto; display:inline-block; }
.wrapper {
padding-left: 10px;
padding-right: 10px;
}
}
/* iPhone (Portrait) ----------- */
@media only screen and (min-width: 200px) and (max-width: 480px) {
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
width:100%;
margin: 10px auto;
display: block;
float: none;
position: relative;
}
.column { margin:0px 0 0 0; float:left; display:inline; overflow:hidden; }
.row { width:100%; }
.row .row { margin:0; width:100%; display:inline-block; }
}
/* iPhone (Landscape) ----------- */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 { width:100%;
margin: 10px auto;
display: block;
float: none;
position: relative; }
.column { margin:0px 0 0 0; float:left; display:inline; overflow:hidden; }
.row { width:100%; }
.row .row { margin:0; width:100%; display:inline-block; }
}
/* Foundation Visibility HTML Classes */
.show-for-small,
.show-for-medium-down,
.show-for-large-down {
display: inherit !important; }
.show-for-medium,
.show-for-medium-up,
.show-for-large,
.show-for-large-up,
.show-for-xlarge {
display: none !important; }
.hide-for-small,
.hide-for-medium-down,
.hide-for-large-down {
display: none !important; }
@media only screen and (min-width: 768px) {
.show-for-medium,
.show-for-medium-up {
display: inherit !important; }
.show-for-small {
display: none !important; }
.hide-for-small {
display: inherit !important; }
.hide-for-medium,
.hide-for-medium-up {
display: none !important; }
/* Specific visilbity for tables */
table.show-for-medium, table.show-for-medium-up, table.hide-for-small {
display: table; }
thead.show-for-medium, thead.show-for-medium-up, thead.hide-for-small {
display: table-header-group !important; }
tbody.show-for-medium, tbody.show-for-medium-up, tbody.hide-for-small {
display: table-row-group !important; }
tr.show-for-medium, tr.show-for-medium-up, tr.hide-for-small {
display: table-row !important; }
td.show-for-medium, td.show-for-medium-up, td.hide-for-small,
th.show-for-medium,
th.show-for-medium-up,
th.hide-for-small {
display: table-cell !important; } }
/***** Basic Styles *****/
html { overflow:-moz-scrollbars-vertical; }
body { font-family: "Berlingske Sans", "Arial", sans-serif; font-weight: 500; }
/***** Blockquotes *****/
blockquote, blockquote p:first-child { font-size:18px; line-height:28px; }
blockquote p:first-child {
position: relative;
font-family: "Berlingske Serif", "Georgia", serif;
font-weight: 700;
color: #73000a;
}
blockquote { margin: 0 0 2.5em 0; padding: 5% 9% 3% 35px; position:relative; background-color:#ececec; z-index: 1; }
p + blockquote { margin-top: 2.5em; }
blockquote:before, blockquote:after {
display: block;
content: "\201C";
font-size: 195px;
font-family: "Berlingske Sans Extracondensed", "Impact", sans-serif;
font-weight: 800;
position: absolute;
top: 52px;
color: #FFF;
z-index: -1;
}
blockquote:before { left: 2%; }
blockquote:after { content: "\201D"; right: 15px; top:100%; }
blockquote .cite, blockquote+.cite, blockquote>p:first-child+p {
display: block;
font-size: 12px;
font-family: var(--primary-font);
color: inherit;
margin-bottom: 0;
}
blockquote .cite a,
blockquote .cite a:visited,
blockquote .cite a:visited { color:currentColor; }
/* blockquote span { width:15px; display:inline-block; } */
hr { margin:20px 0 20px 0; border:0; border-top:1px solid #C7C7C7; height:2px; width:100%; text-align:left; }
/***** Links *****/
a {
color: #73000a;
text-decoration: none;
}
a,
a > span,
.gs-title a {
-webkit-transition: background-color .3s, color .3s, -webkit-box-shadow 0s 0s;
transition: background-color .3s, color .3s, -webkit-box-shadow 0s 0s;
transition: background-color .3s, box-shadow 0s 0s, color .3s;
transition: background-color .3s, box-shadow 0s 0s, color .3s, -webkit-box-shadow 0s 0s;
-webkit-box-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent;
box-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent;
-webkit-box-decoration-break: clone;
box-decoration-break: clone; }
p a:not([id]),
td a:not([id]),
#mainContent ul a,
#mainContent ol a {
text-decoration: underline; }
a:hover,
a:focus,
nav a {
text-decoration: none !important; }
a:not([id]):hover > span,
a:not([id]):focus > span,
.gs-title a:hover {
color: #fff;
background-color: #CC2E40;
-webkit-box-shadow: 2px -2px 0 #CC2E40, -2px -2px 0 #CC2E40, -2px 1px 0 #CC2E40, 2px 1px 0 #CC2E40;
box-shadow: 2px -2px 0 #CC2E40, -2px -2px 0 #CC2E40, -2px 1px 0 #CC2E40, 2px 1px 0 #CC2E40;
-webkit-transition: background-color .3s, box-shadow .3s .01s, color .3s .01s;
transition: background-color .3s, box-shadow .3s .01s, color .3s .01s; }
a:focus,
button:focus {
outline: 3px auto rgba(142, 189, 254, 0.75);
outline: 5px auto -webkit-focus-ring-color;
}
/* For External links outside of the site and new window */
.new-window:not(.btn):after {
content: '';
background: url(../img/icons/external_link.png) no-repeat center right;
padding-right: 15px;
width: 11px;
height: 11px;
}
/***** Selection text color *****/
::selection {
color: #fff;
background: #466A9F; }
/***** Typography *****/
h1, h2, h3, h4, h5, h6 { font-weight: 800; color:#73000a; margin: 0px 0px 5px; }
p {
line-height:1.8em;
margin-top:0px; }
/***** Lists *****/
ol { list-style:decimal; }
ul.square, ul.circle, ul.disc { margin-left:15px; }
ul.square { list-style:square outside; }
ul.circle { list-style:circle outside; }
ul.disc { list-style:disc outside; }
ul.fancy li { padding:0 0 0 15px; background:transparent url('../images/bullet.png') no-repeat 0 3px; }
ul ul li, ul ol li, ol ol li, ol ul li { }
ul.large li { line-height:21px; }
li p { line-height:25px; }
dt { font-weight:bold; color:#73000a; }
/***** Tables *****/
table { width: 100%; }
table th { color: #FFF; background-color: #5B5B5B; text-align: left; }
table th, table td { padding:7px; border: 1px #c8c8c8 solid;}
caption { text-align:left; margin-bottom: 7px; }
/***** Responsive tables *****/
@media only screen and (max-width: 960px) {
/* Force regular tables to not be like tables anymore */
table.regular,
table.regular thead,
table.regular tbody,
table.regular th,
table.regular td,
table.regular tr {
display: block;
overflow: hidden;
}
/* Hide table headers (but not display: none;, for accessibility) */
table.regular thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
table.regular tr {
border: 1px solid #ccc;
}
table.regular td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #c8c8c8;
position: relative;
padding: 8px 6px 8px 50%;
word-break:break-all; word-break: break-word;
}
table.regular td:before {
float: left;
width: 100%;
margin-left: -100%;
box-sizing: border-box;
padding-right: 10px;
}
}
/***** Images *****/
img { border:0; }
.roundedCorners { border-radius: 0px 10px 0px 10px; }
.max-image { width:100%; height:auto; }
video { max-width: 100%;height: auto; }
.video-container { position:relative; margin:0 0 15px 0; padding-bottom:51%; padding-top:30px; height:0; overflow:hidden; border:1px solid #ccc; display:block; width:65%; }
.video-container iframe,
.video-container object,
.video-container embed { position:absolute; top:0; left:0; width:100%; height:100%; }
/***** Form *****/
label {
width: 100%;
display: inline-block;
text-align: left;
margin-bottom: .5em;
}
input[type="submit"],
input[type="search"],
input[type="reset"],
input[type="number"],
input[type="phone"],
input[type="time"],
input[type="tel"],
input[type="date"],
input[type="button"],
input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
width: 100%;
height: 35px;
border: 1px solid #C7C7C7;
max-width: 48em;
margin-bottom: 1em;
padding-left: 10px;
box-sizing: border-box;
border-radius: 0;
}
textarea { height: auto; }
input[type="submit"] {
width: auto;
background-color: #73000a;
color: #fff;
padding: 0 15px;
text-transform: uppercase;
border: none;
}
/* Form Validation */
input:required:focus:valid,
textarea:required:focus:valid {
border: 1px solid green;
-webkit-box-shadow: 0 0 10px 0 rgba(0,128,0,.3);
box-shadow: 0 0 10px 0 rgba(0,128,0,.3);
transition: .25s ease-in;
}
input:required:focus:invalid:focus
textarea:required:focus:invalid:focus {
border: 1px solid #E9322D;
-webkit-box-shadow: 0 0 10px 0 rgba(233,50,45,.3);
box-shadow: 0 0 10px 0 rgba(233,50,45,.3);
transition: .25s ease-in;
}
/* =============================================================================
Global Utility Classes
========================================================================== */
.bg-garnet {
background-color: var(--color-primary); }
.bg-black {
background-color: var(--color-secondary); }
.bg-white {
background-color: var(--color-tertiary); }
.bg-dark-garnet {
background-color: var(--color-dark-garnet); }
.bg-azalea {
background-color: var(--color-azalea); }
.bg-rose {
background-color: var(--color-rose); }
.bg-atlantic {
background-color: var(--color-atlantic); }
.bg-congaree {
background-color: var(--color-congaree); }
.bg-horseshoe {
background-color: var(--color-horseshoe); }
.bg-grass {
background-color: var(--color-grass); }
.bg-honeycomb {
background-color: var(--color-honeycomb); }
.bg-warm-gray {
background-color: var(--color-warm-gray); }
.bg-sandstorm {
background-color: var(--color-sandstorm); }
.bg-light-gray {
background-color: var(--color-light-gray); }
.bg-dark-gray {
background-color: var(--color-dark-gray); }
[class*="bg-"] .btn {
border-color: var(--color-tertiary); }
[class*=bg-]:is(:not(.bg-white, .bg-light-gray)) .new-window:after {
/* make it white */
-webkit-filter: brightness(0) saturate(100%) invert(93%) sepia(100%) saturate(0%) hue-rotate(351deg) brightness(101%) contrast(103%);
filter: brightness(0) saturate(100%) invert(93%) sepia(100%) saturate(0%) hue-rotate(351deg) brightness(101%) contrast(103%); }
.bg-garnet .btn,
.bg-rose .btn,
.bg-dark-garnet .btn {
background-color: var(--color-secondary); }
:is(.bg-garnet, .bg-black, .bg-congaree, .bg-dark-garnet, .bg-atlantic, .bg-horseshoe, .bg-honeycomb, .bg-warm-gray, .bg-rose, .bg-dark-gray, .bg-azalea) * {
color: var(--color-tertiary); }
.bg-light-gray blockquote,
.bg-white blockquote {
background-color: transparent;
color: var(--color-primary); }
.bg-light-gray blockquote:before,
.bg-light-gray blockquote:after {
color: var(--color-tertiary); }
.bg-white blockquote:before,
.bg-white blockquote:after {
color: var(--color-light-gray); }
.bg-garnet blockquote:before,
.bg-garnet blockquote:after,
.bg-atlantic blockquote:before,
.bg-atlantic blockquote:after,
.bg-azalea blockquote:before,
.bg-azalea blockquote:after,
.bg-dark-gray blockquote:before,
.bg-dark-gray blockquote:after,
.bg-grass blockquote:before,
.bg-grass blockquote:after,
.bg-honeycomb blockquote:before,
.bg-honeycomb blockquote:after,
.bg-horseshoe blockquote:before,
.bg-horseshoe blockquote:after,
.bg-sandstorm blockquote:before,
.bg-sandstorm blockquote:after,
.bg-rose blockquote:before,
.bg-rose blockquote:after,
.bg-warm-gray blockquote:before,
.bg-warm-gray blockquote:after {
color: rgba(0, 0, 0, 0.3); }
.bg-black blockquote:before,
.bg-black blockquote:after,
.bg-dark-garnet blockquote:before,
.bg-dark-garnet blockquote:after,
.bg-congaree blockquote:before,
.bg-congaree blockquote:after {
color: rgba(236, 236, 236, 0.3); }
.bg-black .btn,
.bg-dark-garnet .btn,
.bg-congaree .btn {
border-color: var(--color-tertiary); }
/*
* Spacing
*/
.margin-0 {
margin: 0 !important; }
.margin-x-0 {
margin-left: 0 !important;
margin-right: 0 !important; }
.margin-y-0 {
margin-top: 0 !important;
margin-bottom: 0 !important; }
.margin-top-0 {
margin-top: 0 !important; }
.margin-bottom-0 {
margin-bottom: 0 !important; }
/*
* Font Utility Classes
*/
[class*="font-"] {
--headline-base-size: var(--text-xl);
--headline-font-size: var(--headline-base-size, var(--text-md)); }
[class*="font-"].mod-blockquote {
font-size: calc(clamp(16px, (1rem + .4vw), 20px)); }
[class*="font-"].mod-blockquote blockquote,
[class*="font-"].mod-blockquote blockquote + .cite {
padding-left: 1rem;
padding-right: 0; }
[class*="font-"].mod-blockquote p:first-child {
color: inherit;
font-size: inherit;
font-family: inherit; }
[class*="font-"].mod-blurb {
font-size: 18px; }
[class*="font-"].mod-blockquote, [class*="font-"].mod-blurb {
font-weight: 700; }
[class*="font-"].mod-blockquote.mod-large, [class*="font-"].mod-blurb.mod-large {
font-size: calc(clamp(22px, (1rem + .7vw), 25px)); }
[class*="font-"].mod-small, [class*="font-"].mod-medium, [class*="font-"].mod-large {
font-size: calc(min(var(--min-font-size), var(--max-font-size))); }
[class*="font-"].mod-large {
--min-font-size: (1rem + 5vw);
--max-font-size: 50px; }
[class*="font-"].mod-shadow {
text-shadow: var(--headline-text-shadow);
color: var(--color-tertiary); }
.font-sans {
font-family: var(--primary-font); }
.font-bold {
font-weight: 800; }
.font-serif {
font-family: var(--primary-font-serif);
font-weight: 700; }
.font-condensed {
font-family: var(--primary-font-condensed);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px; }
/***** Buttons *****/
.btn.btn,
.download-btn.download-btn {
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
text-decoration: none !important;
padding: 7px 10px;
min-height: 28px;
line-height: 1.4;
background-color: var(--color-primary);
color: var(--color-tertiary);
border: 2px solid var(--color-primary);
border-radius: 3px;
transition: background-color .15s, box-shadow .15s;
-webkit-appearance: none;
}
.btn.btn:focus, .btn.btn:hover,
.download-btn.download-btn:hover, .download-btn.download-btn:focus {
color: #73000a;
background-color: var(--color-tertiary);
box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
}
.download-btn.new-window:after {
display: none;
}
.btn.btn:focus>span,.btn.btn:hover>span {
color: inherit;
background-color: transparent;
box-shadow: none;
transition: none
}
/***** Icon Sizing *****/
.icon {
display: inline-block;
color: currentColor;
fill: currentColor;
height: 1em;
width: 1em;
line-height: 1; }
/***** Carolina Alert *****/
.carolina-alert {
position: relative;
z-index: 99;
background-color: #D5AC00;
padding: 1em;
padding-left: 15px;
}
.all-clear { background-color: #47af15; }
.carolina-alert-desc,
.carolina-alert a { margin-top: 0; margin-bottom: 0; }
.carolina-alert a { font-weight: 800; text-decoration: underline; color: #00F; }
/***** Header *****/
html, body {
overflow-x: hidden;
margin-bottom: 0px;
}
#skiptocontent,
.skipto {
position:absolute;
top:-10000px;
padding:.5rem 1em;
background-color:#000;
color:#fff;
z-index:1000
}
#skiptocontent:focus,
.skipto:focus {position:fixed;top:25px;left:25px}
#logo {
float: left;
width: 100%;
padding-right: 10px;
}
#logo a {
width: 250px;
height: 53px;
display: inline-block;
background: url(../img/usc_logo_horizontal_rgb_g_rev.svg) no-repeat;
}
#logo a,
#logo-footer .logo,
.system-footer .logo {
text-indent: 1000%;
white-space: nowrap;
overflow: hidden;
}
/*
* Banner Toolbox - Search & Menu
*/
.search-btn-mobile,
.menu-btn-mobile, .menu-btn {
background: url(../img/search_menu.svg) no-repeat;
float: left;
background-color: #000;
width: 30px;
height: 30px;
padding: 5px;
box-sizing: content-box;
}
.search-btn-mobile { background-position:9px 9px; margin-right:10px; }
.menu-btn-mobile { position: relative; background-position:10px -30px; }
.menu-btn-mobile:before {
content: 'MENU';
position: absolute;
top: 5px;
left: 10px;
font-size: 7px;
color: #FFF;
text-indent: 0;
}
.mobile-logo {
background: url(../img/USC_Web_main.svg) no-repeat 10px;
height: 45px;
}
/* MY.SC.EDU menu */
.gateways-wrapper { float: left; }
.menu-btn, .menu { border: none; border-radius: 0 0 5px 0; }
.menu-btn {
width: 75px;
height: 17px;
z-index: 4;
position: relative;
top: 0;
left: 0;
background-position: 73px -119px;
border: none;
color: #FFF;
font-size: 10px; font-size: .625rem;
font-weight: 600;
padding: 0 20px 0 0;
}
.menu-btn:hover { background-position: 73px -155px; }
.menu-btn strong { font-weight: 800; }
.menu {
position: absolute;
width: 220px;
padding-top: 26px;
visibility: hidden;
opacity: 0;
background-color: #000;
z-index: 3;
top: 0;
right: 0;
font-size: 1rem;
transition: transform .35s, opacity .35s, visibility 0s .35s;
transform: scale3d(.3,.3,.3);
transform-origin: 100% 0;
}
.menu.is-opened {
opacity: 1;
transform: scale3d(1,1,1);
visibility: visible;
transition: transform .35s, opacity .35s;
}
.menu-list a { color: #fff; }
.banner-toolbox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 10px;
font-size: .625rem;
padding: .75em 0;
position: absolute;
top: 0;
right: 0;
text-align: right;
color: #fff;
text-transform: uppercase;
}
.banner-toolbox strong {
font-weight: 800;
}
.banner-tools {
position: relative;
color: #fff;
text-transform: uppercase;
margin-left: .5rem; }
.banner-tools > li {
position: relative;
display: inline;
padding-right: 10px; }
.banner-tools > li:nth-child(4) { margin-right: 1rem; }
.banner-tools > li:nth-child(n+5) {
padding-left: 10px;
}
.banner-tools + .banner-tools > li:nth-child(4) { margin-right: 0; }
.banner-tools > li:nth-child(n+5):after {
content: '';
position: absolute;
right: 100%;
width: 1px;
height: 110%;
background-color: white;
}
.banner-tools > li:nth-child(5) {
padding-left: 0;
}
.banner-tools > li:nth-child(5):after {
display: none;
}
.banner-tools a {
color: currentColor; }
#search-desktop {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: 1px solid #FFF;
padding-left: 10px;
overflow: hidden;
float: right;
}
#search-desktop:before {
content: '';
position: absolute;
/* z-index: -1; */
left: 0;
top: 0;
background-color: #fff;
width: 100%;
height: 100%;
-webkit-transform: translateX(-150%);
transform: translateX(-150%);
-webkit-transition: .3s ease-out;
transition: .3s ease-out; }
#search-desktop .icon {
position: absolute;
right: 0;
top: 0;
margin: 10px;
color: #fff;
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-transition: .3s .02s;
transition: .3s .02s; }
#search-desktop:hover .icon, #search-desktop.hover .icon {
opacity: 0; }
#search-desktop:hover:before, #search-desktop.hover:before {
-webkit-transform: translateX(0%);
transform: translateX(0%); }
#search-desktop > * {
margin: 0; }
#search-desktop:hover .submit,
#search-desktop.hover .submit,
#search-desktop.hover {
color: #fff; }
#search-desktop .search-input,
#search-desktop .submit {
border: none;
background-color: #000;
-webkit-transition: all .2s ease;
transition: all .2s ease; }
#search-desktop .search-input {
z-index: 1;
color: #fff;
font-size: 1.125rem;
background-color: transparent;
border-radius: 0;
width: auto;
height: 30px;
line-height: 28px;
padding-left: 0; }
#search-desktop .search-input::-webkit-input-placeholder {
line-height: 30px;
color: #fff;
font-family: "Berlingske Sans Extracondensed", "Impact", sans-serif;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1.5px; }
#search-desktop .search-input:-ms-input-placeholder {
line-height: 30px;
color: #fff;
font-family: "Berlingske Sans Extracondensed", "Impact", sans-serif;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1.5px; }
#search-desktop .search-input::-ms-input-placeholder {
line-height: 30px;
color: #fff;
font-family: "Berlingske Sans Extracondensed", "Impact", sans-serif;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1.5px;
transform: scale(0.75) translateX(-2rem); }
#search-desktop .search-input::placeholder {
line-height: 30px;
color: #fff;
font-family: "Berlingske Sans Extracondensed", "Impact", sans-serif;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1.5px; }
#search-desktop .submit:focus {
color: #fff;
background-color: #73000a; }
#search-desktop .submit:focus + .icon {
opacity: 0; }
#search-desktop:hover .submit, #search-desktop.hover .submit {
z-index: 1;
background-color: #73000a; }
#search-desktop:hover .search-input, #search-desktop.hover .search-input {
color: #000; }
#search-desktop:hover .search-input::-webkit-input-placeholder, #search-desktop.hover .search-input::-webkit-input-placeholder {
color: #C7C7C7; }
#search-desktop:hover .search-input:-ms-input-placeholder, #search-desktop.hover .search-input:-ms-input-placeholder {
color: #C7C7C7; }
#search-desktop:hover .search-input::-ms-input-placeholder, #search-desktop.hover .search-input::-ms-input-placeholder {
color: #C7C7C7; }
#search-desktop:hover .search-input::placeholder, #search-desktop.hover .search-input::placeholder {
color: #C7C7C7; }
#search-desktop .submit {
border-radius: 0;
color: #000;
padding: 0 10px;
width: auto; }
/*
* Mobile Menu
*/
#sidr {
display: block;
position: fixed;
top: 0;
right: -1000px;
padding-top: 55px;
height: 100%;
z-index: 499;
width: 100%;
overflow: auto;
background: #000;
-webkit-overflow-scrolling: touch;
-webkit-backface-visibility:hidden;
}
#sidr.right { left: auto; }
#sidr .sidr-inner {
padding-bottom: 55px;
box-sizing: border-box;
overflow: auto;
margin: auto;
width:100%;
height:100%;
}
/*
* Moblie/Header menu
*/
.menu-header, .menu-list a {
padding-top: 7px;
padding-bottom: 7px;
padding-left: 10px;
}
.menu-header {
background-color: #5B5B5B;
text-transform: uppercase;
font-size: .6875em;
color: #DADADA;
margin: 0;
clear: both;
}
.menu-list a { text-decoration:none; display: block; }
.menu-list li {
color: #fff;
border-top: 1px solid #7F7F7F;
}
.menu-list li:hover { color: #b6bf00; }
.menu-list span {
display: block;
}
/* End Search */
/* Main Navigation Items
----------------------------------------------------*/
#mainnav {
font-weight:800;
font-size:1.125em; /* 18px / 16px */
}
#mainnav > ul > li > a {
padding-left: .5em;
}
#mainnav ul li {
border-bottom: 1px solid #C7C7C7;
line-height: 1.4em;
}
#mainnav > ul > li:first-child {
border-top: 1px solid #C7C7C7;
}
#mainnav ul li a {
display: inline-block;
padding-bottom: .4rem;
padding-top: .5rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#mainnav a:hover { text-decoration:none; }
#selected > a:first-child {
font-weight: 800;
}
#selected > a:only-child {
border: 0;
}
.toplevel a { color:#000; }
.toplevel > li > ul.currentlevel #selected { font-size: 1.125em; }
.toplevel > li.historylevel > ul.currentlevel #selected {font-size: 1em; }
#parent_nav li:not(#selected) a {
border-bottom: 0;
}
#not_parent a { border-bottom: 0; }
.first-item .currentlevel {
border-left: 0;
}
#mainnav .historylevel {
padding: 0;
margin-bottom: 0;
font-size: .875em; /* 14px / 16px */
}
.historylevel {
border-left: 2px solid #C7C7C7;
}
.historylevel > a:first-child {
padding-left: .5em;
font-size: 1.125em;
}
.historylevel > a:first-child,
.sublevel > li a:first-child {
border-bottom: 1px solid #C7C7C7;
width: 100%;
}
.historylevel li:last-child {
border: none !important;
}
.historylevel > ul.currentlevel a,
.historylevel .currentlevel a {
padding-left: 1.5em !important;
}
.historylevel > ul.currentlevel li#selected:last-child { padding-bottom:0; }
.historylevel .childlevel { font-size:1em; border-left: none; }
.historylevel ul.childlevel a {
border: none;
margin-left: 10px;
}
.historylevel ul.sublevel ul.sublevel .childlevel a {
margin-left: 1em;
}
.historylevel ul.currentlevel #selected > a {
border-bottom: 1px solid #C7C7C7;
padding-bottom: 6px;
}
.historylevel ul.currentlevel #selected > a:after { border-bottom: 15px solid transparent; }
.historylevel ul.currentlevel #selected:last-child { padding-bottom:0; }
/* .historylevel ul.sublevel li#selected:only-child { padding-top: 2px; } */
ul.sublevel {
margin:0px;
}
ul.sublevel > li > a:before {
content: "\2193";
position: relative;
color: #C7C7C7;
font-size: 12px;
left: -2px;
}
/* Sublevel spacing at different levels */
ul.sublevel a { padding-left: 7px; }
ul.sublevel ul.sublevel a { padding-left: 14px; }
ul.sublevel ul.sublevel ul.sublevel a { padding-left: 21px;}
ul.sublevel ul.sublevel ul.sublevel ul.sublevel a { padding-left: 28px;}
ul.sublevel ul.sublevel ul.sublevel ul.sublevel ul.sublevel a { padding-left: 35px;}
ul.sublevel ul.sublevel ul.sublevel ul.sublevel ul.sublevel ul.sublevel a { padding-left: 42px;}
ul.sublevel ul.sublevel ul.sublevel ul.sublevel ul.sublevel ul.sublevel ul.sublevel a { padding-left: 49px;}
ul.currentlevel {
font-weight: 500;
border-left: 2px solid #C7C7C7;
font-size: .875em; /* 14px / 16px */
margin-bottom: 0;
margin-top: 0;
}
ul.currentlevel a { color:#222222; padding-right: 5px; padding-left: .5rem; position: relative; }
ul.currentlevel #selected > a {
background-color: #ECECEC;
border-bottom: 1px solid #C7C7C7;
color: #73000a;
padding-top: 8px;
padding-bottom: 4px;
display: block;
cursor: default;
}
ul.currentlevel #selected > a:hover span {
background: none;
color: inherit;
box-shadow: none;
}
ul.currentlevel #selected > a:before {
content: '';
position: absolute;
background-image: url('/_global_resources/img/brand/ornament_fan.svg');
background-repeat: no-repeat;
top: 50%;
transform: translateY(-50%);
left: -10px;
width: 25px;
height: 25px;
}
_:-ms-fullscreen, :root ul.currentlevel #selected > a:before {
left: -15px;
}
ul.currentlevel > li#selected:last-child { margin-bottom: 0; }
ul.currentlevel > li#selected:only-child { margin-top: 0; border-bottom: 0; }
.currentlevel #selected a:only-child {
border: 0 !important;
}
.historylevel .currentlevel { border-left: 0; }
ul.childlevel {
font-weight: 800;
font-size: .75em; /* 12px / 16px */
}
ul.childlevel a { padding-left: 1rem; }
#mainnav ul.childlevel li { line-height:1.3em; }
ul.childlevel li:last-child {
margin-bottom: 0;
border-bottom: none !important;
}
/* ul.currentlevel li:last-child a { border: none; } */
/* For internal Audiences */
.internal-btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
text-align: right;
font-size: 14px;
border: none !important;
}
.internal-btn:after {
bottom: 7px;
position: relative;
}
/* LiveChat button styles */
.livechat_button {
position: fixed !important;
z-index: 10 !important;
bottom: 0 !important;
background-color: #73000A !important;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.3) !important;
padding: 5px 0 5px 20px !important;
font-weight: 700 !important;
color: #FFF !important;
box-sizing: border-box !important;
}
.livechat_button > a {
color: #FFF !important;
display: block !important;
}
.livechat_button.is-not-fixed { position: absolute !important; }
/* SiteImprove Updated Info tab */
.sz-feedback-section.sz-feedback-section { font-family: "Berlingske Sans", "Arial", sans-serif !important; }
.sz-feedback-toggle-button-text.sz-feedback-toggle-button-text, .sz-feedback-main-font-style.sz-feedback-main-font-style {font-family: "Berlingske Sans", "Arial", sans-serif !important; font-weight: 600 !important; font-size: 14px !important;}
/* Main Content
----------------------------------------------------*/
#mainWrapper {
position: relative;
z-index: 2;
}
.main:before {
content:'';
width: 0px;
height: 0px;
border-style: solid;
border-width: 100px 0 0 5px;
border-color: transparent transparent transparent #000000;
}
.main-header {
background-color: #000;
padding-top: .5em;
padding-bottom: .5em;
}
.main-header:before,
.main-header:after {
content: '';
position: absolute;
z-index: -1;
background-color: inherit;
top: 0;
right: 100%;
width: 100%;
height: 100%;
}
.main-header:after {
right: auto;
left: 100%;
}
.main-header .row {
position: unset;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-top: 1em;
padding-bottom: 0;
}
/* Transparency/Overlap only for Home page
----------------------------------------------------*/
.branding {
background-color: #73000a;
float: left;
width: 100%;
font-weight:700;
position: relative;
margin-bottom: 1em;
}
.branding:before,
.branding:after {
content: '';
position: absolute;
background-color: inherit;
top: 0;
right: 100%;
width: 100%;
height: 100%;
}
.branding:after {
right: auto;
left: 100%;
}
.branding h1 {
position: relative;
z-index: 10;
font-family: 'Berlingske Serif', 'Georgia', serif;
font-weight: 700;
font-size: 1.6em; /* 24px / 16px */
margin: 0;
padding: .15em 0;
}
.branding h1 a { color: #FFF; }
.branding hr {
margin: 0;
height:0px;
float: left;
clear: both;
}
/* Float Clearing
---------------------------------------------------------------------*/
.module:after
{
content: ".";
display: block;
height: 0;
visibility: hidden;
}
/* float clearing for IE6 */
* html .module
{
height: 1%;
overflow: visible;
}
/* float clearing for IE7 */
* + html .module
{
min-height: 1%;
}
/* Breadcrumb Styles
---------------------------------------------------------------------*/
.breadCrumb { display: none; }
#main {
position: relative;
display: inline-table;
padding-top: 1em;
padding-bottom:85px;
}
#mainContent {
color: black;
float:left;
width:100%;
}
#mainContent a,
#mainContent strong { font-weight:800; }
#mainContent a:hover { text-decoration:none; }
#mainContent ul, #mainContent ol, #mainContent dl { line-height:1.8em; }
#mainContent p.home-intro {
font-size: 1.25em; /* 20px / 16px */
line-height: 1.6;
margin: -5px 0 15px;
border-bottom: 1px solid #C7C7C7;
padding-bottom: 20px;
}
#mainContent p.intro {
font-size: 20px; font-size: 1.25rem;
line-height: 1.6;
margin:0px 0px 20px;
border-bottom: 1px solid #C7C7C7;
padding-bottom: 20px;
}
/* Links to get a double arrow icon
----------------------------------------------------*/
#mainContent h1 a:after, #mainContent h2 a:after, #mainContent h3 a:after, #mainContent h4 a:after, #mainContent h5 a:after, #mainContent h6 a:after, .view a:after, .flex-caption strong:after, .flex-caption a h1:after, .simple-list a h4:after, .grid a .li-head:after, .multi-list .more:after, .callout .more a:after, .quick-fact b a:after, .news .sub-text a:after, .links h1 a:after, .internal-btn:after, .btn:after {
content:"\00bb";
padding-left: 3px;
}
@supports (font: -apple-system-body) and (-webkit-appearance: none) {
#mainContent h4 a:after {
position: absolute;
}
}
/* Change to to sans font for banner links */
.flex-caption h1:after {
font-family: "Berlingske Sans", "Arial", sans-serif;
}
/* News Items
----------------------------------------------------*/
.simple-list:before,
.simple-list:after,
.multi-list:before,
.multi-list:after {
content:'\0020'; display:block; overflow:hidden; visibility:hidden; width:0; height:0;
}
.simple-list:after,
.multi-list:after { clear: both; }
.simple-list article {
padding-bottom: 10px;
border-bottom: 1px solid #C7C7C7;
float: left;
transition: all 0.5s ease 0s;
padding-top: 20px;
width: 100%;
font-weight: normal;
}
.simple-list > a {
display: block;
color:#000;
font-weight: normal;
}
.simple-list a:hover article { background-color:#f0f0f0; }
.simple-list article a:hover, #eventsbg a:hover {
text-decoration:none;
}
/* .simple-list a:hover h4, .grid li:hover a .li-head { color:#818701; } */
.simple-list article img {
max-width: 24%;
float: left;
margin-right: 2.72727%; /* 15px / 550px */
}
.simple-list.mod-directory article img,
.simple-list.mod-directory-contact article img { max-width: 124px; }
.simple-list article .blurb {
width: 72%;
float: left;
}
.simple-list article .blurb-full { width:100% }
.simple-list article h4 {
margin-top: 0px;
border-style: none;
color: #73000a;
}
.simple-list article p {
margin: 0px;
padding: 0px;
}
.simple-list.mod-directory-contact p:first-of-type { margin-bottom: 1em; }
.view {
font-size: 0.75em;
float: right;
line-height: 2em;
margin-bottom:15px;
}
/* AddThis Sharing button */
.addthis_toolbox {
display: flex;
margin-block-start: 10px;
}
a.addthis_button_compact {
order: 1;
}
.addthis_toolbox .at-icon-wrapper {
display: flex;
justify-content: center;
align-items: center;
border-radius: 50px;
width: 28px !important;
height: 28px !important;
background-color: var(--color-primary) !important;
}
.addthis_16x16_style .at-icon {
width: 25px !important;
height: 20px !important;
}
.content-body { margin-top:10px; float: left; width: 100%; }
.content-body ul ul { font-size: 1em; }
.content-body table { overflow:visible; border-collapse: separate; border: none; }
.content-body table tr:nth-child(even) { background: #ECECEC; }
.content-body table tr:nth-child(odd) { background: #FFF; }
/* Expand/Collapse Widget
----------------------------------------------------*/
/* Expand-All/Collapse-All Button */
.accordion-expand {
background: none;
border: 0;
color: #73000A;
float: right;
padding: 0;
font-size: .75em; /* 12px / 16px */
}
.accordion-summary {
box-sizing: border-box;
width: 100%;
text-align: left;
border: 0;
border-bottom: 1px solid #C7C7C7;
color: #73000a;
font-family: inherit;
font-weight: 800;
cursor: pointer;
padding: 5px 30px 5px 5px;
background-color: rgba(218, 218, 218, 0);
transition: all 450ms ease-in;
position: relative;
clear: both;
}
.accordion-summary:before {
content: "+";
width: 22px;
height: 22px;
font-size: 20px;
line-height: 25px;
border-radius: 50%;
border: 1px solid #73000A;
right: 3px;
text-align: center;
float: right;
display: block;
margin-right: -27px;
}
.accordion-summary > * {
line-height: 1.8em;
}
.accordion-summary > *,
.accordion-summary > * > * {
margin: 0;
font-size: 1rem;
}
.accordion-summary.selected,
.accordion-summary:hover{ background-color: #ececec; transition: all 400ms ease-in; }
.accordion-summary.selected:before {content: '–'; }
.accordion-details {
max-height:1px;
box-sizing: border-box;
overflow: hidden;
padding: 0 25px;
transition: max-height 500ms cubic-bezier(0, .6, .6, 1), padding .25s .3s, visibility .25s .25s;
border-color: #c8c8c8;
border-style: dotted;
border-width: 0 1px 1px 1px;
visibility: hidden;
}
.accordion-details.opened {
max-height: 9999px;
visibility: visible;
overflow-y: auto;
padding: 1em 25px;
transition: max-height 1000ms ease-in, padding .25s, visibility .25s;
}
.accordion-details:last-child { margin-bottom: 2em; }
/* Homepage Profiled Article Flip Begin */
.flip-container {
-webkit-perspective: 1000px;
perspective: 1000px;
float:left;
width: 100%;
height: 200px;
margin-right: 2%;
margin-bottom: 20px;
clear:both;
z-index: 9999;
position: relative;
}
.flip-container,
.front,
.back { overflow: hidden; }
.flipper {
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
position: relative;
}
.front,
.back {
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 1);
}
.front { z-index:9998; }
.front h2, .front span {
transition: 0.6s;
position:absolute;
color:white;
font-weight: 800;
}
.front span {
bottom: 0;
left: 0;
width: 90%;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
font-size: .875em;
padding: 5%;
margin:0;
border-top:1px solid #FFF;
}
.front span:before, .front span:after {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
left:15%;
}
.front span:before {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #ffffff;
border-width: 15px;
margin-left: -15px;
}
.front span:after {
border-color: rgba(0, 0, 0, 0);
border-bottom-color: #000000;
border-width: 13px;
margin-left: -13px;
}
.front h2 { top: 10px; left: 15px; padding-right: 5px; }
.back {
transform: rotateY(-180deg);
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.6);
backface-visibility: hidden;
padding: 10% 8% 0%;
width: 84%;
height: 178px;
overflow: hidden;
z-index: 9997;
}
.back h3 { color: #BFBF00; font-size: .875em; }
.back span { color:white; line-height:1.2em; }
.flip-container:hover .back { transform: rotateY(0deg); z-index:9999; }
.flip-container:hover .front { transform: rotateY(180deg); }
.flip-container:hover .front h2, .flip-container:hover .front h2, .flip-container:hover .front span { opacity:0; }
/* Homepage Profiled Article Flip End */
/* Image Grid List
----------------------------------------------------*/
.grid {
padding: 0;
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.grid[class*=mod-col] {
--gap: 1.5rem;
display: grid;
grid-template-columns: repeat(var(--num-of-col, 2), 1fr); ;
gap: var(--gap);
padding:0;
margin: 0;
}
.grid.mod-col-1 {
--num-of-col: 1;
}
@media only screen and (min-width: 60em) {
.grid.mod-col-2 {
--num-of-col: 2; }
.grid.mod-col-3 {
--num-of-col: 3; }
.grid.mod-col-4 {
--num-of-col: 4; }
.grid.mod-col-5 {
--num-of-col: 5; }
}
.grid li > a {
font-weight:normal;
display: inline-block;
transition: all 0.5s ease 0s;
}
.grid li > a {
position: relative;
text-decoration:none !important;
}
.grid li > a:hover,
.grid li > a:focus {
background-color: #f0f0f0;
box-shadow: rgb(0 0 0 / 15%) 0 0.5rem 1.25rem 0, rgb(0 0 0 / 16%) 0 0.0625rem 0.5rem 0;
transform: translateY(-0.125rem);
}
.grid li > a:hover img,
.grid li > a:focus img {
transform: scale3d(1.05, 1.05, 1)
}
.grid a:hover,
.grid a:focus { background-color:#F0F0F0; }
.grid a:only-child .li-img:only-child {
margin: 0;
}
.grid:not([class*=mod-col]) > li {
width: 30.666667%;
list-style:none;
padding-right:4%;
margin-bottom: 1em;
float:left;
display: block;
}
.grid li:nth-of-type(3n+1) { clear: both; }
.grid li:nth-child(3n) { padding:0; }
.grid[class*=mod-col] > li {
box-sizing: border-box;
list-style:none;
display: block;
}
.grid .li-img {
position: relative;
overflow: hidden;
}
.grid img {
display: block;
width: 100%;
height: auto;
transition: .5s;
}
.grid li > a .li-text {
padding: 0 5% 10%;
}
.grid .li-head {
line-height: 1.4em;
margin-top: 10px;
}
.grid[class*=mod-col] .li-head { font-size: revert; }
.grid .li-sub { font-size:1em; font-weight: 400; color: #000; }
/* Image Block
----------------------------------------------------*/
.img-block,
.quote-block {
margin-block: 2em; }
.img-block {
position: relative; }
.img-block .lightbox-img:after,
.img-block .fancybox:after {
background-color: var(--color-primary, #73000a); }
.img-block.mod-inline {
width: 100%;
float: right;
margin-block: 0; }
@media only screen and (min-width: 48em) {
.img-block.mod-inline {
width: 50%;
margin-inline-start: 2rem;
margin-inline-end: 0; } }
.img-block a {
position: relative;
display: inline-block;
}
@media only screen and (min-width: 48em) {
.img-block.mod-inline.mod-small {
max-width: 33%; } }
.img-block.mod-inline.mod-left {
float: left; }
@media only screen and (min-width: 48em) {
.img-block.mod-inline.mod-left {
margin-inline-start: 0;
margin-inline-end: 2rem;
}
}
.img-block_img {
max-width: 100%;
height: auto; }
.img-block_caption {
font-weight: 700;
font-size: .875rem;
line-height: 1.8;
max-width: var(--story-text-width);
margin-inline: auto;
margin-block: .75rem; }
/* Callout items
----------------------------------------------------*/
.callout {
position: relative;
width:100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #C7C7C7;
border-left: 5px solid #73000a;
margin-bottom: 1em;
clear:both;
float: right;
padding-bottom: 10px;
}
.callout .hgroup, .callout .sub-text, .callout.callout form { padding: .5rem .75rem; margin-bottom: 0; }
.callout ul, .callout ol {
padding-right: .75rem;
}
.callout.callout form {
width: 80vw;
background-color: transparent;
}
@media only screen and (min-width: 48em) {
.callout .fsBody.fsEmbed {
width: 100%;
}
.callout.callout form {
width: 90%;
}
}
.callout-img {
position: relative;
}
.callout .category {
font-family: "Berlingske Sans Extracondensed", "Impact", sans-serif;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .8px;
margin: 0;
color: #5C5C5C;
}
.callout .header {
font-family: "Berlingske Serif", "Georgia", serif;
font-weight: 700;
margin-bottom:0;
line-height: 1.3em;
font-size: 1.3em;
}
.callout img { width: 100%; height: auto; }
.callout .sub-text { z-index: 1; margin-bottom:-5px; }
.callout .more {
float: left;
color: white;
padding-right: 20px;
padding-left: 1em;
margin-top: 5px;
}
.callout h1,
.callout .sub-text,
.callout .more,
.callout ul,
.callout ol { font-size: .875rem; }
/* Add background color to media callouts */
.callout.mod-media {
border-bottom: 0; border-right: 0; border-top: 0;
background-color: #ECECEC;
}
/* Videos that play in callouts (full width) */
.callout-img.mod-video {
border: none;
margin: 0;
width: auto; }
.callout-img.mod-video:hover .callout--play-btn {
background-color: #b6bf00;
background-color: rgba(182, 191, 0, 0.7); }
.callout-img.mod-video,
.lazyload-video { margin-bottom: -10px; }
.callout--title-bar {
display: table;
position: absolute;
bottom: 0;
width: 100%;
padding: 1.25rem 1em 1.25rem 5em;
background-color: #000;
background-color: rgba(0, 0, 0, 0.7);
box-sizing: border-box; }
@media only screen and (min-width: 48em) {
.callout--title-bar {
padding-inline-start: 6em; } }
.callout--title-text {
display: table-cell;
vertical-align: middle;
color: #FFF;
line-height: 1.4em; }
.callout--play-btn {
position: absolute;
text-indent: -9999px;
background-color: #73000a;
background-color: rgba(115, 0, 10, 0.7);
width: 40px;
height: 40px;
border: 2px solid #FFF;
border-radius: 50%;
left: 15px;
bottom: 50%;
transform: translateY(50%);
transition: .25s; }
@media only screen and (min-width: 48em) {
.callout--play-btn {
width: 50px;
height: 50px;
left: 20px; } }
.callout--play-btn:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 9px 0 9px 15.6px;
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #FFF;
margin: 9px 0 0 13px; }
@media only screen and (min-width: 48em) {
.callout--play-btn:after {
margin: 15px 0 0 17px;
border-width: 11px 0 11px 19.1px; } }
/* Single image callout lightbox gallery */
.lightbox-img:after,
.fancybox .li-img:after {
background-image: url('../img/icons/video-gallery-sprite.svg');
background-repeat: no-repeat;
position: absolute;
width: 100%;
max-height: 35px;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
bottom: 0;
color: #FFF;
padding: 5px 0px 5px 40px;
font-size: 12px; font-size: .75rem;
line-height: 20px;
box-sizing: border-box;
}
.lightbox-img:after,
.fancybox .li-img:after { content: "View Image(s)"; background-position: 10px -34px; }
.grid .lightbox-img .li-img:after {
content: "\2922";
background-image: none;
padding: 7px 0;
text-align: center;
width: 30px;
height: 30px;
font-size: 16px;
line-height: 16px;
}
.grid .fancybox:after { display: none; }
.lightbox-video {
position: relative;
display: block;
}
.lightbox-video:before,
.lightbox-video:after,
.lightbox-video .li-img:before,
.lightbox-video .li-img:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
z-index: 10;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.lightbox-video:before,
.lightbox-video .li-img:before {
width: 60px;
height: 60px;
margin: -30px 0 0 -30px;
background-color: rgba(115, 0, 10, 0.5);
border: 2px solid #FFF;
border-radius: 50%;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
-webkit-transition: border .35s, background-color .35s;
transition: border .35s, background-color .35s;
}
.lightbox-video:hover:before,
.lightbox-video:focus:before,
.lightbox-video:hover .li-img:before,
.lightbox-video:focus .li-img:before {
border: 5px solid #FFF;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: border .35s, background-color .35s;
transition: border .35s, background-color .35s;
}
.lightbox-video:after,
.lightbox-video .li-img:after {
width: 0;
height: 0;
background: none;
padding: 0;
border-style: solid;
border-width: 12.5px 0 12.5px 21.7px;
margin: -11px 0 0 -7px;
border-color: transparent transparent transparent #FFF;
-webkit-transform: rotate3d(1, 0, 0, 0deg);
transform: rotate3d(1, 0, 0, 0deg);
-webkit-transition: border-color .35s, -webkit-transform .35s;
transition: border-color .35s, -webkit-transform .35s;
transition: border-color .35s, transform .35s;
transition: border-color .35s, transform .35s, -webkit-transform .35s;
}
.lightbox-video:hover:after,
.lightbox-video:focus:after,
.lightbox-video:hover .li-img:after,
.lightbox-video:focus .li-img:after {
-webkit-transform: rotate3d(1, 0, 0, 180deg);
transform: rotate3d(1, 0, 0, 180deg);
}
/* Adding play button image over video thumbnail and on Image Grid Items
----------------------------------------------------*/
#home + .flex-container .lightbox-video:before {
width: 60px;
height: 60px;
margin: -30px 0 0 -30px; }
@media only screen and (min-width: 48em) {
#home + .flex-container .lightbox-video:before {
width: 100px;
height: 100px;
margin: -50px 0 0 -50px; } }
#home + .flex-container .lightbox-video:hover:before {
border-width: 3px; }
@media only screen and (min-width: 48em) {
#home + .flex-container .lightbox-video:hover:before {
border-width: 7px; } }
#home + .flex-container .lightbox-video:after {
border-width: 12.5px 0 12.5px 21.7px;
margin: -11px 0 0 -7px; }
@media only screen and (min-width: 48em) {
#home + .flex-container .lightbox-video:after {
border-width: 20px 0 20px 34.6px;
margin: -20px 0 0 -13px; } }
/* Inline lightbox link */
.lightbox-img.mod-inline,
.lightbox-video.mod-inline {
position: relative;
display: inline;
margin-right: 20px;
}
.lightbox-img.mod-inline:after,
.lightbox-video.mod-inline:after {
content: '';
position: relative;
background-image: url('../img/icons/video-gallery-sprite.svg');
height: 18px;
width: 20px;
padding-left: 20px;
background-size: 15px;
background-color: transparent;
}
.no-svg .lightbox-img.mod-inline:after,
.no-svg .lightbox-video.mod-inline:after { background-image: url('../img/icons/video-gallery-sprite.png'); }
.lightbox-img.mod-inline:after { top:3px; background-position: 3px -86px; }
.lightbox-img.mod-inline:hover:after { background-position: 3px -146px; }
.lightbox-video.mod-inline:before { display: none; }
.lightbox-video.mod-inline:after {
border: none;
top: -3px;
left: 10px;
background-repeat: no-repeat;
background-position: 3px -56px;
}
/* Removing the play video tip for Image Grid list */
.grid .lightbox-video:before,
.grid .lightbox-video:after {
display: none;
}
/* Event lists
----------------------------------------------------*/
.events {
display: inline-block;
margin-bottom: 2.5em;
padding: 10px;
}
.events h3 {
font-family: "Berlingske Sans Extracondensed", "Impact", sans-serif;
font-weight: 800;
font-size: 1.5em;
text-transform: uppercase;
letter-spacing: .5px;
margin-bottom: .75em;
}
.events .view { margin-bottom: 0; }
.event-item {
margin-bottom: 10px;
padding-bottom: 10px;
}
.event-item { font-size: .875em; /* 14px / 16px */ }
.event-title { font-size: 1rem; }
.event-date,
.event-details b { font-weight: 800; }
.events .event-item:last-of-type,
.event-item > * { margin: 0; }
/* News callout
----------------------------------------------------*/
.news { padding: 0; }
.news .hgroup { z-index: 9998; }
.news .sub-text {
box-sizing: border-box;
padding: 0;
margin-top: 0;
}
.news .sub-text li { list-style: none; }
.news li a {
display: block;
padding: .7em 1em;
border-bottom: 1px solid #FFF;
line-height: 1.6em;
transition: .5s ease;
}
.news li a:hover { background-color: #dadada; }
.news li:first-child a { padding-top: 15px;}
.news .view {
padding: .5em 1em;
margin-bottom: 0;
line-height: 1.8;
}
/* Quick-fact callout
----------------------------------------------------*/
.quick-fact, .info, .gallery { padding-bottom:0; }
.quick-fact b,
#mainContent .quick-fact b a {
display:block;
font-family: "Berlingske Sans Extracondensed", "Impact", sans-serif;
font-weight: 800;
text-transform: uppercase;
text-decoration: none;
letter-spacing: .8px;
font-size: 3rem;
color: #73000a;
padding: .15em 0;
line-height: 1.2;
}
.quick-fact .hgroup { padding-bottom: 0; }
.quick-fact .sub-text { padding-top: 0; }
/* Related info callout
----------------------------------------------------*/
.info ul {
margin: 0;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 1em;
}
/* Highlight tip
----------------------------------------------------*/
.tip {
overflow: hidden;
background-color: #ececec;
border-left: 5px solid #73000a;
padding: 1.5em 2em;
}
.tip p:only-child { margin-bottom: 0; }
/* Tweet-feed Callout
----------------------------------------------------*/
iframe[id^='twitter-widget-']{ width:100% !important;min-width: 100px !important;}
/* Gallery & Form Callout
----------------------------------------------------*/
.form .hgroup { margin-bottom:10px; }
.gallery, .form {
padding: 0 0 10px;
float: left;
background-color: #ECECEC;
}
.gallery .sub-text { padding-top:15px; background-color: #ECECEC; }
.gallery:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
.gallery ul { float: left; padding: 7px; }
.gallery li { float: left; width: 50%; list-style-type:none; }
.gallery li a { display: block; border: 1px solid #3c3c3c; margin: .5em; }
.gallery li a:nth-child(2n) { margin-right:0; }
.gallery li img { display: block; width: 100%; height: auto; border:none; }
.gallery .view-more { margin-right:15px; font-style: italic; float:right; font-size: .625em; /* 10px / 16px */ }
/* Flexslider Callout
----------------------------------------------------*/
.callout.mod-slider {
color: #000;
padding: 10px;
box-sizing: border-box;
background-color: #ececec;
overflow: hidden;
display: block;
border: 0;
}
.callout.mod-slider .flexslider {
position: relative;
background-color: transparent; }
.callout.mod-slider .slides {
margin: 0;
width: 100%;
}
.callout.mod-slider .slides:after {
display: none;
}
.callout.mod-slider .callout-img {
width: auto;
margin: 0;
background-color: #000;
text-align: center;
float: none; }
.callout.mod-slider .flex-caption {
position: relative;
width: auto;
right: auto;
padding: 0;
border: 0;
}
.callout.mod-slider .flex-caption,
.callout.mod-slider .flex-caption p {
background-color: transparent;
color: #000;
}
.callout.mod-slider .flex-direction-nav {
width: auto;
position: relative;
z-index: 10;
top: 0;
margin: 0;}
.callout.mod-slider .flex-prev,
.callout.mod-slider .flex-next {
position: absolute;
background-color: #73000a;
background-color: rgba(115, 0, 10, 0.7);
background-image: none;
opacity: 1;
width: 35px;
height: 65px;
top: 50%;
margin-top: -32.5px; }
@media only screen and (min-width: 48em) {
.callout.mod-slider .flex-prev,
.callout.mod-slider .flex-next {
width: 45px;
height: 75px;
margin-top: -37.5px; } }
.callout.mod-slider .flex-prev {
left: 0;
border-radius: 0 50px 50px 0; }
.callout.mod-slider .flex-next {
right: 0;
border-radius: 50px 0 0 50px; }
.callout.mod-slider .flex-prev:before,
.callout.mod-slider .flex-prev:after,
.callout.mod-slider .flex-next:before,
.callout.mod-slider .flex-next:after {
content: '';
position: absolute;
width: 4px;
height: 20px;
background-color: #fff;
border-radius: 10px; }
.callout.mod-slider .flex-prev:before,
.callout.mod-slider .flex-next:before {
top: 16px; }
@media only screen and (min-width: 48em) {
.callout.mod-slider .flex-prev:before,
.callout.mod-slider .flex-next:before {
top: 20px; } }
.callout.mod-slider .flex-prev:after,
.callout.mod-slider .flex-next:after {
top: 29px; }
@media only screen and (min-width: 48em) {
.callout.mod-slider .flex-prev:after,
.callout.mod-slider .flex-next:after {
top: 33px; } }
.callout.mod-slider .flex-prev:before,
.callout.mod-slider .flex-next:after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.callout.mod-slider .flex-prev:after,
.callout.mod-slider .flex-next:before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.callout.mod-slider .flex-prev:before,
.callout.mod-slider .flex-prev:after {
left: 12px; }
@media only screen and (min-width: 48em) {
.callout.mod-slider .flex-prev:before,
.callout.mod-slider .flex-prev:after {
left: 15px; } }
.callout.mod-slider .flex-next:before,
.callout.mod-slider .flex-next:after {
right: 12px; }
@media only screen and (min-width: 48em) {
.callout.mod-slider .flex-next:before,
.callout.mod-slider .flex-next:after {
right: 15px; } }
/* Text Bar
----------------------------------------------------*/
.text-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
margin: 4rem 0; }
@media only screen and (min-width: 48em) {
.text-bar {
flex-wrap: nowrap;
z-index: 1; }
.text-bar.margin-bottom-0 {
z-index: 10; } }
.text-bar.mod-half > * {
box-sizing: border-box;
min-width: 50%; }
.text-bar.mod-blockquote {
margin-top: 2.5rem; }
@media only screen and (min-width: 48em) and (max-width: 50em) {
.text-bar.mod-blockquote .text-bar_img {
padding-right: 1.5rem; } }
.text-bar.mod-blockquote.mod-half .text-bar_blockquote blockquote:before {
left: -20px;
top: 25px; }
@media only screen and (min-width: 48em) and (max-width: 50em) {
.text-bar.mod-blockquote.mod-img-left .text-bar_img {
padding-right: 0;
padding-left: 1.5rem; } }
.text-bar.mod-blockquote.mod-full-page .text-bar_img {
padding-right: 0; }
.text-bar.mod-blockquote:not(.mod-full-page) .text-bar_blockquote {
padding: 3rem 2rem; }
@media only screen and (min-width: 48em) {
.text-bar.mod-blockquote:not(.mod-full-page) .text-bar_blockquote {
padding: min(2vw, 3rem); } }
@media only screen and (min-width: 48em) and (max-width: 59em) {
.text-bar.mod-blockquote.mod-large .text-bar_blockquote:not(:only-child) {
font-size: 18px; } }
.text-bar_header {
font-size: var(--headline-font-size); }
.text-bar.mod-full-page {
--no-img-max-width: 85%;
position: relative;
padding: 0 1rem; }
.text-bar.mod-full-page.mod-cta {
display: flex;
flex-direction: column;
text-align: center;
padding: 4rem 0; }
.text-bar.mod-full-page.mod-cta .text-bar_body {
max-width: var(--no-img-max-width);
padding: 0;
padding-bottom: 1rem; }
.text-bar.mod-full-page.mod-cta .text-bar_header {
margin-top: 0; }
.text-bar.mod-full-page.mod-cta .text-bar_btn {
display: flex;
justify-content: center;
flex-wrap: wrap; }
.text-bar.mod-full-page.mod-cta .text-bar_btn .btn {
min-width: 60%; }
@media only screen and (min-width: 48em) {
.text-bar.mod-full-page.mod-cta .text-bar_btn .btn {
min-width: auto; }
.text-bar.mod-full-page.mod-cta .text-bar_btn .btn:not(:last-child) {
margin-right: 2rem; } }
.text-bar.mod-full-page.mod-cta.mod-no-buttons .text-bar_body {
padding-bottom: 0; }
@media only screen and (min-width: 48em) {
.text-bar.mod-full-page.mod-three-fourths .text-bar_img {
min-width: 50%;
margin-bottom: -2rem; } }
@media only screen and (min-width: 60em) {
.text-bar.mod-full-page.mod-three-fourths .text-bar_img {
min-width: 75%; } }
.text-bar.mod-full-page.mod-img-left {
padding-bottom: 1.5rem; }
.text-bar.mod-full-page.mod-img-left .text-bar_body {
padding-right: 0;
margin-bottom: 0; }
.text-bar.mod-full-page.mod-img-left .text-bar_img {
margin-bottom: 0; }
@media only screen and (min-width: 48em) {
.text-bar.mod-full-page.mod-img-left .text-bar_img {
padding-left: 0;
padding-right: 2rem;
margin-bottom: -2rem; } }
@media only screen and (min-width: 48em) {
.text-bar.mod-full-page.mod-img-left {
padding: 0; } }
@media only screen and (min-width: 48em) {
.text-bar.mod-full-page.mod-align-bottom {
padding-bottom: 0; } }
.text-bar.mod-full-page.mod-align-bottom .text-bar_img {
align-self: flex-end;
margin-top: 0;
margin-bottom: 0; }
@media only screen and (min-width: 60em) {
.text-bar.mod-full-page.mod-align-bottom .text-bar_img {
margin-top: -2rem; } }
.text-bar.mod-full-page.mod-align-top {
margin-top: 0; }
@media only screen and (min-width: 48em) {
.text-bar.mod-full-page.mod-align-top .text-bar_img {
align-self: flex-start;
margin-top: 0; } }
@media only screen and (min-width: 48em) {
.text-bar.mod-full-page.mod-align-top.mod-align-bottom .text-bar_img {
align-self: auto; } }
@media only screen and (min-width: 48em) {
.text-bar.mod-full-page.mod-blurb .text-bar_body {
padding: 3rem 0; } }
@media only screen and (min-width: 48em) {
.text-bar.mod-full-page.mod-blurb.mod-large .text-bar_body {
padding: 2rem 1rem; } }
.text-bar.mod-full-page.mod-blurb .text-bar_body:only-child {
text-align: center;
margin-right: auto;
margin-left: auto; }
@media only screen and (min-width: 48em) {
.text-bar.mod-full-page.mod-blurb .text-bar_body:only-child {
max-width: var(--no-img-max-width); } }
.text-bar.mod-full-page.mod-blockquote .text-bar_blockquote:only-child {
text-align: center;
margin-right: auto;
margin-left: auto; }
@media only screen and (min-width: 48em) {
.text-bar.mod-full-page.mod-blockquote .text-bar_blockquote:only-child {
max-width: var(--no-img-max-width); } }
.text-bar.mod-full-page .text-bar_header {
margin-top: 1.5rem;
margin-bottom: 1rem; }
.text-bar.mod-full-page .text-bar_header.font-condensed {
--headline-base-size: var(--text-xxl); }
.text-bar.mod-full-page .text-bar_header.font-condensed.mod-large {
--max-font-size: 65px; }
@media only screen and (min-width: 80em) {
.text-bar.mod-full-page .text-bar_header {
margin-top: 0; } }
.text-bar.mod-full-page .text-bar_body {
flex: 1;
min-width: 75%;
margin-bottom: 1.5rem; }
.text-bar.mod-full-page .text-bar_body p {
line-height: 2; }
.text-bar.mod-full-page .text-bar_body p:last-child {
margin-bottom: 0; }
.text-bar.mod-full-page .text-bar_body p:only-child {
margin-top: 1.5rem; }
@media only screen and (min-width: 48em) {
.text-bar.mod-full-page .text-bar_body {
padding-top: .25rem;
padding-bottom: 1.5rem;
margin-bottom: 0;
min-width: auto; }
.text-bar.mod-full-page .text-bar_body p:only-child {
margin-top: 0; } }
@media only screen and (min-width: 80em) {
.text-bar.mod-full-page .text-bar_body {
padding: 0; } }
.text-bar.mod-full-page .text-bar_img {
margin-bottom: -2rem; }
@media only screen and (min-width: 48em) {
.text-bar.mod-full-page .text-bar_img {
padding-left: 2rem;
margin-top: -2rem; } }
@media only screen and (min-width: 60em) {
.text-bar.mod-full-page .text-bar_img {
max-width: 30%; } }
.text-bar.mod-full-page .btn {
margin-top: 1rem; }
@media only screen and (min-width: 48em) {
.text-bar.mod-full-page {
padding: 0; } }
@media only screen and (min-width: 48em) and (max-width: 59em) {
.text-bar.mod-full-page:not(.mod-blockquote, .mod-blurb, .mod-cta) {
padding: 2rem 0; } }
.text-bar.mod-img-left .text-bar_body,
.text-bar.mod-img-left .text-bar_blockquote {
order: 1; }
.text-bar.mod-top {
align-items: initial; }
.text-bar_img {
width: 100%;
max-width: 400px;
margin: 0 auto; }
@media only screen and (min-width: 48em) {
.text-bar_img {
flex: 1; } }
.text-bar_img img {
width: 100%;
height: auto; }
.text-bar_img.mod-round {
padding: 1.5rem; }
.text-bar_img.mod-round img {
border-radius: 50%; }
.text-bar_blockquote {
display: flex;
flex-direction: column;
padding: 3rem 1rem; }
@media only screen and (min-width: 48em) {
.text-bar_blockquote {
padding: 3rem 1.5rem;
flex: 2; } }
.text-bar_blockquote blockquote {
margin: 0;
padding: 0; }
.text-bar_blockquote blockquote:before, .text-bar_blockquote blockquote:after {
top: 50px; }
@media only screen and (min-width: 48em) {
.text-bar_blockquote blockquote:before {
left: -30px; } }
.text-bar_blockquote blockquote:after {
bottom: -20px;
top: auto;
right: 20px; }
/* Checkbox for Directory Page
----------------------------------------------------*/
#input-switch {
float: right;
margin-bottom: -30px;
margin-top: 20px;
position: relative;
z-index: 10;
}
#input-switch label { display: inline; margin-left: 5px; font-weight:600; font-size: .875em; /* 14px / 16px */ }
/* Link/Icons for List Page
----------------------------------------------------*/
.multi-list .external, .multi-list .download {
padding-right: 35px;
}
.multi-list .external {
background: url(../img/icons/Ext_Link_g.png) no-repeat 95% center;
}
.multi-list .external:hover {
background: url(../img/icons/Ext_Link_white.png) no-repeat 95% center;
}
.multi-list .download {
background: url(../img/icons/download_arrow_g.png) no-repeat 95% center;
}
.multi-list .download:hover {
background: url(../img/icons/download_arrow_white.png) no-repeat 95% center;
}
.multi-list .more {
padding-right: 10%;
position: relative;
}
.multi-list .more:after {
font-size:17px;
padding-right: 5%;
position: absolute;
right: 0;
top: 3px;
}
/* End Main Content
----------------------------------------------------*/
/* Secondary Page styles
----------------------------------------------------*/
/* For Subdivision / Area titles */
.subdiv-title {
color: #000;
padding: 5px 0;
margin-bottom: 10px;
font-size: 1.25em; /* 20px / 16px */
font-weight: 300;
overflow: hidden;
border-bottom: 1px solid #C7C7C7;
}
/* For Section head titles */
#sectionHead, #sectionHead_fac {
text-transform: uppercase;
color: #5b5b5b;
font-size:.9375em; /* 15px / 16px */
position: relative;
z-index:99999;
}
.subdiv-title ~ #sectionHead {
margin-bottom: 10px;
margin-top: -5px;
}
#sectionHead_fac {
float: left;
}
.mainImage {
margin-bottom:10px;
}
.mainImage + #sectionHead { margin-top: 0px; }
.content-slider + #sectionHead { margin-top: 10px; }
.multi-list article {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
border-bottom:1px solid #C7C7C7;
float:left;
padding-bottom:15px;
padding-top:15px;
position: relative;
}
.multi-list article:last-child {
border-bottom:none;
}
.multi-list img {
float:left;
margin-right:2.72727%; /* 15px / 835px */
max-width: 24%;
}
.multi-list ul a:hover span {
box-shadow: none;
background-color: transparent;
color: inherit;
}
_:-ms-fullscreen, :root .multi-list img {
width: 24%;
}
.width {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
width:72%;
float:left;
}
.halfwidth {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
min-width: 50%;
float: left;
}
.multi-list ul:last-child {
margin:0;
margin-left: 2.72727%;
float:right;
width:20%;
padding-left:0px;
font-size:.8125em; /* 13px / 16px */
top: 0;
position: relative;
right: 0px;
}
.multi-list ul:last-child li {
background-color:#ececec;
border: 1px solid #dadada;
font-weight: bold;
list-style-type:none;
text-align: left;
margin-bottom: 3px;
border-radius: 3px;
transition: .3s;
}
.multi-list ul:last-child li:hover { background-color: #73000a; }
.multi-list ul:last-child li a { display:block; text-decoration:none; padding: 4px 0px 4px 10px; transition: 0s; }
.multi-list ul:last-child li:hover a { color:#FFF; }
#detail {
float:left;
}
#person { float: left; }
#person nav {
font-weight: 600;
font-size: .6875em; /* 11px / 16px */
margin-top:3px;
margin-left: 15px;
}
#person span { margin-left:15px; }
#contact {
padding-bottom:20px;
float:left;
}
#contact h2 {
}
#contact table {
margin-bottom:15px;
margin-top: 20px;
border:none;
}
#contact table td {
padding-left: 0px;
border:none;
}
#contact table td:nth-child(odd) { width: 25%; }
#contact table td:nth-child(even) { word-break: break-word; }
#contact h4 {
font-weight:bold;
margin-top:15px;
color: black;
font-size: .875em;
}
.twitter-follow-button { margin-top: 10px; margin-bottom: 10px; float: left; }
#contact b {
margin-right:15%;
}
#contact p {
font-size: 14px; font-size:.875rem; /* 14px / 16px */
line-height:1.5em;
margin:0px;
border-bottom: 1px dotted #CCC;
}
#contact p:last-child { border-bottom:none; }
#background {
width: 100%;
float:left;
}
#background .callout { max-width: 23%; }
#background > h4 { padding-top:20px; border-top: 1px solid #C7C7C7; }
#background > p { padding-bottom: 20px; margin:0; }
#background > p:last-child { border:none; }
#section { float:left; }
/* School/College Footer
----------------------------------------------------*/
#inner {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background: #ececec;
}
_:-ms-fullscreen, :root #inner {
display: block;
float: left;
}
#inner:before,
#inner:after {
content: '';
position: absolute;
background-color: inherit;
top: 0;
z-index: -1;
right: -100%;
left: -100%;
width: auto;
height: 100%;
overflow: visible !important;
visibility: visible !important;
}
#inner footer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
z-index: 2;
font-weight:700;
float:left;
margin-top: 15px;
margin-left: -15px;
color: #FFF;
}
#inner footer h1 {
font-family: 'Berlingske Serif', 'Georgia', serif;
font-weight: 700;
font-size: 1.3em;
float: left;
color: #000;
margin-bottom: .5em;
}
#inner hr { display: none; }
.uniticons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
list-style: none;
margin-top: 0;
color: #535456;
font-size:0.875em;
padding-left:0;
float: left;
}
.uniticons li {
line-height: 2em;
}
.uniticons li a { color:#000; }
.uniticons a {
display: block;
padding-left: 25px;
}
.uniticons li:first-child a { padding-left: 0; }
/* Global Footer/Nav
----------------------------------------------------*/
#logo-footer,
.system-footer {
background-color: #73000a;
text-align: center; }
@media only screen and (min-width: 48em) {
#logo-footer {
text-align: left; } }
.system-footer { padding: 1.5em 1em; }
#logo-footer .logo {
margin-bottom: 1em; }
@media only screen and (min-width: 48em) {
#logo-footer .logo {
margin: 0; } }
#logo-footer .logo img {
max-width: 300px;
width: 100%;
height: 100%; }
#logo-footer small {
margin-bottom: 5px;
border-right: solid 1px #FFF; }
#logo-footer small:last-child {
border: none; }
#logo-footer, #logo-footer small a {
color: #FFF; }
.footer-links {
text-align: left; }
.footer-links h2 {
font-family: "Berlingske Sans Extracondensed", "Impact", sans-serif;
font-weight: 800;
color: #FFF;
font-size: 1rem;
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: 1px solid #FFF;
padding-bottom: .5em;
margin-bottom: .75em; }
.footer-links_flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@media only screen and (min-width: 48em) {
.footer-links { margin-top: 2em; }
.footer-links_flex {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
}
.footer-links_flex .links {
-ms-flex-preferred-size: auto;
flex-basis: auto;
max-width: 50%;
}
@media only screen and (min-width: 48em) {
.footer-links_flex .links {
max-width: none;
}
}
.footer-links_flex.mod-first .links:nth-child(2) {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
@media only screen and (min-width: 48em) {
.footer-links_flex.mod-first .links:nth-child(2) {
-webkit-box-ordinal-group: 0;
-ms-flex-order: 0;
order: 0;
}
}
#sitemap {
padding: 1.5em 1em; }
#sitemap h2 {
font-family: "Berlingske Sans Extracondensed", "Impact", sans-serif;
font-weight: 800;
color: #FFF;
}
.footer-links .row:first-child .links:last-child {
width: auto; }
.links ul li {
font-size: .75em;
margin-bottom: 7px;
padding-bottom: 5px;
line-height: 1.3em;
list-style: none; }
.uofsc-social {
margin: 1em 0; }
.uofsc-social h2 {
margin-top: 0;
margin-bottom: .25em;
font-size: 2rem;
letter-spacing: .8px; }
@media only screen and (min-width: 48em) {
.uofsc-social h2 {
margin: 0; } }
@media only screen and (min-width: 48em) {
.uofsc-social {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0 15px; } }
.uofsc-social_list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding-bottom: .5em; }
.uofsc-social_list li {
margin-left: 1.5em;
list-style: none; }
.uofsc-social_list li:first-child {
margin-left: 0; }
@media only screen and (min-width: 48em) {
.uofsc-social_list li:first-child {
margin-left: 1em; } }
.uofsc-social_list a {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transition: .3s;
transition: .3s;
position: relative;
width: 35px;
height: 35px;
border-radius: 50%;
color: #FFF;
}
.uofsc-social_list a:hover {
background-color: white;
}
.uofsc-social_list a:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0; left: 0;
border-radius: 50%;
-webkit-transform: scale(.8);
-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
transition: opacity 0.2s, -webkit-transform 0.2s;
transition: transform 0.2s, opacity 0.2s;
transition: transform 0.2s, opacity 0.2s, -webkit-transform 0.2s;
transform: scale(.8);
opacity: 0;
box-sizing: border-box;
border: 1px solid #FFF;
}
.uofsc-social_list a:hover:after {
-webkit-transform: scale(1.35);
transform: scale(1.35);
opacity: 1;
}
.uofsc-social_icon {
width: 100%;
height: 100%;
fill: #FFF;
}
.uofsc-social_list a:hover .icon {
fill: #73000a;
}
@media only screen and (min-width: 48em) {
.uofsc-social_list {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start; } }
.no-limits { display: none; }
.links a:link, .links a:visited { color:#FFF; }
.copyright a {
position: relative;
display: inline-block;
padding-right: 1em;
padding-left: 1em; }
.copyright .regional-link,
.copyright .system-link { display: none; }
.copyright a:first-child { padding: 0 5px; }
.copyright a:first-child:after {
display: none;
}
.copyright a:nth-child(2) { padding-left: 0; }
.copyright a:nth-child(9):after,
.copyright a:last-child:after {
display: none; }
.copyright a:after {
content: '';
position: absolute;
left: 100%;
top: 1px;
background-color: white;
width: 1px;
height: 80%; }
.site-info-wrapper {
background-color: #000;
padding: 10px 0;
border-top: 1px solid #FFF; }
.site-info {
position: relative;
z-index: 1; }
/***** Global Classes *****/
.img-left { float:left; margin:0 30px 30px 0; border:none; }
.img-right { float:right; margin:0 0 30px 30px; border:none; }
.clear { clear:both; }
.float-left { float:left; }
.float-right { float:right; }
.text-big { color:#a2bd30; font-weight:bold; line-height:26px; }
.text-left { text-align:left; }
.text-right { text-align:right; }
.text-center { text-align:center; }
.text-justify { text-align:justify; }
.normal { font-weight:normal; }
.bold { font-weight:bold; }
.italic { font-style:italic; }
.underline { border-bottom:1px solid; }
.highlight { background:#ffc; }
.paddingright { padding-right:10px; }
.nopadding { padding:0; }
.noindent { margin-left:0; padding-left:0; }
.nobullet { list-style:none; list-style-image:none; }
.block { display:block; }
.hidden { display:none; }
.visuallyhidden { border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto; }
.hide { display:none; }
/* Clean up on isle 6 ----------- */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix:before,
.clearfix:after,
.row:before,
.row:after { content:'\0020'; display:block; overflow:hidden; visibility:hidden; width:0; height:0; }
.row:after, .clearfix:after { clear:both; }
.row,
.clearfix { zoom:1; }