@font-face {
    font-family: 'AvenirBook';
    src: url('fonts/avenir.eot');
    src: url('fonts/avenir.eot') format('embedded-opentype'),
         url('fonts/avenir.woff2') format('woff2'),
         url('fonts/avenir.woff') format('woff'),
         url('fonts/avenir.ttf') format('truetype'),
         url('fonts/avenir.svg#AvenirBook') format('svg');
}

@font-face {
    font-family: 'AvenirNextBold';
    src: url('fonts/avenirnext.eot');
    src: url('fonts/avenirnext.eot') format('embedded-opentype'),
         url('fonts/avenirnext.woff2') format('woff2'),
         url('fonts/avenirnext.woff') format('woff'),
         url('fonts/avenirnext.ttf') format('truetype'),
         url('fonts/avenirnext.svg#AvenirNextBold') format('svg');
}

@font-face {
    font-family: 'AvenirNextCondensedBold';
    src: url('fonts/avenirnextcondensed.eot');
    src: url('fonts/avenirnextcondensed.eot') format('embedded-opentype'),
         url('fonts/avenirnextcondensed.woff2') format('woff2'),
         url('fonts/avenirnextcondensed.woff') format('woff'),
         url('fonts/avenirnextcondensed.ttf') format('truetype'),
         url('fonts/avenirnextcondensed.svg#AvenirNextCondensedBold') format('svg');
}

@font-face {
    font-family: 'BebasNeueBold';
    src: url('fonts/bebasneuebold.eot');
    src: url('fonts/bebasneuebold.eot') format('embedded-opentype'),
         url('fonts/bebasneuebold.woff2') format('woff2'),
         url('fonts/bebasneuebold.woff') format('woff'),
         url('fonts/bebasneuebold.ttf') format('truetype'),
         url('fonts/bebasneuebold.svg#BebasNeueBold') format('svg');
}

body{margin:0;padding:0;background:#fff;font-family:Arial;}

img, a{border:0;outline:0;text-decoration:none;}
h2{font-family: 'BebasNeueBold';font-size:32px;}
.clear:before, .clear:after {content: " "; display: table;}
.clear:after {clear: both;}
.clear {*zoom: 1; clear: both;}

::-webkit-scrollbar {width: 8px;}  
::-webkit-scrollbar-track {background-color: #f7f7f7;}  
::-webkit-scrollbar-thumb {background-color: #bbbdbf;}  
::-webkit-scrollbar-thumb:hover {background-color: #b0b2b4;} 



.main{width:calc(100% - 20px);height:calc(100% - 20px);position:absolute;border:10px solid #e6e7e8;background:#fff;z-index:10;}

#nav{width:100%;height:152px;background:url(../images/img/bg/nav.png);position:fixed;z-index:100;top:-152px;left:0;z-index:100;}
#nav .nav-wrap{width:75%;margin-left:12.5%;font-family: 'AvenirBook';font-size:20px;text-align:center;position:relative;height:94px;}
#nav table{margin-top:58px;}
#nav table a{color:#fff;}
#nav table a img{padding-top:8px;}
#nav table td{width:16.6%;}
#nav .nav-wrap .nav-close{position:absolute;bottom:-1px;left:50%;margin-left:280px;z-index:100;cursor:pointer;}
.nav-open{position:fixed;display:block;top:0;z-index:200;width:81px;height:39px;left:50%;margin-left:280px;}
.nav-open .open{position:absolute;bottom:0;z-index:200;cursor:pointer;}


#footer{width:calc(100% - 20px);height:50px;background:#fff;position:fixed;left:10px;bottom:10px;border-top:1px solid #62a249;z-index:999;}
#footer .cols{float:left;text-align:center;margin-top:8px}
#footer .first{margin-left:10%;width:25%;text-align:right;}
#footer .second{width:30%;line-height:24px;}
#footer .third{width:25%;text-align:left;}
#footer .copy{text-align:center;font-size:11px;color:#58595b;}
#footer .social{width:57px;position:absolute;left:50%;margin-left:-28px;margin-top:-68px;}
#footer .social a{float:left;}


#content{text-align:center;width:75%;margin-left:12.5%;font-family: 'AvenirBook';font-size:20px;position:relative;}
#content .language{color:#9c9d9d;font-size:12px;margin-top:33px;}
#content .language a{color:#9c9d9d;}
#content .logo{margin-top:5%;}
#content .description{width:100%;overflow-x:hidden;position:relative;z-index:50;margin-top:20px;}
#content .description2{width:100%;overflow-x:hidden;position:relative;z-index:60;}

#content .cols{width:calc(33% - 2px);float:left;border-right:2px solid #918f90;padding:10px 0;position:relative;}
#content .cols .logo{width:88%;margin-left:6%;cursor:pointer;}
#content .cols .expand{width:40%;margin-left:60%;cursor:pointer;}
#content .cols .colscontent{width:75%;margin-left:12.5%;text-align:left;color:#58595b;font-size:14px;display:none;margin-top:30px;padding-right:8%;}
#content .cols .colscontent .intro{display:none;cursor:pointer;color:#58595b;}
#content .cols .colscontent .news{margin-top:30px;display:none;}
#content .cols .colscontent .news .new{margin-top:10px;padding-bottom:5px;border-bottom:1px solid #918f90;cursor:pointer;}
#content .cols .colscontent .news .new .img{}
#content .cols .colscontent .news .new .img img{width:100%;}
#content .cols .colscontent .news .new .text{margin-top:5px;}

#content .cols .expand .colscontent{display:block !important;}
#content .cols .expand .colscontent .intro{display:block !important;}

#content .last{border-right:0px;}
#content .title{font-family: 'BebasNeueBold';color:#58595b;font-size:60px;margin-top:20px;}
#content .more { display:block;text-align: center; border: 1px solid #60a144;padding: 6px 0;height:18px;width:120px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px; background: #fff;color: #58595b !important; -webkit-transition: all 0.5s;transition: all 0.5s;font-size:12px;margin:10px auto 0 auto;}
#content  .more:hover{background-color: #60a144; color: #fff !important;}

#content .eventtree{width:75%;margin-left:12.5%;}
#content .eventtree .text{text-align:left;font-size:16px; text-align:justify;}
#content .eventtree .logo{margin-top:24px;}
#content .eventtree .video{width:75%;margin:24px auto 0 auto;}

#news-detail{position:relative;z-index:100;display:none;}
#left{float:left;width:calc(75% - 12px);text-align:left;position:relative;padding-right:10px;border-right:2px solid #918f90;}
#left .close-button{position:absolute;right:10px; top:0;cursor:pointer;}
#left .title{font-family: 'BebasNeueBold';color:#58595b;font-size:50px;}
#left .date{color:#58595b;font-size:16px;}
#left .text{color:#58595b;font-size:16px;padding-right:10px;}
#left .text .big{width:100%;}
#left .gallery{}
#left .gallery .galleryimg{float:left;width:32%;margin-left:1%;}
#left .gallery .galleryimg img{width:100%;}
#left .gallery .first{margin-left:0px;}

#right{float:left;width:calc(25% - 30px);margin-left:30px;}
#right img{width:100%;cursor:pointer;}
#right .art{width:100%;margin-top:20px;}
#right .campaign{width:100%;margin-top:50px;}
#right .experience{width:100%;margin-top:50px;}

#right .box{width:100%;position:relative;margin-bottom:10px;}
#right .box .left{width:20px;height:35px;position:absolute;top:50%;margin-top:-17px;background:url(../images/img/icon/g-arrow.png) center center no-repeat;z-index:10;}
#right .box .right{width:calc(100% - 22px);border:2px solid #d0d2d3;margin-left:18px;z-index:8;position:relative;padding:10px;background:#d0d2d3;text-align:left;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-box-shadow: 0px 2px 10px 0px rgba(194, 194, 194, 0.75);-moz-box-shadow:0px 2px 10px 0px rgba(194, 194, 194, 0.75);box-shadow:0px 2px 10px 0px rgba(194, 194, 194, 0.75);}
#right .box .right .title{font-family: 'BebasNeueBold';font-size:16px;color:#666;margin-top:0px;}
#right .box .right .text{font-family: 'AvenirBook';font-size:13px;color:#666;margin-top:5px;}
#right .active .left{background:url(../images/img/icon/w-arrow.png) center center no-repeat;}
#right .active .right{border:2px solid #60a144;background:#fff;}


.jstab ul {margin:0;padding:0;list-style:none;position:absolute;right:20px;margin-top:10px;}
.jstab ul li {float: left; font-family: 'AvenirBook';font-size:16px;}
.jstab ul li a {border:1px solid #60a144;display: block; padding: 4px 0px; text-align:center; width:140px; color: #fff;background:#bbbdbf;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; }
.jstab ul li.aktif a { color: #58595b;background:#fff;}
.jstab .tabcontent{width:calc(100% - 2px);border: 1px solid #60a144;margin-top:41px;background:#f1f1f2;}
#map{width:100%;height:426px;}

#content .contact{}
#content .contact .cvprocess a{color:#60a144;}
#content .contact .cv{margin:40px 0;}
#content .contact .contact-form{margin:40px 0;}
#content .contact .info{margin:20px 0;font-family: 'AvenirBook';color:#58595b;font-size:16px;}
#content .contact .info .i-cont{}
#content .contact .info .i-add{margin-top:30px;}
#content .contact .formelement{width:510px;margin:8px auto 0 auto;}
#content .contact .formelement .text{float:left;color:#58595b;font-size:14px;text-align:right;width:100px;}
#content .contact .formelement .element{float:left;width:400px;margin-left:10px;}
#content .contact .formelement .element input[type="text"]{width:380px;height:15px;color:#58595b;padding:5px 10px;background:#fff;border:1px solid #60a144;outline:0;font-family: 'AvenirBook';font-size:16px;}
#content .contact .formelement .element textarea{width:380px;height:117px;padding:5px 10px;color:#58595b;background:#fff;border:1px solid #60a144;outline:0;font-family: 'AvenirBook';font-size:16px;}
#content .contact .formelement .cvbutton{float:right;width:102px;height:24px;border:1px solid #60a144;background:url(../images/img/bg/cv-ekle.jpg) no-repeat;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;cursor:pointer;}
#content .contact .formelement .cvbutton input[type="file"]{width:102px;height:24px;opacity:0;cursor:pointer;}
#content .contact .formelement .button{float:right;}
#content .contact .formelement .button button{width:102px;height:26px;cursor:pointer;border:1px solid #60a144;background:url(../images/img/bg/gonder.jpg) no-repeat;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;outline:0;}

#content .contact .formelement .cvbuttonen{float:right;width:102px;height:24px;border:1px solid #60a144;background:url(../images/img/bg/add-cv.jpg) no-repeat;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;cursor:pointer;}
#content .contact .formelement .cvbuttonen input[type="file"]{width:102px;height:24px;opacity:0;cursor:pointer;}
#content .contact .formelement .buttonen{float:right;}
#content .contact .formelement .buttonen button{width:102px;height:26px;cursor:pointer;border:1px solid #60a144;background:url(../images/img/bg/send.jpg) no-repeat;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;outline:0;}

#content .contact label{float:left;font-size:12px;color:#d72424;}

#content .brands{width:100%;overflow-x:hidden;position:relative;z-index:50;margin-top:20px;}
#content .brands .img{width:100%;height:auto;text-align:center;}
#content .brands .img img{width:70%;}

.displayblock{display:block;}

#art, #campaign, #experience, #art2, #campaign2, #experience2{display:none;}

#content .projects{width:100%;position:relative;}
#content .projects .project{float:left;width:15.83%;margin-left:1%;margin-bottom:1%;position:relative;}
#content .projects .project .img{width:100%;position:relative;z-index:5;overflow:hidden;}
#content .projects .project .img img{width:100%;height:100%;}
#content .projects .project .hover{width:90%;height:90%;position:absolute;top:5%;left:5%;z-index:10;opacity:0;background:url(../images/img/bg/white.png);display:block;}
#content .projects .project .hover img{max-width:90%;max-height:90%;}
#content .projects .project .block{width:100%;height:100%;position:absolute;z-index:20;top:0;left:0;cursor:pointer;}
#content .projects .first{margin-left:0px;}

.project-content{width:100%;height:100%;position:fixed;background:url(../images/img/bg/modal.png);top:0;left:0;z-index:500;display:none;}
.project-content .project-close{width:100%;height:100%;position:absolute;z-index:100;}
.project-content .details{width:calc(50% - 60px);padding:40px 20px 40px 40px;margin-left:25%;border:10px solid #e6e7e8;background:#fff;z-index:800;position:relative;}
.project-content .details .detail-close{position:absolute;right:10px;top:10px;cursor:pointer;}
.project-content .details .detail-title{font-family: 'BebasNeueBold';color:#58595b;font-size:50px;}
.project-content .details .detail-content{width:calc(100% - 20px);padding-right:20px;font-family: 'AvenirBook';overflow-y:scroll;margin-top:10px;}
.project-content .details .detail-content .text{color:#58595b;font-size:16px;text-align:justify;margin-top:0;}
.project-content .details .detail-content .detail-gallery{width:100%;}
.project-content .details .detail-content .detail-gallery .img{width:100%;margin-bottom:5px;}
.project-content .details .detail-content .detail-gallery .img img{width:100%;}
.project-content .loading{position:absolute;z-index:600;width:32px;height:32px;left:50%;top:50%;margin:-16px 0 0 -16px;}

@media screen and (max-width: 1200px) {
#footer .copy{font-size:9px;}
}

@media screen and (max-width: 768px) {
#content .logo img{width:70%;}
}