/* mask on a theme by MeshugeneBrand | find more: meshugenebrand.com */
* { border: 0; box-sizing: border-box; margin: 0; padding: 0; }
html {scroll-behavior: smooth; overflow-x: hidden;}
body { height: 100%; width: 100%; position: relative;  margin: 0; overflow-x: hidden; color: #222; background-color: white; }
body, button { font-family:"Segoe UI",Arial,sans-serif; font-size: calc(100% + 1vmin); direction: rtl;}
.fa {font-size: 2.5rem;}
h1,h2,h3,h4,h5,h6,legend,.lead { margin: 2vh 0; font-size: 1.25em; font-weight: bold; letter-spacing: 2px; }
a { cursor: pointer; color: black; text-decoration: none; }
main a {  color: cornflowerblue; }
img { max-width: 100%; height: auto; }
summary:hover, summary:focus, a:hover, a:focus, button:hover, button:focus { cursor: pointer; text-decoration: underline; outline: 1px solid red; }
.aEffects summary:hover, .aEffects summary:focus, .aEffects a:hover, .aEffects a:focus, .aEffects button:hover, .aEffects button:focus { background-color: transparent; outline: 1px solid transparent; }
header, main section { position: relative; margin: 0 auto; padding: 0 5px; padding-top: 60px; width: 100%; height: 100vh; display: flex;  flex-flow: column;  align-items: center; justify-content: center; text-align: center; overflow: hidden; }
header > div {width: 300px; margin: auto;}
header img { object-fit: contain; }
header { font-size: smaller; }
header > div:last-of-type { margin-top: 50px; }
main section { width: 100%; min-width: 300px; padding: 0rem 5vw; opacity: 1; margin: 0 auto; }
main section.show { opacity: 1; }
main section.hide { opacity: 0; }
.aEffects main section { transition: opacity 5s ease 0.25s; }
main section > *:first-child { padding-top: 10vh; }
main span.section { padding-top: 0; }
nav { width: 95%; max-width: 800px; min-height: 100vh; margin: auto; display: flex; flex-flow: column; align-items: center; justify-content: center; }
nav > div { position: relative; width: calc(260px * 0.866); height: 260px; }
nav figure { overflow: hidden; position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: whitesmoke; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
nav figure img { transform-origin: 50% 50%; object-fit: contain; }
.aEffects nav figure img { transition: all .5s ease-out; }
nav figure figcaption { position: absolute; bottom: calc(50% - 1em); right: 0; width: 100%; display: block; background-color: white; font-size: 1.2em; text-align: center; font-weight: bold; color: black; text-shadow: 2px 1px silver; opacity: 1; }
.aEffects nav figure figcaption { transition: all .5s ease-out; }
nav a:focus figure::after { border-left: 2px solid red!important }
.aEffects nav a:focus figure figcaption, .aEffects nav a:hover figure figcaption { opacity: 0.1; outline: 1px solid cornflowerblue }
nav a figure::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.aEffects nav a figure::after { background: rgba(0, 0, 0, 0.25); transition: all .5s ease-out; }
.aEffects nav a:focus figure img, .aEffects nav a:hover figure img { transform: scale(1.2); }
.aEffects nav a:focus figure::after, .aEffects nav a:hover figure::after { background: rgba(0, 0, 0, 0); }
nav a figure.box1::after { background: rgba(0, 0, 0, 0); }
nav a figure.box2 { transform: translate(calc(-50% - (10px / 2)), calc(-75% - (10px) / 2 * 1.732)); }
nav a figure.box3 { transform: translate(calc(50% + (10px / 2)), calc(-75% - (10px) / 2 * 1.732)); }
nav a figure.box4 { transform: translate(calc(-100% - 10px), 0); }
nav a figure.box5 { transform: translate(calc(100% + 10px), 0); }
nav a figure.box6 { transform: translate(calc(-50% - (10px / 2)), calc(75% + (10px) / 2 * 1.732)); }
nav a figure.box7 { transform: translate(calc(50% + (10px / 2)), calc(75% + (10px) / 2 * 1.732)); }
.smartContent { margin-top: 10vh; }
.smartContent > * { line-height: 1.5em; padding: 10px 5px; text-align: right; }
.smartContent img { width: auto; height: 200px; }
.smartContent > div > img {float: left}
.smartContent > a { margin-top: 5vh; display: block; text-align: center; }
footer p { padding-bottom: 10px; font-size: 10px; letter-spacing: 2px; font-weight: bold; text-align: left; padding-left: 5px; padding-top: 5px; }
footer a {text-decoration: none;}
.slider { display: block; width: 90%; margin: auto; }
.slider [data-class="sliderDataCon"] { height: 50vh; min-height: 300px; display: flex; flex-flow: column; text-align: center; padding: 20px; margin: 5vh 0; /*overflow-y: auto;*/ }
.slider [data-class="sliderDataCon"] img { margin: 5vh auto!important; }
.slider [data-class="sliderDataCon"] p { margin-bottom: 5vh; }
.slider .slick-arrow { position: absolute; top: 5%; right: 10%; z-index: 2; }
.slider .slick-arrow:last-of-type { right: 90%; }
#aProgressBarCon { position: fixed; bottom: 0; left: 0; width: 100%; height: 8px; background: transparent; opacity: 0.4; }
#aProgressBarCon > div { height: 8px; width: 0%; background: cornflowerblue; background: -webkit-linear-gradient(left,cornflowerblue,silver,red,silver,yellow,silver); background: -o-linear-gradient(left,cornflowerblue,silver,red,silver,yellow,silver); background: -moz-linear-gradient(left,cornflowerblue,silver,red,silver,yellow,silver); background: linear-gradient(to right, cornflowerblue,silver,red,silver,yellow,silver); }
#aFixedMenuBtn { position: fixed; top: 15px; right: 10px; width: 50px; padding-bottom: 20px; z-index: 5; }
#aFixedMenuBtn svg { fill: #ffffff; stroke: #000000; stroke-width: 10; stroke-linecap: round; width: 1.5em; height: 1.25em; margin: auto; display: block; }
#aFixedMenuBtn:hover svg, #aFixedMenuBtn:focus svg { stroke: red; }
#aFixedBackGround { height: 100vh; width: 100vw; background: #ffffff url("img/smartdatacubeBG.png") no-repeat fixed center center; background-size: 70vw; position: fixed; top: 0; right: 0; z-index: -2; }
#aFixedTopLine { position: fixed; top: 0; right: 0; height: 50px; width: 100%; background-color: white; color: inherit; opacity: 0; z-index: 2; }
.aEffects #aFixedTopLine { transition: all 0.5s ease-in-out; }
#aFixedTopLine.show { opacity: 1; }
#aFixedTopLine .pageSubject { display: flex; height: 50px; }
#aFixedTopLine .pageSubject a { padding: 10px;}
#aFixedTopLine .pageSubject figure { padding-left: 20px; }
#aFixedTopLine .pageSubject img { max-height: 50px; opacity: 0.6; } 
#aFixedTopLine .pageSubject figcaption { display: inline-block; height: 50px; min-width: 150px; max-width: 50vw; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; font-size: small; font-weight: bold; }
.aEffects #aMarquee {padding: 0; list-style-type: none; overflow: hidden; margin-bottom: 5vh; position: relative; height: 40px;}
.aEffects #aMarquee > * {opacity: 0; transform: scale(0); transition: all 0.5s ease-in-out; width: 100%; text-align: center; margin: 0; font-weight: normal; letter-spacing: 1px;}
.aEffects #aMarquee > [marqueeText="true"] {opacity: 1; transform: scale(1.2); font-weight: bold; letter-spacing: 2px; /* נשאר במקום */position: absolute; top: 0; right: 0;}
#aTop { position: fixed; top:  200vh; left: 150%; z-index: 5; width: 50px; background-color: transparent; }
.aEffects #aTop { transition: all 0.35s ease-in-out; }
#aTop .fa {padding: 0;}
#aTop.show { top: 10px; left: 10px; padding-bottom: 20px;}
#aTopTrigger {position: absolute; bottom: -50%; right: 0;}
#aTopTrigger.contentView { position: relative; opacity: 0; }
.aScrollArrow { display: block; width: 100px; height: 100px; margin: auto; }
header .aScrollArrow { transform: translateY(0%); }
.aScrollArrow span { display: block; width: 10px; height: 10px; border-bottom: 5px solid cornflowerblue; border-right: 5px solid cornflowerblue; transform: rotate(45deg); margin: 10px auto; }
.aEffects .aScrollArrow span { animation: aScrollArrow 2s infinite; }
.aScrollArrow span:nth-child(2) { animation-delay: -0.2s; }
.aScrollArrow span:nth-child(3) { animation-delay: -0.4s; }
@keyframes aScrollArrow { 0% { opacity: 0; transform: rotate(45deg) translate(-20px,-20px); } 50% { opacity: 1; } 100%{ opacity: 0; transform: rotate(45deg) translate(20px,20px); } }
main article section { align-items: flex-start; text-align: right; height: auto; min-height: 100vh; overflow: initial; }
section img { opacity: 1; transition: 1.5s ease-in-out; transform: rotateZ(0deg); display: block; margin: 0 auto;}
.aEffects section img { opacity: 0; transform: rotateZ(0deg); }
.aEffects section.show img { opacity: 1; transform: rotateZ(360deg); margin: 5vh auto; }
#logoBack2Main {float: left;}
article dt { text-decoration: underline; font-weight: bold; padding-bottom: 2vh; }
article dt:after {content: ':';}
article dd {margin-bottom: 5vh;}
article ol, article ul { list-style-type: none }
article li, article p { line-height: 2.5rem; padding: 0 5vw; }
article section > div figure > img, article section > div > img { max-width: 200px; float: left; padding-left: 5vw; }
article h1.header {font-size: 2em; text-align: center; min-width: 300px; width: 85%; margin: 0 auto;}
article li.header, article a.header {margin-top: 5vh; display: inline-block;}
article h2, article h3, article h4, article h5, article h6 {padding-top: 10vh }
article a.andf { text-align: center; display: block; margin: auto; }
#formCon {overflow: auto; height: auto;}
form {max-width: 800px; min-height: 100vh; overflow: auto; margin: auto; display: block;}
form fieldset div {display: flex; flex-flow: row wrap; align-items: baseline ; margin: 0; text-align: right;}
form fieldset div > * {width: 50%; min-width: 300px; align-self: center; margin: 5px auto;}
form fieldset div > p {width: 100%; flex:1; font-size: small;}
form fieldset textarea, form fieldset input {padding: 10px; font-size: 1em; font-family: inherit; border: 1px solid black;}
form button {width: 40%; height: 40px; margin: 50px 2.5%; border: 1px solid transparent; background-color: transparent;}
#aPartner { display: flex; flex-flow: row wrap; align-items: baseline; background-color: white; text-align: center; }
#aPartner > *  { display: block; width: 300px; height: 220px; padding: 10px 0; }
#aAccessibilityOptions { position: fixed; top: 0; left: calc(-100vw - 250px); width: 250px; font-size: 14px; z-index: -1; height: 100vh; overflow: hidden; background-color: rgba(0,0,0,0.1); }
#aAccessibilityOptions.show { left: 0px; z-index: 9; width: 100%; background-color: transparent; }
#aAccessibilityOptions ul { min-height: 99vh; overflow-y: auto; background-color: #252525; color: white; border-right: 1px solid silver; box-shadow: 2px 2px 5px silver; list-style-type: none; padding: 0 5px; width: 250px; float: left; }
#aAccessibilityOptions ul li { width: calc(50% - 2px); height: 60px; float: right; border: 1px solid #252525; }
#aAccessibilityOptions ul li:last-of-type { width: calc(100% - 4px); }
#aAccessibilityOptions ul li.header { float: none; width: 100%; height: auto; margin-bottom: 5vh; font-size: 1.5em; border: none;}
#aAccessibilityOptions ul li.header i {padding-left: 10px;}
#aAccessibilityOptions ul li a {padding-top: 20px; text-align: center;}
#aAccessibilityOptions ul li a, #aAccessibilityOptions ul li button { position: relative; display: block; height: 100%; width: 100%; font-size: 1em; font-weight: bold; background-color: white!important; color: #252525!important; font-family:"Segoe UI",Arial,sans-serif!important; }
#aAccessibilityOptions ul li a i, #aAccessibilityOptions ul li button i { position: absolute; top: 2px; left: 2px; font-size: 1.2rem; color: inherit; text-shadow: 2px 2px 5px silver; }
#aAccessibilityOptions ul li a:hover, #aAccessibilityOptions ul li button:hover { background-color: white; color: black; border: 1px solid aqua; outline: 1px solid cornflowerblue; text-decoration: underline;}
#aAccessibilityOptions ul li a:focus, #aAccessibilityOptions ul li button:focus {border: 1px solid yellow; outline: 1px solid yellow; color: white; opacity: 1;background-color: transparent;}
#aAccessibilityOptions ul li a.active, #aAccessibilityOptions ul li button.active {opacity: 0.5; color: white; background-color: transparent;}
#accessMenu { position: fixed; bottom: 30px; left: 5px; z-index: 9; font-weight: bold; }
#accessMenu.open {bottom: 95%;}
#accessMenu:focus {outline: 1px solid red}
#accessMenu .fa-check {color: white!important; background-color: black!important;}
#aAccessibilityOptions > p { position: absolute; bottom: 10px; left: 5px; }
#aAccessibilityOptions > p a { color:white!important; } 
[role="dialog"] { display: block; position: fixed; top: 5%; right: 5%; background-color: #f7f7f7; color: #222; width: 90%; height: 90%; overflow-y: auto; border: 2px solid #555; padding: 10px; }
[role="dialog"] ol { max-width: 600px; width: 85%; margin: 5vh auto; }
body.hideImages .aScrollArrow span {animation: none!important; transform: none!important; font-size: small; color: white; }
body.hideImages #aFixedBackGround, body.hideImages img {opacity: 0!important; position: absolute; }
.altContainer { background: yellow; color: black; max-width: 300px; margin: auto; font-size: small; display: none; }
nav figure .altContainer { margin-top: 55%; }
body.hideImages .altContainer {display: block; z-index: 9; position: relative; }
body.darkMode, body.darkMode > *, body.darkMode section, body.darkMode section input, body.darkMode section textarea, body.darkMode nav figure, body.darkMode #aFixedTopLine { background-color: black!important; color: white; text-shadow: 1px 1px black; margin: 0 auto!important; }
body.darkMode button { background-color: transparent; color: white!important; }
body.darkMode a {text-shadow: none;}
body.darkMode #aAccessibilityOptions.show {background-color: transparent!important;}
body.darkMode .fa {color: white;}
body.darkMode #aFixedMenuBtn svg { fill: #000000; stroke: #ffffff; }
body.darkMode form button, body.darkMode form fieldset textarea, body.darkMode form fieldset input { border: 1px solid cornflowerblue; }
body.markLinks nav figcaption, body.markLinks a { text-decoration: underline!important; font-weight: bold; outline: 2px solid cornflowerblue!important; opacity: 1!important; }
body.markLinks #aFixedMenuBtn svg, body.markLinks button { border: 1px solid cornflowerblue!important; outline: 2px solid cornflowerblue!important; }
body.kbdLinks .aScrollArrow:focus *, body.markLinks .aScrollArrow:focus *, body.kbdLinks a:focus, body.markLinks a:focus, body.kbdLinks button:focus, body.markLinks button:focus { outline: 2px solid red!important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.sr-only-focusable:active, .sr-only-focusable:focus { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
.noDom { display: none!important; }
.aEffects #aAccessibilityOptions ul li button, .aEffects #aAccessibilityOptions { transition: all .5s ease-out; }
@media screen and (max-width: 600px) {
  #aFixedBackGround {background-size: cover; opacity: 0.5;}
  h1,h2,h3,h4,h5,h6,legend,.lead { font-size: 1.3rem}   
  header, main section { height: auto; min-height: 100vh; }  
  .smartContent img {max-width: 150px; height: auto; }  
  nav { transform: scale(0.5); height: 100vh; }
  nav a figure::after { background: rgba(0, 0, 0, 0); }
  nav a:hover figure img { transform: scale(1.2); }
  #aMarquee { transform: scale(0.7); }
  #aMarquee > [marqueeText="true"] { letter-spacing: initial}
  article section > div figure > img, article section > div > img { float: none; display: block; margin: auto; padding: 0!important; max-width: 150px; }
  #aFixedTopLine , #aFixedTopLine .pageSubject { height: 80px; }
  #welcomePage #aFixedTopLine { background-color: rgba(255,255,255,0.2); }  
  #accessMenu.open { top: 10px; }
  #aAccessibilityOptions ul li { width: calc(50% - 2px); height: 60px; float: right; border: 1px solid #252525; }
  #aAccessibilityOptions ul li:nth-of-type(2) { display: none; }  
  #aAccessibilityOptions ul li:last-of-type { width: calc(50% - 2px); }  
  #aAccessibilityOptions > p {top: 0; font-size: 10px; font-weight: bold; opacity: 0.8; z-index: -1;}
}