/* Generated by Font Squirrel (http://www.fontsquirrel.com) on October 10, 2012 */

@font-face {
    font-family: 'bariol_lightlight';
    src: url('/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/bariol/bariol_light-webfont.eot');
    src: url('/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/bariol/bariol_light-webfont.eot#iefix') format('embedded-opentype'),
         url('/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/bariol/bariol_light-webfont.woff') format('woff'),
         url('/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/bariol/bariol_light-webfont.ttf') format('truetype'),
         url('/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/bariol/bariol_light-webfont.svg#bariol_lightlight') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'bariol_regularregular';
    src: url('/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/bariol/bariol_regular-webfont.eot');
    src: url('/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/bariol/bariol_regular-webfont.eot#iefix') format('embedded-opentype'),
         url('/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/bariol/bariol_regular-webfont.woff') format('woff'),
         url('/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/bariol/bariol_regular-webfont.ttf') format('truetype'),
         url('/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/bariol/bariol_regular-webfont.svg#bariol_regularregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'bariol_boldbold';
    src: url('/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/bariol/bariol_bold-webfont.eot');
    src: url('/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/bariol/bariol_bold-webfont.eot#iefix') format('embedded-opentype'),
         url('/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/bariol/bariol_bold-webfont.woff') format('woff'),
         url('/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/bariol/bariol_bold-webfont.ttf') format('truetype'),
         url('/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/bariol/bariol_bold-webfont.svg#bariol_boldbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* 
- - - - COLORS FOR REFERENCE - - - - 
*/
grey {
	background: #C6C6C6;
}
blue {
	background: #23CAE3;
}
orange {
	background: #FFAF45;
}

purple {
	background: #9A13E8;
}

/* 
- - - - RESETS AND USEFULL CLASSES - - - - 
*/
.delist,
.delist li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.left {
	float: left;
}
.right {
	float: right;
}

.inner {
	padding: 0.5em 0.75em;
}

.q-col {
	width: 25%;
}
.three-q-col {
	width: 75%;
	margin-right: -1px;
}



/* 
- - - - HTML ELEMENTS - - - - 
*/
html, body {
	background: #F5F5F5 url(/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/img/SBD_background.png);
	font-family: 'bariol_regularregular';
}
body {
	max-width: 1108px;
	margin: 0 auto;
/*	background: #000; */
	position: relative;
}

h1,h2,h3,h4,h5,h6,p {
	font-weight: normal;
	margin: 0;
}
p, span {
/*    font-family: 'bariol_lightlight'; */
    line-height: 1.2em;
}
h1,h2,h3,h4,h5,h6,p.intro {
	font-size: 28px;
}
a, a:hover, a:active, a:focus {
	outline: 0;
}


.example-info p {
	margin-bottom: 0.75em;
}
.inner p {
	margin-bottom: 0.75em;
}
.inner p:last-of-type {
	margin-bottom: 0;
}

area,
area:active,
area:focus {
outline: none;
border:0;
} 
img {
outline: none;
text-decoration: none;
border: 0;
} 


/* 
- - - - LAYOUT - - - - 
*/

.application-wrapper {
	background: #AAB1BB;
	width: 1024px;
	height: 768px;
	overflow: hidden!important;
	margin: 0 auto;
}
	.application-header {
		background: #fff;
		color: #fff;
		z-index: 999;
		position: relative;
	}
		.application-header h1, 
		.application-header p.intro,
		.logo-type {
			line-height: 1em;
			font-size: 28px;
			line-height: 30px;
		}
		.application-header h1, 
		.logo-type {	
			display: block;
		}
		a.logo-type {
			color: #fff;
			text-decoration: none;
		}
			.commercial a.logo-type:hover { 
				color: #FCD5A7;
			}
			.residential a.logo-type:hover { 
				color: #81DDF2;
			}	
	
	
	.scenario-title p.intro {
	    font-family: 'bariol_lightlight';
	}
	
	
	/* 
		Upper Nav
	*/
	.top-level-nav {
		border-bottom: 1px solid #80def3;
		background: #fff;
	}
	html.commercial .top-level-nav {
		border-color: #FCD5A7;
	}
	html.landing .top-level-nav {
		border-color: #efeeee;
	}

	html.education .top-level-nav {
		border-color: #BE8DE0;
	}
		
		.top-level-nav li {
			float: left;
			width: 33.33%;
			font-size: 18px;
			-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
			-moz-box-sizing: border-box;    /* Firefox, other Gecko */
			box-sizing: border-box;         /* Opera/IE 8+ */
		}

		.top-level-nav li.residential-tab {
				background: #23CAE3;
		}
		.top-level-nav li.commercial-tab {
				background: #FFAF45;
		}		
		.top-level-nav li.education-tab {
				background: #9A13E8;
		}
			.top-level-nav li a {
				color: #fff;
				text-decoration: none;
				display: block;
				padding: 0.25em .75em;
			}
		/* Residential State */
		html.residential .top-level-nav li.residential-tab { 
			width: 60%;
		}
		html.residential .top-level-nav li.commercial-tab { 
			width: 20%;
			background: #fff;
			border-right:1px solid #23CAE3;
		}			
			html.residential .top-level-nav li.commercial-tab a { 	
			color:  #B7B7B7;
		}
			html.residential .top-level-nav li.commercial-tab a:hover { 	
			color:  #FFAF45;
		}
		html.residential .top-level-nav li.education-tab { 
			width: 20%;
			background: #fff;
			border-right:1px solid #23CAE3;
		}			
			html.residential .top-level-nav li.education-tab a { 	
			color:  #B7B7B7;
			}

			html.residential .top-level-nav li.education-tab a:hover { 	
			color:  #9A13E8;
			}

		/* Commercial State */
		html.commercial .top-level-nav li.commercial-tab { 
			width: 60%;
		}
		html.commercial .top-level-nav li.residential-tab { 
			width: 20%;
			background: #fff;
			border-right:1px solid #FFAF45;
		}			
			html.commercial .top-level-nav li.residential-tab a { 	
				color: #B7B7B7;
			}
			html.commercial .top-level-nav li.residential-tab a:hover { 	
				color:  #23CAE3;
			}
		html.commercial .top-level-nav li.education-tab { 
			width: 20%;
			background: #fff;
			border-right:1px solid #FFAF45;
		}			
			html.commercial .top-level-nav li.education-tab a { 	
			color:  #B7B7B7;
			}
			html.commercial .top-level-nav li.education-tab a:hover {
			color:  #9A13E8;
			}

		/* Education State */
		html.education .top-level-nav li.education-tab { 
			width: 60%
		}
		html.education .top-level-nav li.residential-tab { 
				width: 20%;
			background: #fff;
			border-right:1px solid #9A13E8;
		}			
			html.education .top-level-nav li.residential-tab a { 	
				color:#B7B7B7;
			}
			html.education
			 .top-level-nav li.residential-tab a:hover { 	
			color:  #23CAE3;
			}		

		html.education .top-level-nav li.commercial-tab { 
			width: 20%;
			background: #fff;
			border-right:1px solid #9A13E8;
		}			
			html.education
			 .top-level-nav li.commercial-tab a { 	
			color:  #B7B7B7;
			}
			
			html.education
			 .top-level-nav li.commercial-tab a:hover { 	
			color: #FFAF45;
			}		
			
			
	/* 
		Page header 
	*/		
		.page-header {
			border-bottom: 1px solid #81DDF2;
			background: #22cae3;
		}
			html.commercial .page-header {
				background: #FFAF45;
				border-color: #FCD5A7;
			}
			html.landing .page-header {
				background: #c6c6c6;
				border-color: #efeeee;
			}
			html.education .page-header {
				background: #9A13E8;
				border-color: #BE8DE0;
			}			
		
		.page-header div {
			height: 112px;
		}
		.logo-wrap {
			border-right: 1px solid #81DDF2;
		}
			html.commercial .logo-wrap {
				border-color: #FCD5A7;
			}
			html.landing .logo-wrap {
				border-color: #efeeee;
			}	
			html.education .logo-wrap {
				border-color: #BE8DE0;
			}			
		
			.logo-type {
				font-size: 28px;
			}
			
		
	/*
		Second level menu
	*/	
		.second-level-menu {
			position: relative;
		}
		.second-level-menu li {
			float: left;
			font-size: 14px;
			font-size: 0.875rem;
			
			background: #23CAE3;
		}	
			html.commercial .second-level-menu li {
				background: #FFAF45;
			}
			html.landing .second-level-menu li {
				background: #c6c6c6;
			}			
			html.education .second-level-menu li {
				background: #9A13E8;
			}	
		.second-level-menu > li {

		}
		/*
			.second-level-menu > li > a {
				border-bottom: 1px solid #81DDF2; 
			}		
			html.commercial .second-level-menu > li > a {
				border-color: #FCD5A7;
			}
			html.landing .second-level-menu > li > a {
				border-color: #efeeee;
			}			
			*/
			
		.second-level-menu li.scenario-tab {
			width: 25%;
		}
		.second-level-menu li.about-toolkit-tab,
		.second-level-menu li.about-sbd-tab {
			width: 37.5%;
		}
		.second-level-menu li.scenario-tab ,
		.second-level-menu li.about-toolkit-tab  {
			border-right: 1px solid #80def3; 
		}
			html.commercial .second-level-menu li.scenario-tab ,
			html.commercial .second-level-menu li.about-toolkit-tab  {		
				border-color: #FCD5A7;
			}
			html.landing .second-level-menu li.scenario-tab ,
			html.landing .second-level-menu li.about-toolkit-tab  {		
				border-color: #efeeee;
			}			

			html.education .second-level-menu li.scenario-tab ,
			html.education .second-level-menu li.about-toolkit-tab  {		
				border-color: #BE8DE0;
			}	
			
			
		.second-level-menu li.about-sbd-tab {
			margin-right: -2px;
		}
		
			.second-level-menu li a {
				color: #fff;
				text-decoration: none;
				display: block;
				padding: 0.35em 0.75em;
			}
			.second-level-menu > li > a {
				background: url(/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/img/down-toggle.svg) no-repeat 95% center;
			}
			.second-level-menu > li > a.spacer {
				background-image: none;
			}
			.second-level-menu > li.about-toolkit-tab > a,
			.second-level-menu > li.about-sbd-tab > a {			
				background: url(/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/img/down-toggle.svg) no-repeat 98% center;
			}
			.second-level-menu > li > a.open {
				background-image: url(/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/img/up-toggle.svg);
			}
			.second-level-menu > li > a.spacer.open {
				background-image: none;
			}
			
			.second-level-menu li p a {
            font-family: arial;
            text-decoration: underline;
            }
			
		/*
			Scenario menu
		*/
		.scenario-menu {
			width: 1024px; 
			background: #fff;
			display: none;
			background: #fff;
		}
			.scenario-menu > li {
				width: 25%;
				width: 257px;
			}
			.scenario-menu > li:last-of-type {
				border-right: none;
			}
			
			/* 
				Scenario Sub 
			*/
			.scenario-links {
				
			}
				.scenario-links li {
					float: none;
					background: #fff; 
					border-bottom: 1px solid #22cae3;
					border-right: 1px solid #23CAE3;
				}	
					html.commercial .scenario-links li { 
						border-color: #FCD5A7;
					}
					html.landing .scenario-links li { 
						border-color: #efeeee;
					}					
					html.education .scenario-links li { 
						border-color: #BE8DE0;
					}
				
					.scenario-links li a {
						color: #23CAE3;
					}		
					html.commercial .scenario-links li, html.education .scenario-links li {
						background: #fff;
					}
					html.commercial .scenario-links li a {
						color: #FFAF45;
					}
					html.education .scenario-links li a {
						color: #9A13E8;
					}
					html.landing .scenario-links li a {
						color: #c6c6c6;
					}						
						
					
					.scenario-links li:hover a,
					.scenario-links li.on a,
					.scenario-links li a:hover {
						background: #23CAE3;
						color: #fff;
					}
						html.commercial .scenario-links li:hover a,
						html.commercial .scenario-links li.on a,
						html.commercial .scenario-links li a:hover {					
							background-color: #FFAF45;
							color: #fff;
						}
					
						html.commercial .scenario-links li:hover a,
						html.commercial .scenario-links li.on a,
						html.commercial .scenario-links li a:hover {					
							background: #FFAF45;
						}
						html.education .scenario-links li:hover a,
						html.education .scenario-links li.on a,
						html.education .scenario-links li a:hover {					
							background-color: #9A13E8;
							color: #fff;
						}
					/* last col reset */
			.scenario-menu > li.col-4 {
				/* margin-left: -1px; */
				width: 253px;
			}
			.scenario-menu > li.col-4 .scenario-links li {
				border-right: 0;
			}
			
			.scenario-nav-home-link a {
				background: url(/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/img/home-icon.png) no-repeat 12px center;
				padding-left: 27px!important;
			}
				html.commercial .scenario-nav-home-link a { 
					background-image: url(/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/img/home-icon-orange.png);	
				}
				html.education .scenario-nav-home-link a { 
					background-image: url(/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/img/home-icon-purple.png);	
				}
			
			.scenario-links li.scenario-nav-home-link:hover a,
			.scenario-links li.scenario-nav-home-link.on a,
			html.commercial .scenario-links li.scenario-nav-home-link:hover a,
			html.commercial .scenario-links li.scenario-nav-home-link.on a {
				background-image: url(/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/img/home-icon-white.png);
				background-position:  12px center;
				background-repeat: no-repeat;
			}
		
		/*
		- - - HEADER HELP - - - */
		.header-help {
			position: absolute;
			top: 50px;
			right: 10px;
		}
		.landing .header-help {
			display: none;
		}
			
	
		/* 
			About tabs 
		*/
		.about-info-panel {
			display: none;
		}
		.about-info-panel {
			position: absolute;
			left: 25%; top: 28px;
			background: #fff;
			color: #222;
			padding-bottom: 2em;
		}
			.about-info-panel p {
				margin-bottom: 0.5em;
				
				font-family: sans-serif;
				font-size: 12px;
				font-size: 0.75rem;
				line-height: 1.4em;					
			}
				.about-info-panel p a,
				.scenario-tabs li.scenario-description .scenario-info-panel p a {
					padding: 0; display: inline;
					color: #23CAE3;
				}
				.scenario-tabs li.scenario-description .scenario-info-panel p a { 
					color: #FFAF45;
				}
				html.commercial .about-info-panel p a,
				html.commercial .about-info-panel p a {
					color: #FFAF45;
				}
				html.education .about-info-panel p a,
				html.education .about-info-panel p a {
					color: #9A13E8;
				}
				html.landing .about-info-panel p a,
				html.landing .scenario-tabs li.scenario-description .scenario-info-panel p a {
					color: #000;
				}				
	
			.about-info-panel .close-link,
			.scenario-tabs li.scenario-description .scenario-info-panel .close-link {
				display: block;
				background: #f5f5f5 url(/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/img/up-toggle-222.svg) no-repeat 95% center;
				color: #222;
				position: absolute;
				left: 0; bottom: 0;	width: 100%;
				padding-top: 0.5em;
				padding-bottom: 0.5em;
				box-shadow: inset -1px -1px -2px rgba(255,255,255,0.75);
			}
			.about-info-panel .close-link:hover,
			.scenario-tabs li.scenario-description .scenario-info-panel .close-link:hover  {
				background: #f0f0f0 url(/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/img/up-toggle-222.svg) no-repeat 95% center;
			}
			
			.scenario-tabs li.poor-example,
			.scenario-tabs li.sbd-example,
			html.commercial .scenario-tabs li.poor-example,
			html.commercial .scenario-tabs li.sbd-example,
			html.education .scenario-tabs li.poor-example,
			html.education .scenario-tabs li.sbd-example {
				border-bottom: none;
			}
			
			
			/* dual example */
			.example-1,
			.example-2 {
				float: left;
				width: 10%;
				text-align: center;
				border-right: 1px solid #81DDF2;
				background: #81DDF2;
			}
				html.commercial .example-1,
				html.commercial .example-2 {
					background: #FCD5A7;
					border-color: #FCD5A7;
				}	
			
			.scenario-tabs li.example-1 a,
			.scenario-tabs li.example-2 a {
				color: #23CAE3;
			}
				html.commercial .scenario-tabs li.example-1 a,
				html.commercial .scenario-tabs li.example-2 a {
					color: #FFAF45;
				}
			
			.example-1.selected,
			.example-2.selected {
				background: #22cae3;
			}		
				html.commercial .example-1.selected,
				html.commercial .example-2.selected {
					background: #FFAF45;
				}				
			
			.scenario-tabs li.example-1.selected a,
			.scenario-tabs li.example-2.selected a,
			.scenario-tabs li.example-1:hover a,
			.scenario-tabs li.example-2:hover a,
			html.commercial .scenario-tabs li.example-1.selected a,
			html.commercial .scenario-tabs li.example-2.selected a,
			html.commercial .scenario-tabs li.example-1:hover a,
			html.commercial .scenario-tabs li.example-2:hover a {
				color: #fff;
			}			
				.scenario-tabs li.example-1:hover,
				.scenario-tabs li.example-2:hover {
					background: #22cae3;
				}			
					html.commercial .scenario-tabs li.example-1:hover,
					html.commercial .scenario-tabs li.example-2:hover {
						background: #FFAF45;
					}
				
				
							
			.scenario-tabs li.scenario-description.dual-example {
				/*	left: auto; right: 0;*/
				width: 80%;
				float: left;
				margin-right: -2px;
			}
			
			
			
	
	
	/*
		Scenario Tabs 
	*/
	.scenario-tabs {
		position: absolute;
		top: 116px;
		right: 0;
		background: #23CAE3;
		border-top: 1px solid #81DDF2;
	}
		html.commercial .scenario-tabs {
			background: #FFAF45;
			border-color: #FCD5A7;
		}
			html.education .scenario-tabs {
			background: #9A13E8;
			border-color: #BE8DE0;
		}
	
	
		.scenario-tabs li {
			font-size: 14px;
			font-size: 0.875rem;
			border-bottom: 1px solid #81DDF2;
			position: relative;
		}	
			html.commercial .scenario-tabs li {
				border-bottom: 1px solid #FCD5A7;
			}

			html.education .scenario-tabs li {
				border-bottom: 1px solid #BE8DE0;
			}
		
			.scenario-tabs li a {
				padding: 0.35em 0.75em;
				color: #fff;
				text-decoration: none;
				display: block;
			}		
				html.safari .scenario-tabs li a {
					padding-bottom: 0.4em;
				}
				html.safari .scenario-tabs li.poor-example a,
				html.safari .scenario-tabs li.sbd-example a {
					padding-bottom: 0.35em;
				}
				
				
				
			.scenario-tabs li.scenario-description a {
				background: url(/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/img/down-toggle.svg) no-repeat 98% center;
			}
			.scenario-tabs li.scenario-description a.open {
				background-image: url(/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/img/up-toggle.svg);
			}

			
			
		/* PANEL styling */
		.scenario-info-panel {
			position: absolute;
			background: #fff;
			color: #222;
			z-index: 99;
			
			display: none;
			padding-bottom: 2.5em;
		}	
			.scenario-info-panel h2 { 
				font-size: 24px;
				width: 80%;
			}
			.scenario-info-panel p { 
				width: 95%;
			}
			.scenario-info-panel p,
			.about-info-panel p {
				font-family: sans-serif;
				font-size: 12px;
				font-size: 0.75rem;
				line-height: 1.4em;				
			}
			
			
						
		.scenario-tabs li.poor-example,
		.scenario-tabs li.sbd-example {
			width: 50%;
			float: left;
		}
		.scenario-tabs li.sbd-example.full {
			width: 100%;
		}
		
		.scenario-tabs li.poor-example,
		.scenario-tabs li.sbd-example {
			background: #fff;
		}
			.scenario-tabs li.poor-example a {
				color: #FC4C4C;
			}
				.scenario-tabs li.poor-example:hover a {
					background: #FC4C4C;
					color: #fff;
				}
			
			.scenario-tabs li.sbd-example a { 
				color: #34EA68;
			}
				.scenario-tabs li.sbd-example:hover a { 
					background: #34EA68;
					color: #fff;
				}
							
			.scenario-tabs li.sbd-example.on {
				background: #34EA68;	
			}
			.scenario-tabs li.poor-example.on {
				background: #FC4C4C;	
			}
			.scenario-tabs li.on a {
				color: #fff;
			}
			
			
			
			/* arrows */
			.scenario-tabs li.poor-example.on:after {
				top: 100%;
				border: solid transparent;
				content: " ";
				height: 0;
				width: 0;
				position: absolute;
				pointer-events: none;
			}
			.scenario-tabs li.poor-example.on:after {
				border-color: rgba(252, 76, 76, 0);
				border-top-color: #fc4c4c;
				border-width: 15px;
				left: 10%;
				margin-left: -15px;
			}		
						
			.scenario-tabs li.sbd-example.on:after {
				top: 100%;
				border: solid transparent;
				content: " ";
				height: 0;
				width: 0;
				position: absolute;
				pointer-events: none;
			}
			.scenario-tabs li.sbd-example.on:after {
				border-color: rgba(252, 76, 76, 0);
				border-top-color: #34EA68;
				border-width: 15px;
				left: 10%;
				margin-left: -15px;
			}
				.scenario-tabs li.sbd-example.on.full:after {
					left: 5%;
				}
			
			.animated .scenario-tabs li.poor-example.on:after,
			.animated .scenario-tabs li.sbd-example.on:after  {
				display: none;
			}
			
						
	
/* 
- - - - PAGES - - - - - 
*/	
	.page-content {
		width: 1024px; height: 596px;
		position: relative;
	}	
	.loadr {
		position: absolute;
		width: 1024px; height: 596px;
		z-index: 999;
	/*	background: yellow;*/
	}
	
	.scenario-wrap,
	.scenario-setting {
		width: 1024px; height: 596px;
		position: relative;
		z-index: 100;
		background: #fff;
	}
	.scenario-wrap img {
		max-width: 100%;
		height: auto;
	}
	
	.scenario-setting {
		position: absolute;
		top: 0; left: 0;
	}
	
		.pin {
			position: absolute;
			z-index: 999;
			width: 38px;
			height: 62px;
			opacity: 1;
		}
		.pin.canAnimate {
			transition-duration: 600ms;
			-webkit-transition-duration: 600ms;
			-moz-transition-duration: 600ms; 
			-o-transition-duration: 600ms;
		}
		
		.pin.canAnimate.fadeDown {
			opacity: 0.2;
		/*	margin-top: -10px;*/
			
			transition-duration: 600ms;
			-webkit-transition-duration: 600ms;
			-moz-transition-duration: 600ms; 
			-o-transition-duration: 600ms;
			
		}
		
		
		
		/* 
		- LANDING PAGE PINS - 
		*/
		.residential-landing .pin-01 {
			top: 31%;
			left: 42%;
		}		
		.residential-landing .pin-02 {
			top: 53.6%;
			left: 39%;
		}		
		.residential-landing .pin-03 {
			top: 26.5%;
			left: 13%;
		}		
		.residential-landing .pin-04 {
			top: 42%;
			left: 66%;
		}		
		.residential-landing .pin-05 {
			top: 16%;
			left: 24%;
		}		
		.residential-landing .pin-06 {
			top: 53%;
			left: 56%;
		}		
		.residential-landing .pin-07 {
			top: 48%;
			left: 32.5%;
		}		
		.residential-landing .pin-08 {
			top: 51.5%;
			left: 49%;
		}				
		.residential-landing .pin-09 {
			top: 42%;
			left: 36%;
		}			
		.residential-landing .pin-10 {
			top: 15%;
			left: 58.5%;
		}		
		.residential-landing .pin-11 {
			top: 5%;
			left: 39%;
		}				
		.residential-landing .pin-12 {
			top: 62%;
			left: 70%;
		}				
		.residential-landing .pin-13 {
			top: 64%;
			left: 74%;
		}			
		.residential-landing .pin-14 {
			top: 32%;
			left: 68.5%;
		}				
		.residential-landing .pin-15 {
			top: 45%;
			left: 77.25%;
		}		
		
		.residential-landing a {
		}
		
		/*
		- - LANDING POP BOX/CIRCLE
		*/		
		.landing-pop {
			width: 179px;
			height: 179px;
			background: url(/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/img/circle-pop-up-bg.png) no-repeat center center;
			text-align: center;
			position: absolute;
			top: 0; left: 0;
			margin-left: -70px;
			margin-top: -70px;
		/*	opacity: 0.6;  */
			outline: 0;
		}
			html.commercial .landing-pop {
				background: url(/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/img/circle-pop-up-bg-commercial.png) no-repeat center center;
			}
				html.education .landing-pop {
				background: url(/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/img/circle-pop-up-bg-education.png) no-repeat center center;
			}
		
		a.pin {
			text-decoration: none;
		}
			html.residential .pin-11 .landing-pop {
				margin-top: -10px;
			}
			html.commercial .pin-06 .landing-pop,
			html.commercial .pin-15 .landing-pop {
				margin-top: -40px;
			}
			
		a {
			outline: 0;
		}
		.landing-pop,
		.example-info {
			-webkit-transform: scale(0);
			-moz-transform: scale(0);
			-ms-transform: scale(0);
			-o-transform: scale(0);
			transform: scale(0);
			
			-webkit-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			   -moz-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			    -ms-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			     -o-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			        transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
			
			-webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			   -moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			    -ms-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			     -o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			        transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
			
		}
		.landing-pop.show,
		.example-info.show {
			-webkit-transform: scale(1);
			-moz-transform: scale(1);
			-ms-transform: scale(1);
			-o-transform: scale(1);
			transform: scale(1);
			
-webkit-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
   -moz-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
    -ms-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
     -o-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
        transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */

-webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
   -moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
    -ms-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
     -o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
        transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */	
			
		}		
		
		
			.landing-pop span {
				display: block;
				color: #23CAE3;
			}
				html.commercial .landing-pop span {
					color: #ffaf45;
				}
				html.education .landing-pop span {
					color: #9A13E8;
				}
			span.number {
				font-size: 30px;
				margin-top: 10px;
			}
			html.commercial span.number, html.education span.number  {
				margin-top: 30px;
			}
			
			
			span.scenario-title {
				font-family: 'bariol_regularregular';
				width: 90%;
				margin: 0 auto;
				font-size: 19px;
			}
			.landing-pop span.btn {
				border: none;
				background: #23CAE3;
				color: #fff;
				font-size: 15px;
				padding: 0.2em 0;
				width: 110px;
				border-radius: 4px;
				position: absolute;
				bottom: 30px; 
				left: 50%; margin-left: -55px;
			}
			button:hover {
				background: #95e5f1;
			}
				html.commercial .landing-pop span.btn { 
					color: #fff;
					background: #ffaf45;
				}
				html.education .landing-pop span.btn { 
					color: #fff;
					background: #9A13E8;
				}
			
			
			
		.overlay {
			position: absolute;
			top:0; left: 0; bottom: 0;
			width: 100%;
			background: url(/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/img/trans.png) repeat left top;
			background: rgba(255,255,255,0.4);
			display: none;
		}	
			
		/*
			SCENARIOS GENERAL 
		*/	
		.example-info {
			/*
			font-family: 'bariol_regularregular';
			background: rgb(251,75,75);
			background: rgba(251,75,75,0.85);
			border: 1px solid #fff;
			color: #fff;
			*/
			font-family: sans-serif;
			background: #fff;
			background: rgba(255,255,255,0.9);
			color: #000;
			border: 1px solid rgb(251,75,75);
			
			border-radius: 6px;
			width: 200px;
			padding: 0.5em;
			font-size: 12px;
			font-size: 0.75rem;
			text-decoration: none;
			
			position: absolute;
			left: 50px; top: 45px;
			display: none;
		}	
		.scenario-13 .bad .example-info,
		.good .example-info {
			border: 1px solid rgb(52,219,99);
		}
		
		.example-info.left-side {
			left: auto;
			right: 50px;
		}
		.example-info.top-side {
			top: auto;
			bottom: 40px;
		}
		
			.example-info a {
				border-top: 1px solid rgb(251,75,75);
				display: block;
				padding-top: 0.35em;
				text-align: center;
				color: #000;
				text-decoration: none;
			}
			.scenario-13 .bad .example-info a,
			.good .example-info a {
				border-top: 1px solid rgb(52,219,99);
			}
		
		
		div[data-id="zoomed-background"] {
		/* 1600x931 */
			position: absolute;
			left: 50%; top: 50%;
			margin-left: -800px;
			margin-top: -465px;
			width: 1600px;
			display: none;
		}
		
		div[data-id="zoomed-background"] img {
			width: 100%;
		}
		
		.zoomed {
			position: absolute;
			top: 0; left: 0;
			z-index: 99;
			display: none;
		}		
			
/* 
- - - - - - - - RESIDENTIAL SCENARIOS - - - - - - - - - - - 
*/			
		/* 
		- SCENARIO 1 - 
		*/			 
		.scenario-1	{
			
		}
		
			/* BAD PINS */
			.scenario-1	.bad .pin-1 {
				left: 41%; top: 28%; 
			}			
			.scenario-1	.bad .pin-2 {
				left: 54.5%; top: 32%;
			}	
			.scenario-1	.bad .pin-3 {
				left: 24%; top:43%; 
			}			
			
			/* BAD BACKGROUNDS */
			.scenario-1	div[data-id="zoomed-background"].bad-1 {
				left: 56%; top:57%;
			}
			.scenario-1	div[data-id="zoomed-background"].bad-2 {
				left: 44%; top: 53%;
			}
			.scenario-1	div[data-id="zoomed-background"].bad-3 {
				left: 62%; top: 44%;
			}
			
			
			/* GOOD PINS */
			.scenario-1	.good .pin-1 {
				left: 40%; top: 23%; 
			}			
			.scenario-1	.good .pin-2 {
				left: 54.5%; top: 33%;
			}	
			.scenario-1	.good .pin-3 {
				left: 27.5%; top: 47%; 
			}				
			
			/* GOOD BACKGROUNDS */
			.scenario-1	div[data-id="zoomed-background"].good-1 {
				left: 55%; top:62%;
			}
			.scenario-1	div[data-id="zoomed-background"].good-2 {
				left: 46%; top: 55%;
			}
			.scenario-1	div[data-id="zoomed-background"].good-3 {
				left: 65%; top: 50%;
			}			
			
		
		
			
			
		/* 
*********- SCENARIO 2 - 
		*/			 
		.scenario-2	{
			
		}
		
			/* BAD PINS */
			.scenario-2	.bad .pin-1 {
				left: 30%; top: 18%; 
			}			
			.scenario-2	.bad .pin-2 {
				left: 32%; top: 42%;
			}	
			.scenario-2	.bad .pin-3 {
				left: 59%; top: 40%; 
			}					
			.scenario-2	.bad .pin-4 {
				left: 68%; top: 28%; 
			}		
			
			/* BAD BACKGROUNDS */
			.scenario-2	 div[data-id="zoomed-background"].bad-1 {
				left: 60%; top: 60%;
			}
			.scenario-2	 div[data-id="zoomed-background"].bad-2 {
				left: 60%; top: 50%;
			}			
			.scenario-2	 div[data-id="zoomed-background"].bad-3 {
				left: 45%; top: 48%;
			}			
			.scenario-2	 div[data-id="zoomed-background"].bad-4  {
				width: 1024px;
				left: 0; top: 0; 
				margin: 0;
			}				
			
			
			/* GOOD PINS */
			.scenario-2	.good .pin-1 {
				left: 35%; top: 42%; 
			}			
			.scenario-2	.good .pin-2 {
				left: 48%; top: 50%;
			}	
			.scenario-2	.good .pin-3 {
				left: 62%; top: 19%; 
			}					
			.scenario-2	.good .pin-4 {
				left: 68%; top: 36%; 
			}				
			
			
			/* GOOD BACKGROUNDS */
			.scenario-2	div[data-id="zoomed-background"].good-1 {
				left: 58%; top: 50%;
			}
			.scenario-2	div[data-id="zoomed-background"].good-2 {
				left: 49%; top: 45%;
			}				
			.scenario-2	div[data-id="zoomed-background"].good-3 {
				width: 1024px;
				left: 0; top:0; margin: 0;
			}		
			.scenario-2	div[data-id="zoomed-background"].good-4 {
				left: 40%; top: 54%;
			}	
						
					
		/* 
*********- SCENARIO 3 - 
		*/						
		.scenario-3	{
			
		}
		
			/* BAD PINS */
			.scenario-3	.bad .pin-1 {
				left: 56%; top: 56%; 
			}			
			.scenario-3	.bad .pin-2 {
				left: 78%; top: 44%;
			}	
			/* BAD BACKGROUNDS */
			.scenario-3	div[data-id="zoomed-background"].bad-1 {
				width: 1024px;
				left: 0; top: 0;
				margin: 0;
			}	
			.scenario-3	div[data-id="zoomed-background"].bad-2 {
				width: 1024px;
				left: 0; top: 0;
				margin: 0;
			}				
			
			/* GOOD PINS */
			.scenario-3	.good .pin-1 {
				left: 46%; top: 64%; 
			}			
			.scenario-3	.good .pin-2 {
				left: 76%; top: 41%;
			}				
			/* GOOD BACKGROUNDS */
			.scenario-3	div[data-id="zoomed-background"].good-1 {
				width: 1024px;
				left: 0; top: 0;
				margin: 0;
			}	
			.scenario-3	div[data-id="zoomed-background"].good-2 {
				width: 1024px;
				left: 0; top: 0;
				margin: 0;
			}				
			
			
		/* 
*********- SCENARIO 4 - 
		*/				
		.scenario-4	{
			
		}
		
			/* BAD PINS */
			.scenario-4	.bad .pin-1 {
				left: 22%; top: 6%; 
			}			
			.scenario-4	.bad .pin-2 {
				left: 52.5%; top: 36%;
			}	
			.scenario-4	.bad .pin-3 {
				left: 41%; top: 59%;
			}			
			/* BAD BACKGROUNDS */
			.scenario-4	div[data-id="zoomed-background"].bad-1 {
				width: 1024px;
				left: 0; top: 0;
				margin: 0;
			}				
			.scenario-4	div[data-id="zoomed-background"].bad-2 {
				left: 47%; top: 54%;
			}				
			.scenario-4	div[data-id="zoomed-background"].bad-3 {
				left: 53%; top: 40%;
			}					
			
			/* GOOD PINS */
			.scenario-4	.good .pin-1 {
				left: 21.5%; top: 2%; 
			}			
			.scenario-4	.good .pin-2 {
				left: 37%; top: 16%;
			}	
			.scenario-4	.good .pin-3 {
				left: 46%; top: 30%;
			}				
			/* GOOD BACKGROUNDS */
			.scenario-4	div[data-id="zoomed-background"].good-1 {
				left: 65%; top: 72%;
			}					
			.scenario-4	div[data-id="zoomed-background"].good-2 {
				left: 57%; top: 62%;
			}											
			.scenario-4	div[data-id="zoomed-background"].good-3 {
				left: 51%; top: 55%;
			}	
					
	
		/* 
*********- SCENARIO 5 - 
		*/		
		.scenario-5	{
			
		}
			/* BAD PINS */
			.scenario-5	.bad .pin-1 {
				left: 55%; top: 53%; 
			}		
			/* BAD BACKGROUNDS */
			.scenario-5	div[data-id="zoomed-background"].bad-1 {
				left: 46.5%; top: 41%;
			}
			
			/* GOOD PINS */
			.scenario-5	.good .pin-1 {
				left: 55.75%; top: 50%; 
			}				
			/* GOOD BACKGROUNDS */
			.scenario-5	div[data-id="zoomed-background"].good-1 {
				display: block!important;
				left: 46%; top: 46%;
			}			
								
				
		/* 
*********- SCENARIO 6 - 
		*/						
		.scenario-6	{
			
		}
			/* BAD PINS */
			.scenario-6	.bad .pin-1 {
				left: 55.5%; top: 51%; 
			}				
			/* BAD BACKGROUNDS */
			.scenario-6	div[data-id="zoomed-background"].bad-1 {
				width: 1024px;
				left: 0; top: 0; margin: 0; 
			}				
			/* GOOD PINS */
			.scenario-6	.good .pin-1 {
				left: 54%; top: 54%; 
			}				
			/* GOOD BACKGROUNDS */
			.scenario-6	div[data-id="zoomed-background"].good-1 {
				width: 1024px;
				left: 0; top: 0; margin: 0; 
			}	
							
		
		/* 
*********- SCENARIO 7 - 
		*/						
		.scenario-7	{
			
		}
			/* BAD PINS */
			.scenario-7	.bad .pin-1 {
				left: 22.5%; top: 45%; 
			}			
			.scenario-7	.bad .pin-2 {
				left: 45%; top: 36%; 
			}			
			.scenario-7	.bad .pin-3 {
				left: 58%; top: 7%; 
			}				
			/* BAD BACKGROUNDS */
			.scenario-7	div[data-id="zoomed-background"].bad-1,
			.scenario-7	div[data-id="zoomed-background"].bad-2 {
				width: 1024px;
				left: 0; top: 0; margin: 0; 
			}					
			.scenario-7	div[data-id="zoomed-background"].bad-3 {
				top: 68%;
				left: 44%;
			}
			
			/* GOOD PINS */
			.scenario-7	.good .pin-1 {
				left: 38%; top: 37%; 
			}			
			.scenario-7	.good .pin-2 {
				left: 39%; top: 64%; 
			}			
			.scenario-7	.good .pin-3 {
				left: 64%; top: 17%; 
			}			
			/* GOOD BACKGROUNDS */

			.scenario-7	div[data-id="zoomed-background"].good-1,
			.scenario-7	div[data-id="zoomed-background"].good-2 {
				width: 1024px;
				left: 0; top: 0; margin: 0; 
			}	
			.scenario-7	div[data-id="zoomed-background"].good-1 {
				width: 1600px;
				margin-top: -120px;
			}			
							
			.scenario-7	div[data-id="zoomed-background"].good-3 {
				top: 64%;
				left: 42%;
			}			
			
		/* 
*********- SCENARIO 7 - ex2
		*/
		.scenario-7.ex2	{
			
		}		
			/* BAD PINS */
			.scenario-7.ex2	.bad .pin-1 {
				left: 42%; top: 52%; 
			}		
				
			/* GOOD PINS */
			.scenario-7.ex2	.good .pin-1 {
				left: 75%; top: 7%; 
			}	
			.scenario-7.ex2	.good .pin-2 {
				left: 47%; top: 30%; 
			}				
			.scenario-7.ex2	.good .pin-3 {
				left: 53%; top: 64%; 
			}		
			.scenario-7.ex2	.good .pin-4 {
				left: 69%; top: 33%; 
			}		
						
			/* GOOD BACKGROUNDS */
			.scenario-7.ex2	div[data-id="zoomed-background"].good-1 {
				width: 1600px;
				
				margin: 0 0 0 -50%; 
				left: 8%; top: -10%; 
			}				
			
			
			.scenario-7.ex2	div[data-id="zoomed-background"].good-2 {
				width: 1600px;
				
				margin: -50% 0 0 -50%; 
				left: 22.5%; top: 27%; 
			}	
			.scenario-7.ex2	div[data-id="zoomed-background"].good-3 {
				width: 1600px;
				
				margin: -50% 0 0 -50%; 
				left: 18%; top: 10%; 
			}				
			.scenario-7.ex2	div[data-id="zoomed-background"].good-4 {
				width: 1600px;
				
				margin: -50% 0 0 -50%; 
				left: 10%; top: 26%; 
			}				
			
		/* 
*********- SCENARIO 8
		*/
		.scenario-8	{
			
		}				
			/* BAD PINS */
			.scenario-8	.bad .pin-1 {
				left: 60%; top: 58%; 
			}				
			/* GOOD PINS */
			.scenario-8	.good .pin-1 {
				left: 56%; top: 62%; 
			}				
			
			.scenario-8	div[data-id="zoomed-background"].bad-1,
			.scenario-8	div[data-id="zoomed-background"].good-1 {
				width: 1024px;
				margin: 0; padding: 0; 
				top: 0; left: 0;
			}

		/* 
*********- SCENARIO 9
		*/
		.scenario-9	{
			
		}				
			/* BAD PINS */
			.scenario-9	.bad .pin-1 {
				left: 52.5%; top: 43%; 
			}				
			/* GOOD PINS */
			.scenario-9	.good .pin-1 {
				left: 53.5%; top: 37%; 
			}	
			.scenario-9	.good .pin-2 {
				left: 80%; top: 28%; 
			}
			
			.scenario-9	div[data-id="zoomed-background"].bad-1,
			.scenario-9	div[data-id="zoomed-background"].good-1,
			.scenario-9	div[data-id="zoomed-background"].good-2 {
				width: 1024px;
				margin: 0; padding: 0; 
				top: 0; left: 0;
			}			
			
		/* 
*********- SCENARIO 10
		*/
		.scenario-10	{
			
		}				
			/* BAD PINS */
			.scenario-10 .bad .pin-1 {
				left: 31%; top: 24%; 
			}					
			/* GOOD PINS */
			.scenario-10 .good .pin-1 {
				left: 35%; top: 26%; 
			}	
			
			.scenario-10 div[data-id="zoomed-background"].bad-1,
			.scenario-10 div[data-id="zoomed-background"].good-1 {
				width: 1024px;
				margin: 0; padding: 0; 
				top: 0; left: 0;
			}				
				
		/* 
*********- SCENARIO 11
		*/
		.scenario-11	{
			
		}				
			/* GOOD PINS */
			.scenario-11 .bad .pin-1 {
				left: 46%; top: 30%; 
			}
			
			.scenario-11 div[data-id="zoomed-background"].bad-1 {
				width: 1024px;
				margin: 0; padding: 0; 
				top: 0; left: 0;
			}		
			.residential .scenario-11 .bad .example-info,
			.residential .scenario-11 .bad .example-info a {
				border-color: #34EA68;
			}	
													
		
		/* 
*********- SCENARIO 12
		*/
		.scenario-12	{
			
		}				
			/* BAD PINS */
			.scenario-12 .bad .pin-1 {
				left: 63.5%; top: 28%; 
			}		
			.scenario-12 div[data-id="zoomed-background"].bad-1,
			.scenario-12 div[data-id="zoomed-background"].good-1,
			.scenario-13 div[data-id="zoomed-background"].bad-1,
			.scenario-13 div[data-id="zoomed-background"].good-1,
			.scenario-14 div[data-id="zoomed-background"].bad-1,
			.scenario-14 div[data-id="zoomed-background"].good-1,
			.scenario-15 div[data-id="zoomed-background"].bad-1,
			.scenario-15 div[data-id="zoomed-background"].good-1 {
				width: 1024px;
				margin: 0; padding: 0; 
				top: 0; left: 0;
			}	
				
			/* GOOD PINS */
			.scenario-12 .good .pin-1 {
				left: 59%; top: 43%; 
			}		
						
		/* 
*********- SCENARIO 13
		*/
		.scenario-13 {
			
		}				
			/* BAD PINS */
			.scenario-13 .bad .pin-1 {
				left: 31%; top: 17%; 
			}
			/* BAD PINS */
			.scenario-13 .good .pin-1 {
				left: 35%; top: 15%; 
			}			
			
		/* 
*********- SCENARIO 14
		*/
		.scenario-14 {
			
		}				
			/* BAD PINS */
			.scenario-14 .bad .pin-1 {
				left: 70%; top: 20%; 
			}									
			/* GOOD PINS */
			.scenario-14 .good .pin-1 {
				left: 45%; top: 21%; 
			}					
		/* 
*********- SCENARIO 14 EXAMPLE 2
		*/
		.scenario-14.ex2 {
			
		}				
			/* BAD PINS */
			.scenario-14.ex2 .bad .pin-1 {
				left: 8%; top: 06%; 
			}									
			/* GOOD PINS */
			.scenario-14.ex2 .good .pin-1 {
				left: 45%; top: 12%; 
			}		
	
		/* 
*********- SCENARIO 15
		*/
		.scenario-15 {
			
		}				
			/* BAD PINS */
			.scenario-15 .bad .pin-1 {
				left: 66%; top: 21%; 
			}									
			/* GOOD PINS */
			.scenario-15 .good .pin-1 {
				left: 35.5%; top: 21%; 
			}		
		/* 
*********- SCENARIO 15 example 2
		*/
		.scenario-15.ex2 {
			
		}				
			/* BAD PINS */
			.scenario-15.ex2 .bad .pin-1 {
				left: 49.5%; top: 23%; 
			}									
			/* GOOD PINS */
			.scenario-15.ex2 .good .pin-1 {
				left: 43%; top: 24%; 
			}	
			.scenario-15.ex2 .good .pin-2 {
				left: 26%; top: 44%; 
			}				
			.scenario-15.ex2 .good .pin-3 {
				left: 42%; top: 51%; 
			}	
			
						
			.scenario-15.ex2 div[data-id="zoomed-background"].good-1 {
				width: 1600px;
				margin-left: -800px; margin-top: -465px;
				left: 54%; top: 60%;
			}		
			.scenario-15.ex2 div[data-id="zoomed-background"].good-2 {
				width: 1600px;
				margin-left: -800px; margin-top: -465px;
				left: 63%; top: 50%;
			}					
			.scenario-15.ex2 div[data-id="zoomed-background"].good-3 {
				width: 1600px;
				margin-left: -800px; margin-top: -465px;
				left: 54%; top: 42%;
			}					
				
				
		
/* 
- - - - - - - - COMMERCIAL SCENARIOS - - - - - - - - - - - 
*/		
		
		/* 
*********- SCENARIO 1
		*/
		html.commercial .scenario-1 .bad .pin-1 { 
			left: 54%;
			top: 29%;
		}
		html.commercial .scenario-1 .bad .pin-2 { 
			left: 45%;
			top: 41%;
		}	
		html.commercial .scenario-1 .bad .pin-3 { 
			left: 28%;
			top: 45%;
		}			
		html.commercial .scenario-1 .bad .pin-4 { 
			left: 22%;
			top: 26%;
		}			
			
			/* BAD BACKGROUNDS */
			html.commercial	.scenario-2	 div[data-id="zoomed-background"].bad-1 {
				left: 60%; top: 60%;
			}
	
			html.commercial	.scenario-2	 div[data-id="zoomed-background"].bad-2 {
				left: 60%; top: 50%;
			}				
			html.commercial	.scenario-2	 div[data-id="zoomed-background"].bad-3 {
			width: 1024px;
			left: 0; top: 0;
			margin: 0; padding: 0;
			}					
			
					
		html.commercial .scenario-1 .good .pin-1 { 
			left: 49%;
			top: 32%;
		}
		html.commercial .scenario-1 .good .pin-2 { 
			left: 59.5%;
			top: 49.5%;
		}		
		html.commercial .scenario-1 .good .pin-3 { 
			left: 42%;
			top: 23%;
		}	
		html.commercial .scenario-1 .good .pin-4 { 
			left: 57%;
			top: 61%;
		}		
		
		html.commercial .scenario-1 div[data-id="zoomed-background"].good-2 {
			left: 44%;
			top: 45%;
		}
		html.commercial .scenario-1 div[data-id="zoomed-background"].good-3 {
			left: 54%;
			top: 58%;
		}		
		html.commercial .scenario-1 div[data-id="zoomed-background"].good-4 {
			left: 45%;
			top: 39%;
		}
				
		
		
		/* 
*********- SCENARIO 2
		*/		
		html.commercial .scenario-2 .bad .pin-1 { 
			left: 30.5%;
			top: 37%;
		}
		html.commercial .scenario-2 .bad .pin-2 { 
			left: 51%;
			top: 58%;
		}		
		html.commercial .scenario-2 .bad .pin-3 { 
			left: 54%;
			top: 34%;
		}		
		
		html.commercial .scenario-6 div[data-id="zoomed-background"].bad-4 {
			left: 57%;
			top: 41%;
		}			
		
		
		
		
		html.commercial .scenario-2 .good .pin-1 { 
			left: 25%;
			top: 27%;
		}	
		html.commercial .scenario-2 .good .pin-2 { 
			left: 52%;
			top: 46%;
		}				
		html.commercial .scenario-2 .good .pin-3 { 
			left: 59.5%;
			top: 24%;
		}	
		
					
			
		/* 
*********- SCENARIO 3
		*/	
		html.commercial .scenario-3 .bad .pin-1 { 
			left: 44%;
			top: 28%;
		}		
		html.commercial .scenario-3 .bad .pin-2 { 
			left: 78%;
			top: 35%;
		}	
		
				
		html.commercial .scenario-3 .good .pin-1 { 
			left: 39%;
			top: 28%;
		}	
		html.commercial .scenario-3 .good .pin-2 { 
			left: 78%;
			top: 46%;
		}		
		
		
		
		/* 
*********- SCENARIO 4
		*/			
		html.commercial .scenario-4 .bad .pin-1 { 
			left: 50%;
			top: 64%;
		}	
		html.commercial .scenario-4 .good .pin-1 { 
			left: 18%;
			top: 32%;
		}			
		
		/* 
*********- SCENARIO 4 Example 2
		*/	
		html.commercial .scenario-4.ex2 .bad .pin-1 { 
			left: 52%;
			top: 42%;
		}	
		html.commercial .scenario-4.ex2 .good .pin-1 { 
			left: 55%;
			top: 34%;
		}			
		
		/* 
*********- SCENARIO 5
		*/			
		html.commercial .scenario-5 .bad .pin-1 { 
			left: 68%;
			top: 50%;
		}	

		
		
		/* 
*********- SCENARIO 6
		*/				
		html.commercial .scenario-6 .bad .pin-1 { 
			left: 65%;
			top: 45%;
		}
		html.commercial .scenario-6 .bad .pin-2 { 
			left: 53%;
			top: 34%;
		}	
		html.commercial .scenario-6 .bad .pin-3 { 
			left: 68%;
			top: 35%;
		}			
		html.commercial .scenario-6 .bad .pin-4 { 
			left: 36%;
			top: 56%;
		}	
				
		html.commercial .scenario-6 div[data-id="zoomed-background"].bad-2 {
			left: 47.5%;
			top: 50%;
		}							
		html.commercial .scenario-6 div[data-id="zoomed-background"].bad-4 {
			left: 57%;
			top: 41%;
		}		
		
		
			
		html.commercial .scenario-6 .good .pin-1 { 
			left: 9%;
			top: 43%;
		}		
		html.commercial .scenario-6 .good .pin-2 { 
			left: 48.5%;
			top: 40%;
		}			
		html.commercial .scenario-6 .good .pin-3 { 
			left: 28%;
			top: 26%;
		}		
		html.commercial .scenario-6 .good .pin-4 { 
			left: 64%;
			top: 41%;
		}				
			
			
			
	
		/* 
*********- SCENARIO 7
		*/	
		html.commercial .scenario-7 .bad .pin-1 { 
			left: 52.5%;
			top: 16%;
		}	
		html.commercial .scenario-7 .good .pin-1 { 
			left: 71%;
			top: 30%;
		}		
	
		/* 
*********- SCENARIO 7 example 2
		*/	
		html.commercial .scenario-7.ex2 .bad .pin-1 { 
			left: 44%;
			top: 34%;
		}	
		html.commercial .scenario-7.ex2 .good .pin-1 { 
			left: 53%;
			top: 46%;
		}			
		
		/* 
*********- SCENARIO 8
		*/	
		html.commercial .scenario-8 .bad .pin-1 { 
			left: 55%;
			top: 37%;
		}	
		html.commercial .scenario-8 .bad .pin-2 { 
			left: 62%;
			top: 28%;
		}		
		
		html.commercial .scenario-8 .good .pin-1 { 
			left: 52%;
			top: 36%;
		}		
		html.commercial .scenario-8 .good .pin-2 { 
			left: 71%;
			top: 36%;
		}			
			
		
		/* 
*********- SCENARIO 9
		*/			
		html.commercial .scenario-9 .bad .pin-1 { 
			left: 70%;
			top: 46%;
		}	
		html.commercial .scenario-9 .good .pin-1 { 
			left: 45%;
			top: 36%;
		}
		
		/* 
*********- SCENARIO 10
		*/			
		html.commercial .scenario-10 .bad .pin-1 { 
			left: 47%;
			top: 47%;
		}	
		html.commercial .scenario-10 .bad .pin-2 { 
			left: 50%;
			top: 2%;
		}			
		
		
		html.commercial .scenario-10 .good .pin-1 { 
			left: 47.5%;
			top: 35.5%;
		}			
		html.commercial .scenario-10 .good .pin-2 { 
			left: 50%;
			top: 2%;
		}			
			
			
		/* 
*********- SCENARIO 11
		*/			
		html.commercial .scenario-11 .bad .pin-1 { 
			left: 42%;
			top: 31%;
		}				
			
		/* 
*********- SCENARIO 12
		*/		
		html.commercial .scenario-12 .bad .pin-1 { 
			left: 68%;
			top: 30%;
		}			
		html.commercial .scenario-12 .good .pin-1 { 
			left: 60%;
			top: 31%;
		}		
			
		/* 
*********- SCENARIO 13
		*/		
		html.commercial .scenario-13 .bad .pin-1 { 
			left: 60%;
			top: 32%;
		}			
		html.commercial .scenario-13 .good .pin-1 { 
			left: 42%;
			top: 60%;
		}	
			
		/* 
*********- SCENARIO 14
		*/				
		html.commercial .scenario-14 .bad .pin-1 { 
			left: 68%;
			top: 42%;
		}		
		html.commercial .scenario-14 .bad .pin-2 { 
			left: 38%;
			top: 30%;
		}			
		html.commercial .scenario-14 .bad .pin-3 { 
			left: 55%;
			top: 27%;
		}	
					
		html.commercial .scenario-14 .good .pin-1 { 
			left: 32%;
			top: 16%;
		}				
		html.commercial .scenario-14 .good .pin-2 { 
			left: 76%;
			top: 11%;
		}				
		html.commercial .scenario-14 .good .pin-3 { 
			left: 47.2%;
			top: 16%;
		}				
			
		/* 
*********- SCENARIO 15
		*/				
		html.commercial .scenario-15 .bad .pin-1 { 
			left: 38%;
			top: 35%;
		}			
		html.commercial .scenario-15 .good .pin-1 { 
			left: 53%;
			top: 23%;
		}
		
		
		
					
		/* no scale backgrounds */
		html.commercial .scenario-1 div[data-id="zoomed-background"].bad-1,
		html.commercial .scenario-1 div[data-id="zoomed-background"].bad-4,
		html.commercial .scenario-1 div[data-id="zoomed-background"].good-1,
		html.commercial .scenario-2 div[data-id="zoomed-background"].good-1,
		html.commercial .scenario-2 div[data-id="zoomed-background"].good-2,
		html.commercial .scenario-2 div[data-id="zoomed-background"].bad-2,
		html.commercial .scenario-4 div[data-id="zoomed-background"].good-1,
		html.commercial .scenario-6 div[data-id="zoomed-background"].bad-3,
		html.commercial .scenario-6 div[data-id="zoomed-background"].good-3,
		html.commercial .scenario-6 div[data-id="zoomed-background"].good-4,
		html.commercial .scenario-7 div[data-id="zoomed-background"].good-1,
		html.commercial .scenario-8 div[data-id="zoomed-background"].bad-2,
		html.commercial .scenario-8 div[data-id="zoomed-background"].good-2,
		html.commercial .scenario-10 div[data-id="zoomed-background"].bad-2,
		html.commercial .scenario-10 div[data-id="zoomed-background"].good-2,
		html.commercial .scenario-14 div[data-id="zoomed-background"].good-1,
		html.commercial .scenario-14 div[data-id="zoomed-background"].good-2,
		html.commercial .scenario-14 div[data-id="zoomed-background"].good-3,
		html.commercial .scenario-14 div[data-id="zoomed-background"].bad-1,
		html.commercial .scenario-14 div[data-id="zoomed-background"].bad-2,
		html.commercial .scenario-14 div[data-id="zoomed-background"].bad-3 {
		
			width: 1024px;
			left: 0; top: 0;
			margin: 0; padding: 0;
		}		
	
		/* green bads */
		html.commercial .scenario-5 .bad .example-info,
		html.commercial .scenario-9 .bad .example-info,
		html.commercial .scenario-11 .bad .example-info,
		html.education .scenario-8 .bad .example-info,
		html.education .scenario-9 .bad .example-info,
		html.commercial .scenario-5 .bad .example-info a,
		html.commercial .scenario-9 .bad .example-info a,
		html.commercial .scenario-11 .bad .example-info a,
		html.education .scenario-8 .bad .example-info a,
		html.education .scenario-9 .bad .example-info a  {
			border-color: rgb(52,219,99);
		}
		
						
				
			
	/* PREV / NEXT ARROWS */
	.animated .arrow-wrap {
		display: none;
	}
	
	.arrow-wrap {
		width: 100px;
		position: absolute; 
		top: 400px; left: 0;
		height: 100px;
		bottom: 0;
		z-index: 999999;
	}
		body.scenario-7 .arrow-wrap.left,
		body.scenario-14 .arrow-wrap.left { 
			top: 400px;
		}
		body.scenario-7 .arrow-wrap.left .arrow,
		body.scenario-14 .arrow-wrap.left .arrow { 
			top: 0;
		}
	
	.arrow-wrap.left {
		
	}
	.arrow-wrap.right {
		left: auto;
		right: 0;
	}
		
	.arrow,
	.arrow-wrap .home-link {
		width: 66px; height: 66px;
		background: url(/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/img/arrows.png) no-repeat left top;
		position: absolute; 
		top: 0; left: 0;
	}		
		html.commercial .arrow {
			background-image: url(/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/img/arrows-orange.png);
		}

		html.education .arrow {
			background-image: url(/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/img/arrows-purple.png);
		}
	
		
		.arrow.next,
		.arrow-wrap.right .home-link {
			right: 10px;
			left: auto;
			background-position: right top;
		}	
		.arrow.previous,
		.arrow-wrap.left .home-link {
			left: 10px;
		}
	
	.arrow-wrap .home-link {
		background: url(/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/img/large-home-icon.png) no-repeat left top;
		display: none;
	}
		html.commercial .arrow-wrap .home-link {
			background-image: url(/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/img/large-home-icon-orange.png);
		}
		html.education .arrow-wrap .home-link {
			background-image: url(/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/img/large-home-icon-purple.png);
		}
		
		.scenario-wrap[data-scenario="scenario-15"] .arrow.next,
		body.scenario-15.ex2 .arrow.next,
		html.commercial body.scenario-15 .arrow.next {
			display: none;
		}
		.scenario-wrap[data-scenario="scenario-1"] .arrow.previous,
		body.scenario-1 .arrow.previous,
		body.scenario-0 .arrow.previous  {
			display: none;
		}		
		
		.scenario-wrap[data-scenario="scenario-15"] .arrow-wrap.right .home-link,
		body.scenario-15.ex2 .arrow-wrap.right .home-link,
		html.commercial body.scenario-15 .arrow-wrap.right .home-link {
			display: block;
		}
		.scenario-wrap[data-scenario="scenario-1"] .arrow-wrap.left .home-link,
		body.scenario-1 .arrow-wrap.left .home-link {
			display: block;
		}	
	
	
	
	
	/* Loading div */
	.loading {
		background: rgba(255,255,255,0.7);
		position: absolute;
		z-index: 99999;
		top:0; left: 0; bottom: 0;
		width: 100%;
		display: none;
	}
		.loading-icon {
			background: #fff;
			background: rgba(255,255,255,0.8);
			position: absolute;
			top: 40%; left: 50%;
			width: 32px; height: 32px;
			padding: 8px;
			margin-left: -20px; 
			margin-right: -20px;	
			border-radius: 6px;	
			box-shadow: 0 0 2px rgba(0,0,0,0.1);
		}
			.loading img {
		
			}
	
	
	
	/* - - LANDING PAGE - - - - */
	.landing-link {
		display: block;
		height: 50%;
		width: 100%;
	}
	.res-link {
		background: #23CAE3;
	}
	.comm-link {
		background: #F8AD49;
	}	
	
	
	.overlay-hover {
		position: absolute;
		top:0; left: 0;
	}
	
	.map-overlay {
		z-index: 999;
	}
	
	
	
	
	
	/* - - - BROWSER OVERLAY- - - - */
	.browser-overlay {
		position: absolute;
		top: 0; bottom: 0; left: 0;
		width: 100%; height: 100%;
		z-index: 9999999;
		
		background: url(/ukgwa/20260407052124oe_/https://www.securedbydesign.com/interactiveguide/img/trans.png) repeat left top;
		background: rgba(255,255,255,0.4);
	}
	
	.browser-notice {
		width: 480px;
		padding: 16px;
		background: rgb(252,76,76);
		background: rgba(252,76,76,0.76);
		border: 1px solid #fff;
		color: #fff;
		
		position: absolute;
		top: 50%; left: 50%;
		margin-left: -256px; margin-top: -100px;
	}
		.browser-notice .heading {
			font-size: 20px;
			text-align: center;
			border-bottom: 1px solid #fff;
			display: block;
			padding-bottom: 0.5em;
			margin-bottom: 1em;
		}	
		.browser-notice p {
			margin-bottom: 1em;
		}	
	
	.browser-links,
	.browser-links li {
		margin: 0; padding: 0; list-style: none;
	}
	.browser-links {
		text-align: center;	
		margin: 2em 0 1em;
	}	
		.browser-links li {
			display: inline;
		}
			.browser-links li a {
				background: #fff;
				color: rgb(252,76,76);
				padding: 0.25em 0.5em;
				text-decoration: none;
				margin: 0 0.25em;
			}
			
			
			
	.continue-to-site-button {
		color: #fff;
		text-decoration: none;
		text-align: center;
		border-top: 1px solid #fff;
		display: block;
		padding-top: 0.5em;
		margin-top: 1.5em;
	}		
			
			
			
			
			
		/* 
		-  COMMERCIAL LANDING PAGE PINS - 
		*/
		.commercial-landing .pin-01 {
			top: 32%;
			left: 49%;
		}		
		.commercial-landing .pin-02 {
			top: 12.5%;
			left: 32%;
		}		
		.commercial-landing .pin-03 {
			top: 39%;
			left: 58%;
		}		
		.commercial-landing .pin-04 {
			top: 64%;
			left: 39%;
		}		
		.commercial-landing .pin-05 {
			top: 56%;
			left: 56.5%;
		}		
		.commercial-landing .pin-06 {
			top: 7%;
			left: 59%;
		}		
		.commercial-landing .pin-07 {
			top: 73%;
			left: 60.5%;
		}		
		.commercial-landing .pin-08 {
			top: 18%;
			left: 25%;
		}				
		.commercial-landing .pin-09 {
			top: 50%;
			left: 37.5%;
		}			
		.commercial-landing .pin-10 {
			top: 30%;
			left: 66%;
		}		
		.commercial-landing .pin-11 {
			top: 50%;
			left: 82.5%;
		}				
		.commercial-landing .pin-12 {
			top: 22%;
			left: 62%;
		}				
		.commercial-landing .pin-13 {
			top: 36%;
			left: 32%;
		}			
		.commercial-landing .pin-14 {
			top: 60%;
			left: 73%;
		}				
		.commercial-landing .pin-15 {
			top: 16%;
			left: 65%;
		}				
	
	/* 
		-  EDUCATION LANDING PAGE PINS - 
		*/
		.education-landing .pin-01 {
			top: 40%;
			left: 73%;
		}		
		.education-landing .pin-02 {
			top: 35%;
			left: 50%;
		}		
		.education-landing .pin-03 {
			top: 53%;
			left: 27%;
		}		
		.education-landing .pin-04 {
			top: 27%;
			left: 56%;
		}		
		.education-landing .pin-05 {
			top: 27%;
			left: 34%;
		}		
		.education-landing .pin-06 {
			top: 32%;
			left: 70%;
		}		
		.education-landing .pin-07 {
			top: 27%;
			left: 64%;
		}		
		.education-landing .pin-08 {
			top: 42%;
			left: 29%;
		}				
		.education-landing .pin-09 {
			top: 42%;
			left: 33.5%;
		}			
		.education-landing .pin-10 {
			top: 23%;
			left: 60%;
		}		
		.education-landing .pin-11 {
			top: 30%;
			left: 45%;
		}				
		.education-landing .pin-12 {
			top: 25%;
			left: 86%;
		}								


/* 
- - - - - - - - EDUCATION SCENARIOS - - - - - - - - - - - 
*/		
		
		/* 
*********- SCENARIO 1
		*/
		html.education .scenario-1 .bad .pin-1 { 
			left: 60%;
			top: 63%;
		}
		html.education .scenario-1 .bad .pin-2 { 
			left: 72%;
			top: 60%;
		}	
		html.education .scenario-1 .bad .pin-3 { 
			left: 17%;
			top: 40%;
		}			
		html.education .scenario-1 .bad .pin-4 { 
			left: 22%;
			top: 26%;
		}

		html.education .scenario-1 .bad .pin-5 { 
			left: 28%;
			top: 70%;
		}				
			
			/* BAD BACKGROUNDS */
			html.education	.scenario-1	 div[data-id="zoomed-background"].bad-1 {
				width: 1024px;
			left: 0; top: 0;
			margin: 0; padding: 0;
			}
	
			html.education	.scenario-1	 div[data-id="zoomed-background"].bad-2 {
			width: 1024px;
			left: 0; top: 0;
			margin: 0; padding: 0;
			}				
			html.education	.scenario-1	 div[data-id="zoomed-background"].bad-3 {
			width: 1024px;
			left: 0; top: 0;
			margin: 0; padding: 0;
			}
			html.education	.scenario-1	 div[data-id="zoomed-background"].bad-4 {
			width: 1024px;
			left: 0; top: 0;
			margin: 0; padding: 0;
			}						
			
					
		html.education .scenario-1 .good .pin-1 { 
			left: 30%;
			top: 60%;
		}
		html.education .scenario-1 .good .pin-2 { 
			left: 67%;
			top: 43%;
		}		
		html.education .scenario-1 .good .pin-3 { 
			left: 70%;
			top: 55%;
		}	
		html.education .scenario-1 .good .pin-4 { 
			left: 60%;
			top: 34%;
		}
		html.education .scenario-1 .good .pin-5 { 
			left: 30%;
			top: 43%;
		}			

				/* GOOD BACKGROUNDS */
				html.education .scenario-1 div[data-id="zoomed-background"].good-1 {
					width: 1024px;
					left: 0; top: 0;
					margin: 0; padding: 0;
				}
				html.education .scenario-1 div[data-id="zoomed-background"].good-2 {
					width: 1024px;
					left: 0; top: 0;
					margin: 0; padding: 0;
				}		
				html.education .scenario-1 div[data-id="zoomed-background"].good-3 {
					width: 1024px;
					left: 0; top: 0;
					margin: 0; padding: 0;
				}
				html.education .scenario-1 div[data-id="zoomed-background"].good-4 {
					left: 54%;
					top: 58%;
				}

		/* 
*********- SCENARIO 2
		*/
		html.education .scenario-2 .bad .pin-1 { 
			left: 67%;
			top: 18%;
		}
		html.education .scenario-2 .bad .pin-2 { 
			left: 80%;
			top: 55%;
		}	
				
			
			/* BAD BACKGROUNDS */
			html.education	.scenario-2	 div[data-id="zoomed-background"].bad-1 {
				width: 1024px;
			left: 0; top: 0;
			margin: 0; padding: 0;
			}
	
			html.education	.scenario-2	 div[data-id="zoomed-background"].bad-2 {
			left: 25%;
			top: 40%;
			}				
							
			
					
		html.education .scenario-2 .good .pin-1 { 
			left: 55%;
			top: 56%;
		}
		html.education .scenario-2 .good .pin-2 { 
			left: 10%;
			top: 30%;
		}		
				

				/* GOOD BACKGROUNDS */
				
				html.education .scenario-2 div[data-id="zoomed-background"].good-1 {
					left: 70%;
					top: 45%;
				}
				html.education .scenario-2 div[data-id="zoomed-background"].good-2 {
					left: 70%;
					top: 45%;
				}

		/* 
*********- SCENARIO 3
		*/
		html.education .scenario-3 .bad .pin-1 { 
			left: 10%;
			top: 19%;
		}
		html.education .scenario-3 .bad .pin-2 { 
			left: 47%;
			top: 40%;
		}	
					
			
			/* BAD BACKGROUNDS */
			html.education	.scenario-3	 div[data-id="zoomed-background"].bad-1 {
			width:1600px;
			left: 0%;
			top: 0%;
			}
	
			html.education	.scenario-3	 div[data-id="zoomed-background"].bad-2 {
			width: 1024px;
			left: 0; top: 0;
			margin: 0; padding: 0;
			}				
							
			
					
		html.education .scenario-3 .good .pin-1 { 
			left: 10%;
			top: 55%;
		}
		html.education .scenario-3 .good .pin-2 { 
			left: 20%;
			top: 41%;
		}		
		html.education .scenario-3 .good .pin-3 { 
			left: 35%;
			top: 37%;
		}	
				

				/* GOOD BACKGROUNDS */
				html.education .scenario-3 div[data-id="zoomed-background"].good-1 {
					width: 1600px;
					left: -3%; 
					top: -40%;
					
				}
				html.education .scenario-3 div[data-id="zoomed-background"].good-2 {
					width: 1024px;
					left: 0; top: 0;
					margin: 0; padding: 0;
				}		
				html.education .scenario-3 div[data-id="zoomed-background"].good-3 {
					width: 1024px;
					left: 0; top: 0;
					margin: 0; padding: 0;
				}


		/* 
*********- SCENARIO 4
		*/
		html.education .scenario-4 .bad .pin-1 { 
			left: 78%;
			top: 40%;
		}
		html.education .scenario-4 .bad .pin-2 { 
			left: 35%;
			top: 44%;
		}
		html.education .scenario-4 .bad .pin-3 { 
			left: 43%;
			top: 42%;
		}	
					
			
			/* BAD BACKGROUNDS */
			html.education	.scenario-4	 div[data-id="zoomed-background"].bad-1 {
			width: 1024px;
			left: 0; top: 0;
			margin: 0; padding: 0;
			}
	
			html.education	.scenario-4	 div[data-id="zoomed-background"].bad-2 {
			width: 1024px;
			left: 0; top: 0;
			margin: 0; padding: 0;
			}

							
			
					
		html.education .scenario-4 .good .pin-1 { 
			left: 35%;
			top: 50%;
		}
		html.education .scenario-4 .good .pin-2 { 
			left: 80%;
			top: 16%;
		}		
		html.education .scenario-4 .good .pin-3 { 
			left: 50%;
			top: 43%;
		}	
				

				/* GOOD BACKGROUNDS */
				html.education .scenario-4 div[data-id="zoomed-background"].good-1 {
					width: 1024px;
					left: 0; top: 0;
					margin: 0; padding: 0;
				}
				html.education .scenario-4 div[data-id="zoomed-background"].good-2 {
					width: 1600px;
					left: 30%; top: 75%;
				
				}		
				html.education .scenario-4 div[data-id="zoomed-background"].good-3 {
					width: 1024px;
					left: 0; top: 0;
					margin: 0; padding: 0;
				}

		/* 
*********- SCENARIO 5
		*/
		html.education .scenario-5 .bad .pin-1 { 
			left: 30%;
			top: 15%;
		}
		html.education .scenario-5 .bad .pin-2 { 
			left: 30%;
			top: 48%;
		}
		html.education .scenario-5 .bad .pin-3 { 
			left: 38%;
			top: 30%;
		}	
					
			
			/* BAD BACKGROUNDS */
			html.education	.scenario-5	 div[data-id="zoomed-background"].bad-1 {
			width: 1024px;
			left: 0; top: 0;
			margin: 0; padding: 0;
			}
	
			html.education	.scenario-5	 div[data-id="zoomed-background"].bad-2 {
			width: 1600px;
			left: 58%; top: 20%;
			}


							
			
					
		html.education .scenario-5 .good .pin-1 { 
			left: 30%;
			top: 20%;
		}
		html.education .scenario-5 .good .pin-2 { 
			left: 58%;
			top: 25%;
		}		
		html.education .scenario-5 .good .pin-3 { 
			left: 45%;
			top: 20%;
		}
		html.education .scenario-5 .good .pin-4 { 
			left: 60%;
			top: 10%;
		}	

				

				/* GOOD BACKGROUNDS */
				html.education .scenario-5 div[data-id="zoomed-background"].good-1 {
					width: 1024px;
					left: 0; top: 0;
					margin: 0; padding: 0;
				}
				html.education .scenario-5 div[data-id="zoomed-background"].good-2 {
					width: 1600px;
					left: 42%; top: 55%;
				
				}		
				html.education .scenario-5 div[data-id="zoomed-background"].good-3 {
					width: 1600px;
					left: 58%; top: 50%;
				}
				html.education .scenario-5 div[data-id="zoomed-background"].good-4 {
					width: 1024px;
					left: 0; top: 0;
					margin: 0; padding: 0;
				}

		/* 
*********- SCENARIO 6
		*/
		html.education .scenario-6 .bad .pin-1 { 
			left: 10%;
			top: 50%;
		}
		html.education .scenario-6 .bad .pin-2 { 
			left: 25%;
			top: 58%;
		}
		html.education .scenario-6 .bad .pin-3 { 
			left: 53%;
			top: 40%;
		}	
					
			
			/* BAD BACKGROUNDS */
			html.education	.scenario-6	 div[data-id="zoomed-background"].bad-1 {
			width: 1024px;
			left: 0; top: 0;
			margin: 0; padding: 0;
			}
	
			html.education	.scenario-6	 div[data-id="zoomed-background"].bad-2 {
			width: 1600px;
			left: 58%; top: 40%;
			}

			html.education	.scenario-6	 div[data-id="zoomed-background"].bad-3 {
			width: 1600px;
			left: 25%; top: 50%;
			}



					
		html.education .scenario-6 .good .pin-1 { 
			left: 25%;
			top: 50%;
		}
		html.education .scenario-6 .good .pin-2 { 
			left: 8%;
			top: 60%;
		}		
		html.education .scenario-6 .good .pin-3 { 
			left: 90%;
			top: 30%;
		}
		

				

				/* GOOD BACKGROUNDS */
				html.education .scenario-6 div[data-id="zoomed-background"].good-1 {
					width: 1024px;
					left: 0; top: 0;
					margin: 0; padding: 0;
				}
				html.education .scenario-6 div[data-id="zoomed-background"].good-2 {
					width: 1024px;
					left: 0; top: 0;
					margin: 0; padding: 0;
				}		
				html.education .scenario-6 div[data-id="zoomed-background"].good-3 {
						width: 1600px;
					left: 22%; top: 57%;
				
				}


		/* 
*********- SCENARIO 7
		*/
		html.education .scenario-7 .bad .pin-1 { 
			left: 33%;
			top: 16%;
		}
		html.education .scenario-7 .bad .pin-2 { 
			left: 55%;
			top: 38%;
		}
		html.education .scenario-7 .bad .pin-3 { 
			left: 45%;
			top: 70%;
		}	
					
			
			/* BAD BACKGROUNDS */
			html.education	.scenario-7	 div[data-id="zoomed-background"].bad-1 {
			width: 1024px;
			left: 0; top: 0;
			margin: 0; padding: 0;
			}
	
			html.education	.scenario-7	 div[data-id="zoomed-background"].bad-2 {
			width: 1024px;
			left: 0; top: 0;
			margin: 0; padding: 0;
			}

			html.education	.scenario-7	 div[data-id="zoomed-background"].bad-3 {
			width: 1024px;
			left: 0; top: 0;
			margin: 0; padding: 0;
			}



					
		html.education .scenario-7 .good .pin-1 { 
			left: 30%;
			top: 20%;
		}
		html.education .scenario-7 .good .pin-2 { 
			left: 48%;
			top: 60%;
		}		
		html.education .scenario-7 .good .pin-3 { 
			left: 90%;
			top: 30%;
		}
		

				

				/* GOOD BACKGROUNDS */
				html.education .scenario-7 div[data-id="zoomed-background"].good-1 {
					width: 1024px;
					left: 0; top: 0;
					margin: 0; padding: 0;
				}
				html.education .scenario-7 div[data-id="zoomed-background"].good-2 {
					width: 1024px;
					left: 0; top: 0;
					margin: 0; padding: 0;
				}		
				html.education .scenario-7 div[data-id="zoomed-background"].good-3 {
						width: 1024px;
					left: 0; top: 0;
					margin: 0; padding: 0;
				
				}

		/* 
*********- SCENARIO 8
		*/
		



					
		html.education .scenario-8 .bad .pin-1 { 
			left: 40%;
			top: 50%;
		}
		html.education .scenario-8 .bad .pin-2 { 
			left: 60%;
			top: 60%;
		}		
			
				/* GOOD BACKGROUNDS */
				html.education .scenario-8 div[data-id="zoomed-background"].good-1 {
					width: 1024px;
					left: 0; top: 0;
					margin: 0; padding: 0;
				}
				html.education .scenario-8 div[data-id="zoomed-background"].good-2 {
					width: 1024px;
					left: 0; top: 0;
					margin: 0; padding: 0;
				}		

		/* 
*********- SCENARIO 9
		*/

		html.education .scenario-9 .bad .pin-1 { 
			left: 60%;
			top: 50%;
		}		
			
				/* GOOD BACKGROUNDS */
				html.education .scenario-8 div[data-id="zoomed-background"].good-1 {
					width: 1024px;
					left: 0; top: 0;
					margin: 0; padding: 0;
				}

		/* 
*********- SCENARIO 10
		*/
		html.education .scenario-10 .bad .pin-1 { 
			left: 60%;
			top: 48%;
		}
		html.education .scenario-10 .bad .pin-2 { 
			left: 40%;
			top: 42%;
		}	
		html.education .scenario-10 .bad .pin-3 { 
			left: 35%;
			top: 30%;
		}			
		html.education .scenario-10 .bad .pin-4 { 
			left: 30%;
			top: 24%;
		}

			
			
			/* BAD BACKGROUNDS */
			html.education	.scenario-10 div[data-id="zoomed-background"].bad-1 {
				width: 1024px;
			left: 0; top: 0;
			margin: 0; padding: 0;
			}
	
			html.education	.scenario-10 div[data-id="zoomed-background"].bad-2 {
			width: 1024px;
			left: 0; top: 0;
			margin: 0; padding: 0;
			}				
			html.education	.scenario-10 div[data-id="zoomed-background"].bad-3 {
			width: 1024px;
			left: 0; top: 0;
			margin: 0; padding: 0;
			}
			html.education	.scenario-10 div[data-id="zoomed-background"].bad-4 {
			width: 1024px;
			left: 0; top: 0;
			margin: 0; padding: 0;
			}
								
			
					
		html.education .scenario-10 .good .pin-1 { 
			left: 45%;
			top: 50%;
		}
		html.education .scenario-10 .good .pin-2 { 
			left: 67%;
			top: 47%;
		}		
		html.education .scenario-10 .good .pin-3 { 
			left: 20%;
			top: 55%;
		}	
		html.education .scenario-10 .good .pin-4 { 
			left: 33%;
			top: 34%;
		}
		html.education .scenario-10 .good .pin-5 { 
			left: 30%;
			top: 17%;
		}	
		html.education .scenario-10 .good .pin-6 { 
			left: 85%;
			top: 33%;
		}			

				/* GOOD BACKGROUNDS */
				html.education .scenario-10 div[data-id="zoomed-background"].good-1 {
					width: 1024px;
					left: 0; top: 0;
					margin: 0; padding: 0;
				}
				html.education .scenario-10 div[data-id="zoomed-background"].good-2 {
					width: 1024px;
					left: 0; top: 0;
					margin: 0; padding: 0;
				}		
				html.education .scenario-10 div[data-id="zoomed-background"].good-3 {
					width: 1024px;
					left: 0; top: 0;
					margin: 0; padding: 0;
				}
				html.education .scenario-10 div[data-id="zoomed-background"].good-4 {
					width: 1024px;
					left: 0; top: 0;
					margin: 0; padding: 0;
				}
				html.education .scenario-10 div[data-id="zoomed-background"].good-5 {
					width: 1024px;
					left: 0; top: 0;
					margin: 0; padding: 0;
				}
				html.education .scenario-10 div[data-id="zoomed-background"].good-6 {
					width: 1024px;
					left: 0; top: 0;
					margin: 0; padding: 0;
				}

		/* 
*********- SCENARIO 11
		*/
		html.education .scenario-11 .bad .pin-1 { 
			left: 33%;
			top: 43%;
		}
		html.education .scenario-11 .bad .pin-2 { 
			left: 55%;
			top: 38%;
		}
		
			
			/* BAD BACKGROUNDS */
			html.education	.scenario-11 div[data-id="zoomed-background"].bad-1 {
			width: 1024px;
			left: 0; top: 0;
			margin: 0; padding: 0;
			}
	
			html.education	.scenario-11 div[data-id="zoomed-background"].bad-2 {
			width: 1024px;
			left: 0; top: 0;
			margin: 0; padding: 0;
			}
			
					
		html.education .scenario-11 .good .pin-1 { 
			left: 30%;
			top: 30%;
		}
		html.education .scenario-11 .good .pin-2 { 
			left: 48%;
			top: 50%;
		}
				

				/* GOOD BACKGROUNDS */
				html.education .scenario-11 div[data-id="zoomed-background"].good-1 {
					width: 1024px;
					left: 0; top: 0;
					margin: 0; padding: 0;
				}
				html.education .scenario-11 div[data-id="zoomed-background"].good-2 {
					width: 1024px;
					left: 0; top: 0;
					margin: 0; padding: 0;
				}		
			
/* 
*********- SCENARIO 12
		*/
		html.education .scenario-12 .bad .pin-1 { 
			left: 69%;
			top: 8%;
		}
		html.education .scenario-12 .bad .pin-2 { 
			left: 35%;
			top: 82%;
		}	
		html.education .scenario-12 .bad .pin-3 { 
			left: 80%;
			top: 35%;
		}			


			
			
			/* BAD BACKGROUNDS */
			html.education	.scenario-12 div[data-id="zoomed-background"].bad-1 {
				width: 1024px;
			left: 0; top: 0;
			margin: 0; padding: 0;
			}
	
			html.education	.scenario-12 div[data-id="zoomed-background"].bad-2 {
			width: 1024px;
			left: 0; top: 0;
			margin: 0; padding: 0;
			}				
			html.education	.scenario-12 div[data-id="zoomed-background"].bad-3 {
			width: 1024px;
			left: 0; top: 0;
			margin: 0; padding: 0;
			}
							
			
					
		html.education .scenario-12 .good .pin-1 { 
			left: 68%;
			top: 20%;
		}
		html.education .scenario-12 .good .pin-2 { 
			left: 40%;
			top: 75%;
		}		
		html.education .scenario-12 .good .pin-3 { 
			left: 30%;
			top: 20%;
		}	
		

				/* GOOD BACKGROUNDS */
				html.education .scenario-12 div[data-id="zoomed-background"].good-1 {
					width: 1024px;
					left: 0; top: 0;
					margin: 0; padding: 0;
				}
				html.education .scenario-12 div[data-id="zoomed-background"].good-2 {
					width: 1024px;
					left: 0; top: 0;
					margin: 0; padding: 0;
				}		
				html.education .scenario-12 div[data-id="zoomed-background"].good-3 {
					width: 1600px;
					left: 60%; top: 60%;	
				}
				

/* -  FOOTER - */			
			
#footer {
	width:1024px;
	margin: 7px auto 0 auto; 
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#a3a3a3;
	text-align:right;
}


#footer a,#footer a:link,#footer a:visited {
	text-decoration:none;
	font-weight:bold;
	color:#a3a3a3;
	
}

#footer a:hover {
text-decoration:none;
color: #0F0;
}

#footer #logo {float:left;}