/*=== Classes ================================================================*/
.no-mobile{
	display: none;
}

.yes-mobile{
	display: inline-block;
}
/*============================================================================*/

/* Rules without a media query present take affect when the webpage is 1,200px 
 * or less. */


/*=== Pages ==================================================================*/

/* Bike Logs */
#main-vehicle-logs #table-logs{
}
	#main-vehicle-logs #table-logs header .log-type{
		display: none;
	}

	#main-vehicle-logs #table-logs .row .log-type{
		display: none;
	}
	
	#main-vehicle-logs #table-logs .row .description.medium{
		display: block;
	}

	#main-vehicle-logs #table-logs .row .description.large,
	#main-vehicle-logs #table-logs .row .description.small{
		display: none;
	}

/*=== End Pages ==============================================================*/



@media(max-width: 1000px){

	#vehicle-view h2{
		margin-bottom: 8px;
		font-size: 2.2rem;
	}

	#vehicle-view .vin-box{
		margin-bottom: 8px;
	}

	#main-vehicle-logs #table-logs .row .description.small{
		display: block;
	}

	#main-vehicle-logs #table-logs .row .description.large,
	#main-vehicle-logs #table-logs .row .description.medium{
		display: none;
	}
}



@media(max-width: 875px){

	#main-vehicle-logs #table-logs header{
		flex-wrap: wrap;
		height: 80px;
	}
		#main-vehicle-logs #table-logs header .action-items{
			flex-grow: 1;
			text-align: right;
		}

		#main-vehicle-logs #table-logs header .description{
			order: 99;
			width: 100%;
		}

	#main-vehicle-logs #table-logs .row{
		flex-wrap: wrap;
		height: 140px;
	}
		#main-vehicle-logs #table-logs .row .icon{
			border-bottom-left-radius: 0;
		}

		#main-vehicle-logs #table-logs .row .action-items{
			flex-grow: 1;
			justify-content: flex-end;
		}
			#main-vehicle-logs #table-logs .row .action-items li{
				width: 35px;
			}

		#main-vehicle-logs #table-logs .row .description{
			order: 99;
		}
			#main-vehicle-logs #table-logs .row .description.large{
				display: block;
			}

			#main-vehicle-logs #table-logs .row .description.medium,
			#main-vehicle-logs #table-logs .row .description.small{
				display: none;
			}
}



@media(max-width: 800px){
	main h1{
		font-size: 2.9rem;
	}

	#vehicle-view{
		flex-direction: column;
		align-items: center;
		padding: 250px 20px 10px;
		text-align: center;
	}
		#vehicle-view .vehicle-badge{
			top: -15px;
			right: 50%;
			margin-right: -90px;
		}

		#vehicle-view .vin-box{
			flex-grow: 0;
		}

	#main-vehicle-logs{
	}
		#page-vehicle-logs > header{
			flex-wrap: wrap;
		}

		#main-vehicle-logs #header-button-group{
			margin: 0 auto;
		}

		#main-vehicle-logs #table-logs .row .description.medium{
			display: block;
		}

		#main-vehicle-logs #table-logs .row .description.large,
		#main-vehicle-logs #table-logs .row .description.small{
			display: none;
		}
}



@media(max-width: 600px){

		.logo.garage img{
			width: 100px;
		}

		.logo.garage::after{
			top: 18px;
			left: 108px;
			font-size: smaller;
		}

	main h1{
		font-size: 2.2rem;
	}

	div.bikes{
		margin: 0 auto;
		width: 260px;
	}

	#vehicle-view{
	}
		#vehicle-view h2 span{
			display: none;
		}

		#vehicle-view ul.menu{
			flex-direction: column;
		}

	#page-vehicle-logs{
		width: 100%;
	}

	#main-vehicle-logs #table-logs header{
		margin-left: 50px;
		height: 120px;
	}
		#main-vehicle-logs #table-logs header .date{
			order: 80;
			width: 60%;
		}

	#main-vehicle-logs #table-logs .row{
		height: 150px;
		line-height: 50px;
	}
		#main-vehicle-logs #table-logs .row .icon{
			width: 50px;
			height: 50px;
		}

		#main-vehicle-logs #table-logs .row .mileage:not(.icon){
			height: 50px;
		}
			#main-vehicle-logs #table-logs .row .mileage:not(.icon) i.fa{
				line-height: 50px;
			}

		#main-vehicle-logs #table-logs .row .action-items{
		}

		#main-vehicle-logs #table-logs .row .date{
			order: 80;
			width: 60%;
			height: 50px;
		}
			#main-vehicle-logs #table-logs .row .date.short{
				display: none;
			}
			#main-vehicle-logs #table-logs .row .date.long{
				display: block;
			}

		#main-vehicle-logs #table-logs .row .description.small{
			display: block;
		}

		#main-vehicle-logs #table-logs .row .description.large,
		#main-vehicle-logs #table-logs .row .description.medium{
			display: none;
		}
}



/*
 * When the navigation moves from the left to the bottom.
 */
@media(max-width: 500px){

	body{
		grid-template-columns: 60px auto;
		grid-template-rows: 60px auto 60px;
	}

	body > header{
		grid-column-start: 1;

	}
		.logo.brand{
			margin-left: 20px;
		}
			body.brand-moto .logo.brand{
				background-image: url( '/assets/img/rm-logo-dark.svg' );
			}

		.logo.re{
			margin: 0;
		}
		.inner .logo.re{
			filter: invert( 100% );
		}

		.logo.garage{
			margin-left: 5px;
			width: auto;
		}

	nav.chrome{
		grid-column-start: 1;
		grid-column-end: 3;
		grid-row-start: 3;
		grid-row-end: 4;
	}
	nav.chrome ul.menu.v{
		flex-direction: row;
		margin: 0 15px;
	}
		nav.chrome ul.menu.v li{
			flex-grow: 1;
			padding: 0 5px;
			height: 60px;
			line-height: 60px;
		}
			nav.chrome li.active-path a:before{
				top: auto;
				right: 0;
				border-left: none;
				border-bottom: 8px solid var( --hilite-color );
				border-radius: 8px 8px 0 0;
			}

	body > main{
		grid-column-start: 1;
		padding: 10px 30px;
	}
		body > main > header{
			height: 35px;
			line-height: 35px;
		}

	#vehicle-view h2{
		font-size: 1.9rem;
	}

	body > main h1{
		line-height: normal;
	}

	#main-vehicle-logs #table-logs{
		grid-template-columns: repeat( auto-fill, minmax( 340px, 1fr ));
	}
		#page-vehicle-logs #table-logs .log{
			grid-template-columns: 70px 34% 22% auto;
		}
	
	footer{
		display: none;
	}
}