[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak{
    display:none !important
}
body{
    padding:20px
}
.big-contain{
    width:500px;
    margin:0 auto
}
.instructions{
    position:fixed;
    background-color:white;
    z-index:100;
    top:0;
    bottom:0;
    left:0;
    right:0;
    padding-bottom:30px;
    text-align:center;
    
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: -o-flex;
	display: flex;

	/* Direction defaults to 'row', so not really necessary to specify */
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	flex-direction: column;

    justify-content:space-around;
}
.instructions img{
    width:300px;
    margin:0 auto
}
.instructions button.btn.btn-primary{
    width:100px;
    margin:0 auto;
    margin-top:0
}
.margin-top{
    margin-top:20px !important
}
.container-outer{
    max-width:400px;
    margin:auto;
    padding:20px 35px
}
.container-inner{
    position:relative
}
.circle{
    border-radius:50%;
    width:80%;
    height:0;
    padding:0;
    padding-bottom:80%;
    text-align:center;
    margin:auto;
    background-size:cover;
    background-position:center
}
.circle .resultCircle{
    padding-top:8%;
    width:40%;
    margin:auto
}
.circle h3{
    margin-top:10px;
    width:80%;
    margin:auto
}
.circle.grey{
    background-color:#ebeef0
}
.abs{
    position:absolute;
    top:0;
    margin:3% 2%;
    width:94%;
    padding:5px
}
.abs div{
    opacity:0;
    transition:opacity .3s
}
.abs div.showing{
    opacity:1
}
.col img{
    width:75%;
    margin:auto
}
.row h1,.row p{
    width:100%
}
.gray-subtext{
    color:#787c82;
    font-size:11px
}
.footer{
    width:40%;
    min-width:150px;
    margin-bottom:30px
}
.down-arrow{
    background-image:url("../img/down-arrow.png");
    background-position:center;
    background-repeat:no-repeat;
    background-size:contain;
    height:60px;
    width:100%;
    margin-top:10px
}
.job-list{
    width:100%;
    color:#231f20;
    font-size:16px;
    margin:5px 0
}
.col-5{
    -webkit-box-flex:0;
    -webkit-flex:0 0 5%;
    -moz-box-flex:0;
    -moz-flex:0 0 5%;
    -ms-flex:0 0 5%;
    flex:0 0 5%;
    max-width:5%
}
.col-30{
    -webkit-box-flex:0;
    -webkit-flex:0 0 30%;
    -moz-box-flex:0;
    -moz-flex:0 0 30%;
    -ms-flex:0 0 30%;
    flex:0 0 30%;
    max-width:30%
}
.button{
    position:relative;
    color:white;
    background-color:#00aeef;
    border:none;
    width:50%;
    text-align:center;
    padding:10px;
    margin:auto;
    text-transform:uppercase;
    letter-spacing:2px;
    border-radius:5px;
    font-size:16px;
    margin-top:15px
}
p{
    margin-top:10px
}
.text-upper{
    text-transform:uppercase
}
img{
    max-width:100%
}
.btn.btn-primary{
    color:white;
    background-color:#00aeef;
    border:none;
    margin-top:30px;
    padding:10px 30px;
    font-size:20px
}
.quiz-content-block{
    max-width:800px;
    width:100%;
    margin:0 auto
}
.top-contain{
    position:relative;
    width:90%;
    margin:auto
}
.top-contain .question-contain .question{
    position:absolute;
    top:4%;
    bottom:4%;
    left:4%;
    right:4%;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    background-size:cover;
    background-position:center;
    opacity:0;
    transition:opacity .3s
}
.top-contain .question-contain .question.showing{
    opacity:1
}
.results{
    position:relative
}
.results .results-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:50px;
    left:20px;
    right:20px;
    bottom:50px
}
.results .results-inner img{
    padding:0;
    width:60%
}
.results .results-inner p{
    margin:0
}
.quiz-finish{
    margin-bottom:30px
}