/* * *            *     
     * [ Layout ] *     
     *            * * */

body, select, input, textarea { font: 12px Arial, Helvetica, sans-serif; color: #000000; }
html, body, form, img         { margin: 0; padding: 0; border: 0; }
h1, h2, h3, h4, h5, h6        { margin: 20px 0; }
a                             { color: #638bff; }
a:hover                       { text-decoration: none; }
ul                            { list-style-type: disc; }
ol                            { margin: 20px 30px 20px 5px; padding-left: 10px; }
li                            { margin: 10px 0; }
h1                            { font-size: 201%; }
h2                            { font-size: 181%; }
h3                            { font-size: 161%; }
h4                            { font-size: 141%; }
h5                            { font-size: 121%; }
h6                            { font-size: 111%; }

body                          { background: white; }

.main {
	position: relative;
	padding: 3%;
}

/* * *            *     
     * [ Header ] *     
     *            * * */

header {
	width: 100%;
}
.headerIn {
	width: 24%;
	float: left;
	padding-bottom: 1%;
	margin-bottom: 4%;
}
header a {
	display: block;
	border-bottom: 2px solid #bcbdc0;
}
header img {
	width: 100%;
}
header .text {
	margin-top: 10px;
}
	/* [ menu ] */
		.menu {}

/* * *             *     
     * [ Content ] *     
     *             * * */

.content {
	margin-left: 26%;

}
.workList {
	list-style-type: none;
	padding: 0;
	margin: 0;
	text-align: center;
}
.workList li {
	overflow: hidden;
	margin: 0;
	display: inline-block;
	width: 31%;
	margin-right: 2%;
	margin-bottom: 4%;
	padding-bottom: 1%;
    border: none;
	border-bottom: 2px solid #bcbdc0;
	position: relative;
    outline: none;

}
.workList img {
	width: 100%;
}
.workList li span {
	position: absolute;
	top: 0; left: 0;
	width: 101%; height: 100%;
	background: white;
	opacity: 0;
	animation-fill-mode: both;
	animation-duration: 0.2s;
	animation-timing-function: ease;
	animation-name: item;
    outline: none;
}

nav {
	overflow: hidden;
}

.textBlocks {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.textBlocks li {
	display: inline-block;
	width: 28%;
	border-left: 2px solid #bcbdc0;
	vertical-align: top;
	padding: 0 0 0 2%;
	margin: 0;
}
.textBlocks img {
	width: 100%;
}
.textBlocks li:first-child {
	border: none;
}

.next {
	width: 57px; height: 64px;
	float: right;
	background: url(../images/nav-buttons.png) 0 0 no-repeat;
	animation-fill-mode: both;
	animation-duration: 0.2s;
	animation-timing-function: ease;
	animation-name: nav;
}
.prev {
	width: 57px; height: 64px;
	float: left;
	background: url(../images/nav-buttons.png) 0 -64px no-repeat;
	animation-fill-mode: both;
	animation-duration: 0.2s;
	animation-timing-function: ease;
	animation-name: nav;
}
.next:hover, .prev:hover {
	animation-name: navHover;
}
@keyframes nav {
	from {
		transform: rotate(45deg)
	}
	to {
		transform: rotate(0deg)
	}
}
@keyframes navHover {
	from {
		transform: rotate(0deg)
	}
	to {
		transform: rotate(45deg)
	}
}

@keyframes item {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}
@keyframes itemHover {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.workList li span:hover {
	animation-name: itemHover;
	opacity: 1;
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
	.headerIn {
		width: 31%;
	}
	.content {
		margin-left: 31%;
	}
	.workList {
		text-align: center;
	}
	.workList li {
		width: 44%;
	}
	.textBlocks li {
		width: 44%;
	}
}

@media only screen and (max-width: 767px) {
	.headerIn {
		width: 300px;
		float: none;
		margin-left: auto;
		margin-right: auto;
	}
	.content {
		margin-left: 0px;
	}
	header img {
		width: 300px;
	}
	.workList {
		width: 300px;
		margin: 0 auto;
		padding: 0;
	}
	.workList li {
		width: 100%;
	}
	.textBlocks li {
		width: 100%;
		padding-bottom: 10px;
	}
	.textBlocks li:first-child {
		border-left: 3px solid #bcbdc0;
	}
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
	.headerIn {
		float: none;
		width: 100%;
		margin: 0 auto 3%;
		text-align: center;
	}
	header img {
		width: 420px;
	}

	.content {
		margin-left: 0px;
	}

	.workList {
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}
	.workList li {
		width: 45%;
		margin: 0 2% 2%;
		display: inline-block;
	}
	.textBlocks li {
		width: 45%;
	}
}

/* * *            *     
     * [ Footer ] *     
     *            * * */

footer {
	height: 100px;
	width: 980px;
}