/*title:css_modales_loading_v1.0_06/26/2017-->
/* CSS PARA QUE EL MODAL Y EL TEXTO INTERIOR APAREZCAN A MITAD PANTALLA (VERTICAL) */
body.modal-open .modal {
    /* display: flex !important; */
    height: 100%;
} 
body.modal-open .modal .modal-dialog {
    margin: auto;
	min-width: 300px;
}
body.modal-open .alto_100 {
    display: flex !important;
    height: 100%;
    margin: auto;
} 
.modal-dialog  span{
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: auto;
}
@media(max-width: 768px) {
	.modal-dialog  span{
		text-align:center;
		width:100%;
	}
}
/*  MODAL LOADING "AROS" RODANDO */
.css-aros-container{
	position:relative;
	float:left;
	width: 100%;
}
.css-aros-whirlpool,
.css-aros-whirlpool::before,
.css-aros-whirlpool::after {
	position: absolute;
	/* top: 50%;
	left: 50%; */
	border: 1px solid rgb(204,204,204);
	border-left-color: rgb(0,0,0);
	border-radius: 974px;
		-o-border-radius: 974px;
		-ms-border-radius: 974px;
		-webkit-border-radius: 974px;
		-moz-border-radius: 974px;
}
.css-aros-whirlpool {
	position: relative;
	margin: auto;
	height: 30px;
	width: 30px;
	animation: cssload-rotate 1150ms linear infinite;
		-o-animation: cssload-rotate 1150ms linear infinite;
		-ms-animation: cssload-rotate 1150ms linear infinite;
		-webkit-animation: cssload-rotate 1150ms linear infinite;
		-moz-animation: cssload-rotate 1150ms linear infinite;
}
.css-aros-whirlpool::before {
	content: "";
	margin: 0px 0 0 -12px;
	height: 25px;
	width: 25px;
	animation: cssload-rotate 1150ms linear infinite;
		-o-animation: cssload-rotate 1150ms linear infinite;
		-ms-animation: cssload-rotate 1150ms linear infinite;
		-webkit-animation: cssload-rotate 1150ms linear infinite;
		-moz-animation: cssload-rotate 1150ms linear infinite;
}
.css-aros-whirlpool::after {
	content: "";
	margin: 0px 0 0 -17px;
	height: 35px;
	width: 35px;
	animation: cssload-rotate 2300ms linear infinite;
		-o-animation: cssload-rotate 2300ms linear infinite;
		-ms-animation: cssload-rotate 2300ms linear infinite;
		-webkit-animation: cssload-rotate 2300ms linear infinite;
		-moz-animation: cssload-rotate 2300ms linear infinite;
}
@keyframes cssload-rotate {
	100% {
		transform: rotate(360deg);
	}
}
@-o-keyframes cssload-rotate {
	100% {
		-o-transform: rotate(360deg);
	}
}
@-ms-keyframes cssload-rotate {
	100% {
		-ms-transform: rotate(360deg);
	}
}
@-webkit-keyframes cssload-rotate {
	100% {
		-webkit-transform: rotate(360deg);
	}
}
@-moz-keyframes cssload-rotate {
	100% {
		-moz-transform: rotate(360deg);
	}
}
@media(max-width: 768px) {
	.css-aros-container {
		padding: 10px 0px;
	}
}


/* MODAL LOADING "ARCOS" RODANDO */
.css-arcos-container {
	width: 100%;
	height: 25px;
	text-align: center;
}
.css-arcos-speeding-wheel {
	width: 25px;
	height: 25px;
	margin: auto;
	border: 2px solid rgb(0,0,0);
	border-radius: 50%;
	border-left-color: transparent;
	border-right-color: transparent;
	animation: cssload-spin 575ms infinite linear;
		-o-animation: cssload-spin 575ms infinite linear;
		-ms-animation: cssload-spin 575ms infinite linear;
		-webkit-animation: cssload-spin 575ms infinite linear;
		-moz-animation: cssload-spin 575ms infinite linear;
}
@keyframes cssload-spin {
	100%{ transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes cssload-spin {
	100%{ -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes cssload-spin {
	100%{ -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes cssload-spin {
	100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes cssload-spin {
	100%{ -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@media(max-width: 768px) {
	.css-arcos-container {
		padding: 10px 0px;
	}
}


/* RAYAS MODULARES */
.spinner {
  margin: auto;
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}
.spinner > div {
  background-color: #333;
  height: 100%;
  width: 3px;
  display: inline-block;
  
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}
@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}


/* ARCO RODANDO */
.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
}
.loader {
  color: #333;
  font-size: 4px;
  text-indent: -99999em;
  position: relative;
  width: 10em;
  height: 10em;
  box-shadow: inset 0 0 0 1em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.loader:before,
.loader:after {
  position: absolute;
  content: '';
}
.loader:before {
  width: 5.3em;
  height: 10.5em;
  background: #fff;
  border-radius: 10.2em 0 0 10.2em;
  top: -0.2em;
  left: -0.2em;
  -webkit-transform-origin: 5.2em 5.1em;
  transform-origin: 5.2em 5.1em;
  -webkit-animation: load2 2s infinite ease 1.5s;
  animation: load2 2s infinite ease 1.5s;
}
.loader:after {
  width: 5.3em;
  height: 10.5em;
  background: #fff;
  border-radius: 0 10.2em 10.2em 0;
  top: -0.2em;
  left: 5.2em;
  -webkit-transform-origin: 0px 5.1em;
  transform-origin: 0px 5.1em;
  -webkit-animation: load2 2s infinite ease;
  animation: load2 2s infinite ease;
}
@-webkit-keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* CSS PARA ALINEAR VERTICALMENTE LOS MODALES */
.modal-dialog {
  min-height: -webkit-calc(100vh - 60px);
  min-height: -moz-calc(100vh - 60px);
  min-height: calc(100vh - 60px);
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: auto; 
}
@media (max-width: 768px) {
  .modal-dialog {
    min-height: -webkit-calc(100vh - 20px);
    min-height: -moz-calc(100vh - 20px);
    min-height: calc(100vh - 20px);   
  }
}