/* http://meyerweb.com/eric/tools/css/reset/ 
			   v2.0 | 20110126
			   License: none (public domain)
			*/

			html, body, div, span, applet, object, iframe,
			h1, h2, h3, h4, h5, h6, p, blockquote, pre,
			a, abbr, acronym, address, big, cite, code,
			del, dfn, em, img, ins, kbd, q, s, samp,
			small, strike, strong, sub, sup, tt, var,
			b, u, i, center,
			dl, dt, dd, ol, ul, li,
			fieldset, form, label, legend,
			table, caption, tbody, tfoot, thead, tr, th, td,
			article, aside, canvas, details, embed, 
			figure, figcaption, footer, header, hgroup, 
			menu, nav, output, ruby, section, summary,
			time, mark, audio, video {
				margin: 0;
				padding: 0;
				border: 0;
				font-size: 100%;
				font: inherit;
				vertical-align: baseline;
			}
			/* HTML5 display-role reset for older browsers */
			article, aside, details, figcaption, figure, 
			footer, header, hgroup, menu, nav, section {
				display: block;
			}
			body {
				line-height: 1;
			}
			ol, ul {
				list-style: none;
			}
			blockquote, q {
				quotes: none;
			}
			blockquote:before, blockquote:after,
			q:before, q:after {
				content: '';
				content: none;
			}
			table {
				border-collapse: collapse;
				border-spacing: 0;
			}

			/* Default Styles Below*/


/*lightest grey:#EEEBFF;
		light grey :#D6D3E6;
		mid grey:#B3B0BF;
		dark grey:#777580;
		darkest gre;#45444A;


/*for mobile*/
			
			body {
				font-family: 'Raleway', sans-serif;
				font-size: 18px;
				line-height: 1.2;
				color:#45444A;
			}

			.grid-container {
			  max-width:1900px;
			  display: grid;
			  grid-template-columns:1fr;
			  grid-template-areas:
			  'header'
  			  'menu'
  			  'main '
              'footer';
			  grid-gap: 10px;
			  background-color: #EEEBFF;
			  padding: 1% ;
		
			}
		
			header {
			  display: grid;
			  grid-template-columns:1fr 4fr;
			  grid-area: header;
			  background-color: #EEEBFF;
			}

			h1 {
				font-size: 2.5em;
				letter-spacing: 5px;
				font-weight: bold;
				padding:5%;
				font-family: 'Crimson Text', serif;

			}

			#logo {
				
				width:100px;
				padding-left:15px;
				padding-top: 5px;
			}



			header h1 span{
				display: block;
				font-size: .3em;
				font-family: 'Crimson Text', serif;

			}

			nav {
			display: none;
			width: auto;
			padding:1%;
			margin: 1% auto;
			
			}

		   #ham-icon  {
		    	display: block;
		    	text-align: center;
		    	font-size: 2.5em;
		    	width: auto;
		    	margin: 0 auto;
		    }

		   #close-icon  {
		    	display: block;
		    	text-align: center;
		    	font-size: 1.5em;
		    	width: auto;
		    	margin: 2%;
		    }

		    a.menu-icon:link, a.menu-icon:visited {
		       color: black;
		       text-decoration: none;
		    }

		    a.menu-icon:hover, a.menu-icon:focus {
		       color: gray;
		    }

			nav ul {
				
					display: grid;
					grid-template-columns: 1fr;
					grid-gap: 1%;
				}
				
			nav li {
				display: block;
				border-radius: 5px;
				}

			
			nav li a {
					display: block;
					text-align: center;
					text-decoration: none;
					padding:1%;
					
				}
			
			
			nav li a:link, nav li a:visited  {
					color: white;
					background: #777580;
					border-radius:5px;
				}
			
			nav li a:hover, nav li a:focus {
					color: white;
					background: #45444A;
					
				}

				
			.clear {
					clear: both;
					}

			#main {
				grid-area: main;
				background: white;
				border-radius: 5px;
				display: grid;
			 	grid-template-columns:1fr ;
			  	grid-gap: 15px;
			  	padding:4%;
			}

			iframe {
				width: 100%;
				
				border-radius: 5px;
			}
			video{
				width:100%;
				
				border-radius: 5px;
			}
		    img {
		 	    width: 100%;
		 	   
		 	    border-radius: 5px;

		    }

			aside {
				grid-area: menu;
				background: orange;
				line-height: 1.8; 
				border-radius: 5px;
				background-color: #EEEBFF;
				
			}

			footer {
				grid-area: footer;
				background: #D6D3E6;
				border-radius: 5px;
				padding: 2%;
				text-align: center
			}

			/*contact form*/


			input[type=text], select, textarea {
			  width: 100%; 
			  padding: 5%; 
			  border: 1px solid #ccc; 
			  border-radius: 4px;
			  box-sizing: border-box; 
			  margin-top: 5%; 
			  margin-bottom: 8%; 
			  resize: vertical;
			  font-family: 'Raleway', sans-serif; 
			}

		

			input[type=submit] {
			  background-color: #B3B0BF;
			  color: white;
			  padding: 12px 20px;
			  border: none;
			  border-radius: 4px;
			  cursor: pointer;
			  font-family: 'Ralyway', sans-serif;
			}

			
			input[type=submit]:hover {
			  background-color: #777580;
			}

			
			.container {
			  border-radius: 5px;
			  background-color: #D6D3E6;
			  padding: 20px;
			}

			.page1-container {
 			  max-width: 1900px;
			  display: grid;
			  grid-template-columns:1fr;
			  grid-template-areas:
			  'header'
  			  'menu'
  			  'main'
  			  'contact'
              'footer';
			  grid-gap: 20px;
			  background-color: #EEEBFF;
			  padding: 1% ;
			}

			#contact-main {
				grid-area: main;
				display: grid;
			 	grid-template-columns:1fr;
			  	grid-gap: 10px;
			  	padding:5%;
			}
			

			a:link {
			  text-decoration: none;
			  color:#45444A;
			}

			a:visited {
				color:#45444A;
			  text-decoration: none;
			}

			a:hover {
			  color:#B3B0BF;
			  text-decoration: none;
			}

			a:active {
			 color:#45444A;
			 text-decoration: none;
			}

/*for tablet*/
@media only screen and (min-width: 600px) and (max-width: 900px) {	

			

			h1 {
				font-size: 2.8em;
			}

			header h1 span{
				
				font-size: .4em;
			}

			#logo {	
				width: 125px;
				padding-left:20px;
				padding-top: 8px;
			}
	
			#main {
				grid-area: main;
				display: grid;
			 	grid-template-columns:1fr;
			  	grid-gap: 10px;
			  	padding:5%;
			}

			img {
		 	    width: 100%;
		 	    max-width: 350px;
		 	 }

			.page1-container {
 			  max-width: 1900px;
			  display: grid;
			  grid-template-columns:1fr 1fr;
			  grid-template-areas:
			  'header header'
  			  'menu menu'
  			  'main main'
              'footer footer';
			  grid-gap: 20px;
			  background-color: #EEEBFF;
			  padding: 1% ;
			}

			#contact-main {
			 	grid-template-columns:1fr;
			  }	


		}/*closes tablet*/


/*small desktop*/
@media only screen and (min-width: 901px) and (max-width: 1100px) {
 
			body {
				font-size: 20px;
			}

			.grid-container {
			    display: grid;
			    grid-template-columns:1fr 1fr;
			    grid-template-areas:
				  'header header '
				  'menu menu '
	  			  'main main '
	              'footer footer ';
			    grid-gap: 10px;
			    padding: 10px;
			}

			h1 {
				font-size: 3.0em;
			}

			header h1 span{
				
				font-size: .4em;
			}

			#logo {
				width:135px;
				padding-left:40px;
				padding-top: 10px;
			}
		
			img {
		 	    width: 100%;
		 	    max-width: 350px;
		 	 }

			#main {
				grid-area: main;
				display: grid;
			 	grid-template-columns:1fr 1fr;
			  	grid-gap: 5px;
			}

			nav ul {
				grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
			}

			nav {
				display: block !important;
			}

			#ham-icon  {
		    	display: none !important;
		    }

		    #close-icon  {
	    		display: none;
	          }
	          
	         #contact-main {
			 	grid-template-columns:1fr 1fr;
			  }	


		}/*closes small desktop*/

/*large desktop*/
@media only screen and (min-width: 1101px) {
 
			body {
				font-size: 22px;
			}

			.grid-container {
			    display: grid;
			    grid-template-columns:1fr;
			    grid-template-areas:
				  'header header header '
	  			  'menu menu menu'
	  			  'main main main '
	              'footer footer footer ';
			    grid-gap: 10px;
			    
			    
			}
			
			h1 {
				font-size: 3.2em;
			}

			header h1 span{
				
				font-size: .5em;
			}

			#logo {
				width:170px;
				padding-left:50px;
				padding-top: 15px;
			}
			
			img {
		 	  	width: 100%;
		 	   
		 	   }

			#main {
				grid-area: main;
				display: grid;
			 	grid-template-columns:1fr 1fr 1fr;
			  	grid-gap:30px;
			}

			nav ul {
				grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;

			}

			nav {
				display: block !important;
			}

		    #ham-icon  {
		    	display: none !important;
		    }

		    #close-icon  {
	    		display: none;
	          }

	         #contact-main {
			 	grid-template-columns:1fr 1fr;
			  }	

			
		}/*closes desktop*/