Team:USTC-Software/css/slider

.fssopen, .fssopen body { /* class added to HTML element when full screen slider is open to hide potential body scrollbars */

   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   margin: 0;
   overflow: hidden;

}

.fullscreenslider {

   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   z-index: 2000;
   font-size: 16px; /* base font size */
   visibility: visible;
   overflow: hidden;

}

.slidewrapper { /* wrapper DIV that surrounds the ARTICLE elements inside .dd_fullscreenslider */

   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   -webkit-transform: translate3d(0, 0, 0); /* to prevent flickering in iOS */
   -moz-transition: -moz-transform 0.5s; /* actual duration controlled by script */
   -webkit-transition: -webkit-transform 0.5s;
   transition: transform 0.5s;

}

.fssnav { /* UL list dynamically added by script for Slider navigation */

   list-style: none;
   margin: 0;
   position: absolute;
   top: 50%; /* vertically center menu */
   right: 80px; /* distance from right edge of screen */
   transform: translateY(-50%); /* vertically center menu */

}

.fssnav li {

   margin-bottom: 15px;

}

.fssnav li a {

   text-decoration: none;
   border: 2.5px solid #225378; /* border color of nav links */
   opacity: 0.8;
   border-radius: 50%;
   width: 16px; /* dimensions of nav links */
   height: 16px;
   display: block;
   position: relative;
   text-indent: -500px;
   outline: none;
   overflow: hidden;

}

.fssnav li a::after { /* create "fill" element inside A */

   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   top: 100%;
   left: 0;
   background: #2c3e50; /* color of "fill" element */
   opacity: 0.9;
   transition: top 0.5s; /* transition for "fill up" effect */

}

.fssnav .selected a::after {

   top: 0; /* fill up selected A element from bottom to top */

}

.fullscreenslider .slide { /* CSS for each slide */

   width: 100%;
   height: 100%;
   display: block;
   font-family: 'Droid Sans', sans-serif; /* Use google font */
   font-size: 60px;
   color: #2c3e50;
   overflow: hidden;
   -webkit-box-sizing: border-box; /* include padding/ border as part of declared menu width */
   -moz-box-sizing: border-box;
   z-index: 1000;
   background: white;
   -webkit-transform: translate3d(0, 0, 0); /* to prevent flickering in iOS */

}

.fullscreenslider .slide h2 { /* H2 Header inside each slide */

   font-size: 3em;
   margin: 0;
   line-height: 1.1em;
   letter-spacing: 3px;

}

.fullscreenslider .slide .scrollable { /* Assign this class to elements within a slide that should be scrollable */

   overflow: auto;

}

.fullscreenslider .slide {

   background: white;

}

.fullscreenslider .closex { /* Large x close button inside Slider */

   width: 50px;
   height: 50px;
   overflow: hidden;
   display: block;
   position: fixed;
   cursor: pointer;
   text-indent: -1000px;
   opacity: 0.8;
   z-index: 1001;
   top: 5px;
   right: 3px;

}

.fullscreenslider .closex::after { /* render large x inside close button */

   content: "";
   display: block;
   position: absolute;
   width: 100%;
   height: 6px;
   background: white; /* color of x button */
   top: 50%;
   margin-top: -3px;
   -ms-transform: rotate(-45deg);
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);

}

.fullscreenslider .closex::after { /* render large cross inside close button */

   -ms-transform: rotate(-135deg);
   -webkit-transform: rotate(-135deg);
   transform: rotate(-135deg);

}

.bio-text {

   margin-top: 30%;
   font-size:30px;
   line-height: 40px;

}