@font-face {
    font-family: 'Calibri';
    src: url('fonts/Calibri.eot?#iefix') format('embedded-opentype'),
    url('fonts/Calibri.woff') format('woff'),
    url('fonts/Calibri.ttf')  format('truetype'),
    url('fonts/Calibri.svg#Calibri') format('svg');
    font-weight: normal;
    font-style: normal;
}


body {
    color: #2f2f2f;
    font-family: 'Calibri';
    background-image: url('../images/header-bg.jpg');
    background-size: cover;
}

.padre {
    vertical-align: center;
}

.indice {
  background-color: white;
  padding: 10px;
  margin: 10px;
  width: 40%;
  height: 140px;
  margin-bottom: 40px;
  margin-left: auto;
  margin-right: auto;
  justify-content: space-evenly;
  border-radius: 5px;
}

.proximo {
    background-color: white;
    padding: 10px;
    margin: 10px;
    width: 80%;
    height: 170px;
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
    border-radius: 6px;
}

.completo {
    background-color: white;
    padding: 10px;
    margin: 10px;
    width: 80%;
    height: 220px;
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
    border-radius: 7px;
}
    
.lead, .h1 {
    color: white;
    font-family: 'Calibri';
}


img {
    vertical-align: baseline;
}

label {
    color: white;
    font-family: 'Calibri';
}



/*--------------------------------------------------------------
# Links
--------------------------------------------------------------*/
a {
    color: royalblue;
}

.p-2 {
    color: white;
    font-family: 'Calibri';
    font-size: 150%;
}

.p-2:hover, .p-2:focus, .p-2:active {
    color: pink;
}

a:hover, a:focus, a:active {
    color: midnightblue;
}

a:focus {
    outline: thin dotted;
}

a:hover, a:active {
    outline: 0;
    list-style: none;
}


/*--------------------------------------------------------------
# Botoes
--------------------------------------------------------------*/
.btn {
    padding: 16px 46px;
    border: 2px solid #9a24c1;
    border-radius: 50px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    color: #232127;
}

.btn.gradient {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojQUEwMEZGOyIgLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOiM1ODE2ODc7IiAvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiAvPjwvc3ZnPg==);
    background-image: -webkit-gradient(linear, left top, 270deg, color-stop(0%, #AA00FF), color-stop(100%, #581687));
    background-image: -moz-linear-gradient(270deg,#AA00FF 0%,#581687 100%);
    background-image: -webkit-linear-gradient(270deg,#AA00FF 0%,#581687 100%);
    background-image: -o-linear-gradient(270deg,#AA00FF 0%,#581687 100%);
    background-image: -ms-linear-gradient(270deg,#AA00FF 0%,#581687 100%);
    background-image: linear-gradient(270deg,#AA00FF 0%,#581687 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position:relative;
    display:inline-block;
}

.btn.dark-purple {
    background: #9a24c1;
    color: #fff;
}

.btn.gradient-bg {
    padding: 18px 46px;
    border: 0;
    background: -moz-linear-gradient(180deg, rgba(171,0,229,1) 0%, rgba(88,20,121,1) 100%); /* ff3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(88,20,121,1)), color-stop(100%, rgba(171,0,229,1))); /* safari4+,chrome */
    background: -webkit-linear-gradient(180deg, rgba(171,0,229,1) 0%, rgba(88,20,121,1) 100%); /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(180deg, rgba(171,0,229,1) 0%, rgba(88,20,121,1) 100%); /* opera 11.10+ */
    background: -ms-linear-gradient(180deg, rgba(171,0,229,1) 0%, rgba(88,20,121,1) 100%); /* ie10+ */
    background: linear-gradient(270deg, rgba(171,0,229,1) 0%, rgba(88,20,121,1) 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#581479', endColorstr='#ab00e5',GradientType=1 ); /* ie6-9 */
    color: #fff;
}


/*--------------------------------------------------------------
# Site Footer
--------------------------------------------------------------*/
.site-footer {
    padding-top: 20px;
    margin-top: 20px;
    text-align: center;
    color: #fff;
    
}

.area {
    background-color:azure;
    justify-content: space-evenly;
    padding: 20px;
    border-radius: 10px;
    border-color:gray;
    border-style: solid;
    width: 340px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    display:inline-block;
}

.fuentetitulo {
    margin-top: 10px;
    font-size: 18px;
    font-weight: bold;
    color:blue;
}

.fuentesubtitulo {
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
    color:brown;
}

.fuenteamarilla {
    background-color:yellow;
    margin-top: 20px;
    padding: 10px;
    height: 50px;
    width: 200px;
    font-size: 20px;
    font-weight: bold;
    color:black;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    vertical-align: middle;
    border-radius: 8px;
}

.textomarilla {
    background-color:white;
    margin-top: 20px;
    padding: 10px;
    width: 320px;
    font-size: 16px;
    font-weight: bold;
    color:black;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    vertical-align: middle;
    border-style: solid;
    border-radius: 10px;
    border-color: chocolate;
}
.formulario {
    background-color: gray;
    color: #2f2f2f;
    font-family: 'Calibri';
    width: 320px;
    border-style: solid;
    border-radius: 5px;
    border-width: 0.5px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.tituloazul {
    background-color: blue;
    color: white;
    font-size: 30px;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Arial';
    width: 300px;
    border-style: solid;
    border-radius: 10px;
    border-width: 0.5px;
    text-align: center;
}
.textoazul {
    padding: 10px;
    color: blue;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Calibri';
    width: 300px;
    border-style: solid;
    border-radius: 10px;
    border-width: 0.5px;
}
.tituloverde {
    padding: 10px;
    background-color:chocolate;
    color: white;
    font-size: 24px;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Arial';
    width: 300px;
    height: 70px;
    border-style: solid;
    border-radius: 10px;
    border-width: 0.5px;
    text-align: center;
}
.boton {
    padding: 16px 46px;
    border: 2px solid chocolate;
    border-radius: 50px;
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
    color: sienna;
    width: 300px;
    height: 70px;
    margin-bottom: 20px;  
}