@charset "utf-8";
* {
	margin: 0px;
	padding: 0px;
}
body{
	font-family: 'Abel', sans-serif;
	font-size:18px;
	background:url(../images/bg.jpg) repeat;	
}
.total {
    transition: all ease-in-out 0.3s;
    float: left;
    width: 100%;
    position: relative;
    left: 0;
}
p{
	text-align:justify;
	line-height:26px;
	margin-bottom:20px;
}
.web-wrapper{
	margin:0 auto;
	width:100%;
	max-width:1100px;
}
.top-strip{
	float:left;
	width:96%;
	padding:5px 2%;
	background:#000;
	color:#fff;
	text-align:center;
}
header{
	float:left;
	width:100%;
	box-shadow:0 0 5px #333;
	z-index:99;
	position:relative;
	background:#fff;
	transition:all ease-in-out 0.2s;
}
.logo{
	float:left;
	width:20%;
}
.logo img{
	max-width:175px;
}
nav{
	float:right;
	text-align:right;
	padding-top:20px;
}
nav ul{
	display:table;
	width:100%;
}
nav li{
	display:table-cell;
	list-style:none;
	position:relative;
	padding:0 5px;
}
nav li a{
	display:block;
	padding:10px;
	text-align:center;
	text-decoration:none;
	position:relative;
	border:1px solid #ccc;
	font-size:22px;
	color:#8b0544;
}
nav li::before {
    position: absolute;
    top: 0;
    content: "";
    background: #8b0544;
    height: 1px;
    width: 0;
    z-index: 9;
    left: 5px;
	transition:all ease-in-out 0.2s;
}
nav li::after {
    position: absolute;
    bottom: 0;
    content: "";
    background: #8b0544;
    height: 1px;
    width: 0;
    z-index: 9;
    left: 5px;
	transition:all ease-in-out 0.2s;
}
nav li a::before {
    position: absolute;
    bottom: 0;
    content: "";
    background: #8b0544;
    height: 0;
    width: 1px;
    z-index: 9;
    left: -1px;
	transition:all ease-in-out 0.2s;
}
nav li a::after {
    position: absolute;
    bottom: 0;
    content: "";
    background: #8b0544;
    height: 0;
    width: 1px;
    z-index: 9;
    right: -1px;
	transition:all ease-in-out 0.2s;
}
nav li:hover:before, nav li:hover:after {
    width: 88%;
}
nav li:hover a:before, nav li:hover a:after {
    height: 100%;
}
.banner{
	float:left;
	width:100%;
}
.banner img{
	display:block;
	width:100%;
}
.main-content{
	float:left;
	width:100%;
	position:relative;
}
.content-sec{
	float:left;
	width:96%;
	padding:20px 2%;
	background:rgba(255,255,255,0.8);
	text-align:center;
	margin-top:-85px;
}
.content-sec h1{
	margin-bottom:20px;
}
footer{
	float:left;
	width:96%;
	background:#8b0544;
	text-align:center;
	padding:5px 2%;
	color:#fff;
	font-size:14px;
	margin-top:20px;
}
header.fixed{
	position:fixed;
	top:0;
	left:0;
}
.banner.top-margin{
	margin-top:85px;
}
.gallery{
	float:left;
	width:100%;
}
.gallery li {
    display: inline-block;
    margin: 1%;
    width: 22%;
}
.gallery li img{
	border:2px ridge #333;
	max-width:100%;
}
.content-sec a{
	color:#e43286;
	text-decoration:none;
	transition:0.25s;
}
.content-sec a:hover{
	color:#8b0544;
}
.contact{
	float:left;
	width:100%;
	margin-bottom:20px;
}
.contact li{
	list-style:none;
	text-align:left;
	width:100%;
	display:block;
}
.links{
	margin:0 auto;
	width:100%;
	max-width:468px;
	text-align:center;
}
.links img{
	display:inline-block;
	max-width:100%;
	margin-bottom:20px;
}
.links textarea{
	float:left;
	width:96%;
	border:1px solid #666;
	padding:2%;
	margin-bottom:20px;
	height:70px;
}
.mobile-menu{
	display:none;
}
.link-exchange-banner{
	float:left;
	width:100%;
	text-align:center;
}
.link-exchange-banner li {
    list-style: none;
    display: inline-block;
    width: 45%;
    margin: 1% 2%;
    vertical-align: top;
}
.link-exchange-banner li img{
	max-width:100%;
}
@media(max-width:640px){
	.top-strip{
		display:none;
	}
	.mobile-menu{
		display:block;
		width:96%;
		background:#e43286;
		padding:5px 2%;
		float:left;
		cursor:pointer;
		color:#fff;
		position:relative;
	}
	.logo{
		width:100%;
		text-align:center;
	}
	.mobile-menu span {
		position: absolute;
		width: 20px;
		height: 2px;
		background: #fff;
		right: 10px;
		top: 15px;
	}
	.mobile-menu span:before{
		position:absolute;
		width:100%;
		content:"";
		height:2px;
		background:#fff;
		left:0;
		top:-5px;
	}
	.mobile-menu span:after{
		position:absolute;
		width:100%;
		content:"";
		height:2px;
		background:#fff;
		left:0;
		top:5px;
	}
	nav {
		padding-top: 0;
		position: fixed;
		width: 50%;
		background: #333;
		height: 100%;
		left:-50%;
		transition:all ease-in-out 0.3s;
	}
	
	nav ul {
		display: block;
		width: 100%;
	}
	nav li {
		display: block;
		list-style: none;
		position: relative;
		padding: 0;
	}
	nav li:after, nav li:before, nav li a:after, nav li a:before{
		display:none;
	}
	nav li a{
		border:0;
		border-bottom:1px solid #ccc;
		color:#fff;
	}
	.total.slide-body{
		position:fixed;
		left:50%;
	}
	nav.slide-nav{
		left:0;
	}
	.logo img {
		max-width: 130px;
	}
	.gallery li{
		width:47%;
	}
	.content-sec{
		margin-top:0;
	}
}
@media(max-width:480px){
	.link-exchange-banner li{
	width:90%;
}
}