.infographic-picture { position: relative; display: inline-block; vertical-align: top; } .infographic-picture__image { max-width: 100%; } .infographic-picture__button { position: absolute; display: -webkit-flex; display: -ms-flex; display: flex; -wwebkit-align-items: center; -ms-align-items: center; align-items: center; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; width: 17.1%; height: 27.2%; border-radius: 100%; background: rgba(255,255,255,0); transition: background 0.3s; cursor: pointer; } .infographic-picture__button:after { position: absolute; bottom: 0; left: 50%; margin-left: -20px; width: 40px; height: 40px; opacity: 0.4; border-radius: 40px; background: rgba(0,0,0,0.7) url(http://b1.culture.ru/c/427373/DoubleTap.png) no-repeat 50% 50%; transition: opacity 0.3s; cursor: pointer; content: ""; } .infographic-picture__button:hover { background: rgba(255,255,255,0.5); } .infographic-picture__button:hover:after { opacity: 0.6; } .infographic-picture__box { display: none; } #modal-pictures:after { display: inline-block; height: 100%; vertical-align: middle; content: ""; } #modal-pictures .modal-dialog { display: inline-block; max-width: 630px; width: auto; vertical-align: middle; } #modal-pictures a { color: #900; } .infographic-picture__slider-image { max-width: 100%; } .infographic-picture__slider-caption { padding: 10px; background: #e8e8e8; } .infographic-picture__wrap-slider { margin-top: 20px; width: 100%; } .infographic-picture__text { overflow: hidden; } .infographic-picture__content-img { float: left; padding: 3px; margin-right: 20px; max-width: 200px; box-shadow: 0 0 2px rgba(0,0,0,0.3); border-radius: 200px; border: 1px solid #ccc; } .modal-pictures .close { font-size: 30px; } .modal-pictures__content { overflow: hidden; } @media (max-width: 990px) { .infographic-picture__button { font-size: 14px; font-size: 5vw; } } @media (max-width: 480px) { .infographic-picture__content-img { display: block; float: none; margin: 0 auto 20px; } }