/* For desktop browser */
@media (max-width : 1500px) {
	
	#top_page_section .game_small {
		width: 300px;
	}
}

/* For desktop browser */
@media (max-width : 1465px) {
	.music_training_game_small dl dd, .music_training_game_small dl dt {
		width: 340px;
	}

	.getting_started_sections {
		width: 75%;
	}
}


/* For desktop browser */
@media (max-width : 1425px) {
	.music_training_game_small dl dd, .music_training_game_small dl dt {
		width: 330px;
	}

	.information_for_teachers_screenshots {
		width: 65%;
	}
}


/* For desktop browser */
@media (max-width : 1400px) {
	.music_training_game_small dl dd, .music_training_game_small dl dt {
		width: 320px;
	}
}


/* For desktop browser */
@media (max-width : 1375px) {
	.music_training_game_small dl dd, .music_training_game_small dl dt {
		width: 310px;
	}
	
	#top_page_section .game_small {
		width: 270px;
	}
}


/* For desktop browser */
@media (max-width : 1335px) {
	.music_training_game_small dl dd, .music_training_game_small dl dt {
		width: 300px;
	}
}


/* For desktop browser */
@media (max-width : 1315px) {
	.getting_started_sections {
		width: 80%;
	}
	
	.game_small {
		width: 290px;
	}
	
	#top_page_section .game_small {
		width: 270px;
	}

	.music_training_game_small dl dd, .music_training_game_small dl dt {
		width: 290px;
	}

	.information_for_teachers_screenshots {
		width: 70%;
	}
}


/* For desktop browser */
@media (max-width : 1280px) {
	.music_training_game_small dl dd, .music_training_game_small dl dt {
		width: 280px;
	}

	.information_for_teachers_screenshot:hover {
		transform: scale(3.2, 3.2);
	}
	
	#top_page_section .game_small {
		width: 240px;
	}
}


/* For desktop browser */
@media (max-width : 1245px) {
	.getting_started_sections {
		width: 85%;
	}
	
	.all-games {
		width: 100%;
	}

	.music_training_game_small dl dd, .music_training_game_small dl dt {
		width: 270px;
	}

	.information_for_teachers_screenshots {
		width: 75%;
	}
}


/* For desktop browser */
@media (max-width : 1215px) {
	#top_page_section {
		width: 90%;
	}
}


/* For desktop browser */
@media (max-width : 1190px) {
	.music_training_game_small dl dd, .music_training_game_small dl dt {
		width: 250px;
	}

	.fundamentals .teaser_text {
		width: 390px;
	}
}

/* For desktop browser */
@media (max-width : 1160px) {
	.game_small {
		width: 250px;
	}

	.which-games-are-best-for-me-section .game_small {
		width: 220px;
	}	
	
	.which-games-are-best-for-me-section div#games-column {
		width: 100%;
	}
		
	.getting_started_sound_i_course, .getting_started_pitch_i_course, .getting_started_scales_i_course, .getting_started_intervals_i_course {
		width: 340px;
	}

	/*.all-games {
		width: 95%;
	}*/

	.information_for_teachers_screenshots {
		width: 80%;
	}

	.contact-message-form {
		width: 75%;	
	}
}


/* For desktop browser */
@media (max-width : 1140px) {
	.music_training_game_small dl dd, .music_training_game_small dl dt {
		width: 220px;
	}

	.fundamentals .teaser_text {
		width: 340px;
	}
	
	#top_page_section .game_small {
		width: 240px;
	}
}

/* For desktop browser */
@media (max-width : 1100px) {
	/* .main-content { */
		/* padding-left: 80px; /* Same width as the vertical menu  */ */
	/* } */
	
	.menu-item-icon {
		display: block;
		margin: auto;
	}
	
	div.side_margin, div.media-reviews, div.customer-kudos, article.node--type-page div.course-description, article.node--type-book, article.node--type-page, div.terms_of_service, div.privacy_policy, div.site_faq, div.getting_started_with_music_theory {
		margin: auto 10px; 
		padding-right: 10px;
	}
	
	/*.music_training_game_small dl dd, .music_training_game_small dl dt {
		width: 290px;
	}*/

	.information_for_teachers_screenshot:hover {
		transform: scale(3, 3);
	}

	.messages__wrapper {
		/* margin-left: 80px; */ /* No need to have margin for drupal message as the menu due to which the margin was needed is not displayed by default */
	}

	/* .web_footer_links { */
		/* margin-left: 80px; */
	/* } */


	/* .sf-menu .games-menu-icon, */
	/* .sf-menu .courses-menu-icon, */
	/* .sf-menu .fundamentals-menu-icon, */
	/* .sf-menu .teachers-menu-icon, */
	/* .sf-menu .students-menu-icon, */
	/* .sf-menu .ranks-menu-icon, */
	/* .sf-menu .premium-menu-icon, */
	/* .sf-menu .settings-menu-icon, */
	/* .sf-menu .progress-report-menu-icon,  */
	/* .sf-menu .my-account-menu-icon,  */
	/* .sf-menu .user-profile-menu-icon, */
	/* .sf-menu .signout-menu-icon { */
		/* padding-left: 0 !important; */ /* no padding */
		/* background-position: center !important; */ /* background image horizontally in center */
	/* } */

	/* .sf-menu .all-games-menu-item { */
		/* display: block; */
		/* margin-left: 5px !important; */
		/* padding-left: 35px !important; */
		/* background-image: url( '/sites/kichijoji.thetamusic.com/files/images/menu_icons/eighth_note_ascending.png' ) !important; */
		/* background-repeat: no-repeat !important; */
		/* background-size: 20px 20px !important; */
		/* background-position: top 10px left 5px !important; */
	/* } */

	/* .sf-menu .all-courses-menu-item { */
		/* display: block; */
		/* margin-left: 5px !important; */
		/* padding-left: 35px !important; */
		/* background-image: url( '/sites/kichijoji.thetamusic.com/files/images/menu_icons/courses.png' ) !important; */
		/* background-repeat: no-repeat !important; */
		/* background-size: 20px 20px !important; */
		/* background-position: top 10px left 5px !important; */
	/* } */

	/* .sf-menu .all-ranks-menu-item { */
		/* display: block; */
		/* margin-left: 5px !important; */
		/* padding-left: 35px !important; */
		/* background-image: url( '/sites/kichijoji.thetamusic.com/files/images/menu_icons/ranks.png' ) !important; */
		/* background-repeat: no-repeat !important; */
		/* background-size: 20px 20px !important; */
		/* background-position: top 10px left 5px !important; */
	/* } */

}


/* For desktop browser */
@media (max-width : 1075px) {	
	.music_training_game_small dl dd, .music_training_game_small dl dt {
		width: 200px;
		font-size: smaller;
	}

	.information_for_teachers_screenshots {
		width: 85%;
	}

	#top_page_section {
		width: 95%;
	}
}


/* For desktop browser */
@media (max-width : 1075px) {	
	.music_training_game_small dl dd, .music_training_game_small dl dt {
		width: 175px;
	}
}

/* For desktop browser */
/*@media (max-width : 1020px) {	
	.music_training_game_small dl dd, .music_training_game_small dl dt {
		width: 270px;
	}

	.all-games {
		width: 98%;
	}
}*/


/* For desktop browser */
@media (max-width : 1000px) {
	.game_small {
		width: 230px;
	}
	
	#top_page_section .game_small {
		width: 210px;
	}

	.getting_started_sound_i_course, .getting_started_pitch_i_course, .getting_started_scales_i_course, .getting_started_intervals_i_course {
		width: 300px;
	}

	/*.music_training_game_small dl dd, .music_training_game_small dl dt {
		width: 250px;
	}*/

	.information_for_teachers_screenshots {
		width: 95%;
	}

	.information_for_teachers_screenshot:hover {
		transform: scale(2.5, 2.5);
	}
	
	div.fundamentals, div.play_by_ear {
		margin: 25px 5% auto;		
	}
}


/* For desktop browser */
@media (max-width : 960px) {
	.getting_started_games {
		width: 650px;
	}

	/*.music_training_game_small dl dd, .music_training_game_small dl dt {
		width: 230px;
	}*/
}


@media (max-width : 920px) {
	
	.music_training_long_game_descriptions {
		width: auto;
	}
	
	.which-games-are-best-for-me-section .game_small dl dd, .which-games-are-best-for-me-section .game_small dl dt {
		text-align: left;
	}
	
	/* Game icon */
	.all-games .teaser_image,
	.which-games-are-best-for-me-section {
		max-width: 100%;
		width: auto;
		height: auto;
		/*padding: none;*/
		float: none;
		text-align: center;
	}
	
	/* Game title and description */
	.all-games .teaser_text,
	.which-games-are-best-for-me-section .teaser_text {
		width: 100%;
	}
	
	/* Music Training Gmaes page: Game title and description */
	.all-games .teaser_title,
	.which-games-are-best-for-me-section .teaser_title {
		clear: both;
		font-size: 1em;
	}
	
	/* Music Training Gmaes page: Game description in the game box */
	.all-games .teaser_body,
	.which-games-are-best-for-me-section .teaser_body {
		clear: both;
		font-size: 1em;
	}	
}


/* For desktop browser */
@media (max-width : 895px) {
	.getting_started_sound_i_course, .getting_started_pitch_i_course, .getting_started_scales_i_course, .getting_started_intervals_i_course {
		width: 280px;
	}
	
	/*.all-games {
		width: 100%;
	}*/

	/*.music_training_game_small dl dd, .music_training_game_small dl dt {
		width: 205px;
	}*/

	.information_for_teachers_screenshots {
		width: 100%;
	}

	.fundamentals .teaser_text {
		width: 300px;
	}
}


@media (max-width : 830px) {
	.music_training_game_small dl dd, .music_training_game_small dl dt {
		width: 155px;
	}
}

/* Device width <= 800px */
@media (max-width : 800px) {

	.main-content {
		padding-left: 0;
	}
	
	/* Input field to use for mobile responsive site */
	.theta_input_field {
		width: 100%;
	}

	body {
		/*font-size: 1.8rem;*/
		background:#ffffff;
	}

	h1, h1.page-header {
		font-size: 2.5rem;
	}
	
	h2, h2.page-title {
		font-size: 2.3rem;
	}

	#page-inner {
		width: 100%;
	}
	
	/* Header containing theta music logo and menu */
	header {
		/*background-color: #b7d5e3;*/ /*#d6eac0;*/
		/*padding: 0 1.5vw;*/
		height: 8vw; /* Header height including padding above & below logo and menu */
		line-height: 8vw; /* Header height including padding above & below logo and menu */
	}	
	
	/* Menu bar */
	.block-superfishmain {
		/* display: none; */
		display: block;
		text-align: right;
		position: fixed;
		z-index: 1500;
		width: 100px;
		right: 0;
	}
	
	#superfish-main {
		display: none;
	}
	
	#superfish-main-accordion {
		display: block;
	}

	/* Menu items under menu bar */
	.block-superfishmain .sf-main {
		text-align: left;
	}
	
	/* Remove the empty space below the logo so the expanded menu appears directly below the logo */
	.site-branding {
		margin-bottom: 0;
		padding: 1vw 0; /* Padding above & below thetamusic logo */
		margin-left: -10px;
	}
	
	/* Theta Music Trainer logo container */
	.site-branding__logo {
		margin: 0;
	}
	
	/* Theta Music Trainer logo */
	.site-branding__logo > img {
		display: block;
		margin: 0;
		width: 33vw;
		height: 6vw;
		padding: 0 1.5vw;
	}

	#superfish-main {
		display: none;
	}
	
	/* #superfish-main { */
		/* padding-left: auto; */
		/* padding-right: auto; */
	/* } */

	/* Show menu vertically aligned in header */
	ul.sf-menu {
		display: inline-block;
    vertical-align: middle;		
	}
	
	.menu-item-icon {
		display: initial;
		width: 20px !important; /* Fix width of menu icon so the menu icon and text appear aligned */
		margin-right: 10px;
	}	

	/* Menu symbol font size */
	div.sf-accordion-toggle.sf-style-peacock  > a:after {
		font-size: 2.5em;
	}

	/* Sign in & Sign up links at top right on sign in / sign up / forgot password pages */
	.username_link_div {
		display: none !important;
	}
	
	/* Horizontal bar just below main menu */ 
	.below-header-blocks {
		display: none;
	}
	
	.header-and-content-separator {
		height: 10px;
	}
	
	/* Sign in, sign up, forgot password html forms */
	.user-login-form, .user-register-form, .user-pass, .user-pass-reset{
		width: 100%;
		/*margin: 0 auto;*/
	}
	
	/* Section title on top page */
	#top_page_section {
		width: 100%;
		font-size: 1.5rem;
		margin: 0.1rem 0;
	}

	/* Box displaying game on top page and music training page */
	.game_small {
		font-size: 1.4rem;
	}
	
	/* In game box, display game name without line break. Same for the game description. */
	.game_small dl dt, .game_small dl dd {
		width: 100%;
	}
	
	/* Box displaying game on top page. Specifically to adjust its height */
	.game_box {
		width: 100%;
		height: 105%;
	}
	
	/* Links "See all courses..." and "See all games..." on the home page for logged in user */
	.see_all_courses, .see_all_games {
		/*text-align: right;*/
		font-size: 1.5rem;
		margin-bottom: auto;
		padding: auto;
	}
	
	/* "See all games..." link in the "Games" section on the top page */
	.see_all_games {
		padding-top: 1rem;
	}
	
	/* Title of a section on the home page */
	.top_main_title {
		width: 90%;
		font-size: 2.1rem;
	}
	
	/* Home page for logged in user: Music & Ear Training Games Section */
	#toppage_main_copy {
		padding-left: 0;
		width: 100%;
		float: left;
	}
	
	/* Home page for logged in user: Music image */
	#toppage_main #top_img1 {
		display: none;
	}
	
	/* DIV element within the course box on homepage */
	.course_inner_box_homepage {
		height: 5rem;
	}

	/* DIV element within the course box on the course workout page */
	.course_inner_box_workout {
		height: 5rem;
	}
	
	/* Text for top page sections like "Top Players", "Are You a Music Teacher?" */
	.top_page_section_text {
		font-size: 1.5rem;
	}
	
	/* List of 3 games per row displayed with small game icons on "Music Training Games" page */
	.game-list-small {
		display: none;
	}
	
	/* Music Training Gmaes page: Main section containing list of games with game description */
	#featured_section {
		width: 85%;
	}
	
	#featured_section_jp {
		width: 100%;
		
	}
	
	/* Game icon */
	.all-games .teaser_image,
	.which-games-are-best-for-me-section .teaser_image {
		max-width: 100%;
		width: auto;
		height: auto;
		/*padding: none;*/
		float: none;
		text-align: center;
	}
	
	/* Game title and description */
	.all-games .teaser_text,
	.which-games-are-best-for-me-section .teaser_text {
		width: 100%;
	}
	
	/* Music Training Gmaes page: Game title and description */
	.all-games .teaser_title,
	.which-games-are-best-for-me-section .teaser_title {
		clear: both;
		font-size: 1em;
	}
	
	/* Music Training Gmaes page: Game description in the game box */
	.all-games .teaser_body,
	.which-games-are-best-for-me-section .teaser_body {
		clear: both;
		font-size: 1em;
	}
	
	.which-games-are-best-for-me-section div {
		text-align: justify;
	}
	
	.music_training_game_small {
		width: 100% !important;
		height: auto;
		margin-top: 0.9em;
		font-size: 1em;
	}
	
	.music_training_game_small > a {
		width: 30%;
	}
	
	.music_training_game_small a img {
		width: 100%;
		height: auto;
	}
	
	.music_training_game_small dl {
		width: 50%;
		padding: 0;
		margin: 0;
	}
	
	.music_training_game_small dl dd, .music_training_game_small dl dt {
		width: 100%;
		font-size: initial;
	}

	.music_training_long_game_descriptions_container {
		padding: 0.2em;
	}
	
	.music_training_long_game_descriptions {
		width: 100%;
		margin: 1em auto;
	}
	
	.music_training_top_main_title {
		/*width: 100%;*/
		margin-top: 1.5em;
	}
	
	.music-training-recommended-games {
		display: none;
	}
	
	/* Music Training Gmaes page: "Which games are best for me" text */
	.which-games-are-best-me {
		font-size: 2.6rem;
	}
	
	/* Game category title */
	#featured_section .game_category {
		font-size: 3.2rem;
	}
	
	/* Fundamentals pages: Game icon */
	.teaser_image {
		width: 30%;
	}

	/* Fundamentals pages: Game title and description */
	.teaser_text,
	.fundamentals .teaser_text {
		width: 70%;
	}
	
	/* Fundamentals pages: Game name */
	.teaser_title {
		clear: both;
		font-size: 1.5rem;
		text-align: center;
	}
	
	/* Fundamentals pages: Game summary */
	.teaser_body {
		font-size: 1.3rem;
	}
	
	/* Game box containing game icon, title and description */
	.featured_box, .featured_box_more_height, .featured_box_more_height_1, .featured_box_more_height_2 {
		width: 100%;
		/*height: 25rem;*/
		line-height: 1.5;
	}
	
	/* Game box containing game icon, title and description */
	/*.featured_box {
		width: 100%;*/
		/*height: 37rem;*/
		/*line-height: 1.3;
	}*/
	
	/* Game box on Music Training page */
	.featured_box_special_responsive_less {
		width: 100%;
		height: 33rem;
		line-height: 1.3;
	}
	
	/* Game box on Music Training page */
	.featured_box_special_responsive {
		width: 100%;
		height: 37rem;
		line-height: 1.3;
	}
	
	/* Game box on Music Training page */
	.featured_box_special_responsive_more {
		width: 100%;
		height: 43rem;
		line-height: 1.3;
	}
	
	/* Game box on Music Training page */
	.featured_box_special_responsive_more_1 {
		width: 100%;
		height: 47rem;
		line-height: 1.3;
	}
	
	a.course_button {
		max-width: 70%;
		max-height: 70%;
		/*margin: 1rem 0 0;*/
		margin: 1rem auto 0;
		font-size: 1.5rem;
	}
	
	/* Regular text */
	.normal_text {
		font-size: 1.5rem; /*0.9em;*/
	}
	
	.section_header {
		font-size: 3.5rem;
	}
	
	/* Course box on Getting Started page */
	.getting_started_course_box {
		width: 570px;
	}
	
	/* Start button on Getting Started page */
	.getting_started_start_button {
		margin-left: 150px; 
	}
	
	/* Progress for a game in percentage on progress report page */
	.progress_report_category_complete_percent {
		font-size: 1.5rem;
	}
	
	/* Message to click on a game to see details about the game in a graph form on progress report page */
	.progress_report_click_game {
		font-size: 1.4rem;
	}

	/* Landing page for logged in user: image in Are You a Music Teacher section */
	.are_you_teacher {
		max-width: 75%;
		max-height: 75%;
		position: relative;
    top: 15px;
	}

	div.field--type-text-with-summary {
		font-size: 1em;
	}

	div.side_margin, div.media-reviews, div.customer-kudos, article.node--type-page div.course-description, article.node--type-book, article.node--type-page, div.terms_of_service, div.privacy_policy, div.site_faq, div.getting_started_with_music_theory {
		margin: 1em auto auto;
		padding-top: 1em;
		line-height: normal;
	}
	
	div.fundamentals, div.play_by_ear {
		margin: 1em auto auto;
		padding-top: 1em;
		/*line-height: normal;
		font-size: initial;*/
	}

	/* For the "Add child page" link on Resources/Play-by-Ear Tip page */
	article .book-add-child {
		display: none;
	}
	
	/* Link to the next article on the pages of "Play-by-Ear Tip" and "Fundamentals" sections */
	article .book_pagination_links {
		white-space: normal;
		border-bottom: none;
	}

	.getting_started_sections {
		width: 100%;
		padding: 0;
		margin-top: 0.3em;
	}

	.getting_started_intro_to_ear_training_course {
		margin-top: 1em;
	}
		
	.getting_started_course_row {
		width: 100%;
		clear: both;
	}

	.getting_started_course_img {
		padding: 0 1em 0 0;
	}

	.getting_started_course_label {
		font-size: 1.3em;
		margin-top: -0.3em;
	}

	.getting_started_sound_i_course, .getting_started_pitch_i_course, .getting_started_scales_i_course, .getting_started_intervals_i_course {
		width: 100%;
		margin: 0;
		padding-top: 0.8rem;
	}

	.getting_started_see_all_courses, .getting_started_see_all_games, .getting_started_learn_more {
		margin-left: 0;
		width: 100%;
		text-align: right;
		font-size: 1em;
	}

	.getting_started_games {
		width: auto;
		margin-left: 0;
	}

	/* Any page which has pagination links. E.g. "Fundamentals", "Getting Started" */
	.book_pagination_links .book_pagination_link {
		border-bottom: 1px dotted;
		display: block;
		clear: both;
		float: none !important;
		margin: 0 auto;
	}
	
	p.vertical_margin_big {
		margin-top: 2rem;
		padding-top: 0;
	}

	#trial_desc {
		width: 70%;
	}
	
	div.scale_desc table.scale_table tr td, div.scale_desc table.with_notation_image tr td {
		font-size: 1em;
	}

	#chord-progression-image {
		width: 100%;
	}

	img.chart_image {
		margin: 1em auto;
	}

	.web_footer_links {
		display: none;
	}
	
	.mobile_footer_links {
		display: block;
	}

	.mobile_footer_links .partner_links {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-evenly;
		margin-top: 2em;
	}

	.mobile_footer_links .partner_links div {
		width: 30%;
	}
	
	/*.footer-links {
		font-size: 1em;
	}*/
	
	.footer-links ul {
		list-style-type: circle;
		margin: 0.5em auto 0;
		width: 87%;
		columns: 3;
		-webkit-columns: 3;
		-moz-columns: 3;
	}

	.footer-links ul li {
		padding: 0.1em 0.3em;
	}
	
	.social_media_links {
		text-align: center;
		margin-top: 0.5em;
		margin-bottom: 0.2em;
	}

	/* Show some space between each row of responsive table */
	.theta_responsive_table {
		border-collapse: separate; 
		border-spacing: 0 0.4em;
	}

	/* .theta_responsive_table tr { */
		/* background: #678b9b; */
	/* } */

	.theta_responsive_table tr:nth-child(odd) td {
		/* background: #e7f5ff; */
		background: #f0f3f5;
	}
	
	.theta_responsive_table tr:nth-child(even) td {
		background: #f0f3f5;
	}
	
	/* Responsive table header */
	.theta_responsive_table thead {
		display: none;
	}
	
	/* Responsive table header cells and row cells */
	.theta_responsive_table th, 
	.theta_responsive_table td {
		display: block;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		float: left;
		text-align: left;
		white-space: pre-wrap !important; /* css-3 */
		white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
		white-space: -pre-wrap !important; /* Opera 4-6 */
    white-space: -o-pre-wrap !important; /* Opera 7 */
		word-break: break-word; /* Internet Explorer 5.5+ */
	}
	
	/* Responsive table header cell */
	/*.theta_responsive_table th {
		width: 40%;
	}*/

	/* Responsive table row cell */
	.theta_responsive_table td {
		width: 60%;
	}	

	/* To add some text in an empty responsive table cell so it has the same height as other table cells */
	/* .theta_responsive_table td:after { */
		/* content: "\00a0" */
	/* } */

	.theta_responsive_table {
    width: 100% !important;
  }
	.theta_responsive_table thead {
    display: none !important;
  }
  .theta_responsive_table tr, 
	.theta_responsive_table td {
    border-bottom: 1px solid #ddd !important;
  }
	.theta_responsive_table tr {
    margin-bottom: 8px !important;
  }
	.theta_responsive_table th {
		padding-left: 0.5em !important;
		word-wrap: break-word;
	}
  .theta_responsive_table td {
    display: flex !important;
		width: 100% !important;
		word-wrap: break-word;
		/* padding-left: 0.5em !important; */
	}
  table.theta_table tr td {
 		padding: 0.5em 5px 0.5em 0.5em !important;
    line-height: 1.8 !important;
	}
  .theta_responsive_table td::before {
    content: attr(label) !important;
    font-weight: bold !important;
    width: 140px !important;
    min-width: 140px !important;
  }
	td p.assignment-delete, td .assignment-delete {
		width: auto;
	}
	
	/* Information for musice teachers: Container containing image name and title */
	.information_for_teachers_screenshots	{
		width: 100%;
	}

	.information_for_teachers_screenshot {
			margin: 0.5rem 1rem 1rem;
	}

	.service_info th, .service_info td {
		padding-left: 0.8em;
	}

	.contact-message-form {
		width: auto;
		padding: auto;
	}

	.fundamentals_game_descriptions {
		width: 100%;
	}

	.user-pass-reset input {
		width: 100%;
	}
	
	/* All the links for book navigation including pagination links */
	article .book_navigation {
		margin: auto 5%;
	}	

	.messages__wrapper {
		margin-left: initial; /* No need to have margin for drupal message as the menu due to which the margin was needed is not displayed by default */
	}

	.fundamentals_circle_of_fifths {
		float: none !important;
		clear: both !important;
		padding: 0 !important;
		margin: auto !important;
	}

	.chord-progression-label tr td {
		width: 100%;
	}

	.sf-menu .games-menu-icon,
	.sf-menu .courses-menu-icon,
	.sf-menu .fundamentals-menu-icon,
	.sf-menu .teachers-menu-icon,
	.sf-menu .students-menu-icon,
	.sf-menu .ranks-menu-icon,
	.sf-menu .premium-menu-icon,
	.sf-menu .settings-menu-icon,
	.sf-menu .progress-report-menu-icon, 
	.sf-menu .my-account-menu-icon, 
	.sf-menu .user-profile-menu-icon,
	.sf-menu .signout-menu-icon {
		padding-left: 45px !important;
		background-position: top 10px left 12px !important;
	}
}


@media (max-width: 650px) {
	#back-to-class-list-wrapper {
		/* width: 100%; */
		width: max-content;
		clear: both;
		padding-left: 0%;
		padding-bottom: 0.5em;
	}
}

/* Device width <= 540px */
@media (max-width : 600px) {

	
	/* Header containing theta music logo and menu */
	header {
		height: 11vw; /* Header height including padding above & below logo and menu */
		line-height: 11vw; /* Header height including padding above & below logo and menu */
	}	
	
	/* Theta Music Trainer logo */
	.site-branding__logo > img {
		width: 43vw;
		height: 9vw;
	}

	/* Fundamentals pages: Demo apps */
	#demoCanvas, div#demoapp, div#melodic-interval-demoapp {
		width: 100%;
		height: 100%;
	}
	
	.footer-links ul {
		width: 80%;
		columns: 2;
		-webkit-columns: 2;
		-moz-columns: 2;
	}

	.footer-links ul li {
		padding: 0.05em 0.15em;
	}
	
	.music_training_game_small {
		font-size: 0.9em;
	}
	
	.music_training_game_small dl {
		/* width: 70%; */
		width: 100%;
		margin-left: 0;
	}
	
	.music_training_game_small dl dt {
		width: fit-content;
		margin: 7px auto;
	}
	
	.music_training_game_small a {
		float: none;
		display: block;
		margin: auto;
	}
	
	.music_training_category_game_boxes .game-image {
		display: block;
		margin: auto;		
	}

	/* Field to search in table */
	.table_search_field {
		width: 100%;
	}

	/* Information for musice teachers: Container containing image name and title */
	.information_for_teachers_screenshots {
		width: 200px; /* Same width as the screenshot image */
		height: 100px; /* Same height as the screenshot image */
	}
	
	/* Information for musice teachers: Sub-container containing image name and title */
	.information_for_teachers_screenshots > div {
		clear: both;		
	}
	
	/* Information for musice teachers: screenshot image */
	.information_for_teachers_screenshot {
		display: block;
		margin: auto;
	}

	#top_page_section .game_small {
		width: 300px;
	}

	.site-footer {
		margin-top: 2em;
	}
}


/* Device width <= 540px */
@media (max-width : 540px) {

	/*body {
		font-size: 1rem;
	}*/

	h1, h1.page-header {
		font-size: 1.9rem;
	}
	
	h2 {
		font-size: 1.7rem;
	}

	.site-branding {
		height: 11vw;
	}

	.normal_text {
		font-size: 1.4rem; /*1em; */
	}

	/* Menu symbol font size */
	div.sf-accordion-toggle.sf-style-peacock  > a:after {
		font-size: 2em;
	}
	
	/* Title of a section on the home page */
	.top_main_title {
		font-size: 1.9rem;
	}
	
	/*#top_page_section {
		margin: 0 1.5rem;
	}*/
	
	/* Box displaying game on top page and music training page */
	.game_small {
		font-size: 1.4rem;
		/*height: 5.5rem;*/
		margin: 0.6rem 0;
	}

	
	/* Box displaying game on top page. Specifically to adjust its height */
	/*.game_box {
		width: 50%;
	}*/
	
	/* "See all games..." link in the "Games" section on the top page */
	/*.see_all_games {
		padding-top: 1.5rem;
	}*/
	
	/* Text for top page sections like "Top Players", "Are You a Music Teacher?" */
	.top_page_section_text {
		font-size: 1.4rem;
	}

	/* Text displayed in an html SELECT element */
	.select_box_text {
		font-size: 2rem;
	}
	
	/* Table on Service Information page. To break email address and URL into multiple lines */
	table.service_info {
		table-layout: fixed;
		word-wrap: break-word;
	}
	
	/* Table header column on Service Information page */
	table.service_info th {
		width: 50%;
	}
	
	/* Table data column on Service Information page */
	table.service_info td {
		width: 50%;
	}
	
	.getting_started_intro_to_ear_training_course {
		width: 100%;
		height: 7.6em;
		border: 1px #808080 solid; 
	}

	.getting_started_intro_to_ear_training_course_button_div1 {
		width: 8em;
		margin: 0.4em auto 0;
	}

	.getting_started_intro_to_ear_training_course_button_div2 {
		width: 4em;
		margin: 0 auto;
		margin-top: 0.2em;
	}

	.getting_started_course_label {
		margin-top: 0;
	}

	/*.getting_started_see_all_courses, .getting_started_see_all_games, .getting_started_learn_more {
		font-size: 1em;
	}*/
	
	/* Fundamentals pages: Game icon */
	.teaser_image {
		text-align: center;
		width: 100%;
		height: 100%;
	}
	
	/* Fundamentals pages: Game title and description */
	.teaser_text,
	.fundamentals .teaser_text {
		width: 100%;
	}
	
	/* Fundamentals pages: Game name */
	.teaser_title {
		clear: both;
		font-size: 1.5rem;
	}
	
	/* Fundamentals pages: Game summary */
	.teaser_body {
		font-size: 1.3rem;
	}
	
	a.course_button {
		margin: 1rem auto 0;
		font-size: 1.4rem;
	}
	
	#trial_desc {
		width: 100%;
	}	

	/* Fundamentals - Melodic Intervals */
	#interval_examples {
		width: 100%;
	}
	
	/* Fundamentals - Melodic Intervals: Interval name */
	#interval_examples .interval_name {
		width: 100%;
	}

	/* Fundamentals - Melodic Intervals:DIV containing interval name above the interval image and audio */
	.interval_example {
		width: 100%;		
	}
	
	/* Fundamentals pages: Interval images on Melodic and Harmonic interval pages */
	div.interval_image {
		width: 100%;
	}

	.footer-links {
		font-size: 0.9em;
	}

	.footer-links ul {
		width: 100%;
		columns: 2;
		-webkit-columns: 2;
		-moz-columns: 2;
		line-height: 1.7;
	}
	
	.music_training_game_small {
		font-size: 0.8em;
	}
	
	.theta_responsive_table th, .theta_responsive_table td {
		width: 50%;
	}

	.class-student-list, .class-assignment-list {
		width: 100%;
	}
}

@media (max-width : 435px) {	
	.messages__wrapper {
		margin-top: 60px; /* at 435px, teacher menu is moved from the page header to below the header. so, move the drupal message dialog down to avoid it overlapping with the teacher menu. */
	}
}

@media (max-width : 400px) {	
	.site-branding__logo > img {
		width: 46vw;
	}
}

@media (max-width : 370px) {	
	/* captcha */
	.g-recaptcha {
		transform: scale(0.8);
	}
}

@media (max-width : 330px) {	
	/* captcha */
	.g-recaptcha {
		transform: scale(0.7);
		margin-left: -1em;
	}
}

/* For iPhone 5/SE */
@media (max-width : 320px) {	
	
	h2, h2.page-title {
		font-size: 1.8rem;
	}
	
	/* Fundamentals pages: Audio player */
	div.mp3player audio, div.scale_mp3player audio {
		width: 250px;
	}

	.footer-links {
		font-size: 0.8em;
	}
	
	.music_training_long_game_descriptions_container .music_training_game_category {
		font-size: 1em;
	}
}


