.fl{ float: left; } .fr{ float: right; } .cleaner{ clear: both; height: 0; overflow: hidden } .clearL{ clear: left; height: 0; overflow: hidden } .clearR{ clear: right; height: 0; overflow: hidden } .f7 { font-size: 7pt; } .f8, .f8 th, .f8 td { font-size: 8pt !important } .f9 { font-size: 9pt; } .f10{ font-size: 10pt; } .f11{ font-size: 11pt; } .f12{ font-size: 12pt; } .f13{ font-size: 13pt; } .f14{ font-size: 14pt; } .f15{ font-size: 15pt; } .f16{ font-size: 16pt; } .f17{ font-size: 17pt; } .f18{ font-size: 18pt; } .f19{ font-size: 19pt; } .f20{ font-size: 20pt; } .f21{ font-size: 21pt; } .f22{ font-size: 22pt; } .f23{ font-size: 23pt; } .f24{ font-size: 24pt; } .bold{ font-weight: bold; } .normal{ font-weight: normal; } .nodecor{ text-decoration: none; } .noborder{ border: 0 !important; } .hand{ cursor: pointer !important; } .cdefault, .pointer{ cursor: default !important; } .tleft{text-align: left} .tcenter{text-align: center !important} .tright{text-align: right !important} .decor{text-decoration: underline} .red{ color: #E2483F } .gray{ color: #777777 } .white{ color: white !important } .black{ color: black } .mcenter{ margin: auto !important; float: none; } .nobg{ background: transparent !important } .hidden{display: none} .hiddenI{display: none !important} #null{display: none} .nocellspacing{ border-collapse: collapse; } .nocellpadding td, .nocellpadding th{ padding:0 } .ol{ width: 20px; height: 20px; line-height: 18px; color: white; text-align: center; font-size: 14pt; font-weight: 'Titillium Web'; font-weight: bold; border-radius: 50%; display: inline-block; background-color: #00ADD7; } .data .lang_edit_form .btn{ border: 0px; margin: 0px 0px 0px 10px; padding: 3px 10px !important; height: auto; } .data .lang_edit_form .lang_edit_input{ float: left; width: 70%; min-height: 100px; resize: vertical; } .data .lang_edit_form{ padding: 5px 0px; } .pointer{ cursor: pointer !important; } html, body{ margin: 0; padding: 0; font-family: 'Quicksand'; font-weight: 400; font-size: 13.5pt; line-height: 150%; cursor: default; } .logo{ width: 420px; margin: 115px auto 165px auto; height: 50px; text-transform: uppercase; } .logoIcon{ background: url('/images/logo-icon.svg') center center; width: 57px; height: 50px; float: left; margin-right: 10px; } .logoText1{ font-weight: 700; font-size: 36px; margin: 0 0 3px 0; padding-top: 3px; } .logoText2{ font-weight: 400; font-size: 12px; } .container{ margin: 0 auto; max-width: 1295px; padding: 0 20px; } .textContainer{ margin: 0 auto; max-width: 940px; text-align: center; padding: 0 20px; } .circles{ background: url('/images/lines-4.png') center center no-repeat; width: 100%; height: 266px; text-align: center; font-size: 0; margin-bottom: 165px; } .circle{ width: 222px; height: 230px; display: inline-block; margin: 20px 50px; border-radius: 50%; transition: transform 0.2s ease-in-out; } .circle:hover{ cursor: pointer; transform: rotate(-10deg) translatez(0); } .circle h2{ font-size: 13pt; font-weight: 700; margin: 55px 0 10px 0; text-transform: uppercase; line-height: normal; } .circle p{ font-size: 10pt; margin: 0; line-height: normal; padding: 0 30px; text-align: center; font-weight: 400; } h4{ margin: 0 auto; color: #A600A6; font-size: 20pt; font-weight: 400; } h2{ margin: 15px 0; font-weight: 700; font-size: 27pt; line-height: normal; } .page1 h2{ margin: 85px auto 40px auto;; } p{ margin: 25px 0; } .line{ border-bottom: 1px solid #f4e7f7; height: 0; overflow: hidden; margin: 100px 0; } .page{ text-align: center; } .page2{ border-top: 1px solid #f4e7f7; margin-top: 100px; padding-top: 100px; } .page2 h4{ line-height: 170%; margin: 105px auto !important; } .page2spacer{ height: 50px; } .pointerLeft, .pointerRight{ background: url('/images/arrow-left.svg') left bottom no-repeat; height: 150px; width: 55px; display: inline-block; } .pointerCenter{ display: inline-block; margin-top: -105px; overflow: hidden; padding: 0 20px; } .pointerRight{ background: url('/images/arrow-right.svg') left bottom no-repeat; } .compare1{ margin-bottom: 80px; } .compare1 img{ max-width: 100%; } .benefits{ height: 173px; margin: 100px auto 140px auto; font-size: 0; } .benefit{ display: inline-block; width: 175px; font-weight: 700; text-transform: uppercase; font-size: 15pt; height: 173px; } .benefit b{ display: block; width: 100%; height: calc(100% - 60px); float: left; text-align: center; padding-top: 60px; color: black; } .benefit1{ background: url('/images/benefit-1.png') center center no-repeat; } .benefit2{ background: url('/images/benefit-2.png') center center no-repeat; } .benefit3{ background: url('/images/benefit-3.png') center center no-repeat; } .benefitArrow{ display: inline-block; width: 118px; height: 173px; } .benefitArrow1{ background: url('/images/benefit-arrow-1.png') center center no-repeat; } .benefitArrow2{ background: url('/images/benefit-arrow-2.png') center center no-repeat; } .benefitArrow3{ background: url('/images/benefit-arrow-3.png') center center no-repeat; } .benefitArrow4{ background: url('/images/benefit-arrow-4.png') center center no-repeat; } .pageViolet{ background: #8500a6; background: #6a0384; overflow: hidden; color: white; } .page3, .page4{ padding: 120px 0 0 0; } .pageViolet h2, .pageViolet h4{ color: white; } .textLeft{ float: left; text-align: left; width: calc(50% - 40px); } .textRight{ float: right; text-align: left; width: calc(50% - 40px); } .textLeft img, .textRight img{ max-width: 100%; width: auto; } .page4 .textLeft{ width: calc(55% - 40px); } .page4 .textRight{ width: calc(45% - 40px); } .page4 .line{ margin: 40px 0; } .big{ font-size: 20pt; font-weight: 700; line-height: 150%; } .textLeft .line{ margin: 50px 0; opacity: 0.5; } .page h4{ margin-bottom: 50px; } #furnitureEx .benefit b{ padding-top: 60px; } #furnitureEx .benefit{ font-size: 13pt; } .page3 .benefits{ margin-top: 50px; } .page5{ padding-top: 105px; } .page5 h2{ margin-bottom: 100px; } .footer{ background: #333; color: white; overflow: hidden; } .footerBlack{ background: #000; color: white; overflow: hidden; } #keywords{ font-weight: 300; text-transform: uppercase; font-size: 10pt; max-width: 480px; float: left; margin: 55px auto; line-height: 140%; width: 50%; } .footerLogo .logoIcon{ background: url('/images/logo-icon-white.svg') center center no-repeat; background-size: 100% auto; } .footerLogo .logo{ float: right; margin: 55px auto; max-width: 50%; } .contactLeft{ font-size: 18pt; font-weight: 300; line-height: 150%; float: left; padding: 100px 0 100px 0; } .contactLeft h2{ margin-bottom: 35px; } .contactRight{ float: right; padding: 130px 0 80px 0; font-size: 16pt; font-weight: 300; } .logos{ padding-top: 40px; } .logo1{ margin-right: 60px; } .logo2{ margin-bottom: 12px; } .contactLeft a{ unicode-bidi: bidi-override; direction: rtl; } .mobile{ display: none; }@media all and (max-width: 1300px){ .benefitArrow1, .benefitArrow4{ display: none; } .circles{ background: url('/images/lines-2.png') center center no-repeat; height: 540px; } .circlesInner{ max-width: 644px; margin: auto; } } @media all and (max-width: 990px){ .benefitArrow1, .benefitArrow4{ display: none; } } @media all and (max-width: 900px){ .desktop{ display: none; } .mobile{ display: block; } .pointerCenter{ margin-top: -125px; } .pointerCenter h4{ margin-bottom: 105px !important; } .textLeft, .textRight{ float: none; width: 100% !important; } .page h2, .page h4{ text-align: center; } .page3, .page4{ padding: 70px 0 0 0; } .page5{ padding-top: 80px; } .page5 h2{ margin-bottom: 80px; } .page img{ margin: 0 auto 20px 0; } .contactLeft, .contactRight{ float: none; padding: 35px 0 35px 0; text-align: center; } #keywords{ float: none; max-width: 100%; width: 100%; text-align: center; margin: 50px auto 0 auto; } .footerLogo .logo{ margin: 50px auto; float: none; max-width: 100%; } } @media all and (max-width: 800px){ .benefits{ text-align: center; height: auto; margin: 60px 0; } .benefit, .benefitArrow{ display: block; margin: 0 auto; } .benefitArrow1, .benefitArrow4{ display: none; } .benefitArrow{ transform: rotate(90deg); height: 100px; } .compare1{ margin-bottom: 30px; } .pointerCenter h4{ margin-bottom: 35px; } .line{ margin: 60px auto; } } @media all and (max-width: 700px){ .circles{ background: url('/images/lines-1.png') center center no-repeat; height: 1085px; } .circlesInner{ max-width: 320px; margin: auto; } .circle{ margin-right: 0; margin-left: 0; } } @media all and (max-width: 750px){ h2{ font-size: 22pt; } h4{ font-size: 16pt; } } @media all and (max-width: 630px){ .pointerLeft, .pointerRight{ display: none; } .pointerCenter h4{ margin: 80px auto 35px auto !important; } }