navigation{
	display:block;
	/*box-shadow: 0 1px 4px #BBBBBB;*/
	margin:-14.4vw auto 0 auto;
	padding: 2vw 0 2vw 0;
	/*background: whitesmoke;*/
	display: flex;
	justify-content: center;
	
	/*--- transparent back like desktop -----*/
	background-color: rgba(245, 245, 245, 0.8); /*whitesmoke*/
	/*background:orange;*/
	border-top:0.1vw solid white;
	border-bottom:0.1vw solid white;
	
	/*border-left:1px solid whitesmoke;*/
}

img.section{
	width:8vw;
	height:8vw;
	display:block;
	margin:0px auto 0 auto;
}
	/*a.section, a.sectionInfo{
		display:block;
		color: #333;
		font-family: arial;
		font-size:16px;
		padding:3px;
		text-align:center;
		width:inherit;
		text-decoration:none;
		text-shadow: 0 0px 1px #FFF;
		transition: color 0.5s, text-shadow 1.5s;
	}*/
	a.sectionSizes, a.sectionInfo, a.sectionMoments, a.sectionWish, a.sectionMedia, .sectionMore{
		background-image:url('../-img/navigation/info.png');
		background-size:8.5vw 8.5vw;
		background-repeat: no-repeat;
		background-position: 1vw 1vw;
		width:10vw;
		height:10vw;
		display:block;
		margin:0px auto 0 auto;
		transition: background-image 1s;
	}
	a.sectionSizes{
		background-image:url('../-img/navigation/sizes.png');
	}
	a.sectionMedia{
		background-image:url('../-img/navigation/media5.png');
	}
	a.sectionWish{
		background-image:url('../-img/navigation/wish2.png');
	}
	a.sectionMoments{
		background-image:url('../-img/navigation/moments.png');
	}
	.sectionMore{
		background-image:url('../-img/navigation/more.png');
	}
		a.sectionSizes:hover{
			background-image:url('../-img/navigation/sizesHover.png');
		}
		a.sectionInfo:hover{
			background-image:url('../-img/navigation/infoHover.png');
		}
		a.sectionMedia:hover{
			background-image:url('../-img/navigation/media5_hover.png');
		}
		a.sectionMoments:hover{
			background-image:url('../-img/navigation/momentsHover.png');
		}
		a.sectionWish:hover{
			background-image:url('../-img/navigation/wish2Hover.png');
		}
		.sectionMore:hover{
			background-image:url('../-img/navigation/moreHover.png');
		}
	more{
		display:block;
		position:absolute;
		top:2vw;
		right:2vw;
		text-align:left;
		margin-top:4vw;
		z-index:20;
	}
		label#triggerMore{
			font-size: 4vw;
      cursor: pointer;
      padding: 0 1vw;
		}
		#toggleMore {
  		display: none;
		}
		navOverlay{
	    display: none;
	    position: fixed;
	    top: 0;
	    left: 0;
	    width: 100vw;
	    height: 100vh;
	    background: rgba(255, 255, 255, 0.5);
	    z-index: 998;
		}
			#toggleMore:checked ~ navOverlay{
			  display: block;
			}
  		more-content {
	      display: none;
	      position: fixed;
	      top:0;
	      background-color: #fff;
	      box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.15);
	      height:45vh;
	      margin:0;
	      /*margin:5vw 0 0 -86vw;*/
	      left:0;
	      width:100vw;
	      border-right:0.2vw solid gainsboro;
	      z-index: 999;
	      text-align:center;
	    }			
	    ul.more{
			  list-style-type: none;
			  padding: 0;
			  margin-left:0vw;
			  width:100vw;
			  background-color: #fff;
			 	/*background:brown;*/
			}
			more-content li a {
				overflow: hidden;
  			text-overflow: ellipsis;
  			white-space: nowrap;
  			width:100vw;
  			/*background:yellow;*/
			}
			
			more-content a.moreOption {
	      display: block;
	      padding: 0 3vw 4vw 3vw;
	      text-decoration: none;
	      color:royalblue;
	      font-size:5.5vw;
	      padding:2.5vw;
	    }
	    more-content a.moreOption:hover {
	      background-color: #f1f1f1;
	      text-decoration: none;
	    }			
	    #toggleMore:checked ~ more-content {
	      display: block;
	    }
		img.externalMore{
			width:7vw;
			display:inline-block;
			float:none;
			margin:0.2vw 2vw -1vw 0;
			/*background:red;*/
		}
		mapFunction{
			display:inline-block;
			background-image:url('../-img/world2_blue.png');
			background-position: 	top left;
			background-repeat: 		no-repeat;
			background-size: 			4vw;
			width:4vw;
			height:4vw;
		}
		#linkAppEnableMAP, #linkAppHideLocation, #linkAppShowLocation{
			display:none;
		}
	 
/* DESKTOP VIEW MODIFICATIONS */
@media all and (min-device-width: 640px) and (min-width: 960px) and (orientation: landscape ){
	body{

	}
	
navigation{
	display:block;
	position:fixed;
	border:none;
	box-shadow: none;
	margin:45px 0 0 310px;
	padding: 5px 0;
	background: none;
	background-color: rgba(245, 245, 245, 0.5); /*whitesmoke*/
	border-left:1px solid whitesmoke;
	float:left;
	height:100vh;
	width:50px;
}

img.section{
	width:30px;
	height:30px;
	display:block;
	margin:50px auto 0 auto;
}
	/*a.section, a.sectionInfo{
		display:block;
		color: #333;
		font-family: arial;
		font-size:16px;
		padding:3px;
		text-align:center;
		width:inherit;
		text-decoration:none;
		text-shadow: 0 0px 1px #FFF;
		transition: color 0.5s, text-shadow 1.5s;
	}*/
	a.sectionSizes, a.sectionInfo, a.sectionMoments, a.sectionWish, a.sectionMedia, .sectionMore{
		background-image:url('../-img/navigation/info.png');
		background-size:30px 30px;
		background-repeat: no-repeat;
		background-position: 4px 2px;
		width:36px;
		height:36px;
		display:block;
		margin:50px auto 0 auto;
		transition: background-image 1s;
	}
	a.sectionSizes{
		background-image:url('../-img/navigation/sizes.png');
	}
	a.sectionMedia{
		background-image:url('../-img/navigation/media5.png');
	}
	a.sectionWish{
		background-image:url('../-img/navigation/wish2.png');
	}
	a.sectionMoments{
		background-image:url('../-img/navigation/moments.png');
	}
	.sectionMore{
		background-image:url('../-img/navigation/more.png');
	}
	a.sectionSizes:hover{
		background-image:url('../-img/navigation/sizesHover.png');
	}
		a.sectionInfo:hover{
			background-image:url('../-img/navigation/infoHover.png');
		}
		a.sectionMedia:hover{
			background-image:url('../-img/navigation/media5_hover.png');
		}
		a.sectionMoments:hover{
			background-image:url('../-img/navigation/momentsHover.png');
		}
		a.sectionWish:hover{
			background-image:url('../-img/navigation/wish2Hover.png');
		}
		.sectionMore:hover{
			background-image:url('../-img/navigation/moreHover.png');
		}
		/*a.section:hover{
			color:darkorange;
			text-shadow: 0 0px 10px #FFFFAA;
		}*/
	
	/*section{
		display:block;
		color:darkorange;
		font-family: arial;
		font-size:16px;
		padding:3px;
		text-align:center;
		width:40px;
		text-decoration:none;
		text-shadow: 0 0px 10px #FFFFAA;
	}*/
	
		more{
			display:block;
			position:static;
			top:auto;
			right:auto;
			display:inline-block;
			text-align:left;
			margin-top:0px;
			z-index:20;
		}
			label#triggerMore{
				font-size: 23px;
	      cursor: pointer;
	      padding: 0 5px;
			}
			#toggleMore {
    		display: none;
  		}
	  		#toggleMore:checked ~ navOverlay{
				  display: none;
				}
    		more-content {
    			margin:0;
		      display: none;
		      position: absolute;
		      z-index:20;
		      top:0;
		      background-color: #fff;
		     	box-shadow: 9.6px 0 24px rgba(0, 0, 0, 0.2);
					height: 100vh;
					margin-left: 50px;
					width: 210px;
					border-right: 2px solid gainsboro;
					text-align:left;
		    }			
		    ul.more {
				  list-style-type: none;
				  padding: 0;
				  margin-left: 0px;
				  width: 187.6px;
				  background-color: #fff;
				}
				
				more-content li a {
				  overflow: hidden;
				  text-overflow: ellipsis;
				  white-space: nowrap;
				  width: 173.6px;
				}
				more-content a.moreOption {
		      display: block;
		      padding: 12px;
		      text-decoration: none;
		      color:royalblue;
		      font-size:14px;
		    }
		    more-content a.moreOption:hover {
		      background-color: #f1f1f1;
		      text-decoration: none;
		    }			
		    #toggleMore:checked + more-content {
		      display: block;
		    }
			img.externalMore{
				width:20px;
				display:inline-block;
				float:none;
				margin:1px 6px -4px 0;
			}
			mapFunction{
				display:inline-block;
				background-image:url('../-img/world2_blue.png');
				background-position: 	top left;
				background-repeat: 		no-repeat;
				background-size: 			15px;
				width:15px;
				height:15px;
			}
			#linkAppEnableMAP, #linkAppHideLocation, #linkAppShowLocation{
				display:none;
			}
}