@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700|Exo+2:200,300,400,600,700&subset=latin,latin-ext);
body {
  font-family: "Exo 2", sans-serif;
  font-size: 14px;
  font-weight: 400; 
}
ul li{list-style: none;}
a:hover{
    text-decoration: none;
}
.header{
    border-top: 5px solid #59296d;
    padding: 5px 0;
    background: #310f3e; 
    
    
    
}
.name{
    font-size: 22px;
    padding: 7px 0 15px 15px;
    border-left: 3px solid #fff;
    margin-left: 10px;
    margin-top: 5px;
    color: #fff;
}
.user,.logout{
    margin-top: 10px;
    margin-left: 5px;
}
.header-text{
    float: left;
    margin-top: 12px;
    background-color: #d43f3a;
    padding: 7px 12px 7px 4px ;
    border-radius: 4px;
    font-size: 14px;
    font-family: "Open Sans", sans-serif;
}
.header-text a{
    color: #fff;
    
    margin-left: 10px;
    margin-top: 20px;
    font-weight: 400;
    
}

.sticky {  
    position: fixed;  
    width: 100%;  
    left: 0;  
    top: 0;  
    z-index: 100;  
    border-top: 0;  
} 

.nav{
    background-color: #59296d;
    height: 40px;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(44, 50, 50, 0.75);
    -moz-box-shadow:    0px 2px 5px 0px rgba(44, 50, 50, 0.75);
    box-shadow:         0px 2px 5px 0px rgba(44, 50, 50, 0.75);
}

 .navbar-toggle {
    border-color: #dddddd;
}
 .navbar-toggle .icon-bar {
    background-color: #cccccc;
}
.navigation {
  float: right;
  padding: 0;
  list-style-type: none; 
}
.navigation {
*zoom: 1; 
}
.navigation:before, .navigation:after {
content: "";
display: table; 
}
.navigation:after {
clear: both; 
}
.navigation li {
float: left; 
}
.navigation li a {
display: block;
margin: 0;
padding: 7px 10px 7px;
font-family: "Exo 2", sans-serif;
font-size: 18px;
color: #fff;
-webkit-transition: color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95), text-shadow 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95), background-color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-moz-transition: color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95), text-shadow 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95), background-color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-ms-transition: color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95), text-shadow 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95), background-color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-o-transition: color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95), text-shadow 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95), background-color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
transition: color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95), text-shadow 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95), background-color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); }
.navigation li a:hover, .navigation li a:active, .navigation li a:focus, .navigation li a.active {
color: white;
background-color: #310f3e;
text-shadow: 0 1px 0 #75a230;
text-decoration: none; 
}
.navigation li:last-child a {
  margin-right: 0; 
}
.main-content{

}
.box{
    margin: 10px 0;
}
.box {
-webkit-box-shadow: 0px 0px 2px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 0px 2px 0px rgba(50, 50, 50, 0.75);
box-shadow:         0px 0px 2px 0px rgba(50, 50, 50, 0.75);
font-size: 30px;
}
.box a{
    color: #333;
    font-weight: 600;
    display: block;
}

.box span{
    margin-left: 20px;
}
.box:hover{
-webkit-box-shadow: inset 0px 0px 3px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    inset 0px 0px 3px 0px rgba(50, 50, 50, 0.75);
box-shadow:         inset 0px 0px 3px 0px rgba(50, 50, 50, 0.75);

}
.box img:hover{
-webkit-box-shadow: inset 0px 0px 3px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    inset 0px 0px 3px 0px rgba(50, 50, 50, 0.75);
box-shadow:         inset 0px 0px 3px 0px rgba(50, 50, 50, 0.75);

}
.banks{
    margin: 80px 0;
}

footer{
    background-color: #000;
    padding: 5px 0;
    color: #fff;
}
footer #ulker {
    background: url("../img/ulker.png") no-repeat scroll 0 50% transparent;
    display: block;
    float: right;
    height: 18px;
    text-indent: -9999px;
    width: 92px;
}
.panel{
    background-color: #fff;
    -webkit-box-shadow: 0px 0px 3px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 0px 3px 0px rgba(50, 50, 50, 0.75);
box-shadow:         0px 0px 3px 0px rgba(50, 50, 50, 0.75);
margin-top: 20px;
}
.panel-header{
    background-color: #f5f5f5;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom: 1px solid #ddd;
    padding: 1px 15px;
}
.panel-footer{
    padding: 1px 15px;
}
.panel-heading{
    padding: 0;
}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus{
    background-color: #CF000F;
    border-color: #CF000F;   
    
}
.pagination  > a:hover{
   color:  #CF000F 
}
.panel-search{
    margin-top: 12px;
}

.panel-labels{
    border-top: 1px solid #ccc;
}
.panel-buttons{
    border-top: 1px solid #ccc;
    padding:8px 0;
}
p.label{
    display: block;
    margin-top:11px;
    font-size: 14px;
}
.panel table button{
    padding: 1px 5px;
}
.product-wrapper{
    padding: 10px 10px 0 10px;
    margin-bottom: 10px;
    border-radius: 6px;
    background-color: #fff;
    -webkit-box-shadow: 0px 0px 3px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 0px 3px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 0px 3px 0px rgba(50, 50, 50, 0.75);
}
.product-wrapper h1{
    text-align: center;
    margin: 0;
    color: #333;
    padding:  8px 0;
    font-size: 18px;
}
.products{
    margin-bottom: 15px;
}
.modal-dialog{
    max-width: 1000px;
    width: auto;
}

.addCart{
    width: 100%;
    font-weight: 600;
}
.modal form{
    margin: 15px 0;
}
.label-danger,.btn-danger{
    background-color: #59296D;
    border-color: #59296D;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger {
    background-color: #310F3E;
    border-color: #310F3E;
    color: #fff;
}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    background-color: #59296D;
    border-color: #59296D;
    color: #fff;
    cursor: default;
    z-index: 2;
}
.total{
    padding: 0 10px;
    color: #fff;
}
.total h4{
    font-size: 20px;
}
.total span{
    font-size: 20px;
    margin-bottom: 10px;
    margin-top: 10px;
}
.red{
    background-color: #ff0000;
}
.green{
    background-color: #117B30;
}
.customer{
    background-color: #F5F5F5;
    padding: 10px ;
    font-size: 18px;
}
.selectpicker {
    margin-top: 0;
}
.title{
     background-color: #F5F5F5;
     padding: 10px ;
    font-size: 18px;
}

.margin10{
    margin-bottom: 10px;
}

.mthp{
    margin-top: 10px;
}

.ruz {
  position: absolute;
  right:40px;
  top:60px; 
  font-size: 36px!important;
  background-color: #fff;
  padding:5px;
}


.kiad {
  position: absolute!important;
  right:35px!important;
  bottom:90px!important; 
}

.mjb { margin-bottom:10px;}

.gri { color:#c0c0c0; }

.kirmizi {
    background-color: #59296D!important;
}

.kirmizi a { color : #fff; }

.pink {
    background-image: -webkit-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119));
    background-image: -moz-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119));
    background-image: -o-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119));
    background-image: -ms-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119));
    background-image: linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f78297', EndColorStr='#f46677');
 
    border:1px solid #ce4f5e;
}


#suggestions{ position: absolute; display:none; margin-left:15px;margin-top:35px; z-index:1000!important;}

/* SEARCHRESULTS */
#searchresults { 
  border-width:1px; border-color:#c0c0c0; 
  border-style:solid; 
  width:633px; 
  background-color:#fbfbfb; font-size:12px; 
  line-height:14px;
  max-height:500px;
  height:auto !important;
  overflow: auto;
  z-index:1000!important;
}

.asn {
    position: relative;
    width: 100%;
    height: auto;
    display:block;
    background-color: #c0c0c0;
}
.eld {margin-left:10px;margin-top:10px;display: none;}

.calisiyoz {
    position: absolute;
    right:30px;
    top:8px;
    display: none;

}

.rge {
    position: absolute;
    right:40px;
    top:90px;

}

.flip {
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
  position: relative;
}
.flip .ccard.flipped {
  -webkit-transform: rotateY( 180deg );
  -moz-transform: rotateY( 180deg );
  -o-transform: rotateY( 180deg );
  transform: rotateY( 180deg );
}
.flip .ccard {
  width: 300px;
  height: 170px;
  margin-top:0px;
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  -o-transition: -o-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.flip .ccard .face {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 2;
}
.flip .ccard .front {
  background: url("../img/krediKarti.png") no-repeat;
  position: absolute;
  z-index: 1;
  background-size: contain;
}
.flip .ccard .back {
  background: url("../img/krediKartiArka.png") no-repeat;
  -webkit-transform: rotateY( 180deg );
  -moz-transform: rotateY( 180deg );
  -o-transform: rotateY( 180deg );
  transform: rotateY( 180deg );
  background-size: contain;
}

.face > div.c-number{
  color: #FFFFFF;
  font-size: 15px;
  margin-left: 25px;
  margin-top: 52px;
  height: 21px;
}

.face > div.c-name{
  color: #FFFFFF;
  font-size: 14px;
  margin-left: 23px;
  margin-top: 10px;
  float: left;
  width: 180px;
}
.face > div.g > div.c-month{
  color: #FFFFFF;
  float: left;
  font-size: 14px;
}
.face > div.g > div.c-year{
  color: #FFFFFF;
  float: left;
  font-size: 14px;
  width: 20px;
}
.face > div.g > span{
  color: #FFFFFF;
  float: left;
}
.face > div.g{
  float: right;
  font-size: 14px;
  margin-right: 20px;
  margin-top: 10px;
  width: 75px;
}

.face > .b{
  height: 50px;
  display: block;
  margin-top:10px
}

.face > .b > .cc-bank{
  color: #FFFFFF;
  font-size: 15px;
  /*font-weight: bold;*/
  margin-left: 25px;
  /*margin-top: 5px;*/
  width: 190px;
  float: left;
}
.face > .b > .cc-mv{
  width: 48px;
  height: 48px;
  background-repeat:   no-repeat;
  float: left;

}