@charset "utf-8";

body {font-family: 'Roboto', sans-serif; font-size: 16px; line-height: 18px; color: #000; font-weight: 300; margin: 0px; padding: 0px; text-align: left; overflow-x: hidden;}
@media (min-width: 550px) {body {font-size: 18px; line-height: 20px; text-align: justify;}}
@media (min-width: 990px) {body {font-size: 20px; line-height: 24px; text-align: justify;}}
hr {width: 90%; border-width: 1px; border-color: #cc0000; margin: 5%;}

#grando {width: 100%; height: 100vh;}
#gdspn {width: 75.2%; padding: 12.4%; padding-top: 70px; background: #fff;}
#sitename {position: absolute; left: 0px; right: 0px; width: 70%; height: 100vh; margin: auto; color: #fefefe; text-align: center; font-size: 14vw; line-height: 14vw; letter-spacing: -0.3vw; font-weight: 100; text-shadow: #000 0px 1px 3px;}
@media (min-width: 550px) {#sitename {font-size: 7vw; line-height: 7vw; transition: 0.5s;}}
#down {position: absolute; left: 0px; right: 0px; bottom: 9vh; width: 3vw; height: auto; margin: auto; color: #fefefe; cursor: pointer; font-size: 4vw; font-weight: 100; animation: dero 1.8s infinite ease; transform: rotateZ(-45deg); text-shadow: #000 0px 1px 3px;}

@keyframes dero {1% {bottom: 9vh;} 45% {bottom: 8vh;} 50% {bottom: 8vh;} 95% {bottom: 9vh;} 100% {bottom: 9vh;}}

a {color: #755; text-decoration: none; transition: 0.5s;}
@media (min-width: 550px) {a {color: #997777; transition: 0.5s;}}
a:hover {text-decoration: underline; text-shadow: #cccccc 0px 2px 3px;}
.hyps:hover {text-decoration: none;}

.g-menu {color: #fefefe; font-family: Tahoma; font-size: 12px; text-decoration: none; padding: 0px 2vw 0px 2vw;}
@media (min-width: 550px) {.g-menu {font-size: 17px;}}
.g-menu:hover {text-decoration: none; color: white; text-shadow: #fff 0px 1px 7px;}

b {font-weight: 400;}

i {font-family: sans-serif; font-size: 0.8em;}

h1 {margin-top: 1vw; font-size: 2em; line-height: 28px; text-align: left; color: #bb0000; text-shadow: #bb6600 0px 1px 2px; font-weight: 200;}
@media (min-width: 550px) {h1 {font-size: 3em; line-height: 1em; letter-spacing: -0.2vw; font-weight: 200;}}
h2 {margin-top: 7vw; font-size: 1.5em; line-height: 20px; text-align: left; color: #bb0000; text-shadow: #bb6600 0px 1px 2px; font-weight: 200;}
@media (min-width: 550px) {h2 {font-size: 2em; line-height: 1em; letter-spacing: -0.1vw; font-weight: 200;}}
h3 {font-size: 1.2em; line-height: 18px; text-align: left; color: #bb0000; text-shadow: #bb6600 0px 1px 1px; font-weight: 200;}
@media (min-width: 550px) {h3 {font-size: 1.5em; line-height: 1em; font-weight: 200;}}

strong {font-weight: 400;}

img {width: 100%; height: 100%; border: 0px;}
.left {width: 100%; height: auto; margin: 5% 0% 5% 0%; transition: 0.5s;}
@media (min-width: 550px) {.left {width: 50%; height: auto; margin: 0% 5% 3% 0%; float: left;}}

.right {width: 100%; height: auto; margin: 5% 0% 5% 0%; transition: 0.5s;}
@media (min-width: 550px) {.right {width: 50%; height: auto; margin: 0% 0% 3% 5%; float: right;}}


/* === Head === */

#header {position: fixed; left: 0px; top: 0px; width: 100%; height: 50px; border: 0px; box-shadow: #000 0px 3px 5px;}

#pantop {position: absolute; width: 100%; height: 35px; color: white; text-align: center; padding-top: 12px;}
#line {position: absolute; width: 100%; height: 50px; background: #bb0000; opacity: 0.75;}

/* === Content === */

blockquote {margin: 0px; transition: 1s;}
@media (min-width: 550px) {blockquote {margin: 5vw; transition: 1s;}}


/* === Cellar === */

#footer {width: 100%; height: 100px; margin-bottom: -5px; border: 0px; background: #aa0000;}