/* ---------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------
------------------------------------------------- MEDIA QUERY ----------------------------------------------------
------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------*/


/* 1920x1080
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1920px) {

    /* Grid General Classes
    --------------------------------------------*/

		/* General spacing of content 4/5/6 col grid */
		.content-sp {
			padding: 20px;
		}
		.content-sp.abs-p {
			padding: 30px 60px 30px 30px;
		}
		.content-sp_02 {
			padding: 30px
		}
		.content-sp_03 {
			padding: 40px
		}

		/* When content is under img with bk text and same height */
		.content-equal-h {
	    	height: 240px;
	    }
		.content-equal-h .btn {
		    margin-top: 20px;
		}

		/* One col grid / Banner spacing content on absolute */
		.one-col-grid .content-sp.abs-p {
		    padding: 120px;
		}

		/* Two col grid */
		.two-col-grid .content-sp.abs-p {
		    padding: 40px 60px 30px 30px;
		}
	    .two-col-grid .col-content-btn .link-arrow,
	    .two-col-grid .col-content-btn .btn {
	        margin-top: 40px;
	    }
		/* Three col grid */
		.three-col-grid .content-sp.abs-p {
		    padding: 60px 80px 40px 40px;
		}
		.three-col-grid .col-content-btn .btn,
		.four-col-grid .col-content-btn .btn,
		.five-col-grid .col-content-btn .btn,
		.six-col-grid .col-content-btn .btn,
		.carousel .add-to-cart-btn .btn {
		    margin-top: 18px;
		}

    /* Slider Bullets
    --------------------------------------------*/
        .swiper-pagination-bullet {
            height: 12px;
            width: 12px;
            margin: 0px 25px !important;
        }
        .timing-pagination .swiper-pagination-bullet {
            margin: 0 5px !important;
        }
        .timing-pagination .swiper-pagination-bullet,
        .timing-pagination .swiper-pagination-bullet-active {
            width: 70px;
            height: 25px;
        }


    /* Slider Arrows
    --------------------------------------------*/
		.relative-arrow .swiper-button-next {
			margin-left: 10px;
		}    
        /* When Buttons are inside a Carousel/Gallery */
        body .swiper-button-prev {
            left: 20px;
        }
        body .swiper-button-next {
            right: 20px;
        }

	/* Pagination
	--------------------------------------------------------------------------------------------------------------*/
	    .nav-links {
	        height: 40px; /*40*/
	    }
	    .page-numbers {
	        padding: 0 8px; /*0 8*/
	    }
	    .page-numbers.current {
	        font-size: 16px; /*16*/
	    }
	    .pagination-text {
	        margin-top: 2px; /*2*/
	    }    
	    .pagination-btn {
	        height: 40px; /*40*/
	        width: 40px; /*40*/
	    }
	    .next .pagination-btn {
	        margin-left: 10px; /*10*/
	    }
	    .prev .pagination-btn {
	        margin-right: 10px; /*10*/
	    }

	/* Svg Arrow Inside a Box 
	------------------------------------ */
			.arrow-btn svg {
			    width: 40px;
			    height: 40px;
			}
			.arrow-btn.abs-p {
			    right: 20px;
			    bottom: 20px;
			}
			.col-container-inner:hover .arrow-btn {
			    right: 16px;
			}

			
	@-moz-document url-prefix() {
	    .pagination-text {
	      margin-top: -3px; /*3*/
	    }
	}

}


/* Big Laptops - Ok until 1441 px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1690px) {
}


/* Standard Laptops - Ok until 1280px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1440px) {

    /* Grid General Classes
    --------------------------------------------*/

		/* General spacing of content 4/5/6 col grid */
		.content-sp {
			padding: 20px;
		}
		.content-sp.abs-p {
			padding: 26px 50px 26px 26px;
		}
		.content-sp_02 {
			padding: 26px
		}
		.content-sp_03 {
			padding: 34px
		}

		/* When content is under img with bk text and same height */
		.content-equal-h {
	    	height: 220px;
	    }
		.content-equal-h .btn {
		    margin-top: 18px;
		}

		/* One col grid / Banner */
		.one-col-grid .content-sp.abs-p {
		    padding: 100px;
		}
			/* Banner with centered content */
			.banner-c .col-content-inner {
			    max-width: 55%;
			    margin: auto;
			}
			/* Banner with content on top left */
			.banner-tl .col-content-inner {
			    max-width: 70%;
			}
			/* Banner with content on bottom left */
			.banner-bl .col-content-inner {
			    max-width: 60%;
			}

		/* Two col grid */
		.two-col-grid .content-sp.abs-p {
		    padding: 26px 50px 26px 26px;
		}
	    .two-col-grid .col-content-btn .link-arrow,
	    .two-col-grid .col-content-btn .btn {
	        margin-top: 34px;
	    }
		/* Three col grid */
		.three-col-grid .content-sp.abs-p {
		    padding: 50px 68px 34px 34px;
		}
		.three-col-grid .col-content-btn .btn,
		.four-col-grid .col-content-btn .btn,
		.five-col-grid .col-content-btn .btn,
		.six-col-grid .col-content-btn .btn,
		.carousel .add-to-cart-btn .btn {
		    margin-top: 14px;
		}

	/* Svg Arrow Inside a Box 
	------------------------------------ */
			.arrow-btn svg {
			    width: 34px;
			    height: 34px;
			}
			.arrow-btn.abs-p {
			    right: 16px;
			    bottom: 16px;
			}
			.col-container-inner:hover .arrow-btn {
			    right: 14px;
			}

    /* Slider Arrows
    --------------------------------------------*/

        /* When Buttons are inside a Carousel/Gallery */
        body .swiper-button-prev {
            left: 15px;
        }
        body .swiper-button-next {
            right: 15px;
        }

}


/* Small Laptops - Ok until 1150px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1279px) {

	    /* Grid General Classes
	    --------------------------------------------*/

			/* General spacing of content 4/5/6 col grid */
			.content-sp {
				padding: 18px;
			}
			.content-sp.abs-p {
				padding: 24px 46px 24px 24px;
			}
			.content-sp_02 {
				padding: 24px;
			}
			.content-sp_03 {
				padding: 30px
			}

			/* When content is under img with bk text and same height */
			.content-equal-h {
		    	height: 200px;
		    }
			.content-equal-h .btn {
			    margin-top: 18px;
			}

			/* One col grid / Banner */
			.one-col-grid .content-sp.abs-p {
			    padding: 80px;
			}
				/* Banner with centered content */
				.banner-c .col-content-inner {
				    max-width: 60%;
				}
				/* Banner with content on top left */
				.banner-tl .col-content-inner {
				    max-width: 75%;
				}
				/* Banner with content on bottom left */
				.banner-bl .col-content-inner {
				    max-width: 65%;
				}

			/* Two col grid */
			.two-col-grid .content-sp.abs-p {
			    padding: 24px 46px 24px 24px;
			}
		    .two-col-grid .col-content-btn .link-arrow,
		    .two-col-grid .col-content-btn .btn {
		        margin-top: 30px;
		    }
			/* Three col grid */
			.three-col-grid .content-sp.abs-p {
			    padding: 46px 62px 30px 30px;
			}

		/* Svg Arrow Inside a Box 
		------------------------------------ */
				.arrow-btn svg {
				    width: 30px;
				    height: 30px;
				}
				.arrow-btn.abs-p {
				    right: 14px;
				    bottom: 14px;
				}
				.col-container-inner:hover .arrow-btn {
				    right: 12px;
				}



	    /* Img height classes
	    --------------------------------------------*/
			.img-size_00 img {
			    min-height: 280px;
			}
			.img-size_01 img {
				min-height: 380px;
			}
			.img-size_02 img {
				min-height: 500px;
			}
			.img-size_03 img {
				min-height: 600px;
			}

	    /* Box height classes
	    --------------------------------------------*/
	        .box-size_01 .col-content {
	            min-height: 240px;
	        }


	    /* Slider Arrows
	    --------------------------------------------*/
			.slider-buttons svg {
	            padding: 12px;
	        }
}


/* Small Laptops - Ok until 993px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1150px) {

		/* Grid General Classes
	    --------------------------------------------*/

			/* General spacing of content 4/5/6 col grid */
			.content-sp {
				padding: 18px;
			}
			.content-sp.abs-p {
				padding: 22px 40px 22px 22px;
			}
			.content-sp_02 {
			    padding: 22px;
			}
			.content-sp_03 {
				padding: 26px
			}

			/* One col grid / Banner */
			.one-col-grid .content-sp.abs-p {
			    padding: 70px;
			}
				/* Banner with centered content */
				.banner-c .col-content-inner {
				    max-width: 65%;
				}
				/* Banner with content on top left */
				.banner-tl .col-content-inner {
				    max-width: 80%;
				}
				/* Banner with content on bottom left */
				.banner-bl .col-content-inner {
				    max-width: 70%;
				}

			/* Two col grid */
			.two-col-grid .content-sp.abs-p {
			    padding: 22px 40px 22px 22px;
			}
		    .two-col-grid .col-content-btn .link-arrow,
		    .two-col-grid .col-content-btn .btn {
		        margin-top: 26px;
		    }
			/* Three col grid */
			.three-col-grid .content-sp.abs-p {
			    padding: 40px 54px 26px 26px;
			}

		/* Svg Arrow Inside a Box 
		------------------------------------ */
		.arrow-btn svg {
		    width: 26px;
		    height: 26px;
		}


	    /* Slider Arrows
	    --------------------------------------------*/
			.slider-buttons svg {
	            padding: 10px;
	        }

	        /* Hide when inside an img in a carousel */
			.carousel .slider-buttons {
			    display: none;
			}
		/* Arrow Link
		------------------------------------ */
		.link-arrow .arrow-btn svg {
		    width: 18px;
		    height: 18px;
		}

	    /* Img height classes
	    --------------------------------------------*/
		.img-size_00 img {
		    min-height: 260px;
		}
		.img-size_01 img {
			min-height: 360px;
		}
		.img-size_02 img {
			min-height: 480px;
		}
		.img-size_03 img {
			min-height: 560px;
		}

	    /* Box height classes
	    --------------------------------------------*/
        .box-size_01 .col-content {
            min-height: 220px;
        }

		.logo-container a {
		    width: 187px;
		    height: 46px;
		    min-width: unset;
		    min-height: unset;
		}
	    .menu-main-navigation {
	        height: 46px; /* same of logo height */
	        min-height: unset;
	    }
}

/* Mobile Start ok until 768px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 992px) {

	/* General
    ----------------------------------------------------------------------*/
		#breadcrumbs {
		    display: none;
		}
		body .wd-50 {
		    width: 100%;
		}
	
	/* Containers
    ----------------------------------------------------------------------*/
		.main-menu-container .stripe-container-full {
		    padding: 1em 1.5em;
		}

	/* Horizontal Scrollbar
    ----------------------------------------------------------------------*/
    	::-webkit-scrollbar{
	        height: 4px;
	        width: 4px;
	        background: var(--color-pure-white);
			border-radius: 10px;
	    }
	    ::-webkit-scrollbar-thumb:horizontal{
	        background: rgb(47 57 64); 
	        border-radius: 10px;
	    }
		::-webkit-scrollbar-thumb:window-inactive {
		    background: rgb(47 57 64); 
		}


		/* Grid General Classes
	    --------------------------------------------*/

			/* General spacing of content 4/5/6 col grid */
			.content-sp {
				padding: 17px;
			}
			.content-sp.abs-p {
				padding: 20px 36px 20px 20px;
			}
			.content-sp_02 {
			    padding: 20px;
			}
			.content-sp_03 {
				padding: 24px
			}

			/* One col grid / Banner */
			.one-col-grid .content-sp.abs-p {
			    padding: 60px;
			}
				/* Banner with centered content */
				.banner-c .col-content-inner {
				    max-width: 68%;
				}
				/* Banner with content on top left */
				.banner-tl .col-content-inner {
				    max-width: 83%;
				}
				/* Banner with content on bottom left */
				.banner-bl .col-content-inner {
				    max-width: 73%;
				}

			/* Two col grid */
			.two-col-grid .content-sp.abs-p {
			    padding: 20px 36px 20px 20px;
			}
		    .two-col-grid .col-content-btn .link-arrow,
		    .two-col-grid .col-content-btn .btn {
		        margin-top: 24px;
		    }
			/* Three col grid */
			.three-col-grid .content-sp.abs-p {
			    padding: 36px 46px 24px 24px;
			}

		/* Svg Arrow Inside a Box 
		------------------------------------ */
		.arrow-btn svg {
		    width: 24px;
		    height: 24px;
		}


		/* Arrow Link
		------------------------------------ */
		.link-arrow .arrow-btn svg {
		    width: 17px;
		    height: 17px;
		}

	    /* Img height classes
	    --------------------------------------------*/
		.img-size_00 img {
		    min-height: 280px;
		}
		.img-size_01 img {
			min-height: 340px;
		}
		.img-size_02 img {
			min-height: 420px;
		}
		.img-size_03 img {
			min-height: 500px;
		}

	    /* Box height classes
	    --------------------------------------------*/
        .box-size_01 .col-content {
            min-height: 210px;
        }

	/* Header
    ----------------------------------------------------------------------*/
	    .logo-container a {
		        width: 220px;
		        height: 57px;
		    }

	/* Arrows & Slider Dots General
    ----------------------------------------------------------------------*/
		.timing-pagination .swiper-pagination-bullet,
		.timing-pagination .swiper-pagination-bullet-active {
		    width: 65px;
		    height: 20px;
		}
		.relative-arrow .swiper-button-next {
		    margin-left: 6px;
		}
        /* When Buttons are inside a Carousel/Gallery */
        body .swiper-button-prev {
            left: 2em;
        }
        body .swiper-button-next {
            right: 2em;
        }

		/* Cell block with bottom text 
		-------------------------------*/
			.box-img-title {
			    padding: 1em;
			}
}



/* Mobile Landscape
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 767px) {
	/* Horizontal Scrollbar
	-----------------------------------------*/
    	::-webkit-scrollbar{
	        height: 0px;
	    }

	/* To do */
		.two-col-grid .col-content.apply-pad-l {
		    padding-left: 0;
		}
		.two-col-grid .col-content.apply-pad-r {
		    padding-right: 0;
		}

	    /* Checkered Grid
	    --------------------------------------------*/
		.checkered-grid .reverso {
		    margin: 2em 0;
		}
		.checkered-grid .reverso:last-child {
		    margin-bottom: 0;
		}

	    /* Img height classes
	    --------------------------------------------*/
		.img-size_00 img {
		    min-height: 220px;
		}
		.img-size_01 img {
			min-height: 280px;
		}
		.img-size_02 img {
			min-height: 340px;
		}
		.img-size_03 img {
			min-height: 400px;
		}

	    /* Box height classes
	    --------------------------------------------*/
        .box-size_01 .col-content {
            min-height: 200px;
        }


	/* Title + Button / Link 
	-----------------------------------------*/
		.stripe-title.flex-grow {
		    margin-right: 1em;
		}

	/* Header
	-----------------------------------------*/
		.logo-container a {
		    width: 200px;
		    height: 52px;
		}
        /* Breadcrumbs */
            #breadcrumbs {
                display: none;
            }

	/* General
	-----------------------------------------*/
		.relative-arrow .swiper-button-next, 
		.relative-arrow .swiper-button-prev {
		    display: none;
		}

		.swiper-button-next,
		.swiper-button-prev {
		    width: 38px;
		    height: 38px;
		}

		.swiper-button-next:after,
		.swiper-rtl .swiper-button-prev:after,
		.swiper-button-prev:after,
		.swiper-rtl .swiper-button-next:after {
		    min-width: 12px;
		    min-height: 7px;
		}

		.timing-pagination .swiper-pagination-bullet,
		.timing-pagination .swiper-pagination-bullet-active {
		    width: 40px;
		    height: 15px;
		}

    /* Slider Arrows
    --------------------------------------------*/
		.slider-buttons svg {
            padding: 12px;
            width: 38px;
            height: 38px;
        }
        body .swiper-button-next, 
        body .swiper-button-prev {
        	width: 38px;
            height: 38px;
        }
        /* When Buttons are inside a Carousel/Gallery */
        body .swiper-button-prev {
            left: 1em;
        }
        body .swiper-button-next {
            right: 1em;
        }

	/* Custom Scroll
	----------------------------------------------------------------------*/
		.scroll-from-mobile {
		    overflow-x: auto;
		    overflow-y: hidden;
		    flex-flow: nowrap!important;
		    max-width: 100vw;
		    display: flex !important;
		    gap: 10px 15px !important;
		    justify-content: flex-start !important;
		}
		.scroll-from-mobile > * {
		    margin-bottom: 20px;
		}
}


/* Mobile Landscape only 
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 767px) and (orientation: landscape) {
	    /* Img height classes
	    --------------------------------------------*/
		.img-size_00 img {
		    min-height: 140px;
		}
		.img-size_01 img {
			min-height: 220px;
		}
		.img-size_02 img {
			min-height: 280px;
		}
		.img-size_03 img {
			min-height: 360px;
		}
	    /* Box height classes
	    --------------------------------------------*/
        .box-size_01 .col-content {
            min-height: 190px;
        }
}


/* Mobile Portrait
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 600px) {

		/* Grid General Classes
	    --------------------------------------------*/

			/* General spacing of content 4/5/6 col grid */
			.content-sp {
				padding: 10px;
			}
			.content-sp.abs-p {
				padding: 14px 28px 14px 14px;
			}
			.content-sp_02 {
			    padding: 14px;
			}
			.content-sp_03 {
				padding: 18px
			}

			/* One col grid / Banner */
			.one-col-grid .content-sp.abs-p {
			    padding: 40px;
			}

	    /* Img height classes
	    --------------------------------------------*/
		.img-size_00 img {
		    min-height: 220px;
		}
		.img-size_01 img {
			min-height: 250px;
		}
		.img-size_02 img {
			min-height: 300px;
		}
		.img-size_03 img {
			min-height: 380px;
		}
	    /* Box height classes
	    --------------------------------------------*/
        .box-size_01 .col-content {
            min-height: 220px;
        }

		/* Svg Arrow Inside a Box 
		------------------------------------ */
		.arrow-btn.abs-p {
	        right: 12px;
	        bottom: 12px;
	    }
		.col-container-inner:hover .arrow-btn {
	        right: 10px;
	    }
		.arrow-btn svg {
		    width: 20px;
		    height: 20px;
		}

		.three-col-grid .col-content-btn .btn, 
		.four-col-grid .col-content-btn .btn, 
		.five-col-grid .col-content-btn .btn, 
		.six-col-grid .col-content-btn .btn,
		.carousel .add-to-cart-btn .btn {
			padding: 15px 10px 13px;
		}
}