*, *:before, *:after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; color: #555; background-color: #f3f3f3; }

/* Main Layout */
header { width: 100%; /* height: 60px; */ z-index: 5; color: black; background-color: #fff; }
.container { width: 100%; max-width: 1000px; margin: 0 auto; position: relative; }

/* Fonts */
h1, h2, h3, .title { font-family: 'LeagueGothic', sans-serif; }
h1 { font-size: 5em; font-weight: 200; margin: 0.4em 0; text-align: center; color: #eb6060; text-transform: uppercase; letter-spacing: 0.1em; }
a { color: #63c6ff; text-decoration: none; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; transition: all 0.2s ease; }
a:hover { color: #fff; background-color: #63c6ff; text-decoration: none; }

/* Navigation */
header:before, nav a:before { content: ''; position: absolute; display: block; left: 0; width: 100%; height: 3px; background-color: #eb6060; }
header .title { float: left; margin-right: 50px; line-height: 60px; font-size: 2em; }
nav { float: left; }
nav ul { list-style: none; margin: 0; padding: 0; }
nav ul li { float: left; margin-right: 10px; }
nav a { position: relative; display: block; color: black; line-height: 60px; padding: 0 15px; text-transform: uppercase; }
nav a:hover { background-color: transparent; }
nav a span { position: relative; z-index: 5; }
nav a:before { transition: height 0.2s ease; }
nav a.current:before { height: 10px; }
nav a:hover:before { height: 60px; }

/* Styleswitcher */
#styleswitcher { position: absolute; z-index: 10; font-size: 0.8em; color: white; width: 80px; height: 20px; right: 0; -webkit-perspective: 200px; -webkit-perspective-origin: 50% 50%; -moz-perspective: 200px; -moz-perspective-origin: 50% 50%; -ms-perspective: 200px; -ms-perspective-origin: 50% 50%; perspective: 200px; perspective-origin: 50% 50%; }
#styleswitcher a { color: inherit; }
#styleswitcher a:hover { background-color: transparent; }
#cube { position: relative; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; }
#styleswitcher .face { position: absolute; width: 100%; line-height: 20px; background-color: #eb6060; text-align: center; cursor: pointer; -webkit-transition: -webkit-transform 0.1s ease; -moz-transition: -moz-transform 0.1s ease; -ms-transition: -ms-transform 0.1s ease; transition: transform 0.1s ease; }
#styleswitcher .front { -webkit-transform: rotateX(0deg) translateZ(10px); -moz-transform: rotateX(0deg) translateZ(10px); -ms-transform: rotateX(0deg) translateZ(10px); transform: rotateX(0deg) translateZ(10px); }
#styleswitcher .bottom { background-color: #B84B4B; -webkit-transform: rotateX(90deg) translateZ(10px); -moz-transform: rotateX(90deg) translateZ(10px); -ms-transform: rotateX(90deg) translateZ(10px); transform: rotateX(90deg) translateZ(10px); }
.nightmode #styleswitcher .front { -webkit-transform: rotateX(-90deg) translateZ(10px); -moz-transform: rotateX(-90deg) translateZ(10px); -ms-transform: rotateX(-90deg) translateZ(10px); transform: rotateX(-90deg) translateZ(10px); }
.nightmode #styleswitcher .bottom { -webkit-transform: rotateX(0deg) translateZ(10px); -moz-transform: rotateX(0deg) translateZ(10px); -ms-transform: rotateX(0deg) translateZ(10px); transform: rotateX(0deg) translateZ(10px); }

/* City List */
.city-nav { list-style: none; text-align: center; margin: 0; }
.city-nav li { display: inline-block; }
.city-nav a { display: inline-block; line-height: 2em; margin-right: 5px; margin-bottom: 8px; padding: 0 10px; color: #fff; background-color: #63c6ff; cursor: pointer; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; }
.city-nav a:hover { background-color: #777; }
.city-nav a.active { background-color: #f9d755; }

/* Error Message */
#error { position: absolute; left: 0; right: 0; margin-top: 20px; text-align: center; color: #eb6060; text-transform: uppercase; opacity: 0; -webkit-transition: opacity .5s ease; -moz-transition: opacity .5s ease; -ms-transition: opacity .5s ease; transition: opacity .5s ease; }
#error.active { opacity: 1; }

/* Canvas */
.canvas-container { width: 100%; max-width: 700px; margin: 0 auto; margin-bottom: 25px; }
canvas { width: 100%; height: 100%; }

/* Form */
form { margin-top: 20px; }
form .form-control, form .btn { border-radius: 0; }
form .btn { color: white; background-color: #eb6060; padding: 6px 20px; }
form .btn:hover { color: white; background-color: #b84b4b; }
form input.error, form textarea.error { border-color: #eb6060; }
form label.error { position: absolute; right: 16px; top: 1px; bottom: 6px; padding: 6px; color: white; background-color: #eb6060; font-weight: normal; }

/* Footer */
footer { margin-top: 80px; padding: 30px 0; color: #bbb; background-color: white; font-size: 0.8em; text-align: center; }
footer a { color: #777; }
footer a:hover { color: black; background-color: transparent; }