@font-face {

font-family: "yekan";
src: url(../fonts/yekan/Yekan.eot);
src: url(../fonts/yekan/Yekan.eot?#iefix) format("embedded-opentype"),
url(../fonts/yekan/Yekan.woff) format("woff"),
url(../fonts/yekan/Yekan.ttf) format("truetype"),
url(../fonts/yekan/Yekan.svg#BYekan) format("svg");
font-weight: normal;
font-style: normal;
}





body
{
	background: #eee url('../img/back1.jpg') center top;
	width: 100%;
	height: 3500px;
	direction: rtl;
}

h3, p, span
{
		font-family: yekan,tahoma,arial;
}

p
{
		font-family: yekan,tahoma,arial;
		font-size: 14px;

}

a {
   outline: 0;
   
}

a:hover {
   outline: 0;
   text-decoration: none;

}

.cant
{
	width: 1170px;

}

.wrapper
{
	margin: auto;
}





.lines
{
	background: url('../img/lines.png');
	width: 100%;
	height:100%;
}

.trucksline
{
	background: url('../img/truck-line.png') center top no-repeat;
	height: 3800px;
	position: absolute;
}


.readmore-link
{
	float: left;
	color: #cc0000;
	font-size: 13px;
}

.readmore-link:hover
{

	color: #333 !important;
	text-decoration: none;
}




/*Main Menu */

.main-menu
{
	width: 100%;
	margin-top: 70px;
}






.main-menu .logo
{
	margin-top: -36px;
}


.main-menu ul
{
	text-align: center;
}

.main-menu li
{
	display: inline-block;
	margin-right: 15px;

}

.main-menu li a
{
	font-family: yekan,tahoma,arial;
	font-size:16px;
	padding: 0px  10px 2px 10px;
	height: 30px;

}

.main-menu li a:link, .main-menu li a:visited
{
	color: #000;

}

.main-menu li a:hover
{
	color: #cc0000;
	text-decoration: none;
}

.main-menu li a:hover
{
	background-color: #cc0000;
	border-radius: 5px;
	color:#fff;
	text-decoration: none;
}

.small-logo
{

}



/*Home*/

.home
{
	width: 100%;
	text-align: center;
	margin-top: 100px;
}

.circle
{
	background: url('../img/circle.png');
	width:190px;
	height: 190px;
	border-radius: 100px;
    transform: scale(0.1);


}


.navigator
{
	position: fixed;
	left: 10%;
	display: none;
	background: url('../img/navigator_bg.png') center repeat-y;
	top:10%;
}


@media only screen and (max-width: 1600px) {

	.navigator
	{
		left: 5%;
	}
}

@media only screen and (max-width: 1400px) {

	.navigator
	{
		left: 1%;
	}
}


@media only screen and (max-width: 1280px) {

	.navigator li
	{
		display: none !important;
	}
}



.navigator li
{
	height:70px;
	width: 70px;
	list-style: none;
	display: block;
	margin-bottom: 20px;
}

.navigator > li:last-child
{
	margin-bottom: 0px;
}

.circle-nav ,.circle-nav:visited
{
	background: #999;
	width:70px;
	height: 70px;
	border-radius: 100px;
	display: block;
	color: #fff;
	font-family: yekan,arial,tahoma;
	font-size: 13px;
	padding-top:15px;
	text-align: center;
	cursor: pointer;
}

.navigator .single-line
{
	padding-top:22px;
}
.circle-nav:hover, .nav-active
{
	background: #ef152c !important;
	text-decoration: none;
}





.circle-s
{
	background: url(../img/circle.png) no-repeat center center;
	width:190px;
	height: 190px;
	border-radius: 100px;
	transform: scale(0.001);
}


.lt-ie9 .circle-s
{
	background: url(../img/circle-s.png) no-repeat;
	width:25px !important;
	height: 25px !important;
}





.chome
{
	position: absolute;
	margin-top: -227px;
	margin-right: 23px;
}

.lt-ie9 .chome {
	background: url(../img/circle-s.png) no-repeat;
	height: 25px;
	width: 25px;
	margin:-150px 103px 0 0 ;
}




.home
{
	height:468px;
	overflow: hidden;
}

/*Pars-Company*/
.pars-company
{
	direction: ltr;
	text-align: center;
	height: 464px;
	overflow: hidden;
}

.pars-company .circle
{
	margin: 210px 0px 0px 72px;
    z-index: 2;
    position: absolute;
}

.pars-company .circle h3
{
	padding-top: 40px;
	color: #fff;
	font-size: 20px;
	line-height: 35px;
	font-weight: bolder;
}

.pars-company p
{
	width: 500px;
	text-align: justify;
	direction: rtl;
	position: absolute;
	margin: 210px 0 0 350px;
}


/*Porducer*/
.producer
{
	text-align: center;
	height: 400px;
}

.producer .circle
{
	margin: 130px 38px 0px 0px;
    z-index: 2;
    position: absolute;
}

.producer .circle h3
{
	padding-top: 55px;
	color: #fff;
	font-size: 20px;
	line-height: 35px;
	font-weight: bolder;
}

.producer p
{
	width: 550px;
	text-align: justify;
	position: absolute;
	margin: 110px 280px;
}

.producer .company
{
	margin: 282px -69px 0px 0px
}


/*baranchs*/
.branchs
{
	direction: ltr;
}

.branchs .circle
{
	margin: 135px 0px 0px 64px;
	z-index: 2;
	position: relative;
	text-align: center;
}

.branchs .circle h3
{
	padding-top: 75px;
	color: #fff;
	font-size: 20px;
	line-height: 35px;
	font-weight: bolder;
}


#branchs-c1
{
	position: absolute;
	margin-top: -216px;
	margin-left: 182px;
	height: 27px;
	width: 27px;
}

#branchs-c2
{
	position: absolute;
	margin-top: -188px;
	width: 23px;
	margin-left: 230px;
	height: 23px;
}

#branchs-c3
{
	position: absolute;
	margin-top: -149px;
	margin-left: 260px;
	width: 41px;
	height: 41px;
}

#branchs-c4
{
	position: absolute;
	margin-top: -82px;
	margin-left: 266px;
	width: 26px;
	height: 26px;
}

#branchs-c5
{
	position: absolute;
	margin-top: -37px;
	margin-left: 233px;
	width: 50px;
	height: 50px;
}

#branchs-c6
{
	position: absolute;
	margin-top: 6px;
	margin-left: 184px;
	width: 27px;
	height: 27px;
}

#branchs-c7
{
	position: absolute;
	margin-top: 7px;
	margin-left: 125px;
	width: 30px;
	height: 30px;
}

#branchs-c8
{
	position: absolute;
	margin-top: -11px;
	margin-left: 73px;
	width: 30px;
	height: 30px;

}

#branchs-c9
{
	position: absolute;
	margin-top: -42px;
	margin-left: 48px;
	width: 20px;
	height: 20px;
}

#branchs-c10
{
	position: absolute;
	margin-top: -90px;
	margin-left: 24px;
	height: 25px;
	width: 25px;
}

#branchs-c11
{
	position: absolute;
	margin-top: -155px;
	margin-left: 20px;
	width: 38px;
	height: 38px;
}

#branchs-c12
{
	position: absolute;
	margin-top: -203px;
	margin-left: 65px;
	height: 33px;
	width: 33px;
}

#branchs-c13
{
	position: absolute;
	margin-top: -213px;
	margin-left: 132px;
	width: 15px;
	height: 15px;
}

.branchs p
{
	width: 400px;
	text-align: justify;
	position: absolute;
	margin: -130px 360px;
	direction: rtl;
}

.branchs .iran-map
{
	position: absolute;
	margin:  -182px 770px;
}



/*brand-shop*/
.brand-shop
{
	margin-top:250px;
}

.brand-shop .circle
{
	margin: 0px 9px 0px 0px;
	z-index: 2;
	position: relative;
	text-align: center;
}

.brand-shop .circle h3
{
	color: #fff;
	font-size: 20px;
	font-weight: bolder;
	margin-top: 10px;
}

.brand-shop .circle .brand-shop-icon
{
	margin-top: 40px;
}



.brand-shop p
{
	width: 383px;
	text-align: justify;
	position: absolute;
	margin: -165px 270px;
	direction: rtl;
}

.brand-shop .brand-products
{
	position: absolute;
	margin: -190px 680px;
}



/*Transport*/
.transport
{
	text-align: center;
	margin:  0;
	direction: ltr;
	height: 400px;
}

.transport .circle
{
	z-index: 2;
	position: absolute;
	margin: 197px 0px 0px 117px;
}

.transport .circle h3
{
	padding-top: 50px;
	color: #fff;
	font-size: 20px;
	line-height: 35px;
	font-weight: bolder;
}

.transport p
{
	width: 400px;
	text-align: justify;
	margin: 230px 0px 0px 350px;
	direction: rtl;
	position: absolute;

}

.transport .trucks
{
margin: 240px 760px;
display: inline-block;

}



/*contact-us*/
.contact-us
{
	text-align: center;
	margin: 140px 0 0 0;
	direction: rtl;
}

.contact-us .circle
{
	margin: 248px -25px 0px 0px;
	z-index: 2;
	position: relative;
}
.contact-us-icon
{
	margin-top: 35px;
}
.contact-us .circle h3
{
	color: #fff;
	font-size: 20px;
	font-weight: bolder;
	margin-top: 10px;
}


.contact-us .cont
{
	width: 550px;
	text-align: justify;
	position: absolute;
	margin: -150px 290px;
	direction: rtl;
}





/*login*/
.product
{
	text-align: center;
	margin: 20px 0 0 0;
	direction: ltr;
}

.product .key
{
margin: 367px 36px 0px 80px;
z-index: 10;
position: relative;
background: transparent url("../img/key.png");
width: 180px;
height: 321px;
}

.product .key h3
{
	padding-top: 105px;
	color: #fff;
	font-size: 20px;
	line-height: 35px;
	font-weight: bolder;
}

.product p
{
	width: 263px;
	text-align: justify;
	direction: rtl;
	position: absolute;
	margin: -270px 0 0 350px;
}



.login
{
	background: url('../img/login.png');
	width: 122px;
	height: 67px;
	position: absolute;
	margin: -180px 346px;
		padding-top: 10px;
	padding-left:20px;
}


.register
{
	background: url('../img/register.png');
	width: 122px;
	height: 67px;
	margin: -179px 497px;
	position: absolute;
	padding-top: 10px;
	padding-left:22px;

}

.login a, .register a
{
	color: #fff;
	font-family: yekan, tahoma, arial;
}




/*trucks*/
.gtruck
{
	width:57px;
	height: 33px;

	position: absolute;
}

#truck1
{
	background: url(../img/truck.png);
	margin:105px 350px;
	animation-name: truckAnimation1;
    animation-duration: 10s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}

#truck2
{
	background: url(../img/truck3.png);
	margin: 492px 250px;
	-moz-transform: rotate(30deg)

}

.truck2Anim
{
	animation-name: truckAnimation2;
	animation-duration: 10s;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}

#truck3
{
	background: url(../img/truck2.png);
	margin:88px 250px;
	-moz-transform: rotate(20deg);
 }

 .truck3Anim
 {
 	animation-name: truckAnimation3;
	animation-duration: 10s;
	animation-fill-mode: forwards;
	animation-timing-function: linear;

 }

/*animation */

.scaleUp {
    -webkit-animation: cssAnimation 0.5s 1 ease-in;
    -moz-animation: cssAnimation 0.5s 1 ease-in;
    -o-animation: cssAnimation 0.5s 1 ease-in;


    -ms-transform: scale(1); /* IE 9 */
    -webkit-transform: scale(1); /* Safari */
    transform: scale(1);


    }


    @-webkit-keyframes cssAnimation {
    from { -webkit-transform: rotate(1deg) scale(0.1); }
    to { -webkit-transform: rotate(360deg) scale(1); }
    }
    @-moz-keyframes cssAnimation {
    from { -moz-transform: rotate(1deg) scale(0.1); }
    to { -moz-transform: rotate(360deg) scale(1);}
    }
    @-o-keyframes cssAnimation {
    from { -o-transform: rotate(1deg) scale(0.1); }
    to { -o-transform: rotate(360deg) scale(1); }
	}





    @-moz-keyframes truckAnimation1 {

    0% { -moz-transform: rotate(-20deg); margin:99px 250px;}


    10% { -moz-transform: rotate(-8deg); margin:106px 300px;}


    20% { -moz-transform: rotate(0deg); margin:110px 350px;}


   	30% { -moz-transform: rotate(7deg); margin:109px 400px;}


    40% { -moz-transform: rotate(7deg); margin:104px 450px;}


    50% { -moz-transform: rotate(9deg); margin:95px 500px;}


    70% { -moz-transform: rotate(11deg); margin:71px 600px;}


    80% { -moz-transform: rotate(12deg); margin:64px 650px;}


    90% { -moz-transform: rotate(8deg); margin:57px 700px;}


    100%{ -moz-transform: rotate(-1deg); margin:57px 750px;}

    }




    @-moz-keyframes truckAnimation2 {

    0% { -moz-transform: rotate(30deg); margin: 492px 250px;}


    10% { -moz-transform: rotate(15deg); margin:513px 300px;}


    20% { -moz-transform: rotate(4deg); margin:522px 350px;}


   	30% { -moz-transform: rotate(-2deg); margin:522px 400px;}


    40% { -moz-transform: rotate(-5deg); margin:519px 450px;}


    50% { -moz-transform: rotate(-8deg); margin:512px 500px;}


    60% { -moz-transform: rotate(-8deg); margin:507px 550px;}


    70% { -moz-transform: rotate(-10deg); margin:497px 600px;}


    80% { -moz-transform: rotate(-10deg); margin:487px 650px;}


    90% { -moz-transform: rotate(-10deg); margin:477px 700px;}


    100%{ -moz-transform: rotate(-10deg); margin:467px 750px;}

    }

    @-moz-keyframes truckAnimation3 {

    0% { -moz-transform: rotate(20deg); margin: 71px 250px;}


    10% { -moz-transform: rotate(15deg); margin:83px 300px;}


    20% { -moz-transform: rotate(4deg); margin:90px 350px;}


   	30% { -moz-transform: rotate(1deg); margin:93px 400px;}


    40% { -moz-transform: rotate(-2deg); margin:91px 450px;}


 	50% { -moz-transform: rotate(-5deg); margin:91px 500px;}


    60% { -moz-transform: rotate(-8deg); margin:87px 550px;}


    70% { -moz-transform: rotate(-9deg); margin:78px 600px;}


    80% { -moz-transform: rotate(-10deg); margin:71px 650px;}


    90% { -moz-transform: rotate(-10deg); margin:65px 700px;}


    100%{ -moz-transform: rotate(-6deg); margin:60px 750px;}

    }






	/* chorom animation */

    @-webkit-keyframes truckAnimation1 {

    0% { -webkit-keyframes: rotate(-20deg); margin:99px 250px;}


    10% { -webkit-keyframes: rotate(-8deg); margin:106px 300px;}


    20% { -webkit-keyframes: rotate(0deg); margin:110px 350px;}


   	30% { -webkit-keyframes: rotate(7deg); margin:109px 400px;}


    40% { -webkit-keyframes: rotate(7deg); margin:104px 450px;}


    50% { -webkit-keyframes: rotate(9deg); margin:95px 500px;}


    70% { -webkit-keyframes: rotate(11deg); margin:71px 600px;}


    80% { -webkit-keyframes: rotate(12deg); margin:64px 650px;}


    90% { -webkit-keyframes: rotate(8deg); margin:57px 700px;}


    100%{ -webkit-keyframes: rotate(-1deg); margin:57px 750px;}

    }




    @-webkit-keyframes truckAnimation2 {

    0% { -webkit-keyframes: rotate(30deg); margin: 492px 250px;}


    10% { -webkit-keyframes: rotate(15deg); margin:513px 300px;}


    20% { -webkit-keyframes: rotate(4deg); margin:522px 350px;}


   	30% { -webkit-keyframes: rotate(-2deg); margin:522px 400px;}


    40% { -webkit-keyframes: rotate(-5deg); margin:519px 450px;}


    50% { -webkit-keyframes: rotate(-8deg); margin:512px 500px;}


    60% { -webkit-keyframes: rotate(-8deg); margin:507px 550px;}


    70% { -webkit-keyframes: rotate(-10deg); margin:497px 600px;}


    80% { -webkit-keyframes: rotate(-10deg); margin:487px 650px;}


    90% { -webkit-keyframes: rotate(-10deg); margin:477px 700px;}


    100%{ -webkit-keyframes: rotate(-10deg); margin:467px 750px;}

    }

    @-webkit-keyframes truckAnimation3 {

    0% { -webkit-keyframes: rotate(20deg); margin: 71px 250px;}


    10% { -webkit-keyframes: rotate(15deg); margin:83px 300px;}


    20% { -webkit-keyframes: rotate(4deg); margin:90px 350px;}


   	30% { -webkit-keyframes: rotate(1deg); margin:93px 400px;}


    40% { -webkit-keyframes: rotate(-2deg); margin:91px 450px;}


 	50% { -webkit-keyframes: rotate(-5deg); margin:91px 500px;}


    60% { -webkit-keyframes: rotate(-8deg); margin:87px 550px;}


    70% { -webkit-keyframes: rotate(-9deg); margin:78px 600px;}


    80% { -webkit-keyframes: rotate(-10deg); margin:71px 650px;}


    90% { -webkit-keyframes: rotate(-10deg); margin:65px 700px;}


    100%{ -webkit-keyframes: rotate(-6deg); margin:60px 750px;}

    }



	/* Other animation */

    @-webkit-keyframes truckAnimation1 {

    0% { -webkit-keyframes: rotate(-20deg); margin:99px 250px;}


    10% { -webkit-keyframes: rotate(-8deg); margin:106px 300px;}


    20% { -webkit-keyframes: rotate(0deg); margin:110px 350px;}


   	30% { -webkit-keyframes: rotate(7deg); margin:109px 400px;}


    40% { -webkit-keyframes: rotate(7deg); margin:104px 450px;}


    50% { -webkit-keyframes: rotate(9deg); margin:95px 500px;}


    70% { -webkit-keyframes: rotate(11deg); margin:71px 600px;}


    80% { -webkit-keyframes: rotate(12deg); margin:64px 650px;}


    90% { -webkit-keyframes: rotate(8deg); margin:57px 700px;}


    100%{ -webkit-keyframes: rotate(-1deg); margin:57px 750px;}

    }




    @-webkit-keyframes truckAnimation2 {

    0% { -webkit-keyframes: rotate(30deg); margin: 492px 250px;}


    10% { -webkit-keyframes: rotate(15deg); margin:513px 300px;}


    20% { -webkit-keyframes: rotate(4deg); margin:522px 350px;}


   	30% { -webkit-keyframes: rotate(-2deg); margin:522px 400px;}


    40% { -webkit-keyframes: rotate(-5deg); margin:519px 450px;}


    50% { -webkit-keyframes: rotate(-8deg); margin:512px 500px;}


    60% { -webkit-keyframes: rotate(-8deg); margin:507px 550px;}


    70% { -webkit-keyframes: rotate(-10deg); margin:497px 600px;}


    80% { -webkit-keyframes: rotate(-10deg); margin:487px 650px;}


    90% { -webkit-keyframes: rotate(-10deg); margin:477px 700px;}


    100%{ -webkit-keyframes: rotate(-10deg); margin:467px 750px;}

    }

    @-webkit-keyframes truckAnimation3 {

    0% { -webkit-keyframes: rotate(20deg); margin: 71px 250px;}


    10% { -webkit-keyframes: rotate(15deg); margin:83px 300px;}


    20% { -webkit-keyframes: rotate(4deg); margin:90px 350px;}


   	30% { -webkit-keyframes: rotate(1deg); margin:93px 400px;}


    40% { -webkit-keyframes: rotate(-2deg); margin:91px 450px;}


 	50% { -webkit-keyframes: rotate(-5deg); margin:91px 500px;}


    60% { -webkit-keyframes: rotate(-8deg); margin:87px 550px;}


    70% { -webkit-keyframes: rotate(-9deg); margin:78px 600px;}


    80% { -webkit-keyframes: rotate(-10deg); margin:71px 650px;}


    90% { -webkit-keyframes: rotate(-10deg); margin:65px 700px;}


    100%{ -webkit-keyframes: rotate(-6deg); margin:60px 750px;}

    }