img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} :root { --main-bg: #fff; --light: #f5f5f5; --light-comp: #4d4d4d; --dark: #26282c; --dark-comp: #fff; --primary: #c12133; --primary-comp: #fff; --secondary: #db253b; --secondary-comp: #fff; --pop: #FCE8C1 } body { font-family: 'PT Sans', Arial, Helvetica, sans-serif; font-size: 18px; line-height: 1.6; text-align: center; min-width: 320px; }body, header a, .subfoot a { color: var(--light-comp); }body, header ul, nav ul, footer ul, .hero h1, .hero p { padding: 0; margin: 0; }h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote { text-align: left; }h1, h2, h3, h4, h5, h6, .steps svg, .contact a:is(:hover,:focus) { color: var(--dark); }img, iframe, svg, video { max-width: 100%; height: auto; display: block; margin: 0 auto }iframe { aspect-ratio: auto 16 / 9; width: 100%; }a img, iframe { border: none; }a, form input[type=submit], .btn, .video svg { transition: ease-in-out .3s; }a, :is(header a, form input[type=submit], .btn,. footer a,.contact a):is(:hover,:focus) { text-decoration: none; }a, header a:is(:hover,:focus), .subfoot a:is(:hover,:focus), .video a:is(:hover,:focus) svg { color: var(--primary); }a:is(:hover,:focus) { text-decoration: underline; }hr { border-width: 1px; border-color: #eee; border-style: none none solid; margin: 40px 0; }.imgLeft, .imgRight { max-width: 45%; }.imgLeft { float: left; margin: 10px 4% 2% 0; }.imgRight { float: right; margin: 10px 0 2% 4%; }.clear { clear: both; }.nowrap, a[href^=tel] { white-space: nowrap; }sup { line-height: 0; }.hide { display: none !important; }.center, .cta p, .center :is(h1,h2,h3,p) { text-align: center; }.right {text-align: right}.left {text-align: left}.wrap { display: block; max-width: 1100px; margin: 0 auto; position: relative; }.bg-dark, .bg-dark a, .bg-dark h2, .bg-primary, .bg-primary a, .bg-primary h2, nav a, footer .grid.fourth h2, footer .grid.fourth h3, footer .grid.fourth a, .hero h1, .hero p, .video svg, .projects h2 { color: var(--dark-comp); }.bg-dark { background-color: var(--dark); }.bg-primary { background-color: var(--primary); }.bg-light { background-color: var(--light); color: var(--dark); padding: 20px; }.bg-red { background-color: #db253b; color: #fff; padding: 20px 0; font-size: 22px; }.bg-red :is(h1,h2,h3,h4,h5,h6,p) { color: #fff }.bg-red p { padding-left: 20px; padding-right: 20px }.bg-red .btn { background-color: var(--primary-comp); color: var(--primary); box-shadow: 0 3px 5px rgba(0,0,0,.3); }.bg-red .btn:is(:hover,:focus) { background-color: var(--pop); color: var(--dark) }.mid { align-items: center; align-self: center; }.grid { display: grid; grid-gap: 10px clamp(20px, 3vw, 40px); }.grid.half { grid-template-columns: repeat(2,1fr); }.grid.third { grid-template-columns: repeat(3,1fr); }.grid.fourth { grid-template-columns: repeat(4,1fr); }.grid.fifth { grid-template-columns: repeat(5,1fr); }.grid.big > img { width: 100%; height: 100%; object-fit: cover }.grid.imgblock > img { width: 100%; height: 300px; object-fit: cover }.grid.bg-light { margin: 20px 0 }.red { color: #db253b; }.team { padding-top: 20px; }.team .bg-light.grid { padding: 20px; grid-template-columns: 275px 1fr; }.team img { height: 400px; border: 3px solid black; }.team p { font-size: 16px; }details { cursor: pointer; }.bgimg { position: relative }.bgimg > img:first-of-type { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; z-index: 0; object-position: 50% 50% }.pad { padding-left: 10px; padding-right: 10px }.newsblog.homepage .posts { display: grid; grid-template-columns: repeat(2, 1fr); }.newsblog .post > h2, section .post > h3 { grid-area: title }.newsblog .post > .postThumbnail { grid-area: img }.newsblog .post > p { display: none; }.newsblog .post > .posttags { grid-area: tags }.newsblog .post > .postcats { grid-area: cats }.newsblog.homepage .post { display: grid; grid-template-areas: "img" "title" "p" "btn"; padding: 30px; }.newsblog.homepage img { height: 250px; } header.bgimg > img { opacity: 0.1; object-position: 50% 55%; pointer-events: none }header, .hero { position: relative; }header .wrap { padding: 5px }header img[src*=logo] { max-width: 250px; }header li, nav li, .social li, .subfoot li { display: inline-block; }.social, .subfoot ul { text-align: left; }header .grid ul:last-of-type { text-align: right; }header .btn { padding: 3px 35px; margin: 0 0 0 15px; }nav { padding: 0 10px; line-height: 1.8 }nav a { display: block; margin: 5px 10px; padding: 5px 10px }header a { display: block; margin: 5px; padding: 5px } nav ul li:hover ul { display: block; }nav ul ul li { margin: 0; padding: 0; width: 100%; }nav ul ul { position: absolute; display: none; z-index: 1000; width: 150px; background: #C12133; border-radius: 0 0 5px 5px; box-shadow: 0 3px 5px rgba(0,0,0,.3); }nav ul ul a { display: block; padding: 10px 5px; margin: 0; text-align: left; padding-left: 10px; }nav ul ul li a:is(:hover,:focus) { background: #db253b; color: #eee; }nav ul ul li:last-child a:is(:hover,:focus) { border-radius: 0 0 5px 5px; } .gallery.flex { margin: 0 -5px; margin-left: 100px; }.gallery.flex > a { min-width: 300px; height: 350px; margin: 5px; }.gallery p { margin-bottom: 20px; }.gallerymain { align-items: end; }.gallerymain h2 { font-size: 18px; font-weight: 400; margin-bottom: 10px; }.gallerymain h2 a { color: #403d39; } .gallery { text-align: left; display: flex; flex-wrap: wrap }.gallery a { height: 300px; object-fit: cover; width: 300px; margin: 10px; flex: 1 0 300px }.gallery a img { object-fit: cover; outline: 1px solid #eee; width: 100%; height: 100% }.galleries h2 { color: #4d4d4d; text-align: center; text-transform: uppercase; font-size: 24px; } .faq summary { background-color: var(--light); border-radius: 5px; padding: 15px; margin: 5px 0; text-align: left; }.faq summary:is(:hover,:focus) { background-color: var(--primary); color: #fff; }.faq p { padding: 0 0 0 35px } .hero { background-size: cover; background-position: center; position: relative; }.hero:before { content: ""; width: 100%; height: 100%; background-image: linear-gradient(to right,rgba(0,0,0,.5),transparent); position: absolute; inset: 0; z-index: 2 }.hero { width: 100%; height: 400px; }.hero > .wrap { top: 50%; transform: translateY(-50%); padding: 10px; z-index: 3 }.hero h1, .hero p { text-shadow: 0 0 10px rgba(0,0,0,.5); }.hero h1, .hero strong { max-width: 500px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 2px solid #fff }.hero h1 { font-size: 36px; }.hero strong, footer h2, .cta p { font-size: 30px; }.hero strong { display: block; }.hero .btn { text-shadow: none; } .welcome .wrap, .steps .wrap, .projects .wrap { padding: 40px 10px; }.welcome { margin-top: 0px; }.welcome .grid { grid-template-columns: 500px 1fr; }.welcome h2 { text-transform: uppercase; }.welcome p { line-height: 1.8; }.welcome img { margin: 30px 0 -100px; position: relative; z-index: 9; height: 360px; max-height: 360px; width: 100%; object-fit: cover; min-height: 250px }.steps { padding: 100px 0 50px 0; }.projects h2 { font-family: "Goldman", sans-serif; font-size: 120px; font-weight: 700; text-transform: uppercase; }.steps h2, .steps p { text-align: center; margin: 0; }.steps svg { width: 100px; height: 100px; margin: 0 auto; stroke-width: 1; fill: var(--light-comp); }.grid.buttons div { padding: 30px 10px 80px 15px; position: relative }.steps .grid div { box-shadow: 0 0 10px rgba(0,0,0,.2); }.grid.buttons .btn { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); white-space: nowrap }.project > .wrap { margin-top: 50px; } .projects { background-image: linear-gradient(#c12133 400px,#fff 400px); margin-bottom: 40px; padding-top: 5%; }.projects h2 { line-height: 1; margin: 0 0 40px; }.projects .grid { grid-gap: 10px; }.projects img, .about .grid img { display: block; object-fit: cover; width: 100%; height: 400px; }.projects .btn { margin-top: 20px; padding: 10px 30px }.comments { background-image: linear-gradient(to right, #26282c 50%, #fff 50%); }.comments .wrap { padding: 60px 20px; background-image: linear-gradient(to right, #26282c 90%, #fff 90%); }.comments .grid { grid-template-columns: 1fr 500px; }.comments figure { margin: 0; max-width: 90% }.comments blockquote { line-height: 2; margin: 0 20px 0 0; }.comments figcaption { display: block; font-family: 'Brush Script Std'; font-style: normal; margin-top: 30px; text-align: left; font-size: 24px }.comments img { margin: 0 0 0 auto }.cta .wrap { padding: 50px 10px 60px; }.cta p { max-width: 1000px; margin: 20px auto; }.cta .btn { margin: 30px 0; } form { text-align: left; margin: 40px 0; }form .grid { grid-gap: 0 10px; }form label { display: block; }form input[type=text], form input[type=email], form input[type=tel], form input[type=file], form input[type=submit], form select, form textarea, form input[type=password], .btn { font-family: 'PT Sans', Verdana, sans-serif; font-size: 18px; }form input[type=text], form input[type=email], form input[type=tel], form select, form textarea, form input[type=password] { background-color: var(--main-bg, #fff); margin-bottom: 10px; padding: 0 10px; border: 1px solid #eee; border-radius: 3px; }form input[type=text], form input[type=email], form input[type=tel], form select, form input[type=password] { height: 45px; }form input[type=text], form input[type=email], form input[type=tel], form textarea, form input[type=password] { width: calc(100% - 20px); }form select { width: 100%; }form input[type=file] { margin-left: 10px; border-radius: 0; }form textarea { height: 150px; padding: 15px 10px; }form input[type=submit], .btn { display: inline-block; text-align: center; line-height: 1.5; background-color: var(--primary); color: var(--primary-comp); padding: 10px 50px; margin: 10px 0; border: none; border-radius: 5px; transition: ease-in-out .3s; }form input[type=submit] { min-width: 250px; margin: 0; }:is(form input[type=submit], .btn):is(:hover,:focus) { cursor: pointer; background-color: var(--secondary); color: var(--primary-comp); } footer .wrap { padding: 30px 10px 50px; }footer h2 { grid-row: span 2; }footer h2 span { font-weight: 400; }footer h2 img { display: block; margin: 70px auto 0 auto; filter: brightness(0) invert(1); }footer h3 { margin: 30px 0 0; }footer .phone { margin-top: 20px; }:is(main, footer) .social a { display: block; margin: 5px; padding: 5px }footer .grid.fourth a:is(:hover,:focus) { color: var(--dark); }.subfoot .wrap { padding: 40px 10px; }.subfoot .grid { grid-template-columns: 1fr 150px; }.subfoot li { line-height: 1; padding-right: 10px; margin-right: 5px; border-right: 1px solid var(--light-comp); }.subfoot li:last-of-type { border: none; }.subfoot img { max-width: 150px; height: auto; }.ccpaNotice { text-align: center !important; background-color: var(--light) !important; border-color: var(--light) !important; } main { padding: 40px 10px 50px; }main h1, main h2, .hero p, .steps h3, .projects h3, .comments figcaption { font-size: 24px; }main h3, .comments { font-size: 20px; }main h4, footer h3 { font-size: 18px; }main ul, main ol { padding-left: 25px; }main li, footer li { margin: 5px 0; }.nolist, footer ul, .contact ul { list-style: none; padding-left: 0; }.contact h1, .contact p { padding: 0 10px; }.contact .bg-dark { background-image: linear-gradient(to right,#fff 50%,#26282c 50%); margin: 50px 0; }.contact .bg-dark .wrap { background-image: linear-gradient(to right,#fff 10%,#26282c 10%); padding: 20px 0; }.contact .grid { grid-template-columns: 350px 1fr; grid-gap: 0; }.contact .grid ul { margin: 40px 0; }.contact .grid > div { padding: 20px clamp(20px, 2vw, 40px) 0; }.error { color: red; font-size: 36px; }.highlight { background-color: var(--pop); border-radius: 5px; padding: 15px; margin: 25px auto }.supplier { background-color: var(--light); border-radius: 5px; padding: 15px; margin: 25px auto }.links div { background-color: #f5f5f5; padding: 15px; margin: 10px; text-align: left; } @media(max-width:1500px) { .grid.fifth {grid-template-columns: 1fr 1fr 1fr}} @media(max-width:999px) { main .grid.fourth { grid-template-columns: 1fr 1fr } .comments .grid { grid-template-columns: 1fr } footer .grid.fourth { grid-template-columns: 1fr 1fr 1fr } footer h2 { grid-row: unset; grid-column: 1 / -1; text-align: center } footer h2 img { max-width: 250px; margin: 20px auto 0 } nav ul ul { display: none !important }} @media(max-width:767px) { .welcome .grid, header .grid.third, .team .grid.bg-light, .grid.big, .contact .grid, .newsblog.homepage .posts { grid-template-columns: 1fr } .welcome img { height: auto } .grid.third,.grid.fifth { grid-template-columns: 1fr 1fr } .grid.third > *:last-child:nth-of-type(odd) { grid-column: 1 / -1 } header .grid ul:last-of-type, header .social { text-align: center } .projects img, .grid.big > img { height: 300px } .team img { height: 300px; width: 100%; object-fit: cover; object-position: 50% 5% } .team img[src*=stacey] { object-position: 50% 40% } .contact .mobile { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px } .contact form { max-width: calc(95% - 40px); margin-left: auto } .contact .grid ul { margin: 10px 0 }} @media(max-width:700px) { main .grid.fourth, .grid.half { grid-template-columns: 1fr; }} @media(max-width:600px) { .imgLeft, .imgRight { float: none; max-width: 100%; margin: 0 auto; width: 100% } footer .grid.fourth { grid-template-columns: 1fr 1fr } .subfoot .grid, .grid.third, .grid.fifth { grid-template-columns: 1fr } .subfoot ul { text-align: center }} @media(max-width:500px) { .projects .grid.third { grid-template-columns: 1fr } .comments .wrap { background-image: none; background-color: #26282c } .comments figure { margin: 0; max-width: unset } body .hero { min-height: unset } iframe {height: 300px;}} @media(max-width:400px) { footer .grid.fourth { grid-template-columns: 1fr } footer :is(h3, li, .social) { text-align: center } .contact .mobile { grid-template-columns: 1fr } .contact .bg-primary :is(h2, p, ul, li) { text-align: center } .contact .bg-dark .wrap { background-image: none; background-color: #26282c } .contact form { max-width: unset; margin-left: unset }}