/*!
 * Start Bootstrap - Shop Homepage (https://startbootstrap.com/template-overviews/shop-homepage)
 * Copyright 2013-2019 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-shop-homepage/blob/master/LICENSE)
 */
body {
  padding-top: 56px;
font-family: 'Roboto Condensed'
}

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 16px;
  margin-right: 5px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(24px);
  -ms-transform: translateX(24px);
  transform: translateX(24px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
	
	.btn-familia-container{
		margin-bottom: 30px;
		margin-left: 6px;
		margin-right: 6px;
	}
	
	
	.familia-button-label {
		margin-top: 10px;
		color: #7b28ff;
	}
	
	.btn-familia {
		display: block;
		background-color: #7b28ff;
		border: 3pt solid #00e8d2;
	}
	
	.btn-familia:hover {
		background-color: #631be1;
		border: 3pt solid #00e8d2;
	}
	
	.btn-familia.btn-md {
		  width: 80px;
          height: 80px;
          padding: 1px 2px;
          border-radius: 40px;
	}
	
	
	
	
	.category {
		background-color: #7b28ff;
		color: white;
		border: 0;
		border-top: 1pt solid #631be1;
		border-bottom: 1pt solid #631be1;
		text-align:center;
		font-size: 12pt;
	}	
	
	.category:visited {
		background-color: #7b28ff;
		color: white;
	}	
	
	.category.disabled {
		color: #631be1;
        background-color: #7b28ff!important;
	}	
	
	.category:hover {
		background-color: #631be1;
		color: white;
	}	


.custom-nav-tabs .nav-item .nav-link{
	color: #7b28ff;
}

.custom-nav-tabs .nav-item .nav-link:hover {
	color: #00e8d2;
}

.mylogin-form label{
	color: #7b28ff;
	font-weight: bold;
}

.btn-brand-title {
		font-size: 11pt;
		cursor: pointer;
		padding:0;
		color: #7b28ff;
	}
	.btn-brand-title:hover {
		color: #00e8d2;
		text-decoration: none;
	}
	
	
	.btn-brand-logo {
		cursor: pointer;
		width: 60px;
		border: 4pt solid #7b28ff;
		border-radius: 50%;
		overflow: hidden; 
	}
	
	.btn-brand-logo:hover {
		border: 4pt solid #00e8d2;
	}
	
	.product-subtitle {
		font-size: 8pt;
		color: white;
	}
	

.label-discount{
			position: inherit;
			top: 10px;
			right: 10px;
			width: 60px;
			height: 60px;
			background-color: #00e8d2;
			color: white;
			padding: 20px 8px;

			border-radius: 50%;

			font-size: 10pt;

			text-align: center;
		
	}

.main-subtitle {
		text-align: center;
		color: #7b28ff;
		padding-bottom: 5px;
	}
	
	
	.main-subtitle .fa{
	   color: #00e8d2;
		
	}
	
	
	.main-subtitle .subt-line-divider{
		 margin-top: 10px;
		 display: block;	
	     background-color: #00e8d2;
		 width: 100%;
		 height: 4px;
	}
	
	


.filter-alert {
	display:inline-block;
	font-size: 10pt;
	padding: 10px;
	margin: 2px;
	background: #7b28ff;
	color: white;
	border: 1pt solid #631be1;
	border-radius: 25px;
}

.clear-filter {
	margin-right: 4px;
	margin-left: 4px;
	color: white;
}

.clear-filter:hover {
	color: red;
}

.input-border-radius {
	
	border-radius: 25px;
}

.btn{
	border-radius: 25px 25px;
}

.product-name {
	color: #7b28ff;
}

.item-accordion-link{
	color: #7b28ff!important; 
}

.item-accordion-link:hover {
	color: #631be1!important; 
	text-decoration: none!important;
}

.btn-link{
	color: #7b28ff; 
}

.btn-link:hover {
	color: #631be1; 
}

.btn-primary {
	background: #7b28ff; 
	border-color: #631be1;
	border-radius: 25px;
}

.btn-primary:hover {
	background: #631be1; 
	border-color: #7b28ff;
}


.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
	
	background: #631be1;
	border-color: #00e8d2;
	
}

.dropdown-menu.dropdown-sort {
width: 100%;
background-color: #631be1;
color: white;
border: 1px solid #631be1;
border-radius: 25px;
}

.dropdown-menu.dropdown-sort  .dropdown-item {
color: white;
border-radius: 25px;
}

.dropdown-menu.dropdown-sort  .dropdown-item:hover {
color: #7b28ff;
background-color: #00e8d2;
}

.btn-primary:focus {
	background: #631be1;
	border-color: #00e8d2;
}

.btn-primary .dropdown-toggle:active {
	background: #631be1;
	border-color: #00e8d2;
}

.btn-primary .dropdown-toggle:focus {
	background: #631be1;
	border-color: #00e8d2;
}

.btn-primary:disabled{
	background-color: #937CFF;
	border: #937CFF;
}


.btn-outline-secondary {
	
	border-color: #631be1;
	color: #631be1;
	
}

.btn-outline-secondary:hover {
	
	background: #7b28ff; 
	border-color: #631be1;
	color: white;
	
}

.btn-close-filter{
 	font-size: 16pt;
	font-weight: bold;
	margin-left: 10px;
	text-decoration: none;
	color: #424242;
}

.btn-close-filter:hover {
 	color: red;
	text-decoration: none;
}

.breadcrumb{
	border-radius: 25px;
}

.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 997;
  top: 0;
  left: 0;
  background-color: #7b28ff;
  overflow-x: hidden;
  transition: 0.2s;
  padding-top: 60px;
}

.sidebar .closebtn {
  position: absolute;
  top: 65px;
  right: 15px;
  font-size: 36px;
  margin-left: 50px;
 color: #FFFFFF;
	display: block;
	transition: 0.1s;
	text-decoration: none;
	padding: 8px 8px 8px 32px;
}

.sidebar .closebtn:hover {
  color: #D7D7D7;
}

.sidebar-title {
	margin-top: 70px;
	margin-left: 25px;
	color: white;
}

.sidebar-subtitle {
	margin-top: 30px;
	margin-left: 25px;
	color: white;
}

#carousel-thumb 

#categoriasList {
	margin-top: 20px;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #444;
}

#main {
  transition: margin-left .5s;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
	
}

@media (max-width: 576px) {
        
   #client-menu {
    margin: 0;
    margin-top: 20px;
    padding: 0px!important;
   
}
    
    #navbar li {
        margin: 0!important;
        padding: 0;
    }
	
    #client-menu .nav-item {
    
        width: 100%;
        margin: 0;
        padding-top: 10px;
        padding-bottom: 10px;
		
    }

    #client-menu .nav-link{
        font-size: 18pt;
        font-weight: bold;
		background-color: #7b28ff;
		color: white;
		border-radius: 25px;
        
    }
    
     #client-menu .nav-link i{
      margin-right: 10px;
    }
    

	
}


.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:70px;
	right:40px;
	background-color:#65DC4F;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
    z-index: 999!important;
}

.float:hover{
   color:#FFF;
   font-size: 12pt;
}

.my-float{
	margin-top:22px;
}

#changelocation_map {
  height: 250px;
  width: 100%;
}

.modal-backdrop.show {
    opacity: 0.8!important;
}

.card-title a{
	
	color: #00324B!important;
	
}

.hr-footer {
  border:none;
  height: 20px;
 	width: 100%;
	height: 50px;
	margin-top: 0;
	box-shadow: 0 20px 20px -20px #CCC;
  margin: -50px auto 10px; 
}


.strike {
        display: block;
        text-align: center;
        overflow: hidden;
        white-space: nowrap; 
    }

    .strike > span {
        position: relative;
        display: inline-block;
    }
	
    .strike > span:before,
    .strike > span:after {
        content: "";
        position: absolute;
        top: 50%;
        width: 9999px;
        height: 1px;
        background: #E7E7E7;
    }

    .strike > span:before {
        right: 100%;
        margin-right: 15px;
    }

    .strike > span:after {
        left: 100%;
        margin-left: 15px;
    }


.cp-drop {
	
	color: #7F7F7F;
	
	
}

.cp-drop:hover {
	
	color: #4C4C4C;
	
	
}

.btn-addcart-style{ 
	background-color: #7b28ff;
	color: white!important;
	text-decoration: none!important;
}


.btn-addcart-style:hover { 
	
	background-color: #00e8d2;
	color: #00324B!important;
	text-decoration: none!important;
	cursor: copy;
}

.btn-addcart2 {
	background-color: #7b28ff;
	color: #00324B!important;
	text-decoration: none!important;
}

.btn-addcart2:hover {
	background-color: #00e8d2;
	color: #00324B!important;
	text-decoration: none!important;
	cursor: copy;
}


.btn-complete {
	background-color: #1BE082;
	color: #FFF!important;
	text-decoration: none!important;
}

.btn-complete:hover {
	background-color: #7b28ff;;
	color: #FFF!important;
	text-decoration: none!important;
}

.navbarcustom {

    background-color: #FFF!important;
	border-bottom: 2pt solid #7b28ff!important;

}

.navbarcustomv2 {
	
	padding-top: 20px;
    background-color: #F5F5F5!important;
}

.catheader{
	background-color: #00324B;
	color: #FFF;
	border-color: #00324B;
}

.catheader a{
	color: #FFF;
	text-decoration: none!important;

}

.catheader a:hover{
	color: #CCC;
	text-decoration: none!important;

}

.cat-active {
	background-color: #7b28ff!important;
	font-weight: bolder!important;
}


.searchbar {
	background-color: white!important;
	color: #00324B;
	border-color: #C9CDCD;
}

.searchbar:focus {
	color: #00324B;
	border: 2pt solid #7b28ff!important;
	
}

.searchbtn {
	background-color: #FFFFFF;
	color: #7b28ff!important;
	border-color: #C9CDCD!important;
	border-left: 0pt;
}

.searchbtn:hover {
	background-color: #7b28ff!important;
	color: #FFFFFF!important;
	border-color: #7b28ff!important;
}


.icon-bar {
	width: 22px; 
	height: 2px;
	background-color: #B6B6B6;
	display: block;
	transition: all 0.2s;
	margin-top: 4px
}
 
.navbar-toggler {
  border: none;
  background: transparent !important;
}
 
.navbar-toggler .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}
 
.navbar-toggler .middle-bar {
  opacity: 0;
}
 
.navbar-toggler .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}
 
.navbar-toggler.collapsed .top-bar {
  transform: rotate(0);
}
 
.navbar-toggler.collapsed .middle-bar {
  opacity: 1;
}
 
.navbar-toggler.collapsed .bottom-bar {
  transform: rotate(0);
}

#loader_logo {
	position: absolute;
	z-index: 999999;
	left: 50%;
	top: 50%;
	width: 120px;
	height: 120px;
	margin: -60px 0 0 -60px;
	
	/*-webkit-animation: fadeIn 0.5s;*/
	/*animation: fadeIn 0.5s;*/
	
	 -webkit-animation: spin 1.0s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 1.0s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

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

@keyframes fadeIn {
	
   0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Center the loader */
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 240px;
    height: 240px;
    margin: -120px 0 0 -120px;
    border-radius: 50%;
    border: 8px solid transparent;
    border-top-color: #7b28ff;

    -webkit-animation: spin 1.0s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 1.0s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */

    z-index: 1001;
}

    #loader:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 8px solid transparent;
        border-top-color: #00e8d2;

        -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }

    #loader:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 8px solid transparent;
        border-top-color: #7b28ff;

        -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
          animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }

    @-webkit-keyframes spin {
        0%   { 
            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
        }
        100% {
            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
        }
    }
    @keyframes spin {
        0%   { 
            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
        }
        100% {
            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
        }
    }

    #loader-wrapper .loader-section {
        position: fixed;
        top: 0;
        width: 51%;
        height: 100%;
        background: #FFFFFF;
        z-index: 1000;
        -webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: translateX(0);  /* IE 9 */
        transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */
    }

    #loader-wrapper .loader-section.section-left {
        left: 0;
    }

    #loader-wrapper .loader-section.section-right {
        right: 0;
    }

    /* Loaded */
    .loaded #loader-wrapper .loader-section.section-left {
        -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(-100%);  /* IE 9 */
                transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */

        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
                transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }

    .loaded #loader-wrapper .loader-section.section-right {
        -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(100%);  /* IE 9 */
                transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */

-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }
    
    .loaded #loader {
        opacity: 0;
        -webkit-transition: all 0.3s ease-out;  
                transition: all 0.3s ease-out;
    }

 .loaded #loader_logo {
        opacity: 0;
        -webkit-transition: all 0.3s ease-out;  
                transition: all 0.3s ease-out;
    }
    .loaded #loader-wrapper {
        visibility: hidden;

        -webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateY(-100%);  /* IE 9 */
                transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */

        -webkit-transition: all 0.3s 1s ease-out;  
                transition: all 0.3s 1s ease-out;
    }
    
    /* JavaScript Turned Off */
    .no-js #loader-wrapper {
        display: none;
    }
    .no-js h1 {
        color: #222222;
    }