* { box-sizing: border-box; }
html { width: 100%; height: 100%; font-size: 16px; font-family: 'Titillium Web', sans-serif; line-height: 1.2; }
body { color: #444; padding: 0; margin: 0; width: 100%; height: 100%; font-size: 1rem; }
a { color: #66b3ff; text-decoration: none; outline: none; }
a:hover { color: #ff4d4d; text-decoration: underline; }
textarea:focus, input:focus { outline: none; }
#wrap { width: 100%; max-width: 980px; min-width: 300px; margin: auto;  }

/* Background */
body {
    background-color: rgb(187, 169, 131);
    background-attachment: fixed;
    background-position: top right;
    background-repeat: no-repeat;
    background-size: cover;
    /* background-image: url('../img/meupcbg2.jpg'); */
}

/* Cabeçalho, menu e busca */
header { display: flex; justify-content: space-between; align-items: center; background: white; flex-wrap: wrap; height: 7rem; }
header > a { display:flex; justify-content: center; align-items: center; color: black; text-decoration: none; }
header > a:hover, .active { background: red; color: white; text-decoration: none; }
header > a img { width: auto; height: auto; background: white; } 
header > a h1 { display: none; margin: 0 1rem; letter-spacing: .2rem; text-align: center; }
header > a small { display: block; font-size: 42%; letter-spacing: 0; font-weight: normal; }
#header-wrap { display: flex; flex-direction: column; justify-content: space-between; align-itens: center; height: 100%; }
header form { display: flex; justify-content: flex-end; align-items: center; padding: 1rem 1rem 0 0; }
header form input, header form button { font-family: inherit; font-size: inherit; padding: 0.5rem; border: none; background: #eee; }
header form input { border-right: 0; background: #eee; border-radius: 0.3rem 0 0 0.3rem; width: 15rem; }
header form button {color: #888; cursor: pointer; border-radius: 0 0.3rem 0.3rem 0; }
header form button:hover { background: red; color: white;}
nav { display: flex; justify-content: flex-end; align-items: center; }
nav a { display: block; padding: 0.8rem 1rem; color: #666; text-decoration: none; }
nav a:hover { background: red; color: white; text-decoration: none; }
.dropdown { position: relative; display: inline-block; }
.droplinks { display: none; position: absolute; top: 2.8rem; right: 0; background: white; white-space: nowrap; border-left: 3px solid grey; }
.droplinks a { color: #333; }
.dropdown hr { margin: 0; padding: 0; border-top: 1px dotted grey; border-bottom: none; }
.l-links { display: block; padding: 0.8rem 1rem; color: #666; display: flex; justify-content: flex-start; align-items: center; }
.l-links > i { margin-right: .5rem; }
.l-links .login { padding: 0.3rem; }
#l-google { margin-left: .5rem; }
@media (max-width: 767px) {
	.m-contatos { display: none; }
}
@media (max-width: 659px) {
    header { height: inherit; }
    #header-wrap { width: 100%; border-top: 1px dotted #ccc; }
    header form { padding: 1rem; }
    header form input { width: 100%; }
    .m-contatos { display: block; }
    nav a:first-child { margin-right: auto; }
}
@media (max-width: 424px) {
	.m-contatos { display: none; }
}
@media (max-width: 361px) {
	header > a h1 { margin: 0 0.5rem; font-size: 8vw; }
}

/* Rodapé */
footer { color: #222; display: flex; justify-content: space-between; background: white; flex-wrap: wrap; font-size: 95%; }
footer a { color: #222; text-decoration: none; }
footer a:hover { background: #ddd; color: black; text-decoration: none; }
footer a.f-home, footer a.f-topo { width: 50%; text-align: center; padding: 1rem; display: flex; justify-content: center; align-items: center; }
footer a.f-home i, footer a.f-topo i { padding-right: 0.6rem; }
footer .f-copy { width: 100%; text-align: center; padding: 0.5rem 0.5rem 0.8rem 0.5rem; }
footer .f-copy span { display: none; }
footer .f-copy small { display: none; }
footer .f-copy p { margin: 0.3rem auto 0 auto; }
footer .f-copy p a { padding: 0.3rem; border-radius: 0.4rem; font-size: 85%; }
@media (min-width: 425px) {
	footer .f-copy span { display: inline; }
}
@media (min-width: 660px) {
	footer a.f-home, footer a.f-topo, footer .f-copy { width: inherit; }
    footer a.f-home { order: 1; }
    footer a.f-topo { order: 3; }
    footer .f-copy { order: 2; }
}

/* Conteúdo do site */
main { background: rgb(44, 47, 55, .95); }
main > h2 { margin: 0; font-size: 2rem; padding: 3rem 1rem; background: #ddd; }
main > small { display: block; margin: -1.3rem 1rem 0 1rem; text-align: right; }
main > div > article { color: white; padding: 1rem; }
main > div > article p { text-align: justify; }
main > div > aside { padding: 1.4rem 1rem 1rem 1rem; }
@media (min-width: 768px) {
	main > div { display: flex; justify-content: flex-start; align-items: flex-start; }
    main > div > article { width: 100%; }
    main > div > aside { width: 350px; }
}

/* Cards */
.card { width: 100%; max-width: 425px; margin: 0 auto 1rem auto; }
.c-header { background: #ddd; overflow: auto; border-radius: .3rem .3rem 0 0; }
.c-header > * { font-size: 1.5rem; margin: 0.7rem; padding: 0; }
.c-image > img { display: block; width: 100%; max-width: 425px; height: auto; max-height: 100px; }
.c-body { overflow: auto; padding: 0 0.8rem; background: #222; color: white; }
.c-image, .c-body { border-left: 1px dotted grey; border-right: 1px dotted gray; }
.c-footer { overflow: auto; background: #bbb; color: black; padding: 0.3rem; text-align: center; border-radius: 0 0 .3rem .3rem; }
.c-footer > a { color: red; text-decoration: none; display: inline-block; padding: 0.2rem; }
.c-footer > a:hover { color: #f28500; background: white; border-radius: 0.3rem; }

/* Imagens do texto */
.texto figure { padding: 0.3rem; border: 1px dotted grey; text-align: center; display: table; font-size: 80%; color: #ddd; }
.texto figure img { width: 100%; max-width: auto; height: auto; display: block; margin-bottom: 0.3rem; }
.float-left, .float-right, .float-center { margin: 1rem auto; }
@media (min-width: 640px) {
    .float-left {
        float: left;
        margin-right: 1rem;
    }
    .float-right {
        float: right;
        margin-left: 1rem;
    }
}