/* CSS Document */

body, html { margin:0; padding:0; min-height:100%; min-width:100%;}
#ud_wrapper { max-width:800px; width:90%; margin:0 auto 0 auto;}
#ud_wrapper h2 { position:relative; font-size:40px; text-align:center; width:60%; margin:150px auto 50px auto;}
#ud_wrapper h2::after { content:""; position:absolute; bottom: -20px; left:50%; margin:0 0 0 -25px; width:50px; height:5px; background:#000;}
#ud_wrapper article p { font-size:22px; line-height:35px; color:#666; text-align:justify;}
#ud_wrapper article { margin:30px 0 100px 0;}

/* ######################################################### */
/* ############## Pre Loader ############################### */
/* ######################################################### */

#ud_preloader { 
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	z-index:10000;
background: rgb(14,14,14);
background: radial-gradient(circle, rgba(14,14,14,1) 0%, rgba(0,0,0,1) 100%);
	}
	

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
}
body {
	background: #000;
}
.box-outer {
	overflow: hidden;
	margin: 50px auto;
	width: 200px;
	height: 200px;
}
.main_box {
	width: 200px;
	height: 200px;
	position: relative;
	border: 5px solid transparent;
}
.anim_bar {
	position: absolute;
	width: 50px;
	height: 5px;
	background: #fff;
	transition: all 1s linear;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}
.anim_bar.delay {
	animation-delay: 0.5s;
	-webkit-animation-delay: 0.5s;
}
.top {
	top: -5px;
	left: -5px;
}
.right {
	top: 18px;
	right: -28px;
	transform: rotate(90deg);
}
.bottom {
	bottom: -5px;
	left: -5px;
}
.left {
	top: 18px;
	left: -28px;
	transform: rotate(90deg);
}
 @-webkit-keyframes h-move {
 0% {
left: -5px;
}
100% {
left: 200px;
}
}
 @keyframes h-move {
 0% {
left: -5px;
}
100% {
left: 200px;
}
}
.top, .bottom {
	-webkit-animation-name: h-move;
	animation-name: h-move;
}
 @-webkit-keyframes v-move {
0% {
top: -5px;
}
100% {
top:228px;
}
}
 @keyframes v-move {
 0% {
top: -5px;
}
100% {
top:228px;
}
}
.right, .left {
	-webkit-animation-name: v-move;
	animation-name: v-move;
}