@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,600i,700,800"); .video-modal .vid-container { display: none; } .vid-container { background-color: #fff; } .video-display, .vid-container, .colorbox { width: 300px !important; height: 167px !important; } .vid-container, .colorbox { width: 800px !important; height: 445px !important; margin: auto !important; background-color: black; } .video-display { width: 800px !important; height: 441px !important; margin: auto !important; } @media (max-width: 992px) { .video-display, .vid-container, .colorbox { width: 564px !important; height: 334px !important; } } @media (max-width: 660px) { .video-display, .vid-container, .colorbox { width: 500px !important; height: 278px !important; } } @media (max-width: 480px) { .video-display, .vid-container, .colorbox { width: 400px !important; height: 223px !important; } } @media (max-width: 320px) { .video-display, .vid-container, .colorbox { width: 300px !important; height: 167px !important; } } #your-hearing-journey { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-bottom: 0; } #your-hearing-journey > .container { width: auto !important; padding: 0; } #your-hearing-journey h3 { margin-bottom: 30px; font-family: "Open Sans", sans-serif; font-size: 2.2rem; font-weight: 700; color: #333; text-transform: uppercase; } #your-hearing-journey h4 { font-family: "Open Sans", sans-serif; font-weight: 600; font-size: 1.9rem; line-height: 1.2; color: #333; } #your-hearing-journey p { padding-left: 15px; padding-right: 15px; font-family: "Open Sans", sans-serif; font-weight: 400; } #your-hearing-journey .container { position: relative; } #your-hearing-journey .dotted-box { position: absolute; border: 0 dotted #d8d8d8; } #your-hearing-journey .headline-wrapper { position: relative; } #your-hearing-journey .headline-wrapper span { font-family: "Open Sans", sans-serif; font-weight: 300; font-size: 13rem; line-height: 1; opacity: 0.15; } #your-hearing-journey .headline-wrapper h2 { position: absolute; top: 53%; left: 32px; -webkit-transform: translateY(-50%); transform: translateY(-50%); margin: 0; font-family: "Open Sans", sans-serif; font-weight: 800; font-size: 3rem; line-height: 1; color: inherit; text-transform: uppercase; white-space: nowrap; } #your-hearing-journey .headline-wrapper + p { margin-top: 12px; line-height: 1.7; } @media only screen and (min-width: 352px) { #your-hearing-journey .headline-wrapper span { font-size: 40vw; } #your-hearing-journey .headline-wrapper h2 { left: 9.5vw; font-size: 8vw; } #your-hearing-journey .headline-wrapper + p { max-width: 480px; margin-left: 12px; border-left: 4px dotted #d8d8d8; padding-left: 20px !important; } } @media only screen and (min-width: 564px) { #your-hearing-journey .headline-wrapper span { font-size: 24rem; } #your-hearing-journey .headline-wrapper h2 { left: 60px; font-size: 4.8rem; } } @media only screen and (min-width: 660px) { #your-hearing-journey h3 { font-size: 2.4rem; } #your-hearing-journey .headline-wrapper + p { font-size: 1.8rem; line-height: 1.3; } } #your-hearing-journey nav ul { z-index: 100; position: fixed; bottom: 0; width: 100%; margin: 0; padding: 12px 16px 16px; list-style: none; background: #f2f2f2; } #your-hearing-journey nav.stick ul { position: relative; } #your-hearing-journey nav li { position: relative; float: left; width: 25%; padding-bottom: 10px; border-bottom: 2px solid #b1b3b3; text-align: center; } #your-hearing-journey nav li a { font-size: 2rem; color: #00aec7; text-decoration: none; } #your-hearing-journey nav li a span { display: none; } #your-hearing-journey nav li a em { font-family: "Open Sans", sans-serif; font-weight: 400; font-style: normal; } #your-hearing-journey nav li a:after { content: ""; position: absolute; bottom: -8px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border: 2px solid #00aec7; border-radius: 7px; background-color: #fff; } #your-hearing-journey nav li a.active:after { bottom: -10px; width: 20px; height: 20px; margin-left: -10px; border-radius: 10px; border-width: 6px; } #your-hearing-journey nav li:first-child { position: absolute; top: -32px; left: 0; width: 100%; border-bottom: 0; font-family: "Open Sans", sans-serif; font-weight: 400; text-transform: uppercase; } #your-hearing-journey nav li:first-child a { cursor: default; color: #58595b; } #your-hearing-journey nav li:first-child a span { display: block; } #your-hearing-journey nav li:first-child a:after { display: none; } #your-hearing-journey nav li:nth-child(2) a { color: #003a70; } #your-hearing-journey nav li:nth-child(2) a:after { border-color: #003a70; } #your-hearing-journey nav li:nth-child(3) a { color: #b5bd00; } #your-hearing-journey nav li:nth-child(3) a:after { border-color: #b5bd00; } #your-hearing-journey nav li:nth-child(4) a { color: #ea7600; } #your-hearing-journey nav li:nth-child(4) a:after { border-color: #ea7600; } @media only screen and (min-width: 564px) { #your-hearing-journey nav ul { position: absolute; top: 125px; right: 36px; bottom: auto; width: auto; background: transparent; } #your-hearing-journey nav ul.fixed { position: fixed; top: 40px; } #your-hearing-journey nav ul li { float: none; width: auto; height: 68px; padding-bottom: 0; border-right: 2px solid #b1b3b3; border-bottom: 0; line-height: 68px; } #your-hearing-journey nav ul li a em { position: absolute; right: -36px; } #your-hearing-journey nav ul li a:after { right: -8px; bottom: 50%; left: auto; margin-bottom: -5px; } #your-hearing-journey nav ul li a.active:after { bottom: 50%; right: -13px; width: 24px; height: 24px; margin-bottom: -11px; border-radius: 12px; } #your-hearing-journey nav ul li:first-child { position: relative; top: auto; left: auto; width: auto; height: 34px; } #your-hearing-journey nav ul li:first-child a { cursor: pointer; } #your-hearing-journey nav ul li:first-child a span { display: none; } #your-hearing-journey nav ul li:first-child a:after { display: block; top: -10px; } #your-hearing-journey nav ul li:first-child a.active:after { top: -12px; } } @media only screen and (min-width: 660px) { #your-hearing-journey nav ul li { height: 76px; line-height: 76px; } } @media only screen and (min-width: 992px) { #your-hearing-journey nav ul { position: fixed; top: 154px; } #your-hearing-journey nav ul.fixed { position: fixed; top: 154px; } #your-hearing-journey nav ul li { text-align: right; } #your-hearing-journey nav ul li a span { display: inline-block; padding-right: 24px; font-family: "Open Sans"; font-weight: 400; } #your-hearing-journey nav ul li a em { font-size: 88%; } #your-hearing-journey nav ul.kill-label li a span { display: none; } } @media only screen and (min-width: 1200px) { #your-hearing-journey nav ul li { height: 100px; line-height: 100px; } #your-hearing-journey nav ul li a { font-size: 2.4rem; } } #your-hearing-journey .video { margin: 30px auto; } #your-hearing-journey .video h3 { text-align: center; } #your-hearing-journey .video a { position: relative; display: block; } #your-hearing-journey .video a:after { content: ""; position: absolute; top: 50%; left: 50%; margin: -24px 0 0 -16px; border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 46px solid #00aec7; opacity: 0.6; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } #your-hearing-journey .video a:hover:after { opacity: 1; } #your-hearing-journey .video img { width: 100%; -webkit-box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.16); box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.16); } #your-hearing-journey #journey00 { padding: 0 0 100px; text-align: center; } #your-hearing-journey #journey00 .col-sm-12 { padding: 0; } #your-hearing-journey #journey00 h1 { font-family: "Open Sans", sans-serif; font-weight: 800; font-size: 3rem; line-height: 1.1; color: #00aec7; text-transform: uppercase; } #your-hearing-journey #journey00 h3 { display: inline-block; margin-top: 0; border-top: 2px solid #00aec7; padding-top: 14px; font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 1.6rem; color: #58595b; text-transform: none; } #your-hearing-journey #journey00 .movie-wrapper { position: relative; margin: 0 25px 20px; } #your-hearing-journey #journey00 .movie-wrapper a:after { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-36%, -50%); transform: translate(-36%, -50%); border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 46px solid #fff; opacity: 0.6; -webkit-filter: drop-shadow(0px 3px 6px #333); filter: drop-shadow(0px 3px 6px #333); -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } #your-hearing-journey #journey00 .movie-wrapper a:hover:after { opacity: 1; } #your-hearing-journey #journey00 .movie-wrapper img { width: 100%; display: block; max-width: 100%; height: auto; } #your-hearing-journey #journey00 p { margin-top: 1em; font-family: "Open Sans", sans-serif; font-weight: 400; color: #58595b; text-transform: uppercase; } @media only screen and (min-width: 352px) { #your-hearing-journey #journey00 h1 { font-size: 9vw; } #your-hearing-journey #journey00 h3 { font-size: 5vw; } #your-hearing-journey #journey00 .movie-wrapper { margin-top: 10px; } } @media only screen and (min-width: 564px) { #your-hearing-journey #journey00 h1 { margin-left: 15px; font-size: 5.4rem; } #your-hearing-journey #journey00 h3 { margin-left: 15px; font-size: 2.6rem; } #your-hearing-journey #journey00 .movie-wrapper { width: 80%; max-width: 560px; margin: 16px auto 20px; } #your-hearing-journey #journey00 .movie-wrapper a:after { border-top-width: 40px; border-bottom-width: 40px; border-left-width: 60px; } #your-hearing-journey #journey00 .movie-wrapper .dotted-box { left: 112px; bottom: -130px; height: 112px; border-right-width: 4px; } #your-hearing-journey #journey00 .movie-wrapper .dotted-box:after { content: ""; position: absolute; right: -16px; bottom: -26px; border-top: 22px solid #d8d8d8; border-right: 14px solid transparent; border-left: 14px solid transparent; } } @media only screen and (min-width: 660px) { #your-hearing-journey #journey00 .movie-wrapper { max-width: none; } #your-hearing-journey #journey00 .movie-wrapper .dotted-box { right: 24px; bottom: -260px; left: auto; height: 240px; width: 60px; border-bottom-width: 4px; } #your-hearing-journey #journey00 .movie-wrapper .dotted-box:after { right: auto; bottom: -16px; left: -40px; border-right: 22px solid #d8d8d8; border-top: 14px solid transparent; border-bottom: 14px solid transparent; } } @media only screen and (min-width: 945px) { #your-hearing-journey #journey00 .movie-wrapper .dotted-box { right: 30px; bottom: -250px; height: 230px; width: 130px; } } #your-hearing-journey #journey01 { padding: 20px 0 50px; } #your-hearing-journey #journey01 .headline-wrapper { margin-right: -15px; margin-left: -15px; color: #003a70 !important; } #your-hearing-journey #journey01 .headline-wrapper + p { padding: 0; } #your-hearing-journey #journey01 .slideshow-wrapper { position: relative; height: 286px; width: 290px; margin: 20px auto 70px; } #your-hearing-journey #journey01 .slideshow-wrapper .slideshow { position: relative; top: 100px; z-index: 10; width: 268px; height: 180px; background: #fff; -webkit-box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.16); box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.16); } #your-hearing-journey #journey01 .slideshow-wrapper .slideshow img { position: absolute; top: 0; left: 0; } #your-hearing-journey #journey01 .slideshow-wrapper .dotted-box { z-index: 5; right: 9px; bottom: -11px; height: 90px; width: 90px; border-right-width: 4px; border-bottom-width: 4px; } #your-hearing-journey #journey01 .slideshow-wrapper h3 { position: absolute; z-index: 1; top: 0; right: 0; display: inline-block; padding: 14px 25px 160px; background: #00aec7; text-align: center; color: #fff; } #your-hearing-journey #journey01 .slideshow-wrapper h3:after { display: block; margin-top: 4px; content: "\e114"; font-family: 'Glyphicons Halflings'; font-size: 3rem; color: #fff; } #your-hearing-journey #journey01 .common-signs { max-width: 300px; margin: 30px auto 60px; padding: 18px 20px; border-radius: 42px; background: #fafafa; -webkit-box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.16); box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.16); } #your-hearing-journey #journey01 .common-signs h3 { margin-top: 4px; padding: 0 17px; text-align: center; line-height: 1.2; } #your-hearing-journey #journey01 .common-signs h3:after { display: block; margin-top: 4px; content: "\e114"; font-family: 'Glyphicons Halflings'; font-size: 3rem; color: #00aec7; } #your-hearing-journey #journey01 .common-signs ul { list-style: none; padding-left: 0; } #your-hearing-journey #journey01 .common-signs li { position: relative; margin: 30px 0; padding-left: 48px; font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 1.6rem; line-height: 1.3; } #your-hearing-journey #journey01 .common-signs li:first-child { margin-top: 12px; } #your-hearing-journey #journey01 .common-signs li:before { position: absolute; top: 50%; left: 0; margin-top: -1.5rem; content: "\e013"; font-family: 'Glyphicons Halflings'; font-size: 3rem; color: #00aec7; } #your-hearing-journey #journey01 .video { width: 80%; max-width: 300px; } @media only screen and (min-width: 564px) { #your-hearing-journey #journey01 .slideshow-wrapper { height: 350px; width: 360px; } #your-hearing-journey #journey01 .slideshow-wrapper .slideshow { top: 110px; height: 228px; width: 320px; } #your-hearing-journey #journey01 .slideshow-wrapper .dotted-box { right: 18px; } #your-hearing-journey #journey01 .slideshow-wrapper h3 { padding: 20px 30px 200px; } #your-hearing-journey #journey01 .common-signs { max-width: 380px; } #your-hearing-journey #journey01 .common-signs h3 { padding: 0 30px; font-size: 2.4rem; } #your-hearing-journey #journey01 .common-signs ul { padding: 0 24px; } #your-hearing-journey #journey01 .common-signs li { padding-left: 54px; font-size: 1.8rem; } } @media only screen and (min-width: 660px) { #your-hearing-journey #journey01 .slideshow-wrapper { margin-top: 40px; } #your-hearing-journey #journey01 .video { position: relative; z-index: 2; } #your-hearing-journey #journey01 .video .dotted-box { bottom: -90px; left: -90px; height: 160px; width: 70px; border-top-width: 4px; border-left-width: 4px; } #your-hearing-journey #journey01 .video .dotted-box:after { content: ""; position: absolute; left: -16px; bottom: -26px; border-top: 22px solid #d8d8d8; border-right: 14px solid transparent; border-left: 14px solid transparent; } } @media only screen and (min-width: 945px) { #your-hearing-journey #journey01 { padding-top: 0; padding-bottom: 20px; } #your-hearing-journey #journey01 .container { position: relative; height: 1200px; } #your-hearing-journey #journey01 .headline-wrapper + p { max-width: 460px; } #your-hearing-journey #journey01 .slideshow-wrapper { position: absolute; right: -10px; top: 332px; } #your-hearing-journey #journey01 .common-signs { position: absolute; top: 420px; left: 0; max-width: 300px; } #your-hearing-journey #journey01 .common-signs ul { padding: 0 8px; } #your-hearing-journey #journey01 .common-signs li { font-size: 1.6rem; } #your-hearing-journey #journey01 .video { position: absolute; right: 30px; bottom: -60px; margin: 0; } #your-hearing-journey #journey01 .video:after { bottom: -130px; left: -70px; height: 200px; width: 50px; } #your-hearing-journey #journey01 .video .dotted-box { bottom: 10px; left: -274px; height: 66px; width: 254px; } } #your-hearing-journey #journey02 { padding: 10px 0 0; background: #f5f2f2; } #your-hearing-journey #journey02 .headline-wrapper { color: #b5bd00 !important; } #your-hearing-journey #journey02 .headline-wrapper + h3 { margin-top: 24px; margin-bottom: 0; font-size: 2rem; line-height: 1.2; text-transform: none; text-align: center; } #your-hearing-journey #journey02 .col-sm-6 { padding: 40px 15px; text-align: center; } #your-hearing-journey #journey02 .col-sm-6 h4 { margin: 0 0 30px; } #your-hearing-journey #journey02 .col-sm-6 .promo { max-width: 400px; margin: 0 auto; border-radius: 10px; padding: 16px 14px; background: #fff; -webkit-box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.16); box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.16); } #your-hearing-journey #journey02 .col-sm-6 .btn { display: block; max-width: 320px; margin: 0 auto; padding: 14px 10px; background-color: #ea7600; border-color: #ea7600; font-family: "Open Sans", sans-serif; font-weight: 700; font-size: 2rem; color: #fff; text-transform: uppercase; } #your-hearing-journey #journey02 .col-sm-6 .btn:after { display: none; } #your-hearing-journey #journey02 .col-sm-6 .btn:hover { background-color: #003a70; border-color: #003a70; } #your-hearing-journey #journey02 .col-sm-6 + .col-sm-6 { position: relative; padding-bottom: 50px; } #your-hearing-journey #journey02 .col-sm-6 + .col-sm-6 .btn { background-color: #00aec7; border-color: #00aec7; } #your-hearing-journey #journey02 .col-sm-6 + .col-sm-6 .btn:hover { background-color: #003a70; border-color: #003a70; } #your-hearing-journey #journey02 .col-sm-6 .dotted-box { top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 75%; max-width: 290px; border-top-width: 4px; } #your-hearing-journey #journey02 .transition { background: #fff url("../img/02-transition-bkgd-xs.jpg") center top no-repeat; background-size: contain; } #your-hearing-journey #journey02 .transition .container { position: relative; padding-bottom: 110%; } #your-hearing-journey #journey02 .transition .dotted-box { top: -25px; left: 50%; height: 40px; border-right-width: 4px; } #your-hearing-journey #journey02 .transition .dotted-box:after { content: ""; position: absolute; bottom: -28px; left: -14px; border-top: 24px solid #d8d8d8; border-right: 16px solid transparent; border-left: 16px solid transparent; } #your-hearing-journey #journey02 .transition video { display: none; } #your-hearing-journey #journey02 .transition .video-left { position: absolute; bottom: 0; left: 24%; } #your-hearing-journey #journey02 .transition .video-left .dotted-box { top: auto; bottom: -80px; left: 0; height: 120px; } #your-hearing-journey #journey02 .transition .video-left .dotted-box:after { bottom: -24px; left: -10px; border-top: 18px solid #d8d8d8; border-right: 12px solid transparent; border-left: 12px solid transparent; } #your-hearing-journey #journey02 .transition .video-right { position: absolute; } @media only screen and (min-width: 352px) { #your-hearing-journey #journey02 h3 .visible-xs { display: none !important; } #your-hearing-journey #journey02 .col-sm-6 .promo { padding: 26px 14px; } } @media only screen and (min-width: 564px) { #your-hearing-journey #journey02 .transition { background: #fff url("../img/02-transition-bkgd.jpg") 62% top no-repeat; background-size: cover; } #your-hearing-journey #journey02 .transition .container { padding-bottom: 70%; } #your-hearing-journey #journey02 .transition .video-left .dotted-box { bottom: -110px; height: 160px; } #your-hearing-journey #journey02 .col-sm-6 .btn { max-width: 360px; padding: 16px 10px; font-size: 2.2rem; } } @media only screen and (min-width: 660px) { #your-hearing-journey #journey02 .headline-wrapper + h3 { margin-top: 0; } #your-hearing-journey #journey02 .row { margin: 30px 0 40px; } #your-hearing-journey #journey02 .col-sm-6 { padding: 20px 24px 10px !important; } #your-hearing-journey #journey02 .col-sm-6 .btn { padding: 18px 10px; font-size: 1.8rem; } #your-hearing-journey #journey02 .col-sm-6 .dotted-box { top: 12px; left: 0; width: auto; height: 280px; border-top-width: 0; border-left-width: 4px; } #your-hearing-journey #journey02 .col-sm-6 .dotted-box:after { content: ""; position: absolute; bottom: -22px; left: -14px; border-top: 18px solid #d8d8d8; border-right: 12px solid transparent; border-left: 12px solid transparent; } #your-hearing-journey #journey02 .transition { background-size: auto 532px; } #your-hearing-journey #journey02 .transition .container { padding-bottom: 532px; } #your-hearing-journey #journey02 .transition .container > .dotted-box { display: none; } #your-hearing-journey #journey02 .transition img { display: none; } #your-hearing-journey #journey02 .transition video { display: block; top: 0 !important; left: 0 !important; } #your-hearing-journey #journey02 .transition .video-left { bottom: -48px; left: 50px; height: 360px; width: 210px; } #your-hearing-journey #journey02 .transition .video-left .dotted-box { bottom: -104px; left: 80px; height: 90px; } #your-hearing-journey #journey02 .transition .video-right { display: block; bottom: -196px; right: 50px; height: 360px; width: 210px; } } #your-hearing-journey #journey03 { margin-top: 110px; padding-bottom: 10px; overflow: hidden; } #your-hearing-journey #journey03 .container { padding: 0; } #your-hearing-journey #journey03 .headline-wrapper { color: #ea7600 !important; } #your-hearing-journey #journey03 .headline-wrapper h2 { font-size: 2.5rem; } #your-hearing-journey #journey03 .ignore-it { display: none; } #your-hearing-journey #journey03 .row > div { padding-top: 20px; padding-bottom: 20px; text-align: center; } #your-hearing-journey #journey03 .video a { position: relative; width: 90%; margin: 0 auto; } #your-hearing-journey #journey03 .video a:after { border-left-color: #fff; } #your-hearing-journey #journey03 .video .dotted-box { bottom: -50px; left: 5%; width: 90%; border-bottom-width: 4px; } #your-hearing-journey #journey03 .responsive-gallery { margin-top: 20px; } @media only screen and (min-width: 350px) { #your-hearing-journey #journey03 .headline-wrapper h2 { font-size: 8vw; } } @media only screen and (min-width: 564px) { #your-hearing-journey #journey03 .video a { width: 80%; } #your-hearing-journey #journey03 .responsive-gallery { width: 80%; margin: 20px auto; } } @media only screen and (min-width: 600px) { #your-hearing-journey #journey03 .headline-wrapper h2 { font-size: 4.8rem; } } @media only screen and (min-width: 660px) { #your-hearing-journey #journey03 { margin-top: 150px; } #your-hearing-journey #journey03 .headline-wrapper .dotted-box { right: 97px; bottom: -180px; height: 120px; width: 14%; border-top-width: 4px; border-right-width: 4px; } #your-hearing-journey #journey03 .headline-wrapper .dotted-box:after { content: ""; position: absolute; right: -16px; bottom: -26px; border-top: 22px solid #d8d8d8; border-right: 14px solid transparent; border-left: 14px solid transparent; } #your-hearing-journey #journey03 .ignore-it { position: relative; display: block; margin: 50px auto 20px; } #your-hearing-journey #journey03 .ignore-it .image-wrapper { position: relative; overflow: hidden; height: 500px; width: 500px; } #your-hearing-journey #journey03 .ignore-it .image-wrapper img { position: absolute; top: 0; left: 0; } #your-hearing-journey #journey03 .ignore-it .image-wrapper img.mask { opacity: 0; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } #your-hearing-journey #journey03 .ignore-it .image-wrapper img.mask.birds { top: -319px; left: -56px; width: 172%; opacity: 1; } #your-hearing-journey #journey03 .ignore-it .image-wrapper img.mask.friends { top: -360px; left: -490px; width: 235%; opacity: 1; } #your-hearing-journey #journey03 .ignore-it .image-wrapper img.mask.kids { top: -234px; left: -148px; width: 180%; opacity: 1; } #your-hearing-journey #journey03 .ignore-it .image-wrapper img.mask.music { top: -118px; left: -75px; width: 185%; opacity: 1; } #your-hearing-journey #journey03 .ignore-it .image-wrapper img.mask.water { top: -2px; left: -148px; width: 182%; opacity: 1; } #your-hearing-journey #journey03 .ignore-it .controls { position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 200px; background: #fff; background: rgba(255, 255, 255, 0.92); border: 2px solid #ddd; text-align: center; } #your-hearing-journey #journey03 .ignore-it .controls h3 { margin: 0 0 20px; padding: 16px 10px; border-bottom: 3px dotted #d8d8d8; color: #00aec7; } #your-hearing-journey #journey03 .ignore-it .controls p { padding: 0 25px; font-size: 1.4rem; line-height: 1.3; } #your-hearing-journey #journey03 .ignore-it .controls ul { list-style: none; padding: 0 20px; } #your-hearing-journey #journey03 .ignore-it .controls li { position: relative; margin: 30px 0; padding-left: 28px; font-family: "Open Sans", sans-serif; font-weight: 600; font-size: 1.6rem; line-height: 1; text-align: left; } #your-hearing-journey #journey03 .ignore-it .controls li:first-child { margin-top: 20px; } #your-hearing-journey #journey03 .ignore-it .controls li:before { position: absolute; top: 50%; left: 0; margin-top: -10px; content: "\e080"; font-family: 'Glyphicons Halflings'; font-size: 2rem; color: #00aec7; } #your-hearing-journey #journey03 .ignore-it .controls li:hover:before { color: #ea7600; } #your-hearing-journey #journey03 .video { margin: 0; } #your-hearing-journey #journey03 .video a { width: 90%; } #your-hearing-journey #journey03 .video .dotted-box { right: -14px; bottom: -14px; left: auto; height: 60px; width: 64px; border-right-width: 4px; } #your-hearing-journey #journey03 .responsive-gallery { width: 100%; margin-bottom: 40px; } #your-hearing-journey #journey03 .responsive-gallery .btn-prev { left: 4%; } #your-hearing-journey #journey03 .responsive-gallery .btn-next { right: 4%; } #your-hearing-journey #journey03 .responsive-gallery ul { width: 100%; padding-top: 50%; } #your-hearing-journey #journey03 .responsive-gallery li { width: 33.33%; } #your-hearing-journey #journey03 .responsive-gallery > a { width: 5%; } } #your-hearing-journey #journey04 { overflow: hidden; padding-bottom: 0; } #your-hearing-journey #journey04 .container { padding: 0; } #your-hearing-journey #journey04 > .container:first-child { position: relative; padding-top: 32%; } #your-hearing-journey #journey04 .transition { position: absolute; top: 0; right: -15px; width: 68%; padding-bottom: 32%; background: url("../img/04-transition.jpg") left center no-repeat; background-size: cover; } #your-hearing-journey #journey04 .transition .dotted-box { position: absolute; top: 60%; left: -16%; width: 21%; height: 44%; border-top-width: 4px; border-left-width: 4px; } #your-hearing-journey #journey04 .transition .dotted-box:after { content: ""; position: absolute; bottom: -22px; left: -14px; border-top: 18px solid #d8d8d8; border-right: 12px solid transparent; border-left: 12px solid transparent; } #your-hearing-journey #journey04 .headline-wrapper { color: #00aec7 !important; } #your-hearing-journey #journey04 .hearing-professional { margin-top: 80px; padding: 20px 15px; background: #f7f4f4; text-align: center; } #your-hearing-journey #journey04 .hearing-professional .btn { width: 80%; padding: 12px 10px; white-space: normal; background-color: #ea7600; border-color: #ea7600; font-family: "Open Sans", sans-serif; font-weight: 700; font-size: 1.8rem; color: #fff; line-height: 1.3; } #your-hearing-journey #journey04 .hearing-professional .btn:after { display: none; } #your-hearing-journey #journey04 .hearing-professional .btn:hover { background-color: #003a70; border-color: #003a70; } #your-hearing-journey #journey04 .hearing-professional .image-wrapper { position: relative; width: 138px; height: 220px; margin: 30px auto; background: url("../img/04-hearing-professional.png") top center no-repeat; background-size: cover; } #your-hearing-journey #journey04 .hearing-professional .image-wrapper h5 { position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: inline-block; margin: 0; background: #00aec7; padding: 6px 10px; font-family: "Open Sans", sans-serif; font-weight: 700; font-size: 2.4rem; line-height: 1; color: #fff; white-space: nowrap; } #your-hearing-journey #journey04 .hearing-professional ul { width: 80%; margin: 0 auto; padding-left: 0; list-style: none; } #your-hearing-journey #journey04 .hearing-professional li { position: relative; margin: 24px 0; padding: 0 0 0 64px; font-family: "Open Sans", sans-serif; font-weight: 400; line-height: 1.375; text-align: left; } #your-hearing-journey #journey04 .hearing-professional li:first-child { margin-top: 12px; } #your-hearing-journey #journey04 .hearing-professional li:before { position: absolute; top: 50%; left: 0; margin-top: -4rem; content: "\e013"; font-family: 'Glyphicons Halflings'; font-size: 4rem; color: #b5bd00; } #your-hearing-journey #journey04 .hearing-professional li:after { content: ""; display: block; margin-top: 24px; border-bottom: 1px solid #d8d8d8; } #your-hearing-journey #journey04 .awesome { position: relative; padding-top: 100px; text-align: center; } #your-hearing-journey #journey04 .awesome .dotted-box { position: absolute; top: 30px; left: 50%; height: 42px; border-right-width: 4px; } #your-hearing-journey #journey04 .awesome .dotted-box:after { content: " "; position: absolute; bottom: -22px; left: -10px; border-top: 18px solid #d8d8d8; border-right: 12px solid transparent; border-left: 12px solid transparent; } #your-hearing-journey #journey04 .awesome .quote-wrapper { position: relative; height: 980px; max-width: 320px; width: 65%; margin: 0 auto; } #your-hearing-journey #journey04 .awesome .quote-wrapper h5 { position: absolute; display: inline-block; width: 184px; margin: 0; padding: 16px 20px; font-family: "Open Sans", sans-serif; font-weight: 600; font-size: 1.8rem; line-height: 1.3; color: #00aec7; background-color: #fff; -webkit-box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.16); box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.16); } #your-hearing-journey #journey04 .awesome .quote-wrapper h5.reverse { background-color: #00aec7; color: #fff; } #your-hearing-journey #journey04 .awesome .quote-wrapper h5.quote01 { top: 0; right: 15px; } #your-hearing-journey #journey04 .awesome .quote-wrapper h5.quote02 { top: 830px; left: 15px; } #your-hearing-journey #journey04 .awesome .quote-wrapper h5.quote03 { top: 320px; left: 70px; } #your-hearing-journey #journey04 .awesome .quote-wrapper h5.quote04 { top: 564px; left: 80px; } #your-hearing-journey #journey04 .awesome .quote-wrapper h5.quote05, #your-hearing-journey #journey04 .awesome .quote-wrapper h5.quote06 { display: none; } #your-hearing-journey #journey04 .awesome .quote-wrapper img { position: absolute; -webkit-box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.16); box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.16); } #your-hearing-journey #journey04 .awesome .quote-wrapper img.image01 { top: 90px; left: 15px; } #your-hearing-journey #journey04 .awesome .quote-wrapper img.image02 { top: 650px; right: 0; } #your-hearing-journey #journey04 .awesome .quote-wrapper img.image03 { top: 396px; right: 15px; width: 86%; } #your-hearing-journey #journey04 .awesome .quote-wrapper img.image04, #your-hearing-journey #journey04 .awesome .quote-wrapper img.image05 { display: none; } #your-hearing-journey #journey04 .reviews { position: relative; padding-top: 50px; padding-bottom: 0; } #your-hearing-journey #journey04 .reviews .container { padding-top: 30px; } #your-hearing-journey #journey04 .reviews .container > .dotted-box { top: -83px; left: 50%; height: 90px; border-left-width: 4px; } #your-hearing-journey #journey04 .reviews .container > .dotted-box:after { content: ""; position: absolute; bottom: -22px; left: -14px; border-top: 18px solid #d8d8d8; border-right: 12px solid transparent; border-left: 12px solid transparent; } #your-hearing-journey #journey04 .reviews h3 { margin-bottom: 55px; text-align: center; } #your-hearing-journey #journey04 .reviews figure { position: relative; margin-bottom: 100px; padding: 67px 40px 30px; background: #ededed; } #your-hearing-journey #journey04 .reviews figure:before { content: "\201c"; position: absolute; top: -50px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); font-family: Arial, sans-serif !important; font-weight: 700; font-size: 20rem; line-height: 1; color: #00aec7; } #your-hearing-journey #journey04 .reviews figure blockquote { position: relative; margin: 0; border: 0; padding: 0; text-align: center; } #your-hearing-journey #journey04 .reviews figure blockquote p { font-family: "Open Sans", sans-serif; font-size: 1.8rem; line-height: 1.5; font-weight: 400; font-style: italic; } #your-hearing-journey #journey04 .reviews figure blockquote cite { display: block; margin-top: 12px; font-family: "Open Sans", sans-serif; font-size: 90%; font-weight: 600; font-style: italic; } #your-hearing-journey #journey04 .reviews figure .dotted-box { position: absolute; right: -20px; bottom: -52px; height: 96px; width: 96px; border-right: 4px dotted #d8d8d8; border-bottom: 4px dotted #d8d8d8; } #your-hearing-journey #journey04 .reviews figure + figure .dotted-box { right: auto; left: -20px; border-right: 0; border-left: 4px dotted #d8d8d8; } #your-hearing-journey #journey04 .pay-for-hearing-aids h3 { text-align: center; } #your-hearing-journey #journey04 .pay-for-hearing-aids .video { margin: 40px auto 24px; } #your-hearing-journey #journey04 .pay-for-hearing-aids .video a:after { border-left-color: #fff; -webkit-filter: drop-shadow(0px 3px 6px #333); filter: drop-shadow(0px 3px 6px #333); } @media only screen and (min-width: 564px) { #your-hearing-journey #journey04 .hearing-professional ul { max-width: 450px; } #your-hearing-journey #journey04 .awesome .quote-wrapper { height: 900px; max-width: 564px; } #your-hearing-journey #journey04 .awesome .quote-wrapper h5.quote01 { top: 30px; right: auto; left: 220px; } #your-hearing-journey #journey04 .awesome .quote-wrapper h5.quote02 { top: 710px; left: 215px; } #your-hearing-journey #journey04 .awesome .quote-wrapper h5.quote03 { top: 240px; left: 110px; } #your-hearing-journey #journey04 .awesome .quote-wrapper h5.quote04 { top: 540px; left: 30px; } #your-hearing-journey #journey04 .awesome .quote-wrapper img.image01 { top: 80px; left: 30px; } #your-hearing-journey #journey04 .awesome .quote-wrapper img.image02 { top: 570px; right: 25px; } #your-hearing-journey #journey04 .awesome .quote-wrapper img.image03 { top: 266px; right: auto; left: 65px; width: 80%; } #your-hearing-journey #journey04 .reviews { background: url("../img/04-reviews-bkgd.jpg") left top no-repeat; background-size: auto 130%; } #your-hearing-journey #journey04 .reviews .container > .dotted-box { width: 40px; border-top-width: 4px; } #your-hearing-journey #journey04 .reviews figure { max-width: 620px; margin: 0 auto 80px; padding: 54px 40px 30px; } #your-hearing-journey #journey04 .reviews figure:before { right: 28px; left: auto; -webkit-transform: none; transform: none; } #your-hearing-journey #journey04 .reviews figure blockquote { text-align: right; } #your-hearing-journey #journey04 .reviews figure p { padding: 0; } #your-hearing-journey #journey04 .reviews figure .dotted-box { display: none; } #your-hearing-journey #journey04 .reviews figure + figure:before { right: auto; left: 28px; } #your-hearing-journey #journey04 .reviews figure + figure blockquote { text-align: left; } #your-hearing-journey #journey04 .reviews figure + figure .dotted-box { display: block; bottom: -186px; left: 30px; height: 170px; width: 16%; } #your-hearing-journey #journey04 .reviews figure + figure .dotted-box:before { content: ""; position: absolute; top: 88px; left: -14px; border-top: 18px solid #d8d8d8; border-right: 12px solid transparent; border-left: 12px solid transparent; } #your-hearing-journey #journey04 .reviews figure + figure .dotted-box:after { content: ""; position: absolute; bottom: -14px; right: -12px; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 18px solid #d8d8d8; } #your-hearing-journey #journey04 .pay-for-hearing-aids { padding-top: 40px; } } @media only screen and (min-width: 660px) { #your-hearing-journey #journey04 .hearing-professional .image-wrapper { float: left; height: 400px; width: 160px; margin: 30px 74px; background-size: contain; } #your-hearing-journey #journey04 .hearing-professional .image-wrapper h5 { top: 145px; left: 55%; bottom: auto; padding: 8px 16px; } #your-hearing-journey #journey04 .hearing-professional ul { float: left; max-width: 320px; margin: 50px auto 30px; } #your-hearing-journey #journey04 .hearing-professional li { padding-left: 64px; font-size: 1.8rem; } #your-hearing-journey #journey04 .reviews figure { margin: 0 0 80px auto; } #your-hearing-journey #journey04 .reviews figure + figure { margin: 0 auto 80px 0; } #your-hearing-journey #journey04 .reviews figure + figure .dotted-box { bottom: -186px; height: 170px; } #your-hearing-journey #journey04 .pay-for-hearing-aids .video a:after { border-top-width: 40px; border-bottom-width: 40px; border-left-width: 58px; } } @media only screen and (min-width: 945px) { #your-hearing-journey #journey04 { margin-top: 60px; } #your-hearing-journey #journey04 > .container:first-child { padding-top: 100px; } #your-hearing-journey #journey04 .transition { width: 50%; padding-bottom: 24%; } #your-hearing-journey #journey04 .transition .dotted-box { top: auto; bottom: -298px; left: 220px; height: 320px; border-top-width: 0; } #your-hearing-journey #journey04 .awesome { padding-top: 70px; } #your-hearing-journey #journey04 .awesome .dotted-box { display: none; } #your-hearing-journey #journey04 .awesome .quote-wrapper { height: 800px; max-width: none; } #your-hearing-journey #journey04 .awesome .quote-wrapper h5.quote01 { top: 20px; left: 120px; } #your-hearing-journey #journey04 .awesome .quote-wrapper h5.quote02 { top: 52px; left: 450px; } #your-hearing-journey #journey04 .awesome .quote-wrapper h5.quote03 { top: 380px; left: 10px; width: 218px; } #your-hearing-journey #journey04 .awesome .quote-wrapper h5.quote04 { top: 290px; left: 530px; } #your-hearing-journey #journey04 .awesome .quote-wrapper h5.quote05 { display: block; top: 620px; left: 200px; } #your-hearing-journey #journey04 .awesome .quote-wrapper h5.quote06 { display: block; top: 560px; left: 440px; } #your-hearing-journey #journey04 .awesome .quote-wrapper img.image01 { top: 60px; left: -70px; } #your-hearing-journey #journey04 .awesome .quote-wrapper img.image02 { top: 10px; right: auto; left: 600px; } #your-hearing-journey #journey04 .awesome .quote-wrapper img.image03 { top: 180px; left: 90px; width: 524px; } #your-hearing-journey #journey04 .awesome .quote-wrapper img.image04 { display: block; top: 570px; left: -40px; } #your-hearing-journey #journey04 .awesome .quote-wrapper img.image05 { display: block; top: 510px; left: 590px; } #your-hearing-journey #journey04 .reviews .container > .dotted-box { top: -103px; height: 110px; width: 170px; } #your-hearing-journey #journey04 .pay-for-hearing-aids { padding-bottom: 40px; } } #your-hearing-journey .cta { padding: 10px 10px 14px; background: #00aec7; text-align: center; max-width: 100%; } #your-hearing-journey .cta h3 { margin-bottom: 20px; line-height: 1.2; color: #fff; } #your-hearing-journey .cta h3 span { white-space: nowrap; } @media only screen and (min-width: 564px) { #your-hearing-journey .cta h3 { font-size: 2.8rem; } } @media only screen and (min-width: 660px) { #your-hearing-journey .cta h3 { font-size: 3.2rem; } } @media only screen and (min-width: 945px) { #your-hearing-journey .cta { padding: 20px 0; } #your-hearing-journey .cta h3 { font-size: 4rem; } } /*# sourceMappingURL=retail-your-hearing-journey.css.map */