/*
Theme Name: PanzaMode
Theme URI: http://www.graphixweb.co.uk/
Version: 10.0.0
*/

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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
body {
	font-family: "Bebas Neue", sans-serif;
	font-weight: 400;
	font-style: normal;
	clear: both;
	color: #fff;
	text-transform: uppercase;
	letter-spacing:1px;	
	padding: 0px;
	background:#000;
}
.wrapper {
    position: relative;
    overflow: hidden;
}
.clear { clear:both; }
ol, ul {
	list-style: none;
}
h1, h2, h3, h4, h5, h6 {
	font-family: "Bebas Neue", sans-serif;
	font-weight: 400;
	font-style: normal;
	clear: both;
	color: #fff;
	text-transform: uppercase;
	letter-spacing:1px;
}
h1 {font-size: 50px;line-height: 1.1em;padding: 0;margin: 0px;}
h2 {font-size: 62px;line-height: 1.1em;padding: 0 0 30px 0;margin: 0}
h3 {font-size: 29px;line-height: 1.1em;margin: 0;padding:0 0 20px 0;}
h4 { font-size: 22px; line-height:1em; padding:0;margin:0; }
h5 { font-size: 13px; }
h6 { font-size: 12px; }
p, li, address {
    margin: 0 0 20px;
    font-size: 29px;
    line-height: 1.1em;
    font-weight: 400;
}
p a{color:#fff}
address { text-align:center; font-style: normal; margin-top: 20px; }
ol, ul { margin: 0 0 0 25px; }
ul ul { margin-bottom: 0; }
ul { list-style: disc outside; }
html {overflow-y: scroll;font-size: 100%;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {	display: block;}
sub, sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

img {border: 0;	-ms-interpolation-mode: bicubic;}

/* Clearing floats */
.clear:after, .wrapper:after, .format-status .entry-header:after {clear: both;}
.clear:before, .clear:after, .wrapper:before, .wrapper:after, .format-status .entry-header:before, .format-status .entry-header:after {display: table;content: "";}


.menu-toggle,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
	cursor: pointer;
}
button[disabled],
input[disabled] {
	cursor: default;
}
.menu-toggle:hover,
.menu-toggle:focus,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
article.post-password-required input[type=submit]:hover {
	border-color: transparent;
}
.menu-toggle:active,
.menu-toggle.toggled-on,
button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
	border-color: transparent;
}

img[class*="align"],
img[class*="wp-image-"],
img[class*="attachment-"] {
	height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}
img.size-full,
img.size-large,
img.header-image,
img.wp-post-image {
	max-width: 100%;
	height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}

/* Images */
.alignleft {
	float: left;
}
.alignright {
	float: right;
}
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
/* Navigation */
.site-content nav {
	clear: both;
	line-height: 2;
	overflow: hidden;
}

/* =Basic structure
-------------------------------------------------------------- */

/* Body, links, basics */
html { font-size: 87.5%; }
a { outline: none; text-decoration:none; }
a:hover { }
.entry-content a { }

/* Assistive text */
.assistive-text,
.site .screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	overflow: hidden;
	height: 1px;
	width: 1px;
}
.main-navigation .assistive-text:focus,
.site .screen-reader-text:hover,
.site .screen-reader-text:active,
.site .screen-reader-text:focus {
	clip: auto !important;
	display: block;
	font-size: 12px;
	padding: 12px;
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 100000; /* Above WP toolbar */
}

/* Page structure */
.site { padding: 0 20px; position:relative; }
.container { margin: 0 auto; width: 1200px; max-width:90%; }
#main.container { width: 100%; max-width: 100%; position: relative; }
section { padding: 160px 0 0 0;display:block; width:100%; }}
section#home { padding:0; }
a.button {
    padding: 15px 20px;
    font-size: 21px;
    color: #000;
    margin: 30px auto 0 auto;
    display: inline-block;
    text-transform: uppercase;
    background: #fff;
	border:1px solid #fff;
    width: auto;
    text-align: center;
    -webkit-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    transition: background-color 0.5s ease-out;
    font-weight: 900;
}
a:hover.button { background:#000;color:#fff; }

/* ############ 1. Header ############### */
header { position: fixed;background-color:#000; top: 0; left: 0; line-height: 47px; z-index: 1000; white-space: nowrap;height: 85px;width:100%; display:block; -webkit-transition: .5s; transition: .5s;}
hgroup {position: relative;padding: 0px;}
hgroup .container { padding: 0; width: auto; max-width: 100%; }

#logo {z-index: 10;position: absolute;display: block;left: 0;top: 0;}
#logo img {display: block; margin: 15px 30px; width: auto;height: 55px;opacity:0.3}
.themenu {position: absolute;top: 0;left: 50%;transform: translate(-50%, 0%);font-family: "Bebas Neue", sans-serif;}
.themenu a {color: #fff;display: block;float: left;font-size:22px;text-transform: uppercase;text-align: center;padding: 30px;line-height: 22px;letter-spacing:1px}

.sticky #primary { margin-top: 0px; }
.sticky header { position: fixed;height: 85px; background-color:#000; line-height:normal; }
.sticky hgroup { z-index: 100; width: 100%;}
.sticky #logo img {opacity:1}


nav { display:none; }
.hamburger{position: absolute;top: 0;right: 0;z-index: 10;}
.home .hamburger-inner, .home .hamburger-inner::before, .home .hamburger-inner::after {background-color: #fff}
.home .sticky .hamburger-inner,.home .sticky .hamburger-inner::before,.home .sticky .hamburger-inner::after {background-color: #000}
.thenav{transition: all 1.5s ease;position: absolute;top: 0;right:-100%;height:100vh;width:100%;background:#ea6f00;color:#fff}
.innernav{position: absolute;top: 50%;-ms-transform: translateY(-50%);transform: translateY(-50%);width: 100%;}
.thenav a {display:block;width:100%;color:#fff;font-size:30px;text-align: center;padding: 20px 0;}
.thenav a:first-child{padding-top:20px}
.thenav.pullout{right:0%;}
#topnav { padding: 15px 20px 0 0; text-align: right; font-size: 14px; font-weight: 500; }
#topnav a { color: #444; margin: 0 0 0 30px; text-transform: uppercase; -webkit-transition: .7s; transition: .7s; }
#topnav a:first-child { margin: 0px; }
#topnav a:hover, .sticky #topnav a:hover { color:#FC7A03; }
.sticky #topnav { font-size: 12px; padding-top: 10px; }
.sticky #topnav a { color: #000; }


#banner {
    position: relative;
    background-color: #000;
    margin: 0;
    padding: 0;
    width: 100% !important;
    list-style: none;
}
#banner .container {
    height: 700px;
    min-height: 100vh;
    padding: 0;
}
#banner a.panzalogo {
    z-index: 100;
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 500px;
    height: 221px;
    border-radius: 50%;
    margin-left: -250px;
    margin-top: -110px;
}
#banner a.panzalogo img{width:100%;height:auto}

.banner .container { position: absolute; z-index: 100; width: 70%; max-width: 100%; text-align: center; top: 40vh; left: 15%; }
.banner, .banner ul { position: relative; margin: 0; padding: 0; height: 100vh; min-height: 700px; width: 100% !important; list-style: none; }
/*.banner .owl-stage-outer::after { content: "";width: 100%;height: 100%;display: block;background-image: url(images/shade.svg);background-size: cover;position: absolute;top: 0;z-index: 10;}*/
.banner ul li { position: relative; display: block; float: left; margin: 0; padding: 0; width: 100%; height: 100vh; min-height: 700px; background-size: cover; background-position: center center; }
.banner .owl-carousel { z-index:10; }
.banner .owl-dots { position: relative; margin-top: -100px; z-index: 1; }
a.down {
    content: '';
    z-index: 100;
    position: absolute;
    bottom: 60px;
    left: 50%;
    display: block;
    width: 60px;
    height: 60px;
    background-image: url(images/down.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60px;
    margin-left: -30px;
    padding: 0;
    opacity: 1;
}
.about a.down, .services a.down { color: #FFF; background-color: #2d2d2d; bottom: -105px; }

.entry-content .topper h1 { font-size: 40px; text-align: center; padding: 30px 0; text-transform: uppercase; }
.entry-content .topper p { text-align: center; margin-bottom: 25px; }

/* ######## SLIDERS ######### */
.owl-dots { text-align:center; margin-top: 30px; }
.owl-carousel button.owl-dot {width: 17px;height: 17px;background-color: transparent;margin: 4px;border-radius: 10px;border: 2px solid #fff;}
.owl-carousel button.owl-dot.active { background-color: #fff; }
#slider.owl-carousel .owl-nav button.owl-next,
#slider.owl-carousel .owl-nav button.owl-prev,
#owl-one.owl-carousel .owl-nav button.owl-next,
#owl-one.owl-carousel .owl-nav button.owl-prev,
#owl-two.owl-carousel .owl-nav button.owl-next,
#owl-two.owl-carousel .owl-nav button.owl-prev,
#owl-three.owl-carousel .owl-nav button.owl-next,
#owl-three.owl-carousel .owl-nav button.owl-prev,
#owl-four.owl-carousel .owl-nav button.owl-next,
#owl-four.owl-carousel .owl-nav button.owl-prev
	{ font-size:80px; color:#fff; font-weight:100; }
.arrow { width: 20px; height: 30px; display: block; background-image: url(images/next.svg); background-size:cover; margin-left: 8px;opacity:0.5 }
.arrow.prev { background-image: url(images/prev.svg); }
.arrow.next { margin-left: 20px; }
.banner #slider.owl-carousel .owl-nav button.owl-next { position: absolute; top: 47vh; right: 0px; width: 50px; height: 50px; border-radius: 25px 0 0 25px; -webkit-transition: .9s; transition: .9s; }
.banner #slider.owl-carousel .owl-nav button.owl-prev {
    position: absolute;
    top: 47vh;
    left: 0px;
    width: 50px;
    height: 50px;
    -webkit-transition: .9s;
    transition: .9s;
    border-radius: 0 25px 25px 0;
}
.banner:hover #slider.owl-carousel .owl-nav button.owl-next {  }
.banner:hover #slider.owl-carousel .owl-nav button.owl-prev {  }

.about .owl-carousel .owl-nav button.owl-next { position: absolute; top: 0px; right: -10px; opacity:0.6; -webkit-transition: .9s; transition: .9s; }
.about .owl-carousel .owl-nav button.owl-prev { position: absolute; top: 0px; left: -10px; opacity:0.6; -webkit-transition: .9s; transition: .9s; }
.about:hover .owl-carousel .owl-nav button.owl-next { opacity:.7; }
.about:hover .owl-carousel .owl-nav button.owl-prev { opacity:.7; }
.photo p { padding-left:200px; min-height:150px; }
.photo img  { width: 160px !important; height: auto; position: absolute; top: 0; left: 0; }

/* ############# 2. Navigation Menu ############# */
.main-navigation { float: none; margin: 0; }
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul { display: none; }
.main-navigation ul.nav-menu.toggled-on, .menu-toggle { display: block; background: #fff; list-style: none; margin: 0; }
.main-navigation ul.nav-menu.toggled-on a { display: block; font-size: 15px; padding: 20px; color: #333; text-transform:uppercase; border-bottom: none; }
.menu-menu-1-container { position: absolute; width: 100%; top: -10px;; box-shadow: 0px 5px 5px #ccc; }
.sticky .menu-menu-1-container { top: 40px; }
.menu-menu-1-container ul, .menu-menu-1-container li { margin-bottom:0; }
.nav-menu { position: absolute; width: 100%; top: 0; }
.toggled-on .on, .off { display:none;}
.on, .toggled-on .off { display:block; }

.about .owl-dots, .services .owl-dots {position:absolute;top:0px; margin: 0; margin-left: 0px; left: 50%; margin-left: -20px; }
.about .owl-dots { top: -40px; }

/* ##################### SECTIONS ####################### */

/*SERVICES*/
#section_services{}
.section_services h2{text-align:center}
.section_services h2 sup {font-family: "Roboto", sans-serif;font-weight: 900;font-size: 50%;top: -1em;}
.service {clip-path: polygon(80% 0%, 100% 50%, 80% 100%, 0% 97%, 20% 50%, 0% 3%);background-color: #333;padding: 0;height: 160px;background-size:cover;background-position:center}
.service:after{content:'';z-index: 1;background-color:#333;opacity:0.5;position:absolute;width:100%;height:100%;top:0;left:0}
.service-bg-1{background-image:url(https://development.graphixweb.co.uk/panzamode/wp-content/uploads/2025/04/panza-mode-service-1.png)}
.service-bg-2{background-image:url(https://development.graphixweb.co.uk/panzamode/wp-content/uploads/2025/04/panza-mode-service-2.png)}
.service-bg-3{background-image:url(https://development.graphixweb.co.uk/panzamode/wp-content/uploads/2025/04/panza-mode-service-3.png)}
.service-bg-4{background-image:url(https://development.graphixweb.co.uk/panzamode/wp-content/uploads/2025/04/panza-mode-service-4.png)}
.service-bg-5{background-image:url(https://development.graphixweb.co.uk/panzamode/wp-content/uploads/2025/04/panza-mode-service-5.png)}
.service-bg-6{background-image:url(https://development.graphixweb.co.uk/panzamode/wp-content/uploads/2025/04/panza-mode-service-6.png)}
.service h3 {z-index: 10;padding: 0;text-align: right;max-width: 70%;margin: 0;position: absolute;top: 50%;-ms-transform: translateY(-50%);transform: translateY(-50%);right: 10%;line-height:0.9em;}
/*WELCOME*/
#section_welcome{}
.section_welcome p {font-size: 35px;margin: 0;padding: 0 0 0 50px;}
.section_welcome p strong {color:#999}

.section_welcome .container{display: table;}
.half{width:50%;display: inline-block;vertical-align: middle;}
#welcome-slider{display:grid}
#welcome-slider img{aspect-ratio: 1;object-fit: cover}
#welcome-slider .owl-dots {text-align: center;margin-top: -40px;z-index: 100;}
/*CLIENTS*/
#section_clients h2,#section_clients p{text-align:center}
#section_clients p{padding-bottom:50px}
.client {
    clip-path: polygon(80% 0%, 100% 50%, 80% 100%, 0% 97%, 20% 50%, 0% 3%);
    padding: 0;
    height: 160px;
    background-color: #fff;
    background-size: 60% auto;
    background-position: 55% center;
    background-repeat: no-repeat;
}
/*GALLERY*/
.gallery{}
.gallery_pic{position:relative;width: 50%;float: left;border: 35px solid #000;box-sizing: border-box;}
.gallery_pic img {width: 100%;aspect-ratio: 1;object-fit: cover;transition: opacity 1s;}
.gallery_pic .text {position: absolute;top: 50%;left: 0;width: 100%;text-align: center;padding: 40px;box-sizing: border-box;opacity: 0;transition: opacity 1s;margin-top: -25%;}
.gallery_pic:hover img {opacity:0.2}
.gallery_pic:hover .text {opacity:1}
.gallery_pic .text p{margin:0;font-size:25px;}
.gallery_pic .text p strong{display:block;padding-bottom:10px;color: #999;}
/*CONTACT*/
.arrows{position:relative;}
.arrows:before{content:'';position:absolute;top:0;left:0;width:40%;height:180px;background-image:url(images/arrows2.svg);background-size:cover;background-repeat:no-repeat;background-position:center right}
.section_contact .container{display: table;}
.section_contact .container .half{vertical-align: bottom;}
button, input, select, textarea {border: 1px solid #000;border-radius: 0px;font-family: inherit;padding: 10px;color: #000;background: #fff;width: 100%;box-sizing: border-box;margin: 0 0 10px 0;font-size:22px;}
input[type="submit"], input[type="button"], input[type="reset"] {-webkit-appearance: none;-moz-appearance: none;appearance: none;padding: 10px 30px;font-size: 22px;text-transform: uppercase;border: none;width: auto;background-color: #fff;color: #000;}
button, input {line-height: normal;}
textarea {overflow: auto;vertical-align: top;}
.wpcf7 p{padding:0}
.social{margin-bottom:40px}
.social img{width:50px;height:auto;margin:0 10px 0 0}

.privacy { padding: 15px 0 5px 0; margin-top:0px; height: 20px; text-align: center; color: #999; font-size: 13px; }
.privacy a{color:#999;text-decoration:underline}

/* ############# Footer ############ */
footer {color:#fff;font-size:17px }
footer .container{padding:50px 0}
footer .footnav a{color:#ccc;padding:0 10px}
footer .copy{text-align:right;font-size:17px}
footer .copy a{color:#fff;}




.popup {
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  display: none;
  z-index: 5000;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

.popup>div {
  border-radius: 0px;
  position: fixed;
  background: #000000;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
  padding: 30px 15px;
  width: 50%;
  max-width: 600px;
  z-index: 5001;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  text-align: center;
  border: 3px solid #fff;
}

.popup-btn-close {
  position: absolute;
  background-color: #fff;
  color: #000;
  top: 5px;
  right: 5px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 20px;
  cursor: pointer;
}

.popup-btn-close:hover {
  background-color: #666;
  color: #fff;
}
.popup-text {
  background: #000;
  color: #fff;
  font-size: 19px;
  line-height: 30px;
  z-index: 9999;
}





/* =Media queries
-------------------------------------------------------------- */

@-ms-viewport {
	width: device-width;
}
@viewport {
	width: device-width;
}

/* Minimum width of 800 pixels. */
@media screen and (min-width: 800px) {
	.site {
		margin: 0 auto;
		max-width: 940px;
		overflow: hidden;
	}
	.site-content {
	}
	body.template-front-page .site-content,
	body.attachment .site-content,
	body.full-width .site-content {
		width: 100%;
	}
}

@media screen and (max-width: 1000px) {
	section {padding: 120px 0 0 0}
	h2 {font-size: 48px}
	h3 {font-size: 23px}
	p, li, address, .section_welcome p {font-size: 27px}
	#banner a.panzalogo {width: 400px;height: 180px;margin-left: -200px;margin-top: -90px;}
	.service,.client {height: 115px}
	.gallery_pic .text {top: 0;margin-top: 0}
	.arrows:before {height: 120px;background-position: top right;}
}
@media screen and (max-width: 800px) {
	section {padding: 80px 0 0 0}
	.themenu {right: 0;transform: none;left: auto;}
	.themenu a {font-size: 20px;padding: 30px 20px;float: none;display: inline-block;}
	#banner a.panzalogo {width: 300px;height: 134px;margin-left: -150px;margin-top: -75px;}
	.half {width: 100%;padding-bottom: 40px}
	.section_welcome p {padding: 0 20px}
	.gallery_pic {width: 90%;float: none;margin: 0 auto;border: 20px solid #000;}
	.arrows {padding-top: 100px}
	.arrows:before {height: 80px;background-size: cover; }
}
@media screen and (max-width: 600px) {
	.section_welcome .container {display: block;width: 90%;}
	.themenu a {padding:30px 10px}
	a.down {bottom: 90px}
	.gallery_pic .text {padding: 20px;height: 100%}
	.gallery_pic .text p {font-size: 19px}
	.section_contact .container {display: block;}
 .arrows:before {height: 80px;background-size: contain;width: 90%;background-position: top left;}
	footer .copy {text-align: center;}
}
@media screen and (max-width: 500px) {
	#logo img {margin: 15px 20px}
    .themenu a {font-size: 18px;}
}


/* =Print
----------------------------------------------- */

@media print {
	body {
		background: none !important;
		color: #000;
		font-size: 10pt;
	}
}