@import "../components/Headers/defaultHeader.css";
@import "../components/Headers/mobile-menu/mob-menu_handle.css";
@import "../components/Filtri/custom-select.css";

@import "../Moduli/Griglie/detail-intro.css";
@import "../Moduli/ModuliInterattivi/info-mini-map.css";


/* Intro Stripe
---------------------------------------------------------------*/
	#detail-intro .intro-image img {
	    height: 32.292vw; /*620*/
	}

	.detail-intro .locations a,
	.detail-intro .locations p {
	    margin-bottom: 0;
	}
	.detail-intro .icon-container {
	    margin-right: 9px;
	    align-items: center;
	}

	.vertical-divider {
	    margin: 0 0.521vw; /*10*/
	}
	.detail-intro .locations {
	    padding-top: 0.781vw; /*15*/
	}
	.detail-intro .locations .icon-container-inner {
		display: inline-flex;
	    width: 1.563vw; /*30*/
	    height: 1.563vw; /*30*/
	    min-width: 1.563vw; /*30*/
	    border: 1px solid var(--color_1);
	    border-radius: 100%;
	    margin-right: 0.365vw; /*7*/
	}
	.detail-intro .locations .icon-container img {
	    width: 0.729vw; /*14*/
	    height: 0.885vw; /*17*/
	}
	.detail-intro .intro-description p {
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: 3;
	    overflow: hidden;
	    display: -webkit-box;
	}
	.detail-intro .intro-description p {
	    margin-bottom: 0.781vw; /*15*/
	}

	#detail-intro .fake-anchor {
	    margin-bottom: 0 !important;
	}

/* Info Stripe
---------------------------------------------------------------*/
	#medic-info .col-icon-container {
	    width: 3.125vw; /*60*/
	    height: 3.125vw; /*60*/
	    min-width: 3.125vw; /*60*/
	    margin-right: 1.563vw; /*30*/
	    background-color: var(--color_1);
	    border-radius: 100%;
        min-width: 45px;
        min-height: 45px;
    	padding: 0.63vw; /*12*/
	}

/* Video Stripe
---------------------------------------------------------------*/
	#medic-videos .col-video-container {
		overflow: hidden;
	}

/* Pubblication Stripe
---------------------------------------------------------------*/
	#medic-pubblications .three-col-grid {
	    grid-gap: 3.125vw 2.604vw;
	}
	#medic-pubblications .pubblication-image img {
	    width: 6.25vw; /*120*/
	    height: 8.802vw; /*169*/
	    min-width: 6.25vw; /*120*/
	}
	#medic-pubblications .col-content {
	    padding-left: 1.042vw; /*20*/
	}
	#medic-pubblications h3 {
	    margin-bottom: 0.625vw; /*12*/
	    line-height: 1.1;
	}
	#medic-pubblications p {
	    line-height: 1.3;
	}

/* Popup
---------------------------------------------------------------*/
	#staff-medico-popup .popup-container-inner,
	#staff-medico-popup .col-container,
	#staff-medico-popup .col-left img {
	    height: 38.542vw; /*740*/
	    min-height: 600px;
	}
	#staff-medico-popup .col-2 .col-container {
		position: relative;
	    flex-flow: column;
	    padding-right: 0.521vw; /*10*/
	}
	#staff-medico-popup .col-right .col-container:before {
	    content: '';
	    display: block;
	    height: 4.896vw; /*94*/
	    width: calc(100% - 1.563vw); /*30*/
	    position: absolute;
	    bottom: 0;
	    left: 0;
	    z-index: 2;
	    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 1));
	}
	#staff-medico-popup .popup-container-inner {
	    width: 100%;
	   	max-width: 81.25vw; /*1560*/
	    min-width: 1170px;
		overflow: hidden;
		height: 100%;
		max-height: 38.542vw; /*740*/
	}
	#staff-medico-popup .popup-content {
	    padding: 0;
	}
	#staff-medico-popup .col-left img {
	    width: 25vw; /*480*/
	    min-width: 380px;
	}
	#staff-medico-popup .description {
	    flex-grow: 1;
	    overflow: auto;
	    padding-bottom: 1.823vw; /*35*/
	}


@media screen and (max-width: 1920px) {
	/* Intro Stripe
	---------------------------------------------------------------*/
		.vertical-divider {
		    margin: 0 10px; /*10*/
		}
		.detail-intro .locations {
		    padding-top: 15px; /*15*/
		}
		.detail-intro .locations .icon-container-inner {
		    width: 30px; /*30*/
		    height: 30px; /*30*/
		    min-width: 30px; /*30*/
		    margin-right: 7px; /*7*/
		}
		.detail-intro .locations .icon-container img {
		    width: 14px; /*14*/
		    height: 17px; /*17*/
		}
		.detail-intro .intro-description p {
		    margin-bottom: 15px; /*15*/
		}

	/* Pubblication Stripe
	---------------------------------------------------------------*/
		#medic-pubblications .three-col-grid {
		    grid-gap: 3.125vw 2.604vw;
		}
		#medic-pubblications .pubblication-image img {
		    width: 120px; /*120*/
		    height: 169px; /*169*/
		    min-width: 120px; /*120*/
		}
		#medic-pubblications .col-content {
		    padding-left: 20px; /*20*/
		}
		#medic-pubblications h3 {
		    margin-bottom: 12px; /*12*/
		}

}

@media screen and (max-width: 1440px) {
	/* Intro Stripe
	---------------------------------------------------------------*/
	    .detail-intro .locations {
	        padding-top: 10px;
	    }
		.detail-intro .locations .icon-container-inner {
		    width: 28px;
		    height: 28px;
		    min-width: 27px;
		}
		.detail-intro .locations .icon-container img {
		    width: 12px;
		    height: 16px;
		}

		#medic-info .col-icon-container {
		    padding: 9px;
		}
}

@media screen and (max-width: 1280px) {
	/* Pubblication Stripe
	---------------------------------------------------------------*/	
		#medic-pubblications .three-col-grid {
		    grid-template-columns: 1fr 1fr;
		}
}


@media screen and (max-width: 1280px) {
	/* Video Stripe
	---------------------------------------------------------------*/
		#medic-videos .four-col-grid {
		    grid-template-columns: 1fr 1fr 1fr;
		}
		.video-size_0 {
		    min-height: 200px;
		}

	/* Pubblication Stripe
	---------------------------------------------------------------*/
	    #medic-pubblications .pubblication-image img {
	        width: 110px;
	        height: 155px;
	        min-width: 110px;
	    }

	/* Popup
	---------------------------------------------------------------*/
		#staff-medico-popup .popup-container-inner {
		    min-width: 963px;
		}
}


@media screen and (max-width: 992px) {
	/* Intro Stripe
	---------------------------------------------------------------*/
		#medic-info .stripe-container-inner,
		#medic-videos .stripe-container-inner,
		#medic-pubblications .stripe-container-inner {
		    padding-left: 0;
		    padding-right: 0;
		}
		#detail-intro .stripe-container {
		    padding-top: 0;
		    padding-left: 0;
		    padding-right: 0;
		}
		.social-share-box {
		    right: 2em;
		}
		#detail-intro .col-1 {
		    margin-bottom: 15px;
		}
		#detail-intro .intro-image img {
		    height: 70.292vw;
		    max-height: 525px;
		}
		#detail-intro .stripe-container .col-2.intro-content {
		    padding-left: 2em;
		    padding-right: 2em;
		    padding-top: 0;
		}
		#detail-intro .intro-image {
		    order: 1;
		    padding-top: 0;
		}
		#detail-intro .intro-content {
		    order: 2;
		    padding-top: 30px;
		}

	/* Info Stripe
	---------------------------------------------------------------*/
		#medic-info .three-col-grid {
		    grid-template-columns: 1fr;
		    gap: 30px;
		}
		#medic-info .col-icon-container {
		    margin-right: 10px;
		}

	/* Video Stripe
	---------------------------------------------------------------*/
	    #medic-videos .four-col-grid {
	        grid-template-columns: 1fr 1fr;
	        grid-gap: 1em;
	    }

	/* Popup
	---------------------------------------------------------------*/
		#staff-medico-popup .col-left img {
		    min-width: 320px;
		}
		#staff-medico-popup .popup-container-inner {
		    min-width: unset;
		    max-width: unset;
		    width: 95%;
		}
}



@media screen and (max-width: 767px) {
	/* Intro Stripe
	---------------------------------------------------------------*/
		.social-share-box {
		    right: 1em;
		}
		#detail-intro .col-1 {
		    margin-bottom: 10px;
		}
		#detail-intro .intro-image img {
			height: 56vw;
			max-height: 385px;
		    min-height: 210px;
		    border-radius: unset;
		}
		#detail-intro .stripe-container .col-2.intro-content {
		    padding-left: 1em;
		    padding-right: 1em;
		}
		.vertical-divider {
		    margin: 0 8px;
		}
		.services.nm-sz *,
		.locations.nm-sz *  {
		    font-size: 16px;
		}

		.detail-intro .locations {
		    padding-top: 0;
			margin-top: 15px;
		    background-color: #fff;
		    border-radius: 20px;
		    border: 1px solid #e5e8eb;
		}
		.detail-intro .locations .icon-container-inner {
		    width: 26px;
		    height: 26px;
		    min-width: 26px;
		}
		span.icon-container {
			padding: 9px 13px;
		    border-bottom: 1px solid #e5e8eb;
		}
		.locations .vertical-divider {
		    display: none !important;
		}
		.locations .location-name {
		    display: block;
		    width: 100%;
		}
		.locations .location-name {
		    margin-bottom: 5px;
		    padding: 0 13px;
		}
		.locations .locations-inner > *:not(.span, :last-child) {
		    margin-bottom: 5px;
		}
		.locations .locations-inner > *:nth-child(2) {
		    margin-top: 10px;
		}
		.locations .locations-inner > *:last-child {
		    margin-bottom: 13px;
		}

		#detail-intro .col-2 .xxs-sp-bk,
		#staff-medico-popup .col-2 .xxs-sp-bk {
		    padding: 20px 0;
		}
		#detail-intro .intro-description p {
		    -webkit-box-orient: unset;
		    -webkit-line-clamp: unset;
		    overflow: unset;
		    display: block;
		    line-height: 1.4;
		}

		.booking {
		    padding-top: 30px;
		}
		.locations span.icon-container {
		    width: 100%;
		    margin-right: 0;
		}

	/* Info Stripe
	---------------------------------------------------------------*/
		#medic-info h3 {
		    font-size: 19px;
		}
		#medic-info p {
		    font-size: 16px;
		}
		#medic-info .col-icon-container {
		    min-width: 41px;
		    min-height: 41px;
		}
		#medic-info .col-icon-container {
		    padding: 8px;
		}

	/* Video Stripe
	---------------------------------------------------------------*/
		#medic-videos .four-col-grid {
		    grid-template-columns: 1fr;
		}

	/* Pubblication Stripe
	---------------------------------------------------------------*/
		#medic-pubblications .three-col-grid {
		    grid-template-columns: 1fr;
			grid-gap: 40px 0;
			padding-top: 40px;
		}
		#medic-pubblications .col-content {
		    display: flex;
		    flex-flow: column;
		    justify-content: space-between;
		}
		#medic-pubblications .pubblication-image img {
			width: 20vw;
			height: 28.267vw;
			
			min-width: 75px;
			min-height: 106px;
			
			max-width: 90px;
			max-height: 127px;
		}
		#medic-pubblications p {
		    display: none;
		}
		#medic-pubblications h3 {
		    font-size: 18px;
		    font-family: var(--bd-font);
		    margin-bottom: 0;
		}

	/* Popup
	---------------------------------------------------------------*/
		#staff-medico-popup .popup-container-inner {
		    height: 100vh;
		    max-height: unset;
		    width: 100vw;
		    border-radius: unset;
		    overflow: auto;
		}
		#staff-medico-popup .col-container {
		    height: auto;
		}
		#staff-medico-popup .popup-content {
		    display: block;
		}
		#staff-medico-popup .popup-content .col.col-1 {
		    width: 100%;
		}
		#staff-medico-popup .col-left img {
		    max-width: unset;
		    width: 100%;
	        height: 58.667vw;
	        max-height: 385px;
	        min-height: 220px;
		}
		#staff-medico-popup .popup-container-inner,
		#staff-medico-popup .col-container {
		    min-height: unset;
		}
		#staff-medico-popup .col-2 {
		    padding-left: 1em;
		    padding-right: 1em;
		}
		#staff-medico-popup .col-2 .col-container {
		    display: block;
		    flex-flow: unset;
		    padding-right: 0;
		    padding-top: 20px;
		}
		#staff-medico-popup .col-right .col-container:before {
		    display: none;
		}
		#staff-medico-popup .description {
		    overflow: unset;
		    padding-right: 0;
		    padding-bottom: 0;
		}
		#staff-medico-popup .h2-font {
		    padding-right: 0;
		}
		#staff-medico-popup .detail-intro .locations {
		    padding-right: 0;
		}
		#staff-medico-popup .col-2 .col-container > .xxs-sp-bk {
		    padding-right: 0;
		}
		#staff-medico-popup .description.nm-sz * {
		    font-size: 16px;
		}
}