@charset "utf-8";


/* ----------------------------------------------------------------------------ResetStyle*/

a, abbr, acronym, address, applet, article, aside, audio,
b, big, blockquote, body, caption, canvas, center, cite, code,
dd, del, details, dfn, dialog, div, dl, dt, em, embed,
fieldset, figcaption, figure, form, footer,
header, hgroup, h1, h2, h3, h4, h5, h6, html,
i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav,
object, ol, output, p, pre, q, ruby,
s, samp, section, main, small, span, strike, strong, sub, summary, sup,
tt, table, tbody, textarea, tfoot, thead, time, tr, th, td,
u, ul, var, video {
	font-size:100%;
	vertical-align:baseline;
	white-space:normal;
	text-align:left;
	margin:0;
	padding:0;
	border:0;
	outline:0;
	background:transparent;
}

article, aside, dialog, figure, footer, header, hgroup, menu, nav, section{ display:block; }
ol,ul,li{ list-style:none; }
blockquote, q{ quotes:none; }
table{ border-collapse:collapse; border-spacing:0; }
img, td{ vertical-align:top; }
/*img{ vertical-align:bottom; }*/
address,em,cite { font-style:normal; }
fieldset {border:none; }
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal; }



/* ----------------------------------------------------------------------------Coomon*/

/*Box Sizing*/
div, p, ul, li{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing:border-box;
}

/*Clear Fix*/
/* For modern browsers */
.cf:before,
.cf:after{ content: "";display:block;overflow:hidden; }
.cf:after{ clear: both; }

/* For IE 6/7 (trigger hasLayout) */
.cf { zoom: 1; }

.clear{ clear: both; }

/*img*/
img{
	width: 100%;
	height: auto;
}

/*Font*/
body{
	font-family: 'Montserrat', "Hiragino Kaku Gothic Pro", Helvetica, sans-serif;
	line-height: 1;
	font-feature-settings : "palt";
	/*letter-spacing: 0.01em;*/
	-webkit-text-size-adjust:100%;
	/*FontRendering*/
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing:grayscale;
	}
h1,h2,h3,h4,h5,h6{
	font-size:100%;
	font-weight:normal;
}
.fontM{
	font-family: 'Montserrat', sans-serif;
}




/* ----------------------------------------------------------------------------Link*/

a{
	outline: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0.25);
}
a:focus{
	outline: none;
}

/*Link Text*/
a:link{
	color: #21ade5;
	text-decoration: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
a:visited{
	color: #21ade5;
	text-decoration: none;
}
a:hover{
	color: #fff;
	text-decoration: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

/*Layout*/
html {
	height: 100%;
}
body {
	height: 100%;
	background:#000;
	color:#fff;
}
#wrapper{
	width:100%;
	background: url(../img/bg_dot.png) repeat;
}


/* ----------------------------------------------------------------------------Loding*/

#loding{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 70px;
	height: 70px;
	z-index: 5;
}

/*
Copyright (c) 2016 Connor Atherton
All animations must live in their own file
in the animations directory and be included
here.
*/
/*Ball-clip-rotate-multiple*/
@-webkit-keyframes triangle-skew-spin{
	25% {
		-webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
		transform: perspective(100px) rotateX(180deg) rotateY(0);
	}
	50% {
		-webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
		transform: perspective(100px) rotateX(180deg) rotateY(180deg);
	}
	75% {
		-webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
		transform: perspective(100px) rotateX(0) rotateY(180deg);
	}
	100% {
		-webkit-transform: perspective(100px) rotateX(0) rotateY(0);
		transform: perspective(100px) rotateX(0) rotateY(0);
	}
}
@keyframes triangle-skew-spin{
	25% {
		-webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
		transform: perspective(100px) rotateX(180deg) rotateY(0);
	}
	50% {
		-webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
		transform: perspective(100px) rotateX(180deg) rotateY(180deg);
	}
	75% {
		-webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
		transform: perspective(100px) rotateX(0) rotateY(180deg);
	}
	100% {
		-webkit-transform: perspective(100px) rotateX(0) rotateY(0);
		transform: perspective(100px) rotateX(0) rotateY(0);
	}
}

.triangle-skew-spin > div {
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	width: 0;
	height: 0;
	border-left: 35px solid transparent;
	border-right: 35px solid transparent;
	border-bottom: 65px solid rgba(33, 173, 229, 1);
	-webkit-animation: triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
	animation: triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
}