@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  header .full {
	background: url(../images/09-logo@2x.png) 0 13px no-repeat;
	background-size: 41px 38px;
  }
  select {
	background: #fff url(../images/00-select-arrow@2x.png) no-repeat right center;
	background-size: 25px 5px;
  }
  input[type=text].date {
	background: url(../images/09-input-date@2x.png) center right no-repeat;
	background-size: 30px 14px;
  }
  section.forum .reply {
	position: absolute;
	background: url(../images/09-reply@2x.png) top right no-repeat;
	background-size: 38px 35px;
  }
  .info-dropdown .FL {
	background: url(../images/09-male-big@2x.png) left center no-repeat; /* Chage to female or male icon */
	background-size: 34px;
  }
  .instructor .info-dropdown .FL {
	background: url(../images/09-instructor-big@2x.png) left center no-repeat;
	background-size: 34px;
  }
  .class-detail .s-list-detail.male li:first-child {
	background: url(../images/09-male-big@2x.png) center left no-repeat;
	background-size: 34px;
  }
  .class-detail .s-list-detail.female li:first-child {
	background: url(../images/09-female-big@2x.png) center left no-repeat;
	background-size: 34px;
  }
}

@media screen and (max-width: 980px) {
  .full {
	width: 100%;
	padding-right: 30px;
	padding-left: 30px;
  }
  .col {
	width: 100%;
	padding-right: 20px;
	padding-left: 20px;
  }
  .half { width: 50%; }
  header .full { background-position: 30px 13px; }
  header .full { padding-left: 82px; }
  header { margin-bottom: 35px; }
  header a.notice, header a.msgr, header a.dictionary, header a.material-list, header.hanzi_writer {
	width: 50px;
  }
  .info-dropdown, .notice-dropdown { right: 30px; }
  ul.side-nav {
	position: static;
	width: auto;
	border-bottom: 1px solid #e9e9e9;
	padding-bottom: 20px;
  }
  ul.side-nav li {
	display: inline-block;
	margin: 0;
  }
  ul.side-nav li.active:before { display: none; }
  ul.side-nav li:after {
	content: "/";
	margin: 15px;
	color: #efefef;
  }
  ul.side-nav li:last-child:after { display: none; }
  .side-content {
	margin-top: 10px;
	padding-left: 0;
  }
  .assessment .submit {
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
  }
  .assessment .submit a {
	display: block;
  }
  .assessment .submit a.red.btn {
	margin-right: 0;
	margin-bottom: 15px;
  }
  .class-detail .col {
	margin: 0;
  }
  .class-detail .col, .class-detail .col .half {
	padding-right: 0;
	padding-left: 0;
  }
  .class-detail .col .half:first-child {
	padding-right: 10px;
  }
  .class-detail .col .half:last-child {
	padding-left: 10px;
  }
  .award-t .award-list ul, .nbc .nbc-list ul {
	width: 100%;
  }
  .evalue-t .accordion .content .col {
	float: none;
	width: 100%;
	padding: 0 0 0 15px;
  }
  .evalue-t .accordion .content .full {
	margin-left: 0;
	border-top: 0;
  }
  .evalue-t .question .trait {
	margin-bottom: 30px;
  }
  .evalue-t .question.empty {
	width: 100%;
	height: 1px;
	overflow: hidden;
	background: #e9e9e9;
	margin: 0 0 0 25px;
	padding: 0;
  }
  .evalue-t .question.new:before {
	position: absolute;
	content: "";
	width: 150%;
	height: 1px;
	overflow: hidden;
	top: -10px;
	left: -40px;
	background: #e9e9e9;
  }
  .nbc .nbc-list ul {
	text-align: center;
  }
  .nbc .nbc-list li {
	float: none;
	width: 44%;
	min-width: 273px;
	text-align: center;
	display: inline-block;
  }
  ul.dashboard-tabs {
	position: relative;
	width: 100%;
	padding: 0 25px;
	margin: 0 auto;
  }

  ul.dashboard-tabs li.dashboard-tab-link {
	width: 32.2%;
	background: #de4848;
	padding: 5px;
	color: #fff;
	text-align: center;
	font-size: 12px;
	cursor: pointer;
	margin: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
  }

  ul.dashboard-tabs li.dashboard-tab-link:hover {
	background: #f46464;
  }

  ul.dashboard-tabs li.dashboard-tab-link.current {
	background: #fff;
	color: #222;
  }
}

@media screen and (max-width: 900px) {
  #report-card-detail, #report-card-evidence {
    min-width: 700px;
	width: 100%;
  }
}

@media screen and (max-width: 770px) {
  header .full { height: 64px; }
  header h1 { display: none; }
  .half { width: 100%; }
  .full-view { display: none; }
  .mobile-view { display: block; }
  .overlay#choose-room li, #flag-post.overlay .block, #coupon-code.overlay .block, .overlay#choose-pay li { width: 100%; }
  .overlay#choose-room li.one, .overlay#choose-pay li.one { margin-bottom: 2px; }
  .account .info .FL, .account .info .FR {
	width: 100%;
	text-align: center;
	padding: 1px 0;
  }
  .account .info .block div { text-align: left; }
  .account .side-content form .FL, .account .side-content form .FR {
	width:100%;
	padding-right: 0;
	padding-left: 0;
  }
  .account .side-content form .academic { padding-right: 126px; }
  .account .side-content form .year { width: 70px !important; }
  .account .side-content ul.history li div {
	float: none;
	width: 100% !important;
	text-align: left !important;
  }
  .account .side-content ul.history li div:nth-child(2), .account .side-content ul.history li div:nth-child(3) { padding-top: 15px; }
  .pay.confirm .submit a.back {
	margin: 0 0 15px;
  }
  .pay.confirm .submit a {
	display: block;
  }
  ul.pay-steps {
	padding-left: 2px;
  }
  ul.pay-steps li {
	width: 50%;
  }
  ul.pay-steps li:first-child, ul.pay-steps li:nth-child(3) {
	margin-left: -2px;
  }
  ul.pay-steps li:nth-child(2) {
	margin-right: 0;
  }
  .assessment ul.instruction li {
	float: none;
	width: 100%;
  }
  .assessment .instruction li:last-child {
	padding-left: 0;
	margin-top: 25px;
  }
  .assessment .info {
	padding: 0 25px;
  }
  .assessment .info li {
	float: none;
	width: 100%;
	padding: 20px 0;
  }
  .assessment .info li:first-child {
	border-right: 0;
	border-bottom: 1px solid #dcdcdc;
  }
  .finish-pay .class-detail {
	padding-left: 0;
  }
  .finish-pay .class-detail li {
	float: none;
	width: 100% !important;
	height: auto;
	padding: 30px 0;
  }
  .finish-pay .class-detail li:first-child {
	margin: 0 0 2px;
  }
  .finish-pay .class-detail li:first-child:after {
	display: none;
  }
  .class-detail .s-list-detail li {
	width: auto;
	text-align:left;
	line-height: normal;
  }
  .class-detail .s-list-detail.male li:first-child, .class-detail .s-list-detail.female li:first-child, .class-detail .s-list-detail.photo li:first-child {
	width: 100% !important;
	padding-left: 80px;
  }
  .class-detail .s-list-detail.label li:nth-child(2), .class-detail .s-list-detail.label li:nth-child(3), .class-detail .s-list-detail.label li:nth-child(4), .class-detail .s-list-detail.label li:nth-child(5), .s-list-detail.label li:nth-child(6), .s-list-detail.label li:nth-child(7), .s-list-detail.label li:nth-child(8), .s-list-detail.label li:nth-child(9) {
	display: none;
  }
  .class-detail .s-list-detail li:nth-child(2), .class-detail .s-list-detail li:nth-child(3), .class-detail .s-list-detail li:nth-child(4), .class-detail .s-list-detail li:nth-child(5), .class-detail .s-list-detail li:nth-child(6), .s-list-detail li:nth-child(7), .s-list-detail li:nth-child(8), .s-list-detail li:nth-child(9) {
	height: auto;
	font-size: 14px;
	margin: 0 0 10px 0;
  }
  .class-detail .s-list-detail li:nth-child(2), .class-detail .s-list-detail li:nth-child(4), .class-detail .s-list-detail li:nth-child(6), .s-list-detail li:nth-child(7), .s-list-detail li:nth-child(8), .s-list-detail li:nth-child(9) {
	width: 155px;
	margin-left: 80px;
  }
  .class-detail .s-list-detail li:nth-child(3), .class-detail .s-list-detail li:nth-child(5), .class-detail .s-list-detail li:nth-child(7), .s-list-detail li:nth-child(8), .s-list-detail li:nth-child(9) {
	width: 155px;
  }
  .class-detail .s-list-detail li:nth-child(2):before, .class-detail .s-list-detail li:nth-child(3):before, .class-detail .s-list-detail li:nth-child(4):before, .class-detail .s-list-detail li:nth-child(5):before, .class-detail .s-list-detail li:nth-child(6):before, .class-detail .s-list-detail li:nth-child(7):before, .class-detail .s-list-detail li:nth-child(8):before, .class-detail .s-list-detail li:nth-child(9) {
	font-weight: normal;
  }
  .class-detail .s-list-detail li:nth-child(2):before {
	content: "Quizzes Completed: ";
  }
  .class-detail .s-list-detail li:nth-child(3):before {
	content: "Average Score: ";
  }
  .class-detail .s-list-detail li:nth-child(4):before {
	content: "Attendance: ";
  }
  .class-detail .s-list-detail li:nth-child(5):before {
	content: "Awards: ";
  }
  .class-detail .s-list-detail li:nth-child(6):before {
	content: "iEd Café: ";
  }
  .class-detail .s-list-detail li:nth-child(7):before {
	content: "Video Watched: ";
  }
  .class-detail .s-list-detail li:nth-child(8):before {
	content: "Words Used: ";
  }
  .class-detail .s-list-detail li:nth-child(9):before {
	content: "Report Card: ";
  }
  .class-detail .col .half:first-child, .class-detail .col .half:last-child {
	padding: 0;
  }
  .class-detail .feedback select {
	width: 100%;
	margin-right: 0;
	margin-bottom: 10px;
  }
  .nbc .intro p.FL {
	float: none;
	width: 100%;
  }
  .nbc .intro .search, .nbc .intro .date {
	width: 50%;
	padding: 0 10px 0 0;
	margin-top: 15px;
  }
  .nbc .nbc-list li {
	width: 100%;
	min-width: inherit;
  }
  .nbc .nbc-list li img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
  }
  #watch-nbc .title {
	padding: 5px 65px 5px 10px;
	font-size: 14px;
  }
  #watch-nbc a.close {
	padding: 5px;
  }
  ul.dashboard-tabs {
	position: relative;
	width: 100%;
	padding: 0 25px;
	margin: 0 auto;
  }

  ul.dashboard-tabs li.dashboard-tab-link {
	width: 48.0%;
	background: #de4848;
	padding: 5px;
	color: #fff;
	text-align: center;
	font-size: 12px;
	cursor: pointer;
	margin: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
  }

  ul.dashboard-tabs li.dashboard-tab-link:hover {
	background: #f46464;
  }

  ul.dashboard-tabs li.dashboard-tab-link.current {
	background: #fff;
	color: #222;
  }
  section.report-card-detail li .FL {
	width: 100%;
  }
  section.report-card-detail li .FR {
	float: left;
	width: 100%;
	text-align: left;
	margin-left: 10px;
  }
  #report-card-detail, #report-card-evidence {
	min-width: 450px;
	width: 100%;
  }
  #report-card-detail .FR {
	display: none;
  }
}

@media screen and (max-width: 680px) {
  .class-detail .title.nbc a.btn {
	position: static;
	width: 100%;
	margin-top: 20px;
	padding: 14px 20px;
  }
  .class-detail .handout-detail i {
	margin: 0 0 0 0;
  }

  #watch-nbc #video_frame.html5_video_control {
	width: 100%;
	height: auto;
	margin: 0px;
  }
  section.progress .quiz .subtitle_long { margin-bottom: 75px; }
  #watch-nbc div.wrapper {
    min-width: min(40vw,700px);
  }
}

@media screen and (max-width: 530px) {
  .full {
	padding-right: 20px;
	padding-left: 20px;
  }
  .col {
	width: 100%;
	padding-right: 10px;
	padding-left: 10px;
  }
  .block { padding: 14px 20px; }
  header { margin-bottom: 25px; }
  header a.name span { display: none; }
  header a.name {
	width: 74px !important;
	border-right: none;
  }
  .instructor header a.notice, .instructor header a.msgr, .instructor header a.dictionary, .instructor header a.hanzi_writer {
	width: 65px;
  }
  .instructor header a.notice span, .instructor header a.msgr span, .instructor header a.dictionary span, .instructor header a.hanzi_writer span {
	left: 32px;
  }
  header a.name i {
	margin-left: 0;
	margin-right: -6px;
  }
  header .full {
	padding-right: 0;
	padding-left: 52px;
  }
  .info-dropdown, .notice-dropdown, .msgr-dropdown, .dictionary-dropdown, .msgr-chat, .material-list-dropdown, .hanzi_writer-dropdown {
	width: 100%;
	right: 0;
	border-right: 0;
	border-left: 0;
	min-width: inherit;
  }
  .msgr-dropdown li .bubble, .msgr-chat li .bubble {
	max-width: 65%;
  }
  .info-dropdown { padding: 25px; }
  .notice-dropdown { padding: 0; }
  .notice-dropdown li div { width: 83%; }
  .info-dropdown .FL, .info-dropdown .FR { float: none; }
  .info-dropdown .FL {
	padding: 0 0 25px 46px;
	border-bottom: 1px solid #d5d5d5;
  }
  .info-dropdown .FR {
	width: auto !important;
	border-left: none;
	padding: 10px 0 0;
  }
  .info-dropdown .FR li {
	flex-basis: auto;
  }
  .info-dropdown .FR li:nth-child(1):after, .info-dropdown .FR li:nth-child(2):after {
	content: "/";
	margin: 0px 15px;
	color: #efefef;
  }
  section.summary .free div, section.f-trip .clearfix div {
	float: none;
	width: 100%;
	padding: 0 !important;
  }
  section.summary .free div.FR, section.f-trip .clearfix div.FR { margin-top: 10px; }
  .instructor .class-sum li.evalue a.evalue-btn, .instructor .class-sum li.survey a.survey-btn {
	position: static;
	top: auto;
	left: auto;
	height: auto;
	width: 100%;
	padding: 11px 14px;
	border-width: 4px;
	line-height: normal;
	overflow: auto;
	margin-top: 15px;
  }
  .instructor .class-sum li.evalue a.evalue-btn span, .instructor .class-sum li.survey a.survey-btn span {
	opacity: 1;
  }
  .instructor .class-sum li.evalue:hover a.evalue-btn, .instructor .class-sum li.survey:hover a.survey-btn {
	width: 100%;
	background-color: transparent;
	color: #de4848;
  }
  .instructor .class-sum li.evalue:hover {
	padding-left:  20px;
  }
  .instructor .class-sum li.survey:hover {
	padding-right:  20px;
  }
  .pagination ul { padding: 40px 0 0; }
  section.forum .reply {
	top: 11px;
	right: 16px;
  }
  section .ivr li .score .small-txt { margin-top: 7px; }
  .forum.inner .title, .class-detail .title.detail, .class-detail .title.nbc { padding: 14px 20px; }
  .forum.inner .title a, .class-detail .title.detail a.btn, .class-detail .title.nbc a.btn {
	position: static;
	width: 100%;
	margin-top: 20px;
	padding: 14px 20px;
  }
  .forum.single .heading, .forum.single ul li.comment>p, .forum.single form div {
	margin-top: 50px;
	margin-right: 0;
  }
  #flag-post.overlay form div, #coupon-code.overlay form div {
	margin-top: 40px;
	margin-right: 0;
  }
  .forum.single ul li>p, .forum.single form div { margin-left: 0; }
  .forum.single .icon {
	top: 15px;
	transform: none;
  }
  .forum.single .icon p {
	display: inline-block;
	width: auto;
	margin-left: 5px;
  }
  .forum.single .content {
	margin-top: 50px;
  }
  .forum.single .content-title {
	margin-top: 10px;
  }
  section.forum .item>div.content {margin-left: 30px; margin-right: 30px; }
  .forum.single li:hover a.flag-btn { display: none; }
  .forum.single form input.btn, #flag-post.overlay form input.btn, #coupon-code.overlay form input.btn {
	position: static;
	top: auto;
	right: auto;
	margin-top: 10px;
	width: 100%;
  }
  .quiz .info .FL, .quiz .info .FR, .feedback .info .FL, .feedback .info .FR {
	float: none;
	width: 100%;
	text-align: left;
  }
  .quiz .info .FR { margin-top: 8px; }
  .quiz li.question.tf .content, .feedback li.question.tf .content { padding-right: 0; }
  .quiz li.question.tf ul, .feedback li.question.tf ul {
	position: static;
	top: auto;
	right: auto;
	margin: 15px 0 0 30px;
  }
  .quiz li.question.tf .toggle, .feedback li.question.tf .toggle {
	width: 100%;
	margin: 0 0 1px;
  }
  .quiz li.question.tf .toggle label, .feedback li.question.tf .toggle label { float: none; }
  .quiz li.question.tf .toggle label span, .feedback li.question.tf .toggle label span { width: 100% !important; }
  .quiz .result {
	padding-top: 25px;
	padding-bottom: 20px;
  }
  .try .enroll, .try .invite {
	float: none;
	width: 100%;
	margin-top: 25px;
	padding-bottom: 0;
  }
  .try-same-height {
	height: auto !important;
  }
  .pay .intro .caption {
	font-size: 30px;
	margin-bottom: 15px;
	line-height: 32px; 
  }
  .pay .intro a {
	width: 100%;
  }
  .pay .intro a i {
	display: none;
  }
  .pay.confirm ul.total .block { padding-bottom: 25px; }
  .pay.confirm .schedule li .date {
	font-size: 20px;
  }
  ul.pay-steps li {
	height: 215px;
	font-size: 14px;
  }
  ul.pay-steps li i {
	font-size: 70px;
	margin: 10px 0 5px;
  }
  .assessment .info li .big-txt {
	font-size: 14px;
	word-wrap: break-word;
  }
  .assessment .submit {
	margin-top: 40px;
  }
  .class-detail .feedback input[type=submit] {
	width: 100%;
  }
  .class-detail .s-list-detail li:nth-child(3), .class-detail .s-list-detail li:nth-child(5), .class-detail .s-list-detail li:nth-child(7) {
	margin-left: 80px;
  }
  .award-t .info .FL, .award-t .info .FR, .evalue-t .info .FL, .evalue-t .info .FR {
	float: none;
  }
  .award-t .award-list ul, .nbc .nbc-list ul {
	text-align: center;
  }
  .award-t .award-list li, .nbc .nbc-list li {
	display: inline-block;
	float: none;
  }
  .evalue-t .accordion .title .name {
	padding-right: 30px;
  }
  .evalue-t .question .rate {
	position: static;
	top: auto;
	right: auto;
	margin-top: 10px;
  }
  .evalue-t .question {
	padding-right: 0;
  }
  .evalue-t .question .trait {
	width: 100%;
	float: none;
  }
  .evalue-t .question .rate select {
	width: 100%;
  }
  .nbc .intro .search, .nbc .intro .date {
	width: 100%;
	padding: 0;
  }
  .nbc .selected-v a.remove-all {
	position: static;
	top: auto;
	right: auto;
	display: block;
	margin-bottom: 15px;
  }
  .nbc .selected-v .heading {
	margin-bottom: 10px;
  }
  .nbc .selected-v input.btn {
	min-width: inherit;
  }
  #adv-score, #s-award, #cafe-record, #video-watched, #words-used, #report-card, #report-card-detail, #report-card-evidence {
	width: 100%;
  }
  .account .info .block { height:auto; }
  section.to-do .ivr .tabs ul.ivr-nav {padding: 0 20px !important;}
}

@media screen and (min-width: 770px) and (max-width: 980px), (max-width: 520px) {
  section.summary .graph, section.summary .info, section.summary .end-intro, section.summary .evalue, section.summary .survey {
	float: none;
	width: 100%;
	text-align: center;
  }
  section.summary .end-intro p:first-child { margin-top: 5px; }
  section.summary .graph {
	border-bottom: 1px solid #e9e9e9;
	padding-bottom: 20px;
  }
}

@media screen and (min-width: 770px) and (max-width: 850px), (max-width: 435px) {
  section.award li {
	width: 100%;
  }
}

@media screen and (max-width: 480px) {
  ul.dashboard-tabs {
	position: relative;
	width: 100%;
	padding: 0 20px;
	margin: 0 auto;
  }

  ul.dashboard-tabs li.dashboard-tab-link {
	width: 100%;
	background: #de4848;
	padding: 5px;
	color: #fff;
	text-align: center;
	font-size: 12px;
	cursor: pointer;
	margin: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
  }

  ul.dashboard-tabs li.dashboard-tab-link:hover {
	background: #f46464;
  }

  ul.dashboard-tabs li.dashboard-tab-link.current {
	background: #fff;
	color: #222;
  }
  #teaching_material_main {
	max-width: 100%;
	margin: 0 auto;
  }
  ul.teaching_material-tabs {
	position: relative;
	width: 100%;
	padding: 0 20px;
	margin: 0 0 20px 0;
	float: none;
  }
  ul.teaching_material-tabs li.teaching_material-tab-link {
	width: 100%;
	background: #de4848;
	padding: 5px;
	color: #fff;
	text-align: center;
	font-size: 12px;
	cursor: pointer;
	margin: 2px;
	height: 50px;
	vertical-align: middle;
	display: flex;
	align-items: center;
	justify-content: center;
  }

  ul.teaching_material-tabs li.teaching_material-tab-link:hover {
	background: #f46464;
  }

  ul.teaching_material-tabs li.teaching_material-tab-link.current {
	background: #fff;
	color: #222;
  }
  .teaching_material-tab-content {
	display: none;
	padding: 0 20px;
  }
}

@media screen and (max-width: 768px) {
.dynamic-week ul {
	width: 300px;
}
.dynamic-week li {
	line-height: 30px;
	height: 90px;
}
}