* {margin: 0;padding: 0;outline: none;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
*:after, *:before { -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section {  display: block;}
html {font-size: 100%;height: auto !important;height: 100%;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}
.clear {display: block;	}
.clear::after {clear: both;content: ".";display: block;height: 1px;visibility: hidden;}
	
/*GENERIC STYLES*/
body { }
/*NAV*/
	header {
		background: linear-gradient(to left,#333 0,#CCC 100%);
		border-bottom: 1px solid rgba(0,0,0,.1);
		box-shadow: 1px 1px 20px #343434;
		display: block;
		position: fixed;
		width: 100%;
		z-index: 1000;
		margin:0 auto;
		
	}
	
	header nav > ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		list-style: none;
		margin: 0;
		padding: 0;
		width:100%;
		margin:0 auto;
		max-width:900px;
	}
	
		header nav > ul li {
			flex: initial;
			margin: 0;
			padding: 0;
			position: relative;
			transition: all linear 0.1s;
			
			
			
			
				
		}
		
			header nav > ul li:hover {
				background: rgba(0,0,0,1);
			}
			header nav > ul > li > a {
				align-items: flex-start;
				color: #fff;
				display: flex;
				font-size: 1.4rem;
				font-weight: 200;
				letter-spacing: 1px;
				max-width: 250px;
				padding: 1rem 1.5rem;
				text-decoration: none;
				text-shadow: 1px 1px 2px #000;
				transition: all linear 0.1s;
			}
			
				header > nav > ul > li > a > div > span {
					color: rgba(255,255,255,.75);
					display: block;
					font-family: Georgia, "Times New Roman", Times, serif;
					font-size: .7rem;	
					font-style: italic;
					line-height: 1rem;
					max-width: 260px;
				}
			
			
			header nav > ul li a + div {
				background: linear-gradient(to bottom,rgba(150,150,150,1) 0,rgba(0,0,0,0.96) 100%);
				border-radius: 0 0 2px 2px;
				box-shadow: 0 3px 1px rgba(0,0,0,.05);
				display: none;
				font-size: 1.8rem;
				position: absolute;
				z-index: 1001;
				width: 100%;
				border-radius:0 0 10px 10px;
				
			}
			
				header nav > ul li:hover a + div {
					display: block;
				}
				
				header nav > ul li a + div ul {
					list-style-type: none;	
				}
				
					header nav > ul li a + div ul li {
						margin: 0;
						padding:5px 0;
					}
					
						header nav > ul li a + div ul li a {
							color: rgba(255,255,255,.9);
							display: block;	
							font-size: .7rem;
							letter-spacing: 1.5px;
							padding: .25rem 1.5rem;
							text-decoration: none;
							text-transform: uppercase;
							text-align:center;
						}
						
							header nav > ul li a + div ul li:hover a {
								background-color: rgba(0,0,0,1);	
							}
							
						
						
						
						
				
	
	
		
			
			
			
	
				
				
			
	
				header#head2 {
		background: linear-gradient(to left,#333 0,#CCC 100%);
		border-bottom: 1px solid rgba(0,0,0,.1);
		box-shadow: 1px 1px 20px #343434;
		display: block;
		position: relative;
		top:200px;
		width: 100%;
	}
	
	header#head2 nav > ul {
		display: block;
		
		list-style: none;
		margin:10px auto;
		padding: 0;
		width:100%;
		max-width:100%;
		
	}
	
		header#head2 nav > ul li {
			display:inline-block;
			vertical-align:top;
			width:11%;
			margin:5px 1%;
			padding: 0;
			
			transition: all linear 0.1s;	
		}
		
			header#head2 nav > ul li:hover {
				background: rgba(0,0,0,1);
			}
			
		
				header#head2 nav > ul li a + div {
				background: linear-gradient(to bottom,rgba(150,150,150,1) 0,rgba(0,0,0,0.96) 100%);
				border-radius: 0 0 2px 2px;
				box-shadow: 0 3px 1px rgba(0,0,0,.05);
				display: none;
				font-size: 1.8rem;
				position: absolute;
				z-index: 1001;
				width: 100%;
				border-radius: 10px;
				text-align:center;
				
			}
			
			
			
			
			
				header#head2 nav > ul li:hover a + div {
					display:block;
				}
				
				header#head2 nav > ul li a + div ul {
					list-style-type: none;	
				}
				
					header#head2 nav > ul li a + div ul li {
						margin: 0;
						padding:5px 0;
						width:100%;
					}
					
						header#head2 nav > ul li a + div ul li a {
							color: rgba(255,255,255,.9);
							display: block;	
							font-size: .7rem;
							letter-spacing: 1.5px;
							padding: .25rem .5rem;
							text-decoration: none;
							text-transform: uppercase;
							text-align:center;
						}
						
							header#head2 nav > ul li a + div ul li:hover a {
								background-color: rgba(0,0,0,1);	
							}
							
						
	aside {
		background: transparent;
		display:inline-block;
		vertical-align:top;
		width: 38%;
		text-align:center;
		margin:80px 1%;
		z-index: 1000;
		
	}
	aside nav {
		width:100%;
		display:bolock;
		margin:0 auto;}
	
	
	aside nav > ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-before;
		list-style: none;
		margin: 0 auto;
		padding: 0;
		text-align:center;
	}
	
		aside nav > ul li {
			flex: initial;
			margin: 0;
			padding: 0;
			position: relative;
			transition: all linear 0.1s;	
		}
		
			aside nav > ul li:hover {
				color:red;
			}
			aside nav > ul > li > a {
				align-items: space-between;
				color: #000;
				display: flex;
				font-size: 1.2rem;
				font-weight: 700;
				letter-spacing: 1px;
				max-width: 130px;
				padding: 1rem 1.5rem;
				text-decoration: none;
				transition: all linear 0.1s;
			}
			
			
			
			aside nav > ul li a + div {
				background: #EEE;
				display: none;
				font-size: 1.4rem;
				position: absolute;
				z-index: 1001;
				width: 100%;
				border-radius:0 0 10px 10px;
				
			}
			
				aside nav > ul li:hover a + div {
					display: block;
				}
				
				aside nav > ul li a + div ul {
					list-style-type: none;	
				}
				
					aside nav > ul li a + div ul li {
						margin: 0;
						padding:5px 0;
					}
					
						aside nav > ul li a + div ul li a {
							color: #000;
							display: block;	
							font-size: .7rem;
							letter-spacing: 1.5px;
							padding: .25rem 1.5rem;
							text-decoration: none;
							text-transform: uppercase;
							text-align:center;
						}
						
							aside nav > ul li a + div ul li:hover a {
								background-color:#CCC;
								color:red;	
							}
	
				  h1 {
	  width:100%;
	  margin:10px auto;
	  font-size:2rem;
	  text-align:center;}
	  figure {
		  width:100%;
		  margin:0 auto;
		 }
		  figure img {
			  width:100%;
			  }
			  body {
				  background-color:#666;}
			article {
				width:58%;
				
				margin:80px auto;
				background-color:#FFF;
				border-radius:20px;
				box-shadow:1px 1px 10px #343434;
				padding:20px;
				display:inline-block;}
				p {
					width:96%;
					padding:0 20px;
					text-align:left;
					margin:0 auto;
					font-size:1.2rem;}
@media (min-width: 990px) {
  header > nav > ul > li > a {
    max-width: 500px;
    font-size: 1.7rem;
	line-height: 2rem;
  }
  
  header > nav > ul > li > a > div > span {
	  margin: 4px 0 0;  
  }

}