/* Universal Selector */
* {
	font-family: Verdana;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

* {
  box-sizing: border-box;
}

/* Type Selector */
/* html {
	;
} */

footer {
	display: grid;
	grid-template-columns: auto;
	grid-auto-rows: auto;
	background-color: #212121;
	border-top: 2px solid black;
	padding-right: 0;
	grid-area: footer;
}


/* Class Selector */

.wrapper {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	grid-auto-rows: minmax(50px,auto);
	grid-template-areas: 
		"header header header header"
		"header header header header"
		"nav nav nav nav"
		"article article article article"
		"article article article article"
		"aside aside aside aside"
		"aside aside aside aside"
		"footer footer footer footer";
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	border: 2px solid black;
}

.testimonial-box   {
    display: inline-block;
    width: 30%;
    padding: 20px 30px;
  }

  /* Header/logo Title */
.header {
	padding: 60px;
	text-align: center;
	background: #1abc9c;
	color: white;
  }


  /* ID Selector */

#menu1 {
	display: grid;
	width: 100%;
	grid-template-columns: auto;
	background-color: #212121;
	grid-area: nav;
}

#menu1 div, #menu2 div {
	border: 1px solid #F5F5F5;
	padding: 0;
	margin: 0;
}

#backColor{
    background-color: #E7E9EB;
}


/* Group Selector (ex: h1, p, a {/*styles here*/ 

article {
		border-right: 2px solid black;
		border-top: 2px solid black;
		padding: 10px;
		grid-area: article;
}

header {
	grid-area: header;
}

h2{
	font-size: larger;
}


/* Child Selector */
header img {
	display: block;
	max-width: 100%;
	height: auto;
}

aside h2 {
	font-size: 30px;
	margin-bottom: 10px;
	text-align: center;
}

aside p {
	font-family: Georgia;
	font-size: 16px;
}














#menu1 div a, #menu2 div a {
	display: block;
	text-decoration: none;
	color: white;
	text-align: center;
	padding: 15px;
	font-weight: bold;
	height: 100%;
}

#menu1 div a:hover, #menu2 div a:hover {
	background-color: #757575;
}



article p {
	font-family: Georgia;
	font-size: 20px;
}

article h1 {
	font-size: 50px;
	margin-bottom: 10px;
	text-align: center;
}

aside {
	border-top: 2px solid black;
	padding: 10px;
	grid-area: aside;
}





footer p {
	width: 100%;
	padding: 15px;
	font-weight: bold;
	color: white;
	margin: 0 aut0;
	text-align: center;
}
	
#menu2 {
	display: grid;
	width: 100%;
	margin: 0 aut0;
	grid-template-columns: auto;
	background-color: #212121;
}

footer div a {
	border-top: none;
	border-bottom: none;
}

footer #menu2 div a:last-child {
	border-right: none;
}



@media only screen and (min-width:760px) {
	.wrapper {
		display: grid;
		grid-template-columns: repeat(4,1fr);
		grid-auto-rows: minmax(50px,auto);
		grid-template-areas: 
			"header header header header"
			"header header header header"
			"nav nav nav nav"
			"article article article aside"
			"article article article aside"
			"article article article aside"
			"article article article aside"
			"footer footer footer footer";
		width: 100%;
		max-width: 1250px;
		margin: 0 auto;
		border: 2px solid black;
	}
	
	#menu1 {
		display: grid;
		grid-template-columns: repeat(4,1fr);
		background-color: #212121;
		grid-area: nav;
	}
	
	footer {
		display: grid;
		grid-template-columns: repeat(2,1fr);
		grid-auto-rows: auto;
		justify-content: space-between;
		background-color: #212121;
		border-top: 2px solid black;
		padding-right: 0;
		grid-area: footer;
	}
	
	#menu2 {
		display: grid;
		grid-template-columns: repeat(4,1fr);
		background-color: #212121;
	}
}


/* General Sibling Combinator  */

h1 ~ p {
	font-weight: 500;
  }

h3 ~ p {
	font-weight: 500;
	margin-top: 5px;
}

/* Adjacent Sibling Combinator (+) */
h5 + p {
    font-weight: bolder;
    color: #000000;
  }

  div + div{
    font-weight: 900;
    font-size: 20px;

  }


/* Pseudo Class Selector */

ul li:nth-of-type(2n){
    color: coral;
    /* color: #000000; */
    font-weight:800;
  }

  div h5:nth-of-type(1n){
    
    color: rgb(40,42,53);
    font-weight:800;
  }






  /* Column container */
.row {  
	display: flex;
	flex-wrap: wrap;
  }
  
  /* Create two unequal columns that sits next to each other */
  /* Sidebar/left column */
  .side {
	flex: 30%;
	background-color: #f1f1f1;
	padding: 20px;
  }
  
  /* Main column */
  .main {
	flex: 70%;
	background-color: white;
	padding: 20px;
  }
  
  /* Fake image, just for this example */
  .fakeimg {
	background-color: #aaa;
	width: 100%;
	padding: 20px;
	background-image: url("/img/dclogo.png");
	background-repeat: no-repeat;
	background-size: auto; 
  }
  
  /* Footer */
  .footer {
	padding: 20px;
	text-align: center;
	background: #ddd;
  }
  
  /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 700px) {
	.row, .navbar {   
	  flex-direction: column;
	}
  }

  .mainp{
	  font-size: medium;
	  margin-top: 5px;
	  font-weight: 500;
  }