@charset "UTF-8";
/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400);
* {
	margin: 0;
	padding: 0;
}
html, body {
	height: 100%;
}
section {
	position: relative;
	width: 100%;
	height: 100%;
}


ol, ul{
list-style: none;
}

/*---------------------*/



@media screen and (max-width: 1024px) {
	.parallax-window {
		background-attachment: fixed !important;
		background-position: center top !important;
		-webkit-background-size: cover !important;
		-moz-background-size: cover !important;
		background-size: cover !important;
	}
}




.parallax-window{
min-height: 100%;
background: transparent;
}


/*--------------------*/

section::after {
	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 80%;
	background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.4) 100%,rgba(0,0,0,.8) 700%);
	background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.4) 100%,rgba(0,0,0,.8) 700%);
}



section img {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
	white-space: nowrap;
}

section .link a {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
	white-space: nowrap;
	transition: opacity .3s;
}

.link a:hover {
	opacity: 0.5;
}


.demo .top a {
	position: absolute;
	bottom: 20px;
	left: 50%;
	z-index: 2;
	display: inline-block;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
	color: #fff;
	font : normal 300 16px/1 'Lato', sans-serif;
	letter-spacing: .1em;
	text-decoration: none;
	transition: opacity .3s;
	margin-left:-30px;
}

.demo .scroll a {
	position: absolute;
	bottom: 20px;
	left: 50%;
	z-index: 2;
	display: inline-block;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
	color: #fff;
	font : normal 300 16px/1 'Lato', sans-serif;
	letter-spacing: .1em;
	text-decoration: none;
	transition: opacity .3s;
	margin-left:-30px;
}
.demo a:hover {
	opacity: .5;
}



#section01 .scroll a {
	padding-top: 70px;
}
#section01 .scroll a span {
	position: absolute;
	top: 0;
	left: 50%;
	width: 24px;
	height: 24px;
	margin-left: -12px;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-animation: sdb05 1.5s infinite;
	animation: sdb05 1.5s infinite;
	box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
	0% {
		-webkit-transform: rotate(-45deg) translate(0, 0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		-webkit-transform: rotate(-45deg) translate(-20px, 20px);
		opacity: 0;
	}
}
@keyframes sdb05 {
	0% {
		transform: rotate(-45deg) translate(0, 0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: rotate(-45deg) translate(-20px, 20px);
		opacity: 0;
	}
}

#section02 .scroll a {
	padding-top: 70px;
}
#section02 .scroll a span {
	position: absolute;
	top: 0;
	left: 50%;
	width: 24px;
	height: 24px;
	margin-left: -12px;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-animation: sdb05 1.5s infinite;
	animation: sdb05 1.5s infinite;
	box-sizing: border-box;
}



@-webkit-keyframes sdb06 {
	0% {
		-webkit-transform: rotate(133.9deg) translate(0, 0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		-webkit-transform: rotate(133.9deg) translate(-60px, 60px);
		opacity: 0;
	}
}
@keyframes sdb06 {
	0% {
		transform: rotate(133.9deg) translate(0, 0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: rotate(133.9deg) translate(-20px, 20px);
		opacity: 0;
	}
}



#section03 .top a {
	padding-top: 30px;
}
#section03 .top a span {
	position: absolute;
	top: 0;
	left: 50%;
	width: 24px;
	height: 24px;
	margin-left: -12px;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotate(133.9deg);
	transform: rotate(133.9deg);
	-webkit-animation: sdb06 1.5s infinite;
	animation: sdb06 1.5s infinite;
	box-sizing: border-box;
}




/*----------*/

#nav-bar{
width: 100%;
height: 50px;
background-color: #000000;
position:fixed;
z-index:1000;
}

#nav-bar img{
float:left;
padding-top:14px;
padding-left:20px;
}

#nav-bar li{
padding:2px;
float:right;
padding-top:10px;
}

#nav-bar li img{
padding-left:10px;
padding-top:10px;
}

#nav-bar ul{
padding-right:10px;
}


#nav-bar .bt1{
padding-right:10px;
filter: url(filters.svg#grayscale);
/* Firefox 3.5+ */
filter: gray;
/* IE6-9 */
-webkit-filter: grayscale(1);
/* Google Chrome & Safari 6+ */
-webkit-transition: all .5s ease-in-out;
}

#nav-bar .bt1:hover{
filter: none;
-webkit-filter: none;
}

/*-------*/


#footer{
height:50px;
margin:auto;
background-color:#000000;
}

#footer p{
color:#999999;
font-size:11px;
font-family: 'Open Sans', sans-serif; font-weight: 400;
float:left;
padding-top:19px;
padding-left:20px;
}

#footer a{
color:#EBEBEB;
font-size:12px;
font-family: 'Open Sans', sans-serif; font-weight: 400;
text-decoration:none;
}

#footer li{
padding:5px;
float:right;
padding-top:12px;
}

#footer ul{
padding-right:12px;
}

#footer .bt1{
color:#EBEBEB;
transition: opacity 0.2s linear;
}

#footer .bt1:hover{
opacity: 0.5;
}

#footer .bt2{
color:#FFFFFF;
transition: opacity 0.2s linear;
}

#footer .bt2:hover{
opacity: 0.5;
}

#footer .bt3{
color:#FFFFFF;
transition: opacity 0.2s linear;
}

#footer .bt3:hover{
opacity: 0.5;
}

#footer .bt4{
color:#FFFFFF;
transition: opacity 0.2s linear;
}

#footer .bt4:hover{
opacity: 0.5;
}