/*
טמפלט ניווט במסך אחד של משוגנע ברנד

כאן קורה הקסם

for English contact MeshugeneBrand.

*/

*, *::after, *::before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; 
	/*transition: 0.2s ease-in-out;*/
}

:root { font-size: calc(0.8vw + 0.8vh + 0.3vmin); }

html { font-size: 62.5%; overflow-x: hidden; }
h1,h2,h3,h4,h5,h6,caption {font-size: 1.5em; margin: 10px auto}
iframe { border: none; overflow: hidden; }
img { display: block; max-width: 250px; height: auto; margin: auto; opacity: 0.75; }
table { width: 100%; max-width: 800px; margin: 5vh auto; }
table th,
table td {text-align: right; background-color: rgb(0, 75, 102); background-color: rgba(0, 75, 102, 0.2);}
table tr:nth-of-type(odd) td { background-color: white;}
table caption {margin: 25px auto; text-align: right; font-size: 2em; margin-bottom: 5vh; }
footer {text-align: center;}
footer h1 {font-size: 1em; letter-spacing: 2px;}
body.card *:focus { outline: 2px dotted rgb(0, 75, 102); font-weight: bold; }

body.card {  
  background: #252525;
  background-image: url('data:image/svg+xml,%3Csvg width="42" height="44" viewBox="0 0 42 44" xmlns="http://www.w3.org/2000/svg"%3E%3Cg id="Page-1" fill="none" fill-rule="evenodd"%3E%3Cg id="brick-wall" fill="%239C92AC" fill-opacity="0.5"%3E%3Cpath d="M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');  
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  margin: 0; 
  padding: 0; 
}
body, button {
	font-size: 1.5rem;
	font-family: "Segoe UI",Arial,sans-serif;
}

body.card button, body.card .linkBtn {
  cursor: pointer; font-weight: 800; 
	background: linear-gradient(-120deg, silver, black 90%, silver);	
	border-radius: 10px;
	border: 2px dashed transparent;
	color: white;
	padding: 10px 15px;
  transition: 0.2s ease-in-out;
  
  text-decoration: none;
}
body.card #view {  margin: 5vh; margin-bottom: 0; }
body.card #card.expanded #view { display: none; opacity: 0; }

body.card article li, 
body.card article p { font-size: 1em; line-height: 2;}

body.card #card {
  height: 100%;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body.card #card .details {
  background: rgb(0, 75, 102);
  background-image: url('data:image/svg+xml,%3Csvg width="42" height="44" viewBox="0 0 42 44" xmlns="http://www.w3.org/2000/svg"%3E%3Cg id="Page-1" fill="none" fill-rule="evenodd"%3E%3Cg id="brick-wall" fill="%239C92AC" fill-opacity="0.5"%3E%3Cpath d="M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');  
  box-shadow: 1em 1em 2em rgba(0, 0, 0, 0.5);
  color: white;  
  width: 21em;
  padding: 5vh 0;
  margin: auto;  
  border-radius: 10px;
}

body.card #card.preview svg {
  animation: fade 1s ease-in-out;
  animation-fill-mode: forwards;  
}

body.card #card.preview .details {
  animation: fade 1.5s ease-in-out;
  animation-fill-mode: forwards;
}

body.card #card .entry-header {
  display: block;
  font-size: 1.8em;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0;
  line-height: 1.5;
}
body.card #card .entry-header h2 {
  font-size: 1em;
  text-align: center;
  font-weight: bold;
  letter-spacing: 2px;
  animation: glow 5s ease-in-out infinite alternate;
}

body.card #card .title {
  font-size: 1.2em;
  font-style: italic;
	text-align: center;
  margin: 0;
}

body.card #card .desc {
  padding: 20px;  
  text-align: center;    
  margin: 15px 0;
}

body.card #card .actions .extra {
  display: flex;
  flex-flow: column wrap;  
  position: relative;
  min-height: 50vh;
  width: 90%;
  margin: 5vh auto;
}
body.card #card .actions .extra button {
  margin-top: 15px;
  width: 100%;  
}

body.card #picture {
  height: 10em;
  right: 45%;
  overflow: hidden;
  position: absolute;
  top: 60vh;
  transition: cubic-bezier(0.075, 0.82, 0.165, 1);
  width: 15em;
}

body.card #card.preview #picture svg {
  background: rgb(0, 153, 230);
  fill: #fff;
  height: 24em;
  left: -3em;
  position: absolute;
  top: -4em;
  transition: cubic-bezier(0.075, 0.82, 0.165, 1);
  width: 20em;
}

body.card #card,
body.card #card #picture svg,
body.card #card #picture {
  transition-duration: 0.5s;
}

body.card #card.preview #picture {
  cursor: pointer;
  transform-origin: 50% 50%;
  transform: scale(0.9);
  border-radius: 30px;
}

body.card #card.preview #picture:hover,
body.card #card.preview .details *:hover + #picture {
  transform: scale(1);
}

body.card #card.expanded #picture {
  animation: expand 1s ease-in-out;
  animation-fill-mode: forwards;
  height: 100%;
  right: 30%;
  top: 0;
  width: 70%;
  z-index: 1;
}

body.card #card.expanded #picture svg {
  background: rgb(0, 153, 230);
  height: 100%;
  left: 5%;
  position: relative;
  top: 0%;
  transform: scale(1);
  transform-origin: 50% 50%;
  width: 125%;
  margin: 0;
}
body.card #card.expanded.grid #picture {
  height: 10vh;
  width: auto;
  /*right: calc(50% - 50px);*/
  right: 0;
  top: 0;
  z-index: 9;
  background: transparent;
}
body.card #card.expanded.grid #picture svg {
  background: transparent;
  height: 100%;
  width: auto;  
  opacity: 1;
}

body.card #card.expanded {
  height: 100vh;
  position: absolute;
  transform: translate(0, 0);
  width: 100vw;
}

body.card #card.expanded .details {
  animation: slide 0.8s ease-out;
  animation-fill-mode: forwards;
  height: 100%;
  justify-content: center;
  right : 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 40%;
  z-index: 8;
}

body.card #card.expanded #close,
body.card #card.expanded .actions {  
  animation: slide 0.4s;
  animation-fill-mode: forwards;
  opacity: 0;  
}

body.card #card.expanded h2 {
	width: 100%;
  padding-top: 0.6em;
  margin: 0;
}

body.card #card.expanded .title {
  position: absolute;
  bottom: 0;
  left: -150%;
  background: rgb(0, 153, 230);
  padding: 5px;
  padding-left: 25px;
  font-weight: bold;
  font-size: smaller;
}

body.card #card.preview .desc,
body.card #card.preview .extra {
  display: none!important;
}

body.card #card.expanded .desc {
  display: block;
  position: absolute;
  left: 0;
  bottom: 2vh;
  padding: 5px 10px;
  /*box-shadow: 5px 5px 15px silver;*/
  /*border-radius: 0 10px 10px 0px;*/
  
  
}
body.card #card.expanded .desc button {
  animation: glow 1s ease-in-out infinite alternate;
}
body.card #card.preview #close { display: none; }
body.card #card.expanded #close {
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: 9;
}


body.card .preview #content {position: absolute; height: 40px; overflow: hidden;}
body.card .expanded.grid #content {
  position: relative;
  opacity: 1;
  width: 100%;
  height: 100%;
  z-index: 2;
  padding: 5vh;
  overflow-y: auto;
  background: rgb(0, 153, 230);
  background-image: url('data:image/svg+xml,%3Csvg width="42" height="44" viewBox="0 0 42 44" xmlns="http://www.w3.org/2000/svg"%3E%3Cg id="Page-1" fill="none" fill-rule="evenodd"%3E%3Cg id="brick-wall" fill="%239C92AC" fill-opacity="0.5"%3E%3Cpath d="M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');  
}
body.card .expanded #content { opacity: 0;}
body.card #content section {  
  font-size: 1.1em; line-height: 125%;
  background: rgba(255, 255, 255,0.75);  
  color: black;  
  padding: 2vh;
  opacity: 0;
  position: absolute; right: 0; top: -100vw; /* חה חה */
  height: 50px;
  overflow: hidden;
}
 #content section ol {list-style-type: hebrew; width: 100%;}
body.card #content section.show { opacity: 1; position: relative; top: 0; height: auto; overflow: auto;}
body.card .btnGroup {  
  display: flex;
  justify-content: space-evenly;  
}
body #card button { display: none;  }
body #card [type="submit"] { display: block;  }
body.card #card button { display: inline-block;  }
  
body.card .grid svg { 
  opacity: 0.5;
}
body.card .grid .details,
body.card .preview #content {display: none;}

body.card #contactCon {
  opacity: 0;
  z-index: -1;  
  height: 10px; overflow: hidden;
}
body.card #contactCon.show {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  opacity: 1;
  height: 50vh;
  width: 100%;
  color: black;
  text-align: center;
  background:  white;
  background-image: url('data:image/svg+xml,%3Csvg width="42" height="44" viewBox="0 0 42 44" xmlns="http://www.w3.org/2000/svg"%3E%3Cg id="Page-1" fill="none" fill-rule="evenodd"%3E%3Cg id="brick-wall" fill="%239C92AC" fill-opacity="0.5"%3E%3Cpath d="M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');  

}
body.card #contactCon.show .btnGroup { margin-top: 15px; }
body.card #contactCon.show p { display: none; width: 100%; flex: 1; font-size: 1.5em; text-align: center; font-weight: bold; padding: 5px; background-color: white;}
body.card #card.expanded #contactCon.show p {  display: block; }
body.card #card.expanded #contactCon.show {
  height: 100vh;
  overflow-y: auto;
}
body.card #card.expanded #contactCon.show .btnGroup {
  width: 95%;
  margin: auto;
  flex-flow: column;
  justify-content: flex-start;  
}
body.card #card.expanded #contactCon.show .btnGroup button { margin: 10px auto; width: 90%; }

body.card h1#promoTitle {
  color: white;
  text-align: center;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  opacity: 1;
  animation: fade 3.5s ease-in-out;
  animation-fill-mode: forwards;
}
body.card #promoTitle.hideIt {opacity: 0;}

body.card #prices aside {
  margin: 0 auto;
  padding: 10px;
  min-width: 250px;  
  max-width: 600px;
  width: 50%;
  max-height: 400px;
  font-size: 16px;
  color: white;
  font-weight: bold;
  background:  rgba(165,0,0,1);
  background-image: url('data:image/svg+xml,%3Csvg width="42" height="44" viewBox="0 0 42 44" xmlns="http://www.w3.org/2000/svg"%3E%3Cg id="Page-1" fill="none" fill-rule="evenodd"%3E%3Cg id="brick-wall" fill="%239C92AC" fill-opacity="0.5"%3E%3Cpath d="M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');  
  animation: fade 3.5s ease-in-out;
  animation-fill-mode: reverse;
}
body.card #prices aside h1 {
  animation: glow 3.5s ease-in-out;
  animation-fill-mode: forwards;
  font-size: larger;
  text-align: center;
}
body.card #prices {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}

@-webkit-keyframes fade {
  0% { opacity: 0; }
  100% { opacity: 1; }  
}
@keyframes fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-webkit-keyframes slide {
  0% { opacity: 0; transform: translateX(200%);  }
  10% { opacity: 1; }
  100% { opacity: 1; transform: translateX(0%); }  
}
@keyframes slide {
  0% { opacity: 0; transform: translateX(200%);  }
  10% { opacity: 1; }
  100% { opacity: 1; transform: translateX(0%); }
}
@-webkit-keyframes glow {
  from {
    color: white;    
    text-shadow: 0 0 10px rgb(0, 153, 230), 0 0 20px rgb(0, 153, 230), 0 0 30px rgb(0, 153, 230), 0 0 40px rgb(0, 153, 230), 0 0 50px rgb(0, 153, 230), 0 0 60px rgb(0, 153, 230), 0 0 70px rgb(0, 153, 230), 0 0 90px rgb(0, 153, 230);
  }
  to {
    color: yellow;    
    text-shadow: 0 0 20px rgb(0, 153, 230), 0 0 30px rgb(0, 153, 230), 0 0 40px rgb(0, 153, 230), 0 0 50px rgb(0, 153, 230), 0 0 60px rgb(0, 153, 230), 0 0 70px rgb(0, 153, 230), 0 0 80px rgb(0, 153, 230), 0 0 90px rgb(0, 153, 230);
  }
}

@keyframes glow {
  from {
    color: white;
    text-shadow: 0 0 10px rgb(0, 153, 230), 0 0 20px rgb(0, 153, 230), 0 0 30px rgb(0, 153, 230), 0 0 40px rgb(0, 153, 230), 0 0 50px rgb(0, 153, 230), 0 0 60px rgb(0, 153, 230), 0 0 70px rgb(0, 153, 230), 0 0 90px rgb(0, 153, 230);
  }
  to {
    color: yellow;
    text-shadow: 0 0 20px rgb(0, 153, 230), 0 0 30px rgb(0, 153, 230), 0 0 40px rgb(0, 153, 230), 0 0 50px rgb(0, 153, 230), 0 0 60px rgb(0, 153, 230), 0 0 70px rgb(0, 153, 230), 0 0 80px rgb(0, 153, 230), 0 0 90px rgb(0, 153, 230);
  }
}

/******************/

body.boring {padding: 0 1vh; position: relative;   
  background: rgba(0, 153, 230, 0.1);
  background-image: url('data:image/svg+xml,%3Csvg width="42" height="44" viewBox="0 0 42 44" xmlns="http://www.w3.org/2000/svg"%3E%3Cg id="Page-1" fill="none" fill-rule="evenodd"%3E%3Cg id="brick-wall" fill="%239C92AC" fill-opacity="0.5"%3E%3Cpath d="M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');    
}


body.boring main {padding: 10vh 0;  background-color: rgba(255, 255, 255,0.75);}
/*body.boring h1, body.boring h2, body.boring h3, body.boring h4, body.boring h5, body.boring h6 {margin-top: 10vh;}*/
body.boring main article {margin-top: 15vh; padding: 10px;}
body.boring main aside {
  margin: 5vh 0;
}

body.boring .details { text-align: center; margin: 0; }
body.boring #picture {
  position: absolute; top: 0; right: 0;
  animation: fade 1s ease-in-out;
  animation-fill-mode: forwards;    
}
body.boring footer {padding-bottom: 10px;}
body.boring footer p {margin-top: 0;}
body.boring #picture svg { width: 33vw; height: auto;}
body.boring footer,
body.boring h1#promoTitle {
  background-color: rgba(255, 255, 255,0.75);
  text-align: center; margin: 0; 
}

#mbCard {  
  top: 14em;
  left: 1vh;
  position: absolute;
  max-width: 25vw;
  z-index: 1;  
  border: none;
  padding: 10px;  
  background-color:  rgb(0, 75, 102);
  color: white;
  animation: fade 3s ease-in-out;  
  animation-fill-mode: forwards;      
  transition: none;
}
#mbCard.show {
  position: fixed; 
  top: 0; 
  left: 0;
  width: 100%;
  animation: none;
}

#clearEffects {
  position: absolute;
  left: 5px;
  top: 65px;
  z-index: 9;
  padding: 10px;
}