body{ width: 100%; height: 100%; padding: 0; margin: 0; color: #111; background: #fff; font-family: 'Ubuntu'; font-size: 16px; font-weight: 300; overflow: auto; overflow-x: hidden;}
::selection{ background: #89060d; color: #fff;}
.loading{ position: fixed; width: 100%; height: 100vh; background: #fff; top: 0; left: 0; z-index: 9999999999999999;}
.container{ max-width: 1500px !important; }
.header-section { position: absolute; width: 100%; left: 0; top: 0; z-index: 2; background: rgba(0,0,0,0.4); }

/*
    Scrollbar Style
*/

::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #111; border-radius: 10px; border: 1px solid #fff; }
::-webkit-scrollbar-thumb:hover { background: #333; }
 

/* Search Section */

.search-section { position: fixed; width: 100%; height: 100vh; z-index: 99; background: rgba(0,0,0,0.9); display: none; align-items: center; }
.search-section.is-active { display: flex; }

.search-section .close-button { cursor: pointer; position: absolute; width: 48px; height: 48px; right: 30px; top: 30px; z-index: 2; color: #fff; }
.search-section .close-button i { font-size: 48px; }

.search-section .inputs { width: 100%; display: flex; }
.search-section .inputs input[type=text] { width: 80%; outline: none; border: 0; padding: 15px; }
.search-section .inputs button { width: 20%; padding: 15px; outline: none; border: 0; background: #ccc; display: flex; align-items: center; justify-content: center; }
.search-section .inputs button i { font-size: 20px; }

/* Logo */

.logo { width: auto; }
.logo a { text-decoration: none; color: currentColor; display: flex; }
.logo a img { max-width: 207px; width: 100%; }

/* Right Links */

.right-links { width: auto; display: flex; align-items: center; color: #fff; }
.right-links a { text-decoration: none; color: #fff; display: inline-flex; }
.right-links .year img { max-width: 80px; width: 100%; }
.right-links .search { margin-left: 15px; }
.right-links .search a { text-decoration: none; color: currentColor; display: flex; width: 32px; height: 32px; background: url(../images/search.png) no-repeat center; background-size: 32px; }
.right-links .lang { display: flex; border-left: 1px solid rgba(255,255,255,0.4); padding-left: 15px; margin-left: 15px; }
.right-links .lang a { margin-left: 5px; }
.right-links .lang a img { width: 40px; height: 40px; object-fit: contain; }
.right-links .mail { margin-left: 10px; font-size: 15px; }

/* Social Media */

.social-media { width: auto; display: flex; align-items: center; }
.social-media span { color: #fff; font-size: 15px; margin-right: 10px; }
.social-media a { display: inline-flex; margin-left: 5px; text-decoration: none; color: currentColor; width: 24px; height: 24px; }
.social-media a.instagram { background: url(../images/social/instagram.png) no-repeat center; background-size: 24px; }
.social-media a.linkedin { background: url(../images/social/linkedin.png) no-repeat center; background-size: 24px; }
.social-media a.twitter { background: url(../images/social/twitter.png) no-repeat center; background-size: 24px; }
.social-media a.pinterest { background: url(../images/social/pinterest.png) no-repeat center; background-size: 24px; }
.social-media a.youtube { background: url(../images/social/youtube.png) no-repeat center; background-size: 24px; }


/* Top Menu */

.top-menu { width: auto; }
.top-menu ul { list-style: none; padding: 0; margin: 0; }
.top-menu > ul { list-style: none; padding: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center; }
.top-menu > ul > li { width: auto; margin-right: 30px; }
.top-menu > ul > li > a { text-decoration: none; color: #fff; display: inline-block; font-size: 14px; font-weight: 400; position: relative; padding: 10px 0; text-transform:uppercase; }
.top-menu > ul > li > a i { color: #fff; position: relative; top: 1px; margin-left: 3px; }
.top-menu > ul > li:hover > a::after { content: ""; position: absolute; width: 30px; height: 3px; background: red; bottom: 5px; left: 50%; transform: translateX(-50%); }

.top-menu > ul > li > ul { transition-property: transform, opacity, visibility; transition-duration: 0.3s; background: #f5f5f5; position: absolute; width: 100vw; left: -50vw; margin-left: 50%; display: flex; justify-content: flex-end; padding: 50px 0 0; transform: translateY(20px); opacity: 0; visibility: hidden; }
.top-menu > ul > li > ul.opened { transform: translateY(0); opacity: 1; visibility: visible; }

.top-menu > ul > li > ul > li.left { width: 35%; margin: 50px 0 100px 0; padding-right: 50px; }
.top-menu > ul > li > ul > li.left h3 { font-size: 24px; color: red; margin-bottom: 30px; }
.top-menu > ul > li > ul > li.left p { margin-bottom: 30px; font-size: 14px; }
.top-menu > ul > li > ul > li.left a { display: inline-flex; transition: 0.3s; background: red; border: 1px solid red; color: #fff !important; padding: 10px 20px; }
.top-menu > ul > li > ul > li.left a:hover { background: #fff; color: red !important; }
.top-menu > ul > li > ul > li.right { width: 60%; margin: 0; background: #fff; padding: 50px; display: flex; }

.top-menu > ul > li > ul > li.right ul { max-width: 400px; width: 100%; }
.top-menu > ul > li > ul > li.right ul li { margin: 7px 0; }
.top-menu > ul > li > ul > li.right ul li a { text-decoration: none; color: #777; font-size: 14px; font-weight: 400; }

.top-menu > ul > li > ul > li.right .image img { max-width: 300px; width: 100%; }

.top-menu > ul > li > ul > li.right ul li i { display: none; color: red; }
.top-menu > ul > li > ul > li.right ul li:hover i { display: inline-block; position: relative; top: 2px; }

/* Mobile Menu */

.mobile-menu{ width: 100%; height: 100%; position: fixed; left: -100%; top: 0; padding: 65px 0 30px 0; z-index: 9; transition: 0.3s; background: #fff; overflow: auto;}
.mobile-menu.opened{ left: 0;}
.mobile-menu ul{ width: 100%; top: 0; z-index: 3; padding: 0; margin: 0; list-style: none;}
.mobile-menu > ul > li{ position: relative; border-top: 1px solid #eee;}
.mobile-menu > ul > li:last-child{ border-bottom: 1px solid #eee;}
.mobile-menu > ul > li a{ text-decoration: none; color: #111; font-size: 14px; font-weight: 500; display: block; letter-spacing: 1px; padding: 10px 15px; text-align: center;}
.mobile-menu > ul{ display: block; left: 0;}
.mobile-menu > ul > li > ul{ position: fixed; width: 100%; height: 100%; top: 0; padding: 65px 0 30px 0; background: #fff; left: -100%; opacity: 0; visibility: hidden; transition: 0.3s; z-index: 3;}
.mobile-menu > ul > li > ul.opened{ left: 0; opacity: 1; visibility: visible;}
.mobile-menu .back-icon{ color: #111; width: 32px; height: 32px; position: absolute; left: 15px; top: 17px; display: flex; align-items: center; justify-content: center; z-index: 2; border: 1px solid #ddd;}
.mobile-menu .sub-icon{ color: #111; width: 40px; height: 40px; position: absolute; right: 0; top: 0; display: flex; align-items: center; justify-content: center; z-index: 2;}

.mobile-menu li.left { display: none; }
.mobile-menu li.right .image { display: none; }

.mobile-menu li.right ul { padding: 0; }
.mobile-menu li.right ul li { border-top: 1px solid #eee; }
.mobile-menu li.right ul li i { display: none; }
.mobile-menu li.right ul li:last-child{ border-bottom: 1px solid #eee;}

/* Slider */

.slider{ width: 100%; height: 100vh; }
.slider a{ width: 100%; height: 100%; position: relative; text-decoration: none; color: currentColor; display: flex; align-items: center; }
.slider img{ position: absolute; left: 0; top: 0; width: 100%; height: 100vh; object-fit: cover;}
.slider .content { position: relative; top: 30px; max-width: 1500px; width: 100%; margin: auto; padding: 0 15px; z-index: 2; color: #fff; }
.slider .content > div { max-width: 750px; }
.slider .content small { font-size: 20px; margin-bottom: 15px; display: block; }
.slider .content h2 { font-size: 48px; margin-bottom: 45px; }
.slider .content .detail-btn { background: red; display: inline-flex; padding: 20px 45px; }

.slider .swiper-button-prev, .slider .swiper-button-next { color: #fff; }
.slider .swiper-button-prev { left: 30px; }
.slider .swiper-button-next { right: 30px; }

/* Banner */

.banner{ width: 100%; position: relative;}
.banner a{ text-decoration: none; color: currentColor; display: block;}
.banner img{ width: 100%; min-height: 410px; object-fit: cover; }
.banner .content { position: absolute; max-width: 1500px; width: 100%; left: 50%; transform: translateX(-50%); z-index: 1; bottom: 10%; padding: 0 15px; }
.banner .content h2 { font-size: 48px; font-weight: 700; color: #fff; }

/* Breadcrumb */

.breadcrumb{ background: transparent; padding: 30px 0;}
.breadcrumb a{ text-decoration: none; font-size: 14px; color: currentColor; color: #999; display: flex; align-items: center; letter-spacing: 1px; text-transform:uppercase; }
.breadcrumb a::after{ content: ">"; font-size: 18px; position: relative; margin: 0 10px; color: red; top: -2px; }
.breadcrumb a:last-child{ font-weight: 700;}
.breadcrumb a:last-child::after{ display: none;}

/* Side Nav */

.side-nav{ width: 100%; border-right: 1px solid #ccc; padding-right: 30px; }
.side-nav ul{ list-style: none; padding: 0; margin: 0;}
.side-nav ul li{ width: 100%; position: relative; margin-bottom:5px;}
.side-nav ul li a{ text-decoration: none; color: currentColor; display: block; padding: 10px 15px; font-size: 14px; font-weight: 600;}
.side-nav ul li.has-sub ul{ padding: 0; height: 0; overflow: hidden;}
.side-nav ul li.has-sub ul.opened{ padding: 10px 0; height: auto;}
.side-nav ul ul{ border: 0;}
  .side-nav ul ul li a { border: 0; font-size: 14px; font-weight: 400; border-radius: 10px; background: #efefef; transition:all .5s; }
.side-nav ul ul li a:hover { color: red; }

.side-nav > ul > li { margin-bottom: 10px; }
  .side-nav > ul > li > a { background: #393939; color:#fff; border-radius: 10px; padding: 15px; position:relative; }
    .side-nav > ul > li > a:before{ content:''; position:absolute; left:0; width:5px; height:20px; background:#fff; display:inline-block; margin-right:5px; }
    .side-nav > ul > li > a:hover { background: red; }

.side-nav ul li .arrow{ position: absolute; color: #fff; right: 0; width: 42px; height: 42px; top: 3px; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; z-index: 2;}
.side-nav ul li .arrow.active{ transform: rotate(90deg);}

/* Product Detail */

.product-detail > h1 { margin: 0; margin-bottom: 20px; display: flex; align-items: center; font-size: 24px; border-top:solid 3px red; padding-top:5px; }
.product-detail > h1 i { color: red; }
.product-detail h1.altbaslik { margin: 0; display: flex; align-items: center; font-size: 32px; color: #747474; letter-spacing:-2px; }
.product-detail h2.altbaslik { margin: 0; display: flex; align-items: center; font-size: 32px; color: red; letter-spacing: -2px; }


.product-detail p { margin-bottom: 20px; }
.product-detail .table tr td { border: 0; padding: 0 15px 7px 0; }
.product-detail table tbody tr td { padding-right: 15px; }


.kullanimalanlari { width: 100%; }
  .kullanimalanlari h2 { letter-spacing: -1px; color: #747474; font-size: 22px; font-weight: 100; border-bottom: 1px solid #E0E0E0; padding-bottom: 10px; }
  .kullanimalanlari ul { list-style-image: url(../images/li-ikon.png); columns: 2; }
    .kullanimalanlari ul li { }

/* Detail Gallery */

.detail-gallery { width: 100%; display: flex; flex-wrap: wrap; }
.detail-gallery a { width: 33%; padding: 0 1% 20px 1%; display:block; }
.detail-gallery a img { width: 100%; }

/* About */

.about h2 { font-size: 20px; font-weight: 400; color: red; margin-bottom: 20px; }
.about img { width: 100%; margin-bottom: 15px; }
.about p { margin-bottom: 20px; }
.about ul { list-style: none; padding: 0; margin-bottom: 20px; display: flex; flex-wrap: wrap; }
.about ul li { width: 50%; padding-right: 30px; margin-bottom: 30px; }

/* Mid Search */

.mid-search { max-width: 500px; width: 100%; margin: auto; text-align: center; position: relative; z-index: 2; top: 15px; }
.mid-search h4 { font-weight: 700; color: #fff; margin-bottom: 20px; }
.mid-search .inputs { width: 100%; position: relative; }
.mid-search .inputs input[type=text] { width: 100%; outline: none; background: transparent; border: 1px solid #fff; color: #fff; padding: 15px; }
.mid-search .inputs input[type=text]::placeholder { color: #fff; }
.mid-search .inputs input[type=submit] { position: absolute; right: 10px; top: 12px; outline: none; border: 0; width: 32px; height: 32px; background: url(../images/search.png) no-repeat center; background-size: 32px; }

/* Ekoplas Count */

.ekoplas-count h4 { font-weight: 700; font-size: 32px; margin-bottom: 20px; }

/* Icons */

.icons ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; }
.icons ul li { width: 25%; }
.icons ul li img { width: 54px; height: 54px; object-fit: contain; margin-bottom: 10px; }
.icons ul li h3 { font-size: 17px; color: #777; font-weight: 500; }
.icons ul li h3 span { font-size: 28px; color: red; }

/* Tab */

.tab { width: 100%; }
.tab .tab-title { width: 100%; margin-bottom: 20px; }
.tab .tab-title ul { width: 100%; list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; }
.tab .tab-title ul li { cursor: pointer; width: 150px; background: #ececec; padding: 15px; text-align: center; margin-right: 10px; margin-bottom: 10px; }
.tab .tab-title ul li:hover { background: red; }
.tab .tab-title ul li:hover img { filter: brightness(100); }
.tab .tab-title ul li:hover span { color: #fff; }
.tab .tab-title ul li.is-active { background: red; }
.tab .tab-title ul li.is-active img { filter: brightness(100); }
.tab .tab-title ul li.is-active span { color: #fff; }
.tab .tab-title ul li img { width: 52px; height: 50px; object-fit: contain; margin-bottom: 10px; }
.tab .tab-title ul li span { display: block; font-size: 14px; line-height: 1.2; }

.tab .tab-content ul { list-style: none; padding: 0; margin: 0; }
.tab .tab-content ul li { width: 100%; display: none; }
.tab .tab-content ul li.is-active { display: block; }

/* Product List */

.product-list a { text-decoration: none; color: currentColor; padding: 30px; border: 1px solid #ddd; display: flex; }
.product-list a .image { width: 25%; }
.product-list a .image img { width: 100%; }
.product-list a .content { width: 75%; padding-left: 30px; }
.product-list a .content h3 { font-size: 20px; color: red; margin-bottom: 20px; }
.product-list a .content p { margin-bottom: 20px; }
.product-list a .content .detail-btn i { color: red; }

/*haberler*/
.news-list a { display: block; color: currentColor; width: 100%; box-shadow: 0 0 10px rgba(0,0,0, .2); }
.news-list a:hover { text-decoration: none; }
.news-list a .img { width: 100%; }
  .news-list a .img img { width: 100%; }
.news-list a .content { padding: 15px; }
  .news-list a .content h2 { font-size: 20px; height: 48px; overflow: hidden; }
  .news-list a .content .git-btn { text-align: right; }
    .news-list a .content .git-btn i { color: red; }

/*haber detay*/
a.haber-img{ display:block; width:100%; }
a.haber-img img{ width: 100%; }


/* Contact Map */
.contact-map { width: 100%; padding-bottom: 400px; position: relative; margin-bottom: 30px; }
.contact-map iframe { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }

/* Contact Info */

.contact-info { margin-bottom: 30px; }
.contact-info h2 { font-size: 24px; margin-bottom: 15px; }
.contact-info ul { list-style: none; padding: 0; margin: 0; }
.contact-info ul li { width: 100%; margin-bottom: 10px; }
.contact-info ul li a { text-decoration: none; display: block; color: currentColor; }

/* Contact Form */

.contact-form h2 { font-size: 24px; margin-bottom: 15px; }
.contact-form ul { list-style: none; padding: 0; margin: 0; }
.contact-form ul li { width: 100%; margin-bottom: 10px; }
.contact-form ul li label { display: block; }
.contact-form ul li input[type=text] { width: 100%; outline: none; border: 1px solid #ddd; padding: 10px; }
.contact-form ul li textarea { width: 100%; height: 120px; outline: none; border: 1px solid #ddd; padding: 10px; }
.contact-form input[type=submit] { outline: none; border: 0; background: red; color: #fff; border-radius: 50rem; font-weight: 900; padding: 13px 30px; }

/* Footer Section */

.footer-section { background: #454545; }
.footer-section .social-media { margin-top: 30px; }
.footer-section .social-media a { margin: 0; margin-right: 5px; }

/* Footer Menu */

.f-menu h3 { display: inline-flex; align-items: center; font-size: 21px; color: #fff; margin-bottom: 15px; }
.f-menu h3 i { color: red; }
.f-menu p { color: #aaa; font-size: 14px; margin: 0; margin-top: 5px; }
.f-menu ul { list-style: none; padding: 0; margin: 0; }
.f-menu ul li { color: #aaa; font-size: 14px; padding: 5px 0; }
.f-menu ul li a { text-decoration: none; color: #aaa; }

/* Copyright */

.copyright { background: #454545; color: #aaa; font-size: 14px; border-top: 1px solid #777; }
.copyright a { text-decoration: none; color: #fff; font-weight: 400; }

/* Up Button */

.up-button { transition-property: opacity, visibility; transition-duration: 0.3s; position: fixed; right: 30px; bottom: 30px; z-index: 2; width: 44px; height: 44px; border-radius: 100%; background: red; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; }
.up-button.is-active { opacity: 1; visibility: visible; }

/* Down Button */

.down-button { position: absolute; cursor: pointer; bottom: calc(5% + 15px); z-index: 2; left: 50%; transform: translateX(-50%); width: 34px; height: 85px; }
.down-button .chevron { position: absolute; width: 2.1rem; height: 0.5rem; opacity: 0; transform: scale(0.3); animation: move-chevron 3s ease-out infinite; }
.down-button .chevron:first-child { animation: move-chevron 3s ease-out 1s infinite; }
.down-button .chevron:nth-child(2) { animation: move-chevron 3s ease-out 2s infinite; }
.down-button .chevron:before, .down-button .chevron:after { content: ''; position: absolute; top: 0; height: 100%; width: 50%; background: #fff; }
.down-button .chevron:before { left: 0; transform: skewY(30deg); }
.down-button .chevron:after { right: 0; width: 50%; transform: skewY(-30deg); }

@keyframes move-chevron {
    25% { opacity: 1; }
    33.3% { opacity: 1; transform: translateY(2.3rem); }
    66.6% { opacity: 1; transform: translateY(3.2rem); }
    100% { opacity: 0; transform: translateY(4.8rem) scale(0.5); }
}

/* Helpers */

.view-all { text-align: center; }
.view-all a { display: inline-flex; text-decoration: none; color: #fff; background: red; padding: 20px 45px; }
.bg-light { background: none !important; position: relative; }
.bg-light::after { content: ""; position: absolute; width: 100vw; height: 100%; left: -50vw; margin-left: 50%; top: 0; background: #f5f5f5; z-index: -1; }
.count-bg { position: relative; background: url(../images/cout-bg.png) no-repeat center; background-size: cover; }
.bg-red { position: absolute; z-index: 1; width: 85%; height: 100%; right: 0; top: 0; }
.bg-red::after { content: ""; position: absolute; width: calc(100% - 162px); height: calc(100% + 30px); right: 0; top: 0; background: red; }
.bg-red::before { content: ""; position: absolute; top: 0; left: 0; border: 96px solid red; border-left: 66px solid transparent; border-bottom: 135px solid transparent; }
.bg-gray { background: #3f3f3f; }
.dot { position: relative; padding-left: 40px; }
.dot::after { content: ""; position: absolute; left: 0; top: 7px; width: 18px; height: 11px; background: url(../images/dot.png) no-repeat center; background-size: 18px 11px; }
.border-bottom { position: relative; border: 0 !important; }
.border-bottom::after { content: ""; position: absolute; width: 100vw; height: 1px; background: rgba(255,255,255,0.2); bottom: 0; left: -50vw; margin-left: 50%; }
.menu-btn{ position: relative; z-index: 10; width: 32px; height: 32px; background: #ff0000; color: #fff; font-size: 24px; margin-left: 15px; display: none; align-items: center; justify-content: center;}

@media(max-width: 991px)
{
    .menu-btn{ display: flex;}
    .top-menu{ display: none;}
    .side-nav{ margin-bottom: 30px; border: 0; padding: 0; }
    .up-button { width: 40px; height: 40px; right: 10px; bottom: 10px; }
    .social-media span { display: none; }
    .social-media a { margin: 0; margin-right: 5px; }
    .right-links .mail { display: none; }
    .logo a img { max-width: 155px; }
    .right-links .lang { margin-left: 0; padding-left: 0; border: 0; }
    .right-links .lang a img { width: 30px; height: 30px; }
    .right-links .search a { background-size: 28px; }
    .about ul li { width: 100%; }
    .icons ul li { width: 50%; margin-bottom: 15px; text-align: center; }
    .slider .content h2 { font-size: 32px; }
    .search-section .close-button { top: 7px; right: 7px; }
    .right-links .year { display: none; }
}

@media(max-width: 768px)
{

}

@media(max-width: 640px)
{

}

@media(max-width: 576px)
{
    .product-list a { flex-wrap: wrap; }
    .product-list a .image { width: 100%; margin-bottom: 15px; }
    .product-list a .content { width: 100%; padding: 0; }
    .tab .tab-title ul { display: flex; flex-wrap: wrap; }
    .tab .tab-title ul li { width: calc(33.333% - 10px); margin: 5px; }
}

@media(max-width: 480px)
{
    .slider .content h2 { font-size: 24px; }
}

@media(max-width: 440px)
{
    .icons ul li { width: 100%; margin-bottom: 15px; }
    .tab .tab-title ul li { width: calc(50% - 10px); margin: 5px; }
}