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

html, body { height: 100%; width: 100%; }
body { line-height: 1; }

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;
  image-rendering: auto;
}

.asset, svg { position: absolute;}

.banner {
	--bannerWidth: 300px;
	--bannerHeight: 250px;

	--bgColor: #000000;
	--borderColor: #000000;
	--coverColor: #000000;
	--globalMarginX: 25px;
	--globalMarginY: 25px;

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

	background-color: var(--bgColor);
	box-sizing: border-box;
	visibility: hidden;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

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

#border { position: absolute; top:0px; left:0px; width:var(--bannerWidth); height:var(--bannerHeight); border: 1px solid var(--borderColor); box-sizing: border-box; pointer-events:none; }
#cover { position: absolute; top: 0px; left: 0px; width: var(--bannerWidth); height: var(--bannerHeight); background-color: var(--coverColor); }

/*******************************************/
/*************** LEGALLINE *****************/
/*******************************************/

.no-break { white-space: nowrap; }
.dont-break-out {
	/* Adds a hyphen where the word breaks, if supported (No Blink), use in skyscrapers or when shortage in xspace*/
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  word-break: break-word;

  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.hyphenate {
  word-wrap: break-word;
  overflow-wrap: break-word;

	-webkit-hyphens: auto;
	   -moz-hyphens: auto;
	        hyphens: auto;
}


#clickArea {
	position: absolute;
	top: 0;
	left: 0;
	width:100%;
	height:100%;
}

#whiteBack {
	position: absolute;
	top: calc((var(--bannerHeight) / 24) * 2);
	left: 0px;
	width: var(--bannerWidth);
	height: calc(var(--bannerHeight) - ((var(--bannerHeight) / 24) * 2));
/*	background-color: #f5f4f4;*/
	background-color: #fafafa;
	/*background: rgb(245,244,244);
	background: linear-gradient(0deg, rgba(245,244,244,1) 0%, rgba(250,250,250,1) 35%, rgba(250,250,250,1) 65%, rgba(245,244,244,1) 100%);*/
}

/**********************************/
/************** CTA ***************/
/**********************************/

#buttonHolder_l1 {
	position: absolute;
	bottom: var(--globalMarginY);
	left: var(--globalMarginX);
	/*left: 50%;
	transform: translate(-50%);*/
	pointer-events: none;
}

/*******************************************/
/************* ROTATING PHONE **************/
/*******************************************/

.shine {
	background: rgb(255,255,255);
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
}

#videoHolder {
	/*top: calc((var(--bannerHeight) / 24) * 2);*/
	top: 0;
	left:0;
	width: var(--bannerWidth);
	/*height: calc(var(--bannerHeight) - ((var(--bannerHeight) / 24) * 2));*/
	height: var(--bannerHeight);
/*	background: #fff300;*/
	overflow:hidden;
}

#video {
	/*top: -33px;*/
}

#legalLineHolder {
	/*opacity: 0;*/
}

#buttonHolder_l2 {
	position: absolute;
	width: 136px;
	height: 30px;
	left: var(--globalMarginX);
	bottom:60px;
	border-radius: 30px;
	background-color: transparent;
	border: 1.5px solid #000000;
}
#butCopyHolder {
	position: absolute;
	top: 7px;
	left: 15px;
	pointer-events: none;
}
#buttonHolder_l2 #button {
  pointer-events: none;
}
#buttonHolder_l2 #button #arrow_1 {
  pointer-events: none;
}
#buttonHolder_l2 #button #arrow_1 svg {
	position: absolute;
	top: 8px;
  left: 107px;
  pointer-events: none;
}

.f2_device {
/*	left: 22px;*/
/*left: 6px;*/
}

.samsung_logo {
	/*top: 40px;*/
}
.f1_logo {
	/*top: 300px;*/
}

#reloadHolder{
	position: absolute;
	top:8px;
	left:8px;
	width: 16px;
	height: 16px;
}