Regular Expressions 101

Save & Share

Flavor

  • PCRE2 (PHP >=7.3)
  • PCRE (PHP <7.3)
  • ECMAScript (JavaScript)
  • Python
  • Golang
  • Java 8
  • .NET 7.0 (C#)
  • Rust
  • Regex Flavor Guide

Function

  • Match
  • Substitution
  • List
  • Unit Tests

Tools

Sponsors
There are currently no sponsors. Become a sponsor today!
An explanation of your regex will be automatically generated as you type.
Detailed match information will be displayed here automatically.
  • All Tokens
  • Common Tokens
  • General Tokens
  • Anchors
  • Meta Sequences
  • Quantifiers
  • Group Constructs
  • Character Classes
  • Flags/Modifiers
  • Substitution
  • A single character of: a, b or c
    [abc]
  • A character except: a, b or c
    [^abc]
  • A character in the range: a-z
    [a-z]
  • A character not in the range: a-z
    [^a-z]
  • A character in the range: a-z or A-Z
    [a-zA-Z]
  • Any single character
    .
  • Alternate - match either a or b
    a|b
  • Any whitespace character
    \s
  • Any non-whitespace character
    \S
  • Any digit
    \d
  • Any non-digit
    \D
  • Any word character
    \w
  • Any non-word character
    \W
  • Non-capturing group
    (?:...)
  • Capturing group
    (...)
  • Zero or one of a
    a?
  • Zero or more of a
    a*
  • One or more of a
    a+
  • Exactly 3 of a
    a{3}
  • 3 or more of a
    a{3,}
  • Between 3 and 6 of a
    a{3,6}
  • Start of string
    ^
  • End of string
    $
  • A word boundary
    \b
  • Non-word boundary
    \B

Regular Expression
No Match

/
/
g

Test String

Code Generator

Generated Code

const regex = /@media.*(.*\n)*?\n@med/g; // Alternative syntax using RegExp constructor // const regex = new RegExp('@media.*(.*\\n)*?\\n@med', 'g') const str = `@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;900&display=swap); .version.A0001 { text-emphasis: none; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } audio, canvas, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } [hidden] { display: none; } html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; padding: 0; } a, a:focus, a:active, a:hover { outline: 0; text-decoration: none; color: inherit; } h1 { font-size: 2em; margin: 0.67em 0; } h1, h2, h3, h4 { margin-block-end: unset; margin-block-start: unset; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } mark { background: #ff0; color: #000; } code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } pre { white-space: pre-wrap; } q { quotes: "“" "”" "‘" "’"; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } figure { margin: 0; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; } button, input { line-height: normal; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } table { border-collapse: collapse; border-spacing: 0; } ul { list-style-type: none; } img { image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; -ms-interpolation-mode: nearest-neighbor; } body { font-family: "Open Sans", sans-serif !important; font-weight: 400; overflow-x: hidden; overflow-y: auto; width: 100vw; color: #555555; } body.red-theme { background-color: #ffffff; } body.grey-theme { background: linear-gradient(45deg, #1b1b1b 15%, #000 85%); } #palette { position: relative; z-index: 44; } .clrset { display: flex; flex-wrap: wrap; flex-direction: row; } .colorm { width: 110px; height: 60px; display: flex; align-items: center; margin-top: 60px; } .cbg_band { background-color: #ffffffe0; padding: 5px; color: black; font-size: 0.8em; position: relative; top: -55px; text-align: center; } @media (max-width: 46.24em) { body, html { max-width: 100vw; position: relative; width: 100vw; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { font-size: 16px; } } @media (min-width: 46.25em) and (max-width: 61.24em) { html { font-size: 18px; } } .thumb-vertical { background-color: rgba(122, 122, 122, 0.34) !important; border-radius: 12px; width: 6px !important; left: -2px; border: solid rgba(122, 122, 122, 0.34) 1px !important; z-index: 4444 !important; } .sb { height: 100vh !important; width: 100vw; position: relative !important; top: 0px !important; left: 0 !important; overflow-x: hidden; } #content { font-size: 0.875rem; min-height: calc(100vh - 4rem); margin-top: 3.875rem; line-height: 1.8rem; position: static; text-align: justify; } #content p { hyphens: auto; } #content h1, #content h2 { text-align: center; text-transform: uppercase; cursor: default; } .stitle { color: #555555; font-weight: 700; } p { line-height: 150%; text-align: justify; } .button { color: beige; background-color: red; padding: 10px 70px; font-weight: 700; } h2 { color: red; font-weight: 300; font-size: 2.5rem; } .ah2 { font-weight: 300; display: block; text-align: center; color: white; } .clear { clear: both; display: block; line-height: 0; } .nrmgn { margin-right: 0 !important; } .wrap { text-align: center; width: 100%; padding-bottom: 2.5rem; margin-top: 8.375rem; max-width: 68.75rem; margin: 0 auto; padding-top: 2.5rem; } .col_half { position: relative; margin-right: 2.75rem; margin-top: 1rem; float: left; width: 31.6rem; } .col_full { position: relative; margin-right: 2.75rem; float: left; width: 100%; } .col_1x4 { display: block; float: left; width: 21%; margin: 0; margin-right: 4%; padding: 0; } .col_1x3 { display: block; float: left; width: 19.87rem; margin: 0; margin-right: 0; padding: 0; } .col_2x3 { display: block; float: left; width: 47.14rem; margin: 0; margin-right: 2%; padding: 0; } .spacer { clear: both; padding: 3rem 0; float: none; } .paralaxe { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; z-index: -2; min-width: 100%; } .nopattern::before { content: none !important; } .button { background: #dc1e25; border-radius: 3px; box-shadow: 0 -2px rgba(0, 0, 0, 0.2) inset; color: #ffffff; font-weight: 700; font-style: normal; opacity: 0.85; padding: 0.5rem 2rem; font-family: Arial, Helvetica, sans-serif !important; font-size: 0.85rem; width: 2.2rem; left: 0.5rem; color: white; letter-spacing: 0.6px; text-shadow: 0 1px rgba(0, 0, 0, 0.3); position: relative; } .button .ic2, .button .ic1 { width: 0.8rem; position: absolute; top: 0.5rem; filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.3)); } .button .ic1 { left: 0.625rem; } .button .ic2 { right: 0.625rem; } .button g > path { fill: currentColor; } .button:hover { opacity: 1; color: white; } .sep-shadow { background-image: url("https://goexhibitions.com/images/separator-shadow.png"); height: 21px; background-size: 100% 21px; clear: both; width: 100%; margin: 40px 0 19px 0; } @media (max-width: 63.99em) { #content { margin-top: 0.275rem; font-size: 0.875rem; } } @media (min-width: 64em) and (max-width: 119.99em) { #content { font-size: 1.375rem; margin-top: 0.275rem; } } #references { background-image: url("https://goexhibitions.com/images/pattern-1.png"), url("https://goexhibitions.com/images/separatorred1.svg"); background-size: auto, cover; background-repeat: repeat, no-repeat; padding: 2rem 0 5rem 0; box-sizing: border-box; } #references .wrap { max-width: 68.75rem; text-align: center; margin: 0 auto; } #references ul li { color: white; font-size: 0.875rem; line-height: 1.5rem; margin-bottom: 0.875rem; text-align: left; } @media (max-width: 46.24em) { #references { height: 37.925rem; position: relative; background-repeat: no-repeat; background-size: cover; background-position: center; } #references .col_1x4 { width: 45%; margin-right: 5%; } #references ~ #un_phy { top: 0; } #team ~ #titr { top: 0; } } @media (min-width: 46.25em) and (max-width: 63.99em) { #references .wrap { width: 80%; } } @media (min-width: 64em) and (max-width: 119.99em) { #references .ah2 { font-size: 1.4rem; } #references ul li { font-size: 1.3rem; } } #about, #uberuns { position: relative; clear: both; width: 100%; margin-top: -0.6rem; } #about #hm_r_caro, #uberuns #hm_r_caro { margin-top: 1rem; position: relative; } #about #hm_r_caro #h_rel_part, #uberuns #hm_r_caro #h_rel_part { background-color: black; color: white; font-size: 1.1rem; font-weight: 300; padding: 0; letter-spacing: 0.07rem; padding-right: -0.8rem; padding: 0.13rem 0.8rem 0.13rem 0.1rem; font-weight: 400; position: absolute; left: -0.8125rem; top: 0; line-height: 1.4rem; } #about #hm_r_caro #h_crt_part, #uberuns #hm_r_caro #h_crt_part { font-size: 4rem; font-weight: 600; position: absolute; top: 1.3rem; left: -1.1rem; letter-spacing: -0.1rem; color: #58585b; line-height: 4rem; } #about #hm_r_caro #h_ids_part, #uberuns #hm_r_caro #h_ids_part { font-size: 4rem; color: #191619; position: absolute; top: 1.3rem; left: 17rem; font-weight: 800; letter-spacing: 0; line-height: 4rem; } #about #hm_r_caro #h_intl_part, #uberuns #hm_r_caro #h_intl_part { font-size: 4rem; color: #717173; position: absolute; top: 5.2rem; left: -1rem; letter-spacing: -0.1rem; font-weight: 800; line-height: 4rem; } #about #hm_r_caro #h_sol_part, #uberuns #hm_r_caro #h_sol_part { font-size: 4rem; color: red; position: absolute; top: 9.3rem; left: -1rem; letter-spacing: -0.15rem; font-weight: 400; line-height: 4rem; } @media (max-width: 63.99em) { #about #ab_desc, #uberuns #ab_desc { left: 0rem; } #about #hm_r_caro, #uberuns #hm_r_caro { transform: scale(1); position: absolute; top: -38rem; text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.65); left: 0rem; } #about #hm_r_caro #h_crt_part, #about #hm_r_caro #h_ids_part, #about #hm_r_caro #h_intl_part, #about #hm_r_caro #h_sol_part, #uberuns #hm_r_caro #h_crt_part, #uberuns #hm_r_caro #h_ids_part, #uberuns #hm_r_caro #h_intl_part, #uberuns #hm_r_caro #h_sol_part { color: white; } } @media (max-width: 46.24em) { #about .col_half, #uberuns .col_half { margin-right: 0; float: unset; width: unset; } #about #hm_r_caro, #uberuns #hm_r_caro { transform: scale(0.7); top: -41.3rem; color: white; } #about #hm_r_caro #h_crt_part, #about #hm_r_caro #h_ids_part, #about #hm_r_caro #h_intl_part, #about #hm_r_caro #h_sol_part, #uberuns #hm_r_caro #h_crt_part, #uberuns #hm_r_caro #h_ids_part, #uberuns #hm_r_caro #h_intl_part, #uberuns #hm_r_caro #h_sol_part { color: white; } #uberuns #hm_r_caro { top: -47.8rem; } } @media (min-width: 46.25em) and (max-width: 63.99em) { #about #ab_desc, #uberuns #ab_desc { transform: scale(1.1); } #about #hm_r_caro, #uberuns #hm_r_caro { top: -43rem; } } @media (min-width: 64em) and (max-width: 119.99em) { #about .wrap, #uberuns .wrap { max-width: 70.75rem; } #about #hm_r_caro, #uberuns #hm_r_caro { transform: scale(1.3); transform-origin: left top; left: 4rem; top: 3.1rem; } #about #ab_desc, #uberuns #ab_desc { padding: 2rem 0; width: 33.3rem; } } @media (max-width: 20em) { #about #hm_r_caro, #uberuns #hm_r_caro { transform: scale(0.6); left: 0rem; } #about #ab_desc, #uberuns #ab_desc { transform: scale(0.9); left: 0rem; } } #philosophy, #philosophie { background-image: url("https://goexhibitions.com/images/philoback1.jpg"); } #philosophy p, #philosophie p { line-height: 180%; } #philosophy #philo-titr, #philosophie #philo-titr { text-align: left; } #philosophy #philo-titr #evrything, #philosophie #philo-titr #evrything { background-color: #ca1a13; color: white; text-transform: uppercase; opacity: 1; font-size: 1rem; margin-left: 0; margin-top: 13px; padding: 0 0.1rem 0 0.3rem; line-height: 1.3rem; letter-spacing: 0.5px; display: inline-block; pointer-events: none; text-align: left; white-space: nowrap; } #philosophy #philo-titr #we-are-a, #philosophie #philo-titr #we-are-a { text-transform: uppercase; font-size: 2.3rem; margin: -1.625rem 0 0 0; letter-spacing: -0.14375rem; pointer-events: none; width: 100vw; text-align: left; } #philosophy #philo-titr #we-are-a .word.creative, #philosophie #philo-titr #we-are-a .word.creative { font-weight: 700; pointer-events: none; } #philosophy #philo-titr #we-are-a .word.studio, #philosophy #philo-titr #we-are-a .word.modern, #philosophie #philo-titr #we-are-a .word.studio, #philosophie #philo-titr #we-are-a .word.modern { color: black; font-weight: 700; pointer-events: none; } #philosophy #philo-titr #we-are-a .word.with, #philosophy #philo-titr #we-are-a .word.fresh, #philosophy #philo-titr #we-are-a .word.new, #philosophy #philo-titr #we-are-a .word.ideas, #philosophie #philo-titr #we-are-a .word.with, #philosophie #philo-titr #we-are-a .word.fresh, #philosophie #philo-titr #we-are-a .word.new, #philosophie #philo-titr #we-are-a .word.ideas { color: #ca1a13; pointer-events: none; } @media (max-width: 46.24em) { #philosophy #philo-titr, #philosophie #philo-titr { position: relative; top: -3rem; left: -2rem; z-index: 444; padding: 1rem; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.05); transform: scale(0.9); -webkit-text-stroke-width: thin; font-weight: 900; } #philosophy #philo-titr #evrything, #philosophie #philo-titr #evrything { padding-right: 0.4rem; font-weight: 300; } #philosophy #philo-titr .word.modern, #philosophy #philo-titr .word.design, #philosophy #philo-titr .word.studio, #philosophy #philo-titr .word.with, #philosophy #philo-titr .word.fresh, #philosophy #philo-titr .word.new, #philosophy #philo-titr .word.word.ideas, #philosophie #philo-titr .word.modern, #philosophie #philo-titr .word.design, #philosophie #philo-titr .word.studio, #philosophie #philo-titr .word.with, #philosophie #philo-titr .word.fresh, #philosophie #philo-titr .word.new, #philosophie #philo-titr .word.word.ideas { position: relative; } #philosophy #philo-titr .word.modern, #philosophie #philo-titr .word.modern { left: -20rem; top: 2rem; } #philosophy #philo-titr .word.design, #philosophie #philo-titr .word.design { left: -20rem; top: 2rem; } #philosophy #philo-titr .word.studio, #philosophie #philo-titr .word.studio { left: -38.1rem; top: 4.2rem; } #philosophy #philo-titr .word.with, #philosophie #philo-titr .word.with { left: -37.9rem; top: 4.2rem; } #philosophy #philo-titr .word.fresh, #philosophie #philo-titr .word.fresh { left: -37.8rem; top: 4.2rem; } #philosophy #philo-titr .word.new, #philosophie #philo-titr .word.new { left: -59.1rem; top: 6.4rem; } #philosophy #philo-titr .word.ideas, #philosophie #philo-titr .word.ideas { left: -58.8rem; top: 6.4rem; } } @media (min-width: 64em) { #philosophy #philo-titr, #philosophie #philo-titr { position: relative; transform-origin: left top; padding-bottom: 2rem; } #philosophy #philo-titr #we-are-a, #philosophie #philo-titr #we-are-a { margin: -1.625rem 0 -3rem 0; text-align: left; } #philosophy #philo-titr .word, #philosophie #philo-titr .word { position: relative; } #philosophy #philo-titr .word.design, #philosophie #philo-titr .word.design { display: inline-block; } #philosophy #philo-titr .word.studio, #philosophie #philo-titr .word.studio { display: inline-block; } } @media (min-width: 46.25em) and (max-width: 63.99em) { #philosophy #philo-titr #we-are-a, #philosophie #philo-titr #we-are-a { margin: -1.625rem 0 -3rem 0; text-align: left; width: 100%; } #philosophy #philo-titr .word, #philosophie #philo-titr .word { position: relative; } #philosophy #philo-titr .word.design, #philosophie #philo-titr .word.design { display: inline-block; top: -1.5rem; } #philosophy #philo-titr .word.studio, #philosophie #philo-titr .word.studio { display: inline-block; top: -1.5rem; } #philosophy #philo-titr .word.with, #philosophy #philo-titr .word.fresh, #philosophy #philo-titr .word.new, #philosophy #philo-titr .word.ideas, #philosophie #philo-titr .word.with, #philosophie #philo-titr .word.fresh, #philosophie #philo-titr .word.new, #philosophie #philo-titr .word.ideas { top: -3rem; } } @media (max-width: 20em) { #philosophy #philo-titr, #philosophie #philo-titr { transform: scale(0.78); left: -2.5rem; } } .slg_row { padding: 3.75rem 0 3.75rem 0; max-width: 68.75rem; background-repeat: no-repeat; position: relative; background-size: cover; z-index: -2; } #content.home { width: 100vw; top: 0; } #content.home video { width: 100vw; height: auto; } #content.home #content.home.titr, #content.home #titr { opacity: 0.9999999; background-color: #dc1e25; background-image: url("https://goexhibitions.com/images/pattern-1.png"), url("https://goexhibitions.com/images/separatorred1.svg"); background-size: auto, cover; background-repeat: repeat, no-repeat; margin-top: -14px; max-width: unset; color: white; clear: both; } #content.home #content.home.titr p, #content.home #titr p { text-align: center; } #content.home #un_phy { background-color: #5a5a61; opacity: 0.9999999; background-image: url("https://goexhibitions.com/images/pattern-1.png"), url("https://goexhibitions.com/images/separatorgri1.svg"); background-size: auto, cover; background-repeat: repeat, no-repeat; margin-top: -14px; max-width: unset; color: white; } #content.home #un_phy p { text-align: center; } #content.home .isal { font-weight: 600; font-size: 1.5rem; text-shadow: 1px 1px 3px #00000041; } #content.home #isax { font-weight: 700; font-size: 0.875rem; text-shadow: 1px 1px 3px #00000041; } #sustainability { position: relative; padding: 2rem 0 1.2rem 0; width: 60rem; margin: 0 auto; } #sustainability #f1, #sustainability #f2, #sustainability #f3, #sustainability #f4, #sustainability #f5 { background-size: contain; background-repeat: no-repeat; background-position: left center; padding: 0; margin-left: 2rem; width: 9.5rem; height: 8.5rem; float: left; } #sustainability #f1 { background-image: url("https://goexhibitions.com//images/stnb_01.png"); } #sustainability #f2 { background-image: url("https://goexhibitions.com//images/stnb_02.png"); } #sustainability #f3 { background-image: url("https://goexhibitions.com//images/stnb_03.png"); } #sustainability #f4 { background-image: url("https://goexhibitions.com//images/stnb_04.png"); } #sustainability #f5 { background-image: url("https://goexhibitions.com//images/stnb_05.png"); } #individuelle_stande, #individual_stands, #pavilions, #gemeinschaftsstande { text-align: center; position: relative; } #individuelle_stande #p_grid_wrap, #individual_stands #p_grid_wrap, #pavilions #p_grid_wrap, #gemeinschaftsstande #p_grid_wrap { display: flex; align-items: center; flex-direction: row; max-width: 68.75rem; flex-wrap: wrap; margin: 0 auto; } #individuelle_stande h2, #individual_stands h2, #pavilions h2, #gemeinschaftsstande h2 { font-family: "Open Sans", sans-serif !important; padding: 3.5rem 0 3rem 0; font-weight: 300; font-style: normal; font-size: 2.5rem; text-transform: unset; color: #ca1a13; text-shadow: 0 0 1px rgba(50, 0, 0, 0.4); line-height: 2.6rem; max-width: 93%; text-align: center; display: inline-block; } #individuelle_stande .bt_wrap, #individual_stands .bt_wrap, #pavilions .bt_wrap, #gemeinschaftsstande .bt_wrap { text-align: center; } #individuelle_stande .portfolio_item, #individual_stands .portfolio_item, #pavilions .portfolio_item, #gemeinschaftsstande .portfolio_item { display: block; width: 15.625rem; height: 10.625rem; float: left; margin: 0.3125rem 1.25rem 1.25rem 0; box-shadow: 1px 1px 2px black; border-radius: 1px; } #individuelle_stande .title, #individual_stands .title, #pavilions .title, #gemeinschaftsstande .title { color: #ca1a13; text-transform: uppercase; text-align: left; text-shadow: 0 0 1px rgba(200, 0, 0, 0.3); } a.button.medium { font-family: Arial, Helvetica, sans-serif !important; font-weight: 300; font-size: 0.85rem; width: 2.2rem; left: 0.5rem; color: white; letter-spacing: 0.6px; text-shadow: 0 1px rgba(0, 0, 0, 0.3); background-color: #dc1e25; } a.button.medium .ic2, a.button.medium .ic1 { width: 0.8rem; position: absolute; top: 0.625em; filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.3)); } a.button.medium .ic1 { left: 0.625rem; } a.button.medium .ic2 { right: 0.625rem; } @media (max-width: 46.24em) { #individuelle_stande #p_grid_wrap, #individual_stands #p_grid_wrap, #pavilions #p_grid_wrap, #gemeinschaftsstande #p_grid_wrap { flex-direction: column; margin: unset; } #individuelle_stande .bt_wrap, #individual_stands .bt_wrap, #pavilions .bt_wrap, #gemeinschaftsstande .bt_wrap { max-width: 90%; } #individuelle_stande h2, #individual_stands h2, #pavilions h2, #gemeinschaftsstande h2 { font-size: 1.6rem; } } @media (min-width: 46.25em) and (max-width: 63.99em) { #pavilions, #individual_stands, #individuelle_stande, #gemeinschaftsstande { position: relative; width: 100%; } #pavilions h2, #individual_stands h2, #individuelle_stande h2, #gemeinschaftsstande h2 { font-size: 1.8rem; } #pavilions #p_grid_wrap a, #individual_stands #p_grid_wrap a, #individuelle_stande #p_grid_wrap a, #gemeinschaftsstande #p_grid_wrap a { margin-left: 3.4rem; font-size: 1rem; } } @media (min-width: 64em) and (max-width: 119.99em) { #pavilions .portfolio_item, #pavilions .portfolio_item, #pavilions .portfolio_item, #pavilions .portfolio_item, #individual_stands .portfolio_item, #individual_stands .portfolio_item, #individual_stands .portfolio_item, #individual_stands .portfolio_item, #individuelle_stande .portfolio_item, #individuelle_stande .portfolio_item, #individuelle_stande .portfolio_item, #individuelle_stande .portfolio_item, #gemeinschaftsstande .portfolio_item, #gemeinschaftsstande .portfolio_item, #gemeinschaftsstande .portfolio_item, #gemeinschaftsstande .portfolio_item { width: 21.625rem; height: 14.705rem; } #pavilions h2, #individual_stands h2, #individuelle_stande h2, #gemeinschaftsstande h2 { font-size: 1.8rem; } } @media (min-width: 64em) and (max-width: 119.99em) { a.button.medium { font-size: 1.15rem; left: 0.5rem; } a.button.medium .ic2, a.button.medium .ic1 { width: 1rem; top: 0.465em; } a.button.medium .ic1 { left: 0.625rem; } a.button.medium .ic2 { right: 0.625rem; } } #team { position: relative; clear: both; width: 100%; margin-top: -0.2rem; float: left; text-align: left; } #team .col_1x3 { text-align: left; } #team .col_1x3 img { width: 100%; height: auto; } #team .col_2x3 img { text-align: left; width: 100%; height: auto; } #team #team-titr { margin: 1.875rem 0 1.875rem 0; text-align: left; } #team #team-titr #people-bus { display: inline-block; text-align: left; text-transform: uppercase; background-color: #ca1a13; color: white; font-size: 1.67rem; letter-spacing: 0.0375rem; padding: 0rem 0.21rem 0rem 0.4rem; line-height: 2.1rem; font-weight: 300; white-space: nowrap; } #team #team-titr #our-y-team { font-size: 2.67rem; text-transform: uppercase; padding: 0; line-height: 2.7rem; margin: 0; letter-spacing: -0.133125rem; } #team #team-titr #our-y-team .word.our, #team #team-titr #our-y-team .word.young { letter-spacing: -0.2375; } #team #team-titr #our-y-team .word.team, #team #team-titr #our-y-team .word.of { color: #939598; font-weight: 700; } #team #team-titr #our-y-team .word.professionals { color: black; font-weight: 700; } #team #team-titr #makes-anyt { font-size: 2.6rem; letter-spacing: -0.1125rem; text-transform: uppercase; padding: 0; line-height: 2.7rem; margin: 0; } #team #team-titr #makes-anyt .word.makes { font-weight: 700; } #team #team-titr #makes-anyt .word.you, #team #team-titr #makes-anyt .word.imagine { color: #ca1a13; letter-spacing: -0.18125rem; } @media (max-width: 63.99em) { #team .col_1x3 { margin-top: 2rem; padding-bottom: 1rem; } } @media (min-width: 46.25em) and (max-width: 63.99em) { #team .wrap { width: 100%; transform: scale(0.93); padding: 0 0 0 2rem; } #team .wrap .col_2x3 { width: 37.14rem; } #team .wrap .col_1x3 { width: 80%; left: 2rem; position: relative; font-size: 1.1rem; } #team .wrap .col_1x3 strong { margin-left: 0.4rem; } #team #team-titr { position: relative; left: -3.7rem; transform: scale(0.89); } #team .spacer { padding: 0; } } @media (max-width: 20em) { #team .col_2x3 img { width: 120%; } #team .wrap { transform: scale(0.85); left: -1.1rem; position: relative; top: -4rem; } #team .wrap #team-titr { transform: scale(0.74); } } @media (max-width: 46.24em) { #team .col_2x3 { width: 100%; } #team .col_1x3 { width: 100%; white-space: nowrap; } #team .spacer { padding: 0; } #team #team-titr { height: 13rem; transform: scale(0.85); margin-top: -1rem; margin-left: -2rem; width: 124%; letter-spacing: -0.15rem; } #team #team-titr #our-y-team { letter-spacing: -0.22rem; } #team #team-titr .word.of, #team #team-titr .word.professionals, #team #team-titr .word.you, #team #team-titr .word.imagine, #team #team-titr #makes-anyt { position: relative; } #team #team-titr .word.of { top: 2.6rem; left: -21.4rem; } #team #team-titr .word.professionals { top: 2.6rem; left: -21.4rem; } #team #team-titr .word.you { top: 2.6rem; left: -21.3rem; } #team #team-titr .word.imagine { position: relative; top: 2.6rem; left: -21.3rem; } #team #team-titr #makes-anyt { top: 2.6rem; } } @media (min-width: 64em) and (max-width: 119.99em) { #team { font-size: 1.2rem; } #team .wrap { max-width: 79.95rem; } #team .col_2x3 { width: 47.14rem; } #team .col_1x3 { width: 31.17rem; margin-top: -4.3rem; } #team .col_1x3 strong { margin-left: 0.5rem; } } section #contact, section #kontakt { background-color: #dc1e25; opacity: 0.9999999; background-image: url("https://goexhibitions.com/images/separatorred1.svg"); background-size: cover; margin-top: 0; background-repeat: no-repeat; background-position: center top; } section #contact h2, section #kontakt h2 { color: white; font-size: 1.5rem; font-weight: 700; text-transform: unset; } section #contact svg, section #kontakt svg { width: 1.7rem; filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.3)); } section #contact svg g, section #contact svg path, section #kontakt svg g, section #kontakt svg path { color: white !important; fill: white !important; } section #contact #c_info, section #kontakt #c_info { height: 6rem; } section #contact #c_info span, section #kontakt #c_info span { float: left; width: 25%; display: block; color: white; margin: 1.2rem 0 0 0; } section #contact #c_info span span, section #kontakt #c_info span span { width: 100%; } section #contact #c_info span a:visited, section #contact #c_info span :active, section #contact #c_info span a, section #kontakt #c_info span a:visited, section #kontakt #c_info span :active, section #kontakt #c_info span a { color: white; } section #contact .map-img, section #kontakt .map-img { background-position: center center; width: 100%; background-image: url("https://goexhibitions.com/images/mapgx_fhd.jpg"); height: 21.0625rem; cursor: pointer; margin-top: 0.9rem; } section #contact .map-link, section #kontakt .map-link { text-shadow: 0 1px rgba(0, 0, 0, 0.3); text-transform: uppercase; width: 4rem; } section #contact .map-link svg, section #kontakt .map-link svg { width: 1rem; position: absolute; top: 0.5rem; filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.3)); } section #contact .map-link svg path, section #kontakt .map-link svg path { stroke: white; stroke-width: 1.6rem; } @media (max-width: 46.24em) { section #contact .wrap, section #kontakt .wrap { padding: 2rem 0 3rem 0; } section #contact h2, section #kontakt h2 { padding: 2rem 0; } section #contact #c_info, section #kontakt #c_info { align-items: center; flex-direction: row; max-width: 68.75rem; } section #contact #c_info span.info_box, section #kontakt #c_info span.info_box { height: 9rem; width: 50%; } section #contact #c_info span.info_box svg, section #kontakt #c_info span.info_box svg { display: block; margin: 0 auto; } section #contact .map-img, section #kontakt .map-img { background-size: cover; } section #contact br, section #kontakt br { display: none; } } @media (min-width: 64em) and (max-width: 119.99em) { section #contact .map-link, section #kontakt .map-link { width: 11.2rem; display: block; margin: 0 auto; } section #contact .map-link svg, section #kontakt .map-link svg { width: 1.3rem; top: 0.7rem; margin-left: -0.3rem; } } .m_sp { letter-spacing: -3px; } .meters { background-image: url("https://goexhibitions.com/images/back_white_03.png"); background-position: 50% 0px; width: 100%; z-index: -1; position: absolute; } @media (max-width: 46.24em) { #content.home { overflow-x: hidden; } .wrap { width: 80%; } .slg_row { position: relative; background-size: cover; } .titr, #titr, #un_phy { width: 100%; padding: 2rem; box-sizing: border-box; } #sustainability { height: unset; left: 0; top: 1rem; transform: none; width: unset; } #sustainability #f1, #sustainability #f2, #sustainability #f3, #sustainability #f4, #sustainability #f5 { width: 8.5rem; margin-left: 3rem; } #f4 { width: 11rem; } #f1 { width: 8rem !important; } #f2 { margin-left: 2.4rem !important; } } @media (min-width: 64em) and (max-width: 119.99em) { #content.home { margin-top: 6.275rem; } } @media (min-width: 46.25em) and (max-width: 63.99em) { .wrap { width: 70%; } .col_half { float: none; } #hm_r_caro { height: 15rem; margin-top: 3rem !important; transform: scale(0.94); } .slg_row { position: relative; background-size: cover; } #sustainability { height: unset; position: unset; transform: unset; top: unset; margin: 3rem 3rem; width: 100vw; } .isal { padding: 0 7% 0 7%; } } @media (max-width: 20em) { #sustainability #f1, #sustainability #f2, #sustainability #f3, #sustainability #f4, #sustainability #f5 { width: 12.5rem; margin-left: 4rem; margin-top: 1rem; } #f1 { margin-left: 6rem !important; width: 9rem !important; } #f2 { margin-left: 4.7rem !important; } #f4 { width: 11rem !important; margin-left: 5.8rem !important; } } @media (min-width: 64em) and (max-width: 119.99em) { #content.home .isal { font-size: 1.8rem; } #content.home #isax { font-size: 1.2rem; } } .intro { width: 100vw; height: 30.625rem; overflow: hidden; position: relative; } .intro #s1, .intro #s2, .intro #s3, .intro #s4, .intro #s5, .intro #s6 { background-size: cover; } .intro #s1 { background-color: white; } .intro #s1 .logo-t { position: absolute; width: 21.875rem; opacity: 1; fill: #434343; stroke: #434343; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-150%) scale(2.2); } .intro #s3 { background-color: red; } .intro #s3 #soz1 { left: 40%; top: 30%; width: 28.125rem; position: absolute; } .intro #s1, .intro #s3 { width: 100%; height: 100%; opacity: 0; position: absolute; } .intro #s1 #a1, .intro #s1 #a2, .intro #s1 #a3, .intro #s1 #a4, .intro #s1 #a5, .intro #s1 #a6, .intro #s1 #a7, .intro #s1 #a8, .intro #s1 #a9, .intro #s1 #a10, .intro #s3 #a1, .intro #s3 #a2, .intro #s3 #a3, .intro #s3 #a4, .intro #s3 #a5, .intro #s3 #a6, .intro #s3 #a7, .intro #s3 #a8, .intro #s3 #a9, .intro #s3 #a10 { position: absolute; opacity: 0; } .intro #s1 #a1 path, .intro #s1 #a1 polyline, .intro #s1 #a2 path, .intro #s1 #a2 polyline, .intro #s1 #a3 path, .intro #s1 #a3 polyline, .intro #s1 #a4 path, .intro #s1 #a4 polyline, .intro #s1 #a5 path, .intro #s1 #a5 polyline, .intro #s1 #a6 path, .intro #s1 #a6 polyline, .intro #s1 #a7 path, .intro #s1 #a7 polyline, .intro #s1 #a8 path, .intro #s1 #a8 polyline, .intro #s1 #a9 path, .intro #s1 #a9 polyline, .intro #s1 #a10 path, .intro #s1 #a10 polyline, .intro #s3 #a1 path, .intro #s3 #a1 polyline, .intro #s3 #a2 path, .intro #s3 #a2 polyline, .intro #s3 #a3 path, .intro #s3 #a3 polyline, .intro #s3 #a4 path, .intro #s3 #a4 polyline, .intro #s3 #a5 path, .intro #s3 #a5 polyline, .intro #s3 #a6 path, .intro #s3 #a6 polyline, .intro #s3 #a7 path, .intro #s3 #a7 polyline, .intro #s3 #a8 path, .intro #s3 #a8 polyline, .intro #s3 #a9 path, .intro #s3 #a9 polyline, .intro #s3 #a10 path, .intro #s3 #a10 polyline { fill: rgba(28, 28, 28, 0.0745098); } .intro #s1 #a1, .intro #s3 #a1 { top: 1%; width: 33rem; } .intro #s1 #a2, .intro #s3 #a2 { top: 5%; width: 53rem; } .intro #s1 #a3, .intro #s3 #a3 { top: 43%; width: 33rem; } .intro #s1 #a4, .intro #s3 #a4 { top: 42%; width: 33rem; } .intro #s1 #a5, .intro #s3 #a5 { top: -14%; width: 83rem; } .intro #s1 #a6, .intro #s3 #a6 { top: -24%; width: 53rem; } .intro #s1 #a7, .intro #s3 #a7 { top: -9%; width: 53rem; } .intro #s1 #a8, .intro #s3 #a8 { top: 66%; width: 33rem; } .intro #s1 #a9, .intro #s3 #a9 { top: 1%; width: 53rem; } .intro #s1 #a10, .intro #s3 #a10 { top: 46%; width: 33rem; } .intro #s2 { position: absolute; background-color: #000; background-repeat: no-repeat; background-position: left top; background-image: url("https://goexhibitions.com/images/s/p1-blxf.jpg"); width: 100%; height: 100%; opacity: 1; background-size: cover; } .intro #s2 #iconic { background-image: url("https://goexhibitions.com/images/s/iconic-awards-2016-1.jpg"); position: absolute; left: 90.375rem; top: 5.875rem; width: 15.9375rem; height: 15.9375rem; background-size: 15.9375rem 15.9375rem; opacity: 0; } .intro #s2 #dsgn { font-size: 2.3rem; background-color: #000000ba; color: white; padding: 1rem; position: absolute; left: 82.375rem; top: 22.275rem; line-height: 2rem; font-weight: 700; letter-spacing: 0.1rem; opacity: 0; text-shadow: 2px 2px 3px black; } .intro #s2 #arch { font-size: 1.4rem; background-color: #000000ba; color: white; padding: 1rem; position: absolute; left: 82.875rem; top: 26.575rem; line-height: 1rem; font-weight: 600; border-radius: 0.2rem; opacity: 0; text-shadow: 2px 2px 3px black; } .intro #s4, .intro #s5, .intro #s6 { position: absolute; background-color: #000; background-repeat: no-repeat; width: 100%; height: 100%; opacity: 0; } .intro #s4 #wkh, .intro #s4 #ioj, .intro #s5 #wkh, .intro #s5 #ioj { display: inline; color: white; border-radius: 0.2rem; text-transform: lowercase; position: absolute; text-shadow: 1px 1px 3px #00000061; } .intro #s4 #wkh, .intro #s5 #wkh { background-color: #000000c2; padding: 0.8rem 0.8rem; font-size: 3rem; font-weight: 900; left: 90rem; top: 13rem; } .intro #s4 #ioj, .intro #s5 #ioj { font-weight: 400; font-size: 3.9rem; padding: 1.6rem 1.3rem; background-color: #ff0000c9; top: 17rem; left: 94rem; } .intro #s4 { background-image: url("https://goexhibitions.com/images/s/workslide01.jpg"); } .intro #s5 { background-image: url("https://goexhibitions.com/images/s/workslide02.jpg"); } .intro #s5 #ioj { left: 74rem; } .intro #s5 #wkh { left: 70rem; } .intro #s6 { background-image: url("https://goexhibitions.com/images/s/p2-br.jpg"); } .intro #s6 #rg1 { position: absolute; left: 2rem; bottom: 2rem; width: 25.625rem; height: auto; } @media (max-width: 46.24em) { .intro { width: 100vw; height: 30.625rem; overflow: hidden; position: relative; z-index: -2; } .intro#startseite, .intro#home { position: relative; background-color: black; background-repeat: no-repeat; background-position: 25% 0; background-image: url("https://goexhibitions.com/images/s/workslide02.jpg"); width: 100vw; height: 102vh; opacity: 1; top: 3.2rem; background-size: cover; } } @media (min-width: 46.25em) and (max-width: 63.99em) { .intro { width: 100vw; height: 30.625rem; overflow: hidden; position: relative; z-index: -2; } .intro#startseite, .intro#home { position: relative; background-color: black; background-repeat: no-repeat; background-position: -11rem 0; background-image: url("https://goexhibitions.com/images/s/workslide02.jpg"); width: 100vw; height: 102vh; opacity: 1; top: 3.2rem; background-size: cover; } } .bgfig { width: 100%; height: auto; } #language-selection { padding-right: 6rem; z-index: 31333; } #language-selection svg { width: 0.8rem; margin-right: 0.4rem; position: relative; top: -0.61rem; filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.3)); } #language-selection svg path { fill: #555555; } #language-selection ul { display: inline-block; padding: 0; margin: 0; } #language-selection li { float: left; margin-right: 0.3rem; font-size: 0.75rem; text-transform: uppercase; text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3); padding: 0.5rem 0.025rem; } #language-selection li a.current { color: #ca1a13; } @media (max-width: 63.99em) { #language-selection { display: none; margin: 0; bottom: 0; position: fixed; background-color: white; padding: 0.9rem 1rem 0.6rem; width: 100%; transform: scale(1.2); transform-origin: left center; } } #footer { position: relative; clear: both; width: 100vw; bottom: 0; z-index: 444; height: 4rem; background-color: #f4f4f4; color: black; font-size: 0.8rem; text-shadow: 0 0 2px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.29); } #footer .wrap { padding-top: 1.5rem; max-width: 79.75rem; } #footer #footer-menu { float: left; margin-left: 2rem; text-transform: uppercase; } #footer #footer-menu ul { padding: 0; margin: 0; } #footer #copyright { text-align: left; float: left; } @media (max-width: 63.99em) { #footer { left: 0; top: 0; z-index: 1; } #footer .wrap { width: 78%; } } @media (max-width: 20em) { #footer .wrap { width: 90%; } } @media (min-width: 64em) and (max-width: 119.99em) { body#projects #footer .wrap { max-width: 92.75rem; } } #topHead { display: flex; border-bottom: solid 1px #00000014; position: fixed; width: 100vw; height: 3.875rem; top: 0; box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15); background-color: white; z-index: 145; text-align: left; align-content: center; justify-content: space-between; align-items: center; } #main_navigation #r_menu_bt { position: absolute; right: 1.3rem; top: -1.35rem; display: none; } #main_navigation ul { display: inline-block; width: auto; overflow: visible; padding: 0; } #main_navigation li { display: block; float: left; width: auto; padding: 0.5rem 0.625rem; } #main_navigation li a, #main_navigation li span.projlink { color: #57585a; fill: #57585a; text-decoration: none; text-transform: uppercase; transition: 1.2s color linear; cursor: pointer; font-weight: 300; white-space: nowrap; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); } #main_navigation li a svg, #main_navigation li span.projlink svg { width: 0.34rem; transform: rotate(270deg); position: relative; left: 0.34rem; top: 0.06rem; } #main_navigation li a svg g > path, #main_navigation li span.projlink svg g > path { fill: inherit; } #main_navigation li a.active, #main_navigation li a:active, #main_navigation li a:hover, #main_navigation li span.projlink.active, #main_navigation li span.projlink:active, #main_navigation li span.projlink:hover { transition: 0.9s all linear; color: #b50000; -webkit-text-stroke: 0; } #main_navigation li .subMenuWrap { display: block; position: absolute; margin-top: 0.5rem; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.09); background-color: white; } #main_navigation li .subMenuWrap a.subMenu { display: block; background-color: white; text-align: left; padding: 0.6rem 0.6rem; } @media (min-width: 64em) and (max-width: 119.99em) { #topHead { height: 6.3rem; font-size: 1.34rem; } #topHead #logo { width: 21rem; padding-left: 3.8rem; } #topHead #language-selection svg { width: 1.3rem; top: -0.62rem; } #topHead #language-selection ul li a { font-size: 1.22rem; } #footer { font-size: 1.1rem; } #footer .wrap span { margin-top: -0.2rem; } } @media (max-width: 63.99em) { #topHead { height: 3.3rem; } #main_navigation { display: block; text-align: left; z-index: 1115; position: absolute; top: 2.4rem; right: 0rem; } #main_navigation #r_menu_bt { display: block; } #main_navigation #r_menu_bt svg { width: 1rem; } #main_navigation ul { display: none; overflow-x: hidden; overflow-y: auto; padding: 0px 0rem 0 0.3rem; height: 100vh; background-color: black; } #main_navigation li { display: block; background-color: #000000; width: 93%; border-bottom: solid 1px #252525; } #main_navigation li a { color: #ffffff; text-decoration: none; text-transform: uppercase; transition: 1.2s all linear; font-size: 0.875rem; line-height: 3.06rem; cursor: pointer; font-weight: 400; white-space: nowrap; text-shadow: 0 0 1px #000; width: 94vw; display: block; } #main_navigation li a.active, #main_navigation li a:active, #main_navigation li a:hover { transition: 0.9s all linear; color: #b0b0b0; -webkit-text-stroke: 0; } } @media (max-width: 20em) { #footer .wrap { width: 90%; } #main_navigation li { height: 2.3rem; } } body #logo { display: inline-block; z-index: 33155; width: 15rem; padding-left: 2.4rem; outline: none; cursor: pointer; } body #logo svg, body #logo img { fill: white; stroke-width: 0; } body #logo svg { fill: #818385; } body #logo svg .frC { fill: #818385; } body #logo svg #fG, body #logo svg #fO, body #logo svg #frArrow, body #logo svg #rX { fill: red; } @media (min-width: 20em) and (max-width: 46.24em) { body #logo { padding-left: 2rem; width: 13rem; } } @media (min-width: 46.25em) and (max-width: 63.99em) { body #logo { padding-left: 1.9rem; } } #projects h2 { padding: 3.5rem 0 0 0; font-weight: 300; font-style: normal; text-transform: uppercase; color: #ca1a13; text-shadow: 0 0 1px rgba(50, 0, 0, 0.4); line-height: 2.6rem; max-width: 95%; } #works_grid { text-align: center; position: relative; display: flex; align-items: center; flex-direction: row; max-width: 72.95rem; flex-wrap: wrap; margin: 0 auto; } #works_grid #p_grid_wrap { display: flex; align-items: center; flex-direction: row; max-width: 68.75rem; flex-wrap: wrap; margin: 0 auto; } #works_grid .portfolio_item { display: block; width: 15.625rem; height: 10.625rem; float: left; margin: 0.3125rem 2.25rem 1.25rem 0; box-shadow: 1px 1px 2px black; border-radius: 1px; } #works_grid .title { color: #ca1a13; text-transform: uppercase; text-align: left; text-shadow: 0 0 1px rgba(200, 0, 0, 0.3); } @media (max-width: 63.99em) { #works a { margin-left: 4rem; } } .slbOverlay, .slbWrapOuter, .slbWrap { position: fixed; top: 0; right: 0; bottom: 0; left: 0; } .slbOverlay { overflow: hidden; z-index: 2000; background-color: #000; } .slbWrapOuter { overflow-x: hidden; overflow-y: auto; z-index: 2010; } .slbWrap { position: absolute; text-align: center; } .slbWrap:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; } .slbContentOuter { position: relative; display: inline-block; vertical-align: middle; margin: 0px auto; padding: 0 1em; box-sizing: border-box; z-index: 2020; text-align: left; max-width: 100%; } .slbContentEl .slbContentOuter { padding: 5em 1em; } .slbContent { position: relative; } .slbContentEl .slbContent { animation: slbEnter 0.3s; background-color: #fff; box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.4); } .slbImageWrap, .slbCtWrap { animation: slbEnter 0.3s; position: relative; } .slbImageWrap:after, .slbCtWrap:after { content: ""; position: absolute; left: 0; right: 0; top: 5em; bottom: 5em; display: block; z-index: -1; box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.6); background-color: #fff; } .slbDirectionNext .slbImageWrap, .slbDirectionNext .slbCtWrap { -webkit-animation: slbEnterNext 0.4s; -moz-animation: slbEnterNext 0.4s; animation: slbEnterNext 0.4s; } .slbDirectionPrev .slbImageWrap, .slbDirectionPrev .slbCtWrap { -webkit-animation: slbEnterPrev 0.4s; -moz-animation: slbEnterPrev 0.4s; animation: slbEnterPrev 0.4s; } .slbImage { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; box-sizing: border-box; margin: 0 auto; } .slbCaption { display: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; font-size: 1.4em; position: absolute; left: 0; right: 0; bottom: 0; padding: 0.71429em 0; color: #fff; color: rgba(0, 0, 0, 0.7); text-align: center; } .slbCloseBtn, .slbArrow { margin: 0; padding: 0; border: 0; cursor: pointer; background: none; } .slbCloseBtn path, .slbArrow path { color: white; fill: white; } .slbCloseBtn::-moz-focus-inner, .slbArrow::-moz-focus-inner { padding: 0; border: 0; } .slbArrow:hover { background-color: rgba(0, 0, 0, 0.91); } .slbCloseBtn:hover { opacity: 1; } .slbCloseBtn:active, .slbArrow:active { opacity: 0.8; } .slbCloseBtn { animation: slbEnter 0.3s; font-size: 1.5rem; width: 1.875rem; height: 1.875rem; line-height: 1.66667em; position: absolute; right: 1.8125rem; top: 0.625rem; color: #fff; color: rgba(255, 255, 255, 0.7); background-color: black; opacity: 0.95; text-align: center; line-height: 0.7rem; } .slbLoading .slbCloseBtn { display: none; } .slbLoadingText { font-size: 1.4em; color: #fff; color: rgba(255, 255, 255, 0.9); } .slbArrows { position: static; top: 50%; z-index: 4; } .slbLoading .slbArrows { display: none; } .slbArrow { position: absolute; top: 50%; margin-top: -0.25rem; width: 0.625rem; height: 0.625rem; padding: 0.9375rem; overflow: hidden; z-index: 1; background-color: rgba(0, 0, 0, 0.65); border-radius: 3px; } .slbArrow:before { position: absolute; top: 50%; left: 50%; margin: -0.8em 0 0 -0.8em; } .slbArrow.next { right: 15px; } .slbArrow.next:before { border-left-color: #fff; } .slbArrow.prev { left: 0.9375rem; } .slbArrow.prev:before { border-right-color: #fff; } .slbIframeCont { width: 80em; height: 0; overflow: hidden; padding-top: 56.25%; margin: 5em 0; } .slbIframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.6); background: #000; } @-webkit-keyframes slbOverlay { from { opacity: 0; } to { opacity: 0.7; } } @-moz-keyframes slbOverlay { from { opacity: 0; } to { opacity: 0.7; } } @keyframes slbOverlay { from { opacity: 0; } to { opacity: 0.7; } } @-webkit-keyframes slbEnter { from { opacity: 0; -webkit-transform: translate3d(0, -1em, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); } } @-moz-keyframes slbEnter { from { opacity: 0; -moz-transform: translate3d(0, -1em, 0); } to { opacity: 1; -moz-transform: translate3d(0, 0, 0); } } @keyframes slbEnter { from { opacity: 0; -webkit-transform: translate3d(0, -1em, 0); -moz-transform: translate3d(0, -1em, 0); -ms-transform: translate3d(0, -1em, 0); -o-transform: translate3d(0, -1em, 0); transform: translate3d(0, -1em, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes slbEnterNext { from { opacity: 0; -webkit-transform: translate3d(4em, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); } } @-moz-keyframes slbEnterNext { from { opacity: 0; -moz-transform: translate3d(4em, 0, 0); } to { opacity: 1; -moz-transform: translate3d(0, 0, 0); } } @keyframes slbEnterNext { from { opacity: 0; -webkit-transform: translate3d(4em, 0, 0); -moz-transform: translate3d(4em, 0, 0); -ms-transform: translate3d(4em, 0, 0); -o-transform: translate3d(4em, 0, 0); transform: translate3d(4em, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes slbEnterPrev { from { opacity: 0; -webkit-transform: translate3d(-4em, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); } } @-moz-keyframes slbEnterPrev { from { opacity: 0; -moz-transform: translate3d(-4em, 0, 0); } to { opacity: 1; -moz-transform: translate3d(0, 0, 0); } } @keyframes slbEnterPrev { from { opacity: 0; -webkit-transform: translate3d(-4em, 0, 0); -moz-transform: translate3d(-4em, 0, 0); -ms-transform: translate3d(-4em, 0, 0); -o-transform: translate3d(-4em, 0, 0); transform: translate3d(-4em, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slbCtWrap { overflow: auto; background-color: white; overflow-x: hidden; padding: 1.875rem 0 0 0; border: solid 2px rgba(0, 0, 0, 0.49); border-radius: 3px; } .slbArrows svg { fill: white; width: 1.25rem; height: 1.25rem; left: calc(50% - 0.625rem); position: absolute; top: calc(50% - 0.625rem); } body#projects #footer .wrap { max-width: 99.75rem; } #content.projectdetail { position: relative; min-height: calc(100vh - 4rem); margin-top: 4.875rem; } #content.projectdetail .loader-container { position: absolute; z-index: 45; width: 100vw; height: 100vh; } #p_details { flex-flow: column; align-items: center; display: flex; overflow: visible; } #p_details .lds-roller { top: calc(50% - 0.625rem); } #p_details .slbElement .lds-roller { top: 0; } #p_details #nav li { background-color: #ff0000; } #p_details #p_details { top: 9.375rem; } #p_details #p_details #p_title { text-align: center; font-size: 2.8rem; font-weight: 600; font-family: "Montserrat"; color: #fff; top: 4.375rem; position: relative; } #p_details #p_details .letter { transform-origin: 50% 100%; display: inline-block; pointer-events: all; } .details { width: 107.8125rem; margin: 0 auto; padding: 0; padding-bottom: 1.5rem; } .details #logo { background-color: transparent; display: inline-block; left: 10%; position: relative; padding-bottom: 1.875rem; } .details .grid-item:not(.desc) { padding: 0; margin-bottom: 1rem; margin-left: 1rem; position: relative; border-radius: 0; margin-top: -0.4375; overflow: hidden; transition: 0.3s all linear; z-index: 44; } .details .grid-item:not(.desc).bw_filter { filter: grayscale(3); } .details .grid-item:not(.desc) svg { position: absolute; left: 0; top: 0; fill: transparent; stroke: rgba(0, 0, 0, 0.4); stroke-width: 2px; } .details .grid-item:not(.desc) img { opacity: 0; width: 100%; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9); border-radius: 1px; z-index: 1; position: relative; } .details .grid-item:not(.desc):hover { filter: none; z-index: 44; transition: 0.3s all linear; } .details .grid-item:not(.desc) .img_open { width: 0; transition: 0.3s all linear; height: 57px; bottom: calc(50% - 1.78125rem); position: absolute; } .details .grid-item:not(.desc) .img_open svg { opacity: 0; } .svg_ico { width: 1.5rem; position: relative; top: calc(-50% - (0.75rem / 2)); left: calc(-50% - (0.75rem / 2)); padding: 0.9375rem; height: 1.5rem; width: 1.5625rem; position: relative; top: -3.1875rem; padding: 0.9375rem; height: 1.875rem; } #p_mm { font-size: 1.4rem; margin: 8.75rem auto; display: flex; } #p_mm .svg_ico { fill: #aeaeae; width: 1.5625rem; position: relative; top: -3.1875rem; left: 0; padding: 0.9375rem; height: 1.875rem; } #p_mm > span { position: relative; font-weight: 100; width: 13.75rem; text-align: center; margin: 1.25rem; } #p_mm #size .svg_ico { width: 1.375rem; } .p_label { font-family: "Montserrat"; color: #ff4040; display: block; font-size: 1.2rem; position: absolute; width: 100%; } .grid-item.desc { position: relative; height: 25.5rem; display: block; color: white; text-align: left; margin-left: 1rem; margin-bottom: 1rem; margin-top: -0rem; width: 26.5625rem; opacity: 0; box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.62); border-radius: 3px; background: radial-gradient(circle, red 30%, #da2a33 160%); padding: 1rem 0 0 0; box-sizing: border-box; } .grid-item.desc.after_maso { transition: all 3s; opacity: 1; } .grid-item span { display: block; font-size: 1rem; font-weight: 400; position: relative; left: 7%; } .grid-item .p_label { display: inline; color: white; } .grid-item .p_label .svg_ico { fill: white; display: inline; padding: 0.9375rem; position: relative; left: -6%; top: 1.4375rem; width: 1.125rem; } .grid-item .p_label .svg_ico g, .grid-item .p_label .svg_ico path { fill: white; } @media (max-width: 46.24em) { body#projects #logo { padding-left: 1.25rem; } } @media (max-width: 63.99em) { .details { width: 91vw !important; margin: 0 auto; top: 0.5625rem; } .details .grid-item, .details .grid-item.desc, .details .grid-item:not(.desc) { margin-left: 0; width: unset; } .details .grid-item.bw_filter, .details .grid-item.desc.bw_filter, .details .grid-item:not(.desc).bw_filter { filter: none !important; } } @media (min-width: 46.25em) and (max-width: 63.99em) { body#projects #logo { padding-left: 2.6rem; } body#projects .details .grid-item, body#projects .details .grid-item.desc { margin-right: 1rem !important; padding: 0; } } @media (min-width: 64em) and (max-width: 119.99em) { #content.projectdetail { margin-top: 9.875rem; } .grid-item .p_label .svg_ico { width: 1.525rem; } .grid-item span { font-size: 1.5rem; } } #imprint #footer .wrap { max-width: 68.75rem; } @media (min-width: 64em) and (max-width: 119.99em) { #imprint #footer .wrap { max-width: 99.75rem; } } @media (min-width: 46.25em) and (max-width: 63.99em) { #imprint #footer .wrap { width: 87%; } } section#content.imprint { hyphens: auto; font-size: 0.875rem; max-width: 68.75rem; margin: 0 auto; } section#content.imprint h1 { text-align: left; font-weight: 300; font-family: "Open Sans", sans-serif !important; color: #dc1e25; font-size: 2.5rem; margin-top: 6rem; } section#content.imprint .im_right { width: 27%; float: left; margin-left: 3rem; } section#content.imprint .im_left { text-align: justify; width: 65.33%; float: left; left: 12%; top: auto; } @media (max-width: 46.24em) { section#content.imprint { width: 90%; padding-top: 3rem; margin-left: 1rem; } section#content.imprint h1 { margin: 1rem 0 0 1rem; text-align: center; } section#content.imprint .im_left { left: 0%; width: 90%; margin-left: 1rem; } section#content.imprint .im_right { width: 90%; position: relative; margin-left: 1rem; padding-bottom: 2rem; } } @media (min-width: 46.25em) and (max-width: 63.99em) { section#content.imprint { padding-top: 3rem; font-size: 0.875rem; line-height: 1.9rem; max-width: 100%; } section#content.imprint h1 { text-align: center; padding-top: 0; margin-top: 0; font-size: 1.7rem; } section#content.imprint .im_left { text-align: justify; width: 85.33%; float: none; left: 7%; position: relative; } section#content.imprint .im_right { float: none; position: relative; padding-bottom: 4rem; width: 100%; } } @media (min-width: 64em) and (max-width: 119.99em) { section#content.imprint { padding-top: 7rem; font-size: 1.575rem; line-height: 2.6rem; max-width: 100%; min-height: calc(100vh - 11rem); } section#content.imprint h1 { text-align: center; padding-top: 0; margin-top: 0; } section#content.imprint .im_left { text-align: justify; width: 49.33%; float: left; left: 8%; position: relative; } section#content.imprint .im_right { position: relative; margin-left: 15%; padding-bottom: 2rem; width: 28%; } } .p404 { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100vw; height: 100vh; font-size: 4rem; font-weight: 900; line-height: 5rem; text-align: center; } .p404 .i-exc { font-size: 10rem; color: rgba(0, 0, 0, 0.15); } .p404 a { font-size: 1.7rem; font-weight: 400; line-height: 2.7rem; text-decoration: none; color: #6866a9; border-bottom: dashed 2px #6866a9; padding-bottom: 0.3rem; margin-bottom: 1.8rem; } `; // Reset `lastIndex` if this regex is defined globally // regex.lastIndex = 0; let m; while ((m = regex.exec(str)) !== null) { // This is necessary to avoid infinite loops with zero-width matches if (m.index === regex.lastIndex) { regex.lastIndex++; } // The result can be accessed through the `m`-variable. m.forEach((match, groupIndex) => { console.log(`Found match, group ${groupIndex}: ${match}`); }); }

Please keep in mind that these code samples are automatically generated and are not guaranteed to work. If you find any syntax errors, feel free to submit a bug report. For a full regex reference for JavaScript, please visit: https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions