@import url('reset.css');
@import url('global.css');
@import url('home-page-styles.css');
@import url('components/-navigator.css');
@import url('components/-pills.css');
@import url('components/-link-button.css');
@import url('components/-gallerry.css');

.s-wrapper {
    display: flex;
    height: 100vh;
    flex-flow: row nowrap;
}

.s-wrapper video {
    position: fixed;
    width: 100%;
}

.s-wrapper .s-left-column {
    width: 100px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    padding-right: 50px;
    left: 0;
    top: 0;
    z-index: 1;
}

.s-wrapper .s-main-content {
    height: 100%;
    width: 100%;
    padding-left: 130px;
    position: relative;

}

.s-wrapper .s-main-content__top {
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.s-wrapper .s-main-content__bottom {
    height:20vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    
}

.s-wrapper .s-main-content .s-logo img {
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 10px;
}

.s-wrapper .s-main-content__top .s-description {
    background-color: rgba(0, 0, 0, .7);
    max-width: 50%;
    padding: 20px;
    border-radius: 10px;

}

.s-wrapper .s-main-content__top .s-description .s-description__text p {
    color: white;
    line-height: 170%;
}

.s-wrapper .s-main-content__top .s-description .s-description .pills {
    margin-bottom: 20px;
}

.s-wrapper .s-main-content__top .s-description .pills{
    margin-bottom: 20px;
  }
  
  .s-wrapper .s-main-content .s-links{
    padding: 10px;
    padding-left: 0;
  }
  
  .s-wrapper .s-main-content .s-links ul{
    display: flex;
    flex-direction: row;
  }
  /*TOBEY MAGUIRE*/
  .s-spider-man-01-01 {
    background-image: url('../images/spiderman-tobey/movie-01/background.png');
    background-size: cover;
  }

  .s-spider-man-01-02 {
    background-image: url('../images/spiderman-tobey/movie-02/background.png');
    background-size: cover;
  }

  .s-spider-man-01-03 {
    background-image: url('../images/spiderman-tobey/movie-03/background.png');
    background-size: cover;
  }
  /*TOM HOLLAND*/
  .s-spider-man-02-01 {
    background-image: url('../images/spiderman-tom/movie-01/background.png');
    background-size: cover;
  }

  .s-spider-man-02-02 {
    background-image: url('../images/spiderman-tom/movie-02/background.png');
    background-size: cover;
  }

  .s-spider-man-02-03 {
    background-image: url('../images/spiderman-tom/movie-03/background.png');
    background-size: cover;
  }
  /*ANDREW GARFIELD*/
  .s-spider-man-03-01 {
    background-image: url('../images/spiderman-andrew/movie-01/background.png');
    background-size: cover;
  }

  .s-spider-man-03-02 {
    background-image: url('../images/spiderman-andrew/movie-02/background.png');
    background-size: cover;
  }