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

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

#logo-img {
	background: url("sepya-logo.png") no-repeat;
	width: 108px;
	height: 50px;
	margin: 7px 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: #002e40;
	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 */



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

#nosotros-tile, #portafolio-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, #portafolio-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: #002e40;
  color: white;
  opacity: .90;

}

#nosotros-tile:hover, #portafolio-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;
}

#portafolio-tile {
  background: url('../images/portafolio-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: #11306C;
}

.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: #11306C;
}

.nosotros-content {
  font-size: 17px;
	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: #23570f;
}

.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;
}

#asesoriatecnica-tile, #evaluaciondeprogramasypresupuestos-tile, #evaluacionfisicayoperacional-tile, #ingenieriaindependiente-tile, #supervisiondeobra-tile, #rehabilitaciondenavesindustriales-tile, #viviendasobrepedido-tile, #asesoriaenasociacionespublicoprivadas-tile  {
  height: 250px;
  width: 100%;
  margin-bottom: 15px;
  position: relative;
  border: 2px solid white;
  overflow: hidden;
}

#asesoriatecnica-tile span, #evaluaciondeprogramasypresupuestos-tile span, #evaluacionfisicayoperacional-tile span, #ingenieriaindependiente-tile span, #supervisiondeobra-tile span, #rehabilitaciondenavesindustriales-tile span, #viviendasobrepedido-tile span, #asesoriaenasociacionespublicoprivadas-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: #002e40;
  color: white;
  opacity: .9;
}


#asesoriatecnica-tile:hover, #evaluaciondeprogramasypresupuestos-tile:hover, #evaluacionfisicayoperacional-tile:hover, #ingenieriaindependiente-tile:hover, #supervisiondeobra-tile:hover, #rehabilitaciondenavesindustriales-tile:hover, #viviendasobrepedido-tile:hover, #asesoriaenasociacionespublicoprivadas-tile:hover  {
  box-shadow: 0 1px 5px 1px #1a1a00;
}

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

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

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

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

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

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

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

#viviendasobrepedido-tile {
  background: url('../images/viviendasobrepedido-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;
}

#contactoweb-tile {
  height: 250px;
  width: 95%;
  margin: 10px 10px 10px 10px;;
  position: relative;
  border: 2px solid white;
  overflow: hidden;
}

#contactoweb-tile span {
  position: absolute;
  bottom: 10;
  right: 10;
  width: 100%;
  text-align: center;
  font-size: 1.4em;
  letter-spacing: 2px;
  text-transform: uppercase;
  background-color: #88A233;
  color: white;
  opacity: .9;
}

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

/* 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;
  }

}

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

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

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

}



/********** 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) {

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

.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;
}

}