*, *:before, *:after {
  box-sizing: border-box;
}

.top{
	width:100%;
	height:100px;
	background-color:#fff;
	position:relative;
}
.logo{
	position:relative;
	width:620px;
	height:70px;
	top:15px;
	left:0px;
	background:url("logo2.png") no-repeat;
}
.stories {
  display: -webkit-box;
  display: flex;
  background: black;
  flex-wrap: wrap;
}
@media (min-width: 800px) {
  .stories {
    height: 100vh;
    flex-wrap: nowrap;
  }
}
.stories:hover .story {
  opacity: .6;
}

.story {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-flex: 1;
          flex: 1 0 100%;
  text-align: center;
  padding: 2rem 1rem;
  color: white;
  font-size: 0.875rem;
  -webkit-transition: all .7s ease;
  transition: all .7s ease;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
	opacity:0.3;
}
@media (min-width: 400px) {
  .story {
    -webkit-box-flex: 1;
            flex: 1 1 50%;
  }
}
@media (min-width: 800px) {
  .story {
    padding: 1rem;
    -webkit-box-flex: 1;
            flex: 1 1 20%;

  }
}
.story:hover {
  cursor: pointer;
  opacity: 1 !important;
  flex-basis: 50%;

}
.story__inner {
  margin: 0 auto;
  max-width: 300px;
}
.story__title {
  margin: 0 0 1rem; 
  padding:0.625rem;
}

.story__text {
  text-shadow: 0 0 10px black;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .75rem;
}
.story__text p {
  margin: 0 0 1rem;
}
.story__btn {
  display: inline-block;
  text-align: center;
  margin: 0 auto;
  text-decoration: none;
  background: black;
  color: white;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .5em 1em;
  font-size: .875rem;
}
.story__btn:hover {
  background: white;
  color: black;
}