* {
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    top:0;
    width: 100%;
    height: 100%;
    margin: 0;
}

h2 {color: #328FCC;
}

h3 {color: #006bb3;
    text-decoration: none;
}

h4 {color: #000;
}

.navbar {
    overflow: hidden;
    background-color: #006bb3;
    font-size:large; 
    position: fixed;
    height: 48px;
    width: 100%;
    top: 0;
    z-index: 4;
}

.navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
}

.navbar a.right {
    float: right;
}

.navbar a:hover {
    background-color: #328FCC;
    color: #FFF;
}

.navbar a.active {
    background-color: #328FCC;
    color: #FFF;
    font-weight: bold;
}

.navbar a.active:hover {
    color: #006bb3;
}

.inicio {
    background-color: #FFF;    
    background: url(logo.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-origin: border-box; 
}

.navbar a.inicio {
    width: 150px;
    height: 48px;
    padding: 5px 140px 10px 10px;
    text-align: left;
    background-color: #FFF;    
    color: rgba(255, 255, 255, 0);
}

.navbar a.inicio:hover {
    color: #328FCC;
}

.contenedor {
    position:relative;
    top:29px;
    min-height: 91.9%;
    min-height: 91.9vh;
    height: auto;
}

.sidebar {
    display: block;
    margin: 0;
    padding: 0px;
    width: 200px;
    background-color: #f1f1f1; 
    position: fixed;
    top: 48px;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.sidebar a {
    display: block;
    color:  #006bb3;
    padding: 16px;
    text-decoration: none;
}

.sidebar a.active {
    background-color: #73b8e6;
    color: #FFF;
    font-weight: bold;
}

.sidebar a:hover {
    background-color: #328FCC;
    color: white;
}

.sidebar a.active:hover {
    background-color: #73b8e6;
    color: #006bb3;
}

.sidebar a.rellena:hover {
    background-color: #f1f1f1;
    cursor: default;
}

#colectores {
   display: block; 
}

#acondicionado {
   display: block;
}

.vinculo {
    color:  #006bb3;
    text-decoration: none;
    display: inline-block;
}	

.vinculo:visited {color:#73b8e6}

.main {   
    position:static;
    top:40px;
    margin:0 0 0 200px;
    background-color: none;
    padding: 0 20px 30px 10px;
}
iframe {
    height:45vh; 
    width:100%;
}


.logoproductos {
    height: 40px;
    float: right;
    margin: 10px 16px 0 0;
}
#describe {
    text-align: justify;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 97%;
    border-bottom: none;
}

tr:nth-child(even){background-color: #f1f1f1}

table th + th { border-left:2px solid #ddd; }

table td + td { border-left:2px solid #ddd; }

th, td {
    text-align: center;
    padding: 8px;
}

/* Chrome & Edge bug */
th {
    background-color: #FFF;
    background-color: rgba(255, 255, 255, 0.89);
    position: static;
    position: -webkit-sticky;
    position: -ms-sticky;
    position: sticky;
    top: 45px;
}

th .nosticky {
    position: static;
}
.caja {
    min-width: 74vw;
}

.bis {
    display:none;
}

.dropper {
    width:75px;
    cursor: pointer;
}

.dropper:hover {
    opacity: 0.75;
    filter: alpha(opacity=75); /* IE8 y anteriores */
}

.dropdown-content {
    display: none;
    position: fixed;
    width:355px;
    max-width:100vm; /* IE9 */
    max-width:100vmin;
    left: 5px;
    bottom: 5px;
    background-color: #fff;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 10;
}

#dropimg {
    width:355px;
    max-width:90vm; /* IE9 */
    max-width:90vmin;
    clear: both;
}

#imgtexto {
   float:left;
   margin-left:40%;
}

#clickcerrar {
   font-size:small;
   color:#aaa;
   margin: 16px 5px 0 0;
   float:right;
}

.show {display: block;}

.pie {
   font-size: small;	
   text-align: right;
   margin: 4px 0 0 0;
}

.flex {
   display:block;
   display:flex;
   display:-webkit-flex;
   flex-wrap: wrap;
   background-color: #fff;
   padding:5px;
   justify-content: space-around;
}

.cajita {
   height:auto;
   min-width:210px;
   min-height:250px;
   width: 20%;
   margin: 5px 5px 10px 5px;
   text-align: center;
}

.servicios {
   display:flex;
   display:-webkit-flex;
  flex-direction: column;
   align-items:center;
   justify-content: space-between;
}

.cajita a{
   text-align: center;
   display: block;
   text-decoration:none;
   margin: 5px;
   color:#006bb3;
}

.cajita a img {
   max-width:200px;
   border: 0;
   margin:0 0 2px 0;
}
.ancha {
   display:block;
   min-width:45%;
   text-align: center;	
}

.footer {
   position: relative;
   bottom: 0px;
   overflow: hidden;
   height: 60px;
   padding: 0px;
   margin: 0;  
   text-align: center;
   color: #006bb3;
   background-image: url("logoa.png");
   background-color: #328FCC;
   background-repeat: no-repeat;
   background-position: 99% 50%;
   background-size: 150px;
   z-index: 2;    
}

.footer a {
   margin:24px;
   color: #006bb3;
   text-decoration:none;
}

#volver {
   display:block;
}

#volver2 {
   display:none;
}

.sinmq {
   display:block;
}

@media only screen {

.sinmq {
   display:none;
}
}

@media screen and (max-width: 900px) {

.contenedor {
   top:0;
   min-height: 90%;
   min-height: 90vh;
}

.sidebar {
   width: 100%;
   height: auto;
}

.sidebar a {
   float: left;
}

.main {
   margin:108px 0 0 0;
   padding:0px 5px 0 5px;
}

.ancha {
   width:auto;
}

th {
   top: 90px;
}
}
@media screen and (max-width: 667px) {

.sidebar {
   -webkit-column-count: 3; /* Chrome, Safari, Opera */
   -moz-column-count: 3; /* Firefox */
   column-count: 3;
   -webkit-column-gap: 0; /* Chrome, Safari, Opera */
   -moz-column-gap: 0; /* Firefox */
   column-gap: 0;
}

.sidebar a {
   text-align: center;
   float: none;
   height: 100%;
   padding: 7px;
}

.contenedor {
   min-height: 91vh;
}

.main {
   margin: 110px 0px 0 0;
}

.caja {
   min-width: 92vw;
   width: 92vw;
}

td {
   padding: 5px;
}

th {
   top: 100px; 
   font-size: 2.15vw;
}

tbody {
   font-size: 2.4vw;
}

.dropper {
   width:11vw;
   max-width:75px;
}
}
@media screen and (max-width: 520px) {

.navbar a { 
   padding: 14px 10px;
    }

.cajita {
   min-width:170px;
   margin: 0px 0px 10px 0px;
}

.cajita a img {
   max-width:170px;
   margin: 0 0 0px 0;
}
}

@media screen and (max-width: 460px) {

.navbar {
   position:relative;
   -webkit-column-count: 2; /* Chrome, Safari, Opera */
   -moz-column-count: 2; /* Firefox */
   column-count: 2;
   -webkit-column-gap: 0; /* Chrome, Safari, Opera */
   -moz-column-gap: 0; /* Firefox */
   column-gap: 0;
   height: 15vh;
}

.navbar a { 
   padding: 2vh 1vw 2vh 1vw;
   font-size: calc(3vh + .5vw);
   float: none;
   height: 7.5vh;
   width: 100%;
}

.inicio {  
   background: url(medlogo.png);
   background-position: center;
   background-size: contain;
   background-height: 7.5vh;
   background-repeat: no-repeat;
   background-origin: border-box; 
}

.navbar a.inicio {
   height: 7.5vh;
   width: 100%;
   padding: 5px 1vw 1vh 5px;   
}

.navbar a.right {
    float: none;
}

.sidebar {
   position: relative;
   top: 0vh;
   height: 10vh;
}

.sidebar a {
   padding: calc(1vh + 0.2vw) 0 0;
   font-size: calc(1.4vh + 1.3vw);
   float: none;
   height: 5vh;
}

.contenedor {
   min-height: 79vh;
   height: 79vh;
}

.main {
   padding:0 2vw 2vh 2vw;
   margin:2vh 0 0 0;
   line-height: 75%;
   height: 69vh;
}


h2 {margin:1vh}
	
h3 {
   margin:.5vh;
   font-size: 5vw;
}

h4 {margin:1vh}

.producto {
    height: 100px;
}
.logoproductos {
    height: 40px;
    float: right;
    margin: 0px 16px 0 0;
}

.caja {
   width: 95vw;		
   height: 55vh;
   overflow: auto;
}

.bis {   
   display:table-cell;
}

th {
   top: 0px;
   font-size: 3vw;
}

tbody {
   line-height: 100%;
   font-size: 3.5vw;
}
.vinculo{
   display: inline-block;
   margin: 0 20px;
   padding:5px;
   border: 1px solid #f1f1f1;
}	
.dropper {
   width:20vw;
   max-width:75px;
}

.dropdown-content {
   left: 0;
   bottom: 0;
}

#dropimg {
   max-width: 100vw;
}

.cajita {
   height:auto;
   min-height:0px;
   min-width:40vw;
   margin: 15px 0 15px 0;
   border: 3px solid #f1f1f1;
}

.cajita a img {
   max-width:30vw;
}

.footer {
   height: 6vh;
   padding: 1vh;
   background-size: 25vw;
}

.footer a{
   margin: 1vh;
}

#volver {
   display:none;
}

#volver2 {
   display:block;
}
}