html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

.display-none {
    display: none;
}

body {
  /*padding-top: 40px;*/
  /*padding-bottom: 40px;*/
}

.search-box {
    margin-top: 11px;
    width: 100%; float: left;
}

.btn-search {
    margin-top: 11px;
    float: right;
}

.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  font-size: 16px;
  height: auto;
  padding: 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="text"] {
  margin-bottom: -1px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}



/* Sticky footer styles
-------------------------------------------------- */


/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #f5f5f5;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

#wrap > .container {
  padding: 0px 15px 0;
}
.container .text-muted {
  margin: 20px 0;
}

#footer > .container {
  padding-left: 15px;
  padding-right: 15px;
}

code {
  font-size: 80%;
}

.subject-link {display: inline-block; width: 82px; margin: 10px 0.05% 10px 0.05%;}
a.subject-link {cursor: pointer; text-align: center;}
a.subject-link:hover span{color: gray;}

.course-name {display: block; text-align: center;}

a .course-name {color: #000;}

.img-holder {
  display: block;
  width: 100%;
  height: 100%;
}
 
.img-holder img {
    width: 100%;
    height: auto;
    margin: 1%;
    /*-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;*/
}

.course-link.latest {width: 160px;}

.header-bg {background: url(../images/zigzag.png) bottom left repeat-x; padding: 5px 0 20px 0;}
.bgtwo {background: url(../images/top-grad.jpg) bottom left no-repeat; background-size: cover;}

.logo-top {text-align: center; margin: 0 auto;}
.logo-top img {max-height: 145px; padding: 10px 0; margin-top: 7px;}

.avatar-holder {display: inline-block; float: left; margin-right: 10px;}
.user-info-text {display: inline-block; float: left; line-height: 16px;}
.user-top-info {display: block; margin-top: 12px; background: rgba(255,255,255, 0.55); border-radius: 5px; padding: 10px 15px;}

.user-info-text h4 {margin-top: 0; margin-bottom: 6px;}

a .weeks-test  {text-decoration: underline; text-align: center; padding:22px 0px; font-size: 20px;}
a .weeks-test:hover { background: #fedfa4;}
.weeks-test {background: #f9cf7e; color: #1f1f1f;}

.container.content {margin-top:30px; margin-bottom:30px; min-height: 100%}

.top-img {display: inline-block; float: left; margin-right: 10px;}
.top-img img {max-width: 55px;}
.top-stars {display: inline-block; float: left;}

.top-stars h5 {margin: 0 0 6px 19px; position: relative;}
.top-topic {display: block; overflow: hidden; margin-bottom: 15px;}

.course-name {position: relative; display: inline-block;}
.course-name:before {content:''; position: absolute; top:2px; left: -18px; width:15px;height:15px;border-radius:50%;font-size:8px;color:#fff;line-height:15px;text-align:center;background:#000}


.top-stars h5:before {content:''; position: absolute; top:1px; left: -18px; width:15px;height:15px;border-radius:50%;font-size:8px;color:#fff;line-height:15px;text-align:center;background:#000}

.t-blue:before {content:'Sv' !important; background: #91D4DE !important;}
.t-green:before {content:'S/N' !important; background: #C6DC84 !important;}
.t-yellow:before {content:'Al' !important; background: #F9CF7E !important;}
.t-purple:before {content:'Ma' !important; background: #A18ABF !important;}
.t-pink:before {content:'En' !important; background: #EF6F91 !important;}

.quiz-container {padding: 15px; -webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px; -moz-box-shadow: 0 4px 4px rgba(0,0,0,.22);
-webkit-box-shadow: 0 4px 4px rgba(0,0,0,.22);
box-shadow: 0 4px 4px rgba(0,0,0,.22);
}

.learnmore-container {padding: 15px; -webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px; -moz-box-shadow: 0 4px 4px rgba(0,0,0,.22);
-webkit-box-shadow: 0 4px 4px rgba(0,0,0,.22);
box-shadow: 0 4px 4px rgba(0,0,0,.22);}

.questionmark {font-size: 48px; font-weight: bold; color: black; display: block; text-align: center; opacity: 0.1;}

.quiz-container hr,.learnmore-container hr {border-top:1px solid black; opacity: 0.1;}

.answer-option:nth-child(2), .answer-option:nth-child(4) {  
  margin-right: 0px
}

.answer-option:nth-child(3), .answer-option:nth-child(4) {  
  margin-bottom: 0px
}

.answer-option {-webkit-border-radius: 3px;
-moz-border-radius: 3px; font-size: 18px;
border-radius: 3px; color: #000; font-weight: bold; display: inline-block; padding: 10px 15px; width: 220px; margin-bottom: 20px; margin-right: 26px; text-align: center; background: rgba(145,212,222, 1);}
.answer-option:hover {background: rgba(57,57,57, 1); color: #fff; text-decoration: none;}

.q-blue {background: rgba(145,212,222, 0.5) !important;}
.q-green {background: #C6DC84 !important;}
.q-yellow {background: #F9CF7E !important;}
.q-purple {background: #A18ABF !important;}
.q-pink {background: #EF6F91 !important;}

.answers {display: block; padding: 10px 20px 20px 20px;}


.search {display: block; margin-top: 50px;}

/*.container {width: 1170px;}*/

.quiz-container h2, .learnmore-container h2 {text-align: center;}

.result {display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 18px; font-weight: bold; -webkit-border-radius: 50%;
-moz-border-radius: 50%; border-radius: 50%; float: left; margin-right: 15px; color: #fff;}

.result.correct {background: #31be19;
}
.result.incorrect {background: #ca1515;}
.result-data {display: inline-block; float: left; width: 430px;}
.result-box {display: block; overflow: hidden; margin-bottom: 15px;}

.question-result {margin: 0 0 5px 0;}

.login-logo{margin-bottom: 30px; margin-top: 30px;}

.choose-avatar img {cursor: pointer; -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;}

.choose-avatar img:hover {opacity: 0.6;}

.choose-avatar {margin-bottom: 20px;}

.avatar-picker {width: 220px; background: #eee; /*display: none;*/}
.avatar-option {width: 66px; display: inline-block; margin-bottom: -1px; -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;}
.avatar-option img {border: 1px solid #EEE; cursor: pointer;}
.avatar-option:hover {opacity: 0.6}

.arrow_box {
  position: relative;
  background: #EEE;
  border: 4px solid #EEE;
  -webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-top: 17px;
}
.arrow_box:after, .arrow_box:before {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.arrow_box:after {
  border-color: rgba(136, 183, 213, 0);
  border-bottom-color: #EEE;
  border-width: 14px;
  margin-left: -87px;
}
.arrow_box:before {
  border-color: rgba(194, 225, 245, 0);
  border-bottom-color: #EEE;
  border-width: 20px;
  margin-left: -97px;
}

.changepsw button {margin-top: 20px;}

.changedpassword {margin-top: 20px;}

.learnmoreimg img{max-width: 473px;}
.learnmoreabout h4 a{color: #333333; display:block;}
.learnmoreabout h4 {margin-bottom: 20px;}

.right-learn.arrow.disabled, .left-learn.arrow.disabled {opacity: .5; cursor: not-allowed;}
.right-learn.arrow.disabled:hover, .left-learn.arrow.disabled:hover {background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDMzIDMzIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9ImhhdDAiIGdyYWRpZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiB4MT0iNTAlIiB5MT0iMTAwJSIgeDI9IjUwJSIgeTI9Ii0xLjQyMTA4NTQ3MTUyMDJlLTE0JSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlNGU0ZTQiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNGY0ZjQiIHN0b3Atb3BhY2l0eT0iMSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjMzIiBoZWlnaHQ9IjMzIiBmaWxsPSJ1cmwoI2hhdDApIiAvPgo8L3N2Zz4=);
background-image: -moz-linear-gradient(bottom, #e4e4e4 0%, #f4f4f4 100%);
background-image: -o-linear-gradient(bottom, #e4e4e4 0%, #f4f4f4 100%);
background-image: -webkit-linear-gradient(bottom, #e4e4e4 0%, #f4f4f4 100%);
background-image: linear-gradient(bottom, #e4e4e4 0%, #f4f4f4 100%);}

.left-learn.arrow {
background-color: #e5e5e5;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDMzIDMzIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9ImhhdDAiIGdyYWRpZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiB4MT0iNTAlIiB5MT0iMTAwJSIgeDI9IjUwJSIgeTI9Ii0xLjQyMTA4NTQ3MTUyMDJlLTE0JSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlNGU0ZTQiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNGY0ZjQiIHN0b3Atb3BhY2l0eT0iMSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjMzIiBoZWlnaHQ9IjMzIiBmaWxsPSJ1cmwoI2hhdDApIiAvPgo8L3N2Zz4=);
background-image: -moz-linear-gradient(bottom, #e4e4e4 0%, #f4f4f4 100%);
background-image: -o-linear-gradient(bottom, #e4e4e4 0%, #f4f4f4 100%);
background-image: -webkit-linear-gradient(bottom, #e4e4e4 0%, #f4f4f4 100%);
background-image: linear-gradient(bottom, #e4e4e4 0%, #f4f4f4 100%);
  top:240px; left:-36px; width: 30px; height: 30px; border-radius: 50%; -moz-box-shadow: 0 2px 3px rgba(0,0,0,.25);
-webkit-box-shadow: 0 2px 3px rgba(0,0,0,.25);
box-shadow: 0 2px 3px rgba(0,0,0,.25);}
.right-learn.arrow {top:240px; right:-36px; background-color: #e5e5e5;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDMzIDMzIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9ImhhdDAiIGdyYWRpZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiB4MT0iNTAlIiB5MT0iMTAwJSIgeDI9IjUwJSIgeTI9Ii0xLjQyMTA4NTQ3MTUyMDJlLTE0JSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlNGU0ZTQiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNGY0ZjQiIHN0b3Atb3BhY2l0eT0iMSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjMzIiBoZWlnaHQ9IjMzIiBmaWxsPSJ1cmwoI2hhdDApIiAvPgo8L3N2Zz4=);
background-image: -moz-linear-gradient(bottom, #e4e4e4 0%, #f4f4f4 100%);
background-image: -o-linear-gradient(bottom, #e4e4e4 0%, #f4f4f4 100%);
background-image: -webkit-linear-gradient(bottom, #e4e4e4 0%, #f4f4f4 100%);
background-image: linear-gradient(bottom, #e4e4e4 0%, #f4f4f4 100%); width: 30px; height: 30px; border-radius: 50%; -moz-box-shadow: 0 2px 3px rgba(0,0,0,.25);
-webkit-box-shadow: 0 2px 3px rgba(0,0,0,.25);
box-shadow: 0 2px 3px rgba(0,0,0,.25);}
.learnmore-margin {margin-left: 20px; margin-right: 20px;}
.left-learn.arrow, .right-learn.arrow {font-size: 16px; display: block; position: absolute; color: #616161;}
.left-learn.arrow:hover, .right-learn.arrow:hover {text-decoration: none; color: #878787; background: #cecece;}

.left-learn.arrow .glyphicon, .right-learn.arrow .glyphicon {top:6px;left:7px; color: #434343;}

.learnmore-container {position: relative;}

.subjects button{margin-bottom: 5px;}

.bootstrap-tagsinput {width: 100%;}

.editslideshow-img {margin-bottom: 20px;}
.editslideshow-img img{max-width: 445px; max-height: 890px;}

.thumbs-slide>div {display: inline-block; float: left; max-width: 30%; background: #fff;
-moz-box-shadow: 0 2px 5px rgba(0,0,0,.16);
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.16);
box-shadow: 0 2px 5px rgba(0,0,0,.16);
margin-right: 5%;
}

.thumbs-slide>span {display: inline-block; float: left; max-width: 30%; background: #fff;
-moz-box-shadow: 0 2px 5px rgba(0,0,0,.16);
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.16);
box-shadow: 0 2px 5px rgba(0,0,0,.16);
margin-right: 0;
}

.upload.thumbs-slide {counter-reset: my-badass-counter; }

.upload.thumbs-slide>div{background: #dedede; width: 134px; height:89px; margin-bottom: 10px; position: relative;}
.upload.thumbs-slide>span{background: #dedede; width: 134px; height:89px; margin-bottom: 10px; position: relative;}
.upload.thumbs-slide>div:before {content: counter(my-badass-counter);
counter-increment: my-badass-counter;
position: absolute;
left: 0;
top: 0;
font: bold 50px/1 Sans-Serif; z-index: 1;
width: 133px;
text-align: center;
line-height: 89px; color: #ebebeb;}
.upload.thumbs-slide>span:hover {cursor: pointer; background: #cecece;}
.upload.thumbs-slide>span:before {content: "+"; position: absolute; color: #ebebeb; width: 133px; text-align: center; font-size: 60px; line-height: 75px;}

div.remove:hover {background: #e71a1a;}
div.remove{position: absolute; z-index: 200; width: 30px; height: 30px; display: block; background: #000; -webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%; top:-6px; ; right: -6px; cursor: pointer;}
div.remove:before {content: "x"; color: white; width: 30px; text-align: center; font-size: 17px; line-height: 27px; display: block;  cursor: pointer; }

.upload.thumbs-slide div img {position: relative; z-index: 100;}

.upload.thumbs-slide div:nth-child(3n+3) {  
  margin-right: 0;
}

.upload.thumbs-slide { display: block;}

.thumbs-slide div:last-child {margin-right: 0;}
.thumbs-slide img{max-width: 100%;}
.thumbs-slide { margin-bottom: 15px;}

.button-group {margin-bottom: 20px; display: block;}

.clear:before,
.clear:after {
    content: " ";
    display: table;
}

.clear:after {
    clear: both;
}

/* aside {background:#efefef;} */

.upload-box {padding: 20px; border: 1px solid #ccc; -webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;}

.uploaded.folder {background: url("../images/folder.png") no-repeat top left; display: inline-block; float: left; width: 80px; height:80px; background-size: cover; position: relative; margin-right: 20px;}
.uploaded.video {background: url("../images/videoclip.png") no-repeat top left; display: inline-block; float: left; width: 80px; height:80px; background-size: cover; position: relative; margin-right: 20px;}

.modal-content {padding:20px;}

/*.purple .img-holder {background: #A18ABF;}
.pink .img-holder {background: #EF6F91;}
.blue .img-holder {background: #91D4DE;}
.yellow .img-holder {background: #F9CF7E;}
.green .img-holder {background: #C6DC84;}*/

.btn-pad {
    margin-right: 10px !important;
    margin-bottom: 10px;
}

.subject-title, .content-title {
    font-size: 12px;
    text-align: center;
    width: 88px;
    display: block;
    padding-top: 2px;
}

/* new homegrown game engine  css */
        
#placeholder-question {
    text-align: center;
    font-size: 24px;
   /* min-height: 300px;
    margin: 10px 10px 0 10px;
    padding: 37px 129px 72px 9px;
       */
}

#placeholder-answer {
    width: 35%;
    font-size: 20px;
    /*margin-left: 10px;
    padding-top: 46px;*/
}

.game-container {
    width: 100%;
    margin: 0 auto;
}

.addition {
    width: 35%;
    margin: 0 auto;
    line-height: 100%
}

.division {
    width: 30%;
    margin: 0 auto;
    line-height: 58%
}

.addition-q {
    display: block;
    float: right;
}

.addition-sign {
    display: block;
    float: right;
                
}

.division-q {
    display: block;
    float: right;
}

.division-sign {
    position: relative;
    bottom: 3px;
    left: 15px;
}

.underline {
    text-decoration: underline;
}

.addition-line {
    display: block;
    float: right;
}

.multichoice {
    /*width: 75%;
    margin: 0 auto;*/
    padding: 20px;
}

.multi-a-txt {
    width: 48%;
    padding: 10px 0px;
    margin-right: 2%;
    margin-bottom: 2%;
}

.multi-a-img {
    width: 120px;
    cursor: pointer; 
    cursor: hand;
}

.sticker {
    display: none;
}

/***** Left menu tiles, ul -> li *****/
ul.subjects {
    list-style-type: none;
    padding: 0;
}

ul.subjects li {
    float:left;
}

/****** Middle content link tiles *****/

ul.game-list {
    list-style-type: none;
    padding: 0;
}

ul.game-list li{
    float:left;
}

ul.video-list {
    list-style-type: none;
    padding: 0;
}

ul.video-list li{
    float: left;
}

.content-link {
    padding: 5px; 
    width: 105px
}

        

/* BLOCK GRID */
[class*="block-grid-"] {
  display: block;
  padding: 0;
  margin: 0 -0.55556rem; }
  [class*="block-grid-"]:before, [class*="block-grid-"]:after {
    content: " ";
    display: table; }
  [class*="block-grid-"]:after {
    clear: both; }
  [class*="block-grid-"] > li {
    display: block;
    height: auto;
    float: left;
    padding: 0 0.55556rem 1.11111rem; }

@media only screen {
  .small-block-grid-1 > li {
    width: 100%;
    list-style: none; }
    .small-block-grid-1 > li:nth-of-type(1n) {
      clear: none; }
    .small-block-grid-1 > li:nth-of-type(1n+1) {
      clear: both; }

  .small-block-grid-2 > li {
    width: 50%;
    list-style: none; }
    .small-block-grid-2 > li:nth-of-type(1n) {
      clear: none; }
    .small-block-grid-2 > li:nth-of-type(2n+1) {
      clear: both; }

  .small-block-grid-3 > li {
    width: 33.33333%;
    list-style: none; }
    .small-block-grid-3 > li:nth-of-type(1n) {
      clear: none; }
    .small-block-grid-3 > li:nth-of-type(3n+1) {
      clear: both; }

  .small-block-grid-4 > li {
    width: 25%;
    list-style: none; }
    .small-block-grid-4 > li:nth-of-type(1n) {
      clear: none; }
    .small-block-grid-4 > li:nth-of-type(4n+1) {
      clear: both; }

  .small-block-grid-5 > li {
    width: 20%;
    list-style: none; }
    .small-block-grid-5 > li:nth-of-type(1n) {
      clear: none; }
    .small-block-grid-5 > li:nth-of-type(5n+1) {
      clear: both; }

  .small-block-grid-6 > li {
    width: 16.66667%;
    list-style: none; }
    .small-block-grid-6 > li:nth-of-type(1n) {
      clear: none; }
    .small-block-grid-6 > li:nth-of-type(6n+1) {
      clear: both; }

  .small-block-grid-7 > li {
    width: 14.28571%;
    list-style: none; }
    .small-block-grid-7 > li:nth-of-type(1n) {
      clear: none; }
    .small-block-grid-7 > li:nth-of-type(7n+1) {
      clear: both; }

  .small-block-grid-8 > li {
    width: 12.5%;
    list-style: none; }
    .small-block-grid-8 > li:nth-of-type(1n) {
      clear: none; }
    .small-block-grid-8 > li:nth-of-type(8n+1) {
      clear: both; }

  .small-block-grid-9 > li {
    width: 11.11111%;
    list-style: none; }
    .small-block-grid-9 > li:nth-of-type(1n) {
      clear: none; }
    .small-block-grid-9 > li:nth-of-type(9n+1) {
      clear: both; }

  .small-block-grid-10 > li {
    width: 10%;
    list-style: none; }
    .small-block-grid-10 > li:nth-of-type(1n) {
      clear: none; }
    .small-block-grid-10 > li:nth-of-type(10n+1) {
      clear: both; }

  .small-block-grid-11 > li {
    width: 9.09091%;
    list-style: none; }
    .small-block-grid-11 > li:nth-of-type(1n) {
      clear: none; }
    .small-block-grid-11 > li:nth-of-type(11n+1) {
      clear: both; }

  .small-block-grid-12 > li {
    width: 8.33333%;
    list-style: none; }
    .small-block-grid-12 > li:nth-of-type(1n) {
      clear: none; }
    .small-block-grid-12 > li:nth-of-type(12n+1) {
      clear: both; } }
@media only screen and (min-width: 40.063em) {
  .medium-block-grid-1 > li {
    width: 100%;
    list-style: none; }
    .medium-block-grid-1 > li:nth-of-type(1n) {
      clear: none; }
    .medium-block-grid-1 > li:nth-of-type(1n+1) {
      clear: both; }

  .medium-block-grid-2 > li {
    width: 50%;
    list-style: none; }
    .medium-block-grid-2 > li:nth-of-type(1n) {
      clear: none; }
    .medium-block-grid-2 > li:nth-of-type(2n+1) {
      clear: both; }

  .medium-block-grid-3 > li {
    width: 33.33333%;
    list-style: none; }
    .medium-block-grid-3 > li:nth-of-type(1n) {
      clear: none; }
    .medium-block-grid-3 > li:nth-of-type(3n+1) {
      clear: both; }

  .medium-block-grid-4 > li {
    width: 25%;
    list-style: none; }
    .medium-block-grid-4 > li:nth-of-type(1n) {
      clear: none; }
    .medium-block-grid-4 > li:nth-of-type(4n+1) {
      clear: both; }

  .medium-block-grid-5 > li {
    width: 20%;
    list-style: none; }
    .medium-block-grid-5 > li:nth-of-type(1n) {
      clear: none; }
    .medium-block-grid-5 > li:nth-of-type(5n+1) {
      clear: both; }

  .medium-block-grid-6 > li {
    width: 16.66667%;
    list-style: none; }
    .medium-block-grid-6 > li:nth-of-type(1n) {
      clear: none; }
    .medium-block-grid-6 > li:nth-of-type(6n+1) {
      clear: both; }

  .medium-block-grid-7 > li {
    width: 14.28571%;
    list-style: none; }
    .medium-block-grid-7 > li:nth-of-type(1n) {
      clear: none; }
    .medium-block-grid-7 > li:nth-of-type(7n+1) {
      clear: both; }

  .medium-block-grid-8 > li {
    width: 12.5%;
    list-style: none; }
    .medium-block-grid-8 > li:nth-of-type(1n) {
      clear: none; }
    .medium-block-grid-8 > li:nth-of-type(8n+1) {
      clear: both; }

  .medium-block-grid-9 > li {
    width: 11.11111%;
    list-style: none; }
    .medium-block-grid-9 > li:nth-of-type(1n) {
      clear: none; }
    .medium-block-grid-9 > li:nth-of-type(9n+1) {
      clear: both; }

  .medium-block-grid-10 > li {
    width: 10%;
    list-style: none; }
    .medium-block-grid-10 > li:nth-of-type(1n) {
      clear: none; }
    .medium-block-grid-10 > li:nth-of-type(10n+1) {
      clear: both; }

  .medium-block-grid-11 > li {
    width: 9.09091%;
    list-style: none; }
    .medium-block-grid-11 > li:nth-of-type(1n) {
      clear: none; }
    .medium-block-grid-11 > li:nth-of-type(11n+1) {
      clear: both; }

  .medium-block-grid-12 > li {
    width: 8.33333%;
    list-style: none; }
    .medium-block-grid-12 > li:nth-of-type(1n) {
      clear: none; }
    .medium-block-grid-12 > li:nth-of-type(12n+1) {
      clear: both; } }
@media only screen and (min-width: 64.063em) {
  .large-block-grid-1 > li {
    width: 100%;
    list-style: none; }
    .large-block-grid-1 > li:nth-of-type(1n) {
      clear: none; }
    .large-block-grid-1 > li:nth-of-type(1n+1) {
      clear: both; }

  .large-block-grid-2 > li {
    width: 50%;
    list-style: none; }
    .large-block-grid-2 > li:nth-of-type(1n) {
      clear: none; }
    .large-block-grid-2 > li:nth-of-type(2n+1) {
      clear: both; }

  .large-block-grid-3 > li {
    width: 33.33333%;
    list-style: none; }
    .large-block-grid-3 > li:nth-of-type(1n) {
      clear: none; }
    .large-block-grid-3 > li:nth-of-type(3n+1) {
      clear: both; }

  .large-block-grid-4 > li {
    width: 25%;
    list-style: none; }
    .large-block-grid-4 > li:nth-of-type(1n) {
      clear: none; }
    .large-block-grid-4 > li:nth-of-type(4n+1) {
      clear: both; }

  .large-block-grid-5 > li {
    width: 20%;
    list-style: none; }
    .large-block-grid-5 > li:nth-of-type(1n) {
      clear: none; }
    .large-block-grid-5 > li:nth-of-type(5n+1) {
      clear: both; }

  .large-block-grid-6 > li {
    width: 16.66667%;
    list-style: none; }
    .large-block-grid-6 > li:nth-of-type(1n) {
      clear: none; }
    .large-block-grid-6 > li:nth-of-type(6n+1) {
      clear: both; }

  .large-block-grid-7 > li {
    width: 14.28571%;
    list-style: none; }
    .large-block-grid-7 > li:nth-of-type(1n) {
      clear: none; }
    .large-block-grid-7 > li:nth-of-type(7n+1) {
      clear: both; }

  .large-block-grid-8 > li {
    width: 12.5%;
    list-style: none; }
    .large-block-grid-8 > li:nth-of-type(1n) {
      clear: none; }
    .large-block-grid-8 > li:nth-of-type(8n+1) {
      clear: both; }

  .large-block-grid-9 > li {
    width: 11.11111%;
    list-style: none; }
    .large-block-grid-9 > li:nth-of-type(1n) {
      clear: none; }
    .large-block-grid-9 > li:nth-of-type(9n+1) {
      clear: both; }

  .large-block-grid-10 > li {
    width: 10%;
    list-style: none; }
    .large-block-grid-10 > li:nth-of-type(1n) {
      clear: none; }
    .large-block-grid-10 > li:nth-of-type(10n+1) {
      clear: both; }

  .large-block-grid-11 > li {
    width: 9.09091%;
    list-style: none; }
    .large-block-grid-11 > li:nth-of-type(1n) {
      clear: none; }
    .large-block-grid-11 > li:nth-of-type(11n+1) {
      clear: both; }

  .large-block-grid-12 > li {
    width: 8.33333%;
    list-style: none; }
    .large-block-grid-12 > li:nth-of-type(1n) {
      clear: none; }
    .large-block-grid-12 > li:nth-of-type(12n+1) {
      clear: both; } }


/* RESPONSIVE SQUARE */

.square-box{
    position: relative;
    width: 50%;
    overflow: hidden;
    background: #4679BD;
}
.square-box:before{
    content: "";
    display: block;
    padding-top: 100%;
}
.square-content{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: white;
}
.square-content div {
   display: table;
   width: 100%;
   height: 100%;
}
.square-content span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    color: white
}

/*Mobile stuff*/

.mobile-logo {text-align: center;}
.mobile-logo img{max-height: 32px; margin-top: 8px;}

.navbar-toggle {
position: absolute !important;
top: 0px !important;
left: 6px !important;
}


@media (max-width: 1024px){
.desktop {display: none;}
.logo-top {display: none;}
.user-top-info {display: none;}
.navbar-toggle {display: block;}
}

@media (min-width: 1025px){ 
.navmenu-brand {display: none !important;}
.navbar {display: none !important;}
}

.user-top-info-mobile {
  background: rgba(255,255,255,1);
  padding: 10px;
}
.user-top-info-mobile .avatar-holder {
  max-height: 60px;
  overflow: hidden;
  width: 30%;
  margin-right: 0;
}
.user-top-info-mobile .user-info-text {width: 70%;}
.user-top-info-mobile h4, .user-top-info-mobile .h4 {font-size: 16px;}

#s {
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 28px;
height: 60px;
background: rgba(198,220,132,1);
border: none;
color: #FFF;
width: 0px;
position: fixed;
top: 0;
padding-left: 20px;
z-index: 1003;
outline: none;
display: none;
visibility: hidden;
}


a:link.btn-search, a:active.btn-search, a:visited.btn-search {
  background-color: #f8f8f8 !important;
  background-image: url(../images/icon_search@2x.png) !important;
  background-position: 15px 13px !important;
  background-repeat: no-repeat !important;
  background-size: 20px 20px !important;
  padding-left:0px !important;
  height: 48px;
  width: 50px;
  line-height: 30px;
  float: right;
  display: block;
  right: 0px;
  z-index: 1002;
  position: absolute;
  top:0px;
  padding-top: 0;
  margin-top: 0;
}

a:hover.btn-search {
  background-color: #969696 !important;
}

.search-active {
  width: 100% !important;
  padding-left: 30px;
  right: 0 !important;
}

@media (max-width: 1024px){
.header-bg {background: transparent;}
.container.content {margin-top: 0;}
}

.learnmore {padding: 0px 15px 15px 15px;}

 #wrap {background: url(../images/bgNew.png); background-repeat: repeat;}

.container.content {background: #fff; border-radius: 5px; padding-top: 2%; padding-bottom: 2%; border-color: #F3F2F2; border-style: solid; border-width: 1px;}


/*Menyfärger*/

.desktop ul.navmenu-nav li{
  border-left:4px solid #fff;
}
.desktop ul.navmenu-nav li.subject-8 {position: relative;}
.desktop ul.navmenu-nav li.subject-8:after {
  position: absolute;
  content: "";
  background: url(../images/menu-icons/matte.png) top center no-repeat;
  display: block;
  width: 20px;
  height: 20px;
  background-size: 20px 20px;
  top: 10px;
  left: 5px;
}

.desktop ul.navmenu-nav li.subject-9:after {
  position: absolute;
  content: "";
  background: url(../images/menu-icons/sve.png) top center no-repeat;
  display: block;
  width: 20px;
  height: 20px;
  background-size: 20px 20px;
  top: 10px;
  left: 5px;
}

.desktop ul.navmenu-nav li.subject-10:after {
  position: absolute;
  content: "";
  background: url(../images/menu-icons/lang.png) top center no-repeat;
  display: block;
  width: 20px;
  height: 20px;
  background-size: 20px 20px;
  top: 10px;
  left: 5px;
}

.desktop ul.navmenu-nav li.subject-11:after {
  position: absolute;
  content: "";
  background: url(../images/menu-icons/glob.png) top center no-repeat;
  display: block;
  width: 20px;
  height: 20px;
  background-size: 19px 20px;
  top: 10px;
  left: 5px;
}

.desktop ul.navmenu-nav li.subject-16:after {
  position: absolute;
  content: "";
  background: url(../images/menu-icons/cyber.png) top center no-repeat;
  display: block;
  width: 20px;
  height: 20px;
  background-size: 12px 20px;
  top: 10px;
  left: 5px;
}

.desktop ul.navmenu-nav li.subject-17:after {
  position: absolute;
  content: "";
  background: url(../images/menu-icons/Ikon_nutidstest.png) top center no-repeat;
  display: block;
  width: 20px;
  height: 20px;
  background-size: 12px 20px;
  top: 10px;
  left: 5px;
}

.desktop ul.navmenu-nav li.subject-15:after {
  position: absolute;
  content: "";
  background: url(../images/menu-icons/ring.png) top center no-repeat;
  display: block;
  width: 20px;
  height: 20px;
  background-size: 9px 20px;
  top: 10px;
  left: 5px;
}

.desktop .nav > li > a {
  padding: 10px 15px 10px 32px;
}

.desktop ul.navmenu-nav li.subject-8:hover{
  color: #fff;
  background: rgba(161,138,191, 0.7);
  border-left:4px solid rgba(161,138,191, 1);
}

.desktop ul.navmenu-nav li.subject-9:hover{
  border-left:4px solid rgba(145,212,222, 1);
}

.desktop ul.navmenu-nav li.subject-10:hover{
  border-left:4px solid rgba(249,207,126, 1);
}

.desktop ul.navmenu-nav li.subject-11:hover{
  border-left:4px solid rgba(198,220,132, 1);
}

.desktop ul.navmenu-nav li.subject-12:hover{
  border-left:4px solid rgba(249,207,126, 1);
}

.desktop ul.navmenu-nav li.subject-13:hover{
  border-left:4px solid rgba(249,207,126, 1);
}

.desktop ul.navmenu-nav li.subject-14:hover{
  border-left:4px solid rgba(249,207,126, 1);
}

.desktop ul.navmenu-nav li.subject-15:hover{
  border-left:4px solid rgba(239,111,145, 1);
}

.desktop ul.navmenu-nav li.subject-16:hover{
  border-left:4px solid rgba(249,207,126, 1);
}

.desktop ul.navmenu-nav li.subject-17:hover{
  border-left:4px solid rgba(249,207,126, 1);
}

.game-container {/*min-height: 500px;*/ padding: 30px !important; background-size: 320px 480px !important; -webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;}
.game-container > div {width: 100% !important; padding: 20px; -webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px; -webkit-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.15);
-moz-box-shadow:    0px 2px 2px 0px rgba(50, 50, 50, 0.15);
box-shadow:         0px 2px 2px 0px rgba(50, 50, 50, 0.15);}
.game-container img{ max-width: 100% !important;}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
  #placeholder-answer {width: 90% !important;}

  .game-container {/*min-height: 500px;*/ padding: 15px !important;}
  .game-container > div {width: 100% !important; padding: 10px !important;}
  .game-container img{ max-width: 100% !important;}

}


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

}

@media only screen and (max-width: 768px) {
  .container {padding:0px !important;}
  .bgtwo {height: 52px;}
  .header-bg {padding:1px 0 1px 0;}
  .btn-pad {margin-top: 5px; margin-bottom: 5px;}
  hr {margin-top: 10px; margin-bottom: 10px;}
}

@media only screen and (min-width: 768px) and (max-width: 959px) {

}

@media only screen and (min-width: 959px) {

}


/*The tiles*/
.subject-8 .tile-header {background: #a18ac0;}
.subject-9 .tile-header {background: #91D4DE;}
.subject-10 .tile-header {background: #F9CF7E;}
.subject-11 .tile-header {background: #C6DC84;}
.subject-15 .tile-header {background: #EF6F91;}
.subject-16 .tile-header {background: #F9CF7E;}

.subject-8 .subject-icon,
.subject-9 .subject-icon,
.subject-10 .subject-icon,
.subject-11 .subject-icon,
.subject-15 .subject-icon,
.subject-16 .subject-icon{
  position: relative;
  display: block;
  float: left;
  width: 23px;
  height: 24px;
  margin-right: 4px;
}

.subject-8 .content-subject,
.subject-9 .content-subject,
.subject-10 .content-subject,
.subject-11 .content-subject,
.subject-15 .content-subject,
.subject-16 .content-subject{
  display: inline-block;
  margin-top: 1px;
}

.subject-8 .tile-header .subject-icon:after,
.subject-9 .tile-header .subject-icon:after,
.subject-10 .tile-header .subject-icon:after,
.subject-11 .tile-header .subject-icon:after,
.subject-15 .tile-header .subject-icon:after,
.subject-16 .tile-header .subject-icon:after {
  content: "";
  position: absolute;
  top:0px;
  left: 0px;
  display: block;
}

/* automatic icon choosing */
.tile-header .Övning-content:after {background: url(../images/tile-icons/Icon_quiz.png); width: 23px; height: 23px; background-size:23px 23px;}
.tile-header .Spel-content:after {background: url(../images/tile-icons/Icon_game.png); width: 23px; height: 23px; background-size:23px 23px;}
.tile-header .Video-content:after {background: url(../images/tile-icons/Icon_video.png); width: 23px; height: 23px; background-size:23px 23px;}
.tile-header .Info-content:after {background: url(../images/tile-icons/Icon_info.png); width: 23px; height: 23px; background-size:23px 23px;}
.tile-header .Bildspel-content:after {background: url(../images/tile-icons/Icon_animation.png); width: 23px; height: 23px; background-size:23px 23px;}
.tile-header .subject-icon:after {}



.game-list .content-list {position: relative;}
.tile-bg { display: block; padding:7px 10px 10px 10px; background-position: center right !important; background-repeat: no-repeat !important; border-top-left-radius: 3px; border-top-right-radius: 3px;}
.tile-header { display:block; color: #fff; border-top-left-radius: 3px; border-top-right-radius: 3px; font-weight: bold;}
.tile-gamename {position: relative; 
  font-weight: bold; 
  line-height: 16px; 
  min-height: 50px; 
  display:block; 
  padding: 8px 10px; 
  background: #f4f4f4; 
  border-bottom-left-radius: 3px; 
  border-bottom-right-radius: 3px; 
  color: #5b5f6e; 
  text-decoration: none;
  padding-right: 29px;
  transition: background 250ms ease-in-out;
  }

.tile-gamename:after {content:"";
  position: absolute;
  top:8px; 
  right:7px; 
  width: 18px; 
  height: 18px;
  background: url(../images/tile-arrow.png);
  background-size: 18px 18px;
  background-repeat: no-repeat;}
.content-list a:hover .tile-gamename {transition: background 250ms ease-in-out; background:#e9e9e9; text-decoration: none;}
.content-list a:hover {text-decoration: none !important;}