@charset "utf-8";

html, body { box-sizing: border-box; border: none; margin: 0; padding: 0; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 18px;  color: #FFF; background-color: #000; background-image: url("img/fondo.jpg"); min-height: 500px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;
}

hr { border: 2px dashed #E4097F; width: 75%; margin: auto; margin-top: 4%; margin-bottom: 4%; }

a { text-decoration: none; color: #FEED01; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; }
a:hover { text-decoration: none; color: #E4097F; }

.web-container:after,.web-container:before { content:""; display: table; clear: both; }
.web-container { margin: auto; padding: 0.01em 16px; width: 88%; background-color: rgba(0,0,0,0.6); border: 1px solid #000; }

img { max-width: 100%; height: auto; vertical-align: middle; border: none; text-decoration: none; filter: drop-shadow(5px 5px 10px #000); }
img:hover { opacity: 0.7; filter: alpha(opacity=70); }

h1 { color: #E4097F; text-align: center; text-shadow: 2px 2px 4px #000000; }
h2 { color: #01A0E2; text-align: center; text-shadow: 2px 2px 4px #000000; }
h3 { color: #FEED01; font-size:x-large; text-align: center; text-shadow: 2px 2px 4px #000000; }
h4 { color: #9E8E00; text-align: center; text-shadow: 2px 2px 4px #000000; }

button { margin: 0 auto; }

.button { display: inline-block; border-radius: 4px; background-color: #FEED01; border: none; color: #E4097F; text-align: center; font-size: 28px; padding: 20px; width: 200px; transition: all 0.5s; cursor: pointer; margin: 5px; }
.button span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s; }
.button span:after { content: '\00bb'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; }
.button:hover span { padding-right: 25px; }
.button:hover span:after { opacity: 1; right: 0; }

p { text-align: center; }