@font-face { font-family: OpenDyslexic; src: url(fonts/'OPENDYSLEXIC-REGULAR.TTF'); } 
@font-face { font-family: OpenDyslexic; font-weight: bold; src: url('fonts/OPENDYSLEXIC-BOLD.TTF');}


html, body {margin: 0; padding: 0; height: 100%;background-color:#ffffe9; color:#00007D; }
body {font-family: "Lato", sans-serif}
#searchbutton {cursor: pointer;}
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #00a3b3;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}


.slidecontainer {
position:absolute;
  width: 20%;
  bottom: 1.5%;
  margin-left:5%;
    margin-top:0.2vh;
}

#logo {	position: absolute;width: 20vh;	bottom: 1.5vh; left: 43vw; padding: 0; margin: 0;}	
#home { position:absolute; font-size:4vh; left: 60vw; top : 2vh;}
#searchform{ position:absolute; font-size:4vh; padding:0; margin:0;  top : 2vh; }
/*#flagbutton {  width: 22; height:22;}
#flag {  width: 21px; height:20px;}
#playbutton {  width: 22; height:22;}
#play {  width: 21px; height:21px;}
#speakbutton {  width: 22; height:22;}
#speak {  width: 21px; height:21px;}
#review {  height:22;}
#Q { height:22;}
#A {  height:22;}
#K{  height:22;}*/


#searchbutton {font-size:3vh;}
#colortheme {position:absolute; left:77%;top:105%; font-size:1vw;}
#color1 {position: absolute;left: 84%;}
#color2 {position: absolute;left: 88%;}
#color3  {position: absolute;left: 92%;}
#color4 {position: absolute;left: 96%;}
.menu { font-size: 2.7vh ;}
#heading {margin-bottom:0; padding-bottom: 0; font-size: 40px;font-weight:bold;font-family: OpenDyslexic; color: #00A4B4;}
#keywords {text-align:left; font-size: 2.4vw; font-weight:bold;font-family: OpenDyslexic;color : #00A4B4;}
#info{font-family: OpenDyslexic; font-size: 2vw;text-align: left;color: #00A4B4; }
#keywords2  {text-align:left; font-size: 2.4vw; font-weight:bold;font-family: OpenDyslexic;color : #00A4B4;}
#question{tfont-family: OpenDyslexic; font-size: 2vw;text-align: left;color : #E97451;}
#footer {height:8vh; margin:0; padding:0;}
#controls {position: absolute; left: 43vw; bottom: 0.7vh; color: #00A3B3;}
#main {max-width : 2000px;}
#mainbody {padding-left:20vw; padding-right:20vw;}

}



@media all and (max-width: 2560px) and (min-width: 2001px){ 
#logo {	position: absolute;width: 20vh;	bottom: 1.5vh; left: 43vw;}	
#home { position:absolute; font-size:4vh; right: 40vw; top : 2vh;}
#searchform{ position:absolute; font-size:4vh; right: 40vw; top : 2vh; }
 
#searchbutton {font-size:3vh;}
#colortheme {position:absolute; left:77%;top:105%; font-size:1vw;}
#color1 {position: absolute;left: 84%;}
#color2 {position: absolute;left: 88%;}
#color3  {position: absolute;left: 92%;}
#color4 {position: absolute;left: 96%;}
.menu { font-size: 2.7vh ;}
#heading {margin-bottom:0; padding-bottom: 0; font-size: 40px;font-weight:bold;font-family: OpenDyslexic; color: #00A4B4;}
#keywords {text-align:left; font-size: 2.4vw; font-weight:bold;font-family: OpenDyslexic;color : #00A4B4;}
#info{font-family: OpenDyslexic; font-size: 2vw;text-align: left;color: #00A4B4; }
#keywords2  {text-align:left; font-size: 2.4vw; font-weight:bold;font-family: OpenDyslexic;color : #00A4B4;}
#question{font-family: OpenDyslexic; font-size: 2vw;text-align: left; color : #E97451;}
#footer {height:8vh; margin:0; padding:0;}
#controls {position: absolute; left: 43vw; bottom: 0.7vh; color: #00A3B3;}

#slidecontainer {position: absolute;}
#main {max-width : 2000px;}
#mainbody {padding-left:20vw; padding-right:20vw;}

}





@media screen and (max-width: 2000px) and (min-width: 1601px) { 
#logo {	position: absolute;width: 20vh;	bottom: 1.5vh; left: 43vw;}	
#home { position:absolute; font-size:4vh; right: 40vh; top : 2vh;}
#searchform{ position:absolute; font-size:4vh; right: 45vh; top : 2vh;  }
 
#searchbutton {font-size:3vh;}
#colortheme {position:absolute; left:77%;top:105%; font-size:1vw;}
#color1 {position: absolute;left: 84%;}
#color2 {position: absolute;left: 88%;}
#color3  {position: absolute;left: 92%;}
#color4 {position: absolute;left: 96%;}
.menu { font-size: 2.7vh ;}
#heading {margin-bottom:0; padding-bottom: 0; font-size: 40px;font-weight:bold;font-family: OpenDyslexic; color: #00A4B4;}
#keywords {text-align:left; font-size: 2.4vw; font-weight:bold;font-family: OpenDyslexic;color : #00A4B4;}
#info{font-family: OpenDyslexic; font-size: 2vw;text-align: left;color: #00A4B4; }
#keywords2  {text-align:left; font-size: 2.4vw; font-weight:bold;font-family: OpenDyslexic;color : #00A4B4;}
#question{font-family: OpenDyslexic; font-size: 2vw;text-align: left;color : #E97451;;}
#footer {height:8vh; margin:0; padding:0;}
#controls {position: absolute; left: 35%; bottom: 0.7vh; color: #00A3B3;}
#main {max-width : 2000px;}
#mainbody {padding-left:20vw; padding-right:20vw;}


#slidecontainer {position: absolute;}
}






@media screen and (max-width: 1600px) and (min-width: 1401px) {
#logo {	position: absolute;width: 20vh;	bottom: 1.5vh; left: 43vw;}	
#home { position:absolute; font-size:4vh; right: 40vh; top : 2vh; }	
#searchform{ position:absolute; font-size:4vh; right: 18.5vw; top : 2vh; }
 
#searchbutton {font-size:3vh;}
#colortheme {position:absolute; left:77%;top:105%; font-size:1vw;}
#color1 {position: absolute;left: 84%;}
#color2 {position: absolute;left: 88%;}
#color3  {position: absolute;left: 92%;}
#color4 {position: absolute;left: 96%;}
.menu { font-size: 2.7vh ;}
#heading {margin-bottom:0; padding-bottom: 0; font-size: 40px;font-weight:bold;font-family: OpenDyslexic; color: #00A4B4;}
#keywords {text-align:left; font-size: 2.4vw; font-weight:bold;font-family: OpenDyslexic;color : #00A4B4;}
#info{font-family: OpenDyslexic; font-size: 2vw;text-align: left;color: #00A4B4; }
#keywords2  {text-align:left; font-size: 2.4vw; font-weight:bold;font-family: OpenDyslexic;color : #00A4B4;}
#question{font-family: OpenDyslexic; font-size: 2vw;text-align: left;color : #E97451;}
#footer {height:8vh; margin:0; padding:0;}
#controls {position: absolute; left: 35%; bottom: 0.7vh; color: #00A3B3;}
#main {max-width : 2000px;}
#mainbody {padding-left:20vw; padding-right:20vw;}
#slidecontainer {position: absolute;}
}





@media screen and (max-width: 1400px)  and (min-width: 1201px){
#logo {	position: absolute;width: 18vh;	top: 40%; left: 43vw;}	
#home { position:absolute; font-size:4vh; right: 2vh; top: 50%;}	
#searchform{font-size:3vh;  bottom : 1vh; width: 20vw;  }

#searchbutton {font-size:3vh; width: 4vw}
#colortheme {position:absolute; left:77%;top:105%; font-size:1vw;}
#color1 {position: absolute;left: 84%;}
#color2 {position: absolute;left: 88%;}
#color3  {position: absolute;left: 92%;}
#color4 {position: absolute;left: 96%;}
.menu { font-size: 2.7vh ;}
#heading {margin-bottom:0; padding-bottom: 0; font-size: 40px;font-weight:bold;font-family: OpenDyslexic; color: #00A4B4;}
#keywords {text-align:left; font-size: 2.4vw; font-weight:bold;font-family: OpenDyslexic;color : #00A4B4;}
#info{font-family: OpenDyslexic; font-size: 2vh;text-align: left;color: #00A4B4; }
#keywords2  {text-align:left; font-size: 2.4vw; font-weight:bold;font-family: OpenDyslexic;color : #00A4B4;}
#question{font-family: OpenDyslexic; font-size: 2vh;text-align: left;color : #E97451;}
#footer {height:8vh; margin:0; padding:0;}
#controls {position: absolute; left: 35%; bottom: 0.7vh; color: #00A3B3;}
#main {max-width : 2000px;}
#mainbody {padding-left:20vw; padding-right:20vw;}

#slidecontainer {position: absolute;}

@media screen and (max-width: 1200px) {
#logo {	position: absolute;  width: 12.8vh;	bottom: 0.1vh; left: 40vw;}		
#home { position:absolute; font-size:4vh; right: 40vh; top : 2vh;}
#searchform{ position:absolute; font-size:3vh; right: 4vw; top : 4vh; width: 40vw; max-width: 40vw; }
 
#searchbutton {font-size:3vh;}
#colortheme {position:absolute; left:68%;top:105%; font-size:1vw;}
#color1 {position: absolute;left: 74%;}
#color2 {position: absolute;left: 80%;}
#color3  {position: absolute;left: 86%;}
#color4 {position: absolute;left: 92%;}
.menu { font-size: 2.7vh ;}
#heading {margin-bottom:0; padding-bottom: 0; font-size: 40px;font-weight:bold;font-family: OpenDyslexic; color: #00A4B4;}
#keywords {text-align:left; font-size: 2.4vw; font-weight:bold;font-family: OpenDyslexic;color : #00A4B4;}
#info{font-family: OpenDyslexic; font-size: 2vh;text-align: left;color: #00A4B4; }
#keywords2  {text-align:left; font-size: 2.4vw; font-weight:bold;font-family: OpenDyslexic;color : #00A4B4;}
#question{font-family: OpenDyslexic; font-size: 2vh;text-align: left; color : #E97451;}
#footer {height:8vh; margin:0; padding:0;}
#controls {position: absolute; left: 35%; bottom: 0.7vh; color: #00A3B3;}
#main {max-width : 2000px;}
#mainbody {padding-left:10vw; padding-right:10vw;}
#slidecontainer {position: absolute;}
}



@media screen and (orientation:landscape) {
#logo {	position: absolute;width: 18vh;	bottom: 1vh; left: 43vw;}	
#home { position:absolute; font-size:4vh; right: 2vh; top: 50%;}	
#searchform{ position:absolute; font-size:3vh; left: 56vw; top : 3vh;  }
 
#searchbutton {font-size:3vh;}
#colortheme {position:absolute; left:77%;top:105%; font-size:1vw;}
#color1 {position: absolute;left: 84%;}
#color2 {position: absolute;left: 88%;}
#color3  {position: absolute;left: 92%;}
#color4 {position: absolute;left: 96%;}
.menu { font-size: 2.7vh ;}
#heading {margin-bottom:0; padding-bottom: 0; font-size: 40px;font-weight:bold;font-family: OpenDyslexic; color: #00A4B4;}
#keywords {text-align:left; font-size: 2.4vw; font-weight:bold;font-family: OpenDyslexic;color : #00A4B4;}
#info{font-family: OpenDyslexic; font-size: 2vw;text-align: left;color: #00A4B4; }
#keywords2  {text-align:left; font-size: 2.4vw; font-weight:bold;font-family: OpenDyslexic;color : #00A4B4;}
#question{font-family: OpenDyslexic; font-size: 2vw;text-align: left;color : #E97451;}
#footer {height:8vh; margin:0; padding:0;}
#controls {position: absolute; left: 35%; bottom: 0.7vh; color: #00A3B3;}
#main {max-width : 2000px;}
#mainbody {padding-left:20vw; padding-right:20vw;}
#slidecontainer {position: absolute;}
}