@charset "UTF-8";
/* CSS Document */

/*Body CSS grid structure*/	

body {
	display: grid;
	grid-template-columns: 1fr 320px;
	grid-template-rows: auto 1fr auto;
	background-color: #F1F5F6;
	min-height: 100vh;
	margin: 0;
}


main {
	padding: 10px;
}

.home {
	display: grid;
	grid-template-columns: 1fr;
	grid-column-gap: 20px;
	grid-row-gap: 10px;
	margin: 10px;
	grid-template-rows: auto auto 200px auto 1fr;
}

.essay1 {
	display: grid;
	grid-template-columns: 1fr;
	grid-column-gap: 20px;
	grid-row-gap: 10px;
	margin: 10px;
	grid-template-rows: auto auto auto auto 1fr;
}
		

/*header*/

header {
	background-color: #e7382e;
	background-image: url('images/banner.png');
	
	padding: 19px 39px;
	background-size: 160% 300%;
	grid-column-start: 1;
	grid-column-end: 3;
	background-position: 00;
	box-shadow: 0px 3px 6px #00000029;
}

nav ul {
	list-style-type: none;
	margin: 15px 0 0 0;
	padding: 0;
}
		
header nav ul li {
	display: inline;
	color: white;
	font: bold 16px Helvetica, sans-serif;
	margin-right: 10px;
	padding-right: 10px;
	border-right: 3px solid white;
}
	
header nav ul li:last-child {
	border-right: none;
}
		
.nav-collapse ul, .nav-collapse ul li {
	display: inline !important;
}

/*images*/

img {
	max-width:47%;
max-height:100%;
}

iframe {
	max-width: 97%;
}

.scomo {
	max-width:97%;
max-height:100%;
}
/*font styles*/

p a {
	color:#E7382E;
}

a {
	text-decoration: none;
	color:white;
}

a:hover {
	color:#d3d3d3;
}

a:active {
	color:black;
}

h5 { 
	font-family: helvetica;
	font-weight: normal;
	font-size: 14px;
	padding-top: 0;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-bottom: 0px;
}
		
h4 {
	font-family: helvetica;
	font-weight: normal;
	font-size: 20px;
	padding-top: 0;
	margin-top: 20px;
	margin-bottom: 10px;
}
		
h3 {
	font-family: Helvetica;
	font-size: 30px;
	margin-bottom: 0;
	padding-bottom: 0;
	margin-top: 10px;
}
		
h2 {
	font-family: Times new roman, serif;
	font-size: 40px;
	color: white;
	margin: 0px;
}
		
h1 {
	font-family: Helvetica;
	font-size: 120px;
	color: white;
	margin: -6px 0 0 0;
	line-height: 1;
}

.hangingindent {
  padding-left: 22px ;
  text-indent: -22px ;
}
/*buttons*/

button:hover{
	background:#d3d3d3;
}


.buttonsMain {
	background: white;;
	width:50%;
	margin: 0 auto;
}

.buttonsTop {
	background: #F1F5F6;
	padding: 8% 5%;
	display: flex;
	justify-content: center;

}

.buttonsBottom {
	background: #F1F5F6;
	margin-top: 1%;
	PADDING: 5% 1% 0.3% 1%;
	font-family: helvetica;
	font-size: 20px;
	font-weight:bold;
	text-align: center;
	color:#E7382E;
}

.buttons {
	margin: 0% 3%;	
}

.red {
	font-family: Times New Roman, Serif;
	font-size: 30px;
	color: white;
	background-color: #E7382E;
	border-color: black;
	border-width: 3px;
}

.white {
	font-family: Times New Roman, Serif;
	font-size: 30px;
	color: #E7382E;
	background-color: white;
	border-color: black;
	border-width: 3px;		
}

#correct, #incorrect {
	display:none;
}

/*Paragraph styles*/

.indent {
	margin-left: 7%;
}
	
/*essay styles*/

hr {
	border-color: white;
	border-bottom-width: 1px;
	border-style: solid;	
	margin-top: 0;
}

article {
	background-color: white;
    display: grid;
	grid-column-gap: 20px;
	grid-template-columns: 1fr 1fr 1fr;
	box-shadow: 0px 3px 6px #00000029;
	padding: 10px 20px 20px 20px;
}

section {
	font-family: times new roman, serif;
	font-size: 18px;
	font-weight: normal;
	padding: 10px;
	margin-top: 0px;
}
	
.essay {
	grid-column-start: 1;
	grid-column-end: 3;
	font-family: times new roman, serif;
	font-size: 18px;
	font-weight: normal;
	padding: 10px;
	margin-top: 0px;
	line-height: 135%;
}

.title {
	grid-column-start: 1;
	grid-column-end: 4;
}

section p:first-child {
	margin-top: 0;
}

article hr {
	border-color: #A89B9B;
	margin-top: 20px;
}

/*flares*/
	
.bluebox {
	background: #4B59FF;
	box-shadow: 0px 3px 6px #00000029;
	display: inline-block;
	padding: 5px;
	margin-top: 4px;
	color: white;
	font-weight: bold;
	font-family: helvetica;
	FONT-SIZE: 14PX;
}
		
.sponsor {
	background: #FF9E4B;
	box-shadow: 0px 3px 6px #00000029;
	display: inline-block;
	padding: 5px;
	margin: 4% !important;
	color: white;
	font-weight: bold;
	font-size: 14px;
	font-family: helvetica;
}
		
.help {
	background: #FF3EFF;
	box-shadow: 0px 3px 6px #00000029;
	display: inline-block;
	padding: 5px;
	margin: 4% !important;
	color: white;
	font-weight: bold;
	font-size: 14px;
	font-family: helvetica;
}


/*ads*/

.card {
	background-color: white;
	box-shadow: 0px 3px 6px #00000029;
	padding: 10px 20px 20px 20px;
}

.ads {
	display: grid;
	grid-column-gap: 20px;
	grid-row-gap: 10px;
	grid-template-columns: 1fr;
	grid-template-rows: 200px 200px 200px 200px;
	padding: 0px !important;
	margin: 0px;
}

	
.ad1 {
	grid-row-start:1;
	grid-row-end: 1;
	background-image: url("images/ad1.png");
	background-size: auto 150%;
	overflow:hidden;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	box-shadow: 0px 3px 6px #00000029;
	padding: 0;
}
		
.ad2 {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start:3;
	grid-row-end: 4;
	background-image: url("images/ad2.png");
	background-size: auto 150%;
	overflow:hidden;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	box-shadow: 0px 3px 6px #00000029;
	padding: 0;
}

.ad3 {
	grid-row-start:1;
	grid-row-end: 1;
	background-image: url("images/ad3.png");
	background-size: auto 150%;
	overflow:hidden;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	box-shadow: 0px 3px 6px #00000029;
	padding: 0;
}

.ad4 {
	grid-row-start:1;
	grid-row-end: 1;
	background-image: url("images/ad4.png");
	background-size: auto 150%;
	overflow:hidden;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	box-shadow: 0px 3px 6px #00000029;
	padding: 0;
}

.ad5 {
	grid-row-start:2;
	grid-row-end: 2;
	background-image: url("images/ad5.png");
	background-size: auto 150%;
	overflow:hidden;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	box-shadow: 0px 3px 6px #00000029;
	padding: 0;
}

.ad6 {
	grid-row-start:1;
	grid-row-end: 1;
	background-image: url("images/ad6.png");
	background-size: auto 150%;
	overflow:hidden;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	box-shadow: 0px 3px 6px #00000029;
	padding: 0;
}
/*footer*/


footer {
	color: white;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

footer p {
	font-family: helvetica;
}


footer {
	background-color: #E7382E;
	padding: 19px 39px;
	grid-column-start: 1;
	grid-column-end: 3;
	box-shadow: 0px 3px 6px #00000029;
}

footer nav ul li {
	color: white;
	font: 16px Helvetica, sans-serif;
}
		

/*sidebar*/

.sidebarTemplate {
	grid-column-start: 1;
	grid-column-end: 2;
	background: white;
	box-shadow: 0px 3px 6px #00000029;
	padding: 3%;
}
		
.sidebar1 {	
	grid-row-start:1;
	grid-row-end: 2;
}
		
.sidebar2 {
	grid-row-start:2;
	grid-row-end: 3;
}
		
.sidebar3 {
	grid-row-start:4;
	grid-row-end: 5;
}

.sidebar4 {
	grid-row-start:3;
	grid-row-end: 4;
	background-color: #FDF52C;
}
		
.banner {
	padding: 1%;
	background: rgb(99,96,88,0.49);
	box-shadow: 0px 3px 6px #00000029;
	position:absolute;
	bottom: 0;
	text-align: center;
	margin: 0;
	width: 100%;
}
		
.banner mark {
	text-align: center;
	font: Bold 14px Helvetica;
	letter-spacing: 0px;
	color: #FFFFFF;
	background: #E7382E;
}

		
.articlePromos {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 5px solid #A89B9B; 
}
		
.articlePromos p {
	font-size: 18px;
	margin-top: 0px;
}
		
.small {
	font-size: 14px !important;
	font-weight: bold;
	font-family: helvetica;
}
		
.articlePromos p span, .sidebar1 span, .sidebar2 span, .sidebar3 span {
	font-weight: bold;
	color: #E7382E;
}

.sidebar4 span {
	font-weight: bold;
}
		
.sidebar1 p, .sidebar2 p, .sidebar3 p, .sidebar4 p {
	margin: 2% auto !important;
}
	
/*media queries*/

@media only screen and (max-width: 800px) {
	body {
		grid-template-columns: 1fr;
	}
	
	header {
			background-size: 200% 300%;
	
	}
	.essay {
	grid-column-start: 1;
	grid-column-end: 4;
  }
			
.ads {
    grid-column-start: 1;
	grid-column-end: 4;
}
	
main {
	grid-column-start: 1;
	grid-column-end: 3;
}
			
h1{ 
	font-size:50px;
	}
			
h2 {
	font-size: 30px;
}
			
nav ul li {
	font-size: 14px;
}
	
	.nav-collapse {
		display:inline-block ;
	}
	
	.buttonsMain {
		width: 100%;
	}
	
}

@media only screen and (max-width: 1024px) {
 .buttonsMain {
width: auto;
	}
}