/*
Theme Name: Wasp Custom
Theme URI: http://www.waspstudio.it/
Author: Wasp Studio
Author URI: http://www.waspstudio.it/
Description: Our simple theme, from here we develop all custom solutions for our customers
Version: 0.1
Text Domain: Wasp Custom

*/

 /*--------FONTS------*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
 @font-face {
    font-family: 'Nighty';
    src: url('https://www.aferwashdog.it/wp-content/themes/wasp_custom/font/nighty.woff') format('woff');
	src: url('https://www.aferwashdog.it/wp-content/themes/wasp_custom/font/nighty.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

 /*--------CSS RESET------*/

 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%;
 	font: inherit;
 	vertical-align: baseline;
 	box-sizing: border-box;
 }

 /* HTML5 display-role reset for older browsers */
 article,
 aside,
 details,
 figcaption,
 figure,
 footer,
 header,
 hgroup,
 menu,
 nav,
 section {
 	display: block;
 }

 ol,
 ul {
 	list-style: none;
 }

 blockquote,
 q {
 	quotes: none;
 }

 html {
	scroll-behavior: smooth;
}

 blockquote:before,
 blockquote:after,
 q:before,
 q:after {
 	content: '';
 	content: none;
 }

 table {
 	border-collapse: collapse;
 	border-spacing: 0;
 }

 b {
 	font-weight: 800 !important;
 }

 a {
 	text-decoration: none !important;
	 transition: 0.2s;
 }

 a:hover {
	transition: 0.2s;
 }

 strong {
	font-weight: 800 !important;
 }


 body {
 	font-style: var(--ff);
 }

 .body-overflow {
 	overflow: hidden;
 }



 /*--------VARS------*/

 :root {
 	--main-color: #425B69;
 	--accent-color: #fbc502;
 	--ff: "Poppins", sans-serif;
 }

 /*--------WP-SETTINGS------*/

 .wp-block-group {
 	opacity: 1;
 }

 .wp-block-button-custom {
	position: relative;
 }

 .wp-block-button-custom:hover::after{
	height: 0;
	transform-origin: top;
 }

 .wp-block-button-custom:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background-color: #D30A4D;
	transition: all 400ms cubic-bezier(.47,1.64,.41,.8);
	transform-origin: top;
 }

 .wp-block-button-custom::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
	background-color: var(--accent-color);
	transition: all 400ms cubic-bezier(.47,1.64,.41,.8);
	transform-origin: bottom;
 }


 .unclickable {
	cursor: pointer;
 }
 .unclickable>a {
 	pointer-events: none;
 }

 .no-pointer a {
	cursor: default !important;
 }




 /*--------PRELOADER------*/

 #preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #4278BC;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
  }
  
  .preloader-content {
	text-align: center;
	width: 80%;
	max-width: 400px;
  }
  
  .preloader-text {
	color: white;
	font-family: 'Nighty';
	font-size: 3rem;
	margin-bottom: 20px;
  }
  
  .progress-bar {
	width: 100%;
	height: 8px;
	background: white;
	border-radius: 4px;
	overflow: hidden;
  }
  
  .progress-fill {
	height: 100%;
	width: 0%;
	background: #fbc502;
	border-radius: 4px;
  }
  


 /*--------HEADER------*/
 .navbar-container,
 .sub-navbar-container {
 	width: 100%;
 	z-index: 1000;
	background: linear-gradient(180deg,rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);

 }

 .navbar-container {
 	background-color: transparent;
	position: fixed;
 }


 .navbar{
 	width: 100%;
 	max-width: 1600px;
 	min-height: 70px;
 	margin: 0 auto;
 	display: flex;
 	align-items: center;
 }

 .mleft,
.mright{
    flex:1;
    display:flex;
}

.mleft{
    justify-content:flex-end;
}

.mright{
    justify-content:flex-start;
}

.logo{
	width: 100px;
    margin:0 70px;
	transition: 0.5s;
}

 .navbar {
 	padding: 50px 15px 50px 15px;
	transition: 0.2s ease;
 }

 .logo {
 	order: 2;
 	height: auto;
 }


 .burger-menu {
 	order: 1;
 }


 /*MAIN MENU------*/
 .main-menu {
 	display: none;
 }


 .main-menu>.menu-afer_menu_left-container>ul,
  .main-menu>.menu-afer_menu_right-container>ul {
 	display: flex;
 	width: 100%;
 	justify-content: space-between;
 	align-items: center;
 }

 .main-menu>.menu-afer_menu_left-container>ul,
 .main-menu>.menu-afer_menu_right-container>ul {
 	justify-content: space-between;
 }

 .main-menu>.menu-afer_menu_left-container>ul>li:not(:first-child),
  .main-menu>.menu-afer_menu_right-container>ul>li:not(:first-child) {
 	margin-left: 7rem;
 }

 .main-menu>.menu-afer_menu_left-container>ul>li>a,
  .main-menu>.menu-afer_menu_right-container>ul>li>a {
 	text-decoration: none;
 	font-weight: 700;
 	color: white;
 	font-size: 1.4rem;
 	text-transform: uppercase;
	font-family: 'Nighty';
	letter-spacing: 0.05em;
 }


 .main-menu>.menu-afer_menu_left-container>ul>li>a:hover,
  .main-menu>.menu-afer_menu_right-container>ul>li>a:hover {
 	color: var(--accent-color);
	position: relative;
    display: inline-block; /* importante per centrare bene il punto */
 }





 /*BURGER MENU------*/


 .burger1,
 .burger2,
 .burger3 {
 	height: 4px;
 	border-radius: 10px;
 	background-color: white;
 	margin-bottom: 4px;
 	transform-origin: 0 0;
 	width: 30px;
 	transition: transform 0.3s;
 }

 .burger-menu.open .burger1 {
 	transform: rotate(45deg);
 }

 .burger-menu.open .burger2 {
 	opacity: 0;
 }

 .burger-menu.open .burger3 {
 	transform: rotate(-45deg) translateX(-6px) translateY(1px);
 }


 .open-menu-container {
 	position: fixed;
 	top: 0;
 	left: 0;
 	height: 100vh;
 	width: 0;
 	overflow: hidden;
 	background-color: #4278BC;
 	z-index: 90;
 	box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.2);
 }

 .open-menu {
 	height: 100vh;
 	display: flex;
 	color: var(--main-color);
	background-color: #4278BC;
 	padding: 0 15px 0 15px;
 	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
 	text-align: left;
 	line-height: 1;
	padding-top: 3rem;
 }

 .menu-mobile_menu-container {
	width: 100vw;
 }

 .open-menu>.menu-mobile_menu-container>ul {
	width: 100%;
 	display: flex;
 	justify-content: center;
 	flex-direction: column;
 	align-items: center;
 }

 .open-menu>.menu-mobile_menu-container>ul>li {
 	margin-bottom: 2rem;
 	text-align: center;
 	position: relative;
 }

 .open-menu>.menu-mobile_menu-container>ul>li>a,
 .menu-item-has-children>ul>li>a {
 	text-decoration: none;
 	font-weight: 700;
	font-family: 'Nighty';
 	color: white;
 	font-size: 1.5rem;
 	text-transform: uppercase;
 }


 a {
 	transition: 0.5s;
 }



 /*BURGER END------*/



 @media (min-width: 1280px) {
 	.logo {
 		order: 0;
 	}

 	.burger-menu {
 		order: 1;
 	}


 	.shop-icon-container {
 		order: 2;
 	}

 	.burger-menu {
 		display: none;
 	}

 	.main-menu {
 		display: block;
 	}



 }

 @media (max-width: 1280px) {
	.text-align-center {
		text-align: center;
	}
	.navbar {
		justify-content: space-between;
		flex-direction: row-reverse;
		padding: 10px 15px;
	}
	.logo {
		margin: 0;
	}
 }

  
	.logo.shrink {
	  width: 70px;
	  transition: 0.5s;
	}
  

 /*--------HERO------*/

 .hero-container {
 	width: 100%;
 	margin: 0 auto;
 }





 /*-------------------------------------- FOOTER ----------------------------*/

 .footer-container {
 	width: 100%;
 	padding: 6rem 2rem 0 2rem;
 	background-color: #1e1e1e;
 }
 
 .footer-container a {
	color: white;
 }


 .footer-container>.container {
 	max-width: 1600px;
 	margin: 0 auto;
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
 	justify-content: flex-start;
 	padding-top: 2rem;
 	padding-bottom: 2rem;
 	font-weight: 600;
 	color: White;
 	font-size: 2rem;
 }

 .footer-title {
 	padding-bottom: 1rem;
 	margin-bottom: 1rem;
 	border-bottom: 1px solid #ffffff;
 }

 .social-icons {
	display: flex;
	gap: 1rem;
 }
 .ig-icon, .fb-icon {
	height: 50px;
	width: 50px;
 }

 .footer-address {
 	width: 100%;
 	padding-bottom: 1rem;
 	margin-bottom: 1rem;
 	border-bottom: 1px solid #ffffff;
 }

 .footer-address p {
 	color: White;
 }

 .footer-map {
 	width: 100%;
 }

 .footer-end {
 	text-align: center;
 	color: white;
 	padding: 3rem 1rem;
	background-color: #1e1e1e;
	font-family: 'Nighty';
 }

 .footer-end a {
 	color: white;
 }

 @media screen and (min-width: 1200px) {
 	.footer-container>.container {
 		flex-direction: row;
 		justify-content: space-between;
 		align-items: center;
 	}

 	.footer-title,
 	.footer-address,
 	.footer-map {
 		width: 33.3%;
 		border-bottom: 0;
 		height: 100%;
 	}

 	.footer-title,
 	.footer-address {
 		margin-right: 2rem;
 		border-right: 1px solid #ffffff;
 		padding-right: 2rem;
		min-height: 10rem;
 	}
 }



/* CLASSI WP CUSTOM ----------------------------*/

.wp-block-separator {
    border: none;
    height: 7px;
	border-radius: 5px;
}

.video-class > video {
	border-radius: 30px;
}

 @media (max-width: 720px) {
	.div-100 {
		max-width: 100% !important;
		width: 100% !important;
	}
 }

 .map-div > iframe {
	border-radius: 20px;
 }



html, body {
    scroll-behavior: auto !important;
}

@media (max-width: 720px) {
  .gruppo-responsive > * {
    max-width: 100% !important;
    width: 100% !important;
  }
    .riga-responsive {
    flex-wrap: wrap !important;
  }

  .riga-responsive > * {
    width: 46% !important;
  }
  .riga-responsive-prof {
	flex-wrap: wrap !important;
  }
  .flex-column {
	flex-direction: column;
  }
	.reverse-mobile {
    flex-direction: column-reverse;
  }
    .griglia-mobile-2 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px;
    }
	.griglia-mobile-1 {
        grid-template-columns: repeat(1, 1fr) !important;
    }
	.img-contain > img {
		object-fit: cover !important;
	}
	.mobile-height {
		min-height: 250px !important;
	}
	.h1-mobile {
		font-size: 4rem !important;
	}
}