/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
     margin: 0;
     padding: 0;
     border: 0;
     font-size: 100%;
     font: inherit;
     vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
     display: block;
}
body {
     line-height: 1;
}
ol, ul {
     list-style: none;
}
blockquote, q {
     quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
     content: '';
     content: none;
}
table {
     border-collapse: collapse;
     border-spacing: 0;
}

/*========DOCUMENT PROPERTIES========*/
html {
     position: relative;
     min-height: 100%;
}

h1 {
     font-family: 'Oswald', sans-serif;
     color: #ffffff;
     font-size: 28px;
     text-transform: uppercase;
}

h2 {
     font-family: 'Oswald', sans-serif;
     color: #332e30;
     font-size: 24px;
     font-weight: 700;
     text-transform: uppercase;
     text-align: left;
     margin-bottom: 5px;
}

p {
     color: #332e30;
     font-size: 18px;
     font-family: 'Oswald', sans-serif;
     font-weight: 400;
     margin-bottom: 5px;
}

a {
     text-transform: uppercase;
     text-decoration: none;
     box-shadow: none;
     color: #845b8a;
     font-weight: 400;
     font-size: 14px;
     font-family: 'Oswald', sans-serif;
}

a:link {
     text-transform: uppercase;
     text-decoration: none;
     box-shadow: none;
     color: #845b8a;
     font-weight: 400;
     font-size: 14px;
     font-family: 'Oswald', sans-serif;
}

a:visited {
     text-transform: uppercase;
     text-decoration: none;
     color: #845b8a;
     font-weight: 400;
     font-size: 14px;
     font-family: 'Oswald', sans-serif;
}

a:hover {
     text-transform: uppercase;
     text-decoration: none;
     box-shadow: none;
     color: #332e30;
     font-weight: 400;
     font-size: 14px;
     font-family: 'Oswald', sans-serif;
}

a:active {
     text-transform: uppercase;
     text-decoration: none;
     box-shadow: none;
     color: #332e30;
     font-weight: 400;
     font-size: 14px;
     font-family: 'Oswald', sans-serif;
}

a:focus {
     text-transform: uppercase;
     text-decoration: none;
     box-shadow: none;
     color: #332e30;
     font-weight: 400;
     font-size: 14px;
     font-family: 'Oswald', sans-serif;
}

b {
     font-weight: bold;
}

iframe {
     margin-top: 10px;
}

body {
     background: #F9F3BC;
     font-family: 'Oswald', sans-serif;
     line-height: normal;
}

#wrap {
     /*max-width: 900px;*/
     min-width: 303px;
     position: relative;
     margin: auto;
     border: 4px solid #332e30;
     border-top: none;
     background: #384153;
}

::-webkit-scrollbar { 
    display: none; 
}

/*========HEADER========*/
header {
     background: #624C67;
     border: 4px solid #332e30;
}

header img {
     width: 100%;
     height: auto;
}

header .container-fluid {
     max-width: 900px;
     width: 100%;
     position: relative;
     display: block;
     margin: auto;
     padding-top: 15px;
}

header a {
     font-family: 'Oswald', sans-serif;
     color: #ffffff;
     font-size: 28px;
     text-transform: uppercase;
     text-align: center;
}

header h1:hover, header h1:active, header h1:focus {
     color: #dddddd;
}

/*========PAGE CONTENT========*/
.content {
     max-width: 1300px;
     height: auto;
     position: relative;
     background-color: transparent;
     border-top: none;
     padding: 0px;
     display: block;
}

#shadow {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(255,255,255,0.5);
     z-index: 9999;
}

.text-box {
     background: #ffffff;
     border: 4px solid #332e30;
     position: absolute;
     top: 25px;
     left: 0;
     right: 0;
     width: 30%;
     padding: 15px;
     z-index: 10000;
}

.text-box button {
     position: relative;
     display: block;
     margin: auto;
}

/*========NAME GENERATOR========*/
.app-box {
     position: relative;
}

.app-box p {
     color: #ffffff;
     font-size: 32px;
     text-transform: uppercase;
}

.app-box h3 {
     color: #ffffff;
     font-size: 24px;
     margin-top: 100px;
}

.namegen-sharing a {
     color: #ffffff;
}

.namegen-sharing a:hover, .namegen-sharing a:active, .namegen-sharing a:focus {
     color: #dddddd;
}

.image {
     max-width: 720px;
     height: auto;
}

#light-beams {
     position: relative;
     top: 0;
     left: 0;
}

#tentacles, #eye {
     position: absolute;
     top: 0;
     left: 0;
}

.app-box img {
     display: block;
     height: auto;
     width: 100%;
     max-width: 900px;
}

/*========FOOTER========*/
footer {
     padding-top: 10px;
     text-align: right;
}

footer p {
     color: #fff;
}

/*========RESPONSIVE========*/
@media only screen and (max-width: 991px) {
     .app-box p, .app-box h3 {
          text-align: center;
     }

     .app-box h3 {
          margin-top: inherit;
     }

     .image {
          position: relative;
          display: block;
          margin: auto;
     }

     .namegen-sharing {
          text-align: center;
          margin-bottom: 15px;
}
}

@media only screen and (max-width: 767px) {
     h1 {
          font-size: 20px;
     }
     
     h2 {
          font-size: 20px;
     }
     
     p {
          font-size: 14px;
     }
     .text-box {
          width: 90%;
          top: -25px;
     }

     footer {
          text-align: center;
     }

}