#navigation { background-color: rgba(255, 255, 255, .5); }

.navigation-wrapper { 
	.navigation {
		.block-superfish { float: left;
			.content { float: left;
				ul { margin: 0px;
					li { background-color: transparent; float: left;
						.nolink, a { background-color: transparent; border-left: 0px; border-top: 2px solid transparent; color: $black; cursor: pointer; display: block; font-size: 16px; line-height: 1; padding-left: 20px; padding-bottom: 23px; padding-top: 21px; white-space: nowrap;
							&:hover { background-color: $blue-dark; border-top: 2px solid $blue; color: $blue; text-decoration: none; }
                            &.active { border-top: 2px solid $blue; }
						}

						ul { @include background-image(none); @include border-radius(0px); background-color: $blue-dark; margin: 25px 0px 0px 0px; padding: 0px !important; width: 220px !important;
							li { float: none; display: block; min-width: 100%;
								.nolink, a { @include transition(background-color .1s ease-in, padding-left .1s ease-in); border-top: 0px !important; color: #ffffff !important; display: block; font-size: 14px; padding-right: 20px; padding-bottom: 15px; padding-top: 15px;
									&.menuparent { background-image: url('../img/arrow-right-white.png'); background-position: 90%; background-size: 8px 11px; background-repeat: no-repeat; 
										@media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
											background-image: url('../img/arrow-right-white@2x.png') !important;
										}
										&:hover {
											background-image: url('../img/arrow-right-white.png') !important;
											@media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
												background-image: url('../img/arrow-right-white@2x.png') !important;
											}
										}
									}

									&:hover {  background-color: $blue; padding-left: 25px; }
								}
								ul { left: 220px !important; margin-top: 0px; }
							}
						}
						&.sfHover {
						  .nolink, a { background-color: $blue-dark; border-top: 2px solid $blue; color: $blue; text-decoration: none; }
						}

                        &.menuparent {
                          > .nolink,
                          > a { background-image: url('../img/arrow-bottom-black.png'); background-position: 90% center; background-repeat: no-repeat; background-size: 11px 8px; padding-right: 40px;
                            @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
                              background-image: url('../img/arrow-bottom-black@2x.png');
                            }
                          }
                        }

                        &.menuparent:hover, &.menuparent.sfHover {
                            > .sf-depth-1.nolink,
                            > a.sf-depth-1 { background-image: url('../img/arrow-bottom-white.png');
                                @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
                                  background-image: url('../img/arrow-bottom-white@2x.png');
                                }
                            }
                        }
					}
				}
			}
		}

		#block-realia-blocks-realia-language { @include shadow; float: right; margin: 11px 0px 11px 0px;
			.content { 
				.default { position: relative;
					ul { margin: 0px; padding: 0px; }
					li {
						&.en { 
							a { background-image: url('../img/flags/United-Kingdom-Flag.png'); background-position: left center; background-repeat: no-repeat; background-size: 16px 16px; margin-left: 15px; 
								@media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
									background-image: url('../img/flags/United-Kingdom-Flag@2x.png'); 
								}
							}
						}
						&.de { 
							a { background-image: url('../img/flags/Germany-Flag.png'); background-position: left center; background-repeat: no-repeat; background-size: 16px 16px; margin-left: 15px; 
								@media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
									background-image: url('../img/flags/Germany-Flag@2x.png'); 
								}
							}
						}							
						&.fr { 
							a { background-image: url('../img/flags/France-Flag.png'); background-position: left center; background-repeat: no-repeat; background-size: 16px 16px; margin-left: 15px; 
								@media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
									background-image: url('../img/flags/France-Flag@2x.png'); 
								}
							}
						}											
					}
					.current {
						ul { list-style: none; padding: 0px; 
							li { background-color: #ffffff; background-image: url('../img/arrow-bottom-black.png'); background-position: right center; background-repeat: no-repeat; background-size: 11px 7px; border-right: 9px solid #ffffff;
								a { color: $black; display: block; text-decoration: none; padding: 10px 35px 10px 25px; width: 186px; }
							}
						}
					}
					.expand { display: none; position: absolute; right: 0px; top: 40px; z-index: 999;
						ul { background-color: #ffffff; list-style: none;
							li { display: block; 
								a { color: $black; display: block; padding: 10px 35px 10px 25px; text-decoration: none; width: 195px; }
							}
						}
					}
				}
			}
		}		
	}
}

@media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
  .navigation-wrapper {
    .navigation {
      #block-realia-blocks-realia-language {
        .content {
          .default {
            .current {
              ul {
                li { background-image: url('../img/arrow-bottom-black@2x.png'); }
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 1199px) {
	.navigation-wrapper { 
		.navigation {
			#block-realia-blocks-realia-language {
				.content {
					.default {
						.current {
							ul {
								li {
									a { width: 136px; }
								}
							}
						}
						.expand { 
							ul {
								li { 
									a { width: 145px; }
								}
							}
						}
					}
				}
			}
		}
	}	
}

@media (max-width: 979px) {
	.navigation-wrapper { background-color: $blue-dark; height: 100%; left: -70%; position: absolute; top: 0; width: 70%;
      .navigation {
        .block-superfish { float:none;
          .content { float: none;
            ul { display: block; float: none; margin: 0px;
              li { clear: both; display: block; float: none; text-align: right;
                .nolink, a { background-image: none !important; border: 0px !important; color: #fff; display: block; font-size: 14px; font-weight: bold; padding-bottom: 20px; padding-top: 20px;
                  &:hover { background-color: transparent; border: 0px !important; }
                }
                &.sfHover {
                  a { border: 0px !important; color: #ffffff; }
                }
                ul { border-right: 2px solid #ffffff !important; display: block !important; float: none; left: auto !important; margin: 0px 15px 0px 0px !important; position: relative !important; top: auto !important; visibility: visible !important; width: auto !important;
                  li {
                    a { border: 0px; font-size: 14px;
                      &:hover { background-color: transparent; border: 0px; color: $blue !important; }
                    }
                    ul { border-right: 2px solid #ffffff !important; display: block !important; float: none; left: auto !important; margin: 0px 15px 0px 0px !important; position: relative !important; top: auto !important; visibility: visible !important; width: auto !important; }
                  }                 
                }
              }
            }
          }
        }

        #block-realia-blocks-realia-language { display: none; }
      }
    }
}