/* @import url(https://fonts.googleapis.com/css?family=Titillium+Web:900|Roboto:300,700); */

/* Page Design */
body { background-color: #fff; padding: 0; font-family: 'Roboto', sans-serif; color: #444; 
		font-size: 1.7em; font-weight: 900; line-height: 24px; font-weight: 900; margin-left:3%; 		
	margin-right:3%;}
	
header { 
	//margin: 0; 
	margin-left:3%; 
	margin-right:3%;
	background: #ff0000  no-repeat 0 0; 
	height: 85px; 
	padding: 1px; 
	}
article { margin-left:3%; 
	margin-right:3%; }
h1 { font-family: 'Titillium Web', sans-serif; font-size: 1.7em; line-height: 30px; color: #fff; font-weight: 900;  margin-left:3%; 
	margin-right:3%; letter-spacing: 2px; } 

h2 {   font-family: 'Titillium Web', sans-serif; font-size: 1.4em; font-weight: 900; letter-spacing: 2px;}
p {  font-family: 'Titillium Web', sans-serif; margin-left:3%; 
	margin-right:3%; font-size: 1.7em; font-weight: 900;}


/* Table Styles */

table#schedule  {
text-align:center;
border-collapse: collapse;
border-spacing:50px;
background:#fff  repeat top center;
color: #000;
opacity: 1;
width:100%; 

}

table#schedule tbody  tr
  {
  border-top : 1px solid rgba(248,220,174,.8));
  transition: background-color .6s;
   }

table#schedule th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 2px solid #ddd;  
}

table#schedule tbody  tr:nth-child(odd) {background-color: rgba(231,210,124,.6); }
table#schedule tbody  tr:hover {background-color: rgba(231,147,0,.6); }
/* rgba(231,147,0,.6) */


table#schedule thead th:nth-child(1)
 {width:25%;
 padding-left:15px;
  }
 
 
 table#schedule thead th:nth-child(2)
 {
  width:50%;  
  padding-left:30px;
 }
 
 table#schedule thead th:nth-child(3)
 {
  width:25%;
  padding-left:15px;  
 }
 
 table#schedule thead th:nth-child(4)
 {
  width:25%;
  padding-left:15px;  
 }
 
/* button */
.button {
	font-size: 1em; 	
	background-color: white;
	border: 2px solid #008CBA; /* Green */
	color: black;
	padding: 16px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;	
	margin: 4px 2px;
	transition-duration: 0.4s;
	cursor: pointer;
}

.button:hover {
  background-color: #008CBA; /* Green */
  color: white;
}

.buttonBlue {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

.buttonBlue:hover {
  background-color: #008CBA;
  color: white;
}

.glow-on-hover {
    width: 220px;
    height: 50px;
    border: none;
    outline: none;
    color: #fff;
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
	font-size: 1em; 	
	text-align: middle;	
	vertical-align:middle；
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 10px;
}

/* class applies to select element itself, not a wrapper element */
.select-css {
  display: block;
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  padding: .6em 1.4em .5em .8em;
  width:100%;
  max-width: 100%; /* useful when width is set to anything other than 100% */
  box-sizing: border-box;
  margin: 0;
  border: 1px solid #aaa;
  box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
  border-radius: .5em;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #000;
  
  
  background-repeat: no-repeat, repeat;
  /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
  background-position: right .7em top 50%, 0 0;
  /* icon size, then gradient */
  background-size: .65em auto, 100%;
}
/* Hide arrow icon in IE browsers */
.select-css::-ms-expand {
  display: none;
}
/* Hover style */
.select-css:hover {
  border-color: #888;
}
/* Focus style */
.select-css:focus {
  border-color: #aaa;
  /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
  box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
  box-shadow: 0 0 0 3px -moz-mac-focusring;
  color: #fff; 
  outline: none;
}

/* Set options to normal weight */
.select-css option {
  font-weight:normal;
   color: #fff;
}

/* Disabled styles */
.select-css:disabled, .select-css[aria-disabled=true] {
  color: graytext;
 
}

.select-css:disabled:hover, .select-css[aria-disabled=true] {
  border-color: #aaa;
}

img.animated-gif{	
  width: 64px;
  height: auto;
}

$navbar-padding-y:                  $spacer * .5;
$navbar-padding-x:                  null;

$navbar-nav-link-padding-x:         .5rem;

$navbar-brand-font-size:            $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height:               $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end:           1rem;

$navbar-toggler-padding-y:          .25rem;
$navbar-toggler-padding-x:          .75rem;
$navbar-toggler-font-size:          $font-size-lg;
$navbar-toggler-border-radius:      $btn-border-radius;
$navbar-toggler-focus-width:        $btn-focus-width;
$navbar-toggler-transition:         box-shadow .15s ease-in-out;

$navbar-dark-color:                 rgba($white, .55);
$navbar-dark-hover-color:           rgba($white, .75);
$navbar-dark-active-color:          $white;
$navbar-dark-disabled-color:        rgba($white, .25);
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color:  rgba($white, .1);

$navbar-light-color:                rgba($black, .55);
$navbar-light-hover-color:          rgba($black, .7);
$navbar-light-active-color:         rgba($black, .9);
$navbar-light-disabled-color:       rgba($black, .3);
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);

$navbar-light-brand-color:                $navbar-light-active-color;
$navbar-light-brand-hover-color:          $navbar-light-active-color;
$navbar-dark-brand-color:                 $navbar-dark-active-color;
$navbar-dark-brand-hover-color:           $navbar-dark-active-color;

.form_label {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  margin-left: 2rem;
  margin-top: 0.7rem;
  
  transition: all 0.3s;
  border-color: #888;
  transform: translateY(0rem);  
}

.form_input {
  font-family: 'Roboto', sans-serif;
  color: #333;
  font-size: 1rem;
	margin: 0 auto;
  padding: 1.5rem 2rem;
  border-radius: 0.2rem;
  background-color: rgb(255, 255, 255);
  border: none;
  width: 90%;
  border-bottom: 0.3rem solid transparent;
  transition: all 0.3s;
  border-color: #888;  
}

.form_input:.form_label {
  opacity: 0.8;
  visibility: hidden;
  -webkit-transform: translateY(-4rem);
  transform: translateY(-4rem);  
}


@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}



/* Media Queries */
@media screen and (max-width: 3000px) {
	h1 { font-size: 1em; line-height: 0.6em; padding-left: 15px; margin-left:0%; 
	margin-right:0%;}
	h2 { font-size: 0.75em; line-height: 0.6em; padding-left: 15px;margin-left:0%; 
	margin-right:0%; }
	article { margin: 20px 15px; font-size: 0.9em; margin-left:1%; 
	margin-right:1%; }
	table#schedule { font-size: 0.9em; margin-left:1%; 
	margin-right:1%;}
	header { 	
	height:2em;
	}
	
	.glow-on-hover {
		font-size: 0.9em;
	}
	
	.button {
		font-size: 0.9em;
	}
}