/*.circle-icons { display: -webkit-box; display: -ms-flexbox; display: flex; } .circle-icons svg { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .cr-info { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: flex; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; width: 100%; height: 465px; padding: 50px; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; border-radius: 20px; background: #fff; } .cr-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } [class^="cr-box"] { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; width: 90%; z-index: 1; } [class^="cr-box"] div { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .cr-text h2 { font-size: 42px; font-weight: 800; font-family: cursive; } .cr-image img { width: auto; height: 300px; } .cr-icon:hover { -webkit-transform: scale(1.1,1.1); -ms-transform: scale(1.1,1.1); transform: scale(1.1,1.1); } image.cr-icon { display: block; pointer-events: none; } .anim { fill:#000; transform: scale(1.1,1.1); } .cr-icon { cursor: pointer; -webkit-transition: 1s all; -o-transition: 1s all; transition: 1s all; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; transform-box: fill-box; } div[class*="cr-box"] { visibility: hidden; } .cr-wrap .active { visibility:visible !important; };*/ /* Responsive css */ @media only screen and (max-width: 1440px) { body { background-color: #000!important; } }

 <meta name="viewport" content="width=device-width, initial-scale=1">