@keyframes fadein { from { opacity: 0; } to { opacity: 1; }}
@-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; }}
@-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; }}
@-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; }}
@-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; }}
@keyframes colorChange {
    0% {color: : white;}
    50% {color: cornsilk; font-size: 1.1em;} /*70% {color: #fb9797;} 80% {color: #ff6f6f;}*/
    85% {color: #ff3939;} 90% {color: red;}
    100% {color: red; font-size: 1.3em;}
}

/*** FONTS ***/
@font-face {
    font-family:'ProximaNova-S';
    src: url('fonts/ProximaNova-S.eot'); /* IE9 Compat Modes */
    src: url('fonts/ProximaNova-S.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/ProximaNova-S.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/ProximaNova-S.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/ProximaNova-S.otf') format('truetype');
    font-style: normal;
}
@font-face {
    font-family:'ProximaNova-Bold';
    src: url('fonts/ProximaNova-Bold.eot'); /* IE9 Compat Modes */
    src: url('fonts/ProximaNova-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/ProximaNova-Bold.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/ProximaNova-Bold.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/ProximaNova-Bold.otf') format('truetype'),
       url('fonts/ProximaNova-Bold.ttf') format('truetype'); /* Safari, Android, iOS */
    font-style: normal;
}
html {
  height: 100%;
}
body {
    font-size: 14px;
    min-height: 100%;
    font-family: 'ProximaNova-S';
    background-image: url(images/background.png);
    background-repeat: no-repeat;
    -moz-background-repeat: no-repeat;
    -o-background-repeat: no-repeat;
    -ms-background-repeat: no-repeat;
    background-attachment: fixed;
    -moz-background-attachment: fixed;
    -o-background-attachment: fixed;
    -ms-background-attachment: fixed;
    background-position: center;
    -moz-background-position: center;
    -o-background-position: center;
    -ms-background-position: center;
    overflow-x: hidden;
    -o-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0); /*for scale transition*/
}
@-moz-document url-prefix() { /* Mozilla rule fix */
  body{overflow-x: hidden;}
}
[data-ember-action] {    /* iOS rule fix for triggering Ember actions */
    cursor: pointer;
}
div.app-container {height: 100%;}
ul {list-style-type: none;}
input[type="password"] {
    font-family: Verdana,Geneva,sans-serif !important;
    font-weight: 900;
}
input[type="password"]::placeholder { /* Do not group the below statements */
    font-family: 'ProximaNova-Bold' !important;
    font-weight: 400;
}
input[type="password"]::-webkit-input-placeholder /* Chrome/Opera/Safari */ {
    font-family: 'ProximaNova-Bold' !important;
    font-weight: 400;
}
input[type="password"]::-moz-placeholder /* FF 19+ */ {
    font-family: 'ProximaNova-Bold' !important;
    font-weight: 400;
}
input[type="password"]:-ms-input-placeholder /* IE 10+ */ {
    font-family: 'ProximaNova-Bold' !important;
    font-weight: 400;
}
input[type="password"]:-moz-placeholder /* FF 18- */ {
    font-family: 'ProximaNova-Bold' !important;
    font-weight: 400;
}

/* COLORS */
.white-backgr{background-color: white;}
.white{color: white;}
.black{color: black;}
.brown-transp{background-color: rgba(95, 79, 76, 0.87);}
.brown{background-color: #483936;}
.brown-color{color: #483936;}
.back-transp{color: rgba(0, 0, 0, 0.67);}
.black-backgr-transp{background-color: rgba(0, 0, 0, 0.34); box-shadow: 5px 3px 27px -3px black;}
.green-light-backgr{background-color: #4cc87f;}
.green-light{color: #4cc87f;}
.green-light-backgr-transp{background-color: rgba(76, 200, 127, 0.89);}
.green-light-list-item{background-color: rgb(208, 255, 227)!important;}
.green-darker{color: #2cbb63;}
.green-darker-backgr{background-color: #2cbb63;}
.xaki-background{background-color: #5c4a46;}
.xaki{color: #5c4a46;}
.green-lvl{color: #8dbb3a;}
.green-plant{color: #699922;}
.green-plant-background{background-color: #699922;}
.green-material-ligth{color: #8dda39;}
.green-material-ligth-background{background-color: #8dda39;}
.green-bright{color: #35f97d;}
.green-bright-backgr{background-color: #35f97d;}
.blue-light-backgr{background-color: #2bc1fe;}
.blue-sea{background-color: rgba(33, 83, 118, 0.90);}
.blue-darker{color: #0a7682;}
.yellow-backgr{background-color: #fcf708;}
.yellow{color: #fcf708;}
.purple-backgr{background-color: #e240ed;}
.red-backgr{background-color: #ff4d65;}
.red{color: #ff4d65;}

.text-center {text-align: center;}
.text-right {text-align: right;}
.text-left {text-align: left;}
.bold{font-family: 'ProximaNova-Bold';}
.z1 {z-index: 1;}
.z2 {z-index: 2;}
.z3 {z-index: 3;}
.z-topmost {z-index: 999;}
.float-initial{float: initial;}
.float-right{float: right;}
.float-left{float: left;}
.icon-padding{padding: 4px;}
.task-icon-padding{padding: 8px;}
.pointer{cursor: pointer;}
.disable-click{pointer-events: none;}
/*.liquid-container{overflow: inherit;}  override liquiq-fire rule */
.hide{display: none;}

/* LOGIN PAGE */
.wrapper {
    margin-top: 80px;
    margin-bottom: 20px;
}
.form-signin {
    max-width: 420px;
    padding: 30px 38px 66px;
    margin: 0 auto;
    border-radius: 10px;
    border: 1px solid white;
}
.form-signin-heading {
    text-align:center;
    margin-bottom: 30px;
}
.form-control {
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 10px;
}
input[type="text"]:not([id="forgotEmail"]) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
input[type="password"] {
    margin-bottom: 20px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.input-email-margin-bottom{margin-bottom: 1em;}
.login-marg-top{margin-top: 3%;}
.login-marg-top-larger{margin-top: 10%;}

/* REGISTER PAGE */
#contact_form{margin-top: 5%;}

/* INITIAL CAROUSEL PAGER */
.carousel-indicators li{border: 2px solid #699922;}
.carousel-control{width: 9%;}

/* DASHBOARD */
/*#content-column{ padding-left: 0; padding-right: 0; }*/
#welcomeModal .row.carusel-style{margin: 2% auto; width: 62%;}
#welcomeModal img{border-radius: 7px;}

#logout {font-size: 1.3em;}
#logout span{vertical-align: text-bottom;}
/*#logout span{opacity:0; transition:0.5s;}
#logout:hover span{opacity:1;}*/

.column-fill-height{
    padding-bottom: 200px;
    margin-bottom: -200px;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}
#dummyHeight{height: 270px;}
#gradientSide{
    background: rgba(95, 79, 76, 0.87);
    background: -webkit-linear-gradient(rgba(95, 79, 76, 0.87), rgba(95, 79, 76, 0));
    background: -o-linear-gradient(rgba(95, 79, 76, 0.87), rgba(95, 79, 76, 0));
    background: -moz-linear-gradient(rgba(95, 79, 76, 0.87), rgba(95, 79, 76, 0));
    background: linear-gradient(rgba(95, 79, 76, 0.87), rgba(95, 79, 76, 0));
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+,11 CSS styles go here */
    .column-fill-height{height: 120%;padding-bottom: 100px;margin-bottom: -100px;}
    #dummyHeight{height: 200px;}
    #taskModal{height: 111%;}
    #dailyQuizModal{height: 111%;}
}
.marg-bottom-progress{margin-bottom: 6px;}
.zero-padding-left{padding-left: 0!important;}
.smaller-font-size{font-size: 0.9em;}
.small-font-size{font-size: 1.1em;}
.medium-font-size{font-size: 1.6em;}
.bigger-font{font-size: 1.8em;}
.much-bigger-font{font-size: 2.6em;}
.avatar img{background-color: #483936;}
.dash-header-item{
    padding: 1.2em 1.7em;
}
.dash-header-item.selected{
    background-color: rgba(211, 211, 211, 0.55);
}
li.dash-header-item:hover {
    /*transform: scale(1.05);
    transition: transform 0.1s;*/
    cursor: pointer;
    color: #4cc87f;
}
.dash-header-item .dash-points{
    color: #4cc87f;
}
.dash-header-item span{
    font-family: 'ProximaNova-Bold';
    margin: 0 0.3em;
}
.dashboard-help{position: absolute!important;right: 0;}
.dash-header-item span + span{vertical-align: super;}
@media screen and (max-width: 1000px) {
    ul.nav.navbar-nav > li {text-align: center;}
}
.growth-style{margin: 1.1em 1em;}
.background-transp{
    background: rgba(255, 0, 0, 0);
    background: -webkit-linear-gradient(rgba(255, 0, 0, 0),  rgba(255, 255, 255, 0.31));
    background: -o-linear-gradient(rgba(255, 0, 0, 0),  rgba(255, 255, 255, 0.31));
    background: -moz-linear-gradient(rgba(255, 0, 0, 0),  rgba(255, 255, 255, 0.31));
    background: linear-gradient(rgba(255, 0, 0, 0), rgba(255, 255, 255, 0.31));
}
.relative{position: relative;}
.avatar-pic{
    width: 150px; /*px for perfect circle*/
    height: 150px;
}
.avatar-status{
    width: 40px; /*px for perfect circle*/
    height: 50px;
    position: absolute;
    right: 34%;
    top: 0;
}
.avatar-border{
    border-radius: 50%;
    border: 0.3em solid white;
}
.avatar-smaller-border{
    border-radius: 50%;
    border: 2px solid white;
}
@media screen and (max-width: 1300px) {
    .avatar-pic{ width: 80px; height: 80px;}
}
@media screen and (min-width: 768px) and (max-width: 1400px) {
    .avatar-status{
        width: 35px; /*px for perfect circle*/
        height: 35px;
        right: 32%;
    }
}
span.tree-title{font-size: 1.7em!important;}
div .user-name{font-size: 1.7em;}
div .user-job{font-size: 1.3em; color: white;}
div .user-lvl{font-size: 1.7em;}
div .small-top-border{border-top: 1px solid rgba(44, 38, 40, 0.15);}
div .dash-title-fonts{font-size: 2em; font-family: 'ProximaNova-Bold';}
div .dash-title-fonts .tasks-descr{font-size: 0.6em; font-weight: normal;font-family: 'ProximaNova-S';}
div .tree-bottom-margin{
    margin-bottom: 1%;
    margin-left: 3%;
    margin-right: 2%;
}
div .avatar-bottom-margin{margin-bottom: 3%;}
div .side-bar-padding{padding: 3% 9%;}
div .side-bar-fonts{
    font-size: 1.1em;
    white-space: nowrap;
}
div .side-bar-padding .progress{height: 9px;}

/* MY-TASK COMPONENT */
div .component-parent{display: inline-flex;}
div .component-parent.margin-left-tasks{margin-left: 0.1em; margin-bottom: 25px;}
div .full-width{width: 100%;}
div .task-width{width: 22%; margin: 0 1.5%;}
div .task-container{
    width: 100%;
    background-color: #e4e4e4;
    border-radius: 0.3em;
    box-shadow: 3px 4px 22px #353535;
    padding: 1% 1% 140% 1%;
}
/* Other aspect ratios to try:
 * 56.25% = 16:9
 * 75% = 4:3
 * 66.66% = 3:2
 * 62.5% = 8:5
 */
div .task-container .task-content-position{
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    padding: 5%;
}
span.comming-soon{font-size: 115%;}
.lvl-bigger-font{font-size: 120%;}

 /* TASKS PAGINATION */
span.pager-arrow-size{font-size: 18px;}
span.pager-arrow-size:hover{
    -o-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    -o-transition: transform 0.1s;
    -moz-transition: transform 0.1s;
    -webkit-transition: transform 0.1s;
    -ms-transition: transform 0.1s;
    transition: transform 0.1s;
    color: #4cc87f;
}
#pagination, #pendingPagination, #completedPagination {
    clear:both;
    width:100%;
    margin:2% auto 0;
    padding:0;
}
#pagination li, #pendingPagination li, #completedPagination li {
    list-style:none;
    float:left;
    padding:0 1%;
}
#pagination li a, #pendingPagination li a, #completedPagination li a {
    display:block;
    width:10px;
    height:10px;
    text-indent:-10000px;
    background: #999;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -webkit-border-radius: 10px;
    box-shadow: inset 1px 1px 1px rgba(0, 0 ,0, 0.5);
}
#pagination li a{
    width:15px;
    height:15px;
}
#pagination li a.active, #pendingPagination li a.active, #completedPagination li a.active {
    background: white!important;
}
#pagination li a.indexed{
    background: #fcf708;
}
#pagination li a:hover,
#pendingPagination li a:hover,
#completedPagination li a:hover{
    -o-transform: scale(1.15);
    -moz-transform: scale(1.15);
    -webkit-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15);
    -o-transition: transform 0.1s;
    -moz-transition: transform 0.1s;
    -webkit-transition: transform 0.1s;
    -ms-transition: transform 0.1s;
    transition: transform 0.1s;
    background: #4cc87f;
}
.pager-margin{margin: 1% 0;}
.pagination-margin-bottom {margin-bottom: 12px;}
#PendingList, #completedList {font-size: 12px;}

/* TASK CONTAINER OVERLAY */
#taskContainerOverlay {
    position: absolute;
    width: 100%;
    height: 100%;
}
#taskContainerOverlay > p {
    position: relative;
    left: 50%;
    padding: 25px;
    border: 1px solid black;
    border-radius: 12px;
    background-color: rgba(0, 0, 0, 0.60);
    box-shadow: 3px 4px 22px rgba(0, 0, 0, 0.75);
}
@media screen and (max-width: 767px) {
    #taskContainerOverlay {
        background-color: rgba(0, 0, 0, 0.80);
    }
    #taskContainerOverlay > p {
        top: 50%;
        width: 85%;
        -webkit-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}
@media screen and (min-width: 768px) {
    #taskContainerOverlay {
        background: rgba(0, 0, 0, 0.80);
        background: -webkit-linear-gradient(
            rgba(0, 0, 0, 0.80) 0%,
            rgba(255, 255, 255, 0) 65%
        );
        background: -o-linear-gradient(
            rgba(0, 0, 0, 0.80) 0%,
            rgba(255, 255, 255, 0) 65%
        );
        background: -moz-linear-gradient(
            rgba(0, 0, 0, 0.80) 0%,
            rgba(255, 255, 255, 0) 65%
        );
        background: linear-gradient(
            rgba(0, 0, 0, 0.80) 0%,
            rgba(255, 255, 255, 0) 65%
        );
    }
    #taskContainerOverlay > p {
        width: 35%;
        margin-top: 15.5%;
        -webkit-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}
#taskContainerOverlay > p > img {
    display: inline;
    margin-bottom: 15px;
}

/* TASK COMPONENT */
div.task-container .task-content-position{font-family: 'ProximaNova-S';}
div.task-container .completed-smaller-border{
    border-radius: 50%;
    border: 3px solid #00fa79;
    padding: 5px;
}
.task-start-mission{
    padding: 4% 27%;
    white-space: nowrap;
    border-radius: 17px;
    border: white solid 1px
}
.task-start-mission:hover{
    border-color: #2cbb63;
}
div.task-content-position .row .text-center span.title {font-size: 140%;}
div.task-content-position .row .text-center .task-expires {font-size: 80%;}
div.task-content-position .row div.marg-top {margin-top: 6%;}
div.task-content-position .row .fixed-height{height: 5em;}
div.task-content-position .task-img-margin{margin: 13% 0;}
div.task-container:hover {
    -o-transform: scale(1.03);
    -moz-transform: scale(1.03);
    -webkit-transform: scale(1.03);
    -ms-transform: scale(1.03);
    transform: scale(1.03);
    -o-transition: transform 0.1s;
    -moz-transition: transform 0.1s;
    -webkit-transition: transform 0.1s;
    -ms-transition: transform 0.1s;
    transition: transform 0.1s;
}
div task-container:hover .task-content-position .row .text-center .hover{text-decoration: underline;}
div.task-container:hover .task-content-position .row .text-center .hover:active{font-family: 'ProximaNova-Bold'; color: black;}
div.task-container span.today {
    background: white;
    padding: 0.5em 1.3em;
    border-radius: 20px;
    position: absolute;
    top: -20px;
    right: -16px;
}
div.task-container .task-content-position .row div.task-points{
    position: absolute;
    bottom: 2%;
    color: rgba(255, 255, 255, 0.78);
}
div.task-container .task-content-position .row div.task-completed{
    position: absolute;
    bottom: 7%;
    font-size: 140%;
    color: #00fa79;
}
span.daily-font-size{font-size: 135%;}

/* MODAL */
div#modal.background{
    -webkit-animation: fadein 0.4s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 0.4s; /* Firefox < 16 */
        -ms-animation: fadein 0.4s; /* Internet Explorer */
         -o-animation: fadein 0.4s; /* Opera < 12.1 */
            animation: fadein 0.4s;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: rgba(0, 0, 0, 0.60);
    padding: 3%;
}
div#modal .container-liquid.task-background {
    width: 100%;
    height: 100%;
    background: #E91E63;
    border-radius: 1%;
    padding: 1%;
}

/* SYLLABUS (COMPONENT) */
div.white-border-bottom {border-bottom: 2px solid #ffffff;}
div.syllabus-container {font-size: 105%;}
div.syllabus-container .syllabus-component-part.syllabus-component-title {
    margin: 0.1em 0;
    padding: 1em;
    background: rgba(255, 255, 255, 0.65);
}
div.syllabus-container .syllabus-component-part.syllabus-component-title .title{margin-left: 1%;}
div.syllabus-container .syllabus-component-part .syllabus-component-content {margin: 1em 2em; color: white;}

/* MY_MISSIONS */
div.mission-side-titles > img {width: 25px; height: 25px;}
div.mission-side-titles > * {vertical-align: middle;}
div.mission-side-titles span {font-size: 115%;}
div.row.component-parent.mission-margin-bottom {margin-bottom: 2%;}
div#mission-history {font-size: 130%;}

/* PLAYER-INFO ROUTE */
div.player-info img.max-height {max-height: 80px; margin: 0 3px;}
div.player-info span.player-info-titles {font-size: 145%;}
div.player-info div.left-white-border {border-left: 1px solid white;}
div.player-info div.player-margin-top{margin-top: 5%;}
div.player-info div.icons-margin-top{margin-top: 8%;}
div.player-info input, div.player-info button{
    width: 100%;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 5px;
    color: black;
    font-size: 90%;
    padding-left: 8px;
    /*font-family: 'ProximaNova-S';*/
}
div.player-info span.button {
    background: white;
    padding: 7% 21%;
    white-space: nowrap;
    font-size: 100%;
    border-radius: 27px;
    -o-transition: color 0.7s ease;
    -moz-transition: color 0.7s ease;
    -webkit-transition: color 0.7s ease;
    -ms-transition: color 0.7s ease;
    transition:color 0.7s ease;
}
div.player-info div.icons-padding {padding: 0 8%;}
.cancel {
    font-size: 100%;
    -o-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -webkit-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    transition:color 0.3s ease;
}
div.player-info span.button:hover, .cancel:hover {color:black; cursor: pointer;}
div.player-info img.avatar-smaller-border:hover {border-color: #2cbb63;}
div.player-info span.caret.right-caret {
    float: right;
    height: 12px;
    margin-top: 7px;
}
#cropperComponent img{max-width: 100%;}
#cropperComponent .white-right-border{border-right: 1px solid white;}
#cropperComponent.cropper-container-style{margin: 2.2em;}
#cropperComponent .drag-area{
    width: 300px;
    border: 3px dashed white;
    border-radius: 10px;
    padding: 1em;
    font-size: 1.4em;
    font-family: 'ProximaNova-S';
    margin: 0 auto;
}
#cropperComponent span.button{
    background: white;
    padding: 7px 4%;
    border-radius: 25px;
    -o-transition: color 0.7s ease;
    -moz-transition: color 0.7s ease;
    -webkit-transition: color 0.7s ease;
    -ms-transition: color 0.7s ease;
    transition: color 0.7s ease;
}
#cropperComponent span.button:hover{color: #2cbb63;}
#cropperComponent canvas{border-radius: 50%; border: 0.3em solid white;}
#cropperComponent .margin-top-buttons{margin: 2% 0;}

/* LEADERBOARD */
div.leaderboard .big-font {font-size: 2.5em;}
div.leaderboard img.leaderboard-avatar {width: 65px; height: 65px;}
div.leaderboard > div > *{vertical-align: middle; margin-right: 2%;}
div.leaderboard > div span {vertical-align: middle;}
div.leaderboard div.margin-list-item {margin: 0.4em 0;}
div.leaderboard div.margin-list-item-text {margin-top: 1%;}
div.leaderboard.list-item {background-color: white; border-bottom: 1px solid rgba(128, 128, 128, 0.27);}
div.leaderboard.list-item img {width: 40px; height: 40px;}
div.leaderboard span.view-all{
    border-radius: 20px;
    background: #00fa79;
}
div.leaderboard span.view-all:hover{
    color: black;
    -o-transition: color 0.4s;
    -moz-transition: color 0.4s;
    -webkit-transition: color 0.4s;
    -ms-transition: color 0.4s;
    transition: color 0.4s;
    font-family: 'ProximaNova-Bold';
    cursor: pointer;
}
div.leaderboard div.margin-view-all {margin: 0.6em 0;}

/* PRIZE CARD COMPONENT */
#prize-cards .prize-card-container{
    background: rgba(0, 0, 0, 0.65);
    border-radius: 30px;
    padding: 5%;
    margin-top: 2%;
}
#prize-cards .prize-card-container .card-price{margin-top: 6%;}
#prize-cards .prize-card-container .card-lvl{margin-top: 20%;}
#prize-cards .prize-card-container .card-descr{margin-top: 5%;}

/******************** MODAL ********************/
.padding-header{padding-left: 2%; padding-top: 1%;}

.selected{background-color: rgba(255, 252, 65, 0.80);}
.correct{
    background-color: #2cbb63;
    color: white;
    -webkit-animation:  fadein 0.7s; /* Safari 4+ */
    -moz-animation: fadein 0.7s; /* Fx 5+ */
    -o-animation: fadein 0.7s; /* Opera 12+ */
    -ms-animation: fadein 0.7s; /* Opera 12+ */
    animation: fadein 0.7s;
}
.fail{
    background-color: #ff4d65;
    color: white;
    -webkit-animation:  fadein 0.7s; /* Safari 4+ */
    -moz-animation: fadein 0.7s; /* Fx 5+ */
    -ms-animation: fadein 0.7s;
    -o-animation: fadein 0.7s; /* Opera 12+ */
    animation: fadein 0.7s;
}
.disable{pointer-events: none; opacity: 0.3;}

.result-smaller-border{
    border-radius: 50%;
    border: 4px solid white;
    width: 18%;
}
.result-font{font-size: 1.9em;}

/* TASK */
#taskModal{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    z-index: 10;
    background-image: url(images/background-darker.png);
    background-attachment: fixed;
    -moz-background-attachment: fixed;
    -ms-background-attachment: fixed;
    -o-background-attachment: fixed;
    background-position: center;
    -moz-background-position: center;
    -ms-background-position: center;
    -o-background-position: center;
    -webkit-animation:  fadein 0.3s; /* Safari 4+ */
    -moz-animation: fadein 0.3s; /* Fx 5+ */
    -ms-animation: fadein 0.3s; /* Fx 5+ */
    -o-animation: fadein 0.3s; /* Opera 12+ */
    animation: fadein 0.3s;
    background-size: cover; /* known issue at bckgr-position: fixed */
    -wetaskModbkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
}
#taskModal .padding-bottom{padding-bottom: 0.5%;}
#taskModal .avatar{height: 50px; width: 50px;}
#taskModal .header-points-title{font-size: 1.4em; padding-top: 5px;}
#taskModal .padding-top{padding-top: 3%;}
#taskModal .image-margin-right{margin-right: 12px;}
#taskModal .task-marg-top{margin-top: 1%;}
#taskModal .rounded-button{
    padding: 1% 5%;
    white-space: nowrap;
    border-radius: 17px;
    border: white solid 1px
}
#taskModal .rounded-button:hover{
    border-color: #2cbb63;
    cursor: pointer;
}
#taskModal .task-descr-font{font-size: 130%;}
#taskModal .task-inside-descr{display: block; text-align: left;}
#taskModal .padding-result{padding: 0 11%;}
#taskModal .task-margin-top{margin-top: 5%;}
#taskModal .side-margin-top{margin-top: 25%;}
#taskModal .bottom-margins{margin-bottom: 1%; margin-right: 2%;}
#taskModal .start-bt-padding{padding: 2% 0;}

li.marg-qa-answer {margin: 2% 8%!important;}

/* QA QUIZ TASK */
.error-message{
    border: 1px solid yellow;
    border-radius: 25px;
    padding: 7px;
}

/* ARTICLE TASK RULES */
#taskModal .article-margin-top{margin-top: 6%;}
#taskModal .article-margin-top-sm{margin-top: 3%;}
#taskModal .article-image{
    height: 791px;
    background-size: contain;
}
#taskModal .article-read{
    position: absolute;
    top: 12%;
    width: 43%;
    margin-left: 29%;
}
@media screen and (max-width: 1500px) {
    #taskModal .article-read{ margin-left: 22%; width: 56%; }
}
@media screen and (max-width: 1300px) {
    #taskModal .article-read{ margin-left: 17%; width: 66%; }
}
@media screen and (max-width: 1000px) {
    #taskModal .article-read{ margin-left: 5%; width: 88%; }
}
#taskModal .article-content{
    height: 320px;
    display: block;
    overflow-y: scroll;
    padding: 7px 19px 0px 10px;
}
#taskModal .read-buttons{
    position: absolute;
    top: 77%;
    width: 100%;
}
#taskModal .rounded-read-button{
    padding: 6% 15%;
    white-space: nowrap;
    border-radius: 17px;
    border: white solid 1px;
    margin: 2px 0;
}
/* QUIZ LOGO RULES */
#taskModal .qa-logo-margin{ margin-top: 3%; }
#taskModal .li.image-li { margin: 0 auto; }
#taskModal #logoAnswers > ul { display: inline-flex; width: 100%; }
#taskModal #logoAnswers > ul li img{ border: 4px solid white; }
#taskModal #logoAnswers > ul li img:hover{ border: 4px solid #FFEB3B; }
#taskModal #logoAnswers .image-li{ margin: 0 auto; }
#taskModal #logoAnswers .image-correct{
    border: 5px solid #2cbb63!important;
    -webkit-animation:  fadein 0.3s; /* Safari 4+ */
    -moz-animation: fadein 0.3s; /* Fx 5+ */
    -o-animation: fadein 0.3s; /* Opera 12+ */
    -ms-animation: fadein 0.3s;
    animation: fadein 0.3s;
 }
#taskModal #logoAnswers .image-fail{
    border: 5px solid #ff4d65!important;
    -webkit-animation:  fadein 0.3s; /* Safari 4+ */
    -moz-animation: fadein 0.3s; /* Fx 5+ */
    -o-animation: fadein 0.3s; /* Opera 12+ */
    -ms-animation: fadein 0.3s;
    animation: fadein 0.3s;
}

#task-pop-up{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 130%;
    z-index: 13;
    background: rgba(0, 0, 0, 0.80);
    -webkit-animation:  fadein 0.3s; /* Safari 4+ */
    -moz-animation: fadein 0.3s; /* Fx 5+ */
    -o-animation: fadein 0.3s; /* Opera 12+ */
    -ms-animation: fadein 0.3s;
    animation: fadein 0.3s;
    padding: 8% 0;
}
#task-pop-up .result{padding: 0 0 80% 0px;}
#task-pop-up .result-white-backgr{
    position: absolute;
    top: 15%;
    width: 100%;
    height: 88%;
    z-index: -2;
}
#task-pop-up .result-back-top{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45%;
    z-index: -2;
}
#task-pop-up .result-back-bottom{
    position: absolute;
    top: 29%;
    /*bottom: 0;*/
    left: 0;
    right: 0;
}
#task-pop-up .result-marg-top{margin-top: 3%; padding: 0 6%;}
#task-pop-up .result-marg-top2{margin-top: 1%;}

/**** V. Gianop Style Rules ****/
#spin {
    -webkit-transition: all 10s ease-out;
    -ms-transition: transform 10s ease-out;
    -moz-transition: all 10s ease-out;
    display: inline-block;
    margin: 0px 3%;
}

    /* ALPHABET SOUP RULES */
#wordFinder #puzzleContainer {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display:inline-block;
    width:100%;
    height:100%;
}
#wordFinder #puzzleContainer .disabled {
   pointer-events: none;
   cursor: default;
}
#wordFinder #puzzleContainer .enabled {
   pointer-events: auto;
   cursor: default;
}
#wordFinder #puzzleContainer .layer {
    background-color: rgba(248, 247, 216, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#wordFinder #puzzleContainer .bk {
  background-image: url("images/bk.png");
  width:100%;
  height: 100%;
}
#wordFinder #puzzleContainer #puzzle {
  width: 90%;
  height:70%;
  max-width:800px;
  margin:auto auto;
  padding:15px;
    border: 2px solid white;
}
/* style for each square in the puzzle */
#wordFinder #puzzleContainer .puzzleSquare {
  height: 9.87%;
  width: 10%;
  text-transform: uppercase;
  background:none;
  border: 0;
  font-weight: 400;
  color: #fff;
}
#wordFinder #puzzleContainer #content {height: 970px;}
#wordFinder #puzzleContainer #puzzle .selected { background: rgba(76, 200, 127, 0.70); }
#wordFinder #puzzleContainer #puzzle .found { background: rgba(76, 200, 127, 0.90); }
#wordFinder #puzzleContainer #puzzle .solved { background-color: purple; color: white; }
#wordFinder #puzzleContainer #puzzle .complete { background-color: #4cc87f; }
#wordFinder div#words { padding-top: 1%; }
#wordFinder span#words {
  padding: 6% 0;
  display: inline;
  font: 1.7em sans-serif;
}
#wordFinder #words {
    color:#fff;
    padding-right:23px
}
#wordFinder .word{
    color: white;
    font-family: 'ProximaNova-Bold';
    font-size: 1.8em;
}
#wordFinder #words li i {margin-left: 3%;}
#wordFinder #words li .icon-padding {padding: 1px;}/*override rule above*/
#wordFinder #words .wordFound { color: #4cc87f; }
/***** V. Gianop End Style *****/

/* DAILY QUIZ */
#dailyQuizModal{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    overflow-y: scroll;
    z-index: 10;
    background: rgba(0, 0, 0, 0.80);
    -webkit-animation:  fadein 0.3s; /* Safari 4+ */
    -moz-animation: fadein 0.3s; /* Fx 5+ */
    -o-animation: fadein 0.3s; /* Opera 12+ */
    -ms-animation: fadein 0.3s;
    animation: fadein 0.3s;
}
#dailyQuizModal .timer{
    animation-name: colorChange;
    animation-duration: 60s;
}
#dailyQuizModal .prompt-text{margin-left: 2%;}
#dailyQuizModal .big-margin-top{margin-top: 5%;}
#dailyQuizModal .margin-horizontal{padding-bottom: 7%;}
li.answer-style{ /*for qa task rule also*/
    padding: 0.4em;
    /*white-space: nowrap;*/
    border-radius: 17px;
    border: white solid 1px;
    margin: 6px 8%;
    font-size: 125%;
}
li:hover{border-color: #2cbb63; cursor: pointer;}
#dailyQuizModal #question{margin-left: 15%;margin-right: 15%;}
#dailyQuizModal .help-margin{margin-left: 3%; margin-top: 6%;}
#dailyQuizModal .marg-left{margin-left: 3%;}
#dailyQuizModal .icon-padding{padding: 4px;}
#dailyQuizModal .hover-help{
    background-color: #e240ed;
    border-radius: 31px;
    margin-right: 4%;
    -webkit-animation:  fadein 0.3s; /* Safari 4+ */
    -moz-animation: fadein 0.3s; /* Fx 5+ */
    -o-animation: fadein 0.3s; /* Opera 12+ */
    -ms-animation: fadein 0.3s;
    animation: fadein 0.3s;
}
#dailyQuizModal .display-none{display: none;}
#dailyQuizModal .helpText{
    font-size: 124%;
    margin-top: 3%;
    border: 1px solid white;
    border-radius: 18px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.1);
}
.order-border{
    float: left;
    border: 1px solid #2cbb63;
    padding: 0 5px;
    border-radius: 30px;
    margin-right: 10px;
}
/* Override liquid css rules */
#dailyQuizModal .liquid-container{overflow: inherit!important;}
#dailyQuizModal .liquid-child{overflow: inherit!important}

#dailyQuizModal .result{padding: 0 0 80% 0px;}
#dailyQuizModal .result-white-backgr{
    position: absolute;
    top: 12%;
    width: 100%;
    height: 88%;
    z-index: -2;
}
#dailyQuizModal .result-back-top{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45%;
    z-index: -2;
}
#dailyQuizModal .result-back-bottom{
    position: absolute;
    top: 29%;
    /*bottom: 0;*/
    padding-bottom: 2em;
    left: 0;
    right: 0;
}
#dailyQuizModal .result-marg-top{margin-top: 4%;}

/* WELCOME MODAL POP UP RULES */
#welcomeModal{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    z-index: 10;
    background: rgba(0, 0, 0, 0.80);
    -webkit-animation:  fadein 0.4s; /* Safari 4+ */
    -moz-animation: fadein 0.4s; /* Fx 5+ */
    -o-animation: fadein 0.4s; /* Opera 12+ */
    -ms-animation: fadein 0.4s;
    animation: fadein 0.4s;
}

/* LOADING SPINNER RULES */
.loader{
    box-sizing:border-box;
    width:200px;
    height:200px;
    position:absolute;
    left:44%;
    top:50px;
}
.loader .container-B{
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
}
.loader .spinner3{
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
}
.loader .spinner3{animation : rotation0 6s infinite linear, resize3 6s infinite linear;}
.loader .hex0, .hex120, .hex240{
    position:absolute;
    box-sizing:border-box;
    width:100%;
    height:57.74%;
    left:0;
    top:21.13%;
    border-left:2px solid #fff;
    border-right:2px solid #fff;
}
.loader .hex0{animation:rotation0 4s infinite linear;}
.loader .hex120{
    -o-transform:rotate(120deg);
    -moz-transform:rotate(120deg);
    -webkit-transform:rotate(120deg);
    -ms-transform:rotate(120deg);
    transform:rotate(120deg);
    animation:rotation120 4s infinite linear;
}
.loader .hex240{
    -o-transform:rotate(240deg);
    -moz-transform:rotate(240deg);
    -webkit-transform:rotate(240deg);
    -ms-transform:rotate(240deg);
    transform:rotate(240deg);
    animation:rotation240 4s infinite linear;
}
@keyframes rotation0{
    0%{ transform:rotate(0deg); }
    100%{ transform:rotate(360deg); }
}
@-ms-keyframes rotation0{
    0%{ transform:rotate(0deg); }
    100%{ transform:rotate(360deg); }
}
@keyframes rotation120{
    0%{ transform:rotate(120deg); }
    100%{ transform:rotate(480deg); }
}
@-ms-keyframes rotation120{
    0%{ transform:rotate(120deg); }
    100%{ transform:rotate(480deg); }
}
@keyframes rotation240{
    0%{ transform:rotate(240deg); }
    100%{ transform:rotate(600deg); }
}
@-ms-keyframes rotation240{
    0%{ transform:rotate(240deg); }
    100%{ transform:rotate(600deg); }
}
@keyframes resize3{
    0%,16.66%,33.33%,50%,66.66%,83.33%,100%{
        width:100%;
        height:100%;
        top:0;
        left:0;
    }
    2.77%,19.44%,36.11%,52.77%,69.44%,86.11%{
        width:93.5%;
        height:93.5%;
        top:3.25%;
        left:3.25%;
    }
    5.55%,22.22%,38.88%,55.55%,72.22%,88.88%{
        width:84.4%;
        height:84.4%;
        top:7.8%;
        left:7.8%;
    }
    8.33%,25%,41.66%,58.33%,75%,91.66%{
        width:73.2%;
        height:73.2%;
        top:13.4%;
        left:13.4%;
    }
    11.11%,27.77%,44.44%,61.11%,77.77%,94.44%{
        width:84.4%;
        height:84.4%;
        top:7.8%;
        left:7.8%;
    }
     13.88%,30.55%,47.22%,63.88%,80.55%,97.22%{
        width:93.5%;
        height:93.5%;
        top:3.25%;
        left:3.25%;
    }
}
@-ms-keyframes resize3{
    0%,16.66%,33.33%,50%,66.66%,83.33%,100%{
        width:100%;
        height:100%;
        top:0;
        left:0;
    }
    2.77%,19.44%,36.11%,52.77%,69.44%,86.11%{
        width:93.5%;
        height:93.5%;
        top:3.25%;
        left:3.25%;
    }
    5.55%,22.22%,38.88%,55.55%,72.22%,88.88%{
        width:84.4%;
        height:84.4%;
        top:7.8%;
        left:7.8%;
    }
    8.33%,25%,41.66%,58.33%,75%,91.66%{
        width:73.2%;
        height:73.2%;
        top:13.4%;
        left:13.4%;
    }
    11.11%,27.77%,44.44%,61.11%,77.77%,94.44%{
        width:84.4%;
        height:84.4%;
        top:7.8%;
        left:7.8%;
    }
     13.88%,30.55%,47.22%,63.88%,80.55%,97.22%{
        width:93.5%;
        height:93.5%;
        top:3.25%;
        left:3.25%;
    }
}

/************** ImageLoader *****************/
#imageLoader {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 15;
    background-color: rgba(128, 128, 128, 0.5);
}
#imageLoader .relative {
    top: 50%;
    transform: translateY(-50%);
}
#imageLoader span {
    color: white;
    font-size: 2em;
    font-family: 'ProximaNova-Bold';
}
#imageLoader .imageLoader,
    #imageLoader .imageLoader:before,
        #imageLoader .imageLoader:after {
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation: anim-image-loader
                       1.8s
                       infinite ease-in-out;
    animation: anim-image-loader
               1.8s
               infinite ease-in-out;
}
#imageLoader .imageLoader {
    color: #ffffff;
    font-size: 10px;
    margin: 12px auto;
    position: relative;
    text-indent: -9999em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}
#imageLoader .imageLoader:before,
    #imageLoader .imageLoader:after {
    content: '';
    position: absolute;
    top: 0;
}
#imageLoader .imageLoader:before {
    left: -3.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}
#imageLoader .imageLoader:after {
    left: 3.5em;
}
@-webkit-keyframes anim-image-loader {
    0%, 80%, 100% {
        box-shadow: 0 2.5em 0 -1em;
    }
    40% {
        box-shadow: 0 2.5em 0 0;
    }
}
@keyframes anim-image-loader {
    0%, 80%, 100% {
        box-shadow: 0 2.5em 0 -1em;
    }
    40% {
        box-shadow: 0 2.5em 0 0;
    }
}

/*********************** RESPONSIVENESS RULES ***********************/
@media screen and (min-width: 1501px) and (max-width: 1700px) {
    div.task-content-position .task-img-inside-resp-rule{max-height: 90px;}
    div.task-content-position .task-img-margin{margin: 10% 0;}
    div .dash-title-fonts {font-size: 1.8em;}
    #dummyHeight{height: 180px;}
    #PendingList, #completedList{font-size: 10px;}
}
@media screen and (min-width: 1201px) and (max-width: 1500px) {
    body{font-size: 13px;}
    #dummyHeight{height: 120px;}
    div .dash-title-fonts {font-size: 1.7em;}
    li.dash-header-item{padding: 1.2em 1.05em;}
    #pagination li a {width: 14px; height: 14px;}
    div .task-container .task-content-position {padding: 4%;}
    div.task-content-position .row .fixed-height {height: 3.7em;}
    div.task-content-position .task-img-margin {margin: 10% 0;}
    div.task-content-position .task-img-responsive-rule {margin: 8% 0 8% 0;}
    span.task-start-mission{padding: 2% 25%;}
    div.task-content-position .task-img-inside-resp-rule{max-height: 60px;}
    #PendingList, #completedList{font-size: 10px;}
    #completedList div.task-container .completed-smaller-border, #PendingList div.task-container .completed-smaller-border{padding: 2px;}
    div.task-container span.today {top: -9px; right: -20px; padding: 0.5em 1.2em;}
}

@media screen and (max-width: 1230px) {
    .loader{left: 24%;}
    body{
        font-size: 10px;
        /*background-size: cover; /* known issue at bckgr-position: fixed
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;*/
      }
    .progress {height: 8px;}
    div .user-name {font-size: 2.5em; color: black;}
    div .user-job {font-size: 1.5em;}
    div .task-width {width: 95%; margin-left: 2%;}
    div.task-content-position .row .fixed-height {height: 3em;}
    div.task-content-position .task-img-margin {margin: 4% 0;}
    #completedList div.task-container,
    #PendingList div.task-container {font-size: 6px;}
    #pagination li a{height: 7px; width: 7px;}
    #pagination li, #pendingPagination li, #completedPagination li {margin: 1% 1%;}
    span.pager-arrow-size{font-size: 15px; margin-top: 7px;}
    #taskModal .rounded-button {padding: 5% 18%;}
    #taskModal .start-bt-padding{padding: 35% 0;}
    #taskModal .side-margin-top{margin-top: 4%;}
    div.row.mobile-margin-top{margin-top: 12%;}
    #taskModal .task-margin-top{margin: inherit;}
    #wordFinder #puzzleContainer #puzzle{height: 40%;}
    #wordFinder #puzzleContainer #content{height: 100%;}
    #task-pop-up .result{padding: 0 0 90% 0px;}
    div.result-font{font-size: 1.5em;}
    /* leaderboard */
    span.user-rank{margin-left: 8px;}
    /* player-info */
    div.player-info span.button {padding: 3% 4%;}
    /**************** LEFT SIDEBAR NAV *********************/
    .sidenav {
        height: 100%;
        width: 0;
        position: fixed;
        top: 0;
        left: 0;
        background-color: white;
        overflow-x: hidden;
        transition: 0.5s;
    }
    .mobile-home-icon {font-family: 'Glyphicons Halflings'!important; color: rgba(0, 0, 0, 0.4);}
    .bottom-border{border-bottom: 1px solid rgba(128, 128, 128, 0.27);}
    div.scrollTop {
        position: fixed;
        bottom: 0;
        right: 10px;
        z-index: 5;
        font-size: 50px;
        overflow: hidden;
    }
    div.scrollTop .topArrow{opacity: 0.8;}
    div.scrollTop .topArrow:focus,
    div.scrollTop .topArrow:hover,
    div.scrollTop .topArrow:active{
        opacity: 1;
    }
    /*#logout span{opacity: 1;}*/
}
@media screen and (max-width: 1000px) {
    #dummyHeight{height: 0;}
    .dashboard-help{position: relative!important;}
    .column-fill-height{padding-bottom: 0; margin-bottom: 0;}
    #pagination li{display: none;}
    #pagination li:first-of-type{display: block;}
}