@charset "UTF-8"; /* Theme Name: Nikon Education Author: Sposto Interactive Author URI: http://sposto.com Description: Nikon Education parent theme supporting site core functionality. Version: 1.1.0 License: Not for distribution in any fashion without written consent. Not for resale. */ @font-face { font-family: "SSSocialCircle"; src: url("_fonts/ss-social-circle.eot"); src: url("_fonts/ss-social-circle.eot?#iefix") format("embedded-opentype"), url("_fonts/ss-social-circle.woff") format("woff"), url("_fonts/ss-social-circle.ttf") format("truetype"), url("_fonts/ss-social-circle.svg#SSSocialCircle") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "SSStandard"; src: url("_fonts/ss-standard.eot"); src: url("_fonts/ss-standard.eot?#iefix") format("embedded-opentype"), url("_fonts/ss-standard.woff") format("woff"), url("_fonts/ss-standard.ttf") format("truetype"), url("_fonts/ss-standard.svg#SSStandard") format("svg"); font-weight: normal; font-style: normal; } @-ms-keyframes no-anim {}@-webkit-keyframes masthead-intro-slide-top { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transform: translate3d(0, -2em, 0); -moz-transform: translate3d(0, -2em, 0); -ms-transform: translate3d(0, -2em, 0); -o-transform: translate3d(0, -2em, 0); transform: translate3d(0, -2em, 0); } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-moz-keyframes masthead-intro-slide-top { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transform: translate3d(0, -2em, 0); -moz-transform: translate3d(0, -2em, 0); -ms-transform: translate3d(0, -2em, 0); -o-transform: translate3d(0, -2em, 0); transform: translate3d(0, -2em, 0); } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-ms-keyframes masthead-intro-slide-top { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transform: translate3d(0, -2em, 0); -moz-transform: translate3d(0, -2em, 0); -ms-transform: translate3d(0, -2em, 0); -o-transform: translate3d(0, -2em, 0); transform: translate3d(0, -2em, 0); } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes masthead-intro-slide-top { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transform: translate3d(0, -2em, 0); -moz-transform: translate3d(0, -2em, 0); -ms-transform: translate3d(0, -2em, 0); -o-transform: translate3d(0, -2em, 0); transform: translate3d(0, -2em, 0); } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes pop-in-side { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transform: translate3d(5em, 0, 0); -moz-transform: translate3d(5em, 0, 0); -ms-transform: translate3d(5em, 0, 0); -o-transform: translate3d(5em, 0, 0); transform: translate3d(5em, 0, 0); } 50% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); opacity: 0.6; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-moz-keyframes pop-in-side { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transform: translate3d(5em, 0, 0); -moz-transform: translate3d(5em, 0, 0); -ms-transform: translate3d(5em, 0, 0); -o-transform: translate3d(5em, 0, 0); transform: translate3d(5em, 0, 0); } 50% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); opacity: 0.6; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-ms-keyframes pop-in-side { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transform: translate3d(5em, 0, 0); -moz-transform: translate3d(5em, 0, 0); -ms-transform: translate3d(5em, 0, 0); -o-transform: translate3d(5em, 0, 0); transform: translate3d(5em, 0, 0); } 50% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); opacity: 0.6; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes pop-in-side { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transform: translate3d(5em, 0, 0); -moz-transform: translate3d(5em, 0, 0); -ms-transform: translate3d(5em, 0, 0); -o-transform: translate3d(5em, 0, 0); transform: translate3d(5em, 0, 0); } 50% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); opacity: 0.6; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes pop-in-bottom { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transform: translate3d(0, -1em, 0); -moz-transform: translate3d(0, -1em, 0); -ms-transform: translate3d(0, -1em, 0); -o-transform: translate3d(0, -1em, 0); transform: translate3d(0, -1em, 0); } 50% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20); opacity: 0.2; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-moz-keyframes pop-in-bottom { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transform: translate3d(0, -1em, 0); -moz-transform: translate3d(0, -1em, 0); -ms-transform: translate3d(0, -1em, 0); -o-transform: translate3d(0, -1em, 0); transform: translate3d(0, -1em, 0); } 50% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20); opacity: 0.2; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-ms-keyframes pop-in-bottom { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transform: translate3d(0, -1em, 0); -moz-transform: translate3d(0, -1em, 0); -ms-transform: translate3d(0, -1em, 0); -o-transform: translate3d(0, -1em, 0); transform: translate3d(0, -1em, 0); } 50% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20); opacity: 0.2; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes pop-in-bottom { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transform: translate3d(0, -1em, 0); -moz-transform: translate3d(0, -1em, 0); -ms-transform: translate3d(0, -1em, 0); -o-transform: translate3d(0, -1em, 0); transform: translate3d(0, -1em, 0); } 50% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20); opacity: 0.2; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes fade-in { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } } @-moz-keyframes fade-in { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } } @-ms-keyframes fade-in { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } } @keyframes fade-in { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } } @-webkit-keyframes slide-side { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transform: rotateX(5deg) rotateY(80deg) rotateZ(0deg); -moz-transform: rotateX(5deg) rotateY(80deg) rotateZ(0deg); -ms-transform: rotateX(5deg) rotateY(80deg) rotateZ(0deg); -o-transform: rotateX(5deg) rotateY(80deg) rotateZ(0deg); transform: rotateX(5deg) rotateY(80deg) rotateZ(0deg); } 50% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25); opacity: 0.25; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } } @-moz-keyframes slide-side { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transform: rotateX(5deg) rotateY(80deg) rotateZ(0deg); -moz-transform: rotateX(5deg) rotateY(80deg) rotateZ(0deg); -ms-transform: rotateX(5deg) rotateY(80deg) rotateZ(0deg); -o-transform: rotateX(5deg) rotateY(80deg) rotateZ(0deg); transform: rotateX(5deg) rotateY(80deg) rotateZ(0deg); } 50% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25); opacity: 0.25; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } } @-ms-keyframes slide-side { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transform: rotateX(5deg) rotateY(80deg) rotateZ(0deg); -moz-transform: rotateX(5deg) rotateY(80deg) rotateZ(0deg); -ms-transform: rotateX(5deg) rotateY(80deg) rotateZ(0deg); -o-transform: rotateX(5deg) rotateY(80deg) rotateZ(0deg); transform: rotateX(5deg) rotateY(80deg) rotateZ(0deg); } 50% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25); opacity: 0.25; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } } @keyframes slide-side { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transform: rotateX(5deg) rotateY(80deg) rotateZ(0deg); -moz-transform: rotateX(5deg) rotateY(80deg) rotateZ(0deg); -ms-transform: rotateX(5deg) rotateY(80deg) rotateZ(0deg); -o-transform: rotateX(5deg) rotateY(80deg) rotateZ(0deg); transform: rotateX(5deg) rotateY(80deg) rotateZ(0deg); } 50% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25); opacity: 0.25; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } } @-webkit-keyframes blur-in { 0% { -webkit-filter: blur(1em); -moz-filter: blur(1em); filter: blur(1em); } 100% { -webkit-filter: blur(0.25em); -moz-filter: blur(0.25em); filter: blur(0.25em); } } @-moz-keyframes blur-in { 0% { -webkit-filter: blur(1em); -moz-filter: blur(1em); filter: blur(1em); } 100% { -webkit-filter: blur(0.25em); -moz-filter: blur(0.25em); filter: blur(0.25em); } } @-ms-keyframes blur-in { 0% { -webkit-filter: blur(1em); -moz-filter: blur(1em); filter: blur(1em); } 100% { -webkit-filter: blur(0.25em); -moz-filter: blur(0.25em); filter: blur(0.25em); } } @keyframes blur-in { 0% { -webkit-filter: blur(1em); -moz-filter: blur(1em); filter: blur(1em); } 100% { -webkit-filter: blur(0.25em); -moz-filter: blur(0.25em); filter: blur(0.25em); } } /* =================================== Reset */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 62.5%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } html, body { height: 100%; } body { line-height: 1; font-family: "Open Sans", sans-serif; background: #404040; color: #404040; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a, a:hover { text-decoration: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } p:not(.small) { font-family: Arial, sans-serif; font-size: .875rem; line-height: 1.675; padding: 0 0 1em 0; } p:not(.small) a:not(.instructor-link), p:not(.small) a:not(.instructor-link):visited, p:not(.small) a:not(.cta), p:not(.small) a:not(.cta):visited { color: #404040; position: relative; -webkit-transition: color false false, 0.2s false false, linear false false; -moz-transition: color false false false, 0.2s false false false, linear false false false; -o-transition: color false false false, 0.2s false false false, linear false false false; transition: color 0.2s linear; } p:not(.small) a:not(.instructor-link):after, p:not(.small) a:not(.instructor-link):visited:after, p:not(.small) a:not(.cta):after, p:not(.small) a:not(.cta):visited:after { content: ''; height: 1px; width: 100%; background: #ccbb00; position: absolute; bottom: -2px; left: 0; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transition: opacity false false, 0.2s false false, linear false false; -moz-transition: opacity false false false, 0.2s false false false, linear false false false; -o-transition: opacity false false false, 0.2s false false false, linear false false false; transition: opacity 0.2s linear; } p:not(.small) a:not(.instructor-link):hover, p:not(.small) a:not(.instructor-link):visited:hover, p:not(.small) a:not(.cta):hover, p:not(.small) a:not(.cta):visited:hover { color: #ccbb00; -webkit-transition: color false false, 0.2s false false, ease-in-out false false; -moz-transition: color false false false, 0.2s false false false, ease-in-out false false false; -o-transition: color false false false, 0.2s false false false, ease-in-out false false false; transition: color 0.2s ease-in-out; } p:not(.small) a:not(.instructor-link):hover:after, p:not(.small) a:not(.instructor-link):visited:hover:after, p:not(.small) a:not(.cta):hover:after, p:not(.small) a:not(.cta):visited:hover:after { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: opacity false false, 0.2s false false, ease-out false false; -moz-transition: opacity false false false, 0.2s false false false, ease-out false false false; -o-transition: opacity false false false, 0.2s false false false, ease-out false false false; transition: opacity 0.2s ease-out; } .small { font-family: Arial, sans-serif; font-size: .875rem; line-height: 1.675; padding: 0 0 1em 0; } .small a { color: #404040; } .small a:hover { color: #000; } ol, ul { list-style: none; } /* =================================== Grid */ main { max-width: 1600px; position: relative; } main:after { content: ''; background: #fff; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } main > section { background: #fff; *zoom: 1; overflow: hidden; position: relative; z-index: 1; } main > section.dark { background: #000; color: #fff; } main > section:before, main > section:after { content: " "; display: table; } main > section:after { clear: both; } main > section > article { max-width: 1120px; margin: 0 auto; } .page-wrap { height: 100%; max-width: 1600px; margin: 0 auto; display: block; position: relative; z-index: 4; } .page, .single, .archive, .category { height: 100%; } .row { position: relative; z-index: 3; max-width: 1120px; margin: 0 auto; *zoom: 1; } .row:before, .row:after { content: " "; display: table; } .row:after { clear: both; } .col1 { width: 100%; float: left; font-size: 1em; position: relative; z-index: 2; } @media only screen and (min-width: 768px) { .col1 { width: 100%; } } @media only screen and (max-width: 768px) { .col1 { padding-left: 0; padding-right: 0; width: 100%; } .col1 .push, .col1 .pull { left: 0; right: 0; } } .col1.fluid { width: 100%; } .col2 { width: 100%; float: left; font-size: 1em; position: relative; z-index: 2; } @media only screen and (min-width: 768px) { .col2 { width: 50%; } } @media only screen and (max-width: 768px) { .col2 { padding-left: 0; padding-right: 0; width: 100%; } .col2 .push, .col2 .pull { left: 0; right: 0; } } .col2.fluid { width: 50%; } .col2-3 { width: 100%; float: left; font-size: 1em; position: relative; z-index: 2; } @media only screen and (min-width: 768px) { .col2-3 { width: 66.6666666667%; } } @media only screen and (max-width: 768px) { .col2-3 { padding-left: 0; padding-right: 0; width: 100%; } .col2-3 .push, .col2-3 .pull { left: 0; right: 0; } } .col2-3.fluid { width: 66.6666666667%; } .col2-3.pull { left: 0; } .col1-3 { width: 100%; float: left; font-size: 1em; position: relative; z-index: 2; } @media only screen and (min-width: 768px) { .col1-3 { width: 33.3333333333%; } } @media only screen and (max-width: 768px) { .col1-3 { padding-left: 0; padding-right: 0; width: 100%; } .col1-3 .push, .col1-3 .pull { left: 0; right: 0; } } .col1-3.fluid { width: 33.3333333333%; } .col1-3.push { right: 0%; } .push { float: right; } /* =================================== Header */ .home #header { position: absolute; top: 0; left: 0; z-index: 4; } #header { display: table; width: 100%; position: relative; z-index: 2; position: relative; z-index: 4; height: 5em; } #header:after { content: ''; background: #000; position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; display: block; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; } #header > div { margin: 0 auto; width: 100%; height: 5em; display: table; position: relative; z-index: 3; } @media (min-width:768px){ #header { padding: 0 30px; } } #header #branding { width: 11em; height: 2.5em; position: absolute; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: 6; -webkit-transition: all false false, 0.2s false false, linear false false; -moz-transition: all false false false, 0.2s false false false, linear false false false; -o-transition: all false false false, 0.2s false false false, linear false false false; transition: all 0.2s linear; } #header #branding a { background: url("_images/logo-education.svg") no-repeat center left; background-size: contain; display: block; height: 2.5em; } @media (min-width:768px){ #header #branding { height: 4em; } #header #branding a { height: 4em; } } #header #branding a span { margin: -1px; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); position: absolute; } .page:not(.home) #header, .single #header { position: inherit; } .page:not(.home) #header:after, .single #header:after { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } /* =================================== Navigation */ .menu-wrap { position: relative; z-index: 2; } .primary-navigation ul { float: right; } .primary-navigation ul li { float: left; position: relative; z-index: 4; } .primary-navigation ul li a { display: block; padding: 2.375em 1em 2.25em 1em; color: #fff; text-transform: uppercase; font-size: .875rem; line-height: 1; font-family: Arial, sans-serif; font-weight: 600; -webkit-transition: color 0.1s linear; -moz-transition: color 0.1s linear false; -o-transition: color 0.1s linear false; transition: color 0.1s linear; cursor: pointer; } .primary-navigation ul li a:hover, .primary-navigation ul li a:active { color: #ffdd00; -webkit-transition: color false false, 0.3s false false, ease-in-out false false; -moz-transition: color false false false, 0.3s false false false, ease-in-out false false false; -o-transition: color false false false, 0.3s false false false, ease-in-out false false false; transition: color 0.3s ease-in-out; } .primary-navigation ul li:last-child a { padding-right: 0; } .primary-navigation ul li ul { display: none !important; position: absolute; float: left; left: 0; bottom: -75%; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; visibility: hidden; z-index: 3; -webkit-transition: bottom 0.2s ease-in, opacity 0.3s ease-in; -moz-transition: bottom 0.2s ease-in false, opacity 0.3s ease-in false; -o-transition: bottom 0.2s ease-in false, opacity 0.3s ease-in false; transition: bottom 0.2s ease-in, opacity 0.3s ease-in; } .primary-navigation ul li ul:after { content: ''; background: #000; position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; display: block; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; } .primary-navigation ul li ul li { float: none; width: 100%; } /* =================================== Menu Toggle */ .menu-toggle { background: none; border: none; height: 26px; width: 30px; position: absolute; z-index: 7; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer; right: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-transition: all false false, 0.2s false false, linear false false; -moz-transition: all false false false, 0.2s false false false, linear false false false; -o-transition: all false false false, 0.2s false false false, linear false false false; transition: all 0.2s linear; } .menu-toggle:hover span:not(:first-child) { background: #ffdd00; -webkit-transition: all false false, 0.3s false false, linear false false; -moz-transition: all false false false, 0.3s false false false, linear false false false; -o-transition: all false false false, 0.3s false false false, linear false false false; transition: all 0.3s linear; } .menu-toggle:focus span:not(:first-child) { background: #fff; -webkit-transition: all false false, 0.3s false false, linear false false; -moz-transition: all false false false, 0.3s false false false, linear false false false; -o-transition: all false false false, 0.3s false false false, linear false false false; transition: all 0.3s linear; } .menu-toggle span:first-child { display: none; } .menu-toggle span:not(:first-child) { display: block; position: absolute; height: .325em; width: 100%; background: #fff; border-radius: 0; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all false false, 0.25s false false, ease-in-out false false; -moz-transition: all false false false, 0.25s false false false, ease-in-out false false false; -o-transition: all false false false, 0.25s false false false, ease-in-out false false false; transition: all 0.25s ease-in-out; } .menu-toggle span:nth-child(2) { top: 0px; } .menu-toggle span:nth-child(3) { top: 11px; } .menu-toggle span:nth-child(4) { top: 11px; } .menu-toggle span:nth-child(5) { top: 22px; } .menu-toggle.open span:not(:first-child) { background: #ffdd00; } .menu-toggle.open span:nth-child(2) { top: 12px; width: 0%; left: 50%; } .menu-toggle.open span:nth-child(3) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .menu-toggle.open span:nth-child(4) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .menu-toggle.open span:nth-child(5) { top: 12px; width: 0%; left: 50%; } .mobile .menu-toggle:not(.open):hover span:not(:first-child) { background: #fff; -webkit-transition: all false false, 0.3s false false, linear false false; -moz-transition: all false false false, 0.3s false false false, linear false false false; -o-transition: all false false false, 0.3s false false false, linear false false false; transition: all 0.3s linear; } .mobile .menu-toggle:not(.open):focus span:not(:first-child) { background: #fff; -webkit-transition: all false false, 0.3s false false, linear false false; -moz-transition: all false false false, 0.3s false false false, linear false false false; -o-transition: all false false false, 0.3s false false false, linear false false false; transition: all 0.3s linear; } .mobile-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; visibility: hidden; cursor: default; height: 100%; width: 100%; background: #000; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: opacity false false, 0.2s false false, linear false false; -moz-transition: opacity false false false, 0.2s false false false, linear false false false; -o-transition: opacity false false false, 0.2s false false false, linear false false false; transition: opacity 0.2s linear; } /* =================================== Base */ .assistive-text { margin: -1px; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); position: absolute; } .skip-link { color: #fff; cursor: pointer; font-size: 14px; padding: 10px; position: absolute; top: 0; text-transform: capitalize; text-decoration: underline; width: auto; z-index: 5; display: inline-block; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .skip-link:focus { display: block; height: auto; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); width: auto; } .skip-link:visited, .skip-link:hover { color: #fff; text-decoration: underline; } /* =================================== Hero */ .hero { min-height: 36em; background-color: #404040; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: center; color: #fff; position: relative; z-index: 3; } .hero > div h1, .hero > div p { color: #fff; text-align: center; text-shadow: rgba(0, 0, 0, 0.5) -1px 2px 3px; } .hero > div h1 { font-weight: 300; } .hero > div p { font-size: 1.675rem; line-height: 1.375; letter-spacing: .05rem; font-family: "Open Sans", sans-serif; font-weight: 400; max-width: 30em; margin: 0 auto; } .hero .bkgnd-img { height: 100%; width: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: center; } .hero .bkgnd-img:nth-child(even) { z-index: 2; } .hero .bkgnd-img:nth-child(odd) { z-index: 1; } .hero.video { background: #000; margin: 1.75em auto 2.5em auto; padding: 0; min-height: 0 !important; max-width: 1120px; position: relative; z-index: 3; } .hero.video .player { padding-top: 56%; overflow: hidden; position: relative; z-index: 4; } .hero.video #nkn-school-vid-player { height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 5; } .hero.video .vjs-big-play-button { border-radius: 50%; font-size: 1em; cursor: pointer; height: 8em; width: 8em; padding: 0; overflow: visible; background: none; position: absolute; z-index: 4; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: none; -webkit-transition: background false false, 0.2s false false, linear false false; -moz-transition: background false false false, 0.2s false false false, linear false false false; -o-transition: background false false false, 0.2s false false false, linear false false false; transition: background 0.2s linear; } .hero.video .vjs-big-play-button:before { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; content: ''; height: 3em; width: 3em; background: url(_images/icon-play.svg) no-repeat; background-position: center; background-size: cover; display: block; position: absolute; left: 34%; z-index: 5; margin: 0; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: height 0.1s lienar, width 0.1s linear; -moz-transition: height 0.1s lienar false, width 0.1s linear false; -o-transition: height 0.1s lienar false, width 0.1s linear false; transition: height 0.1s lienar, width 0.1s linear; } .hero.video .vjs-big-play-button:after { content: ''; background: black; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 4; -webkit-transition: height 0.1s lienar, width 0.1s linear; -moz-transition: height 0.1s lienar false, width 0.1s linear false; -o-transition: height 0.1s lienar false, width 0.1s linear false; transition: height 0.1s lienar, width 0.1s linear; } .hero.video .vjs-big-play-button:hover, .hero.video .vjs-big-play-button:focus { box-shadow: 0 0 15px 0px rgba(255,255,255,0.5); } .hero.video .vjs-big-play-button:hover:after, .hero.video .vjs-big-play-button:focus:after { background: #ffdd00; -webkit-transition: background false false, 0.2s false false, linear false false; -moz-transition: background false false false, 0.2s false false false, linear false false false; -o-transition: background false false false, 0.2s false false false, linear false false false; transition: background 0.2s linear; } .hero.video .bkgnd-img { display: none; z-index: 6; } .hero.video .bkgnd-img button { cursor: pointer; height: 13em; width: 13em; padding: 0; overflow: visible; background: none; position: absolute; z-index: 4; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: none; -webkit-transition: background false false, 0.2s false false, linear false false; -moz-transition: background false false false, 0.2s false false false, linear false false false; -o-transition: background false false false, 0.2s false false false, linear false false false; transition: background 0.2s linear; } .hero.video .bkgnd-img button:before { content: ''; height: 6em; width: 6em; background: url(_images/icon-play.svg) no-repeat; background-position: center; background-size: cover; display: block; position: absolute; left: 31%; z-index: 5; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: height 0.1s lienar, width 0.1s linear; -moz-transition: height 0.1s lienar false, width 0.1s linear false; -o-transition: height 0.1s lienar false, width 0.1s linear false; transition: height 0.1s lienar, width 0.1s linear; } .hero.video .bkgnd-img button:after { content: ''; background: rgba(0, 0, 0, 0.8); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 4; -webkit-transition: height 0.1s lienar, width 0.1s linear; -moz-transition: height 0.1s lienar false, width 0.1s linear false; -o-transition: height 0.1s lienar false, width 0.1s linear false; transition: height 0.1s lienar, width 0.1s linear; } .hero.video .bkgnd-img button:hover:after, .hero.video .bkgnd-img button:focus:after { background: #ffdd00; -webkit-transition: background false false, 0.2s false false, linear false false; -moz-transition: background false false false, 0.2s false false false, linear false false false; -o-transition: background false false false, 0.2s false false false, linear false false false; transition: background 0.2s linear; } .hero.video .bkgnd-img button span { margin: -1px; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); position: absolute; } .hero.video .flag { width: 27em; } /* =================================== Home Hero */ .page.home .hero .content { width: 100%; position: absolute; z-index: 3; padding: 0 1em; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .page.home .hero .content h1 { font-size: 4rem; line-height: 1; margin: 1.75em 0 .25em; margin-top: 0; } .page.home .hero .bkgnd { overflow: hidden; } .page.home .hero .bkgnd .bkgnd-img { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=1); opacity: 1; -webkit-transition: opacity false false, 0.1s false false, linear false false; -moz-transition: opacity false false false, 0.1s false false false, linear false false false; -o-transition: opacity false false false, 0.1s false false false, linear false false false; transition: opacity 0.1s linear; } .page.home .hero .bkgnd .bkgnd-img.loaded { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } /* =================================== Basic Hero */ .page:not(.home) .hero { min-height: 15.5em; -webkit-transition: height false false, 0.1s false false, linear false false; -moz-transition: height false false false, 0.1s false false false, linear false false false; -o-transition: height false false false, 0.1s false false false, linear false false false; transition: height 0.1s linear; } .page:not(.home) .hero > div { max-width: 1120px; margin: 0 auto; position: relative; z-index: 2; min-height: 15.5em; -webkit-transition: height false false, 0.1s false false, linear false false; -moz-transition: height false false false, 0.1s false false false, linear false false false; -o-transition: height false false false, 0.1s false false false, linear false false false; transition: height 0.1s linear; } .page:not(.home) .hero > div h1 { font-size: 4.25rem; line-height: 1.5; position: absolute; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); left: 0; } /* =================================== Promo */ .promo { background: #ffdc00; padding-top: 3.25em; padding-bottom: 3.25em; position: relative; z-index: 2; } .promo h2 { display: inline-block; margin-right: 1em; font-family: Arial, sans-serif; font-weight: 600; font-size: 1.25rem; line-height: 1.25; color: #404040; } .promo a { display: inline-block; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; color: #fff; font-family: Arial, sans-serif; background: #404040; text-align: center; font-size: .75rem; font-weight: bold; margin: 0; padding: 1em 2em; cursor: pointer; white-space: nowrap; min-width: 20em; letter-spacing: -.02rem; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; -webkit-transition: background false false, 0.2s false false, linear false false; -moz-transition: background false false false, 0.2s false false false, linear false false false; -o-transition: background false false false, 0.2s false false false, linear false false false; transition: background 0.2s linear; -webkit-transform: translate3d(0, -0.125em, 0); -moz-transform: translate3d(0, -0.125em, 0); -ms-transform: translate3d(0, -0.125em, 0); -o-transform: translate3d(0, -0.125em, 0); transform: translate3d(0, -0.125em, 0); } .promo a:hover { background: #000; -webkit-transition: background false false, 0.3s false false, ease-in false false; -moz-transition: background false false false, 0.3s false false false, ease-in false false false; -o-transition: background false false false, 0.3s false false false, ease-in false false false; transition: background 0.3s ease-in; } .promo .row > div { text-align: center; } /* =================================== Call To Action */ .call-to-actions { background: #fff; } .call-to-actions .row { max-width: 1600px; } .call-to-actions .col1-3 { min-height: 16.25em; } .call-to-actions .col1-3:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; z-index: 2; background: #000; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: opacity false false, 0.2s false false, linear false false; -moz-transition: opacity false false false, 0.2s false false false, linear false false false; -o-transition: opacity false false false, 0.2s false false false, linear false false false; transition: opacity 0.2s linear; } .call-to-actions a { position: absolute; z-index: 4; top: 0; right: 0; bottom: 0; left: 0; } .call-to-actions a span { margin: -1px; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); position: absolute; } .call-to-actions h3 { position: absolute; z-index: 3; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); color: #fff; font-size: 2rem; line-height: 1.25; letter-spacing: .025rem; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8); text-align: center; font-weight: 300; width: 100%; padding: 0 1em; -webkit-transition: font-size false false, 0.2s false false, linear false false; -moz-transition: font-size false false false, 0.2s false false false, linear false false false; -o-transition: font-size false false false, 0.2s false false false, linear false false false; transition: font-size 0.2s linear; } .call-to-actions h3 span { display: block; } .call-to-actions .bkgnd-img { position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-repeat: no-repeat; background-position: center top; display: block; } /* =================================== In Page Hero */ .inpage-hero { min-height: 38em; padding: 0; } .inpage-hero .row { width: 100%; display: block; margin: 0; max-width: 100%; position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .inpage-hero .row > div { padding: 0 41em 0 15em; -webkit-transition: padding false false, 0.1s false false, linear false false; -moz-transition: padding false false false, 0.1s false false false, linear false false false; -o-transition: padding false false false, 0.1s false false false, linear false false false; transition: padding 0.1s linear; } .inpage-hero h1, .inpage-hero h2, .inpage-hero h3, .inpage-hero h4, .inpage-hero h5, .inpage-hero h6 { font-family: "Open Sans", sans-serif; color: #404040; font-size: 3rem; line-height: 1.5; letter-spacing: -.02rem; text-align: center; font-weight: 300; } .inpage-hero p { font-family: "Open Sans", sans-serif; color: #666; font-size: 2.25rem; line-height: 1.25; font-weight: 300; text-align: center; padding-bottom: .5em; } .inpage-hero p span { display: block; } .inpage-hero p:last-of-type { padding-bottom: 0; } .inpage-hero .cta { color: #404040; font-family: Arial, sans-serif; font-weight: 600; background: #ffdd00; text-align: center; font-size: .75rem; font-weight: bold; margin: 0; padding: .875em 2em; cursor: pointer; white-space: nowrap; min-width: 15em; display: block; border: 1px solid #cb0; text-align: center; vertical-align: middle; cursor: pointer; letter-spacing: -.02rem; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-transition: background-color 0.2s linear, border-color 0.2s linear; -moz-transition: background-color 0.2s linear false, border-color 0.2s linear false; -o-transition: background-color 0.2s linear false, border-color 0.2s linear false; transition: background-color 0.2s linear, border-color 0.2s linear; max-width: 15em; margin: 0 auto; } .inpage-hero .cta:after { display: none; } .inpage-hero .cta:hover, .inpage-hero .cta:focus { color: #404040 !important; background-color: #f0d000; border-color: #cbb000; -webkit-transition: background-color 0.2s ease-in, border-color 0.2s ease-in; -moz-transition: background-color 0.2s ease-in false, border-color 0.2s ease-in false; -o-transition: background-color 0.2s ease-in false, border-color 0.2s ease-in false; transition: background-color 0.2s ease-in, border-color 0.2s ease-in; } .inpage-hero .left-image, .inpage-hero .right-image { display: block; position: absolute; z-index: 2; top: 50%; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; background-position: center center; background-repeat: no-repeat; } .inpage-hero .left-image { width: 200px; height: 375px; left: -3%; -webkit-transform: translateY(-47%); -moz-transform: translateY(-47%); -ms-transform: translateY(-47%); -o-transform: translateY(-47%); transform: translateY(-47%); -webkit-transition: -webkit-transform 0.2s linear, left 0.5s ease-in; -moz-transition: -moz-transform 0.2s linear false, left 0.5s ease-in false; -o-transition: -o-transform 0.2s linear false, left 0.5s ease-in false; transition: transform 0.2s linear, left 0.5s ease-in; } .inpage-hero .right-image { width: 630px; height: 450px; right: -5%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: -webkit-transform 0.2s linear, right 0.5s ease-in; -moz-transition: -moz-transform 0.2s linear false, right 0.5s ease-in false; -o-transition: -o-transform 0.2s linear false, right 0.5s ease-in false; transition: transform 0.2s linear, right 0.5s ease-in; } /* =================================== Side Article */ .side-article { background-size: cover !important; background-position: left center; background-repeat: no-repeat; -webkit-transition: background-position false false, 0.2s false false, linear false false; -moz-transition: background-position false false false, 0.2s false false false, linear false false false; -o-transition: background-position false false false, 0.2s false false false, linear false false false; transition: background-position 0.2s linear; } .side-article h1, .side-article h2, .side-article h3, .side-article h4, .side-article h5, .side-article h6, .side-article p { color: #fff; text-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px; } .side-article h1, .side-article h2, .side-article h3, .side-article h4, .side-article h5, .side-article h6 { font-family: "Open Sans", sans-serif; font-size: 1.875rem; line-height: 1.25; font-weight: 300; margin-bottom: .5em; } .side-article .row [class^="col"] { text-align: center; padding-top: 5em; padding-bottom: 5em; } .side-article .row [class^="col"].push { margin-right: 5%; } .side-article .side-article-logo { height: 7.5em; width: auto; display: block; margin: 0 auto 1em auto; background-repeat: no-repeat; background-position: center center; background-size: contain; } .school-logo { background: url(_images/logo-nikon-school.svg) no-repeat; background-size: contain; background-position: center; width: 620px; height: 85px; margin-bottom: 1.75em; } .school-logo span { margin: -1px; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); position: absolute; } /* =================================== Article */ .posts .article { border-bottom: 1px solid rgba(0, 0, 0, 0.2); padding: 3em 0; position: relative; z-index: 3; max-width: 1120px; margin: 0 auto; *zoom: 1; } .posts .article:before, .posts .article:after { content: " "; display: table; } .posts .article:after { clear: both; } .posts .article:first-child { padding-top: 3.75em; } .posts .article:last-child { border-bottom: none; padding-bottom: 2em; } .posts.expired-posts h3 { font-size: 2.2rem; font-weight: 300; text-align: center; text-transform: capitalize; border-top: 1px solid rgba(0, 0, 0, 0.2); padding: 1.25em 0 .5em 0; text-align: center; } .posts.expired-posts .article:last-child { padding-bottom: 3em; } .article { /* content styling */ } .article .thumb.col2 { padding-right: 1.5em; } .article .thumb a { display: block; width: 100%; position: relative; z-index: 4; overflow: hidden; -webkit-transition: height false false, 0.2s false false, ease-out false false; -moz-transition: height false false false, 0.2s false false false, ease-out false false false; -o-transition: height false false false, 0.2s false false false, ease-out false false false; transition: height 0.2s ease-out; } .article .thumb a img { width: 100%; height: auto; display: block; -webkit-transition: -webkit-transform false false, 0.1s false false, linear false false; -moz-transition: -moz-transform false false false, 0.1s false false false, linear false false false; -o-transition: -o-transform false false false, 0.1s false false false, linear false false false; transition: transform 0.1s linear; } .article .thumb span { margin: -1px; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); position: absolute; } .article header { position: relative; z-index: 2; margin: 0 auto; } #course-header.article header { padding: 30px 30px 0 30px; text-align: center; } #course-header.article header .article-title { padding-right: 0; } #course-header.article header #article-title { padding-bottom: 0; } .article header .article-title { padding-right: 6em; } .article header h1 { font-size: 2.2rem; line-height: 1.25; letter-spacing: 0.25px; font-weight: 300; color: #404040; padding-bottom: .375em; } main > section.dark header h1, main > section.dark header p span:first-of-type, main > section.dark p:not(.small) a:not(.instructor-link), main > section.dark p:not(.small) a:not(.instructor-link):visited, main > section.dark p:not(.small) a:not(.cta):visited, main > section.dark .tabs .tablist .tab, main > section.dark .tabs .tabpanel ul:not(#cue-list) li a, main > section.dark p:not(.small) a:not(.cta) {color: #fff;} main > section.dark .tabs .tabpanel ul:not(#cue-list) li a:after, main > section.dark .article header p a span:last-of-type:after {background: #fff;} main > section.dark .access-block > div {background: #2D2D2D;} main > section.dark .sharing li a:after {color: #fff;} main > section.dark.article .access-block.full-access .availability { color: #000; } main > section.dark.article .access-block .availability { color: #fff; } main > section.dark.article .access-block .cta.alt, main > section.dark.article .access-block .cta.alt:hover, main > section.dark.article .access-block .cta.alt:focus { color: #fff !important; } main > section.dark.article header p a span:last-of-type:after { background: #fff; } main > section.dark header h2 { color: #fff; } main > section.dark p:not(.small) a:not(.instructor-link):after, main > section.dark p:not(.small) a:not(.instructor-link):visited:after, main > section.dark p:not(.small) a:not(.cta):after, main > section.dark p:not(.small) a:not(.cta):visited:after { background: #fff; } main > section.dark.article .content { border-top: 1px solid rgba(255, 255, 255, 0.5); } @media (min-width:768px){ #content { padding: 0 30px; } } #content .content { margin-top: 0; max-width: none; } .plist-item:hover .plist-item__thumb .plist-item__icon-play { background: rgba(0,0,0,.85) } .article header h1 a { color: #404040; -webkit-transition: color false false, 0.2s false false, linear false false; -moz-transition: color false false false, 0.2s false false false, linear false false false; -o-transition: color false false false, 0.2s false false false, linear false false false; transition: color 0.2s linear; } .article header h1 a:visited { color: #404040; } .article header h1 a:hover, .article header h1 a:focus { color: #000; -webkit-transition: color false false, 0.2s false false, ease-in-out false false; -moz-transition: color false false false, 0.2s false false false, ease-in-out false false false; -o-transition: color false false false, 0.2s false false false, ease-in-out false false false; transition: color 0.2s ease-in-out; } .article header h2 { font-size: 1.5rem; line-height: 1.1; letter-spacing: 0.25px; color: #404040; font-weight: 300; padding-bottom: .5em; } .article header p { font-family: Arial, sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .18rem; padding-bottom: 0; } .article header p span:first-of-type { font-family: TimesNewRoman, Times New Roman, Times, Baskerville, Georgia, serif; font-style: italic; font-weight: 600; text-transform: lowercase; color: #666; letter-spacing: .12rem; } .article header p a { color: #404040; -webkit-transition: color false false, 0.2s false false, linear false false; -moz-transition: color false false false, 0.2s false false false, linear false false false; -o-transition: color false false false, 0.2s false false false, linear false false false; transition: color 0.2s linear; } .article header p a:after { display: none; } .article header p a:hover, .article header p a:focus { color: #000; -webkit-transition: color false false, 0.2s false false, ease-in false false; -moz-transition: color false false false, 0.2s false false false, ease-in false false false; -o-transition: color false false false, 0.2s false false false, ease-in false false false; transition: color 0.2s ease-in; } .article header p a span:last-of-type { position: relative; } .article header p a span:last-of-type:after { content: ''; background: #404040; height: 2px; width: 100%; position: absolute; bottom: -.125em; left: 0; } .article header ~ .cta { margin-top: 1.25em; } .article .flag { background: #cc420c; color: #fff; text-transform: uppercase; font-weight: 600; font-family: Arial, sans-serif; font-size: .75rem; letter-spacing: .05rem; line-height: 1; width: 17em; padding: 1em 1.75em .75em 1em; position: absolute; z-index: 3; bottom: 0; left: 0; text-align: right; } .article .flag.expired { background: #c10000; } .article .no-author h2 { padding-bottom: 0; } .article .no-subtitle.no-author h1 { padding-bottom: 0; } .article .content { border-top: 1px solid rgba(0, 0, 0, 0.2); padding: 3.25em 0 120px 0; margin-top: 3.25em; } .article .product-meta li { line-height: 1.25; } .article .product-meta .access { text-transform: uppercase; font-family: Arial, sans-serif; font-weight: 600; font-size: .875rem; } .article .product-meta .price { font-size: 1.875rem; font-weight: 300; } .article .product-meta .price.sale { color: #cc420c; display: inline-block; margin-right: .375em; } .article .product-meta .price ~ .price { font-size: 1.375rem; color: #666; display: inline-block; text-decoration: line-through; } .article .cta { color: #404040; font-family: Arial, sans-serif; font-weight: 600; background: #ffdd00; text-align: center; font-size: .75rem; font-weight: bold; margin: 0; padding: .875em 2em; cursor: pointer; white-space: nowrap; min-width: 15em; display: block; border: 1px solid #cb0; text-align: center; vertical-align: middle; cursor: pointer; letter-spacing: -.02rem; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-transition: background-color 0.2s linear, border-color 0.2s linear; -moz-transition: background-color 0.2s linear false, border-color 0.2s linear false; -o-transition: background-color 0.2s linear false, border-color 0.2s linear false; transition: background-color 0.2s linear, border-color 0.2s linear; width: 100%; min-width: auto; } .article .cta:after { display: none; } .article .cta:hover, .article .cta:focus { color: #404040 !important; background-color: #f0d000; border-color: #cbb000; -webkit-transition: background-color 0.2s ease-in, border-color 0.2s ease-in; -moz-transition: background-color 0.2s ease-in false, border-color 0.2s ease-in false; -o-transition: background-color 0.2s ease-in false, border-color 0.2s ease-in false; transition: background-color 0.2s ease-in, border-color 0.2s ease-in; } .article .cta.alt { color: #404040; text-transform: uppercase; text-align: left; font-size: .75rem; letter-spacing: .005rem; background: none; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; padding: 0 1.5em 0 0; position: relative; z-index: 2; line-height: 1; display: inline-block; width: auto; min-width: 0; } .article .cta.alt:after { content: '\25BB'; font-family: "SSStandard"; font-size: .75rem; color: #cb0; z-index: 3; position: absolute; right: 0; display: block; top: 62%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: color false false, 0.2s false false, linear false false; -moz-transition: color false false false, 0.2s false false false, linear false false false; -o-transition: color false false false, 0.2s false false false, linear false false false; transition: color 0.2s linear; } .article .cta.alt:hover:after { color: #ffdd00; -webkit-transition: color false false, 0.2s false false, linear false false; -moz-transition: color false false false, 0.2s false false false, linear false false false; -o-transition: color false false false, 0.2s false false false, linear false false false; transition: color 0.2s linear; } .article .availability { font-style: italic; font-size: .875rem; color: #666; padding-bottom: 1.5em; display: block; font-family: Arial, sans-serif; } .article.excerpt .content { border-top: none; margin-top: 1em; padding-top: 0; padding-bottom: .25em; } .article.intro ul, .article.basic-page ul { padding: 0 0 1em 0.25em; } .article.intro ul li, .article.basic-page ul li { font-family: Arial, sans-serif; font-size: .875rem; line-height: 1.675; padding: 0 0 1em 0; padding: 0 0 .125em 1.75em; position: relative; } .article.intro ul li:before, .article.basic-page ul li:before { content: ''; position: absolute; top: .55rem; left: .375rem; background: #d8d8d8; height: .375rem; width: .375rem; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } .article.intro ul li a, .article.basic-page ul li a { color: #404040; position: relative; -webkit-transition: color false false, 0.2s false false, linear false false; -moz-transition: color false false false, 0.2s false false false, linear false false false; -o-transition: color false false false, 0.2s false false false, linear false false false; transition: color 0.2s linear; } .article.intro ul li a:after, .article.basic-page ul li a:after { content: ''; height: 1px; width: 100%; background: #ccbb00; position: absolute; bottom: -2px; left: 0; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transition: opacity false false, 0.2s false false, linear false false; -moz-transition: opacity false false false, 0.2s false false false, linear false false false; -o-transition: opacity false false false, 0.2s false false false, linear false false false; transition: opacity 0.2s linear; } .article.intro ul li a:hover, .article.basic-page ul li a:hover { color: #ccbb00; -webkit-transition: color false false, 0.2s false false, ease-in-out false false; -moz-transition: color false false false, 0.2s false false false, ease-in-out false false false; -o-transition: color false false false, 0.2s false false false, ease-in-out false false false; transition: color 0.2s ease-in-out; } .article.intro ul li a:hover:after, .article.basic-page ul li a:hover:after { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: opacity false false, 0.2s false false, ease-out false false; -moz-transition: opacity false false false, 0.2s false false false, ease-out false false false; -o-transition: opacity false false false, 0.2s false false false, ease-out false false false; transition: opacity 0.2s ease-out; } .article.intro ol, .article.basic-page ol { list-style-type: none; padding-left: .25em; } .article.intro ol li, .article.basic-page ol li { font-family: Arial, sans-serif; font-size: .875rem; line-height: 1.675; padding: 0 0 1em 0; counter-increment: step-counter; padding: 0 0 .125em 1.75em; position: relative; } .article.intro ol li:before, .article.basic-page ol li:before { font-family: "Open Sans", sans-serif; color: #fff; font-size: .875rem; font-weight: 600; content: counter(step-counter); position: absolute; top: .2em; left: 0; text-align: center; line-height: 1.25; width: 1.25em; height: 1.25em; background: #404040; z-index: 2; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } .article.intro ol li a, .article.basic-page ol li a { color: #404040; position: relative; -webkit-transition: color false false, 0.2s false false, linear false false; -moz-transition: color false false false, 0.2s false false false, linear false false false; -o-transition: color false false false, 0.2s false false false, linear false false false; transition: color 0.2s linear; } .article.intro ol li a:after, .article.basic-page ol li a:after { content: ''; height: 1px; width: 100%; background: #ccbb00; position: absolute; bottom: -2px; left: 0; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transition: opacity false false, 0.2s false false, linear false false; -moz-transition: opacity false false false, 0.2s false false false, linear false false false; -o-transition: opacity false false false, 0.2s false false false, linear false false false; transition: opacity 0.2s linear; } .article.intro ol li a:hover, .article.basic-page ol li a:hover { color: #ccbb00; -webkit-transition: color false false, 0.2s false false, ease-in-out false false; -moz-transition: color false false false, 0.2s false false false, ease-in-out false false false; -o-transition: color false false false, 0.2s false false false, ease-in-out false false false; transition: color 0.2s ease-in-out; } .article.intro ol li a:hover:after, .article.basic-page ol li a:hover:after { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: opacity false false, 0.2s false false, ease-out false false; -moz-transition: opacity false false false, 0.2s false false false, ease-out false false false; -o-transition: opacity false false false, 0.2s false false false, ease-out false false false; transition: opacity 0.2s ease-out; } .article .size-full { max-width: 100%; height: auto; float: left; } .article img { margin: 0 0 1.5em 0; } .article .alignleft, .article img.alignleft { margin-right: 1.5em; display: inline; float: left; } .article .alignright, .article img.alignright { margin-left: 1.5em; display: inline; float: right; } .article .aligncenter, .article img.aligncenter { margin-right: auto; margin-left: auto; display: block; clear: both; } .article .wp-caption { margin-bottom: 1.5em; text-align: center; padding-top: 5px; } .article .wp-caption img { border: 0 none; padding: 0; margin: 0; } .article .wp-caption p.wp-caption-text { line-height: 1.5; font-size: 10px; margin: 0; } .article .wp-smiley { margin: 0 !important; max-height: 1em; } .article blockquote.left { margin-right: 20px; text-align: right; margin-left: 0; width: 33%; float: left; } .article blockquote.right { margin-left: 20px; text-align: left; margin-right: 0; width: 33%; float: right; } .article em, .article i { font-style: italic; } .article strong, .article bold { font-weight: bold; } .article u { text-decoration: underline; } /* =================================== Notification */ .notification { padding: 1em 4em; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); position: absolute; z-index: 2; top: inherit; left: 0; width: 100%; } .notification > div { max-width: 1120px; margin: 0 auto; text-align: center; position: relative; z-index: 2; } .notification p { font-size: 1rem; font-family: Arial, sans-serif; font-weight: 600; padding: 0; } .notification.success { background: #ffdd00; } .notification.success p span:first-child { position: relative; z-index: 3; padding-left: 1.5em; } .notification.success p span:first-child:before { font-family: "SSStandard"; content: '\2713'; font-size: 1rem; position: absolute; top: .125em; left: 0; line-height: 1; } .notification.failure { background: #c10000; } .notification.failure p { color: #fff; } .notification.failure a.modal { border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; color: #fff; font-family: Arial, sans-serif; background: #404040; text-align: center; font-size: .75rem; font-weight: bold; margin: 0; padding: 1em 2em; cursor: pointer; white-space: nowrap; min-width: 20em; letter-spacing: -.02rem; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; -webkit-transition: background false false, 0.2s false false, linear false false; -moz-transition: background false false false, 0.2s false false false, linear false false false; -o-transition: background false false false, 0.2s false false false, linear false false false; transition: background 0.2s linear; min-width: 20em; display: inline-block; margin-top: .5em; } .notification.failure a.modal:hover { background: #000; -webkit-transition: background false false, 0.3s false false, ease-in false false; -moz-transition: background false false false, 0.3s false false false, ease-in false false false; -o-transition: background false false false, 0.3s false false false, ease-in false false false; transition: background 0.3s ease-in; } .notification.failure.notification button::after { color: #fff; } .notification.active { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transition: all false false, 0.2s false false, linear false false; -moz-transition: all false false false, 0.2s false false false, linear false false false; -o-transition: all false false false, 0.2s false false false, linear false false false; transition: all 0.2s linear; } .notification.active ~ section { padding-top: 3.75em !important; -webkit-transition: padding false false, 0.2s false false, ease-out false false; -moz-transition: padding false false false, 0.2s false false false, ease-out false false false; -o-transition: padding false false false, 0.2s false false false, ease-out false false false; transition: padding 0.2s ease-out; } .notification + section { -webkit-transition: padding false false, 0.2s false false, linear false false; -moz-transition: padding false false false, 0.2s false false false, linear false false false; -o-transition: padding false false false, 0.2s false false false, linear false false false; transition: padding 0.2s linear; } .notification button { position: absolute; right: -3em; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); color: rgba(64, 64, 64, 0.9); line-height: 2.5; cursor: pointer; border: none; background: none; height: 2.5em; width: 2.5em; padding: 0; text-align: center; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .notification button:after { font-family: "SSStandard"; content: '\2421'; font-size: 1.125rem; line-height: 1.75; -webkit-transition: color false false, 0.2s false false, linear false false; -moz-transition: color false false false, 0.2s false false false, linear false false false; -o-transition: color false false false, 0.2s false false false, linear false false false; transition: color 0.2s linear; } .notification button:hover:after, .notification button:focus:after { color: #000; -webkit-transition: color false false, 0.3s false false, ease-in false false; -moz-transition: color false false false, 0.3s false false false, ease-in false false false; -o-transition: color false false false, 0.3s false false false, ease-in false false false; transition: color 0.3s ease-in; } .notification button span { margin: -1px; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); position: absolute; } .status { font-family: Arial, sans-serif; font-size: .75rem; line-height: 1.25; letter-spacing: .02rem; font-weight: 600; text-transform: uppercase; float: left; width: 100%; position: relative; z-index: 2; padding: 0 0 0 1.5em; } .status:before { font-family: "SSStandard"; content: '\23F2'; font-size: .75rem; line-height: 1.5; position: absolute; left: 0; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .status:last-of-type { margin: 0; } .status:first-of-type { margin: 1.25em 0; } .status:first-of-type:last-of-type { margin: 1.25em 0; } .status.expired { color: #c10000; } .status.expired:before { content: '\26A0'; } /* More posts, cross-sell */ .single .more-posts { border-top: 1px solid rgba(0, 0, 0, 0.2); padding-top: 3em; margin-top: 2em; } .single .more-posts .row { padding-top: 3em; } .more-posts { padding: 3.5em 2em 2em 2em; } .more-posts h3 { font-size: 2.25rem; font-weight: 300; text-align: center; text-transform: capitalize; } .more-posts .row { max-width: 960px; padding: 3.5em 0 1.25em 0; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-flex-pack: center; flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-align-content: center; align-content: center; } .more-posts .article { margin-right: 5%; } .more-posts .article:last-child { margin-right: 0; } .more-posts h4 { text-align: center; line-height: 1.5; padding-bottom: .375em; } .more-posts h4 a { color: #404040; -webkit-transition: color false false, 0.1s false false, linear false false; -moz-transition: color false false false, 0.1s false false false, linear false false false; -o-transition: color false false false, 0.1s false false false, linear false false false; transition: color 0.1s linear; } .more-posts h4 a:hover, .more-posts h4 a:focus { color: #000; -webkit-transition: color false false, 0.2s false false, ease-in false false; -moz-transition: color false false false, 0.2s false false false, ease-in false false false; -o-transition: color false false false, 0.2s false false false, ease-in false false false; transition: color 0.2s ease-in; } .more-posts h4 ~ span { font-family: Arial, sans-serif; font-weight: 600; font-size: .875rem; text-align: center; display: block; } /* =================================== Sharing */ .sharing { display: none; position: absolute; top: .75em; right: 0; z-index: 3; } .sharing li { float: left; margin-right: 1.25em; } .sharing li:last-child { margin-right: 0; } .sharing li button { border: none; background: none; padding: 0; height: 1.75em; width: 2em; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; cursor: pointer; position: relative; } .sharing li button:after { font-family: "SSSocialCircle"; color: #404040; font-size: 1.5rem; line-height: 1; -webkit-transition: color false false, 0.2s false false, linear false false; -moz-transition: color false false false, 0.2s false false false, linear false false false; -o-transition: color false false false, 0.2s false false false, linear false false false; transition: color 0.2s linear; position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .sharing li button:hover:after { color: #000; -webkit-transition: color false false, 0.2s false false, linear false false; -moz-transition: color false false false, 0.2s false false false, linear false false false; -o-transition: color false false false, 0.2s false false false, linear false false false; transition: color 0.2s linear; } .sharing li button span { margin: -1px; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); position: absolute; } .sharing li a { height: 1.75em; width: 2em; padding: 0; margin: 0; position: relative; display: block; } .sharing li a:after { font-family: "SSSocialCircle"; color: #404040; font-size: 1.5rem; line-height: 1; -webkit-transition: color false false, 0.2s false false, linear false false; -moz-transition: color false false false, 0.2s false false false, linear false false false; -o-transition: color false false false, 0.2s false false false, linear false false false; transition: color 0.2s linear; position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .sharing li a span { margin: -1px; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); position: absolute; } .sharing li.facebook button:after, .sharing li.facebook a:after { content: '\F610'; } .sharing li.facebook button:hover:after, .sharing li.facebook button:active:after, .sharing li.facebook a:hover:after, .sharing li.facebook a:active:after { color: #3b5998; } .sharing li.twitter button:after, .sharing li.twitter a:after { content: '\F611'; } .sharing li.twitter button:hover:after, .sharing li.twitter button:active:after, .sharing li.twitter a:hover:after, .sharing li.twitter a:active:after { color: #55acee; } /* =================================== Access & Redemption Block */ .access-block > div { background: #eaf0ed; padding: 1.5em 1.5em 1.5em 1.5em; max-width: 18em; float: right; width: 100%; } .access-block:not(.full-access) > div { background: #e6e6e6; } .access-block:not(.full-access) dl dt { margin: -1px; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); position: absolute; } .access-block dl dd.access { font-family: Arial, sans-serif; font-style: italic; font-size: .875em; color: #666; padding: .75em 0 1.25em 0 !important; display: block; } .access-block dl dd.current-price { font-family: "Open Sans", sans-serif; font-size: 2.25rem; font-weight: 300; line-height: 1; padding-bottom: .125em; display: block; margin: 0 auto; } .access-block dl dd.current-price.sale { color: #cc420c; display: block; } .access-block dl dd.current-price span { font-size: 1.375rem; text-decoration: line-through; color: #666; display: block; margin: .5em 0 .75em 0; } .access-block dl dd.origi-price { font-size: 2.25rem; font-weight: 300; padding-bottom: .25em; display: block; } .access-block dl dd:last-child { padding-bottom: .875em; } .access-block dl ~ .cta:not(.alt) { margin-bottom: 1.375em; } .access-block.full-access dl dt { font-family: "Open Sans", sans-serif; font-size: 2rem; font-weight: 300; line-height: 1.25; text-align: center; margin-bottom: .5em; } .access-block.full-access dl dt span { display: block; } .access-block.full-access .availability { text-align: center; background: #fff; color: #404040; text-transform: uppercase; font-weight: 600; font-style: normal; line-height: 1.25; font-size: .875rem; padding: .675em .5em; } .access-block.full-access .availability span { white-space: nowrap; } .access-block.no-price > div { padding: 1.5em; } .access-block.no-price dl dd { text-align: center; padding: 0; font-size: 2rem; line-height: 1.2; font-weight: 300; } .access-block.no-price dl dd span { display: block; } .access-block h3 { text-align: center; border-top: 1px solid #d8d8d8; padding: 1.25em 0 0 0; margin: 1.75em 0 0 0; font-size: 1rem; line-height: 1.5; padding-bottom: .875em; } .user-check { color: #404040; font-size: .75rem; background: #ffdd00; position: fixed; top: 0; left: 0; padding: .375em; width: 300px; z-index: 9999; line-height: 1.5; } .user-check:before { content: 'User Role: '; font-weight: bold; color: #000; } .user-check strong { font-weight: bold; color: #000; } .user-check .cta { display: block; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; color: #fff; font-family: Arial, sans-serif; background: #404040; text-align: center; font-size: .75rem; font-weight: bold; margin: 0; padding: 1em 2em; cursor: pointer; white-space: nowrap; min-width: 20em; letter-spacing: -.02rem; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; -webkit-transition: background false false, 0.2s false false, linear false false; -moz-transition: background false false false, 0.2s false false false, linear false false false; -o-transition: background false false false, 0.2s false false false, linear false false false; transition: background 0.2s linear; margin: .25em 0 1em 0; } .user-check .cta:hover { background: #000; -webkit-transition: background false false, 0.3s false false, ease-in false false; -moz-transition: background false false false, 0.3s false false false, ease-in false false false; -o-transition: background false false false, 0.3s false false false, ease-in false false false; transition: background 0.3s ease-in; } /* =================================== Pagination */ .pagination { position: relative; z-index: 1; height: 6em; padding: 1em 2em; } .pagination ul { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .pagination ul li { float: left; font-family: Arial, sans-serif; font-size: .75rem; font-weight: bold; position: relative; width: 3em; height: 3em; text-align: center; line-height: 3; margin-right: 1em; } .pagination ul li:last-child { margin-right: 0; } .pagination ul li a { display: block; float: left; width: 100%; height: 100%; color: #404040; } .pagination ul li .current { float: left; height: 100%; width: 100%; background: #ffdd00; color: #404040; } .pagination ul li .prev, .pagination ul li .next { position: relative; z-index: 2; } .pagination ul li .prev span, .pagination ul li .next span { margin: -1px; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); position: absolute; } .pagination ul li .prev:before, .pagination ul li .next:before { content: ''; height: 100%; width: 1px; background: #d8d8d8; position: absolute; top: 0; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20); opacity: 0.2; } .pagination ul li .prev:after, .pagination ul li .next:after { font-family: "SSStandard"; color: #ffdd00; font-size: .75rem; line-height: 3.25; } .pagination ul li .prev:before { right: 0; } .pagination ul li .prev:after { content: '\25C3'; padding-right: .5em; } .pagination ul li .next:before { left: 0; } .pagination ul li .next:after { content: '\25B9'; padding-left: .5em; } .no-posts > div { background: rgba(234, 234, 234, 0.6); padding: 3em 1em; margin-top: 3em; margin-bottom: 3em; } .no-posts > div h2 { text-align: center; font-family: Arial, sans-serif; font-weight: bold; color: rgba(0, 0, 0, 0.3); } /* =================================== Single Course */ .tabs { padding-right: 4em; } .tabs .tablist .tab { border: none; background: none; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; color: #000; cursor: pointer; display: inline-block; font-family: Arial, sans-serif; font-size: .875rem; font-weight: 600; letter-spacing: .05rem; line-height: 1; margin-right: .75em; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; overflow: hidden; padding: 0 0 1em 0; position: relative; -webkit-transition: opacity false false, 0.2s false false, ease-in-out false false; -moz-transition: opacity false false false, 0.2s false false false, ease-in-out false false false; -o-transition: opacity false false false, 0.2s false false false, ease-in-out false false false; transition: opacity 0.2s ease-in-out; text-transform: uppercase; z-index: 3; } .tabs .tablist .tab:after { content: ''; height: 2px; width: 100%; position: absolute; bottom: 0; left: 0; background: #ffdd00; -webkit-transform: translate3d(0, 0.25em, 0); -moz-transform: translate3d(0, 0.25em, 0); -ms-transform: translate3d(0, 0.25em, 0); -o-transform: translate3d(0, 0.25em, 0); transform: translate3d(0, 0.25em, 0); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; -webkit-transition: -webkit-transform 0.1s linear, opacity 0.2s linear; -moz-transition: -moz-transform 0.1s linear false, opacity 0.2s linear false; -o-transition: -o-transform 0.1s linear false, opacity 0.2s linear false; transition: transform 0.1s linear, opacity 0.2s linear; } .tabs .tablist .tab:last-of-type { margin-right: 0; } .tabs .tablist .tab:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } .tabs .tablist .tab:hover:after { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transform: translate3d(0, -0.25em, 0); -moz-transform: translate3d(0, -0.25em, 0); -ms-transform: translate3d(0, -0.25em, 0); -o-transform: translate3d(0, -0.25em, 0); transform: translate3d(0, -0.25em, 0); -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.1s linear; -moz-transition: -moz-transform 0.2s ease-in-out false, opacity 0.1s linear false; -o-transition: -o-transform 0.2s ease-in-out false, opacity 0.1s linear false; transition: transform 0.2s ease-in-out, opacity 0.1s linear; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } .tabs .tablist .tab[aria-selected="true"] { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } .tabs .tablist .tab[aria-selected="true"]:after { -webkit-transform: translate3d(0, -0.25em, 0); -moz-transform: translate3d(0, -0.25em, 0); -ms-transform: translate3d(0, -0.25em, 0); -o-transform: translate3d(0, -0.25em, 0); transform: translate3d(0, -0.25em, 0); -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.1s linear; -moz-transition: -moz-transform 0.2s ease-in-out false, opacity 0.1s linear false; -o-transition: -o-transform 0.2s ease-in-out false, opacity 0.1s linear false; transition: transform 0.2s ease-in-out, opacity 0.1s linear; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } .tabs .tablist .tab i { display: none; } .tabs .tabpanel { overflow: hidden; min-height: 10em; padding: 1.5em 0 0 0; display: block; } .tabs .tabpanel[aria-hidden="true"] { visibility: hidden; position: absolute; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transform: translate3d(0, 1em, 0); -moz-transform: translate3d(0, 1em, 0); -ms-transform: translate3d(0, 1em, 0); -o-transform: translate3d(0, 1em, 0); transform: translate3d(0, 1em, 0); -webkit-transition: opacity 0.2s linear, -webkit-transform 0.2s linear; -moz-transition: opacity 0.2s linear false, -moz-transform 0.2s linear false; -o-transition: opacity 0.2s linear false, -o-transform 0.2s linear false; transition: opacity 0.2s linear, transform 0.2s linear; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } .tabs .tabpanel[aria-hidden="false"] { visibility: visible; visibility: visible; position: relative; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: opacity 0.1s linear, -webkit-transform 0.3s ease-in; -moz-transition: opacity 0.1s linear false, -moz-transform 0.3s ease-in false; -o-transition: opacity 0.1s linear false, -o-transform 0.3s ease-in false; transition: opacity 0.1s linear, transform 0.3s ease-in; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } .tabs .tabpanel.has-thumb { padding-left: 8em; } .tabs .tabpanel .tab-mobile { border: 1px solid red; } .tabs .tabpanel ul:not(#cue-list) { padding: 0 0 1em 0.25em; } .tabs .tabpanel ul:not(#cue-list) li { font-family: Arial, sans-serif; font-size: .875rem; line-height: 1.675; padding: 0 0 1em 0; padding: 0 0 .125em 1.75em; position: relative; } .tabs .tabpanel ul:not(#cue-list) li:before { content: ''; position: absolute; top: .55rem; left: .375rem; background: #d8d8d8; height: .375rem; width: .375rem; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } .tabs .tabpanel ul:not(#cue-list) li a { color: #404040; position: relative; -webkit-transition: color false false, 0.2s false false, linear false false; -moz-transition: color false false false, 0.2s false false false, linear false false false; -o-transition: color false false false, 0.2s false false false, linear false false false; transition: color 0.2s linear; } .tabs .tabpanel ul:not(#cue-list) li a:after { content: ''; height: 1px; width: 100%; background: #ccbb00; position: absolute; bottom: -2px; left: 0; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transition: opacity false false, 0.2s false false, linear false false; -moz-transition: opacity false false false, 0.2s false false false, linear false false false; -o-transition: opacity false false false, 0.2s false false false, linear false false false; transition: opacity 0.2s linear; } .tabs .tabpanel ul:not(#cue-list) li a:hover { color: #ccbb00; -webkit-transition: color false false, 0.2s false false, ease-in-out false false; -moz-transition: color false false false, 0.2s false false false, ease-in-out false false false; -o-transition: color false false false, 0.2s false false false, ease-in-out false false false; transition: color 0.2s ease-in-out; } .tabs .tabpanel ul:not(#cue-list) li a:hover:after { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: opacity false false, 0.2s false false, ease-out false false; -moz-transition: opacity false false false, 0.2s false false false, ease-out false false false; -o-transition: opacity false false false, 0.2s false false false, ease-out false false false; transition: opacity 0.2s ease-out; } .tabs .tabpanel ol { list-style-type: none; padding-left: .25em; } .tabs .tabpanel ol li { font-family: Arial, sans-serif; font-size: .875rem; line-height: 1.675; padding: 0 0 1em 0; counter-increment: step-counter; padding: 0 0 .125em 1.75em; position: relative; } .tabs .tabpanel ol li:before { font-family: "Open Sans", sans-serif; color: #fff; font-size: .875rem; font-weight: 600; content: counter(step-counter); position: absolute; top: .2em; left: 0; text-align: center; line-height: 1.25; width: 1.25em; height: 1.25em; background: #404040; z-index: 2; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } .tabs .tabpanel ol li a { color: #404040; position: relative; -webkit-transition: color false false, 0.2s false false, linear false false; -moz-transition: color false false false, 0.2s false false false, linear false false false; -o-transition: color false false false, 0.2s false false false, linear false false false; transition: color 0.2s linear; } .tabs .tabpanel ol li a:after { content: ''; height: 1px; width: 100%; background: #ccbb00; position: absolute; bottom: -2px; left: 0; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transition: opacity false false, 0.2s false false, linear false false; -moz-transition: opacity false false false, 0.2s false false false, linear false false false; -o-transition: opacity false false false, 0.2s false false false, linear false false false; transition: opacity 0.2s linear; } .tabs .tabpanel ol li a:hover { color: #ccbb00; -webkit-transition: color false false, 0.2s false false, ease-in-out false false; -moz-transition: color false false false, 0.2s false false false, ease-in-out false false false; -o-transition: color false false false, 0.2s false false false, ease-in-out false false false; transition: color 0.2s ease-in-out; } .tabs .tabpanel ol li a:hover:after { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: opacity false false, 0.2s false false, ease-out false false; -moz-transition: opacity false false false, 0.2s false false false, ease-out false false false; -o-transition: opacity false false false, 0.2s false false false, ease-out false false false; transition: opacity 0.2s ease-out; } .tabs .tabpanel .headshot { width: 100px; height: auto; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; position: absolute; top: 1.5em; left: 0; } .tabs #tab-overview > div p:first-of-type { font-family: "Open Sans", sans-serif; font-weight: 300; font-size: 1.25rem; line-height: 1.375; } .tabs #cue-list { padding: 0; margin: 0 0 2em 0; } .tabs #cue-list li { padding: .675em 1em .675em 2.75em; margin: 0; border-bottom: 1px solid #eaeaea; cursor: pointer; font-family: Arial, sans-serif; font-size: .875rem; line-height: 1.25; position: relative; z-index: 2; } .tabs #cue-list li:before { font-family: "SSStandard"; content: '\25B6'; color: #fff; font-size: .75rem; position: absolute; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); left: 1em; z-index: 3; width: 1.5em; height: .875em; } .tabs #cue-list li:last-child { border-bottom: none; } .tabs #cue-list li:not(.active):before, .tabs #cue-list li:not(.start):before { color: #eaeaea; } .tabs #cue-list li:not(.active):hover, .tabs #cue-list li:not(.start):hover { background: #f2f2f2; -webkit-transition: background false false, 0.2s false false, ease-out false false; -moz-transition: background false false false, 0.2s false false false, ease-out false false false; -o-transition: background false false false, 0.2s false false false, ease-out false false false; transition: background 0.2s ease-out; } .tabs #cue-list li:not(.active):hover:before, .tabs #cue-list li:not(.start):hover:before { color: #fff; } .tabs #cue-list li.active { background: #eaeaea; -webkit-transition: background false false, 0.2s false false, ease-out false false; -moz-transition: background false false false, 0.2s false false false, ease-out false false false; -o-transition: background false false false, 0.2s false false false, ease-out false false false; transition: background 0.2s ease-out; } .tabs #cue-list li.active:before { color: #404040 !important; } .tabs #cue-list li.start { background: #eaeaea; -webkit-transition: background false false, 0.2s false false, ease-out false false; -moz-transition: background false false false, 0.2s false false false, ease-out false false false; -o-transition: background false false false, 0.2s false false false, ease-out false false false; transition: background 0.2s ease-out; } .tabs #cue-list li.start:before { color: #fff !important; } .tabs .no-list { padding-left: 0 !important; } .tabs .no-list li { padding-left: 0 !important; } .tabs .no-list li:before { display: none; } /* =================================== Footer */ #footer { background: #eaeaea; padding: 4em 30px; position: relative; z-index: 2; } #footer .row { max-width: none; } #footer .row > a { width: 4em; height: 4em; display: block; position: absolute; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); background: url(_images/logo-nikon.svg) no-repeat; background-size: cover; } #footer .row > a:after { content: '®'; color: #404040; position: absolute; bottom: -.25em; right: -1.25em; font-size: .5rem; } #footer .row > a span { margin: -1px; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); position: absolute; } #footer .row > span { font-family: Arial, sans-serif; position: absolute; bottom: -2.75em; right: 0; z-index: 3; font-size: .675rem; } #footer .menu-item.menu-type-link { display: none; } .footer-navigation { float: right; padding-left: 100px; } .footer-navigation li { display: inline-block; margin-right: 1em; } .footer-navigation li:last-child { margin-right: 0; } .footer-navigation li a, .footer-navigation li { color: #404040; font-family: Arial, sans-serif; font-weight: 600; font-size: .75rem; -webkit-transition: color false false, 0.2s false false, linear false false; -moz-transition: color false false false, 0.2s false false false, linear false false false; -o-transition: color false false false, 0.2s false false false, linear false false false; transition: color 0.2s linear; cursor: pointer; } .footer-navigation li a:hover, .footer-navigation li a:focus, .footer-navigation li a:active { color: #000; -webkit-transition: color false false, 0.3s false false, ease-in false false; -moz-transition: color false false false, 0.3s false false false, ease-in false false false; -o-transition: color false false false, 0.3s false false false, ease-in false false false; transition: color 0.3s ease-in; } /* =================================== Misc */ .back-to-top { position: fixed; bottom: 1em; right: 0; z-index: 7; height: 5.5em; width: 6em; cursor: pointer; color: #fff; text-align: center; background: #000; border: none; text-transform: uppercase; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; font-size: .5rem; font-weight: 500; padding: 1.5em .25em .25em .25em; -webkit-transition: color false false, 0.1s false false, linear false false; -moz-transition: color false false false, 0.1s false false false, linear false false false; -o-transition: color false false false, 0.1s false false false, linear false false false; transition: color 0.1s linear; } .back-to-top span { display: block; font-size: .55rem; letter-spacing: .05rem; } .back-to-top:hover, .back-to-top:focus { color: #ffdd00; -webkit-transition: color false false, 0.2s false false, linear false false; -moz-transition: color false false false, 0.2s false false false, linear false false false; -o-transition: color false false false, 0.2s false false false, linear false false false; transition: color 0.2s linear; } .back-to-top:before { content: ''; background: url(_images/arrow-up.svg) center center no-repeat; position: absolute; top: 1em; left: 0; width: 100%; height: 5px; } .hidden { display: none; } .scroll .hidden { display: block; } /* =================================== 404 */ .error404 #header:after { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } .error404 main { height: 100%; } .error404 main > section { display: table; height: 100%; width: 100%; } .error404 main > section header { text-align: center; font-size: 2rem; display: table-cell; vertical-align: middle; } .error404 main:after { background: #404040; } /* =================================== Modals */ #modal { display: none; } .modaal-accessible-hide { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden; } .modaal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; opacity: 0; } .modaal-wrapper { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; overflow: auto; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; box-sizing: border-box; transition: all 0.3s ease-in-out; } .modaal-wrapper * { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; } .modaal-wrapper .modaal-close { border: none; background: transparent; padding: 0; -webkit-appearance: none; } .modaal-wrapper.modaal-start_none { display: none; opacity: 1; } .modaal-wrapper.modaal-start_fade { opacity: 0; } .modaal-wrapper.modaal-fullscreen { overflow: hidden; } .modaal-outer-wrapper { display: table; position: relative; width: 100%; height: 100%; } .modaal-fullscreen .modaal-outer-wrapper { display: block; } .modaal-inner-wrapper { display: table-cell; width: 100%; height: 100%; position: relative; vertical-align: middle; text-align: center; padding: 1em; } .modaal-fullscreen .modaal-inner-wrapper { padding: 0; display: block; vertical-align: top; } .modaal-container { position: relative; display: inline-block; width: 100%; margin: auto; text-align: left; color: #404040; max-width: 830px; border-radius: 0px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); cursor: auto; } .modaal-container:after { content: ''; background: #ffdc00; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 7; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90); opacity: 0.9; } .modaal-container.is_loading { height: 100px; width: 100px; overflow: hidden; } .modaal-fullscreen .modaal-container { max-width: none; height: 100%; overflow: auto; } .modaal-container .modaal-content { position: relative; z-index: 8; } .modaal-close { position: absolute; right: .25em; top: .25em; color: #fff; cursor: pointer; opacity: 1; width: 3.5em; height: 3.5em; background: transparent; z-index: 9; transition: all 0.2s ease-in-out; } .modaal-close span { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden; } .modaal-close:after { font-family: "SSStandard"; color: #404040; content: '\2421'; font-size: 1rem; line-height: 2.5; -webkit-transition: color false false, 0.2s false false, linear false false; -moz-transition: color false false false, 0.2s false false false, linear false false false; -o-transition: color false false false, 0.2s false false false, linear false false false; transition: color 0.2s linear; } .modaal-close:after:hover, .modaal-close:after:focus { color: #000; -webkit-transition: color false false, 0.3s false false, ease-in false false; -moz-transition: color false false false, 0.3s false false false, ease-in false false false; -o-transition: color false false false, 0.3s false false false, ease-in false false false; transition: color 0.3s ease-in; } .modaal-fullscreen .modaal-close { background: #afb7bc; right: 10px; top: 10px; } .modaal-content-container { padding: 2.75em; -webkit-transition: padding false false, 0.2s false false, linear false false; -moz-transition: padding false false false, 0.2s false false false, linear false false false; -o-transition: padding false false false, 0.2s false false false, linear false false false; transition: padding 0.2s linear; } .modaal-content-container * { font-family: Arial, sans-serif; } .modaal-content-container h3, .modaal-content-container .title { text-align: center; font-weight: 600; font-size: 1.75rem; line-height: 1.125; padding: 0 0 .5em 0; } .modaal-content-container h3.exit, .modaal-content-container .title.exit { font-size: 1.5rem; line-height: 1.25; } .modaal-content-container h3 a, .modaal-content-container .title a { color: #404040; text-decoration: underline; } .modaal-content-container h3 a:hover, .modaal-content-container h3 a:focus, .modaal-content-container .title a:hover, .modaal-content-container .title a:focus { color: #404040; text-decoration: none; } .modaal-content-container button, .modaal-content-container .button { border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; color: #fff; font-family: Arial, sans-serif; background: #404040; text-align: center; font-size: .75rem; font-weight: bold; margin: 0; padding: 1em 2em; cursor: pointer; white-space: nowrap; min-width: 20em; letter-spacing: -.02rem; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; -webkit-transition: background false false, 0.2s false false, linear false false; -moz-transition: background false false false, 0.2s false false false, linear false false false; -o-transition: background false false false, 0.2s false false false, linear false false false; transition: background 0.2s linear; display: block; margin: 1em auto 0 auto; max-width: 15em; } .modaal-content-container button:hover, .modaal-content-container .button:hover { background: #000; -webkit-transition: background false false, 0.3s false false, ease-in false false; -moz-transition: background false false false, 0.3s false false false, ease-in false false false; -o-transition: background false false false, 0.3s false false false, ease-in false false false; transition: background 0.3s ease-in; } .modaal-content-container button ~ .small, .modaal-content-container .button ~ .small { margin-top: 2em; } .modaal-content-container .small { text-align: center; } .modaal-content-container p a { text-decoration: underline; } .modaal-content-container p a:hover, .modaal-content-container p a:focus { text-decoration: none; } .modaal-content-container form label { text-align: center; display: block; font-size: 1.15rem; line-height: 1.5; margin-bottom: .5em; } .modaal-content-container form label.checkbox { position: relative; display: block; cursor: pointer; } .modaal-content-container form label.checkbox input { margin: -1px; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); position: absolute; } .modaal-content-container form label.checkbox input:checked ~ span:after { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: opacity false false, 0.1s false false, ease-in false false; -moz-transition: opacity false false false, 0.1s false false false, ease-in false false false; -o-transition: opacity false false false, 0.1s false false false, ease-in false false false; transition: opacity 0.1s ease-in; -webkit-transition: -webkit-transform false false, 0.1s false false, linear false false; -moz-transition: -moz-transform false false false, 0.1s false false false, linear false false false; -o-transition: -o-transform false false false, 0.1s false false false, linear false false false; transition: transform 0.1s linear; } .modaal-content-container form label.checkbox span { position: relative; z-index: 3; padding-left: 1.5em; } .modaal-content-container form label.checkbox span:before { content: ''; font-size: 1rem; height: .75em; width: .75em; border: 1px solid #cbb000; display: inline-block; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; background: #fff; position: absolute; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); left: 0; z-index: 4; } .modaal-content-container form label.checkbox span:after { font-family: "SSStandard"; content: '\2713'; font-size: 1rem; line-height: 1; color: #404040; position: absolute; top: 0; left: 0; z-index: 5; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); -webkit-transition: opacity false false, 0.2s false false, linear false false; -moz-transition: opacity false false false, 0.2s false false false, linear false false false; -o-transition: opacity false false false, 0.2s false false false, linear false false false; transition: opacity 0.2s linear; -webkit-transition: -webkit-transform false false, 0.1s false false, linear false false; -moz-transition: -moz-transform false false false, 0.1s false false false, linear false false false; -o-transition: -o-transform false false false, 0.1s false false false, linear false false false; transition: transform 0.1s linear; } .modaal-content-container form label a { color: #404040; text-decoration: none; position: relative; z-index: 3; -webkit-transition: color false false, 0.2s false false, linear false false; -moz-transition: color false false false, 0.2s false false false, linear false false false; -o-transition: color false false false, 0.2s false false false, linear false false false; transition: color 0.2s linear; } .modaal-content-container form label a:after { content: ''; height: 1px; width: 100%; background: #404040; position: absolute; bottom: -.125em; left: 0; -webkit-transition: -webkit-transform false false, 0.2s false false, linear false false; -moz-transition: -moz-transform false false false, 0.2s false false false, linear false false false; -o-transition: -o-transform false false false, 0.2s false false false, linear false false false; transition: transform 0.2s linear; } .modaal-content-container form label a:visited, .modaal-content-container form label a:hover, .modaal-content-container form label a:focus, .modaal-content-container form label a:active { color: #000; -webkit-transition: color false false, 0.2s false false, linear false false; -moz-transition: color false false false, 0.2s false false false, linear false false false; -o-transition: color false false false, 0.2s false false false, linear false false false; transition: color 0.2s linear; } .modaal-content-container form label a:visited:after, .modaal-content-container form label a:hover:after, .modaal-content-container form label a:focus:after, .modaal-content-container form label a:active:after { background: #000; -webkit-transition: background false false, 0.2s false false, linear false false; -moz-transition: background false false false, 0.2s false false false, linear false false false; -o-transition: background false false false, 0.2s false false false, linear false false false; transition: background 0.2s linear; } .modaal-content-container form input:not([type='checkbox']) { width: 330px; padding: .5em 1em; font-size: .875rem; font-weight: 600; text-align: left; background: #fff; border: 1px solid #cb0; margin: 0 auto 1.5em auto; display: block; color: #404040; text-align: center; text-transform: uppercase; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; -webkit-transition: border-color false false, 0.2s false false, linear false false; -moz-transition: border-color false false false, 0.2s false false false, linear false false false; -o-transition: border-color false false false, 0.2s false false false, linear false false false; transition: border-color 0.2s linear; } .modaal-content-container form input:not([type='checkbox']):focus { border-color: #cbb000; -webkit-transition: border-color false false, 0.2s false false, ease-in false false; -moz-transition: border-color false false false, 0.2s false false false, ease-in false false false; -o-transition: border-color false false false, 0.2s false false false, ease-in false false false; transition: border-color 0.2s ease-in; } .modaal-content-container form input:not([type='checkbox']).error { border: 1px solid #c10000; -webkit-box-shadow: #fff 0px 0px 15px; -moz-box-shadow: #fff 0px 0px 15px; box-shadow: #fff 0px 0px 15px; } .modaal-content-container form .checkbox { font-size: .875rem; margin-bottom: 1.5em; } .modaal-content-container form .checkbox .error ~ span a { color: #c10000; } .modaal-content-container form .checkbox .error ~ span a:after { background: #c10000; } .modaal-content-container form label input a { text-decoration: underline; color: #404040; } .modaal-content-container form .small, .modaal-content-container form .legal { text-align: center; max-width: 400px; margin: 0 auto; display: block; } .modaal-content-container form .small a:not(.cta), .modaal-content-container form .legal a:not(.cta) { border: 1px solid red; } .modaal-content-container form .small a:not(.cta):hover, .modaal-content-container form .legal a:not(.cta):hover { color: #000 !important; opacity: 1 !important; -webkit-transition: none false false; -moz-transition: none false false false; -o-transition: none false false false; transition: none; } .modaal-content-container form .errors { border: 1px solid #c10000; background: #fcf1f1; position: relative; width: 100%; display: none; max-width: 23.5em; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); padding: 1.25em 1.25em 1.25em 2em; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; list-style-type: decimal; list-style-position: outside; font-size: .875rem; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: opacity false false, 0.2s false false, linear false false; -moz-transition: opacity false false false, 0.2s false false false, linear false false false; -o-transition: opacity false false false, 0.2s false false false, linear false false false; transition: opacity 0.2s linear; margin-left: auto; margin-right: auto; } .modaal-content-container form .errors.active { display: table; margin-bottom: 1em; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transition: opacity false false, 0.2s false false, linear false false; -moz-transition: opacity false false false, 0.2s false false false, linear false false false; -o-transition: opacity false false false, 0.2s false false false, linear false false false; transition: opacity 0.2s linear; } .modaal-content-container form .errors li { margin-bottom: .5em; padding-left: .25em; } .modaal-content-container form .errors li:last-child { margin-bottom: 0; } .modaal-content-container form .errors a { color: #1d3994; text-decoration: underline; line-height: 1.1; } .modaal-content-container form .errors a:hover, .modaal-content-container form .errors a:active { text-decoration: none; } .modaal-confirm-wrap { padding: 30px 0 0; text-align: center; font-size: 0; } .modaal-confirm-btn { font-size: 14px; display: inline-block; margin: 0 10px; vertical-align: middle; cursor: pointer; border: none; background: transparent; } .modaal-confirm-btn.modaal-ok { padding: 10px 15px; color: #fff; background: #555; border-radius: 3px; transition: background 0.2s ease-in-out; } .modaal-confirm-btn.modaal-ok:hover { background: #2f2f2f; } .modaal-confirm-btn.modaal-cancel { text-decoration: underline; } .modaal-confirm-btn.modaal-cancel:hover { text-decoration: none; color: #2f2f2f; } @keyframes instaReveal { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes instaReveal { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes instaReveal { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes instaReveal { 0% { opacity: 0; } 100% { opacity: 1; } } @-ms-keyframes instaReveal { 0% { opacity: 0; } 100% { opacity: 1; } } .modaal-instagram .modaal-container { width: auto; background: transparent; box-shadow: none !important; } .modaal-instagram .modaal-content-container { padding: 0; background: transparent; } .modaal-instagram .modaal-content-container > blockquote { width: 1px !important; height: 1px !important; opacity: 0 !important; } .modaal-instagram iframe { opacity: 0; margin: -6px !important; border-radius: 0 !important; width: 1000px !important; max-width: 800px !important; box-shadow: none !important; animation: instaReveal 1s linear forwards; } .modaal-image .modaal-container { width: auto; max-width: 1500px; } .modaal-gallery-wrap { position: relative; color: #fff; } .modaal-gallery-item { display: none; } .modaal-gallery-item img { display: block; } .modaal-gallery-item.is_active { display: block; } .modaal-gallery-label { position: absolute; left: 0; width: 100%; margin: 20px 0 0; font-size: 18px; text-align: center; color: #fff; } .modaal-gallery-control { position: absolute; top: 50%; transform: translateY(-50%); opacity: 1; cursor: pointer; color: #fff; width: 50px; height: 50px; background: transparent; border: none; border-radius: 100%; transition: all 0.2s ease-in-out; } .modaal-gallery-control.is_hidden { opacity: 0; cursor: default; } .modaal-gallery-control:focus, .modaal-gallery-control:hover { background: #fff; } .modaal-gallery-control:focus:before, .modaal-gallery-control:focus:after, .modaal-gallery-control:hover:before, .modaal-gallery-control:hover:after { background: #afb7bc; } .modaal-gallery-control span { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden; } .modaal-gallery-control:before, .modaal-gallery-control:after { display: block; content: " "; position: absolute; top: 16px; left: 25px; width: 4px; height: 18px; border-radius: 4px; background: #fff; transition: background 0.2s ease-in-out; } .modaal-gallery-control:before { margin: -5px 0 0; transform: rotate(-45deg); } .modaal-gallery-control:after { margin: 5px 0 0; transform: rotate(45deg); } .modaal-gallery-next { left: 100%; margin-left: 40px; } .modaal-gallery-prev { right: 100%; margin-right: 40px; } .modaal-gallery-prev:before, .modaal-gallery-prev:after { left: 22px; } .modaal-gallery-prev:before { margin: 5px 0 0; transform: rotate(-45deg); } .modaal-gallery-prev:after { margin: -5px 0 0; transform: rotate(45deg); } .modaal-video-wrap { margin: auto 50px; position: relative; } .modaal-video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); background: #000; max-width: 1300px; margin-left: auto; margin-right: auto; } .modaal-video-container iframe, .modaal-video-container object, .modaal-video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .modaal-iframe .modaal-container { width: auto; max-width: none; } .modaal-iframe-elem { width: 100%; display: block; } @media only screen and (min-width: 1400px) { .modaal-video-container { padding-bottom: 0; height: 731px; } } @media only screen and (max-width: 1140px) { .modaal-gallery-item img { width: 100%; } .modaal-gallery-control { top: auto; bottom: 20px; transform: none; background: rgba(0, 0, 0, 0.7); } .modaal-gallery-control:before, .modaal-gallery-control:after { background: #fff; } .modaal-gallery-next { left: auto; right: 20px; } .modaal-gallery-prev { left: 20px; right: auto; } } @media screen and (max-width: 900px) { .modaal-instagram iframe { width: 500px !important; } } @media screen and (max-height: 1100px) { .modaal-instagram iframe { width: 700px !important; } } @media screen and (max-height: 1000px) { .modaal-inner-wrapper { padding-top: 60px; padding-bottom: 60px; } .modaal-instagram iframe { width: 600px !important; } } @media screen and (max-height: 900px) { .modaal-instagram iframe { width: 500px !important; } .modaal-video-container { max-width: 900px; max-height: 510px; } } @media only screen and (max-width: 600px) { .modaal-instagram iframe { width: 280px !important; } } @media only screen and (max-width: 480px) { .modaal-content-container { padding: 2em 2em; -webkit-transition: padding false false, 0.2s false false, linear false false; -moz-transition: padding false false false, 0.2s false false false, linear false false false; -o-transition: padding false false false, 0.2s false false false, linear false false false; transition: padding 0.2s linear; } .modaal-content-container form input:not([type="checkbox"]) { width: 100%; } .modaal-content-container button { min-width: 15em; width: 100%; } } @media only screen and (max-width: 380px) { .modaal-content-container { padding: 2em 1em; -webkit-transition: padding false false, 0.2s false false, linear false false; -moz-transition: padding false false false, 0.2s false false false, linear false false false; -o-transition: padding false false false, 0.2s false false false, linear false false false; transition: padding 0.2s linear; } } @media only screen and (max-height: 1024px) { .modaal-gallery-item img { width: auto !important; max-height: 85vh; } } @media only screen and (max-height: 820px) { .modaal-gallery-label { display: none; } } .modaal-error { text-align: center; } .is_loading { text-align: center; } .modaal-loading-spinner { background: none; position: absolute; width: 200px; height: 200px; top: 50%; left: 50%; margin: -100px 0 0 -100px; transform: scale(0.25); border: 1px solid red; z-index: 9; } /* =================================== FPO Login */ .fpo-sign-in { position: relative; height: 100%; width: 100%; display: table; } .fpo-sign-in > div { max-width: 500px; width: 100%; display: block; background: #fff; padding: 2em 3em; position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); z-index: 2; } .fpo-sign-in > div button { color: #404040; font-family: Arial, sans-serif; font-weight: 600; background: #ffdd00; text-align: center; font-size: .75rem; font-weight: bold; margin: 0; padding: .875em 2em; cursor: pointer; white-space: nowrap; min-width: 15em; display: block; border: 1px solid #cb0; text-align: center; vertical-align: middle; cursor: pointer; letter-spacing: -.02rem; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-transition: background-color 0.2s linear, border-color 0.2s linear; -moz-transition: background-color 0.2s linear false, border-color 0.2s linear false; -o-transition: background-color 0.2s linear false, border-color 0.2s linear false; transition: background-color 0.2s linear, border-color 0.2s linear; display: block; margin: 2em auto 0 auto; } .fpo-sign-in > div button:after { display: none; } .fpo-sign-in > div button:hover, .fpo-sign-in > div button:focus { color: #404040 !important; background-color: #f0d000; border-color: #cbb000; -webkit-transition: background-color 0.2s ease-in, border-color 0.2s ease-in; -moz-transition: background-color 0.2s ease-in false, border-color 0.2s ease-in false; -o-transition: background-color 0.2s ease-in false, border-color 0.2s ease-in false; transition: background-color 0.2s ease-in, border-color 0.2s ease-in; } .fpo-sign-in > div h1 { font-weight: bold; margin-bottom: 1em; line-height: 1.5; } .fpo-sign-in > div span { font-weight: bold; font-size: 1.5rem; position: absolute; top: 1.375em; left: .25em; color: #666; width: 1.5em; height: 1.5em; text-align: center; line-height: 1.25; } .fpo-sign-in .step { display: none; } .fpo-sign-in .step:first-child { display: block; } .fpo-sign-in label { display: block; text-transform: uppercase; font-size: .875rem; font-weight: bold; } .fpo-sign-in label input { width: 100%; float: left; padding: .5em; font-size: 1rem; border: 1px solid #404040; margin-top: .5em; } .fpo-sign-in label input:focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .fpo-sign-in label input:last-child { margin-bottom: 1em; } .fpo-sign-in label span { float: left; font-size: .75rem; text-align: left; display: table; width: 100%; position: relative; margin-bottom: 1em; } .fpo-sign-in .back { position: absolute; top: 0; right: 0; background: #ffdd00; color: #000; padding: .5em .75em; text-align: center; text-transform: uppercase; font-weight: bold; font-size: .875rem; } .fpo-sign-in #step-1 { display: block; } /* =================================== Media Queries */ @media only screen and (min-width: 960px) { .page:not(.home) .hero { background-position: center 25%; } } @media only screen and (orientation: portrait) { .mobile .mobile-hero-wrap { height: 86vh; } .mobile .mobile-hero-wrap > div { display: table; width: 100%; height: 100%; position: relative; z-index: 2; } .mobile .mobile-hero-wrap > div .hero { min-height: 0 !important; padding-top: 0; height: 100%; width: 100%; display: table; } .mobile .mobile-hero-wrap > div .hero .content { margin-top: -2.5em; } .mobile .mobile-hero-wrap > div .promo { z-index: 3; position: absolute; bottom: 0; left: 0; width: 100%; } } @media only screen and (max-height: 480px) { .mobile-menu .primary-navigation ul { padding-top: 3em; } } @media only screen and (min-width: 769px) { body:not(.mobile).page.home .hero .content { margin-top: 4em; } .article .cta { max-width: 290px; } } @media only screen and (min-width: 768px) and (max-width: 900px) { .call-to-actions h3 { font-size: 1.5rem; -webkit-transition: font-size false false, 0.2s false false, linear false false; -moz-transition: font-size false false false, 0.2s false false false, linear false false false; -o-transition: font-size false false false, 0.2s false false false, linear false false false; transition: font-size 0.2s linear; } } .primary-navigation .menu li:first-of-type { visibility: hidden; margin: -1px; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); position: absolute; } @media only screen and (min-width: 901px) { .menu-toggle { display: none; visibility: hidden; } .tabs .tabpanel .has-thumb { padding-left: 8em; } .back-to-top { margin: -1px; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); position: absolute; } } @media only screen and (max-width: 960px) { .hero.video .bkgnd-img button { height: 10em; width: 10em; -webkit-transition: height 0.1s linear, width 0.1s linear; -moz-transition: height 0.1s linear false, width 0.1s linear false; -o-transition: height 0.1s linear false, width 0.1s linear false; transition: height 0.1s linear, width 0.1s linear; } .hero.video .bkgnd-img button:before { height: 5em; width: 5em; -webkit-transition: height 0.1s linear, width 0.1s linear; -moz-transition: height 0.1s linear false, width 0.1s linear false; -o-transition: height 0.1s linear false, width 0.1s linear false; transition: height 0.1s linear, width 0.1s linear; } } @media only screen and (max-width: 900px) { .menu-toggle { display: block; visibility: visible; } .menu-wrap { width: 100%; position: fixed; top: 0; left: 0; z-index: 5; height: 100vh; overflow-x: hidden; overflow-y: scroll; visibility: hidden; -webkit-transition: all false false, 0.2s false false, linear false false; -moz-transition: all false false false, 0.2s false false false, linear false false false; -o-transition: all false false false, 0.2s false false false, linear false false false; transition: all 0.2s linear; } .mobile-menu { overflow: hidden; position: fixed; width: 100%; display: table; } .mobile-menu .menu-wrap { visibility: visible; -webkit-transition: all false false, 0.3s false false, ease-in-out false false; -moz-transition: all false false false, 0.3s false false false, ease-in-out false false false; -o-transition: all false false false, 0.3s false false false, ease-in-out false false false; transition: all 0.3s ease-in-out; } .mobile-menu .primary-navigation ul { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.2s linear, -webkit-transform 0.3s ease-in; -moz-transition: opacity 0.2s linear false, -moz-transform 0.3s ease-in false; -o-transition: opacity 0.2s linear false, -o-transform 0.3s ease-in false; transition: opacity 0.2s linear, transform 0.3s ease-in; } .mobile-menu #header .mobile-overlay { visibility: visible; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90); opacity: 0.9; -webkit-transition: opacity false false, 0.2s false false, ease-in-out false false; -moz-transition: opacity false false false, 0.2s false false false, ease-in-out false false false; -o-transition: opacity false false false, 0.2s false false false, ease-in-out false false false; transition: opacity 0.2s ease-in-out; } .primary-navigation > div { position: absolute; z-index: 5; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .primary-navigation > div > ul { width: 100%; } .primary-navigation > div > ul li.menu-item-has-children:after { display: none; } .primary-navigation > div > ul li.menu-item-has-children a { padding-right: 0; } .primary-navigation > div > ul li.menu-item-has-children a ~ ul { display: none; } .primary-navigation ul { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transform: translateY(2em); -moz-transform: translateY(2em); -ms-transform: translateY(2em); -o-transform: translateY(2em); transform: translateY(2em); -webkit-transition: opacity 0.1s linear, -webkit-transform 0.2s linear; -moz-transition: opacity 0.1s linear false, -moz-transform 0.2s linear false; -o-transition: opacity 0.1s linear false, -o-transform 0.2s linear false; transition: opacity 0.1s linear, transform 0.2s linear; } .primary-navigation ul li { display: table; width: 100%; text-align: center; } .primary-navigation ul li:last-child a { padding-right: 1em 0.25em; } .primary-navigation ul li a { font-size: 1rem; padding: 1em .25em; overflow: hidden; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform false false, 0.2s false false, ease-in false false; -moz-transition: -moz-transform false false false, 0.2s false false false, ease-in false false false; -o-transition: -o-transform false false false, 0.2s false false false, ease-in false false false; transition: transform 0.2s ease-in; } .primary-navigation ul li a:hover, .primary-navigation ul li a:active { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); -webkit-transition: -webkit-transform false false, 0.2s false false, ease-in false false; -moz-transition: -moz-transform false false false, 0.2s false false false, ease-in false false false; -o-transition: -o-transform false false false, 0.2s false false false, ease-in false false false; transition: transform 0.2s ease-in; } .article.excerpt .col2 { width: 45%; } .article.excerpt .col2.thumb { width: 55%; } } @media only screen and (max-width: 768px) { #header, .hero, #footer { padding-left: 2em; padding-right: 2em; -webkit-transition: padding false false, 0.2s false false, linear false false; -moz-transition: padding false false false, 0.2s false false false, linear false false false; -o-transition: padding false false false, 0.2s false false false, linear false false false; transition: padding 0.2s linear; } .page.home #header { position: relative; } .page.home .hero { min-height: 20em; padding-top: 5em; -webkit-transition: min-height false false, 0.2s false false, linear false false; -moz-transition: min-height false false false, 0.2s false false false, linear false false false; -o-transition: min-height false false false, 0.2s false false false, linear false false false; transition: min-height 0.2s linear; } .page.home .hero > div:not(.bkgnd-img) { padding: 0 2em; } .page.home .hero > div:not(.bkgnd-img) h1 { font-size: 2.2rem; } .page.home .hero > div:not(.bkgnd-img) p { font-size: 1.125rem; line-height: 1.375; } .page.home .hero > div:not(.bkgnd-img) p span { display: inline; } .page.home #header:after { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } .page:not(.home) .hero { min-height: 8em; background-position: center 21%; -webkit-transition: height false false, 0.1s false false, linear false false; -moz-transition: height false false false, 0.1s false false false, linear false false false; -o-transition: height false false false, 0.1s false false false, linear false false false; transition: height 0.1s linear; } .page:not(.home) .hero > div { min-height: 8em; -webkit-transition: height false false, 0.1s false false, linear false false; -moz-transition: height false false false, 0.1s false false false, linear false false false; -o-transition: height false false false, 0.1s false false false, linear false false false; transition: height 0.1s linear; } .page:not(.home) .hero > div h1 { font-size: 2.25rem; } .hero.video .vjs-big-play-button, .hero.video .bkgnd-img button { height: 6em; width: 6em; -webkit-transition: height 0.1s linear, width 0.1s linear; -moz-transition: height 0.1s linear false, width 0.1s linear false; -o-transition: height 0.1s linear false, width 0.1s linear false; transition: height 0.1s linear, width 0.1s linear; } .hero.video .vjs-big-play-button:before, .hero.video .bkgnd-img button:before { left: 36%; height: 2em; width: 2em; -webkit-transition: height 0.1s linear, width 0.1s linear; -moz-transition: height 0.1s linear false, width 0.1s linear false; -o-transition: height 0.1s linear false, width 0.1s linear false; transition: height 0.1s linear, width 0.1s linear; } .hero.video .flag { width: 18em; } .call-to-actions h3 { font-size: 1.675rem; line-height: 1.1; } .call-to-actions .col1-3 { min-height: 17em; } .promo { padding: 1.25em 2em 1.75em 2em; } .promo h2 { display: block; margin: 0 0 .5em 0; } .inpage-hero { min-height: 32em; -webkit-transition: all false false, 0.2s false false, linear false false; -moz-transition: all false false false, 0.2s false false false, linear false false false; -o-transition: all false false false, 0.2s false false false, linear false false false; transition: all 0.2s linear; } .inpage-hero h1, .inpage-hero h2, .inpage-hero h3, .inpage-hero h4, .inpage-hero h5, .inpage-hero h6 { font-size: 1.75rem; } .inpage-hero p { font-size: 1.25rem; } main > section.article { padding-left: 0; padding-right: 0; } main > section.article .hero.video { margin: 2em 2em 2.5em 2em; } main > section.article .article-title { padding-left: 2em; padding-right: 2em; } main > section.article .article-meta { padding-left: 2em; padding-right: 2em; } .article.excerpt { padding-left: 2em; padding-right: 2em; } .article.excerpt .col2, .article.excerpt .col2.thumb { width: 100%; padding: 0; -webkit-transition: width 0.1s linear, padding 0.1s linear; -moz-transition: width 0.1s linear false, padding 0.1s linear false; -o-transition: width 0.1s linear false, padding 0.1s linear false; transition: width 0.1s linear, padding 0.1s linear; } .article.excerpt .col2.thumb { margin-bottom: .5em; } .article header h1 { font-size: 1.75rem; } .article header h2 { font-size: 1.25rem; } .article header p { font-size: .875rem; } .article .article-meta { margin-bottom: 0; } .article .product-meta { padding-bottom: 1.25em; } .article .content { padding: 0 0 120px 0; } .article .cta { max-width: 100%; padding: 1em 2em; width: 100%; } .article .thumb a img { margin-bottom: .5em; } .posts.expired-posts h3 { font-size: 1.75rem; } .sharing { position: relative; padding: 1em 2em 0 2em; } .status { font-size: .875rem; } .posts .article { padding: 2em; } .posts .article:first-child { padding-top: 2.5em; } .single .article header p { padding: 0 2.25em; } .single .more-posts { margin-top: 0; border-top: none; padding-top: 2em; } .notification { padding: 1em 4em; } .notification > div { padding-top: .125em; } .notification p { font-size: .875rem; } .access-block { padding: 0; -webkit-transition: padding false false, 0.2s false false, linear false false; -moz-transition: padding false false false, 0.2s false false false, linear false false false; -o-transition: padding false false false, 0.2s false false false, linear false false false; transition: padding 0.2s linear; } .access-block > div { padding: 1.5em 1.5em 2em 1.5em; max-width: inherit; width: 100%; margin: 0 auto; display: table; } .access-block > div dl { max-width: 22.25em; margin: 0 auto; } .access-block > div dl dd.sale { display: inline-block; } .access-block > div dl dd.sale span { display: inline-block; margin-bottom: .5em; } .access-block > div div:last-of-type { max-width: 22.25em; margin: 0 auto; } .access-block .cta { max-width: 30em; margin: 0 auto; display: block; } .access-block.full-access dl dt span { display: inline-block; } .access-block.no-price dl dd { font-size: 1.25rem; line-height: 1.1; } .access-block.no-price dl dd span { display: inline-block; } .tabs { padding-right: 0; width: 100%; } .tabs .tablist { padding: 1.5em 2em 0 1.675em; } .tabs .tabpanel { min-height: 0; padding: 1.5em 1.5em 1em 1.5em; } .tabs .tabpanel > div { padding-left: 0; padding-right: 0; } .tabs .tabpanel .headshot { position: absolute; top: 4.75em; left: 2em; float: none; margin: 0; } .home .side-article { background-position: 40% center; -webkit-transition: background-position false false, 0.2s false false, linear false false; -moz-transition: background-position false false false, 0.2s false false false, linear false false false; -o-transition: background-position false false false, 0.2s false false false, linear false false false; transition: background-position 0.2s linear; } .home .side-article .row .col2 { margin-right: 0; padding: 4em 2em; } .call-to-actions .col1-3 { min-height: 15em; -webkit-transition: all false false, 0.2s false false, linear false false; -moz-transition: all false false false, 0.2s false false false, linear false false false; -o-transition: all false false false, 0.2s false false false, linear false false false; transition: all 0.2s linear; } .more-posts h3 { font-size: 1.875rem; } .more-posts .row { padding: 2em 0 0 0; display: -webkit-block; display: block; } .more-posts .article { margin: 0 0 2.5em 0; } .more-posts .article:last-child { margin-bottom: 0; } .more-posts .thumb { margin-bottom: .75em; } main > section.article { padding: 0 0 0 0; } main > section.article .tabs .tab-content { padding: 0; } main > section.article .tabs .tab-content:last-child button { border-bottom: 1px solid rgba(0, 0, 0, 0.2); } main > section.article .thumb { padding: 0; } .side-article .side-article-logo { height: 5em; } #footer { padding-top: 2.25em; padding-bottom: 2.25em; } #footer .row > a { height: 4.5em; width: 4.5em; position: relative; top: 0; left: 0; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); margin: 0 auto; } #footer .row > span { position: relative; left: 0; bottom: 0; width: 100%; text-align: center; display: block; font-size: .875rem; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); opacity: 0.6; } .footer-navigation { width: 100%; padding: 1.5em 0 2em 0; position: relative; z-index: 4; } .footer-navigation li { display: block; width: 100%; text-align: center; margin: 0 0 1em 0; } .footer-navigation li:last-child { margin-bottom: 0; } .footer-navigation li a { font-size: .875rem; } .modaal-content-container button ~ .small, .modaal-content-container .button ~ .small { font-size: .75rem; } } @media only screen and (max-width: 600px) { .access-block { padding: 0; -webkit-transition: padding false false, 0.2s false false, linear false false; -moz-transition: padding false false false, 0.2s false false false, linear false false false; -o-transition: padding false false false, 0.2s false false false, linear false false false; transition: padding 0.2s linear; } .hero.video .bkgnd-img button { height: 7.5em; width: 7.5em; -webkit-transition: height 0.1s linear, width 0.1s linear; -moz-transition: height 0.1s linear false, width 0.1s linear false; -o-transition: height 0.1s linear false, width 0.1s linear false; transition: height 0.1s linear, width 0.1s linear; } .hero.video .bkgnd-img button:before { height: 3.25em; width: 3.25em; -webkit-transition: height 0.1s linear, width 0.1s linear; -moz-transition: height 0.1s linear false, width 0.1s linear false; -o-transition: height 0.1s linear false, width 0.1s linear false; transition: height 0.1s linear, width 0.1s linear; } .notification.success p span:first-child { display: block; padding-left: 0; } .notification.success p span:first-child:before { position: relative; margin-right: .375em; font-size: .875rem; } .tabs .tabpanel .headshot { position: relative; top: 0; left: 0; float: left; margin: 2em 1.5em .5em 2em; } } @media only screen and (max-width: 480px) { #header #branding { width: 15em; -webkit-transition: all false false, 0.2s false false, linear false false; -moz-transition: all false false false, 0.2s false false false, linear false false false; -o-transition: all false false false, 0.2s false false false, linear false false false; transition: all 0.2s linear; } .hero.video .bkgnd-img button, .hero.video .vjs-big-play-button { height: 4em; width: 4em; -webkit-transition: height 0.1s linear, width 0.1s linear; -moz-transition: height 0.1s linear false, width 0.1s linear false; -o-transition: height 0.1s linear false, width 0.1s linear false; transition: height 0.1s linear, width 0.1s linear; } .hero.video .bkgnd-img button:before, .hero.video .vjs-big-play-button:before { left: 38%; height: 1.25em; width: 1.25em; -webkit-transition: height 0.1s linear, width 0.1s linear; -moz-transition: height 0.1s linear false, width 0.1s linear false; -o-transition: height 0.1s linear false, width 0.1s linear false; transition: height 0.1s linear, width 0.1s linear; } .call-to-actions h3 { font-size: 1.375rem; } .home .side-article .row .col2 { padding: 4em 2em; } .side-article h1, .side-article h2, .side-article h3, .side-article h4, .side-article h5, .side-article h6 { font-size: 1.375rem; } .promo a { width: 100%; } .call-to-actions .col1-3 { min-height: 13em; -webkit-transition: all false false, 0.2s false false, linear false false; -moz-transition: all false false false, 0.2s false false false, linear false false false; -o-transition: all false false false, 0.2s false false false, linear false false false; transition: all 0.2s linear; } .access-block > div dl { width: 100%; max-width: 100%; } .access-block > div div:last-of-type { max-width: 100%; } .access-block .cta { width: 100%; max-width: inherit; } .access-block .cta.alt { float: left; display: inline-block; } .access-block.full-access dl dt { font-size: 1.5rem; } .tabs .tablist { border: none; padding: 0; } .tabs .tablist .tab { border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding: 1.5em 2em 1.25em 2em; text-align: left; width: 100%; } .tabs .tablist .tab:after { display: none; } .tabs .tablist .tab i { position: absolute; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 2em; height: 2em; width: 2em; display: block; text-align: center; line-height: 1; font-style: normal; } .tabs .tablist .tab i:before { content: '\002B'; font-family: "SSStandard"; position: absolute; padding-top: .45em; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .tabs .tablist .tab[aria-selected="true"] i:before { content: '\002D'; font-family: "SSStandard"; } .footer-navigation li a { font-size: .75rem; } } @media only screen and (min-width: 481px) and (max-width: 900px) { .tabs .tabpanel .headshot { float: left; margin: 0 1.5em 1em 0; position: relative !important; top: 0; left: 0; } } @media only screen and (min-width: 1200px) and (max-width: 1400px) { .inpage-hero .row > div { padding: 0 36em 0 13em; } .inpage-hero .left-image { left: -4%; -webkit-transition: left false false, 0.1s false false, linear false false; -moz-transition: left false false false, 0.1s false false false, linear false false false; -o-transition: left false false false, 0.1s false false false, linear false false false; transition: left 0.1s linear; } .inpage-hero .right-image { right: -10%; -webkit-transition: right false false, 0.1s false false, linear false false; -moz-transition: right false false false, 0.1s false false false, linear false false false; -o-transition: right false false false, 0.1s false false false, linear false false false; transition: right 0.1s linear; } } @media only screen and (min-width: 960px) and (max-width: 1200px) { .home .side-article { background-position: 50% center; -webkit-transition: background-position false false, 0.2s false false, linear false false; -moz-transition: background-position false false false, 0.2s false false false, linear false false false; -o-transition: background-position false false false, 0.2s false false false, linear false false false; transition: background-position 0.2s linear; } .home .side-article .row .col2 { width: 55%; } } @media only screen and (min-width: 1100px) and (max-width: 1200px) { .inpage-hero .row > div { padding: 0 26em 0 13em; } .inpage-hero .left-image { width: 195px; height: 320px; left: -4%; -webkit-transition: all false false, 0.1s false false, linear false false; -moz-transition: all false false false, 0.1s false false false, linear false false false; -o-transition: all false false false, 0.1s false false false, linear false false false; transition: all 0.1s linear; } .inpage-hero .right-image { width: 570px; height: 390px; right: -20%; -webkit-transition: all false false, 0.1s false false, linear false false; -moz-transition: all false false false, 0.1s false false false, linear false false false; -o-transition: all false false false, 0.1s false false false, linear false false false; transition: all 0.1s linear; } } @media only screen and (min-width: 960px) and (max-width: 1100px) { .inpage-hero .row > div { padding: 0 21em 0 11em; } .inpage-hero .left-image { width: 175px; height: 300px; left: -4%; -webkit-transition: all false false, 0.1s false false, linear false false; -moz-transition: all false false false, 0.1s false false false, linear false false false; -o-transition: all false false false, 0.1s false false false, linear false false false; transition: all 0.1s linear; } .inpage-hero .right-image { width: 480px; height: 370px; right: -19%; -webkit-transition: all false false, 0.1s false false, linear false false; -moz-transition: all false false false, 0.1s false false false, linear false false false; -o-transition: all false false false, 0.1s false false false, linear false false false; transition: all 0.1s linear; } } @media only screen and (min-width: 901px) and (max-width: 960px) { .home .side-article { background-position: 50% center; -webkit-transition: background-position false false, 0.2s false false, linear false false; -moz-transition: background-position false false false, 0.2s false false false, linear false false false; -o-transition: background-position false false false, 0.2s false false false, linear false false false; transition: background-position 0.2s linear; } .home .side-article .row .col2 { width: 60%; margin-right: 0; } .inpage-hero .row > div { padding: 0 18em 0 7.5em; } .inpage-hero .left-image { width: 175px; height: 300px; left: -6%; -webkit-transition: all false false, 0.1s false false, linear false false; -moz-transition: all false false false, 0.1s false false false, linear false false false; -o-transition: all false false false, 0.1s false false false, linear false false false; transition: all 0.1s linear; } .inpage-hero .right-image { width: 480px; height: 370px; right: -22%; -webkit-transition: all false false, 0.1s false false, linear false false; -moz-transition: all false false false, 0.1s false false false, linear false false false; -o-transition: all false false false, 0.1s false false false, linear false false false; transition: all 0.1s linear; } } @media only screen and (min-width: 768px) and (max-width: 900px) { .home .side-article { background-position: 50% center; -webkit-transition: background-position false false, 0.2s false false, linear false false; -moz-transition: background-position false false false, 0.2s false false false, linear false false false; -o-transition: background-position false false false, 0.2s false false false, linear false false false; transition: background-position 0.2s linear; } .home .side-article .row .col2 { width: 60%; margin-right: 0; } .inpage-hero .row > div { padding: 0 14.5em 0 5.5em; } .inpage-hero .left-image { width: 135px; height: 260px; left: -7%; -webkit-transition: all false false, 0.1s false false, linear false false; -moz-transition: all false false false, 0.1s false false false, linear false false false; -o-transition: all false false false, 0.1s false false false, linear false false false; transition: all 0.1s linear; } .inpage-hero .right-image { width: 410px; height: 290px; right: -24%; -webkit-transition: all false false, 0.1s false false, linear false false; -moz-transition: all false false false, 0.1s false false false, linear false false false; -o-transition: all false false false, 0.1s false false false, linear false false false; transition: all 0.1s linear; } } @media only screen and (min-width: 700px) and (max-width: 768px) { .inpage-hero { min-height: 25em; } .inpage-hero .row > div { padding: 0 15.5em 0 6em; } .inpage-hero .left-image { width: 135px; height: 260px; left: -6%; -webkit-transition: all false false, 0.1s false false, linear false false; -moz-transition: all false false false, 0.1s false false false, linear false false false; -o-transition: all false false false, 0.1s false false false, linear false false false; transition: all 0.1s linear; } .inpage-hero .right-image { width: 410px; height: 290px; right: -22%; -webkit-transition: all false false, 0.1s false false, linear false false; -moz-transition: all false false false, 0.1s false false false, linear false false false; -o-transition: all false false false, 0.1s false false false, linear false false false; transition: all 0.1s linear; } } @media only screen and (min-width: 650px) and (max-width: 700px) { .inpage-hero { min-height: 25em; -webkit-transition: height false false, 0.2s false false, linear false false; -moz-transition: height false false false, 0.2s false false false, linear false false false; -o-transition: height false false false, 0.2s false false false, linear false false false; transition: height 0.2s linear; } .inpage-hero .row > div { padding: 0 15.5em 0 5.25em; } .inpage-hero .left-image { width: 135px; height: 260px; left: -8%; -webkit-transition: all false false, 0.1s false false, linear false false; -moz-transition: all false false false, 0.1s false false false, linear false false false; -o-transition: all false false false, 0.1s false false false, linear false false false; transition: all 0.1s linear; } .inpage-hero .right-image { width: 410px; height: 290px; right: -26%; -webkit-transition: all false false, 0.1s false false, linear false false; -moz-transition: all false false false, 0.1s false false false, linear false false false; -o-transition: all false false false, 0.1s false false false, linear false false false; transition: all 0.1s linear; } } @media only screen and (min-width: 500px) and (max-width: 650px) { .inpage-hero { min-height: 33em; -webkit-transition: height false false, 0.2s false false, linear false false; -moz-transition: height false false false, 0.2s false false false, linear false false false; -o-transition: height false false false, 0.2s false false false, linear false false false; transition: height 0.2s linear; } .inpage-hero .row { position: relative; top: 0; left: 0; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .inpage-hero .row > div { padding: 1.75em 0 1em 0; } .inpage-hero .left-image { top: 70%; width: 155px; height: 255px; left: -2em; -webkit-transition: all false false, 0.1s false false, linear false false; -moz-transition: all false false false, 0.1s false false false, linear false false false; -o-transition: all false false false, 0.1s false false false, linear false false false; transition: all 0.1s linear; } .inpage-hero .right-image { top: 68%; width: 430px; height: 300px; right: -6em; -webkit-transition: all false false, 0.1s false false, linear false false; -moz-transition: all false false false, 0.1s false false false, linear false false false; -o-transition: all false false false, 0.1s false false false, linear false false false; transition: all 0.1s linear; } } @media only screen and (min-width: 480px) and (max-width: 500px) { .inpage-hero { min-height: 33em; -webkit-transition: height false false, 0.2s false false, linear false false; -moz-transition: height false false false, 0.2s false false false, linear false false false; -o-transition: height false false false, 0.2s false false false, linear false false false; transition: height 0.2s linear; } .inpage-hero .row { position: relative; top: 0; left: 0; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .inpage-hero .row > div { padding: 1.75em 0 1em 0; } .inpage-hero .left-image { top: 70%; width: 155px; height: 255px; left: -3em; -webkit-transition: all false false, 0.1s false false, linear false false; -moz-transition: all false false false, 0.1s false false false, linear false false false; -o-transition: all false false false, 0.1s false false false, linear false false false; transition: all 0.1s linear; } .inpage-hero .right-image { top: 68%; width: 430px; height: 300px; right: -11em; -webkit-transition: all false false, 0.1s false false, linear false false; -moz-transition: all false false false, 0.1s false false false, linear false false false; -o-transition: all false false false, 0.1s false false false, linear false false false; transition: all 0.1s linear; } } @media only screen and (min-width: 350px) and (max-width: 480px) { .inpage-hero { min-height: 33em; -webkit-transition: height false false, 0.2s false false, linear false false; -moz-transition: height false false false, 0.2s false false false, linear false false false; -o-transition: height false false false, 0.2s false false false, linear false false false; transition: height 0.2s linear; } .inpage-hero .row { position: relative; top: 0; left: 0; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .inpage-hero .row > div { padding: 1.75em 0 1em 0; } .inpage-hero .left-image { top: 70%; width: 155px; height: 255px; left: -4em; -webkit-transition: all false false, 0.1s false false, linear false false; -moz-transition: all false false false, 0.1s false false false, linear false false false; -o-transition: all false false false, 0.1s false false false, linear false false false; transition: all 0.1s linear; } .inpage-hero .right-image { top: 68%; width: 430px; height: 300px; right: -12em; -webkit-transition: all false false, 0.1s false false, linear false false; -moz-transition: all false false false, 0.1s false false false, linear false false false; -o-transition: all false false false, 0.1s false false false, linear false false false; transition: all 0.1s linear; } } @media only screen and (max-width: 350px) { #header { padding-left: 1em; padding-right: 1em; } #header #branding { width: 14em; margin-top: .125em; } .menu-toggle { height: 20px; width: 23px; } .menu-toggle span:not(:first-child) { height: .25em; } .menu-toggle span:nth-child(3) { top: 9px; } .menu-toggle span:nth-child(4) { top: 9px; } .menu-toggle span:nth-child(5) { top: 18px; } .inpage-hero { min-height: 33em; -webkit-transition: height false false, 0.2s false false, linear false false; -moz-transition: height false false false, 0.2s false false false, linear false false false; -o-transition: height false false false, 0.2s false false false, linear false false false; transition: height 0.2s linear; } .inpage-hero .row { position: relative; top: 0; left: 0; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .inpage-hero .row > div { padding: 1.75em 0 1em 0; } .inpage-hero .left-image { top: 70.5%; width: 125px; height: 235px; left: -4em; -webkit-transition: all false false, 0.1s false false, linear false false; -moz-transition: all false false false, 0.1s false false false, linear false false false; -o-transition: all false false false, 0.1s false false false, linear false false false; transition: all 0.1s linear; } .inpage-hero .right-image { top: 68%; width: 410px; height: 270px; right: -11em; -webkit-transition: all false false, 0.1s false false, linear false false; -moz-transition: all false false false, 0.1s false false false, linear false false false; -o-transition: all false false false, 0.1s false false false, linear false false false; transition: all 0.1s linear; } .promo a { min-width: 15em; } } @media only screen and (max-width: 480px) { #header, .hero, .page.home .hero > div:not(.bkgnd-img), .promo, .home .side-article .row .col2, .posts .article, main > section.article .article-title, .single .article header p, .sharing, .tabs > div > div, .more-posts, #footer { padding-left: 1em; padding-right: 1em; } main > section.article .hero.video { margin: 1.75em 1em 1.75em 1em; } .hero.video .flag { width: 15em; } .inpage-hero .cta { width: 100%; } .hero .bkgnd-img { background-position: 35% 0; } .tabs > div > button:first-of-type { padding-left: 1em; } .posts .article:first-child { padding-top: 1.75em; } .page:not(.home) .hero > div h1 { font-size: 2rem; } .notification { padding: 1em 2em; } .notification button { right: -2em; } .tabs .tabpanel .headshot { width: 125px; height: auto; display: block; margin: .5em auto 1.5em auto; float: none; position: relative; } .modaal-content-container h3.exit, .modaal-content-container .title.exit { font-size: 1.15rem; } .modaal-content-container h3, .modaal-content-container .title { font-size: 1.375rem; line-height: 1.1; } } html:hover [class^="ss-"] { -ms-zoom: 1; } .ss-icon, .ss-icon.ss-social-circle, [class^="ss-"]:before, [class*=" ss-"]:before, [class^="ss-"].ss-social-circle:before, [class*=" ss-"].ss-social-circle:before, [class^="ss-"].right:after, [class*=" ss-"].right:after, [class^="ss-"].ss-social-circle.right:after, [class*=" ss-"].ss-social-circle.right:after { font-family: "SSSocialCircle"; font-style: normal; font-weight: normal; text-decoration: none; text-rendering: optimizeLegibility; white-space: nowrap; /*-webkit-font-feature-settings: "liga"; Currently broken in Chrome >= v22. Falls back to text-rendering. Safari is unaffected. */ -moz-font-feature-settings: "liga=1"; -moz-font-feature-settings: "liga"; -ms-font-feature-settings: "liga" 1; -o-font-feature-settings: "liga"; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; } [class^="ss-"].right:before, [class*=" ss-"].right:before { display: none; content: ''; } .ss-facebook:before, .ss-facebook.right:after { content: ''; } .ss-twitter:before, .ss-twitter.right:after { content: ''; } .ss-linkedin:before, .ss-linkedin.right:after { content: ''; } .ss-googleplus:before, .ss-googleplus.right:after { content: ''; } .ss-appdotnet:before, .ss-appdotnet.right:after { content: ''; } .ss-zerply:before, .ss-zerply.right:after { content: ''; } .ss-reddit:before, .ss-reddit.right:after { content: ''; } .ss-steam:before, .ss-steam.right:after { content: ''; } .ss-tumblr:before, .ss-tumblr.right:after { content: 'ï˜ '; } .ss-wordpress:before, .ss-wordpress.right:after { content: ''; } .ss-blogger:before, .ss-blogger.right:after { content: ''; } .ss-posterous:before, .ss-posterous.right:after { content: ''; } .ss-quora:before, .ss-quora.right:after { content: ''; } .ss-youtube:before, .ss-youtube.right:after { content: ''; } .ss-vimeo:before, .ss-vimeo.right:after { content: ''; } .ss-vine:before, .ss-vine.right:after { content: ''; } .ss-letterboxd:before, .ss-letterboxd.right:after { content: ''; } .ss-flickr:before, .ss-flickr.right:after { content: ''; } .ss-instagram:before, .ss-instagram.right:after { content: ''; } .ss-500px:before, .ss-500px.right:after { content: ''; } .ss-etsy:before, .ss-etsy.right:after { content: 'ïš‚'; } .ss-pinterest:before, .ss-pinterest.right:after { content: ''; } .ss-svpply:before, .ss-svpply.right:after { content: ''; } .ss-readmill:before, .ss-readmill.right:after { content: 'ï™’'; } .ss-dropbox:before, .ss-dropbox.right:after { content: ''; } .ss-pinboard:before, .ss-pinboard.right:after { content: 'ï™”'; } .ss-delicious:before, .ss-delicious.right:after { content: ''; } .ss-dribbble:before, .ss-dribbble.right:after { content: 'ï™ '; } .ss-behance:before, .ss-behance.right:after { content: ''; } .ss-github:before, .ss-github.right:after { content: 'ï™°'; } .ss-octocat:before, .ss-octocat.right:after { content: 'ï™±'; } .ss-stackoverflow:before, .ss-stackoverflow.right:after { content: ''; } .ss-paypal:before, .ss-paypal.right:after { content: ''; } .ss-kickstarter:before, .ss-kickstarter.right:after { content: ''; } .ss-foursquare:before, .ss-foursquare.right:after { content: ''; } .ss-yelp:before, .ss-yelp.right:after { content: 'ïš‘'; } .ss-skype:before, .ss-skype.right:after { content: 'ïš '; } .ss-rdio:before, .ss-rdio.right:after { content: 'ïš°'; } .ss-spotify:before, .ss-spotify.right:after { content: 'ïš±'; } .ss-lastfm:before, .ss-lastfm.right:after { content: 'ïš²'; } .ss-soundcloud:before, .ss-soundcloud.right:after { content: 'ïš³'; } .ss-link:before, .ss-link.right:after { content: '🔗'; } .ss-phone:before, .ss-phone.right:after { content: '📞'; } .ss-mail:before, .ss-mail.right:after { content: '✉'; } .ss-like:before, .ss-like.right:after { content: '👍'; } .ss-rss:before, .ss-rss.right:after { content: ''; } .ss-share:before, .ss-share.right:after { content: ''; } .ss-apple:before, .ss-apple.right:after { content: ''; } .ss-microsoft:before, .ss-microsoft.right:after { content: 'ï›±'; } .ss-windows:before, .ss-windows.right:after { content: ''; } .ss-android:before, .ss-android.right:after { content: ''; } .ss-blackberry:before, .ss-blackberry.right:after { content: 'ï›´'; } .ss-fivehundredpx:before, .ss-fivehundredpx.right:after { content: ''; } /* Symbolset www.symbolset.com Copyright © 2012 Oak Studios LLC Upload this file to your web server and place this within your tags. */ /* This triggers a redraw in IE to Fix IE8's :before content rendering. */ html:hover [class^="ss-"] { -ms-zoom: 1; } .ss-icon, .ss-icon.ss-standard, [class^="ss-"]:before, [class*=" ss-"]:before, [class^="ss-"].ss-standard:before, [class*=" ss-"].ss-standard:before, [class^="ss-"].right:after, [class*=" ss-"].right:after, [class^="ss-"].ss-standard.right:after, [class*=" ss-"].ss-standard.right:after { font-family: "SSStandard"; font-style: normal; font-weight: normal; text-decoration: none; text-rendering: optimizeLegibility; white-space: nowrap; /*-webkit-font-feature-settings: "liga"; Currently broken in Chrome >= v22. Falls back to text-rendering. Safari is unaffected. */ -moz-font-feature-settings: "liga=1"; -moz-font-feature-settings: "liga"; -ms-font-feature-settings: "liga" 1; -o-font-feature-settings: "liga"; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; } [class^="ss-"].right:before, [class*=" ss-"].right:before { display: none; content: ''; } .ss-cursor:before, .ss-cursor.right:after { content: ''; } .ss-crosshair:before, .ss-crosshair.right:after { content: '⌖'; } .ss-search:before, .ss-search.right:after { content: '🔎'; } .ss-zoomin:before, .ss-zoomin.right:after { content: ''; } .ss-zoomout:before, .ss-zoomout.right:after { content: ''; } .ss-view:before, .ss-view.right:after { content: '👀'; } .ss-attach:before, .ss-attach.right:after { content: '📎'; } .ss-link:before, .ss-link.right:after { content: '🔗'; } .ss-move:before, .ss-move.right:after { content: ''; } .ss-write:before, .ss-write.right:after { content: '✎'; } .ss-writingdisabled:before, .ss-writingdisabled.right:after { content: ''; } .ss-erase:before, .ss-erase.right:after { content: '✐'; } .ss-compose:before, .ss-compose.right:after { content: '📝'; } .ss-lock:before, .ss-lock.right:after { content: '🔒'; } .ss-unlock:before, .ss-unlock.right:after { content: '🔓'; } .ss-key:before, .ss-key.right:after { content: '🔑'; } .ss-backspace:before, .ss-backspace.right:after { content: '⌫'; } .ss-ban:before, .ss-ban.right:after { content: '🚫'; } .ss-trash:before, .ss-trash.right:after { content: ''; } .ss-target:before, .ss-target.right:after { content: 'â—Ž'; } .ss-tag:before, .ss-tag.right:after { content: 'î„€'; } .ss-bookmark:before, .ss-bookmark.right:after { content: '🔖'; } .ss-flag:before, .ss-flag.right:after { content: 'âš‘'; } .ss-like:before, .ss-like.right:after { content: '👍'; } .ss-dislike:before, .ss-dislike.right:after { content: '👎'; } .ss-heart:before, .ss-heart.right:after { content: '♥'; } .ss-halfheart:before, .ss-halfheart.right:after { content: 'î† '; } .ss-star:before, .ss-star.right:after { content: '⋆'; } .ss-halfstar:before, .ss-halfstar.right:after { content: ''; } .ss-sample:before, .ss-sample.right:after { content: ''; } .ss-crop:before, .ss-crop.right:after { content: ''; } .ss-layers:before, .ss-layers.right:after { content: ''; } .ss-fill:before, .ss-fill.right:after { content: ''; } .ss-stroke:before, .ss-stroke.right:after { content: ''; } .ss-phone:before, .ss-phone.right:after { content: '📞'; } .ss-phonedisabled:before, .ss-phonedisabled.right:after { content: ''; } .ss-rss:before, .ss-rss.right:after { content: ''; } .ss-facetime:before, .ss-facetime.right:after { content: 'îŒ '; } .ss-reply:before, .ss-reply.right:after { content: '↩'; } .ss-send:before, .ss-send.right:after { content: ''; } .ss-mail:before, .ss-mail.right:after { content: '✉'; } .ss-inbox:before, .ss-inbox.right:after { content: '📥'; } .ss-chat:before, .ss-chat.right:after { content: '💬'; } .ss-ellipsischat:before, .ss-ellipsischat.right:after { content: ''; } .ss-ellipsis:before, .ss-ellipsis.right:after { content: '…'; } .ss-user:before, .ss-user.right:after { content: '👤'; } .ss-femaleuser:before, .ss-femaleuser.right:after { content: '👧'; } .ss-users:before, .ss-users.right:after { content: '👥'; } .ss-cart:before, .ss-cart.right:after { content: ''; } .ss-creditcard:before, .ss-creditcard.right:after { content: '💳'; } .ss-dollarsign:before, .ss-dollarsign.right:after { content: '💲'; } .ss-barchart:before, .ss-barchart.right:after { content: '📊'; } .ss-piechart:before, .ss-piechart.right:after { content: 'î•°'; } .ss-box:before, .ss-box.right:after { content: '📦'; } .ss-home:before, .ss-home.right:after { content: '⌂'; } .ss-buildings:before, .ss-buildings.right:after { content: '🏢'; } .ss-warehouse:before, .ss-warehouse.right:after { content: ''; } .ss-globe:before, .ss-globe.right:after { content: '🌎'; } .ss-navigate:before, .ss-navigate.right:after { content: 'î™°'; } .ss-compass:before, .ss-compass.right:after { content: 'î™±'; } .ss-signpost:before, .ss-signpost.right:after { content: ''; } .ss-map:before, .ss-map.right:after { content: ''; } .ss-location:before, .ss-location.right:after { content: ''; } .ss-pin:before, .ss-pin.right:after { content: '📍'; } .ss-database:before, .ss-database.right:after { content: 'îž '; } .ss-hdd:before, .ss-hdd.right:after { content: 'îž°'; } .ss-music:before, .ss-music.right:after { content: '♫'; } .ss-mic:before, .ss-mic.right:after { content: '🎤'; } .ss-volume:before, .ss-volume.right:after { content: '🔈'; } .ss-lowvolume:before, .ss-lowvolume.right:after { content: '🔉'; } .ss-highvolume:before, .ss-highvolume.right:after { content: '🔊'; } .ss-airplay:before, .ss-airplay.right:after { content: 'î €'; } .ss-camera:before, .ss-camera.right:after { content: '📷'; } .ss-picture:before, .ss-picture.right:after { content: '🌄'; } .ss-video:before, .ss-video.right:after { content: '📹'; } .ss-play:before, .ss-play.right:after { content: 'â–¶'; } .ss-pause:before, .ss-pause.right:after { content: 'î¢ '; } .ss-stop:before, .ss-stop.right:after { content: 'â– '; } .ss-record:before, .ss-record.right:after { content: '●'; } .ss-rewind:before, .ss-rewind.right:after { content: '⏪'; } .ss-fastforward:before, .ss-fastforward.right:after { content: '⏩'; } .ss-skipback:before, .ss-skipback.right:after { content: '⏮'; } .ss-skipforward:before, .ss-skipforward.right:after { content: '⏭'; } .ss-eject:before, .ss-eject.right:after { content: '⏏'; } .ss-repeat:before, .ss-repeat.right:after { content: '🔁'; } .ss-replay:before, .ss-replay.right:after { content: '↺'; } .ss-shuffle:before, .ss-shuffle.right:after { content: '🔀'; } .ss-book:before, .ss-book.right:after { content: '📕'; } .ss-openbook:before, .ss-openbook.right:after { content: '📖'; } .ss-notebook:before, .ss-notebook.right:after { content: '📓'; } .ss-newspaper:before, .ss-newspaper.right:after { content: '📰'; } .ss-grid:before, .ss-grid.right:after { content: 'î¦ '; } .ss-rows:before, .ss-rows.right:after { content: ''; } .ss-columns:before, .ss-columns.right:after { content: ''; } .ss-thumbnails:before, .ss-thumbnails.right:after { content: ''; } .ss-filter:before, .ss-filter.right:after { content: ''; } .ss-desktop:before, .ss-desktop.right:after { content: '💻'; } .ss-laptop:before, .ss-laptop.right:after { content: ''; } .ss-tablet:before, .ss-tablet.right:after { content: ''; } .ss-cell:before, .ss-cell.right:after { content: '📱'; } .ss-battery:before, .ss-battery.right:after { content: '🔋'; } .ss-highbattery:before, .ss-highbattery.right:after { content: ''; } .ss-mediumbattery:before, .ss-mediumbattery.right:after { content: ''; } .ss-lowbattery:before, .ss-lowbattery.right:after { content: ''; } .ss-emptybattery:before, .ss-emptybattery.right:after { content: ''; } .ss-lightbulb:before, .ss-lightbulb.right:after { content: '💡'; } .ss-downloadcloud:before, .ss-downloadcloud.right:after { content: ''; } .ss-download:before, .ss-download.right:after { content: ''; } .ss-uploadcloud:before, .ss-uploadcloud.right:after { content: 'î­€'; } .ss-upload:before, .ss-upload.right:after { content: ''; } .ss-fork:before, .ss-fork.right:after { content: ''; } .ss-merge:before, .ss-merge.right:after { content: ''; } .ss-transfer:before, .ss-transfer.right:after { content: '⇆'; } .ss-refresh:before, .ss-refresh.right:after { content: '↻'; } .ss-sync:before, .ss-sync.right:after { content: ''; } .ss-loading:before, .ss-loading.right:after { content: ''; } .ss-wifi:before, .ss-wifi.right:after { content: ''; } .ss-connection:before, .ss-connection.right:after { content: 'î®…'; } .ss-file:before, .ss-file.right:after { content: '📄'; } .ss-folder:before, .ss-folder.right:after { content: '📁'; } .ss-quote:before, .ss-quote.right:after { content: '“'; } .ss-text:before, .ss-text.right:after { content: 'î´€'; } .ss-font:before, .ss-font.right:after { content: ''; } .ss-print:before, .ss-print.right:after { content: '⎙'; } .ss-fax:before, .ss-fax.right:after { content: '📠'; } .ss-list:before, .ss-list.right:after { content: ''; } .ss-layout:before, .ss-layout.right:after { content: 'î¶ '; } .ss-action:before, .ss-action.right:after { content: ''; } .ss-redirect:before, .ss-redirect.right:after { content: '↪'; } .ss-expand:before, .ss-expand.right:after { content: '⤢'; } .ss-contract:before, .ss-contract.right:after { content: ''; } .ss-help:before, .ss-help.right:after { content: '❓'; } .ss-info:before, .ss-info.right:after { content: 'ℹ'; } .ss-alert:before, .ss-alert.right:after { content: 'âš '; } .ss-caution:before, .ss-caution.right:after { content: 'â›”'; } .ss-logout:before, .ss-logout.right:after { content: ''; } .ss-plus:before, .ss-plus.right:after { content: '+'; } .ss-hyphen:before, .ss-hyphen.right:after { content: '-'; } .ss-check:before, .ss-check.right:after { content: '✓'; } .ss-delete:before, .ss-delete.right:after { content: '␡'; } .ss-settings:before, .ss-settings.right:after { content: 'âš™'; } .ss-dashboard:before, .ss-dashboard.right:after { content: ''; } .ss-notifications:before, .ss-notifications.right:after { content: '🔔'; } .ss-notificationsdisabled:before, .ss-notificationsdisabled.right:after { content: '🔕'; } .ss-clock:before, .ss-clock.right:after { content: '⏲'; } .ss-stopwatch:before, .ss-stopwatch.right:after { content: '⏱'; } .ss-calendar:before, .ss-calendar.right:after { content: '📅'; } .ss-addcalendar:before, .ss-addcalendar.right:after { content: ''; } .ss-removecalendar:before, .ss-removecalendar.right:after { content: ''; } .ss-checkcalendar:before, .ss-checkcalendar.right:after { content: ''; } .ss-deletecalendar:before, .ss-deletecalendar.right:after { content: ''; } .ss-briefcase:before, .ss-briefcase.right:after { content: '💼'; } .ss-cloud:before, .ss-cloud.right:after { content: '☁'; } .ss-droplet:before, .ss-droplet.right:after { content: '💧'; } .ss-flask:before, .ss-flask.right:after { content: 'ï“€'; } .ss-up:before, .ss-up.right:after { content: '⬆'; } .ss-upright:before, .ss-upright.right:after { content: '⬈'; } .ss-right:before, .ss-right.right:after { content: 'âž¡'; } .ss-downright:before, .ss-downright.right:after { content: '⬊'; } .ss-down:before, .ss-down.right:after { content: '⬇'; } .ss-downleft:before, .ss-downleft.right:after { content: '⬋'; } .ss-left:before, .ss-left.right:after { content: '⬅'; } .ss-upleft:before, .ss-upleft.right:after { content: '⬉'; } .ss-navigateup:before, .ss-navigateup.right:after { content: ''; } .ss-navigateright:before, .ss-navigateright.right:after { content: 'â–»'; } .ss-navigatedown:before, .ss-navigatedown.right:after { content: ''; } .ss-navigateleft:before, .ss-navigateleft.right:after { content: 'â—…'; } .ss-directup:before, .ss-directup.right:after { content: 'â–´'; } .ss-directright:before, .ss-directright.right:after { content: 'â–¹'; } .ss-dropdown:before, .ss-dropdown.right:after { content: 'â–¾'; } .ss-directleft:before, .ss-directleft.right:after { content: 'â—ƒ'; } .ss-retweet:before, .ss-retweet.right:after { content: ''; } /* Legacy classes */ .ss-volumelow:before, .ss-volumelow.right:after { content: '🔉'; } .ss-volumehigh:before, .ss-volumehigh.right:after { content: '🔊'; } .ss-batteryhigh:before, .ss-batteryhigh.right:after { content: ''; } .ss-batterymedium:before, .ss-batterymedium.right:after { content: ''; } .ss-batterylow:before, .ss-batterylow.right:after { content: ''; } .ss-batteryempty:before, .ss-batteryempty.right:after { content: ''; } .ss-clouddownload:before, .ss-clouddownload.right:after { content: ''; } .ss-cloudupload:before, .ss-cloudupload.right:after { content: 'î­€'; } .ss-calendaradd:before, .ss-calendaradd.right:after { content: ''; } .ss-calendarremove:before, .ss-calendarremove.right:after { content: ''; } .ss-calendarcheck:before, .ss-calendarcheck.right:after { content: ''; } .ss-calendardelete:before, .ss-calendardelete.right:after { content: ''; } /*# sourceMappingURL=style.css.map */ .loading-screen { display: none; justify-content: center; padding-top: 50vh; width: 100%; height: 100%; position: absolute; background-color:rgba(0, 0, 0, 0.8); z-index: 9999; } .loading-screen h2 { height: 3em; font-size: 2em; text-align: center; color: #fff; } body.loading .loading-screen { display: flex; } a:active, a:focus, button:active, button:focus, input:active, input:focus, select:active, select:focus{-webkit-box-shadow:0 0 0 2px #fff,0 0 0 4px #000,0 0 4px 8px #fff;box-shadow:0 0 0 2px #fff,0 0 0 4px #000,0 0 4px 8px #fff;outline:2px transparent solid } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media(max-width:900px){ .sr-only-focusable:active, .sr-only-focusable:focus { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }} .menu-item.menu-type-link.visible-xs { display:block } @media(min-width:901px){ .menu-item.menu-type-link.visible-xs, .menu-item.menu-type-link.visible-xs button { display:none !important; visibility: hidden!important } } .call-to-actions, .side-article { background-color: #000; color: #fff; } /* @font-face { font-family: GT-Eesti-Pro-Display; src: url(https://cdn-7.nikon-cdn.com/static/fonts/GT-Eesti-Pro-Display/GT-Eesti-Pro-Display-Thin.eot); src: url(https://cdn-7.nikon-cdn.com/static/fonts/GT-Eesti-Pro-Display/GT-Eesti-Pro-Display-Thin.eot?#iefix) format("embedded-opentype"), url(https://cdn-7.nikon-cdn.com/static/fonts/GT-Eesti-Pro-Display/GT-Eesti-Pro-Display-Thin.woff2) format("woff2"), url(https://cdn-7.nikon-cdn.com/static/fonts/GT-Eesti-Pro-Display/GT-Eesti-Pro-Display-Thin.woff) format("woff"), url(https://cdn-7.nikon-cdn.com/static/fonts/GT-Eesti-Pro-Display/GT-Eesti-Pro-Display-Thin.ttf) format("truetype"); font-weight: 200; } @font-face { font-family: GT-Eesti-Pro-Display; src: url(https://cdn-7.nikon-cdn.com/static/fonts/GT-Eesti-Pro-Display/GT-Eesti-Pro-Display-Regular.eot); src: url(https://cdn-7.nikon-cdn.com/static/fonts/GT-Eesti-Pro-Display/GT-Eesti-Pro-Display-Regular.eot?#iefix) format("embedded-opentype"), url(https://cdn-7.nikon-cdn.com/static/fonts/GT-Eesti-Pro-Display/GT-Eesti-Pro-Display-Regular.woff2) format("woff2"), url(https://cdn-7.nikon-cdn.com/static/fonts/GT-Eesti-Pro-Display/GT-Eesti-Pro-Display-Regular.woff) format("woff"), url(https://cdn-7.nikon-cdn.com/static/fonts/GT-Eesti-Pro-Display/GT-Eesti-Pro-Display-Regular.ttf) format("truetype"); font-weight: 400; } @font-face { font-family: GT-Eesti-Pro-Display; src: url(https://cdn-7.nikon-cdn.com/static/fonts/GT-Eesti-Pro-Display/GT-Eesti-Pro-Display-Bold.eot); src: url(https://cdn-7.nikon-cdn.com/static/fonts/GT-Eesti-Pro-Display/GT-Eesti-Pro-Display-Bold.eot?#iefix) format("embedded-opentype"), url(https://cdn-7.nikon-cdn.com/static/fonts/GT-Eesti-Pro-Display/GT-Eesti-Pro-Display-Bold.woff2) format("woff2"), url(https://cdn-7.nikon-cdn.com/static/fonts/GT-Eesti-Pro-Display/GT-Eesti-Pro-Display-Bold.woff) format("woff"), url(https://cdn-7.nikon-cdn.com/static/fonts/GT-Eesti-Pro-Display/GT-Eesti-Pro-Display-Bold.ttf) format("truetype"); font-weight: 600; } html { color: #000; font-family: GT-Eesti-Pro-Display, Arial, sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; line-height: 1.375; text-rendering: geometricPrecision; } html * { font-family: GT-Eesti-Pro-Display, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: geometricPrecision; } html .copy, p { font-size: 1em !important; } html .copy.small { font-size: 0.75em; line-height: 1.167; } html .copy.large { font-size: 1.125em; line-height: 1.333; } html .copy.label { font-size: 0.75em; font-weight: 600; letter-spacing: 1px; line-height: 1; text-transform: uppercase; } html .text-link { color: #1d3994; text-decoration: underline; } html .text-link:focus, html .text-link:hover { color: #1d3994; text-decoration: none; } html .bg-dark, html.bg-dark { background: #000; color: #fff; } html .bg-dark .text-link, html.bg-dark .text-link { color: #fd0; } html .bg-dark .text-link:focus, html.bg-dark .text-link:hover { color: #fd0; text-decoration: none; } html .thin { font-weight: 200; } html .normal, html .regular { font-weight: 400; } html .bold, html .strong { font-weight: 600; } html .italic { font-style: italic; } html .uppercase { text-transform: uppercase; } html .underline { text-decoration: underline; } @media only screen and (min-width: 768px) { html .copy.large { font-size: calc(18px + (20 - 18) * ((100vw - 768px) / (1440 - 768))); line-height: 1.3; } } @media only screen and (min-width: 1440px) { html .copy.large { font-size: 1.25em; } } html .styled-link-new { font-size: 0.875em; font-weight: 600; letter-spacing: 1px; line-height: 1.143; } html .btn, html .btn-new, html .btn-new:not(.btn-new-sm), html .cta-link { font-size: 0.875em; font-weight: 600; letter-spacing: 1px; line-height: 1.143; padding: 10px 20px; } @media only screen and (min-width: 768px) { html .btn, html .btn-new:not(.btn-new-sm), html .cta-link { padding: 14px 32px; } } html .h1, html h1, html .h2, html h2, html .h3, html h3, html .h4, html h4, html .h5, html h5, html .h6, html h6 { font-family: GT-Eesti-Pro-Display, Arial, sans-serif !important; font-weight: 600 !important; margin-bottom: 0 !important; margin-top: 0 !important; } html .h1, html h1 { font-size: 3.25em !important; line-height: 0.962 !important; } html .h2, html h2 { font-size: 2.5em !important; line-height: 0.95 !important; } html .h3, html h3 { font-size: 2em !important; line-height: 0.875 !important; } html .h4, html h4 { font-size: 1.125em !important; letter-spacing: 1px !important; line-height: 1 !important; text-transform: uppercase !important; } html .h5, html h5 { font-size: 1.125em !important; line-height: 1 !important; } html .h6, html h6 { font-size: 1em !important; line-height: 1 !important; } @media only screen and (min-width: 768px) { html .h1, html h1 { font-size: calc(52px + (83 - 52) * ((100vw - 768px) / (1440 - 768))) !important; line-height: 0.976 !important; } html .h2, html h2 { font-size: calc(40px + (55 - 40) * ((100vw - 768px) / (1440 - 768))) !important; line-height: 0.964 !important; } html .h3, html h3 { font-size: calc(32px + (40 - 32) * ((100vw - 768px) / (1440 - 768))) !important; line-height: 0.95 !important; } } @media only screen and (min-width: 1440px) { html .h1, html h1 { font-size: 5.188em !important; } html .h2, html h2 { font-size: 3.438em !important; } html .h3, html h3 { font-size: 2.5em !important; } } */