html, body {
text-align: left;
margin: 0;
box-sizing: border-box;
overflow-x: hidden;

}

::-webkit-scrollbar {
    display: none;
}

body {background-color: #143D51;}

/* NOTE: Typefaces */

@font-face {
  font-family: 'Bombastype';
  src: url(fonts/Bombastype.otf);
  font-style: normal;
  font-weight: 100;
}

@font-face {
  font-family: 'PT_Serif';
  src: url(fonts/PT_Serif/PT_Serif-Web-Regular.ttf);
  font-style: normal;
  font-weight: 100;
}


@font-face {
  font-family: 'Raleway';
  src: url(fonts/Raleway/Raleway-Light.ttf);
  font-style: normal;
  font-weight: 100;
}

@font-face {
  font-family: 'Raleway-SemiBold';
  src: url(fonts/Raleway/Raleway-SemiBold.ttf);
  font-style: normal;
  font-weight: 100;
}

@font-face {
  font-family: 'Raleway-SemiBoldItalic';
  src: url(fonts/Raleway/Raleway-SemiBoldItalic.ttf);
  font-style: normal;
  font-weight: 100;
}

@font-face {
  font-family: 'Raleway-LightItalic';
  src: url(fonts/Raleway/Raleway-LightItalic.ttf);
  font-style: normal;
  font-weight: 100;
}





@font-face {
  font-family: 'Source_Sans_Pro';
  src: url(fonts/Source_Sans_Pro/SourceSansPro-Light.ttf);
  font-style: normal;
  font-weight: 100;
}


@font-face {
  font-family: 'SourceSansPro-Black';
  src: url(fonts/Source_Sans_Pro/SourceSansPro-Black.ttf);
  font-style: normal;
  font-weight: 100;
}

@font-face {
  font-family: 'Freight_Text_Medium';
  src: url(fonts/Freight_Text_Medium/Freight_Text_Medium.otf);
  font-style: normal;
  font-weight: 100;
}



h1 {
  font-family: 'Bombastype';
  font-weight: 100;
  font-size: 6em;
}

h2 {
  font-family: 'Raleway-SemiBold';
  font-weight: 100;
  font-size: 1.2em;
  color: #ffffff;
}

h3 {
  font-family: 'Raleway';
  font-weight: 100;
  font-size: 1.4em;
  color: #ffffff;
}


a {font-family: 'Raleway';}

p {
  font-family: 'Raleway';
  font-weight: 100;
  font-size: 1.25em;
  color: #ffffff;
}

ul { list-style-position: inside;}

ul li {
  font-family: 'Raleway';
  font-weight: 100;
  font-size: 1.25em;
  color: #ffffff;
  line-height: 40px;

}

.hero_1_skills_title h3 {font-family: 'Raleway-SemiBold'}

.firstcharacter {
  color: #ffffff;
  float: left;
  font-family: 'Raleway-SemiBold';
  font-size: 80px;
  line-height: 60px;
  padding-right: 8px;
}

.tag-button {font-family: 'Raleway';}

.tag-button_sliver {font-family: 'Raleway';}

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

.firstcharacter {
  font-size: 60px;
}

}



@media screen and (max-width: 650px) {
  h1 {font-size: 3em;}
}



@media screen and (max-width: 650px) {
  h3 {font-size: 1.25em;}
}

@media screen and (max-width: 650px) {
  p {font-size: 1em;}
  .sliver_screen_type_upper h3 {font-size: 1em;}
  .intro h3 {font-size: 1em;}
  .villian_intro h3 {font-size: 1em;}
  .baker_street_type_upper h3 {font-size: 1em;}
  .baker_street_type_lower h3 {font-size: 1em;}



}



hr { display: block;
    border: 0;
    border-top: 2px solid #ffffff;
;}

blockquote { color: #ffffff;
font-size: 1.75em;}


/* NOTE: Navigation */

.topnav {margin-top: 3px;
  overflow: hidden;
  background-color: #08181F;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
    transition-duration: 0.3s;
}

.topnav a {
  float:none;
  display: inline-block;
  color: #ffffff;
  opacity: 0.5;
  text-align: center;
  padding: 20px 45px;
  text-decoration: none;
  font-size: 20px;
  z-index: 99;
}

.topnav a:hover {
  color:white;
  opacity: 1;
  transition-duration: 0.3s;
}

.topnav a::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: #ffffff;
  transform: scaleX(0);
  transition: transform 1s;
}

.topnav a:hover::after {
  transform: scaleX(1)!important;
}




.topnav .icon {
  display: none;
}

.groupnav {align-content: center;
}

@media screen and (max-width: 1220px) {
  .topnav a {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
    width: 0%;
  }
  .topnav {justify-content: flex-end;}
  .groupnav{width: 100%;}
}

@media screen and (max-width: 1220px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }


@media screen and (max-width: 1220px) {
  .topnav a::after {
    content: "";
    display: block;
    width: 0%;
    height: 2px;
    background-color: #ffffff;
    transform: scaleX(0);
    transition: transform 1s;
  }
}





  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* NOTE: container */


.container {position: absolute;
min-height: 100%;
}

/* NOTE: loader */

.loader {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.loader p {
  text-align: center;
  position: absolute;
  font-family: serif;
  text-transform: uppercase;
  font-size: 2em;
  letter-spacing: 4px;
  overflow: hidden;
  background: linear-gradient(90deg, #143D51, #fff, #143D51);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: animate 3s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(20, 61, 81, 0);
}


@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }
}



.load_type {display: hidden;}


/* NOTE: footer */

.footer {width: 100%;
padding-top: 1em;
padding-bottom: 1em;
background-color: #08181F;
position: relative;
 bottom: 0;
 clear: both;
 z-index: 4;
}

.footer h4 {line-height: normal;
  font-family:'Raleway';
margin-bottom: 0;}

.footer_content {margin: 0 auto;
  width: 90%;}

.footer_title { font-family:'Raleway';
color: #ffffff;
opacity:0.7;
font-size: 1.5em;;}

.name {
  font-family:'Raleway';
  color: #B4B9BA;
  line-height: 30px;
}

.name a {
  color: #B4B9BA;
  text-decoration: none;
  transition: 0.3s;
}

.name a:hover {
  text-decoration: underline;
  opacity: 1;
  color: #ffffff;
  transition: 0.3s;
}

.footer_names p {opacity: 0.7;
font-size: 1em;}

.copyright p {opacity: 0.7;
font-size: 1em;}

.footer hr {opacity: 0.7;}


/* NOTE: grid */

#grid_1 {display: grid;
  grid-template-columns: 45% 50% ;

width: 100%;
max-width: 100vw;
margin: auto;
justify-content: center;
align-items: center;
min-width: 100vw;
margin-bottom: 5%;}

#grid_2 {display: grid;
  grid-template-columns: 50% 45% ;
  grid-template-rows: 1fr;
width: 100%;
max-width: 100vw;
margin: auto;
justify-content: center;
align-items: center;
min-width: 100vw;
max-width: 100vw;
margin-bottom: 5%;}



@media screen and (max-width: 650px) {#grid_1 {display: grid;
  grid-template-columns: 50% 50% ;

width: 100%;
max-width: 100vw;
margin: auto;
justify-content: center;
align-items: center;
min-width: 100vw;
margin-bottom: 5%;}
}


@media screen and (max-width: 650px) {#grid_2 {display: grid;
  grid-template-columns: 50% 50% ;

width: 100%;
max-width: 100vw;
margin: auto;
justify-content: center;
align-items: center;
min-width: 100vw;
margin-bottom: 5%;}
}


/* NOTE: heroes and villians CSS */


.intro {
  margin: auto;
  width: 60%;
  margin-top: 15%;
  line-height: 30px;
}


.hero_title {margin: auto;
text-align: center;
margin-top: 12.5%;
color: #ffffff;
margin-bottom: 90px;
}

.hero_title_bs {margin: auto;
text-align: center;

color: #ffffff;
margin-bottom: 90px;
}

.hero_1_img {display: grid;
  grid-column: 1fr / span 1fr;
}



@media screen and (max-width: 650px) {
  .hero_1_img {display: grid;
    grid-column: 1 /span 3;
  }
  .hero_1_img img {width: 90%;
      margin-top: 15%;
  margin-left: 5%;
  margin-right: 5%;
    margin-bottom: 5%;
}
}

/* NOTE: tags */


.container{


  display: flex;
  position: unset;
  height: 100%;
  justify-content: center;
  padding-left: 5%;
  padding-right: 5%;
  margin-bottom: 5%;

}



.tag-button{
  display: inline-block;
  color: #ffffff;
  text-decoration: none;
  background-color: #08181F;
  font-size: 1.25em;

  border: 4px solid #08181F;
  border-radius: 7px;


  padding-left: 1em;
  padding-right: 1em;
  margin-left:0.4em;
  margin-right:0.4em;
  margin-top:0.4em;
  margin-bottom: 0.4em;
}


.tag-button_sliver{
  display: inline-block;
  color: #ffffff;
  text-decoration: none;
  background-color: #143D51;
  font-size: 1.25em;

  border: 4px solid #143D51;
  border-radius: 7px;


  padding-left: 1em;
  padding-right: 1em;
  margin-left:0.4em;
  margin-right:0.4em;
  margin-top:0.4em;
  margin-bottom: 0.4em;
}

.hero_1_overview {grid-column: 2fr/ span 2fr;
margin-left: 5%;
margin-right: 5%;}

.hero_1_title {font-size: 3em;
text-align: center;
line-height:0px;
padding-right: 5%;
padding-left: 5%;}


.hero_1_skills_title h3 {text-align: center;
color: #ffffff;
opacity: 1;}


.hero_1_skills ul li {color: #ffffff;
  margin-left: 5%;
  margin-right: 5%;
 list-style-position: inside;}


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

    .hero_title {margin-bottom: 0px;}

    .hero_1_text{grid-column: 1/ span 3;
    margin-left: 5%;
    margin-right: 5%;}

    .hero_1_title {font-size: 1.5em;
    text-align: center;
    line-height: 0px;}

  }

  .skills_grid {display: grid;
  grid-template-columns: 50% 50%;
  width: 100%;
  margin: auto;

justify-content: center;
align-items: center;
}


.hero_1_skills_1 {display: grid;
grid-column: 1 / span 1;}

.hero_1_skills_2 {display: grid;
grid-column: 2 / span 2;}

/* NOTE: hero 2 */



.hero_2_text {display: grid;
  grid-column: 1 / span 1;
grid-row: 1 / 1;}

.hero_title {margin: auto;
text-align: center;
margin-top: 12.5%;
color: #ffffff;
margin-bottom: 90px;
}

.hero_2_img {display: grid;
  grid-column: 2 / span 2;
  grid-row: 1 /1;
}


@media screen and (max-width: 650px) {
.hero_2_text {display: grid;
  grid-column: 1 / span 1;
grid-row: none;}

.hero_2_img {display: grid;
  grid-column: 2 / span 2;
  grid-row: 1 /1;
}
}


@media screen and (max-width: 650px) {
  .hero_2_img {display: grid;
    grid-column: 1 /span 3;
  }
  .hero_2_img img {width: 90%;
    margin-top: 15%;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 5%;
}
}

.hero_2_overview {grid-column: 1/ span 1;
margin-left: 5%;
margin-right: 5%;}

.hero_2_title {font-size: 3em;
text-align: center;
line-height: 0px;;
padding-left: 5%;
padding-right: 5%;}


.hero_2_skills_title h3 {text-align: center;
color: #ffffff;
opacity: 1;}


.hero_2_skills ul li {color: #ffffff;
  margin-left: 5%;
  margin-right: 5%;
 list-style-position: inside;}


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

    .hero_title {margin-bottom: 0px;}

    .hero_2_text{grid-column: 1/ span 3;
    margin-left: 5%;
    margin-right: 5%;}

    .hero_2_title {font-size: 1.5em;
    text-align: center;
    line-height: 0px;}

  }

  .skills_grid {display: grid;
  grid-template-columns: 50% 50%;
  width: 100%;
  margin: auto;

justify-content: center;
align-items: center;
}


.hero_2_skills_1 {display: grid;
grid-column: 1 / span 1;}

.hero_2_skills_2 {display: grid;
grid-column: 2 / span 2;}



/* NOTE: blockquote */


.quote { background-color: #08181F;

display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 60vh;
margin-bottom: 90px;
text-align: center;
}

.quote blockquote{
  margin: auto;
  width: 60%;
  display: inline-block;
  text-align: left;
  padding: 20px 0px;
  font-family:'Raleway-LightItalic';
}


.quote_name {font-weight: lighter;
  font-family:'Raleway-LightItalic';
margin-top: 40px;
opacity: 0.7;}

.quote_title  {font-family:'Raleway-LightItalic';}

/* NOTE: villains Intro */


.villian_intro {
    margin: auto;
    width: 60%;
    margin-top: 15%;
    line-height: 30px;
}


/* NOTE: 221b Baker Street Page */


/* NOTE: background image top */

.baker_street_top_image::after {
  content: "";
  background: url("images/parliment_cityscape_2.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center,bottom;
  height: 160%;
  opacity: 0.6;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
  margin-bottom: 0px;

}

.baker_street_top_image {
  position: relative;
  padding-top: 10%;
}





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

    .baker_street_top_image::after {width: 300%; left: -200%;
      height: 200%;
/* or width: 200%; left: -50%;
   or width: 400%; left: -150%; */
}
  }



/* NOTE: baker_street_type_upper */

.baker_street_type_upper {
justify-content: center;
align-items:center;
width: 100%;
line-height: 90px;
height: 60vh;
margin-bottom: 12.5%;
text-align: center;}

.baker_street_type_upper h3{margin: auto;
  display: inline-block;
  text-align: left;
width: 60%;

line-height: 30px;
}


@media screen and (max-width: 650px){
  .baker_street_type_upper {margin-bottom: 75%;}
  .baker_street_type_upper h3{
    width: 80%;
  }

}
@media screen and (max-width: 435px){
.baker_street_type_upper {margin-bottom: 114%;}
}

/* NOTE: baker_street_type_lower */

.baker_street_type_lower {
  width: 100%;
  line-height: 90px;
  height: 60vh;
  text-align: center;
  padding-top: 10%;
  padding-bottom: 10%;
  justify-content: center;
  align-items: center;

}



.baker_street_type_lower h3 {   margin: auto;
  display: inline-block;
  text-align: left;
width: 60%;

line-height: 30px;}



@media screen and (max-width: 650px) {
  .baker_street_type_lower h3{
    width: 80%;
  }

}



/* NOTE: Map */

#map {
  border-radius: 5px;
  margin: 0 auto;
  width: 100%;
  height: 500px;
}


.dark_background {height:30vh;
color: red;}

/* NOTE: baker street Door */



.baker_street_door::after {
  content: "";
  background: url("images/221b_baker_street.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100vh;
  opacity: 0.2;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
  margin-bottom: 0px;
  justify-content: center;
  align-items:center;
}

.baker_street_door {
  position: relative;
}


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

  .baker_street_door::after {width: 300%; left: -100%;
    height: 97vh;
/* or width: 200%; left: -50%;
 or width: 400%; left: -150%; */
}
}

/* NOTE: sliver screen page */

/* NOTE: background image top sliver screen */

.sliver_screen_top_image::after {
  content: "";
  background: url("images/parliment_cityscape_1_4.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center,bottom;
  height: 100%;
  top: 20%;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -2;
  margin-bottom: 0px;

}

.grid_container {margin-top: 90px;}





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

    .sliver_screen_top_image::after { display: none;
      width: 300%; left: -200%;
      height: 200%;
/* or width: 200%; left: -50%;
   or width: 400%; left: -150%; */
}
  }



  /* NOTE: Sherlock Silhouette sliver screen */

  .sliver_screen_sherlock_image::after {
    content: "";
    background: url("images/sherlock_silhouette_1.svg");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: right,bottom;
    width: 50%;
    height: 100%;
    opacity: 1;
    top: 10%;
    left: 60%;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
    margin-bottom: 0px;

  }
  @media screen and (max-width: 650px) {
  .sliver_screen_sherlock_image::after {
    content: "";
    background: url("images/sherlock_silhouette_1.svg");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position:bottom;
    width: 50%;
    height: 100%;
    opacity: 1;
    top: 0;
    left: 60%;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
    margin-bottom: 0px;

  }
}






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

      .sliver_screen_sherlock_image::after {width: 100%; left: 0%;
        height: auto;
        opacity: 1;
  /* or width: 200%; left: -50%;
     or width: 400%; left: -150%; */
  }
    }


    /* NOTE: Bottom Background Sliver Screen */

    .bottom_section_bg {width: 100%;
    height: 100%;
  background-color: #08181F;}




  /* NOTE: sliver_screen_type_upper */

  .sliver_screen_type_upper {
  justify-content: center;
  align-items:center;
  width: 100%;
  line-height: 90px;
  height: 43vh;
  text-align: center;}

  .sliver_screen_type_upper h3{margin: auto;
    display: inline-block;
    text-align: left;
  width: 60%;
  line-height: 30px;
  }


  @media screen and (max-width: 650px){
    .sliver_screen_type_upper {margin-bottom: 0%;}
    .sliver_screen_type_upper h3{
      width: 80%;
    }

  }
  @media screen and (max-width: 435px){
  .sliver_screen_type_upper {margin-bottom: 114%;}
  }


  /*------Buttons------*/

  .button {
    display:run-in;
    border-radius: 7px;
    padding: 5px 0px;
    margin-left: 5%;
    margin-right: 5%;
    color: #ffffff;
    text-align: center;
    font-size: 1em;
    cursor: pointer;
    text-decoration: none;
    transition-duration: 0.5s;
  }

  .button span {
    cursor: pointer;
    display: inline-block;
    position: relative;

  }
  .button{width: 90%;
border: 2px solid #ffffff;}

  .button:hover {
      background-color: #143D51;
      border: 2px solid #143D51;
      color: #143D51;
      transition-duration: 0.5s;

  }



.button p {line-height: 0;}



  .button span {
  cursor: pointer;
  display: inline-block;
  position: relative;

  }

  .button:hover {
    background-color: #143D51;
    transition-duration: 0.5s;
  }

  .button p{
    color: #ffffff;}



  /* NOTE: Index Page */

  .fade_in { opacity: 0;

    animation: fade_in 2.75s ease-in 2.75s forwards;
  }

  @keyframes fade_in {



  100% {
    opacity:1;
  }

  }
  @media screen and (max-width: 650px) {
    .tag-button_sliver {font-size: 1em;}
    .tag-button {font-size: 1em;}
      .intro {width: 80%;}
      .villian_intro {width: 80%;}
      .quote blockquote {width:90%;}
    blockquote {font-size: 1.25em;}
  }


  .book img {width:50%;
  padding-left: 25%;
padding-right: 25%;
justify-content: center;
align-items: center;
padding-top: 5%;
padding-bottom: 5%;}



  /* NOTE: home_screen_type */

  .home_screen_type {
  justify-content: center;
  align-items:center;
  width: 100%;
  line-height: 90px;
  text-align: center;}

  .home_screen_type h3{margin: auto;
    display: inline-block;
    text-align: left;
  width: 60%;
  line-height: 30px;
  }


  @media screen and (max-width: 650px){
    .home_screen_type{margin-bottom: 0%;}
    .home_screen_type_h3{
      width: 80%;
      font-size: 1em;
    }

    .book img {width: 70%;
    padding-left: 15%;
  padding-right: 15%;}

  .home_screen_type h3 {font-size: 1em;}

  }
  @media screen and (max-width: 435px){
  .home_screen_type {margin-bottom: 114%;}
  }