/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
*{
	padding: 1;
	margin: 0;
}

body{
    		background: -webkit-linear-gradient(left,  #CCFFFF, 	#9999FF); /* sintaxis para safari*/
    		background: -o-linear-gradient(right,  #CCFFFF, #9999FF); /* sintaxis para opera */
    		background: -moz-linear-gradient(left,  #CCFFFF, #9999FF); /* sintaxis para firefox */
    		background: linear-gradient(to right,  #CCFFFF, #9999FF); /* sintaxis standar */
    		background-color: #9999FF; /* background por defecto por si no carga el degradado*/
}

header{
	width: 100%;
	height: 80px;
	text-align: center;
	background: -webkit-linear-gradient(left,  #FFDEAD, 	#FFF8DC); /* sintaxis para safari*/
  background: -o-linear-gradient(right,  #FFDEAD, #FFF8DC); /* sintaxis para opera */
  background: -moz-linear-gradient(left,  #FFDEAD, #FFF8DC); /* sintaxis para firefox */
  background: linear-gradient(to right,  #FFDEAD, #FFF8DC); /* sintaxis standar */
  background-color: #FFDEAD; /* background por defecto por si no carga el degradado*/
	
	
}

font-face {
    font-family: 'fira';
    src: url('FiraSansOT-Light.otf');
}

h1{
	font-family: 'Lobster', sans-serif;
	text-indent: 1em;
}

h2{
	font-family: 'Gloria Hallelujah', sans-serif;
	text-indent: 1em;
}

p{
	font-family: 'fira';
	font-size: large;
	color: black;
	text-indent: 1em;
	padding-left:1em;
	padding-right:1em;
}

.imag{
	width: 10%;
	height: 70px;
	border-radius: 0%;
}

.encab{
	width: 90%;
	height: 70px;
}

.content{
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;

}

nav{
	width: 100%;
	height: auto;
	background: -webkit-linear-gradient(left,  #FFDEAD, 	#FFF8DC); /* sintaxis para safari*/
  background: -o-linear-gradient(right,  #FFDEAD, #FFF8DC); /* sintaxis para opera */
  background: -moz-linear-gradient(left,  #FFDEAD, #FFF8DC); /* sintaxis para firefox */
  background: linear-gradient(to right,  #FFDEAD, #FFF8DC); /* sintaxis standar */
  background-color: #FFDEAD; /* background por defecto por si no carga el degradado*/
}

ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #CCC;
}
li {
	display: inline;
}
a {
	font-family: 'Gloria Hallelujah', sans-serif;
	color: #000;
	text-decoration: none;
	font-size: 0.9em;
	display: block;
	padding: 6px;
	float: left;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	background-color: #EAEAEA;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #CCC;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #CCC;
}

a:hover {
	color: #FFF;
	background-color: #666;
	border-right-width: 5px;
	border-right-style: solid;
	border-right-color: #36F;

}

section{
	width: 100%;
	height: auto;
  background: -webkit-linear-gradient(left,  #CCFFFF, 	#9999FF); /* sintaxis para safari*/
  background: -o-linear-gradient(right,  #CCFFFF, #9999FF); /* sintaxis para opera */
  background: -moz-linear-gradient(left,  #CCFFFF, #9999FF); /* sintaxis para firefox */
  background: linear-gradient(to right,  #CCFFFF, #9999FF); /* sintaxis standar */
  background-color: #9999FF; /* background por defecto por si no carga el degradado*/
}


article{
	margin: 5px 0 5px 0;
}

.imagen{
	float: left;
	width: 20%;
	height: 200px;
	border-radius: 50%;
	margin-right:30px;
	margin-left:10px

}

.parrafo{
	width: 100%;
	height: 200px;
	background-color:#cbe0ff;
}


img { /*para redondear todaslas imagenes*/

margin: 0;
padding: 0;
border-radius: 40px;
overflow: hidden;
}

.redondo{	
  margin-left:30px;
  
}



.vertical{
	float: left;
	padding: 3px;
	border:  1px solid black;
	background-color: white;
	width: 560px;
	height: 315px;
	margin: 2px;
}

footer{
	clear: both;
	width: 100%;
	height: 30px;
	background-color:  #d1d5db;
	text-align: center;
}