/*!
 * Start Bootstrap - The Big Picture HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
	/*margin-top: 50px;
	margin-bottom: 50px;*/
	background: none;
	height: 100%;
    	width: 100%;
	background-color:#003300;
	background-image:url(../img/bg.jpg);
	background-repeat:repeat-x;
	background-position:top;
}

html {
    width: 100%;
    height: 100%;
}


.navbar-nav {
	margin-right:10px;
}
.navbar-nav > li > a {padding-top:10px !important; padding-bottom:10px !important; }
.navbar { min-height:30px !important; background-color:transparent; border:none;  }
.navbar-brand { font-size: 18px;  height: 30px; }

.animation {
	width:800px;
	height:800px;
	/*background-color:#000;*/
	margin-left:auto;
	margin-right:auto;
	position:relative;
	overflow:hidden;
}

.animation img {
	position:absolute;
	top:-800px;
	left:0;
	width:100%;
	/*display:none;*/
}

.animation #bola_1,
.animation #bola_2,
.animation #bola_3,
.animation #bola_4,
.animation #bola_5
{
	top:-230px;
	z-index:9;
}

.animation #estrela_1,
.animation #estrela_2,
.animation #estrela_3,
.animation #estrela_4,
.animation #estrela_5
{
	top:0;
	display:none;
	z-index:9;
}

.animation #bola_grande {
	top:-770px;
	z-index:8;
}


.animation .bola {
	position:absolute;
	top:0;
	left:0;
	width:800px;
	height:800px;
}


.animation .bola .camioes {
	position:absolute;
	bottom:0;
	left:0;
	width:700px;
	height:700px;
	display:none;
}


#retangulo {
	display:block;
	top:-500px;
}

.text-rodape {
	color:#FFF;
	font:Arial, Helvetica, sans-serif;
}


@-webkit-keyframes rotating /* Safari and Chrome */ {
  to {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  from {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  to {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  from {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.rotated {
  -webkit-animation: rotating 6s linear infinite; 
  -moz-animation: rotating 6s linear infinite;
  -ms-animation: rotating 6s linear infinite;
  -o-animation: rotating 6s linear infinite;
  animation: rotating 6s linear infinite;
}




@media screen and (max-width: 768px) {
	.animation {
		width:400px;
		height:400px;
	}
	
	.animation .bola {
		width:400px;
		height:400px;
	}
}

@media(min-width:769px) and (max-width:1200px), screen and (max-height: 800px)  { 
	.animation {
		width:600px;
		height:600px;
	}
	
	.animation .bola {
		width:600px;
		height:600px;
	}	
}


.close-box {
	position: fixed;
	top: 20px;
	right: 20px;
	width: 50px;
	height: 50px;
	background-image: url(../img/close-bt.png);
	background-repeat: no-repeat;
	background-position: center center;
	cursor:pointer;
}

.close-box:hover {
	background-image: url(../img/close-bt-hover.png);
}

/* Small devices (tablets, 768px and up) */
@media(min-width:768px) {
	.main {

	}
}

/* Medium devices (desktops, 992px and up) */
@media(min-width:992px) {
	.main {
	}

}

/* Large devices (large desktops, 1200px and up) */
@media(min-width:1200px) { 
	.main {
	}

}