header {
    /*background-color: rgb(140, 193, 193);*/
    background-color: white;
	
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
    display: flex;
	
    -webkit-flex-direction: column;
    flex-direction: column;
    text-align: center;
	background: rgba(243,243,243,1);
/*	
	background: rgb(255,255,255);
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(243,243,243,1)), color-stop(51%,rgba(237,237,237,1)), color-stop(100%,rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
*/	
}
	#logonavimg > img {
		display: none;
	}
		
	#navmaincart {
		display: none;
	}

    header > div#logo {
		height: 50px;
        line-height: 50px;
		display: block;
        position: relative;
		background: rgba(243,243,243,1);
/*
		background: rgb(255,255,255);
		background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,1) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(243,243,243,1)), color-stop(51%,rgba(237,237,237,1)), color-stop(100%,rgba(255,255,255,1)));
		background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
		background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
		background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
		background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
*/		
    }
	
	/*header > div > img#logoimg {*/
	#logoimg {
		height: 50px;
		width: auto;
		position:relative;
		padding: 10px 10px 10px 100px;
	 }


	 header > div > a > p {
		display:inline;
		width: 100px;
		line-height:50px;
		font-size: 8px;
		position: absolute;
		bottom: 0px;
		left: calc(100% - 100px);
		margin-bottom: 0;
	}

	header > div > a > img#cartimgM {
        background-color: white; /*rgba(0,0,0,.15);*/
		height: 50px;
		width: 100px;
		position:relative;
		display: block;
		float: right ;/*left;*/

		background: rgba(243,243,243,1);
/*		
		background: rgb(255,255,255); 
		background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,1) 100%); 
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(243,243,243,1)), color-stop(51%,rgba(237,237,237,1)), color-stop(100%,rgba(255,255,255,1)));
		background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
		background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
		background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
		background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
*/		
	 }

	 header > div > a > img#cartimgM:hover {
		background:white;
		background-color: rgba(85,140, 201, .5); /* rgba(0, 115, 230, .5);/*rgba(0,0,0,.1);*/
  	}
	
    
    header > .menuDown {
        box-shadow: 0 3px 5px rgba(0,0,0,.15);
    }
    
    header > .menuUp {
        box-shadow: none;
    }
    
        header > div#logo > div#navToggle {
            background-color: white; /*rgba(0,0,0,.15);*/
            position: absolute;
			left: 0;
            /*right: 0;*/
            top: 0;
            transition: 100ms all ease;
			z-index: 100;

			background: rgba(243,243,243,1);
/*			
			background: rgb(255,255,255);
			background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,1) 100%);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(243,243,243,1)), color-stop(51%,rgba(237,237,237,1)), color-stop(100%,rgba(255,255,255,1)));
			background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
			background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
			background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
			background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
*/			
        }
            header > div#logo > div#navToggle:hover {
				background: white;
                background-color: rgba(85,140, 201, .5); /*rgba(0, 115, 230, .5);/*rgba(0,0,0,.1);*/
            }
            
            header > div#logo > div#navToggle > a {
				max-height: 50px;
                color: rgba(255,255,255,.85);
                display: block;
                font-size: 0.85em;
                padding: 0;
                text-decoration: none;
                transition: 100ms all ease;
            }
            
                header > div#logo > div#navToggle:hover > a {
                    color: rgba(255,255,255,1);
                }
				header > div#logo > div#navToggle > a img{
					max-height: 50px;
					width: 100px;
					padding: 16px 35px;
				}

    header > nav {
        background-color: white;
        display: none;
		-webkit-box-flex: 1;
		-moz-box-flex: 1;
		width: 100%;
		-webkit-flex: 1;
        flex: 1;
		
    }
    
        header nav > ul {
            list-style-type: none;   
        }
        
            header nav > ul > li {
                border-bottom: 1px dotted rgba(0,0,0,.1);
                position: relative;
            }
				 header nav > ul > li > nav > ul > li:first-of-type {
					display: block;
				 }	 
				 header nav > ul > li > nav > ul > li:last-of-type {
					display: block;
				 }	 
            
                header nav > ul > li > a {
                    display: block;
                    color: rgba(0,0,0,.65);
					font-size: 16px;
                    font-weight: 400;
                    padding: 1.5rem 0;
				
                    text-decoration: none;
                    transition: 250ms all ease;
                }
				
 /*     Use for breaking out multiiple products         */
                    header nav > ul > li > a span.toggle {
                        background-color: rgba(0,0,0,.05);
                        border-radius: 3rem;
                        color: rgba(0,0,0,.25);
                        font-size: 0.75em;
                        font-weight: 500;
                        padding: 2px 8px;
                    }
                    
                    header nav > ul > li > a span.caret {
                        display: none;
                    }
				
                    header > nav > ul > li:hover > a {
                        color: rgb(140, 193, 193);
                    }
						
						header > nav > ul > li > nav {
							background-color: rgb(51,51,51);
							border-radius: 1.5em;
							box-shadow: 0 2px 8px rgba(0,0,0,.6);
							display: none;
							overflow: hidden;
							position: absolute;
							right: 5%;
							width: 90%;
							z-index: 100;
						}
            
							header > nav > ul > li > nav > ul > li > a {
								color: rgba(255,255,255,.85);
								transition: 300ms all ease;
							}
                
							header > nav > ul > li > nav > ul > li:hover > a {
								background-color: rgba(0,0,0,.6);
								color: rgba(255,255,255,1);
							}

	#homsense {
		display: none;
	}

	#navproduct {
		height: 40px;
		line-height: 40px;
		font-size: 14px;

		/*background-color: rgba(50,50,50,1);*/
		background-color: #292c2f;
		
		/*box-shadow: 0 3px 5px rgba(0,0,0, .15);*/
	}

	#navproduct ul {
		list-style: none;
		margin: 0;
		padding: 0;
		width: 100%;
	}

	#navproduct ul li ul {
		list-style: none;
		position: absolute;
		margin: 0;
		padding: 0;
		width: 100%;
		z-index: 100;
	}

	#navproduct > ul > li {
		float: left;
		margin: 0;
		padding: 0;
		position: relative;
		min-width: 25%;
		width: 33.333%;
	}
	
	/*#navproduct > ul > li > a {*/
	#navproduct  ul  li  a {
		color: #ddd;
		display: block;
		line-height: 40px;
		text-align: center;
		text-decoration: none;
	}

	#navproduct ul li ul a {
		text-decoration: none;
		display: none;
		text-align: center;
		color: #ddd;
		color: #444;
		background-color: white;
		border-bottom: 1px solid rgb(238,238,238);
	}
	
	#navproduct #homsense {
		color: orange;
		font-size: 14px;
	}
	
	#navproduct #navprodbuy {
		color: lightgreen;
	}	
/*
	.cf {
		clear: both;
	}
*/
	#mainpanoramic {
		/*background-color: #f7f7f7;*/
		background-color: #444;
	}
	#navproductwide {
		display: none;
	}
	#navproductmenuwide {
		display: none;
	}

/*Handle iPhone Portait*/							
@media all and (min-width: 376px) {

	#homsense {
		display: block;
		-webkit-flex-grow: 1;
		flex-grow: 1;
		max-width: 150px;
		line-height: 40px; /*defines height of navproduct bar*/
		text-align: center;
		font-size: 20px;
		color: orange;
	}
	#navproductwide > ul {
		list-style-type: none;    
		display: -webkit-box;     
		display: -moz-box;        
		display: -ms-flexbox;     
		display: -webkit-flex;     
		display: flex;
		-webkit-flex-wrap: nowrap;
		flex-wrap: nowrap;
		
	}
		
	#navproductwide  > ul > li > a {
		display: block;
		color: #ddd;
		color: white;
		font-size: 12.5px;
		font-weight: 400;
		padding: 0 1.25rem 0 0;

		text-decoration: none;
		transition: 250ms all ease;
	}
		
	#navproductwide > ul > li > a:hover {
		color: rgb(140, 193, 193);
	}    
	
	#navprodbuy {
		text-decoration: none;
		color: lightgreen;
		text-align: center;
		line-height: 40px;
		width: 150px;
		max-width: 150px;
		-webkit-flex-grow: 1	;
		flex-grow: 1;
	}
	
}


/* Medium screens */
@media all and (min-width: 715px) 
{
	#navproduct {
		display:none;
	}
	#navproductmenuwide {
		/*background-color: #f7f7f7;*/
		background-color: #444;
		display: -webkit-box;     
		display: -moz-box;        
		display: -ms-flexbox;     
		display: -webkit-flex;     
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
		-webkit-justify-content: space-around;
		justify-content: space-around;
		margin: 0 auto;
		width: 100%;
		max-width: 1000px;
	}
		
	#navproductwide_OLD {
		background-color: #292c2f;
		/*background-color: #f7f7f7;*/
		background-color: #444;
		line-height: 40px; /*defines height of navproduct bar*/
		text-align: center;
		width: 100%;
		
		display: -webkit-box;     
		display: -moz-box;        
		display: -ms-flexbox;     
		display: -webkit-flex;     
		display: flex;
	
		-webkit-flex: 2;
		flex: 2;
		
		-webkit-flex-direction: row;
		flex-direction: row;
		
		-webkit-justify-content: flex-end; /*space-around;*/
		justify-content: flex-end; /*space-around;*/
	}
	
	#navproductwide {
		background-color: #292c2f;
		/*background-color: #f7f7f7;*/
		background-color: #444;
		line-height: 40px; /*defines height of navproduct bar*/
		text-align: center;
		width: 100%;
		
		display: -webkit-box;     
		display: -moz-box;        
		display: -ms-flexbox;     
		display: -webkit-flex;     
		display: flex;
	
		-webkit-flex: 2;
		flex: 2;
		
		-webkit-flex-direction: row;
		flex-direction: row;
		
		-webkit-justify-content: flex-end; /*space-around;*/
		justify-content: flex-end; /*space-around;*/
	}

    header > div#logo > div#navToggle {
        display: none;    
    }
	header > div > a > p {
		display:none;
	}
    header {
        background-color: white;
		height: 80px;
		height: 65px;
        -webkit-flex-direction: row;
        flex-direction: row;
        line-height: 80px;
        line-height: 65px;
        text-align: center;
        width: 100%;
    }
    
        header > div#logo {
            background-color: transparent;
            line-height: 50px;
        }

		header > div > a > img#logoimg {
			display: none;
		 }
		 
		header > div > a > img#cartimgM {
			display: none;
		}

		header > nav {
			max-width: 1000px;
			margin: 0px auto;
			height: 50px;
			background-color: transparent;
			/*display: block;*/

			display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
			display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
			display: -ms-flexbox;      /* TWEENER - IE 10 */
			display: -webkit-flex;     /* NEW - Chrome */
            display: flex;
            -webkit-flex-flow: row wrap;
            flex-flow: row wrap;
            -webkit-justify-content: space-around;    
            justify-content: space-around;    
		}

		/*header > nav > ul > li > a#logonavimg {*/
		#logonavimg, #navmaincart {
			display:block;
			-webkit-flex-grow: 1	;
			flex-grow: 1;
			max-width: 150px;
		}
		
		#logonavimg > img {
			display: block;

			height: 50px;
			width: auto;
			margin-left: auto;
			margin-right: auto;
			margin-top: 7px;
			padding: 10px 12px;

			/*
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			*/
		 }
		 a#navmaincart {
			 width: 150px;
		 }
		 #navmaincart {
			background: url("./img/cart.svg") center center no-repeat;
			background-size: 60px;
			text-decoration: none;
			height: 80px;
			height: 65px;
		 }
		 #navmaincart > p {
			 line-height: 80px;
			 line-height: 65px;
			 width: 20px;
			 font-size: 10px;
			 position: relative;
			 margin: 10px auto 0px auto;
			 bottom: 11px;
		 }		
		 #navmaincart > p:hover {
			 color: green;
			 font-size: 10px;
		 }
		 
		header > nav > ul {
			display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
			display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
			display: -ms-flexbox;      /* TWEENER - IE 10 */
			display: -webkit-flex;     /* NEW - Chrome */
            display: flex;
            -webkit-flex-flow: row wrap;
            flex-flow: row wrap;
            -webkit-justify-content: space-around;    
            justify-content: space-around;    
			
			-webkit-flex-grow: 2	;
			flex-grow: 2;

        }

            header nav > ul > li {
                border-bottom: none;
            }
    
                header nav > ul > li > a {
                    padding: 0 1.25rem;
                }
				
/*    Use for breaking out multiiple products   */              
                    header nav > ul > li > a span.toggle {
                        display: none;    
                    }
                    
                    header nav > ul > li > a span.caret {
                        border-bottom: 4px solid transparent;
                        border-top: 4px solid rgba(0,0,0,.65);
                        border-right: 4px solid transparent;
                        border-left: 4px solid transparent;
                        border-radius: 1px;
                        content: "";
                        display: inline-block;
                        height: 0;
                        margin: 0 0 0 .25rem;
                        transition: 250ms all ease;
                        width: 0;
                        vertical-align: middle;
                    }
                    
                        header nav > ul > li:hover > a span.caret {
                            border-top-color: rgb(140, 193, 193);
                            transform: rotate(270deg); 
                        }
    
    header > nav > ul > li:hover > nav {
        background-color: rgb(51,51,51);
        border-radius: .25em;
        box-shadow: 0 2px 8px rgba(0,0,0,.6);
        display: block;
        line-height: 3em;
        right: -50%;
        width: 196px;
    }
}