/* ===== Open Sans Hebrew ===== */ @font-face {font-family: 'Open Sans Hebrew';font-weight: 300;font-style: normal;font-display: swap;src: url('https://www.gindih.co.il/general/fonts/opensans2/OpenSansHebrew-Light.woff2?v=2') format('woff2');} @font-face {font-family: 'Open Sans Hebrew';font-weight: 300;font-style: italic;font-display: swap;src: url('https://www.gindih.co.il/general/fonts/opensans2/OpenSansHebrew-LightItalic.woff2?v=2') format('woff2');} @font-face {font-family: 'Open Sans Hebrew';font-weight: 400;font-style: normal;font-display: swap;src: url('https://www.gindih.co.il/general/fonts/opensans2/OpenSansHebrew-Regular.woff2?v=2') format('woff2');} @font-face {font-family: 'Open Sans Hebrew';font-weight: 400;font-style: italic;font-display: swap;src: url('https://www.gindih.co.il/general/fonts/opensans2/OpenSansHebrew-Italic.woff2?v=2') format('woff2');} @font-face {font-family: 'Open Sans Hebrew';font-weight: 700;font-style: normal;font-display: swap;src: url('https://www.gindih.co.il/general/fonts/opensans2/OpenSansHebrew-Bold.woff2?v=2') format('woff2');} @font-face {font-family: 'Open Sans Hebrew';font-weight: 700;font-style: italic;font-display: swap;src: url('https://www.gindih.co.il/general/fonts/opensans2/OpenSansHebrew-BoldItalic.woff2?v=2') format('woff2');} @font-face {font-family: 'Open Sans Hebrew';font-weight: 800;font-style: normal;font-display: swap;src: url('https://www.gindih.co.il/general/fonts/opensans2/OpenSansHebrew-ExtraBold.woff2?v=2') format('woff2');} @font-face {font-family: 'Open Sans Hebrew';font-weight: 800;font-style: italic;font-display: swap;src: url('https://www.gindih.co.il/general/fonts/opensans2/OpenSansHebrew-ExtraBoldItalic.woff2?v=2') format('woff2');} /* ===== Open Sans Hebrew Condensed ===== */ @font-face {font-family: 'Open Sans Hebrew Condensed';font-weight: 300;font-style: normal;font-display: swap;src: url('https://www.gindih.co.il/general/fonts/opensans2/OpenSansHebrewCondensed-Light.woff2?v=2') format('woff2');} @font-face {font-family: 'Open Sans Hebrew Condensed';font-weight: 300;font-style: italic;font-display: swap;src: url('https://www.gindih.co.il/general/fonts/opensans2/OpenSansHebrewCondensed-LightItalic.woff2?v=2') format('woff2');} @font-face {font-family: 'Open Sans Hebrew Condensed';font-weight: 400;font-style: normal;font-display: swap;src: url('https://www.gindih.co.il/general/fonts/opensans2/OpenSansHebrewCondensed-Regular.woff2?v=2') format('woff2');} @font-face {font-family: 'Open Sans Hebrew Condensed';font-weight: 400;font-style: italic;font-display: swap;src: url('https://www.gindih.co.il/general/fonts/opensans2/OpenSansHebrewCondensed-Italic.woff2?v=2') format('woff2');} @font-face {font-family: 'Open Sans Hebrew Condensed';font-weight: 700;font-style: normal;font-display: swap;src: url('https://www.gindih.co.il/general/fonts/opensans2/OpenSansHebrewCondensed-Bold.woff2?v=2') format('woff2');} @font-face {font-family: 'Open Sans Hebrew Condensed';font-weight: 700;font-style: italic;font-display: swap;src: url('https://www.gindih.co.il/general/fonts/opensans2/OpenSansHebrewCondensed-BoldItalic.woff2?v=2') format('woff2');} @font-face {font-family: 'Open Sans Hebrew Condensed';font-weight: 800;font-style: normal;font-display: swap;src: url('https://www.gindih.co.il/general/fonts/opensans2/OpenSansHebrewCondensed-ExtraBold.woff2?v=2') format('woff2');} @font-face {font-family: 'Open Sans Hebrew Condensed';font-weight: 800;font-style: italic;font-display: swap;src: url('https://www.gindih.co.il/general/fonts/opensans2/OpenSansHebrewCondensed-ExtraBoldItalic.woff2?v=2') format('woff2');} * {margin: 0px;outline: 0px;border: 0px;vertical-align: top;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);} body {font-family: "Open Sans Hebrew Condensed", 'Arial';overflow-x: hidden;background: #ffffff;/* background-image: url(../img/bg_easy_to_pay.webp); */background-size: 100% auto;background-position: top 115vw center;background-attachment: fixed;background-repeat: no-repeat;background-color: #18241f;/* background-color: #e8e6e1; *//* overflow: hidden; */} .cookies { position: fixed; bottom: 0px; min-height: 50px; background: rgb(58, 55, 55); z-index: 9999; left: 0px; right: 0px; display: none; } .showCookies { display: block; } @media (max-width: 992px) { .showCookies ~ #site .footer-sticky { bottom: 50px; } .showCookies ~ #site .btn-whatsapp {/* bottom: 140px; */} .showCookies ~ #site .footerbtns{bottom: 104px;} body .accessibility_component { z-index: 99 !important; } body .btn_accessibility {right: 60px;top: 12px;box-shadow: #b7ab9e 0px 0px 0px 1px;background-color: rgba(255,255,255,0.2) !important;/* background-image: url(../img/negishut-white.png) !important; */background-repeat: no-repeat !important;background-position: center !important;} body .btn_accessibility:hover, body .btn_accessibility:focus {box-shadow: white 0px 0px 0px 1px;background-color: rgb(0 0 0) !important;} body img#accessibility_icon {/* display: none !important; */} } .cookiestext {padding: 5px 10px;font-size: 12px;color: white;position: relative;display: flex;min-height: 40px;align-items: center;} .cookiestext a { color: white; text-decoration: underline; } .close-cookies{display:none} .cookiesExtra {overflow: hidden;max-height: 0px;transition: all 0.5s ease 0s;/* font-size: 14px; */color: white;} .cookiesReadMore {display: flex;box-sizing: border-box;margin-right: 10px;font-weight: bold;position: absolute;left: 70px;top: 5px;height: 40px;align-items: center;background: black;border: 1px solid white;width: 40px;justify-content: center;font-weight: 100;} .cookiesApprove {float: left;box-sizing: border-box;height: 40px;line-height: 38px;width: 60px;text-align: center;color: white;background: rgb(0, 0, 0);font-size: 16px;cursor: pointer;border: 1px solid rgb(204, 204, 204);position: absolute;left: 5px;top: 5px;} .cookiesContent {max-width: calc(100% - 110px);float: right;} .showMore .cookiesExtra { max-height: 400px; padding: 10px 0px; } .cookiesReadMore span:nth-child(2) { display: none; } .showMore .cookiesReadMore span:nth-child(1) { display: none; } .showMore .cookiesReadMore span:nth-child(2) { display: block; } @media (min-width: 993px) { .cookiesExtra { max-height: none; display: inline; } .cookiesTitle { font-size: 14px; display: inline; font-weight: bold; } .cookiesContent { display: table-cell; float: none; height: 40px; line-height: 18px; vertical-align: middle; width: calc(100% - 200px); } .cookiestext { display: table; width: calc(100% - 20px); } .cookiesApprove { display: table-cell; width: 100px; font-size: 16px; } .cookiesReadMore { display: none; } .showCookies ~ #site .btn-whatsapp {/* bottom: 180px; */} .showCookies ~ #site .footer-sticky { bottom: 50px; } .showCookies ~ #site .footerbtns{bottom: 120px;} } header {position: sticky;top: 0;z-index: 100;font-size: clamp(2px, 1vw, 0.3vh);} .slogen-wrap {position: relative;height: clamp(50px,24em, 90px);/* background-image: url("../img/grid2.jpg"); */background-size: cover;background-position: center center;background: rgb(0 0 0 / 50%);/* box-shadow: 0 0 10px black, 0 0 2px inset white; *//* background: linear-gradient(45deg, #d9ac6a, #f4dfb2, #d9ac6a); */color: white;} .slogens {position: absolute;height: 100%;overflow: hidden;left: 2em;box-sizing: border-box;right: 2em;text-align: center;margin: 0;} .slogens > div {position: absolute;/* color: #fff; *//* color: black; */font-size: 6.2em;line-height: 1;display: flex;height: 100%;/* text-shadow: black 0px 0px 2px; */align-items: center;font-weight: 500;transition: all 0.4s ease 0s;top: 60px;opacity: 0;left: 0px;right: 0px;place-content: center;flex-wrap: wrap;font-weight: 500;} .slogens > div.show, .slogens div:focus {top: 0px;opacity: 1;} .slogens > div:not(:focus).prev {top: -60px;opacity: 0;height: 80px;} .slogens > div:focus{transition:none;background:white;z-index:999;opacity:1 !important;display:flex !important} #frontvid{position:fixed;width: 100%;height: 100%;top: 0;bottom: 0;left: 0;right: 0;z-index: 99;background: url(/assets/ko/boxer.webp);background-size: cover;background-position: center;background-color: #7b9a91;} #frontvid video{position-absolute;position: absolute;left: -100%;right: -100%;margin: auto;height: 100%;width: auto;} #backvid {width: 100%;position: fixed;z-index: 0;top: 0;left: 0;right: 0;bottom: 0;display: flex;/* align-items: center; */background: linear-gradient(180deg,transparent 30% ,#314b45 50%);/* background-image: url(/assets/ko/goldBG.webp); */} #backvid .vid-mask-wrap {position: absolute;width: 100%;top: -20%;aspect-ratio: 0.6;/* mask-image: radial-gradient(ellipse at 50% 50%, #ffffff 70%, transparent 70% 100%); */mask-size: 0% 0%;-webkit-mask-repeat: no-repeat;mask-repeat: no-repeat;mask-position: center;padding-top: 30%;/* background: linear-gradient(180deg, #213a34 50%, transparent 30%); */padding-bottom: 30%;box-shadow: none;} #backvid .top-vid {position:relative;display: block;overflow: hidden;width: 100%;height: 100%;box-shadow: none;/* opacity: 0; */} #backvid .top-vid video {width: 100%;position: absolute;padding-top: 21%;/* background: #d9e4e1; *//* opacity: 0; */} #backvid .top-vid::after {background: linear-gradient(180deg, #1a2b26 50px, rgb(255 255 255 / 0%) 10%, rgb(238 235 230 / 0%) 90%, #324c46);content: "";display: block;position: absolute;z-index: 555;top: -2px;left: 0;right: 0;bottom: 7%;opacity: 1;} #backvid .ko-ready{position:absolute;width: 100%;height: 100%;display: flex;align-items: start;justify-content: center;padding-top: 60%;font-size: clamp(20px,10vw,8vh);font-weight: 700;} body.knockout-effect{overflow:auto;} body.knockout-effect #backvid .vid-mask-wrap{mask-size: 150% 100%;} body.knockout-effect #backvid .top-vid video{opacity:1} body.knockout-effect > div{animation:ko 0.2s forwards linear} .koGold{position:absolute;z-index:9;mask-image: url(/assets/ko/komask.png);mask-position: center;mask-repeat: no-repeat;mask-size: 100%;top: -19%;right: -50%;left: -50%;margin: auto;width: 150%;transform: scale(0.0);display: none;} .koGold img{width:100%;opacity: 0;} body.knockout-effect .koGold{transform: scale(1.2);} body.knockout-effect .koGold img{opacity:1} body.knockout-effect #backvid .vid-mask-wrap,body.knockout-effect .koGold{transition: 1s all;} @keyframes ko{ 0%{transform:scale(1.1);;filter:blur(3px)} 100%{transform:none;filter:blur(0)} } @keyframes ko2{ 0%{transform:scale(1.5);} 100%{transform:none;} } .ichlus {position: fixed;font-weight: 500;background: radial-gradient(circle at top,#e2a391 30%, #b1796a);font-size: 20px;padding: 1.5em 3em 0.5em;transform: rotate(45deg);right: -3em;top: -0.6em;line-height: 1;z-index: 2;} .upper-logo{position:absolute;top: 5%;text-align:center;width: 100%;font-weight: 600;font-size: clamp(15px,7vw,4vh);line-height: 1;display: flex;flex-direction: column;align-items: center;} .upper-logo img{width: 50%;margin: 0 auto;max-width: 30vh;height: auto;margin-top: clamp(20px, 10vw, 40px);margin-bottom: 0.2em;} .upper-logo div{font-size:1em;line-height: 1.1;font-weight: bold;padding: 0 10px;/* text-shadow: 0 .05em .05em black; */background: linear-gradient(45deg, #d9ac6a, #f4dfb2, #d9ac6a);background-clip: text;color: transparent;font-weight: 600;display: inline-block;font-family: 'Open Sans Hebrew';} .header {position: relative;z-index: 1;background: rgb(7 52 38 / 90%);overflow: hidden;text-align: center;margin: 30px auto 20px;width: calc(100% - 40px);font-size: 1vw;display: flex;flex-direction: column;justify-content: space-between;border: 2px solid #e2bd82;overflow: visible;} .top-txt{font-size: 8em;color:white;display: inline-flex;align-items: center;justify-content: center;margin-top: 1.5em;font-weight: 200;color: #e2a391;} .top-txt::before , .top-txt::after{content:"";width: 0.5em;height:2px;background: #e2a391;display:block;margin: 0 0.2em;} .top-txt2{color: #e9eee8;/* color: white; */font-size: 6.4em;width: 100%;margin: 0 auto;font-weight: bold;padding-top: 0.5em;padding-bottom: 1em;position: relative;margin-top: 0.5em;} .top-txt2::before{position:absolute;top:0;/* content:""; */height: 2px;width: 90%;max-width: 600px;background: linear-gradient(90deg, transparent, #dfb779 20%, #dfb779 80%, transparent);left: 0;right: 0;margin: auto;} .top-txt2 img{/* width: 62%; *//* margin-bottom: -5%; *//* filter: contrast(0) brightness(2.5); */max-width: 100%;} .top-txt2 .ttl{background: #e9eee8;border-radius: 1.9em;padding: 0.5em 0 0.4em;margin: 0 -0.3em 0.5em;font-weight: 700;box-shadow: 0 0 0 0.2em #e9eee8 inset, 0 0 0 0.24em #fff inset;} .wrap7 {display: flex;align-items: end;justify-content: center;direction: rtl;text-shadow: 4px 0 0 rgba(0,0,0,0.5);margin-top: -0.5em;font-size: 0.8em;color: white;} .d7 {font-size: 8em;font-weight: 800;line-height: 0.8;position: relative;z-index: 1;} .dp {font-size: 2em;line-height: 0.9em;margin-left: -0.7em;} .dpayment{margin-bottom: 1.6em;font-size: 1.2em;background: #e9eee8;padding: 0.1em 0.8em;margin-right: -2.1em;color: black;/* text-shadow: 2px 1px 0 BLACK; */text-shadow: none;font-weight: 400;border-radius: 5em 0 0 5em;display: none;} .txt2 {color: #e9eee8;color: white;line-height: 1;margin: 0.5em 0 1em;} .line1{line-height:1;font-size: 1.2em;font-weight: bold;padding: 0 10px;/* text-shadow: 0 .05em .05em black; */background: linear-gradient(45deg, #d9ac6a, #f4dfb2, #d9ac6a);background-clip: text;color: transparent;font-weight: 900;position: relative;} .txt1{font-size: 0.7em;line-height: 1.2;font-weight: normal;margin-top: 0.5em;} .svgunder{position:relative} .svgunder::after{content:"";top: 1.2em;left: -0.15em;right: -0.15em;position: absolute;background: url(/assets/img/l20250313/stroke.svg);padding-bottom: 9%;background-size: contain;background-repeat: no-repeat;filter: drop-shadow(0px .05em .05em black);} .specialboxes {width: calc(100% + 40px);display: flex;flex-wrap: wrap;text-align: center;margin: 1em auto;justify-content: space-between;justify-content: center;font-size: 4.1vw;margin-bottom: 1em;position: relative;left: -20px;right: -20px;} .specialbox {/* background: #957b60; *//* background: linear-gradient(-90deg, #957b60 0%, #b79d81 70%, #b5a391); */margin: 5px;width: calc(50% - 10px);color: #fcca7e;display: flex;flex-direction: column;height: 7em;justify-content: center;padding: 0.5em;box-sizing: border-box;font-weight: 700;border-radius: 10px;line-height: 1;border: 2px solid #dbb877;/* box-shadow: 0px 4px 5px -4px rgb(0 0 0 / 50%), 0 0 2em 0px inset rgb(255 255 255 / 50%),0 0 0 5px #957b60 inset, 0 0 0 6px #ccbaa8 inset; */box-shadow: 0 0 5px #ffffff inset, 0px 4px 4px -4px rgb(0 0 0 / 80%);} .specialbox > *{position:relative;z-index:1} .specialbox.bigbox {width: 100%;font-size: 2em;height: 2.6em;} .specialbox::before {content:"";position: absolute;left: 0;top: 0;right: 0;bottom: 0;font-size: 1em;color: white;font-weight: 100;background: rgb(55 105 97 / 75%);backdrop-filter: blur(5px);-webkit-backdrop-filter: blur(5px);} .specialbox.sp3{width:calc(100% / 3 - 10px)} .triple7 {display: flex;margin: 0.8em auto 0;max-width: 600px;font-size: 6em;position: relative;width: 90%;padding: 0.5em 0.5em 2em;border: 2px #caa061 solid;border-radius: 1em;box-sizing: border-box;background: linear-gradient(180deg, rgb(0 0 0 / 50%), #000000 90%);} .triple7 .sing7:not(:first-child){border-right: 2px solid #caa061;} .sing7 {width: 34%;} .the7 {width: 100%;margin: 0 auto 0.4em;display: flex;align-items: end;justify-content: center;position: relative;} .the7.the7r {flex-direction: row-reverse;} .the7 span {margin-left: 3.5em;position: absolute;} .the7.the7l span {margin-right: 5.1em;margin-left: auto;font-size: 0.8em;} .the7text {line-height: 1;font-size: 0.8em;margin-top: 0.4em;font-weight: bold;} .the7 img {/* width: 56%; */height: 3.6em;} .trio-wrapper{font-size: clamp(3px,1vw,4.6px);margin-top: clamp(10px, 10em, 30vh);font-family: "Open Sans Hebrew Condensed", arial;} .nes-trio {position: relative;display: flex;font-size: 0.8em;margin-top: -11em;margin-bottom: 10em;width: 140em;max-width: 96%;margin: 0em auto 0em;z-index: 2;} .nes-trio .nes-single {position: relative;width: 33%;text-align: center;} .nes-trio .spt {position: relative;width: 1px;background: #ffffff;} .nes-trio .ns-top {position: relative;display: flex;align-items: end;justify-content: center;} .nes-trio .ns-top div {position: relative;font-size: 6em;font-weight: 800;color: transparent;background-clip: text;display: inline-block;background-image: linear-gradient(45deg, #ffffff, #ffffff);} .nes-trio .ns-top img {position: relative;width: 17em;margin: 0;} .nes-trio .ns-btm {position: relative;color: transparent;background-clip: text;display: inline-block;background-image: linear-gradient(45deg, #ffffff, #ffffff);font-size: 6em;font-weight: 900;letter-spacing: 0;line-height: 1.1;margin-top: 0.5em;} .brush-bg{width:8em;font-size: 7em;color: #0c180b;margin: 0.4em auto 0.1em;background-image: url(/assets/img/brush_bg.png);background-size: contain;background-repeat: no-repeat;display: flex;align-items: center;justify-content: center;height: 1.4em;font-weight: bold;} .mid-wrap{margin-top: 100%;position: relative;} .knockout{display:flex;color: white;align-items: center;justify-content: center;font-size: clamp(15px,8.6vw,40px);font-weight: 800;margin-bottom: 0.4em;/* text-shadow: 0 -0.05em 0 BLACK; */height: 0;white-space: nowrap;margin-bottom: 0.6em;gap: 0.3em;line-height: 1.1;} .knockout div{background: linear-gradient(45deg, #d9ac6a, #f4dfb2, #d9ac6a);background-clip: text; color: transparent;} .icons {bottom: 0;display: flex;z-index: 3;width: calc(100vw - 30px);margin: 0 auto;align-items: end;justify-content: space-between;font-size: clamp(8px, 3vw, 1.8vh);max-width:600px;color: white;z-index: 1;position: relative;} .icon {width: 30%;text-align: center;max-width: 10em;position: relative;} .icon svg {width: 3.3em;height: auto;fill:white;margin-bottom: 0.1em;position: relative;} .icon-title {background: rgba(255,2552,255,0.5);display: flex;align-items: center;height: 1.6em;color: white;align-items: center;justify-content: center;font-weight: bold;text-shadow: 0 0 2px black;position: relative;} .icon-text {font-size: 1em;margin-top: 0.4em;position: relative;} .icon::before{content:"";position: absolute;width: 5em;top: -0.6em;aspect-ratio: 1;border-radius: 50%;background: #000000;left: 0;right: 0;margin: auto;box-shadow: 0 0 1em 1em black;opacity: 0.5;} .t5rooms{width: 14em;margin:0 auto;margin-bottom: 0em;max-width:500px;font-size: 0.6em;display: flex;align-items: center;justify-content: center;color: #ffffff;gap: 0.5em;position: relative;margin-bottom: 0.3em;height: 2.3em;font-family: "Open Sans Hebrew Condensed", arial;text-shadow: 0em 0em 0.2em black;} .t5rooms::before{content:"";background: #e9eee8;position: absolute;border-radius: 0.4em;top: 0.1em;width: 100%;height: 100%;transform: skew(-15deg, 0deg);right: -0.2em;} .t5rooms::after{content:"";border: 0.1em solid #ffffff;box-sizing: border-box;position: absolute;border-radius: 0.4em;top: -0.05em;l;:;height: 100%;transform: skew(-15deg, 0deg);right: -0.4em;width: 100%;/* opacity: 0; */} .t5rooms .apt{font-size:2em;font-weight:bold;position: relative;z-index: 1;line-height: 1;} .hero-number {position: relative;display: inline-flex;align-items: end;font-size: 1em;z-index: 1;} .hero-number .hero-from {font-size: 0.5em;font-weight: bold;height: 100%;margin-bottom: -0.9em;margin-right: 1.5em;position: absolute;} .hero-number > span {position: relative;letter-spacing: -0.02em;font-weight: bold;font-size: 2em;margin: -0.3em 0;clip-path: polygon(0% 0%,100% 0%, 100% 40%, 68% 40%,68% 62%, 93% 62%, 94% 40%, 100% 40%,100% 100% ,0% 100%);display: flex;direction: ltr;align-items: end;} .hero-number > span > span {font-size: 0.8em;position: relative;margin-bottom: 0.1em;} .hero-number .nis {position: relative;font-size: 1em;font-weight: bold;margin-bottom: -0.3em;top: 0;} .frame{border: 2px solid #e2bd82;width: calc(100% - 40px);margin: 13em auto 40px;border-top: 0;/* border-bottom: 0; */text-align: center;/* min-height: 100vw; */display: flex;flex-direction: column;justify-content: space-between;background: rgb(7 52 38 / 90%);} .frame .top-frame{display:flex} .frame .top-frame::before,.frame .top-frame::after{content:"";border-top: 2px solid #e2bd82;width: 50%;} .frame .top-frame img{width: 62%;margin-top: -6%;} form.frame .top-frame > div{/* margin-top: -0.3em; *//* font-size: 10em; *//* font-weight: 900; */white-space: nowrap;/* line-height: 0.7; */padding: 0 0.2em;color: #fff;text-shadow: 0 0 5px #194c3f, 0 0 5px #194c3f, 0 0 5px #194c3f, 0 0 5px #194c3f, 0 0 5px #194c3f, 0 0 5px #194c3f;} .bottom-txt{display:flex;font-size: 0.7em;background: #e9eee8;align-items: center;justify-content: center;height: 29em;width: 90%;margin: 10px auto 20px;box-shadow: 0 0 0 4px #e9eee8 inset,0 0 0 5px white inset;} .thetext{text-align:center;font-size: 15em;display: flex;align-items: center;text-align: center;justify-content: center;/* border-top: 1px solid #c79f60; *//* border-bottom: 1px solid #c79f60; *//* display: inline-block; *//* margin: 10px auto; */align-items: end;} .thetext .txt div{display:flex;column-gap: 0.1em;align-items: end;margin-left: 0.1em;} .thetext .txt span{font-size: 0.4em;margin-bottom: 0.2em;font-weight: 500;} .thetext .txt{color:black;font-weight: 700;display: flex;flex-direction: column;justify-content: center;align-items: center;line-height: 1;/* background: linear-gradient(85deg, #c79f60, #f4e4b9, #c79f60); *//* -webkit-background-clip: text; *//* -webkit-text-fill-color: transparent; */padding: 5px;color: white;} .thetext .txt.shadow{margin-right: -1px;margin-top: 1px;position: absolute;background: transparent;-webkit-text-fill-color: black;color: transparent;z-index: -1;} .thenumber{display: inline-flex;font-size: 16em;justify-content: center;align-items: end;/* margin: 0em auto 0.6em; */} .thenumber .from{width: 0.3em;font-size: 0.2em;margin-top: 0.4em;font-weight: 500;position: relative;} .thenumber .from span{position: absolute;z-index:1;background: #e9eee8;color: #ffffff;font-weight: bold;white-space: nowrap;bottom: 1.6em;/* text-shadow: 1px 1px 0 BLACK; */} .thenumber .num{font-weight: 900;display: flex;align-items: end;direction: ltr;line-height: 1;color: white;/* background: linear-gradient(85deg, #c79f60, #f4e4b9, #c79f60); *//* -webkit-background-clip: text; *//* -webkit-text-fill-color: transparent; */} .thenumber .num.shadow{margin-right: -0.3em;margin-top: 0.05em;position: absolute;background: transparent;-webkit-text-fill-color: black;color: transparent; z-index: -1;} .thenumber .num span{font-size: 0.5em;} .thenumber .nis{font-size: 0.3em;color: #ffffff;font-weight: 900;/* text-shadow: 1px 1px 0 BLACK; */} .rest{font-size: 6em;font-weight: 500;color: #e2a391;margin-bottom: 0.3em;margin-top: 0.3em;} .frame .upper-logo{width: 60%;margin: 10% auto;max-width: 360px;} .frame .bottom-frame{display:flex;color: #e5a192;} .frame .bottom-frame::before,.frame .bottom-frame::after{content:"";border-bottom: 2px solid #cc7c61;width: 50%;} .frame .bottom-frame > div{margin-bottom: -0.3em;font-size: 8vw;font-weight: 500;white-space: nowrap;line-height: 0.7;padding: 0 0.5em;} .frame .bottom-frame > div b{font-size: 1.4em;position: relative;top: -0.2em;} .ptor{font-size:6vw;color: #e5a192;margin: 0 auto;border-top: 1px solid #e5a192;border-bottom: 1px solid #e5a192;display: inline-block;padding: 0 0.2em;line-height: 1.5;margin-bottom: 40px;font-weight: 200;} .points {display: flex;justify-content: space-between;width: calc(100% - 30px);margin: 30px auto;} .points div {color: #e5a192;font-size: 5vw;width: 27%;height: 2.4em;position: relative;display: inline-flex;align-items: center;text-align: center;justify-content: center;} .points div::before {content: "";width: 80%;height: 1em;position: absolute;right: 0;top: 0;border: 2px solid;border-bottom: 0;border-left: 0;display: block;} .points div::after {content: "";width: 80%;height: 1em;position: absolute;left: 0;bottom: 0;border: 2px solid;border-top: 0;border-right: 0;display: block;} .buttons{background:black;overflow: hidden;position: relative;text-align: center;/* padding-top: 30px; */display: flex;position: fixed;bottom: 0;left: 0;right: 0;z-index: 3;} .buttons a{width: 100%;height: 52px;display: inline-flex;margin-bottom: 0;align-items: center;justify-content: center;font-size: 5vw;text-decoration: none;color: black;box-sizing: border-box;cursor: pointer;font-weight: 700;line-height: 1;text-align: right;} .buttons a svg{height: 60%;width:auto} .buttons a.btn-whatsapp{background: #64b161;min-width: 52px;width: 52px;} .buttons a.maskyoophone{background: #e9eee8;/* border: 2px solid white; *//* color: white; */} .buttons a.lead{background: linear-gradient(45deg, #d9ac6a, #f4dfb2, #d9ac6a);} .buttons a.lead2{background: #c0ddc0;} .nis {font-size: 0.6em;} .closer{display:flex;align-items:center;justify-content:center;font-size: 40px;position: fixed;width: 40px;height: 40px;left: 10px;top: 10px;background-color: rgba(255,255,255,0.8);z-index: 7;border-radius: 50%;color: black;display: none;} .form_wrapper {max-width: 500px;margin: auto;/* border: 1px solid #001040; *//* color: #001040; */text-align: center;padding: 15px 15px 40px;position: relative;z-index: 2;} .form_wrapper .title {font-size: 30px;color: #001040;line-height: 1.2;font-weight: bold;margin-bottom: 10px;margin-top: 10px;} .form_wrapper .purple {position: relative;margin: 5px;background: linear-gradient(45deg, #b09292, #f9dbdb);color: #000b2d;padding: 10px;} .form_wrapper .purple .main {font-size: 17px;font-weight: 900;line-height: 1.2;} .form_wrapper .purple .mugbal {display: table;white-space: nowrap;width: 100%;margin-top:5px} .form_wrapper .purple .mugbal div {font-size: 18px;display: table-cell;width: 20%;} .form_wrapper .purple .mugbal span {width: 40%;display: table-cell;position: relative;} .form_wrapper .purple .mugbal span::after {content: "";position: absolute;top: 50%;left: 8px;right: 8px;height: 1px;background: #000b2d;} .form_wrapper .come {margin: 10px auto; font-weight: 400;font-size: 3.8vw;line-height: 1.2;} .form_wrapper .come.small{font-size:4vw} .form_wrapper .come a{cursor: pointer;background: #001040;color: #fff;width: 100%;box-sizing: border-box;padding: 0 20px;height: 50px;line-height: 50px;font-size: 20px;margin-bottom: 0;text-align: center;font-weight: 600;border-radius: 5px;display: block;border: 1px white solid;text-decoration: none;} .form_wrapper form {width: calc(100% - 10px);padding: 0;/* max-width: 340px; */margin: auto;position: relative;font-size: 18px;border-bottom: 2px solid #e2bd82;} .form_wrapper form input::placeholder {color: #DDD;} .form_wrapper form input#submitB{display:none} .form_wrapper form input#checkB {width: 22px;height: 22px;/* float: right; */margin-top: 8px;margin-left: 5px;display:none} .form_wrapper form label.checkB {display: inline-block;padding-right: 30px;box-sizing: border-box;text-align: right;margin-bottom: 20px;line-height: 1.2 !important;padding-top: 5px;font-size: 12px !important;color: white;position: relative;cursor: pointer;} .form_wrapper form label.checkB::before{position:absolute;width: 20px;height: 20px;right:0;top: 6px;content:"";border:2px solid white;border-radius:2px} .form_wrapper form input:checked + label.checkB::before{background-image: url(../img/check.svg);background-size: 70%;background-repeat: no-repeat;background-position: center;} .form_wrapper form .inpt, .form_wrapper form .inpt2 {position: relative;border-radius: 10px;margin-bottom: 12px;width: calc(100% - 60px);margin: 0 auto 12px;} .form_wrapper form .required::before {content: "*";position: absolute;color: #ffffff;right: -13px;top: 24px;font-size: 14px;} .form_wrapper form .paytext {text-align: center;margin-bottom: 10px;} .form_wrapper form .inpt.small{/* margin-left:90px; */} .form_wrapper form .form_ttl {text-align: center;margin-bottom: 10px;line-height: 1.5;font-size: 20px;white-space: nowrap;} .form_wrapper form .form_ttl > div{margin-top: -0.5em;font-weight: 700;font-size: inherit;line-height: 1.2;} .form_wrapper form .form_ttl > div > div{font-size: 0.73em;margin-top: 0.1em;} .form_wrapper form input {background: transparent;color: white;width: 100%;z-index: 0;position:relative;box-sizing: border-box;padding: 14px 5px 0;line-height: 40px;height: 50px;text-align: right;/* margin-bottom: 4px; */font-size: 20px;border-bottom: 2px rgb(255 255 255 / 100%) solid;font-weight: normal;} .form_wrapper .inpt label {position: absolute;top: 10px;right: 5px;line-height: 40px;transition: all .2s ease;color: white;pointer-events: none;} .form_wrapper .inpt input:not(:placeholder-shown) + label, .form_wrapper form input:focus + label {font-size: 14px;line-height: 20px;top: 0;color: #aaa;} .form_wrapper form .address {/* background: rgb(255 255 255 / 70%); */color: white;width: 100%;box-sizing: border-box;padding: 0 10px;line-height: 40px;max-height: 50px;text-align: right;margin-bottom: 4px;font-size: 16px;border: 1px #ccc solid;border-radius: 10px;transition: 0.2s all;font-size: 0;} .form_wrapper form .address label {font-size:18px} .form_wrapper form .address:not(.open) .inpt {display:none} .form_wrapper form .address .inpt {display:inline-block;width:calc(50% - 2px);margin:2px 1px;/* background: rgba(0,0,0,0.3); */border-radius:5px;} .form_wrapper form .address .inpt:nth-child(n+4) { width: calc(100% / 3 - 2px); } .form_wrapper form .address:not(.open) input {max-height: 0;transition: 0.2s all;border: 0;margin: 0;line-height: 0;height: 0;width: calc(50% - 10px);display: none;} .form_wrapper form .address input {transition: 0.2s all;width: 100%;display: inline-block;background: transparent;padding: 0 10px;margin:0;} .form_wrapper form .address.open {max-height: 300px;/* background: #f5f5f5; */padding-bottom: 10px;} .form_wrapper form .address span {display: block;font-size: 16px;color: rgb(255 255 255);padding: 4px 10px;font-size: 20px;} .form_wrapper form .address.open span{padding:0 10px;/* color: #fff; */} .form_wrapper form .address input:nth-child(n + 4) {width: calc(100% / 3 - 2px);} .form_wrapper form label.submitB div {display: inline-block;font-size: 1.2em;line-height: 20px;font-weight: 100;} .form_wrapper form label.submitB {cursor: pointer;background: linear-gradient(85deg, #aa852d, #f7d268, #aa852d);background: linear-gradient(45deg, #d9ac6a, #f4dfb2, #d9ac6a);color: black;/* width: 60%; */box-sizing: border-box;padding: 0 20px;height: 50px;line-height: 50px;font-size: 24px;margin-bottom: 0;text-align: center;display: block;font-weight: 700;margin: 0 auto 20px;display: flex;align-items: center;justify-content: center;width: calc(100% - 40px);} .gindi_logo{width: 50%;max-width: 160px;margin:20px auto} .gindi_logo a{display:block} .gindi_logo img{width:100%} .remark {margin-top: 30px;font-size: 12px;font-weight: 600;/* margin-bottom:-10px; */color: white;padding:10px;transition: 1s all;} .remark .t-text {max-height: 36px;overflow:hidden;margin-bottom:10px;transition: 1s max-height;} .remark .read-more {margin-bottom: 20px;text-align: left;font-weight: 400;/* color: #efe9e9; */cursor: pointer;display:block;text-decoration:none} .remark:not(.open) .read-more span:nth-child(2) {display: none;} .remark.open .read-more span:nth-child(1) {display: none;} .remark.open {background:rgba(0,0,00.7)} .shine { overflow: hidden; position: relative; } .shine::after { content: ""; top: 0px; transform: translateX(100%); width: 100%; height: 600px; position: absolute; z-index: 1; animation: 4s ease 0s infinite normal none running slide; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(128, 186, 232, 0) 99%, rgba(125, 185, 232, 0) 100%); } @keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } } .shine2 { animation: shine2 8s infinite; filter: brightness(2) drop-shadow(0px 0px 10px white); } @keyframes shine2{ 0%{filter:none} 50%{filter:none} 58%{filter:brightness(3) drop-shadow(0px 0px 20px white)} 70%{filter:none} 100%{filter:none} } .blink {animation: 1s ease 0s infinite normal none running blink;padding-right: 0.2em;} @keyframes blink { 0% { opacity: 1; } 50% { opacity: 1; } 51% { opacity: 0; } 100% { opacity: 0; } } @media(min-width:993px){ body{display:flex;justify-content: space-between;min-height: 100vh;} header{position:absolute;top:0;left: calc(70px + clamp(100px,30vw,360px));right: clamp( 100px ,60vh ,440px );width: auto;margin: 0 auto;/* max-width: 1050px; */} .mobile{display:none !important} #backvid {padding:0} #backvid .vid-mask-wrap{padding:0;top: 0;aspect-ratio: auto;bottom: 0;} #backvid .top-vid{position:absolute;height: 100%;} #backvid {display: flex;align-items: center;} #backvid .top-vid::after {background: linear-gradient(90deg, #213a34, rgb(255 255 255 / 0%) 10%, rgb(238 235 230 / 0%) 90%, #213a34);width: 70%;max-width: 1100px;margin: auto;} #backvid .top-vid video {margin: 0;max-width: 760px;width: calc(100% - 800px);left: 0;right: 0;position: absolute;margin: auto;top: -1000px;bottom: -940px;padding-top: 0;height: auto;mask-image: linear-gradient(90deg, transparent 0%, black 20%, black 80%, transparent 100%);} .mid-wrap{position:absolute;position:absolute;left: calc(70px + clamp(100px, 30vw, 360px));right: clamp(100px, 60vh, 440px);width: auto;bottom: 0%;padding-bottom: 1%;background: linear-gradient(0deg, black, transparent);} .icons{margin-top: 0;max-width: 1060px;justify-content: center;gap: 1em;} .header , .main {width: 30%;max-width: 360px;background: rgb(22 89 69 / 90%);position: relative;top: 0;bottom: 0;display: flex;flex-direction: column;justify-content: center;padding-bottom: 30px;min-height: auto;} .header {right: 0px;width: 60vh;max-width: 440px;font-size: 4px;margin: 0;border: 0;padding: 0 20px;box-sizing: border-box;} .knockout{white-space:normal;height: auto;margin: 0 auto;} .knockout::before, .knockout::after{display:none} .top-txt2{font-size: 34px;} .specialboxes{font-size: 18px;width: calc(100% - 30px);left: auto;right: auto;} .main {left: 70px;color: white;/* background-image: url(../img/bg_love.webp); */background-size: auto 100%;background-position: center;} .form_wrapper form{margin-top:100px;background: rgb(7 52 38 / 90%);} .frame .bottom-frame > div {font-size: 30px;} .ptor {font-size: 24px;margin-bottom: 0px;} .frame {min-height: auto;position: relative;/* height: 400px; */} .form_wrapper {padding-bottom: 0;} .frame .shine {position: absolute;left: 0;right: 0;top: 0;bottom: 0;} .points{position:fixed;top:0;width: 31%;max-width: 570px;left: 60px;right: 0;margin: 20px auto;} .points div{font-size: calc(10px + 0.8vw);} .remark{background:#194c3f;color:white;background: transparent;} *:focus, *:focus-visible {outline: 2px red solid !important;outline-width: 2px !important;outline-color: red !important;box-shadow: 0 0 0 2px red;} } @media(max-width:992px){ .desktop{display:none !important} body:not(.active) .main{/* display:none; */padding-bottom: 80px;padding-top: 10px;} body.active .header, body.active .buttons{display:none} .main{/* position:fixed; */z-index: 9;top: 0;left: 0;right: 0;bottom: 0;background: rgb(13 126 64 / 0%);color: white;padding-top: 60px;overflow: auto;z-index: 1;position: relative;} } .form_wrapper form.notactive {filter: saturate(0);pointer-events: none} @supports (-webkit-touch-callout: none) { #backvid .vid-mask-wrap{box-sizing:border-box} }