/**************************************
*************************************** 
INICIO 2
***************************************
**************************************/

article > .secuencia {
    width: 823px;
	height: 321px;
    margin: 0 auto 70px;
    position: relative;
	z-index: 1;
	
	bottom: -20px;
	opacity: 0;
	
	-webkit-animation-name: aparecer-desde-abajo;
	-moz-animation-name: aparecer-desde-abajo;
	-o-animation-name: aparecer-desde-abajo;
	animation-name: aparecer-desde-abajo;
	
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
	
	-webkit-animation-timing-function: ease;
	-moz-animation-timing-function: ease;
	-o-animation-timing-function: ease;
	animation-timing-function: ease;
	
	-webkit-animation-iteration-count: 1;
	-moz-animation-iteration-count: 1;
	-o-animation-iteration-count: 1;
	animation-iteration-count: 1;
	
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 1s;
	-o-animation-delay: 1s;
	animation-delay: 1s;
	
	-webkit-animation-direction: normal;
	-moz-animation-direction: normal;
	-o-animation-direction: normal;
	animation-direction: normal;
	
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

article > .secuencia > .sombra-arriba {
    position: absolute;
    left: -8px;
    top: -8px;
}

article > .secuencia > .sombra-abajo {
    position: absolute;
    left: -8px;
    bottom: -12px;
}

article > .introduccion {
    background-color: #0074CA;
    padding: 15px 32px;
    
    -webkit-border-radius: 50px;
    border-radius: 50px;
    
    -webkit-box-shadow:inset 0 0 8px 2px rgba(0,34,60,.95);
    box-shadow:inset 0 0 8px 2px rgba(0,34,60,.95);
    
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
	
	position: relative;
	bottom: -20px;
	opacity: 0;
	
	-webkit-animation-name: aparecer-desde-abajo;
	-moz-animation-name: aparecer-desde-abajo;
	-o-animation-name: aparecer-desde-abajo;
	animation-name: aparecer-desde-abajo;
	
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
	
	-webkit-animation-timing-function: ease;
	-moz-animation-timing-function: ease;
	-o-animation-timing-function: ease;
	animation-timing-function: ease;
	
	-webkit-animation-iteration-count: 1;
	-moz-animation-iteration-count: 1;
	-o-animation-iteration-count: 1;
	animation-iteration-count: 1;
	
	-webkit-animation-delay: 1.2s;
	-moz-animation-delay: 1.2s;
	-o-animation-delay: 1.2s;
	animation-delay: 1.2s;
	
	-webkit-animation-direction: normal;
	-moz-animation-direction: normal;
	-o-animation-direction: normal;
	animation-direction: normal;
	
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

article > .introduccion > .nombre {
    width: 244px;
}

article > .introduccion > .nombre > h1 {
    font-family: pt-sans-bold, Arial, Helvetica, sans-serif;
    font-size: 1.8em;
    text-align: center;
    color: #93D649;
}

article > .introduccion > .texto {
    width: 644px;
    font-size: 1.2em;
    line-height: 120%;
    color: white;
}

article > .enlaces {
    margin-top: 58px;
    min-height: 180px;
    
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
	
	position: relative;
	bottom: -20px;
	opacity: 0;
	
	-webkit-animation-name: aparecer-desde-abajo;
	-moz-animation-name: aparecer-desde-abajo;
	-o-animation-name: aparecer-desde-abajo;
	animation-name: aparecer-desde-abajo;
	
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
	
	-webkit-animation-timing-function: ease;
	-moz-animation-timing-function: ease;
	-o-animation-timing-function: ease;
	animation-timing-function: ease;
	
	-webkit-animation-iteration-count: 1;
	-moz-animation-iteration-count: 1;
	-o-animation-iteration-count: 1;
	animation-iteration-count: 1;
	
	-webkit-animation-delay: 1.4s;
	-moz-animation-delay: 1.4s;
	-o-animation-delay: 1.4s;
	animation-delay: 1.4s;
	
	-webkit-animation-direction: normal;
	-moz-animation-direction: normal;
	-o-animation-direction: normal;
	animation-direction: normal;
	
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

article > .enlaces > a {
    width: 318px;
    height: 180px;
    display: table;
    position: relative;
    text-decoration: none;
}

article > .enlaces > a > .fondo-imagen {
    width: 166px;
    height: 180px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background-image: url(../img/fondo-inicio-servicios.png);
    background-repeat: no-repeat;
    background-position: center;
}

article > .enlaces > a.temas > .fondo-imagen {
    -webkit-transform: translateX(-10px) rotate(45deg);
    -moz-transform: translateX(-10px) rotate(45deg);
    -ms-transform: translateX(-10px) rotate(45deg);
    -o-transform: translateX(-10px) rotate(45deg);
    transform: translateX(-10px) rotate(45deg);
}

article > .enlaces > a.contactenos > .fondo-imagen {
    -webkit-transform: translateX(-10px) rotate(90deg);
    -moz-transform: translateX(-10px) rotate(90deg);
    -ms-transform: translateX(-10px) rotate(90deg);
    -o-transform: translateX(-10px) rotate(90deg);
    transform: translateX(-10px) rotate(90deg);
}

article > .enlaces > a > .imagen {
    width: 135px;
    height: 135px;
    position: absolute;
    left: 25px;
    top: 21px;
    z-index: 2;
    background-color: white;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    border: solid 4px #84D22D;
    
    -webkit-border-radius: 50%;
    border-radius: 50%;
    
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

article > .enlaces > a:hover > .imagen {
    background-size: 105%;
}

article > .enlaces > a.temas > .imagen {
    -webkit-transform: translateX(-15px);
    -moz-transform: translateX(-15px);
    -ms-transform: translateX(-15px);
    -o-transform: translateX(-15px);
    transform: translateX(-15px);
}

article > .enlaces > a.contactenos > .imagen {
    -webkit-transform: translateX(-15px);
    -moz-transform: translateX(-15px);
    -ms-transform: translateX(-15px);
    -o-transform: translateX(-15px);
    transform: translateX(-15px);
}

article > .enlaces > a > .semicirculo {
    position: absolute;
    left: 22px;
    top: 20px;
    z-index: 3;
    
    -webkit-transition: all .35s ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -ms-transition: all .35s ease-in-out;
    -o-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
}

article > .enlaces > a:hover > .semicirculo {
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

article > .enlaces > a.temas > .semicirculo {
    -webkit-transform: translateX(-15px);
    -moz-transform: translateX(-15px);
    -ms-transform: translateX(-15px);
    -o-transform: translateX(-15px);
    transform: translateX(-15px);
    
    -webkit-transition: all .35s ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -ms-transition: all .35s ease-in-out;
    -o-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
}

article > .enlaces > a.temas:hover > .semicirculo {
    -moz-transform: rotate(-180deg) translateX(15px);
    -webkit-transform: rotate(-180deg) translateX(15px);
    -o-transform: rotate(-180deg) translateX(15px);
    -ms-transform: rotate(-180deg) translateX(15px);
    transform: rotate(-180deg) translateX(15px);
}

article > .enlaces > a.contactenos > .semicirculo {
    -webkit-transform: translateX(-15px);
    -moz-transform: translateX(-15px);
    -ms-transform: translateX(-15px);
    -o-transform: translateX(-15px);
    transform: translateX(-15px);
    
    -webkit-transition: all .35s ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -ms-transition: all .35s ease-in-out;
    -o-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
}

article > .enlaces > a.contactenos:hover > .semicirculo {
    -moz-transform: rotate(-180deg) translateX(15px);
    -webkit-transform: rotate(-180deg) translateX(15px);
    -o-transform: rotate(-180deg) translateX(15px);
    -ms-transform: rotate(-180deg) translateX(15px);
    transform: rotate(-180deg) translateX(15px);
}

article > .enlaces > a > .texto {
    width: 147px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 4;
    font-size: .87em;
    line-height: 150%;
    color: #1F3358;
}

article > .enlaces > a > .texto > h1 {
    font-family: pt-sans-bold-italic, Arial, Helvetica, sans-serif;
    font-size: 1.4em;
    position: relative;
    left: -5px;
    
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

article > .enlaces > a:hover > .texto > h1 {
    color: #1D94D3;
}

article > .enlaces > a > .boton {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 5;
    font-family: pt-sans-italic, Arial, Helvetica, sans-serif;
    font-size: .87em;
    color: white;
    background-color: #7DD040;
    background-image: url(../img/fondo-boton-enlace-inicio.jpg);
    background-repeat: no-repeat;
    background-position: center;
    padding: 4px 14px;
    
    -webkit-border-radius: 5px;
    border-radius: 5px;
    
    -webkit-box-shadow: 1px 1px 5px 0 rgba(70,124,31,.99);
    box-shadow: 1px 1px 5px 0 rgba(70,124,31,.99);
    
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

article > .enlaces > a:hover > .boton {
    bottom: 5px;
}