@import url(http://fonts.googleapis.com/css?family=Titillium+Web:900|Roboto:400,100);body{background-color:#fff;padding:20px}#myQuiz{font-family:'Roboto',sans-serif;font-size:16px;font-weight:400;width:650px;height:650px;position:relative;overflow:hidden;color:#fff;background:#000 url(../images/background.jpg) no-repeat 0px 0px}#myQuiz h1{font-size:2em;margin:0px;font-weight:100;text-transform:uppercase;position:absolute;top:25px;left:36px}#myQuiz h1 span{display:block;font-weight:900;font-family:'Titillium Web',sans-serif;font-size:3.2em;line-height:65px}#myQuiz h2{font-size:3em;margin:0px;font-weight:100}#myQuiz h3{font-size:2.4em;margin:0px;font-weight:100}#myQuiz p{margin:0px 0px 14px 0}#myQuiz .btn{display:inline-block;cursor:pointer;background-color:#c04b01;color:#fff;text-decoration:none;padding:5px 15px;border-radius:6px}#myQuiz .progress{width:550px;position:absolute;top:160px;left:40px}#myQuiz .progress div{position:relative;display:inline-block;width:30px;height:30px;margin-right:30px;border-radius:50%;background-color:rgba(255,255,255,0.2);transition:background-color 1s}#myQuiz .progress div::after{content:'';display:block;position:absolute;top:-60px;left:-15px;width:65px;height:40px;background:url(../images/ring.svg) no-repeat 0px 0px;transition:opacity 1s,top 1s;opacity:0}#myQuiz .progress div.on,#myQuiz .progress div.answered{background-color:#efbe5e}#myQuiz .progress div.correct::after{top:-5px;opacity:1}#myQuiz .intro{position:absolute;top:225px;left:660px;width:550px}#myQuiz .intro p{margin:0px 0px 14px 0}#myQuiz .question{width:550px;position:absolute;top:225px;left:660px}#myQuiz .question .txt{font-size:1.6em;margin:0 0 20px 0}#myQuiz .question .ans{display:inline-block;font-size:1.1em;width:225px;border:2px solid rgba(238,189,102,0.4);border-radius:6px;padding:10px;margin:0 15px 15px 0;position:relative}#myQuiz .question .ans.selected{border-color:#be4b16}#myQuiz .question .ans.correct{border-color:#459a2e}#myQuiz .question .ans::after{content:'';display:block;width:20px;height:20px;background:no-repeat 0px 0px;background-size:20px 20px;position:absolute;top:5px;right:5px}#myQuiz .question .ans.selected::after{background-image:url(../images/icon_incorrect.svg)}#myQuiz .question .ans.correct::after{background-image:url(../images/icon_correct.svg)}#myQuiz .question.unanswered .ans{cursor:pointer}#myQuiz .question.unanswered .ans:hover{background-color:rgba(238,189,102,.2)}#myQuiz .question.answered .ans:hover{cursor:default}#myQuiz .question .ans.image{min-height:60px;padding:0;background-repeat:no-repeat;background-position:0 0}#myQuiz .feedback{color:#efbe5e;margin-top:10px;transition:opacity 1.5s,margin-top 1.5s;visibility:hidden;opacity:0}#myQuiz .feedback .btn{margin-top:5px}#myQuiz .feedback strong{color:#fff}#myQuiz .answered .feedback{visibility:visible;opacity:1;margin-top:10px}#myQuiz .results{position:absolute;top:225px;left:660px;width:550px}#myQuiz .results .share{margin-top:40px}#myQuiz .results .share a.btn{margin-right:20px;padding:9px 15px 8px 42px;background-repeat:no-repeat;background-position:10px 5px;background-size:25px 25px}#myQuiz .results .share a.btn.email{background-color:#f0a121;background-image:url(../images/icon_email.svg)}#myQuiz .results .share a.btn.twitter{background-color:#59adeb;background-image:url(../images/icon_twitter.svg)}#myQuiz .active,#myQuiz .inactive{transition:left 1.5s ease-in-out}#myQuiz .active{left:40px}#myQuiz .intro.inactive,#myQuiz .inactive.answered{left:-1350px}