:root {
    --main-color: #3E1CC0;
	--second-color: #FF5147;
    --bk-main-color-sec: #5d34ff;
  }
body{
	overflow-x: hidden;
    margin-bottom: 180px;
    background-image: url(web_icons/background.png);
    background-size: 100% auto;
    background-repeat: repeat;
}

  h4 {
    font-weight: 100;
  }
  .price {
    font-weight: 500;
  }
  small {
    line-height: 1.4em;
    font-size: 0.7em;
    font-weight: 600;
    display: block;
    padding-bottom: 5px;
  }
  .btn {
    font-size: 0.7em;
  }
  .btn-secondary {
    color: black;
    background-color: #aaa;
    border: none;
    font-weight: 100;
    color: #fff;
    font-size: 12px !important;
    border: none;
    font-weight: 600 !important;
  }
  .btn-secondary:hover {
    color: black;
    background-color: rgb(240, 237, 237);
  }
  .btn-secondary small {
    color: #ffffff;
  }
  .btn-active, .btn-active:hover {
    color: white;
    /* background-color: rgba(245, 155, 39, 1);*/
  }
  .btn-active small {
    color: white;
  }
  .btn-icon {
    height: 40px;
    float: left;
  }
  .btn-group > .btn {
    width: 50%;
  }
  .navbar {
    min-height: 80px;
    padding: 0;
    width: 98%;
    margin: 0 1%10px 1%;
    border-radius: 10px;
    border: none !important;
  }
  .navbar-brand {
    display: block;
    width: 170px;
  }
  .navbar-brand img {
    display: block;
    width: 100%;
	  height: auto !important;
  }
  body > .container-fluid {
    padding-right: 10px;
  }
  .mt-10 {
    margin-top: 100px;
  }
  .mt-11 {
    margin-top: 130px;
  }
  .ml-auto {
    margin-left: auto !important;
  }
  .nav-item {
    margin-right: 20px;
  }
  #file-input {
    display: none;
  }
  .resumen {
    font-size: 1.7em;
  }
  .bg-gris {
    background-color: var(--bs-gray-100);
  }
  .circle {
    width: 35px;
    height: 35px;
    background-color: rgba(245, 155, 39, 1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 17px;
  }
  img {
    max-width: 100%;
    max-height: 100%;
  }
  .justify-between {
    display: flex;
    justify-content: space-between;
  }
  .clickeable {
    cursor: pointer;
  }
  .form-select {
    padding: 12px;
  }
  .espiral {
    left: 16px;
    width: 4px;
    border-left: 8px dotted var(--main-color);
    height: 350px;
    display: block;
    z-index: 1;
    position: absolute;
    font-size: 5rem;
  }
  .espiral_horizontal {
    left: 16px;
    width: 4px;
    border: 4px dotted var(--bs-success);
    height: 190px;
    display: block;
    z-index: 1;
    position: absolute;
    font-size: 5rem;
  }
  .blanco_y_negro {
    filter: grayscale(100%);
  }
  .container {
    max-width: 100%;
  }
.box-cont {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 10px 20px;
    margin: 0 0 10px 0;
    -webkit-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.13);
    -moz-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.13);
    box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 1);
}
  .box-cont .fa-2x {
    font-size: 3em;
  }
  .box-cont .title {
    font-size: 22px;
  }
  .box-cont .title > div {
    border-radius: 10px;
  }
  .box-cont .col {}

 
  .btn-active {
    background-color: var(--main-color) !important;
  }
  .btn-icon {
    float: none !important;
    margin: 0 0 5px 0;
  }
  small {
    line-height: 1.2;
    font-size: 13px;
    font-weight: 600;
  }
  .navbar-nav .btn-success {
    background-color: var(--second-color) !important;
  }
  #mensaje_bienvenida {
    /*border: dotted 4px var(--main-color);*/
    border-radius: 20px;
    height: 40% !important;
  }
  .order-md-2 {
    margin: 0;
  }
  .nav-link {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
  }
  .img-home {
    width: 40%;
    margin: 0 auto 30px;
  }
  .img-home img {
    width: 100%;
    margin: 0 auto;
  }
  .container {
    /* margin-bottom: 160px; */
  }
  .btn-home {
    font-size: 12px !important;
  }
  a {
    color: var(--main-color);
  }
  .btn:hover {
    background-color: var(--bk-main-color-sec);
    border-color: none !important;
  }
.aniadir, .aniadir:hover {
    padding: 8px 15px;
    /* margin: 6px; */
    font-size: 12px;
}
.btn-outline-success, .btn-success  {
    color: var(--main-color) !important;
    font-size: 12px !important;
    border: solid 2px var(--main-color) !important;
    font-weight: 600 !important;
}
.btn:hover {
    color: var(--bs-btn-hover-color);
    
    border-color: var(--main-color) !important;
}
.accordion-button:not(.collapsed) {
    background-color: var(--bk-main-color-sec);
    color: #fff;
}
.bg-success {
   background-color: var(--bk-main-color-sec) !important;
}
.btn-success{
	color: #fff !important;
	background-color: var(--bk-main-color-sec) !important;
	border: none !important;
}
.btn-secondary:hover {
    font-size: small;
	 color: #fff;
}
/****** colores ********/
.txt-white{
	color: #ffffff !important;
}
 .bk-main-color {
    background-color: var(--main-color);
    border: none !important;
  }
  .bk-white {
    background-color: #ffffff;
    border: solid 1px #d2d2d2;
  }

  .main-color {
    color: var(--main-color) !important;
  }
  .bk-main-color .btn-active, .btn-active:hover {
    background-color: var(--main-color) !important;
  }
/********* robot ********/

		#robot-mensaje{
    position: absolute;
    right: 120px;
    bottom: 90px;
    padding: 10px 20px;
    background-color: #00f3f3;
    border: solid 2px #fff;
    border-radius: 50px;
    -webkit-box-shadow: -10px 10px 10px -1px rgba(0, 0, 0, 0.13);
    -moz-box-shadow: -10px 10px 10px -1px rgba(0, 0, 0, 0.13);
    box-shadow: -10px 10px 10px -1px rgba(0, 0, 0, 0.13);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-family: sans-serif;
}
		.mensaje{}
		.robot-imagen{
    position: absolute;
    width: 120px;
    /* height: 300px; */
    right: 0;
    bottom: 0;
}
		.robot-imagen img{
    display: block;
    width: 100%;
}
	.robot {
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    width: 380px;
    height: 200px;
    position: fixed;
    /* background: red; */
    right: 10px;
    bottom: 150px;
    z-index: 999;
    /* -webkit-box-shadow: -10px 10px 10px -1px rgba(0, 0, 0, 0.13); */
    -moz-box-shadow: -10px 10px 10px -1px rgba(0, 0, 0, 0.13);
    /* box-shadow: -10px 10px 10px -1px rgba(0, 0, 0, 0.13); */
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }    
}
	
/********* fin robot ********/
#tarjetas{
	    margin-bottom: 10px !important;
}
.text-success, .text-secondary {
    color: var(--main-color) !important;
}
#app:before{
		    content: '';
		    background-image: url(../web_icons/fondo.png);
	background-image: url(https://www.bendito.la/clientes/copy/images/background.png);
	position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		    -webkit-filter: opacity(0.03);
		    -moz-filter: opacity(0.03);
		    filter: opacity(0.3);
		    z-index: -1;
		    background-repeat: round;
	    background-repeat: no-repeat;
		    background-size: 40% auto;
	 background-size: 100% auto;
		}
.card{
	border: solid 2px var(--main-color);
}
.card-int{
	    border: solid 2px var(--main-color);
}
.card-int .ficha {
    height: 160px;
}
.card-int .ficha img {
    height: 100% !important;
}
.ficha-home{
	height: 220px !important;
}
.card-footer {
    background-color: var(--main-color) !important;
    padding: 10px !important;
}
.card-footer .price {
    color: #fff !important;
    font-weight: 600;
    font-size: 1.3rem;
}
@media (max-width: 768px) {
	#app{
		    top: 80px;
    position: relative;
	}
	.img-home {
    width: 70%;
 
}
	#mensaje_bienvenida {
    height: auto !important;
    padding: 20px 0;
}
	.navbar {
 
    padding: 0;
    width: 100%;
    margin: 0 0 10px 0;
 
}
.mt-10 {
    margin-top: 2%;
}
	.navbar-expand .navbar-collapse {
    /* display: none !important; */
    left: -600px;
    position: absolute;
}
	.navbar-expand .navbar-toggler {
    display: block;
}
	.navbar-brand {
    display: block;
    width: 160px !important;
}
	.show{}	
	.navbar-expand .navbar-collapse .show , .show  {
	display: flex !important;
	flex-basis: auto;
	top: 80px;
	position: absolute;
	flex-direction: column !important;
	width: 100%;
	margin: 0;
	padding: 0;
	left: 0 !important;
}
 .show .navbar-nav {
    flex-direction: column !important;
    width: 100% !important;
    background-color: #fff !important;
    /* left: 2%; */
    position: relative;
    padding-left: 4%;
    padding-bottom: 4%;
}	
	
.btn-whatsapp {
 
bottom: 12px;
 
right: auto !important;
 
left: 10px !important;
 }	
	.robot {
    width: 300px;
    height: 100px;
    right: 10px;
    bottom: 20px;
}
	.robot-imagen {
 
    width: 90px;
 
}
	#robot-mensaje {
 
    right: 100px;
    bottom: 30px;
 
}
	.justify-content-center {
    justify-content: left;
}
}