/*---------------------------------------
  Start - CUSTOM PROPERTIES ( VARIABLES )             
-----------------------------------------*/

/* Unitatea rem din CSS înseamnă „root em”. Este o unitate de măsură relativă, relativă la dimensiunea fontului elementului rădăcină. Un rem este egal cu dimensiunea fontului elementului rădăcină. Elementul rădăcină este implicit 16px în multe browsere, deci 1rem este egal cu 16px. */

/* start - aici se poate regla unitatea rem. 16px este valoarea de baza. Daca cresc sau scad se vor modifica toate fonturile din pagina care folosesc font-size in rem */
html {
    font-size: 16px; /* valoarea implicita este 16px */
}

@media only screen and (max-width : 360px) {
/* micsorare text pentru ecrane mai mici de 360px */
html {
    font-size: 14px; /* valoarea implicita este 16px */
}
}
/* final - aici se poate regla unitatea rem. 16px este valoarea de baza. Daca cresc sau scad se vor modifica toate fonturile din pagina care folosesc font-size in rem */




body {
  background-color: white;
  font-family: 'Poppins', sans-serif;; 
}

/*---------------------------------------
  Final - CUSTOM PROPERTIES ( VARIABLES )             
-----------------------------------------*/

/*---------------------------------------
  Start - PMD - RESPONSIVE STYLES    - extras din boostrap 5 si apoi adaptat dupa necesitati            
-----------------------------------------*/

/* start - Dimensiuni implicite ale fonturilor Bootstrap 5.2 - acestea sunt redefinite mai jos in media queies - deci de fapt nu vor avea conditii de utilizare*/
h1 { font-size: 2.5rem; }  /* 40px */
h2 { font-size: 2rem; }    /* 32px */
h3 { font-size: 1.75rem; } /* 28px */
h4 { font-size: 1.5rem; }  /* 24px */
h5 { font-size: 1.25rem; } /* 20px */
h6 { font-size: 1rem; }    /* 16px */
/* final - Dimensiuni implicite ale fonturilor Bootstrap 5.2 - acestea sunt redefinite mai jos in media queies - deci de fapt nu vor avea conditii de utilizare*/



/* start -  (p, a, ul, li, b, small, span) Stiluri implicite Bootstrap 5.2 */
p { 
  font-size: 1rem;  /* 16px */
  margin-bottom: 1rem;
  text-align:justify;  
}

a { 
  color: var(--bs-link-color); 
  text-decoration: none; 
  display: inline-block;  
}

ul { 
  padding-left: 2rem; 
  margin-bottom: 1rem; 
}

li { 
  font-size: 1rem;  /* 16px */ 
}

b, strong { 
  font-weight: bolder; 
}

small { 
  font-size: 0.875rem;  /* 14px */ 
}

span { 
  font-size: inherit; 
}
/* final -  (p, a, ul, li, b, small, span) Stiluri implicite Bootstrap 5.2 */





/* start - Personalizare cu Media Queries pentru toate dimensiunile de ecran */
@media (max-width: 575.98px) {  /* Extra Small (XS) - viewport sizes < 576px */
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.5rem; }
  h4 { font-size: 1.6rem; }
  h5 { font-size: 1.4rem; }
  h6 { font-size: 1.3rem; }
  
  p { font-size: 1.2rem; }      
  li { font-size: 0.875rem; } 
  a { font-size: 0.875rem; }  
}

@media (min-width: 576px) and (max-width: 767.98px) {  /* Small (SM) - viewport sizes => 576px si < 768px */
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.9rem; }
  h3 { font-size: 1.65rem; }
  h4 { font-size: 1.6rem; }
  h5 { font-size: 1.4rem; }
  h6 { font-size: 1.3rem; }
  
  p { font-size: 1.2rem; }      
  li { font-size: 1rem; } 
  a { font-size: 1rem; }   
}

@media (min-width: 768px) and (max-width: 991.98px) {  /* Medium (MD) - viewport sizes => 768px si  < 992px */
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.75rem; }
  h4 { font-size: 1.6rem; }
  h5 { font-size: 1.4rem; }
  h6 { font-size: 1.3rem; }
  
  p { font-size: 1.2rem; }     
  li { font-size: 1.125rem; } 
  a { font-size: 1.125rem; }   
}

@media (min-width: 992px) and (max-width: 1199.98px) {  /* Large (LG) - viewport sizes => 992px si < 1200px */
  h1 { font-size: 3rem; }
  h2 { font-size: 2.5rem; }
  h3 { font-size: 2rem; }
  h4 { font-size: 1.6rem; }
  h5 { font-size: 1.4rem; }
  h6 { font-size: 1.3rem; }
  
  p { font-size: 1.2rem; }          
  li { font-size: 1.25rem; } 
  a { font-size: 1.25rem; }  
}

@media (min-width: 1200px) and (max-width: 1399.98px) {  /* Extra Large (XL)  - viewport sizes => 1200px si < 1400px */
  h1 { font-size: 3.5rem; }
  h2 { font-size: 3rem; }
  h3 { font-size: 2.5rem; }
  h4 { font-size: 1.6rem; }
  h5 { font-size: 1.4rem; }
  h6 { font-size: 1.3rem; }
  
  p { font-size: 1.2rem; }    
  li { font-size: 1.375rem; }
  a { font-size: 1.375rem; }    
}

@media (min-width: 1400px) {  /* Extra Extra Large (XXL)  - viewport sizes => 1400px */
  h1 { font-size: 4rem; }
  h2 { font-size: 3.5rem; }
  h3 { font-size: 3rem; }
  h4 { font-size: 1.6rem; }
  h5 { font-size: 1.4rem; }
  h6 { font-size: 1.3rem; }
  
  p { font-size: 1.2rem; }    
  li { font-size: 1.5rem; } 
  a { font-size: 1.5rem; }  
}
/* final - Personalizare cu Media Queries pentru toate dimensiunile de ecran */


/*---------------------------------------
  Final - PMD - RESPONSIVE STYLES               
-----------------------------------------*/




/*---------------------------------------
  Start - section - in general            
-----------------------------------------*/

.section-padding-testimonial {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left:0px;
  padding-right:0px;  
}

/* start - Section - in general - Personalizare cu Media Queries pentru toate dimensiunile de ecran */
@media (max-width: 575.98px) {  /* Extra Small (XS) - viewport sizes < 576px */
.section-padding {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left:3px;
  padding-right:3px;
}
}

@media (min-width: 576px) and (max-width: 767.98px) {  /* Small (SM) - viewport sizes => 576px si < 768px */
.section-padding {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left:5px;
  padding-right:5px;
}
}

@media (min-width: 768px) and (max-width: 991.98px) {  /* Medium (MD) - viewport sizes => 768px si  < 992px */
.section-padding {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left:10px;
  padding-right:10px;
} 
}

@media (min-width: 992px) and (max-width: 1199.98px) {  /* Large (LG) - viewport sizes => 992px si < 1200px */
.section-padding {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left:20px;
  padding-right:20px;
}
}

@media (min-width: 1200px) and (max-width: 1399.98px) {  /* Extra Large (XL)  - viewport sizes => 1200px si < 1400px */
.section-padding {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left:30px;
  padding-right:30px;
}
}

@media (min-width: 1400px) {  /* Extra Extra Large (XXL)  - viewport sizes => 1400px */
.section-padding {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left:40px;
  padding-right:40px;
}
}
/* final - Section - in general - Personalizare cu Media Queries pentru toate dimensiunile de ecran */


/*---------------------------------------
  Final - section - in general            
-----------------------------------------*/


















/*---------------------------------------
  Start - HEADER              
-----------------------------------------*/

/* start - animatie telefon sunand  */
.animatie-tel {
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes calling-phone {
  0% {
    transform: scale3d(1.2, 1.2, 1.2);
  }

  10%, 20% {
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -4deg);
  }

  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 4deg);
  }

  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -4deg);
  }

  100% {
    transform: scale3d(1.2, 1.2, 1.2);
  }
}

.calling-phone {
  animation-name: calling-phone;
}
/* final - animatie telefon sunand  */

	.site-header {
	background-color: #6495ed; /* Blau - website specific color */
	padding-top: 12px;
	padding-bottom: 12px;
	}
	.header-text a {
		color:black;
		transition: 0.5s;
	}	
	.header-text a:hover{
		color:	darkslategray;	
	}		
	.custom-icon-header {
	color: darkred;
	}

/* start - Header - Personalizare cu Media Queries pentru toate dimensiunile de ecran */
@media (max-width: 575.98px) {  /* Extra Small (XS) - viewport sizes < 576px */
	.header-text a {font-size:1.1rem; font-weight:bold;}	
	.custom-icon-header {font-size:1.1rem;} 
}

@media (min-width: 576px) and (max-width: 767.98px) {  /* Small (SM) - viewport sizes => 576px si < 768px */
	.header-text a {font-size:1.1rem; font-weight:bold;}	
	.custom-icon-header {font-size:1.1rem;} 
}

@media (min-width: 768px) and (max-width: 991.98px) {  /* Medium (MD) - viewport sizes => 768px si  < 992px */
	.header-text a {font-size:1.1rem; font-weight:bold;}	
	.custom-icon-header {font-size:1.1rem;}  
}

@media (min-width: 992px) and (max-width: 1199.98px) {  /* Large (LG) - viewport sizes => 992px si < 1200px */
	.header-text a {font-size:1.2rem; font-weight:normal;}	
	.custom-icon-header {font-size:1.2rem;} 
}

@media (min-width: 1200px) and (max-width: 1399.98px) {  /* Extra Large (XL)  - viewport sizes => 1200px si < 1400px */
	.header-text a {font-size:1.2rem; font-weight:normal;}	
	.custom-icon-header {font-size:1.2rem; }  
}

@media (min-width: 1400px) {  /* Extra Extra Large (XXL)  - viewport sizes => 1400px */
	.header-text a {font-size:1.2rem; font-weight:normal;}	
	.custom-icon-header {font-size:1.2rem; } 
}
/* final - Header - Personalizare cu Media Queries pentru toate dimensiunile de ecran */


/*---------------------------------------
  Final - HEADER              
-----------------------------------------*/


/*---------------------------------------
  Start - Navbar             
-----------------------------------------*/

.termin-navbar-btn-pmd {
  background: 	white;
  /*border: 1px solid white;*/
  border-radius: 100px;
  color: darkblue;
  font-size: 1rem;
  font-weight: 700;
  line-height: normal;
  transition: all 0.7s;
  padding: 10px 20px;
}


.termin-navbar-btn-pmd:hover {
  background: #4169E1; /* royal blue - website specific color */
  color: white;
/*  border: 1px solid white;*/
  border-radius: 100px;  
}

.custom-border-btn {
  background: transparent;
  border: 2px solid #DB3800; /* caramiziu portocaliu - website specific color */ 
  color: #DB3800; /* caramiziu portocaliu - website specific color */ 
}

.navbar-expand-lg .navbar-nav .nav-link.termin-navbar-btn-pmd:hover,
.custom-border-btn:hover {
  background: #4169E1; /* royal blue - website specific color */
  border-color: transparent;
  color: white;
}

.termin-navbar-btn-pmd-bg-white {
  border-color: white;
  color: white;
}

.sticky-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin-top: 51px;
}

.sticky-wrapper.is-sticky .navbar {
  background-color: #6495ed; /* Blau - website specific color */; /* navbar culoare imediat dupa scroll - si la ecrane inguste si la ecrane largi (dupa scroll se seteaza un stil mai jos in RESPONSIVE STYLES) */
  opacity:0.99; /*add pmd*// 
}

/* navbar pe ecral larg inainte de scroll - dupa scroll acesta dispare */
.navbar {
  background: transparent;
  z-index: 99;
 /* nu functioneaza corect cu opacity) c in cazul ecranelor inguste - vezi la sectiunea RESPONSIVE STYLES*/
 background-color: rgb(30,144,255,0.4);	/* dodgerblue cu transparenta */

}

.navbar-brand,
.navbar-brand:hover {
  color: white;
  font-size: 1rem;
  font-weight: 700;
}

/* distributia linkurilor din navbar - distanta dintre linkuri */
.navbar-expand-lg .navbar-nav .nav-link {
  border-radius: 100px;
  margin: 5px;
  padding: 10px 15px;
}

.navbar-nav .nav-link {
  display: inline-block;
  color: white;
  font-size: 1.1rem;
  font-weight: 400;
  position: relative;
  padding-top: 15px;
  padding-bottom: 15px;
  
}

.navbar-nav .nav-link.active, 
.navbar-nav .nav-link:hover {
  color: cyan;
}

.navbar-toggler {
  border: 0;
  padding: 0;
  cursor: pointer;
  margin: 0;
  width: 30px;
  height: 35px;
  outline: none;
}

.navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background: transparent;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before,
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
  transition: top 300ms 50ms ease, -webkit-transform 300ms 350ms ease;
  transition: top 300ms 50ms ease, transform 300ms 350ms ease;
  transition: top 300ms 50ms ease, transform 300ms 350ms ease, -webkit-transform 300ms 350ms ease;
  top: 0;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
  transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
  transform: rotate(-45deg);
}

.navbar-toggler .navbar-toggler-icon {
  background: white;
  transition: background 10ms 300ms ease;
  display: block;
  width: 30px;
  height: 2px;
  position: relative;
}

.navbar-toggler .navbar-toggler-icon:before,
.navbar-toggler .navbar-toggler-icon:after {
  transition: top 300ms 350ms ease, -webkit-transform 300ms 50ms ease;
  transition: top 300ms 350ms ease, transform 300ms 50ms ease;
  transition: top 300ms 350ms ease, transform 300ms 50ms ease, -webkit-transform 300ms 50ms ease;
  position: absolute;
  right: 0;
  left: 0;
  background: white;
  width: 30px;
  height: 2px;
  content: '';
}

.navbar-toggler .navbar-toggler-icon::before {
  top: -8px;
}

.navbar-toggler .navbar-toggler-icon::after {
  top: 8px;
}

.dropdown {
max-width:320px;	
/* background:red;	*/
}

.dropdown-menu {
background:#6495ed; /*Blau - website specific color */
margin-left:50px;	
margin-right:100px;	
min-width:280px;

  /* bara de derulare în meniul derulant - de ex la telefoane in format landscape */
  overflow: hidden;
  overflow-y: auto; /* înseamnă că nu veți vedea bara de derulare în meniul derulant decât dacă atingeți înălțimea maximă */
  max-height: calc(100vh - 220px);

}

.dropdown-item-pmd {
  display: inline-block;
  color: white;
  font-size: 1.1rem;
  font-weight: 400;
  position: relative;
  padding-left: 15px;
  padding-right:20px;
  padding-bottom: 5px;
  padding-top: 5px;
  
width:100px;
  
}


/*  start - de revazut aceasta explicatie - navbar animated dropdown only desktop view */
@media all and (min-width: 992px) {
  .navbar .dropdown-menu-end { right: 0; left: auto; }
  .navbar .nav-item .dropdown-menu { display: block; opacity: 0; visibility: hidden; transition: .7s; margin-top: 0; }
  .navbar .nav-item:hover .nav-link { background-color:	rgb(30,144,255,0.6); color:white!important;}
  .navbar .dropdown-menu.fade-down { top: 85%; transform: rotateX(-90deg); transform-origin: 0% 0%; }
  .navbar .dropdown-menu.fade-up { top: 100%; }
  .navbar .nav-item:hover .dropdown-menu { transition: .7s; opacity: 1; visibility: visible; top: 100%; transform: rotateX(0deg); }
}	
/*  final - navbar animated dropdown only desktop view */

.nav-implantat-link a{
 /* evidentiere text link leistungen principal - Implantologie */
font-weight:700 !important;
font-size:1.2rem !important;
}




/* start - Navbar - Personalizare cu Media Queries pentru toate dimensiunile de ecran */
@media (max-width: 575.98px) {  /* Extra Small (XS) - viewport sizes < 576px */

     /* navbar pt ecrane inguste - dar inainte de scroll */
	.navbar .navbar-nav .nav-item a:hover {
	color:black;
	}
    /* navbar pt ecrane inguste - dar inainte de scroll */
	.navbar .navbar-nav{
    background-color: #6495ed; /* Blau - website specific color */
	opacity:0.95; /* add pmd */
	}  
	.navbar-expand-lg .navbar-nav {
    padding-bottom: 30px;
	}
	.navbar-expand-lg .navbar-nav .nav-link {
	padding: 0;
	}
}

@media (min-width: 576px) and (max-width: 767.98px) {  /* Small (SM) - viewport sizes => 576px si < 768px */

     /* navbar pt ecrane inguste - dar inainte de scroll */
	.navbar .navbar-nav .nav-item a:hover {
	color:black;
	}
    /* navbar pt ecrane inguste - dar inainte de scroll */
	.navbar .navbar-nav{
    background-color: #6495ed; /* Blau - website specific color */
	opacity:0.95; /* add pmd */
	}  
	.navbar-expand-lg .navbar-nav {
    padding-bottom: 30px;
	}
	.navbar-expand-lg .navbar-nav .nav-link {
	padding: 0;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {  /* Medium (MD) - viewport sizes => 768px si  < 992px */

     /* navbar pt ecrane inguste - dar inainte de scroll */
	.navbar .navbar-nav .nav-item a:hover {
	color:black;
	}
    /* navbar pt ecrane inguste - dar inainte de scroll */
	.navbar .navbar-nav{
    background-color: #6495ed; /* Blau - website specific color */
	opacity:0.95; /* add pmd */
	}  
	.navbar-expand-lg .navbar-nav {
    padding-bottom: 30px;
	}
	.navbar-expand-lg .navbar-nav .nav-link {
	padding: 0;
	}
}

@media (min-width: 992px) and (max-width: 1199.98px) {  /* Large (LG) - viewport sizes => 992px si < 1200px */

}

@media (min-width: 1200px) and (max-width: 1399.98px) {  /* Extra Large (XL)  - viewport sizes => 1200px si < 1400px */
 
}

@media (min-width: 1400px) {  /* Extra Extra Large (XXL)  - viewport sizes => 1400px */

}
/* final - Navbar - Personalizare cu Media Queries pentru toate dimensiunile de ecran */


/*---------------------------------------
  Final - Navbar             
-----------------------------------------*/




/*---------------------------------------
  Start - VIDEO Overlay -  start - section-intro-start-page - prima sectiune cu video si cu text si icon-implant peste          
-----------------------------------------*/





.section-overlay {
  background-color: black;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  opacity: 0.3;
}

.section-overlay + .container {
  position: relative;
}


.video-wrap {
  z-index: -100;
}

.custom-video {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* start - stil in plus customizat doar pentru paginile separate: leistungen - cu bg imagine (fara video) */
.intro-for-leistungen-page {
    background: url(../leistungen/img/leistungen-bg-img.webp);
    background-position-x: center; /* e ok - Aliniază centrul imaginii de fundal cu centrul stratului de poziție de fundal - doar pe axa x */
    background-repeat: no-repeat;
    background-size: cover;

}

.section-overlay-leistungen-page {
  background-color: black;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  opacity: 0.4;
}

/* start - stil in plus customizat doar pentru paginile separate: leistungen - cu bg imagine (fara video) */

.section-intro-start-page {
  position: relative;
  overflow: hidden;
  padding-top: 100px;
  height: calc(100vh - 51px); /* initial era -51px */
}

.section-intro-start-page h3 {
color:white;
font-size:3rem !important;
}
.section-intro-start-page h4 {
color:white;
font-size:1.3rem !important;
}

.section-intro-start-page small {
  color: white;
  text-transform: uppercase;
}

.section-intro-start-page .section-overlay {
  z-index: 2;
  opacity: 0.45;
}

.section-intro-start-page .container {
  position: relative;
  z-index: 2;
  height: 100%;
  padding-bottom: 70px; /* modify din 50 - pozitionarea ultimului rand pe verticala*/
}

.section-intro-start-page .container .row {
  height: 100%;
}

/* start - pozitionare text in sectiunea intro - vezi mai jos: Personalizare cu Media Queries */
.top-part-intro {
padding-top: 100px;
}
.down-part-intro {
padding-top: 180px;
}
.top-part-intro-for-leistungen-page {
padding-top: 30px;
}
.down-part-intro-for-leistungen-page {
padding-top: 250px;
}
/* final - pozitionare text in sectiunea intro  - vezi mai jos: Personalizare cu Media Queries */


.link-intro a{
	color:white;
  font-size: 1rem;
  font-weight: 400;
  		transition: 0.7s;
}

.link-intro a:hover{
	color:deepskyblue;
}

	/* start - animatia implant peste video */			
        .implant {
            animation: slide-in 4s ease-in-out ;
        }
   
        
        @keyframes slide-in {
            from {
                transform: translateY(-120px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
	/* final - animatia implant peste video */	

/* start - social link intro page */
.social-link-intro {
		position: relative;
		padding: 0;
		margin: 0;
	}

.social-link-intro li {
		display: inline-block;
		list-style: none;
	}
.social-link-intro li a {
		border: 2px solid #fff;
		border-radius: 4px;
		color: #fff;
		width: 38px;
		height: 38px;
		line-height: 38px;
		text-align: center;
		text-decoration: none;
		-webkit-transition: all 0.4s ease-in-out;
		        transition: all 0.4s ease-in-out;
		margin-right: 20px;
		margin-left: 20px;	
		font-size:1.4rem;		
	}
.social-link-intro li a:hover {
		background: #28a7e9;
		border-color: transparent;
	}
/* final - social link intro page */

/* start - social link subsol page */
.social-link-subsol {
		position: relative;
		padding: 0;
		margin: 0;
	}

.social-link-subsol li {
		display: inline-block;
		list-style: none;
	}
.social-link-subsol li a {
		border: 2px solid #fff;
		border-radius: 4px;
		color: #fff;
		width: 38px;
		height: 38px;
		line-height: 38px;
		text-align: center;
		text-decoration: none;
		-webkit-transition: all 0.4s ease-in-out;
		        transition: all 0.4s ease-in-out;
		margin-right: 20px;
		margin-left: 20px;
		font-size:1.4rem;
		
	}
.social-link-subsol li a:hover {
		background: #28a7e9;
		border-color: transparent;
	}
/* final - social link subsol page */

/* start - Intro - Video Overlay - Personalizare cu Media Queries pentru toate dimensiunile de ecran */

/* Extra Extra Small (XSs) - viewport sizes =>  < 360px */
@media only screen and (max-width : 359.98px) {
	
.link-intro a {font-size: 1.1rem !important;}
.section-intro-start h3 {font-size: 2.2rem !important;}
.section-intro-start h4 {font-size: 1.1rem !important;}

/* start - pozitionare text insectiune intro */
.top-part-intro {padding-top: 80px;}
.down-part-intro {padding-top: 80px;}
.top-part-intro-for-leistungen-page {padding-top: 50px;}
.down-part-intro-for-leistungen-page {padding-top: 120px;}
/* final - pozitionare text insectiune intro */

}


@media (min-width: 360px) and (max-width: 575.98px) {/* Extra Small (XS) - viewport sizes => 360px si  < 575.98px */

.link-intro a {font-size: 1.1rem !important;}
.section-intro-start h3 {font-size: 2.5rem !important;}
.section-intro-start h4 {font-size: 1.2rem !important;}

/* start - pozitionare text insectiune intro */
.top-part-intro {padding-top: 80px;}
.down-part-intro {padding-top: 80px;}
.top-part-intro-for-leistungen-page {padding-top: 50px;}
.down-part-intro-for-leistungen-page {padding-top: 120px;}
/* final - pozitionare text insectiune intro */

}



@media (min-width: 576px) and (max-width: 767.98px) {  /* Small (SM) - viewport sizes => 576px si < 768px */
.link-intro a {font-size: 1.2rem;}
.section-intro-start h3 {font-size: 2.2rem;}
.section-intro-start h4 {font-size: 1.1rem;}

/* start - pozitionare text insectiune intro */
.top-part-intro {padding-top: 80px;}
.down-part-intro {padding-top: 80px;}
.top-part-intro-for-leistungen-page {padding-top: 50px;}
.down-part-intro-for-leistungen-page {padding-top: 100px;}
/* final - pozitionare text insectiune intro */

}

@media (min-width: 768px) and (max-width: 991.98px) {  /* Medium (MD) - viewport sizes => 768px si  < 992px */
.link-intro a {font-size: 1.3rem;}
.section-intro-start h3 {font-size: 2.4rem;}
.section-intro-start h4 {font-size: 1.1rem;}

/* start - pozitionare text insectiune intro */
.top-part-intro {padding-top: 80px;}
.down-part-intro {padding-top: 100px;}
.top-part-intro-for-leistungen-page {padding-top: 50px;}
.down-part-intro-for-leistungen-page {padding-top: 100px;}
/* final - pozitionare text insectiune intro */

}

@media (min-width: 992px) and (max-width: 1199.98px) {  /* Large (LG) - viewport sizes => 992px si < 1200px */
.link-intro a {font-size: 1.2rem;}
.section-intro-start h3 {font-size: 2.8rem;}
.section-intro-start h4 {font-size: 1.2rem;}

/* start - pozitionare text insectiune intro */
.top-part-intro {padding-top: 80px;}
.down-part-intro {padding-top: 195px;}
.top-part-intro-for-leistungen-page {padding-top: 50px;}
.down-part-intro-for-leistungen-page {padding-top: 210px;}
/* final - pozitionare text insectiune intro */

}

@media (min-width: 1200px) and (max-width: 1399.98px) {  /* Extra Large (XL)  - viewport sizes => 1200px si < 1400px */
 .link-intro a{font-size: 1.3rem;}
.section-intro-start h3 {font-size: 3.2rem;}
.section-intro-start h4 {font-size: 1.2rem;}

/* start - pozitionare text insectiune intro */
.top-part-intro {padding-top: 80px;}
.down-part-intro {padding-top: 195px;}
.top-part-intro-for-leistungen-page {padding-top: 50px;}
.down-part-intro-for-leistungen-page {padding-top: 210px;}
/* final - pozitionare text insectiune intro */

}

@media (min-width: 1400px) {  /* Extra Extra Large (XXL)  - viewport sizes => 1400px */
.link-intro a {font-size: 1.4rem;}
.section-intro-start h3 {font-size: 3.6rem;}
.section-intro-start h4 {font-size: 1.3rem;}

/* start - pozitionare text insectiune intro */
.top-part-intro {padding-top: 80px;}
.down-part-intro {padding-top: 195px;}
.top-part-intro-for-leistungen-page {padding-top: 50px;}
.down-part-intro-for-leistungen-page {padding-top: 220px;}
/* final - pozitionare text insectiune intro */
}
/* final - Intro - Video Overlay - Personalizare cu Media Queries pentru toate dimensiunile de ecran */


/*---------------------------------------
  Final - VIDEO Overlay -  start - section-intro-start-page - prima sectiune cu video si cu text si icon-implant peste          
-----------------------------------------*/




/*---------------------------------------
  Start - Über uns - pagina lorena andor   -      
-----------------------------------------*/

		/* start - text around image lorena si andor */
        .wrap-txt-left-img-lorena  {
		float: left;
		padding: 1%;		
        border-radius: 20px 20px 20px 20px;     
        }
		
        .wrap-txt-left-img-andor  {
		float: left; /* doar la @media <768px trece pe dreapta: float: right; */
		padding: 1%;		
        border-radius: 20px 20px 20px 20px;      
        }
		

		/* start - text around image */
        .wrap-txt-left-img-a  {
		float: left;
		padding: 1%;		
        border-radius: 30px 30px 30px 30px;     
        }

        .wrap-txt-right-img-a  {
		float: right;
		padding: 1%;		
        border-radius: 30px 30px 30px 30px;              
        }


		.content-txt-around-img-a img {
		max-width: 100%;
		}
	

/* final - text around image */

/* start - section despre -  Über uns -  - Personalizare cu Media Queries pentru toate dimensiunile de ecran */
@media (max-width: 575.98px) {  /* Extra Small (XS) - viewport sizes < 576px */
.wrap-txt-left-img-lorena  {width: 40%; height: auto; margin-left:20px;}
.wrap-txt-left-img-andor  {width: 40%; height: auto; float:right; margin-right:20px;} /* doar la @media <768px trece pe dreapta: float: right; */
.wrap-txt-left-img-a  {width: 50%; height: auto;}
.wrap-txt-right-img-a  {width: 45%; height: auto;}
}

@media (min-width: 576px) and (max-width: 767.98px) {  /* Small (SM) - viewport sizes => 576px si < 768px */
.wrap-txt-left-img-lorena  {width: 40%; height: auto;}
.wrap-txt-left-img-andor  {width: 40%; height: auto; float:right; margin-right:20px;} /* doar la @media <768px trece pe dreapta: float: right; */
.wrap-txt-left-img-a  {width: 40%; height: auto;}
.wrap-txt-right-img-a  {width: 35%; height: auto;}

}

@media (min-width: 768px) and (max-width: 991.98px) {  /* Medium (MD) - viewport sizes => 768px si  < 992px */
.wrap-txt-left-img-lorena  {width: 30%; height: auto;}
.wrap-txt-left-img-andor  {width: 30%; height: auto;}
.wrap-txt-left-img-a  {width: 30%; height: auto;}
.wrap-txt-right-img-a  {width: 25%; height: auto;}

}

@media (min-width: 992px) and (max-width: 1199.98px) {  /* Large (LG) - viewport sizes => 992px si < 1200px */
.wrap-txt-left-img-lorena  {width: 25%; height: auto;}
.wrap-txt-left-img-andor  {width: 25%; height: auto;}
.wrap-txt-left-img-a  {width: 30%; height: auto;}
.wrap-txt-right-img-a  {width: 25%; height: auto;}

}

@media (min-width: 1200px) and (max-width: 1399.98px) {  /* Extra Large (XL)  - viewport sizes => 1200px si < 1400px */
.wrap-txt-left-img-lorena  {width: 20%; height: auto;}
.wrap-txt-left-img-andor  {width: 20%; height: auto;}
.wrap-txt-left-img-a  {width: 30%; height: auto;}
.wrap-txt-right-img-a  {width: 25%; height: auto;}

}

@media (min-width: 1400px) {  /* Extra Extra Large (XXL)  - viewport sizes => 1400px */
.wrap-txt-left-img-lorena  {width: 20%; height: auto;}
.wrap-txt-left-img-andor  {width: 20%; height: auto;}
.wrap-txt-left-img-a  {width: 30%; height: auto;}
.wrap-txt-right-img-a  {width: 25%; height: auto;}

}
/* final - section despre -  Über uns - Personalizare cu Media Queries pentru toate dimensiunile de ecran */

/*---------------------------------------
  Final - Über uns - pagina lorena andor   -     
-----------------------------------------*/

/*---------------------------------------
  Start - Leistungen - Carousel   -     
-----------------------------------------*/


/* start - leistungen-left-column ----------------------------------------------------- */

.leistungen {
    background: linear-gradient(rgba(0,255,255,0.1), rgba(0, 0, 0, 0.01));
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}


.leistungen-carousel-title h3 {
font-size:2rem;
color:darkblue;
}

.leistungen-carousel-title h4 {
font-size:1.5rem;
color:darkblue;
}

.leistungen .leistungen-item a {
    line-height: 35px;
    color: darkblue;
    transition: 0.6s;
	font-size:1.1rem;		
}

.leistungen .leistungen-item p {
    line-height: 35px;
	color:white; /* add pmd */	
}

.leistungen .leistungen-item a:hover {
    color: 	deepskyblue;
}
/* final - leistungen-left-column ----------------------------------------------------- */



/* start - leistungen-carousel - right-column */


/*** start - servicii ***/


.content-txt-around-img-c img {
	max-width: 100%;
}


.leistungen-carousel .content-txt-around-img-c img {
    width: 50%;
	border-radius: 20px 15px 30px 15px;
    
}


		/* start - text around image in leistungen-carousel */
 .leistungen-carousel .wrap-txt-left-img-c  {
		float: left;
		padding: 1%;		
      /*  border-radius: 30px 30px 30px 30px;     */
        }
		/* start - text around image in leistungen-carousel */
 .leistungen-carousel .wrap-txt-right-img-c  {
		float: right;
		padding: 1%;		
      /*  border-radius: 30px 30px 30px 30px;     */
        }		

.leistungen-carousel .content-txt-around-img-c img {
	max-width: 100%;
}
	









.leistungen .leistungen-group .leistungen-img {
    position: relative;
    overflow: hidden;
    transition: 0.5s;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    z-index: 1;
}

.leistungen .leistungen-group .leistungen-img .leistungen-name {
    background: rgba(0, 0, 0, .3);
	position:absolute;
	width:100%;
	bottom:0;
	left:0;
	z-index: 5;
}

.leistungen .leistungen-group .leistungen-img .leistungen-name p {
    color: white;
	letter-spacing:1px;
	font-size:1rem;	
	margin-bottom:5px;
	text-align:center;
	padding:10px;
}



.leistungen .leistungen-group .leistungen-img img {
    transition: 1s;
}

.leistungen .leistungen-group .leistungen-img:hover img {
    transform: scale(1.1);
}



.leistungen .leistungen-carousel {
    position: relative;
}



/* carousel leistungen - Start */
.leistungen  .leistungen-carousel .leistungen-group {
    position: relative;
    overflow: hidden;
}

.leistungen  .leistungen-carousel .owl-dots {
    margin-top: 40px;
	margin-bottom:40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.leistungen  .leistungen-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    background: var(--bs-light);
    border: 1px solid darkblue;
    border-radius: 10px;
    transition: 0.5s;
}

.leistungen  .leistungen-carousel .owl-dot.active {
    width: 40px;
    background: darkblue;
}



.arrow-leistungen-carousel p {	
	font-size:1.4rem;
	color:darkblue;
	font-weight:500;	
}

@media only screen and (max-width : 360px) {
.arrow-leistungen-carousel p {	
	font-size:1.2rem;
	color:darkblue;	
	font-weight:500;
}

}









.arrow-leistungen-carousel-xs-view {	
visibility: hidden !important;	
}


/* start - logica vizibilitate - arrow-leistungen-carousel - responsive */
@media screen and (max-width: 1399px) {

.arrow-leistungen-carousel-xs-view {	
visibility: visible !important;	
}

}
/* final - logica vizibilitate  - arrow-leistungen-carousel - responsive */




/*** final - leistungen ***/




/*---------------------------------------
  Final - Leistungen - Carousel   -     
-----------------------------------------*/
















/*---------------------------------------
  Start - Implantologie        
-----------------------------------------*/

		/* start - text around image */
        .wrap-txt-left-img-b  {
		float: left;
		padding: 1%;		
      /*  border-radius: 30px 30px 30px 30px;     */
        }

.content-txt-around-img-b img {
	max-width: 100%;
}
	

/* final - text around image */

/* start - section despre -  Implantologie -  - Personalizare cu Media Queries pentru toate dimensiunile de ecran */
@media (max-width: 575.98px) {  /* Extra Small (XS) - viewport sizes < 576px */
.wrap-txt-left-img-b  {width: 100%; height: auto;}
}

@media (min-width: 576px) and (max-width: 767.98px) {  /* Small (SM) - viewport sizes => 576px si < 768px */
.wrap-txt-left-img-b  {width: 100%; height: auto;}
}

@media (min-width: 768px) and (max-width: 991.98px) {  /* Medium (MD) - viewport sizes => 768px si  < 992px */
.wrap-txt-left-img-b  {width: 70%; height: auto;}
}

@media (min-width: 992px) and (max-width: 1199.98px) {  /* Large (LG) - viewport sizes => 992px si < 1200px */
.wrap-txt-left-img-b  {width: 60%; height: auto;}
}

@media (min-width: 1200px) and (max-width: 1399.98px) {  /* Extra Large (XL)  - viewport sizes => 1200px si < 1400px */
.wrap-txt-left-img-b  {width: 50%; height: auto;}
}

@media (min-width: 1400px) {  /* Extra Extra Large (XXL)  - viewport sizes => 1400px */
.wrap-txt-left-img-b  {width: 45%; height: auto;}

}
/* final - section despre -  Implantologie - Personalizare cu Media Queries pentru toate dimensiunile de ecran */

/*---------------------------------------
  Final - Implantologie     
-----------------------------------------*/



/*---------------------------------------
  Start - pasi - Implantologie     
-----------------------------------------*/





 /* Start - picture-in-picture - imagini combinate */           

	.picture-in-picture {
	min-height: 400px;
	position:relative;	
	height:100%;		
	}

	.picture-in-picture .big-img-style{
	border-radius: 15px 20px 30px 10px;
	object-fit: cover; 
	padding: 0 0 20px 50px;	
	position:absolute;
	width:100%;
	height:100%;
		
	}

	.picture-in-picture .small-img-style{
	border-radius: 15px 50px 30px 5px; 
	object-fit: cover;		
	position:absolute;	
	width:40%;
	height:40%;	
	}
 /* final - picture-in-picture - imagini combinate */

/* start- bara verticala in stanga textului*/

.vertical-bar-gray {
    position: relative;
}

.vertical-bar-gray::after {
    content: "";
    width: 2px;
    height: 100%;
    position: absolute;
    top: 1px;
    left: 2px;
    background: 	gainsboro;
}

.vertical-bar-caramiziu {
    position: relative;
}

.vertical-bar-caramiziu::after {
    content: "";
    width: 4px;
    height: 90%;
    position: absolute;
    top: 1px;
    left: 2px;
    background: #DB3800; /* caramiziu portocaliu - website specific color */
}



/* final- bara verticala in stanga textului*/

/* start - section despre -  pasi Implantologie -  - Personalizare cu Media Queries pentru toate dimensiunile de ecran */
@media (max-width: 575.98px) {  /* Extra Small (XS) - viewport sizes < 576px */
.step-title-lg-view {display: none !important;}
.step-title-xs-view {display: block !important;}
}

@media (min-width: 576px) and (max-width: 767.98px) {  /* Small (SM) - viewport sizes => 576px si < 768px */
.step-title-lg-view {display: none !important;}
.step-title-xs-view {display: block !important;}
}

@media (min-width: 768px) and (max-width: 991.98px) {  /* Medium (MD) - viewport sizes => 768px si  < 992px */
.step-title-lg-view {display: none !important;}
.step-title-xs-view {display: block !important;}
}

@media (min-width: 992px) and (max-width: 1199.98px) {  /* Large (LG) - viewport sizes => 992px si < 1200px */
.step-title-lg-view {display: block !important;}
.step-title-xs-view {display: none !important;}
}

@media (min-width: 1200px) and (max-width: 1399.98px) {  /* Extra Large (XL)  - viewport sizes => 1200px si < 1400px */
.step-title-lg-view {display: block !important;}
.step-title-xs-view {display: none !important;}
}

@media (min-width: 1400px) {  /* Extra Extra Large (XXL)  - viewport sizes => 1400px */
.step-title-lg-view {display: block !important;}
.step-title-xs-view {display: none !important;}
}
/* final - section despre -  pasi Implantologie - Personalizare cu Media Queries pentru toate dimensiunile de ecran */

/*---------------------------------------
  Final - pasi - Implantologie     
-----------------------------------------*/


/*---------------------------------------
  Start section: specific-leistungen   - content for leistungen page : aesthetische-zahnmedizin, digitale-zahnheilkunde ... prophylaxe, - fara pagina principala: implantat-ettlingen  
-----------------------------------------*/
/* ordonare h1, h2, p - pentru optimizare SEO */
.specific-leistungen h1 { /* identic cu clasa .sectiune-titlu */
    max-width: auto; /* initial: max-width: 900px; */
    text-align: center;
    margin: 0 auto;
	color:	darkblue;
	margin-bottom:20px;
	letter-spacing:1.4px;
	font-size:1.8rem;		
}

.specific-leistungen h2 { 
	letter-spacing:1px;
	font-size:1.3rem;
	font-weight:700;	
}

.specific-leistungen li {
	list-style: none;
	color:	darkblue;	
	padding-bottom: 10px;
	font-size: 1.2rem;  
	text-align:left;  
}


/*---------------------------------------
  Final section - specific-leistungen   - content for leistungen page : aesthetische-zahnmedizin, digitale-zahnheilkunde ... prophylaxe, - fara pagina principala: implantat-ettlingen  
-----------------------------------------*/




/* =======================================================================================================*/


/*---------------------------------------
  Start - Kontakt        
-----------------------------------------*/

.kontakt-col-a{
	
	text-align:center;
}

.adresa-praxis p {
    color: 	darkblue; /* darkblue - specific color */	
	font-weight: 500;
	font-size: 1.1rem;
	letter-spacing:1px;	
	text-align:center;
}


.adresa-praxis h3{
    color: #DB3800; /* new color: caramiziu portocaliu - website specific color */
	font-weight: 500;
	font-size: 1.3rem;
	letter-spacing:1.1px;
	text-align:center;	
}




.subsol-nr-fax-contact {
    color: white; /* white*/		

	font-size: 1.2rem;
	letter-spacing:1px;
	padding-bottom: 0px;	
	padding-top: 0px;		
}

.nr-tel-contact {
    color: 	darkblue; /* darkblue - specific color - in Safari se pune automat culoarea blue - probabil ca e nr tel cu formare la click ??? */		
	font-weight: 500;
	font-size: 1.1rem;
	letter-spacing:1.1px;
	padding-bottom: 5px;	
	padding-top: 5px;		
}

.nr-tel-contact-xs {
    color: 	darkblue; /* darkblue - specific color */		
	font-weight: 500;
	font-size: 1.2rem;
	letter-spacing:1.1px;
	padding-bottom: 5px;	
	padding-top: 5px;	
}


.email_praxis a {
    color: 	darkblue; /* darkblue - specific color */		
	font-weight: 500;
	font-size: 1.2rem;
	letter-spacing:1.1px;
	padding-bottom: 5px;	
	text-decoration:none;
}


/* linie orizontala de demarcatie intre nr de telefon - */
 .linie_demarcatie_gri{
width: auto;
padding-top:5px;
padding-bottom:5px;
border-bottom: 1px solid #E5E4E2;
margin: auto;
}



/* setari text - anfahrt - */
.anfahrt-text {

    color: 	darkblue; /* darkblue - specific color */		
    padding: 0px 0px;
	font-size: 1.1rem; 
    letter-spacing: 2px;	
}
.anfahrt-text h3 {
    text-align: center;	
    color: 	darkblue; /* darkblue - specific color */	
	font-size: 1.3rem; 		
    font-weight: 500;
}



/* start modal - in general */

/* start - afisare bara scroll la casetele modal */
.modal-dialog,
.modal-content{
    /* 90% of window height */
    height: 91%;
	color:darkblue;
}

/* Necesar pt o mentine colturile rotunde - se foloseste css-ul de mai jos personalizat pentru a inlocui bootstrap css */
.modal-header {
    background-color: #6495ed; /* specific color blau */
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-radius-topleft: 5px;
    -webkit-border-radius-topright: 5px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;	
 }
 
 
 
 /* Necesar pt o mentine colturile rotunde - se foloseste css-ul de mai jos personalizat pentru a inlocui bootstrap css */
.modal-footer {
    background-color: white; /* white */
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-radius-bottomleft: 5px;
    -webkit-border-radius-bottomright: 5px;
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;	
 }

.modal-title {
	color:white;
	font-size:1.3rem;
	letter-spacing:1px;
}

/* start - modal body - ecrane cu latime mai mari de 360 px - corpul este mai putin inalt deoarece textele din corp au mai putine randuri */ 
.modal-body {
    /* 100% = dialog height, 120px = header + footer */
    height: calc(100% - 120px);
    overflow-y: scroll;

	
}

.modal-body a{
font-size:1.1rem;
color:dodgerblue;

	
}


/* final - modal body - ecrane cu latime mai mari de 360 px - corpul este mai putin inalt deoarece textele din corp au mai putine randuri */ 

/* start - modal body - ecrane cu latime mai mica de 360 px - corpul este mai inalt deoarece textele din corp au mai multe randuri */ 
/* start - Custom, iPhone Retina ; screen < 360 px  */ 
@media only screen and (max-width : 360px) {
 /* titlul - program de lucru - Behandlungszeiten */ 
.modal-body {
    /* 100% = dialog height, 100px = header + footer */
    height: calc(100% - 100px);
    overflow-y: scroll;

}

}
/* final - modal body - ecrane cu latime mai mica de 360 px*/ 







/* start - tabelul cu programul de lucru - din modal  */ 
 /* titlul - program de lucru - Behandlungszeiten */ 
.modal-table-orar > tbody > tr > td > h3{
  letter-spacing:1px;
  text-align: center;  
  font-size: 1.2rem;
  color: #DB3800; /* new color: caramiziu portocaliu - website specific color */
  font-weight: 500;
} 

.modal-table-orar > tbody > tr > td > h4{
  letter-spacing:1px;
  text-align: center;  
  font-size: 1rem;
  color: darkblue; /* darkblue - specific color */
  font-weight: 500;
} 

.modal-table-orar > tbody > tr > td > h5{
  letter-spacing:1px;
  text-align: center;  
  font-size: 1rem;
  color: #DB3800; /* new color: caramiziu portocaliu - website specific color */
  font-weight: 500;
}


/* zilele saptamanii */
.modal-table-orar > tbody > tr > th{
  letter-spacing:1px;
  text-align: left;  

  font-size: 1.1rem;
	color: 	darkblue; /* darkblue - specific color */	
  font-weight: 500;
}
/* orele programului de lucru, titlul si nota de jos */ 
.modal-table-orar > tbody > tr > td {
  letter-spacing:1px;
  text-align: center;  

  font-size: 1.1rem;
	color: darkblue; /* darkblue - specific color */		
  font-weight: 500;
}

.font-modal-maps-from-modal-orar {
  letter-spacing:1px;
  text-align: center;  
  font-size: 1.1rem;
	color: 	darkblue; /* darkblue - specific color */	
  font-weight: 500;
  text-decoration:none !important;
}

/* final - tabelul cu programul de lucru din modal*/ 


/* start - tabelul cu programul de lucru din modal - ecrane cu latime mai mica de 360 px*/ 
/* start - Custom, iPhone Retina ; screen < 360 px  */ 
@media only screen and (max-width : 360px) {
 /* titlul - program de lucru - Behandlungszeiten */ 
.modal-table-orar > tbody > tr > td > h3{
  letter-spacing:1px;
  text-align: center;  
 
  font-size: 1.1rem;
  color: #DB3800; /* new color: caramiziu portocaliu - website specific color */
  font-weight: 500;
} 
/* zilele saptamanii */
.modal-table-orar > tbody > tr > th{
  letter-spacing:1px;
  text-align: left;  

  font-size: 0.8rem;
	color: 	darkblue; /* darkblue - specific color */
  font-weight: 500;
}
/* orele programului de lucru, titlul si nota de jos */ 
.modal-table-orar > tbody > tr > td {
  letter-spacing:1px;
  text-align: center;  

  font-size: 0.8rem;
	color: 	darkblue; /* darkblue - specific color */	
  font-weight: 500;
}
.font-modal-maps-from-modal-orar {
  letter-spacing:1px;
  text-align: center;  
  font-size: 0.9rem;
	color: 	darkblue; /* darkblue - specific color */	
  font-weight: 500;
}


}
/* final - tabelul cu programul de lucru din modal - ecrane cu latime mai mica de 360 px*/ 


/* final - tabelul cu programul de lucru - din modal */


/* final modal - in general */







/* start - tabelul cu programul de lucru - de pe webpage - sectiunea kontakt */ 
 /* titlul - program de lucru - Behandlungszeiten */ 
.table-orar > tbody > tr > td > h3{
  letter-spacing:1px;
  text-align: center;  
  font-size: 1.2rem;
  color: #DB3800; /* new color: caramiziu portocaliu - website specific color */
  font-weight: 500;
} 

.table-orar > tbody > tr > td > h4{
  letter-spacing:1px;
  text-align: center;  
  font-size: 1rem;
  color: darkblue; /* darkblue - specific color */
  font-weight: 500;
} 

.table-orar > tbody > tr > td > h5{
  letter-spacing:1px;
 text-align: justify; 
  font-size: 1.1rem;
  color: #DB3800; /* new color: caramiziu portocaliu - website specific color */
  font-weight: 500;
}


/* zilele saptamanii */
.table-orar > tbody > tr > th{
  letter-spacing:1px;
  text-align: left;  

  font-size: 1.1rem;
	color: 	darkblue; /* darkblue - specific color */	
  font-weight: 500;
}
/* orele programului de lucru, titlul si nota de jos */ 
.table-orar > tbody > tr > td {
  letter-spacing:1px;
  text-align: center;  

  font-size: 1.1rem;
	color: darkblue; /* darkblue - specific color */		
  font-weight: 500;
}


/* start - Spun explicit browserului cum să împartă spațiul - Asta va ține de ex: "08:00 – 13:00" pe un singur rând si in cazul ecranelor de telefon*/ 
.table-orar td,
.table-orar th {
  padding: 4px 6px;
}


.table-orar {
  table-layout: fixed;
  width: 100%;
}

.table-orar th {
  width: 30%;

}

.table-orar td {
  width: 35%;
  /* white-space: nowrap; */
}
/* start - Spun explicit browserului cum să împartă spațiul - Asta va ține 08:00 – 13:00 pe un singur rând si in cazul ecranelor de telefon*/ 


/* final - tabelul cu programul de lucru de pe webpage */ 


/* start - tabelul cu programul de lucru - ecrane cu latime mai mica de 360 px*/ 
/* start - Custom, iPhone Retina ; screen < 360 px  */ 
@media only screen and (max-width : 360px) {
 /* titlul - program de lucru - Behandlungszeiten */ 
.table-orar > tbody > tr > td > h3{
  letter-spacing:1px;
  text-align: center;  
 
  font-size: 1.1rem;
  color: #DB3800; /* new color: caramiziu portocaliu - website specific color */
  font-weight: 500;
} 
/* zilele saptamanii */
.table-orar > tbody > tr > th{
  letter-spacing:1px;
  text-align: left;  

  font-size: 0.8rem;
	color: 	darkblue; /* darkblue - specific color */
  font-weight: 500;
}
/* orele programului de lucru, titlul si nota de jos */ 
.table-orar > tbody > tr > td {
  letter-spacing:1px;
  text-align: center;  

  font-size: 0.7rem;
	color: 	darkblue; /* darkblue - specific color */	
  font-weight: 500;
}



}
/* final - tabelul cu programul de lucru de pe webpage - ecrane cu latime mai mica de 360 px*/ 


/* final - tabelul cu programul de lucru - de pe webpage - sectiunea kontakt  */














/* start - image doar pentru card lorena si andor =============================================================================*/*/

    .img-firma-strasse {/* aspectul cardului - per total */
        width:50%;
        height: 50%; /* pmd - important pentru mentinerea corecta a inaltimmi cardului */	
        position: relative;
        border-radius: 20px 5px 5px 5px;
        text-align: left;

        -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
        -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
        -o-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
        box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3); 
		
		background-color: rgb(240,248,255,0.6)	/* aliceblue	 cu transparenta */				
    }

        .img-firma-strasse .img-firma-strasse-doi {/* aspectul cutiei in care se afiseaza imaginii din card */
            position: relative;
            margin: auto;
            overflow: hidden;
            border-radius: 20px 5px 30px 10px;
            height: auto;				
	
        }

        .img-firma-strasse .img-firma-strasse-doi img {/* aspectul imaginii din card */
           height:100%;
		   width:100%;
            border-radius: 20px 5px 30px 10px;
            
            -webkit-transition: all 3s;
            -webkit-transition: all 3s;
            -o-transition: all 3s;
            transition: all 3s;
			
		
        }

        .img-firma-strasse .img-firma-strasse-doi:hover img {/* animatia imaginii la mouse over */
            -webkit-transform: scale(1.1);
            -webkit-transform: scale(1.1);
            -o-transform: scale(1.1);
            transform: scale(1.1);
		
        } 
		
			



	.custom-icon-kontakt {
	color: #DB3800; /* new color: caramiziu portocaliu - website specific color */
	}


/* start - Kontakt - Personalizare cu Media Queries pentru toate dimensiunile de ecran */
@media (max-width: 575.98px) {  /* Extra Small (XS) - viewport sizes < 576px */
	.custom-icon-kontakt {font-size:1.4rem;} 
}

@media (min-width: 576px) and (max-width: 767.98px) {  /* Small (SM) - viewport sizes => 576px si < 768px */
	.custom-icon-kontakt {font-size:1.4rem;} 
}

@media (min-width: 768px) and (max-width: 991.98px) {  /* Medium (MD) - viewport sizes => 768px si  < 992px */
	.custom-icon-kontakt {font-size:1.4rem;} 
	
}

@media (min-width: 992px) and (max-width: 1199.98px) {  /* Large (LG) - viewport sizes => 992px si < 1200px */	
	.custom-icon-kontakt {font-size:1.5rem;} 
}

@media (min-width: 1200px) and (max-width: 1399.98px) {  /* Extra Large (XL)  - viewport sizes => 1200px si < 1400px */	
	.custom-icon-kontakt {font-size:1.5rem; }  
}

@media (min-width: 1400px) {  /* Extra Extra Large (XXL)  - viewport sizes => 1400px */	
	.custom-icon-kontakt {font-size:1.5rem; } 
}
/* final - Kontakt - Personalizare cu Media Queries pentru toate dimensiunile de ecran */





/*---------------------------------------
  Final - Kontakt        
-----------------------------------------*/

/* =======================================================================================================*/

/*---------------------------------------
  Start - Modal - accesorii       
-----------------------------------------*/


 /*start - butonul close din modal header --------------------------*/
  button.close {
        background: dodgerblue;
		border-radius: 10px;
        border: 0 none !important;
        color: #fff7cc;
        display: inline-block;
        float: right;
        font-size: 34px;
        height: 40px;
        line-height: 1;
        margin: 0px 1px;
        opacity: 1;
        text-align: center;
        text-shadow: none;
        -webkit-transition: background 0.2s ease-in-out;
        transition: background 0.2s ease-in-out;
        vertical-align: top;
        width: 46px;
	
		transition: background 600ms ease-in-out;/* tranzitia hover si la revenire hover */		
    }
	
  button.close:hover {
        background: red;
    }	
	
 /*final - butonul close din modal header --------------------------*/


/* start - buton general "open" modal - google maps, termine, etc */
.btn-modal-open { /* corpul butonului si culoarea textului interior */
  box-sizing: border-box;
  -webkit-appearance: none;
     -webkit-appearance: none;
          appearance: none;		  
		  			 	  
  background-color: #6495ed; /* Blau - website specific color */
  border: 1px solid #e74c3c; /* ascunde un border mostenit in partea de jos a btn - trebuie pastrat aici */
  border-radius: 0.5rem;
  padding: 6px 10px; /* padding intre text si marginea btn */
  text-decoration: none;
  color: #fff; /* culoarea textului si a iconului play*/
  font-size:1.1rem;	
  letter-spacing:2px;  
   margin:0 auto 0px; /* centrarea butonului */
   border-color: #fff;
   
	/*  box-shadow: 0 0 0px 0 #fff inset; /* varianta 1 de animatie - culoarea gradientului de animatie hover */
	box-shadow:  #fff inset; /* varianta 2 de animatie  - culoarea gradientului de animatie hover */
  transition: box-shadow 600ms ease-in-out;/* tranzitia hover si la revenire hover */

margin-top:-15px;  /* corectie de pastrare a distantelor egale fata de linile de demarcatie pe verticala - se ridica putin butonul */
}

.btn-modal-open:hover {
  box-shadow: 0 0 40px 40px deepskyblue inset;/* tranzitia hover la culoarea de fond a btn alocata pt "open" - nuanta de bleu */
   color: #fff; /* culoarea textului la hover*/ 
   
}
/* final - buton general "open" modal - google maps, termine, etc */


/* start - butoane in subsolul modal */
/* start - buton "refuse" in subsolul modal */
.btn-modal-refuse { /* corpul butonului si culoarea textului interior */
  box-sizing: border-box;
  -webkit-appearance: none;
     -webkit-appearance: none;
          appearance: none;
		  	  		  
  background-color: #6495ed; /* Blau - website specific color */
  border: 1px solid #e74c3c; /* ascunde un border mostenit in partea de jos a btn - trebuie pastrat aici */
  border-radius: 0.5rem;
  padding: 6px 10px; /* padding intre text si marginea btn */
  text-decoration: none;
  color: #fff; /* culoarea textului si a iconului play*/
  font-size:1.1rem;	
  letter-spacing:2px;  
   margin:0 auto 0px; /* centrarea butonului */
   border-color: #fff;
   
	/*  box-shadow: 0 0 0px 0 #fff inset; /* varianta 1 de animatie - culoarea gradientului de animatie hover */
	box-shadow:  #fff inset; /* varianta 2 de animatie  - culoarea gradientului de animatie hover */
  transition: box-shadow 600ms ease-in-out;/* tranzitia hover si la revenire hover */	
}

.btn-modal-refuse:hover {
  box-shadow: 0 0 40px 40px orangered inset;/* tranzitia hover lo culoarea de fond a btn alocata pt "refuse" - nuanta de red */
   color: #fff; /* culoarea textului la hover*/ 
   
}
/* final - buton "refuse" in subsolul modal */

/* start - buton "accept" in subsolul modal */
.btn-modal-accept { /* corpul butonului si culoarea textului interior */
  box-sizing: border-box;
  -webkit-appearance: none;
     -webkit-appearance: none;
          appearance: none;		  
		  			 	  
  background-color: #6495ed; /* Blau - website specific color */
  border: 1px solid #e74c3c; /* ascunde un border mostenit in partea de jos a btn - trebuie pastrat aici */
  border-radius: 0.5em;
  padding: 6px 10px; /* padding intre text si marginea btn */
  text-decoration: none;
  color: #fff; /* culoarea textului si a iconului play*/
  font-size:1.1rem;	
  letter-spacing:2px;  
   margin:0 auto 0px; /* centrarea butonului */
   border-color: #fff;
   
	/*  box-shadow: 0 0 0px 0 #fff inset; /* varianta 1 de animatie - culoarea gradientului de animatie hover */
	box-shadow:  #fff inset; /* varianta 2 de animatie  - culoarea gradientului de animatie hover */
  transition: box-shadow 600ms ease-in-out;/* tranzitia hover si la revenire hover */	
}

.btn-modal-accept:hover {
  box-shadow: 0 0 40px 40px limegreen inset;/* tranzitia hover lo culoarea de fond a btn alocata pt "accept" - nuanta de green */
   color: #fff; /* culoarea textului la hover*/ 
   
}
/* final - buton "accept" in subsolul modal */


/* start - Add Space Between Buttons in HTML */
.space-between-buttons {
  width: 14px;
  height: auto;
  display: inline-block;
}

/*---------------------------------------
  Start - Final - accesorii       
-----------------------------------------*/


/* ===================================================================================================================================================================== */
/*--------------------------------------------------------------------------------------------------------------------------------------------------
    7. start sectiunea: Team
---------------------------------------------------------------------------------------------------------------------------------------------------*/

/* start - style general valabil - pentru diferite dimensiuni de vizualizare se customizeaza mai jos in @media only screen */



/* start restrangere imagine de tip a - cu maxim 3 randuri de text pt descrierea functiei/meseriei */
.team-img-tip-a {
  position: relative;
  overflow: hidden;
  width: 100%;
  color: #141414;
  text-align: center;
  border-radius: 20px 5px 5px 5px; 
}
.team-img-tip-a * { /*  *înseamnă TOATE.  " * " Înseamnă să aplici acele stiluri tuturor elementelor.  - animatia de ridicare a scrisului peste imagine*/
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 1.4s ease;
  transition: all 1.4s ease; 
}
.team-img-tip-a img {
  max-width: 100%;
  vertical-align: top; 

}
.team-img-tip-a figcaption {
  position: absolute;
  width: 100%;
  opacity:0.8;
  background-color: #ffffff;
  padding: 15px 2px 65px; /* top padding is 15px - right and left paddings are 2px - bottom padding is 65px */
}
.team-img-tip-a figcaption:before {
  position: absolute;
  content: '';
  z-index: 2;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 10px;
  background-image: -webkit-linear-gradient(top, transparent 0%, #ffffff 100%);
  background-image: linear-gradient(to bottom, transparent 0%, #ffffff 100%);
}

/* textul pentru nume - font-sieze este cu media-queries mai jos*/
.team-img-tip-a h3 { 
	font-weight: 500;
	text-align: center;
	color: darkblue;
	margin-top:-5px;
	margin-bottom:0px;
	letter-spacing:1.1px;
}

/* textul pentru functie/meserie */
.team-img-tip-a p {
	letter-spacing: 1.1px;
	color: darkblue;
	margin-top:10px;
	margin-bottom:5px;
	text-align:center;
}


/* final restrangere imagine de tip a - cu maxim 3 randuri de text pt descrierea functiei/meseriei */



/* start restrangere imagine de tip b - cu maxim 2 randuri de text pt descrierea functiei/meseriei */
.team-img-tip-b {
  position: relative;
  overflow: hidden;
  width: 100%;
  color: #141414;
  text-align: center;
  border-radius: 20px 5px 5px 5px; 
}
.team-img-tip-b * { /*  *înseamnă TOATE.  " * " Înseamnă să aplici acele stiluri tuturor elementelor.  - animatia de ridicare a scrisului peste imagine*/
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 1.4s ease;
  transition: all 1.4s ease; 
}
.team-img-tip-b img {
  max-width: 100%;
  vertical-align: top; 

}
.team-img-tip-b figcaption {
  position: absolute;
  width: 100%;
  opacity:0.8;
  background-color: #ffffff;
  padding: 15px 2px 65px; /* top padding is 15px - right and left paddings are 2px - bottom padding is 65px */
}
.team-img-tip-b figcaption:before {
  position: absolute;
  content: '';
  z-index: 2;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 10px;
  background-image: -webkit-linear-gradient(top, transparent 0%, #ffffff 100%);
  background-image: linear-gradient(to bottom, transparent 0%, #ffffff 100%);
}

/* textul pentru nume - font-sieze este cu media-queries mai jos*/
.team-img-tip-b h3 { 
	font-weight: 500;
	text-align: center;
	color: darkblue;
	margin-top:-5px;
	margin-bottom:0px;
	letter-spacing:1.1px;
}

/* textul pentru functie/meserie */
.team-img-tip-b p {
	letter-spacing: 1.1px;
	color: darkblue;
	margin-top:10px;
	margin-bottom:5px;
	text-align:center;
}


/* final restrangere imagine de tip b - cu maxim 2 randuri de text pt descrierea functiei/meseriei */










/* start - section Team - Personalizare cu Media Queries pentru toate dimensiunile de ecran */

/* primele doua intervale modificate si adaugate de pmd */


@media (max-width: 359.98px) {  /* Extra Extra Small (XSS - denumire pmd) - viewport sizes < 360px */

.team-img-tip-a:hover figcaption, /* trebuie ambele hover */
.team-img-tip-a.hover figcaption {top: calc(65%);}/* cat mai ramane din imagine ca sa se vada toate randurile ce contin functia/meseria persoanei */

.team-img-tip-a figcaption {top: calc(85%); }

/* textul pentru nume */
.team-img-tip-a h3 { 
  font-size: 0.8rem;
  line-height: 0.4rem;
}
/* textul pentru functie/meserie */
.team-img-tip-a p {
  font-size: 0.4rem;
  line-height: 0.5rem;
}

.team-img-tip-b:hover figcaption, /* trebuie ambele hover */
.team-img-tip-b.hover figcaption {top: calc(75%);}/* cat mai ramane din imagine ca sa se vada toate randurile ce contin functia/meseria persoanei */

.team-img-tip-b figcaption {top: calc(85%); }

/* textul pentru nume */
.team-img-tip-b h3 { 
  font-size: 0.8rem;
  line-height: 0.4rem;
}
/* textul pentru functie/meserie */
.team-img-tip-b p {
  font-size: 0.4rem;
  line-height: 0.5rem;
}



}


@media (min-width: 360px) and (max-width: 575.98px) {/* Extra Small (XS) - viewport sizes => 360px si  < 575.98px */

.team-img-tip-a:hover figcaption, /* trebuie ambele hover */
.team-img-tip-a.hover figcaption {top: calc(65%);}/* cat mai ramane din imagine ca sa se vada toate randurile ce contin functia/meseria persoanei */

.team-img-tip-a figcaption {top: calc(87%); }

/* textul pentru nume */
.team-img-tip-a h3 { 
  font-size: 0.9rem;
  line-height: 0.7rem;
}
/* textul pentru functie/meserie */
.team-img-tip-a p {
  font-size: 0.5rem;
  line-height: 0.6rem;
}

.team-img-tip-b:hover figcaption, /* trebuie ambele hover */
.team-img-tip-b.hover figcaption {top: calc(75%);}/* cat mai ramane din imagine ca sa se vada toate randurile ce contin functia/meseria persoanei */

.team-img-tip-b figcaption {top: calc(87%); }

/* textul pentru nume */
.team-img-tip-b h3 { 
  font-size: 0.9rem;
  line-height: 0.7rem;
}
/* textul pentru functie/meserie */
.team-img-tip-b p {
  font-size: 0.5rem;
  line-height: 0.6rem;
}

}




@media (min-width: 576px) and (max-width: 767.98px) {/* Small (SM) - viewport sizes => 576px si  < 767.98px */

.team-img-tip-a:hover figcaption, /* trebuie ambele hover */
.team-img-tip-a.hover figcaption {top: calc(65%);}/* cat mai ramane din imagine ca sa se vada toate randurile ce contin functia/meseria persoanei */

.team-img-tip-a figcaption {top: calc(88%); }

/* textul pentru nume */
.team-img-tip-a h3 { 
  font-size: 1.2rem;
  line-height: 1.2rem;
}
/* textul pentru functie/meserie */
.team-img-tip-a p {
  font-size: 0.8rem;
  line-height: 1rem;
}

.team-img-tip-b:hover figcaption, /* trebuie ambele hover */
.team-img-tip-b.hover figcaption {top: calc(75%);}/* cat mai ramane din imagine ca sa se vada toate randurile ce contin functia/meseria persoanei */

.team-img-tip-b figcaption {top: calc(88%); }

/* textul pentru nume */
.team-img-tip-b h3 { 
  font-size: 1.2rem;
  line-height: 1.2rem;
}
/* textul pentru functie/meserie */
.team-img-tip-b p {
  font-size: 0.8rem;
  line-height: 1rem;
}


}




@media (min-width: 768px) and (max-width: 991.98px) {  /* Medium (MD) - viewport sizes => 768px si  < 991.98px */

.team-img-tip-a:hover figcaption, /* trebuie ambele hover */
.team-img-tip-a.hover figcaption {top: calc(65%);}/* cat mai ramane din imagine ca sa se vada toate randurile ce contin functia/meseria persoanei */

.team-img-tip-a figcaption {top: calc(90%); }

/* textul pentru nume */
.team-img-tip-a h3 { 
  font-size: 1.6rem;
  line-height: 1.6rem;
}
/* textul pentru functie/meserie */
.team-img-tip-a p {
  font-size: 1.2rem;
  line-height: 1.4rem;
}

.team-img-tip-b:hover figcaption, /* trebuie ambele hover */
.team-img-tip-b.hover figcaption {top: calc(75%);}/* cat mai ramane din imagine ca sa se vada toate randurile ce contin functia/meseria persoanei */

.team-img-tip-b figcaption {top: calc(90%); }

/* textul pentru nume */
.team-img-tip-b h3 { 
  font-size: 1.6rem;
  line-height: 1.6rem;
}
/* textul pentru functie/meserie */
.team-img-tip-b p {
  font-size: 1.2rem;
  line-height: 1.4rem;
}

}

@media (min-width: 992px) and (max-width: 1199.98px) {  /* Large (LG) - viewport sizes => 992px si < 1199.98px */

.team-img-tip-a:hover figcaption, /* trebuie ambele hover */
.team-img-tip-a.hover figcaption {top: calc(65%);}/* cat mai ramane din imagine ca sa se vada toate randurile ce contin functia/meseria persoanei */

.team-img-tip-a figcaption {top: calc(89%); }

/* textul pentru nume */
.team-img-tip-a h3 { 
  font-size: 1.1rem;
  line-height: 0.6rem;
}
/* textul pentru functie/meserie */
.team-img-tip-a p {
  font-size: 0.7rem;
  line-height: 0.8rem;
}

.team-img-tip-b:hover figcaption, /* trebuie ambele hover */
.team-img-tip-b.hover figcaption {top: calc(75%);}/* cat mai ramane din imagine ca sa se vada toate randurile ce contin functia/meseria persoanei */

.team-img-tip-b figcaption {top: calc(89%); }

/* textul pentru nume */
.team-img-tip-b h3 { 
  font-size: 1.1rem;
  line-height: 0.6rem;
}
/* textul pentru functie/meserie */
.team-img-tip-b p {
  font-size: 0.7rem;
  line-height: 0.8rem;
}

}

@media (min-width: 1200px) and (max-width: 1399.98px) {  /* Extra Large (XL)  - viewport sizes => 1200px si < 1399.98px */

.team-img-tip-a:hover figcaption, /* trebuie ambele hover */
.team-img-tip-a.hover figcaption {top: calc(65%);}/* cat mai ramane din imagine ca sa se vada toate randurile ce contin functia/meseria persoanei */

.team-img-tip-a figcaption {top: calc(87%); }

/* textul pentru nume */
.team-img-tip-a h3 { 
  font-size: 1.2rem;
  line-height: 1.2rem;
}
/* textul pentru functie/meserie */
.team-img-tip-a p {
  font-size: 0.8rem;
  line-height: 1rem;
}

.team-img-tip-b:hover figcaption, /* trebuie ambele hover */
.team-img-tip-b.hover figcaption {top: calc(75%);}/* cat mai ramane din imagine ca sa se vada toate randurile ce contin functia/meseria persoanei */

.team-img-tip-b figcaption {top: calc(87%); }

/* textul pentru nume */
.team-img-tip-b h3 { 
  font-size: 1.2rem;
  line-height: 1.2rem;
}
/* textul pentru functie/meserie */
.team-img-tip-b p {
  font-size: 0.8rem;
  line-height: 1rem;
}

}

@media (min-width: 1400px) {  /* Extra Extra Large (XXL)  - viewport sizes => 1400px */

.team-img-tip-a:hover figcaption, /* trebuie ambele hover */
.team-img-tip-a.hover figcaption {top: calc(65%);}/* cat mai ramane din imagine ca sa se vada toate randurile ce contin functia/meseria persoanei */

.team-img-tip-a figcaption {top: calc(91%); } /* cat este de sus fondul pentru text */

/* textul pentru nume */
.team-img-tip-a h3 { 
  font-size: 1.4rem;
  line-height: 1.2rem;
}
/* textul pentru functie/meserie */
.team-img-tip-a p {
  font-size: 1.1rem;
  line-height: 1.3rem;
}

.team-img-tip-b:hover figcaption, /* trebuie ambele hover */
.team-img-tip-b.hover figcaption {top: calc(75%);}/* cat mai ramane din imagine ca sa se vada toate randurile ce contin functia/meseria persoanei */

.team-img-tip-b figcaption {top: calc(91%); } /* cat este de sus fondul pentru text */

/* textul pentru nume */
.team-img-tip-b h3 { 
  font-size: 1.4rem;
  line-height: 1.2rem;
}
/* textul pentru functie/meserie */
.team-img-tip-b p {
  font-size: 1.1rem;
  line-height: 1.3rem;
}




}
/* final - section Team - Personalizare cu Media Queries pentru toate dimensiunile de ecran */
















/*--------------------------------------------------------------------------------------------------------------------------------------------------
    7. final sectiunea: Team
---------------------------------------------------------------------------------------------------------------------------------------------------*/
/* ========================================================================================================================================================================= */

























/* =======================================================================================================*/




/*** start - Praxis ***/
.praxis .praxis-group .praxis-img {
    position: relative;
    overflow: hidden;
    transition: 0.5s;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    z-index: 1;
}

.praxis .praxis-group .praxis-img .praxis-name {
    background: rgba(0, 0, 0, .3);
	position:absolute;
	width:100%;
	bottom:0;
	left:0;
	z-index: 5;
}

.praxis .praxis-group .praxis-img .praxis-name p {
    color: white;
	letter-spacing:1px;
	font-size:1.1rem;	
	margin-bottom:5px;
	text-align:center;
	padding:10px;
}



.praxis .praxis-group .praxis-img img {
    transition: 1s;
}

.praxis .praxis-group .praxis-img:hover img {
    transform: scale(1.1);
}



.praxis .praxis-carousel {
    position: relative;
}



/* carousel Praxis - Start */
.praxis  .praxis-carousel .praxis-group {
    position: relative;
    overflow: hidden;
}

.praxis  .praxis-carousel .owl-dots {
    margin-top: 40px;
	margin-bottom:40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.praxis  .praxis-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    background: var(--bs-light);
    border: 1px solid darkblue;
    border-radius: 10px;
    transition: 0.5s;
}

.praxis  .praxis-carousel .owl-dot.active {
    width: 40px;
    background: darkblue;
}
/*** final - Praxis ***/


















/*---------------------------------------
  Start - TYPOGRAPHY               
-----------------------------------------*/



.text-align-center {
		text-align: center;		
}

	/* start - add pmd */
	.text-col-gray {
		color:darkslategray;
	}
	
	.text-col-yellow {
		color:yellow;
	}	

	.text-col-beige {
		color:beige;
	}



	.text-col-cyan {
		color:cyan;
	}
	
	.text-col-dodgerblue {
		color:dodgerblue;
	}
	

	.text-col-red {
		color:red;
	}	
	
	
	.text-col-caramiziu {
		color:#DB3800; 
	}
	
	.text-col-darkblue {
		  color: darkblue;
	}
	
	.letter-spacing-pmd-a {
	letter-spacing:1px;
	}
	.letter-spacing-pmd-b {
	letter-spacing:1.4px;
	}	
	/* final - add pmd */




.link-fx-1 {
  color: white;
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 6px;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -webkit-osx-font-smoothing: grayscale;
}

.link-fx-1:hover {
  color: green;
}

.link-fx-1:hover::before {
  transform: translateX(17px) scaleX(0);
  transition: transform .2s;
}

.link-fx-1:hover .icon circle {
  stroke-dashoffset: 200;
  transition: stroke-dashoffset .2s .1s;
}

.link-fx-1:hover .icon line {
  transform: rotate(-180deg);
}

.link-fx-1:hover .icon line:last-child {
  transform: rotate(180deg);
}

.link-fx-1::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform-origin: right center;
  transition: transform .2s .1s;
}

.link-fx-1 .icon {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translateX(100%) rotate(90deg);
  font-size: 32px;
}

/* nefolosit pentru moment*/
.icon {
  --size: 1.1rem;
  height: var(--size);
  width: var(--size);
  display: inline-block;
  color: inherit;
  fill: currentColor;
  line-height: 1;
  flex-shrink: 0;
  max-width: initial;
}

/* add pmd */
.icon-paragraf {
  font-size:1.1rem;
  display: inline-block;
  color: darkblue;
}




.link-fx-1 .icon circle {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset .2s;
}

.link-fx-1 .icon line {
  transition: transform .4s;
  transform-origin: 13px 15px;
}

.link-fx-1 .icon line:last-child {
  transform-origin: 19px 15px;
}



/*---------------------------------------
  Final - TYPOGRAPHY               
-----------------------------------------*/





.shape-curves-delimitator-jos-lg-view {	
margin-top:-200px;	
fill:dodgerblue;
visibility: visible !important;
transform: rotate(180deg);
	
}

.shape-curves-delimitator-jos-xs-view {	
margin-top:-40px;	
fill:dodgerblue;
visibility: hidden !important;	
transform: rotate(180deg);
height:60%;	
}

/* pentru moment nu este folosit */
.shape-curves-delimitator-sus {
margin-top:-20px;
transform: rotate(180deg);	
fill:dodgerblue;	
}
/* final - pmd - svg shape - delimitator */



/* start - logica vizibilitate - svg responsive */
@media screen and (max-width: 991px) {

.shape-curves-delimitator-jos-lg-view {	
margin-top:-40px;	
fill:dodgerblue;
visibility: hidden !important;	
}

.shape-curves-delimitator-jos-xs-view {	
margin-top:5px;	
margin-bottom:30px;
fill:dodgerblue;
visibility: visible !important;	
}


}
/* final - logica vizibilitate  - svg responsive */



/*---------------------------------------
  final - picture-in-picture - imagini combinate            
-----------------------------------------*/








/*--------------------------------------------------------------
# start - legal Section - impressum - datenschutz - quellen - cv
--------------------------------------------------------------*/


.legal p {
  color: darkblue;
  font-size: 1rem;

  margin-bottom: 0px;
}

.legal h1 {
  color: darkblue;
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 20px;
}

.legal h2 {
  color: darkblue;
  font-size: 1.3rem;
  font-weight: 700;
  margin-top: 40px;
  margin-bottom: 10px;
}

.legal h3 {
  color: black;
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: 40px;
  margin-bottom: 10px;
}
 
 /*vertical line */
.legal .legal-item {
  padding: 0 0 20px 20px;
  margin-top: -2px;
  border-left: 3px solid #6495ed; /* Blau - website specific color */
  position: relative;
}


.legal .legal-item ul {
  padding-left: 20px;
}

.legal .legal-item ul li {
  padding-bottom: 10px;
  font-size:1.2rem;
  
}

.legal .legal-item ul li a {
  padding-bottom: 10px;
  font-size:1.2rem;
}

.legal .legal-item p {
  padding-bottom: 10px;
  font-size:1.2rem;
  color:black;
}


.legal .legal-item p a {
  padding-bottom: 10px;
  font-size:1.2rem;
}

.legal .legal-item:last-child {
  padding-bottom: 0;
}

 /*small circle for vertical line */
.legal .legal-item:before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 16px;
  left: -8.5px;
  top: 0;
  background: #ffffff;
  border: 3px solid #6495ed; /* Blau - website specific color */
}


.legal .impressum-bild-quellen ul li a {
  padding-bottom: 10px;
  font-size:1.2rem;
  color:blue;
}

.legal .impressum-bild-quellen ul li {
  padding-top: 20px;
  padding-bottom: 20px;  
  font-size:1.2rem;
  color:black;
    line-height: 1.3;
}


/*--------------------------------------------------------------
# final - legal Section - impressum - datenschutz - quellen - cv
--------------------------------------------------------------*/





/*---------------------------------------
  Start - CUSTOM ICON COLOR               
-----------------------------------------*/


.custom-icon {
  color: 	white;
}
/*---------------------------------------
  Start - CUSTOM ICON COLOR               
-----------------------------------------*/




















/* start - subsol-page ----------------------------------------------------- */

.subsol {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8)), url(../img/footer/beautiful-girl-sitting-dentist.webp);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.subsol .subsol-item h1 {
    color: white;
	font-size:1.6rem;		
}


.subsol .subsol-item a {
    line-height: 45px;
    color: white;
    transition: 0.6s;
	font-size:1.2rem;		
}

.subsol .subsol-item p {
    line-height: 35px;
	color:white; /* add pmd */	
}

.subsol .subsol-item a:hover {
    color: 	deepskyblue;
}

/*** copyright Start ***/
.copyright p {

    transition: 0.6s;
	
  margin-bottom: 0;
  color:white !important;
  padding: 10px 0;
font-size:1.1rem; 	
letter-spacing:1px;
text-align:center;
	
}



.copyright p :hover {
color:deepskyblue !important;
}



.copyright {
    background: rgb(0,0,0,0.3) !important; /* negru in transparenta */
}
/*** copyright end ***/


.btn-home a {
font-size:3rem;
color:white;
font-weight:700;		
}

.btn-home a:hover {
color:deepskyblue;
}

/* final - subsol-page ----------------------------------------------------- */


























/*** testimonial Start ***/
#recenzii {

    background: linear-gradient(-80deg, rgba(8, 32, 50, 0.4), rgba(8, 32, 50, 0.6)), url(../img/testimonial/women-giving-a-thumbs-up.webp), #082032;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
	
    padding-top: 50px;
    padding-bottom: 50px;	
	
}

.recenzie {
    text-align: center;
    z-index: 2;
    position: relative;
    margin: 15px;
    max-width: 768px;
    margin: auto;
}



.recenzie .patient h5 {
    margin-top: 16px;
    margin-bottom: 4px;
    color: #fff;
	letter-spacing:1px;
    font-size: 1.3rem;	
	
}

.recenzie p {
    margin-top: 26px;
    margin-bottom: 26px;
    font-size: 1.15rem;
    color: #fff;
    font-weight: 400;
    line-height: 1.7;
	letter-spacing:1.1px;	
}

.recenzie .patient small {
    color:#00FFFF; /* aqua*/
	letter-spacing:1.1px;
    font-size: 1.1rem;
font-weight:500;	
}

.recenzie .stele {
    color: yellow;
}


.owl-dot.active span{
    background-color: cyan !important;
}


/*** testimonial end - ***/












/*---------------------------------------
  Start - adaptari PMD -            
-----------------------------------------*/

.bg-body-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity)) !important;
}

.bg-body-primary:hover {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity)) !important;
}


.bg-body-secondary {
  --bs-bg-opacity: 1;
  background-color: cyan !important;
}

.bg-body-secondary:hover {
  --bs-bg-opacity: 1;
  background-color: yellow !important;
}

.bg-body-tertiary {
  --bs-bg-opacity: 1;
  background-color: whitesmoke !important;
}

.bg-body-tertiary:hover {
  --bs-bg-opacity: 1;
  background-color: gainsboro !important;
}

/* ---------------------------------*/
.col-caramiziu-pmd {
 color: #DB3800 !important; /* caramiziu - website specific color */ 
}

.col-caramiziu-hover-pmd {
 color: #DB3800 !important; /* caramiziu - website specific color */ 
}

.col-caramiziu-hover-pmd:hover {
  --bs-bg-opacity: 1;
  color:#708090 !important; /* slategray - website specific color */
}

/* ---------------------------------*/


.col-white-pmd {
 color: white !important; 
}

.col-gri-pmd {
 color: darkslategray !important; 
}

.col-gri-hover-pmd {
 color: darkslategray !important;  
}

.col-gri-hover-pmd:hover {
  --bs-bg-opacity: 1;
  color:#708090 !important; 
}

/* ---------------------------------*/


/*---------------------------------------
  Final - adaptari PMD -            
-----------------------------------------*/



/*---------------------------------------
  start PMD - diverse             
-----------------------------------------*/

	.img-size-one {
		width:50%;
		height:50%;
	}


/*** Start - pmd - Sectiune titlu ***/
.sectiune-titlu {
    max-width: auto; /* initial: max-width: 900px; */
    text-align: center;
    margin: 0 auto;
	color:	darkblue;
	margin-bottom:20px;
	letter-spacing:1.4px;
	font-size:1.8rem;
}



.subtitlul-a {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    color: var(--bs-primary);
}

.subtitlul-a::before {
    content: "";
    width: 100px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin-top: 8px;
    margin-right: -100px;
    border: 1px solid var(--bs-primary) !important;
}

.subtitlul-a::after {
    content: "";
    width: 50px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin-bottom: 8px;
    margin-right: -50px;
    border: 1px solid var(--bs-primary) !important;
}
/*** Final - pmd - Sectiune titlu ***/


	.shadow-pmd {
	box-shadow: 0px 0px 2px rgba(100,149,237,.4);	
	}




/*---------------------------------------
  final PMD - diverse             
-----------------------------------------*/



/*---------------------------------------
  Start - RESPONSIVE STYLES               
-----------------------------------------*/



/*---------------------------------------
  Final - RESPONSIVE STYLES               
-----------------------------------------*/