#vocab-article { /* 600 words */
	padding: 10px 0 30px 0;
	background-color: #f2f2f2;
}

/* fb comment */
.fb-comments-section {
	width: 100%;
    display: block;
    float: left;
    margin: 4.5rem auto;
}

.fb-comments-section .title {
	margin-top: 0;
    font-size: 3rem;
    color: #87c52e;
}

.fb-comments-section #fb-comments {
	background: #f2f2f2;
    padding: 15px 30px;
    border-radius: 10px;
}

a.bottom-back-link {
    position: absolute;
    bottom: 30px;
    left: 45%;
    font-size: 14px;
}

.playfield.article-general-vocabs {
	margin-top: 0;
    padding: 10px 30px 30px;
    font-size: 18px;
    width: 100%;
    background: #ebebeb;
}



.vocab-playfield {
	width: 1100px;
	min-height: 450px;

	padding: 0 0 45px 0;
	margin: 0px auto 44px auto;

	color: #111;
	background: #fff;

	text-align: center;

	position: relative;

	border-radius: 10px;

	-webkit-box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 30%);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 30%);
}

.vocab-playfield nav {
    background: #fff;
    color: #333;
    padding: 5px 10px;
    margin: -20px -30px 10px;
    font-size: 24px;
    letter-spacing: 1px;
}

.vocab-playfield  ul {
	list-style: none;
}

.vocab-playfield  ul li {
	display: block;
}

.vocab-playfield  ul.normal-style {
	list-style: disc inside;
	margin-left: 20px;
}

.vocab-playfield  ul li {
	display: list-item;
	margin: 10px 0;
}



.vocab-playfield .audio-icon:hover {
	cursor: pointer;
}


@media (max-width: 767px) {
	.playfield.article-general-vocabs {
		padding: 0;
	}

	.vocab-playfield {
		padding: 10px 10px 30px;
	}
}



/* Nav */
.vocab-playfield ul.topics-nav {
    margin: 0;
    background: #33abe5;
}

.vocab-playfield ul.topics-nav li {
	display: inline-block;
    font-size: 24px;
    background: #fff;
    color: #111;
    border-radius: 10px 10px 0 0;
}

.vocab-playfield ul.topics-nav li.current {
	background: #87c52e;
	color: #fff;
}


.vocab-guide {
	display: block;
	font-size: 18px;
    max-width: 450px;
    margin: 0 auto 30px;
	background: #fbd309;
    padding: 10px 15px;
    border-radius: 5px;
    color: #333;
    margin-bottom: 30px;
}

.topics-wrapper {
	display: none;
	background: #fff;
	color: #111;
	border-radius: 10px 10px 20px 20px;
	padding: 10px 0;
	margin: 0;
}

.topics-wrapper .login-required-wrapper {
	padding: 30px 0;
}

.topics-wrapper .login-required-wrapper a {
	text-decoration: underline;
}

.topics-wrapper .topics-listing {
	margin-top: 30px;
}

ul.topics-listing li {
    display: inline-block;
    width: 19%;
    min-height: 210px;
    margin: 0 0 20px;
    padding: 0 5px;
    vertical-align: top;
}


ul.topics-listing li:hover {
	cursor: pointer;
}

.topic-wrapper .topic {
	max-height: 60px;
	font-size: 24px;
}

.topic-wrapper img {
	max-width: 100px;
	max-height: 100px;
}

@media (max-width: 767px) {
	ul.topics-listing li {
		min-height: unset;
	}
}


/* words in topic listing page */
.access-control-wrapper {
	max-width: 640px;
    margin: 0 auto;

    font-size: 1.8rem;

	padding: 10px 20px;
    background: #ebebeb;
    color: #333;
    border-radius: 10px;
}

.access-control-wrapper a {
	color: inherit;
	text-decoration: underline;
}

.access-control-wrapper > ul {
	margin-top: 20px;
}

ul.topic-wrapper {
	margin: 0 auto 30px;
	list-style: none;
}

ul.topic-wrapper li {
	display: inline-block;
	vertical-align: middle;
}



img.topic-image {
	max-width: 150px;
}
.topic-name {
	font-size: 4.5rem;
	margin-left: 2rem;
	color: #87c52e;
	text-transform: uppercase;
	font-weight: bold;
}

.word-listing-wrapper {
	width: 80%;
	margin: 30px auto;
}

.words-in-topic {
	list-style: none;
	width: 33%;
	float: left;
}

.words-in-topic li {
	margin-bottom: 30px;
}

.words-in-topic .word {
	color: #33abe5;
	text-transform: uppercase;
    font-weight: bold;
    font-size: 32px;
}

.words-in-topic .word:hover {
	text-decoration: underline;
	cursor: pointer;
}

.words-in-topic .word.learned-word {
	background: #87c52e;
	color: #fff;
    padding: 7px 10px;
    border-radius: 10px;
}


.words-in-topic .learned-label {
	display: inline-block;
	vertical-align: middle;
	margin-left: 5px;

    font-size: 18px;
    text-transform: capitalize;
}

.learned-word-wrapper {
	font-size: 20px;
}

.learned-word-wrapper .learned-word {
    display: inline-block;
    vertical-align: middle;
    color: #000;
}

.vocab-playfield ul.learned-word-wrapper > li {
	display: inline-block;
	width: 48%;
	vertical-align: middle;
	margin-bottom: 10px;
}

/* word intro */

/* Next button */
.next-word-button {
	display: block;


    position: fixed;
    top: 40%;
    right: 12px;


    width: 80px;
    height: 110px;

    padding: 15px;
    text-align: center;
    cursor: pointer;
    text-align: center;
    z-index: 100;

    color: #fff;
    border: 1px solid #aaa;
    background-color: #c6c1c1;
    border-color: #CDCCCB;
    border-radius: 6.2px;
    background-image: url('/static/ToeicTests/images/button_lines_background.png');
    background-position: center center;
    background-repeat: repeat-x;
    -webkit-box-shadow: 0 1px 0 0 rgba(255,255,255,0.2) inset,0 -1px 0 0 rgba(0,0,0,0.05) inset;
    box-shadow: 0 1px 0 0 rgba(255,255,255,0.2) inset,0 -1px 0 0 rgba(0,0,0,0.05) inset;

    text-shadow: 1px 1px 0 #777777;

    -webkit-transition: all 0s ease-out;
    -moz-transition: all 0s ease-out;
    -o-transition: all 0s ease-out;
    transition: all 0s ease-out;
}

.next-word-button:hover{
	color: #ebebeb;
	background-color: #87c52e; /*#FFC800; /*#FFC000; /*#F77020; /*#7ED615; /*#2275D1; */
    /*border-color: #FB843C;*/

    /*text-shadow: 1px 1px 0 #7ED615; /* #2275D1; */

    background-position: 0 -15px;
}

.next-word-button .next-icon {
	display: block;
	width: 100%;
	height: 100%;

	position: absolute;
    top: 20px;

    cursor: pointer;
    text-align: center;

	background-image: url('/static/ToeicTests/images/arrow_next_icon.png');
    background-position: 0 -55px;
    background-size: 40px 105px;
    background-repeat: no-repeat;
}

.next-word-button .next-label {
	width: 100%;
    position: absolute;
    left: 0;
    bottom: 7px;
    text-align: center;
    font-weight: bold;
    color: white;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

@media (max-width: 767px) {
	.next-word-button, .next-word-button#next-ex-btn {
		position:relative;
		margin: 0 auto;
		right: 0;
	    top: 0;
	    margin-bottom: 30px;
	}
}



.word-intro,
.word-family-patterns {
	float: left;
	padding: 0 15px;
}
.word-intro {
	margin: 0;
	width: 45%;
}
.word-family-patterns {
	width: 55%;
}

.word-intro .word {
	text-transform: uppercase;
    color: #33abe5;
    font-weight: bold;
    font-size: 56px;
    letter-spacing: 2px;
    margin-bottom: 0;
    word-wrap: break-word;
}

.word-intro .pos {
	text-transform: lowercase;
    font-size: 18px;
    vertical-align: middle;
}
.word-intro .audio-icon.main-audio {
    display: inline-block;
    max-width: 40px;
}

.word-intro .audio-info-wrapper li {
	display: inline-block;
	padding: 0 3px;
	color: #33abe5;

}
.word-intro .ipa  {
	font-size: 20px;
}

.word-intro .fb-like-wrapper {
   /* position: relative;
    top: -4px;*/
}

.word-intro .google-plus-wrapper {
    position: relative;
    top: 4px;
}

.word-intro .fb-comments-count-wrapper {
	color: #111;
    text-decoration: none;
    font-size: 18px;
}
.word-intro .fb-comments-count-wrapper:hover {
	text-decoration: underline;
}

.word-intro .fb-comments-count-wrapper .comments-count {
	display: inline-block;
    background: #ebebeb;
    padding: 2px 8px;
    color: #111;
}


.word-intro .meaning {
	max-width: 100%;
    margin: 20px 0;
	font-size: 40px;
	color: #33abe5;
}

.word-intro .meaning-image-wrapper {
	position: relative;
	min-height: 300px;
}

.word-intro .meaning-image {
	position: absolute;
    top: 0;
    left: 32.5px;

	max-height: 300px;
	max-width: 400px;
    min-width: inherit;
}




/* word family & patterns */
.word-family-patterns {
	margin-top: 20px;
}

.word-family-patterns .word-family,
.word-family-patterns .usage-patterns {
	width: 100%;
	margin-bottom: 30px;
	color: #333;
	font-size: 1.8rem;
	background: #fff;
	border-radius: 10px;
}

.word-family-patterns .heading-wrapper {
	background: #33abe5;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
}

.heading-wrapper .heading {
    margin: 0 10px 0;
    padding: 10px 0;
    font-size: 32px;
    display: inline-block;
}

.word-family .heading {
    color: #fff;
}

.usage-patterns .heading {
	color: #fff;
}

.word-family .word-wrapper,
.usage-patterns .pattern-wrapper,
.no-usage-pattern-wrapper,
.no-word-family-wrapper {
	padding: 5px;
    margin: 0;
}

.word-family .word-wrapper.current,
.usage-patterns .pattern-wrapper.current {
	background: #fff;
	border-style: inset;
    border-color: #33abe5;
    border-width: 2px;
}



.word-family .word-wrapper li,
.usage-patterns .pattern-wrapper li {
	padding: 5px;
	margin: 0;
}

.word-family .word-wrapper:hover,
.usage-patterns .pattern-wrapper:hover {
	cursor: pointer;
}

.word-wrapper .audio-wrapper,
.pattern-wrapper .audio-wrapper{
	width: 10%;
	float: left;
}

.word-wrapper .audio-icon,
.pattern-wrapper .audio-icon {
	width: 20px;
}

.word-wrapper .word,
.word-wrapper .meaning,
.word-wrapper .view-example,
.pattern-wrapper .pattern,
.pattern-wrapper .meaning,
.pattern-wrapper .view-example,
.word-wrapper .view-example {
	float: left;
}

.word-wrapper .word {
	width: 35%;
}
.word-wrapper .meaning {
	width: 40%;
}

.pattern-wrapper .view-example,
.word-wrapper .view-example {
	width: 15%;
	text-decoration: underline;
	font-size: 80%;
}

/* for patterns, there is no audio for pattern */
.pattern-wrapper .pattern {
	width: 45%;
}
.pattern-wrapper .meaning {
	width: 40%;
}



.word-wrapper .word,
.pattern-wrapper .pattern {
	font-size: 2rem;
	font-weight: bold;
}


.examples .example-wrapper {
	display: none;

    color: #333;
    background: #fbd309; /*#0F0B19;*/
    padding: 10px 15px;

    font-size: 28px;
    line-height: 42px;

    border: 5px solid #fbd309;
    border-radius: 10px;

}

.example-wrapper .audio-icon {
	display: none;
	float: left;
	max-width: 120px;
}

.example-wrapper .content {
	color: #333;
	font-size: 2.4rem;
    line-height: 40px;
}

.example-wrapper .content:hover {
	cursor: pointer;
}

.example-wrapper .content .wf {
	font-weight: bold;
}
.example-wrapper .content .up {
	font-weight: bold;
	font-style: italic;
}

.example-wrapper .trans {
    margin-top: 15px;
    font-size: 2rem;
    line-height: 32px;
    font-style: italic;
}

/* General vocabs */


.general-vocabs .progress-wrapper {
	max-width: 840px;
    margin: 35px auto 0;
    position: relative;
}
.general-vocabs .progress-wrapper.short {
	max-width: 460px;
}

.general-vocabs .progress-wrapper .progress-desc {
	text-align: left;
    margin-bottom: 45px;
    display: block;
}

.general-vocabs .progress-wrapper .view-learned-words-link {
	position: absolute;
	top: 10px;
	right: 10px;
}

.general-vocabs .progress-wrapper .progress.small {
	height: 10px;
}

@media (max-width: 767px) {
	.general-vocabs .progress-wrapper {
		padding: 0 20px;
	}

	.general-vocabs .progress-wrapper .view-learned-words-link {
		position: relative;
		top: 60px;
		right: 0;
	}
}

.general-vocabs .header {
    margin-top: 0;
    background-color: #fff;
    padding: 10px;
}

@media (max-width: 767px) {
	#general-vocabs {
		padding: 0 0 30px;
	}
	.general-vocabs .header {
		margin: 0;
		padding: 5px 20px;
	}
}

.general-vocabs table.words-listing {
	display: block;
	width: 100%;
	margin: 30px auto;
	padding: 20px;

}

.general-vocabs .words-listing tr {
	width: 100%;
}

.general-vocabs .words-listing th {
	text-align: center;

	/*
    font-size: 24px;
    font-weight: normal;
    background: #eee;
    padding: 5px 10px;
    color: #333;*/

    padding: 5px 15px;
    color: #fff;
    background: #33abe5;
    border-radius: 2px;
    font-size: 24px;
}

.general-vocabs .words-listing td {
	position: relative;
	padding: 20px 20px 60px;
	vertical-align: top;
}


 .general-vocabs .words-listing .winfo-wrapper {
	width: 35%;
}
.general-vocabs .words-listing td.wfamily-wrapper {
	width: 25%;
	text-align: left;
}
.general-vocabs .words-listing td.patterns-wrapper {
	width: 40%;
	text-align: left;
}

@media (max-width: 767px) {
	 .general-vocabs table,
	 .general-vocabs thead,
	 .general-vocabs tbody,
	 .general-vocabs th,
	 .general-vocabs td,
	 .general-vocabs tr {
		display: block;
		width: 100% !important;
	}

	.general-vocabs tr {
		padding-bottom: 20px;
	}

	.general-vocabs .words-listing td {
		padding: 10px 20px;
	}
}

.general-vocabs .wfamily-wrapper .word,
.general-vocabs .patterns-wrapper .pattern,
.general-vocabs .example-wrapper {
	font-size: 20px;
	vertical-align: middle;
}

.general-vocabs .wfamily-wrapper .word {
	font-weight: bold;
}

.general-vocabs .example-wrapper .example-trans {
	font-size: 18px;
	color: #999;
}

.general-vocabs .example-wrapper .example-label {
    font-size: 80%;
    vertical-align: middle;
}

.general-vocabs .example-wrapper .audio-icon {
	float: none;
}


.general-vocabs .words-listing img {
	max-width: 250px;
	max-height: 250px;

}

.general-vocabs .words-listing .meaning-image {
	margin-top: 15px;
}

.general-vocabs .words-listing .audio-icon {
	display: inline-block;
    max-width: 15px;
}


.general-vocabs .words-listing .audio-icon.main-audio {
	vertical-align: middle;
	background-image: url(/static/ToeicTests/images/audio_round_icons_sprites.png);
    background-size: 200px 40px;
    background-repeat: no-repeat;
    background-color: transparent;
    height: 40px;
    width: 40px;
    cursor: pointer;
    margin-top: 2px;
    max-width: none;
}

.general-vocabs .winfo-wrapper .word-position {
	font-size: 28px;
}



.general-vocabs .winfo-wrapper .word {
	color: #0478d1; /*#33abe5;*/
    font-weight: bold;
    font-size: 28px;
    word-wrap: break-word;
}

.general-vocabs .winfo-wrapper > ul > li {
	display: inline-block;
	vertical-align: middle;
}

.general-vocabs .winfo-wrapper .meaning {
    font-size: 24px;
    /*color: #33abe5;*/
}

.general-vocabs .winfo-wrapper .pronuncs-wrapper {
	font-size: 20px;
}


/* General vocabs simple listing */
#vocab-cats {
	background: #fff;
}

#vocab-cats,
#vocab-cats h2 {
	text-align: left;
}


#vocab-cats .cat {
	max-width: 1040px;
    margin: 30px auto;
    padding-left: 60px;
    padding-right: 60px;
}

.cat .title {
    display: inline-block;
    margin: 0;
    padding: 10px 20px;
    color: #fff;
    border-radius: 5px;
}

.cat .title-desc {
	margin: 30px auto;
}

 .cat .words-wrapper {
	background-color: #f2fcfe;
    border: 1px solid #d0e1f2;
    padding: 30px 60px;
    border-radius: 10px;
}

.cat .difficult-words-notice {
	background-color: #FADED7;
    padding: 10px 20px;
    border-radius: 5px;
    margin: 0 auto 30px auto;
}

.cat .view-diff-words-btn,
.cat .view-all-words-btn {
	max-width: 240px;
	display: inline-block;
	color: #fff;
}


ul > li.vocab-wrapper {
	padding-top: 0.7em;
    padding-bottom: 0.7em;
    position: relative;
}

 .vocab-wrapper > * {
	display: inline-block;
    vertical-align: middle;
}


 .vocab-wrapper .vocab-position {
 	margin-right: 5px;
 }
.vocab-wrapper .vocab {
    font-size: 24px;
}

.vocab-wrapper .link-to-def {
	color: #33abe5;
	text-decoration: underline;
}

.vocab-wrapper .audio-wrapper {
	margin: 0 10px;
}

.vocab-wrapper .source,
.vocab-wrapper .next-review-date {
	float: right;
	margin-right: 5px;
	font-size: 16px;
}


.learning-nav.ui-state-active a,
.learning-nav.ui-state-active a:link,
.learning-nav.ui-state-active a:visited {
    color: #33abe5;
    text-decoration: none;
}
#learning .title {
	background: #33abe5;
}

.remembered-nav.ui-state-active a,
.remembered-nav.ui-state-active a:link,
.remembered-nav.ui-state-active a:visited {
    color: #87C52E;
    text-decoration: none;
}
#remembered .title {
	background: #87c52e;
}

@media (max-width: 767px) {
	#vocab-cats .cat {
		padding: 30px 10px;
	}

	.vocab-wrapper > .audio-wrapper,
	.vocab-wrapper > .meaning {
		display: block;
    	margin: 5px 0;
    	text-align: center;
	}

	.vocab-wrapper > .meaning {
		margin: 10px 0;
	}

	.ui-tabs .ui-tabs-panel,
	.cat .words-wrapper {
		padding: 10px;
	}

	ul > li.vocab-wrapper {
		padding-top: 1.2em;
	    padding-bottom: 1.2em;
    }

}



/* Review tests */
.review-test-progress-wrapper {
	position: relative;
}
.review-test-progress-wrapper .ui-progressbar-value {
    position: relative;
    background: #33abe5;
    border: 1px solid #33abe5;
}

.review-test-progress-wrapper .ui-progressbar-value .progress-value {
    position: absolute;
    font-size: 20px;
    left: 30%;
    top: 0%;
}

.review-test-name {
	position: absolute;
    top: 2px;
    right: 10px;
    color: #666;
    font-size: 18px;
}

#test {
	display: none;
}

.test-title {
	color: #33abe5;
}

.start-test {
	display: block;
	margin: 60px auto 30px;
    max-width: 400px;
    font-size: 24px;
}

.view-shortcuts-instrs {
	font-size: 16px;
}

.ex-wrapper {
	display: none; /*js will control the display */
	margin: 30px;
}

.ex-wrapper .ex-instruction {
	color: #111;
}


.ex-wrapper .correct-answer,
.ex-wrapper .incorrect-answer {
    min-width: 200px;
    min-height: 51px;
}

.ex-wrapper .correct-answer {
	color: #fff;
	background-color: #33abe5;
	text-transform: uppercase;
}

.ex-wrapper .options-wrapper .incorrect-answer {
	background-color: #EE473B;
}

.ex-wrapper .options-wrapper {
	max-width: 80%;
    margin: 0 auto;
}

.ex-wrapper .options-wrapper > li {
	display: inline-block;
	font-size: 32px;

    margin: 10px;
    border-radius: 10px;
    padding: 1.07rem 2rem;

    position: relative;
}

.ex-wrapper .options-wrapper .option-num {
	position: absolute;
    top: -7px;
    right: -7px;
    font-size: 10px;
    color: #333;
    background: #F1FCFE;
    border-radius: 100% 100%;
    padding: 1px 4px;
}

.ex-wrapper .options-wrapper .vocab-page-link {
	display: block;
	color: #fff;
    font-size: 18px;
    text-decoration: underline;
    text-transform: none;
}


.ex-wrapper .options-wrapper li:hover {
	cursor: pointer;
}

#next-ex-btn {
	top: 30%;
	right: 32px;
}






/* test result */
#test-result {
	display: none;
}

#test-result .results-wrapper {
	list-style: none;
    margin: 30px;

    font-size: 18px;
}

#test-result .results-wrapper > .img-wrapper,
#test-result .results-wrapper > .info-wrapper  {
	display: inline-block;
	vertical-align: middle;
}

#test-result .results-wrapper .img-wrapper {
	width: 40%;
	margin-right: 9%;
}

.results-wrapper .img-wrapper img {
	max-height: 450px;
	width: auto;
}

#test-result .results-wrapper .info-wrapper {
	position: relative;
	width: 50%;
	min-height: 450px;

	padding: 30px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 30%);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 30%);

}

.results-wrapper .info-wrapper .result-label {
	text-align: left;
    font-family: 'Roboto-Bold';
    margin-top: 0;
}

.results-wrapper .info-wrapper .stats {
	text-align: left;
}

.info-wrapper .stats > li {
	margin: 7.5px 0;
}

.info-wrapper .stats > li img {
	margin-right: 10px;
}


.info-wrapper .stats .correct-count,
.info-wrapper .stats .incorrect-count {
	font-size: 150%;
    font-family: 'Roboto-Bold';
}

#test-result #test-missed,
#test-result #test-passed {
	display: none;
	margin-top: 30px;
}

#test-result .wrong-answers,
#test-result .correct-answers {
	margin-left: 60px;
}

#test-result .wrong-answers li,
#test-result .correct-answers li {
	display: inline-block;
    font-size: 20px;
    margin-right: 10px;
}

#test-result .wrong-answers li a {
	text-decoration: underline;
    background: #DFDDDF;
    padding: 5px;
    border-radius: 3px;
}

#test-result .correct-answers li a {
	text-decoration: underline;
    background: #fff;
    padding: 5px;
    border-radius: 3px;
}

#test-result .info-wrapper .next-actions-wrapper {
    margin: 60px auto 30px;
    text-align: center;
}

#test-result .next-actions-wrapper .next-action-label {
	text-align: center;
    background-color: #fbd309;
    padding: 5px 10px;
    border-radius: 10px;
}


.results-wrapper .info-wrapper .learned-words-link {
	position: absolute;
    top: 30px;
    right: 10px;
    font-size: 90%;
}

.results-wrapper .info-wrapper .dashboard-link {
	display: block;
	margin-top: 15px;
}



.review-words-btn,
.continue-learning-btn {
    max-width: 400px;
    margin: 0 auto;
}

@media (max-width: 767px) {
	#test-result .results-wrapper {
	    margin: 30px 10px;
	    max-height: none;
	}

	#test-result .results-wrapper > .img-wrapper,
	#test-result .results-wrapper > .info-wrapper  {
		display: block;
		width: 100%;
		margin: 0;
		vertical-align: middle;
	}

	#test-result .results-wrapper > .info-wrapper {
		height: auto;
	}

	.results-wrapper .img-wrapper img {
		width: 90%;
	}


}


/* meaning-word ex */
.meaning-word-ex .meaning {
	margin: 30px auto 45px;
	font-size: 40px;
	text-align: center;
}

.meaning-word-ex .words-wrapper li:hover {
	cursor: pointer;
}

.meaning-word-ex .pos {
	display: block;
    font-size: 60%;
}

.ex-wrapper .example-text .ex-audio {
	max-width: 40px;
	margin-left: 10px;
}

@media (max-width: 767px) {
	.meaning-word-ex .meaning {
		margin: 10px auto;
	}
}



/* audio word detection */
.audio-word-detection-ex .audio-wrapper {
	margin: 30px auto 45px;
	padding: 0 30px;
}

.ex-wrapper .audio-icon {
    max-width: 80px;
}

.audio-word-detection-ex .audio-text,
.meaning-hidden-typing-ex .meaning,
.meaning-word-ex .example-text {
    margin: 30px 0 15px;
    font-size: 32px;
}


.audio-hidden-typing-ex .audio-text-wrapper,
.audio-word-detection-ex .audio-text-trans,
.audio-hidden-typing-ex .audio-text-trans,
.meaning-word-ex .example-text-trans,
.meaning-hidden-typing-ex .example-text-trans  {
	font-size: 28px;
	margin-top: 15px;
}

.audio-word-detection-ex .audio-text .ans-word,
.meaning-word-ex .example-text .ans-word {
	color: #33abe5;
    text-transform: uppercase;
    font-weight: bold;
}

.audio-text-trans .syllable-ipa {
	display: block;
    margin-top: -5px;
    margin-left: 170px;
}


/* Typing exs */
.audio-hidden-typing-ex .shown-correct-ans {
	text-decoration: underline;
}

.audio-hidden-typing-ex .audio-wrapper .hidden-texts-audio-icon,
.audio-hidden-typing-ex .audio-wrapper .audio-text {
	display: inline-block;
	vertical-align: middle;
	overflow-wrap: break-word;
	font-size: 32px;
}

.audio-hidden-typing-ex .audio-wrapper .hidden-texts-audio-icon {
	max-height: 120px;
}

.audio-hidden-typing-ex .audio-wrapper .audio-text .hint {
	display: none;
}


.meaning-hidden-typing-ex .meaning {
	font-style: italic;
}

.meaning-hidden-typing-ex .example-text {
	margin-top: 30px;
    font-size: 32px;
}

.ex-wrapper .hint-char,
.ex-wrapper .wrong-char {
    color: #fff;
    padding: 1px 3px;
    border-radius: 3px;
}

.ex-wrapper .hint-char {
	background: #38A3E8;
}

.ex-wrapper .wrong-char {
	background: red;
}



.customer-ans-wrapper {
	margin: 45px auto 30px;
}


.ex-wrapper .hidden-word .answer {
	text-decoration: underline;
}

.customer-ans-wrapper .instr-msg {
	margin-bottom: 20px;
	font-size: 28px;
	color: #38A3E8;
}

.customer-ans-wrapper .instr-msg.congrats {
	font-size: 38px;
}


.customer-ans-wrapper .customer-ans {
	display: block;
	margin: 0 auto;

	max-width: 260px;
    padding: 5px 10px;
    font-size: 32px;
    line-height: 40px;
    /* color: #000; */
    color: #38A3E8;
    border: 1px solid;
    border-radius: 5px;
}

.customer-ans-wrapper .customer-prev-ans {
    display: none;
    margin: 0 auto 10px;
    font-size: 28px;
    color: red;
    text-align: center;
}

.customer-ans-wrapper .customer-prev-ans:before {
    content: '';
    background: url(/static/ToeicTests/images/wrong_answer_icon.png) left top/ 30px 30px no-repeat;
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}


.ex-wrapper .customer-ans-wrapper .submit-customer-ans {
    width: 200px;
    margin: 10px auto 0;
    position: relative;
}

.ex-wrapper .submit-customer-ans .shortcut,
.start-test .shortcut,
.continue-learning-btn .shortcut,
.next-word-button .shortcut {
	position: absolute;
    color: #333;
    display: block;
    bottom: -50%;
    left: 25%;
    font-size: 14px;
}

.start-test .shortcut,
.continue-learning-btn .shortcut  {
	left: 35%;
    font-size: 18px;
}

.next-word-button .shortcut {
	bottom: -40%;
	left: 0;
}


.shortcuts-instrs-wrapper {
	display: none; /* initially */
	font-size: 18px;
}

ul.shortcuts-instrs li.shortcut-wrapper {
	display: inline-block;
	width: 33%;
	vertical-align: top;
}

ul.shortcuts-instrs li.shortcut-wrapper h3 {
	margin-bottom: 20px;
}

ul.shortcuts-instrs li.shortcut-wrapper p {
	font-style: italic;
}

/* Flashcards */
.vocab-playfield ul.flashcards-wrapper {
	width: 840px;
   	margin: 30px auto;
}



.vocab-playfield ul.flashcards-wrapper > li {
	display: inline-block;
	margin: 3px;
	width: 200px;
	height: 200px;
}

.flashcards-wrapper li img.meaning-img {
	display: block;
    margin: 0 auto;

	max-height: 140px;
	max-width: 100%;
}

.flashcards-wrapper li .front,
.flashcards-wrapper li .back {
	border-radius: 5px;
	-webkit-box-shadow: 0px 0px 3px 0px rgb(0 0 0 / 30%);
   	-moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
   	box-shadow: 0px 0px 3px 0px rgb(0 0 0 / 30%);
}


.flashcards-wrapper li .front {
	color: #111;
	background: #fff;
	vertical-align: middle;
}

.flashcards-wrapper .front .meaning {
    display: block;
    padding: 5px;
}

.flashcards-wrapper .front .word-hint {
	position: absolute;
    background: #ebebeb;
    opacity: 0.3;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    text-align: left;
    padding: 2px 5px 2px 5%;
}

.flashcards-wrapper .front .meaning.no-img {
	text-align: center;
    margin-top: 30%;
    /*
	display: block;
    height: 60px;
    position: absolute;
    top: 50%;
    margin-top: -30px;
    */
}


.flashcards-wrapper li .back {
	padding-top: 25%;
}


.flashcards-wrapper .back .audio-wrapper {
	margin-top: 10px;
}

.flashcards-wrapper .card.viewed {
	border: 3px solid #33abe5;
}



@media (max-width: 980px) {
	.vocab-playfield,
	.fb-comments-section {
		width: 100%;
		float: none;
		margin-top: 0;
	}

	.fb-comments-section #fb-comments {
		padding: 0;
		background: none;
	}

	.word-listing-wrapper {
		width: 100%;
	}

	.word-intro .audio-icon.main-audio {
		left: 5%;
	}

	.word-intro .meaning {
		max-width: 80%;
	}

	.word-family-patterns .usage-patterns,
	.word-family-patterns .word-family {
		width: 100%;
		float: none;
	}

	.word-family-patterns .word-family {
		margin-top: 30px;
	}

	.pattern-wrapper .pattern,
	.pattern-wrapper .meaning {
		width: 100%;
	}

	.word-wrapper .audio-wrapper,
	.pattern-wrapper .audio-wrapper {
		width: 30%;
	}
	.word-wrapper .word {
		width: 70%;
		text-align: left;
	}
	.word-wrapper .meaning,
	.pattern-wrapper .view-example,
	.word-wrapper .view-example {
		width: 100%;
	}

	.example-wrapper .audio-icon  {
		float: none;
	}

	/* review tests */
	.ex-wrapper {
		margin: 0;
	}
	.ex-wrapper .options-wrapper {
		max-width: 80%;
	}

	ul.shortcuts-instrs li.shortcut-wrapper {
		display: block;
		width: 100%;
		margin: 30px auto;
	}

	.vocab-playfield ul.flashcards-wrapper {
		/* flashcards */
		width: 100%;
	    margin: 30px auto;
	}

	.vocab-playfield ul.flashcards-wrapper > li {
		height: 200px;
	    width: 200px;
	    margin: 30px auto;
	    display: block;
	}

}


@media (max-width: 980px) { /* cover Ipad as well */
	#vocab-article {
		padding: 10px 0 30px;
	}

	.vocab-playfield ul.topics-nav {
		margin: 0;
	}

	ul.topics-listing li {
		width: 48%;
	}

	.words-in-topic {
		width: 100%;
    	float: none;
    	padding: 0 10px;
    	text-align: left;
	}

	.word-intro,
	.word-family-patterns {
		width: 100%;
		float: none;
	}

	.word-intro .audio-info-wrapper li {
		padding: 0 10px;
	}

	.word-intro .meaning-image-wrapper {
	}

	.word-intro .meaning-image {
		width: 100%;
		min-width: initial;
		position: relative;
		left: 0;
	}

	.word-intro .meaning-image-mark {
		display: none;
	}

	.word-intro .audio-icon.main-audio {
		position: relative;
    	margin-bottom: 30px;
    	max-width: 60px;
	}

	.word-intro .meaning {
		max-width: 100%;
    	font-size: 32px;
	}

	/* Usage patterns & word family */
	.word-family-patterns {
		margin-top: 60px;
	}
	.word-family .word-wrapper,
	.usage-patterns .pattern-wrapper,
	.no-usage-pattern-wrapper,
	.no-word-family-wrapper {
		max-height: none;
		margin-bottom: 10px;
	}

	.heading-wrapper .heading {
		font-size: 28px;
	}
	.heading-wrapper .click-to-view {
		display: block;
	}

	.all-usage-patterns-wrapper {
		padding-bottom: 10px;
	}

	/* testing */
	.ex-wrapper .options-wrapper {
		max-width: 100%;
	}

}