@charset "utf-8";
/* CSS Document */

@font-face { font-family: 'Yekan'; src: url('fonts/yekan.eot?#') format('eot'), /* IE6–8 */ url('fonts/yekan.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('fonts/yekan.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */ }
* { margin: 0; padding: 0; font-weight: normal; border: none; }
body { background: url(img/bg.jpg) repeat; direction: rtl; }
.loading { position: fixed; z-index: 1000; width: 100%; height: 100%; background: url(img/bg.jpg) repeat; text-align: center; }
    .loading img { margin-top: 15%; }
    .loading p { text-align: center; direction: ltr; color: #3b3b3b; }
.top { background: #3b3b3b; width: 100%; height: 6px; }
.line { background: #e3e3e3; width: 100%; height: 1px; margin-top: 150px; position: absolute; z-index: -1000; }
#header { width: 1000px; height: 100%; margin: 0 auto; }
.logo { width: 251px; height: 251px; float: right; margin-top: 22px; margin-right: 22px; }
h1 { font-family: Yekan, Tahoma, Geneva, sans-serif; font-size: 12px; color: #fff; width: 251px; position: absolute; text-align: center; margin-right: 0px; margin-top: -115px; }
h2 { font-family: Tahoma, Geneva, sans-serif; font-size: 26px; font-weight: bold; color: #ef4537; text-align: center; }
h3 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #3b3b3b; text-align: center; }
a { cursor: pointer; }
.title { width: 235px; height: 65px; position: absolute; margin-right: 740px; margin-top: 120px; }
#menu { width: 370px; height: 27px; margin-right: 290px; margin-top: 136px; position: absolute; float: right; clear: both; }
    #menu li { background: #e3e3e3; width: 78px; height: 23px; margin-right: 7px; border: 1px solid #dadada; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; list-style: none; float: right; text-align: center; }
    #menu a { font-family: Yekan, Tahoma, Geneva, sans-serif; font-size: 12.9px; color: #3b3b3b; text-decoration: none; line-height: 23px; display: block; width: 100%; height: 100%; }
    #menu .selected { background: #ef4537; height: 23px; border: 1px solid #fff; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
        #menu .selected a { color: #fff; }
    #menu li:hover { background: #3b3b3b; border: 1px solid #f0f0f0; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
        #menu li:hover a { color: #fff; }
#wrapper { width: 1000px; height: 100%; margin: 0 auto; position: relative; margin-top: 265px; }
.phone { background: #e3e3e3; width: 225px; height: 46px; border: 1px solid #dadada; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; float: left; margin: 5px; margin-left: 25px; }
.number { background: #3b3b3b; width: 156px; height: 24px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; float: right; margin: 12px; margin-right: 14px; font-family: Yekan, Tahoma, Geneva, sans-serif; font-size: 15px; color: #fff; text-align: center; line-height: 24px; direction: ltr; }
.course { background: #e3e3e3; width: 319px; height: 46px; border: 1px solid #dadada; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; float: left; margin: 5px; cursor: pointer; }
.courses { background: #3b3b3b; width: 247px; height: 24px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; float: right; margin: 12px; margin-right: 14px; margin-left: 16px; font-family: Yekan, Tahoma, Geneva, sans-serif; font-size: 12px; color: #fff; text-align: center; line-height: 24px; }
.service { background: #e3e3e3; width: 557px; height: 333px; border: 1px solid #dadada; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; float: left; margin: 5px; margin-left: 25px; }
.product { width: 268px; height: 142px; overflow: hidden; float: right; margin: 3px; margin-right: 6px; }
    .product p { font-family: Tahoma, Geneva, sans-serif; font-size: 11px; color: #222; text-align: justify; padding: 17px; padding-top: 6px; padding-bottom: 6px; line-height: 22px; text-shadow: #fff 0px 1px 0px; }
.product_title { background: #ef4537; width: 232px; height: 20px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-family: Yekan, Tahoma, Geneva, sans-serif; font-size: 12px; text-align: center; color: #fff; line-height: 20px; margin: 0 auto; margin-top: 3px; }
.line-vertical { width: 1px; height: 128px; background: #c9c9c9; float: right; margin-top: 10px; margin-right: 1px; }
.line-harizonal { background: #c9c9c9; width: 248px; height: 1px; float: right; margin-right: 20px; }
.heading { background: #3b3b3b; width: 96%; margin: 9px; margin-bottom: 0px; height: 24px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-family: Yekan, Tahoma, Geneva, sans-serif; font-size: 12.9px; color: #fff; text-align: right; line-height: 24px; }
.w200 { width: 233px; }
.about { background: #e3e3e3; width: 384px; height: 221px; border: 1px solid #dadada; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; float: left; margin: 5px; }
.justify { text-align: justify; }
p { font-family: Tahoma, Geneva, sans-serif; font-size: 11px; color: #222; text-align: justify; padding: 13px; line-height: 22px; text-shadow: #fff 0px 1px 0px; }
.name { text-align: left; margin-top: -33px; margin-left: 9px; }
.tools { background: #e3e3e3; width: 384px; height: 100px; border: 1px solid #dadada; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; float: left; margin: 5px; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 8px; color: transparent; text-align: center; line-height: 51px; }
    .tools ul { list-style: none; cursor: pointer; }
    .tools li:hover { background: #ef4537; color: #fff; }
.ps { background: url(img/tools.png) no-repeat; width: 48px; height: 51px; background-position: 0px 0px; margin: 6px; margin-top: 24px; margin-left: 18px; float: left; }
.dw { background: url(img/tools.png) no-repeat; width: 48px; height: 51px; background-position: -48px 0px; margin: 6px; margin-top: 24px; float: left; }
.html { background: url(img/tools.png) no-repeat; width: 48px; height: 51px; background-position: -96px 0px; margin: 6px; margin-top: 24px; float: left; }
.css { background: url(img/tools.png) no-repeat; width: 48px; height: 51px; background-position: -144px 0px; margin: 6px; margin-top: 24px; float: left; }
.jquery { background: url(img/tools.png) no-repeat; width: 48px; height: 51px; background-position: -192px 0px; margin: 6px; margin-top: 24px; float: left; }
.w3c { background: url(img/tools.png) no-repeat; width: 48px; height: 51px; background-position: -240px 0px; margin: 6px; margin-top: 24px; float: left; }
.slider { background: #e3e3e3; width: 641px; height: 324px; border: 1px solid #dadada; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; float: left; margin: 5px; margin-left: 25px; }
    .slider img { margin: 6px; }
.works { background: #e3e3e3; width: 301px; height: 324px; border: 1px solid #dadada; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; float: left; margin: 5px; }
.right { width: 162px; height: 290px; float: right; margin-right: 2px; }
.web_name { background: #f0f0f0; width: 165px; height: 22px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; text-align: right; margin-top: 9px; margin-right: 5px; }
    .web_name h4 { font-family: Yekan, Tahoma, Geneva, sans-serif; font-size: 12px; color: #3b3b3b; text-align: right; line-height: 22px; margin-right: 5px; }
.left { width: 124px; height: 290px; float: right; margin-right: 4px; }
.web { background: #ef4537; width: 121px; height: 22px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; text-align: left; padding-left: 5px; margin-top: 9px; }
    .web:hover { background: #e33527; }
    .web a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #fff; line-height: 22px; text-align: left; text-decoration: none; display: block; width: 100%; height: 100%; }
.social { background: #e3e3e3; width: 134px; height: 87px; border: 1px solid #dadada; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; float: left; margin: 5px; margin-left: 25px; }
.facebook { background: url(img/social.png) no-repeat; width: 105px; height: 28px; background-position: -105px 0px; margin-top: 12px; margin-right: 15px; overflow: hidden; cursor: pointer; }
    .facebook:hover { background-position: 0px 0px; }
.google { background: url(img/social.png) no-repeat; widows: 105px; height: 28px; overflow: hidden; background-position: -105px -28px; margin-top: 6px; margin-left: 14px; cursor: pointer; }
    .google:hover { background-position: 0px -28px; overflow: hidden; width: 105px; margin-right: 15px; }
.footer { background: #e3e3e3; width: 629px; height: 87px; border: 1px solid #dadada; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; float: left; margin: 5px; }
.copyright { background: #e3e3e3; width: 168px; height: 87px; border: 1px solid #dadada; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; float: left; margin: 5px; text-align: center; }
    .copyright p { font-family: Tahoma, Geneva, sans-serif; font-size: 18px; color: #3b3b3b; text-align: center; margin-top: 16px; line-height: 5px; direction: ltr; }
    .copyright a { font-family: Tahoma, Geneva, sans-serif; font-size: 12px; color: #3b3b3b; text-align: center; text-decoration: none; }
.bottom { background: #3b3b3b; width: 100%; height: 6px; display: block; clear: both; }
/* WORKS */
hr { width: 1000px; height: 0px; border: 0px; float: left; }
.works_sample { background: #e3e3e3; width: 690px; height: 100%; min-height: 500px; border: 1px solid #dadada; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; float: left; margin: 5px; margin-left: 25px; }
.works_menu_div { width: 250px; height: 265px; float: left; margin: 5px; }
.works_menu { background: #e3e3e3; width: 250px; height: 254px; border: 1px solid #dadada; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
    .works_menu li { background: #ef4537; width: 234px; height: 37px; float: right; margin: 2px; list-style: none; margin-right: 7px; border: #fff solid 1px; box-shadow: #e13426 inset 0px 0px 10px; font-family: Yekan, Tahoma, Geneva, sans-serif; font-size: 22px; color: #fff; text-decoration: none; line-height: 37px; cursor: pointer; text-align: center; }
        .works_menu li:hover { background: #3b3b3b; box-shadow: #000 inset 0px 0px 10px; }
.scrolled { position: fixed; top: 60px; }
.works_heading { background: #3b3b3b; width: 674px; margin: 0 auto; margin-top: 8px; height: 24px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-family: Yekan, Tahoma, Geneva, sans-serif; font-size: 12.9px; color: #fff; text-align: center; line-height: 24px; }
    .works_heading span { font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
.splitter { background: url(img/splitter.png) no-repeat center; width: 690px; height: 31px; }
.websites_work { width: 674px; height: 206px; margin: 10px; }
.website_right { background: url(img/website_right.png) no-repeat center; width: 514px; height: 200px; float: right; margin-right: 8px; }
.detail_left { width: 180px; height: 78px; position: absolute; margin-right: 488px; margin-top: 34px; }
.details { background: #ef4537; width: 172px; height: 22px; border: #fff solid 1px; margin: 1px; font-family: yekan, Tahoma, Geneva, sans-serif; font-size: 12.9px; color: #fff; text-align: center; line-height: 22px; cursor: pointer; }
    .details:hover { background: #3b3b3b; box-shadow: #000 inset 0px 0px 10px; }
    .details a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #fff; text-align: center; line-height: 22px; display: block; text-decoration: none; }
    .details span { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #fff; text-align: center; line-height: 23px; }
.detail_right { width: 180px; height: 78px; position: absolute; margin-right: 8px; margin-top: 34px; }
.website_left { background: url(img/website_left.png) no-repeat center; width: 514px; height: 200px; float: left; margin-left: 8px; }
.logos_sample { width: 680px; height: 526px; margin: 6px; }
.logos_bg { background: #3b3b3b; width: 220px; height: 256px; margin: 3px; float: right; display: block; }
.logos_light { background: url(img/logos_light.png) no-repeat; width: 220px; height: 256px; position: absolute; z-index: 1000; }
.logos_bg img { width: 204px; height: 204px; margin: 8px; }
.logos_title { background: #ef4537; width: 204px; height: 28px; margin-right: 8px; font-family: yekan, Tahoma, Geneva, sans-serif; font-size: 12.9px; color: #fff; line-height: 28px; margin-top: -4px; text-align: center; }
.card_sample { width: 680px; height: 456px; margin: 6px; }
.card_bg { background: #3b3b3b; width: 333px; height: 220px; margin: 3px; float: right; }
    .card_bg img { margin: 7px; }
.cards_title { background: #ef4537; width: 319px; height: 28px; margin-right: 7px; font-family: yekan, Tahoma, Geneva, sans-serif; font-size: 12.9px; color: #fff; line-height: 28px; margin-top: -5px; text-align: center; }
.banner_sample { width: 680px; height: 450px; margin: 6px; }
/* WORKS */
/* COSTS */
.dynamic { background: #e3e3e3; width: 471px; height: 100%; border: 1px solid #dadada; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; float: left; margin: 5px; margin-left: 25px; }
.static { background: #e3e3e3; width: 471px; height: 100%; border: 1px solid #dadada; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; float: right; margin: 5px; margin-right: 19px; }
.cost_item { background: #fff; width: 449px; height: 24px; border: solid #d9d9d9 1px; margin: 0 auto; margin-bottom: 10px; margin-top: -6px; }
.cost_item2 { background: #ef4537; width: 150px; height: 24px; float: left; margin-left: 2px; }
h4 { font-family: Yekan, Tahoma, Geneva, sans-serif; font-size: 12px; color: #3b3b3b; text-align: right; line-height: 22px; margin-right: 5px; display: inline; }
.cost_item2 a { font-family: Yekan, Tahoma, Geneva, sans-serif; font-size: 12px; color: #fff; line-height: 22px; text-align: center; text-decoration: none; display: block; width: 100%; height: 100%; }
.logo_cost { background: #e3e3e3; width: 471px; height: 100%; border: 1px solid #dadada; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; float: right; margin: 5px; margin-right: 19px; padding-bottom: 5px; }
.graphic { background: #e3e3e3; width: 471px; height: 100%; border: 1px solid #dadada; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; float: left; margin: 5px; margin-left: 25px; }
.contact_me { background: #e3e3e3; width: 637px; height: 544px; border: 1px solid #dadada; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; float: right; margin: 5px; margin-right: 19px; }
.order { background: #ef4537; width: 305px; height: 544px; border: 1px solid #fff; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; float: left; margin: 5px; margin-left: 25px; }
.way { background: url(img/way.png) no-repeat; width: 312px; height: 544px; margin-right: -4px; }
.w617 { margin: 13px; margin-bottom: 0px; }
input { background: #fff; width: 250px; height: 30px; margin: 2px; padding: 5px; padding-right: 25px; font-family: Yekan, Tahoma, Geneva, sans-serif; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border: 1px solid #dadada; }
textarea { background: #fff; width: 250px; height: 80px; margin: 2px; padding: 5px; padding-right: 15px; padding-left: 15px; font-family: Yekan, Tahoma, Geneva, sans-serif; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border: 1px solid #dadada; }
input[type="submit"] { width: 282px; cursor: pointer; padding: 0px; height: 34px; margin-top: 0px; border: 1px solid #dadada; }
    input[type="submit"]:hover { background: #ef4537; color: #fff; }
.form_bg { width: 300px; height: 420px; margin: 0 auto; margin-top: 12px; }
.phone_contact { background: #3b3b3b; width: 279px; margin: 3px; height: 26px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-family: Yekan, Tahoma, Geneva, sans-serif; font-size: 12.9px; color: #fff; text-align: center; line-height: 27px; border: 1px solid #eee; }
    .phone_contact span { background: #ef4537; width: 80px; height: 26px; text-align: center; float: right; display: inline; border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px; }


@media (max-width:1024px) {
    .logo { float: none; margin: 30px auto 0; }
    .title { position: relative; float: none; margin: 20px auto 0; }
    #menu { float: none; margin: 0px auto 0; position: relative; }
    #header { width: 100%; }
    #wrapper { width: 100%; margin-top: 30px; }
    .line-vertical, .line-harizonal { display: none; }
    .about { width: 98%; margin: 5px 1%; float: right; height: inherit; }
    .product { width: 46%; margin: 20px 1% 0; height: auto; }
    .service { width: 98%; margin: 5px 1% 0; float: right; height: inherit; padding-bottom: 15px; }
    .tools, .slider, .footer, .social { display: none; }
    .works { margin: 0 1%; width: 98%; }
    .right { width: 56%; margin-right: 1%; }
    .left { width: 39.7%; margin-right: 0; }
    .web_name, .web { width: 100%; }
    .copyright { width:98%; margin:5px 1%; }
}

@media (max-width:640px) {
    .product, .product_title { width: 96%; }
    .course { margin: 6px auto 0; float: none; width: 300px; }
    .courses { width: 230px; }
    .phone { float: none; margin: 0 auto; }
    #menu { width:52%; height: 120px; }
        #menu li { width: 70%; margin: 5px 15% 0; }
}

@media (max-width: 480px) {
    #menu { width: 100%; }
}