h3{
  font-size:4em;
}

.content-wrap{
  width: 85%;
  margin: 0 auto;
  padding: 20px;
}
.brochure-banner{
  margin-top:1em;
}
.brochure-background{
  display:none;
}
.brochure-title{
  font-family: 'roboto', sans-serif;
  display: flex;
    align-items: center;
    font-size: 5em;
    color: black;
    margin-top:0;
    padding-top: 1em;
    margin-bottom:1em;
    padding-left:0.5em;
}
.brochure-p{
  background-color: rgba(0, 183, 185, 0.7);
  width: 30%;
  padding: 2em;
  margin-left: 4em;
  color: white;
  margin-top: 0;
  text-align: center;
  display: flex;
  justify-content: center;
  float: none;
  font-size: 1.9em;
}


.story{
  width:50%;
  margin-bottom:2em;
}
.writing{
  font-size:1.8em;
  width:40%;
  float:right;
}
.aim{
  margin-top:0;
  margin-bottom:2em;
}


.frame{
  width: 45em;
    position: relative;
    float: right;
    right: -5%;
    margin-top:-5em;
}
.covers{
  width:30%;
  margin:0.5em 0.5em
}
.internal{
  width:100%;
  margin:0 0.5em
}

@media screen and (max-width:2000px){
  .brochure-p{
    font-size:1.4em;
  }
  .writing{
    font-size:1.4em;
  }
  .wireframe p{
    font-size:1.4em;
  }

}
@media screen and (max-width:1700px){
  .brochure-banner{
    height:12em;
  }
}
@media screen and (max-width:1500px){
  h3{
    font-size:3.5em;
  }
  .writing{
    font-size:1.2em;
  }
  .wireframe p{
    font-size:1.2em;
  }

}
@media screen and (max-width:1300px)
{
  .brochure-banner{
    height:12em;
  }
  .writing{
    font-size:1.1em;
  }
  .frame{
    width:40em;
    margin-top:-3em;
  }
}
  @media screen and (max-width:1200px){
  .brochure-banner{
    height:12em;
  }
  .brochure-title{
    margin-bottom:0.5em;
  }
  .brochure-p{
      width: 35%;
      margin-left: 5%;
      padding: 1em;
      font-size: 1.3em;
  }
  .writing{
    font-size:1em;
    width:48%;
  }
  .wireframe p{
    font-size:1em;
  }

}
@media screen and (max-width:1000px){
  .scene{
    display:none;
  }
  .writing{
    width:25%;
    margin-left:1em;
  }
  .brochure-title{
    font-size: 4em;
  }
  .brochure-p{
      width: 35%;
      margin-left: 5%;
      padding: 1em;
      font-size: 1.3em;
  }
  .story{
    width:70%;
  }
  .frame{
    width:30em;
    margin-top:-3em;
  }
  .wireframe{
    height:30em;
  }
}
@media screen and (max-width:900px){
  .brochure-banner{
    height:12em;
  }
  .brochure-p{
      width: 45%;
      margin-left: 5%;
      margin-top: 0;
      text-align: center;
      display: flex;
      justify-content: center;
      padding: 1em;
      float: none;
      font-size: 18px;
  }
  .frame{
    margin-top:0;
  }
  .wireframe{
    height:30em;
  }
  .aim{
    margin-bottom:0;
  }
  .wireframe p{
    font-size:1.3em;
  }
}
@media screen and (max-width:800px){
  .frame{
    width: 60%;
  }
}
@media screen and (max-width:700px){
  .brochure-banner{
    height:12em;
  }
  .brochure-title{
    padding-top: 0.5em;
    margin-bottom:0em;
  }
  .story{
    width:100%;
  }
  .writing {
    width:100%;
    float:none;
    display:flex;
    justify-content:center;
    text-align:center;
    margin-top:1em;
    font-size:18px;
  }
  .aim{
    display: flex;
    justify-content:center;
  }
  .scene{
    display:none;
  }
  .wireframe h3{
    margin-top:0;
  }
  .wireframe p{
    width:100%;
    text-align:center;
    font-size:18px;
  }
  .wireframe{
    height:100%;
    background:none;
  }
  .frame{
    width:100%;
  }

}
@media screen and (max-width:600px){

  .brochure-title{
    padding-top: 0.5em;
  font-size: 36px;
  margin-bottom:1em;
  }
  .brochure-banner{
    background:none;
    height:100%;
  }
  .brochure-background{
    display:block;
    width:100%;
    margin-top:1em;
  }
  .brochure-p{
    background-color:white;
  width: 80%;
  margin-left:10%;
  text-align:center;
  display:flex;
  justify-content:center;
  padding: 0;
  float:none;
  font-size: 18px;
  color: black;
  }
  p{
    font-size:18px;
  }
  h3{
    margin-top:0.5em;
    font-size:32px;
  }


}
@media screen and (max-width:400px)
{
  h3{
    font-size:28px;
  }
  p{
    font-size:12px;
  }
  .wireframe p{
    font-size:12px;
  }
  .prototype p{
    font-size:12px;
  }
}