@charest "utf-8";
/* author Fuba Image == FrameWorkV2 */

@import url("alt-sayfa.css");

section .ust {
    background-image: url(../img/kurumsal-ust.jpg)
}

section .sayfa.hakkimizda {
    text-align: center
}

section div.grid > p {
    font-family: 'Roboto';
    font-weight: 300;
    font-size: 17px;
    color: #022b3f;
    text-align: center
}

section .hakkimizda h3 {
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 20px;
    color: #b6a071;
    margin: 25px 0;
    text-transform: capitalize
}

section .hakkimizda .photo {
    margin: 35px 0;
    position: relative
}

section .hakkimizda .photo:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: -18px;
    top: 20px;
    border: 1px solid #ccc;
    z-index: -1
}

section .hakkimizda .photo img {
    width: 100%
}

section .tarihcemiz .tarihceler {
    position: relative;
    margin-top: 20px;
    padding-top: 110px;
    margin-bottom: 50px;
    padding-bottom: 50px
}

section .tarihcemiz .tarihceler .orta-cizgi {
    position: absolute;
    height: 100%;
    width: 1px;
    background-color: #ccc;
    left: 50%;
    top: 0
}

section .tarihcemiz .tarihceler .tarihce {
    margin-top: -30px;
    position: relative
}

section .tarihcemiz .tarihceler .tarihce .orta {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 17%;
    z-index: 1
}

section .tarihcemiz .tarihceler .tarihce .orta .cizgi {
    height: 1px;
    background-color: #ccc
}

section .tarihcemiz .tarihceler .tarihce .orta .cizgi:before,
section .tarihcemiz .tarihceler .tarihce .orta .cizgi:after {
    content: "";
    display: block;
    float: left;
    width: 4px;
    height: 4px;
    background-color: #ccc;
    border-radius: 50%;
    transform: translateY(-1.5px)
}

section .tarihcemiz .tarihceler .tarihce .orta .cizgi:after {
    float: right
}

section .tarihcemiz .tarihceler .tarihce .orta .yuvarlak {
    width: 30px;
    height: 30px;
    background-color: #ccc;
    border: 5px solid #fff;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%)
}

section .tarihcemiz .tarihceler .tarihce .photo {
    width: 40%;
    height: 335px;
    position: relative;
    float: left
}

section .tarihcemiz .tarihceler .tarihce .photo:before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: -10px;
    top: 10px;
    border: 1px solid #ccc
}

section .tarihcemiz .tarihceler .tarihce .photo div {
    height: 100%;
    background-size: cover;
    position: relative;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%)
}

section .tarihcemiz .tarihceler .tarihce p {
    float: left;
    padding-right: 60%;
    margin-top: 40px;
    font-family: 'Roboto';
    font-weight: 300;
    font-size: 17px;
    color: #022b3f;
    text-align: justify
}

section .tarihcemiz .tarihceler .tarihce .tarih {
    width: 40%;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%)
}

section .tarihcemiz .tarihceler .tarihce .tarih * {
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 44px;
    color: #b6a071;
    text-align: left
}

section .tarihcemiz .tarihceler .tarihce .tarih h4 {
    font-size: 25px
}

section .tarihcemiz .tarihceler .tarihce:nth-of-type(2n+1) .photo {
    float: right
}

section .tarihcemiz .tarihceler .tarihce:nth-of-type(2n+1) .tarih {
    right: auto;
    left: 0
}

section .tarihcemiz .tarihceler .tarihce:nth-of-type(2n+1) .tarih * {
    text-align: right
}

section .tarihcemiz .tarihceler .tarihce:nth-of-type(2n+1) p {
    padding-right: 0;
    padding-left: 60%
}

section .haberler a {
    display: block;
    padding: 10px;
    border-top: 1px solid #f2f2f1;
    background-color: #f9f9f9
}

section .haberler a:nth-of-type(2n+0) {
    background-color: #fff
}

section .haberler a:last-of-type {
    border-bottom: 1px solid #f2f2f1
}

section .haberler a div {
    float: left;
    width: 95px;
    height: 70px;
    border: 1px solid #f3f3f3;
    background-size: cover;
    margin-right: 13px
}

section .haberler a h3 {
    font-family: 'Roboto';
    font-weight: 500;
    font-size: 16px;
    color: #5f5f5f;
    text-transform: capitalize;
    margin: 9px 0
}

section .haberler a p {
    font-family: arial;
    font-size: 13px;
    color: #a3a3a3;
    margin-bottom: 5px;
    max-height: 18px;
    overflow: hidden
}

section .haberler a span {
    display: block;
    font-family: arial;
    font-weight: 400;
    font-size: 11px;
    color: #d0d0d0;
    text-transform: capitalize
}

section .haberler a span:before {
    content: "";
    display: block;
    float: left;
    width: 13px;
    height: 14px;
    margin-right: 10px;
    background-image: url(../img/avci-icon.png);
    background-position: -718px center
}

section .haber-detay .geri {
    display: block;
    position: absolute;
    right: 0;
    top: 32px;
    border: 1px solid #e1e1e1;
    padding: 10px 37px 10px 21px;
    font-family: arial;
    font-size: 14px;
    color: #a0a0a0;
    text-transform: uppercase
}

section .haber-detay .geri:before {
    content: "";
    display: block;
    float: left;
    width: 20px;
    height: 15px;
    background-image: url(../img/avci-icon.png);
    background-position: -677px center;
    margin-right: 14px;
    -wekit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

section .haber-detay .geri:hover:before {
    margin-right: 20px;
    -wekit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

section .haber-detay .haber-banner .slider {
    height: 485px;
    background-size: cover
}

section .haber-detay .haber-banner .slick-arrow {
    width: 65px;
    height: 65px;
    background-color: rgba(25, 31, 34, .58);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0;
    background-image: url(../img/avci-icon.png);
    background-position: -1530px center;
    -wekit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

section .haber-detay .haber-banner .slick-arrow:hover {
    background-color: rgba(25, 31, 34, 1);
    -wekit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

section .haber-detay .haber-banner .slick-prev {
    left: 15px
}

section .haber-detay .haber-banner .slick-next {
    right: 15px;
    transform: rotate(180deg) translateY(50%)
}

section .haber-detay h3 {
    font-family: 'Roboto';
    font-weight: 700;
    font-size: 17px;
    color: #45494d;
    margin: 29px 0 25px;
    text-transform: capitalize
}

section .haber-detay .grid p {
    font-family: arial;
    font-size: 14px;
    color: #565656;
    text-align: left;
    margin-bottom: 20px
}

@media (max-width: 850px) {
    section .haber-detay .haber-banner .slider {
        height: 400px
    }
}

@media (max-width: 750px) {
    section .tarihcemiz .tarihceler {
        padding-top: 0
    }
    
    section .tarihcemiz .tarihceler .orta-cizgi {
        display: none
    }
    
    section .tarihcemiz .tarihceler .tarihce {
        margin: 20px 0;
        padding: 20px 0;
        border-bottom: 1px solid #ccc
    }
    
    section .tarihcemiz .tarihceler .tarihce .photo {
        width: 100%
    }
    
    section .tarihcemiz .tarihceler .tarihce .tarih {
        position: relative;
        float: left;
        transform: translate(0);
        width: 100%;
        margin: 20px 0
    }
    
    section .tarihcemiz .tarihceler .tarihce .tarih * {
        text-align: left !important
    }
    
    section .tarihcemiz .tarihceler .tarihce p {
        padding: 0 !important;
        margin: 0
    }
    
    section .tarihcemiz .tarihceler .tarihce .orta {
        display: none
    }
    
    section .haberler a h3 {
        font-size: 14px
    }
    
    section .haber-detay .haber-banner .slider {
        height: 350px
    }
}

@media (max-width: 550px) {
    section .haber-detay .haber-banner .slider {
        height: 220px
    }
}