@font-face {
    font-family: "Proxima Nova";
    src: url("../fonts/ProximaNova-Regular.otf") format("opentype");
}

@font-face {
    font-family: "Proxima Nova Bold";
    src: url("../fonts/proxima_nova_bold.otf") format("opentype");
}

@font-face {
    font-family: "Uni Sans Regular";
    src: url("../fonts/uni_sans_regular.otf") format("opentype");
}

@font-face {
    font-family: Uni Sans Heavy;
    src: url("../fonts/uni_sans_heavy.ttf");
}

@font-face {
    font-family: Uni Sans Thin;
    src: url("../fonts/uni_sans_thin.ttf");
}

@font-face {
    font-family: Anivers Regular;
    src: url("../fonts/Anivers-Regular.ttf");
}

@font-face {
    font-family: Anivers Bold;
    src: url("../fonts/ANIVERS-BOLD.ttf");
    font-weight: bold;
}

.clearfix {clear: both}

/* header */
header {text-align: center}
header .logo {width:90px;margin: 15px 0}
header .heading {background: #404041;color:#fff;text-transform: uppercase;padding: 15px 0 10px 0}
header .heading h3 {margin: 0;padding: 0;font-family: "Uni Sans Heavy", sans-serif;font-size: 24px}
header a {display: inline-block;width: 90px;height: 50px;background: url('../images/logo.svg') no-repeat center center;margin: 15px 0}

/* main container */
#main_container {color: #404041;font-family: "Anivers Regular", sans-serif;min-height: 500px}

#main_container button {font-family: "Uni Sans Heavy", sans-serif;font-size: 26px;color: #fff;background: #ff1d25;border: none;padding: 10px 25px 5px 25px;border-radius: 10px;margin-top: 20px;outline: none;-webkit-transition: all 500ms;-moz-transition: all 500ms;-ms-transition: all 500ms;-o-transition: all 500ms;transition: all 500ms;}
#main_container button:hover {background: #302F2F}
#main_container button span {display: inline-block;width: 20px;height: 20px;background: url("../images/proceed.png");}

/* login section */
#main_container #login {background: url("../images/login_bg.png") no-repeat bottom right;padding: 40px 0}

#main_container #login .login_heading {text-align: center;margin-top: 60px}
#main_container #login .login_heading object {width: 600px}

#main_container #login #login_form {text-align: center;padding-top: 40px}
#main_container #login #login_form input {border: 2px solid #ff1d25;border-radius: 10px;padding: 5px 10px;display: inline-block;width: 300px;font-size: 21px;margin-bottom: 5px;color: #ff1d25}
#main_container #login #login_form input:focus {outline: none}

/* myths section */
#myths {display: none;background: url("../images/myth_bg_pattern.png");padding: 40px 0 0 0}

#myths .ns {display: none}

#myths .myth {text-align: center;margin-bottom: 60px;display: none}
#myths .myth h2.myth_heading {background: url("../images/myth_heading_bg.svg");width:500px;height:60px;text-align: center;line-height:2;font-family: "Uni Sans Heavy", sans-serif;color: #ec1c24;display: inline-block;font-size:30px;margin-top: 20px}

#myths .myth .right_or_wrong {}
#myths .myth .right_or_wrong a.right_button:link,
#myths .myth .right_or_wrong a.right_button:visited {font-size: 24px;color: #009245;border: 2px solid #009245;border-radius: 15px;display: inline-block;padding: 10px 40px 5px 40px;font-family: "Uni Sans Heavy", sans-serif;text-decoration: none;-webkit-transition: all 500ms;-moz-transition: all 500ms;-ms-transition: all 500ms;-o-transition: all 500ms;transition: all 500ms;}
#myths .myth .right_or_wrong a.right_button:hover {background: #009245;color: #fff}
#myths .myth .right_or_wrong a.wrong_button:link,
#myths .myth .right_or_wrong a.wrong_button:visited {font-size: 24px;color: #c1272d;border: 2px solid #c1272d;border-radius: 15px;display: inline-block;padding: 10px 40px 5px 40px;font-family: "Uni Sans Heavy", sans-serif;text-decoration: none;-webkit-transition: all 500ms;-moz-transition: all 500ms;-ms-transition: all 500ms;-o-transition: all 500ms;transition: all 500ms;}
#myths .myth .right_or_wrong a.wrong_button:hover {background: #c1272d;color: #fff}
#myths .myth .right_or_wrong span {display: inline-block;font-size: 24px;font-family: "Uni Sans Heavy", sans-serif;padding: 0 15px}
#myths .myth .right_or_wrong .the_myth {color: #ec1c24;font-family: "Anivers Bold", sans-serif;font-size: 48px;margin: 80px 0}

#myths .myth .the_answer {display: none}
#myths .myth .the_answer p {font-size: 18px;margin-bottom: 60px}
#myths .myth .the_answer h2 {font-family: "Uni Sans Regular", sans-serif;text-transform: uppercase;font-size: 36px;margin-top: 60px;margin-bottom: 20px;display: none}
#myths .myth .the_answer h2 strong {font-family: "Uni Sans Heavy", sans-serif}
#myths .myth .the_answer h2.right_answer {color: #009245}
#myths .myth .the_answer h2.wrong_answer {color: #c1272d}

/* niche */
#myths #myth_1 {background: url("../images/bg/myth_1.png") no-repeat bottom left}
#myths #myth_1 .the_answer, #myths #myth_1 .right_or_wrong {text-align: left;padding-left: 315px}

#myths #myth_2 {background: url("../images/bg/myth_2.png") no-repeat bottom left}
#myths #myth_2 .the_answer, #myths #myth_2 .right_or_wrong {padding-left: 315px;text-align: left}

#myths #myth_3 {background: url("../images/bg/myth_3.png") no-repeat bottom left}
#myths #myth_3 .the_answer, #myths #myth_3 .right_or_wrong {padding-left: 315px;text-align: left}

#myths #myth_4 {background: url("../images/bg/myth_4.png") no-repeat bottom left}
#myths #myth_4 .the_answer,
#myths #myth_4 .right_or_wrong {padding-left: 315px;text-align: left}

#myths #myth_5 {background: url("../images/bg/myth_5.png") no-repeat bottom left}
#myths #myth_5 .the_answer,
#myths #myth_5 .right_or_wrong {padding-left: 550px;text-align: left}

#myths #myth_6 {background: url("../images/bg/myth_6.png") no-repeat bottom left}
#myths #myth_6 .the_answer,
#myths #myth_6 .right_or_wrong {padding-left: 315px;text-align: left}

#myths #myth_7 {background: url("../images/bg/myth_7.png") no-repeat bottom left}
#myths #myth_7 .the_answer,
#myths #myth_7 .right_or_wrong {padding-left: 200px;text-align: left}

#myths #myth_8 {background: url("../images/bg/myth_8.png") no-repeat bottom left}
#myths #myth_8 .the_answer,
#myths #myth_8 .right_or_wrong {padding-left: 315px;text-align: left}

#myths #myth_9 {background: url("../images/bg/myth_9.png") no-repeat bottom left}
#myths #myth_9 .the_answer,
#myths #myth_9 .right_or_wrong {padding-left: 315px;text-align: left}

#myths #myth_10 {background: url("../images/bg/myth_11.png") no-repeat bottom left}
#myths #myth_10 .the_answer,
#myths #myth_10 .right_or_wrong {padding-left: 315px;text-align: left}

#myths #myth_11 {background: url("../images/bg/myth_10.png") no-repeat bottom left}
#myths #myth_11 .the_answer,
#myths #myth_11 .right_or_wrong {padding-left: 315px;text-align: left}

#myths #myth_12 {background: url("../images/bg/myth_12.png") no-repeat bottom left}
#myths #myth_12 .the_answer,
#myths #myth_12 .right_or_wrong {padding-left: 315px;text-align: left}

#myths #myth_13 {background: url("../images/bg/myth_13.png") no-repeat bottom left}
#myths #myth_13 .the_answer,
#myths #myth_13 .right_or_wrong {padding-left: 315px;text-align: left}

#myths #myth_14 {background: url("../images/bg/myth_14.png") no-repeat bottom left}
#myths #myth_14 .the_answer,
#myths #myth_14 .right_or_wrong {padding-left: 315px;text-align: left}


/* result */
#result {padding: 80px 0;text-align: center;display: none;background: url("../images/myth_bg_pattern.png");}

#result h2 {font-size: 48px;font-family: "Uni Sans Heavy", sans-serif;color: #c1272d;margin-top: 0;margin-bottom: 60px;display: none}
#result h2 span {font-family: "Uni Sans Regular", sans-serif}

#result h3 {font-size: 30px;font-family: "Uni Sans Regular", sans-serif;color: #333333;text-transform: uppercase;margin: 0;padding: 0}
#result h3.rank span {font-family: "Uni Sans Heavy", sans-serif}
#result h3.rank {margin-bottom: 60px}

#result a:link,
#result a:visited {border: 2px solid #c1272d;padding: 13px 20px 10px 20px;font-size: 18px;font-family: "Uni Sans Heavy", sans-serif;border-radius: 10px;color: #c1272d;display: inline-block;text-decoration: none;-webkit-transition: all 500ms;-moz-transition: all 500ms;-ms-transition: all 500ms;-o-transition: all 500ms;transition: all 500ms;margin-bottom: 15px}
#result a span {width: 24px;height: 20px;background: url("../images/download.svg");display: inline-block;margin-bottom: -5px;margin-right: 5px;-webkit-transition: all 500ms;-moz-transition: all 500ms;-ms-transition: all 500ms;-o-transition: all 500ms;transition: all 500ms;}
#result a:hover {background: #c1272d;color: #fff}
#result a:hover span {background: url("../images/download_hover.svg")}

#result .success_meter {text-align: left;margin-bottom: 60px;display: inline-block}

#result .success_meter .visual_bar {width: 750px;height:55px;background: url("../images/visual_bar.svg");display: inline-block;text-align: left;padding-left: 20px;float: left}
#result .success_meter .visual_bar > div {width: 235px;display: inline-block;margin-top: 6px}
#result .success_meter .visual_bar .progress {height: 16px;margin: 0;width: 0%;
    -webkit-transition: all 1000ms;
    -moz-transition: all 1000ms;
    -ms-transition: all 1000ms;
    -o-transition: all 1000ms;
    transition: all 1000ms;}
#result .success_meter .visual_bar .bar_1 .progress {background: #c1272d;border-radius: 10px 0 0 10px}
#result .success_meter .visual_bar .bar_2 .progress {background: #f15a24;border-radius: 0}
#result .success_meter .visual_bar .bar_3 .progress {background: #009245;border-radius: 0px 10px 10px 0px}

#result .success_meter .indicator {display: inline-block;width: 67px;height: 40px;font-family: "Uni Sans Regular", sans-serif;font-size: 18px;color: #fff;text-align: center;padding-top:9px;padding-left: 11px;float: left;margin-top: -7px;margin-left: -10px}
#result .success_meter .expert {background: url("../images/indicator_green.svg")}
#result .success_meter .intermediate {background: url("../images/indicator_orange.svg")}
#result .success_meter .beginner {background: url("../images/indicator_red.svg")}

#result #repeat {background: url("../images/repeat.svg");width: 40px;height: 40px;display: inline-block;padding: 0 !important;border: none !important;
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -ms-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;}
#result #repeat:hover {background: url("../images/repeat_hover.svg")}


#certificate {width: 800px;height:565px;background: url("../images/certificate.png");display: none}
#certificate h1 {padding-top: 260px;font-size: 56px}
#certificate h5 {padding-top: 140px}

/* progress meter */
#progress_meter {background: #cccccc;text-align: center;padding: 10px 0;font-size: 18px;font-family: "Uni Sans Heavy", sans-serif;display: none}
#progress_meter span {display: inline-block;border-radius: 50%;background: #a4a4a4;width: 30px;height: 30px;line-height: 1.8;color: #fff;-webkit-transition: all 500ms;-moz-transition: all 500ms;-ms-transition: all 500ms;-o-transition: all 500ms;transition: all 500ms;}
#progress_meter span.selected {background: #fff;color: #ff1d25;-webkit-transition: all 500ms;-moz-transition: all 500ms;-ms-transition: all 500ms;-o-transition: all 500ms;transition: all 500ms;}
#progress_meter span.right_answer {background: #009245;color: #fff;-webkit-transition: all 500ms;-moz-transition: all 500ms;-ms-transition: all 500ms;-o-transition: all 500ms;transition: all 500ms;}
#progress_meter span.wrong_answer {background: #c1272d;color: #fff;-webkit-transition: all 500ms;-moz-transition: all 500ms;-ms-transition: all 500ms;-o-transition: all 500ms;transition: all 500ms;}



/* footer */
footer {background: #302F2F;padding: 30px 0;color:#fff;text-transform: uppercase;font-family: "Anivers Regular", sans-serif;font-size:16px}
footer .footer-meta {border-top: 5px solid #494949;padding:10px 0 0 0;margin-top: 15px}

footer a {color:#fff;text-decoration: none}
footer a:hover {color:#ce2327}
footer a.fb{background: url(../images/fb.svg);width:25px;height:25px;display: inline-block;margin-bottom:-7px;background-size: contain;}
footer a.in{background: url(../images/in.svg);width:26px;height:26px;display: inline-block;margin-bottom:-7px;background-size: contain;}
footer a.yt{background: url(../images/yt.svg);width:25px;height:25px;display: inline-block;margin-bottom:-7px;background-size: contain;}


/* viewports */
@media only screen and (max-width: 420px) {
    #main_container {min-height: auto !important;}
    #main_container #login .login_heading object {width: 100%}

    #myths .myth h2.myth_heading {width: 100% !important;height: 45px !important;font-size: 24px !important;margin-top: 20px !important;background-position: center center !important;background-repeat: no-repeat !important;}
    #myths .myth {padding-bottom: 420px;background-position: bottom center !important;}
    #myths .myth .right_or_wrong {padding: 0 !important;text-align: center !important;margin-bottom: 40px}
    #myths .myth .the_answer {padding: 0 !important;text-align: center !important;}
    #myths .myth .right_or_wrong a.right_button,
    #myths .myth .right_or_wrong a.wrong_button {padding: 2px 15px !important;font-size: 21px !important;}
    #myths .myth .right_or_wrong span {font-size: 18px}
    #myths .myth .right_or_wrong .the_myth {margin: 40px 0 !important;font-size: 36px !important;}
    #myths .myth .the_answer h2 {margin-top: 40px !important;}
    #myths .myth .the_answer p {margin-bottom: 20px !important;}
    #myths .myth button.next_question {margin-bottom: 40px}

    #myths #myth_5, #myths #myth_6 {padding-bottom: 300px !important;}
    #myths #myth_9, #myths #myth_10, #myths #myth_11, #myths #myth_12, #myths #myth_13, #myths #myth_14 {padding-bottom: 320px !important;}

    #result {padding: 40px 0 !important;}
    #result h2 {font-size: 36px !important;margin-bottom: 40px !important;}
    #result .success_meter {margin-bottom: 40px !important;}
    #result .success_meter .visual_bar {width: 380px !important;height: 27px !important;padding-left: 10px !important;}
    #result .success_meter .visual_bar > div {float: left;width: 118px !important;margin-top: 3px !important;}
    #result .success_meter .visual_bar .progress {height: 8px}
    #result .success_meter .indicator {display: none !important;}
    #result h3 {font-size: 21px}
    #result h3.rank {margin-bottom: 40px !important;}
    #result a {width: 100%}
    #result a.download_your_certificate {margin-bottom: 5px}

    #progress_meter {padding: 0px 0 5px 0}
    #progress_meter span {width: 20px;height: 20px;font-size: 12px;font-family: "Uni Sans Regular", sans-serif}

    footer p {text-align: center !important;font-size:12px}
    footer .footer-meta {border: none !important;margin: 0 !important;}
}