@media only screen
and (max-width : 599px){
	#toggle-sidebar {
		display: inherit;
		padding-left: 0;
	}
/*	.app-title {
		margin-left: 15px;
		}*/
	}

	/* Smartphones (portrait and landscape) ----------- */
	@media only screen
	and (min-width : 320px)
	/*and (max-width : 480px) {*/
		and (max-width : 1023px) {
			body {
				padding: 0;
			}
			h5 {
				font-size: 1rem;
				font-weight: 400;
			}
			h6 {
				font-weight: 400;
			}
			.board {
				width: 37%;
			}
			#toggle-sidebar {
				display: inherit;
				padding-left: 0;
			}
			#refresh-button{
				margin-right: 5%;
				float: right;
				margin-top: 1%;
				cursor: pointer;
			}
			.navbar a.text-white:not(:first-child), .navbar-user-name, .nav-link.dropdown-toggle::after {	
				display:none;
			}
			.navbar-icon {
				margin-right: .2rem;
			}
			.navbar-nav .dropdown-menu {
				position: absolute;
				float: none;
			}
			#header-logo {
				display:none;
			}
			#header-text {
				display:inline-block;
				width: 9rem;
				height: 100%;
				padding: .7rem 0;
			}
			#nav-container {
				position: inherit; 
				height: 100%; 
				box-shadow: none;
			}
			#main-container, #main-container.padding370 {
				padding-left: 0; 
				margin-top: -50px;
			}
			#page-container {
				width: auto; 
				max-width: 420px;
				margin-top: 50px; 
				border: none;
			}
			#pracitce-button-div {
				position:initial;
				
				padding-bottom: 0;
				padding-left:0;
				padding-right:0;
				background:white;
				width: inherit;
				max-width: 330px;
				min-width: 290px;
			}
			#settings-container {
				width: 100%;
				/*margin-top: 5px;*/
				margin: 0px auto;
				max-width: 420px;
				position: initial; 
				height:100%;	
				padding-bottom:0;			
			}
			#tabPractice {
				margin-bottom: 10px;
				padding-bottom: 0;
			}
			#search-sidenav-container {
				position: initial;
				margin: 0 auto;
				max-width: 420px;
				/* height: calc(100vh - 55px); */
				width: auto;
			}
			#main-container.padding370 {
				padding: 0;
				margin-bottom: -5px;
			}
			#mobile-indicator{
				display: block;
			}
			.card {
				border-radius: 0;
			}
			h4 {
				margin-top: 0	;
			}

			button, .result-button {
				margin: 0;
				padding-left: 0;
				padding-right: 0;
				line-height: 0;
			}
			.result-hand-button-overview{
				line-height: inherit;
			}
			#hands-container .result-button, #solution-container .result-button {
				min-width: 20%;
				padding-top: 1rem;
				padding-bottom: 1rem;
			}
			hr.hori {
				margin: 0rem 0 0.85rem;
			}
			.skills {
				line-height: 30px;
			}
			/*div.btn-container, div#graph-container {
				padding-bottom: 20px;
				}*/

				#texture-container-container img{
					width: 40px;
					text-align: center
					padding: 0 1px;
				}
				
				.board-selection-grid > img{
					width: 15.6%;
					padding: 1.5%;
					text-align: center;
				}
				#info-text img, #search-text img {
					width: 20%;
				}

				/* hide headings */
				.switch-heading, .high-card-heading{
					display:none;
				}
				#flop-action {
					margin-top: 0rem;
					/*min-height: 73px;*/
				}
				
			}
			@media only screen
			and (min-width : 600px)
			and (max-width : 1023px)
			{
				.board {
					width: 35%;
				}
				#mobile-indicator{
					display: block;
				}
				.board-selection-grid > img{
					width: 7.6%;
					padding: 0.5%;
					text-align: center;
				}


				/* Smartphones (landscape) ----------- */
				@media only screen
				and (min-width : 321px) {
					/* Styles */
				}

				/* Smartphones (portrait) ----------- */
				@media only screen
				and (max-width : 320px) {
					.texture-container {
						grid-template-columns: 120px 120px;
						grid-gap: 10px;
					}
					#board .board.carrot img {
						width: 40px;
					}
				}

			}
			@media only screen
			and (min-width : 1024px)
			and (max-width : 1536px) {
				#page-container {
					max-width: 40%;
				}
				.texture-container {
					grid-template-columns: 1fr 1fr 1fr 1fr;
					grid-gap: 10px;
				}
				#board .board.carrot img {
					/*width: 55px;*/
				}
				.board-selection-grid img {
					width: 23%;
					padding: 2.5%;
				}
				.switch{
					zoom: 0.8;
				}
				.board{
					width: 35%;
				}
				/*.narrow {
					display:inline-flex;
					width: 100%;
					}*/
				/*.wide {
					display:none;
					}*/
				}

				/* iPads (portrait and landscape) ----------- */
/*@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
	.texture-container {
		grid-template-columns: 1fr 1fr 1fr;
		grid-gap: 10px;
	}
	.padding370 {
		padding-right: 3%;
	}
	div.board-selection-grid {
		grid-template: 1fr / repeat(4, 1fr);
	}
	#search-sidenav-container {
		width: 30%;
	}
	}*/

	/* iPads (landscape) ----------- */
	@media only screen
	and (min-width : 768px)
	and (max-width : 1024px)
	and (orientation : landscape) {
		/* Styles */
	}

	/* iPads (portrait) ----------- */
	@media only screen
	and (min-width : 768px)
	and (max-width : 1024px)
	and (orientation : portrait) {
		/* Styles */
	}

	/* The New iPad (iPad 3) ----------- */
	@media only screen
	and (min-width: 1536px)
	/*and (max-width: 2048px)*/
	and (-webkit-min-pixel-ratio: 2) {
		#page-container {
			width: 70%;
			max-width: 760px;
		}
		#board .texture-container img {
			width: 33%;
		}

		.texture-container {
			grid-template-columns: 1fr 1fr 1fr 1fr;
			grid-gap: 10px;
		}

	}

	/* Desktop screens ----------- */
	@media only screen
	/*and (min-width: 1536px)*/
	and (min-width: 1700px)
	{
		#main-container.padding370 {
			/*padding-left: 35%;*/
			/*padding-right: 25%;*/
		}
		#page-container {
			/*width:968px;*/
			width:760px;
			/*width: 65%;*/
			max-width: 1280px;
			/*max-width: 760px;*/
		}
		#board .texture-container img {
			width: 33%;
		}
	}

	/* iPhone 4 ----------- */
	@media
	only screen and (-webkit-min-pixel-ratio : 1.5),
	only screen and (min-pixel-ratio : 1.5) {
		/* Styles */
	}