/* ---------------------------
	Login page Header
============================== */
header { position: relative; background: rgba(255, 255, 255, 0.8); text-align: left; margin-bottom: 10rem; border-bottom: solid 5px rgba(95, 126, 31, 0.8);}

@media all and (max-width: 767px) {
	header { margin-bottom: 3rem;}
}

header img { padding: .2rem 0; }

/* ---------------------------
	Login page Forms
============================== */
.login.panel, .new.panel { background: rgba(255, 255, 255, 0.9); padding: .5rem; border: none; border-radius: 5px; }

.login.panel .forgot { font-size: 0.8250rem; padding: 0.25rem 0; }

.login.panel label, .new.panel label { padding: 0 0 0.25rem; font-size: 0.8250rem; }

.login.panel input, .new.panel input, login.panel select, .new.panel select { border-radius: 5px; font-size: 0.8250rem; }

.login.panel .title, .new.panel .title { font-size: 1.15rem; font-weight: 500; padding: 0.25rem 0; margin: 0; }

.login.panel .title .normal, .new.panel .title .normal { font-weight: normal; }

.login.panel .secondary, .new.panel .secondary { background: #8cb148; color: white; }

.login.panel .secondary:hover, .login.panel .secondary:active, .new.panel .secondary:hover, .new.panel .secondary:active { background: #718f3a; }

.login.panel .fa-input { font-family: 'FontAwesome', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }

/* ---------------------------
	Login page Welcome Message
============================== */
.welcome-content p, .welcome-content ul, .welcome-content ol { color: white; font-size: 1.2rem; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25); }

.main .title { color: white; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25); font-weight: 700; }

.create .main .title { color: #000; text-shadow: none; }

.main h1.title { font-size: 28px; }

.main h2.title { font-size: 22px; }

.main h3.title {color: black; text-shadow: none;}

.main .welcome-content a { color: #fff; text-decoration: underline; }

/* ---------------------------
	Login page, full-width slideshow
	----------------------
	Purpose: Twitter-like background image slider
	Notes: Uses CSS3 with a Modernizr based fallback
	Source: http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/
============================== */
.slideshow { background: #333; }

@media all and (max-width: 767px) {
	.slideshow {background: #CCC url(/images/brand/noisy-texture-100.png) repeat;}
	.slideshow li {display: none;}
	
}

.slideshow, .slideshow:after { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; list-style: none; margin: 0; padding: 0; }

.slideshow:after { content: ''; background: rgba(0, 0, 0, 0.15); }

.slideshow li span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 50s linear infinite 0s; -moz-animation: imageAnimation 50s linear infinite 0s; -ms-animation: imageAnimation 50s linear infinite 0s; -o-animation: imageAnimation 50s linear infinite 0s; animation: imageAnimation 50s linear infinite 0s; }

.slideshow li div { z-index: 1; position: absolute; bottom: 30px; left: 0px; width: 100%; text-align: center; opacity: 0; color: #fff; -webkit-animation: titleAnimation 50s linear infinite 0s; -moz-animation: titleAnimation 50s linear infinite 0s; -ms-animation: titleAnimation 50s linear infinite 0s; -o-animation: titleAnimation 50s linear infinite 0s; animation: titleAnimation 50s linear infinite 0s; }

.slideshow li div p { font-size: 1.40rem; padding: 0; margin: 0; text-shadow: 1px 1px 2px #333; }

/*
--- Replace the span text with a BG image. Show/hide based on a 10s break.
*/
/* Original. I tried adding this to the login page so that it could be dynamic, but no luck
.slideshow li:nth-child(1) span { background-image: url(../images/login-backgrounds/XU-01.jpg); }

.slideshow li:nth-child(2) span { background-image: url(../images/login-backgrounds/XU-02.jpg); -webkit-animation-delay: 10s; -moz-animation-delay: 10s; -ms-animation-delay: 10s; -o-animation-delay: 10s; animation-delay: 10s; }

.slideshow li:nth-child(3) span { background-image: url(../images/login-backgrounds/XU-03.jpg); -webkit-animation-delay: 20s; -moz-animation-delay: 20s; -ms-animation-delay: 20s; -o-animation-delay: 20s; animation-delay: 20s; }

.slideshow li:nth-child(4) span { background-image: url(../images/login-backgrounds/XU-04.jpg); -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -ms-animation-delay: 30s; -o-animation-delay: 30s; animation-delay: 30s; }

.slideshow li:nth-child(5) span { background-image: url(../images/login-backgrounds/XU-05.jpg); -webkit-animation-delay: 40s; -moz-animation-delay: 40s; -ms-animation-delay: 40s; -o-animation-delay: 40s; animation-delay: 40s; }

*/

.slideshow li:nth-child(1) span { background-image: url(/images/login-background/bg1.jpg); }

.slideshow li:nth-child(2) span { background-image: url(/images/login-background/bg2.jpg); -webkit-animation-delay: 10s; -moz-animation-delay: 10s; -ms-animation-delay: 10s; -o-animation-delay: 10s; animation-delay: 10s; }

.slideshow li:nth-child(3) span { background-image: url(/images/login-background/bg3.jpg); -webkit-animation-delay: 20s; -moz-animation-delay: 20s; -ms-animation-delay: 20s; -o-animation-delay: 20s; animation-delay: 20s; }

.slideshow li:nth-child(4) span { background-image: url(/images/login-background/bg4.jpg); -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -ms-animation-delay: 30s; -o-animation-delay: 30s; animation-delay: 30s; }

.slideshow li:nth-child(5) span { background-image: url(/images/login-background/bg5.jpg); -webkit-animation-delay: 40s; -moz-animation-delay: 40s; -ms-animation-delay: 40s; -o-animation-delay: 40s; animation-delay: 40s; }


/*
.slideshow li:nth-child(6) span{
	background-image: url(../images/login-backgrounds/XU-06.jpg);
	-webkit-animation-delay: 50s;
	   -moz-animation-delay: 50s;
	    -ms-animation-delay: 50s; 	     -o-animation-delay: 50s;
			animation-delay: 50s;
}
*/

/*
--- These divs show/hide based on a 10s break. It's for the captions
*/
/*.slideshow li:nth-child(1) div {} // Nothing needed here, it'll show on load

.slideshow li:nth-child(2) div { -webkit-animation-delay: 10s; -moz-animation-delay: 10s; -ms-animation-delay: 10s; -o-animation-delay: 10s; animation-delay: 10s; }

.slideshow li:nth-child(3) div { -webkit-animation-delay: 20s; -moz-animation-delay: 20s; -ms-animation-delay: 20s; -o-animation-delay: 20s; animation-delay: 20s; }

.slideshow li:nth-child(4) div { -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -ms-animation-delay: 30s; -o-animation-delay: 30s; animation-delay: 30s; }

.slideshow li:nth-child(5) div { -webkit-animation-delay: 40s; -moz-animation-delay: 40s; -ms-animation-delay: 40s; -o-animation-delay: 40s; animation-delay: 40s; }

.slideshow li:nth-child(6) div{
	-webkit-animation-delay: 50s;
	   -moz-animation-delay: 50s;
	    -ms-animation-delay: 50s; 	     -o-animation-delay: 50s;
			animation-delay: 50s;
}*/

/* 
--- Animation for the slideshow images 
*/
@-webkit-keyframes imageAnimation { 0% { opacity: 0; }
  2% { opacity: 1; }
  8% { opacity: 1; }
  17% { opacity: 1; }
  25% { opacity: 0; }
  100% { opacity: 0; } }
@-moz-keyframes imageAnimation { 0% { opacity: 0; }
  2% { opacity: 1; }
  8% { opacity: 1; }
  17% { opacity: 1; }
  25% { opacity: 0; }
  100% { opacity: 0; } }
@-o-keyframes imageAnimation { 0% { opacity: 0; }
  2% { opacity: 1; }
  8% { opacity: 1; }
  17% { opacity: 1; }
  25% { opacity: 0; }
  100% { opacity: 0; } }
@-ms-keyframes imageAnimation { 0% { opacity: 0; }
  2% { opacity: 1; }
  8% { opacity: 1; }
  17% { opacity: 1; }
  25% { opacity: 0; }
  100% { opacity: 0; } }
@keyframes imageAnimation { 0% { opacity: 0; }
  2% { opacity: 1; }
  8% { opacity: 1; }
  17% { opacity: 1; }
  25% { opacity: 0; }
  100% { opacity: 0; } }
/* 
--- Animation for the image captions 
*/
@-webkit-keyframes titleAnimation { 0% { opacity: 0; }
  2% { opacity: 1; }
  8% { opacity: 1; }
  17% { opacity: 1; }
  19% { opacity: 0; }
  100% { opacity: 0; } }
@-moz-keyframes titleAnimation { 0% { opacity: 0; }
  2% { opacity: 1; }
  8% { opacity: 1; }
  17% { opacity: 1; }
  19% { opacity: 0; }
  100% { opacity: 0; } }
@-o-keyframes titleAnimation { 0% { opacity: 0; }
  2% { opacity: 1; }
  8% { opacity: 1; }
  17% { opacity: 1; }
  19% { opacity: 0; }
  100% { opacity: 0; } }
@-ms-keyframes titleAnimation { 0% { opacity: 0; }
  2% { opacity: 1; }
  8% { opacity: 1; }
  17% { opacity: 1; }
  19% { opacity: 0; }
  100% { opacity: 0; } }
@keyframes titleAnimation { 0% { opacity: 0; }
  2% { opacity: 1; }
  8% { opacity: 1; }
  17% { opacity: 1; }
  19% { opacity: 0; }
  100% { opacity: 0; } }
/* Show at least something when animations not supported, uses Modernizr html class */
.no-cssanimations .slideshow li span { opacity: 1; }