@font-face {
font-family: 'pirata_oneregular';
src: url('/static/frontend/fonts/pirataone-regular-webfont.woff2') format('woff2'),
 url('/static/frontend/fonts/pirataone-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;

}

body{
height: 100%;
min-height: 100%;
background: #dac792;
font-family: Arial, "OpenSans Light", sans-serif;
color: #261c02;
margin: 0;
padding: 0;
position: relative;
cursor: default;
font-style: normal;
font-weight: normal;
/*min-width: 1024px;*/
}

h1, h2, h3, h4, h5, h6{
color: #261c02;
font-family: Arial, "OpenSans Regular", sans-serif;
font-style: normal;
text-rendering: optimizeLegibility;
margin-top: 0.2em;
margin-bottom: 0.7em;
line-height: 1.2;
}

ul{
margin: 0;
padding: 0;
list-style: none;
}


.btn-danger {
    border-radius: 3px;
    color:#fff;
    background-color: #c82333;
    background-image: url(../images/button-arrow.png);
    background-repeat: no-repeat;
    background-position: right center;
    position: relative;
    padding-right: 2.5rem;
    font-family: Arial, "OpenSans Regular", sans-serif;
    font-weight: normal;
    font-size: 1.125em;
    box-shadow: inherit;
    border: none;
    text-transform: uppercase;
    padding: 12px 42px 12px 22px;
    margin-bottom: 15px;
}
.btn-secondary {
    border-radius: 3px;
    color:#fff;
    background-color: #6c757d;
    background-image: url(../images/button-arrow.png);
    background-repeat: no-repeat;
    background-position: right center;
    position: relative;
    padding-right: 2.5rem;
    font-family: Arial, "OpenSans Regular", sans-serif;
    font-weight: normal;
    font-size: 1.125em;
    box-shadow: inherit;
    border: none;
    text-transform: uppercase;
    padding: 12px 42px 12px 22px;
    margin-bottom: 15px;
}
.btn-warning {
    border-radius: 3px;
    color:#fff;
    background-color: #ffc107;
    background-image: url(../images/button-arrow.png);
    background-repeat: no-repeat;
    background-position: right center;
    position: relative;
    padding-right: 2.5rem;
    font-family: Arial, "OpenSans Regular", sans-serif;
    font-weight: normal;
    font-size: 1.125em;
    box-shadow: inherit;
    border: none;
    text-transform: uppercase;
    padding: 12px 42px 12px 22px;
    margin-bottom: 15px;
    margin-left: 20px;
}
.btn-primary{
border-radius: 3px;
background-color: #3a8c98;
background-image: url(../images/button-arrow.png);
background-repeat: no-repeat;
background-position: right center;
position: relative;
padding-right: 2.5rem;
font-family: Arial, "OpenSans Regular", sans-serif;
font-weight: normal;
font-size: 1.125em;
box-shadow: inherit;
border: none;
text-transform: uppercase;
padding: 12px 42px 12px 22px;
margin-bottom: 15px;
}


.login-page{
background: url(../images/grayson-academy-logo.png) no-repeat 700px 90px;
background-size: 250px 300px;
margin-bottom: 50px;
}



.login-page .login-left .title{
color: #261c02;
font-family: "arial narrow", "helvetica narrow", "OpenSans Light", arial;
font-style: normal;
text-rendering: optimizeLegibility;
margin-top: 0.2em;
margin-bottom: 0.7em;
line-height: 1.2;
text-transform: uppercase;
font-size: 3.25em !important;
}

.login-page .login-left label{
font-size: 0.875em;
color: #4d4d4d;
cursor: pointer;
display: block;
font-weight: 600;
margin-bottom: 0;
}

.login-page .login-left label span{
color: #f00;
}

.login-page a{
color: #2ba6cb;
text-decoration: none;
line-height: inherit;
}

.panel-instruction{
background-color: #dac792;
border-color: #dac792;
font-weight: bold;
font-style: italic;
text-align: center;
padding: 20px;
margin-right: -15px;
margin-bottom: 20px;
}

.panel-instruction p{
font-family: inherit;
font-weight: normal;
font-size: 1em;
line-height: 1.6;
margin-bottom: 0;
text-rendering: optimizeLegibility;
}

.login-page .login-left .form-control{
padding: 2px ;
box-sizing: border-box ;
padding: 0.3em 0.4em 0.3em 0.5em ;
border: 1px solid #b8b8b8 ;
border-top-color: #999 ;
border-radius: 2px ;
background: #fcfcfa ;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.125) ;
max-width: 31.25em;
}

.login-page .login-left .form-submit .btn-primary:hover{
background-color: #18adbc;
}

.dashboard-bg{
background-image: url(../images/continents.png);
background-position: -20px center;
background-repeat: no-repeat;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.75);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.75);
background-color: #f6e9da;
max-width: 62.5rem;
margin: 0 auto;
}

.welcome_test{
padding: 80px 15px 0 15px;
}

.dashboard-content{
background-image: url(../images/mae-dashboard.png);
background-repeat: no-repeat;
background-position: 345px 50px;
}

.map-contnt{
background-image: url(../images/shaun-new.png);
background-repeat: no-repeat;
background-position: 467px 64px;
}

.leaderboard-contnt{
background-image: url(../images/tate-stand-background.png);
background-repeat: no-repeat;
background-position: 554px 28px;
}

.challenge-contnt{
background-repeat: no-repeat;
background-position: 700px 50px;
}

.header	{
margin-bottom: 20px;
padding: 60px 0 0 0;
position: relative;
z-index: 5;
background-size: cover;
}
.header .navbar{
background-color:#261c02;
position: absolute;
top: 60px;
width: 100%;
z-index: 1;
padding: 0 15px;
}
.header .navbar .navbar-brand{
position: absolute;
}
.header .navbar ul li a{
color: #fff;
padding: 0 15px !important;
line-height: 30px;
font-size: 14px;
text-transform: uppercase;
}

.header .navbar ul li.active a {
color: #eeb111;
}

.how-can-help{
background-image: url(frontend/images/status-report-header.jpg);
background-repeat: no-repeat;
background-position: bottom;
background-color: white;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.how-can-help.status-report{
    margin-top: 25px;
}

.how-can-help h2{
font-size: 2em !important;
color: #bf311a;
font-style: italic;
font-weight: bold;
margin: 0;
}

.welcome_test .welcome_left h1{
color: #261c02;
text-rendering: optimizeLegibility;
font-size: 3.25em;
font-family: "arial narrow", "helvetica narrow", "OpenSans Light", arial, helvetica, sans-serif;
font-weight: normal;
text-transform: uppercase;
margin-bottom: 0;
}
.welcome_test .welcome_left h2{
color: #bf311a;
font-size: 2.5em;
font-weight: 700;
}

.welcome_test .welcome_left p{
font-family: inherit;
font-weight: normal;
font-size: 1em;
line-height: 1.6;
margin-bottom: 1.25em;
text-rendering: optimizeLegibility;
}
.welcome_right{
text-align: right;
}

.welcome_right .btn{
border-radius: 3px;
background-color: #77b0b2;
background-image: url(../images/button-arrow.png)no-repeat;
background-position: right center;
position: relative;
padding: 12px 38px 12px 30px;
font-family: Arial, "OpenSans Regular", sans-serif;
font-weight: normal;
font-size: 1.125em;
box-shadow: inherit;
border: #2284a1;
line-height: 22px;
float: none;
margin-bottom: 15px;
}

.welcome_test .countdown{
padding: 1rem;
margin-bottom: 0.9375em;
background: #50453d;
color: white;
text-align: left;
width: 80%;
margin-left: auto;
}


.welcome_test .treasur-map .countdown{
width: 70%;
}



.welcome_test .treasur-map .countdown .count{
font-size: 3rem !important;
}

.treasur-map h1{
padding-bottom: 40px;
}

.treasur-map .countdown{
margin-right: auto;
margin-left: 0;
}


.welcome_test .countdown h2{
color: white;
font-size: 1.125rem;
margin-bottom: 0.25em;
}

.welcome_test .countdown .countdown-clock {
margin-top: 0.25rem;
}

.welcome_test .countdown .countdown-clock .wrapper{
border-right: 2px solid #332c27;
width: 100px;
text-align: center;
padding: 0 12px;
}

.welcome_test .treasur-map .countdown .countdown-clock .wrapper{
padding: 0 8px;
}

.welcome_test .countdown .countdown-clock .wrapper:last-child{
border-right:none;
}

.welcome_test .countdown .countdown-clock .count{
font-family: Arial, "Oswald Regular", sans-serif;
font-style: normal;
color: #bf311a;
font-size: 3.5rem;
line-height: 50px;
}

.welcome_test .countdown .countdown-clock .count-label{
display: block;
text-align: center;
text-transform: uppercase;
}

.welcome_test .countdown .countdown-clock{
display: flex;
justify-content: space-between;
align-items: center;
}

.student .week-container{
padding-bottom: 100px;
}

.student .week-container ul li{
display: inline-block;
vertical-align: top;
padding: 15px 2px;
}

.student-dashboard{
padding: 0 10px;
}



.student-dashboard .weeknum .panel{
background-color: #5b9b98;
padding: 5px 6px 0 15px;
}
/*
.student-dashboard .weeknum .panel.week1 .number {
background-position: -565px -180px;

}*/

.student-dashboard .weeknum .panel .number {
font-family: 'pirata_oneregular';
font-size: 0.4375em;
position: relative;
top: 10px;
right: 9px;
width: 50px;
height: 70px;
display: inline-block;
background-repeat: no-repeat;
/*background-image: url(../images/numbers.png);*/
font-size: 80px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}


.intro-video .panel,
.student-dashboard.available .hunt-video .panel,
.student-dashboard.unavailable .intro-video .panel,
.student-dashboard.unavailable .hunt-video .panel{
background-color: #dac792;
}

.panel{
border-style: solid;
border-width: 1px;
border-color: #d9d9d9;
margin-bottom: 1.25em;
padding: 15px 20px;
background: #f2f2f2;
}

.student-dashboard .panel{
min-height: 9.0625em;
margin-bottom: 0;
}

.challenge-status-2,
.challenge-status-3,
.challenge-status-4{
background: url(../images/status-waiting-sm.png) no-repeat right top;
display: block;
height: 75px;
width: 85px;
}

.push-2 {
position: relative;
left: 16.66667%;
right: auto;
}

.separator.odd-week img.character {
position: absolute;
top: -10.875em;
right: -3.375em;
max-width: 87px;
max-height: 477px;
}

.challenge-status-5{
background: url(../images/status-alert-sm.png) no-repeat right top;
display: block;
height: 75px;
width: 85px;
}

.challenge-status-6{
    background: url("../images/status-progress-sm.png") no-repeat right top;
    display: block;
    height: 75px;
    width: 85px;
}
.challenge-status-7{
    background: url("../images/status-alert-sm.png") no-repeat right top;
    display: block;
    height: 75px;
    width: 85px;
}


.student-dashboard .columns .challenge-status-2{
height: 70px;
width: 85px;
}


.student-dashboard .work-status a{
display: inline-block;
background-size: 81px 71px;
max-width: 83px !important;
position: relative;
z-index: 2;

}
.student-dashboard.available .work-status .panel, .student-dashboard.unavailable .work-status .panel{
background-color: #b1953a;
}

.week-container .student-dashboard .challenge-icons ul li{
padding: 0;
margin-bottom: 6px;
}

.week-container .student-dashboard .challenge-icons p{
margin: 0;
line-height: 10px;
}

.student-dashboard .intro-video .panel{
width: 220px;
}

.student-dashboard .intro-video{
position: relative;
}

.student-dashboard .panel-image .character{
position: absolute;
top: 0;
right: -50px;
max-width: 91px;
z-index: 1;
}
.student .week-container ul li.small-5.work-status {
width: 413px;
}


.student-dashboard .line-path {
position: relative;


}
.student.view-mode-full .student-dashboard .challenge-icon{
    margin-bottom: 0;

}
.student-dashboard  .push-2 {
position: relative;
left: 16.66667%;
right: auto;
}

.student-dashboard .intro-video .panel.locked,
.student-dashboard .hunt-video .panel.locked,
.student-dashboard.unavailable .intro-video .panel.locked,
.student-dashboard.unavailable .hunt-video .panel.locked{
background-color: #505050;
}

.student-dashboard .intro-waiting {
background-image: url(../images/intro-overlay.png);
background-repeat: no-repeat;
color: #ffffff;
font-weight: 700;
text-transform: uppercase;
min-height: 114px;
position: relative;
top: 0;
background-position: center center;
background-size: contain;
}

.student-dashboard .intro-waiting-text{
position: relative;
left: 92px;
top: 37px;
line-height: 1.2;
font-family: Arial, "OpenSans RegularItalic", sans-serif;
font-weight: normal;
font-style: italic;
font-size: 0.875em;
}

.student-dashboard .hunt-video .panel.locked{
width: 226px;
}

.student-dashboard .dashboard-icon.watch{
background-image: url(../images/challenge-icons-sprite.png);
background-position: -6px -2px;
}
.student-dashboard .intro-video .img-thumnil-box{
background-size: cover;
height: 91px;
background-size: cover;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.student-dashboard .intro-video .img-thumnil-box img{
width: 40px;
}



.student-dashboard .dashboard-icon {
height: 1.875em;
width: 3.125em;
background-repeat: no-repeat;
display: inline-block;
float: left;
margin-top: -11px;
}

.student-dashboard .dashboard-icon-text {
font-family: Arial, "OpenSans Bold", sans-serif;
text-transform: uppercase;
font-size: 0.875em;
font-style: italic;
position: relative;
top: -4px;
}
.intro-video{
position: relative;
}


.separator.odd-week img.character {
position: absolute;
top: -10.875em;
right: -3.375em;
max-width: 87px;
max-height: 477px;
}

.separator img.character {
z-index: 1;
}

.student-dashboard .dashboard-icon.challenge {
background-image: url(../images/challenge-icons-sprite.png);
background-position: -55px -37px;
}

.student-dashboard .work-status .panel{
padding-left: 40px;
}


.student-dashboard .weeknum .panel.week2 .number {
background-position: -10px -180px;
}

.student-dashboard .weeknum .panel.week3 .number {
background-position: -68px -180px;
}

.student-dashboard .weeknum .panel.week4 .number {
background-position: -133px -180px;
}

.unavailable {
opacity: .5;
pointer-events: none;
}
.btn-color{
background-color:#e13c21;
}
.challenge-status-1 {
background: url(../images/status-complete-sm.png) no-repeat right top;
display: block;
height: 75px;
width: 85px;
}

.student .week-container.week2,
.student .week-container.week3,
.student .week-container.week4{
position: relative;
}

.student .week-container.week2 .character,
.student .week-container.week4 .character {
position: absolute;
top: 0;
left: 89.5%;
z-index: 999;
max-width: 91px;
}



.student .week-container.week3 .character {
position: absolute;
top: 0;
left: 27.5%;
}



.student-dashboard .dashboard-icon-text.challenge {
color: white;
}

.student-dashboard.unavailable {
opacity: .5;
}

#map-box{
background-image: url(../images/map.png);
background-repeat: no-repeat;
background-position: center center;
width: 935px;
height: 515px;
margin-left: auto;
margin-right: auto;
position: relative;
padding: 25px;
text-align: center;
}

#map-box iframe{
height: 420px;
width: 830px;
margin-left: auto;
margin-right: auto;
border: solid 8px #0069aa;
top: 30px;
position: relative;
}

#map-box .clickMap {
width: auto;
height: 22px;
background: #0069aa;
margin: 0 auto;
position: absolute;
top: 56px;
z-index: 1;
left: 344px;
color: #fff;
padding: 0px 5px;
}



.footer {
background: #261c02;
clear: both;
color: #999999;
font-size: 0.7rem;
margin-top: 1.25em;
padding: 6px 20px;
}

.copyright {
line-height: 24px;
margin: 0 5px 0 0;
padding: 0 8px 0 0;
}

#menu-footer-menu,
#menu-footer-links,
#footer-social-links {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
line-height: 24px;
}

#menu-footer-menu > li,
#menu-footer-links > li,
#footer-social-links > li {
display: inline-block;
}

#menu-footer-menu a,
#menu-footer-links a{
border-right: 1px solid #666666;
font-size: 0.7rem;
line-height: 12px;
margin: 0 5px 0 0;
padding: 0 8px 0 0;
}

.footer a {
color: #999999;
}

#menu-footer-menu li:last-child a,
#menu-footer-links li:last-child a,
#footer-social-links li:last-child a{
border: 0 none;
margin-right: 0;
padding-right: 0;
}

#footer-social-links > li{
padding: 4px 2px;
}

#footer-social-links a .fa{
height: 22px;
width: 22px;
background-color: #fff;
border-radius: 50%;
color: #261c02;
font-size: 14px;
text-align: center;
padding-top: 4px;
}
#footer-social-links a:hover .fa{
background-color: #eeb112;
}

#menu-footer-links{
margin-left:5px;
}

.footer .last-column{
text-align: right;
}

.support-mid-contnt{
background-color: #fff;
padding: 10px 0;
}

.asked-questions{
border: 1px solid rgb(179 151 66 / 0.5);
overflow: hidden;
}


.asked-questions .frequently-header h2{
background-color: #b39742;
color: white;
font-size: 1.5em;
color: #fff;
text-align: center;
padding: 15px 0;
font-weight: 700;
margin: 0;
}

.asked-questions .frequently-body .frequently-left{
padding: 10px;
}
.asked-questions .frequently-body .frequently-left p{
color: #b39742;
font-weight: bold;
font-style: italic;
font-size: 16px;
}

.asked-questions .frequently-body .frequently-right{
padding: 10px;
}
.asked-questions .frequently-body .frequently-right p{
color: #017e93;
font-size: 15px;
line-height: 16px;
}

.asked-questions .frequently-body .submissions{
padding: 20px 0;
}

.asked-questions .frequently-body .warm-up{
background-color: #faf7f0;
padding: 20px 0;
}

.asked-questions .frequently-footer{
background-color: #b39742;
padding: 25px;
text-align: center;
}

.asked-questions .frequently-footer .btn{
margin: 0;
}

.having-trouble{
background-color: #017e93;
color: white;
padding: 15px;
overflow: hidden;
}

.having-trouble h3{
color: #fff;
font-weight: 600;
text-align: center;
font-size: 24px;
}

.having-trouble p{
font-size: 16px;
letter-spacing: 0.5px;
}

.having-trouble p a{
color: #88c3cd;
}

.having-trouble img{
margin: 0 0 -15px 94px;
}

.support-mid-contnt .let-us-know{
margin-top: 30px;
}

.support-mid-contnt .let-us-know .let-us-top{
background-color: #017e93;
padding: 15px;
}

.support-mid-contnt .let-us-know .let-us-top h3{
color: #fff;
font-weight: 600;
text-align: center;
font-size: 24px;
margin: 0;
}

.support-mid-contnt .let-us-know .let-us-form{
background-color: #80bec9;
padding: 70px 5px 50px 5px;
}

.support-mid-contnt .let-us-know .let-us-form label{
font-size: 0.875em;
color: #4d4d4d;
cursor: pointer;
display: block;
font-weight: 500;
margin-bottom: 0;
text-transform: uppercase;
}

.support-mid-contnt .let-us-know .let-us-form label span{
color: #f00;
}

.support-mid-contnt .let-us-know .let-us-form input.form-control{
height: 35px;
}

.support-mid-contnt .let-us-know .let-us-form .form-control{
border-radius: 0;
border:1px solid #999;
}

.challenge-contnt .writing-instructions{
position: relative;
margin: 60px 0 33px 15px;
}

.challenge-contnt .challenge-landing-icon{
display: block;
position: absolute;
width: 113px;
height: 100px;
left: -10px;
top: -35px;
z-index: 1;
}

.challenge-contnt .writing-instructions h2{
background: #b09441;
margin-top: 0;
margin-bottom: 0;
padding: .5em 0;
padding-left: 150px;
font-size: 1.5em;
font-weight: bold;
}

.challenge-contnt .introduction h3,
.challenge-contnt .writing-input-form h3{
color: #261c02;
line-height: 1.2;
font-weight: 600;
font-size: 24px;
margin-bottom: 15px !important;
}
.challenge-contnt .introduction .media_embed iframe{
height: 360px;
width: 100%;
}

.challenge-contnt .writing-instructions ol{
counter-reset: li;
margin-left: 0;
padding-left: 0;
background: #5d9b98;
}

.challenge-contnt .writing-instructions ol > li{
position: relative;
margin: 0 0 0px 85px;
padding: 4px 8px;
list-style: none;
min-height: 85px;
padding-top: 10px;
padding-bottom: 10px;
background-color: #dac695;
}

.challenge-contnt .writing-instructions ol > li:before{
content: counter(li);
counter-increment: li;
position: absolute;
background-repeat: no-repeat;
top: -2px;
left: -2em;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 2em;
margin-right: 8px;
padding: 0 20px 4px 4px;
color: #fff;
font-weight: bold;
font-family: "Helvetica Neue", Arial, sans-serif;
text-align: right;
font-size: 3.75em;
background-position: 35px 5px;
line-height: 1.3;
}

.challenge-contnt .writing-instructions ol > li a{
color: #2ba6cb;
text-decoration: none;
line-height: inherit;
}

.challenge-contnt .about-assignment{
background-color: #fcfcfc;
border-color: #fcfcfc;
border-radius: 0.625em;
padding: 15px 20px;
}

.challenge-contnt .about-assignment h3{
font-size: 18px;
font-weight: 600;
}

.challenge-contnt .writing-input-form{
padding:15px;
}

@media(max-width: 1200px){
.welcome_test .countdown .countdown-clock .count{
font-size: 40px;
}

.student-dashboard .intro-video .panel {
    width: 210px;
    padding: 15px;
}

.student-dashboard .work-status .panel {
padding: 15px 15px 15px 35px;
}

.student-dashboard .work-status a{
width: 73px;
height: 60px;
background-size: contain;
}

.week-container .student-dashboard .challenge-icons ul li {
padding: 0 2px;
}

.student .week-container.week2 .character, .student .week-container.week4 .character {
left: 68.5%;
}
.student.view-mode-full .student-dashboard{
	display: flex;
    justify-content: space-around;
    align-items: flex-start;
}
.student.view-mode-full .student-dashboard .hunt-video .panel.locked {
    width: 225px;
}
}
@media(max-width: 991px){

.container{
max-width: 100%;
padding: 0;
}

.login-page	{
background: url(../images/grayson-academy-logo.png) no-repeat 95% 20px;
background-size: 180px 200px;
}


.header{
padding: 65px 0 0 0;
}
.navbar-toggler:focus,
.navbar-toggler:hover{
box-shadow: none;
outline: none;
}

.header .navbar{
top: 0;
height: auto;
}

.header .navbar .navbar-brand {
position: initial;
}

.navbar-collapse{
background-color: #261c02;
}


.header .navbar .navbar-brand img{
width: 170px;
}

.navbar-toggler{
margin-left: auto;
z-index: 999;
color: #fff;
}

.navbar-toggler-icon{
color: #fff;
background-color: rgba(255,255,255,0.5);
margin: 4px;
border-radius: 5px;
height: 5px;
display: block;
}

/*----------*/

.student .week-container ul li{
padding: 15px 10px;
width: 49% ! important;
}

.student .week-container ul li.work-status .challenge-icons ul{
display: flex;
justify-content: flex-start;
align-items: center;
}
.student-dashboard .work-status .panel {
padding: 15px 15px 15px 20px;
}

.student-dashboard .intro-video .panel,
.student-dashboard .hunt-video .panel.locked{
width: 100% ! important;
}

.student-dashboard .intro-waiting-text{
left: 50%;
}

.welcome_test .countdown .countdown-clock .wrapper{
width: 100%;
}

.student-dashboard .panel-image .character,
.student .week-container.week2 .character,
.student .week-container.week4 .character,
.student .week-container.week3 .character {
left: auto;
right: 0;
}
/*----------*/
.welcome_test .treasur-map .countdown {
width: 100%;
}

#map-box{
width: 100%;
height: 300px;
}

.go-back .btn-primary{
margin: 15px;
}

#map-box{
background-size: cover;
}
#map-box .clickMap {
    top: 25px;
    left: calc(50% - 110px);
    }
/*.student.view-mode-full .student-dashboard {
    display: block;
}*/
.student-dashboard .intro-video .img-thumnil-box{
    background-size: 100% 100% !important;
    background-position: center !important;
}
}
@media(max-width: 768px){

.panel-instruction{
margin-right: 0;
}

.login-page {
background: url(../images/grayson-academy-logo.png) no-repeat 95% 10px;
background-size: 125px 130px;
}

.welcome_test {
padding: 20px 15px 0 15px;
}

.header .navbar .navbar-brand img {
width: 120px !important;
}

.student .week-container ul li {
padding: 15px 0;
}
.welcome_test .welcome_left h1{
font-size: 40px;
}
.student .week-container {
padding-bottom: 30px;
}

.welcome_test .welcome_left h2{
font-size: 30px;
}

.student-dashboard .intro-video .panel,
.student-dashboard .hunt-video .panel.locked,
.student .week-container ul li{
width: 100% ! important;
}



.week-container .student-dashboard .work-status .challenge-icons ul{
display: flex;
justify-content: center;
align-items: center;
}
.student-dashboard .intro-waiting-text{
left: 50%;
}

.student-dashboard .character{
right: 0 !important;
}

.student .week-container.week2 .character,
.student .week-container.week4 .character,
.student .week-container.week3 .character {
left: 85%;
top: 20%;
}

.treasur-map .countdown h2{
font-size: 18px;
}
.welcome_test .treasur-map .countdown .count {
font-size: 42px !important;
}

.map-contnt .go-back .text-right{
text-align: center !important;
}

.having-trouble{
text-align: center;
}

.having-trouble img{
margin: 0;
}


}
@media(max-width: 576px){
.login-page{
background: none;
}
.dashboard-bg{
max-width: 100% !important;
}

.dashboard-content{
background-position: 155px 50px;
}

.map-contnt {
background-position: 73px 5px !important;
}
.challenge-status-2,
.challenge-status-3,
.challenge-status-4,
.challenge-status-5{
height: 65px;
width: 70px;
}

.student-dashboard .work-status a{
width: 67px;
height: 55px;
}
.student .week-container.week2 .character,
.student .week-container.week4 .character,
.student .week-container.week3 .character {
left: auto;
right: 0;
}

.map-contnt .go-back .btn-primary{
font-size: 16px;
}
.how-can-help h2{
font-size: 20px !important;
}

.challenge-contnt .challenge-landing-icon{
width: 85px;
height: 70px;
background-size: contain;
}
.challenge-contnt .writing-instructions h2{
font-size: 16px;
padding-left: 75px;
}

.challenge-contnt .introduction .media_embed iframe{
height: 250px;
}
.student .week-container ul li.small-5.work-status {
    width: 100%;
}

.student .week-container ul li.work-status .challenge-icons ul {
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.week-container .student-dashboard .challenge-icons ul li {
    text-align: center;
    padding: 10px;
}
}




.teacher-dashboard h1{
    text-rendering: optimizeLegibility;
    font-size: 3.25em;
    font-family: "arial narrow", "helvetica narrow", "OpenSans Light", arial, helvetica, sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    margin-bottom: 0;
    margin:0 0 0.67em 0;
}

.teacher-dashboard h2{
    font-size: 1.5em;
    font-weight: bold;
}

.teacher-dashboard h3{
    font-size: 1.125em;
    font-weight: bold;
}

.teacher-dashboard ul.main-list{
    margin-left: 1.375em;
    list-style: disc;
}

.teacher-dashboard ul.sub-list{
    margin-left: 1.375em;
    list-style: circle;
}

.teacher-dashboard ul.sub-list a{
    color: #2ba6cb;
    text-decoration: none;
    line-height: inherit;
}

.teacher-dashboard .teacher-dashboard-right{
    padding-right: 25px;
}

.teacher-dashboard .teacher-dashboard-right .btn,
.teacher-dashboard .teacher-dashboard-right .btn{
    border-radius: 3px;
    background-image: url(file:///I:/project/brainchais%20html/images/icons/button-arrow.png);
    background-repeat: no-repeat;
    background-position: right center;
    position: relative;
    font-family: Arial, "OpenSans Regular", sans-serif;
    font-weight: normal;
    box-shadow: inherit;
    border: none;
    padding: 10px 42px;
    width: 100%;
    text-transform: uppercase;
    font-size: 18px;
    margin-bottom: 25px;
}

.teacher-dashboard .teacher-dashboard-right .btn.btn-danger{
    background-color: #bf311a;
}

.teacher-dashboard .teacher-dashboard-right .btn.btn-primary{
    background-color: #2284a1;
}

.tableheader-processed tr.even,
.tableheader-processed tr.odd {
    background-color: #eee;
    border-bottom: 1px solid #ccc;
    padding: 0.1em 0.6em;
}

.tableheader-processed thead tr th,
.tableheader-processed thead tr td,
.tableheader-processed tfoot tr th,
.tableheader-processed tfoot tr td{
    padding: 0.5em 0.625em 0.625em;
    font-size: 0.875em;
    color: #222;
    text-align: left;
}

.tableheader-processed thead th{
    border-bottom: 3px solid #ccc;
    background-color: #f5f5f5;
}

.tableheader-processed tr td{
    padding: 0.5625em 0.225em;
    font-size: 0.875em;
}

@media(max-width: 992px){
        }
}
.status-report{
    text-transform: uppercase;
}
.status-report h2{
    font-family: "arial narrow", "helvetica narrow", "OpenSans Light", arial, helvetica, sans-serif;
    padding: 75px 0 15px 0;
}

.status-report ul li{
    display: inline-block;
    width: 20%;
}

.status-report ul li label{
    font-size: 0.875em;
    color: #4d4d4d;
    margin: 0;
}

.status-report ul li label span{
    color: #f00;
}

.status-report ul li .form-control{
    padding: 2px !important;
    box-sizing: border-box !important;
    padding: 0.3em 0.4em 0.3em 0.5em !important;
    border: 1px solid #b8b8b8 !important;
    border-top-color: #999 !important;
    border-radius: 2px !important;
    background: #fcfcfa !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.125) !important;
    height: 33px;
}

.status-form .btn-primary{
    margin-left: 25px;
}


.summery-information{
    background-color: #fff;
    padding: 55px 0 0 0;
}


.summery-information h3{
    color: #261c02;
    font-family: Arial, "OpenSans Regular", sans-serif;
    font-style: normal;
    text-rendering: optimizeLegibility;
    margin-top: 0.2em;
    margin-bottom: 0.7em;
    line-height: 1.2;
    font-size: 1.125em;
    font-weight: 600;
}

.summery-information .profile-dark-blue{
    background-color: #017e93;
    color: white;
    padding: 1.25em;
}

.summery-information .profile-dark-blue h4{
    text-transform: uppercase;
    font-family: "OpenSans Regular", Arial, sans-serif;
    color: white;
    text-align: center;
    font-size: 1.5em;
    margin:0;
    font-weight: 600;
}

.summery-information .summary-panel {
    margin-bottom: 20px;
}

.summery-information .profile-gold {
    background-color: #b39742;
    color: white;
    padding: 1.25em;
}

.summery-information .summary-panel h4{
    margin: 0;
    text-transform: uppercase;
    font-family: "OpenSans Regular", Arial, sans-serif;
    color: white;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
}


.summery-information .status-report-icon {
    position: absolute;
    left: 0;
    z-index: 100;
    top: -10px;
}


.summary-panel.summary-panel-right p{
    color: #fff;
    font-family: "OpenSans Regular", Arial, sans-serif;
    margin-bottom: .75em;
}

.summery-information .profile-white{
    padding: 10px 15px;
    color: #017e93;
}

.summery-information .profile-dark-blue {
    background-color: #017e93;
    color: white;
    margin: 0;
}

.profile-dark-blue.section-header{
    margin-bottom: 20px;
}



.summery-information .summary-panel .student-summary{
    padding: 1.25em;
    border-top: 1px solid white;
    min-height: 420px;
    background: url({% static 'frontend/images/mae-halfsy.png' %}) no-repeat bottom right;
    background-color: #017e93;
}

@media(max-width: 767px){
    .summery-information .profile-white p img{
        width: 150px;
    }

    .status-form .btn-primary {
        margin-left: 0;
    }
}
@media(max-width: 576px){
    .header{
        margin-bottom: 0;
    }

    .how-can-help.status-report{
        margin-top: 0;
        min-height: 300px;
    }

    .status-report h2{
        padding: 20px 0 15px 0;
    }

    .status-report ul li {
        width: 90%;
    }

    .status-form .btn-primary{
        margin-top: 20px;
        width: 100%;
    }

    .summery-information .summary-panel h4{
        padding-left: 50px;
    }

    .how-can-help.status-report{
        background-position: inherit;
    }

}
.progress-wrapper{
					height: 100px;
					padding: 25px;
				}
.challenge-contnt .progress{
    width: 100%;
    height: 32px;
    border: 2px solid #000;

}

.progress-tooltip{
    position: relative;
}

.progress-tooltip-info{
    left: 45%;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: 2px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
    left: auto;
    position: absolute;
    background-color: #5b9b98;
    right: -10px;
    top: -12px;
    color: #fff;
    font-weight: bold;
}

.progress-wrapper ul{
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
}

.progress-wrapper ul li{
    height: 60px;
    width: 2px;
    background-color: #999;
}

.google-books h1{
			text-transform: uppercase;
			font-size: 3.25em;
			text-rendering: optimizeLegibility;
			font-family: "arial narrow", "helvetica narrow", "OpenSans Light", arial, helvetica, sans-serif;
			margin-top: 60px;
    	}


		#bookSearchForm{
			display: flex;
			align-items: flex-end;
		}

		#googleBooksSubtitle{
			color: #261c02;
			font-family: Arial, "OpenSans Regular", sans-serif;
			font-style: normal;
			text-rendering: optimizeLegibility;
			margin-top: 0.2em;
			margin-bottom: 0.7em;
			line-height: 1.2;
			font-size: 1.5em;
			font-weight: bold;
		}

		#bookSearch,#showFeaturedBooks{
			border-radius: 3px;
			background-color: #3a8c98;
			background-image: url(/static/frontend/images/button-arrow.png);
			background-repeat: no-repeat;
			background-position: right center;
			position: relative;
			font-family: Arial, "OpenSans Regular", sans-serif;
			font-weight: normal;
			font-size: 1.125em;
			border: none;
			text-transform: uppercase;
			padding: 12px 40px 11px 15px;
			color: #fff;
			margin-bottom: 20px;
		}

		#bookSearchInput {
		    font-size: 1.6em;
		    vertical-align: middle;
		    margin-right: 7px;
		    line-height: 1.7em;
		    float: right !important;
		}

		.back-reading-home{
			border-radius: 3px;
			background-color: #258a3f;
			background-image: url(images/button-arrow.png);
			background-repeat: no-repeat;
			background-position: right center;
			position: relative;
			font-family: Arial, "OpenSans Regular", sans-serif;
			font-weight: normal;
			font-size: 1.125em;
			border: none;
			text-transform: uppercase;
			padding: 12px 40px 12px 25px;
			color: #fff;
			margin-bottom: 20px;
			float: right;
		}

		#searchResults .bookImage img{
			max-height: 200px;
            width: auto;
            min-height: 200px;
		}

		#searchResults .book .bookAuthor{
			line-height: 1.2;
			font-family: inherit;
			font-weight: normal;
			font-size: 1em;
			margin-bottom: 1.25em;
			text-rendering: optimizeLegibility;
			text-align: center;
		}

		#searchResults .bookImage{
			text-align: center;
		}

		#searchResults .bookTitle{
			font-size: 1rem;
			color: #261c02;
			font-family: Arial, "OpenSans Regular", sans-serif;
			font-style: normal;
			text-rendering: optimizeLegibility;
			margin-top: 0.2em;
			margin-bottom: 0.7em;
			line-height: 1.2;
			text-align: center;
			font-weight: 700;
		}

		#searchResults .book{
		    min-height: 360px;
		    text-align: center;
		}
		#pager ul li{
			display: inline-block;
			margin-right: 18px;
		}

		#pager ul li.active .prev,
		#pager ul li.active .next {
		    display: none;
		}

		#pager{
			margin-bottom: 10px !important;
			display: flex;
            align-content: center;
            justify-content: center;
            flex-direction: column;
		}

		#pager .page-link{
			position: relative;
			display: block;
			padding: 0;
			margin-left: -1px;
			line-height: 1.25;
			color: #008C99;
			background-color: transparent;
			border: none;
		}

		#pager ul li .prev,
		#pager ul li .next{
			border-radius: 3px;
			background-color: #008C99;
			background-repeat: no-repeat;
			background-position: right center;
			position: relative;
			padding-right: 2.5rem;
			font-family: "OpenSans Regular", Arial, sans-serif;
			font-weight: normal;
			font-size: 0.875em;
			box-shadow: inherit;
			border: none;
			color: #FFF;
			text-transform: uppercase;
			padding: .875em 1.5em;
		}
		@media(max-width: 992px){
			.google-books {
			    background-position: 100% 75px;
			}
		}
		@media(max-width: 768px){
			.google-books h1{
				font-size: 40px;
			}
		}
@media(max-width: 576px){

    .google-books h1 {
        font-size: 32px;
        width: 100%;
        margin-top: 0;
    }

    #bookSearch, #showFeaturedBooks{
        width: 100%;
    }

    #bookSearchInput,
    .back-reading-home{
        width: 100%;
        margin: 0 0 20px 0;
        text-align: center;
    }
}
.media_embed img{
 max-width:100% !important;
}
.example_video_1-dimensions{
    width:100% !important;
}

@media print{
    .dashboard-bg .modal-content .fancybox-item-full iframe .audio{/*Remove class*/}
}

.how-can-help-1{
      background-image: url('/static/frontend/images/status-report-header-3.png') !important;
}