/**** Wallis and Son 2024 website ****/
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&family=Manrope:wght@200..800&display=swap');

/*** Variables ***/
:root {
	--primary:#2D6BC8;
	--primaryDark:#225096;
	--primaryLight:#AAC7F2;
	--primaryLightest:#DEE8F8;

	--neutral:#A7AABD;
	--neutralDarkest:#040D1A;
	--neutralDark:#434656;
	--neutralLightest:#F6FAFE;

	--green:#28C195;
	--greenDarkest:#083027;
	--greenDark:#125947;
	--greenLight:#F2FDF9;

	--yellow:#EB9929;
	--yellowDark:#82510D;
	--yellowLight:#F0B15C;
	--yellowLightest:#FDF8F2;

	--red:#C03D59;
	--redDark:#591C29;
	--redLight:#FBF4F5;

	--white:#FFF;
}

/*** Overall setup ***/
* { box-sizing:border-box; margin:0 0; padding:0 0; }
body { background:var(--neutralLightest); color:var(--neutralDarkest); font:500 1rem 'Manrope', sans-serif; line-height:1.5; margin-top:5.5rem; }

/*** Tags ***/
a { color:var(--primary); text-decoration:underline; transition:.3s ease; cursor:pointer; }
a:hover { color:var(--primaryDark); }

h1, h2, h3, h4, h5, h6 { font-weight:800; }
h1 { font:800 3.25rem 'Baloo 2', serif; line-height:1.25; margin-bottom:1.25rem; }
h2 { font:800 2rem'Baloo 2', serif;; line-height:1.25; margin-bottom:.5rem; }

p { margin-bottom:1.25rem; color:var(--neutralDark); }
p:last-child { margin-bottom:0; }
p.alternate { line-height:2; font-family: 'Baloo 2', serif; }

.material-symbols-rounded { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/** Buttons/ Navigation **/

/* Top navigation buttons */
.nav-btn { float: left; color:var(--neutralDark); background:linear-gradient(to bottom left, var(--neutralLightest) 50%, var(--primaryLightest) 50%); background-size: 200% 200%; background-position: top right; padding:.75rem 1.25rem; text-decoration:none; border-radius:.5rem; }
.nav-btn:hover { color:var(--neutralDark); background-position: bottom left; }

/* Primary button */
.primary-btn { float: left; color:var(--neutralLightest); background:linear-gradient(to bottom left, var(--primary) 50%, var(--primaryDark) 50%); background-size: 200% 200%; background-position: top right; padding:.75rem 1.25rem; text-decoration:none; border-radius:.5rem; }
.primary-btn:hover { color:var(--neutralLightest); background-position: bottom left; }

/* Secondary button */
.secondary-btn { float: left; color:var(--primary); padding:.75rem 1.25rem; outline:1px solid var(--primary); outline-offset:-1px; text-decoration:none; border-radius:.5rem; }
.secondary-btn:hover { color:var(--primaryDark); outline-color:var(--primaryDark); }

/* Buttons in menu ctas */
.like-btn { float: left; padding:.75rem 1.25rem; text-decoration:none; border-radius:.5rem; transition:.3s ease; }

/* Button with a right icon */
.ico-rght-btn { padding-right: 1rem; }
.ico-rght-btn .material-symbols-rounded { font-size:1.25rem; line-height:1.5rem; float:right; margin-left:.25rem; }

.map-banner { width:100%; position:fixed; top:0; left:0; padding:12px 20px; background:var(--primaryLightest); z-index:998 !important; }
.map-banner .material-symbols-rounded { margin-top:-1rem; position:relative; top:.25rem; margin-right:.5rem; }
a .map-banner { color:var(--neutralDark); }

.wrapper { max-width:1100px; margin:0 auto; }
.hold { width:100%; float:left; }
.centre { text-align:center; }

.top { width:100%; float:left; margin-bottom:3.75rem; }
.top .logo { float:left; }
.top .logo img { float:left; height:3rem; }
.top .nav { float:right; }
.top .nav ul { list-style:none; float:left; }
.top .nav li { display:inline-block; float:left; margin-left:.75rem; }

.header { width:100%; float:left; display:flex; align-items:center; margin-bottom:6.25rem; }
.header .txt { width:44%; float:left; margin-right:12%; }
.header .txt p { margin-bottom:1.75rem; }
.header .txt ul { list-style:none; float:left; }
.header .txt li { display:inline-block; float:left; margin-right:.75rem; }
.header .img { width:44%; float:right; }
.header .img img { width:100%; float:left; border-radius:1.5rem; }

.brands { width:100%; float:left; text-align:center; margin-bottom:6.25rem; }
.brands img { width:2000px; float:left; }
.brands .scrollbrands { width:100%; overflow-x:hidden; }
.brands .scrollbrands .scroll { width:4000px; animation:scroll 15s linear forwards infinite; }
@keyframes scroll {
	0% { transform:translateX(0); }
	100% { transform:translateX(-50%); }
}

.pets { width:100%; float:left; margin-bottom:6.25rem; }
.pets .itm { width:32%; float:left; margin-right:2%; margin-bottom:2%; }
.pets .itm:nth-of-type(3n) { margin-right:0; }
.pets .itm img { width:100%; float:left; border-radius:1.25rem; }


.products { width:100%; float:left; text-align:center; margin-bottom:6.25rem; }
.products p { margin-bottom:2rem; }
.products .itm { width:32%; float:left; margin-right:2%; margin-bottom:2%; }
.products .itm:nth-of-type(3n) { margin-right:0; }
.products .itm img { width:100%; float:left; border-radius:1.25rem; }

.section-left { width:100%; float:left; display:flex; align-items:center; margin-bottom:6.25rem; }
.section-left .img { width:44%; float:right; margin-right:12%; }
.section-left .img img { width:100%; float:left; border-radius:1.5rem; }
.section-left .txt { width:44%; float:left; }
.section-left .txt .separate { width:100%; float:left; height:1px; background:var(--neutral); margin:1.75rem 0; }

.section-right { width:100%; float:left; display:flex; align-items:center; margin-bottom:6.25rem; }
.section-right .txt { width:44%; float:left; margin-right:12%; }
.section-right .txt p { margin-bottom:3.5rem; }
.section-right .txt ul { list-style:none; }
.section-right .txt li { display: inline-block; float:left; clear:left; margin-bottom:1rem; }
.section-right .txt li a { float: left; padding:12px 20px 12px 16px; background:var(--primaryLightest); border-radius:.5rem; color:var(--neutralDarkest); }
.section-right .txt li a { text-decoration:none; color:var(--neutralDarkest); }
.section-right .txt li a .material-symbols-rounded { font-size:1.25rem; line-height:1.5rem; color:var(--primary); float:left; margin-right:.5rem; }
.section-right .img { width:44%; float:right; }
.section-right .img img { width:100%; float:left; border-radius:1.5rem; }


.footer { width:100%; float:left; margin-bottom:3.75rem; }
.footer .copyright { float:left; padding:.75rem; }
.footer .nav { float:right; }
.footer .nav ul { list-style:none; float:left; }
.footer .nav li { display:inline-block; float:left; margin-left:.75rem 0; }

#about, #toys, #accessories, #food { display:none; }
.pop-up { width:100vw; height:100vh; float:left; position:fixed; top:0; left:0; background:rgba(4,13,26,.5); z-index:999 !important; }
.pop-up .container { width:90%; padding:1.5rem; border-radius:1.5rem; background:var(--neutralLightest); margin-left:5%; margin-top:50vh; transform:translateY(-50%); }
.pop-up .container .close { width:100%; float:left; }
.pop-up .container img { width:44px; height: 44px; float: right; }
.pop-up .container h2 { margin-top:-1.5rem; }

@media only screen and (max-width: 1200px) {
	.wrapper { width:100%; padding:0 2%; }
}

@media only screen and (max-width: 850px) {
	body { margin-top:6.5rem; }

	.gomob { display:none !important; }

	.header { display:block; }
	.header .txt { width:100%; float:left; margin-right:0; margin-bottom:2rem; text-align:center; }
	.header .txt ul { width:100%; }
	.header .txt li { width:100%; float:left; margin-right:0; margin-bottom:.75rem; }
	.header .txt li a { width:100%; float:left; text-align:center; }
	.header .img { width:100%; float:left; }

	.pets .itm, .products .itm { width:49%; float:left; margin-right:2%; margin-bottom:2%; }
	.pets .itm:nth-of-type(3n), .products .itm:nth-of-type(3n) { margin-right:2%; }
	.pets .itm:nth-of-type(2n), .products .itm:nth-of-type(2n) { margin-right:0; }
	.pets .itm img, .products .itm img { width:100%; float:left; border-radius:1.25rem; }

	.section-left { display:block; }
	.section-left .img { width:100%; float:left; margin-right:0; margin-bottom:2rem; }
	.section-left .txt { width:100%; float:left; }

	.section-right { display:block; }
	.section-right .txt { width:100%; float:left; margin-right:0%; margin-bottom:2rem; }
	.section-right .img { width:100%; float:left; }

	.footer .copyright { float:left; padding:0; width:100%; margin-bottom:2rem; text-align:center; }
	.footer .nav { float:left; width:100%; }
	.footer .nav ul { list-style:none; float:left; text-align:center; width:100%; }
	.footer .nav li { display:block; float:left; clear:left; margin-left:0; margin-bottom:.75rem; width:100%; text-align:center; }
	.footer .nav li a { width:100%; float:left; text-align:center; }
}