.container { position: relative; }

html, body { height: 100%; }

body { background-image: url("../images/background.jpg");background-size: cover;font-family: "Arial";font-size: 14px; }

#sol { position: absolute; top: 50px; left: 50%; margin-left: -150px; height: 325px; width: 371px; background-image: url( "../images/sprites/sun.png" );-webkit-animation: sol-animacao 1s steps(4) infinite;animation: sol-animacao 1s steps(4) infinite; }

header { background: transparent url("../images/blur.png") repeat-x; }
header #redes-sociais { position: absolute;list-style: none; top: 5px;right: 5px; }
header #redes-sociais li { display: inline-block;margin-right: 5px; }
header #redes-sociais li a { display: block;text-indent: -5000px;width: 26px; height: 25px;background-image: url("../images/icons-sb5a49c9ec6.png"); }
header #redes-sociais li#facebook a { background-position: 0 -290px; }
header #redes-sociais li#twitter a { background-position: 0 -240px; }
header #redes-sociais li#youtube a { background-position: 0 -190px; }
header #redes-sociais li#flickr a { background-position: 0 -265px; }
header #redes-sociais li#linkedin a { background-position: 0 -215px; }
header h1 { margin: 0;margin-top: -15px; padding-top: 20px;padding-bottom: 5px;text-align: center; }
header h1 a { display: inline-block;text-indent: -5000px;background: url("../images/icons-sb5a49c9ec6.png") no-repeat;width: 143px;height: 141px; }
header h2 { margin-top: 70px; text-align: center; color: #c52d4e; font-size: 2.5em;font-weight: bold;text-transform: uppercase; }

#contents { margin-top: 10px; margin-bottom: 10px; }
#contents h3 { margin: 0;margin-bottom: 10px; text-align: center; color: #c52d4e; font-size: 1.3em;font-weight: bold;text-transform: uppercase; }
#contents #resume { padding: 10px; }
#contents #resume .resume-details { margin-bottom: 10px; }
#contents #resume .row { min-height: 40px; }
#contents #resume .resume-label { font-weight: bold;font-size: 1em; }
#contents #resume .resume-value {display: block; font-size: 1.5em;text-align: right;padding: 0 5px; }
#contents #resume .resume-comparacoes { text-align: center; }
#contents #resume .resume-comparacoes a { display: inline-block; padding-top: 95px; width: 85px; height: 105px; color: #000;text-transform: uppercase;font-weight: bold;margin-bottom: 10px; }
#contents #resume .resume-comparacoes a:hover { -webkit-animation: resume-comparacoes-animacao 1s steps(3) infinite;animation: resume-comparacoes-animacao 1s steps(3) infinite; }
#contents #resume .resume-comparacoes a.emArvores { background-image: url("../images/sprites/tree.png"); }
#contents #resume .resume-comparacoes a.emLampadas { background-image: url("../images/sprites/lamp.png"); }
#contents #resume .resume-comparacoes a.emDioxidoDeCarbono { background-image: url("../images/sprites/co2.png"); }
#contents #resume .resume-comparacoes a.emDinheiro { background-image: url("../images/sprites/cash.png"); }
#contents #resume .resume-comparacoes-details { position: absolute;left: 500px;bottom: 0px;width: 490px;padding: 10px; }
#contents #resume .resume-comparacoes-details.ng-hide-remove { -webkit-animation: 0.5s fade-in; -moz-animation: 0.5s fade-in; -o-animation: 0.5s fade-in; animation: 0.5s fade-in; z-index:100; }
#contents #resume .resume-comparacoes-details.ng-hide { -webkit-animation: 0.5s fade-out; -moz-animation: 0.5s fade-out; -o-animation: 0.5s fade-out; animation: 0.5s fade-out; z-index:99; }
#contents #login-box { width: 300px;margin: 0 auto; }
#contents #login-box .form-group { padding: 5px; }
#contents #login-box .form-action { display: none; }
#contents #login-box .logged { padding: 20px; }

footer { padding: 10px 0;  }
footer .site a { display: block;text-indent: -5000px;background: url("../images/icons-sb5a49c9ec6.png") no-repeat;width: 133px; height: 49px;background-position: 0 -141px;margin-top: 5px; }
footer address { margin: 0;padding: 0; }

.discreet { text-align: right;font-size: 0.7em;font-style: italic; }
.close { position: absolute;right: 10px;top: 10px;color: #000000;font-size: 1em; }
.close:hover { color: #000000; }
.arrow { position: absolute; width: 80px; height: 80px; left: -80px; top: 80px; overflow: hidden; }
.arrow::before { content: ""; display: block; position: absolute; top: 15px; right: -25px; width: 50px; height: 50px; background-color: rgba(255, 255, 255, 0.85); box-shadow: 0px 0px 10px #666; transform: rotate(45deg); }
.light { background-color: rgba(255,255,255,0.85); }
.round { -webkit-border-radius: 10px 10px; -moz-border-radius: 10px 10px; -ms-border-radius: 10px 10px; -o-border-radius: 10px 10px; border-radius: 10px 10px; }
.shadow { -webkit-box-shadow: #666666 0 0 10px; -moz-box-shadow: #666666 0 0 10px; box-shadow: #666666 0 0 10px; }

@-webkit-keyframes sol-animacao { to { background-position: 0 0; } from { background-position: 1484px 0; } }
@keyframes sol-animacao { to { background-position: 0 0; } from { background-position: 1484px 0; } }

@-webkit-keyframes resume-comparacoes-animacao { to { background-position: 0 0; } from { background-position: 255px 0; } }
@keyframes resume-comparacoes-animacao { to { background-position: 0 0; } from { background-position: 255px 0; } }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@-moz-keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@-webkit-keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@-moz-keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@-webkit-keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }