/*
 * Modificaciones personales
 * El Archivo emovi.css contiene los estilos CSS personalizados del site.
 * @author Sergio Gabriel Navarro Márquez
 * eMovilidad, Soluciones en Tecnología
 * 
*/
/*												*********************************
												Inicia Sección                 */
/*												Termina Sección
												*******************************/
/*html, body {height:100%}*/
html {
	background-color:#002F5E;
	box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
#irkhome {
	padding-top:70px;
	padding-bottom:45px;
	font-family: Arial, Gadget, sans-serif;
	color: #000000;
	font-size:11px;
	background-color:#002F5E;
}
#irkhome h3 {
	color:#F9A136;
}
#irkhome .container {
	height:100%;
	/*overflow: hidden;*/
}
#irkhome .bottomdiv {
	height:45px;
	background-color:#002F5E;
}
/*****	
*****		Secciones
*****/
.pagos {
	color: #F0FFFF;
	font-size: 18px;
	margin:20px 0;
	text-align: center;
}
.pagos h1,
.pagos .mpagos {
	background-color:#244E78;
	padding:10px;
	border-radius: 6px; 
}
.pagos .cuota {
	padding:20px;
	width:50%;
	margin:20px;
	background-color: #fff;
	display:inline-flex;
	justify-content: center;
	align-items: center;
	color: #000;
}
.cuota {
	font-size: 25px;
}
.banco {
	height:70px;
	width:100%;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 20px 0;
}
#banortesvg {
	width:304px;
	height: 50px;
}
#paypalme {
	display: inline-block;
	vertical-align: middle;
	margin:20px;
	width:154px;
	height:53px;
	padding:10px;
	background-color: #fff;
	border-radius: 5px;
	border: solid #000B51 1px;
}
#svgcontactochat {
	display: inline-block;
	vertical-align: middle;
	margin:0 10px;
	width:50px;
	height:50px;
	padding:5px;
	background-color: #fff;
	border-radius: 5px;
	border: solid #000B51 1px;
}
/*												Backgrounds ************/
.emovidemo {
	width:75%;
	height:500px;
	margin:auto;
	border-radius: 10px;
	background-color:#2d2d2d;
}
.emovishad {
	margin:auto;
	position:relative;
	background: #002F5E;
	padding: 7px 7px;
	box-shadow:         inset 0px 0px 25px -1px rgba(0,0,0,0.75), inset 0px 0px 25px -1px rgba(0,0,0,0.75);
}
.bckplanoazul {
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	height:100%;
	width:100%;
	z-index: -1000;
	background-color:#002F5E;
	background-image: url(../svg/bckgds/plano001.svg);
	background-attachment: fixed;
	background-size:cover;
	background-repeat:no-repeat;
}
.bcknegro {
	background: rgb(0, 0, 0); /* The Fallback */
	background: rgba(0, 0, 0, 0.75);
}
.bckceniza {
	background-size: 60px 30px;
	background-image: url(../svg/bckgds/screen1.svg);
}
.bcktramametal {
	background-size: 20px 20px;
	background-image: url(../svg/bckgds/tramametal.svg);
}
.bckholes {
	background-size: 20px 20px;
	background-image: url(../svg/bckgds/holes.svg);
	height:145px;
}
/*																	Terminan Backgrounds*/
hr.dropshadow {
    height: 10px;
    border: 0;
    margin:10px 0px;
	box-shadow: inset 0px 10px 10px -10px rgba(0,0,0,0.85);
}
/*												*********************************
												Inicia Sección de Vectores SVG */
svg#definesvg {
	position:absolute;
	top:-20000px;
	left:-20000px;
}
/*												Sección Intro SVG*/
#introsvg {
	position:fixed;
	top:0px;
	bottom:0px;
	left:0;
	right:0;
	height:100vh;
	width:100vw;
	background-color:#002F5E;
	z-index:10000;
	padding:40px
}
#svgintro {
	position: absolute;
	top:50%;
	left:50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width:80vw;
	height:80vh;
	border:none;
	overflow:visible;
}
/*												Termina Sección de Vectores SVG
												*******************************/
/*												*********************************
												Inicia Sección Menú Principal  */
#irknavbar {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	padding:5px;
}
#irknavmenu {
	background-color:transparent;
}
#alogoirk {
	cursor:pointer;
}
#logowrap {
	height: 60px;
	width: 127px;
	float:left;
	overflow:visible;
}
svg#menuppalsvg {
	height: 100%;
	width: 100%;
	display:block;
	overflow: visible;
}
svg#soloenxsmall {
	display:none;
}
/*												Termina Sección Menú Principal
												*******************************/
/*												*********************************
												Inicia Sección Miembros       */
#wrapmiembros {
	height:100%;
	background-color:#002F5E;
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
	flex-wrap: wrap;
	justify-content:space-between;
	align-content:flex-start;
}
#wrapmiembros div {
	color:#000000;
	background-color: transparent;
	width:100px;
	flex:none;
	margin-bottom:5px;
	
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
	flex-wrap: nowrap;
	justify-content:center;
	align-items:center;
}
#wrapmiembros div img {
	width:100px;
	height:100px;
	cursor:pointer;
}
#wrapmiembros figure {
	position:relative;
}
#wrapmiembros figure .aka {
	position:absolute;
	top:0;
	left:0;
	right:0;
	width:100%;
	bottom:auto;
	color:#FBFA9B;
	background-color:rgba(0, 47, 94, 0.75);
	opacity:0;
}
#wrapmiembros figure:hover .aka {
	opacity:1;
}
#wrapmiembros a.memblink {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	color: transparent;
	text-decoration: none;
	display: block;
}
#wrapmiembros figcaption {
	text-align:center;
	background-color:#FBFA9B;
	/*font-size:10px;*/
}
/*												Termina Sección Miembros
												*******************************/
/*												****************************
												Inicia Sección   Modales   */
#modal-gen .modal-header,
#modal-gen .modal-footer {
	background-color:#FBFA9B;
}
#modal-gen .modal-body {
	background-color:#002F5E;
}
#irk-modal-gen-resena {
	margin-top:20px;
	color:#FBFA9B;
	font-size:14px;
}
#irk-modal-gen-resena h1 {
	color:#FBFA9B;
	font-size:2em;
	text-align: center;
	border-bottom: 1px #B10029 solid;
}
/*												Padding Hack para videos en Modales
 * Las dimensiones del video ARsvg = 560 / 315
 * De donde, padding-top = (pw * SVGh) / SVGw
 * Para 50% PH = 0.5 * 315 / 560 = 0.5 * 0.5625 = 0.28125 => padding-top = 28.125%
 * para 75% padding-top = 0.75 * 0.5625 = 0.4218 => 42.18%
 * para 100% padding-top = 1 * 0.5625 = 56.25%
 */
.videowrapper {
	height:0;
	position:relative;
	width:50%;
	padding-top:28.125%; /* 50% */
	/*padding-top:42.18%;  75% */
	/*padding-top:56.25%;  100% */
	margin: 10px auto;
	border: 2px solid #FBFA9B;
}
.videowrapper iframe {
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	border:none;
	background-color: transparent;
}
/*												Termina Sección  Modales
												***************************/
/*												****************************
												Inicia Sección SlideShow **/
#irkslidewrapper {
	position:relative;
	width:100%;
	height: 0;
	padding-top: 40%;
	overflow: hidden;
}
.irk-slideshow {
    /* Estilos de la <ul> lista que contiene los spans de las imágenes o slides */
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 100;
    list-style-type: none; 
    padding:0;
    background-color:#002F5E;
	background-image: url(../images/slidermod/sliderbck.jpg);
	box-shadow: inset 0px 0px 25px -1px rgba(0, 47, 94, 0.75), inset 0px 0px 25px -1px rgba(0, 47, 94, 0.75);
	background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
}
/*												****************************
												Estilos Para los spans    */
.irk-slideshow li > span {
	/* slides */
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	color: transparent;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat:no-repeat;
	z-index: 100;
	opacity: 0;
	padding: 7px 7px;
	box-shadow: inset 0px 0px 25px -1px rgba(0, 47, 94, 0.75), inset 0px 0px 25px -1px rgba(0, 47, 94, 0.75);
}
/*												****************************
												Imágenes de los slides    */
/*#span01 { background-image: url(../images/slider/depa001.jpg); }*/
/*												**************************
												accesorios Slide		*/
.slidepointer {
	position:absolute;
	border-radius: 50%;
	width:25px;
	height:25px;
	background: transparent;
	cursor:pointer;
	z-index: 200;
}
.sliderpoint {
	width:100%;
	height:100%;
}
#slider-ff {
	right:25px;
	bottom:15px;
}
#slider-play {
	right:60px;
	bottom:15px;
}
#slider-pause {
	right:95px;
	bottom:15px;
}
.slide-status {
	fill:#F9A136;
}
/*												Termina Sección Slideshow	*****/
/*												Sección Formato Contacto 	*************/
.detwrapcontact {
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	width:100%;
	height:100%;
	padding:0px 25px;
	overflow:auto;
	display:flex;
	justify-content: center;
	align-items:flex-start;
}
#emoviform {
	margin-top:30px;
}
.form-control:focus {
	border-color: #F9A136;
}
#form-submit span.glyphicon {
	margin-right: 15px;
}
.btn-emovi {
	color: #FFFFFF;
	background-color:#0066CC;
	border-color: #0066CC;
}
.btn-emovi:hover {
	color:#000000;
	text-decoration: none
}
#emovimsjerr {
	text-align:center;
	margin-top:20px;
	display:none;
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
	-webkit-animation-iteration-count: 2;
	animation-iteration-count: 2;
	
}
#emovimsjerr.msjexito,
#emovimsjerr.msjerror {
	display:block;
}
.msjexito {
	color:#00CCFF;
}
.msjerror {
	color:#F9A136;
}
/*												Termina Sección Formato Contacto *********/
/*												Padding Hack para listas*/
.padding-hack-wrapper {
	height:0;
	position:relative;
	width:100%;
	padding-top:100%;
}
.padding-hack-svg {
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	border:none;
	background-color: transparent;
}
/*												Termina Sección listas
												***************************/											
/*												*********************************
												Inicia Sección   Footer       */
.footer {
	position: fixed;
	display: none;
	border-top: 5px solid #B10029;
	bottom: 0;
	height: 45px;
	width: 100%;
	background-color: #fff;
	overflow: visible;
	z-index: 15;
}
.footer-left,
.footer-right {
	float:left;
    width:50%;
    height:100%;
}
.footer svg {
	background-color:#FFFFFF;
	float:right;
	height:100%;
	width:41px;
	border-right: 1px #002F5E solid;
	padding: 10px;
	-webkit-transform: translate(0,0);
	transform: translate(0, 0);
	transition: -webkit-transform 200ms;
	transition: transform 200ms;
	transition: transform 200ms, -webkit-transform 200ms;
}
.footer svg:hover {
	-webkit-transform: translate(0, -10px);
	transform: translate(0, -10px);
}
/*												Termina Sección  Footer
												*******************************/
/*												*********************************
												Inicia Sección  Utilitarios    */
/*												Aviso irk	********************/
/*												utilerías**********************/
section#tools {
	*display:none;
}
#svgshow {
	display:-webkit-flex;
	-webkit-flex-wrap:wrap;
	
	display:flex;
	flex-wrap:wrap;
}
#svgshow div {
	flex: 0 0 25%;
	margin:10px;
	background-color:#0066CC;
	display:-webkit-flex;
	-webkit-justify-content: center;
	
	display:flex;
	justify-content: center;
}
#svgshow svg {
	width:80%;
	height:80%;
	flex: 0 0 80%;
}
#emoviinfo {
	color:#FBFA9B;
	position: fixed;
	bottom:0;
	left:0;
	width:300px;
	min-height: 90px;
	max-height: 750px;
	overflow:scroll;
	z-index:1031;
}
/*												Termina Sección utilitarios
												*******************************/
/*												****************************
												Inicia Sección media queries  */
/**********
 ********** Bootstrap Medium col-md
 ********** 992 <= ancho Pantalla < 1200
 **********
 **********/
@media screen and (min-width: 992px) and (max-width: 1199px) {	
	
} /* Termina media Medium (992 <= screen < 1200px) */
/**********
 ********** Bootstrap Small (iPads)
 ********** 768 <= ancho Pantalla < 992
 ********** (Windows IE)
 **********/
@media screen and (min-width: 768px) and (max-width: 991px) {
	.videowrapper {
		width:75%;
		/*padding-top:28.125%; /* 50% */
		padding-top:42.18%;    /* 75% */
		/*padding-top:56.25%;  100% */
	}	
} /* Termina media small (768 <= screen < 992px) */
/**********
 ********** Bootstrap Xtra Small
 ********** 504 <= ancho Pantalla < 768
 ********** el ancho donde se despliegan los elementos de las listas es 30px menor al ancho del viewport
 **********
 **********/
@media screen and (min-width: 504px) and (max-width: 767px) {	
	.videowrapper {
		width:75%;
		/*padding-top:28.125%; /* 50% */
		padding-top:42.18%;    /* 75% */
		/*padding-top:56.25%;  100% */
	}
} /* Termina media xs-1 (504 <= screen < 768px) */
/**********
 ********** Bootstrap Xtra Small2
 ********** 414 <= ancho Pantalla < 504
 ********** iPhone 6Plus (414 x 736)
 **********
 **********/
@media screen and (min-width: 414px) and (max-width: 503px) {
	.videowrapper {
		width:100%;
		/*padding-top:28.125%; /* 50% */
		/*padding-top:42.18%;   75% */
		padding-top:56.25%;  /* 100% */
	}
} /* Termina media xs-2 (414 <= screen < 504px) */
/**********
 ********** Bootstrap Xtra Small3
 ********** 375 <= ancho Pantalla < 413
 ********** iPhone 6Plus Display Zoom (414 x 736)
 ********** iPhone 6 (375 x 667)
 **********/
@media screen and (min-width: 375px) and (max-width: 413px) {
	.videowrapper {
		width:100%;
		/*padding-top:28.125%; /* 50% */
		/*padding-top:42.18%;   75% */
		padding-top:56.25%;  /* 100% */
	}
} /* Termina media xs-3 (375 <= screen < 414px) */
/**********
 ********** Bootstrap Xtra Small4
 ********** 0 <= ancho Pantalla < 374
 ********** iPhone 6 (Display Zoom), iPhone 5, 5s (320 x 568)
 ********** iPhone 4, 4s, 3G, 3GS, 2G  (320 x 480)
 ********** Barra irk = 50
 **********/
@media screen and (max-width: 374px) {
	#wrapmiembros {
		justify-content:space-around;
	}
	.videowrapper {
		width:100%;
		/*padding-top:28.125%; /* 50% */
		/*padding-top:42.18%;   75% */
		padding-top:56.25%;  /* 100% */
	}
} /* Termina media xs-4 (screen < 375px) */
/*												Termina Sección Media Queries
												*******************************/
/*												****************************
												Inicia Sección Fonts      */
@font-face {
    font-family: irkFontNormal;
    src: url(../fonts/glyphicons-halflings-regular.ttf);
    font-stretch:extra-condensed;
    font-style: oblique;
}