@charest "utf-8";

@import url('slick.css');

@import url('jquery.fancybox.min.css');

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');

@import url('hamburgers.css');

@font-face {
    font-family: 'korolmedium';
    src: url('../fonts/korolev/medium/korolev.eot');
    src: url('../fonts/korolev/medium/korolev.eot?#iefix') format('embedded-opentype'),
         url('../fonts/korolev/medium/korolev.woff2') format('woff2'),
         url('../fonts/korolev/medium/korolev.woff') format('woff'),
         url('../fonts/korolev/medium/korolev.ttf') format('truetype');
    font-weight: normal
}

@font-face {
    font-family: 'adellebold';
    src: url('../fonts/adelle/bold/adellebold.eot');
    src: url('../fonts/adelle/bold/adellebold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/adelle/bold/adellebold.woff2') format('woff2'),
         url('../fonts/adelle/bold/adellebold.woff') format('woff'),
         url('../fonts/adelle/bold/adellebold.ttf') format('truetype');
    font-weight: normal
}

@font-face {
    font-family: 'adelleregular';
    src: url('../fonts/adelle/regular/adelleregular.eot');
    src: url('../fonts/adelle/regular/adelleregular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/adelle/regular/adelleregular.woff2') format('woff2'),
         url('../fonts/adelle/regular/adelleregular.woff') format('woff'),
         url('../fonts/adelle/regular/adelleregular.ttf') format('truetype');
    font-weight: normal
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: 300;
    list-style: none;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

a {
    color: inherit;
    text-decoration: none;
    font-weight: inherit
}

.grid {
    max-width: 1170px;
    position: relative;
    margin: 0 auto
}

body {
    overflow-x: hidden;
    background-image: url(../img/body-zemin.jpg);
    background-position: center top;
    background-color: #f0f1f3
}

.clear:after,
.flt > *:last-of-type:after {
    content: "";
    clear: both;
    display: block
}

[data-fancybox], form * {
    outline: 0
}

header {
    height: 120px;
    background-color: #fff;
    background-image: url(../img/header-zemin.png);
    border-radius: 0 0 5px 5px;
    box-shadow: 0 2px 0 #c2c2c2;
    padding: 0 30px;
    position: relative;
    z-index: 2;
    background-position: 200px center
}

header .iletisim {
    float: left;
    font-family: 'korolmedium';
    color: #7e7e7e;
    margin: 55px 0 0;
    padding-left: 25px;
    background-position: left center;
    font-size: 20px
}

header .iletisim:hover {
    text-decoration: underline
}

header .logo {
    width: 365px;
    height: 95px;
    background-image: url(../img/logo.png);
    float: left;
    margin: 12px 10px 0 0
}

header .mail {
    background-image: url(../img/header-mail.png);
    margin-right: 15px
}

header .phone {
    background-image: url(../img/header-phone.png);
    margin-top: 40px;
    margin-right: 40px
}

header .doviz {
    float: left;
    padding: 5px;
    margin: 30px 0 0 13px;
    border: 1px solid #d6d6d6;
    border-top: 0;
    border-bottom: 0
}

header .doviz > div {
    float: left;
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 15px;
    color: #033763;
    padding: 5px
}

header .doviz > div span {
    font-weight: 500;
    text-transform: capitalize;
    width: 75px;
    display: inline-block;
    color: #018ad2
}

header .doviz .dolar {
    margin-right: 5px
}

header .right {
    float: right;
    margin-top: 45px
}

header .right .social {
    display: block;
    width: 31px;
    height: 31px;
    border: 1px solid #939496;
    border-radius: 50%;
    float: left;
    margin-right: 10px;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out
}

header .right .social:hover {
    transform: translateY(-3px);
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out
}

header .right .insta {
    background-image: url(../img/header-insta.png);
    border-color: #8a3ab9
}

header .right .twitter {
    background-image: url(../img/header-twitter.png)
}

header .right .face {
    background-image: url(../img/header-face.png);
    border-color: #3b589d
}

header .right .youtube {
    background-image: url(../img/header-youtube.png);
    border-color: #f41000
}

header .right .pin {
    background-image: url(../img/header-pin.png)
}

header .right .dil {
    float: left;
    padding-left: 33px;
    text-transform: uppercase;
    opacity: .47;
    color: #555555;
    margin-top: 7px;
    font-family: arial;
    background-position: left center;
    background-color: #fff;
    background-blend-mode: luminosity;
    display: none
}

header .right .dil.tiklama {
    display: none
}

header .right .dil.tiklama,
header .right .dil:hover {
    opacity: 1;
    background-blend-mode: normal;
    color: #b3b3b3
}

header .right .en {
    background-image: url(../img/header-english.png);
    margin-right: 10px
}

header .right .tr {
    background-image: url(../img/header-turkish.png)
}

nav {
    margin: 0 30px;
    background-color: #033764;
    box-shadow: 0 2px 0 #012e56;
    padding: 20px 0;
    position: relative;
    z-index: 99999
}

nav > ul {
    display: flex
}

nav > ul > li {
    border-right: 1px solid #145186;
    width: 100%
}

nav ul li:hover {
    color: #fff
}

nav > ul > li:last-of-type {
    border: 0
}

nav > ul > li > a {
    display: block;
    font-family: 'Roboto';
    font-weight: 400;
    color: #cae7ff;
    text-align: center;
    text-transform: uppercase
}

nav > ul > li > ul {
    position: absolute;
    display: none;
    padding-top: 20px
}

nav > ul > li:hover > ul {
    display: block
}

nav > ul > li > ul li {
    background-color: #012e55;
    padding: 15px 20px;
    font-family: 'Roboto';
    font-weight: 400;
    color: #cae7ff;
    border-bottom: 1px solid #043f71;
    width: 250px;
    text-transform: uppercase
}

section .marka {
    width: 32.36%;
    margin-right: 1.45%;
    height: 175px;
    background-color: #246399;
    float: left;
    margin-bottom: 20px;
    position: relative;
    background-size: cover
}

section .marka:after {
    content: "";
    position: absolute;
    height: 85%;
    width: 90%;
    top: 7.5%;
    left: 5%;
    border: 1px solid rgba(255, 255, 255, .5);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

section .marka:hover:after {
    background-color: rgba(255, 255, 255, .1);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

section .ic .urun-baslik,
section .calisan-baslik {
    font-family: 'Roboto';
    font-weight: 500;
    font-size: 20px;
    color: #9a9a9a;
    text-transform: capitalize;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e2e2;
    margin-bottom: 10px;
    float: left;
    width: 100%
}

section .harita .turkey {
    float: left;
    height: 422px;
    width: 885px;
    background-image: url(../img/harita-turkey.png);
    position: relative
}

section .harita .turkey .ope:hover .hover {
    display: block
}

section .harita .turkey .dis {
    position: absolute;
    cursor: pointer
}

section .harita .turkey .dis1 {
    width: 111px;
    height: 84px;
    left: 36%;
    bottom: 10%
}

section .harita .turkey .dis2 {
    width: 50px;
    height: 100px;
    left: 47%;
    bottom: 20%
}

section .harita .turkey .dis3 {
    width: 36px;
    height: 40px;
    left: 52.5%;
    bottom: 24%
}

section .harita .turkey .dis4 {
    width: 36px;
    height: 76px;
    left: 56%;
    bottom: 27%
}

section .harita .turkey .dis5 {
    width: 45px;
    height: 60px;
    left: 52%;
    bottom: 9%
}

section .harita .turkey .sehir {
    width: 18px;
    height: 18px;
    border: 5px solid #fff;
    border-radius: 50%;
    position: absolute;
    animation: sehir 2s infinite;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

@keyframes sehir {
    0% {
        border-width: 1px;
        transform: scale(.4)
    }
    
    50% {
        border-width: 5px;
        transform: scale(1)
    }
    100% {
        border-width: 1px;
        transform: scale(.4)
    }
}

section .harita .turkey .sy1 {
    left: 42%;
    bottom: 38%
}

section .harita .turkey .sy2 {
    left: 50%;
    bottom: 26%
}

section .harita .turkey .sy3 {
    left: 23%;
    bottom: 13%
}

section .harita .turkey .sy4 {
    left: 34%;
    bottom: 25%
}

section .harita .turkey .sy5 {
    left: 17%;
    bottom: 29%
}

section .harita .turkey .hover {
    width: 242px;
    height: 276px;
    position: absolute;
    padding: 115px 30px;
    display: none;
    z-index: 999
}

section .harita .turkey .hover p {
    font-family: 'adelleregular';
    font-size: 13px;
    text-align: center;
    margin-bottom: 10px
}

section .harita .turkey .hover a {
    display: inline-block;
    font-family: 'adelleregular';
    font-size: 13px;
    padding: 10px 15px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 3px;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
    text-transform: capitalize;
    margin-left: 25px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

section .harita .turkey .hover a:hover {
    background-color: rgba(255, 255, 255, .8);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

section .harita .turkey .hover1 {
    background-image: url(../img/harita-hover-1.png);
    left: 28.9%;
    bottom: 16%
}

section .harita .turkey .hover1 p {
    color: #62480b
}

section .harita .turkey .hover1 a {
    color: #e6a918
}

section .harita .turkey .hover2 {
    background-image: url(../img/harita-hover-2.png);
    left: 37.4%;
    bottom: 24%
}

section .harita .turkey .hover2 p {
    color: #095973
}

section .harita .turkey .hover2 a {
    color: #34abd2
}

section .harita .turkey .hover3 {
    background-image: url(../img/harita-hover-3.png);
    left: 41%;
    bottom: 24%
}

section .harita .turkey .hover3 p {
    color: #7d1010
}

section .harita .turkey .hover3 a {
    color: #e14444
}

section .harita .turkey .hover4 {
    background-image: url(../img/harita-hover-4.png);
    left: 45%;
    bottom: 29%
}

section .harita .turkey .hover4 p {
    color: #2e711e
}

section .harita .turkey .hover4 a {
    color: #5aab48
}

section .harita .turkey .hover5 {
    background-image: url(../img/harita-hover-5.png);
    left: 40.5%;
    bottom: 11%
}

section .harita .turkey .hover5 p {
    color: #673d96
}

section .harita .turkey .hover5 a {
    color: #8a55c5
}

section .guncellenmisurunler .urunlerList {
    float: left;
    width: 100%
}

section .guncellenmisurunler .urunlerList a.marka {
    width: 23.9%
}

section .guncellenmisurunler .urunlerList a.marka:nth-of-type(3n+0) {
    margin-right: 1.45%
}

section .guncellenmisurunler .urunlerList a.marka:nth-of-type(4n+0) {
    margin-right: 0
}

section .pdf {
    position: absolute;
    top: 40%;
    right: 20px;
    font-weight: 400;
    font-size: 16px;
    color: #a5a5a5;
    font-family: 'Roboto';
    text-decoration: underline
}

section .pdf {
    color: #828282
}

footer {
    background-color: #033764;
    margin-top: 50px;
    padding-top: 40px
}

footer .grid > * {
    float: left
}

footer .kurumsal,
footer .kategoriler {
    width: 158px;
    margin-right: 80px
}

footer .urunlerimiz {
    width: 155px;
    margin-right: 80px
}

footer .sosyal,
footer .ebulten{
    width: 175px;
    margin-right: 59px
}

footer .iletisim {
    width: 225px
}

footer .footer-baslik,
footer .ebulten .footer-baslik {
    text-transform: uppercase;
    font-family: arial;
    font-size: 14px;
    color: #ffbf27;
    padding-bottom: 10px;
    margin-bottom: 25px;
    border-bottom: 1px solid #1c4f7b
}

footer a {
    display: block;
    font-family: arial;
    font-size: 14px;
    color: #89b8e0;
    margin-bottom: 11px;
    text-transform: uppercase
}

footer a:hover {
    color: #fff
}

footer .sosyal {
    float: right;
    margin: 10px 0 0;
    width: 225px
}

footer .sosyal a {
    width: 31px;
    height: 31px;
    border: 1px solid #76a4cb;
    border-radius: 50%;
    float: left;
    margin-right: 10px;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out
}

footer .sosyal a:hover {
    transform: translateY(-3px);
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out
}

footer .sosyal .insta {
    background-image: url(../img/footer-insta.png)
}

footer .sosyal .twitter {
    background-image: url(../img/footer-twitter.png)
}

footer .sosyal .face {
    background-image: url(../img/footer-face.png)
}

footer .sosyal .youtube {
    background-image: url(../img/footer-youtube.png)
}

footer .sosyal .pin {
    background-image: url(../img/footer-pin.png)
}

footer .ebulten p {
    font-family: arial;
    font-size: 11px;
    color: #6d9bc3;
    margin-bottom: 7px
}

footer .ebulten input {
    width: 100%;
    height: 40px;
    margin-bottom: 5px
}

footer .ebulten input[type="email"],
footer .ebulten input[type="text"],
footer .ebulten input[type="tel"] {
    border: 1px solid #2c679a;
    text-align: center;
    font-family: arial;
    font-size: 14px;
    color: #033764
}

footer .ebulten ::-webkit-input-placeholder {
    color: #7098ba
}

footer .ebulten ::-moz-input-placeholder {
    color: #7098ba
}

footer .ebulten :-moz-input-placeholder {
    color: #7098ba
}

footer .ebulten :-ms-input-placeholder {
    color: #7098ba  
}

footer .ebulten input[type="submit"] {
    background-color: #1b6cb2;
    border: 1px solid #2d7ec3;
    font-family: arial;
    font-size: 15px;
    color: #fff;
    text-transform: uppercase
}

footer .iletisim .bas,
footer .iletisim address {
    font-family: arial;
    font-size: 15px;
    color: #89b8e0;
    font-style: normal
}

footer .iletisim .bas {
    text-transform: uppercase;
    margin-bottom: 15px
}

footer .iletisim a {
    margin-bottom: 0;
    text-transform: inherit
}

footer .iletisim a span {
    font-weight: 700
}

footer .iletisim .map {
    text-transform: uppercase;
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 17px;
    color: #89b8e0;
    background-image: url(../img/footer-map.png);
    background-position: left center;
    padding: 5px 0 5px 30px;
    margin-top: 10px
}

footer .iletisim .map:after {
    content: "";
    width: 13px;
    height: 13px;
    background-image: url(../img/footer-map-after.png);
    opacity: .6;
    display: inline-block;
    margin-left: 5px;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out
}

footer .iletisim .map:hover:after {
    margin-left: 12px;
    opacity: 1;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out
}

.alt-footer {
    width: 100%;
    margin-top: 20px;
    border-top: 1px solid #0f497b;
    height: 60px;
    border-bottom: 1px solid #48509c
}

.alt-footer p,
.alt-footer a {
    font-family: arial;
    font-size: 14px;
    color: #3f78aa;
    line-height: 60px
}

.alt-footer a {
    font-size: 15px;
    float: right;
    display: block;
    margin: 0;
    text-transform: inherit
}

@media (max-width: 1170px) {
    .grid {
        margin: 0 20px
    }
    
    header .right .social {
        display: none
    }
    header .mail,
    header .phone {
        position: absolute;
        top: 102px;
        left: 50px;
        color: #cae7ff
    }
    
    header .mail {
        background-image: url(../img/header-mail-responsive.png)
    }
    
    header .phone {
        background-image: url(../img/header-phone-responsive.png)
    }
    
    header .logo {
        top: 15px
    }
    
    nav {
        padding: 0
    }
    
    nav > ul {
        display: none
    }
    
    nav > ul li {
        float: none;
        width: 100%;
        padding: 15px 0;
        border-bottom: 1px solid #145186;
        border-right: 0;
        background-color: #0c2e54;
        color: #cae7ff;
        font-weight: 500
    }
    
    nav > ul > li > ul {
        position: relative
    }
    
    nav > ul > li > ul li {
        width: 100%;
        text-align: center;
        background-color: #0f3764
    }
    
    section .harita .turkey {
        width: 100%
    }
    
    section .harita .turkey .dis1 {
        left: 39%;
        bottom: 11%
    }
    
    section .harita .turkey .dis4 {
        left: 54%
    }
    
    footer .grid > * {
        width: 49%;
        margin: 0 2% 0 0
    }
    
    footer .grid > *:nth-of-type(2n+0) {
        margin-right: 0
    }
    
    footer .ebulten {
        border: 0;
        padding: 0
    }
    
    footer .ebulten .footer-baslik {
        border-bottom: 1px solid #1c4f7b;
        margin-bottom: 25px
    }
    
    footer .alt-footer p,
    footer .alt-footer a {
        width: auto
    }
}

@media (max-width: 850px) {
    header {
        height: 180px;
        background-position: center bottom
    }
    
    header .mail, header .phone {
        top: 160px
    }
    
    header .right {
        position: absolute;
        right: 20px
    }
    
    header .doviz {
        width: 100%;
        margin: 0;
        padding: 0
    }
    
    header .doviz > div {
        width: 50%;
        margin: 0 !important
    }
    
    header .doviz > div div {
        float: left;
        width: 50%
    }
}

@media (max-width: 794px) {
    section .harita .turkey {
        width: 100%;
        background-image: none
    }
    
    section .harita .turkey .dis {
        display: none
    }
    
    section .harita .turkey .hover {
        display: block;
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
        background-image: none;
        padding: 15px 7px;
        margin-top: 5px
    }
    
    section .harita .turkey .hover p {
        width: 70%;
        float: left;
        text-align: left;
        margin: 0;
        line-height: 36px;
        height: 36px;
        overflow: hidden
    }
    
    section .harita .turkey .hover p:before {
        font-size: 17px;
        font-family: 'adellebold';
        margin-right: 15px;
        text-transform: uppercase;
        color: #fff;
        display: inline-block;
        width: 45%
    }
    
    section .harita .turkey .hover a {
        width: 27%;
        text-align: center;
        float: right;
        margin-left: 0
    }
    
    section .harita .turkey .hover1 {
        background-color: #ffbf27
    }
    
    section .harita .turkey .hover1 p:before {
        content: "mersin"
    }

    section .harita .turkey .hover2 {
        background-color: #2babd4
    }
    
    section .harita .turkey .hover2 p:before {
        content: "adana"
    }
    
    section .harita .turkey .hover3 {
        background-color: #e3423f
    }
    
    section .harita .turkey .hover3 p:before {
        content: "osmaniye"
    }

    section .harita .turkey .hover4 {
        background-color: #81e868
    }
    
    section .harita .turkey .hover4 p:before {
        content: "kahramanmaraş"
    }

    section .harita .turkey .hover5 {
        background-color: #b172f4
    }
    
    section .harita .turkey .hover5 p:before {
        content: "hatay"
    }
}

@media (max-width: 700px) {
    footer .alt-footer {
        padding: 20px 0;
        height: auto
    }
    
    footer .alt-footer p,
    footer .alt-footer a {
        line-height: 1;
        width: 100%;
        text-align: center;
        float: none
    }
}

@media (max-width: 625px) {
    header {
        padding: 0 10px
    }
    
    header .logo {
        width: 100%;
        margin-right: 0;
        background-size: contain;
        height: 80px;
        background-position: left center
    }
    
    header .doviz > div {
        width: 100%;
        font-size: 12px
    }
}

@media (max-width: 600px) {
    header .mail {
        display: none
    }
    
    footer .grid > * {
        width: 100%;
        margin: 0 0 5px
    }
}

@media (max-width: 550px) {
    section .harita .turkey .hover p {
        width: 65%
    }
    
    section .harita .turkey .hover a {
        width: 35%;
        padding: 10px 0;
        font-size: 10px
    }
    
    section .harita .turkey .hover p:before {
        width: 100%;
        font-size: 15px
    }
}

@media (max-width: 355px) {
    header .phone {
        display: none
    }
}

@media (min-width: 1170px) {
    nav .menu-b {
        display: none
    }
    
    nav > ul {
        display: flex !important
    }
    
    nav > ul > li.genis {
    width: 150%
    }

    nav > ul > li.dar {
        width: 75%
    }
}