.div-slider-and-menobar{
	width:94%;
	height:auto;
	float:right; 
	margin-right:3%;
	margin-top:40px;	
}
.div-slider{
	background-image:url(../image/image-slider.jpg);
	background-size:100% 100%;
	width:50%;
	height:350px;
	float:right;	
}
.title-div-slider{
	width:100%;
	height:auto;
	float:right;	
}
.title-div-slider p{
	color:#e74c3c;
	padding:20px;
	font-size:34px;
	margin-top:60px;
	background-color:rgba(134,199,196,0.63);	
}
.section-div-slider{
	width:100%;
	height:auto;
	float:right;	
}
.section-div-slider p{
	color:#9b59b6;
	padding:24px;
	font-size:18px;	
}
.div-menobar{
	width:50%;
	height:auto;
	float:left;
}
.div-menobar-ar1{
	background-color:#2ecc71;
	width:49%;
	height:171px;
	float:left;
	margin-bottom:8px;
} 
.div-menobar-ar1 i{
    color: #ffffff;
    font-size: 65px;
    margin-top: 8%;	
}
.div-menobar-ar1 p{
    color: #ffffff;
    font-size: 22px;
    margin-top: 3%;	
}
.div-menobar-ar1:hover i{
	transition:.5s;
	transform:rotate(360deg);
}
.div-menobar-ar1:hover p{
	transition:.5s;
	transform:rotate(-360deg);
}
.div-menobar-ar2{
	background-color:#3498db;
	width:49%;
	height:171px;
	float:left;
	margin-left:1%;
	margin-right:1%;
	margin-bottom:8px;
}
.div-menobar-ar2 i{
    color: #ffffff;
    font-size: 65px;
    margin-top: 8%;	
}
.div-menobar-ar2 p{
    color: #ffffff;
    font-size: 22px;
    margin-top: 3%;	
}
.div-menobar-ar2:hover i{
	transition:.5s;
	transform:rotate(360deg);
}
.div-menobar-ar2:hover p{
	transition:.5s;
	transform:rotate(-360deg);
}

.div-menobar-ar3{
	background-color:#9b59b6;
	width:49%;
	height:171px;
	float:left;
}
.div-menobar-ar3 i{
    color: #ffffff;
    font-size: 65px;
    margin-top: 8%;	
}
.div-menobar-ar3 p{
    color: #ffffff;
    font-size: 22px;
    margin-top: 3%;	
}
.div-menobar-ar3:hover i{
	transition:.5s;
	transform:rotate(360deg);
}
.div-menobar-ar3:hover p{
	transition:.5s;
	transform:rotate(-360deg);
}

.div-menobar-ar4{
	background-color:#e74c3c;
	width:49%;
	height:171px;
	float:left;
	margin-right:1%;
	margin-left:1%;
}
.div-menobar-ar4 i{
	color: #ffffff;
    font-size: 65px;
    margin-top: 8%;	
}
.div-menobar-ar4 p{
    color: #ffffff;
    font-size: 22px;
    margin-top: 3%;	
}
.div-menobar-ar4:hover i{
	transition:.5s;
	transform:rotate(360deg);
}
.div-menobar-ar4:hover p{
	transition:.5s;
	transform:rotate(-360deg);
}
							/****** SECTION ******/
section{
	width: 94%;
    height: auto;
    float: right;
    margin-right: 3%;
    margin-top: 20px;	
}
section article{
	width:100%;
	height:auto;
	float:right;
	margin-bottom:40px;	
}
							/****** SECTION ARTICLE NEWS******/
.div-news-ar-1{
	background-color:#FFFFFF;
	width:32%;
	height:auto;
	float:left;
	margin-bottom:10px;	
}
.div-news-ar-2{
	background-color:#FFFFFF;
	width:32%;
	height:auto;
	float:left;
	margin-left:2%;
	margin-bottom:10px;	
}
.div-news-ar-3{
	background-color:#FFFFFF;
	width:32%;
	height:auto;
	float:left;
	margin-left:2%;
	margin-bottom:10px;	
}
							/****** SECTION HEADER******/
.ar-header{
	width:100%;
	height:auto;
	float:right;
	border-bottom:3px solid #34495e;	
}
.ar-header p{
	color:#3F3F3F;
	font-size:16px;
	padding-top:5px;	
}
							/****** SECTION SECTION******/
.ar-section{
	width:100%;
	height:auto;
	float:right;
}
.ar-section p{
	font-size:15px;
	color:#363636;
	padding:10px;
	text-align:justify;	
}
.ar-section .img-ar-header{
	width:95%;
	height:250px;
	margin-top:10px;	
}
.ar-section ul{
	float:right;
	padding:10px;
	list-style-type:none;	
}
.ar-section .div-ar-section-article{
	width:100%;
	height:auto;
	float:right;
	margin-top:5px;
	margin-bottom:5px;
	border-bottom:1px solid #ccc;	
}
.ar-section .div-ar-section-article img{
	width:50%;
	height:100px;	
}
.ar-section .div-ar-section-article .div-ar-section-article-p{
	width:50%;
	height:auto;
	float:left;	
}
.ar-section .div-ar-section-article .div-ar-section-article-p p{
	text-align:center;	
}





							/****** SECTION DIV ABUT******/
.div-ar-about{
	width:78%;
	height:auto;
	float:right;
	margin-right:3%;
	border-right:6px solid #9b59b6;
	margin-top:40px;	
}
.div-ar-about p{
	color:#2E2E2E;
	font-size:15px;
	padding:10px;
	text-align:justify;	
}



							/****** SECTION DIV JHOIN******/
.div-jhoin-left{
	background-color:#2ecc71;
	width:49.5%;
	height:auto;
	float:left;
	cursor:pointer;
	transition:.5s;
}
.div-jhoin-left i{
	font-size: 100px;
    color: #ffffff;	
}
.div-jhoin-left:hover{
	background-color:#27ae60;	
}
.div-jhoin-right{
	background-color:#2ecc71;
	width:49.5%;
	height:auto;
	float:left;
	margin-left:1%;
	cursor:pointer;
	transition:.5s;
}
.div-jhoin-right:hover{
	background-color:#27ae60;	
}
.div-jhoin-right i{
	font-size: 100px;
    color: #ffffff;
}
.div-jhoin-p{
	width:100%;
	height:auto;
	margin-top:10px;	
}
.div-jhoin-p p{
	font-size:15px;
	color:#F3F3F3;
	padding:10px;
}
.div-ar-wid{
	background-image:url(../image/image-ayande.jpg);
	background-size:100% 100%;
	width:100%;
	height:auto;
	float:right;	
}
.div-wid-title{
	background-color: rgba(52, 152, 219, 0.41);
    width: 50%;
    height: auto;
    float: right;
    margin-right: 25%;
    margin-top: 20px;
    margin-bottom: 20px;	
}
.div-wid-title p{
	color:#34495e;
	font-size:18px;	
}
.div-wid-section{
	width:50%;
	height:auto;
	float:right;
	margin-right:25%;
	margin-bottom:20px;	
}
.div-wid-section ul{
	list-style-type:none;	
}
.div-wid-section-vertical{
	background-color: rgba(230, 126, 34, 0.31);
	width:100%;
	height:auto;
	float:right;
	border-right:3px solid #e67e22;
	margin-bottom:5px;	
	cursor:pointer;
}
.div-wid-section-vertical:hover{
	transition:.5s;
	transform:translateX(-10px);
}
.div-wid-section-vertical p{
	color:#2A2A2A;
	padding:10px;	
}
.div-all-input{
	width:100%;
	height:auto;
	float:right;
}
.div-all-input form{
	width:50%;
	height:auto;
	float:right;
}
.div-all-input input[type=text]{
	background-color:#FFFFFF;
	width:90%;
	height:50px;
	border:3px solid #ccc;	
	border-radius:3px;
	margin-top:30px;
	outline:none;
	padding-right:10px;
}
.div-all-input button{
	background-color:#2ecc71;
	width:50%;
	height:50px;
	border-radius:3px;
	margin-top:30px;
	border:none;
	cursor:pointer;
	color:#FFFFFF;
	transition:.5s;
}
.div-all-input button:hover{
	background-color:#27ae60;
}
.div-all-adduser{
	width:50%;
	height:auto;
	float:right;
}
.div-all-adduser .div-all-adduser-vertical{
	background-color:#FFFFFF;
	width:49.5%;
	height:auto;
	float:right;
	display:inline-block;
	margin-left:1%;
	margin-top:10px;
	border-bottom:1px solid #bdc3c7;
padding-bottom: 10px;
}
.div-all-adduser .div-all-adduser-vertical img{
	width:25%;
	height:100px;
	float:right;	
}
.adduser-vertical-p{
    width: 70%;
    height: auto;
    float: left;
    margin-left: 2.5%;	
}
.div-all-adduser .div-all-adduser-vertical p{
    font-size: 15px;
    color: #1D1D1D;
    padding: 4px;
    text-align: center;	
}
.section-legend{
	width:100%;
	height:auto;
	float:right;	
}
.legend-vertical-right{
	width:49.5%;
	height:auto;
	float:right;
	margin-left:1%;
	margin-top:10px;
	padding-bottom:10px;
	border-bottom:1px solid #DFDFDF;	
}
.legend-vertical-right img{
	width:40%;
	height:220px;	
}
.legend-vertical-left{
	width:49.5%;
	height:auto;
	float:right;
	margin-top:10px;	
	padding-bottom:10px;
	border-bottom:1px solid #DFDFDF;
}
.legend-vertical-left img{
	width:40%;
	height:220px;	
}
.legend-p{
	width:50%;
	height:auto;
	float:left;
	margin-left:5%;	
}
.legend-p p{
	font-size:15px;
	color:#212121;
	padding:10px;	
}
.legend-p button{
	background-color:#2ecc71;
	width:auto;
	height:auto;	
	border:none;
	outline:none;
	cursor:pointer;
	color:#D8D8D8;
	padding:2px;
	padding-right:15px;
	padding-left:15px;
}
.legend-p button:hover{
	background-color:#27ae60;
	transition:.5s;	
}
								/******FOOTER******/
footer{
	background-color:#34495e;
	width:100%;
	height:auto;
	float:right;
	border-bottom:5px solid #e74c3c;	
}
.div-f-a{
	width:30%;
	height:auto;
	float:left;
}
.f-ar-section{
	width:95%;
	height:auto;
	margin-right:2.5%;	
	float:right;
}
.f-ar-section table tr td i{
	color:#FFFFFF;
	padding:10px;	
}
.f-ar-section table tr td p{
	color:#FFFFFF;	
	padding:10px;
}
.div-f-b{
	width:70%;
	height:auto;
	float:right;
}
.div-b-right{
	width:40%;
	height:auto;
	float:right;	
}
.div-b-right input[type=text]{
	background-color:#E7E7E7;
	width:95%;
	height:50px;
	border:none;	
	margin-top:10px;
	padding-right:10px;
	border-radius:3px;
	outline:none;
}
.div-b-right input[type=text]:hover{
	background-color:#FFFFFF;	
}
.div-b-right button{
	background-color:#e67e22;
	width:85%;
	height:50px;
	border-radius:3px;
	color:#FFFFFF;
	border:none;
	margin-top:10px;
	margin-bottom:10px;	
}
.div-b-right button:hover{
	background-color:#d35400;
	transition:.5s;
	cursor:pointer;
}
.div-b-left{
	width:60%;
	height:auto;
	float:left;	
}
.div-b-left table tr td{
	color:#FFFFFF;	
}
.div-b-footer{
	width:100%;
	height:auto;
	float:right;
	border-top:1px solid #E0E0E0;	
}
.div-b-footer p{
	color:#DBDBDB;
	padding:10px;	
}
@media screen and (max-width: 971px){
	.div-b-right{
		width:100%;
		margin-bottom:10px;	
	}
	.div-b-left{
		width:100%;
		margin-bottom:10px;	
	}
	.div-all-input form{
		width:100%;
		margin-bottom:20px;	
	}
	.div-all-input input[type=text]{
		width:95%;	
	}
	.div-all-input button{
		width:50%;	
	}
	.div-all-adduser{
		width:100%;	
	}
}
@media screen and (max-width: 892px){
	.legend-vertical-right{
		width:100%;
		margin-left:0%;
	}
	.legend-vertical-left{
		width:100%;
	}
}
@media screen and (max-width: 675px){
	.div-slider{
		width:100%;	
	}
	.div-menobar{
		width:100%;
		margin-top:10px;	
	}
	.div-menobar-ar2{
		width:50%;
		margin-right:0px;	
	}
	.div-menobar-ar4{
		width:50%;
		margin-right:0px;	
	}
	.div-news-ar-1{
		width:100%;	
	}
	.div-news-ar-2{
		width:100%;
		margin-left:0%;	
	}
	.div-news-ar-3{
		width:100%;
		margin-left:0%;	
	}
	.div-jhoin-left{
		width:100%;
		margin-bottom:10px;	
	}
	.div-jhoin-right{
		width:100%;
		margin-left:0px;
	}
}
@media screen and (max-width: 454px){
	.div-f-a{
		width:100%;	
	}
	.div-f-b{
		width:100%;	
	}
	.div-wid-title{
		width:100%;
		margin-right:0%;	
	}
	.div-wid-section{
		width:100%;
		margin-right:0%;	
	}
	.div-all-adduser .div-all-adduser-vertical{
		width:100%;
		margin-left:0%;	
	}
	.legend-vertical-left img{
		width:100%;
	}
	.legend-vertical-right img{
		width:100%;
	}
	.legend-p{
		width:100%;
		margin-left:0%;	
	}
}
@media screen and (max-width: 370px){
	.div-menobar-ar1{
		width:100%;	
	}
	.div-menobar-ar2{
		width:100%;
		margin-left:0px;	
	}
	.div-menobar-ar3{
		width:100%;
		margin-bottom:8px;	
	}
	.div-menobar-ar4{
		width:100%;
		margin-left:0px;	
	}
}