/*  RESET  */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td
{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content: ' ';content:none;}
:focus{outline:0;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing:0;}
html{font-size:100%;}
body{font-size:62.5%;}
a{text-decoration:none;}
*, *:before, *:after {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

/*  BODY GENERAL  */
html{overflow-y: scroll;}
body{position:relative;background:#4a4a4a;font-family:sans-serif;color:#e9eaea;cursor:default;font-size:16px;line-height:16px;}
a{color:#277381;}
p{margin-bottom:15px;text-align:justify;font-size:14px;line-height:20px;}
th,td{text-align:left;padding:10px 15px;}
img{width:100%;}
#welcome, #quiz, #results, #footer{display:none;-webkit-transition:.4s ease 0s;transition:.4s ease 0s;}

/*  GRID  */
.container{width:100%;max-width:800px;margin:0 auto;padding:0 10px;}
.row{width:100%;margin:15px 0;}
.row:after,.container:after{content:"";clear:both;display:table;}
.left{width:50%;float:left;padding-right:5px;}
.right{width:50%;float:right;padding-left:5px;}
.top, .bottom{width:100%;}
.grid-33{width:33%;float:left;}
.grid-50{width:50%;float:left;}
.resp-grid{width:100%;float:left;}
.inactive{display:none;}
.error{text-align:right;color:#e9eaea;font-size:12px;font-weight:700;margin:15px 0;display:none;}

/*  BUTTON  */
.btn,.btn:visited {width:100%;font-weight:700;font-size:18px;display:inline-block;padding:9px 15px;text-align:center;line-height:1.4;text-decoration:none;white-space: nowrap;cursor:pointer;box-sizing:border-box;}
.btn-primary,.btn-primary:visited {color:#e9eaea;border:none;background:#277381;}
.btn-primary:focus,.btn-primary:hover {background:#3c818d;}

/*  INPUT  */
input[type=text]{width:100%;display:block;border:3px solid #277381;border-radius:0px;box-sizing:border-box;padding:9px 15px;margin-bottom:15px;font-size:18px;font-weight:700;height:43px;color:#e9eaea;background:#4a4a4a;}
input[type=text]:focus {}
#nicknameInput{text-align:center;}
.input-text::-webkit-input-placeholder{color:#e9eaea;}
.input-text:focus::-webkit-input-placeholder {color:transparent;}
.input-text::-moz-placeholder{color:#e9eaea;}
.input-text:focus::-moz-placeholder{color:transparent;}
.input-text:-ms-input-placeholder{color:#e9eaea;}
.input-text:focus:-ms-input-placeholder{color:transparent;}
.input-text:-moz-placeholder{color:#e9eaea;}
.input-text:focus:-moz-placeholder{color:transparent;}
select{width: 100%;padding: 7.5px 15px;margin-bottom: 15px;background: #4a4a4a;color: #e9eaea;border: 3px solid #277381; font-size: 18px;font-weight: 700;}
#select-text{display: none;}

/*  HEADER  */
#header{z-index:10;margin:0;background:#525b5b;display: none;}
#header .container{padding:0;}
.logo-grid{height:50px;position:relative;}
.logo img{width:200px;padding:0 10px;position:absolute;top:50%;left:50%;-ms-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.title-row{text-align:center;background:#525b5b;padding:0 10px;}
#title{line-height:25px;color:#e9eaea;font-size:14px;font-weight:700;text-transform:uppercase;}
#nickname{color: #277381;text-transform:none;}

/* IFrame */
#welcome-img-grid{position: relative;padding-bottom: 50.53%;padding-top: 30px;height: 0;overflow: auto;}
iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

/*  KPI ROW  */
#kpi-row{margin:15px 0 20px 0;display: none; opacity: 0;}
.circle-grid{width:65px;height:65px;margin:auto;position:relative;}
.circle-grid svg{width:65px;height:65px;}
.kpi-circle::after{line-height:65px;color:#e9eaea;font-weight:700;position:absolute;display:block;top:0;left:50%;-ms-transform:translate(-50%,0);-webkit-transform:translate(-50%,0);transform:translate(-50%,0);content:attr(data-pct)"%";}
circle{stroke-width:4.5px;r:25;cx:32.5;cy:32.5;stroke-dasharray:156.08;-ms-transform:rotate(-90deg);-webkit-transform:rotate(-90deg);transform:rotate(-90deg);transform-origin:center;fill:transparent;}
circle.bar-container{stroke:#525b5b;stroke-dashoffset:0}
circle.bar{stroke:#277381;stroke-dashoffset:156.08;-webkit-transition:1s ease .2s;transition:1s ease .2s;}
.tag-grid{text-align:center;padding:10px 0 0 0;}
.tag-text{color:#e9eaea;font-size:12px;font-weight:700;text-transform:uppercase;}

/*  TIMELINE  */
#timeline-row{display: none;opacity: 0;}
#timeline{width:1%;border-top:4px solid #277381;margin:5px auto;-webkit-transition:.8s ease 0s;transition:.8s ease 0s;}
.cell{text-align:center;color:#e9eaea;font-size:14px;font-weight:700;text-transform:uppercase;}

/*  ICONS  */
#quiz-icons-grid{text-align:center;margin-bottom:15px;}
.icon-grid{width:100%;min-height: 200px;border:1px solid #277381;;margin:0 auto 10px;position:relative;}
#quiz-icons-grid img{max-width:100%;}
#quiz-icons-grid span{color:#838383;font-size:12px;font-weight:700;text-transform:uppercase;}

/*  ANSWERS  */
.answer{background:#277381;color:#e9eaea;}
.answer:hover{background:#3c818d;cursor:pointer;}
.answer p{margin:0;}
.answer-letter{width:15%;float:left;color:#e9eaea;font-size:30px;font-weight:700;line-height:33px;text-align:center;margin:10px 0;}
.answer-text{width:85%;float:left;padding:10px;}

/*   FOOTER   */
#quiz-footer{margin: 30px 0;}
#quiz-footer span{float: right;font-size: 24px;color: #e9eaea;cursor: pointer;}
#quiz-footer span:hover{color: #277381;}

#footer{width: 100%;background: #fff;margin-top: 75px;display: none;opacity: 0;display:none;}
#footer img{width: auto;height: 100px;display: block;margin: 0 auto;}
.footer-logo-grid{padding: 25px 0;}

/*  RESULTS  */
#final-point-grid{color:#e9eaea;font-size:18px;font-weight:700;line-height:37px;border-bottom:3px solid #277381;border-radius:0px;padding:0 15px;margin: 0 0 15px;}
#final-result{float:right;}
.privacy-text{display:none;font-size:10px;margin-bottom:10px;}
.terms-checkbox{position: relative;top:3px;}

/*  RANKING  */
#ranking-title{text-align:center;color:#e9eaea;font-size:18px;font-weight:700;line-height:30px;border-radius:0px;margin: 25px 3px 0;;background:#525b5b;}
.table{width:100%;border:none!important;}
.table th, .table td{border: 3px solid #4a4a4a;}
.table th{color:#e9eaea;font-size:14px;line-height:18px;background:#277381;text-transform:uppercase;}
.table td{background:#525b5b;}
.form-label{color:#838383;font-size:14px;font-weight:700;text-transform:uppercase;}
#ranking-form{margin-top:15px;}

/*  RESPONSIVE  */
@media screen and (min-width: 600px) {
  p{font-size: 18px;}

  /*  GRID  */
  .resp-grid{width:50%;}
  .resp-grid-left{padding-right:7.5px;}
  .resp-grid-right{padding-left:7.5px;}

  /*  HEADER  */
  #logo img{left:0%;-ms-transform:translate(0,-50%);-webkit-transform:translate(0,-50%);transform:translate(0,-50%);}
  .title-row{background:transparent;text-align:right;}
  #title{line-height:50px;color:#e9eaea;}

  #timeline-row{margin: 40px auto;}
}