@charset "utf-8";

@font-face{font-family:'roya';src:url('./fonts/roya_bold.eot') format('eot'), url('./fonts/roya_bold.woff') format('woff'), url('./fonts/roya_bold.ttf') format('truetype')}
a:link{
	color:#3CF;
	text-decoration:none;
}
a:hover{
	border:0px;
}
a:visited{
	color:#3CF;
}
a:active{
	color:#FFF;
}
body{
	background-image:url(bg/autumn.jpg);
	background-color:#333;
	background-size:cover;
	width:100%;
	height:100%;
	background-attachment:fixed;
	margin:0px;
	padding:0px;
	font-family:roya;
	font-size:13px;
	letter-spacing:1px;
	word-spacing:0px;
}
.wellcome{
	position:absolute;
	top:200px;
	left:100px;

	font-size:15px;
}
.wellcome h1 {
	border-top:1px solid #FFF;
	border-bottom:1px solid #FFF;
	width:400px;
      font-family: roya;
}

.box{
	float:right;
	background-color:rgba(0,0,0,0.7);
	border-radius:10px;
	width:150px;
	height:150px;
	margin-bottom:10px;
	margin-right:30px;
	clear:both;
	margin-top:0px;	
	transition:all 0.4s;
	-moz-transition:all 0.4s;
	-ms-transition:all 0.4s;
	-o-transition:all 0.4s;
	-webkit-transition:all 0.4s;
}
.box img{
	padding:45px;
	transition:all 0.4s;
	-moz-transition:all 0.4s;
	-ms-transition:all 0.4s;
	-o-transition:all 0.4s;
	-webkit-transition:all 0.4s;
}
.box img:hover{
	transform:scale(1.4,1.4);
	-webkit-transform:scale(1.4,1.4);
	-moz-transform:scale(1.4,1.4);
	-o-transform:scale(1.4,1.4);
	-ms-transform:scale(1.4,1.4);
}
.box:hover{
	background-color: rgba(0,50,150,0.8);
	cursor: pointer;
	box-shadow: 0px 0px 5px 2px #fff;
	-webkit-box-shadow: 0px 0px 5px 2px #fff;
	-moz-box-shadow: 0px 0px 5px 2px #fff;
	-o-box-shadow: 0px 0px 5px 2px #fff;
	-ms-box-shadow: 0px 0px 5px 2px #fff;
}
.main{
	width:980px;
	margin-left:auto;
	margin-right:auto;
}
.maina{
width: 980px;
margin-left: auto;
margin-right: auto;
color: #B8E7F1;
}
.content{
	position:relative;
	direction:rtl;
	width:750px;
	height:500px;
	background-color:rgba(0,0,0,0.7);
	margin-left:30px;
	border-radius:5px;
	margin-top:20px;
	color:#fff;
	overflow:auto;
	word-break:break-all;
	word-wrap:break-word;
	transition:all 0.4s;
	-moz-transition:all 0.4s;
	-ms-transition:all 0.4s;
	-o-transition:all 0.4s;
	-webkit-transition:all 0.4s;
}
.title{
	width:200px;
	height:40px;
	background-color:#1E8D0E;
	border-bottom-left-radius:100px;
	border-bottom-right-radius:100px;
}
.title h1{
	color:#FFF;
	font-size:16px;
	font-weight:bold;
	display:inline;
	line-height:35px;
}
.content h2,h3,h4,h5,h6{
	padding-right:20px;
	line-height:20px;
	padding-left:20px;
}
.content p{
	padding-right: 10px;
line-height: 20px;
padding-left: 20px;
}
.content h2{
	color:#FC0;
	font-size:16px;
	font-weight:bold;
	margin-top:20px;
	display:block;

}

.content h3{
	color:#FC0;
	font-size:13px;
	font-weight:bold;
	display:inline-block;
	line-height:0px;
	padding-left:10px;
}
.content h4{
	color:#FC0;
	font-size:22px;
	font-weight:bold;
	margin-top:0px;
	display:block;
        margin-left: 170px;
width: 200px;
}
hr{
	width:300px;
	height:2px;
	background-color:#FC0;
	border:0px;
}
.content a:hover{
	color:#FFF;
	border-bottom:1px dashed #3CF;
	padding-bottom:3px;
}
.social{
	margin-left:25px;
	margin-top:10px;
}
.social img{
	float:left;
	opacity:0.7;
	-moz-transition:all 0.4s;
	-ms-transition:all 0.4s;
	-o-transition:all 0.4s;
	-webkit-transition:all 0.4s;
	transition:all 0.4s;
}
.social img:hover{
	opacity:1;
	transform:rotate(10deg);
	-webkit-transform:rotate(10deg);
	-moz-transform:rotate(10deg);
	-o-transform:rotate(10deg);
	-ms-transform:rotate(10deg);
}
.footer{
	width: 500px;
	height:30px;
	margin-top:10px;
	background-color:rgba(0,0,0,0.7);
	border-radius:2px;
	margin-left:30px;
	color:#fff;
	padding-top:10px;
	padding-left:10px;
}
.footer a:hover{
	color:#FFF;
	border-bottom:1px dashed #3CF;
	padding-bottom:3px;
}