/*
	Author: Daniel Snows
	Author URL: danielsnows.com.br
	Author Facebook: fb.me/danielsnows
*/
/*reset*/
* { 
	margin: 0;
	padding: 0;  
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

a {
	text-decoration: none;
	color: #42c3d7;
}
/*---------------*/
body {
	font-family: 'Open Sans', sans-serif;
	color: #484F55;
}
h1 {
	text-align: center;
	padding: 20px 0;
	
	font-weight: 300;
}
h1 span {
	color: #ea433b;
	font-weight: 800;
}

footer {
	position: fixed;
	text-align: center;
	width: 100%;
	bottom: 10px;
}

/*Construction*/

.radius {
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
}

.logo {
	width: 339px;
	height: 339px;
	overflow: hidden;
	position: relative;
	margin: 50px auto 0;
	background-image: linear-gradient(45deg, #e1b131, #fdd901);
	cursor: pointer;
		-webkit-transition: all 1s ease-out;
	   -moz-transition: all 1s ease-out;
	    -ms-transition: all 1s ease-out;
	     -o-transition: all 1s ease-out;
	        transition: all 1s ease-out;

}
.center-element {
	width: 154px; 
	height: 154px;
	background-color: #4695ce;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -77px 0 0 -77px;
	z-index: 99;
	border: 15px solid #fff;	

}
/*green face*/
.logo:after {
	content: '';
	width: 350px;
	height: 350px;
	position: absolute;
	background-image: linear-gradient(45deg, #419756, #5bc154);
	-webkit-transform: rotate(-45deg);
	   -moz-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	     -o-transform: rotate(-45deg);
	        transform: rotate(-45deg);
    left: -188px;
    top: 36px;
    z-index: 2;
}

/*red face*/
.logo:before {
	content: '';
	width: 350px;
	height: 350px;
	position: absolute;
	background-image: linear-gradient(45deg, #e43731, #f3806b);
	-webkit-transform: rotate(60deg);
	   -moz-transform: rotate(60deg);
	    -ms-transform: rotate(60deg);
	     -o-transform: rotate(60deg);
	        transform: rotate(60deg);
    left: 2px;
    top: -192px;
    z-index: 3;
}

/*yellow face*/
.yellow {
	width: 180px;
	height: 55px;
	position: absolute;
    right: 0;
    z-index: 3;
    top: 95px;
    background-color: #F6CF0D;
}


/*hover-efect*/
.logo:hover {
	-webkit-transform: rotate(-720deg);
	   -moz-transform: rotate(-720deg);
	    -ms-transform: rotate(-720deg);
	     -o-transform: rotate(-720deg);
	        transform: rotate(-720deg);
}