Snippets library

Browse Snippets
Claim your Free Profile
Add Snippet
Home / Admin / Untitled Snippet
Duplicate Snippet

Embed Snippet on Your Site

Untitled Snippet

bar rimoni
<10
Code Preview
Comments
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web 1920 – 2</title>
<style id="applicationStylesheet" type="text/css">
	.mediaViewInfo {
		--web-view-name: Web 1920 – 2;
		--web-view-id: Web_1920__2;
		--web-scale-on-resize: true;
		--web-enable-deep-linking: true;
	}
	:root {
		--web-view-ids: Web_1920__2;
	}
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		border: none;
	}
	#Web_1920__2 {
		position: absolute;
		width: 1920px;
		height: 4599px;
		background-color: rgba(7,7,7,1);
		overflow: hidden;
		--web-view-name: Web 1920 – 2;
		--web-view-id: Web_1920__2;
		--web-scale-on-resize: true;
		--web-enable-deep-linking: true;
	}
	#Untitled_video {
		fill: transparent;
	}
	.Untitled_video {
		overflow: hidden;
		position: absolute;
		width: 1920px;
		height: 1080px;
		left: 0px;
		top: 42px;
		transform: matrix(1,0,0,1,0,0);
	}
	#Mask_Group_5 {
		position: absolute;
		width: 2430px;
		height: 1060px;
		left: -633px;
		top: 0px;
		overflow: visible;
	}
	#Rectangle_1_k {
		fill: url(#Rectangle_1_k);
	}
	.Rectangle_1_k {
		width: 2384px;
		height: 1097px;
		position: absolute;
		overflow: visible;
		transform: matrix(1,0,0,1,-394,0) rotate(180deg);
		transform-origin: center;
	}
	#Path_30_m {
		fill: url(#Path_30_m);
	}
	.Path_30_m {
		mix-blend-mode: screen;
		overflow: visible;
		position: absolute;
		width: 2362.875px;
		height: 1140.175px;
		left: -231.937px;
		top: 0px;
		transform: matrix(1,0,0,1,0,0);
	}
	#n_ {
		left: 1657px;
		top: 1319px;
		position: absolute;
		overflow: visible;
		width: 157px;
		white-space: nowrap;
		text-align: right;
		font-family: Noto Sans Hebrew;
		font-style: normal;
		font-weight: bold;
		font-size: 25px;
		color: rgba(255,255,255,1);
	}
	#n__o {
		left: 1717px;
		top: 1911px;
		position: absolute;
		overflow: visible;
		width: 118px;
		white-space: nowrap;
		text-align: right;
		font-family: Noto Sans Hebrew;
		font-style: normal;
		font-weight: bold;
		font-size: 25px;
		color: rgba(255,255,255,1);
	}
	#n__p {
		left: 1698px;
		top: 2502px;
		position: absolute;
		overflow: visible;
		width: 130px;
		white-space: nowrap;
		text-align: right;
		font-family: Noto Sans Hebrew;
		font-style: normal;
		font-weight: bold;
		font-size: 25px;
		color: rgba(255,255,255,1);
	}
	#n__q {
		left: 1746px;
		top: 3093px;
		position: absolute;
		overflow: visible;
		width: 98px;
		white-space: nowrap;
		text-align: right;
		font-family: Noto Sans Hebrew;
		font-style: normal;
		font-weight: bold;
		font-size: 25px;
		color: rgba(255,255,255,1);
	}
	#Text {
		left: 1776px;
		top: 3685px;
		position: absolute;
		overflow: visible;
		width: 78px;
		white-space: nowrap;
		text-align: right;
		font-family: Noto Sans Hebrew;
		font-style: normal;
		font-weight: bold;
		font-size: 25px;
		color: rgba(255,255,255,1);
	}
	#menu-burger_1 {
		position: absolute;
		width: 29px;
		height: 19px;
		left: 1861px;
		top: 48px;
		overflow: visible;
	}
	#Rectangle_8 {
		fill: rgba(255,255,255,1);
	}
	.Rectangle_8 {
		position: absolute;
		overflow: visible;
		width: 29px;
		height: 3px;
		left: 0px;
		top: 8px;
	}
	#Rectangle_9 {
		fill: rgba(255,255,255,1);
	}
	.Rectangle_9 {
		position: absolute;
		overflow: visible;
		width: 29px;
		height: 3px;
		left: 0px;
		top: 0px;
	}
	#Rectangle_10 {
		fill: rgba(255,255,255,1);
	}
	.Rectangle_10 {
		position: absolute;
		overflow: visible;
		width: 29px;
		height: 3px;
		left: 0px;
		top: 16px;
	}
	#search_16 {
		fill: rgba(255,255,255,1);
	}
	.search_16 {
		overflow: visible;
		position: absolute;
		width: 29.841px;
		height: 27.541px;
		left: 1781.395px;
		top: 43.548px;
		transform: matrix(1,0,0,1,0,0);
	}
	#Rectangle_13_y {
		fill: url(#Rectangle_13_y);
	}
	.Rectangle_13_y {
		position: absolute;
		overflow: visible;
		width: 74px;
		height: 3px;
		left: 1816px;
		top: 1372px;
	}
	#Rectangle_14_ {
		fill: url(#Rectangle_14_);
	}
	.Rectangle_14_ {
		position: absolute;
		overflow: visible;
		width: 74px;
		height: 3px;
		left: 1816px;
		top: 1963px;
	}
	#Rectangle_15_ {
		fill: url(#Rectangle_15_);
	}
	.Rectangle_15_ {
		position: absolute;
		overflow: visible;
		width: 74px;
		height: 3px;
		left: 1816px;
		top: 2551px;
	}
	#Rectangle_16_ {
		fill: url(#Rectangle_16_);
	}
	.Rectangle_16_ {
		position: absolute;
		overflow: visible;
		width: 74px;
		height: 3px;
		left: 1816px;
		top: 3148px;
	}
	#Scroll_Group_7 {
		mix-blend-mode: normal;
		position: absolute;
		width: 1899px;
		height: 456px;
		left: 0px;
		top: 1414px;
		overflow: hidden;
	}
	#Group_104 {
		position: absolute;
		width: 495px;
		height: 456px;
		left: 369px;
		top: 0px;
		overflow: visible;
	}
	#Group_103 {
		position: absolute;
		width: 495px;
		height: 456px;
		left: 0px;
		top: 0px;
		overflow: visible;
	}
	#pexels-ozan-ulha-17250951 {
		filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
		position: absolute;
		width: 495px;
		height: 456px;
		left: 0px;
		top: 0px;
		overflow: visible;
	}
	#pexels-josh-hild-2422588_ba {
		fill: url(#pexels-josh-hild-2422588_ba);
	}
	.pexels-josh-hild-2422588_ba {
		filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
		position: absolute;
		overflow: visible;
		width: 513px;
		height: 474px;
		left: 0px;
		top: 0px;
	}
	#n__bb {
		left: 227px;
		top: 196px;
		position: absolute;
		overflow: visible;
		width: 167px;
		white-space: nowrap;
		text-align: center;
		font-family: Samsung Sharp Sans;
		font-style: normal;
		font-weight: bold;
		font-size: 52px;
		color: rgba(255,255,255,1);
	}
	#Group_99 {
		position: absolute;
		width: 494px;
		height: 456px;
		left: 1396px;
		top: 0px;
		overflow: visible;
	}
	#pexels-josh-hild-2422588_bd {
		filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
		position: absolute;
		width: 494px;
		height: 456px;
		left: 0px;
		top: 0px;
		overflow: visible;
	}
	#Group_2 {
		position: absolute;
		width: 268px;
		height: 116px;
		left: 39px;
		top: 111px;
		overflow: visible;
	}
	#LOST_IN_THE {
		left: 0px;
		top: 0px;
		position: absolute;
		overflow: visible;
		width: 163px;
		white-space: nowrap;
		text-align: left;
		font-family: Palm Beach Sans Clean;
		font-style: normal;
		font-weight: normal;
		font-size: 25px;
		color: rgba(255,255,255,1);
	}
	#CITY {
		left: 112px;
		top: 20px;
		position: absolute;
		overflow: visible;
		width: 157px;
		white-space: nowrap;
		text-align: left;
		font-family: Palm Beach Sans Clean;
		font-style: normal;
		font-weight: normal;
		font-size: 64px;
		color: rgba(255,255,255,1);
	}
	#Group_102 {
		position: absolute;
		width: 494px;
		height: 456px;
		left: 882px;
		top: 0px;
		overflow: visible;
	}
	#Group_101 {
		position: absolute;
		width: 494px;
		height: 456px;
		left: 0px;
		top: 0px;
		overflow: visible;
	}
	#pexels-alex-vivat-3992268 {
		filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
		position: absolute;
		width: 494px;
		height: 456px;
		left: 0px;
		top: 0px;
		overflow: visible;
	}
	#Group_100 {
		position: absolute;
		width: 122.127px;
		height: 83.009px;
		left: 62.873px;
		top: 31px;
		overflow: visible;
	}
	#n__bl {
		left: 48.127px;
		top: 0px;
		position: absolute;
		overflow: visible;
		width: 75px;
		white-space: nowrap;
		text-align: center;
		font-family: Fb Ankol;
		font-style: normal;
		font-weight: normal;
		font-size: 25px;
		color: rgba(255,255,255,1);
	}
	#n__bm {
		transform: translate(0px, 0px) matrix(1,0,0,1,2.8602,39.0092) rotate(-13deg);
		transform-origin: center;
		left: 0px;
		top: 0px;
		position: absolute;
		overflow: visible;
		width: 85px;
		white-space: nowrap;
		text-align: center;
		font-family: Fb Ankol;
		font-style: normal;
		font-weight: normal;
		font-size: 26px;
		color: rgba(255,255,255,1);
	}
	#Group_105 {
		position: absolute;
		width: 495px;
		height: 456px;
		left: -145px;
		top: 0px;
		overflow: visible;
	}
	#Group_9 {
		position: absolute;
		width: 495px;
		height: 456px;
		left: 0px;
		top: 0px;
		overflow: visible;
	}
	#pexels-dmitriy-ganin-8663559 {
		filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
		position: absolute;
		width: 495px;
		height: 456px;
		left: 0px;
		top: 0px;
		overflow: visible;
	}
	#TWIST_IT {
		left: 101px;
		top: 54px;
		position: absolute;
		overflow: visible;
		width: 201px;
		white-space: nowrap;
		text-align: center;
		font-family: Varien;
		font-style: normal;
		font-weight: normal;
		font-size: 52px;
		color: rgba(229,90,69,1);
	}
	#Text_br {
		left: 618px;
		top: 260px;
		position: absolute;
		overflow: visible;
		width: 1px;
		white-space: nowrap;
		text-align: center;
		font-family: Noto Sans Hebrew;
		font-style: normal;
		font-weight: bold;
		font-size: 30px;
		color: rgba(255,255,255,1);
	}
	#Text_bs {
		left: 618px;
		top: 280px;
		position: absolute;
		overflow: visible;
		width: 1px;
		white-space: nowrap;
		text-align: center;
		font-family: Noto Sans Hebrew;
		font-style: normal;
		font-weight: bold;
		font-size: 30px;
		color: rgba(255,255,255,1);
	}
	#Ellipse_2_bu {
		fill: url(#Ellipse_2_bu);
	}
	.Ellipse_2_bu {
		position: absolute;
		overflow: visible;
		width: 60px;
		height: 55px;
		left: 1302px;
		top: 13px;
	}
	#TOP {
		left: 1278px;
		top: 10px;
		position: absolute;
		overflow: visible;
		width: 52px;
		white-space: nowrap;
		text-align: right;
		font-family: Noto Sans Hebrew;
		font-style: normal;
		font-weight: bold;
		font-size: 26px;
		color: rgba(255,255,255,1);
	}
	#Group_106 {
		position: absolute;
		width: 495px;
		height: 456px;
		left: -659px;
		top: 0px;
		overflow: visible;
	}
	#Group_10 {
		position: absolute;
		width: 495px;
		height: 456px;
		left: 0px;
		top: 0px;
		overflow: visible;
	}
	#pexels-todd-trapani-6727602 {
		filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
		position: absolute;
		width: 495px;
		height: 456px;
		left: 0px;
		top: 0px;
		overflow: visible;
	}
	#Text_bz {
		left: 192px;
		top: 40px;
		position: absolute;
		overflow: visible;
		width: 197px;
		white-space: nowrap;
		text-align: center;
		font-family: KARMEL CondensedBlack;
		font-style: normal;
		font-weight: normal;
		font-size: 76px;
		color: rgba(0,0,0,1);
	}
	#play-circle_2 {
		fill: rgba(255,255,255,1);
	}
	.play-circle_2 {
		overflow: visible;
		position: absolute;
		width: 24.834px;
		height: 22.92px;
		left: 656.418px;
		top: 1778.587px;
		transform: matrix(1,0,0,1,0,0);
	}
	#Group_21 {
		position: absolute;
		width: 435px;
		height: 6px;
		left: 399px;
		top: 1852px;
		overflow: visible;
	}
	#Rectangle_18 {
		fill: rgba(255,255,255,1);
	}
	.Rectangle_18 {
		position: absolute;
		overflow: visible;
		width: 435px;
		height: 6px;
		left: 0px;
		top: 0px;
	}
	#Rectangle_19_b {
		fill: url(#Rectangle_19_b);
	}
	.Rectangle_19_b {
		position: absolute;
		overflow: visible;
		width: 185px;
		height: 6px;
		left: 0px;
		top: 0px;
	}
	#Scroll_Group_9 {
		mix-blend-mode: normal;
		position: absolute;
		width: 1899px;
		height: 456px;
		left: 0px;
		top: 2597px;
		overflow: hidden;
	}
	#Group_27 {
		position: absolute;
		width: 494px;
		height: 456px;
		left: 1396px;
		top: 0px;
		overflow: visible;
	}
	#pexels---16994627 {
		filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
		position: absolute;
		width: 494px;
		height: 456px;
		left: 0px;
		top: 0px;
		overflow: visible;
	}
	#Text_b {
		transform: translate(0.467px, 0px) matrix(1,0,0,1,307.5337,58) rotate(0deg);
		transform-origin: center;
		left: 0px;
		top: 0px;
		position: absolute;
		overflow: visible;
		width: 123px;
		white-space: nowrap;
		text-align: center;
		font-family: Fb Avtipus;
		font-style: normal;
		font-weight: normal;
		font-size: 27px;
		color: rgba(188,209,255,1);
	}
	#Group_28 {
		position: absolute;
		width: 494px;
		height: 456px;
		left: 882px;
		top: 0px;
		overflow: visible;
	}
	#pexels-ferdinand-studio-110403 {
		filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
		position: absolute;
		width: 494px;
		height: 456px;
		left: 0px;
		top: 0px;
		overflow: visible;
	}
	#n__cb {
		transform: translate(0.479px, 0px) matrix(1,0,0,1,26.521,329) rotate(0deg);
		transform-origin: center;
		left: 0px;
		top: 0px;
		position: absolute;
		overflow: visible;
		width: 299px;
		white-space: nowrap;
		text-align: center;
		font-family: Fb Gavriel;
		font-style: normal;
		font-weight: normal;
		font-size: 49px;
		color: rgba(255,255,255,1);
	}
	#Group_29 {
		position: absolute;
		width: 495px;
		height: 456px;
		left: 369px;
		top: 0px;
		overflow: visible;
	}
	#pexels-hassan-ouajbir-1535244 {
		filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
		position: absolute;
		width: 495px;
		height: 456px;
		left: 0px;
		top: 0px;
		overflow: visible;
	}
	#n__ce {
		transform: translate(0.365px, 0px) matrix(1,0,0,1,271.6348,2) rotate(0deg);
		transform-origin: center;
		left: 0px;
		top: 0px;
		position: absolute;
		overflow: visible;
		width: 85px;
		white-space: nowrap;
		text-align: center;
		font-family: Fb Marzipan;
		font-style: normal;
		font-weight: normal;
		font-size: 50px;
		color: rgba(208,121,33,1);
	}
	#Group_30 {
		position: absolute;
		width: 495px;
		height: 456px;
		left: -145px;
		top: 0px;
		overflow: visible;
	}
	#pexels-luiz-woellner-fotografi {
		filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
		position: absolute;
		width: 495px;
		height: 456px;
		left: 0px;
		top: 0px;
		overflow: visible;
	}
	#n__ch {
		transform: translate(0.378px, 0px) matrix(1,0,0,1,258.6221,346) rotate(0deg);
		transform-origin: center;
		left: 0px;
		top: 0px;
		position: absolute;
		overflow: visible;
		width: 173px;
		white-space: nowrap;
		text-align: center;
		font-family: Fb Mastik;
		font-style: normal;
		font-weight: normal;
		font-size: 50px;
		color: rgba(248,244,239,1);
	}
	#Group_31 {
		position: absolute;
		width: 524px;
		height: 456px;
		left: -740px;
		top: 0px;
		overflow: visible;
	}
	#pexels-oliver-sjstrm-1122413 {
		filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
		position: absolute;
		width: 494px;
		height: 456px;
		left: 0px;
		top: 0px;
		overflow: visible;
	}
	#Text_ck {
		transform: translate(0.096px, 0px) matrix(1,0,0,1,413.9038,39) rotate(0deg);
		transform-origin: center;
		left: 0px;
		top: 0px;
		position: absolute;
		overflow: visible;
		width: 111px;
		white-space: nowrap;
		text-align: center;
		font-family: Fb Nadav;
		font-style: normal;
		font-weight: normal;
		font-size: 48px;
		color: rgba(12,48,50,1);
	}
	#Scroll_Group_10 {
		mix-blend-mode: normal;
		position: absolute;
		width: 1899px;
		height: 455px;
		left: 0px;
		top: 3189px;
		overflow: hidden;
	}
	#pexels-george-milton-6953836 {
		filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
		position: absolute;
		width: 494px;
		height: 455px;
		left: 1396px;
		top: 0px;
		overflow: visible;
	}
	#pexels-maurcio-mascaro-1655815 {
		filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
		position: absolute;
		width: 494px;
		height: 455px;
		left: 882px;
		top: 0px;
		overflow: visible;
	}
	#pexels-cottonbro-studio-696451 {
		filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
		position: absolute;
		width: 495px;
		height: 455px;
		left: -145px;
		top: 0px;
		overflow: visible;
	}
	#Group_33 {
		position: absolute;
		width: 495px;
		height: 455px;
		left: 369px;
		top: 0px;
		overflow: visible;
	}
	#pexels-cottonbro-studio-696199 {
		filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
		position: absolute;
		width: 495px;
		height: 455px;
		left: 0px;
		top: 0px;
		overflow: visible;
	}
	#Group_32 {
		position: absolute;
		width: 60px;
		height: 55px;
		left: 420px;
		top: 13px;
		overflow: visible;
	}
	#Ellipse_6_ct {
		fill: url(#Ellipse_6_ct);
	}
	.Ellipse_6_ct {
		position: absolute;
		overflow: visible;
		width: 60px;
		height: 55px;
		left: 0px;
		top: 0px;
	}
	#TOP_cu {
		left: 10px;
		top: 15px;
		position: absolute;
		overflow: visible;
		width: 27px;
		white-space: nowrap;
		line-height: 23px;
		margin-top: -5px;
		text-align: right;
		font-family: Noto Sans Hebrew;
		font-style: normal;
		font-weight: bold;
		font-size: 13px;
		color: rgba(103,89,18,1);
	}
	#pexels-kampus-production-86366 {
		filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
		position: absolute;
		width: 495px;
		height: 455px;
		left: -659px;
		top: 0px;
		overflow: visible;
	}
	#Group_97 {
		position: absolute;
		width: 1070px;
		height: 554px;
		left: 767px;
		top: 726px;
		overflow: visible;
	}
	#pexels-cottonbro-studio-689619 {
		position: absolute;
		width: 1070px;
		height: 554px;
		left: 0px;
		top: 0px;
		overflow: visible;
	}
	#male-influencer-having-convers {
		opacity: 0.37;
		fill: rgba(0,0,0,1);
	}
	.male-influencer-having-convers {
		position: absolute;
		overflow: visible;
		width: 1070px;
		height: 554px;
		left: 0px;
		top: 0px;
	}
	#animation_lkf215op {
		fill: transparent;
	}
	.animation_lkf215op {
		overflow: hidden;
		position: absolute;
		width: 122px;
		height: 98px;
		left: 844px;
		top: 732px;
		transform: matrix(1,0,0,1,0,0);
	}
	#Group_98 {
		position: absolute;
		width: 116px;
		height: 45px;
		left: 966px;
		top: 756px;
		overflow: visible;
	}
	#Rectangle_29_c {
		fill: url(#Rectangle_29_c);
	}
	.Rectangle_29_c {
		position: absolute;
		overflow: visible;
		width: 116px;
		height: 45px;
		left: 0px;
		top: 0px;
	}
	#Group_36 {
		position: absolute;
		width: 66.213px;
		height: 20.497px;
		left: 14.501px;
		top: 9.077px;
		overflow: visible;
	}
	#Group_95 {
		position: absolute;
		width: 66.213px;
		height: 20.497px;
		left: 0px;
		top: 0px;
		overflow: visible;
	}
	#eye_2 {
		position: absolute;
		width: 25.284px;
		height: 13.91px;
		left: 0px;
		top: 6.587px;
		overflow: visible;
	}
	#Path_16 {
		fill: rgba(255,255,255,1);
	}
	.Path_16 {
		overflow: visible;
		position: absolute;
		width: 25.284px;
		height: 13.91px;
		left: 0px;
		top: 0px;
		transform: matrix(1,0,0,1,0,0);
	}
	#n_445 {
		left: 33.213px;
		top: 0px;
		position: absolute;
		overflow: visible;
		width: 34px;
		white-space: nowrap;
		text-align: right;
		font-family: Noto Sans Hebrew;
		font-style: normal;
		font-weight: normal;
		font-size: 13px;
		color: rgba(255,255,255,1);
	}
	#play-button_20 {
		position: absolute;
		width: 59.682px;
		height: 55.082px;
		left: 1272.159px;
		top: 975.459px;
		overflow: visible;
	}
	#Group_35 {
		position: absolute;
		width: 59.682px;
		height: 55.082px;
		left: 0px;
		top: 0px;
		overflow: visible;
	}
	#Group_34 {
		position: absolute;
		width: 59.682px;
		height: 55.082px;
		left: 0px;
		top: 0px;
		overflow: visible;
	}
	#Path_14 {
		fill: rgba(255,255,255,1);
	}
	.Path_14 {
		overflow: visible;
		position: absolute;
		width: 59.682px;
		height: 55.082px;
		left: 0px;
		top: 0px;
		transform: matrix(1,0,0,1,0,0);
	}
	#Path_15 {
		fill: rgba(255,255,255,1);
	}
	.Path_15 {
		overflow: visible;
		position: absolute;
		width: 19.582px;
		height: 20.184px;
		left: 22.605px;
		top: 17.449px;
		transform: matrix(1,0,0,1,0,0);
	}
	#Repeat_Grid_1 {
		position: absolute;
		width: 616px;
		height: 94px;
		left: 1274px;
		top: 535px;
		overflow: hidden;
	}
	#Group {
		position: absolute;
		width: 496px;
		height: 82px;
		left: 0px;
		top: 0px;
		overflow: visible;
	}
	#n__-________ {
		left: 0px;
		top: 0px;
		position: absolute;
		overflow: visible;
		width: 497px;
		white-space: nowrap;
		text-align: right;
		font-family: Noto Sans Hebrew;
		font-style: normal;
		font-weight: bold;
		font-size: 30px;
		color: rgba(255,255,255,1);
	}
	#Group_dg {
		position: absolute;
		width: 496px;
		height: 82px;
		left: 516px;
		top: 0px;
		overflow: visible;
	}
	#n__-_________dh {
		left: 0px;
		top: 0px;
		position: absolute;
		overflow: visible;
		width: 497px;
		white-space: nowrap;
		text-align: right;
		font-family: Noto Sans Hebrew;
		font-style: normal;
		font-weight: bold;
		font-size: 30px;
		color: rgba(255,255,255,1);
	}
	#Path_27_dj {
		fill: url(#Path_27_dj);
	}
	.Path_27_dj {
		overflow: visible;
		position: absolute;
		width: 1342.146px;
		height: 109.396px;
		left: 542px;
		top: 420.604px;
		transform: matrix(1,0,0,1,0,0);
	}
	#Scroll_Group_11 {
		mix-blend-mode: normal;
		position: absolute;
		width: 1899px;
		height: 455px;
		left: 0px;
		top: 3780px;
		overflow: hidden;
	}
	#pexels-mikhail-nilov-7886852 {
		filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
		position: absolute;
		width: 494px;
		height: 455px;
		left: 1396px;
		top: 0px;
		overflow: visible;
	}
	#pexels-pixabay-371924 {
		filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
		position: absolute;
		width: 494px;
		height: 455px;
		left: 882px;
		top: 0px;
		overflow: visible;
	}
	#pexels-cottonbro-studio-400959 {
		filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
		position: absolute;
		width: 495px;
		height: 455px;
		left: 369px;
		top: 0px;
		overflow: visible;
	}
	#pexels-fox-1038916 {
		filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
		position: absolute;
		width: 495px;
		height: 455px;
		left: -145px;
		top: 0px;
		overflow: visible;
	}
	#pexels-jeshootscom-442576 {
		filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
		position: absolute;
		width: 495px;
		height: 455px;
		left: -659px;
		top: 0px;
		overflow: visible;
	}
	#Rectangle_17_dr {
		fill: url(#Rectangle_17_dr);
	}
	.Rectangle_17_dr {
		position: absolute;
		overflow: visible;
		width: 74px;
		height: 3px;
		left: 1816px;
		top: 3736px;
	}
	#n__ds {
		left: 1260px;
		top: 4371px;
		position: absolute;
		overflow: visible;
		width: 135px;
		white-space: nowrap;
		text-align: right;
		font-family: Noto Sans Hebrew;
		font-style: normal;
		font-weight: bold;
		font-size: 25px;
		color: rgba(255,255,255,1);
	}
	#n__dt {
		left: 1059.375px;
		top: 4373.299px;
		position: absolute;
		overflow: visible;
		width: 116px;
		white-space: nowrap;
		text-align: right;
		font-family: Noto Sans Hebrew;
		font-style: normal;
		font-weight: bold;
		font-size: 25px;
		color: rgba(255,255,255,1);
	}
	#n__du {
		left: 727.5px;
		top: 4373.299px;
		position: absolute;
		overflow: visible;
		width: 150px;
		white-space: nowrap;
		text-align: right;
		font-family: Noto Sans Hebrew;
		font-style: normal;
		font-weight: bold;
		font-size: 25px;
		color: rgba(255,255,255,1);
	}
	#Text_dv {
		left: 506.5px;
		top: 4373.299px;
		position: absolute;
		overflow: visible;
		width: 105px;
		white-space: nowrap;
		text-align: right;
		font-family: Noto Sans Hebrew;
		font-style: normal;
		font-weight: bold;
		font-size: 25px;
		color: rgba(255,255,255,1);
	}
	#Path_7_dx {
		fill: url(#Path_7_dx);
	}
	.Path_7_dx {
		overflow: visible;
		position: absolute;
		width: 337.108px;
		height: 33.314px;
		left: 759.601px;
		top: 4324.831px;
		transform: matrix(1,0,0,1,0,0);
	}
	#n__WhatsApp__2023-07-16__14464 {
		position: absolute;
		width: 144px;
		height: 202px;
		left: 1746px;
		top: 4337px;
		overflow: visible;
	}
	#Group_17 {
		position: absolute;
		width: 148.565px;
		height: 27.504px;
		left: 854.81px;
		top: 4463.496px;
		overflow: visible;
	}
	#facebook_41 {
		position: absolute;
		width: 29.801px;
		height: 27.338px;
		left: 0px;
		top: 0px;
		overflow: visible;
	}
	#Path_8_d {
		fill: url(#Path_8_d);
	}
	.Path_8_d {
		overflow: visible;
		position: absolute;
		width: 29.801px;
		height: 27.337px;
		left: 0px;
		top: 0px;
		transform: matrix(1,0,0,1,0,0);
	}
	#instagram_49 {
		position: absolute;
		width: 29.801px;
		height: 27.504px;
		left: 59.822px;
		top: 0px;
		overflow: visible;
	}
	#Path_9_d {
		fill: url(#Path_9_d);
	}
	.Path_9_d {
		overflow: visible;
		position: absolute;
		width: 29.801px;
		height: 27.504px;
		left: 0px;
		top: 0px;
		transform: matrix(1,0,0,1,0,0);
	}
	#Path_10_d {
		fill: url(#Path_10_d);
	}
	.Path_10_d {
		overflow: visible;
		position: absolute;
		width: 15.303px;
		height: 14.124px;
		left: 7.249px;
		top: 6.69px;
		transform: matrix(1,0,0,1,0,0);
	}
	#Ellipse_5_d {
		fill: url(#Ellipse_5_d);
	}
	.Ellipse_5_d {
		position: absolute;
		overflow: visible;
		width: 3.576px;
		height: 3.3px;
		left: 21.066px;
		top: 4.76px;
	}
	#envelope_1_eb {
		fill: url(#envelope_1_eb);
	}
	.envelope_1_eb {
		overflow: visible;
		position: absolute;
		width: 29.801px;
		height: 25.212px;
		left: 118.765px;
		top: 1.146px;
		transform: matrix(1,0,0,1,0,0);
	}
	#Scroll_Group_8 {
		mix-blend-mode: normal;
		position: absolute;
		width: 1899px;
		height: 455px;
		left: 0px;
		top: 2006px;
		overflow: hidden;
	}
	#Group_107 {
		position: absolute;
		width: 715px;
		height: 455px;
		left: 1175px;
		top: 0px;
		overflow: visible;
	}
	#pexels-cottonbro-studio-503581 {
		filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
		position: absolute;
		width: 715px;
		height: 455px;
		left: 0px;
		top: 0px;
		overflow: visible;
	}
	#WE_KNEW {
		left: 260px;
		top: 325px;
		position: absolute;
		overflow: visible;
		width: 162px;
		white-space: nowrap;
		text-align: left;
		font-family: Niagara Solid;
		font-style: normal;
		font-weight: normal;
		font-size: 76px;
		color: rgba(255,255,255,1);
	}
	#Group_12 {
		position: absolute;
		width: 494px;
		height: 455px;
		left: 660px;
		top: 0px;
		overflow: visible;
	}
	#pexels-nairod-reyes-12569870 {
		filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
		position: absolute;
		width: 494px;
		height: 455px;
		left: 0px;
		top: 0px;
		overflow: visible;
	}
	#Text_ei {
		transform: translate(0.45px, 0px) matrix(1,0,0,1,143.1198,42.414) rotate(0deg);
		transform-origin: center;
		left: 0px;
		top: 0px;
		position: absolute;
		overflow: visible;
		width: 161px;
		white-space: nowrap;
		text-align: center;
		font-family: Fb Avtipus;
		font-style: normal;
		font-weight: normal;
		font-size: 67px;
		color: rgba(60,67,73,1);
	}
	#Group_25 {
		position: absolute;
		width: 494px;
		height: 455px;
		left: 147px;
		top: 0px;
		overflow: visible;
	}
	#Group_13 {
		position: absolute;
		width: 494px;
		height: 455px;
		left: 0px;
		top: 0px;
		overflow: visible;
	}
	#pexels-cottonbro-studio-729958 {
		filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
		position: absolute;
		width: 494px;
		height: 455px;
		left: 0px;
		top: 0px;
		overflow: visible;
	}
	#n__em {
		transform: translate(0.337px, 0px) matrix(1,0,0,1,96.3597,26.8679) rotate(7deg);
		transform-origin: center;
		left: 0px;
		top: 0px;
		position: absolute;
		overflow: visible;
		width: 77px;
		white-space: nowrap;
		text-align: center;
		font-family: Fb Avtipus;
		font-style: normal;
		font-weight: normal;
		font-size: 27px;
		color: rgba(255,255,255,1);
	}
	#Ellipse_3_eo {
		fill: url(#Ellipse_3_eo);
	}
	.Ellipse_3_eo {
		position: absolute;
		overflow: visible;
		width: 59px;
		height: 55px;
		left: 423px;
		top: 12px;
	}
	#TOP_ep {
		left: 432px;
		top: 27px;
		position: absolute;
		overflow: visible;
		width: 27px;
		white-space: nowrap;
		line-height: 23px;
		margin-top: -5px;
		text-align: right;
		font-family: Noto Sans Hebrew;
		font-style: normal;
		font-weight: bold;
		font-size: 13px;
		color: rgba(255,255,255,1);
	}
	#Group_14 {
		position: absolute;
		width: 494px;
		height: 455px;
		left: -367px;
		top: 0px;
		overflow: visible;
	}
	#pexels-dylan-leagh-8954101 {
		filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
		position: absolute;
		width: 494px;
		height: 455px;
		left: 0px;
		top: 0px;
		overflow: visible;
	}
	#RUN {
		left: 58px;
		top: 282px;
		position: absolute;
		overflow: visible;
		width: 123px;
		white-space: nowrap;
		text-align: center;
		font-family: Furiosa Park;
		font-style: normal;
		font-weight: normal;
		font-size: 60px;
		color: rgba(255,255,255,1);
	}
	#pexels-koolshooters-8104851 {
		filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
		position: absolute;
		width: 494px;
		height: 455px;
		left: -881px;
		top: 0px;
		overflow: visible;
	}
	#n__WhatsApp__2023-07-16__14464_eu {
		position: absolute;
		width: 300px;
		height: 420px;
		left: 41px;
		top: 0px;
		overflow: visible;
	}
</style>
<script id="applicationScript">
///////////////////////////////////////
// INITIALIZATION
///////////////////////////////////////
/**
 * Functionality for scaling, showing by media query, and navigation between multiple pages on a single page. 
 * Code subject to change.
 **/
if (window.console==null) { window["console"] = { log : function() {} } }; // some browsers do not set console
var Application = function() {
	// event constants
	this.prefix = "--web-";
	this.NAVIGATION_CHANGE = "viewChange";
	this.VIEW_NOT_FOUND = "viewNotFound";
	this.VIEW_CHANGE = "viewChange";
	this.VIEW_CHANGING = "viewChanging";
	this.STATE_NOT_FOUND = "stateNotFound";
	this.APPLICATION_COMPLETE = "applicationComplete";
	this.APPLICATION_RESIZE = "applicationResize";
	this.SIZE_STATE_NAME = "data-is-view-scaled";
	this.STATE_NAME = this.prefix + "state";
	this.lastTrigger = null;
	this.lastView = null;
	this.lastState = null;
	this.lastOverlay = null;
	this.currentView = null;
	this.currentState = null;
	this.currentOverlay = null;
	this.currentQuery = {index: 0, rule: null, mediaText: null, id: null};
	this.inclusionQuery = "(min-width: 0px)";
	this.exclusionQuery = "none and (min-width: 99999px)";
	this.LastModifiedDateLabelName = "LastModifiedDateLabel";
	this.viewScaleSliderId = "ViewScaleSliderInput";
	this.pageRefreshedName = "showPageRefreshedNotification";
	this.application = null;
	this.applicationStylesheet = null;
	this.showByMediaQuery = null;
	this.mediaQueryDictionary = {};
	this.viewsDictionary = {};
	this.addedViews = [];
	this.viewStates = [];
	this.views = [];
	this.viewIds = [];
	this.viewQueries = {};
	this.overlays = {};
	this.overlayIds = [];
	this.numberOfViews = 0;
	this.verticalPadding = 0;
	this.horizontalPadding = 0;
	this.stateName = null;
	this.viewScale = 1;
	this.viewLeft = 0;
	this.viewTop = 0;
	this.horizontalScrollbarsNeeded = false;
	this.verticalScrollbarsNeeded = false;
	// view settings
	this.showUpdateNotification = false;
	this.showNavigationControls = false;
	this.scaleViewsToFit = false;
	this.scaleToFitOnDoubleClick = false;
	this.actualSizeOnDoubleClick = false;
	this.scaleViewsOnResize = false;
	this.navigationOnKeypress = false;
	this.showViewName = false;
	this.enableDeepLinking = true;
	this.refreshPageForChanges = false;
	this.showRefreshNotifications = true;
	// view controls
	this.scaleViewSlider = null;
	this.lastModifiedLabel = null;
	this.supportsPopState = false; // window.history.pushState!=null;
	this.initialized = false;
	// refresh properties
	this.refreshDuration = 250;
	this.lastModifiedDate = null;
	this.refreshRequest = null;
	this.refreshInterval = null;
	this.refreshContent = null;
	this.refreshContentSize = null;
	this.refreshCheckContent = false;
	this.refreshCheckContentSize = false;
	var self = this;
	self.initialize = function(event) {
		var view = self.getVisibleView();
		var views = self.getVisibleViews();
		if (view==null) view = self.getInitialView();
		self.collectViews();
		self.collectOverlays();
		self.collectMediaQueries();
		for (let index = 0; index < views.length; index++) {
			var view = views[index];
			self.setViewOptions(view);
			self.setViewVariables(view);
			self.centerView(view);
		}
		// sometimes the body size is 0 so we call this now and again later
		if (self.initialized) {
			window.addEventListener(self.NAVIGATION_CHANGE, self.viewChangeHandler);
			window.addEventListener("keyup", self.keypressHandler);
			window.addEventListener("keypress", self.keypressHandler);
			window.addEventListener("resize", self.resizeHandler);
			window.document.addEventListener("dblclick", self.doubleClickHandler);
			if (self.supportsPopState) {
				window.addEventListener('popstate', self.popStateHandler);
			}
			else {
				window.addEventListener('hashchange', self.hashChangeHandler);
			}
			// we are ready to go
			window.dispatchEvent(new Event(self.APPLICATION_COMPLETE));
		}
		if (self.initialized==false) {
			if (self.enableDeepLinking) {
				self.syncronizeViewToURL();
			} 
	
			if (self.refreshPageForChanges) {
				self.setupRefreshForChanges();
			}
	
			self.initialized = true;
		}
		
		if (self.scaleViewsToFit) {
			self.viewScale = self.scaleViewToFit(view);
			
			if (self.viewScale<0) {
				setTimeout(self.scaleViewToFit, 500, view);
			}
		}
		else if (view) {
			self.viewScale = self.getViewScaleValue(view);
			self.centerView(view);
			self.updateSliderValue(self.viewScale);
		}
		else {
			// no view found
		}
	
		if (self.showUpdateNotification) {
			self.showNotification();
		}
		//"addEventListener" in window ? null : window.addEventListener = window.attachEvent;
		//"addEventListener" in document ? null : document.addEventListener = document.attachEvent;
	}
	///////////////////////////////////////
	// AUTO REFRESH 
	///////////////////////////////////////
	self.setupRefreshForChanges = function() {
		self.refreshRequest = new XMLHttpRequest();
		if (!self.refreshRequest) {
			return false;
		}
		// get document start values immediately
		self.requestRefreshUpdate();
	}
	/**
	 * Attempt to check the last modified date by the headers 
	 * or the last modified property from the byte array (experimental)
	 **/
	self.requestRefreshUpdate = function() {
		var url = document.location.href;
		var protocol = window.location.protocol;
		var method;
		
		try {
			if (self.refreshCheckContentSize) {
				self.refreshRequest.open('HEAD', url, true);
			}
			else if (self.refreshCheckContent) {
				self.refreshContent = document.documentElement.outerHTML;
				self.refreshRequest.open('GET', url, true);
				self.refreshRequest.responseType = "text";
			}
			else {
				// get page last modified date for the first call to compare to later
				if (self.lastModifiedDate==null) {
					// File system does not send headers in FF so get blob if possible
					if (protocol=="file:") {
						self.refreshRequest.open("GET", url, true);
						self.refreshRequest.responseType = "blob";
					}
					else {
						self.refreshRequest.open("HEAD", url, true);
						self.refreshRequest.responseType = "blob";
					}
					self.refreshRequest.onload = self.refreshOnLoadOnceHandler;
					// In some browsers (Chrome & Safari) this error occurs at send: 
					// 
					// Chrome - Access to XMLHttpRequest at 'file:///index.html' from origin 'null' 
					// has been blocked by CORS policy: 
					// Cross origin requests are only supported for protocol schemes: 
					// http, data, chrome, chrome-extension, https.
					// 
					// Safari - XMLHttpRequest cannot load file:///Users/user/Public/index.html. Cross origin requests are only supported for HTTP.
					// 
					// Solution is to run a local server, set local permissions or test in another browser
					self.refreshRequest.send(null);
					// In MS browsers the following behavior occurs possibly due to an AJAX call to check last modified date: 
					// 
					// DOM7011: The code on this page disabled back and forward caching.
					// In Brave (Chrome) error when on the server
					// index.js:221 HEAD https://www.example.com/ net::ERR_INSUFFICIENT_RESOURCES
					// self.refreshRequest.send(null);
				}
				else {
					self.refreshRequest = new XMLHttpRequest();
					self.refreshRequest.onreadystatechange = self.refreshHandler;
					self.refreshRequest.ontimeout = function() {
						self.log("Couldn't find page to check for updates");
					}
					
					var method;
					if (protocol=="file:") {
						method = "GET";
					}
					else {
						method = "HEAD";
					}
					//refreshRequest.open('HEAD', url, true);
					self.refreshRequest.open(method, url, true);
					self.refreshRequest.responseType = "blob";
					self.refreshRequest.send(null);
				}
			}
		}
		catch (error) {
			self.log("Refresh failed for the following reason:")
			self.log(error);
		}
	}
	self.refreshHandler = function() {
		var contentSize;
		try {
			if (self.refreshRequest.readyState === XMLHttpRequest.DONE) {
				
				if (self.refreshRequest.status === 2 || 
					self.refreshRequest.status === 200) {
					var pageChanged = false;
					self.updateLastModifiedLabel();
					if (self.refreshCheckContentSize) {
						var lastModifiedHeader = self.refreshRequest.getResponseHeader("Last-Modified");
						contentSize = self.refreshRequest.getResponseHeader("Content-Length");
						//lastModifiedDate = refreshRequest.getResponseHeader("Last-Modified");
						var headers = self.refreshRequest.getAllResponseHeaders();
						var hasContentHeader = headers.indexOf("Content-Length")!=-1;
						
						if (hasContentHeader) {
							contentSize = self.refreshRequest.getResponseHeader("Content-Length");
							// size has not been set yet
							if (self.refreshContentSize==null) {
								self.refreshContentSize = contentSize;
								// exit and let interval call this method again
								return;
							}
							if (contentSize!=self.refreshContentSize) {
								pageChanged = true;
							}
						}
					}
					else if (self.refreshCheckContent) {
						if (self.refreshRequest.responseText!=self.refreshContent) {
							pageChanged = true;
						}
					}
					else {
						lastModifiedHeader = self.getLastModified(self.refreshRequest);
						if (self.lastModifiedDate!=lastModifiedHeader) {
							self.log("lastModifiedDate:" + self.lastModifiedDate + ",lastModifiedHeader:" +lastModifiedHeader);
							pageChanged = true;
						}
					}
					
					if (pageChanged) {
						clearInterval(self.refreshInterval);
						self.refreshUpdatedPage();
						return;
					}
				}
				else {
					self.log('There was a problem with the request.');
				}
			}
		}
		catch( error ) {
			//console.log('Caught Exception: ' + error);
		}
	}
	self.refreshOnLoadOnceHandler = function(event) {
		// get the last modified date
		if (self.refreshRequest.response) {
			self.lastModifiedDate = self.getLastModified(self.refreshRequest);
			if (self.lastModifiedDate!=null) {
				if (self.refreshInterval==null) {
					self.refreshInterval = setInterval(self.requestRefreshUpdate, self.refreshDuration);
				}
			}
			else {
				self.log("Could not get last modified date from the server");
			}
		}
	}
	self.refreshUpdatedPage = function() {
		if (self.showRefreshNotifications) {
			var date = new Date().setTime((new Date().getTime()+10000));
			document.cookie = encodeURIComponent(self.pageRefreshedName) + "=true" + "; max-age=6000;" + " path=/";
		}
		document.location.reload(true);
	}
	self.showNotification = function(duration) {
		var notificationID = self.pageRefreshedName+"ID";
		var notification = document.getElementById(notificationID);
		if (duration==null) duration = 4000;
		if (notification!=null) {return;}
		notification = document.createElement("div");
		notification.id = notificationID;
		notification.textContent = "PAGE UPDATED";
		var styleRule = ""
		styleRule = "position: fixed; padding: 7px 16px 6px 16px; font-family: Arial, sans-serif; font-size: 10px; font-weight: bold; left: 50%;";
		styleRule += "top: 20px; background-color: rgba(0,0,0,.5); border-radius: 12px; color:rgb(235, 235, 235); transition: all 2s linear;";
		styleRule += "transform: translateX(-50%); letter-spacing: .5px; filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, .1)); cursor: pointer";
		notification.setAttribute("style", styleRule);
		notification.className = "PageRefreshedClass";
		notification.addEventListener("click", function() {
			notification.parentNode.removeChild(notification);
		});
		
		document.body.appendChild(notification);
		setTimeout(function() {
			notification.style.opacity = "0";
			notification.style.filter = "drop-shadow( 0px 0px 0px rgba(0,0,0, .5))";
			setTimeout(function() {
				try {
					notification.parentNode.removeChild(notification);
				} catch(error) {}
			}, duration)
		}, duration);
		document.cookie = encodeURIComponent(self.pageRefreshedName) + "=; max-age=1; path=/";
	}
	/**
	 * Get the last modified date from the header 
	 * or file object after request has been received
	 **/
	self.getLastModified = function(request) {
		var date;
		// file protocol - FILE object with last modified property
		if (request.response && request.response.lastModified) {
			date = request.response.lastModified;
		}
		
		// http protocol - check headers
		if (date==null) {
			date = request.getResponseHeader("Last-Modified");
		}
		return date;
	}
	self.updateLastModifiedLabel = function() {
		var labelValue = "";
		
		if (self.lastModifiedLabel==null) {
			self.lastModifiedLabel = document.getElementById("LastModifiedLabel");
		}
		if (self.lastModifiedLabel) {
			var seconds = parseInt(((new Date().getTime() - Date.parse(document.lastModified)) / 1000 / 60) * 100 + "");
			var minutes = 0;
			var hours = 0;
			if (seconds < 60) {
				seconds = Math.floor(seconds/10)*10;
				labelValue = seconds + " seconds";
			}
			else {
				minutes = parseInt((seconds/60) + "");
				if (minutes>60) {
					hours = parseInt((seconds/60/60) +"");
					labelValue += hours==1 ? " hour" : " hours";
				}
				else {
					labelValue = minutes+"";
					labelValue += minutes==1 ? " minute" : " minutes";
				}
			}
			
			if (seconds<10) {
				labelValue = "Updated now";
			}
			else {
				labelValue = "Updated " + labelValue + " ago";
			}
			if (self.lastModifiedLabel.firstElementChild) {
				self.lastModifiedLabel.firstElementChild.textContent = labelValue;
			}
			else if ("textContent" in self.lastModifiedLabel) {
				self.lastModifiedLabel.textContent = labelValue;
			}
		}
	}
	self.getShortString = function(string, length) {
		if (length==null) length = 30;
		string = string!=null ? string.substr(0, length).replace(/\n/g, "") : "[String is null]";
		return string;
	}
	self.getShortNumber = function(value, places) {
		if (places==null || places<1) places = 4;
		value = Math.round(value * Math.pow(10,places)) / Math.pow(10, places);
		return value;
	}
	///////////////////////////////////////
	// NAVIGATION CONTROLS
	///////////////////////////////////////
	self.updateViewLabel = function() {
		var viewNavigationLabel = document.getElementById("ViewNavigationLabel");
		var view = self.getVisibleView();
		var viewIndex = view ? self.getViewIndex(view) : -1;
		var viewName = view ? self.getViewPreferenceValue(view, self.prefix + "view-name") : null;
		var viewId = view ? view.id : null;
		if (viewNavigationLabel && view) {
			if (viewName && viewName.indexOf('"')!=-1) {
				viewName = viewName.replace(/"/g, "");
			}
			if (self.showViewName) {
				viewNavigationLabel.textContent = viewName;
				self.setTooltip(viewNavigationLabel, viewIndex + 1 + " of " + self.numberOfViews);
			}
			else {
				viewNavigationLabel.textContent = viewIndex + 1 + " of " + self.numberOfViews;
				self.setTooltip(viewNavigationLabel, viewName);
			}
		}
	}
	self.updateURL = function(view) {
		view = view == null ? self.getVisibleView() : view;
		var viewId = view ? view.id : null
		var viewFragment = view ? "#"+ viewId : null;
		if (viewId && self.viewIds.length>1 && self.enableDeepLinking) {
			if (self.supportsPopState==false) {
				self.setFragment(viewId);
			}
			else {
				if (viewFragment!=window.location.hash) {
					if (window.location.hash==null) {
						window.history.replaceState({name:viewId}, null, viewFragment);
					}
					else {
						window.history.pushState({name:viewId}, null, viewFragment);
					}
				}
			}
		}
	}
	self.updateURLState = function(view, stateName) {
		stateName = view && (stateName=="" || stateName==null) ? self.getStateNameByViewId(view.id) : stateName;
		if (self.supportsPopState==false) {
			self.setFragment(stateName);
		}
		else {
			if (stateName!=window.location.hash) {
				if (window.location.hash==null) {
					window.history.replaceState({name:view.viewId}, null, stateName);
				}
				else {
					window.history.pushState({name:view.viewId}, null, stateName);
				}
			}
		}
	}
	self.setFragment = function(value) {
		window.location.hash = "#" + value;
	}
	self.setTooltip = function(element, value) {
		// setting the tooltip in edge causes a page crash on hover
		if (/Edge/.test(navigator.userAgent)) { return; }
		if ("title" in element) {
			element.title = value;
		}
	}
	self.getStylesheetRules = function(styleSheet) {
		try {
			if (styleSheet) return styleSheet.cssRules || styleSheet.rules;
	
			return document.styleSheets[0]["cssRules"] || document.styleSheets[0]["rules"];
		}
		catch (error) {
			// ERRORS:
			// SecurityError: The operation is insecure.
			// Errors happen when script loads before stylesheet or loading an external css locally
			// InvalidAccessError: A parameter or an operation is not supported by the underlying object
			// Place script after stylesheet
			console.log(error);
			if (error.toString().indexOf("The operation is insecure")!=-1) {
				console.log("Load the stylesheet before the script or load the stylesheet inline until it can be loaded on a server")
			}
			return [];
		}
	}
	/**
	 * If single page application hide all of the views. 
	 * @param {Number} selectedIndex if provided shows the view at index provided
	 **/
	self.hideViews = function(selectedIndex, animation) {
		var rules = self.getStylesheetRules();
		var queryIndex = 0;
		var numberOfRules = rules!=null ? rules.length : 0;
		// loop through rules and hide media queries except selected
		for (var i=0;i<numberOfRules;i++) {
			var rule = rules[i];
			var cssText = rule && rule.cssText;
			if (rule.media!=null && cssText.match("--web-view-name:")) {
				if (queryIndex==selectedIndex) {
					self.currentQuery.mediaText = rule.conditionText;
					self.currentQuery.index = selectedIndex;
					self.currentQuery.rule = rule;
					self.enableMediaQuery(rule);
				}
				else {
					if (animation) {
						self.fadeOut(rule)
					}
					else {
						self.disableMediaQuery(rule);
					}
				}
				
				queryIndex++;
			}
		}
		self.numberOfViews = queryIndex;
		self.updateViewLabel();
		self.updateURL();
		self.dispatchViewChange();
		var view = self.getVisibleView();
		var viewIndex = view ? self.getViewIndex(view) : -1;
		return viewIndex==selectedIndex ? view : null;
	}
	/**
	 * If single page application hide all of the views. 
	 * @param {HTMLElement} selectedView if provided shows the view passed in
	 **/
	 self.hideAllViews = function(selectedView, animation) {
		var views = self.views;
		var queryIndex = 0;
		var numberOfViews = views!=null ? views.length : 0;
		// loop through rules and hide media queries except selected
		for (var i=0;i<numberOfViews;i++) {
			var viewData = views[i];
			var view = viewData && viewData.view;
			var mediaRule = viewData && viewData.mediaRule;
			
			if (view==selectedView) {
				self.currentQuery.mediaText = mediaRule.conditionText;
				self.currentQuery.index = queryIndex;
				self.currentQuery.rule = mediaRule;
				self.enableMediaQuery(mediaRule);
			}
			else {
				if (animation) {
					self.fadeOut(mediaRule)
				}
				else {
					self.disableMediaQuery(mediaRule);
				}
			}
			
			queryIndex++;
		}
		self.numberOfViews = queryIndex;
		self.updateViewLabel();
		self.updateURL();
		self.dispatchViewChange();
		var visibleView = self.getVisibleView();
		return visibleView==selectedView ? selectedView : null;
	}
	/**
	 * Hide view
	 * @param {Object} view element to hide
	 **/
	self.hideView = function(view) {
		var rule = view ? self.mediaQueryDictionary[view.id] : null;
		if (rule) {
			self.disableMediaQuery(rule);
		}
	}
	/**
	 * Hide overlay
	 * @param {Object} overlay element to hide
	 **/
	self.hideOverlay = function(overlay) {
		var rule = overlay ? self.mediaQueryDictionary[overlay.id] : null;
		if (rule) {
			self.disableMediaQuery(rule);
			//if (self.showByMediaQuery) {
				overlay.style.display = "none";
			//}
		}
	}
	/**
	 * Show the view by media query. Does not hide current views
	 * Sets view options by default
	 * @param {Object} view element to show
	 * @param {Boolean} setViewOptions sets view options if null or true
	 */
	self.showViewByMediaQuery = function(view, setViewOptions) {
		var id = view ? view.id : null;
		var query = id ? self.mediaQueryDictionary[id] : null;
		var isOverlay = view ? self.isOverlay(view) : false;
		setViewOptions = setViewOptions==null ? true : setViewOptions;
		if (query) {
			self.enableMediaQuery(query);
			if (isOverlay && view && setViewOptions) {
				self.setViewVariables(null, view);
			}
			else {
				if (view && setViewOptions) self.setViewOptions(view);
				if (view && setViewOptions) self.setViewVariables(view);
			}
		}
	}
	/**
	 * Show the view. Does not hide current views
	 */
	self.showView = function(view, setViewOptions) {
		var id = view ? view.id : null;
		var query = id ? self.mediaQueryDictionary[id] : null;
		var display = null;
		setViewOptions = setViewOptions==null ? true : setViewOptions;
		if (query) {
			self.enableMediaQuery(query);
			if (view==null) view =self.getVisibleView();
			if (view && setViewOptions) self.setViewOptions(view);
		}
		else if (id) {
			display = window.getComputedStyle(view).getPropertyValue("display");
			if (display=="" || display=="none") {
				view.style.display = "block";
			}
		}
		if (view) {
			if (self.currentView!=null) {
				self.lastView = self.currentView;
			}
			self.currentView = view;
		}
	}
	self.showViewById = function(id, setViewOptions) {
		var view = id ? self.getViewById(id) : null;
		if (view) {
			self.showView(view);
			return;
		}
		self.log("View not found '" + id + "'");
	}
	self.getElementView = function(element) {
		var view = element;
		var viewFound = false;
		while (viewFound==false || view==null) {
			if (view && self.viewsDictionary[view.id]) {
				return view;
			}
			view = view.parentNode;
		}
	}
	/**
	 * Show overlay over view
	 * @param {Event | HTMLElement} event event or html element with styles applied
	 * @param {String} id id of view or view reference
	 * @param {Number} x x location
	 * @param {Number} y y location
	 */
	self.showOverlay = function(event, id, x, y) {
		var overlay = id && typeof id === 'string' ? self.getViewById(id) : id ? id : null;
		var query = overlay ? self.mediaQueryDictionary[overlay.id] : null;
		var centerHorizontally = false;
		var centerVertically = false;
		var anchorLeft = false;
		var anchorTop = false;
		var anchorRight = false;
		var anchorBottom = false;
		var display = null;
		var reparent = true;
		var view = null;
		
		if (overlay==null || overlay==false) {
			self.log("Overlay not found, '"+ id + "'");
			return;
		}
		// get enter animation - event target must have css variables declared
		if (event) {
			var button = event.currentTarget || event; // can be event or htmlelement
			var buttonComputedStyles = getComputedStyle(button);
			var actionTargetValue = buttonComputedStyles.getPropertyValue(self.prefix+"action-target").trim();
			var animation = buttonComputedStyles.getPropertyValue(self.prefix+"animation").trim();
			var isAnimated = animation!="";
			var targetType = buttonComputedStyles.getPropertyValue(self.prefix+"action-type").trim();
			var actionTarget = self.application ? null : self.getElement(actionTargetValue);
			var actionTargetStyles = actionTarget ? actionTarget.style : null;
			if (actionTargetStyles) {
				actionTargetStyles.setProperty("animation", animation);
			}
			if ("stopImmediatePropagation" in event) {
				event.stopImmediatePropagation();
			}
		}
		
		if (self.application==false || targetType=="page") {
			document.location.href = "./" + actionTargetValue;
			return;
		}
		// remove any current overlays
		if (self.currentOverlay) {
			// act as switch if same button
			if (self.currentOverlay==actionTarget || self.currentOverlay==null) {
				if (self.lastTrigger==button) {
					self.removeOverlay(isAnimated);
					return;
				}
			}
			else {
				self.removeOverlay(isAnimated);
			}
		}
		if (reparent) {
			view = self.getElementView(button);
			if (view) {
				view.appendChild(overlay);
			}
		}
		if (query) {
			//self.setElementAnimation(overlay, null);
			//overlay.style.animation = animation;
			self.enableMediaQuery(query);
			
			var display = overlay && overlay.style.display;
			
			if (overlay && display=="" || display=="none") {
				overlay.style.display = "block";
				//self.setViewOptions(overlay);
			}
			// add animation defined in event target style declaration
			if (animation && self.supportAnimations) {
				self.fadeIn(overlay, false, animation);
			}
		}
		else if (id) {
			display = window.getComputedStyle(overlay).getPropertyValue("display");
			if (display=="" || display=="none") {
				overlay.style.display = "block";
			}
			// add animation defined in event target style declaration
			if (animation && self.supportAnimations) {
				self.fadeIn(overlay, false, animation);
			}
		}
		// do not set x or y position if centering
		var horizontal = self.prefix + "center-horizontally";
		var vertical = self.prefix + "center-vertically";
		var style = overlay.style;
		var transform = [];
		centerHorizontally = self.getIsStyleDefined(id, horizontal) ? self.getViewPreferenceBoolean(overlay, horizontal) : false;
		centerVertically = self.getIsStyleDefined(id, vertical) ? self.getViewPreferenceBoolean(overlay, vertical) : false;
		anchorLeft = self.getIsStyleDefined(id, "left");
		anchorRight = self.getIsStyleDefined(id, "right");
		anchorTop = self.getIsStyleDefined(id, "top");
		anchorBottom = self.getIsStyleDefined(id, "bottom");
		
		if (self.viewsDictionary[overlay.id] && self.viewsDictionary[overlay.id].styleDeclaration) {
			style = self.viewsDictionary[overlay.id].styleDeclaration.style;
		}
		
		if (centerHorizontally) {
			style.left = "50%";
			style.transformOrigin = "0 0";
			transform.push("translateX(-50%)");
		}
		else if (anchorRight && anchorLeft) {
			style.left = x + "px";
		}
		else if (anchorRight) {
			//style.right = x + "px";
		}
		else {
			style.left = x + "px";
		}
		
		if (centerVertically) {
			style.top = "50%";
			transform.push("translateY(-50%)");
			style.transformOrigin = "0 0";
		}
		else if (anchorTop && anchorBottom) {
			style.top = y + "px";
		}
		else if (anchorBottom) {
			//style.bottom = y + "px";
		}
		else {
			style.top = y + "px";
		}
		if (transform.length) {
			style.transform = transform.join(" ");
		}
		self.currentOverlay = overlay;
		self.lastTrigger = button;
	}
	self.goBack = function() {
		if (self.currentOverlay) {
			self.removeOverlay();
		}
		else if (self.lastView) {
			self.goToView(self.lastView.id);
		}
	}
	self.removeOverlay = function(animate) {
		var overlay = self.currentOverlay;
		animate = animate===false ? false : true;
		if (overlay) {
			var style = overlay.style;
			
			if (style.animation && self.supportAnimations && animate) {
				self.reverseAnimation(overlay, true);
				var duration = self.getAnimationDuration(style.animation, true);
		
				setTimeout(function() {
					self.setElementAnimation(overlay, null);
					self.hideOverlay(overlay);
					self.currentOverlay = null;
				}, duration);
			}
			else {
				self.setElementAnimation(overlay, null);
				self.hideOverlay(overlay);
				self.currentOverlay = null;
			}
		}
	}
	/**
	 * Reverse the animation and hide after
	 * @param {Object} target element with animation
	 * @param {Boolean} hide hide after animation ends
	 */
	self.reverseAnimation = function(target, hide) {
		var lastAnimation = null;
		var style = target.style;
		style.animationPlayState = "paused";
		lastAnimation = style.animation;
		style.animation = null;
		style.animationPlayState = "paused";
		if (hide) {
			//target.addEventListener("animationend", self.animationEndHideHandler);
	
			var duration = self.getAnimationDuration(lastAnimation, true);
			var isOverlay = self.isOverlay(target);
	
			setTimeout(function() {
				self.setElementAnimation(target, null);
				if (isOverlay) {
					self.hideOverlay(target);
				}
				else {
					self.hideView(target);
				}
			}, duration);
		}
		setTimeout(function() {
			style.animation = lastAnimation;
			style.animationPlayState = "paused";
			style.animationDirection = "reverse";
			style.animationPlayState = "running";
		}, 30);
	}
	self.animationEndHandler = function(event) {
		var target = event.currentTarget;
		self.dispatchEvent(new Event(event.type));
	}
	self.isOverlay = function(view) {
		var result = view ? self.getViewPreferenceBoolean(view, self.prefix + "is-overlay") : false;
		return result;
	}
	self.animationEndHideHandler = function(event) {
		var target = event.currentTarget;
		self.setViewVariables(null, target);
		self.hideView(target);
		target.removeEventListener("animationend", self.animationEndHideHandler);
	}
	self.animationEndShowHandler = function(event) {
		var target = event.currentTarget;
		target.removeEventListener("animationend", self.animationEndShowHandler);
	}
	self.setViewOptions = function(view) {
		if (view) {
			self.minimumScale = self.getViewPreferenceValue(view, self.prefix + "minimum-scale");
			self.maximumScale = self.getViewPreferenceValue(view, self.prefix + "maximum-scale");
			self.scaleViewsToFit = self.getViewPreferenceBoolean(view, self.prefix + "scale-to-fit");
			self.scaleToFitType = self.getViewPreferenceValue(view, self.prefix + "scale-to-fit-type");
			self.scaleToFitOnDoubleClick = self.getViewPreferenceBoolean(view, self.prefix + "scale-on-double-click");
			self.actualSizeOnDoubleClick = self.getViewPreferenceBoolean(view, self.prefix + "actual-size-on-double-click");
			self.scaleViewsOnResize = self.getViewPreferenceBoolean(view, self.prefix + "scale-on-resize");
			self.enableScaleUp = self.getViewPreferenceBoolean(view, self.prefix + "enable-scale-up");
			self.centerHorizontally = self.getViewPreferenceBoolean(view, self.prefix + "center-horizontally");
			self.centerVertically = self.getViewPreferenceBoolean(view, self.prefix + "center-vertically");
			self.navigationOnKeypress = self.getViewPreferenceBoolean(view, self.prefix + "navigate-on-keypress");
			self.showViewName = self.getViewPreferenceBoolean(view, self.prefix + "show-view-name");
			self.refreshPageForChanges = self.getViewPreferenceBoolean(view, self.prefix + "refresh-for-changes");
			self.refreshPageForChangesInterval = self.getViewPreferenceValue(view, self.prefix + "refresh-interval");
			self.showNavigationControls = self.getViewPreferenceBoolean(view, self.prefix + "show-navigation-controls");
			self.scaleViewSlider = self.getViewPreferenceBoolean(view, self.prefix + "show-scale-controls");
			self.enableDeepLinking = self.getViewPreferenceBoolean(view, self.prefix + "enable-deep-linking");
			self.singlePageApplication = self.getViewPreferenceBoolean(view, self.prefix + "application");
			self.showByMediaQuery = self.getViewPreferenceBoolean(view, self.prefix + "show-by-media-query");
			self.showUpdateNotification = document.cookie!="" ? document.cookie.indexOf(self.pageRefreshedName)!=-1 : false;
			self.imageComparisonDuration = self.getViewPreferenceValue(view, self.prefix + "image-comparison-duration");
			self.supportAnimations = self.getViewPreferenceBoolean(view, self.prefix + "enable-animations", true);
			if (self.scaleViewsToFit) {
				var newScaleValue = self.scaleViewToFit(view);
				
				if (newScaleValue<0) {
					setTimeout(self.scaleViewToFit, 500, view);
				}
			}
			else {
				self.viewScale = self.getViewScaleValue(view);
				self.viewToFitWidthScale = self.getViewFitToViewportWidthScale(view, self.enableScaleUp)
				self.viewToFitHeightScale = self.getViewFitToViewportScale(view, self.enableScaleUp);
				self.updateSliderValue(self.viewScale);
			}
			if (self.imageComparisonDuration!=null) {
				// todo
			}
			if (self.refreshPageForChangesInterval!=null) {
				self.refreshDuration = Number(self.refreshPageForChangesInterval);
			}
		}
	}
	self.previousView = function(event) {
		var rules = self.getStylesheetRules();
		var view = self.getVisibleView()
		var index = view ? self.getViewIndex(view) : -1;
		var prevQueryIndex = index!=-1 ? index-1 : self.currentQuery.index-1;
		var queryIndex = 0;
		var numberOfRules = rules!=null ? rules.length : 0;
		if (event) {
			event.stopImmediatePropagation();
		}
		if (prevQueryIndex<0) {
			return;
		}
		// loop through rules and hide media queries except selected
		for (var i=0;i<numberOfRules;i++) {
			var rule = rules[i];
			
			if (rule.media!=null) {
				if (queryIndex==prevQueryIndex) {
					self.currentQuery.mediaText = rule.conditionText;
					self.currentQuery.index = prevQueryIndex;
					self.currentQuery.rule = rule;
					self.enableMediaQuery(rule);
					self.updateViewLabel();
					self.updateURL();
					self.dispatchViewChange();
				}
				else {
					self.disableMediaQuery(rule);
				}
				queryIndex++;
			}
		}
	}
	self.nextView = function(event) {
		var rules = self.getStylesheetRules();
		var view = self.getVisibleView();
		var index = view ? self.getViewIndex(view) : -1;
		var nextQueryIndex = index!=-1 ? index+1 : self.currentQuery.index+1;
		var queryIndex = 0;
		var numberOfRules = rules!=null ? rules.length : 0;
		var numberOfMediaQueries = self.getNumberOfMediaRules();
		if (event) {
			event.stopImmediatePropagation();
		}
		if (nextQueryIndex>=numberOfMediaQueries) {
			return;
		}
		// loop through rules and hide media queries except selected
		for (var i=0;i<numberOfRules;i++) {
			var rule = rules[i];
			
			if (rule.media!=null) {
				if (queryIndex==nextQueryIndex) {
					self.currentQuery.mediaText = rule.conditionText;
					self.currentQuery.index = nextQueryIndex;
					self.currentQuery.rule = rule;
					self.enableMediaQuery(rule);
					self.updateViewLabel();
					self.updateURL();
					self.dispatchViewChange();
				}
				else {
					self.disableMediaQuery(rule);
				}
				queryIndex++;
			}
		}
	}
	/**
	 * Enables a view via media query
	 */
	self.enableMediaQuery = function(rule) {
		try {
			rule.media.mediaText = self.inclusionQuery;
		}
		catch(error) {
			//self.log(error);
			rule.conditionText = self.inclusionQuery;
		}
	}
	self.disableMediaQuery = function(rule) {
		try {
			rule.media.mediaText = self.exclusionQuery;
		}
		catch(error) {
			rule.conditionText = self.exclusionQuery;
		}
	}
	self.dispatchViewChange = function() {
		try {
			var event = new Event(self.NAVIGATION_CHANGE);
			window.dispatchEvent(event);
		}
		catch (error) {
			// In IE 11: Object doesn't support this action
		}
	}
	self.getNumberOfMediaRules = function() {
		var rules = self.getStylesheetRules();
		var numberOfRules = rules ? rules.length : 0;
		var numberOfQueries = 0;
		for (var i=0;i<numberOfRules;i++) {
			if (rules[i].media!=null) { numberOfQueries++; }
		}
		
		return numberOfQueries;
	}
	/////////////////////////////////////////
	// VIEW SCALE 
	/////////////////////////////////////////
	self.sliderChangeHandler = function(event) {
		var value = self.getShortNumber(event.currentTarget.value/100);
		var view = self.getVisibleView();
		self.setViewScaleValue(view, false, value, true);
	}
	self.updateSliderValue = function(scale) {
		var slider = document.getElementById(self.viewScaleSliderId);
		var tooltip = parseInt(scale * 100 + "") + "%";
		var inputType;
		var inputValue;
		
		if (slider) {
			inputValue = self.getShortNumber(scale * 100);
			if (inputValue!=slider["value"]) {
				slider["value"] = inputValue;
			}
			inputType = slider.getAttributeNS(null, "type");
			if (inputType!="range") {
				// input range is not supported
				slider.style.display = "none";
			}
			self.setTooltip(slider, tooltip);
		}
	}
	self.viewChangeHandler = function(event) {
		var view = self.getVisibleView();
		var matrix = view ? getComputedStyle(view).transform : null;
		
		if (matrix) {
			self.viewScale = self.getViewScaleValue(view);
			
			var scaleNeededToFit = self.getViewFitToViewportScale(view);
			var isViewLargerThanViewport = scaleNeededToFit<1;
			
			// scale large view to fit if scale to fit is enabled
			if (self.scaleViewsToFit) {
				self.scaleViewToFit(view);
			}
			else {
				self.updateSliderValue(self.viewScale);
			}
		}
	}
	self.getViewScaleValue = function(view) {
		var matrix = getComputedStyle(view).transform;
		if (matrix) {
			var matrixArray = matrix.replace("matrix(", "").split(",");
			var scaleX = parseFloat(matrixArray[0]);
			var scaleY = parseFloat(matrixArray[3]);
			var scale = Math.min(scaleX, scaleY);
		}
		return scale;
	}
	/**
	 * Scales view to scale. 
	 * @param {Object} view view to scale. views are in views array
	 * @param {Boolean} scaleToFit set to true to scale to fit. set false to use desired scale value
	 * @param {Number} desiredScale scale to define. not used if scale to fit is false
	 * @param {Boolean} isSliderChange indicates if slider is callee
	 */
	self.setViewScaleValue = function(view, scaleToFit, desiredScale, isSliderChange) {
		var enableScaleUp = self.enableScaleUp;
		var scaleToFitType = self.scaleToFitType;
		var minimumScale = self.minimumScale;
		var maximumScale = self.maximumScale;
		var hasMinimumScale = !isNaN(minimumScale) && minimumScale!="";
		var hasMaximumScale = !isNaN(maximumScale) && maximumScale!="";
		var scaleNeededToFit = self.getViewFitToViewportScale(view, enableScaleUp);
		var scaleNeededToFitWidth = self.getViewFitToViewportWidthScale(view, enableScaleUp);
		var scaleNeededToFitHeight = self.getViewFitToViewportHeightScale(view, enableScaleUp);
		var scaleToFitFull = self.getViewFitToViewportScale(view, true);
		var scaleToFitFullWidth = self.getViewFitToViewportWidthScale(view, true);
		var scaleToFitFullHeight = self.getViewFitToViewportHeightScale(view, true);
		var scaleToWidth = scaleToFitType=="width";
		var scaleToHeight = scaleToFitType=="height";
		var shrunkToFit = false;
		var topPosition = null;
		var leftPosition = null;
		var translateY = null;
		var translateX = null;
		var transformValue = "";
		var canCenterVertically = true;
		var canCenterHorizontally = true;
		var style = view.style;
		if (view && self.viewsDictionary[view.id] && self.viewsDictionary[view.id].styleDeclaration) {
			style = self.viewsDictionary[view.id].styleDeclaration.style;
		}
		if (scaleToFit && isSliderChange!=true) {
			if (scaleToFitType=="fit" || scaleToFitType=="") {
				desiredScale = scaleNeededToFit;
			}
			else if (scaleToFitType=="width") {
				desiredScale = scaleNeededToFitWidth;
			}
			else if (scaleToFitType=="height") {
				desiredScale = scaleNeededToFitHeight;
			}
		}
		else {
			if (isNaN(desiredScale)) {
				desiredScale = 1;
			}
		}
		self.updateSliderValue(desiredScale);
		
		// scale to fit width
		if (scaleToWidth && scaleToHeight==false) {
			canCenterVertically = scaleNeededToFitHeight>=scaleNeededToFitWidth;
			canCenterHorizontally = scaleNeededToFitWidth>=1 && enableScaleUp==false;
			if (isSliderChange) {
				canCenterHorizontally = desiredScale<scaleToFitFullWidth;
			}
			else if (scaleToFit) {
				desiredScale = scaleNeededToFitWidth;
			}
			if (hasMinimumScale) {
				desiredScale = Math.max(desiredScale, Number(minimumScale));
			}
			if (hasMaximumScale) {
				desiredScale = Math.min(desiredScale, Number(maximumScale));
			}
			desiredScale = self.getShortNumber(desiredScale);
			canCenterHorizontally = self.canCenterHorizontally(view, "width", enableScaleUp, desiredScale, minimumScale, maximumScale);
			canCenterVertically = self.canCenterVertically(view, "width", enableScaleUp, desiredScale, minimumScale, maximumScale);
			if (desiredScale>1 && (enableScaleUp || isSliderChange)) {
				transformValue = "scale(" + desiredScale + ")";
			}
			else if (desiredScale>=1 && enableScaleUp==false) {
				transformValue = "scale(" + 1 + ")";
			}
			else {
				transformValue = "scale(" + desiredScale + ")";
			}
			if (self.centerVertically) {
				if (canCenterVertically) {
					translateY = "-50%";
					topPosition = "50%";
				}
				else {
					translateY = "0";
					topPosition = "0";
				}
				
				if (style.top != topPosition) {
					style.top = topPosition + "";
				}
				if (canCenterVertically) {
					transformValue += " translateY(" + translateY+ ")";
				}
			}
			if (self.centerHorizontally) {
				if (canCenterHorizontally) {
					translateX = "-50%";
					leftPosition = "50%";
				}
				else {
					translateX = "0";
					leftPosition = "0";
				}
				if (style.left != leftPosition) {
					style.left = leftPosition + "";
				}
				if (canCenterHorizontally) {
					transformValue += " translateX(" + translateX+ ")";
				}
			}
			style.transformOrigin = "0 0";
			style.transform = transformValue;
			self.viewScale = desiredScale;
			self.viewToFitWidthScale = scaleNeededToFitWidth;
			self.viewToFitHeightScale = scaleNeededToFitHeight;
			self.viewLeft = leftPosition;
			self.viewTop = topPosition;
			return desiredScale;
		}
		// scale to fit height
		if (scaleToHeight && scaleToWidth==false) {
			//canCenterVertically = scaleNeededToFitHeight>=scaleNeededToFitWidth;
			//canCenterHorizontally = scaleNeededToFitHeight<=scaleNeededToFitWidth && enableScaleUp==false;
			canCenterVertically = scaleNeededToFitHeight>=scaleNeededToFitWidth;
			canCenterHorizontally = scaleNeededToFitWidth>=1 && enableScaleUp==false;
			
			if (isSliderChange) {
				canCenterHorizontally = desiredScale<scaleToFitFullHeight;
			}
			else if (scaleToFit) {
				desiredScale = scaleNeededToFitHeight;
			}
			if (hasMinimumScale) {
				desiredScale = Math.max(desiredScale, Number(minimumScale));
			}
			if (hasMaximumScale) {
				desiredScale = Math.min(desiredScale, Number(maximumScale));
				//canCenterVertically = desiredScale>=scaleNeededToFitHeight && enableScaleUp==false;
			}
			desiredScale = self.getShortNumber(desiredScale);
			canCenterHorizontally = self.canCenterHorizontally(view, "height", enableScaleUp, desiredScale, minimumScale, maximumScale);
			canCenterVertically = self.canCenterVertically(view, "height", enableScaleUp, desiredScale, minimumScale, maximumScale);
			if (desiredScale>1 && (enableScaleUp || isSliderChange)) {
				transformValue = "scale(" + desiredScale + ")";
			}
			else if (desiredScale>=1 && enableScaleUp==false) {
				transformValue = "scale(" + 1 + ")";
			}
			else {
				transformValue = "scale(" + desiredScale + ")";
			}
			if (self.centerHorizontally) {
				if (canCenterHorizontally) {
					translateX = "-50%";
					leftPosition = "50%";
				}
				else {
					translateX = "0";
					leftPosition = "0";
				}
				if (style.left != leftPosition) {
					style.left = leftPosition + "";
				}
				if (canCenterHorizontally) {
					transformValue += " translateX(" + translateX+ ")";
				}
			}
			if (self.centerVertically) {
				if (canCenterVertically) {
					translateY = "-50%";
					topPosition = "50%";
				}
				else {
					translateY = "0";
					topPosition = "0";
				}
				
				if (style.top != topPosition) {
					style.top = topPosition + "";
				}
				if (canCenterVertically) {
					transformValue += " translateY(" + translateY+ ")";
				}
			}
			style.transformOrigin = "0 0";
			style.transform = transformValue;
			self.viewScale = desiredScale;
			self.viewToFitWidthScale = scaleNeededToFitWidth;
			self.viewToFitHeightScale = scaleNeededToFitHeight;
			self.viewLeft = leftPosition;
			self.viewTop = topPosition;
			return scaleNeededToFitHeight;
		}
		if (scaleToFitType=="fit") {
			//canCenterVertically = scaleNeededToFitHeight>=scaleNeededToFitWidth;
			//canCenterHorizontally = scaleNeededToFitWidth>=scaleNeededToFitHeight;
			canCenterVertically = scaleNeededToFitHeight>=scaleNeededToFit;
			canCenterHorizontally = scaleNeededToFitWidth>=scaleNeededToFit;
			if (hasMinimumScale) {
				desiredScale = Math.max(desiredScale, Number(minimumScale));
			}
			desiredScale = self.getShortNumber(desiredScale);
			if (isSliderChange || scaleToFit==false) {
				canCenterVertically = scaleToFitFullHeight>=desiredScale;
				canCenterHorizontally = desiredScale<scaleToFitFullWidth;
			}
			else if (scaleToFit) {
				desiredScale = scaleNeededToFit;
			}
			transformValue = "scale(" + desiredScale + ")";
			//canCenterHorizontally = self.canCenterHorizontally(view, "fit", false, desiredScale);
			//canCenterVertically = self.canCenterVertically(view, "fit", false, desiredScale);
			
			if (self.centerVertically) {
				if (canCenterVertically) {
					translateY = "-50%";
					topPosition = "50%";
				}
				else {
					translateY = "0";
					topPosition = "0";
				}
				
				if (style.top != topPosition) {
					style.top = topPosition + "";
				}
				if (canCenterVertically) {
					transformValue += " translateY(" + translateY+ ")";
				}
			}
			if (self.centerHorizontally) {
				if (canCenterHorizontally) {
					translateX = "-50%";
					leftPosition = "50%";
				}
				else {
					translateX = "0";
					leftPosition = "0";
				}
				if (style.left != leftPosition) {
					style.left = leftPosition + "";
				}
				if (canCenterHorizontally) {
					transformValue += " translateX(" + translateX+ ")";
				}
			}
			style.transformOrigin = "0 0";
			style.transform = transformValue;
			self.viewScale = desiredScale;
			self.viewToFitWidthScale = scaleNeededToFitWidth;
			self.viewToFitHeightScale = scaleNeededToFitHeight;
			self.viewLeft = leftPosition;
			self.viewTop = topPosition;
			self.updateSliderValue(desiredScale);
			
			return desiredScale;
		}
		if (scaleToFitType=="default" || scaleToFitType=="") {
			desiredScale = 1;
			if (hasMinimumScale) {
				desiredScale = Math.max(desiredScale, Number(minimumScale));
			}
			if (hasMaximumScale) {
				desiredScale = Math.min(desiredScale, Number(maximumScale));
			}
			canCenterHorizontally = self.canCenterHorizontally(view, "none", false, desiredScale, minimumScale, maximumScale);
			canCenterVertically = self.canCenterVertically(view, "none", false, desiredScale, minimumScale, maximumScale);
			if (self.centerVertically) {
				if (canCenterVertically) {
					translateY = "-50%";
					topPosition = "50%";
				}
				else {
					translateY = "0";
					topPosition = "0";
				}
				
				if (style.top != topPosition) {
					style.top = topPosition + "";
				}
				if (canCenterVertically) {
					transformValue += " translateY(" + translateY+ ")";
				}
			}
			if (self.centerHorizontally) {
				if (canCenterHorizontally) {
					translateX = "-50%";
					leftPosition = "50%";
				}
				else {
					translateX = "0";
					leftPosition = "0";
				}
				if (style.left != leftPosition) {
					style.left = leftPosition + "";
				}
				if (canCenterHorizontally) {
					transformValue += " translateX(" + translateX+ ")";
				}
				else {
					transformValue += " translateX(" + 0 + ")";
				}
			}
			style.transformOrigin = "0 0";
			style.transform = transformValue;
			self.viewScale = desiredScale;
			self.viewToFitWidthScale = scaleNeededToFitWidth;
			self.viewToFitHeightScale = scaleNeededToFitHeight;
			self.viewLeft = leftPosition;
			self.viewTop = topPosition;
			self.updateSliderValue(desiredScale);
			
			return desiredScale;
		}
	}
	/**
	 * Returns true if view can be centered horizontally
	 * @param {HTMLElement} view view
	 * @param {String} type type of scaling - width, height, all, none
	 * @param {Boolean} scaleUp if scale up enabled 
	 * @param {Number} scale target scale value 
	 */
	self.canCenterHorizontally = function(view, type, scaleUp, scale, minimumScale, maximumScale) {
		var scaleNeededToFit = self.getViewFitToViewportScale(view, scaleUp);
		var scaleNeededToFitHeight = self.getViewFitToViewportHeightScale(view, scaleUp);
		var scaleNeededToFitWidth = self.getViewFitToViewportWidthScale(view, scaleUp);
		var canCenter = false;
		var minScale;
		type = type==null ? "none" : type;
		scale = scale==null ? scale : scaleNeededToFitWidth;
		scaleUp = scaleUp == null ? false : scaleUp;
		if (type=="width") {
	
			if (scaleUp && maximumScale==null) {
				canCenter = false;
			}
			else if (scaleNeededToFitWidth>=1) {
				canCenter = true;
			}
		}
		else if (type=="height") {
			minScale = Math.min(1, scaleNeededToFitHeight);
			if (minimumScale!="" && maximumScale!="") {
				minScale = Math.max(minimumScale, Math.min(maximumScale, scaleNeededToFitHeight));
			}
			else {
				if (minimumScale!="") {
					minScale = Math.max(minimumScale, scaleNeededToFitHeight);
				}
				if (maximumScale!="") {
					minScale = Math.max(minimumScale, Math.min(maximumScale, scaleNeededToFitHeight));
				}
			}
	
			if (scaleUp && maximumScale=="") {
				canCenter = false;
			}
			else if (scaleNeededToFitWidth>=minScale) {
				canCenter = true;
			}
		}
		else if (type=="fit") {
			canCenter = scaleNeededToFitWidth>=scaleNeededToFit;
		}
		else {
			if (scaleUp) {
				canCenter = false;
			}
			else if (scaleNeededToFitWidth>=1) {
				canCenter = true;
			}
		}
		self.horizontalScrollbarsNeeded = canCenter;
		
		return canCenter;
	}
	/**
	 * Returns true if view can be centered horizontally
	 * @param {HTMLElement} view view to scale
	 * @param {String} type type of scaling
	 * @param {Boolean} scaleUp if scale up enabled 
	 * @param {Number} scale target scale value 
	 */
	self.canCenterVertically = function(view, type, scaleUp, scale, minimumScale, maximumScale) {
		var scaleNeededToFit = self.getViewFitToViewportScale(view, scaleUp);
		var scaleNeededToFitWidth = self.getViewFitToViewportWidthScale(view, scaleUp);
		var scaleNeededToFitHeight = self.getViewFitToViewportHeightScale(view, scaleUp);
		var canCenter = false;
		var minScale;
		type = type==null ? "none" : type;
		scale = scale==null ? 1 : scale;
		scaleUp = scaleUp == null ? false : scaleUp;
	
		if (type=="width") {
			canCenter = scaleNeededToFitHeight>=scaleNeededToFitWidth;
		}
		else if (type=="height") {
			minScale = Math.max(minimumScale, Math.min(maximumScale, scaleNeededToFit));
			canCenter = scaleNeededToFitHeight>=minScale;
		}
		else if (type=="fit") {
			canCenter = scaleNeededToFitHeight>=scaleNeededToFit;
		}
		else {
			if (scaleUp) {
				canCenter = false;
			}
			else if (scaleNeededToFitHeight>=1) {
				canCenter = true;
			}
		}
		self.verticalScrollbarsNeeded = canCenter;
		
		return canCenter;
	}
	self.getViewFitToViewportScale = function(view, scaleUp) {
		var enableScaleUp = scaleUp;
		var availableWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
		var availableHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
		var elementWidth = parseFloat(getComputedStyle(view, "style").width);
		var elementHeight = parseFloat(getComputedStyle(view, "style").height);
		var newScale = 1;
		// if element is not added to the document computed values are NaN
		if (isNaN(elementWidth) || isNaN(elementHeight)) {
			return newScale;
		}
		availableWidth -= self.horizontalPadding;
		availableHeight -= self.verticalPadding;
		if (enableScaleUp) {
			newScale = Math.min(availableHeight/elementHeight, availableWidth/elementWidth);
		}
		else if (elementWidth > availableWidth || elementHeight > availableHeight) {
			newScale = Math.min(availableHeight/elementHeight, availableWidth/elementWidth);
		}
		
		return newScale;
	}
	self.getViewFitToViewportWidthScale = function(view, scaleUp) {
		// need to get browser viewport width when element
		var isParentWindow = view && view.parentNode && view.parentNode===document.body;
		var enableScaleUp = scaleUp;
		var availableWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
		var elementWidth = parseFloat(getComputedStyle(view, "style").width);
		var newScale = 1;
		// if element is not added to the document computed values are NaN
		if (isNaN(elementWidth)) {
			return newScale;
		}
		availableWidth -= self.horizontalPadding;
		if (enableScaleUp) {
			newScale = availableWidth/elementWidth;
		}
		else if (elementWidth > availableWidth) {
			newScale = availableWidth/elementWidth;
		}
		
		return newScale;
	}
	self.getViewFitToViewportHeightScale = function(view, scaleUp) {
		var enableScaleUp = scaleUp;
		var availableHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
		var elementHeight = parseFloat(getComputedStyle(view, "style").height);
		var newScale = 1;
		// if element is not added to the document computed values are NaN
		if (isNaN(elementHeight)) {
			return newScale;
		}
		availableHeight -= self.verticalPadding;
		if (enableScaleUp) {
			newScale = availableHeight/elementHeight;
		}
		else if (elementHeight > availableHeight) {
			newScale = availableHeight/elementHeight;
		}
		
		return newScale;
	}
	self.keypressHandler = function(event) {
		var rightKey = 39;
		var leftKey = 37;
		
		// listen for both events 
		if (event.type=="keypress") {
			window.removeEventListener("keyup", self.keypressHandler);
		}
		else {
			window.removeEventListener("keypress", self.keypressHandler);
		}
		
		if (self.showNavigationControls) {
			if (self.navigationOnKeypress) {
				if (event.keyCode==rightKey) {
					self.nextView();
				}
				if (event.keyCode==leftKey) {
					self.previousView();
				}
			}
		}
		else if (self.navigationOnKeypress) {
			if (event.keyCode==rightKey) {
				self.nextView();
			}
			if (event.keyCode==leftKey) {
				self.previousView();
			}
		}
	}
	///////////////////////////////////
	// GENERAL FUNCTIONS
	///////////////////////////////////
	self.getViewById = function(id) {
		id = id ? id.replace("#", "") : "";
		var view = self.viewIds.indexOf(id)!=-1 && self.getElement(id);
		return view;
	}
	self.getViewIds = function() {
		var viewIds = self.getViewPreferenceValue(document.body, self.prefix + "view-ids");
		var viewId = null;
		viewIds = viewIds!=null && viewIds!="" ? viewIds.split(",") : [];
		if (viewIds.length==0) {
			viewId = self.getViewPreferenceValue(document.body, self.prefix + "view-id");
			viewIds = viewId ? [viewId] : [];
		}
		return viewIds;
	}
	self.getInitialViewId = function() {
		var viewId = self.getViewPreferenceValue(document.body, self.prefix + "view-id");
		return viewId;
	}
	self.getApplicationStylesheet = function() {
		var stylesheetId = self.getViewPreferenceValue(document.body, self.prefix + "stylesheet-id");
		self.applicationStylesheet = document.getElementById("applicationStylesheet");
		return self.applicationStylesheet.sheet;
	}
	self.getVisibleView = function() {
		var viewIds = self.getViewIds();
		
		for (var i=0;i<viewIds.length;i++) {
			var viewId = viewIds[i].replace(/[\#?\.?](.*)/, "$" + "1");
			var view = self.getElement(viewId);
			var postName = "_Class";
			if (view==null && viewId && viewId.lastIndexOf(postName)!=-1) {
				view = self.getElement(viewId.replace(postName, ""));
			}
			
			if (view) {
				var display = getComputedStyle(view).display;
		
				if (display=="block" || display=="flex") {
					return view;
				}
			}
		}
		return null;
	}
	self.getVisibleViews = function() {
		var viewIds = self.getViewIds();
		var views = [];
		
		for (var i=0;i<viewIds.length;i++) {
			var viewId = viewIds[i].replace(/[\#?\.?](.*)/, "$" + "1");
			var view = self.getElement(viewId);
			var postName = "_Class";
			if (view==null && viewId && viewId.lastIndexOf(postName)!=-1) {
				view = self.getElement(viewId.replace(postName, ""));
			}
			
			if (view) {
				var display = getComputedStyle(view).display;
				
				if (display=="none") {
					continue;
				}
				if (display=="block" || display=="flex") {
					views.push(view);
				}
			}
		}
		return views;
	}
	self.getStateNameByViewId = function(id) {
		var state = self.viewsDictionary[id];
		return state && state.stateName;
	}
	self.getMatchingViews = function(ids) {
		var views = self.addedViews.slice(0);
		var matchingViews = [];
		if (self.showByMediaQuery) {
			for (let index = 0; index < views.length; index++) {
				var viewId = views[index];
				var state = self.viewsDictionary[viewId];
				var rule = state && state.rule; 
				var matchResults = window.matchMedia(rule.conditionText);
				var view = self.views[viewId];
				
				if (matchResults.matches) {
					if (ids==true) {
						matchingViews.push(viewId);
					}
					else {
						matchingViews.push(view);
					}
				}
			}
		}
		return matchingViews;
	}
	self.ruleMatchesQuery = function(rule) {
		var result = window.matchMedia(rule.conditionText);
		return result.matches;
	}
	self.getViewsByStateName = function(stateName, matchQuery) {
		var views = self.addedViews.slice(0);
		var matchingViews = [];
		if (self.showByMediaQuery) {
			// find state name
			for (let index = 0; index < views.length; index++) {
				var viewId = views[index];
				var state = self.viewsDictionary[viewId];
				var rule = state.rule;
				var mediaRule = state.mediaRule;
				var view = self.views[viewId];
				var viewStateName = self.getStyleRuleValue(mediaRule, self.STATE_NAME, state);
				var stateFoundAtt = view.getAttribute(self.STATE_NAME)==state;
				var matchesResults = false;
				
				if (viewStateName==stateName) {
					if (matchQuery) {
						matchesResults = self.ruleMatchesQuery(rule);
						if (matchesResults) {
							matchingViews.push(view);
						}
					}
					else {
						matchingViews.push(view);
					}
				}
			}
		}
		return matchingViews;
	}
	self.getInitialView = function() {
		var viewId = self.getInitialViewId();
		viewId = viewId.replace(/[\#?\.?](.*)/, "$" + "1");
		var view = self.getElement(viewId);
		var postName = "_Class";
		if (view==null && viewId && viewId.lastIndexOf(postName)!=-1) {
			view = self.getElement(viewId.replace(postName, ""));
		}
		return view;
	}
	self.getViewIndex = function(view) {
		var viewIds = self.getViewIds();
		var id = view ? view.id : null;
		var index = id && viewIds ? viewIds.indexOf(id) : -1;
		return index;
	}
	self.syncronizeViewToURL = function() {
		var fragment = self.getHashFragment();
		if (self.showByMediaQuery) {
			var stateName = fragment;
			
			if (stateName==null || stateName=="") {
				var initialView = self.getInitialView();
				stateName = initialView ? self.getStateNameByViewId(initialView.id) : null;
			}
			
			self.showMediaQueryViewsByState(stateName);
			return;
		}
		var view = self.getViewById(fragment);
		var index = view ? self.getViewIndex(view) : 0;
		if (index==-1) index = 0;
		var currentView = self.hideViews(index);
		if (self.supportsPopState && currentView) {
			if (fragment==null) {
				window.history.replaceState({name:currentView.id}, null, "#"+ currentView.id);
			}
			else {
				window.history.pushState({name:currentView.id}, null, "#"+ currentView.id);
			}
		}
		
		self.setViewVariables(view);
		return view;
	}
	/**
	 * Set the currentView or currentOverlay properties and set the lastView or lastOverlay properties
	 */
	self.setViewVariables = function(view, overlay, parentView) {
		if (view) {
			if (self.currentView) {
				self.lastView = self.currentView;
			}
			self.currentView = view;
		}
		if (overlay) {
			if (self.currentOverlay) {
				self.lastOverlay = self.currentOverlay;
			}
			self.currentOverlay = overlay;
		}
	}
	self.getViewPreferenceBoolean = function(view, property, altValue) {
		var computedStyle = window.getComputedStyle(view);
		var value = computedStyle.getPropertyValue(property);
		var type = typeof value;
		
		if (value=="true" || (type=="string" && value.indexOf("true")!=-1)) {
			return true;
		}
		else if (value=="" && arguments.length==3) {
			return altValue;
		}
		return false;
	}
	self.getViewPreferenceValue = function(view, property, defaultValue) {
		var value = window.getComputedStyle(view).getPropertyValue(property);
		if (value===undefined) {
			return defaultValue;
		}
		
		value = value.replace(/^[\s\"]*/, "");
		value = value.replace(/[\s\"]*$/, "");
		value = value.replace(/^[\s"]*(.*?)[\s"]*$/, function (match, capture) { 
			return capture;
		});
		return value;
	}
	self.getStyleRuleValue = function(cssRule, property) {
		var value = cssRule ? cssRule.style.getPropertyValue(property) : null;
		if (value===undefined) {
			return null;
		}
		
		value = value.replace(/^[\s\"]*/, "");
		value = value.replace(/[\s\"]*$/, "");
		value = value.replace(/^[\s"]*(.*?)[\s"]*$/, function (match, capture) { 
			return capture;
		});
		return value;
	}
	/**
	 * Get the first defined value of property. Returns empty string if not defined
	 * @param {String} id id of element
	 * @param {String} property 
	 */
	self.getCSSPropertyValueForElement = function(id, property) {
		var styleSheets = document.styleSheets;
		var numOfStylesheets = styleSheets.length;
		var values = [];
		var selectorIDText = "#" + id;
		var selectorClassText = "." + id + "_Class";
		var value;
		for(var i=0;i<numOfStylesheets;i++) {
			var styleSheet = styleSheets[i];
			var cssRules = self.getStylesheetRules(styleSheet);
			var numOfCSSRules = cssRules.length;
			var cssRule;
			
			for (var j=0;j<numOfCSSRules;j++) {
				cssRule = cssRules[j];
				
				if (cssRule.media) {
					var mediaRules = cssRule.cssRules;
					var numOfMediaRules = mediaRules ? mediaRules.length : 0;
					
					for(var k=0;k<numOfMediaRules;k++) {
						var mediaRule = mediaRules[k];
						
						if (mediaRule.selectorText==selectorIDText || mediaRule.selectorText==selectorClassText) {
							
							if (mediaRule.style && mediaRule.style.getPropertyValue(property)!="") {
								value = mediaRule.style.getPropertyValue(property);
								values.push(value);
							}
						}
					}
				}
				else {
					if (cssRule.selectorText==selectorIDText || cssRule.selectorText==selectorClassText) {
						if (cssRule.style && cssRule.style.getPropertyValue(property)!="") {
							value = cssRule.style.getPropertyValue(property);
							values.push(value);
						}
					}
				}
			}
		}
		return values.pop();
	}
	self.getIsStyleDefined = function(id, property) {
		var value = self.getCSSPropertyValueForElement(id, property);
		return value!==undefined && value!="";
	}
	self.collectViews = function() {
		var viewIds = self.getViewIds();
		for (let index = 0; index < viewIds.length; index++) {
			const id = viewIds[index];
			const view = self.getElement(id);
			self.views[id] = view;
		}
		
		self.viewIds = viewIds;
	}
	self.collectOverlays = function() {
		var viewIds = self.getViewIds();
		var ids = [];
		for (let index = 0; index < viewIds.length; index++) {
			const id = viewIds[index];
			const view = self.getViewById(id);
			const isOverlay = view && self.isOverlay(view);
			
			if (isOverlay) {
				ids.push(id);
				self.overlays[id] = view;
			}
		}
		
		self.overlayIds = ids;
	}
	self.collectMediaQueries = function() {
		var viewIds = self.getViewIds();
		var styleSheet = self.getApplicationStylesheet();
		var cssRules = self.getStylesheetRules(styleSheet);
		var numOfCSSRules = cssRules ? cssRules.length : 0;
		var cssRule;
		var id = viewIds.length ? viewIds[0]: ""; // single view
		var selectorIDText = "#" + id;
		var selectorClassText = "." + id + "_Class";
		var viewsNotFound = viewIds.slice();
		var viewsFound = [];
		var selectorText = null;
		var property = self.prefix + "view-id";
		var stateName = self.prefix + "state";
		var stateValue = null;
		var view = null;
		
		for (var j=0;j<numOfCSSRules;j++) {
			cssRule = cssRules[j];
			
			if (cssRule.media) {
				var mediaRules = cssRule.cssRules;
				var numOfMediaRules = mediaRules ? mediaRules.length : 0;
				var mediaViewInfoFound = false;
				var mediaId = null;
				
				for(var k=0;k<numOfMediaRules;k++) {
					var mediaRule = mediaRules[k];
					selectorText = mediaRule.selectorText;
					
					if (selectorText==".mediaViewInfo" && mediaViewInfoFound==false) {
						mediaId = self.getStyleRuleValue(mediaRule, property);
						stateValue = self.getStyleRuleValue(mediaRule, stateName);