.header{
	position:fixed;
	width: 100%;
	top: 0px;
	left:0px;
	z-index: 100;
	padding: 0px 0px 0px 0px;
	display: inline-block;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #1969ae !important;
}

.showcase{
	position:absolute;
	left: 0px;
	width: 100%;
	top: 70px;
	z-index: 50;
	background-color:#E7E7E7;
	
}

.nodec {
	color:#1969ae;
	text-decoration:none;
}

.nodec_w {
	color:#fff;
	text-decoration:none;
}


.vivalooks{
	position:absolute;
	font-size:42px;
	right: 38%;
	width: 20%;
	top: 400px;
}

.slogan{
	position:absolute;
	font-size:18px;
	right: 37%;
	top: 450px;
}

.demo{
	width:100%;
	position:absolute;
	top: 520px;
}

.line{
	position:absolute;
	color:#747474;
	font-family:GOTHICB;
	font-size:40px;
	left: 10%;
	top: 550px;
}

.line_notes{
	position:absolute;
	color:#747474;
	font-family:"PT Sans Narrow Web Regular";
	font-size:18px;
	left: 10%;
	top: 680px;
	width:30%;
}


.ideas{
	position:absolute;
	color:#747474;
	font-family:GOTHICB;
	font-size:40px;
	left: 10%;
	top: 820px;
}




.ideas_notes{
	position:absolute;
	color:#747474;
	font-family:"PT Sans Narrow Web Regular";
	font-size:18px;
	left: 10%;
	top: 950px;
	width:30%;
}

.hang{
	position:absolute;
	font-family:GOTHICB;
	font-size:40px;
	color:#747474;
	right: 10%;
	top: 550px;
}

.hang_notes{
	position:absolute;
	color:#747474;
	font-family:"PT Sans Narrow Web Regular";
	font-size:18px;
	right: 10%;
	width:30%;
	top: 680px;
}

.connect{
	position:absolute;
	font-family:GOTHICB;
	font-size:40px;
	color:#747474;
	right: 10%;
	top: 820px;
}

.connect_notes{
	position:absolute;
	color:#747474;
	font-family:"PT Sans Narrow Web Regular";
	font-size:18px;
	right: 10%;
	top: 950px;
	width:30%;
}

.footer{
	position:fixed;
	left: 0px;
	width: 100%;
	height:30px;
	bottom: 0px;
	z-index: 50;
	background-color: #1969ae !important;
}

.whitetext {
	color: #FFF;
	text-decoration: none;
	font-size: 14px;
}

/*==========  Mobile First Method  ==========*/

        /* Custom, iPhone Retina */ 
        @media only screen and (min-width : 320px) {

        }

        /* Extra Small Devices, Phones */ 
        @media only screen and (min-width : 480px) {

        }

        /* Small Devices, Tablets */
        @media only screen and (min-width : 768px) {
			


        }

        /* Medium Devices, Desktops */
        @media only screen and (min-width : 992px) {

        }

        /* Large Devices, Wide Screens */
        @media only screen and (min-width : 1200px) {

        }



        /*==========  Non-Mobile First Method  ==========*/

        /* Large Devices, Wide Screens */
        @media only screen and (max-width : 1200px) {

        }

        /* Medium Devices, Desktops */
        @media only screen and (max-width : 992px) {
			.logo {
				width:8%;
			}
			
			
			.showcase{
			top:53px;
			
			}
			.vivalooks{
				font-size:30px;
				right: 38%;
				width: 20%;
				top: 230px;
			}
			
			.slogan{
				position:absolute;
				font-size:16px;
				right: 39%;
				top: 270px;
			}
			
			.demo{
				width:100%;
				position:absolute;
				top: 250px;
			}
			
			.line{
				font-size:24px;
				left: 3%;
				top: 250px;
			}
			
			.line_notes{
				width:35%;
				font-size:16px;
				left: 3%;
				top: 320px;
			}
			
			
			.ideas{
				font-size:24px;
				left: 3%;
				top: 490px;
			}
			
			
			.ideas_notes{
				width:35%;
				font-size:16px;
				left: 5%;
				top: 590px;
				height:150px;
			}
			
			.hang{
				font-size:24px;
				color:#747474;
				right: 3%;
				top: 250px;
			}
			
			.hang_notes{
				width:29%;
				font-size:16px;
				right: 5%;
				top: 340px;
			}
			
			.connect{
			
				font-size:24px;
				color:#747474;
				right: 10%;
				top: 490px;
			}
			
			.connect_notes{
				width:32%;
				font-size:16px;
				right: 3%;
				top: 590px;
			}
			
			.footer{
			height:30px;
			bottom: 0px;
			}
			
			
}
        

        /* Small Devices, Tablets */
        @media only screen and (max-width : 640px) {
	
			.showcase{
				top:40px;
				
				}

			.line_notes{
				width:35%;
				font-size:14px;
				left: 1%;
			}
			
			
			
			.ideas_notes{
				width:35%;
				font-size:14px;
				left: 1%;

			}
			
			
			.hang_notes{
				width:35%;
				font-size:14px;
				right: 0%;
			}
			
			.connect_notes{
				width:35%;
				font-size:14px;
				right: 0%;
			}
        }

        /* Extra Small Devices, Phones */ 
        @media only screen and (max-width : 480px) {
			.showcase{
				width:103%;
				top: 47px;
				}
				
				.logo {
					width:15%;
				}

				.vivalooks{
					font-size:30px;
					right: 45%;
					width: 20%;
					top: 130px;
				}
				
				.slogan{
					position:absolute;
					font-size:14px;
					right: 5%;
					top: 180px;
				}
				
				.demo{
					width:100%;
					position:absolute;
					top: 200px;
				}
				
				.line{
					font-size:24px;
					left: 25%;
					top: 650px;
				}
				
				.line_notes{
					width:100%;
					font-size:16px;
					left: 3%;
					top: 720px;
				}
				
				.ideas{
					font-size:24px;
					left: 25%;
					top: 840px;
				}
				
				
				.ideas_notes{
					width:100%;
					font-size:16px;
					left: 3%;
					top: 940px;
				}
				
				.hang{
					font-size:24px;
					right: 25%;
					top: 1070px;
				}
				
				.hang_notes{
					width:100%;
					font-size:16px;
					left: 3%;
					top: 1110px;
				}
				
				.connect{
				
					font-size:24px;
					color:#747474;
					right: 35%;
					top: 1230px;
				}
				
				.connect_notes{
					width:100%;
					font-size:16px;
					left: 3%;
					top: 1320px;
					height:80px;
				}
				
				.footer{
				height:30px;
				bottom: 0px;
				}
		}
		

		@media only screen and (max-width : 414px) {

				.vivalooks{
					font-size:30px;
					right: 45%;
					width: 20%;
					top: 130px;
				}
				
				.slogan{
					position:absolute;
					font-size:14px;
					right: 30%;
					top: 180px;
				}
        }

        /* Custom, iPhone Retina */ 
        @media only screen and (max-width : 375px) {

			.showcase{
				width:106%;
				top: 40px;
				}
				
				.logo {
					width:15%;
				}

				.vivalooks{
					font-size:30px;
					right: 45%;
					width: 20%;
					top: 130px;
				}
				
				.slogan{
					position:absolute;
					font-size:14px;
					right: 5%;
					top: 180px;
				}
				
				.demo{
					width:100%;
					position:absolute;
					top: 150px;
				}
				
				.line{
					font-size:24px;
					left: 25%;
					top: 650px;
				}
				
				.line_notes{
					width:100%;
					font-size:16px;
					left: 3%;
					top: 720px;
				}
				
				.ideas{
					font-size:24px;
					left: 25%;
					top: 840px;
				}
				
				
				.ideas_notes{
					width:100%;
					font-size:16px;
					left: 3%;
					top: 940px;
				}
				
				.hang{
					font-size:24px;
					right: 25%;
					top: 1020px;
				}
				
				.hang_notes{
					width:100%;
					font-size:16px;
					left: 3%;
					top: 1110px;
				}
				
				.connect{
				
					font-size:24px;
					color:#747474;
					right: 35%;
					top: 1230px;
				}
				
				.connect_notes{
					width:100%;
					font-size:16px;
					left: 3%;
					top: 1320px;
					height:80px;
				}
				
				.footer{
				height:30px;
				bottom: 0px;
				}

        }