/* Added Styles  */
.newsCaption{text-align:left;font-style:italic;font-size: small; padding-bottom: 25px;}

.webcam-video { aspect-ratio: 16 / 9; width: 100%; }

/****  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:normal;  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%;
    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;

}
.grayButton:hover {
    background:linear-gradient(to bottom, #ddd 5%, #ddd 100%);
	background-color:#ddd;
    border:1px solid #cc0000;
	text-decoration: none !important;
	color: #666 !important;
}
.grayButton:active {
	position:relative;
}

.grayButtonOn {
    width: 100%; 

    background:linear-gradient(to bottom, #666 5%, #666 100%);
	background-color:#666;
    /* border-radius:16px; */
	border:1px solid #cc0000;
	display:inline-block;
	color: #fff !important;
	font-family:Arial;
	font-size:16px;
    text-align:center;
	font-weight:bold;
	padding:8px 41px;
	text-decoration:none;

}

.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;
}


  


/* 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)
  );
}

/************** SVG Related  ****************/
.svg-white {
filter: invert(100%) sepia(19%) saturate(2%) hue-rotate(96deg) brightness(113%) contrast(101%);
}

.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)
        }

}

/************** Christmas Snow ****************/

.snowflake {
  color: #fff;
  font-size: 3.2em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px #000;
}
 
.snowflake,.snowflake .inner{animation-iteration-count:infinite;animation-play-state:running}@keyframes snowflakes-fall{0%{transform:translateY(0)}100%{transform:translateY(110vh)}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;user-select:none;cursor:default;animation-name:snowflakes-shake;animation-duration:3s;animation-timing-function:ease-in-out}.snowflake .inner{animation-duration:10s;animation-name:snowflakes-fall;animation-timing-function:linear}.snowflake:nth-of-type(0){left:1%;animation-delay:0s}.snowflake:nth-of-type(0) .inner{animation-delay:0s}.snowflake:first-of-type{left:10%;animation-delay:1s}.snowflake:first-of-type .inner,.snowflake:nth-of-type(8) .inner{animation-delay:1s}.snowflake:nth-of-type(2){left:20%;animation-delay:.5s}.snowflake:nth-of-type(2) .inner,.snowflake:nth-of-type(6) .inner{animation-delay:6s}.snowflake:nth-of-type(3){left:30%;animation-delay:2s}.snowflake:nth-of-type(11) .inner,.snowflake:nth-of-type(3) .inner{animation-delay:4s}.snowflake:nth-of-type(4){left:40%;animation-delay:2s}.snowflake:nth-of-type(10) .inner,.snowflake:nth-of-type(4) .inner{animation-delay:2s}.snowflake:nth-of-type(5){left:50%;animation-delay:3s}.snowflake:nth-of-type(5) .inner{animation-delay:8s}.snowflake:nth-of-type(6){left:60%;animation-delay:2s}.snowflake:nth-of-type(7){left:70%;animation-delay:1s}.snowflake:nth-of-type(7) .inner{animation-delay:2.5s}.snowflake:nth-of-type(8){left:80%;animation-delay:0s}.snowflake:nth-of-type(9){left:90%;animation-delay:1.5s}.snowflake:nth-of-type(9) .inner{animation-delay:3s}.snowflake:nth-of-type(10){left:25%;animation-delay:0s}.snowflake:nth-of-type(11){left:65%;animation-delay:2.5s}




/************** Circle Images ****************/

.circular-square {
 border-radius: 50%; 
 border: 10px solid #cc0000;
  }

.circular-bio {position: relative; width: 450px; height: 450px; overflow: hidden; border-radius: 50%; } 
.circular-bio img {width: 100%; height: auto; 
    
}



/************** Tooltips ****************/

.tooltip-win {
  position: relative;
  display: inline-block;
  border-bottom: 3px dotted #cc0000;
  cursor: help;
}


/* Other Buttons */





.degree-button {
    width: 100%; 
	background-color:#ffffff;
	border:2px solid #cc0000;
	display:inline-block;
	color:#cc0000;
	font-size:20px;
    text-align:center;
	font-weight:bold;
	padding:8px 41px;
	text-decoration:none;
	border-radius: 25px;

}
.degree-button:hover {
	background-color:#eeeeee;
}
.degree-button:active {
	position:relative;
	top:1px;
}



.zoom-tile {
transition: transform 0.3s ease; /* Smooth transition for the transform property */
}

.zoom-tile:hover {
  transform: scale(1.1); /* Increase the size of the logo by 10% */
}