@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* ===== RESET STYLES ===== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { background: transparent; border: 0; margin: 0; padding: 0; }

table { border-collapse: collapse; width: 100%;}
table  td { vertical-align: top; }


header, nav, article, footer, address { display: block; }

/* ===== TEXT SELECTION ===== */
::-moz-selection { background: #000; color: #fff; text-shadow: none; }
::selection { background: #000; color: #fff; text-shadow: none; }

/* ===== CLEARFIX ===== */
.cf { zoom: 1;}
.cf::before, .cf::after { content: " "; display: table; }
.cf::after { clear: both; }


:root {
  --navy: #0b1c2c;
  --red: #d2232a;
  --white: #ffffff;
  --gray-light: #f7fafc;
  --gray-mid: #e2e8f0;
  --text-dark: #1a202c;
  --text-muted: #4a5568;
  --heading: "Big Shoulders", sans-serif;
  --body: 'Inter', sans-serif;
  --primary: #0b1c2c;
  --secondary: #d2232a;
}

/* ===== COLOR UTILITIES ===== */
.navy { color: var(--navy) !important; }
.red { color: var(--red) !important; }
.white { color: var(--white) !important; }
.gray-light { color: var(--gray-light) !important; }
.gray-mid { color: var(--gray-mid) !important; }
.text-dark { color: var(--text-dark) !important; }
.text-muted { color: var(--text-muted) !important; }

/* ===== GENERAL RESETS ===== */
* { margin: 0; padding: 0; box-sizing: border-box; transition: 0.3s ease all; }

body { font-family: 'Inter', sans-serif !important; color: var(--text-dark); background-color: var(--white); line-height: 1.5; }

a { text-decoration: none !important; color: inherit; transition: all 0.3s ease;}
a:hover { cursor: pointer; }


*:not(#inv) p { font-weight: 300 !important; }

ul { list-style: none; }

/* ===== HEADING STYLES ===== */
.xl-heading { font-family: var(--heading); font-size: clamp(35px, 8vw, 72px); font-style: normal; font-weight: 900; line-height: 1; text-transform: uppercase; margin-bottom: 20px; }
.lg-heading { font-family: var(--heading); font-size: clamp(34px, 5vw, 42px); font-style: normal; font-weight: 900; line-height: 1; text-transform: uppercase; margin-bottom: 20px; }
.md-heading { font-family: var(--heading); font-size: clamp(20px, 5vw, 35px); font-style: normal; font-weight: 900; line-height: 1; text-transform: uppercase; margin-bottom: 20px; }
.sm-heading { font-family: var(--heading); font-size: clamp(18px, 5vw, 26px); font-style: normal; font-weight: 900; line-height: 1; text-transform: uppercase; margin-bottom: 20px; }
.xs-heading { font-family: var(--heading); font-size: clamp(16px, 5vw, 18px); font-style: normal; font-weight: 900; line-height: 1; text-transform: uppercase; margin-bottom: 10px; letter-spacing: 15%; }
.thick { font-weight: 600; }
.eyebrow { color: var(--red); font-weight: 500; font-family: var(--heading); text-transform: uppercase; font-size: 22px; }

/* ===== LAYOUT UTILITIES ===== */
.left { text-align: left !important; }
.right { text-align: right !important; }
.center { text-align: center !important; }
.rounded { border-radius: 100px; }
.width { max-width: 1400px; margin: 0 auto; width: 96%; box-sizing: border-box; }
.container { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.pad { padding: clamp(40px, 6vw, 80px) 0; }
.xs-pad { padding: clamp(05px, 3vw, 15px) 0px; }
.sm-pad { padding: clamp(20px, 3vw, 50px) 0px; }
.md-pad { padding: clamp(20px, 3vw, 50px) 0px; }
.xl-pad { padding: clamp(20px, 3vw, 50px) 0px; }

/* ===== BUTTON STYLES ===== */
.btn-row {displlay: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 10px;}

.btn { margin: 3px; display: inline-block; padding: 10px 25px; font-family: 'Big Shoulders', sans-serif !important; font-weight: 700; text-transform: uppercase; border-radius: 4px; cursor: pointer; font-size: 1.1rem;
  
}
.btn-red { background-color: var(--red); color: var(--white); border: 2px solid var(--red);}
.btn-red:hover { background-color: var(--white); color: var(--red); border: 2px solid var(--white); }

.btn-outline { background-color: transparent; color: var(--white); border: 2px solid var(--white);}
.btn-outline:hover { background-color: var(--white); color: var(--red); border: 2px solid var(--white); }
  
a.btn-nude { color: var(--red); font-size: 16px; font-weight: 600;}
a.btn-nude::after {content: '\f105'; font-family: "Font Awesome 6 Free" !important;  transition: 0.3s ease all !important;}
a.btn-nude:hover::after {padding-left: 20px; transition: 0.3s ease all;}

/* ===== HEADER STYLES ===== */
/*
header { background-color: var(--navy); color: var(--white); padding: 15px 0; position: sticky; top: 0; z-index: 1000;}
.header-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 25px; }
*/


.header-wrap { background-color: var(--navy); color: var(--white); padding: 15px 0; position: sticky; top: 0; z-index: 1000;}
.header-wrap > div {display: flex; justify-content: space-between; align-items: center;  gap: 25px; }

/*.logo { max-height: 50px; width: auto; object-fit: contain; height: 100%;}*/
.logo img { max-width: 250px; height: auto; object-fit: contain; width: 100%;}
.header-left { display: flex; justify-content: center; align-items: center; align-self: flex-end; }

.header-wrap .btn-red {margin: 0 0 0 10px; display: flex; justify-content: center; align-items: center; align-self: center;}


@media screen and (max-width: 1000px) {
    .header-wrap > div {flex-direction: column;}
    .header-wrap > div > .logo {display: none;}
    .mobile-nav {justify-content: space-between; background: var(--navy) !important;}
}

/* ===== HERO STYLES ===== */
.heroSwiper.swiper { width: 100%; position: relative; overflow: hidden; background: var(--navy);}
.heroSwiper .swiper-wrapper { display: flex; flex-direction: row;}
/*.heroSwiper .swiper-slide { background: #000; height: 100%;}*/
.heroSwiper img { height: 700px; display: block; width: 100vw; object-fit: cover; object-position: center center !important;}
.heroSwiper img.first {object-position: left center !important;}
  
.grad { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 100%); }

.hero-content { position: absolute; top: 10%; left: 14%; width: 90%; max-width: 1000px; z-index: 20; color: #fff;}
.hero-content  h1 { font-family: var(--heading); color: #fff; width: 75%; max-width: 90%; }
.hero-content  p { width: 70%; padding: 15px 0; color: #eee; }


.hero-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding-top: 50px; }

.hero-icon { display: flex; justify-content: flex-start; flex-wrap: wrap; align-content: center; align-items: center; gap: 10px;}
 .hero-icon p { width: calc(100% - 55px) !important; margin: 0; }
 .hero-icon i { display: flex; font-size: 20px; -webkit-text-stroke: 1px #fff; color: transparent !important; justify-content: center; align-items: center; background: var(--red); border-radius: 100px; height: 45px; width: 45px; }


.hero { position: relative; height: 600px; background: linear-gradient(rgba(11, 28, 44, 0.6), rgba(11, 28, 44, 0.4)), url('') center/cover no-repeat; display: flex; align-items: center; color: var(--white);}
  .hero h1 { font-size: 4.5rem; line-height: 0.9; margin-bottom: 25px; }


/*----QLS-----*/
.section-title { text-align: center; margin-bottom: 50px;}
.section-title h2 { font-size: 2.5rem; color: var(--navy); }

.truck-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.truck-card { border: 1px solid var(--gray-mid); overflow: hidden; transition: 0.3s ease all; border-radius: 12px;}
.truck-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);}
.truck-card img { width: 100%; height: 220px; object-fit: cover; }
.truck-card-info { padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; background: #fff;}
.truck-card-info h3 { font-size: 1.2rem; margin: 0; }

.arrow-icon { color: var(--red); font-weight: bold; }

/* ----- Why ----- */
.why-bg { background-color: var(--gray-light); }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
.feature-box { background-color: #fff; padding: 40px; min-height: 200px; margin: 10px; border-radius: 12px; border: 1px solid #E5E7EB;}
.feature-box:hover {transform: translate(-5px, -5px); transition: 0.1s ease all;}
.feature-box.highlight-navy { background-color: var(--navy); color: var(--white); }
.feature-box.highlight-red { background-color: var(--red); color: var(--white); }
.feature-box h4 { font-size: 1.5rem; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.feature-box p { font-size: 0.95rem; opacity: 0.9; }
.feature-box i { font-size: 1.5rem; opacity: 0.9; padding-bottom: 10px;}

/* ----- Trusted Brands ----- */
.map-grid:has(> .brand-image) {display: flex; align-items: stretch;}
.map-grid:has(> .brand-image) > div {flex: 1 1 0;}
.map-grid:has(> .brand-image) > div:not(.brand-image) {align-self: center;}
.map-grid > div.brand-image img {height: 100%; object-fit: cover;}


/* ----- Process ----- */
.process-section { background-color: var(--navy); color: var(--white); text-align: center; }
.process-steps { display: flex; justify-content: space-between; margin-top: 60px; position: relative; }
.process-steps::before { content: ""; position: absolute; top: 30px; left: 10%; right: 10%; height: 2px; background: rgba(255, 255, 255, 0.2); z-index: 1; }
.step { flex: 1; position: relative; z-index: 2; }
.step h4 { font-size: 1.1rem; margin-bottom: 10px; }
.step p { font-size: 14px; opacity: 0.8; padding: 0 10px; }
.step-icon { width: 60px; height: 60px; background: var(--navy); border: 2px solid var(--red); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.step-number { position: absolute; top: -5px; right: 35%; padding-top:2px; background: var(--red); width: 20px; height: 20px; border-radius: 50%; font-size: 0.7rem; font-weight: bold; aspect-ratio: 1/1; text-align: center;}
.text-bubbles {display: flex; flex-wrap: wrap; gap: 10px;}
.text-bubbles .rounded {background: var(--navy); font-size:16px; color: #fff; padding: 8px 20px; font-weight: 400; font-family:var(--heading);}
.text-bubbles a:hover {background: var(--red);}

/* ----- Map & Testimonials ----- */
.map-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 50px; }
.map-grid .stat-box {display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; border-radius: 10px; padding: 50px 20px; gap: 10px; text-align: center;}
.dot-map { width: 100%; height: auto; }
.bullet-list li { margin-bottom: 10px; position: relative; padding-left: 20px; }
.bullet-list li::before { content: "■"; color: var(--red); position: absolute; left: 0; }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.testimonial-card { background: var(--gray-light); padding: 30px; border-radius: 4px; }
.testimonial-card p { font-style: italic; margin-bottom: 20px; font-size: 0.9rem; }
.testimonial-card .author { font-weight: 700; font-family: 'Inter', sans-serif; }
.stars { color: var(--red); margin-bottom: 15px; font-size: 0.8rem; }

/* ----- ABOUT PAGE ----- */
.page-heading {background-size: cover !important; background-position: center center !important; min-height: 300px; background-repeat: no-repeat !important;}
.page-heading-content {padding: 75px 20px; margin: auto !important; color: var(--white);}
.page-heading-content p {max-width: 400px;}

.page-heading.about {background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1)), url("/siteart/semi-truck-about.jpg"); background-position: 50% 50% !important;}

.dual-col {display: flex; justify-content: space-between; align-items: stretch; gap: clamp(0px, 5vw, 50px);}
.dual-col > div {padding: 50px 20px; border-radius: 10px;}
.dual-col > div span:has(i) {font-size: 20px; background: var(--navy); color: var(--white); padding: 10px; border-radius: 100px; display: flex; justify-content: center; align-items: center; height: 44px; width: 44px; margin-bottom: 20px;}

#facebook {margin-bottom: 100px; overflow: hidden; box-shadow: 5px 5px 10px -5px rgba(0,0,0,0.1); border-radius: 9px;}
#facebook .fb-header {display: flex; justify-content: flex-start; align-items: flex-start; gap: 20px; background: #eee; padding: 30px 30px 50px 30px; border-radius: 10px 10px 0 0; flex-wrap: wrap;}
#facebook .fb-pfp { position: relative;}
#facebook .fb-pfp-prof {border-radius: 100%; aspect-ratio: 1/1; display: block; overflow: hidden; max-height: 150px; border: 5px solid #0095f6;}
#facebook .fb-pfp-icon {position: absolute; bottom: 0; right: 0; height: 30%; width: 30%; fill: #0095f6; background: #eee; border-radius: 100%;}
#facebook .fb-name {display: flex; justify-content: flex-start; align-items: center; gap: 10px; font-size: 24px; color: #0095f6; font-weight: 600;}
#facebook .fb-tag {display: flex; font-weight: 600; margin-bottom: 10px;}
#facebook .fb-bio {display: flex; max-width: 500px;}
#facebook .fb-follow {display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; max-width: 220px; background: #0095f6; margin-left: auto; padding: 10px; border-radius: 10px; color: #fff;}
#facebook .fb-follow:hover {background: #0066a9;}
#facebook .fb-posts {container-type: inline-size; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 10px; border: 2px solid #eee; border-radius: 0 0 10px 10px;}
#facebook .fb-posts iframe {border:none!important;overflow:hidden!important;width:100%!important;min-height: 400px!important; display: flex; justify-content: center;border-radius: 10px;}

@media screen and (max-width: 1200px) {
    #facebook .fb-posts {grid-template-columns: repeat(2, 1fr);}
    #facebook .fb-posts iframe:nth-child(3) {display: none;}
}
@media screen and (max-width: 750px) {
    #facebook .fb-posts {grid-template-columns: repeat(1, 1fr);}
    #facebook .fb-posts iframe:nth-child(2) {display: none;}
}

/* ----- CONTACT PAGE ----- */
.page-heading.contact {background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1)), url("/siteart/semi-truck-red.jpg"); background-position: 50% 60% !important;}

.contact-box {display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; padding: 20px; background: var(--gray-light); border-radius: 10px;}
.contact-box span {font-family: "Big Shoulders"; font-size: 18px; text-transform: uppercase; color: var(--navy); font-weight: 800; letter-spacing: 5%;}
/*.contact-box a::after {content: '\f105'; font-family: "Font Awesome 6 Free";}*/

.flex-form { width: 100%; margin: 0 auto 2rem auto; padding: 25px; background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); font-size: 15px; }
.flex-form label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: #222; letter-spacing: 0.02em; }
.flex-form input,
.flex-form select,
.flex-form textarea { width: 100%; padding: 12px 14px; margin-bottom: 1.2rem; border: 1px solid #ccc; border-radius: 5px; font-family: var(--body-font); background: #ffffff; font-size: 15px; color: #333; transition: border-color 0.2s; box-sizing: border-box; }
.flex-form input:focus,
.flex-form select:focus,
.flex-form textarea:focus { border-color: var(--primary); outline: none; }
.flex-form textarea { min-height: 100px; resize: vertical; }
.flex-form .form-row { display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; gap: 1rem; }
.flex-form .form-note { font-size: 13px; color: #888; margin-bottom: 1rem; }
.flex-form .flex-row { display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; gap: 1rem; }
.flex-form .form-whole { width: 100%; }
.flex-form .form-half { width: calc(50% - 0.5rem); }
.flex-form .form-third { width: calc(33.333% - 0.67rem); }

@media (max-width: 900px) {
.form-half,
.form-third { width: 100%; }
}

.submit-button { display: inline-block; padding: 14px 28px; background: var(--primary); color: #fff; border: none; border-radius: 5px; font-size: 16px; font-family: var(--heading); text-transform: uppercase; cursor: pointer; transition: background 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease; }
.submit-button:hover { background: var(--secondary); }

/* ----- FINANCE PAGE ----- */
.page-heading.finance {background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1)), url("/siteart/trucks-lineup.jpg"); background-position: 50% 75% !important;}

/* ----- TRADE PAGE ----- */
.page-heading.trade {background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1)), url("/siteart/semi-truck-handshake.jpg"); background-position: 50% 75% !important;}

/*--- FOOTER STYLES ---------------------*/
footer { background-color: var(--navy); color: var(--white); padding: 60px 0 20px; border-top: 3px solid var(--red);}

.footer-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; margin-bottom: 50px; flex-wrap: wrap; }
/*.footer-grid > div { flex: 1 1 0;}*/
.footer-grid > div:has(> .foot-logo) { flex: 2 1 0;}
.footer-grid > div:nth-child(1) { flex: 2 1 0; min-width: 210px;}
.footer-grid > div:nth-child(4) { flex: 2 1 0; min-width: 210px;}

.footer-col {display: flex; flex-direction: column; gap: 10px;}
.footer-col ul li { margin-bottom: 10px; font-size: 0.9rem; opacity: 0.8; }
.footer-col a:hover { color: var(--red); opacity: 1; }
.footer-col.partner-logos {display: grid; grid-template-columns: repeat(2, 1fr);}
.footer-col.partner-logos img {margin: auto;}

.footer-socials { display: flex; align-items: center; gap: 10px; margin-top: 20px;}
.footer-socials > a {width: 44px;height: 44px;display: flex;justify-content: center;align-items: center; background: rgba(255,255,255,0.25); border-radius: 50%;}
.footer-socials i {color: var(--white);font-size: 20px;line-height: 1;}

.foot-logo { max-width: 240px; width: 100%; }

.final-cta { background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/siteart/trucks-lineup.jpg') center/cover; color: #fff; text-align: center; padding: 100px 0; }
.final-cta h2 { font-size: 3rem; margin-bottom: 30px; }

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; display: flex; justify-content: space-between; font-size: 0.8rem; opacity: 0.6; }

.partner-logos img { max-width: 100px; margin-left: 20px; }


/* ---- INVENTORY STYLES - KEEP AT BOTTOM OF CSS ---- */

:root {
    --primary: #0b1c2c;
    --secondary: #d2232a;
}

#inv .listing-top-right,
#inv .buy-now-link,
#inv .check-availability-link,
#inv .view-listing-details-link,
#inv .email-seller-link { background: var(--primary) !important; color: #fff !important; }

#inv .list-error-container .info button,
#inv .mobile-done-button,
#inv a.buy-btn.des-buy-now,
#inv a.buy-btn.gtm-buynow.des-buy-now,
#inv button.selected-facet.ts-button,
#inv .detail-contact-bar .contact-bar-btn,
#inv button.page-nav { background: var(--primary) !important; color: #fff !important; }

#inv .list-listings-count {color: var(--secondary) !important;}
#inv span.list-title-text {font-family: "Big Shoulders", sans-serif !important;}

/* LOADING RING */
#inv .lds-ring {color: var(--secondary) !important;}
#inv .lds-label { font-family: "Big Shoulders", sans-serif; font-weight: 700; text-transform: none; color: var(--primary)!important;}

/* ---- Hover States ---- */
#inv .view-listing-details-link:hover,
#inv .contact-options a:hover,
#inv .fin-calc-mobile > a:hover,
#inv button.g-recaptcha.button:hover,
#inv .email-seller-link:hover,
#inv .mc-nav-controls .mc-icon-navarrow span,
#inv a.buy-btn.des-buy-now:hover,
#inv a.buy-btn.gtm-buynow.des-buy-now:hover,
#inv .detail-contact-bar .contact-bar-btn:hover 
{ background: var(--secondary) !important; color: #fff !important; }

/*---------- RESPONSIVE STYLES ----------*/
@media only screen and (max-width: 1800px) {

}
@media only screen and (max-width: 1200px) {
    .hero-icons {grid-template-columns: repeat(2, 1fr);}
}
@media only screen and (max-width: 1100px) {

}
@media only screen and (max-width: 1000px) {
    .header-left > a {display: none;}
    
    .heroSwiper img {min-height: 900px;}
    .hero-content {top: 5%; left: 5%;}
    .hero-icons {flex-direction: column; padding-top: 10px; align-items: flex-start; gap: 10px;}
    .hero-icons p {padding: 0;}
    
    .features-grid {grid-template-columns: repeat(2, 1fr);}
    .features-grid .feature-box:nth-child(3) {order: 4;}
    .features-grid .feature-box:nth-child(6) {order: 6;}
    
    .testimonial-grid {grid-template-columns: repeat(2, 1fr);}
}
@media only screen and (max-width: 900px) {

}
@media only screen and (max-width: 800px) {
    .map-grid:has(> .brand-image) {flex-direction: column-reverse;}
    
    .truck-grid {grid-template-columns: repeat(2, 1fr);}
    
    .process-steps {flex-direction: column;}
    .process-steps::before { top: 30px; left: 10%; right: 10%; height: 80%; width: 3px;}
    .step {text-align: left; margin-bottom: 50px;}
    .step > h4, .step > p {margin-left: 15%; padding: 0;}
    .step-icon {margin-left: 10%; transform: translateX(-50%);}
    .step-icon .step-number {transform: translateX(100%);}
    
}
@media only screen and (max-width: 700px) {
    .map-grid {grid-template-columns: 1fr;}
    
    .dual-col {flex-direction: column;}
}
@media only screen and (max-width: 600px) {
    .hero-icons {grid-template-columns: repeat(1, 1fr); padding-top: 50px;}
    
    .features-grid {grid-template-columns: repeat(1, 1fr);}
    .features-grid .feature-box:nth-child(n) {order: unset !important;}
    
    .testimonial-grid {grid-template-columns: repeat(1, 1fr);}
    
    #formpage .flex-row {flex-direction: column; width: 100%; max-width: none;}
    #formpage .flex-row .form-half {width: 100%;}
    #formpage .flex-row .form-third {width: 100%;}
}
@media only screen and (max-width: 500px) {
    .truck-grid {grid-template-columns: repeat(1, 1fr);}
}
@media only screen and (max-width: 430px) {

}
@media only screen and (max-width: 380px) {

}