/* Scroll Bar Settings */
::-webkit-scrollbar {
    width: 5px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-thumb {
    background-color: rgba(33, 33, 33, .5);
    outline: 1px solid slategrey;
    cursor: pointer;
}
/* Scroll Bar Settings End */
/* General Use */
main          {
  width: 100%;
  float: left;
}
body					{}
#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ü ========== */
.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 ========== */
.basicfilter .active a {
	background: rgb(147,135,0) !important;
  background: linear-gradient(45deg, rgb(183, 168, 0) 0%, rgb(255, 234, 0) 50%, rgb(183, 168, 0) 100%) !important;
	color:#303030 !important; 
}
.pagination .active a {
	background: rgb(147,135,0) !important;
  background: linear-gradient(45deg, rgb(183, 168, 0) 0%, rgb(255, 234, 0) 50%, rgb(183, 168, 0) 100%) !important;
	color:#303030 !important;
}
/* ========== 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 ========== */
.searchbox:focus-within button i {
  color:#ead700 !important;
}

/* === Account === */
#accountline {
  height:0px;
  overflow: hidden;
}
.accountactions li:last-child {
  border-right:0px !important;
}
header .top .active {
  color:#ead700  !important;
}
header .top .active .icon-up5 {
  color:#ead700 !important;
  top:-7px !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 === */



/* === 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 ========== */


















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



/* ========== Ürün Kartı Diğer Renk Görseller ========== */
.no-js .owl-carousel, .no-js .owl-carousel.owl-loaded {
  display:block !important;
}
.new-visual .owl-prev {
  top: 50%;
  position: absolute;
  left: -25px;
  -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;
}
.new-visual .owl-next {
  top: 50%;
  position: absolute;
  right: -25px;
  -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, .owl-next {
  border: none !important;
  outline:none !important;
  box-shadow:none !important;
  background-color:transparent !important;
}
.owl-prev span, .owl-next span {
  display:none;
}
.owl-prev:before, .owl-next:before {
  font-family:'default' !important;
  font-size:16px !important;
  line-height: 16px !important;
  color:rgba(48,48,48,1) !important;
}
.owl-prev:before {
  content:"\e944" !important;
}
.owl-next:before {
  content:"\e967" !important;
}
.owl-dots {
  position: absolute; 
  width: 100%;
  bottom:-50px; 
  -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 .owl-dot {
  outline:none;
  border:none;
  box-shadow:none;
}
.owl-nav {
  margin-top:0px !important ;
}
.new-visual:hover .owl-dots {
  bottom:-8px;
}
.new-visual:hover .owl-prev {
  left:15px;
}
.new-visual:hover .owl-next {
  right:15px;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
  background:rgba(48,48,48,1) !important;
}
.item:hover .new-visual .actions {
  margin-bottom:0px !important;
}
.begen.active i:before {
  content: "\e96a" !important;
}


/*
#advancedlist .slick-prev:before, #advancedlist .slick-next:before {
  background-color: #ef7720 !important;
  font-size: 16px !important;
  padding: 10px;
  opacity: 1;
  border-radius: 3px;
}
#advancedlist .slick-prev:before {
  font-family: 'default' !important;
  content: "\e944" !important;
}
#advancedlist .slick-next:before {
  font-family: 'default' !important;
  content: "\e967" !important;
}
#advancedlist .slick-prev {
  left:-5px !important;
}
#advancedlist .slick-next {
  right:10px !important;
}
*/
/* ========== Ürün Kartı Diğer Renk Görseller 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;
}




/* ========== Ödeme Sayfası Ayarları ========== */
.pos-sticky {
  position: sticky !important;
}

@media screen and (max-width:768px) {
 #odeme1 .pos-sticky {
    position: relative !important ;
  }
}

.toggles:hover {
  background: rgb(147,135,0) !important;
  background: linear-gradient(45deg, rgb(183, 168, 0) 0%, rgb(255, 234, 0) 50%, rgb(183, 168, 0) 100%) !important;
  color:#303030 !important;
}
.toggles:hover span {
  color:#303030 !important;
}

#pnlTaksit select {
  height:49px;
  border-radius:30px !important;
}
.toggles.active span, .toggles.active i {
  color:#fff !important;
}

@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.ptt-toggle span  {
    font-size:14px !important;
    line-height: 21px !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:160%;text-transform:uppercase;
}
.front .card-number {
  margin-top:6%;font-size:235%;letter-spacing:5px;
}
.front .card-date {
  bottom:17%;font-size:130%;padding-right:10%;
}
.front .card-date .title {
  font-size:80%;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: #d6639a ;
}

/* 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: #2196F3;
}

/* 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;
}


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

.copyiban.active i {
  color:#16c1f3 !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;
}
.pagination>li>a, .pagination>li>span {
  color:#303030 !important;
  border:solid 2px #f7f7f7 !important ;
}
.pagination>li>a {
  outline:none !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;
}



@media screen and (max-width:768px) {
  .ui-dialog table.sepet tr td {
    float: left !important;
    width: 25%;
  }
  .ui-dialog table.sepet tr td:nth-child(1), .ui-dialog table.sepet tr td:nth-child(2) {
    width:50%;
    height:100px;
    padding-bottom:10px;
    padding-top:10px;
    border-bottom: 1px dashed rgba(0,0,0,0.2);
  }
  .ui-dialog table.sepet tr td:nth-child(1) img {
    height: 100%;
    width:auto !important;
    margin-top:0px !important;
    margin-bottom:0px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .ui-dialog table.sepet tr td:nth-child(2) {
    align-items: center !important;
    display:flex;
  }
  .ui-dialog table.sepet tr td:nth-child(3), .ui-dialog table.sepet tr td:nth-child(4), .ui-dialog table.sepet tr td:nth-child(5), .ui-dialog table.sepet tr td:nth-child(6) {
    align-items: center;
    display: flex;
  }  
  .ui-dialog tr.kategori td:nth-child(1) {
    width: 100% !important;
    height:initial !important;
  }
  .ui-dialog tr.kategori {
    margin-bottom:0px !important;
  }
  .ui-dialog table.sepet tr {
    width: 100%;
    float: left;
    background-color:#fff;
    margin-bottom:15px;
    -webkit-box-shadow: 42px 38px 42px -38px rgba(0,0,0,.58);
    -moz-box-shadow: 42px 38px 42px -38px rgba(0,0,0,.58);
    box-shadow: 42px 38px 42px -38px rgba(0,0,0,.58);
  }
  .ui-dialog tr.baslik {
    display:none !important;
  }
  .ui-dialog tr.altbilgi td {
    width: 100% !important;
    height: auto!important;
  }
  .ui-dialog h1 {
    text-align: center !important;
  }
  .ui-dialog-titlebar {
    text-align: center;
  }
}

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


content {
  width: 100%;
  float: left;
  -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;
}


.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 ========== */
.raleway {
  font-family: 'Raleway', sans-serif !important;
}
/* ========== 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 {
  background-size:cover;
  background-position: center;
  background-repeat:no-repeat;
  height:25vh;
}
.categoryImage:before {
  content:"";
  width: 100%;
  height: 100%;
  left:0;
  top:0;
  position: absolute;
  background-color:rgba(0,0,0,0.2);
  z-index: 1;
}

.categoryImage > div >div {
  text-shadow: 0px 10px 8px #000000cc;
}
.drop {
  width:100%;
}
.drop:hover > a {
background: rgb(255,3,3);
background: linear-gradient(90deg, rgba(255,3,3,1) 0%, rgba(184,11,11,1) 48%, rgba(235,0,0,1) 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 {
    background-color:rgba(0,0,0,0.2) !important;
    border-radius:20px;
  }
  .menu-item:hover > a {
    color:#303030 !important;
  }
  header .bottom {
    margin-left:-100%;
  }
  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;
}


.green-gradient {
  background: rgb(0,97,6);
    background: linear-gradient(45deg, rgba(0,97,6,1) 0%, rgba(20,184,31,1) 100%);
}

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

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

.menu-item:hover > a {
  color:#ffffff;
}
.arial {
  font-family:'arial' !important;
}
@media screen and (max-width:992px) {
  .menuContent {
    max-height:62vh;
    overflow-y: auto;
  }
}



.slick-prev:before {
  font-family:'default' !important;
  content: "\e944" !important;
  background-color: rgba(48,48,48,1) !important;
  font-size: 14px !important;
  padding: 10px;
  border-radius: 50%;
}
.slick-next{
  right:28px !important;
}
.slick-next:before {
  font-family:'default' !important;
  content: "\e967" !important;
  background-color: rgba(48,48,48,1) !important;
  font-size: 14px !important;
  padding: 10px;
  border-radius: 50%;
}


.slick-dots li button:before {
  font-size:10px !important;
}
.slick-dots li {
  margin:0px !important;
}



.menu-item:hover i:before {
  background: #b80b0b;
  border-top-left-radius:50% !important;
  border-top-right-radius:50% !important;
  padding:5px;
}
@media screen and (max-width:768px) {
  .menu-item:hover i:before {
    background: transparent;
  }
}