модальные окна, бордеры, тени, пропадают на адаптивной верстке (бутстрап)

.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  border: 10px solid #fff;
  box-shadow: 0 15px 15px -15px rgba(0, 0, 0, .5);
}

.hovereffect img {
  display: block;
  position: relative;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
  cursor: hand;
  cursor: pointer;
  width: 100%;
}

.hovereffect:hover img {
  -ms-transform: scale(1.07);
  -webkit-transform: scale(1.07);
  transform: scale(1.07);
}

.hovereffect:hover .overlay {
  opacity: 1;
  filter: alpha(opacity=100);
}

<link href="https://eko-sp.ru/css/bootstrap.css" rel="stylesheet"/>
<link href="https://eko-sp.ru/css/style.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>





<section class="section-padding">
  <div class="container" style="width:100%;padding:0px; ">


    <!-- Grid row -->
    <div class="row grey-v" style="text-align:center; margin:0px; padding:0px; background:#ddd;">

      <!-- Grid column -->
      <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="padding:30px 20px;">
        <div class="hovereffect">
          <a><img class="img-fluid z-depth-1 img-responsive" src="https://eko-sp.ru/images/video1.jpg" alt="video" data-toggle="modal" data-target="#video-modal1"></a>
        </div>
      </div>
      <!-- Grid column -->

      <!-- Grid column -->
      <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="padding:30px 20px;">
        <div class="hovereffect">
          <a><img class="img-fluid z-depth-1 img-responsive" src="https://eko-sp.ru/images/video2.jpg" alt="video" data-toggle="modal" data-target="#video-modal2"></a>
        </div>
      </div>
      <!-- Grid column -->

      <!-- Grid column -->
      <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="padding:30px 20px;">
        <div class="hovereffect">
          <a><img class="img-fluid z-depth-1 img-responsive" src="https://eko-sp.ru/images/video3.jpg" alt="video" data-toggle="modal" data-target="#video-modal3"></a>
        </div>
      </div>
      <!-- Grid column -->

    </div>
    <!-- Grid row -->

  </div>
</section>

<style>
  @media only screen and (max-width: 980px) {
    .closed {
      width: 100%;
    }
  }
  
  .modal.in .modal-dialog {
    -webkit-transform: translate(0, calc(50vh - 50%));
    -ms-transform: translate(0, 50vh) translate(0, -50%);
    -o-transform: translate(0, calc(50vh - 50%));
    transform: translate(0, 50vh) translate(0, -50%);
  }
</style>

<!--Modal: 1-->
<div class="modal fade" id="video-modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin:0px; padding:0px;">
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <!--Content-->
    <div class="modal-content">

      <!--Body-->
      <div class="modal-body" style="padding:0px;margin:0px;">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/90bqPNOVqSw" allowfullscreen></iframe>
        </div>
      </div>

      <!--Footer-->
      <div class="modal-footer justify-content-center">
        <span style="float:left;margin-top:5px;margin-bottom:-10px;" class="hidden-sm hidden-xs">Знакомство с компанией «ЭКОР-СП» и результатами агроиспытаний</span>
        <button type="button" class="btn btn-primary btn-rounded btn-md ml-4 closed" data-dismiss="modal">ЗАКРЫТЬ</button>
      </div>

    </div>
    <!--/.Content-->
  </div>
</div>

<!--Modal: 2-->
<div class="modal fade" id="video-modal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin:0px; padding:0px;">
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <!--Content-->
    <div class="modal-content">

      <!--Body-->
      <div class="modal-body" style="padding:0px;margin:0px;">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/shhvfKfdW68" allowfullscreen></iframe>
        </div>
      </div>

      <!--Footer-->
      <div class="modal-footer justify-content-center">
        <span style="float:left;margin-top:5px;margin-bottom:-10px;" class="hidden-sm hidden-xs">Почему «ЭКО-СП» лучший? Почему необходимо применять «ЭКО-СП»? 10 причин купить «ЭКО-СП»!</span>
        <button type="button" class="btn btn-primary btn-rounded btn-md ml-4 closed" data-dismiss="modal">ЗАКРЫТЬ</button>
      </div>

    </div>
    <!--/.Content-->
  </div>
</div>

<!--Modal: 3-->
<div class="modal fade" id="video-modal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin:0px; padding:0px;">
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <!--Content-->
    <div class="modal-content">

      <!--Body-->
      <div class="modal-body" style="padding:0px;margin:0px;">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/cR_ONNi3NvA" allowfullscreen></iframe>
        </div>
      </div>

      <!--Footer-->
      <div class="modal-footer justify-content-center">
        <span style="float:left;margin-top:5px;margin-bottom:-10px;" class="hidden-sm hidden-xs">Применение «ЭКО-СП» на зерновых-колосовых культурах</span>
        <button type="button" class="btn btn-primary btn-rounded btn-md ml-4 closed" data-dismiss="modal">ЗАКРЫТЬ</button>
      </div>

    </div>
    <!--/.Content-->
  </div>
</div>