/* Configuracion inicial del css */
* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

/* 1rem igual a 10px */
html {
   font-size: 62.5%;
}

/* Tamano del header */
header {
   width: 100%;
   height: 82.5rem;
}


/* Imagen banner de inicio */
 .header-main-pic {
   background-image: url(../img/trasformacion_digital_3.jpg);
   background-repeat: no-repeat;
   background-position: bottom;
   background-position-y: 12rem;
   background-size: cover;
   width: 100%; 
 }

/* tamano y color de la barra de navegacion */
 nav {
   margin: 0rem;
   padding: 0rem;
   height: 15.5rem;
   box-shadow: none;
 }

 /* Margen del lado derecho de barra de navegacion */
 nav .nav-wrapper {
   padding-right: 4rem;
   margin: 0rem;
 }

/* Tamano de nombre de la empresa */
 nav a.brand-logo.left {
   margin: 1rem;
 }

 /* Estilos de imagen de barra de navegacion */
 nav img {
   width: 20rem;
   height: 10rem;
   margin-top: 0rem;
   margin-left: 4rem;
   padding-top: 1rem;
   padding-bottom: 0rem;
 }

 /* Tamano de fuente de menus de navegacion */
 header nav a {
   font-size: 2rem;
   margin-top: 3rem;
   margin-bottom: 2rem;
   margin-right: 2rem;
   margin-left: 2rem;
   padding-left: 0rem;
   padding-right: 0rem;
   color: #00bcd4 ;
 }

 /* Tamano de iconos de barra de navegacion */
 header nav .material-icons {
   font-size: 4rem;
   margin: 0.5;
   padding: 0;
 }


 /* Etilos dropdown Soluciones */
 li.dropdown-trigger ul.dropdown-content {
   margin-top: 2rem;
 }

 ul.dropdown-content li a {
   margin: 0rem;
   padding-left: 0.75rem;
   color: #00bcd4;
 }

 ul.dropdown-content i.material-icons {
   margin-right: 1rem;
 }
 

 /* Tamanos del iconos de "MENU" (hamburgueza) cuando es responsive */
 header nav a.sidenav-trigger i {
   font-size: 5rem;
   margin: 3rem;
 }

/* Estilos de items de barra de navegacion resposive*/
 header nav .sidenav a {
   font-size: 2rem;
   margin: 1rem;
   padding: 0rem;
   color: #00bcd4;
 }

 /* estilos de iconos de la barra de navegacion resposive */
 header nav .sidenav i.material-icons {
   font-size: 4rem;
   margin-right: 2.5rem;
   color: #00bcd4;
 }


/*boton de conecta con nosotros*/
article.header-main button {
   margin-top: 15rem;
}

/*Transformado tus ideas digitalemte*/
article.header-main h2{
   margin-top: 20rem;
}


/* Consultoria Desarrollo Imprementación */
article.banner-desarrollo {
   margin-top: 0rem;
   padding-top: 3.5rem;
   height: flex;
   background-color: whitesmoke;
   text-align: center;
}

article.banner-desarrollo h2.primero {
   margin: 0rem;
   padding-top: 2rem;
   color: #2196f3;
   font-size: 3rem;  
   font-style: italic;
   font-weight: 600;
   font-weight: lighter;
}

article.banner-desarrollo h2.segundo {
   margin: 0rem;
   padding-top: 2rem;
   color: orange;
   font-size: 3rem;  
   font-style: italic;
   font-weight: 600;
   font-weight: lighter;
}

article.banner-desarrollo h2.tercero {
   margin: 0rem;
   padding-top: 2rem;
   color: green;
   font-size: 3rem;  
   font-style: italic;
   font-weight: 600;
   font-weight: lighter;
}


/* Soluciones */
article.soluciones div.row {
   padding: 0rem;
   margin: 0rem;
}

article.soluciones {
   background-color: white;
   margin-top: 2rem;
   padding-top: 2rem;
}

article.soluciones div.card {
   background-color: white;
   box-shadow: none;
   height: 65rem;
}

article.soluciones h2 {
   text-align: center;
   margin: 0rem;
   padding: 0rem;
   color: gray;
   font-weight: lighter;
   font-style: italic;
}

article.soluciones h4 {
   text-align: center;
   color: gray;
}

article.soluciones img {
   height: 10rem;
   width: 12rem;
}

article.soluciones p {
   padding: 2rem;
   margin: 2rem;
   font-size: 1.5rem;
   text-align: justify;
   color: grey;
}

article.soluciones li {
   font-size: 1.5rem;
   margin-bottom: 1.5rem;
   text-align: left;
   margin-left: 3rem;
   color: grey;
}

article.soluciones ul li i.material-icons {
   color: grey;
   margin-right: 1rem;
}

article.soluciones a.waves-effect.waves-light.btn.left.blue {
   margin-left: 3rem;
}

article.soluciones a.waves-effect.waves-light.btn.left.orange {
   margin-left: 3rem;
}

article.soluciones a.waves-effect.waves-light.btn.left.green {
   margin-left: 3rem;
}


/* Industrias a las que Servimos */
article.servimos {
   margin-top: 2rem;
   padding-top: 2rem;
   background-color: whitesmoke ;
}

article.servimos h3 {
   color: #2196f3;
   text-align: center;
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
   /*font-weight: lighter;*/
}

article.servimos div {
   text-align: center;
}

article.servimos i.material-icons {
   color: #2196f3 ;/*#1e88e5;*/
   padding: 0rem;
   
}

article.servimos h5 {
   color: #2196f3;/*#1e88e5;*/
   text-align: center;
   font-weight: lighter;
}


/* NUESTROS VALORES */
article.valores div.row{
   margin: 2rem;
   padding: 1rem;
}

article.valores {
   background-color: white;
}

article.valores div.col.s12.m6.xl3 {
   padding-bottom: 4rem;
}

article.valores h3 {
   color: #2196f3;
   text-align: center;
   padding: 4rem;
}

article.valores div.row {
   margin: 0rem;
   padding: 0rem;
}

article.valores p {
   color: gray;
   text-align: left;
   font-size: 1.5rem;
}

article.valores div.card {
   color: gray;
   font-size: 1.5rem;
   box-shadow: none;
   background-color: white;
} 

article.valores div.center.card-content {
   padding-bottom: 5rem;
   padding: 0.5rem;
}

article.valores div.card:hover {
   color: #2196f3;
} 

article.valores div.card img {
   height: 8rem;
   width: 10rem;
}


/* NUESTRA FORMA DE TRABAJAR*/
article.forma div.row {
   margin: 2rem;
   padding: 1rem;
}

article.forma {
   background-color: whitesmoke;

}

article.forma div.col.s12.m6.xl3 {
   padding-bottom: 5rem;
}

article.forma h3 {
   color: #2196f3;
   text-align: center;
   padding: 6rem;
}


article.forma div.row{
   margin: 0rem;
   padding: 0rem;
}

article.forma p {
   color: gray;
   text-align: left;
   font-size: 1.5rem;
}

article.forma div.card {
   color: gray;
   font-size: 1.5rem;
   box-shadow: none;
   background-color: whitesmoke;
}

article.forma div.center.card-content {
   padding-bottom: 5rem;
   padding: 0.5rem;
}

article.forma div.card:hover {
   color: #2196f3;
}

article.forma div.card img {
   height: 6rem;
   width: 7rem;
}

/* Contactanos */
article.contacto div.row {
   padding: 0rem;
   margin: 0rem;
}

article.contacto {
   margin: 0rem;
   padding: 0rem;
   background-color: #2196f3;
   height: flex;
}

article.contacto div.card {
   height: 13rem;
   margin-bottom: 3rem;
   background-color: #2196f3;
   box-shadow: none;
}

article.contacto div.card.contact {
   margin-top: 3rem;
   height: 8rem;
   /*width: 30rem;*/
   background-color: whitesmoke;
   box-shadow: none;
   border-radius: 1rem;
}

article.contacto a i.material-icons.left {
   color: #2196f3;
}

article.contacto div.center.card-content {
   font-size: 2rem;
   color: #2196f3;
}

article.contacto h4 {
   color: white;
}


/* Clientes */
article.clientes div.row {
   margin: 0rem;
   padding: 0rem;
}

article.clientes h3.center {
   color: #2196f3;
   padding-top: 5rem;
   margin-bottom: 6rem;
}

article.clientes div.card {
   background-color: white;
   height: 10rem;
   width: 100%;
   box-shadow: none;
}

article.clientes div.card-content {
   padding: 1.5rem;
}

article.clientes img {
   height: 7rem;
   width: 25rem;
}

/* FOOTER */
footer.page-footer {
   font-size: 40rem;
   margin: 0rem;
   padding-top: 7rem;
   font-size: 2rem;
   background-color: #546e7a;
}

 div.row {
    padding-bottom: 6rem;
 }

footer.page-footer li {
   font-size: 1.5rem;
   padding: 1rem;
}

footer.page-footer img.responsive-img {
   margin: 2rem;
   height: 10rem;
   width: 10rem;
}

footer div.footer-copyright {
   height: 6rem;
   font-size: 1.5rem;
}

i.material-icons.prefix {
   font-size: 3rem;
}
