body { background: #000; }
.clearfix:before,
.clearfix:after {
  display: table;
  content: " ";
}
.clearfix:after {
  clear: both;
}
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.nano-content h1 { font-family: 'Lato' !important; font-weight: 700 !important; font-size: 12px !important;  }
.nano-content p {  font-size: 11px !important;  }
#news_content { top: 530px !important; width: 60%; margin-left: -30%; }
ul.menu li a, .ui-video-background a, .TR a, .EN a, .intro a, .hbacks a { font-size: 11px !important; background: none; }

.new-slider { background: ; position: absolute; top: 100px; left: 0; width: 100%; height: 405px; display: block; overflow: hidden; }
.slider-text h1 { font-family: "helveticaneueltpro-Th", Helvetica, Arial, sans-serif; font-size: 38px; color: #fff; text-align: center; letter-spacing: 7px;  margin: 0px; opacity: 0.7; }

.slider-text p { font-family: Helvetica, Arial, sans-serif; font-size: 9px; color: #fff; text-align: center; letter-spacing: 15px; margin-right: -10px; margin: 0px 0 7px; opacity: 0.5; font-weight: bold;  }

.slider-text { height: 90px; position: relative; }
.slider-text-center { top: 10px; position: absolute; left: 0; display: none; text-align: center; width: 100% }
.slider-content { width: 40%; overflow: hidden; margin-left: -19.5%; -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9); position: absolute; top: 0; left: 0; opacity: 0.5; -webkit-backface-visibi lity: hidden; /* Chrome, Safari, Opera */
    backface-visibility: hidden;

}

.sliders { position: relative; height: 305px; overflow: hidden; width: 100%; }
.slider-1-back { background: url('../new/slider-1.jpg') no-repeat center center; width: 100%; display: block; height: 305px; font-size:30px text-align: center; color: #fff; background-size: 100%; position: relative; }

.slider-2-back { background: url('../new/aff54-slider.jpg') no-repeat center center; background-size: 100%; }
.slider-3-back { background: url('../new/slider-gncfest.jpg') no-repeat center center; background-size: 100%; }
.slider-apf-back { background: url('../new/slider-apf.jpg') no-repeat center center; background-size: 100%; }
.slider-sabanci-back { background: url('../new/slider-sabanci.jpg') no-repeat center center; background-size: 100%; }
.slider-expo-back { background: url('../new/slider-expo.jpg') no-repeat center center; background-size: 100%; }
.slider-latff-back { background: url('../new/slider-latff-2.jpg') no-repeat center center; background-size: 100%; }
.slider-wac-back { background: url('../new/slider-wec.jpg') no-repeat center center; background-size: 100%; }
.slider-eyof-back { background: url('../new/eyof2017.jpg') no-repeat center center; background-size: 100%; }
.slider-deaf-back { background: url('../new/deaf2017-2.jpg') no-repeat center center; background-size: 100%; }

.slider-content.active { width: 60%; margin: 0; -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); -webkit-transform: translate3d(-50%, 0%, 0); -ms-transform: translate3d(-50%,0*%, 0); transform: translate3d(-50%, 0%, 0); left: 50%; opacity: 1;  }

  .slider-right { left: 79.5%;  margin-left: 0; }
  .slider-hide { left: 120%; margin: 0; opacity: 0; }
.dd-detail { opacity: 0; }
  .left-ok { width: 60px; height: 60px; position: absolute; cursor: pointer; top: 50%; margin-top: -30px; left: 17%; z-index: 2; }
.left-ok .left-content { position: relative; width: 60px; height: 60px; }
.left-ok .left-content .left { background: url('../new/left-ok.png') no-repeat; width: 60px; height: 60px; background-size: 60px 60px; opacity: 1;  position: absolute; top: 0; left: 0; }
.left-ok .left-content .left-hover { display: none; background: url('../new/left-ok-hv.png') no-repeat; width: 60px; height: 60px; background-size: 60px 60px; opacity: 1; position: absolute; top: 0; left: 0; }
.right-ok { width: 60px; height: 60px; position: absolute; cursor: pointer; top: 50%; margin-top: -30px; left: auto; right: 17%; z-index: 2; }
.right-ok .right-content { position: relative; width: 60px; height: 60px; }
.right-ok .right-content .right { background: url('../new/right-ok.png') no-repeat; width: 60px; height: 60px; background-size: 60px 60px; opacity: 1;  position: absolute; top: 0; left: 0; }
.right-ok .right-content .right-hover { display: none; background: url('../new/right-ok-hv.png') no-repeat; width: 60px; height: 60px; background-size: 60px 60px; opacity: 1; position: absolute; top: 0; left: 0; }

.details { position: absolute; bottom: 20px; left: 20px; }

.play-s { width: 40px; height: 40px; cursor: pointer; position: absolute; bottom: 20px; right: 20px; z-index: 2; }
.play-content { position: relative; }
.play-content .play { background: url('../new/play.png') no-repeat; width: 40px; height: 40px; background-size: 40px 40px; opacity: 1; position: absolute; top: 0; left: 0; }
.play-content .play-hover { background: url('../new/play-hover.png') no-repeat; width: 40px; height: 40px; background-size: 40px 40px; opacity: 0; position: absolute; top: 0; left: 0; }

.container-work { width: 1200px; margin: 150px auto 0 auto;  }

.work-column, .media-column { width: 300px; float: left; margin-bottom: 30px; }

.work-title { background: rgba(0,0,0,0.9); padding: 30px;  width: 100%; height: 100%; position: relative; border: 1px solid rgba(0,0,0,0.5); opacity: 0.0; border-radius: 2px; }

.work-title .text { font-size: 18px; color: #fff; font-family: 'Lato'; line-height: 150%; text-transform: uppercase; text-align: center;  }

.atvImg {
  border-radius: 2px;
  transform-style: preserve-3d;
  -webkit-tap-highlight-color: rgba(#000,0);
  width: 270px;
  height: 330px;
  cursor: pointer;
}

.media-column .atvImg {
  border-radius: 2px;
  transform-style: preserve-3d;
  -webkit-tap-highlight-color: rgba(#000,0);
  width: 270px;
  height: 400px;
  cursor: pointer;
}

.atvImg img {
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(14,21,47,0.25);
}

.atvImg-container {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  transition: all 0.2s ease-out;
}

.atvImg-container.over .atvImg-shadow {
  box-shadow: 0 45px 100px rgba(14,21,47,0.4), 0 16px 40px rgba(14,21,47,0.4);
}

.atvImg-layers {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  overflow: hidden;
  transform-style: preserve-3d;
}

.atvImg-rendered-layer {
  position: absolute;
  width: 104%;
  height: 104%;
  top: -2%;
  left: -2%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  background-size: cover;
  transition: all 0.1s ease-out;
  padding: 25px;
}

.atvImg-shadow {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  transition: all 0.2s ease-out;
  box-shadow: 0 8px 30px rgba(14,21,47,0.6);
}

.atvImg-shine {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 2px;
  background: linear-gradient(135deg, rgba(255,255,255,.25) 0%,rgba(255,255,255,0) 60%);
}

.hamburger { position: relative; height: 50px; width: 50px; display: none; cursor: pointer; margin: -22px 0 0; }
#nav-toggle span { position: absolute; right: 0; top: 50%; }
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 2px;
  width: 30px;
  background: white;
  position: absolute;
  display: block;
  content: '';
}
#nav-toggle span:before {
  top: -7px;
}
#nav-toggle span:after {
  bottom: -7px;
}

.twitter-topic { margin: 520px auto 0; width: 450px; text-align: right; }
.twitter-topic h1 { font-family: "helveticaneueltpro-Th", Helvetica, Arial, sans-serif; font-size: 14px; color: #f2f2f2; text-align: right; letter-spacing: 2px; }
.twitter-content { width: 450px; margin: 10px auto 0; }

.hamburger-container { width: 100%; clear: both; background: rgba(0,0,0,0.85); display: none; position: absolute; top: 90px; left: 0; padding-top: 20px; z-index: 12 }
.hamburger-menu { list-style-type: none; margin: 0; padding: 0; }
.hamburger-menu li { display: block; padding: 5px 0 7px; border-bottom: 1px solid #1a1a1a; padding-left: 60px; }
.hamburger-menu li a { color: #fff; font-size: 12px; font-family: 'Lato'; padding: 5px 0 7px; width: 100%; display: block; }
.hamburger-menu li a:hover, .hamburger-menu li a:focus { text-decoration: none; }

.homepage-mobile { margin-top: 100px; clear: both; display: none; }
.news-mobile { display: none; width: 86%; margin: 50px auto }

.fixed-menu { position: fixed; top: 0; left: 0; width: 100%; padding: 30px 60px; z-index: 13; transition: all 0.75s; }
#logo { position: static; float: left; transition: all 0.75s;  }
#menu { position: static; float: right; padding-top: 13px; transition: all 0.75s; }
.fixed-menu.active { position: fixed; background: rgba(0,0,0,0.7); padding: 5px 60px; }
.fixed-menu.active #logo { transform: scale(0.6); transform-origin: center left; }
.fixed-menu.active #menu { padding-top: 17px; }
#logo a { transition: opacity 0.5s; }
#logo a:hover { opacity: 1;}

@media screen and (max-width: 1350px) {
  .slider-text h1 { font-size: 32px !important; }
  .slider-text-center { padding-top: 10px; }
  .slider-text p { letter-spacing: 10px !important; }
}

@media screen and (max-width: 1170px) {
  .slider-text h1 { font-size: 28px !important; }
  .slider-text-center { padding-top: 23px; }
  .slider-text p { letter-spacing: 10px !important; }
}

@media screen and (max-width: 1200px) {
  .container-work { width: 90% !important }
  .work-column, .media-column { width: 25% !important;  }
  .atvImg { width: 95% !important; height: 323px;  }
  .media-column .atvImg { width: 95% !important; height: 350px;  }
  .atvImg-rendered-layer { padding: 15px !important;  }

  .work-title { background: rgba(0,0,0,0.7); border: 1px solid rgba(0,0,0,0.4); opacity: 1 !important; }
  .work-title.lookbook { opacity: 0 !important; }
}


@media screen and (max-width: 1000px) {
  .slider-text-center { padding-top: 33px; }
  .work-column, .media-column { width: 50% !important; overflow: hidden; }
  .atvImg { width: 95%; height: 220px;  }
  .media-column .atvImg { width: 95%; height: 300px;  }
  .work-title .text { font-size: 12px; }
}

@media screen and (max-width: 960px) {

#works_content, #works_content2, #container-img { width: 100% !important; }

}

@media screen and (max-width: 850px) {
  .about_menu { width: 250px; }
  #logolar { display: none !important; }
  .peraa { width: 94% }
  .peraa div { width: 100% !important; float: none !important; }
  .hizmet { width: 94% !important; }
  .hizmet_menu { width: 100%; display: block; height: auto; float: none; }
  .hizmet_menu ul li { margin-bottom: 20px; width: 100%; display: block; }
  .hizmet_menu ul li a { width: 100%; display: block; }
  .hizmet_icerik { width: 100%; float: none; margin-top: 20px; }
  #peraevent { height: auto !important; }
  .bloc1 { width: 33.3% }
}

@media screen and (max-width: 800px) {
    .menu-container { display: none; }
    .hamburger { display: block; }
    #news_content, .new-slider, .facetwit { display: none; }
    .homepage-mobile, .news-mobile { display: block; }
    #page { display: none; }
    #works_details_content, .details_left, #container-img, #works_details_content, #trt34, #trtbelgesel, #fifa, #trtmuzik, #fetih, #nefes, #euro { width: 100% !important; float: none !important; }
    .details_left img { width: 100% !important }
    .other_img { width: 24%; }
    .xclose { top: 30px; }
    .other_img a img { width: 100% !important }
    .details_right { clear: both; float: none; width: 94%; margin: 0 auto 0; padding: 30px 0 30px; }
    .detaybaslik { width: 80%; }
    .container-work { margin: 115px auto 0 auto; }
    .bloc1 { width: 50% }
    #box-left { border-radius: 0; margin: 100px 0 0 27px; position: relative; height: auto; width: auto;  }
    #box-left p { float: left; text-align: left; }
    #title-box { display: none; }
    .twitter-content { width: 100%; margin-top: 0; }
    .twitter-topic { margin: 0; width: 100%; padding-right: 8px; }
}

@media screen and (max-width: 750px) {
  .fixed-menu { padding: 30px 70px 30px 30px !important; }
  .fixed-menu { position: absolute !important; }
}

@media screen and (max-width: 420px) {
  #logo { top: 26px; left: 35px; }
  .hamburger-menu li { padding-left: 35px !important; }
  .hamburger { margin: -22px -46px 0 0 !important; }
}