@font-face {
    font-family: 'bebasregular';
    src: url('bebas___-webfont.eot');
    src: url('bebas___-webfont.eot?#iefix') format('embedded-opentype'),
         url('bebas___-webfont.woff') format('woff'),
         url('bebas___-webfont.ttf') format('truetype'),
         url('bebas___-webfont.svg#bebasregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'filosofia_regular_italicIt';
    src: url('filosofia_regular_italic-webfont.eot');
    src: url('filosofia_regular_italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('filosofia_regular_italic-webfont.woff') format('woff'),
         url('filosofia_regular_italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}




body {
	font-family: 'bebasregular', Arial;
	background:#f1f0f0;
	font-size: 15px;
	border:0;
	margin:20px 0px 0px 0px;
}

img,div,p,nav {
	border-style:none;
	outline:none;
}


.logo{
	margin:0 auto;
	position:relative;
	top:20px;
	width:79px;
	height:121px;
}

#logo_hover{
	position: absolute;
	width: 100%;
	height: 130px;
	left: 0;
	margin-top: 60px;
}

/* @end */

/* @group nav */
nav{
	margin:0 auto;
	width:960px;
	color: #363636;
	display: none;
}



/* @group work */
#work{
	background-color: #f1f0f0;
	width: 100%;
	float: left;
	clear: both;
	display: none;
}
#work_wrapper{
	width: 930px;
	margin-right: auto;
	margin-left: auto;
	clear: both;
	
	padding-top: 20px;
	position: relative;
	top: 0;
	left: 0;
}
#mywork1{
}
#work_desc{
	text-align:center;
	color: #afa4a0;
	margin-bottom: 30px;
}

.prev{
	position:absolute;
	z-index:99999999999;
	top:180px;
}
.next{
	position:absolute;
	z-index:99999999999;
	top:180px;
	right:0px;
}

#close{
	position:relative;
	z-index:99999999999;
	float: left;
	cursor: hand;
	padding-right: 0px;
	position: absolute;
	top:0px;
	left: 930px;
}


.icerik_text{font-family: 'bebasregular', Arial; font-size:13px; font-weight:bold; padding-bottom:5px; cursor:pointer;border-bottom:1px #c3b6b1 solid;}
.icerik_text2{font-family: 'filosofia_regular_italicIt'; font-size:16px; padding-top:0px; cursor:pointer;}



/* @group slideImg */

.menu{ margin:0 auto; width:1220px; height:100px; text-decoration:none; }
.menu li{ float:left; padding:0px 10px; text-decoration:none; list-style:url(../img/nokta_.png); text-align:center;}
.menu li:hover, .menu li.active{ float:left; padding:0px 10px; list-style:url(../img/nokta.png); text-decoration:none; color:#9ad3d9;}

.m_text_altt{font-family: 'bebasregular', Arial; font-size:18px; font-weight:bold; padding-bottom:5px;}
.m_text_altt a{color:#c3b6b1; text-decoration:none;}
.m_text_altt a:hover{color:#9bd4da;}

.m_text_alt{font-family: 'bebasregular', Arial; color:#c3b6b1; font-size:11px; font-weight:bold; padding-bottom:5px; cursor:pointer;border-bottom:1px #c3b6b1 solid;}
.m_text2_alt{font-family: 'filosofia_regular_italicIt'; color:#c3b6b1; font-size:16px; padding-top:5px; cursor:pointer;}

.m_textt{font-family: 'bebasregular', Arial; color:#fff; font-size:15px; font-weight:bold; margin-top:55px;z-index:3; display:inline-block;border-bottom:1px #FFFFFF solid;}
.m_textt2{font-family: 'filosofia_regular_italicIt'; color:#fff; font-size:19px; margin-top:5px; z-index:3;}
.text_div{position:absolute; width:149px; text-align:center; height:150px; vertical-align:middle; z-index:3; cursor:pointer;}



/* @end */ 
#work_loading{
	width: 100%;
	display: block;
	float: left;
	position: relative;
	top: 0;
	left: 0;
}
#work_loading1{
	background-color: #ec4399;
	width: 100%;
	display: block;
	float: left;
	height: 0px;
	z-index: 0;
	position: absolute;
	top: 0;
}
#work_loading2{
	background-color: #c3b6b1;
	width: 0%;
	display: block;
	float: left;
	height:1px;
	z-index: 2;
	position: relative;
	top: 0;
}

/* div hover scroll */
#scwrapper{
	overflow: hidden;
	  height: 471x;
 	 width: 268px;
	 margin-top: 49px;
	margin-left: 67px;
	position: absolute;
}
div.sc_menu_wrapper { 
  height: 471x;
  /* Make bigger than a photo, because we need a place for a scroll-bar. */
  width: 268px;
  margin-top: 49px;
	margin-left: 67px;
	position: relative;
	overflow: hidden;
}
div.sc_menu {
  padding: 0;
}
.sc_menu a {
  display: block;
  margin-bottom: 5px;
  width: 130px;

  border: 2px rgb(79, 79, 79) solid;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;

  /* When image support is turned off */
  color: #fff;
  background: rgb(79, 79, 79);  
}
.sc_menu a:hover {
}
.sc_menu img {
  display: block;
  border: none;
}
.sc_menu_wrapper .loading {
	position: absolute;
	top: 50px;
	left: 10px;
	
	margin: 0 auto;
	padding: 10px;

	width: 100px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;	
	
	text-align: center;
	color: #fff;
	border: 1px solid rgb(79, 79, 79);
	background: #1F1D1D;
}
#nav{
	position: relative;
	top: -20px;
} /* scroll to nav */

/* @end */

.content{ width:1050px; margin:0 auto; position:relative;}
/* @group playground */
#playground{
	position:relative;
	margin:0 auto;
	width: 1050px;
	display:inline-block;


}
.thumbnail{
	float: left;
	width: 329px;
	height: 204px;
	
}
.m_text{font-family: 'bebasregular', Arial; color:#fff; font-size:15px; font-weight:bold; cursor:pointer;  position:absolute; top:90px; left:5px; z-index:3; border-bottom:1px #FFFFFF solid;}
.m_text2{font-family: 'filosofia_regular_italicIt'; color:#fff; font-size:18px; cursor:pointer;position:absolute; top:120px; left:5px; z-index:3;}

.ara{ width:31px; float:left; height:204px; }
.thumbnail_box{
	padding:0px 0px 15px 15px;
	float: left;
	width: 329px;
	height: 204px;

}

.portf{width: 329px; height:204px; background:#d1c8c4;}
.proje_adi{ width:329px; height:204px; font-family: 'bebasregular', Arial; color:#FFF; text-decoration:none; text-align:center; font-size:14px; position:absolute; z-index:2; top:40px; background:#666; }
.thumbnail_wrapper{
width: 329px;
	height: 204px;
	overflow: hidden;
	position: relative;
	float: left;
	top: 15px;
	display: none;
}
.thumbnail_wrapper img{
	position: absolute;
	top: 0;
	left: 0; 
}

.frame{
	z-index: 3;
}

.cover{
	background:#999;
	height:50px;
	z-index: 2;
}
.circle{
	padding: 15px 8px 10px 7px;
}
.triangle{
	padding: 22px 0 20px;
}
.square{
	padding: 23px 17px 22px 16px;
}
#divider{

	height: 30px;
	width: 100%;
	
	display: block;
	clear: both;
	margin-left: 15px;
}

.hidden{
	visibility: hidden;
	display:none;
	height: 0px;
}

/* @end */

/* @group footer */

.altt{
	background:url(../img/alt_bg.png) repeat-x;
	position:absolute;
	bottom:0;
	width: 100%;
	height: 168px;

}

/* @end */


.m1{ width:149px; height:150px; background:#aea6a2; z-index:2; position:absolute; opacity:1;  	-webkit-transition:all 0.3s ease-in-out;
 			 -moz-transition:all 0.3s ease-in-out;
  			-ms-transition:all 0.3s ease-in-out;
  			-o-transition:all 0.3s ease-in-out;
  			transition:all 0.3s ease-in-out;}
.m1_{ width:149px; height:150px; background:#9bd5da; position:absolute; z-index:1;}



.m2{ width:149px; height:150px; background:#d2c9c5; z-index:2; position:absolute; opacity:1; 	-webkit-transition:all 0.3s ease-in-out;
 			 -moz-transition:all 0.3s ease-in-out;
  			-ms-transition:all 0.3s ease-in-out;
  			-o-transition:all 0.3s ease-in-out;
  			transition:all 0.3s ease-in-out;}
.m2_{ width:149px; height:150px; background:#00a88f; position:absolute; z-index:1;}

.m3{ width:149px; height:150px; background:#9e9794; z-index:2; position:absolute; opacity:1; 	-webkit-transition:all 0.3s ease-in-out;
 			 -moz-transition:all 0.3s ease-in-out;
  			-ms-transition:all 0.3s ease-in-out;
  			-o-transition:all 0.3s ease-in-out;
  			transition:all 0.3s ease-in-out;}
.m3_{ width:149px; height:150px; background:#ffc8c3; position:absolute; z-index:1;}


.m4{ width:149px; height:150px; background:#d2c9c5; z-index:2; position:absolute; opacity:1; 	-webkit-transition:all 0.3s ease-in-out;
 			 -moz-transition:all 0.3s ease-in-out;
  			-ms-transition:all 0.3s ease-in-out;
  			-o-transition:all 0.3s ease-in-out;
  			transition:all 0.3s ease-in-out;}
.m4_{ width:149px; height:150px; background:#ffc8ff; position:absolute; z-index:1;}

.m5{ width:149px; height:150px; background:#c3b6b1; z-index:2; position:absolute; opacity:1; 	-webkit-transition:all 0.3s ease-in-out;
 			 -moz-transition:all 0.3s ease-in-out;
  			-ms-transition:all 0.3s ease-in-out;
  			-o-transition:all 0.3s ease-in-out;
  			transition:all 0.3s ease-in-out;}
.m5_{ width:149px; height:150px; background:#024b65; position:absolute; z-index:1;}

.m6{ width:149px; height:150px; background:#d2c9c5; z-index:2; position:absolute; opacity:1; 	-webkit-transition:all 0.3s ease-in-out;
 			 -moz-transition:all 0.3s ease-in-out;
  			-ms-transition:all 0.3s ease-in-out;
  			-o-transition:all 0.3s ease-in-out;
  			transition:all 0.3s ease-in-out;}
.m6_{ width:149px; height:150px; background:#92a5a4; position:absolute; z-index:1;}


.m7{ width:149px; height:150px; background:#c3b6b1; z-index:2; position:absolute; opacity:1; 	-webkit-transition:all 0.3s ease-in-out;
 			 -moz-transition:all 0.3s ease-in-out;
  			-ms-transition:all 0.3s ease-in-out;
  			-o-transition:all 0.3s ease-in-out;
  			transition:all 0.3s ease-in-out;}
.m7_{ width:149px; height:150px; background:#810053; position:absolute; z-index:1;}

.m8{ width:149px; height:150px; background:#9e9794; z-index:2; position:absolute; opacity:1; 	-webkit-transition:all 0.3s ease-in-out;
 			 -moz-transition:all 0.3s ease-in-out;
  			-ms-transition:all 0.3s ease-in-out;
  			-o-transition:all 0.3s ease-in-out;
  			transition:all 0.3s ease-in-out;}
.m8_{ width:149px; height:150px; background:#b41e87; position:absolute; z-index:1;}

.m9{ width:149px; height:150px; background:#c3b6b1; z-index:2; position:absolute; opacity:1; 	-webkit-transition:all 0.3s ease-in-out;
 			 -moz-transition:all 0.3s ease-in-out;
  			-ms-transition:all 0.3s ease-in-out;
  			-o-transition:all 0.3s ease-in-out;
  			transition:all 0.3s ease-in-out;}
.m9_{ width:149px; height:150px; background:#ea4398; position:absolute; z-index:1;}

.m10{ width:149px; height:150px; background:#9e9794; z-index:2; position:absolute; opacity:1; 	-webkit-transition:all 0.3s ease-in-out;
 			 -moz-transition:all 0.3s ease-in-out;
  			-ms-transition:all 0.3s ease-in-out;
  			-o-transition:all 0.3s ease-in-out;
  			transition:all 0.3s ease-in-out;}
.m10_{ width:149px; height:150px; background:#8ed1c4; position:absolute; z-index:1;}

.m11{ width:149px; height:150px; background:#d2c9c5; z-index:2; position:absolute; opacity:1; 	-webkit-transition:all 0.3s ease-in-out;
 			 -moz-transition:all 0.3s ease-in-out;
  			-ms-transition:all 0.3s ease-in-out;
  			-o-transition:all 0.3s ease-in-out;
  			transition:all 0.3s ease-in-out;}
.m11_{ width:149px; height:150px; background:#ebe60e; position:absolute; z-index:1;}

.page_title{ background:url(../img/ucgen.png) no-repeat; width:149px; height:150px; margin:0px auto 10px auto; position:relative; }
.page_title2{ background:#00a88f; width:149px; height:150px; margin:0px auto 10px auto; position:relative; }
.page_title3{ border-radius:100px; background:#ffc8c3; width:149px; height:150px; margin:0px auto 10px auto; position:relative; }
.page_title4{ background:url(../img/ucgen2.png) no-repeat; width:149px; height:150px; margin:0px auto 10px auto; position:relative; }
.page_title5{background:#024b65; width:149px; height:150px; margin:0px auto 10px auto; position:relative; }
.page_title6{ border-radius:100px; background:#92a5a4; width:149px; height:150px; margin:0px auto 10px auto; position:relative;}
.page_title7{ background:url(../img/ucgen3.png) no-repeat; width:149px; height:150px; margin:0px auto 10px auto; position:relative; }
.page_title8{background:#b41e87; width:149px; height:150px; margin:0px auto 10px auto; position:relative; }
.page_title9{ background:url(../img/ucgen.png) no-repeat; width:149px; height:150px; margin:0px auto 10px auto; position:relative; }