.full-height { height: 100%; padding: 0; } .error-container { display: flex; align-items: center; } .error-figure { display: none; flex: 0 0 50%; padding: @line-height-computed * 2; @media (min-width: @screen-sm-min) { display: block; } } .error-figure-500 { &::before { content: ''; display: block; position: fixed; top: 0; bottom: 0; left: 0; right: 80%; background-image: url(/img/brand/500-visual-plug.svg); background-size: 400px; background-repeat: no-repeat; background-position: right 70%; pointer-events: none; } &::after { content: ''; display: block; position: fixed; top: 0; bottom: 0; left: 0; right: 50%; background-image: url(/img/brand/500-visual-tail.svg); background-size: 100px; background-repeat: no-repeat; background-position: 90% bottom; pointer-events: none; } } .error-img { display: block; max-width: 380px; height: auto; margin: 0 auto; } .error-details { flex: 0 1 50%; padding: @line-height-computed * 2; } .error-code { font-family: @font-family-sans-serif; font-size: @font-size-h1 * 4; font-weight: 800; color: @red; margin-bottom: @line-height-computed; } .error-status { font-family: @font-family-serif; margin-bottom: (@line-height-computed / 4); line-height: 1; color: @gray-dark; font-size: @font-size-h1; } .error-description { font-family: @font-family-serif; font-size: @font-size-h3; color: @gray-light; margin-bottom: @line-height-computed * 2; } .error-btn { color: @navbar-default-link-color; border: 2px solid @navbar-default-link-color; border-radius: @border-radius-base; font-weight: 700; line-height: 1; padding: @padding-base-vertical @padding-base-horizontal; &:hover, &:focus { text-decoration: none; color: #fff; background-color: @navbar-default-link-hover-bg; border: 2px solid @navbar-default-link-hover-color; } }