.accessories-parade-content { width: 100%; align-items: center; flex-direction: row-reverse; } .accessories-parade-content-container { margin: 0 auto; padding-right: 60px; padding-left: 292px; box-sizing: border-box; } .accessories-parade-heading { margin-bottom: 0; padding-top: 40px; } .accessories-parade-desc { padding-top: 20px; font-size: 18px; line-height: 24px; font-weight: 200; } .accessories-parade-desc ul { list-style-type: disc; margin-left:20px; } .accessories-parade-desc p a { text-decoration: underline; color: blue; cursor: pointer; } .accessories-parade a { text-decoration: none; color: #0067b8; padding: 3px 3px 7px 0; } .accessories-parade-media { position: relative; } .accessories-parade-media img, .accessories-parade-media video { width: 100%; } .accessories-parade-overlay-container { width: 50%; z-index: 2; margin: -100px 0 -100px 0; } .accessories-parade-overlay-container img { width: 100%; } .btn-div { position: absolute; z-index: 4; left: 30px; top: 100px; } @media screen and (max-width: 767px) { .btn-div { left: 20px; top: -20px; } } .accessories-parade-video .c-glyph.glyph-pause::before { content: "\e769"; } .accessories-parade-video .c-glyph.glyph-play::before { content: "\e768"; } .accessories-parade-video a.c-call-to-action.c-glyph.glyph-play::before, .accessories-parade-video button.c-call-to-action.c-glyph.glyph-play::before { line-height: 1; position: relative; top: 2px; } .accessories-parade-video a.c-call-to-action:not(.glyph-play)::after, .accessories-parade-video button.c-call-to-action:not(.glyph-play)::after { font-size: 11px; margin-top: 3px; margin-left: 3px; display: inline-block; position: relative; right: 0; /* content: "\e76c"; */ vertical-align: top; } .accessories-parade-video a.c-call-to-action:not(.glyph-play):focus:not(.x-hidden-focus) span, .accessories-parade-video a.c-call-to-action:not(.glyph-play):hover span, .accessories-parade-video button.c-call-to-action:not(.glyph-play):focus:not(.x-hidden-focus) span, .accessories-parade-video button.c-call-to-action:not(.glyph-play):hover span { left: -4px; } .accessories-parade-video a.c-call-to-action:not(.glyph-play):focus:not(.x-hidden-focus):after, .accessories-parade-video a.c-call-to-action:not(.glyph-play):hover:after, .accessories-parade-video button.c-call-to-action:not(.glyph-play):focus:not(.x-hidden-focus):after, .accessories-parade-video button.c-call-to-action:not(.glyph-play):hover:after { right: -4px; } .accessories-parade-video .btn-div .videobutton.c-call-to-action.c-glyph:focus { border: 3px solid #000000; outline-color: transparent; } .accessories-parade-video .videobutton, button.c-call-to-action.videobutton { font-family: 'MWF-MDL2'; border: 2px solid #000000; width: 50px; height: 50px; background: transparent; border-radius: 50%; position: relative; font-weight: 600; margin: 0; padding: 0; overflow: initial; background-color: #fff; } .accessories-parade-video .videobutton:focus, button.c-call-to-action.videobutton:focus, .accessories-parade-video .videobutton:hover, button.c-call-to-action.videobutton:hover { background-color: #fff; } .accessories-parade-video .videobutton span { max-width: 100%; display: inline-block; position: relative; left: 0; text-overflow: clip; overflow: hidden; transition: all 200ms ease-in-out; vertical-align: top; line-height: 18.5px; } .accessories-parade-video .videobutton::before { content: "\25BA"; color: #000000; margin-left: 0px; margin-top: 2px; line-height: 1; position: relative; top: 2px; } .accessories-parade-video button.c-call-to-action.videobutton.c-glyph.glyph-pause:before { display: none; } .accessories-parade-video button.c-call-to-action.videobutton.c-glyph.glyph-pause:after { content: "\e769"; color: #000; font-size: 16px; margin-left: 0; } .accessories-parade .c-heading-1 { font-size: 62px; line-height: 72px; } .accessories-parade .c-heading-2 { font-size: 46px; line-height: 56px; } .accessories-parade .c-heading-3{ font-size: 34px; line-height: 40px; } .accessories-parade .c-heading-4 { font-size: 24px; line-height: 28px; } .accessories-parade .c-heading-5 { font-size: 20px; line-height: 24px; } .accessories-parade .c-heading-6 { font-size: 18px; line-height: 24px; } /* MEDIA QUERIES */ @media screen and (max-width: 767px) { .accessories-parade-content-container { padding: 0 20px 45px 64px; } .accessories-parade-desc { font-size: 20px; line-height: 32px; padding: 4px 0; } } @media (min-width: 768px) and (max-width: 1083px) { .accessories-parade-content-container { padding: 0 0 12px 92px; } .accessories-parade-desc { padding: 24px 0; margin: 0; } } @media (max-width: 216px) { .accessories-parade .c-heading-3 { font-size: 24px; line-height: 26px; } }