/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Body - General Layout Structure	
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body {
	margin: 0;
	padding: 0;
	background-color: #f1f1f1;
	font: 18px/20px Verdana, Arial, geneva, sans-serif;
	text-transform: uppercase;
	text-align: left;
	color: #0082a2;
	width: 100%;
	height: 100%;
	overflow: hidden;
	}

	 /* TEAM COLORS */
	.fill_red_cardinals {fill: #982540;}
	.fill_blue_bills {fill: #243E86;}
	.fill_red_bills {fill: #C61F40;}
	.fill_yellow_ravens {fill: #BA9231;}
	.fill_blue_ravens {fill: #2B296F;}
	.fill_blue_panthers {fill: #0D85C8;}
	.fill_grey_panthers {fill: #BFC0BF;}
	.fill_blue_bears {fill: #0D182B;}
	.fill_red_bears {fill: #C73D27;}
	.fill_blue_lions {fill: #0377B7;}
	.fill_blue_colts {fill: #1B305D;}
	.fill_blue_texans {fill: #0A212E;}
	.fill_yellow_jaguars2 {fill: #A07A2C;}
	.fill_yellow_jaguars {fill: #D7A329;}
	.fill_blue_jaguars {fill: #086879;}
	.fill_black_chiefs {fill: #121210;}
	.fill_red_chiefs {fill: #E21D39;}
	.fill_orange_dolphins {fill: #F58220;}
	.fill_blue_dolphins {fill: #038E97;}
	.fill_blue_dolphins2 {fill: #025878;}
	.fill_pink_vikings {fill: #E8BF9B;}
	.fill_yellow_vikings {fill: #FFC731;}
	.fill_purple_vikings {fill: #502D82;stroke: #010101;stroke-width:0.1563;}
	.fill_red_redskins {fill: #5B2C2F;}
	.fill_blue_titans2 {fill: #5191CD;}
	.fill_blue_titans {fill: #16253E;}
	.fill_grey_buccaneers {fill: #B2BBC0;}
	.fill_orange_buccaneers {fill: #F47920;stroke: #F47920;stroke-width:0.3125;}
	.fill_red_buccaneers {fill: #D42027;stroke: #D42027;stroke-width:0.25;}
	.fill_green_seahawks {fill: #6BBE45;}
	.fill_red_niners {fill: #A91E22;}
	.fill_blue_steelers {fill: #01549C;}
	.fill_green_eagles {fill: #064C54;}
	.fill_blue_chargers2 {fill: #071933;}
	.fill_blue_chargers {fill: #0981C4;}
	.fill_blue_giants {fill: #232B62;}
	.fill_yellow_saints {fill: #D3BC8D;}
	.fill_orange_browns {fill: #EF4323;}
	.fill_brown_browns {fill: #2B1E15;}
	.fill_blue_nfl {fill: #1D3768;}

	 /* GENERIC COLORS */
	.fill_white {fill: #FFFFFF;}
	.fill_black {fill: #000000;}
	.fill_black2 {fill: #010101;}
	.fill_grey {fill: #A6ACAF;}
	.fill_grey2 {fill: #B1B7BD;}
	.fill_yellow {fill: #FDB518;}
	.fill_yellow2 {fill: #EEAE1F;}
	.fill_yellow3 {fill: #B3985D;}
	.fill_red {fill: #A71E31;}
	.fill_red2 {fill: #C62032;}
	.fill_red3 {fill: #D42027;}
	.fill_orange {fill: #F05323;}
	.fill_blue {fill: #0B2444;}
	.fill_green{fill: #213732;}

	.stroke_black { 
		fill: none;
		stroke: #000000;
		stroke-width: 0.5;
		}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
GENERIC STUFF
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

	#wrapper {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		}
		#morph,
		#ui {
			display: block;
			position: absolute;
			top: 50%;
			left: 50%;
			width: 1000px;
			height: 1000px;
			margin: -500px 0px 0px -500px;
			margin: -450px 0px 0px -500px;
			}
			#ui svg {
				margin: 0;
				width: 100%;
				display: none;
				}
				.logo {
					display: none;
				}

			#morph svg {
				margin: 0;
				width: 100%;
				}
				#morphme {
					opacity: 0;
				}
				#morph_target {
					fill: #CCCCCC;
				}
				.morph_hide {
					display: none;
				}

		#options {
			position: absolute;
			top: 5px;
			left: 0px;
			padding: 0;
			color: #000;
			font-family: Verdana;
			font-size: 10px;
			text-align: center;
			width: 100%;
			}

			#options .navicon {
				display: inline-block;
				border-radius: 5px;
				outline: none;
				border: 0;
				color: #000;
				text-decoration: none;
				-webkit-transition: background-color 1s cubic-bezier(0.25,1,0.25,1);
				   -moz-transition: background-color 1s cubic-bezier(0.25,1,0.25,1);
					-ms-transition: background-color 1s cubic-bezier(0.25,1,0.25,1);
					 -o-transition: background-color 1s cubic-bezier(0.25,1,0.25,1);
						transition: background-color 1s cubic-bezier(0.25,1,0.25,1);
			}
			#options .navicon.activate {
				background-color: #CCCCCC;
			}

			.navicon {
				display: inline-block;
				margin: 0px;
				padding: 0px;
				opacity: 0;
				border-radius: 5px;
			}

			.navicon img {
    			display: block;
				width: 50px;
				height: 50px;
			}
			
			
	@media screen and (max-width: 600px) {
		#morph,
		#ui {
			width: 700px;
			height: 700px;
			margin: -350px 0px 0px -350px;
			margin: -300px 0px 0px -350px;

			}
			#morph svg,
			#ui svg {
				width: 700px;
				height: 700px;
				margin: 0;
				}

			.navicon {
				display: inline-block;
				margin: -12px -3px -10px -3px;
				padding: 0px;
				opacity: 0;
			}
	}
	
	
	@media screen and (max-width: 500px) {
		#morph,
		#ui {
			width: 600px;
			height: 600px;
			margin: -300px 0px 0px -300px;
			margin: -200px 0px 0px -300px;

			}
			#morph svg,
			#ui svg {
				width: 600px;
				height: 600px;
				margin: 0;
				}
	}