/*  css-style - 2026  */
/*	Diana y Tony	  */
/*  ====================== COSAS QUE SON VARIABLES ====================== */

	/*	FORMATOS DE TEXTO	*/
	#bmx-main > h2 { font-stretch: 75%; font-weight: 400; font-style: normal; color: #D13138; 
		font-size: 2em;
		margin: 20px auto;
		padding: 0px;
		line-height: 1em;
		display: flex;
	}
	
	#bmx-main > h2::before { content: ""; flex: 0 0 20%; border-top: 1px solid rgba(209, 49, 56, 0.3); margin-right: 0.5em; background: url("assets/icon-h2-height.svg") no-repeat right bottom; background-size: auto 32px;
	}
	#bmx-main > h2::after { content: ""; flex: 1; border-bottom: 1px solid rgba(209, 49, 56, 0.3); margin-left: 0.5em;
	}
	
	
	/*	NAVBAR	*/
	#bmx-navbar  {
		min-width: 1100px;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100px;
		line-height: 100px;
		box-shadow: 0px 5px 20px rgba(0,0,0,0.5);
		top: 0px;
		left: 0px;
		z-index: 1000;
		vertical-align: middle;
		text-align: center;
		background-color: #D13138;
		background-image: url("assets/img-navbar-background.jpg");
		background-size: 400px 351px;
		background-repeat: repeat;
		border-bottom: 2px #D13138 solid;
		animation: bg-move 40s linear infinite;
		text-transform: uppercase;
	}
		@keyframes bg-move {
	  	from {
			background-position: 0 0;
	  	}
	  	to {
			background-position: -400px 0; /* move right by one background tile width */
	  	}
		}
		#bmx-navbar > div, #bmx-navbar > img, #bmx-navbar > a {
			position: relative;
			line-height: inherit;
			vertical-align: middle;
			display: inline-block;
			color: white;
			margin: 0px 1%;
		}
		#bmx-navbar a {
			color: white;
		}
	
		#bmx-navbar-logotipo {
			height: 50px;
			width: auto;
		}
		#bmx-navbar-extras {
			font-size: 0.7em;
			height: auto;
		}
			#bmx-navbar-extras > div {
				line-height: 1em;
				display: block;
			}
				#bmx-navbar-extras > div > img{
					margin: 0px .5em;
					display: inline-block;
					height: 25px;
					width: auto;
	
				}
				#bmx-navbar-extras > div:first-child {
				}
				#bmx-navbar-extras > div:last-child {
					margin-top: 10px;
				}
				
				
			
	#bmx-main {		
		padding: 100px 0px 0px 0px;
		margin: 0px;
		width: 100%;
		text-align: center;
		background: url('assets/img-background-plano.jpg') no-repeat center center;
	}
		
	#bmx-footer {		
		color: white;
	}
		#bmx-footer > * {
			margin: 0px;
			padding: 0px;
			display: block;
		}
		#bmx-footer a {
			color: white;
			text-decoration: underline;
		} 
		#cnv-footer {
			background: #D13138;
			margin: 0px;
			width: 100%;
			height: 250px;
		}
		#bmx-footer-info {
			background: #2F2F2F;
			text-transform: uppercase;
			height: 50px;
			text-align: center;
			line-height: 50px;
			vertical-align: middle;
		}
/*  ====================== SLIDERS ====================== */
	@keyframes slideLeft {
		from { transform: translateX(0); }
		to { transform: translateX(-500%); }
	}
	/* COSAS PARA CUALQUIER SLIDER */
	.slider {
		width: 100%;
		height: 300px;
		position: relative;
		overflow: hidden;
	}
		/* VARIANTE EN PARTICULAR */
		.slider-horizontal {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: stretch;
			animation-play-state: running;
		}
			.slider-horizontal:hover {
				animation-play-state: paused;
			}
	/* COSAS PARA CUALQUIER DIAPOSITIVA INDIVIDUAL */
	.slide-general { 
		background-position: center center;
		background-size: cover;
	}
	/* SLIDER DE EMPLEOS EN PARTICULAR */
	#bmx-main-sliderempleos {} 
	/* DIAPOSITIVA DE EMPLEOS EN PARTICULAR */
	.slide--empleos { 
		animation: slideLeft 20s linear infinite;
		height: 100%;
		width: 300px;
		flex-shrink: 0;
		animation-play-state: inherit;
		transition: 0.3s;
	}
		.slide--empleos:hover{
			opacity: 0.9;
		}

/*  ====================== JOBS SLIDER ====================== */
	#bmx-main-empleos {}
	#bmx-main-empleos-LBOTON {background-position: right center; transform: rotate(180deg);}
	#bmx-main-empleos-RBOTON {background-position: right center;}
	.jobs-gallery {
		width: 100%;
		min-height: 600px;
		display: flex;
		flex-flow: row nowrap;
		align-items: stretch;
		margin-top: 50px;
		margin-bottom: 50px;
	}
	.jobs-button {
		flex: 1 1 10%;
		cursor: default;
		background-repeat: no-repeat;
		background-size: auto 50%;
		transition: 0.3s;
	}
	.jobs-button:hover {
		transition: 0.3s;
		opacity: 0.7;
	}
	.jobs-button:active {
		opacity: 1;
		transition: none;
	}
	.jobs-content {
		padding: 0px 2%; 
		display: flex;
		flex: 3 1 50%;
		flex-flow: row wrap;
		align-content: stretch;
		justify-content: space-evenly;
		gap: 30px 2%;
	}
	.jobs-content-ijob {
		cursor: pointer;
		flex: 1 1 20%;
		min-height: 220px;
		min-width: 300px;
		max-width: 25%;
		display: flex;
		flex-flow: column nowrap;
		transition: 0.2s;
	}
		.jobs-content-ijob:hover {
			opacity: 0.8;
			transform: scale(1.02);
		}
		.jobs-content-ijob div {
			text-align: left
		}
		.jobs-content-ijob div:first-child {
			flex: 3 1 100%;
			min-height: 160px;
			max-height: 200px;
			background-color: gray;
			background-image: url('assets/img-logo.svg');
			background-position: center center;
			background-size: auto 30%;
			background-repeat: no-repeat;
			border-radius: 10px;
			text-align: left;
			margin-bottom: 8px;
		}
		.jobs-content-ijob div:last-child {
			padding: 0px 5%;
			line-height: 1em;
		}
			.jobs-content-ijob div:last-child span:first-child {
				text-transform: uppercase;
				font-size: 1.2em;
				letter-spacing: 1px;
				
			}
			.jobs-content-ijob div:last-child span:last-child {
				font-size: 0.9em;
				color: grey;
				letter-spacing: 1px;
			}
		
	
/*  ====================== CÓDIGO VIEJO  DE OTROS PROYECTOS PARA RE-UTILIZAR ====================== */
	
	#temp-slide {
		width: 100%;
		height: 300px;
		display: block;
		background-image: url('assets/temp-empleos.jpg'); 
		background-repeat: repeat-x;
		animation: bg-move2 40s linear infinite;
	}
	@keyframes bg-move2 {
  	from {
	  	background-position: -100% 0;
		}
		to {
	  	background-position: 0% 0;
		}
 	}
	
	#m-contact {
		height: auto;
		padding: 50px 0px 100px !important;
		font-family: "opensans";
		font-stretch: 75%; 
		font-weight: 400;
		font-style: normal;
	}	
		.form-row {
			width: 50%;
			margin: 0px auto;
			display: grid;
			grid-template-columns: max-content 1fr; /* labels auto width, inputs fill remaining space */
			gap: 10px; /* space between label and input */
			margin-bottom: 10px; /* space between rows */
		}
		.form-row input {
	  	width: 100%; /* inputs align to left and expand */
	  	box-sizing: border-box;
		}
		.form-row label {
			text-align: right;
		}
		label {
			display: block;
			font-size: 14px;
			line-height: 14px;
			color: black;
			margin: 15px auto 5px;
			text-transform: uppercase;
		}
		.forms {
			background-color: transparent;
			border: none;
			border-bottom: 1px dashed #9D9D9D;
			margin: 0px auto 15px;
			width: 40%;
			display: block;
			font-size: 24px;
			line-height: 30px;
			color: black;
			text-transform: uppercase;
			font-family: "opensans";
			font-stretch: 75%; 
			font-weight: 400;
			font-style: normal;
		}
		label[for="form-id"]{
			margin-top: 35px !important;
		}
		label[for="form-resume"] {
			margin-top: 20px !important;
		}
		#form-resume {
			margin-bottom: 30px;
		}
		input[type="file"] {
			font-size: 14px;
			border: 1px dashed #9D9D9D;
			border-radius: 10px;
			padding: 20px 5%;
			font-family: "opensans";
			font-stretch: 75%; 
			font-weight: 400;
			font-style: normal;
		}
		.filewidth {
			width: 80%;
		}
		input::file-selector-button {
			font-size: 14px;
			text-transform: uppercase;
			border: none;
			border-radius: 10px;
			padding: 5px 5%;
			color: white;
		}
		.filetexts {
			font-size: 10px;
			line-height: 8px;
		}
		.file-label {
			display: block;
			background-image: url('https://empleo.iscisa.com.mx/assets/icon-empleo-subir.svg') !important;
			background-size: 15px 15px;
			background-repeat: no-repeat;
			background-position: center center;
			font-size: 14px;
			font-family: 'Gidole';
			width: 80%;
			border: 1px dashed rgba(239, 63, 54, 0.4);
			border-radius: 10px;
			padding: 20px 5%;
		}
		.dmin-form-mini {
			display: none;
		}
		.file-label-green {
			filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(60%) contrast(119%);
		}
		#form-terms {
			width: 100%;
			margin: 0px auto;
			text-align: center;
		}
		#form-agree {
			width: 20px; 
			display: inline-block; margin-right: 20px
		}
		label[for="form-agree"] {
			line-height: 24px;
			display: inline;
			text-align: center;
			width: auto;
			font-size: 20px;
		}
		label[for="form-agree"] a {
			color: #D13138 !important;
			
		}
		.forms-send {
			background: none;
			padding: 20px 90px;
			font-family: "opensans";
			font-stretch: 75%; 
			font-weight: 400;
			font-style: normal;
			display: block;
			border: none;
			margin: 40px auto 30px;
			color: black;
			font-size: 3em;
			text-transform: uppercase;
		}
		::placeholder { 
	  	color: #BABFD4;
	  	opacity: 1;  
		}
		:-ms-input-placeholder {
	  	color: #BABFD4;
		}
		::-ms-input-placeholder { 
	  	color: #BABFD4;
		}
	/* EDITAR */

/* DMIN */
	#main {
		height: available;
	}
	#dmin {
		width: 100%;
		display:flex;
		vertical-align: middle;
		margin: 0px;
	}
	.dmin-sides {
		display: inline-block;
		vertical-align: middle;
	}
	#dmin-side-A {
		width: 25%;
		background: #f6f6f6;
		border-right: 1px #ccc solid;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-shadow: 10px 0px 20px rgba(0,0,0,0.1);
		vertical-align: top;
	}
	#dmin-side-B {
		vertical-align: top;
		width: 75%;
		height: available;
		overflow-x: scroll;
	}
	.dmin-form {
		width: 90%;
	}
	.dmin-label{
		width: 90%;
	}
	.dmin-form-send {
		padding: 10px 70px;
		margin: 20px auto 30px;
		color: white;
		background:red;
		font-size: 30px;
		text-transform: uppercase;
		font-weight: bold;
		border-radius: 20px;
	}
	/* -----------	EDITOR  -----------  */
	#edit-tabla {
		display: flex;
		max-width: 100%;
		margin: 0px;
		border: none;
		border-collapse: collapse;
	}
		#edit-tabla td {
			border: 1px solid #e6e6e6;
			text-align: center;
			font-size: 13px;
			padding: 10px;
		}
		#edit-tabla th {
			border: none;
			text-align: center;
			font-size: 13px;
			padding: 10px;
		}
		#edit-tabla th:not(:first-child), #edit-tabla th:not(:last-child) {
			border-right: 1px solid rgba(255,255,255,0.1);
			border-left: 1px solid rgba(255,255,255,0.1);
		}
			#edit-tabla th{}
			
			#edit-row {
				text-align: center;
			}
				#edit-row-A {
					text-align: center;
				}
				#edit-row-B {
					text-align: center;
				}
	.edit-headers {
		background: #D13138;
		color: white;
		font-weight: 200;
		font-style: normal;
		text-transform: uppercase;
		vertical-align: middle;
		font-size: 14px;
	}
		.edit-headers th {
			padding: 10px;
		}
	.edit-image {
		max-width: 100px;
		max-height: 100px;
		width: 50%;
	}
	.filewidth {
		width: 80%;
	}
	input::file-selector-button {
		font-size: 14px;
		font-family: 'Now';
		text-transform: uppercase;
		border: none;
		border-radius: 10px;
		padding: 5px 5%;
		color: white;
		background-color: #EF3F36;
	}
	#dmin-icon-vacante {
		width: 20px;
		max-height: 14px;
	}
	#dmin-icon-ver {
		width: 20px;
		max-height: 20px;
	}
	.dmin-pic {
		font-weight: bold;
		text-transform: uppercase;
	}
	.dmin-pic a {
		text-decoration: none;
		color: #EF3F36;
		display: block;
	}
	.dmin-text {
		border: none;
		width: 250px;
		height: 100%;
		max-height: 200px;
		box-sizing: border-box;
		resize: none;
	}
	.dmin-textarea {
		border: none;
		width: 250px;
		max-height: 200px;
		color: #EF3F36;
	}
	.dmin-modifybutton {
		background: #EF3F36;
		border: none;
		margin-bottom: 15%;
		text-transform: uppercase;
		border-radius: 4px;
		color: white;
	}
	
	.dmin-deletebutton, .dmin-deletebutton:active, .dmin-deletebutton:visited{
		color: #EF3F36;
		text-decoration: none;
		text-transform: uppercase;
	}
	
	.dmin-deletebutton:hover {
		color: #f58e89;
	}
	
	
	#lightbox {
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.8);
		position: fixed;
		top: 0;
		left: 0;
		margin: 0px auto;
		z-index: 2000;
		text-align: center;
		vertical-align: middle;
		line-height: 10%;
		opacity: 0;
		display: none;
	}
		#lightbox img {
			width: 10%;
			max-width: 100%;
			max-height: 100%;
			position: absolute;
			top: 50%;
			left: 50%;
			-ms-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			filter: drop-shadow(0px 5px 8px rgb(0 0 0 / 0.3));
		}
		
	/*		VACANTE		 */
	
	#vacante {
		width: 100%;
		margin: 30px auto 200px;
	}
		#vacante h2 {
			margin: 140px auto 10px;
			text-transform: uppercase;
			font-weight: 200;
			color: #EF3F36;
			line-height: 30px;
			font-size: 30px;
		}
		#vacante h1 {
			margin: 10px auto 10px;
			text-transform: uppercase;
			font-weight: bold;
			font-size: 60px;
			line-height: 60px;
		}	
		#vacante h3 {
			margin: 10px auto 10px 20px !important;
			text-transform: uppercase;
			font-weight: 200;
			font-size: 20px;
			line-height: 20px;
		}
		#vacante>div {
			display: block;
			vertical-align: top;
		}
		#vacante>div:first-child {
			margin: 0px auto;
			padding: 0px;
			width: 80%;
		}
			.vac-pics {
				width: 100%;
				min-height: 300px;
				display: block;
			}
		
		#vacante>div:last-child {
			width:80%;
			margin: auto;
			padding: 0px;
		}
			#vacante>div:last-child>p {
				margin: 20px auto;
				max-width: 100%;
				font-size: 25px;
				text-align: justify;
			}
	.showmanWhite {
				max-width: 80%;
				padding: 10px 10% 25px !important;
				background-color:white;
				color: #EF3F36;
				text-align: center;
			}
			.showmanWhite>h1 {
				font-weight: 200;
				font-size: 70px;
				text-transform: uppercase;
				margin: 0px;
			}
			.showmanWhite>h2 {
				font-weight: 400;
				font-size: 24px;
				text-transform: uppercase;
				margin: 0px;
				line-height: 24px;
			}
			.showmanWhite>h2::after {
				position: relative;
				content: "";
				margin-left: 5px;
				display: inline-block;
				vertical-align: middle;
				background-repeat: no-repeat;
				background-position: center center;
				background-size: contain;
				background-image: url('https://empleo.iscisa.com.mx/assets/icon-downarrow-red.svg');
				width: 15px;
				height: 15px;
				animation-name: pointdown;
				animation-duration: 1s;
				animation-iteration-count: infinite;
			}
			.showmanWhite>h2::before {
				position: relative;
				content: "";
				margin-right: 5px;
				display: inline-block;
				vertical-align: middle;
				background-repeat: no-repeat;
				background-position: center center;
				background-size: contain;
				background-image: url('https://empleo.iscisa.com.mx/assets/icon-downarrow-red.svg');
				width: 15px;
				height: 15px;
				animation-name: pointdown;
				animation-duration: 1s;
				animation-iteration-count: infinite;
			}
		#m-otrasvacantes {
			width: 80% !important;
			margin: 0px auto;
			padding: 40px 10%!important;
			text-align: center;
		}	
		.vac-slide {
			vertical-align: top;
			display: inline-block;
			width: 30%;
			height: 300px;
			background: #EFF2FF;
			text-decoration: none;
			color: #EF3F36;
			margin: 10px 20px;
		}
			.vac-slide-innerimg {
				width: 100%;
				height: 100%;
				background-size: cover;
			}
			.vac-slide-mainimg {
				width: 100%;
				height: 50%;
				background-image: url("https://empleo.iscisa.com.mx/assets/img-empleo-background-icon.jpg");
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
			}
			
			.vac-slide h1 {
				text-align: left;
				width: 90%;
				margin: 20px auto 10px;
				overflow: hidden;
				font-weight: bold;
				text-transform: uppercase;
				line-height: 26px;
				font-size: 30px;
			}
			.vac-slide h2 {
				text-align: left;
				width: 90%;
				margin: 5px auto;
				overflow: hidden;
				font-weight: 200;
				text-transform: uppercase;
				line-height: 20px;
				font-size: 20px;
			}
			.vac-slide p {
				width: 90%;
				margin: 2px auto;
				text-align: justify;
				text-transform: uppercase;
			}
			
				
	
	/* FIN EDITAR */
	/* MOBILE */
	@media only screen and (max-width: 399px) {
		#bmx-footer {		
			display: none;
		}
		#bmx-navbar  {
			min-width: 100%;
		}
			#bmx-navbar > div, #bmx-navbar > img, #bmx-navbar > a {
				position: relative;
				line-height: inherit;
				vertical-align: middle;
				display: inline-block;
				color: white;
				margin: 0px 1%;
			}
			#bmx-navbar a {
				color: white;
			}
		
			#bmx-navbar-logotipo {
				height: 50px;
				width: auto;
			}
			#bmx-navbar-extras {
				display: none !important;
			}
		.form-row {
			text-align: center;
			width: 90%;
			display: block;
			
		}
		.form-row * {
			width: 100%;
			display: block !important;
			box-sizing: content-box;
		}
			
	}
	
				
				@media only screen and (max-width: 799px) {
					.showman>h1 {
						font-size: 45px;
					}
					.showman>h2 {
						font-size: 18px;
						line-height: 18px;
					}
					.oferta {
						max-width: 65%;
						font-size: 30px;
						padding: 50px 0% 50px 13%;
					}
					.oferta li:before{
						width: 15px;
						height: 15px;
						top: 20px;
						left: -27px;
					}
					#m-sonora h1 {
						font-size: 50px;
						line-height: 50px;
					}
					#m-sonora h2 {
						font-size: 30px;
					}
					#m-empresas {
						width: 80% !important;
						padding: 40px 10%!important;
					}
					.m-empresas-logos {
						min-height: 80px;
						min-width: 80px;
						margin: 10px;
					}
					#m-contact {
						padding: 35px 0px 70px !important;
					}	
						label {
							width: 60%;
							font-size: 16px;
							line-height: 16px;
							margin: 15px auto 5px;
						}
						.forms {
							background-size: 600px 39px;
							margin: 0px auto 15px;
							width: 60%;
							font-size: 24px;
							line-height: 30px;
						}
						label[for="form-id"]{
							margin-top: 35px !important;
						}
						label[for="form-resume"] {
							margin-top: 20px !important;
						}
						#form-resume {
							margin-bottom: 30px;
						}
						input[type="file"] {
							font-size: 16px;
							width: 40%;
							border: 1px dashed rgba(239, 63, 54, 0.4);
							border-radius: 10px;
							padding: 20px 5%;
						}
						#form-terms {
							width: 60%;
							margin: 20px auto;
						}
						input[type="checkbox"] {
							margin: 0px 10px;
							width: 20px;
							height: 20px;
							border: 1px solid #EF3F36;
						}
					
						label[for="form-agree"] {
							line-height: 24px;
							font-size: 20px;
						}
						
						.forms-send {
							padding: 20px 90px;
							margin: 40px auto 30px;
							font-size: 60px;
							border-radius: 20px;
						}
				}
				@media only screen and (max-width: 699px) {
					#m-about {
						margin: 30px  auto !important;
					}
					#m-about>div {
						display: block;
						width: 100%;
						padding: 20px 0px;
					}
						#m-about-left {
							width: 100%;
						}
							#m-about-left>img {
								width: 80%;
								padding: 0%;
							}
						#m-about-right {
							width: 100%;
							font-size: 25px;
							text-align: center;
							padding: 0px;
						}
							#m-about-right>p{
								vertical-align: middle;
								max-width: 80%;
								text-align: justify;
								margin: 10px auto;
							}
					.showman>h1 {
						font-size: 45px;
						line-height: 45px;
					}
					.showman>h2 {
					}
					.oferta {
						padding: 40px 0% 50px 6%;
					}
					#m-sonora h1 {
						font-size: 30px;
						line-height: 30px;
					}
					#m-sonora h2 {
						font-size: 20px;
					}
					#m-contact {
						padding: 35px 0px 50px !important;
					}	
						label {
							width: 75%;
							font-size: 16px;
							line-height: 16px;
							margin: 15px auto 5px;
						}
						.forms {
							margin: 0px auto 18px;
							width: 75%;
						}
						input[type="file"] {
							font-size: 20px;
							width: 60%;
							border: 2px dashed rgba(239, 63, 54, 0.4);
							border-radius: 10px;
						}
						#form-terms {
							width: 90%;
							margin: 20px auto;
						}
						label[for="form-agree"] {
							line-height: 24px;
							font-size: 20px;
						}
				}
				 @media only screen and (max-width: 489px) {
					
					#m-empresas {
						 width: 80% !important;
						 padding: 40px 10%!important;
					}
					.m-empresas-logos {
						 min-height: 60px;
						 min-width: 60px;
						 margin: 5px;
					}
					#footer {		
						min-height: 40px;
						max-width: 60%;
						line-height: 16px !important;
						padding: 20px 20%;
					}
				}
				 @media only screen and (max-width: 419px) {
					#navbar {
						  line-height: 84px;
						  font-size: 30px;
					}
						#nav-logo {
							width: 143px;
							height: 35px;
						}
					.oferta {
						max-width: 70%;
						font-size: 28px;
						padding: 40px 0% 50px 13%;
					}
					#m-contact {
						padding: 35px 0px 50px !important;
					}	
						label {
							width: 90%;
							font-size: 16px;
							line-height: 16px;
							margin: 15px auto 5px;
						}
						.forms {
							margin: 0px auto 18px;
							width: 90%;
							font-size: 17px;
						}
						input[type="file"] {
							font-size: 16px;
							width: 70%;
							margin-top:15px;
						}
						#form-terms {
							width: 90%;
							margin: 20px auto;
						}
						label[for="form-agree"] {
							line-height: 24px;
							font-size: 24px;
						}
						.forms-send {
							padding: 10px 50px;
							margin: 40px auto 20px;
							font-size: 50px;
						}
				}