*{margin:0;padding:0;} /*Wildcard thing that helps remove space within divs*/

body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; ;
  background: url('Assets/background5.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#go-top {
  border: 2px solid white;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  text-decoration:none;
  color: white;
  display:none;
  font-size: 1.5em;
  background:black;
}
.backtop {
  left: 90%;
  top: 90%;
  position: fixed;
}

/*Banner of every page*/
.banner {
  height: 30em;
}
.banner p {
  margin-top:1.5em;
  text-align: center;
  font-weight: normal;
  color:white;
  font-size:1.5em;
}
.logo-container {
  width:300px;
  margin-left:auto;
  margin-right:auto;
  /* display:none; */
}
.banner img {
  margin-top: 4em;
  width:300px;
  height:300px;
}

.indexnav {
  color: white;
  font-size:1.5em;
  margin-top:3em;
  text-align:center;
}

.indexnav a {
  text-decoration:none;
  color:white;
}

.indexnav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.indexnav li {
    display:inline;
    margin-left:1em;
    margin-right:1em;
    opacity: 0.5;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}

.indexnav li:hover {
  opacity:1;
}

.scrollDown {
  margin-top: 3em;
  width:50px;
  margin-left:auto;
  margin-right:auto;
}

.scrollDown img{
  width:50px;
  height:50px;
  opacity: 0.5;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}

.scrollDown img:hover{
  opacity:1;
}

.backnav {
  margin-top: 10em;
  width:50px;
  margin-left:auto;
  margin-right:auto;
}

.backnav img{
  width:50px;
  height:50px;
  opacity: 0.5;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}

.backnav img:hover{
  opacity:1;
}


/*index.html "Hello There"*/
.hello {
  margin-top:4em;
  background: url('Assets/blueHello.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 10em;
  font-size:1.5em;
  color: white;
  padding:5em;
}
.hello h1 {
  text-align:center;
  font-weight: normal;
}
.hello p {
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  width: 50%;
}
.articleHello {
  display:none;
}

.more {
  margin-top:1em;
  text-align:center;
  width:7%;
  margin-left:auto;
  margin-right:auto;
  border: 2px solid white;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}
.more:hover {
  background:white;
}
.more a{
  text-decoration:none;
  color: white;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}
.more a:hover {
  color:black;
}

.projects {
  background: url('Assets/blueProjects.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: auto;
}
.projects h1 {
  padding-top: 1em;
  text-align:center;
  font-weight:normal;
  color: white;
}

/*Slider 1 styling begins*/

.slider1 img{
  width:640px;
  height:400px;
  display:none;
}
.slider1 {
  width:640px;
  height:400px;
  overflow:hidden;
  margin:60px auto;
}
.shadow {
  background-image:url('Assets/shadow.png');
  background-repeat:no-repeat;
  background-position:top;
  width:640px;
  height:144px;
  background-size: 640px 144px;
  margin:-60px auto;
}

.skills {
  background: url('Assets/blueSkills.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 20em;
  font-size:1.5em;
  color: white;
  padding:1em;
  margin-top: 2em;
}

.articleSkills {
  display: none;
}

.articleSkills h1 {
  text-align:center;
  font-weight: normal;
  margin-top:0em;
}
.skills ul {
  margin-top:0em;
  list-style:none;
}
.skills li {
  margin-top:1em;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  width: 50%;
}


.moreHello {
  margin-top:0em;
  background: url('Assets/blueHelloAgain.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 10em;
  font-size:1.5em;
  color: white;
  padding:5em;
}
.moreHello p {
  width:50%;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
.articleMoreHello {
  display:none;
}

.doodles {
  top: 100%;
  background: url('Assets/blueDoodles.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: auto;
  padding:3em;
}
.doodles h1 {
  padding-top: 1em;
  text-align:center;
  font-weight:normal;
  color: white;
}


/*Slider 2 styling begins*/
.slider2 img{
  width:500px;
  height:500px;
  display:none;
}
.slider2 {
  width:500px;
  height:500px;
  overflow:hidden;
  margin:60px auto;
}
.shadow2 {
  background-image:url('Assets/shadow.png');
  background-repeat:no-repeat;
  background-position:top;
  width:500px;
  height:144px;
  background-size: 500px 144px;
  margin:-60px auto;
}
/*Slider 2 styling ends*/


.form {
  margin-top:3em;
}
.form p {
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  width:50%;
  color:white;
  font-size:1.5em;
  margin-bottom:2em;
}
.form fieldset {
  border: none;
  margin-left:auto;
  margin-right:auto;
  color: white;
  width:50%;
}
.form label {
  display: block;
  margin: 12px 0;
  position: relative;
  font-size: 1.5em;
}
.form input {
  position: absolute;
  left:15%;
  font-size:1em;
  margin: 0 0 12px 0;
  opacity: 0.5;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.form #submit {
  left:20%;
  width: 50%;
}
.form textarea {
  font-size:1em;
  opacity: 0.5;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border:none;
}

.social {
  margin-top: 5em;
  margin-left:auto;
  margin-right: auto;
  text-align:center;
  margin-bottom: 3em;
}

.social ul {
  list-style-type: none;
}

.social li {
  display:inline;
  margin-left: 1em;
  margin-right:1em;
}

.social img {
  width: 50px;
  height: 50px;
  opacity: 0.5;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}

.social img:hover {
  opacity: 1;
}

footer {
  text-align: center;
  color: white;
}
.threeTowersbanner {
  margin-top:5em;
  background: url('Assets/3towersGreen.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 15em;
  font-size:1em;
  color: white;
  padding:5em;
}
.threeTowerstitle h1 {
  position:relative;
  text-align: right;
  margin-left: auto;
  color: white;
  font-weight: normal;
  width:50%;
}


.threeTowers1 {
  background-color: #007236;
  height: auto;
  font-size:1.5em;
  color: white;
  padding:3em;
}
.threeTowersarticle1 {
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  width:50%;
}

.sketchBanner {
  background: url('Assets/gameSketch.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  opacity: 0.5;
  height: 20em;
}


.threeTowers2 {
  background-color: #039a4b;
  height: auto;
  font-size:1.5em;
  color: white;
  padding:3em;
}
.threeTowersarticle2 {
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  width:50%;
}


.gifBanner{
  width: 250px;
  margin-left: auto;
  margin-right: auto;
}
#priest {
  width:79px;
  height:612px;
}

.threeTowers3 {
  background-color: #3cb878;
  height: auto;
  font-size:1.5em;
  color: white;
  padding:3em;
}
.threeTowersarticle3 {
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  width:50%;
}


.openHousebanner {
  margin-top:5em;
  background: url('Assets/openhouseGrey.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 15em;
  font-size:1em;
  color: white;
  padding:5em;
}
.openHousetitle h1 {
  position:relative;
  text-align: right;
  margin-left: auto;
  color: white;
  font-weight: normal;
  width:50%;
}


.openHouse1 {
  background-color: #7d7d7d;
  height: auto;
  font-size:1.5em;
  color: white;
  padding:3em;
}
.openHousearticle1 {
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  width:50%;
}


.screenshotBanner{
  width: 320px;
  margin-left: auto;
  margin-right: auto;
}
#screenshot {
  width:320px;
  height:480px;
}


.openHouse2 {
  background-color: #898989;
  height: auto;
  font-size:1.5em;
  color: white;
  padding:3em;
}
.openHousearticle2 {
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  width:50%;
}


.trioBanner {
  background: url('Assets/openHouseTrio.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  opacity: 0.8;
  height: 20em;
}


.openHouse3 {
  background-color: #9d9d9d;
  height: auto;
  font-size:1.5em;
  color: white;
  padding:3em;
}
.openHousearticle3 {
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  width:50%;
}


.doodlesbanner {
  margin-top:5em;
  background: url('Assets/doodlesOrange.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 15em;
  font-size:1em;
  color: white;
  padding:5em;
}
.doodlestitle h1 {
  margin-top:3em;
  position:relative;
  text-align: center;
  margin-left: auto;
  margin-right:auto;
  color: white;
  font-weight: normal;
  width:50%;
}


#gallery{
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  /*background-color: yellow;*/
}
.image{
  margin: 1em;
  text-align: center;
  width:20%;
  border: 5px solid grey;

  -webkit-filter: grayscale(100%);
  -webkit-transition: all .2s ease;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

.image:hover {
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  filter: grayscale(0%);
}

/*About me page*/
.journeybanner {
  text-align: center;
  background: url('Assets/blueHello.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding: 5em;
  margin-top:5em;
}

.journeybanner h1{
  font-weight:normal;
  color:white;
}

.year {
  text-align:center;
  color:white;
  padding: 1em;
}

.yearcontent{
  width: 50%;
  margin-left:auto;
  margin-right:auto;
  paddding:2em;
}

.year h1{
  font-weight:normal;
}
.year p {
  margin-top: 1em;
  font-size: 1.5em;
}
#oocvideo {
  width:50%;
  height:20em;
  margin-top: 1em;
  margin-left:auto;
  margin-right:auto;
}

#SST {
  margin-top: 0;
  background: url('Assets/SST.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding:3em;
}

#eleven {
  background: url('Assets/appleedu.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding:3em;
}

#twelvethirteen {
    background: url('Assets/sftrip.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding:3em;
}

#fourteen {
  background: url('Assets/iis.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding:3em;
}

#special {
  font-weight:bold;
}

/*iPhone 6 and iPhone 6+ portrait*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){
  #go-top {
    border: 1px solid white;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-size: 1.5em;
  }
  .backtop {
    left: 85%;
    top: 50%;
    position: fixed;
  }

  .banner img {
    margin-top:1em;
  }


  .banner p {
    margin-top:0.5em;
    text-align: center;
    font-weight: normal;
    color:white;
    font-size:1.5em;
  }
  .banner {
    height: 20em;
  }


  .indexnav {
    font-size:1.5em;
    margin-top:5.5em;
    text-align:center;
  }

  .indexnav a {
    text-decoration:none;
    color:white;
  }

  .indexnav ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
  }

  .indexnav li {
      display:inline;
      margin-left:0.5em;
      margin-right:0.5em;
      opacity: 0.5;
      -webkit-transition: all.2s ease;
      -moz-transition: all .2s ease;
      -o-transition: all .2s ease;
      transition: all.2s ease;
  }

  .indexnav li:hover {
    opacity:1;
  }

  .scrollDown {
    margin-top: 1.5em;
    width:50px;
    margin-left:auto;
    margin-right:auto;
  }

  .scrollDown img{
    width:50px;
    height:50px;
    opacity: 1;
  }

  .backnav {
    margin-top: 11em;
    width:50px;
    margin-left:auto;
    margin-right:auto;
  }

  .backnav img{
    width:50px;
    height:50px;
    opacity: 1;
  }

  .hello {
    margin-top:3em;
    background: url('Assets/blueHello.jpg');
    background-position:25% 50%;
    height: 20em;
    font-size: 1.5em;
    padding: 2em;
  }
  .hello h1 {
    width: 100%;
  }
  .hello p{
    width: 100%;
  }

  .more {
    width:20%;
  }

  .slider1 img{
    width:320px;
    height:200px;
    display:none;
  }
  .slider1 {
    width:320px;
    height:200px;
    overflow:hidden;
    margin:60px auto;
  }
  .shadow {
    width:350px;
    height:144px;
    background-size: 350px 144px;
    margin:-60px auto;
  }


  .skills {
    background: url('Assets/blueSkills.jpg');
    background-position:90% 50%;
  }
  .articleSkills {
    display: none;
  }
  .articleSkills h1 {
    text-align:center;
    font-weight: normal;
    margin-top:0em;
  }
  .skills ul {
    margin-top:0em;
    list-style:none;
  }
  .skills li {
    width: 100%;
  }



  .moreHello {
    margin-top:0em;
    background: url('Assets/blueHelloAgain.jpg');
    background-position:center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 15em;
    font-size:1.5em;
    color: white;
    padding:2em;
  }
  .moreHello p {
    width:100%;
  }

  .slider2 img{
    width:250px;
    height:250px;
    display:none;
  }
  .slider2 {
    width:250px;
    height:250px;
    overflow:hidden;
    margin:60px auto;
  }
  .shadow2 {
    background-image:url('Assets/shadow.png');
    background-repeat:no-repeat;
    background-position:top;
    width:250px;
    height:144px;
    background-size: 250px 144px;
    margin:-60px auto;
  }

  .form {
    margin-top: 0em;
    padding:2em;
  }
  .form p {
    width:100%;
  }
  .form label {
    display: block;
    margin: 12px 0;
    position: relative;
    font-size: 1em;
  }
  .form input {
    position: absolute;
    left:15%;
    font-size:1.5em;
    margin: 0 0 12px 0;
    opacity: 0.5;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 80%;
  }
  .form fieldset {
    border: none;
    margin-left:auto;
    margin-right:auto;
    color: white;
    width:100%;
  }
  .form #feedback {
    font-size:1.5em;
    opacity: 0.5;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border:none;
    width:100%;
  }
  .form #submit {
    left:25%;
    width: 50%;

  }

  .social {
    margin-top: 1em;
  }

  .social img{
    opacity: 1;
  }

  .threeTowersbanner {
    margin-top:5em;
    background: url('Assets/3towersGreen.jpg');
    background-position:center center;
    height: 15em;
    font-size:1em;
    color: white;
    padding:5em;
  }
  .threeTowerstitle h1 {
    position:relative;
    text-align: right;
    color: white;
    left:30%;
    width:100%;
  }


  .threeTowers1 {
    padding:2em;
  }
  .threeTowersarticle1 {
    width:100%;
  }


  .sketchBanner {
    background: url('Assets/gameSketch.jpg');
    background-position: right center;
    opacity: 0.5;
    height: 20em;
  }


  .threeTowers2 {
    padding:2em;
  }
  .threeTowersarticle2 {
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    width:100%;
  }

  .threeTowers3 {
    padding:2em;
  }
  .threeTowersarticle3 {
    width:100%;
  }


  .openHousebanner {
    margin-top:5em;
    background: url('Assets/openhouseGrey.jpg');
    background-position: center center;
    height: 15em;
    font-size:1em;
    color: white;
    padding:5em;
  }
  .openHousetitle h1 {
    position:relative;
    text-align: right;
    margin-left: auto;
    color: white;
    font-weight: normal;
    width:100%;
  }


  .openHouse1 {
    padding:2em;
  }
  .openHousearticle1 {
    width:100%;
  }

  .openHouse2 {
    padding:2em;
  }
  .openHousearticle2 {
    width:100%;
  }


  .trioBanner {
    background: url('Assets/openHouseTrio.jpg');
    background-position: center center;
    opacity: 0.8;
    height: 20em;
  }


  .openHouse3 {
    padding:2em;
  }
  .openHousearticle3 {
    width:100%;
  }



  .doodlesbanner {
    margin-top:5em;
    background: url('Assets/doodlesOrange.jpg');
    background-position: center center;
    padding:5em;
  }
  .doodlestitle h1 {
    margin-top:3em;
  }

  #gallery{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: none;
  }
  .image{
    width:100%;
    margin: 1em 0;
    text-align: center;
    border: 5px solid grey;

    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: grayscale(0%);
  }

  .journeybanner {
    width:57%;
    margin-left:auto;
    margin-right:auto;
  }
  .journeybanner h1{
    width:100%;
  }
  .yearcontent{
    width:100%;
  }

  #oocvideo {
    width:100%;
    height:12em;
  }

  #SST {
    margin-top: 0;
    background: url('Assets/SST.jpg');
    background-position: 42% top;
  }

  #eleven {
    background: url('Assets/appleedu.jpg');
    background-position: 38% top;
  }

  #twelvethirteen {
      background: url('Assets/sftrip.jpg');
      background-position: 75% top;
  }

  #fourteen {
    background: url('Assets/iis.jpg');
    background-position: 75% top;
  }
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
{
  #go-top {
    border: 1px solid white;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-size: 1.5em;
  }
  .backtop {
    left: 90%;
    top: 50%;
    position: fixed;
  }


  .banner img {
    margin-top:10em;
  }

  .banner {
    height: 40em;
  }

  .hello {
    height: 10em;
  }
  .hello h1 {
    width: 100%;
  }
  .hello p{
    width: 100%;
  }

  .more {
    width:13%;
  }

  .skills {
    background: url('Assets/blueSkills.jpg');
    background-position:center right;
  }

  .moreHello {
    margin-top:0em;
    background: url('Assets/blueHelloAgain.jpg');
    background-position:top center;
    height: 13em;
    font-size:1.5em;
    color: white;
    padding:5em;
  }

  .moreHello p{
    width:100%;
  }

  .form {
    margin-top: 0em;
    padding:2em;
  }
  .form p {
    width:100%;
  }
  .form label {
    display: block;
    margin: 12px 0;
    position: relative;
    font-size: 1.5em;
  }
  .form input {
    position: absolute;
    left:15%;
    font-size:1.5em;
    margin: 0 0 12px 0;
    opacity: 0.5;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 80%;
  }
  .form fieldset {
    border: none;
    margin-left:auto;
    margin-right:auto;
    color: white;
    width:100%;
  }
  .form #feedback {
    margin-top:1em;
    font-size:1.5em;
    opacity: 0.5;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border:none;
    width:100%;
  }
  .form #submit {
    left:25%;
    width: 42%;
  }

  .social img{
    opacity: 1;
  }

  .yearcontent{
    width:100%;
  }

  #oocvideo {
    width: 90%;
  }

  #SST {
    margin-top: 0;
    background: url('Assets/SST.jpg');
    background-position: 42% top;
  }

  #eleven {
    background: url('Assets/appleedu.jpg');
    background-position: 38% top;
  }

  #twelvethirteen {
      background: url('Assets/sftrip.jpg');
      background-position: 75% top;
  }

  #fourteen {
    background: url('Assets/iis.jpg');
    background-position: 55% 20%;
  }

  .threeTowersbanner {
    margin-top:5em;
    background: url('Assets/3towersGreen.jpg');
    background-position:center 35%;
    height: 15em;
    font-size:1em;
    color: white;
    padding:5em;
  }

  .threeTowersarticle1 {
    width:90%;
  }

  .threeTowers2 {
    padding:2em;
  }
  .threeTowersarticle2 {
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    width:90%;
  }

  .threeTowers3 {
    padding:2em;
  }
  .threeTowersarticle3 {
    width:90%;
  }

  .openHousebanner {
    margin-top:5em;
    background: url('Assets/openhouseGrey.jpg');
    background-position: center center;
    height: 15em;
    font-size:1em;
    color: white;
    padding:5em;
  }
  .openHousetitle h1 {
    position:relative;
    text-align: right;
    margin-left: auto;
    color: white;
    font-weight: normal;
    width:100%;
  }


  .openHouse1 {
    padding:2em;
  }
  .openHousearticle1 {
    width:90%;
  }

  .openHouse2 {
    padding:2em;
  }
  .openHousearticle2 {
    width:90%;
  }


  .trioBanner {
    background: url('Assets/openHouseTrio.jpg');
    background-position: center center;
    opacity: 0.8;
    height: 42em;
  }


  .openHouse3 {
    padding:2em;
  }
  .openHousearticle3 {
    width:90%;
  }

  #gallery{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: none;
  }
  .image{
    width:100%;
    margin: 1em 0;
    text-align: center;
    border: 5px solid grey;

    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: grayscale(0%);
  }
}