section.instructions, section.instructions * { margin: 0; box-sizing: border-box } section.instructions { box-shadow: 0 3px 8px rgba(0, 0, 0, .15); width: 92%; margin-right: auto; margin-left: auto; padding: 25px 20px 40px; box-sizing: border-box; position: relative } .instructions-headline, .instructions-number { color: #00bd94; font-weight: 700; line-height: 1 } .instructions-headline { text-align: center; font-size: 22px } .instructions .instructions-number { font-size: 48px; line-height: 1; margin-right: 15px } .instructions .instructions-logo-container { width: 97px; margin: 20px auto } .instructions .intructions-svg-container { display: -webkit-box; display: flex; -webkit-box-align: end; align-items: flex-end; -webkit-box-pack: justify; justify-content: space-between } .instructions .intructions-svg-container svg.id { height: 35px } .instructions .intructions-svg-container svg.me { height: 21px } .st0, .st1, .st2, .st3, .st4, .st5, .st6, .st7 { stroke-dasharray: 0; stroke-dashoffset: 0; fill: none } .st0 { -webkit-clip-path: url(#m1_1_); clip-path: url(#m1_1_); stroke-width: 17; stroke-miterlimit: 10 } .st1 { -webkit-clip-path: url(#m2_2_); clip-path: url(#m2_2_); stroke-width: 24; stroke-miterlimit: 10; -webkit-transition-delay: .1s; transition-delay: .1s } .st2 { -webkit-clip-path: url(#m2_3_); clip-path: url(#m2_3_); stroke-width: 24; stroke-miterlimit: 10; -webkit-transition-delay: .2s; transition-delay: .2s } .st3 { -webkit-clip-path: url(#m3_2_); clip-path: url(#m3_2_); stroke-width: 21; stroke-miterlimit: 10; -webkit-transition-delay: .3s; transition-delay: .3s } .st4 { -webkit-clip-path: url(#m3_3_); clip-path: url(#m3_3_); stroke-width: 21; stroke-miterlimit: 10; -webkit-transition-delay: .4s; transition-delay: .4s } .st5 { -webkit-clip-path: url(#e1_1_); clip-path: url(#e1_1_); stroke-width: 16; stroke-miterlimit: 10; -webkit-transition-delay: .5s; transition-delay: .5s } .st6 { -webkit-clip-path: url(#e2_2_); clip-path: url(#e2_2_); stroke-width: 19; stroke-miterlimit: 10; -webkit-transition-delay: .8s; transition-delay: .8s } .st7 { -webkit-clip-path: url(#e2_3_); clip-path: url(#e2_3_); stroke-width: 16; stroke-miterlimit: 10; -webkit-transition-delay: .9s; transition-delay: .9s } .id path { fill: #2e3f51 } .id circle { fill: #4dba76 } .id-me-ms { display: none } .me line, .me path, .me polyline { stroke: #2e3f51 } .instructions .instructions-block-2, .instructions .instructions-block-3, .instructions .instructions-block-4 { padding: 15px; margin-top: 25px; border-radius: 8px; position: relative } .instructions .instructions-block-2::after, .instructions .instructions-block-3::after { content: ''; height: 26px; width: 26px; position: absolute; bottom: -12px; background: inherit; left: 50%; z-index: 0; -webkit-transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg) } .instructions .instructions-block-2 { background: #e3e3e3 } .instructions .instructions-block-3 { background: #efefef } .instructions .instructions-block-4 { background: #f8f8f8 } .instructions .instructions-desc { display: -webkit-box; display: flex; -webkit-box-pack: start; justify-content: flex-start; -webkit-box-align: center; width: 90%; align-items: center; margin: 0 auto } .instructions .instructions-desc p { font-size: 14px; line-height: 1.4 } .instructions .instructions-desc-img { text-align: center; position: relative; z-index: 1 } .instructions .instructions-block-3 .instructions-desc-img { background: #fff; border-radius: 5px; padding: 5px; margin-top: 5px } .instructions .instructions-block-2 .instructions-desc-img img, .instructions .instructions-block-4 .instructions-desc-img img { width: 62px } .instructions .instructions-desc-img .circle { width: 14px; height: 14px; border-radius: 50%; display: inline-block; background: #009dd9; position: relative } .instructions .instructions-desc-img .circle::after { content: ''; width: 6px; height: 2px; background: #fff; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .instructions .instructions-desc-img .circle+span { font-size: 12px; display: inline-block; position: relative; top: -2px; left: 2px } .instructions .instructions-block-5 a { display: block; width: 90%; max-width: 226px; height: 44px; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; border-radius: 4px; border: 1px solid transparent; margin: 20px auto; -webkit-transition: all .5s ease; transition: all .5s ease; background: #0e5780; color: white; } .instructions .instructions-block-5 a:hover { background: #e8f3f9; border-color: #0e5780; color: #0e5780 } .instructions .instructions-block-5 p { font-size: 14px; position: absolute; left: 2.5%; color: #777; line-height: 1.2; width: 95%; text-align: center } @media(min-width:600px) { section.instructions { padding: 15px 28px } .instructions-block-1 { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center } .instructions .instructions-logo-container { margin: 0 0 0 18px } .instructions .instructions-block-2, .instructions .instructions-block-3, .instructions .instructions-block-4 { display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; padding: 15px 20px } .instructions .instructions-desc { margin: 0 } .instructions .instructions-block-3 .instructions-desc { width: 75%; padding-right: 20px } .instructions .instructions-block-3 .instructions-desc-img { margin-top: 0 } .instructions .instructions-block-5 { display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-pack: center; justify-content: center } .instructions .instructions-block-5 p { position: relative; left: 0 } .instructions .instructions-block-5 a { margin-left: 0; margin-right: 0 } } @media(min-width:750px) { .instructions .instructions-block-2, .instructions .instructions-block-3, .instructions .instructions-block-4 { padding: 15px 25px 15px 40px } .instructions .instructions-desc p { font-size: 16px } } @media(min-width:950px) { section.instructions { display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; padding: 20px 28px 50px } .instructions .instructions-block-1, .instructions .instructions-block-5 { flex-basis: 65%; min-width: 65%; -webkit-box-ordinal-group: 1; order: 0 } .instructions .instructions-block-1 { -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; flex-basis: 35%; min-width: 35% } .instructions .instructions-block-2, .instructions .instructions-block-3, .instructions .instructions-block-4 { width: 31%; padding: 15px 10px 15px; -webkit-box-ordinal-group: 2; order: 1; max-width: 310px; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column } .instructions .instructions-block-5 { -webkit-box-pack: end; justify-content: flex-end } .instructions .instructions-block-1, .instructions .instructions-block-3 .instructions-desc, .instructions .instructions-block-5, .instructions .instructions-desc { width: 100%; } .instructions .instructions-headline { margin-bottom: 10px } .instructions .instructions-desc-img { height: 100%; width: 100%; max-width: 300px; margin: auto } .instructions .instructions-block-3 .instructions-desc-img { margin-top: 10px } .instructions .instructions-block-2 .instructions-desc-img img, .instructions .instructions-block-4 .instructions-desc-img img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .instructions .instructions-block-5 a { margin: 0 25px 0 0; } .instructions .instructions-block-5 p { position: absolute; right: 30px; bottom: 15px; text-align: right; left: auto } .instructions .instructions-desc-img .circle+span { font-size: 10px } .instructions .instructions-block-2::after, .instructions .instructions-block-3::after { bottom: 50%; left: 100%; width: 20px; height: 20px } .instructions .instructions-block-1, .instructions .instructions-block-2, .instructions .instructions-block-3, .instructions .instructions-block-4, .instructions .instructions-block-5, .instructions .intructions-svg-container svg.id { opacity: 0; -webkit-transition: all .7s ease-in-out; transition: all .7s ease-in-out } .instructions .instructions-block-2 { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } .instructions .instructions-block-3, .instructions .instructions-block-4 { -webkit-transform: translate3d(-150%, 0, 0); transform: translate3d(-150%, 0, 0) } section.instructions.active .instructions-block-1, section.instructions.active .instructions-block-2, section.instructions.active .instructions-block-3, section.instructions.active .instructions-block-4, section.instructions.active .instructions-block-5, section.instructions.active .intructions-svg-container svg.id { opacity: 1; } section.instructions.active .instructions-block-2, section.instructions.active .instructions-block-3, section.instructions.active .instructions-block-4 { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .instructions .instructions-block-2 { -webkit-transition-delay: .4s; transition-delay: .4s; z-index: 2 } .instructions .instructions-block-3 { -webkit-transition-delay: .8s; transition-delay: .8s; z-index: 1 } .instructions .instructions-block-4 { -webkit-transition-delay: 1.2s; transition-delay: 1.2s; z-index: 0 } .instructions .instructions-block-5 { -webkit-transition-delay: 1.6s; transition-delay: 1.6s; } .instructions .intructions-svg-container svg.id { -webkit-transition-delay: 1.9s; transition-delay: 1.9s; } .st0, .st1, .st2, .st3, .st4, .st5, .st6, .st7 { stroke-dasharray: 500; stroke-dashoffset: 500; -webkit-transition: all 2s linear; transition: all 2s linear } .st0 { -webkit-transition-delay: 2s; transition-delay: 2s } .st1 { -webkit-transition-delay: 2.1s; transition-delay: 2.1s } .st2 { -webkit-transition-delay: 2.2s; transition-delay: 2.2s } .st3 { -webkit-transition-delay: 2.3s; transition-delay: 2.3s } .st4 { -webkit-transition-delay: 2.4s; transition-delay: 2.4s } .st5 { -webkit-transition-delay: 2.5s; transition-delay: 2.5s } .st6 { -webkit-transition-delay: 2.8s; transition-delay: 2.8s } .st7 { -webkit-transition-delay: 2.9s; transition-delay: 2.9s } section.instructions.active .st0, section.instructions.active .st1, section.instructions.active .st2, section.instructions.active .st3, section.instructions.active .st4, section.instructions.active .st5, section.instructions.active .st6, section.instructions.active .st7 { stroke-dashoffset: 0 } } @media(min-width:1180px) { section.instructions { width: 90% } .instructions .instructions-block-1 { -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; flex-basis: 45%; min-width: 45%; -webkit-box-pack: start; justify-content: flex-start } .instructions .instructions-block-5 { flex-basis: 55%; min-width: 55% } .instructions .instructions-headline { margin-bottom: 0 } .instructions .instructions-block-3 .instructions-desc { padding: 0 20px } .instructions .instructions-block-5 a { max-width: 248px; height: 55px; font-size: 18px } .instructions .instructions-block-2, .instructions .instructions-block-3, .instructions .instructions-block-4 { max-width: 420px } .instructions .instructions-block-2, .instructions .instructions-block-4 { padding: 15px 40px } .instructions .instructions-desc-img .circle+span { font-size: 12px } } @media(min-width:1440px) { section.instructions { max-width: 1570px; padding: 35px 20px } .instructions .instructions-block-1, .instructions .instructions-block-2, .instructions .instructions-block-3, .instructions .instructions-block-4, .instructions .instructions-block-5 { flex-basis: 19%; min-width: 19%; -webkit-box-ordinal-group: 1; order: 0; -webkit-box-align: center; align-items: center; margin-top: 0 } .instructions .instructions-block-1 { -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-pack: center; justify-content: center; max-width: 240px; min-width: 240px } .instructions .instructions-headline { width: 90%; margin-bottom: 20px } .instructions .instructions-logo-container { width: 150px } .instructions .intructions-svg-container svg.id { height: 55px } .instructions .intructions-svg-container svg.me { height: 32px } .instructions .instructions-block-2, .instructions .instructions-block-3, .instructions .instructions-block-4 { max-width: 295px } .instructions .instructions-block-2, .instructions .instructions-block-4 { padding: 25px 0 18px } .instructions .instructions-block-5 { -webkit-box-align: center; align-items: center; flex-basis: 18%; max-width: 250px; min-width: 200px } .instructions .instructions-desc { margin: auto; width: 80% } .instructions .instructions-block-3 .instructions-desc { padding: 10px 0; width: 85% } .instructions .instructions-desc-img .circle+span { font-size: 9px } .instructions .instructions-block-5 a { font-size: 15px; width: 100%; margin-right: 0; margin-bottom: 10px; position: relative; top: 20px; } .instructions .instructions-block-5 p { position: static; text-align: center; margin-top: 5px } } @media(min-width:1600px) { .instructions .instructions-desc-img .circle+span { font-size: 11px } } @media(min-width:1740px) { section.instructions { padding: 35px 30px 35px 50px } .instructions .instructions-block-2, .instructions .instructions-block-3, .instructions .instructions-block-4 { min-width: 20% } .instructions .instructions-block-5 a { font-size: 18px } .instructions .instructions-desc-img .circle+span { font-size: 13px } } @supports (-ms-accelerator:true) { .instructions .intructions-svg-container { display: none } .id-me-ms { display: block } } @supports (-ms-ime-align:auto) { .instructions .intructions-svg-container { display: none } .id-me-ms { display: block } } @media all and (-ms-high-contrast:none), (-ms-high-contrast:active) { .instructions .intructions-svg-container { display: none } .id-me-ms { display: block } }