@media screen and (max-width: 1367px) {
  .col-lp-zoom190 {
    zoom: 190% !important;
  }

  .col-lp-zoom120 {
    zoom: 120% !important;
  }
}

@media screen and (max-width: 1336px) {
  .col-lp-zoom190 {
    zoom: 120% !important;
  }

  .col-lp-zoom120 {
    zoom: 120% !important;
  }
}

@media screen and (min-width: 1336px) {

  header .container div,
  footer .container div {
    zoom: 92%;
  }

  header {
    top: -147.34px;
  }

  .urunlistesi {
    zoom: 87%;
  }

  #motto .container .row,
  .carouselToggle {
    zoom: 75%;
  }

  #information .container .row {
    zoom: 80%;
  }

  .zoom66 {
    zoom: 66%;
  }

  .col-lp-pl10 {
    padding-left: 10px;
  }

  .col-lp-pr10 {
    padding-right: 10px;
  }
}

@media screen and (min-width: 1400px) {

  header .container div,
  footer .container div {
    zoom: 100%;
  }

  .urunlistesi {
    zoom: 100%;
  }

  #motto .container .row,
  .carouselToggle {
    zoom: 100%;
  }

  #information .container .row {
    zoom: 100%;
  }

  header {
    top: -117.34px;
  }


}

@media screen and (max-width: 992px) {
  .col-sm-zoom65 {
    zoom: 65%;
  }

  header .container div,
  footer .container div {
    zoom: 100%;
  }

  .urunlistesi {
    zoom: 100%;
  }

  #motto .container .row,
  .carouselToggle {
    zoom: 100%;
  }

  #information .container .row {
    zoom: 100%;
  }

  .col-sm-h5847 {
    height: 58.47px !important;
  }
}

/* ========== Reset ========== */
.flags.activeLang {
  display: block !important;
}

a {
  text-decoration: none;
}

ul {
  padding: 0;
  margin: 0;
}

.col-sm-visible {
  display: none;
}

.pos-sticky {
  position: sticky;
}

.windowh {
  height: 100vh;
}

ul {
  margin: 0;
  padding: 0;
}

.grid {
  display: grid;
}

@media screen and (max-width:992px) {
  .col-sm-visible {
    display: inline-block !important;
  }

  .col-sm-hidden {
    display: none !important;
  }

  .col-sm-mha {
    min-height: auto !important;
  }

  .col-sm-pos-sticky {
    position: sticky;
  }

  .col-sm-lti {
    top: initial !important;
  }

  .col-sm-lli {
    left: initial !important;
  }
}


.cwa {
  content-visibility: auto;
}

@media screen and (max-width: 992px) {
  .subTitle {
    display: none;
  }
}

/* ========== Banner Aspect Ratio ==========  */
.carousel-wrapper {
  position: relative;
  height: 0px;
  overflow: hidden;
}

.carousel-wrapper2 {
  position: relative;
  height: 0px;
  overflow: hidden;
}

.carousel-elem {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

/* ========== Banner Aspect Ratio End ==========  */
/* ========== Reset End ========== */
.checkbox {
  appearance: none;
  height: 30px;
  width: 30px;
  min-height: 30px;
  min-width: 30px;
  max-height: 30px;
  max-width: 30px;
  background-image: radial-gradient(circle farthest-corner at 10% 20%, rgb(72 162 69) 0.1%, rgb(6 154 185) 99.8%);
  background-size: 360% 100%;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  float: left;
}

.checkbox:after {
  content: attr(data-name);
  top: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-family: "Inter", sans-serif;
  color: #3f3f3f;
  z-index: 99;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.checkbox:before {
  content: "";
  position: absolute;
  top: 0%;
  left: 0px;
  height: 200%;
  width: 200%;
  background: #e9e9e9;
  z-index: 0;
  transition: all 0.2s linear;
  transform: scale(0.6) translate(-50%, -50%);
}

.checkbox:hover:before,
.checkbox:focus-visible:before {
  background: #cacaca;
  top: -4%;
  left: 20%;
}

.checkbox:checked:before {
  opacity: 0;
  transform: scale(0.9);
}

.checkbox:checked:after {
  color: white;
}

.checkbox:checked {
  box-shadow: 0px 4px 10px -6px black;
}

.checkbox:focus-visible {
  outline: none;
  box-shadow: 0px 0px 0px 5px #480f5d;
}

@media screen and (max-width: 992px) {
  .col-sm-danger {
    background-color: #ff4e4e !important;
    color: white !important;
    border-radius: 15px;
  }
}

/* ========== Classes ========== */
.center-w {
  display: table;
  width: initial;
  margin: auto;
}

.center-h {
  align-items: center;
  display: flex;
}

.center-content {
  width: 100%;
}

.nowrap {
  white-space: nowrap;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ellipsis2 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media screen and (max-width:992px) {
  .col-sm-wrap {
    white-space: normal !important;
  }

  .col-sm-center-h {
    display: flex;
    align-items: center;
  }

  .col-sm-center-w {
    display: table;
    width: initial;
    margin: auto;
    float: none !important;
  }

  .col-sm-whitesmoke {
    background-color: whitesmoke;
  }

  .col-sm-ellipsis2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .col-sm-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .col-sm-back-none {
    background-color: transparent !important;
  }
}

/* ========== Classes End ========== */
/* General Use */
main {
  width: 100%;
  float: left;
}

#main {}

#soft {
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.soft-slow2 {
  -webkit-transition: all 0.33s ease-in;
  -moz-transition: all 0.33s ease-out;
  -o-transition: all 0.33s ease-out;
  -ms-transition: all 0.33s ease-out;
  transition: all 0.33s ease-out;
}

.headercontent.pos-sticky {
  position: sticky !important;
}

.pos-sticky {
  position: sticky !important;
}

.op-hover:hover {
  opacity: 1 !important;
}

@media screen and (max-width:992px) {
  .col-sm-back-none {
    background: none !important;
  }

  .member-actions .active {
    background-color: transparent !important;
  }

  .member-actions .active i {
    color: #ef7720 !important;
    opacity: 1 !important;
  }
}

@media screen and (max-width:768px) {
  .col-xs-back-none {
    background: none !important;
  }

  .col-xs-colored {
    color: rgba(48, 48, 48, 1) !important;
  }

  .col-xs-colored-bg {
    background-color: rgba(48, 48, 48, 1) !important;
  }
}

/* General Use End */
/* Navbar Settings */
.navbar {
  background-color: transparent !important;
  border: 0px !important;
}

.navbar-default {
  background-color: none !important;
  border: 0px !important;
}

.navbar-default .navbar-form {
  display: none;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
  background: none;
}

/* Navbar Settings End */
/* Reset Css Settings */
a {
  text-decoration: none !important;
}

ul {
  padding: none !important;
  list-style: none !important;
}

/* Reset Css Settings End */
/* Parallax Image Settings */
.parallax {
  /* Image, style olarak, parallax clasının verildiği nesneye verilir. */
  /* Height olmaz ise parallax özelliği çalışmaz. Parallax clasının verildiği nesneye style yada farklı bir şekilde, min-height değeri tanımlanması gerekir. */
  /* Parallax Scroll Efecti */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* Parallax Scroll Efecti End */
}

/* Parallax Image Settings End */

/* ========== Custom Select ========== */
.selectpicker {
  border-radius: 0px !important;
  outline: none !important;
  line-height: 46px !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

.bootstrap-select .btn:focus {
  outline: none !important;
}

.input-block-level {
  border-radius: 0px !important;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: none;
}

.btn-group.open .dropdown-toggle {
  box-shadow: none !important;
}

.dropdown-toggle:active {
  box-shadow: none !important;
  background: none !important;
}

.medle .dropdown-toggle:hover {
  box-shadow: none !important;
  background: none !important;
}

.selectpicker li a:focus {
  outline: none !important;
}

.bootstrap-select.btn-group .btn .filter-option {
  font-size: 12px;
  opacity: .7;
}

.dropdown-menu>li>a {
  font-size: 12px;
}

.btn-default.active,
.btn-default.focus,
.btn-default:active,
.btn-default:focus,
.btn-default:hover,
.open>.dropdown-toggle.btn-default {
  background-color: transparent;
}

/* ========== Custom Select End ========== */
/* ========== Vitrin Styles End ========== */
/* ========== Flash class and keyframe animation ========== */
.flashit {
  -webkit-animation: flash linear 2s infinite;
  animation: flash linear 2s infinite;
}

@-webkit-keyframes flash {
  0% {
    opacity: 1;
  }

  50% {
    opacity: .1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes flash {
  0% {
    opacity: 1;
  }

  50% {
    opacity: .1;
  }

  100% {
    opacity: 1;
  }
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* ========== Flash class and keyframe animation End ========== */
/* Bootstrap Modal Centered */
.modal {
  text-align: center;
  padding: 0 !important;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

/* Bootstrap Modal Centered End */
/* ========== Yeni Nesil Menü ========== */



@media screen and (min-width: 992px) {
  nav .menu-item:hover .toggle {
    color: #de291c !important;
      text-decoration: underline !important;
      text-underline-offset: 5px;
      text-decoration-color: #de291c !important;
      text-decoration-thickness: 2px !important;
  }
  .menu-item.drop .sub {
    height: 0px;
    overflow: hidden;
    position: absolute;
    width: 100%;
    left: calc(-225px + 25%);
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }
}

.drop .sub {
  height: 0px;
  overflow: hidden;
  position: absolute;
  width: 100%;
  left: 0;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

/* ========== Yeni Nesil Menü End ========== */
/* ========== Basic Filter ========== */




/* ========== Basic Filter End ========== */
/* ========== Number İnput ========== */
input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.number-input {
  border: 1px solid #ddd;
  display: inline-flex;
}

.number-input,
.number-input * {
  box-sizing: border-box;
}

.number-input button {
  outline: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 38px;
  cursor: pointer;
  margin: 0;
  position: relative;
  border-radius: 3px;
}

.number-input button:before,
.number-input button:after {
  display: inline-block;
  position: absolute;
  content: '';
  width: 6px;
  height: 2px;
  background-color: #fff;
  transform: translate(-50%, -50%);
}

.number-input button.plus:after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.number-input input[type=number] {
  font-family: sans-serif;
  padding: .5rem;
  border: solid #ddd;
  border-width: 0 1px;
  font-size: 14px;
  height: 38px;
  font-weight: bold;
  text-align: center;
  border-radius: 3px;
}

/* ========== Number İnput End ========== */
/* ========== Custom Checkbox ========== */
.custom-check {
  position: relative;
  padding-left: 33px;
}

.custom-check input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 22px;
  width: 22px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.custom-check:hover input~.checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.custom-check input:checked~.checkmark {
  background-color: rgba(249, 90, 55, 1);
}

/* Create the checkmark/indicator (hidden when not checked) */
.custom-check:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.custom-check input:checked~.checkmark:after {
  display: block;
  content: "\e917";
  font-family: 'default' !important;
  color: white;
  font-size: 11px;
  text-align: center;
  line-height: 22px;
}

/* Style the checkmark/indicator */
.custom-check .checkmark:after {}

/* ========== Custom Checkbox End ========== */

/* Ekstra Font */


/* Coves Light End */
.coves-light {
  font-family: coves-light !important;
  font-weight: normal !important;
}

/* Coves Light End */
/* Coves Bold End */
.coves-bold {
  font-family: coves-bold !important;
  font-weight: normal !important;
}

/* Coves Bold End */
/* Ekstra Font End */

/* === CUstom Label === */
.custom-label {
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border: solid 1px rgba(0, 0, 0, 0.1);
  margin-bottom: 0;
  border-radius: 3px;
}

.custom-label:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

.custom-label span {
  color: black;
  opacity: .6;
  font-size: 11px;
  /*text-transform: lowercase;*/
}

.custom-label.active {
  background-color: rgba(249, 90, 55, 1);
}

.custom-label.active span {
  color: white !important;
  opacity: 1 !important;
}

/* === CUstom Label End === */


.file-label {
  border: dashed 1px rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  height: 25vh;
  position: relative;
}

.file-label:hover {
  border: 3px dashed green !important;
}

.file-label input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.file-label img {
  max-height: 100%;
  position: relative;
}




.spin {
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear infinite;
  animation: spin 4s linear infinite;
  display: table;
  margin-bottom: 0px;
}

.spin-slow {
  -webkit-animation: spin 25s linear infinite;
  -moz-animation: spin 25s linear infinite;
  animation: spin 25s linear infinite;
  display: table;
  margin-bottom: 0px;
}

/* ========== Animation ========== */
@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* ========== Animation End ========== */



/* ========== Header ========== */

/* === Account === */
#accountline {
  height: 0px;
  overflow: hidden;
}

.accountactions li:last-child {
  border-right: 0px !important;
}



@media screen and (max-width:992px) {
  .accountname {
    margin-bottom: 15px;
    margin-left: -10px;
    margin-right: -10px;
    margin-top: -10px;
    width: -webkit-fill-available;
    background-color: rgba(0, 0, 0, 0.1);
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* === Account End === */

.hoverMenu:hover {
  color: #001187 !important
}


/* === Fixed Siee Menü === */
.fixed-side-menu .navbar-default {
  background-color: transparent !important;
}

@media screen and (max-width:992px) {
  .fixed-side-menu {
    position: fixed !important;
    width: 75% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
    background-color: #fff;
    z-index: 5;
    background-image: url(../img/pattern2.png);
    background-position: top center;
    background-repeat: no-repeat;
    margin-left: -100%;
  }

  .fixed-side-menu .nav-logo {
    background-color: #fff;
    border-bottom: solid 1px rgba(0, 0, 0, 0.03) !important;
  }

  .fixed-side-menu .menu-item:first-child>a:before {
    display: none;
  }

  .fixed-side-menu .menu-item {
    border-bottom: dashed 1px rgba(0, 0, 0, 0.1);
  }

  .fixed-side-menu .menu-item>a:before {
    content: "\e967";
    font-family: 'default';
    font-size: 8px;
    line-height: 21px;
    float: left;
    margin-right: 5px;
    opacity: .6;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
  }

  .fixed-side-menu .menu-item:hover>a:before {
    transform: rotate(90deg);
  }

  .fixed-side-menu .menu-item .sub {
    position: relative !important;
    top: 0px !important;
    overflow-y: inherit !important;
  }

  .fixed-side-menu .menu-item .sub .sub-content {
    padding-top: 0px !important;
  }

  .fixed-side-menu-close-toggle {
    position: fixed;
    width: 25%;
    height: 100%;
    right: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 5;
    margin-right: -100%;
  }

  .fixed-side-menu .navbar-default {
    height: 100% !important;
  }
}

/* === Fixed Side Menü End === */

.member-actions-fixed .center-content ul {
  width: 0px !important;
  overflow: hidden;
}

.member-actions-fixed .center-content.active ul {
  width: 100% !important;
  overflow: visible;
}



/* ========== Anasayfa Kategori ========== */
#kategori-vitrin .kategoriItem {
  margin-bottom: 30px;
}

#kategori-vitrin .kategoriItem a {
  height: 40vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#kategori-vitrin .kategoriItem:hover .hover-bg {
  background-color: rgba(3, 3, 3, 0) !important;
}

#kategori-vitrin .kategoriItem:nth-child(1) {
  width: 50%;
}

#kategori-vitrin .kategoriItem:nth-child(2) {
  width: 50%;
}

#kategori-vitrin .kategoriItem:nth-child(3) {
  width: 100%;
}

#kategori-vitrin .kategoriItem:nth-child(4) {
  width: 33.33%;
}

#kategori-vitrin .kategoriItem:nth-child(5) {
  width: 33.33%;
}

#kategori-vitrin .kategoriItem:nth-child(6) {
  width: 33.33%;
}

@media screen and (max-width: 768px) {
  #kategori-vitrin .kategoriItem {
    width: 100% !important;
  }

  #kategori-vitrin .kategoriItem a {
    height: 20vh;
  }
}

/* ========== Anasayfa Kategori End ========== */
.pagination a {
  width: 30px;
  height: 30px;
  line-height: 30px !important;
  display: block;
  background-color: #e7e9fd !important;
  color: #111 !important;
  border-radius: 5px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-align: center;
}

.pagination .active a {
  background-color: #4456ce !important;
  color: white !important;
}

.pagination .active a:hover {
  background-color: #4456ce !important;
  color: white !important;
}

.pagination li strong {
  background-color: #ffeb44 !important;
  border-radius: 100%;
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  ;
}

.pagination li {
  margin-right: 3px;
}

.pagination li:hover a {
  background-color: #acb3f8 !important;
}

/* ========== Header End ========== */



.visualContent .slick-prev:before {
  content: "\e944" !important;
  font-family: 'default' !important;
  color: #ef7720;
  font-size: 16px !important;
  line-height: 16px !important;
}

.visualContent .slick-next:before {
  content: "\e967" !important;
  font-family: 'default' !important;
  color: #ef7720;
  font-size: 16px !important;
  line-height: 16px !important;
}

.thumbscontent .slick-slide img {
  border: dashed 1px rgba(239, 119, 32, 0);
  border-radius: 3px;
}

.thumbscontent .slick-current img {
  border: dashed 1px rgb(239, 119, 32);
}

.viewContent-close:hover {
  -webkit-animation: spin .3s linear;
  -moz-animation: spin .3s linear;
  animation: spin .3s linear;
  border-radius: 50%;
}

.viewContent.active {
  display: flex;
  align-items: center;
}




/* ===== Sepet TimeLine ===== */
.timeLine .barFull {
  width: 0%;
}

.timeLine .asamaText {
  color: #efefef;
}

.timeLine .lineActive {
  background-color: #05c148;
  color: #05c148;
}

.timeLine .lineActive .circle {
  background-color: #05c148 !important;
}

.timeLine .lineActive .asamaText {
  color: #05c148;
}

.timeLine .linePasive {
  background-color: #efefef;
  color: #efefef;
}

.timeLine .bar {
  background-color: #efefef;
}

.timeLine .timeBubble .bubble .circle {
  background-color: #efefef;
}

.timeLine .timeBubble .sepetBubble {
  width: 12.5% !important;
}

.timeLine .timeBubble .bubble {
  width: 25%;
}

@media screen and (max-width: 992px) {
  .timeLine .timeBubble .sepetBubble {
    width: 9% !important;
  }
}

/* ===== Sepet TimeLine End ===== */
/* ===== Ödeme Sayfası Ayarları ===== */
#part-two.active {
  min-height: calc(100vh - 331px);
}

#pnlTaksit select {
  height: 49px;
}

@media screen and (max-width: 1200px) {
  #part-one .toggles {
    display: block !important;
    text-align: center !important;
  }

  #part-one .toggles i {
    font-size: 50px !important;
    line-height: 50px !important;
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 10px;
  }

  #part-one .toggles.ptt-toggle span {
    font-size: 12px !important;
  }

  #part-one .toggles .center-h {
    width: 100% !important;
  }
}

@media screen and (max-width: 992px) {
  #part-one .toggles i {
    font-size: 30px !important;
    line-height: 30px !important;
    margin-bottom: 5px !important;
  }
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
#cardcontent {
  background-color: transparent;
  perspective: 1000px;
  /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.cardInner {
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
#cardcontent:hover .cardInner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.cardInner .front,
.cardInner .back {
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */


/* Style the back side */
.cardInner .back {
  transform: rotateY(180deg);
}


.mobilecontent {
  display: none;
}

#cardcontent.mobile {
  display: none !important;
}

@media screen and (max-width:992px) {
  .mobilecontent {
    display: flex;
    align-items: center;
  }

  #cardcontent.mobile {
    display: block !important;
  }
}


.front .card-visual {
  padding: 10%;
}

.front .chip {
  width: 22%;
  height: 35%;
  background-color: rgba(0, 0, 0, 0.2);
}

.front .chip .chipIn {
  width: 75%;
  height: 60%;
  background-color: rgba(255, 255, 255, .3);
}

.front .card-name {
  bottom: 17%;
  font-size: 106%;
  text-transform: uppercase;
}

.front .card-number {
  margin-top: 9%;
  font-size: 152%;
  letter-spacing: 5px;
}

.front .card-date {
  bottom: 17%;
  font-size: 110%;
  padding-right: 10%;
}

@media screen and (max-width: 992px) {
  .front .card-date {
    padding-right: 17%;
  }
}

.front .card-date .title {
  font-size: 68%;
  top: -75%;
  letter-spacing: 1px;
}

.back .card-visual {
  padding: 10%;
}

.back .line {
  top: 12%;
}

.back .line .lineIn {
  width: 75%;
  height: 60%;
  background-color: rgba(255, 255, 255, .3);
  top: 10%;
}

.back .signature {
  margin-top: 16%;
}

.back .signature .signatureIn .card-cvv {
  letter-spacing: 2px;
}

.back .chip {
  width: 22%;
  height: 35%;
  background-color: rgba(0, 0, 0, 0.2);
  margin-top: 7%;
}

.back .chipIn {
  width: 75%;
  height: 60%;
  background-color: rgba(255, 255, 255, .3);
}

.back .text {
  width: 78%;
  height: 35%;
  margin-top: 7%;
  padding-left: 5%;
}

@media screen and (max-width:768px) {
  .front .card-number {
    font-size: 4vw;
    letter-spacing: .1vw;
  }

  .front .card-name {
    font-size: 3vw;
  }

  .front .card-date {
    font-size: 3vw;
  }

  .back .line {
    padding: 4vw 0vw !important;
  }

  .signatureIn {
    padding: 4vw 0vw !important;
  }

  .card-cvv {
    font-size: 4vw !important;
    letter-spacing: 0.2vw;
  }

  .back .text {
    font-size: 2vw !important;
  }
}

@media screen and (max-width:420px) {
  .back .text {
    font-size: 1.5vw !important;
  }
}

/* Customize the label (the container) */
.checkbox-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkbox-container:hover input~.checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked~.checkmark {
  background-color: #9e0408;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked~.checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Customize the label (the container) */
.checkbox-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.checkbox-container:hover input~.checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.checkbox-container input:checked~.checkmark {
  background-color: #9e0408;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.checkbox-container input:checked~.checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.checkbox-container .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

/* Havale İle Ödeme */
#hvl-box p.title:first-child {
  width: 100%;
  float: left;
  font-family: 'fw7';
  font-size: 18px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
  padding-bottom: 30px;
  margin-top: 15px;
  text-transform: uppercase;
  color: #3c464f;
}

#hvl-box .bankbox {
  width: 50%;
  float: left;
  padding: 25px;
}

@media screen and (max-width:768px) {
  #hvl-box .bankbox {
    width: 100% !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
  }
}



#hvl-box .bankbox:nth-child(1) {}

#hvl-box .bankbox:nth-child(2) {
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
  border-right: 1px dashed rgba(0, 0, 0, 0.1);
}

#hvl-box .bankbox:nth-child(3) {
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}

#hvl-box .bankbox:nth-child(4) {
  border-right: 1px dashed rgba(0, 0, 0, 0.1);
}





#hvl-box .bankbox p:first-child {
  font-family: arial;
  font-weight: 600;
  font-size: 15px;
  color: #e6b62f;
}

#hvl-box .bankbox p:nth-child(2) {
  font-family: 'fw6';
  font-size: 13px;
  color: #ffffffd9;
  width: 100px;
  float: left;
  background-color: #3c464f;
  border-radius: 3px;
  padding: 15px;
  text-align: left;
  letter-spacing: .2px;
  margin-right: 15px;
}

#hvl-box .bankbox p:nth-child(3) {
  margin-top: 20px;
  font-family: 'fw6';
  opacity: .8;
}

#hvl-box .bankbox p:nth-child(4) {
  font-family: 'fw7';
  font-size: 16px;
  line-height: 16px;
  letter-spacing: .3px;
}

#hvl-box .bankbox p:nth-child(5) {
  font-family: 'fw4';
  font-size: 14px;
  line-height: 14px;
  letter-spacing: .3px;
  opacity: .8;
}

/* Havale İle Ödeme End */


.kapida-odeme-text {
  width: 70%;
  padding: 25px;
  float: left;
  font-family: 'fw6';
  font-size: 16px;
  margin: 0px;
  align-items: center;
  display: flex;
}

@media screen and (max-width:768px) {
  .kapida-odeme-text {
    width: 100% !important;
  }
}

.kapida-odeme-text .center-content {
  width: 100%;
  float: left;
}

.mha {
  min-height: auto !important;
}

.maxha {
  max-height: auto !important;
}

.copyiban.active i {
  color: #25cc40 !important;
  opacity: 1 !important;
}

.copied {
  background-color: #f5ffed !important;
}

/* ===== Ödeme Sayfası Ayarları End ===== */


/* Customize the label (the container) */
.customCheck {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.customCheck input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.customCheck:hover input~.checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.customCheck input:checked~.checkmark {
  background-color: #02c148;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.customCheck input:checked~.checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.customCheck .checkmark:after {
  left: 10px;
  top: 7px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.shake {
  animation: shake 3s infinite;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.shakeContent:hover .shakeHover {
  animation: shake 3s infinite;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.shakeHover:hover {
  animation: shake 3s infinite;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {

  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

.pullTop:hover img {
  -webkit-box-shadow: 42px 38px 42px -38px rgb(0 0 0 / 58%);
  -moz-box-shadow: 42px 38px 42px -38px rgba(0, 0, 0, .58);
  box-shadow: 42px 38px 42px -38px rgb(0 0 0 / 58%);
}

.spin {
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear infinite;
  animation: spin 4s linear infinite;
}


@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


.toggles {
  opacity: .8;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.toggles:hover,
.toggles.active {
  opacity: 1;
  background-color: #f5ffed;
  border-color: #90be6d !important;
}


.copyiban.active i {
  color: #25cc40 !important;
  opacity: 1 !important;
}


.colored-hover-custom:hover {
  background-color: transparent !important;
  box-shadow: inset 0px 0px 40px #d6639a;
  border-radius: 5px;
}

.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
  vertical-align: inherit;
  border: none !important;
}

tr.odd {
  background-color: transparent !important;
  border-bottom: solid 10px #f7f7f7;
  border-top: solid 10px #f7f7f7;
}

tr.even {
  background-color: transparent !important;
  border-bottom: solid 10px #f7f7f7;
  border-top: solid 10px #f7f7f7;
}

tr.odd td {
  background-color: #fff;
  padding: 10px !important;
}

tr.even td {
  background-color: #fff;
  padding: 10px !important;
}

tr.odd td.sorting_1 {
  background-color: #fff !important;
}

tr.even td.sorting_1 {
  background-color: #fff !important;
}

.dataTables_info {
  font-family: 'fw6' !important;
}

.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
  outline: none !important;
}

.btn {
  border: solid 2px #f7f7f7 !important;
}

.btn-default.active,
.btn-default.focus,
.btn-default:active,
.btn-default:focus,
.btn-default:hover,
.open>.dropdown-toggle.btn-default {
  background-color: #eee;
}

.table-responsive {
  border: none !important;
}

.dtr-title {
  width: 100% !important;
  float: left;
  color: #ef7720;
}

.dtr-data {
  width: 100%;
  float: left;
}

.dtr-details {
  padding: 15px !important;
  background-color: #fff;
  width: 100%;
}

.dtr-details li {
  width: 100%;
  float: left;
}

td.child {
  padding: 0px !important;
}

.table.dataTable {
  border-collapse: collapse !important;
}

thead tr:hover,
tfoot tr:hover {
  box-shadow: none !important;
}



/* ========== Profesional Filter ========== */
/*//////////////////////////////////////////*/

/* The container */
.customradio {
  position: relative;
  padding-left: 33px;
}

/* Hide the browser's default radio button */
.customradio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.customradio .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 22px;
  width: 22px;
  background-color: #eee;
  border-radius: 3px !important;
}

/* On mouse-over, add a grey background color */
.customradio:hover input~.checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.customradio input:checked~.checkmark {
  background-color: rgba(249, 90, 55, 1);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.customradio .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 6px;
}

/* Show the indicator (dot/circle) when checked */
.customradio input:checked~.checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.customradio .checkmark:after {
  display: block;
  content: "\e917";
  font-family: 'default' !important;
  color: white;
  font-size: 11px;
  text-align: center;
  line-height: 22px;
}



/* The container */
.customcheck {
  position: relative;
  padding-left: 33px;
}

/* Hide the browser's default radio button */
.customcheck input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.customcheck .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 22px;
  width: 22px;
  background-color: #eee;
  border-radius: 3px !important;
}

/* On mouse-over, add a grey background color */
.customcheck:hover input~.checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.customcheck input:checked~.checkmark {
  background-color: rgba(249, 90, 55, 1);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.customcheck .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 6px;
}

/* Show the indicator (dot/circle) when checked */
.customcheck input:checked~.checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.customcheck .checkmark:after {
  display: block;
  content: "\e917";
  font-family: 'default' !important;
  color: white;
  font-size: 11px;
  text-align: center;
  line-height: 22px;
}

.filterRow {
  border-bottom: dashed 1px;
}

a.collapsed i {
  transform: rotate(-90deg);
}

/*//////////////////////////////////////////////*/
/* ========== Profesional Filter End ========== */


/* Animation */
@-webkit-keyframes myOrbit {
  from {
    -webkit-transform: rotate(0deg) translateX(10px) rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg) translateX(10px) rotate(-360deg);
  }
}

@-moz-keyframes myOrbit {
  from {
    -moz-transform: rotate(0deg) translateX(10px) rotate(0deg);
  }

  to {
    -moz-transform: rotate(360deg) translateX(10px) rotate(-360deg);
  }
}

@-o-keyframes myOrbit {
  from {
    -o-transform: rotate(0deg) translateX(10px) rotate(0deg);
  }

  to {
    -o-transform: rotate(360deg) translateX(10px) rotate(-360deg);
  }
}

@keyframes myOrbit {
  from {
    transform: rotate(0deg) translateX(10px) rotate(0deg);
  }

  to {
    transform: rotate(360deg) translateX(10px) rotate(-360deg);
  }
}

.rtanimate {
  -webkit-animation: myOrbit 8s linear infinite;
  -moz-animation: myOrbit 8s linear infinite;
  -o-animation: myOrbit 8s linear infinite;
  animation: myOrbit 8s linear infinite;
}

.rtanimate2 {
  -webkit-animation: myOrbit 13s linear infinite;
  -moz-animation: myOrbit 13s linear infinite;
  -o-animation: myOrbit13s linear infinite;
  animation: myOrbit 13s linear infinite;
}

.rtanimate3 {
  -webkit-animation: myOrbit 20s linear infinite;
  -moz-animation: myOrbit 20s linear infinite;
  -o-animation: myOrbit20s linear infinite;
  animation: myOrbit 20s linear infinite;
}

.rtanimate4 {
  -webkit-animation: myOrbit 10s linear infinite;
  -moz-animation: myOrbit 10s linear infinite;
  -o-animation: myOrbit10s linear infinite;
  animation: myOrbit 10s linear infinite;
}

/* Animation End */


/* Filter Layouts */
.linedesign {
  padding-bottom: 0px !important;
}

.linedesign>.boxcontent {
  display: flex !important;
}

.linedesign .new-visual {
  width: 15% !important;
}

.linedesign .info {
  width: 85% !important;
  padding-bottom: 10px !important;
}

.linedesign .info form {
  float: right;
  margin-top: 34px !important;
  position: relative;
  z-index: 25;
}

.linedesign .info .fiyat {
  float: right !important;
  text-align: left !important;
  width: 25% !important;
  margin-bottom: 0px !important;
}

.linedesign .info .fiyat>div {
  width: initial !important;
}

.linedesign .info .fiyat .fiyatusd1 {
  float: left !important;
}

.linedesign .info .fiyat .fiyattr {
  text-align: left !important;
  padding-left: 5px;
  width: 100% !important;
  float: left !important;
}

.linedesign .info .isim {
  width: 35% !important;
  float: left !important;
  text-align: left !important;
}

.linedesign .info .paketadedi {
  width: 100% !important;
  text-align: left !important;
  margin-top: -34px !important;
}

.linedesign .info .yasgrubu {
  width: 100% !important;
  text-align: left !important;
  border-top: 0px !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  opacity: 1 !important;
  padding-bottom: 0px !important;
  margin-top: -15px !important;
}

.linedesign .info .yasgrubu>.center-w {
  float: left !important;
}

.linedesign .info .yasgrubu>.center-w ul li span {
  border: none !important;
  color: #fff !important;
  background-color: #ef7720 !important;
  border-radius: 3px !important;
}

/* Filter Layouts End */


/* Ui Dialog */
.ui-dialog {
  width: 90% !important;
  left: 5% !important;
  background-color: #fafafa !important;
  border: dashed 2px rgba(0, 0, 0, 0.1) !important;
}

.ui-dialog .container {
  width: 100% !important;
}

.ui-dialog table.sepet {}

.ui-dialog table.sepet tr {}

.ui-dialog-titlebar {
  background: none !important;
  border: none !important;
  color: #ef7720 !important;
}

.ui-dialog .ui-dialog-title {
  width: 100% !important;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  background: none !important;
  border: none !important;
}

.ui-dialog-title {
  display: none !important;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  padding: 20px !important;
  z-index: 25;
}

.ui-widget-content {
  background: none !important;
  background-color: #fafafa !important;
}


.modal-content {
  box-shadow: none !important;
  border-radius: 0px !important;
  border: none !important;
}

.zoomImg {
  width: 230% !important;
  height: auto !important;
}

/* ========== Fake Check ========== */
.fakecheck:hover i.icon-checked {
  opacity: 2 !important;
}

/* ========== Fake Check End ========== */



/* ========== Filtre Mobil ========== */
@media screen and (max-width:992px) {
  .filter-content {
    margin-left: -100%;
    align-items: center;
    display: flex;
    background-color: #fff;
  }

  .professional-filter {
    position: relative !important;
    top: initial !important;
    box-shadow: none !important;
  }
}

/* ========== Ser Mobile Pro ========== */
#serMobilePro {
  background-color: #f00;
}

#serMobilePro .phonecontent .phone .phonecase {
  height: 50vh;
}

#serMobilePro .hover-on .phonecase {
  height: 60vh !important;
}

@media screen and (max-width:768px) {
  #serMobilePro .phonecontent .phone .phonecase {
    height: 42vh;
  }

  #serMobilePro .hover-on .phonecase {
    height: 45vh !important;
  }
}

/* ========== Ser Mobile Pro End ========== */
/* ========== Google Fonts ========== */
.jakarta {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ========== Google Fonts End ========== */
/* === Font Weight === */
.fw1 {
  font-weight: 100 !important;
}

.fw2 {
  font-weight: 200 !important;
}

.fw3 {
  font-weight: 300 !important;
}

.fw4 {
  font-weight: 400 !important;
}

.fw5 {
  font-weight: 500 !important;
}

.fw6 {
  font-weight: 600 !important;
}

.fw7 {
  font-weight: 700 !important;
}

.fw8 {
  font-weight: 800 !important;
}

.fw9 {
  font-weight: 900 !important;
}

@media screen and (max-width: 992px) {
  .col-sm-fw1 {
    font-weight: 100 !important;
  }

  .col-sm-fw2 {
    font-weight: 200 !important;
  }

  .col-sm-fw3 {
    font-weight: 300 !important;
  }

  .col-sm-fw4 {
    font-weight: 400 !important;
  }

  .col-sm-fw5 {
    font-weight: 500 !important;
  }

  .col-sm-fw6 {
    font-weight: 600 !important;
  }

  .col-sm-fw7 {
    font-weight: 700 !important;
  }

  .col-sm-fw8 {
    font-weight: 800 !important;
  }

  .col-sm-fw9 {
    font-weight: 900 !important;
  }
}

@media screen and (max-width: 768px) {
  .col-xs-fw1 {
    font-weight: 100 !important;
  }

  .col-xs-fw2 {
    font-weight: 200 !important;
  }

  .col-xs-fw3 {
    font-weight: 300 !important;
  }

  .col-xs-fw4 {
    font-weight: 400 !important;
  }

  .col-xs-fw5 {
    font-weight: 500 !important;
  }

  .col-xs-fw6 {
    font-weight: 600 !important;
  }

  .col-xs-fw7 {
    font-weight: 700 !important;
  }

  .col-xs-fw8 {
    font-weight: 800 !important;
  }

  .col-xs-fw9 {
    font-weight: 900 !important;
  }
}

/* === Font Weight End === */

.categoryImage>div>div {
  text-shadow: 0px 10px 8px #000000cc;
}

@media screen and (max-width) {
  .categoryImage>div>div {
    min-width: 211.83px;
  }
}

.drop {
  width: 100%;
}

.navbar-default>li {
  float: left !important;
}

.center-b {
  display: flex;
  align-items: flex-end;
}

.arial {
  font-family: arial !important;
}


.footercategory a {
  color: #ead700 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

.footercategory .sub {
  display: none !important;
}

.footercategory .menu-item {
  width: initial !important;
}

@media screen and (max-width:992px) {
  .subItem:nth-child(odd) {
    text-align: left !important;
  }

  .subItem:nth-child(even) {
    text-align: right !important;
  }

  .sub {
    width: 100%;
    float: left;
    overflow-y: none !important;
  }

  .sub-content {
    border-radius: 20px;
  }

  .menu-item:hover>a {
    color: #303030 !important;
  }

  header .navbar-default {
    overflow-y: auto !important;
  }

  header .leftpayanda {
    margin-left: -50px !important;
    height: 43px;
    top: 17px !important;
  }

  header .rightpayanda {
    margin-right: -50px !important;
    height: 43px;
    top: 17px !important;
  }
}

@media screen and (max-width:768px) {
  .subItem:nth-child(odd) {
    text-align: left !important;
  }

  .subItem:nth-child(even) {
    text-align: left !important;
  }

  .col-xs-bsn {
    box-shadow: none !important;
  }
}


.noSub .menu-item .sub {
  display: none !important;
}

.noSub .menu-item i {
  display: none !important;
}

.noSub .menu-item {
  padding-left: 5px !important;
  padding-right: 5px !important;
  width: 100% !important;
}

.noSub .menu-item>a {
  background-color: #333;
}

.noSub .menu-item:hover>a {
  background: rgba(48, 48, 48, 1) !important;
  color: #fff !important;
}


/* ========== Marka Liste ========== */
.markaliste .katlist .item.active a {
  background: #303030 !important;
  color: #fff !important;
}


@media screen and (max-width:768px) {
  .col-xs-lr21-yuzde {
    right: 21% !important;
  }

  #header.blur:before {
    content: "";
    width: 100%;
    height: 55px;
    background-color: rgba(255, 255, 255, .3);
    backdrop-filter: saturate(180%) blur(20px);
    position: absolute;
    left: 0;
    top: 37px;
  }
}


.w0 {
  width: 0%;
}


.spin-slow {
  -webkit-animation: spin 10s linear infinite;
  -moz-animation: spin 10s linear infinite;
  animation: spin 10s linear infinite;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes spins {
  100% {
    -moz-transform: rotate(-360deg);
  }
}

@-webkit-keyframes spins {
  100% {
    -webkit-transform: rotate(-360deg);
  }
}

@keyframes spins {
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(360deg);
  }
}





.colorsHeight::-webkit-scrollbar {
  width: 1px;
}

.colorsHeight::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
}

.colorsHeight::-webkit-scrollbar-thumb {
  background-color: rgba(33, 33, 33, .3);
  outline: 1px solid slategrey;
  cursor: pointer;
}

.mainHeight #carousel:hover .kaybol {
  opacity: 0 !important;
}

.varyantcolor {
  border: solid 1px rgba(0, 0, 0, 0);
  border-radius: 10px;
}

.varyantcolor.active {
  border-color: #e0ce03 !important;
}

@media screen and (max-width:768px) {
  .colorsHeight .item {
    width: 100px !important;
  }
}



.colorsHeight::-webkit-scrollbar {
  height: 1px !important;
  width: 1px !important;
}

.colorsHeight::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
}

.colorsHeight::-webkit-scrollbar-thumb {
  background-color: rgba(33, 33, 33, .3);
  outline: 1px solid slategrey;
  cursor: pointer;
}

/* Filter Layouts End */
.stokhata:before {
  content: "";
  display: block;
  width: 100%;
  height: 98%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: darkred;
  z-index: 25;
  opacity: .2;
  border-radius: 10px;
}

.center-h {
  display: flex;
  align-items: center;
}

.arial {
  font-family: 'arial' !important;
}


@media screen and (min-width: 992px) {
  .drop .sub {
    display: none;
  }
}



.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ellipsis1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ellipsis2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media screen and (max-width: 992px) {
  .col-sm-ellipsis1 {
    display: -webkit-box !important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ========== Yeni Tasarım ========== */
/* Arama İnputu Placeholder Rengi */
.searchContent .textInput::-webkit-input-placeholder {
  /* Edge */
  color: #727272;
}

.searchContent .textInput:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #727272;
}

.searchContent .textInput::placeholder {
  color: #727272;
}

@media screen and (max-width: 992px) {
  nav .textInput::-webkit-input-placeholder {
    /* Edge */
    color: white;
  }

  nav .textInput:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: white;
  }

  nav .textInput::placeholder {
    color: white;
  }
}

/* Arama İnputu Placeholder Rengi */
/* Menü Sub Color */
.sub-content {
  width: calc(100% - 1px);
}

#kategoriMenu nav ul li.drop:hover img {
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

#kategoriMenu nav ul li.drop:nth-child(2) .sub-content {
  background-color: #81cdd2 !important;
  border-color: #8cdde2 !important;
}

#kategoriMenu nav ul li.drop:nth-child(3) .sub-content {
  background-color: #dec560 !important;
  border-color: #fce278 !important;
}

#kategoriMenu nav ul li.drop:nth-child(4) .sub-content {
  background-color: #8ddc89 !important;
  border-color: #a0ed9c !important;
}

#kategoriMenu nav ul li.drop:nth-child(5) .sub-content {
  background-color: #f1899f !important;
  border-color: #fe98ad !important;
}

/* Menü Sub Color End */
/* Owl Carousel Dots  */
.owl-theme .owl-dots .owl-dot span {
  height: 5px;
  width: 5px;
  margin: 0px 1px !important;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.owl-dots {
  bottom: -30px !important;
  margin-top: 0px !important;
}

@media screen and (max-width: 992px) {
  .owl-dots {
    bottom: -23px !important;
  }
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  background: #d9ad73 !important;
  width: 15px;
}

/* Owl Carousel Dots End  */
.boxcontent {
  box-shadow: 0px 0px 0px 1px #0000000a;
}



.minus,
.plus {
  min-width: 27px;
  max-width: 27px;
}

.pano .minus,
.pano .plus {
  min-width: 30px;
  max-width: 30px;
}

.gray.hoverNone:hover {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

/* ========== Yeni Tasarım End ========== */

@media screen and (max-width:992px) {
  #kategoriMenu {
    margin-left: -100%;
    border-bottom-right-radius: 200vh;
    border-top-right-radius: 200vh;
    display: flex;
  }
}


@media screen and (max-width:992px) {
  .not-active {
    pointer-events: none;
  }

  .boxcontent .owl-dots {
    bottom: 0px !important;
  }
}


/*  Yeni Nesil Menü End  */
header .videoContent .before:before {
  content: "";
  background-image: url(../img/pattern3.png);
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: .2;
  background-size: 1.3%;
  left: 0;
  top: 0;
}

.rightDolgu {
  position: absolute;
  right: -25px;
  top: 0;
  width: 46px;
  padding: 0px;
}

.leftDolgu {
  position: absolute;
  left: -25px;
  top: 0;
  width: 46px;
  padding: 0px;
}

.subOpen {
  padding-bottom: 41px;
}

.subOpen li.menu-item {
  margin-left: -120% !important;
}

.subOpen li.menu-item .sub {
  display: none;
  margin-right: 0%;
}

@media screen and (max-width:992px) {
  .drop {
    overflow: visible !important;
  }

  #kategoriMenu .mobilDrops .drop .sub {
    height: auto !important;
    left: -120%;
    top: 40px !important;
    box-shadow: none !important;
  }

  #kategoriMenu .subOpen li.drop.active .sub {
    left: 0%;
    display: block;
  }

  .subOpen li.drop {
    top: 0px;
  }

  .subOpen li.drop.active {
    margin-left: 0% !important;
    position: absolute !important;
    top: 55px;
  }

  .subOpen li.drop.active .toggle {
    padding-left: 35px !important;
  }

  #kategoriMenu.open {
    border-bottom-right-radius: 0px !important;
    border-top-right-radius: 0px !important;
  }

  #kategoriMenu.open #dilSecim .drop {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }
}

/* ===== Header End ===== */

.bigVisual .owl-prev {
  position: absolute !important;
  left: 10% !important;
  top: 48% !important;
}

.bigVisual .owl-next {
  position: absolute !important;
  right: 10% !important;
  top: 48% !important;
}

#urunDetay .owl-dots {
  bottom: -43px !important;
}

header .end .drop img {
  display: none;
}

header .end .drop .toggle {
  color: #303030 !important;
  position: relative !important;
  padding-left: 25px;
}

header .end .drop .toggle>span {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  left: 0 !important;
  top: 0 !important;
  display: table;
}

header .end .drop .toggle>span>span {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  left: 0 !important;
  top: 0 !important;
  display: table !important;
  text-align: left !important;
  float: none !important;
  padding-right: 0px !important;
  font-size: 14px !important;
  font-weight: fw600 !important;
  line-height: 50px !important;
}

header .kategoriKutu {
  display: none;
}


header .end .sub-content li:hover a {
  color: #fff !important;
}

@media screen and (min-width: 992px) {
  .filterbox {
    max-height: 30vh;
    overflow: hidden;
    background-color: white;
    margin-bottom: 15px;
  }
}

@media screen and (max-width: 992px) {
  .filterbox {
    max-height: 30vh;
    overflow: hidden;
    background-color: white;
    margin-bottom: 15px;
    border-radius: 0px;
  }
}

.filterbox .list {
  max-height: inherit;
  overflow: auto;
  padding: 0px
}

.filterbox .list .title {
  font-size: 14px !important;
  margin-bottom: 10px;
}

.filterItem:hover {
  opacity: 1 !important;
  background-color: rgba(0, 0, 0, 0.05);
}

.filterItem {
  padding-left: 5px;
  padding-right: 5px;
}

.moreButton {
  position: sticky;
  bottom: 0;
  font-weight: 600;
  font-size: 12px;
  padding-left: 15px;
  padding-right: 15px;
  line-height: 40px;
  background-image: url(../img/whiteShadow.png);
  background-position: bottom left;
  background-repeat: repeat-x;
  background-size: 100%;
}

.moreButton:hover {
  background-color: white !important;
}

.minButton {
  position: sticky;
  bottom: 0;
  font-weight: 600;
  font-size: 12px;
  padding-left: 15px;
  padding-right: 15px;
  line-height: 40px;
  background-image: url(../img/whiteShadow.png);
  background-position: bottom left;
  background-repeat: repeat-x;
  background-size: 100%;
}

.minButton:hover {
  background-color: white !important;
}

.filterbox .list::-webkit-scrollbar {
  width: 1px;
}

.filterbox .list::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.filterbox .list::-webkit-scrollbar-thumb {
  background-color: rgba(33, 33, 33, .5);
  outline: 1px solid slategrey;
  cursor: pointer;
}

@media screen and (max-width: 992px) {
  .mobilFilter {
    margin-left: -100%;
  }
}


.bounce-2 {
  animation-name: bounce-2;
  animation-timing-function: ease;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes bounce-2 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-30px);
  }

  100% {
    transform: translateY(0);
  }
}


.iti--allow-dropdown {
  width: 100%;
}


@media screen and (min-width: 992px) {

  header .sub,
  .detayHead .sub {
    min-width: 550px;
  }

  header .end .categoryImage img,
  .detayHead .categoryImage img {
    display: block !important;
  }
}


.detayHead .sub a:hover {
  color: white !important;
}


/* ===== Sepet Line Layout ===== */
.layoutSelect.active {
  color: #333333 !important;
  opacity: 1 !important;
  transform: rotate(360deg) scale(1) skew(0deg) translate(0) !important;
  -webkit-transform: rotate(360deg) scale(1) skew(0deg) translate(0) !important;
  -moz-transform: rotate(360deg) scale(1) skew(0deg) translate(0) !important;
  -o-transform: rotate(360deg) scale(1) skew(0deg) translate(0) !important;
  -ms-transform: rotate(360deg) scale(1) skew(0deg) translate(0) !important;
}

.lineLayout {
  padding-left: 5px !important;
  padding-right: 5px !important;
}

.lineLayout .visual {
  width: 13% !important;
  padding: 5px !important;
}

.lineLayout .visual img {
  width: 100% !important;
}

.lineLayout>li.basketItems {
  border-radius: 0px !important;
}

.lineLayout .nameContent {
  width: 40% !important;
  line-height: 16px !important;
  padding-left: 0px !important;
  padding-top: 0px !important;
  border-bottom: 0px !important;
  padding-right: 5px !important;
  margin-bottom: 0px !important;
  padding-bottom: 0px !important;
  opacity: .8 !important;
}

.lineLayout * {
  text-align: left !important;
}

.lineLayout .colorContent {
  width: 16% !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.lineLayout .birimContent {
  width: 23% !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
  border-left: 0px !important;
  padding-bottom: 5px !important;
  border-right: 0px !important;
  height: 56px;
}

.lineLayout .buttons {
  display: none !important;
}

.lineLayout .adetContent {
  width: 15% !important;
  border-top: 1px solid rgba(0, 0, 0, .1) !important;
  margin-top: 5px !important;
  height: 56px;
}

.lineLayout .numberContent {
  width: 40% !important;
  border-top: 1px solid rgba(0, 0, 0, .1) !important;
  padding-top: 0px !important;
  margin-top: 5px !important;
  height: 56px;
}

.lineLayout .numberContent i {
  line-height: 9px !important;
  padding: 6px !important;
}

.lineLayout .numberContent button {
  padding: 0px !important;
}

.lineLayout .numberContent input {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  line-height: 15px;
  height: auto;
  min-height: auto;
  float: left;
  font-weight: 700;
  text-align: center !important;
}

.lineLayout .numberContent .spinner {
  margin-top: 0px !important;
}

.lineLayout .totalContent {
  width: 36% !important;
  border-top: 0px !important;
  text-align: right !important;
  margin-top: 0px !important;
  border-top: 1px solid rgba(0, 0, 0, .1) !important;
  margin-top: 5px !important;
  height: 56px;
}

.lineLayout .totalContent * {
  text-align: right !important;
  font-size: 14px !important;
  line-height: 14px !important;
}

.lineLayout .totalContent i {
  font-size: 11px !important;
}

.lineLayout .totalContent .center-content {
  margin: 0px !important;
}

.lineLayout .totalContent .customfs {
  font-size: 12px !important;
}

.lineLayout .downCaret {
  padding: 0px;
  display: block !important;
  width: 7%;
  text-align: left !important;
  line-height: 45px;
  font-size: 12px;
  color: #e52529;
  position: relative;
  z-index: 49;
}

.lineLayout .downCaret.rt:before {
  transform: rotate(180deg) scale(1) skew(0deg) translate(0) !important;
  -webkit-transform: rotate(180deg) scale(1) skew(0deg) translate(0) !important;
  -moz-transform: rotate(180deg) scale(1) skew(0deg) translate(0) !important;
  -o-transform: rotate(180deg) scale(1) skew(0deg) translate(0) !important;
  -ms-transform: rotate(180deg) scale(1) skew(0deg) translate(0) !important;
}

.lineLayout .deleteContent {
  display: block !important;
  width: 9%;
  padding: 0;
  text-align: left !important;
  line-height: 53px;
  font-size: 15px;
  color: #e52529;
  border-top: 1px solid rgba(0, 0, 0, .1);
  margin-top: 5px;
  height: 56px;
  z-index: 49;
}

@media screen and (max-width: 992px) {
  .lineLayout .deleteContent:before {
    background-color: white;
    padding: 7px;
    border-radius: 6px;
    margin-left: -4px;
  }
}

.lineLayout .adetContent.min,
.lineLayout .numberContent.min,
.lineLayout .totalContent.min,
.lineLayout .deleteContent.min,
.lineLayout .deleteContent.min {
  height: 0px !important;
  overflow: hidden;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  border-top: 0px !important;
}

/* ===== Sepet Line Layout End ===== */


header .top .lang .sub .sub-content .item:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 350px) {
  .col-xxs-block {
    display: block !important;
  }

  .col-xxs-w100 {
    width: 100% !important;
  }

  .col-xxs-t-center {
    text-align: center !important;
  }

  .col-xxs-mt10 {
    margin-top: 10px !important;
  }
}

@media screen and (max-width: 992px) {
  .stokhata span {
    text-align: center !important;
  }

  .importantCenter {
    text-align: center !important;
  }
}


/* ========== Header ==========  */
header nav ul .toggle.desktop {
  display: block;
  line-height: 50px;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  position: relative;
}

header nav ul .toggle.desktop:before {
  content: "";
  position: absolute;
  right: 0;
  top: 25%;
  width: 1px;
  height: 50%;
  opacity: .7;
  background-color: #676868;
}

header nav ul li:hover .toggle {
  color: #d9ad73;
}

header nav ul li:hover .toggle:before {
  display: none !important;
}

header nav ul .toggle.mobile {
  display: none;
}

header nav ul .toggle img {
  display: none;
}

/* ========== Header End ==========  */
.zoom80 {
  zoom: 80%;
}

.zoom90 {
  zoom: 90%;
}

@media screen and (max-width: 992px) {
  .col-sm-zoom95 {
    zoom: 95%;
  }

  .col-sm-zoom90 {
    zoom: 90%;
  }

  .col-sm-zoom85 {
    zoom: 85%;
  }

  .col-sm-zoom73 {
    zoom: 73%;
  }

  .col-sm-zoom75 {
    zoom: 75%;
  }

  .col-sm-zoom80 {
    zoom: 80%;
  }

  .col-sm-zoom75 {
    zoom: 75%;
  }

  .col-sm-zoom70 {
    zoom: 70%;
  }

  .col-sm-zoom58 {
    zoom: 58%;
  }

  .col-sm-zoom43 {
    zoom: 43%;
  }

  header nav ul .toggle.desktop {
    display: none !important;
  }

  header nav ul .toggle.mobile {
    display: block !important;
    font-weight: 600;
    line-height: 40px;
  }

  header .navContent {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 45%;
    background-color: white !important;
    margin-left: -100%;
    overflow-y: auto;
  }

  header .navContent li.menu-item {
    background-color: #f5efe8;
    border-radius: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  header .navContent nav ul {
    display: block !important;
  }

  header .navContent .mobileToggle {
    position: fixed;
    left: 17px;
    z-index: 15;
    top: 19px;
    font-size: 20px;
  }

  header .navContent:hover {
    margin-left: 0% !important;
  }
}

@media screen and (max-width: 768px) {
  header .navContent {
    width: 75%;
  }
}


.owl-prev,
.owl-next {
  position: absolute;
  top: 35%;
  z-index: 15 !important;
  width: 30px !important;
  height: 30px !important;
  line-height: 30px !important;
  padding: 10px !important;
  border: solid 1px !important;
  letter-spacing: .3px !important;
  display: inline-block !important;
  background-color: #fef8f0 !important;
  color: #d9ad73 !important;
  border-radius: 7px !important;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.owl-prev:before,
.owl-next:before {
  color: #d9ad73 !important !important;
  font-size: 14px !important !important;
}

.owl-prev:hover,
.owl-next:hover {
  background-color: #d9ad73 !important;
}

.owl-prev:hover:before,
.owl-next:hover:before {
  color: white !important;
}

.owl-prev {
  left: -5%;
}

.owl-next {
  right: -5%;
}



h1 {
  font-size: 32px;
  line-height: 32px;
  font-weight: 700;
  margin-bottom: 0px;
}

h2 {
  font-size: 26px;
  line-height: 26px;
  font-weight: 700;
  margin-bottom: 0px;
}

h5 {
  font-size: 18px;
  line-height: 20px;
  font-weight: 500;
  margin-bottom: 0px;
}

h6 {
  font-size: 18px;
  line-height: 20px;
  font-weight: 700;
  margin-bottom: 0px;
}

@media screen and (max-width: 992px) {
  h2 {
    font-size: 18px;
    line-height: 18px;
  }

  h5 {
    font-size: 13px;
    line-height: 16px;
  }

  h6 {
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    margin-bottom: 0px;
  }

  h1 {
    font-size: 22px;
    line-height: 22px;
    font-weight: 700;
    margin-bottom: 0px;
  }
}

.fakeRadioCheck i:before {
  opacity: 0;
}

.filterItem i:before {
  opacity: 0;
}

.filterItem:hover i:before {
  opacity: 1;
}

.filterItem i.active:before {
  opacity: 1;
}

.filterItem.softSuccess i:before {
  opacity: 1;
}

.icon.pasive:before {
  opacity: 0;
}


.animated {
  animation-duration: 4s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-10px);
  }

  60% {
    transform: translateY(-10px);
  }
}

.bounce {
  animation-name: bounce;
}



.gelatine {
  animation: gelatine 0.5s;
}

@keyframes gelatine {

  from,
  to {
    transform: scale(1, 1);
  }

  25% {
    transform: scale(0.9, 1.1);
  }

  50% {
    transform: scale(1.1, 0.9);
  }

  75% {
    transform: scale(0.95, 1.05);
  }
}


.successText {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 10px;
  background: #05c148;
  padding: 2px 5px;
  color: white;
  border-bottom-left-radius: 15px;
  padding-left: 27px;
  padding-right: 30px;
}

.successText:before {
  content: "";
  height: 18px;
  width: 20px;
  border-radius: 100%;
  position: absolute;
  left: -10px;
  top: 1px;
  background-color: #fcfcfc;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.successText:after {
  content: "";
  height: 18px;
  width: 18px;
  border-radius: 100%;
  position: absolute;
  left: 10px;
  top: 1px;
  background-color: #05c148;
  /* border-bottom-left-radius: 0px; */
  /* border-bottom-right-radius: 0px; */
  z-index: 22;
  box-shadow: -10px 8px 0px 0px white;
}

.inputColor {
  background-color: #fafafa !important;
}

.owl-nav span {
  display: none;
}

.ceviri_ru,
.ceviri_fr {
  zoom: 90%;
}


.dialog {
  max-height: 75vh;
  overflow-y: auto;
  display: inline-block;
}

.navContent nav ul li:nth-last-child(2) .desktop.toggle:before {
  display: none !important;
}

@media screen and (max-width: 992px) {
  header nav {
    margin-left: -100%;
  }

  header nav:hover {
    margin-left: 0px !important;
  }

  .colorsImg img {
    width: 60px !important;
    height: 60px !important;
  }

  #filterContent {
    margin-left: -100%;
  }

  .filterToggle.active {
    background-color: #4456ce;
    color: white !important;
  }

  .filterToggle.filterOn .off {
    display: block !important;
  }

  .filterToggle.filterOn .on {
    display: none;
  }

  .infoBox .data {
    min-height: auto;
    ;
  }
}


.begenToggle.active i:before {
  content: "\e96a";
}

.mainImg:hover {
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

@media screen and (min-width: 992px) {

  .infoBox .infoItem:nth-child(4),
  .infoBox .infoItem:nth-child(5),
  .infoBox .infoItem:nth-child(6),
  .infoBox .infoItem:nth-child(7) {
    display: none !important;
  }
}


@media screen and (max-width: 321px) {
  .col-xs-zoom85 {
    zoom: 85%;
  }
}

.whatsappHoverAction li a:hover div {
  width: 100px !important;
}

.minus:hover,
.plus:hover {
  background-color: #24cc40 !important;
  color: white !important;
}

.sepetlist li:last-child {
  border: none !important;
}

.newCardBox:hover {
  box-shadow: 0px 2px 65px 0 #4456ce;
}

@media screen and (max-width: 380px) {
  .col-xxs-fs18 {
    font-size: 18px !important;
  }

  .col-xxs-zoom105 {
    zoom: 105%;
  }
}


.productCart:hover {
  z-index: 40;
}


.colorToggle {
  width: 60px;
  height: 60px;
  background-position: center;
  background-size: cover;
}

.other .carousel-wrapper {
  padding-top: 0%;
}

@media screen and (min-width: 992px) {
  .newCardBox .info {
    overflow: hidden;
  }

  .newCardBox:hover .uyeHover {
    margin-left: -102%;
  }

  .newCardBox:hover {
    border-color: #db959a !important;
  }
}

.other img {
  max-width: 45px;
  min-width: 45px;
}

@media screen and (max-width: 992px) {
  .other img {
    max-width: 30px;
    min-width: 30px;
  }
}

.newCardBox:hover {
  box-shadow: none !important;
}


@media screen and (min-width: 992px) {
  .newCardBox:hover .other .carousel-wrapper {
    padding-top: 22.68%;
  }

  .newCardBox:hover:before {
    height: calc(100%);
  }
}

@media screen and (max-width: 992px) {
  .newCardBox .other .carousel-wrapper {
    padding-top: 34.68%;
  }
}

.product:hover {
  position: relative;
  z-index: 25;
}


.cartButton {
  background-color: transparent;
}

.cartButton {
  background-color: rgb(36 204 64 / 70%) !important;
}

.colorSize {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 5;
  padding-bottom: 7px;
}

.otherColors {
  right: 0px;
  top: 0px;
  width: 60px;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-left: 10px;
  padding-right: 0px;
  border-top-right-radius: 5px;
  z-index: 10;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.newCardBox:hover .otherColors {
  max-height: 110%;

}


.number .minus,
.number .plus {}

.cartButton:hover {
  background-color: #24cc40 !important;
}

.cartButton:hover {
  background-color: #24cc40 !important;
}

.number .plus:hover,
.number .minus:hover {
  background-color: #24cc40 !important;
  color: white !important;
}

@media screen and (min-width: 992px) {
  .hoverList .product {
    opacity: .7;
    -webkit-filter: grayscale(70%);
    filter: grayscale(70%);
  }

  .number.flex input {
    min-width: 40px;
  }

  .hoverList .product.hoverItem {
    opacity: 1 !important;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
  }
}




.otherColors::-webkit-scrollbar {
  width: 2px;
}

.otherColors::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
}

.newCardBox:hover .otherColors::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3) !important;
}

.otherColors::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, .0);
  outline: 1px solid rgba(0, 0, 0, 0);
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.newCardBox:hover .otherColors::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, .5);
  outline: 1px solid rgba(0, 0, 0, 1);
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.colorList {
  margin-right: -5px;
}

@media screen and (min-width: 992px) {
  .otherColors:hover li {
    transition-delay: 0s !important;
  }

  .colorList li {
    transform: scale(0);
    opacity: 0;
    margin-bottom: 7px;
    cursor: pointer;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
  }

  .colorList li:hover {
    transform: scale(1.2) !important;
  }

  .colorList li.active .colorToggle {
    border-color: #ffcfd2 !important;
    box-shadow: 0px 0px 0px 1px #ffcfd2 !important;
  }
}


.colorList li:nth-child(1) {
  transition-delay: 0s;
}

.colorList li:nth-child(2) {
  transition-delay: 0.1s;
}

.colorList li:nth-child(3) {
  transition-delay: 0.2s;
}

.colorList li:nth-child(4) {
  transition-delay: 0.3s;
}

.colorList li:nth-child(5) {
  transition-delay: 0.4s;
}

.colorList li:nth-child(6) {
  transition-delay: 0.5s;
}

.newCardBox:hover .colorList li {
  transform: scale(1);
  opacity: 1;
}

.tooltip {
  font-size: 10px;
}

.colorToggle {
  width: 40px;
  height: 40px;
  border: solid 2px rgba(255, 255, 255, 1);
  border-radius: 100%;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: white;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.animated {
  animation-duration: 4s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-10px);
  }

  60% {
    transform: translateY(-10px);
  }
}

.bounce {
  animation-name: bounce;
}

.shadowLeft:before {
  content: "";
  background: rgb(255, 255, 255);
  background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.6113795860140931) 50%, rgba(255, 255, 255, 0) 100%);
  height: 100%;
  width: 100px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 15;
}

.shadowRight:after {
  content: "";
  background: rgb(255, 255, 255);
  background: linear-gradient(270deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.6113795860140931) 50%, rgba(255, 255, 255, 0) 100%);
  height: 100%;
  width: 100px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 15;
}

@media screen and (max-width: 992px) {
  .logoMobile {
    height: 36px;
  }
}

@media screen and (min-width: 992px) {
  .customHeight {
    height: 30px !important;
    width: auto;
    max-width: inherit !important;
  }
}



/* ========== Yeni Nesil Mobil Menü ==========  */
header .menu-item.active .subClose {
  left: -100% !important;
}

header nav .menu-item .sub {
  position: absolute !important;
  height: 100vh;
}

header nav .categoryImage {
  height: fit-content;
}

@media screen and (max-width: 992px) {
  header nav .mobileSubList {
    height: -webkit-fill-available;
  }

  header nav .menu-item:hover .menuIdLink {
    color: white !important;
  }

  header nav .menu-item.active .sub {
    -webkit-box-shadow: 0 0 15px 5px rgb(0 0 0 / 5%);
    -moz-box-shadow: 0 0 15px 5px rgba(0, 0, 0, .05);
    box-shadow: 0 0 15px 5px rgb(0 0 0 / 5%);
  }

  header nav .menu-item .sub {
    position: fixed !important;
    height: 100vh;
  }

  header .menuContent {
    margin-left: -100%;
  }

  header nav .menu-item .sub {
    left: 45%;
    width: 0%;
  }

  header nav .menu-item.active .sub {
    width: 45% !important;
    left: 0%;
  }

  header nav .menu-item .categoryImage {
    min-width: 244.5px !important;
    min-height: 244.5px;
  }

  header nav .menu-item .sub .sub-content .container {
    background-color: white !important;
  }
}

@media screen and (max-width: 768px) {
  header nav .menu-item .sub {
    width: 0%;
    left: 70%;
  }

  header nav .menu-item.active .sub {
    width: 70% !important;
    left: 0%;
  }
}

.stickyContent {
  height: 172.86px;
  overflow: hidden;
}

.stickyContent.sticky {
  height: 130px;
  padding-top: 0px !important;
}

@media screen and (min-width: 992px) {
  header.stickyHeader {
    top: -101.67px !important;
    -webkit-box-shadow: 0 0 15px 5px rgb(0 0 0 / 5%);
    -moz-box-shadow: 0 0 15px 5px rgba(0, 0, 0, .05);
    box-shadow: 0 0 15px 5px rgb(0 0 0 / 5%);
  }
}

@media screen and (max-width: 992px) {
  .col-sm-flexNw {
    flex-wrap: nowrap !important;
  }
}


/* ========== Yeni Nesil Mobil Menü End ==========  */



/* Ürün Kartı  */
.other::-webkit-scrollbar {
  width: 1px;
}

.other::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.other::-webkit-scrollbar-thumb {
  background-color: rgba(33, 33, 33, .5);
  outline: 1px solid slategrey;
  cursor: pointer;
}

@media screen and (min-width:992px) {
  .productCart:hover {
    z-index: 20;
  }

  .productCart:before {
    content: "";
    width: calc(101% + 14%);
    height: 101%;
    background-color: white;
    -webkit-box-shadow: 0 0 15px 5px rgb(0 0 0 / 0%);
    -moz-box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0);
    box-shadow: 0 0 15px 5px rgb(0 0 0 /0%);
    position: absolute;
    left: 2%;
    top: -1%;
    opacity: 0;
    border-radius: 5px;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }

  .productCart:hover:before {
    -webkit-box-shadow: 0 0 15px 5px rgb(0 0 0 / 10%);
    -moz-box-shadow: 0 0 15px 5px rgba(0, 0, 0, .10);
    box-shadow: 0 0 15px 5px rgb(0 0 0 / 10%);
    opacity: 1;
  }

  .productCart:after {
    content: "";
    width: calc(100% + -22px);
    height: calc(100% + 2px);
    position: absolute;
    left: 11px;
    top: 1px;
    background-color: white;
    z-index: 15;
    border: solid 1px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
  }

  .productCart:hover .other {
    margin-right: -3.93vw !important;
  }

  .productCart:hover:after {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    border-left: 0px solid rgba(0, 0, 0, 0.1);
    border-top: 0px solid rgba(0, 0, 0, 0.1);
    border-bottom: 0px solid rgba(0, 0, 0, 0.1);
  }
}

.other .visual:hover img {
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
}

.selected {
  box-shadow: 0px 0px 0px 1px #24cc40 !important;
}

.other .carousel-wrapper {
  padding-top: 0%;
}

@media screen and (min-width: 992px) {
  .newCardBox .info {
    overflow: hidden;
  }

  .newCardBox:hover .uyeHover {
    margin-left: -102%;
  }

  .newCardBox:hover {
    border-color: #db959a !important;
  }
}

.other img {
  max-width: 45px;
  min-width: 45px;
}

@media screen and (max-width: 992px) {
  .other img {
    max-width: 30px;
    min-width: 30px;
  }
}

.newCardBox:hover {
  box-shadow: none !important;
}


@media screen and (min-width: 992px) {
  .newCardBox:hover .other .carousel-wrapper {
    padding-top: 22.68%;
  }

  .newCardBox:hover:before {
    height: calc(100%);
  }
}

@media screen and (max-width: 992px) {
  .newCardBox .other .carousel-wrapper {
    padding-top: 34.68%;
  }
}

.product:hover {
  position: relative;
  z-index: 25;
}

.colorSize {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 5;
  padding-bottom: 7px;
}

.otherColors {
  right: 0px;
  top: 0px;
  width: 60px;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-left: 10px;
  padding-right: 0px;
  border-top-right-radius: 5px;
  z-index: 10;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.newCardBox:hover .otherColors {
  max-height: 110%;
}

@media screen and (max-width: 992px) {
  .otherColors {
    bottom: 0px !important;
  }

  .otherColors .navItem {
    margin-right: 7px;
  }
}


.number .minus,
.number .plus {
  background-color: #e5fde9 !important;
}

.info .number .minus,
.info .number .plus {
  background-color: #e5fde9 !important;
}

.cartButton:hover {
  background-color: #e5fde9 !important;
}

.cartButton:hover {
  background-color: #25cc40 !important;
}

.number .plus:hover,
.number .minus:hover {
  background-color: #25cc40 !important;
  color: white !important;
}

@media screen and (min-width: 992px) {

  .hoverList .product {
    opacity: .7;
    -webkit-filter: grayscale(70%);
    filter: grayscale(70%);
  }

  .number.flex input {
    min-width: 40px;
  }

  .hoverList .product.hoverItem {
    opacity: 1 !important;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
  }
}




.otherColors::-webkit-scrollbar {
  width: 2px;
}

.otherColors::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
}

.newCardBox:hover .otherColors::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3) !important;
}

.otherColors::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, .0);
  outline: 1px solid rgba(0, 0, 0, 0);
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.newCardBox:hover .otherColors::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, .5);
  outline: 1px solid rgba(0, 0, 0, 1);
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.colorList {
  margin-right: -5px;
}

@media screen and (min-width: 992px) {
  .otherColors:hover li {
    transition-delay: 0s !important;
  }

  .colorList li {
    transform: scale(0);
    opacity: 0;
    margin-bottom: 7px;
    cursor: pointer;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
  }

  .colorList li:hover {
    transform: scale(1.2) !important;
  }

  .colorList li.active .colorToggle {
    border-color: #ffcfd2 !important;
    box-shadow: 0px 0px 0px 1px #ffcfd2 !important;
  }
}


.colorList li:nth-child(1) {
  transition-delay: 0s;
}

.colorList li:nth-child(2) {
  transition-delay: 0.1s;
}

.colorList li:nth-child(3) {
  transition-delay: 0.2s;
}

.colorList li:nth-child(4) {
  transition-delay: 0.3s;
}

.colorList li:nth-child(5) {
  transition-delay: 0.4s;
}

.colorList li:nth-child(6) {
  transition-delay: 0.5s;
}

.newCardBox:hover .colorList li {
  transform: scale(1);
  opacity: 1;
}

.tooltip {
  font-size: 10px;
}

.colorToggle {
  width: 40px;
  height: 40px;
  border: solid 2px rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, .1);
  border-radius: 10px;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: white;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.info .data {
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  white-space: nowrap;
}

.newCardBox .urunAdi {
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 10px;
  opacity: .8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.infoBox .infoItem:nth-child(4),
.infoBox .infoItem:nth-child(5),
.infoBox .infoItem:nth-child(6) {
  display: none;
}

.info .cartButton {
  outline: none;
  line-height: 34px;
  white-space: nowrap;
  font-size: 14px;
  width: 100%;
  letter-spacing: .5px;
  margin-left: 5px;
  background-color: #e5fde9 !important;
}

@media screen and (min-width: 992px) {
  .info .cartButton {
    padding: 0px !important;
  }
}

.info .cartButton:hover {
  color: white;
  background-color: #25cc40 !important;
}

@media screen and (max-width: 992px) {

  .cardButtons .plus,
  .cardButtons .minus {
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
  }

  .info .data {
    font-size: 10px;
    line-height: 12px;
    margin-top: 7px;
  }

  .infoBox .infoItem:nth-child(3) {
    display: none;
  }

  .newCardBox .urunAdi {
    font-size: 12px;
    margin-bottom: 0px;
    font-weight: 500;
  }

  .colorList {
    zoom: 85%;
  }
}

/* Ürün Kartı End  */

select {
  background-image: url("../img/chevron-down.png");
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: calc(100% - 8px) center;
}


.pagination {
  float: right !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

.pagination strong {
  width: 40px !important;
  height: 40px !important;
  line-height: 30px !important;
  text-align: center;
  background-color: #de291c !important;
  color: #fff !important;
  border-radius: 5px;
  padding: 5px !important;
}

.pagination a {
  min-width: 40px !important;
  height: 40px !important;
  line-height: 30px !important;
  text-align: center;
  background-color: whitesmoke !important;
  color: #111 !important;
  border-radius: 5px;
  white-space: nowrap;
  padding: 5px !important;
}

.pagination a:hover {
  background-color: #de291c !important;
  color:#fff !important;
}

.btn-green {
  background-color: #1bc412 !important;
  color: #fff !important;
}

.btn-green:hover {
  background-color: #17af0f !important;
  color: #fff !important;
}

.plus,
.minus {
  color: #25cc40 !important;
}

.plus:hover,
.minus:hover {
  background-color: #25cc40 !important;
  color: white !important;
}

nav .menu-item.hover-none:hover {
  background-color: transparent !important;
}