:root {
  --negro: #2A2A2A;
  --negroOscuro: #262626;
  --morado: #5552B2;
  --verde: #00C300; 
  --verdeAzul: #35939B  ;
}
html{
	font-size: 16px;
}

body{
	font-family: 'Montserrat', sans-serif;
	scroll-behavior:  smooth;
}

article, section, footer, .modal-grid{
	overflow: hidden;
}

/** Colores ***/
.negro{
	color: var(--negro) !important;
}

.negroOscuro{
	color: var(--negroOscuro) !important;
}

.morado{
	color: var(--morado) !important;
}
.verde{
	color: var(--verde) !important;
}
.verdeAzul{
	color: var(--verdeAzul) !important;
}
.bgnegro{
	background-color: var(--negro) !important;
}
.bgnegroOscuro{
	background-color: var(--negroOscuro) !important;
}
.bgMorado{
	background-color: var(--morado) !important;
}
.bgVerde{
	background-color: var(--verde) !important;
}
.bgVerdeAzul{
	background-color: var(--verdeAzul) !important;
}

h1{
	font-weight: 700;
}

#MenuItems .active{
	color: var(--morado) !important;
}

#MenuItems .cita{
	background-color: var(--morado);
	color: #fff;
	padding: 7px 20px;
	border-radius: 99px;
	width: fit-content;
	height: auto;
}
.mega-item-1{
	flex-direction: column !important;
    position: relative !important;
    top: 0  !important;
    justify-content: center !important;
    align-items: center !important;
	height: 100% !important;
}

.mega-item-1>p{
	display: flex;
    height: 100%;
	flex-direction: row;
    justify-content: center;
    align-items: center;
	margin-bottom: 0;
}

.mega-item-1>p:hover{
	cursor: pointer;
}

.mega-item-1 img{
	width: 20px;
	margin-left: 10px;
}

p{
	@apply text-base;
	color: var(--negro);
}
/*** Header ***/

.hamburger, .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after{
	width: 30px !important;
}

.cel{
	display: none;
}
.cel430{
	display: none;
}
.cel845{
	display: none;
}

header.scroll .franja{
	height: 0;
	transition: all 0.25s;	
}
header.scroll{
	background-color: #fff;
} 

/* .franja{
	/* background: rgb(255,255,255);	
	background-color: #FFF !important;
	background: url(images/template/franja-header.png) no-repeat;
	background-size: cover;
	background-position-x: right;
	background-position-y: center;
} */
.franja .head-links{
	float: right;
	margin-right: 24%;
}

.nav-item{
	float:  left;
	margin-left:  auto;
	margin-right:  auto;
	margin-top:  0.75rem;
	margin-bottom:  0.75rem;
	width:  100%;
	font-size:  0.875rem;
	line-height:  1rem;
	--tw-text-opacity:  1;
	color:  #000;
  }
  @media (min-width: 1024px){
	.nav-item{
	  float:  none;
	  margin-right:  1.75rem;
	  margin-left:  1.75rem;
	  display:  inline;
	  width:  auto;
	}
  }
  
  @media (min-width: 1536px){
	.nav-item{
	  font-size:  1rem;
	  line-height:  1.75rem;

	  /* height: 120px; */
	  height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 0;
		margin-bottom: 0;
	}
  }

#menu{
	background-color: rgba(255,255,255, 0.8);
	width: 100%;
	height: 120px;
}
#Inner-Menu{
    height: 96px;
	padding-left: 4%;	
}
#header-logo{
	position: relative;	
	/* height: 96px;
	 */
	 height: auto;
	width: 186px;
	margin-right: 0;
}
#header-logo img{
	margin: auto 0;
    width: 186px;
    /* height: 96px; */
	height: auto;
}
#MenuItems{
	/* height: 50px; */
	height: 120px;
	padding-right: 2%;	

	overflow: visible;
}

.llamanos-menu a:hover{
	text-decoration: underline;
}

  section, footer{
	
	width:  100%;
  }
  
  .marginMenuMovil{
	margin-top:  6rem;
  }
  
  .showNavItem{	
	-webkit-animation:  showNavItem 1000ms 1 normal linear forwards;
			animation:  showNavItem 1000ms 1 normal linear forwards;
	display:  block;
  }
  
  .hideNavItem{
	display:  none;
	-webkit-animation:  hideNavItem 100ms 1 normal linear forwards;
			animation:  hideNavItem 100ms 1 normal linear forwards;
  }
/*   
  .showMenu{
	display:  block;
	-webkit-animation:  showMenu 1000ms 1 normal linear forwards;
			animation:  showMenu 1000ms 1 normal linear forwards;
	border-bottom-width:  2px;
	--tw-border-opacity:  1;
	border-color:  rgba(0, 0, 0, var(--tw-border-opacity));
  }
  
  .hideMenu{
	-webkit-animation:  hideMenu 1000ms 1 normal linear forwards;
			animation:  hideMenu 1000ms 1 normal linear forwards;
	border-width:  0px;
  } */
  .showMenu{
    animation: showMenu 1000ms 1 normal linear forwards;
    display: block;
    display: flex;
    flex-direction: column;    
	justify-content: center;	
	padding: 30px 0;
}

.hideMenu{
    animation: hideMenu 1000ms 1 normal linear forwards;
    border-width: 0px;
    padding-top: 0 !important;
}

.growMenuMovil{
	animation: growMenuMovil 1000ms 1 normal linear forwards;
}

.decreasewMenuMovil{
	animation: decreasewMenuMovil 1000ms 1 normal linear forwards;
}

@keyframes growMenuMovil{
	0%{}
	100%{height:350px}
}

@keyframes decreasewMenuMovil{
	0%{}
	100%{height:200px}
}

@keyframes showMenu{
	0%{height:0px}
	100%{height:100vh}
}

@keyframes hideMenu{
	0%{height:100vh}
	100%{height:0px}
}

@keyframes showNavItem{	
	0%{
		opacity: 0;
	}
	90% {
        opacity: 0;
    }
	100%{
		opacity: 1;
	}
}

@keyframes hideNavItem{	
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}

  .input{
	margin-bottom:  0.75rem;
	width:  100%;
	padding:  1rem;
	font-size:  0.875rem;
	line-height:  1.25rem;
	--tw-text-opacity:  1;
	color:  rgba(0, 0, 0, var(--tw-text-opacity));
  }
  
  @media (min-width: 2559px){
	.input{
	  font-size:  1.25rem;
	  line-height:  1.75rem;
	}
  }
  
  .msjError{
	position:  relative;
	top:  -0.75rem;
	padding-left:  0.5rem;
	font-size:  0.875rem;
	line-height:  1.25rem;
	--tw-text-opacity:  1;
	color:  rgba(153, 27, 27, var(--tw-text-opacity));
  }

  .cel{
	display: none;
  }
  
  .movil{
	display: none;
  }
  
  @media(max-width:1024px){
	.movil{
	  display: block;
	}
  }
  
  @media(max-width:1080px){
	.cel{
	  display: block;
	}
  }
  p{
	margin-bottom: 2rem;
  }
  .titulo{
	font-size: 2.5rem;
	line-height: 1;
  }
  .subtitulo{
	font-size: 2rem;
	line-height: 1;
  }
/*** Banner Home ***/
#Banner-Top,
#Banner-Top.owl-carousel .owl-stage-outer{
	height: 900px;
	position: relative;
}
#Banner-Top .owl-item{
	width: 100vw !important;
	
}

#Banner-Top .owl-dots{
	position: relative;
	top: -100px;
}

#Banner-Top .owl-dots span{ 
	width: 15px;
	height: 15px;
}
#Banner-Top .owl-dots .active span{ 
	background: var(--azulLila);
}


.banner-home-1{
	background: url(../image/home/banner-1.jpg) no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 900px;
	
}
.banner-home-2{
	background: url(../image/unidad-de-urologia-femenina/banner-1.jpg) no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 900px;
	
}

.banner-home-3{
	background: url(../image/unidad-de-salud-sexual/banner-1.jpg) no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 900px;
	
}

.banner-home-4{
	background: url(../image/centros-de-excelencia/banner-1.jpg) no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 900px;

}

.banner-home-5{
	background: url(../image/unidad-de-piedras-urologicas/banner-1.jpg) no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 900px;

}

.banner-home-6{
	background: url(../image/unidad-de-oncologia-urologica/banner-1.jpg) no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 900px;
	
}

.banner-home-7{
	background: url(../image/unidad-de-salud-prostatica/banner-1.jpg) no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 900px;
	
}

.banner-home-8{
	background: url(../image/unidad-de-urologia-pediatrica/banner-1.jpg) no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 900px;

}

.banner-home-9{
	background: url(../image/endurologia/banner-1.jpg) no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 900px;

}

.banner-home-10{
	background: url(../image/enfermedades-prostaticas/banner-1.jpg) no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 900px;

}

.banner-home-11{
	background: url(../image/prostata/banner-1.jpg) no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 900px;

}

.banner-home-12{
	background: url(../image/calculos-renales/banner-1.jpg) no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 900px;

}

.content-sub {
    background-color: #5652b3;
    display: none;
    padding: 20px 30px !important;
    text-align: left;
    position: absolute;
    width: 300px !important;
    left: 0;	
    top: 120px;
}

.content-sub p{
	color: #fff;
	margin-bottom: 5px;
}

.content-sub p:hover{
	background-color: #fff;
	color: var(--morado);
}

.boton{
	padding: 1rem 1.7rem;
	border-radius: 50px;
	color: #fff;
	font-size: 1.2rem;
	font-weight: bold;
	width: fit-content;
	background-color: var(--morado);
	position: relative;
	left: 0px;
	top: 0px;
	transition: all 0.2s;
}
.boton:hover{
	left: 30px;
	transition: all 0.2s;
}
.botonUpper:hover{
	left: 0px;
	top: -15px;
	transition: all 0.2s;
}
.btnBlanco{
	border: 2px solid #fff;
}


.text-box{
    width: 33%;
    left: 5%;
    padding: 40px 0 20px 0;
    position: absolute;
    top: 70%;
    transform: translate(-6%,-70%);
	border-style: solid;
    border-width: 0px 0 8px 0;
    border-color: var(--morado);
}
.text-box::after{
    content: "";
    position: absolute;
    bottom: -17px;
    left: 0;
    width: 50%;
    height: 9px;
    background-color: var(--verde);
}
.text-box h1{
    color: #fff;
    font-size: 3.3vw;
    line-height: 1;
    font-weight: 700;
    text-shadow: 2px 2px 2px #777;
}
.no-shadow{
	text-shadow: none !important;
}

.text-box p{
	font-size: 1vw;
}

.text-box .boton{
	font-size: 0.8vw;
}

.text-box.txt-largo{
	width: 43%;
}

/***********  BANNER HOME SLIDER *********/
#Banner-Top .text-box{
	position: relative !important;
}
#Banner-Top .slick-prev, #Banner-Top .slick-next{
	width: 40px !important;
	height: 40px !important;
	top: 55%;
	transform: translate(-80px, -55%) !important;
}
#Banner-Top .slick-prev:before, #Banner-Top .slick-next:before{
	font-size: 40px;
}

#Banner-Top .slick-prev{
	transform: translate(80px, -55%) !important;
    z-index: 999;
}

#Banner-Top .slick-dots{
    bottom: 58px;
}

.bannerDr-3 .text-box{
	width: 40%;
}
/*****************/

.owl-carousel .owl-nav{    
    top: 45%;
    position: absolute;
    width: 88%;
    left: 41%;
    transform: translate(-41%, -45%);
    z-index: 40;
    display: flex;
    justify-content: space-between;
}

.owl-carousel .owl-nav button{
	color: #fff !important;
	font-size: 80px !important;
	text-shadow: 3px 3px 0px #333;
}
.owl-theme .owl-nav [class*=owl-]:hover{
	background: transparent !important;
}
/*** Servicios ***/

.xcol-1{
	width: 50%;
}
.xcol-2{
	width: 50%;
}

.zcol{
	width: 46%;
	margin-left: 2%;
	margin-right: 2%;
}
.zcol-3{
	width: 29%;
	margin-left: 2%;
	margin-right: 2%;
}

.card{
	width: 45%;
    margin-left: 2.5%;
    margin-right: 2.5%;
}

.inner-wrap{
	width: 95%;
	margin: 0 auto;
}

#Main{
	width: 100%;	
	overflow: hidden;
}

/*** Galería ***/
.sliders{
	background-size: cover !important; 
	background-position: center !important; 
	/* width:33%;  */
	height: 340px;
	margin: 0;

	width: 31% !important;
	margin: 1%;
}

.sliders:hover{
	cursor: pointer;
}


/*** Aseguradoras ***/
.banners-medicos{
	margin-bottom: 15px !important;
}
.banners-medicos .slick-slide{
	height: auto !important;
}
.banners-medicos .slick-dots{
	bottom: -40px !important;
}
.banners-medicos img{
	width: auto !important;
}

.banners-medicos .slick-next,
.banners-medicos .slick-prev{
    width: 50px;
    height: 50px;    
    background-color: var(--morado);
}
.banners-medicos .slick-next,
.banners-medicos  .slick-prev{
    width: 35px;
    height: 40px;    
    background-color: var(--morado);
}
.slick-prev, .slick-next{
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    transform: translate(-30px, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.banners-medicos .slick-prev{
    left: 30px;
    z-index: 999;
}
.banners-medicos  .slick-next{
    right: -30px !important;
    z-index: 999;
}

@media (min-width: 767px){
	.banners-medicos .slick-prev{
		left: 0;
		z-index: 999;
	}
	.banners-medicos  .slick-next{
		right: -65px !important;
		z-index: 999;
	}	
}

.banners-medicos .slick-next:before{
    content:url('/image/template/white_right_chevron.png');
	position: absolute;
    top: -3px;
    left: -3px;
}
.banners-medicos .slick-prev:before{
    content:url('/image/template/white_left_chevron.png');
	position: absolute;
    top: -3px;
    left: -8px;
}

.customBorder{
	line-height: 1.5;
}

.customBorder::after{
    content: "";
    position: relative;
    top: 0;
    left: 50%;
    width: 227px;
    height: 4px;
    background-color: var(--verde);
    display: block;
    transform: translateX(-50%);
}

.lineasColor{
	width: 55%;
    left: 0;
    padding: 40px 0 20px 0;
    position: relative;
    top: 60%;
    transform: translate(0,-60%);
    border-style: solid;
    border-width: 0px 0 8px 0;
    border-color: var(--morado);
    margin: auto;
}

.lineasColor::after {
    content: "";
    position: absolute;
    bottom: -17px;
    left: 0;
    width: 50%;
    height: 9px;
    background-color: var(--verde);
}

/*** Infraestructura ***/

.infraestruct, .tecno-wrap{
	padding: 0 5%;
	margin: 0 auto;
}
.tecno-img{
	width: 70%;
	margin: auto;
	padding: 5% 0;
	max-width: 400px;
}
.tecno-2 .tecno-img{
	
}
/*** Contacto ***/

#Contacto{
	
}

.contacto_wrap{
	width: 73%;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
	color: var(--rosa);
}

.form-col-1,
.form-col-2{
	width: 48%;
	margin: 0 1%;
}

/*** Footer ***/
footer{
	background-color: #f5f5f5;
}

.foot{
	width: 30%;
	@apply flex flex-col justify-center items-center;
}
.foot2{
	width: 70%;
}
.foot2-col1,
.foot2-col2{
	@apply flex flex-col justify-center items-center;
	width: 40%;
}
.foot-col-1{
	@apply flex flex-col justify-start items-start h-full;
}

/***** Pacientes Pediátricos ***/
.serv{
	width: 45%;
	/* max-width: 600px; */
	margin: 30px 0;
}


  /*** SUBMENU ***/
  
  /* .nivel-esc{
	cursor: pointer;
	display: block;
  }
  .niveles-sub {
	background-color: rgba(0,21,63,0.8);
    color: #fff;
    position: absolute;
    text-align: left;
    padding: 1rem;
    left: 0%;
    top: 2.5rem;
    margin-right: 1.75rem;
    margin-left: 1.75rem;	
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
	width: 77%;
}
.niveles-sub p{
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	padding: 0 5px;
}
.niveles-sub a:hover p{
	background-color: #fff;
	color: #000;
} */
/*** MEDIA QUERYS ***/

@media (max-width: 1600px){
	
}

@media (max-width: 1440px){
	html{
		font-size: 14px;
	}		
}

@media (max-width: 1367px){
	.banner-home{
		height: 900px;
	}
}
@media (max-width: 1280px){
	
}

@media (max-width: 1200px){
	.contacto_wrap {
		width: 90%;
	}
	.boton{
		padding: 0.8rem 1.5rem !important;
	}
}

@media (max-width: 1180px){
	.franja{
		height: 0;
	}
	#Inner-Menu{
		padding-right: 4%;
		height: 100%;
	}
	#MenuItems{
		background-color: #fff;
		padding-bottom: 0;	
	}
}

@media (max-width: 1080px){
	.content-sub{
		display: block !important;
		position: relative !important;
		top: 0px !important;
		width: 100% !important;
		text-align: center;
		margin-top: 10px;
	}
	#header-logo, #header-logo img{
		width: 165px;
	}
	#Banner-Top,
	#Banner-Top.owl-carousel .owl-stage-outer{
		height: 100vh;
	}
	.banner-home{
		/* background-position-x: 11%; */
		height: 100%;
	}
	.banner-home .text-box{
		/* left: 40%;
		transform: translateX(-40%); */
	}
	.banner-home .text-box{
		/* width: 500px; */
		top: 65%;
		transform: translateY(-65%);
	}
	
	.banner-home .text-box h2{
		font-size: 20px;
	}
	.banner-home .text-box h2 span{
		font-size: 40px;
	}
	.banner-home .text-box p{
		font-size: 14px
	}
	.text-box .boton{
		font-size: 12px;
	}
	#MenuItems{		
		height: 0;
		display: block !important;
		overflow: hidden !important; 
	}

	#MenuItems.menuDisplay{		
		overflow-y: scroll !important;
		/* height: 100% !important; */
		padding: 0;
		padding-top: 30px;		
	}

	.mega-item-1 p{
		height: auto !important;
	}
	.content-sub.show{
		position: relative !important;
		top: 0px !important;
    	width: 100% !important;
		text-align: center;
		margin-top: 10px;
	}
	.mega-item-1{
		height: auto !important;
	}
	.content-sub.show p, .content-sub p{
		margin-bottom: 17px;
		padding: 7px 0;
	}
	.nav-item{
		padding: 5px 0;
	}
	br.menullamar {
		display: none;
	}
	.nav-item.llamanos-menu a{
		margin-top: 22px;
		display: block;
		font-size: 20px;
		line-height: 1;
	}
	#MenuItems .cita{
		float: none;
		height: 28px !IMPORTANT;
		display: inline-block;
	}
	.marginMenuMovil{
		margin-top: 20px;
	}
	.menuContacto{
		width: fit-content;
		margin: auto;
	}
	
	.item-niveles{
		height: auto;
	}
	.niveles-sub {
		position: relative;
		left: 0;
		top: 0;
		border-top-left-radius: 30px;
		border-top-right-radius: 30px;
	}
	.item-niveles a {
		margin-top: 0.75rem !important;
	}
	.lineasColor{
		width: 65%;
	}
	.sliders{
		width: 48% !important;
		margin: 1%;
	}
}



@media (max-width: 1024px){
	.contacto_col1{
		width: 100%;
	}
	.contacto_col2{
		width: 100%;
		margin-top: 20px;
	}	
	.xcol-1,
	.xcol-2{
		width: 100%;
	}
	.zcol,.zcol-3,.card{
		width: 100%;
		margin-bottom: 40px;
		margin-left: 0;
		margin-right: 0;
	}
	.vph{
		width: 70%;
		margin: 0 auto;
	}
	#menu{
		height: 100px;
	}
}

@media (max-width:960px){	
	.foot,
	.foot2{
		width: 100%;
	}
	.foot2{
		margin-top: 3rem;
	}
}

@media (max-width:845px){
	.xcol{
		width: 100%;
	}	
	.wrap{
		margin-top: 3rem;
		margin-bottom: 3rem;
	}	
	.form-col-1,
	.form-col-2{
		width: 100%;
	}
}

@media (max-width: 767px){
	.banner-home .text-box h1{
		font-size: 30px;
	}
	.titulo{
		font-size: 2rem;
	}
	.subtitulo{
		font-size: 1.5rem;
	}	
	
	.banner-home .text-box{
		width: 400px;
		/* left: 33%;
		transform: translateX(-33%,-55%); */
	}		
	.foot2-col1,
	.foot2-col2{
		width: 100%;
		text-align: center;
	}
	.foot2-col2{
		margin-top: 2rem;;
	}
	.foot2 a{
		display: block;
	}
	/** Pediatrico **/
	.serv{
		width: 100%;
	}
}

@media (max-width: 580px){
	.banner-home .text-box{
		left: 50%;
		transform: translate(-50%,-55%);
	}	

	
}

@media (max-width: 480px){
	
	.banner-home .text-box{
		width: 90%;
		left: 50%;
		top: 55%;
		transform: translate(-50%,-55%);
	}
	#Banner-Top .slick-prev{
		transform: translate(40px, -55%) !important;
	}
	#Banner-Top .slick-next{
		transform: translate(-40px, -55%) !important;
	}
	br:not(.menullamar){
		display: none;
	}	
	.sliders{
		height: 210px !important;
	}
	
	.bannerDr-3 .text-box{
		width: 90%;
		left: 50%;
		top: 60%;
		transform: translate(-50%,-60%);
	}
}
@media (max-width: 430px){
	.sliders{
		height: 180px !important;
	}
}

@media (max-width: 380px){
	#Main{
		/* margin-left: 6px;
		margin-right: 6px; */
	}
	
	.sliders{
		height: 150px !important;
	}
}