@charset "UTF-8";



/* ERIVAN */



body {padding: 0; margin: 0;} 

.botao {

    padding: 20px;

    cursor: pointer;

    border-radius: 50%;

    background: url(imagens/info.png) no-repeat;

    position: absolute;

}

.button {

    background: url(imagens/Infografico/botao_voltar.png) no-repeat;

    border: none;

    color: white;

    padding: 20px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    cursor: pointer;

    border-radius: 50%;

    position: absolute;

    right: 0;

}

.center {

    margin: auto;

    width: 50%;

    padding: 10px;

}

div.relative {

    position: relative;

    /*top: 50px;*/

    margin: auto;

    width: 880px;

    height: 548px;

    /*border: 3px solid #73AD21*/;

} 

.infogame{ 

    box-sizing: border-box;

    /*border: 8px solid orange;*/

    border-radius: 7px;

    position: absolute;

    left: 56px;

    top: 50px; 

}

button.absolute4 {

    position: absolute;

    top: 100px;

    right: 0px;

}

button.absolute5 {

    position: absolute;

    top: 100px;

    right: 50px;

}

.video{

    box-sizing: border-box;

    /*border: 8px solid orange;*/

    border-radius: 7px;

    position: absolute;

    bottom: 0px;

    left: 0px;

    /*width: 48%;

    height: 48%;*/

}



.texto{

    background: url(imagens/textura.png);

    box-sizing: border-box;

    /*border: 8px solid orange;*/

    /*border-radius: 7px;*/

    position: absolute;

    right: 0px;

    top: 0px;

    width: 49%;

    height: 100%;

}



/* ERIVAN */



img {

    border: 0;

}



figure {

    margin: 0;

}



.gallery .control-operator:target ~ .controls .control-button {

  color: #ccc;

  color: rgba(255, 255, 255, 0.4);

}



.gallery .control-button:first-of-type,

.gallery .control-operator:nth-of-type(1):target ~ .controls .control-button:nth-of-type(1),

.gallery .control-operator:nth-of-type(2):target ~ .controls .control-button:nth-of-type(2),

.gallery .control-operator:nth-of-type(3):target ~ .controls .control-button:nth-of-type(3),

.gallery .control-operator:nth-of-type(4):target ~ .controls .control-button:nth-of-type(4),

.gallery .control-operator:nth-of-type(5):target ~ .controls .control-button:nth-of-type(5) {

  color: white;

  color: rgba(255, 255, 255, 0.8);

}



.gallery .item:first-of-type {

  position: static;

  pointer-events: auto;

  opacity: 1;

}



.gallery .item {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

  opacity: 0;

  -webkit-transition: opacity .5s;

  -o-transition: opacity .5s;

  transition: opacity .5s;

}



.gallery .control-operator {

  display: none;

}



.gallery .control-operator:target ~ .item {

  pointer-events: none;

  opacity: 0;

  -webkit-animation: none;

  -o-animation: none;

  animation: none;

}



.gallery .control-operator:target ~ .controls .control-button {

  -webkit-animation: none;

  -o-animation: none;

  animation: none;

}



@-webkit-keyframes controlAnimation-2 {

  0% {

    color: #ccc;

    color: rgba(255, 255, 255, 0.4);

  }



  14.3%, 50% {

    color: white;

    color: rgba(255, 255, 255, 0.8);

  }



  64.3%, 100% {

    color: #ccc;

    color: rgba(255, 255, 255, 0.4);

  }

}



@-o-keyframes controlAnimation-2 {

  0% {

    color: #ccc;

    color: rgba(255, 255, 255, 0.4);

  }



  14.3%, 50% {

    color: white;

    color: rgba(255, 255, 255, 0.8);

  }



  64.3%, 100% {

    color: #ccc;

    color: rgba(255, 255, 255, 0.4);

  }

}



@keyframes controlAnimation-2 {

  0% {

    color: #ccc;

    color: rgba(255, 255, 255, 0.4);

  }



  14.3%, 50% {

    color: white;

    color: rgba(255, 255, 255, 0.8);

  }



  64.3%, 100% {

    color: #ccc;

    color: rgba(255, 255, 255, 0.4);

  }

}



@-webkit-keyframes galleryAnimation-2 {

  0% {

    opacity: 0;

  }



  14.3%, 50% {

    opacity: 1;

  }



  64.3%, 100% {

    opacity: 0;

  }

}



@-o-keyframes galleryAnimation-2 {

  0% {

    opacity: 0;

  }



  14.3%, 50% {

    opacity: 1;

  }



  64.3%, 100% {

    opacity: 0;

  }

}



@keyframes galleryAnimation-2 {

  0% {

    opacity: 0;

  }



  14.3%, 50% {

    opacity: 1;

  }



  64.3%, 100% {

    opacity: 0;

  }

}



.gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {

  pointer-events: auto;

  opacity: 1;

}



.gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {

  pointer-events: auto;

  opacity: 1;

}



.items-2.autoplay .control-button {

  -webkit-animation: controlAnimation-2 14s infinite;

  -o-animation: controlAnimation-2 14s infinite;

  animation: controlAnimation-2 14s infinite;

}



.items-2.autoplay .item {

  -webkit-animation: galleryAnimation-2 14s infinite;

  -o-animation: galleryAnimation-2 14s infinite;

  animation: galleryAnimation-2 14s infinite;

}



.items-2 .control-button:nth-of-type(1),

.items-2 .item:nth-of-type(1) {

  -webkit-animation-delay: -2s;

  -o-animation-delay: -2s;

  animation-delay: -2s;

}



.items-2 .control-button:nth-of-type(2),

.items-2 .item:nth-of-type(2) {

  -webkit-animation-delay: 5s;

  -o-animation-delay: 5s;

  animation-delay: 5s;

}



@-webkit-keyframes controlAnimation-3 {

  0% {

    color: #ccc;

    color: rgba(255, 255, 255, 0.4);

  }



  9.5%, 33.3% {

    color: white;

    color: rgba(255, 255, 255, 0.8);

  }



  42.9%, 100% {

    color: #ccc;

    color: rgba(255, 255, 255, 0.4);

  }

}



@-o-keyframes controlAnimation-3 {

  0% {

    color: #ccc;

    color: rgba(255, 255, 255, 0.4);

  }



  9.5%, 33.3% {

    color: white;

    color: rgba(255, 255, 255, 0.8);

  }



  42.9%, 100% {

    color: #ccc;

    color: rgba(255, 255, 255, 0.4);

  }

}



@keyframes controlAnimation-3 {

  0% {

    color: #ccc;

    color: rgba(255, 255, 255, 0.4);

  }



  9.5%, 33.3% {

    color: white;

    color: rgba(255, 255, 255, 0.8);

  }



  42.9%, 100% {

    color: #ccc;

    color: rgba(255, 255, 255, 0.4);

  }

}



@-webkit-keyframes galleryAnimation-3 {

  0% {

    opacity: 0;

  }



  9.5%, 33.3% {

    opacity: 1;

  }



  42.9%, 100% {

    opacity: 0;

  }

}



@-o-keyframes galleryAnimation-3 {

  0% {

    opacity: 0;

  }



  9.5%, 33.3% {

    opacity: 1;

  }



  42.9%, 100% {

    opacity: 0;

  }

}



@keyframes galleryAnimation-3 {

  0% {

    opacity: 0;

  }



  9.5%, 33.3% {

    opacity: 1;

  }



  42.9%, 100% {

    opacity: 0;

  }

}



.gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {

  pointer-events: auto;

  opacity: 1;

}



.gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {

  pointer-events: auto;

  opacity: 1;

}



.gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) {

  pointer-events: auto;

  opacity: 1;

}



.items-3.autoplay .control-button {

  -webkit-animation: controlAnimation-3 21s infinite;

  -o-animation: controlAnimation-3 21s infinite;

  animation: controlAnimation-3 21s infinite;

}



.items-3.autoplay .item {

  -webkit-animation: galleryAnimation-3 21s infinite;

  -o-animation: galleryAnimation-3 21s infinite;

  animation: galleryAnimation-3 21s infinite;

}



.items-3 .control-button:nth-of-type(1),

.items-3 .item:nth-of-type(1) {

  -webkit-animation-delay: -2s;

  -o-animation-delay: -2s;

  animation-delay: -2s;

}



.items-3 .control-button:nth-of-type(2),

.items-3 .item:nth-of-type(2) {

  -webkit-animation-delay: 5s;

  -o-animation-delay: 5s;

  animation-delay: 5s;

}



.items-3 .control-button:nth-of-type(3),

.items-3 .item:nth-of-type(3) {

  -webkit-animation-delay: 12s;

  -o-animation-delay: 12s;

  animation-delay: 12s;

}



@-webkit-keyframes controlAnimation-4 {

  0% {

    color: #ccc;

    color: rgba(255, 255, 255, 0.4);

  }



  7.1%, 25% {

    color: white;

    color: rgba(255, 255, 255, 0.8);

  }



  32.1%, 100% {

    color: #ccc;

    color: rgba(255, 255, 255, 0.4);

  }

}



@-o-keyframes controlAnimation-4 {

  0% {

    color: #ccc;

    color: rgba(255, 255, 255, 0.4);

  }



  7.1%, 25% {

    color: white;

    color: rgba(255, 255, 255, 0.8);

  }



  32.1%, 100% {

    color: #ccc;

    color: rgba(255, 255, 255, 0.4);

  }

}



@keyframes controlAnimation-4 {

  0% {

    color: #ccc;

    color: rgba(255, 255, 255, 0.4);

  }



  7.1%, 25% {

    color: white;

    color: rgba(255, 255, 255, 0.8);

  }



  32.1%, 100% {

    color: #ccc;

    color: rgba(255, 255, 255, 0.4);

  }

}



@-webkit-keyframes galleryAnimation-4 {

  0% {

    opacity: 0;

  }



  7.1%, 25% {

    opacity: 1;

  }



  32.1%, 100% {

    opacity: 0;

  }

}



@-o-keyframes galleryAnimation-4 {

  0% {

    opacity: 0;

  }



  7.1%, 25% {

    opacity: 1;

  }



  32.1%, 100% {

    opacity: 0;

  }

}



@keyframes galleryAnimation-4 {

  0% {

    opacity: 0;

  }



  7.1%, 25% {

    opacity: 1;

  }



  32.1%, 100% {

    opacity: 0;

  }

}



.gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {

  pointer-events: auto;

  opacity: 1;

}



.gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {

  pointer-events: auto;

  opacity: 1;

}



.gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) {

  pointer-events: auto;

  opacity: 1;

}



.gallery .control-operator:nth-of-type(4):target ~ .item:nth-of-type(4) {

  pointer-events: auto;

  opacity: 1;

}



.items-4.autoplay .control-button {

  -webkit-animation: controlAnimation-4 28s infinite;

  -o-animation: controlAnimation-4 28s infinite;

  animation: controlAnimation-4 28s infinite;

}



.items-4.autoplay .item {

  -webkit-animation: galleryAnimation-4 28s infinite;

  -o-animation: galleryAnimation-4 28s infinite;

  animation: galleryAnimation-4 28s infinite;

}



.items-4 .control-button:nth-of-type(1),

.items-4 .item:nth-of-type(1) {

  -webkit-animation-delay: -2s;

  -o-animation-delay: -2s;

  animation-delay: -2s;

}



.items-4 .control-button:nth-of-type(2),

.items-4 .item:nth-of-type(2) {

  -webkit-animation-delay: 5s;

  -o-animation-delay: 5s;

  animation-delay: 5s;

}



.items-4 .control-button:nth-of-type(3),

.items-4 .item:nth-of-type(3) {

  -webkit-animation-delay: 12s;

  -o-animation-delay: 12s;

  animation-delay: 12s;

}



.items-4 .control-button:nth-of-type(4),

.items-4 .item:nth-of-type(4) {

  -webkit-animation-delay: 19s;

  -o-animation-delay: 19s;

  animation-delay: 19s;

}



@-webkit-keyframes controlAnimation-5 {

  0% {

    color: #ccc;

    color: rgba(255, 255, 255, 0.4);

  }



  5.7%, 20% {

    color: white;

    color: rgba(255, 255, 255, 0.8);

  }



  25.7%, 100% {

    color: #ccc;

    color: rgba(255, 255, 255, 0.4);

  }

}



@-o-keyframes controlAnimation-5 {

  0% {

    color: #ccc;

    color: rgba(255, 255, 255, 0.4);

  }



  5.7%, 20% {

    color: white;

    color: rgba(255, 255, 255, 0.8);

  }



  25.7%, 100% {

    color: #ccc;

    color: rgba(255, 255, 255, 0.4);

  }

}



@keyframes controlAnimation-5 {

  0% {

    color: #ccc;

    color: rgba(255, 255, 255, 0.4);

  }



  5.7%, 20% {

    color: white;

    color: rgba(255, 255, 255, 0.8);

  }



  25.7%, 100% {

    color: #ccc;

    color: rgba(255, 255, 255, 0.4);

  }

}



@-webkit-keyframes galleryAnimation-5 {

  0% {

    opacity: 0;

  }



  5.7%, 20% {

    opacity: 1;

  }



  25.7%, 100% {

    opacity: 0;

  }

}



@-o-keyframes galleryAnimation-5 {

  0% {

    opacity: 0;

  }



  5.7%, 20% {

    opacity: 1;

  }



  25.7%, 100% {

    opacity: 0;

  }

}



@keyframes galleryAnimation-5 {

  0% {

    opacity: 0;

  }



  5.7%, 20% {

    opacity: 1;

  }



  25.7%, 100% {

    opacity: 0;

  }

}



.gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {

  pointer-events: auto;

  opacity: 1;

}



.gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {

  pointer-events: auto;

  opacity: 1;

}



.gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) {

  pointer-events: auto;

  opacity: 1;

}



.gallery .control-operator:nth-of-type(4):target ~ .item:nth-of-type(4) {

  pointer-events: auto;

  opacity: 1;

}



.gallery .control-operator:nth-of-type(5):target ~ .item:nth-of-type(5) {

  pointer-events: auto;

  opacity: 1;

}



.items-5.autoplay .control-button {

  -webkit-animation: controlAnimation-5 35s infinite;

  -o-animation: controlAnimation-5 35s infinite;

  animation: controlAnimation-5 35s infinite;

}



.items-5.autoplay .item {

  -webkit-animation: galleryAnimation-5 35s infinite;

  -o-animation: galleryAnimation-5 35s infinite;

  animation: galleryAnimation-5 35s infinite;

}



.items-5 .control-button:nth-of-type(1),

.items-5 .item:nth-of-type(1) {

  -webkit-animation-delay: -2s;

  -o-animation-delay: -2s;

  animation-delay: -2s;

}



.items-5 .control-button:nth-of-type(2),

.items-5 .item:nth-of-type(2) {

  -webkit-animation-delay: 5s;

  -o-animation-delay: 5s;

  animation-delay: 5s;

}



.items-5 .control-button:nth-of-type(3),

.items-5 .item:nth-of-type(3) {

  -webkit-animation-delay: 12s;

  -o-animation-delay: 12s;

  animation-delay: 12s;

}



.items-5 .control-button:nth-of-type(4),

.items-5 .item:nth-of-type(4) {

  -webkit-animation-delay: 19s;

  -o-animation-delay: 19s;

  animation-delay: 19s;

}



.items-5 .control-button:nth-of-type(5),

.items-5 .item:nth-of-type(5) {

  -webkit-animation-delay: 26s;

  -o-animation-delay: 26s;

  animation-delay: 26s;

}



.gallery .control-button {

  color: #ccc;

  color: rgba(255, 255, 255, 0.4);

}



.gallery .control-button:hover {

  color: white;

  color: rgba(255, 255, 255, 0.8);

}



/*

	Theme controls how everything looks in Gallery CSS.

*/



/*.gallery {

  position: relative;

  width: 46%;

  height: 44%;

}*/



.gallery .item {

  width: 100%;

  overflow: hidden;

  text-align: center;

}



.gallery .controls {

  position: absolute;

  bottom: 0;

  width: 100%;

  text-align: center;

}



.gallery .control-button {

  display: inline-block;

  margin: 0 .02em;

  font-size: 3em;

  text-align: center;

  text-decoration: none;

  -webkit-transition: color .1s;

  -o-transition: color .1s;

  transition: color .1s;

}



/*.imgGallery {

  width: 100%;

  height: 100%;

}*/



.imgGallery {

  height: 225px;

  width: 400px;

}



#imagens {

  /* optional way, set loading as background */

  background-image: url('imagens/loading.gif');

  background-repeat: no-repeat;

  background-position: 50% 50%;

}



.gallery .control-button {

  color: #ccc;

  color: rgba(255, 255, 255, 0.4);

}



.gallery .control-button:hover {

  color: white;

  color: rgba(255, 255, 255, 0.8);

}



/*

	Theme controls how everything looks in Gallery CSS.

*/

.gallery {

  /*border: 5px solid #19e0f1;*/

  border-radius: 5px;

  position: absolute; 

  left: 0px; 

  top: 0px; 

  box-sizing: border-box;

  /*border: 8px solid orange;

  border-radius: 7px;*/

  position: absolute;

  /*left: 0px;

  top: 0px;

  width: 48%;

  height: 48%;*/

}



.gallery .controls {

  position: absolute;

  bottom: 0;

  width: 100%;

  text-align: center;

}

.gallery .control-button {

  display: inline-block;

  margin: 0 .02em;

  font-size: 3em;

  text-align: center;

  text-decoration: none;

  transition: color .1s;

}