@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon/icomoon.eot?srf3rx");
  src: url("../fonts/icomoon/icomoon.eot?srf3rx#iefix") format("embedded-opentype"), url("../fonts/icomoon/icomoon.ttf?srf3rx") format("truetype"), url("../fonts/icomoon/icomoon.woff?srf3rx") format("woff"), url("../fonts/icomoon/icomoon.svg?srf3rx#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* =======================================================
*
* 	Template Style 
*
* ======================================================= */
body {
 font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: #828282;
  background: #fff;
}

#page {
  position: relative;
  width: 100%;
  height: auto;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}


.offcanvas #page {
  overflow: hidden;
  position: absolute;
}

.offcanvas #page:after {
  -webkit-transition: 2s;
  -o-transition: 2s;
  transition: 2s;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 101;
  background: rgba(0, 0, 0, 0.7);
  content: "";
}

a {
  color: #4c80d6;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
a:hover, a:active, a:focus {
  color: #4c80d6;
  outline: none;
  text-decoration: none;
}

p {
  margin-bottom: 20px;
}

h1, h2, h3, h4, h5, h6, figure {
  color: #000;
 
  font-weight: 400;
  margin: 0 0 20px 0;
}

::-webkit-selection {
  color: #fff;
  background: #4c80d6;
}

::-moz-selection {
  color: #fff;
  background: #4c80d6;
}

::selection {
  color: #fff;
  background: #4c80d6;
}


.nav .ust-box { width: 100%; height: auto; float: left; border-top:1px solid #ededed; border-bottom:1px solid #ededed; }

.nav .ust-box .text { width: auto; height: auto; float: left;  margin-top: 16px; margin-right: 10px; font-size: 10pt; color: #888; cursor: pointer; }
.nav .ust-box .text:hover { color: #e30613; }
.nav .ust-box ul li a { width: auto; height: auto; float: left;  margin-top: 16px; margin-right: 10px; font-size: 10pt; color: #888; cursor: pointer; }
.nav .ust-box ul li a :hover { color: #e30613; }

.nav .logo-box { 
    background: #e30613 repeat-x top center;
    text-align: left;
    float: left;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 0px;
}

.ust-block {     width: auto;
    height: auto;
    float: right;
    margin: 10px;
    margin-top: 5px;
    max-width: 52%;  }

.ust-block .icon {         width: 20px;
    height: auto;
    float: left;
    margin-right: 14px;
    margin-top: 8px; }
.ust-block .icon i {     font-size: 15pt;
    color: #c6c6c6;  }

.ust-block .yazi { width: 80%;
    height: auto;
    float: left;
    text-align: left;  }
.ust-block .ince {         width: 100%;
    height: auto;
    float: left;
    font-size: 11pt;
    color: #c6c6c6;
    margin-top: 5px; }
.ust-block .kalin {     width: 100%;
    height: auto;
    float: left;
    font-size: 10pt;
    color: #c6c6c6;
    font-weight: 500; }

.slogan { width: auto; height: auto; float: right; text-align: right; margin-top: 30px; }
.slogan img { width: 100%; height: auto; }

.resimler { width: 250px;
    height: 148px;
    float: right;
    text-align: right;
    margin-top: -17px;
    overflow: hidden; }
.resimler img { width: 100%; height: auto; }


.usterbakan img { width: 90%; height: auto; margin-top: -20px;}
.usterbakan {width: 250px;
    height: 148px;
    float: right;
    text-align: right;
    margin-top: -12px;
    overflow: hidden;}


.nav #logo {
  font-size: 24px;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  font-weight: bold;
  font-weight: 700;
  display: inline-block;
  width: 380px;
 
}
.nav #logo a span {
  color: #4c80d6;
}

.nav #logo img  { width: 100%; height: auto; }

.nav a {

  color: #000;
}


.top-menu { width: 100%; height: auto; display: inline-block; background: #fff; border-top:1px solid #eee; border-bottom:1px solid #eee; }


.social {     width: auto;
    height: 40px;
    float: right;
    margin-top: 5px;
    padding-right: 0px;
    padding-top: 8px;
  }
.social i { font-size: 21px; color: #cdcdcd; margin-left: 2px; margin-right: 2px; cursor: pointer; }
.social i:hover { color: #e30613; }

.navbar-nav {
    height: auto;
    margin: 0px;
}   

.navbar-nav li{
    list-style: none;
    display: block;
    float: left;
    height: auto;
    position: relative;
    border-left: 1px solid #eee;
    
}

.navbar-nav li:last-child{ border-right: 1px solid #eee; }

.navbar-nav li a{
        padding: 18px;
    margin: 0px 0;
    line-height: 150%;
    text-decoration: none;
    height: auto;
    color: #222 !important;
    font-weight: 700;
    font-size: 10pt;
    text-transform: uppercase;

}

.navbar-nav li:hover a{ color: #fff; }
.navbar-nav ul{
    background: #f2f5f6; 
    padding: 0px;
    border-bottom: 1px solid #DDDDDD;
    border-right: 1px solid #DDDDDD;
    border-left:1px solid #DDDDDD;
    border-radius: 0px 0px 3px 3px;
 
     z-index: 1002;
     padding: 10px;
}
.navbar-nav .site-name,.navbar-nav .site-name:hover{
    padding-left: 10px;
    padding-right: 10px;
    color: #FFF;
    text-shadow: 1px 1px 1px #66696B;
    font: italic 20px/38px Georgia, "Times New Roman", Times, serif;
    background: url(images/saaraan.png) no-repeat 10px 5px;
    width: 160px;
    border-right: 1px solid #52BDB5;
}
.navbar-nav .site-name a{
    width: 129px;
    overflow:hidden;
}
.navbar-nav li.facebook{
    background: url(../images/facebook.png) no-repeat 9px 12px;
}
.navbar-nav li.facebook:hover  {
    background: url(../images/facebook.png) no-repeat 9px 12px #3BA39B;
}
.navbar-nav li.yahoo{
    background: url(../images/yahoo.png) no-repeat 9px 12px;
}
.navbar-nav li.yahoo:hover  {
    background: url(../images/yahoo.png) no-repeat 9px 12px #3BA39B;
}
.navbar-nav li.google{
    background: url(../images/google.png) no-repeat 9px 12px;
}
.navbar-nav li.google:hover  {
    background: url(../images/google.png) no-repeat 9px 12px #3BA39B;
}
.navbar-nav li.twitter{
    background: url(../images/twitter.png) no-repeat 9px 12px;
}
.navbar-nav li.twitter:hover  {
    background: url(../images/twitter.png) no-repeat 9px 12px #3BA39B;
}

.navbar-nav li:hover{
 background: #e30613;
}
.navbar-nav li a:hover{
 background: #e30613;
 color:#FFF !important;
}
.navbar-nav .has-dropdown:hover a{ color: #fff; }
.navbar-nav .has-dropdown:hover .dropdown a{ color: #333; }

.navbar-nav li a{
    display: block;
}
.navbar-nav ul li {
    border-right:none;
    border-bottom:1px solid #DDDDDD;
    height:auto;
    display: inline-block; 
    width: 100%;  
    text-align: left;
    line-height: 140%;
}
.navbar-nav ul li a {
    border-right: none;
    color:#000;
   /* text-shadow: 1px 1px 1px #FFF;*/
    border-bottom:1px solid #FFFFFF;
    line-height: 170%;
    padding-top: 5px;
    padding-bottom: 6px;
    word-break: break-all;  
    white-space:normal;
    word-break: break-word;
}

.navbar-nav ul li:hover > a{ color: #FFF !important; }

.navbar-nav ul li:hover{background:#e30613;}
.navbar-nav ul li:last-child { border-bottom: none;}
.navbar-nav ul li:last-child a{ border-bottom: none;}
/* Sub menus */
.navbar-nav ul{
    display: none;
    visibility:hidden;
    position: absolute;
    top: 56px;
    width: 240px;
}

/* Third-level menus */
.navbar-nav ul ul{
    top: 0px;
    left: 100%;
    display: none;
    visibility:hidden;
    border: 1px solid #DDDDDD;
}
/* Fourth-level menus */
.navbar-nav ul ul ul{
    top: 0px;
    left: 100%;
    display: none;
    visibility:hidden;
    border: 1px solid #DDDDDD;
}

.navbar-nav ul li{
    display: block;
    visibility:visible;
    line-height: 140%;
}
@media (min-width: 600px){
.navbar-nav li:hover > ul{
    display: block;
    visibility:visible;
}
}



.social-icons {
  margin: 0;
  padding: 0;
}
.social-icons li {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
}
.social-icons li a {
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
  color: #4c80d6;
  padding-left: 10px;
  padding-right: 10px;
}
.social-icons li a i {
  font-size: 20px;
}

#offcanvas {
  position: fixed;
  z-index: 1901;
  width: 260px;
  background: #d30713;
  top: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 75px 40px 40px 40px;
  padding-left: 20px;
  padding-top: 30px;
  padding-right: 30px;
  overflow-y: auto;
  display: none;
  -moz-transform: translateX(260px);
  -webkit-transform: translateX(260px);
  -ms-transform: translateX(260px);
  -o-transform: translateX(260px);
  transform: translateX(260px);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
@media screen and (max-width: 768px) {
  #offcanvas {
    display: block;
  }
}
.offcanvas #offcanvas {
  -moz-transform: translateX(0px);
  -webkit-transform: translateX(0px);
  -ms-transform: translateX(0px);
  -o-transform: translateX(0px);
  transform: translateX(0px);
}
#offcanvas a {
  color: rgba(255, 255, 255, 0.5);
}
#offcanvas .navbar-nav li a{ color: #fff; }
#offcanvas .navbar-nav .dropdown a{ color: #000; }
#offcanvas a:hover {
  color: rgba(255, 255, 255, 0.8);
}
#offcanvas ul {
  padding: 0;
  margin: 0;
}
#offcanvas ul li {
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
  border-left: none;
}
#offcanvas ul li:last-child { border: none;  }
#offcanvas ul li .dropdown li .dropdown { display: none !important; }

#offcanvas ul li a { font-size: 12pt; }
#offcanvas ul li > ul {
  padding-left: 20px;
  display: none;
}
#offcanvas ul li.offcanvas-has-dropdown > a {
  display: block;
  position: relative;
}
#offcanvas ul li.offcanvas-has-dropdown:after {
  position: absolute;
  right: 0px;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.2);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  font-family: "Font Awesome 5 Free";
  content: "\f067";
  display: inline-block;
  padding-right: 3px;
  vertical-align: middle;
  font-weight: 900;
  top: 16px;
}
#offcanvas ul li.offcanvas-has-dropdown.active a:after {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

.nav-toggle {
  width: 25px;
  height: 25px;
  cursor: pointer;
  text-decoration: none;
  top:0px;
}
.nav-toggle.active i::before, .nav-toggle.active i::after {
  background: #444;
}
.nav-toggle:hover, .nav-toggle:focus, .nav-toggle:active {
  outline: none;
  border-bottom: none !important;
}
.nav-toggle i {
  position: relative;
  display: inline-block;
  width: 25px;
  height: 2px;
  color: #252525;
  font: bold 14px/.4 Helvetica;
  text-transform: uppercase;
  text-indent: -55px;
  background: #252525;
  transition: all .2s ease-out;
}
.nav-toggle i::before, .nav-toggle i::after {
  content: '';
  width: 25px;
  height: 2px;
  background: #252525;
  position: absolute;
  left: 0;
  transition: all .2s ease-out;
}
.nav-toggle.nav-white > i {
  color: #fff;
  background: #FFF;
}
.nav-toggle.nav-white > i::before, .nav-toggle.nav-white > i::after {
  background: #FFF;
}

.nav-toggle i::before {
  top: -10px;
}

.nav-toggle i::after {
  bottom: -10px;
}



.nav-toggle.active i {
  background: transparent;
}

.nav-toggle.active i::before {
  top: 0;
  -webkit-transform: rotateZ(45deg);
  -moz-transform: rotateZ(45deg);
  -ms-transform: rotateZ(45deg);
  -o-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
  background: #fff;
}

.nav-toggle.active i::after {
  bottom: 0;
  -webkit-transform: rotateZ(-45deg);
  -moz-transform: rotateZ(-45deg);
  -ms-transform: rotateZ(-45deg);
  -o-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
  background: #fff;
}

.nav-toggle {
  position: absolute;
  right: 10px;
  top:10px;
  z-index: 21;
  padding: 6px 0 0 0;
  display: block;
  margin: 0 auto;
  display: none;
  height: 44px;
  width: 44px;
  z-index: 2001;
  border-bottom: none !important;
}
@media screen and (max-width: 768px) {
  .nav-toggle {
    display: block;
  }
}

.form-control {
  box-shadow: none;
  background: transparent;
  border: 2px solid rgba(0, 0, 0, 0.1);
  height: 54px;
  font-size: 18px;
  font-weight: 300;
}
.form-control:active, .form-control:focus {
  outline: none;
  box-shadow: none;
  border-color: #4c80d6;
}

.row-pb-md {
  padding-bottom: 4em !important;
}

.row-pb-sm {
  padding-bottom: 2em !important;
}

.loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url(../images/loader.gif) center no-repeat #fff;
}

.js .animate-box {
  opacity: 0;
}

.green { color: #1eb1b9;  }

.brands { width: 100%; height: auto; display: inline-block; padding-top: 20px; margin-bottom: 0px; background: url(../images/ust-zemin.jpg) repeat-x top center;  }
.brands .brand-box { width: 19.4%; height: auto; display: inline-block; cursor: pointer; background: #fff; border: 1px solid #eee; padding: 10px; margin:2px; margin-top: 26px;  }
.brands .brand-box:hover { animation: zoom 500ms 1 alternate both; }

.brands .header { width: 100%; height: auto; display: inline-block;   }
.brands .text { width: auto; height: auto; display: inline-block; font-size: 21pt; color: #000000; font-weight: 600;  }
.brands .line {     width: 224px;
    height: 1px;
    clear: both;
    background-color: #000;
    margin-top: 23px;
    position: relative;
    z-index: 0;  }
.brands .line .line-box {     width: 98px;
    height: 4px;
    float: left;
    background-color: #000;
    position: relative;
    margin-top: -3px; }



.grey {     width: 100%;
    height: auto;
    display: inline-block;
    margin-top: 30px;
    background: #efefef;
    padding-top: 30px;
    padding-bottom: 40px; }

.grey .header { width: 100%; height: auto; display: inline-block;     margin-bottom: 10px;  }
.grey .text { width: auto; height: auto; display: inline-block; font-size: 21pt; color: #000000; font-weight: 600;  }
.grey .line {     width: 224px;
    height: 1px;
    clear: both;
    background-color: #000;
    margin-top: 23px;
    position: relative;
    z-index: 0;  }
.grey .line .line-box {     width: 98px;
    height: 4px;
    float: left;
    background-color: #000;
    position: relative;
    margin-top: -3px; }

.grey .content { width: 100%; height: auto; display: inline-block; margin-top: 10px;  }
.grey .about-image { width: 100%; height: auto; display: inline-block; overflow: hidden;
    position: relative;  border: 2px solid #a9abaa; }
.grey .about-image img { width: 100%; height: auto;  }


.grey .title { width: 100%; height: auto; display: inline-block; padding-left: 10px; font-size: 13pt; color: #333; font-weight: 500;     line-height: 120%;  }
.grey .summary {     width: 100%;
    height: 218px;
    display: inline-block;
    padding-left: 20px;
    font-size: 11pt;
    color: #333;
    font-weight: 500;
    line-height: 150%; overflow: hidden;  }
.grey .more { width: 100%; height: auto; display: inline-block; padding-left: 20px; font-size: 11pt; color: #a1a1a1; font-weight: 500; margin-top: 20px;  }


.grey .news .about-image { height: 132px; overflow: hidden;  }
.grey .news .about-image img { border: none;  }

.grey .news { width: 100%; height: auto; border-left: 2px solid #ddd; padding-left: 26px; margin-left: 0px;  } 
.grey .news .title { padding-left: 0px; margin-top: 10px; font-weight: 600;  }
.grey .news .summary { padding-left: 0px; margin-top: 10px; height: 48px; overflow: hidden; font-size: 11pt; font-weight: 500;  }
.grey .news .more { padding-left: 0px; margin-top: 10px;  }




.baskandan { background: #fff; height: auto; display: inline-block; width: 100%; text-align: left;     padding-top: 30px;
    padding-bottom: 60px;  }
.baskandan .heading{width:100%;height:auto;display:inline-block;background:#f5f5f5;padding:15px 80px 48px 40px;}
.baskandan .heading .footer_line{width:100%;height:1.5px;float:left;clear:both;background-color:#fff;margin-top:-30px;position:relative;z-index:0;padding-left:10px;}
.baskandan .ustbilgi{width:auto;height:auto;color:#969696;font-size:13pt;font-weight:400;position:relative;z-index:1;text-align:left;border-bottom:1px solid #969696;display:inline-block;margin-bottom:10px;padding:30px 10px 11px 0;}
.baskandan h2{width:auto;height:auto;color:#222;font-size:25pt;font-weight:600;margin-bottom:5px;position:relative;z-index:1;text-align:left;padding:10px 10px 10px 0;}
.baskandan .altbilgi{width:auto;height:160px;float:left;color:#000;font-size:13pt;font-weight:400;margin-bottom:20px;text-align:left;line-height:165%;overflow:hidden;}

.baskandan .altbilgi img {display: none;}
.baskandan .tumu { width: 100%; height: auto; float: left; margin-top: 10px; font-size: 12pt; color: #fc5d67; }
.baskandan .altbutton {width: auto; height: auto; float: left; margin-top: 25px; margin-right: 15px; font-size: 12pt; padding:8px; padding-left: 10px; padding-right: 10px; color: #FFF; background:#fc5d67; border-radius: 3px; }



  section.il_ana_kutu {background: #fff; height: auto; display: inline-block; width: 100%; text-align: center; padding-top: 20px; padding-bottom: 20px;}
  section.il_ana_kutu .baskan_bilgileri {padding-bottom: 15px;float: left;}
  section.il_ana_kutu .baskan_bilgileri img {width: 100%;}
  section.il_ana_kutu .baskan_bilgileri .baslik {width: 100%; height: auto; float: left; font-size: 20pt; font-weight: 600; color:#303030; text-align: left; padding-top: 15px; padding-left: 15px;text-transform: uppercase;}
  section.il_ana_kutu .baskan_bilgileri .unvan {width: 100%; height: auto; float: left; font-size: 15pt; font-weight: 400; color:#505050; text-align: left; padding-top: 15px; padding-left: 15px;}
  section.il_ana_kutu .baskan_linkler {width: 100%; height: auto; float: left;padding-top: 15px; border-top: 1px solid #c3c3c3;padding-bottom: 10px;}
  section.il_ana_kutu .baskan_linkler .satir {width:100%;float: left;text-align: left; padding:10px;font-weight: 600; font-size: 13px;color: #454545; padding-top: 3px;}
  section.il_ana_kutu .baskan_linkler .satir img {float: left;width: 18px;height: auto; margin-right: 10px;}
  section.il_ana_kutu .baskan_linkler .satir span {margin-top: 3px;float: left;}

  section.il_ana_kutu .ilblog1 {background: #eee;float: left;}
  section.il_ana_kutu .ilblog1 .blogbaslik_kutu .baslik {width:50%; height: auto; float: left; font-size: 18pt; color:#606060; font-weight: 600;text-align: left; padding-left: 20px; padding-top: 20px; padding-bottom: 20px;}
  section.il_ana_kutu .ilblog1 .blogbaslik_kutu .tumu {width:20%; height: auto; float: right; font-size: 14pt; color:#606060; font-weight: 600;text-align: right; padding-right: 20px; padding-top: 20px; padding-bottom: 20px;}
  section.il_ana_kutu .ilblog1 .blogalani {padding-left: 20px; padding-right: 20px; float: left; }


  .ilblognews { width: 100%; height: auto; float: left;cursor: pointer; }

  .ilblognews .icerik { width: 100%; height: auto; float: left; padding: 10px; padding-top: 20px; padding-bottom: 20px; text-align: left;  }
  .ilblognews .icerik .title {width: 100%; height: auto; font-size: 17pt; color: #222; margin-bottom: 15px; font-weight: 600; line-height: 130%;}
  .ilblognews .icerik .ozet {width: 100%; height: auto; max-height: 90px; overflow: hidden; font-size: 12pt; color: #888; margin-bottom: 15px; line-height: 140%;}
  .ilblognews .icerik .devam { width: 100%; height: auto; font-size: 12pt; color: #e30613;  }
  .ilblognews .icerik .devam i { width: auto; height: auto; margin-left: 5px; font-size: 9pt; color: #e30613; }

  .ilblognews .image { width: 100%; height: 240px; float: left; overflow: hidden; }
  .ilblognews .image img { width: 100%; height: auto; transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);  }

  .ilblognews:hover .title { color: #e30613; transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);  }
  .ilblognews:hover .devam i { margin-left: 15px;  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }
  .ilblognews:hover .image img {
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 
    transform: scale(1.1);
  }

  .tabbloglar .panel-default > .panel-heading {background: transparent;border:0px; border-bottom: 1px solid #e50019; padding-bottom: 0px;}
  .panel-default {border:0px;}
  .nav-tabs > li {  padding-left: 5px; padding-right: 5px;}
  .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:0px;border-radius: 0px;outline: none}
  .nav-tabs > li > a {border-radius: 0px;}
  .nav-tabs > li.active > a {background: #e30613; color: #FFF; font-size: 16pt;}
  .nav-tabs > li.active > a:focus {outline:  none !important;background: transparent !important}
  .nav-tabs > li > a:hover {background:transparent;box-shadow: none; border-radius:0px; border: 0px;}

  ul.tabbasliklar li {width: auto; height: auto; float: left; list-style-type: none; }
  ul.tabbasliklar li a {color:#CCC;padding: 10px; padding-left: 20px; padding-right: 20px; text-align: center; float: left; font-size: 18pt; width: 100%; text-transform: uppercase;}
  ul.tabbasliklar li.active a {background: #e30613; color:#FFF;}
  .panel-body {background: #f0f0f0}
  .tumubloglar {background: #d7d7d7; padding-top: 10px; padding-bottom: 10px; font-size: 12pt;font-weight: 600}
  .tumubloglar a {color:#000;text-decoration: none;}

  .projectvideo iframe {width: 100%;height: 450px;float: left;}

.boxy { width: 100%; height: auto; float: left; padding: 10px; cursor: pointer; }

.boxy .icerik { width: 100%; height: auto; float: left; padding: 10px; padding-top: 20px; padding-bottom: 20px; text-align: left;  }
.boxy .icerik .sayi { width: auto; height: auto; font-size: 25pt; color: #e30613;  margin-bottom: 35px;     font-weight: 500;  }
.boxy .icerik .title { width: 100%; height: auto; font-size: 40pt; color: #222;  margin-bottom: 35px; font-weight: 600; }
.boxy .icerik .ozet {     width: 100%;
    height: auto;
    font-size: 15pt;
    color: #888;
    margin-bottom: 35px;
    line-height: 160%;  }
.boxy .icerik .devam { width: 100%; height: auto; font-size: 12pt; color: #e30613;  }
.boxy .icerik .devam i { width: auto; height: auto; margin-left: 5px; font-size: 9pt; color: #e30613; }


.boxy .image { width: 100%; height: auto; float: left; overflow: hidden;  }
.boxy .image img { width: 100%; height: auto; transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);  }

.boxy:hover .title { color: #e30613; transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);  }
.boxy:hover .devam i { margin-left: 15px;  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }
.boxy:hover .image img {
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 
    transform: scale(1.1);
}


.news { width: 100%; height: auto; float: left;cursor: pointer; }

.news .icerik { width: 100%; height: auto; float: left; padding: 10px; padding-top: 20px; padding-bottom: 20px; text-align: left;  }
.news .icerik .title { width: 100%;
    height: auto;
    font-size: 17pt;
    color: #222;
    margin-bottom: 15px;
    font-weight: 600;
    line-height: 130%; }
.news .icerik .ozet {     width: 100%;
    height: auto;
    font-size: 12pt;
    color: #888;
    margin-bottom: 25px;
    line-height: 160%;  }
.news .icerik .devam { width: 100%; height: auto; font-size: 12pt; color: #e30613;  }
.news .icerik .devam i { width: auto; height: auto; margin-left: 5px; font-size: 9pt; color: #e30613; }


.news .image { width: 100%; height: auto; float: left; overflow: hidden;  }
.news .image img { width: 100%; height: auto; transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);  }

.news:hover .title { color: #e30613; transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);  }
.news:hover .devam i { margin-left: 15px;  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }
.news:hover .image img {
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 
    transform: scale(1.1);
}

.map { width: 100%; height: auto; float: left;}

#ilteskilat .kutu {width: 100%; height: auto; float: left; border-bottom:1px solid #eee; text-align: center; padding-bottom: 20px; padding-left: 20px; padding-right: 20px;}
#ilteskilat .baslik {width: 100%; height: auto; float: left; font-weight: 600; font-size: 16pt; line-height: 165%; margin-bottom: 20px;color:#000;}
#ilteskilat small {width:100%;float:left; text-align:center; margin-bottom: 20px;}


.footer { width: 100%; height: auto; display: inline-block;    }
.footer .grand_footer { width: 100%;
    height: auto;
    text-align: center;
    background: #e30613 no-repeat top center;
    padding-bottom: 10px;
    padding-top: 10px;  }

.footer .logo { width: 100%; height: auto; float: left;   }
.footer .logo img { width: 100%; height: auto; }

.footer .phone {     width: 91%;
    height: auto;
    display: flex;
    justify-content: center;
    margin-top: 20px;
    border-left: 1px solid #cc1c27;
    border-right: 1px solid #cc1c27;
    padding-left: 20px;
    padding-right: 20px; padding-top: 20px;
    padding-bottom: 20px;  }
.footer .phone img { width: 100%; height: auto; }

.footer .phone .text-box { width: auto; height: auto; float: left; margin: 10px; }
.footer .phone .text-box .icon { width: auto; height: auto; float: left; font-size: 12pt; color: #fff; font-weight: 500;  }
.footer .phone .text-box .text {     width: auto;
    height: auto;
    float: left;
    font-size: 12pt;
    color: #fff;
    margin-left: 10px;
    font-weight: 500;  }

.footer .adress .text-box { width: auto; height: auto; float: left; margin: 10px;     margin-top: 20px; }
.footer .adress .text-box .icon { width: auto; height: auto; float: left; font-size: 16pt; color: #fff; font-weight: 500;  }
.footer .adress .text-box .text {     width: 85%;
    height: auto;
    float: left;
    font-size: 12pt;
    color: #fff;
    margin-left: 10px;
    font-weight: 500;
    line-height: 150%;
    text-align: left;
    margin-top: -17px;  }


.footer .adress {  width: 100%; height: auto; float: right; margin-top: 25px;    }
.footer .adress img { width: 100%; height: auto; }

.footer .small_footer { width: 100%; height: auto; text-align: center; background: #8e0c14; padding-top: 10px; padding-bottom: 10px;  }
.footer .small_footer .copyright { width: auto; height: auto; float: left; margin-right: 10px; font-size:10pt; color: #fff; font-weight: 500; }
.footer .small_footer .author { width: auto; height: auto; float: right; margin-right: 10px; font-size:10pt; color: #fff; font-weight: 500; }

.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus { background-color: #e9e9e9;
    border-color: #dcdcdc; color: #080808;  }




.grey .about .about-image:before {
       background-color: rgba(255, 255, 255, 0.5);
    left: -55%;
    content: "";
    height: 150%;
    opacity: 0;
    position: absolute;
    top: -37%;
    transition: all 0.3s ease-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -webkit-transform: rotate(-82deg);
    -moz-transform: rotate(-82deg);
    -ms-transform: rotate(-82deg);
    -o-transform: rotate(-82deg);
    transform: rotate(-75deg);
    width: 100%;
    z-index: 1;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}
.grey .about .content:hover .about-image:before { opacity: 1; }

.grey .about .content:hover .about-image img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.grey .about .content .about-image img {
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.grey .news .about-image:before {
    background-color: rgba(255, 255, 255, 0.5);
    left: -55%;
    content: "";
    height: 150%;
    opacity: 0;
    position: absolute;
    top: -37%;
    transition: all 0.3s ease-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -webkit-transform: rotate(-82deg);
    -moz-transform: rotate(-82deg);
    -ms-transform: rotate(-82deg);
    -o-transform: rotate(-82deg);
    transform: rotate(-75deg);
    width: 100%;
    z-index: 1;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}
.grey .news .content:hover .about-image:before { opacity: 1; }

.grey .news .content:hover .about-image img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.grey .news .content .about-image img {
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

/* Chrome, Safari, Opera */
  @-webkit-keyframes zoom {
      from {
        -webkit-transform: scale(1,1);
      }
      to {
        -webkit-transform: scale(1.1,1.1);
      }
  }

  /* Standard syntax */
  @keyframes zoom {
     from {
          transform: scale(1,1);
     }
     to {
          transform: scale(1.1,1.1);
     }
  }

@media (max-width: 768px) {

    .menu-1 { display: none; }
}

@media (min-width: 320px) and (max-width: 500px) {

  .ust-box { display: none;  }
  .mobilegosterme { display: none;  }
  .nav #logo { width: 80%;  }
  .navbar-toggle {color:#FFF;}
  .container-mobile { width: 100%;  }

  .projects .owl-theme .owl-controls .owl-prev { left: 0px;  }
  .projects .owl-theme .owl-controls .owl-next { right: 0px;  }

  .baskandan .heading { padding-right: 10px; }
  .projects .item {width: 100% !important; margin-left: 0px !important; margin-right: 0px !important; padding-left: 15px;padding-right: 15px;  }

  .social {margin-top: 2px; margin-right: 0px; width: 100%; text-align: center;}
  .social i { font-size: 21px; margin-left: 5px; }


  .navbar-nav ul {position: relative; top: 0px; float: left; width: 100%;}

  .navbar-nav li { border: none !important;  }

  section.detay_baslik .box-bg { display: none;  }

  .brands .brand-box { width: 138px; margin-top: 9px; padding-bottom: 10px;  }
  .grey .summary {  padding-left: 0px; padding-top: 11px; height: 212px;   }
  .grey .more { padding-left: 0px; margin-top: 10px; margin-bottom: 20px;  }

  .grey .news { border:none; padding-left: 0px; margin-left: -15px; }
  .grey .news .summary { height: 60px;  }
  .grey .news .more { margin-bottom: 0px;  }

  .footer .logo { width: 80%;  }
  .footer .phone { width: 100%; margin-top: 4px; border:none; padding-left: 10px; padding-right: 0px;  }
  .footer .adress {width: 97%; height: auto; float: right; margin-top: 0px;}

  .footer .small_footer .author { margin-bottom: 10px;  }

  section.ikili_kisim .yan_kutu { min-height: 10px !important; margin-bottom: 20px;  }
  section.detay_kutu { border:none !important;  }
  #blog article .resimvebaslik {  margin-bottom: 20px !important;  }

  section.ikili_kisim .content { padding-left: 0px !important; padding-top: 10px !important;  }

  .iletisim_form { padding-bottom: 70px !important;  }
  .iletisim_form .btn { float: left !important;  }
  .iletisim_form .form-group { width: 96% !important;  }
}


@media (min-width: 424px) and (max-width: 475px) {

   .ust-box { display: none;  }
   .mobilegosterme { display: none;  }
   .nav #logo { width: 100%;  }

   .container-mobile { width: 100%;  }

   .projects .owl-theme .owl-controls .owl-prev { left: 0px;  }
   .projects .owl-theme .owl-controls .owl-next { right: 0px;  }

   .projects .item {    width: 100% !important; margin-left: 0px !important; margin-right: 0px !important; padding-left: 15px;
    padding-right: 15px;  }

    .baskandan .heading { padding-right: 10px; }

    .nav-toggle {     top: 20px !important; }
    .nav #logo img { width: 90% !important}
    .social {      margin-top: 2px;
    margin-right: 0px;
    width: 100%;
    text-align: center; }
    .social i { font-size: 21px; margin-left: 5px; }

    .navbar-nav ul {
        position: relative;
    top: 0px;
    float: left;
    width: 100%;
    }

    section.detay_baslik .box-bg { display: none;  }

    .brands .brand-box { width: 138px; margin-top: 9px; padding-bottom: 10px;  }
    .grey .summary {  padding-left: 0px; padding-top: 11px; height: 212px;   }
    .grey .more { padding-left: 0px; margin-top: 10px; margin-bottom: 20px;  }

    .grey .news { border:none; padding-left: 0px; margin-left: -15px; }
    .grey .news .summary { height: 60px;  }
    .grey .news .more { margin-bottom: 0px;  }

    .footer .logo { width: 80%;  }
    .footer .phone { width: 100%; margin-top: 4px; border:none; padding-left: 10px; padding-right: 0px;  }
    .footer .adress {
    width: 97%;
    height: auto;
    float: right;
    margin-top: 0px;
    }

    .footer .small_footer .author { margin-bottom: 10px;  }

    section.ikili_kisim .yan_kutu { min-height: 10px !important; margin-bottom: 20px;  }
    section.detay_kutu { border:none !important;  }
    #blog article .resimvebaslik {  margin-bottom: 20px !important;  }

    section.ikili_kisim .content { padding-left: 0px !important; padding-top: 10px !important;  }

    .iletisim_form { padding-bottom: 70px !important;  }
    .iletisim_form .btn { float: left !important;  }
    .iletisim_form .form-group { width: 96% !important;  }
}


@media (max-width: 479px) {
 .slick-list {height: 250px !important;}
 .slider-for div {height: 250px !important;;}
 .slider-for div img {height: 250px !important;}
 section.il_ana_kutu .ilblog1 {margin-left: -15px; margin-right: -15px; margin-top: 10px;}
 ul.tabbasliklar li {width: 50% !important;background: #eee;}
 ul.tabbasliklar li a {font-size: 14pt !important; height: 50px;display: flex; justify-content: center; align-items: center;}
 .nav .logo-box {padding-top: 10px !important; padding-bottom: 10px !important;}
 .navbar-nav ul ul {left:0px; background: #6d0208;}
 .navbar-nav ul li {background: #6d0208 !important;}
 .navbar-nav ul li ul li {background: #3e0105 !important}
 .navbar-nav > li > .dropdown-menu {padding:0px;}
 .nav-off-canvas .navbar-nav li a {background: transparent; color:#FFF !important;}
 .navbar-nav ul li:hover a{background: transparent; color:#FFF !important;}
}


@media (min-width: 600px) and (max-width: 800px) {

    .nav-toggle {     top: 15px  !important; }

    .social {          margin-top: 2px;
    margin-right: 34px; }
    .social i { font-size: 21px; margin-left: 5px; }

    .navbar-nav ul {
        position: relative;
    top: 0px;
    float: left;
    
    }


   .slogan { width: 118px; margin-top: 45px;  }

    .iletisimust { width: 170px !important;  }

    .ust-block .icon {
    width: 20px;
    height: auto;
    float: left;
    margin-right: 14px;
    margin-top: 8px;
}

    .ust-block .yazi {
    width: 80%;
    height: auto;
    float: left;
    text-align: left;
}

    .ust-block { width: 215px;
    height: auto;
    float: right;
    margin: 0px;
    margin-top: 5px;
    text-align: right;  }

    .ust-block .ince {
    width: 100%;
    height: auto;
    float: left;
    font-size: 11pt;
    color: #c6c6c6;
    margin-top: 5px;
}

    .ust-block .kalin {
    width: 100%;
    height: auto;
    float: left;
    font-size: 9pt;
    color: #c6c6c6;
    font-weight: 500;
}

    .grey .about { padding-right: 28px;
    border-right: 2px solid #ddd;
    margin-right: 30px;  }

    .grey .about-image {     height: 155px; overflow: hidden; position: relative; z-index: 0; }


    .brands .brand-box { width: 137px; margin-top: 9px; padding-bottom: 10px;  }
    .grey .summary {  padding-left: 0px; padding-top: 11px; height: 103px;   }
    .grey .more { padding-left: 0px; margin-top: 10px; margin-bottom: 20px;  }

    .grey .news { border:none; padding-left: 0px; margin-left: -15px; }
    .grey .news .summary { height: 60px;  }
    .grey .news .more { margin-bottom: 0px;  }

    .footer .logo { width: 80%;  }
    .footer .phone { width: 100%; margin-top: 34px; padding-left: 10px; padding-right: 0px;  }
    .footer .adress {
    width: 96%;
    height: auto;
    float: right;
    margin-top: 31px;
    }

    .footer .small_footer .author { margin-bottom: 10px;  }
    section.detay_baslik h1 { width: 80%;  }
 
    #blog article .resimvebaslik {  margin-bottom: 20px !important;  }

     section.ikili_kisim .content { padding-left: 0px !important; padding-top: 10px !important;  }

    .iletisim_form { padding-bottom: 70px !important;  }
    .iletisim_form .btn { float: left !important;  }
    .iletisim_form .form-group { width: 96% !important;  }


}

@media (min-width: 900px) and (max-width: 1024px) {

  .brands .brand-box { width: 18.4%; }

}