:root {
	--serviceMainPicture: 30vw;
	--serviceHeightSection: calc(30vw / 4 - 2vw);
	--serviceSectionZoom: 1.2;

	--barActiveContentHeight: 5vw;


	--modalColor: black;
	--logoGreen: #dbf475;
	--logoPink: #f3d1e4;

	--lowerColor: #959595;
	--shadowColor: #808080;

	--marginHeader: 12vw;

	--backgroundSize: 30vw;
}

*, *:before, *:after {
  box-sizing: border-box;
}

body {
	margin:0;
	font-family: 'Open Sans', sans-serif;
}




.loader {
	border: 16px solid var(--modalColor);
	border-radius: 50%;
	border-top: 16px solid var(--logoGreen);
	border-bottom: 16px solid var(--logoPink);
	width: 120px;
	height: 120px;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
	margin: auto;
}

@-webkit-keyframes spin {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}





/* MENU SECTION - FULL ************************************************************************************************************/
.topnav {
	overflow: hidden;
	background: linear-gradient(90deg, rgba(219,244,117,1) 0%, rgba(219,244,117,1) calc(50% - 65px), rgba(219,244,117,1) 50%, rgba(243,209,228,1) 50%, rgba(243,209,228,1) calc(50% + 65px), rgba(243,209,228,1) calc(50% - 65px), rgba(243,209,228,1)  100%);
	top: 155px;
	margin: 0 var(--marginHeader) 0 var(--marginHeader);
	border-radius: 1vw;
	height: 55px;
	box-shadow: 0 0 2vw var(--shadowColor);
	position: fixed;
	width: calc(100% - var(--marginHeader) * 2);
	transition: 0.4s;
	z-index: 2500;

	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.phoneBox {
	display: block;
    position: fixed;
    top: 0;
    right: 0;
    margin: 2vw var(--marginHeader) 0 0;
    font-size: 30px;
	padding-left: 50px;
	height: 40px;
	line-height: 40px;
    font-weight: bold;
    text-decoration: none;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 3003;
}

.wetterminBox {
	display: block;
    position: fixed;
    top: 0;
    /*right: 0;*/
    margin: 2vw 0 0 var(--marginHeader);
    font-size: 30px;
	padding-left: 50px;
	height: 40px;
	line-height: 40px;
    font-weight: bold;
    text-decoration: none;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 3003;
}

.hideBox {
	position: fixed;
	top: 0;
	left: 0;
	background-color: white;
	width: 100%;
	height: 210px;
	z-index: 2000;
}

.phoneBox .phone {
	text-decoration: none;
	color: var(--lowerColor);
}

.wetterminBox .phone {
	text-decoration: none;
	color: var(--lowerColor);
}

.topnav .item {
	float: left;
	display: block;
	color: black;
	text-align: center;
	padding: 0;
	text-decoration: none;
	outline: none;
	font-size: 1.3vw;
	font-weight: bold;
	text-shadow: 0 0 2vw var(--shadowColor);
	height: 55px;
	line-height: 55px;
	width: calc((100% - 290px) / 6);

	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.topnav .topnav-right .item {
	width: calc((100% - 145px) / 3);
}

.topnav .icon {
	display: none;
}

.topnav .firstRow {
	height: 0;
}

.logoBox {
	float: none;
	position: fixed;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
	height: 210px;
	width: 290px;
	box-shadow: 0 0 2vw var(--shadowColor);
	border-radius: 50% 50% 0 0;
	/* background: linear-gradient(90deg, rgba(219,244,117,1), rgba(219,244,117,1) 50%, rgba(243,209,228,1) 50%, rgba(243,209,228,1) 100%); */
	background-color: white;
	z-index: 3001;
	transition: 0.4s;
}

.logo {
	float: none;
	position: fixed;
	top: 5px;
	left: 50%;
	transform: translate(-50%, 0);
	height: 200px;
	width: 280px;

	background-image: url("icon/logo.svg");
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 3002;
	transition: 0.4s;
}

.topnav-right {
	float: right;
	width: 50%;
	display: flex;
	justify-content: flex-end;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.newsAlert {
display:block;
	color: #8a6d3b;
	background-color: #fcf8e3;
	border-color: #faebcc;
	padding: 15px;
	margin-bottom: 20px;
	border-radius: 4px;
	z-index: 4000;
	position: fixed;
	top: 1vmin;
	left: 1vmin;
	border-width: 1px;
	border-style: solid;
	font-size: 1.1vw;
}
/* END MENU SECTION - FULL ************************************************************************************************************/



/* MAIN SECTION - FULL ************************************************************************************************************/

.mainRow {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.mainColumn {
	float: left;
	width: calc(100vh - 265px - 6vw);
	margin-bottom: 2vw;
	margin-top: 2vw;
	padding: 0;
}

.mainColumnText {
	float: right;
	width: calc(100% - (100vh - 265px - 6vw) - 5%);
	margin-bottom: 2vw;
	padding: 0 1vw;
	font-size: 2vw;
	text-align: justify;
    height: auto;
}

.mainContainer {
	position: relative;
	padding-top: 0vw;
}

.mainContainer .pictureRotation {
	width: 100%;
	height: calc(100vh - 265px - 6vw);
	min-height: calc(50vh);
	box-shadow: 0 0 2vw var(--shadowColor);
	border-radius: 1vw;

	background-color: transparent;
	background-image: url('main/1.jpg');
	background-repeat: no-repeat;
	background-size: cover;

	-webkit-transition: background-image 1s linear;
	-moz-transition: background-image 1s linear;
	-ms-transition: background-image 1s linear;
	transition: background-image 1s linear;
}

.mainTextBlock {
	position: absolute;
	top: 2vmin;
	left: 20px;
	/* background-color: black; */
	color: white;
	padding-left: 20px;
	padding-right: 20px;
	opacity: 1;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}

.mainAbout {
	float: none;
	width: 60%;
	margin: auto;
	padding: 0 1vw;
	font-size: 2vw;
	text-align: justify;
    height: auto;
}

/* END MAIN SECTION - FULL ************************************************************************************************************/


/* ABOUT SECTION - FULL ************************************************************************************************************/
.aboutColumn {
	float: left;
	width: 40%;
	margin-bottom: 2vw;
	margin-top: 2vw;
	padding: 0 1vw;
}

.aboutColumnText {
	float: right;
	width: 55%;
	margin-bottom: 2vw;
	padding: 0 1vw;
	font-size: 1.65vw;
	text-align: justify;
    height: auto;
}

.aboutCard {
	box-shadow: 0 0 2vw var(--shadowColor);
	border-radius: 1vw;
}

.aboutImage {
	width:100%;
	border-radius: 1vw;
}

.aboutName {
	font-size: 1.9vw;
	font-weight: bold;
	color: black;
}

.aboutBox {
	display: block;
    margin: 1vw 0 0 0;
	padding-left: 30px;
	height: 20px;
	line-height: 20px;
	font-size: 1.2vw;
    font-weight: normal;
    text-decoration: none;
	background-repeat: no-repeat;
	background-size: contain;
}




.aboutBox .phone {
	text-decoration: none;
	color: var(--lowerColor);
}

.aboutContainer {
	padding: 0 1vw 1vw 1vw;
}

.aboutContainer::after, .row::after {
	content: "";
	clear: both;
	display: table;
}

.aboutTitle {
	font-size: 1.3vw;
	font-weight: bold;
	color: var(--lowerColor);
	text-align: left;
}
/* END ABOUT SECTION - FULL ************************************************************************************************************/




/* CONTACT SECTION - FULL ************************************************************************************************************/
.contactMap {
	border:0;
	width: 100%;
	height: 40vh;
	box-shadow: 0 0 2vw var(--shadowColor);
	border-radius: 1vw;
	margin-top: 2vw;
}

.contactFace {
	border:none;
	overflow:hidden;
	width: 100%;
	height: 70px;
	margin-bottom: 1vw;			
}

.contactColumn {
	float: left;
	width: calc(100% / 3);
	margin-top: 1vw;
	padding: 0;
}

.contactColumnMiddle {
	padding: 0 2vw;
}

.contactSection {
	padding: 0 1vw;
	box-shadow: 0 0 2vw var(--shadowColor);
	border-radius: 1vw;
}

.contactSection::after, .row::after {
	content: "";
	clear: both;
	display: table;
}

.contactTitle {
	font-size: 1.9vw;
	font-weight: bold;
	color: black;
	padding-top: 1vw;
}

.contactSubTitle {
	display: block;
    margin: 1vw 0 0 1vw;
	padding-left: 30px;
	height: 20px;
	line-height: 20px;
	font-size: 1.2vw;
    font-weight: normal;
	background-repeat: no-repeat;
	background-size: contain;
	text-decoration: none;
	color: var(--lowerColor);
}

.contactSubTitle .link {
	text-decoration: none;
	color: var(--lowerColor);
}

.contactInfo {
	font-size: 1.3vw;
	font-weight: bold;
	color: var(--lowerColor);
	text-align: left;
	margin: 2vw 0 0 0;
}

.contactMoreInfo {
	font-size: 1.2vw;
	font-weight: normal;
	color: var(--lowerColor);
	text-align: left;
	margin: 2vw 0 0 0;
}

.contactInfoCenter {
	text-align: center;
}

hr.contactLine {
	border-top: 1px solid var(--logoGreen);
	border-bottom: 1px solid var(--logoPink);
	border-right: 1px solid var(--logoPink);
	border-left: 1px solid var(--logoGreen);
	width: 70%;
}

/* END CONTACT SECTION - FULL ************************************************************************************************************/



/* FOOTER SECTION - FULL ************************************************************************************************************/

.footer {
	position: relative;
	overflow: hidden;
	background-color: #333;
	background: linear-gradient(90deg, var(--logoGreen) 0%, var(--logoGreen) 45%, var(--logoPink) 55%, var(--logoPink) 100%);
	margin: 0 var(--marginHeader) 1vw var(--marginHeader);
	border-radius: 1vw;
	height: 55px;
	box-shadow: 0 0 2vw var(--shadowColor);
	
	width: calc(100% - var(--marginHeader) * 2);
	z-index: 2400;
}

.footerLeft {
	display: flex;
	overflow: hidden;
	float: left;
	width: 45%;
	height: 55px;
	align-items: center;
	justify-content: flex-start;
	padding-left: 2vw;
}

.footerRight {
	display: flex;
	overflow: hidden;
	float: right;
	width: 45%;
	height: 55px;
	align-items: center;
	justify-content: flex-end;
	padding-right: 2vw;
}

/* END FOOTER SECTION - FULL ************************************************************************************************************/



/* GALLERY SECTION - FULL ************************************************************************************************************/
.galMain {
	margin: auto;
}

.galMain .row {
	margin: 0;
	padding: 2vw 2vw 0 2vw;
}

.galMain .row > .column {
	padding: 2vw;
}

.galMain .column {
	float: left;
	width: calc(100% / 4);
	display: none;
}

.galMain .row:after {
	content: "";
	display: table;
	clear: both;
}

.galMain .galContent {
	background-color: var(--logoGreen);
	box-shadow: 0 0 2vw var(--shadowColor);
	border-radius: 1vw;
	padding: 0;
}

.galMain .galContent img {
	border-radius: 1vw;
	width: 100%;
}

.galMain .galContent img:hover {
	opacity: 0.5;
}

.galMain .show {
	display: block;
}

/* The Modal */
.modal {
	display: none;
	position: fixed;
	z-index: 6000;
	padding: 5vw;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: var(--modalColor);
}

.modal-content {
	position: relative;
	background-color: transparent;
	margin: auto;
	padding: 0;
	width: 100%;
}

.modalImage {
	margin:auto;
}

.close {
	color: white;
	position: fixed;
	top: 0;
	right: 0;
	font-size: 50px;
	font-weight: bold;
	padding: 0.5vw 2vw 1vw 2vw;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	z-index: 7001;
}

.close:hover, .close:focus {
	color: #999;
	text-decoration: none;
	cursor: pointer;
}

.imageCenter {
	display: flex;
	text-align: center;
	justify-content: center;
}

.imageCenter img {
	text-align: center;
	border-radius: 1vw;
	margin-left: 1vw;
	margin-right: 1vw;
	width: 50%;
}

.cursor {
	cursor: pointer;
}

.prev, .next {
	background-color: transparent;
	cursor: pointer;
	position: absolute;
	left: 0;
	top: 5vw;
	width: calc(50%);
	height: calc(100% - 5vw);
	padding: 0;
	margin: 0;
	font-weight: bold;
	font-size: 50px;
	color: white;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	/* transition: 0.6s ease; */
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	z-index: 6001;
	line-height: calc(100vh - 50px - 5vw);
}

.next {
	right: 0;
	left: unset;
	text-align: right;
}

.next:hover, .next:focus, .prev:hover, .prev:focus {
	color: #999;
	text-decoration: none;
	cursor: pointer;
}

.numbertext {
	color: white;
	font-size: 12px;
	padding: 2vw;
	position: fixed;
	top: 0;
	left: 0;
}
/* END GALLERY SECTION - FULL ************************************************************************************************************/


/* NEWS SECTION - FULL ************************************************************************************************************/
.newsContainer {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	justify-content: flex-start;
	align-items: stretch;
}

.newsMainBox {
	display: flex;
	position: relative;
	overflow: hidden;

	background-color: var(--logoGreen);
	background: linear-gradient(90deg, rgba(219,244,117,1) 0%, rgba(243,209,228,1)  100%);
	border-radius: 1vw;
	border-style: none;
	box-shadow: 0 0 2vw var(--shadowColor);

	margin: 2vw 1vw 0 1vw;
	cursor: pointer;
	padding: 0;

	width: calc(50% - 2vw);
	text-decoration: none;
	color: black;
  
	height: auto;

	outline: none;
}

.newsImage {
	background-color: transparent;
	box-shadow: 0 0 2vw var(--shadowColor);
	border-radius: 1vw;
	width: 30%;
	padding: 0;
}

.newsImage img {
	display: block;
	border-radius: 1vw;
	width: 100%;
	height: auto;
}

.newsBox {
	width: 70%;
}

.newsPhoto {
	display: block;
	font-size: 1.3vw;
	font-weight: bold;
	overflow:hidden;
	color: var(--lowerColor);
	width:100%;
	padding-left:2vw;
	padding-right:2vw;
	text-align: center;
}

.newsDate {
	display: block;
	font-size: 1.3vw;
	font-weight: bold;
	overflow:hidden;
	color: var(--lowerColor);
	width:100%;
	padding-left:2vw;
	padding-right:2vw;
}

.newsTitle {
	display:flex;
	font-size: 1.5vw;
	font-weight: bold;
	overflow:hidden;
	width:100%;
	height: 4vw;
	align-items:center;
	justify-content:flex-start;
	padding-left: 2vw;
	padding-right: 2vw;
	margin-bottom: 1vw;
}

.newsInfoBox {
	display: block;
	max-height: 15vw;
	overflow-y: auto;
}

.newsInfo {
	display: block;
	font-size: 1.2vw;
	font-weight: normal;
	overflow:hidden;
	width:100%;
	padding-left:3vw;
	padding-right:2vw;
	margin-top: 0;
}

.newsPagination {
	display: flex;
	width: 100%;
	margin-top: 1vw;
	padding-top: 1vw;
	justify-content: center;
}

.newsPageLink {
	border-style: none;
	margin-top: auto;
	margin-bottom: auto;
	cursor: pointer;
	text-decoration: none;
	color: black;
	outline: none;
}

.newsPageDisabled {
	width: 3vw;
	height: 3vw;
	font-size: 1.5vw;
	text-shadow: -1px 0 var(--logoGreen), 0 1px var(--logoGreen), 1px 0 var(--logoGreen), 0 -1px var(--logoGreen);

	background-color: #ffffff;
	color: var(--shadowColor);
	border-radius: 50%;
	border-style: solid;
	border-color: var(--logoGreen);
	box-shadow: 0 0 2vw var(--logoGreen);

	display: flex;
	margin-left: 1vw;
	margin-right: 1vw;
	align-items: center;
	justify-content: center;
	text-align: center;
	cursor: default;
}

.newsPageBreak {
	width: 3vw;
	height: 3vw;
	margin-left: 1vw;
	margin-right: 1vw;

	font-size: 1.5vw;
	font-weight: bold;
	text-shadow: -1px 0 var(--logoGreen), 0 1px var(--logoGreen), 1px 0 var(--logoGreen), 0 -1px var(--logoGreen);

	color: black;
	background-color: #ffffff;

	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	cursor: default;
}

.newsPageText {
	width: 3vw;
	height: 3vw;
	margin-left: 1vw;
	margin-right: 1vw;

	font-size: 1.5vw;
	font-weight: bold;
	text-shadow: -1px 0 var(--logoGreen), 0 1px var(--logoGreen), 1px 0 var(--logoGreen), 0 -1px var(--logoGreen);

	color: black;
	background-color: #ffffff;
	border-radius: 50%;
	border-style: solid;
	border-color: var(--logoGreen);
	box-shadow: 0 0 2vw var(--logoGreen);

	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	cursor: pointer;
}

.newsPageSelected {
	width: 3vw;
	height: 3vw;
	margin-left: 1vw;
	margin-right: 1vw;
	font-size: 1.5vw;
	font-weight: bold;
	text-shadow: -1px 0 var(--logoGreen), 0 1px var(--logoGreen), 1px 0 var(--logoGreen), 0 -1px var(--logoGreen);

	color: black;
	background-color: var(--logoPink);
	border-radius: 50%;
	border-style: solid;
	border-color: var(--logoGreen);
	box-shadow: 0 0 2vw var(--logoGreen);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}


/* END NEWS SECTION - FULL ************************************************************************************************************/




.phoneBoxIcon {
	background-image: url("icon/phone.svg");
}

.calendarBoxIcon {
	background-image: url("icon/calendar.png");
}

.mailBoxIcon {
	background-image: url("icon/mail.svg");
}

.faceBoxIcon {
	background-image: url("icon/face.svg");
}

.timeBoxIcon {
	background-image: url("icon/time.svg");
}


.content {
	margin: calc(210px + 1vw) calc(var(--marginHeader) + 2vw) 3vw calc(var(--marginHeader) + 2vw);
	z-index: 1000;
}



.barContainer {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	justify-content: center;
}

.barContainerFull {
	display: none;
	flex-direction: row;
	flex-wrap: wrap;
	width: 75%;
	justify-content: center;
	margin-bottom: 2vw;
	padding-top: 0vw;
	margin-left: auto;
	margin-right: auto;
}

.barPanelBox {
	padding: 0;
	position: relative;
	margin: 0px 5px 5px 5px;
	display: none;
	background-color: white;
	overflow-x: hidden;
	overflow-y: auto;
	width: calc(100% - 10px);
	border-radius: 0 0 2vw 2vw;
	/* height: 40vw; xxx */
	height: var(--backgroundSize);
	
}

.servicePanelTop {
	background-color: transparent;
	border-radius: 0 0 100% 0;
	box-shadow: 0 0 2vw var(--shadowColor);
	z-index:100;
	background-repeat: no-repeat;
	background-size: 100% auto;
	opacity: 0.3;
	/* width: 64vw;
	height: 40vw; xxx */
	width: calc(var(--backgroundSize) * 1.6);
	height: var(--backgroundSize);
}

.servicePanelMiddleText {
	position: relative;
	text-align: justify;
	/* width: calc((100% - (24vw + 24vw - 20%))); 
	margin: 15% -10% 15% -10%; */
	font-size: 16pt;
	height: auto;
	z-index:1000;
	width: 70%;
	margin: calc(-1 * var(--backgroundSize)) 0 0 15%;
	padding-bottom: 1vw;
}

.servicePanelMiddleText ul {
	text-align: left;
}

.servicePanelBottom {
	position: absolute;
	background-color: transparent;
	border-radius: 100% 0 0 0;
	box-shadow: 0 0 2vw var(--shadowColor);
	right: 0;
	bottom: 0;
	z-index:100;

	background-repeat: no-repeat;
	background-size: 100% auto;
	opacity: 0.3;
	/*
	width: 64vw;
	height: 40vw;
	xxx
	*/

	width: calc(var(--backgroundSize) * 1.6);
	height: var(--backgroundSize);
}






.serviceDiagnostykaIcon {
	background-image: url("icon/diagnostyka.svg");
}
.serviceDiagnostykaPanelTopImg {
	background-image: none; box-shadow: none;
}
.serviceDiagnostykaPanelBottomImg {
	background-image: url("icon/diagnostykaBottom.jpg");
}



.serviceProfilaktykaIcon {
	background-image: url("icon/profilaktyka.svg");
}
.serviceProfilaktykaPanelTopImg {
	background-image: url("icon/profilaktykaTop.jpg");
}
.serviceProfilaktykaPanelBottomImg {
	background-image: none; box-shadow: none;
}



.serviceDietetykaIcon {
	background-image: url("icon/dietetyka.svg");
}

.serviceDietetykaPanelTopImg {
	background-image: url("icon/dietetykaTop.jpg");
}
.serviceDietetykaPanelBottomImg {
	background-image: none; box-shadow: none;
}



.serviceChirurgiaIcon {
	background-image: url("icon/chirurgia.svg");
}
.serviceChirurgiaPanelTopImg {
	background-image: url("icon/chirurgiaTop.jpg");
}
.serviceChirurgiaPanelBottomImg {
	background-image: none; box-shadow: none;
}




.serviceStomatologiaIcon {
	background-image: url("icon/stomatologia.svg");
}
.serviceStomatologiaPanelTopImg {
	background-image: url("icon/stomatologiaTop.jpg");
}
.serviceStomatologiaPanelBottomImg {
	background-image: none; box-shadow: none;
}

.serviceCiazaPanelTopImg {
	background-image: none;
	box-shadow: none;
}



.serviceLeczenieIcon {
	background-image: url("icon/leczenie.svg");
}
.serviceLeczeniePanelTopImg {
	background-image: url("icon/leczenieTop.jpg");
}
.serviceLeczeniePanelBottomImg {
	background-image: none; box-shadow: none;
}



.servicePaszportIcon {
	background-image: url("icon/paszport.svg");
}
.servicePaszportPanelTopImg {
	background-image: url("icon/paszportTop.jpg");
}
.servicePaszportPanelBottomImg {
	background-image: none; box-shadow: none;
}


.serviceCiazaIcon {
	background-image: url("icon/ciaza.svg");
}
.serviceCiazaPanelTopImg {
	background-image: none; box-shadow: none;
}
.serviceCiazaPanelBottomImg {
	background-image: url("icon/ciazaBottom.jpg");
}




.tipsKotIcon {
	background-image: url("icon/kot.svg");
}
.tipsKotPanelTopImg {
	background-image: url("icon/kotTop.jpg");
}
.tipsKotPanelBottomImg {
	background-image: url("icon/kotTop.jpg");
}



.tipsPiesIcon {
	background-image: url("icon/pies.svg");
}
.tipsPiesPanelTopImg {
	background-image: url("icon/piesTop.jpg");
}
.tipsPiesPanelBottomImg {
	background-image: url("icon/piesTop.jpg");
}



.tipsKrolikIcon {
	background-image: url("icon/krolik.svg");
}
.tipsKrolikPanelTopImg {
	background-image: url("icon/krolikTop.jpg");
}
.tipsKrolikPanelBottomImg {
	background-image: url("icon/krolikTop.jpg");
}



.tipsKrewkIcon {
	background-image: url("icon/diagnostyka.svg");
}
.tipsKrewPanelTopImg {
	background-image: url("icon/krewTop.jpg");
}
.tipsKrewPanelBottomImg {
	background-image: none; box-shadow: none;
}



.tipsMoczIcon {
	background-image: url("icon/mocz.svg");
}
.tipsMoczPanelTopImg {
	background-image: url("icon/moczTop.jpg");
}
.tipsMoczPanelBottomImg {
	background-image: none; box-shadow: none;
}



.tipsKalIcon {
	background-image: url("icon/kal.svg");
}
.tipsKalPanelTopImg {
	background-image: url("icon/kalTop.jpg");
}
.tipsKalPanelBottomImg {
	background-image: none; box-shadow: none;
}



.tipsZabiegIcon {
	background-image: url("icon/zabieg.svg");
}
.tipsZabiegPanelTopImg {
	background-image: url("icon/zabiegTop.jpg");
}
.tipsZabiegPanelBottomImg {
	background-image: none; box-shadow: none;
}



.tipsUsgIcon {
	background-image: url("icon/usg.svg");
}
.tipsUsgPanelTopImg {
	background-image: url("icon/usgTop.jpg");
}
.tipsUsgPanelBottomImg {
	background-image: none; box-shadow: none;
}



.allIcon {
	background-image: url("icon/all.svg");
}

.galleryDripIcon {
	background-image: url("icon/drip.svg");
}

.galleryOfficeIcon {
	background-image: url("icon/gabinet.svg");
}

.galleryWaitroomIcon {
	background-image: url("icon/poczekalnia.svg");
}

.galleryLaboratoryIcon {
	background-image: url("icon/laboratorium.svg");
}

.galleryUsgIcon {
	background-image: url("icon/usg.svg");
}

.aboutCertyfikatIcon {
	background-image: url("icon/certyfikat.svg");
}

.aboutDyplomIcon {
	background-image: url("icon/dyplom.svg");
}


.barMainBox {
	display: flex;
	position: relative;
	overflow: hidden;

	background-color: var(--logoGreen);
	background: linear-gradient(90deg, rgba(219,244,117,1) 0%, rgba(243,209,228,1)  100%);
	border-radius: 1vw;
	border-style: none;
	box-shadow: 0 0 2vw var(--shadowColor);

	margin: 2vw 0 0 0;
	cursor: pointer;
	padding: 0;

	width: 100%;
	text-decoration: none;
	color: black;
  
	height: var(--serviceHeightSection);
	order: 10;

	outline: none;

	/* transition: 0.4s; */
}

.barElementBox {
	width: 100%;
}

.barMainGalleryBox {
	margin: 2vw 1vw 0 1vw;
}

.serviceMainPicture {
	display: flex;
	position: relative;
	overflow: visible;

	background: none; /*linear-gradient(90deg, rgba(219,244,117,1) 0%, rgba(243,209,228,1)  100%); */
	border-radius: 1vw;
	border-style: none;
	box-shadow: none;

	margin: 2vw 0 0 0;
	cursor: pointer;
	padding: 0;

	width: var(--serviceMainPicture);
  
	height: var(--serviceHeightSection);
	order: 10;

	outline: none;

	/* transition: 0.4s; */
}

.barWidthP4 {
	width: calc(var(--serviceMainPicture) + 4vw);
}

.barWidth {
	width: 25%;
}

.barIconBox {
	width: 100%;
}


.barFrontIcon {
	display: block;
	overflow: hidden;
	position: absolute;
	background-color: transparent;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	border-style: none;
	outline: none;
	background-repeat: no-repeat;
	background-size: auto calc(var(--serviceHeightSection) * (2 - var(--serviceSectionZoom)));

	background-position-x: calc((var(--serviceHeightSection) * (var(--serviceSectionZoom) - 1)) / 2);
	background-position-y: calc((var(--serviceHeightSection) * (var(--serviceSectionZoom) - 1)) / 2);
}


.barBackIcon {
	display: block;
	position: absolute;
	overflow: hidden;

	background-color: transparent;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;

	border-style: none;

	outline: none;
	background-repeat: no-repeat;
	background-size: auto var(--serviceHeightSection);
	background-position-x: 0;
	background-position-y: 0;

	opacity: 0.3;
}

.barContainer .barFrontIcon:hover {
	background-color: transparent;
	background-size: auto calc(100% * var(--serviceSectionZoom));
	background-position-x: calc( (var(--serviceHeightSection) * (1 - var(--serviceSectionZoom))) / 2 );
	background-position-y: calc( (var(--serviceHeightSection) * (1 - var(--serviceSectionZoom))) / 2 );
}

.barActiveContent {
	display: block;
	height: auto;
}

.barActiveContent .barFrontIcon {
	background-size: calc(var(--barActiveContentHeight) * var(--serviceSectionZoom)) calc(var(--barActiveContentHeight) * var(--serviceSectionZoom));
	background-position-x: calc( (var(--barActiveContentHeight) * (1 - var(--serviceSectionZoom))) / 2 );
	background-position-y: calc( (var(--barActiveContentHeight) * (1 - var(--serviceSectionZoom))) / 2 );
}

.barActiveContent .barBackIcon {
	background-size: auto var(--barActiveContentHeight);
}

.barActiveContent .barPanelText {
	padding-left: calc(var(--barActiveContentHeight) * var(--serviceSectionZoom));
	line-height: var(--barActiveContentHeight);
	font-size: 20pt;
	font-weight: bold;
}

.barActiveSelection .barFrontIcon {
	background-size: calc(var(--serviceHeightSection) * var(--serviceSectionZoom)) calc(var(--serviceHeightSection) * var(--serviceSectionZoom));
	background-position-x: calc( (var(--serviceHeightSection) * (1 - var(--serviceSectionZoom))) / 2 );
	background-position-y: calc( (var(--serviceHeightSection) * (1 - var(--serviceSectionZoom))) / 2 );
}

.barActiveSelection .barPanelText {
	font-weight: bold;
}

.barPanelText {
	display: flex;
	width: 100%;
	padding-left: calc(var(--serviceHeightSection) * var(--serviceSectionZoom));
	font-size: 1.2vw;
	font-weight: normal;
	overflow: hidden;
    height: var(--serviceHeightSection);
    justify-content: start;
    align-items: center;
}

.servicePanelData {
	position: relative;
	/* display: flex; */
	display: block;
	flex-direction: row;
	flex-wrap: nowrap;
	width: 100%;
	min-height: var(--backgroundSize);
}











.serviceMainPicture .pictureRotation {
position: absolute;
width: var(--serviceMainPicture);
height:var(--serviceMainPicture);
border-radius:50%;
margin-top: -1vw;
margin-left: 0;
z-index: 1500;
box-shadow: 0 0 2vw 0.5vw #505050, inset 0 0 2vw 0.5vw #505050;



background-color: transparent;
background-image: url('bg/1.jpg');
background-repeat: no-repeat;
background-size: var(--serviceMainPicture) var(--serviceMainPicture);


-webkit-transition: background-image 1s linear;
-moz-transition: background-image 1s linear;
-ms-transition: background-image 1s linear;
transition: background-image 1s linear;

}




















@media screen and (max-width: 760px) {

	:root {
		--barActiveContentHeight: 8vw;
		--serviceHeightSection: 8vw;
		--marginHeader: 2vw;
		--backgroundSize: 70vw;
	}

	/* MENU SECTION - 760 ************************************************************************************************************/
	.topnav {
		top: 55px;
	}

	.hideBox {
		height: 110px;
	}

	.topnav.responsive {
		height: calc(29px * 6 + 55px);
		transition: 0.4s;
	}

	.phoneBox {
		font-size: 10px;
		padding-left: 25px;
		height: 20px;
		line-height: 20px;
		background-size: 20px 20px;
	}
	
	.wetterminBox {
		font-size: 10px;
		padding-left: 25px;
		height: 20px;
		line-height: 20px;
		background-size: 20px 20px;
	}

	.topnav .icon {
		position: absolute;
		display: inline-block;
		top: 0;
		left: 0;
		text-align: center;
		padding: 10px;
		text-decoration: none;
		font-size: 20px;
		cursor: pointer;
	}

	.logoBox {
		height: 110px;
		width: 150px;
		transition: 0.4s;
	}

	.logo {
		height: 100px;
		width: 140px;
	}

	.topnav .bar1, .topnav .bar2, .topnav .bar3 {
		width: 35px;
		height: 5px;
		background-color: black;
		margin: 5px 0;
		transition: 0.4s;
	}

	.topnav .change .bar1 {
		-webkit-transform: rotate(-45deg) translate(-8px, 6px);
		transform: rotate(-45deg) translate(-8px, 6px);
	}

	.topnav .change .bar2 {
		opacity: 0;
	}

	.topnav .change .bar3 {
		-webkit-transform: rotate(45deg) translate(-8px, -6px);
		transform: rotate(45deg) translate(-8px, -6px);
	}

	.topnav .firstRow {
		height: 55px;
	}

	.topnav-right {
		float: none;
		display: block;
		width:100%;
		position: relative;
	}

	.topnav .item {
		float: none;
		position: relative;
		display: flex;
		text-align: center;
		justify-content: center;
		align-items: center;
		background-color: white;
		height: 29px;
		padding: 0;
		font-size: 14px;
		font-weight: bold;
		width: 100%;
	}

	.topnav .topnav-right .item {
		width: 100%;
	}

	.newsAlert {
		padding: 5px;
		font-size: 10px;
	}

	/* END MENU SECTION - 760 ************************************************************************************************************/



	/* ABOUT SECTION - 760 ************************************************************************************************************/
	.aboutColumn {
		width: 100%;
		display: block;
	}

	.aboutColumnText {
		width: 100%;
		display: block;
		font-size: 12pt;
	}

	.aboutName {
		font-size: 16pt;
	}

	.aboutTitle {
		font-size: 14pt;
	}

	.aboutBox {
		font-size: 14pt;
	}
	/* END ABOUT SECTION - 760 ************************************************************************************************************/




	/* CONTACT SECTION - 760 ************************************************************************************************************/
	.contactColumn {
		width: 100%;
		display: block;
	}

	.contactColumnMiddle {
		padding: 0;
	}

	.contactTitle {
		font-size: 18pt;
		padding-top: 2vw;
		padding-left: 2vw;
	}

	.contactInfo {
		font-size: 16pt;
		padding-left: 2vw;
	}

	.contactMoreInfo {
		font-size: 14pt;
		padding-left: 2vw;
	}

	.contactSubTitle {
		font-size: 14pt;
		margin: 1vw 0 0 2vw;
	}
	/* END CONTACT SECTION - 760 ************************************************************************************************************/




	/* GALLERY SECTION - 760 ************************************************************************************************************/
	.serviceMainPicture {
		display: none;
	}

	.barWidth {
		width: 100%;
	}

	.galMain .column {
		width: 50%;
	}

	.modal {
		padding: 9vw;
	}

	.prev, .next {
		top: 9vw;
		height: calc(100% - 9vw);
		line-height: calc(100vh - 50px - 9vw);
	}

	/* END GALLERY SECTION - 760 ************************************************************************************************************/


	/* NEWS SECTION - 760 ************************************************************************************************************/
	.newsMainBox {
		width: calc(100% - 2vw);
	}

	.newsImage {
		background-color: transparent;
		box-shadow: 0 0 2vw var(--shadowColor);
		border-radius: 1vw;
		width: 30%;
		padding: 0;
	}

	.newsPhoto {
		font-size: 2.6vw;
	}

	.newsDate {
		font-size: 2.6vw;
	}

	.newsTitle {
		font-size: 3.0vw;
	}

	.newsInfoBox {
		max-height: 25vw;
	}

	.newsInfo {
		font-size: 2.4vw;
	}

	.newsPagination {
		margin-top: 2vw;
	}

	.newsPageBreak, .newsPageText, .newsPageSelected, .newsPageDisabled {
		width: 7vw;
		height: 7vw;
		font-size: 3vw;
	}

	/* END NEWS SECTION - 760 ************************************************************************************************************/




	/* MAIN SECTION - 760 ************************************************************************************************************/

	.mainAbout {
		width: 90%;
		font-size: 12pt;
	}

	.mainRow {
		width: 100%;
	}

	.mainColumn {
		width: 100%;
		display: block;
	}

	.mainColumnText {
		width: 100%;
		display: block;
		font-size: 12pt;
	}

	/* END MAIN SECTION - 760 ************************************************************************************************************/




	/* FOOTER SECTION - 760 ************************************************************************************************************/

	.footer {
		font-size: 10pt;
	}

	/* END FOOTER SECTION - 760 ************************************************************************************************************/


	.content {
		margin: 110px 4vw 3vw 4vw
	}

	.barContainerFull {
		width: 100%;
	}

	.servicePanelData {
		display: block;
	}

	.servicePanelMiddleText {
		width: 90%;
		margin: calc(-1 * var(--backgroundSize)) 0 0 5%;
		padding-bottom: 1vw;
		font-size: 12pt;
	}

	.barActiveContent .barPanelText {
		font-size: 12pt;
	}


}





@media screen and (max-width: 1000px) {


	.barPanelText {
		font-size: 12px;
	}

	/* MAIN SECTION - 1000 ************************************************************************************************************/

	.mainAbout {
		width: 90%;
		font-size: 12pt;
	}

	.mainRow {
		width: 100%;
	}

	.mainColumn {
		width: 100%;
		display: block;
	}

	.mainColumnText {
		width: 100%;
		display: block;
		font-size: 12pt;
	}

	/* END MAIN SECTION - 1000 ************************************************************************************************************/


	/* GALLERY SECTION - 1000 ************************************************************************************************************/
	.galMain .column {
		width: calc(100% / 3);
	}
	/* END GALLERY SECTION - 1000 ************************************************************************************************************/
}