.buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;

}

.photos {

    padding: 25px;
    margin: 20px;
}


.videos {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.photo_container2{
    display: flex;
    justify-content: center;
    align-items: center;
    width:703px;
    background-color:  #1c1c1e;

}
.close{
    position: absolute;
    top:0%;
    right: 1%;
    display: none;
    background-color:  white;

}
.photo_container2:hover .close{
    display: block;
}
.col-lg-4{

    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;


}
.innerContainer{
    display: flex;
    justify-content: center;
    align-items: center;
    width:399px;
    height:319px;
    box-shadow: 0px 0px 20px -4px rgba(87,84,84,1);

    background-color: #1c1c1e;
}
.innerContainer img{
    height:100%;
    max-width: 100%;

}
.innerContainer video{
    height:100%;
    max-width: 320px;

}

.video_player{
    background-color: #1c1c1e;

}
#photo{
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 500px;

}
.play_button{
    position: absolute;
    width:auto;
    height: 100px;



}
.play{

    opacity: 70%;
}
.innerContainer:hover .play{
    opacity: 100%;

    filter: drop-shadow(0px 0px 6px #ffffff);
}
@media only screen and (min-width:240px) and (max-width:820px) {
    .photo_container2{
        width:90%;

    }
  .phone_view{
   top:25%
  }
  .phone_view{
   top:10%;
   background-color: #1c1c1e;
  }
   @media only screen and (min-width:750px) and (max-width:799px){
  .col-lg-4{
    /* width: 80%; */
   padding: 5px;


  }
  .innerContainer img{

    height:100%;

}
.innerContainer{
    height: 179px;

}
   }
@media only screen and (min-width:800px) and (max-width:950px){
    .innerContainer{
    height: 192px;

}
}