/* Default CSS */
/* Generated by the CoffeeCup HTML Editor - www.coffeecup.com */
#heading {
    display:-ms-grid;
    display:grid;
    width:98%;
    margin-left:2%;
    -ms-grid-columns:13% 68% 13%;
    grid-template-columns: 13% 68% 13%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    grid-column-gap: 1%;
    grid-row-gap: 1%;  
    grid-template-areas: "logo banner buttons";
}
#logo {
  -ms-grid-row:1; 
  -ms-grid-column:1; 
  margin-top: 15%; 
  width:60% !important;
}
#banner {
  -ms-grid-row:1; 
  -ms-grid-column:2; 
   width:100%;
   display:inline-block;
   border-radius:20px;
    font-family:'Arial';
    font-size: 3.5vw;
	font-weight: bold;
	color: black;
	text-align: center;
    align-self: center;
}
#buttons {
  -ms-grid-row:1; 
  -ms-grid-column:3; 
   text-align:center;
   margin-top: 15%;
}
button {
   display:block;
   width:60%;
}
.ui-button,  .ui-button-text .ui-button{  
   font-size: 1.4vw; 
}
#sliderpanel {
  display:none; 
  height:150px;
  border:2px solid black;
}
#slider {
  width:90%;
  margin:auto;
}
.ui-slider-handle {text-align:center; }
#helpdiv {
   position:absolute;
   cursor:move;
   display:none;
   background-color:yellow;
   padding:5px;
   border-radius:3px;
   width: 90%;
   max-width:450px;
   z-index:10;
}   
#moreinfodiv {
  display:none;
  background-color:lightgrey;
  border-radius: 20px 20px 20px 20px;
  padding:10px;
  position:absolute;
  top:70px;
  left:60px;
  width: 80%;
  max-width:800px;
  z-index:1;
}
#moreinfodiv button {width:20%; }
#popup {
    display:none;
    position:absolute;
    top:5%;
    left:5%;
    width:90%;
    max-width:600px;
    z-index:10; 
    background-color:lightgreen;
    font-size:1.5vw;
    padding:5px;
    border-radius:5px;
}

@media (max-width:1000px) {
       #logo {display:none; }
       #heading {-ms-grid-columns:0% 75% 25%;}
       #heading {grid-template-columns: 0% 75% 25%; }
       #helpdrag {display:none;}
       #helpdiv {cursor:default; }
       #popup {font-size:2.5vw; }
       #popup h1 {font-size:3vw; }
}
@media (max-width:480px) {
   .ui-button,  .ui-button-text .ui-button{  
      font-size: 3vw; 
   }
   #moreinfodiv {
       left:5%;
       width:84%;
   }   
   #banner {font-size:5vw; }    
   #slider {
      width:90%;
      font-size:5vw;
   }
   #popup {font-size:4vw; }
   #popup h1 {font-size:4.5vw; }
}