header#header .container nav .logo, header#header .container nav > ul, header#header .container nav > ul > li > a, section#duyurular .container .row .col-3 .item .contLeft, section#bloglar .container .tumBloglar, footer#footer .container .subfooter .subright > span, footer#footer .container .subfooter .subright > span ul li a, section#detay-sablon .container .row #sablon1 .col-4, section#detay-sablon .container .row #sablon1 .col-8 .technologies ul, section#detay-sablon .container .row #sablon2 .content .table table tbody tr td .check, section#detay-sablon .container .row #sablon2 .content .table table tbody tr td .times, section#detay-sablon .container .links a.box, section#altsayfa-referanslar .container .row .box > a .title, section#altsayfa-referanslar .container .row .box > a .title .incele {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center
}

body {
  background-color: #fff;
  position: relative;
  z-index: -1
}

nav#mobil-menu {
  position: fixed;
  left: auto;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 240px;
  overflow-x: hidden;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  display: block;
  padding: 15px;
  background-image: linear-gradient(0deg, #000, #242424);
  box-shadow: inset 10px 0px 12px -6px rgba(1,1,12,0.62);
  transition: .3s all;
  -webkit-transition: .3s all
}

  nav#mobil-menu .menu-img {
    width: 100%;
    padding: 5px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    text-align: center;
    border-bottom: 2px solid #fff000
  }

  nav#mobil-menu ul {
    display: flex;
    flex-wrap: wrap
  }

    nav#mobil-menu ul li {
      display: flex;
      width: 100%;
      position: relative
    }

      nav#mobil-menu ul li a {
        width: 100%;
        padding: 10px;
        text-decoration: none;
        font-size: 16px;
        color: #fff;
        text-shadow: rgba(0,0,0,0.2) 0px 1px 2px;
        z-index: 1;
        border-bottom: 1px solid rgba(238,238,238,0.19)
      }

      nav#mobil-menu ul li .dropdown-expander {
        font-size: 14px;
        height: 100%;
        width: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 5;
        color: #fff;
        cursor: pointer;
        border-left: 1px solid #cdcdcd
      }

      nav#mobil-menu ul li + .dropdown {
        position: absolute;
        top: 0;
        left: 100%;
        height: 100%;
        width: 240px;
        padding: 15px;
        display: none;
        box-shadow: inset 10px 0px 12px -6px rgba(1,1,12,0.62);
        background-image: linear-gradient(0deg, #000, #2a2a2a)
      }

        nav#mobil-menu ul li + .dropdown button {
          background: transparent;
          border: 1px solid rgba(238,238,238,0.38);
          font-size: 24px;
          vertical-align: middle;
          padding: 2px 8px;
          border-radius: 10px;
          outline: none;
          cursor: pointer;
          color: #fff
        }

          nav#mobil-menu ul li + .dropdown button + span {
            padding: 5px;
            vertical-align: middle;
            text-align: center;
            width: 180px;
            white-space: nowrap;
            display: inline-block;
            color: #fff;
            font-size: 18px;
            font-weight: bold;
            text-shadow: 0 1px 1px #666
          }

        nav#mobil-menu ul li + .dropdown li a {
          font-size: 16px;
          font-weight: 400
        }

header#header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  background: #333;
  background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0, transparent 100%);
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0, transparent 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0, transparent 100%)
}

  header#header .container {
    width: 90%;
    margin: 0 auto
  }

    header#header .container nav {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start
    }

      header#header .container nav .logo, header#header .container nav .contact-tel {
        flex: 1 1 0;
        height: 5.7em
      }

      header#header .container nav .logo {
        flex-wrap: wrap;
        flex-grow: inherit;
        text-decoration: none
      }

        header#header .container nav .logo img {
          padding: 15px 0 15px;
        }

        header#header .container nav .logo h1.sub-title {
          margin: 0;
          margin-top: 4px;
          font-size: 22px;
          font-weight: 300;
          color: white
        }

@media screen and (max-width: 769px) {
  header#header .container nav .logo {
    order: 2
  }

    header#header .container nav .logo img {
      width: 220px;
      height: auto
    }

    header#header .container nav .logo h1.sub-title {
      margin-top: -9px;
      font-size: 20px;
      white-space: nowrap
    }
}

header#header .container nav > ul {
  flex: 1 1 0;
  flex-wrap: wrap;
  flex-basis: auto
}

  header#header .container nav > ul > li > a {
    flex: 1 1 0;
    height: 5em;
    padding: 10px;
    letter-spacing: 1.2px;
    text-decoration: none;
    color: white;
    position: relative;
    text-transform: uppercase;
    -webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,0.1);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.1);
    font-size: 16px
  }

    header#header .container nav > ul > li > a span.dropdown-expander {
      font-size: 13px;
      margin-left: 5px;
      transition: .3s all
    }

  header#header .container nav > ul > li ul {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    transform: translateY(25px);
    transition: all .3s ease;
    border-top: 5px solid #fff000;
    width: auto;
    white-space: nowrap;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2)
  }

    header#header .container nav > ul > li ul li {
      display: flex;
      border-bottom: 1px solid #e5e5e5;
      position: relative
    }

      header#header .container nav > ul > li ul li a {
        padding: 10px;
        background-color: white;
        color: black;
        width: 100%;
        text-decoration: none;
        font-size: 14px;
        font-weight: 300
      }

        header#header .container nav > ul > li ul li a:hover {
          color: #dd0000
        }

        header#header .container nav > ul > li ul li a span.dropdown-expander i {
          font-size: 13px;
          margin-left: 5px;
          transition: .3s all
        }

      header#header .container nav > ul > li ul li:hover a span.dropdown-expander i {
        transform: rotate(270deg)
      }

      header#header .container nav > ul > li ul li:hover ul {
        opacity: 1;
        visibility: visible;
        transform: translateY(0px);
        border-top: none
      }

    header#header .container nav > ul > li ul ul {
      top: 0;
      left: 100%;
      z-index: 10
    }

  header#header .container nav > ul > li:hover > a {
    background-color: rgba(0,0,0,0.4)
  }

    header#header .container nav > ul > li:hover > a span.dropdown-expander {
      transform: rotate(180deg)
    }

  header#header .container nav > ul > li:hover > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px)
  }

@media screen and (max-width: 950px) {
  header#header .container nav > ul > li > a {
    font-size: 12px
  }
}

@media screen and (max-width: 769px) {
  header#header .container nav > ul {
    display: none
  }
}

header#header .container nav .mobil-bar {
  display: none;
  flex: 1 1 0;
  flex-wrap: wrap;
  flex-basis: auto;
  height: 85px;
  order: 3;
  align-items: center;
  justify-content: flex-end
}

  header#header .container nav .mobil-bar .bar {
    padding: 10px;
    cursor: pointer;
    font-size: 35px;
    color: #fff
  }

@media screen and (max-width: 769px) {
  header#header .container nav .mobil-bar {
    display: flex
  }
}

header#header .container nav .contact-tel {
  display: flex;
  align-items: center;
  justify-content: flex-end
}

  header#header .container nav .contact-tel a {
    text-decoration: none;
    font-size: 14px;
    color: #fff
  }

    header#header .container nav .contact-tel a i {
      margin-right: 5px;
      font-size: 14px;
      transform: rotate(90deg)
    }

    header#header .container nav .contact-tel a span {
      font-weight: 600
    }

@media screen and (max-width: 769px) {
  header#header .container nav .contact-tel {
    flex: 0 0 100%;
    max-width: 100%;
    height: 40px;
    align-items: center;
    justify-content: center;
    order: 0
  }
}

section#slider {
  position: relative
}

  section#slider .container {
    position: relative;
    height: 100vh;
    overflow: hidden
  }

  section#slider:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 86px;
    width: 100%;
    z-index: 9;
    background-image: url(../img/slider-bt.png);
    background-repeat: no-repeat;
    background-position: center bottom
  }

section#sub-slider {
  padding: 30px 0;
  background: #fff
}

  section#sub-slider .container {
    width: 90%;
    margin: 0 auto;
    text-align: center;
    font-size: 15px
  }

section#hizmetler {
  padding: 60px 0;
  background: #fff
}

  section#hizmetler .container {
    width: 90%;
    margin: 0 auto;
    position: relative
  }

    section#hizmetler .container h2 {
      font-size: 26px;
      text-align: center;
      font-weight: 500
    }

    section#hizmetler .container .subTitle {
      font-size: 14px;
      line-height: 1;
      color: #4c545f;
      text-align: center;
      margin-top: 15px
    }

      section#hizmetler .container .subTitle:before, section#hizmetler .container .subTitle:after {
        width: 75px;
        height: 1px;
        background: #4c545f;
        content: '';
        display: inline-block;
        top: -4px;
        position: relative
      }

      section#hizmetler .container .subTitle:before {
        margin-right: 20px
      }

      section#hizmetler .container .subTitle:after {
        margin-left: 20px
      }

    section#hizmetler .container .navCont {
      position: absolute;
      top: 30px;
      right: 0
    }

      section#hizmetler .container .navCont.disabled {
        display: none
      }

      section#hizmetler .container .navCont button {
        background-color: transparent;
        border: none;
        font-size: 20px;
        outline: none;
        cursor: pointer
      }

        section#hizmetler .container .navCont button.disabled {
          opacity: .2;
          cursor: auto
        }

    section#hizmetler .container .row {
      display: flex;
      margin-top: 40px
    }

      section#hizmetler .container .row .col-3 {
        font-size: 16px;
        color: #333d40;
        height: 270px;
        width: 270px;
        margin: 0 auto;
        border: 10px solid #2d3640;
        padding: 20px;
        border-radius: 100%;
        cursor: pointer
      }

        section#hizmetler .container .row .col-3 .min-border {
          display: flex;
          flex-wrap: wrap;
          border: 2px solid rgba(255,231,175,0.8);
          overflow: hidden;
          height: 100%;
          border-radius: 100%;
          transition: all 300ms ease-in-out
        }

          section#hizmetler .container .row .col-3 .min-border > a {
            display: flex;
            width: 100%
          }

          section#hizmetler .container .row .col-3 .min-border .image {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            flex: 0 0 100%;
            max-width: 100%
          }

            section#hizmetler .container .row .col-3 .min-border .image .img {
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
              width: 80px;
              border-radius: 50%;
              margin: 0 auto;
              transition: .3s all
            }

          section#hizmetler .container .row .col-3 .min-border i {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            flex: 0 0 100%;
            max-width: 100%;
            padding-bottom: 10px;
            font-size: 50px;
            color: #f7b71e
          }

          section#hizmetler .container .row .col-3 .min-border .hizmetAd {
            display: table;
            margin: 0 auto;
            padding-top: 10px;
            font-size: 18px;
            font-weight: 600;
            position: relative
          }

            section#hizmetler .container .row .col-3 .min-border .hizmetAd:after {
              content: attr(data-hover);
              position: absolute;
              z-index: 2;
              display: block;
              top: 10px;
              left: 0;
              max-width: 0;
              color: #FFF;
              white-space: nowrap;
              overflow: hidden;
              height: 50px;
              transition: all 300ms ease-in-out
            }

          section#hizmetler .container .row .col-3 .min-border .hizmetText {
            height: 40px;
            margin-top: -15px;
            padding: 0 25px;
            font-size: 13px;
            text-align: center;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-height: 19px;
            overflow: hidden;
            -webkit-box-orient: vertical
          }

        section#hizmetler .container .row .col-3:hover .min-border {
          background: #0055ff;
        }

          section#hizmetler .container .row .col-3:hover .min-border .image .img {
            filter: grayscale(1)
          }

          section#hizmetler .container .row .col-3:hover .min-border i {
            color: #fff
          }

          section#hizmetler .container .row .col-3:hover .min-border .hizmetAd:after {
            max-width: 100%
          }

          section#hizmetler .container .row .col-3:hover .min-border .hizmetText {
            color: #fff
          }

section#duyurular {
  padding: 80px 0;
  background-color: #f4f5f7
}

  section#duyurular .container {
    width: 90%;
    margin: 0 auto
  }

    section#duyurular .container h2 {
      font-size: 26px;
      text-align: center;
      font-weight: 500
    }

    section#duyurular .container .subTitle {
      font-size: 14px;
      line-height: 1;
      color: #4c545f;
      text-align: center;
      margin: 15px auto
    }

      section#duyurular .container .subTitle:before, section#duyurular .container .subTitle:after {
        width: 75px;
        height: 1px;
        background: #4c545f;
        content: '';
        display: inline-block;
        top: -4px;
        position: relative
      }

      section#duyurular .container .subTitle:before {
        margin-right: 20px
      }

      section#duyurular .container .subTitle:after {
        margin-left: 20px
      }

    section#duyurular .container .row {
      display: flex;
      flex-wrap: wrap
    }

      section#duyurular .container .row .col-3 {
        flex: 0 0 33.33%;
        max-width: 33.33%;
        padding: 15px
      }

        section#duyurular .container .row .col-3 .item {
          display: flex;
          flex-wrap: wrap;
          -webkit-box-shadow: 0 15px 20px 0 rgba(40,60,98,0.1);
          box-shadow: 0 15px 20px 0 rgba(40,60,98,0.1);
          color: inherit;
          text-decoration: none;
          padding: 10px;
          background-color: #fff
        }

          section#duyurular .container .row .col-3 .item .contLeft {
            flex: 0 0 30%;
            max-width: 30%
          }

          section#duyurular .container .row .col-3 .item .contRight {
            flex: 0 0 70%;
            max-width: 70%;
            padding: 10px
          }

            section#duyurular .container .row .col-3 .item .contRight .title {
              font-size: 20px;
              font-weight: 600;
              text-align: center;
              margin-bottom: 15px;
              position: relative
            }

              section#duyurular .container .row .col-3 .item .contRight .title:before {
                content: '';
                position: absolute;
                bottom: -6px;
                left: 10px;
                width: 35px;
                height: 2px;
                background-color: #f02b2b;
                transition: .3s all
              }

            section#duyurular .container .row .col-3 .item .contRight .content {
              font-size: 13px;
              display: -webkit-box;
              -webkit-line-clamp: 6;
              line-height: 19px;
              overflow: hidden;
              -webkit-box-orient: vertical
            }

          section#duyurular .container .row .col-3 .item:hover {
            box-shadow: 0 15px 20px 0 rgba(40,60,98,0.2)
          }

            section#duyurular .container .row .col-3 .item:hover .contRight .title:before {
              width: 50px
            }

@media (max-width: 769px) {
  section#duyurular .container .row .col-3 {
    flex: 0 0 50%;
    max-width: 50%
  }
}

@media (max-width: 600px) {
  section#duyurular .container .row .col-3 {
    flex: 0 0 100%;
    max-width: 100%
  }
}

@media (max-width: 769px) {
  section#duyurular .container {
    width: 95%
  }
}

section#referanslar {
  padding: 60px 0;
  background: #fff
}

  section#referanslar .container {
    width: 90%;
    margin: 0 auto
  }

    section#referanslar .container h2 {
      font-size: 26px;
      text-align: center;
      font-weight: 500
    }

    section#referanslar .container .subTitle {
      font-size: 14px;
      line-height: 1;
      color: #4c545f;
      text-align: center;
      margin: 15px auto
    }

      section#referanslar .container .subTitle:before, section#referanslar .container .subTitle:after {
        width: 75px;
        height: 1px;
        background: #4c545f;
        content: '';
        display: inline-block;
        top: -4px;
        position: relative
      }

      section#referanslar .container .subTitle:before {
        margin-right: 20px
      }

      section#referanslar .container .subTitle:after {
        margin-left: 20px
      }

    section#referanslar .container .row {
      display: flex;
      flex-wrap: wrap;
      margin-top: 50px
    }

      section#referanslar .container .row .contLeft {
        flex: 0 0 60%;
        max-width: 60%;
        padding: 25px
      }

        section#referanslar .container .row .contLeft .referans-slide .owl-carousel {
          cursor: pointer;
          perspective: 600;
          position: relative
        }

          section#referanslar .container .row .contLeft .referans-slide .owl-carousel .item {
            position: relative;
            transition: all 0.5s ease-in-out;
            width: 100%;
            border-radius: 20px;
            overflow: hidden
          }

            section#referanslar .container .row .contLeft .referans-slide .owl-carousel .item .side {
              z-index: 2;
              -webkit-transition: -webkit-transform 0.4s;
              -moz-transition: -moz-transform 0.4s;
              transition: transform 0.4s;
              overflow: hidden;
              width: 100%;
              height: 100%
            }

              section#referanslar .container .row .contLeft .referans-slide .owl-carousel .item .side img {
                width: 100%;
                height: auto
              }

            section#referanslar .container .row .contLeft .referans-slide .owl-carousel .item .subText {
              background: rgba(240,174,43,0.7);
              padding-top: 43%;
              color: #0087cc;
              text-align: center;
              position: absolute;
              overflow: hidden;
              height: 100%;
              width: 100%;
              opacity: 0;
              border-radius: 20px;
              -webkit-transform: scale(0.7);
              -moz-transform: scale(0.7);
              -ms-transform: scale(0.7);
              transform: scale(0.7);
              -webkit-backface-visibility: hidden;
              -moz-backface-visibility: hidden;
              backface-visibility: hidden;
              -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
              -moz-transition: -moz-transform 0.4s, opacity 0.4s;
              transition: transform 0.4s, opacity 0.4s
            }

              section#referanslar .container .row .contLeft .referans-slide .owl-carousel .item .subText .name {
                opacity: 0;
                visibility: hidden;
                color: #242424;
                font-size: 24px;
                font-weight: 600;
                text-shadow: 0 8px 6px rgba(0,0,0,0.6);
                margin-bottom: 10px;
                transition: .3s all;
                transform: translate(-100%)
              }

              section#referanslar .container .row .contLeft .referans-slide .owl-carousel .item .subText .turu, section#referanslar .container .row .contLeft .referans-slide .owl-carousel .item .subText a {
                flex: 0 0 100%;
                max-width: 100%;
                opacity: 0;
                visibility: hidden;
                transform: translate(100%)
              }

              section#referanslar .container .row .contLeft .referans-slide .owl-carousel .item .subText .turu {
                font-size: 14px;
                letter-spacing: 1px;
                color: #fbfbfb;
                margin-bottom: 7px;
                transition: all .3s ease-in
              }

              section#referanslar .container .row .contLeft .referans-slide .owl-carousel .item .subText a {
                position: absolute;
                bottom: 5px;
                right: 10px;
                text-align: center;
                text-decoration: none;
                padding: 5px;
                font-size: 13px;
                font-weight: 700;
                color: #fff;
                background: #242424;
                border: 1px dashed #eee;
                border-radius: 5px
              }

                section#referanslar .container .row .contLeft .referans-slide .owl-carousel .item .subText a span {
                  font-size: 26px;
                  display: inline-block;
                  vertical-align: middle
                }

            section#referanslar .container .row .contLeft .referans-slide .owl-carousel .item:hover .side {
              -webkit-transform: scale(1.2);
              -moz-transform: scale(1.2);
              -ms-transform: scale(1.2);
              transform: scale(1.2);
              opacity: .5
            }

            section#referanslar .container .row .contLeft .referans-slide .owl-carousel .item:hover .subText {
              -webkit-transform: scale(1);
              -moz-transform: scale(1);
              -ms-transform: scale(1);
              transform: scale(1);
              opacity: 1;
              top: 0
            }

              section#referanslar .container .row .contLeft .referans-slide .owl-carousel .item:hover .subText .name, section#referanslar .container .row .contLeft .referans-slide .owl-carousel .item:hover .subText .turu, section#referanslar .container .row .contLeft .referans-slide .owl-carousel .item:hover .subText a {
                opacity: 1;
                visibility: visible;
                transition: .5s all;
                transition-delay: .3s;
                transform: translate(0)
              }

            section#referanslar .container .row .contLeft .referans-slide .owl-carousel .item:hover img {
              opacity: 1
            }

            section#referanslar .container .row .contLeft .referans-slide .owl-carousel .item:hover:before {
              opacity: 1;
              visibility: visible
            }

        section#referanslar .container .row .contLeft div.contLBottom {
          display: flex;
          flex-wrap: wrap;
          margin-top: 20px
        }

          section#referanslar .container .row .contLeft div.contLBottom .buttonTumReferans {
            flex: 0 0 50%;
            max-width: 50%
          }

            section#referanslar .container .row .contLeft div.contLBottom .buttonTumReferans a {
              height: 58px;
              text-decoration: none;
              border-radius: 29px;
              background-color: #fff;
              font-size: 14px;
              letter-spacing: 2.3px;
              line-height: 34px;
              text-align: center;
              padding: 10px 30px;
              display: table;
              font-weight: bold;
              color: #f0ad2b;
              border: 2px solid #f0ad2b;
              transition: .3s all
            }

              section#referanslar .container .row .contLeft div.contLBottom .buttonTumReferans a:hover {
                background-color: #f0ad2b;
                color: #fff
              }

@media screen and (max-width: 767px) {
  section#referanslar .container .row .contLeft div.contLBottom .buttonTumReferans {
    max-width: 100%;
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center
  }
}

section#referanslar .container .row .contLeft div.contLBottom .navCont {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 15px
}

  section#referanslar .container .row .contLeft div.contLBottom .navCont.disabled {
    display: none
  }

  section#referanslar .container .row .contLeft div.contLBottom .navCont button {
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    position: relative;
    padding: 20px
  }

    section#referanslar .container .row .contLeft div.contLBottom .navCont button span {
      width: 20px !important;
      height: 20px !important;
      border: 3px solid #d7d7d7;
      display: inline-block;
      position: absolute;
      -webkit-transition: .5s;
      -o-transition: .5s;
      transition: .5s;
      border-radius: 3px
    }

      section#referanslar .container .row .contLeft div.contLBottom .navCont button span:before {
        content: "";
        background: #d7d7d7;
        -webkit-transform-origin: right;
        -ms-transform-origin: right;
        transform-origin: right;
        -webkit-transform: rotate(45deg) translate(-25px, 45.5px) scaleX(0.4);
        -ms-transform: rotate(45deg) translate(-25px, 45.5px) scaleX(0.4);
        transform: rotate(45deg) translate(-25px, 45.5px) scaleX(0.4);
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s;
        position: absolute;
        width: 58px;
        height: 3px;
        border-radius: 23px
      }

    section#referanslar .container .row .contLeft div.contLBottom .navCont button:nth-child(1) span {
      left: 20%;
      -webkit-transform: translateY(-50%) rotate(-45deg);
      -ms-transform: translateY(-50%) rotate(-45deg);
      transform: translateY(-50%) rotate(-45deg);
      border-right: none !important;
      border-bottom: none !important;
      top: 50%
    }

    section#referanslar .container .row .contLeft div.contLBottom .navCont button:nth-child(1):hover span {
      left: -35%;
      border-color: #000
    }

      section#referanslar .container .row .contLeft div.contLBottom .navCont button:nth-child(1):hover span:before {
        -webkit-transform: rotate(45deg) translate(9px, 45px) scaleX(1);
        -ms-transform: rotate(45deg) translate(9px, 45px) scaleX(1);
        transform: rotate(45deg) translate(9px, 45px) scaleX(1);
        background: #000
      }

    section#referanslar .container .row .contLeft div.contLBottom .navCont button:nth-child(2) span {
      right: 20%;
      -webkit-transform: translateY(-50%) rotate(-45deg);
      -ms-transform: translateY(-50%) rotate(-45deg);
      transform: translateY(-50%) rotate(-45deg);
      border-left: none !important;
      border-top: none !important;
      top: 50%
    }

    section#referanslar .container .row .contLeft div.contLBottom .navCont button:nth-child(2):hover span {
      right: -35%;
      border-color: #000
    }

      section#referanslar .container .row .contLeft div.contLBottom .navCont button:nth-child(2):hover span:before {
        -webkit-transform: rotate(45deg) translate(-24px, 45px) scaleX(1);
        -ms-transform: rotate(45deg) translate(-24px, 45px) scaleX(1);
        transform: rotate(45deg) translate(-24px, 45px) scaleX(1);
        background: #000
      }

    section#referanslar .container .row .contLeft div.contLBottom .navCont button:hover {
      opacity: .7
    }

    section#referanslar .container .row .contLeft div.contLBottom .navCont button.disabled {
      opacity: .2;
      cursor: auto
    }

section#referanslar .container .row .contRight {
  flex: 0 0 40%;
  max-width: 40%
}

  section#referanslar .container .row .contRight .slogan {
    font-size: 40px;
    font-weight: 400;
    text-align: center;
    color: #49515a;
    margin-top: 10px
  }

@media screen and (max-width: 767px) {
  section#referanslar .container .row .contRight .slogan {
    font-size: 25px
  }
}

@media screen and (max-width: 800px) {
  section#referanslar .container .row .contRight, section#referanslar .container .row .contLeft {
    flex: 0 0 100%;
    max-width: 100%
  }
}

section#bloglar {
  padding: 60px 0;
  background-color: #f4f5f7
}

  section#bloglar .container {
    width: 90%;
    margin: 0 auto
  }

    section#bloglar .container h2 {
      font-size: 26px;
      text-align: center;
      font-weight: 500
    }

    section#bloglar .container .subTitle {
      font-size: 14px;
      line-height: 1;
      color: #4c545f;
      text-align: center;
      margin: 15px auto 50px
    }

      section#bloglar .container .subTitle:before, section#bloglar .container .subTitle:after {
        width: 75px;
        height: 1px;
        background: #4c545f;
        content: '';
        display: inline-block;
        top: -4px;
        position: relative
      }

      section#bloglar .container .subTitle:before {
        margin-right: 20px
      }

      section#bloglar .container .subTitle:after {
        margin-left: 20px
      }

    section#bloglar .container .row {
      display: flex;
      flex-wrap: wrap
    }

      section#bloglar .container .row .blog {
        display: flex;
        display: -webkit-flex;
        flex: 0 0 50%;
        max-width: 50%;
        flex-wrap: wrap;
        border-right: 1px dashed #b9b9b9;
        padding-right: 30px;
        height: 270px
      }

        section#bloglar .container .row .blog:nth-child(2n) {
          padding-left: 30px;
          padding-right: 0;
          border-right: none
        }

        section#bloglar .container .row .blog .cardLeft .icerik, section#bloglar .container .row .blog .cardRight .icerik {
          border-radius: 16px;
          background-color: #fff;
          box-shadow: 0 15px 20px 0 rgba(40,60,98,0.1);
          overflow: hidden;
          height: 100%
        }

        section#bloglar .container .row .blog .cardLeft {
          flex: 0 0 65%;
          max-width: 65%;
          padding-right: 10px
        }

          section#bloglar .container .row .blog .cardLeft .icerik .subheader {
            letter-spacing: -.24px;
            text-transform: uppercase;
            padding: 18px 20px 6px;
            font-size: 15px;
            opacity: .75;
            font-weight: 500;
            line-height: 18px;
            color: #333
          }

          section#bloglar .container .row .blog .cardLeft .icerik a {
            text-decoration: none
          }

          section#bloglar .container .row .blog .cardLeft .icerik .title {
            font-size: 24px;
            font-weight: 600;
            text-transform: uppercase;
            padding-left: 20px;
            letter-spacing: .34px;
            text-align: left;
            line-height: 30px;
            color: #333
          }

          section#bloglar .container .row .blog .cardLeft .icerik .text {
            padding: 15px;
            font-size: 15px;
            color: #242424;
            opacity: .6;
            display: -webkit-box;
            -webkit-line-clamp: 8;
            line-height: 20px;
            overflow: hidden;
            height: 192px;
            -webkit-box-orient: vertical;
            border-bottom: solid 15px transparent
          }

        section#bloglar .container .row .blog .cardRight {
          flex: 0 0 35%;
          max-width: 35%;
          padding-left: 10px
        }

          section#bloglar .container .row .blog .cardRight .icerik {
            display: block
          }

            section#bloglar .container .row .blog .cardRight .icerik .image {
              height: 100%;
              background-size: cover;
              background-repeat: no-repeat;
              background-position: center
            }

        section#bloglar .container .row .blog .sub-date {
          flex: 0 0 100%;
          max-width: 100%;
          margin: 15px 0;
          text-align: right;
          white-space: nowrap
        }

          section#bloglar .container .row .blog .sub-date span {
            padding-left: 10px;
            color: #2d3640;
            font-size: 18px;
            font-weight: 600;
            text-align: left;
            display: inline-block
          }

          section#bloglar .container .row .blog .sub-date p {
            font-size: 14px;
            font-weight: 500;
            text-align: right;
            color: #8b95a1;
            padding-right: 12px;
            display: inline-block
          }

@media screen and (max-width: 769px) {
  section#bloglar .container .row .blog {
    flex: 0 0 100%;
    max-width: 100%;
    border-right: none;
    border-bottom: 1px dashed #b9b9b9;
    padding-right: 0;
    margin-bottom: 25px
  }
}

@media screen and (max-width: 600px) {
  section#bloglar .container .row .blog {
    height: auto
  }

    section#bloglar .container .row .blog:nth-child(2n) {
      padding-left: 0px
    }

    section#bloglar .container .row .blog .cardLeft, section#bloglar .container .row .blog .cardRight {
      flex: 0 0 100%;
      max-width: 100%;
      padding: 0
    }

      section#bloglar .container .row .blog .cardRight .ust {
        margin-top: 20px
      }

      section#bloglar .container .row .blog .cardRight .icerik {
        display: none
      }
}

section#bloglar .container .tumBloglar {
  flex-wrap: wrap;
  width: 100%;
  margin-top: 60px
}

  section#bloglar .container .tumBloglar a {
    padding: 15px;
    font-size: 15px;
    min-width: 200px;
    font-weight: bold;
    color: #2d3640;
    border: 1px solid rgba(75,79,82,0.2);
    text-align: center;
    text-decoration: none
  }

    section#bloglar .container .tumBloglar a:hover {
      color: rgba(45,54,64,0.8);
      border-color: rgba(75,79,82,0.3)
    }

section#up-footer {
  padding-top: 60px;
  padding-bottom: 90px;
  background-color: #0055ff;
}

  section#up-footer .container {
    width: 90%;
    margin: 0 auto
  }

    section#up-footer .container span.title {
      display: block;
      width: 100%;
      text-align: center;
      font-size: 26px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 50px;
      letter-spacing: 1.1px
    }

    section#up-footer .container .row {
      display: flex;
      flex-wrap: wrap;
      margin: 0 auto;
      align-items: center;
      justify-content: center
    }

      section#up-footer .container .row a.box {
        box-shadow: inset 0 0 20px -8px #000;
        background-color: #161b23;
        border-radius: 47.5px;
        text-decoration: none;
        padding: 15px 30px;
        white-space: nowrap;
        text-align: center;
        font-size: 16px;
        font-weight: 400;
        text-transform: uppercase;
        color: #fff
      }

        section#up-footer .container .row a.box i {
          font-size: 22px;
          vertical-align: middle;
          padding-right: 10px
        }

        section#up-footer .container .row a.box:hover {
          background-color: #fff;
          color: #2a2d33
        }

        section#up-footer .container .row a.box + .box {
          margin-left: 20px
        }

@media screen and (max-width: 600px) {
  section#up-footer .container .row a.box {
    text-align: left;
    width: 270px;
    display: block;
    margin-bottom: 10px
  }

    section#up-footer .container .row a.box i {
      width: 50px
    }

    section#up-footer .container .row a.box + .box {
      margin-left: 0
    }
}

footer#footer {
  background-color: #fff;
  color: rgba(36,36,36,0.6);
  position: relative;
  padding: 60px 0 10px 0
}

  footer#footer .container {
    width: 90%;
    margin: 0 auto;
    position: relative;
    z-index: 1
  }

    footer#footer .container .row {
      display: flex;
      flex-wrap: wrap
    }

      footer#footer .container .row .box .title {
        color: #2d3640;
        margin-bottom: 40px;
        font-size: 25px;
        font-style: normal;
        padding-bottom: 10px;
        font-weight: 600;
        line-height: 32px;
        position: relative
      }

        footer#footer .container .row .box .title:before {
          content: "";
          position: absolute;
          left: 0;
          bottom: 0;
          width: 50px;
          height: 2px;
          background: #0055ff;
        }

      footer#footer .container .row .box p {
        font-size: 14px;
        line-height: 20px;
        color: #242424;
        opacity: .8
      }

      footer#footer .container .row .footer-about {
        flex: 0 0 40%;
        max-width: 40%;
        padding: 10px 30px
      }

        footer#footer .container .row .footer-about > span {
          display: block;
          width: 100%;
          margin-bottom: 30px
        }

          footer#footer .container .row .footer-about > span img {
            width: 220px;
            height: auto
          }

@media screen and (max-width: 767px) {
  footer#footer .container .row .footer-about > span {
    text-align: center
  }
}

footer#footer .container .row .footer-about .footer-address {
  margin-top: 5px
}

  footer#footer .container .row .footer-about .footer-address ul {
    display: inline-table
  }

    footer#footer .container .row .footer-about .footer-address ul li {
      line-height: 28px;
      margin-top: 0;
      margin-bottom: 1px;
      display: flex
    }

      footer#footer .container .row .footer-about .footer-address ul li i {
        color: #005aff;
        padding-right: 20px;
        font-size: 16px;
        line-height: 30px;
        width: 30px
      }

      footer#footer .container .row .footer-about .footer-address ul li a {
        text-decoration: none
      }

        footer#footer .container .row .footer-about .footer-address ul li a:hover span {
          color: #005aff;
          /* font-weight: bold; */
        }

      footer#footer .container .row .footer-about .footer-address ul li span {
        display: table;
        color: #242424;
        opacity: .8;
        font-size: 14px;
        vertical-align: top
      }

footer#footer .container .row .quick-menu {
  flex: 0 0 30%;
  max-width: 30%
}

  footer#footer .container .row .quick-menu ul li {
    position: relative
  }

    footer#footer .container .row .quick-menu ul li a {
      text-decoration: none;
      color: #242424;
      opacity: .8;
      padding: 10px 8px;
      display: table;
      padding-left: 25px;
      font-size: 14px
    }

    footer#footer .container .row .quick-menu ul li:after {
      content: "\f22d";
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      position: absolute;
      color: rgba(0,0,0,0.7);
      left: 0;
      top: 10px
    }

    footer#footer .container .row .quick-menu ul li:hover:after {
      color: #000000;
    }

    footer#footer .container .row .quick-menu ul li:hover a {
      color: #005aff;
      /* font-weight: bold; */
    }

footer#footer .container .row .newsletter {
  flex: 0 0 30%;
  max-width: 30%
}

  footer#footer .container .row .newsletter .subscribe .input-group input {
    padding: 10px;
    border: 1px solid #eee;
    font-size: 15px;
    background-color: transparent;
    color: #242424;
    width: 100%;
    outline: none;
    margin: 20px 0
  }

    footer#footer .container .row .newsletter .subscribe .input-group input:focus {
      border: 1px solid #fff000
    }

  footer#footer .container .row .newsletter .subscribe .input-group button {
    padding: 10px 15px;
    background-color: #fff000;
    cursor: pointer;
    border: 1px solid #fff000;
    color: #000000;
    text-transform: uppercase;
    font-size: 16px
  }

    footer#footer .container .row .newsletter .subscribe .input-group button:hover {
      border: 1px solid #fff503;
      background-color: #000000;
      color: #fff503;
    }

@media screen and (max-width: 767px) {
  footer#footer .container .row .newsletter .subscribe .input-group {
    text-align: center
  }
}

@media screen and (max-width: 769px) {
  footer#footer .container .row .footer-about {
    padding: 10px 15px
  }

  footer#footer .container .row .footer-about, footer#footer .container .row .quick-menu, footer#footer .container .row .newsletter {
    flex: 0 0 50%;
    max-width: 50%;
    margin-bottom: 15px
  }
}

@media screen and (max-width: 600px) {
  footer#footer .container .row .footer-about, footer#footer .container .row .quick-menu, footer#footer .container .row .newsletter {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 15px
  }
}

footer#footer .container .subfooter {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #cfd1d5;
  padding: 10px 5px;
  margin-top: 15px;
  padding-top: 20px
}

  footer#footer .container .subfooter .subleft {
    flex: 0 0 50%;
    max-width: 50%;
    text-align: left;
    display: flex;
    align-items: center;
    color: #242424;
    font-size: 16px;
    line-height: 20px;
    font-weight: 300
  }

  footer#footer .container .subfooter .subright {
    flex: 0 0 50%;
    max-width: 50%;
    text-align: right;
    color: #242424
  }

    footer#footer .container .subfooter .subright a {
      text-decoration: none
    }

    footer#footer .container .subfooter .subright > span {
      justify-content: flex-end
    }

      footer#footer .container .subfooter .subright > span ul {
        display: flex;
        flex-wrap: wrap
      }

        footer#footer .container .subfooter .subright > span ul li {
          display: flex;
          flex: 1;
          margin: 0 1px;
          position: relative
        }

          footer#footer .container .subfooter .subright > span ul li a {
            width: 35px;
            height: 35px;
            color: #fff;
            background: #005aff;
            border: 1px solid #eee;
            border-radius: 50%
          }

            footer#footer .container .subfooter .subright > span ul li a:hover:before {
              opacity: 1;
              visibility: visible;
              transform: scale(1.2)
            }

            footer#footer .container .subfooter .subright > span ul li a[title="Twitter"]:hover {
              background: #0099e5
            }

            footer#footer .container .subfooter .subright > span ul li a[title="Facebook"]:hover {
              background: #3b5998
            }

            footer#footer .container .subfooter .subright > span ul li a[title="İnstagram"]:hover {
              background: #F66034
            }

            footer#footer .container .subfooter .subright > span ul li a[title="Youtube"]:hover {
              background: #CC181E
            }

            footer#footer .container .subfooter .subright > span ul li a[title="Linkedin"]:hover {
              background: #0077B5
            }

            footer#footer .container .subfooter .subright > span ul li a[title="Google Plus"]:hover {
              background: #DD4B39
            }

            footer#footer .container .subfooter .subright > span ul li a[title="Pinterest"]:hover {
              background: #E60023
            }

            footer#footer .container .subfooter .subright > span ul li a:before {
              content: '';
              position: absolute;
              border: rgba(65,71,82,0.2) solid 3px;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              opacity: 0;
              border-radius: 50%;
              visibility: hidden;
              transition: .3s all
            }

@media (max-width: 769px) {
  footer#footer .container .subfooter .subright > span {
    justify-content: center
  }
}

@media (max-width: 769px) {
  footer#footer .container .subfooter .subleft, footer#footer .container .subfooter .subright {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
    margin-bottom: 15px
  }
}

footer#footer:before {
  background: #fff;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0
}

footer#footer:after {
  content: "";
  background: url(../img/footer-top.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 40px;
  left: 0;
  position: absolute;
  top: -40px;
  width: 100%;
  z-index: 0
}

section#detay-info {
  padding: 30px 0;
  padding-top: 140px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative
}

  section#detay-info .container {
    width: 90%;
    margin: 0 auto;
    position: relative;
    z-index: 1
  }

    section#detay-info .container .box h2 {
      margin: 0.67em 0;
      font-size: 30px;
      font-weight: 700;
      color: #fff;
      line-height: 1;
      letter-spacing: 1.2px
    }

    section#detay-info .container .box ul.breadcrumb {
      padding: 10px 0px;
      list-style: none;
      background-color: transparent
    }

      section#detay-info .container .box ul.breadcrumb li {
        display: inline;
        color: #fff
      }

        section#detay-info .container .box ul.breadcrumb li a {
          text-decoration: none;
          color: #fff;
          font-size: 14px
        }

        section#detay-info .container .box ul.breadcrumb li + li:before {
          padding: 8px 2px;
          color: #fff000;
          content: "/\00a0"
        }

        section#detay-info .container .box ul.breadcrumb li .active {
          pointer-events: none;
          cursor: auto;
          color: #fff000
        }

  section#detay-info:before {
    content: '';
    background-color: rgba(0,0,0,0.7);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%
  }

section#detay-icerik {
  padding: 30px 0;
  position: relative;
  background-color: #fff
}

  section#detay-icerik .container {
    width: 90%;
    margin: 0 auto
  }

    section#detay-icerik .container .row .title h2 {
      font-size: 20px;
      font-weight: 600;
      color: #393939;
      padding: 10px;
      margin-bottom: 25px;
      padding-left: 15px;
      border-left: 4px solid #F7941D
    }

    section#detay-icerik .container .row .text {
      font-size: 15px;
      line-height: 21px;
      color: rgba(36,36,36,0.8)
    }

  section#detay-icerik:after {
    content: "";
    background: url(../img/footer-top.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 40px;
    left: 0;
    position: absolute;
    top: -40px;
    width: 100%;
    z-index: 0
  }

section#detay-sablon {
  padding: 30px 0;
  position: relative;
  background: #f4f5f7
}

  section#detay-sablon .container {
    width: 90%;
    margin: 0 auto
  }

    section#detay-sablon .container .row #sablon1 {
      display: flex;
      flex-wrap: wrap;
      border: 2px dashed #eee;
      border-radius: 8px;
      -webkit-box-shadow: 0 15px 20px 0 rgba(40,60,98,0.1);
      box-shadow: 0 15px 20px 0 rgba(40,60,98,0.1);
      padding: 30px 0;
      background: #fff;
      overflow: hidden
    }

      section#detay-sablon .container .row #sablon1 + .box {
        margin-top: 50px
      }

      section#detay-sablon .container .row #sablon1 .col-4 {
        flex: 0 0 30%;
        max-width: 30%;
        margin: -30px 0;
        padding: 0 15px;
        width: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-clip: content-box
      }

        section#detay-sablon .container .row #sablon1 .col-4 .image {
          height: fit-content;
          width: 100%;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center
        }

      section#detay-sablon .container .row #sablon1 .col-8 {
        flex: 0 0 70%;
        max-width: 70%;
        padding: 15px;
        position: relative
      }

        section#detay-sablon .container .row #sablon1 .col-8 .technologies {
          position: absolute;
          top: -30px;
          right: 5px
        }

          section#detay-sablon .container .row #sablon1 .col-8 .technologies ul {
            flex-wrap: wrap
          }

            section#detay-sablon .container .row #sablon1 .col-8 .technologies ul li {
              padding: 10px;
              text-align: center
            }

              section#detay-sablon .container .row #sablon1 .col-8 .technologies ul li i {
                font-size: 25px
              }

              section#detay-sablon .container .row #sablon1 .col-8 .technologies ul li span {
                width: 100%;
                display: block;
                font-size: 10px;
                color: #242424
              }

        section#detay-sablon .container .row #sablon1 .col-8 .title {
          font-size: 20px;
          font-weight: 500;
          margin-bottom: 10px;
          width: 100%;
          text-align: left;
          padding: 20px;
          padding-left: 5px;
          color: #3d3d3d
        }

        section#detay-sablon .container .row #sablon1 .col-8 .text {
          font-size: 15px;
          line-height: 22px;
          color: rgba(36,36,36,0.8)
        }

          section#detay-sablon .container .row #sablon1 .col-8 .text p {
            margin-bottom: 8px
          }

          section#detay-sablon .container .row #sablon1 .col-8 .text .madde li {
            padding: 5px;
            margin: 2px 0
          }

            section#detay-sablon .container .row #sablon1 .col-8 .text .madde li i {
              color: rgba(240,174,43,0.8);
              padding-right: 4px
            }

      section#detay-sablon .container .row #sablon1:nth-child(even) .col-4 {
        order: 1
      }

      section#detay-sablon .container .row #sablon1:nth-child(even) .col-8 {
        order: 0
      }

        section#detay-sablon .container .row #sablon1:nth-child(even) .col-8 .technologies {
          right: auto;
          left: 5px
        }

        section#detay-sablon .container .row #sablon1:nth-child(even) .col-8 .title {
          text-align: right;
          padding-right: 5px
        }

        section#detay-sablon .container .row #sablon1:nth-child(even) .col-8 .text {
          text-align: right
        }

        section#detay-sablon .container .row #sablon1:nth-child(even) .col-8:before {
          right: auto;
          left: 20%
        }

@media (max-width: 769px) {
  section#detay-sablon .container .row #sablon1 {
    padding: 10px 0
  }

    section#detay-sablon .container .row #sablon1 .col-4, section#detay-sablon .container .row #sablon1 .col-8 {
      flex: 0 0 100%;
      max-width: 100%
    }

      section#detay-sablon .container .row #sablon1 .col-4 .text, section#detay-sablon .container .row #sablon1 .col-8 .text {
        font-size: 14px
      }

    section#detay-sablon .container .row #sablon1 .col-4 {
      order: 1;
      margin: 0;
      height: 180px
    }

    section#detay-sablon .container .row #sablon1 .col-8 .technologies {
      position: initial
    }

    section#detay-sablon .container .row #sablon1:nth-child(even) .col-4 {
      order: 1
    }

    section#detay-sablon .container .row #sablon1:nth-child(even) .col-8 .technologies {
      right: auto;
      left: 0
    }

    section#detay-sablon .container .row #sablon1:nth-child(even) .col-8 .title {
      text-align: left;
      padding-right: 0
    }

    section#detay-sablon .container .row #sablon1:nth-child(even) .col-8 .text {
      text-align: left
    }

    section#detay-sablon .container .row #sablon1:nth-child(even) .col-8:before {
      right: auto;
      left: 20%
    }
}

section#detay-sablon .container .row #sablon2 {
  border-radius: 8px;
  -webkit-box-shadow: 0 15px 20px 0 rgba(40,60,98,0.1);
  box-shadow: 0 15px 20px 0 rgba(40,60,98,0.1);
  padding: 30px;
  background: #fff;
  overflow: hidden
}

  section#detay-sablon .container .row #sablon2 + .box {
    margin-top: 50px
  }

  section#detay-sablon .container .row #sablon2 .content {
    display: flex;
    flex-wrap: wrap
  }

    section#detay-sablon .container .row #sablon2 .content .title {
      flex: 0 0 100%;
      max-width: 100%;
      padding: 20px;
      background: #2a2d33;
      border-radius: 10px 10px 0 0;
      color: #fff;
      font-size: 24px;
      font-weight: 500
    }

    section#detay-sablon .container .row #sablon2 .content .table {
      flex: 0 0 100%;
      max-width: 100%
    }

      section#detay-sablon .container .row #sablon2 .content .table table {
        width: 100%;
        border: 1px solid #eee;
        border-collapse: collapse;
        border-spacing: 0
      }

        section#detay-sablon .container .row #sablon2 .content .table table thead tr th {
          text-align: center;
          border: 1px solid #eee;
          padding: 10px;
          font-weight: 600;
          font-size: 15px;
          font-style: italic
        }

        section#detay-sablon .container .row #sablon2 .content .table table tbody tr td {
          text-align: center;
          border: 1px solid #eee;
          padding: 10px
        }

          section#detay-sablon .container .row #sablon2 .content .table table tbody tr td.line-title {
            text-align: left;
            font-weight: 500;
            font-size: 15px;
            font-style: italic
          }

          section#detay-sablon .container .row #sablon2 .content .table table tbody tr td .check, section#detay-sablon .container .row #sablon2 .content .table table tbody tr td .times {
            font-weight: bold;
            margin: 0 auto;
            font-size: 20px
          }

          section#detay-sablon .container .row #sablon2 .content .table table tbody tr td .check {
            color: #fff000
          }

          section#detay-sablon .container .row #sablon2 .content .table table tbody tr td .times {
            color: #ddd
          }

@media (max-width: 769px) {
  section#detay-sablon .container .row #sablon2 .content .table table thead tr th {
    display: none
  }

  section#detay-sablon .container .row #sablon2 .content .table table tbody tr td:not(:first-child) {
    display: none
  }
}

@media (max-width: 769px) {
  section#detay-sablon .container .row #sablon2 {
    padding: 15px
  }
}

section#detay-sablon .container .links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 50px
}

  section#detay-sablon .container .links a.box {
    padding: 10px 10px;
    text-align: center;
    text-decoration: underline;
    text-decoration-color: #565656
  }

    section#detay-sablon .container .links a.box span {
      background-color: #c5d5ec;
      -webkit-box-shadow: 0 15px 20px 0 rgba(40,60,98,0.1);
      box-shadow: 0 15px 20px 0 rgba(40,60,98,0.1);
      color: #303030;
      font-weight: 600;
      padding: 8px 15px;
      border-radius: 5px
    }

      section#detay-sablon .container .links a.box span i {
        margin-right: 5px;
        vertical-align: middle
      }

    section#detay-sablon .container .links a.box:hover {
      text-decoration: none
    }

div.tags {
  padding: 30px 0;
  background: #f4f5f7
}

  div.tags .container {
    width: 90%;
    margin: 0 auto
  }

    div.tags .container .tags-title {
      font-size: 16px;
      font-weight: 600;
      display: inline-block;
      margin-right: 10px
    }

    div.tags .container a {
      background: #555b67;
      color: #ffffff;
      text-decoration: none;
      padding: 3px 10px;
      margin: 0 5px 5px 0;
      font-size: 12px;
      display: inline-block;
      -webkit-border-radius: 2px;
      border-radius: 2px
    }

      div.tags .container a:hover {
        background: rgba(85,91,103,0.7)
      }

section#detay-galeri-1 {
  padding: 30px 0
}

  section#detay-galeri-1 .container {
    width: 90%;
    margin: 0 auto
  }

    section#detay-galeri-1 .container .title {
      position: relative;
      margin-bottom: 20px
    }

      section#detay-galeri-1 .container .title h4 {
        font-size: 18px;
        font-weight: 600;
        position: relative;
        display: inline-block;
        padding: 12px;
        background: #000;
        color: #fff000
      }

        section#detay-galeri-1 .container .title h4:before {
          content: "";
          position: absolute;
          top: 0;
          z-index: 1;
          right: -8px;
          width: 0;
          height: 0;
          border-top: 8px solid #111;
          border-right: 8px solid transparent
        }

      section#detay-galeri-1 .container .title:after {
        content: "";
        background-color: #000;
        position: absolute;
        display: block;
        bottom: 0;
        z-index: 2;
        height: 2px;
        right: 0;
        width: 100%;
        left: 0
      }

    section#detay-galeri-1 .container .row {
      display: flex;
      flex-wrap: wrap
    }

      section#detay-galeri-1 .container .row .box {
        padding: 10px;
        flex: 0 0 25%;
        max-width: 25%;
        position: relative;
        margin-bottom: 15px
      }

        section#detay-galeri-1 .container .row .box .image {
          height: 200px;
          background-clip: content-box;
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat;
          display: flex;
          border-radius: 16px;
          box-shadow: 0 15px 20px 0 rgba(40,60,98,0.1);
          position: relative
        }

          section#detay-galeri-1 .container .row .box .image span {
            position: absolute;
            background: #fff000;
            transition: .3s all
          }

            section#detay-galeri-1 .container .row .box .image span:nth-child(1) {
              width: 0;
              height: 3px;
              top: 10px;
              left: 50%
            }

            section#detay-galeri-1 .container .row .box .image span:nth-child(2) {
              width: 3px;
              height: 0;
              top: 50%;
              right: 10px
            }

            section#detay-galeri-1 .container .row .box .image span:nth-child(3) {
              width: 0;
              height: 3px;
              bottom: 10px;
              left: 50%
            }

            section#detay-galeri-1 .container .row .box .image span:nth-child(4) {
              width: 3px;
              height: 0;
              top: 50%;
              left: 10px
            }

          section#detay-galeri-1 .container .row .box .image .text {
            position: absolute;
            bottom: 13px;
            left: 13px;
            background-color: rgba(23,33,54,0.5);
            width: calc(100% - 26px);
            padding: 10px 15px;
            color: #fff
          }

          section#detay-galeri-1 .container .row .box .image:hover {
            overflow: hidden;
            cursor: pointer;
            box-shadow: 0 15px 20px 0 rgba(40,60,98,0.2)
          }

            section#detay-galeri-1 .container .row .box .image:hover span:nth-child(1) {
              width: 100%;
              left: 0%
            }

            section#detay-galeri-1 .container .row .box .image:hover span:nth-child(2) {
              width: 3px;
              height: 100%;
              top: 0%
            }

            section#detay-galeri-1 .container .row .box .image:hover span:nth-child(3) {
              width: 100%;
              height: 3px;
              left: 0%
            }

            section#detay-galeri-1 .container .row .box .image:hover span:nth-child(4) {
              width: 3px;
              height: 100%;
              top: 0%
            }

            section#detay-galeri-1 .container .row .box .image:hover .text {
              background: rgba(240,174,43,0.5)
            }

@media (max-width: 900px) {
  section#detay-galeri-1 .container .row .box {
    flex: 0 0 33.33%;
    max-width: 33.33%
  }
}

@media (max-width: 769px) {
  section#detay-galeri-1 .container .row .box {
    flex: 0 0 50%;
    max-width: 50%
  }
}

@media (max-width: 500px) {
  section#detay-galeri-1 .container .row .box {
    flex: 0 0 100%;
    max-width: 100%
  }
}

section#detay-galeri-2 {
  padding: 30px 0
}

  section#detay-galeri-2 .container {
    width: 90%;
    margin: 0 auto
  }

    section#detay-galeri-2 .container > .title {
      position: relative;
      margin-bottom: 20px
    }

      section#detay-galeri-2 .container > .title h4 {
        font-size: 18px;
        font-weight: 600;
        position: relative;
        display: inline-block;
        padding: 12px;
        background: #000;
        color: #fff000
      }

        section#detay-galeri-2 .container > .title h4:before {
          content: "";
          position: absolute;
          top: 0;
          z-index: 1;
          right: -8px;
          width: 0;
          height: 0;
          border-top: 8px solid #111;
          border-right: 8px solid transparent
        }

      section#detay-galeri-2 .container > .title:after {
        content: "";
        background-color: #000;
        position: absolute;
        display: block;
        bottom: 0;
        z-index: 2;
        height: 2px;
        right: 0;
        width: 100%;
        left: 0
      }

    section#detay-galeri-2 .container .contentBox {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      padding: 20px;
      margin-top: 35px
    }

      section#detay-galeri-2 .container .contentBox .box {
        visibility: hidden;
        border: 2px solid #f8e28e;
        flex: 0 0 23%;
        max-width: 23%;
        margin-bottom: 30px;
        height: 220px;
        margin-right: 8px;
        margin-left: 8px;
        position: relative;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 15px 20px 0 rgba(40,60,98,0.1);
        transition: .3s all
      }

        section#detay-galeri-2 .container .contentBox .box .date {
          position: absolute;
          top: -25px;
          left: 5px;
          font-size: 12px;
          font-weight: 800;
          color: #999;
          opacity: 0.75
        }

        section#detay-galeri-2 .container .contentBox .box .title {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          background: rgba(0,0,0,0.6);
          padding: 10px;
          border-radius: 0 0 8px 8px
        }

          section#detay-galeri-2 .container .contentBox .box .title span {
            color: #fdce24;
            font-size: 18px;
            font-weight: 800;
            font-family: 'Sofia', cursive;
            opacity: .75;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-height: 24px;
            overflow: hidden;
            -webkit-box-orient: vertical
          }

        section#detay-galeri-2 .container .contentBox .box:hover {
          box-shadow: 0 15px 20px 0 rgba(40,60,98,0.2)
        }

        section#detay-galeri-2 .container .contentBox .box:before {
          content: '';
          border-bottom: 12px solid #fdce24;
          border-right: 12px solid transparent;
          border-top: 12px solid transparent;
          border-left: 12px solid transparent;
          position: absolute;
          top: -24px;
          left: 12px;
          opacity: 0.5
        }

@media (max-width: 950px) {
  section#detay-galeri-2 .container .contentBox .box {
    flex: 0 0 47%;
    max-width: 47%;
    margin-bottom: 60px
  }
}

@media (max-width: 769px) {
  section#detay-galeri-2 .container .contentBox .box {
    flex: 0 0 100%;
    max-width: 100%;
    margin-right: 0px;
    margin-left: 0px
  }
}

@media (max-width: 769px) {
  section#detay-galeri-2 .container .contentBox {
    padding: 10px
  }
}

@media (max-width: 769px) {
  section#detay-galeri-2 .container {
    width: 95%
  }
}

section#detay-video-galeri .container {
  width: 90%;
  margin: 0 auto
}

  section#detay-video-galeri .container .row {
    display: flex;
    flex-wrap: wrap
  }

    section#detay-video-galeri .container .row .col-6 {
      flex: 0 0 50%;
      max-width: 50%;
      padding: 15px
    }

    section#detay-video-galeri .container .row .col-12 {
      flex: 0 0 100%;
      max-width: 100%;
      padding: 15px
    }

@media (max-width: 769px) {
  section#detay-video-galeri .container .row .col-6, section#detay-video-galeri .container .row .col-12 {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 5px
  }
}

section#detay-iletisim {
  background-color: #fff
}

  section#detay-iletisim .map {
    position: relative
  }

    section#detay-iletisim .map .info {
      position: absolute;
      width: 350px;
      right: calc( ( 103vw - 1170px ) / 2 );
      top: 10%;
      z-index: 1;
      background: rgba(255,255,255,0.9);
      border-radius: 3px;
      box-shadow: 0 0 5px rgba(0,0,0,0.4)
    }

      section#detay-iletisim .map .info .times {
        position: absolute;
        top: 20px;
        right: 20px;
        padding: 5px;
        width: 30px;
        height: 30px;
        cursor: pointer;
        text-align: center;
        line-height: 18px;
        color: #fff;
        border-radius: 50%;
        transition: .3s all;
        border: 2px solid rgba(255,255,255,0.9);
        background-color: rgba(0,0,0,0.3)
      }

        section#detay-iletisim .map .info .times.off {
          transform: rotate(135deg)
        }

        section#detay-iletisim .map .info .times:before {
          content: '';
          position: absolute;
          top: 12px;
          left: 6px;
          width: 15px;
          height: 2px;
          transform: rotate(45deg);
          background: #fff
        }

        section#detay-iletisim .map .info .times:after {
          content: '';
          position: absolute;
          top: 12px;
          left: 6px;
          width: 15px;
          height: 2px;
          transform: rotate(-45deg);
          background: #fff
        }

      section#detay-iletisim .map .info .image {
        width: 100%;
        display: block;
        height: 200px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-transition: opacity .2s ease-out, height .3s ease-out;
        transition: opacity .2s ease-out, height .3s ease-out;
        opacity: 1
      }

        section#detay-iletisim .map .info .image.off {
          height: 80px
        }

      section#detay-iletisim .map .info .content {
        padding: 15px
      }

        section#detay-iletisim .map .info .content .title {
          font-size: 18px;
          font-weight: 700
        }

        section#detay-iletisim .map .info .content .text {
          font-size: 14px;
          line-height: 20px;
          font-weight: 400;
          margin-top: 15px
        }

@media (max-width: 769px) {
  section#detay-iletisim .map .info {
    display: none
  }
}

section#detay-iletisim .container {
  width: 90%;
  margin: 0 auto;
  padding: 50px 0
}

  section#detay-iletisim .container .row {
    display: flex;
    flex-wrap: wrap
  }

    section#detay-iletisim .container .row .col-6 {
      flex: 0 0 50%;
      max-width: 50%;
      padding: 15px
    }

    section#detay-iletisim .container .row fieldset {
      padding: 10px
    }

      section#detay-iletisim .container .row fieldset legend {
        font-size: 22px;
        font-weight: 400;
        color: #999;
        margin-bottom: 15px
      }

      section#detay-iletisim .container .row fieldset ul {
        display: flex;
        flex-wrap: wrap
      }

        section#detay-iletisim .container .row fieldset ul li {
          display: flex;
          flex: 0 0 100%;
          font-size: 14px;
          padding: 8px;
          border-bottom: 1px dashed #eee;
          color: #242424
        }

          section#detay-iletisim .container .row fieldset ul li label {
            font-weight: bold;
            flex: 0 0 20%;
            max-width: 20%
          }

          section#detay-iletisim .container .row fieldset ul li span {
            flex: 0 0 80%;
            max-width: 80%
          }

@media (max-width: 769px) {
  section#detay-iletisim .container .row fieldset ul li label {
    font-weight: bold;
    flex: 0 0 30%;
    max-width: 30%
  }

  section#detay-iletisim .container .row fieldset ul li span {
    flex: 0 0 70%;
    max-width: 70%
  }
}

section#detay-iletisim .container .row form {
  display: flex;
  flex-wrap: wrap
}

  section#detay-iletisim .container .row form .form-group {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 10px
  }

    section#detay-iletisim .container .row form .form-group input, section#detay-iletisim .container .row form .form-group textarea {
      width: 100%;
      padding: 10px;
      color: #242424;
      border: 2px solid #eee;
      outline: none
    }

      section#detay-iletisim .container .row form .form-group input:focus, section#detay-iletisim .container .row form .form-group textarea:focus {
        border-color: #fff000
      }

    section#detay-iletisim .container .row form .form-group .kod {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      color: #242424
    }

      section#detay-iletisim .container .row form .form-group .kod i {
        font-size: 28px;
        color: #242424;
        margin-left: 10px;
        cursor: pointer
      }

      section#detay-iletisim .container .row form .form-group .kod input {
        width: 120px;
        margin-left: 10px
      }

    section#detay-iletisim .container .row form .form-group button {
      float: right;
      padding: 10px 20px;
      font-size: 18px;
      font-weight: 600;
      color: #fff;
      background-color: #fff000;
      border: none;
      box-shadow: 0 1px 6px -2px #999;
      cursor: pointer;
      position: relative;
      outline: none
    }

      section#detay-iletisim .container .row form .form-group button span {
        position: absolute;
        background-color: #2a2d33;
        transition: .3s all
      }

        section#detay-iletisim .container .row form .form-group button span:nth-child(1) {
          width: 2px;
          height: 30px;
          left: 0;
          top: 0
        }

        section#detay-iletisim .container .row form .form-group button span:nth-child(2) {
          width: 30px;
          height: 2px;
          left: 0;
          top: 0
        }

        section#detay-iletisim .container .row form .form-group button span:nth-child(3) {
          width: 2px;
          height: 30px;
          right: 0;
          bottom: 0
        }

        section#detay-iletisim .container .row form .form-group button span:nth-child(4) {
          width: 30px;
          height: 2px;
          right: 0;
          bottom: 0
        }

      section#detay-iletisim .container .row form .form-group button:hover {
        background-color: #242424;
        box-shadow: 0 1px 10px -1px #ddd
      }

        section#detay-iletisim .container .row form .form-group button:hover span {
          position: absolute;
          background-color: #fff
        }

          section#detay-iletisim .container .row form .form-group button:hover span:nth-child(1) {
            width: 2px;
            height: 100%;
            left: 0;
            top: 0
          }

          section#detay-iletisim .container .row form .form-group button:hover span:nth-child(2) {
            width: 100%;
            height: 2px;
            left: 0;
            top: 0
          }

          section#detay-iletisim .container .row form .form-group button:hover span:nth-child(3) {
            width: 2px;
            height: 100%;
            right: 0;
            bottom: 0
          }

          section#detay-iletisim .container .row form .form-group button:hover span:nth-child(4) {
            width: 100%;
            height: 2px;
            right: 0;
            bottom: 0
          }

@media (max-width: 769px) {
  section#detay-iletisim .container .row .col-6 {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
    margin-bottom: 10px
  }
}

section#altsayfa-liste {
  padding: 25px 0
}

  section#altsayfa-liste .container {
    width: 90%;
    margin: 0 auto
  }

    section#altsayfa-liste .container .row ul.alt-liste {
      list-style: none
    }

      section#altsayfa-liste .container .row ul.alt-liste li {
        margin: 5px 0
      }

        section#altsayfa-liste .container .row ul.alt-liste li .box a i {
          padding-right: 8px;
          color: #5d3f00
        }

        section#altsayfa-liste .container .row ul.alt-liste li .box a {
          box-shadow: 0px 5px 5px -6px #000;
          padding: 10px;
          padding-left: 15px;
          border: 1px dashed #477447;
          display: table;
          width: 100%;
          background: #f8dc9e;
          font-size: 18px;
          font-weight: 500;
          color: #474747;
          text-shadow: 0 1px 0px #fff;
          transition: all .3s ease-in-out
        }

          section#altsayfa-liste .container .row ul.alt-liste li .box a:hover i {
            color: #ce7b00
          }

          section#altsayfa-liste .container .row ul.alt-liste li .box a:hover {
            padding-left: 25px
          }

section#altsayfa-galeri {
  padding: 25px 0;
  background-color: #fff
}

  section#altsayfa-galeri .container {
    width: 90%;
    margin: 0 auto
  }

    section#altsayfa-galeri .container .row {
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      flex-wrap: wrap;
      -webkit-flex-wrap: wrap
    }

      section#altsayfa-galeri .container .row a.box {
        padding: 15px;
        flex: 0 0 25%;
        width: 25%;
        display: table;
        position: relative
      }

        section#altsayfa-galeri .container .row a.box img {
          width: 100%
        }

        section#altsayfa-galeri .container .row a.box .title {
          position: absolute;
          top: 15px;
          left: 15px;
          width: calc(100% - 30px);
          height: calc(100% - 30px);
          background: rgba(0,0,0,0.5);
          background: radial-gradient(transparent 0%, rgba(0,0,0,0.2) 100%);
          color: #fff000;
          font-size: 20px;
          font-weight: 500;
          text-align: center;
          text-shadow: 0 1px 10px #000;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: .3s all
        }

          section#altsayfa-galeri .container .row a.box .title span {
            position: absolute;
            background-color: #fff000;
            transition: .3s all
          }

            section#altsayfa-galeri .container .row a.box .title span:nth-child(1) {
              top: 0;
              left: 0;
              height: 3px;
              width: 0%
            }

            section#altsayfa-galeri .container .row a.box .title span:nth-child(2) {
              top: 0;
              right: 0;
              height: 0%;
              width: 3px
            }

            section#altsayfa-galeri .container .row a.box .title span:nth-child(3) {
              bottom: 0;
              right: 0;
              height: 3px;
              width: 0%
            }

            section#altsayfa-galeri .container .row a.box .title span:nth-child(4) {
              bottom: 0;
              left: 0;
              height: 0%;
              width: 3px
            }

          section#altsayfa-galeri .container .row a.box .title:hover {
            color: #fff;
            box-shadow: 0 1px 10px 0px #999
          }

            section#altsayfa-galeri .container .row a.box .title:hover span:nth-child(1) {
              width: 100%
            }

            section#altsayfa-galeri .container .row a.box .title:hover span:nth-child(2) {
              height: 100%
            }

            section#altsayfa-galeri .container .row a.box .title:hover span:nth-child(3) {
              width: 100%
            }

            section#altsayfa-galeri .container .row a.box .title:hover span:nth-child(4) {
              height: 100%
            }

        section#altsayfa-galeri .container .row a.box:hover .title {
          background: radial-gradient(transparent 0%, rgba(0,0,0,0.2) 300%)
        }

@media screen and (max-width: 769px) {
  section#altsayfa-galeri .container .row a.box {
    flex: 0 0 50%;
    width: 50%
  }
}

@media screen and (max-width: 500px) {
  section#altsayfa-galeri .container .row a.box {
    flex: 0 0 100%;
    width: 100%
  }
}

section#altsayfa-referanslar {
  padding: 25px 0;
  background-color: #fff
}

  section#altsayfa-referanslar .container {
    width: 90%;
    margin: 0 auto
  }

    section#altsayfa-referanslar .container .row {
      display: flex;
      flex-wrap: wrap
    }

      section#altsayfa-referanslar .container .row .box {
        display: flex;
        flex: 0 0 25%;
        max-width: 25%;
        padding: 15px
      }

        section#altsayfa-referanslar .container .row .box > a {
          height: 250px;
          width: 100%;
          background-repeat: no-repeat;
          background-size: 100%;
          background-position: center;
          position: relative;
          overflow: hidden;
          border-radius: 5px;
          transition: .3s all
        }

          section#altsayfa-referanslar .container .row .box > a img {
            display: none
          }

          section#altsayfa-referanslar .container .row .box > a .title {
            margin: 0;
            position: absolute;
            color: white;
            padding: 5px 0px;
            width: calc(100% - 20px);
            background: rgba(45,40,3,0.5);
            text-align: center;
            left: 10px;
            top: 210px;
            bottom: 0px;
            font-size: 18px;
            font-weight: bold;
            text-shadow: 0 1px 2px #242424;
            transition: .3s all;
            flex-wrap: wrap
          }

            section#altsayfa-referanslar .container .row .box > a .title .incele {
              opacity: 0;
              visibility: hidden;
              font-size: 14px;
              font-weight: 400;
              flex-wrap: wrap;
              flex: 0 0 100%;
              max-width: 100%
            }

          section#altsayfa-referanslar .container .row .box > a:before {
            content: '';
            display: block;
            position: absolute;
            width: calc(100% - 20px);
            height: 100%;
            border: 10px solid rgba(45,40,3,0.5);
            border-bottom: none
          }

          section#altsayfa-referanslar .container .row .box > a:hover {
            background-size: 110%
          }

            section#altsayfa-referanslar .container .row .box > a:hover .title {
              top: 10px
            }

              section#altsayfa-referanslar .container .row .box > a:hover .title .incele {
                opacity: 1;
                visibility: visible
              }

@media (max-width: 769px) {
  section#altsayfa-referanslar .container .row .box {
    flex: 0 0 50%;
    max-width: 50%
  }
}

@media (max-width: 500px) {
  section#altsayfa-referanslar .container .row .box {
    flex: 0 0 100%;
    max-width: 100%
  }
}

section#icerik-bloglar {
  padding: 30px 0;
  background-color: #fff
}

  section#icerik-bloglar .container {
    width: 90%;
    margin: 0 auto
  }

    section#icerik-bloglar .container .row {
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -ms-flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      width: 100%
    }

      section#icerik-bloglar .container .row .blog {
        flex: 0 0 33.33%;
        max-width: 33.33%;
        padding: 30px;
        border-bottom: 1px dashed rgba(247,148,29,0.35);
        border-right: 1px dashed rgba(247,148,29,0.35)
      }

        section#icerik-bloglar .container .row .blog:nth-child(3n) {
          border-right: none
        }

        section#icerik-bloglar .container .row .blog .image {
          display: block;
          width: 100%;
          margin-bottom: 20px
        }

          section#icerik-bloglar .container .row .blog .image img {
            width: 100%;
            border-radius: 10px;
            box-shadow: 0 1px 17px -7px #333
          }

        section#icerik-bloglar .container .row .blog .subCont {
          display: flex;
          width: 100%
        }

          section#icerik-bloglar .container .row .blog .subCont .contLeft {
            flex: 0 0 15%;
            max-width: 15%
          }

            section#icerik-bloglar .container .row .blog .subCont .contLeft .date {
              padding: 5px 0;
              border: 2px solid rgba(247,148,29,0.62);
              border-radius: 8px;
              transition: .4s all;
              margin: 0px -7px
            }

              section#icerik-bloglar .container .row .blog .subCont .contLeft .date span {
                display: block;
                width: 100%;
                text-align: center;
                padding: 4px
              }

                section#icerik-bloglar .container .row .blog .subCont .contLeft .date span.month {
                  text-transform: uppercase;
                  font-size: 13px;
                  font-weight: 300;
                  color: #333
                }

                section#icerik-bloglar .container .row .blog .subCont .contLeft .date span.day {
                  font-size: 14px;
                  font-weight: 800;
                  color: #fff000
                }

                section#icerik-bloglar .container .row .blog .subCont .contLeft .date span.year {
                  font-size: 13px;
                  font-weight: 300;
                  color: #333
                }

          section#icerik-bloglar .container .row .blog .subCont .contRight {
            flex: 0 0 85%;
            max-width: 85%;
            padding: 20px
          }

            section#icerik-bloglar .container .row .blog .subCont .contRight h3 a {
              display: block;
              font-size: 20px;
              font-weight: 500;
              line-height: 1.38;
              color: #707d8c;
              margin: 0 0 20px;
              padding-bottom: 20px;
              border-bottom: solid 2px rgba(247,148,29,0.35);
              transition: .3s all;
              text-decoration: none
            }

              section#icerik-bloglar .container .row .blog .subCont .contRight h3 a:hover {
                color: #fff000;
                cursor: pointer
              }

            section#icerik-bloglar .container .row .blog .subCont .contRight p {
              font-size: 14px;
              font-weight: 300;
              color: #333;
              line-height: 19px
            }

              section#icerik-bloglar .container .row .blog .subCont .contRight p i {
                font-size: 18px;
                color: #fff000;
                vertical-align: middle;
                margin-left: -10px;
                opacity: 0;
                visibility: hidden;
                transition: .3s all
              }

        section#icerik-bloglar .container .row .blog .more {
          display: flex;
          justify-content: flex-end
        }

          section#icerik-bloglar .container .row .blog .more a {
            padding: 15px 20px;
            border-radius: 29px;
            border: 2px solid #c1cad3;
            text-align: center;
            text-decoration: none;
            color: #bdc3ca;
            font-size: 14px;
            font-weight: 300;
            letter-spacing: 2px
          }

            section#icerik-bloglar .container .row .blog .more a:hover {
              background-color: #000000;
              border-color: #fff000;
              color: #fff
            }

        section#icerik-bloglar .container .row .blog:hover .contRight p i {
          opacity: 1;
          margin-left: 2px;
          visibility: visible
        }

@media screen and (max-width: 900px) {
  section#icerik-bloglar .container .row .blog {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 10px;
    padding-bottom: 30px;
    margin-bottom: 20px;
    border-right: none
  }

    section#icerik-bloglar .container .row .blog .subCont .contLeft {
      flex: 0 0 20%;
      max-width: 20%
    }

      section#icerik-bloglar .container .row .blog .subCont .contLeft .date span {
        font-size: 12px !important
      }

    section#icerik-bloglar .container .row .blog .subCont .contRight {
      flex: 0 0 80%;
      max-width: 80%;
      padding: 10px
    }

      section#icerik-bloglar .container .row .blog .subCont .contRight h3 a {
        text-align: center;
        height: 79px
      }

      section#icerik-bloglar .container .row .blog .subCont .contRight p {
        margin-left: -30%
      }
}

@media screen and (max-width: 500px) {
  section#icerik-bloglar .container .row .blog {
    flex: 0 0 100%;
    max-width: 100%
  }
}

section#icerik-blog-icerik {
  padding: 40px 0;
  background-color: #fff
}

  section#icerik-blog-icerik .container {
    width: 90%;
    margin: 0 auto
  }

    section#icerik-blog-icerik .container .row .contBlog {
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -ms-flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      width: 100%
    }

      section#icerik-blog-icerik .container .row .contBlog .contLeft {
        flex: 0 0 10%;
        max-width: 10%
      }

        section#icerik-blog-icerik .container .row .contBlog .contLeft .date {
          padding: 10px 0;
          border: 2px solid rgba(247,148,29,0.62);
          border-radius: 8px
        }

          section#icerik-blog-icerik .container .row .contBlog .contLeft .date span {
            display: block;
            width: 100%;
            text-align: center;
            padding: 4px;
            font-size: 17px
          }

            section#icerik-blog-icerik .container .row .contBlog .contLeft .date span.month {
              text-transform: uppercase;
              font-weight: 300;
              color: #333
            }

            section#icerik-blog-icerik .container .row .contBlog .contLeft .date span.day {
              font-weight: 800;
              color: #fff000
            }

            section#icerik-blog-icerik .container .row .contBlog .contLeft .date span.year {
              font-weight: 300;
              color: #333
            }

@media screen and (min-width: 900px) {
  section#icerik-blog-icerik .container .row .contBlog .contLeft .date {
    margin: 0 15px
  }
}

section#icerik-blog-icerik .container .row .contBlog .contCenter {
  flex: 0 0 65%;
  max-width: 65%;
  padding: 10px 30px
}

  section#icerik-blog-icerik .container .row .contBlog .contCenter h3 {
    display: block;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.38;
    color: #5d6670;
    margin: 0 0 15px;
    padding-bottom: 20px;
    border-bottom: solid 2px rgba(247,148,29,0.35);
    transition: .3s all;
    text-decoration: none
  }

  section#icerik-blog-icerik .container .row .contBlog .contCenter .contC-icerik .image {
    width: 100%;
    height: 350px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 25px 0
  }

  section#icerik-blog-icerik .container .row .contBlog .contCenter .contC-icerik .icerik {
    line-height: 21px;
    font-family: calibri, sans-serif
  }

    section#icerik-blog-icerik .container .row .contBlog .contCenter .contC-icerik .icerik ul {
      list-style: disc;
      padding-left: 20px
    }

@media (max-width: 769px) {
  section#icerik-blog-icerik .container .row .contBlog .contCenter .contC-icerik .icerik img {
    width: 100%;
    height: auto
  }
}

section#icerik-blog-icerik .container .row .contBlog .contRight {
  flex: 0 0 25%;
  max-width: 25%;
  padding: 15px
}

  section#icerik-blog-icerik .container .row .contBlog .contRight h5 {
    color: #333;
    font-size: 19px;
    font-weight: 500;
    margin-bottom: 15px
  }

  section#icerik-blog-icerik .container .row .contBlog .contRight ul {
    width: 100%
  }

    section#icerik-blog-icerik .container .row .contBlog .contRight ul li {
      display: flex;
      width: 100%
    }

      section#icerik-blog-icerik .container .row .contBlog .contRight ul li a {
        width: 100%;
        color: #4c4a4d;
        padding: 10px 0;
        display: block;
        font-size: 14px;
        font-weight: 400;
        border-bottom: dashed 1px #dfe7f0;
        text-decoration: none;
        letter-spacing: .5px;
        transition: .4s all;
        line-height: 19px
      }

        section#icerik-blog-icerik .container .row .contBlog .contRight ul li a span {
          display: inline-block;
          width: 20px;
          height: 20px;
          line-height: 20px;
          text-indent: 2px;
          border-radius: 10rem;
          text-align: center;
          font-size: 75%;
          font-weight: 400;
          float: right;
          background: #fff000;
          color: #fff;
          border: 1px solid transparent
        }

        section#icerik-blog-icerik .container .row .contBlog .contRight ul li a.active {
          font-weight: 700
        }

        section#icerik-blog-icerik .container .row .contBlog .contRight ul li a:hover {
          color: #fff000
        }

          section#icerik-blog-icerik .container .row .contBlog .contRight ul li a:hover span {
            background: #fff;
            color: #fff000;
            border: 1px solid #fff000
          }

@media screen and (max-width: 769px) {
  section#icerik-blog-icerik .container .row .contBlog .contCenter {
    padding: 10px 5px
  }

  section#icerik-blog-icerik .container .row .contBlog .contLeft {
    flex: 0 0 20%;
    max-width: 20%
  }

    section#icerik-blog-icerik .container .row .contBlog .contLeft .date span {
      font-size: 11px
    }

  section#icerik-blog-icerik .container .row .contBlog .contCenter {
    flex: 0 0 80%;
    max-width: 80%
  }

    section#icerik-blog-icerik .container .row .contBlog .contCenter h3 {
      padding: 0 30px 25px 30px
    }

    section#icerik-blog-icerik .container .row .contBlog .contCenter .contC-icerik {
      margin-top: 40px;
      margin-left: -25%
    }

  section#icerik-blog-icerik .container .row .contBlog .contRight {
    flex: 0 0 100%;
    max-width: 100%
  }
}

div.teklif-al {
  position: fixed;
  top: 50%;
  right: -55px;
  transform: rotate(-90deg);
  z-index: 9
}

  div.teklif-al button {
    border: none;
    color: #000000;
    width: 150px;
    height: 40px;
    cursor: pointer;
    background-color: #fff000;
    letter-spacing: 1.2px;
    outline: none;
    box-shadow: 0 0px 11px -1px #fff000;
    border-radius: 5px 5px 0 0
  }

    div.teklif-al button:hover {
      background-color: #000;
      color: #fff000
    }

    div.teklif-al button:active {
      background-color: #31250c
    }

@media screen and (max-width: 769px) {
  div.teklif-al {
    right: -43px
  }

    div.teklif-al button {
      width: 120px;
      height: 35px
    }
}

#teklif-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: fit-content;
  z-index: 11;
  top: 30px;
  left: calc(50% - 250px)
}

  #teklif-modal .container {
    max-width: 500px;
    width: 100%;
    margin: 0 auto
  }

    #teklif-modal .container .row {
      background: white;
      border-radius: 10px;
      box-shadow: 0 15px 30px 0 rgba(0,0,0,0.11),0 5px 15px 0 rgba(0,0,0,0.08)
    }

      #teklif-modal .container .row .head {
        display: flex;
        border-radius: 10px 10px 0 0;
        padding: 10px;
        background-color: #fff000;
        color: #000000;
        margin-bottom: 10px
      }

        #teklif-modal .container .row .head h3 {
          font-size: 20px;
          /*font-weight: 600;*/
          margin-right: auto;
          align-items: center;
          display: flex
        }

        #teklif-modal .container .row .head span {
          margin-left: auto;
          font-size: 30px;
          align-items: center;
          display: flex;
          padding: 10px;
          cursor: pointer
        }

      #teklif-modal .container .row .body {
        padding: 10px 15px
      }

        #teklif-modal .container .row .body form {
          display: flex;
          flex-wrap: wrap
        }

          #teklif-modal .container .row .body form .form-group {
            flex: 0 0 100%;
            max-width: 100%;
            margin-bottom: 5px;
            padding: 6px 10px
          }

            #teklif-modal .container .row .body form .form-group label {
              display: block;
              width: 100%;
              margin-bottom: 10px;
              font-size: 14px;
              font-weight: 400
            }

              #teklif-modal .container .row .body form .form-group label strong {
                color: red
              }

            #teklif-modal .container .row .body form .form-group input, #teklif-modal .container .row .body form .form-group textarea {
              width: 100%;
              padding: 10px;
              font-size: 15px;
              font-weight: 400;
              border: 1px solid #cacaca
            }

              #teklif-modal .container .row .body form .form-group input:focus, #teklif-modal .container .row .body form .form-group textarea:focus {
                outline: none;
                border: 1px solid #fff000
              }

            #teklif-modal .container .row .body form .form-group button {
              padding: 10px 15px;
              background-color: #000;
              border: 1px solid #fff000;
              border-radius: 3px;
              float: right;
              cursor: pointer;
              color: white;
              box-shadow: 0 0 5px -1px #666;
              position: relative;
              outline: none;
              display: inline-block;
              vertical-align: middle;
              -webkit-transform: perspective(1px) translateZ(0);
              transform: perspective(1px) translateZ(0);
              -webkit-transition-property: color;
              transition-property: color;
              -webkit-transition-duration: 0.3s;
              transition-duration: 0.3s
            }

              #teklif-modal .container .row .body form .form-group button:hover:before {
                -webkit-transform: scaleY(0);
                transform: scaleY(0)
              }

              #teklif-modal .container .row .body form .form-group button:before {
                content: "";
                position: absolute;
                z-index: -1;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background: #fff000;
                -webkit-transform: scaleY(1);
                transform: scaleY(1);
                -webkit-transform-origin: 50%;
                transform-origin: 50%;
                -webkit-transition-property: transform;
                transition-property: transform;
                -webkit-transition-duration: 0.3s;
                transition-duration: 0.3s;
                -webkit-transition-timing-function: ease-out;
                transition-timing-function: ease-out
              }

@media (max-width: 500px) {
  #teklif-modal .container .row .body {
    padding: 5px
  }
}

@media (max-width: 767px) {
  #teklif-modal {
    height: 100%;
    overflow: auto;
    padding: 6px;
    top: 10px
  }
}

@media (max-width: 500px) {
  #teklif-modal {
    left: 0
  }
}

#teklif-modal-simple {
  display: none;
  background-color: rgba(0,0,0,0.5);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10
}

.teklifStatus {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  z-index: 10
}

  .teklifStatus .container {
    position: absolute;
    top: 30%;
    left: calc(50% - 125px);
    width: 250px;
    text-align: center
  }

    .teklifStatus .container .box {
      padding: 25px;
      background-color: #fff;
      border-radius: 15px;
      box-shadow: 0 1px 10px -1px #282828
    }

      .teklifStatus .container .box i {
        display: block;
        width: 100%;
        font-size: 45px;
        margin: 0 auto;
        text-align: center
      }

        .teklifStatus .container .box i.fa-check-double {
          color: #53bd5a
        }

        .teklifStatus .container .box i.fa-exclamation-circle {
          color: #e23737
        }

        .teklifStatus .container .box i.fa-exclamation-triangle {
          color: #ffaa2c
        }

      .teklifStatus .container .box span.text {
        display: block;
        width: 100%;
        font-size: 14px;
        color: #333;
        margin-top: 20px
      }

      .teklifStatus .container .box button {
        display: block;
        text-align: center;
        background-color: #fff000;
        border: none;
        box-shadow: 0 1px 8px -1px #fff000;
        padding: 10px;
        color: #fff;
        font-weight: 600;
        border-radius: 5px;
        margin: 0 auto;
        margin-top: 25px;
        cursor: pointer;
        outline: none
      }

        .teklifStatus .container .box button:hover {
          background-color: #fff000
        }

        .teklifStatus .container .box button:focus {
          box-shadow: 0 0 0 3px #fff000
        }

.placeholder .hb-pl-cn {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
  animation-name: placeholderAnimate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  background-color: #ddd !important
}

@keyframes placeholderAnimate {
  0% {
    opacity: 0
  }

  25% {
    opacity: .25
  }

  50% {
    opacity: .5
  }

  75% {
    opacity: .75
  }

  100% {
    opacity: 1
  }
}

.placeholder .lds-ring {
  position: relative;
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center
}

  .placeholder .lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 51px;
    height: 51px;
    margin: 6px;
    border: 6px solid #FCB711;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #FCB711 transparent transparent transparent
  }

    .placeholder .lds-ring div:nth-child(1) {
      animation-delay: -0.45s
    }

    .placeholder .lds-ring div:nth-child(2) {
      animation-delay: -0.3s
    }

    .placeholder .lds-ring div:nth-child(3) {
      animation-delay: -0.15s
    }

@keyframes lds-ring {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(360deg)
  }
}

.modal-btn {
  color: black !important;
}
.modal-btn:hover{
  color:white !important;
}