/* Added Styles  */
.newsCaption{text-align:left;font-style:italic;font-size: small; padding-bottom: 25px;}

/****  Split Lists into Columns ****/

.text-columnizer-2{
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

.text-columnizer-3{
    /* -webkit-column-count: 3; */ /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

.text-columnizer-3 li,.text-columnizer-2 li{
    -webkit-column-break-inside:avoid;
        -moz-column-break-inside:avoid;
        -o-column-break-inside:avoid;
        -ms-column-break-inside:avoid;
        column-break-inside:avoid;      
        break-inside: avoid;
}

@media (max-width:480px) {
/*Portrait Mobile Phone*/
    
.text-columnizer-2{
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
}

.text-columnizer-3{
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
}
}

@media screen AND (max-width:1090px) {
                        .text-columnizer-3 {-webkit-column-count: 2;-moz-column-count: 2;column-count: 2;}                
                }

                @media screen AND (max-width:700px) {
                        .text-columnizer-3 {-webkit-column-count:1;-moz-column-count:1;column-count:1;}
                }


/****  End of Split Lists into Columns ****/


/****  Make lists have no style ****/
.list-unstyled {
    padding-left: 0;
    list-style: none;
} 

/****  End of Make lists have no style ****/



/* JSU Stories  */
.pulledquote { float: right; width: 300px;  padding: 10px 20px;  font-size: 1.5em; line-height: 1.5em; margin-left: 20px; margin-bottom: 20px; border-left: 2px solid #b1b1b1; color: #cc0000;}
.pulledquoteleft { float: left; width: 300px;  padding: 10px 20px;  font-size: 1.5em; line-height: 1.5em; margin-right: 20px; margin-bottom: 20px; border-right: 2px solid #b1b1b1; color: #cc0000;}
.cutline { font-style:italic;  font-size: .8em; line-height: 1.5em; color: #686868;}
.stories-header { font-family: 'Merriweather', serif;letter-spacing: 0.02em;font-size: 1rem; font-style: italic; color: #363636; line-height: 1.33; }
.indexquote { text-align: right;float: right;  padding: 10px 20px;  font-size: 1.6em; line-height: 1.5em;font-style: italic; margin-left: 20px;   color: #656565;padding: 15%;font-family: 'Merriweather', serif;}

a.stories-button, .stories-button { display: inline-block; font-family: 'Open Sans', sans-serif; font-size: .9rem; background-color: #dddddd; color: #fff; content: '\f178'; margin-top: 10px; margin-right: 55px; padding: 9px 15px; text-transform: uppercase; text-decoration: none; cursor: pointer; border: none; letter-spacing: 0.09em; }
.mainContent a.stories-button:hover, #mainWrapper a.stories-button:hover, .stories-button:hover { color: #fff; text-decoration: none; background-color: #a80505; }
a.no-line {text-decoration: none;}


/* CTA Homepage Buttons */
a.home-cta-button, .home-cta-button { width: 100%; display: inline-block; font-family: 'Open Sans', sans-serif; font-size: 1.1rem; background-color: #cc0000; 
color: #fff; content: '\f178'; margin-top: 10px; margin-right: 55px; padding: 9px 15px; text-transform: uppercase; text-decoration: none; cursor: pointer; 
border: solid; border-width: thin; border-color: #a80505; letter-spacing: 0.09em; }

.mainContent a.home-cta-button:hover, #mainWrapper a.home-cta-button:hover, .home-cta-button:hover { color: #fff; text-decoration: none; background-color: #a80505; }

/* Added for Library Springshare Chat */
a#lcs_slide_out_button-12620 {visibility: visible; top: -50px;}

.somebigtext {
    font-size: 10em;
    line-height: 1.1;
}


.noticebox {
    width: 100%; 
    padding:20px;
    font-size: 1.1rem;
	background-color:#fffdc6;
	border-radius: 16px;
	border:5px solid #cc0000;
}


/* Misc Buttons */

.grayButton {
    width: 100%; 
    box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:linear-gradient(to bottom, #ffffff 5%, #ffffff 100%);
	background-color:#ffffff;
	border-radius:16px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#666666;
	font-family:Arial;
	font-size:16px;
    text-align:center;
	font-weight:bold;
	padding:8px 41px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}
.grayButton:hover {
    background:linear-gradient(to bottom, #f5f5f5 5%, #dcdcdc 100%);
	background-color:#ddd;
    border:1px solid #cc0000;
}
.grayButton:active {
	position:relative;
}

.grayButtonOn {
    width: 100%; 
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:linear-gradient(to bottom, #f5f5f5 5%, #dcdcdc 100%);
	background-color:#dcdcdc;
	border-radius:16px;
	border:1px solid #cc0000;
	display:inline-block;
	color:#666666;
	font-family:Arial;
	font-size:16px;
    text-align:center;
	font-weight:bold;
	padding:8px 41px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}

.newcolButton {
    width: 100%; 
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:linear-gradient(to bottom, #ffffff 5%, #ffffff 100%);
	background-color:#ffffff;
	border:1px solid #cc0000;
	display:inline-block;
	color:#666666;
	font-family:Arial;
	font-size:16px;
    text-align:center;
	font-weight:bold;
	padding:8px 41px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}
.newcolButton:hover {
	background:linear-gradient(to bottom, #f5f5f5 5%, #ffffff 100%);
	background-color:#f5f5f5;
}
.newcolButton:active {
	position:relative;
	top:1px;
}


        
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted #cc0000;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}




/* Added Escape Button code for TitleIX Site */

#escapeButton {
    color: #ffffff;
	background-color: #D24719;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	margin-right: 5px;
	margin-left: 5px;
	text-align: center;
	padding: 0.4em;
	font-size: 0.8em;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	box-shadow:0px 2px 15px #888888;
	z-index: 100;
	transition: background-color 300ms ease-out;
}

#escapeButton:hover {
	background-color: #A03613;
	box-shadow:0px 2px 10px #888888;
}

#escapeButton #exitTitle{
	font-weight: bold;
	letter-spacing: 0.5em;
}
/* End of Escape Button */


/****** Styling to skip down to main content ******/
a.skip-main {
    left:-999px;
    position:absolute;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
    z-index:-999;
}
a.skip-main:focus, a.skip-main:active {
    color: #fff;
    background-color:#000;
    left: auto;
    top: auto;
    width: 30%;
    height: auto;
    overflow:auto;
    margin: 10px 35%;
    padding:5px;
    border-radius: 15px;
    border:4px solid yellow;
    text-align:center;
    font-size:1.2em;
    z-index:999;
}
/****** End of skip to main content ******/
html {scroll-behavior: smooth;}

/************** Font Sizes or Colors  ****************/
.text-small {
	 font-size: .8rem;
}
.text-large {
	 font-size: 1.5rem;
}
.text-xlarge {
	 font-size: 1.8rem;
}

.highlight-yellow {
  border-radius: 1em 0 1em 0;
  background-image: linear-gradient(
    -100deg,
    rgba(255, 224, 0, 0.2),
    rgba(255, 224, 0, 0.7) 95%,
    rgba(255, 224, 0, 0.1)
  );
}


/************** Halloween ****************/
.halloween-flier {
        pointer-events: none;
}

.halloween-flier > * {
/* Adjust animation duration to change the element<92>s speed */
        animation: fly 50s linear infinite;
        pointer-events: none !important;
        top: 0;
        left: 0;
        transform: translateX(-120%) translateY(-120%) rotateZ(0);
        position: fixed;
        animation-delay: 1s;
        z-index: 999999;
}

 /* Keyframe values control where the element will begin
    and end its trajectory across the screen. Each rule
    represents a path the element follows across the screen. */


@keyframes fly {

        98.001%, 0% {
                display: block;
                transform: translateX(-200%) translateY(100vh) rotateZ(0deg)
        }

        15% {
                transform: translateX(100vw) translateY(-100%) rotateZ(180deg)
        }

        15.001%, 18% {
                transform: translateX(100vw) translateY(-30%) rotateZ(0deg)
        }

        40% {
                transform: translateX(-200%) translateY(3vh) rotateZ(-180deg)
        }

        40.001%, 43% {
                transform: translateX(-200%) translateY(-100%) rotateZ(-180deg)
        }

        65% {
                transform: translateX(100vw) translateY(50vh) rotateZ(0deg)
        }

        65.001%, 68% {
                transform: translateX(20vw) translateY(-200%) rotateZ(180deg)
        }

        95% {
                transform: translateX(10vw) translateY(100vh) rotateZ(0deg)
        }
}


.halloween-flier2 {
        pointer-events: none;
}

.halloween-flier2 > * {
/* Adjust animation duration to change the element<92>s speed */
        animation: fly2 50s linear infinite;
        pointer-events: none !important;
        top: 0;
        left: 0;
        transform: translateX(-120%) translateY(-120%) rotateZ(0);
        position: fixed;
        animation-delay: 1s;
        z-index: 999999;
}

 /* Keyframe values control where the element will begin
    and end its trajectory across the screen. Each rule
    represents a path the element follows across the screen. */


@keyframes fly2 {

        98.001%, 0% {
                display: block;
                transform: translateX(-200%) translateY(100vh) rotateZ(0deg)
        }

        10% {
                transform: translateX(100vw) translateY(-100%) rotateZ(50deg)
        }

        10.001%, 28% {
                transform: translateX(100vw) translateY(-30%) rotateZ(0deg)
        }

        44% {
                transform: translateX(-200%) translateY(3vh) rotateZ(-60deg)
        }

        44.001%, 49% {
                transform: translateX(-200%) translateY(-100%) rotateZ(-45deg)
        }

        52% {
                transform: translateX(100vw) translateY(50vh) rotateZ(0deg)
        }

        65.001%, 77% {
                transform: translateX(20vw) translateY(-200%) rotateZ(45deg)
        }

        95% {
                transform: translateX(10vw) translateY(100vh) rotateZ(0deg)
        }
}



.halloween-spider {
        pointer-events: none;
}

.halloween-spider > * {
/* Adjust animation duration to change the element<92>s speed */
        animation: crawl 40s linear infinite;
        pointer-events: none !important;
        top: 0;
        left: 0;
        transform: translateX(-120%) translateY(-120%) rotateZ(0);
        position: fixed;
        animation-delay: 1s;
        z-index: 999999;
}

 /* Keyframe values control where the element will begin
    and end its trajectory across the screen. Each rule
    represents a path the element follows across the screen. */


@keyframes crawl {

        99.001%, 0% {
                display: block;
                transform: translateX(-60%) translateY(5%) rotateZ(0deg)
        }


        10% {
                transform: translateX(250%) translateY(40%) rotateZ(0deg)
        }


        40% {
                transform: translateX(400%) translateY(-200%) rotateZ(0deg)
        }
        44% {
                transform: translateX(0%) translateY(0%) rotateZ(0deg)
        }   
        47% {
                transform: translateX(0%) translateY(0%) rotateZ(0deg)
        }         

        95% {
                transform: translateX(600%) translateY(50%) rotateZ(0deg)
        }
        98% {
                transform: translateX(600%) translateY(-500%) rotateZ(0deg)
        }

}
