/*
CP Guitars
https://www.cpguitars.co.uk
Copyright 2026
*/

@charset "UTF-8";

/* ===== ROOT ========================================================================= */

:root{

/* ===== MOBILE SETTINGS (VIEWPORT WIDTH UP TO 768px) ================================= */

/* Container Width - Adjust to fit viewport width */
--width-mobile: 100vw;

/* HTML Font Size - Sets global text size, depending on viewport width */
--font-mobile: 17px;

/* Logo Font Size - Sets size of logo text */
--logo-mobile: clamp(2rem,4vw,4rem); /* 2rem min, 4vw preferred, 4rem max */

/* Navigation Menu - Font size of navigation menu links*/
--nav-mobile: 1.25rem;

/* Headings - Sets size of h1,h2,h3 & h4 headings */
--h1-mobile: clamp(3rem, 5vw, 4rem);
--h2-mobile: clamp(1.2rem, 3vw, 3rem);
--h3-mobile: 1.75rem;
--h4-mobile: clamp(1rem,5vw,1.1rem);

/* Footer Font Size - Sets size of footer text */
--footer1-mobile: clamp(1rem,2.3vw,1rem);
--footer2-mobile: clamp(1rem,2.05vw,1rem);


/* ===== IPAD SETTINGS (VIEWPORT WIDTH 768px TO 1075px) =============================== */

/* Container Width - Adjust to fit viewport width */
--width-ipad: 90vw;

/* HTML Font Size - Sets global text size, depending on viewport width */
--font-ipad: 17px;

/* Logo Font Size - Sets size of logo text */
--logo-ipad: clamp(2rem,4vw,4rem);

/* Navigation Menu - Font size of navigation menu links*/
--nav-ipad: clamp(0.85rem,1.7vw,0.95rem);

/* Headings - Sets size of h1,h2,h3 & h4 headings */
--h1-ipad: clamp(3rem,5vw,4rem);
--h2-ipad: clamp(1.5rem,2.5vw,3rem);
--h3-ipad: 2rem;
--h4-ipad: clamp(0.85rem,1.8vw,1rem);

/* Footer Font Size - Sets size of footer text */
--footer1-ipad: 1rem;
--footer2-ipad: 0.9rem;


/* ===== DESKTOP SETTINGS (VIEWPORT WIDTH 1075px TO 1900px) =========================== */

/* Container Width - Adjust to fit viewport width */
--width-desktop: 80vw;

/* HTML Font Size - Sets global text size, depending on viewport width */
--font-desktop: 16px;

/* Logo Font Size - Sets size of logo text */
--logo-desktop: clamp(2.5rem,2.5vw,3.5rem);

/* Navigation Menu - Font size of navigation menu links*/
--nav-desktop: 0.95rem;

/* Headings - Sets size of h1,h2,h3 & h4 headings */
--h1-desktop: clamp(3rem, 5vw, 4rem);
--h2-desktop: clamp(2rem, 2vw, 3rem);
--h3-desktop: 2rem;
--h4-desktop: 1.3rem;

/* Footer Font Size - Sets size of footer text */
--footer1-desktop: 0.9rem;
--footer2-desktop: 0.85rem;

/* ===== LARGE SCREEN SETTINGS (VIEWPORT WIDTH OVER 1900px) =========================== */

/* Container Width - Adjust to fit viewport width */
--width-large-screen: 70vw;

/* HTML Font Size - Sets global text size, depending on viewport width */
--font-large-screen: 16px;

/* Logo Font Size - Sets size of logo text */
--logo-large-screen: clamp(3rem,3vw,5rem);

/* Navigation Menu - Font size of navigation menu links*/
--nav-large-screen: 0.95rem;

/* Headings - Sets size of h1,h2,h3 & h4 headings */
--h1-large-screen: clamp(3rem, 5vw, 4rem);
--h2-large-screen: clamp(2rem, 2vw, 3rem);
--h3-large-screen: 2rem;
--h4-large-screen: 1.1rem;

/* Footer Font Size - Sets size of footer text */
--footer1-large-screen: 0.9rem;
--footer2-large-screen: 0.85rem;

/* ===== COLOUR VARIABLES ============================================================= */
--bgblue: #c6ceda;
--darkblue: #0d1b2a;
--navyblue: #1b263b;
--royalblue: #415a77;
--skyblue: #778da9;
--lightblue: #e2e5e7;
--steelgrey: #e0e1dd;
--purewhite: #ffffff;
--white: #f9f9f9;
--goldenrod: #ffc100;
--highlight1:#ffc100;
--highlight2:#d19d00;
--highlight3:#f314b3;

/* Image Overlay Colour */
--img-overlay-colour: rgba(27, 38, 59, 0.60);

/* ===== BOX VARIABLES ================================================================ */

/* Number Of Boxes Across - Sets the number of boxes across the viewport width */
--4across: calc((100% - 4rem)/4);
--3across: calc((100% - 4rem)/3);
--2across: calc((100% - 4rem)/2);
--2columns: calc(((100% - 1rem)/3)*2);
--1across: 100%;
--narrow1across: 70%;

/* Shadow Variables */
--shadow-color: 209deg 100% 4%;

--container-shadow:
-0.5px 0px 0.6px hsl(var(--shadow-color) / 0.08),
-1.5px 0px 1.8px -0.5px hsl(var(--shadow-color) / 0.09),
-2.9px 0px 3.5px -0.9px hsl(var(--shadow-color) / 0.1),
-5.6px -0.1px 6.8px -1.4px hsl(var(--shadow-color) / 0.11),
-10.6px -0.1px 13px -1.8px hsl(var(--shadow-color) / 0.12),
0.5px 0px 0.6px hsl(var(--shadow-color) / 0.08),
1.5px 0px 1.8px -0.5px hsl(var(--shadow-color) / 0.09),
2.9px 0px 3.5px -0.9px hsl(var(--shadow-color) / 0.1),
5.7px 0px 7px -1.4px hsl(var(--shadow-color) / 0.11),
10.6px 0px 13px -1.8px hsl(var(--shadow-color) / 0.12);

--shadow-down:
0px 0.6px 0.7px hsl(var(--shadow-color) / 0.08),
0px 2.3px 2.8px -0.7px hsl(var(--shadow-color) / 0.1),
0px 5.5px 6.5px -1.3px hsl(var(--shadow-color) / 0.11),
0px 12.8px 15.2px -2px hsl(var(--shadow-color) / 0.12);

--shadow-up:
0px -0.6px 0.7px hsl(var(--shadow-color) / 0.08),
0px -2.3px 2.8px -0.7px hsl(var(--shadow-color) / 0.1),
0px -5.5px 6.6px -1.3px hsl(var(--shadow-color) / 0.11),
0px -12.8px 15.4px -2px hsl(var(--shadow-color) / 0.12);

--inset-down:
0px 0.6px 0.7px hsl(var(--shadow-color) / 0.08) inset,
0px 2.3px 2.8px -0.7px hsl(var(--shadow-color) / 0.1) inset,
0px 5.5px 6.5px -1.3px hsl(var(--shadow-color) / 0.11) inset,
0px 12.8px 15.2px -2px hsl(var(--shadow-color) / 0.12) inset;

--inset-up:
0px -0.6px 0.7px hsl(var(--shadow-color) / 0.08) inset,
0px -2.3px 2.8px -0.7px hsl(var(--shadow-color) / 0.1) inset,
0px -5.5px 6.6px -1.3px hsl(var(--shadow-color) / 0.11) inset,
0px -12.8px 15.4px -2px hsl(var(--shadow-color) / 0.12) inset;

--button-shadow:
0.7px 0.7px 1.1px hsl(var(--shadow-color) / 0.1),
2.5px 2.5px 4.1px -0.8px hsl(var(--shadow-color) / 0.11),
6.2px 6.1px 10px -1.5px hsl(var(--shadow-color) / 0.11),
14.8px 14.7px 24.1px -2.3px hsl(var(--shadow-color) / 0.11);

}

/* ===== ANGLED EDGES ================================================================= */
.div-bot-left {clip-path: polygon(0 0,100% 0,100% 100%,0 calc(100% - 30px));}
.div-top-left {clip-path: polygon(0 0,100% 30px,100% 100%,0 100%);margin-top: -30px;}
.div-bot-right {clip-path: polygon(0 0,100% 0,100% calc(100% - 30px),0 100%);}
.div-top-right {clip-path: polygon(0 30px,100% 0,100% 100%,0 100%);margin-top: -30px;}

/* ===== CSS RESET ==================================================================== */
*{margin:0;padding:0;border:0;scroll-behavior:smooth;}
*,::after,::before{box-sizing:border-box;}
html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;}
body,h1,h2,h3,h4,h5,p{margin-block-end:0;font-optical-sizing:auto;}

/* ===== BASIC LAYOUT ================================================================= */
html,body{height:100svh;min-height:100svh;background:var(--bgblue);}
html{font-size:var(--font-desktop);}
body{font-size:var(--font-desktop);overflow-x:hidden;overflow-y:scroll;}
h1,h2{margin:0 auto;padding:1rem;color:var(--white);text-align:center;width:100%;z-index:500;line-height:1.2;}
h1{font-size:var(--h1-desktop);}
h2{font-size:var(--h2-desktop);}
h3{margin:1.25rem auto;width:100%;font-size:var(--h3-desktop);}
h4{margin:0 auto;width:100%;font-size:var(--h4-desktop);}
h3,h4{line-height:1.2;}
p{margin:0 auto;padding:0.75rem 0 0.75rem 0;width:100%;line-height:1.6;}
ul, li {font-size:1.05rem;line-height:1;}
a,a:active,a:hover,a:link,a:visited{text-decoration:none;}
[id]{scroll-margin-top: 155px;}
.txtunder{text-decoration:underline;}
.txtbold{font-weight: bold;}
.txtitalic{font-style: italic;}
.highlight1{color:var(--highlight1);}
.highlight2{color:var(--highlight2);}
.highlight3{color:var(--highlight3);}

/* ===== FONTS ======================================================================== */

/* Geomanist Bold */
@font-face {
font-family: 'Geomanist Bold';
font-weight:800;
font-style:normal;
font-display:swap;
src:
url('../fonts/geomanist-bold.woff2') format('woff2'),
url('../fonts/geomanist-bold.woff') format('woff'),
url('../fonts/geomanist-bold.ttf') format('truetype');
}

/* Trade Gothic */
@font-face {
font-family: 'Trade Gothic';
font-weight:normal;
font-style:normal;
font-display:swap;
src:
url('../fonts/tradegothic.woff2') format('woff2'),
url('../fonts/tradegothic.woff') format('woff'),
url('../fonts/tradegothic.ttf') format('truetype');
}

/* Trade Gothic Bold */
@font-face {
font-family: 'Trade Gothic Bold';
font-weight:800;
font-style:normal;
font-display:swap;
src:
url('../fonts/tradegothicbold.woff2') format('woff2'),
url('../fonts/tradegothicbold.woff') format('woff'),
url('../fonts/tradegothicbold.ttf') format('truetype');
}

body{font-family: 'Trade Gothic', 'Verdana', sans-serif;}
h1,h2,h3,h4{font-family: 'Geomanist Bold', 'Verdana', sans-serif;}
strong{font-family: 'Trade Gothic Bold', 'Verdana', sans-serif;}
.pricing-section-bold{font-family: 'Geomanist Bold', 'Verdana', sans-serif;}

/* ===== GLOBAL WIDTHS ================================================================ */
.logo, nav, .container, footer{width:var(--width-desktop);max-width:var(--width-desktop);min-width:var(--width-desktop);}

/* ===== CONTAINER ==================================================================== */
.container{margin:0 auto;min-height:auto;display:flex;flex-direction:row;justify-content:center;background:var(--navyblue);box-shadow:var(--container-shadow);font-size:1.1rem;}

/* ===== HEADER ======================================================================= */
header{position:sticky;top:0;left:50%;right:50%;height:155px;background:transparent;display:flex;flex-direction:row;align-items:center;justify-content:center;text-align:center;z-index:8888;}

/* ===== LOGO ========================================================================= */

/* Logo */
.logo{display:flex;flex-direction:row;align-items:center;justify-content:center;text-align:center;position:absolute;top:0;height:120px;min-height:120px;margin:0 auto;color:var(--white);cursor:pointer;background:var(--navyblue);}

/* Logo Link */
.logo a{background:center center url("https://cpguitars.twic.pics/images/site/logo.png?twic=v1/resize=320/output=webp") no-repeat var(--navyblue);transition:background 300ms ease-in-out 0s;height:120px;min-height:120px;width:320px;}
.logo a:hover{background:center center url("https://cpguitars.twic.pics/images/site/logo-hover.png?twic=v1/resize=320/output=webp") no-repeat var(--navyblue);}

/* Logo Hidden text*/
.logo-hidden {position: absolute;height: 1px;width: 1px;overflow: hidden;white-space: nowrap;clip: rect(0 0 0 0);clip-path: inset(50%);}

/* ===== NAVIGATION =================================================================== */
nav{position:absolute;top:120px;height:35px;display:flex;flex-direction:row;align-items:center;justify-content:center;text-align:center;background:var(--royalblue);z-index:8888;box-shadow:var(--shadow-down);}

/* Menu Styles */
.nav-menu{display:flex;list-style:none;font-family:'verdana';}
.nav-item {height:35px;padding-top:0.55rem;}

/* Menu Links */
.nav-item a{display:inline-block;font-size:var(--nav-desktop);padding:0 1.1vw 0 1.1vw;width:100%;color: var(--white);transition:color 300ms ease-in-out 0s;}
.nav-item a:hover{color: var(--navyblue);}
.nav-item a:active{color: var(--navyblue);transition-duration:0s;}

/* These classes are for highlighting menu items when scrolling. See 'script.js' */
.nav-item a.clickd{color: var(--navyblue);transition-duration:0s;}
.nav-item a.active{color: var(--goldenrod);transition-duration:0s;}

/* Mobile Hamburger Menu */
.hamburger{display:none;}
.bar{display:block;width:25px;height:3px;margin:5px auto;transition:all 300ms ease-in-out 0s;background-color:var(--white);}

/* ===== SECTIONS ========================================================================== */
section {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4svh 5vw 4svh 5vw;height:auto;}

/* ===== TOP ========================================================================== */
.top{margin-top:155px;min-height:39svh;}

/* Image */
.top img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}

/* Image Overlay Colour */
.top::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--img-overlay-colour);z-index:100;}

/* ===== TEXT SECTION ================================================================= */

/* First text Section */
.text-one {background:var(--steelgrey);color:var(--navyblue);text-align:left;padding-bottom:7svh;box-shadow:var(--inset-down);}

/* Second Text Section */
.text-two {background:var(--skyblue);color:var(--darkblue);text-align:right;padding-top:4svh;box-shadow:var(--inset-down);}

/* ===== GALLERY0 SECTION ========================================================================= */
.gallery0 {padding:1svh 2vw 1svh 2vw;height:auto;min-height:40svh;text-align:center;}
.gallery0 img{width:100%;height:auto;}
#gallery0 {background:var(--navyblue);color:var(--purewhite);}

/* Gallery0 Boxes Container - 4 ACROSS */
.gallery0-boxes{width:100%;display:flex;flex-wrap:nowrap;padding:1rem 0 1rem 0;}
.gallery0-box{width:var(--4across);margin:0 auto;}
.gallery0-box img{padding:0;height:auto;}

/* Gallery0 Boxes */
.gallery0-boxes > *{width:var(--4across);padding:0.5rem;}

/* Gallery0 Boxes Container - 2 ACROSS */
.gallery0-boxes-2-across{width:100%;display:flex;flex-wrap:nowrap;padding:1rem 0 1rem 0;}
.gallery0-box-2-across{width:var(--2across);margin:0 auto;}
.gallery0-box-2-across img{padding:0;height:auto;}

/* Gallery0 Boxes */
.gallery0-boxes-2-across > *{width:var(--2across);padding:0.5rem 0 0.5rem 0;}

/* ===== IMAGE SECTION ================================================================ */
.image-section {height:50svh;}

/* Image */
.image-section img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}

/* Image H3 (Hidden from view, but needed for accessibility and code validation) */
.image-section h3{border:0;clip-path: inset(0 0 0 0);height:1px;margin:-1px;overflow: hidden;white-space: nowrap;width:1px;color:var(--white);opacity:1;}

/* Image Overlay */
.image-section-overlay{position:absolute;bottom:0;left:0;width:100%;height:auto;text-align:center;display:flex;justify-content:center;align-items:center;flex-direction:column;background-color:var(--img-overlay-colour);z-index:100;}

/* Text */
.image-section-overlay p{padding:0.8rem;color:var(--white);}

/* Links */
.image-section-overlay a{color:var(--goldenrod);}
.image-section-overlay a:hover{color:var(--bgblue);}

/* ===== QUOTES ======================================================================= */
#quote1 {background:var(--darkblue);height:20svh !important;max-height:20svh !important;text-align:center;}
#quote1 h3{width:100%;color:var(--goldenrod);font-style: italic;padding:0;}
#quote1 p{width:100%;padding:0;color:var(--white);}
	
/* ===== PRICING SECTION ============================================================== */
.pricing-section{background:var(--navylblue);color:var(--white);}
.pricing-section h3{color:var(--white);}
.pricing-section strong{color:var(--goldenrod);}
.pricing-section a{color:var(--goldenrod);transition:color 300ms ease-in-out 0s;text-decoration: underline;}
.pricing-section a:hover{color:var(--bgblue);}

/* Pricing Boxes Container */
.pricing-section-boxes{display:flex;flex-wrap:wrap;gap:2rem;padding:2rem 0;}
.pricing-section-box{margin:0 auto;}

/* Pricing Boxes */
.pricing-section-boxes > *{width:var(--3across);background:var(--steelgrey);border-radius:10px;box-shadow:var(--button-shadow);}

/* Headings */
.pricing-section-heading{display:flex;justify-content:center;align-items:center;height:8svh;margin:0;padding:1rem;color:var(--white);background:var(--royalblue);border-radius:10px 10px 0 0;font-size:var(--h4-desktop)}

/* Pricing Boxes Content */
.pricing-section-text{display:flex;justify-content:center;flex-direction:column;padding:1.75rem;}
.pricing-section-text p{text-align:center;color:var(--navyblue);}

/* Bold */
.pricing-section-bold{font-size:2.5rem;color:var(--royalblue);}

/* Explanation Of Terms */
.terms {margin:1rem;list-style:none;}
.terms li{line-height:2.25rem;}

/* Alternating List */
.pricing-section-alternating {margin:0 auto;list-style:none;text-align:center;padding-bottom:2rem;}
.pricing-section-alternating li{padding:2px 0 3px 0;font-size:1.1rem;line-height:1.5;}
.pricing-section-alternating li:nth-child(odd) {color:var(--darkblue);}
.pricing-section-alternating li:nth-child(even) {color:var(--royalblue);}

/* ===== CUSTOM GUITARS =============================================================== */
#customguitars{background:var(--darkblue);color:var(--purewhite);}
#customguitars strong{color:var(--goldenrod);}
#customguitars a{color: var(--goldenrod);transition:color 300ms ease-in-out 0s;text-decoration: underline;}
#customguitars a:hover{color: var(--skyblue);}

/* ===== ABOUT SECTION ================================================================ */
.about-section{background:var(--lightblue);color:var(--navyblue);padding-bottom:7svh;}
.about-section h3{color:var(--navyblue);}

/* About Boxes */
.about-boxes{display:flex;flex-wrap:wrap;gap:2rem;padding:30px 0;}

/* About Photo */
.about-photo {width:var(--3across);box-shadow:var(--button-shadow);}
.about-photo-box{width:100%;height:100%;position:relative;padding:0;min-height:35svh;overflow:hidden;border-radius:10px;}
.about-photo-box img{position:absolute;top:0;left:0;width:100%;height:100%;min-height:400px;object-fit:cover;object-position: center center;}

/* About Text */
.about-text {width:var(--2columns);background:var(--white);border-radius:10px;box-shadow:var(--button-shadow);}
.about-text-box{width:100%;position:relative;padding:20px;color:var(--yinmn-blue);min-height:35svh;}
.about-text-box p{width:100%;}

/* ===== CONTACT ====================================================================== */
.contact-section{background:var(--skyblue);color:var(--darkblue);}
.contact-section h3{color:var(--darkblue);}
.contact-section strong{color:var(--darkblue);}
.contact-section a{color:var(--royalblue);transition:color 300ms ease-in-out 0s;}
.contact-section a:hover{color:var(--skyblue);}
.appointments{color:var(--highlight3) !important;text-decoration:underline!important;}

/* Contact Boxes Container */
.contact-section-boxes{display:flex;flex-wrap:wrap;gap:2rem;padding:2rem 0;}
.contact-section-box{margin:0 auto;}

/* Contact Boxes */
.contact-section-boxes > *{width:var(--3across);background:var(--steelgrey);border-radius:10px;box-shadow:var(--button-shadow);}

/* Contact Boxes Headings */
.contact-section-heading{display:flex;justify-content:center;align-items:center;height:8svh;margin:0;padding:1rem;color:var(--white);background:var(--royalblue);border-radius:10px 10px 0 0;font-size:var(--h4-desktop)}

/* Contact Boxes Content */
.contact-section-text{display:flex;justify-content:center;flex-direction:column;padding:1.75rem;}
.contact-section-text p{text-align:center;color:var(--navyblue);}

/* Social Media Icons */
.social{display:flex;flex-direction:row;justify-content:center;margin:2rem auto;list-style:none;}
.social a{display:flex;height:2rem;width:2rem;background-size:2rem 2rem;margin:0 0.5vw 0 0.5vw;transition:background 300ms ease-in-out 0s;}
.social a:hover{background-size:2rem 2rem;}

/* Instagram */
.instagram{background:center center url("../images/site/icon-insta-hover.png") no-repeat;}
.instagram:hover{background:center center url("../images/site/icon-insta.png") no-repeat;}

/* Reverb */
.reverb{background:center center url("../images/site/icon-reverb-hover.png") no-repeat;}
.reverb:hover{background:center center url("../images/site/icon-reverb.png") no-repeat;}

/* ===== MAP SECTION ================================================================== */
#map{height:50svh;cursor:pointer;}
#map img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}
#map h3{border:0;clip-path: inset(0 0 0 0);height:1px;margin:-1px;overflow:hidden;white-space:nowrap;width:1px;color:var(--white);opacity:1;}
#map p{position:absolute;bottom:0;right:25px;color:var(--darkblue);font-size:0.8rem;text-align:right;z-index:100;}

/* ===== NEWS & UPDATES ========================================================================== */
aside {min-width:15%;position:relative;background:var(--royalblue);color:var(--navyblue);}
#blogmain {width:85%;}
.side-menu {list-style-type:none;position:sticky;top:165px;}
.side-menu-nav-item {background:var(--royalblue);text-align:left;}
.side-menu-nav-item a {display:inline-block;font-size:var(--nav-desktop);padding:1vh 1.1vw 1vh 1.1vw;color:var(--white);transition:color 300ms ease-in-out 0s;}
.side-menu-nav-item a:hover{color: var(--navyblue);}
.side-menu-nav-item a:active{color: var(--navyblue);transition-duration:0s;}

/* These classes are for highlighting menu items when scrolling. See 'script.js' */
.side-menu-nav-item a.clickd{color: var(--navyblue);transition-duration:0s;}
.side-menu-nav-item a.active{color: var(--goldenrod);transition-duration:0s;}

/* ===== BLOG ========================================================================= */
.cpg-blog-date{margin:0;padding:10px 0 10px 0;font-size:0.8rem;}
.cpg-blog-post{padding:2svh 2vw 10svh 2vw;height:auto;min-height:50svh;text-align:center;}
.cpg-blog-post h3{margin:0 auto;padding:30px 0 0 0;}
.cpg-blog-post img{width:100%;height:auto;}
.cpg-blog-post p{padding:1.5svh 0 1.5svh 0;}
#blogpost1{background:var(--steelgrey);color:var(--navyblue);box-shadow:var(--inset-down);}
#blogpost2{background:var(--navyblue);color:var(--lightblue);box-shadow:var(--inset-down);}
#blogpost3{background:var(--lightblue);color:var(--darkblue);box-shadow:var(--inset-down);}
#blogpost4{background:var(--skyblue);color:var(--darkblue);box-shadow:var(--inset-down);}

/* Blog Boxes Container - 4 ACROSS */
.cpg-blog-post-boxes{width:100%;display:flex;flex-wrap:nowrap;padding:1rem 0 1rem 0;}
.cpg-blog-post-box{width:var(--4across);margin:0 auto;}
.cpg-blog-post-box img{padding:0;height:auto;}

/* Blog Boxes */
.cpg-blog-post-boxes > *{width:var(--4across);padding:0.5rem 0 0.5rem 0;}

/* Blog Boxes Container - 2 ACROSS */
.cpg-blog-post-boxes-2-across{width:100%;display:flex;flex-wrap:nowrap;padding:1rem 0 1rem 0;}
.cpg-blog-post-box-2-across{width:var(--2across);margin:0 auto;}
.cpg-blog-post-box-2-across img{padding:0;height:auto;}

/* Blog Boxes */
.cpg-blog-post-boxes-2-across > *{width:var(--2across);padding:0.5rem 0 0.5rem 0;}

/*Blog Links */
.blog-link-1 {color: var(--skyblue);transition-duration:0s;}
.blog-link-1:hover {color: var(--goldenrod);}

/* ===== TERMS & PRIVACY ============================================================== */
.privacypolicy {background:var(--royalblue);color:var(--white);}
.termsofuse {background:var(--navyblue);color:var(--white);}
.termsofuse ul {margin:0 auto;list-style:none;text-align:center;padding-bottom:2rem;}
.termsofuse ul li{padding:5px 0 5px 0;font-size:1.1rem;line-height:1.5;}

/* ===== FOOTER ======================================================================= */
footer{min-height:170px;position:relative;height:auto;background:var(--darkblue);color:var(--white);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:3svh;box-shadow:var(--shadow-up);z-index:8888;}
footer p{width:80%;margin:0 auto;padding:0.25rem;color:var(--white);}
footer a{color:var(--skyblue);transition:color 300ms ease-in-out 0s;}
footer a:hover{color:var(--goldenrod);}
.footer1{font-size:var(--footer1-desktop);}
.footer2{font-size:var(--footer2-desktop);}

/* Footer Social Media Icons */
.footer-social{display:flex;flex-direction:row;justify-content:center;margin:1rem auto;list-style:none;}
.footer-social a{display:flex;height:2rem;width:2rem;background-size:2rem 2rem;margin:0 0.5vw 0 0.5vw;transition:background 300ms ease-in-out 0s;}
.footer-social a:hover{background-size:2rem 2rem;}

/* Instagram */
.footer-instagram{background:center center url("../images/site/icon-insta.png") no-repeat;}
.footer-instagram:hover{background:center center url("../images/site/icon-insta-hover-footer.png") no-repeat;}

/* Reverb */
.footer-reverb{background:center center url("../images/site/icon-reverb.png") no-repeat;}
.footer-reverb:hover{background:center center url("../images/site/icon-reverb-hover-footer.png") no-repeat;}

/* ===== BACK TO TOP ================================================================== */
#backtotop{display:none;position:fixed;bottom:5svh;right: 8.5vw;width:3.5rem;height:3.5rem;opacity:0.9;z-index:8888;font-size:2rem;border:none;outline:none;color:var(--white);background:var(--skyblue);border-radius:7px;text-align:center;transition:background 300ms ease-in-out 0s;box-shadow:var(--button-shadow);}
#backtotop:hover{background:var(--royalblue);}
.chevron{margin:1.25rem auto;border-right:0.55rem solid var(--white);border-bottom:0.55rem solid var(--white);width:2rem;height:2rem;background-color:transparent;}
#chevron-arrow-down{transform:rotate(-135deg);}

/* ===== DEVICE RULES ================================================================= */

/* ===== MOBILE: Viewport Width 768px =================================================================================================================== */
@media only screen and (max-width:768px){

/* Font Sizes */
html{font-size:var(--font-mobile);-ms-overflow-style:none;scrollbar-width:none;}

/* Headings */
html::-webkit-scrollbar{display:none;}
h1{font-size:var(--h1-mobile);padding:1rem;}
h2{font-size:var(--h2-mobile);padding:1rem;}
h3{font-size:var(--h3-mobile);margin:20px auto;}
h4{font-size:var(--h4-mobile);}

/* Global Widths */
.logo, nav, .container, footer{width:var(--width-mobile);max-width:var(--width-mobile);min-width:var(--width-mobile);}
section {padding:2svh 5vw 4svh 5vw;min-height:35svh;}

/* Logo */
.logo a{font-size:var(--logo-mobile);}

/* Navigation */
nav{justify-content:right;text-align:right;}
.nav-menu{position:fixed;top:-100%;left:0;padding:0;flex-direction:column;width:100%;height:100%;text-align:center;transition:all 300ms ease-in-out 0s;background-color:var(--navyblue);opacity: .90;display:inline-block;z-index:9999;}
.nav-menu.active{top:155px;}
.nav-menu li:first-child{margin-top:2rem;}
.nav-item a{font-size:var(--nav-mobile);line-height:2.2;}
.nav-item a{color:var(--white);}
.nav-item a:hover{color:var(--white);}
.nav-item a.active{color:var(--white);}
.hamburger{display:block;cursor: pointer;padding:0 20px 0 0;}
.hamburger.active .bar:nth-child(2){opacity:0;}
.hamburger.active .bar:nth-child(1){transform: translatey(8px) rotate(45deg);}
.hamburger.active .bar:nth-child(3){transform: translatey(-8px) rotate(-45deg);}
.noscroll{overflow-y:hidden;}

/* Side Menu */
aside {display:none;}
#blogmain {width:100%;}

/* Gallery0 Section */
.gallery0-boxes > *{width:var(--2across);}
.gallery0-boxes{display:flex;flex-wrap:wrap;}

/* Info, Gallery, Pricing & Contact Boxes */
.info-section-boxes > *{width:var(--1across);}
.pricing-section-boxes > *{width:var(--1across);}
.contact-section-boxes > *{width:var(--1across);}
.gallery-photos > *{width:var(--2across);}

/* About Section */
.about-photo {width:var(--1across);min-height:40svh;}
.about-text {width:var(--1across);min-height:40svh;}
.about-photo-box img{object-position: center 20%;}

/* Contact Section */
.contact-section a{color:var(--highlight2);}

/* News & Updates Section */
.cpg-blog-post-boxes > *{width:var(--2across);}
.cpg-blog-post-boxes{display:flex;flex-wrap:wrap;}

/* Footer */
.footer1{width:90%;margin:0 auto;padding:0;font-size:var(--footer1-mobile);}
.footer2{width:90%;margin:0 auto;padding:0;font-size:var(--footer2-mobile);}

/* Back To Top */
#backtotop{right: 3.3vw;}
}

/* ===== SMALL MOBILE: Viewport Width 600px to 767px =================================================================================================================== */
@media only screen and (min-width:600px) and (max-width:767px){

/* Gallery0 Section */
.gallery0-boxes > *{width:var(--2across);}
.gallery0-boxes{display:flex;flex-wrap:wrap;}

/* Info & Contact Boxes */
.info-section-boxes > *{width:var(--narrow1across);}
.pricing-section-boxes > *{width:var(--narrow1across);}
.contact-section-boxes > *{width:var(--narrow1across);}

/* News & Updates Section */
.cpg-blog-post-boxes > *{width:var(--2across);}
.cpg-blog-post-boxes{display:flex;flex-wrap:wrap;}
}

/* ===== IPAD: Viewport Width 768px to 1075px =================================================================================================================== */
@media only screen and (min-width:768px) and (max-width:1075px){

/* Font Sizes */
html{font-size:var(--font-ipad);}

/* Headings */
h1{font-size:var(--h1-ipad);}
h2{font-size:var(--h2-ipad);}
h3{font-size:var(--h3-ipad);}
h4{font-size:var(--h4-ipad);}

/* Global Widths */
.logo, nav, .container, footer{width:var(--width-ipad);max-width:var(--width-ipad);min-width:var(--width-ipad);}

/* Logo */
.logo a{font-size:var(--logo-ipad);}

/* Navigation */
.nav-item a{font-size:var(--nav-ipad);}

/* Side Menu */
aside {display:none;}
#blogmain {width:100%;}

/* About Section */
.about-photo {width:var(--1across);}
.about-text {width:var(--1across);}
.about-photo-box img{object-position: center 25%;}

/* Contact Section */
.contact-section a{font-size:clamp(0.85rem,1.8vw,1.1rem);color:var(--highlight2);}

/* Social Media Icons */
.social a{height:1.7rem;width:1.7rem;background-size:1.7rem 1.7rem;margin:0 0.5vw 0 0.5vw;}
.social a:hover{background-size:1.7rem 1.7rem;}

/* Footer */
.footer1{font-size:var(--footer1-ipad);}
.footer2{font-size:var(--footer2-ipad);}

/* Back To Top */
#backtotop{right: 2.5vw;}
}

/* ===== LARGE SCREEN: Viewport Width 1900px and up =================================================================================================================== */
@media only screen and (min-width:1900px){

/* Font Sizes */
html{font-size:var(--font-large-screen);}

/* Headings */
h1{font-size:var(--h1-large-screen);}
h2{font-size:var(--h2-large-screen);}
h3{font-size:var(--h3-large-screen);}
h4{font-size:var(--h4-large-screen);}

/* Global Widths */
.logo, nav, .container, footer{width:var(--width-large-screen);max-width:var(--width-large-screen);min-width:var(--width-large-screen);}

/* Logo */
.logo a{font-size:var(--logo-large-screen);}

/* Navigation */
.nav-item a{font-size:var(--nav-large-screen);}

/* Footer */
.footer1{font-size:var(--footer1-large-screen);}
.footer2{font-size:var(--footer2-large-screen);}

/* Back To Top */
#backtotop{right: 13.5vw;}
}