@charset "utf-8";
/* CSS Document */
		.round{
			max-height: 40px;
			/*
			max-width: 548px;
			*/
			width:100%;
			height:100%;
			position:absolute;
			opacity:0;
			border: #cc0000 0px solid;
			z-index: 5;
		}
		#round1{
			background-image:url(../image/round1.png);
			background-repeat:no-repeat;
			background-position: top right;
		}
		#round2{
			background-image:url(../image/round2.png);
			background-repeat:no-repeat;
			background-position: top right;
		}
		#round3{
			background-image:url(../image/round3.png);
			background-repeat:no-repeat;
			background-position: top right;
		}
		#round4{
			background-image:url(../image/round4.png);
			background-repeat:no-repeat;
			background-position: top right;
		}
		#round5{
			background-image:url(../image/round5.png);
			background-repeat:no-repeat;
			background-position: top right;
		}
		#round6{
			background-image:url(../image/round6.png);
			background-repeat:no-repeat;
			background-position: top right;
		}
		#round7{
			background-image:url(../image/round7.png);
			background-repeat:no-repeat;
			background-position: top right;
		}
		.circulo{
			clear: both;
			border: #000000 solid 0px;
			/*
			max-height: 547px;
			max-width: 547px;
			width: 50%;
			height: 100%;
			*/
			overflow: hidden;
			float: left;
			position: absolute;
			z-index: 6;
		}
		#circulo1{
			background-image:url(http://www.projetointegrado.com.br/image/circulo.png);
			background-size: 100% 100%;
			background-repeat:no-repeat;
			background-position: top center;
		}
		#circulo2{
			background-image:url(http://www.projetointegrado.com.br/image/circulo-1.png);
			background-size: 100% 100%;
			background-repeat:no-repeat;
			background-position: top center;
		}
		.info{
			width:100%;
			/*
			height:550px;
			*/
			position:absolute;
			border: #cc0000 0px solid;
			/*
			opacity:0;
			*/
			display: none;
			float: right;
			/*
			padding: 10% 0% 10% 50%;
			*/
		}
		.info_texto1{
			font-family:'Montserrat-Medium'; 
			font-size: 2.4em;
			color: #8c8c8c;
			text-align: left;
		}
		.info_texto2{
			font-family:'Montserrat-Light';
			font-size: 1.2em;
			color: #8c8c8c;
			text-align: left;
		}
		#pic{
			width:0;
			/*
			height:550px;
			*/
			position:relative;
			left:0px;
			top:0px;
			opacity: 0.1;
		}









.box{
width: 400px;
height: 400px;
background: url(http://www.projetointegrado.com.br/image/circulo.png) no-repeat;
background-size: contain;
}
.engrenagens{
    position: absolute;
    top:10%;
    left:50%;
    margin-top:-50px;
    margin-left:-150px;
}
@keyframes gira {
    to {
        transform: rotate(360deg);
    }
}
.horario{
   animation: gira 36s linear infinite;   
}
.horario:hover{
   animation: gira 360s linear infinite ;   
}
.two{
     position: relative;
     top: -37px;
}
@keyframes giraAntihorario {
    to {
        transform: rotate(-360deg);
    }
}
.antiHorario{
   animation: giraAntihorario 36s linear infinite;
 }
@keyframes horario {
    0% {
        -webkit-transform:rotate(0deg);
    }
    15% {
        background:#001DFF;
        -webkit-transform:rotate(45deg);
    }
    30% {
        background:#000000;
        -webkit-transform:rotate(90deg);
    }
    40% {
        background:red;
        -webkit-transform:rotate(180deg);
    }
    50% {
        -webkit-transform:rotate(360deg);
    }
	100% {
        -webkit-transform:rotate(360deg);
    }
}