@font-face {
    font-family: 'Coolvetica Crammed Rg';
    src: url('CoolveticaCrammedRg-Regular.woff2') format('woff2'),
        url('CoolveticaCrammedRg-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Coolvetica Compressed Rg';
    src: url('CoolveticaCompressedRg-Regular.woff2') format('woff2'),
        url('CoolveticaCompressedRg-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Coolvetica Condensed Rg';
    src: url('CoolveticaCondensedRg-Regular.woff2') format('woff2'),
        url('CoolveticaCondensedRg-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Coolvetica Rg';
    src: url('CoolveticaRg-Regular.woff2') format('woff2'),
        url('CoolveticaRg-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body{font-family: 'Coolvetica Rg'; font-weight: normal; font-style: normal;background: #fff;}
html {
  scroll-behavior: smooth;
}

#header{max-width: 1000px; margin: auto; padding-left: 15px; padding-right: 15px; padding-top: 15px; position: relative;}
#headerin{}
#headerin img{max-width: 230px;}

  @media (max-width:400px){
#headerin img{ max-width: 165px;
}}

 @media (max-width:300px){
#headerin img{ max-width: 125px;
}}



#afterheader{    max-width: 1000px;   height: 100%;   margin: auto;   margin-top: 50px;   min-height: 887px;}


 @media (max-width: 760px){
#afterheader{ min-height:550px;
}}



 @media (max-width: 650px){
#afterheader{ min-height:410px;
}}






#menu2{width: 30%;float: left;     margin-top: 161px;;}

  @media (max-width: 760px){
#menu2{ display: none;
}}



#menu-right{width: 70%;float: right; position: relative;}

  @media (max-width: 760px){
#menu-right{ width: 100%;  
}}

#right{}
#menu-right img{       max-width: 80%;}

  @media (max-width: 760px){
#menu-right img{ max-width: 100%; 
}}



a {color: inherit;}
a:hover{color: inherit;}
.mainmenu, .submenu {
  list-style: none;
    padding: 0;
    margin: 0;
    width: 210px;
}
 .mainmenu a {
  display: block;
  font-family: helvetica;
   text-decoration: none;
  padding: 10px;     font-size: 23px;
  color: #000;    -moz-transition: all 1s ease-in;
    /* WebKit */
    -webkit-transition: all 0.1s ease-in;
    /* Opera */
    -o-transition: all 0.1s ease-in;
    /* Standard */
    transition: all 0.1s ease-in;
}
 .mainmenu a:hover { background-color: #ffdc90;    -moz-transition: all 1s ease-in;
    /* WebKit */
    -webkit-transition: all 0.1s ease-in;
    /* Opera */
    -o-transition: all 0.1s ease-in;
    /* Standard */
    transition: all 0.1s ease-in;
 }
.mainmenu li:hover .submenu {
  display: block;
  max-height: 200px;
}
.submenu a {
  background-color: #fff; font-size: 16px; font-weight: 100;
}
 .submenu a:hover {
 }
.submenu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.5s ease-out;
}

#creative{top: 45%;
    position: absolute;
    text-align: center;
    margin: auto;
    width: 81%;     font-family: 'Coolvetica Rg';

    font-size: 30px;
    color: white;
  font-weight: 100;
    letter-spacing: 9px;}


      @media (max-width: 760px){
#creative{ top: 45%;
    position: absolute;
    text-align: center;
    margin: auto;
    width: 100%;
    font-family: 'Coolvetica Rg';
    font-size: 23px;
    color: white;
    font-weight: 100;
    letter-spacing: 9px;
}}


    #strategy{position: absolute;
    margin-top: 20px;
    font-size: 19PX;
    letter-spacing: 1px;
    font-family: helvetica;
    font-weight: 700;}

    #creative img {    max-width: 41px;
    padding-right: 6px; cursor: pointer;
    vertical-align: -12px;}

   #elephant {
    position: absolute;
    right: 2px;
    float: right;
    bottom: -1px;
    text-align: right;
}
    #elephant img{max-width: 31%;}


  @media (max-width: 760px){
#elephant{ display: none;
}}



    #i-dont-get-it{    position: absolute;
    right: 0;
    margin-top: 26px;}


     @media (max-width: 760px){
   #i-dont-get-it{  display: none;
}}



    #i-dont-get-it img{max-width: 170px;}

    #atolye{        position: absolute;
    top: -61px;
    right: 153px;
    font-size: 41px;
    letter-spacing: 2px;}

      @media (max-width: 760px){
#atolye{ display: none;
}}


    #grafil{    -webkit-transform: rotate( 
90deg);
    -ms-transform: rotate(90deg);
    transform: rotate( 
90deg);
    position: absolute;
    top: 281px;
    right: -186px;
    font-size: 252px;
    letter-spacing: 22px;}

      @media (max-width: 900px){
#grafil{display: none;
}}


    #second{max-width: 1000px; margin: auto; margin-top: 46px;}

    #item{width: 33.333%; float: left;   position: relative;    }
    #item img{max-width: 100%;    margin-bottom: 18px;}
    #item-logo{}
    #item-sayi{       position: absolute;    right: 21px;    top: 28px;    font-size: 55px;}
    #item-title{font-size: 28px; }


  @media (max-width: 760px){
  #item-title{font-size: 19px; 
}}



  @media (max-width: 760px){
 #item-alt-title{font-size: 19px !important 
}}







    #item-alt-title{font-size: 22px;    color:  #9f9f9f;     margin-top: 7px;}
    #item-in{padding: 25px;}
    #item-desc{padding-top: 10px; text-align: justify;    font-family: helvetica;    font-weight: 200;;}

       @media (max-width: 760px){
#item{ width: 100%; height: 100% !important;
}}

  @media (max-width: 760px){
#item-in{ width: 100%; height: 100% !important; border: 0px !important;
}}



@keyframes zoominoutsinglefeatured {
    0% {
        transform: scale(1,1);
    }
    50% {
        transform: scale(1.2,1.2);
    }
    100% {
        transform: scale(1,1);
    }
}

#creative img {
    animation: zoominoutsinglefeatured 1s infinite ;
}


 #third{max-width: 1000px; margin: auto; margin-top: 40px; overflow: hidden;}
        #third-logo img{width: 200px; margin-top: 20px;}


        #port-1{width: 38%; float: left;  }
        #port-2{width: 57%;   float: right;     margin-bottom: 23px;}


          @media (max-width:375px){
#port-2{margin-bottom: 40px
}}



        #port-3{width: 48%; float: left;  }
        #port-4{width: 48%; text-align: center;  float: right; }



        #portfolio{width: 100%; margin: auto;}

        #portfolio img{max-width: 100%;}

        #port-text{font-size: 18px;
    text-align: left;
    padding-left: 27px;
    font-family: helvetica;
    font-weight: 600;}



          @media (max-width:420px){
  #port-text{    font-size: 15px;
    text-align: left;
    padding-left: 27px;
    font-family: helvetica;
    font-weight: 600;
}}




            #fourth{max-width: 1000px; margin: auto; margin-top: 20px;   overflow: hidden;;}


#contact{   max-width: 803px;    margin: auto;}
            #contact-text{    font-size: 37px;
    margin-top: 42px;
    letter-spacing: 10px;
    padding-left: 15px;
    background: #565353;
    color: white;
    padding: 5px 20px 5px 20px;}


     @media (max-width: 760px){
  #contact-text{ font-size: 28px;
}}




            #contact-text-1{       margin-top: 50px;
    margin-bottom: 9px;
    font-size: 23px;
    font-family: helvetica;
    padding-left: 15px;
    font-weight: bold;   }


     @media (max-width: 760px){
  #contact-text-1{ font-size: 18px;
}}


     @media (max-width: 760px){
  #contact-text-2{ font-size: 18px !important; 
}}





            #contact-text-2{   font-family: helvetica; font-weight: light;    font-size: 23px;  padding-left: 15px;   }



@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900);
.contact-form {
  margin-top: 30px;
}
.contact-form .input-block {
   border: solid 1px #dcdcdc;
  width: 100%;
  height: 60px;
  padding: 25px;
  position: relative;
  margin-bottom: 20px;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.contact-form .input-block.focus {
   border-bottom: solid 1px  #fdca5b;
}
.contact-form .input-block.textarea {
  height: auto;
}
.contact-form .input-block.textarea .form-control {
  height: auto;
  resize: none;
}
.contact-form .input-block label {
     position: absolute;
    left: 25px;
    top: 25px;
    display: block;
    margin: 0;
    font-weight: 300;
    z-index: 1;
    font-family: helvetica;
    color: #333;
    font-size: 18px;
    line-height: 10px;
    font-size: 15px !important;

}
.contact-form .input-block .form-control {
  background-color: transparent;
  padding: 0;
  border: none;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  height: auto;
  position: relative;
  z-index: 2;
  font-size: 18px;
  color: #333;
}
.contact-form .input-block .form-control:focus label {
  top: 0;
}
.contact-form .square-button {
background-color: rgb(253 202 91);
    color: #ffffff;
    font-size: 18px;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    padding: 0 60px;
    height: 55px;
    border: none;
    font-family: helvetica;
    width: 222px;
    border-radius: 1px;
}
.contact-form .square-button:hover, .contact-form .square-button:focus {
  background-color: rgb(253 202 91);  
}

@media (min-width: 768px) {
  .contact-wrap {
   width: 100%;
    margin: auto;
    padding: 0 !important;
  }
}
 

.contact-wrap {
  padding: 15px;
}


#footer{max-width: 1000px; margin: auto; margin-top: 40px; overflow: auto; text-align: center; background:  #202020;    padding: 34px; }
#footer-text-1{color: #fff;  font-family: helvetica;     font-weight: 800;  font-size: 37px;}

  @media (max-width: 760px){
#footer-text-1{  font-size: 17px;
}}




#footer-text-2{color: #fff; font-family: helvetica;   font-size: 19px; margin-top: 19px;}

@media (max-width: 760px){
#footer-text-2{  font-size: 17px;
}}


#footer-text-3{color:  #424242;  font-family: helvetica;   font-size: 48px; font-weight: bolder;}

 @media (max-width: 760px){
#footer-text-3{  font-size: 40px; line-height: 35px; margin-top: 10px;
}}


#contents{padding: 20px;}

#language{position: absolute;    right: 161px;    top: 85px;    font-size: 22px;}

    #en{float: left; padding: 10px}
    #en:hover{background:   #ffdc90;border-left: 1px solid black;}
    #tr{float: right; margin-left: 5px; padding: 10px;}
    #tr:hover{background: #ffdc90;border-left: 1px solid black;}


  @media (max-width: 760px){
#language{  right: 0px;
}}




 #ulightbox {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.centeredchild {
  background: #000;
}

.video-wrapper {
  position: relative;
  padding: 66.67%;
}

iframe.playerdiv {
  position: absolute;
  left: 0;
  right: 0; max-width: 100%;
  height: 100%;
  width: 100%;
}
iframe{max-width: 100%;}
.text-center {
  text-align: center;
}

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

            #fifth{max-width: 1000px; margin: auto; margin-top: 20px; overflow: hidden;}

#fifth-text{width: 50%; float: left; font-size: 26px; padding: 15px; color: white; font-family: calibri; font-weight: 600;}

#fifth-text p{  font-size:15px; margin-top: 10px; font-weight: 200}

#fifth-image{width: 50%; float: right;}
#fifth-image img{max-width: 100%;}

#fifth-item{overflow: auto;  display: flex;
  justify-content: center; margin-bottom: 10px;
  align-items: center;}

  @media (max-width: 760px){
#fifth-image{width: 100%; float: right;
}}


  @media (max-width: 760px){
#fifth-text{width: 100%; float: right;
}}


 @media (max-width: 760px){
#fifth-item{    overflow: hidden;
    display: inline-block;
    
}}


@media (min-width: 768px){
 .col-sm-6 {
    width: 100%;
}}

#neler-yapariz-item{max-width: 1000px; margin: auto; overflow: auto;   margin-top: 40px;}

#neler-yapariz-items{width: 70%; float: right;}

 @media (max-width: 760px){
#neler-yapariz-items{width: 100%; float: none;}
}


#item-name{font-size: 30px; font-family: helvetica; font-weight: 700; margin-bottom: 10px;}


@media (max-width: 760px){
#item-name{   font-size: 19px;
}}



#item-aciklama{    font-size: 17px; padding-left: 63px; font-family: helvetica; font-weight: 200;}


@media (max-width: 760px){
#item-aciklama{   font-size: 14px;
    padding-left: 45px; text-align: justify;
}}


span{margin-right: 20px; font-family: helvetica; font-weight: bolder; color: #fed05b; float: left;}

#tum-hizmetlerimizi{    text-align: center;
    font-size: 18px;
    font-family: helvetica;
    background: #565353;
    max-width: 961px;
    margin: auto;
    margin-top: 60px;
    color: white;
    padding: 5px;}

    #item-33{margin: 10px;     background: white;
    flex-basis: calc(33.333% - 20px); float: left; margin: 10px; margin-bottom: 30px;}

    #item-33-img img{max-width: 100%;}
    #item-33-text{font-size: 16px;
    padding: 0px 0px 5px 9px;
    margin-top: 10px;
    font-family: helvetica;
    font-weight: 700;}
    #item-33-text-2{max-width: 100%;
    padding: 0px 0px 11px 9px;
    font-size: 13px;
    color: #b1b1b1;
    font-family: helvetica;
    font-weight: 600;}


    #item-uclu{display: flex;     background: #f7f7f7;
    flex-wrap: wrap; }


    @media (max-width: 760px){
#cizgi{       width: 65% !important;
}}


#sola{margin-left: 61px;}

  @media (max-width: 760px){
#sola{          margin-left: 45px;

}}

.float{
    position:fixed;
    width:60px;
    height:60px;
    bottom:40px;
    right:40px;
    background-color:#25d366;
    color:#FFF;
    border-radius:50px;
    text-align:center;
  font-size:30px;
    box-shadow: 2px 2px 3px #999;
  z-index:100;
}

.my-float{
    margin-top:16px;
}

.my-float:hover{
   color: #fff;
}

.float:hover{
   color: #fff;
}

 .fa:hover{color: #fff;}



 a.lightbox img {
   }

/* Styles the lightbox, removes it from sight and adds the fade-in transition */

.lightbox-target {
position: fixed;
top: -100%;
width: 100%;
background: rgba(0,0,0,.7);
width: 100%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
 
}

/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */

.lightbox-target img {
margin: auto;
position: absolute;
top: 0;
left:0;
right:0;
bottom: 0;
max-height: 0%;
max-width: 0%;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
  
}

/* Styles the close link, adds the slide down transition */

a.lightbox-close {
display: block;
width:50px;
height:50px;
box-sizing: border-box;
background: white;
color: black;
text-decoration: none;
position: absolute;
top: -80px;
right: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:before {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:after {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}

/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */

.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
  overflow:scroll;     left: 0; 
    z-index: 9;
}

.lightbox-target:target img {
max-height: 100%;
max-width: 100%;
}

.lightbox-target:target a.lightbox-close {
top: 0;
}