.ddsubmenustyle,.ddsubmenustyle div{font:normal 13px Verdana;margin:0;padding:0;position:absolute;left:0;top:0;list-style-type:none;background:#fff;border:1px solid #000;border-bottom-width:0;visibility:hidden;z-index:100}.ddsubmenustyle ul{margin:0;padding:0;position:absolute;left:0;top:0;list-style-type:none;border:0 none}.ddsubmenustyle li a{display:block;width:170px;color:#000;background-color:#ffffe0;text-decoration:none;padding:4px 5px;border-bottom:1px solid #000}* html .ddsubmenustyle li{display:inline-block;width:170px}.ddsubmenustyle li a:hover{background-color:#000;color:#fff}.downarrowpointer{padding-left:4px;border:0}.rightarrowpointer{position:absolute;padding-top:3px;right:3px;border:0}.backarrowpointer{position:relative;border:0}.ddiframeshim{position:absolute;z-index:500;background:0 0;border-width:0;width:0;height:0;display:block}.mattblackmenu ul{margin:0;padding:0;font:bold 12px Verdana;list-style-type:none;border-bottom:1px solid gray;background:#f60;overflow:hidden;width:100%}.mattblackmenu li{font-size:12px;display:inline;margin:0}.mattblackmenu li a{float:left;display:block;text-decoration:none;margin:0;padding:6px 8px;border-right:1px solid #fff;color:#fff;background:#f60}.mattblackmenu li a:visited{color:#fff}.mattblackmenu li a:hover{background:#000}.mattblackmenu a.selected{background:#000}.notransition{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;transition:none!important}nav.mobilelevelsmenu{position:fixed;width:240px;height:100%;border:1px solid #000;left:0;top:0;z-index:1000;overflow:hidden;-webkit-transform:translateX(-100%);transform:translateX(-100%);opacity:0;-webkit-transition:all .5s;transition:all .5s}nav.mobilelevelsmenu.open{-webkit-transform:translateX(0);transform:translateX(0);opacity:1;-webkit-transition:all .5s;transition:all .5s}nav.mobilelevelsmenu ul{width:100%;height:100%;position:absolute;overflow-y:auto;list-style:none;margin:0;padding:0;left:0;top:0;background:#ffffe0;font-size:12px;font-weight:700;box-shadow:0 0 10px gray;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:left .5s;transition:left .5s}nav.mobilelevelsmenu ul li.breadcrumb{position:relative;padding:10px;border-bottom:1px solid gray;background:#000;color:#fff;font-weight:700;cursor:pointer}nav.mobilelevelsmenu ul span.left{margin-right:5px;font-weight:700;font-size:1.5em;color:#8b0000}nav.mobilelevelsmenu ul li a{text-decoration:none;display:block;padding:10px;color:#000;border-bottom:1px solid #eee}nav.mobilelevelsmenu ul li a:hover{background:#000;color:#fff}nav.mobilelevelsmenu ul li a span.right{position:absolute;right:8px;font-weight:700;font-size:1.1em}.animateddrawer{font-size:10px;width:3em;height:2.8em;outline:0;display:none;position:relative;background:#fff;z-index:1000}.animateddrawer:after,.animateddrawer:before{position:absolute;content:'';display:block;width:100%;height:.6em;background:#000;border-radius:2px;top:0;left:0;opacity:1;-webkit-transition:all .3s ease-in;transition:all .3s ease-in}.animateddrawer:after{top:auto;bottom:0}.animateddrawer span{width:100%;height:.6em;background:#000;position:absolute;top:50%;margin-top:-.3em;border-radius:2px;-ms-transform-origin:50% 50%;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transition:all .3s ease-in .3s;transition:all .3s ease-in .3s}.animateddrawer span::after{content:'';display:block;width:100%;height:.6em;background:#000;border-radius:2px;position:absolute;-ms-transform-origin:50% 50%;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transition:all .3s ease-in .3s;transition:all .3s ease-in .3s}.animateddrawer.open:before{top:50%;margin-top:-.3em;opacity:0}.animateddrawer.open:after{bottom:50%;opacity:0}.animateddrawer.open span{-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.animateddrawer.open span:after{-ms-transform:rotate(-90deg);-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}	body {
	margin-top:0px;
	background-image: url(https://www.dulcesyregalos.com/comunes/componentes/estilos/deliregalos.jpg);
	font-family: Verdana;
	font-size:10px;
}
a {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    color: #000000;
}
li {
    color: #000000;
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #000000;
}
a:hover {
    text-decoration: underline;
    color: #000000;
}
a:active {
    text-decoration: none;
    color: #000000;
}
h1,h2,h3,h4,h5,h6,codigos,costos {font-family: Arial, Helvetica, sans-serif; }
.marco {
                width:100%;
                margin:10px auto 10px auto; /* Centrado horizontal */
            }

            .cabecera {
             
                padding:10px;
            }

            .cuerpo {
                padding:10px 0 10px 0;
                overflow-x:hidden;
                overflow-y:auto; /* Hace que se ajuste a la columna más alta en ff */
/* Hace que se ajuste a la columna más alta  en ie6 */
				background: #F8F8F8;
            }

            .columna_derecha {
                float:right; /* Alineación a la derecha */
                width:30%;
                padding:10px;
            }

            .columna_izquierda {
                float:left; /* Alineación a la izquierda */
                width:30%;
                padding:10px;
            }
            .columna_central {
                margin-left:20px; /* Espacio para la columna izquierda */
                margin-right:20px; /* Espacio para la columna derecha */
                padding:10px;
            }
            .pie {background: #F3F3F3;
                padding:10px;
                text-align:center;
                font-size:80%;
            }
h1 {
color:#666666;
font-size:12px;
font-style:normal;
font-size-adjust:none;
font-stretch:normal;
font-weight:100;
}
.codigos {
	font-weight:bold;
	color:#003300;
    font-size:12px;	}
.costos{
color:#333333;
font-size:11px;
font-weight:50;
font-style:normal;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;}
h2 {
	font-size: 12px;
	color: black;}
h3 {
	font-size: 12px;
	color: #333;}
h4 {
	font-size: 14px;
	color: #FFF;}
h5 {
	font-size: 10px;
	color: #FFF;}
h6 {
	font-size: 10px;
	color: #333;}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  grid-gap: 5px;
  grid-column-gap: 5px;
  justify-content: space-evenly;
  align-content: center;}
#imagenas{
	width: 100px;
background-color: white;
	 border-style: dotted;
	 border-width: 1px;
	border-color: grey;
}
#tituloas {
	width: 100px;
	color:black;
	font-size: 10px;
	
background-color: white;
	 border-style: dotted;
	 border-width: 1px;
	border-color: grey;
		  margin-bottom: 10px;
}	
#contenedoras {
	margin-top:5px;
	margin-right: 5px;
	 text-align: center;
	background-color: white;
	width: 100px;
}
#contenedor {
 width: 150px;
 border-style: solid;
	 border-width: 1px;
	border-color: grey;
	background-color: white;
	text-align: center;}
#titulo {
height: 55px;
width: 150px;}
#codigo {
height: 10px;
width: 150px;}
#imagen {
height: 150px;
width: 150px;} 
#precio {
	width: 150px;
background-color: white;
}
#antes {
	width: 150px;}	
#boton {
width: 150px;
	height: 30px;}		
main {
  color: gainsboro;
  margin: 0 auto;
  max-width: 1000px;
  min-height: 100vh;
  display: grid;
}
header {
  grid-area: my-header;
  background-color: white;
  color:#222020;
  font-size: 14px; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif;
}
header1 {
	text-align:center;
	align-content: center;
  grid-area: my-header1;
  background-color: white;
}
header2 {
  grid-area: my-header2;
  background-color: white;
}
header3 {
  grid-area: my-header3;
  background-color: white;
}	
nav {
  grid-area: my-nav;
  background-color: white;
}
aside {
  grid-area: my-aside;
  background-color: white;
}
section {
	width: 100%;
	margin-top:0px;
	grid-area: my-section;
  background-color: white;
}
footer {  display: grid;
		width: 100%;
  grid-area: my-footer;
  background-color: white;
}
banner {
  grid-area: my-banner;
  background-color: white;
}

@media (min-width: 300px) and (max-width: 1000px) {
.quitar {
    display: none;
  }
main {

  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 80px
    30px
    1fr
    10px;
  grid-template-areas: 
    "my-header1 my-header1 my-header1"
    "my-nav my-nav my-nav"
    "my-section my-section my-section"
    "my-footer my-footer my-footer"
}
}
@media (min-width: 1001px) {	
  main {
	  	background-color: white;
    grid-template-columns: 300px 2fr 1fr 50px 60px;
    grid-template-rows: 60px
		20px
		30px
      1fr
		55px
      10px;
    grid-template-areas:
      "my-header1 my-header2 my-header2 my-header3 my-header3"
	  "my-header1 my-header my-header my-header3 my-header3" 
	  "my-nav my-nav my-nav my-nav my-nav" 
      "my-section my-section my-section my-aside my-aside"
	  "my-banner my-banner my-banner my-banner my-banner"
      "my-footer my-footer my-footer my-footer my-footer"
  }
}