html,

body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block
}

body {
line-height: 1
}

ol,
ul {
list-style: none
}

blockquote,
q {
quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none
}

table {
border-collapse: collapse;
border-spacing: 0
}

*,
:before,
:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}

.container {
width: 960px;
margin: 0 auto;
padding: 0;
position: relative
}

.container:after,
.container:before {
content: " ";
display: table
}

.container:after {
clear: both
}

.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10,
.grid-11,
.grid-12,
.grid-13,
.grid-14,
.grid-15,
.grid-16,
.grid-1-3 {
float: left;
margin-left: 10px;
margin-right: 10px
}
.grid-1 {
width: 40px
}

.grid-2 {
width: 100px
}

.grid-3 {
width: 160px
}

.grid-4 {
width: 220px
}

.grid-5 {
width: 280px
}

.grid-6 {
width: 340px
}

.grid-7 {
width: 400px
}

.grid-8 {
width: 460px
}

.grid-9 {
width: 520px
}

.grid-10 {
width: 580px
}

.grid-11 {
width: 640px
}

.grid-12 {
width: 700px
}

.grid-13 {
width: 760px
}

.grid-14 {
width: 820px
}

.grid-15 {
width: 880px
}
.grid-16 {
width: 940px
}

.grid-1-3 {
width: 300px
}

@media only screen and (min-width: 788px) and (max-width: 979px) {

.container {
width: 768px
}
.grid-1 {
width: 28px
}
.grid-2 {
width: 76px
}
.grid-3 {
width: 124px
}
.grid-4 {
width: 172px
}
.grid-5 {
width: 220px
}
.grid-6 {
width: 268px
}
.grid-7 {
width: 316px
}
.grid-8 {
width: 364px
}
.grid-9 {
width: 412px
}
.grid-10 {
width: 460px
}
.grid-11 {
width: 508px
}
.grid-12 {
width: 556px
}
.grid-13 {
width: 604px
}
.grid-14 {
width: 652px
}
.grid-15 {
width: 700px
}
.grid-16 {
 width: 748px
}
.grid-1-3 {
width: 236px
}
}

@media only screen and (max-width: 787px) {

.container {
width: 300px
}
.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10,
.grid-11,
.grid-12,
.grid-13,
.grid-14,
.grid-15,
.grid-16,
.grid-1-3 {
width: 300px;
margin: 0 0 20px;
float: none
}
}

body {
font-family: Arial, Helvetica, sans-serif;
color: #CFDCE3;
width: 100%;
overflow-x: hidden
}

a {
text-decoration: none;
color: #CFDCE3
}

#header {
position: fixed;
top: 0;
background-color: #607CF5;
width: 100%;
z-index: 10;
box-shadow: 2px 2px 2px #000
}

#header_menu {
text-align: center
}
#header_menu ul li {
display: inline-block;
margin-left: 20px
}

#header_menu ul li:first-child {
margin-left: 0
}

#header_menu ul li a {
display: inline-block;
font-size: 1.5em;
line-height: 1.875;
text-transform: uppercase;
padding: 20px 0
}

#header_menu ul li a:hover {
color: #313154
}

#apresentacao {
background-color: #CFDCE3;
text-align: center;
width: 100%;
margin-top: 70px;
padding-top: 40px;
padding-bottom: 40px
}

#apresentacao h1 {
color: #607CF5;
font-size: 48px
}

#apresentacao h1:after {
content: "";
display: block;
width: 100px;
height: 3px;
background: #607CF5;
margin: 10px auto
}

#apresentacao h2,
h3 {
color: #607CF5;
font-size: 24px;
margin-bottom: 5px
}

#apresentacao h3 {
font-size: 24px
}

#perfil {
background-color: #607CF5;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 24px;
 color: #CFDCE3;
width: 100%;
padding-top: 40px;
padding-bottom: 40px
}

#perfil .descricao {
margin: 0 auto;
max-width: 700px;
padding-bottom: 45px
}

#perfil .descricao p {
line-height: 30px
}

#perfil .habilidades {
width: 700px;
margin: 0 auto
}

#perfil .habilidades ul {
list-style-type: disc;
list-style-position: inside
}

#perfil .habilidades ul li,

#perfil .habilidades p {
line-height: 40px
}

#portfolio {
background-color: #CFDCE3;
text-transform: uppercase;
padding: 40px 0;
width: 100%
}

#portfolio h2 {
color: #607CF5;
font-size: 36px;
line-height: 40px;
text-align: center
}

#portfolio h2:after {
content: "";
display: block;
width: 100px;
height: 3px;
background: #607CF5;
margin: 10px auto
}

.portfolio-lista li {
display: inline-block;
margin: 28px 68px;
padding-top: 40px
}
.portfolio-lista li:hover img {
filter: brightness(0.5)
}

.portfolio-lista-imagens {
text-align: center
}

.button {
position: relative;
width: 220px;
left: 0;
top: -100px;
padding-top: 105px;
margin-top: -121px;
padding-bottom: 96px;
margin-bottom: -96px;
text-align: center;
opacity: 0;
transition: opacity .35s ease
}

.button a {
color: #CFDCE3;
font-size: 18px
}

.button:hover {
opacity: 1
}

#contato {
background-color: #607CF5;
width: 100%;
padding: 40px 0
}

#contato h2 {
color: #CFDCE3;
font-size: 36px;
line-height: 40px;
text-align: center;
padding-bottom: 40px;
text-transform: uppercase
}

#contato h2:after {
content: "";
display: block;
width: 100px;
height: 3px;
background: #CFDCE3;
margin: 10px auto
}

.form {
padding-right: 60px
}
.form label {
display: block;
color: #CFDCE3;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 18px;
line-height: 25px
}

.form input {
display: block;
width: 100%;
border: 4px solid #CFDCE3;
background: none;
color: #fff;
padding: 5px 10px;
font-size: 14px;
font-family: Georgia, 'Times New Roman', Times, serif
}

.form textarea {
display: block;
width: 100%;
height: 120px;
border: 4px solid #CFDCE3;
background: none;
color: #fff;
padding: 7px 10px;
margin-bottom: 20px;
font-size: 14px;
font-family: Georgia, 'Times New Roman', Times, serif
}

.form button {
border: 3px solid #CFDCE3;
color: #CFDCE3;
font-size: 14px;
line-height: 20px;
text-transform: uppercase;
font-weight: 700;
letter-spacing: .1em;
padding: 7px 40px;
background: none
}

.form button:hover {
border-color: #313154;
color: #313154
}

.contato_dados h3 {
color: #CFDCE3;
text-transform: uppercase;
font-size: 18px;
line-height: 25px;
font-weight: 700
}

.contato_dados span {
 font-size: 18px;
line-height: 30px;
display: block;
font-family: Georgia, 'Times New Roman', Times, serif
}

.nao-aparece {
visibility: hidden;
position: absolute;
height: 0
}

.footer {
width: 100%;
background-color: #CFDCE3;
color: #607CF5;
font-size: 14px;
line-height: 20px;
font-family: Georgia, 'Times New Roman', Times, serif;
padding: 20px 0
}

.site {
width: 100%;
background-color: #CFDCE3;
margin-top: 85px;
padding-bottom: 40px
}

.site h2 {
color: #607CF5;
font-size: 36px;
line-height: 40px;
text-align: center;
padding: 40px 0;
text-transform: uppercase
}

.site h2:after {
content: "";
display: block;
width: 100px;
height: 3px;
background: #607CF5;
margin: 10px auto
}

.site p {
color: #607CF5;
font-size: 18px;
line-height: 25px;
font-family: Georgia, 'Times New Roman', Times, serif;
padding-bottom: 20px
}

.site a {
color: #607CF5;
font-size: 18px;
line-height: 25px;
 font-family: Georgia, 'Times New Roman', Times, serif;
color: #607CF5
}

.site .print {
background: url(../img/bikcraft-site.jpg) no-repeat center;
height: 700px
}

.site .print-2 {
background: url(../img/minha-bolsa.png) no-repeat center;
height: 700px
}

.site a:hover {
color: #313154
}

.footer-site {
background-color: #607CF5;
color: #CFDCE3
}

[data-anime] {
opacity: 0
}

.fadeInDown {
transform: translate3d(0, -20px, 0)
}

.anime {
opacity: 1;
transform: none;
transition: opacity 800ms, transform 800ms
}

@media screen and (max-width: 787px) {

#header_menu ul li a {
font-size: 18px;
line-height: 25px;
padding: 25px 0
}
#header_menu ul li {
margin-left: 10px
}
#apresentacao h1 {
font-size: 36px
}
#apresentacao h2 {
font-size: 18px
}
#perfil {
font-size: 18px
}
#perfil .descricao p {
text-align: center
}
#portfolio h2 {
 font-size: 24px;
line-height: 30px
}
#portfolio h2:after {
width: 66px
}
#contato h2 {
font-size: 24px;
line-height: 30px
}
#contato h2:after {
width: 66px
}
.site {
margin-top: 75px
}
.site .print {
background: url(../img/bikcraft-mobile.jpg) no-repeat center;
height: 500px
}
}

@media screen and (max-width: 355px) {

#header_menu ul li a {
font-size: 14px;
line-height: 20px;
padding: 20px 0
}
#apresentacao {
margin-top: 60px
}
#apresentacao h1 {
font-size: 24px;
line-height: 30px
}
#apresentacao h2 {
font-size: 18px;
line-height: 22px
}
#perfil {
font-size: 14px
}
#perfil .descricao p {
line-height: 20px
}
#portfolio h2 {
font-size: 18px;
line-height: 22px
}
#contato h2 {
font-size: 18px;
line-height: 22px
}
#contato label {
font-size: 14px;
line-height: 18px
}
.form input {
padding: 5px
 }
.form textarea {
padding: 5px
}
.form button {
font-size: 14px;
line-height: 20px;
letter-spacing: .1em;
padding: 7px 20px;
background: none;
margin: 0 auto
}
.contato_dados h3 {
font-size: 14px;
line-height: 20px
}
.contato_dados span {
font-size: 14px;
line-height: 20px
}
}