@media (min-width: 768px) {
.section-yt-videos {display: flex; align-items: flex-start; justify-content: space-between;}
.form-inline .form-group {display: inline-block; width: auto; clear: none; margin-bottom: 0; vertical-align: middle;}
.form-inline .form-control {margin-right: .5em;}
.form-inline select.form-control {width: auto;}
.form-inline .radio, .form-inline .checkbox {display: inline-block;	padding-left: 0; margin-top: 0; margin-bottom: 0;}
.form-inline .radio input[type="radio"], .form-inline .checkbox input[type="checkbox"] {float: none; margin-left: 0;}
#footer .level-1 {background: url(footer-bgr.jpg) no-repeat 100% 50%;}
}

@media (min-width: 1025px) {
.search-bar {min-height: 60px;}
}
@media (min-width: 1280px) {
.section-yt-videos .yt-videos-wrapper {display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em;}
}

@media (max-width: 1152px) {
.top-items .item-cell:after {font-size: 3.5em;}
.top-items h3 {position: relative;}
.popular h2:before, .top-items h3:before {height: 100%; border-width: 0 48px 0 0;}
.popular h2:after, .top-items h3:after {right: 6px;}
.top-items .item-cell:before {display: none;}
.section-yt-videos .img {width: 150px; padding-top: 84px;}

.auto-notes-content section.view-note {padding: .5em;}
.view-note .note-info-wrapper .amount {min-width: 7em;}
}

@media (max-width: 1024px) {
#site {padding-top: 70px;}
.wrapper {padding: 0 12px;}
#header > .level-1 {min-height: 59px; padding: 5px 0;}
	#header > .level-1 > .wrapper {padding: 0;}
		.site-logo {left: 9px; margin-top: 1px;}
		#header .login-btn {margin: 7px 18px 0 10px; padding: 0;}
			.login-btn .icon-wrapper {background-color: rgba(0,0,0,.2);}
			.login-btn .dtop {display: none;}
.nav-on {overflow: hidden;}
.nav-on:after {content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 800; background-color: rgba(0,0,0,.7);}
#site .nav-collapse, .nav-collapse span {position: relative; z-index: 901; display: block; width: 48px; height: 48px; padding: 0;}
#site .nav-collapse {float: right; margin-top: 1px; text-decoration: none;}
.nav-collapse:before, .nav-collapse:after, .nav-collapse span:before {
	content: ""; position: absolute; left: 50%; display: block; width: 28px; height: 4px; 
	background-color: #45c7f4; border-radius: 2px; transform: translateX(-50%);
}
.nav-collapse:before {top: 12px;}
.nav-on .nav-collapse:before, .nav-on .nav-collapse:after {margin-left: -10px; transform-origin: left; background-color: white;}
.nav-on .nav-collapse:before {top: 12px; transform: rotate(45deg);}
.nav-collapse span:before {top: 22px;}
.nav-on .nav-collapse span:before {opacity: 0; visibility: hidden;}
.nav-collapse:after {bottom: 12px;}
.nav-on .nav-collapse:after {bottom: 12px; transform: rotate(-45deg);}
	.nav-wrapper {
		display: flex; flex-direction: column; 
		min-height: 0; position: fixed; top: 58px; right: -100%; bottom: 0; width: 100%; max-width: 320px; z-index: 901; overflow-y: auto;
		text-align: center; background-color: #f0f4f7; transition-delay: 0.1s;
	}
	.nav-on .nav-collapse + .nav-wrapper {right: 0;}
		#header .search-bar {order: 1;}
		.site-nav {order: 2;}
		#header .meta {padding: 1em; order: 3;}
		#header .meta, .site-nav {width: 100%; margin: 0;}
			#header .btn-add {margin-right: 0;}
		.site-nav {background-color: #004080;}
			.site-nav nav > ul > li {
				display: block; margin: 0; text-align: left; 
				border-style: solid; border-width: 0 0 1px; border-color: rgba(0,0,0,.3);
			}
			.site-nav nav > ul > li:first-child {border-top-width: 1px;}
				.site-nav nav > ul > li > a {padding: 1em .8em; font-size: 1.1em;}
				.site-nav nav > ul > .current > a:before {left: .8em; bottom: .6em; width: 2em;}
				.site-nav nav > ul > .current > a:before, .site-nav nav > ul > li:hover > a:before {border-color: #40c8f4;}
		
.icon-mobile-search {position: relative; display: inline-block; float: right; width: 46px; height: 48px; margin: 1px 6px 0 0;}
  .icon-mobile-search:before, .icon-mobile-search:after {
	  content: ""; position: absolute; display: block; border-style: solid; border-color: #45c7f4;}
  .icon-mobile-search:before {top: 12px; left: 14px; width: 14px; height: 14px; border-width: 2px; border-radius: 50%;}
  .icon-mobile-search:after {top: 30px; left: 26px; width: 10px; border-width: 2px 0 0; transform: rotate(45deg);}
			
		
		#header .search-bar {position: relative; top: 0; left: 0; clear: both; width: 100%; max-width: none; padding: 0; overflow: visible;}
			.search-wrapper {width: 100%; padding: .8em; visibility: visible; opacity: 1;}
				.search-bar .search-wrapper > .form-group {margin-bottom: 0;}
			.search-btn-wrapper {display: none;}
			
			#site .dropdown-content a {font-size: 1.1em;}
			.dropdown-content .img {width: 70px;}
				.dropdown-content img {max-width: 70px; max-height: 70px;}
.breadcrumb {margin-top: -4px;}
.item-col-2 .item-content > section:nth-child(2n+1),
.item-col-3 .item-content > section:nth-child(3n+1),
.item-col-4 .item-content > section:nth-child(4n+1), 
.item-col-5 .item-content > section:nth-child(5n+1),
.item-col-6 .item-content > section:nth-child(6n+1),
.item-col-7 .item-content > section:nth-child(7n+1),
.item-col-8 .item-content > section:nth-child(8n+1),
.item-col-9 .item-content > section:nth-child(9n+1),
.item-col-10 .item-content > section:nth-child(10n+1),
.item-col-11 .item-content > section:nth-child(11n+1),
.item-col-12 .item-content > section:nth-child(12n+1) {clear: none;}

.item-col-3 .item-content > section {width: 50%;}

.index .col-vpb {display: none;}
.index .column.latest {width: 100%; margin: 0 0 24px;}
.index .section-blog, .index .column.top-items {width: calc(50% - 12px);}
.index .section-blog {margin-left: 0;}
.index .column.top-items {margin-right: 0;}
.item-description h1.lead-heading {font-size: 1.6em;}
.user-messages .side-bar {top: 55px;}
	.user-messages .side-bar .inner > .meta {padding: 12px;}
.cd-top {display: none;}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
	.index .popular .img {padding-bottom: 75%;}
	.index .column.makes ul {column-count: 3;}
}

@media (max-width: 800px) {
.index .popular, .index .column.latest {width: 100%; margin: 0 0 24px;}
	.index .popular {margin-bottom: 0; padding-right: 0;}
		.index .popular .img {padding-bottom: 75%;}
.index .section-blog, .index .column.top-items {width: calc(50% - 12px);}
.index .section-blog {margin-left: 0; margin-right: 6px;}
.index .column.makes .column-inner {max-height: none; padding: 1.1em; padding-bottom: .5em;}
	.index .column.makes ul {column-count: 3; column-gap: 1em;}
		.index .column.makes li {margin-bottom: .6em;}
			.index .column.makes a {font-size: 1.2em; padding: .1em .3em;}
.index .column.makes {width: 100%; margin: 24px 0 0;}
	.index .column.makes h3 {padding-top: 20px; padding-bottom: 20px; text-decoration: underline; border: 2px solid rgba(0,0,0,.2);}
	.index .column.makes.on h3 {background-color: #e0edf7; color: #004080;}
	.index .column.makes h3:before {
		content: ""; position: absolute; top: 1.4em; right: 1em;
		display: block; width: 8px; height: 8px; border-style: solid; border-width: 2px 2px 0 0;
		transform: rotate(45deg);
	}
	.index .column.makes.on h3:before {transform: rotate(135deg); border-color: #004080;}
	.index .column.makes .column-inner {height: 0; padding: 0; transform: scale(0); transform-origin: top center;}
	.index .column.makes.on .column-inner {height: auto; padding: 1.1em; transform: scale(1);}
#site .top-items .img {max-width: 330px;}
.content.col-75, .side-bar.fR, .side-bar.col-25 {width: 100%;}
.content.col-75 {margin-bottom: 1.5em;}
.side-bar.fR {padding-left: 0;}
.side-bar.col-25 {padding-right: 0;}
.item-list-filter {position: static; padding: 6px 20px 0; border-bottom: 1px solid rgba(0,0,0,.2);}
	.item-list-filter .form-group {margin-bottom: 0;}
.item-info-wrapper .avatar {width: 20%;}
	.member-info .info > span {margin-bottom: .3em;}
.item-description .member-info .contact-member {width: 100%;}

.item-col-4 .item-content {display: flex; flex-wrap: wrap;}
.item-col-4 .item-content > section {width: 50%;}

.f-nav #header > .level-2 {display: block; padding: .3em; background-color: hsla(0,0%,100%,.95);}
.section-view-rides {display: block; padding: 20px; border-style: solid; border-width: 1px 0;}
	.section-view-rides .info-wrapper {display: flex; align-items: center; padding: 1em;}
		.section-view-rides .info-wrapper h3 {flex: 1; margin: 0; padding-right: .5em;}
		.section-view-rides .info-wrapper p {margin-bottom: 0;}
			.section-view-rides .btn {position: relative; padding-right: 1.4em; text-transform: uppercase; white-space: nowrap;}
			.section-view-rides .btn:before {
				content: ""; position: absolute; top: 50%; right: .7em;
				display: block; width: 4px; height: 4px; margin-top: -4px; border-style: solid; border-width: 2px 2px 0 0; transform: rotate(45deg);
			}

.user-profile .member-info-tog:before {
	content: ""; position: absolute; top: 1em; right: 1em;
    display: block; width: 8px; height: 8px;
    border-style: solid; border-width: 2px 2px 0 0;
    transform: rotate(45deg);
}
.user-profile .member-info-tog.on:before {transform: rotate(135deg);}
.user-profile .member-info-tog + .toggle-wrapper {height: 0; transform: scaleY(0); transform-origin: top;}
.user-profile .member-info-tog.on + .toggle-wrapper {height: auto; transform: scaleY(1);}

	.user-profile .info {padding-left: 20%; padding-top: 2em;}
		.user-profile .member-info .info > span {width: 33%;}
.column.user-profile.notification-on::before {display: block;}
.user-messages .side-bar {width: 30%;}
.user-messages main .wrapper {padding-left: calc(30% + 12px); padding-right: 12px;}
.new-message {left: 30%; padding: 12px;}
.user-messages .side-bar .btn-back {width: 100%; margin-bottom: .7em;}
#footer .col-66, #footer .col-33 {width: 100%;}
#footer .social {margin-bottom: 1em;}
.user-messages .cd-bottom {right: 32%;}
.next-item {position: fixed; right: -120%; bottom: 2vh; z-index: 900;}
.next-item.on {display: block; right: 0;}
	.next-item .next-item-link {display: flex; flex-direction: row; max-width: 85vw; padding: 10px; border-radius: 6px 0 0 6px;}
		.next-item .img {width: 80px; flex-shrink: 0;}
		.next-item .info {padding-left: 10px; color: white;}
			.next-item .info strong {display: block;}
			.next-item .info .item-title {
				display: inline-block; max-width: calc(85vw - 110px); font-size: 1em; margin: .3em 0 0;
				white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
			}
	.next-item .close {
		position: absolute; top: -24px; left: -24px; display: block; width: 28px; height: 28px; 
		line-height: 26px; text-align: center; color: white; border-radius: 50%;
	}
	.next-item .next-item-link, .next-item .close {text-decoration: none; background-color: rgba(0,0,0,.8); box-shadow: 0 10px 20px -4px rgba(0,0,0,0.95);}

.activity-section .comment {margin-left: 1.5em; margin-right: 1.5em;}

.big-img .img-gallery:before {
	background-color: rgba(0,0,0,.5);
}

}

@media (max-width: 600px) {
.item-description h1.lead-heading .add-on-wrapper:after {width: 32px; height: 32px; background-size: 32px;}

.item-description .member-info, .item-overview, .section-comments {padding: 12px;}
main .share {margin-bottom: 1em;}
main .share, .contact-section, .contact-form {width: 100%;}
main .share h4 {margin-left: 0;}
.section-share-link .section-dropdown {top: 130%; left: -185px; transform: translateY(0);}
.section-share-link .section-dropdown:before {
	top: 0; right: 42px; border-left-width: 8px; border-top-width: 0; border-right-color: transparent; border-bottom-color: rgba(0,0,0,.2);
}

.contact-form .form-group {width: 100%; padding-right: 0;}
.contact-form .form-group:last-child {position: static; padding-left: 0;}

.index .column.makes ul {column-count: 2;}
.index main .row-2 {margin-bottom: 0;}
.index .section-blog, .index .column.top-items {width: 100%; margin-left: 0; margin-right: 0;}
.index .column.latest, .index .section-blog {margin-bottom: 20px;}
.user-profile .info {padding-left: 115px; padding-top: 1em;}
		.user-profile .member-info .info > span {width: 100%; margin-bottom: .3em;}
			.member-info .info > span:not(:only-child) strong {display: inline-block;}
.contact-section p {margin-bottom: 1em;}
.contact-section p + hr {display: none;}
.contact-section h3 {font-size: 1.2em;}
.social-link svg {width: 24px;}
.add-your-ride .row {margin: 0;}
	.add-your-ride .row .col {width: 100%; flex: auto; padding: 0;}
.mem-log-section-modal .inner-row > div, .section-view-rides .info-wrapper {width: 100%;}
.section-view-rides .img-wrapper {display: none;}
#footer {font-size: 1rem;}

:root .vp-modal-window .inner {max-width: 600px;}

.auto-notes-content .view-note > .img {width: 35%; margin-right: 1em; margin-bottom: 1em;}
.auto-notes-content .view-note > .info {display: block;}
	.auto-note-vehicle, .note-info-wrapper {clear: both;}
	.view-note .note-info-wrapper .amount {min-width: 5em;}

#site .latest-rides-preview .item-content {flex-wrap: nowrap; overflow-x: auto; text-align: left;}
	#site .latest-rides-preview section {width: 40%; flex-shrink: 0;}
		.latest-rides-preview .img a {padding-bottom: 150%;}
.item-description .actions {flex-direction: column; align-items: flex-start;}
	.item-description .actions .share {margin-bottom: 2em;}
	.item-description .actions .share h4 {margin-left: .15em;}
	
.section-comments textarea {min-height: 15em;}
}

@media (max-width: 512px) {
.col-90, .col-85, .col-80, .col-75, .col-70, .col-66, .col-60, .col-55, .col-50, .col-45, .col-40, .col-33, .col-30, .col-25, .col-20, .col-15, .col-10, .col-8 {
	width: 100%;
}
.item-col-3 .item-content > section, .item-col-4 .item-content > section {width: 100%;}
#header .login-btn {margin-right: 12px;}
.steps li {width: 50%;}
.form-elements .fieldset {padding: 5.7em 1.6em .8em;}
	.form-elements legend {width: 100%;}
.item-description .member-info .city {display: none;}
.item-gallery {flex-wrap: wrap; flex-direction: column;}
	.item-gallery ul {display: flex; width: auto;}
		.item-gallery ul li {max-width: 33.33%;}
.comment-respond .alert {padding-left: 45px;}
#site .login-comment .m-r-xs {margin-right: .3em;}
#site .login-comment .m-x-xs {margin: 0 .3em;}
.user-messages main .wrapper {padding: 0; border: 1px solid transparent; height: 100vh;}
	.user-messages .side-bar, .user-messages .content {width: 100vw;}
	.user-messages .content {position: fixed; top: 0; width: 100%; height: 100%; padding-top: 7.6em; overflow: auto;}
	.user-messages .content, .new-message {left: 100%;}
		.user-messages.nav-click .content, .nav-click .new-message {left: 0;}
		.user-messages.nav-click .side-bar {left: -100%;}
			.nav-click .user-timeline .column > h3 {
				position: fixed; top: 59px; left: 0; z-index: 100; width: 100%; padding-left: 2em;
				white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-color: hsla(0,0%,100%,.8);
			}
				.user-timeline .column > h3 .btn-back {position: absolute; top: 0; left: 0; display: block; width: 1.7em; height: 2.4em;}
				.user-timeline .column > h3 .btn-back:before {
					content: ""; display: inline-block; width: 10px; height: 10px; margin: .9em 0 0 .7em; vertical-align: middle;
					border-style: solid; border-width: 0 0 2px 2px; transform: rotate(45deg);
				}
.item-description h1.lead-heading .add-on-wrapper {justify-content: center; flex-direction: column-reverse; padding: .7em;}
.item-description h1.lead-heading .add-on-wrapper:after {margin: 0 0 .3em;}
#site .items-sortable {text-align: center;}
	.items-sortable li {position: relative; float: none; display: inline-block;}
.user-messages .cd-bottom {right: 50%; transform: translateX(50%);}

.auto-notes-header .add-photo {width: 38px; height: 38px; margin-right: .3em; padding-top: 5px;}
.auto-notes-header .add-note, .auto-notes-header .add-expenses {margin-left: 0; padding-left: 1.6em; padding-right: .8em; font-size: .9rem;}
.auto-notes-header .add-note:before, .auto-notes-header .add-expenses:before, .auto-notes-header .add-note:after, .auto-notes-header .add-expenses:after {width: 10px; left: 0.5em;}
.auto-notes-content .view-note > .info > .title {font-size: 1.1em;}
}