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;
}

body {
	line-height: 1;
	color:#ffffff;
}

img {    
	image-rendering: auto;
	image-rendering: -webkit-optimize-contrast;
}
img {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

html,
body {
  height: 100%;
  width: 100%;
  text-align: center;

  --ghPurple: #5A1EEC;
  --ghGreen: #0AFFBA;
  --ghLightBlue: #2DD8FE;
  --ghPurple2: #8000EC;
  --ghYellow: #FAC541;
  --ghPink: #FA0ECC;

}

.banner {
	--bannerWidth: 320px;
	--bannerHeight: 100px;

	--buttonWidth: 125px;
	--buttonHeight: 31px;

	--stickerSize: 80px;
	--stickerColor: #2b3476;

	--bgColor: var(--ghYellow);
	--borderColor: var(--ghYellow);

	--buttonBackColor: var(--ghPink);
	--buttonBorderColor: #ffffff;

	width: var(--bannerWidth);
	height: var(--bannerHeight);

	box-sizing: border-box;
	visibility: hidden;
	position: relative;
	overflow: hidden;

	cursor: pointer;
	background-color: var(--bgColor);
}

#border {
	position: absolute;
	top:0px;
	left:0px;
	width:var(--bannerWidth);
	height:var(--bannerHeight);
  	border: 1px solid var(--borderColor);
  	box-sizing: border-box;
  	
}

svg, .asset {
	position: absolute;
}

.full {
	position: absolute;
	top: 0px;
	left: 0px;
}
.full img {
	width:var(--bannerWidth);
	height:var(--bannerHeight);
}

#contentMask{
	position: absolute;
    top: 42px;
    left: 204px;
	width:184px;
	height:98px;
	overflow: hidden;
	
}

.content{
	position: absolute;
}
.content img{
	width:186px;
	height:160px;
}

#macbookAll{
	position: absolute;
	top: 0px;
	left: 0px;
	width:var(--bannerWidth);
	height:var(--bannerHeight);
}

.cover {
	position: absolute;
	top: 0px;
	left: 0px;
	width: var(--bannerWidth);
	height: var(--bannerHeight);
	background-color: var(--ghYellow);
}

#blueBack{
	position: absolute;
	top: 0px;
	left: 0px;
	width: var(--bannerWidth);
	height: var(--bannerHeight);
	background-color: var(--ghPurple);
}
#yellowBack{
	position: absolute;
	top: 0px;
	left: 0px;
	width: var(--bannerWidth);
	height: var(--bannerHeight);
	background-color: var(--ghYellow);
}
#f1_key,#f2_key{
	position: absolute;
	left:20px;
}

/************* LOGO *************/

#logoHolder {
	position: absolute;
	width: 100%;
	height: 100%;
}
#gh_logo {
	position: absolute;
	width: 150px;
	top: 198px;
	left: 0px;
}

/************* BUTTON *************/

#buttonHolder {
	position: absolute;
	bottom: 16px;
	left: 18px;
	width: var(--buttonWidth);
  	height: var(--buttonHeight);
}

#button {
	position: absolute;
  	width: var(--buttonWidth);
  	height: var(--buttonHeight);
	top: 0;
	left: 0;
  	overflow: hidden;
  	border-radius: 30px;
  	-webkit-mask-image: -webkit-radial-gradient(white, black); 
}
.butBack {
	position: absolute;
	width: var(--buttonWidth);
  	height: var(--buttonHeight);
	background: var(--buttonBackColor); 
  	border-radius: 30px;
}

.butBorder {
	position: absolute;
	width: var(--buttonWidth);
  	height: var(--buttonHeight);
	border: 2px solid var(--buttonBorderColor);
  	border-radius: 30px;
  	box-sizing: border-box;
}

.butTxt,.butTxt img{
	width: var(--buttonWidth);
	height: var(--buttonHeight);
}
.butTxt {
	position: absolute;
	top: 0px;
  	left: 0px;
}

/**/

#circle_1{
	position: absolute;
	top:40px;
	right:-100px;
	width:70px;
	height:70px;
	border: 40px solid #ffffff;
	border-radius: 50%;
}

#circle_2{
	position: absolute;
	top:60px;
	left:-40px;
	width:40px;
	height:40px;
	border: 20px solid #ffffff;
	border-radius: 50%;
}

#circle_3{
	position: absolute;
	top:-60px;
	right:-60px;
	width:100px;
	height:100px;
	border: 40px solid #ffffff;
	border-radius: 50%;
}
#circle_4{
	position: absolute;
	top:210px;
	right:80px;
	width:30px;
	height:30px;
	border: 16px solid #ffffff;
	border-radius: 50%;
}