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

			/* end reset*/









			/* Default Styles Below*/

			body {
				font-size: 20px;
				background-color: #EEEEEE;
			}

			#wrapper {
				width: auto;
				margin: 2% auto;
				/*order: 1px solid red;*/
				background-color: #DAE6ED;
			}


			img {
				width: 100%;
			}

			h1 {
				font-size: 47px;
				font-family: 'Muli', sans-serif;
				padding-top: 2%;
				/*border: 1px solid red;*/
				/*margin-left: 1%;*/
				color: white;
			}


			h2 {
				font-family: 'Muli', sans-serif;
				font-size: 38px;
				margin-bottom: 1.8%;
				text-align: center;
				letter-spacing: 5px;
				margin-top: 2.5%;
				/*border: 1px solid red;*/
			}

			.certificates {
				color: #697D89; 
				text-decoration: none;
			}
			

			.certificates:hover {
				color: #91A9B8;
			}
			

			header {
				padding: 2%;
				/*border: 1px solid orange;*/
				background-color: #8496A1;
			}

			nav {
				font-family: 'Muli', sans-serif;
				text-decoration: none;
				/*border: 1px solid blue;*/
				padding: 1%;
				font-size: 30px;
				text-align: center;
			}

			li a {
				text-decoration: none;
			}

			nav ul {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				grid-gap: 12px;
				/*border: 1px solid green;*/
				padding: 1%;
				padding-top: 2%;
			}

            nav li a  {
               display: block;
               text-align: center;
               color: #EBF8FF;
              
            }


            nav li a:hover {
            	color: #D5E1E8;
            }



            

			#image {
            	width: 100%;
            	/*border: 1px solid pink;*/
            }




            #webdesigns {
            	margin-top: 2%;
            	margin-bottom: 6%;
            	display: block;
            	margin-left: auto;
            	margin-right: auto;
            }


            .designs {
            	margin-bottom: 2.5%;
            }

            .bloom { 
				width: 67%;
				display: block;
				margin-left: auto;
				margin-right: auto;

			}



			p {
				font-family: 'Muli', sans-serif;
				margin-bottom: 3%;
				font-size: 21px;
			}


			.text {
            	padding: .5%;
            	
  				font-family: 'Muli', sans-serif;

  				line-height: 1.1;
  				/*border: 1px solid pink;*/

            }


			.createdescription {
				margin-top: 2%;
				/*border: 1px solid pink;*/
			}

			span {
				font-style: italic;
				margin-bottom: 2%;
				text-align: center;
				color: #8496A1;
			}

			h3 {
				margin-top: 3%;
				text-align: center;
				font-weight: bold;
				font-size: 25px;
				font-family: 'Muli', sans-serif;
			}

			
			#headshot {
            	display: block;
				margin-left: auto;
				margin-right: auto;
				width: 30%;
				border-radius: 50%;
				padding-bottom: 1%;
			}


			/*img .gallery:hover {
				opacity: 0.5;
			}*/

			.grid {
				display: block;
				margin-left: auto;
				margin-right: auto;
				padding: 3%;

			}


			.centeer {
				display: block;
				margin-left: auto;
				margin-right: auto;
				padding: 3%;

			}
			



            .gallery {
            	width: 87%;
        		display: block;
        		margin: 1% auto;
        		padding: 1%;
            }


            .figcaption {
            	padding: 3% 7% 2% 9%;
            	/*border: 1px solid red;*/
            	font-size: 21px;
            	font-family: 'Muli', sans-serif;

            }



            a:hover img{
            	opacity: 0.5;
            }


            #form {
            	/*border: 1px solid red;*/
            	margin-right: 7%;
            	margin-left: 6%;
            	font-family: 'Muli', sans-serif;
            }

			.gform {
				max-width: 90%;
				margin: 1rem auto;
				padding: 2%;
				/*border: 1px solid green;*/
			}

			.gform label, input, textarea {
				display: block;
				width: 100%;
				padding: .5em;
			}

			#submit {
				margin-top: 1%;
				font-size: 18px;
				background-color: #8496A1;
				padding: .5em;
				color:  white;
				/*margin: 1rem 0 .25rem;*/
				width: auto;
			}

			#submit:hover{
				background-color: #282B40;
			}
			

	           
	         #contact{
	         	font-family: 'Muli', sans-serif;
				display: grid;
				width: 100%;
				text-align: center;
				margin-bottom: 4%;
				grid-template-columns: 1fr 1fr 1fr;
				/*grid-template-rows:auto;*/
				align-items: center;
				justify-content: center;
				/*margin-bottom: 2%;*/
				
			}

			.button {
				grid-gap: 20px;
				padding: 2%;
				display: block;
				margin-left: auto;
				margin-right: auto;
			    width: 28%;
			}
			


			.emailform {
				margin-bottom: 1%;
			}


			.contacts {
				font-family: 'Muli', sans-serif;
				text-decoration: none;
				color: #282B40;
			}

			.contacts:hover {
				text-decoration: none;
				color: white;
			}

            footer {
            	font-family: 'Muli', sans-serif;
            	/*border: 1px solid yellow;*/
            	text-align: center;
            	font-size: 18px;
            	background-color: #8496A1;
            	color: white;
            	padding: 1%;
            }

           video {
           		margin-right: 0;
           		margin-left: 0;
           		padding-left: 7%;
           		height: 80%;
           		
           }

           .grid {
	
				
				border-style: hidden;
				background-color: #D3DFE6;
				
			}
		}


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

			#wrapper {
				max-width: 900px;
				margin: 2% auto;
				/*border: 1px solid red;*/
			}

			.header {
				display: grid;
				grid-auto-columns: auto;
				grid-template-areas:
				'name name name'
				'navigate navigate navigate';
			}


			#headshot {
				width: 25%;
				margin: auto;
				border-radius: 50%;
			}

			nav li a  {
               display: block;
               text-align: center;
               color: #EBF8FF;
              
            }

           

            .name {
            	grid-area: name;
            }



           .navigate {
           		grid-area: navigate;
           }

           #form {
				width: 73%;
				max-width: 800px;
				margin-left: 15%;
				margin-right: 6%;
			}


			.createdescription {
				max-width: 80%;
			}
          
}

/* this ends tablet query*/





/* start desktop media query*/
@media only screen and (min-width: 961px) {

			#wrapper {
				max-width: 1500px;
				margin: 2% auto;
				/*border: 1px solid red;*/
			}


			.text {
				width: 100%;
				max-width: 960px;
				margin: 0 auto;
				padding: 0;
			}



			header {
				grid-area: header;
				display: grid;
				grid-template-columns: 2fr 2fr;
			}



			#form {
				width: 100%;
				max-width: 1000px;
				margin-left: 15%;
				margin-right: 20%;
			}




			h2 {
				margin-bottom: 1%;
			}


		    .left { 
				grid-area: left; 
				/*border: 1px solid red;*/
			}

			.right { 
				grid-area: right;
				padding-left: 2%; 
				/*border: 1px solid black;*/
			}

			.bloom {
				width: 84%;

				/*border: 1px solid pink;*/

			}


			.lpic {
				margin-top: 7% 0 0 22%;
				padding-left: 20%;
			}


			.rpic {
				margin: 7% 0 0 0%;

			}


			.desc {
				margin: 0 9% 0 0;
			}


			#designs {
            	margin-bottom: 3%;
            }


			.createdescription {
				margin-top: 4%;
				margin-right: 2%;
				margin-left: 2%;
				max-width: 92%;
			}



			.centeer {
				
				padding: 2% 3% 2% 0;
				display: grid;
				margin: 0 0 0 0;
				grid-template-columns: 3fr 1fr;
				grid-template-rows: 1fr;
				grid-gap: 1.25em;
				grid-template-areas: 
				"left right";
			}


			#webdesigns {
				display: grid;
				padding-left: 0%;
				padding-right: 5%;
				width: 100%;
			}


			.gallery {
				width: 100%;
				padding-left: 20%;
				padding-right: 18%;
			}


			.colored {
				border-style: hidden;
				background-color: #D3DFE6; 
				width: 100%;
			}
		

			/*.info {
				width: 35%;
			}*/

			#headshot {
 
				width: 20%;
			}

			.sites {
				padding: 2% 0 4% 0;
				display: grid;
				margin: 0 0 0 0;
				grid-template-columns: 1fr 3fr;
				grid-template-rows: auto;
				grid-gap: 1.25em;
				grid-template-areas: 
				"left right";
				border-style: hidden;
				width: 100%;
			}


			.grid {
				
				padding: 2% 0 2% 1%;
				display: grid;
				margin: 0 0 0 0;
				grid-template-columns: 1fr 3fr;
				grid-template-rows: 1fr;
				grid-gap: 1.25em;
				grid-template-areas: 
				"left right";
				border-style: hidden;
				background-color: #D3DFE6;
				
			}



			.middle {
				margin: 0 0 0 9%;
				padding-right: 0;
			}




			video {
				width: 100%;
			}

			

			
			

}
/* this ends tablet query*/