/*
 * Visual styling library for website pages
 * Use: <link rel="stylesheet" type="text/css" href="visual.css"/>
 * Now attack all document properties with CSS
 */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root {
    --font-size-print: 90%;
    --maxwidth:        85%;
    --overlay-color:   rgba(0,0,0,.4);
    --lightblue:       #25aae1;
    --black:           #212121;
    --main:            #485461;
    --marine:          #2f3943;
    --pretyblue:       #002244;
    --night:           #202328;
}

/*****************************************************************************/
/*                              EFEITO LOADING                               */
/*****************************************************************************/
.loader { width: 80px; background-color: transparent; left: 50%; top: 50%; border-radius: 5px; position: fixed; z-index: 9999; transform: translate(-50%,-50%); }
.loader.hide { display: none; }
.loader:before { content: ''; padding-top: 100%; display: block; }
.loader .circular { width: 100%; height: 100%; left: 0; top: 0; margin: auto; position: absolute; animation: rotate 2s linear infinite; }
.loader .path { stroke-width: 4; stroke-dasharray: 1, 200; stroke-dashoffset: 0; stroke-linecap: round; animation: dash 1.5s ease-in-out infinite, colors 6s ease-in-out infinite; }
@keyframes rotate {
    100% { transform: rotate(360deg); }
}
@keyframes dash {
    0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; }
    100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; }
}
@keyframes colors {
    0%, 100% { stroke: #007bff; }
}
@keyframes colors2 {
    100%, 0% { stroke: #d62d20; }
    40% { stroke: #0057e7; }
    66% { stroke: #008744; }
    80%, 90% { stroke: #ffa700; }
}
/*****************************************************************************/

/*****************************************************************************/
/*                               GLOBAL STYLES                               */
/*****************************************************************************/
* {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}
/*::selection { background-color: var(--blue); color: #fff; }*/
body { background-color: #fff; overflow: hidden; }
html { color: var(--dark); font-size: 16px; overflow-x: hidden; }

/** SCROLLBARS **/
::-webkit-scrollbar { width: 16px; }
::-webkit-scrollbar-track { border-radius: 8px; }
::-webkit-scrollbar-thumb {
    height: 56px; background-color: #555; background-clip: content-box; border: 4px solid transparent; border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background-color: #888; }

/** GLOBAl **/
.main-desc { width: 100%; max-width: var(--maxwidth); font-size: 20px; font-weight: 500; margin: 0 auto; margin-bottom: 20px; text-transform: uppercase; }
.description { font-size: 18px; font-weight: normal; margin-bottom: 30px; text-align: center; text-transform: uppercase; letter-spacing: 2px; }
.subfield { width: 100%; max-width: var(--maxwidth); color: var(--pretyblue); font-size: 30px; font-weight: 500; margin: 30px auto; padding-top: 19px; border-bottom: 1px solid rgba(0,0,0,.2); text-align: center; text-transform: uppercase; letter-spacing: 5px; line-height: 0; }
.subfield span { background-color: #fff; padding: 0 20px; user-select: none; }
@media(max-width: 399px) { .subfield { font-size: 25px; }}

/** BUTTONS **/
.button {
    background-color: #fff;
    font-size: 90%;
    font-weight: normal;
    border: 1px solid var(--night);
    border-radius: 0;
    padding: 15px 20px;
    display: inline-block;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
    text-transform: uppercase;
    text-overflow: ellipsis;
    letter-spacing: 1px;
    transition: .2s;
    position: relative;
    user-select: none;
    outline: none;
    overflow: hidden;
    cursor: pointer;
}
.button:active:not([disabled]) { background-color: #fff; }
.button:hover:not([disabled]) { background-color: var(--night); color: #fff; }
.button:disabled,
.button:active:disabled,
.button:hover:disabled { background-color: rgba(0,0,0,.03); color: rgba(0,0,0,.3); top: 0; text-shadow: none; cursor: default; }
.button i { width: auto; font-size: 20px; margin-top: 0; margin-right: 10px; text-align: center; vertical-align: middle; }

/** MATERIALIZE **/
/** TEXTBOX / TEXTAREA **/
.input-material { background-color: transparent; padding-top: 17px; position: relative; }
.input-material i.ricon { width: 40px; font-size: 25px; top: 42%; right: 4px; text-align: center; position: absolute; cursor: pointer; }
.input-material i.ricon.disabled { color: rgba(0,0,0,.5); cursor: default; }
.input-material label {
    background-color: transparent;
    color: #fff;
    font-size: 100%;
    left: 0;
    top: -3px;
    padding: 0 2px;
    position: absolute;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 1;
    cursor: text;
    transition: .2s;
}
.input-material input,
.input-material textarea {
    width: 100%;
    background-color: #fff;
    font-size: 100%;
    border: 1px solid var(--night);
    border-radius: 0;
    padding: 10px;
    display: block;
    transition: border .25s ease-in-out;
    outline: none;
    box-shadow: none;
}
.input-material input::-webkit-input-placeholder,
.input-material input::-moz-placeholder,
.input-material input:-ms-input-placeholder,
.input-material input::placeholder,
.input-material textarea::-webkit-input-placeholder,
.input-material textarea::-moz-placeholder,
.input-material textarea:-ms-input-placeholder,
.input-material textarea::placeholder {
    -webkit-transition: .2s;
    transition: .2s;
}
.input-material input:placeholder-shown:not(:focus)::-webkit-input-placeholder,
.input-material input:placeholder-shown:not(:focus)::-moz-placeholder,
.input-material input:placeholder-shown:not(:focus):-ms-input-placeholder,
.input-material input:placeholder-shown:not(:focus)::placeholder,
.input-material textarea:placeholder-shown:not(:focus)::-webkit-input-placeholder,
.input-material textarea:placeholder-shown:not(:focus)::-moz-placeholder,
.input-material textarea:placeholder-shown:not(:focus):-ms-input-placeholder,
.input-material textarea:placeholder-shown:not(:focus)::placeholder {
    opacity: 0;
}
.input-material input:placeholder-shown:not(:focus) + *,
.input-material textarea:placeholder-shown:not(:focus) + * {
    color: var(--gray); font-size: 100%; left: 7px; top: 29px;
}
.input-material input:hover:not([disabled]),
.input-material textarea:hover:not([disabled]),
.input-material input:focus,
.input-material textarea:focus { border-color: var(--blue); outline: none; }
.input-material input:disabled,
.input-material input:hover:disabled,
.input-material textarea:disabled,
.input-material textarea:hover:disabled {
    background-color: rgba(0,0,0,.01); color: rgba(0,0,0,.3); cursor: default;
}
.input-material.erro input { border-color: var(--danger); }
.label-material { font-size: 100%; margin-left: 3px; margin-top: 0; display: block; }

/** SELECT **/
.select-material select {
    width: 100%;
    background-color: #fff;
    background-image: none;
    font-size: 100%;
    border: none;
    border-radius: 1px;
    padding: 7px 6px;
    margin: 0;
    margin-top: 0;
    box-shadow: none;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
}
.select-material select::-ms-expand { display: none; }
.select-material label { font-weight: 500; left: 0; top: -21px; position: absolute; }
.select-material {
    width: 100%;
    background-color: transparent;
    background-image: none;
    border: 1px solid #ddd;
    border-radius: 1px;
    top: 17px;
    position: relative;
    display: block;
    cursor: pointer;
    transition: border .25s ease-in-out;
    appearance: none;
    box-shadow: none;
}
.select-material:hover:not([disabled]) { border-color: var(--skyblue); outline: none; }
.select-material:after { content: '\25bc'; background-color: #fff; color: #212121; font-size: 9px; top: 2px; right: 2px; bottom: 2px; padding: 8px 5px; position: absolute; pointer-events: none; }
/*.select-material:hover:not([disabled]):after { color: var(--main-color); border-radius: 1px; }*/
.select-material select:disabled { background-color: rgba(0,0,0,.01); cursor: default; }

/** ALERTS **/
.msgbox { min-width: 320px; max-width: 400px; bottom: 15px; right: 15px; position: fixed; z-index: 9999; }
.msgbox .alert {
    width: 100%;
    background-color: rgba(255,255,255,.9);
    color: var(--night);
    font-size: 100%;
    font-weight: normal;
    padding: 18px 40px 18px 18px;
    border: 1px solid #323232;
    border-left: 4px solid #212121;
    border-radius: 0;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
}
.msgbox .close { width: 28px; height: 100%; background-color: #212121; top: 0; right: 0; align-items: center; justify-content: center; display: flex; position: absolute; }
.msgbox i.icone { font-size: 25px; margin-right: 10px; display: block; }
.msgbox i.close { color: #fff; font-size: 20px; cursor: pointer; }
.msgbox i.close:hover { opacity: .8; }
.msgbox .alert.anime { left: 380px; }
.msgbox.show { animation: showalert 1s ease forwards; }
.msgbox.hide { animation: hidealert 1s ease forwards; }

/** PROGRESSBAR **/
.progress { width: 100%; height: 10px; background-color: #ccc; margin-top: 10px; border-radius: 2px; position: relative; overflow: hidden; }
.progress .fill { height: 100%; background: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-size: 10px; border-radius: 2px; animation: striped .5s linear infinite; }
.progress .bar { width: 0; height: 100%; background-color: var(--pretyblue); }
.progress span { color: #fff; font-size: 10px; left: 50%; line-height: 10px; text-align: center; text-shadow: 1px 1px 2px rgba(0,0,0,.2); position: absolute; transform: translateX(-50%); }
@keyframes striped {
    0% { background-position: 10px 0; }
}

/** MODAL BOX **/
.modalbox .mdwrap { width: 100%; background-color: #fff; font-size: var(--font-size-print); margin: 30px auto; padding: 15px; border: 1px solid var(--marine); border-radius: 1px; align-self: flex-start; overflow: hidden; transition: .5s ease; }
.modalbox .mdwrap.proc { width: 240px; height: 120px; border-radius: 5px; padding: 20px; line-height: 38px; text-align: center; cursor: default; }
.modalbox .mdoverlay { width: 100%; height: 100%; background-color: transparent; left: 0; top: 0; opacity: 0; position: fixed; display: flex; z-index: -998; transform: scale(1); transition: .3s ease; }
.modalbox .mdoverlay .mdclose { color: rgba(255,255,255,.75); font-size: 25px !important; font-weight: normal; top: 0; right: 8px; position: absolute; }
.modalbox .mdoverlay .mdclose:hover { color: #fff; cursor: pointer; }

/* Close Modal click away */
.modalbox input:checked ~ .mdoverlay { background-color: var(--overlay-color); transform: scale(1); opacity: 1; z-index: 999; overflow-y: auto; }
.modalbox input:checked ~ .mdoverlay .mdwrap { transform: translateY(0); z-index: 999; }
.modalbox input:checked ~ .mdoverlay .mdoclose { z-index: 999; }
.modalbox .mdoverlay .mdoclose { width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: -100; }

/* Various styles */
.mdtitle { background-color: var(--marine); color: #fff; font-size: 100%; font-weight: 500; margin: -15px; margin-bottom: 15px; padding: 6px; border-radius: 1px 1px 0 0; line-height: 20px; text-align: center; cursor: default; }
.mdtitle i { font-size: 18px; margin-right: 5px; }
.mdsubtitle { font-size: 18px; color: var(--black); font-weight: 500; margin-bottom: 15px; line-height: 20px; text-align: center; cursor: default; }
.mdtext { margin-bottom: 15px; align-items: center; display: flex; }
.mdtext i { font-size: 35px; margin-right: 10px; align-self: flex-start; display: flex; }
.mdbutton { margin-top: 5px; margin-bottom: 3px; align-items: center; justify-content: center; display: flex; }
.mdbutton button { margin-left: 10px; }
/*
 * Normal => mdwrap
 * Top    => mdwrap fromTop
 * Bottom => mdwrap fromBottom
 * Left   => mdwrap fromLeft
 * Right  => mdwrap fromRight
 * Center => mdwrap aCenter
 * Mix    => mdwrap aCenter fromBottom
 * Full   => mdwrap aCenter full fromBottom
 * Small  => mdwrap aCenter small fromBottom
 */
.modalbox .mdwrap.fromLeft { transform: translateX(-100%); }
.modalbox .mdwrap.fromRight { transform: translateX(100%); }
.modalbox .mdwrap.fromTop { transform: translateY(-100%); }
.modalbox .mdwrap.fromBottom { transform: translateY(100%); }
.modalbox .mdwrap.aCenter { align-self: center; }
.modalbox .mdwrap.small { width: 30%; }
.modalbox .mdwrap.full { width: 100%; height: 97%; margin-top: 30px; }

/** RIPPLE **/
.ripple { background: rgba(255,255,255,.25); border-radius: 100%; pointer-events: none; transform: scale(0); position: absolute; animation: ripple .45s ease-out; }
@keyframes ripple { to { opacity: 0; transform: scale(1.5); }}

/** TOOLTIPS **/
.tooltips { left: 50%; top: 80%; position: absolute; opacity: 0; transition: .250ms; }
.tooltips:after {
    content: attr(data-tips);
    background-color: rgba(0,0,0,.75);
    color: #fff;
    font-size: 12px;
    left: 50%;
    padding: 5px 8px;
    border-radius: 5px;
    position: absolute;
    white-space: nowrap;
    transform: translateX(-50%);
    user-select: none;
    cursor: default;
}
.tooltips:before {
    content: '';
    width: 0;
    height: 0;
    left: 50%;
    top: -5px;
    border-style: solid;
    border-width: 0 5px 5px 5px;
    border-color: transparent transparent rgba(0,0,0,.75) transparent;
    position: absolute;
    transform: translateX(-50%);
    z-index: 1;
}

/** AUTOCOMPLETE **/
ul.autocomplete {
    width: 100%;
    max-height: 200px;
    background-color: #fff;
    left: 0;
    top: 100%;
    border-radius: 2px;
    position: absolute;
    list-style: none;
    overflow: hidden;
    overflow-y: auto;
    z-index: 999;
    box-shadow: 2px 2px 20px rgba(0,0,0,.1);
}
ul.autocomplete li { font-size: 100%; padding: 10px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; cursor: pointer; }
ul.autocomplete li:hover { background-color: #ddd; }

/** HAMBURGUER **/
.hamburger-menu { width: 50px; height: 50px; align-items: center; justify-content: center; display: flex; cursor: pointer; }
.hamburger-menu .bar { width: 1.9rem; height: 1.5px; background-color: rgba(255,255,255,.5); border-radius: 2px; position: relative; transition: .5s ease; }
.hamburger-menu .bar:before,
.hamburger-menu .bar:after { content: ''; width: inherit; height: inherit; background-color: rgba(255,255,255,.5); position: absolute; transition: .5s; }
.hamburger-menu .bar:before { transform: translateY(-9px); }
.hamburger-menu .bar:after { transform: translateY(9px); }
.hamburger-menu:hover .bar,
.hamburger-menu:hover .bar:before,
.hamburger-menu:hover .bar:after { background-color: #fff; }

/** SCROLL **/
.scroll { width: 40px; height: 40px; background-color: var(--night); right: 0; bottom: 10px; border-radius: 2px; text-align: center; transition: all .5s ease-in-out; display: block; position: fixed; z-index: 0; overflow: hidden; cursor: pointer; }
.scroll:hover i { color: var(--lightblue); }
.scroll.top-off { bottom: -100px; }
.scroll i { color: #fff; font-size: 20px; line-height: 40px; }

/** IMAGES **/
.thumbnails { width: 100%; height: 100%; background: #ddd url() no-repeat center/center; background-size: 100% 100%; position: relative; overflow: hidden; cursor: default; box-shadow: 8px 8px 10px rgba(0,0,0,.4); }
.thumbnails:after { content: ''; width: 100%; height: 100%; background-color: rgba(43,51,59,.8); left: 0; top: 0; position: absolute; opacity: 0; transition: .3s; }
.thumbnails:hover:after,
.thumbnails:hover .legend { opacity: 1; transform: translateY(0); }
.thumbnails .legend { width: 100%; height: 100%; color: #fff; font-size: 25px; font-weight: 500; left: 0; bottom: 0; padding: 20px; text-align: center; text-shadow: 1px 1px 2px #222; position: absolute; align-items: center; justify-content: center; flex-direction: column; display: flex; z-index: 1; opacity: 0; transform: translateY(-100%); transition: .3s; }
.thumbnails .legend .subtitle { color: #eee; font-size: 15px; margin-top: 8px; display: block; text-shadow: none; }

/** TAGS **/
.tags { width: 100%; font-size: 14px; font-weight: 500; margin: 10px 0; position: relative; }
.tags:first-child { margin: 0; }
.tags .tag { align-items: center; justify-content: space-between; display: flex; }
.tags .lang, .tags .percent { color: #212121; display: inline-block; user-select: none; }
.tags .progress { width: 100%; height: 10px; background-color: #ccc; margin-top: 8px; border-radius: 2px; position: relative; overflow: hidden; }
.tags .progress:after { content: ''; width: 0; height: 100%; background-color: var(--pretyblue); left: 0; top: 0; position: absolute; }
/*****************************************************************************/

/*****************************************************************************/
/*                                 HOMEPAGE                                  */
/*****************************************************************************/
/** HOMEPAGE **/
header { width: 100%; min-height: 100vh; background: linear-gradient(135deg, var(--main) 0%, #28313b 74%); transform-style: preserve-3d; overflow-x: hidden; }
header .topo { width: 100%; height: 100px; left: 0; top: 0; position: fixed; z-index: 10; }
header .topo .menu { width: 100%; max-width: var(--maxwidth); color: #fff; margin: 30px auto; align-items: center; justify-content: space-between; display: flex; }
header.active .hamburger-menu .bar { background-color: transparent; transform: rotate(360deg); }
header.active .hamburger-menu .bar:before { transform: translateY(0) rotate(45deg); }
header.active .hamburger-menu .bar:after { transform: translateY(0) rotate(-45deg); }
header.active .capa { cursor: default; animation: capa-anime .5s ease; transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(.5); }
header.active .shadow.one { animation: shadow-one .6s ease-out; transform: perspective(1300px) rotateY(20deg) translateZ(215px) scale(.5); }
header.active .shadow.two { animation: shadow-two .6s ease-out; transform: perspective(1300px) rotateY(20deg) translateZ(120px) scale(.5); }
header.active .capa:hover { transform: perspective(1300px) rotateY(20deg) translateZ(340px) scale(.5); }
header.active .capa:hover + .shadow.one { transform: perspective(1300px) rotateY(20deg) translateZ(230px) scale(.5); }
header.active .navbar a { animation: links-show .5s forwards ease var(--i); }
header .capa { width: 100%; left: 0; position: relative; z-index: 5; overflow: hidden; transform-origin: left; transform-style: preserve-3d; transition: .5s; }
header .banner { width: 100%; min-height: 100vh; background: url('../images/fundo.jpg') no-repeat top center / cover; position: relative; }
header .overlay { width: 100%; height: 100%; background-color: rgba(43,51,59,.8); left: 0; top: 0; position: absolute; align-items: center; justify-content: center; display: flex; }
header .intro { max-width: 700px; color: #fff; padding: 20px; text-align: center; user-select: none; }
header .title { font-size: 50px; font-weight: 500; margin-bottom: 20px; letter-spacing: 5px; text-shadow: 2px 4px 5px rgba(0,0,0,.5); }
header .desc { color: #fff; font-size: 20px; font-weight: normal; text-shadow: 1px 2px 2px rgba(0,0,0,.5); }
header .shadow { width: 100%; height: 100vh; background-color: #fff; left: 0; top: 0; position: absolute; transform-origin: left; transform-style: preserve-3d; transition: .5s; }
header .shadow.one { opacity: .15; z-index: -1; }
header .shadow.two { opacity: .1; z-index: -2; }
header .navbar { width: 30%; height: 100vh; top: 0; right: 0; position: absolute; align-items: center; justify-content: center; display: flex; z-index: 2; }
header .navbar a { color: rgba(255,255,255,.5); font-size: 100%; font-weight: normal; padding: 10px 0; display: inline-block; text-transform: uppercase; letter-spacing: 2px; transition: .3s; opacity: 0; transform: translateY(10px); animation: links-hide .5s forwards ease; }
header .navbar a:hover { color: #fff; }
@media(max-width: 799px) {
    header.active .capa { z-index: -5; }
    header .navbar { width: 100%; background-color: var(--marine); text-align: center; }
    header .navbar a { font-size: 20px; margin: 10px 0; }
}

/** SERVICOS **/
#servicos { width: 100%; max-width: var(--maxwidth); margin: 100px auto; position: relative; }
#servicos .service { width: 100%; grid-gap: 20px; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); display: grid; }
#servicos .service .item { width: 100%; background-color: #fff; padding: 15px; border-radius: 2px; text-align: center; transition: all 250ms cubic-bezier(.02,.01,.47,1); }
#servicos .service .item:hover { background-color: var(--main); color: #fff; cursor: default; transform: translate(0,-8px); transition-delay: 0s !important; box-shadow: 8px 8px 10px rgba(0,0,0,.4); }
#servicos .service .item:hover i,
#servicos .service .item:hover .title { color: #fff; }
#servicos .service i { color: rgba(0,0,0,.5); font-size: 80px; }
#servicos .service .title { font-size: 20px; font-weight: 500; margin: 10px 0; }
#servicos .service .details { text-align: center; line-height: 22px; }
#servicos button { margin-top: 40px; left: 50%; position: relative; transform: translateX(-50%); }

/** PORTFOLIO **/
#portfolio { width: 100%; background-color: #e5e5e5; margin: 100px auto; padding: 5px; position: relative; }
#portfolio .port { width: 100%; max-width: var(--maxwidth); margin: 0 auto; margin-bottom: 40px; grid-gap: 50px; justify-content: center; grid-template-columns: repeat(auto-fit, minmax(300px,500px)); display: grid; }
#portfolio .item { width: 100%; min-height: 280px; background-color: #fff; overflow: hidden; }
@media(max-width: 459px) { #portfolio .item { min-height: 200px; }}

/** PROGRAMADOR **/
#programador { width: 100%; max-width: var(--maxwidth); margin: 100px auto; position: relative; }
#programador .column { width: 100%; grid-gap: 50px; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); display: grid; }
#programador .bio .logo { width: 150px; height: 150px; background: linear-gradient(to right, #bebcb3, #dfdad6); border: 2px solid #fff; border-radius: 50%; left: 50%; object-fit: cover; text-align: center; position: relative; overflow: hidden; transform: translateX(-50%); box-shadow: 2px 2px 8px rgba(0,0,0,.4); }
#programador .bio p { margin: 20px 0; line-height: 1.5; }

/** RODAPE **/
#rodape { width: 100%; background-color: var(--marine); margin: 0 auto; position: relative; }
#rodape #contato { width: 100%; max-width: var(--maxwidth); color: #eee; margin: 20px auto; padding: 10px; grid-gap: 30px; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); display: grid }
#rodape .about img { max-width: 200px; margin: 20px 0; }
#rodape ul li { margin-bottom: 10px; display: flex; }
#rodape ul li i { color: var(--lightblue); font-size: 20px; margin-right: 10px; }
#rodape a { color: var(--lightblue); }
#rodape a:hover { text-decoration: underline; }
#rodape .map { margin-top: 20px; text-align: center; }
#rodape .map iframe { width: 500px; height: 300px; border: none; }
#rodape .author { width: 100%; background-color: rgba(0,0,0,.4); color: #eee; font-size: 12px; padding: 15px; text-align: center; }
@media(max-width: 1080px) { #rodape .map iframe { width: 400px; height: 250px; }}
@media(max-width: 880px) { #rodape .map iframe { width: 360px; }}
@media(max-width: 780px) { #rodape #contato { padding: 0; display: block; }}
@media(max-width: 440px) { #rodape .map iframe { width: 320px; height: 220px; }}

/** PIX **/
#pix { width: 100%; max-width: 850px; margin: 0 auto; align-items: center; justify-content: center; flex-direction: column; display: flex; }
#pix img { max-width: 300px; margin: 20px 0; }
#pix .legend { color: var(--pretyblue); font-size: 30px; font-weight: 500; margin-top: 20px; }
#pix .input-material { width: 90%; max-width: 670px; text-align: center; }
#pix .copiacola { width: 100%; height: 75px; font-size: 12px; margin-bottom: 20px; resize: none; overflow: hidden; }
#pix .lista a { color: var(--black); font-size: 14px; margin: 20px; align-items: center; display: flex; opacity: .7; }
#pix .lista a:hover { opacity: 1; }
#pix .lista i { color: var(--pretyblue); font-size: 32px; }

/** ANIMATIONS **/
@keyframes capa-anime {
    from { transform: translate(0); }
    to { transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(.5); }
}

@keyframes shadow-one {
    0% { transform: translate(0); }
    5% { transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(.5); }
    100% { transform: perspective(1300px) rotateY(20deg) translateZ(215px) scale(.5); }
}

@keyframes shadow-two {
    0% { transform: translate(0); }
    20% { transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(.5); }
    100% { transform: perspective(1300px) rotateY(20deg) translateZ(120px) scale(.5); }
}

@keyframes links-show {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes links-hide {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(10px); }
}
/*****************************************************************************/