article, aside, figure, footer, header, nav, section	{		display: block; 	}

/*************************************  FONT DEFINITIONS  ********************************/

@font-face				{	font-family: "Poppins-Light";
							src: url("../fonts/Poppins-Light.ttf") format("truetype");
							}

/****************************************************************************************/
														
html					{	width: 100%;
						background-color: #585858;
						}			

body				{ 	width: 100%;
						height: 100%;
						margin: 0;
						padding: 0;
						overflow: auto;
						}

/*****************  TOP NAVIGATION BAR  ***********************/
			
header				{	width: 100%;
						background-color: hsla(0,0%,0%,.7);
						height: 150px;
						font-family: "arial";
						margin: 0;
						}
			
.topbarwrap			{	width: 900px;
						margin: 0 auto;
						}
					
.leftside			{	width: 450px;
						height: 140px;
						margin: 0;
						padding: 10px 0 0 0;
						float: left;
						font-family: arial;
						color: white;
						}
						
.leftside h1			{	margin: 0;
						}						
					
.rightside			{	width: 450px;
						height: 135px;
						margin: 0;
						padding: 15px 0 0 0;
						float: right;
						text-align: right;
						}
						
.dropbtn			{	width: 200px;
						background-color: #0000FF;
						color: white;
						font-size: 15pt;				
						border: none;
						cursor: pointer;
						padding: 10px 50px;
						margin: 10px 0 0 0;
						}		

.dropdwn			{	position: relative;
						display: inline-block;				
						}				
				
.dropcontent		{	display: none;
						position: absolute;
						text-align: right;
						background-color: #f9f9f9;
						min-width: 200px;
						box-shadow: 0 8px 12px #2D2C2C;					
						}
					
.dropcontent a		{	color: #585858;
						padding: 12px 8px;
						text-decoration: none;
						display: block;
						text-align: center;
						}
					
.dropcontent a:visited		{	color: #585858;
								}					
					
.dropdwn:hover .dropcontent	{	display: block;
								}
								
.dropcontent a:hover			{	background-color: #0000FF;
								color: white;
								}
							
.dropdwn:hover .dropbtn 		{	color: #ffffff;
								background-color: #08088A;
								}	
								
a 							{	text-decoration: none;
								}

/***********************  FIRST SECTION  ****************************/	

.first				{	display: block;
						clear: both;
						width: 100%;
						height: 1080px;
						margin: 0;			
						background-image: url(../images/pic1.jpg);
						background-size: 1920px 1080px;
						background-repeat: no-repeat;			
						}

.introduction		{	display: block;
						width: 100%;
						height: 1080px;
						background-color: rgba(0, 0, 0, .4);						
						margin: 0;						
						}

.introwrapper		{	display: block;
						width: 900px;
						height: 700px;
						margin: 0 auto;						
						font-family: arial;
						font-size: 20pt;
						color: white;
						text-align: center;
						}	

.interactive 		{	display: block;
						width: 450px;
						height: 230px;
						margin: 0;
						padding: 330px 0 0 0;						
						float: left;						
						}	
						
.welcome			{	display: block;
						width: 450px;
						height: 320px;
						margin: 0;
						padding: 220px 0 0 0;
						float: right;
						/*border: 1px solid white; */
						}

.super	 			{	font-family: arial;
						color: white;
						font-size: 38pt;
						text-align: right;
						}
						
.sub				{	font-family: arial;
						color: white;
						font-size: 20pt;
						text-align: right;
						}
						
.learn p 			{	display: block;
						background-color: #0000FF;
						width: 150px;
						padding: 10px;
						font-family: arial;
						font-size: 15px;
						color: white;
						text-align: center;
						float: right;
						}
						
.learn p:hover, .more p:hover	{	cursor: pointer;
									background-color: #08088A;
									}
									
/***********************************************  SMARTER VIDEO  *********************************************************/		
		
.second		{	display: block;
				width: 100%;
				height: 1080px;
				clear: both;
				margin: 0;	
				padding: 0;
				background-image: url('../images/video.jpg');	
				background-size: 100% 1080px;
				background-repeat: no repeat;
				
				}
				
.secwrapper	{	display: block;
				width: 100%;
				height: 1080px;				
				margin: 0;
				padding: 0;
				background-color: rgba(255, 255, 255, .7);				
				}
				
.camwrapper	{	display: block;
				width: 900px;
				height: 700px;
				margin: 0 auto;				
				}
				
.video		{	display: block;
				width: 450px;
				height: 500px;
				float: left;
				padding: 300px 0 0 0;
				}
				
.smart		{	font-family: arial;
				font-size: 38pt;
				color: #424242;
				text-align: left;
				}	

.see		{	font-family: arial;
				font-size: 20pt;
				color: #424242;
				text-align: left;
				}	

.more p 		{	display: block;
				background-color: #0000FF;
				width: 150px;
				padding: 10px;
				font-family: arial;
				font-size: 15px;
				color: white;
				text-align: center;
				float: left;
				}				
				
.camera		{	display: block;
				float: right;
				width: 450px;
				height: 500px;	
				padding: 420px 0 0 0;
				text-align: right;
				}	
				
/************************************************ INTERACTIVE  ******************************************************************/

.third				{	display: block;
						clear: both;
						width: 100%;
						height: 1080px;
						margin: 0;
						padding: 0;
						background-image: url(../images/wood.jpg);
						background-size: 1920px 1080px;
						background-repeat: no-repeat;
						}
						
.notification		{	display: block;
						clear: both;
						width: 100;
						height: 1080px;
						background-color: rgba(0, 0, 0, .1);						
						}
						
.wrapnotif			{	display: block;
						clear: both;
						width: 900px;
						height: 700px;
						margin: 0 auto;						
						}
						
.examples			{	display: block;
						width: 450px;
						height: 600px;
						margin: 0;
						padding: 400px 0 0 0;
						float: left;						
						}	

.connected			{	display: block;
						width: 450px;
						height: 600px;
						margin: 0;
						padding: 150px 0 0 0;
						float: right;						
						}	

/*************************************  COMPARISON CHART  *************************/

.compare			{	display: block;
						width: 100%;
						height: 1400px;
						background-color: #ffffff;
						}		

.chart				{	display: block;
						width: 900px;
						height: 1400px;
						margin: 0 auto;						
						/*background-color: rgba(0, 0, 0, .3); */
						}
						
table				{	font-family: arial;
						font-size: 11pt;
						color: #585858;
						padding: 80px 0 0 0;
						width: 900px;
						}

.title				{	display: block;
						margin: 0;
						padding: 8px 0;
						text-align: left;
						color: black;
						}
						
td					{	text-align: center;
						padding: 5px 0;
						}

.description		{	text-align: left;
						}						
						
.lightcolor			{	background-color: #f2f2f2;
						}						

table sup 				{	font-family: arial;
						font-size: 7pt;
						}
						
.moreinfo			{	display: block;
						margin: 0;
						padding: 0;
						width: 135px;
						text-align: center;						
						}
						
.infobtn			{	display: block;
						width: 95px;
						margin: 5px auto;					
						}						
						
.infobtn a			{	display: block;
						width: 100px;
						font-family: arial;
						font-size: 11pt;						
						color: white;						
						padding: 5px;
						background-color: #0000FF; 
						border: none;
						text-align: center;						
						}
						

						
.infobtn a:hover   	{	background-color: #08088A;
						color: white;
						cursor: pointer;
						}
						
a:focus, a:visited	{ color: white;
						}
				
/**********************************  FOOTER  *****************************************/


footer				{	display: block;
						padding: 0;
						margin: 0;			
						height: 1100px;
						width: 100%;
						background-color: #1C1C1C;
						}
			
#bottom				{	display: block;
						padding: 0;
						margin: 0;
						width: 100%;
						height: 550px;
						color: #ffffff; 
						font-family: arial;				
						}

.signup				{	display: block;
						width: 900px;
						margin: 0 auto;				
						text-align: center;							
						font-size: 30pt;
						}
				
.signup p 			{	margin: 0;
						padding: 50px 0;					
							}
				
.emailform			{	width: 900px;
						margin: 0 auto;
						padding: 50px 0;					
						}

#email				{	color: #848484;
						background-color: #3C3C3C;
						border: 1px solid #3C3C3C;
						border-radius: 5px;
						padding: 5px;
						width: 500px;
						text-align: center;
						font-size: 15pt;
						}

#subscribe			{	float: right;
						width: 350px;
						color: #ffffff;
						background-color: #0000FF;
						font-size: 15pt;
						border: 2.5pt solid #0000FF;								
						}	
				
#subscribe:hover	{	cursor: pointer;
						border-color: #08088A;
						background-color: #08088A;						
						}

.follow				{	display: block;
						clear: both;
						width: 900px;
						margin: 0 auto;
						padding: 70px 0;
						font-size: 22pt;
						font-weight: bold;						
						}	

.icon				{	height: 50px;
						width: 50px;
						float: right;
						margin: 0;
						padding: 0 15px;
						}

.icon:hover			{	border: 2px solid #0049FF;
						margin: 0 15px;
						padding: 0;
						}				

#map				{	display: block;
						clear: both;
						width: 900px;
						height: 300px;
						margin: 0 auto;
						padding: 0;				
						}	

.leftcol			{	width: 298px;
						height: 300px;
						margin: 0;
						padding: 0;
						float: left;
						font-family: arial;
						font-size: 20pt;
						text-align: left;							
						}
				
.centercol			{	float: left;
						width: 298px;
						height: 300px;
						margin: 0;
						padding: 0;
						float: left;
						font-family: arial;
						font-size: 20pt;
						text-align: center;				
						}	
				
.rightcol			{	float: right;
						width: 298px;
						height: 300px;
						margin: 0;
						padding: 0;
						float: left;
						font-family: arial;
						font-size: 20pt;
						text-align: right;				
						}					
				
#map a, li			{	list-style-type: none;
						margin: 0;
						padding: 10px;
						color: #585858;
						}
						
#map a:hover			{	color: #0049FF;
						}
						
#footnote			{	width: 900px;
						height: 50px;
						margin: 200px auto 0 auto;						
						}	

#footnote  p			{	font-family: arial;
						text-align: center;
						color: #585858;
						font-size: 9pt;
						padding: 10px;					
						}
						
#footnote p:hover	{	cursor: pointer;
						color: white;
						}
						
.reqd				{	width: 1000px;
						margin: 0 auto;
						text-align: center;
						font-family: "Poppins-Light";
						font-size: 15pt;
						color: #ff2424;
						}
						
.reqd li				{	list-style-type: square;
						color: #ff2424;
						}