/**************************************
*************************************** 
DONAR
***************************************
**************************************/

.titulo:before {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0b95f0+25,06558a+100 */
    background: url(../img/fondo-titulo-donar.png), #0b95f0; /* Old browsers */
    background: url(../img/fondo-titulo-donar.png), -moz-radial-gradient(center, ellipse cover,  #0b95f0 25%, #06558a 100%); /* FF3.6-15 */
    background: url(../img/fondo-titulo-donar.png), -webkit-radial-gradient(center, ellipse cover,  #0b95f0 25%,#06558a 100%); /* Chrome10-25,Safari5.1-6 */
    background: url(../img/fondo-titulo-donar.png), radial-gradient(ellipse at center,  #0b95f0 25%,#06558a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0b95f0', endColorstr='#06558a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    
    background-repeat: no-repeat;
    background-position: center;
}

body > main > div.zona-segura > article > div.contenedor {
	margin-top: 100px;
    padding: 180px 100px 50px;
    background-color: #ECECFB;
    background-image: url(../img/fondo-tema-acerca-de-nosotros.png);
    background-repeat: repeat;
    background-position: center;
    
    -webkit-box-shadow:inset 0 0 10px 0 rgba(0,0,0,.5);
    box-shadow:inset 0 0 10px 0 rgba(0,0,0,.5);
    box-shadow:inset 0 0 10px 0 rgba(0,0,0,.5);
    
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 800px) {
    body > main > div.zona-segura > article > div.contenedor {
        padding: 180px 5% 50px;
    }
}

body > main > div.zona-segura > article > div.contenedor > div.introduccion {
	width: 650px;
    padding: 30px;
    text-align: center;
    line-height: 150%;
    color: white;
    background-color: #1c6ea4;
    background-image: url(../img/fondo-introduccion-donaciones.jpg);
    background-repeat: repeat;
    background-position: center;
    
    position: absolute;
    top: -50px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 800px) {
    body > main > div.zona-segura > article > div.contenedor > div.introduccion {
        padding: 5%;
        width: 90%;
        font-size: .875em;
    }
}

body > main > div.zona-segura > article > div.contenedor > div.introduccion:before {
	content: '';
    display: block;
    width: 146px;
    height: 75px;
    background-image: url(../img/fondo-introduccion-donaciones-izquierda.png);
    background-repeat: no-repeat;
    background-position: right top;
    
    position: absolute;
    left: -105px;
    top: -24px;
    z-index: -1;
}

body > main > div.zona-segura > article > div.contenedor > div.introduccion:after {
	content: '';
    display: block;
    width: 146px;
    height: 75px;
    background-image: url(../img/fondo-introduccion-donaciones-derecha.png);
    background-repeat: no-repeat;
    background-position: right top;
    
    position: absolute;
    right: -105px;
    top: -24px;
    z-index: -1;
}

body > main > div.zona-segura > article > div.contenedor > figure {
	display: table;
    margin: 0 auto;
    padding: 10px 0;
    background-color: #4C6A79;
    
    -webkit-border-radius: 15px;
    border-radius: 15px;
    
    -webkit-animation-name: aparecer-hacia-arriba;
	-moz-animation-name: aparecer-hacia-arriba;
	-o-animation-name: aparecer-hacia-arriba;
	animation-name: aparecer-hacia-arriba;
	
	-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: both;
	-moz-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
}

body > main > div.zona-segura > article > div.contenedor > figure > div {
	width: 368px;
    max-width: 100%;
    height: 164px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

@media screen and (max-width: 480px) {
    body > main > div.zona-segura > article > div.contenedor > figure > div {
        width: 250px;
        height: 125px;
    }
}

body > main > div.zona-segura > article > div.contenedor > div.widget {
	display: table;
    margin: 50px auto 0;
    
    -webkit-animation-name: aparecer-hacia-arriba;
	-moz-animation-name: aparecer-hacia-arriba;
	-o-animation-name: aparecer-hacia-arriba;
	animation-name: aparecer-hacia-arriba;
	
	-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: both;
	-moz-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
}

body > main > div.zona-segura > article > div.contenedor > div.introduccion-2 {
	margin-top: 34px;
    /*text-align: center;*/
    line-height: 120%;
    color: #003366;
    
    -webkit-animation-name: aparecer-hacia-arriba;
	-moz-animation-name: aparecer-hacia-arriba;
	-o-animation-name: aparecer-hacia-arriba;
	animation-name: aparecer-hacia-arriba;
	
	-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: both;
	-moz-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
}