html, body {
	margin: 0;
	padding: 0;
	font-family: IranSans;
	direction: rtl;
	cursor: default;
}

@font-face{
	font-family:'IranSans';
	src:url(../IranSans.woff) format('woff');
	font-weight:normal;
	font-style:normal;
}

* {
	position: relative;
	outline: none;
	text-decoration: none;
	box-sizing: border-box;
}

a {
	transition: all ease-in-out .2s;
	cursor: pointer;
}

img {
	max-width: 100%;
}

.section {
	float: left;
	width: 100%;
	text-align: center;
}

.section-1 {
    background: #2c303f url(../header.png) bottom center no-repeat;
    color: #eee;
    padding: 25px 0;
    background-size: 100%;
}
	.section-1 .logo {
		display: block;
	}

	.section-1 h1 {
		font-size: 50px;
		color: #ff3940;
		margin: 13px 0 0;
	}
	
	.section-1 p {
		line-height: 1.8;
		font-size: 20px;
		margin: 5px auto 0;
		max-width: 730px;
	}
	
	.section-1 a {
		color: #eee;
	}

	.section-1 a:hover {
		color: #ff3940;
	}

.section-2 {
	background: url(../bg.jpg) center no-repeat;
	background-size:cover;
	padding: 30px 0 90px;
}
	.section-2 .separator-arc {
		position: absolute;
		display: block;
		margin: 0 auto;
		width: 100%;
		bottom: 0;
	}
	.section-2 .gobot {
		position: relative;
		display:block;
		width: 32px;
		height: 50px;
		border: 2px solid #fff;
		border-radius: 100px;
		margin: 12px auto 0;
		color: #ff3940;
	}
	.section-2 .gobot:hover {
		color: #ff3940;
		border-color: #ff3940;
	}
	.section-2 .gobot:before {
		content: '∨';
		position: absolute;
		font-size: 14px;
		top: 10px;
		left: 10px;
		-webkit-animation: gobot-animate .8s infinite;
		-moz-animation: gobot-animate .8s infinite;
		-o-animation: gobot-animate .8s infinite;
		animation: gobot-animate .8s infinite;
	}
	
.section-3 {
	background: #2c303f;
	padding: 80px 0;
}
	.section-3 a {
		color: #ff3940;
	}
	.section-3 a:hover {
		color: #b51318;
	}

	.section-3 .right,
	.section-3 .left {
		width: 50%;
	}

	.section-3 .left {
		float: left;
		padding-right: 20px;
	}

	.section-3 .right {
		float: right;
		padding-left: 20px;
	}
	
		.section-3 .right img {
			float: left;
			display: block;
		}
	
	.section-3 .left .content {
		color: #fff;
		text-align: right;
		float: right;
		font-size: 18px;
		margin-top: 50px;
		line-height: 2;
	}
		.section-3 .left .content .num-1 {
		    color: #fff;
		    font-size: 35px;
		    font-weight: bold;
		}
		.section-3 .left .content span {
			background: #ff3940;
			display: inline-block;
			width: 45px;
			height: 45px;
			border: 3px solid #b51318;
			border-radius: 100%;
			text-align: center;
			line-height: 0;
			padding-top: 22px;
			margin-left: 15px;
			box-shadow: 0 3px 5px rgba(0,0,0,.3);
			font-size: 20px;
		}

.section-4 {
    background: #ff3940;
    padding: 30px 0;
    color: #fff;
    font-size: 30px;
}
	.section-4 a {
		color: #fff;
		border: 3px solid #fff;
		padding: 5px 50px;
		border-radius: 7px;
		margin-right: 50px;
	}
	.section-4 a:hover {
		opacity: .85;
	}
	
	.section-4 p {
	    letter-spacing: -1px;
	    font-weight: bold;
	}

.section-5 {
	background: #282c3b;
	padding: 70px 0 60px;
}
	.section-5 h2 {
		color: #fff;
		font-size: 30px;
		border-bottom: 2px solid #414450;
		max-width: 430px;
		padding-bottom: 10px;
		margin: 0 auto 30px;
	}
	.section-5 a {
		display: inline-block;
		width: 40px;
		height: 40px;
		margin: 0 20px;
		background: no-repeat bottom center;
		background-size: 100%;
	}
	.section-5 a:hover {
		opacity: .7;
	}
	.section-5 .twitter {
		background-image: url(../twitter.png);
		width: 45px;
	}
	.section-5 .facebook {
		background-image: url(../facebook.png);
	}
	.section-5 .telegram {
		background-image: url(../telegram.png);
		width: 44px;
	}
	.section-5 .instagram {
		background-image: url(../instagram.png);
	}
	
.separator-gradient {
	float: left;
	width:100%;
	height: 5px;
	margin-top: -5px;

	background: -moz-linear-gradient(left, rgba(255,57,64,0) 0%, rgba(255,57,64,1) 50%, rgba(255,57,64,0) 100%);
	background: -webkit-linear-gradient(left, rgba(255,57,64,0) 0%,rgba(255,57,64,1) 50%,rgba(255,57,64,0) 100%);
	background: linear-gradient(to right, rgba(255,57,64,0) 0%,rgba(255,57,64,1) 50%,rgba(255,57,64,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff3940', endColorstr='#00ff3940',GradientType=1 );
}
@-webkit-keyframes gobot-animate {
	0%   {
		top: 10px;
		opacity: 1;
	}
	100%   {
		top: 28px;
		opacity: 0;
	}
}
@-moz-keyframes gobot-animate {
	0%   {
		top: 10px;
		opacity: 1;
	}
	100%   {
		top: 28px;
		opacity: 0;
	}
}
@-o-keyframes gobot-animate {
	0%   {
		top: 10px;
		opacity: 1;
	}
	100%   {
		top: 28px;
		opacity: 0;
	}
}
@keyframes gobot-animate {
	0%   {
		top: 10px;
		opacity: 1;
	}
	100%   {
		top: 28px;
		opacity: 0;
	}
}

@media screen and (max-width:1300px) {
    .section-3 .right,
    .section-3 .left{
        width: 100%;
        padding: 0;
        text-align: center;
    }
    
    .section-3 .right img,
	.section-3 .left .content {
	    float: none;
	    margin: auto;
	}
	
	.section-3 .left .content {
        max-width: 620px;
    }
}


@media screen and (max-width:825px) {
    .section-4 a {
        margin: 30px auto 0;
        max-width: 190px;
        display: block;
    }
}

@media screen and (max-width:780px) {
    .section-1 h1 {
		font-size: 30px;
    }
	.section-1 p {
		font-size: 14px;
	}
}

@media screen and (max-width:700px) {
	.section-3 .left .content .num-1,
	.section-4,
	.section-5 h2 {
		font-size: 20px;
	}
	.section-3 .left .content {
		font-size: 13px;
	}
    .section-3 .left .content {
        max-width: 90%;
    }
}

@media screen and (max-width:580px) {
	.section-1 p {
		font-size: 11px;
	}
}

@media screen and (max-width:420px) {
    .section-1 h1 {
		font-size: 20px;
    }
	.section-1 p {
		font-size: 11px;
	}
	.section-3 .left .content .num-1 {
		font-size: 18px;
	}
}