html {
    position: relative;
    min-height: 100%;
}
body {
    /* Margin bottom by footer height */

}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    background-color: #f5f5f5;
}

body > .container {
}
.container .text-muted {
    margin: 20px 0;
}

.footer > .container {
    padding-right: 15px;
    padding-left: 15px;
}
.btn-tr{padding: 6px!important;}
.btn.focus, .btn:focus, .btn:hover{
    outline: none;
}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus{
    outline: none;
}
code {
    font-size: 80%;
}
.box-lang{text-align: center; position: relative; margin-bottom: 50px; background-repeat: no-repeat; background-position: 50px 0; background-size: contain; border-radius: 5px; padding: 15px; min-height: 300px; display: flex; align-items: center; justify-content: center;}
.box-lang:before{content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; transition: all .2s ease-in-out .2s; background-color: rgba(255,255,255,0.4); z-index: 1}
.box-lang:hover:before{background-color: rgba(255,255,255,0)}
.box-lang.act:before{background-color: rgba(255,255,255,0);}

.box-lang h2 a{color: #fff; text-decoration: underline;}

.btn-start{border-radius: 100px; z-index: 2; padding: 25px 15px; border: 5px solid transparent; background-color: #EFEFEF;  font-size: 25px; font-weight: 700; color: #676F7A;}

.english{background-color: #4097D3;}
.english .btn-start{border-color: #EF5369}

.idiom{background-color: #4B62AC}
.idiom .btn-start{border-color: #FCB813}

.travel{background-color: #FCB813}
.travel .btn-start{border-color: #47B549}

.deutsch{background-color: #EF5369}
.deutsch .btn-start{border-color: #4097D3}

.italiano{background-color: #47B549}
.italiano .btn-start{border-color: #EF5369}

.francais{background-color: #4097D3}
.francais .btn-start{border-color: #FCB813}

.espanol{background-color: #FCB813}
.espanol .btn-start{border-color: #47B549}


.mb-lg{margin-bottom: 100px}
.mb-md{margin-bottom: 50px}
.mb-sm{margin-bottom: 25px}
.mb-xs{margin-bottom: 10px}
textarea.summernote{height: 250px}
.acenter{text-align: center}
.main-list ul li span{padding: 5px 10px; border-radius: 15px; display: inline-block; border: 1px solid transparent}
.main-list ul li.active span{background-color: rgba(255,120,0,0.3)}
.main-list ul li.error span{background-color: rgba(255,0,0,0.2); color: #ff0000}

hr{margin-top: 10px; margin-bottom: 10px;}
.lead{line-height: 1;}

.panel.box-lang{display: block}
.color-white{color: #fff;}
.tt{opacity: 0.8; color: #fff;}
.t-b{font-weight: 700}
.well{border: none;}
.btn-tr{border: none; background-color: transparent; border-radius: 50%; opacity: 0.8}
.btn-tr:hover{opacity: 1}
.form-box{background-color: #F1F1F1; border-radius: 6px; padding: 15px;}
.form-box .btn{background-color: #ef5369; color: #fff; border: none}
.blo{position: relative; z-index: 9; margin-left: 100px;}
.btn{white-space: normal}


.main-list ul li.gresit span{border: 1px solid #ff0000; background-color: #ff0000; color: #fff; box-shadow:  0 0 4px rgba(255, 0, 0, 0.7)}
.main-list ul li.corect span{border: 1px solid #07c840; background-color: #07c840; color: #fff; box-shadow:  0 0 4px rgba(7, 200, 0, 0.7)}
#after_text{padding: 20px; font-size: 20px; color:  #fff;  }


@media (max-width: 768px) {
    .btn-start{font-size: 16px; padding: 8px 10px; border-width: 2px;}
    .blo{position: relative; z-index: 9; margin-left: 0px; width: 100%}
    .box-lang{background-image: none!important; flex-wrap: wrap}
    .br-b br{display: none}
    .box-lang h2{font-size: 18px; line-height: 1.2em!important;}
    .form-box h3{font-size: 18px;}
}