@charset "utf-8";

/*@media (max-width: 1425px) {
	#cnt-imagen-sistema #img-sistema-1 {
		display: none;
	}
	
	#cnt-imagen-sistema #img-sistema-2 {
		display: block;
	}
	
	.cnt-welcome {
		flex-wrap: wrap !important;
	}
}*/

/* 
    ##Device = Desktops
    ##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) and (max-width: 2000px) {
    
}

@media (max-width: 1855px) {
	#cnt-imagen-sistema #img-sistema-1 {
		display: none;
	}
	
	#cnt-imagen-sistema #img-sistema-2 {
		display: block;
	}
	
	/*#cnt-welcome-bg-image {
		flex-wrap: wrap !important;
	}*/
}

@media (max-width: 1415px) {
	#cnt-welcome-bg-image {
		flex-wrap: wrap !important;
	}
	
	#cnt-info-dos {
		flex-direction: row;
	}
}

/* 
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {

}

@media (max-width: 1200px) {
    /*.header-text-directory {
        top: 38px;
        left: 0px;
        font-size: .8rem;
    }*/
	
	.img-directory {
		width: 200px;
	}
}

@media (max-width: 1199px) {
/* 	#cnt-section-welcome-header-img-logos { */
/* 		flex: 0 0 75%; */
/* 	} */
}

@media (max-width: 1130px) {
	/*#cnt-imagen-sistema {
		flex: 1 1 auto;
	}*/
}

@media (max-width: 1129px) {
	#cnt-info-uno {
		flex-direction: row;
	}
}

@media (max-width: 1092px) {
	/*#cnt-welcome-bg-image {
		background-image: url("../../imagenes/edificio_injudet_005.jpg");
		background-repeat: no-repeat;
		background-size: contain;
		background-color: #fff;
	}*/
	
	.cnt-welcome .row:first-child {
		flex-wrap: wrap;
		justify-content: center;
	}
	
    #cnt-informacion-login {
		/*flex: 1 0 100%;*/
	}
	
	.cnt-login {
		flex: 1 0 350px;
	}
	
	.cnt-informacion {
		margin-left: 20px;
		margin-right: 20px;
	}
	
	#cnt-block-login-left {
		/*margin-left: 10px !important;*/
	}
	
	#cnt-block-login-right {
		/*margin-right: 10px !important;*/
	}
}

/* 
    ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
	
}

/* 
    ##Device = Tablets, Ipads (landscape)
    ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

}

@media (max-width: 1024px) {
    #img-banner-welcome-lg,
    #img-banner-welcome-xs {
        display: none !important;
    }

    #img-banner-welcome-sm {
        display: inline !important;
    }
}

@media (max-width: 991px) {
/* 	#section-welcome { */
/* 		width: 100%; */
/* 		padding-right: 15px; */
/* 		padding-left: 15px; */
/* 		margin-right: auto; */
/* 		margin-left: auto; */
/* 	} */
	
/*     #cnt-section-welcome-header-img { */
/*         flex-basis: 70px; */
/*     } */

/*     #img-welcome-header { */
/*         width: 70px; */
/*     } */

    #name-titular {
        margin-right: 6px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
    }

    #reference-titular {
        flex-basis: 100%;
        margin-left: 6px;
        padding-top: 1.6rem;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
    }
    
/* 	#cnt-section-welcome-header-img-logos { */
/* 		flex: 0 0 90%; */
/* 	} */

    .cnt-stage-image {
        margin-bottom: 0rem;
    }

    div#cnt-phase-info-0,
    div#cnt-phase-info-2 {
        margin-left: 1.2rem;
        padding-right: 0rem;
    }

    div#cnt-phase-info-1,
    div#cnt-phase-info-3 {
        margin-right: 1.2rem;
        padding-left: 0rem;
    }

    span.animate-frame-phase {
        position:absolute;
        width: 96%;
        min-width: 96%;
        max-width:inherit;
        height: 99%;
        min-height: 99%;
        max-height: inherit;
    }
}

@media (max-width: 875px) {
	/*body {
		background-image: url("../../imagenes/edificio_injudet_003.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-color: #fff;
	}*/
	
	.cnt-welcome .row:first-child {
	    flex-wrap: wrap;
	}
	
	#cnt-left-welcome,
	#cnt-right-welcome {
    	flex: 1 0 100%;
	}
	
	#cnt-left-welcome {
		order: 1;
	}
	
	#cnt-right-welcome {
    	order: 0;
    	margin-bottom: 1.535rem;
	}
	
	#cnt-block-login-right {
/* 		flex: 0 0 0px !important; */
		flex: 1 1 auto !important;
		/*margin-top: 3rem;*/
	}
}

@media (max-width: 810px) {
	#cnt-info-uno, 
	#cnt-info-dos {
		flex-direction: column;
	}
	
	.cnt-informacion {
		margin: 20px !important;
	} 
}

@media (max-width: 800px) {
    #img-banner-welcome-lg,
    #img-banner-welcome-sm {
        display: none !important;
    }

    #img-banner-welcome-xs {
        display: inline !important;
    }

    .text-phase-header-0,
    .text-phase-header-1,
    .text-phase-header-2,
    .text-phase-header-3 {
        top: 41px;
    }

    .text-phase-header-0 {
        color: #064e1d;
    }

    .text-phase-header-1 {
        color: #F06522;
    }

    .text-phase-header-2 {
        color: #A43393;
    }

    .text-phase-header-3 {
        color: #3D71B5;
    }

    img.icon-phase-body-0,
    img.icon-phase-body-1,
    img.icon-phase-body-2,
    img.icon-phase-body-3 {
        opacity: 1;
        transform: scale(1);
    }

    /*.header-text-directory {
        top: 38px;
        left: 0px;
        font-size: .7rem;
    }*/

    /*.content-text-directory {
        bottom: 0px;
        font-size: .95rem;
        opacity: 1;
    }*/

    .img-directory {
        width: 180px;
    }
}

@media (max-width: 799px) {
    /*section.section-bg-image-pink-polygon {
        width: 100vw !important;
        max-width: 100vw !important;
        height: calc(100vh - 50px) !important;
        max-height: calc(100vh - 50px) !important;
        padding: 0px !important;
        background-image: url('../images/banner/fondo_rosa_tramitab_home_768x1280.svg');
        background-size: cover;
        overflow: hidden;
    }

    section#section-banner img#fondo_tramitab_home_2880 {
        display: none;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    section#section-banner img#fondo_tramitab_home_768 {
        display: block;
        height: calc(100vh - 50px);
        max-height: calc(100vh 50px);
    }*/
}

/* 
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
    span.animate-frame-phase {
        position:absolute;
        width: 95%;
        min-width: 95%;
        max-width:inherit;
        height: 99%;
        min-height: 99%;
        max-height: inherit;
    }
}

@media (max-width: 767px) {
    #main-container .section-base {
        padding: 1.8rem 0px;
    }
    
/* 	#cnt-section-welcome-header-img-logos { */
/* 		flex: 0 0 443px; */
/* 	} */
	
/* 	#cnt-section-welcome-header-img-logos { */
/* 		flex: 0 0 80%; */
/* 	} */
	
/* 	#img-welcome-header { */
/* 		display: none; */
/* 	} */
	
/* 	#img-welcome-header_2 { */
/* 		display: inherit; */
/* 	} */
	
	
    #cnt-img-frame-phase-1,
    #cnt-img-frame-phase-2,
    #cnt-img-frame-phase-3,
    #cnt-img-frame-phase-4 {
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media (max-width: 575px) {
    /*#cnt-section-welcome-header-text > h1 {
        font-size: 2.25rem;
    }
    
    #cnt-section-welcome-header-text > h3 {
        font-size: 1.50rem;
    }*/
	
    .cnt-welcome {
        /*padding-top: 3vh;*/
    }
	
    /*.welcome-title, .content-title {
        font-size: 2rem;
    }

    .content-welcome-text {
        font-size: 1.3rem;
    }

    .welcome-title, .content-title {
        font-size: 1.75rem;
        letter-spacing: .325rem;
    }

    .content-text {
        font-size: 1.25rem;
        letter-spacing: 0.03rem;
    }

    .phase-info-content, .phase-info-content-2 {
        font-size: .98rem;
    }

    .phase-info-title {
        font-size: 1.35rem;
    }*/

/*     #cnt-section-welcome-header { */
/*         flex-direction: column; */
/*     } */

/*     #cnt-section-welcome-header-img { */
/*         flex-basis: 80px; */
/*     } */

/*     #img-welcome-header { */
/*         width: 80px; */
/*     } */

    #cnt-section-welcome-header-text {
        padding-top: 1rem;
        text-align: center;
    }
}

@media (max-width: 571px) {
    div.cnt-stage-image {
        margin-bottom: 1rem;
    }

    div.cnt-phase {
        flex: 1 1 100%;
        order: 0;
    }

    div.cnt-phase-info {
        flex: 1 1 100%;
        order: 1;
    }

    div#cnt-phase-info-1,
    div#cnt-phase-info-3 {
        margin-left: 1.2rem;
    }

    div#cnt-phase-info-1 > .phase-info-title,
    div#cnt-phase-info-3 > .phase-info-title {
        text-align: left;
    }

    div#cnt-phase-info-0,
    div#cnt-phase-info-1,
    div#cnt-phase-info-2,
    div#cnt-phase-info-3 {
        padding-top: 0.5rem;
    }
}

@media (max-width: 555px) {
    #name-titular {
        text-align: center;
    }
}

/* 
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
*/
@media (min-width: 321px) and (max-width: 480px) {
    span.animate-frame-phase {
        position:absolute;
        width: 94.5%;
        min-width: 94.5%;
        max-width:inherit;
        height: 99%;
        min-height: 99%;
        max-height: inherit;
    }
}

@media (max-width: 480px) {
/* 	#cnt-section-welcome-header { */
/* 		justify-content: center; */
/* 	} */
	
/* 	#cnt-section-welcome-header-img-logos { */
/* 		flex: 1 0 90%; */
/* 	} */
	
/* 	#img-welcome-header_2 { */
/* 		display: none; */
/* 	} */
	
/* 	#img-welcome-header_3 { */
/* 		display: inherit; */
/* 	} */
	
    #map-cmaig {
        height: 300px;
    }
}

@media (max-width: 470px) {
    #name-titular {
        text-align: center;
        padding-top: 1.6rem;
    }

    #reference-titular {
        padding-top: 1.2rem;
    }
}

@media (max-width: 476px) {/*453*/
    div.cnt-stage-image {
        flex-wrap: wrap;
        justify-content: center;
    }

    div.cnt-phase-info {
        flex: 1 1 100%;
    }

    div.cnt-phase-info .phase-info-title {
        text-align: center !important;
    }

    div#cnt-phase-info-0,
    div#cnt-phase-info-1,
    div#cnt-phase-info-2,
    div#cnt-phase-info-3 {
        padding-bottom: 1.6rem;
    }
}

@media (max-width: 450px) {
    span.animate-frame-phase {
        position:absolute;
        width: 94%;
        min-width: 94%;
        max-width:inherit;
        height: 99%;
        min-height: 99%;
        max-height: inherit;
    }
}

@media (max-width: 420px) {
/* 	#cnt-section-welcome-header-img-logos { */
/* 		flex: 1 0 95%; */
/* 	} */
	
    span.animate-frame-phase {
        position:absolute;
        width: 93.5%;
        min-width: 93.5%;
        max-width:inherit;
        height: 99%;
        min-height: 99%;
        max-height: inherit;
    }
}

/* @media (max-width: 390px) { */
/* 	#cnt-section-welcome-header-img-logos { */
/* 		flex: 1 0 100%; */
/* 	} */
/* } */

@media (max-width: 370px) {
    span.animate-frame-phase {
        position:absolute;
        width: 93%;
        min-width: 93%;
        max-width:inherit;
        height: 99%;
        min-height: 99%;
        max-height: inherit;
    }
}

@media (max-width: 350px) {
    span.animate-frame-phase {
        position:absolute;
        width: 92.5%;
        min-width: 92.5%;
        max-width:inherit;
        height: 99%;
        min-height: 99%;
        max-height: inherit;
    }
}

@media (max-width: 320px) {
    span.animate-frame-phase {
        position:absolute;
        width: 91.5%;
        min-width: 91.5%;
        max-width:inherit;
        height: 99%;
        min-height: 99%;
        max-height: inherit;
    }
}

@media (max-width: 280px) {
    span.animate-frame-phase {
        position:absolute;
        width: 90.5%;
        min-width: 90.5%;
        max-width:inherit;
        height: 99%;
        min-height: 99%;
        max-height: inherit;
    }
}

@media (max-width: 260px) {
    span.animate-frame-phase {
        position:absolute;
        width: 90%;
        min-width: 90%;
        max-width:inherit;
        height: 99%;
        min-height: 99%;
        max-height: inherit;
    }

    #map-cmaig {
        height: 200px;
    }
}

@media (max-width: 250px) {
    span.animate-frame-phase {
        position:absolute;
        width: 89.5%;
        min-width: 89.5%;
        max-width:inherit;
        height: 99%;
        min-height: 99%;
        max-height: inherit;
    }
}

@media (max-width: 225px) {
    span.animate-frame-phase {
        position:absolute;
        width: 89%;
        min-width: 89%;
        max-width:inherit;
        height: 99%;
        min-height: 99%;
        max-height: inherit;
    }
}