html
{
  background: #26265a;
   background-image: linear-gradient( 861a548f, #54077a4d);
  }

  body {
position : fixed;
margin : 0;
padding : 0;
min-width : 100%;
max-width : 100%;

}

input[type="submit"] {
     border-radius: 0;
    -webkit-appearance: none;
}
input[type='submit']:hover 
{cursor: pointer;}

input[type="reset"] {
     border-radius: 0;
    -webkit-appearance: none;
}
input[type='reset']:hover 
{cursor: pointer;}

@keyframes gradients {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: 50% 0;
  }
  50% {
    background-position: 90% 0;
  }
  60% {
    background-position: 60%;
  }
  75% {
    background-position: 40%;
  }
  100% {
    background-position: 0 0;
  }
}


* {

margin : 0;
}
ul, li {
  list-style-type: none;
  display: inline;
  float: left;
  padding-right: 5%;
  padding-left: 5%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  margin: 1%;
}

li p{
font-size: 10px;  
color: rgba(255, 255, 255, 0.52); 
}


nav {background-image: url(capa.png);
background-repeat: repeat;background-size: 1px 1px;position : absolute;
width : 100%;height : 100%;background-color : rgb(228 58 228 / 0%); 
margin-left: 35%;z-index: 7;}

nav img {
  width: 25%;
  margin: 0px auto;
  display: block;
  margin-top: 33%;
}


.img-background_0 {position : fixed;background: #000000 url(img/pattern.png), url();
background-size : 4px 4px, cover;
margin : 0;padding : 0;min-width : 100%;
max-width : 100%;width : auto;height : auto;
z-index : 9;transform: scale(1.0); /* (150% zoom)*/transition: transform 0.99s; /* Animation */transform: scale(1.5); /* (150% zoom)*/transform: scale(1.0); /* (150% zoom)*/}


.img-background_1 {
position : fixed;
background-image: url(img/back0.png);
background-size: cover;
margin : 0;padding : 0;min-width : 100%;
max-width : 100%;width : 100%;height: 100%;
z-index : 3;transform: scale(1.0); /* (150% zoom)*/transition: transform 0.99s; /* Animation */
transform: scale(1.0); /* (150% zoom)*/transform: scale(1.0); /* (150% zoom)*/
}


.img-background_1_1 {
position : fixed;
background-image: url(img/back1.png);
background-size: cover;
margin : 0;padding : 0;min-width : 100%;
max-width : 100%;width : 100%;height: 100%;
z-index : 4;transform: scale(1.0); /* (150% zoom)*/transition: transform 0.99s; /* Animation */
transform: scale(1.0); /* (150% zoom)*/transform: scale(1.0); /* (150% zoom)*/
}


.img-background_1_2 {
position : fixed;
background-image: url(img/back3.png);
background-size: cover;
margin : 0;padding : 0;min-width : 100%;
max-width : 100%;width : 100%;height: 100%;
z-index : 5;transform: scale(1.0); /* (150% zoom)*/transition: transform 0.99s; /* Animation */
transform: scale(1.0); /* (150% zoom)*/transform: scale(1.0); /* (150% zoom)*/
}


.img-background_2 {
position : fixed;
background-image: url(img/marhinna.png);
background-size: cover;
background-position: bottom right;
margin : 0;padding : 0;min-width : 100%;
max-width : 100%;width : 100%;height: 100%;
bottom: 0px;

z-index : 6;transform: scale(1.0); /* (150% zoom)*/transition: transform 0.99s; /* Animation */
transform: scale(1.0); /* (150% zoom)*/transform: scale(1.0); /* (150% zoom)*/}

.img-background_3 {
  position : fixed;background: url(img/marhinna1.png);
background-size: cover;
background-position: bottom right;margin : 0;padding : 0;min-width : 100%;
max-width : 100%;width : 100%;height: 100%;
z-index : 7;transform: scale(1.0); /* (150% zoom)*/transition: transform 0.99s; /* Animation */
transform: scale(1.5); /* (150% zoom)*/transform: scale(1.0); /* (150% zoom)*/}

.img-background_4 {
 position : fixed;
 background-size : 3px 3px;
 background-repeat: repeat;
 background-position: center;
 background-image: url(img/pattern.png);
 margin : 0;
 padding : 0;
 min-width : 100%;
 max-width : 100%;
 width : auto;
 height : 100%;
 z-index: 7;
 transform: scale(1.0); /* (150% zoom)*/
 transition: transform 0.99s; /* Animation */
 transform: scale(1.5); /* (150% zoom)*/
 transform: scale(1.0); /* (150% zoom)*/
 }





.mail {
color: #ffffff45; 
font-size: 12px; font-family: calibri;
position : fixed; letter-spacing: 3px;
 margin : 0;padding : 0;min-width : 100%;
max-width : 100%;width : auto;height : auto;
z-index : 8;

top: 70px; left: 4%;
}

#contador {
  width: 80%;
  padding-left: 8%;
  margin-top: 5%;
  clear: both;
}




#dois {
  width: 100%; height: 400px;
}
#pattern {background-repeat: repeat;background-size: 1px 1px;position : absolute;width : 100%;height : 100%;background-color : rgb(228 58 228 / 0%)
margin-top: 0%;margin-left: 0%;z-index: 10;}



button {
float : right;
background : #ffffff;
border : #c3c3c3 solid 1px;
}

input[type='text'] {
  font-family: 'Lobster';
  font-size: 28px;
  background : #f0f0f059;
  border : 0;
  border-radius : 5px;
  width : 85.5%;padding: 3%;
  margin-bottom: 1%;
  color : #ffffffab;
    margin-left: 1%;
  }

input[type='submit'] 
{background : #8d084175;border: 1px solid #ce3969;
border-radius : 5px;width : 45.5%;padding : 10px;
margin-bottom : 1px;margin-left: 1%;color : #d8a6b1;float : left;}

input[type='reset'] {
background : #52037682;
border: 1px solid #944bc3;
border-radius : 5px;
width : 45.5%;
padding : 10px;
margin-left : 3px;
color : #be85e2;
}
input:focus {
box-shadow : 0;
border : none 0;
outline : 0;
}
article {
  // background-image: linear-gradient(to right, #54077a4d, #e60e9985, #7c0caf7a, #861a548f, #054f7d9e);
  background-size: 600%;
  background-position: 0 0;
  font-family: "Lato", Arial, sans-serif;
  height: 100%;
  justify-content: center;
  /* Animation */
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-name: gradients;
  z-index: 10;
  position : absolute;
  width : 35%;
  height : 50%;
  min-height: 220px;
  overflow: auto;
  background-color: #ffffff0d;
  margin-top: 26%;
  margin-left: 13%;
  padding : 10px;
  padding-top: 2%;
  }
article span {
  line-height: 7px;font-family : 'Lobster';color : #ffffff99;
  font-size : 28px;font-weight: 800;
  letter-spacing : 0;line-height: 20px;line-height : 17px;
  padding-bottom: 10px;}
article span p  {
  line-height: 7px;font-family : 'calibri';
  margin-top: 10px;
  margin-bottom: 10px;}

span.cadastre {
  background: ;
  font-family : 'Lobster', cursive;color: #ffffff4a;
  font-size : 46px;letter-spacing : 0;
  font-weight : 800;line-height : 17px;
  margin-left : 10px;position: absolute;
  margin-top: 25%;margin-left: 19%;z-index: 9999;

  }


h1 {
font-family : 'Lobster', cursive;
color : #ffffff;
font-size : 20px;
letter-spacing : 0;
font-weight : 300;
line-height : 24px;
text-align : center;
padding-bottom : 20px;
}
section {
position : absolute;
top : 0;
left : 0;
right : 0;
bottom : 0;
border : rgba(255, 255, 255, 0.1) solid 20px;
margin : 5px;
}
.success {
  position: fixed;
  width: 32%; top: 20%;
  left: 13%; height: 72%;
border : solid 1px;
margin : 10px 0;
padding : 15px 10px 15px 50px;
font-family: Lobster;
color: #ffffff82;
border: 1px solid #ffffff21;
background-color : #242447e8;
z-index : 12;
border-radius: 10px;
-webkit-border-radius: 10px;
}
.success button {
  color: #ffffff;
  border-top-right-radius: 4px;
  -webkit-border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  font-weight: 100;
  position: relative; right: -30px;
 background: #ffffff42;
 border: 0px;
 cursor: pointer;
}


.social-icons {
   list-style: none;
   display: table;
   margin: 0 auto !important;

transform: scale(1.0); /* (150% zoom)*/transition: transform 0.99s; /* Animation */
transform: scale(1.5); /* (150% zoom)*/transform: scale(1.0); /* (150% zoom)*/


   position : fixed;
   border: 0px;
   padding : 0;min-width : 100%;
max-width : 100%;
width : auto;
height : auto;z-index : 8;


top: 30%; left: 55%; 

}
.social-icons li {
  display: inline-block;
  float: left;
  padding: 0;
  margin-right: 5px;
  border: 0px;
}
.social-icons li:last-child {
  margin-right: 0;
}
.social-icons li a {
  font-size: 20px;
  display: block;
  text-align: center;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  line-height: 40px;
   background-image: linear-gradient(to right, #54077a4d, #861a548f);
  color: #a58e82;
  transition: 0.3s;
}
.social-icons li a:hover {
   background-image: linear-gradient(to right, #861a548f, #54077a4d);
  color: #a58e82;
    margin-top: -10px;

}
.social-icons li a i {
  line-height: 40px !important;
}
.social-icons.vertical {
  width: 40px;
}
.social-icons.vertical li {
  margin-bottom: 5px;
}
.social-icons.vertical li:last-child {
  margin-right: 0;
}
.social-icons.vertical li a {
  background: #444;
  color: #DDD;
}
.social-icons.vertical li a:hover {
  background: #FC7D15;
  color: #FFF;
}

/*FUNDO MARHINNA*/

.hero {

     position : fixed;
   border: 0px;
   padding : 0;min-width : 100%;
max-width : 100%;
width : auto;
height : auto;z-index : 5;


  height: 100vh;
  overflow: hidden;
}

.cube {
  position: absolute;
  top: 80vh;
  left: 45vw;
  width: 10px;
  height: 10px;
  border: solid 0px;
  background: url(img/marhinna_leao.png);
  background-size: cover;
  background-repeat: no-repeat;
  transform-origin: top left;
  transform: scale(0) rotate(0deg) translate(-50%, -50%);
  -webkit-animation: cube 12s ease-in forwards infinite;
          animation: cube 12s ease-in forwards infinite;
}
.cube:nth-child(2n) {
 background: url(img/marhinna_leao.png);
  background-size: cover;
  background-repeat: no-repeat;
  }
.cube:nth-child(2) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  left: 25vw;
  top: 40vh;
}
.cube:nth-child(3) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  left: 75vw;
  top: 50vh;
}
.cube:nth-child(4) {
  -webkit-animation-delay: 6s;
          animation-delay: 6s;
  left: 90vw;
  top: 10vh;
}
.cube:nth-child(5) {
  -webkit-animation-delay: 8s;
          animation-delay: 8s;
  left: 10vw;
  top: 85vh;
}
.cube:nth-child(6) {
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  left: 50vw;
  top: 10vh;
}

@-webkit-keyframes cube {
  from {
    transform: scale(0) rotate(0deg) translate(-50%, -50%);
    opacity: 1;
  }
  to {
    transform: scale(20) rotate(960deg) translate(-50%, -50%);
    opacity: 0;
  }
}

@keyframes cube {
  from {
    transform: scale(0) rotate(0deg) translate(-50%, -50%);
    opacity: 1;
  }
  to {
    transform: scale(20) rotate(960deg) translate(-50%, -50%);
    opacity: 0;
  }
}


.fa.fa-long-arrow-up {
  display: none;
}

.fa.fa-long-arrow-down {
  display: block;
  float: right;
  position: relative;
  left: 10px;
  top: 5px;
  font-size: 18px;
}