/***********************
HAT MEDYA 2014
http://www.hatmedya.com
info@hatmedya.com
ie8, ff, chrome
***********************/
@import"../css/reset.css";
@import url(http://fonts.googleapis.com/css?family=Dosis&subset=latin,latin-ext);
body {background:#fff; font:16px/22px 'Dosis', sans-serif; color:#666;}
html,body {height:100%;}

.fuar {position:absolute; z-index:99; left:0; top:0; width:100%; height:100%; background:rgba(51,51,51,0.7); text-align:center; padding:150px 0 0 0;}
.fuar img { }
.kapat{ display:inline-block; width:900px; height:50px; background:#2b3f62;}
.kapat a{ display:block; color:#FFF; text-decoration:none; line-height:50px;}
 

p {padding-bottom:20px;}
a {text-decoration:none;}
a:hover,a:focus {text-decoration:none;}
img {border:0px;}

h1,h2,h3,h4,h5 {font-weight:normal; font-style:normal;}
h1 {font-size:27px; margin-bottom:24px; color:#333;}
h2 {font-size:24px; margin-bottom:21px; color:#0093dd;}
h3 {font-size:21px; margin-bottom:18px; color:#333;}

.clear {clear:both; line-height:0; font-size:0; overflow:hidden; height:0; width:100%;}
.fleft {float:left}
.fright {float:right}
.alignright {text-align:right}
.aligncenter {text-align:center}
.alignjust {text-align:justify}
.alignmiddle *{vertical-align:middle}
.alignleft {text-align:left;}
.it {font-style:italic;}

.sayfa404 {font-size:18px; text-align:center; height:250px; padding-top:170px;}

/* PADDING ---------------------------------------- */
.padtop5 {padding-top:5px;}
.padtop10 {padding-top:10px;}
.padtop15 {padding-top:15px;}
.padtop20 {padding-top:20px;}
.padtop25 {padding-top:25px;}
.padtop30 {padding-top:30px;}
.padtop35 {padding-top:35px;}
.padtop40 {padding-top:40px;}
.padtop45 {padding-top:45px;}
.padtop50 {padding-top:50px;}
.padbot5 {padding-bottom:5px;}
.padbot10 {padding-bottom:10px;}
.padbot15 {padding-bottom:15px;}
.padbot20 {padding-bottom:20px;}
.padbot23 {padding-bottom:23px;}
.padbot25 {padding-bottom:25px;}
.padbot30 {padding-bottom:30px;}
.padbot35 {padding-bottom:35px;}
.padbot40 {padding-bottom:40px;}
.padbot43 {padding-bottom:43px;}
.padbot45 {padding-bottom:45px;}
.padbot50 {padding-bottom:50px;}
.padlef5 {padding-left:5px;}
.padlef10 {padding-left:10px;}
.padlef15 {padding-left:15px;}
.padlef20 {padding-left:20px;}
.padlef25 {padding-left:25px;}
.padright6 {padding-right:6px;}
.padright20 {padding-right:20px;}
.padright40 {padding-right:40px;}

/* GRIDS ---------------------------------------- */
.grid0 {width:980px; margin:0 auto; float:none;}
	.grid0 div:first-child {margin-left:0;}
.grid1 {width:645px; float:left; margin-left:25px;}
.grid2 {width:480px; float:left; margin-left:20px;} /* 2 kolon */
.grid3 {width:310px; float:left; margin-left:25px;} /* 3 kolon */
.grid4 {width:230px; float:left; margin-left:20px;} /* 4 kolon */

.grid5 {width:280px; float:left; margin-left:0;} /* banner */
.grid6 {width:610px; height:130px; float:left; margin-left:-10px;} /* banner */
.grid7 {width:100px; float:left; margin-left:0;} /* banner */

/* HEADER ---------------------------------------- */
header {position:relative; width:100%; height:150px; border-bottom:1px solid #0093dd; margin:0 auto; z-index:1;}
.micon {padding-top:61px; color:#333;}
.bg-mavi {background:#0093dd; color:#fff; padding:0; width:50px; height:56px; border-radius:5px; float:right; position:relative; bottom:-4px;}
.bg-mavi button {font-size:36px; color:#fff; width:40px; height:56px; padding:8px; margin:0; cursor:pointer;}
.bg-mavi2 {background:#0093dd; color:#fff; padding:0; width:42px; height:46px; border-radius:5px; float:right; position:relative; top:-3px; z-index:5;}
.bg-mavi2 a {font-size:18px; line-height:44px; color:#fff; width:40px; height:46px; padding:10px; margin:0; cursor:pointer;}

.intro {position:fixed; z-index:10; overflow:hidden; width:100%; height:100%; background:#fff;
-webkit-transition:-webkit-transform 0.6s;
transition:transform 0.6s;
-webkit-transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);
transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);}
.container-open .intro {
	-webkit-transform:translate3d(0, -100%, 0) translate3d(0, 150px, 0);
	transform:translate3d(0, -100%, 0) translate3d(0, 150px, 0);}
.intro-image {position:absolute; bottom:0; min-width:100%; min-height:100%; width:auto; height:auto; opacity:1;
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0);
-webkit-transition:-webkit-transform 0.6s, opacity 0.6s;
transition:transform 0.6s, opacity 0.6s;
-webkit-transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);
transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);}
.container-open .intro-image {opacity:0;
-webkit-transform:translate3d(0, 20%, 0);
transform:translate3d(0, 20%, 0);}
.container-open .home::after {opacity:0;}
.intro-content {position:absolute; bottom:0; padding:10px 20px 0; width:100%;}
.logo {background:url(../images/logo-w.png) no-repeat; width:270px; height:140px;}
.container-open .logo {background:url(../images/logo.png) no-repeat;}
.container-open .logo::after {background:url(../images/logo-w.png) no-repeat;}

.container-open .banner { position:relative; height:140px; /*background:url(../images/emin-ipek-kaucuk.jpg) bottom no-repeat;*/}
.container-open .banner::after { position:relative; height:140px; /*background:url(../images/emin-ipek-kaucuk.jpg) bottom no-repeat;*/}

.but1 {position:relative; -webkit-flex:none; flex:none; outline:none; border:none; background:none;}
.home {position:relative; display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; padding:150px 0 0;}
	.home::after {position:absolute; top:0; left:0; width:100%; height:100%; background:#fff; content:''; opacity:1;
	-webkit-transition:opacity 0.6s;
	transition:opacity 0.6s;
	-webkit-transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);
	transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);
	pointer-events:none;}

.menukap {position:relative; height:50px; width:100%; background:#0093dd; margin-top:-1px;}
.menukap ul {margin-left:auto; margin-right:auto; display:inline-block;}
*:first-child+html .menukap {text-align:center}
* html .menukap {text-align:center}
.menu {padding:0; list-style:none; font-size:16px; line-height:normal;}
	.menu li {position:relative; float:left;}
	.menu li:first-child {border-left:0px;}
	.menu li a {display:block; color:#fff; padding:0 18px 0; line-height:50px; position:relative;
	-webkit-transition:all 0.5s ease;
	-moz-transition:all 0.5s ease;
	-o-transition:all 0.5s ease;
	transition:all 0.5s ease;}
	.menu li.current a,.menu li a:hover {background:#fff; color:#0093dd; text-decoration:none;}
	@media screen\0 {
	.menu li a {padding:0 23px 0;}
	}

/* SLIDER ---------------------------------------- */
.lead{font-size:21px; line-height:38px; text-shadow:0 2px rgba(0, 0, 0, 0.4);}
#main-slider {
  padding: 250px 0;
  color: #fff;
}
#main-slider .item {
  -moz-transition: opacity ease-in-out 500ms;
  -o-transition: opacity ease-in-out 500ms;
  -webkit-transition: opacity ease-in-out 500ms;
  transition: opacity ease-in-out 500ms;
  left: 0 !important;
  opacity: 0;
  top: 0;
  position: absolute;
  width: 100%;
  display: block !important;
  z-index: 1;
  text-align: center;
}
#main-slider .item:first-child {
  top: auto;
  position: relative;
}
#main-slider .item.active {
  opacity: 1;
  -moz-transition: opacity ease-in-out 500ms;
  -o-transition: opacity ease-in-out 500ms;
  -webkit-transition: opacity ease-in-out 500ms;
  transition: opacity ease-in-out 500ms;
  z-index: 2;
}
#main-slider .item.active .baslik {
  -webkit-animation: scaleUp 400ms;
  -moz-animation: scaleUp 400ms;
  -o-animation: scaleUp 400ms;
  -ms-animation: scaleUp 400ms;
  animation: scaleUp 400ms;
}
#main-slider .prev,
#main-slider .next {
  position: absolute;
  top: 50%;
  background-color: rgba(0, 0, 0, 0.2);
  color: #fff;
  display: inline-block;
  margin-top: -50px;
  font-size:18px;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 4px;
  z-index: 5;
}
#main-slider .prev i,
#main-slider .next i {  
  line-height: 44px;
  text-align: center;
  opacity:0.3;
}
#main-slider .prev:hover,
#main-slider .next:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
#main-slider .prev:hover i,
#main-slider .next:hover i {  
  opacity:0.8;
}
#main-slider .prev {
  left: 10px;
}
#main-slider .next {
  right: 10px;
}
#main-slider .baslik {
  font-size: 48px;
  line-height:60px;
  text-shadow: 0 3px rgba(0, 0, 0, 0.1);
  color: #0093dd;
}
.carousel.scale .left-arrow,
.carousel.scale .right-arrow {
  top: 30%;
  position: absolute;
}
.carousel.scale .left-arrow {
  left: -10px;
}
.carousel.scale .right-arrow {
  right: -10px;
}
.carousel.scale .active .row > div:nth-child(1) {
  -webkit-animation: scaleUp 200ms linear 0 both;
  -moz-animation: scaleUp 200ms linear 0 both;
  -ms-animation: scaleUp 200ms linear 0 both;
  -o-animation: scaleUp 200ms linear 0 both;
  animation: scaleUp 200ms linear 0 both;
}
.carousel.scale .active .row > div:nth-child(2) {
  -webkit-animation: scaleUp 200ms linear 100ms both;
  -moz-animation: scaleUp 200ms linear 100ms both;
  -ms-animation: scaleUp 200ms linear 100ms both;
  -o-animation: scaleUp 200ms linear 100ms both;
  animation: scaleUp 200ms linear 100ms both;
}
.carousel.scale .active .row > div:nth-child(3) {
  -webkit-animation: scaleUp 200ms linear 200ms both;
  -moz-animation: scaleUp 200ms linear 200ms both;
  -ms-animation: scaleUp 200ms linear 200ms both;
  -o-animation: scaleUp 200ms linear 200ms both;
  animation: scaleUp 200ms linear 200ms both;
}
.carousel.scale .active .row > div:nth-child(4) {
  -webkit-animation: scaleUp 200ms linear 400ms both;
  -moz-animation: scaleUp 200ms linear 400ms both;
  -ms-animation: scaleUp 200ms linear 400ms both;
  -o-animation: scaleUp 200ms linear 400ms both;
  animation: scaleUp 200ms linear 400ms both;
}
@keyframes scaleUp {
	0% {opacity:0; transform:scale(0.3);}
	100% {opacity:1; transform:scale(1);}
}
@-moz-keyframes scaleUp {
	0% {opacity:0; -moz-transform:scale(0.3);}
	100% {opacity:1; -moz-transform:scale(1);}
}
@-webkit-keyframes scaleUp {
	0% {opacity:0; -webkit-transform:scale(0.3);}
	100% {opacity:1; -webkit-transform:scale(1);}
}
@-ms-keyframes scaleUp {
	0% {opacity:0; -ms-transform:scale(0.3);}
	100% {opacity:1; -ms-transform:scale(1);}
}
@-o-keyframes scaleUp {
	0% {opacity:0; -o-transform:scale(0.3);}
	100% {opacity:1; -o-transform:scale(1);}
}

/* CONTENT ---------------------------------------- */
section {position:relative; z-index:1; width:100%;}
.home1 {}
	.home1 h2 a {color:#0093dd;}
.home2 {}
	.home2 h2 a {font-size:22px; color:#0093dd; display:block; text-align:center;}
	.home2 img {border:1px solid #ccc;}
.home3 { min-height:300px;}
	.home3 h2 a {font-size:22px; color:#0093dd;}
	.home3 img {border:1px solid #ccc;}
	.home3 ul{margin:-5px 0 0 0; float:}
	.home3 li{ margin:0 0 0 22px; list-style:none;}
	.home3 .first-li{ margin:0 0 0 0; list-style:none;}
	.background { background:url(../images/emin-ipek-kaucuk-bina.jpg) no-repeat top center;}
.home4 {}
	.home4 h2 a {font-size:22px; color:#0093dd; display:block; text-align:left;}
	.home4 img {border:1px solid #ccc;}
	
.slogan {border-top:1px solid #ccc; border-bottom:1px solid #ccc; color:#333; padding:20px 0; margin-top:10px; margin-bottom:20px; text-align:center; font-style:italic; font-size:17px;}
	.slogan div {font-size:28px; margin-bottom:14px; font-style:normal;}
	.slogan span {color:#0093dd;}
address {margin-top:10px; font-style:normal;}
	address span {display:inline-block; width:100px; font-weight:500; color:#333; float:left;}
	
#contact-map {width:980px;height:250px;}
	
.resimler{
	width:100%;
	margin:-20px auto 2px;
	text-align:center;/*thums içeriği ortalı gelsin*/
}

.resimler img{
	width:180px;
	height:135px;
	display:inline-block;
	border:1px solid #ccc;
	box-shadow:0 1px 3px rgba(204,204,204,0.6);
	border-radius:0;
	margin: 20px 17px 0 -9px;
	position:relative;
	text-decoration:none;
	
	background-position:center center;
	background-repeat: no-repeat;
	
	background-size:cover;
	-moz-background-size:cover;
	-webkit-background-size:cover;
}

.resimler img:after{
	background-color: #303030;
    border-radius: 7px;
    bottom: -136px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    color: #FFFFFF;
    /*content: attr(title);*//*resimlerin altındaki a href title*/
    display: inline-block;
    font-size: 10px;
    max-width: 90px;
    overflow: hidden;
    padding: 2px 10px;
    position: relative;
    text-align: center;
    white-space: nowrap;
}
.resimler div{width:180px; display:inline-table;}
.resimler p{margin-left:-10px; width:184px; margin-bottom:-30px; min-height:30px;}
.resimler a{ color:#333;}

.resimler-kalite{
	width:100%;
	margin:-20px auto 2px;
	text-align:center;/*thums içeriği ortalı gelsin*/
}

.resimler-kalite img{
	width:182px;
	height:250px;
	display:inline-block;
	border:1px solid #ccc;
	box-shadow:0 1px 3px rgba(204,204,204,0.6);
	border-radius:0;
	margin: 20px 17px 0 -9px;
	position:relative;
	text-decoration:none;
	
	background-position:center center;
	background-repeat: no-repeat;
	
	background-size:cover;
	-moz-background-size:cover;
	-webkit-background-size:cover;
}

.resimler-kalite img:after{
	background-color: #303030;
    border-radius: 7px;
    bottom: -251px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    color: #FFFFFF;
    /*content: attr(title);*//*resimlerin altındaki a href title*/
    display: inline-block;
    font-size: 10px;
    max-width: 90px;
    overflow: hidden;
    padding: 2px 10px;
    position: relative;
    text-align: center;
    white-space: nowrap;
}
.resimler-kalite div{width:182px; display:inline-table;}
.resimler-kalite p{margin-left:-10px; width:186px; margin-bottom:-30px; min-height:30px;}
.resimler-kalite a{ color:#333;}

.thumbs-2{
	width:100%;
	margin:20px auto 2px;
	text-align:center;/*thums içeriği ortalı gelsin*/
}

.thumbs-2 a{
	width:180px;
	height:135px;
	display:inline-block;
	border:1px solid #333;
	box-shadow:0 1px 3px rgba(0,0,0,0.5);
	border-radius:4px;
	margin: 6px 6px 6px;
	position:relative;
	text-decoration:none;
	
	background-position:center center;
	background-repeat: no-repeat;
	
	background-size:cover;
	-moz-background-size:cover;
	-webkit-background-size:cover;
}

.thumbs-2 a:after{
	background-color: #303030;
    border-radius: 7px;
    bottom: -136px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    color: #FFFFFF;
    /*content: attr(title);*//*resimlerin altındaki a href title*/
    display: inline-block;
    font-size: 10px;
    max-width: 90px;
    overflow: hidden;
    padding: 2px 10px;
    position: relative;
    text-align: center;
    white-space: nowrap;
}

/* FOOTER ---------------------------------------- */
footer {height:70px; margin:0 auto; border-top:1px solid #ccc; margin-top:40px; font-size:13px; line-height:20px;}
	footer img {float:left; margin-right:20px;}
	footer .sosyal {margin-top:5px;}
	footer .sosyal img {float:inherit; margin:0;}

/*-- KARİYER */
.ikform {width:980px; margin:0 auto; font-size:13px; line-height:42px;}
	.ikform input[type="text"],input[type=password],input[type="date"] {font:12px Arial, sans-serif; color:#666; padding:7px 9px; background:#fff; border:1px solid #aaa; vertical-align:middle; margin-top:-1px;}
	.ikform input[type="submit"],input[type="reset"] {font-size:15px; color:#fff; padding:10px 20px; border:1px solid #aaa; border-radius:3px;
		background: #0093dd;
		background: -webkit-gradient(linear, 0 0, 0 bottom, from(#0093dd), to(#0093dd));
		background: -webkit-linear-gradient(#0093dd, #0093dd);
		background: -moz-linear-gradient(#0093dd, #0093dd);
		background: -ms-linear-gradient(#0093dd, #0093dd);
		background: -o-linear-gradient(#0093dd, #0093dd);
		background: linear-gradient(#0093dd, #0093dd);
		-pie-background: linear-gradient(#0093dd, #0093dd);}!important
	.ikform input[type="submit"]:hover,input[type="reset"]:hover {background:#fff; color:#0093dd; border:1px solid #0093dd;}
	.ikform textarea {font:12px Arial, sans-serif; color:#666; padding:7px 9px; background:#fff; border:1px solid #aaa; width:940px; vertical-align:middle; margin:0; resize:none; overflow:auto;}
	.ikform .bgform {background:#eee;}

.ik0 {width:960px; padding:7px 10px; margin-top:20px; background:#0093dd; font-size:15px; color:#fff;}
.ik1 {width:485px;}
	.ik2 {width:210px; padding-left:10px; float:left;}
	.ik3 {width:265px; height:42px; text-align:left; float:left;}
		.ik3 input {width:235px;}
.ik4 {width:960px; padding:0 10px;}
.ik5 {width:235px; height:42px; padding-left:10px; float:left;}
	.ik5 input {width:205px;}
.ik6 {width:245px; height:42px; float:left;}
	.ik6 input {width:215px;}
.ik7 {width:735px; height:42px; float:left;}
	.ik7 input {width:705px;}
	
.gonder{cursor:pointer;}
.copyright{font-size:10px; color:#333; opacity:0.5;}
.copyright:hover{opacity:1;}