body {
    margin:0; 
    font-family:"Roboto", sans-serif; 
    -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
}

*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
a{text-decoration:none !important;}
.img img {width:100%}
ul {margin:0; padding:0; list-style:none}
:focus {
outline: 0;
}
input[type="button"],input[type="submit"],a,.transition,li { -webkit-transition: background-color 0.3s linear,color 0.3s linear,opacity 0.3s linear ;-moz-transition: background-color  0.3s linear,color 0.3s linear,opacity 0.3s linear ; -ms-transition: background-color  0.3s linear,color 0.3s linear,opacity 0.3s linear ;-o-transition: background-color  0.3s linear,color 0.3s linear,opacity 0.3s linear ; transition: background-color  0.3s linear,color 0.3s linear,opacity 0.3s linear ;}
.row {
    --bs-gutter-x: 1.0rem;
}
html {
    scroll-behavior: smooth;
  }

#loading {
    background-color: black; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100001;
    text-align: center;
    background-image: url("../img/loading.gif");
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 !important;
    padding: 0 !important;
    background-size: 180px;
}
.logo {
    padding: 10px 10px 0 ; 
}
.logo img {
    width:100%;
    border-radius: 12px;
}

.mt-10 {
    margin-top: 10px
}
.mt-20 {
    margin-top: 20px
}
.mt-30 {
    margin-top: 30px
}
.mb-10 {
    margin-bottom: 10px
}
.mb-20 {
    margin-bottom: 20px
}
.mb-30 {
    margin-bottom: 30px
}

.search input {
    height: 48px;
    width: 100%;
    max-width: 250px;
    display: inline-block;
    border-color: #CED4D6;
    color: #5C5C5C;
}

.list-card {
    padding: 0 10px 10px;
}
.list-card .card {
    height:0;
    width:100%;
    padding-bottom:100%;
    background-color:red;
    background-size: 100%;
    background-position: center;
    position: relative;
    text-align: center;
}


.list-card .card-2 {
    padding-bottom:150%;
}



.list-card .card .caption {
    background-color:rgba(0, 0, 0, 0.4);
    color:white;
    text-align: center;
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    display: grid;
	font-size: 12px;
	/* Make a horizontal flexbox (the default) */
	flex-direction: row;
	
	/* The important part: vertically center the items */
	align-items: center;

}
.img img{
    width: 100%;
}
.product-card { 
    position:relative
}

.product-card .card {
    border: none;
    border-radius: 0;
}

.product-card .card ul {
    list-style-type: none;
    padding: 0 20px;
}
.product-card .card ul li {
    border-bottom: solid 1px #A7AFC0;
}
.product-card .card ul li {
    padding: 10px;
    color: #A0A7BA;
    position: relative;
    font-size: 20px;
}
.product-card .card ul p {
    padding: 0;
    margin: 0;
}
.product-card .card ul li .price {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 18px;
}

.product-card .card ul li.special {
    background-color: #A0A7BA;
    color: white;
}


.product-card .card .card-header {
    padding: 10px;
    margin-bottom: 0;
    background-color: #C59965;
    border-bottom: none;
    color: white;
    border-radius: 0;
    font-size: 24px;
}

.fixed.card-header {position: fixed; z-index: 1; width: 100%; top: 0; }

.list-card-2 {
    padding: 0 10px 10px;
}

.list-card-2 .card {
    position: relative;
    height: 165px;
}

.list-card-2 .card .caption {
    padding: 10px;
    background-color:rgba(0, 0, 0, 0.4);
    color:white;
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

.list-card-2 .card h6{
   font-size: 12px;
}

.list-card-2 .card p{
    font-size: 10px;
    width: 60%;
    font-weight: 300;
 }

 .control-header {
    padding: 10px 10px 0;
 }
 .control-header .back-url{
    background-color: #CDD2DE;
    height: 105px;
    display: block;
    background-image: url('../img/back.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 55%;
    border-radius: 10px;
 } 
 .control-header .main-title{
    height: 105px;
    width: 100%;
    
    border-radius: 10px;
    position: relative;
 } 

 .control-header .main-title .caption {
    background-color:rgba(0, 0, 0, 0.4);
    color:white;
    text-align: center;
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
	font-size: 14px;
    padding-top: 15%;
    font-weight: 500;
    
    border-radius: 10px;
}