body,html {height: 100%; font-family: 'Roboto', sans-serif}
/* FONTS*/
h1, h2, h3, h4, h5, h6 { font-family: 'Nunito', sans-serif;}
p {font-family: 'Roboto', sans-serif;}
a, li, ul {font-family: 'Roboto', sans-serif;}
/* TAB*/
.tab {overflow: hidden;border: 1px solid #ccc;background-color: #f1f1f1;}
.tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 15px 10px; transition: 0.3s; }
.tab button:hover { background-color: #ddd; }
.tab button.active { background-color: #ccc; }
.tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; }
/*MENU*/
.topnav { overflow: hidden; background-color: #001a5a;}
.topnav a { width: inherit; float: left; display: block; color: #f2f2f2; text-align: center; text-decoration: none; padding: 10px; font-size: 17px;}
.topnav a:hover { background-color: #ddd; color: black; width: inherit;}
.topnav a.active {background-color: white; color: white; width: auto;}
.topnav .icon {display: none;}
/*COLORS*/
.h-resize { height: 450;}
.hero { background-image: url(imgs/logo.webp); min-height: 50px; background-size: contain; position: inherit; width: 145px; background-repeat: no-repeat;}
.list-group-item.active { background-color: #001a5a;}
.hr2 {height: 2px !important; opacity: 1; width: 50%;}
/*BUTTONS*/
 button:disabled { opacity: 0.5; background: #333; cursor: default;color: white;}
.border-end { border-right: 1px solid #4CAF50!important; color: #4CAF50!important;}
.button-mation { display: inline-block; border-radius: 4px; background-color:#001a5a; border: none; color: #FFFFFF; text-align: center; font-size:17px; padding: 10px; width: 130px; transition: all 0.5s; cursor: pointer; margin: 5px;}
.button-mation span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s;}
.button-mation span:after {content: '\00bb';position: absolute;opacity: 0;top: 0;right: -20px;transition: 0.5s;}
.button-mation:hover span {padding-right: 25px;}
.button-mation:hover span:after {opacity: 1; right: 0;}
/*resize*/
.h-size { height: 480px; }
.slidelt {height: auto}
.r-sizer {width: 65%}
img.resize { height: 50px;}
.h-700 { height: 700;}
.h500 { height: 500px;}
.i-resize {width: 50}
.h-auto { height: 65px !important;}
.h200 { height: 200; }
/*align*/
.v-a { display: flex !important; align-items: center;}
/*linea*/
.linea:after {content: ''; width: 40%; position: absolute; height: 3px;background: white;right: 0;}
.linea:before {content: ''; width: 40%; position: absolute; height: 3px; background: white; left: 0;}
/*divisiones*/
.img-ganika1 { background-color: white; background-image: url(imgs/logo-ganika.webp); height: 240px; background-size: cover; background-position: center; position: relative; background-repeat: no-repeat;}
.img-ganika1:hover {opacity: 0;}
.img-ganika2:hover {background-image: url(imgs/ganika.webp);background-size: contain;height: 240;background-position-x: center;}
.img-limpijal1 { background-color: white; background-image: url(imgs/logo-limpijal.webp); height: 240px; background-size: contain; background-position: center;position: relative; background-repeat: no-repeat;}
.img-limpijal1:hover {opacity: 0;}
.img-limpijal2:hover {background-image: url(imgs/limpijal.webp);background-size: contain;height: 240;background-position-x: center;}
.img-quimicar1 { background-color: white; background-image: url(imgs/logo-quimicar.webp); height: 240px; background-size: contain; background-position: center;position: relative; background-repeat: no-repeat;}
.img-quimicar1:hover {opacity: 0;}
.img-quimicar2:hover {background-image: url(imgs/quimicar.webp);background-size: contain;height: 240;background-position-x: center;}
/*funciones*/
.top{ display: none; padding: 15px; background: #4CAF50; color: white; cursor: pointer; position: fixed; bottom: 95px; right: 20px; font-size: 25px;}
/*responsive sizes*/
@media screen and (max-width:500px) {
  .topnav a.active { background-color: white; color: white; width: 40%;}
}
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon { float: right; display: block;}
  .carousel-inner { height: 215px; }
}
@media screen and (max-width: 600px) {
  .h-size { height: auto; }
  .v-a { display: block !important; align-items: center;}
  .h-700 { height: auto;}
  .linea:after {content: ''; width: 30%}
  .linea:before {content: ''; width: 30%}
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon { position: absolute; right: 0; top: 0;}
  .topnav.responsive a { float: none; display: block; text-align: left; width: inherit; text-align-last: center;}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  .h200 { height: 125px !important; }
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  .h200 { height: 160px !important; }
}
@media (min-width: 800px) {

}
@media only screen and (max-width:1200px) {

}
@media (min-width: 1900px) {

 }