html, body {
	height: 100%;
	margin: 0px;
	padding: 0px;
	font-family: Helvetica, Arial;
	background-color: #F2F4F5;
	font-weight: 300;
}

.welcome {
	height: 100%;
	margin-bottom: 60px;
	
	background-image: url("images/alameda.jpg");
	background-repeat: no-repeat;
	background-size: cover; 
	background-attachment: fixed;
}

.logo {
	float: left;
	height: 60px;
	padding-left: 30px;
	padding-top: 30px;
}

.subject {
	float: right;
	padding-right: 30px;
	padding-top: 30px;
	text-align: right;
	font-size: 18px;
}

.container {
	position: absolute;
	width: 100%;
	text-align: center;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-60%);
    font-size: 120px;
}

.container #small {
	text-align: center;
	font-size: 20px;
	margin-bottom: 0px;
}

.scroll {
	bottom: 0px;
	width: 100%;
	text-align: center;
	position: absolute;
	color: #6E6E6E;
}

.scroll a:link, .scroll a:visited {
	color: #6E6E6E;
	text-decoration: none;
}

.students {
	width: 820px;
	display: block;
  	margin-left: auto;
  	margin-right: auto;
  	margin-bottom: 100px;
  	text-align: center;
}

.content {
	width: 820px;
	display: block;
  	margin-left: auto;
  	margin-right: auto;
  	text-align: left;
}

.content table {
	text-align: center;
	line-height: 30px;
	border-collapse: collapse;
}

.content a {
	color: #719CAA;
}

/*
.content a:after {
    content: " »";
}
*/

h1, h2 {
	text-align: center;
	margin-bottom: 30px;
}

h1 {
	color: #214C5A;
}

h2 {
	margin-top: 30px;
}

table {
	margin-bottom: 15px;
}

.footer {
	margin-top: 100px;
	padding-top: 20px;
	padding-bottom: 20px;
	width: 100%;
	background-color: #BDEDFF;
	text-align: center;
	color: #000;
	
	background-image: url("images/taguspark.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

#name {
	padding-top: 5px;
	font-size: 16px;
}

#number {
	font-size: 30px;
}

/* Bob */
@-webkit-keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }

  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }

  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

@keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }

  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }

  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

@-webkit-keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

@keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

.hvr-bob {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}

.hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active {
  -webkit-animation-name: hvr-bob-float, hvr-bob;
  animation-name: hvr-bob-float, hvr-bob;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}

.ac-container {
	width: 100%;
	text-align: left;
	
}

.ac-container label {
	padding: 10px 20px;
	position: relative;
	z-index: 20;
	display: block;
	height: 30px;
	cursor: pointer;
	color: #000;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
	line-height: 33px;
	font-size: 19px;
	background: #ffffff;
	background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
	background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
	box-shadow: 
		0px 0px 0px 1px rgba(155,155,155,0.3),
		0px 2px 2px rgba(0,0,0,0.1);
}

.ac-container label:hover {
	background: #c6e1ec;
}

.ac-container input:checked + label,
.ac-container input:checked + label:hover {
	background: #c6e1ec;
	color: #3d7489;
	box-shadow: 
		0px 0px 0px 1px rgba(155,155,155,0.3), 
		0px 2px 2px rgba(0,0,0,0.1);
}

.ac-container input {
	display: none;
}

.ac-container article {
	background: rgba(255, 255, 255, 0.5);
	margin-top: -1px;
	overflow: hidden;
	height: 0px;
	position: relative;
	z-index: 10;
	-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}

.ac-container article a:hover {
	color: #000;
}

.ac-container input:checked ~ article {
	-webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}

.ac-container input:checked ~ article.links {
	height: 150px;
}

@media (max-width: 820px) {
	.container {
		font-size: 80px;
	}
	
	.students, .content {
		width: 95%;
	}
	
	table {
		font-size: 14px;
		line-height: 190%;
	}
	
	#name {
		font-size: 14px;
		line-height: 120%;
	}
	
	.ac-container label {
		padding: 10px 0px;
		text-align: center;
		font-size: 16px;
		font-weight: 500;
	}
}

@media (max-width: 568px) {
	.logo {
		height: 38px;
	}
	
	.subject {
		font-size: 10px;
	}
	
	.scroll {
		font-size: 14px;
		height: 85px;
	}
	
	.scroll p {
		margin-bottom: 5px;
	}
	
	.scroll img {
		height: 50px;
	}
}