.base{
    background-color:#cdd6d9;
}

.home-image-link {
    margin-top:3rem;
}
.home-image-link:hover {
    text-decoration: none !important;
}
.home-image-link h3 {
    margin-bottom:1rem;
    color:white;
    text-align: center;
}
.home-image-link img{
    max-width: 200px;
    width:80%;
    display: block;
    margin:0 auto;
}

.drawerToggleBtn{
    width: 54px;
    height: 46px;
    padding: 0;
    margin: 0;
    background-color: transparent;
    background-image: url('images/drawer_close.png');
    border: none;
}

.folded .drawerToggleBtn{
    background-image: url('images/drawer_open.png');
}
.drawerBackBtn{
    background-image: url('images/drawer_home.png');
}

.drawer-nav {
    padding:0;
}

.drawer li {
    margin-top: 5px;
}

.drawer-nav li a {
    padding:0;
    color: #ffe4a7;
}
.drawer-nav li a:hover,.drawer-nav li a:focus, .drawer-nav li a:active {
    color: #ffe4a7;
    text-decoration: underline;

}
#drawer-score-area div.data {
    padding: 6px;
}

.drawer-heading a{
    color: white;
    text-decoration: none;
}
.drawer-heading h2{
    font-family: "rosewood-std-fill";
    font-style: normal;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 26px;
}

.drawer-footer.locked {
    pointer-events: none; /*prevents this element from blocking other elements, needed especially for IE*/
}

#userinfo{
    position: absolute;
    left: 10px;
    top: 10px;
    color: #fff;
    font-size: 16px;
}

.wppb-error a{
    display: none;
}

.input,
.text-input,
.wppb-form-field input[type=text]{
    background-color: #5f8b71;
    border: none;
    width: 75%;
    margin-bottom: 10px;
}
.wppb-error{
    margin-bottom: 20px;
}

input[type=checkbox]{
    margin-right: 10px;
}

label{
    display: block;
}

.button-primary,
.submit{
    background-color: #5f8b71 !important;
    color: #ffe4a7;
    border: none;
    border-radius: 30px;
    margin-top: 20px;
}

.btn-menu{
    width: 100%;
    background-color: #5f8b71 !important;
    color: #ffe4a7;
    border: none;
}
.btn-orange{
    color: #ffe4a7;
    background-color: #ed6d05 !important;
}
.panel-group .panel{
    border-radius: 30px;
    border: none;
    margin-bottom: 20px;
}

.well-menu{
    background-color: #2c503b;
    padding: 0;
    border-radius: 30px;
    margin-bottom: 20px;
}
.well-menu-inner{
    margin-top: 20px;
    padding: 0 20px 20px 20px;
}
.well-menu-inner ul{
    margin-bottom: 10px;
}
.well-menu h3{
    font-size: 20px;

}
.well-menu a{
    color: #ffe4a7;
}

#hud{
    position:absolute;
    width: 100%;
    text-align: center;
}
#score{
    margin-top: 10px;
    color: #fff;
    font-size: 16px;
}

#modal{
    position:absolute;
	width: 100%;
	height: 100%;
    padding: 40px 40px 56px;
    background-color: rgba(0,0,0,0.6);
    display: none;
    overflow-y: scroll;
}

#modal-container {
    width: 100%;
    height: 100%;
    max-width: 1280px;
    margin: 0 auto;
    border-radius: 20px;
    position: relative;
    display: table;
}

#modal-close-x,
#game-close-x{
   position: absolute;
   top: 20px;
   right: 20px;
   width: 20px;
   height: 20px;
   border: none;
   background-color: transparent;
   background-image: url('images/close.png');
   background-repeat: no-repeat;
   display: inline-block;
   z-index: 10;
}

.btn-test-start{
    background-image: url('images/test_start_sv.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent;
    position:relative;
    width: 342px;
    height: 296px;
    border: none;

    margin-bottom: 20px;
    /*
    max-width: 342px;
    max-heiht: 296px;
    */
}
.btn-test-start-sv{
    background-image: url('images/test_start_sv.png');
}

.btn-test-start:disabled{
    background-image: url('images/test_start_disabled.png');
    opacity: 0.75;
}

/* Confetti */
#confettiWrapper{
    position: absolute;
    width: 100%;
    min-height: 100vh;
    display: none;
}
[class|="confetti"] {
    position: absolute;
}
.red {
    background-color: #ee4d53;
}

.yellow {
    background-color: #f3bb38;
}

.blue {
    background-color: #73cde7;
}

/* Secondary modal - Bootstrap */
.modal-content{
   background-color: #f3bb38;
   color: #fff;
}
.modal-title{
    font-size: 30px;
    text-align: center;
}
.modal-footer,
.modal-header{
    border: none;
}

.bottom-center{
    position: absolute;
    bottom: -20px;
    left: 0px;
    right: 0px;
    width: 100%;
    text-align: center;
    z-index: 5;
}

.centered{
    margin: 0 auto;
}

.content-container{
    padding: 40px;
    display: table-cell;
    vertical-align: middle;
    z-index: 1;
}

.heading-rosewood{
    font-family: "rosewood-std-fill";
    font-style: normal;
    font-weight: 400;
}

.modal-question{
    border: solid #73cde7 5px;
    background-color: #fff;
}
.modal-question-hard{
    border: solid #f3bb38 5px;
    background-color: #fff;
}
.modal-question-time{
    border: solid #000 5px;
    background-color: #000;
    color: #fff;
}
.modal-basic{
    color: #fff;
    background-color: #b3d16b;
}
.modal-chance{
    color: #fff;
    background-color: #c6847c;
    border: dashed #b0756f 5px;
    text-align: center;
}
.modal-tivoli {
    color: #312d2b;
    background-color: #d1f9df;
    border: dashed #ee4d53 5px;
}

.modal-video{
    background-color: #000;
}

.modal-info,
.modal-question-info,
.modal-test,
.modal-game{
    color: #312d2b;
    background-color: #f3edc2;
    border: solid #f8f4c7 5px;
}
.modal-info p,
.modal-question-info p,
.modal-test p,
.modal-start p,
.modal-tivoli p,
.modal-finish p
{
    font-size: 20px;
    line-height: 1.2em;
}

.info-card p{
    margin-bottom: 20px;
}

.start-help{
    margin: 20px auto;
}
.start-help td{
    text-align: left;
    padding: 5px 10px;
    vertical-align: middle;
}

/*
.modal-tivoli{
    color: #fff;
    background-color: #ff41a8;
}
*/
.modal-start,
.modal-finish{
    color: #fff;
    background-color: #de3733 ;
    border: solid #e46d52 5px;
}

.modal-info-image{
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.modal-listmaker{
    background-color: #fef9ce;
    background-image: url('images/bg_muistilistakone.png');
    background-repeat: repeat-x;
    background-position: initial;
    background-size: 6.1%;
}

.modal-bingo{
    color: #fff;
    background-color: #eee7b1;
    background-image: url('images/bg-bingo.png');
    border: solid #75b18e 5px;
    background-position: center center;
    background-size: cover;
    color: #558c69;
}
.no-bg-image{
    background-image: url('images/bg_bingo_light.png');
}

.modal-quiz{
    border: solid #34647f 5px;
    background-color: #000;
    background-image: url('images/bg_quiz.png');
    background-position: center center;
    background-size: cover;
    color: #fff;
}
.modal-truefalse{
    color: #fff;
    background-color: #73cde7;
    background-image: url('images/bg_truefalse.png');
    border: solid #8accc5 5px;
    background-position: center center;
    background-size: cover;
    color: #fff;
}

.modal-truefalse.sv{
    background-image: url('images/bg_truefalse_sv.png');
}

.bgTrue{
    background-color: #b8dedb;
    background-image: none;
}
.bgFalse{
    background-color: #8accc5;
    background-image: none;
}

.btn-true,
.btn-false{
    width: 111px;
    height: 111px;
    background-color: transparent;
    background-image: url('images/btnTrue.png');
    background-repeat: no-repeat;
    border: none;
}
.btn-false{
    background-image: url('images/btnFalse.png');
    margin-left: 40px;
}
.btn-small{
    width: 60px;
    height: 60px;
    background-size: cover;
}
.truefalse-text{
    color: #1d1d1b;
    font-size: 20px;
    line-height: 1.2em;
    text-align: center;
}
.text-light{
    color: #fff;
}

#bingo-table{
    width: 315px;
    height: 315px;
    background-color: #eeb500;
    border-radius: 5px;
    padding: 2px;
    margin: 20px auto;
}

.bingo-score {
    position: absolute;
    text-align:center;
    top:30px;
    font-size:20px;
    left:0;
    right:0;

}
.bingo-row{
    height: 38px;
}
.bingo-cell{
    float: left;
    font-size: 30px;
    line-height: 58px;
    text-align: center;
    width: 58px;
    height: 58px;
    /*border: #eeb500 1px solid;*/
    border-radius: 5px;
    background-color: #eee7b1;
    margin: 2px;
}
.bingo-cell-active{
    color: #fff;
    /* background-color: #ed6e05; */
    background-color: #6fb290;
}
.bingo-cell-deactivated{
    color: #eeb500;
    background-color: #eeb500;
}
.bingo-cell-bingo{
    color: #fff;
    background-color: #6fb290;
}
.bingo-cell-selected{
    border: 3px solid #558c69;
    text-shadow: #558c69 1px 2px 3px;
    color: #fff;
    line-height: 50px;
}
.bingo-question{
    margin: 20px auto;
    font-size: 22px;
    color: #2b2523;
}
.bingo-feedback{
    font-size: 20px;
    color: #2b2523;
    margin-bottom: 20px;
}
.bingo-logo {
    /*left: 50%;*/
    /*transform: translateX(-50%);*/
    position: relative;
}

.quiz-intro{
    font-size: 20px;
    padding: 40px;
    text-align: center;
}

.quizbox-question{
    width: 720px;
    height: 120px;
    margin: 30px auto 10px auto;
    background-image: url('images/quizbox_dark_full_big.png');
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    display: table;
}
.quizbox-question p{
    text-align: center;
    padding: 0 30px;
    font-size: 20px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.quizbox-options{
    width: 760px;
    margin: 0 auto;
}

.quizbox-option{
    width: 351px;
    height: 84px;
    background-color: transparent;
    background-image: url('images/quizbox_dark_half.png');
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    border: none;
    margin-top: 10px;
    padding: 0 30px;
}
.quizbox-option-wrong{
    background-image: url('images/quizbox_orange_half.png');
    color: #000;
}
.quizbox-option-right{
    background-image: url('images/quizbox_green_half.png');
}

.quizbox-tip{
    margin: 20px 0;
    font-size: 20px;
}

.quiz-question-timer{
    color: #6fb390;
    border: #fff 3px solid;
    text-align: center;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    font-size: 30px;
    line-height: 50px;
    position: absolute;
    top: 20px;
    left: 40px;
}

.quiz-lives{
    position: absolute;
    top: 30px;
    left: 140px;
}

.quiz-life{
    float: left;
    margin-right: 5px;
    width: 41px;
    height: 39px;
    background-image: url('images/quiz_life.png');
}
.quiz-score{
    font-size: 40px;
    color: #6fb390;
    position: absolute;
    top: 30px;
    width: 100%;
    left: 0;
    text-align: center;
}
.quiz-amount{
    font-size: 20px;
    color: #6fb390;
    position: absolute;
    top: 80px;
    width: 100%;
    left: 0;
    text-align: center;
}
.quiz-helpers{
    position: absolute;
    top: 30px;
    right: 40px;
}
.quiz-helper{
    background-color: transparent;
    border: none;
    float: left;
    margin-right: 5px;
    width: 57px;
    height: 57px;
}

.quiz-50{
    background-image: url('images/quiz_50.png');
}
.quiz-50.helper-off{
    background-image: url('images/quiz_50_off.png');
}
.quiz-skip{
    background-image: url('images/quiz_skip.png');
}
.quiz-skip.helper-off{
    background-image: url('images/quiz_skip_off.png');
}
.quiz-tip{
    background-image: url('images/quiz_tip.png');
}
.quiz-tip.helper-off{
    background-image: url('images/quiz_tip_off.png');
}


h1{
    font-size: 3rem;
    margin-bottom: 2rem;
    text-align: center;
    text-transform: uppercase;
}

.modal-question .question-heading{
    color: #73cde7;
}
.modal-question-hard .question-heading{
    color: #f3bb38;
}

.question{
    font-size: 1.2rem;
    line-height: 1.2em;
    margin-bottom: 2rem;
}

.btn{
    background-color: #5092a5;
    /* border: solid #fff 5px; */
}

.btn-question-answer {
    background-color: #5092a5;
    min-width: 100%;
    white-space: normal;
    text-align: left;
    text-transform: none;
    margin-bottom: 1rem;
    outline: none;
}
.btn-question-answer-wrong {
    background-color: #b92027 !important;
    opacity:1 !important;
}
.btn-question-answer-right,
.btn-right{
    color: #fff;
    background-color: #6fb290 !important;
    opacity:1 !important;
}

.btn[disabled].btn-wrong,
.btn[disabled].btn-right{
    opacity: 1;
}

.feedback{
    padding: 0 0 20px 20px;
    line-height: 1.2em;
    font-size: 0.8em;
}

.modal-question-hard .btn{
    color: #312d2b;
    background-color: #f3bb38;
}

.btn-wrong,
.modal-question-hard .btn-wrong{
    color: #fff;
    background-color: #b92027;
}

.btn-wrong:hover{
    color: #fff;
}

.answer-feedback{
    padding: 1rem;
}

.question-timer{
    background-color: #3d1211;
    color: #d02029;
    text-align: center;
    width: 200px;
    border-radius: 20px;
    padding: 1.5rem;
    font-size: 2rem;
    position: absolute;
    top: 20px;
    left: 20px;
}

button:focus {outline:0;}

.btn:focus,
.btn:hover,
.btn:active {
    outline: none;
}

#miniGame{
   width: 60%;
   height: auto;
   margin: 0 auto;
}

.tivoli-button{
    margin: 10px;
    width: 20%;
    max-width: 200px;
    height: auto;
}
.tivoli-score{
    color: #312d2b;
    font-size: 20px;
}


/* Hangman */
.modal-hangman{
    color: #fff;
    background-color: #ee4d53;
    border: solid #ee4d53 5px;
}
.hangman-score{
    color: #fff;
    font-size: 20px;
}
.hangman-failure {
    font-size: 24px;
    margin-bottom: 10px;
}
#hangman-image{
   height: 200px;
   width: auto;
   margin: 0 auto;
}

#hang-rights {
    font-size: 40px;
    color:white;
    position: absolute;
    top: 30px;
    width: 100%;
    left: 30px;
}

.hangman-word{
    display: inline-block;
    margin: 40px auto;
}

.hangman-letter{
    font-size: 40px !important;
    font-family: "rosewood-std-fill";
    font-style: normal;
    font-weight: 400;

    text-align: center;
    float: left;
    width: 30px;
    border-bottom: 3px solid #fff;
    margin: 0 2px;

}
.hangman-letter-space{
    border-bottom: none;
}
.hangman-letters,
.hangman-feedback{
    min-height: 100px;
    clear: both;
}
.btn-hangman-letter{
    font-size: 30px;
    font-family: "rosewood-std-fill";
    font-style: normal;
    font-weight: 400;
    margin: 0;
    padding: 0 10px;
    background-color: transparent;
}
.btn-hangman-letter.disabled,
.btn-hangman-letter[disabled]{
    opacity: 0.25;
}

/* Slot Machine */
.modal-slotmachine{
    color: #fff;
    background-color: #2c98cf;
    border: solid #2c98cf 5px;
}

/* Fortune Wheel */
.modal-fortunewheel{
    color: #fff;
    background-color: #7aba75;
    border: solid #7aba75 5px;
}

/* Reaction */
.modal-reaction{
    color: #312d2b;
    background-color: #f4bd22;
    border: solid #f4bd22 5px;
}

/* Diplomi */
.diplomi {
    background-color: #f9d895;
    overflow: visible;
}

.diplomi-document {
    margin-top: 45px;
    margin-bottom: 45px;
    border-radius: 10px;
    padding: 45px 45px 90px 45px;
}

.koululogo_diplomi {
    max-width: 300px;
    min-width: 100px;
    float: right;
    width: 10%;
    margin: 0;
    position: absolute;
    right: 0;
}

.diplomi-document h2 {
    font-size: 24px;
    font-weight: bold;
    margin-top: 25px;
    margin-bottom: 25px;
}

#diplomi-heading{
    color: #333;
    margin-top: 0;
    margin-bottom: 15px;
}

#diplomi-name{
    padding-bottom: 5px;
    border-bottom: 2px dashed #ba2027;
}

.red-divider{
    border-bottom:1px solid #ba2027;
}

.date-area{
    margin-top: 100px;
    margin-bottom: 25px
}

.date-dashed{
    border-bottom:2px dashed #ba2027;
    width: 235px
}

.diplomi-pdf{
    border-radius: 10px;
    background-color: #fff;
    color: #ba2027;
    text-transform: none;
    font-weight: bold;
}

.diplomi-footer-img{
    width:20%;
}

.kopiostologo {
    position: relative;
    bottom: 0;
    left: 25%;
    transform: translateX(-25%);
}

.font-weight-normal{
    font-weight: normal !important;
}

/* QR-peli template */
.btn-blue{
    background: rgb(114,161,204); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(114,161,204,1) 0%, rgba(51,84,150,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(114,161,204,1) 0%,rgba(51,84,150,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(114,161,204,1) 0%,rgba(51,84,150,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#72a1cc', endColorstr='#335496',GradientType=0 ); /* IE6-9 */
}
.btn-blue:hover{
    background: rgb(51,84,150,1); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(51,84,150,1) 0%, rgba(114,161,204,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(51,84,150,1) 0%,rgba(114,161,204,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(51,84,150,1) 0%,rgba(114,161,204,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#72a1cc', endColorstr='#335496',GradientType=0 ); /* IE6-9 */
}

.btn-green{
    background: rgb(121,204,114); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(121,204,114,1) 0%, rgba(61,150,51,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(121,204,114,1) 0%,rgba(61,150,51,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(121,204,114,1) 0%,rgba(61,150,51,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#79cc72', endColorstr='#3d9633',GradientType=0 ); /* IE6-9 */
}

.btn-green:hover{
    background: rgb(61,150,51); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(61,150,51,1) 0%, rgba(121,204,114,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(61,150,51,1) 0%,rgba(121,204,114,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(61,150,51,1) 0%,rgba(121,204,114,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d9633', endColorstr='#79cc72',GradientType=0 ); /* IE6-9 */
}

.qr-template{
    background-color: #f9d895;
    overflow: visible;
}

.qr-template .rounded-corners{
    border-radius: 10px;
}

.qr-template img.alignright { float: right; margin: 0 0 1em 1em; } /* proper wysiwyg img alignment */
.qr-template img.alignleft { float: left; margin: 0 1em 1em 0; }
.qr-template img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.qr-template .alignright { float: right; }
.qr-template .alignleft { float: left; }
.qr-template .aligncenter { display: block; margin-left: auto; margin-right: auto; }

.qr-template .btn{
    min-width: 220px;
    padding: 0.5rem 0 0.5rem 0;
}

.qr-template .btn:hover,
.qr-template .btn:active{
    color: #EEEEEE;
}

.qr-template .btn:visited{
    color: #FFFFFF;
}

.qr-template-document{
    background-color: #fff;
    margin-top: 5rem;
    margin-bottom: 5rem;
    border-radius: 10px;
    padding-bottom: 5rem;
    box-shadow: 0 0 10px #BBB;
}
@media (max-width:768px) {
    .qr-template-document{
        margin-left: 15px;
        margin-right: 15px;
    }
}

.qr-template-document p{
    line-height: 30px;
    margin-bottom: 10px;
    margin-left: 6rem;
    margin-right: 6rem;
}
@media (max-width:992px) {
    .qr-template-document p{
        margin-left: 4rem;
        margin-right: 4rem;
    }
}
@media (max-width:780px) {
    .qr-template-document p{
        margin-left: 2rem;
        margin-right: 2rem;
    }
}

.qr-template-document h1, h2{
    font-size: 22px;
    line-height: 30px;
    margin-top: 4rem;
    margin-bottom: 25px;
}

.qr-template-document h1{
    font-weight: bold;
}

.qr-template-document .koululogo{
    width:150px;
    margin: -68px auto 0 auto;
}

.qr-template-link{
    margin-top: 2rem;
    margin-bottom: 4rem;
}

.qr-template .row{
    margin: 0;
}

.qr-template .print-buttons{
    margin-bottom: 8rem;
}

.qr-template .print-button{
    background-color: #499c9d;
    box-shadow: 0 5px rgba(0,0,0,.15);
    padding-right: 2.5rem;
    line-height: 1.8rem;
    margin-bottom: 2rem;
}

.qr-template .print-icon{
    float: left;
    margin-right: 1.5rem;
    margin-left: 2.5rem;
    position: relative;
}

.qr-template .qrpuzzle{
    margin: 2rem 0 2rem 0;
    max-width: 512px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
@media (max-width:590px) {
    .qr-template .qrpuzzle{
        max-width: 410px;
    }
}
@media (max-width:490px) {
    .qr-template .qrpuzzle{
        max-width: 320px;
    }
}
@media (max-width:380px) {
    .qr-template .qrpuzzle{
        max-width: 260px;
    }
}

.qr-template .qrpuzzle input{
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    background-color: #b4b4ee;
    border-radius: 10px;
    font-size: 50px;
    margin: 0.7rem;
    width: 80px;
    padding: 15px 0 15px 0;
    max-height: 80px;
    text-transform: uppercase;
    border: 0;
}
@media (max-width:590px) {
    .qr-template .qrpuzzle input{
        font-size: 40px;
        margin: 0.5rem;
        width: 65px;
        max-height: 65px;
    }
}
@media (max-width:490px) {
    .qr-template .qrpuzzle input{
        font-size: 30px;
        margin: 0.4rem;
        width: 50px;
        max-height: 50px;
    }
}
@media (max-width:380px) {
    .qr-template .qrpuzzle input{
        font-size: 27px;
        margin: 0.3rem;
        width: 42px;
        max-height: 42px;
    }
}

.qr-template .qrpuzzle input:focus{
    outline-width: 0; /*remove focus borders*/
}

.qr-template .qrpuzzle input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #ffffff;
    opacity: 1; /* Firefox */
}

.qr-template .qrpuzzle input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #ffffff;
}

.qr-template .qrpuzzle input::-ms-input-placeholder { /* Microsoft Edge */
    color: #ffffff;
}

.qr-template .modal-header .close {
    position: absolute;
    right: 2px;
    top: 2px;
    opacity: 1;
    border-radius: 50%;
    background: #ffffff;
    width: 3rem;
    height: 3rem;
    font-size: 25px;
}

.qr-template .modal-content {
    background-color: #ffffff;
    color: #000000;
}

.qr-template .modal-body h1 {
    margin-top: 0;
    margin-bottom: 1rem;
    text-transform: none;
    font-weight: bold;
}

.qr-template .modal {
    text-align: center;
    padding: 0!important;
}

.qr-template .modal .img-responsive {
    display: inline-block;
}

.qr-template .modal:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
}

.qr-template .modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}


/* Muistilista */
.muistilista{
    background-color: #f9d895;
    overflow: visible;
}

.c-hahmo-vinkki{
    position: relative;
    left: 100%;
    transform: translateX(-90%);
    width: 35%;
}

.muistilista-footer{
    background-color: #BC1F29;
    position: relative;
    height: 300px;
}

.muistilista-footer-logo {
    max-width: 230px;
    width: 30%;
}

.muistilista-document{
    background-color: #fff;
    margin-top: 45px;
    margin-bottom: 45px;
    border-radius: 10px;
    padding: 45px 45px 90px 45px;
    box-shadow: 0 0 10px #BBB;
}

.muistilista-document h2,
.muistilista-document h3,
.muistilista-document h4
{
    font-size: 24px;
    font-weight: bold;
    margin-top: 25px;
    margin-bottom: 25px;
}

.muistilista-document h3{
    font-size: 20px;
}
.muistilista-document h4{
    font-size: 20px;
}

.muistilista-document p{
    line-height: 30px;
    margin-bottom: 10px;
}

.muistilista-document strong {
    font-weight: bold;
}

.muistilista-document em,
.muistilista-document i{
    font-style: italic;
}

.muistilista-document>.well {
    background-color: rgba(249, 216, 149, 0.6);
    border: 0;
    -webkit-box-shadow: initial;
    box-shadow: initial;
    background-image: initial;
    background-repeat: repeat-x;
    border-color: initial;
}

.muistilista ol{
    margin: 0;
    margin-right: 45px;
    padding: 0;
    list-style-type: none;
    /*display: table;*/
    padding-right: 13px;
}

.muistilista ul{
    display: table;
    margin-right: 45px;
}

.muistilista ul>li{
    display: table-row;
    line-height: 23px;
}

.muistilista ul>li::before {
    display: table-cell;
    text-align: right;
}

.muistilista ol>li{
    counter-increment: step-counter 1;
    margin-top: 35px;
    margin-bottom: 35px;
    line-height: 20px;
    text-indent: -3.4em;
    margin-left: 3.4em;
}

.muistilista ol>li::before {
    content: counter(step-counter);
    margin-right: 13px;
    font-size: 20px;
    background-color: #ba2027;
    color: white;
    font-weight: bold;
    padding: 8px 15px;
    border-radius: 50%;
}

.muistilista-document a,
.muistilista-document a:hover,
.muistilista-document a:visited,
.muistilista-document a:active{
    color: #BC1F29;
    text-decoration: none;
}

.muistilista-document ul>li:before{
    content: "•";
    color: #ba2027;
    font-size: 25px;
    line-height: 25px;
    text-align: left;
    display: inline-block;
    padding-right: 0.2em;
}
.muistilista-document ul{
    padding-left: 2em;
    padding-bottom: 1em;
}
.muistilista-document ul>li{
    display: list-item;
    margin-left: 0em;
    text-indent: -1em;
    line-height: 25px;
}

.muistilista-button{
    margin-bottom: 45px;
}

.koululogo{
    width:17%;
    margin: -80px auto 0 auto;
    max-width: 300px;
    min-width: 100px;
    margin-bottom: 45px;
}

.red-heading{
    color: #ba2027;
}

.brown-heading{
    color: #d79c5c;
}

#muistilista-printfooter{
    display: none;
}

@media print {
    @page {

    }

    a[href]:after {
        content: none;
    }
    .red-heading {
        color: #ba2027 !important;
    }
    .muistilista-document ul>li:before{
        color: #ba2027 !important;
    }
    /*.muistilista-button, .c-hahmo, .muistilista-footer, .diplomi-pdf{*/
        /*display: none !important;*/
    /*}*/

    .muistilista-document
    {
        display: block !important;
    }
    .muistilista-document ~ *
    {
        display: none !important;
    }
    .koululogo {
        margin: 0 auto 0 auto !important;
    }
    .muistilista-document {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }
    #muistilista-printfooter{
        display: block !important;
        position: fixed;
        bottom: 0;
        right: calc(50% - 100px);
        z-index: 5;
    }
    #muistilista-printfooter>img{
        width: 200px;
    }
}

.introtextheading{
    font-size: 45px;
    margin-top: 10%;
}

.muistilistakone h2{
    margin-top: 12%;
    margin-bottom: 20px;
    font-size: 35px;
}

.muistilistakone p{
    line-height: 23px;
}

.muistilistakone label{
    font-size: 18px;
}

.muistilistakone hr{
    border-top: 4px solid #FCDAA2;
    margin-bottom: 6px;
    margin-top: 11px;
}

.muistilistakone input[type=checkbox].custom-checkbox {
    position:absolute;
    z-index:-1000;
    left:-1000px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height:1px;
    width:1px;
    margin:-1px;
    padding:0;
    border:0;
}

.muistilistakone input[type=checkbox].custom-checkbox + label.custom-label,
.muistilistakone input[type=checkbox].custom-checkbox + label.custom-label.clr {
    padding-left:40px;
    height:33px;
    display:inline-block;
    line-height:33px;
    background-repeat:no-repeat;
    background-position: 0 0;
    /*vertical-align:middle;*/
    cursor:pointer;
    margin-top: 0;
    margin-right: 20px;
    font-weight: 300;
}

.muistilistakone input[type=checkbox].custom-checkbox:checked + label.custom-label,
.muistilistakone input[type=checkbox].custom-checkbox + label.custom-label.chk {
    background-position: 0 -33px;
}

.muistilistakone label.custom-label {
    background-image:url(images/checkbox.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.listamaker_one,
.listamaker_two,
.listamaker_three,
.listamaker_four,
.listamaker_five{
    display: none;
}


.jatka{
    margin-top: 20px;
}

.c-hahmo{
    position: relative;
    transform: translateY(50%);
    margin-top: -250px;
    left: 45px;
    z-index: 10;
}

@media (max-width:1250px) {
    .c-hahmo {
        width: 20%;
    }
}

/* Add this */
.addthis_share_toolbox_game .at-icon-wrapper,
.addthis_share_toolbox_game .at-icon,
#addthis-homepage .at-icon-wrapper,
#addthis-homepage .at-icon {
    width:26px !important;
    height:26px !important;
}

/* Flexbox aligner  */
.Aligner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.Aligner-item {
    /*max-width: 50%;*/
}

.Aligner-item--top {
    align-self: flex-start;
}

.Aligner-item--bottom {
    align-self: flex-end;
}
/* 404 sivu */

.template-404 {
    overflow:initial;
background-color:#f9d895;
    }
.template-404 p {
    font-family: Lato, sans-serif;
    font-size:18px;
    margin-bottom:5px;
}
.template-404 li {
    font-size:18px;
}
.template-404 h1 {
    color:#ba2027;
}
.template-404 h2 {
    font-size:18px;
    font-weight: bold;
    margin-bottom:20px;
}
.template-404 ul {
    max-width:350px;
    margin:0 auto;
}
.link-404 {
    margin:80px auto;
    display: block;
    color:black;
    font-weight:bold;
    font-size:18px;
    max-width:350px;
    width:90%;
}

.container-404 {
    background-color:white;
    margin-top:38px;
    border-radius:10px;
}
.img-404 {
    margin: -20px auto 40px auto;
    max-width: 150px;
    width:90%;
}
.img-404-person {
    margin: 40px auto 60px;
    max-width: 350px;
    width:90%;
}

/* Spin animation */
.spin-animation {
    position: absolute;
    visibility: hidden;
    width: 362px;
    height: 318px;
    background-image: url('images/test_start_spin-min.png');
    left: 0;
    right: 0;
    top: 80px;
    margin: 0 auto;
    -webkit-background-size: 362px 318px;
    -moz-background-size: 362px 318px;
    -ms-background-size: 362px 318px;
    -o-background-size: 362px 318px;
    background-size: 362px 318px;
    bottom: 0;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    -ms-opacity: 1;
    -o-opacity: 1;
    opacity: 1;
    background-repeat: no-repeat;
}

.animate-spin {
    visibility: visible;
    -webkit-transform: scale(9, 9) rotate(720deg);
    -moz-transform: scale(9, 9) rotate(720deg);
    -ms-transform: scale(9, 9) rotate(720deg);
    -o-transform: scale(9, 9) rotate(720deg);
    transform: scale(9, 9) rotate(720deg);
    display: initial !important;
    -webkit-transition: all 4s ease;
    -moz-transition: all 4s ease;
    -ms-transition: all 4s ease;
    -o-transition: all 4s ease;
    transition: all 4s ease;
}
/* Uusi etusivu */
.etusivu-headline {
    line-height:1.7rem;
    position:absolute;
    bottom:70px;
    width:100%;
    max-width:1070px;
    left:0;
    right:0;
    margin:0 auto;
    font-size:22px;
    color:white;

    text-shadow: 0px 0px 4px rgba(99, 99, 99, 0.4);
}
#etusivu-info-navi {
    position: absolute;
    top:20px;
    right:70px;
}
#etusivu-info-navi ul{

}
#etusivu-info-navi li{
    display: inline;
}
#etusivu-info-navi li a{
    color:#0299f2;
    padding-left:10px;
    font-size:20px;
}
.etusivu-video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.etusivu-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.toinenaste-hero {
    height:100%;
    overflow: hidden;
    padding:0;
    width:100%;
}
.toinenaste-hero-image {
    width:100%;
    height:100%;
}
.toinenaste-kyltti {
    position:absolute;
    left:50vw;
    top:40vh;
    width:20%;
    max-width:400px;
}
.etusivu-full {
    width:100%;
}
.etusivu-container {
    padding:0;
}
.padding-0 {
    padding:0;
}
.etusivu-row {
    margin-top:-60px;
    margin-left:-5px;
    margin-right:-5px;
    padding:0;
}
.etusivu-row-2 {
    margin-left:-5px;
    margin-right:-5px;
}
.etusivu-col {
    padding:0 5px;
}
.etusivu-kopiraitti-logo {
    display: block;
    max-width: 240px;
    margin: -25px auto 0;
    width:90%;
}
.etusivu-kopiraitti-hahmo {
    position: relative;
    top: -62px;
    display: block;
    max-width: 120px;
    margin: 0px auto;
}
.uusi-etusivu-linkki h2 {
    padding:20px 0;
    background:white;
    color:#3F3F3F;
    font-size:18px;
    font-weight: bold;
    text-align: center;
    text-decoration:none;
}
.uusi-etusivu-linkki:hover {
    text-decoration:none !important;

}
.uusi-etusivu-footer a {
    color:white;
}
.uusi-etusivu-footer  {
    margin-top:100px;
}
.footer-links-mobile {
    display:none;
}
.img-sanasto {
    width:100%
}


@media (max-width:768px) {
    .footer-links {
        display:none;
    }
    .footer-links-mobile {
        display:block;
        margin-top:20px !important;
        margin-bottom:20px !important;
    }
    .footer-links-mobile li{
        text-align: center;
        padding-bottom:10px;
    }

    .padding-0 {
        padding-left:15px;
        padding-right:15px;

    }
    .etusivu-col {
        padding:initial;
    }
    .etusivu-container {
        padding-left:15px;
        padding-right:15px;
    }
    .etusivu-row-2 {
        margin-left:-15px;
        margin-right:-15px;
    }
}
.footer-links {
    padding-top:3rem;
    padding-bottom:3rem;
    margin:0 auto;
    width:100%;
}
.footer-links li {
    width:20%;
    float:left;
    text-align: center;
}
.footer-links li a {
    color:white;

}
.footer-links a:hover, .footer-links-mobile a:hover {
    text-decoration:none;
}

.fts-jal-fb-header {
    display:none;
}
.fts-jal-fb-group-display {
    overflow: hidden !important;
}
.facebook-overflow {
    overflow-y:scroll;
    height:315px;
}
.fts-powered-by-text-popup a.fts-powered-by-text {
    display: none !important;
    visibility: hidden !important;
}



.shakeshake {
    -webkit-animation: shake 4.0s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
    -moz-animation: shake 4.0s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
    animation: shake 4.0s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.link-to-kopiraitti, .link-to-kopiraitti-sv, .link-to-lukuklaani, .link-to-lukuklaani-sv {
    cursor:pointer;
}

@-webkit-keyframes shake {
    0% { transform: translate3d(0, 0, 0); }
    80% { transform: translate3d(0, 0, 0); }
    89% { transform: translate3d(-10px, 0, 0); }
    91% { transform: translate3d(10px, 0, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*
 * Mobile optimization
 */

.image-responsive {
    max-width: 100%;
}
.bingo-lower {
    text-align: center;
    margin-top: 10px;
    min-height: 140px;
}
.truefalse-heading {
    margin: 40px 0;
    font-size: 40px;
}

@media (max-width:460px) {
    #modal {
        position: absolute;
        padding: 4px;
        max-width: 100vw;
        z-index: 2000;
    }

    #modal-container {
        position: absolute;
        top: 0px;
        left: 0;
        right: 5px;
        bottom: 15px;
        width: 100%;
        height: 100%;
        border-radius: 10px;
        padding: 0;
        overflow-y: scroll;
    }

    #modal-close-x, #game-close-x {
        width: 12px;
        height: 12px;
        background-size: 12px;
        top: 14px;
        right: 10px;
    }

    h1 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .bottom-center {
        bottom: 0px;
    }
    .content-container {
        padding: 15px;
        overflow: scroll;
        max-height: 90vh;
        padding-bottom: 40px;
    }

    .btn {
        font-size: 14px;
        border-radius: 12px;
    }

    .btn-question-answer {
        font-size: 12px;
        line-height: 12px;
        padding: 4px 8px;
        margin-bottom: 0.8rem;
    }

    .bingo-score {
        top: 5px;
        font-size: 14px;
    }

    #bingo-table {
        width: 136px;
        height: 136px;
        margin: 5px auto;

    }

    .bingo-row {
        height: 24px;
    }

    .bingo-cell {
        width: 22px;
        height: 22px;
        font-size: 14px;
        line-height: 24px;
    }

    .bingo-cell-selected {
        line-height: 16px;
    }

    .bingo-question {
        font-size: 16px;
        margin: 15px auto;
    }

    .bingo-lower {
        min-height: 40px;
        margin-top: 5px;
    }

    .bingo-feedback {
        font-size: 12px;
        line-height: 12px;
        margin-bottom: 15px;
    }

    .modal-truefalse {
        border-width: 2px;
    }

    #question-area {
        font-size: 14px;
    }

    .modal-quiz {
        width: 100%;
    }

    .quiz-question-timer {
        font-size: 16px;
        line-height: 24px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border-width: 2px;
    }
    .quiz-lives {
        top: 25px;
        left: 76px;
    }
    .quiz-lives .quiz-life {
        width: 20px;
        height: 19px;
        background-size: 100%;
    }
    .quiz-score {
        top: 1px;
        left: -45px;
        font-size: 16px;
    }

    .quiz-amount {
        top: 1px;
        left: 70px;
        font-size: 16px;
    }

    .question-area {
        font-size: 12px;
    }
    .quiz-intro {
        font-size: 14px;
        padding: 0px;
        padding-top: 40px;

    }
    .quiz-intro h1 {
        font-size: 16px;
    }

    .quiz-helpers {
        top: 20px;
        right: 30px;
    }
    .quiz-helpers .quiz-helper {
        width: 24px;
        height: 24px;
        background-size: contain;
        background-repeat: no-repeat;
    }

    #question-area {
        padding-top:0;
    }

    .quizbox-question {
        width: 100%;
        background-size: contain;
        max-width: 414px;
        height: 70px;
        margin: 30px auto 1px auto;
    }
    .quizbox-question p {
        font-size: 11px;
        padding: 0px 12px;
    }
    #answer-options {
        width: 100%;
    }
    .quizbox-option {
        width: 253px;
        padding: 0px 12px;
        height: 58px;
        background-size: contain;
        font-size: 11px;
        margin-top: 5px;
    }
    .quizbox-tip {
        font-size: 12px;
        min-height: 0 !important;
    }

    /* Totta vai tarua? */
    .btn-false {
        margin-left: 15px;
    }
    .truefalse-text{
        margin-left: 0;
    }
    .truefalse-score{
        left: 0;
    }
    .truefalse-text div img.img-responsive {
        max-width: 50%;
    }
    .truefalse-heading {
        margin: 30px 0;
        font-size: 40px;
    }
    .truefalse-text {
        font-size: 14px;
    }
    .truefalse-heading {
        font-size: 18px;
    }
    .truefalse-text p {
        margin-bottom: 30px !important;
    }

    /* Hangman */
    #hang-rights {
        font-size: 16px;
        top: 1px;
    }
    .hangman-word {
        margin: 5px auto;
    }
    .hangman-letter{
        line-height: 1em;
        font-size: 22px !important;
        width: 15px;
    }
    .hangman-failure {
        font-size: 20px;
        margin-bottom: 5px;
    }

    /* Loppupeli */

    .modal-info p, .modal-question-info p, .modal-test p, .modal-start p, .modal-tivoli p, .modal-finish p {
        font-size: 12px;
    }
    .info-card p {
        margin-bottom: 6px;
    }

    .start-help td {
        font-size: 12px;
    }
    .start-help img {
        height: 20px;
        width: 20px;
    }
}

@media (max-width:768px) {
    .drawer-controls {
        padding:10px 0 0 0;
    }
    .etusivu-row{
        margin-top:0;
        padding:initial;
        margin-left:-15px;
        margin-right:-15px;
    }
    .etusivu-headline {
        bottom:0px;
        font-size:16px;
        line-height:1.3rem;
        background:#81a442;
        padding:5px 10px;
    }

    .footer-copy {
        padding-left:10px;
        padding-right:10px;
    }

    #etusivu-info-navi {
        top:10px;
        right:30px;
    }
    #etusivu-info-navi a {
        top:10px;
        right:30px;
    }
    .diplomi-document h2 {
        font-size: 12px;
        margin-top: 0;
    }
    .diplomi-document h1 {
        font-size: 30px;
    }
    .diplomi-document {
        padding: 0;
    }
    .introtextheading{
        font-size: 32px;
        margin-bottom: 10px;
    }
    .muistilistakone h2{
        margin-top: 8%;
        margin-bottom: 10px;
        font-size: 22px;
    }
    .muistilistakone label {
        font-size: 17px;
    }
    .muistilistakone hr {
        border-top: 2px solid #FCDAA2;
        margin-bottom: 1px;
        margin-top: 6px;
    }
    .muistilista-document h1{
        font-size: 25px;
    }
    .muistilista-document h2,
    .muistilista-document h3,
    .muistilista-document h4{
        font-size: 15px;
        margin-top: 5px;
    }

    .muistilista-document p{
        font-size: 15px;
        line-height: 24px;
    }
    .muistilista-document {
        padding: 45px 20px 20px 20px;
    }
    .muistilista-footer {
        height: 180px;
    }
    .muistilista ol {
        padding-right: 0;
        margin-right: 0;
    }
    .muistilista ol>li {
        margin-right: 5px;
    }
    label[for=checkbox27], label[for=checkbox28] {
        line-height: inherit !important;
    }
}
@media (max-width:1170px) {
    .facebook-overflow {
        height:260px;
    }
}

/* Kopiraitti template styles */
.nosto-boksi,
.esimerkki{
    padding: 1.5em;
    background-color: hsl(42, 89%, 75%, 0.3);
}
.nosto-boksi{
    font-style: italic;
    padding: 1.5em 1em 1.5em 4em;
    background-color: #BDE6F2;
    background-image: url('images/kopiraitti/bulb.png');
    background-repeat: no-repeat;
    background-position: 20px center;
    line-height: 1.5em;
}
.muistilista-document>.well .nosto-boksi{
    padding: 1em 0 0 0;
    background-color: transparent;
    background-image: none;
    line-height: 1.5em;
    text-indent: 0;
}