section[data-cattype="603"].wrapper_middle { } [data-cattype="603"] h2 { font-size: 2.5em; color: #fb9202; } [data-cattype="603"] h4{ font-weight: bold; font-size: 20px; } [data-cattype="603"] ul.box { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; margin-top: 80px; padding: 0; } [data-cattype="603"] ul.box li{ width: calc(26% - 20px); text-align: center; list-style:none; padding: 20px; transition: 0.3s; } [data-cattype="603"] ul.box li:hover{ background-color: #ccc !important; transition: 0.3s; } [data-cattype="603"] ul.box li:nth-child(2n+1) { background-color: #e6e6e6; border: 1px solid #e6e6e6; margin: -60px -1px 0px -1px; border-radius: 40px 0px 0px 0px; } [data-cattype="603"] ul.box li:nth-child(even){ background-color: #fff; border: 1px solid #fb9201; margin-bottom: -60px; border-radius: 0px 0px 40px 0px; } [data-cattype="603"] .icon img { width: 70px; margin: auto; } [data-cattype="603"] .icon { border-radius: 50%; background-color: #fff; width: 70px; padding: 12px; margin: auto auto 10px auto; } [data-cattype="603"] .big-icon .icon { padding: 6px; } @media (max-width: 1400px) { } @media (min-width: 768px) and (max-width: 980px) { } @media (max-width: 767px) { } @media (max-width: 480px) { section[data-cattype="603"].wrapper_middle { padding-left: 10px; padding-right: 10px; } [data-cattype="603"] ul.box{ display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch !important; margin-top: 0; } [data-cattype="603"] ul.box li { width: 47% !important; margin: 5px !important; padding: 13px 5px 0px 5px !important; background-color: #e6e6e6 !important; border: 1px solid #fb9201 !important; } [data-cattype="603"] h2 { font-size: 30px; } [data-cattype="603"] h4 { font-size: 17px; } [data-cattype="603"] p { font-size: 15px; } [data-cattype="603"] .icon { width: 50px; } }