:root { touch-action: pan-x pan-y; height: 100% } a { color:#254E76; text-decoration:none !important; } a:link { color:#254E76; text-decoration: none !important; } a:hover { color:black !important; text-decoration: none !important; } a:active { color:#254E76; text-decoration: none !important; } a:visited { color:#254E76; text-decoration: none !important; } body { margin:0px; padding:0px; font-size:1em; background-color: white; overflow-x: hidden; } @font-face { font-family:"logofont"; font-weight:300; src:url("https://hadapro.com/fonts/logofont.woff?a=3.10") format("woff"); } @font-face { font-family:"NotoKufi"; font-weight:300; src:url("https://hadapro.com/fonts/esar.woff?a=3.10") format("woff"); } @font-face { font-family:"NotoKufi2"; font-weight:300; src:url("https://hadapro.com/fonts/es.woff?a=3.10") format("woff"); } @font-face { font-family:"pebble"; font-weight:300; src:url("https://hadapro.com/fonts/pebble.woff?a=3.10") format("woff"); } @font-face { font-family:"rdt_font_bold"; font-weight:300; src:url("https://hadapro.com/fonts/Molde-Expanded-bold.woff?a=3.10") format("woff"); } @font-face { font-family:"rdt_font"; font-weight:300; src:url("https://hadapro.com/fonts/Molde-Expanded-Regular.woff?a=3.10") format("woff"); } body,input,textarea,button,select { font-family:NotoKufi, NotoKufi2; } .padding6 { padding: 6px; } .pdr_listtsp { overflow: hidden; user-select: none; } .pdr_list { border: 1px solid #DEDEDE; margin-bottom: 4px; border-radius: 6px; overflow: hidden; user-select: none; } .title_tpc { font-weight: 700; width: 100%; padding: 8px 0px; } .swiper-no-listedtsp { display: flex; position: relative; width: 180px; font-weight: 100; padding: 0px 10px; justify-content: flex-end; } .inheaderTop { position: fixed; width: 100%; z-index: 99; box-shadow: 0px 0px 5px 0px #5a5a5a; background-color: white; } .incentermille { position: relative; max-width: 1000px; margin: auto; } .BigLogoClose { font-size: 1.8rem; padding-top: 20px; } .Titlear_top { font-size: 1.4rem; font-weight: 700; padding: 10px; text-align: center; } .grid2boxTopic { display: grid; grid-template-columns: 1fr 300px; grid-gap: 0px; } .classed_tag span { background-color: gray; padding: 0px 8px; font-size: 0.9em; color: white; display: inline-block; border-radius: 10px; margin-right: 4px; margin-top: 4px; } .InfoTopicUser { background-color: rgba(0, 0, 0, 0.2); border-radius: 10px; margin: 4px; } .InfoBarUserTopic { display: grid; grid-template-columns: 60px auto; grid-gap: 0px; } .InfoBarUserTopic .pic img { position: relative; background-color: white; padding: 4px; width: 40px; height: 40px; border-radius: 12%; border: 2px solid 4285F4; } .InfoBarUserTopic .name { position: relative; padding-top: 3px; font-size: 0.9em; color: black; font-weight: 700; line-height: 1em; } .InfoBarUserTopic .name span { top: 0px; } .InfoBarUserTopic .name label { color: gray; } .mt8 { margin-top: 8px; } #resultPrgDiv, #resultPrdDiv, #resultQanDiv { position: relative; padding-left: 6px; top: 7px; font-weight: 700; } .p_allGrid2Line { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); max-width: 1170px; width: 94%; border-radius: 10px; display: grid; grid-template-columns: 1fr auto; grid-gap: 0px; padding: 2px 8px; text-shadow: 1px 1px 1px rgb(0, 0, 0); !important; background-color: rgba(0,0,0,0.5); } .PriGrid2Line { display: grid; grid-template-columns: auto 1fr; grid-gap: 0px; } .e_allGrid2Line { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0px; } .deleteRow div { padding: 4px; font-size: 1.2rem; } .e_allGrid2Line div.xf { text-align: left; padding: 8px; } .e_allGrid2Line div.xm { text-align: right; padding: 8px; color: gray; font-size: 0.8rem; text-shadow: 1px 1px 1px #FFFFFF; font-weight: 700; } .e_allGrid2Line div.xm .o-layout__app .langMargEsp { padding-top: 5px; padding-right: 0px; padding-left: 15px !important; } .e_allGrid4Line { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 5px; } .e_allGrid4Line .x { background-color: #0E6FFC; color: white; border-radius: 6px; text-align:center; font-weight: 700; line-height: 35px; padding: 20px 0px 8px; } .inlineBoxesFact { display: grid; grid-template-columns: 40% 40% auto 1fr; grid-gap: 0px; } .buttonWait, .no-data { text-align: center; padding: 20px; } .buttonWait .btn { padding: 10px 40px; } .e_allGrid4Line span { font-size: 2rem; font-family:'rdt_font_bold'; text-shadow: 1px 1px 10px #222222; } #countdown div:nth-of-type(1) { background: rgba(14,111,252,1); background: linear-gradient(90deg, rgba(17,0,240,1) 80%, rgba(14,111,252,1) 100%); } #countdown div:nth-of-type(4) { background: rgba(14,111,252,1); background: linear-gradient(90deg, rgba(14,111,252,1) 0%, rgba(17,0,240,1) 20%); } #countdown { margin-bottom: 50px; } .textInfoWait { text-align: center; font-weight: 700; padding: 10px; } .textInfoWait span { color: #FC0E0E; } .tellWaitPv .wof { font-size: 2rem !important; } .tellWaitPv a { padding-top: 10px !important; } .tellWaitPv h2 { font-size: 1.2rem; margin: 0px !important; padding: 0px !important; } .newInfoBar { position: absolute; top: -25px; padding: 4px 8px; background-color: red; color: white; font-family:"pebble" !important; font-size: 0.6rem; margin-left: -30px; border-radius: 6px; } @media (max-width: 770px){ #countdown { margin-bottom: 50px; } .inlineBoxesFact { grid-template-columns: 1fr 1fr; } } .statusWaiting .logo { margin: 10px 0px 0px; } .msgWait { font-size: 1.3rem; font-weight: 700; margin-left: 70px; margin-top: 5px; margin-bottom: 30px; font-family:"pebble"; color: gray; text-shadow: 1px 1px 0px black; } .words5 { overflow: hidden; } .wrapperLogo { color: #000000; font-family:'rdt_font'; direction: ltr; } .wrapperLogo span { color: #0E6FFC; font-family:'rdt_font_bold'; } .statusWaiting .wrapperLogo { font-size: 1.6rem; } .wrapperLogo { height: 30px; display: flex; } .wrapperLogo p { display: block; margin-top: -3px; } .wrapperLogo span.x { display: block; height: 100%; padding-left: 6px; animation: spin_words5 10s infinite; } @keyframes spin_words5 { 0%{ transform: translateY(-0%); } 12.5%{ transform: translateY(-112%); } 25%{ transform: translateY(-100%); } 37.5%{ transform: translateY(-212%); } 50%{ transform: translateY(-200%); } 62.5%{ transform: translateY(-312%); } 75%{ transform: translateY(-300%); } 87.5%{ transform: translateY(-412%); } 100%{ transform: translateY(-400%); } } .nopadding { padding: 0px !important; } .picTopQrCode img { position: relative; top: -15px; background-color: white; padding: 4px; width: 100px; height: 100px; border-radius: 10%; border: 2px solid #4285F4; } .picDivFixed { position: relative; width: 112px; } .picTopQrCode .picDivFixed .stat_level { top: 83px !important; right: -12px; font-size: 1.1em !important; } .logo a:after { color: #161F2B; content: "Hadapro"; } .logo,.loger { font-family: "logofont"; } .logo { font-size: 1.8em; margin: 0px 10px; margin-top: 10px; } .logo::first-letter { color: #983A3A; } .flex-container,.flex-containerHdr,.flex-container__pro__carousels { display: flex; flex-wrap: nowrap; } .center-flex { align-items: center; justify-content: center; } .searchBarTop { position: relative; height: 42px; width: 100%; background: #F0F2F5; outline: none; margin: 5px; color: gray; border-radius: 10px; line-height: 2em; } .searchBarTop > input { border: 0px; background: transparent; z-index: 1; right: 0px; position: absolute; padding: 0.3em 10px 0.3em 40px; width: 100%; height: 100%; } .qrcodeText { font-size: 12px; padding: 20px 0px; } .searchBarTop > span { position: relative; margin: 12px; z-index: 2; cursor: pointer; } .inscrBarTop > span { margin: 10px; } .ListImg-image { width: 100%; border-radius: 10px; } .creatBarTop a { height: 100%; width: auto; font-size: 1.6em; outline: none; margin: 5px; padding: 0.4em 10px 0.2em 10px; margin: 5px; text-align: center; } .inscrBarTop a { padding: 0.12em 10px 0.12em 10px; } .alert-warning { background-color: #f39c12 !important; border-color: #e08e0b; color: #ffffff !important; } .alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; } .alert h4 { margin-top: 0; margin-bottom: 0px; color: inherit; font-weight: 600; } .alert a,.alert a:hover { color: #ffffff !important; text-decoration: underline !important; } .alert .icon { margin-right: 10px; } .inscrBarTop { height: 100%; min-width: 160px; outline: none; border: 1px solid #F0F0F0; border-radius: 10px; margin: 7px; text-align: center; } .admlogbnt { background: black; font-weight: 700; } .Espace_UserPro { background: white; -webkit-box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%); box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%); overflow: hidden; border-radius: 6px; height: 200px; width: 100%; font-size:1em; text-align: center; font-weight: 700; border:1px solid #F0F0F0; } .GpO9n { font-size: 0.9rem; font-weight: 700; padding: 2px 10px; display: grid; margin-bottom: 4px; grid-template-columns: 200px auto; grid-gap: 0px; } .YGV1l { text-align: right; } .Espace_UserPro a,.inscrBarTop a, .InfoTopicUser a, .InfoTopicUser a label { display: block; cursor: pointer; } .Espace_UserPro:hover { box-shadow:0px 1px 5px rgba(0,0,0,0.2); } .Espace_UserPro img { width:100%; height:125px; } input:focus { outline: none !important; border:0px; } .hf_15tsp,.returnToHomeProfile,.footerClsbtm,.listPorflo,.divdx { background: rgb(9,9,121); } .hf_15tsp { height: 60px; } .hf_16tsp { background: white; height: 132px; } .slash_hf { position: relative; width: 1px; margin: 0px 10px; top: 0px; background: #E5E5E5; } .pp7tsp > .m7tsp { background-color: #F1F1F1; border-radius: 6px; } .pp7tsp > .m88tsp { background-color: #983A3A; text-shadow: 0px 0px 0px transparent; border-radius: 12px; } .pp7tsp > .m7tsp, .pp7tsp > .m88tsp { margin: 10px 5px; font-size: 0.9em; text-align: center; cursor: pointer; transition: background-color 0.4s ease-out 50ms; width: auto; height: 40px; } .pp7tsp > .m7tsp a { display: block; text-shadow: 1px 1px 0px #FFFFFF; color: #000000; padding: 0.4em 15px 0.4em 15px; } .pp7tsp > .m88tsp a { display: block; color: #FFFFFF; padding: 0.4em 15px 0.4em 15px; } .pp7tsp > .m7tsp:hover { background: #D1D1D1; } .pp7tsp > .m88tsp:hover { background: black; } .pp7tsp > .m88tsp a:hover { color: white !important; } .pp7tsp > .m7tsp span,.pp7tsp > .m88tsp span { position: relative; margin-right: 5px; color: gray; } .pp7tsp > .m88tsp span { margin-right: 10px; color: white; } .pp7tsp > .m7tsp span { font-size: 1.5em; top: 2px; } .pp7tsp > .m88tsp span { font-size: 1.5em; top: 2px; } .paddingAll0 { padding: 0px 0px important; } .contBar_hom { background-color: #FFFFFF; padding: 10px; margin-bottom: 1vh; } #loadContBar .m8tsp,#loadpro_search .m8tsp { width: 60%; height: 50px; border-radius: 0px; border: 0px; } .pp8tsp > .m8tsp { color: white; font-size: 0.9em; margin-right: 8px; text-align: center; cursor: pointer; transition: background-color 0.4s ease-out 50ms; width: 121px; height: 121px; border: 1px solid #D9D9D9; } .m8tsp:first-child,.m8tsp:last-child { border-radius: 0px; width: 180px; height: 121px; } .m8tsp:last-child { border-radius: 6px; } .m8tsp label { position: relative; top: 60px; font-size: 1.1em; font-weight: bold; } .toRight { float: right; } .toLeft { float: left; } .reviews-wrapper { clear: both; padding-top: 15px; margin-top: 15px; border-top: 1px solid #e6e6e6; } .review-item__reviewer { float: left; } .review-item__reviewer_left_side { margin-right: 8px; float: left; } .review-item__reviewer_left_side img { border-radius:50%; border-color:#e6e6e6; border-width:1px; border-style:solid; width: 40px; height:40px; } .review-item__reviewer_right_side { float: right; } .review-item__reviewer_left_side { margin-right: 8px; float: left; } .review-item__reviewer_left_side img { border-radius:50%; border-color:#e6e6e6; border-width:1px; border-style:solid; width: 40px; height:40px; } .hz-user-name { margin-top: 2px; line-height: 18px; display: block; max-width: 260px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; font-weight: 700; color: #333; } .auto-wrap, .auto-wrap-client { position: relative; width: 320px;} #autocomplete-container, #autocomplete-container-client { position: absolute; background: #fff; border: 1px solid #D1D1D1; border-top: 0px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; color: black !important; max-height: 220px; width: 100%; top: 40px; overflow-y: auto; z-index: 9999; display: none; } #autocomplete-container-client { left: -1px; width: 100%; top: 45px; font-size: 0.9rem; } .item { border: 1px solid transparent; padding: 4px; cursor: pointer;} .item:hover, .item.active { background: #007FFF; border:1px solid #003EFF; } .hidden { display: none !important; } .review-item__info { float: right; } .review-item__title { color: #666; } .review-item__content { color: #222; } .text-xs { font-size: 12px; } .text-m { font-size: 14px; } .review-item__clear-fix { clear: both; width: 100%; } .review-item__body { line-height: 20px; margin-top: 20px; white-space: pre-wrap; } .review-item__social { margin-top: 16px; color: #888; } .review-item__info .i-eye { position: relative; top: 2px; margin-top: 14px; margin-left: 10px; font-size: 1.5em; } .review-rating { display: block; margin-top: 5px; color: #C0C0C0; } .review-rating label { font-size: 0.8em; } .homebgimg1 { background-image:url("https://hadapro.com/ai/homeBg.png"); width: 100%; height: 100%; } .homebgimg1 { background-image:url("https://hadapro.com/ai/homeBg_1.png"); width: 100%; height: 100%; } .homebgimg2 { background-image:url("https://hadapro.com/ai/homeBgd_2.png"); width: 100%; height: 100%; } .homebgimg3 { background-image:url("https://hadapro.com/ai/homeBgd_3.png"); width: 100%; height: 100%; } .homebgimg4 { background-image:url("https://hadapro.com/ai/homeBgd_4.png"); width: 100%; height: 100%; } .homebgimg5 { background-image:url("https://hadapro.com/ai/homeBgd_5.png"); width: 100%; height: 100%; } .homebgimg6 { background-image:url("https://hadapro.com/ai/homeBgd_6.png"); width: 100%; height: 100%; } .homebgimg7 { background-image:url("https://hadapro.com/ai/homeBgd_7.png"); width: 100%; height: 100%; } .homebgimg8 { background-image:url("https://hadapro.com/ai/homeBgd_8.png"); width: 100%; height: 100%; } .homebgimg9 { background-image:url("https://hadapro.com/ai/homeBgd_9.png"); width: 100%; height: 100%; } .homebgimg10 { background-image:url("https://hadapro.com/ai/homeBgd_10.png"); width: 100%; height: 100%; } .homebgimg11 { background-image:url("https://hadapro.com/ai/homeBgd_11.png"); width: 100%; height: 100%; } .homebgimg13 { background-image:url("https://hadapro.com/ai/homeBgd_13.png"); width: 100%; height: 100%; } .homebg::before { content : ""; position: absolute; background: black; width: 100%; height: 60px; left: 0px; padding-top: 60px; z-index: 1; opacity:0.4; } .homebgX::before { content : ""; position: absolute; background: white; width: 100%; height: 60px; left: 0px; padding-top: 60px; z-index: 1; opacity:0.3; } .m8tps_1 a::before { content: "Trouvez des pros"; } .m8tps_2 a::before { content: "PlacoPlatre"; } .m8tps_3 a::before { content: "Maçonnerie"; } .m8tps_4 a::before { content: "Electricité"; } .m8tps_5 a::before { content: "Plomberie"; } .m8tps_6 a::before { content: "Peinture"; } .m8tps_7 a::before { content: "Menuisier"; } .m8tps_8 a::before { content: "Aluminium"; } .m8tps_9 a::before { content: "Ferronnerie"; } .m8tps_10 a::before { content: "Jardiniers"; } .m8tps_11 a::before { content: "Nettoyage"; } .m8tps_12 a::before { content: "Voir tous les professionnels"; } .m8tps_13 a::before { content: "Rénovation complète"; } .m8tps_1 span { color: white; font-size: 4em !important; display: block; color: white !important; top: 15px !important; left: 5px !important; z-index: 2; } .m8tps_1 a::before,.m8tps_2 a::before,.m8tps_3 a::before,.m8tps_4 a::before,.m8tps_5 a::before,.m8tps_6 a::before,.m8tps_7 a::before,.m8tps_8 a::before,.m8tps_9 a::before,.m8tps_10 a::before,.m8tps_11 a::before,.m8tps_13 a::before { position: absolute; width: 101px; left: 0px; color: white !important; padding: 10px; font-size: 1em; line-height: 20px; white-space: normal; padding-top: 70px; z-index: 2; } .m8tps_1 a::before { width: 160px; } .m8tps_12 a::before { position: absolute; width: 160px; left: 0px; color: black !important; padding: 10px; padding-top: 30px; z-index: 2; } .m8tsp a:hover .homebg::before { opacity:0.8; } .pp8tsp > .m8tsp span { position: relative; font-size: 1.5em; margin-right: 10px; top: 13px; } .titBar_hom > h3 { font-weight: bold; padding: 0px; margin: 0px; } .is-loading .isload_div { background: #DDDDDD; background: linear-gradient(110deg, #DDDDDD 8%, #f5f5f5 18%, #DDDDDD 33%); background-size: 900% 100%; animation: 20s shine linear infinite; width: 100%; height: 100%; border-radius: 6px; } #loadContBar .m8tsp { width: 200px; height: 200px; } .ProSHowBg { width: 100%; height: 14vw; min-height:160px; background: #DDDDDD; margin: 5px; margin-top: 10px; margin-top: 10px; border-radius: 6px; } .ProSHowBg a { display: block; height: 140px; } .pointageBtn, .facturationBtn, .rendervousBtn { position: relative; background-repeat: no-repeat; background-size: 80%; background-position: center center; width: 100%; height: 180px; } .rendervousBtn { background: url('https://hadapro.com/ai/rendervou_piv.jpg') top/80% no-repeat, #C0B9AD; } .pointageBtn { background: url('https://hadapro.com/ai/pointage_piv.jpg') top/80% no-repeat, #C5CFEB; } .facturationBtn { background: url('https://hadapro.com/ai/facture_piv.jpg') top/80% no-repeat, #FDE3C0; } @keyframes shine {to {background-position-x: -900%;}} @keyframes slideDown { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } } .slide-animate { animation: slideDown 0.5s ease-out; animation-delay: 0.3s; animation-fill-mode: both; } .sortable-placeholder { height: 50px; background: #f3f3f3; border: 2px dashed #ccc; visibility: visible !important; } .dragging { transform: scale(0.95); transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; } .BordTheboxX { position: relative; width: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; } .BordTheboxX h2 { margin: 16px 0px !important; } .butt-rdt .l, .butt-rdt .m { text-transform: uppercase; border-radius: 4px; padding: 6px 0px; font-size: 0.7rem; color: white; } .butt-rdt .l { background-color: rgba(0,0,0,0.5); } .butt-rdt .m { position: absolute; bottom: 0px; right: 0px; left: 0px; width: 100%; font-size: 0.8rem; font-weight: 700; color: black; } .butt-rdt .rnd, .butt-rdt .png, .butt-rdt .ftt { width: 100%; padding-top: 30px; padding-bottom: 5px; } .butt-rdt .ftt { background: rgba(127, 202, 190, 1); background: linear-gradient(180deg,rgba(87, 199, 133, 0) 0%, rgba(254, 230, 196, 1) 50%); } .butt-rdt .png { background: rgba(127, 202, 190, 1); background: linear-gradient(180deg,rgba(87, 199, 133, 0) 0%, rgba(197, 206, 235, 1) 50%); } .butt-rdt .rnd { background: rgba(192, 185, 173, 1); background: linear-gradient(180deg,rgba(87, 199, 133, 0) 0%, rgba(192, 185, 173, 1) 50%); } .MrgIn4 button { margin-top: 14px; margin-right: 4px; } .lineHeight12 { line-height: 12px; } .lineHeight16 { line-height: 16px; } .lineHeight24 { line-height: 24px; padding: 8px; } #largeU3 a.l3 { position: relative; display: block; margin-bottom: 10px; font-size: 1rem; } #largeU3 h2 { font-size: 1.2rem !important; } #largeU3 { display: inline-block !important; width: 25% !important; color: white; font-size: 0.9rem; } #largeU3 div { line-height: 28px; } .facebook_login_button { background-color: #3A559F; border: 1px solid #2e4482; } .facebook_login_button,.g-signin2 .abcRioButtonLightBlue { text-align: center; font-size: 0.85em; letter-spacing: .21px; border-radius:6px; margin: 0 0 0em 0; } .facebook_login_button a { color: #fff; padding: 0.35em 0; display: block; } .facebook_login_button:hover a { color:white !important; opacity: 0.8; } .facebook_login_button span { float:left; font-size:1.7em; margin-top:0px; margin-left:6px; display: block; } .google-one-tap-inline-signup-module-container { width: 40%; position: relative; display: inline-block; vertical-align: middle; } .google-one-tap-inline-signup__terms { color: #ababab; padding: 0 10px; margin: 0; font-size:0.8em; } .google-one-tap-inline-signup-module { background: #fff; color:black; width: 100%; box-shadow:0px 2px 2px rgba(0,0,0,0.2); } .DivcloseBox { position: absolute; width: 100%; height: 100%; } .BordIbox { display: table-cell; vertical-align: middle; max-width: 100vw; overflow-wrap: break-word; word-break: break-word; } .radius_12 { border-radius: 12px; } .loadBoxClass { line-height: 42px; text-align: center; } .ContentTopic { position:relative; padding: 10px; z-index: 98; } .InfoTopic { border: 1px solid #D1D1D1; border-radius: 6px; margin: 4px; font-size: 0.9em; padding: 10px; color: gray; } .InfoTopic .zray { float: right; cursor: pointer; } .optionTools h2 { border-bottom:1px solid gray; padding-bottom:12px; } .optionTools .zray a { border-top:1px solid gray; padding:12px; text-align:center; display:block; } .logoShareTool { display:inline-block; text-align:center; width:75px; font-weight:700; margin-bottom:10px; } .logoShareTool span { position:relative; display:block; margin:auto 24%; font-size:3.5em; color:white; } .logoShareTool a { display:block; } .logoShareTool div { width:60px; height:60px; border-radius:50%; } .logoShareTool a .i-facebook-square { color:#3B5998; } .logoShareTool a .i-twitter-square { color:#1DA1F2; } .logoShareTool a .i-pinterest-square { color:#BD081C; } .logoShareTool a .i-vk-square { color:#4680C2; } .logoShareTool a .i-tumblr-square { color:#001935; } .logoShareTool a .i-reddit-square { color:#FF4500; } .logoShareTool a .i-blogger-square { color:#F57D00; } .logoShareTool a .i-linkedin-square { color:#0A66C2; } .logoShareTool a .i-gmail-square { color:#D44638; } .backinfpTp { background-color: white; top: 10px; position: relative; border-radius: 10px; text-align: left; word-wrap: break-word; overflow-wrap: break-word; } .backinfpTp h2 { margin-bottom: 0px; } .DivContentTopic .header_border { padding:8px 20px; } .DivContentTopic { width:100%; } .DivContentTopic h2 { margin-top: 0px; } .u-12tiny { width:25%; height:177px; } .lgAdseInTpc { overflow:hidden; min-width:100%; background:white; } .flagPlastineAlgeria { position: absolute; top: 3px; left: -5px; height: 35px; } .logRayenDT { position: relative; width: 314px; background-color: white; padding: 8px; z-index: 2; } .preststPg { position: relative; border: 2px solid #4169E1; top: -23px; border-radius: 6px; z-index: 1; padding: 20px; } .logoProFlag { position: relative; left: 0px; } .DivContentTopic .c-button--add { margin-top:-13px; } #progress { position: fixed; background-color: #E9F2F8 !important; top: 0px; width: 100%; height: 3px; display: none; z-index: 100; } #progress.done,.TheboxX .content { opacity: 0; filter: alpha(opacity=0); } #progress dt { background: #2B91E8; width: 0px; height: 3px; } #loadingSpinner { position: absolute; width: 100vw; height: 100%; text-align: center; background: white; z-index: 10; display: none; } #loadingSpinner div { position: absolute; top: 26px; left: 50%; transform: translate(-50%, -50%); width:36px; height:40px; font-size: 2.6em; color: gray; } #loadingSpinner div::before { font-family:'FontAwesome'; content: "\f013"; left: 0px; position: absolute; -webkit-animation: spin 2s linear infinite; -moz-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } .searchProExt { position: relative; background-image: url('https://hadapro.com/ai/handyman.svg'); background-repeat: no-repeat; background-size: cover; background-position: center center; width: 100%; text-align: center; font-weight: 700; color: white; } .hz-pro-match-wizard__banner-overlay { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; background: #000; opacity: .4; } .hz-pro-match-wizard__content { position: relative; text-shadow: 1px 1px 0px #000; z-index: 2; padding: 20px; font-size: 1.8em; } .hz-pro-match-wizard__actions { position: relative; z-index: 2; border: 1px solid gray; border-radius: 6px; padding: 2px; background-color: white; margin: 20px 20px; } .center_div700 { max-width: 700px; margin: 0px auto; } .grid-container { display: grid; grid-template-columns: auto auto; } .hz-pro-match-wizard__service-query-container { background-color: white; padding: 0px 10px; } .hz-pro-match-wizard__service-query-container input { padding: 6px; font-size: 16px; border: 0px !important; width: 100%; } .relaUserSide .InlineMarg16 { display: block !important; width:100%; } .hz-pro-match-wizard__search-button-container { background-color: #4285F4; padding: 6px; border-radius: 4px; color: white; font-size: 1em; font-weight: 700; width: auto; min-height: 35px; min-width: 100px; border: 0px; cursor: pointer; } .hz-pro-match-wizard__search-button-container::before { content: "Rechercher"; } .sponsorDiv { font-size:0.8em; padding: 7px; font-weight: bold; color: #666; text-align:left; text-shadow: 2px 2px 1px #F0F0F0; } input, textarea, select { outline: none; } .source-field { position: relative; text-shadow: 1px 1px 0px #000; z-index: 2; padding-top: 20px; font-size: 1.8em; } .source-field:before,.source-field:after { content: "\2014"; position: absolute; } .source-field:before { margin-left: -38px; } .source-field:after { margin-left: 10px; } select { padding: 8.5px 20px; padding-right: 50px; width: auto; margin-bottom: 20px; font-size: 1em; -webkit-appearance: none; -moz-appearance: none; background: white; background-repeat: no-repeat; background-position-x: 98%; background-position-y: 50%; background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>"); border: 1px solid #D1D1D1; border-radius: 6px; } h2 { display: block; padding: 0px; margin: 0px; font-size: 1.5em; margin-block-start: 0.83em; margin-block-end: 0.83em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold; } #rotateGear { -webkit-animation: spin 2s linear infinite; -moz-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } @-webkit-keyframes spin {100% {-webkit-transform:rotate(360deg);}} @-moz-keyframes spin {100% {-moz-transform:rotate(360deg);}} @keyframes spin {100% {transform:rotate(360deg);}} .nav-up { top: -70px; } .nav-down { top: 0px; } .col-sm-1 .wof { margin-right: 10px; } .padding4 { padding: 4px; } .padding10 { padding: 10px; } .padding14 { padding: 14px; } .padding32 { padding: 32px; text-align: center; } .padding100 { padding: 100px; text-align: center; } .padding010 { padding:0 10px !important; } .height8 { height: 8px; } .height10 { height: 10px; } .height15 { height: 15px; } .height20 { height: 20px; } .height30 { height: 30px; } .height40 { height: 40px; } .height50 { height: 50px; } .height52 { height: 52px; } .height58 { height: 58px; } .height60 { height: 60px; } .height70 { height:70px; } .height90 { height: 90px; } .height100 { height: 100px; } .CpHd__app .o-layout__app svg { margin:5px; } hr { border: 1px solid white; border-bottom: none; width: 100%; } .tagstitle { font-weight: 700; margin-bottom: 4px; } .affichRes { border-bottom: 1px solid #ffffff; padding: 14px 0px; } .affichRes div { font-size: 1rem !important; } .o-layout__item { position:relative; } .o-layout__item { display: inline-block; font-size: 1rem; margin-right: -4px; vertical-align: top; box-sizing: border-box; } .o-layout__item h2,#all_a { font-size: 1rem !important; } .o-layout__app .langMargEsp,.o-layout__item svg { padding-right: 15px; padding-top: 15px; } .o-layout__app .wof { margin-right:15px; font-size: 2rem !important; } .o-layout__app div { display: inline-block; } .o-layout__app a { padding-top:10px; } .o-layout__app { padding-bottom:20px; } .Footer-appStoreIcon svg { width:120px; height:36px; fill:#a6a6a6; } .c-list__link { display: table-cell; vertical-align: middle; padding-right: 26px; height: 26px; color: white; font-size: 1.8rem !important; } .flagFotr { display:inline-block; position:relative; width:16px; height:11px; top:1px; margin-right:6px; background:url(../ai/flags.png?ref=1) no-repeat; } .flagFotr.flag-dz { background-position:-0px -0px; } .flagFotr.flag-fr { background-position:-16px -0px; } .flagFotr.flag-us { background-position:-32px -0px; } .footerClsbtm { border-top: 1px solid gray; color: #F7F7F7; text-shadow: 0px 1px 2px #000; } .TopWorKk:nth-child(2) { margin:10px; font-weight:bold; } .InputTexter input,.InputTexter select { padding: 6px; font-size: 16px; border: 0px; width: 100%; } .widthMax { max-width: 100% !important; } .borderRed div { background-color: #FFA395; } .getFlou { -webkit-filter: blur(4px); -moz-filter: blur(4px); -o-filter: blur(4px); -ms-filter: blur(4px); filter: blur(4px); } .getFlouMax { -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); } .error_tap { border: 1px solid red !important; color: red; } .Cl_Loginwf .hameOFlog { padding:48px 38px; } .Cl_Loginwf { position: relative; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2); margin:0 auto; background-color: rgba(255,255,255,0.2); max-width: 600px; text-align: left; } .Cl_Loginwf .loading_form { margin:0px !important; } .InputTexter div.AffichPass::before { font-family:'FontAwesome'; font-size: 1.7rem; position: relative; top: 8px; } .setOptSig { border-radius:3px; cursor:pointer; display:inline-block; vertical-align:middle; margin:2px; padding:4px 16px; background-color:#F1F1F1; border-radius:8px; font-size:0.9em; } .setOptSig span { font-size:1.2em !important; display:inline-block; position:relative; top:1px; } .setOptSig:hover { background-color:#D1D1D1; } .col-sm-3 .setOptSig .wof { font-size: 0.8em !important; } .col-sm-1 .setOptSig,.col-sm-2 .setOptSig,.col-sm-3 .setOptSig { border:1px solid gray; } .col-sm-1 .setOptSig span,.col-sm-2 .setOptSig span,.col-sm-3 .setOptSig span { top:0px; } #loadLogin .setOptSig span { font-size:1.7em !important; top:4px !important; color:#C9C9C9; } .set_Op3 { background-color: transparent !important; border: 1px solid transparent !important; position: relative; top: 3px; padding: 0px; padding-right: 18px; } .select_Op { background: #F1FAEF; border: 1px solid #CCEDC5; } .select_Op span,.select_Op { color: green !important; } .InputTexter { position:relative; max-width: 400px; border:1px solid #D1D1D1; background-color:white; width:100%; cursor:text; border-radius:6px; } .InputTexter .wof { position: relative; top: -1px; } .InputTexter div.logLogin { color: gray; padding: 16px 12px; margin-left: 3px; } .InputTexter div.AffichPass { border-top-right-radius: 6px; border-bottom-right-radius: 6px; position:absolute; background-color:#E1E1E1; padding:0px 14px; top:0px; height:100%; right:0px; cursor: pointer; } .hiddInputText { border: 0px; cursor: not-allowed; pointer-events: none; -webkit-box-shadow: none; box-shadow: none; font-size: 1.0em; width: 130px; background: transparent; } .selectTobBot { background-color: #000000 !important; } .selectTobBot a, .selectTobBot a .wof { color: white !important; text-shadow: 0px 0px 0px transparent !important; } .hz-project-match-content__info { background-size: cover; background-image: url('https://hadapro.com/ai/RadioHOLandingHeroImage.png'); width: 100%; position: relative; } .hz-project-match-content__info__content { position: relative; padding: 10px; max-width: 650px; margin-bottom: 60px; } .hz-project-match-content__info__title { font-size: 1.8em; font-weight: bold; margin-bottom: 40px; } .hz-project-match-content__info__step { width: 220px; } .hz-project-match-content__info__step__number { display: table-cell; padding-right: 10px; vertical-align: middle; font-size: 1em; } .vert__heigh__step { padding: 10px; vertical-align: top; height: 140px; } .LoadAdsensPc,.listWorker { display: table-cell; vertical-align: top; width:22%; } .listWorker { position: relative; width:100vw !important; } .listWorker .InputTexter div.logLogin { padding:4px 0px; } .listWorker .InputTexter { padding:0 4px; } .setDisImgTool b { font-size: 1.2em; } .starAvis { font-size: 0.9em; margin-top: 6px; line-height: 40px; } .starAvis label { position: relative; top: -8px; } .starAvis .wof { font-size: 2.4em; margin-right: 5px; cursor: pointer; } #tableToprofessionals .swiper-button-next,#tableToprofessionals .swiper-button-prev { height: calc(var(--swiper-navigation-size) * 6); margin-top: calc(-1 * var(--swiper-navigation-size) / 0.5); } .text--addIn_box textarea { height: inherit; font-size: 0.9em; display: block; width: 100%; padding: 4px 6px; background-color: #fff; border: 1px solid #ccc; border-radius: 6px; } .setDisImgTool img { width: 60px !important; height: 60px !important; } .setDisImgTool,.TopWorKk { display:inline-block; vertical-align:middle; } .listWorker .setDisImgTool:nth-child(3) { float:right; } .listWorker .setDisImgTool { vertical-align:top; } .profile-content-wide-redesign { position: relative; max-width: 773px; } .info-boxer-text { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; } .info-boxer-content .h2 { font-size: 2rem; font-weight: bold; } .info-boxer-content .h3 { font-size: 0.9rem; } .buttonTopicU .toRight { margin-top: 12px; } .profile-content-wide-redesign b, .buttonTopicU b { display: inline-block; max-width: 50%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; font-weight: 700; color: #333; } .profile-content-wide-redesign .header_border { border:1px solid gray !important; font-weight: 700; font-size: 0.9em; } .autocomplete-item { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ellipsisTx { display: inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; } .listWorker h3 { margin:0px !important; } .stat_level { position: absolute; border-radius: 50%; background-color: #4285F4; color: white; padding: 4px; z-index: 2; } .bannerProSuc { margin-bottom: 10px; } .txt_err,.bar_err,.alert-danger { padding: 6px 14px; background-color: #EC3535; border:1px solid #DC1414; color: white; font-size: 1em; font-weight: bold; border-radius: 10px; } .txt_suc,.bar_suc,.alert-suc,.bannerTopSuc,.bannerProSuc,.bannerProSucShp { padding: 6px 14px; background-color: #00A65A; border:1px solid #008D4C; color: white; font-size: 1em; font-weight: bold; border-radius: 10px; } .Tombola-Done_msg { text-align:center; line-height: 50px; } .Tombola-Done_msg .wof { font-size:4em; color:green; } .Tombola-Done_msg .header_border { width:200px; margin:0 auto; box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2); } .col-sm-11 { position: relative; line-height:40px; background-color:white; border-top:1px solid #C0C0C0; border-bottom:0px; top:0px; } .col-sm-11 a:hover { background-color: rgba(66, 133, 244, 1); } .col-sm-11 a:hover,.o-layout__item a { color: white !important; } .col-sm-11 a:hover .i-superpowers { color: white; } .col-sm-11 img { border-radius:10% !important; width:80px !important; height:80px !important; margin: 20px; background-color: #E0E0E0; border: 2px solid #4285F4; } .col-sm-11 .stat_level { top: 12px !important; right:10px; font-size: 1.1em !important; } .col-sm-1 { position: relative; line-height: 40px; } .relaStatBar { position: absolute; left: 0px; top: 0px; font-size: 0.8em; background: rgba(0, 38, 255, 0.8); color: white; border-top-right-radius: 6px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; padding: 2px 8px; } .relaStatBarx { position: relative; display: inline-block; padding: 10px 6px; color: white !important; } .TheboxX .content { box-shadow: 5px 5px rgba(0,0,0,0.2); } .TheboxX .content { position: relative; max-width: 700px; background: white; padding: 1px 24px; transition: max-width 0.4s ease; margin: 10px; margin-top: 16px; top: 60px; } .TheboxX .content.expand { max-width: 1070px; } .addBox { animation-duration:0.3s; animation-fill-mode:both; animation-name: addBoxAmnt; } @keyframes addBoxAmnt { from { top:200px; opacity: 0; transform: translate3d(0, 6%, 0); } to { top:0px; opacity: 1; transform: none; } } .Thebox_overlayBG { background-color: rgba(0,0,0,.6); } .TheboxX { position: fixed; width: 100%; height: 100%; } #TheboxX_overlay { width: 100%; height: 100%; } .TheboxX .content { background:none repeat scroll 0% 0% rgb(255, 255, 255); } .TheboxX .content > p:first-child { margin-top: 0; } .TheboxX .content { text-align: left; } #TheboxX_overlay { position: absolute; } .TheboxX .content h2::before { font-family: fontawesome; content: "\f05a"; font-size: 1.4rem; margin-right: 14px; } .TheboxX { z-index: 999; top: 0px; } .hidden,.loading_form { display: none; } #loadbgcover { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 98; } .loading_form div { display: grid; place-items: center; width: 100%; height: 100%; } .objectLsvg_sml { width: 20%; height: 20%; border-radius: 50%; border: 2px solid #EEEEEE; } .objectLsvg { width: 300px; height: 300px; } .loading_form { position: absolute; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.9); border-radius: 10px; z-index: 10; left: 0px; } .-zEcoverTxt { position: absolute; width: 100%; height: 100%; background: rgb(0,0,0,0.8); } .center_div1000 { max-width: 1170px; margin: 0px auto; } .grayColor .h2,.grayColor .h3,.versionCopRit { color: gray !important; } .versionCopRit { font-size: 0.8em; text-align: center; padding: 10px; text-shadow: 1px 1px 2px #FFFFFF; } .lgAdseInTpc { min-width: 100%; background: white; } .ClassUsrProfilo { position: relative; text-align:center; height: 340px; } .i-superpowers { position: relative; top: 1px; margin: 6px; color: #4285F4; } .ClassUsrProfilo img { border-radius: 10% !important; width:150px !important; height:150px !important; padding: 5px; background-color: #4285F4; margin-left: 20px; margin-top: 12px; } .ClassUsrProfilo .title { text-align: left; font-weight:bold; } .ClassUsrProfilo .title .tt label { font-size: 2.2em; top: 12px; margin-left: 20px; position: relative; color: white; } .ClassUsrProfilo .title .subscb { position: relative; top: 30px; margin-left: 10px; } .ClassUsrProfilo .list div { display: inline-block; padding-right: 20px; } .titleProfiloPro { position: absolute; width: 100%; bottom: 0px; background-color: rgba(0, 0, 0, 0.7); color: white; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .titleProfiloPro div { padding: 4px 10px; } .tt a { color:white !important; } .title .tt span, .relative { position: relative; } ul { list-style: none outside none; } .bgwhite { background-color: white; } .bgprGry { background-color: #EEEEEE; } .bgprRed { background-color: red; color: white; } .OthLink { position: relative; bottom: 0px; padding: 6px; z-index: 2; } .OthLink div { display: inline-block; vertical-align: top; margin: 1px; } .OthLink .i-qrcode,.OthLink .i-facebook-square,.OthLink .i-instagram,.OthLink .i-tiktok,.OthLink .i-youtube { font-size: 1.95em; cursor: pointer; } .hz-project-match-content__info__step__number__container { height: 32px; width: 32px; border: 1px solid black; text-shadow: 1px 1px 0px #FFFFFF; border-radius: 50%; } .hz-project-match-content__info__step__description { text-align: left; padding-right: 10px; line-height: 1.4; width: 140px; display: table-cell; vertical-align: middle; text-shadow: 1px 1px 0px #FFFFFF; font-size: 0.8em; } .hz-project-match-content__info__zip { position: relative; padding: 10px; border-radius: 10px; width: 350px; margin: 36px auto 36px; background-color: #fff; } .header-4 { font-size: 1.2em; font-weight: bold; } .hz-project-match-content__qualification { text-align: center; position: relative; } .hz-project-match-content__title { font-size: 1.6em; font-weight: bold; } .hz-project-match-content__qualification__container { margin-top: 36px; } .hz-project-match-content__info__step > h3 { margin-bottom: 0px; } .vert__heigh__step span { position: relative; font-size: 1.6em; top: 2px; margin-right: 6px; } #sideBarUs span.i-list { position: absolute; z-index: 2; background-color: gray; border-radius: 50%; border: 1px solid white; padding: 4px; font-size: 9px; color: white; top: 30px; right: 9px; } #sideBarUs label, .pointer, .deleteRow { cursor: pointer; } #sideBarUs { position: relative; } #sideBarUs img { position: relative; width: 40px; height: 40px; margin: 4px; border-radius: 50%; margin-right: 10px; margin-left: 14px; background-color: gray; border: 1px solid gray; padding: 1px; } .user-sidebar { position: absolute; top: 65px; width: 610px; z-index: 222; right: 0px; box-shadow: 0px 0px 10px rgba(0,0,0,0.4); display: none; } .user-sidebarCntnt { position: relative; background-color: rgba(255, 255, 255, 1); } .user-sidebarCntnt::after { content: ""; position: absolute; bottom: 100%; right: 20px; margin-left: -11px; border-width: 11px; border-style: solid; border-color: transparent transparent #FFFFFF transparent; } .user-sidebar .InlineMarg16 { margin:0 !important; } .item-price, .item-num { padding: 0px 8px; } .Proclasses { background-color: gray; padding: 0px 4px; border-radius: 4px; font-weight: bold; color: white; } .Visitadm { background-color: red; color: white !important; } .Visitadm .wof { padding-top: 9px !important; } .Visitadm a,.Visitadm .logo a:after,.Visitadm .logo::first-letter { color: white !important; } .ToggleSwitch-inner { margin:0px 8px; display: inline-block; position: relative; margin-left: 12px; vertical-align: text-bottom; cursor: pointer; } .ToggleSwitch-bg { display: block; width: 29px; height: 16px; border-radius: 10px; background-color:#F0F0F0; -webkit-transition: all .2s ease-out; transition: all .2s ease-out; border: 2px solid #139ff0; width: 58px; height: 27px; border-radius: 20px; } .ToggleSwitch-handle { top:4px; left:2px; width:23px; height:23px; margin:0 3px; border-radius:50%; background-color:#139ff0; position:absolute; outline:0; transition:ease-out left .1s; } .InlineMarg16 { vertical-align: top; display: inline-block; margin-right: 16px; } .user-sidebar .first { border-right: 1px solid #DEDEDE; } .closeBarTop { position: absolute; font-size: 28px; right: 24px; top: 20px; cursor: pointer; z-index: 2; } .orderListTop { min-width: 300px; } .user-sidebar .first { border-right:1px solid #DEDEDE; } .sidebar-navList { padding: 20px; border-bottom: 1px solid #DEDEDE; font-weight: bold; } .sidebar-nav .wof { font-size: 24px !important; margin-right: 12px; position: relative; top: 3px; width: 30px; } .sidebar-nav a { display: block; color: black; padding: 10px 20px; margin: 10px 0px; } .sidebar-nav a:hover { background-color: #DEDEDE; } .hz-project-match-content__info__step__description { width: 240px; } .hz-project-match-content__regular-question__multi-option-section__container { margin-top: 16px; list-style: none; border-top: 1px solid #CCCCCC; margin-bottom: 10px; } .selectCheckBox::before,.selectCheckBox.selected::before { font-family:'FontAwesome'; content: "\f00C"; position: absolute; top: 18px; left: 15px; font-size: 0.8em; padding: 5px; border-radius: 4px; } .selectRadioBox::before,.selectRadioBox.selected::before { font-family:'FontAwesome'; content: "\f068"; position: absolute; top: 16px; left: 15px; font-size: 1em; padding: 5px; border-radius: 50%; } .selectCheckBox::before { background-color: white; border: 1px solid #CCCCCC; color: #CCCCCC; } .selectRadioBox::before { background-color: white; border: 1px solid #CCCCCC; color: white; } .selectCheckBox.selected,.selectRadioBox.selected { background-color: #f8f8f8; } .selectCheckBox.selected::before { background-color: green; border: 1px solid green; color: white; animation-duration:0.6s; animation-fill-mode:both; animation-name: bounceIn; } .selectRadioBox.selected::before { color: green; animation-duration:0.6s; animation-fill-mode:both; animation-name: bounceIn; } .selectCheckBox,.selectRadioBox { width: 100%; height: 60px; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; position: relative; padding: 0 19px; cursor: pointer; display: table; margin-left: -40px; } .hz-project-match__checkbox-option__checkbox, .hz-project-match__checkbox-option__label { display: table-cell; vertical-align: middle; } .hz-project-match__checkbox-option__checkbox { position: relative; width: 20px; line-height: 9px; top: -4px; } .hz-project-match__checkbox-option__checkbox input { visibility: hidden; } .hz-project-match__checkbox-option__label,.InputTexter .setInlineBox { display: table-cell; vertical-align: middle; } .setInlineBox input { border-radius: 6px; } .widthMax .setInlineBox { display: inline-block; width: 90%; } .hz-project-match__checkbox-option__label { padding-left: 16px; } .xem99 { padding-left: 45px; } .hz-project-match__checkbox-option__label .wof { position: absolute; top: 17px; left: 50px; margin: 0 10px; font-size: 2em; } .hz-checkbox-input--md { width: 20px; height: 20px; } .hz-project-match-content__section { padding-top: 20px; font-size: 0.9em; } .hz-project-match-dialog-footer { width: 100%; height: 50px; position: fixed; bottom: 0; text-align: center; padding: 12px 0; z-index: 100; background-color: #fff; -webkit-box-shadow: 0 0 13px 0 rgb(0 0 0 / 50%); box-shadow: 0 0 13px 0 rgb(0 0 0 / 50%); left: 0; } .invoice { background: #FFFFFF; margin: auto; border-radius: 14px; padding: 25px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); overflow: hidden; } .invoice-header { display: grid; grid-template-columns: 1fr auto; gap: 10px; border-bottom: 2px solid #f0f0f0; padding-bottom: 15px; } .invoice-header .c-button { padding: 2px 6px 1px; font-size: 1rem; margin: 2px; } .invoice-item_title, .invoice-item, .invoice-item_total { display: grid; grid-template-columns: 30px 2fr 1fr 1fr; gap: 6px; padding: 6px 0; } .invoice-item_title { font-size: 0.8rem; font-weight: 700; } .invoice-item { cursor: pointer; border-top: 1px dashed #ddd; } .invoice-item:last-child { border-bottom: none; } .item-price, .item-date { } .invoice-item .item-date { color: gray; font-weight: 700; } .item-name { color: #333; font-weight: 700; } .item-phone { font-size: 0.9rem; } .invoice-item_total { border-top: 1px solid #ddd; } .invoice-item_total, .item-soc, .bold { font-weight: bold; color: #222; } .bold-name { font-weight: bold; font-size: 1.2em; } .hz-project-match-dialog-footer__button { height: 50px; margin-left: 8px; margin-right: 8px; } .hz-project-match-content__regular-question__next, .hz-project-match-content__regular-question__prev { width: 200px; } .hz-project-match-content__regular-question__count { margin-top: 8px; color: #ababab; } .hz-project-match-content__description-question__text-area { width: 100%; height: 244px; border: 1px solid #ccc; padding: 16px; resize: none; border-radius: 3px; margin-top: 24px; display: inline-block; outline: none; } .hz-project-match-content__description-question__character-count { margin-top: 5px; color: #888; font-size: 0.7em; } .hz-project-match-content__contact-question__name-container { margin-top: 25px; margin-bottom: 25px; position: relative; } .hz-project-match-content__contact-question__name-container label { color: red; font-size: 0.9em; padding-top: 15px; } .hz-project-match-content__contact-question__name-container input { border: 1px solid #ccc; border-radius: 3px; width: 100%; height: 50px; padding: 14px 16px; font-size: 18px; outline: none; } .text-l { font-size: 0.9em; } .text-h { position: relative; font-size: 1.8em !important; top: 3px; } .btn { display: inline-block; margin: 4px; font-weight: bold; text-align: center; vertical-align: middle; touch-action: manipulation; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; padding: 4px 12px; font-size: 14px; line-height: 1.42857143; border-radius: 3px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .btn-lg { padding: 8px 20px; font-size: 1em; border-radius: 4px; font-weight: bold; } .btn-primary { color: #ffffff; background-color: #983A3A; border-color: #983A3A; } .hz-project-match-dialog-footer__completion-progress-bar { height: 3px; position: absolute; top: 0; left: 0; background: #983A3A; width: 15%; } .lastTapPro { margin: 0px; padding-top: 20px; } .lastTapPro .vert__heigh__step { margin: 10px; padding: 20px; height: 200px; width: 100%; padding: 10px 0px 20px; } .gradient-left, .gradient-right { position: absolute !important; top: 2px; width: 2%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; z-index: 10; } .gradient-left { left: 2px; background: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent); } .gradient-right { right: 2px; background: linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent); } .lastTapPro span { font-size: 4.8em; margin: 30px 0px; } .online_us { position: relative; color: green; transition: 0.4s; font-weight: 700; margin-right: 4px; } .cursor_write { display: inline-block; position: relative; width: 1px; right: 0px; border-right: 1px solid black; color: transparent; top: -1px; animation: blink 0.7s infinite; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } .container { width: 100%; height: 200px; vertical-align: top; margin: 10px; font-size: 0.9em; } .loadCont01 span,.loadCont02 span,.loadCont03 span { font-size: 2.4em; color: gray; position: relative; top: 58px; } .svg-success { display: block; height: 80px; width: 80px; opacity: 1; margin-bottom: 15px; background: #F8F8F8; border-radius: 50%; overflow: visible; } @-webkit-keyframes changeColor { to { color: #81c038; } } @keyframes changeColor { to { color: #81c038; } } @-webkit-keyframes success-circle-outline { 0% { stroke-dashoffset: 72px; opacity: 0; } 100% { stroke-dashoffset: 0px; opacity: 1; } } @keyframes success-circle-outline { 0% { stroke-dashoffset: 72px; opacity: 0; } 100% { stroke-dashoffset: 0px; opacity: 1; } } .svg-success .success-circle-outline { fill: none; stroke-width: 1px; stroke: #81c038; stroke-dasharray: 72px, 72px; stroke-dashoffset: 72px; -webkit-animation: success-circle-outline 2000ms ease-in-out 800ms forwards; animation: success-circle-outline 2000ms ease-in-out 800ms forwards; opacity: 0; } .container .changeColor { -webkit-animation: changeColor 0s ease-in-out 800ms forwards; animation: changeColor 0s ease-in-out 800ms forwards; } .loadCont01 .success-circle-outline { animation-delay: 0s; } .loadCont02 .success-circle-outline { animation-delay: 1s; } .loadCont03 .success-circle-outline { animation-delay: 2s; } .loadCont01 .changeColor { animation-delay: 1.9s; } .loadCont02 .changeColor { animation-delay: 2.9s; } .loadCont03 .changeColor { animation-delay: 3.9s; } .btn-secondary { color: #4c4c4c; background-color: #fafafa; border-color: #cccccc; } .btn.disabled, .btn[disabled],.disabled_button { cursor: not-allowed !important; pointer-events: none !important; opacity: 0.45 !important; filter: alpha(opacity=45) !important; -webkit-box-shadow: none !important; box-shadow: none !important; } .hz-project-match-content__description-question__instruction { margin-top: 8px; font-size: 0.8em; } .hz-project-match-content__description-question__instruction__text { padding-left: 4px; } .returnToHomeProfile a { padding: 14px 20px 10px; display: block; color: white; } .returnToHomeProfile { position: relative; color: black; font-size: 1.6em; text-align: left; } .returnToHomeProfile a:hover span { left: 5px; } .returnToHomeProfile span { position: relative; left: 0px; transition:all 1s ease; } .listTop-Profil { position: relative; display: table; width: 100%; top: 15px; } .listTop-Profil .imgTopp,.listTop-Profil .title { display: table-cell; vertical-align:top; } .imgTopp { position: relative; margin-right: 5%; width: 200px; } .imgTopp .stat_level { top: -1px !important; right:-13px; font-size: 1.5em !important; } .title .header_border { position: relative; top: -3px; text-align: center; left: 10px; font-weight: 700; } .hidden { display: none; } .block { display: block; } .vi_hidden { visibility: hidden; } #listeHeader .swiper-button-next { right: -6px; } #listeHeader .swiper-button-prev { left: -6px; } #listeHeader .swiper-button-next .classhp { right: 9px; } #listeHeader .swiper-button-prev .classhp { left: 9px; } #listeHeader .swiper-button-next .classhp, #listeHeader .swiper-button-prev .classhp { position: relative; background: rgba(225, 221, 221, 1); border-radius: 20%; margin-top:1px; height: 40px; width: 40px; z-index: 111; } #listeHeader .swiper-button-next .classhp:hover, #listeHeader .swiper-button-prev .classhp:hover, #listerdtHeader .swiper-button-next .classhp:hover, #listerdtHeader .swiper-button-prev .classhp:hover { box-shadow: 0px 0px 0px 4px rgba(0,0,0,0.3); } #listeHeader .swiper-button-next .wof { display: block; margin: 12px 15px; } #listeHeader .swiper-button-prev .wof { display: block; margin: 12px 13px; } .nosswiphd { position: absolute; background: rgb(9,9,121); display: block; height: 100%; width: 60%; } .nosswipdh { position: absolute; background: rgb(9,9,121); display: block; height: 100%; width: 60%; } .TbleUser { padding: 8px !important; width: 200px !important; height: 200px !important; } .coverImgTbl { background-repeat: no-repeat; background-size: cover; background-position: center center; } .titleEsUsP { width:200px; padding: 5px 0px; text-align: center; } .titleEsUsP .i-superpowers { top: 0px; } .ellipsisTx { max-width: 100%; } .startsWorker { font-size: 0.8em; color: #C0C0C0; margin-top: -12px; } .tp__iuser .wof { color: #C0C0C0; } .startsWorker .wof { position: relative; top:0px !important; } .s-yallow,.tp__iuser label { color: #FFBE28 !important; font-weight: 700; } .header_border { border: 1px solid #F0F0F0; padding: 2px 14px; border-radius: 6px; font-size: 1em; cursor: pointer; font-size: 1em; } .header_border:hover { opacity: 0.9; } .c-button--white { color:black; background-color: #ffffff; border-color: #a1a1a1 !important; } .c-button--facebook, .c-button--instagram, .c-button--tiktok, .c-button--youtube { color:white; padding: 2px; } .c-button--facebook { background: linear-gradient(180deg, #1877f2 0%, #166fe5 100%) !important; } .c-button--instagram { color:white; background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5) !important; } .c-button--tiktok { background: #000 !important; } .c-button--youtube { background: #F70000 !important; } .c-button--primary { color:white; background-color:#52b035; border-color :#52b035 !important; } .c-button--secondary { color: white; background-color: #B03535; border-color: #B03535 !important; } .c-button--setup { color: white; background-color: #983A3A; border-color: #983A3A !important; } .c-button--gray { color: #606060; background-color: #E5E5E5; border-color: #E5E5E5 !important; } .c-button--add { color:white; background-color: #4285F4 !important; border-color: #4285F4 !important; margin-top: -13px; } .tp__iuser-bg { margin-top: 20px; background-color: white; } .tp__iuser { display: inline-block; vertical-align: middle; width: auto; padding: 14px; padding-right:22px; } .c-button { display: inline-block; margin-bottom: 0; text-align: center; vertical-align: middle; -ms-touch-action: manipulation; box-shadow: inset 0px 0px 5px rgba(0,0,0,.1); touch-action: manipulation; cursor: pointer; background-image: none; border: 1px solid; white-space: nowrap; padding: 6px 21px; font-size: 18px; line-height: 1.42857; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: .5s all; } .c-button a,.c-button a:hover { display: block; color: white !important; padding: 12px 21px; } .previewImage { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4; } .NoPddNoMar { padding: 0px; margin: 0px; } .optionTools h2 { border-bottom: 1px solid gray; padding-bottom: 12px; } .optionTools .zray a { border-top: 1px solid gray; padding: 12px; text-align: center; display: block; } .tp__ilist { display: inline-block; vertical-align: top; width: 50%; } .othtxtHot { padding: 0px 10px 0px; font-size: 1rem position: relative; top: 0px; border-radius: 3px; background: #983A3A; color: white !important; } .classOthtxtHot p { position:relative; } .classOthtxtHot .othtxtHot { left: 240px; margin-top: 7px; position: absolute; width: 30px; text-align: center; } .classOthtxtHot label { display: inline-block; width: 55%; } .classOthtxtHot t { color: #FC8C14; } .othtxtOrg { background-color: #FC8C14; color: white !important; padding: 0px 10px 0px; font-size: 12px; position: relative; top: -2px; border-radius: 3px; font-weight: 700; } .box { position: relative; border-radius: 4px; border-top:3px solid #d2d6de; margin-bottom: 20px; width: 100%; box-shadow: 0 1px 1px rgba(0,0,0,.1); } .box-body { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 15px 0px 0px; } .box-footer { padding: 25px 0; } .rangeslider,.rangeslider__fill { display: block; -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .rangeslider { background: #e6e6e6; position: relative; } .rangeslider--horizontal { height: 20px; width: 100%; } .MinHeight400 { min-height: 400px; } .rangeslider--vertical { width: 20px; min-height: 150px; max-height: 100%; } .rangeslider--disabled { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4; } .rangeslider__fill { background: #00ff00; position: absolute; } .rangeslider--horizontal .rangeslider__fill { top: 0; height: 100%; } .rangeslider--vertical .rangeslider__fill { bottom: 0; width: 100%; } .rangeslider__handle { background: white; border: 1px solid #ccc; cursor: pointer; display: inline-block; width: 40px; height: 40px; position: absolute; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(0, 0, 0, 0.1))); background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1)); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1)); background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1)); -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } .rangeslider__handle:after { content: ""; display: block; width: 18px; height: 18px; margin: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEzIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.13)), color-stop(100%, rgba(255, 255, 255, 0))); background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0)); background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0)); background-image: linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0)); -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } .rangeslider__handle:active, .rangeslider--active .rangeslider__handle { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.12))); background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12)); background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12)); background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12)); } .rangeslider--horizontal .rangeslider__handle { top: -10px; touch-action: pan-y; -ms-touch-action: pan-y; } input[type="range"]:focus + .rangeslider .rangeslider__handle { -moz-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9); -webkit-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9); box-shadow: 0 0 8px rgba(255, 0, 255, 0.9); } .MoreSize { font-size: 16px; height: 29px; margin: 0px -1px; display: inline-block; top: 1px; } @media (max-width: 480px) { .invoice { max-width: 95%; padding: 15px; } } @media (max-width: 990px){ .grid2boxTopic {grid-template-columns: 1fr;} #loadAdss {display:none !important;} .ClassUsrProfilo img {width:120px !important;height:120px !important;} .imgTopp {width: 160px;} } @media (max-width: 770px){ .p_allGrid2Line, .invoice-header {grid-template-columns: 1fr;} .imgTopp {width: 120px;} .imgTopp .stat_level {top: 4px !important;right:-9px;font-size: 1em !important;} .ClassUsrProfilo .title .tt label {font-size:1.6em;margin-left: 20px;} .ClassUsrProfilo img {width:100px !important;height:100px !important;} #largeU3 {display:block;width:100% !important;margin-bottom:30px;} .tp__ilist{display: block !important;width:100% !important;} .hz-project-match-content__info__step {padding-bottom: 10px;} .listWorker .setDisImgTool:nth-child(3) {float:none;display:block !important;} .listWorker .header_border {width:100% !important;} .InputTexter {width:100%;} .ellipsisTx {max-width: 250px;} .searchBarTop { display: none; } .logo { width: 100%; } .vert__heigh__step { width: auto; text-align: center; } .hz-pro-match-wizard__content { font-size: 1.5em !important; } .hz-project-match-content__info__title { font-size: 1.4em; } .flex-container,.flex-container__pro__carousels { display: block; } .ProSHowBg { margin: 0px; margin-top: 10px; margin-top: 10px; } } @media screen and (max-width: 544px){ .ClassUsrProfilo .title .tt label {font-size:1.4em;margin-left: 10px;} .imgTopp .stat_level {top: -10px;right:-8px;font-size: 0.8em !important;} .hz-pro-match-wizard__search-button-container::before {font-family:'FontAwesome';content: "\f002";} .ClassUsrProfilo img {width:80px !important;height:80px !important;} .listTop-Profil .title .header_border {display: block;left:0px;top:0px;margin:10px 0px;} } .flex-unppis,.flex-rdtvp { display: block; flex-wrap: wrap; } #categoreshop .flex-rdtvp { display: flex; flex-wrap: wrap; } .unppis,.rdtvp { flex-direction: row; flex: 1 0 180px; margin: 5px; border-radius: 6px; height: 180px; } .unppis a,.rdtvp { display: block; } .div_unppis { position: relative; height: 100%; } .xx { flex: 1 0 180px; background-color: #C0C0C0; border-radius: 6px; } .unppis_name { position: absolute; bottom: 0; left: 0; width: 100%; font-size: 0.8rem; padding: 10px 0px; } .unppis_name b { font-size: 1rem; } .unppis_pic img { position: absolute; top: 4; left: 4px; border-radius: 6px; width: 90px; height: 90px; border: 1px solid white; } .unppis_num { position: absolute; top: 4px; right: 4px; background-color: #090979; font-weight: 700; color: white; padding: 2px; width: 24px; border-radius: 6px; font-size: 0.8rem; } .date-area,.containerx,.single-box,.custom,.contentx,.box-right { box-sizing: border-box; } .containerx { position:relative; display: flex; flex-wrap: wrap; margin: 20px auto; } .single-box { display: flex; flex-wrap: nowrap; justify-content: center; width: 100%; } .containerx:before { position: absolute; right: 17%; top: 0; content: ' '; display: block; width: 5px; height: 100%; margin-right: -1px; background: rgb(213,213,213); background: -moz-linear-gradient(top, rgba(213,213,213,0) 0%, rgb(213,213,213) 8%, rgb(213,213,213) 92%, rgba(213,213,213,0) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1))); background: -webkit-linear-gradient(top, rgba(213,213,213,0) 0%, rgb(213,213,213) 8%, rgb(213,213,213) 92%, rgba(213,213,213,0) 100%); background: -o-linear-gradient(top, rgba(213,213,213,0) 0%, rgb(213,213,213) 8%, rgb(213,213,213) 92%, rgba(213,213,213,0) 100%); background: -ms-linear-gradient(top, rgba(213,213,213,0) 0%, rgb(213,213,213) 8%, rgb(213,213,213) 92%, rgba(213,213,213,0) 100%); background: linear-gradient(to bottom, rgba(213,213,213,0) 0%, rgb(213,213,213) 8%, rgb(213,213,213) 92%, rgba(213,213,213,0) 100%); z-index: 5; } .date-area { display: flex; order: 2; text-align: center; color: #fff; flex-basis: 100px; } .date-area>span { font-size: 0.9rem; line-height: 70px; margin: auto; font-weight: bold; background: #1D1D71; width: 100px; height: 70px; padding: 0 8px; border-radius: 6px; z-index: 20; } .contentx { position: relative; text-align: center; padding: 10px; border-radius: 10px; color: #858585; order: 3; width: 65%; right: 15px; background: #fff; margin-bottom: 3%; } .box-left .contentx:after { top: 53%; margin-top: -8px; right: -16px; margin-left: -8px; border: solid transparent; border-left-color: rgb(255,255,255); border-width: 8px; } .TimLinePro { text-align: center; font-size: 1.8rem; margin: 30px 0px; } .contentx:after { content: ""; position: absolute; height: 0; width: 0; pointer-events: none; } .contentx h3 { margin: 5px; font-size: 16px; color: #000; } .imgandtxt { display: flex; } .firsttxt { text-align: justify; } .imgandtxt img { position: relative; top: -80px; margin-top: 30px; width: 380px; } @media (max-width: 640px) { .imgandtxt { display: block; } .imgandtxt img { top: 0px; width: 100%; } .box-right .contentx:after { top: 53%; margin-top: -8px; right: -16px; margin-left: -8px; border: solid transparent; border-left-color: rgb(255,255,255); border-width: 8px; } } @media (min-width: 900px) { .col-lg-4 { width: 33.33333333%; float: left; } .flex-rdtvp { display: flex; } } @media (min-width: 640px) { .flex-unppis { display: flex; } .contentx, .custom { width: 40%; } .containerx:before { right: 50%; margin-right: -3px; } .box-left .contentx:after { top: 58%; } .contentx { width: 40%; } .box-right .contentx { order: 1; padding-right: 10px; border-radius: 10px; right: -15px; } .box-right .contentx:after { top: 58% !important; margin-top: -8px !important; left: -16px !important; margin-right: -8px !important; border: solid transparent !important; border-right-color: rgb(255,255,255) !important; border-width: 8px !important; } .box-right .custom { order: 3; } } .autocomplete-item mark { background: yellow; font-weight: bold !important; color: black; padding: 0 2px; border-radius: 3px; } .my-masonry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } .my-masonry-item { break-inside: avoid; margin: 4px; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.1); cursor: pointer; transition: all 0.3s ease; position: relative; } .my-masonry-item a { display: block; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; z-index: 1000; } .overlay.is-visible { opacity: 1; pointer-events: auto; } #popupInfo { position: relative; overflow-y: scroll; -webkit-overflow-scrolling: touch; } .popup { position: absolute; width: 300px; height: 300px; border-radius: 8px; box-shadow: 0 15px 40px rgba(0,0,0,0.3); transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: center; z-index: 1002; } .popup.is-expanded { width: 100% !important; height: 100% !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; } .popup img { width: 100%; height: 100%; object-fit: cover; } .popup__close { position: absolute; top: 20px; left: 20px; width: 40px; height: 40px; background: rgba(0,0,0,0.7); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 20px; border: none; opacity: 0; transition: opacity 0.3s ease; z-index: 10; } .popup.is-expanded .popup__close { opacity: 0; } @media (max-width: 768px) { .masonry-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .popup.is-expanded { width: 90vw; height: 90vw; } }