@import url("https://use.typekit.net/anv6lov.css");

/************************************/
:root {
	--DarkColor: #001e36;/*001E34*/
	--DLMidColor: #9AA9C0;
	--DMidDarkColor: #647A9E;
	--WhiteColor: #ffffff;
	--lightColor: #A7BFD7;
	--lightColor2: #C2CEDF;
}

/*
Fenice Pro ITC Bold =
font-family: itc-fenice, serif; font-weight: 700; font-style: normal;

Fenice Pro ITC Regular
font-family: itc-fenice, serif; font-weight: 400; font-style: normal;

Proxima Nova Bold =
font-family: proxima-nova, sans-serif; font-weight: 700; font-style: normal;

Proxima Nova Bold Italic =
font-family: proxima-nova, sans-serif; font-weight: 700; font-style: italic;

Proxima Nova Regular =
font-family: proxima-nova, sans-serif; font-weight: 400; font-style: normal;

Proxima Nova Italic =
font-family: proxima-nova, sans-serif; font-weight: 400; font-style: italic;

*/

input[type=text], input[type=email], input[type=select],input[type=textarea], input[type=button] {
-webkit-appearance: none;
-webkit-border-radius: 0;
}
[type="button"], [type="reset"], [type="submit"], button {
	-webkit-appearance: none !important;
	-webkit-border-radius: 0 !important;
	}

/************************************/
* {box-sizing: border-box;}
img, object, iframe {max-width: 100%}
a, a:hover {text-decoration: none; outline: 0; color: var(--DarkColor)}
a {}
a:hover {}
/*:focus {outline: 0 !important}*/
a[rel=tel] {cursor: default; text-decoration: none; font-weight: bold}
/************************************/

img, iframe, object {max-width: 100%}

/*html {font-size: 62.5%}*/
body {font-size: 1rem; line-height: 1.4; overflow-x: hidden; background-color: var(--DLMidColor); color: var(--DarkColor); font-family: proxima-nova, sans-serif; font-weight: 400; font-style: normal;}

p {margin-bottom: 1.4rem;}		
p, li, h1, h2, h3, h4 { margin-top: 0;}
.break-word {word-break: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }		
h1,.h1, h2,.h2, h3,.h3, h4,.h4 {line-height: calc(2px + 2ex + 2px);  margin-bottom: 0.15em; font-family: itc-fenice, serif; font-weight: 400; font-style: normal; text-transform: uppercase}
h3, .h3 {text-align: center;  margin-bottom: 0.47em; position: relative; padding-bottom: 8px; padding-top: 8px}		
h3:after, .h3:after { position: absolute; content: ''; border-bottom: 1px solid var(--WhiteColor); bottom: 0; left: 50%; transform: translateX(-50%); width: 90%; max-width: 680px}
h3.darkh3Brd:after, .h3.darkh3Brd:after {border-bottom-color: var(--DarkColor)}
h3.wdth100brd:after, .h3.wdth100brd:after {width: 100%; max-width: 100%}

b, strong {font-weight: 700}
.whitecolor {color: var(--WhiteColor)}
.DarkColor { color: var(--DarkColor)}
.color1 {color:var(--lightColor)}
.font1 {font-family: proxima-nova, sans-serif; font-weight: 400; font-style: normal;}
.relDiv {position: relative}
.container { width:100%; max-width: 1800px !important; text-align: justify; padding-left: 8%; padding-right: 8%;}

.NavModal .modal-dialog{max-width:100%;width:100%;margin:0}
.NavModal .modal-content{background-color: var(--DMidDarkColor);border-radius:0;border:0}

.MenuIcon,.MenuIcon-Close{position:absolute}
.MenuIcon,.MenuIcon-Close{top:20px;left:20px;width:70px;max-width:70px;z-index:9999;position:fixed;border:0!important;background-color:transparent!important}

/*.menuGrid{display:grid; grid-template-columns:1fr; grid-template-rows:auto; gap:10px 0; grid-template-areas:"Menu1" "Menu2" "LogoCall" "smedia";}*/
.menuGrid{display:grid; grid-template-columns:minmax(90px,100px) 1fr; grid-template-rows:auto; gap:0 0; grid-template-areas:"EmptyM Menu1" "EmptyM Menu2" "EmptyM LogoCall"; color: #fff;}
.menuGrid a {color: #fff;}

.EmptyM {grid-area: EmptyM}
.Menu1 {grid-area: Menu1}
.Menu2 {grid-area: Menu2}
.LogoCall {grid-area: LogoCall; font-size: 1.1rem;line-height: 1.4rem}
.LogoMenu img {width: 80%; max-width: 130px;}
.PhoneMenu { display: flex; flex-direction: column;  border-left: 1px solid #fff; font-size: 1.3rem; padding: 4% 10px}
.PhoneMenu em {font-style: normal}
.PhoneMenu em:first-child {font-weight: 700}

.menuGrid .TopNav a{ color: #fff}
.menuGrid .TopNav > li > a{ color: var(--DarkColor)}


.Logo {width: 80%; max-width: 200px; margin: 15px auto 0 auto}
.LogoText { font-size: 1.5rem; color:var(--lightColor)}

.HeaderDiv {background-color: var(--DarkColor); color: var(--WhiteColor)}
.AboveSkew1, .AboveSkew2 {position: absolute; top: 0;  bottom: 0;  height: 100%; width: auto !important}
.AboveSkew1 { left: 0;}
.AboveSkew2 { right: 0;}

.Box1 {display: grid; grid-template-columns: 1fr; grid-template-rows: auto; gap: 0px 0px; grid-template-areas:"."; }
.Box-Img img {width: 100%; height: 100%; object-fit: cover; max-height: 900px; object-position: 50% 50%;}
.Box-Img-Small img {max-height: 440px;}
.Col2Box img {max-height: none}
.Col2Box {background-color: var(--DarkColor); color: var(--WhiteColor)}
.Col2Box .Box-Text{ padding: 4% 8%;}
.Col2Box a, .Col2Box a:hover {color: var(--WhiteColor)}

.Box-Text-Center, .flex-center {display: flex; align-items: center; justify-content: center}
.Box-Text {text-align: justify}

.AddTopBar {background-color: var(--DarkColor); color: var(--WhiteColor); padding: 15px; font-family: itc-fenice, serif; font-weight: 700; font-style: normal; margin: 0}
.AddTopBar a, .AddTopBar a:hover {color: var(--WhiteColor)}

.AddAdd { font-size: 1.4rem; line-height: 1.5rem}
.AddTel { font-size: 2.3rem; line-height: 2.4rem; text-align: right}

.brdTop {border-top: 8px solid var(--WhiteColor)}
.brdBottom {border-bottom: 8px solid var(--WhiteColor)}
.brdBottom2 {border-bottom: 8px solid var(--DarkColor)}

.headDiv {text-align: center; padding: 15px;}
.headDiv h1 { font-size: 2rem}
.headDiv h2 { font-size: 1.5rem}

.breadcrumb {text-align: center; justify-content: center; margin-bottom: 0; padding-top: 5px; font-size: 85%}

.ContentBox1 { background-color: var(--DMidDarkColor); color: var(--WhiteColor); padding: 30px 0 15px 0}
.ContentBox1 a {color: var(--WhiteColor);}

.Btn1 {display: inline-block; padding: 8px 15px; margin: 0 auto; border: 1px solid var(--WhiteColor); transition: all 0.5s; cursor: pointer; font-family: itc-fenice, serif; font-weight: 400; font-style: normal; color: var(--lightColor2); text-transform: uppercase; font-size: 1.2rem; line-height: 1.2rem; min-width: 210px}
.Btn1:hover {color: var(--WhiteColor);}
.Btn1 i, .UlBtnList li i {font-style: normal; display: inline-block; position: relative; transition: 0.5s;}
.Btn1 i:after, .UlBtnList li i:after {content: '\00bb'; position: absolute; opacity: 0; top: 0; right: -25px; transition: 0.5s;}
.Btn1:hover i, .UlBtnList li a:hover i {padding-right: 20px; margin-right: -10px}
.Btn1:hover i:after, .UlBtnList li a:hover i:after {opacity: 1; right: 0;}

.UlBtnList {padding: 0; text-align: center; width: 90%; max-width: 505px; margin: 0 auto 2.5rem}
.UlBtnList li{padding: 0; margin: 15px 0; list-style-type: none}
.UlBtnList li a, .UlBtnList li span {display: block; padding: 8px 15px; margin: 0 auto; border: 1px solid var(--WhiteColor); transition: all 0.5s; cursor: pointer; font-family: itc-fenice, serif; font-weight: 400; font-style: normal; color: var(--lightColor2); text-transform: uppercase; font-size: 1.2rem; line-height: 1.2rem; min-width: 210px}

.UlBtnList li span {cursor: default; }
.UlBtnList li a:hover {color: var(--WhiteColor);}

.UlBtnListDark li a, .UlBtnListDark li span {background-color: var(--DarkColor)}

.Btn1-Dark { background-color: var(--DarkColor)}

.ABoveSlideImg {position: absolute; width: 80px; height: 100%; top: 0; right: 70px; background-color: var(--DarkColor)}
.ABoveSlideImg:after { position: absolute; content: ''; width: 30px; top: 0; right: -70px; height: 100%; background-color: var(--DarkColor)}

.ABoveSlideImg2 { left: 70px; right: auto}
.ABoveSlideImg2:after {left: -70px; right: auto;}

.Box-Img-1 img{object-position: 10% 50%;}

.Col2Light { padding: 35px 0}
.Col2Dark {padding: 35px 0; background-color: var(--DarkColor); color:var(--WhiteColor)}
.Col2Dark a {color:var(--WhiteColor)}


.BotForm {background-color: var(--DarkColor); color: var(--WhiteColor);}
.BotForm .form-control {background-color: transparent; color:var(--WhiteColor)}
.BotForm label {text-transform: uppercase}
.Box-Form{ padding: 4% 8%;}
.BotFormRequest {}
.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {opacity: 0.40}
.BotForm .invalid-feedback {}

.CallDiv {font-family: itc-fenice, serif; font-weight: 400; font-style: normal; text-align: center; color: var(--WhiteColor);}
.CallDiv a{; color: var(--WhiteColor);}

.FooterDiv { background-color: var(--DMidDarkColor)}
.BotNavLogo {padding: 25px 0}	

.TopNav { color: #fff; font-size: 1.1rem; font-family: itc-fenice, serif; font-weight: 400; font-style: normal;}
.TopNav a {color: #fff; position: relative;  transition: 0.5s;}
.TopNav a::after {content: ''; border-bottom: 1px solid #000; position: absolute; width: 1%; left: 0; bottom: 0;  transition: 0.7s; opacity: 0}
.TopNav a:hover::after {content: ''; border-bottom: 1px solid #000; position: absolute; width: 100%; left: 0; bottom: 0;  transition: 0.7s;; opacity: 0.40}
ul.TopNav {padding: 0; margin: 0}
ul.TopNav li {list-style-type: none}
ul.TopNav > li {margin-bottom: 15px}
ul.TopNav > li > a {color: var(--DarkColor)}
ul.TopNav ul {padding: 2px 0 2px 12px; margin: 0 0 10px}
ul.TopNav ul > li::marker {content: "- ";}

.botLogoAddPhone {text-align: center; font-family: itc-fenice, serif; font-weight: 700; font-style: normal; color: #fff;}
.botLogoAddPhone a {color: var(--DarkColor)}
.botLogoAddPhone img {max-width: 280px; width: 90%; margin: 0 auto;}


.copyright {background-color: var(--DarkColor); color: var(--WhiteColor); padding: 25px; text-align: center}
.copyright a {color: var(--WhiteColor);}

.disclaimer { padding: 25px; text-align: justify; font-size: 0.9rem}

.BotFootImg img {width: 100%;}

.scroll-top{width:30px;height:30px;position:fixed;bottom:20px;right:20px;display:none;-webkit-appearance:none;-webkit-border-radius:0;background-color:transparent}
.scroll-top svg{fill:rgba(255,255,255,0.5);width:100%;height:100%;object-fit:contain}
.scroll-top:hover svg,.scroll-top:active svg{fill:hsla(209,100%,37%,1.00)}
.scroll-top:not(:disabled):not(.disabled).active,.scroll-top:not(:disabled):not(.disabled):active,.show>.scroll-top.dropdown-toggle{color:hsla(209,100%,37%,1.00)}
.scroll-top:not(:disabled):not(.disabled).active:focus,.scroll-top:not(:disabled):not(.disabled):active:focus,.show>.scroll-top.dropdown-toggle:focus,.scroll-top.focus,.scroll-top:focus{box-shadow:0 0 0 .2rem rgba(34,14,6,0.50)}

.RightAppointment {position: fixed; top: 20%; right: 0; background-color: var(--DarkColor); border: 2px solid rgba(255,255,255,0.17); display: grid; grid-template-columns: 44px 260px; grid-template-rows: auto; gap: 1px; grid-template-areas:"auto"; line-height: normal; align-items: center; right: -260px; z-index: 100}
.RightFormHead { padding: 6px 2px;}
.RightAppointment .FormDivInn {font-size: 13px;}
.RightAppointment .CaptchDiv img {max-width: 30px;}
.RightForm {padding: 12px;}
.RightAppointment, .RightAppointment a {color: #fff}
.RightAppointment .captchaDivImg {display: grid; grid-template-columns: repeat(5, minmax(22px, 19%)); justify-content: center}
.RightAppointment .CaptchDiv img {margin: 3px auto}

.RightAppointment .form-control::placeholder {color: rgba(255,255,255,0.94)}

.btn-app-close, .btn-app-open {cursor: pointer}
.btn-app-close {display: none}
.btn-app-open {}

.TopAppMobi, .TopAppMobi-close { position: fixed; top: 8px; right: 10px; z-index: 80}
.TopAppMobi-close {display: none}
.TopAppMobi img, .TopAppMobi-close img {display: none}

.botLogoAffiliations {display: grid; grid-template-columns: auto auto auto auto auto auto auto; grid-template-rows: auto auto; gap: 8px 18px; grid-auto-flow: row;
  grid-template-areas:"A-logo-bot-1 A-logo-bot-2 A-logo-bot-3 A-logo-bot-4 A-logo-bot-5 A-logo-bot-5 A-logo-bot-6" "A-logo-bot-1 A-logo-bot-7 A-logo-bot-8 A-logo-bot-9 A-logo-bot-11 A-logo-bot-11 A-logo-bot-11"; text-align: center; justify-content: center; align-items: center}
.botLogoAffiliations a {padding: 6px;}
.botLogoAffiliations img {width: auto; margin: 1px auto;}
.A-logo-bot-1 { grid-area: A-logo-bot-1; }
.A-logo-bot-2 { grid-area: A-logo-bot-2; }
.A-logo-bot-3 { grid-area: A-logo-bot-3; }
.A-logo-bot-4 { grid-area: A-logo-bot-4; }
.A-logo-bot-5 { grid-area: A-logo-bot-5; }
.A-logo-bot-6 { grid-area: A-logo-bot-6; }
.A-logo-bot-7 { grid-area: A-logo-bot-7; }
.A-logo-bot-8 { grid-area: A-logo-bot-8; }
.A-logo-bot-9 { grid-area: A-logo-bot-9; }
/*.A-logo-bot-10 { grid-area: A-logo-bot-10; }*/
.A-logo-bot-11 { grid-area: A-logo-bot-11; }

.flexItemsCenter {display: flex; flex-direction: column; align-content: space-around; justify-content: center;}

/****************** Captcha / btn / map ******************/

.btn-new {font-family: itc-fenice, serif; font-weight: 400; font-style: normal; padding: 5px 16px; color: #fff; border: 1px solid var(--WhiteColor)}
.btn-new:hover {color: #fff}

/*for new captcha icons*/
.CaptchDiv{color:#fff;text-align:center;padding:5px 0 15px}
.CaptchDiv a{display:inline-block; display: inline-flex}
.CaptchDiv a:hover,.captchDiv span:hover{background-color:rgba(156,169,192,0.70);color:#fff}
.activeC{background-color:rgba(158,168,187,0.55)}
.CaptchDiv img{max-width:38px;max-height:38px;object-fit:contain;margin:5px}
.CaptchDiv span{font-weight:300;font-style:normal;font-size:1.1rem}
.captchaDivImg a{display:inline-block}
.captchaDivImg{text-align:center;padding-top:5px;}
.CaptchDiv em{font-style:normal}
.refreshBtn img{border:0px solid #fff;width:auto;max-width:none!important;height:auto}
.refreshBtnWd1{width:50px!important}
.refreshBtnWd2{width:37px!important}
.refreshBtnWd3{width:43px!important}
.refreshBtnWd4{width:70px!important}
.captchaDivImg1 {filter: invert(1)}
.captchaDivImg11 {filter: invert(54%) sepia(9%) saturate(1667%) hue-rotate(153deg) brightness(87%) contrast(90%);}
.captchaDivImg2 img{filter: invert(54%) sepia(9%) saturate(1667%) hue-rotate(153deg) brightness(87%) contrast(90%);}

.FormBot span em span, .CaptchDiv span em span {display: inline-block; font-weight: 700 !important}
.CaptchDiv span:first-of-type {font-size: 15px;}

.appointmentForm .CaptchDiv, .ReferringDoctorsDiv .CaptchDiv{ color: #000}
.rowflex {display: grid; grid-template-columns: auto auto; grid-template-rows: auto; gap: 5px 5px; grid-template-areas:". ."; justify-content: center; align-items: center}
.rowflex.row::before {content: none; display: grid}
.rowflex .col-md-6, .rowflex .col-sm-6, .rowflex .col-lg-6 {float: none; width: auto; flex: none; -ms-flex:none; max-width: none}

@media (min-width: 1200px) {
.CaptchDiv img{margin:5px 8px}
}
@media (max-width: 340px) {
.CaptchDiv img{max-width:28px;max-height:28px;margin:3px}
}

/***************** MAP STYLE **************************/
/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {height: 450px;}
/* Optional: Makes the sample page fill the window. */
/* The popup bubble styling. */
.popup-bubble {
  /* Position the bubble centred-above its parent. */
  position: absolute; top: 0; left: 0; transform: translate(-50%, -100%); /* Style the bubble. */
  background-color: white; padding: 15px; border-radius: 5px;  box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.5);}

/* The parent of the bubble. A zero-height div at the top of the tip. */
.popup-bubble-anchor {
  /* Position the div a fixed distance above the tip. */
  position: absolute; width: 100%; bottom: 8px; left: 0;}

/* This element draws the tip. */
.popup-bubble-anchor::after {
  content: ""; position: absolute; top: 0; left: 0; /* Center the tip horizontally. */
  transform: translate(-50%, 0); /* The tip is a https://css-tricks.com/snippets/css/css-triangle/ */
  width: 0; height: 0; /* The tip is 8px high, and 12px wide. */
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid white;
}

/* JavaScript will position this div at the bottom of the popup tip. */
.popup-container {cursor: auto; height: 0; position: absolute; /* The max width of the info window. */  width: 200px;}

.circle {width: 12px; height: 12px; border-radius: 50%; background-color: #000; border: 2px solid #fff; position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%);z-index: 99}

/***********************************************************/

	/****************** MAX ******************/

@media (max-width: 1199px) {
	.botLogoAddPhone { padding-top: 5%}
}

@media (max-width: 991px) { 
	.LogoText {padding-left: 0 !important; font-size: 1.1rem; line-height: 1.2rem}
	.AddTel, .AddAdd { text-align: center}
	.Col2Light.brdBottom .col-lg-6:first-child {margin-bottom: 2.5rem;}
}

@media (max-width: 767px) { 
	.AddTel {font-size: 1.8rem; line-height: 2.1rem; padding-bottom: 8px}
	.AddAdd {font-size: 1.1rem; line-height: 1.2rem;}
	.headDiv h1 {font-size: 1.55rem;}
	.headDiv h2 {font-size: 1.25rem;}
	
	.HeaderDiv {padding-top: 70px;}
	
	.scroll-top{bottom:22px}
	.RightAppointment {display: grid; grid-template-columns: 1fr; margin-right: 00px; top: 80px; right: 0; width: 100%; display: none}
	.RightFormHead {display: none; visibility: hidden}
	
	.TopAppMobi, .TopAppMobi-close {z-index: 999; color: rgba(255,255,255,0.71); border: 1px solid rgba(255,255,255,0.54); padding: 4px 5px 5px; font-size: 0.90rem; line-height: 0.90rem; background-color: var(--DarkColor); width: 90%; max-width: 210px; text-align: center}
	
	.buildArtimg {text-align: center; padding-top: 24px}
	.MobiTopNumber {position: fixed; top: 28px; right: 10px; z-index: 999; color: #fff; font-size: 1.3rem; width: 90%; max-width: 206px; text-align: center; padding: 5px 0}
	.MobiTopNumber a, .MobiTopNumber a:hover{color: #fff}
	
	.MenuIcon,.MenuIcon-Close{top:11px;}
	.backTopHead {background-color:rgba(0,30,54,0.90); position: fixed; top: 0; left: 0; width: 100%; height: 73px; z-index: 10; border-bottom: 2px solid #fff; display: flex; align-items: flex-end;  align-items: end}
	.backTopHeadInn { border-top: 2px solid #fff; padding-top: 0; height: 5px; background-color: transparent; overflow: hidden; width: 100%;}
	
	.botLogoAffiliations {grid-template-columns: auto auto; gap: 20px 20px; 
		grid-template-areas:
			"A-logo-bot-1 A-logo-bot-2"
			"A-logo-bot-1 A-logo-bot-4"
			"A-logo-bot-3 A-logo-bot-5"
			"A-logo-bot-6 A-logo-bot-7"
			"A-logo-bot-8 A-logo-bot-9"
			"A-logo-bot-11 A-logo-bot-11"; }
}
@media (max-width: 600px) {
	.LogoMenu img{max-width:90px}
}
/****************** MIN ******************/

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { 
}
/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
	.TopAppMobi, .TopAppMobi-close {display: none !important; visibility: hidden !important}
	.MobiTopNumber {display: none; visibility: hidden}
	.backTopHead {display: none}
}
/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 
	.AddAdd { padding-left: 3rem !important; border-left: 5px solid var(--lightColor)}
	.AddTel {padding-right: 3rem}
	.Logo {max-width: 280px; margin: 0 auto}
	.Box1 {grid-template-columns: minmax(44%, 48%) minmax(56%, 52%); grid-template-areas:". ."; }
	.menuGrid{grid-template-columns:minmax(90px,110px) 1fr 1fr 1fr; grid-template-areas:"EmptyM Menu1 Menu2 LogoCall";}
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { 
	body {font-size: 1.015rem;}
	.container { padding-left: 5%; padding-right: 5%;}
	.Col2Light { padding: 55px 0 45px 0}
	.Col2Dark {padding: 55px 0 40px 0;}
	.buildArtimg {text-align: right}
	.Logo {width: 90%; max-width: 400px;}	
	.menuGrid{grid-template-columns:minmax(90px,110px) 1fr 1fr 2fr;}
	.LogoMenu img {width: 90%; max-width: 220px;}
	.NavModal .modal-body {padding-top: 1.4rem}
	.LogoCall {font-size: 1.9rem;line-height: 2.0rem}
	.PhoneMenu {font-size: 2.1rem;line-height: 2.1rem}
	.PhoneMenu em:last-child {font-size: 2.4rem; padding: 4% 15px}
	.botLogoAffiliations {gap: 8px 38px;}
}

@media (min-width: 1700px) { 
	.container { padding-left: 2%; padding-right: 2%;}
	.A-logo-bot-8 { margin-right: -80px;}
	.A-logo-bot-9 { margin-right: -150px;}
}