* { 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
-o-box-sizing: border-box; 
box-sizing: border-box; 
/* adds animation for all transitions */ 
-webkit-transition: .25s ease-in-out; 
-moz-transition: .25s ease-in-out; 
-o-transition: .25s ease-in-out; 
transition: .25s ease-in-out; 
margin: 0; 
padding: 0; 
-webkit-text-size-adjust: none; 
} 
 *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background: #fcfcfc;

    font-family: sans-serif;
}

/* Makes sure that everything is 100% height */ 

html,body { 
height: 100%; 
overflow: hidden; 
} 

/* gets the actual input out of the way; 
we're going to style the label instead */ 

#drawer-toggle { 
position: absolute; 
opacity: 0; 
}

#drawer-toggle-label { 
-webkit-touch-callout: none; 
-webkit-user-select: none; 
-khtml-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
user-select: none; 
left: 0px; 
height:50px; 
width: 50px; 
display: block; 
position: fixed; 
background: rgba(255,255,255,.0); 
z-index: 1; 

} 

/* adds our "hamburger" menu icon */ 

#drawer-toggle-label:before { 
content: ''; 
display: block; 
position: absolute; 
height: 2px; 
width: 24px; 
background: #8d8d8d; 
left: 13px; 
top: 18px; 
box-shadow: 0 6px 0 #8d8d8d, 0 12px 0 #8d8d8d; 
} 

header { 
width: 100%; 
position: fixed; 
left: 0px; 
background: #efefef; 
padding: 10px 10px 10px 50px; 
font-size: 30px; 
line-height: 30px; 
z-index: 0; 
text-align: center;
}

/* drawer menu pane - note the 0px width */ 

#drawer { 
position: fixed; 
top: 0; 
left:-300px; 
height: 100%; 
width: 300px; 
background: #2f2f2f; 
overflow-x: hidden; 
overflow-y: hidden; 
padding: 20px; 
-webkit-overflow-scrolling: touch; 
} 

/*top containt*/
/* top info grid*/

.home-top-grid-container {
   border-collapse: collapse;
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: white;
  border: none;
  
}
.home-top-grid-container .grid-item {

  padding: 21px;
  
}
/* actual page content pane */ 

#page-content { 
margin-left: 0px; 
margin-top: 50px; 
width: 100%; 
height: calc(100% - 50px); 
overflow-x:hidden; 
overflow-y:scroll; 
-webkit-overflow-scrolling: touch; 
padding: 0px; 
}

/* checked styles (menu open state) */ 

#drawer-toggle:checked ~ #drawer-toggle-label { 
height: 100%; 
width: calc(100% - 300px); 
background: rgba(255,255,255,.8); 
} 

#drawer-toggle:checked ~ #drawer-toggle-label, 
#drawer-toggle:checked ~ header { 
left: 300px; 
} 

#drawer-toggle:checked ~ #drawer { 
left: 0px; 
} 

#drawer-toggle:checked ~ #page-content { 
margin-left: 300px; 
}

/* Menu item styles */ 

#drawer ul { 
list-style-type:none; 
} 

#drawer ul a { 
display:block; 
padding:10px; 
color:#c7c7c7; 
text-decoration:none; 
} 

#drawer ul a:hover { 
color:white; 
} 

/* Responsive MQ */ 

@media all and (max-width:350px) { 

#drawer-toggle:checked ~ #drawer-toggle-label { 
height: 100%; 
width: 50px; 
} 

#drawer-toggle:checked ~ #drawer-toggle-label, 
#drawer-toggle:checked ~ header { 
left: calc(100% - 50px); 
} 

#drawer-toggle:checked ~ #drawer { 
width: calc(100% - 50px); 
padding: 20px; 
} 

#drawer-toggle:checked ~ #page-content { 
margin-left: calc(100% - 50px); 
} 

}

  .grid-container-one
{
   border-collapse: collapse;
    display: grid;
  grid-template-columns: auto;
 
  border: none;

}
.grid-container-one .grid-item-one
{
    background-color: seagreen;
  padding: 0px;
 text-align: center;

  opacity: 0.9;
  color: whitesmoke;
}

.image_home
{
 margin-top: 1px;
  width: 100%;
   height: 70vh;
   border-collapse: collapse;
   background-color: seagreen;
}
  .grid-container-two
}
{
   border-collapse: collapse;
    display: grid;
  grid-template-columns: auto auto;
 
  border: none;

}
.grid-container-two .grid-item-two
{
 
  padding: 0px;
  
  text-align: center;
  opacity: 0.9;
  color: whitesmoke;
}
 .grid-container-three
{
   border-collapse: collapse;
    display: grid;
  grid-template-columns: auto auto auto;
 
  border: none;
  padding: 15px;
  text-align: center;

}
.grid-container .grid-item-three
{
 
  padding: 5px;

  text-align: left;
  opacity: 0.9;
  
}

  .grid-container
{
   border-collapse: collapse;
    display: grid;
  grid-template-columns: auto auto auto auto;
 
  border: none;

}
.grid-container .grid-item
{
 
  padding: 1px;
  
  text-align: center;
  opacity: 0.9;
  color: whitesmoke;
}

  .grid-container-four
{
   border-collapse: collapse;
    display: grid;
  grid-template-columns: auto auto auto auto;
 
  border: none;

}
.grid-container-four .grid-item-four
{
 
  padding: 1px;
  
  text-align: center;
  opacity: 0.9;
  color: red;
}

.grid-container-four .grid-item-four p
{
  color: black;
}
.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 100%;
  height: 300px;
  border-radius: 5px;
    margin-left: auto;
  margin-right: auto;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.card img {
  border-radius: 5px 5px 0 0;
    border-radius: 5px;
  
   width: 100%;
  height: 230px;


}

.container {
  padding: 2px 16px;

}
.card h4
{
    color: black;
}
.card p
{
    color: black;
}

.search_input_home
{
 
  height: 25px;
  width: 80%;

}
.search_home_btn
{
  height: 25px;
}

.logo
{
  height: 100px;
  width: 100%;
  object-fit: fit;

    border-radius: 5px;
    margin-left: auto;
  margin-right: auto;
}


.search_input_text
{
  height: 35px !important;
  border-radius: 15px;
  width: 80%;
margin-bottom: 10px;
}
.section_daily_product
{
  margin-top: 20px;
}




/*footer start*/
.footer {
  background: #2f2f2f !important;
 
}
/*footer ends*/


/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
  body {
    background-color: #fff;

  }
   .grid-container
{
   border-collapse: collapse;
    display: grid;
  grid-template-columns: auto auto auto;
 
  border: none;

}
.grid-container .grid-item
{
 
  padding: 3px;
  
  text-align: center;
  opacity: 0.9;
  color: whitesmoke;
}
   .grid-container-four
{
   border-collapse: collapse;
    display: grid;
  grid-template-columns: auto auto auto;
 
  border: none;

}
.grid-container .grid-item-four
{
 
  padding: 3px;
  
  text-align: center;
  opacity: 0.9;
  color: whitesmoke;
}
}


/*item slider*/
h1 {
  font-size: 1.5em;
  text-align: center;
  margin: 1.2em 0;
  color: #555555;
}


/*Carousel*/
.carrousel {
  background: #ffffff;
  text-align: center;
  padding: 4px;
  height: 300px;
  max-width:100%;
  margin: auto;
  position: relative;
  overflow: hidden;
}
.carrousel h2 {
  margin: 0;
  margin-top: -1.7em;
  padding: 0;
  font-size: 1em;
  text-align: center;
  color: #bbbbbb;
}
.carrousel .slides {
  width: 400%;
  left: 0;
  padding-left: 0;
  padding-top: 1em;
  overflow: hidden;
  list-style: none;
  position: relative;

  -webkit-transition: transform .5s;
  -moz-transition: transform .5s;
  -o-transition: transform .5s;
  transition: transform .5s;
}
.carrousel .slides li {
  width: 25%;
  position: relative;
  float: left;
}

.carrousel li img {
  width: 100%;
  border-radius: 5%;
  margin-left:0px;
  margin-right: 0px;
  vertical-align: middle;
}

.carrousel .slidesNavigation {
  display: block;
  list-style: none;
  text-align: center;
  
  /*--- Centering trick---*/
    /* Absolute positioning*/
    position: absolute; 
    /* Abosulte positioning*/
    width: 104px; /*This width  is the addition of the width of all the navigations dots - So in this case is   104 because the navigation dots are 26px (width:10px and 6px marginleft + 6 px marginright) and there are 4 dots so 4x26=104 */
    left: 50%; /*Centering de element*/
    margin-left: -52px; /*adjusting the centering by applying a negative margin of half of the width*/
}
.carrousel input {
  display: none;
}
.carrousel .slidesNavigation label {
  float: left;
  margin: 6px;
  display: block;
  height: 10px;
  width: 10px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: solid 2px #2980b9;
  font-size: 0;
}
/* You have to repeat this with each slide
TODO: make it easier with SCSS
25% movement 100/slides-num
*/
#radio-1:checked ~ .slides {
  transform: translateX(0%);
}
#radio-2:checked ~ .slides {
  transform: translateX(-25%);
}
#radio-3:checked ~ .slides {
  transform: translateX(-50%);
}
#radio-4:checked ~ .slides {
  transform: translateX(-75%);
}


.carrousel .slidesNavigation label:hover {
   cursor: pointer;
}
/* You have to repeat this with each slide/dot */
.carrousel #radio-1:checked ~ .slidesNavigation label#dotForRadio-1,
.carrousel #radio-2:checked ~ .slidesNavigation label#dotForRadio-2,
.carrousel #radio-3:checked ~ .slidesNavigation label#dotForRadio-3,
.carrousel #radio-4:checked ~ .slidesNavigation label#dotForRadio-4 {
  background: #2980b9;
}

@media  (max-width: 796px) {
  .carrousel{
    height: 400px;
  }
}
@media  (max-width: 480px) {
  .carrousel li p {
    padding-left: 0.5em;
    padding-right: 0.5em;
  }

}
/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
  body {
   background-color: #fff;
  }
   .grid-container
{
   border-collapse: collapse;
    display: grid;
  grid-template-columns: auto auto ;
 
  border: none;

}
.grid-container .grid-item
{
 
  padding: 2px;
  
  text-align: center;
  opacity: 0.9;
  color: whitesmoke;
}
   .grid-container-four
{
   border-collapse: collapse;
    display: grid;
  grid-template-columns: auto auto;
 
  border: none;
}
.grid-container .grid-item-four
{
 
  padding: 2px;
  
  text-align: center;
  opacity: 0.9;
  color: whitesmoke;
}
}


/*image slider advertising*/

.img-slider {
    position: relative;
    width: 100%;
    height: 300px;
     
}
.img-slider .slider-container {
    position: absolute;
    width: 300%;
    top: 0;
    left: 0;
    overflow: hidden;
    animation: slider 26s infinite;
}
.img-slider .slider-container .slide {
    position: relative;
    width: 33.33333333%;
    height: 400px;
    float: left;
    overflow: hidden
}
.img-slider .slider-container .slide img {
  display: block;
  width: 100%;
  height: 400px;

}
@keyframes slider {
    0%, 25%, 100%{left: 0}
    
    30%, 55%{left: -100%}
    
    60%, 85%{left: -200%}
}

/* scroll items */
div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: #777;
}
/*footer*/
a {
  text-decoration: none;
}



footer {
    margin-bottom: 80px;
    color: #333;
    background-color: #e6f0ff;
    bottom: 0;
}

.row {
  display: flex;
  padding: 1rem;
}

.column {
  width: calc(100% / 3);
  padding: 0 0.9375rem;
}

h4 {
  margin-bottom: 0.9375rem;
  font-size: 1.5rem;
}

p {
  font-size: 1rem;
  line-height: 1.3rem;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  margin-bottom: 0.625rem;
}

ul li a {
  color: #333;
  font-size: 1rem;
}

ul li i {
  color: #6faaff;
}

ul li a:hover {
  color: #6faaff;
}

ul.social-icons {
  display: flex;
  column-gap: 0.625rem;
}

.social-icons i {
  color: white;
}

ul.social-icons li {
  margin-bottom: 0rem;
}

ul.social-icons li a {
  display: grid;
  place-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 100%;
  background-color: #6faaff;
}

ul.social-icons li:hover a {
  background-color: #6fdeff;
}

.copyright {
  text-align: center;
  color: #fff;
  background-color: #6faaff;
  padding: 0.6rem 0;
}

/* Responsive adjustments */

@media screen and (max-width: 768px) {
  .column {
    margin: 0.4rem 0;
    width: 100%;
    padding: 0;
  }

  .row {
    display: flex;
    flex-wrap: wrap;
  }

  h4 {
    font-size: 1.3125rem;
  }

  p {
    font-size: 0.9375rem;
  }

  ul li a {
    font-size: 0.9375rem;
  }

  ul.social-icons li a {
    width: 1.875rem;
    height: 1.875rem;
  }
}
/*slider div bg top*/
#divbg
{
  background-color: #333333cf;
}
#divp
{
  background-color: #dc3545b3;
}