body {
	font-size: 16px;
	color: #28303a;
	background-color: #003B5C;
  font-family: 'Roboto Flex', sans-serif;
}

/**Header **/
#header-nav {
	background-color: white;
	border-radius: 0;
	border: 0;
}

#logo-img {
	background: url("mps-logo0.png") no-repeat;
	width: 200px;
	height: 50px;
	margin: 10px 0px 5px 10px;
}

.navbar-brand {
	padding-top: 25px;
}

.navbar-brand {
	margin-top: 0;
	margin-bottom: 0;
}

#nav-list {
	margin-top: 10px;
}

#nav-list a {
	color: #28303a;
	text-align: center;
}

#nav-list a:hover {
	background: #d9d9d9;
}

#nav-list a {
	font-size: 110%;
	font-size: 1.2;
}


.navbar-header button.navbar-toggle, .navbar-header .icon-bar {
	background: white;
	border: none;
}

.navbar-header button.navbar-toggle {
	clear: both;
	margin-top: -50px;
}

/* END HEADER */

/* FOOTER */
.panel-footer {
	margin-top: 30px;
	padding-top: 30px;
	padding-bottom: 30px;
	background-color:  #003b5c;
	border-top: 0;
	color: lightgray;
}
.panel-footer div.row {
	margin-bottom: 35px;
}
#hours, #address, #contact-info {
	line-height: 2;
	color: lightgray;
	text-decoration: none;
}
#hours > span, #address > span, #contact-info > span {
	font-size: 1.2em;
	color: lightgray;
	text-decoration: none;
}
#address p {
	color: #557c3e;
	font-size: .8em;
	line-height: 1.8;
}
#contact-info span {
	line-height: 1.8;
	color: lightgray;
	font-size: 1.2em;
}

#contact-info a {
	color: lightgray;
	font-size: 1em;
	line-height: 1.8;
}

#aviso a {
	text-align: center;
	color: lightgray;

}


/* HOME PAGE */
.container .jumbotron {
	box-shadow: 0 0 10px #1a1a00;
	border: 2px solid white;
	border-radius: 0;
}

#nosotros-tile, #productos-tile, #contacto-tile {
  height: 250px;
  max-width: 360px;
  margin-bottom: 15px;
  position: relative;
  border: 2px solid white;
  overflow: hidden;
  margin: 0 auto 15px;
}


#nosotros-tile span, #productos-tile span, #contacto-tile span {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  text-align: center;
  font-size: 1.2em;
  letter-spacing: 4px;
  text-transform: uppercase;
  background-color: #003b5c;
  color: white;
  opacity: .83;

}

#nosotros-tile:hover, #productos-tile:hover, #contacto-tile:hover {
  box-shadow: 0 1px 5px 1px #1a1a00;
}

#nosotros-tile {
  background: url('../images/nosotros-tile.png') no-repeat;
  background-position: center;
}

#productos-tile {
  background: url('../images/productos-tile.png') no-repeat;
  background-position: center;
}

#contacto-tile {
  background: url('../images/contacto-tile.png') no-repeat;
  background-position: center;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* END HOME PAGE */

/* PORTAFOLIO PAGE */

h2 {
	font-size: 1.3em;
	letter-spacing: 1px;
	margin: 5px 5px 25px;
	color: #F2E4D1;
}

.aviso-content {
	font-size: 1.1em;
	margin: 25px 5px 15px;
	color: lightgray;
}


.text-left {
	font-size: 1.1em;
	margin: 25px 5px 15px;
}

.portafolio-proyectos-tile {
	margin-bottom: 25px;
}
.portafolio-proyectos-tile hr {
	width: 80%;
}

.portafolio-proyecto-photo {
	border: 5px solid white;
	overflow: hidden;
	padding: 0;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 20px;
	max-width: 350px;
}

h3.portafolio-proyecto-name-title {
	margin: 5px 5px 0;
	font-size: 17px;
	color: #283c3e;
	letter-spacing: .6px;
}

.proyectos-recientes {
	font-size: 16px;
	margin: 5px 5px 20px;
	font-size: 1.1em;
	letter-spacing: 2px;
	color: #23570f;
	text-align: center;
}

.portafolio-proyecto-type {
	margin: auto 5px auto;
	color: #23570f;
	font-size: 17px;
}

.portafolio-proyecto-date {
	margin: auto 5px auto;
	color: #008080;
	font-size: 17px;
}

.pdf-file {
	letter-spacing: 1px;
}

/* NOSOTROS PAGE */

h2 {
	font-size: 1.3em;
	letter-spacing: 3px;
	margin: 5px 5px 25px;
	color: #F2E4D1;
}

.nosotros-content {
  font-size: 17px;
  color: #B0B0B0;
	letter-spacing: .6px;
	line-height: 1.6;
}

h3.nosotros-type-tile {
	font-size: 16px;
	margin: 5px 5px 0;
	font-size: 1.1em;
	letter-spacing: 2px;
	color: #A8C5A1;
}

.nosotros-consult-list {
	letter-spacing: .5px;
	line-height: 1.6;
}

.type .images {
	border: 5px solid white;
	overflow: hidden;
	padding: 0;
	margin-right: auto;
	margin-left: auto;
	}
/* END NOSOTROS PAGE */

/* SERVICIOS PAGE */
h3.servicios-type-tile {
  font-size: 16px;
	margin: 5px 5px 0;
	font-size: 1.1em;
	letter-spacing: 2px;
	color: #23570f;
}

.servicios-content {
	font-size: 17px;
	letter-spacing: .6px;
	line-height: 1.6;
}

#gastosmedicos-tile, #segurosdevida-tile, #segurosdeviaje-tile, #fondosdeahorroeinversion-tile  {
  height: 250px;
  width: 100%;
  margin-bottom: 15px;
  position: relative;
  border: 2px solid white;
  overflow: hidden;
}

#gastosmedicos-tile span, #segurosdevida-tile span, #segurosdeviaje-tile span, #fondosdeahorroeinversion-tile span {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  text-align: center;
  font-size: 1.1em;
  font-weight: unset;
  letter-spacing: 2px;
  text-transform: uppercase;
  background-color: #003b5c;
  color: white;
  opacity: .9;
}


#gastosmedicos-tile:hover, #segurosdevida-tile:hover, #segurosdeviaje-tile:hover, #fondosdeahorroeinversion-tile:hover  {
  box-shadow: 0 1px 5px 1px #1a1a00;
}

#gastosmedicos-tile {
  background: url('../images/gastosmedicos-tile.png') no-repeat;
  background-position: center;
}

#fondosdeahorroeinversion-tile {
  background: url('../images/fondosdeahorroeinversion-tile.png') no-repeat;
  background-position: center;
}

#segurosdevida-tile {
  background: url('../images/segurosdevida-tile.png') no-repeat;
  background-position: center;
}

#segurosdeviaje-tile {
  background: url('../images/segurosdeviaje-tile.png') no-repeat;
  background-position: center;
}

/* END SERVICIOS PAGE */

/* CONTACTO PAGE */

.contacto-mail {
	font-size: 1em;
	letter-spacing: 1px;
}

.contacto-tel1 {
	font-size: 1em;
	letter-spacing: 1px;
}

.contacto-tel2 {
	font-size: 1em;
	letter-spacing: 1px;
}

.type .images {
	border: 5px solid white;
	overflow: hidden;
	padding: 0;
	margin-right: auto;
	margin-left: auto;
}

/* END CONTACTO PAGE */

/********** Large devices only **********/
@media (min-width: 1200px) {
	.container .jumbotron {
		background: url('../images/jumbotron1200x675px.png') no-repeat;
		height: 630px;
	}

  .container .images {
  	background: url('../images/images545x500px.png') no-repeat;
  	height: 500px;
  }

}

/********** Medium devices only **********/
@media (min-width: 992px) and (max-width: 1199px) {
  /* Header */

  	.container .jumbotron {
		background: url('../images/jumbotron992x558px.png') no-repeat;
		height: 558px;
	}

 		 	.container .images {
  	background: url('../images/images450x500px.png') no-repeat;
  	height: 500px;

}

  }

/********** Small devices only **********/
@media (min-width: 768px) and (max-width: 991px) {
  /* Home Page */

  	.container .jumbotron{
		background: url('../images/jumbotron768px-a.png') no-repeat;
		height: 432px;
}

.container .images {
		background: url('../images/images768x400px.png') no-repeat;
		height: 400px;
}
	}

/********** Extra small devices only **********/
@media (max-width: 767px) {
  /* Header */
  	.container .jumbotron .images {
		margin-top: 10px;
		padding: 0;
	}
  .navbar-brand {
    padding-top: 10px;
    height: 60px;
  }

  #collapsable-nav a {
    font-size: 100%;
  }

  #xs-deliver {
    margin-top: 5px;
    font-size: .7em;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

h3.portafolio-proyecto-name-title {
	margin: 5px 5px 0;
	font-size: 1.1em;
	color: #283c3e;
	text-align: center;
}

.portafolio-proyecto-type {
	margin: auto 5px auto;
	color: #23570f;
	text-align: center;

}

.portafolio-proyecto-date {
	margin: auto 5px auto;
	color: #008080;
	font-size: .9em;
	text-align: center;
}

#hours, #address, #contact-info {
	line-height: 2;
	color: lightgray;
	text-decoration: none;
	text-align: center;
}


}


/******** Super extra small devices Only :-) (e.g., iPhone 4)******/
@media (max-width: 479px) {
.navbar-brand {
	padding-top: 5px;
}

	#servicios-tile, #portafolio-tile, #contacto-tile {
	width:280px;
	margin: 0 auto 15px;
}

h3.portafolio-proyecto-name-title {
	margin: 5px 5px 0;
	font-size: 1.1em;
	color: #283c3e;
	text-align: center;
}

.portafolio-proyecto-type {
	margin: auto 5px auto;
	color: #23570f;
	text-align: center;

}

.portafolio-proyecto-date {
	margin: auto 5px auto;
	color: #008080;
	font-size: .9em;
	text-align: center;
}

#hours, #address, #contact-info {
	line-height: 2;
	color: lightgray;
	text-decoration: none;
	text-align: center;
}

}