body{ width: 100%; height: 100%; padding: 0; margin: 0; font-family: 'Gotham Narrow', sans-serif; color: #111; font-weight: 500; background-color: #fff; overflow: auto; overflow-x: hidden;}

.loading{ position: fixed; width: 100%; height: 100vh; background: #fff; top: 0; left: 0; z-index: 9999999999999999;}

.asd{ height: 500px;}

/* width */
::-webkit-scrollbar{ width: 9px;}

/* Track */
::-webkit-scrollbar-track{ background: #fff;}
 
/* Handle */
::-webkit-scrollbar-thumb{background: #888;}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover{ background: #555;}

/* HEAD */

.head{ width: 100%; position: absolute; z-index: 2; padding-top: 30px; padding-bottom: 30px; text-align: center;}
.head .desktop{}
.head .desktop .top-item{ display: inline-block;}

.head .desktop .top-item .parent-ul{ list-style: none; padding: 0; margin: 0;}
.head .desktop .top-item .parent-ul li{ display: inline-block; position:relative;}
.head .desktop .top-item .parent-ul li a { transition: 0.3s; text-decoration: none; color: #fff; font-size: 16px; padding: 20px 19px; display: block; }
.head .desktop .top-item .parent-ul li:hover a{ color: red;}

.head .desktop .top-item .sub-ul{ transition: 0.3s; visibility: hidden; opacity: 0; list-style: none; padding: 0; margin: 0; position:absolute; width: 240px; left: 0; margin-left: -20px; box-shadow: 0px 10px 20px rgba(0,0,0,0.2);}
.head .desktop .top-item .sub-ul.active{ display: block; visibility: visible; opacity: 1;}
.head .desktop .top-item .sub-ul li { display: block; background: #fff; border-bottom: 1px #eee solid; }
.head .desktop .top-item .sub-ul li:last-child { border-bottom: 0; }
.head .desktop .top-item .sub-ul li a{ transition: 0.3s; color: #000 !important; padding:10px; font-size: 14px; }
.head .desktop .top-item .sub-ul li a:hover{ color: red !important;}

.arrow{ font-size: 10px; margin-left: 5px; position: relative; top: -1px;}

.head .desktop .top-logo{ width: 200px; display: inline-block; margin-left: 30px; margin-right: 30px;}
.head .desktop .top-logo a{ text-decoration: none; color: currentColor; display: inline-block;}
.head .desktop .top-logo a img{ width: 100%;}

.head .desktop .lang{ display: inline-block; margin-left: 30px;}
.head .desktop .lang a{ text-decoration: none; color: #fff; font-size: 16px; display: inline-block; padding: 10px;}
.head .desktop .lang span{ color: #fff;}


.txtArama { float: right; background: transparent; border: solid 1px #fff; border-right: none; border-radius: 10px 0 0 10px; color: #fff; padding-left: 10px }
.txtArama::placeholder { color: #fff; }
.hypArama { float: right; color: #fff; display: inline-block; border: solid 1px #fff; border-left: none; border-radius: 0 10px 10px 0; padding: 1px 10px; cursor: pointer; }
  .hypArama i { color: #fff; }


/* TOP SLIDER */
.top-slider { width: 100%; }
.top-slider a{ display: inline-block; width: 100%; text-decoration: none; color: currentColor;}
.top-slider a img{ width: 100%;}

/* TOP BANNER */

.top-banner{}
.top-banner img{ width: 100%;}

/* BREADCRUMB */

.breadcrumb{ background: none; margin-top: 20px; margin-bottom: 40px;}
.breadcrumb a{ text-decoration: none; color: #111; font-size: 14px;}
.breadcrumb span{ font-size: 14px; padding-left: 5px; padding-right: 5px;}

/* PAGE */

.text-red{ color: red !important;}

.page{ margin-bottom: 60px;}

.page .content{}
.page .content h1{ font-size: 24px; font-weight: 500; color: #111; text-align: center; letter-spacing: 3px; border-bottom: 1px #ddd solid; padding-bottom: 10px; margin-bottom: 20px;}
.page .content p{ font-size: 16px; line-height: 1.9em;}

.page .content ul{ list-style: none; padding: 0; margin: 0;}
.page .content ul li{ width: calc(33.333% - 30px); margin-right: 30px; margin-bottom: 30px; float: left;}
.page .content ul li a{ display: inline-block; width: 100%; text-decoration: none; color: #111; text-align: center;}

.page .content ul li a img{ width: 100%; height: 160px; object-fit: contain; object-position: center; margin-bottom: 20px;}
.page .content ul li a h2{ font-size: 18px; font-weight: bold; margin-bottom: 10px; height: 40px; overflow: hidden;}
.page .content ul li a .btn-red{ border: none; background: red; color: #fff; padding: 7px; padding-left: 30px; padding-right: 30px; font-size: 13px;}

.page .detail{}
.page .detail .img{ max-width: 300px; width: 100%; margin: auto; margin-bottom: 30px;}
.page .detail .img img{ width: 100%;}

.page .detail .color{ display: block; float: none !important;}
.page .detail .color ul{ list-style: none; padding: 0; margin: 0; text-align: center;}
.page .detail .color ul li{ display: inline-block; float: none !important; width: auto;}
.page .detail .color ul li div{ width: 90px; height: 90px; border-radius: 100%; background: #ddd; margin-bottom: 10px;}
.page .detail .color ul li .yellow{ background: yellow;}
.page .detail .color ul li .red{ background: red;}
.page .detail .color ul li .blue{ background: blue;}
.page .detail .color ul li h4{ font-size: 18px;}

.page .detail .desc{}
.page .detail .desc h1{ border-bottom: none; font-style: normal;}
.page .detail .desc h2{ font-size: 20px; background: #eee; padding: 10px; letter-spacing: 2px; margin-bottom: 20px;}
.page .detail .desc p{}

.page .detail table{}

/* DESC ITEM */

.desc-item{ background: #eee; padding-top: 60px; padding-bottom: 60px; margin-bottom: 60px;}
.desc-item img{ max-width: 500px; width: 100%;}
.desc-item p{ font-size: 16px; color: #111;}
.desc-item p .detay{ color: red; text-decoration: none; margin-left: 15px;}
.desc-item p .detay i{ position: relative; font-size: 17px; top: 2px;}

/* PRODUCT ITEM */

.product-item{ margin-bottom: 60px; text-align: center;}
.product-item a{ display: inline-block; width: 100%; text-decoration: none; color: currentColor; padding-right: 15px; padding-left: 15px;}
.product-item .ss-3 a:nth-child(5){ border-right: none;}
.product-item a .img{ width: 100%; height: 160px; margin-bottom: 20px; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important;}
.product-item a .img img{ width: 100%; display: none;}
.product-item a .title{}
.product-item a .title h1{ font-size: 16px; font-weight: bold; color: red; height: 50px;}
.product-item a p{ font-size: 14px; color: #111;}

/* REFERENCE ITEM */

.reference-item{ width: 100%; text-align: center; margin-bottom: 60px;}
.reference-item h1{ font-size: 26px; font-weight: lighter; color: red; letter-spacing: 5px; margin-bottom: 20px;}
.reference-item .list{ width: 100%; background: #e81406;}
.reference-item .list a{ display: inline-block; text-decoration: none; color: currentColor; width: 100%; padding-top: 30px; padding-bottom: 30px;}
.reference-item .list a .img{ width: 100%; height: 80px; background-repeat: no-repeat; background-position: center; background-size: contain;}
.reference-item .list a .img img{ width: 100%; display: none;}

/* REFERENCE */

.page.reference a{}
.page.reference a .img{ background-repeat: no-repeat; background-position: center; background-size: contain; width: 100%; height: 200px;}
.page.reference a .img img{ display: none; width: 100%;}

/* REFERENCE DETAIL */

.page .reference-detail{}
.page .reference-detail h1{ font-size: 24px;}
.page .reference-detail img{ max-width: 300px; width: 100%; float: left; margin-bottom: 10px; margin-right: 20px;}

/* NEWS ITEM */

.news-item{ width: 100%; margin-bottom: 60px;}
.news-item h1{ max-width: 1170px; padding-left: 30px; line-height: 1.4em; width: 100%; margin: auto; font-size: 26px; font-style: italic; font-weight: lighter; color: #111; letter-spacing: 5px; margin-bottom: 30px;}

.news-item .news-content{ width: 100%; text-align: left; padding-right: 30px; padding-top: 5%;}
.news-item .news-content h2{ width: 100%; font-size: 22px; font-weight: bold; color: #111; margin-bottom: 20px; height: 52px; overflow: hidden;}
.news-item .news-content p{ font-size: 14px; color: #111;}

.news-item .news-content .detay{ color: red; text-decoration: none;}
.news-item .news-content .detay i{ position: relative; font-size: 17px; top: 2px;}

.news-item .news-gallery{ width: 50%; float: right; padding-right: 30px;}
.news-item .news-gallery img{ width: 100%;}

.ss-5 img{ width: 100%; height: 300px; object-fit: cover;}

/* ANNOUNCE */

.page.announce a{ text-decoration: none; color: currentColor;}
.page.announce a .img{ background-repeat: no-repeat; background-position: center; background-size: cover; width: 100%; height: 200px; margin-bottom: 20px;}
.page.announce a .img img{ display: none; width: 100%;}
.page.announce a h1{ font-size: 16px; text-align: center; margin-bottom: 10px;}
.page.announce a p{ font-size: 14px;}

/* GALLERY ITEM */

.gallery-item{ margin-bottom: 60px; }

/* BANNER ITEM */

.banner-item{ width: 100%; position: relative; margin-bottom: 60px;}
.banner-item a{ display: inline-block; width: 100%; text-decoration: none; color: currentColor;}
.banner-item a img{ width: 100%;}

.banner-item::before{ width: 540px; height: 586px; position: absolute; content: ""; bottom: 15px; background-image: url(../images/yol.png); background-repeat: no-repeat; background-position: center; background-size: 100% auto;}

/* CONTACT */

.page .map{ margin-bottom: 30px;}
.page .map iframe{ width: 100%; height: 300px;}

.page .contact-info{ margin-bottom: 30px;}
.page .contact-info h1{ font-size: 20px;}
.page .contact-info ul{ list-style: none; padding: 0; margin: 0;}
.page .contact-info ul li{ margin-bottom: 5px; color: currentColor;}
.page .contact-info ul li a{ text-decoration: none; color: currentColor;}
.page .contact-info ul li a b{}

.page .contact-form{}
.page .contact-form h1{ font-size: 20px;}
.page .contact-form ul{ list-style: none; padding: 0; margin: 0;}
.page .contact-form ul li{ margin-bottom: 5px;}
.page .contact-form ul li input[type=text]{ width: 100%; border: 1px #ddd solid; padding: 10px; outline: none;}
.page .contact-form ul li textarea{ width: 100%; border: 1px #ddd solid; outline: none; height: 100px; padding: 10px;}
.page .contact-form ul li input[type=submit]{ outline: none; padding: 10px; padding-left: 20px; padding-right: 20px; border: none; background: #666; color: #fff; font-size: 13px;}











/* FOOTER */

.footer{ width: 100%; padding-top: 30px; padding-bottom: 30px; background-image: url(../images/footer-bg.png); background-repeat: no-repeat; background-position: center; background-size: cover;}
.footer .footer-logo{ max-width: 260px; width: 100%; margin: auto; margin-bottom: 30px;}
.footer .footer-logo img{ width: 100%;}

.footer .footer-item{ text-align: center; margin-bottom: 20px;}
.footer .footer-item h1{ font-size: 16px; font-weight: 700; margin-bottom: 10px;}
.footer .footer-item ul{ list-style: none; padding: 0; margin: 0;}
.footer .footer-item ul li{ display: block; margin-bottom: 5px;}
.footer .footer-item ul li a{ text-decoration: none; color: #111;}
.footer .footer-item ul li a b{ font-size: 22px; color: red;}

.footer .footer-social{ text-align: center; margin-bottom: 20px;}
.footer .footer-social a{ text-decoration: none; color: red; font-size: 32px; padding: 5px;}

/* FOOTER ALT */

.footer-alt{ background: #eee; padding: 10px;}
.footer-alt .copyright{ text-align: left; font-size: 14px;}
.footer-alt .copyright a{ text-decoration: none; color: currentColor;}

.footer-alt .design{ text-align: right; font-size: 14px;}
.footer-alt .design a{ text-decoration: none; color: currentColor;}

/* GO TO TOP */

#go-to-top{ display: inline-block; background-color: #fff; color: #111; border: 1px #111 solid; width: 50px; height: 50px; text-align: center; position: fixed; bottom: 20px; right: 20px; transition: background-color .3s, opacity .5s, visibility .5s; opacity: 0; visibility: hidden; z-index: 1000; text-decoration:none; outline:none; font-size:14px; font-weight:300; text-align:center; }
#go-to-top:hover {}
#go-to-top:active {}
#go-to-top.show { opacity: 1; visibility: visible; }
#go-to-top i{ font-size: 24px; }

#ozlgrp-9{ margin-bottom: 20px;}
#ozlgrp-9 ul .element-textbox{ margin-bottom: 10px !important;}
#ozlgrp-9 ul .element-textbox input[type=text]{ border: 1px #ddd solid;}
#ozlgrp-9 ul .element-textarea textarea{ border: 1px #ddd solid;}

.mobilBtn{ display: none;}
.mobilLogo{ display: none;}

.katMenu{ display: none;}

.table-bordered{ border: 1px #fff solid;}

/* FOR MOBILE */

@media(max-width: 1770px)
{
    .banner-item::before{ width: 400px; height: 440px; top: -200px;}
}

@media(max-width: 1320px)
{
    .banner-item::before{ width: 350px; height: 400px; top: -200px;}
}

@media(max-width: 1150px)
{
    .banner-item::before{ width: 350px; height: 400px; top: -200px; left: -100px;}
}

@media(max-width: 991px)
{
    /* width */
    ::-webkit-scrollbar{ width: 4px;}

    .head{ width: 100%; height: 80px; position: relative; background: #fff;}
    .head .mobi{ transition: 0.3s; visibility: hidden; opacity: 0; position: fixed; width: 100%; height: 100vh; background: #fff; z-index: 3; top: 0; left: -100%; padding-top: 30%; overflow: auto; overflow-x: hidden;}
    .head .mobi .top-logo{ display: none;}

    .head .mobi .parent-ul li{ display: block !important;}
    .head .mobi .parent-ul li a{ color: #111 !important;}
    .head .mobi .sub-ul{ display: none; position: relative !important; width: 100% !important; margin-left: 0 !important; box-shadow: none !important;}
    .head .mobi .sub-ul li{ background: #fafafa !important;}
    .head .mobi .sub-ul li a{ color: #111 !important;}

    .head .mobi .top-item{ display: block;}

    .head .mobi.opened{ display: block; visibility: visible; opacity: 1; left: 0;}

    .mobilBtn{ z-index: 4; display: block; position: absolute; width: 50px; height: 50px; top: 15px; right: 15px; border: 1px #111 solid; text-align: center; padding-top: 8px; border-radius: 3px;}
    .mobilBtn i{ font-size: 32px; color: #111;}

    .mobilLogo{ z-index: 4; position: absolute; left: 15px; top: 20px; height: 40px; display: block;}
    .mobilLogo img{ height: 40px;}

    .footer-alt .copyright{ text-align: center !important; margin-bottom: 5px;}
    .footer-alt .design{ text-align: center !important;}

    .katMenu{ display: inline-block; margin-bottom: 20px; font-size: 13px; border: 1px #111 solid; padding: 5px; padding-top: 6px; border-radius: 4px;}
    .side-menu{ display: none;}

    .breadcrumb{ margin-bottom: 10px !important;}

    .desc-item{ text-align: center;}
    .desc-item img{ max-width: 200px; width: 100%; margin: auto; margin-bottom: 20px;}

    .banner-item::before{ display: none;}
}

@media(max-width: 640px)
{
    .page .content ul li{ width: calc(50% - 20px); margin-right: 20px;}
}