#container {
	    background:#FFFFFF;
            width: 950px;
            border: 1px solid gray;
            margin: 0px;
            margin-left: auto;
            margin-right: auto;
            padding: 0px;

        }
		
		#cssmenu2 ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
}
#cssmenu2 li {
    float: left;
  font-family: helvetica;
}
#cssmenu2 li a {
    display: block;
    color: #666;
    text-align: center;
    padding: 8px 12px;
    text-decoration: none;
}

#cssmenu2 li a:hover:not(.active) {
    background-color: #ddd;
}


#cssmenu2 li a.active {
    color: white;
    background-color: #44aee4;
}

		
td.marco {
	BORDER-RIGHT: #cccccc 1px solid;
	PADDING-RIGHT: 1px;
	BORDER-TOP: #cccccc 0px solid;
	PADDING-LEFT: 1px;
	PADDING-BOTTOM: 1px;
	BORDER-LEFT: #cccccc 0px solid;
	PADDING-TOP: 1px;
	BORDER-BOTTOM: #cccccc 1px solid;

	
      }

table {
    table-layout: auto;
}

.tcarrito {
 border-style: ridge;
 border-width: 1px;
 text-align:left;
 vertical-align: middle;
        }

.btn
{
  background-color: #333;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
}

.btn:focus,.btn:active:focus,.btn.active:focus
{
outline:thin dotted;
outline:5px auto -webkit-focus-ring-color;
outline-offset:-2px
}

.btn:hover,.btn:focus
{
color:#333;
text-decoration:none
}

.btn:active,.btn.active
{
outline:0;
background-image:none;
-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);
box-shadow:inset 0 3px 5px rgba(0,0,0,.125)
}

.btn.disabled,.btn[disabled],fieldset[disabled] .btn
{
cursor:not-allowed;
pointer-events:none;
opacity:.65;
filter:alpha(opacity=65);
-webkit-box-shadow:none;
box-shadow:none
}

.btn-default
{
  
  background-color: #333;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 2px;
}


.btn-default:hover,.btn-default:focus,.btn-default:active,.btn-default.active,.open .dropdown-toggle.btn-default
{
color:#333;
background-color:#ebebeb;
border-color:#adadad
}

.btn-default:active,.btn-default.active,.open .dropdown-toggle.btn-default
{
background-image:none
}

.btn-default.disabled,.btn-default[disabled],fieldset[disabled] .btn-default,.btn-default.disabled:hover,.btn-default[disabled]:hover,fieldset[disabled] .btn-default:hover,.btn-default.disabled:focus,.btn-default[disabled]:focus,fieldset[disabled] .btn-default:focus,.btn-default.disabled:active,.btn-default[disabled]:active,fieldset[disabled] .btn-default:active,.btn-default.disabled.active,.btn-default[disabled].active,fieldset[disabled] .btn-default.active
{
background-color:#fff;
border-color:#ccc
}

.btn-default .badge
{
color:#fff;
background-color:#333
}


.agregar {
    background-color: #a7c97f;
    border: none;
    color: white;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 8px;
}


.comprar {
    background-color: #76b241;
    border: none;
    border-color: #3333;
    color: white;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 8px;
}


input {
  font-size: 14px;
}


textarea {
  font-size: 14px;
  margin: 5px;
  padding: 0 10px;
  width: 248px;
  height: 60px;
  color: #404040;
  background: white;
  border: 1px solid;
  border-color: #c4c4c4 #d1d1d1 #d4d4d4;
  border-radius: 2px;
  outline: 5px solid #eff4f7;
  -moz-outline-radius: 3px;
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}

select {
  font-size: 14px;
  margin: 5px;
  padding: 0 5px;
  width: 248px;
  height: 34px;
  color: #404040;
  background: white;
  border: 1px solid;
  border-color: #c4c4c4 #d1d1d1 #d4d4d4;
  border-radius: 2px;
  outline: 5px solid #eff4f7;
  -moz-outline-radius: 3px;
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}



input[type=text], input[type=password] {
  margin: 5px;
  padding: 0 5px;
#  width: 248px;
  height: 34px;
  color: #404040;
  background: white;
  border: 1px solid;
  border-color: #c4c4c4 #d1d1d1 #d4d4d4;
  border-radius: 2px;
  outline: 5px solid #eff4f7;
  -moz-outline-radius: 3px;
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}

input[type=text] {
 #   width: 100%;
    padding: 12px 5px;
    margin: 8px 0;
    box-sizing: border-box;
}

input[type=text]:focus, input[type=password]:focus {
  border-color: #7dc9e2;
  outline-color: #dceefc;
  outline-offset: 0;
}

textarea:focus{
  border-color: #7dc9e2;
  outline-color: #dceefc;
  outline-offset: 0;
}

select:focus{
  border-color: #7dc9e2;
  outline-color: #dceefc;
  outline-offset: 0;
}


.login {
  position: relative;
  margin: 0 auto;
  padding: 20px 20px 20px;
  width: 90%;
  background: white;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
}
.login:before {
  content: '';
  position: absolute;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  z-index: -1;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 4px;
}

/* pagina */

body {
	background-color: #FFFFFF;
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
    font-family: 'system-ui', monospace;
	font-size:12px;
}


h1 {
  font-size: 60px;
  text-align: center;
  color: #FFF;
}

h3 {
  font-size: 30px;
  line-height: 34px;
  text-align: center;
  color: #FFF;
}

h3 a { color: #FFF; }

a { color: #333; }

button {
  background-color: #333;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
}

a.button {
  background-color: #333;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
}

h1 {
  margin-top: 100px;
  text-align: center;
  font-size: 60px;
  line-height: 70px;
  font-family: helvetica;
}

p { text-align: center; }
 .toggle, [id^=drop] {
 display: none;
 text-align: left;
}

nav {
  margin: 0;
  padding: 0;
  background-color: #333;
}

li a {
color: #000000;
}

#logo {
  display: block;
  padding: 0 30px;
  float: left;
  font-size: 20px;
  line-height: 60px;
}

nav:after {
  content: "";
  display: table;
  clear: both;
}

nav ul {
/*  float: right;*/
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}

nav ul li {
  margin: 0px;
  display: inline-block;
  float: left;
  background-color: #333;
  transition: width 2s;
}

nav a {
  display: block;
  padding: 0 20px;
  color: #FFF;
  font-size: 16px;
  line-height: 40px;
  text-decoration: none;
}

nav ul li ul li:hover { background: #000000; }

nav a:hover { background-color: #000000; }

nav ul ul {
  display: none;
  position: absolute;
  top: 40px;
}

nav ul li:hover > ul { display: inherit; }

nav ul ul li {
  width: 170px;
  float: none;
  display: list-item;
  position: relative;
}

nav ul ul ul li {
  position: relative;
  top: -40px;
  left: 170px;
}

li > a:after { content: ' +'; }

li > a:only-child:after { content: ''; }


/* Media Queries
--------------------------------------------- */

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

img.ibanner {
	width: 340px;
}

img.ibanner2 {
	width: 100%;
}


body {
	background-color: #FFFFFF;
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
	font-size:11px;
}

#container {
	text-align: center;
            width: auto;
            border: 0px solid gray;
            margin: 0px;
            margin-left: auto;
            margin-right: auto;
            padding: 0px;

        }
		
#logo {
  display: block;
  padding: 0;
  width: 100%;
  text-align: left;
  float: none;
}

nav { margin: 0; }

.toggle + a,
 .menu { display: none;
       text-align: left;
     
 }

.toggle {
  display: block;
  background-color: #333;
  padding: 0 10px 8px;
  color: #FFF;
  font-size: 20px;
  line-height: 35px;
  text-decoration: none;
  text-align: left;
  border: none;
 height: 33px;
 transition: width 2s;
     
}

.toggle:hover 
{
    background-color: #333; 

}

[id^=drop]:checked + ul { display: block; }

nav ul li {
  display: block;
  width: 100%;
}

nav ul ul .toggle,
 nav ul ul a { padding: 0 40px; }

nav ul ul ul a { padding: 0 80px; }

nav a:hover,
 nav ul ul ul a { background-color: #000000; }

nav ul li ul li .toggle,
 nav ul ul a { background-color: #212121; }

nav ul ul {
  float: none;
  position: static;
  color: #ffffff;
}

nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; }

nav ul ul li {
  display: block;
  width: 100%;
}

nav ul ul ul li { position: static;

}
}

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

nav ul li {
  display: block;
  width: 94%;
}

}