/* -----------------------------------------*/
/*										 	*/
/* Programador: José Javier Uriola Rojas 	*/
/* Para: 	MinPP-DPSGG					 	*/
/*  		JJUR-2021						*/
/* File:	Base_Intranet.css				*/
/*			Efectos-Web-CSS			 		*/
/*										 	*/
/* -----------------------------------------*/


/* ============================================================================================================================
== 
** ============================================================================================================================ */

/* Underline From Center */
.Effect-underline-from-center,.Effect2-underline-from-center {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
  
	box-shadow: 0 0 1px transparent;
	overflow: hidden;
	border: 0px solid red;
}

.Effect-underline-from-center:before, .Effect2-underline-from-center:before {
	position: absolute;
	content: "";
	left: 50%;
	right: 50%;
	bottom: 0;
	height: 2px; /*4px;*/

	-webkit-transition-property: left, right;
	transition-property: left, right;
  
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	
	z-index: -1;
  
}
.Effect-underline-from-center:before {
	background-color: rgba(245,181,51,.8);
	/*background: #2098D1;*/
}

.Effect2-underline-from-center:before {
	background-color: rgba(255,23,37,1.0);
}

.Effect-underline-from-center:hover:before, .Effect2-underline-from-center:hover:before, 
.Effect-underline-from-center:focus:before, .Effect2-underline-from-center:focus:before, 
.Effect-underline-from-center:active:before, .Effect2-underline-from-center:active:before {
  left: 0;
  right: 0;
}


/* ============================================================================================================================
== 
** ============================================================================================================================ */

/* triangle Bottom */
.Effect-triangle-bottom {
	position: relative;
	display: inline-block;
	vertical-align: middle;
  
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px transparent;
}

.Effect-triangle-bottom:before {
	position: absolute;
    pointer-events: none;
	margin-bottom: 6px;
	content: '';
	border-style: solid;
	
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
  
	-webkit-transition-property: transform;
	transition-property: transform;
	
	left: calc(50% - 10px);
	bottom: 0;
	border-width: 10px 10px 0 10px;
	border-color: #ff0000 transparent transparent transparent;
	
	z-index: -1;
}

.Effect-triangle-bottom:hover:before, 
.Effect-triangle-bottom:focus:before, 
.Effect-triangle-bottom:active:before {
	-webkit-transform: translateY(10px);
	transform: translateY(10px);
}


/* ============================================================================================================================
== 
** ============================================================================================================================ */

/* Bounce To Right */
.Effect2-bounce-to-right {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px transparent;
  
	-webkit-transition-property: color;
	transition-property: color;
	
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
}

.Effect2-bounce-to-right:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/*background: #2098D1;*/
	background-color: rgba(36,91,152,1.0); 
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
  
	-webkit-transition-property: transform;
	transition-property: transform;
  
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
  
	z-index: -1; 
}

.Effect2-bounce-to-right:hover, 
.Effect2-bounce-to-right:focus, 
.Effect2-bounce-to-right:active {
	color: white;
}

.Effect2-bounce-to-right:hover:before, 
.Effect2-bounce-to-right:focus:before, 
.Effect2-bounce-to-right:active:before {
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
  
	-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
	transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}


/* ============================================================================================================================
== 
** ============================================================================================================================ */

/* Icon Pulse Grow */
@-webkit-keyframes Effect3-icon-pulse-grow {
  to {
	-webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
}
@keyframes Effect3-icon-pulse-grow {
  to {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
}


.Effect3-icon-pulse-grow {
	position: relative;
	padding-right: 2.2em;
	display: inline-block;
	vertical-align: middle;
  
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	
	box-shadow: 0 0 1px transparent;
}
.Effect3-icon-pulse-grow:before {
	position: absolute;
	content: "Más de su Interés";
	
	right: 1em;
	padding: 0 1px;
	font-family: FontAwesome;
  
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
  
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}
.Effect3-icon-pulse-grow:hover:before, 
.Effect3-icon-pulse-grow:focus:before, 
.Effect3-icon-pulse-grow:active:before {
	-webkit-animation-name: Effect3-icon-pulse-grow;
	animation-name: Effect3-icon-pulse-grow;
  
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
	
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
  
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	
	-webkit-animation-direction: alternate;
	animation-direction: alternate;
}


[class^="Effect-"] {
	margin: .1em;
	padding: .2em;
	
	cursor: pointer;
	text-decoration: none;
	font-weight: bold;
	
	font-size: 20px;
	color: rgba(36,91,152,1.0); /*#666;*/
	
	background: rgba(255,255,255,1.0);/*#e1e1e1;*/
	
	/* Prevent highlight colour when element is tapped */
	-webkit-tap-highlight-color: rgba(0,0,0,0);

	/* Smooth fonts */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


[class^="Effect2-"] {
	margin: .1em;
	padding: .3em;
	
	cursor: pointer;
	text-decoration: none;
	font-weight: bold;

	font-size: 18px;
	color: rgba(53,53,53,1.0); /*#666;*/

	/*background: rgba(255,255,255,1.0);*//*#e1e1e1;*/

	/* Prevent highlight colour when element is tapped */
	-webkit-tap-highlight-color: rgba(0,0,0,0);

	/* Smooth fonts */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

[class^="Effect3-"] {
	width: 300px;
	margin: .1em;
	padding: .3em;

	cursor: pointer;
	text-decoration: none;
	font-weight: bold;

	font-size: 17px;
	color: rgba(0,0,0,1.0); /*rgba(36,91,152,1.0);*/
	
	/*background: rgba(255,255,255,1.0);*//*#e1e1e1;*/

	/* Prevent highlight colour when element is tapped */
	-webkit-tap-highlight-color: rgba(0,0,0,0);

	/* Smooth fonts */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


/* ============================================================================================================================
== 
** ============================================================================================================================ */


/*+++++++++++++++++++++++++++++++++++++++++*/


.ch-grid {
	margin: 20px 0 0 0;
	padding: 0;
	list-style: none;
	display: block;
	text-align: center;
	width: 100%;
}
.ch-grid:after,

.ch-item:before {
	content: '';
    display: table;
}

.ch-grid:after {
	clear: both;
}

.ch-grid li {
	width: 220px;
	height: 220px;
	display: inline-block;
	margin: 10px;
	border:0px solid red;
	
}


.ch-item {
	width: 60%;/*100%;*/
	height: 60%;/*100%;*/
	border-radius: 50%;
	position: relative;
	cursor: default;
	box-shadow: 
		inset 0 0 0 16px rgba(255,255,255,0.6),
		0 1px 2px rgba(0,0,0,0.1);
		
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}
.ch-img-1 { 
	background-image: url(../../Img/Sistemas/1.png);
}

.ch-img-2 { 
	background-image: url(../../Img/Sistemas/2.png);
}

.ch-img-3 { 
	background-image: url(../../Img/Sistemas/3.png);
}

.ch-img-4 { 
	background-image: url(../../Img/Sistemas/4.png);
}

.ch-info {
	position: absolute;
	width: inherit;
	height: inherit;
	border-radius: 50%;
	opacity: 0;
	
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
	
	-webkit-backface-visibility: hidden;
	
/*	background: rgba(0,168,255, 0.8); rgba(63,147,147, 0.8);*/
	
	background: rgb(255,212,97); /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover,  rgba(255,212,97,1) 0%, rgba(208,148,28,1) 100%); /* FF3.6-15 */
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,212,97,1) 0%,rgba(208,148,28,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: radial-gradient(ellipse at center,  rgba(255,212,97,1) 0%,rgba(208,148,28,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd461', endColorstr='#d0941c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */



}

.ch-info h3 {
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 22px;
	margin: 0 30px;
	padding: 45px 0 0 0;
	height: 140px;
	font-family: 'Open Sans', Arial, sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
	width:150px;
	color: #fff;
	padding: 10px 5px;
	font-style: italic;
	margin: 0 30px;
	font-size: 12px;
	border-top: 1px solid rgba(255,255,255,0.5);
	opacity: 0;
	-webkit-transition: all 1s ease-in-out 0.4s;
	-moz-transition: all 1s ease-in-out 0.4s;
	-o-transition: all 1s ease-in-out 0.4s;
	-ms-transition: all 1s ease-in-out 0.4s;
	transition: all 1s ease-in-out 0.4s;
}

.ch-info p a {
	display: block;
	color: #fff;
	color: rgba(255,255,255,0.7);
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 9px;
	letter-spacing: 1px;
	padding-top: 4px;
	font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
	color: #fff222;
	color: rgba(255,242,34, 0.8);
}

.ch-item:hover {
	box-shadow: 
		inset 0 0 0 1px rgba(255,255,255,0.1),
		0 1px 2px rgba(0,0,0,0.1);
}
.ch-item:hover .ch-info {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

.ch-item:hover .ch-info p {
	opacity: 1;
}




/* ============================================================================================================================
== 
** ============================================================================================================================ */

/*+++++++++++++++++++++++++++++++++++++++++*/


@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.rubberBand:hover{
	  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;

}


.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@media (print), (prefers-reduced-motion: reduce) {
  .animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }
}


/*Efecto animation:	shake (iconos)*/
.Animation_Icon_3 { 
		width: 70px;
		height:70px;
		
		background-image: url(../../Img/Icon/Float/Doc_On.gif);
		border: 0px solid red;		
	
		-webkit-animation:	shake 0.82s infinite;/* Safari 4+ */
		-moz-animation: 	shake 0.82s infinite;/* Fx 5+ */
		-o-animation: 		shake 0.82s infinite;/* Opera 12+ */
		animation: 			shake 0.82s infinite;/* IE 10+ */
		}
		
@keyframes shake 
		{
			10%, 90% 
			{
				transform: translate3d(-1px, 0, 0);
			}
		  
			20%, 80% 
			{
				transform: translate3d(2px, 0, 0);
			}
		  
			30%, 50%, 70% 
			{
				transform: translate3d(-4px, 0, 0);
			}

			40%, 60% 
			{
				transform: translate3d(4px, 0, 0);
			}
		}