@font-face {
    font-family: "sansRoundedBold";
    src: local('sansRoundedBold'), url("../fonts/sansRoundedBold.otf") format('opentype');
}

body {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-weight: 300;
    background-color: #2c3e9c;
    color: #fff;
    padding: 0;
    margin: 0;
    font-size: 15px;
    /*min-width: 450px;*/
    }
    
a:link{color:#fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .2);}
a:hover{color:#ff5d5d; border-color: rgba(255, 93, 93, .5);}
a:visited{color:#fff}
a:visited:hover{color:#ff5d5d}
a:focus{outline:none}


html, body {height: 100%;}

.mainpage-levels {
    margin: 72px 100px 70px 53px;
    min-height: 68%;
    }
    
.mainpage-levels a {border: none;}

.mainpage-levels h2{margin-bottom: 26px; font-size: 22px; font-weight: 300;}

.levels-item {
    width: auto;
    display: inline-block;
    margin: -5px 22px 8px -10px;
    font-size: 80px;
    font-weight: 100;
    padding: 5px 8px;
    }
.levels-item:hover {color: #adf5ff;}

.levels-item-0 {
    color: #cd9cff;
    width: auto;
    display: inline-block;
    margin: -5px 18px 8px -10px;
    font-size: 68px;
    font-weight: 100;
    padding: 5px 8px;
    }
.levels-item-0:hover {color: #adf5ff;}

.levels-item-2-0 {
    color: #ff95d2;
    width: auto;
    display: inline-block;
    margin: -5px 22px 8px -10px;
    font-size: 72px;
    font-weight: 100;
    padding: 5px 8px;
    }
.levels-item-2-0:hover {color: #adf5ff;}

#grad-1{color: #68d277;} #grad-1:hover{color: #adf5ff;}
#grad-2{color: #6cd376;} #grad-2:hover{color: #adf5ff;}
#grad-3{color: #79d875;} #grad-3:hover{color: #adf5ff;}
#grad-4{color: #88df73;} #grad-4:hover{color: #adf5ff;}
#grad-5{color: #99e672;} #grad-5:hover{color: #adf5ff;}
#grad-6{color: #abee6f;} #grad-6:hover{color: #adf5ff;}
#grad-7{color: #bdf56d;} #grad-7:hover{color: #adf5ff;}
#grad-8{color: #cef96b;} #grad-8:hover{color: #adf5ff;}
#grad-9{color: #dff96a;} #grad-9:hover{color: #adf5ff;}
#grad-10{color: #edf968;} #grad-10:hover{color: #adf5ff;}
#grad-11{color: #f6f767;} #grad-11:hover{color: #adf5ff;}
#grad-12{color: #fceb66;} #grad-12:hover{color: #adf5ff;}
#grad-13{color: #ffdd65;} #grad-13:hover{color: #adf5ff;}
#grad-14{color: #ffca65;} #grad-14:hover{color: #adf5ff;}
#grad-15{color: #ffb965;} #grad-15:hover{color: #adf5ff;}
#grad-16{color: #ffa265;} #grad-16:hover{color: #adf5ff;}
#grad-17{color: #ff9065;} #grad-17:hover{color: #adf5ff;}
#grad-18{color: #ff7f65;} #grad-18:hover{color: #adf5ff;}
#grad-19{color: #ff7165;} #grad-19:hover{color: #adf5ff;}
#grad-20{color: #ff6965;} #grad-20:hover{color: #adf5ff;}
#ted-level{color: #e63833; font-family: Arial Black, sans-serif; font-weight: 600; letter-spacing: -.06em;}
#ted-level-book img{height: 150px; margin-bottom: -40px; border: 1px solid rgba(0,0,0,0);}
#ted-level-book{color: #e63833; /*font-family: sans-serif;*/}
#ted-level:hover, #ted-level-book:hover, #ted-level-book:hover img{color: #adf5ff; border-color: #adf5ff;}


.announce {margin: 14px 0 0 50px;}

.mainpage-footer {padding: 0 0 10px 54px; font-size: 14px;}



.header {width: 100%; border-bottom: 1px solid rgba(255, 255, 255, .5); padding-top: 4px;}

.logo {display: block; font-family: "sansRoundedBold"; font-size: 60px; line-height: 60px; letter-spacing: 0.03em; margin: 15px 32px 20px 51px;}
.logo a{border-bottom: 1px solid rgba(255, 255, 255, .2);}
.logo a:hover{border-color: rgba(255, 93, 93, .8);}

.logo-small {display: none;}

.easylink {
    display: inline-block;
    margin: 10px 24px 0 8px;
    }
.easylink a{border: none; min-width: 174px; margin: -10px -16px -5px -8px; padding: 10px 16px 5px 8px;}
.easylogo-hover{margin-left: -87px;}
.easylink a:hover img.easylogo, .easylink a img.easylogo-hover{opacity: 0;}
.easylink a img.easylogo, .easylink a:hover img.easylogo-hover{opacity: 1;}


.test-page {min-height: 100%;}

.test-lang {
    display: inline-block;
    border-bottom: 1px dashed rgba(255, 255, 255, .4);
    font-size: 18px;
    margin: 27px 16px 0 42px;
    cursor: pointer;
    }
.test-lang:hover {color: #ff5d5d; border-color: rgba(255, 93, 93, .8);}


.test-level {
    display: inline-block;
    font-size: 18px;
    margin: 19px 16px 0 12px;
    padding: 0 9px 0 9px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, .5);
    text-align: center;
    }
.test-level:hover {color: #ff5d5d; border-color: rgba(255, 93, 93, .8);}


.test-trainer {
    padding: 48px 60px 0 0;
    height: 100%;
    }

.test-column-left {
    width: 43%;
    float: left;
}

.test-column-right {
    width: 57%;
    float: left;
    margin-bottom: 120px;
}

.test-word {
    font-size: 38px;
    line-height: 1.2em;
    font-weight: 400;
    margin: 0 70px 10px 96px;
    }

.test-transcription {
    font-size: 22px;
    font-weight: 400;
    margin: 0 0 0 96px;;
    }

.test-answer-button {
    font-size: 24px;
    width: 92%;
    padding: 12px 36px 20px 28px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .3);
    margin: -3px 0 34px 0;
    cursor: pointer;
    }

.test-answer-button:hover {
    background-color: #3849a2;
    }

.test-answer-button .button-number {
    font-size: 12px;
    line-height: 0px;
    position: relative;
    margin-left: 100%;
    top: 6px; left: 18px;
    opacity: .5;
    }

.progress-bar{
    width: 0px;
    height: 1px;
    background-color: rgba(255, 255, 255, .8);
    margin-top: -1px;
    } 
	
.test-footer {
    z-index: 1;
    display: block;
    position: fixed;
    top: 100%;
    background-color: #2c3e9c;
    margin-top: -100px;
    width: 100%;
    min-height: 100px;
    border-top: 1px solid rgba(255, 255, 255, .5);
    }

.test-previous-answer {
    margin: 6px 0 36px 0;
    }

#state, .progress-bar {
    -webkit-transition: all .3s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all .3s ease-in-out; /** Firefox **/
    -o-transition: all .3s ease-in-out; /** Opera **/
    }
    

.test-right-answer {
    font-size: 22px;
    margin: 7px 0 0 0;
    }

.test-yes-no {
    font-size: 42px;
    padding: 0 32px 0 28px;
    margin: 0;
    }
    
.test-score {font-size: 36px; margin: 0 12px 0 24px;}
.test-score-previous {font-size: 15px; margin-right: 15px; padding-top: 5px;}


@media only screen and (max-width: 992px) {
    .logo {margin: 15px 32px 20px 34px;}
    .test-word {margin: 0 70px 10px 34px;}
}

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

.logo {display: none}
.logo-small {display: block; font-family: "sansRoundedBold"; font-size: 30px; line-height: 36px; margin: 4px 18px 7px 18px;}
.logo-small a{border: none;}

.test-lang {
    font-size: 16px;
    margin: 9px 16px 0 42px;
    }
.test-lang:hover {color: #ff5d5d; border-color: rgba(255, 93, 93, .8);}


.test-level {
    font-size: 16px;
    margin: 9px 16px 7px 12px;
    padding: 2px 9px 2px 9px;
    }
.test-level:hover {color: #ff5d5d; border-color: rgba(255, 93, 93, .8);}

.test-trainer {
    padding: 16px 30px 0 0;
    }

.test-column-left {
    width: 100%;
    float: none;
}

.test-column-right {
    width: 100%;
    float: none;
    padding-left: 18px;
    margin-top: 26px;
    margin-bottom: 60px;
}

.test-word {
    font-size: 32px;
    margin: 0 30px 8px 18px;
    }

.test-transcription {
    font-size: 16px;
    margin: 0 0 10px 18px;
    }

.test-answer-button {
    font-size: 20px;
    width: 86%;
    padding: 10px 18px 16px 16px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .3);
    margin: -3px 0 22px -3px;
    cursor: pointer;
    }

.test-answer-button:hover {
    background-color: #2c3e9c;
    }

.test-answer-button .button-number {display: none;}


.test-previous-answer {
    margin: 6px 0 36px 0;
    }

.test-right-answer {
    font-size: 14px;
    margin-top: 2px;
    }

.test-yes-no {
    font-size: 24px;
    padding: 0 18px 0 12px;
    margin: 0;
    }
    
.test-score {font-size: 24px; margin: 0 12px 0 18px;}
.test-score-previous {font-size: 14px; margin-right: 15px; padding-top: 5px;}

.test-footer {
    margin-top: -46px;
    min-height: 46px;
    }


.mainpage-levels {
    margin: 25px 30px 30px 18px;
    }
    
.mainpage-levels h2{margin-bottom: 10px; font-size: 18px;}

.levels-item {
    margin: -5px 10px 7px -10px;
    font-size: 56px;
    padding: 5px 10px;
    }
.levels-item:hover {color: #adf5ff;}

.levels-item-0{
    margin: -5px 9px 7px -10px;
    font-size: 50px;
    padding: 5px 7px;
    }

.levels-item-2-0 {
    margin: -5px 11px 7px -10px;
    font-size: 52px;
    padding: 5px 7px;
    }

#ted-level-book img{height: 90px; margin-bottom: -27px; border: 1px solid rgba(0,0,0,0);}

.announce {margin: 14px 30px 30px 18px;}

.easylink {margin: 2px 24px 10px 8px;}
.easylogo-hover{margin-left: -50px;}
.easylink a img {width: 50px;}

.mainpage-footer {padding: 0 30px 10px 18px; font-size: 12px;}
}