html, body { font-family: 'Roboto', 'Helvetica', sans-serif; margin: 0; padding: 0;}
.font {font-family: 'Raleway', sans-serif;}
body {margin: 0;}
/* Disable ugly boxes around images in IE10 */
a img{border: 0;}
a {color: inherit; text-decoration: none; }
::-moz-selection, .st-layout__header {background-color: #263238;color: #fff;}
::selection {background-color: #263238; color: #fff;}

/*---------------------------------------------------------- st DEFAULT ----------------------------------------------------------*/

/*NAV*/
.material-icons {color: #0448FF;} /*Boton del navbar*/
.material-icons--space {margin-right: 10px;}
.st-nav-bar--height {height: 70px;}

/*GENERALES*/
.color-0 {color: #fff;}
.color-1 {color: #0448FF !important;}
  .color-1__2 {color: #9C27B0 !important;}
.color-2 {color: #666 !important;}
.color-3 {color: #aaaaaa !important;}
.color-4 {color: #daebf9 !important;}
.color-5 {color: rgba(0,0,0,.87) !important;}
.color-6 {color: #8485B3 !important;}

.bg-0 {background-color: #fff;}
  .bg-0__1 {background-color: rgba(255, 255, 255, .9);}
.bg-1 {background-color: #91a9b6;}
.bg-2 {background-color: #211A1E;}
.bg-3 {background-color: #9C27B0;}
.bg-4 {background-color: #F9F9F9;}

.deg-1 {background: linear-gradient(180deg, #60C9E3 , #4CAAF4);}
.deg-2 {background: linear-gradient(180deg, #995fa3 , #8a89c0);}
.st-border-1 {border: 1px solid #fff;}
.st-border-2 {border: 1px solid #9C27B0;}
  .st-border-2__1 {border: 1px solid #8CFF17;}
  .st-border-2__bold {border: 2px solid #0448FF;}
  .st-border-2__bold--bottom {border-bottom: 5px solid #8CFF17;}

.bg-img--1 {background: url('../images/bg-header.jpg') center / cover;}

.st-border-color--none {border-color: #b2cede !important;}

.st-center {text-align: center;}
.st-left {text-align: left;}
.st-right {text-align: right;}
.st-justify {text-align: justify;}
.st-center-margin {margin: 0 auto;}

.st-h5 {font-size: 20px; line-height: 20px;}
.st-h4 {font-size: 24px; line-height: 32px;}
.st-h3 {font-size: 34px; line-height: 40px;}
.st-h2 {font-size: 45px; line-height: 48px;}

.st-font-weight--300 {font-weight: 300;}
.st-font-weight--400 {font-weight: 400;}
.st-font-weight--500 {font-weight: 500;}
.st-font-weight--600 {font-weight: 600;}

.st-button--hover:hover {background-color: #039BE5; color: #fff;}
.st-button--hover-2:hover {background-color: #f44336; color: #fff;}
.st-button__big {padding: 20px 20px 35px 20px;}
.st--form {padding: 5px 40px 20px 40px; margin: 3rem 0;}
  .st--form__height {height: 43rem;}

.st-height--header {min-height: 45rem;}

.st-uppercase {text-transform: uppercase;}
.truncate {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.st-img-responsive {height: auto; max-width: 100%;}

.st-inline {display: inline-block;}

.st-parrafo {font-size: 16px;}
.st-parrafo__2 {font-size: 1.05rem;}

/*PADINGS*/
.st-padding--0 {padding: 0;}
.st-padding--5 {padding: 5px;}
.st-padding--20 {padding: 20px;}
.st-padding--30 {padding: 30px;}
.st-padding--lr__20 {padding: 0 20px;}
.st-padding--lr__30 {padding: 0 30px;}
.st-no-padding--left {padding-left: 0;}
.st-padding-tb--30 {padding: 30px 0 !important;}

/*MARGINS*/
.st-margin--0 {margin: 0;}
.st-margin-top--0 {margin-top: 0px;}
.st-margin-top--40 {margin-top: 40px;}
 .st-margin-top--20 {margin-top: 20px;}
.st-margin-top--120 {margin-top: 120px;}
.st-margin--bottom-0 {margin-bottom: 0px;}
.st-margin--bottom-5 {margin-bottom: 5px;}
 .st-margin--top--20 {margin-top: -20px;}
 .st-margin--top--40 {margin-top: -40px;}
.st-margin-bottom-10 {margin-bottom: 10px;}
 .st-margin-bottom-30 {margin-bottom: 30px;}
.st-margin--rl-5 {margin: 0 5px;}
.st-margin--rl-10 {margin: 0 10px;}
.st-margin--rl-15 {margin: 0 15px;}
.st-margin-tb--30 {margin: 30px 0;}
.st-margin-tb--10 {margin: 10px 0;}
.st-padding-top--10 {padding-top: 10px;}

/*BORDERS*/
.st-border {border: 1px solid rgba(0,0,0,.12);}
.st-border--bottom {border-bottom: 1px solid rgba(0,0,0,.12);}

/* Rules for sizing the icon. */
.material-icons--md-18 { font-size: 18px; }
.material-icons--md-24 { font-size: 24px; }
.material-icons--md-36 { font-size: 36px; }
.material-icons--md-48 { font-size: 48px; }

/*FORM*/
.st-textfield--floating-label.is-invalid .st-textfield__label {font-size: inherit; color: rgba(0,0,0,.26);}
.st-textfield.is-invalid .st-textfield__input {border-color: rgba(0,0,0,.12)}

/*CONTACT*/
#map {width: 100%; height: 30rem !important;}


.demo-card-square.mdl-card {
  width: 100%;
}

.mdl-card__title { height: 220px;}
.mdl-card__title_1 { background:url('../images/caracteristicas/imagen-1.jpg') center / cover no-repeat #46B6AC;}
.mdl-card__title_2 { background:url('../images/caracteristicas/esterilizacion-imagen.jpg') center / cover no-repeat #46B6AC;}
.mdl-card__title_3 { background:url('../images/caracteristicas/empaque.jpg') center / cover no-repeat #46B6AC;}
.mdl-card__title_4 { background:url('../images/caracteristicas/suvidad.jpg') center / cover no-repeat #46B6AC;}
.mdl-card__title_5 { background:url('../images/caracteristicas/repelente.jpg') center / cover no-repeat #46B6AC;}
.mdl-card__title_6 { background:url('../images/caracteristicas/antiestatica.jpg') center / cover no-repeat #46B6AC;}

/* The element to apply the animation to */
.clientes {
  width: 100%; height: 100px;
  background-image: url("../images/clientes-blife.jpg");
  background-repeat: no-repeat;
  background-position: 0%;
  animation: example 60s infinite linear;
}


/* The animation code */
@keyframes example {
    0%  {background-position: 0%;}
    50% {background-position: 100%;}
    100%  {background-position: 0%;}
}

@-webkit-keyframes example {
    0%  {background-position: 0%;}
    50% {background-position: 100%;}
    100%  {background-position: 0%;}
}


/* Paste this css to your style sheet file or under head tag */
/* This only works with JavaScript, 
if it's not present, don't show loader */
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(../images/logo-shermo-medical.jpeg) center no-repeat #fff;
}