html {color: #525252;font-size: 1em;line-height: 1.4;font-family: 'Source Sans Pro', sans-serif;}
::-moz-selection {background: #b3d4fc;text-shadow: none;}
::selection {background: #b3d4fc;text-shadow: none;}
hr {display: block;height: 1px;border: 0;border-top: 1px solid #ccc;margin: 1em 0;padding: 0;}
audio,canvas,iframe,img,svg,video {vertical-align: middle;}
fieldset {border: 0;margin: 0;padding: 0;}
textarea {resize: vertical;}
.hidden {display: none !important;}
.visuallyhidden {border: 0;clip: rect(0 0 0 0);-webkit-clip-path: inset(50%);clip-path: inset(50%);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;white-space: nowrap;}
.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus {clip: auto;-webkit-clip-path: none;clip-path: none;height: auto;margin: 0;overflow: visible;position: static;width: auto;white-space: inherit;}
.invisible {visibility: hidden;}
.container:before,.container:after {content: " ";display: table;}
.clearfix,.container:after {clear: both;}
a{ text-decoration: none; color: #860621; }
@media print {
    *,*:before,*:after {background: transparent !important;color: #000 !important;box-shadow: none !important;text-shadow: none !important;}
    a,a:visited {text-decoration: underline;}
    a[href]:after {content: " (" attr(href) ")";}
    abbr[title]:after {content: " (" attr(title) ")";}
    a[href^="#"]:after,a[href^="javascript:"]:after {content: "";}
    pre {white-space: pre-wrap !important;}
    pre,blockquote {border: 1px solid #999;page-break-inside: avoid;}
    thead {display: table-header-group;}
    tr,img {page-break-inside: avoid;}
    p,h2,h3 {orphans: 3;widows: 3;}
    h2,h3 {page-break-after: avoid;}
} 
body{ padding-top: 75px; }
.compa,.basket{ position: relative; }
.compa_adet,.basket_adet{position: absolute;right: -8px;top: -8px;border-radius: 50%;background-color: red;color: #fff;font-size: 13px;height: 16px;width: 16px;line-height: 16px;text-align: center; }

.pagination {display: inline-block;padding-left: 0;margin: 20px 0;border-radius: 4px}
.pagination>li {display: inline}
.pagination>li>a,.pagination>li>span {position: relative;float: left;padding: 6px 12px;margin-left: -1px;line-height: 1.42857143;color: #016e05;text-decoration: none;background-color: #fff;border: 1px solid #ddd}
.pagination>li:first-child>a,.pagination>li:first-child>span {margin-left: 0;border-top-left-radius: 4px;border-bottom-left-radius: 4px}
.pagination>li:last-child>a,.pagination>li:last-child>span {border-top-right-radius: 4px;border-bottom-right-radius: 4px}
.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,.pagination>li>span:hover {z-index: 3;color: #23527c;background-color: #eee;border-color: #ddd}
.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover {z-index: 2;color: #fff;cursor: default;background-color: #016e05;border-color: #016e05}
.pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover {color: #777;cursor: not-allowed;background-color: #fff;border-color: #ddd}
.pagination-lg>li>a,.pagination-lg>li>span {padding: 10px 16px;font-size: 18px;line-height: 1.3333333}
.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span {border-top-left-radius: 6px;border-bottom-left-radius: 6px}
.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span {border-top-right-radius: 6px;border-bottom-right-radius: 6px}
.pagination-sm>li>a,.pagination-sm>li>span {padding: 5px 10px;font-size: 12px;line-height: 1.5}
.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span {border-top-left-radius: 3px;border-bottom-left-radius: 3px}
.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span {border-top-right-radius: 3px;border-bottom-right-radius: 3px}
  

.kategori_listesi{ text-align:center; padding: 0; margin:25px 0; list-style: none; }
.kategori_listesi li{ display: inline-block; width: 249px;  margin: 10px 9px; box-sizing: border-box; }
.kategori_listesi li a{ display: block; border:1px solid #dcdcdc; box-sizing: border-box; position: relative; }
.kategori_listesi li a div{ width: 100%; height: 249px; background-size: cover; background-repeat: no-repeat; background-position: center;} 
.kategori_listesi li a h3{ margin:0; padding:3px 0; font-size: 17px; color:green; position: absolute; left: 0; bottom:0; width: 100%; background-color: rgba(255, 255, 255, 0.7); font-weight: 400;}

.full { background-color: green; }
.minik li{ width: 121px; }
.minik li a h3{ transform: rotate(270deg);-webkit-transform: rotate(270deg); left: -19px; bottom: inherit; top: 110px;width: 249px;}

@media(max-width: 550px){
    .kategori_listesi{ margin: 8px 0; }
    .kategori_listesi li{ width: 104px; margin: 5px;}
    .kategori_listesi li a div {height: 165px;}
    .kategori_listesi li a h3{ left: 9px;top: 72px;bottom: inherit; width: 165px; font-size: 11px;transform: rotate(270deg);-webkit-transform: rotate(270deg);}


}

body{font-family: 'Source Sans Pro', sans-serif;background-image: url("../img/bg.jpg"); background-size: cover; background-position: center center;  }
.btn{cursor: pointer; font-size: 15px;border: 1px solid #ccc;padding: 5px 10px;font-weight: 300;background-color: #ccd;color: #000;border-radius: 4px;margin-top: 5px}
.row{ text-align:center; }
.col-md-3{ width: 27%; vertical-align: top; display: inline-block; text-align: left; }
.col-md-3 b{ display: none; }
.col-md-4{ width: 33.3%; vertical-align: top; display: inline-block; text-align: left;}
h1.baslik{ font-size: 20px; }
h1.baslik small{ font-size: 15px; color: green; }
.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}
.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}

.sepettekiler{ list-style: none; margin:5px; padding: 0; }
.sepettekiler li{ display: inline-block; vertical-align: middle; width: 100%; background-color: #fff; border: 1px solid #dcdcdc; } 
.sepet_resmi{ vertical-align: middle; width: 80px; height: 80px; line-height: 80px; text-align:center; color: #fff; margin:10px; display: inline-block; background-size: cover; background-position: center; }
.sepet_resmi i{ opacity: 0; }
.sepettekiler h3{ display: inline-block; margin:0; }
.sepettekiler h3 small{ font-weight: 200; display: block; }
.sepettekiler li:hover{ cursor: pointer; } 
.sepettekiler li:hover .sepet_resmi i{ opacity: 1; }
.sepettekiler li .sepet_resmi:hover i{ color: #f00;}
.fiyat{ float: right; color: green; padding: 10px; font-size: 20px; }
.tleft{ text-align: left; }
.form{ border: 1px dashed #dcdcdc; background-color: #fff; padding: 15px; margin:5px 5px 15px 5px; }
.form textarea,
.form select,
.form input[type=text],
.form input[type=number]{ width: 100%; padding: 10px; margin-bottom: 10px; border:1px solid #dcdcdc; box-sizing: border-box; }
@media(max-width: 1200px){
    .col-md-4{ width: 49%; }
}
@media(max-width: 900px){
    .col-md-4{ width: 99%; }
}
.teklif_btn{ border: 1px solid #dcdcdc; margin:20px 5px; padding: 10px 70px; float: left; outline: none; }
.teklif_btn:hover{ background-color: #ccc; cursor: pointer; }

.kbaslik{ width: 18%; vertical-align: top; display: inline-block; font-weight: bold; text-align:left; }
.karsi ul{ list-style: none; margin:0; padding: 0;}
.karsi ul li{ padding: 5px; background-color: #e9f2e9; }
.karsi ul li:nth-of-type(2n+1){ background-color: #fff; }
.resmim{ width: 100%; height: 250px; background-size: cover; background-position: center center; margin:0 auto; }
.left{ float: left; }
.right{ float: right; }

.sosyal_medya{ float: right; list-style: none; width: 49%;margin:0; padding: 0; text-align:right; }
.sosyal_medya li{ display: inline-block; padding: 5px; float: right; }
.sosyal_medya .left{ float: left; }
.sepete_ekle{ display: inline-block; padding:4px 10px; background-color: green; color: #fff; text-align:left; margin-top:6px; }
.sepete_eklendi{ background-color: blue; }


.header{ border-bottom: 1px solid #dee3e7; padding: 7px 0; z-index: 1000; text-align:center;background-color:rgba(255, 255, 255, 0.9); position: fixed; width: 100%; top: 0; left: 0;}
.container{ width: 90%; margin:0 auto; position: relative; }
.logo{ display: inline-block; width: 206px; height: 50px; outline: none; margin:0 auto;}
.logo img{transition: all .3s ease-in-out; width: 100%; }

#diller{ float: right; width: 33px; height: 24px; padding: 18px 0; cursor: pointer; margin:0 0 0 6px;}
#diller .diger{ display: none; padding-top: 8px;}

#filtre{ margin-bottom: 10px;   } 
.filtre_iptal{ background-color: green; color: #fff; padding: 2px 5px; border-radius: 4px; margin:2px; display: inline-block; font-size: 11px; cursor: pointer;}
.filtre_iptal i{ margin-left: 5px; }
.filtre_iptal:hover{ background-color: #bddbab; color: green; } 
#filtre .filtre_daralt{ display: none; }
.urun_karsilastir{ display: inline-block; padding: 10px; background-color: green; color: #fff; position: fixed; bottom: 70px; right: 0;}

main{ min-height: 450px; }
.baslik h2{ margin-bottom: 0; font-weight: 300;}
.baslik h1{ margin-top: 0; color: #016704;  font-weight: 500; }
.icerik{ margin-bottom: 20px; }
.icerik:after{ content: ''; display: block; clear: both; } 
.icerik figure{ float: left; width: 49%; margin:0; padding: 0; position: relative;}
.icerik figure a { display: block; min-height: 630px; background-size: cover; background-position: center center; border-radius: 5px; }
.icerik figure a img{ display: none; } 
.icerik figure figcaption{ position: absolute; right: 10px; bottom: 10px; padding: 5px; border-radius: 5px; background-color: rgba(0, 0, 0, 0.4); color: #fff; font-weight: 300;}
.icerik ul{ float: right; list-style: none; width: 49%; margin:0; padding: 0;}
.icerik ul li{ line-height: 35px; border-bottom: 1px dashed #dee3e7; font-weight: 300; padding: 0 8px; }
.icerik ul li:hover{ background-color: #fff; } 
.icerik ul li span{ display: inline-block; width: 74%;  }
.icerik ul li label{ display: inline-block; width: 25%; font-weight: 400; vertical-align: middle; line-height: 160%; }

.aciklama p{ line-height: 170%; }



div#arama_over,div#il_arama_over{position: fixed;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.9);z-index: 1000000;left: 0;top: 0; display: none;}
input#arama_sonuclari,input#il_arama_sonuclari{height: 40px;padding: 0 2%;margin-top:85px;outline: none; width: 96%;border:none;border-radius: 4px;}
div.arama_sonuclari{ width: 100%;min-height: 100px;margin: 10px auto; border-radius: 4px; overflow:auto;}
.araKapa,.ilaraKapa{ position: absolute;right: 8px;top: 84px;color: #000;font-size: 30px;z-index: 10; cursor: pointer;}
.arama_sonuclari ul{ padding: 0; margin: 0; list-style: none; text-align: center; }
.arama_sonuclari ul li{ margin-bottom: 10px; padding: 5px; border-radius: 4px; display: inline-block; width: 16%; vertical-align: top;min-height: 260px;}
.arama_sonuclari ul li:after,
.arama_sonuclari ul li a:after{ content: ''; clear: both; display: block;}
.arama_sonuclari ul li a{ color: #fff; display: block; }
.arama_sonuclari ul li{ background-color: #232323;}
.arama_sonuclari ul li:nth-of-type(2n+1){ background-color: #474747; }
.arama_sonuclari ul li a div{ width: 100%;height: 200px;background-position: center center;background-size: cover;margin-right: 10px;}
.arama_sonuclari ul li a span {text-align: center;display: block;padding: 10px;}

#il_sonuclari ul li{ min-height: 40px;}
@media(max-width:1665px){
    .arama_sonuclari ul li { width: 23%;}
}
@media(max-width:768px){
    .arama_sonuclari ul li { width: 30%;}
}

@media(max-width:500px){
    .arama_sonuclari ul li { width: 45%; min-height: 290px;}
}
.mobilMenu,
.ara,
.il_ara,
.basket,
.anasayfa,
.compa{ display: block; font-size: 22px; float: left; padding: 5px 8px; margin: 9px 25px 9px 0; cursor: pointer; background-color: #016e05;border: 1px solid #016e05;border-radius: 3px; color: #fff; }
.basket a{ color: #fff; }
.compa a{ color: #fff; }
.anasayfa a{ color: #fff; }
.ara,
.il_ara{  float: right; margin: 9px 19px 9px 0;}
.anasayfa{ display: none; }
.mobilMenu:hover{background-color: #2f2f2f;}
.menuKapa {display: none;position: fixed;top: 12px;left: 15px; font-size: 30px; color: #000;border-radius: 0 0 4px 4px;z-index: 101; cursor: pointer; }
.menu{ position: fixed; overflow: auto; z-index: 100; left: -280px; top: 0; height:100%; background-color: #fff; background-image: url("../img/logo.png"); background-position: 60px 10px; background-repeat: no-repeat; width: 280px; transition: all .3s ease-in-out; padding-top: 70px;} 
.menu div{ margin:0 3%; }
.menu ul{ text-align:left; list-style: none; padding: 0; margin:0;}

.menu .ana_buton.pasif ul{ display: none; }
.menu .ana_buton.aktif ul{ display: block; }


.menu .alt_buton.pasif ul{ display: none; }
.menu .alt_buton.aktif ul{ display: block; }


.menu:after{display: block;content: ''; clear: both;}

.menu label{ cursor: pointer; display: block; padding: 8px; margin-bottom: 5px; background-color: #fff; border: 1px solid rgba(1, 110, 5, 0.15); border-radius: 3px; text-align:left;}
.menu label i{ margin-right: 10px; color: #50bd50; } 
.menu label:hover{ background-color: #e9f2e9;}
.menu ul li{ position: relative; transition: all .3s ease-in-out; cursor: pointer; display: block; padding:10px; font-size: 15px; font-weight: 300; background-color: #e8e8e8; margin-bottom: 3px; vertical-align: middle; }
.menu ul li i{ font-size: 7px; top: -2px; position: relative;margin-right: 5px; }
.menu ul li:hover{ color: #016e05; padding-left: 15px; }

.menu ul li u{position: absolute;right: 5px;top: 13px;padding: 0 5px;color: #fff;background-color: green;border-radius: 4px;text-decoration: none;font-size: 12px;}
 
.ozellikler{ display: none; }
#teklif{ display: block;color: #525252; }

.menu section{ background-color: #fff; padding-bottom: 150px; }
.menu ul li.aktif{ background-color: #50bd50; color: #fff; }


div.aktif .ozellikler{ display: block; }



.footer{ background-color: rgba(255, 255, 255, 0.3); padding: 15px 0; }
.footer p{  margin:0; float: left; font-weight: 300; font-size: 13px; }
.adanet{ position: fixed; height: 15px; left: 5px; bottom: 15px; height: 15px; display: inline-block; }
.adanet img{ height: 15px; }
.footerMenu ul{list-style: none; padding: 0; margin:0; }
.footerMenu ul li{ display: inline-block; }
.footerMenu ul li a{ display: inline-block; color: #fff; padding: 0 20px 0 0; }
#gallery{ height: 100%; width: 100%;   }
#gallery img{ height: 300px; width: auto; }

.media{ font-size: 32px;}
.face{color: #4267b2;}
.twit{ color: #1da1f2; }
.plus{ color: #d74633; }
.wapp{ color: #189d0e; }
.urunler{ list-style: none; padding: 0; margin:0; text-align:left;}
.urunler li{ display: inline-block; width: 12.6%; margin:0.7%; height: 300px; position: relative;}

#benzerler li{ width: 100%; margin:0;}

.urunler li a{ display: block; width: 100%; height: 200px; overflow: hidden;border-radius: 8px;}
.urunler li a div{  width: 100%; height: 200px;  transition: all .8s ease-in-out; background-size: cover; background-position: center center;}
.urunler li a h3{margin: 0;padding: 10px 0;width: 100%;box-sizing: border-box;text-align: center;font-weight: 400;color: #000;position: absolute;left: 0;bottom: 40px;font-size: 16px;height: 55px;overflow: hidden;}
.urunler li span{    position: absolute;right: 0;bottom: 0;padding: 5px;line-height: 20px;color: #000;font-weight: 100;box-sizing: border-box; width: 100%; background-color: #fff; border: 1px solid #f1f0f0;}
.urunler li span input{ width: 20px; height: 20px; position: relative; float: left; margin-right: 5px;}
.urunler li a:hover div {transform: scale(.82);-webkit-transform: scale(1.12);}

 


@media(max-width: 1400px){
    .urunler li{ width: 23.6%; }
}

@media(max-width: 1024px){
    .urunler li{ width: 31.9%; }
    .icerik ul li:after{ display: block; clear: both; content: '';}
    .icerik ul li{ text-align:right; }
    .icerik ul li label{ width: 40%; float: left; text-align: left; } 
    .icerik ul li span{ line-height: 160%; width: 59%; display: inline-block; vertical-align: middle; }
    /*.arama_sonuclari{ position: absolute; }*/
}
@media(max-width: 768px){
    .urunler li{ width: 48.6%; }
    .icerik figure, .icerik ul{ width: 100%;  }
    .kbaslik{ display: none; }
    .col-md-3{ width: 100%; text-align:right; }
    .col-md-3 b{ display: inline-block; float:left; }
    .sosyal_medya{ text-align:center; width: 100%; }
    .sosyal_medya li{ padding: 2%;}
    .logo{  height: 28px;width: 118px; padding: 5px 0; }
    .logo img{ width: 118px; }  
    .sosyal_medya .left{  }
    .anasayfa{ display: block; }
}
@media(max-width: 550px){
    #filtre{transition: all .3s ease-in-out;border-top: 1px solid green; position: fixed; left: 0; bottom:-308px; width: 98%; padding: 8px 1%; background-color: #fff; margin-bottom: 0; z-index: 1; }
    #filtre .filtre_daralt{ border-left: 1px solid green; border-top: 1px solid green;  cursor: pointer; position: absolute;right: 0;top: -41px;color: #016e05;font-size: 23px;height: 30px;display: block;background: #ffffff;padding: 5px 10px;}
    #filtre .listesi{ height:300px; overflow: auto;  }
    .adanet {opacity: 0.4;}
    .icerik figure a{ min-height: 260px; }
    /* .urunler li{ width: 96%; height: 55px; margin:0 0 0 0; padding: 2%; background-color: #fff; }
    .urunler li a{ height: 55px; display: table-row; }
    .urunler li a div{ height: 55px; width: 55px; border-radius: 50%; float: left; }
    .urunler li a h3{font-size: 14px; display: table-cell; vertical-align: middle; color: #000; background-color: transparent; position: relative;text-align:left; padding: 0 55px 0 10px; height:  55px; bottom: 0;  }
    .urunler li:nth-of-type(2n+1){background-color: #eaf3e5;}
    .urunler li span{ width: 32px;font-size: 8px; color: #000!important; text-align: center;padding: 8px 8px 8px 0; background-color: inherit; border: none;    box-sizing: inherit;}



    .urunler li span input{ float: inherit; } */

    .baslik{ text-align:center; }
    .baslik h2{ margin-top: 0; font-size: 20px; } 
    .baslik h1{ margin-bottom: 0; font-size: 23px; } 
    .container{ width: 95%; }
    body{ padding-top: 50px!important; }
    main{ padding-top: 0px!important; }
    .header{ padding:5px 0;  } 
    #diller{padding: 8px 0;}
    .mobilMenu,
    .ara,
    .il_ara,
    .basket,
    .anasayfa,
    .compa{ margin:0;  }
    .ara,
    .il_ara,
    .basket,
    .anasayfa,
    .compa{ margin-left: 4px; float: left;}
    .br{ display: block; }
    .footer p{ text-align:right; }
    .marmara-group{ width: 44%; }
    .footerMenu ul li{ display: block; }
    #gallery img{ height: 300px; }
    .arama_sonuclari {width: 95%;margin: 5px auto;}
    input#arama_sonuclari,input#il_arama_sonuclari  {margin-top: 6px;}
    .araKapa, .ilaraKapa {top: 6px;}
    .teklif_btn{ width: calc(100% - 12px);box-sizing: border-box;margin: 5px;padding: 10px 0; }
    .sepet_resmi{ float: left; }
}

.myList{ 
  list-style: none; margin: 0; padding: 0; 
  display: flex;flex-direction: row;flex-wrap: wrap;justify-content: stretch;align-items: stretch;align-content: stretch;
}
.myList li {width: 14.28%; padding: 10px; box-sizing: border-box; position: relative;}
.myList li a{ display: block; width: 100%;}
.myList li a div{ height: 200px;display: block; width: 100%; background-position: center center; background-size: cover;}
.myList li a h3{line-height: 122%;margin: 10px;font-size: 17px;font-weight: normal;} 
.myList li a h2{ white-space: nowrap;margin: 10px; font-size: 12px; width: calc(100% - 20px); text-overflow: ellipsis; overflow: hidden; color:gray;font-weight: normal;}
.myList li .islemler{ padding: 10px;}
.myList li .islemler .uruneGit,
.myList li .islemler button{ display: inline-block; text-align:center; width: 48%; margin: 0 1%;box-sizing: border-box; border: 0;padding: 5px;background-color: whitesmoke;outline: none; height: 34px; color: #000;}  

.satir{height: 100%;display: flex;flex-direction: column;flex-wrap: wrap;justify-content: space-between;align-items: stretch;align-content: stretch; background-color: #fff;}
.my_aktif{background-color: #008a5c!important; color: #fff;}

@media(max-width:1024px){
  .myList li {width: 25%;}
}
@media(max-width:768px){
  .myList li {width: 50%;}
}
@media(max-width:470px){
  .myList li {width: 100%; padding: 0 0 10px 0;}
  .satir{display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: flex-start;align-items: stretch;align-content: stretch;}
  .myList li .islemler{display: flex;flex-direction: column;flex-wrap: nowrap;justify-content:space-between;align-items: stretch;align-content: stretch;}
  .myList li .islemler button{ width: 100%;}
  .satir a{display: flex!important;flex-direction: row;flex-wrap: nowrap;justify-content: flex-start;align-items: stretch;align-content: stretch; width: calc(100% - 48px)!important}
  .myList li a div {height: 90px;width: 90px;} 
  .basliklar{width: calc(100% - 80px)!important}
}