/*
	  Name: primary.css
	  Note: 
	  Description: 
	  Author: Blair Forsberg
	  Date: 5/4/2018
   */
   
/* 
----------Color Palette----------
#00BEF6 Superman Blue
#E20025 Superman Red
#00ffffff Clear 
 */

@font-face {
    font-family: Helvetica, Arial,  sans-serif;
}

body {
	width:96%;
	margin-left: 2em;
}
   
#banner {
	width: 100%;
}

h1, h3, h4 {
	text-align: center;
}

.heroh3 {
	text-decoration: underline overline;
	text-decoration-style: dashed;
	font-size: 2.5em;
	font-weight: bold;
}

#superh3 {
	color: #E20025;
	text-decoration-color: #0000ff;
}

#wonderh3 {
	color: #ff0000;
	text-decoration-color: #0000cc;
}

span {
	color: #fcd904; /* Yellow */
}

#bath3 {
	color: #000000;
	text-decoration-color: #919191;
}

#flashh3 {
	color: #ff0000;
	text-decoration-color: #fcd904; /* Yellow */
}

#lanternh3 {
	color: #07ef2d; /* Green */
	text-decoration-color: #086818; /* Dark Green */
}

#five {
	text-align: center;
	font-size: 4em;
	text-decoration: underline overline;
}

h2 {
	font-size: 3em;
	
}

.indent {
    text-indent: 2em;
}

.heroicon {
	width: 50%;
	display: block;
	margin: 0 auto;
}

#lanternicon {
	margin-top: 3em;
}

#gl {
	margin-top: 2.3em;
}

a {
	font-size: 2em;
	font-weight: bold;
}

footer img {
	display: block;
	margin: 0 auto;
}

.nav-flag {
	/*It is coded like this to match the strips section of the flag */
	background-image: linear-gradient(#2300b2 2%, #2300b2 30%, #2300b2 40%, #2300b2, #ffffff 70%, #ffffff 80%, #ff0000);/* Blue, White, White, Red */
}

.nav-flag a {
	color: #ff0000;
}

.nav-stripes {
	/*It is coded like this to give me the right amount of red and white stripes*/
	background-image: linear-gradient(#ff0000 2%, #ffffff 30%, #ffffff 40%, #ff0000, #ffffff 70%, #ffffff 80%, #ff0000); /* Red, White, White, Red, White, White, Red */
}

.nav-stripes a {
	color: #2300b2;
}
/*--------------Bootstrap Overrides Section------------------------*/
/* To get rid of the rounded edges */
.nav-pills > li > a {
  border-radius: 0px;
}

.nav-pills > #superman > a:hover {
  color: #E20025; /* Red */
  background-color: #00BEF6; /* Blue */
}

.nav-pills > #wonderwoman > a:hover {
  color: #fcd904; /* Yellow */
  background-image: linear-gradient(#cc0000, #cc0000, #0000cc); /* Red & Blue */
}

.nav-pills > #batman > a:hover {
  color: #000000; /* Black  */
  background-color: #919191; /*Grey*/
}

.nav-pills > #greenlantern > a:hover {
  color: #07ef2d; /* Green */
  background-color: #086818; /* Dark Green */
}

.nav-pills > #flash > a:hover {
  color: #fcd904; /* Yellow */
  background-color: #ff0000; /* Red */
}

.nav-pills > #aquaman > a:hover {
  color: #086818; /* Dark Green */
  background-color: #ffa000; /* Orange */
}

/* to change the hover */
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
	color: #fcd904; /* Yellow */
	font-weight: bold;
	text-decoration: underline;
}

#carousel-example-generic, #history {
	margin-top: 1.6em;
}

.jumbotron p {
  font-size: 24px;
  font-weight: 200;
}