.Task3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
	position: absolute;
	align-content: center;

}

.Task3 p, 
.Task3 h1{
	margin: auto;	
	overflow: hidden;
	align-content: center;
	display: flex;
	flex-wrap: wrap;
}

.Task3 h1{
	margin-top: -1%;
	margin-left: 40%;
	margin-right: 20%;
}

.Task3 p {
	margin-bottom: 1%;
	margin-left: 20%;
	margin-right: 5%;

}

.Task3 button{
	margin: 110px;
	position: absolute;	
	left: 39%;
}

.block-animation{
	width: 250px;
	height: 250px;
	background: url(../../images/boy1.png);
	overflow: visible;
}

.block-animation:hover {
    background: url(../../images/boy2.png);
	overflow: visible;
}

.block-animation:hover .brick {
    opacity: 100%;
    animation: hello 1s;
}

.brick {
	width: 54px;
    height: 53px;
	top: 170px;
	left: 150px;
    background: url(../../images/mini-boy7.png);
    background-repeat: no-repeat;
    position: absolute;
	opacity: 0%;
}

/*active*/

.block-animation:active {
    background: url(../../images/boy3.png);
	animation: shake 3s;
}

.block-animation:active .brick {
    animation: brick 5s;
    animation-fill-mode: forwards;
}

@keyframes brick {
    0%{
        top: 180px;
        left: 110px;
    }

    100% {
        top: -600px;
        left: 650px;		
        transform: rotate(1000deg);
    }
}

/*text*/

.text1{
	position: absolute;
	top: 40px;
	left: 100px;
	opacity: 0%;	
}

.text2{
	position: absolute;
	top: 40px;
	left: 70px;
	opacity: 0%;
}

.block-animation:hover .text1 {
    opacity: 100%;
	
}

.block-animation:active .text1 {
    opacity: 0%;
}

.block-animation:active .text2 {
    opacity: 100%;
}


@keyframes shake {
    0% {
        transform: translateX(10px);	
    }

    25% {
        transform: translateX(-10px);		
    }

    50% {
        transform: translateX(10px);		
    }

    75% {
        transform: translateX(-10px);		
    }

    100% {
        transform: translateX(10px);	
    }
}

@keyframes hello{
	
	0%{
		left: 213px;
	}
	100% {
		left: 150px;
	}	
}

@media (max-width: 1000px){
	.Task3 button{
		margin: 110px;
		position: absolute;	
		left: 28%;
	}
	.Task3 h1{
	margin-left: 10%;
	margin-right: 10%;
	}
	.Task3 p {		
	margin-left: 8%;
	margin-right: 8%;
	}
}

@media (max-width: 900px){
	.Task3 button{
		margin: 110px;
		position: absolute;	
		left: 20%;
	}
	.Task3 h1{
	margin-left: 20%;
	margin-right: 20%;
	}
	.Task3 p {		
	margin-left: 8%;
	margin-right: 8%;
	}
}

@media (max-width: 600px){
	.Task3 button{
		margin: 130px;
		position: absolute;	
		left: 5%;
	}
	.Task3 h1{
	margin-left: 20%;
	margin-right: 20%;
	}

	.Task3 p {
	margin-left: 8%;
	margin-right: 8%;
	}
}