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
}
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
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  text-align: center;
  color: #868e96;
	background-color: #fff;
}
html, body {
  height: 100%
}
.cf:before, .cf:after {
  content: " ";
  display: table
}
.cf:after {
  clear: both
}
.cf {
  *zoom: 1
}
.marvel-device, .marvel-device div, *:before, *:after {
  -webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275)
}
a {
  cursor: pointer;
  color: #329af0;
  -webkit-transition: color 300ms ease-in-out;
  transition: color 300ms ease-in-out
}
a,
a:hover,
a:active,
a:focus {
	text-decoration: none;
	outline: none;
	border: none;
    box-shadow: none !important;
}
header {
  padding: 150px 0;
  line-height: 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}
header .button {
  margin-top: 16px
}
h1 {
  font-size: 24px;
  font-weight: bold;
  color: #495057
}
header h1 {
  margin-bottom: 30px;
  font-size: 34px;
  line-height: 1.2
}
header span, header a {
  vertical-align: top
}
header .wrap {
  width: 500px;
  margin: 0 auto
}
section {
  background: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
  height: 100%;
  display: table;
  position: relative
}
section h1 {
  position: absolute;
  width: 100%;
  top: 60px;
  left: 0
}
section h1.new:before {
  content: 'NEW';
  background: #fff;
  padding: 0 6px;
  line-height: 24px;
  vertical-align: top;
  color: white;
  font-size: 12px;
  border-radius: 24px;
  margin-right: 10px;
  display: inline-block
}
section.white, #s5.black, #lumia920.white, #lumia920.black {
  background: #fff
}
section.black h1, section.white {
  color: white
}
section.gold, section.silver, section.blue, section.red, section.yellow, section.green, #nexus5, #lumia920, #s5, #htc-one {
  background: white;
  border-bottom: 1px solid #f1f3f5;
}
section .wrap {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 200px 0 80px;
}
p {
  margin-bottom: 15px
}
p span {
  font-weight: bold
}
p:last-of-type {
  margin-bottom: 0
}
.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  visibility: hidden;
  top: 0;
  z-index: 11111;
  -webkit-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
  left: 0;
  background: rgba(255, 255, 255, 0.9)
}
.overlay.activated {
  opacity: 1;
  visibility: visible
}
.overlay.activated .modal {
  -webkit-transform: none;
  transform: none;
  -webkit-transition: all 300ms cubic-bezier(0.105, 0.795, 0.305, 1.335);
  transition: all 300ms cubic-bezier(0.105, 0.795, 0.305, 1.335)
}
.overlay .table {
  display: table;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0
}
.overlay .table .cell {
  display: table-cell;
  vertical-align: middle
}
.overlay .modal {
  width: 566px;
  text-align: left;
  margin: 0 auto;
  -webkit-transform: scale(0.6) translateY(30px);
  transform: scale(0.6) translateY(30px);
  -webkit-transition: all 100ms cubic-bezier(0, 0, 0.58, 1);
  transition: all 100ms cubic-bezier(0, 0, 0.58, 1)
}
.overlay .modal p {
  line-height: 1.8
}
.overlay .modal p:last-of-type {
  margin-bottom: 30px
}
.buttons {
  margin: 30px auto 0 auto
}
.twitter-share-button {
  display: inline-block;
  margin-right: 6px
}
.github-button {
  display: inline-block
}
.button {
  line-height: 36px;
  text-decoration: none;
  border-radius: 4px;
  background: #343a40;
  color: white;
  padding: 0 20px;
  font-weight: bold;
  letter-spacing: 0px;
  margin: 0 12px;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  display: inline-block
}
.button:hover {
  background: #212529
}
.button.download {
  background: #69db7c
}
.button.download:hover {
  color: white;
  background: #40d158
}
.selector {
  width: 100%;
  text-align: center;
  display: block;
  position: absolute;
  top: 120px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}
.grab {
  position: absolute;
  left: 50%;
  margin-left: -70px;
  margin-right: 0;
  width: 100%;
  bottom: 100px;
  width: 100px;
  cursor: pointer
}
.selector li {
  width: 30px;
  height: 30px;
  margin: 0 10px;
  display: inline-block;
  text-indent: -9999px;
  border-radius: 30px;
  line-height: 30px;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  opacity: 0.8
}
iframe { width:100%; height: 100%;}
.select-landscape:after {
	content: 'Landscape';
}
.select-landscape.selected:after {
	content: 'Portrait';
}

.select-black {
  background: #2c2b2c
}
.select-silver {
  background: #f0f0f0
}
.select-gold {
  background: #f1e2d0
}
.select-white, #s5 .select-white, #s5 .select-white.selected {
  background: white;
  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3)
}
.select-white.selected {
  -webkit-box-shadow: none;
  box-shadow: none
}
.select-red {
  background: #f96b6c
}
.select-yellow {
  background: #f2dc60
}
.select-green {
  background: #97e563
}
.select-blue {
  background: #33a2db
}
.select-landscape {
  text-indent: 0px !important;
  width: 100px !important;
  color: black;
  background: #e9ecef;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  letter-spacing: 2px;
  padding: 0 10px
}
.selector li:hover {
  opacity: 1
}
.selector li.selected {
  -webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1
}
.marvel-device {
  vertical-align: top
}
.marvel-device .screen {
  text-align: left
}
.side {
  width: 360px;
  display: inline-block;
  text-align: left;
  vertical-align: top;
  margin-left: 30px
}
code {
  font-family: monospace;
  font-size: 14px;
  padding: 20px !important;
  font-weight: bold;
  border-radius: 4px
}
.devices {
  font-family: monospace;
  display: inline-block;
  font-size: 14px;
  font-weight: bold
}
.iphone5s .screen, .iphone8 .screen, .iphone8plus .screen {
  background: #e2e4e4;
  background: -webkit-gradient(linear, left top, left bottom, from(#e2e4e4), to(#7d8281));
  background: linear-gradient(to bottom, #e2e4e4 0%, #7d8281 100%)
}
.iphone5s.gold .screen, .iphone8.gold .screen, .iphone8plus.gold .screen {
  background: #f1e2d0;
  background: -webkit-gradient(linear, left top, left bottom, from(#f1e2d0), to(#ebdac7));
  background: linear-gradient(to bottom, #f1e2d0 0%, #ebdac7 100%)
}
.iphone5s.black .screen, .iphone8.black .screen, .iphone8plus.black .screen {
  background: #b3b3b7;
  background: -webkit-gradient(linear, left top, left bottom, from(#b3b3b7), to(#424044));
  background: linear-gradient(to bottom, #b3b3b7 0%, #424044 100%)
}
.iphone5c.white .screen {
  background: #d9d9d9;
  background: -webkit-gradient(linear, left top, left bottom, from(#d9d9d9), to(#a1a1a1));
  background: linear-gradient(to bottom, #d9d9d9 0%, #a1a1a1 100%)
}
.iphone5c.red .screen {
  background: #ff7474;
  background: -webkit-gradient(linear, left top, left bottom, from(#ff7474), to(#dc94df));
  background: linear-gradient(to bottom, #ff7474 0%, #dc94df 100%)
}
.iphone5c.yellow .screen {
  background: #ffec6d;
  background: -webkit-gradient(linear, left top, left bottom, from(#ffec6d), to(#ffa546));
  background: linear-gradient(to bottom, #ffec6d 0%, #ffa546 100%)
}
.iphone5c.blue .screen {
  background: #9dcefd;
  background: -webkit-gradient(linear, left top, left bottom, from(#9dcefd), to(#66d3ad));
  background: linear-gradient(to bottom, #9dcefd 0%, #66d3ad 100%)
}
.iphone5c.green .screen {
  background: #97d555;
  background: -webkit-gradient(linear, left top, left bottom, from(#97d555), to(#d3ed20));
  background: linear-gradient(to bottom, #97d555 0%, #d3ed20 100%)
}
.nexus5 .screen {
  -webkit-box-shadow: none;
  box-shadow: none;
  background: #f3424b;
  background: -webkit-gradient(linear, left top, left bottom, from(#f3424b), to(#ffd51f));
  background: linear-gradient(to bottom, #f3424b 0%, #ffd51f 100%)
}
.ipad .screen {
  background: #0d3477;
  background: -webkit-gradient(linear, left top, left bottom, from(#0d3477), to(#adf3de));
  background: linear-gradient(to bottom, #0d3477 0%, #adf3de 100%)
}
.lumia920.black .screen {
  background: #fcfff4;
  background: -webkit-gradient(linear, left top, left bottom, from(#fcfff4), color-stop(40%, #dfe5d7), to(#b3bead));
  background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%)
}
.lumia920.white .screen {
  background: #fff;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e5e5e5));
  background: linear-gradient(to bottom, #fff 0%, #e5e5e5 100%)
}
.lumia920.blue .screen {
  background: #fff;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#00acdd));
  background: linear-gradient(to bottom, #fff 0%, #00acdd 100%)
}
.lumia920.red .screen {
  background: #fff;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e62e1f));
  background: linear-gradient(to bottom, #fff 0%, #e62e1f 100%)
}
.lumia920 .screen {
  background: #fff;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fd0));
  background: linear-gradient(to bottom, #fff 0%, #fd0 100%)
}
.iphone4s .screen {
  background: #efefbb;
  background: -webkit-gradient(linear, left top, left bottom, from(#efefbb), to(#d4d3dd));
  background: linear-gradient(to bottom, #efefbb 0%, #d4d3dd 100%)
}
.s5 .screen {
  -webkit-box-shadow: none;
  box-shadow: none;
  background: #1d976c;
  background: -webkit-gradient(linear, left top, left bottom, from(#1d976c), to(#93f9b9));
  background: linear-gradient(to bottom, #1d976c 0%, #93f9b9 100%)
}
.htc-one .screen {
  background: #283048;
  background: -webkit-gradient(linear, left top, left bottom, from(#283048), to(#859398));
  background: linear-gradient(to bottom, #283048 0%, #859398 100%)
}
.macbook .screen {
  background: #f16046;
  background: -webkit-gradient(linear, left top, left bottom, from(#f16046), to(#395f84));
  background: linear-gradient(to bottom, #f16046 0%, #395f84 100%)
}
.iphone-x .screen {
  background: #ff268e;
  background: -webkit-gradient(linear, left top, left bottom, from(#ff268e), to(#ff694f));
  background: linear-gradient(to bottom, #ff268e 0%, #ff694f 100%)
}
.iphone-x .screen iframe {padding-top: 40px; background-color: #000; width:100%; height: calc(100% - 40px); }
.iphone-x.landscape .screen iframe {padding-top: inherit; padding-left: 40px; background-color: #000; height: 100%; width: calc(100% - 40px); }



/*.iphone-x .screen:before {
  content: '';
  width: 140%;
  height: 100%;
  position: absolute;
  top: -30%;
  right: -70%;
 background: radial-gradient(ellipse at center, #3e4ff9 0%, rgba(62, 79, 249, 0) 64%)
}
.iphone-x .screen:after {
  content: '';
  width: 140%;
  height: 140%;
  position: absolute;
  bottom: -50%;
  left: -30%;
  background: radial-gradient(ellipse at center, #f7ede1 0%, rgba(247, 237, 225, 0) 70%);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg)
}*/
.note8 .screen {
  background: #2288fe;
  background: -webkit-gradient(linear, left top, left bottom, from(#2288fe), to(#fdeba9));
  background: linear-gradient(to bottom, #2288fe 0%, #fdeba9 100%)
}



/* Style the links inside the sidenav */
#mySidenav a {
  position: fixed; /* Position them relative to the browser window */
  left: -5px; /* Position them outside of the screen */
	margin-top: 50px;
  transition: 0.3s; /* Add transition on hover */
  padding: 15px 12px 15px 15px; /* 15px padding */
  width: 30px; /* Set a specific width */
  text-decoration: none; /* Remove underline */
  font-size: 24px; /* Increase font size */
  color: white; /* White text color */
  border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
	z-index: 99;
}

#mySidenav a:hover {
  left: 0; /* On mouse-over, make the elements appear as they should */
	background-color: #ef5359;
}

/* The about link: 20px from the top with a green background */
.mobile {
  top: 20px;
  background-color: #776d6c;
	font-size: 24px !important;
}

.tab {
  top: 80px;
  background-color: #776d6c; /* Blue */
}

.desktop {
  top: 140px;
  background-color: #776d6c; /* Red */
}