article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, dialog { display: block; }

* { margin: 0; padding: 0; border: 0 none; }

ul { list-style: none; }

button, textarea, input { border: none; overflow: auto; outline: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }

body { font-family: "europa", "Avenir", "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; }

h1, h2, h3, h4 { font-family: "europa", "Avenir", "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; }

h1 { font-weight: 300; }

h2, h3, h4 { color: #46434b; font-weight: 600; font-size: 2.5rem; line-height: 120%; }

* { transition: all 0.2s ease-out; }

body { font-size: 100%; line-height: 160%; vertical-align: baseline; color: #46434b; background: white url(/static/images/user_profile/bg.png) repeat top left; background-size: cover; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

a { cursor: pointer; color: #46434b; white-space: nowrap; text-decoration: none; transition: all 0.15s ease-out; }

.center { text-align: center; }

section[role="main"] { position: relative; overflow: hidden; }

.container { max-width: 1200px; margin: 0 auto; }

nav[role="navigation"] { position: fixed; top: 0; left: 0; right: 0; padding: 40px 0; z-index: 100; }
nav[role="navigation"] .container { position: relative; }
nav[role="navigation"] .logo { display: block; margin: 0 auto; width: 153px; height: 34px; background-image: url(/static/images/user_profile/logo-dubsmash.png); background-repeat: no-repeat; background-position: center center; text-indent: -9999px; }
@media all and (-webkit-min-device-pixel-ratio: 1.5) { nav[role="navigation"] .logo { background-image: url(/static/images/user_profile/logo-dubsmash@2x.png); background-size: 153px 34px; } }

footer[role="contentinfo"] { overflow: hidden; display: block; padding: 60px 0; }
footer[role="contentinfo"] .links { display: block; overflow: hidden; }
footer[role="contentinfo"] .links li { display: block; float: left; }
footer[role="contentinfo"] .links li a { display: block; }
footer[role="contentinfo"] .links li a:hover { opacity: 0.5; }
footer[role="contentinfo"] .links.social { float: left; }
footer[role="contentinfo"] .links.social li { margin-right: 30px; }
footer[role="contentinfo"] .links.social a { width: 32px; height: 32px; text-indent: -999px; }
footer[role="contentinfo"] .links.social a.icon-instagram { background-image: url(/static/images/user_profile/icon-dark-instagram.png); background-repeat: no-repeat; background-position: center center; }
@media all and (-webkit-min-device-pixel-ratio: 1.5) { footer[role="contentinfo"] .links.social a.icon-instagram { background-image: url(/static/images/user_profile/icon-dark-instagram@2x.png); background-size: 32px 32px; } }
footer[role="contentinfo"] .links.social a.icon-facebook { background-image: url(/static/images/user_profile/icon-dark-facebook.png); background-repeat: no-repeat; background-position: center center; }
@media all and (-webkit-min-device-pixel-ratio: 1.5) { footer[role="contentinfo"] .links.social a.icon-facebook { background-image: url(/static/images/user_profile/icon-dark-facebook@2x.png); background-size: 32px 32px; } }
footer[role="contentinfo"] .links.social a.icon-twitter { background-image: url(/static/images/user_profile/icon-dark-twitter.png); background-repeat: no-repeat; background-position: center center; }
@media all and (-webkit-min-device-pixel-ratio: 1.5) { footer[role="contentinfo"] .links.social a.icon-twitter { background-image: url(/static/images/user_profile/icon-dark-twitter@2x.png); background-size: 32px 32px; } }
footer[role="contentinfo"] .links.legal { float: right; margin-top: 5px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; }
footer[role="contentinfo"] .links.legal li { margin-right: 20px; }
footer[role="contentinfo"] .links.legal li:nth-child(6) { margin: 0; }
footer[role="contentinfo"] .links.legal p { font-size: 0.75rem; }

.btn { display: inline-block; padding: 10px 30px; font-weight: bold; border-radius: 60px; cursor: pointer; }
.btn.btn-download, .btn.btn-open-app, .btn.btn-redub { padding: 19px 40px 23px; color: white; background: #487aff; font-size: 1rem; }
.btn.btn-download:hover, .btn.btn-open-app:hover, .btn.btn-redub:hover { background-color: #2f67ff; }
.btn.btn-apple { padding-left: 70px; background-image: url(/static/images/user_profile/icon-white-apple.png); background-repeat: no-repeat; background-position: center center; background-position: 30px 18px; }
@media all and (-webkit-min-device-pixel-ratio: 1.5) { .btn.btn-apple { background-image: url(/static/images/user_profile/icon-white-apple@2x.png); background-size: 20px 24px; } }
.btn.btn-android { padding-left: 74px; background-image: url(/static/images/user_profile/icon-white-google.png); background-repeat: no-repeat; background-position: center center; background-position: 30px center; }
@media all and (-webkit-min-device-pixel-ratio: 1.5) { .btn.btn-android { background-image: url(/static/images/user_profile/icon-white-google@2x.png); background-size: 20px 24px; } }
.btn.btn-contact { padding: 19px 40px 20px; text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.875rem; font-weight: 900; }
.btn.btn-blue { color: #fff; background: #487aff; }
.btn.btn-blue:hover { background-color: #2f67ff; }
.btn.btn-white { color: #487aff; background: #fff; }
.btn.btn-white:hover { opacity: 0.8; }

input[type="submit"] { font-family: "europa", "Avenir", "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 0.875rem; font-weight: 900; }

#profilewrapper { height: 100%; min-height: 100%; }
#profilewrapper #user-info { text-align: center; }
#profilewrapper #user-info .avatar { overflow: hidden; width: 120px; height: 120px; margin: 0 auto; background: white; border-radius: 60px; }
#profilewrapper #user-info .avatar img { display: block; width: 100%; height: 100%; border-radius: 60px; }
#profilewrapper #user-info .username, #profilewrapper #user-info .displayname { display: block; font-size: 1.375rem; }
#profilewrapper #user-info .username { margin-top: 20px; color: #487aff; font-weight: 600; }
#profilewrapper #user-info .displayname { margin-top: 10px; color: #46434b; font-weight: 300; opacity: 1.0; }

.download, .open-app { position: fixed; right: 0; bottom: 0; left: 0; padding-bottom: 30px; text-align: center; }
.open-app { bottom: 80px; }
.download .btn, .open-app .btn { margin: 0 10px; }

@media screen and (max-width: 800px) { nav[role="navigation"] { padding: 20px; }
  .download, .open-app { padding-bottom: 20px; } }
@media screen and (max-width: 600px) { #user-info { margin-top: 140px !important; }
  .buttons { position: relative; margin-top: 80px; padding: 0; }
  .download .btn, .open-app .btn { margin-top: 10px; } }