/* Reseteado del html  */ 

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display:block;
}

nav ul, nav li { margin: 0; }
nav ul, ul { list-style:none; }

/* Fin del reseteado del html  */ 


/* ESTILOS */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {

    -webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
    box-sizing:border-box;
}
	
body, input, select, textarea {
  background: #fff;
  color: white;
  font-family: 'Georgia', serif;
  line-height: 2em;
}

a, input {
	color: inherit;
}

strong, b {

	font-weight: 700;
}

p, label {
    line-height: 1.4em; /* 21 / 14 */
	font-family: 'Georgia', serif;
}

h1, h2, h3, h4, h5, h6 {
color:white;
line-height: 1.5em;
font-family: 'Cinzel', serif;
font-weight:100;
letter-spacing: -20;
}	

h1{
font-size: 2.7em;
}

h2 {
font-size: 1.5em;
}

sup { 
    vertical-align: super;
    font-size: smaller;
}

/* BANNER */

#banner {
		background-image: url("images/overlay.png"), url("images/cloud10.jpg");
		background-position: center top;
		background-size: cover;
		text-align: center;
		margin: 0 auto;
		hola yellow;
	}

/* BANNER HEADER*/

#banner .header {
	background-color: rgba(0, 0, 0, 0.2);
	position:absolute;
	width:100%;
	padding: 0.7em 1.2em 0.7em 1.2em;
	hola orange;
}

/* LOGO */

#banner .header .logo {
	float:left;
	text-align: left;
	padding-top:0.2em;
}

#banner .header .logo h1 {
	font-size: 1em;
	line-height: 0.9em;
	hola aqua;
}  

#banner .header .logo h2 {
	font-size: 0.7em;
	hola green;
}  
	
/* NAVIGATION */

#banner .header nav{
  float:right;
  hola aqua;
}

#banner .header nav ul{
  width: 100%;
}

#banner .header nav ul li{
  text-align: center;
  display: inline-block;
  border: solid 1px transparent;
  background-color:rgba(0, 0, 0, 0.1);
}

#banner .header nav a{
  display: block;
  margin: 0 15px 0 15px;
  text-decoration: none;
  color:white;
}

#banner .header nav ul li:hover {
	border: solid 1px white;
	background-color:rgba(0, 0, 0, 0.3);
}

/* BANNER CONTAINER */

#banner .bannner-block {
		display: inline-block;
		margin: 10% 15% 3% 15%;
		padding: 5%;
		background-color:rgba(0, 0, 0, 0.2);
		hola bisque;
		}

#banner .bannner-block h1 {
		font-size: 1.5em;
		line-height: 2em;
		text-align:center;
		hola blue;
		}
		
#banner .bannner-block h2 {
		margin-bottom: 0.8em;
		hola blueviolet;
		}
		
#banner .bannner-block p {
		font-size: 1.1em;
		text-indent: 20px;
		line-height: 2em;
		text-align:center;
		hola cyan;
}		

/* ROWS */

.row {
	padding-top:10px;
	hola chartreuse;
}

.row h1 {
	font-size: 2em;
	text-align:center;
	margin: 3% 20% 3% 20%;
	color: #666;
	hola chocolate;
}

.row h2 {
	font-size: 2em;
	text-align:left;
	margin: 3% 20% 3% 20%;
	color: #666;
	hola crimson;
}

.row p {
	font-size: 1em;
	margin: 0 20% 20px 20%;
	text-indent: 20px;
	text-align: justify;
	color: #666;
	line-height: 1.7em;
	hola cyan;
}

.row a {
	font-weight: bold;
	text-decoration:none;
}

.blanco {
	background-color: #fff;
}
		
.gris {
	background-color: #eaeaea;
}

.barracontainer {
	text-align:left;
	width:100%;
	height:46px;
	position: relative;
	padding: 0;
	margin-top: 5%;
	hola cadetblue;
}

.barracontainer img {
	width:100%;
	height:100%;
	position:absolute;
}

/* DATOS UBICACION */

.datosubic {
		background-color:rgba(0, 0, 0, 0.5);
		padding:2%;
		text-align:center;
		margin: 5% 5% 0 5%;
		overflow:auto;
		hola darkgreen;
		}

.datosubic h1 {
	margin: 0;
	color: white;
	margin: 0% 15% 0 15%;
}

.ubic-contacto {
	padding: 1% 2% 1% 2%;
	background-color:rgba(3, 107, 176, 0.3);
	margin: 5px 20% 5px 20%;
	hola yellow;
}

.ubic-contacto  p, .ubic-contacto  a {
	text-align:center;
	margin-bottom: 0;
	font-size: 1em;
	hola darkorange;
}

.ubic-contacto h3 {
	margin: 2% 0 2% 0;
	font-size: 1.5em;
	color:white;
}

.ubic-contacto  i {
	font-size: 1em;
	Color: #0385dc;
}

.fondomapa {
	background-image: url("images/overlay.png"), url("images/mapaconsultorio.jpg");
	background-position: center center;
	background-size: cover;
	margin-top:5%;
	hola darkred;
}


/* FOOTER */

.footer p {
	
	font-family: 'Georgia', serif;
	font-size: 0.8em;
	margin: 0 20% 0 20%;
	text-align: center;
	color: #666;
	line-height: 1.2em;
	hola cyan;
}

/* REFERENCIAS */

.referenciacontainer {
	margin: 5% 20% 0 20%;
	text-align:center;
	border: hola red;
	overflow:auto;
	clear:both;
}

.referenciahalf-left {
	float:left;
}

.referenciahalf-right {
	float:right;
}
.referenciahalf-left, .referenciahalf-right {
	width: 49%;
	display: inline-block;
}

.referenciahalf-left p, .referenciahalf-right  p {
	font-size: smaller;
	margin:0;
	text-align: left;
	text-indent: 0;
}

.referenciahalf-left a, .referenciahalf-right a {
	font-weight: normal;
	}

/* En la ubicacion (datosubic), para incorporar un mapa o una imagen, lo cual es bastante complejo

.row .datosubic {
		background-color:rgba(0, 0, 0, 0.5);
		margin: 0 20% 0 20%;
		display:flex;
		position:relative;
		margin-bottom:20px;
		}

.row .rowhalf {
	display: inline-block;
	padding: 10px;
	hola yellow;
}

.row .rowhalf  p, .row .rowhalf  i {
	font-size: 1.2em;
	margin: 0 0 0 5px;
	padding: 0;
	display:inline-block;
	color: white;
	width: auto;
	text-indent:0;
	hola red;
}

.row .rowhalf img {
	max-width: 100%;
	max-height: 100%;
	display:inline-block;
	vertical-align:middle;
	hola green;
}

.row .rowhalf iframe {
	width: 400px;
	height: 400px;
	display:inline-block;
	vertical-align:middle;
	hola green;
}

 */

/* Asi se cita para el blockquote en el HTML

<blockquote>"La forma mas común de desesperación es no ser quien eres"
<cite>Søren Kierkegaard</cite>
</blockquote>

 */

/*
blockquote {
display: block;
content: "\201C";
float:right;
color: #7a7a7a;
max-width:400px;
font-size: 20px;
border-left: 5px solid grey;
position:relative;
line-height: 1em;
margin: 20px 20px 20px 10%;
font-weight: 700;
padding:20px;
letter-spacing: 1.2px;
background: url(images/qmarksa.png) top left no-repeat;
}

blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}

 */

/* MEDIA QUERIES */

@media screen and (max-width: 1180px){

#banner .header {
	background-color: rgba(0, 0, 0, 0.3);
}

#banner .header .logo {
	float:none;
	text-align: center;
	padding:1%;
}
#banner .header .logo h1 {
	width:100%;
	hola aqua;
}  

#banner .header .logo h2 {
	width:100%;
	hola green;
}  

#banner .header nav {
  width:100%;
  hola aqua;
}

#banner .bannner-block {
		margin: 12% 10% 3% 10%;
		font-size: 1.1em;
}
		
.row {
	padding-bottom: 20px;
	border-bottom: 1px solid #0385dc;
}

.row p, .row h1, .row h2, .datosubic {
	margin: 3% 10% 3% 10%;
}

.barracontainer {
	display: none;
}

.datosubic {
		margin: 0;
}

.ubic-contacto {
	float:none; 
	margin: 5px 15% 5px 15%;
	display:block;
	width:auto;
	font-size: 1em;
	line-height: 1.5em;
	hola green;
}

@media screen and (max-width: 1000px){

#banner .header {
	padding: 0;
}


#banner .header .logo {
	background-color:rgba(0, 0, 0, 0.3);
	padding: 2%;
}

#banner .header nav {
	display:none;
}

#banner .bannner-block  {
	margin: 0;
	padding:5%;
	width:100%;
	font-size: 1em;
}

#banner .bannner-block h1 {
	margin: 6% 10% 0 10%;
}

#banner .bannner-block p {
	margin: 0 10% 20px 10%;
	text-align: justify;
	line-height: 1.7em;
}

.row h1, .row h2 {
font-size: 1.5em;
}
	
.datosubic {
	padding:0;
}

.ubic-contacto {
	margin: 5px 0 5px 0;
	width:100%;
	font-size: 1em;
	hola green;
}

.referenciacontainer {
	margin: 5% 0 0 0;
}

.referenciahalf-left, .referenciahalf-right {
	display:block;
	float: none;
	width: 100%;
}

@media screen and (max-width: 750px){

#banner .bannner-block h1 {
	margin-top: 7%;
}
	
.row h2 { 
	text-align:center;
	}

@media screen and (max-width: 640px){

#banner .header .logo {
	padding: 5%;
}

#banner .bannner-block h1 {
	margin-top: 15%;
}

@media screen and (max-width: 530px){

#banner .bannner-block h1 {
	margin-top: 17%;
}

@media screen and (max-width: 400px){

#banner .bannner-block h1 {
	margin-top: 20%;
}