:root {
    --color-primary: #00275c;
    --color-secondary: #009cde;
    --color-app-red: #dc0714;
    --color-haolam-lightblue: #019cde;
    --color-haolam-red: #dc0714;
    --color-haolam-darkblue: #00275c;
    --bg-gradient: radial-gradient(circle farthest-corner at 50% 50%, #1A2D5A 15.0634765625%, #009CDE 80.2886962890625%);
     --font-awesome: "Font Awesome 6 Pro";
}

body * {
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
}
/*template overrides*/
body.app_store{font-family: Assistant !important;color:var(--color-primary)}
body.app_store .header{position:relative; min-height:65px;}
body.app_store .headerLeft{padding-left:0 !important}
body.app_store>.centeredContent{max-width: initial;padding:0}
body.app_store .contentFrame{ padding:0 !important; width:100% !important; font-family: inherit}
body.app_store>.centeredContent .pagePadding{padding:0}
body.app_store .blueMap_inner{background-image: none; height:1px;border-bottom:none; padding:0}
body.app_store .blueMap_Plane img{display: none}
body.app_store .headerMenu{display: none}
body.app_store .headerMenu_pop{display: none}

/*end template overrides*/

/*general*/
.rel_div{position:relative}
.mobile_only{display: none}
@media screen and (max-width: 760px) {
    .mobile_only{display: block}
}
.crossed_price { text-decoration: line-through;}
img.inline_logo{height:0.8em}

.double_btns{display:flex; flex-wrap: wrap; justify-content: center; margin-right: -40px}
.double_btns a{margin:5px 40px 5px 0}

a.action_btn{color:white !important; text-decoration:none}
.action_btn{display: inline-block;text-align: center; line-height:45px; border-radius:30px; font-size:20px;width:200px; border:2px solid white;}
.action_btn.main_btn{background-color:var(--color-secondary);}
.action_btn.second_btn{background-color:var(--color-primary);}

.action_btn.main_btn:hover{background-color:white; color:var(--color-secondary) !important;border-color:var(--color-secondary);  }
.action_btn.second_btn:hover{background-color:white; color:var(--color-primary) !important;border-color:var(--color-primary);  }

.action_btn i{margin-left:7px}
.action_btn:hover i{font-weight:bold !important}

.up_to_tablet{display:none}
@media screen and (max-width: 768px) {
    .up_to_tablet{display: block}
}
.dots-circle::before {
    position: absolute;
    font-family: Font Awesome Kit;
    font-weight: normal !important;
    content: '\e030';
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: auto;
    font-style: normal;
    line-height: 1;
    font-size: 1.9em;
    color: var(--color-secondary);
    right: -11px;
    top: -7px;
}

/* page template */
.logo_mishne{display:flex;align-items:baseline; justify-content: center;padding-top:4px}
.logo_mishne span{display:inline-block; color:var(--color-secondary);font-size: 18px;line-height: 22px;font-weight:bold}
.logo_mishne img{display:inline-block; width:51px; margin-right:6px}
.PageWrapper{}
/* end page template */

/*head*/
ul.topPageLinks{position:sticky;top:0;z-index:20;display:flex; flex-direction: row;justify-content: space-evenly; justify-items: center; color:white;}
ul.topPageLinks li{width:100%;height:45px; line-height:45px;text-align:center;background-color: var(--color-primary);border-left: 2px solid white;}
ul.topPageLinks li:last-child{border-left:none}
ul.topPageLinks li>a{display: block;width: 100%; height: 100%;text-decoration: none;color:white}
ul.topPageLinks li>a:hover{background-color:var(--color-secondary)}
ul.topPageLinks li>a:hover i{font-weight:bold !important}
ul.topPageLinks li i{margin-left:10px}
ul.topPageLinks br{display:none}
@media screen and (max-width: 540px) {
    ul.topPageLinks li{line-height:15px;}
    ul.topPageLinks li a{padding-top:6px; height:calc(100% - 6px)}
    ul.topPageLinks li a i{display: none}
    ul.topPageLinks br{display:inline}
}

/*video*/
.video_container{position:relative;z-index:10;display: flex; ;background-color:var(--color-secondary); text-align:center}
.video_border{background-image: var(--bg-gradient);padding:20px 0}
.video_container video{width: 100%; max-height:500px; object-fit: cover; object-position: center center; opacity: 1;}

.video_container .cloud_footer{position:absolute; width:100%; bottom:-8px}

.text_on_video {position:absolute; top:0; left:0; width:100%; height:100%; display: flex; align-items: center; justify-content: center;}
.text_on_video>div{position:relative;display:inline-block;text-align:start;margin:auto;}
.text_on_video p, .text_on_video h1{color:white;font-size:min(13vw,75px);line-height:90px;text-shadow:0 0 2px rgba(0,0,0,0.9), 0 0 4px rgba(0,0,0,0.7), 0 0 8px rgba(0,0,0,0.5), 0 0 16px rgba(0,0,0,0.4)}

.text_on_video h1{font-weight:700; line-height:0.75em}
.text_on_video h1.xl-title{font-size: clamp(80px, 30vw, 250px);}
.text_on_video h1.l-title{font-size: clamp(80px, 25vw, 150px);}
.text_on_video h1.m-title{font-size: clamp(80px, 20vw, 110px);}
.text_on_video h1.s-title{font-size: clamp(100px, 15vw, 110px);}


.text_on_video.xl{padding-top:100px; align-items: flex-start}
.line_separator{height:1px; background-color:white;}
.line_separator.top_line{margin-bottom: 25px;width: 90%;}
.line_separator.btm_line{margin-top: 35px}
.plane_img{position: absolute; left: -80px;bottom: -20px;width: 70px;}

.initialState{transition:transform 0.7s ease-out;transition:opacity 0.3s ease-in-out;}

.plane_on_path.initialState{transform: translate(0px,-30px);}
.plane_on_path.finalState{transform: translate(-60px,-30px);}

.text_on_video .initialState{transform: translate(100px,0); opacity:0}
.text_on_video .finalState{transform: translate(0,0);opacity:1}

.text_on_video .plane_img.initialState{transform: translate(50px,40px);opacity:0}
.text_on_video .plane_img.finalState{transform: translate(0px,0px);opacity:1}

.list_bullets li.initialState{transform: translate(30px,0px); transition:transform 1.2s ease-out;opacity:0}
.list_bullets li.finalState{transform: translate(0px,0px);opacity:1}

.cfa_btn.initialState{ transition:opacity 1s ease-in-out;opacity:0}
.cfa_btn.finalState{opacity:1}

.video_container .btn_on_video {position:absolute; bottom:100px; left:calc(50% - 100px);height:45px; width:200px;}
.video_container .btn_on_video a{width:100%; height:100%;line-height:39px}
@media screen and (max-width: 768px) {
    .text_on_video p{font-size:60px;line-height:72px;}
    .plane_img{ left: -65px;width:50px}
    .video_container .btn_on_video {bottom:60px;}
}
@media screen and (max-width: 640px) {
    .line_separator.top_line{margin-bottom: 15px;}
    .line_separator.btm_line{margin-top: 25px}
    .text_on_video p{font-size:40px;line-height:58px;}
    .plane_img{ left: -45px;width:40px}
    .video_container .btn_on_video {bottom:-60px;}
}

@media screen and (max-width: 540px) {
    .text_on_video p{font-size:35px; line-height:45px}
    .line_separator.top_line{margin-bottom: 10px;}
    .line_separator.btm_line{margin-top: 15px}
    .plane_img{ left: -45px;width:40px}
}
@media screen and (max-width: 400px) {
    .plane_img{ left: -25px;width:30px}
}
/*end video*/

/*page_content*/
.detail_content{margin:0 auto 20px; max-width: 900px;padding:30px}
.section_anchor{padding-top:65px}
.txt_img{display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-around; }
.AppStorePage h2{font-size:50px; color: var(--color-primary); font-weight:normal; margin-bottom:25px}
.AppStorePage h3{font-size:30px; color:var(--color-secondary); font-weight:normal}
.txt_img p{font-size:25px}
.txt_section{width:55%; margin-bottom:40px}
.img_section{width:45%; text-align: start}
.app_img{width:100%; max-width: 600px; min-width:200px; border-radius: 40px; box-shadow:0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 2px 9px 1px rgba(0, 0, 0, 0.12), 0 6px 2px -2px rgba(0, 0, 0, 0.2);}
.app_txt{font-size:25px}

@media screen and (max-width: 768px) {
    .AppStorePage h2{font-size:40px}
    .AppStorePage h3{font-size: 25px}
    .txt_img{flex-direction: column}
    #bullet_points.txt_img{flex-direction:column-reverse}
    .txt_section, .img_section{width:100%}
    .img_section{text-align: center}
}

#at_your_palm{margin-bottom:70px}

#pathPlaneHolder{position:absolute;right:-225px;bottom:-106px}

.pathPlane{position: relative; width: 70px; height: 164px;}
.path{overflow: hidden; width: 70px; height: 0px;}
.path img{display: block; width: 100%;}
.plane{position: absolute; right: 100%; bottom: 0px; width: 68px; background-color: white; opacity: 0; transform: translate(40px, 0);}
.plane img{display: block; width: 100%;}

@keyframes pathReveal{
    from, to{animation-timing-function:linear}
    from{height: 0px;}
    to{height: 100%;}
}

@keyframes planeReveal{
    from, to{animation-timing-function:linear}
    from{opacity: 0; transform: translate(32px, 0);}
    to{opacity:1; transform: translate(0, 0);}
}

.path{animation-duration: 1s; animation-timing-function:ease; animation-fill-mode:forwards;}
.plane{animation-duration: 0.4s; animation-timing-function:ease; animation-fill-mode:forwards; animation-delay: 0.88s;}
.pathPlane.play .path{animation-name:pathReveal}
.pathPlane.play .plane{animation-name:planeReveal}

.list_bullets {margin-top:20px}
.list_bullets li{display: block;margin-bottom:25px;font-size:22px;}
/*.list_bullets li i{color:var(--color-secondary); margin-left:15px}*/
.list_bullets li>span{color:var(--color-primary); font-weight:800;}
.list_bullets li>div{padding-right:55px; font-weight:300}

.list_bullets .dots-circle{display:inline-block;position:relative;background-color:var(--color-secondary); color:white; width:30px; height:30px; line-height:30px; text-align:center;border-radius: 50%}
.list_bullets .bullet-label{padding-right:20px}

#bullet_points .img_section img{width:230px}

#tablet_div{text-align:center}
#tablet_div h3{margin: 0 auto 45px}
#tablet_div img{max-width:100%}

.txt_medium{font-size:35px;font-weight: 400}
.txt_large{font-size:45px;font-weight:400}
.emph_secondary{font-weight:800; color:var(--color-secondary)}
.emph_red{font-weight:600; color:var(--color-app-red); font-size:1.4em; line-height:0.7em}

@media screen and (max-width: 800px) {
    .txt_medium{font-size:25px;}
    .txt_large{font-size:35px;}
}

@media screen and (max-width: 680px) {
    .txt_medium{font-size:20px;}
    .txt_large{font-size:30px;}
}


#girls_div{display:flex;flex-wrap: wrap;background-color: var(--color-primary); color:white;}
#girls_div>div{width:50%;display: flex; }
#girls_div img{width:100%; height:100%; object-fit: cover}
#girls_div>div:last-child{text-align:center; justify-content: center; align-items: center}

@media screen and (max-width: 480px) {
    #girls_div{flex-direction: column-reverse}
    #girls_div>div{width:100%}
    #girls_div img{max-height:250px}
    #girls_div>div:last-child{padding:40px 0}
}

.swiper-wrapper{transition-timing-function: linear !important;}

#guides_slider {max-width:1400px;margin: 120px auto;overflow-x: hidden}
#guides_slider .swiper-slide{}
.slide_img_holder{position:relative;width:100%; overflow: hidden}
#guides_slider .slide_img_holder{height:250px}

#img_slider {width:100%; overflow:hidden; margin: 70px 0}
#img_slider .slide_img_holder{height:350px}

.slide_img_holder img{position: absolute; width:100%; height:100%; object-fit:cover;
top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); transition: transform 4s ease, filter 0.3s ease;}

.swiper-slide:hover img { transform: translate(-50%, -50%) scale(1.3); filter: brightness(0.7);}

#guides_slider a{text-decoration: none; text-align: center;color:var(--color-primary)}
#guides_slider a:visited{color:inherit}
#guides_slider h4{font-size:25px}

#chartDiv{display: flex;justify-content: space-around; gap:30px; margin:30px auto; padding: 60px 20px; background-color:var(--color-primary); color:white}
#chartDiv h3{color:white; text-align:center}
#chartDiv img{border-radius:30px; max-width:500px; margin:auto; width:90%}
#chartDiv>div{display: flex; width:45%; flex-direction: column; justify-content: space-between}
#chartDiv ol{padding:0 20px 0 0}

@media screen and (max-width: 680px) {
    #chartDiv{flex-direction: column; padding:0}
    #chartDiv>div:first-child{background-color: var(--color-secondary); padding:60px 0}
    #chartDiv>div:first-child .emph_secondary{color:var(--color-primary)}
    #chartDiv>div{width:100%}
    #chartDiv ol{padding:20px 40px 20px 20px}

    #img_slider .slide_img_holder{height:250px}
}

#reviewsDiv {position:relative;max-width:1400px;margin: auto;overflow-x: hidden}
.review{border-radius:20px; padding:20px;margin-bottom:20px}
.review_stars i{color:#ffbb4a}
.reviewer_name{color:var(--color-secondary); font-size:24px; margin-bottom:20px}
.review_wrapper{position:relative;margin-right:30px;}
.review_wrapper:before{position:absolute; top:-50px;right:-40px; content:"\201D"; font-size:90px}
.review_text {max-width: 300px; min-height:120px;max-height: 120px; overflow: hidden;  position: relative; transition: max-height 0.3s ease-in-out; }
.review_text.expanded {max-height: initial; }
.fade { position: absolute; bottom: 0; width: 100%; height: 20px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);}
.review_text.expanded .fade{display:none}
.read-more {display: block;text-align:left;cursor: pointer; text-decoration: underline; margin-top: 5px; }

#reviewsDiv .swiper-button-prev, #reviewsDiv .swiper-button-next {color: var(--color-app-red);pointer-events: auto !important}

ol li{position: relative;display: block;padding: .4em 2em .4em .4em; margin: 1em 0;
border-radius: 1em 0.3em 0.3em 1em;
background: #eeeeee;
color: var(--color-primary);
text-decoration: none;
transition: background .5s; counter-increment: li;}

ol li:before{content: counter(li);

position: absolute;
right: -1.3em;
top: 50%;
margin-top: -1.3em;
color:white;
background: var(--color-secondary);
height: 2em;
width: 2em;
line-height: 2em;
border: .3em solid #eeeeee;
text-align: center;
font-weight: bold;
border-radius: 6em;}

#faqDiv{padding-top:40px}

/* guide page */
.main_guide_img{width:100%; text-align: center;margin:20px auto 50px; }
@media screen and (max-width: 680px) {
    .detail_content h2{text-align:center}
}

/* start mock-device*/
.mock-device {
    display: inline-block;
    position: relative;
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.10), 0 2px 6px 1px rgba(0, 0, 0, 0.08), 0 4px 2px -2px rgba(0, 0, 0, 0.15);
}
.mock-device .screen {
    width: 100%;
    position: relative;
    height: 100%;
    z-index: 3;
    background: white;
    /*overflow: hidden;*/
    display: block;
    border-radius: 1px;
}

.mock-device.ipad {
    width:100%;
    padding: 9% 4.3% 11% 4.3%;
    background: #242324;
    border-radius: 44px;
}
.mock-device.ipad:before {
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    position: absolute;
    content: '';
    display: block;
    top: 4px;
    left: 4px;
    border-radius: 40px;
    background: #1e1e1e;
}
.mock-device.ipad .camera {
    background: #3c3d3d;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 44px;
    left: 50%;
    margin-left: -5px;
    border-radius: 100%}
.mock-device.ipad .top-bar, .mock-device.ipad .bottom-bar {
    display: none;
}
.mock-device.ipad .home {
    background: #242324;
    border-radius: 50%;
    width: 6%;
    aspect-ratio: 1;
    position: absolute;
    left: 50%;
    transform: translateY(-50%);
}
.mock-device.ipad .home:after {
    width: 30%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    position: absolute;
    display: block;
    content: '';
    top: 50%;
    left: 50%}
.mock-device.ipad.landscape { padding: 4.3% 9% 4.3% 11%; }
.mock-device.ipad.landscape .camera {
    left: 94%;
    top: 50%;
    margin-left: 0;
    margin-top: -5px;
}
.mock-device.ipad.landscape .home {
    top: 50%;
    left: 2.86%;
}
.mock-device.ipad.silver {
    background: #bcbcbc;
}
.mock-device.ipad.silver:before {
    background: #fcfcfc;
}
.mock-device.ipad.silver .home {
    background: #fcfcfc;
    -webkit-box-shadow: inset 0 0 0 1px #bcbcbc;
    box-shadow: inset 0 0 0 1px #bcbcbc;
}
.mock-device.ipad.silver .home:after {
    border: 1px solid rgba(0, 0, 0, 0.2);
}

@media screen and (max-width: 768px) {
    .mock-device.ipad:before { width: calc(100% - 6px); height: calc(100% - 6px);  top: 3px; left: 3px; }
    .mock-device.ipad .camera { width: 7px; height: 7px;  }
    .mock-device.ipad.landscape .camera { margin-top: -3.5px; }
}

.screen iframe, .screen img{width:100%; aspect-ratio: 4 / 3;border: 3px solid black;border-radius: 4px;}
.phone_mov{display:none}

@media screen and (max-width: 480px) {
    .mock-device.ipad{width:auto;height: 100%;min-height:580px;}
    .mock-device.ipad.landscape{padding:9% 4.3% 14% 4.3%;}
    .mock-device.ipad.landscape .camera{top: 4%;left: 50%;transform: translate(-50%, -50%);}
    .mock-device.ipad.landscape .home{left: 50%;top: 95.86%;transform: translate(-50%, -50%);}
    .screen iframe, .screen img{aspect-ratio: 9 / 16}
    .tablet_mov{display:none}
    .phone_mov{display:block}
}
/* end mock-device*/