#hero { background: #ceddff; overflow: hidden; margin-bottom: 56px; } .hero__wrapper { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding-top: 15px; padding-bottom: 15px; } .hero__content { flex: 1 1 auto; margin-right: 24px; } .hero__content h1 { font-size: 72px; line-height: 68px; font-weight: 500; margin: 0 0 26px; } .hero__content h3 { font-size: 24px; font-weight: 500; line-height: 1.08; margin: 0 0 10px; } .hero__content ul { font-size: 18px; line-height: 22px; list-style-type: none; margin: 0 0 32px; padding: 0; } .hero__content li { margin-bottom: 4px; position: relative; padding-left: 30px; } .hero__content li:before { content: ' '; display: block; width: 20px; height: 20px; border-radius: 50%; background: #002f34 url(https://static.olx.ro/static/olxro/packed/font/2f44c0d96e30a99a9d02efd8a55a995cab.svg) center center no-repeat; position: absolute; left: 0; top: 2px; background-size: 13px auto; } .hero__images { width: 610px; height: 610px; flex: 0 0 auto; display: flex; justify-content: center; align-items: center; position: relative; } .hero__images:before { display: block; content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; background: #3a77ff; transform: scale(0.6); opacity: 0; animation: circleReveal 0.5s ease-in-out 1s 1; animation-fill-mode: both; } .hero__image { position: relative; z-index: 1; transform: scale(0.9); opacity: 0; height: 480px; width: 240px; background: transparent url(https://static.olx.ro/static/olxro/packed/img/2ffe9e42ce058a21299366c9b196c5854a.png) center center no-repeat; background-size: contain; animation: imageReveal 0.5s ease-in-out 1s 1; animation-fill-mode: both; } @keyframes circleReveal { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes imageReveal { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } .app-icons { display: flex; flex-direction: row; justify-content: flex-start; } .app-icon { flex: 0 0 auto; display: block; padding: 0; margin-right: 8px; background-size: contain; background-repeat: no-repeat; background-position: center center; text-indent: -9999em; overflow: hidden; } .app-icon--app-store { width: 120px; height: 40px; background-image: url(https://static.olx.ro/static/olxro/packed/font/2f03b12198138653ad9a114c6d5a4160b0.svg); } .app-icon--google-play { width: 135px; height: 40px; background-image: url(https://static.olx.ro/static/olxro/packed/font/2f5b5e4e25f1d7ea58a333afb08bbd57d5.svg); } #content { margin-bottom: 56px; } .content__wrapper h2, .slides__title-wrapper h2 { text-align: center; font-size: 32px; line-height: 34px; text-transform: uppercase; font-weight: 500; margin: 0 0 32px; } .features { margin: 0 -8px; display: flex; flex-direction: row; } .features__item { margin: 0 8px; background: #fff; border-radius: 4px; flex: 1 0 0; padding: 24px 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .features__item-image { height: 128px; width: 100%; margin-bottom: 24px; background-size: contain; background-repeat: no-repeat; background-position: center; } .features__item-image--1 { background-image: url(https://static.olx.ro/static/olxro/packed/font/2f10cae904a1d6e3156160bbbb01763bf3.svg); } .features__item-image--2 { background-image: url(https://static.olx.ro/static/olxro/packed/font/2fb078ca10b0c2766b8a5e9ba4f0591383.svg); } .features__item-image--3 { background-image: url(https://static.olx.ro/static/olxro/packed/font/2feedf76ad9e4dc960d9e1265dd713f709.svg); } .features__item h5 { font-size: 20px; line-height: 22px; font-weight: 500; margin: 0 0 8px; } .features__item p { font-size: 14px; line-height: 1.29; font-weight: 200; color: #406367; margin: 0 0 12px; padding: 0 26px; } #slides { width: 100%; overflow: hidden; display: none !important;} .slides__wrapper { margin-left: -28%; margin-right: -28%; } #slides .swiper-slide { opacity: 0.4; transition: opacity 0.3s; } #slides .swiper-slide-next { opacity: 1; } .slides__window { overflow: hidden; position: relative; } .slides__slide { background: #fff; padding: 24px; font-size: 18px; line-height: 24px; width: 508px; box-sizing: border-box; height: auto; display: flex; flex-direction: column; justify-content: flex-start; text-align: left; } .slides__slide-description { color: #406367; margin-bottom: 26px; } .slides__slide-description p { margin: 0 0 18px; } .slides__slide-description p:last-child { margin-bottom: 0; } .slides__slide-name { font-size: 12px; line-height: 16px; text-transform: uppercase; color: #002f34; font-weight: 500; margin: 0; } .slides__title-wrapper { position: relative; } .slides__navigation { position: absolute; right: 33px; top: 50%; margin-top: -12px; display: flex; flex-direction: row-reverse; } .slides__next { margin-left: 38px; } .slides__next, .slides__prev { width: 11px; height: 24px; position: relative; cursor: pointer; } .slides__next:focus, .slides__prev:focus { outline: none; } .slides__next:after, .slides__next:before { top: 50%; border: solid transparent; content: ' '; height: 0; width: 0; position: absolute; pointer-events: none; } .slides__next:after { border-color: rgba(242, 244, 245, 0); border-left-color: #f2f4f5; border-width: 10px; margin-top: -10px; } .slides__next:before { border-color: rgba(0, 47, 52, 0); border-left-color: #002f34; border-width: 13px; margin-top: -13px; } .slides__prev:after, .slides__prev:before { right: 0; top: 50%; border: solid transparent; content: ' '; height: 0; width: 0; position: absolute; pointer-events: none; } .slides__prev:after { border-color: rgba(242, 244, 245, 0); border-right-color: #f2f4f5; border-width: 10px; margin-top: -10px; } .slides__prev:before { border-color: rgba(0, 47, 52, 0); border-right-color: #002f34; border-width: 13px; margin-top: -13px; } #slides .swiper-slide:not(.swiper-slide-active) { opacity: 0.4 !important; } #slides .swiper-slide.swiper-slide-next { opacity: 1 !important; } @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; } .hero__images { width: 520px; height: 520px; } } @media (max-width: 1048px) { .hero__images { width: 460px; height: 460px; } .hero__image { height: 360px; width: 180px; } .hero__content h1 { font-size: 56px; line-height: 56px; } } @media (max-width: 768px) { #hero { margin-bottom: 36px; } .hero__wrapper { padding-top: 24px; padding-bottom: 24px; } .hero__images { display: none; } .hero__content { width: auto; flex: 0 0 100%; } .form__container { flex-wrap: wrap; padding-bottom: 0; margin-bottom: 24px; } .input__container { flex: 1 0 100%; margin: 0 0 8px; flex-direction: column; } .form__container button { flex: 1 0 100%; } label.error { position: static; margin: 12px 0; } .app-icons { display: flex; flex-direction: row; justify-content: center; } .app-icon { flex: 0 1 40%; display: block; padding: 0 4px; margin: 0; } #content { margin-bottom: 36px; } .content__wrapper h2, .slides__title-wrapper h2 { font-size: 26px; line-height: 30px; } .features { display: block; margin: 0; } .features__item { margin: 0 0 24px; padding: 24px; } #slides { margin-bottom: 36px; } .slides__wrapper { margin-left: -38%; margin-right: -38%; } .slides__navigation { display: none; } .slides__slide { font-size: 15px; line-height: 20px; height: 100%; padding: 18px; } .slides__slide-description { margin-bottom: 20px; } }