/*
*
* CSS
*
*/

html, body { height: 100%; }

body {
	font-family: 'Alegreya Sans', sans-serif;
	margin: 0px;
	padding: 0px;
}

b { font-weight: 300; }

a {
	text-decoration: none;
	color: #000;
}

hr {
	border: 0;
	border-top: 1px solid #000;
	width:100%;
}

.top {
	height: 20px;
	width: 100%;
	position: fixed;
	top: 0px;
}
.bottom {
	height: 20px;
	width: 100%;
	position: fixed;
	bottom: 0px;
}
.outer {
	width:100%;
	height: 100%;
	background-color:rgba(255, 255, 255, 0.8);
	text-align:center; 
	vertical-align: middle;
	display: table;
}
.mid {
	height: 100%;
}
.inner {
	margin: 0 auto;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: left;
	font-weight: 100;
	display: table;
}

.inner img {
	max-height: 220px;
	float: right;
}

.image, .text, .list-text, .project-text {
	padding: 35px;
}

.mid, .image, .text, .list-text, .project-text { 
	display: table-cell; 
	vertical-align: middle;
	text-align: justify;
}
.title { font-size: 69px; padding-bottom: 28px; }
.name { font-size: 51px; padding-bottom: 10px; }
.desc { font-size: 32px; padding-bottom: 24px; }
.links { font-size: 41px; }

.list-text, .project-text { height: 230px; width: 483px; }

.list-title { font-size: 34px; width:100%; display: inline-block;}
.list-div { font-size: 28px; width:100%; height:160px; overflow: auto; display: inline-block; }

.project-title { font-size: 40px; }
.project-desc { 
	height: 140px; 
	font-size: 32px; 
	margin-top: 10px; 
	display: table-cell; 
	vertical-align: middle;
}
.project-links { font-size: 36px; }

/* Animation */

.cycle {
    -webkit-animation: backgrounds 40s cubic-bezier(1,0,0,1) infinite;
    -moz-animation: backgrounds 40s cubic-bezier(1,0,0,1) infinite;
    -ms-animation: backgrounds 40s cubic-bezier(1,0,0,1) infinite;
}

.image img {
    -webkit-animation: rotation 40s linear infinite;
    -moz-animation: rotation 40s linear infinite;
    -ms-animation: rotation 40s linear infinite;
}

@-webkit-keyframes rotation {
    0%   { -webkit-transform: rotate(360deg); }
    100% { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes rotation {
    0%   { -moz-transform: rotate(360deg); }
    100% { -moz-transform: rotate(0deg); }
}
@-ms-keyframes rotation {
    0%   { -ms-transform: rotate(360deg); }
    100% { -ms-transform: rotate(0deg); }
}
@-webkit-keyframes backgrounds {
  0% { background-color: #fff; } 
  12.25% { background-color: #ff6b6b; } /* Red */
  25% { background-color: #ffa66b; } /* Orange */
  37.5% { background-color: #ffff6b; } /* Yellow */
  50% { background-color: #6bff6b; } /* Green */
  62.5% { background-color: #6b6bff; } /* Blue */
  75% { background-color: #896bc4; } /* Indigo */
  87.5% { background-color: #c46bff; } /* Violet */
  100% { background-color: #fff; }
}
@-moz-keyframes backgrounds {
  0% { background-color: #fff; } 
  12.25% { background-color: #ff6b6b; } /* Red */
  25% { background-color: #ffa66b; } /* Orange */
  37.5% { background-color: #ffff6b; } /* Yellow */
  50% { background-color: #6bff6b; } /* Green */
  62.5% { background-color: #6b6bff; } /* Blue */
  75% { background-color: #896bc4; } /* Indigo */
  87.5% { background-color: #c46bff; } /* Violet */
  100% { background-color: #fff; }
}
@-ms-keyframes backgrounds {
  0% { background-color: #fff; } 
  12.25% { background-color: #ff6b6b; } /* Red */
  25% { background-color: #ffa66b; } /* Orange */
  37.5% { background-color: #ffff6b; } /* Yellow */
  50% { background-color: #6bff6b; } /* Green */
  62.5% { background-color: #6b6bff; } /* Blue */
  75% { background-color: #896bc4; } /* Indigo */
  87.5% { background-color: #c46bff; } /* Violet */
  100% { background-color: #fff; }
}

/* Mobile */
@media (max-width: 900px) {
	.inner img {
		max-height:200px;
		float: none;
	}
	.inner {
		text-align: center;
	}
	.image, .text { 
		display: block; 
		text-align: center;
		padding: 20px;
	}
	.list-text, .project-text {
		padding: 0px;
		width:100%;
	}
	.list-div, .project-text {
		text-align: center;
	}
	.project-desc {
		margin: 10px;
		height: initial;
		padding-top: 10px;
		padding-bottom: 10px;
		display: block;
	}
	.title, .name, .links, .desc, 
	.list-text, .list-title, .list-div,
	.project-text, .project-title, .project-desc,
	.project-links { font-size: 20px; }
	.title {
		padding-bottom:10px;
	}
}