body{
  background: url(blue-steel-background.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
nav, footer{
  background:#0B0930;
}
.main-container{
  max-width: 1400px;
}
h1, h2, h3, h4{
  font-family: 'Anton', sans-serif;
  letter-spacing: .1em;
}
.block{
  position: relative;
  width:100%;
  height:auto;
  padding:0;
  margin:0;
  display:block;
  box-sizing: border-box;
}

.block > h2{
  position: relative;
  width:100%;
  padding:20px 0;
  margin:0;
  text-align: center;
  color:#ffffff;
  background:#0B0930;
  text-transform: uppercase;
  display:block;
}

.select{
  position: relative;
  width:80%;
  height:auto;
  padding:0;
  margin:0 auto;
  display:block;
}

.select li{
  position: relative;
  float:left;
  width:50%;
  padding:0;
  text-align: center;
  margin:0;
  display:inline-block;
  box-sizing: border-box;
  -webkit-transition: background-color .2s linear;
  transition: background-color .2s linear;
}

.select li:nth-child(1){
  background:#003087;
}
.select li:nth-child(2){
  background:#107C10;
}

.select li:hover{
  cursor: pointer;
  background:#ed1414;
  -webkit-transition: background-color .2s linear;
  transition: background-color .2s linear;
}
.select li.selected:nth-child(1){
  pointer-events: none;
  background:#003087;
}
.select li.selected:nth-child(2){
  pointer-events: none;
  background:#107C10;
}
.choice{
  position: relative;
  width:80%;
  padding:0;
  margin:0 auto 3% auto;
  list-style: none;
  display: none;
}
.choice.selected{
  display:flex;
}
.choice li{
  position: relative;
  float:left;
  width:50%;
  padding:20px;
  text-align: center;
  margin:0;
  flex-grow:0;
}
.choice li > img{
  position: relative;
  float:left;
  width:30%;
}

.choice li > h3{
  position: relative;
  margin:0 0 1% 0;
  padding:10px 0;
  color:#ffffff;
}
.choice.playstation li{
  background:#003087;
}
.choice.xbox li{
  background:#107C10;
}


input[type=submit]{
  position: relative;
  margin:10px 0 0 0;
  padding:10px;
  width: 60%;
  margin:0 auto;
  text-decoration: none;
  background:#fdb927;
  border:0px;
  color:#ffffff;
  font-weight: 600;
  font-size: 20px;
  text-align: center;
  -webkit-appearance: none;
  border-radius: 0;
  display:block;
  box-sizing: border-box;
  -webkit-transition: background-color .2s linear;
  transition: background-color .2s linear;
}

input[type=submit]:hover{
  cursor: pointer;
  color:#ffffff;
  background:#ed1414;
  -webkit-transition: background-color .2s linear;
  transition: background-color .2s linear;
}

.block.one{
  width:80%;
  padding:0;
  margin:0 auto 1% auto;
  box-sizing: border-box;
  overflow: hidden;
}

img.logo{
  position: relative;
  width: 70%;
  margin:2% auto;
  display:block;
}
h1{
  position: relative;
  width:100%;
  color:#ffffff;
  padding:5px 5px 5px 20px;
  margin:0;
  background:#ed1414;
  font-size: 1.3em;
  font-style: italic;
}
.block.one > p{
  margin:20px;
}
p{
  font-size: 1.2em;
  line-height: 1.2em;
  color:#ffffff;
}

.border-radius{
  border:1px solid #ffffff;
  border-radius: 10px 30px;
  background:#7274a3;
}

.block.two{
  width:80%;
  padding:20px 0;
  margin:0 auto 1% auto;
  box-sizing: border-box;
  display: flex;
}

.story-block{
  position: relative;
  float:left;
  width:33.33333333%;
  display:flex;
  flex-grow:0;
}

.story > h3{
  position: relative;
  width:100%;
  color:#ffffff;
  background:#ff2828;
  padding:5px 5px 5px 20px;
  margin:0;
  display:block;
}

.story{
  padding:0;
  margin:5% 10px 0 10px;
  border-radius: 5px 25px;
  border:1px solid #ffffff;
  background:#7274a3;
  overflow:hidden;
  flex-grow:0;
}
.story > p{
  margin:20px;
}
.character-block{
  position: relative;
  width:80%;
  padding:20px 0;
  margin:0 auto 1% auto;
  display: block;
  box-sizing: border-box;
}
.character-block > h2{
  margin:0;
  text-align: center;
  color:#ffffff;
  font-size: 4vh;
}
.char-holding{
  position:relative;
  width:100%;
  height:auto;
  padding:0;
  margin:0;
  display: block;
  box-sizing: border-box;
  overflow:hidden;
}
ul.char-select{
  position: relative;
  width:100%;
  height:auto;
  padding:0;
  margin:0;
  background:#000000;
  display:block;
}

ul.char-select li.char-choice{
  position: relative;
  float:left;
  width:16.66666666666667%;
  height:100px;
  padding:0;
  margin:0;
  opacity:80;
  filter: grayscale(100%);
  -webkit-transition: filter .2s linear;
  transition: filter .2s linear;
  display:block;
}
ul.char-select li.char-choice:hover{
  filter: grayscale(0);
  cursor: pointer;
  -webkit-transition: filter .2s linear;
  transition: filter .2s linear;
}
ul.char-select li.char-choice.selected{
  pointer-events: none;
  filter: grayscale(0);
}
li.char-choice.captain{
  background: url(marvel-avengers-captain-america.jpg) no-repeat 36% center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
li.char-choice.tony{
  background: url(marvel-avengers-iron-man.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
li.char-choice.widow{
  background: url(marvel-avengers-black-widow.jpg) no-repeat 56% center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
li.char-choice.thor{
  background: url(marvel-avengers-thor.jpg) no-repeat 58% center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
li.char-choice.hulk{
  background: url(marvel-avengers-hulk.jpg) no-repeat 68% center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
li.char-choice.marvel{
  background: url(marvel-avengers-ms-marvel-kamala-khan.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.characters{
  position: relative;
  width:100%;
  padding:20px;
  margin:0;
  display:none;
  box-sizing: border-box;
}

.characters.selected{
  display:block;
}

.codename, .name{
  text-transform: uppercase;
  letter-spacing: .1em;
  line-height: 1em;
  margin:0;
}

.codename{
  font-size:2em;
  font-weight: 600;
  color:#ffffff;
}

.name{
  font-size:1.5em;
  font-weight: 200;
  color:#fff8f8;
}
@media(max-width:1024px){
  .block.one{
    width:90%;
  }
  .block.two{
    width:90%;
  }
  .character-block{
    width:90%;
  }
}
@media(max-width:1023px){
  .choice li > img{
    float:none;
    width:100%;
  }
}
@media(max-width:880px){
  .block.one{
    padding:0;
  }
  .block.one > p{
    padding:0;
    margin:20px;
  }
  .block.two{
    padding:0;
    display:block;
  }
  .story{
    margin:5% 0 0 0;
  }
  .story-block{
    float:none;
    width:100%;
    margin:0 0 1% 0;
    display:block;
  }
}
@media(max-width:768px){
  input[type=submit]{
    width:100%;
  }
  .select{
    width:100%;
  }
  .choice{
    width:100%;
  }
}
@media(max-width:653px){
  .block.one{
    margin:0 auto 1% auto;
  }
}