@charset "utf-8";
/* 
Tolga Güzel
06.2015
www.arifozden.com
 */
@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,300italic&subset=latin,latin-ext);
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}
ol, ul {list-style: none;margin:0px;padding: 0px;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {	content: '';	content: none;}
table {	border-collapse: collapse;	border-spacing: 0;}
a{text-decoration: none;}
strong, b {font-family:'Flama-Medium';font-weight: 300; color: #8a898e;}
i { font-style: italic;}
input, textarea, button {border:none; resize:none;}
/*style css*/
@font-face {
	font-family:'Flama-Extrabold';
	src: url('../fonts/flama-extrabold.eot');
	src: url('../fonts/flama-extrabold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/flama-extrabold.woff') format('woff'),
		url('../fonts/flama-extrabold.ttf') format('truetype'),
		url('../fonts/flama-extrabold.otf') format('opentype'),
		url('../fonts/flama-extrabold.svg#Flama-Extrabold') format('svg');
	font-weight: 600;
	font-style: normal;
	font-stretch: normal;
}
@font-face {
	font-family:'Flama-Basic';
	src: url('../fonts/flama-basic.eot');
	src: url('../fonts/flama-basic.eot?#iefix') format('embedded-opentype'),
		url('../fonts/flama-basic.woff') format('woff'),
		url('../fonts/flama-basic.ttf') format('truetype'),
		url('../fonts/flama-basic.otf') format('opentype'),
		url('../fonts/flama-basic.svg#Flama-Extrabold') format('svg');
	font-weight: 500;
	font-style: normal;
	font-stretch: normal;
}
@font-face {
	font-family:'Flama-Medium';
	src: url('../fonts/flama-medium.eot');
	src: url('../fonts/flama-medium.eot?#iefix') format('embedded-opentype'),
		url('../fonts/flama-medium.woff') format('woff'),
		url('../fonts/flama-medium.ttf') format('truetype'),
		url('../fonts/flama-medium.otf') format('opentype'),
		url('../fonts/flama-medium.svg#Flama-Extrabold') format('svg');
	font-weight: 300;
	font-style: normal;
	font-stretch: normal;
}
* {margin:0; padding:0; outline-style: none;}
body {font-family:'Flama-Extrabold'; font-size: 14px; max-height: 100%;}
a {-o-transition:color .5s ease-out, background .5s ease-in; -ms-transition:color .5s ease-out, background .5s ease-in; -moz-transition:color .5s ease-out, background .5s ease-in; -webkit-transition:color .5s ease-out, background .5s ease-in; transition:color .5s ease-out, background .5s ease-in;-webkit-tap-highlight-color: rgba(0,0,0,0);}
@-moz-document url-prefix() {
	.menu ul li a {font-weight: normal;}
}
.clear {clear: both;}
.hidden {overflow-y:hidden;overflow-x:hidden;}
.centered {text-align: center ;}
.bx-controls-auto {display: none;}
.loading {position: absolute; width: 100%; height: 100%; z-index: 99; background:url(../images/loading.gif) rgba(0, 0, 0, 0.7) center center no-repeat; display: none;}
.wrapper {display:inline-block; width:100%;max-height:100%;height: auto !important; opacity: 0;}
.index_logo {float:left; width: 100%;}
.index_slider {position: fixed;height: 100%;top: 0;left: 0;}
.index_slider ul {width:100%; height: 100%; display: table;}
.index_slider ul li {height: 100%; vertical-align: middle; display: table-cell;}
.homeSlider {display: inline-block; width: 100%;}
.homeSlider #homeSlider {float:left; width: 100% !important; height: 100%; }
.homeSlider #homeSlider li {float:left; width: 100% !important;}
.homeSlider #homeSlider li img {float:left;width: 100%;}
.menu {float:left; padding:60px 0 0 60px;}
.menu.hide-show { /*display: none;*/ position: absolute; z-index: 99;}
.menu  ul li {display: block;}
.menu  ul li a {display: inline-block; color: #808284; font-size: 13px; line-height: 20px; letter-spacing: 1px; clear: both;}
.menu  ul li a:hover, .menu ul li a.active {display: inline-block; color: #231f20;}
.menu  ul li a.mrgn {color: #000; margin-bottom: 20px;}
.works {display: block;  padding: 30px 0px;}
.works .thumbs {float:left; height: 180px; margin:30px 0px 30px 0px; overflow: hidden;}
.works .thumbs .if_active {display: none;}
.works .thumbs a {position: relative; float:left; /*background: #bdbbbc;*/}
.works .thumbs a img {float:left; max-width: 100%; height: 180px;}
.works .thumbs a .else_active {position: relative; float:left; height: 100%;}
.works .thumbs a .else_active div {position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #FFF; background: #919191; font-size:13px; display: none;}
.works .thumbs a .else_active  div span {position: absolute; bottom: 0; left: 0; padding:15px; letter-spacing: 3px;}
.works .thumbs a:visited div {display: block !important;}
.works .thumbs.visited {position: relative;}
.works .thumbs.is-visited .if_active {position: relative; float:left; height: 100%; display: block;}
.works .thumbs.is-visited .if_active div {position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #FFF; background: #919191; font-size:13px;}
.works .thumbs.is-visited .if_active  div span {position: absolute; bottom: 0; left: 0; padding:15px; letter-spacing: 3px;}
.works .thumbs.is-visited .else_active {display: none;}
.worksDetail {display: block;}
.worksDetail #worksSlider {float:left; width: 100%; height: 100%; }
.worksDetail #worksSlider li {float:left; width: 100%; overflow: hidden; padding:0; background-attachment: fixed !important;}
.worksDetail #worksSlider li img {max-width: 100%; display: inline-block;}
.about {float:left; margin-left: 150px; padding-top:60px;}
.about .profilePhoto {float:left; width: 240px;}
.about .profilePhoto img {width: 100%}
.about .textContainer {float:left; width: 440px;  font-family:'Flama-Basic'; margin-left: 25px; line-height: 20px; /*color:#8a898e;*/ }
.about .textContainer ul li{display: block;color: #8a898e; background:url(../images/aboutLi.png) no-repeat left 6px; padding-left: 20px; margin-bottom:20px;font-family:'Flama-Basic';}
.about .textContainer ul li a {color: #8a898e;}
.about .textContainer ul li a:hover {color: #000;}
.contact {display: block;  font-family:'Flama-Medium'; padding-top:60px;}
.contact .logo {position: absolute; width: 100%; text-align: center; z-index: -1 ;}
.contact .logo img {max-width: 250px;}
.contact .adress {float: right; margin-right: 90px; font-size: 11px; color: #8a8a8d; width: 90px; margin-bottom:30px;}
.contact .adress a {color: #8a8a8d; text-decoration: underline;}
.contact #map {float:left; width: 100%; margin-top: 20px; position: absolute; bottom: 0;}
.mapHide { position: relative; z-index: 99999; margin-top: -250px; height: 250px; float: left; width: 100%; display: none;}
.sliderClose.orient {top:10px; right: 10px; cursor: pointer;}
.fullScreen {top:22px; right: 22px; width: 21px; height: 21px; cursor: pointer; position: absolute; z-index: 100; /*opacity: 0.2; filter: alpha(opacity=20);*/ background: url(../images/fullScreen.png) no-repeat; background-size: 100%;}
.fullScreen.exit {background: url(../images/ExitFS.png) no-repeat; display: none; background-size: 100%;}
.fullScreen:hover {/*opacity: 0.7; filter: alpha(opacity=70);*/}
.projectCommentToggle {bottom:19px; left: 22px; height: 21px; cursor: pointer; position: absolute; z-index: 90; line-height: 21px;}
.projectCommentToggle img {height: 21px;}
.projectCommentToggle div {font-size:13px;color: #808284;float:right;letter-spacing: 3px; margin-left: 20px;}
.projectComment {float:left; width: 100%; background: rgba(229, 229, 230, 0.8); position: absolute; bottom: 57px; left: 0; z-index: 90; display: none; }
.projectComment .container {display: block; padding: 30px 39px; font-family:'Flama-Medium'; color: #7b7b80; font-size: 14px;}
.projectComment .container ul li {display: block; padding-left:20px; background: url(../images/projectComment.png) no-repeat left 5px; color: #000;}
.sliderThmb {position:absolute; bottom:2px; left:0; z-index:90; width: 100%; height: 32px; background:#FFF; text-align: center; margin-left:0px !important;}
.sliderThmb a {width: 10px; height: 10px; background: url(../images/sliderThumb.png) no-repeat; background-size: 100%; display:inline-block;margin:0px 1px; opacity: 0.5;filter: alpha(opacity=50);}
.sliderThmb a:hover, .sliderThmb a.active {background: url(../images/sliderThumbHover.png) no-repeat; background-size: 100%;}
.worksDetail #worksSlider li {text-align: center;}
:-webkit-full-screen { background: #FFF;}
:-moz-full-screen { background: #FFF;}
:-ms-fullscreen { background: #FFF;}
:full-screen { background: #FFF;}
:fullscreen { background: #FFF;}
#homeSlider li div span {opacity: 0; filter: alpha(opacity=0); color: #FFF;}
.is-visited .else_active div {display: block !important;}
.index_slider {width: 100%; text-align: center;}
.index_slider li {width: 100%; text-align: center;}
.index_slider img {max-width: 100%;}
@media screen and (min-width: 1100px) and (max-width:1450px) {
.works {padding: 40px 0px;}
.works .thumbs {height: 130px;overflow: hidden;  margin: 20px 0px 20px 0px;}
.works .thumbs a div {font-size: 11px;}
.works .thumbs a { height: 100%; min-width: 100%;}
.works .thumbs a img { height: 100%; min-width: 100%;}
.menu  ul li a {font-size: 12px;}
.about .textContainer {font-size: 13px;}

}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) {
	.fullScreen{display: none;}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {
	.fullScreen{display: none;}
}
@media screen and (min-width: 800px) and (max-width:1100px) {
.works {padding: 50px 0px;}
.works .thumbs {height: 120px;overflow: hidden;  margin: 10px 0px 10px 0px;}
.works .thumbs a { height: 100%; min-width: 100%;}
.works .thumbs a img { height: 100%;}
.works .thumbs a div {font-size: 11px;}
.about .textContainer {font-size: 12px;} 
.fullScreen{display: none;}
.worksDetail #worksSlider li {text-align: center;}
/*.menu {clear: both; width: 100%; margin-bottom:20px;}
.works .thumbs {width: 40%; height: 150px; margin:10px 2.5% !important; overflow: hidden;}
.works .thumbs a { height: 100%; min-width: 100%;}
.works .thumbs a img { height: 100%; min-width: 100%;}
.worksDetail #worksSlider li img {height: 100% !important;}*/
.contact #map {margin:0px 3%; width: 94%;}
.fullScreen {display: none;}
.worksDetail #worksSlider li {text-align: center;}
}
@media screen and (max-width: 1024px) {
.menu {clear: both; width: 100%; margin-bottom:20px; padding: 60px 0 0 3%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box;}
.works .thumbs {width: 94%; margin:5px 3% !important; height: auto;}
.works .thumbs a { height: 100%; min-width: 100%;}
.works .thumbs a img {width: 100% !important; min-height:100%; height: auto !important;}
.about {margin:0px 3%;width: 94%; padding:0px;}
.about .profilePhoto  {width: 25%;}
.about .textContainer {width: 73%; margin-left:2%;}
.worksDetail #worksSlider li {text-align: center;}
.worksDetail #worksSlider li img {max-width:100% !important;max-height:100% !important; height: auto !important;}
.sliderClose {top:22px; right: 22px !important; width: 21px; height: 21px; background: url(../images/sliderBackClose.png) no-repeat; cursor: pointer;}
.contact .adress {  margin-top: -120px;}
.contact #map { margin:0px 3%; width: 94%;}
.about .textContainer {font-size: 13px;}
.fullScreen {display: none;}
.worksDetail #worksSlider li {text-align: center;/* background:none !important;*/ background-attachment: inherit !important;}
.worksDetail #worksSlider li img {/*opacity: 1 !important;*/}
.projectComment {display: none !important;}
.works .thumbs a img  {min-height: initial;}
.hidden {overflow-x:auto !important; overflow-y:auto !important; }
.homeSlider .bx-wrapper {max-width: initial !important;}
.worksDetail #worksSlider li {width: 100%; height: 100%; /*background-size:100% auto  !important; background-position: 0px center !important;*/}
.worksDetail .bx-viewport {height:100% !important;}
.homeSlider #homeSlider li img {width: 100% !important; float:none; display: block;}
.index_slider .bx-wrapper {float:left; width: 100%; overflow: hidden;}
.homeSlider .bx-wrapper {height: 300px;}
.homeSlider {width: 100%;}
.worksDetail .bx-controls-direction {display: block !important;}
.worksDetail .bx-controls-direction a {opacity: 1 !important;  filter: alpha(opacity=100) !important;}
.home_sliderThmb {display: none;}
.projectCommentToggle img, .works_sliderThmb a {display: none;}
.works .thumbs.is-visited .if_active, .works .thumbs .else_active {width:100%}
.index_slider {position: fixed;height: 100%;top: 0;left: 0;}
.index_slider ul {width:100%; height: 100%; display: table;}
.index_slider ul li {height: 100%; vertical-align: middle; display: table-cell;}
/*.worksDetail #worksSlider li {text-align: center; background:none !important;}
.worksDetail #worksSlider li img {opacity: 1 !important;}*/
}
@media screen and (max-width: 800px) {
.menu {clear: both; width: 100%; margin-bottom:20px; padding: 60px 0 0 3%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box;}
.works .thumbs {width: 94%; margin:5px 3% !important; height: auto;}
.works .thumbs a { height: 100%; min-width: 100%;}
.works .thumbs a img {width: 100% !important; min-height:100%; height: auto !important;}
.about {margin:0px 3%;width: 94%; padding:0px;}
.about .profilePhoto  {width: 25%;}
.about .textContainer {width: 73%; margin-left:2%;}
.worksDetail #worksSlider li {text-align: center;}
.worksDetail #worksSlider li img {max-width:100% !important;max-height:100% !important; height: auto !important;}
.sliderClose {top:22px; right: 22px !important; width: 21px; height: 21px; background: url(../images/sliderBackClose.png) no-repeat; cursor: pointer;}
.contact .adress {  margin-top: -120px;}
.contact #map { margin:0px 3%; width: 94%;}
.about .textContainer {font-size: 13px;}
.fullScreen {display: none;}
.worksDetail .bx-viewport {height:100% !important;}
.worksDetail #worksSlider li img {/*opacity: 1 !important;*/}
.projectComment {display: none !important;}
.works .thumbs a img  {min-height: initial;}
.hidden {overflow-x:auto !important; overflow-y:auto !important; }
.homeSlider .bx-wrapper {max-width: initial !important;}
/*.homeSlider #homeSlider li {max-height:400px !important;}*/
.homeSlider #homeSlider li img {width: 100% !important; float:none; display: block;}
.index_slider .bx-wrapper {float:left; width: 100%; overflow: hidden;}
.homeSlider .bx-wrapper {height: 300px;}
.homeSlider {width: 100%;}
.worksDetail .bx-controls-direction {display: block !important;}
.worksDetail .bx-controls-direction a {opacity: 1 !important;  filter: alpha(opacity=100) !important;}
.home_sliderThmb {display: none;}
.projectCommentToggle img, .works_sliderThmb a {display: none;}
.works .thumbs.is-visited .if_active, .works .thumbs .else_active {width:100%}
.index_slider {position: fixed;height: 100%;top: 0;left: 0;}
.index_slider ul {width:100%; height: 100%; display: table;}
.index_slider ul li {height: 100%; vertical-align: middle; display: table-cell;}
}
@media screen and (min-width: 670px) and (max-width: 800px) {
.worksDetail #worksSlider li {text-align: center;/* background:none !important;*/ background-size: 100% auto !important; background-attachment: inherit !important;}
}
@media screen and (max-width: 480px) {
.worksDetail #worksSlider li {text-align: center;/* background:none !important;*/ background-size: 100% auto !important; background-attachment: inherit !important;}
}
@media screen and (min-width: 480px) and (max-width: 670px) {
.worksDetail #worksSlider li.orient { background-size: 100% 100% !important;}
}
@media screen and (max-width: 600px) {
.about .profilePhoto  {width: 94%; margin:5px 3%;}
.about .textContainer {width: 94%; margin:5px 3%;}
.contact .logo {display: none;}
}
/*@media screen and (max-width: 800px) {
.menu {clear: both; width: 100%; margin-bottom:20px;}
.works .thumbs {width: 40%; height: auto; margin:10px 2.5% !important; overflow: hidden;}
.works .thumbs img {max-height: 100%;}
}
@media screen and (max-width: 600px) {
.menu {clear: both; width: 100%; margin-bottom:20px;}
.works .thumbs {width: 95%; height: auto; margin:10px 2.5% !important; overflow: hidden;}
.works .thumbs img {width: 100%; max-height:inherit;}
}*/