/*
Theme Name: storied2021
Theme URI: https://illinois.edu/
Author: University of Illinois
Author URI: https://illinois.edu/
Description: Discover the stories that move Illinois forward.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: storied2021
Tags:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/


/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/


* {
/* -moz-osx-font-smoothing: grayscale; */
/* -webkit-font-smoothing: antialiased; */
}

html {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}



*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
/*   -webkit-font-smoothing: antialiased; */
/*   -moz-osx-font-smoothing: grayscale; */
}





noscript {
	display: block;
width: 50%;
margin: 0 auto;
position: fixed;
z-index: 2147483647;
background: #ffffff;
padding: 30px;
box-shadow: 1px 1px 22px rgba(0, 0, 0, 0.5);
border: 2px solid #e84a27;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

noscript h4 {
	padding-left: 0px;
}

noscript p {
	margin-bottom: 0px;
}


/* Font smoothing for story content */

.entry-content *,
.entry-content *:before,
.entry-content *:after {
/*-webkit-font-smoothing: antialiased; */
/*-moz-osx-font-smoothing: grayscale; */
}

/* Hack to fix paragraph before content from WP 5.7 */
.entry-content p:empty, .entry-content p:empty:before {
    /* content: none; */
    /* display: none; */
}

.js noscript {
	display: none;
}

body {
	margin: 0;
		-webkit-transition: .5s ease all;
	transition: .5s ease all;
}



article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
	display: block;
}

audio,
canvas,
progress,
video {
	display: inline-block;
	vertical-align: baseline;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

[hidden],
template {
	display: none;
}

a {
	background-color: transparent;
}

a:active,
a:hover {
	outline: 0;
}

abbr[title] {
	border-bottom: 1px dotted;
}

b,
strong {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

mark {
	background: #ff0;
	color: #111111;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

img {
	border: 0;
	display: block;
}

svg:not(:root) {
	overflow: hidden;
}

figure {
	margin: 1em 40px;
}

hr {
	box-sizing: content-box;
	height: 0;
}

pre {
	overflow: auto;
}

code,
kbd,
pre,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
	color: inherit;
	font: inherit;
	margin: 0;
}

button {
	overflow: visible;
}

button,
select {
	text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}

button[disabled],
html input[disabled] {
	cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}



input {
	line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
}

legend {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
}

optgroup {
	font-weight: bold;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

td,
th {
	padding: 0;
}


/*--------------------------------------------------------------
# OneTrust Cookie Display
--------------------------------------------------------------*/

button#ot-sdk-btn {
font-family: 'Source Sans Variable', 'Source Sans', sans-serif;
background-color: #1E3877 !important;
color: #FFFFFF !important;
border: none !important;
align-items: flex-start;
text-align: center;
box-shadow: none;
margin-top: 1em;
text-transform: uppercase;
font-size: 0.7em !important;
letter-spacing: 0.05em;
}
button#ot-sdk-btn:focus, button#ot-sdk-btn:hover {
background-color: #FFFFFF !important;
color: #000000 !important;
}




/*--------------------------------------------------------------
# Block Editor Widths
--------------------------------------------------------------*/



/*
.site-content > *:not( .alignwide ):not( .alignfull ) {
max-width: 50%;
margin-left: auto;
margin-right: auto;
}
*/

.entry-content .alignwide {
max-width: 100%;  /* Setting this to 100vw causes the page to show horizontal scrollbars */
width: 900px;
margin: auto;
}


.entry-content .alignfull {
width: 100vw;
max-width: 100%; /* Setting this to 100vw causes the page to show horizontal scrollbars */
margin: 0 auto;
padding-left: 0px;
padding-right: 0px;
}


/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/

body {
margin: 0px;
padding: 0px;
position: relative;
}


body,
button,
input,
select,
textarea {
	font-family: montserrat, sans-serif;
	font-weight: 400;
	font-style: normal;
	/* -webkit-font-smoothing: antialiased; */
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 0 0 4.5em;
	border-left: 2px solid #e84a27;
}



address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	font-size: 15px;
	font-size: 0.9375rem;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}


/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/

html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	/* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	box-sizing: inherit;
}

body {
	background: #fff;
	/* Fallback for when there is no custom background color defined. */
}

blockquote::before,
blockquote::after,
q::before,
q::after {
	content: "";
}

blockquote,
q {
	quotes: "" "";
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
	margin-top: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li>ul,
li>ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: bold;
}

dd {
	margin: 0 1.5em 1.5em;
}

img {
	height: auto;
	/* Make sure images are scaled correctly. */
	max-width: 100%;
	/* Adhere to container width. */
}

figure {
	margin: 1em 0;
	/* Extra wide images within figure tags don't overflow the content area. */
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}


/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {

}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {

}



input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

select {
	border: 1px solid #ccc;
}



textarea {
	width: 100%;
}


/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/


/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/

a {
	color: #C84113;
	text-decoration: none;
}

a:visited {
	color: #C84113;
}

a:hover,
a:active {
	color: #C84113;
	text-decoration: underline;
}



a:hover,
a:active {
	outline: 0;
}


body.search-results article a, body.search-results article a:visited, body.search-results article a:hover, body.search-results article a:active, body.search-results .nav-previous a, body.search-results .nav-next a {
	color: #FF5F05;
}




/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/

.main-navigation {
	clear: both;
	display: block;
	float: left;
	width: 100%;
}



.main-navigation ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation li {
	float: left;
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}



.main-navigation ul ul li {}

.main-navigation li:hover>a,
.main-navigation li.focus>a {}

.main-navigation ul ul:hover>a,
.main-navigation ul ul .focus>a {}

.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {}

.main-navigation ul li:hover>ul,
.main-navigation ul li.focus>ul {
	left: auto;
}

.main-navigation ul ul li:hover>ul,
.main-navigation ul ul li.focus>ul {
	left: 100%;
}

.main-navigation .current_page_item>a,
.main-navigation .current-menu-item>a,
.main-navigation .current_page_ancestor>a,
.main-navigation .current-menu-ancestor>a {}


/* Small menu. */

.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

/* Remove Privacy Policy Link from Main Nav */
#primary-menu .menu-item, #primary-menu .menu-item.menu-item-2424 {
display: none;
}


@media screen and (min-width: 37.5em) {
	.menu-toggle {
		display: none;
	}
	.main-navigation ul {
		display: block;
	}
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
	margin: 0 0 1.5em;
	overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	float: left;
	width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	float: right;
	text-align: right;
	width: 50%;
}


/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/


/* Text meant only for screen readers. */

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}




/* Do not show the outline on the skip link target. */

#content[tabindex="-1"]:focus {
	outline: 0;
}


/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/

.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.alignnone {
	margin: 0 auto;
}


/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/

.clear::before,
.clear::after,
.entry-content::before,
.entry-content::after,
.comment-content::before,
.comment-content::after,
.site-header::before,
.site-header::after,
.site-content::before,
.site-content::after,
.site-footer::before,
.site-footer::after {
	content: "";
	display: table;
	table-layout: fixed;
}

.clear::after,
.entry-content::after,
.comment-content::after,
.site-header::after,
.site-content::after,
.site-footer::after {
	clear: both;
}

.clear {
	overflow: hidden;
	height: 0px;
	width: 100%;
	clear: both;
}


/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/

.widget {
	margin: 0 0 1.5em;
}


/* Make sure select elements fit in widgets. */

.widget select {
	max-width: 100%;
}


/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/

#site-wrapper {
position: relative;
width: 100%;
display: block;
}

#introhome {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1d58a7+50,885667+100 */
background: rgb(29,88,167); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(29,88,167,1) 50%, rgba(136,86,103,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  rgba(29,88,167,1) 50%,rgba(136,86,103,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  rgba(29,88,167,1) 50%,rgba(136,86,103,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d58a7', endColorstr='#885667',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
position: relative;
background-attachment: fixed;
}


#recentreads {
padding-top: 80px;
padding-bottom: 80px;
background: #F8FAFC;
border-top: 1px solid #E8E9EB;
border-bottom: 1px solid #E8E9EB;
position: relative;
}


h2.lineanimate {
margin: 0 auto;
margin-top: 0px;
margin-bottom: 16px;
padding-top: 0px;
padding-bottom: 0px;
line-height: 100%;
text-align: center;
font-family: georgiapro, serif;
font-weight: 700;
font-style: normal;
font-family: "open-sans-condensed", sans-serif;
letter-spacing: 0.02em;
text-transform: uppercase;
font-size: 4.5em;
font-weight: 400;
color: #13294B;
padding: 0px;
margin-left: 16px;
margin-right: 16px;
position: relative;
display: block;
}

h2.lineanimate:after {
content: "";
display: block;
position: relative;
background: #FF5F05;
height: 1px;
width: 0px;
padding: 0px;
text-align: center;
margin: 0 auto;
margin-top: 10px;
}
@keyframes animateline {
  from {width: 0px;}
  to {width: 200px;}
}
h2.lineanimate.animateline:after {
  animation-name: animateline;
  animation-duration: 2s;
animation-fill-mode: both;
}
#recentreads p.greycontext {
color: #a8a8a8;
width: 100%;
font-size: 0.8em;
font-weight: 500;
height: auto;
display: block;
position: relative;
margin-top: 16px;
margin-bottom: 20px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.1em;
}

#editorschoice {
padding-top: 80px;
padding-bottom: 30px;
position: relative;
background: #FFFFFF;
}
#editorschoice h2 {
color: #13294B;
}


/* Editor's Choice Formatting */

ul.griddisplay {
list-style: none;
padding: 0px;
margin: 0px;
display: block;
margin: 20px;
margin-left: auto;
margin-right: auto;
max-width: 1040px;
}

ul.griddisplay .alm-reveal {
list-style: none;
padding: 0px;
margin: 0px;
display: flex;
position: relative;
margin-left: auto;
margin-right: auto;
}
ul.griddisplay .alm-reveal li {
border: 1px solid #cccccc;
padding: 0px;
margin: 0px;
display: block;
position: relative;
transition: 0.5s border;
}

ul.griddisplay .alm-reveal li .textcontent {
padding: 15px 20px 28px 20px;
}
ul.griddisplay .alm-reveal li a, .griddisplay ul li a:visited, .griddisplay ul li a:active, .griddisplay ul li a:hover {
text-decoration: none;
display: block;
height: 100%;
position: relative;
color: #757575;
}
ul.griddisplay .alm-reveal li:hover {
border: 1px solid #333333;
}
ul.griddisplay .alm-reveal li h3 {
font-size: 1.5em;
font-family: georgiapro, serif;
font-weight: 600;
font-style: normal;
color: #000000;
margin: 0 auto;
padding: 0px;
margin-bottom: 0.3em;
line-height: 115%;
}
ul.griddisplay .alm-reveal li p {
font-family: georgiapro, serif;
font-weight: 500;
font-style: normal;
margin: 0 auto;
padding: 0px;
font-size: 0.9em;
letter-spacing: 0.02em;
}




ul.griddisplay .alm-reveal li .objectfill {
width: 100%;
height: auto;
padding-top: 80%;
overflow: hidden;
position: relative;
background: #333333;
}
ul.griddisplay .alm-reveal li img {
max-width: 100%;
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 50%;
left: 50%;
transition: all 0.5s;
transform: translate(-50%, -50%);
}
ul.griddisplay .alm-reveal li a:hover img {
transform: translate(-50%, -50%) scale(1.07);
}




.home p.maxwidth800 {
max-width: 100%;
width: 800px;
margin: 0 auto;
text-align: center;
line-height: 150%;
padding: 1em;
}

#recentreads p.buttoncontainer {
width: 100%;
text-align: center;
margin-top: 3em;
margin-bottom: 0px;
padding-bottom: 0px;
}

#recentreads a.button {
background: #1E3877;
border: none;
box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
font-size: 1.3em;
color: #FFFFFF;
font-weight: 500;
padding: 0em 1em 0em 1em;
width: 60%;
max-width: 450px;
border-radius: 4px;
cursor: pointer;
transition: all 0.5s;
text-decoration: none;
display: inline-block;
margin: 0 auto;
text-align: center;
position: relative;
}
.home a.button span {
padding: 0em 3em 0em 3em;
display: inline-block;
height: 48px;
line-height: 48px;
white-space: nowrap;
}
.home a.button span.material-icons.listicon {
border-left: 1px solid rgba(255,255,255,0.5);
padding: 0px 0.3em 0px 0.3em;
text-align: center;
display: table;
height: 100%;
vertical-align: middle;
height: 100%;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
#recentreads a.button:hover {
background: #13294B;
}



svg {
max-width: 100%;
}


#homeslidercontainer {
position: relative;
height: 100%;
width: 100%;
}
.homepause {
width: 34px;
height: 34px;
text-align: center;
position: absolute;
bottom: 23px;
right: 23px;
color: #000000;
z-index: 100;
border: none;
box-shadow: none;
font-size: 1em;
cursor: pointer;
transition: 0.5s all;
color: #FFFFFF;
padding: 0px;
margin: 0px;
background: rgba(0,0,0,0.5);
border-radius: 19px;
}
.homepause:hover {
color: #FF5F05;
}



#homeslidercontainer .material-icons {
line-height: normal;
text-align: center;
color: #FFFFFF;
}
#homeslidercontainer .material-icons {
width: 100%;
font-size: 20px;
}
#homeslidercontainer .material-icons.pause {
margin-top: 1px;
}
#homeslidercontainer.paused .homepause .material-icons {
transition: all 0.2s;
}
#homeslidercontainer.paused .material-icons.pause {
display: none;
}
.homepause .material-icons.play {
display: none;
}
#homeslidercontainer.paused .material-icons.play {
display: block;
}
#homeslidercontainer.paused .homepause .material-icons:hover {
color: #FF5F05;
}

/* ==== Slick CSS === */
.img-fill{
  width: 100%;
  display: block;
  overflow: hidden;
  position: relative;
  text-align: center;
}
.img-fill a.img-filla {
width: calc(100% - 160px);
left: 80px;
bottom: 0px;
height: calc(100% - 100px);
display: block;
overflow: hidden;
position: absolute;
z-index: 2;
text-align: center;
text-indent:-9999px;
font-size: 0;
line-height: 0;
}
.img-fill a.img-filla:focus {
outline: none;
}
.img-fill img {
  position: relative;
  display: block;
  max-width: none;
    max-height: none;
  object-fit: cover;
  object-position: center center;
width: 100%;
height: 100%;
}




.blocks-box,
.slick-slider {
  margin: 0;
  padding: 0!important;
}

.slick-slide {
  /* float: left */ /* If RTL Make This Right */ ;
  padding: 0;
}

/* ==== Slider Style === */
.home-slickslider .item .img-fill {
  height: calc(100vh);
  min-height: 450px;
  background:#000000;
}

.home-slickslider .item .img-fill .info {
position: absolute;
left: 0px;
text-align: center;
bottom: 0px;
margin: 0 auto;
padding-left: 20px;
margin-bottom: 70px;
padding-right: 20px;
z-index: 2;
transform: translateX(-50%);
left: 50%;
width: 100%;
}


.home-slickslider .item.slick-active .img-fill .info:after {
content: "";
width: 0px;
height: 1px;
background: #FFFFFF;
margin: 0 auto;
margin-top: 1em;
text-align: center;
position: relative;
display: block;
animation: growwidth 1s both 3s;
}

@keyframes growwidth {
	from {
	width: 0px;
	}
	to {
	width: 50px;
	}
}

.home-slickslider .item .img-fill .info a, .home-slickslider .item .img-fill .info a:hover, .home-slickslider .item .img-fill .info a:active, .home-slickslider .item .img-fill .info a:visited {
color: #FFFFFF;
text-decoration: none;
}


.home-slickslider .item .info > div{
  display:inline-block!important;
  vertical-align:middle;
}

.home-slickslider .NextArrow{
  position:absolute;
  top:50%;
  right:0px;
  width:45px;
  height:45px;
  background:rgba(0,0,0,0.5);
  border:0 none;
  text-align:center;
  color:#FFFFFF;
  z-index:55;
}



.home-slickslider .PrevArrow {
  position:absolute;
  top:50%;
  left:0px;
  width:45px;
  height:45px;
  background:rgba(0,0,0,0.5);
  border:0 none;
  color:#FFF;
  z-index: 55;
}



.home-slickslider .PrevArrow:hover, .home-slickslider .NextArrow:hover {
color: #FFFFFF;
}

.home-slickslider .slick-dots{
  position:absolute;
  height:3px;
  background: transparent;
  bottom:0px;
  width:100%;
  left:0px;
  padding:0px;
  margin:0px;
  list-style-type:none;
}
.home-slickslider .slick-dots li button{display:none;}
.home-slickslider .slick-dots li{
  float:left;
  width:0px;
  height:3px;
  position:absolute;
  left:0px;
  bottom:0px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#C84113+1,FF5F05+59 */
background: rgba(255,255,255,0.5); /* Old browsers */
}

/* Progress ring */


#homeslidercontainer .wrapper {
  display: none;
  pointer-events: none;
  z-index: 99;
width: 42px;
height: 42px;
position: absolute;
bottom: 18px;
right: 18px;
  clip: rect(0px, 40px, 40px, 20px); /* Hide half of the progress bar */
}

#homeslidercontainer.slideisactive .wrapper {
display: block;
}
#homeslidercontainer.paused .wrapper {
display: none;
}
/* Set the sizes of the elements that make up the progress bar */
#homeslidercontainer.slideisactive .circle {
  width: 40px;
  height: 40px;
  border: 2px solid #FFFFFF;
  border-radius: 20px;
  position: absolute;
  clip: rect(0px, 20px, 50px, 0px);
}
/* Using the data attributes for the animation selectors. */
/* Base settings for all animated elements */
#homeslidercontainer.slideisactive div[data-anim~=base] {
  animation-iteration-count: 1;  /* Only run once */
  animation-fill-mode: forwards; /* Hold the last keyframe */
  animation-timing-function:linear; /* Linear animation */
}

#homeslidercontainer.slideisactive .wrapper[data-anim~=wrapper] {
  animation-duration: 0.01s; /* Complete keyframes asap */
  animation-delay: 4s; /* Wait half of the animation */
  animation-name: close-wrapper; /* Keyframes name */
}

#homeslidercontainer.slideisactive .circle[data-anim~=left] {
  animation-duration: 8s; /* Full animation time */
  animation-name: left-spin;
}

#homeslidercontainer.slideisactive .circle[data-anim~=right] {
  animation-duration: 4s; /* Half animation time */
  animation-name: right-spin;
}
/* Rotate the right side of the progress bar from 0 to 180 degrees */
@keyframes right-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}
/* Rotate the left side of the progress bar from 0 to 360 degrees */
@keyframes left-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* Set the wrapper clip to auto, effectively removing the clip */
@keyframes close-wrapper {
  to {
    clip: rect(auto, auto, auto, auto);
  }
}


#homeslidercontainer.paused #homeslidercontainer.slideisactive div[data-anim~=base], #homeslidercontainer.paused #homeslidercontainer.slideisactive .wrapper[data-anim~=wrapper], #homeslidercontainer.paused #homeslidercontainer.slideisactive .circle[data-anim~=right], #homeslidercontainer.paused #homeslidercontainer.slideisactive .circle[data-anim~=left] {
  animation-play-state: paused;
  animation-name: none;
}










.home-slickslider .slick-dots li.slick-active{
  width:100%;
  animation: ProgressDots 8s linear both;
}


.home-slickslider .item h3 {
font-family: georgiapro, serif;
font-weight: 700;
font-style: normal;
  color:#FFFFFF;
  margin:0;
  padding:0;
  font-size: 3em;
  line-height: 100%;
  text-shadow: 1px 1px 8px rgba(0,0,0,0.5);
  margin-bottom: 0.3em;
  opacity: 0;
}

.home-slickslider .item h3:before {
content: "";
display: none;
margin: 0 auto;
width: fit-content;
max-width: 100%;
font-size: 0.25em;
color: #FFFFFF;
line-height: normal;
top: 0;
position: relative;
text-transform: uppercase;
border: 1px solid #FFFFFF;
padding: 0.2em 1em 0.2em 1em;
letter-spacing: 0.05em;
margin-bottom: 0.7em;
text-align: center;
box-shadow: 2px 2px 0px #FFFFFF;
background: rgba(0,0,0,0.5);
}
.home-slickslider .item h3.default:before {
content: "Latest";
display: table;
}
.home-slickslider .item h3.editorschoice:before {
content: "Editor's Choice";
display: table;
}
.home-slickslider .item h3.backlist:before {
content: "Backlist";
display: table;
}

.home-slickslider .item p {
font-family: georgiapro, serif;
font-weight: 500;
font-style: normal;
  color:#eeeeee;
  max-width:600px;
  overflow:hidden;
    text-shadow: 0px 0px 4px rgba(0,0,0,0.5);
    margin:0 auto;
  padding:0;
  opacity: 0;
  line-height: 138%;
  letter-spacing: 0.02em;
}




.home-slickslider .item.slick-active h3{
  animation: fadeInDown 1s both 2s;
}

.home-slickslider .item.slick-active p {
  animation: fadeInDown 1s both 2.5s;
}

.home-slickslider .item .img-fill img {
    transform:scale(1.1);
    transition: transform opacity 1s;
    -webkit-transition: -moz-transform opacity 1s;
	-moz-transition: -webkit-transform opacity 1s;
	opacity: 1;
 }
.home-slickslider .item.slick-active .img-fill img{
  animation: Slick-FastSwipeIn 8s both;
}

.home-slickslider .item.slick-active .img-fill img.vert, .home-slickslider .item .img-fill img.vert {
	display: none;
}





.home-slickslider .item .img-fill:before {
content: "";
display: block;
width: 100%;
height: 100%;
z-index: 1;
position: absolute;
bottom: 0px;
left: 0px;
pointer-events: none;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+12,000000+100&0+58,0.65+100 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 12%, rgba(0,0,0,0) 58%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 12%,rgba(0,0,0,0) 58%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 12%,rgba(0,0,0,0) 58%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}






.home-slickslider {background:#000;}

/* ==== Slider Image Transition === */
@keyframes Slick-FastSwipeIn{
    0%{
    opacity: 1;
    transform:scale(1);
    }
    50% {
    opacity: 0.9;
    }
    100%{
    opacity: 0.9;
    transform:scale(1.1);
    }
}


#homeslidercontainer.paused .home-slickslider .slick-dots li.slick-active, #homeslidercontainer.paused .home-slickslider .item.slick-active {
  animation-play-state: paused;
}


@-webkit-keyframes ProgressDots{from{width:0px;}to{width:100%;}}
@keyframes ProgressDots{from{width:0px;}to{width:100%;}}

/* ==== Slick Slider Css Ruls === */
.slick-slider{position:relative;display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:none}.slick-list.dragging{cursor:hand}
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.slick-track{position:relative;top:0;left:0;display:block}
.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}
.slick-loading .slick-track{visibility:hidden}
.slick-slide{display:none;float:left /* If RTL Make This Right */ ;height:100%;min-height:1px}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}
.slick-loading .slick-slide{visibility:hidden}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}



.slick-arrow {
cursor: pointer;
transition: 0.5s all;
}




.slick-arrow:hover {
background: #FF5F05;
}



/* Home About */

#storiedlockupintro {
width: 500px;
max-width: 70%;
height: auto;
position: relative;
overflow: visible;
max-width: 100%;
display: block;
padding-left: 40px;
padding-right: 40px;
text-align: center;
padding-top: 5em;
opacity: 0;
margin: 0 auto;
transition: opacity 0.3s;
}
.st077{
fill:none;
stroke:#FFFFFF;
stroke-width:0.5;
stroke-miterlimit:10;
}

#homeabout.col-container {
  display: flex; /* or inline-flex */
  align-self: flex-start;
  flex-direction: row;
  max-width: 90%;
  width: 1200px;
  margin: 0 auto;
}
#homeabout .col {
border-left: 1px solid #FFFFFF;
}
#homeabout .col:first-of-type {
border-left: none;
}

#homeabout {
color: #FFFFFF;
font-weight: 500;
padding-top: 6em;
padding-bottom: 7em;
}
#homeabout h2 {
margin-top: 0px;
padding-top: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
line-height: 100%;
text-align: right;
font-family: georgiapro, serif;
font-weight: 700;
font-style: normal;
font-family: "open-sans-condensed", sans-serif;
letter-spacing: 0.02em;
text-transform: uppercase;
font-size: 4.5em;
font-weight: 400;
color: #FFFFFF;
margin: 0 auto;
padding: 0px;
margin-left: 60px;
margin-right: 60px;
}
#homeabout .bolduppercase {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
border-bottom: 1px solid #FFFFFF;
margin-bottom: 1em;
padding-bottom: 0.5em;
font-size: 1.1em;
}
#homeabout p {
line-height: 150%;
margin: 0px 80px 0px 0px;
padding-left: 20px;
font-size: 0.9em;
line-height: 160%;
}








/* Nav Light Mode */

nav.primary-nav.whitegradientbg, nav.primary-nav.whitebg {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#FFFFFF+0,FFFFFF+100&0.55+0,0+100;White+to+Transparent */
background: -moz-linear-gradient(top,  rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0.55) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,0.55) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8cFFFFFF', endColorstr='#00FFFFFF',GradientType=0 ); /* IE6-9 */
}
nav.primary-nav.whitebg {
background: #FFFFFF;
box-shadow: 0px 0px 1px rgba(0,0,0,0.5);
}
nav.primary-nav.whitegradientbg, nav.primary-nav.whitegradientbg ul li.floatright a, nav.primary-nav.whitegradientbg #searchinputnav, nav.primary-nav.whitegradientbg #searchinputnav::placeholder, nav.primary-nav.whitebg, nav.primary-nav.whitebg ul li.floatright a, nav.primary-nav.whitebg #searchinputnav, nav.primary-nav.whitebg #searchinputnav::placeholder {
color: #13294B;
}
nav.primary-nav.whitegradientbg #searchiconnav .st0, nav.primary-nav.whitegradientbg #searchiconnavsubmit .st0, nav.primary-nav.whitegradientbg .solidfill, nav.primary-nav.whitebg #searchiconnav .st0, nav.primary-nav.whitebg #searchiconnavsubmit .st0, nav.primary-nav.whitebg .solidfill {
fill: #13294B;
}
nav.primary-nav.whitegradientbg #searchinputnav, nav.primary-nav.whitebg #searchinputnav {
border-bottom: 2px solid #13294B;
}
nav.primary-nav.whitegradientbg .nav-icon1 span, nav.primary-nav.whitebg .nav-icon1 span {
background: #13294B;
}

/* Default Nav color is WHITE */

nav.primary-nav, nav.primary-nav ul li.floatright a, nav.primary-nav #searchinputnav, nav.primary-nav #searchinputnav::placeholder, nav.primary-nav.bluebg, nav.primary-nav.bluebg ul li.floatright a, nav.primary-nav.bluebg #searchinputnav, nav.primary-nav.bluebg #searchinputnav::placeholder, nav.primary-nav.scrollbg, nav.primary-nav.scrollbg ul li.floatright a, nav.primary-nav.scrollbg #searchinputnav, nav.primary-nav.scrollbg #searchinputnav::placeholder {
color: #FFFFFF;
}

#searchinputnav::placeholder {
opacity: 1; /*Firefox */
}
nav.primary-nav #searchinputnav::-ms-input-placeholder, nav.primary-nav.bluebg #searchinputnav::-ms-input-placeholder, nav.primary-nav.scrollbg #searchinputnav::-ms-input-placeholder {
color: #FFFFFF;
}

label.textindent {
text-indent: -99999;
width: 0px;
overflow: hidden;
display: inline-block;
height: 0px;
}


nav.primary-nav #searchiconnav .st0, nav.primary-nav #searchiconnavsubmit .st0, nav.primary-nav.bluebg #searchiconnav .st0, nav.primary-nav.scrollbg #searchiconnav .st0, nav.primary-nav.bluebg #searchiconnavsubmit .st0, nav.primary-nav.scrollbg #searchiconnavsubmit .st0, nav.primary-nav .solidfill, nav.primary-nav.bluebg .solidfill, nav.primary-nav.scrollbg .solidfill {
fill: #FFFFFF;
}
nav.primary-nav #searchinputnav, nav.primary-nav.bluebg #searchinputnav, nav.primary-nav.scrollbg #searchinputnav {
border-bottom: 2px solid #FFFFFF;
}
nav.primary-nav .nav-icon1 span, nav.primary-nav.bluebg .nav-icon1 span, nav.primary-nav.scrollbg .nav-icon1 span {
background: #FFFFFF;
}


/* Nav Transparent BG */

nav.primary-nav.transparentbg {
background: none;
}

/* Nav Blue BG */

nav.primary-nav.bluebg, nav.primary-nav.scrollbg {
background: #13294B;
box-shadow: 0px 0px 1px rgba(0,0,0,0.5);
}



/* Hover */

nav.primary-nav ul li.floatright a:hover, nav.primary-nav #searchiconnav:hover {
color: #FF5F05;
transform: translateY(6%);
}
nav.primary-nav #searchiconnav:hover .st0, nav.primary-nav #searchiconnavsubmit:hover .st0 {
fill:#FF5F05;
}
nav.primary-nav .sidenav-trigger:hover .nav-icon1 span {
background: #FF5F05;
transform: translateY(40%);
}



/* Primary Nav */

nav.primary-nav {
font-family: montserrat, sans-serif;
font-weight: 700;
font-style: normal;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.38+0,0+100;Neutral+Density */
background: -moz-linear-gradient(top,  rgba(0,0,0,0.38) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.38) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0.38) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#61000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
width: 100%;
display: block;
position: absolute;
z-index: 100;
z-index: 200;
}

.orangefill {
fill:#FF5F05;
}



nav.primary-nav.fixed {
position: fixed;
top: 0px;
transition: top 0.3s ease-in-out, background 0.3s ease-in-out;
}


nav.primary-nav.fixed.nav-up {
  top: -95px;
}




nav.primary-nav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
nav.primary-nav ul li:nth-of-type(2) {
float: right;
}
nav.primary-nav ul li ul {
list-style-type: none;
margin: 0px;
padding: 0px;
position: relative;
}
nav.primary-nav ul li.floatright, nav.primary-nav ul li#mainlogo {
list-style: none;
display: inline-block;
float: left;
position: relative;
}
nav.primary-nav ul li#mainlogo {
float: none;
left: 30px;
top: 29px;
transition: all 0.3s;
}
nav.primary-nav ul li#mainlogo a {
display: inline-block;
}

#storiedlogolink {
margin-left: 22px;
}
nav.primary-nav ul li#mainlogo:hover {
transform: translateY(6%);
}
nav.primary-nav, nav.primary-nav ul li.floatright {
height: 94px;
overflow:hidden;
}

nav.primary-nav ul li.floatright {
display: none;
transition: 0.5s all;
opacity: 0;
}
nav.primary-nav.scrollbg ul li.floatright {
display: block;
transition: 0.5s all;
opacity: 1;
}
nav.primary-nav ul li.floatright.alwaysshow {
display: block;
opacity: 1;
}

nav.primary-nav ul li.floatright a {
margin-top: 40px;
display: block;
margin-left; 35px;
margin-right: 35px;
white-space: nowrap;
overflow:hidden;
text-transform: uppercase;
letter-spacing: 0.1em;
text-decoration: none;
transition: 0.5s all;
font-size: 0.8em;
}





nav.primary-nav ul li.floatright.last a {
margin-right: 40px;
}
nav.primary-nav ul li.floatright.search {
margin-right: 35px;
}
nav.primary-nav ul li.floatright.search form {
margin-top: 24px;
}
form#searchform input[type="submit"] {
display: none;
}
#searchiconnav, #searchiconnavsubmit {
display: inline-block;
max-width: 100%;
width: 24px;
height: auto;
margin-top: 12px;
cursor: pointer;
transition: 0.5s all;
}
#searchiconnav .st0, #searchiconnavsubmit .st0 {
transition: 0.5s all;
}




#searchinputnav {
margin-top: -12px;
margin-right: 5px;
background: transparent;
border-radius: 0px;
border: none;
float: left;
margin-top: 5px;
display: none;
font-size: 1.2em;
max-width: 100%;
width: 180px;
outline: 0;
-webkit-appearance: none;
}









#searchinputnav:focus {
outline: none;
}

#searchiconnavsubmit {
display: none;
}

nav.primary-nav ul li.floatright a img {
display: block;
max-width: 100%;
width: 24px;
}

#clicklayer {
display: none;
width: 100%;
height: 30vh;
position: fixed;
z-index: 99;
}
.searchopen #clicklayer {
display: block;
}





/* Hamburger Menu */



/* Icon 1 */

.nav-icon1 {
  width: 24px;
  height: 24px;
  margin: 0 auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
position: relative;
margin-top: -3px;
}


.nav-icon1 span {
  display: block;
  position: absolute;
  height: 5px;
  width: 100%;
  border-radius: 0px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}




.nav-icon1 span:nth-child(1) {
  top: 4px;
}



.nav-icon1 span:nth-child(2) {
  top: 14px;
}

.sidenav-open .sidenav .nav-icon1 span:nth-child(1) {
  top: 10px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
.sidenav-open .sidenav .nav-icon1 span:nth-child(2) {
  top: 10px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.modal .nav-icon1 span:nth-child(1) {
  top: 10px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
.modal .nav-icon1 span:nth-child(2) {
  top: 10px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}



.sidenav {
position: fixed;
width: auto; /* I changed this to auto from 300px so that the menu takes the width of the content within it */
right: 0;
top: 0;
margin: 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
height: 100%;
/* height: calc(100% + 60px); I don't know why the extra 60px */
/* height: -moz-calc(100%); */
/* padding-bottom: 60px;  I don't know why the 60px */
background-color: #FFFFFF;
z-index: 999;
overflow-y: auto;
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateX(105%); /* I don't know why 105, versus 100 */
transform: translateX(105%); /* I don't know why 105, versus 100 */
list-style-type: none; /* Added */
padding-left: 80px; /* Added */
padding-right: 150px; /* Added */
overflow-x: hidden;
}

.sidenav li {
float: none; /* I actually don't know why this is necessary */
line-height: normal;
list-style-type: none;
position: relative;
}


.sidenav li {
opacity: 0;
}
.sidenav-open .sidenav li {
  animation-name: navslidein;
  animation-duration: 0.7s;
  animation-delay: 0.1s;
  animation-fill-mode: forwards;
}
.sidenav li#closecont {
z-index: 3;
}

.sidenav-open .sidenav li:nth-of-type(2) {
  animation-delay: 0.2s;
}
.sidenav-open .sidenav li:nth-of-type(3) {
  animation-delay: 0.3s;
}
.sidenav-open .sidenav li:nth-of-type(4) {
  animation-delay: 0.4s;
}
.sidenav-open .sidenav li:nth-of-type(5) {
  animation-delay: 0.5s;
}
.sidenav-open .sidenav li:nth-of-type(6) {
  animation-delay: 0.6s;
}
.sidenav-open .sidenav li:nth-of-type(7) {
  animation-delay: 0.7s;
}
.sidenav-open .sidenav li:nth-of-type(8) {
  animation-delay: 0.8s;
}
.sidenav-open .sidenav li:nth-of-type(9) {
  animation-delay: 0.9s;
}
.sidenav-open .sidenav li:nth-of-type(10) {
  animation-delay: 1s;
}



@keyframes navslidein {
  0% {
	opacity: 0;
	transform: translateX(50px);
  }
  10% {
	opacity: 0;
	transform: translateX(50px);
  }
  100% {
	opacity: 1;
	transform: translateX(0%);
  }
}

.sidenav li a {
font-family: georgiapro, serif;
font-weight: 400;
font-style: normal;
color: #13294B;
display: inline-block;
font-size: 3em;
font-weight: 500;
height: auto;
line-height: normal;
padding: 5px 30px 5px 30px; /* I changed this */
text-decoration: none;
transition: 0.5s all;
white-space: nowrap; /* Added to prevent word wrap */
overflow: hidden;
}

.sidenav li a.sidenav-close {
padding: 0px;
white-space: normal;
font-size: initial;
}

.sidenav li ul li a {
font-family: georgiapro, serif;
font-weight: 500;
font-style: normal;
color: #13294B;
display: block;
font-size: 1.1em;
font-weight: 500;
height: auto;
line-height: normal;
padding: 5px 30px 5px 30px; /* JMB edit I changed this */
text-decoration: none;
transition: 0.5s all;
position: relative;
white-space: nowrap; /* Added to prevent word wrap */
overflow: hidden;
}
.sidenav li ul li a:hover::before {
content: "\2192";
display: block;
position: absolute;
left: 0px;
}

.sidenav li:nth-of-type(2) {
padding-top: 5em; /*adds space above larger links */
}
.sidenav li ul li:nth-of-type(2) {
padding-top: 0px;
}

.sidenav li.secondarylink a {
margin-left: 2px;
font-family: montserrat, sans-serif;
font-weight: 600;
font-style: normal;
color: #13294B;
display: inline-block;
font-size: 0.8em;
height: auto;
line-height: normal;
padding: 8px 30px 8px 30px;
text-decoration: none;
transition: 0.5s all;
text-transform: uppercase;
letter-spacing: 0.1em;
white-space: nowrap; /* Added to prevent word wrap */
}
.sidenav li.secondarylink.paddingabove {
padding-top: 2em; /*adds space between larger links and smaller ones */
}
.sidenav li.secondarylink:last-of-type {
padding-bottom: 6em; /*adds space between larger links and smaller ones */
}

.sidenav li a:hover {
color: #C84113;
}


.sidenav-close {
position: absolute;
left: auto;
right: -110px;
top: 40px;
z-index: 1000;
overflow: hidden;
}
.sidenav-close .nav-icon1 {
margin-left: 0px;
position: relative;
margin-top: 0px;
}
.sidenav-close .nav-icon1 span {
background: #13294B;
}
.sidenav-trigger:focus, .sidenav-close:focus {

}

.sidenav-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
opacity: 0;
height: 120vh; /* I don't know why this is set to 120vh versus 100vh */
background-color: rgba(0, 0, 0, 0.5);
z-index: 997;
display: none;
cursor: e-resize;
}
.sidenav-overlay:hover {
cursor: e-resize;
}

.sidenav .sub-menu {
  display: block;
  margin-bottom: 20px;
  margin-top: 10px;
  width: 100%;
}
.sidenav li.expandmenu .sub-menu {
display: none;
}
.sidenav li>ul {
margin-left: 0px;
}

.drag-target {
height: 100%;
width: 10px;
position: fixed;
top: 0;
z-index: 998;
}


.arrowrotate {
    -moz-transition: transform .2s linear;
    -webkit-transition: transform .2s linear;
    transition: transform .2s linear;
    font-size: 0.8em;
transform: translate(-0.15em, 0.1em);
}
.arrowrotate.down {
    -moz-transform:rotate(-180deg) translate(-0.15em, -0.1em);
    -webkit-transform:rotate(-180deg) translate(0.15em, -0.1em);
    transform:rotate(-180deg) translate(0.15em, -0.1em);
}

/* Sidenav Search */


.searchtriggersidenav {
padding-left: 30px;
margin-bottom: 12px;
margin-top: 35px;
}

#searchinputnavsidenav {
margin-top: -12px;
margin-right: 5px;
margin-left: 0px;
background: transparent;
border-radius: 0px;
border: none;
float: left;
margin-top: 5px;
font-size: 1.2em;
max-width: 100%;
width: 160px;
color: #13294B;
border-bottom: 2px solid #13294B;
outline: 0;
-webkit-appearance: none;
}
#searchsubmithiddensidenav {
display: none;
}
#searchiconnavsubmitsidenav {
display: inline-block;
max-width: 100%;
width: 24px;
height: auto;
margin-top: 12px;
cursor: pointer;
transition: 0.5s all;
}
#searchsubmitpathsidenav {
fill: #13294B;
transition: 0.5s all;
}
#searchiconnavsubmitsidenav:hover #searchsubmitpathsidenav {
fill: #FF5F05;
}








/* Modals */



/* 24dp elevation */
.z-depth-5, .modal {
  -webkit-box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
          box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
}

.modal {
  display: none;
  position: fixed;
  left: 0px;
  right: 0px;
  background-color: #333;
  padding: 0;
  width: 850px;
  height: 560px;
  max-width: 80vw;
  max-height: 70%;
  margin: auto;
  overflow-y: auto;
  border-radius: 2px;
  will-change: top, opacity;
  border: 1px solid rgba(255,255,255,0.2);
}

.modal:focus {
  outline: none;
}

.modal-close {
position: absolute;
left: auto;
right: 32px;
top: 8px;
z-index: 1000;
overflow: hidden;
}
.link {
z-index: initial;
top: auto;
right: auto;
position: relative;
}
.modal-close .nav-icon1 {
margin-left: 0px;
margin-top: 0px;
}
.modal-close .nav-icon1 span {
background: #FFFFFF;
}


.modal .nav-icon1 {
left: auto;
top: auto;
}
.modal .nav-icon1 span {
height: 3px;
}




/* Modal overrides */

.modal {
font-family: montserrat, sans-serif;
font-weight: 500;
font-style: normal;
color: #13294B;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
border-radius: 0px;
max-width: 100%;
width: 100%;
background-color: transparent;
height: 100%;
max-height: 100%;
overflow-y: hidden;
}
.modal-content {
background: none;
margin: 0 auto;
height: 100%;
overflow-y: hidden;
}
.modal-open .modal, .modal-open .modal-content {
overflow-y: auto;
}
.modal-content .column {
height: 100%;
}
.modal-content .column a.subscribebutton {
background: #C84113;
border: none;
box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
font-size: 1.2em;
color: #FFFFFF;
font-weight: 500;
padding: 0.5em;
width: 80%;
border-radius: 4px;
cursor: pointer;
transition: all 0.5s;
text-decoration: none;
display: block;
margin: 0 auto;
text-align: center;
}
.modal-content .column a.subscribebutton:hover {
background: #FFFFFF;
color: #C84113;
}
#storiedlogosub, #storiedlogosubblue {
width: 250px;
max-width: 100%;
height: auto;
margin: 0 auto;
margin-bottom: 2em;
}
#storiedlogosubblue {
display: none;
}
.modal-content h1 {
font-family: georgiapro, serif;
font-weight: 700;
font-style: normal;
line-height: 110%;
font-size: 2.5em;
margin-bottom: 10px;
padding-bottom: 0px;
}
.modal-content p:first-of-type {
margin-bottom: 1em;
}
.modal-content p {
font-size: 1.2em;
padding-top: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
.modal-content a.nothx, .modal-content a.nothx:hover, .modal-content a.nothx:active, .modal-content a.nothx:visited {
color: #13294B;
font-size: 0.8em;
margin-top: 1em;
display: block;
}
#subscriptionmodal {
position: relative;
max-width: 80%;
width: 850px;
background: #FFFFFF url('https://storied.illinois.edu/wp-content/uploads/subscribebg.jpg') bottom center no-repeat;
background-size: cover;
margin: 0 auto;
margin-top: 10%;
margin-bottom: 7%;
border: 1px solid #cccccc;
box-shadow: 1px 1px 12px rgba(0,0,0,0.4);
}

#videomodal {
position: relative;
max-width: 80%;
width: 850px;
background: #000000;
margin: 0 auto;
margin-top: 10%;
margin-bottom: 7%;
border: 1px solid #cccccc;
}

.modal .columncontainer {
position: relative;
width: 100%;
max-width: 100%;
height: 100%;
overflow: hidden;
}


.modal .column:nth-of-type(1) {
max-width: 100%;
width: 50%;
height: 100%;
overflow: hidden;
margin: 0 auto;
top: 0;
right: 0;
position: absolute;
z-index: 0;
}
.modal .column:nth-of-type(2) {
max-width: 100%;
width: 50%;
text-align: center;
padding: 5em 50px 5em 50px;
position: relative;
z-index: 1;
}

.modal .column:nth-of-type(1) img {
width: 100%;
max-width: 100%;
position: absolute;
bottom: 0px;
}


/* Ad Spot */

#illinoisad #flexcontent {
padding: 30px;
width: 100%;
height: 100%;
display: table;
}
#illinoisad .verticalmid {
display: table-cell;
vertical-align: middle;
text-align: center;
color: #FFFFFF;
font-weight: 500;
}

#illinoisad p.balboa {
font-weight: 700;
font-style: normal;
font-family: "open-sans-condensed", sans-serif;
letter-spacing: 0.04em;
text-transform: uppercase;
font-size: 4em;
line-height: 100%;
margin-bottom: 0px;
padding-bottom: 0px;
margin-top: 0.1em;
padding-top: 0px;
}
#illinoisad hr.orangeline {
width: 100px;
border: 2px solid #FF5F05;
background: none;
color: transparent;
}
#illinoisad a.buttonwhiteoutline, #illinoisad a.inlineblockad {
float: left;
display: inline-block;
}
#illinoisad a.buttonwhiteoutline, #illinoisad a.buttonwhiteoutline:visited, #illinoisad a.buttonwhiteoutline:active, #illinoisad a.buttonwhiteoutline:hover {
white-space: nowrap;
color: #FFFFFF;
padding: 0.5em 2.3em 0.5em 2.3em;
font-size: 1.2em;
text-decoration: none;
border: 1px solid #FFFFFF;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: 15px;
margin-right: 15px;
transition: all 0.5s;
font-weight: 600;

}
#illinoisad a.inlineblockad {
margin-left: 15px;
margin-right: 15px;
margin-top: 0.7em;
margin-bottom: 0.5em;
}

#illinoisad a.buttonwhiteoutline:hover {
background: #C84113;
}
#illinoisad #withillinoislogoad {
max-width: 100%;
width: 170px;
display: block;
margin: 0 auto;
}
#illinoisad p.nomarginpadding {
margin: 0 auto;
padding: 0px;
position: relative;
display: table;
width: auto;
height: auto;
text-align: center;
}

#illinoisad .flex-item-left iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
}



#illinoisad .illinoisadinner {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
position: relative;
}

#illinoisad .flex-item-left {
  flex: 36%;
  position: relative;
  background: #000000;
}

#illinoisad .flex-item-right {
  flex: 64%;
  position: relative;

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1d58a7+0,1e3877+44,13294b+100 */
background: #1d58a7; /* Old browsers */
background: -moz-linear-gradient(45deg,  #1d58a7 0%, #1e3877 44%, #13294b 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  #1d58a7 0%,#1e3877 44%,#13294b 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  #1d58a7 0%,#1e3877 44%,#13294b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d58a7', endColorstr='#13294b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */


}


#illinoisad {
max-width: 1400px;
margin: 0 auto;
position: relative;
margin-top: 3em;
margin-bottom: 3em;
}

#illinoisad:after {
Content: "Promotional";
display: block;
margin-top: 1em;
font-size: 0.8em;
color: #999999;
text-align: center;
padding-left: 10px;
padding-right: 10px;
}






#illinoisad #iframecontainer {
cursor: auto;
width: 100%;
height: 100%;
position: relative;
text-align: center;
display: block;
padding-top: 55%;
}

#illinoisad #iframecontainer iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
#illinoisad a.playoverlay  {
cursor: pointer;
display: block;
height: 100%;
width: 100%;
position: absolute;
overflow: hidden;
padding-top: 0px;
top: 0px;
left: 0px;
}
#illinoisad a.playoverlay:visited {
color: #FFFFFF;
text-decoration: none;
}
#illinoisad a.playoverlay video {
max-width: 100%;
width: 100%;
height: 100%;
position: absolute;
margin-bottom: 0px;
padding-bottom: 0px;
object-fit: cover;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#illinoisad .circleplay {
color: #FFFFFF;
border-radius: 35px;
width: 70px;
height: 70px;
display: block;
border: 3px solid #FFFFFF;
text-align: center;
overflow: hidden;
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#illinoisad .circleplay span {
display: block;
width: 100%;
height: auto;
font-size: 3.5em;
top: 50%;
transform: translateY(-50%);
position: absolute;
line-height: 100%;
}




/* SUBSCRIPTION POPUP */







.modal h1, .modal h2, .modal h3, .modal h3 {
  margin-top: 0;
}

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

.modal .modal-close {
  cursor: pointer;
  right: 6px;
}

.modal .modal-footer {
  border-radius: 0 0 2px 2px;
  background-color: #fafafa;
  padding: 4px 6px;
  height: 56px;
  width: 100%;
  text-align: right;
}

.modal .modal-footer .btn, .modal .modal-footer .btn-large, .modal .modal-footer .btn-small, .modal .modal-footer .btn-flat {
  margin: 6px 0;
}

.modal-overlay {
  position: fixed;
  z-index: 999;
  top: -25%;
  left: 0;
  bottom: 0;
  right: 0;
  height: 125%;
  width: 100%;
  background: #000;
  display: none;
  will-change: opacity;
}

.modal.modal-fixed-footer {
  padding: 0;
  height: 70%;
}

.modal.modal-fixed-footer .modal-content {
  position: absolute;
  height: calc(100% - 56px);
  max-height: 100%;
  width: 100%;
  overflow-y: auto;
}

.modal.modal-fixed-footer .modal-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  position: absolute;
  bottom: 0;
}

.modal.bottom-sheet {
  top: auto;
  bottom: -100%;
  margin: 0;
  width: 100%;
  max-height: 45%;
  border-radius: 0;
  will-change: bottom, opacity;
}



/* Home Tiles */

ul#tilecontainer {
padding: 2px;
width: 100%;
list-style: none;
position: relative;
color: #FFFFFF;
margin: 0 auto;
}
ul#tilecontainer:after {
  content: "";
  clear: both;
  display: table;
  position: relative;
}

#tilecontainer li {
float: left;
display: block;
position: relative;
opacity: 1;
visibility: visible;
padding: 2px;
top: 0px;
}
#tilecontainer li.topanimate {
top: 100px;
}

#tilecontainer li.scrolled {
}

a.tileinner {
position: relative;

background: #000000;
overflow: hidden;
display: block;
text-decoration: none;
color: #FFFFFF;
position: relative;
}
a.tileinner:hover {
cursor: pointer;
}




.tileinner img {
position: relative;
display: block;
max-width: none;
max-height: none;
object-fit: cover;
object-position: center center;
width: 100%;
height: 100%;
opacity: 0.94;
transition: all 0.4s;
}

#related {
margin-bottom: 1px;
}
#relatedstories .tileinner {
margin: 2px;
}

#relatedstories .slick-slide .tileinner img {
height: 500px;
object-position: center 20%;
opacity: 0.5;
}
#relatedstories .tileinner h4 {
text-align: left;
font-size: 2.5em;
text-transform: none;
letter-spacing: 0px;
max-width: none;
margin-bottom: 10px;
font-weight: 600;
padding-top: 0.3em;
line-height: 95%;
}
#relatedstories .tileinner .textcontent .dateinfo {
text-align: left;
max-width: none;
width: 100%;
padding-left: 30px;
padding-right: 30px;
margin-left: 3px;
}
#relatedstories .slick-slide .tileinner .textcontent {
opacity: 0;
transition: opacity 0.5s 0.5s;
}
#relatedstories .slick-slide.slick-active .tileinner .textcontent, #relatedstories .slick-slide.slick-active .tileinner img {
opacity: 1;
}



#relatedstories .tileinner .textcontent {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.54+100 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.54) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.54) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.54) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#8a000000',GradientType=0 ); /* IE6-9 */
}

#relatedstories .slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}

#relatedtitle {
border-top: 2px solid #000000;
padding-top: 1em;
max-width: 96%;
margin: 0 auto;
margin-bottom: 1.5em;
font-weight: 600;
font-size: 1.4em;
margin-top: 2em;
padding-left: 50px;
padding-right: 50px;
}


#relatedstories .NextArrow{
  position:absolute;
  top:50%;
  right:0px;
  width:45px;
  height:45px;
  background:rgba(0,0,0,0.5);
  border:0 none;
  text-align:center;
  color:#FFFFFF;
  z-index:55;
  height: calc(100% - 4px);
	top: 2px;
}



#relatedstories .PrevArrow {
  position:absolute;
  top:50%;
  left:0px;
  width:45px;
  height:45px;
  background:rgba(0,0,0,0.5);
  border:0 none;
  color:#FFF;
  z-index: 55;
  height: calc(100% - 4px);
  top: 2px;
}



#relatedstories .PrevArrow:hover, #relatedstories .NextArrow:hover {
color: #000000;
background: rgba(255,255,255,0.8);
}

#relatedstories .slick-slide {
	width: 900px;
}


#site-canvas.black #relatedtitle {
border-top: 2px solid #FFFFFF;
}

.tileinner img.vert {
display: none;
}

a.tileinner:hover img {
transform: scale(1.07);
}



#tilecontainer li {
width: 50%;
}
#tilecontainer li:nth-child(5n) {
width: 100%;
}
#tilecontainer li:nth-child(3), #tilecontainer li:nth-child(4), #tilecontainer li:nth-child(7), #tilecontainer li:nth-child(9) {
float: right;
}


#tilecontainer li .tileinner {
height: 27.75vw;
min-height: 400px;
}
#tilecontainer li:nth-child(5n) .tileinner {
height: 41.48vw;
min-height: 400px;
}

#tilecontainer li:nth-child(1) .tileinner, #tilecontainer li:nth-child(3) .tileinner, #tilecontainer li:nth-child(7) .tileinner, #tilecontainer li:nth-child(8) .tileinner {
height: calc(55.5vw + 4px);
min-height: 400px;
}
#tilecontainer li:nth-child(1) .tileinner img, #tilecontainer li:nth-child(3) .tileinner img, #tilecontainer li:nth-child(7) .tileinner img, #tilecontainer li:nth-child(8) .tileinner img {
display: none;
}
#tilecontainer li:nth-child(1) .tileinner img.vert, #tilecontainer li:nth-child(3) .tileinner img.vert, #tilecontainer li:nth-child(7) .tileinner img.vert, #tilecontainer li:nth-child(8) .tileinner img.vert {
display: block;
}


.tileinner .textcontent {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 150px 30px 50px 30px;
z-index: 2;
line-height: 140%;
font-size: 1em;
text-align: center;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.82+83 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.82) 83%, rgba(0,0,0,0.82) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.82) 83%,rgba(0,0,0,0.82) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.82) 83%,rgba(0,0,0,0.82) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#d1000000',GradientType=0 ); /* IE6-9 */
}

.tileinner .textcontent h3 {
font-family: georgiapro, serif;
font-weight: 600;
font-style: normal;
color: #FFFFFF;
margin: 0;
padding: 0;
font-size: 2.5em;
line-height: 115%;
margin: 0 auto;
margin-bottom: 0.3em;
max-width: 90%;
width: 500px;
text-shadow: 1px 1px 12px rgba(0,0,0,0.5);
}
.tileinner .textcontent p {
font-weight: 500;
font-style: normal;
font-size: 0.92em;
max-width: 80%;
width: 500px;
margin: 0 auto;
margin-bottom: 0px;
padding-bottom: 0px;
color: #eeeeee;
text-shadow: 1px 1px 12px rgba(0,0,0,0.5);
letter-spacing: 0.02em;
font-family: georgiapro, serif;
}

/* Loader */

html #site-canvas, html header, html nav {
visibility: hidden;
}
.alm-btn-wrap {
visibility: hidden !important;
}
html.loadingcomplete .alm-btn-wrap {
visibility: visible !important;
}
html.loadingcomplete #site-canvas, html.loadingcomplete header, html.loadingcomplete nav {
visibility: visible;
}
.loading body {
overflow: hidden;
height: 100%;
pointer-events: none;
}
#loader {
position: fixed;
display: none;
height: 100%;
width: 100%;
pointer-events: none;
z-index: 2147483647;
transition: all 1s;
background: #13294B;
}
.loading #loader {
display: block;
animation: wipeleft 1s 2.5s forwards;
}


#loader #svgwipe {
width: 100%;
height: 100%;
position: absolute;
right: 0px;
top: 0px;
z-index: 2;
animation: wipeleft 3s 0s forwards;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#13294b+0,13294b+98&0+0,1+16 */
background: -moz-linear-gradient(left,  rgba(19,41,75,0) 0%, rgba(19,41,75,1) 16%, rgba(19,41,75,1) 98%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(19,41,75,0) 0%,rgba(19,41,75,1) 16%,rgba(19,41,75,1) 98%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(19,41,75,0) 0%,rgba(19,41,75,1) 16%,rgba(19,41,75,1) 98%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0013294b', endColorstr='#13294b',GradientType=1 ); /* IE6-9 */

}
#loader .svgcontainer {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#loader .svgdiv {
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
position: absolute;
transition: all 0.5s;
white-space: nowrap;
max-width: 450px;
width: 40%;
overflow: hidden;
}
#loader .svgdiv svg:nth-of-type(1) {
width: 12%;
height: auto;
max-width: 100%;
}
#loader .svgdiv svg:nth-of-type(2) {
width: 86%;
height: auto;
padding-left: 10%;
max-width: 100%;
}
#loader .fillwhite {
fill: #FFFFFF;
}

.loaderfaster {
     width: 100%;
     height: 100%;
     position: fixed;
     z-index: 2147483647;
     display: none;
     background: #ffffff;
}
 .spinner {
     border: 5px solid #f3f3f3;
    /* Light grey */
     border-top: 5px solid #FF5F05;
    /* Blue */
     border-radius: 50%;
     width: 60px;
     height: 60px;
     animation: spin 1s linear infinite;
     left: calc(50% - 30px);
     top: calc(50% - 30px);
     position: absolute;
}
 html.loadingfast .loaderfaster {
     display: block;
}



.lds-ellipsis {
display: block;
position: absolute;
width: 80px;
top: 50%;
left: 50%;
height: 80px;
margin: 0 auto;
transform: translate(-50%,-50%);
}
.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #FF5F05;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}





 @keyframes spin {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 @-webkit-keyframes spin {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 @-moz-keyframes spin {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}


@keyframes wiperight {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(100%); }
}

@keyframes wipeleft {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(100%); }
}



/* Site Footer */

footer {
background: #13294B;
position: relative;
}
footer #subscribebox {
background: #FFFFFF;
border-top: 1px solid #CCCCCC;
padding: 50px 20px;
text-align: center;
position: relative;
}
footer #subscribebox p {
font-weight: 500;
color: #7f7f7f;
margin-top: 0px;
margin-bottom: 0px;
}
footer #subscribebox p.bold {
font-family: georgiapro, serif;
font-weight: 700;
font-style: normal;
line-height: 110%;
font-size: 1.8em;
margin-top: 0px;
margin-bottom: 10px;
color: #13294B;
}
footer #subscribebox a.signupbutton {
background: #1E3877;
border: none;
box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
font-size: 1.2em;
color: #FFFFFF;
font-weight: 500;
padding: 0.5em 2em 0.5em 2em;
width: auto;
border-radius: 4px;
cursor: pointer;
transition: all 0.5s;
text-decoration: none;
display: inline-block;
margin: 0 auto;
text-align: center;
margin-top: 20px;
margin-bottom: 8px;
}
footer #subscribebox a.signupbutton:hover {
background: #13294B;
}
footer .menu-footer-links-container {
-webkit-box-pack: center;
display: flex;
justify-content: center;
}
footer ul#footer-menu {
margin-block-start: 0px;
margin-block-end: 0px;
padding: 30px;
list-style: none;
grid-template-columns: auto auto auto auto;
row-gap: 10px;
column-gap: 80px;
display: inline-grid;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 30px;
margin-right: 30px;
}
footer ul#footer-menu li, footer ul#footer-menu li a {
color: #FFFFFF;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.01em;
font-size: 0.9em;
text-decoration: none;
}
footer ul#footer-menu li a:hover {
text-decoration: underline;
}
footer ul#footer-socialmenu li a {
display: block;
overflow: hidden;
margin-top: 6px;
}

footer #copyrightnotice {
margin: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-top: 0px;
margin-top: 22px;
margin-bottom: 15px;
color: #FFFFFF;
text-align: left;
font-size: 0.7em;
margin-left: 20px;
margin-right: 20px;
display: block;
}
footer .fillwhite {
fill: #FFFFFF;
}

/* Social footer */


footer a.uofilogofooter svg:nth-of-type(2) {
margin-left: 22px;
}
footer .foooterflexcontainer {
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin-left: 20px;
margin-right: 20px;
border-top: 1px solid rgba(255,255,255,0.5);
padding-top: 30px;
padding-bottom: 35px;
}

footer .footerflexcolumn {
align-items: flex-start;
margin-bottom: 0px;
width: 50%;
display: flex;
-webkit-box-align: center;
flex-direction: column;
}
footer .footerflexcolumn:nth-of-type(1) {
align-items: flex-start;
}
footer .uofilogocontainer {
display: block;
height: 40px;
-webkit-box-align: left;
align-items: left;
/* overflow-x: hidden; */
/* overflow-y: hidden; */
line-height: 0;
width: auto;
text-align: left;
width: 160px;
}
footer .uofilogocontainer a {
display: block;
height: 100%;
width: 100%;
}
footer .uofilogocontainer a svg {
/* overflow: visible; */
enable-background: new 0 0 300.94 78.22;
height: 100%;
/* width: 100%; */
/* max-width: 100%; */
/* max-height: 100%; */
text-align: left;
display: block;
margin-left: 16px;
margin-right: 16px;
}
footer .uofilogofooter:hover, footer .uofilogofooter:focus {
color: rgb(140, 140, 140);
text-decoration-line: none;
text-decoration-style: initial;
text-decoration-color: initial;
text-decoration: none;
}
svg:not(:root) {
overflow: hidden;
}
footer .footerflexcolumn {
align-items: flex-end;
width: 50%;
-webkit-box-pack: center;
justify-content: flex-start;
display: flex;
flex-direction: column;
}
footer .socialiconlist {
flex-direction: row;
display: flex;
color: rgb(230, 230, 230);
-webkit-box-align: center;
align-items: center;
-webkit-font-smoothing: antialiased;
}
footer .socialiconlist li svg {
width: 24px;
height: 24px;
outline: 0;
fill: #FFFFFF;
}

footer .followustext {
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
font-family: montserrat, sans-serif;
font-weight: 700;
font-style: normal;
-webkit-font-smoothing: antialiased;
white-space: nowrap;
}
footer .socialline {
display: block;
margin-left: 16px;
margin-right: 16px;
height: 24px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: rgb(255,255,255,0.5);
}

footer .socialiconlist ul {
display: flex;
list-style-type: none;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
footer .socialiconlist li {
margin-top: 0px;
margin-right: 16px;
margin-bottom: 0px;
margin-left: 0px;
padding-bottom: 0px;
}














































/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/

.sticky {
	display: block;
}
.stickposition {
position: -webkit-sticky !important;
position: sticky !important;
}

.hentry {
	margin: 0 0 0 0;
}

.byline,
.updated:not(.published) {
	display: none;
}

.single .byline,
.group-blog .byline {
	display: inline;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}
.single-post .entry-content {
overflow: hidden;
}


/*--------------------------------------------------------------
## Custom Colors - Gutenberg
--------------------------------------------------------------*/

.has-illini-orange-background-color {
    background-color: #FF5F05;
}
.has-altgeld-background-color {
    background-color: #C84113;
}
.has-illini-blue-background-color {
    background-color: #13294B;
}
.has-alma-mater-background-color {
    background-color: #1E3877;
}
.has-industrial-blue-background-color {
    background-color: #1D58A7;
}
.has-arches-blue-background-color {
    background-color: #009FD4;
}
.has-cloud-background-color {
    background-color: #F8FAFC;
}
.has-cloud-grey-background-color {
    background-color: #E8E9EB;
}
.has-cloud-midgrey-background-color {
    background-color: #DDDEDE;
}
.has-cloud-darkgrey-background-color {
    background-color: #D2D2D2;
}
.has-heritage-orange-background-color {
    background-color: #F5821E;
}
.has-dark-grey-background-color {
    background-color: #333333;
}
.has-black-background-color {
    background-color: #000000;
}
.has-illini-orange-color {
    color: #FF5F05;
}
.has-altgeld-color {
    color: #C84113;
}
.has-illini-blue-color {
    color: #13294B;
}
.has-alma-mater-color {
    color: #1E3877;
}
.has-industrial-blue-color {
    color: #1D58A7;
}
.has-arches-blue-color {
    color: #009FD4;
}
.has-cloud-color {
    color: #F8FAFC;
}
.has-cloud-grey-color {
    color: #E8E9EB;
}
.has-cloud-midgrey-color {
    color: #DDDEDE;
}
.has-cloud-darkgrey-color {
    color: #D2D2D2;
}
.has-heritage-orange-color {
    color: #F5821E;
}
.has-dark-grey-color {
    color: #333333;
}
.has-black-color {
    color: #000000;
}





/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/

.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}


/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/


/* Globally hidden elements when Infinite Scroll is supported and in use. */

.infinite-scroll .posts-navigation,

/* Older / Newer Posts Navigation (always hidden) */

.infinite-scroll.neverending .site-footer {
	/* Theme Footer (when set to scrolling) */
	display: none;
}


/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */

.infinity-end.neverending .site-footer {
	display: block;
}


/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/

.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}


/* Make sure embeds and iframes fit their containers. */

embed,
iframe,
object {
	max-width: 100%;
}


/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/

.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}


/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/

.gallery {
	margin-bottom: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
}

.gallery-columns-2 .gallery-item {
	width: 50%;
}

.gallery-columns-3 .gallery-item {
	width: 33.33%;
}

.gallery-columns-4 .gallery-item {
	width: 25%;
}

.gallery-columns-5 .gallery-item {
	width: 20%;
}

.gallery-columns-6 .gallery-item {
	width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	width: 11.11%;
}

.gallery-caption {
	display: block;
}

/* Updated Style for STORIED 2.0 */

.gallery-columns-2.gallery-size-gridimage_horizontal_crop .gallery-item {
width: 50%;
height: 25%;
position: relative;
overflow: hidden;
padding-top: 33%;
}

.gallery-columns-2.gallery-size-gridimage_horizontal_crop .gallery-item img {
width: 100%;
display: block;
/* padding: 10px; */
object-fit: cover;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 5px;
}



/*--------------------------------------------------------------
## Body Template - Styles Legacy
--------------------------------------------------------------*/

::selection {
	background: #e84a27;
	color: #ffffff;
}

::-moz-selection {
	background: #e84a27;
	color: #ffffff;
}



.zoom:hover {
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

.hidden {
	display: none;
}

.invisible {
	opacity: 0;
}



.visible {
	display: block !important;
}

.fixed {
	position: fixed !important;
}

.fixedimg {
	background-position: center center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 100%;
	height: 70vh;
	margin-top: 3.5em;
	margin-bottom: 3.5em;
}
.loopvideo {
max-width: 100%;
}
div.dottedline {
border-bottom: 1px dotted #cccccc;
padding-bottom: 1.5em;
margin-bottom: 3em;
}

.fixedimg.hascaption {
margin-bottom: 0px;
}
.fixedimg.hascaption + figcaption {
padding-bottom: 4.5em;
}

.touchevents .fixedimg {
	background-attachment: scroll;
	height: 40vh;
	min-height: 350px;
}

video+figcaption, .fixedimg+figcaption,
.fixedimg+figcaption em, #mapcontainer+figcaption,
#mapcontainer+figcaption em {
	margin-bottom: 0em;
	padding-left: 10px;
	padding-right: 10px;
	display: block;
	border: none;
	text-align: right !important;
}

.inline-block {
	display: inline-block;
}

.relative {
	position: relative;
}


.show-nav #tag,
.whitebg #tag {
	display: none;
}



/* Animation Times - Time for image to fade in
---------------------------------------------------- */

.fadeIn-03s {
	-webkit-animation-duration: 0.1s;
	-moz-animation-duration: 0.1s;
	-o-animation-duration: 0.1s;
	animation-duration: 0.1s;
}

.fadeIn-04s {
	-webkit-animation-duration: 0.4s;
	-moz-animation-duration: 0.4s;
	-o-animation-duration: 0.4s;
	animation-duration: 0.4s;
}

.fadeIn-1s {
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
}

.fadeIn-2s {
	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;
	-o-animation-duration: 2s;
	animation-duration: 2s;
}
.fadeIn-3s {
	-webkit-animation-duration: 3s;
	-moz-animation-duration: 3s;
	-o-animation-duration: 3s;
	animation-duration: 3s;
}

.fadeIn-5s {
	-webkit-animation-duration: 5s;
	-moz-animation-duration: 5s;
	-o-animation-duration: 5s;
	animation-duration: 5s;
}


/* Animation Delay - Time for image to be delayed
---------------------------------------------------- */

.fadeIn-Delay-1s {
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 1s;
	-o-animation-delay: 1s;
	animation-delay: 1s;
}
.fadeIn-Delay-2s {
	-webkit-animation-delay: 2s;
	-moz-animation-delay: 2s;
	-o-animation-delay: 2s;
	animation-delay: 2s;
}
.fadeIn-Delay-3s {
	-webkit-animation-delay: 3s;
	-moz-animation-delay: 3s;
	-o-animation-delay: 3s;
	animation-delay: 3s;
}
.fadeIn-Delay-5s {
	-webkit-animation-delay: 5s;
	-moz-animation-delay: 5s;
	-o-animation-delay: 5s;
	animation-delay: 5s;
}






/* Key Frames
---------------------------------------------------- */

@-webkit-keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@-moz-keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@-o-keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}




/*--------------------------------------------------------------
## Template Feature Styles
--------------------------------------------------------------*/

#feature {
	overflow: hidden;
	height: 85vh;
	min-height: 400px;
	width: 100%;
	display: block;
	background: #181919;
	box-shadow: 0px 0px 22px #aaaaaa;
}


#feature.vh100 {
	height: 100vh;
}

.objectfit #feature video {
object-fit: cover;
height: 100%;
width: 100%;
}
.no-objectfit #feature video {
position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: 0;
	overflow: hidden;
}




#feature .bgimage {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	display: block;
	vertical-align: bottom;
	background-attachment: scroll;
}

#feature .bgimage.fadeIn {
	-moz-animation-duration: 2s;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-moz-animation-delay: 0.5s;
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s;
}

.touchevents #feature video {
	/* display: none; */
}

.no-touchevents #feature .bgimage {
	background-attachment: fixed;
}

h2.animate a {
	position: relative;
	z-index: 1;
	text-decoration: none;
	box-decoration-break: clone;
	line-height: normal;
	line-height: 105%;
	text-shadow: 1px 1px 23px rgba(0, 0, 0, 0.7);
	color: #ffffff;
	padding-top: 20px;
	display: inline-block;
}

h2.animate a::before {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	position: absolute;
	top: 0px;
	text-align: center;
	background-color: #e84a27;
	/*box-shadow: 15px 0 0 #e84a27, -15px 0 0 #e84a27;*/
	box-decoration-break: clone;
	visibility: hidden;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
	z-index: 2;
}

h2.animate a:hover::before {
	visibility: visible;
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}

#feature .featurecall {
	font-family: source-sans-pro, sans-serif;
	font-weight: 300;
	text-transform: uppercase;
	display: inline-block;
	position: relative;
	z-index: 3;
	color: #ffffff;
	text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.8);
	font-size: 0.22em;
	padding: 2px 10px 2px 10px;
	margin: 0px;
	line-height: normal;
	top: 0px;
	letter-spacing: 2px;
	opacity: 0;
	-webkit-transition: all 0.1s ease-in;
	-moz-transition: all 0.1s ease-in;
	-ms-transition: all 0.1s ease-in;
	-o-transition: all 0.1s ease-in;
	transition: all 0.1s ease-in;
	-webkit-animation: letterspacinganimate 1s 4s 1 normal forwards;
	/* Safari 4+ */
	-moz-animation: letterspacinganimate 1s 4s 1 normal forwards;
	/* Fx 5+ */
	-o-animation: letterspacinganimate 1s 4s 1 normal forwards;
	/* Opera 12+ */
	animation: letterspacinganimate 1s 4s 1 normal forwards;
	/* IE 10+, Fx 29+ */
}

@-webkit-keyframes letterspacinganimate {
	0% {
		opacity: 0;
		letter-spacing: 2px;
	}
	100% {
		opacity: 1;
		letter-spacing: 15px;
	}
}

@-moz-keyframes letterspacinganimate {
	0% {
		opacity: 0;
		letter-spacing: 2px;
	}
	100% {
		opacity: 1;
		letter-spacing: 15px;
	}
}

@-o-keyframes letterspacinganimate {
	0% {
		opacity: 0;
		letter-spacing: 2px;
	}
	100% {
		opacity: 1;
		letter-spacing: 15px;
	}
}

@keyframes letterspacinganimate {
	0% {
		opacity: 0;
		letter-spacing: 2px;
	}
	100% {
		opacity: 1;
		letter-spacing: 15px;
	}
}

#feature h2 {
	font-family: "open-sans-condensed", sans-serif;
	margin: 0px;
	text-align: center;
	position: absolute;
	bottom: 0em;
	z-index: 1;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	vertical-align: bottom;
	quotes: "\201C" "\201D" "\2018" "\2019";
	font-weight: 700;
font-style: normal;
	line-height: 90%;
	width: 100%;
}


/* Header animation overrides so that it works nicely with all images */

.pullquote.alignright,
.pullquote.alignleft,
.pullquote.aligncenter {
	font-family: "open-sans-condensed", sans-serif;
	font-weight: 700;
font-style: normal;
	font-size: 1.4em;
	line-height: normal;
	padding: 15px;
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	position: relative;
	width: 275px;
}

.pullquote.aligncenter {
	width: 100%;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	font-size: 1.7em;
}

.pullquote cite {
	font-family: source-sans-pro, helvetica, arial, sans-serif;
	font-weight: 300;
	font-size: 0.5em;
	display: block;
	width: 100%;
	line-height: normal;
	margin-top: 0.5em;
}

#feature h2.animate {
	width: 100%;
	bottom: 0;
	margin: 0 auto;
	min-height: 70%;
	vertical-align: bottom;
	padding-top: 1em;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.35+100 */
	background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: literal("progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000', GradientType=0)");
	/* IE6-9 */
}

#feature h2.animate .wrap {
	bottom: 0;
	padding-left: 30px;
	padding-right: 30px;
	position: absolute;
	width: 100%;
	padding-top: 1em;
	padding-bottom: 1em;
}

#feature h2.animate a {
	display: inline-block;
}

span.featurecall {
	display: inline-block;
	margin-bottom: 1em;
}

#feature h2.animate.small {
	font-size: 4vw;
}

#feature h2.animate.medium {
	font-size: 5vw;
}

#feature h2.animate.large {
	font-size: 7vw;
}

@-webkit-keyframes slide-up {
	0% {
		right: -100vw;
	}
	50% {
		right: -100vw;
	}
	100% {
		right: 0px;
	}
}

@-moz-keyframes slide-up {
	0% {
		right: -100vw;
	}
	50% {
		right: -100vw;
	}
	100% {
		right: 0px;
	}
}

@-o-keyframes slide-up {
	0% {
		right: -100vw;
	}
	50% {
		right: -100vw;
	}
	100% {
		right: 0px;
	}
}

@keyframes slide-up {
	0% {
		right: -100vw;
	}
	50% {
		right: -100vw;
	}
	100% {
		right: 0px;
	}
}




.fademovedown {
	-webkit-animation: fademovedown 1s 2s 1 normal forwards;
	/* Safari 4+ */
	-moz-animation: fademovedown 1s 2s 1 normal forwards;
	/* Fx 5+ */
	-o-animation: fademovedown 1s 2s 1 normal forwards;
	/* Opera 12+ */
	animation: fademovedown 1s 2s 1 normal forwards;
	/* IE 10+, Fx 29+ */
}

@-webkit-keyframes fademovedown {
	0% {
		opacity: 0;
		letter-spacing: 2px;
	}
	100% {
		opacity: 1;
		letter-spacing: 7px;
	}
}

@-moz-keyframes fademovedown {
	0% {
		opacity: 0;
		letter-spacing: 2px;
	}
	100% {
		opacity: 1;
		letter-spacing: 7px;
	}
}

@-o-keyframes fademovedown {
	0% {
		opacity: 0;
		letter-spacing: 2px;
	}
	100% {
		opacity: 1;
		letter-spacing: 7px;
	}
}

@keyframes fademovedown {
	0% {
		opacity: 0;
		letter-spacing: 2px;
	}
	100% {
		opacity: 1;
		letter-spacing: 7px;
	}
}



/*--------------------------------------------------------------
## Legacy Post Styles
--------------------------------------------------------------*/

.single-post .entry-content {
	font-family: "georgiapro", Georgia, serif;
	font-weight: 400;
	font-size: 1.32em;
	line-height: 1.5em;
}

.single-post .entry-content p {
	margin: 0 auto;
	width: 100%;
	margin-bottom: 1.3em;
	max-width: 825px;
	padding-left: 30px;
	padding-right: 30px;
	/* text-align: left; Justin removed for Gutenberg*/
	font-size: 0.94em;
}

.single-post .entry-content h3 {
font-family: "open-sans-condensed", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    font-style: normal;
    font-size: 1.5em;
    margin: 0 auto;
    max-width: 825px;
    line-height: 135%;
    margin-top: 3em;
    margin-bottom: 1.8em;
    text-align: center;
    display: block;
    padding-left: 30px;
    padding-right: 30px;
}



.single-post .entry-content h3:first-child, .single-post .entry-content h4:first-child, .single-post .entry-content h5:first-child {
	margin-top: 1.2em;
}

.single-post .entry-content h3::after {
	content: '';
	position: relative;
	margin-top: 0.4em;
	display: block;
	left: 50%;
	width: 20px;
	border: 1px solid #404040;
	transform: translateX(-50%);
}

.single-post .entry-content h3 span {
	font-size: 10pt;
display: inline-block;
line-height: 1.5em;
margin-top: 0.4em;
}

.single-post .entry-content h3.margintop0 {
	margin-top: -6em;
}

.single-post .entry-content p.dropcap:first-letter {
	float: left;
	font-family: "open-sans-condensed", sans-serif;
	font-size: 190px;
	font-weight: 300;
	margin: -20px 12px 10px -10px;
	line-height: 185px;
}

.single-post .entry-content span.leadinbold {
	font-weight: 700;
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-family: 'source-sans-pro', helvetica, sans-serif;
	display: inline;
}

.single-post .entry-content p.carrot {
	text-align: center;
	margin-top: 60px;
	margin-bottom: 60px;
}



.gallery-columns-2 .gallery-caption,
.gallery-columns-3 .gallery-caption,
.gallery-columns-4 .gallery-caption,
.gallery-columns-5 .gallery-caption,
.gallery-columns-6 .gallery-caption,
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
	display: none;
}

.gallery-columns-2,
.gallery-columns-3,
.gallery-columns-4,
.gallery-columns-5,
.gallery-columns-6,
.gallery-columns-7,
.gallery-columns-8,
.gallery-columns-9 {
	-webkit-column-gap: 0;
	-moz-column-gap: 0;
	column-gap: 0;
}



.gallery {
	padding: 0px 10px 0px 10px;
	display: block;
	width: 100%;
	clear: both;
	margin-bottom: 2.5em;
}

.gallery-item {
	display: inline-block;
	vertical-align: middle;
	width: auto;
	margin: 0px 0px 0px 0px;
}

.gallery-columns-2 .gallery-item {
	width: 50%;
}

.gallery-columns-3 .gallery-item {
	width: 33%;
}

.gallery-columns-4 .gallery-item {
	width: 25%;
}

.gallery-columns-5 .gallery-item {
	width: 20%;
}

.gallery-columns-6 .gallery-item {
	width: 33%;
}

.gallery-columns-7 .gallery-item {
	width: 33%;
}

.gallery-columns-8 .gallery-item {
	width: 25%;
}

.gallery-columns-9 .gallery-item {
	width: 33%;
}

.gallery-item img {
	width: 100%;
	display: block;
	padding: 10px;
}

.gallery-item a img:hover {
	opacity: 0.7;
}

.pad {
	max-width: 950px;
	margin: 0 auto;
}

.posted-on {
display: block;
margin-left: 30px;
margin-top: 2em;
font-family: source-sans-pro, sans-serif;
font-style: italic;
font-weight: 400;
font-size: 0.6em;
position: relative;
padding: 8px 8px 8px 8px;
margin: 0 auto;
left: auto;
/* color: #000000; */
margin-top: 0.8em;
margin-bottom: 0.8em;
letter-spacing: 0.1em;
line-height: normal;
text-align: center;
}

.excerptbox {
border: 1px solid #efefef;
max-width: 900px;
margin: 0 auto;
margin-top: 3em;
background: url('./images/papertexture.jpg')
}

.entry-content {
	margin-top: 0px;
}

.entry-footer {
	display: none;
	margin-top: 30px;
	background: #404040;
	color: #ffffff;
	padding: 20px;
}

.entry-footer a {
	color: #ffffff;
}

#customheadline {
	position: relative;
	border-top: 1px solid #cccccc;
}

#customheadline::before,
#customheadline::after {
	content: "";
	position: absolute;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#cccccc), to(#ffffff));
	background-image: -webkit-linear-gradient(#cccccc, #ffffff, #ffffff);
	background-image: -moz-linear-gradient(#cccccc, #ffffff, #ffffff);
	background-image: -o-linear-gradient(#cccccc, #ffffff, #ffffff);
	background-image: linear-gradient(#cccccc, #ffffff, #ffffff);
	top: -1px;
	bottom: -1px;
	width: 1px;
}

#customheadline::before {
	left: -1px;
}

#customheadline::after {
	right: -1px;
}

#heading {
	padding-bottom: 3em;
	text-align: center;
	display: block;
	position: relative;
	z-index: 1;
	width: auto;
	margin: 0 auto;
	margin-top: 0vh;
	animation-name: slideup;
	animation-duration: 0.6s;
	/* or: Xms */
	animation-iteration-count: 1;
	animation-direction: normal;
	/* or: normal */
	animation-timing-function: ease-in-out;
	/* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
	animation-fill-mode: forwards;
	/* or: backwards, both, none */
	animation-delay: 0.5s;
	/* or: Xms */
}

@-webkit-keyframes slideup {
	0% {
		margin-top: 0vh;
	}
	100% {
		margin-top: -6vh;
	}
}

@-moz-keyframes slideup {
	0% {
		margin-top: 0vh;
	}
	100% {
		margin-top: -6vh;
	}
}

@-o-keyframes slideup {
	0% {
		margin-top: 0vh;
	}
	100% {
		margin-top: -6vh;
	}
}

@keyframes slideup {
	0% {
		margin-top: 0vh;
	}
	100% {
		margin-top: -6vh;
	}
}

.slidetrigger {
cursor: pointer;
}

.slidetiggercont {
	position: relative;
	width: auto;
	height: auto;
	overflow: hidden;
}
.slidetiggercont .slidetrigger {
width: 100%;
}
.slidetiggercont:before {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	margin-left: 30px;
background: #ffffff url('./images/slideshowicon.png') center center no-repeat;
background-size: 42px 35px;
text-align: center;
line-height: 51px;
width: 58px;
height: 51px;
overflow: none;
pointer-events: none;
border-left: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.slidetiggercont:after {
	content: " GALLERY ";
	pointer-events: none;
	display: inline-block;
	left: 87px;
	height: 51px;
	bottom: 0px;
	color: #000000;
	width: 0px;
	background: #ffffff;
	border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
	position: absolute;
	line-height: 51px;
	text-align: left;
	font-family: source-sans-pro, arial, helvetica, sans-serif;
	font-size: 0.7em;
	letter-spacing: 0.15em;
	overflow: hidden;
	-webkit-transition: width 1s; /* Safari */
	-moz-transition: width 1s; /* Safari */
    transition: width 1s;
}
.slidetiggercont:hover:after {
	width: 95px;
}
.touchevents .slidetiggercont:after {
	width: 95px;
}

@-webkit-keyframes slideshowreveal {
  0%   { width: 0px; }
  100% { width: 150px; }
}
@-moz-keyframes slideshowreveal {
  0%   { width: 0px; }
  100% { width: 150px; }
}
@-o-keyframes slideshowreveal {
  0%   { width: 0px; }
  100% { width: 150px; }
}
@keyframes slideshowreveal {
  0%   { width: 0px; }
  100% { width: 150px; }
}


#customheadline {
	font-size: 4.2em;
	max-width: 650px;
	margin: 0 auto;
	line-height: 1em;
	margin-top: 0px;
	font-family: "open-sans-condensed", sans-serif;
	font-weight: 700;
font-style: normal;
	letter-spacing: normal;
	padding: 0.4em 0.4em 0.3em 0.4em;
	background-color: #ffffff;
}

#subhead {
	font-family: source-sans-pro, Helvetica, Arial, sans-serif;
	font-weight: 300;
	margin: 0 auto;
	margin-bottom: 1em;
	max-width: 500px;
	font-size: 1.5em;
	line-height: 1.4em;
	border-top: 1px solid #e84a27;
	padding-top: 0.8em;
	padding-left: 2em;
padding-right: 2em;
}

#authorcontainer {
	margin: 0 auto;
	max-width: 550px;
	display: table;
	margin-bottom: 1em;
}

#author,
#photosby,
#share {
	font-family: source-sans-pro, Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-weight: 600;
	margin: 0 auto;
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	display: table-cell;
	padding-left: 25px;
	padding-right: 25px;
}

#heading #author em,
#heading #photosby em {
	font-weight: 800;
	font-style: normal;
	font-size: 0.7em;
	letter-spacing: 0.2em;
	display: block;
	margin-top: 2em;
	margin-bottom: 0.1em;
}

#swipebox-overlay {
	z-index: 2147483647 !important;
	background: #000;
	opacity: 1;
	width: 100% !important;
}

#swipebox-bottom-bar {
	-webkit-transform: translate3d(0, -50px, 0);
	transform: translate3d(0, -50px, 0);
	opacity: 1;
	z-index: 2;
	background: none;
	height: 64px;
}

#swipebox-top-bar,
#swipebox-top-bar.visible-bars {
	-webkit-transform: translate3d(0, 0px, 0);
	transform: translate3d(0, 0px, 0);
	max-width: 700px;
	margin: 0 auto;
	position: relative;
	top: auto;
	bottom: 0px;
	z-index: 1;
	background: none;
	height: 100%;
	pointer-events: none;
}

#swipebox-top-bar #swipebox-title {
	padding: 30px 45px 30px 45px;
	line-height: 135%;
	font-size: 1em;
	font-family: source-sans-pro, Arial, sans-serif;
	bottom: 0;
	position: absolute;
	background: #000;
}

#swipebox-overlay .slide {
	max-height: 80vh;
	margin-top: 5vh;
	margin-bottom: 15vh;
}

a#swipebox-prev,
a#swipebox-next,
a#swipebox-close {
	background-image: url('./images/swipe-icons.png');
	background-image: url('./images/swipe-icons.svg') !important;
	background-size: 160px 160px;
	background-position: -46px -57px;
	width: 50px;
}

a#swipebox-next {
	background-position: -110px -57px;
}

a#swipebox-close {
	background-position: 11px -55px;
}

ul#sharethis {
	list-style: none;
	padding: 0px 0px 0px 0px;
	margin: 0 auto;
	text-align: center;
	font-size: 1rem;
	margin-bottom: 3em;
}

#share {
	display: block;
	margin-top: 4.5em;
	margin-bottom: 1em;
}

ul#sharethis li {
	display: inline-block;
	margin-left: 5px;
	margin-right: 5px;
}

ul#sharethis li a {
display: block;
background-image: url('./images/socialicons-01.png');
background-image: url('./images/socialicons-01.svg');
background-size: 171px 38px;
background-position: -7px 3px;
width: 44px;
height: 44px;
background-repeat: none;
overflow: hidden;
-moz-transition: opacity .5s ease;
-o-transition: opacity .5s ease;
-webkit-transition: opacity .5s ease;
transition: opacity .5s ease;
text-indent: -99999px;
}

ul#sharethis li a:hover {
opacity: 0.5;
}



ul#sharethis li:nth-of-type(2) a {
	background-position: -45px 3px;
}

ul#sharethis li:nth-of-type(3) a {
	background-position: -83px 3px;
}

ul#sharethis li:nth-of-type(4) a {
	background-position: -120px 3px;
}

.imagecontainer {
	width: 100%;
	max-width: 650px;
	margin: 0 auto;
	display: block;
	float: none;
	position: relative;
}

.imagecontainer img {
	width: 100%;
}

.imagecontainer.width750 {
	max-width: 960px;
}
.imagecontainer {
		padding-left: 30px;
		padding-right: 30px;
}


.excerptbox .imagecontainer figure.alignright  {
	margin-right: 0;
}

.excerptbox .imagecontainer figure.alignleft  {
	margin-left: 0;
}

p iframe {
	width: 100%;
}

figure.alignright {
	margin-right: -155px;
	padding: 2px;
}

figure.alignleft {
	margin-left: -155px;
	padding: 2px;
}

img.aligncenter {
	margin-bottom: 2em;
}

figure.aligncenter img {
	margin-bottom: 0px;
}

figure.aligncenter {
	padding: 2px;
}

figcaption {
	margin-top: 0px;
	padding: 10px 0px 10px 0px;
	font-size: 0.75em;
	font-family: source-sans-pro, helvetica, sans-serif;
	font-weight: 400;
	line-height: 135%;
	text-align: left !important;
	margin: 0px !important;
	border-bottom: 1px solid #cccccc;
}

figcaption em {
	display: inline;
	font-size: 0.9em;
}

.alignright,
.alignleft,
.alignrcenter {
	margin-top: 0px;
}

img.alignright,
img.alignleft,
img.alignrcenter {
	margin-bottom: 1.5em;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%;
	/* 16:9 */
	padding-top: 25px;
	height: 0;
}

.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.slideshowhead {
	margin: 0 auto;
	margin-top: 5em;
	margin-bottom: 0.3em;
	font-size: 0.5em;
	font-family: source-sans-pro, helvetica, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	line-height: normal;
	text-align: left;
	max-width: 100%;
	margin-left: 20px;
	margin-right: 20px;
}

/* Hack to remove extra space after h4 and gallery come after each other */
h4 + p + .slideshowhead {
	margin-top: 0em;
}
h4 + .slideshowhead {
	margin-top: 3em;
}

.slideshowhead::before {
	content: url('./images/slideshowicon-small.jpg');
	display: inline-block;
	margin-right: 1em;
}

.invert {
	color: #ffffff;
}

.invert .slideshowhead::before {
	content: url('./images/slideshowicon-small-white.jpg');
}

	div.getty.embed.image {
		margin-left: 50px;
margin-right: 50px;
margin-bottom: 3em;
background-color: transparent !important;
	}

	h4, h5 {
		padding-left: 30px;
padding-right: 30px;
margin-bottom: 0px;
padding-bottom: 0px;
max-width: 825px;
font-family: 'source-sans-pro', Helvetica, Arial, sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
font-size: 1em;
padding-top: 0.5em;
margin: 0 auto;
margin-bottom: 0.5em;
	}

	h5 {
margin-bottom: 1.5em;
margin-top: 3em;
font-weight: 700;
border-bottom: 1px solid #cccccc;
border-top: 1px solid #cccccc;
line-height: 120%;
padding: 0.7em 0.7em 0.7em 3em;
	}

	h5::before {
content: "Q:";
position: absolute;
margin-right: 1em;
display: block;
color: #e84a27;
font-family: "open-sans-condensed", sans-serif;
font-weight: 700;
font-style: normal;
margin-left: -1.2em;
margin-top: 0.09em;
font-size: 2em;
	}

.searchwp-live-search-result img.size-thumbnail {
width: 65px;
float: left;
margin-right: 0.8em;
margin-bottom: 0.5em;
margin-top: 5px;
}

.searchwp-live-search-result a::after {
   content: '';
    display: block;
    clear: both;
}



/* Prevent swipebox from scrolling when open */

.swipebox-html body, .swipebox-touch body {
overflow: hidden;
}


/*--------------------------------------------------------------
## Gutenberg Post Styles
--------------------------------------------------------------*/

.single-post .entry-content p,
.single-post .entry-content blockquote,
.single-post .entry-content .wp-block-image,
.single-post .entry-content .wp-block-pullquote,
.single-post .entry-content .wp-block-gallery
{
margin: 0 auto 30px;
width: 100%;
max-width: 825px;
}

.single-post .entry-content .wp-block-pullquote blockquote p,
.single-post .entry-content .wp-block-pullquote.is-style-solid-color blockquote p
{
	font-size: 24pt;
	border-left: 0;
}

.single-post .entry-content blockquote{
border-left: 0;
border-right: 0;
}



/* NO GOOD DO NOT USE
.single-post .entry-content{
	width: 825px;
	margin: 0 auto;
} */

/*
.single-post .entry-content blockquote{
margin: 0 auto !important;
width: 100%;
padding: 30px;
border-left: 0;
}

.single-post .entry-content blockquote p{
padding: 0 !important;
}


.single-post .entry-content .wp-block-pullquote{
font-family: "open-sans-condensed", sans-serif;
font-weight: 300;
font-size: 1.3em;
line-height: normal;
padding: 0 !important;
border-top: 1px solid currentColor;
border-bottom: 1px solid currentColor;
border-left: 0;
position: relative;
}


.single-post .entry-content .wp-block-pullquote blockquote p,
.single-post .entry-content .wp-block-pullquote.is-style-solid-color blockquote p
{
	font-size: 24pt;
}

.single-post .entry-content .wp-block-image .alignleft{
max-width: 420px;
margin-left: -20%;
padding-right: 30px;
padding-bottom: 30px;
}


*/



/*--------------------------------------------------------------
## Photo caption on left of photo treatment
--------------------------------------------------------------*/

.captionfade {
width: 100%;
max-width: 100%;
overflow: hidden;
}

.captionfade p {
	display: none;
}

.captionfade figure {
	width: 100% !important;
	margin-top: 0px;
	margin-bottom: 0px;
}

.captionfade figure img {
width: calc(100% - 240px);
padding-bottom: 40px;
padding-top: 40px;
border-bottom: 1px solid #333333;
}

.captionfade figure figcaption {
width: 240px;
padding: 30px;
border-bottom: none;
font-size: 0.75em;
line-height: 155%;
opacity: 0;
padding-top: 40px;
border-top: 5px solid #333333;
margin-top: 0px;
}

.captionfade figure:after {
  content: "";
  display: table;
  clear: both;
}

.captionfade figure:nth-child(odd) figcaption:before {
content: "";
position: absolute;
border-top: 1px solid #333333;
width: 30px;
transform: rotate(45deg);
transform-origin: 132px 171px;
}

.captionfade figure:nth-child(even) figcaption:before {
content: "";
position: absolute;
border-top: 1px solid #333333;
width: 30px;
transform: rotate(-45deg);
transform-origin: -39px 28px;
}

.captionfade figure:nth-child(odd) img {
float: right;
padding-right: 60px;
padding-left: 40px;
border-left: 1px solid #333333;
}

.captionfade figure:nth-child(odd) figcaption {
float: left;
padding-left: 60px;
}

.captionfade figure:nth-child(even) img {
float: left;
padding-right: 40px;
padding-left: 60px;
border-right: 1px solid #333333;
}

.captionfade figure:nth-child(even) figcaption {
float: right;
padding-right: 60px;
}



#storiedvideohome {
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
max-width: 100%;
display: block;
pointer-events: none;
}

.no-touchevents .storiedcontainer .info {
position: relative !important; left: 0; top: 0;
}



/*--------------------------------------------------------------
## Giving Options ACF
--------------------------------------------------------------*/

#givingoptions {
font-family: "georgiapro", Georgia, serif;
text-align: center;
border-top: 1px solid #333333;
max-width: 800px;
margin: 3em auto 2em auto;
border-bottom: 1px solid #333333;
padding: 3em 0px 3em 0px;
font-size: 0.9em;
}

#givingoptions .givingoptionshead {
text-align: center;
font-size: 1.3em;
letter-spacing: 0.05em;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 0.5em;
padding-bottom: 0px;
line-height: 120%;
}

#givingoptions .givingoptionsdesc {
text-align: center;
line-height: 150%;
}

#givingoptions a.button {
text-align: center;
border: 2px solid #e84a27;
border-radius: 3px;
padding: 0.5em 1em 0.5em 1em;
display: inline-block;
width: auto;
max-width: 100%;
font-weight: 500;
font-family: montserrat, sans-serif;
transition: all 0.5s;
}
#givingoptions a.button:hover {
text-decoration: none;
background: #e84a27;
color: #FFFFFF;
}




/*--------------------------------------------------------------
## Photo Left/Right Story Treatment
--------------------------------------------------------------*/

.single-format-gallery #heading, .single-format-gallery #customheadline::before, .single-format-gallery #customheadline::after, .single-format-gallery #customheadline, .single-format-gallery #authorcontainer, .single-format-gallery #author {
  all: initial;
  * {
    all: unset;
  }
}

.single-format-gallery #customheadline {
border-top: none;
font-size: 3em;
color: #ffffff;
font-family: "open-sans-condensed", sans-serif;
	font-weight: 700;
font-style: normal;
}

.single-format-gallery #author {
color: #ffffff;
}

.single-format-gallery #heading #author em, .single-format-gallery #heading #photosby em {
margin-top: 0.5em;
color: #ffffff;
    font-family: source-sans-pro, Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.3em;
}

.single-format-gallery #heading #author, .single-format-gallery #heading #photosby {
margin-top: 0.5em;
color: #ffffff;
    font-family: source-sans-pro, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    display: block;
}

.single-format-gallery #feature {
display: none;
}
.single-format-gallery #subhead {
display: none;
}
.single-format-gallery #heading {
position: relative;
display: block;
margin-bottom: 1.5em;
}

.single-format-gallery div.slideshowhead {
	display: none;
}

.single-format-gallery .gallery {
padding: 0px 0px 0px 0px;
display: block;
width: 100%;
clear: both;
margin-bottom: 2.5em;
background: #000000;
}

.single-format-gallery .gallery-item {
display: block;
vertical-align: middle;
margin: 0px 0px 0px 0px;
position: relative;
overflow: hidden;
/* Width and height can be anything. */
width: 100%;
height: 100vh !important;
}

.single-format-gallery .gallery-caption {
display: block;
position: absolute;
z-index: 2;
bottom: 3em;
left: 2em;
right: 2em;
background: rgba(0, 0, 0, 0.8);
padding: 20px 20px 20px 20px;
color: #ffffff;
border: none;
max-width: 350px;
font-size: 0.8em;
}

.single-format-gallery .gallery-item img {
position: absolute;
z-index: 0;
top: 50%;
left: 50%;
width: auto;
height: auto;
max-height: none;
max-width: none;
min-height: 100%;
min-width: 100%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
padding: 0px 0px 0px 0px;
}

.single-format-gallery .gallery-item img:hover {
opacity: 1;
}




/* REVERSE - RELATES TO MIKE HOPKINS AND SOME OTHER STORIES THAT USE BLACK BACKGROUNDS */

#site-canvas.black {
background: #000000;
color: #ffffff;
}
#site-canvas.fixed {
	visibility: hidden;
}
#site-canvas.black #feature {
box-shadow: 0px 0px 22px rgba(0, 0, 0, 0.5);
}

#site-canvas.black .entry-header {
background: #000000;
color: #ffffff;
}

#site-canvas.black #customheadline {
background: #000000;
color: #ffffff;
}

#site-canvas.black #customheadline::before, #site-canvas.black #customheadline::after {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#cccccc), to(transparent));
background-image: -webkit-linear-gradient(#cccccc, #ffffff, transparent);
background-image: -moz-linear-gradient(#cccccc, #ffffff, transparent);
background-image: -o-linear-gradient(#cccccc, #ffffff, transparent);
background-image: linear-gradient(#cccccc, #ffffff, transparent);
}

#site-canvas.black #authorcontainer {
background: #000000;
color: #ffffff;
}

#site-canvas.black .entry-content {
background: #000000;
color: #ffffff;
}

#site-canvas.black .posted-on {
color: #ffffff;
}



#site-canvas.black ul#sharethis li {
	background: #ffffff;
}



/*--------------------------------------------------------------
##  Archive Page
--------------------------------------------------------------*/

.archive-header {
height: 85vh;
max-height: 800px;
min-height: 400px;
width: 100%;
background: #000000;
position: relative;
overflow: hidden;
}
.archive-posbottom {
display: block;
bottom: 0px;
padding-bottom: 60px;
padding-top: 100px;
width: 100%;
height: auto;
position: absolute;
z-index: 2;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}
.archive-posbottom h1 {
font-size: 2.5em;
}
.archive-title, .archive-meta {
margin: 0 auto;
color: #ffffff;
text-align: center;
padding-left: 20px;
padding-right: 20px;
display: block;
}
.archive-header img {
object-fit: cover;
width: 100%;
height: 100%;
opacity: 0.1;
transform: scale(1.1);
animation: fadeIn07 4s 1s forwards;
}

@keyframes fadeIn07 {
  from {opacity: 0.1; transform: scale(1.1);}
  to {opacity: 0.8; transform: scale(1);}
}
@keyframes fadeIn08 {
  from {opacity: 0.1; transform: scale(1.1);}
  to {opacity: 1; transform: scale(1);}
}
ul.griddisplay .alm-reveal {
  display: grid;
  grid-template-columns: calc(33% - 10px) calc(33% - 10px) calc(33% - 10px);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  padding: 20px;
  padding-bottom: 0px;
}
ul.griddisplay .alm-reveal.twocolumns {
grid-template-columns: calc(50% - 10px) calc(50% - 10px);
grid-column-gap: 20px;
grid-row-gap: 20px;
padding: 20px;
}


ul.griddisplay .alm-reveal li p.datebold small {
font-family: montserrat, sans-serif;
font-style: normal;
font-weight: 700;
display: block;
margin: 0px;
padding: 0px;
bottom: 20px;
position: absolute;
text-transform: uppercase;
font-size: 0.75em;
}
#ajax-load-more ul.griddisplay .alm-reveal li p:first-of-type {
padding-bottom: 30px;
}

.alm-btn-wrap {
padding-top: 30px;
text-align: center;
margin: 0 auto;
}
.alm-load-more-btn {
margin-bottom: 30px;
}
.alm-load-more-btn.done {
display: none;
}

.alm-load-more-btn {
background: #13294B;
border: none;
box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
font-size: 1.3em;
color: #FFFFFF;
font-weight: 400;
padding: 0em 1em 0em 1em;
width: 450px;
max-width: 80%;
border-radius: 4px;
cursor: pointer;
transition: all 0.5s;
text-decoration: none;
display: inline-block;
margin: 0 auto;
text-align: center;
position: relative;
padding: 0em 3em 0em 3em;
display: inline-block;
height: 48px;
line-height: 48px;
white-space: nowrap;
margin-bottom: 50px;
}
button.alm-load-more-btn:hover {
background: #1E3877;
box-shadow: none;
}
#leadincat {
font-weight: 600;
display: block;
max-width: 1000px;
margin: 0 auto;
padding-top: 2.7em;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #13294B;
border-bottom: 3px solid #13294B;
margin-bottom: 0.3em;
padding-bottom: 0.1em;
}


/*--------------------------------------------------------------
## Search Results 2.0
--------------------------------------------------------------*/

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.search-results main {
	  display: block;
	  margin: auto;
	  width: 100%;
	  height: auto;
	  padding-left: 5%;
	  padding-right: 5%;
	  padding-top: 70px;
	  padding-bottom: 40px;
	  position: relative;
	  background-color: rgba(19, 41, 75, 1);
}

.search-results main img {
	box-shadow: 1px 1px 12px rgba(0,0,0,0.4);
}

.search-results main article{
	display: block;
	/* border: 2px solid rgba(255, 85, 46, 1); */
  width: 900px;
  max-width: 100%;
  padding-bottom: 0px;
	margin: 0 auto;
}

.search-results main header.page-header{
	width: 900px;
  max-width: 100%;
  /*padding-bottom: 50px;*/
	margin: 0 auto;
	padding-top: 30px;
	padding-bottom: 50px;
}

.search-results main header.entry-header{
  /*width: 300px;
  max-width: 50%;*/
	width: 35%;
  float: left;
  padding-right: 20px;
	margin: 0px /* 0px 20px*/;
}

.search-results main div.entry-summary{
	width: 65%;
  /*width: 300px;
  max-width: 50%;*/
  float: right;
	margin: 0px /*0px 20px*/;

}

.search-results main h1 {
	  font-family: montserrat, sans-serif;
	  font-weight: 600;
	  font-size: 3em;
	  font-style: normal;
	  color:  rgba(248, 250, 252, 1);
	  padding-bottom: 10px;
}

.search-results main .material-icons.orange-icon{
  color:  rgba(255, 85, 46, 1);
  font-size: 1.8em;
  padding-right: .2em;
	vertical-align: bottom;
}

.search-results main .material-icons.nav-icon{
	vertical-align: bottom;
}

.search-results main h2.entry-title{
	font-family: georgiapro, serif;
  font-weight: 700;
  font-size: 2em;
  font-style: normal;
  color:  rgba(248, 250, 252, 1);
  margin: 0;
}

.search-results main h3{
  font-family: montserrat, sans-serif;
  font-weight: 600;
  font-size: .9em;
  font-style: normal;
  color:  rgba(255, 85, 46, 1);
  margin: 0;
}

.search-results main p{
  font-family: georgiapro, serif;
  font-weight: 350;
  font-size: 1.2em;
  font-style: normal;
  color:  rgba(248, 250, 252, 1);
  margin: 0;
	/*text-align: justify;*/
}

.search-results main .term{
  color:  rgba(255, 85, 46, 1);
}

.search-results main hr {
	width: 900px;
	max-width: 100%;
	height: 1px;
	  color: rgba(255, 255, 255, .3);
	  background-color: rgba(255, 255, 255, .3);
	  border: none;
		margin: 20px auto;
}

.search-results main .nav-links{
	font-family: montserrat, sans-serif;
  font-weight: 600;
  font-size: .9em;
  font-style: normal;
  color:  rgba(255, 85, 46, 1);
	width: 1000px;
  max-width: 100%;
	margin: 0 auto;
}

.search-results main .nav-previous{
	float: right;
	text-align: right;
}

.search-results main .nav-next{
	float: left;
	text-align: left;
}

.search-results main a:link {
  text-decoration: none;
}

.search-results main a:visited {
  text-decoration: none;
}

.search-results main a:hover {
  text-decoration: none;
}

.search-results main a:active {
  text-decoration: none;
}

.search-results main .entry-title a:link, .search-results main .entry-title a:visited {
text-decoration: none;
color: rgba(248, 250, 252, 1);
}

.no-style a:link {
    text-decoration: none !important;
    color: rgba(255, 85, 46, 1) !important;
}

.no-style a:visited {
    text-decoration: none !important;
    color: rgba(255, 85, 46, 1) !important;
}

.no-style a:hover {
    text-decoration: none !important;
    color: rgba(255, 85, 46, 1) !important;
}

.no-style a:active {
    text-decoration: none !important;
    color: rgba(255, 85, 46, 1) !important;
}


/*--------------------------------------------------------------
## Search Results 2.0 - When No Results Are Found
--------------------------------------------------------------*/

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.search-no-results main {
	  display: block;
	  margin: auto;
	  width: 100%;
	  height: auto;
	  padding-left: 5%;
	  padding-right: 5%;
	  padding-top: 200px;
	  padding-bottom: 200px;
	  position: relative;
	  background-color: rgba(19, 41, 75, 1);
}

.search-no-results main header.page-header{
	width: 900px;
  max-width: 100%;
  /*padding-bottom: 50px;*/
	margin: 0 auto;
}

.search-no-results main h1 {
	  font-family: montserrat, sans-serif;
	  font-weight: 600;
	  font-size: 3em;
	  font-style: normal;
	  color:  rgba(248, 250, 252, 1);
	  padding-bottom: 10px;
	  line-height: normal;
}

.search-no-results main .material-icons.orange-icon{
  color:  rgba(255, 85, 46, 1);
  font-size: 1.8em;
  padding-right: .2em;
	vertical-align: bottom;
}

.search-no-results main .term{
  color:  rgba(255, 85, 46, 1);
}

.search-no-results main .material-icons.nav-icon{
	vertical-align: bottom;
}

.search-no-results main .material-icons.nav-icon{
	vertical-align: bottom;
}

/* -----not used -----
.search-no-results main h2.entry-title{
	font-family: georgiapro, serif;
  font-weight: 700;
  font-size: 2em;
  font-style: normal;
  color:  rgba(248, 250, 252, 1);
  margin: 0;
}
----- */

.search-no-results main .page-content{
	display: block;
	/* border: 2px solid rgba(255, 85, 46, 1); */
  width: 900px;
  max-width: 100%;
  padding-bottom: 0px;
	margin: 0 auto;
}

.search-no-results main p{
  font-family: georgiapro, serif;
  font-weight: 350;
  font-size: 1.2em;
  font-style: normal;
  color:  rgba(248, 250, 252, 1);
  margin: 0;
	/*text-align: justify;*/
}



/*--------------------------------------------------------------
## Back to Top
--------------------------------------------------------------*/

a#backtotop {
background: rgba(255,255,255,0.6);
transition: background 0.5s;
position: fixed;
margin-right: 0px;
margin-left: auto;
bottom: 30px;
top: auto;
right: 20px;
display: block;
cursor: pointer;
color: #13294B;
z-index: 202;
width: 40px;
height: 40px;
padding: 5px;
line-height: 38px;
font-size: 1em;
border: 1px solid rgba(0,0,0,0.2);
border-top: 1px solid rgba(0,0,0,0.2);
text-align: center;
box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
display: none;
}
a#backtotop.relative {
position: absolute;
bottom: auto;
top: 0px;
border-top: none;
}
a#backtotop:hover {
background: #1E3877;
border: 1px solid #13294B;
color: #FFFFFF;
}
a#backtotop span {
margin-top: 2px;
}


/*--------------------------------------------------------------
## Password Protected Page Form
--------------------------------------------------------------*/

.post-password-required #thepassform:before {
display: block;
width: 100%;
max-width: 200px;
content: "";
background-image: url("https://with.illinois.edu/wp-content/themes/advancement2017/images/withillinois-flipbook-wordmark.png");
height: 65px;
background-size: contain;
background-repeat: no-repeat;
text-align: center;
margin: 0 auto;
margin-top: 10%;
}

.post-password-required #thepassform {
display: block;
position: fixed;
z-index: 2147483644;
background: #fefefe;
height: 100vh;
width: 100%;
max-width: 100%;
max-height: 100%;
top: 50%;
left: 50%;
text-align: center;
color: #13294B;
transform: translate(-50%, -50%);
padding: 30px;
font-size: 0.9em;
}
.single-post .post-password-required .entry-content p {
text-align: center;
	font-family: montserrat, sans-serif;
	font-weight: 400;
	font-style: normal;
	max-width: 600px;
	margin: 0 auto;
	width: 100%;
	line-height: 135%;
}


.post-password-required .post-password-form p {
padding: 10px;
margin-bottom: 0px;
}
.post-password-required .post-password-form p:nth-of-type(2) {
border: 1px solid #cccccc;
max-width: 430px;
margin: 0 auto;
border-radius: 12px;
padding: 30px 20px 40px 20px;
margin-top: 1.6em;
}
.post-password-required .post-password-form label:first-of-type {
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.1em;
padding-bottom: 0.5em;
display: block;
}
.post-password-required .post-password-form input:first-of-type {
background: #efefef;
font-size: 1.5em;
padding: 0.2em 0.6em 0.2em 0.6em;
margin-top: 0.2em;
}
.post-password-required .post-password-form input {
width: 100%;
max-width: 350px;
}

.post-password-required .post-password-form input[type=submit] {
background: #E84A27;
color: #ffffff;
font-size: 1.3em;
padding: 0.4em;
margin-top: 0.5em;
}

.post-password-required p.custom-password-message {
color: red;
font-weight: bold;
margin-bottom: 0em;
padding-bottom: 0px;
}


/*--------------------------------------------------------------
# Page Template Default Styles
--------------------------------------------------------------*/

.page-template-default header.entry-header {
min-height: 300px;
max-height: 600px;
height: 60vh;
background: #000000;
position: relative;
background-size: cover;
background-position: center center;
}

.page-template-default header.entry-header:after {
content: "";
height: 200px;
width: 100%;
display: block;
position: absolute;
bottom: 0px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}

.page-template-default header.entry-header h1 {
margin: 0 auto;
color: #ffffff;
text-align: center;
padding-left: 20px;
padding-right: 20px;
display: block;
font-size: 2.5em;
position: absolute;
padding-bottom: 60px;
padding-top: 100px;
text-align: center;
width: 100%;
bottom: 0px;
text-shadow: 1px 1px 6px rgba(0,0,0,0.3);
z-index: 2;
}
.page-template-default #post-7820 header.entry-header h1 {
display: none;
}


/*--------------------------------------------------------------
## Hero Styles 2021
--------------------------------------------------------------*/

#featurehero {
box-shadow: 0px 0px 22px rgba(0,0,0,0.2);
position: relative;
}
#featurehero p, #featurehero h1, #featurehero span {
	position: relative;
	margin: 0 auto;
	padding: 0px;
	text-align: center;
}
#featurehero #smallwords {
font-size: 2em;
line-height: normal;
margin-bottom: 0.3em;
}
#featurehero h1 {
font-size: 5em;
line-height: 96%;
font-family: georgiapro, serif;
font-weight: 700;
font-style: normal;
}
#featurehero h1.medium {
font-size: 4em;
}
#featurehero p {
line-height: 145%;
}


#featureintro {
	position: relative;
}



.hero-full #featureintro h1, .hero-half #featureintro h1, .hero-full #featureintro #smallwords, .hero-half #featureintro #smallwords {
	position: relative;
}
.hero-full #featureintro #featureexcerpt, .hero-half #featureintro #featureexcerpt, .hero-full #featureintro #featureauthor, .hero-half #featureintro #featureauthor {
	position: relative;
}
#featureintro #featureauthor:before {
	content: "";
	position: relative;
	height: 2px;
	width: 100px;
	display: block;
	margin: 0 auto;
	margin-bottom: 1.6em;
	margin-top: 1.6em;
}

#featureimage {
background: #000000;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}

#featureimage img, #featureimage video {
position: relative;
display: block;
max-width: none;
max-height: none;
object-fit: cover;
width: 100%;
height: 100%;
}
#featureimage img {
position: relative;
opacity: 0.1;
transform: scale(1.1);
animation: fadeIn08 4s 1s forwards;
}
#featureimage img:nth-of-type(1) {
display: block;
}
#featureimage img:nth-of-type(2) {
display: none;
}
#featureexcerpt {
position: relative;
font-size: 1.2em;
margin: 0 auto;
margin-bottom: 0px;
margin-top: 2em;
display: block;
max-width: 550px;
}
#featureexcerpt p {
position: relative;
margin-bottom: 1em;
font-size: 1.2em;
}
#featureexcerpt p:last-of-type {
margin-bottom: 0px;
}
#featureintroinner {
position: relative;
padding: 70px 30px;
max-width: 700px;
margin: 0 auto;
}
#featureauthor p {
margin-bottom: 0.7em;
}
#featureauthor p:last-of-type {
margin-bottom: 0px;
}
.featureattribution, .featurenames {
width: auto;
margin: 0 auto;
font-size: 0.9em;
}
.featureattribution.authorsolo, .featurenames.authorsolo {
font-size: 1.05em;
}
.featurenames {
font-weight: 600;
}


/* Classic Hero Styles ONLY */

.hero-classic #featureimage.videocontainer {
min-height: 600px;
max-height: 70vh;
height: 70vh;
}


/* Full Width Styles ONLY */

.hero-full #featureintro:before {
content: "";
position: absolute;
left: 0;
top: -30vh;
height: 30vh;
width: 100%;
display: block;
z-index: 1;
}

.hero-full #featureintroinner {
padding-top: 30px;
padding-bottom: 70px;
}
.hero-full #featureimage {
position: -webkit-sticky;
position: sticky;
top: 1px; /* Position Sticky has an iOS bug (and bug in Safari Mac) where if top is set to 0px, it will glitch and temporarily not show the background color for the div that scrolls over the top of the sticky element. Therefore, this is set to 1px. */
z-index: 0;
}
.hero-full #featureintro {
z-index: 2;
}
.hero-full #featureimage {
height: 100vh;
min-height: 500px;
}



/* Half Width Styles ONLY */


.hero-half #featurehero {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
width: 100%;
position: relative;
}
.hero-half #featurehero #featureimage, .hero-half #featurehero #featureintro {
flex: 1;
padding: 0px;
width: 100%;
position: relative;
}
.hero-half #featureintroinner {
padding: 160px 100px 140px 100px;
}
.hero-half #featurehero #featureimage {
position: -webkit-sticky;
position: sticky;
bottom: 0px;
top: 0px;
height: 100vh;
min-height: 500px;
}
.hero-half #featurehero p, .hero-half #featurehero h1, .hero-half #featurehero span {
	text-align: left;
}
.hero-half #featureintro #featureauthor:before {
	margin-left: 0px;
}
.hero-half #featureimage img:nth-of-type(1) {
display: none;
}
.hero-half #featureimage img:nth-of-type(2) {
display: block;
}



/*--------------------------------------------------------------
## Media Queries
--------------------------------------------------------------*/


@media only screen and (max-width: 1100px) {

footer ul#footer-menu {
grid-template-columns: auto auto auto;
row-gap: 10px;
column-gap: 80px;
}

}



@media only screen and (max-aspect-ratio: 3/2) {
.no-objectfit #feature video {
	max-height: 100%;
}
}
@media only screen and (min-aspect-ratio: 3/2) {
.no-objectfit #feature video {
	max-width: 100%;
}
}


@media only screen and (max-width: 1040px) {
#leadincat {
margin-left: 20px;
margin-right: 20px;
}
}


@media only screen and (max-width: 965px) {

	img.alignright, figure.alignright {
		margin-right: auto;
		max-width: 65%;
	}
	img.alignleft, figure.alignleft {
		margin-left: auto;
		max-width: 65%;
	}
	.imagecontainer {
		max-width: 100%;
	}
	.imagecontainer + p img.alignnone {
width: calc(100% - 330px);
}

}

@media only screen and (max-width: 950px) {

.hero-half #featurehero {
flex-direction: column;
}
.hero-half #featurehero #featureimage {
top: 1px;
}
.hero-half #featureintroinner {
padding: 85px 60px 85px 60px;
}


#homeabout {
padding-left: 30px;
padding-right: 30px;
padding-top: 5em;
padding-bottom: 5em;
}
#homeabout .col {
margin-bottom: 3em;
}
#homeabout .col:last-of-type {
margin-bottom: 0px;
}
#homeabout h2 {
text-align: left;
padding: 0px;
margin-left: 0px;
margin-right: 0px;
}
#homeabout p {
margin: 0 auto;
}
#homeabout.col-container {
  flex-direction: column;
}

.modal .column:nth-of-type(1) img {
width: 130%;
max-width: none;
}
.mobilebreak {
display: block;
}

	#feature h2.animate.small .wrap {
		font-size: 5.5vw;
		width: 70%;
		margin-left: 15%;
		margin-right: 15%;
	}
	#feature h2.animate.medium .wrap {
		font-size: 6.5vw;
		width: 70%;
		margin-left: 15%;
		margin-right: 15%;
	}
	#feature h2.animate.large .wrap {
		font-size: 8vw;
		width: 50%;
		margin-left: 25%;
		margin-right: 25%;
	}


/* Don't let the entire caption run the full width of the block */
.touchevents .tile.s100 .over .info {
	max-width: 50%;
}
.touchevents .tile.s12 .over .info, .touchevents .tile.s23 .over .info, .touchevents .tile.s13 .over .info {
	max-width: 100%;
}


ul.griddisplay .alm-reveal, ul.griddisplay .alm-reveal.twocolumns {
grid-template-columns: calc(50% - 4px) calc(50% - 4px);
grid-column-gap: 8px;
grid-row-gap: 8px;
padding: 8px;
}

}

@media only screen and (max-width: 900px) {

	.search-results main h2.entry-title{
		font-size: 1.4em;
	}

	.search-results main h3{
		font-size: .8em;
	}

	.search-results main p{
		font-size: 1em;
	}

	.search-no-results main p{
		font-size: 1em;
		}

}

@media only screen and (max-width: 800px) {

	.single-post .entry-content {
		font-size: 1.25em;
		line-height: 1.45em;
	}

	.single-post .entry-content p span {
		line-height: 1.45em !important;
    	display: inline-block;
    }

	.single-post h3 {
		width: auto;
		max-width: 100%;
		margin-top: 3em;
		padding-top: 0.5em;
		padding-bottom: 0.5em;
	}

	span.name {
		font-size: 1.9vw;
	}




/* caption fade */

.captionfade figure img, .captionfade figure:nth-child(odd) img, .captionfade figure:nth-child(even) img {
width: 100%;
float: none;
margin-bottom: 0px;
padding-right: 30px;
padding-left: 30px;
border-left: none;
border-right: none;
border-bottom: none;
}

.captionfade figure figcaption, .captionfade figure:nth-child(odd) figcaption, .captionfade figure:nth-child(even) figcaption {
width: 100%;
padding: 15px 30px 30px 30px;
border-bottom: none;
float: none;
font-size: 0.75em;
line-height: 155%;
opacity: 1;
border-top: none;
padding-left: 30px;
padding-right: 30px;
}

.captionfade figure:nth-child(odd) figcaption:before {
display: none;
}

.captionfade figure:nth-child(even) figcaption:before {
display: none;
}

nav.primary-nav ul li.floatright.search {
display: none;
}
.modal .column:nth-of-type(1) img {
width: 140%;
max-width: none;
}
.mobilebreak {
display: inline;
}

/* Tiles */

#tilecontainer li, #tilecontainer li.scrolled {
transform: none;
}

#tilecontainer li, #tilecontainer li:nth-child(5n) {
width: 100%;
}

#tilecontainer li, #tilecontainer li:nth-child(3), #tilecontainer li:nth-child(4), #tilecontainer li:nth-child(7), #tilecontainer li:nth-child(9) {
float: none;
}

#tilecontainer li .tileinner, #tilecontainer li:nth-child(5n) .tileinner, #tilecontainer li:nth-child(1) .tileinner, #tilecontainer li:nth-child(3) .tileinner, #tilecontainer li:nth-child(7) .tileinner, #tilecontainer li:nth-child(8) .tileinner {
height: 75vh;
}

.tileinner img, #tilecontainer li:nth-child(1) .tileinner img, #tilecontainer li:nth-child(3) .tileinner img, #tilecontainer li:nth-child(7) .tileinner img, #tilecontainer li:nth-child(8) .tileinner img {
display: block;
}

.tileinner img.vert, #tilecontainer li:nth-child(1) .tileinner img.vert, #tilecontainer li:nth-child(3) .tileinner img.vert, #tilecontainer li:nth-child(7) .tileinner img.vert, #tilecontainer li:nth-child(8) .tileinner img.vert {
display: none;
}

/* Ad Spot */

#illinoisad .illinoisadinner {
display: block;
}

#illinoisad .flex-item-left {
  flex: auto;
}

#illinoisad .flex-item-right {
  flex: auto;
}

#illinoisad a.buttonwhiteoutline, #illinoisad a.inlineblockad {
float: none;
display: block;
}
#illinoisad a.inlineblockad {
margin-bottom: 1.5em;
}

}

@media only screen and (max-width: 775px) {

#subscriptionmodal {
font-size: 0.8em;
background: #FFFFFF;
}
#storiedlogosubblue {
display: block;
width: 180px;
}
#storiedlogosub {
display: none;
}
.modal .column:nth-of-type(1), .modal .column:nth-of-type(2) {
width: 100%;
max-width: 100%;
position: relative;
display: block;
}
.modal .column:nth-of-type(1) {
border-bottom: 1px solid #FFFFFF;
background: #FFFFFF url('https://storied.illinois.edu/wp-content/uploads/subscribebg.jpg') bottom center no-repeat;
background-size: cover;
}
.modal .column:nth-of-type(2) {
padding: 2.8em 30px 3em 30px;
}
.modal .column:nth-of-type(1) img {
width: 300px;
max-width: 100%;
margin: 0 auto;
margin-top: 1em;
padding-left: 30px;
padding-right: 30px;
display: block;
position: relative;
}

}

@media only screen and (max-width: 750px) {



	#feature h2.animate.small .wrap {
		font-size: 6.5vw;
		width: 70%;
		margin-left: 15%;
		margin-right: 15%;
	}
	#feature h2.animate.medium .wrap {
		font-size: 7.5vw;
		width: 70%;
		margin-left: 15%;
		margin-right: 15%;
	}
	#feature h2.animate.large .wrap {
		font-size: 9vw;
		width: 70%;
		margin-left: 15%;
		margin-right: 15%;
	}

	#customheadline {
		font-size: 3.8em;
		max-width: 550px;
	}
	.single-post h3.margintop0 {
		margin-top: -1em;
	}
		.imagecontainer + p img.alignnone {
width: calc(100% - 360px);
}
	.search-results main h1{
  	font-size: 2em;
	}
}

@media only screen and (max-width: 700px) {

footer ul#footer-menu {
grid-template-columns: auto auto;
row-gap: 10px;
column-gap: 80px;
width: 90%;
}

}

@media only screen and (max-width: 650px) {

			.imagecontainer + p img.alignnone {
width: auto;
margin: 0 auto;
}



	#feature h2.animate.small .wrap {
		font-size: 7vw;
		width: 100%;
		margin: 0;
	}
	#feature h2.animate.medium .wrap {
		font-size: 9vw;
		width: 100%;
		margin: 0;
	}
	#feature h2.animate.large .wrap {
		font-size: 11vw;
		width: 100%;
		margin: 0;
	}
	#feature h2 a {
		vertical-align: bottom;
		float: none;
		right: 0;
		left: 0;
	}
	h2.animate>a::before {
		background-color: transparent;
		box-shadow: none;
	}



	#feature .featurecall {
		font-size: 0.25em;
	}
	h2.animate>a::before {
		content: "";
		display: block;
		width: 100%;
		height: 1px;
		position: absolute;
		top: 0px;
		text-align: center;
		background-color: #e84a27;
		/*box-shadow: 15px 0 0 #e84a27, -15px 0 0 #e84a27;*/
		box-decoration-break: clone;
		visibility: hidden;
		-webkit-transform: scaleX(0);
		transform: scaleX(0);
		-webkit-transition: all 0.3s ease-in-out 0s;
		transition: all 0.3s ease-in-out 0s;
		z-index: 2;
	}
	h2.animate>a::before {
		visibility: visible;
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
	}
	h2.animate>a::before:hover {
		visibility: visible;
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
	}

	#feature video {
		/* display: none; */
	}
	#feature video {
	height: 100%;
}

	.fixedimg {
		margin-top: 2.2em;
		margin-bottom: 2.2em;
	}
	.single-post .entry-content p.dropcap:first-letter {
		float: left;
		font-family: "open-sans-condensed", sans-serif;
		font-size: 130px;
		font-weight: 700;
font-style: normal;
		margin: -17px 12px 10px -2px;
		line-height: 120px;
	
	}
	.gallery-item {
		margin: 0px 0px 0px 0px;
	}
	.gallery-item img {
		padding: 5px;
	}

	.alignright,
	.alignleft,
	.alignrcenter {
		width: 100% !important;
		display: block;
		float: none;
		margin: 0 auto;
		margin-bottom: 1.5em;
		max-width: 100%;
	}
	
	img.alignright, figure.alignright {
		max-width: 100%;
	}
	img.alignleft, figure.alignleft {
		max-width: 100%;
	}
	
	
	figure.alignright {
		max-width: 100%;
	}
	figure.alignleft {
		max-width: 100%;
	}
	
	
	
	.slideshowhead {
		margin-top: 4em;
	}
	figure.alignleft {
		margin-right: auto;
		padding: 2px;
	}
	figure.alignleft {
		margin-left: auto;
		padding: 2px;
	}
	figure.aligncenter {
		width: 100% !important;
	}

	span.mystory {
		font-size: 5.5vw;
	}
	.tile .quote p.med-long {
		font-size: 4.9vw;
	}
	span.name {
		font-size: 3.6vw;
	}
	#heading {
		margin-left: 30px;
		margin-right: 30px;
		padding-bottom: 3em;
	}
	#customheadline {
		font-size: 2.6em;
		padding: 0.5em 1em 0.5em 1em;
	}
	#author,
	#photosby {
		width: 100%;
		display: block;
	}
	#subhead {
		font-size: 1.2em;
			padding-left: 1em;
padding-right: 1em;
	}
	#share {
		margin-top: 2em;
	}
	#sharethis {
		-moz-transform: scale(0.8);
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
	}
	div.getty.embed.image {
		padding-left: 30px;
		padding-right: 30px;
		margin-left: 0px;
		margin-right: 0px;
	}
	blockquote {
		margin: 0 0 0 2.5em;
	}
	.pullquote.alignleft, .pullquote.alignright {
	width: 100%;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	font-size: 1.7em;
}
	h5 {
padding: 0.7em 30px 0.7em 3em;
	}


/* Increase font size slightly for tile caption text */
.tile .over .info h1 {
	font-size: 0.925em;
}


}

@media only screen and (max-width: 650px) {
	.hidden-sm {
		display: none !important;
	}
	#swipebox-top-bar #swipebox-title {
	font-size: 0.85em;
	}
	.single-format-gallery #customheadline {
font-size: 2em;
}

.single-format-gallery .gallery-caption {
font-size: 0.7em;
}

}

@media only screen and (max-width: 625px) {

footer .footerflexcolumn:nth-of-type(1) {
align-items: center;
}
footer .footerflexcolumn {
align-items: center;
width: 100%;
}
footer .uofilogocontainer a svg {
margin: 0 auto;
}
footer .socialiconlist {
margin-bottom: 10px;
}
footer .socialiconlist li:last-of-type {
margin-right: 0px;
}
footer #copyrightnotice {
text-align: center;
margin-bottom: 25px;
margin-top: 25px;
}

}

@media only screen and (max-width: 600px) {

#featureimage img:nth-of-type(1) {
display: none;
}
#featureimage img:nth-of-type(2) {
display: block;
}
#featureintroinner {
padding: 50px 30px;
}
#featurehero #smallwords {
font-size: 1.6em;
}
#featurehero h1 {
font-size: 3.5em;
}
#featurehero h1.medium {
font-size: 2.5em;
}


nav.primary-nav ul li.floatright, nav.primary-nav.scrollbg ul li.floatright {
display: none;
}
nav.primary-nav ul li.floatright.alwaysshow {
display: block;
}
nav.primary-nav ul li#mainlogo {
left: auto;
left: 30px;
float: none;
}
.home-slickslider .item .img-fill .info {
padding-left: 30px;
padding-right: 30px;
margin-bottom: 50px;
}
#loader .svgdiv {
width: 60%;
}



ul.griddisplay .alm-reveal, ul.griddisplay .alm-reveal.twocolumns {
display: flex;
padding: 20px;
grid-column-gap: 20px;
grid-row-gap: 20px;
padding-bottom: 0px;
flex-direction: column;
}
ul.griddisplay .alm-reveal li a, .griddisplay ul li a:visited, .griddisplay ul li a:active, .griddisplay ul li a:hover {
display: block;
}


}

@media only screen and (max-width: 550px) {

	.search-results main header.page-header{
		padding-top: 20px;
		padding-bottom: 20px;
	}

.search-results main header.entry-header{
  min-width: 100%;
  padding-right: 0px;
  padding-bottom: 20px;
}

.search-results main div.entry-summary{
	width: 100%;
  float: none;
}

.search-results main h1{
  font-size: 2em;
}

.search-results main h2.entry-title{
  font-size: 1.4em;
}

.search-results main h3{
  font-size: .8em;
}

.search-results main p{
  font-size: 1em;
}


.search-no-results main {
  padding-top: 100px;
  padding-bottom: 100px;
}
.search-no-results main header.entry-header{
  min-width: 100%;
  padding-right: 0px;
  padding-bottom: 20px;
}

.search-no-results main div.entry-summary{
	width: 100%;
  float: none;
}

.search-no-results main h1{
  font-size: 7.0vw;
}

.search-no-results main h2.entry-title{
  font-size: 1.4em;
}

.search-no-results main h3{
  font-size: .8em;
}

.search-no-results main p{
  font-size: 1em;
}

}

@media only screen and (max-width: 500px) {

.hero-half #featureintroinner {
padding: 75px 40px 75px 40px;
}

.home-slickslider .item.slick-active .img-fill img {
display: none;
}
.home-slickslider .item.slick-active .img-fill img.vert, .home-slickslider .item .img-fill img.vert {
	display: block;
}

footer ul#footer-menu {
grid-template-columns: none;
text-align: center;
}

ul.griddisplay .alm-reveal li .objectfill {
width: 100%;
height: auto;
padding-top: 60%;
margin-right: 0px;
display: block;
}
ul.griddisplay .alm-reveal li .textcontent {
display: block;
width: 100%;
}

#storiedlockupintro {
padding-top: 3em;
width: 370px;
}
#homeabout {
padding-top: 3em;
}

.sidenav {
width: 80%; /* Set to 100% width for smaller screens */
padding-left: 20px;
padding-right: 20px;
}

.sidenav-close {
position: absolute;
left: auto;
right: 0px;
top: 32px;
}

nav.primary-nav, nav.primary-nav ul li.floatright {
height: 79px;
}
nav.primary-nav ul li#mainlogo {
top: 22px;
}
nav.primary-nav ul li.floatright a {
margin-top: 32px;
}

#blockilogo {
width: 20px;
}
#storiedlogotype {
width: 132px;
}
#storiedlogolink {
margin-left: 16px;
}
.sidenav li.secondarylink:last-of-type {
padding-bottom: 10em; /*adds space between larger links and smaller ones */
}

#homeabout h2, h2.lineanimate {
font-size: 4em;
}

.homepause {
display: none;
}
#homeslidercontainer.slideisactive .wrapper {
display: none;
}
.home-slickslider .item.slick-active .img-fill .info:before {
display: none;
}
.home-slickslider .item h3 {
font-size: 2em;
}
.home-slickslider .item p {
font-size: 1em;
font-weight: 400;
}

.tileinner .textcontent {
padding: 30px 0px 40px 0px;
}

.home-slickslider .item h3 {
font-size: 2.2em;
}
.home-slickslider .item h3:before {
font-size: 0.35em;
}
.tileinner .textcontent h3 {
font-size: 2.2em;
}
.tileinner .textcontent p {
font-size: 0.95em;
line-height: 135%;
}

.tileinner img, #tilecontainer li:nth-child(1) .tileinner img, #tilecontainer li:nth-child(3) .tileinner img, #tilecontainer li:nth-child(7) .tileinner img, #tilecontainer li:nth-child(8) .tileinner img {
display: none;
}

.tileinner img.vert, #tilecontainer li:nth-child(1) .tileinner img.vert, #tilecontainer li:nth-child(3) .tileinner img.vert, #tilecontainer li:nth-child(7) .tileinner img.vert, #tilecontainer li:nth-child(8) .tileinner img.vert {
display: block;
}

}

@media only screen and (max-width: 450px) {

#recentreads a.button {
width: 85%;
max-width: 100%;
}
a.button span {
padding: 0em 0.5em 0em 0.5em;
}

#loader .svgdiv {
width: 75%;
}

#relatedstories .tileinner h4 {
font-size: 1.7em;
line-height: 100%;
}

#relatedstories .slick-slide .tileinner img {
height: 400px;
}

#relatedtitle {
padding-left: 20px;
padding-right: 20px;
}

#relatedstories .tileinner .textcontent {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}

}

@media only screen and (max-width: 375px) {

#featurehero h1 {
font-size: 2.7em;
}
#featureexcerpt p {
font-size: 1.1em;
}

.sidenav li a {
font-size: 2.1em;
}
.sidenav li ul li a {
font-size: 1.1em;
white-space: normal; /* Added to prevent word wrap */
}
.sidenav li.secondarylink a {
font-size: 0.7em;
}
#searchinputnavsidenav {
width: 140px;
font-size: 1em;
margin-top: 13px;
}

#storiedlogosubblue {
width: 120px;
}
.modal-content h1 {
font-size: 2em;
}

.tileinner .textcontent h3 {
font-size: 1.8em;
}


}

@media only screen and (min-width: 600px) {
.hero-full #featureintroinner {
padding-bottom: 120px;
}
}

@media only screen and (min-width: 651px) {
	.hidden-lg {
		display: none !important;
	}
	.no-touchevents #feature .featureimage.featurevideo {
		background-image: none;
	}
}


@media only screen and (min-width: 900px) {
.search-results main h1 {
       font-size: 50px;
    }

.search-no-results main h1 {
		   font-size: 50px;
	 }
}

@media only screen and (min-width: 950px) {
.hero-half #featureintro {
	background: none;
}
}

@media only screen and (min-width: 1300px) {

#feature h2.animate .wrap {
	padding-bottom: 0.6em;
}

.home-slickslider .item h3 {
font-size: 4em;
}
.tileinner .textcontent h3 {
font-size: 3.2em;
}

}

@media only screen and (min-width: 1400px) {
.hero-classic #featureimage, .hero-classic #featureimage.videocontainer {
min-height: 700px;
max-height: 90vh;
height: 90vh;
}
}

@media only screen and (orientation: landscape) {
.single-format-gallery .gallery-item img {
width: 100vw;
height: auto;
}
}
@media only screen and (orientation: portrait) {
.single-format-gallery .gallery-item img {
width: auto;
height: 100vh;
}
}

@media screen and ( max-height: 500px ) and (min-width: 950px) { 
.hero-half #featurehero #featureimage {
    min-height: auto;
}
}