@media screen {
/*PLANTILLA PROYECTOS*/
/*MODAL*/
#ModalGaleria .ContentModal,
#SlideModalGaleria,
#SlideModalGaleria .SlideItems { height: 100%;}
#SlideModalGaleria .SlideItems div { display: flex; align-items: center; justify-content: center;}
#SlideModalGaleria img { max-width: 100%; max-height: 100%;}

/*select*/
#ModalGaleria div.select { opacity: 1; visibility: visible; } 


/*modalgaleria*/
.modalgaleria { overflow: hidden; }
.modalgaleria #ModalGaleria { opacity: 1 !important; visibility: visible !important; }
.modalgaleria #ModalGaleria .ContentModal{ display: block; /*opacity: 1; visibility: visible;*/
                                           -webkit-transform: scale(1);
                                            transform: scale(1); }                                            
/*.............*/
#FlotanteWapp { position: fixed; z-index: 200; right: 16px; bottom: 16px;}
	#FlotanteWapp > p { display: none;}
	#FlotanteWapp a { font-size: 0; display: block; width: 60px; height: 60px; background: var(--verde) url("../imagenes/wapp-blanco.svg") no-repeat 50% 50%; border-radius:50%; margin-bottom: 16px; background-size: 30px auto;
						box-shadow: 0 0 30px rgba(51,51,51,.3);
						-webkit-transition: background-color 0.3s var(--easing-classic);
						transition: background-color 0.3s var(--easing-classic);}
						
	.Desktop #FlotanteWapp a:hover { background-color: #000;}
	
    #DetalleProyecto {background-color: #F2F2F2;}
        #DetalleProyecto header.general { width: 100%; height: 50px; padding: 0 30px; text-align: right; background: url("../imagenes/filete-tricolor.png") no-repeat 0 0; background-size: 100% 3px;}
            #DetalleProyecto header.general > .btn-verde { border-radius: 0 0 5px 5px; font-size: 0.9rem;}

        .Plantilla {}
            .Plantilla > header { position: relative; overflow: hidden; max-height: 1060px; text-align: left; background-color: #CCCCCC;}        
                #SlideProyectos { width: 100%;}
                
                #HeroVideo { width: 100%;}
                #HeroVideo video { width: 100%;}
                
                #TituloProyecto { position: absolute; z-index: 100; top: 0; left: 0; width: 530px;  padding:0 130px 0 30px;  height: 100%; background: url(".../imagenes/diagonal-interna.svg") no-repeat 100% 0;
                                  display: inline-flex; align-items: center; justify-content: center;}
                    
                    #TituloProyecto div {}
                        #TituloProyecto h1 { font-size: 2.5rem; display: block; max-width: 400px; margin:0;}
                        #TituloProyecto h1 span { font-size: 4.5rem; line-height: 1em !important;}
                        #TituloProyecto h1 span.Ex { font-size: 1.7rem; display: block;
                                                    -webkit-transform: translateY(0);
                                                     transform: translateY(0);}

                        a.BtnConsultaYa { display: block; margin-top: 16px; border-radius: 5px; font-size: 1.35rem;}
                        #AccionesProyecto { display: none;}
                
                

           #DataGeneralProyecto { padding: 70px 0; background-color: #FBFBFB;}
               #DataGeneralProyecto .Content { display: flex; flex-wrap: wrap; justify-content: center; width: 100%;}
                   #DataGeneralProyecto .Content header { display: none;}
				   
                     #DataProyecto { flex: 1 1 100%; display: flex; flex-wrap: wrap; justify-content: center;}
                         #DataProyecto div { flex:  0 0 auto; margin: 6px 0;  padding: 5px 14px 5px 10px; text-align: center; border-left: 2px solid var(--verde); /*outline: 1px solid red;*/}
						 #DatoAnio { border:none !important;}
                         /*#DatoDesarrollo { max-width: 230px;}*/  
                               
                       	#DataProyecto h3 { font-size: 0.8rem; color: var(--grisproyecto);}
                       	#DataProyecto h4 { font-size: 1rem;}

           #UbicacionProyecto { display: flex; flex-wrap: wrap; background-color: #fff;}
              #UbicacionProyecto > header { flex: 1;  display: flex; justify-content: flex-end; align-items: center;}                   
                   #UbicacionProyecto > header figure { flex: 1; height: 100%; min-height: 370px;}   
                   
                   #ContentUbicacion { text-align: left; padding: 20px 40px 20px 10px;}
                       #ContentUbicacion h3 { font-size: 1rem; margin: 5px 0;}
                       #ContentUbicacion h4 { font-size: 0.9rem; line-height: 1.5em !important; color: var(--grisproyecto);}           

               #UbicacionMapa { flex: 1;}
                   #UbicacionMapa iframe { width: 100%; height: 100%;}

          #DescipcionProyecto { padding: 70px 0;}
              #DescipcionProyecto header { text-align: center;}
                  #DescipcionProyecto h3 { display: block; font-size: 1rem; color: var(--negro); margin-bottom: 15px;}

              #ContentDescripcion { display: flex; flex-wrap: wrap; margin: 0 auto;}
                  #ContentDescripcion > div { flex: 1; text-align: left; margin: 0 15px; }
                  #ContentDescripcion h4,
                  #ContentDescripcion p { font-size: 0.9rem; text-align: justify; line-height: 1.5em !important;}                 
                                   

         #GaleriaFotos { position: relative; width: 100%; display: block;}
             a.BtnPantallaCompleta { position: absolute; z-index: 200; top: 0; left: 50%; font-size: 0.8rem; margin-left: -100px; padding-left: 45px; background-image: url("../imagenes/icono-fullscreen.svg"); background-repeat: no-repeat; background-position: 15px 50%; border-radius: 0 0 5px 5px;}
             
             #CarrselAmbiente { position: relative; width: 100%; display: block;}
                 li.splide__slide { position: relative; overflow: hidden; }  
                 li.splide__slide figure { width: 100%; /*max-width: 750px;*/}
                 li.splide__slide img { max-width: 100%; display: block;}

                 .splide__arrow { background-color: var(--verde);}
                 .splide__arrow svg { display: none !important;}
                 .splide__arrow--prev { background-image: url("../imagenes/flecha-left.svg"); background-repeat: no-repeat; background-position: 50% 50%; background-size: 10px auto;}
                 .splide__arrow--next { background-image: url("../imagenes/flecha-rigth.svg"); background-repeat: no-repeat; background-position: 50% 50%; background-size: 10px auto;}

         #AmenitiesProyecto { padding: 25px 0; background-color: var(--blanco);}
             #AmenitiesProyecto header { display: flex; flex-wrap: wrap;  width: 100%;}
             #AmenitiesProyecto header div { flex: 1; text-align: center; padding: 25px 10px;}

             #AmenitiesProyecto figure { height: 60px; text-align: center; margin: 0 auto 15px auto;}
             #AmenitiesProyecto figure img { max-width: 100%; max-height: 100%; display: block; margin: 0 auto;}
             #AmenitiesProyecto h2 { font-size: 1rem; width: 100%; max-width: 125px; margin: 0 auto;}

         #PlanosProyecto {}             
             #PlanosDespcipcion { display: inline-block; text-align: left; padding: 60px 0; margin: 0 auto;}                 
                 #PlanosDespcipcion > p { text-align: center;}
                 #PlanosDespcipcion > p strong { display: block; font-size: 1rem; color: var(--negro); margin-bottom: 10px;}
                 #PlanosDespcipcion > div { min-height: 70px; padding-left: 60px; background: url("../imagenes/building.svg") no-repeat 0 0; background-size: 40px auto;}
                 #PlanosDespcipcion > div p { font-size: 0.9rem; line-height: 1.5em !important; text-align: justify; color: var(--grisproyecto);}
             
             #UXPlanos { display: flex; flex-wrap: wrap; width: 100%;}
                 #GaleriaPlanos { flex: 1; position: relative; overflow: hidden;}
                     #GaleriaPlanos figure { position: absolute; top: 0; left: 0; width: 100%; opacity: 0;
                                             -webkit-transition: opacity 0.5s var(--easing);
                                             transition: opacity 0.5s var(--easing);}
                     #GaleriaPlanos figure:last-child { position: relative;}                 
                     #GaleriaPlanos img { max-width: 100%; display: block;}
                     #GaleriaPlanos figcaption { display: none;}                         

                 #NavPlanos { flex: 0 0 50px; align-self: flex-start;}
                     #Pisos { text-align: center;}
                         #Pisos > p { margin-bottom: 5px; font-size: 0.8rem;}
                         #NavVistas { width: 40px; text-align: center; padding: 5px 0; background-color: var(--blanco); border:1px solid #707070; border-radius: 30px; margin: 0 auto;}
                             #NavVistas a { position: relative; width: 30px; height: 30px; border-radius: 50%; margin: 0 auto; font-size: 13px; color:var(--negro); /*background-color: var(--blanco);*/
                                                display: flex; align-items: center; justify-content: center;
                                                background-color: #ccc;
                                                -webkit-transform: scale(0.4);
                                                transform: scale(0.4);}

                            #NavVistas a p { position: absolute; top: 0;  left: 40px; /*white-space: nowrap;*/ width: 100px; border-radius: 5px; padding: 5px; background-color: var(--negro);
                                             -webkit-transform: scale(0);
                                              transform: scale(0);}
                                   
                 /*Desktop*/
                 .Desktop #NavVistas a:hover { background-color: var(--negro);}
                 
                 /*select*/
                 #GaleriaPlanos figure.select { opacity: 1;}
                 #NavVistas a.select { background-color: var(--verde); color: var(--blanco);
                                           -webkit-transform: scale(1);
                                           transform: scale(1);}
                                           
                 #NavVistas a.select p {-webkit-transform: scale(1);
                                           transform: scale(1);}
                 /*......*/
                 
           #VideoDestacado { position: relative; flex: 1; padding-bottom: 42%; height: 0; width: 100%; max-width: 1360px; margin: 0 auto;}
               #VideoDestacado iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;}
                 
                 
        #SustentableProyecto { padding: 50px 0;}
            #SustentableProyecto header { text-align: center;}
                #SustentableProyecto header h2 { display: inline-block; font-size: 2rem; letter-spacing: 3px; padding-bottom: 5px; background: url("../imagenes/filete-tricolor.png") no-repeat 0 100%; background-size: 100% 3px;}
                #SustentableProyecto header p { display: block; padding-top: 5px; font-size: 1.5rem; letter-spacing: 3px;}
            
            #ListaSustentable { display: flex; flex-wrap: wrap; justify-content: center; margin: 30px auto;}
                #ListaSustentable > div { flex: 1 0 250px; margin: 5px; padding: 30px; text-align: center; background-color: var(--blanco);}
                #ListaSustentable figure { width: 120px; height: 130px; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
                #ListaSustentable img { max-width: 100%; display: block;}
                #ListaSustentable h3 { font-size: 0.9rem; line-height: 1.5em !important; width: 100%; max-width: 200px; margin: 0 auto; color: #333333;}
                #ListaSustentable h3 strong { font-size: 1rem; color: var(--negro);}
         
        #AccesosWapp { display: inline-flex; flex-wrap: wrap;}
            #AccesosWapp a { flex: 0 0 auto; margin: 0 8px;}        
        
        #MasProyectos { background-color: #DFDFDF; margin-bottom: 5px; padding: 40px 0;}
            #MasProyectos .Content {}
                #MasProyectos .Content > header { display: block; padding:0 70px 30px 70px; } 
                    #MasProyectos h2 { font-size: 1.7rem;}
                    
                #ListaProyectos { max-width: 1500px;margin: 0 auto; padding-left: 30px; padding-right: 30px;}
                   
/*EXCEPCIONES*/
#id-san-nicolas-3850 #TituloProyecto {width: 650px;}

#id-25-mayo-22 #DatoArquitecto {flex: 0 0 550px;}
}


@media (max-width: 1920px) {
   .Plantilla > header { max-height: none;}
}

@media (max-width: 1850px) {
    #NavVistas a.select p { display: none;}
    #GaleriaPlanos figcaption { display: block; position: absolute; top: 10px; left: 10px; font-size: 1rem; color: var(--blanco);  border-radius: 5px; padding: 5px; background-color: var(--negro);}
	#GaleriaPlanos { margin-right: 30px; border: 1px solid #ccc;}
}

@media (max-width: 1500px) {
	#TituloProyecto { width: 400px; text-align: left; justify-content: flex-start; padding-left: 45px;}
		#TituloProyecto h1 { font-size: 2rem;}
		#TituloProyecto h1 span { font-size: 3.5rem;	}
    	#DataGeneralProyecto { padding-top: 45px; padding-bottom: 45px;}        
            
    #ListaProyectos {max-width: 1300px;}
    #MasProyectos .Items { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));}
	
/*EXCEPCIONES*/
#id-san-nicolas-3850 #TituloProyecto { width: 500px;}

#id-don-bosco-473 #DatoArquitecto,
#id-don-bosco-473 #DatoObra,
#id-don-bosco-473 #DatoDireccion { flex: 0 0 220px; }
}

@media (max-width: 1300px) {
     #DataGeneralProyecto .Content { max-width: none; padding: 0 30px;}      
}

@media (max-width: 1200px) {          
    #PlanosDespcipcion { padding-left: 30px;}
        #UXPlanos { margin-bottom: 50px;}        
        #VideoDestacado {flex: 1 1 100%; padding-bottom: 42%;}  
		
		#GaleriaPlanos {  margin-left: 30px; margin-right: 30px; border: 1px solid #ccc;}
    
    #VideoDestacado { padding-bottom: 56%;}
}

@media (max-width: 1110px) {
    #ListaProyectos {max-width: 800px;}
}

@media (max-width: 1100px) {	      
    #UbicacionProyecto > header,
    #UbicacionMapa { flex: 1 1 100%;}    
    #UbicacionMapa { height: 300px;}
    
    #AmenitiesProyecto header div { flex: 1 0 145px;}
    
    #MasProyectos { padding-bottom: 25px;}
        #MasProyectos .Content > header {padding-bottom: 10px;}    
        #ListaProyectos {} 
        #MasProyectos .Items { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin: 0 auto;}
            #MasProyectos h2 br { display: none;}
}

@media (max-width: 1023px) {	
	
    #TituloProyecto { display: none;}  
	
	#DataGeneralProyecto { padding-top: 35px;}
		#DataGeneralProyecto .Content { justify-content: flex-start; align-items: flex-start;}
			#DataGeneralProyecto .Content header { display: block; flex: 1 1 100%; max-width: none; text-align: left; margin: 0 0 24px 0; padding-left: 0; padding-bottom: 5px; background: url("../imagenes/filete-tricolor.png") no-repeat 0 100%; background-size: 100% 3px;}           
				#DataGeneralProyecto .Content header p { font-size: 0.8rem; letter-spacing: 5px; color: var(--grisproyecto);}
				#DataGeneralProyecto .Content header h2 { font-size: 2.8rem; color: var(--grisproyecto);}
				#DataGeneralProyecto .Content header h2 br { display: none;}					   
				#DataGeneralProyecto .Content header .Ex { display: block; font-size: 1.5rem; padding-bottom: 16px; color: var(--grisproyecto);}

			#DataProyecto { flex: 1 1 100%; flex-wrap: wrap;  margin-top: 5px;}
				#DataProyecto div { flex: 1 1 50% !important;  max-width: none !important; text-align: left; margin: 0 0 16px 0; padding: 0 16px 0 0; border: none;}			
				#DataProyecto h4 { margin-top: 2px;}
                 
			#FlotanteWapp { position: relative; z-index: 0; right: auto; bottom: auto; margin: 24px 0 0 0;}  
				#FlotanteWapp > p { display:block; margin-bottom: 16px; text-align: left; font-size: 1.5rem; font-weight: 300;}

				#FlotanteWapp a {display: block; width: 100% !important; height: auto; padding: 10px 10px 10px 35px; border-radius: 5px; font-size: 1.3rem; font-weight: 600; color: var(--blanco); background: var(--verde) url("../imagenes/wapp-blanco.svg") no-repeat 10px 50%; box-shadow: none; cursor: pointer; 
								 -webkit-transition: background-color 0.3s var(--easing-classic);
								 transition: background-color 0.3s var(--easing-classic);}
				
				.Desktop #FlotanteWapp a:hover { background-color: #000;}
   
       a.BtnPantallaCompleta { display: none;}
       
       #SustentableProyecto { padding-bottom: 25px;}
}

@media (max-width: 920px) {	
    #DescipcionProyecto h3 { margin-bottom: 0;}
    #ContentDescripcion > div { flex: 1 1 100%; margin: 10px 0; }
}

@media (max-width: 800px) {
    #PlanosDespcipcion { margin-right: 30px; padding-left: 0; padding-right: 0;}
    
    #GaleriaPlanos { flex: 1 1 100%; margin-right: 0; margin-left: 0;}
    #NavPlanos { flex: 0 0 300px; margin: 0 auto; }
        #Pisos { padding: 0 15px; margin: 15px 0;}
        #Pisos > p { display: none;}
        #NavVistas { display: flex; border: none; background: none;}
        #Pisos nav { width: auto;}
        .Interacciones a { flex:0 0 30px;}          
}

@media (max-width: 686px) {
    #UbicacionProyecto > header { order: 2; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;}
       #UbicacionProyecto > header figure { display: none;}
       #ContentUbicacion { flex: 1 1 100%; padding: 30px;}  
        
    #UbicacionMapa { order: 1;}    
    
    #PlanosDespcipcion > p { text-align: left;}
    #PlanosDespcipcion > div { padding-left: 0; background: none; min-height: 0;}
    #DescipcionProyecto h3 { text-align: left;}
    #ContentUbicacion h4,
    #PlanosDespcipcion p:last-child { text-align: justify;}
    
    #MasProyectos .Content { padding-bottom: 25px;}
    #MasProyectos .Items { max-width: 350px;}     
}

@media (max-width: 550px) {
	#DataProyecto div { flex: 1 1 100% !important; padding-right: 0;}
	
    #DescipcionProyecto { padding: 35px 0;} 
    #AccesosWapp a { flex: 1 1 100%; margin:8px 0;}    
}

@media (max-width: 500px) {	
		
		#DescipcionProyecto .Viewport { padding:0 30px;}
        
        #AmenitiesProyecto header div { padding-top: 10px; padding-bottom: 18px;}        
            #AmenitiesProyecto h2 { font-size: 0.9rem;}
            #AmenitiesProyecto figure { height: 45px;}        
        
        #PlanosDespcipcion { padding:40px 10px; margin-right: 0;}
		
		#QuickContacto p span { display: block;}        
		
		#DatosEmpresa figure { margin-bottom: 16px;}
   
   #MasProyectos h2 { font-size: 1.3rem;}
  
   #MasProyectos .Items { max-width: none;} 
   .Items header img { margin: 0;}
   #ListaProyectos {padding-left: 15px; padding-right: 15px;}
}