@charset "utf-8";
/* CSS Document */


/* Inicio CSS faixa topo..... */

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}


.fxtopo{
	perspective: 800px;
	-webkit-perspective: 800px;
	background: radial-gradient(#FFE1FF, #8470FF);
	width: 100%;
	 height: 173px;
	border-radius: 20px;
	
	-webkit-box-shadow: 0px 1px 15px 6px #bababa;
	box-shadow: 0px 1px 15px 6px #bababa;
	margin: auto;
	border-bottom: 15px double #FFFFFF;
}


.box-front,
.box-back{
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	width: 750px;
	height: auto;
	position: absolute;
	transition: 0.8s;
	text-align: center;
	color: #F9F8FC;
	font-style: italic;
	font-variant: normal;
	font-family:  "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
	margin-left: 28%;
}


.box-front img{

      max-width="740";
      max- height="149";
      width: auto;
      height: auto;
	border-radius: 20px;	
	-webkit-box-shadow: 1px 10px 10px 3px  #FFD700;
	box-shadow: 1px 3px 10px 3px  	#4B0082;		
}


.box-back {
	border-radius: 20px;
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	background-color: #4144EC;	
	-webkit-box-shadow: 0px 5px 5px 1px #000000;
	box-shadow: 0px 1px 5px 1px #000000;	
	
}

.responsive-img {
  max-width: 100%;
  height: auto;
  width: 100%;
}

.fxtopo:hover .box-front {
	
	transform:rotateY(180deg);
	-webkit-transform:rotateY(180deg);
	width: 750px;
	height: 150px;	
}


.fxtopo:hover .box-back {
	
	transform: rotateY(360deg);
	-webkit-transform: rotateY(360deg);
	width: 750px;
	height: 150px;
}

  /* final CSS faixa topo..... */
  
  
  
  
   
  .container{
	max-width: 750px;
	height: auto;
	margin: 20px auto 20px auto;
	padding: 25px;
	border-radius: 20px;
	-moz-box-shadow: 0px 1px 15px 7px #bababa;
	-webkit-box-shadow: 0px 1px 15px 6px #bababa;
	box-shadow: 0px 1px 15px 6px #bababa;
	min-width: 450px;
	top: 25px;
	right: auto;
	left: auto;
	bottom: 25px;
	border: 4px double #BE8F04;
  }


	
	img{
	width: auto;
	margin:auto;
	height: auto;
}
	
	header{
	font-family: "Lucida Sans Unicode", "Arial Unicode MS", "Trebuchet MS";
	color: #0B0700;
	text-align: justify;
	font-size: small;

	
	}
	
	article {
	color: #060000;
	text-align: justify;
	font-family:  "Lucida Sans Unicode",  "Arial Unicode MS",  "Trebuchet MS"; 
      font-size:small;
}
	
	aside {
	color: #060000;
	text-align: justify;
	letter-spacing: 0px;
	font-family: "Lucida Sans Unicode", "Arial Unicode MS", "Trebuchet MS";
}
	
    footer{
	background: radial-gradient(#FFE1FF, #8470FF);
	width: 100%;
	height: auto;
	border-radius: 20px;
	-moz-box-shadow: 0px 1px 15px 6px #bababa;
	-webkit-box-shadow: 0px 1px 15px 6px #bababa;
	box-shadow: 0px 1px 15px 6px #bababa;
	margin: 0px;
	color: #000000;
	text-align: center;
	border-top: 15px double #FFFFFF;
	padding: 0 px;
	font-family:"Arial Rounde MT",  "Arial Unicode MS",  Calibri, Cambria, Corbel, "Courier New", "Lucida Console",  "Trebuchet MS";
	font-size: small;
	}
	
	
	 /* Animação do link */
	 
	animacao {
  display: flex;
  align-items: center;
  justify-content: left;
  position: relative;
  margin: 20px auto;
  width: 715px;
  height:41px;
  background: white;
  border-radius: 75px;
  font-family: "Arial Unicode MS", Consolas, "Lucida Console", sans-serif;
  font-size: 15px;
  font-weight: lighter;
  letter-spacing: 0px;
  transition: 1s box-shadow;
}

animacao:hover {
  box-shadow: 0 5px 35px 0px rgba(0,0,0,.1);
}
animacao:hover:before, animacao:hover:after {
  display: block;
  content: '';
  position: absolute;
  width: 715px;
  height:41px;
  background: #FF0000;
  border-radius: 75px;
  z-index: -1;
  animation: 1s clockwise infinite;
}

animacao:hover:after {
  background: #0000FF;
  animation: 2s counterclockwise infinite;
}

@keyframes clockwise {
  0% {
    top: -5px;
    left: 0;
  }
  12% {
    top: -2px;
    left: 2px;
  }
  25% {
    top: 0;
    left: 5px;    
  }
  37% {
    top: 2px;
    left: 2px;
  }
  50% {
    top: 5px;
    left: 0;    
  }
  62% {
    top: 2px;
    left: -2px;
  }
  75% {
    top: 0;
    left: -5px;
  }
  87% {
    top: -2px;
    left: -2px;
  }
  100% {
    top: -5px;
    left: 0;    
  }
}

@keyframes counterclockwise {
  0% {
    top: -5px;
    right: 0;
  }
  12% {
    top: -2px;
    right: 2px;
  }
  25% {
    top: 0;
    right: 5px;    
  }
  37% {
    top: 2px;
    right: 2px;
  }
  50% {
    top: 5px;
    right: 0;    
  }
  62% {
    top: 2px;
    right: -2px;
  }
  75% {
    top: 0;
    right: -5px;
  }
  87% {
    top: -2px;
    right: -2px;
  }
  100% {
    top: -5px;
    right: 0;    
  }
}	 
	/* Fim Animação do link */