.about-wrap .under-the-hood { max-width: 100%; display: flex; justify-content: space-around; flex-direction: row; } pre.changelog { font-size: 12px; background-color: #f5f5f5; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(50%, #f5f5f5), color-stop(50%, #e6e6e6)); background-image: -webkit-linear-gradient(#f5f5f5 50%, #e6e6e6 50%); background-image: linear-gradient(#f5f5f5 50%,#e6e6e6 50%); background-size: 38px 38px; border: 1px solid #d4d4d4; display: block; line-height: 19px; margin-bottom: 10px; overflow: visible; overflow-y: hidden; padding: 0 0 0 4px; } pre.changelog span { font-weight: 700; } .return-to-dashboard.attesa { clear: both; } p.attesa-actions a.skip { opacity: .5; } .about-wrap .two-col .col { margin: 5px; box-sizing: border-box; padding: 1em; text-align: center; background: #e5e5e5; border: 1px solid #ccc; width: 100%; } p.attesa-actions a.docs:focus, p.attesa-actions a.docs:hover, p.attesa-actions a.skip:focus, p.attesa-actions a.skip:hover { opacity: 1; } p.attesa-actions a.button-primary, p.attesa-actions a.button-secondary { text-decoration: none!important; } table { width: 100%; border-collapse: collapse; } td { text-align: center; } .about-wrap { max-width: 100%; } .about-wrap h1 { display: block; text-align: center; width: 100%; font-size: 38px; font-weight: 600; } .welcome-description-wrap { width: 100%; margin: 20px 0; display: flex; justify-content: space-around; flex-direction: row; align-items: center; } .about-wrap .about-text { margin: 20px 10px; flex: 2; } .attesa-screenshot { margin: 20px 10px; flex: 1; } .attesa-screenshot img { box-shadow: -5px 5px 5px 0 rgba(0,0,0,0.12); border-radius: 5px; } .about-wrap table td h3 { margin: 15px; text-align: left; font-size: 15px; } .wrap table { border: 1px solid #e1e1e1; border-collapse: collapse; } .wrap table th { width: 25%; } .wrap table td:first-child { background: rgba(255,255,255,0.4); } .about-wrap table td .table-desc { font-size: 15px; margin: 20px; padding-left: 20px; display: block; text-align: left; } .about-wrap table .table-feature-title > h3 { color: #404040; text-align: left; } .wrap table th:first-child { background-color: rgba(0, 0, 0, 0.1); } .wrap table th:nth-child(2) { background-color: #ffa2c1; } .wrap table th:nth-child(3) { background-color: #f06292; } .wrap table th:last-child { background-color: #bd3563; } .wrap table th h3 { color: #fff; margin: 15px; } tr:nth-child(2n) { background-color: #e7e7e7; } .wrap table td span { font-size: 25px; } .wrap table td .dashicons.dashicons-no { color: #CE2D2D; } .wrap table td .dashicons.dashicons-yes { color: #24B37E; } table tr .btn-wrapper { padding: 10px 0; } table tr .btn-wrapper .button { background-color: #f06292; color: #fff; font-size: 14px; line-height: 0; padding: 27px 0; width: 59%; margin-bottom: 10px; font-weight: 700; } table tr .btn-wrapper .button:hover, table tr .btn-wrapper .button:focus { background: #bd3563 none repeat scroll 0 0; color: #fff; } .option-panel-toggle { margin: 20px 0; } .attesa-changelog-group:before, .attesa-changelog-group:after { content: ""; display: table; table-layout: fixed; } .attesa-changelog-group:after { clear: both; } .attesa-changelog-group .attesa-changelog { float: left; padding: 0 0.5em; box-sizing: border-box; } .attesa-changelog-group.withpro .attesa-changelog { width: 33%; } .attesa-changelog-group.nopro .attesa-changelog { width: 50%; } .attesa-changelog-group pre.changelog { max-height: 400px; overflow-y: auto; } @media (max-width: 1400px) { .about-wrap h1 { font-size: 30px; } .about-wrap .about-text { font-size: 16px; } } @media (max-width: 1200px) { .about-wrap .about-text { font-size: 14px; } .about-wrap table td h3, .about-wrap table td { font-size: 14px; } } @media (max-width: 980px) { .about-wrap h1 { font-size: 25px; } .about-wrap .about-text, .attesa-screenshot { float: none; width: 100%; } .attesa-changelog-group.withpro .attesa-changelog, .attesa-changelog-group.nopro .attesa-changelog { width: 100%; } .attesa-changelog-group pre.changelog { margin-bottom: 10px; } .about-wrap .under-the-hood, .welcome-description-wrap { flex-direction: column; } .about-wrap .about-text { text-align: center; } }