@import url('http://fonts.googleapis.com/css?family=Merriweather+Sans:700,300');
@import url('http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css');

* { padding: 0px; margin: 0px; border: 0px; outline: 0px; }		/* fast reset */


/* a { text-decoration: none; }
a:hover { text-decoration: underline; }*/

li { list-style: none; }

.container { margin: 0px 20% 0px 20%; }
/* .container { margin: 0px 20% 0px 20%; } */

.text-content img{
	height:100%;        /*250px;*/
	width:100%;        /*250px;*/
}


/* *****************  This is what changes the sizes of the images when
           students.php reads from the database to get image files.  *** */
.imgmagic img{
	height:100%;       /*248px;*/
	width:100%;        /*250px;*/
}
/* So let's try adding img-list img to mirror imgmagic img */
.img-list img{
	height:100%;    /*248px;*/
	width:100%;    /*250px;*/
}
/* ********************************* */


ul.img-list {
  list-style-type: none;
  height:198px;               /*Orig: 250px;*/
  width:198px;                /*Orig: 250px;*/
}

ul.img-list li {
	/*display: inline-block;*/
	position: relative;
	margin: 0 1em 1em 0;
	border:4px solid #294b93;
	/* border-style: solid;
	border-width: 2px; */
	height: 100%;           /*188px;              /*250px;*/
	width: 100%;            /*188px;              /*250px;*/
 }

ul.img-list li:hover span.text-content {
  opacity: 1;
}
#head { margin-top: 20px; }
#mobile{
	display:none;
}
.floatStudents{
	float:left;
	padding-left:5px;     /*20px;*/
	padding-top:5px;       /*10px;*/
	text-align:center;
	margin: 20px 25px;
}
span.text-content {
  display:table; 
  padding-top:70%;     /*95px;*/
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
  text-align:center;
  font-size:28px;
  color: black; /*#FF6B00; /*This is a dark-ish orange 
				e6e6e6 This is the original, a pale grey */
  cursor: pointer;
  height: 100%;    /*248px;*/
  width:100%;     /*250px;*/
}

span.text-content span {
	margin:-5px;
	background: rgb(230, 230, 230); /* Fallback for older browsers without RGBA-support */
    background: rgba(230, 230, 230, 0.5);
}

/* ******* Looks like this is not used. ******* */
.info {
	font-size:20px;
	height:377px;
	float:left;
	margin-top:30px;
	margin-left:130px;
	margin-right:50px;
	text-align:center;
}



/* ***** START ******  Max Screen Width less than 1024 CSS-pixels ************* */

@media screen and (max-width: 1024px)
{
	span.text-content {
	  text-align:center;
	  padding-top:-70px;
	  margin-left:5px;     /*10px;*/
	  font-size:20px;      /*25px;*/
	  height: 100%;       /*136px;       /*200px;*/
	  width: 100%;        /*136px;         /*200px;*/
	  opacity: 1;
	}
	.info{
	margin-top:30px;
	text-align:center;
	margin-left:50px;
	}
	body{
		max-width:320px;	
	}
	#mobile{
	display:block;
	font-size:20px;
	text-align:center;
	}
	ul.img-list {
	  height:140px;       /*200px;*/
	  width:140px;       /*200px;*/
	}
	ul.img-list li {
	  height: 100%;      /*138px;       /*200px;*/
	  width: 100%;       /*138px;       /*200px;*/
	}
	.img-list img{
	 height: 100%;       /*200px;*/
	 max-width: 100%;       /*200px;*/
	}
	span .text-content img{
	  height:100%;       /*136px;       /*200px;*/
	  width:100%;        /*136px;       /*200px;*/
	}
	.floatStudents{
		float:left;            /*none;*/
		margin-top:10px;       /*20px;*/
		margin-left:0;         /* Removed 3/05/17 100px; */
	}
	
	/* **************************************************************************** */
	/* ***** START ******  Max Screen Width less than 800 CSS-pixels ************* */
	@media screen and (max-width: 800px)
	{
		ul.img-list {
		  height:100px;       /*200px;*/
		  width:100px;       /*200px;*/
		}
		ul.img-list li {
		  height: 100%;      /*138px;       /*200px;*/
		  width: 100%;       /*138px;       /*200px;*/
		}
		.img-list img{
		 height: 100%;       /*200px;*/
		 max-width: 100%;       /*200px;*/
		}
		span .text-content img{
		  height:100%;       /*136px;       /*200px;*/
		  width:100%;        /*136px;       /*200px;*/
		}
		.floatStudents{
			float:left;            /*none;*/
			margin-top:2px;       /*20px;*/
			margin-left:0;         /* Removed 3/05/17 100px; */
		}
	}
	/* ***** END ******  Max Screen Width less than 800 CSS-pixels ************* */
	/***************************************************************************** */

	
	
}
/* ***** END ******  Max Screen Width less than 1024 CSS-pixels ************* */



#but{
	text-align:center;
	font-size: 46px;
	font-family:Agency_FB;
}

#menu .box {
	position: fixed;
	text-align: center;
	overflow: hidden;
	z-index: -1;
	opacity: 0;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background: rgba(0,0,0,0.8);
	-webkit-transition: all 0.3s ease-in-out; 
	-moz-transition: all 0.3s ease-in-out; 
	-o-transition: all 0.3s ease-in-out; 
	transition: all 0.3s ease-in-out;
}

#menu ul {
	position: relative;
	top: 20%;
	-webkit-transform: scale(2);
	-moz-transform: scale(2);
	-ms-transform: scale(2);
	transform: scale(2);
	-webkit-transition: all 0.3s ease-in-out; 
	-moz-transition: all 0.3s ease-in-out; 
	-o-transition: all 0.3s ease-in-out; 
	transition: all 0.3s ease-in-out;
	
}

#menu li { 
	display: inline-block; 
	margin: 20px;
}

#menu li a {
	border-radius: 3px;
	padding: 15px;
	border: 1px solid transparent;
	text-decoration: none;
	font-size: 18px;
	color: #fff;
	-webkit-transition: all 0.2s ease-in-out; 
	-moz-transition: all 0.2s ease-in-out; 
	-o-transition: all 0.2s ease-in-out; 
	transition: all 0.2s ease-in-out;
}

#menu li a:hover { border-color: #fff; }

#menu li a i { 
	margin-right: 5px; 
	font-size: 24px;
}

#toggle-nav-label {
	color: rgba(0,0,0,0.5);
	background: rgba(0,0,0,0.2);
	text-align: center;
	line-height: 30px;
	font-size: 16px;
	display: inline-block;
	cursor: pointer;
	position: relative;
	z-index: 500;
	width: 30px;
	height: 30px;
	border-radius: 5px;
}

#toggle-nav { display: none; }

#toggle-nav:checked ~ .box { 
	opacity: 1;
	z-index: 400;
}

#toggle-nav:checked ~ .box ul {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

#toggle-nav:checked ~ #toggle-nav-label { 
	background: #fff; 
	color: rgba(0,0,0,0.8);
}

#content { margin: 20px 0px 20px 0px; }

#content h1 {
	margin-bottom: 20px;
	font-size: 30px;
}

#content p {
	font-size: 14px;
	line-height: 150%;
	margin-bottom: 20px;
}
#logo{
	float:right;
	margin-top:-44px;
	 position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}
.center{
    margin-left: -215px;
    margin-top: -58px;
}
#KTPROG{
	font-size:30px;
	text-align:center;
	color: #FF6B00; /*This is a dark-ish orange */
}
to{
    opacity:0;
    top:-5px;
}
.text-animated-one{
display:inline;
position:relative;
top:0px;
-webkit-animation:fade-in 1s infinite;

}
.text-animated-two{
opacity:0;
display:inline;
position:relative;
margin-left:-56px;
-webkit-animation:fade-in 1s infinite;
-webkit-animation-delay:0.5s;
}

.aggettivi{
display:inline;
width:100px;
height:100px;
}

#years{
	text-align:center;
	padding:10px;
}
	

#back{
	float:right;
	font-size:25px;
	margin-top:15px;
}

.classphotos{
	margin:0px;
	width:200px;
}


* {
  margin: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
  box-sizing: inherit;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

*:focus {
	outline: none;
	text-align: center;
}

html { box-sizing: border-box; }

h1, h2, h3, h4, h5 {
  display: block;
  font-weight: 400;
}

li, span, p, a, h1, h2, h3, h4, h5 { line-height: 1; }

p { display: block; }

a { text-decoration: none; }

a:hover { text-decoration: underline; }

img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
}
.letters{
	color: #ff6b00; /* This is a dark-ish orange */
	font-size:40px;
	text-align: center;
}

button {
  background-color: transparent;
  border: 0;
  cursor: pointer;
}

html, body { height: 100%; }



.navigation-bar, .navigation-bar .navbox-tiles, .navbox-trigger, .navbox-tiles .tile, .navbox-tiles .tile .icon .fa, .navbox-tiles .tile .title {
  -webkit-transition: all .3s;
  transition: all .3s;
}

.navbox-tiles:after {
  content: '';
  display: table;
  clear: both;
}

/* Core Styles */
.bar {
	color: white;
	display: in-line;

}
.centerTitle {
	text-align: center;
}

.navigation-bar {
  height: 50px;
  position: relative;
  z-index: 1000;
  margin-bottom: 15px;
}

.navigation-bar .bar {
	background-color: #294b93;
	width: 100%;
	height: 53px;
}

.navigation-bar .navbox {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  -webkit-transform: translateY(-200px);
  -ms-transform: translateY(-200px);
  transform: translateY(-200px);
  -webkit-transition: all .2s;
  transition: all .2s;
}
.navigation-bar .navbox-tiles {
  -webkit-transform: translateY(-200px);
  -ms-transform: translateY(-200px);
  transform: translateY(-200px);
}

.navigation-bar.navbox-open .navbox-trigger { background-color: #ff6b00; }

.navigation-bar.navbox-open .navbox {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: opacity .3s, -webkit-transform .3s;
  transition: opacity .3s, transform .3s;
}

.navigation-bar.navbox-open .navbox-tiles {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.navbox-trigger {
  background-color: transparent;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.navbox-trigger .fa {
  font-size: 20px;
  color: #fff;
}

.navbox-trigger:hover {
	background-color: #484747;
	float: left;
	visibility: visible;
}

.navbox {
  background-color: #484747;
  width: 100%;
  max-width: 380px;
  -webkit-backface-visibility: initial;
  backface-visibility: initial;
}

.navbox-tiles {
  width: 100%;
  padding: 25px;
}

.navbox-tiles .tile {
  display: block;
  background-color: #294b93;
  width: 30.3030303030303%;
  height: 0;
  padding-bottom: 29%;
  float: left;
  border: 2px solid transparent;
  color: #fff;
  position: relative;
}

.navbox-tiles .tile .icon {
  width: 100%;
  height: 100%;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
}

.navbox-tiles .tile .icon .fa {
  font-size: 35px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-backface-visibility: initial;
  backface-visibility: initial;
}

.navbox-tiles .tile .title {
	padding: 5px;
	font-size: 12px;
	position: absolute;
	bottom: 0;
}
body {
	background:url(fancy_deboss.png) repeat top left;
	color: #444;
	font-family: "PT Sans Narrow", Arial, sans-serif;
	font-size: 13px;
	font-weight: 400;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    min-width: 320px;
	max-width:1024px;
	margin:auto;
}
.navbox-tiles .tile:hover {
  border-color: #fff;
  text-decoration: none;
}
.navbox-tiles .tile:not(:nth-child(3n+3)) {
 margin-right: 4.54545454545455%;
}

.navbox-tiles .tile:nth-child(n+4) { margin-top: 15px; }
 @media screen and (max-width: 370px) {

.navbox-tiles .tile .icon .fa { font-size: 25px; }

.navbox-tiles .tile .title {
  padding: 3px;
  font-size: 11px;
}
}
.navbox-trigger1 {  -webkit-transition: all .3s;
  transition: all .3s;
}
    .letter {
        position: relative;
        text-shadow: 0px 0px 3px white;
    }
    .letter:nth-child(1) {
        -webkit-animation: fade 4s infinite 200ms;
        animation: fade 4s infinite 200ms;
    }
    .letter:nth-child(2) {
        -webkit-animation: fade 4s infinite 400ms;
        animation: fade 4s infinite 400ms;
    }
    .letter:nth-child(3) {
        -webkit-animation: fade 4s infinite 600ms;
        animation: fade 4s infinite 600ms;
    }
    .letter:nth-child(4) {
        -webkit-animation: fade 4s infinite 800ms;
        animation: fade 4s infinite 800ms;
    }
    .letter:nth-child(5) {
        -webkit-animation: fade 4s infinite 1000ms;
        animation: fade 4s infinite 1000ms;
    }
    .letter:nth-child(6) {
        -webkit-animation: fade 4s infinite 1200ms;
        animation: fade 4s infinite 1200ms;
    }
    .letter:nth-child(7) {
        -webkit-animation: fade 4s infinite 1400ms;
        animation: fade 4s infinite 1400ms;
    }
    .letter:nth-child(8) {
        -webkit-animation: fade 4s infinite 1600ms;
        animation: fade 4s infinite 1600ms;
    }
 
 
    @keyframes fade {
        50% {
            opacity: 0.02;
        }
    }


#marginpage{
}

#classof2016{
	text-align:center;
	font-size:25px;
	margin-top:15px;
}
#eye{
	margin:0px;
	width:200px;
}
.floatright{
	float:right;
}
.floatleft{
	float:left;
}

.dankofamerica img{
	width:236px;
}

.namefooter{
	text-align:center;
	margin-top: 15px;
	clear: both;
}
.social {
	float:right;
	border-style:solid;
}
.social img{
	display:inline;
	width:30px;
	padding-top:5px;
}
.centerText{
	text-align:center;
}
#egg{
	width:110px;
}
.clearFloat{
	clear:both;
}
.fixfo{
	margin-top:10%;
}
#testtest{
	position:absolute;
	z-index:1000;
	color:white;
	font-size:40px;
	padding-left:50%;
	padding-right:50%;
	width:50px;
}
.globalPic{
	height:300px;
	width:300px;
	border-width:1px;
	border-style:solid;
	border-color:black;
}
.fixCenter{
	width:1020px;     /*831px;*/
	margin:auto;
}
#names{
	text-align:center;
	font-size:35px;
}
#names-small{
	text-align:left;
	font-size:16px;
	padding-left:50px;
}
.fixer{
	margin-top:35px;
	}

.boxfix{
	padding: 0 15px;
	padding-top: 10px;
	padding-bottom: 10px;
}
.boxfix p {
	margin: 5px 0px;
}
.holder{
	margin-left:20px;
	width:400px;
	border-radius: 25px;
    border: 2px solid;

	
}
.syllaTitle{
	text-align:center;
	font-size: 120%;
	color:black;
}
.left{
	float:left;
	width:450px;
	
}
.name3{
	font-size: 110%;
	text-align:center;
}
.right{
	float:left;
	width:450px;
}
#profileDiv {
	border: 3px solid #294b93;
	border-radius:15px;
	height:95%;         /* You are here. Making Freshman Web Games page work. */
	margin-left:10px;
	margin-right:10px;
}
.profileFrame {
	border-radius:15px;
	width:100%;
	height:100%;
}