/* Pros and cons box */ .pc-box{ display: flex; flex-wrap: wrap; justify-content: center; margin-bottom:30px; } .ibox{ width: 43%; padding: 15px 15px 25px; position: relative; box-shadow: 10px 5px 20px -5px rgba(0, 0, 0, 0.15); } .ibox ul { margin: 0 auto; width: 85%; position:relative; z-index:10; } .ibox li{ margin-top: 15px; list-style: none; } .pros li:before, .cons li:before { font-family: FontAwesome; display: inline-block; margin-right: 10px; } .pros li:before{ content: "\f00c"; color:#4da970; } .cons li:before { content: "\f00d"; color:#de6c64; } .pros{ margin-right: 2%; background:#dcf9e7; } .pros .bg-icon:before , .cons .bg-icon:before{ position: absolute; font-family: FontAwesome; margin:0 auto; left:0; right:0; text-align:center; top:50%; transform: translateY(-50%); font-size:150px; color:#000; opacity:0.1; } .pros .bg-icon:before{ content: "\f164"; } .cons .bg-icon:before{ content:"\f165"; } .cons{ background: #f1d1cf; } .pc-box h3{ padding:15px; margin-top:-15px; margin-left:-15px; margin-right:-15px; text-align: center; } .pros h3, .cons h3{ font-size:23px; font-weight:600; color: #fff; border-bottom: 2px dashed #ffffff85; } .pros h3{ background: #65d28f; } .cons h3{ background: #de6c64; } .bg-icon { height: 0; } .ibox .fa { color: #000; left: 0; text-align: center; right: 0; transform: translateY(-50%); font-size: 150px; top: 50%; position: absolute; z-index: 1; opacity: 0.07; } @media only screen and (max-width:576px){ .ibox{ width:90% } .pros{ margin-right: 0; margin-bottom:10px; } } /*end box*/