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;
}

.mobile-search{
    display: none;
}

.mobile-search .form-group input{
    float: none;
}

.mobile-search a span{
    font-size: 1.5em;
}

.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;
    top: 0px;
    left: 0px;
}
.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;
    top: 0px;
    left: 0px;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

#form1{
    margin-bottom: 0px;
}


/* 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 

-------------------------------------------------- */
/* 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: 25px; 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){
.logo-top {display: none;}
.user-top-info {display: none;}
}

@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;}

@media (min-width: 768px){
    #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:after {
  position: absolute;
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-size: 20px 20px;
  top: 10px;
  left: 5px;
  background-repeat: no-repeat;
  background-position: top center;
}

.desktop ul.navmenu-nav li.subject-8:after {
  background-image: url(../images/menu-icons/matte.png);
}

.desktop ul.navmenu-nav li.subject-9:after {
  background-image: url(../images/menu-icons/sve.png);
}

.desktop ul.navmenu-nav li.subject-10:after {
  background-image: url(../images/menu-icons/lang.png);
}

.desktop ul.navmenu-nav li.subject-11:after {
  background-image: url(../images/menu-icons/glob.png);
  background-size: 19px 20px;
}

.desktop ul.navmenu-nav li.subject-16:after {
  background-image: url(../images/menu-icons/cyber.png);
  background-size: 12px 20px;
}

.desktop ul.navmenu-nav li.subject-17:after {
  background-image: url(../images/menu-icons/Ikon_nutidstest.png);
  background-size: 12px 20px;
}

.desktop ul.navmenu-nav li.subject-19:after {
  background-image: url(../images/menu-icons/Ikon_generell.png);
  background-size: 12px 20px;
}


.desktop ul.navmenu-nav li.subject-15:after {
  background-image: url(../images/menu-icons/ring.png);
  background-size: 9px 20px;
}

.desktop ul.navmenu-nav li.subject-20:after {
  background-image: url(../images/menu-icons/bitesize.png);
}

.desktop ul.navmenu-nav li.subject-21:after {
  background-image: url(../images/menu-icons/sv-geo.png);
}
.desktop ul.navmenu-nav li.subject-22:after {
  background-image: url(../images/menu-icons/veckans-problem.png);
}
.desktop ul.navmenu-nav li.subject-26:after {
  background-image: url(../images/menu-icons/ikon-spellista.svg);
}
.desktop ul.navmenu-nav li.subject-27:after {
  background-image: url(../images/menu-icons/ikon_jul.svg);
  background-size: 25px 23px;

}.desktop ul.navmenu-nav li.subject-28:after {
  background-image: url(../images/menu-icons/ikon_rita.svg);
}

.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);
}

.desktop ul.navmenu-nav li.subject-19: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;}
  .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-color: #a18ac0 !important;}
.subject-9 .tile-header {background-color: #91D4DE !important;}
.subject-10 .tile-header {background-color: #F9CF7E !important;}
.subject-11 .tile-header {background-color: #C6DC84 !important;}
.subject-15 .tile-header {background-color: #EF6092 !important;}
.subject-16 .tile-header {background-color: #F9CF7E !important;}
.subject-17 .tile-header {background-color: #F9CF7E !important;}
.subject-19 .tile-header {background-color: #F9CF7E !important;}
.subject-20 .tile-header {background-color: #F9CF7E !important;}
.subject-21 .tile-header {background-color: #C6DC84 !important;}

.tile-header .subject-icon{
  position: relative;
  display: block;
  float: left;
  width: 23px;
  height: 24px;
  margin-right: 10px;
  margin-top: 5px;
}

.tile-header .content-subject{
    font-size: 22px;
  display: inline-block;
  margin-top: 1px;
}

.tile-header .subject-icon:after{
  content: "";
  position: absolute;
  top:0px;
  left: 0px;
  display: block;
}

.tile-header .category{
    text-align: right;
    text-transform: uppercase;
}

/* 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 { 
    background-color: #a18ac0;
    background-position: right center !important;
    background-repeat: no-repeat !important;
    display:block; 
    color: #fff; 
    border-top-left-radius: 3px; 
    border-top-right-radius: 3px; 
    font-weight: bold; 
    height: 70px; 
    padding-top: 5px; 
    padding-left: 5px;}
.tile-gamename {position: relative; 
  font-weight: bold; 
  min-height: 110px; 
  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-new {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#91d5de+27,ffffff+100&1+41,0+100 */
    position:absolute;
    bottom: 20px;
    background: -moz-linear-gradient(left, rgba(145,213,222,1) 27%, rgba(166,221,228,1) 41%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(27%,rgba(145,213,222,1)), color-stop(41%,rgba(166,221,228,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(145,213,222,1) 27%,rgba(166,221,228,1) 41%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(145,213,222,1) 27%,rgba(166,221,228,1) 41%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(145,213,222,1) 27%,rgba(166,221,228,1) 41%,rgba(255,255,255,0) 100%); /* IE10+ */
    background: linear-gradient(to right, rgba(145,213,222,1) 27%,rgba(166,221,228,1) 41%,rgba(255,255,255,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91d5de', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
    background-repeat: no-repeat;
    color: #f4f4f4;
    text-transform: uppercase;
    width: 100%;
    padding: 2px 5px;
    font-size: 16px;
    font-weight: bold;
    width: 110px;
    /*display: none;*/
}

.tile-new.show{
    display:block;
}

.tile-grade{
    position: absolute;
    bottom: 20px;
    right: 10px;
    background-image: url('../AllImages/tile_grade.png');
    width: 130px;
    height: 28px;
}
.tile-grade.grade-0{
    background-position: 0 0;
}
.tile-grade.grade-1{
    background-position: 0 -28px;
}
.tile-grade.grade-2{
    background-position: 0 -56px;
}
.tile-grade.grade-3{
    background-position: 0 -84px;
}
.tile-grade.grade-4{
    background-position: 0 -112px;
}
.tile-grade.grade-5{
    background-position: 0 28px;
}
/*
.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;}




/*Leaderboard*/

/* todo - move */
    /* div#leaderboard 
    // {
    //     display: table;
    //     width: 100%;
    //     border-collapse: collapse;
    // } */

    .leaders {
      display: table;
      width: 100%;
      border-collapse: collapse;
      font-size: 16px;
    }

    div#leaderboard div
    {
        display: table-cell;
        width: 100%;
        height: 20px;
    }

    div#leaderboard div:first-child .number{
      background: #6dc978;
      color: #fff;
    }
    div#leaderboard div:nth-child(2) .number{
      background: #7ccf86;
      color: #fff;
    }
    div#leaderboard div:nth-child(3) .number{
      background: #8bd494;
      color: #fff;
    }

    

    div#leaderboard .row-odd, div#leaderboard .row-even {
       display: table-row;
       border-bottom: 1px solid #efefef;
       height: 35px;
       line-height: 35px;
    }

    div#leaderboard > div:first-child{
      border-top: 1px solid #efefef;
    }

    div#leaderboard > div:first-child, div#leaderboard > div:nth-child(2), div#leaderboard > div:nth-child(3){
       border-bottom: 1px solid #efefef;
       height: 60px !important;
       line-height: 60px !important;
       font-weight: bold;
       font-size: 18px;
    }

    div#leaderboard div.number
    {
        width: 8%;
        text-align: center;
        background: #f5f5f5;
    }

    div#leaderboard div.belt
    {
        width: 15%;
    }

    div#leaderboard div.user
    {
        width: 35%;
        padding-left: 10%
    }

    div#leaderboard div.score
    {
        width: 40%;
        text-align: right;
    }

    div#leaderboard div.green
    {   
        background-image: url('../images/g.png');
        background-repeat: no-repeat;
        background-position: center center;
    }

    div#leaderboard div.black
    {   
        background-image: url('../images/b.png');
        background-repeat: no-repeat;
        background-position: center center;
    }

    div#leaderboard div.blue
    {   
        background-image: url('../images/bl.png');
        background-repeat: no-repeat;
        background-position: center center;
    }

    div#leaderboard div.yellow
    {
        background-image: url('../images/y.png');
        background-repeat: no-repeat;
        background-position: center center;
    }


p {margin: 0 0 20px;}
p{font-size: 16px; line-height: 27px;}
p + p {margin-bottom: 20px;}
h4 {font-size: 22px; line-height: 28px;}

div p:last-child {margin-bottom: 40px;}

.desc-row {
display:block;
border-bottom: 1px solid #dddddd;
width: 100%;
overflow: hidden;
border: 1px solid #dddddd;
border-bottom: none;
padding: 10px;
}
.desc-row:last-child {border-bottom: 1px solid #ddd; margin-bottom: 30px;}
.desc-icon {display: block; width: 25px; float: left;}
.desc-icon img{max-width: 100%;}
.desc-title {width: 75%; float: left; display: block; margin-left: 5px;}
.top-desc {display: block; height: 31px;}
.desc-title {line-height: 25px; height: 25px; font-weight: bold; margin-bottom: 4px;}
.desc-desc {}

.belt thead th:first-child{width: 25%;}
.belt thead th:nth-child(2){width: 37.5%;}
.belt thead th:last-child{width: 37.5%;}

.belt tbody tr td:first-child {width: 25%;}
.belt tbody tr td:nth-child(2) {width: 37.5%;}
.belt tbody tr td:last-child {width: 37.5%;}

.belt table td {float: none;}

.table-responsive > .table > thead > tr > th {
  white-space: normal;
}


.competition-banner img{max-width: 100%; min-width: 100%;}
.competition-banner a {display: block;}

.comic {display: block; overflow: hidden;}
.comic-box {display: block; float: left; width: 50%;}
.comic-box img{display: block; max-width: 100%;}

#slider .slides, #carousel .slides {padding: 0;}

#carousel img, #slider img {max-width: 100%;}

#carousel li {margin-right: 5px;}
#carousel img {display: block; opacity: .5; cursor: pointer;}
#carousel img:hover {opacity: 1;}
#carousel .flex-active-slide img {opacity: 1; cursor: default;}


.createjs ::-webkit-input-placeholder {
   color: #5f8a63;
}

.createjs :-moz-placeholder { /* Firefox 18- */
   color: #5f8a63;  
}

.createjs ::-moz-placeholder {  /* Firefox 19+ */
   color: #5f8a63;  
}

.createjs :-ms-input-placeholder {  
   color: #5f8a63;  
}

.createjs *:focus {
    outline: 0;
}

.createjs input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
}

.createjs input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(29, 155, 42, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
}

#back-symbol, .back-symbol{
    cursor: pointer;
}
.list-group a{
    -webkit-transition: opacity 150ms ease-in-out;
    transition: opacity 150ms ease-in-out;
}
.list-group a:hover{
    opacity: 0.7;
}

#portrait-mode{
    display: none;
    transition: display 150ms ease-in-out;
    -webkit-transition: display 150ms ease-in-out;
}

#storyline-stage{
    margin: 0 auto;
}

@media screen and (min-width: 768px){
    #storyline-stage{
        max-width: 100%;
    }
}

.fp-btn.btn{
    width: 98%;
    font-size: 1.6em;
    color: white;
    margin-bottom:10px;
    height: 70px;
    background-repeat: no-repeat;
    background-size: auto 80%;
    background-position: 5%;
}

.fp-btn.btn.pink{
    background-color: rgb(255, 96, 146);
    background-image: url(../images/playlist.svg);
}
.fp-btn.btn.purple{
    background-color: #A18AC0;
    background-image: url(../images/kursplan.svg);
}

.no-padding{
    padding: 0;
}

.popup{
    position: absolute;
    color: white;
    padding: 20px 40px;
    text-align: left;
    z-index: 2;
    max-width: 700px;
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.26);
    display: none;
}

.popup .row{
    display: table;
    table-layout: fixed;
}

.popup .cell{
    display: table-cell;
    vertical-align: middle;
    float: none;
}

.popup .close{
    position:absolute;
    top: 10px;
    right: 15px;
}

.popup .hide-check p{
    font-size: 12px;
    line-height: 1;
    color: #000;
    opacity: 0.4;
    text-shadow: none;
}

.popup .next{
    background: white;
    border-radius: 50%;
    margin: 0 auto;
    height: 75px;
    text-align: center;
    font-size: 3em;
    padding-top: 15px;
    cursor: pointer;
}

.popup.bottom{
    margin-top: 25px;
}

.popup.bottom.right{
    margin-left: 50px;
}

.popup.bottom.left{
    margin-left: 50px;
    right: 0;
}

.popup.bottom:after, .popup.bottom:before {
	bottom: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.popup.bottom.right:after, .popup.bottom:before {
    left: 15%;
}

.popup.bottom.left:after, .popup.bottom:before {
    right: 15%;
}
.popup.bottom:after {
	border-color: rgba(0, 0, 0, 0);
	border-width: 30px;
	margin-left: -30px;
}
.popup.bottom:before {
	border-width: 35px;
	margin-left: -30px;
}

.popup.pink{background-color: rgb(255, 96, 146);}
.popup.pink .next{color:rgb(255, 96, 146);}
.popup.pink.bottom:after{border-bottom-color: rgb(255, 96, 146);}

.popup.purple{background-color: #A18AC0;}
.popup.purple .next{color:#A18AC0;}
.popup.purple.bottom:after{border-bottom-color:#A18AC0;}

.popup.blue{background-color: #6DC2CF;}
.popup.blue .next{color:#6DC2CF;}
.popup.blue.bottom:after{border-bottom-color:#6DC2CF;}

.logo-top .popup.bottom.right{
    margin-top: 50px;
}

.intro-video{
    margin-bottom: 20px;
}

.video-wrapper {
    display: none;
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.video-wrapper .popup.bottom.right{
    margin-top: 175px;
    margin-left: 175px;
}

.intro-video .show-video, .intro-video .hide-video{
    display: none;
    cursor: pointer;
}
.progress-done{
  display:block;
  background: #b0cc46;
  height: 100%;
  width:40%;
  border-radius:5px;
}
.courses-step-progress{
  display: block;
  width: 100%;
  background: rgba(255,255,255,.3);
  height:6px;
  border-radius:5px;
  margin-bottom:10px;
}

table .courses-step-progress{
  background: rgba(0,0,0,.15);
  width:85%;
  float:left;
  margin-top:7px;
  margin-bottom: 0;
}table .percentage-amount{
  width:15%;
  text-align: right;
  float:right;
}
 .green-bg{
  padding:20px 20px 10px 20px;
  display: block;
  background: #b0cc46;
  overflow: hidden;
  max-width:1200px;
  margin-bottom: 30px;
  border-radius: 5px; 
}

.col-30-days{
  color: #fff;
}

.div-table{
  display: table;
}

.cell{
  display:table-cell;
  vertical-align: middle;
  height:40px;
  width: 40px;
}

/*.cell img{
  padding-right:5px;
}*/

/*.cell {padding-right:5px;
  }*/

.col-30-days img{
  max-width:40px;
}

.no-large{
  display: inline-block;
  font-size: 32px;
  font-weight: bold;
  line-height: 1;
}