@charset "UTF-8";

@import url(http://fonts.googleapis.com/css?family=Abel);

/* @group sanitize.css */

/*! sanitize.css | CC0 Public Domain | github.com/jonathantneal/sanitize.css */
pre,textarea{overflow:auto}
[hidden],audio:not([controls]),template{display:none}
details,main,summary{display:block}
input[type=number]{width:auto}
input[type=search]{-webkit-appearance:textfield}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
progress{display:inline-block}
small{font-size:75%}
textarea{resize:vertical}
[unselectable]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
*,::after,::before{box-sizing:inherit;border-style:solid;border-width:0}
*{font-size:inherit;line-height:inherit;margin:0;padding:0}
::after,::before{text-decoration:inherit;vertical-align:inherit}
a{text-decoration:none}
audio,canvas,iframe,img,svg,video{vertical-align:middle}
button,input,select,textarea{background-color:transparent;color:inherit;font-family:inherit;font-style:inherit;font-weight:inherit;min-height:1.5em}
code,kbd,pre,samp{font-family:monospace,monospace}
nav ol,nav ul{list-style:none}
select{-moz-appearance:none;-webkit-appearance:none}
select::-ms-expand{display:none}
select::-ms-value{color:currentColor}
table{border-collapse:collapse;border-spacing:0}
::-moz-selection{background-color:#B3D4FC;text-shadow:none}
::selection{background-color:#B3D4FC;text-shadow:none}
}

/* @end */

/* @group slick */

.slick-slider {
	position: relative;
}

.slick-slider button:hover {
	opacity: 1;
}

button.slick-prev {
	top: 0;
	left: 0;
	width: 100px;
	height: 100%;
	margin: 0;
	background: url(../images/icon-arrow-prev.png) center center no-repeat;
	opacity: 0.5;
}

button.slick-next {
	top: 0;
	right: 0;
	width: 100px;
	height: 100%;
	margin: 0;
	padding-bottom: 100px !important;
	background: url(../images/icon-arrow-next.png) center center no-repeat;
	opacity: 0.5;
}

ul.slick-dots {
	height: 20px;
	top: -25px;
}

ul.slick-dots li {
	width: 20px;
	height: 20px;
}

ul.slick-dots li button {
	width: 20px;
	height: 20px !important;
	background: url(../images/icon-dot-gray.png) center center no-repeat;
}

ul.slick-dots li.slick-active button {
	background: url(../images/icon-dot-green.png) center center no-repeat;
}

/* @end */

/* @group common */

body {
	width: 100%;
	height: 100%;
	background: url(../images/bg-dot.png) #333333;
	font: normal 15px/200% Abel, 'Helvetica Neue', Helvetica, Arial, Geneva, sans-serif;
	color: #333333;
	transition: 0.5s ease-in-out;
}

body.section1 {
	background-color: #333333;
}

body.section2 {
	background-color: #FD6899;
}

body.section3 {
	background-color: #FDA929;
}

body.section4 {
	background-color: #2EB130;
}

body.section5 {
	background-color: #3197CA;
}

img {
	border: none;
}

a {
	color: #000000;
	text-decoration: underline;
	outline: none;
	transition: 0.2s ease-out;
}

em {
	font-style: normal;
}

ul {
	list-style: none;
}

hr {
	border-bottom: 1px solid #E6E6E6;
}

#contents > hr {
	margin: 0 10px;
}

div#contents {
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
	-webkit-font-smoothing: antialiased;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}

p {
	text-align: justify;
}

p.image img {
	width: 100%;
}

/* @end */

/* @group header */

header {
	z-index: 1000;
}

header div {
	height: 500px;
	padding: 0 15px;
}

header h1 {
	margin-bottom: 54px;
	padding-top: 200px;
	text-align: center;
}

header h1 a {
	cursor: default;
}

/* @group nav */

nav h2 {
	position: absolute;
	visibility: hidden;
}

nav ul {
	text-align: center;
}

nav ul li {
	display: inline;
	margin: 0 40px;
	color: #808080;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

nav ul li a {
	display: inline-block;
	text-decoration: none;
}

nav ul li:nth-child(1) a:first-letter {
	color: #FD6899 !important;
}

nav ul li:nth-child(1):hover a {
	color: #FD6899;
}

nav ul li:nth-child(2) a:first-letter {
	color: #FFAA00;
}

nav ul li:nth-child(2):hover a {
	color: #FFAA00;
}

nav ul li:nth-child(3) a:first-letter {
	color: #24B324;
}

nav ul li:nth-child(3):hover a {
	color: #24B324;
}

nav ul li:nth-child(4) a:first-letter {
	color: #2996CC;
}

nav ul li:nth-child(4):hover a {
	color: #2996CC;
}

/* @end */

/* @group nav fixed */

div#contents.scrolled header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	padding: 0 10px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

div#contents.scrolled header div {
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	max-width: 1260px;
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 15px 0;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.85);
}

div#contents.scrolled header h1 {
	display: inline-block;
	margin: 0;
	margin-left: -10px;
	padding-top: 0;
	vertical-align: middle;
}

div#contents.scrolled header h1 a {
	cursor: pointer;
}

div#contents.scrolled header h1 a:hover {
	opacity: 0.5;
}

div#contents.scrolled header h1 a img {
	width: 229px;
	height: auto;
}

div#contents.scrolled header nav {
	display: inline-block;
	vertical-align: middle;
}

div#contents.scrolled header nav ul li {
	margin: 0;
	margin-left: 40px;
	color: #808080;
}

div#contents.scrolled div#main {
	padding-top: 500px;
	transition: none;
}

/* @end */

/* @end */

/* @group main */

article {
	margin: 0 10px;
	background-color: #FFFFFF;
}

div#main {
	background-color: #FFFFFF;
}

div#main > h2 {
	display: none;
}

section {
	max-width: 718px;
	margin: 0 auto;
	margin-bottom: 140px;
	padding:  100px 15px 0 15px;
}

section > *:nth-child(n+3) {
	opacity: 0.2;
	transition: 0.5s ease-in-out;
}

body.section2 section#about > *,
body.section3 section#concept > *,
body.section4 section#projects > *,
body.section5 section#contact > * {
	opacity: 1;
}

section h3 {
	margin-bottom: 80px;
	font-size: 42px;
	font-weight: 100;
	text-align: center;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

section h4 {
	color: #808080;
	font-size: 30px;
	font-weight: 100;
	text-transform: uppercase;
}

section p {
	margin-bottom: 80px;
}

section > ul li {
	margin-bottom: 1em;
	line-height: 150%;
}

/* @group about */

section#about h3:first-letter {
	color: #FD6899;
}

section#about em {
	color: #FD6899;
}

section#about h4:first-letter {
	color: #FD6899;
}

section#about h4 {
	margin-bottom: 20px;
	letter-spacing: 0.1em;
}

section#about ul {
	margin-bottom: 80px;
}

section#about ul li {
	padding-left: 18px;
	background: url(../images/icon-listmark.png) left 0.3em no-repeat;
}

/* @end */

/* @group concept */

section#concept h3:first-letter {
	color: #FDA929;
}

section#concept em {
	color: #E48521;
}

/* @end */

/* @group project */

section#projects h3:first-letter {
	color: #2EB130;
}

section#projects em {
	color: #2EB130;
}

section#projects {
	width: 100%;
	max-width: 100%;
	margin-bottom: 140px;
	padding-left: 0;
	padding-right: 0;
}

section#projects > p {
	max-width: 728px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 15px;
}

div#project-list {
	margin: 0;
	padding: 0;
}

div#project-list p.thumb {
	margin-bottom: 30px;
	background: url(../images/icon-arrow-popout.png) center center no-repeat #333333;
}

div#project-list p.thumb img {
	width: 100%;
}

div#project-list p.thumb a img:hover {
	opacity: 0.5;
}


p.project-detail {
	max-width: 748px;
	margin: 0 auto;
	padding: 0 15px;
}

p.project-detail br {
	display: none;
}

p.project-detail span {
	display: block;
	line-height: 150%;
}

p.project-detail span.project:first-letter {
	color: #2EB130;
}

p.project-detail span.client:first-letter {
	color: #2EB130;
}

/* @end */

/* @group contact */

section#contact h3:first-letter {
	color: #3197CA;
}

section#contact em {
	color: #3197CA;
}

section#contact {
	margin-bottom: 0;
	/*padding-bottom: 140px;*/
  padding-bottom: 50%;
}

section#contact dl {
	display: table;
	line-height: 150%;
	margin-bottom: 0.5em;
}

section#contact dl dt {
	display: table-cell;
	width: 5em;
	color: #3197CA;
	text-transform: uppercase;
	white-space: nowrap;
}

section#contact dl dd {
	display: table-cell;
}

.gmap-container {
	margin-bottom: 5px;
}

.gmap-container iframe {
	width: 100%;
}

section#contact p.link-to-gmap {
	margin-bottom: 5px;
	text-align: right;
	font-size: 84%;
}

section#contact p.link-to-gmap a {
	color: #3197CA;
}

/* @end */

/* @end */

/* @group footer */

footer {
	padding: 40px 15px 140px 15px;
	background-color: #FFFFFF;
}

footer .pagetop {
	position: fixed;
	left: 50%;
	bottom: 20px;
	width: 40px;
	height: 40px;
	margin-left: -20px;
	background-color: #666666;
	overflow: hidden;
	border-radius: 20px 20px 20px 20px;
	-moz-border-radius: 20px 20px 20px 20px;
	-webkit-border-radius: 20px 20px 20px 20px;
}

body.section1 footer .pagetop {
	background-color: #333333;
}

body.section2 footer .pagetop {
	background-color: #FD6899;
}

body.section3 footer .pagetop {
	background-color: #FDA929;
}

body.section4 footer .pagetop {
	background-color: #2EB130;
}

body.section5 footer .pagetop {
	background-color: #3197CA;
}

footer small {
	display: block;
	max-width: 728px;
	margin: 0 auto;
	padding-bottom: 100px;
	font-size: 100%;
}

/* @end */

@media (max-width:640px) {

/* @group common */

body {
	background-image: none;
}

/* @end */

/* @group header */

header {
}

header div {
	height: auto;
	padding-top: 80px;
	padding-bottom: 60px;
}

header h1 {
	margin-bottom: 40px;
	padding-top: 0;
}

header h1 img {
	width: 50%;
	min-width: 240px;
}

/* @group nav */

nav ul {
	text-align: center;
}

nav ul li {
	display: block;
	margin-top: 10px;
	
}

/* @end */

/* @end */

/* @group main */

section {
	margin-bottom: 70px;
	padding-top: 50px;
}

section h3 {
	margin-bottom: 40px;
	font-size: 34px;
}

section h4 {
	font-size: 22px;
}

section p {
	margin-bottom: 40px;
}

/* @group about */

section#about ul {
	margin-bottom: 40px;
}

section#about h4 {
	margin-bottom: 10px;
}

/* @end */

/* @group project */

section#projects {
	margin-bottom: 80px;
}

div#project-list > div {
	margin-bottom: 60px;
}

div#project-list p.thumb {
	margin-bottom: 10px;
}

/* @end */

/* @group contact */

section#contact {
	padding-bottom: 70px;
}

.gmap-container iframe {
	height: 240px;
}

section#contact p.link-to-gmap {
	margin-bottom: 20px;
	text-align: center;
}

/* @end */

/* @end */

/* @group footer */

footer .pagetop {
	bottom: 10px;
}

/* @end */
}