.container-fluid{
    height: 80vh;
  }

  .affix-top{
    position: fixed;
    opacity: 0;
    right: -200px;
  }
  .affix {
    top: 35%;
    right: 20px;
    z-index: 9999 !important;
    transition: 1s;
    opacity: 1;
  }
.scrollspy_con {
  margin-bottom: 10%;
  margin-top: 10%;
}
.scrollspy_con .col-sm-9 {
    width: 85%;
    padding-left: 15%;
}
#myScrollspy .small{
  font-size: 0.7rem;
  margin-left: 20px;
}

.nav>li>a:focus, .nav>li>a{
    text-decoration: none;
    color: #bbb;
}
.nav>li>a:focus, .nav>li>a:hover {
    text-decoration: none;
    color: #333;
    background-color: transparent;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    color: #333;
    background-color: transparent;
  }

  /*big to small*/
    .pic{
      /*animation: bTos 3s;*/
      background-size: cover;
      background-position: 50%;
    }

  @keyframes bTos{
    0%{
      transform: scale(1.3);
      opacity: 0;
    }

    100%{
      transform: scale(1);
      opacity: 1;
    }
  }
#myScrollspy{
  display: none;
}
@media only screen and (min-width: 481px) {

}

@media only screen and (min-width: 1025px) {


}

@media only screen and (min-width: 1200px) {
#myScrollspy{
  display: block;
}
}