* {
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
p,
section {
font-family: 'Lato', sans-serif;
//padding: 0.5em;
}
h1,
h2,
h3,
h4,
h5 {
color: #444;
}
h1 {
font-size: 1.7em;
//margin-bottom: 1em;
}
h2 {
font-size: 1.4em;
margin-top: 1.4em;}

h4 {
font-size: 1.2em;
margin-top: 1.4em;
color: #444;}



h3, h5 {
margin: 1.4em 0em;
color: white;
font-family: 'Fredericka the Great', sans-serif;
font-weight: normal;
font-size: 1.7em;
}

.circle-background {
background: #cc2222;
background: -webkit-linear-gradient(135deg, #991111, #cc2222); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(135deg, #991111, #cc2222);  /*For Opera 11.1 to 12.0*/
background: -moz-linear-gradient(135deg, #991111, #cc2222); /* For Firefox 3.6 to 15 */
background: linear-gradient(135deg, #991111, #cc2222); /* Standard syntax */
border-radius: 50%;
color: white;
font: normal 2em 'Fredericka the Great', sans-serif;
height: 2.5em;
padding: 0.5em;
width: 2.5em;
margin-top: 0em;

/*Centre number in circle*/
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;


}

div.level {
border-radius: 5px;
background: #5d0505;
padding: 5px;
margin: 2px;
text-align: center;
width: 3em;
display: inline-block;
color: #fff;
cursor: pointer;}


ul {
list-style: disc;
margin: 1em 2em;
}

// section ul {list-style: disc; margin: 1em 2em;}



li {
padding: 0.2em 0;
}
li:last-of-type {
border-bottom: none;
}

a {
color: #991111;
font-family: "Lato", sans-serif;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

img {
max-width: 100%;
}

table.gridtable, .testtable {
border-collapse: collapse;
width: 90%;
margin: 1.0em 0em;
}

.gridtable td {
vertical-align: top;
}

.gridtable th {
text-align: center;
}


th {
background-color: #991111;
color: white;
font-weight: bold;
}

th,td {
border: 1px solid black;
padding: 0.5em;
font-family: 'Lato', sans-serif;
text-align: left;
}

table.testtable td {
vertical-align: top;
}

.nostretch {
 width:1%;
 white-space:nowrap;
}

.centerfirst td:nth-child(1){
text-align: center;
}

.noborder {
border: none;
vertical-align: top;}

th a {
color: #fff;
text-decoration: underline;
}

header {
align-items: flex-end;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 1em;
width: 100%;
}
form {
display: inline;
padding: 0.5em 0;
}
input[type=search] {
background: #f9fbff;
border: solid 1px #ece9e6;
border-radius: 1em;
font: 1em 'Lato', sans-serif;
padding: 0.4em;

-webkit-transition: width 1.5s ease;
-moz-transition: width 1.5s ease;
-o-transition: width 1.5s ease;
transition: width 1.5s ease;
}
input[type=search]:focus {
width: 12.5em;
}

.inputoff {
// background: #f0f0f0;
color: #a0a0a0;
}


input[type=button] {
// background: #991111;
// background: -webkit-linear-gradient(135deg, #991111, #cc2222); /* For Safari 5.1 to 6.0 */
// background: -o-linear-gradient(135deg, #991111, #cc2222); /* For Opera 11.1 to 12.0 */
// background: -moz-linear-gradient(135deg, #991111, #cc2222); /* For Firefox 3.6 to 15 */
// background: linear-gradient(135deg, #991111, #cc2222); /* Standard syntax */
font: bold 1em 'Lato', sans-serif;
padding: 0.5em;
margin: 0.5em;
// color: #fff;
}

input[type=text] {
padding: 0.5em;
font-size: 1.3em;
}

input[type=submit] {
padding: 0.2em;
margin-left: 1em;
font-size: 1.3em;
}

.highlight {
background: #e0e0e0;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	text-align: center;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



section {
padding: 0.5em 1em;
}
footer {
background-color: #991111;
bottom: 0;
color: white;
display: flex;
font: 1.2em 'Lato', sans-serif;
height: 50px;
justify-content: space-between;
padding: 0.5em;
position: fixed;
width: 100%;
}

/*Header CSS*/
.gradient-background {
background: #991111;
background: -webkit-linear-gradient(135deg, #991111, #cc2222); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(135deg, #991111, #cc2222); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(135deg, #991111, #cc2222); /* For Firefox 3.6 to 15 */
background: linear-gradient(135deg, #991111, #cc2222); /* Standard syntax */
}
.logo-image {
margin: 0;
}
.header-icons {
color: white;
display: inline;
font-size: 2em;
}
.search-bar-min-width {
width: 5.5em;
}
.search-bar-max-width {
width: 12.5em;
}
.search-results {
background: white;
border: 5px solid #6dd5ed;
display: none;
font: 1em 'Lato', sans-serif;
padding: 1em;
width: 100%;
}
.search-result-link {
display: block;}

.shaded {background: #c0c0c0;}



/*Adverts CSS*/
.adstopleft, .adsbottomleft, .adsnewleft {
width: 305px;
padding: 0px;
margin-right: 30px;
margin-top: 20px;
display: inline-block;
box-shadow: 0.5em 0.5em 0.3em #ddd;

}

.adstopright, .adsbottomright, .adsnewright {
width: 305px;
padding: 0px;
margin-top: 20px;
display: inline-block;
box-shadow: 0.5em 0.5em 0.3em #ddd;
}

.adsnewleft, .adsnewright, .adsbottomright, .adsbottomleft {
margin-bottom: 30px;
}




/*Navigation CSS*/

.nav {
border: 1px solid #991111;
display: flex;
flex-wrap: wrap;
width: 100%;
}
.hide-nav {
display: none;
}


.drop-down {
position: relative;
width: calc(100% / 5);
}


.drop-down ul {
margin: 0em;
}


.drop-down-button {
background: #991111;
color: #fff;
font: bold 1em 'Lato', sans-serif;
// height: 50%;
padding: 0.5em;
width: 100%;
}

.drop-down-content {
background: #cc2222;
display: none;
font: bold 1em 'Lato', sans-serif;
list-style-type: none;
margin-left: 0;
position: absolute;
text-align: center;
width: 100%;
}
.drop-down:hover .drop-down-content {
display: block;
z-index: 1;
}
.drop-down-list:hover {
background: #cc2222;
}
.drop-down-link {
color: #fff;
}
.drop-down-link:hover {
color: white;
}

/*Test Content CSS*/

#score {
// border: 1px red solid;
display: inline-block;
padding: 0.2em;
margin-bottom: 1em;
}

.scorer {
background: #ece9e6;
border-radius: 100%;
display: inline-block;
height: 30px;
margin: 10px 10px 0 0;
width: 30px;
padding: 5px 0px;
text-align: center;
}
.correct {
background: #00ff00;
}
.wrong {
background: #ff0000;
}


.small {
font-size: 0.8em;
}

.big {
font-size: 1.4em;
}

.vbig {
font-size: 3.4em;
}


.clearer {
clear: both;
}

.curs {cursor: pointer}

.cursq {
display: block;
background: #ece9e6;
background: -webkit-linear-gradient(135deg, #ece9e6, #f9f9f9); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(135deg, #ece9e6, #f9f9f9); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(135deg, #ece9e6, #f9f9f9); /* For Firefox 3.6 to 15 */
background: linear-gradient(135deg, #ece9e6, #f9f9f9); /* Standard syntax */
border: 1px solid #ece9e6;
border-radius: 1em;
cursor: pointer;
margin: 15px;
padding: 10px;
}
.cursno {
display: block;
background: #ece9e6;
background: -webkit-linear-gradient(135deg, #ece9e6, #f9f9f9); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(135deg, #ece9e6, #f9f9f9); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(135deg, #ece9e6, #f9f9f9); /* For Firefox 3.6 to 15 */
background: linear-gradient(135deg, #ece9e6, #f9f9f9); /* Standard syntax */
border: 1px solid #ece9e6;
border-radius: 1em;
margin: 15px;
padding: 10px;
}
.cursright {
display: block;
background: #00ff00;
border: 1px solid #ece9e6;
border-radius: 1em;
margin: 15px;
padding: 10px;
}
.curswrong {
display: block;
background: #ff0000;
border: 1px solid #ece9e6;
border-radius: 1em;
margin: 15px;
padding: 10px;
}


.cursq4 {
background: #f0f0f0;
color: #000;
border-radius: 1em;
padding: 3px 10px;
border-radius: 1em;
box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
cursor: pointer;
}

.cursel4 {
background: #ffff00;
color: #000;
border-radius: 1em;
padding: 3px 10px;
border-radius: 1em;
box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
}

.cursno4 {
background: #f0f0f0;
color: #000;
border-radius: 1em;
padding: 3px 10px;
border-radius: 1em;
box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
}

.cursright4 {
background: #0c5b1d;
color: #fff;
border-radius: 1em;
padding: 3px 10px;
border-radius: 1em;
box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
}

.curswrong4 {
background: #991111;
color: #fff;
border-radius: 1em;
padding: 3px 10px;
border-radius: 1em;
box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
}

.callover {
padding: 10px;
border: 2px solid #444;
border-radius: 1em;
box-shadow: 0.5em 0.5em 0.3em #444;
margin: 20px 0px;
background: white;
max-width: 300px;
font-family: 'Lato', sans-serif;
}


.myprintarea {
background: white;
font: 1em 'Lato', sans-serif;
max-width: 1200px;
text-align: left;
}


/*Formatting*/
.text-centred {
text-align: center;
margin-bottom: 1em;
margin-top: 0em;
color: #991111;
}
.display-block {
display: block;
}

/*Toggle switch*/
.toggle-button {
  align-items: center;
  display: flex;
  // padding: 1.5em 0 1em 0;
}
.switch {
  display: inline-block;
  /*margin: 0.1em;*/
}
.switch input {
  display: none;
}
.toggle {
  background: #991111;
  border-radius: 20px;
  cursor: pointer;
  height: 24px;
  position: relative;
  width: 50px;
}
.toggle:before {
  background: white;
  border-radius: 10px;
  content: "";
  height: 20px;
  left: 2px;
  position: absolute;
  top: 2px;
  width: 20px;
}
input[type="checkbox"]:checked + .toggle:before {
  left: 28px;
}
.toggle-label {
  display: inline;
  // margin-left: 1em;
  text-align: center;
}



/*Container CSS*/
.container {
background: url(../images/background.png) 0 0 repeat, #f9fbff;
display: flex;
flex-wrap: wrap;
overflow-x: hidden; /* necessary to hide collapsed sidebar */
position: relative;
}

/*Curriculum CSS*/
.curriculum {
background: rgb(100, 100, 100);
color: white;
width: 17.5%;

-webkit-transition: margin 1.5s ease;
-moz-transition: margin 1.5s ease;
-o-transition: margin 1.5s ease;
transition: margin 1.5s ease;
}
.curriculum-title {
color: #aaa;
text-align: center;
margin-top: 0.5em;

}
.curriculum-section {
color: white;
font-style: italic;
text-decoration: underline;
}
.curriculum-bar {
list-style: none inside;
margin-left: 0;
}
.curriculum-button {
align-items: center;
border-bottom: 1px solid #c8c8c8;
display: flex;
height: 100px;
padding: 1em;
}
.curriculum-button-off {
align-items: center;
border-bottom: 1px solid #c8c8c8;
display: flex;
height: 100px;
padding: 1em;
background: #991111;
}



.curriculum-button:first-of-type {
border-top: 1px solid #c8c8c8;
}
.curriculum-button:last-of-type {
border-bottom: 1px solid #c8c8c8;
}
.curriculum-button:hover {
background: rgb(150, 150, 150);
//font-weight: bold;
}
.curriculum-link {
color: white;
font-size: 1.1em;
}
.collapsed {
display: block;
margin-left: -17.5%;
}
.collapse {
color: #991111;
font-size: 2em;
padding: 0.1em 0 0 0.1em;
width: 2.5%;
}
.hidden {
display: none !important;
}

/*Main Container CSS*/
.main-container {
display: flex;
flex-wrap: wrap;
justify-content: center;

-webkit-transition: width 1.5s ease;
-moz-transition: width 1.5s ease;
-o-transition: width 1.5s ease;
transition: width 1.5s ease;
}
.min-width {
width: 80%;
}
.max-width {
width: 97.5%;
}

/*Content CSS*/
.content {
display: flex;
flex-wrap: wrap;
// max-width: 1200px;
width: 100%;
padding-bottom: 50px;
}

/*Main Content CSS*/
.main-content {
background-color: white;
box-shadow: 0 0 2em #ddd;
width: 65%;
}


/*callout*/
.callout {
padding: 1.5em;
border: 2px solid #444;
border-radius: 1em;
box-shadow: 0.5em 0.5em 0.3em #444;
margin: 20px 20px;
}

.main-container .callout h5 {
color: #000; 
margin-top: 0em;
}

#qqsearch {
border: 2px solid #f00;
margin: 20px 20px;
}

.wider {
margin: 20px 0px;
}






/*quick answer*/
.quickmid, .testbox {
font-family: 'Lato', sans-serif;
padding: 1.5em;
border: 2px solid #444;
border-radius: 1em;
box-shadow: 0.5em 0.5em 0.3em #444;
margin: 20px 0px;
}


.quickmid h5, .testbox h5 {
color: #000;
margin-top: 0em;
}








/*sidebox*/
.sidebox {
font-family: 'Lato', sans-serif;
padding: 1.5em;
border: 2px solid #ddd;
border-radius: 2em;
box-shadow: 0.5em 0.5em 0.3em #555;
margin: 2em 0em;
// background: -webkit-linear-gradient(135deg, #2193b0, #6dd5ed);
background: -webkit-linear-gradient(135deg, #e0e0e0, #c0c0c0);
}

.sidebox h5 {
margin-top: 0em;
}

.help h5 {
margin-bottom: 0em;
}

.sidelink {
font-family: 'Lato', sans-serif;
padding: 0.2em;
border: 2px solid #ddd;
border-radius: 2em;
box-shadow: 0.5em 0.5em 0.3em #555;
margin: 0.5em 0em;
}

.sidelink img {
vertical-align: middle;
margin-right: 0.5em;
}

.sidelink p {
padding-left: 50px;
vertical-align: middle;
min-height: 45px;
}

// section img {
margin-right: 20px;
box-shadow: 0.5em 0.5em 0.3em #ddd;
}

/*Slider*/
.slider {


background: #cc2222;
background: -webkit-linear-gradient(135deg, #991111, #cc2222); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(135deg, #991111, #cc2222); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(135deg, #991111, #cc2222); /* For Firefox 3.6 to 15 */
background: linear-gradient(135deg, #991111, #cc2222); /* Standard syntax */

color:  white;
font-size: 1.2em;
padding: 1em 1em 2em 1em;
margin-top: 1.4em;
}
.slider-title {
color: white;
font-family: 'Fredericka the Great', sans-serif;
font-weight: normal;
}
.slider-text-link {
color: white;
font-weight: bold;
}
.slider-link {
display: none;
}

/*Slide show*/
.slider-container {
margin: auto;
max-width: 1000px;
position: relative;
}
.slide {
align-items: 'center';
display: none;
flex-direction: column;
flex-wrap: wrap;
}
.slider-text {
font-family: 'Lato', sans-serif;
font-size: 0.9em;
padding: 1em 0 0 0;
text-align: center;
}
.slider-image {
align-self: center;
border: 5px solid white;
}
.slider-number {
font-family: 'Lato', sans-serif;
font-size: 0.9em;
text-align: center;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

/*Left and right arrows*/
.previous, .next {
// border-radius: 0 3px 3px 0;
// color: white;
cursor: pointer;
// font-weight: bold;
// font-size: 38px;
// margin-top: -22px;
// padding: 16px;
position: absolute;
top: 70%;
width: auto;
transition: 0.6s ease;
}
.next {
border-radius: 3px 0 0 3px;
right: 0;
}
// .previous:hover, .next:hover {background-color: rgba(0,0,0,0.8);}

/*Dots*/
.dots {
margin: 1em 0 0 0;
text-align: center;
}
.dot {
background-color: white;
border-radius: 50%;
cursor: pointer;
display: inline-block;
height: 15px;
margin: 0 2px;
width: 15px;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #c8c8c8;
}

.slider h2 {
margin-top: 0em;
}





/*See Also CSS*/
// .seealso {background: black;}

.see-also a {
color: black;
display: block;
margin: 0.5em 0em;
}

/*Sidebar Content CSS*/
.sidebar-content {
background: rgba(88, 88, 88, 0.5);
padding: 1em;
width: 35%;
}

.sidebar-content a {
color: black;
text-decoration: underline;
}

/*Footer CSS*/
.previous-lesson {
text-align: left;
}
.next-lesson {
text-align: right;
}
.previous-lesson-title, .next-lesson-title {
color: inherit;
font-weight: bold;
}
.previous-lesson-link, .next-lesson-link {
color: inherit;
}


/*Turn box*/

.curriculum-box-content {
display: flex;
flex-wrap: wrap;
justify-content: center;
perspective: 2000px;
-webkit-perspective: 2000px;
}

.curriculum-box {
//display: flex;
//flex-wrap: wrap;
position: relative;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: 1s;
-webkit-transition: 1s;
}

.front, .back {
align-items: center;
border-radius: 1em;
box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
cursor: pointer;
display: flex;
flex-direction: column;
height: 5em;
margin: 0.5em;
width: 12em;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}

.front {
// justify-content: flex-start;
background: #000;
justify-content: center;
position: absolute;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
}
.back {
justify-content: center;
// padding: 1em;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.open {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}

.curriculum-box-title {
color: white;
font-size: 1.3em;
}

/*turn test ECW */
.ecwlong {
width: 35em;
padding: 1em;
//text-align: left;
// font-size: 14px;
}


#turnscore {
// background-color: red;
margin: 1em;
}



.curriculum-box-text {
color: white;
}

 

.shakethediv {
animation: shake 0.3s;
animation-iteration-count: 4;
}

.nodthediv {
animation: nod 0.3s;
animation-iteration-count: 4;
}


@keyframes shake {
0% {transform: translate(1px)}
10% {transform: translate(5px)}
20% {transform: translate(15px)}
30% {transform: translate(30px)}
40% {transform: translate(40px)}
50% {transform: translate(45px)}
}

@keyframes nod {
0% {transform: translate(0,1px)}
10% {transform: translate(0,5px)}
20% {transform: translate(0,15px)}
30% {transform: translate(0,30px)}
40% {transform: translate(0,40px)}
50% {transform: translate(0,45px)}
}

.mobileonly{
display: none;
}













@media screen and (max-width: 700px) {

.nomobile{
display: none;
}
.mobileonly{
display: inline-block;
}


  h1 {
    font-size: 1.4em;
  }
  h2 {
    font-size: 1.2em;
  }
  h3 {
    font-size:  1em;
  }
  header {
    justify-content: flex-end;
  }
  footer {
    font-size: 1em;
  }


/*Adverts CSS*/
.adstopleft, .adsbottomleft, .adsnewleft {
display: none;
}



/*turn test ECW */
.ecwlong {
width: 25em;
padding: 0.8em;
text-align: left;
font-size: 14px;
}


  /*Navigation CSS*/
  .nav {
    position: absolute;
    z-index: 1;
    display: none;
  }

.hide-nav {
    display: flex;
    flex-wrap: wrap;
  }

  .drop-down {
    width: 100%;
  }
  .drop-down-content {
    background: rgb(100, 100, 100);
    color: white;
  }
  .drop-down-list {
    border-bottom: 1px solid #c8c8c8;
  }
  .drop-down-list:last-of-type {
    border-bottom: none;
  }
  .drop-down-link {
    color: white;
  }
  /*Curriculum CSS*/
  .curriculum, .collapse {
    display: none;
  }

  /*Main Container CSS*/
  .main-container {
    width: 100%;
  }

  /*Main Content CSS*/
  .main-content {
    width: 100%;
  }

  /*Examples section*/

  /*Questions*/
  .question {
    padding: 1em;
  }

  /*Steps*/
  .circle-background {
    font-size: 1em;
    //height: 2em;
    //width: 2em;
  }

  /*Sidebar CSS*/
  .sidebar-content {
    order: 1;
    width: 100%;
  }

  /*Test CSS*/
  .print-test-area {
    width: 100%;
  }

  /*Footer CSS*/
  .previous-lesson-title, .next-lesson-title {
    display: none;
  }


/*Left and right arrows*/
.previous, .next {
  top: 90%;}

}

@media screen and (min-width: 701px) and (max-width: 1200px) {
  h1 {
    font-size: 1.5em;
  }
  h2 {
    font-size: 1.3em;
  }
  header {
    justify-content: flex-end;
  }
  footer {
    font-size: 1.1em;
  }

  /*Navigation CSS*/
  // .drop-down { width: calc(100% / 6);}

  .drop-down-button {
    font-size: 1em;  
    height: 100%; 
  }
  // .home-button, .graphs-button, .trigonometry-button {display: none;}

  /*Curriculum CSS*/
  .curriculum-button {
    padding: 0.5em;
  }
  .curriculum-link {
    font-size: 1em;
  }
  .collapse {
    background: white;
    font-size: 1.5em;
  }

  /*Main Content CSS*/
  .main-content {
    box-shadow: none;
    width: 100%;
  }

  /*Sidebar CSS*/
  .sidebar-content {
    order: 1;
    width: 100%;
  }

  /*Test CSS*/
  .print-test-area {
    width: 100%;
  }

  /*Footer CSS*/
  .previous-lesson-title, .next-lesson-title {
    display: none;
  }


/*Adverts CSS*/
.adstopleft, .adsbottomleft, .adsnewleft {
display: none;
}

  /*Curriculum CSS*/
  .curriculum, .collapse {
    display: none;
  }

  /*Main Container CSS*/
  .main-container {
    width: 100%;
  }

  /*Main Content CSS*/
  .main-content {
    width: 100%;
  }



}