.foo {
  --pbanner: calc((4/3) * (9/16) * 100vh);
  --thbanner: calc(var(--pbanner));
}
html,body {
   overflow-y:auto;
   overflow-x:hidden;
   background-color:#7079a5;
}  
iframe {
   max-width:100%
}

/* Arriba */

#topBar {
   background-image: linear-gradient(#c9ccdd, #f1f1f1);
   //background-color: #c9ccdd;
   color:#ffffff;
   position:relative;
   margin:0 0 0 0;
   padding-top:20px;
   padding-bottom:10px;
   padding-left:20px;
   padding-right:20px;
   font-size:14px;
   //-webkit-box-shadow: 10px 10px 34px -9px rgba(0,0,0,0.33);
   //-moz-box-shadow: 10px 10px 34px -9px rgba(0,0,0,0.33);
   //box-shadow: 10px 10px 34px -9px rgba(0,0,0,0.33); 
   
   //border-bottom:2px white dotted;
}

.w3-topnav a {
  color: #ffffff;
  font-size:16px;  
}  
.topnav  {
   background:#8d94b8;
}
.topnav a {
   cursor:pointer;
}
.w3-topnav a.active {
   background-color:#3b3b3b;
   color:#ffffff;
}
.w3-topnav li:hover {border-bottom: 4px solid white;}


/* Area de logo y banner */
#tbar {
   padding:0 0 0 0;
   margin:auto;
   background-image: linear-gradient(#f1f1f1,#c9ccdd);
   -webkit-box-shadow: 10px 10px 34px -9px rgba(0,0,0,0.33);
   -moz-box-shadow: 10px 10px 34px -9px rgba(0,0,0,0.33);
   box-shadow: 10px 10px 34px -9px rgba(0,0,0,0.33); 
   
}
/* Texto abajo de imagen */

.hd {
   position:relative;
   width:400px;
   max-width:82%;
   padding-top:10px;
   padding-bottom:10px;
   padding-left:40px;
   padding-right:40px;
   -webkit-box-shadow: 10px 10px 34px -9px rgba(0,0,0,0.33);
   -moz-box-shadow: 10px 10px 34px -9px rgba(0,0,0,0.33);
   box-shadow: 10px 10px 34px -9px rgba(0,0,0,0.33); 
   background-color:#8d94b8;
   color:#ffffff;
   cursor:pointer;
   font-size:18px;
   display:inline-block;
   text-align:center;
}

/* abajo */

#abajo {
   
   background-image: linear-gradient(#c9ccdd, #f1f1f1);
   padding:0 0 10px 0;
   margin:10px 20px 10px 20px;
}
.eg {
   box-sizing: border-box;
   border: 0;
   padding:0;
}

#prods {
   padding-right:30px;
   background-image: linear-gradient(#f1f1f1,#c9ccdd);
      border:hidden  5px #000000;
      -moz-border-radius-topleft: 40px;
      -moz-border-radius-topright:40px; 
      -moz-border-radius-bottomleft:40px;
      -moz-border-radius-bottomright:40px; 
      -webkit-border-top-left-radius:28px;
      -webkit-border-top-right-radius:40px; 
      -webkit-border-bottom-left-radius:40px;
      -webkit-border-bottom-right-radius:40px;
      border-top-left-radius:40px;
      border-top-right-radius:40px; 
      border-bottom-left-radius:40px;
      border-bottom-right-radius:40px;   
}

/* Menú lateral */

/* Bpotón de Menú lateral */
h5 {
   position:relative;
   margin:5px;
   top;5px;
   padding-top:10px;
   padding-bottom:10px;
   padding-left:20px;
   padding-right:20px;
   -webkit-box-shadow: 10px 10px 34px -9px rgba(0,0,0,0.33);
   -moz-box-shadow: 10px 10px 34px -9px rgba(0,0,0,0.33);
   box-shadow: 10px 10px 34px -9px rgba(0,0,0,0.33); 
   background-color:#3b3b3b;
   color:#ffffff;
   cursor:pointer;
   font-size:16px;
}
h5:hover {
   background-color:red;
}
#menu {
   margin-top:10px;
   max-height:510px;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;   
}
.menLat a{
   color:#000000;
}
.detM {
   display:block;
}


/*  filtro */

#search {
   width:100%;
   height:50px;
   background-color:#c9ccdd;
   margin:0 0 0 0;
   color:#ffffff;
}
#filtro {
   width:800px;
   background-color:#3b3b3b;
   color:#ffffff;
   height:40px;
   padding:0 0 0 5px;
   border:0;
   margin:0 0 0 20%;
   font-size:14px;
}

/* Paginación */

.bgPag { 
   background-color:transparent;
   width:100%;
   //color:#f1210px;
}
.w3-btn {
   background-color:#3b3b3b;
   color:#ffffff;
   margin:2px;
   width:5%;
}
.w3-btn:hover {
   background-color:red;
   color:#ffffff;
   text-decoration:none;
}
.w3-prod {
     border:0;
     position: relative;
     display: block;
     text-align: center;
     text-decoration: none;
     transform-style: flat;
     transition: all 250ms ease-out;
     cursor:pointer;
     padding:10px 10px 10px 10px;
     margin:auto;
     color:#ffffff;
     width:80px;
     background:#ff0000;
}
.w3-prod:hover {
      background:#c0c0c0;
      transform: translateY(+2px);
      -webkit-box-shadow: 0px 4px 12px 3px rgba(153,150,153,0.72);
      -moz-box-shadow: 0px 4px 12px 3px rgba(153,150,153,0.72);
      box-shadow: 0px 4px 12px 3px rgba(153,150,153,0.72);
}
.btn-def {
   background-color:red;
   color:#ffffff;
   font-weight:200;
}
.link {
   color:#ffffff;
   text-decoration:none;
}
.link:hover{
   color:#ffffff;
   text-decoration:none;
}
.pagination {
   position:relative;
   margin:10px 0 0 0;
   top;0;
   padding-top:0;
   padding-bottom:0;
   padding-left:20px;
   padding-right:20px;
   //-webkit-box-shadow: 10px 10px 34px -9px rgba(0,0,0,0.33);
   //-moz-box-shadow: 10px 10px 34px -9px rgba(0,0,0,0.33);
   //box-shadow: 10px 10px 34px -9px rgba(0,0,0,0.33); 
   height:40px;
   width:100%;
   background-color:transparent;
}

/* Productos contenido */

#conte {
   //height:400px;
   //overflow-y: auto;
   -webkit-overflow-scrolling: touch; 
   margin: 0 0 0 0; 
   //background-color:#ffffff;
   padding-bottom:20px;
  
}
#foot {
   padding:2px;
   //margin-bottom:30px;
   background-color:#ffffff;
}
.ft {
   background-color:#ec1e6d;
   color:#ffffff;
   padding:20px;
   margin-right:20px;
   //border-left:1px #ffffff solid;
   //display:inline;
   height:260px;
   font-size:14px;
   -webkit-box-shadow: 10px 10px 34px -9px rgba(0,0,0,0.33);
   -moz-box-shadow: 10px 10px 34px -9px rgba(0,0,0,0.33);
   box-shadow: 10px 10px 34px -9px rgba(0,0,0,0.33); 
   
}
/* fin */

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #edece9;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #edece9;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #edece9;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #edece9;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #ffffff;
}
#car {
   font-size:16px;
   position:fixed;
   top:30px;
   right:10%;
   color:#ffffff;
   background-color:red;
   padding:10px;
   border-radius: 50%;
         -webkit-box-shadow: 10px 10px 34px -9px rgba(0,0,0,0.33);
         -moz-box-shadow: 10px 10px 34px -9px rgba(0,0,0,0.33);
         box-shadow: 10px 10px 34px -9px rgba(0,0,0,0.33); 
   cursor:pointer; 
   display:none;        
   
}
th {
   border:none;
   background-color:#f5f5f5;
   color:#211714;
}


#banner {
   padding-top:10px;
   border:none;
}
   /* Responsive Tables Elite */
   @media only screen and (max-width: 767px) {
   
   /* Force table to not be like tables anymore */
   .rte table, 
   .rte thead, 
   .rte tbody, 
   .rte th, 
   .rte td, 
   .rte input,
   .rte div,
   .rte tr { 
   display: block; 
}
/* Hide table headers (but not display: none;, for accessibility) */
.rte thead tr { 
	position: absolute;
	top: -9999px;
	left: -9999px;
}

.rte tr { border: 1px solid #ccc; }

.rte input div td { 
	/* Behave  like a "row" */
	border: none;
	border-bottom: 1px solid #eee; 
	position: relative;
	padding-left: 50% !important; 
	white-space: normal;
   max-width:90%;		
}

.rte input div td:before { 
	/* Now like a table header */
	position: absolute;
	/* Top/left values mimic padding */
	top: 6px;
	left: 6px;
	width: 45%; 
	padding-right: 0; 
	white-space: nowrap;
	font-weight: bold;
}

/*
Label the data
*/
.rte td:before { content: attr(data-title); }