body {
  margin: 0 auto;
  font-family: Helvetica, sans-serif;
  padding-bottom: 50px;
  background-color: rgb(246, 245, 238);
}

.center {
	text-align: center;
}

/*
 * Footer
 */
.blog-footer {
	
  margin-top: 4rem;
  padding: 2.5rem 0;
  color: #999;
  text-align: center;
  background-color: #f9f9f9;
  border-top: .05rem solid #e5e5e5;
}
.blog-footer p:last-child {
  margin-bottom: 0;
}

.modal {
	font-size: 1.2rem;
}

.modal h1 {
	font-size: 2.2rem;
}


.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  padding: 0 40px;
  grid-template-areas: ". content content content content .";
}

.content {
  grid-area: content;
  max-width: 1000px;
  width: 100%;
}

.top-header {
  color: black;
  position: relative;
  z-index: 1;
}



.brand-row {
  display: flex;
  justify-content: center;
  align-items: center;
}

.brand-name {
    text-align: center;
}

.logo {
  display: none;
  width: 50px;
  margin-right: .5rem;
}

.title {
  font-size: 3.3rem;
  text-align: center;
  font-family: American Typewriter;
  font-weight: 600;
}

.two {
  font-size: 2.5rem;
}

.three {
  font-size: 2rem;
}

.yellow {
	background-color: yellow;
}

.green {
	background-color: green;
}

.red-text {
	color: red;
}

.italic {
	font-style: italic;
}

.underline {
	text-decoration: underline;
}

.clear-top {
	margin-top: 2rem;
}

.sub-title {
  font-size: 1.5rem;
  text-align: center;
  font-weight: normal;
}


.input-row {
    display: flex;
    justify-content: center;
    margin-top: 1em;
    font-size: 1.6rem;
}


.input-item {
	display: flex;
    justify-content: flex-start;
    align-items: center;
}

.input-box {
  background-color: white;
  color: #005681;
  border: 2px solid black;
  border-radius: .5em;
  padding: .5em 1em;
  margin-left: 0.6em;
  margin-right: 0.6em;
  outline: none;
}

.input-box:focus {
  background-color: #DCF3FF;
}

.input-box:hover {
  background-color: hsl(181, 93%, 87%);
}

.form-submit {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-size: 2em;
}

.form-submit button {
  color: white;
   /* background-color: #ff9300;  */
  background-color:   hsl(35, 100%, 50%);
  border: 2px solid white;
  border-radius: .5em;

  font-size: 2.2rem;
  font-weight: bold;
  padding-left: 70px;
  padding-right: 70px;
  padding-top: 20px;
  padding-bottom: 20px;
  cursor: pointer;
  
  -webkit-box-shadow: 5px 9px 28px 4px rgba(19,5,48,0.52); 
  box-shadow: 5px 9px 28px 4px rgba(19,5,48,0.52);
}

.form-submit button:hover, .form-submit button:focus {
  background-color: hsl(35, 90%, 60%);
}



.quizbtn {
  display: flex;
  justify-content: space-around;
  margin: 1rem;
  font-size: 1.75rem;
}

.quizbtn button {
  color: white;
  background-color: #ff9300;  
  border: 2px solid white;
  border-radius: .5em;

  font-size: 2.2rem;
  font-weight: bold;
  padding-left: 70px;
  padding-right: 70px;
  padding-top: 20px;
  padding-bottom: 20px;
  margin: 3rem;
  cursor: pointer;
  
  -webkit-box-shadow: 5px 9px 28px 4px rgba(19,5,48,0.52); 
  box-shadow: 5px 9px 28px 4px rgba(19,5,48,0.52);
}

.quizbtn button:hover, .quizbtn button:focus {
  background-color: orange;
}


.error-msg {
	color: red;
	position: relative;
}

.error-msg span {
	display: block;
}

.video-parent {
	margin-left: 100px;
	margin-right: 100px;
	margin-top: 20px;
	margin-bottom: 20px;
	justify-self: center;
	border: 9px solid #FFFFFF;
	-webkit-box-shadow: 5px 5px 15px 5px #AAAAAA; 
	box-shadow: 5px 5px 15px 5px #AAAAAA;  
}

.iframe-container{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
}
.iframe-container iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

.sales-box {
}

.sales-heading {
}

.sales-body {
}

#showMe {
  animation: cssAnimation 0s 120s forwards;
  visibility: hidden;
}

.showMe5 {
  animation: cssAnimation 0s 300s forwards;
  visibility: hidden;
}

.showMe6 {
  animation: cssAnimation 0s 60s forwards;
  visibility: hidden;
}

@keyframes cssAnimation {
  to   { visibility: visible; }
}


@media (max-width: 1200px) {
  .grid {
    grid-template-columns: 1fr;
    grid-template-areas: "content";
  }
  
}

@media (max-width: 1000px) {
  
  .title {
    font-size: 2.8rem;
  }
  
  .two {
  	font-size: 2.1rem;
  }
  
  .three {
  	font-size: 1.7rem;
  }
  
  .sub-title {
  	font-size: 1.4rem;
  }
    
  .input-row {
    font-size: 1.4rem;
  }
  
  .video-parent {
	margin-left: 50px;
	margin-right: 50px;
	margin-top: 20px;
	margin-bottom: 15px;
  }
  
  .modal {
	font-size: 1rem;
   }

	.modal h1 {
		font-size: 1.5rem;
	}
}

@media (max-width: 800px) {
  .quizbtn {
    flex-direction: column;
  }

  .quizbtn button {
    max-width: initial;
    width: 100%;
  }
  
  .video-parent {
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 15px;
	margin-bottom: 15px;
	border: 6px solid #FFFFFF;
  }
  
  .modal {
	font-size: 0.8rem;
   }

	.modal h1 {
		font-size: 1.3rem;
	}
}

@media (max-width: 500px) {
  
  .brand-name {
    display: none;
  }

  .logo {
    display: none;
  }
  
  .title {
    font-size: 2rem;
  }
  
  .two {
  	font-size: 1.6rem;
  }

  .three {
  	font-size: 1.4rem;
  }
  
  .sub-title {
  	font-size: 1.3rem;
  }
    
  .input-row {
    font-size: 1.1rem;
  }

  .quizbtn button {
    margin: 0;
    font-size: 1.4rem;
    max-width: 100%;
    padding-left: 20px;
	padding-right: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
  }
    
  .form-submit button {
    margin: 0;
    font-size: 1.4rem;
    max-width: 100%;
    padding-left: 20px;
	padding-right: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
  }
  
  .video-parent {
	margin-left: 3px;
	margin-right: 3px;
	margin-top: 10px;
	margin-bottom: 10px;
	border: 3px solid #FFFFFF;
  }

  .modal {
	font-size: 0.8rem;
   }

	.modal h1 {
		font-size: 1.3rem;
	}
	
}