@import url('https://fonts.googleapis.com/css2?family=Secular+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alef&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alef:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@100;200;300;400;500;600;700&display=swap');
html{
  padding: 0;
  margin:0;
  overflow-x: hidden;
 }
 *{
  transition: background .4s ease-in-out
 }
.body-main{
  background-image: url('bgrnd.jpg');
  background-repeat:repeat;
  font-family: 'Heebo', sans-serif;
  /* box-sizing: border-box; */
  margin: 0;
}
.body-other{
  background-image: url('bgrnd.jpg');
  background-repeat: repeat;
  font-family: 'Heebo', sans-serif;
  font-weight: 400;
  box-sizing: border-box;
  margin: 0;
  overflow-x: hidden;
}
.italic{
  font-style: italic;
}

#sara{
  height: 130px;
  width: 212px;
  pointer-events: all;
  display: block;
  border-radius: 20%;
  filter: contrast(200%);
  margin: auto;
}
#ils{
  pointer-events: all;
  margin: auto;
  height: 63px;
  width: 63px;
  filter: contrast(130%);
}
.head-title{
  position: relative;
  width: 400px;
  background-color: black;
  height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  padding-top: 0px;
  margin: 45px auto;
  border-radius: 100%;
  border: 1mm solid #EFC959;
  justify-content: space-evenly;
  transition: border .4s ease-in-out;
}
.head-title:hover{
  border: 1mm solid black;
}
#slider{
    display: block;
    width: 100%;
    height: 40vh;
    position: absolute;
    bottom: 0;
    float: none;
    background: black;
    border-top: #EFC959 1mm solid;
    overflow-x: hidden;
    overflow-y: hidden;
}
.slides{
  width: 60%;
  display: flex;
  flex-direction: row;
  float: none;
  justify-content:center;
  height: 100%;
  position: relative;
  margin:  auto;
  align-content: center;
  align-items: center;
  overflow: hidden;
}
.slide{
  opacity: 0;
  display: none;
  position: absolute;
  padding: 0;
  text-align: right;
  line-height: 160%;
  margin: 0 auto;
  background: black;
  color: #F4DB90;
  font-size: 300%;
  font-weight: 400;
  justify-content: center;
  align-self:center;
}
.active{
  opacity: 1;
  display: block;
  -webkit-animation: slideIt 1s ease-in-out; /* Safari 4+ */
  -moz-animation:    slideIt 1s ease-in-out; /* Fx 5+ */
  -o-animation:      slideIt 1s ease-in-out; /* Opera 12+ */
  animation:         slideIt 1s ease-in-out;

}
@-webkit-keyframes slideIt {
 0%   { opacity: 0; display: none;}
 50%   { opacity: .5;
         display: block;
         left: 25%}
 100% { opacity: 1;
 left: inherit;
  display: block;}
}
 @-moz-keyframes slideIt {
  0%   { opacity: 0; display: none;}
  50%   { opacity: .5;
         left: 25%; display: block;}
  100% { opacity: 1;
  left: inherit;
   display: block;}
 }
 @-o-keyframes slideIt {
  0%   { opacity: 0; display: none;}
  50%   { opacity: .5;
         left: 25%; display: block;}
  100% { opacity: 1;
  left: inherit;
   display: block;}
 }
 @keyframes slideIt {
  0%   { opacity: 0; display: none}
  /* 20%   {display: block; opacity: 0; font-size: 0;}
  80%   {display: block; opacity: .1; font-size: 10px;} */
  100% { opacity: 1;}
 }
#readingBar{
 box-sizing: border-box;
 display: flex;
 flex-direction: column;
 align-items:flex-start;
 position: fixed;
 top: 4vh;
 right: 0;
 z-index: 1000;
 /* background: linear-gradient( #F4DB90 , #7D5E20,  #F4DB90); */

}
#barCont{display: none}

.readHead {
    position: relative;
    right: 0;
    height: 40px;
    width: 126px;
    color: #6b5813;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: space-around;
    font-size: 15px;
    font-weight: 400;
    filter: drop-shadow(0.1mm 0.1mm 0.5mm black);
    background: #F4DB90;
    border-radius: 10px 0 0 0;
}
.readHead:hover{
  filter: brightness(120%);
  animation-name: brighter;
  animation-duration: 1s;
}

.readHeadRead{
    border-radius:  1em 0 0 1em;
}
.read{
  position: relative;
  right: 0;
  height: 60px;
  width: 150px;
  display: flex;
  padding: 0.4em;
  align-items: center;
  align-content:center;
  justify-content:space-between;
  font-size: 1.4em;
  font-weight: 600;
  line-height: 0.6em;
  filter: brightness(100%) drop-shadow(1px 1px 1px black);
  background: linear-gradient( #F4DB90 1%, #7D5E20 82%);
  border-radius:  1em 0  0 1em;
  color: #F4DB90;
  transition: filter .6s ease-in-out;
}
#Bcrumbs{
  font-size: 1.1rem!important;
  text-align: right;
  color: #B38625;
  opacity:.7;
  transition: .5s ease;
 background: none;
}
#Bcrumbs a:hover{
  color: #7995A7;
}
#reading{
  position: relative;
  margin-top: 7vh;
  border-right: 0.24mm solid #9F863B;
  border-left: 0.2mm solid #9F863B;
  color: #50370d;
  background: #DEE2E2;
  overflow: auto !important;
  min-width: 100%;
  min-height: fill-content;
 }
 .questlist{
   margin: 0 auto;
   max-width: 95%;
   position: relative;
   /* border-right: 0.4mm solid #EFD58B;
   border-left: 0.4mm solid #EFD58B; */
   box-shadow: 0px 0px 4px 0px gray;
   border-radius: 20px;
   
 }
 #activequest{
   background: #EFC979!important;
   color: #9B6B0F!important;
 }
 

 #reading .quest{
    margin: .5em auto;
    border-radius: 20px;
    padding: 1em;
    padding-left: 3em;
    text-align: center;
    background-color: black;
    pointer-events: all;
    cursor: pointer;
    color: #EFC979;
    transition: background-color .8s ease-in-out;
 }
 
 #reading .quest:hover{
   background: #614302;
   color: hsl(39, 70%, 46%);}
   /* animation-name: quest;
   animation-duration: 1s;
 }
 @keyframes quest {
  from {background-color: black;}
  to {background-color: #EFC979;}
} */
 .answ{
   display: none;
   padding-bottom: 1.5em;
   max-height: 0;
 }
 #helpme{
   display: none;
  text-align: center;
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(transparent, 20%, #6D5B2F 42%, transparent 72%);
    height: 150px; 
    width: 150px;
    border: #6D5B2F solid 0.2px;
    border-radius: 50%;
    opacity: 1;
    box-shadow: 0px 0px 16px 0px #6d5b2f;
    overflow: -moz-hidden-unscrollable!important;
 }
 #helpline{
  width: 200px;
  height: auto;
  padding: 0.3rem;
  cursor: pointer;
  margin: 1em auto;
  border: 1px solid #967126;
  border-radius: 30px;
  background: white;
  text-align: center;
  font-size: 1em;
 }
 #helpline:hover{
   font-weight: 700;
   transition: font-weight .4s ease;
   box-shadow: 0px 0px 3px 0px black;
 }
 
 
 .iconsfloat{
  background: #332305;
    display: inline-block;
    margin: 0.1em;
    padding: 0.2em;
    border-radius: 40px;
    font-size: 1.4em;
    width: 40px;
    height: 40px;
    color: #F1D88D;
    border: solid 1px;
    box-sizing: border-box;
    position: absolute;
    /* absolute because we're placing each one differently */
 }
 .iconsfloat.cross{
   bottom: 8%;
   right: 35%;
   background: #F1D88D;
   border: solid #332305;
   color: #332305;
   line-height: 1.3em;
 }
 .iconsfloat.mail{
  bottom: 35%;
  left: 8%;
 }
 .iconsfloat.phone{
  top: 8%;
  right: 35%
 }
 .iconsfloat.phone{
  top: 8%;
  right: 35%
 }
 .iconsfloat.whatsapp{
  top: 35%;
  right: 8%
 }
 i img {
  width: fit-content;
  height: fit-content;
  margin: -0.55em;
}
.backtoread{
  padding: 1em;
  background: #F1D88D;
  border-radius: 0 0 10px 10px;
  font-size: 1.3em;
  width: 100%;
  color: #50370D;
 
}
.backtoread:hover{
  box-shadow: 0px 0px 5px 0pc black;
  background: #e0c485;
  transition: background .3s ease-in-out
}
 .arrowbox {
     transform: none;
     transition: .3s ease-in-out;
     position: absolute;
     top: 0;
     left: 0;
     display: flex;
     justify-content: space-around;
     padding: 1em;
     margin: 0;
     overflow: hidden;
     flex-wrap: wrap;
     flex-direction: row;
     align-content: center;
     align-items: center;
     pointer-events: all;
     cursor: pointer;
     float: left;
 }
.arrowboxopen{
    transform: rotate(180deg);
    transition: .3s ease-in-out;
}
.arrow {
    opacity: 1;
    filter:drop-shadow(1px 1px 3px white);
    position: relative;
    top: 0;
    left: 0px;
    height: 1em;
    width: 1em;
    border-bottom: 3px solid #BB9F5A;
    border-left: 3px solid #BB9F5A;
    border-radius: 4px;
    transform: rotate(-45deg);
}
.bottomarr{
  transform: none;
  position: relative;
  display: block;
  justify-content: space-around;
  padding: 1em;
  margin: 2em auto 0;
  overflow: hidden;
  width: fit-content;
  flex-direction: row;
  align-content: center;
  align-items: center;
  pointer-events: all;
  cursor: pointer;
  transform: rotate(-180deg);
}
.bottomarr:hover{
  filter: drop-shadow(1px 1px 6px black);
}
 #reading p{
   padding:1em;
   font-size: 1.4rem;
   font-weight: 400;
   line-height: 1.8em;
   margin: 0;
 }
 #reading>img{
   width: 100%;
   height: auto;
   margin: 0 auto;
 }
 #reading h2{
   font-size: 1.8em;
   font-weight:400;
    line-height: 1.6em;
    margin: 1em auto;
    text-align: center;
    max-width: 90%;
 }
 .readbox{
   max-width: 90%;
   border-right: 0.1mm #F1C27F solid;
   border-left: 0.1mm #F1C27F solid;
   margin: 5mm auto;
   background: #F7F7F7;
   text-align: justify;
   padding: 1em;
   line-height: 1.8em;
 }
 td{
   border-bottom: solid 0.2mm #EDC758;
   border-left: solid 0.2mm #EDC758;
   padding: 1em;
 }
 th{
   border-bottom: solid 0.2mm #EDC758;
   border-left: solid 0.2mm #EDC758;
   text-align: center;
 }
 td:nth-child(even) {
  background-color: #dddddd;
}
table {
  border-spacing: 0;
}
 .light{
   opacity: .34;
 }
 .center{
   text-align: center;
 }
 .hfl{
   display: list-item;
   text-align: justify;                                                
   list-style-type:circle;
   list-style-position: inside;
   margin: 0 auto;
 }
 #reading h3{
   margin: 0 1em;
   line-height: 1.4em;
   text-align: center;
   font-size: 2rem;
 }
 .dgreen{
   color: #2ABD6D;

 }
 .lgreen{
   color: #92D050;
 }
 .readbox h4{
   text-align: center;
 }
 .underline{
   text-decoration: underline;
 }
 #reading .strong{
   font-weight: 800;
 }
.magishim,.mekablim{
  line-height: 2.4rem;
  display: flex;
  /* justify-content: space-around; */
  flex-direction: row;
  /* justify-content:flex-start; */
  color: #3F2C0B;
  margin-bottom: 5vh;
}
.magish,.mekabel{
  width: auto;
  display: flex;
  flex-direction: column;
  align-items:flex-start;
  justify-content:space-between;
  padding: 2vh;
  margin: 1vh;
  text-align: center;
  font-size: 1.7vw;
  font-weight: 400;
  border-right: 0.1mm solid #9F863B;
  color: #3F2C0B;
  line-height: 1.8em;
}
.aread{
  text-decoration: underline;
  text-decoration-color: #9F863B;
}
li{


  text-align: right;
  font-size: 1em;
}

.uline{
  background: #F4DB90;
  font-weight: 400;
  font-size: 1.3em;
  margin: 2vh auto;
}

.notice{
  border-top: #EFC959 solid 0.7mm;
   font-size: .9em;
   background: black;
   color: #F4DB90;
   padding: 1em;
}
.notice2{
  border-top: black solid 0.7mm;
   font-size: 0.9em;
   font-weight: bolder;
   background: #EFC959;
   color: #342C13;
   padding:1em!important;
   margin: 0 auto;
}
.mekabel p:first-child{
  align-self: flex-start;
  font-weight: 600;
  background: #ECD389;
  padding: 8% 1%;
  margin: 0 auto;
  border-radius: 5px;
}
.read:hover{
  filter: brightness(120%);
  animation-name: brighter;
  animation-duration: 1s;
}
@keyframes brighter {
 from {filter: brightness(100%) drop-shadow(1px 1px 1px black)}
 to {filter: brightness(120%) drop-shadow(1px 1px 1px black)}
}

.read-inner1{
  height: 60px;
  width: 140px;
  right:0;
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content:center;
  justify-content:space-between;
  padding: 5%;
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1.2em;
  margin: auto;
  box-shadow: 1px 1px 13px  1px #9F863B inset;
  background: #f3eace;
  border: 0.2mm solid #F4DB90;
  border-radius:  0;
  color: #624f14;
  text-align: right;
}
#info{
  height: 20px;
  margin: 1px ;
  font-weight: 400;
}
.toggling i{
  color: #EFC959;
  font-size: 2em;
  transition: transform 0.5s ;
}
.rotate{
  transform: rotate(-90deg);
  transition: transform 0.5s;
}
.maanak, .maanakAsk{
  filter: drop-shadow(1px 1px 1px black);
  margin:0;
}
#readingBar i:hover{
  color: black;
}
.toggling{
  display:none;
  padding:0;
  margin: 0;
  
  
}
.mamarhead{
  position: relative;
  padding: .5em 0 0;
  background-image: url(bgrnd1.jpg);
  border-radius: 10px;
}
 .mamarhead p{
  color: #f4efc2;
  font-weight: 800;
  font-size: 2.3em;
}
#mamarpage{
  margin-top: 2em;
  width:90%;
}
.mamarbtn{
  margin: 0.5mm;
  display: flex;
  padding:1em;
  font-size: 1.6rem;
  font-family: 'Heebo';
  min-width: 10%;
  max-width: 50%;
  width: 100%;
  text-align: center;
  align-items: center;
  justify-content: center;
  border: solid 0.1mm #9B6B0F;
  border-radius: 10px;
  background: #EDC758;
}
.mamarbtn:hover{
  background: #DDB54A;
}
.flexrow{
  display: flex;
  flex-direction: row;
  margin-bottom: 1em;
}


.navbtn{
  font-family: 'Heebo', sans-serif;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  cursor: pointer;

}
#homebtn{
  position: fixed;
  bottom: 1em;
  right: 1em;
  background: black;
  box-shadow: 0.1mm 0.1mm 3mm 0.1mm #7d5e20;
  border-radius: 50%;
  border: #EDC758;
  height: 50px;
  width: 50px;
  color: #EDC758;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  font-size: 2em;
}
#homebtn:hover{
  background:none;
  color: black;
  box-shadow: none;
}
#iconbar{
  box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 0 1.5em 1.5em 0;
    padding: 0.4em;
    position: absolute;
    top: 8vh;
    left: -4px;
    background: linear-gradient(to right bottom, #7D5E20, #F4DB90, #7D5E20);
    border: solid 0.2mm black;
    height: 220px;
    justify-content: space-between;
 }
 #iconbar2{
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: center;
   border-radius: 0 1.5em 1.5em 0;
   padding: 0.4em;
   position: fixed;
   bottom: 10vh;
   left: -2px;
   background: linear-gradient(to right bottom, #7D5E20, #F4DB90, #7D5E20);
   border: solid 0.4mm black;
 }
 .icons{
  font-size: 1.5rem;
    display: block;
    margin: .1em;
    padding: .2em;
    background: black;
    border-radius: 20px;
    width: 40px;
    text-align: center;
    box-sizing: border-box;
    height: 40px;
    color: #F1D88D;
    filter: drop-shadow(0.1mm 0.1mm 1mm white);
}
   .icons :hover{
   font-size: 2rem;
   animation-name: bigicons;
   animation-duration: .4s;
}
@keyframes bigicons {
  from {font-size: 1.5rem}
  to {font-size: 2rem}
}

a.iconsfloat:hover{
  box-shadow: 0px 0px 7px 1px #332305;
  font-size: 1.6em;
  line-height: 1.3em;
  opacity: 1;
  animation:bgicons;
  animation-duration: .4s;
  transition: box-shadow ease-in-out;
}
@keyframes bgicons {
from {box-shadow :none; font-size: 1.4em}
 to {box-shadow: 0px 0px 7px 1px #332305; font-size: 1.6em}
}
.head-title2{
  text-decoration: none;
  display: flex;
  width: 50%;
  height: 25vw;
  background:black;
  transform: rotate(-30deg)
  translateY(-90%);
  position: fixed;
  left: -5%;
  top:10%;
  justify-content: flex-end;
  flex-direction: column;
  text-align: center;
  overflow: hidden;
  z-index: 200;
  border-bottom: 0.6mm solid #EFC959;
  filter: drop-shadow(1px 1px 2px black);
}
.head-title2 #sara{
  height: 95px;
  width: 158px;
  position: relative;
  top:0;
  margin: 0 auto 0;
  transform: translateX(-40%);
  filter: contrast(200%);
}
.head-title2 #ils{
  height: 20%;
  width: 10%;
  position:sticky;
  filter: contrast(130%);
  transform: rotate(45deg);
  transform: translateX(-95%);
  margin: 0 auto 0;
}

.swing{
  animation: swing ease-in-out 3s alternate infinite ;
  animation-delay: 3s;
  transform-origin: center -50px;
 }
@keyframes swing {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(-1deg)}
    100% { transform: rotate(1deg); }
}
.menu{
  color: #F3DA8F;
  font-size: 4vh!important;
  position: relative;
  display: flex;
  align-self: flex-end;
  left: 3px;
  margin: 3px;
  font-weight: 50;
  transition: rotate(90deg) 1s ease-out;
  display: none!important;
}
.rightnav{
  transition: right 0.6s ease 100ms;
  position: fixed;
  width: 14vw;
  display: flex;
  flex-direction: column;
  align-content:stretch;
  background: linear-gradient( to left ,#0F0F0F, black, #0F0F0F);
  height: 100%;
  top:0;
  right: 0;
  padding: 0;
  margin: 0 auto;
 }
 a{
   text-decoration: none;
 }
.rightbar{
  justify-content: space-between;
  min-height: 40px;
  max-height: auto;
  display: block;
  border: none;
  padding: 8% 8% ;
  margin:  0;
  line-height: 40px;
  font-size: 1.5vw;
  text-decoration: none;
  background: #4E4E4E;
  color: #EFC959;
  text-align: left;
  justify-content:center;

}
.rightbar .fa{
  font-size: 3vw;
  color: #EFC959;
  position: relative;
  float:right;
}

.maincontent {
    pointer-events: all;
    height: auto;
    width: 65%;
    flex-wrap: wrap;
    position: relative;
    display: flex;
    flex-direction: row;
    margin: 1% auto;
    justify-content: center;
    align-content: center;
    text-align: center;
}
.mainobject{
  display: flex;
  flex-direction: column;
  position: relative;
  width: 13vw;
  height: 20vw;
  color: #F2D682;
  filter: drop-shadow(1px 1px 2px black);
  margin: 5% 1%;
  padding:5%;
  box-sizing: border-box;
  border-radius: 2%;
  font-size: 1.5vw;
  line-height: 150%;
  background-image: url('bgrnd1.jpg');
  text-decoration: none;
  align-self:stretch;
  justify-content:space-between;
  pointer-events: all;
}
.mainobject:hover{
  box-shadow: -0.2mm -0.2mm 0.2mm 0.2mm #EFC959 inset;
  pointer-events: all;
  background: #3B3B3B;
}

.mainobject .fa{
  font-size: 5vw;
  color: #EFC959;
  filter: drop-shadow(0.3mm 0.3mm 0.1mm white);
  margin: 0;
}
.mainobject p{
  margin: 1em auto;
  font-weight: 50;
  margin: 0;
}
/*contact page*/

.contact-opt{
  padding:2%;
}

.contact-number p{
  margin-bottom: 2%;
}
.message-box p{
  margin-bottom: 6%;
}
.message-box{
  position: relative;
  bottom: 0;
  width: 70%;
  margin: 10px auto 20px auto;
  height: auto;
}
/*paymant page*/
.payment-opt{
  position: relative;
  height: 15vw;
  line-height: 150%;
  justify-content: center;
  font-weight: 40;
}
a{

    color: inherit;
    pointer-events: all;
}
.backhead{
  height:100%;
  width:100%;
  background: linear-gradient(to left, transparent, white, white, transparent);
  border-top: 0.3mm #EFC959 solid;
  border-bottom: 0.3mm #EFC959 solid;
  padding: 3em;
  top:1em;
}
h1{
  font-size: 2.8rem;
  background: -webkit-linear-gradient(black, #7D5E20 30%, black);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
 }
#paypop{
  display:none;
  margin: 50px auto 0;
  border: none;
  width:110%;
  height: 1700px;
}
#paypop>iframe{
  color: #EFC959;
  min-width:80%;
  height: auto;

  border: none;
  margin: 5px auto;
 }
.sign button{
  width: 200px;
  height: 50px;
  background: black;
  border: 1px solid white;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
}
.hide{
  display: none;
}
.relative{
  position: relative;
}
.absolute{
  position: absolute;
}
.floatsymbol {
    color: inherit;
    filter: drop-shadow(0.2px 0.2px 0.5px black);
    top: -1em;
    right: -.8em;
    font-size: 1.3em!important;
    background: #F7F7F7;
    padding: 0.4em;
    border-radius: 50% 50% 50% 0;
  }
.uuline{
  text-decoration: underline;
}



















/*mobile design*/
@media only screen and (max-width: 850px) {
  .floatsymbol {
    color: inherit;
    filter: drop-shadow(0.2px 0.2px 0.5px black);
    top: -1em;
    right: -.8em;
    font-size: 1.3em!important;
    background: #F7F7F7;
    padding: 0.4em;
    border-radius: 50% 50% 50% 0;
  }
 h1 {
    font-size: 4.5vh;
    background: -webkit-linear-gradient(black, #7D5E20 10%, black);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
.rightbar{
  height:auto;
  display: block;
  border-top: 0.1mm solid #EFC959;
  padding: 0.2%;
  margin:  0;
  font-size: 2.5vw;
  text-decoration: none;
  background: #4E4E4E;
  color: #EFC959;
  text-align: center;
 }
.menu{
  display: none;
}
.rightnav{
  transition: right 0.6s ease 100ms;
  transition: left 0.6s ease 100ms;
  position:fixed;
  width: 17vw;
  display: flex;
  margin: 0 ;
  flex-direction: column;
  align-content:flex-start;
  background: #1E1A19;
  height:100%;
  padding-top:7.5vh;
  right: 0;
  pointer-events: all;
}
 body{
  padding: 0px;
  margin: 0;
  height: 100%;
  width: 100%;
 }
.head-title #sara, .head-title2 #sara{
  height: 50px;
  width: 90px;
  margin: 0 0 0 0;
  filter: contrast(120%);
  transform: translateX(0%);
  display: inline;
 }
.head-title #ils, .head-title2 #ils{
  height: 50px;
  width: 50px;
  margin: 0 0 0 0;
  position: relative;
  left:0;
  transform: rotate(0deg);
  transform: translateX(0%);
}
.head-title{
  height: auto;
  border: none;
  border-bottom: 0.6mm solid #EFC959;
}
.head-title, .head-title2{
  padding-top: 10px;
  position: fixed;
  min-width: 100%;
  width: auto;
  background-color: black;
  height: 57px;
  display: flex;
  flex-direction: row;
  align-content: center;
  /* align-self:center; */
  justify-content: center;
  text-decoration: none;
  margin: 0;
  border-radius: 0;
  transform: rotate(0);
  filter:drop-shadow(0);
  top:0;
  left: 0;
  z-index: 100;
}
@keyframes swing {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
  }
.swing {
    transform-origin: center -50px;
}
.rightbar .fa{
  display: none;
}
.backhead{
  display: block;
  position: relative;
  height:100%;
  width:80%;
  background: linear-gradient(to left, transparent, white, white, transparent);
  border-top: 0.3mm #EFC959 solid;
  border-bottom: 0.3mm #EFC959 solid;
  margin: 0 auto 2em;
  padding: 0;
}
.maincontent{
      width: 80%;
      height: 100%;
      min-height: 100vh;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: space-between;
      text-align: center;
      top: 20%;
      left: auto;
      align-self: center;
      pointer-events: all;
      overflow: hidden;
}
.secondary{
  width: 100%;
  margin: 7em auto 1.7em;
  overflow: auto!important;
}
.mainobject{
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center;
  width: 60%;
  height: 20%;
  color: #F2D682;
  filter: drop-shadow(1px 1px 0.4mm black);
  margin: 0.3% auto;
  padding: 4% 6%;
  box-sizing: border-box;
  border-radius: 3%;
  line-height: 150%;
  font-size: 3vw;
  background-image: url('bgrnd1.jpg');
}
.mainobject .fa{
  font-size: 1em;
  position: absolute;
  right: 3%;
  align-self:center;
}
.arrowbox{

    left: .5em;
}
.mainobject p{
  margin: 0 auto;
  align-self: center;
}

.payment-opt{
  font-size: 3vh;
}
#paypop{
  float: left;
  margin: 5px 0 0;
  border: none;
  width:100%;
  height: inherit;
}
#paypop>iframe{
  width: 100%;
  height: 80vh;
  border-radius: 0px;
  border: none;
  margin: 1px auto;
 }
.message-box{
  height: auto;
  display: flex;
  flex-direction: column;
  align-items:center;
  justify-content: center;

}
.message-box p{
  margin-bottom: 3%;
}
input, textarea{
  font-size: 1em;
  max-width: 100%;
}
.hide{
  display: none;
}
#slider{
  display: block;
    width: 95%;
    height: 40vh;
    position: absolute;
    bottom: 29vh;
    left: 0;
    float: left;
    background: black;
    border-top: #EFC959 1mm solid;
    overflow-x: hidden;
    overflow-y: hidden;
    border-radius: 0 55px 55px 0;
}

 .slides{
  width: 100%;
 }
 .slide{
  text-align: left;
  padding: 10%;
  font-size: 1.8rem;
  line-height: 1.5em;
 }
 .slide1, .slide4{
  padding-right: 20%
 }
#iconbar, #iconbar2{
  display: flex;
  flex-direction: row;
  justify-content:center;
  float: none;
  text-align: center;
  border: none;
  border-top: 0.4mm solid black;
  border-radius: 0;
  position:fixed;
  bottom: 0;
  top: auto;
  left:0;
  width: 100%;
  height:3.5em;
  background: linear-gradient(to right bottom, #7D5E20, #F4DB90, #7D5E20);
 }
 .icons{
  font-size: 1.5rem;
    display: block;
    /* margin: 0.1em; */
    margin: .25em .6em;
    padding: .15em;
    background: black;
    border-radius: 11px;
    width: 52px;
    text-align: center;
    box-sizing: border-box;
    height: 40px;
    color: #F1D88D;
    filter: drop-shadow(0.1mm 0.1mm 1mm white);
}


#readingBar{
 box-sizing: border-box;
 display: flex;
 float: none;
 flex-direction: column;
 align-items:center;
 position: fixed;
 top: 65px;
 right: auto;
 transform: translateX(101%);
 z-index: 200;
 transition: transform .5s ease-in-out;

}
#barCont{
  width: 50px;
  height: 46px;
  display: block;
  position: fixed;
  top: .5em;
  padding: .5em 0;
  padding-bottom: 1.5em;
  border-radius: 15px 0 0 0;
  transition: .5s ease-in-out;
  z-index: 700;
}
.barCont2{
  position:relative;
}
.barOpen{
  transform: translate(0)!important;
}
.bar{
  position: absolute;
  right: 15px;
  width: 30px;
  height: 3px;
  background: rgb(211, 208, 208);
  transition: .5s ease-in-out;
  border-radius: 1px;
  z-index: 900;
}
.bar1{top: 5px}
.bar2{top: 15px}
.bar3{top: 25px}
.bar1open{transform: rotate(-45deg)
  /* translateX(-.20em)
  translateY(.80em); */
   ;width: 35px;
   top: 15px;
   right: 5px;
   height: 1px;
   margin: 0 auto;
    background: #6b5813}
.bar2open{opacity: 0}
.bar3open{transform: rotate(45deg)
   /* translateX(.15em)
   translateY(-.60em); */
   ;width: 35px;
   top: 15px;
   right: 5px;
   height: 1px;
   margin: 0 auto;
    background: #6b5813 }
.barContoOpen{
  background: #F4DB90;
}

#reading{
  margin: 1em auto 0;
  overflow: auto !important;
}

#reading .quest:hover{
  background: black;
  color: #EFC979;
}
#reading p {
    padding: .5em 1em;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.8em;
    margin: 0;
}
#reading h2 {
    font-size: 1.2em;
    font-weight: 400;
    line-height: 1.6em;
    margin: 1em auto;
    text-align: center;
}
#reading h3{
  font-size: 1.3rem
}

.read1-1{
  background: black;
}
#reading img{
  width: 93%;
  height: auto;
  margin: 0 auto;
  border: 0.4mm solid #9F863B;
  padding: 0;
  z-index: -400;
}
.readHead{
    position: relative;
    color: #6b5813;
    right: 0;
    width: 100%;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: space-around;
    font-size: 15px;
    font-weight: 400;
    filter: none;
    background: #F4DB90;
    border-radius: 0;
}

.readHeadRead{
    border-radius:  1em 0 0 1em;
}
.read> .fa-chevron-circle-left{
  position: absolute;
  left: 1em;
}
.read-inner1 .fa-chevron-circle-left{
  padding: 1em;
  left: .2em;
}
.read{
  position: relative;
    right: auto;
    height: 2em;
    width: 100vw;
    align-items: center;
    align-content: center;
    justify-content: center;
    font-size: 1.5em;
    font-weight: 700;
    /*line-height: 0.5vh;*/
    filter: drop-shadow(1px 1px 1px black) brightness(100%);
    background: linear-gradient( #F4DB90 , #7D5E20, #F4DB90);
    border-radius: 0;
    color: #F4DB90;
    transition: filter .6s ease-in-out;
}
.toggling{
  width: 95%;
  margin: auto;
}
#homebtn{
  position: fixed;
  bottom: auto;
  top: 75px;
  right: auto;
  left: 8px;
  background: black;
  box-shadow: 0.1mm 0.1mm 0mm 0.1mm #7d5e20;
  border-radius: 50%;
  border: #EDC758 .3mm solid;
  height: 40px;
  width: 40px;
  color: #EDC758;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  font-size: 1em;
  transition: .5s ease-in-out;
}
#homebtn>.fa{
  font-size: 1.5rem;
}

.backhead-read{
  margin: 0 auto 1vh;
}
#info{
  height: 15px;
}
.read-inner1 {
    display: flex;
    align-content: center;
    justify-content: center;
    width: 100%;
    padding: 1mm 0;
    font-size: 1.7em;
    line-height: auto;
    text-align: center;
}
.toggling i{
    color: #EFC959;
    font-size: 1em;
}

.magishim,.mekablim{
  flex-direction: column;
}
.magish,.mekabel{
  font-size: 1em;
  border-right: none;
  border-bottom: 0.1mm solid #9F863B;
}
.mekabel p:first-child{
  padding: 8% 8%;
  margin:  auto;
  display: block;
}
.mamarbtn{
  width: auto;
  min-width: auto;
  max-width: none;
}
.flexrow{
  flex-direction: column;
}


}