/*## Hero Badic #################################*/

* { box-sizing: border-box;}
.hero_section * { font-weight:normal; text-align: center;color:#ffffff; }
#herald-breadcrumbs { display: none; }

body {
  font-family: 'Assistant', sans-serif;
  align-items: center; justify-content: center;
  max-width: 100%; height: 100%;  
  font-optical-sizing: auto;font-weight: normal;font-style: normal;
}
/*## Hero Stage #################################*/
.hero_section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width:100%;
  height:450px;
  max-width: 100%;
  max-height: 100%;    
  background: #495F6C url("https://mishlav.co.il/wp-content/uploads/img/hero_bg.png") repeat-x;
  overflow: hidden;
  position:relative;  
}

.hero_stage {
  align-items: center;
  justify-content: center;
  width:1200px;
  height:100%;
  max-width: 100%;
  max-height: 100%;    
  background:none;  
}
/*## Hero Right #################################*/
.hero_stage_text {
  direction:rtl;
  display: table;
  vertical-align:middle;	
  float:right;
  align-items: center;
  justify-content: center;
  width:50%;
  height:100%;
  max-width: 100%;
  max-height: 100%;    
  background:none;
  font-weight: bold;
}
.hero_text_wrap {
  display: table-cell;	
  vertical-align:middle;
}
.hero_text_headline {
  justify-content: center;
  display:inline-block;
  font-size:55px;
  line-height:55px;
}
.hero_text_rotator{
  position:relative;
  width:auto;
  max-width:100%;
  height:75px;
  margin:10px 0px;
  overflow:hidden;
}
.hero_text_word{
  position:absolute;
  top:0;
  left:50%;
  transform:translate(-50%, 30px);
  background:#26B050;
  opacity:0;
  white-space:nowrap;
  font-size:65px;
  line-height:65px;
  padding:0px 10px 10px 10px;
  font-weight:bold;
  border-radius:4px;
  transition:transform 350ms ease, opacity 350ms ease;
  pointer-events:none;
}
.hero_text_word.current{ opacity:1; transform:translate(-50%, 0); }
.hero_text_word.exit{ opacity:0; transform:translate(-50%, -30px); }
.btn-shiny{  display:inline-block;  position:relative;  background:none;  border:1px solid #CAD5DB;  border-radius:30px;  padding:5px 10px;  bottom:-50px; margin-bottom:30px; overflow:hidden;  cursor:pointer;  transition: transform 0.1s ease, box-shadow 0.1s ease; }
.btn-shiny::before{  content:""; position:absolute; top:-50%; left:-120%; width:60%; height:200%; transform:rotate(18deg); pointer-events:none;  background:linear-gradient(  120deg,  rgba(255,255,255,0) 0%,  rgba(255,255,255,0.10) 35%,  rgba(255,255,255,0.45) 50%,  rgba(255,255,255,0.10) 65%,  rgba(255,255,255,0) 100%  ); }
.btn-shiny:hover{ transform:translateY(-1px); box-shadow:0 2px 6px rgba(0,0,0,0.3); }
.btn-shiny:hover::before{ animation: shinySwipe 0.5s ease; }
@keyframes shinySwipe{ from{ left:-120%; } to{ left:160%; } }
/*## Hero Left #################################*/
.hero_stage_image {
  display: table;
  vertical-align:middle;	
  float:left;
  align-items: center;
  justify-content: center;
  width:50%;
  height:100%;
  max-width: 100%;
  max-height: 100%;    
  background:none;  
}
.hero_image_wrap {
  position: relative;
  width: 100%;
  max-width:100%;
  height: 100%;
  margin: 0 auto;
  bottom:0;
}
.hero_image_flow {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 400px;
  height: 400px;
  animation: heliumFloat 4.8s ease-in-out infinite;
}
.hero_image_circle { opacity:0.1; filter:blur(20px); z-index: 1; max-width:100%; display:block; background:#26B050; width:380px; height:500px; border-radius:100%; -webkit-animation:grow 1s 1; }
.hero_image_pic {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.hero_image_pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 1s ease;
  display: block;
}
.hero_image_pic img.active { opacity: 1; z-index: 2; }
@-webkit-keyframes grow {
 0% { -webkit-transform: scale( 0 );-moz-transform: scale( 0 );-o-transform: scale( 0 );-ms-transform: scale( 0 );transform: scale( 0 ); }
 50% { -webkit-transform: scale( 1 );-moz-transform: scale( 1 );-o-transform: scale( 1 );-ms-transform: scale( 1 );transform: scale( 1.2 ); }
 100% { -webkit-transform: scale( 0.8 );-moz-transform: scale( 0.8 );-o-transform: scale( 0.8 );-ms-transform: scale( 0.8 );transform: scale( 1 ); }
}
@keyframes heliumFloat1 {
    0%   { transform: translate(-50%, 0px) rotate(0deg); }
    20%  { transform: translate(calc(-50% + 8px), -6px) rotate(1deg); }
    40%  { transform: translate(calc(-50% + 14px), -2px) rotate(0.5deg); }
    60%  { transform: translate(calc(-50% - 6px), -10px) rotate(-1deg); }
    80%  { transform: translate(calc(-50% - 12px), -4px) rotate(-0.5deg); }
    100% { transform: translate(-50%, 0px) rotate(0deg); }
}
/*## STRIP #################################*/
.bottom-band{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:20px;
  background:rgba(255,255,255,.45);
  z-index:3;
}
/*## Responsive #################################*/
@media screen and (max-width: 768px) {
  .hero_section {
	height:250px !important;
	padding-top:70px !important;
  }
  #content {
	margin-top:0px !important;
  }
  .mobileoff, .hero_stage_image {
    display: none !important;
  }
  .hero_stage_text {
    width:100% !important;
  }
  .hero_text_headline {
	font-size:40px !important;line-height:40px !important;
  }
  .hero_text_word {
	height:50px !important;
	font-size: 45px !important;
	line-height:45px !important;
	margin:0px 0px !important;
    padding:0px 10px 10px 10px;
  }
  .hero_text_rotator{
    height:70px !important;
  }
  .bottom-band{
    height:10px !important;
  }
}
/*## END #################################*/