body {
  font-family: 'Lato', sans-serif;
  font-weight:400;
  color:#333;
}

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

.wrapper {
  width: 100%;
  top: 0px;
  left: 0px;
}

.sep {
margin-top:100px;
}

.logo {
max-height:25px;
margin-top:10px;
}

.top {
margin-top:15px;
}

.clear {
clear:both;
}

.pointer {
cursor:pointer;
}

.footer_info {
color:#ccc;
}

.ico_back {
background-image:url('data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDMxLjQ5NCAzMS40OTQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMxLjQ5NCAzMS40OTQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTI4cHgiIGhlaWdodD0iMTI4cHgiPgo8cGF0aCBkPSJNMTAuMjczLDUuMDA5YzAuNDQ0LTAuNDQ0LDEuMTQzLTAuNDQ0LDEuNTg3LDBjMC40MjksMC40MjksMC40MjksMS4xNDMsMCwxLjU3MWwtOC4wNDcsOC4wNDdoMjYuNTU0ICBjMC42MTksMCwxLjEyNywwLjQ5MiwxLjEyNywxLjExMWMwLDAuNjE5LTAuNTA4LDEuMTI3LTEuMTI3LDEuMTI3SDMuODEzbDguMDQ3LDguMDMyYzAuNDI5LDAuNDQ0LDAuNDI5LDEuMTU5LDAsMS41ODcgIGMtMC40NDQsMC40NDQtMS4xNDMsMC40NDQtMS41ODcsMGwtOS45NTItOS45NTJjLTAuNDI5LTAuNDI5LTAuNDI5LTEuMTQzLDAtMS41NzFMMTAuMjczLDUuMDA5eiIgZmlsbD0iIzAwMDAwMCIvPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K');
background-repeat:no-repeat;
background-size:100%;
width:20px;
height:20px;
}

.box_txt {
font-size:14px;
}

.box_type {
font-size:12px;
font-weight:600;
margin-top:50px;
opacity:0.8;
}

.project_1 {
background-image:url('demos/project_1.png');
}

.project_2 {
background-image:url('demos/project_2.png');
}

.project_3 {
background-image:url('demos/project_3.png');
}

.project_4 {
background-image:url('demos/project_4.png');
}

.project_5 {
background-image:url('demos/project_5.png');
}

.project_6 {
background-image:url('demos/project_6.png');
}

.project_7 {
background-image:url('demos/project_7.png');
}

.project_8 {
background-image:url('demos/project_8.png');
}

.project_9 {
background-image:url('demos/project_9.png');
}

.button_animate {
transition: all 0.4s;
-webkit-transition: all 0.4s;
}

#scroll span {
	position: absolute;
	top: 0;
	left: 50%;
	width: 25px;
	height: 40px;
	margin-left: -15px;
	border: 1px solid #333;
	-webkit-animation: scr1 2s infinite;
	animation: scr1 2s infinite;
	border-radius: 50px;
	box-sizing: border-box;
}
#scroll span::before {
	position: absolute;
	top: 10px;
	left: 50%;
	content: '';
	width: 5px;
	height: 5px;
	margin-left: -2px;
	background-color: #333;
	border-radius: 100%;
	-webkit-animation: scr2 2s infinite;
	animation: scr2 2s infinite;
	box-sizing: border-box;
}

@-o-keyframes scr1 {
	0% {
		-o-transform: translate(0, 0);
	}
	80% {
		-o-transform: translate(0, 4px);
	}
	100% {
			-o-transform: translate(0, 0px);
}
}

@-moz-keyframes scr1 {
	0% {
		-moz-transform: translate(0, 0);
	}
	80% {
		-moz-transform: translate(0, 4px);
	}
	100% {
			-moz-transform: translate(0, 0px);
}
}

@-webkit-keyframes scr1 {
	0% {
		-webkit-transform: translate(0, 0);
	}
	80% {
		-webkit-transform: translate(0, 4px);
	}
	100% {
			-webkit-transform: translate(0, 0px);
}
}
@keyframes scr1 {
	0% {
		transform: translate(0, 0);
	}
	80% {
		transform: translate(0, 4px);
	}
	100% {
		transform: translate(0, 0px);
	}
}

@-o-keyframes scr2 {
	0% {
		-o-transform: translate(0, 0);
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	
	40% {
		opacity: 1;
	}
	80% {
		-o-transform: translate(0, 18px);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@-moz-keyframes scr2 {
	0% {
		-moz-transform: translate(0, 0);
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	
	40% {
		opacity: 1;
	}
	80% {
		-moz-transform: translate(0, 18px);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@-webkit-keyframes scr2 {
	0% {
		-webkit-transform: translate(0, 0);
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	
	40% {
		opacity: 1;
	}
	80% {
		-webkit-transform: translate(0, 18px);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
@keyframes scr2 {
	0% {
		transform: translate(0, 0);
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	
	40% {
		opacity: 1;
		}
	80% {
		transform: translate(0, 18px);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

.scroll_btn {
position:relative;
margin-top:30px;
cursor:pointer;
}