article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary
{ display :block }

audio, canvas, video
{ display :inline-block; *display :inline; *zoom :1 }

audio:not([controls])
{ display :none; height :0 }

[hidden]
{ display :none }

html
{ font-size :100%; -ms-text-size-adjust :100%; -webkit-text-size-adjust :100% }

html, button, input, select, textarea
{ font-family :sans-serif }

body
{ margin :0 }

a:focus
{ outline :thin dotted }

a:active, a:hover
{ outline :0 }

h1
{ font-size :2em; margin :.67em 0 }

h2
{ font-size :1.5em; margin :.83em 0 }

h3
{ font-size :1.17em; margin :1em 0 }

h4
{ font-size :1em; margin :1.33em 0 }

h5
{ font-size :.83em; margin :1.67em 0 }

h6
{ font-size :.67em; margin :2.33em 0 }

abbr[title]
{ border-bottom :1px dotted }

b, strong
{ font-weight :bold }

blockquote
{ margin :1em 40px }

dfn
{ font-style :italic }

hr
{ -moz-box-sizing :content-box; box-sizing :content-box; height :0 }

mark
{ background :#ffff00; color :#000000 }

p, pre
{ margin :1em 0 }

code, kbd, pre, samp
{ font-family :monospace, serif; _font-family :'courier new', monospace; font-size :1em }

pre
{ white-space :pre; white-space :pre-wrap; word-wrap :break-word }

q
{ quotes :none }

q:before, q:after
{ content :''; content :none }

small
{ font-size :80% }

sub, sup
{ font-size :75%; line-height :0; position :relative; vertical-align :baseline }

sup
{ top :-0.5em }

sub
{ bottom :-0.25em }

dl, menu, ol, ul
{ margin :1em 0 }

dd
{ margin :0 0 0 40px }

menu, ol, ul
{ padding :0 0 0 40px }

nav ul, nav ol
{ list-style :none; list-style-image :none }

img
{ border :0; -ms-interpolation-mode :bicubic }

svg:not(:root)
{ overflow :hidden }

figure
{ margin :0 }

form
{ margin :0 }

fieldset
{ border :1px solid silver; margin :0 2px; padding :.35em .625em .75em }

legend
{ border :0; padding :0; white-space :normal; *margin-left :-7px }

button, input, select, textarea
{ font-size :100%; margin :0; vertical-align :baseline; *vertical-align :middle }

button, input
{ line-height :normal }

button, select
{ text-transform :none }

button, html input[type="button"], input[type="reset"], input[type="submit"]
{ -webkit-appearance :button; cursor :pointer; *overflow :visible }

button[disabled], html input[disabled]
{ cursor :default }

input[type="checkbox"], input[type="radio"]
{ box-sizing :border-box; padding :0; *height :13px; *width :13px }

input[type="search"]
{ -webkit-appearance :textfield; -moz-box-sizing :content-box; -webkit-box-sizing :content-box; box-sizing :content-box }

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration
{ -webkit-appearance :none }

button::-moz-focus-inner, input::-moz-focus-inner
{ border :0; padding :0 }

textarea
{ overflow :auto; vertical-align :top }

table
{ border-collapse :collapse; border-spacing :0 }

@charset "UTF-8";
/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
html, button, input, select, textarea
{ color :#222222 }

html
{ font-size :1em; line-height :1.4 }

::-moz-selection
{ background :#b3d4fc; text-shadow :none }

::selection
{ background :#b3d4fc; text-shadow :none }

hr
{ display :block; height :1px; border :0; border-top :1px solid #cccccc; margin :1em 0; padding :0 }

audio, canvas, img, video
{ vertical-align :middle }

fieldset
{ border :0; margin :0; padding :0 }

textarea
{ resize :vertical }

.browsehappy
{ margin :.2em 0; background :#cccccc; color :#000000; padding :.2em 0 }

@font-face
{
    font-family :"mervekayacan";
    src         :url('/fonts/mervekayacan.eot') format('eot'), url('/fonts/mervekayacan.woff') format('woff'), url('/fonts/mervekayacan.ttf') format('truetype')
    }

[data-icon]:before
{ font-family :"mervekayacan" !important; content :attr(data-icon); font-style :normal !important; font-weight :normal !important; font-variant :normal !important; text-transform :none !important; speak :none; line-height :1 }

[class^="icon-"]:before, [class*=" icon-"]:before
{ font-family :"mervekayacan" !important; font-style :normal !important; font-weight :normal !important; font-variant :normal !important; text-transform :none !important; speak :none; line-height :1 }

.icon-logo:before
{ content :"" }

.icon-left-open-big:before
{ content :"a" }

.icon-share:before
{ content :"j" }

.icon-gplus:before
{ content :"k" }

.icon-twitter:before
{ content :"l" }

.icon-facebook:before
{ content :"m" }

.icon-linkedin:before
{ content :"o" }

.icon-instagrem:before
{ content :"n" }

.icon-play:before
{ content :"p" }

.icon-thumbnails:before
{ content :"q" }

.icon-close:before
{ content :"r" }

.icon-arrowup:before
{ content :"s" }

.icon-arrowright:before
{ content :"t" }

.icon-arrowleft:before
{ content :"u" }

.icon-arrowdown:before
{ content :"v" }

@font-face
{
    font-family :'latin_modern_roman10_regular';
    src         :url('/fonts/lmroman10-regular-webfont.eot') format('eot'), url('/fonts/lmroman10-regular-webfont.woff') format('woff'), url('/fonts/lmroman10-regular-webfont.ttf') format('truetype')
    }

.latinModern
{ font-family :'latin_modern_roman10_regular', 'Times New Roman', serif; font-style :normal; font-weight :500; }

.brandon-Bold
{ font-family :"brandon-grotesque", Arial, Helvetica, sans-serif; font-style :normal; font-weight :700 }

.brandon-Medium
{ font-family :"brandon-grotesque", Arial, Helvetica, sans-serif; font-style :normal; font-weight :500 }

.brandon-Regular
{ font-family :"brandon-grotesque", Arial, Helvetica, sans-serif; font-style :normal; font-weight :400 }

.letterSpacingVERYBIG
{ letter-spacing :.480em }

.letterSpacingBIG
{ letter-spacing :.240em }

.letterSpacingMID
{ letter-spacing :.120em }

.letterSpacingSMALL
{ letter-spacing :.06em }

*, *:before, *:after
{ box-sizing :border-box }

html
{ font-size :62.5%; overflow-x :hidden }

body
{ font-family :"brandon-grotesque", Arial, Helvetica, sans-serif; font-style :normal; font-weight :400; font-size :14px; font-size :1.4rem }

sup
{ font-size :6px; font-size :.6rem; vertical-align :super }

.js #wrap
{ opacity :0; overflow :hidden }

a, a:active, a:focus
{ text-decoration :none; outline :0; border :0; outline :0 }

.sectionPadding1
{ padding :80px 80px 0 80px }

.sectionMargin1
{ margin :80px 80px 0 80px }

.bottomMargin
{ margin-bottom :80px }

.topMargin
{ margin-top :80px }

.topMargin2
{ margin-top :30px }

.bottomPadding
{ padding-bottom :80px }

.vertical-line
{ display :block; width :1px; margin :20px auto; height :30px; opacity :.3 }

.horizontal-line
{ display :block; width :50px; height :1px; opacity :.3 }

.lineBreak
{ height :1px; width :100%; display :block; opacity :.15 }

h1
{ font-size :80px; font-size :8.0rem; font-family :'latin_modern_roman10_regular', 'Times New Roman', serif; margin :0; font-weight :500; line-height :86px; line-height :8.6rem }

h2
{ font-size :25px; font-size :2.5rem; font-family :"brandon-grotesque", Arial, Helvetica, sans-serif; font-style :normal; font-weight :700; margin :0 }

h3
{ font-size :16px; font-size :1.6rem; font-family :"brandon-grotesque", Arial, Helvetica, sans-serif; font-style :normal; font-weight :500; margin :0 }

h4
{ font-size :14px; font-size :1.4rem; font-family :"brandon-grotesque", Arial, Helvetica, sans-serif; font-style :normal; font-weight :500; margin :0 }

p
{ font-size :16px; font-size :1.6rem }

.cl4
{ width :25% }

.cl3
{ width :33.333333% }

.cl2
{ width :50% }

.cl2-3
{ width :66.666667% }

.cl2-4
{ width :75% }

.cta
{ padding :2px 2px 2px 2px; position :relative; display :inline-block; margin-top :30px }

.cta span
{ font-family :"brandon-grotesque", Arial, Helvetica, sans-serif; font-style :normal; font-weight :700; line-height :50px; font-size :10px; font-size :1.0rem; padding :0 20px; height :50px; display :inline-block }

.cta .target
{ position :absolute; height :54px; width :100%; z-index :1; display :block; margin-top :-2px; margin-left :-2px }

.round-cta
{ display :block; height :70px; width :70px; border-radius :50%; text-align :center }

.round-cta span
{ position :absolute; font-size :20px; font-size :2.0rem; z-index :1; display :block; height :70px; width :70px; line-height :73px; text-align :center }

.round-cta .target
{ position :absolute; z-index :3; display :block; height :70px; width :70px; border-radius :50%;/* border :2px solid rgba(255, 255, 255, 0.5); */text-align :center }

.white-bg
{ background :url("/img/gray-texture.png") #f8f8f8 }

.white-bg, .white-bg a
{ color :#805575 }

.white-bg .cta .target
{ border :1px solid rgba(49, 49, 49, 0.2) }

.white-bg .cta span
{ border :1px solid rgba(49, 49, 49, 0.2); color :#805575 }

.white-bg .cta.hover:hover span:first-child
{ border :3px solid rgba(49, 49, 49, 1) }

.white-bg .vertical-line, .white-bg .horizontal-line, .white-bg .lineBreak
{ background :#805575 }

.white-bg .mainNav .line
{ background :#805575 }

.white-bg .prog-circle .fill, .white-bg .prog-circle .bar
{ border :.08em solid #805575 }

.white-bg .prog-circle
{ background-color :rgba(49, 49, 49, 0.2) }

.white-bg .prog-circle .after
{ background :url(/img/gray-texture.png) #f8f8f8 }

.white-bg .round-cta.hover:hover .target
{ border :5px solid rgba(49, 49, 40, 1) }

.darkNav a
{ color :#805575 }

.darkNav .logo span
{
    background-image: url(/img/LogoSiyah.png); }

.darkNav .logo .target
{ border-color :#805575 }

.black-bg, .black-bg a
{ color :#ffffff }

.black-bg .cta .target
{ border :1px solid rgba(255, 255, 255, 0.4) }

.black-bg .cta span
{ border :1px solid rgba(255, 255, 255, 0.4); color :#ffffff }

.black-bg .cta.hover:hover span:first-child
{ border :3px solid rgba(255, 255, 255, 1) }

.black-bg .vertical-line, .white-bg .horizontal-line, .white-bg .lineBreak
{ background :#805575 }

.black-bg > .lightNav a > .line
{ background :#ffffff }

.black-bg .prog-circle .fill, .black-bg .prog-circle .bar
{ border :.08em solid #ffffff }

.black-bg .prog-circle
{ background-color :rgba(255, 255, 255, 0.2) }

.black-bg .prog-circle .after
{ background :#805575 }

.black-bg .round-cta.hover:hover .target
{ border :5px solid rgba(255, 255, 255, 1) }

.white-bg > .lightNav a > .line
{ background :#ffffff }

.lightNav a
{ color :#ffffff }

.lightNav .logo .target
{ /*border-color :#ffffff*/ }

.lightNav .round-cta.hover:hover .target
{ border :5px solid rgba(255, 255, 255, 1) }

.ajax-content .round-cta.hover:hover .target
{ border :5px solid rgba(255, 255, 255, 1) }

.page-loader
{  position :fixed; z-index :9999; top :50%; left :50%; margin-left :-280px; margin-top :-25px; width :560px; height :50px;background-image:url(/img/LoadingSpiral3.gif);background-repeat:no-repeat;background-position:center center; background-size:contain;opacity:.5;}

.page-loader, .circle, .prog-circle *
{ box-sizing :content-box }
.prog-circle .slice
{ position :absolute; width :1em; height :1em; clip :rect(0, 1em, 1em, .5em) }

.prog-circle .slice.clipauto
{ clip :rect(auto, auto, auto, auto) }

.prog-circle .fill, .prog-circle .bar
{ position :absolute; width :.84em; height :.84em; clip :rect(0, .5em, 1em, 0); border-radius :50%; -webkit-transform :rotate(20deg); -ms-transform :rotate(20deg); transform :rotate(20deg) }

.prog-circle
{ position :relative; font-size :120px; font-size :12.0rem; width :1em; height :1em; border-radius :50%; float :left; margin :0 .1em .1em 0 }

.prog-circle .after
{ position :absolute; top :.08em; left :.08em; display :block; content :" "; border-radius :50%; background :url(/img/gray-texture.png) #f8f8f8; width :.84em; height :.84em }

#vs-logo
{ fill :currentColor; position :absolute; z-index :9; top :50%; left :50%; margin-left :-30px; margin-top :-35px; width :70px; height :70px }

.mainNav
{ position :absolute; z-index :9; width :100%; top :0; padding-top :20px; height :84px; font-size :10px; font-size :1.0rem; font-family :"brandon-grotesque", Arial, Helvetica, sans-serif; font-style :normal; font-weight :700 }

.js .mainNav
{ top :-100px }

.mainNav .logo
{ margin :auto; width :210px; height :64px }

.mainNav .logo span
{ margin :auto; width :200px; height :64px; font-size :25px; font-size :2.5rem; padding-left :2px;

    background-image:url(/img/Logo.png);background-size:contain;background-repeat:no-repeat;background-position:center center;
    }

.darkNav .logo span
{
    background-image: url(/img/LogoSiyah.png); }

.mainNav ul
{ display :-webkit-box; display :-webkit-flex; display :-ms-flexbox; display :flex; -webkit-box-orient :horizontal; -webkit-box-direction :normal; -webkit-flex-direction :row; -ms-flex-direction :row; flex-direction :row; -webkit-box-align :center; -webkit-align-items :center; -ms-flex-align :center; align-items :center; -webkit-box-pack :center; -webkit-justify-content :center; -ms-flex-pack :center; justify-content :center; margin-top :-55px }

.mainNav ul li
{ text-transform :uppercase; letter-spacing :.480em; margin-right :30px }

.mainNav ul li:last-child
{ margin-right :8px }

.mainNav ul li a
{ display :inline-block; line-height :50px; height :50px; position :relative }

.mainNav ul li:nth-child(2)
{ margin-right :110px }

.mainNav ul li:nth-child(3)
{ padding-left :0; margin-left :140px }

.mainNav ul li a .line
{ height :1px; display :block; width :0; margin-top :-12px; margin-left :50% }

.mainNav ul li .hover:hover .line, .mainNav ul li .selected .line
{ width :97%; margin-left :-1px }

.sticky
{ position :fixed; height :50px; top :-50px; overflow :hidden; padding-top :0 }

.sticky .logo
{ margin-top :-9px }

.sticky .logo .target
{ border :0; display :none }

.sticky ul li:nth-child(2)
{ margin-right :110px }

.sticky ul li:nth-child(3)
{ padding-left :0; margin-left :140px }

.sticky ul li a .line
{ margin-top :-15px }

.white-bg .sticky
{ background :url("/img/gray-texture.png") #f8f8f8; border-bottom :1px solid rgba(0, 0, 0, 0.1) }

.galeri-page .sticky
{ background :#805575 }

.white-bg > .sticky a > .line
{ background :#805575 }

.white-bg > .sticky a
{ color :#805575 }

.white-bg > .sticky .logo .target
{ border-color :#805575 }

.page-nav
{ z-index :99999999; right :0 }

.page-nav a
{ display :block; width :50px; height :50px; text-align :center; color :#ffffff; line-height :50px; border-left :1px solid rgba(255, 255, 255, 0.2); border-bottom :1px solid rgba(255, 255, 255, 0.2) }

.scroll-top
{ display :block; width :30px; height :30px; overflow :hidden; background :url("/img/gray-texture.png") #f8f8f8; line-height :32px; text-align :center; font-size :12px; font-size :1.2rem; position :fixed; bottom :25px; right :25px; border-radius :50%; opacity :0 }

.contacts
{ text-align :center; margin-top :100px }

.js .contacts
{ position :relative; top :50%; margin-top :20px; -webkit-transform :translateY(-50%); -ms-transform :translateY(-50%); transform :translateY(-50%) }

.contacts a
{ display :block; font-size :30px; font-size :3.0rem; letter-spacing :.06em }

.contacts .social
{ margin :30px auto; width :250px }

.contacts .social li
{ margin-left :10px }

.contacts .social .round-cta
{ width :50px; height :50px }

.contacts .social .round-cta span
{ font-size :20px; font-size :2.0rem; line-height :50px; width :50px; height :50px; padding :4px 0 0 1px }

.contacts .social .round-cta .target
{ height :50px; width :50px;/* border :2px solid rgba(49, 49, 49, 0.1) */}

.contacts .social .round-cta.hover:hover .target
{ border :3px solid rgba(49, 49, 49, 1) }

.hero
{ height :600px; background :#805575; color :#ffffff; text-align :center; overflow :hidden }

.hero .wrap
{ position :absolute; z-index :2; width :100% }

.no-js .hero img
{ min-width :900px }

.hero .close, .hero .close span
{ height :50px; width :50px; font-size :16px; font-size :1.6rem; line-height :56px; color :#ffffff }

.hero .close
{ position :absolute; left :50%; margin-left :-25px; margin-top :20px }

.intro-a
{ text-align :center }

.intro-a p
{ width :90%; max-width :800px; margin :auto }

.intro-a .horizontal-line
{ margin :20px auto }

.intro-b
{ text-align :left }

.intro-b p
{ width :90%; max-width :800px }

.intro-b .horizontal-line
{ margin :20px 0 }

.video-module > .round-cta
{ position :absolute; z-index :1; color :#ffffff; left :50%; margin-left :-35px }

.video-module .round-cta .icon-play
{ padding-top :3px; padding-left :2px; font-size :22px; font-size :2.2rem }

.video-module
{ overflow :hidden; position :relative; padding-bottom :50%; height :0 }

.video-module iframe
{ opacity :0; position :absolute; top :0; left :0; width :100%; height :100%; z-index :2 }

.video-module img
{ position :absolute; top :0; left :0; width :100%; height :100%; z-index :0 }

.browser span
{ display :block }

.browser .top
{ height :50px; background :#dbdbdb; overflow :hidden; border-top-right-radius :5px; border-top-left-radius :5px }

.browser .search
{ height :18px; margin-top :17px; margin-right :15px; width :calc(100% - 90px); background :#ffffff; border-radius :40px }

.browser .dots
{ width :50px; height :50px; margin-left :15px }

.browser .dots .dot
{ height :10px; width :10px; margin-top :20px; margin-left :8px; background :#aeaeae; border-radius :10px }

.browser .dots .dot:first-child
{ margin-left :0 }

.iphone img
{ width :85.5%; top :14.6%; left :8% }

.iphone .iphoneSvg
{ display :block; width :100%; top :0; left :0; z-index :-1000 }

.responsive .cl1
{ width :calc(75% - 30px) }

.responsive .cl2
{ width :23.5% }

.awards-a h2
{ padding-bottom :50px }

.awards-a
{ text-align :center }

.awards-a ul
{ display :-webkit-box; display :-webkit-flex; display :-ms-flexbox; display :flex; -webkit-flex-flow :wrap; -ms-flex-flow :wrap; flex-flow :wrap; width :100% }

.awards-a li
{ text-align :center }

.awards-a li p
{ margin :0 auto; font-size :14px; font-size :1.4rem; max-width :200px }

.awards-b
{ text-align :center }

.awards-b h2
{ font-size :60px; font-size :6.0rem }

.awards-b .date
{ font-size :12px; font-size :1.2rem; font-family :"brandon-grotesque", Arial, Helvetica, sans-serif; font-style :normal; font-weight :700 }

.awards-b h3
{ font-size :30px; font-size :3.0rem }

.awards-b ul li
{ font-family :"brandon-grotesque", Arial, Helvetica, sans-serif; font-style :normal; font-weight :500; font-size :12px; font-size :1.2rem; margin :10px }

.h1-intro h1
{ text-align :center; font-size :60px; font-size :6.0rem; line-height :70px; line-height :7rem }

.skills
{ text-align :center; border-top :1px solid rgba(49, 49, 49, 0.1) }

.skills h2
{ font-size :18px; font-size :1.8rem; padding-top :20px; padding-bottom :20px }

.skills .table
{ border-top :1px solid rgba(49, 49, 49, 0.1); width :100%; display :-webkit-box; display :-webkit-flex; display :-ms-flexbox; display :flex; -webkit-flex-flow :wrap; -ms-flex-flow :wrap; flex-flow :wrap }

.skills .intro-b
{ text-align :center; padding :40px; border-bottom :1px solid rgba(49, 49, 49, 0.1); border-right :1px solid rgba(49, 49, 49, 0.1) }

.skills img
{ max-width :280px; width :100% }

.skills p, .skills .horizontal-line
{ text-align :center; margin :20px auto }

.contact-banner
{ text-align :center; background :#805575 no-repeat center center fixed }

.contact-banner h2
{ font-size :40px; font-size :4.0rem }

.contact-banner .cta
{ margin-top :0 }

.haberler-carousel
{ text-align :center; -webkit-user-select :none; -khtml-user-select :none; -moz-user-select :none; -ms-user-select :none; user-select :none }

.haberler-carousel .description
{ width :100%; z-index :9 }

.haberler-carousel .project
{ position :relative; overflow :hidden; background-position :center center; background-repeat :no-repeat; background-size :contain; background :#805575 }

.haberler-carousel .project img
{ min-width :800px ;object-fit: cover;}

.haberler-carousel h2
{ font-size :90px; font-size :9.0rem; line-height :90px }

.haberler-carousel p
{ max-width :700px; width :80%; margin :20px auto 0 auto }

.js .haberler-carousel .img
{ background-position :center center; background-repeat :no-repeat; background-size :cover }

.haberler-carousel .video_background
{ position :absolute; bottom :0; right :0; min-width :100%; min-height :100%; width :auto; height :auto; z-index :-1000; overflow :hidden }

.js .haberler-carousel .project > img
{ display :none }

.js .haberler-carousel .description
{ display :none }

.js .wc-nav
{ position :absolute; top :0; width :100%; z-index :5; left :0; opacity :0 }

.js .wc-nav .titles
{ position :absolute; overflow :hidden; height :120px; width :100%; font-size :80px; font-size :8rem; text-align :center; color :#ffffff; z-index :5 }

.js .wc-nav .titles ul li a
{ display :inline-block; margin :auto; line-height :100px; height :100px; padding-bottom :160px; padding-left :20px; padding-right :20px; overflow :hidden; outline :0; border :0 }

.js .wc-nav .littleTitles-After
{ font-size :14px; font-size :1.4rem; bottom :0; position :absolute; z-index :5; width :100%; text-align :center }

.js .wc-nav .littleTitles-After ul
{ width :100% }

.js .wc-nav .littleTitles-After ul a
{ line-height :50px; opacity :.5 }

.js .wc-nav .littleTitles-After ul a:hover
{ opacity :1 }

.js .wc-nav .littleTitles-After ul .line
{ display :block; margin :auto; width :1px; height :30px; background :rgba(255, 255, 255, 0.30) }

.js .wc-nav .littleTitles-Before
{ font-size :14px; font-size :1.4rem; top :110px; position :absolute; z-index :499; width :100%; height :300px; text-align :center }

.js .wc-nav .littleTitles-Before ul
{ width :100%; position :relative; top :100% }

.js .wc-nav .littleTitles-Before ul li:first-child
{ display :block; height :80px }

.js .wc-nav .littleTitles-Before ul a
{ line-height :50px; opacity :.5 }

.js .wc-nav .littleTitles-Before ul a:hover
{ opacity :1 }

.js .wc-nav .littleTitles-Before ul .line
{ display :block; margin :auto; width :1px; height :30px; background :rgba(255, 255, 255, 0.30) }

.js .ajax-loader
{ width :50px; height :50px; display :block; position :absolute; margin-top :100px; margin-left :-25px; z-index :5 }

.js .ajax-loader .icon-close
{ position :absolute; overflow :hidden; opacity :0; font-size :14px; font-size :1.4rem; display :block; height :50px; line-height :52px; width :50px; z-index :9; border-radius :50px; border :2px rgba(255, 255, 255, 0.2) solid; box-sizing :border-box }

html
{ font-size :62.5%; overflow-x :hidden }

.js .ajax-loader .icon-close:hover
{ border :2px rgba(255, 255, 255, 1) solid }

.js .ajax-loader .loader
{ display :block; position :relative; border-top :2px solid rgba(255, 255, 255, 0.2); border-right :2px solid rgba(255, 255, 255, 0.2); border-bottom :2px solid rgba(255, 255, 255, 0.2); border-left :2px solid #ffffff; -webkit-animation :load8 1.1s infinite linear; animation :load8 1.1s infinite linear }

.js .ajax-loader .loader, .js .ajax-loader .loader:after
{ border-radius :50%; width :50px; height :50px }

@-webkit-keyframes load8
{

0
{
    -webkit-transform :rotate(0)
;
    transform         :rotate(0)
    }
100
%
{
    -webkit-transform :rotate(360deg)
;
    transform         :rotate(360deg)
    }
    }
@keyframes load8
{

0
{
    -webkit-transform :rotate(0)
;
    transform         :rotate(0)
    }
100
%
{
    -webkit-transform :rotate(360deg)
;
    transform         :rotate(360deg)
    }
    }
.photo-carousel
{ overflow :hidden; width :100%; height :500px; position :fixed; top :0; z-index :16; left :-100%; background :#000000 }

.photo-wrap
{ overflow :hidden; width :100%; height :500px; top :0; z-index :16; left :100% }

.photo-carousel figure
{ overflow :hidden; background :url("/img/loader.gif") #000000 no-repeat center; background-size :40px }

.carousel-nav
{ position :absolute; z-index :99999999; right :0; opacity :1; text-shadow :1px 0 0 rgba(0, 0, 0, 0.3) }

.carousel-nav ul
{ position :absolute; top :50%; margin-top :-90px }

.carousel-nav li a
{ display :block; width :50px; line-height :55px; height :50px; text-align :center }

.carousel-nav li:first-child .hover:hover
{ line-height :45px }

.carousel-nav li:last-child .hover:hover
{ line-height :65px }

.carousel-nav .pagination span
{ display :block; text-align :center; padding :8px 0; width :20px; margin :auto; opacity :1; font-size :12px; font-size :1.2rem }

.carousel-nav .pagination span:first-child
{ border-bottom :1px solid }

.carousel-nav .close
{margin-top:50px; display :block; height :50px; width :50px; color :#ffffff; text-align :center; line-height :56px }

.carousel-nav .close:hover
{ -webkit-transform :rotate(-90deg); -ms-transform :rotate(-90deg); transform :rotate(-90deg) }

.masonry
{ margin-left :65px; margin-right :65px }

.masonry .item
{ width :25%; height :auto; margin-bottom :30px; padding-right :15px; padding-left :15px }

.masonry .item a
{ outline :0; border :0 }

.masonry .item.item2
{ width :50% }

.masonry .item.item3
{ width :50% }

.masonry .intro-b
{ background :#ffffff; padding :30px }

.no-js .masonry
{ *zoom :1 }

.no-js .masonry .item
{ float :left }

.credits > div
{ display :-webkit-box; display :-webkit-flex; display :-ms-flexbox; display :flex; -webkit-flex-flow :wrap; -ms-flex-flow :wrap; flex-flow :wrap; width :100%; max-width :600px; margin :30px auto }

.credits .item
{ width :33.333333%; text-align :center; margin :20px 0 }

.credits h3
{ margin-bottom :15px }

.credits ul
{ color :#7a7a7a }

.next-prev
{ width :100%; text-align :center; background :#805575; color :#ffffff }

.next-prev a
{ color :#ffffff; display :block; padding :30px }

.next-prev ul li
{ width :50%; float :left }

.next-prev li:first-child
{ border-right :1px solid rgba(255, 255, 255, 0.2) }

.next-prev span
{ display :block }

.next-prev span:first-child
{ font-size :10px; font-size :1.0rem; opacity :.5 }

.next-prev .arrow
{ position :absolute; font-size :20px; font-size :2.0rem; left :30px; opacity :0; line-height :0 }

.next-prev li:last-child .arrow
{ right :30px; left :auto }

.next-prev a:hover .arrow
{ opacity :.5 }

.next-prev .title
{ font-size :24px; font-size :2.4rem; font-family :'latin_modern_roman10_regular', 'Times New Roman', serif; margin :0; font-weight :500; line-height :24px; line-height :2.4rem }

.sticky-text .intro-b
{ width :30%; position :absolute; top :0 }

.sticky-text .cl2-3
{ float :right }

.module-404
{ text-align :center; padding-top :150px }

.project-page .max-width
{ max-width :1440px; margin :auto }

.aboutme-page
{ padding-top :50px }

.haberler-page #wrap
{ overflow :auto }

.haberler-page .carousel-nav
{ display :none }

.galeri-page
{ background :#805575; padding-top :35px; overflow :hidden }

@media only screen and (max-width :1440px)
{
    .masonry .item
    { width :33.33333% }
    }

@media only screen and (max-width :1100px)
{
    h1
    { font-size :60px; font-size :6.0rem; line-height :6.0rem }

    .haberler-carousel h2
    { font-size :70px; font-size :7.0rem; line-height :70px }

    .h1-intro h1
    { font-size :45px; font-size :4.5rem; line-height :55px; line-height :5.5rem }

    .responsive .cl1
    { width :calc(75% - 15px) }

    .responsive .cl2
    { width :24.5% }

    .awards-b h2
    { font-size :40px; font-size :4.0rem }

    .awards-b h3
    { font-size :20px; font-size :2.0rem }

    .awards-b ul li
    { letter-spacing :.06em }

    .no-js .hero img
    { min-width :900px; position :relative; z-index :0; margin-left :50%; -webkit-transform :translateX(-50%); -ms-transform :translateX(-50%); transform :translateX(-50%) }
    }

@media only screen and (max-width :800px)
{
    .cl3
    { width :50% }

    .sectionPadding1
    { padding :60px 60px 0 60px }

    .sectionMargin1
    { margin :60px 60px 0 60px }

    .bottomMargin
    { margin-bottom :60px }

    .topMargin
    { margin-top :60px }

    .bottomPadding
    { padding-bottom :60px }

    .scroll-top
    { bottom :15px; right :15px }

    .haberler-carousel
    { text-align :center; margin-top :0 }

    .haberler-carousel h2
    { font-size :50px; font-size :5.0rem; line-height :50px }

    .page-nav
    { display :none }

    .hero
    { height :auto; margin-top :0 }

    .hero .wrap
    { padding-top :0 }

    .h1-intro h1
    { font-size :40px; font-size :4.0rem; line-height :50px; line-height :5rem }

    .h1-intro br
    { display :none }

    .sticky-text .cl3
    { width :100% }

    .sticky-text .cl2-3
    { width :100% }

    .sticky-text .intro-b
    { padding-bottom :20px; position :static }

    .sticky-text .intro-b
    { padding-right :0 }

    .awards-a h2
    { padding-bottom :50px }

    .awards-a
    { text-align :center }

    .awards-a .item
    { text-align :left; width :100%; display :-webkit-flex; display :-webkit-box; display :-ms-flexbox; display :flex; -webkit-flex-direction :row; -webkit-box-orient :horizontal; -webkit-box-direction :normal; -ms-flex-direction :row; flex-direction :row; -webkit-align-items :flex-start; -webkit-box-align :start; -ms-flex-align :start; align-items :flex-start }

    .awards-a img
    { width :50px; height :auto }

    .awards-a .item p
    { margin :0; max-width :none; width :calc(100% - 50px); padding :10px 5px }

    .masonry
    { margin-left :45px; margin-right :45px }

    .masonry .item
    { width :50% }

    .photo-nav
    { display :none }

    .js .wc-nav .titles
    { height :80px; width :100%; font-size :50px; font-size :5.0rem }

    .js .wc-nav .titles ul li a
    { line-height :75px; height :75px; padding-bottom :120px }

    .js .wc-nav .littleTitles-After
    { font-size :12px; font-size :1.2rem; bottom :10px }

    .js .wc-nav .littleTitles-After ul a
    { line-height :40px }

    .js .wc-nav .littleTitles-After ul a:hover
    { opacity :1 }

    .js .wc-nav .littleTitles-After ul .line
    { height :20px }

    .js .wc-nav .littleTitles-Before
    { font-size :12px; top :120px }

    .js .wc-nav .littleTitles-Before ul a
    { line-height :40px }

    .js .wc-nav .littleTitles-Before ul .line
    { height :20px }
    }

@media only screen and (max-width :670px)
{
    .sectionPadding1
    { padding :40px 40px 0 40px }

    .sectionMargin1
    { margin :40px 40px 0 40px }

    .bottomMargin
    { margin-bottom :40px }

    .topMargin
    { margin-top :40px }

    .bottomPadding
    { padding-bottom :40px }

    h1
    { font-size :40px; font-size :4.0rem; line-height :4.0rem }

    h2
    { font-size :20px; font-size :2.0rem }

    .scroll-top
    { display :none }

    .mainNav ul li
    { letter-spacing :.120em; margin-right :20px }

    .mainNav
    { position :fixed; height :50px; top :0; overflow :hidden; padding-top :0 }

    .mainNav .logo
    { margin-top :-9px; width :200px }

    .mainNav .logo .icon-logo
    { width :30px; }

    .mainNav .logo .target
    { border :0; display :none }

    .mainNav ul li:nth-child(2)
    { margin-right :40px }

    .mainNav ul li:nth-child(3)
    { padding-left :0; margin-left :40px }

    .mainNav ul li a .line
    { margin :-15px auto 0 auto }

    .mainNav
    { background :url("/img/gray-texture.png") #f8f8f8; border-bottom :1px solid rgba(0, 0, 0, 0.1); z-index :12 }

    .galeri-page .mainNav
    { background :#805575; border-bottom :0 }

    .white-bg > .lightNav a > .line
    { background :#805575 }

    .white-bg > .lightNav a
    { color :#805575 }

    .white-bg > .lightNav .logo .target
    { /*border-color :#805575 */}

    .haberler-page > .lightNav a > .line
    { background :#805575 }

    .haberler-page a
    { color :#805575 }

    .haberler-page .logo .target
    { border-color :#805575 }

    .hero
    { height :auto; margin-top :50px }

    .hero .wrap
    { padding-top :0 }

    .no-js .hero img
    { min-width :600px }

    .hero .close
    { display :none; visibility :hidden }

    .haberler-carousel
    { margin-top :50px }

    .haberler-carousel h2
    { font-size :40px; font-size :4.0rem; line-height :40px }

    .haberler-carousel p
    { display :none }

    .haberler-carousel .project img
    { min-width :320px; display :block }

    .js .haberler-carousel .description
    { display :block }

    .js .wc-nav
    { display :none; left :-100% }

    .js .haberler-carousel .cta
    { display :none; visibility :hidden }

    .h1-intro h1
    { font-size :30px; font-size :3.0rem; line-height :40px; line-height :4rem }

    .browser .top
    { height :20px }

    .browser .search
    { height :8px; margin-top :6px; margin-right :6px; width :calc(100% - 60px) }

    .browser .dots
    { width :30px; height :20px }

    .browser .dots .dot
    { height :5px; width :5px; margin-top :8px; margin-left :5px }

    .contact-banner h2
    { font-size :35px; font-size :3.5rem }

    .contacts a
    { display :block; font-size :22px; font-size :2.2rem; letter-spacing :.06em }

    .masonry
    { margin-left :33px; margin-right :33px }

    .masonry .item
    { padding-right :7px; padding-left :7px; margin-bottom :14px }

    .masonry .item.item3
    { width :100% }

    .credits > div
    { max-width :440px }

    .credits .item
    { margin :15px 0 }

    .credits h3
    { margin-bottom :10px; font-size :14px; font-size :1.4rem }

    .credits img
    { width :100px }

    .next-prev a
    { color :#ffffff; padding :20px }

    .next-prev li:first-child span:first-child
    { text-align :left; margin-left :20px; margin-top :5px }

    .next-prev li:last-child span:first-child
    { text-align :right; margin-right :20px; margin-top :5px }

    .next-prev span:first-child
    { font-size :10px; padding-bottom :4px; opacity :1 }

    .next-prev .arrow
    { font-size :10px; left :20px; opacity :1 }

    .next-prev li:last-child .arrow
    { right :20px }

    .next-prev a:hover .arrow
    { opacity :1 }

    .next-prev .title
    { display :none }

    .module-404
    { text-align :center; padding-top :100px }
    }

@media only screen and (max-width :500px)
{
    .sectionPadding1
    { padding :30px 30px 0 30px }

    .sectionMargin1
    { margin :30px 30px 0 30px }

    .bottomMargin
    { margin-bottom :30px }

    .topMargin
    { margin-top :30px }

    .bottomPadding
    { padding-bottom :30px }

    h1
    { font-size :30px; font-size :3.0rem; line-height :3.0rem }

    h2
    { font-size :16px; font-size :1.6rem }

    .responsive .cl1
    { width :calc(75% - 15px) }

    .responsive .cl2
    { width :25.2% }

    .vertical-line
    { display :block; width :1px; margin :15px auto; height :20px; opacity :.15 }

    .cl3
    { width :100% }

    .cl2
    { width :100% }

    .cl2-3
    { width :100% }

    .cta
    { padding :2px 2px 2px 2px; position :relative; display :inline-block; margin-top :20px }

    .cta span
    { font-family :"brandon-grotesque", Arial, Helvetica, sans-serif; font-style :normal; font-weight :700; line-height :40px; font-size :10px; font-size :1.0rem; padding :0 20px; height :40px; display :inline-block }

    .cta .target
    { position :absolute; height :44px; width :100%; z-index :1; display :block; margin-top :-2px; margin-left :-2px }

    .mainNav ul
    { width :320px }

    .mainNav ul li
    { letter-spacing :.02em; margin-right :10px }

    .mainNav ul li:nth-child(2)
    { margin-right :25px }

    .mainNav ul li:nth-child(3)
    { padding-left :0; margin-left :25px }

    .mainNav ul li:last-child
    { margin-right :10px }

    .hero
    { height :auto; text-align :center }

    .hero .wrap
    { padding-top :0 }

    .hero h1
    { padding-bottom :10px }

    .no-js. hero img
    { min-width :400px }

    .haberler-carousel h2
    { font-size :30px; font-size :3.0rem; line-height :30px }

    .awards-b h2
    { font-size :35px; font-size :3.5rem }

    .awards-b h3
    { font-size :20px; font-size :2.0rem }

    .awards-b ul li
    { letter-spacing :.06em }

    .intro-a p
    { width :100% }

    .intro-a .horizontal-line
    { margin :10px auto }

    .intro-b p
    { width :100%; max-width :800px }

    .intro-b .horizontal-line
    { margin :10px 0 }

    .sticky-text .intro-b
    { padding-bottom :10px }

    .skills p, .skills .horizontal-line
    { text-align :center; margin :20px auto }

    .contact-banner h2
    { font-size :28px; font-size :2.8rem }

    .awards-a h2
    { padding-bottom :30px }

    .awards-a .item p
    { margin :0; max-width :none; width :calc(100% - 70px); padding :10px 5px }

    .contacts h1
    { font-size :38px; font-size :3.8rem; line-height :4.8rem }

    .contacts a
    { display :block; font-size :18px; font-size :1.8rem; letter-spacing :.06em }

    .masonry
    { margin-left :23px; margin-right :23px }

    .js .wc-nav .titles
    { height :65px; font-size :28px; font-size :2.8rem }

    .js .wc-nav .titles ul li a
    { line-height :60px; height :60px; padding-bottom :100px }

    .js .wc-nav .littleTitles-After
    { bottom :30px }

    .js .wc-nav .littleTitles-Before
    { top :140px }

    .credits > div
    { max-width :280px }

    .credits .item
    { margin :10px 0 }

    .credits h3
    { margin-bottom :10px; font-size :14px; font-size :1.4rem }

    .credits ul
    { color :#7a7a7a; font-size :12px; font-size :1.2rem }

    .credits img
    { width :65px }

    .next-prev a
    { padding :15px }

    .next-prev span:first-child
    { font-size :8px; font-size :.8rem; padding-bottom :4px }

    .next-prev .arrow
    { left :15px }

    .next-prev li:last-child .arrow
    { right :15px }
    }

@media print,(-webkit-min-device-pixel-ratio :1.25),(min-resolution :120dpi)
{
    .photo-carousel figure
    { background-size :40px }
    }

.ir
{ background-color :transparent; border :0; overflow :hidden; *text-indent :-9999px }

.ir:before
{ content :""; display :block; width :0; height :150% }

.hidden
{ display :none !important; visibility :hidden }

.visuallyhidden
{ border :0; clip :rect(0 0 0 0); height :1px; margin :-1px; overflow :hidden; padding :0; position :absolute; width :1px }

.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus
{ clip :auto; height :auto; margin :0; overflow :visible; position :static; width :auto }

.invisible
{ visibility :hidden }

.clearfix:before, .clearfix:after
{ content :" "; display :table }

.clearfix:after
{ clear :both }

.clearfix
{ *zoom :1 }

.white
{ color :#ffffff }

.ul-nostyle
{ padding :0; margin :auto; list-style :none }

.maxWidth
{ width :100% }

.maxHeight
{ height :100% }

.floatL
{ float :left }

.floatR
{ float :right }

.relative
{ position :relative }

.fixed
{ position :fixed }

.absolute
{ position :absolute }

.overflowHidden
{ overflow :hidden }

.upperCase
{ text-transform :uppercase }

.vertical-Center
{ top :50%; -webkit-transform :translateY(-50%); -ms-transform :translateY(-50%); transform :translateY(-50%) }

.css3Animate
{ -webkit-transition :all .3s ease-in-out .001s; transition :all .3s ease-in-out .001s; -moz-transform :all .3s ease-in-out .001s }

.alpha0
{ opacity :0 }

@media print
{
    *
    { background :transparent !important; color :#000000 !important; box-shadow :none !important; text-shadow :none !important }

    a, a:visited
    { text-decoration :underline }

    a[href]:after
    { content :" (" attr(href) ")" }

    abbr[title]:after
    { content :" (" attr(title) ")" }

    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after
    { content :"" }

    pre, blockquote
    { border :1px solid #999999; page-break-inside :avoid }

    thead
    { display :table-header-group }

    tr, img
    { page-break-inside :avoid }

    img
    { max-width :100% !important }

    @page
    {
        margin :.5cm
        }

    p, h2, h3
    { orphans :3; widows :3 }

    h2, h3
    { page-break-after :avoid }
    }