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

/* 1920x1080
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1920px) {
    .breadcrumbs .breadcrumbs-divider {
        margin: 0 5px;
    }

    /* Grid General Classes
    --------------------------------------------*/
		/* General spacing of content 4/5/6 col grid */
		.content-sp {
			padding: 20px;
		}
		.content-sp.abs-p {
			padding: 30px 100px 30px 30px;
		}
		.content-sp_02 {
			padding: 40px;
		}
		.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: 90px;
		}

		/* 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: 100px;
            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;
        }


    /* Sticky Header 
    --------------------------------------------*/
        header .top-header-wrapper.still-sticky {
            padding: 10px 0;
            box-shadow: 0px 1px 20px rgb(0 0 0 / 25%);
        }
        body header .top-header-wrapper.still-sticky .top-bar {
            top: 15px !important;
        }
        body header .top-header-wrapper.still-sticky .main-menu {
            margin-top: 50px;
        }
        body header .top-header-wrapper.still-sticky .main-logo a {
            width: 141px;
            height: 101px;
        }   

	/* Pagination
	--------------------------------------------------------------------------------------------------------------*/
	    .page-numbers:not(a),
    	.nav-links {
	        gap: 10px;
	    }
	    .pagination-text {
	        margin-top: 2px; /*2*/
	    }

	/* Svg Arrow Inside a Box 
	------------------------------------ */
			.col-container-inner:hover .arrow-btn {
			    right: 16px;
			}

}


/* 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: 22px 60px 22px 22px;
		}
		.content-sp_02 {
			padding: 35px
		}
		.content-sp_03 {
			padding: 30px
		}

		/* 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: 64px;
		}
			/* 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: 22px 40px 22px 22px;
		}
	    .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: 40px 56px 30px 30px;
		}
		.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 {
			    padding: 9px; 
			}
			.arrow-btn.abs-p {
			    right: 25px;
			    bottom: 25px;
			}
			.col-container-inner:hover .arrow-btn {
			    right: 14px;
			}

	/* Sticky Menu
	------------------------------------------------*/
	    body header .top-header-wrapper.still-sticky .main-menu {
	        margin-top: 30px;
	    }
		body header .top-header-wrapper.still-sticky .main-logo a {
		    width: 125px;
		    height: 88px;
		}

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

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


    /* Timing Dots
    --------------------------------------------*/
		.timing-pagination .swiper-pagination-bullet:after,
		.timing-pagination .swiper-pagination-bullet:before {
			height: 2px;
		}
}


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

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

			/* General spacing of content 4/5/6 col grid */
			.content-sp {
				padding: 18px;
			}
			.content-sp.abs-p {
				padding: 20px 40px 20px 20px;
			}
			.content-sp_02 {
				padding: 30px;
			}
			.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: 50px;
			}
				/* 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: 20px 36px 20px 20px;
			}
		    .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: 36px 50px 26px 26px;
			}

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



	    /* Img height classes
	    --------------------------------------------*/
    		.img-size_0 img {
		        min-height: 260px;
		    }
			.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) {

		header .top-header-wrapper.still-sticky {
		    padding: 5px 0;
		}
		.still-sticky .mobile-menu-handle {
		    background-color: transparent;
		}
		.still-sticky .mobile-menu-handle-cont, 
		.still-sticky .mobile-menu-handle-cont:after, 
		.still-sticky .mobile-menu-handle-cont:before {
		    background-color: var(--color-main);
		    height: 2px;
		}
		body header .top-header-wrapper.still-sticky .main-logo a {
		    width: 80px;
		    height: 57px;
		}

		/* Pagination
	    --------------------------------------------*/
			a.page-numbers,
			span.page-numbers {
			    width: 36px;
			    height: 36px;
			    font-size: 16px;
			}

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

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

			/* One col grid / Banner */
			.one-col-grid .content-sp.abs-p {
			    padding: 50px;
			}
				/* 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: 20px 36px 20px 20px;
			}
		    .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: 36px 48px 22px 22px;
			}

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


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

	        /* Hide when inside an img in a carousel */
			.carousel .slider-buttons {
			    display: none;
			}


	    /* Img height classes
	    --------------------------------------------*/
	    .img-size_0 img {
	        min-height: 240px;
	    }
		.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;
        }

	    .menu-main-navigation {
	        height: 46px; /* same of logo height */
	        min-height: unset;
	    }
		header .col-full-menu .main-menu-container.still-sticky .logo-container a {
		    width: 145px;
		}
		header .col-full-menu .main-menu-container.still-sticky .header-contact-container {
		    gap: 20px;
		}
		header .still-sticky .header-contact-container a.menu-contact-icon {
		    height: 23px;
		    width: 23px;
		}
}

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

	/* General
    ----------------------------------------------------------------------*/
		body .wd-50 {
		    width: 100%;
		}

		.swiper-pagination.relative-pagination > .swiper-pagination-bullets .swiper-pagination-bullet,
		.swiper-pagination.relative-pagination .swiper-pagination-bullet {
	        height: 10px;
	        width: 10px;
	        margin: 0 10px !important;
		}
	
	/* 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: 18px 32px 18px 18px;
			}
			.content-sp_02 {
			    padding: 20px;
			}
			.content-sp_03 {
				padding: 20px
			}

			/* One col grid / Banner */
			.one-col-grid .content-sp.abs-p {
			    padding: 36px;
			}
				/* 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: 18px 32px 18px 18px;
			}
		    .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: 32px 40px 22px 22px;
			}

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

	    /* Img height classes
	    --------------------------------------------*/
	    .img-size_0 img {
	        min-height: 260px;
	    }
		.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;
        }

	/* Arrows & Slider Dots General
    ----------------------------------------------------------------------*/
		.timing-pagination .swiper-pagination-bullet,
		.timing-pagination .swiper-pagination-bullet-active {
		    width: 85px;
		    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;
			}

	/* Staff Stripe
    ----------------------------------------------------------------------*/
		.staff-grid.five-col-grid {
		    grid-template-columns: 1fr 1fr 1fr;
		}
}



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

		/* Pagination
	    --------------------------------------------*/
			a.page-numbers,
			span.page-numbers {
			    width: 25px;
			    height: 25px;
			    font-size: 12px;
			}

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

	    /* Img height classes
	    --------------------------------------------*/
	    .img-size_0 img {
	        min-height: 200px;
	    }
		.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;
        }

	    /* Slider Arrow
	    --------------------------------------------*/
		body .swiper-button-next,
		body .swiper-button-prev {
		    width: 35px;
		    height: 35px;
		}
		.slider-buttons svg {
		    padding: 9px;
		}        

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

	/* 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;
		}

	/* Staff Stripe
    ----------------------------------------------------------------------*/
		.staff-grid.five-col-grid {
		    grid-template-columns: 1fr 1fr;
		}		
}


/* Mobile Landscape only 
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 767px) and (orientation: landscape) {
	    /* Img height classes
	    --------------------------------------------*/
		.img-size_0 img {
		    min-height: 130px;
		}
		.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: 1.5em;
			}
			.content-sp_03 {
				padding: 18px
			}

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

	    /* Img height classes
	    --------------------------------------------*/
		.img-size_0 img {
		    min-height: 200px;
		}
		.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: 15px;
	        bottom: 15px;
	    }
		.col-container-inner:hover .arrow-btn {
	        right: 10px;
	    }\

		.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;
		}
}