/* Keyframes */ @-webkit-keyframes handMove { 0% { left: 50%; } 25% { left: 55%; } 50% { left: 50%; } 75% { left: 45%; } 100% { left: 50%; } } @keyframes handMove { 0% { left: 50%; } 25% { left: 55%; } 50% { left: 50%; } 75% { left: 45%; } 100% { left: 50%; } } @-webkit-keyframes fade75 { 0% { opacity: 0; } 100% { opacity: 0.75; } } @keyframes fade75 { 0% { opacity: 0; } 100% { opacity: 0.75; } } @-webkit-keyframes fadeRect { 0% { opacity: 0; } 10% { opacity: 0.75; } 50% { opacity: 0.75; } 60% { opacity: 0.0; } 100% { opacity: 0.0; } } @keyframes fadeRect { 0% { opacity: 0; } 10% { opacity: 0.75; } 50% { opacity: 0.75; } 60% { opacity: 0.0; } 100% { opacity: 0.0; } } @-webkit-keyframes growHalf { 0% { -webkit-transform: scale(0.5); } 100% { -webkit-transform: scale(1); } } @keyframes growHalf { 0% { transform: scale(0.5); } 100% { transform: scale(1); } } @-webkit-keyframes growFull { 0% { -webkit-transform: scale(0.1); } 100% { -webkit-transform: scale(1); } } @keyframes growFull { 0% { transform: scale(0.1); } 100% { transform: scale(1); } } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes wobble { 0% { transform: rotate(75deg); } 100% { transform: rotate(-75deg); } } @keyframes wobble { 0% { transform: rotate(75deg); } 100% { transform: rotate(-75deg); } } @keyframes mousemove { 21% { transform: translate(0px, 2px); } 56% { transform: translate(10px, 1px); } 98% { transform: translate(0px, 0); } } @-webkit-keyframes mousemove { 21% { -webkit-transform: translate(0px, 2px); } 56% { -webkit-transform: translate(10px, 1px); } 98% { -webkit-transform: translate(0px, 0); } } @keyframes mouseinner { 8% { transform: translate(0px, 0); } 38% { transform: translate(1px, 4px); } 62% { transform: translate(1px, 4px); } 90% { transform: translate(0px, 0); } } @-webkit-keyframes mouseinner { 8% { -webkit-transform: translate(0px, 0); } 38% { -webkit-transform: translate(1px, 4px); } 62% { -webkit-transform: translate(1px, 4px); } 90% { -webkit-transform: translate(0px, 0); } } @keyframes mouserotate { 8% { transform: translate(0px, 16px) rotate(0deg) translate(0px, -16px); } 27% { transform: translate(0px, 16px) rotate(-6deg) translate(0px, -16px); } 57% { transform: translate(0px, 16px) rotate(9.5deg) translate(0px, -16px); } } @-webkit-keyframes mouserotate { 8% { -webkit-transform: translate(0px, 16px) rotate(0deg) translate(0px, -16px); } 27% { -webkit-transform: translate(0px, 16px) rotate(-6deg) translate(0px, -16px); } 57% { -webkit-transform: translate(0px, 16px) rotate(9.5deg) translate(0px, -16px); } } @keyframes leftclick { 10% { opacity: 0.6; } 56% { opacity: 0.6; } 66% { opacity: 1.0; } } @-webkit-keyframes leftclick { 10% { opacity: 0.6; } 56% { opacity: 0.6; } 66% { opacity: 1.0; } } /* Explore Prompt */ .explore-prompt-wrap { background: rgba(0,0,0,0.5); height: 100%; left: 0; opacity: 1; position: absolute; top: 0; -webkit-transition: opacity 250ms, visibility 250ms; transition: opacity 250ms, visibility 250ms; visibility: visible; width: 100%; } .explore-prompt-wrap.fade-out { opacity: 0; visibility: hidden; } .explore-prompt-wrap .explore-prompt { left: 50%; opacity: 1; pointer-events: none; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1); transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1); } .explore-prompt-wrap .explore-prompt .mouse { -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-name: mousemove; animation-duration: 2s; animation-iteration-count: infinite; animation-name: mousemove; height: 64px; left: 50%; margin: 0 auto; -webkit-transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1); transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1); width: 36px; } .explore-prompt-wrap .explore-prompt .mouse .mouse-rotate { -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-name: mouserotate; animation-duration: 2s; animation-iteration-count: infinite; animation-name: mouserotate; } .explore-prompt-wrap .explore-prompt .mouse .mouse-rotate .mouse-inner { -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-name: mouseinner; animation-duration: 2s; animation-iteration-count: infinite; animation-name: mouseinner; } .explore-prompt-wrap .explore-prompt .mouse .mouse-rotate .mouse-inner .mouse-shadow { background-color: rgba(0,0,0,0.2); border-radius: 14px; height: 63px; position: absolute; -webkit-transform: translate(-2px, -9px); transform: translate(-2px, -9px); width: 40px; } .explore-prompt-wrap .explore-prompt .mouse .mouse-rotate .mouse-inner .mouse-btns { border-radius: 12px 12px 0 0; height: 18px; overflow: hidden; position: absolute; -webkit-transform: translate(0px, -7px); transform: translate(0px, -7px); width: 36px; } .explore-prompt-wrap .explore-prompt .mouse .mouse-rotate .mouse-inner .mouse-btns .mouse-btn-l { -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-name: leftclick; animation-duration: 2s; animation-iteration-count: infinite; animation-name: leftclick; background-color: #fff; height: 14px; position: absolute; width: 19px; } .explore-prompt-wrap .explore-prompt .mouse .mouse-rotate .mouse-inner .mouse-btns .mouse-btn-r { background-color: #fff; height: 14px; position: absolute; -webkit-transform: translate(19px, 0); transform: translate(19px, 0); width: 19px; } .explore-prompt-wrap .explore-prompt .mouse .mouse-rotate .mouse-inner .mouse-body { background-color: #fff; border-radius: 0 0 12px 12px; height: 46px; position: absolute; top: 6px; width: 36px } .explore-prompt-wrap .explore-prompt .explore-prompt-msg { color: #fff; font-size: 18px; font-weight: bold; line-height: 1.2; margin: 2px; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); white-space: nowrap; } /* Rethink Fix */ .nkn-resp-mobile-page-title { display: none !important; } .nkn-footer-full-width { margin-top: 0 !important; } .nkn-resp-rethink-rows:before { display: none; } .nkn-resp-rethink-rows .nkn-resp-rethink-cards-bg { background: #fff; padding: 0; } .nkn-resp-rethink-rows .nkn-resp-rethink-cards-bg:after, .nkn-resp-rethink-rows .nkn-resp-rethink-cards-bg:before { display: none; } /* Global */ #nkn-action-cam-rethink { font-size: 12px; -moz-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; overflow: hidden; position: relative; } #nkn-action-cam-rethink .img-wrap { position: relative; } #nkn-action-cam-rethink .no-break { white-space: nowrap; } #nkn-action-cam-rethink .video-js { height: 100%; width: 100%; } #nkn-action-cam-rethink .youtube-embed { bottom: 0; height: 100%; left: 0; position: absolute; right: 0; top: 0; width: 100%; } #nkn-action-cam-rethink .alert-padding iframe { padding-bottom: 60px; } #nkn-action-cam-rethink .alert-360 { background: #ffdd00; bottom: 0; font-weight: bold; line-height: 1.2; padding: 15px 20px; position: absolute; width: 100%; } #nkn-action-cam-rethink .alert-360 .msg { text-align: left; width: 60%; } #nkn-action-cam-rethink .alert-360 .cta { text-align: right; } #nkn-action-cam-rethink .alert-360 .cta .ss-icon { color: #404040; vertical-align: middle; } #nkn-action-cam-rethink .prompt-360 { left: 50%; position: absolute; top: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width: 177px; } #nkn-action-cam-rethink .prompt-360 img { margin-bottom: 20px; width: 100%; } #nkn-action-cam-rethink .open-sans, #nkn-action-cam-rethink .h1, #nkn-action-cam-rethink .h2, #nkn-action-cam-rethink .h3, #nkn-action-cam-rethink .h4, #nkn-action-cam-rethink .h5, #nkn-action-cam-rethink .h6 { font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-weight: 300; } #nkn-action-cam-rethink .open-sans.strong, #nkn-action-cam-rethink .open-sans .strong, #nkn-action-cam-rethink .h1.strong, #nkn-action-cam-rethink .h1 .strong, #nkn-action-cam-rethink .h2.strong, #nkn-action-cam-rethink .h2 .strong, #nkn-action-cam-rethink .h3.strong, #nkn-action-cam-rethink .h3 .strong, #nkn-action-cam-rethink .h4.strong #nkn-action-cam-rethink .h4 .strong, #nkn-action-cam-rethink .h5.strong #nkn-action-cam-rethink .h5 .strong, #nkn-action-cam-rethink .h6.strong #nkn-action-cam-rethink .h6 .strong { font-weight: 400; } #nkn-action-cam-rethink .row { border-bottom: none; margin-left: 0; margin-right: 0; } #nkn-action-cam-rethink .row.fix-margin { margin-left: -15px; margin-right: -15px; } #nkn-action-cam-rethink .h1 { font-size: 3.000em; /* 36px */ } #nkn-action-cam-rethink .h2 { font-size: 2.667em; /* 32px */ } #nkn-action-cam-rethink .h3 { font-size: 2.333em; /* 28px */ } #nkn-action-cam-rethink .h4 { font-size: 1.833em; /* 22px */ } #nkn-action-cam-rethink .h5 { font-size: 1.833em; /* 22px */ } #nkn-action-cam-rethink .h6 { font-size: 1.500em; /* 18px */ } #nkn-action-cam-rethink .copy-large { font-size: 1.333em; /* 16px */ } #nkn-action-cam-rethink .copy { font-size: 1.167em; /* 14px */ } #nkn-action-cam-rethink .small { font-size: 0.833em; /* 10px */ } #nkn-action-cam-rethink .btn-custom { background: #000; border-color: #404040; color: #fff; -webkit-transition: border-color 250ms ease-out; transition: border-color 250ms ease-out; } #nkn-action-cam-rethink .btn-custom:hover, #nkn-action-cam-rethink .btn-custom:focus { border-color: #fff; } #nkn-action-cam-rethink .btn-icon-after { margin-left: 5px; } #nkn-action-cam-rethink .btn-video { padding-left: 65px; padding-right: 20px; position: relative; } #nkn-action-cam-rethink .btn-video .ss-play { background: #ccbb00; display: inline-block; font-size: 1.333em; height: 100%; left: 0; line-height: 1; padding: 15px; position: absolute; top: 0; } #nkn-action-cam-rethink .btn-video .ss-video { display: inline-block; font-size: 1.167em; margin-left: 10px; padding-top: 3px; } #nkn-action-cam-rethink .upperspace { font-weight: bold; letter-spacing: 2px; text-transform: uppercase; } #nkn-action-cam-rethink .legal-note { color: #666; font-size: 0.833em; margin-bottom: 0; } #nkn-action-cam-rethink .is-flex { display: flex; flex-flow: row; flex-wrap: wrap; } #nkn-action-cam-rethink .is-flex > [class*='col-'] { display: flex; flex-direction: column; justify-content: space-between; } #nkn-action-cam-rethink .modal-content .modal-header .nkn-resp-ic-close { background: #000; box-shadow: 0 0 2px #fff; color: #fff; } #nkn-action-cam-rethink .modal-content { background: #000; padding: 0; } #nkn-action-cam-rethink .modal-content .modal-header { padding: 0; } #nkn-action-cam-rethink #img-modal .modal-content .modal-body img { width: 100%; } #nkn-action-cam-rethink #video-modal .modal-content .modal-body .nkn-resp-video-single { opacity: 0; } #nkn-action-cam-rethink .video-wrap { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } #nkn-action-cam-rethink .video-wrap video { height: auto; left: 50%; min-height: 101%; min-width: 101%; top: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width: auto; } #nkn-action-cam-rethink .vjs-error { display: none; } /* Nav */ #nkn-action-cam-rethink #action-cam-nav .nav-list .nav-item a { display: block; padding: 10px; text-decoration: none; -webkit-transition: background 0.25s ease-out; transition: background 0.25s ease-out; } #nkn-action-cam-rethink #action-cam-nav .nav-list .nav-item a .nav-title { color: #fff; font-size: 0.917em; /* 11px */ font-weight: bold; line-height: 1; text-transform: uppercase; } #nkn-action-cam-rethink #action-cam-nav .nav-desktop .nav-list .nav-logo { padding: 20px; text-align: left; width: 240px; } #nkn-action-cam-rethink #action-cam-nav .nav-desktop .nav-list .nav-logo img { display: block; height: 25px; margin-bottom: 5px; } #nkn-action-cam-rethink #action-cam-nav .nav-desktop .nav-list .nav-item { position: relative; } #nkn-action-cam-rethink #action-cam-nav .nav-desktop .nav-list .nav-item a:hover, #nkn-action-cam-rethink #action-cam-nav .nav-desktop .nav-list .nav-item a:focus, #nkn-action-cam-rethink #action-cam-nav .nav-desktop .nav-list .nav-item.active { background: #e6e6e6; } #nkn-action-cam-rethink #action-cam-nav .nav-desktop .nav-list .nav-item a .nav-img { display: block; height: 68px; margin: 0 auto 8px auto; width: 68px; } #nkn-action-cam-rethink #action-cam-nav .nav-desktop .nav-list .nav-item a .nav-title { color: #404040; } #nkn-action-cam-rethink #action-cam-nav .nav-desktop .nav-list .nav-item a .nav-title .ss-icon { margin-left: 5px; position: relative; top: -1px; } #nkn-action-cam-rethink #action-cam-nav .nav-desktop .nav-list .nav-item.active:after { border-bottom: 10px solid #000; border-left: 10px solid transparent; border-right: 10px solid transparent; bottom: 0; content: ''; left: 50%; position: absolute; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); } #nkn-action-cam-rethink #action-cam-nav .nav-mobile { left: 0; max-height: 50px; overflow: hidden; position: absolute; text-align: left; top: 70px; -webkit-transition: max-height 0.5s ease-out; transition: max-height 0.5s ease-out; width: 100%; z-index: 100; } #nkn-action-cam-rethink #action-cam-nav .nav-mobile.expanded { max-height: 1000px; } #nkn-action-cam-rethink #action-cam-nav .nav-mobile .nav-list .nav-item.nav-toggle { text-align: center; } #nkn-action-cam-rethink #action-cam-nav .nav-mobile .nav-list .nav-item.nav-toggle a { background: #000; border-bottom: none; padding: 15px; } #nkn-action-cam-rethink #action-cam-nav .nav-mobile .nav-list .nav-item.nav-toggle .icon-wrap { background: #666; border-radius: 50%; display: inline-block; height: 24px; margin-left: 10px; position: relative; width: 24px; } #nkn-action-cam-rethink #action-cam-nav .nav-mobile .nav-list .nav-item.nav-toggle .icon-wrap .ss-icon { display: inline-block; height: 8px; left: 50%; margin-left: 0; position: absolute; top: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width: 11px; } #nkn-action-cam-rethink #action-cam-nav .nav-mobile .nav-list .nav-item.nav-toggle .icon-wrap .ss-icon.ss-navigatedown { display: inline-block; } #nkn-action-cam-rethink #action-cam-nav .nav-mobile .nav-list .nav-item.nav-toggle .icon-wrap .ss-icon.ss-delete { display: none; } #nkn-action-cam-rethink #action-cam-nav .nav-mobile.expanded .nav-list .nav-item.nav-toggle .icon-wrap .ss-icon.ss-navigatedown { display: none; } #nkn-action-cam-rethink #action-cam-nav .nav-mobile.expanded .nav-list .nav-item.nav-toggle .icon-wrap .ss-icon.ss-delete { display: inline-block; } #nkn-action-cam-rethink #action-cam-nav .nav-mobile .nav-list .nav-item a { background: #666; border-bottom: 1px solid #d8d8d8; padding: 15px 15px 14px 15px; position: relative; } #nkn-action-cam-rethink #action-cam-nav .nav-mobile .nav-list .nav-item a .nav-title { letter-spacing: 2px; } #nkn-action-cam-rethink #action-cam-nav .nav-mobile .nav-list .nav-item a .nav-title span { vertical-align: middle; } #nkn-action-cam-rethink #action-cam-nav .nav-mobile .nav-list .nav-item a .nav-title .ss-icon { margin-left: 10px; } #nkn-action-cam-rethink #action-cam-nav .nav-mobile .nav-list .nav-item.subnav-toggle { max-height: 50px; overflow: hidden; -webkit-transition: max-height 0.5s ease-out; transition: max-height 0.5s ease-out; } #nkn-action-cam-rethink #action-cam-nav .nav-mobile .nav-list .nav-item.subnav-toggle .ss-icon { position: absolute; right: 15px; top: 50%; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); } #nkn-action-cam-rethink #action-cam-nav .nav-mobile .nav-list .nav-item.subnav-toggle .ss-icon.ss-plus { display: inline-block; } #nkn-action-cam-rethink #action-cam-nav .nav-mobile .nav-list .nav-item.subnav-toggle .ss-icon.ss-hyphen { display: none; } #nkn-action-cam-rethink #action-cam-nav .nav-mobile .nav-list .nav-item.subnav-toggle.expanded { max-height: 500px; } #nkn-action-cam-rethink #action-cam-nav .nav-mobile .nav-list .nav-item.subnav-toggle.expanded .ss-icon.ss-plus { display: none; } #nkn-action-cam-rethink #action-cam-nav .nav-mobile .nav-list .nav-item.subnav-toggle.expanded .ss-icon.ss-hyphen { display: inline-block; } #nkn-action-cam-rethink #action-cam-nav .nav-mobile .nav-list .nav-item .subnav-list a { background: #e6e6e6; } #nkn-action-cam-rethink #action-cam-nav .nav-mobile .nav-list .nav-item .subnav-list a .nav-title { color: #404040; } /* Hero */ #nkn-action-cam-rethink #hero-section { background: #000; color: #fff; height: 300px; position: relative; } #nkn-action-cam-rethink #hero-section .vjs-error { background: url('/Images/CPCAssets/action-cam-rethink/assets/img/overview/hero-bkg-large.jpg') no-repeat 25% center #000; background-size: cover; display: block; } #nkn-action-cam-rethink #hero-section .vjs-error * { display: none; } #nkn-action-cam-rethink #hero-section .video-wrap .controls { background: none; border: none; line-height: 0; padding: 0; } #nkn-action-cam-rethink #hero-section .video-wrap .video-cover { background: rgba(0,0,0,0.3); cursor: pointer; height: 100%; left: 0; opacity: 1; position: absolute; top: 0; -webkit-transition: opacity 250ms ease-out, z-index 250ms ease-out; transition: opacity 250ms ease-out, z-index 250ms ease-out; width: 100%; z-index: 1; } #nkn-action-cam-rethink #hero-section .video-wrap .video-cover .i-am-banner { left: 50%; max-width: 290px; position: absolute; text-transform: uppercase; top: 30%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } #nkn-action-cam-rethink #hero-section .video-wrap .video-cover .video-play { background: rgba(0,0,0,0.7); border-radius: 50%; height: 80px; left: 50%; position: absolute; top: 55%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width: 80px; } #nkn-action-cam-rethink #hero-section .video-wrap .video-cover .video-play .ss-icon { display: inline-block; font-size: 3.5em; height: 42px; line-height: 0; padding-left: 10px; padding-top: 26px; } #nkn-action-cam-rethink #hero-section .video-wrap .video-cover .heading { left: 50%; position: absolute; text-shadow: 0px 1px 1px rgba(0,0,0,0.9); top: 70%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width: 100%; } #nkn-action-cam-rethink #hero-section .video-wrap .video-close { display: none; font-size: 2em; height: 24px; right: 50px; opacity: 0; position: absolute; top: 50px; -webkit-transition: opacity 250ms ease-out, z-index 250ms ease-out; transition: opacity 250ms ease-out, z-index 250ms ease-out; z-index: 0; } #nkn-action-cam-rethink #hero-section.playing .video-wrap .video-cover { opacity: 0; z-index: 0; } #nkn-action-cam-rethink #hero-section.playing .video-wrap .video-close { display: block; opacity: 1; z-index: 1; } #nkn-action-cam-rethink #hero-section.touch .video-wrap .video-js { display: none; } #nkn-action-cam-rethink #hero-section.touch.playing .video-wrap .video-js { display: block; } /* Locking Nav */ #nkn-action-cam-rethink #camera-nav { cursor: pointer; left: 0px; line-height: 1; max-height: 42px; opacity: 1; overflow: hidden; position: absolute; -webkit-transition: max-height 250ms ease-out, opacity 250ms ease-out, visibility 250ms ease-out; transition: max-height 250ms ease-out, opacity 250ms ease-out, visibility 250ms ease-out; visibility: visible; width: 100%; z-index: 1; } #nkn-action-cam-rethink #camera-nav .camera-nav-item.display, #nkn-action-cam-rethink #camera-nav .camera-nav-item.scroll-top-display { left: 0; opacity: 1; position: absolute; top: 0; -webkit-transition: opacity 0ms 250ms, visibility 0ms 250ms; transition: opacity 0ms 250ms, visibility 0ms 250ms; visibility: visible; width: 100%; } #nkn-action-cam-rethink #camera-nav .camera-nav-item.first .hamburger { display: none; } #nkn-action-cam-rethink #camera-nav.expanded .camera-nav-item.first .hamburger { display: block; } #nkn-action-cam-rethink #camera-nav .camera-nav-item.scroll-top-display .ss-icon { float: right; height: 10px; line-height: 0; padding-top: 8px; } #nkn-action-cam-rethink #camera-nav .camera-nav-item.scroll-top-display, #nkn-action-cam-rethink #camera-nav.expanded .camera-nav-item.scroll-top-display.active { display: none; } #nkn-action-cam-rethink #camera-nav .camera-nav-item.scroll-top-display.active { display: block; z-index: 2; } #nkn-action-cam-rethink #camera-nav .camera-nav-item .nav-title { background: #000; border: none; color: #fff; font-weight: bold; letter-spacing: 2px; padding: 15px 20px; text-align: left; text-transform: uppercase; -webkit-transition: background 250ms ease-out; transition: background 250ms ease-out; width: 100%; } #nkn-action-cam-rethink #camera-nav .camera-nav-item.active .nav-title, #nkn-action-cam-rethink #camera-nav .camera-nav-item.display .nav-title-display { background: #fd0; color: #404040; } #nkn-action-cam-rethink #camera-nav.expanded { max-height: 500px; } #nkn-action-cam-rethink #camera-nav.expanded .camera-nav-item.display { opacity: 0; visibility: hidden; -webkit-transition: opacity 0ms, visibility 0ms; transition: opacity 0ms, visibility 0ms; } #nkn-action-cam-rethink #camera-nav.fixed { opacity: 1; position: fixed; top: 0; visibility: visible; } #nkn-action-cam-rethink #camera-nav .hamburger { background: none; border: none; padding: 15px 20px; position: absolute; right: 0; top: 0; transition-duration: 0.15s; transition-property: opacity, -webkit-filter; transition-property: opacity, filter; transition-property: opacity, filter, -webkit-filter; transition-timing-function: linear; z-index: 1; } #nkn-action-cam-rethink #camera-nav .hamburger .expanded { display: none; } #nkn-action-cam-rethink #camera-nav .hamburger .collapsed { display: block; } #nkn-action-cam-rethink #camera-nav.expanded .hamburger .expanded { display: block; } #nkn-action-cam-rethink #camera-nav.expanded .hamburger .collapsed { display: none; } #nkn-action-cam-rethink #camera-nav .hamburger .hamburger-box { height: 10px; display: inline-block; position: relative; width: 12px; } #nkn-action-cam-rethink #camera-nav .hamburger .hamburger-box .hamburger-inner { display: block; top: 50%; } #nkn-action-cam-rethink #camera-nav .hamburger .hamburger-box .hamburger-inner, #nkn-action-cam-rethink #camera-nav .hamburger .hamburger-box .hamburger-inner:before, #nkn-action-cam-rethink #camera-nav .hamburger .hamburger-box .hamburger-inner:after { height: 2px; position: absolute; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; transition-duration: 0.15s; transition-timing-function: ease; width: 12px; } #nkn-action-cam-rethink #camera-nav .display .hamburger .hamburger-box .hamburger-inner, #nkn-action-cam-rethink #camera-nav .display .hamburger .hamburger-box .hamburger-inner:before, #nkn-action-cam-rethink #camera-nav .display .hamburger .hamburger-box .hamburger-inner:after { background: #404040; } #nkn-action-cam-rethink #camera-nav.expanded .first .hamburger .hamburger-box .hamburger-inner, #nkn-action-cam-rethink #camera-nav.expanded .first .hamburger .hamburger-box .hamburger-inner:before, #nkn-action-cam-rethink #camera-nav.expanded .first .hamburger .hamburger-box .hamburger-inner:after { background: #fff; } #nkn-action-cam-rethink #camera-nav.expanded .first.active .hamburger .hamburger-box .hamburger-inner, #nkn-action-cam-rethink #camera-nav.expanded .first.active .hamburger .hamburger-box .hamburger-inner:before, #nkn-action-cam-rethink #camera-nav.expanded .first.active .hamburger .hamburger-box .hamburger-inner:after { background: #404040; } #nkn-action-cam-rethink #camera-nav .hamburger .hamburger-box .hamburger-inner:before, #nkn-action-cam-rethink #camera-nav .hamburger .hamburger-box .hamburger-inner:after { content: ''; display: block; } #nkn-action-cam-rethink #camera-nav .hamburger .hamburger-box .hamburger-inner { top: 0; transition: background-color 0s 0.15s linear; } #nkn-action-cam-rethink #camera-nav .hamburger .hamburger-box .hamburger-inner:before { top: 4px; transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); } #nkn-action-cam-rethink #camera-nav .hamburger .hamburger-box .hamburger-inner:after { top: 8px; transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); } #nkn-action-cam-rethink #camera-nav.expanded .hamburger .hamburger-box .hamburger-inner { background: transparent !important; transition-delay: 0.32s; } #nkn-action-cam-rethink #camera-nav.expanded .hamburger .hamburger-box .hamburger-inner:before { top: -6px; transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 10px, 0) rotate(45deg); transform: translate3d(0, 10px, 0) rotate(45deg); } #nkn-action-cam-rethink #camera-nav.expanded .hamburger .hamburger-box .hamburger-inner:after { top: -6px; transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 10px, 0) rotate(-45deg); transform: translate3d(0, 10px, 0) rotate(-45deg); } /* Rows */ #nkn-action-cam-rethink .rethink-section { background: #000; color: #fff; overflow: hidden; padding: 60px 0; } #nkn-action-cam-rethink .rethink-section img { width: 100%; } #nkn-action-cam-rethink .rethink-section .section-heading { margin-bottom: 25px; } #nkn-action-cam-rethink .rethink-section .copy:last-child, #nkn-action-cam-rethink .rethink-section .copy-large:last-child { margin-bottom: 0; } #nkn-action-cam-rethink .rethink-section .camera-img { margin-bottom: 40px; } #nkn-action-cam-rethink .rethink-section .camera-price { margin-bottom: 20px; } #nkn-action-cam-rethink #keymission-360 .camera-img { max-width: 250px; } #nkn-action-cam-rethink #keymission-360-video .hand-icon { bottom: -20px; left: 50%; position: absolute; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); width: 50px; } #nkn-action-cam-rethink #keymission-360-video .hand-icon.animate { -webkit-animation: handMove 2000ms linear; -webkit-animation-iteration-count: 5; animation: handMove 2000ms linear; animation-iteration-count: 5; } #nkn-action-cam-rethink #keymission-170 .camera-img { max-width: 200px; } #nkn-action-cam-rethink #keymission-80 .camera-img { max-width: 150px; } #nkn-action-cam-rethink .rethink-section .camera-info .camera-icon-wrap { width: 190px; } #nkn-action-cam-rethink .rethink-section .camera-info .camera-icon-wrap .camera-icon { display: block; margin: 0 auto 25px auto; width: 100px; } #nkn-action-cam-rethink .rethink-section .camera-info .camera-icon-wrap .camera-logo { margin-bottom: 20px; } #nkn-action-cam-rethink .rethink-section .camera-info .camera-features { font-weight: bold; line-height: 1.2; list-style-position: inside; margin-bottom: 40px; margin-top: 50px; padding-left: 0; text-transform: uppercase; } #nkn-action-cam-rethink .rethink-section .camera-info .camera-features li + li { margin-top: 25px; } #nkn-action-cam-rethink .rethink-section .camera-info .bundle-promo { margin: 40px auto 0 auto; max-width: 450px; } #nkn-action-cam-rethink .rethink-section .camera-info .bundle-promo a { color: #fff; display: block; text-decoration: none; } #nkn-action-cam-rethink .rethink-section .camera-info .bundle-promo a img { display: inline-block; width: 35%; } #nkn-action-cam-rethink .rethink-section .camera-info .bundle-promo a .copy { display: inline-block; padding-left: 30px; position: relative; text-align: left; vertical-align: middle; width: 60%; } #nkn-action-cam-rethink .rethink-section .camera-info .bundle-promo a .copy:before { content: '\0025C3'; font-family: 'SSStandard'; font-size: 10px; left: 10px; position: absolute; top: 5px; -webkit-transition: left 150ms ease-out; transition: left 150ms ease-out; } #nkn-action-cam-rethink .rethink-section .camera-info .bundle-promo a .copy .note { font-size: 0.833em; font-style: italic; margin-bottom: 0; } #nkn-action-cam-rethink .rethink-section .camera-info .bundle-promo a:hover .copy:before { left: 5px; } #nkn-action-cam-rethink .rethink-section.sub-section { padding-top: 0; } #nkn-action-cam-rethink .rethink-section.sub-section span.h5 { display: block; } #nkn-action-cam-rethink .rethink-section.sub-section .video-launch-wrap { display: inline-block; margin-bottom: 30px; position: relative; } #nkn-action-cam-rethink .rethink-section.sub-section .video-launch-wrap .video-launch { background: none; border: none; color: #fff; display: block; padding: 0; position: relative; } #nkn-action-cam-rethink .rethink-section.sub-section .video-launch-wrap .video-launch .sample-img { max-height: 230px; max-width: 100%; width: auto; } #nkn-action-cam-rethink .rethink-section.sub-section .video-launch-wrap .video-launch .sample-img-tag { left: 10px; position: absolute; top: 10px; width: 110px; } #nkn-action-cam-rethink .rethink-section.sub-section .video-large { margin-bottom: 60px; } #nkn-action-cam-rethink .rethink-section.sub-section .video-large .video-launch-wrap .video-launch .sample-img { max-height: 500px; } #nkn-action-cam-rethink .rethink-section.sub-section .video-large .video-launch-wrap .video-launch .sample-img-tag { width: 150px; } #nkn-action-cam-rethink .rethink-section.sub-section .video-launch-wrap .video-launch .video-play { background: rgba(0,0,0,0.7); border: none; border-radius: 50%; bottom: 15px; height: 60px; position: absolute; right: 20px; text-align: center; width: 60px; } #nkn-action-cam-rethink .rethink-section.sub-section .video-launch-wrap .video-launch .video-play .ss-icon { display: inline-block; font-size: 2.5em; height: 60px; line-height: 0; padding-left: 5px; padding-top: 34px; } #nkn-action-cam-rethink .rethink-section.animate .camera-img { top: 50%; } #nkn-action-cam-rethink .rethink-section.bg-gradient { background: rgba(0,0,0,1); background: -moz-linear-gradient(top, rgba(0,0,0,1) 20%, rgba(51,51,51,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(20%, rgba(0,0,0,1)), color-stop(100%, rgba(51,51,51,1))); background: -webkit-linear-gradient(to bottom, rgba(0,0,0,1) 20%, rgba(51,51,51,1) 100%); background: linear-gradient(to bottom, rgba(0,0,0,1) 20%, rgba(51,51,51,1) 100%); } #nkn-action-cam-rethink #keymission { overflow: visible; padding-bottom: 30px; position: relative; z-index: 1; } #nkn-action-cam-rethink #keymission img { margin-bottom: 30px; margin-top: -150px; -webkit-transition: margin-top 500ms ease-out; transition: margin-top 500ms ease-out; width: 80%; } #nkn-action-cam-rethink #keymission.playing img { margin-top: 0; } #nkn-action-cam-rethink #keymission .subhead { margin-bottom: 25px; } #nkn-action-cam-rethink #keymission .btn-video { margin-bottom: 40px; } #nkn-action-cam-rethink #keymission-smartphone { padding-bottom: 40px; position: relative; } #nkn-action-cam-rethink #keymission-smartphone .video-wrap:after { background: rgba(0,0,0,0.65); content: ''; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } #nkn-action-cam-rethink #keymission-smartphone .smartphone-img { margin: 0 auto 10px auto; max-width: 220px; } #nkn-action-cam-rethink #keymission-videos .section-heading { margin-bottom: 60px; } #nkn-action-cam-rethink #keymission-videos .video-item { padding-left: 0; padding-right: 0; text-align: left; } #nkn-action-cam-rethink #keymission-videos .video-item + .video-item { margin-top: 10px; } #nkn-action-cam-rethink #keymission-videos .video-item .video-launch { color: #fff; display: block; max-height: 360px; overflow: hidden; position: relative; } #nkn-action-cam-rethink #keymission-videos .video-item .video-launch:before { background: rgba(0,0,0,0.3); content: ''; display: block; height: 100%; left: 0; position: absolute; top: 0; -webkit-transition: background 250ms ease-out; transition: background 250ms ease-out; width: 100%; } #nkn-action-cam-rethink #keymission-videos .video-item .video-launch:hover:before, #nkn-action-cam-rethink #keymission-videos .video-item .video-launch:focus:before { background: rgba(0,0,0,0.5); } #nkn-action-cam-rethink #keymission-videos .video-item .video-launch .video-img { max-height: 100%; max-width: 100%; } #nkn-action-cam-rethink #keymission-videos .video-item .video-launch .video-content { bottom: 0; left: 0; max-width: 220px; padding: 15px 20px; position: absolute; text-shadow: 0px 1px 1px rgba(0,0,0,0.9); } #nkn-action-cam-rethink #keymission-videos .video-item .video-launch .video-content .upperspace { border-bottom: 1px solid #fd0; display: inline-block; font-size: 1.1673em; line-height: 1; margin-bottom: 10px; padding-bottom: 5px; } #nkn-action-cam-rethink #keymission-videos .video-item .video-launch .video-content .video-title { font-size: 1.500em; margin-bottom: 0; } #nkn-action-cam-rethink #keymission-videos .video-item .video-launch .video-play { background: rgba(0,0,0,0.7); border: none; border-radius: 50%; bottom: 15px; height: 60px; position: absolute; right: 20px; text-align: center; width: 60px; } #nkn-action-cam-rethink #keymission-videos .video-item .video-launch .video-play .ss-icon { display: inline-block; font-size: 2.5em; height: 60px; line-height: 0; padding-left: 5px; padding-top: 34px; } #nkn-action-cam-rethink #keymission-videos .video-item.more .video-launch .video-content { display: inline-block; height: 100%; max-width: none; width: 100%; } #nkn-action-cam-rethink #keymission-videos .video-item.more .video-launch .video-content .center-wrap { display: table; height: 100%; text-align: center; width: 100%; } #nkn-action-cam-rethink #keymission-videos .video-item.more .video-launch .video-content .center-wrap .video-title { display: table-cell; vertical-align: middle; } #nkn-action-cam-rethink #keymission-videos .video-item.more .video-launch .video-content .center-wrap .video-title .ss-icon { color: #fd0; display: inline-block; font-size: 0.667em; height: 12px; line-height: 0; margin-left: 5px; padding-top: 8px; } #nkn-action-cam-rethink #keymission-accessories { padding-bottom: 20px; padding-top: 60px; } #nkn-action-cam-rethink.videos #keymission-accessories { padding-top: 0px; } #nkn-action-cam-rethink #keymission-accessories .container { position: relative; } #nkn-action-cam-rethink #keymission-accessories .styled-link .styled-link-text { color: #fff; } #nkn-action-cam-rethink #keymission-accessories .accessories-img { display: block; margin: 40px auto 0 auto; max-width: 650px; } #nkn-action-cam-rethink #keymission-footer { background: #fff; color: #404040; } #nkn-action-cam-rethink #keymission-footer .heading { font-size: 2.000em; } #nkn-action-cam-rethink #keymission-footer .snapbridge-icons { width: 190px; } #nkn-action-cam-rethink.accessories #accessories-intro { padding: 30px 0; } #nkn-action-cam-rethink.accessories #accessories-intro img { max-width: 350px; } #nkn-action-cam-rethink.accessories #accessories-nav { background: #333; overflow-x: scroll; } #nkn-action-cam-rethink.accessories #accessories-nav .tab-list { margin: 0 auto; max-width: 750px; } #nkn-action-cam-rethink.accessories #accessories-nav .tab-list .tab-item-wrap .tab-item { background: #404040; border: none; color: #fff; display: block; max-width: 145px; padding: 20px 25px; text-decoration: none; -webkit-transition: background 250ms ease-out; transition: background 250ms ease-out; } #nkn-action-cam-rethink.accessories #accessories-nav .tab-list .tab-item-wrap .tab-item:hover, #nkn-action-cam-rethink.accessories #accessories-nav .tab-list .tab-item-wrap .tab-item:focus, #nkn-action-cam-rethink.accessories #accessories-nav .tab-list .tab-item-wrap .tab-item.active { background: #666; } #nkn-action-cam-rethink.accessories #accessories-nav .tab-list .tab-item-wrap .tab-item .tab-icon { display: block; height: 30px; margin: 0 auto 15px auto; } #nkn-action-cam-rethink.accessories .tab-section { background: #fff; color: #404040; max-height: 0; opacity: 0; padding: 0; text-align: left; -webkit-transition: max-height 250ms ease-out, opacity 250ms ease-out, padding 250ms ease-out, visibility 250ms ease-out; transition: max-height 250ms ease-out, opacity 250ms ease-out, padding 250ms ease-out, visibility 250ms ease-out; visibility: hidden; } #nkn-action-cam-rethink.accessories .tab-section.gray-bg { background: #e6e6e6; } #nkn-action-cam-rethink.accessories .tab-section.active { max-height: 5000px; opacity: 1; padding-top: 60px; visibility: visible; } #nkn-action-cam-rethink.accessories .tab-section .section-heading { border-bottom: 1px solid #d8d8d8; margin-bottom: 60px; padding-bottom: 15px; } #nkn-action-cam-rethink.accessories .tab-section .accessory-row + .accessory-row { margin-top: 30px; } #nkn-action-cam-rethink.accessories .tab-section .accessory-item + .accessory-item { margin-top: 30px; } #nkn-action-cam-rethink.accessories .tab-section .accessory-item .accessory-title { display: inline-block; margin-bottom: 15px; position: relative; } #nkn-action-cam-rethink.accessories .tab-section .accessory-item .accessory-img-wrap { position: relative; } #nkn-action-cam-rethink.accessories .tab-section .accessory-item .accessory-img-wrap img { display: block; margin: 0 auto 30px auto; max-width: 200px; } #nkn-action-cam-rethink.accessories .tab-section .accessory-item .accessory-desc { margin-bottom: 20px; } #nkn-action-cam-rethink.accessories .tab-section .accessory-item .legal-note, #nkn-action-cam-rethink.accessories .tab-section .accessory-item .learn-more { display: inline-block; margin-bottom: 15px; } #nkn-action-cam-rethink.accessories .tab-section .accessory-item .compatible { font-size: 12px; margin-bottom: 0; } #nkn-action-cam-rethink.accessories .tab-section .accessory-item .compatible .badge { font-size: 12px; font-style: italic; margin-left: 5px; } #nkn-action-cam-rethink.accessories .tab-section .accessory-item .sample-caption { border-bottom: 1px solid #d8d8d8; padding: 10px 0; } #nkn-action-cam-rethink.accessories .tab-section .accessory-item.view-all { margin: 0 auto 30px auto; } #nkn-action-cam-rethink.accessories .tab-section .accessory-item.view-all a { background: #404040; color: #fff; display: block; height: 100%; line-height: 1; margin-bottom: 0; padding: 30px 15px; text-align: center; text-decoration: none; width: 100%; } #nkn-action-cam-rethink.accessories .tab-section .accessory-item.view-all a .ss-icon { display: inline-block; font-size: 0.600em; opacity: 0.5; padding-top: 3px; -webkit-transition: opacity 250ms ease-out; transition: opacity 250ms ease-out; } #nkn-action-cam-rethink.accessories .tab-section .accessory-item.view-all a:hover .ss-icon, #nkn-action-cam-rethink.accessories .tab-section .accessory-item.view-all a:focus .ss-icon { opacity: 1; } #nkn-action-cam-rethink.accessories .tab-section .also-includes { border-top: 1px solid #d8d8d8; padding: 20px 0; text-align: center; } #nkn-action-cam-rethink.accessories .tab-section .preorder-row { background: #000; color: #fff; padding: 60px 0 30px 0; } #nkn-action-cam-rethink.accessories .tab-section .preorder-row .container { overflow: visible !important; position: relative; } #nkn-action-cam-rethink.accessories .tab-section .preorder-row .container .preorder-tag { background: #cc420c; color: #fff; display: inline-block; left: 15px; line-height: 1; padding: 10px 20px; position: absolute; top: -60px; } #nkn-action-cam-rethink.accessories .tab-section .preorder-row .container .heading { margin-bottom: 25px; } #nkn-action-cam-rethink.accessories .tab-section .preorder-row .container .styled-link { display: inline-block; } #nkn-action-cam-rethink.accessories .tab-section .preorder-row .container .styled-link .styled-link-text { color: #fff; } #nkn-action-cam-rethink.accessories #accessories-missions { text-align: left; } #nkn-action-cam-rethink.accessories #accessories-missions .styled-link .styled-link-text { color: #fff; } /* SVGs */ #nkn-action-cam-rethink .svg { overflow: visible !important; } #nkn-action-cam-rethink .svg .svg-yellow { fill: #ffdd00; opacity: 0; } #nkn-action-cam-rethink .svg .svg-black, .svg .svg-outline { stroke: #fff; stroke-miterlimit: 10; } #nkn-action-cam-rethink .svg .svg-black { stroke-width: 2px; } #nkn-action-cam-rethink .svg .svg-outline { fill: none; opacity: 0.5; } #nkn-action-cam-rethink #icon-360.svg .svg-yellow { -webkit-animation: fade75 4s ease, growHalf 4s; animation: fade75 4s ease, growHalf 4s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-transform-origin: 50%; transform-origin: 50%; } #nkn-action-cam-rethink #icon-360.svg .svg-outline { -webkit-animation: spin 4s ease; animation: spin 4s ease; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-transform-origin: 50%; transform-origin: 50%; } #nkn-action-cam-rethink #icon-170.svg .svg-yellow { -webkit-animation: fade75 3s ease, growFull 3s ease; animation: fade75 3s ease, growFull 3s ease; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-transform-origin: 50% 25%; transform-origin: 50% 25%; } #nkn-action-cam-rethink #icon-170.svg .svg-point { -webkit-animation: wobble 5s ease-in-out alternate; animation: wobble 5s ease-in-out alternate; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-transform-origin: 50% 40px; transform-origin: 50% 40px; } #nkn-action-cam-rethink #icon-80.svg .rect-1 { -webkit-animation: fadeRect 3s ease-in; animation: fadeRect 3s ease-in; -webkit-animation-delay: 0.0s; animation-delay: 0.0s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } #nkn-action-cam-rethink #icon-80.svg .rect-2 { -webkit-animation: fadeRect 3s ease-in; animation: fadeRect 3s ease-in; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } #nkn-action-cam-rethink #icon-80.svg .rect-3 { -webkit-animation: fadeRect 3s ease-in; animation: fadeRect 3s ease-in; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } #nkn-action-cam-rethink #icon-80.svg .rect-4 { -webkit-animation: fadeRect 3s ease-in; animation: fadeRect 3s ease-in; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } #nkn-action-cam-rethink #icon-80.svg .rect-5 { -webkit-animation: fadeRect 3s ease-in; animation: fadeRect 3s ease-in; -webkit-animation-delay: 0.8s; animation-delay: 0.8s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } #nkn-action-cam-rethink #icon-80.svg .rect-6 { -webkit-animation: fadeRect 3s ease-in; animation: fadeRect 3s ease-in; -webkit-animation-delay: 1.0s; animation-delay: 1.0s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } #nkn-action-cam-rethink #icon-80.svg .rect-7 { -webkit-animation: fadeRect 3s ease-in; animation: fadeRect 3s ease-in; -webkit-animation-delay: 1.2s; animation-delay: 1.2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } #nkn-action-cam-rethink #icon-80.svg .rect-8 { -webkit-animation: fadeRect 3s ease-in; animation: fadeRect 3s ease-in; -webkit-animation-delay: 1.4s; animation-delay: 1.4s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* Browser Fixes */ body.ie11 #nkn-action-cam-rethink .rethink-section.animate .camera-img { top: 240px; } body.ie11 #nkn-action-cam-rethink .rethink-section.sub-section .video-launch-wrap .video-launch .sample-img { width: 100%; } body.ie11 #nkn-action-cam-rethink #video-modal #video-container { height: 0; } body.ie11 #nkn-action-cam-rethink #video-modal .video-js { padding-top: 56.25%; } html.safari #nkn-action-cam-rethink .is-flex { display: initial; } /* Mobile (767px & down) */ @media (max-width:767px){ /* Global */ #nkn-action-cam-rethink .modal-content { margin-top: 0 !important; } /* Nav */ #nkn-action-cam-rethink #action-cam-nav { padding-top: 86px; } #nkn-action-cam-rethink #action-cam-nav .nav-logo { background: #fff; left: 0; position: absolute; top: 0; width: 100%; } #nkn-action-cam-rethink #action-cam-nav .nav-logo img { height: 35px; margin: 0 auto; } /* Rows */ #nkn-action-cam-rethink .rethink-section .display-table.camera-hero { display: block; } #nkn-action-cam-rethink .rethink-section .camera-info .camera-icon-wrap { margin: 0 auto; } #nkn-action-cam-rethink .rethink-section .camera-info .btn-toolbar .btn { display: block; } #nkn-action-cam-rethink .rethink-section .camera-info .btn-toolbar .btn + .btn { margin-top: 10px; } #nkn-action-cam-rethink .rethink-section .vid-50-50 + .vid-50-50 { margin-top: 30px; } #nkn-action-cam-rethink.accessories #accessories-intro img { margin-bottom: 30px; } #nkn-action-cam-rethink.accessories .tab-section.custom-row .accessory-row + .accessory-row { margin-top: 0px; } #nkn-action-cam-rethink.accessories .tab-section .accessory-item .accessory-img-wrap .accessory-img-hover { display: none; } } /* Tablet (768px - 991px) */ @media (min-width:768px) and (max-width:991px){ #nkn-action-cam-rethink.accessories .tab-section .accessory-item .accessory-title.visible-sm { display: inline-block !important; } } /* Tablet & Small Desktop (768px - 1200px) */ @media (min-width:768px) and (max-width:1199px){ #nkn-action-cam-rethink .rethink-section .camera-info .btn-toolbar .btn { margin-left: 0; } #nkn-action-cam-rethink .rethink-section .camera-info .btn-toolbar .btn-primary { display: block; margin-bottom: 10px; } #nkn-action-cam-rethink .rethink-section .camera-info .btn-toolbar .btn-custom { display: inline-block; width: calc(50% - 5px); } #nkn-action-cam-rethink .rethink-section .camera-info .btn-toolbar .btn-custom + .btn-custom { margin-left: 5px; } } /* Tablet (768px & up) */ @media (min-width:768px){ /* Global */ #nkn-action-cam-rethink .h1 { font-size: 6.000em; /* 72px */ } #nkn-action-cam-rethink .h2 { font-size: 4.000em; /* 48px */ } #nkn-action-cam-rethink .h3 { font-size: 3.000em; /* 36px */ } #nkn-action-cam-rethink .h4 { font-size: 2.500em; /* 30px */ } #nkn-action-cam-rethink .h5 { font-size: 2.000em; /* 24px */ } #nkn-action-cam-rethink .h6 { font-size: 1.500em; /* 18px */ } #nkn-action-cam-rethink .copy-large { font-size: 1.333em; /* 16px */ } #nkn-action-cam-rethink .copy { font-size: 1.167em; /* 14px */ } #nkn-action-cam-rethink .small { font-size: 1.000em; /* 12px */ } #nkn-action-cam-rethink .btn-video { padding-left: 85px; padding-right: 40px; } #nkn-action-cam-rethink .alert-padding iframe { padding-bottom: 45px; } /* Hero */ #nkn-action-cam-rethink #hero-section { height: 600px; } #nkn-action-cam-rethink #hero-section .video-wrap .video-cover .i-am-banner { max-width: 600px; } #nkn-action-cam-rethink #hero-section .video-wrap .video-cover .video-play { height: 100px; width: 100px; } #nkn-action-cam-rethink #hero-section .video-wrap .video-cover .video-play .ss-icon { font-size: 4em; height: 48px; padding-top: 30px; } /* Locking Nav */ #nkn-action-cam-rethink #camera-nav { left: 40px; max-height: 62px; width: 330px; } #nkn-action-cam-rethink #camera-nav .camera-nav-item .nav-title { padding: 25px 30px; } #nkn-action-cam-rethink #camera-nav .hamburger { padding: 25px 30px; } /* Rows */ #nkn-action-cam-rethink .rethink-section { background-size: cover !important; padding: 100px 0; } #nkn-action-cam-rethink .rethink-section .camera-info { text-align: left; } #nkn-action-cam-rethink .rethink-section .camera-info .camera-features { list-style-position: outside; padding-left: 15px; } #nkn-action-cam-rethink .rethink-section .camera-img { left: 50%; margin-bottom: 0; position: absolute; top: -75%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-transition: top 500ms ease-in-out; transition: top 500ms ease-in-out; } #nkn-action-cam-rethink .rethink-section .camera-info .camera-icon-wrap { width: 215px; } #nkn-action-cam-rethink .rethink-section .camera-info .camera-icon-wrap .camera-icon { width: 120px; } #nkn-action-cam-rethink .rethink-section .camera-info .camera-icon-wrap .camera-logo { margin-bottom: 20px; } #nkn-action-cam-rethink #keymission { padding-bottom: 40px; } #nkn-action-cam-rethink #keymission img { margin-bottom: 60px; margin-top: -300px; } #nkn-action-cam-rethink #keymission .subhead { margin-bottom: 40px; } #nkn-action-cam-rethink #keymission .btn-video { margin-bottom: 60px; } #nkn-action-cam-rethink #keymission-360 .camera-img { max-width: 415px; } #nkn-action-cam-rethink #keymission-170 .camera-img { max-width: 400px; } #nkn-action-cam-rethink #keymission-80 .camera-img { max-width: 270px; } #nkn-action-cam-rethink #keymission-smartphone { overflow: visible; padding: 120px 0; text-align: left; } #nkn-action-cam-rethink #keymission-smartphone .smartphone-img { bottom: -80px; margin-bottom: 0; max-width: 400px; position: absolute; } #nkn-action-cam-rethink #keymission-accessories { padding-top: 120px; } #nkn-action-cam-rethink.videos #keymission-accessories { padding-top: 60px; } #nkn-action-cam-rethink #keymission-videos { padding-bottom: 30px; } #nkn-action-cam-rethink #keymission-videos .section-heading { margin-bottom: 120px; } #nkn-action-cam-rethink #keymission-videos .video-item + .video-item { margin-top: 0; } #nkn-action-cam-rethink #keymission-videos .video-item.left { padding-right: 5px; } #nkn-action-cam-rethink #keymission-videos .video-item.right { padding-left: 5px; } #nkn-action-cam-rethink #keymission-videos .video-item.full-width { margin-bottom: 10px; margin-top: 10px; } #nkn-action-cam-rethink #keymission-videos .video-item .video-launch .video-content { max-width: none; padding: 25px 30px; } #nkn-action-cam-rethink #keymission-videos .video-item .video-launch .video-content .video-title { font-size: 2.500em; } #nkn-action-cam-rethink #keymission-videos .video-item .video-launch .video-play { bottom: 25px; right: 30px; } #nkn-action-cam-rethink #keymission-videos .video-item.more .video-launch .video-content .center-wrap .video-title .ss-icon { height: 20px; margin-left: 10px; padding-top: 12px; } #nkn-action-cam-rethink.accessories #accessories-nav { margin-bottom: -15px; } #nkn-action-cam-rethink.accessories #accessories-intro { text-align: left; } #nkn-action-cam-rethink.accessories .tab-section .accessory-row .accessory-item { margin-bottom: 30px; margin-top: 0; } #nkn-action-cam-rethink.accessories .tab-section .accessory-row .accessory-item.sample { margin-bottom: 0; } #nkn-action-cam-rethink.accessories .tab-section .accessory-item .accessory-img-wrap { cursor: pointer; } #nkn-action-cam-rethink.accessories .tab-section .accessory-item .accessory-img-wrap.no-hover { cursor: default; } #nkn-action-cam-rethink.accessories .tab-section .accessory-item .accessory-img-wrap .accessory-img-hover { left: 50%; opacity: 0; position: absolute; top: 0; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); -webkit-transition: opacity 250ms ease-out; transition: opacity 250ms ease-out; } #nkn-action-cam-rethink.accessories .tab-section .accessory-item .accessory-img-wrap:hover .accessory-img-hover { opacity: 1; } #nkn-action-cam-rethink.accessories .tab-section.custom-row .accessory-item .accessory-title { margin-top: 15%; } #nkn-action-cam-rethink.accessories .tab-section.custom-row .accessory-item .accessory-title:before { font-family: 'SSStandard'; font-size: 0.857em; line-height: 1; position: absolute; top: 4px; } #nkn-action-cam-rethink.accessories .tab-section.custom-row .accessory-item .accessory-title.left:before { content: '\0025C3'; left: -20px; } #nkn-action-cam-rethink.accessories .tab-section.custom-row .accessory-item .accessory-title.right:before { content: '\0025B9'; right: -20px; } #nkn-action-cam-rethink.accessories .tab-section.custom-row .accessory-item.featured img { max-width: 430px; } #nkn-action-cam-rethink.accessories .tab-section.custom-row .accessory-item .accessory-img.no-max { max-width: none; } #nkn-action-cam-rethink.accessories .tab-section.custom-row .accessory-item .legal-note { margin-bottom: 0; } #nkn-action-cam-rethink.accessories .tab-section .accessory-item.view-all { margin: 0 auto 60px auto; } #nkn-action-cam-rethink .rethink-section .camera-info .bundle-promo { margin: 40px 0 0 0; } } /* Desktop - (992px & up) */ @media (min-width:992px){ /* Nav */ #nkn-action-cam-rethink.accessories #accessories-nav .tab-list { max-width: 870px; } /* Rows */ #nkn-action-cam-rethink #keymission-smartphone .hand-row .video-wrap { left: 257px; } #nkn-action-cam-rethink #keymission-smartphone .smartphone-img { max-width: 460px; } #nkn-action-cam-rethink.accessories #accessories-360 .container { max-height: 870px; overflow: hidden; } #nkn-action-cam-rethink.accessories #accessories-170 .container { max-height: 1030px; overflow: hidden; } #nkn-action-cam-rethink.accessories #accessories-80 .container { max-height: 480px; overflow: hidden; } #nkn-action-cam-rethink.accessories .tab-section.custom-row .accessory-item.featured .accessory-title { margin-top: 25%; } #nkn-action-cam-rethink.accessories .tab-section.custom-row .accessory-item .accessory-img { margin: 0 auto; } #nkn-action-cam-rethink.accessories #accessories-nav .tab-list .tab-item-wrap .tab-item { padding: 30px 25px; } } /* Desktop Large - (1200px & up) */ @media (min-width:1200px){ #nkn-action-cam-rethink.accessories #accessories-80 .container { max-height: 520px; overflow: hidden; } } /* Mobile Small (500px & down) - Serve small hero images */ @media only screen and (max-width: 500px){ #nkn-action-cam-rethink.overview #hero-section.touch { background: url('/Images/CPCAssets/action-cam-rethink/assets/img/overview/hero-bkg-small.jpg') no-repeat 25% center #000; background-size: cover; } #nkn-action-cam-rethink.overview #keymission-360 { background: url('/Images/CPCAssets/action-cam-rethink/assets/img/overview/360-bkg-small.jpg') no-repeat center top #000; } #nkn-action-cam-rethink.overview #keymission-170 { background: url('/Images/CPCAssets/action-cam-rethink/assets/img/overview/170-bkg-small.jpg') no-repeat center top #000; } #nkn-action-cam-rethink.overview #keymission-80 { background: url('/Images/CPCAssets/action-cam-rethink/assets/img/overview/80-bkg-small.jpg') no-repeat center top #000; } #nkn-action-cam-rethink.overview #keymission-smartphone { background: url('/Images/CPCAssets/action-cam-rethink/assets/img/overview/phone-bkg-small.jpg') no-repeat center top #000; } #nkn-action-cam-rethink.accessories #accessories-missions { background: url('/Images/CPCAssets/action-cam-rethink/assets/img/accessories/mission-teaser.jpg') no-repeat 60% center #000; background-size: cover; } } /* Mobile Large, Tablet, Desktop (501px & up) - Serve large hero images */ @media (min-width:501px){ #nkn-action-cam-rethink.overview #hero-section.touch { background: url('/Images/CPCAssets/action-cam-rethink/assets/img/overview/hero-bkg-large.jpg') no-repeat 25% center #000; } #nkn-action-cam-rethink.overview #keymission-360 { background: url('/Images/CPCAssets/action-cam-rethink/assets/img/overview/360-bkg-large.jpg') no-repeat center top #000; } #nkn-action-cam-rethink.overview #keymission-170 { background: url('/Images/CPCAssets/action-cam-rethink/assets/img/overview/170-bkg-large.jpg') no-repeat center top #000; } #nkn-action-cam-rethink.overview #keymission-80 { background: url('/Images/CPCAssets/action-cam-rethink/assets/img/overview/80-bkg-large.jpg') no-repeat center top #000; } #nkn-action-cam-rethink.overview #keymission-smartphone { background: url('/Images/CPCAssets/action-cam-rethink/assets/img/overview/phone-bkg-large.jpg') no-repeat center top #000; } #nkn-action-cam-rethink.accessories #accessories-missions { background: url('/Images/CPCAssets/action-cam-rethink/assets/img/accessories/mission-teaser.jpg') no-repeat center center #000; background-size: cover; } } /* Desktop Retina - (992px & up + pixel density) - Serve xl hero images */ @media only screen and (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 992px) and (min-resolution: 1.5dppx), only screen and (min-width: 992px) and (min-resolution: 144dpi){ #nkn-action-cam-rethink.overview #hero-section.touch { background: url('/Images/CPCAssets/action-cam-rethink/assets/img/overview/hero-bkg-xl.jpg') no-repeat 25% center #000; } #nkn-action-cam-rethink.overview #keymission-360 { background: url('/Images/CPCAssets/action-cam-rethink/assets/img/overview/360-bkg-xl.jpg') no-repeat center bottom #000; } #nkn-action-cam-rethink.overview #keymission-170 { background: url('/Images/CPCAssets/action-cam-rethink/assets/img/overview/170-bkg-xl.jpg') no-repeat center bottom #000; } #nkn-action-cam-rethink.overview #keymission-80 { background: url('/Images/CPCAssets/action-cam-rethink/assets/img/overview/80-bkg-xl.jpg') no-repeat center bottom #000; } #nkn-action-cam-rethink.overview #keymission-smartphone { background: url('/Images/CPCAssets/action-cam-rethink/assets/img/overview/phone-bkg-xl.jpg') no-repeat center bottom #000; } #nkn-action-cam-rethink.accessories #accessories-missions { background: url('/Images/CPCAssets/action-cam-rethink/assets/img/accessories/mission-teaser.jpg') no-repeat center center #000; background-size: cover; } }