* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Lato", sans-serif; } .wpc-show-on-top{ z-index: 100; } #google-content-body { overflow: hidden; position: relative; max-width: 1920px; margin: 0 auto; padding-bottom: 350px; } a.cta-text { text-align: center; text-decoration: none; color: #3e8ddd; } main { position: relative; } ul li { list-style-type: none; } header { background: url("//p4-ofp.static.pub/ShareResource/na/google/lenovo-google-hero-mobile.jpg") no-repeat center; height: 100px; color: #fff; padding: 10px; text-align: center; } header .google-hero-content h2 { font-size: 28px; font-weight: bold; margin-bottom: 5px; } header .google-hero-content .copy-mobile { font-size: 14px; } header .google-hero-content .copy-desktop { display: none; } .business-card-prices { min-height: 45px; } .business-monthly-old-price, .business-monthly-price, .enterprise-monthly-old-price, .enterprise-monthly-price, .enterprise-annual-old-price, .enterprise-annual-price { display: none; } .scroll-toggle-container, .scroll-toggle-container-desktop { background-color: #f3f3f3; position: fixed; top: -200px; opacity: 0; left: 0; right: 0; z-index: 2321; max-width: 100vw; } .scroll-toggle-inner-container { background-color: #f3f3f3; height: 150px; display: flex; width: 90%; margin: 0 auto; display: grid; grid-template-columns: repeat(6, 1fr); } .scroll-toggle-inner-container .toggle-plans { display: flex; flex-direction: column; justify-content: space-around; grid-column: 1 / 4; width: 100%; } .scroll-toggle-inner-container .scroll-plan-tiles { grid-column: 4 / 7; } .scroll-toggle-inner-container .toggle-plans .arrows-selectors { display: flex; margin-right: 10px; } .scroll-toggle-inner-container .toggle-plans .arrows-selectors img { height: 26px; } .scroll-toggle-inner-container .toggle-plans .arrows-selectors div p { font-size: 14px; color: #a8a8a8; } .scroll-toggle-inner-container .toggle-plans .arrows-selectors .business-selector { margin-right: 10px; } .scroll-toggle-inner-container section .plan-tiles-container { height: 100%; } .scroll-toggle-inner-container section .plan-tiles-container .plan-tile-item { height: 100%; display: flex; } .scroll-toggle-inner-container section .plan-tiles-container .plan-tile-item .plan-tile { width: 33%; height: 150px; display: flex; position: relative; border: 1px solid #e5e5e5; } .scroll-toggle-inner-container section .plan-tiles-container .plan-tile-item .plan-tile.tier-1 { border-bottom: 3px solid #6ac346; } .scroll-toggle-inner-container section .plan-tiles-container .plan-tile-item .plan-tile.plan-tile.tier-2 { border-bottom: 3px solid #e1140a; } .scroll-toggle-inner-container section .plan-tiles-container .plan-tile-item .plan-tile.tier-3 { border-bottom: 3px solid #3e8ddd; } .scroll-toggle-inner-container section .plan-tiles-container .plan-tile-item .plan-tile h2 { transform: rotate(-90deg) translateY(-50%); width: 150px; font-size: 14px; position: absolute; transform-origin: top left; left: 50%; bottom: -10px; } .scroll-toggle-inner-container section .plan-tiles-container .plan-tile-item .plan-tile .enterprise-tile-title { opacity: 0; } .scroll-toggle-inner-container section .plan-tiles-container .plan-tiles-enterprise-container { display: none; } .toggle-plans { display: flex; width: 90%; margin: 0 auto; align-items: center; justify-content: center; margin-top: 20px; } .toggle-tiles-container .toggle-plans > p { display: none; } .business-selector, .enterprise-selector { display: flex; align-items: center; } .business-selector:hover, .enterprise-selector:hover { cursor: pointer; } .business-selector:hover img { transform: translateX(-10px); } .enterprise-selector:hover img { transform: translateX(10px); } .business-selector img, .enterprise-selector img { height: 26px; transition: all ease .2s; } .business-selector img { margin-right: 10px; } .enterprise-selector img { margin-left: 10px; } .toggle-container { position: relative; width: 150px; height: 30px; background-color: #ddd; border-radius: 30px; margin: 0 20px; } .toggle-container p { font-size: 14px; position: absolute; width: 50%; text-align: center; line-height: 30px; z-index: 1; font-weight: bold; transition: all .2s ease; } .toggle-container .annual { left: 0; color: #fff; } .toggle-container .monthly { right: 0; color: #b1b1b1; } #toggle-checkbox { width: 100%; height: 100%; margin: 0; padding: 0; appearance: none; position: absolute; z-index: 11; } .toggle-slider { width: 50%; height: 100%; position: absolute; top: 0; left: 0; background-color: #0d5c91; border-radius: 30px; z-index: 0; transition: all .2s ease; } #toggle-checkbox:checked ~ .toggle-slider { left: 50%; } #toggle-checkbox:checked ~ .annual { color: #b1b1b1; } #toggle-checkbox:checked ~ .monthly { color: #fff; } .plans-tiles .plan-tiles-container .plan-tiles-business-container, .plans-tiles .plan-tiles-container .plan-tiles-enterprise-container, #plan-tiles-business-container .plan-tiles-business-container { display: -webkit-box; display: -ms-flexbox; display: flex; overflow-x: scroll; width: 100%; margin: 30px 0; } .plans-tiles #plan-tiles-enterprise-container { transform: translateX(100%); opacity: 0; display: none; } .plans-tiles .plan-tiles-container .plan-tile { background-color: #fff; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-width: 270px; max-width: 270px; height: 210px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 10px; border-radius: 4px; -webkit-box-shadow: 0px 3px 5px #00000029; box-shadow: 0px 3px 5px #00000029; } .plans-tiles .plan-tiles-container .plan-tile h2 { font-size: 22px; } .plans-tiles .plan-tiles-container .plan-tile.tier-1, .plans-tiles .plan-tiles-container .plan-tile.enterprise-essentials, .scroll-toggle-container-desktop #plan-tiles-business-container .plan-tiles-business-container .scroll-desktop-plan-tile.tier-1 { border-top: 7px solid #6ac346; } .plans-tiles .plan-tiles-container .plan-tile.tier-1 h2, .plans-tiles .plan-tiles-container .plan-tile.enterprise-essentials h2, .scroll-toggle-container-desktop #plan-tiles-business-container .plan-tiles-business-container .scroll-desktop-plan-tile.tier-1 h2 { color: #6ac346; } .plans-tiles .plan-tiles-container .plan-tile.tier-2, .plans-tiles .plan-tiles-container .plan-tile.enterprise-standard, .scroll-toggle-container-desktop #plan-tiles-business-container .plan-tiles-business-container .scroll-desktop-plan-tile.tier-2 { border-top: 7px solid #e1140a; } .plans-tiles .plan-tiles-container .plan-tile.tier-2 h2, .plans-tiles .plan-tiles-container .plan-tile.enterprise-standard h2, .scroll-toggle-container-desktop #plan-tiles-business-container .plan-tiles-business-container .scroll-desktop-plan-tile.tier-2 h2 { color: #e1140a; } .plans-tiles .plan-tiles-container .plan-tile.tier-3, .plans-tiles .plan-tiles-container .plan-tile.enterprise-plus, .scroll-toggle-container-desktop #plan-tiles-business-container .plan-tiles-business-container .scroll-desktop-plan-tile.tier-3 { border-top: 7px solid #3e8ddd; } .plans-tiles .plan-tiles-container .plan-tile.tier-3 h2, .plans-tiles .plan-tiles-container .plan-tile.enterprise-plus h2, .scroll-toggle-container-desktop #plan-tiles-business-container .plan-tiles-business-container .scroll-desktop-plan-tile.tier-3 h2 { color: #3e8ddd; } .old-price { font-size: 15px; font-weight: bold; text-decoration: line-through; } .price { font-size: 22px; font-weight: bold; } .plans-tiles .plan-tiles-container .plan-tile .discount { font-size: 14px; min-height: 18px; } .cta-button { width: 90%; display: block; height: 45px; display: flex; align-items: center; justify-content: center; text-align: center; border: 1px solid #0d5c91; background-color: #0d5c91; border-radius: 4px; padding: 0 24px; text-decoration: none; color: #fff; font-weight: bold; } .plans-tiles .plan-tiles-container .plan-tile > * { margin: 10px 0; } .plans-tiles .plan-tiles-container .plan-tile .old-price, .plans-tiles .plan-tiles-container .plan-tile .price { margin: 0; text-align: center; } .enterprise-card-title, .enterprise-card-prices { display: none; } .plans-tiles .plan-tiles-container .plan-tile .google-logos { display: none; flex-wrap: wrap; justify-content: center; align-items: center; } .plans-tiles .plan-tiles-container .plan-tile .google-logos img { max-width: 50px; } .plans-tiles .dot-container { text-align: center; padding-bottom: 15px; } .plans-tiles .dot-container .dots { height: 8px; width: 8px; border-radius: 50%; background-color: #bcbcbc; display: inline-block; margin: 0 8px; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } .plans-tiles .dot-container .dot-active { background-color: #000; } .info-tables { width: 90%; margin: 0 auto; position: absolute; left: 50%; top: 400px; transform: translateX(-50%); } .info-tables.business-plans { position: relative; left: 0; right: 0; top: 0; transform: translateX(0); } .info-tables.enterprise-plans { opacity: 0; left: 0; right: 0; top: 410px; transform: translateX(0); } .info-tables .info-item { margin-bottom: 30px; } .wpc-info-item-title { display: flex; flex-direction: row; justify-content: space-between; } .wpc-info-row-container-hidden { display: none; } .wpc-info-item-section-expander { height: 24px; width: 24px; position: relative; right: 0px; top: 16px; display: flex; justify-content: end; } .wpc-info-item-section-expanded { position: relative; right: 0px; top: 8px; height: 6px; width: 16px; background-color: #0d5c91; cursor: pointer; border-radius: 1px; } .wpc-info-item-section-expanded::after { content: ""; display: flex; flex-grow: 1; flex-shrink: 0; height: 6px; width: 16px; background-color: #0d5c91; transform: rotate(0deg); transition: all .2s ease-in-out; } .wpc-info-item-section-compressed { position: relative; right: 0px; top: 8px; height: 6px; width: 16px; background-color: #0d5c91; cursor: pointer; border-radius: 1px; } .wpc-info-item-section-compressed::after { content: ""; display: flex; flex-grow: 1; flex-shrink: 0; height: 6px; width: 16px; background-color: #0d5c91; transform: rotate(90deg); transition: all .2s ease-in-out; } .wpc-info-item-section-border { border-bottom: 3px solid #c3c3c3; } .info-tables .info-item h3 { text-align: center; margin: 10px 0; font-size: 24px; color: #555; } .info-tables .info-item .info-row { display: grid; grid-template-columns: repeat(6, 1fr); border-right: 1px solid #e7e7e7; border-bottom: 1px solid #e7e7e7; } .info-tables .info-item .info-row:first-of-type li:first-child { border-top: 3px solid #c3c3c3; } .info-tables .info-item .info-row:first-of-type li:nth-child(2) { border-top: 3px solid #6ac346; } .info-tables .info-item .info-row:first-of-type li:nth-child(3) { border-top: 3px solid #e1140a; } .info-tables .info-item .info-row:first-of-type li:nth-child(4) { border-top: 3px solid #3e8ddd; } .info-tables .info-item .info-row li { text-align: center; display: flex; align-items: center; justify-content: center; padding: 10px 0; border-left: 1px solid #e7e7e7; font-size: 14px; word-break: break-word; } .info-tables .info-item .info-row .row-title { grid-column: 1 / 4; text-align: left; display: flex; justify-content: start; border-left: 0; } .info-tables .info-item .info-row li svg { width: 30px; } .info-tables .info-item .info-row li .row-item-line { width: 20px; height: .5px; background-color: #bcbcbc; } .scroll-toggle-container-desktop { display: none; } @media screen and (min-width: 400px) { header { background: url("https://p3-ofp.static.pub/ShareResource/na/google/lenovo-google-hero.jpg") no-repeat center; padding: 0; } header .google-hero-content { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, .7); } } @media screen and (min-width: 560px) { .plans-tiles .dot-container .dots.dot3 { display: none; } } @media screen and (min-width: 890px) { .plans-tiles .dot-container { display: none; } .plans-tiles .plan-tiles-container .plan-tiles-business-container, .plans-tiles .plan-tiles-container .plan-tiles-enterprise-container { overflow-x: hidden; justify-content: center; } } @media screen and (min-width: 1280px) { header { height: 400px; } header .google-hero-content { width: 600px; padding: 20px; text-align: left; align-items: flex-start; } header .google-hero-content h2 { text-align: left; font-size: 34px; } header .google-hero-content .copy-mobile { display: none; } header .google-hero-content .copy-desktop { display: block; font-size: 20px; } .scroll-toggle-container { display: none; } .scroll-toggle-container-desktop { display: block; background-color: #fff; box-shadow: 0px 3px 6px #00000014; height: 185px; } .scroll-toggle-container-desktop .scroll-toggle-inner-container-desktop { display: flex; align-items: center; height: 185px; width: 90%; margin: 0 auto; } .scroll-toggle-container-desktop .scroll-toggle-inner-container-desktop .toggle-checkbox-left-content { width: 40%; } .scroll-toggle-container-desktop .scroll-toggle-inner-container-desktop .toggle-checkbox-left-content > p { width: 75%; } .scroll-toggle-container-desktop .scroll-toggle-inner-container-desktop .toggle-checkbox-left-content .toggle-container { margin: 10px 0; } .scroll-toggle-container-desktop .scroll-toggle-inner-container-desktop .plan-tiles-right-content { width: 60%; height: 185px; } .scroll-toggle-inner-container-desktop .business-selector, .scroll-toggle-inner-container-desktop .enterprise-selector { position: absolute; } #plan-tiles-business-container .plan-tiles-business-container { overflow-x: initial; } .scroll-toggle-container-desktop #plan-tiles-business-container .plan-tiles-business-container { margin: 0; height: 185px; display: flex; justify-content: space-between; } .scroll-toggle-container-desktop #plan-tiles-business-container .plan-tiles-business-container .scroll-desktop-plan-tile { width: 32%; min-width: 32%; height: 100%; margin: 0; background-color: #fafafa; box-shadow: none; display: flex; flex-direction: column; justify-content: space-around; align-items: center; text-align: center; } .toggle-tiles-container { display: flex; width: 90%; margin: 0 auto; grid-template-columns: repeat(6, 1fr); min-height: 400px; } .scroll-toggle-container-desktop .business-selector { top: 50%; left: 35%; transform: translateY(-50%); } .scroll-toggle-container-desktop .business-selector p, .toggle-tiles-container .business-selector p { transform: rotate(270deg); } .scroll-toggle-container-desktop .enterprise-selector p, .toggle-tiles-container .enterprise-selector p { transform: rotate(90deg); margin: -30px; } .scroll-toggle-container-desktop .enterprise-selector { top: 50%; right: 0; transform: translateY(-50%); } #plan-tiles-business-container { height: 100%; } .scroll-desktop-plan-tile { width: 32%; min-width: 32%; height: 100%; margin: 0; background-color: #fafafa; box-shadow: none; } .toggle-tiles-container .enterprise-selector { position: absolute; left: 96%; } .toggle-tiles-container .business-selector { position: absolute; right: 58%; } .toggle-tiles-container .business-selector img { margin-right: 0; } .toggle-tiles-container .toggle-plans { width: 40%; flex-direction: column; align-items: self-start; } .toggle-tiles-container .toggle-plans > p { display: block; width: 80%; } .toggle-tiles-container .toggle-plans .toggle-container { margin: 30px 0; } .toggle-tiles-container .plans-tiles { width: 60%; } .plans-tiles .plan-tiles-container .plan-tile { width: 32%; min-width: 32%; height: 100%; margin: 0; background-color: #fafafa; box-shadow: none; } .plans-tiles .plan-tiles-container .plan-tile .google-logos { display: flex; max-width: 200px; } .plans-tiles .plan-tiles-container .plan-tiles-business-container, .plans-tiles .plan-tiles-container .plan-tiles-enterprise-container { display: flex; height: 100%; margin-bottom: 0; justify-content: space-between; } .info-tables .info-item h3 { text-align: left; } .info-tables .info-item .info-row { display: flex; width: 100%; justify-content: space-between; border-bottom: 1px solid #c3c3c3; } .info-tables .info-item .info-row .row-title { width: 39%; background-color: #fff; } .info-tables .info-item .info-row li { width: 19%; border-left: 0; background-color: #fafafa; } .info-tables .info-item .info-row:first-of-type { border-top: 3px solid #c3c3c3; } .info-tables .info-item .info-row:first-of-type li:first-child, .info-tables .info-item .info-row:first-of-type li:nth-child(2), .info-tables .info-item .info-row:first-of-type li:nth-child(3), .info-tables .info-item .info-row:first-of-type li:nth-child(4) { border-top: 0; } .cta-button { padding: 0 10px; } } .btn-wrapper { display: flex; width: 100%; justify-content: flex-start; margin-top: 15px; } .btn-slim { text-decoration: none; background-color: white; color: black; font-size: 16px; border: 1px solid transparent; padding: 13px 29px; border-radius: 4px; font-weight: bold; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; } @media (max-width: 1280px) { .btn-slim { margin: auto; background: 0; color: #fff; } } @media (max-width: 685px) { header { height: 145px; } } @media (min-width: 1280px) { .toggle-container { width: 300px; height: 50px; } .toggle-container p { font-size: 17px; line-height: 50px; } } .wpc-hide-p { display: none  !important; }