@keyframes animation-landing-bundles-intro { 0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.2;} 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } } html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } img { max-width: 100%; } .container { text-align: left; font-size: 12px; margin-right: auto; margin-left: auto; padding-right: 12px; padding-left: 12px; } .lp-bundles-intro { box-shadow: 0 -72px 0 0 #cbf7ee; position: relative; overflow: hidden; } .lp-bundles-intro__content, .lp-bundles-intro__img { position: relative; } .lp-bundles-intro__content { z-index: 2; margin: 0 -12px; padding: 0 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #cbf7ee; height: calc(100vh - 72px); } .lp-bundles-intro__content h2 { font-size: 40px; font-weight: 500; line-height: 1.05; letter-spacing: 0.5px; margin-bottom: 40px; width: 100%; } .lp-bundles-intro__content p { font-size: 18px; line-height: 1.33; width: 100%; } .lp-bundles-intro__content:before { position: absolute; left: 50%; top: 50%; content: ''; border: 100px solid #23e5db; border-radius: 50%; transform: translate(-50%, -50%); width: 700px; height: 700px; z-index: -1; animation: animation-landing-bundles-intro .6s both; } .lp-bundles-options-intro { padding: 66px 0; } .lp-bundles-options-intro__col { margin: 16px 0; } .lp-bundles-options-intro h3 { font-size: 32px; font-weight: 500; margin: 0 0 40px; text-align: center; } .lp-bundles-options-intro__box { display: block; background: #fff; border-radius: 4px; padding: 0 26px 26px; font-size: 20px; font-weight: 500; line-height: 1.1; text-align: center; text-decoration: none !important; transition: 0.4s box-shadow; } .lp-bundles-options-intro__box:hover { box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1); } .lp-bundles-options-intro__icon { height: 142px; width: 100%; padding: 6px 26px; display: flex; align-items: center; justify-content: center; } .lp-bundles-options-intro__info-small { text-align: center; margin: 24px 0 0; color: #406367; line-height: 1.29; font-size: 14px; } .lp-bundles-options { position: relative; } .lp-bundles-options h3 { font-size: 32px; font-weight: 500; margin: 0 0 30px; text-align: center; } .lp-bundles-options h3 .badge-new { min-width: 96px; height: 24px; border-radius: 2px; background: #23e5db; font-size: 12px; font-weight: 500; letter-spacing: 0.8px; display: inline-flex; align-items: center; justify-content: center; text-transform: uppercase; vertical-align: middle; margin-left: 10px; } .lp-bundles-options__text { font-size: 18px; line-height: 1.33; font-weight: 400; text-align: center; margin: 30px auto 40px; max-width: 840px; } .lp-bundles-options__info-small { text-align: center; margin: 24px 0 80px; color: #406367; line-height: 1.29; font-size: 14px; } .bundles-boxes > li { margin: 16px 0; } .bundle-item { background: #fff; border-radius: 4px; padding: 24px; } .bundle-item h4 { font-size: 32px; font-weight: 500; line-height: 1.06; text-align: center; margin-top: 20px; } .bundle-item__info { text-align: center; font-size: 16px; font-weight: 500; line-height: 1.25; margin-top: 18px; color: #3a77ff; } .bundle-item__components { font-size: 14px; line-height: 1.29; margin-top: 35px; margin-bottom: 10px; } .bundle-item__components li { margin-top: 20px; position: relative; padding-left: 42px; } .bundle-item__tick { width: 20px; height: 20px; position: absolute; left: 6px; top: -2px; } .bundle-item__tick svg { width: 100%; height: 100%; fill: #23e5db; } .bundle-item__components .disabled { color: #7f9799; } .bundle-item__components .disabled .bundle-item__tick svg { fill: #d8dfe0; } .bundle-item__more { border-top: 1px solid #eaeaea; padding: 16px 0; display: block; font-size: 13px; text-align: center; } .fade-in-block { opacity: 0; } .lp-bundles-about h3 { max-width: 840px; font-size: 24px; line-height: 1.08; margin: 24px auto; text-align: center; } .bundles-about { background: #fff; margin: 46px 0 0; } .bundles-about__wrapper { min-height: 486px; } .bundles-about__content { padding: 24px; font-size: 16px; line-height: 1.25; } .bundles-about__content h4 { font-size: 32px; font-weight: 500; line-height: 1.06; margin-bottom: 37px; } .bundles-about__content p { margin-bottom: 24px; font-size: 18px; line-height: 1.33; } .bundles-about__img { background: #fafafa; display: flex; align-items: center; justify-content: center; padding-right: 32px; } .bundles-tabs-container { overflow: scroll; margin: 0 0 32px; padding-top: 2px; } .bundles-tabs { display: flex; border-top: 1px solid #7f9799; } .bundles-tabs__item { flex: 0 0 33.3%; max-width: 33.3%; } .bundles-tabs__link { display: flex; align-items: center; justify-content: center; height: 56px; font-size: 14px; line-height: 1.29; text-decoration: none !important; padding: 0 10px; text-align: center; } .bundles-tabs__link.is-selected { font-weight: 500; box-shadow: 0 -3px 0 0 #002f34; } .lp-bundles-promote { position: relative; } .lp-bundles-promote ul { display: flex; flex-wrap: wrap; flex-direction: row-reverse; } .lp-bundles-promote ul li { flex: 0 0 100%; max-width: 100%; padding: 0 130px; display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative; text-align: center; overflow: hidden; z-index: 2; height: 50vh; background: #fff; margin-top: 16px; } .lp-bundles-promote ul li:first-child:before, .lp-bundles-promote ul li:first-child:after { content: ''; position: absolute; top: 0; left: 50%; width: 240px; height: 100%; background: #23e5db; z-index: -1; } .lp-bundles-promote ul li:first-child:before { transform: skewX(45deg) translate(-50%, 0); } .lp-bundles-promote ul li:first-child:after { transform: skewX(-45deg) translate(-50%, 0); } .lp-bundles-promote ul li:last-child { background: #ceddff; } .lp-bundles-promote ul li:last-child:before { position: absolute; left: 50%; top: 50%; content: ''; border: 80px solid #3a77ff; border-radius: 50%; transform: translate(-50%, -50%); width: 440px; height: 440px; z-index: -1; } .lp-bundles-promote ul li h5 { font-size: 32px; font-weight: 500; line-height: 1.06; margin-bottom: 32px; } .lp-bundles-promote ul li .olx-button { font-size: 16px; width: 200px; } @media (max-width: 1285px) { #innerLayout, #header-container .navi { min-width: 0; } .wrapper, #header-container #searchMyaccountBox, #footer-container .sitepopularbox__wrapper { width: auto; } #header-container .navi .postnewlink, #header-container .navi .userbox .userbox-login .link, #header-container .navi .userbox .li--user-logged .userbox-login:before { display: none; } #header-container .navi .userbox .li--user-logged .userbox-login { padding-right: 0; } #header-container .navi .userbox { padding-right: 0; } #header-container .navi .userbox > li { margin-left: 24px; } .footerapps { float: none; clear: left; padding: 40px 0; } } @media (min-width: 1286px) { .container { width: 1238px; padding-left: 12px; padding-right: 12px; } .bundle-item { padding: 32px; } .lp-bundles-intro .container { display: flex; } .lp-bundles-intro:before, .lp-bundles-intro:after { width: 50%; height: 486px; position: absolute; top: 0; content: ''; z-index: -1; } .lp-bundles-intro:before { left: 0; background: #cbf7ee; } .lp-bundles-intro:after { left: 50%; background: #002f34; } .lp-bundles-intro__content, .lp-bundles-intro__img { position: relative; height: 486px; z-index: 2; margin: 0 -24px; } .lp-bundles-intro__content { flex: 0 0 50%; max-width: 50%; margin: 0; left: -63px; padding: 0 100px; } .lp-bundles-intro__content:before { border-width: 130px; width: 810px; height: 810px; } .lp-bundles-intro__img { flex: 0 0 370px; max-width: 370px; margin: 0; background: url(https://static.olx.pl/static/olxpl/packed/img/2fc0c660a2fca6d406385e83540580a9e9.jpg) no-repeat 0 0; background-size: cover; } .lp-bundles-intro__branding-x { width: 486px; height: 486px; position: absolute; overflow: hidden; left: 100%; } .lp-bundles-intro__branding-x:before, .lp-bundles-intro__branding-x:after { content: ''; position: absolute; top: 0; left: 50%; width: 130px; height: 100%; background: #c8f8f6; } .lp-bundles-intro__branding-x:before { transform: skewX(45deg) translate(-50%, 0); } .lp-bundles-intro__branding-x:after { transform: skewX(-45deg) translate(-50%, 0); } .bundles-tabs-container { margin-top: 52px; margin-bottom: 52px; } .lp-bundles-options-intro__row { display: flex; margin: 0 -8px; } .lp-bundles-options-intro__col { padding: 0 8px; flex: 0 0 33.3%; max-width: 33.3%; margin: 0; } .bundles-boxes { display: flex; margin: 0 -8px; } .bundles-boxes > li { flex: 0 0 33%; max-width: 33.3%; padding: 0 8px; margin: 0; } .lp-bundles-about h3 { margin-bottom: 80px; } .bundles-about { margin-bottom: 52px; } .bundles-about__wrapper { display: flex; } .bundles-about__content { flex: 0 0 50%; max-width: 50%; padding: 70px; } .bundles-about__img { flex: 0 0 50%; max-width: 50%; } .lp-bundles-promote ul li { flex: 0 0 50%; max-width: 50%; height: 486px; } .lp-bundles-promote ul li:last-child:before { border-width: 100px; width: 640px; height: 640px; transition: 0.3s ease-in-out transform; } .lp-bundles-promote ul li:first-child:before, .lp-bundles-promote ul li:first-child:after { opacity: 0; transition: 0.3s ease-in-out transform; } .lp-bundles-promote ul li:first-child:before { transform: skewX(45deg) translate(-50%, 0) scale(0.6); } .lp-bundles-promote ul li:first-child:after { transform: skewX(-45deg) translate(-50%, 0) scale(0.6); } .lp-bundles-promote ul li:hover + li { background: #fff; } .lp-bundles-promote ul li:hover + li:before { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } .lp-bundles-promote ul li:first-child:hover { background: #cbf7ee; } .lp-bundles-promote ul li:first-child:hover:before, .lp-bundles-promote ul li:first-child:hover:after { opacity: 1; } .lp-bundles-promote ul li:first-child:hover:before { transform: skewX(45deg) translate(-50%, 0) scale(1); } .lp-bundles-promote ul li:first-child:hover:after { transform: skewX(-45deg) translate(-50%, 0) scale(1); } }