/*Global Styles
===============================*/
html {
	box-sizing: border-box;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   }

*, *:before, *:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

.header-fonts {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 20px;
}

h1 {
    text-align: center;
	font-family: Gabriela, "Times New Roman", serif;
	font-size: 2em;
}

p {
/*    text-align: center;*/
	font-family: Cabin, Arial, monospace;
	margin: 10px;
	line-height: 1.35em;
}

/* Navigation bar styling -------------------------------------- */
.navbar {
  list-style-type: none;
  margin: 15px;
  margin-bottom: 30px;
  padding: 5px;
  overflow: hidden;
  background-color: white;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  z-index: 5;
}

nav li {
  list-style-type: none;
  float: left;
}

nav li a {
  display: block;
  color: black;
  text-align: center;
  padding: 0.5em 0.5em;
  margin-left: 2px;
  text-decoration: none;
}

nav li a:hover {
  background-color: #BDBDBD;
}


/*Main Styles
===============================*/
.grid-contain {
	display: grid;
	grid-template: 450px 450px / 1fr 1fr;
	grid-column-gap: 80px;
}

.profile-pic {
	width: 400px;
	grid-column-start: 1;
	justify-self: end;
	align-self: center;
	border-radius: 50%;
	border: 5px solid black;
	margin-top: 50px;
}

.profile-links {
	grid-column-start: 2;
    justify-self: start;
	align-self: center;
	list-style-type: none;
	
}

.profile-links li img {
	vertical-align:middle;
	margin: 0.3em;
}

#logo {
	width: 70px;
}


.aboutMe-text {
	grid-column-start: 1;
	grid-column-end: span 2;
	max-width: 900px;
	min-width: 200px;
/*	margin: 50px;*/
	align-self: center;
	justify-self: center;
	font-size: 1.15em;
}

.aboutMe-text h2 {
	text-align: center;
}


.red path {
	stroke: red;
	background-color: aqua;
}

/*
.blue path {
	stroke: blue;
}

.green path {
	stroke: green;
}
*/

.anim {
	visibility: visible;
	animation-name: slide-in;
	animation-duration: 10s;
  	animation-timing-function: ease-in;
  	-webkit-animation-name: slide-in;
  	-webkit-animation-duration: 10s;
  	-webkit-animation-timing-function: ease-in;
}

@keyframes slide-in{
    from {transform: translate(50%, 0%);}
    to {transform: translate(0%, 0%);}
}

/* Responsive Media Queries
===============================*/
@media only screen and (max-width: 20em) {
	body div.grid-contain {
		grid-template: 250px 320px 830px / 1fr;
		grid-column-gap: 0px;
	}
	
	.profile-links {
		grid-column-start: 1;
		grid-row-start: 2;
		justify-self: center;
		margin-left: 20px;
	}
	
	.profile-links h1 {
		font-size: 1.7em;
	}
	
	.profile-pic {
		width: 200px;
		grid-column-start: 1;
		justify-self: center;
	}
	
	.aboutMe-text {
		grid-column-start: 1;
		grid-row-start: 3;
		padding: 2em;
	}
	
	li img {
		width: 40px;
		
	}
	
	img#logo {
		width: 40px;
	}
	
	.aboutMe-text {
		font-size: 0.9em;;
	}
}

@media only screen and (min-width: 20em) and (max-width: 36em) {
/*	mobile styles go here */
	div.grid-contain {
		grid-template: repeat(auto-fill, minmax(300px, 1fr))  / 1fr;
		grid-column-gap: 0px;
	}
	
	.profile-links {
		grid-column-start: 1;
		justify-self: center;
	}
	
	.profile-pic {
		width: 275px;
		grid-column-start: 1;
		justify-self: center;
	}
	
	.aboutMe-text {
		grid-column-start: 1;
		padding: 2em;
	}
}

/*@media only screen and (min-width: 36em) and (max-width: 52em) {*/
@media only screen and (min-width: 36em) and (max-width: 48em) {
/*	tablet styles go here*/
	.grid-contain {
		grid-template: repeat(auto-fill, minmax(250px, 1fr)) / repeat(auto-fill, minmax(250px, 1fr));
		grid-column-gap: 40px;
	}
	
	.profile-links {
		grid-column-start: 2;
	}
	
	.profile-pic {
		width: 300px;
		grid-column-start: 1;
	}
	
	.aboutMe-text {
		grid-column-start: 1;
		grid-column-end: span 2;
		padding: 1.5em;
	}
}


@media only screen and (min-width: 75em) {
/*	desktop styles go here */
/*
	.grid-contain {
		display: grid;
		grid-template: 400px 300px / 1fr 1fr;
		grid-column-gap: 50px;
	}

	.profile-pic {
		width: 400px;
		grid-column-start: 1;
		justify-self: end;
		align-self: center;
		border-radius: 50%;
		border: 5px solid black;
	}

	.profile-links {
		grid-column-start: 2;
		justify-self: start;
		align-self: center;
		list-style-type: none;
	}

	.profile-links li img {
		vertical-align:middle;
		margin: 0.3em;
	}

	#logo {
		width: 70px;
	}


	.aboutMe-text {
		grid-column-start: 1;
		grid-column-end: span 2;
		max-width: 900px;
		min-width: 200px;
		margin: 50px;
		align-self: center;
		justify-self: center;
	}

	.aboutMe-text h2 {
		text-align: center;
	}
*/
}

@media (max-width: 700px) {

  .GWG_logo {
    width: 280px;
  }

  .GWG_fig {
    max-width: 100%;
    display: inline-block;
    margin-left: 0.5em;
  }
}



/* Banner and logo styling -------------------------------------*/
.GWG_logo {
  display: inline-block;
  vertical-align: top;
  max-width: 100%;

}

.GWG_fig {
  max-width: 40%;
  align-self: flex-start;
  display: inline-block;
  margin-left: 0.5em;
  margin-top: 0.5em;
}



.logo {
  height: 50px;
  margin-right: 20px;
}

.leading {
  height: 16em;
  margin-bottom: 0;
  padding: 0em;
  color: white;
  background-image: url('../grids/index_files/skylinedraft2.svg');
  background-position: center bottom;
  background-color:  #fff;
  background-repeat: no-repeat;
  background-size: cover;
  text-shadow: 0px 0px 5px #000;
}

.leading-text {
  max-width: 900px;
  font-size: 1.5em;
  line-height: 1.4em;
}


/* Footer styling ---------------------------------------------- */

.footer {
  border-top: 1px solid black;
  font-size: 0.75em;
}

.footerp {
  margin: 15px 30px 60px 30px;
}