.clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both } .clearfix { zoom: 1 } .ab-getting-started * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .toplevel_page_atomic-blocks #wpcontent, .appearance_page_atomic-blocks #wpcontent { padding-left: 0; } .ab-getting-started { overflow: hidden; margin: 0; } .update-nag + .ab-getting-started { margin-top: 25px; } .ab-getting-started .panel-right .theme-image { background: #64717E; padding: 2% 2% 0 2%; display: inline-block; width: 100%; width: 23%; } .ab-getting-started .panels { margin: 0 0 0 0; } .ab-getting-started .panel { display: inline-block; width: 100%; padding: 4%; background: #fff; font-size: 16px; animation: smoothFade .3s; -moz-animation: smoothFade .3s; -webkit-animation: smoothFade .3s; -o-animation: smoothFade .3s; } @keyframes smoothFade { from { opacity:0; } to { opacity:1; } } @-moz-keyframes smoothFade { from { opacity:0; } to { opacity:1; } } @-webkit-keyframes smoothFade { from { opacity:0; } to { opacity:1; } } .ab-getting-started .panel-left.visible { display: inline-block; animation: smoothFade .3s; -moz-animation: smoothFade .3s; -webkit-animation: smoothFade .3s; -o-animation: smoothFade .3s; } .ab-getting-started .panel p { font-size: 19px; line-height: 1.7; } .ab-getting-started .panel-right p { font-size: 16px; line-height: 1.6; } .ab-getting-started .panel a { text-decoration: none; } .ab-getting-started .panel hr { height: 1px; margin: 2em 0; border: 0; border-top: solid 2px #E6EAED; } .ab-getting-started .panel-left ul, .ab-getting-started .panel-left ol { margin: 0 0 5% 0; background: #f5f4f6; padding: 5% 5% 5% 8%; list-style-type: square; font-size: 19px; line-height: 1.8; } .ab-getting-started .panel-left ul li, .ab-getting-started .panel-left ol li { border-bottom: dotted 1px #ccc; margin-bottom: 20px; padding-bottom: 20px; } .ab-getting-started .panel-left ul li:last-child, .ab-getting-started .panel-left ol li:last-child { border: none; margin-bottom: 0; padding-bottom: 0; } .ab-getting-started .panel-left ul ul { margin-bottom: 0; } .ab-getting-started .panel-left .toc li ul { margin-bottom: 0; padding-bottom: 0; padding-top: 3%; } .ab-getting-started .panel-left .toc li ul li { list-style: square; } .ab-getting-started .panel-left { display: inline-block; display: none; width: 63%; float: left; } .ab-block-theme { max-height: 430px; overflow: hidden; } .ab-getting-started .panel-left img { max-width: 100%; height: auto; border: solid 1px #E6EAED; } .ab-getting-started .panel-left h3 { display: inline-block; } .ab-getting-started .panel-left h3, .ab-getting-started .panel-right h3, .ab-getting-started .panel-right p:first-child { margin-top: 0; } .ab-getting-started .panel-right img { max-width: 100%; } .ab-getting-started .panel-left ul.anchor-nav { padding: 5%; } .ab-getting-started .anchor-nav li { list-style: none; } .ab-getting-started .back-to-top { text-transform: uppercase; font-size: 11px; color: #999; position: absolute; right: 0; top: 8px; } .ab-getting-started .panels h3 { width: 100%; position: relative; padding-right: 90px; } .ab-getting-started h3 .back-to-top { float: right; } .ab-getting-started .panel-right { display: inline-block; width: 32%; float: right; vertical-align: top; } .ab-getting-started .panel-aside { margin-bottom: 40px; background: #f5f4f6; } .ab-getting-started .panel-aside:last-child { margin-bottom: 0; } .ab-getting-started .panel-club { padding: 0; } .ab-getting-started .panel-club .panel-club-inside { padding: 30px 40px; } .ab-getting-started .panel-club img { padding-bottom: 0; width: 100%; max-width: 100%; height: auto; } .ab-getting-started .panel-ab-plugin img { padding: 0; } .ab-getting-started .panel-aside .club-button { width: 100%; text-align: center; line-height: 46px; height: 48px; margin-top: 10px; font-size: 15px; } .ab-getting-started .panel-aside h4 { margin-top: 0; font-size: 1.1em; line-height: 1.4; } .ab-getting-started .panel-aside ul { margin-bottom: 25px; } .ab-getting-started .panel-aside li { list-style-type: square; margin-left: 18px; } #wpbody-content .ab-getting-started .updated, #wpbody-content .ab-getting-started .error { margin-top: 2%; } .ab-getting-started .updated + .intro-wrap, .ab-getting-started .error + .intro-wrap { padding-top: 2%; } .ab-getting-started .intro-wrap { padding: 4% 0 0 0; background: #5a3fd6; background-size: 1400px; } .ab-getting-started .intro { display: inline-block; width: 100%; vertical-align: top; padding: 0 50px; margin-bottom: 4.5%; } .ab-getting-started .intro h3 { font-size: 40px; line-height: 1.2; font-weight: 300; margin: 0; color: #fff; display: inline-block; } .ab-getting-started .atomic-logo { max-width: 245px; display: inline-block; float: right; margin-top: 2px; transition: .3s ease; -webkit-backface-visibility: hidden; transform: translateZ(0); } @media only screen and (max-width:875px) { .ab-getting-started .atomic-logo { float: none; margin-bottom: 6%; } } .ab-getting-started .atomic-logo:hover { transform: scale(1.03); } .ab-getting-started .atomic-logo:active { transform: scale(1); } .ab-getting-started .intro h4 { color: #868B96; font-weight: normal; font-size: 18px; line-height: 1.6; margin: 0; } .ab-getting-started .inline-list { display: inline-block; width: 100%; margin: 0; background: #5a3fd6; padding: 0 50px; } .ab-getting-started .inline-list li { display: inline-block; margin: 0 0 0 0; } .ab-getting-started .inline-list li:last-child { margin-right: 0; padding-right: 0; } .ab-getting-started .inline-list li a { font-size: 18px; text-decoration: none; padding: 25px 30px; display: inline-block; color: #fff; } .ab-getting-started .inline-list li a:active, .ab-getting-started .inline-list li a::-moz-focus-inner, .ab-getting-started ul.inline-list a:focus { outline: none; border: 0; box-shadow: none; } .ab-getting-started ul.toc { padding-left: 5%; } .ab-getting-started .toc li { list-style-type: none; } .ab-getting-started .inline-list li.current a { background: #fff; outline: none; border: none; box-shadow: none; border-top-right-radius: 3px; border-top-left-radius: 3px; color: #5d45c9; } @media (max-width: 875px) { .ab-getting-started .inline-list li.current a { border-radius: 3px; } } .ab-getting-started .inline-list li a i { font-size: 16px; margin-right: 5px; } .ab-getting-started #changelog { display: none; } .ab-getting-started #install-video { display: none; } .ab-getting-started .arrayvideo { padding: 3% 0; } .ab-getting-started #updates-panel ul { border-bottom: 1px dotted #ddd; padding: 1% 0 5% 3%; list-style-position: inside; background: transparent; } .ab-getting-started #updates-panel li { border-bottom: 0; margin-bottom: 0; padding-bottom: 7px; } .ab-getting-started #updates-panel h4 { font-size: 1.1em; margin: .5em 0; } .ab-getting-started #themes.visible + .panel-right { display: none; } .ab-getting-started #themes.visible { width: 100%; } .ab-getting-started .theme-intro { margin-bottom: 4.5%; background: #f5f4f6; padding: 2%; } @media only screen and (max-width:875px) { .ab-getting-started .theme-intro { padding: 5%; margin-bottom: 5%; } } .ab-getting-started .theme-intro-left { max-width: 60%; display: inline-block; } @media only screen and (max-width:1110px) { .ab-getting-started .theme-intro-left { max-width: 54%; } } @media only screen and (max-width:875px) { .ab-getting-started .theme-intro-left, .ab-getting-started .theme-intro-right { max-width: 100%; width: 100%; } .ab-getting-started .theme-intro-right { margin-bottom: 5%; } } .ab-getting-started .theme-intro-left p { font-size: 20px; margin-top: 0; margin-bottom: 0; } .ab-getting-started .theme-intro-right { float: right; display: inline-block; margin-top: 12px; } @media only screen and (max-width:875px) { .ab-getting-started .theme-intro-right { margin-bottom: 0; } } .ab-getting-started .theme-intro-right .button-primary { line-height: 56px; height: auto; font-size: 20px; padding: 10px 20px; } @media only screen and (max-width:875px) { .ab-getting-started .theme-intro-right .button-primary { width: 100%; text-align: center; } } .ab-getting-started .array-theme { display: inline-block; width: 29.6%; margin-right: 5%; margin-bottom: 3%; vertical-align: top; } .ab-getting-started .theme-list .array-theme:nth-child(3n+3) { margin-right: 0; } @media only screen and (max-width:1100px) { .ab-getting-started .theme-list .array-theme { width: 47%; } .ab-getting-started .theme-list .array-theme:nth-child(2n+2) { margin-right: 0; } .ab-getting-started .theme-list .array-theme:nth-child(3n+3) { margin-right: 5%; } } @media only screen and (max-width:875px) { .ab-getting-started .theme-list .array-theme { width: 100%; } .ab-getting-started .theme-list .array-theme:nth-child(2n+2) { margin-right: 0; } .ab-getting-started .theme-list .array-theme:nth-child(3n+3) { margin-right: 0; } } .ab-getting-started .ab-block-feature .theme-image { max-height: 305px; overflow: hidden; width: 100%; } .ab-getting-started #themes .ab-block-feature h3 { padding-right: 0; margin-top: 1.2em; font-size: 18px; } .ab-getting-started h4 .button { float: right; background: #5AC779; color: #fff; border-radius: 3px; font-size: 14px; padding: 3px 6px; vertical-align: middle; margin-top: -5px !important; } @media only screen and (max-width:875px) { .ab-getting-started .intro, .ab-getting-started .theme-image, .ab-getting-started .panel-left, .ab-getting-started .panel-right { width: 100%; float: none; } .ab-getting-started .intro { padding: 0 20px; margin-top: 3%; margin-bottom: 8%; } .ab-getting-started .intro h2 { font-size: 34px; } .ab-getting-started .intro h3 { margin-bottom: 0; } .ab-getting-started .inline-list { padding: 0 20px 25px 20px; } .ab-getting-started .inline-list li { width: 100%; } .ab-getting-started .inline-list li a { width: 100%; display: block; } .ab-getting-started .panel-right .theme-image { width: 100%; margin-bottom: 15px; padding: 6% 6% 0 6%; } .ab-getting-started .enter-license .submit { width: 100%; } .ab-getting-started .activate { width: 100%; float: none; text-align: left; margin-bottom: 20px; } } .clear:before, .clear:after { content: ''; display: table; } .clear:after { clear: both; } .ab-getting-started .button-primary, .ab-getting-started .button-primary.focus, .ab-getting-started .button-primary.hover, .ab-getting-started .button-primary:focus, .ab-getting-started .button-primary:hover { background: #5d45c9; border-color: #4c35b9; box-shadow: none; transition: .3s ease; text-shadow: 0 -1px 1px #4c35b9, 1px 0 1px #4c35b9, 0 1px 1px #4c35b9, -1px 0 1px #4c35b9; } .ab-getting-started .button-primary:hover { box-shadow: inset 0 0 80px rgba(255,255,255, .15); } .ab-getting-started .button-primary:active { border-bottom-color: transparent; border-top-width: 2px; } .ab-getting-started a, .ab-getting-started a:active, .ab-getting-started a:hover { color: #5d45c9; } .ab-getting-started .panel-ab-plugin .panel-club-inside { padding: 0; } .ab-getting-started .panel-ab-plugin ul { margin: 0; } .ab-getting-started .panel-ab-plugin .cell { padding: 30px 40px; border-bottom: solid 1px #e3e3e4; margin: 0; list-style: none; } .ab-getting-started .panel-ab-plugin .cell:last-child { border-bottom-width: 2px; } .ab-quick-start ul i { color: #59bb31; } .ab-getting-started .step-complete .button-primary { pointer-events: none; } .ab-getting-started .panel-title.cell { background: #3e446d; padding: 20px 40px; text-align: center; } .ab-getting-started .panel-title h3 { margin: 0; color: #fff; padding: 0; } .ab-getting-started .panel-title h3 i { margin-right: 6px; } .ab-getting-started h2 { font-size: 30px; line-height: 1.2; } @media (max-width: 875px) { .ab-getting-started h2 { font-size: 26px; } } .ab-getting-started p.wp-caption-text { font-size: 16px; margin-top: .5em; text-align: center; } .ab-getting-started div[id^='attachment'] { max-width: 100% !important; } .ab-theme-image { max-height: 290px; overflow: hidden; display: block; } .ab-block-features { display: inline-block; width: 100%; } #atomic-blocks-panel { width: 100%; } .ab-titles { } .ab-titles h2, .ab-titles p { margin: 0 auto 5% auto; max-width: 820px; } .ab-getting-started .ab-block-split-left h2 { line-height: 1.2; font-weight: normal; font-size: 39px; margin-bottom: 5%; } @media (max-width: 875px) { .ab-getting-started .ab-block-split-left h2 { font-size: 28px; } } .ab-titles p {} .ab-titles .button-primary { font-size: 22px; padding: 15px 25px; height: auto; border-radius: 100px; } .ab-titles .button-primary:active { vertical-align: initial !important; border-top-width: 1px !important; } .ab-block-feature-wrap { background: #f5f4f6; padding: 8% 5% 2% 5%; margin-bottom: 4%; text-align: center; } @media (max-width: 875px) { .ab-block-feature-wrap { padding-bottom: 5%; } } .ab-block-feature-wrap h2 { text-align: center; margin-bottom: 0 !important; } .ab-block-feature-wrap p { margin-top: 1%; margin-bottom: 5%; } @media (max-width: 875px) { .ab-block-feature-wrap p { margin-top: 3%; } } .ab-block-feature-wrap i { color: #c5c0da; font-size: 20px; } .ab-block-split-left, .ab-block-split-right { display: inline-block; width: 49%; vertical-align: top; } @media (max-width: 600px) { .ab-block-split-left, .ab-block-split-right { width: 100%; } } .ab-block-split-left { padding-right: 4%; padding-top: 5%; padding-bottom: 5%; } .ab-block-split-right { background: #188ed5; background-size: 1400px; padding: 5% 5% 0 5%; float: right; } .ab-block-theme img { border: none !important; display: block; } #atomic-blocks-panel.visible + .panel-left + .panel-left + .panel-right { display: none; } .ab-block-feature { display: inline-block; background: #fff; padding: 4% 3% 3% 3%; box-shadow: 0 2px rgba(38, 30, 65, 0.1); border-radius: 5px; width: 30.6%; vertical-align: top; float: left; margin-right: 4%; margin-bottom: 4%; transition: .3s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #themes .ab-block-feature { background: none; padding: 0; box-shadow: none; margin-bottom: 2%; } @media (max-width: 600px) { .ab-block-feature { padding: 8% 4% 3% 4%; } } .ab-block-feature:nth-child(3n+1) { clear: both; } @media only screen and (min-width: 600px) { .ab-block-feature:nth-child(3n+3) { margin-right: 0; } .ab-block-feature:nth-child(3n+1):nth-last-child(-n+3), .ab-block-feature:nth-child(3n+1):nth-last-child(-n+3) ~ .post { margin-bottom: 0; } } @media (max-width: 600px) { .ab-block-feature { width: 100%; margin-right: 0; margin-bottom: 8%; } .ab-block-feature:last-child { margin-bottom: 0; } } .ab-block-feature .ab-block-feature-text, .ab-block-feature .ab-block-feature-icon { display: inline-block; width: 100%; vertical-align: top; } .ab-block-feature .ab-block-feature-text { text-align: center; } .ab-block-feature .ab-block-feature-text h3 { font-weight: 700; margin-bottom: 15px; padding-right: 0; } @media (min-width: 1000px) { .ab-block-feature .ab-block-feature-text h3 { font-size: 22px; } } .ab-block-feature .ab-block-feature-text p { font-size: 16px; } .ab-block-feature .ab-block-feature-icon { text-align: center; margin-bottom: 6%; } .ab-block-feature .ab-block-feature-icon img { max-height: 110px; border: none; } .ab-block-footer { margin-top: 5%; margin-bottom: 3%; } .ab-block-footer-column { width: 32.8%; display: inline-block; text-align: center; border-right: solid 3px #eceaee; padding: 0 3%; } @media (max-width: 600px) { .ab-block-footer-column { width: 100%; padding: 0; border: none; margin-bottom: 40px; } } .ab-block-footer-column:last-child { border-right: none; } .ab-block-footer-column i { color: #5d45c9; font-size: 40px; margin-bottom: 10px; } .ab-getting-started .ab-block-footer-column h3 { padding-right: 0; margin-bottom: 0; font-weight: bold; font-size: 22px; } .ab-getting-started .ab-block-footer-column p { font-size: 17px; margin-bottom: 1.5em; } .ab-block-footer .button-primary { font-size: 18px; border-radius: 100px; padding: 10px 15px; height: auto; font-size: 16px; } .ab-block-footer .button-primary:active { vertical-align: initial !important; border-top-width: 1px !important; color: #fff; background: #5d45c9; } .visit-title { text-align: center; display: inline-block; width: 100%; } .ab-footer { text-align: center; margin-top: 8%; } .ab-getting-started .ab-footer p { } .ab-footer-links a { margin: 0 8px; position: relative; } .ab-footer a:hover { border-bottom: dotted 1px; color: #24282d; } .ab-footer-links a:after { content: "\22C5"; position: absolute; right: -14px; } .ab-footer-links a:last-child:after { display: none; }