/*title:css_modales_loading_v1.0_06/26/2017 */
/* Blur sobre el contenido web, dicho contenedor tiene que tener la clase 'contentBlur' */
.modal-backdrop.show {
	opacity: .75;
}
.modal-backdrop {
	background: rgba(55,83,95,1);
}
body.modal-open .contentBlur{
	-webkit-filter: blur(2px);
	-moz-filter: blur(2px);
	-o-filter: blur(2px);
	-ms-filter: blur(2px);
	filter: blur(2px);
	-webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;
}
.modal-content{
	background: transparent;
	border:solid 0px #000;
}
.icon > .borderSlim{
	height:2px;
}
.info > .borderSep{
	height:2px;
}
.info h2{
	padding-top:20px;
}
.box > .icon { 
	text-align: center; 
	position: relative; 
}
.box > .icon > .image { 
	position: absolute;
	z-index: 2;
	margin: auto;
	margin-left: auto;
	width: 88px;
	height: 88px;
	border: 8px solid white;
	line-height: 88px;
	border-radius: 50%;
	background: #428bca;
	background-color: rgb(66, 139, 202);
	vertical-align: middle;
	top: -60px;
	left: 50%;
	margin-left: -44px; 
}
.box > .icon > .image > i { 
	font-size: 36px !important; 
	color: #fff !important; 
	line-height: 70px;
}
.box > .icon:hover > .image > i { 
	color: white !important; 
}
.box > .icon > .info { 
	margin-top: 0px; 
	background: rgba(255, 255, 255, 1); 
	padding: 5px 30px 10px 30px; 
}
.box > .icon > .info > h2.title { 
	margin-top:8px;
	font-size: 20px; 
	color: #222; 
	font-weight: 500; 
}
.box > .icon > .info > p { 
	font-size: 13px; 
	color: #666; 
	line-height: 1.5em; 
	margin: 10px 20px;
}
.box > .icon:hover > .info > h2.title, .box > .icon:hover > .info > p, .box > .icon:hover > .info > .more > a { 
	color: #222; 
}
.box > .icon > .info > .more a { 
	font-size: 12px; 
	color: #222; 
	line-height: 12px; 
	text-transform: uppercase; 
	text-decoration: none; 
}
.box > .icon:hover > .info > .more > a { 
	color: #fff; 
	padding: 6px 8px; 
	background-color: #63B76C; 
}
.box .space { 
	height: 30px; 
}

/* CSS loading */
.modalLoading .modal-content{
	background:rgba(255,255,255,1);
}



/* CSS PARA QUE EL MODAL Y EL TEXTO INTERIOR APAREZCAN A MITAD PANTALLA (VERTICAL) */
body.modal-open .modal {
	height: 100%;
} 
body.modal-open .modal .modal-dialog {
	margin: auto;
	min-width: 300px;
	overflow: hidden;
}
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;
	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);   
  }
}