﻿@charset "utf-8";

/* ---------------------------FONT------------------------------- */


@import url(fonts.css);



/* -------------------------------BODY---------------------------- */


*{
	margin:0;
	padding:0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body{
	font-family:'gotham-book', arial, sans-serif;
	font-size:17px;
	color:#f4f1f1;
	background-color:#101a32;
	line-height:1em;
}

a{
	text-decoration:none;
}

a img{
	border:none;
}

img{
	max-width:100%;
}

ul{
	list-style:none;
}


a:active,
a:hover {
  outline: 0;
}

h1{
	text-align:center;
	font-size:45px;
	font-family:'gotham-book';
	font-weight:100;
	line-height:1.5em;
}

h2{
	text-align:center;
	font-family:'gotham-book';
	font-size:35px;
	font-weight:500;
	line-height:1.4em;
}

h3{
	text-align:center;
	font-family:'gotham-book';
	font-size:25px;
	font-weight:500;
	line-height:1.4em;
}

h4{
	text-align:center;
	font-family:'gotham-book';
	font-size:20px;
	font-weight:500;
	line-height:1.4em;
}

p{
	font-family: 'gotham-book';
	font-size:17px;
	line-height: 1.8em;
}

.clearFix{
	height:0;
	clear:both;
	visibility:hidden;
	display:block;
}

.frame{
	width:1100px;
	margin:auto;
	overflow: hidden;
}

#wrapper{
	width:100%;
	min-width: 1140px;
	overflow:hidden;
	margin:0;
	padding:0;
	direction: ltr;
}

.toTop{
	opacity:.8;
}

.toTop:hover{
	opacity:1;
}

.shadow{width:100%;height:60px;background:url(../images/assets/shadow3.png) no-repeat; background-size:100% 100%;}





/**************************************************************************************************************************

*******************************************************************  INDEX.HTML  ****************************************

**************************************************************************************************************************/


/*****       Header       *****/

#header{
	width:100%;
	height:150px;
	padding:10px 0;
	background: transparent;
	border-bottom:2px solid #090e1b;
}

#header .frame{
	overflow: visible;
}

#logo{
	width:153px;
	height:130px;
	float:right;
	text-align: center;
	padding-top:5px;
}

#logo img{
	display:block;
	margin:auto;
}

#logo a{
	display:inline-block;
}

#logo a::after{
	content:'صنایع بازیابی فلزات رنگین';
	font-family:'DroidNaskh';
	font-size:12px;
	text-align: center;
	color:#fbb449;
}

#navigation{
	width:800px;
	height:130px;
	line-height: 130px;
	float:left;
}

#navigation ul li{
	position: relative;
	float:left;
	margin:0 7px;
	cursor:context-menu;
}

#navigation ul li a{
	font-size:18px;
	color:#f4f1f1;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-ms-transition:all .3s;
	-o-transition:all .3s;
	transition:all .3s;
}

#navigation ul li a.selected,
#navigation ul li a:hover{
	color:#fbb449;
}

/*#navigation ul > li.hasMegaMenu:hover > a{
	color:#fbb449;
}*/

#navigation ul li a.selected{
	cursor:context-menu;
}

#navigation ul li a.selectedButHasCursor{
	cursor:pointer;
	color:#fbb449;
}

#megaMenu{
	display:none;
	width:640px;
	background: #101a32;
	position: absolute;
	right:-355px;
	top:65px;
	z-index:999999;
	border:2px solid #090e1b;
	border-top:none;
	visibility: hidden;
	opacity: 0;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-ms-transition:all .3s;
	-o-transition:all .3s;
	transition:all .3s;		
}

#navigation ul li.hasMegaMenu:hover #megaMenu{
	visibility: visible;
	opacity: 1;
	top:60px;
}

#megaMenuThumb{
	position: relative;
	width:152px;
	height:150px;
	overflow: hidden;
	float:right;
	border-left:2px solid #090e1b;
}

#megaMenuThumb img{
	position: absolute;
	top:0;
	left:0;
	width:150px;
}

img.product-1-thumb,
img.product-2-thumb,
img.product-3-thumb,
img.product-4-thumb,
img.product-5-thumb,
img.product-6-thumb,
img.product-7-thumb,
img.product-8-thumb,
img.product-9-thumb{
	opacity: 0;
	-webkit-transition:all .5s;
	-moz-transition:all .5s;
	-ms-transition:all .5s;
	-o-transition:all .5s;
	transition:all .5s;	
}

img.product-1-thumb{
	opacity: 1;
}

#megaMenuNav{
	width:480px;
	float:left;
}

#megaMenuNav ol{
	list-style: none;
	overflow: hidden;
}

#megaMenuNav ol li{
	float:left;
	margin:0 10px;
}

#megaMenuNav ol li:first-child{
	padding-right:5px;
}

#navigation ol li a{
	font-size:14px;
	color:#f4f1f1;
	cursor:pointer;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-ms-transition:all .3s;
	-o-transition:all .3s;
	transition:all .3s;
}




#language{
	width:100px;
	height:130px;
	float:left;
}

#language a{
	display:inline-block;
	background:url('../images/en-img.png') no-repeat center -2px;
	padding:8px 15px;
	margin-left:3px;
	margin-top:50px;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-ms-transition:all .3s;
	-o-transition:all .3s;
	transition:all .3s;
}

#language a:hover,
#language a.selected{
	background:url('../images/en-img.png') no-repeat center -43px;
}

#language a#farsiLanguage{
	background:url('../images/fa-img.png') no-repeat center -2px;
}

#language a#farsiLanguage:hover,
#language a#farsiLanguage.selected{
	background:url('../images/fa-img.png') no-repeat center -43px;
}


#language a.selected:hover{
	cursor:context-menu;
}








/*****       Slider       *****/


.tp-banner-container{
	width:100%;
	position:relative;
	padding:0;
}

.tp-banner{
	width:100%;
	position:relative;
}

.tp-banner-fullscreen-container {
	width:100%;
	position:relative;
	padding:0;
}







/*****       Who We Are       *****/



#who-we-are{
	width:100%;
	overflow: hidden;
	padding:40px 0;
	border-bottom:2px solid #090e1b;
}

#who-we-are h1{
	padding-top:30px;
}

#who-we-are p{
	width:792px;
	margin:auto;
	text-align: justify;
	padding-top:50px;
	padding-bottom:30px;
}







/*****       What We Do       *****/




#what-we-do{
	width:100%;
	overflow: hidden;
	background: #c9c9c9;
	padding:40px 0 100px 0;
}

#what-we-do h1{
	padding:30px 0;
	color:#101a32;
}

#image-boxes-wrapper{
	position: relative;
	width:100%;
	height:403px;
	margin-top:40px;
}

.image-box{
	position: absolute;
	overflow: hidden;
	border:2px solid #090e1b;
}

.image-box img{
	-wekibt-transition:-webkit-transform 2s ease-in;
	-moz-transition:-moz-transform 2s ease-in;
	-ms-transition:-ms-transform 2s ease-in;
	-o-transition:-o-transform 2s ease-in;
	transition:transform 2s ease-in;
}

#what-we-do a:hover .image-box img{
	-webkit-transform:scale(1.2, 1.2);
	-moz-transform:scale(1.2, 1.2);
	-ms-transform:scale(1.2, 1.2);
	-o-transform:scale(1.2, 1.2);
	transform:scale(1.2, 1.2);
}

div.imgCover{
	display: table;
	position: absolute;
	z-index:3;
	top:0;
	left:0;
	background: #101a32;
	opacity:0;
	padding:20px;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;	
}

div.imgCover p{
	display:table-cell;
	vertical-align: middle;
	font-size:15px;
	color:#f4f1f1;
	line-height: 1.6em;
	text-align: center;
}

div.imgCover p span{
	color:#fbb449;
}

#what-we-do a:hover .image-box div.imgCover{
	opacity:.85;
}






/*****       Latest Event       *****/



#latest-event{
	width:100%;
	overflow: hidden;
	padding-bottom:70px;
}

#latest-event h1{
	padding:30px 0;
}

.latest-event-box{
	width:100%;
	overflow: hidden;
	margin-top:40px;
}

.latest-event-image{
	width:400px;
	float:left;
}

.latest-event-image img{
	border-radius: 2px;
}

.latest-event-content{
	position: relative;
	width:700px;
	float:left;
	padding:0 0 30px 30px;
}

.latest-event-content h3{
	display:inline-block;
	font-size:25px;
	text-align: left;
	padding-bottom:10px;
	border-bottom:2px solid #ffa217;
}

.latest-event-content p{
	margin:auto;
	text-align: justify;
	padding-top:30px;
}

.latest-event-content a{
	position: absolute;
	bottom:0;
	right:0;
	font-size:17px;
	color:#f4f1f1;
	padding-right:25px;
	background: url('../images/arrow.png') no-repeat right center;
}

.latest-event-content a:hover{
	color:#fbb449;
	background: url('../images/arrow-hover.png') no-repeat right center;
}







/*****       Footer       *****/



#footer{
	width:100%;
	height:70px;
	line-height: 70px;
	font-family: 'gotham-book';
	font-size:16px;
	color:#f4f1f1;
	background: transparent;
	border-top:2px solid #090e1b;
}

#poweredBy{
	width:50%;
	overflow: hidden;
	float:right;
	text-align: right;
}

#poweredBy a{
	color:#f4f1f1;
	-webkit-transition:all 1s;
	-moz-transition:all 1s;
	-ms-transition:all 1s;
	-o-transition:all 1s;
	transition:all 1s;
}

#poweredBy a:hover{
	color:darkorange;
}

#poweredBy a.yumaLink:hover{
	color:#01bbd6;
}

#copyright{
	width:50%;
	overflow: hidden;
	float:left;
	text-align: left;
}












/**************************************************************************************************************************

*******************************************************************  CONTACT.HTML  ****************************************

**************************************************************************************************************************/






/*****       Page Banner       *****/


#contact-us-banner{
	width:100%;
	height:500px;
}

#contact-us-banner #map_canvas{
	width:100%;
	height:500px;
	position: relative;
}

#contact-us-banner #map_canvas img{
	max-width:none!important;
	background:none!important
}






/*****       Breadcrumb       *****/


#breadcrumb{
	width:100%;
	height:60px;
	line-height: 50px;
	text-align: left;
	border-bottom:2px solid #090e1b;
	border-top:2px solid #090e1b;
}

#breadcrumb a{
	font-size:17px;
	color:#f4f1f1;
	margin-right:15px;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-ms-transition:all .3s;
	-o-transition:all .3s;
	transition:all .3s;
}

#breadcrumb a:hover{
	color:#fbb449;
}

#breadcrumb span{
	display: inline-block;
	font-size:17px;
	color:#fbb449;
	padding:5px 0 5px 35px;
	background: url('../images/breadcrumb.png') no-repeat left center;
}




#contact-us-content{
	width:100%;
}

#address-box{
	width:50%;
	float:left;
	padding:40px;
	padding-left:0;
	border-right:1px solid #090e1b;
}

#address-box table td address{
	font-family: 'gotham-book';
	font-size:16px;
	font-style: normal;
	color:#f4f1f1;
	line-height: 1.5em;
	padding-bottom:15px;
}

#address-box a{
	color:#f4f1f1;
}

#address-box a:hover{
	border-bottom:1px solid #fbb449;
}

#address-box table th{
	width:120px;
	font-family: 'gotham-book';
	font-size:18px;
	font-style: normal;
	font-weight: 400;
	color:#fbb449;
	line-height: 1.5em;
	text-align: left;
	padding-bottom:10px;
}

#form-box{
	width:50%;
	float:left;
	padding:40px;
	padding-right:0;
	border-left:1px solid #090e1b;
}

#form-box div.inputBox{
	width:100%;
	overflow: hidden;
	padding-top:20px;
}

#form-box form label{
	font-family: 'gotham-book';
	font-size:18px;
	color:#fbb449;
}

#form-box form input{
	float:right;
	width:250px;
	height:35px;
	padding:10px;
	font-family: 'gotham-book';
	font-size:18px;
	color:#222;
	background: #c9c9c9;
	outline: none;
	border:none;
	border-radius: 2px;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-ms-transition:all .3s;
	-o-transition:all .3s;
	transition:all .3s;	
}

#form-box form textarea{
	float:right;
	width:250px;
	height:135px;
	padding:10px;
	font-family: 'gotham-book';
	font-size:18px;
	color:#222222;
	background: #c9c9c9;
	outline: none;
	border:none;
	border-radius: 2px;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-ms-transition:all .3s;
	-o-transition:all .3s;
	transition:all .3s;	
}

#form-box input[type="submit"]{
	display:block;
	width:104px;
	height:35px;
	font-size:17px;
	line-height: 14px;
	outline: none;
	border:none;
	color:#fbb449;
	cursor: pointer;
	background: #08304b;
	margin:auto;
	margin-bottom:0;
}

#form-box input[type="submit"]:hover,
#form-box input[type="submit"]:focus{
	background: #0e4f64;
}

#form-box input[type="submit"]:disabled{
	background: #c9c9c9;
	color:#222222;
	cursor:context-menu;
}

#form-box input.successBorder,
#form-box textarea.successBorder{
	background: #c9c9c9;
	color:#222222;
}

#form-box input.errorBorder{
	background: rgba(220,47,47, .85);
	color:#ffffff;
}












/**************************************************************************************************************************

*******************************************************************  ABOUT.HTML  ****************************************

**************************************************************************************************************************/









#about-us-banner{
	width:100%;
	height:500px;
	background: url('../images/about/banner.jpg') no-repeat;
	background-size:cover;
}

#about-us-content{
	width:100%;
	overflow: hidden;
	padding:40px 0;
}

#about-us-content p{
	width:792px;
	margin:auto;
	text-align: justify;
}

#about-us-content strong{
	font-size:18px;
	display:inline-block;
	margin-left:155px;
	text-align: left;
	padding-top:50px;
	padding-bottom:10px;
	border-bottom:2px solid #ffa217;
}

#about-us-content ul{
	width:792px;
	margin:auto;
	list-style: disc;
	padding-left:20px;
	padding-top:20px;
}

#about-us-content ul li{
	float:none;
	font-size:17px;
	line-height: 1.5em;
	color:#ffa217;
	margin-top:15px;
}

#about-us-gallery{
	width:100%;
	overflow: hidden;
	margin-top:100px;
}


















/**************************************************************************************************************************

*******************************************************************  recovery.HTML  ****************************************

**************************************************************************************************************************/









#recovery-banner{
	width:100%;
	height:500px;
	background: url('../images/recovery/banner.jpg') no-repeat;
	background-size:cover;
}

#recovery-content{
	width:100%;
	overflow: hidden;
}

#recovery-content .frame{
	border:2px solid #090e1b;
	border-bottom:none;
	border-top:none;
}

div.recovery-box{
	width:100%;
	float:left;
	padding:30px;
	border-bottom:2px solid #090e1b;
}

div.recovery-box:last-child{
	border-bottom:none;
}

div.recovery-box img{
	border-radius: 2px;
}

div.recovery-box h3{
	display:block;
	font-size:25px;
	text-align: center;
	padding:20px 0;
	padding-bottom:20px;
	border-bottom:2px solid #ffa217;
}

div.recovery-box p{
	font-size:17px;
	padding-top:20px;
	text-align: justify;
}
















/**************************************************************************************************************************

*******************************************************************  PRODUCTS.HTML  ****************************************

**************************************************************************************************************************/









#products-banner{
	width:100%;
	height:500px;
	background: url('../images/products/banner.jpg') no-repeat;
	background-size:cover;
}

#products-content{
	width:100%;
	overflow: hidden;
	padding:40px 0;
}

#products-content .row{
	width:100%;
	overflow: hidden;
	padding:20px 70px;
}

div.product-box{
	position: relative;
	width:280px;
	height:280px;
	overflow: hidden;
	float:left;
	margin-left:40px;
	border:10px solid #0b152c;
	border-radius: 2px;
	z-index:5;
}

div.product-box-cover{
	display:table;
	position: absolute;
	left:0;
	bottom:0;
	width:260px;
	height: 70px;
	background: #101a32;
	border:1px solid #0b152c;
	border-left:none;
	border-right:none;
	opacity: .85;
	z-index:10;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;	
}

div.product-box-cover h3{
	display:table-cell;
	vertical-align: middle;
	font-family: 'gotham-book';
	font-size:19px;
	color:#f4f1f1;
	text-align: center;
	padding-bottom:5px;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}

div.product-box a{
	color:#ffa217;
}

div.product-box:hover div.product-box-cover{
	height:260px;
}


div.product-box img{
	-wekibt-transition:-webkit-transform .7s ease-in;
	-moz-transition:-moz-transform .7s ease-in;
	-ms-transition:-ms-transform .7s ease-in;
	-o-transition:-o-transform .7s ease-in;
	transition:transform .7s ease-in;
}

div.product-box:hover img{
	-webkit-transform:scale(1.1, 1.1);
	-moz-transform:scale(1.1, 1.1);
	-ms-transform:scale(1.1, 1.1);
	-o-transform:scale(1.1, 1.1);
	transform:scale(1.1, 1.1),;
}

div.product-box:hover h3{
	font-size:24px;
	color:#ffa217;
}
















/**************************************************************************************************************************

*******************************************************************  EVENTS.HTML  ****************************************

**************************************************************************************************************************/









#events-banner{
	width:100%;
	height:500px;
	background: url('../images/events/banner.jpg') no-repeat;
	background-size:cover;
}

#events-content{
	width:100%;
	overflow: hidden;
}

#events-content div.frame{
	border:2px solid #090e1b;
	border-bottom:none;
	border-top:none;
}

#events-content div.event-box{
	width:100%;
	overflow: hidden;
	padding:30px 30px 60px 30px;
	border-top:2px solid #090e1b;
}

#events-content div.event-box:first-child{
	border-top:none;
}

div.event-box h1{
	font-size:35px;
	text-align: left;
	padding:10px 0 15px 0;
	border-bottom:2px solid #ffa217;
}

div.event-box img{
	border-radius: 2px;
	margin:20px 0;
}

div.event-box p{
	text-align: justify;
}

div.event-box p a{
	color:#fbb449;
	margin:0 5px;
}


















/**************************************************************************************************************************

*******************************************************************  SPECIFIC-PRODUCT.HTML  ****************************************

**************************************************************************************************************************/









#specific-product-banner{
	width:100%;
	height:500px;
	background: url('../images/products/banner.jpg') no-repeat;
	background-size:cover;
}

#specific-product-content{
	width:100%;
	overflow: hidden;
}

#specific-product-content .frame{
	border:2px solid #090e1b;
	border-bottom:none;
	border-top:none;
}

#sidebar{
	width:30%;
	overflow: hidden;
	float:left;
}

#sidebar ul{
	overflow: hidden;
	padding-top:1px;
}

#sidebar ul li{
	display: block;
	width:100%;
	height:65px;
	line-height: 65px;
	font-family: 'gotham-book';
	font-size:18px;
	color:#f4f1f1;
	border-bottom: 2px solid #090e1b;
	border-top:1px solid #182445;
	background: url('../images/product-icon.png') no-repeat 100px center;
}

#sidebar ul li:first-child{
	border-top:none;
}

#sidebar ul li:hover,
#sidebar ul li.selected{
	background: url('../images/product-icon-hover.png') no-repeat 100px center;
	color:#ffa217;
}

#sidebar ul li a{
	color:inherit;
	display: block;
	padding-left:135px;
}

#sidebar ul li.selected a{
	cursor:context-menu;
}

#specific-product{
	width:70%;
	overflow: hidden;
	padding:50px 30px;
	float:left;
	border-left:2px solid #090e1b;
}

#specific-product h1{
	font-size:35px;
	color:#ffa217;
}

#specific-product p{
	font-size:18px;
	text-align: justify;
	padding:40px 0;
}

#specific-product ul{
	overflow: hidden;
}

#specific-product ul li{
	float:left;
	width:150px;
	height:150px;
	margin-left:20px;
	margin-top:20px;
	border:5px solid #0b152c;
	border-radius: 2px;
}

#specific-product ul li:hover{
	opacity: .7;
}