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


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

	/* Breadcrumbs
    --------------------------------------------*/
        .single #breadcrumbs {
            padding-bottom: 20px;
        }

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

		/* General spacing of content 4/5/6 col grid */
		.content-sp {
			padding: 20px;
		}
		.content-sp.abs-p {
			padding: 26px 20px;
		}
		.content-sp_02 {
			padding: 30px
		}
		.content-sp_03 {
			padding: 40px
		}
	    .content-sp_04 {
	        padding: 20px 60px 38px 24px;
	    }
		/* 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: 27px; /*27*/
	        gap: 15px; /*15*/
	    }
	    .page-numbers {
	        width: 27px; /*27*/
	        height: 27px; /*27*/
	        font-size: 15px; /*15*/
	    }
	    .page-numbers svg {
	        width: 11px; /*11*/
	    }

	/* 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;
			}
		    .five-col-grid .arrow-btn svg {
		        width: 30px;
		        height: 30px;  
		    }

	/* Contacts with icon
	------------------------------------ */
        .contacts-container {
            gap: 10px 50px;
        }
        .contacts-container .icon-container {
            height: 30px;
            width: 30px;
            min-width: 30px;
            border-width: 1px;
            padding: 5px;
            margin-right: 10px;
        }
        .contacts-container a {
            text-underline-offset: 3px;
        }
}


/* 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: 24px 18px;
		}
		.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;
			}
		    .five-col-grid .arrow-btn svg {
		        width: 26px;
		        height: 26px;  
		    }

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

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


	/* Contacts with icon
	------------------------------------ */
        .contacts-container {
            gap: 10px 35px;
        }
        .contacts-container .icon-container {
            height: 25px;
            width: 25px;
            min-width: 25px;
            padding: 4px;
            margin-right: 7px;
        }

}

/* 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: 22px 16px;
			}
			.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;
				}
			    .five-col-grid .arrow-btn svg {
			        width: 24px;
			        height: 24px;  
			    }


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

	    /* Video height classes
	    --------------------------------------------*/
			.video-size_0 {
		        height: 15.625vw;
		        min-height: 140px;
			}
			.video-size_00 {
			    min-height: 280px;
			}
			.video-size_01 {
				min-height: 380px;
			}
			.video-size_02 {
				min-height: 500px;
			}


	    /* 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: 20px 16px;
			}
			.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;
		}
	    .five-col-grid .arrow-btn svg {
	        width: 22px;
	        height: 22px;  
	    }


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

		.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 {
			padding-bottom: 10px;
		}
	    .single #breadcrumbs {
	        padding-bottom: 10px;
	    }
		#breadcrumbs.body-breadcrumbs.xsm-sz,
		#breadcrumbs.body-breadcrumbs.xsm-sz * {
		    font-size: 10px;
		}
		.breadcrumbs .breadcrumbs-divider {
		    margin: 0 7px;
		}
		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;
			}
			.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;
		}


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

	    /* Video height classes
	    --------------------------------------------*/
			.video-size_0 {
			    height: 25.625vw;
			    min-height: 190px;
			}		

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

		.divider {
		    height: 1px;
		}

		/* 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
	    --------------------------------------------*/
		.page-numbers {
		    width: 22px;
		    height: 22px;
		    font-size: 14px;
		    padding-bottom: 2px;
		}

	    /* 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: 230px;
		}
		.img-size_00 img {
		    min-height: 215px;
		}
		.img-size_01 img {
			min-height: 300px;
		}
		.img-size_02 img {
			min-height: 340px;
		}
		.img-size_03 img {
			min-height: 400px;
		}

	    /* Video height classes
	    --------------------------------------------*/
		.video-size_0 {
        	height: 49.333vw;
        	min-height: 190px;
    	}

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

	/* Pagination
	-----------------------------------------*/
		.nav-links {
	        gap: 12px;
	    }

	/* 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: 9px;
        }
        body .swiper-button-next, 
        body .swiper-button-prev {
        	min-width: 30px;
            min-height: 30px;
        }
        /* 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;
		}

	/* Contacts with icon
	------------------------------------ */
	    .contacts-container {
	        display: block;
	    }
	    .single-contact {
	        padding-bottom: 10px;
	    }
	    .contacts-container .icon-container {
	        height: 28px;
	        width: 28px;
	        min-width: 25px;
	        padding: 5px;
	        margin-right: 7px;
	    }

	#map-cookie-overlay {
	    padding: 0 20px;
	}	    
}


/* Mobile Landscape only 
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 767px) and (orientation: landscape) {
	    /* Img height classes
	    --------------------------------------------*/
		.img-size_0 img {
		    min-height: 230px;
		}
		.img-size_00 img {
		    min-height: 190px;
		}
		.img-size_01 img {
			min-height: 300px;
		}
		.img-size_02 img {
			min-height: 270px;
		}
		.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.abs-p {
				padding: 20px;
			}

			/* Custom Grid for two col on portrait -> Ergea Services */
            .services-grid .small-title {
                font-size: 16px;
            }
            .services-grid .content-sp.abs-p {
            	padding: 15px;
            }
            .services-grid .big-title {
                font-size: 18px;
            }
			/* One col grid / Banner */
			.one-col-grid .content-sp.abs-p {
			    padding: 40px;
			}

	    /* Img height classes
	    --------------------------------------------*/
		.img-size_0 img {
		    min-height: 230px;
		}
		.img-size_00 img {
		    min-height: 215px;
		}
		.img-size_01 img {
			min-height: 300px;
		}
		.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;
		}
	    .five-col-grid .arrow-btn svg {
	        width: 18px;
	        height: 18px;  
	    }

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

		/* Hide Arrows on Carousel
	    --------------------------------------------*/
		.stripe-container-full .relative-arrow {
	        display: none;
	    }
}