/****************************************************************** Site Name: Author: Stylesheet: Main Stylesheet ******************************************************************/ /********************* IMPORTING PARTIALS These files are needed at the beginning so that we establish all our mixins, functions, and variables that we'll be using across the whole project. *********************/ /* normalize.css 2012-07-07T09:50 UTC - http://github.com/necolas/normalize.css */ /* ========================================================================== HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined in IE 8/9. */ @import url(../js/libs/venobox.css); article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } /** * Correct `inline-block` display not defined in IE 8/9. */ audio, canvas, video { display: inline-block; } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address `[hidden]` styling not present in IE 8/9. * Hide the `template` element in IE, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* ========================================================================== Base ========================================================================== */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } /* ========================================================================== Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ a { background: transparent; } /** * Address `outline` inconsistency between Chrome and other browsers. */ a:focus { outline: 0; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* ========================================================================== Typography ========================================================================== */ /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari 5, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9, Safari 5, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. */ b, strong, .strong { font-weight: bold; } /** * Address styling not present in Safari 5 and Chrome. */ dfn, em, .em { font-style: italic; } /** * Address differences between Firefox and other browsers. */ hr { box-sizing: content-box; height: 0; } /* * proper formatting (http://blog.fontdeck.com/post/9037028497/hyphens) */ p { -webkit-hyphens: auto; -epub-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } /* * Addresses margins set differently in IE6/7. */ pre { margin: 0; } /** * Correct font family set oddly in Safari 5 and Chrome. */ code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } /** * Improve readability of pre-formatted text in all browsers. */ pre { white-space: pre-wrap; } /** * Set consistent quote types. */ q { quotes: "\201C" "\201D" "\2018" "\2019"; } /** * Address inconsistent and variable font size in all browsers. */ q:before, q:after { content: ''; content: none; } small, .small { font-size: 75%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ========================================================================== Lists ========================================================================== */ /* * Addresses margins set differently in IE6/7. */ dl, menu, ol, ul { margin: 1em 0; } dd { margin: 0; } /* * Addresses paddings set differently in IE6/7. */ menu { padding: 0 0 0 40px; } ol, ul { padding: 0; list-style-type: none; } /* * Corrects list images handled incorrectly in IE7. */ nav ul, nav ol { list-style: none; list-style-image: none; } /* ========================================================================== Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9. */ img { border: 0; } /** * Correct overflow displayed oddly in IE 9. */ svg:not(:root) { overflow: hidden; } /* ========================================================================== Figures ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari 5. */ figure { margin: 0; } /* ========================================================================== Forms ========================================================================== */ /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * 1. Correct font family not being inherited in all browsers. * 2. Correct font size not being inherited in all browsers. * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. */ button, input, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 2 */ margin: 0; /* 3 */ } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ button, input { line-height: normal; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. * Correct `select` style inheritance in Firefox 4+ and Opera. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari 5 and Chrome * on OS X. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * 1. Remove default vertical scrollbar in IE 8/9. * 2. Improve readability and alignment in all browsers. */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } /* ========================================================================== Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } *, *:before, *:after { box-sizing: border-box; } .image-replacement, .ir { text-indent: 100%; white-space: nowrap; overflow: hidden; } .clearfix, .cf { zoom: 1; } .clearfix:before, .clearfix:after, .cf:before, .cf:after { content: ""; display: table; } .clearfix:after, .cf:after { clear: both; } /* use the best ampersand http://simplebits.com/notebook/2008/08/14/ampersands-2/ */ span.amp { font-family: Baskerville,'Goudy Old Style',Palatino,'Book Antiqua',serif !important; font-style: italic; } /****************************************************************** Site Name: Author: Stylesheet: Variables ******************************************************************/ /********************* COLORS Need help w/ choosing your colors? Try this site out: http://0to255.com/ *********************/ /* Here's a great tutorial on how to use color variables properly: http://sachagreif.com/sass-color-variables/ */ /****************************************************************** Site Name: Author: Stylesheet: Typography ******************************************************************/ /********************* FONT FACE (IN YOUR FACE) *********************/ @font-face { font-family: 'ApercuBold'; src: url("../fonts/apercu-bold-webfont.eot"); src: url("../fonts/apercu-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/apercu-bold-webfont.svg#ApercuBold") format("svg"), url("../fonts/apercu-bold-webfont.woff") format("woff"), url("../fonts/apercu-bold-webfont.ttf") format("truetype"); font-weight: bold; font-style: normal; } @font-face { font-family: 'ApercuBoldItalic'; src: url("../fonts/apercu-bolditalic-webfont.eot"); src: url("../fonts/apercu-bolditalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/apercu-bolditalic-webfont.svg#ApercuBoldItalic") format("svg"), url("../fonts/apercu-bolditalic-webfont.woff") format("woff"), url("../fonts/apercu-bolditalic-webfont.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'ApercuItalic'; src: url("../fonts/apercu-italic-webfont.eot"); src: url("../fonts/apercu-italic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/apercu-italic-webfont.svg#ApercuItalic") format("svg"), url("../fonts/apercu-italic-webfont.woff") format("woff"), url("../fonts/apercu-italic-webfont.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'ApercuLight'; src: url("../fonts/apercu-light-webfont.eot"); src: url("../fonts/apercu-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/apercu-light-webfont.svg#ApercuLight") format("svg"), url("../fonts/apercu-light-webfont.woff") format("woff"), url("../fonts/apercu-light-webfont.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'ApercuLightItalic'; src: url("../fonts/apercu-lightitalic-webfont.eot"); src: url("../fonts/apercu-lightitalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/apercu-lightitalic-webfont.svg#ApercuLightItalic") format("svg"), url("../fonts/apercu-lightitalic-webfont.woff") format("woff"), url("../fonts/apercu-lightitalic-webfont.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'ApercuMedium'; src: url("../fonts/apercu-medium-webfont.eot"); src: url("../fonts/apercu-medium-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/apercu-medium-webfont.svg#ApercuMedium") format("svg"), url("../fonts/apercu-medium-webfont.woff") format("woff"), url("../fonts/apercu-medium-webfont.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'ApercuMediumItalic'; src: url("../fonts/apercu-mediumitalic-webfont.eot"); src: url("../fonts/apercu-mediumitalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/apercu-mediumitalic-webfont.svg#ApercuMediumItalic") format("svg"), url("../fonts/apercu-mediumitalic-webfont.woff") format("woff"), url("../fonts/apercu-mediumitalic-webfont.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'ApercuMono'; src: url("../fonts/apercu-mono-webfont.eot"); src: url("../fonts/apercu-mono-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/apercu-mono-webfont.svg#ApercuMono") format("svg"), url("../fonts/apercu-mono-webfont.woff") format("woff"), url("../fonts/apercu-mono-webfont.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'ApercuRegular'; src: url("../fonts/apercu-regular-webfont.eot"); src: url("../fonts/apercu-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/apercu-regular-webfont.svg#ApercuRegular") format("svg"), url("../fonts/apercu-regular-webfont.woff") format("woff"), url("../fonts/apercu-regular-webfont.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'icomoon'; src: url("../fonts/icomoon.eot?6l5p4f"); src: url("../fonts/icomoon.eot?6l5p4f#iefix") format("embedded-opentype"), url("../fonts/icomoon.woff2?6l5p4f") format("woff2"), url("../fonts/icomoon.ttf?6l5p4f") format("truetype"), url(".../fonts/icomoon.woff?6l5p4f") format("woff"), url("../fonts/icomoon.svg?6l5p4f#icomoon") format("svg"); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-DR_CityofSydney:before { content: "\e900"; } .icon-DR_Collective:before { content: "\e901"; } .icon-DR_FoxSports:before { content: "\e902"; } .icon-DR_Foxtel:before { content: "\e903"; } .icon-DR_GarryPepper:before { content: "\e904"; } .icon-DR_GeneralPants:before { content: "\e905"; } .icon-DR_RedBull:before { content: "\e906"; } .icon-DR_Seafolly:before { content: "\e907"; } .icon-DR_Sony:before { content: "\e908"; } .icon-DR_TourismAustralia:before { content: "\e909"; } .icon-DR_Unilever:before { content: "\e90a"; } .icon-DR_Vogue:before { content: "\e90b"; } .icon-ArrowDown:before { content: "\e90c"; } .icon-ArrowLeft:before { content: "\e90d"; } .icon-ArrowLeftClean:before { content: "\e90e"; } .icon-ArrowRight:before { content: "\e90f"; } .icon-ArrowRightClean:before { content: "\e910"; } .icon-ArrowUp:before { content: "\e911"; } .icon-Close:before { content: "\e912"; } .icon-DeRepublicaLogo:before { content: "\e913"; } .icon-DeRepublicaVertical:before { content: "\e914"; } .icon-Facebook-Iocn:before { content: "\e915"; color: #fff; } .icon-Instagram-Icon:before { content: "\e916"; color: #fff; } .icon-Linked-Icon:before { content: "\e917"; color: #fff; } .icon-Vimeo-Icon:before { content: "\e918"; color: #fff; } .icon-MenuIcon:before { content: "\e919"; } .icon-PlayIcon:before { content: "\e91a"; } .icon-quote:before { content: "\e91b"; color: #fff; } @font-face { font-family: 'service-icons'; src: url("../fonts/service-icons/service-icons.eot?jg9hb3"); src: url("../fonts/service-icons/service-icons.eot?jg9hb3#iefix") format("embedded-opentype"), url("../fonts/service-icons/service-icons.ttf?jg9hb3") format("truetype"), url("../fonts/service-icons/service-icons.woff?jg9hb3") format("woff"), url("../fonts/service-icons/service-icons.svg?jg9hb3#service-icons") format("svg"); font-weight: normal; font-style: normal; } [class^="service-icon-"], [class*=" service-icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'service-icons' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .service-icon-branded-icon:before { content: "\e900"; } .service-icon-corporate-icon:before { content: "\e901"; } .service-icon-event-icon:before { content: "\e902"; } .service-icon-product-icon:before { content: "\e903"; } .service-icon-social-icon:before { content: "\e904"; } .service-icon-training-icon:before { content: "\e905"; } /* some nice typographical defaults more here: http://www.newnet-soft.com/blog/csstypography */ p { -ms-word-wrap: break-word; word-break: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; -webkit-hyphenate-before: 2; -webkit-hyphenate-after: 3; hyphenate-lines: 3; -webkit-font-feature-settings: "liga", "dlig"; -ms-font-feature-settings: "liga", "dlig"; -o-font-feature-settings: "liga", "dlig"; font-feature-settings: "liga", "dlig"; } /****************************************************************** Site Name: Author: Stylesheet: Sass Functions You can do a lot of really cool things in Sass. Functions help you make repeated actions a lot easier. They are really similar to mixins, but can be used for so much more. Anyway, keep them all in here so it's easier to find when you're looking for one. For more info on functions, go here: http://sass-lang.com/documentation/Sass/Script/Functions.html ******************************************************************/ /********************* COLOR FUNCTIONS These are helpful when you're working with shadows and such things. It's essentially a quicker way to write RGBA. Example: box-shadow: 0 0 4px black(0.3); compiles to: box-shadow: 0 0 4px rgba(0,0,0,0.3); *********************/ /********************* RESPONSIVE HELPER FUNCTION If you're creating a responsive site, then you've probably already read Responsive Web Design: http://www.abookapart.com/products/responsive-web-design Here's a nice little helper function for calculating target / context as mentioned in that book. Example: width: cp(650px, 1000px); or width: calc-percent(650px, 1000px); both compile to: width: 65%; *********************/ /****************************************************************** Site Name: De Republica Author: Eli Rae Stylesheet: Mixins Stylesheet ******************************************************************/ /********************* CSS3 OPACITY *********************/ /********************* CSS3 GRADIENTS *********************/ /* @include css-gradient(#dfdfdf,#f8f8f8); */ /********************* BOX SIZING *********************/ /* @include box-sizing(border-box); */ /* NOTE: value of "padding-box" is only supported in Gecko. So probably best not to use it. I mean, were you going to anyway? */ @keyframes flagAnimation { 0% { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); } 50% { opacity: 0.1; -moz-opacity: 0.1; -khtml-opacity: 0.1; filter: alpha(opacity=0.1); } 100% { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); } } @-webkit-keyframes flagAnimation { 0% { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); } 50% { opacity: 0.1; -moz-opacity: 0.1; -khtml-opacity: 0.1; filter: alpha(opacity=0.1); } 100% { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); } } .loader-inner { font-size: 3px; margin: 0px auto; text-indent: -9999em; width: 11em; height: 11em; border-radius: 50%; background: #ffffff; background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%); background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%); position: relative; -webkit-animation: load3 1.4s infinite linear; animation: load3 1.4s infinite linear; -webkit-transform: translateZ(0); transform: translateZ(0); } .loader-inner:before { width: 50%; height: 50%; background: rgba(0, 0, 0, 0); border-radius: 100% 0 0 0; position: absolute; top: 0; left: 0; content: ''; } .loader-inner:after { background: rgba(0, 0, 0, 0); width: 75%; height: 75%; border-radius: 50%; content: ''; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } @-webkit-keyframes load3 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes load3 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /****************************************************************** Site Name: Author: Stylesheet: Grid Stylesheet ******************************************************************/ @media (max-width: 767px) { .m-hidden { display: none; } .m-all { float: left; padding: 0 15px; width: 100%; padding: 0; } .m-1of2 { float: left; padding: 0 15px; width: 50%; } .m-1of3 { float: left; padding: 0 15px; width: 33.33%; } .m-2of3 { float: left; padding: 0 15px; width: 66.66%; } .m-1of4 { float: left; padding: 0 15px; width: 25%; } .m-3of4 { float: left; padding: 0 15px; width: 75%; } } /* Portrait tablet to landscape */ @media (min-width: 768px) and (max-width: 1029px) { .t-hidden { display: none; } .t-all { float: left; padding: 0 15px; width: 100%; padding: 0; } .t-1of2 { float: left; padding: 0 15px; width: 50%; } .t-1of3 { float: left; padding: 0 15px; width: 33.33%; } .t-2of3 { float: left; padding: 0 15px; width: 66.66%; } .t-1of4 { float: left; padding: 0 15px; width: 25%; } .t-3of4 { float: left; padding: 0 15px; width: 75%; } .t-1of5 { float: left; padding: 0 15px; width: 20%; } .t-2of5 { float: left; padding: 0 15px; width: 40%; } .t-3of5 { float: left; padding: 0 15px; width: 60%; } .t-4of5 { float: left; padding: 0 15px; width: 80%; } .t-1of7 { float: left; padding: 0 15px; width: 14.2857142857%; } .t-2of7 { float: left; padding: 0 15px; width: 28.5714286%; } .t-3of7 { float: left; padding: 0 15px; width: 42.8571429%; } .t-4of7 { float: left; padding: 0 15px; width: 57.1428572%; } .t-5of7 { float: left; padding: 0 15px; width: 71.4285715%; } .t-6of7 { float: left; padding: 0 15px; width: 85.7142857%; } } /* Landscape to small desktop */ @media (min-width: 1030px) { .d-hidden { display: none; } .d-all { float: left; padding: 0 15px; width: 100%; } .d-1of2 { float: left; padding: 0 15px; width: 50%; } .d-1of3 { float: left; padding: 0 15px; width: 33.33%; } .d-2of3 { float: left; padding: 0 15px; width: 66.66%; } .d-1of4 { float: left; padding: 0 15px; width: 25%; } .d-3of4 { float: left; padding: 0 15px; width: 75%; } .d-1of5 { float: left; padding: 0 15px; width: 20%; } .d-2of5 { float: left; padding: 0 15px; width: 40%; } .d-3of5 { float: left; padding: 0 15px; width: 60%; } .d-4of5 { float: left; padding: 0 15px; width: 80%; } .d-1of6 { float: left; padding: 0 15px; width: 16.6666666667%; } .d-1of7 { float: left; padding: 0 15px; width: 14.2857142857%; } .d-2of7 { float: left; padding: 0 15px; width: 28.5714286%; } .d-3of7 { float: left; padding: 0 15px; width: 42.8571429%; } .d-4of7 { float: left; padding: 0 15px; width: 57.1428572%; } .d-5of7 { float: left; padding: 0 15px; width: 71.4285715%; } .d-6of7 { float: left; padding: 0 15px; width: 85.7142857%; } .d-1of8 { float: left; padding: 0 15px; width: 12.5%; } .d-1of9 { float: left; padding: 0 15px; width: 11.1111111111%; } .d-1of10 { float: left; padding: 0 15px; width: 10%; } .d-1of11 { float: left; padding: 0 15px; width: 9.09090909091%; } .d-1of12 { float: left; padding: 0 15px; width: 8.33%; } } /********************* IMPORTING MODULES Modules are reusable blocks or elements we use throughout the project. We can break them up as much as we want or just keep them all in one. I mean, you can do whatever you want. The world is your oyster. Unless you hate oysters, then the world is your peanut butter & jelly sandwich. *********************/ /****************************************************************** Site Name: Author: Stylesheet: Alert Styles If you want to use these alerts in your design, you can. If not, you can just remove this stylesheet. ******************************************************************/ .alert-help, .alert-info, .alert-error, .alert-success { margin: 10px; padding: 5px 18px; border: 1px solid; } .alert-help { border-color: #e8dc59; background: #ebe16f; } .alert-info { border-color: #bfe4f4; background: #d5edf8; } .alert-error { border-color: #f8cdce; background: #fbe3e4; } .alert-success { border-color: #deeaae; background: #e6efc2; } /****************************************************************** Site Name: Author: Stylesheet: Button Styles Buttons are a pretty important part of your site's style, so it's important to have a consistent baseline for them. Use this stylesheet to create all kinds of buttons. Helpful Links: http://galp.in/blog/2011/08/02/the-ui-guide-part-1-buttons/ ******************************************************************/ /********************* BUTTON DEFAULTS We're gonna use a placeholder selector here so we can use common styles. We then use this to load up the defaults in all our buttons. Here's a quick video to show how it works: http://www.youtube.com/watch?v=hwdVpKiJzac *********************/ button.gform_button, .cta-btn, .cta-btn-form { display: inline-block; position: relative; font-family: "ApercuRegular", Helvetica, Arial, sans-serif; text-decoration: none; color: #fff; font-weight: normal; padding: 15px 25px; border: 0; cursor: pointer; -webkit-transition: background-color 0.14s ease-in-out; transition: background-color 0.14s ease-in-out; } button.gform_button:hover, .cta-btn:hover, .cta-btn-form:hover, button.gform_button:focus, .cta-btn:focus, .cta-btn-form:focus { color: #fff; text-decoration: none; outline: none; } button.gform_button:active, .cta-btn:active, .cta-btn-form:active { top: 1px; } /* An example button. You can use this example if you want. Just replace all the variables and it will create a button dependant on those variables. */ button.gform_button .icon-ArrowRightClean { position: absolute; top: 17px; right: 13px; font-size: 16px; padding-left: 10px; -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); } button.gform_button { background-color: #673BFF; text-align: left; position: relative; padding: 15px 10px 15px 20px; width: 250px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4); } button.gform_button:hover, button.gform_button:focus { background-color: #512AD8; } button.gform_button:active { background-color: #512AD8; } button.gform_button:hover .icon-ArrowRightClean { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .cta-btn .icon-ArrowRightClean, .cta-btn-form .icon-ArrowRightClean { position: absolute; top: 19px; right: 13px; font-size: 16px; padding-left: 10px; -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); } .cta-btn, .cta-btn-form { background-color: #673BFF; font-size: 14px; text-align: left; position: relative; padding: 18px 10px 18px 20px; width: 228px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4); } .cta-btn:hover, .cta-btn:focus, .cta-btn-form:hover, .cta-btn-form:focus { background-color: #512AD8; } .cta-btn:active, .cta-btn-form:active { background-color: #512AD8; } .cta-btn:hover .icon-ArrowRightClean, .cta-btn-form:hover .icon-ArrowRightClean { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .c-hamburger { display: block; position: relative; margin: 0; padding: 0; width: 30px; height: 30px; font-size: 0; text-indent: -9999px; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-shadow: none; border-radius: none; border: none; cursor: pointer; -webkit-transition: background 0.3s; transition: background 0.3s; background: none; } .c-hamburger:focus { outline: none; } .c-hamburger span { display: block; position: absolute; top: 8px; left: 0px; right: 0px; height: 2px; background: white; } .c-hamburger span::before, .c-hamburger span::after { position: absolute; display: block; left: 0; width: 100%; height: 2px; background-color: #fff; content: ""; } .c-hamburger span::before { top: -8px; } .c-hamburger span::after { bottom: -8px; } .c-hamburger--htx span { -webkit-transition: background 0s 0.3s; transition: background 0s 0.3s; } .c-hamburger--htx span::before, .c-hamburger--htx span::after { -webkit-transition-duration: 0.3s, 0.3s; transition-duration: 0.3s, 0.3s; -webkit-transition-delay: 0.3s, 0s; transition-delay: 0.3s, 0s; } .c-hamburger--htx span::before { -webkit-transition-property: top, -webkit-transform; transition-property: top, -webkit-transform; transition-property: top, transform; transition-property: top, transform, -webkit-transform; } .c-hamburger--htx span::after { -webkit-transition-property: bottom, -webkit-transform; transition-property: bottom, -webkit-transform; transition-property: bottom, transform; transition-property: bottom, transform, -webkit-transform; } .open .c-hamburger--htx span { background: none; } .open .c-hamburger--htx span::before { top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .open .c-hamburger--htx span::after { bottom: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .open .c-hamburger--htx span::before, .open .c-hamburger--htx span::after { -webkit-transition-delay: 0s, 0.3s; transition-delay: 0s, 0.3s; } a.smooth { color: #fff; -webkit-transition: color 0.14s ease-in-out; transition: color 0.14s ease-in-out; } a.smooth:hover, a.smooth:focus { color: #5e5e5e; text-decoration: none; outline: none; } a.smooth:active { color: #5e5e5e; } /****************************************************************** Site Name: Author: Stylesheet: Form Styles ******************************************************************/ /********************* INPUTS *********************/ input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], select, textarea, .field { display: block; height: 40px; line-height: 1em; padding: 0 12px; margin-bottom: 14px; font-size: 1em; color: #fff; border-radius: 0px; border: #5E5E5E 1px solid; vertical-align: middle; box-shadow: none; width: 100%; background-color: #222222; -webkit-transition: background-color 0.24s ease-in-out; transition: background-color 0.24s ease-in-out; } input[type="text"]:focus, input[type="text"]:active, input[type="password"]:focus, input[type="password"]:active, input[type="datetime"]:focus, input[type="datetime"]:active, input[type="datetime-local"]:focus, input[type="datetime-local"]:active, input[type="date"]:focus, input[type="date"]:active, input[type="month"]:focus, input[type="month"]:active, input[type="time"]:focus, input[type="time"]:active, input[type="week"]:focus, input[type="week"]:active, input[type="number"]:focus, input[type="number"]:active, input[type="email"]:focus, input[type="email"]:active, input[type="url"]:focus, input[type="url"]:active, input[type="search"]:focus, input[type="search"]:active, input[type="tel"]:focus, input[type="tel"]:active, input[type="color"]:focus, input[type="color"]:active, select:focus, select:active, textarea:focus, textarea:active, .field:focus, .field:active { background-color: #000000; outline: none; } input[type="text"].error, input[type="text"].is-invalid, input[type="password"].error, input[type="password"].is-invalid, input[type="datetime"].error, input[type="datetime"].is-invalid, input[type="datetime-local"].error, input[type="datetime-local"].is-invalid, input[type="date"].error, input[type="date"].is-invalid, input[type="month"].error, input[type="month"].is-invalid, input[type="time"].error, input[type="time"].is-invalid, input[type="week"].error, input[type="week"].is-invalid, input[type="number"].error, input[type="number"].is-invalid, input[type="email"].error, input[type="email"].is-invalid, input[type="url"].error, input[type="url"].is-invalid, input[type="search"].error, input[type="search"].is-invalid, input[type="tel"].error, input[type="tel"].is-invalid, input[type="color"].error, input[type="color"].is-invalid, select.error, select.is-invalid, textarea.error, textarea.is-invalid, .field.error, .field.is-invalid { color: #fbe3e4; border-color: #fbe3e4; background-color: #000000; background-position: 99% center; background-repeat: no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2NDM0NDREQkYwNEIxMUUyOTI4REZGQTEzMzA2MDcyNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2NDM0NDREQ0YwNEIxMUUyOTI4REZGQTEzMzA2MDcyNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQ3ODRGRkE2RjA0QTExRTI5MjhERkZBMTMzMDYwNzI2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjY0MzQ0NERBRjA0QjExRTI5MjhERkZBMTMzMDYwNzI2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+U8iT5wAAAedJREFUeNqk1U9I02Ecx/HtV3aIFAc1hcRDUoGXRAq0oNLA2CrsEFmHbikZu0iQYIFGYAiegkCpLipBxPpDEBMUzB0EhSG2LhG7hMR2GviPgUTvB57Bw8P3+U23B16HPX8+e/b8nt93wezZSMCnhXETF3AcB5BDCnH8Dq98ExcGHcFn8Ah3cdDni+fxnPDv9oAnTB7CKu6VCFXtChZy56LxUjt+jfuB8toSOth9wd7xWAWhqrUjYR/FRTwWJm+iIPT/w7bQf5ljiZnBg45dtKFX6H+LU8gIY8OEV6vgTkStwXWE8BPTGDHGPqNPz2mCfSOOYkA99TvCt1bhGPL68zMcwmncMuape10jrI+q4BbHi/FLn31S9z2x5tRhTc+1W506ipM+T3oRD4X+8+qtc4SqFvL0z/Fr14S+Szjis8bz9Lvvaq8cwS/wwGfdlqfPSWqTiFlX77o13u9Ym1PBs8JAytpRoy44X9Ft9E/gvbA+rYKn8NcaaMVc8UHgBw4b9/iqUQZ6hOAJFbyDcUflmsEX4a6+wTtHGfhAIUqa1U29Zc2BytouThD8x6xuN5CtMPi2CrXLZkZf/HyZoRFCP7n+QVR4PV7uI/AjGghN7OU/r1ilnqILtfpNC+o6vIFljBKYlhb/F2AAgaBsWR5wRiIAAAAASUVORK5CYII=); outline-color: #fbe3e4; } input[type="text"].success, input[type="text"].is-valid, input[type="password"].success, input[type="password"].is-valid, input[type="datetime"].success, input[type="datetime"].is-valid, input[type="datetime-local"].success, input[type="datetime-local"].is-valid, input[type="date"].success, input[type="date"].is-valid, input[type="month"].success, input[type="month"].is-valid, input[type="time"].success, input[type="time"].is-valid, input[type="week"].success, input[type="week"].is-valid, input[type="number"].success, input[type="number"].is-valid, input[type="email"].success, input[type="email"].is-valid, input[type="url"].success, input[type="url"].is-valid, input[type="search"].success, input[type="search"].is-valid, input[type="tel"].success, input[type="tel"].is-valid, input[type="color"].success, input[type="color"].is-valid, select.success, select.is-valid, textarea.success, textarea.is-valid, .field.success, .field.is-valid { color: #e6efc2; border-color: #e6efc2; background-color: #000000; background-position: 99% center; background-repeat: no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2NDM0NDRERkYwNEIxMUUyOTI4REZGQTEzMzA2MDcyNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2NDM0NDRFMEYwNEIxMUUyOTI4REZGQTEzMzA2MDcyNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjY0MzQ0NERERjA0QjExRTI5MjhERkZBMTMzMDYwNzI2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjY0MzQ0NERFRjA0QjExRTI5MjhERkZBMTMzMDYwNzI2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+7olkTQAAAfhJREFUeNqklU9oE0EUhzdroWjw0tBeWlDxkEaIp55TsCU9VKIgCrHBelA8CQ1Kr1WPbZrQ3gqtQqvGqxpQc2jBk6BIIaAGD4qNCKURpDSKiPi98gLDsJt//uBjsztvfnk7895sIPAw6/joGMThFJyAXn2+A+9gA57/TaY/eU0OeBgfhGm4DiGnsb7DAszxBz/NAdcKjMJLuNWCqagHbsscN5+L+hmH4QkMOe1L5jzFfNA2PgT34ajTuY7AGuZB0/hmh5m+gS0r8xv1zRvg+gGCHZiOwnF4DP3iB3sQkYxPd2C6CWfhB9Xwlus5+K1j4jXuaq3a+gM1H9OPcAa+7q9lPidZJqHbiIm7Wg22rsEI7FrPSzAMX/T+ADyAKSsu7Fr1KplehLvwCs5DvfBf65p+MypqRbO1FXK9utH4/QKuaqYTsG3E3INJv00Q46px3+XxanJ/Ute2/vqP4FKDza2KcdljIKdnhS0xXYULTaqmLMZFn8FFSFtvt6x70ExFCS5oUXspq2ssa7oEl1swFa+CGFdgtkHgPDyDKy02zyxNU6lXRUZb1EuHYayNNs+Yh5B0WQo+/8fpJnNTZFuzz2OpjoQ2QruSOQlMy35fEGmEGMxY9e1brxobw7TkWA1h6xfckUPb+JhGoE/Hpfvew7qUld/H9J8AAwDpw3WYrxcZ3QAAAABJRU5ErkJggg==); outline-color: #e6efc2; } input[type="text"][disabled], input[type="text"].is-disabled, input[type="password"][disabled], input[type="password"].is-disabled, input[type="datetime"][disabled], input[type="datetime"].is-disabled, input[type="datetime-local"][disabled], input[type="datetime-local"].is-disabled, input[type="date"][disabled], input[type="date"].is-disabled, input[type="month"][disabled], input[type="month"].is-disabled, input[type="time"][disabled], input[type="time"].is-disabled, input[type="week"][disabled], input[type="week"].is-disabled, input[type="number"][disabled], input[type="number"].is-disabled, input[type="email"][disabled], input[type="email"].is-disabled, input[type="url"][disabled], input[type="url"].is-disabled, input[type="search"][disabled], input[type="search"].is-disabled, input[type="tel"][disabled], input[type="tel"].is-disabled, input[type="color"][disabled], input[type="color"].is-disabled, select[disabled], select.is-disabled, textarea[disabled], textarea.is-disabled, .field[disabled], .field.is-disabled { cursor: not-allowed; border-color: #cfcfcf; opacity: 0.6; } input[type="text"][disabled]:focus, input[type="text"][disabled]:active, input[type="text"].is-disabled:focus, input[type="text"].is-disabled:active, input[type="password"][disabled]:focus, input[type="password"][disabled]:active, input[type="password"].is-disabled:focus, input[type="password"].is-disabled:active, input[type="datetime"][disabled]:focus, input[type="datetime"][disabled]:active, input[type="datetime"].is-disabled:focus, input[type="datetime"].is-disabled:active, input[type="datetime-local"][disabled]:focus, input[type="datetime-local"][disabled]:active, input[type="datetime-local"].is-disabled:focus, input[type="datetime-local"].is-disabled:active, input[type="date"][disabled]:focus, input[type="date"][disabled]:active, input[type="date"].is-disabled:focus, input[type="date"].is-disabled:active, input[type="month"][disabled]:focus, input[type="month"][disabled]:active, input[type="month"].is-disabled:focus, input[type="month"].is-disabled:active, input[type="time"][disabled]:focus, input[type="time"][disabled]:active, input[type="time"].is-disabled:focus, input[type="time"].is-disabled:active, input[type="week"][disabled]:focus, input[type="week"][disabled]:active, input[type="week"].is-disabled:focus, input[type="week"].is-disabled:active, input[type="number"][disabled]:focus, input[type="number"][disabled]:active, input[type="number"].is-disabled:focus, input[type="number"].is-disabled:active, input[type="email"][disabled]:focus, input[type="email"][disabled]:active, input[type="email"].is-disabled:focus, input[type="email"].is-disabled:active, input[type="url"][disabled]:focus, input[type="url"][disabled]:active, input[type="url"].is-disabled:focus, input[type="url"].is-disabled:active, input[type="search"][disabled]:focus, input[type="search"][disabled]:active, input[type="search"].is-disabled:focus, input[type="search"].is-disabled:active, input[type="tel"][disabled]:focus, input[type="tel"][disabled]:active, input[type="tel"].is-disabled:focus, input[type="tel"].is-disabled:active, input[type="color"][disabled]:focus, input[type="color"][disabled]:active, input[type="color"].is-disabled:focus, input[type="color"].is-disabled:active, select[disabled]:focus, select[disabled]:active, select.is-disabled:focus, select.is-disabled:active, textarea[disabled]:focus, textarea[disabled]:active, textarea.is-disabled:focus, textarea.is-disabled:active, .field[disabled]:focus, .field[disabled]:active, .field.is-disabled:focus, .field.is-disabled:active { background-color: #d5edf8; } input[type="password"] { letter-spacing: 0.3em; } textarea { max-width: 100%; min-height: 120px; line-height: 1.5em; } select { -webkit-appearance: none; /* 1 */ -moz-appearance: none; appearance: none; background-image: url("/wp-content/themes/derepublica/library/images/down_arrow.png"); background-repeat: no-repeat; background-size: 16px 8px; background-position: 95% center; } /********************* BASE (MOBILE) SIZE This are the mobile styles. It's what people see on their phones. If you set a great foundation, you won't need to add too many styles in the other stylesheets. Remember, keep it light: Speed is Important. *********************/ /****************************************************************** Site Name: De Republica Author: Eli Rae Stylesheet: Base Mobile Stylesheet ******************************************************************/ /********************* GENERAL STYLES *********************/ body { font-family: "ApercuRegular", Helvetica, Arial, sans-serif; font-size: 100%; color: #fff; background-color: #000; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-width: 100%; min-height: 100%; padding-bottom: calc(100vh); content: 'viewport-units-buggyfill; padding-bottom: calc(100vh)'; } ul.whr-info { display: none; } .footer-contact-wrap a.manual-link { display: block; margin: 0 auto; } .footer-contact-wrap a.form-link { display: none; margin: 0 auto; } .header-tagline-wrap a.manual-link { display: inline-block; margin: 0 auto; } .header-tagline-wrap a.form-link { display: none; margin: 0 auto; } .page-template-page-contact a.manual-link { display: inline-block; margin: 0 auto; } .page-template-page-contact a.form-link { display: none; margin: 0 auto; } img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 .07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } /********************* ADWORDS LANDING *********************/ .activate-form { overflow-y: hidden; } #my_typeform { display: none; } .activate-form #my_typeform { position: fixed; top: 0; left: 0; z-index: 1000; display: inline-block; width: 100%; height: 100vh; min-height: 100vh; padding: 0px; overflow: hidden; border: 0; } .activate-form .form-header { display: inline-block; position: fixed; top: 0px; left: 0px; width: 100%; padding-right: 17px; -webkit-transition: z-index 0.6s ease-in-out; transition: z-index 0.6s ease-in-out; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); -webkit-transition: opacity 0.4s ease-in-out, top 0.4s ease-in-out; transition: opacity 0.4s ease-in-out, top 0.4s ease-in-out; z-index: 1001; } .form-header { -webkit-transition: z-index 0.4s ease-in-out; transition: z-index 0.4s ease-in-out; display: none; } .form-header .form-header-logo .icon-logo { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); width: 58px; height: 44px; top: 30px; left: 30px; } .form-header .form-header-logo .icon-logo img { width: 50px; height: auto; } .form-header .close-btn { right: 47px; top: 30px; position: absolute; } /********************* LAYOUT & GRID STYLES *********************/ .wrap { width: 96%; margin: 0 auto; } #hero-bg-vid { position: fixed; width: 100%; height: 100vh; min-height: 100vh; overflow: hidden; z-index: 1; left: 0; top: 0; opacity: 0.9; -moz-opacity: 0.9; -khtml-opacity: 0.9; filter: alpha(opacity=0.9); content: 'viewport-units-buggyfill; height: 100vh;' 'min-height: 100vh;'; } .bottom #hero-bg-vid { position: fixed; width: 100%; height: 100vh; min-height: 100vh; overflow: hidden; z-index: 1; left: 0; top: 0; opacity: 0.4; -moz-opacity: 0.4; -khtml-opacity: 0.4; filter: alpha(opacity=0.4); content: 'viewport-units-buggyfill; height: 100vh;' 'min-height: 100vh;'; } .touch #hero-bg-vid { background-color: #000; background-image: none; } .vidspace { width: 100%; height: 100vh; overflow: hidden; position: relative; z-index: 1; content: 'viewport-units-buggyfill; height: 100vh;'; } .content { width: 100%; height: 100%; position: relative; z-index: 2; display: block; overflow: hidden; } .content section { float: left; width: 100%; padding-right: 0px; padding-top: 15px; padding-bottom: 15px; background: #000000; } .content section.no-padding-top { padding-top: 0; } .single .content section.padding-bottom { padding-bottom: 30px; } .single .content section.no-padding-bottom { padding-bottom: 0px; } .content section.project-intro { background: none; padding: 0; } .content section.featured-projects, .content section.delife, .content section.clients { padding-top: 0; padding-bottom: 0; } .content section header h2, .full-width-title header, .project-call-to-action header { max-width: 768px; margin: 50px auto 50px auto; text-align: center; padding: 0px 45px; font-size: 1.4em; line-height: 1.2em; float: none; } .home .content section header h2, .page-template-page-studio .content section header h2, .single-services .services-list h2, .single-services .featured-projects header h2 { margin: 0 auto 0 auto; padding: 0px 50px; } .single-services .services-list { padding-top: 0; } .home .content section header, .page-template-page-studio .content section header, .single-services .featured-projects header, .single-services .services-list header { padding: 67px 0; } .postid-2212 .featured-projects header { border-top: 1px solid #232323; } .home .content section.delife header { padding: 25px 0 44px 0; } .page-template-page-studio .services-list { padding-top: 0; } .page-template-page-studio .services-list header { border-bottom: 1px solid #232323; } .services-list .services-wrap { text-align: center; max-width: 830px; margin: 0 auto; padding: 0px 50px; } .services-list .services-wrap p { padding: 2px 0; font-size: 14px; line-height: 1.4em; margin-bottom: 0; } .content section header .view-more { width: 119px; margin: 0 auto 0 auto; padding: 20px 0 0 0; text-align: center; } .page-template-page-studio .content section header .view-more { width: 160px; margin: 0 auto 0 auto; padding: 20px 0 0 0; text-align: center; } .content section header .director-link { width: 145px; } .content section header .view-more p { font-size: 14px; padding: 0; margin: 0; float: left; } .content section header a p .icon-ArrowRightClean { font-size: 16px; margin: 0; padding-top: 0px; float: left; } .content section header .view-more a { text-decoration: none; } .content section header .sub-title p { text-align: center; margin: 0 0 20px 0; padding: 0; font-size: 14px; } main .last { float: left; } .featured-projects .m-all, .featured-projects .t-1of2, .featured-projects .d-1of2 { padding: 0; } .delife .m-all, .delife .t-1of3, .delife .t-1of2, .delife .d-1of6 { padding: 0; } .client .m-all, .clients .t-1of3, .clients .t-1of2, .clients .d-1of6 { padding: 0; } .clients { text-align: center; } .clients span { width: 150px; padding: 0px; text-align: center; line-height: 0; } .clients .client-grid { float: left; border-bottom: 1px solid #232323; border-top: 1px solid #232323; padding: 15px; } .clients .client-grid img { width: 150px; height: 150px; } .content section.client-references { float: left; text-align: center; padding-bottom: 0; } .content section.client-references h2 { margin: 35px auto; font-size: 1.4em; } .home .content section.client-references header { padding: 32px 0 33px 0; } .reference-grid { float: left; padding: 0 20px 48px 20px; } .reference-grid .d-1of3 { padding: 0 25px; } .client-references .icon-quote { font-size: 28px; } .client-references .ref { font-size: 14px; padding-top: 0; margin-top: 0; } .client-references .ref-name { font-size: 14px; font-weight: bold; padding-bottom: 5px; margin-bottom: 0; } .reference-grid p.quote-body { margin-top: 12px; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; font-size: 14px; } .reference-grid .div-line { float: none; margin: 0 auto; display: block; } .reference-grid .div-line-wrap { padding: 7px 0 20px 0; } .home .content section.services-list header { padding: 52px 0 65px 0; border-bottom: 1px solid #232323; } .services-grid { float: left; width: 100%; text-align: center; } .services-grid ul { text-align: center; } .services-grid ul li { padding: 2px 0; font-size: 14px; } .services-grid ul li a { text-decoration: none; } .services-grid h3.list-title { font-size: 18px; } .services-grid .div-line { margin: 0 auto; display: block; float: none; } .services-grid .div-line-wrap { padding: 0px 0 20px 0; } .single-services .services-grid .div-line { margin: 0; display: block; float: left; } .single-services .services-list .services-grid .div-line { margin: 0 auto; display: block; float: none; } .content .rollin { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); } .content .now { -webkit-transition: opacity 0.45s, -webkit-transform 0.45s; transition: opacity 0.45s, -webkit-transform 0.45s; transition: opacity 0.45s, transform 0.45s; transition: opacity 0.45s, transform 0.45s, -webkit-transform 0.45s; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); } .single-directors .content .rollin { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); } /********************* SERVICES STYLES *********************/ .vidspace-centre { margin: 0 auto; max-width: 860px; } .postid-2212 .vidspace-centre { margin: 0 auto; max-width: 980px; } .service-info-centre { margin: 0 auto; max-width: 900px; padding: 0 30px; } .service-info-wrap { height: 550px; position: relative; } .service-info-inner { left: 50%; top: 50%; position: absolute; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .service-info-content p { font-size: 14px; line-height: 1.3em; } .service-info-inner .service-info-content { max-width: 375px; } .service-info-inner .service-info-feature-img { width: 260px; height: auto; } .service-info-inner .service-info-feature-img img { width: 100%; height: auto; } .service-info-inner .service-info-content .cta-btn-form { margin-top: 15px; } .service-info-inner h2 { margin-top: 0; font-size: 1.4em; text-align: center; } .service-info { float: left; width: 100%; border-bottom: 1px solid #232323; border-top: 1px solid #232323; height: 550px; } .single-services .content section.services { padding-bottom: 0; } .single-services .header-tagline-wrap h1 { font-weight: 600; font-size: 22px; margin: 0; padding: 0; line-height: 1.2em; } .single-services .header-tagline-wrap p { font-size: 12px; line-height: 1.4em; margin: 0; opacity: 1; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; } .single-services .header-tagline-wrap h4 { font-weight: normal; font-size: 12px; line-height: 1.4em; padding: 0 0 12px 0; margin: 0; } .single-services .header-tagline-wrap .service-showreel-wrapper-mobile .see-more-btn { font-size: 12px; text-decoration: none; border-bottom: 2px solid #fff; } .single-services .header-tagline-wrap .service-showreel-wrapper-mobile { margin: 15px auto 15px auto; position: relative; height: 85px; width: 153px; } .single-services .header-tagline-wrap .inner-mobile { position: absolute; top: 0; width: 100%; height: 100%; z-index: 2; } .single-services .header-tagline-wrap .overlay-mobile { position: absolute; top: 0; width: 100%; height: 100%; z-index: 3; opacity: 0.1; -moz-opacity: 0.1; -khtml-opacity: 0.1; filter: alpha(opacity=0.1); background: #000000; } .single-services .header-tagline-wrap .mobile-play-icon { position: absolute; top: 0; width: 100%; height: 100%; z-index: 4; } .single-services .header-tagline-wrap .inner-mobile img { max-width: 153px; height: auto; border-radius: 10px; } .single-services .mobile-logo-header { height: 22px; width: 120px; margin: 0 auto 12px auto; } .single-services .header-tagline-wrap .service-showreel-wrapper-mobile h4 { font-weight: normal; font-size: 12px; line-height: 1.4em; padding: 0; margin: 0; } .single-services .header-tagline-wrap { width: 100%; left: 50%; padding: 0 15px 0 15px; display: block; position: absolute; text-align: center; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .single-services .header-main { max-width: 300px; margin: 0 auto; } .single-services .service-cta-wrapper-mobile .client-grid .m-1of4 { padding: 0; } .single-services .service-cta-wrapper-mobile .client-grid { max-width: 300px; margin: 0 auto; } .single-services .service-cta-wrapper { width: 295px; height: 530px; text-align: center; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); top: 50%; position: absolute; } .single-services .service-cta-wrapper-mobile h4 { margin: 0; padding: 0; } .single-services .service-showreel-wrapper { width: 260px; height: auto; padding-left: 40px; text-align: center; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); top: 50%; position: absolute; } .single-services .service-digital-wrapper { width: 260px; height: auto; padding-left: 40px; text-align: center; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); top: 50%; position: absolute; } .single-services .service-digital-wrapper .service-digital-watch-btn { position: absolute; left: 0px; } .single-services .service-digital-viewmore a { font-size: 14px; text-decoration: none; border-bottom: 2px solid #fff; padding-bottom: 4px; } .single-services .service-showreel-work-cta { padding: 10px; } .single-services .service-showreel-work-cta a { font-size: 14px; border-bottom: 2px solid #fff; text-decoration: none; } .single-services .service-showreel-inner .service-showreel-watch-btn { position: absolute; left: 0px; } .single-services .service-showreel-inner img { width: 100%; height: auto; } .single-services .service-showreel-inner .thumbnail-body img { width: 90px; height: 90px; } .header-holder { float: left; overflow: hidden; position: relative; width: 100%; height: 100vh; content: 'viewport-units-buggyfill; height: 100vh;'; display: block; } .single-services .service-showreel-title h3 { font-size: 14px; text-decoration: none; display: inline-block; height: 15px; padding-bottom: 0; margin-bottom: 15px; } .bottom .header-tagline-wrap { display: none; } .sub-service-list-1 { padding-left: 0; } .sub-service-list-2 { padding-right: 0; } .services-grid .m-all { padding: 15px; } .services-grid .row { float: left; width: 100%; } .sub-service li { padding: 2px 0; font-size: 0.8em; line-height: 1.3em; list-style-position: inside; text-indent: -20px; padding-left: 20px; } .sub-service li:before { font-family: 'icomoon'; content: "\e910"; float: left; width: 1.4em; color: #673BFF; } .single-services .header-tagline-wrap .service-showreel-wrapper-mobile a.video-link { display: block; } .single-services .header-tagline-wrap a.video-link { border-bottom: 2px solid #fff; line-height: 1; padding: 4px 0 8px 0; display: block; width: auto; float: left; margin: 8px 30px 0 0px; font-size: 0.9em; display: none; } .cta-btn { font-size: 0.9em; width: 230px; } .service-icon-wrap { width: 14.2857142857%; float: left; text-align: right; } .services-grid { width: 100%; padding: 50px 0; float: left; border-bottom: 1px solid #232323; border-top: 1px solid #232323; } .services-grid .service-icon-wrap span { width: 100%; font-size: 44px; } .service-icon-wrap h2.service-number { padding: 0; margin: 0 0 15px 0; line-height: 1.1; font-size: 1.4em; font-family: "ApercuRegular", Helvetica, Arial, sans-serif; } .service-content-wrap { width: 85.7142857%; float: left; padding-left: 30px; text-align: left; } .service-content-wrap h2 { padding: 0; margin: 0 0 15px 0; line-height: 1.1; font-size: 1.4em; } .service-preview .div-line-wrap { float: left; width: 100%; padding: 0px 0 15px 0; } .services .header-inner .div-line { float: none; width: 30px; margin: 0 auto; } .services .header-inner .div-line-wrap { padding: 0; } .header-inner { text-align: center; margin: 50px auto 50px auto; } .content section header .header-inner h2 { margin: 35px auto 0px auto; } .services-menu-wrap { text-align: center; } .services-menu-wrap ul { text-align: center; list-style: none; margin: 0; padding: 0; } .services-menu-wrap ul li { display: inline; margin: 0 5px; } .services-menu-wrap ul li a { display: inline-block; text-decoration: none; color: #464646; padding: 10px 0; border-bottom: 2px solid #000000; -webkit-transition: color 0.4s ease-in-out; transition: color 0.4s ease-in-out; -webkit-transition: border-bottom 0.4s ease-in-out; transition: border-bottom 0.4s ease-in-out; } .services-menu-wrap ul li.selected a { color: #fff; border-bottom: 2px solid #ffffff; -webkit-transition: border-bottom 0.4s ease-in-out; transition: border-bottom 0.4s ease-in-out; } .services-menu-wrap ul li a:hover, .services-menu-wrap ul li a:focus { -webkit-transition: color 0.4s ease-in-out; transition: color 0.4s ease-in-out; color: #ffffff; } ul.service-blocks li { display: none; } ul.service-blocks li.selected { display: block; } .contact-form-body span { padding-right: 10px; } .contact-form-body a { text-decoration: none; } .contact-form-body .icon-Vimeo-Icon { font-size: 14px; } .contact-form-header h2 { line-height: 1.1; font-size: 1.4em; } .cta-header { position: fixed; top: 0px; right: 0px; width: 100%; height: 60px; background: #000000; z-index: 50; -webkit-transition: z-index 0.6s ease-in-out; transition: z-index 0.6s ease-in-out; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); -webkit-transition: opacity 0.4s ease-in-out, top 0.4s ease-in-out; transition: opacity 0.4s ease-in-out, top 0.4s ease-in-out; } .scrolltop .cta-header { opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); top: -60px; -webkit-transition: opacity 0.4s ease-in-out, top 0.4s ease-in-out; transition: opacity 0.4s ease-in-out, top 0.4s ease-in-out; } .loading .cta-header { opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); } .open .cta-header { z-index: 50; -webkit-transition: z-index 0.4s ease-in-out; transition: z-index 0.4s ease-in-out; } .cta-header-title { position: absolute; top: 0; left: 0; width: 100%; text-align: center; padding: 12px 0 10px 0px; } .cta-title { font-weight: bold; } .cta-header-title .cta-btn { margin-left: 0px; font-size: 0.8em; width: 210px; padding: 10px 10px 10px 20px; } .cta-header-title .cta-btn .icon-ArrowRightClean { top: 10px; } .cta-header .cta-header-logo .icon-logo { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); width: 40px; height: 30px; top: 17px; } .cta-header .cta-header-logo .icon-logo img { width: 40px; height: auto; } .single-services .vidspace { background: #000000; padding-right: 0px; } /********************* CONTACT PAGE STYLES *********************/ .page-template-page-contact { padding-bottom: 0; } .page-template-page-contact .subscribe-wrap { width: 100%; float: left; margin-bottom: 10px; } .page-template-page-contact #cm-ajax-email p { padding: 0; margin: 0; } .page-template-page-contact #cm-ajax-email { border: none; padding: 0; margin: 0; background: none; border-bottom: 2px solid #ffffff; font-size: 0.9em; } .open-subscribe .footer-contact .subscribe-wrap { position: absolute; left: 0px; -webkit-transition: left 0.4s ease-in-out; transition: left 0.4s ease-in-out; } .footer-contact .subscribe-wrap { position: absolute; left: -250px; -webkit-transition: left 0.4s ease-in-out; transition: left 0.4s ease-in-out; } .footer-contact .subscribe-wrap p { padding: 0; margin: 0; } .footer-contact .subscribe-wrap p strong { font-weight: normal; } .footer-contact #cm-ajax-email { border: none; padding: 0; margin: 0; background: none; border-bottom: 2px solid #ffffff; font-size: 0.9em; max-width: 200px; } .footer-contact input[type="submit"] { background: none; text-align: left; color: #ffffff; padding: 0; border: none; margin: 15px 0; font-weight: bold; float: left; font-size: 14px; } .footer-contact .cm_ajax_loading, .page-template-page-contact .cm_ajax_loading { left: 0; width: 8em; height: 8em; margin-top: 15px; float: left; position: initial; } .footer-contact .cm_ajax_failed, .page-template-page-contact .cm_ajax_failed { font-size: 0.9em; padding-bottom: 10px; float: left; width: 100%; padding-right: 30px; } /********************* FOOTER FORM STYLES *********************/ .contact-form-wrap { float: left; width: 100%; padding: 30px 0 60px 0; } .contact-form-wrap li.gfield { float: left; padding: 0 15px; } .contact-form-wrap .gform_wrapper .top_label .gfield_label, .contact-form-wrap .gform_wrapper .field_sublabel_above .ginput_complex.ginput_container label { display: none; } .gform_wrapper ul li, .gform_wrapper ol li { padding-left: 0px; } #main .gform_wrapper .gform_footer, .gform_confirmation_wrapper { padding: 0 15px; } .gform_confirmation_wrapper h3 { padding: 15px; font-family: "ApercuRegular", Helvetica, Arial, sans-serif; color: #fff; text-decoration: none; background-color: #5DA423; text-transform: uppercase; border-radius: 4px; } .gform_confirmation_wrapper p { font-size: 13px; } button, html input[type="button"], input[type="reset"], input[type="submit"] { float: right; } .gform_wrapper ul.gform_fields li.gfield { padding-right: 0; } .gform_wrapper p.sub-title { text-transform: uppercase; font-size: 13px; } .gform_wrapper h3.sub-title { text-transform: uppercase; font-size: 13px; } .gform_wrapper ul.gform_fields li.gfield select { font-size: 13px; padding: 2px 0 2px 8px; color: #ababaa; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .contact-form-wrap textarea { font-size: 13px; padding: 8px 0 8px 8px; } .contact-form-wrap .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) { padding: 5px 10px; font-size: 13px; } .gform_wrapper .field_sublabel_above .gfield_description { color: #ccc; display: none; } .gform_wrapper.gf_browser_chrome .gfield_checkbox li input#choice_2_13_1[type=checkbox] { float: left; margin-right: 10px; } #main .gform_wrapper ul.gform_fields li.gfield { padding-right: 0px; } .contact-form-wrap .gform_wrapper .gfield_checkbox li input, .contact-form-wrap .gform_wrapper .gfield_checkbox li input[type=checkbox], #main .gform_wrapper .gfield_radio li input[type=radio] { float: left; margin-top: 3px; margin-right: 5px; } .gfield_error input, .gfield_error textarea { border: 1px solid #673BFF; } #gform_wrapper_1 { padding-right: 15px; } .gfield_visibility_hidden { display: none; } .validation_error { float: left; width: 100%; padding: 15px; } .gform_ajax_spinner { margin-left: 20px; border: 4px solid rgba(255, 255, 255, 0.3); border-left: 4px solid white; -webkit-animation: spinner 1.1s infinite linear; animation: spinner 1.1s infinite linear; border-radius: 50%; width: 30px; height: 30px; } @-webkit-keyframes spinner { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spinner { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .contact-form-header { padding: 0 15px; } .contact-form-body p.sub-head { font-weight: bold; } .contact-form-body p { font-size: 13px; } .contact-form-body .icon-DR_RedBull { font-size: 50px; } .contact-form-body .div-line-wrap { padding: 0px 0 14px 0; } /********************* PROJECT PAGE STYLES *********************/ .project-intro { width: 100%; height: 100vh; overflow: hidden; content: 'viewport-units-buggyfill;' 'height: 100vh;'; } .intro-copy-wrap { position: relative; height: 100%; background: #000000; padding: 0; border-bottom: 1px solid #232323; } .intro-copy { width: 100%; -webkit-transform: translateY(-50%); transform: translateY(-50%); top: 50%; position: absolute; left: 0; } .intro-copy-inner { width: 90%; max-width: none; margin: 0 auto; padding: 0 15px; } .intro-title { text-align: right; } .intro-copy h2 { text-align: right; display: inline-block; -webkit-transform: rotate(-90deg) translate(-100%, 0); transform: rotate(-90deg) translate(-100%, 0); moz-transform-origin: 0; -webkit-transform-origin: 0; transform-origin: 0; padding: 0; margin: 10px 20px; font-size: 1.8em; font-weight: bold; line-height: 1.1; float: left; } .intro-body-copy p, .service-content-wrap p { margin-top: 0; font-size: 0.9em; line-height: 1.3em; } .intro-body-copy h4.overview-title { margin: 0 0 20px 0; line-height: 1; } .intro-body-copy p.project-tags, .service-content-wrap p.project-tags { text-transform: uppercase; font-size: 0.75em; } .intro-body-copy p.project-tags a, .service-content-wrap p.project-tags a { text-decoration: none; } p.category-title { font-size: 0.9em; padding: 0; margin: 0 0 30px 9px; text-align: left; line-height: 1; display: none; } .div-line-wrap { float: left; width: 100%; padding: 5px 0 20px 0; } .div-line { float: left; border-bottom: 2px solid #fff; width: 30px; } .single .full-width-title { float: left; } .video-bg-section { width: 100%; height: 183px; position: relative; z-index: 4; } .content section.image-gallery { padding: 0; line-height: 0; } .content section.image-gallery.video-gal-dir { padding-bottom: 45px; } .content section.image-gallery.video-gal-dir a.thumbnail-link { opacity: 0.8; -moz-opacity: 0.8; -khtml-opacity: 0.8; filter: alpha(opacity=0.8); background: rgba(0, 0, 0, 0.1); -webkit-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; text-indent: inherit; } .content section.image-gallery.video-gal-dir a.thumbnail-link:hover, .content section.image-gallery.video-gal-dir a.thumbnail-link:focus { background: rgba(0, 0, 0, 0.4); -webkit-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; } .content section.image-gallery.video-gal-dir a.thumbnail-link:hover .icon-PlayIcon, .content section.image-gallery.video-gal-dir a.thumbnail-link:focus .icon-PlayIcon { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); } .content .image-gallery-inner { padding: 0 10px; float: left; width: 100%; } .content .image-gallery-inner h3 { font-size: 1.1em; font-family: "ApercuBold", Helvetica, Arial, sans-serif; margin: 10px 0 0 0; line-height: 1.15em; } .content .image-gallery-inner p { line-height: 1.4em; margin: 0; } .row-1 { width: 100%; max-width: 870px; margin: 0 auto; } .row-2 { width: 100%; max-width: 870px; margin: 0 auto; } .image-gallery img { width: 100%; height: auto; } .image-gallery .m-all, .image-gallery .t-all, .image-gallery .d-all, .image-gallery .t-1of2, .image-gallery .d-1of2 { padding: 10px; } .content section .full-width-title h3 { max-width: 768px; margin: 50px auto; text-align: center; padding: 0px 25px; font-size: 1.7em; line-height: 1.2em; float: none; } .content .full-width-title h3 { font-size: 1.1em; font-family: "ApercuBold", Helvetica, Arial, sans-serif; margin: 0; line-height: 1.15em; } .content .full-width-title p { font-size: 0.6em; line-height: 1.4em; margin: 25px 0 0 0; } .project-call-to-action { text-align: center; } .project-call-to-action h3 { font-size: 0.8em; line-height: 1.2em; margin: 0 0 15px 0; } .project-call-to-action p { font-size: 0.6em; line-height: 1.2em; } .project-call-to-action p a { text-decoration: none; border-bottom: 2px solid #fff; cursor: pointer; } .project-intro .feature-video { height: 40%; position: relative; background: #000000; } .page-template-page-contact .work-intro .video-bg-section { background-color: transparent; position: absolute; width: 100%; height: 100vh; overflow: hidden; z-index: 1; left: 0; top: 0; opacity: 1; content: 'viewport-units-buggyfill;' 'height: 100vh;'; } .single-work .work-intro .video-bg-section, .page-template-page-studio .work-intro .video-bg-section { background-color: transparent; position: absolute; width: 50%; height: 100vh; overflow: hidden; z-index: 1; right: 0; top: 0; opacity: 1; content: 'viewport-units-buggyfill;' 'height: 100vh;'; } .single-services #hero-bg-vid { width: 100%; right: auto; left: 0; } .single-directors .intro-copy-inner { padding: 0 20px 0 0px; } .single-directors .intro-copy-wrap { height: 60%; border-bottom: none; } .single-directors .video-bg-section { height: 100%; } .single-directors .intro-copy h2 { float: left; margin: -25px 20px 10px 20px; } .single-directors .p.category-title { margin: 0 0 30px 3px; } .single-directors .feature-video .thumbnail-wrap h4 { padding: 0; margin: 0; font-size: 1.2em; font-family: "ApercuBold", Helvetica, Arial, sans-serif; } .single-directors .feature-video .thumbnail-wrap { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 50; } .single-directors .feature-video .thumbnail-wrap .div-line-wrap { padding: 10px 0; } .single-directors .feature-video .thumbnail-wrap .div-line { margin: 0 auto; float: none; display: block; } .single-directors .thumbnail-wrap .play-icon .icon-PlayIcon { font-size: 50px; -webkit-transition: opacity 0.55s, -webkit-transform 0.35s; -webkit-transition: opacity 0.55s; transition: opacity 0.55s; } .single-directors .feature-video .thumbnail-wrap p { font-size: 0.9em; } .single-directors .vid-overlay { position: absolute; background: #000; width: 100%; height: 100%; opacity: 0.1; -moz-opacity: 0.1; -khtml-opacity: 0.1; filter: alpha(opacity=0.1); -webkit-transition: opacity 0.55s, -webkit-transform 0.35s; -webkit-transition: opacity 0.55s; transition: opacity 0.55s; } .feature-video .thumbnail-cover:focus .vid-overlay, .feature-video .thumbnail-cover:hover .vid-overlay { opacity: 0.7; -moz-opacity: 0.7; -khtml-opacity: 0.7; filter: alpha(opacity=0.7); -webkit-transition: opacity 0.55s, -webkit-transform 0.35s; -webkit-transition: opacity 0.55s; transition: opacity 0.55s; } .feature-video .thumbnail-cover:focus .icon-PlayIcon, .feature-video .thumbnail-cover:hover .icon-PlayIcon { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); -webkit-transition: opacity 0.55s, -webkit-transform 0.35s; -webkit-transition: opacity 0.55s; transition: opacity 0.55s; } .single-services .thumbnail-wrap .thumbnail-cover .play-icon-wrap { text-align: center; width: 100%; -webkit-transform: translateY(-49%); transform: translateY(-49%); top: 49%; left: 0; position: absolute; } .post-type-archive-directors .director-reel .thumbnail-wrap .thumbnail-cover .play-icon-wrap { text-align: center; width: 100%; -webkit-transform: translateY(-49%); transform: translateY(-49%); top: 49%; left: 0; position: absolute; } .single-services .thumbnail-wrap .quick-view:focus .thumbnail-body-inner, .single-services .thumbnail-wrap .quick-view:hover .thumbnail-body-inner { opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } .single-services .thumbnail-wrap .thumbnail-cover .thumbnail-body-inner { position: absolute; bottom: 0; left: 0; width: 100%; text-align: left; padding: 25px; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } .post-type-archive-directors .director-reel .thumbnail-wrap .quick-view:focus .thumbnail-body-inner, .post-type-archive-directors .director-reel .thumbnail-wrap .quick-view:hover .thumbnail-body-inner { opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } .post-type-archive-directors .director-reel .thumbnail-wrap .thumbnail-cover .thumbnail-body-inner { position: relative; bottom: 0; left: 0; width: 100%; height: 250px; text-align: left; padding: 25px; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } .single-services .thumbnail-body { height: 100%; } .single-services .thumbnail-wrap .thumbnail-cover .play-icon-wrap .icon-PlayIcon { opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); font-size: 70px; -webkit-transform: 0.35s; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } .single-services .thumbnail-wrap .thumbnail-cover:focus .play-icon-wrap .icon-PlayIcon, .single-services .thumbnail-wrap .thumbnail-cover:hover .play-icon-wrap .icon-PlayIcon { opacity: 0.4; -moz-opacity: 0.4; -khtml-opacity: 0.4; filter: alpha(opacity=0.4); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } .post-type-archive-directors .thumbnail-wrap .thumbnail-cover .play-icon-wrap .icon-PlayIcon { opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); font-size: 70px; -webkit-transform: 0.35s; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } .post-type-archive-directors .thumbnail-wrap .thumbnail-cover:focus .play-icon-wrap .icon-PlayIcon, .post-type-archive-directors .thumbnail-wrap .thumbnail-cover:hover .play-icon-wrap .icon-PlayIcon { opacity: 0.4; -moz-opacity: 0.4; -khtml-opacity: 0.4; filter: alpha(opacity=0.4); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } body.loading { overflow-y: hidden; } .loading .main-loader { width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: 100; background: #000; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); -webkit-transition: opacity 0.55s, -webkit-transform 0.35s; -webkit-transition: opacity 0.55s; transition: opacity 0.55s; visibility: visible; } .main-loader { width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: 100; visibility: hidden; background: #000; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity 0.55s, -webkit-transform 0.35s; -webkit-transition: opacity 0.55s; transition: opacity 0.55s; } .loader { width: 100%; height: 100%; display: none; position: absolute; top: 0; left: 0; z-index: 60; background: #000; } .loader-inner { -webkit-transform: translateY(-49%); transform: translateY(-49%); top: 49%; left: 49%; position: absolute; } .loaded { display: none; } .single-services .loaded { display: block; opacity: 0.4; -moz-opacity: 0.4; -khtml-opacity: 0.4; filter: alpha(opacity=0.4); } .single-services .loaded .loader-inner { display: none; } .full-width-video-bg { position: relative; } .full-width-image .d-all, .full-width-video-launch .d-all, .project-intro .d-all { padding: 0; } .phone-wrap { height: 233px; width: 120px; float: left; background: url("/wp-content/themes/derepublica/library/images/devices/iphoneX2.png") no-repeat; background-size: 100%; padding: 32px 13px 33px 13px; display: block; margin: 0; } .full-width-devices .d-all { width: 360px; margin: 50px auto; float: none; padding: 0; } .phone-wrap .viewport { height: 100%; width: 100%; } .content section.full-width-devices .bg-color { background: #fff; width: 100%; height: 100%; float: left; } .perspective-iphone .device-wrap { float: left; width: 100%; height: 340px; position: relative; background: #fff; } .perspective-iphone .device-wrap .viewport { width: 218px; height: 140px; margin: 0 auto; } .perspective-iphone .device-wrap .viewport-wrap { width: 100%; -webkit-transform: translateY(-50%); transform: translateY(-50%); top: 50%; position: absolute; left: 0; } .perspective-iphone .device-wrap .device-overlay { background: url("/wp-content/themes/derepublica/library/images/devices/iphone-perspectiveX2.png") no-repeat; width: 100%; height: 340px; position: absolute; left: 0; top: 0; z-index: 5; background-position: center center; background-size: 480px 418px; } /********************* PAGE STYLES *********************/ .page-template .content .row-1 { padding: 0 30px; } .page-template .content section.full-width-title header { margin: 50px auto; } .page-template .content .full-width-title h4 { font-size: 1.5em; } .page-template .content .full-width-title p { font-size: 1.4em; } .page-template .content .full-width-title ul { font-size: 1.5em; padding-bottom: 15px; } .page-template .content section.full-width-title header h2 { font-size: 1em; } .page-template .content .full-width-title h3 { font-size: 1.5em; border-bottom: 2px solid #fff; } .page-template .content section.delife { border-top: 1px solid #232323; } .page-template-page-studio .content section.delife { border-top: none; } .studio-link { float: left; margin: 30px 0; } .studio-link .icon-ArrowRight { float: left; font-size: 38px; margin-right: 25px; margin-left: 0px; -webkit-transition: margin-left 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, margin-right 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, transform 3s cubic-bezier(0.32, 0.96, 0.75, 1); -webkit-transition: margin-left 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, margin-right 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, -webkit-transform 3s cubic-bezier(0.32, 0.96, 0.75, 1); transition: margin-left 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, margin-right 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, -webkit-transform 3s cubic-bezier(0.32, 0.96, 0.75, 1); transition: margin-left 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, margin-right 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, transform 3s cubic-bezier(0.32, 0.96, 0.75, 1); transition: margin-left 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, margin-right 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, transform 3s cubic-bezier(0.32, 0.96, 0.75, 1), -webkit-transform 3s cubic-bezier(0.32, 0.96, 0.75, 1); } .page-template .content .studio-link p { float: left; margin: 0; padding: 0; line-height: 1.5; } .page-template .content .studio-link a:hover .icon-ArrowRight { margin-left: 10px; margin-right: 15px; -webkit-transition: margin-left 0.4s cubic-bezier(0.7, 0, 0.034, 1) 0ms, margin-right 0.4s cubic-bezier(0.7, 0, 0.034, 1) 0ms, transform 3s cubic-bezier(0.32, 0.96, 0.75, 1); -webkit-transition: margin-left 0.4s cubic-bezier(0.7, 0, 0.034, 1) 0ms, margin-right 0.4s cubic-bezier(0.7, 0, 0.034, 1) 0ms, -webkit-transform 3s cubic-bezier(0.32, 0.96, 0.75, 1); transition: margin-left 0.4s cubic-bezier(0.7, 0, 0.034, 1) 0ms, margin-right 0.4s cubic-bezier(0.7, 0, 0.034, 1) 0ms, -webkit-transform 3s cubic-bezier(0.32, 0.96, 0.75, 1); transition: margin-left 0.4s cubic-bezier(0.7, 0, 0.034, 1) 0ms, margin-right 0.4s cubic-bezier(0.7, 0, 0.034, 1) 0ms, transform 3s cubic-bezier(0.32, 0.96, 0.75, 1); transition: margin-left 0.4s cubic-bezier(0.7, 0, 0.034, 1) 0ms, margin-right 0.4s cubic-bezier(0.7, 0, 0.034, 1) 0ms, transform 3s cubic-bezier(0.32, 0.96, 0.75, 1), -webkit-transform 3s cubic-bezier(0.32, 0.96, 0.75, 1); } /********************* ARCHIVE STYLES *********************/ .vertical .thumbnail-body { position: absolute; width: 100%; } .vertical .thumbnail-body .thumbnail-title { position: absolute; bottom: 20px; left: 15px; } .vertical .thumbnail-body .thumbnail-category p { display: inline-block; -webkit-transform: rotate(-90deg) translate(-100%, 0); transform: rotate(-90deg) translate(-100%, 0); moz-transform-origin: top left 0; -webkit-transform-origin: top left 0; transform-origin: top left 0; padding: 0; margin: 0; height: 100%; position: absolute; left: 25px; bottom: 72px; } /********************* THUMBNAIL STYLES *********************/ .thumbnail-item { padding: 0; height: 250px; float: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .thumbnail-cover { width: 100%; height: 100%; overflow: hidden; position: relative; } .delife .thumbnail-cover .thumbnail-body { opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } .delife .thumbnail-cover:hover .thumbnail-body, .delife .thumbnail-cover:focus .thumbnail-body { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); -webkit-transition: opacity 0.55s, -webkit-transform 0.55s; -webkit-transition: opacity 0.55s; transition: opacity 0.55s; } .thumbnail-img-place { width: 100%; height: 100%; height: 250px; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); background-size: cover; background-position: center center; background-repeat: no-repeat; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: scale(1); transform: scale(1); } .content .vertical { height: 500px; } .content .vertical .thumbnail-img-place { height: 500px; } .content .director-reel .vertical { height: 250px; } .content .director-reel .vertical .thumbnail-img-place { height: 250px; } .vertical .thumbnail-title h2 { display: inline-block; -webkit-transform: rotate(-90deg) translate(-100%, 0); transform: rotate(-90deg) translate(-100%, 0); moz-transform-origin: top left 0; -webkit-transform-origin: top left 0; transform-origin: top left 0; padding: 0; margin: 0; } .thumbnail-cover:hover .thumbnail-img-place, .thumbnail-body:hover .thumbnail-img-place, .thumbnail-cover:focus .thumbnail-img-place, .thumbnail-body:focus .thumbnail-img-place { width: 100%; opacity: 0.7; -moz-opacity: 0.7; -khtml-opacity: 0.7; filter: alpha(opacity=0.7); background-size: cover; background-position: center center; background-repeat: no-repeat; -webkit-transition: opacity 0.55s, -webkit-transform 0.35s; transition: opacity 0.55s, -webkit-transform 0.35s; transition: opacity 0.55s, transform 0.35s; transition: opacity 0.55s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: scale(1.05); transform: scale(1.05); } .thumbnail-body { position: absolute; left: 0; bottom: 0; padding: 20px; color: #fff; z-index: 2; } .thumbnail-title { float: left; padding-left: 0px; width: 100%; height: 100%; } a.thumbnail-link { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 10; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; } .thumbnail-category p { font-size: 13px; margin: 0 0 5px 0; padding: 0; } .thumbnail-title h2 { padding: 0; margin: 0; line-height: 1.1; font-size: 1.7em; } .thumbnail-category p a { color: #fff; text-decoration: none; } .thumbnail-wrap .play-icon { -webkit-transform: translateY(-50%); transform: translateY(-50%); top: 50%; position: absolute; left: 0; padding: 0; bottom: auto; width: 100%; text-align: center; } .director-reel .thumbnail-wrap .play-icon { -webkit-transform: translateY(-50%); transform: translateY(-50%); top: 50%; position: absolute; left: 0; padding: 0; bottom: auto; width: 100%; height: 100%; text-align: center; } .thumbnail-wrap .play-icon .icon-PlayIcon { font-size: 90px; opacity: 0.6; -moz-opacity: 0.6; -khtml-opacity: 0.6; filter: alpha(opacity=0.6); } .delife .thumbnail-img-place { height: 150px; } .delife .thumbnail-item { height: 150px; } .delife .thumbnail-title h2 { padding: 0; margin: 0; line-height: 1.1; font-size: 0.9em; } .delife .thumbnail-body { padding: 20px; } /********************* LINK STYLES *********************/ a, a:visited { color: #fff; cursor: pointer; /* on hover */ /* on click */ /* mobile tap color */ } a:hover, a:focus, a:visited:hover, a:visited:focus { color: #e8e8e8; } a:link, a:visited:link { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3); } /****************************************************************** H1, H2, H3, H4, H5 STYLES ******************************************************************/ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { text-rendering: optimizelegibility; font-weight: 500; } h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a { text-decoration: none; } h1, .h1 { font-size: 2.5em; line-height: 1.333em; } h2, .h2 { font-size: 1.95em; line-height: 1.4em; margin-bottom: 0.375em; } h3, .h3 { font-size: 1.125em; } h4, .h4 { font-size: 1.1em; font-weight: 700; } h5, .h5 { font-size: 0.846em; line-height: 2.09em; text-transform: uppercase; letter-spacing: 2px; } /********************* HEADER STYLES *********************/ .header { background-color: #000000; } #logo { margin: 0.75em 0; } #logo a { color: #fff; } /********************* SIDEBAR NAV STYLES *********************/ .sidebar-bg { background: #000; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); position: fixed; left: 0; top: 0; z-index: 40; width: 100%; height: 100%; opacity: 0; -webkit-transition: opacity .8s ease-in-out .2s; transition: opacity .8s ease-in-out .2s; pointer-events: none; } .open .sidebar-bg { display: block; pointer-events: all; opacity: 0.4; -moz-opacity: 0.4; -khtml-opacity: 0.4; filter: alpha(opacity=0.4); -webkit-transition: opacity .6s ease-in-out 0ms; transition: opacity .6s ease-in-out 0ms; } .open-bottom .side-nav .sidebar-bg { background: #000; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); position: fixed; left: 0; top: 0; z-index: 40; width: 100%; height: 100%; opacity: 0; -webkit-transition: opacity .8s ease-in-out .2s; transition: opacity .8s ease-in-out .2s; pointer-events: none; } .side-nav { border-left: none; background: transparent; position: fixed; width: 60px; height: 100%; top: 0; right: 0px; z-index: 102; -webkit-transition: background 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, width 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, transform 0.5s cubic-bezier(0.28, 0, 0.55, 0.82), opacity 0.7s linear 0.9s; -webkit-transition: background 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, width 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, opacity 0.7s linear 0.9s, -webkit-transform 0.5s cubic-bezier(0.28, 0, 0.55, 0.82); transition: background 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, width 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, opacity 0.7s linear 0.9s, -webkit-transform 0.5s cubic-bezier(0.28, 0, 0.55, 0.82); transition: background 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, width 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, transform 0.5s cubic-bezier(0.28, 0, 0.55, 0.82), opacity 0.7s linear 0.9s; transition: background 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, width 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, transform 0.5s cubic-bezier(0.28, 0, 0.55, 0.82), opacity 0.7s linear 0.9s, -webkit-transform 0.5s cubic-bezier(0.28, 0, 0.55, 0.82); } .open .side-nav { background: #000000; position: fixed; width: 100%; height: 100%; top: 0; right: 0px; z-index: 102; -webkit-transition: background 0.3s cubic-bezier(0.7, 0, 0.034, 1) 0ms, width 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, transform 3s cubic-bezier(0.32, 0.96, 0.75, 1), opacity 0.7s linear 0.8s; -webkit-transition: background 0.3s cubic-bezier(0.7, 0, 0.034, 1) 0ms, width 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, opacity 0.7s linear 0.8s, -webkit-transform 3s cubic-bezier(0.32, 0.96, 0.75, 1); transition: background 0.3s cubic-bezier(0.7, 0, 0.034, 1) 0ms, width 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, opacity 0.7s linear 0.8s, -webkit-transform 3s cubic-bezier(0.32, 0.96, 0.75, 1); transition: background 0.3s cubic-bezier(0.7, 0, 0.034, 1) 0ms, width 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, transform 3s cubic-bezier(0.32, 0.96, 0.75, 1), opacity 0.7s linear 0.8s; transition: background 0.3s cubic-bezier(0.7, 0, 0.034, 1) 0ms, width 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, transform 3s cubic-bezier(0.32, 0.96, 0.75, 1), opacity 0.7s linear 0.8s, -webkit-transform 3s cubic-bezier(0.32, 0.96, 0.75, 1); } .arrow-push { position: fixed; left: 20px; width: 0px; overflow: hidden; bottom: 20px; z-index: 60; cursor: pointer; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity 0.35s, width 0.7s, -webkit-transform 0.35s; -webkit-transition: opacity 0.35s, width 0.7s; transition: opacity 0.35s, width 0.7s; } .scrolltop .arrow-push, .bottom .arrow-push, .touch .arrow-push { position: fixed; width: 40px; z-index: 60; cursor: pointer; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); -webkit-transition: opacity 0.55s,width 0.1s, -webkit-transform 0.55s; -webkit-transition: opacity 0.55s, width 0.1s; transition: opacity 0.55s, width 0.1s; } .arrow-push span.icon-ArrowDown { visibility: hidden; } .scrolltop .arrow-push span.icon-ArrowDown { visibility: visible; } .single-services .arrow-push { display: none; } .single-services .icon-logo { display: none; } .arrow-push span.icon-ArrowUp { visibility: hidden; } .bottom .arrow-push span.icon-ArrowUp { visibility: visible; } .bottom .footer-wrap span.icon-ArrowUp { position: fixed; width: 40px; z-index: 2; bottom: 20px; left: 20px; font-size: 38px; } .bottom .arrow-push span.icon-ArrowDown { position: fixed; width: 40px; z-index: 60; cursor: pointer; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); -webkit-transition: opacity 0.55s,width 0.1s, -webkit-transform 0.55s; -webkit-transition: opacity 0.55s, width 0.1s; transition: opacity 0.55s, width 0.1s; } .arrow-push span.icon-ArrowDown, .footer-wrap .icon-ArrowUp { font-size: 38px; color: #fff; -webkit-transition: color 0.14s ease-in-out; transition: color 0.14s ease-in-out; cursor: pointer; } .arrow-push span.icon-ArrowDown:hover, .footer-wrap .icon-ArrowUp:hover { -webkit-transition: color 0.14s ease-in-out; transition: color 0.14s ease-in-out; color: #535353; } .bottom .footer-wrap { display: block; } .footer-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; content: 'viewport-units-buggyfill;' 'height: 100vh;'; display: none; } .footer-contact-wrap { text-align: center; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); width: 100%; left: 50%; position: fixed; z-index: 2; -webkit-transition: opacity 0.35s, width 0.7s, -webkit-transform 0.35s; -webkit-transition: opacity 0.35s, width 0.7s; transition: opacity 0.35s, width 0.7s; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); top: 50%; padding-right: 30px; visibility: hidden; } .bottom .footer-contact-wrap { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); -webkit-transition: opacity 0.55s,width 0.1s, -webkit-transform 0.55s; -webkit-transition: opacity 0.55s, width 0.1s; transition: opacity 0.55s, width 0.1s; width: 100%; visibility: visible; } .bottom .footer-wrap .icon-logo { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); -webkit-transition: opacity 0.55s, -webkit-transform 0.55s; -webkit-transition: opacity 0.55s; transition: opacity 0.55s; left: 20px; top: 20px; z-index: 2; } .footer-contact-wrap h2 { font-size: 1.7em; font-weight: bold; line-height: 1.1em; margin: 0; } .footer-contact-wrap h3 { font-size: 14px; margin: 30px 0 0 0; } .footer-contact-wrap p { font-size: inherit; line-height: 1.4em; } .footer-contact-wrap p a, .footer-contact-wrap a { text-decoration: none; cursor: pointer; } .footer-contact-wrap ul li { font-size: 18px; padding: 0; } .footer-contact-wrap ul li h3 { font-size: 14px; padding: 0; margin: 5px 0; } .footer-contact-wrap ul li a { text-decoration: none; } .footer-contact-wrap .div-line-wrap { padding: 15px 0 18px 0; } .footer-contact-wrap p.contact-action, .page-template-page-contact p.contact-action { margin: 0; } .footer-contact-wrap .contact-action a, .page-template-page-contact .contact-action a { text-decoration: none; cursor: pointer; border-bottom: 2px solid #fff; line-height: 1.5em; } .footer-contact-wrap a.cta-btn-form { border-bottom: none; font-size: 14px; max-width: 228px; padding: 18px 10px 18px 20px; } .bottom .footer-contact-wrap .div-line { margin: 0 auto; float: none; display: block; } .page-template-page-contact .contact-action a.cta-btn-form { border-bottom: none; } .header-tagline-wrap { width: 100%; left: 0; padding: 0 90px 0 30px; position: fixed; z-index: 3; -webkit-transform: translateY(-50%); transform: translateY(-50%); top: 50%; } .header-tagline-wrap h2 { opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); float: left; font-size: 1.3em; line-height: 1.2em; width: 100%; -webkit-transition: margin-top 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, transform 0.2s cubic-bezier(0.28, 0, 0.55, 0.82), opacity 0.2s linear 0.2s; -webkit-transition: margin-top 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, opacity 0.2s linear 0.2s, -webkit-transform 0.2s cubic-bezier(0.28, 0, 0.55, 0.82); transition: margin-top 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, opacity 0.2s linear 0.2s, -webkit-transform 0.2s cubic-bezier(0.28, 0, 0.55, 0.82); transition: margin-top 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, transform 0.2s cubic-bezier(0.28, 0, 0.55, 0.82), opacity 0.2s linear 0.2s; transition: margin-top 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, transform 0.2s cubic-bezier(0.28, 0, 0.55, 0.82), opacity 0.2s linear 0.2s, -webkit-transform 0.2s cubic-bezier(0.28, 0, 0.55, 0.82); padding: 0; margin: 50px 0 0 0; } .no-touch .scrolltop .header-tagline-wrap h2 { margin-top: 0px; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); -webkit-transition: margin-top 0.1s cubic-bezier(0.7, 0, 0.034, 1) 0ms, transform 0.1s cubic-bezier(0.32, 0.96, 0.75, 1), opacity 0.1s linear 0.2s; -webkit-transition: margin-top 0.1s cubic-bezier(0.7, 0, 0.034, 1) 0ms, opacity 0.1s linear 0.2s, -webkit-transform 0.1s cubic-bezier(0.32, 0.96, 0.75, 1); transition: margin-top 0.1s cubic-bezier(0.7, 0, 0.034, 1) 0ms, opacity 0.1s linear 0.2s, -webkit-transform 0.1s cubic-bezier(0.32, 0.96, 0.75, 1); transition: margin-top 0.1s cubic-bezier(0.7, 0, 0.034, 1) 0ms, transform 0.1s cubic-bezier(0.32, 0.96, 0.75, 1), opacity 0.1s linear 0.2s; transition: margin-top 0.1s cubic-bezier(0.7, 0, 0.034, 1) 0ms, transform 0.1s cubic-bezier(0.32, 0.96, 0.75, 1), opacity 0.1s linear 0.2s, -webkit-transform 0.1s cubic-bezier(0.32, 0.96, 0.75, 1); } .touch .header-tagline-wrap h2 { margin-top: 0px; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); -webkit-transition: margin-top 0.1s cubic-bezier(0.7, 0, 0.034, 1) 0ms, transform 0.1s cubic-bezier(0.32, 0.96, 0.75, 1), opacity 0.1s linear 0.2s; -webkit-transition: margin-top 0.1s cubic-bezier(0.7, 0, 0.034, 1) 0ms, opacity 0.1s linear 0.2s, -webkit-transform 0.1s cubic-bezier(0.32, 0.96, 0.75, 1); transition: margin-top 0.1s cubic-bezier(0.7, 0, 0.034, 1) 0ms, opacity 0.1s linear 0.2s, -webkit-transform 0.1s cubic-bezier(0.32, 0.96, 0.75, 1); transition: margin-top 0.1s cubic-bezier(0.7, 0, 0.034, 1) 0ms, transform 0.1s cubic-bezier(0.32, 0.96, 0.75, 1), opacity 0.1s linear 0.2s; transition: margin-top 0.1s cubic-bezier(0.7, 0, 0.034, 1) 0ms, transform 0.1s cubic-bezier(0.32, 0.96, 0.75, 1), opacity 0.1s linear 0.2s, -webkit-transform 0.1s cubic-bezier(0.32, 0.96, 0.75, 1); } .header-tagline { float: left; margin: 15px 0; width: 100%; } .header-tagline-2 { float: left; margin: 0 0 15px 0; width: 100%; max-width: 300px; } .header-tagline-2 h3 { opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); line-height: 1.5em; text-decoration: underline; padding: 4px 0; margin: 0; } .header-tagline-1 p { opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); font-size: 14px; padding: 0; margin: 0 0 5px 0; } .header-tagline .cta-btn-form { opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); } .touch .scrolltop .header-tagline .cta-btn-form, .no-touch .scrolltop .header-tagline .cta-btn-form, .no-touch .scrolltop .header-tagline-wrap h3, .no-touch .scrolltop .header-tagline-wrap p, .touch .scrolltop .header-tagline-wrap h3, .touch .scrolltop .header-tagline-wrap p { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); -webkit-transition: margin-top 0.1s cubic-bezier(0.7, 0, 0.034, 1) 0ms, transform 0.1s cubic-bezier(0.32, 0.96, 0.75, 1), opacity 0.1s linear 0.2s; -webkit-transition: margin-top 0.1s cubic-bezier(0.7, 0, 0.034, 1) 0ms, opacity 0.1s linear 0.2s, -webkit-transform 0.1s cubic-bezier(0.32, 0.96, 0.75, 1); transition: margin-top 0.1s cubic-bezier(0.7, 0, 0.034, 1) 0ms, opacity 0.1s linear 0.2s, -webkit-transform 0.1s cubic-bezier(0.32, 0.96, 0.75, 1); transition: margin-top 0.1s cubic-bezier(0.7, 0, 0.034, 1) 0ms, transform 0.1s cubic-bezier(0.32, 0.96, 0.75, 1), opacity 0.1s linear 0.2s; transition: margin-top 0.1s cubic-bezier(0.7, 0, 0.034, 1) 0ms, transform 0.1s cubic-bezier(0.32, 0.96, 0.75, 1), opacity 0.1s linear 0.2s, -webkit-transform 0.1s cubic-bezier(0.32, 0.96, 0.75, 1); } .single-services .header-tagline { float: none; margin: 14px auto; width: 100%; max-width: 300px; } /* .header-tagline-wrap p{float: left; @include opacity(0);font-size: 13px;line-height: 1.2em;margin: 50px 0 0 0; width:100%; -webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%); top: 50%;@include transition(margin-top .5s cubic-bezier(.8,0,.38,1) .3s, transform .3s cubic-bezier(.28,0,.55,.82), opacity .3s linear .3s);} .no-touch .scrolltop .header-tagline-wrap p{margin-top: 20px; @include opacity(1);@include transition( margin-top .2s cubic-bezier(.7,0,.034,1) 0ms, transform 0.2s cubic-bezier(.32,.96,.75,1), opacity .2s linear .3s);} .touch .header-tagline-wrap p{margin-top: 20px; @include opacity(1);@include transition( margin-top .2s cubic-bezier(.7,0,.034,1) 0ms, transform 0.2s cubic-bezier(.32,.96,.75,1), opacity .2s linear .3s);} */ .header-tagline-wrap h2 a { font-size: 0.6em; border-bottom: 2px solid #fff; line-height: 1; padding: 4px 0 8px 0; display: block; width: auto; float: left; margin-right: 20px; } .loading .icon-logo { -webkit-animation: flagAnimation 1s infinite; animation: flagAnimation 1s infinite; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); -webkit-transition: opacity 0.15s, -webkit-transform 0.15s; -webkit-transition: opacity 0.15s; transition: opacity 0.15s; } .icon-logo { position: fixed; left: 20px; top: 20px; z-index: 101; max-width: 50px; width: 50px; height: 38px; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } .icon-logo a { display: block; width: 50px; height: 38px; } .icon-logo img { width: 50px; height: auto; } .scrolltop .icon-logo { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); -webkit-transition: opacity 0.55s, -webkit-transform 0.55s; -webkit-transition: opacity 0.55s; transition: opacity 0.55s; } .loading .nav-btn-wrap { right: -90px; } .nav-btn-wrap { padding: 20px 20px; position: fixed; right: 0; z-index: 105; -webkit-transition: right 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, transform 0.5s cubic-bezier(0.28, 0, 0.55, 0.82), opacity 0.7s linear 0.9s; -webkit-transition: right 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, opacity 0.7s linear 0.9s, -webkit-transform 0.5s cubic-bezier(0.28, 0, 0.55, 0.82); transition: right 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, opacity 0.7s linear 0.9s, -webkit-transform 0.5s cubic-bezier(0.28, 0, 0.55, 0.82); transition: right 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, transform 0.5s cubic-bezier(0.28, 0, 0.55, 0.82), opacity 0.7s linear 0.9s; transition: right 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, transform 0.5s cubic-bezier(0.28, 0, 0.55, 0.82), opacity 0.7s linear 0.9s, -webkit-transform 0.5s cubic-bezier(0.28, 0, 0.55, 0.82); } .nav-btn-wrap .icon-MenuIcon { font-size: 20px; } .logotype { bottom: 0; left: 0; position: absolute; padding: 34px 30px; z-index: 50; } .side-nav .logotype { left: 0; right: auto; position: absolute; } .side-nav .logotype .svg-icon-DeRepublicaVertical img { width: 32px; height: auto; } .stroke { margin: 20px auto; background: #ffffff; width: 2px; padding: 20px 0; } .side-nav .stroke, .side-nav .status-text, .side-nav .logotype .svg-icon-DeRepublicaVertical, .footer-wrap .logotype .svg-icon-DeRepublicaVertical { opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); -webkit-transition: margin-top 0.2s cubic-bezier(0.7, 0, 0.034, 1) 0ms, transform 0.2s cubic-bezier(0.32, 0.96, 0.75, 1), opacity 0.2s linear 0.3s; -webkit-transition: margin-top 0.2s cubic-bezier(0.7, 0, 0.034, 1) 0ms, opacity 0.2s linear 0.3s, -webkit-transform 0.2s cubic-bezier(0.32, 0.96, 0.75, 1); transition: margin-top 0.2s cubic-bezier(0.7, 0, 0.034, 1) 0ms, opacity 0.2s linear 0.3s, -webkit-transform 0.2s cubic-bezier(0.32, 0.96, 0.75, 1); transition: margin-top 0.2s cubic-bezier(0.7, 0, 0.034, 1) 0ms, transform 0.2s cubic-bezier(0.32, 0.96, 0.75, 1), opacity 0.2s linear 0.3s; transition: margin-top 0.2s cubic-bezier(0.7, 0, 0.034, 1) 0ms, transform 0.2s cubic-bezier(0.32, 0.96, 0.75, 1), opacity 0.2s linear 0.3s, -webkit-transform 0.2s cubic-bezier(0.32, 0.96, 0.75, 1); } .open .side-nav .logotype .svg-icon-DeRepublicaVertical, .bottom .footer-wrap .logotype .svg-icon-DeRepublicaVertical { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); -webkit-transition: margin-top 0.1s cubic-bezier(0.7, 0, 0.034, 1) 0ms, transform 0.1s cubic-bezier(0.32, 0.96, 0.75, 1), opacity 0.1s linear 0.1s; -webkit-transition: margin-top 0.1s cubic-bezier(0.7, 0, 0.034, 1) 0ms, opacity 0.1s linear 0.1s, -webkit-transform 0.1s cubic-bezier(0.32, 0.96, 0.75, 1); transition: margin-top 0.1s cubic-bezier(0.7, 0, 0.034, 1) 0ms, opacity 0.1s linear 0.1s, -webkit-transform 0.1s cubic-bezier(0.32, 0.96, 0.75, 1); transition: margin-top 0.1s cubic-bezier(0.7, 0, 0.034, 1) 0ms, transform 0.1s cubic-bezier(0.32, 0.96, 0.75, 1), opacity 0.1s linear 0.1s; transition: margin-top 0.1s cubic-bezier(0.7, 0, 0.034, 1) 0ms, transform 0.1s cubic-bezier(0.32, 0.96, 0.75, 1), opacity 0.1s linear 0.1s, -webkit-transform 0.1s cubic-bezier(0.32, 0.96, 0.75, 1); } .logotype, .footer-wrap .logotype { position: fixed; right: 0; bottom: 0; left: auto; } .footer-wrap .logotype { z-index: 2; padding: 20px 18px; } .mobile-intro .logotype { position: fixed; right: 0; bottom: 0; left: auto; z-index: 60; font-size: 140px; padding: 0px 20px; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } .scrolltop .mobile-intro .logotype { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } .vidspace .logotype .svg-icon-DeRepublicaVertical, .footer-wrap .logotype .svg-icon-DeRepublicaVertical img { width: 25px; height: auto; } .vidspace .logotype { right: 0; left: auto; position: fixed; } .side-nav .status-text { height: 420px; bottom: 294px; position: absolute; padding: 0 35px; z-index: 50; font-size: 14px; } .status-text .social-links { text-align: left; display: inline-block; height: 20px; width: 420px; -webkit-transform: rotate(-90deg) translate(-100%, 0); transform: rotate(-90deg) translate(-100%, 0); moz-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; } .main-menu { position: absolute; left: 0; padding: 15px 30px 0 30px; z-index: 90; line-height: 1.4; } .main-menu ul { padding: 0; margin: 0; } .main-menu ul li { font-size: 38px; padding: 0; margin: 0; } .main-menu ul li a { text-decoration: none; color: #fff; border-bottom: 3px solid #000000; -webkit-transition: border-bottom 0.1s ease-in-out; transition: border-bottom 0.1s ease-in-out; } .main-menu ul li a:hover, .main-menu ul li a:focus { border-bottom: 3px solid #fff; } .main-menu ul li.work { -webkit-transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out; opacity: 0.01; -moz-opacity: 0.01; -khtml-opacity: 0.01; filter: alpha(opacity=0.01); } .main-menu ul li.directors { -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; opacity: 0.01; -moz-opacity: 0.01; -khtml-opacity: 0.01; filter: alpha(opacity=0.01); } .main-menu ul li.studio { -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; opacity: 0.01; -moz-opacity: 0.01; -khtml-opacity: 0.01; filter: alpha(opacity=0.01); } .main-menu ul li.contact { -webkit-transition: opacity 0.1s ease-in-out; transition: opacity 0.1s ease-in-out; opacity: 0.01; -moz-opacity: 0.01; -khtml-opacity: 0.01; filter: alpha(opacity=0.01); } .open .main-menu ul li.work { -webkit-transition: opacity 0.8s ease-in-out; transition: opacity 0.8s ease-in-out; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); } .open .main-menu ul li.directors { -webkit-transition: opacity 1.2s ease-in-out; transition: opacity 1.2s ease-in-out; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); } .open .main-menu ul li.studio { -webkit-transition: opacity 1.6s ease-in-out; transition: opacity 1.6s ease-in-out; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); } .open .main-menu ul li.contact { -webkit-transition: opacity 2s ease-in-out; transition: opacity 2s ease-in-out; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); } /********************* NAVIGATION STYLES *********************/ .nav { border-bottom: 0; margin: 0; /* end .menu li */ /* highlight current page */ /* end current highlighters */ } .nav li a { display: block; color: #fff; text-decoration: none; padding: 0.75em; } .nav li ul.sub-menu li a, .nav li ul.children li a { padding-left: 30px; } /* end .nav */ /********************* POSTS & CONTENT STYLES *********************/ #content { margin-top: 1.5em; } .hentry header { border-bottom: 1px solid #f8f9fa; padding: 1.5em; } .hentry footer { padding: 1.5em; border-top: 1px solid #f8f9fa; } .hentry footer p { margin: 0; } /* end .hentry */ .single-title, .page-title, .entry-title { margin: 0; } /* want to style individual post classes? Booya! */ /* post by id (i.e. post-3) */ /* general post style */ /* general article on a page style */ /* general style on an attatchment */ /* sticky post style */ /* hentry class */ /* style by category (i.e. category-videos) */ /* style by tag (i.e. tag-news) */ /* post meta */ .byline { color: #9fa6b4; font-style: italic; margin: 0; } /* entry content */ .entry-content { padding: 1.5em 1.5em 0; /* image alignment on a screen this size may be a bit difficult. It's set to start aligning and floating images at the next breakpoint, but it's up to you. Feel free to change it up. */ } .entry-content p { margin: 0 0 1.5em; } .entry-content table { width: 100%; border: 1px solid #eaedf2; margin-bottom: 1.5em; } .entry-content table caption { margin: 0 0 7px; font-size: 0.75em; color: #9fa6b4; text-transform: uppercase; letter-spacing: 1px; } .entry-content tr { border-bottom: 1px solid #eaedf2; } .entry-content tr:nth-child(even) { background-color: #f8f9fa; } .entry-content td { padding: 7px; border-right: 1px solid #eaedf2; } .entry-content td:last-child { border-right: 0; } .entry-content th { background-color: #f8f9fa; border-bottom: 1px solid #eaedf2; border-right: 1px solid #eaedf2; } .entry-content th:last-child { border-right: 0; } .entry-content blockquote { margin: 0 0 1.5em 0.75em; padding: 0 0 0 0.75em; border-left: 3px solid #2980b9; font-style: italic; color: #9fa6b4; } .entry-content dd { margin-left: 0; font-size: 0.9em; color: #787878; margin-bottom: 1.5em; } .entry-content img { margin: 0 0 1.5em 0; max-width: 100%; height: auto; } .entry-content .size-auto, .entry-content .size-full, .entry-content .size-large, .entry-content .size-medium, .entry-content .size-thumbnail { max-width: 100%; height: auto; } .entry-content pre { background: #000000; color: #f8f9fa; font-size: 0.9em; padding: 1.5em; margin: 0 0 1.5em; border-radius: 3px; } /* end .entry-content */ .wp-caption { max-width: 100%; background: #eee; padding: 5px; /* images inside wp-caption */ } .wp-caption img { max-width: 100%; margin-bottom: 0; width: 100%; } .wp-caption p.wp-caption-text { font-size: 0.85em; margin: 4px 0 7px; text-align: center; } /* end .wp-caption */ /* image gallery styles */ /* end .gallery */ /* gallery caption styles */ .tags { margin: 0; } /****************************************************************** PAGE NAVI STYLES ******************************************************************/ .pagination, .wp-prev-next { margin: 1.5em 0; } .pagination { text-align: center; } .pagination ul { display: inline-block; background-color: #fff; white-space: nowrap; padding: 0; clear: both; border-radius: 3px; } .pagination li { padding: 0; margin: 0; float: left; display: inline; overflow: hidden; border-right: 1px solid #eaedf2; } .pagination a, .pagination span { margin: 0; text-decoration: none; padding: 0; line-height: 1em; font-size: 1em; font-weight: normal; padding: 0.75em; min-width: 1em; display: block; color: #2980b9; } .pagination a:hover, .pagination a:focus, .pagination span:hover, .pagination span:focus { background-color: #2980b9; color: #fff; } .pagination .current { cursor: default; color: #fff; } .pagination .current:hover, .pagination .current:focus { background-color: #fff; color: #fff; } /* end .bones_page_navi */ /* fallback previous & next links */ .wp-prev-next .prev-link { float: left; } .wp-prev-next .next-link { float: right; } /* end .wp-prev-next */ /********************* FOOTER STYLES *********************/ .footer { clear: both; background-color: #000000; color: #f8f9fa; } /* if you checked out the link above: http://www.alistapart.com/articles/organizing-mobile/ you'll want to style the footer nav a bit more in-depth. Remember to keep it simple because you'll have to override these styles for the desktop view. */ /* end .footer-links */ @media only screen and (max-width: 374px) { .header-main h4 { display: none; } .single-services .header-tagline { margin: 10px auto; } .single-services .header-tagline-wrap .service-showreel-wrapper-mobile { margin: 8px auto 15px auto; } } /********************* LARGER MOBILE DEVICES This is for devices like the Galaxy Note or something that's larger than an iPhone but smaller than a tablet. Let's call them tweeners. *********************/ @media only screen and (min-width: 481px) { /****************************************************************** Site Name: Author: Stylesheet: 481px and Up Stylesheet ******************************************************************/ /********************* THUMBNAIL STYLES *********************/ .thumbnail-img-place { height: 325px; } .thumbnail-item { height: 325px; } .content .vertical { height: 650px; } .content .vertical .thumbnail-img-place { height: 650px; } .content .director-reel .vertical { height: 325px; } .content .director-reel .vertical .thumbnail-img-place { height: 325px; } .post-type-archive-directors .director-reel .thumbnail-wrap .thumbnail-cover .thumbnail-body-inner { height: 325px; } .delife .thumbnail-img-place { height: 280px; } .delife .thumbnail-item { height: 280px; } .video-bg-section { height: 271px; } /********************* SERVICES STYLES *********************/ .services-grid .service-icon-wrap span { width: 100%; font-size: 34px; } .footer-contact-wrap a.manual-link { display: none; } .footer-contact-wrap a.form-link { display: block; } .header-tagline-wrap a.manual-link { display: none; } .header-tagline-wrap a.form-link { display: inline-block; } .footer-contact-wrap a.form-link { display: block; } .page-template-page-contact a.manual-link { display: none; } .page-template-page-contact a.form-link { display: inline-block; } /********************* PROJECT PAGE STYLES *********************/ .content .image-gallery-inner { padding: 0 15px; float: left; width: 100%; } .row-1 { width: 100%; max-width: 870px; margin: 0 auto; } .row-2 { width: 100%; max-width: 870px; margin: 0 auto; } .image-gallery img { width: 100%; height: auto; } .image-gallery .m-all, .image-gallery .t-all, .image-gallery .d-all, .image-gallery .t-1of2, .image-gallery .d-1of2 { padding: 15px; } .intro-copy-inner { width: 95%; max-width: 400px; margin: 0 auto; } .single-directors .intro-copy-inner { padding: 0 20px 0 0px; } .perspective-iphone .device-wrap { float: left; width: 100%; height: 340px; position: relative; background: #fff; } .perspective-iphone .device-wrap .viewport { width: 260px; height: 167px; margin: 0 auto; } .perspective-iphone .device-wrap .viewport-wrap { width: 100%; -webkit-transform: translateY(-50%); transform: translateY(-50%); top: 50%; position: absolute; left: 0; } .perspective-iphone .device-wrap .device-overlay { background: url("/wp-content/themes/derepublica/library/images/devices/iphone-perspectiveX2.png") no-repeat; width: 100%; height: 340px; position: absolute; left: 0; top: 0; z-index: 5; background-position: center center; background-size: 580px 504px; } /********************* NAVIGATION STYLES *********************/ /* .menu is clearfixed inside mixins.scss */ .menu { /* end .menu ul */ } .menu ul { /* end .menu ul li */ /* highlight current page */ /* end current highlighters */ } .menu ul li { /* plan your menus and drop-downs wisely. */ } .menu ul li a { /* you can use hover styles here even though this size has the possibility of being a mobile device. */ } /* end .menu */ /********************* SIDEBAR NAV STYLES *********************/ .header-tagline-wrap h2 { font-size: 1.6em; } .sidebar-bg { background: #000; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); position: fixed; left: 0; top: 0; z-index: 40; width: 100%; height: 100%; opacity: 0; -webkit-transition: opacity .8s ease-in-out .2s; transition: opacity .8s ease-in-out .2s; pointer-events: none; } .open .sidebar-bg { display: block; pointer-events: all; opacity: 0.4; -moz-opacity: 0.4; -khtml-opacity: 0.4; filter: alpha(opacity=0.4); -webkit-transition: opacity .6s ease-in-out 0ms; transition: opacity .6s ease-in-out 0ms; } .icon-logo { position: fixed; left: 30px; top: 30px; z-index: 101; display: block; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } .scrolltop .icon-logo { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); -webkit-transition: opacity 0.55s, -webkit-transform 0.55s; -webkit-transition: opacity 0.55s; transition: opacity 0.55s; } .nav-btn-wrap { padding: 20px 30px; position: fixed; right: 0; z-index: 103; } .nav-btn-wrap .icon-MenuIcon { font-size: 20px; } .logotype { bottom: 0; left: 0; position: absolute; padding: 34px 30px; z-index: 50; } .stroke { margin: 20px 12px; background: #ffffff; width: 2px; padding: 20px 0; display: block; } .open .main-menu { width: 333px; overflow: hidden; left: 0px; padding: 15px 30px 0 30px; -webkit-transition: left 0.4s ease-in-out; transition: left 0.4s ease-in-out; } .main-menu { position: absolute; left: 90px; padding: 15px 30px 0 30px; z-index: 90; line-height: 1.4; -webkit-transition: left 1s ease-in-out; transition: left 1s ease-in-out; } .main-menu ul { padding: 0; margin: 0; } .main-menu ul li { font-size: 38px; padding: 0; margin: 0; cursor: pointer; display: block; width: 100%; } .main-menu ul li a { text-decoration: none; color: #fff; border-bottom: 3px solid #000000; -webkit-transition: border-bottom 0.3s ease-in-out; transition: border-bottom 0.3s ease-in-out; cursor: pointer; } .main-menu ul li a:hover, .main-menu ul li a:focus { border-bottom: 3px solid #fff; cursor: pointer; } .main-menu ul li.work { -webkit-transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); } .main-menu ul li.directors { -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); } .main-menu ul li.studio { -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); } .main-menu ul li.contact { -webkit-transition: opacity 0.1s ease-in-out; transition: opacity 0.1s ease-in-out; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); } .open .main-menu ul li.work { -webkit-transition: opacity 0.8s ease-in-out; transition: opacity 0.8s ease-in-out; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); } .open .main-menu ul li.directors { -webkit-transition: opacity 1.2s ease-in-out; transition: opacity 1.2s ease-in-out; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); } .open .main-menu ul li.studio { -webkit-transition: opacity 1.6s ease-in-out; transition: opacity 1.6s ease-in-out; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); } .open .main-menu ul li.contact { -webkit-transition: opacity 2s ease-in-out; transition: opacity 2s ease-in-out; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); } /********************* POSTS & CONTENT STYLES *********************/ /* entry content */ .entry-content { /* at this larger size, we can start to align images */ } .entry-content .alignleft, .entry-content img.alignleft { margin-right: 1.5em; display: inline; float: left; } .entry-content .alignright, .entry-content img.alignright { margin-left: 1.5em; display: inline; float: right; } .entry-content .aligncenter, .entry-content img.aligncenter { margin-right: auto; margin-left: auto; display: block; clear: both; } /* end .entry-content */ } /********************* TABLET & SMALLER LAPTOPS This is the average viewing window. So Desktops, Laptops, and in general anyone not viewing on a mobile device. Here's where you can add resource intensive styles. *********************/ @media only screen and (min-width: 768px) { /****************************************************************** Site Name: Author: Stylesheet: Tablet & Small Desktop Stylesheet Here's where you can start getting into the good stuff. This size will work on iPads, other tablets, and desktops. So you can start working with more styles, background images, and other resources. You'll also notice the grid starts to come into play. Have fun! ******************************************************************/ /********************* LAYOUT & GRID STYLES *********************/ .wrap { width: 760px; } .content section header h2, .full-width-title header, .project-call-to-action header { max-width: 830px; margin: 75px auto; text-align: center; padding: 0 25px; font-size: 1.95em; line-height: 1.2em; } .content section { float: left; width: 100%; padding-right: 90px; } .clients span { width: 180px; padding: 0px; text-align: center; } .clients .client-grid img { width: 180px; height: 180px; } .content section.image-gallery { padding-right: 90px; line-height: 0; } .services-list .services-grid .row { float: none; } .services-list .services-grid { padding: 50px 15px 50px 15px; } /********************* HEADER STYLES *********************/ .icon-logo { position: fixed; left: 30px; top: 30px; z-index: 101; max-width: 58px; width: 58px; height: 44px; } .icon-logo a { display: block; width: 58px; height: 44px; } /********************* PAGE STYLES *********************/ .page-template .content .row-1 { padding: 0 30px; } .page-template .content section.full-width-title header { margin: 0px auto; } .page-template .content .full-width-title h4 { font-size: 1.5em; } .page-template .content .full-width-title p { font-size: 1.5em; } .page-template .content .full-width-title ul { font-size: 1.5em; padding-bottom: 30px; } .page-template .content section.full-width-title header h2 { font-size: 1em; } .page-template .content .full-width-title h3 { font-size: 2.7em; border-bottom: 2px solid #fff; line-height: 1.15em; } .page-template .content section.delife { border-top: 1px solid #232323; } .page-template-page-studio .content section.delife { border-top: none; } .studio-link { float: left; margin: 30px 0; } .studio-link .icon-ArrowRight { float: left; font-size: 38px; margin-right: 25px; margin-left: 0px; -webkit-transition: margin-left 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, margin-right 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, transform 3s cubic-bezier(0.32, 0.96, 0.75, 1); -webkit-transition: margin-left 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, margin-right 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, -webkit-transform 3s cubic-bezier(0.32, 0.96, 0.75, 1); transition: margin-left 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, margin-right 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, -webkit-transform 3s cubic-bezier(0.32, 0.96, 0.75, 1); transition: margin-left 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, margin-right 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, transform 3s cubic-bezier(0.32, 0.96, 0.75, 1); transition: margin-left 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, margin-right 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, transform 3s cubic-bezier(0.32, 0.96, 0.75, 1), -webkit-transform 3s cubic-bezier(0.32, 0.96, 0.75, 1); } .page-template .content .studio-link p { float: left; margin: 0; padding: 0; line-height: 1.5; } .page-template .content .studio-link a:hover .icon-ArrowRight { margin-left: 10px; margin-right: 15px; -webkit-transition: margin-left 0.4s cubic-bezier(0.7, 0, 0.034, 1) 0ms, margin-right 0.4s cubic-bezier(0.7, 0, 0.034, 1) 0ms, transform 3s cubic-bezier(0.32, 0.96, 0.75, 1); -webkit-transition: margin-left 0.4s cubic-bezier(0.7, 0, 0.034, 1) 0ms, margin-right 0.4s cubic-bezier(0.7, 0, 0.034, 1) 0ms, -webkit-transform 3s cubic-bezier(0.32, 0.96, 0.75, 1); transition: margin-left 0.4s cubic-bezier(0.7, 0, 0.034, 1) 0ms, margin-right 0.4s cubic-bezier(0.7, 0, 0.034, 1) 0ms, -webkit-transform 3s cubic-bezier(0.32, 0.96, 0.75, 1); transition: margin-left 0.4s cubic-bezier(0.7, 0, 0.034, 1) 0ms, margin-right 0.4s cubic-bezier(0.7, 0, 0.034, 1) 0ms, transform 3s cubic-bezier(0.32, 0.96, 0.75, 1); transition: margin-left 0.4s cubic-bezier(0.7, 0, 0.034, 1) 0ms, margin-right 0.4s cubic-bezier(0.7, 0, 0.034, 1) 0ms, transform 3s cubic-bezier(0.32, 0.96, 0.75, 1), -webkit-transform 3s cubic-bezier(0.32, 0.96, 0.75, 1); } /********************* SERVICES STYLES *********************/ .service-info-inner h2 { font-size: 1.95em; text-align: left; } .footer-contact-wrap a.form-link { margin: 0; } .content section.client-references h2 { margin: 35px auto; font-size: 1.95em; } .service-info-inner .service-info-content { width: 260px; max-width: 600px; } .service-info-inner .service-info-feature-img { width: 300px; height: auto; } .service-info-content p { font-size: 12px; line-height: 1.4em; } .single-services .video-bg-section { height: 380px; } .single-services #hero-bg-vid { width: 100%; right: auto; left: 0; } .page-template-page-contact #hero-bg-vid { width: 50%; right: 0; left: inherit; } .single-services .vidspace { padding-right: 90px; } .single-services .header-tagline { float: left; margin: 14px 0; max-width: 390px; } .single-services .header-main { max-width: inherit; margin: inherit; } .single-services .service-cta-wrapper-mobile .client-grid { max-width: 360px; margin: 0; } .single-services .service-cta-wrapper-mobile { padding: 12px 0 0 0; } .single-services .header-tagline-wrap .service-cta-wrapper-mobile h4 { font-size: 14px; padding-bottom: 0; } .single-services .service-showreel-wrapper { width: 290px; height: 470px; } .single-services .service-digital-wrapper { width: 280px; height: 360px; } .single-services .service-digital-wrapper .service-digital-inner { width: 100%; height: 100%; position: relative; } .single-services .service-digital-wrapper .service-digital-inner .service-digital-image { width: 100%; height: 100%; position: absolute; top: 0; right: 0; display: none; } .single-services .service-digital-wrapper .service-digital-inner .service-digital-image img { width: 100%; height: auto; } .single-services .service-digital-wrapper .service-digital-inner .service-digital-phone { position: absolute; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); top: 50%; } .single-services .service-digital-wrapper .service-digital-inner .phone-wrap { height: 388px; width: 200px; padding: 51px 19px 52px 19px; } .single-services .header-tagline-wrap { padding: 0 0 0 15px; max-width: 395px; text-align: inherit; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .single-services .service-digital-viewmore { position: absolute; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); bottom: -44px; } .single-services .header-tagline-wrap .cta-btn-form { margin-top: 5px; } .single-services .header-tagline-wrap h4 { font-weight: normal; font-size: 14px; line-height: 1.4em; padding: 0 0 15px 0; margin: 0; } .single-services .header-tagline-wrap h1 { font-weight: 600; font-size: 1.6em; margin: 0; padding: 0; line-height: 1.2em; } .single-services .header-tagline-wrap p { font-size: 0.9em; line-height: 1.3em; margin: 0; opacity: 1; } .sub-service li { padding: 2px 0; font-size: 0.8em; line-height: 1.3em; text-indent: -25px; padding-left: 25px; } .single-services .header-tagline-wrap a.video-link { display: block; } .service-icon-wrap { width: 14.2857142857%; float: left; text-align: right; } .services-grid { padding: 50px 15px; } .services-grid .service-icon-wrap span { width: 100%; font-size: 35px; } .service-icon-wrap h2.service-number { padding: 0; margin: 0 0 15px 0; line-height: 1.1; font-size: 1.95em; } .service-content-wrap { width: 85.7142857%; float: left; padding-left: 30px; text-align: left; } .service-content-wrap h2 { padding: 0; margin: 0 0 15px 0; line-height: 1.1; font-size: 1.95em; } .service-preview .div-line-wrap { float: left; width: 100%; padding: 0px 0 15px 0; } .services-grid .service-icon-wrap span.service-icon-corporate-icon { font-size: 42px; } .services-grid .service-icon-wrap span.service-icon-branded-icon { font-size: 55px; } .cta-header { position: fixed; top: 0; right: 90px; width: 100%; height: 90px; background: #000000; z-index: 10000; -webkit-transition: z-index 0.6s ease-in-out, opacity 0.4s ease-in-out, top 0.4s ease-in-out; transition: z-index 0.6s ease-in-out, opacity 0.4s ease-in-out, top 0.4s ease-in-out; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); } .scrolltop .cta-header { opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); top: -90px; -webkit-transition: opacity 0.4s ease-in-out, top 0.4s ease-in-out; transition: opacity 0.4s ease-in-out, top 0.4s ease-in-out; } .cta-header-title span.m-hidden { display: none; } .open .cta-header { z-index: 50; -webkit-transition: z-index 0.4s ease-in-out; transition: z-index 0.4s ease-in-out; } .cta-header-title { position: absolute; top: 0; left: 0; width: 100%; text-align: center; padding: 20px 0 20px 120px; } .cta-header-title .cta-btn { margin-left: 25px; font-size: inherit; width: 250px; padding: 15px 10px 15px 20px; } .cta-header-title .cta-btn .icon-ArrowRightClean { top: 17px; } .cta-header .cta-header-logo .icon-logo { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); width: 58px; height: 44px; top: 26px; } .cta-header .cta-header-logo .icon-logo img { width: 50px; height: auto; } .contact-form-header h2 { line-height: 1.1; font-size: 1.95em; } .scrolltop .mobile-intro .logotype { opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } .single-services .feature-video .thumbnail-body { height: 140px; } .single-services .feature-video .thumbnail-wrap { width: 256px; height: 380px; position: absolute; top: 44px; left: 40px; z-index: 50; } .single-services .feature-video .thumbnail-wrap .play-icon .icon-PlayIcon { font-size: 50px; -webkit-transition: opacity 0.55s, -webkit-transform 0.35s; -webkit-transition: opacity 0.55s; transition: opacity 0.55s; } .single-services .vid-overlay { position: absolute; background: #000; width: 100%; height: 100%; opacity: 0.1; -moz-opacity: 0.1; -khtml-opacity: 0.1; filter: alpha(opacity=0.1); -webkit-transition: opacity 0.55s, -webkit-transform 0.35s; -webkit-transition: opacity 0.55s; transition: opacity 0.55s; } .single-services .feature-video .feature-video .thumbnail-cover:focus .vid-overlay, .feature-video .thumbnail-cover:hover .vid-overlay { opacity: 0.7; -moz-opacity: 0.7; -khtml-opacity: 0.7; filter: alpha(opacity=0.7); -webkit-transition: opacity 0.55s, -webkit-transform 0.35s; -webkit-transition: opacity 0.55s; transition: opacity 0.55s; } .single-services .feature-video .thumbnail-cover:focus .icon-PlayIcon, .feature-video .thumbnail-cover:hover .icon-PlayIcon { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); -webkit-transition: opacity 0.55s, -webkit-transform 0.35s; -webkit-transition: opacity 0.55s; transition: opacity 0.55s; } /********************* PROJECT PAGE STYLES *********************/ .intro-copy-inner { width: 100%; max-width: 420px; margin: 0 auto; } .intro-title { text-align: right; padding: 0 30px; } .intro-copy h2 { text-align: right; display: inline-block; -webkit-transform: rotate(-90deg) translate(-100%, 0); transform: rotate(-90deg) translate(-100%, 0); moz-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; padding: 0; margin: 14px 0px; font-size: 3.2em; font-weight: bold; line-height: 1.1; } .intro-body-copy p, .service-content-wrap p { margin-top: 0; font-size: 0.9em; line-height: 1.3em; } .content .full-width-title h3 { font-size: 1.4em; font-family: "ApercuBold", Helvetica, Arial, sans-serif; margin: 0; line-height: 1.15em; } .content .full-width-title p { font-size: 0.6em; line-height: 1.4em; margin: 25px 0 0 0; } .intro-body-copy h4.overview-title { margin: 0 0 26px 0; line-height: 1; } p.category-title { font-size: 0.9em; padding: 0; margin: 0 0 30px 9px; text-align: left; line-height: 1; display: block; } .div-line-wrap { float: left; width: 100%; padding: 10px 0 25px 0; } .project-call-to-action h3 { font-size: 1.4em; line-height: 1.2em; margin: 0; } .project-call-to-action p { font-size: 0.9em; line-height: 1.2em; } .project-intro .feature-video { height: 50%; } .single-directors .intro-copy-wrap { height: 50%; } .single-directors .intro-copy h2 { font-size: 2.4em; margin: 10px 0px; } .single-directors .thumbnail-wrap .play-icon .icon-PlayIcon { font-size: 70px; } .single-directors .feature-video .thumbnail-wrap h4 { padding: 10px 0 0 0; margin: 0; font-size: 1.2em; } .phone-wrap { height: 407px; width: 210px; float: left; background: url("/wp-content/themes/derepublica/library/images/devices/iphoneX2.png") no-repeat; background-size: 100%; padding: 56px 22px 57px 22px; display: block; margin: 0 5px; } .full-width-devices .d-all { width: 660px; margin: 50px auto; float: none; } .perspective-iphone .device-wrap { float: left; width: 100%; height: 560px; position: relative; background: #fff; } .perspective-iphone .device-wrap .viewport { width: 380px; height: 244px; margin: 0 auto; } .perspective-iphone .device-wrap .viewport-wrap { width: 100%; -webkit-transform: translateY(-50%); transform: translateY(-50%); top: 50%; position: absolute; left: 0; } .perspective-iphone .device-wrap .device-overlay { background: url("/wp-content/themes/derepublica/library/images/devices/iphone-perspectiveX2.png") no-repeat; width: 100%; height: 560px; position: absolute; left: 0; top: 0; z-index: 5; background-position: center center; background-size: 840px 730px; } /********************* SIDEBAR NAV STYLES *********************/ .header-tagline-wrap { left: 30px; padding: 0; position: fixed; z-index: 3; -webkit-transform: translateY(-50%); transform: translateY(-50%); top: 50%; } .header-tagline-wrap h2 { opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); float: left; font-size: 1.95em; line-height: 1.2em; margin-top: 50px; width: 100%; -webkit-transition: margin-top 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, transform 0.2s cubic-bezier(0.28, 0, 0.55, 0.82), opacity 0.2s linear 0.2s; -webkit-transition: margin-top 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, opacity 0.2s linear 0.2s, -webkit-transform 0.2s cubic-bezier(0.28, 0, 0.55, 0.82); transition: margin-top 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, opacity 0.2s linear 0.2s, -webkit-transform 0.2s cubic-bezier(0.28, 0, 0.55, 0.82); transition: margin-top 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, transform 0.2s cubic-bezier(0.28, 0, 0.55, 0.82), opacity 0.2s linear 0.2s; transition: margin-top 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, transform 0.2s cubic-bezier(0.28, 0, 0.55, 0.82), opacity 0.2s linear 0.2s, -webkit-transform 0.2s cubic-bezier(0.28, 0, 0.55, 0.82); } .header-tagline-wrap h2 a { font-size: 18px; border-bottom: 2px solid #fff; line-height: 1; padding: 4px 0 8px 0; display: block; width: auto; float: left; margin-right: 20px; } .single-services .arrow-push { display: block; } .single-services .icon-logo { display: block; } .logotype { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); } .side-nav .logotype .svg-icon-DeRepublicaVertical, .open .side-nav .logotype .svg-icon-DeRepublicaVertical { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); -webkit-transition: opacity 0.55s, -webkit-transform 0.35s; -webkit-transition: opacity 0.55s; transition: opacity 0.55s; } .side-nav .stroke, .side-nav .status-text { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=1); -webkit-transition: transform 0.2s cubic-bezier(0.32, 0.96, 0.75, 1), opacity 0.2s linear 0.3s; -webkit-transition: opacity 0.2s linear 0.3s, -webkit-transform 0.2s cubic-bezier(0.32, 0.96, 0.75, 1); transition: opacity 0.2s linear 0.3s, -webkit-transform 0.2s cubic-bezier(0.32, 0.96, 0.75, 1); transition: transform 0.2s cubic-bezier(0.32, 0.96, 0.75, 1), opacity 0.2s linear 0.3s; transition: transform 0.2s cubic-bezier(0.32, 0.96, 0.75, 1), opacity 0.2s linear 0.3s, -webkit-transform 0.2s cubic-bezier(0.32, 0.96, 0.75, 1); } .status-text .social-links { text-align: left; display: inline-block; height: 20px; width: 420px; -webkit-transform: rotate(-90deg) translate(-100%, 0); transform: rotate(-90deg) translate(-100%, 0); moz-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; } .loading .side-nav, .loading .nav-btn-wrap { right: -90px; } .nav-btn-wrap { padding: 30px; right: 0px; -webkit-transition: right 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, transform 0.5s cubic-bezier(0.28, 0, 0.55, 0.82), opacity 0.7s linear 0.9s; -webkit-transition: right 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, opacity 0.7s linear 0.9s, -webkit-transform 0.5s cubic-bezier(0.28, 0, 0.55, 0.82); transition: right 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, opacity 0.7s linear 0.9s, -webkit-transform 0.5s cubic-bezier(0.28, 0, 0.55, 0.82); transition: right 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, transform 0.5s cubic-bezier(0.28, 0, 0.55, 0.82), opacity 0.7s linear 0.9s; transition: right 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, transform 0.5s cubic-bezier(0.28, 0, 0.55, 0.82), opacity 0.7s linear 0.9s, -webkit-transform 0.5s cubic-bezier(0.28, 0, 0.55, 0.82); } .archive .side-nav, .single .side-nav, .nav-btn-wrap { right: 0px; } .side-nav { border-left: 1px solid #131313; background: #000000; position: fixed; width: 90px; height: 100%; top: 0; right: 0; z-index: 50; -webkit-transition: width 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, right 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, transform 0.5s cubic-bezier(0.28, 0, 0.55, 0.82), opacity 0.7s linear 0.9s; -webkit-transition: width 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, right 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, opacity 0.7s linear 0.9s, -webkit-transform 0.5s cubic-bezier(0.28, 0, 0.55, 0.82); transition: width 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, right 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, opacity 0.7s linear 0.9s, -webkit-transform 0.5s cubic-bezier(0.28, 0, 0.55, 0.82); transition: width 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, right 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, transform 0.5s cubic-bezier(0.28, 0, 0.55, 0.82), opacity 0.7s linear 0.9s; transition: width 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, right 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, transform 0.5s cubic-bezier(0.28, 0, 0.55, 0.82), opacity 0.7s linear 0.9s, -webkit-transform 0.5s cubic-bezier(0.28, 0, 0.55, 0.82); } .loading .side-nav { width: 0px; height: 100%; top: 0; right: -90px; z-index: 50; -webkit-transition: width 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, right 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, transform 0.5s cubic-bezier(0.28, 0, 0.55, 0.82), opacity 0.7s linear 0.9s; -webkit-transition: width 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, right 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, opacity 0.7s linear 0.9s, -webkit-transform 0.5s cubic-bezier(0.28, 0, 0.55, 0.82); transition: width 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, right 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, opacity 0.7s linear 0.9s, -webkit-transform 0.5s cubic-bezier(0.28, 0, 0.55, 0.82); transition: width 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, right 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, transform 0.5s cubic-bezier(0.28, 0, 0.55, 0.82), opacity 0.7s linear 0.9s; transition: width 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, right 0.4s cubic-bezier(0.8, 0, 0.38, 1) 0.2s, transform 0.5s cubic-bezier(0.28, 0, 0.55, 0.82), opacity 0.7s linear 0.9s, -webkit-transform 0.5s cubic-bezier(0.28, 0, 0.55, 0.82); } .open .side-nav { background: #000000; position: fixed; width: 333px; height: 100%; top: 0; right: 0; z-index: 50; -webkit-transition: width 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, transform 3s cubic-bezier(0.32, 0.96, 0.75, 1), opacity 0.7s linear 0.8s; -webkit-transition: width 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, opacity 0.7s linear 0.8s, -webkit-transform 3s cubic-bezier(0.32, 0.96, 0.75, 1); transition: width 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, opacity 0.7s linear 0.8s, -webkit-transform 3s cubic-bezier(0.32, 0.96, 0.75, 1); transition: width 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, transform 3s cubic-bezier(0.32, 0.96, 0.75, 1), opacity 0.7s linear 0.8s; transition: width 0.8s cubic-bezier(0.7, 0, 0.034, 1) 0ms, transform 3s cubic-bezier(0.32, 0.96, 0.75, 1), opacity 0.7s linear 0.8s, -webkit-transform 3s cubic-bezier(0.32, 0.96, 0.75, 1); } .vidspace .logotype .svg-icon-DeRepublicaVertical { opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity 0.55s, -webkit-transform 0.35s; -webkit-transition: opacity 0.55s; transition: opacity 0.55s; } .arrow-push { left: 30px; bottom: 30px; } .bottom .footer-wrap span.icon-ArrowUp { bottom: 30px; left: 30px; } .single .mobile-intro .logotype { display: none; } .footer-contact-wrap { text-align: left; max-width: 600px; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); width: 100%; position: fixed; z-index: 2; -webkit-transition: opacity 0.35s, width 0.7s, -webkit-transform 0.35s; -webkit-transition: opacity 0.35s, width 0.7s; transition: opacity 0.35s, width 0.7s; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); top: 50%; padding-right: 90px; visibility: hidden; } .bottom .footer-contact-wrap .div-line { margin: 0 auto; float: left; display: block; } .footer-contact-wrap h3 { font-size: 14px; margin: 0; } /********************* ARCHIVE STYLES *********************/ .vertical .thumbnail-body { position: absolute; width: 100%; } .vertical .thumbnail-body .thumbnail-title { position: absolute; bottom: 15px; left: 30px; } .vertical .thumbnail-body .thumbnail-category p { display: inline-block; -webkit-transform: rotate(-90deg) translate(-100%, 0); transform: rotate(-90deg) translate(-100%, 0); moz-transform-origin: top left 0; -webkit-transform-origin: top left 0; transform-origin: top left 0; padding: 0; margin: 0; height: 100%; position: absolute; left: 45px; bottom: 46px; } .delife .thumbnail-body { padding: 25px; } /********************* THUMBNAIL STYLES *********************/ .thumbnail-img-place { height: 350px; } .full-width-video-launch .thumbnail-img-place, .full-width-image .thumbnail-img-place { height: 450px; } .video-bg-section { height: 410px; } .thumbnail-item { height: 350px; } .content .director-reel .vertical { height: 350px; } .content .director-reel .vertical .thumbnail-img-place { height: 350px; } .content .vertical { height: 700px; } .content .vertical .thumbnail-img-place { height: 700px; } .thumbnail-category p { font-size: 14px; margin: 0 0 5px 0; padding: 0; } .thumbnail-title h2 { padding: 0; margin: 0; line-height: 1.1; font-size: 2.8em; } .thumbnail-body { position: absolute; left: 0; bottom: 0; padding: 30px; color: #fff; z-index: 2; } .single-services .thumbnail-category p { font-size: 14px; margin: 0 0 5px 0; padding: 0; } .single-services .thumbnail-title h2 { padding: 0; margin: 0; line-height: 1.1; font-size: 2.2em; } .single-services .thumbnail-body { position: absolute; left: 0; bottom: 0; padding: 25px; color: #fff; z-index: 2; } .post-type-archive-directors .director-reel .thumbnail-wrap .thumbnail-cover .thumbnail-body-inner { height: 350px; } .delife .thumbnail-img-place { height: 360px; } .delife .thumbnail-item { height: 360px; } .delife .thumbnail-title h2 { padding: 0; margin: 0; line-height: 1.1em; font-size: 1.4em; } .footer-contact-wrap h2 { font-size: 2.7em; line-height: 1.1em; } .footer-contact-wrap p { font-size: 18px; } /********************* NAVIGATION STYLES *********************/ .nav { border: 0; /* end .menu ul li */ /* highlight current page */ /* end current highlighters */ } .nav ul { background: #000000; margin-top: 0; } .nav li { float: left; position: relative; /* plan your menus and drop-downs wisely. */ /* showing sub-menus */ } .nav li a { border-bottom: 0; /* you can use hover styles here even though this size has the possibility of being a mobile device. */ } .nav li a:hover, .nav li a:focus { color: #fff; text-decoration: underline; } .nav li ul.sub-menu, .nav li ul.children { margin-top: 0; border: 1px solid #ccc; border-top: 0; position: absolute; visibility: hidden; z-index: 8999; /* highlight sub-menu current page */ } .nav li ul.sub-menu li, .nav li ul.children li { /* if you need to go deeper, go nuts just remember deeper menus suck for usability. k, bai. */ } .nav li ul.sub-menu li a, .nav li ul.children li a { padding-left: 10px; border-right: 0; display: block; width: 180px; border-bottom: 1px solid #ccc; } .nav li ul.sub-menu li:last-child a, .nav li ul.children li:last-child a { border-bottom: 0; } .nav li ul.sub-menu li ul, .nav li ul.children li ul { top: 0; left: 100%; } .nav li:hover > ul { top: auto; visibility: visible; } /* end .nav */ /********************* SIDEBARS & ASIDES *********************/ .sidebar { margin-top: 2.2em; } .widgettitle { border-bottom: 2px solid #444; margin-bottom: 0.75em; } .widget { padding: 0 10px; margin: 2.2em 0; } .widget ul li { margin-bottom: 0.75em; /* deep nesting */ } .widget ul li ul { margin-top: 0.75em; padding-left: 1em; } } @media only screen and (min-width: 960px) { /****************************************************************** Site Name: Author: Stylesheet: 960 Stylesheet ******************************************************************/ /********************* SERVICES STYLES *********************/ .single-services .service-showreel-wrapper { width: 340px; height: 540px; } .single-services .service-digital-wrapper { width: 400px; height: 295px; } .single-services .video-bg-section { height: 450px; } .single-services .header-tagline-wrap h1 { font-weight: 600; font-size: 2em; } .single-services .feature-video .thumbnail-wrap { width: 301px; height: 450px; position: absolute; top: 44px; left: 40px; z-index: 50; } .service-info-inner .service-info-content { width: 370px; max-width: 600px; } .service-info-content p { font-size: 14px; line-height: 1.3em; } .service-info-inner .service-info-feature-img { width: 370px; height: auto; } .single-services .service-digital-wrapper .service-digital-inner .service-digital-image { display: block; } .single-services .service-digital-wrapper .service-digital-inner .service-digital-phone { position: absolute; right: 0px; top: 0px; left: inherit; -webkit-transform: inherit; transform: inherit; } .single-services .service-digital-viewmore { position: absolute; left: 0; bottom: 0; -webkit-transform: inherit; transform: inherit; } .single-services .service-digital-wrapper .service-digital-watch-btn { position: absolute; left: -30px; } .single-services .service-digital-wrapper .service-digital-inner .phone-wrap { top: 33px; height: 270px; width: 140px; right: 10px; position: absolute; padding: 37px 14px 36px 14px; } } /********************* DESKTOP This is the average viewing window. So Desktops, Laptops, and in general anyone not viewing on a mobile device. Here's where you can add resource intensive styles. *********************/ @media only screen and (min-width: 1200px) { /****************************************************************** Site Name: Author: Stylesheet: Desktop Stylsheet This is the desktop size. It's larger than an iPad so it will only be seen on the Desktop. ******************************************************************/ .wrap { width: 1040px; } .clients span { width: 180px; padding: 0px; text-align: center; } .clients .client-grid img { width: 180px; height: 180px; } /********************* SERVICES STYLES *********************/ .single-services #hero-bg-vid { width: 100%; right: 0; left: auto; } .services-grid .service-icon-wrap span { width: 100%; font-size: 52px; } .cta-header-title span.m-hidden { display: inline; } .single-services .header-tagline-wrap h1 { font-weight: 600; font-size: 2em; margin: 0; padding: 0 0 8px 0; line-height: 1.2em; } .single-services .service-showreel-wrapper { width: 380px; height: 590px; text-align: center; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); top: 50%; position: absolute; } .single-services .service-digital-wrapper { width: 450px; height: 332px; } .single-services .service-digital-wrapper .service-digital-inner .phone-wrap { top: 25px; height: 320px; width: 165px; padding: 42px 15px 43px 15px; right: 10px; position: absolute; } .single-services .video-bg-section { height: 500px; } .single-services .feature-video .thumbnail-wrap { width: 341px; height: 510px; position: absolute; top: 44px; left: 40px; z-index: 50; } .sub-service-list-1 { padding-left: 15px; } .sub-service-list-2 { padding-right: 15px; } /********************* THUMBNAIL STYLES *********************/ .thumbnail-img-place { height: 430px; } .full-width-video-launch .thumbnail-img-place, .full-width-image .thumbnail-img-place { height: 550px; } .video-bg-section { height: 625px; } .thumbnail-item { height: 430px; } .content .vertical { height: 860px; } .content .director-reel .vertical { height: 430px; } .content .director-reel .vertical .thumbnail-img-place { height: 430px; } .post-type-archive-directors .director-reel .thumbnail-wrap .thumbnail-cover .thumbnail-body-inner { height: 430px; } .content .vertical .thumbnail-img-place { height: 860px; } .delife .thumbnail-img-place { height: 430px; } .delife .thumbnail-item { height: 430px; } .delife .thumbnail-body { padding: 45px 45px 40px 45px; } .content section.image-gallery-inner { padding: 0; float: left; width: 100%; } .intro-copy h2 { font-size: 3.9em; } .intro-body-copy p, .service-content-wrap p { margin-top: 0; font-size: 1.1em; line-height: 1.3em; } .intro-copy-inner { width: 100%; max-width: 500px; margin: 0 auto; } .single-directors .intro-copy h2 { font-size: 2.8em; } .phone-wrap { height: 543px; width: 280px; float: left; background: url("/wp-content/themes/derepublica/library/images/devices/iphoneX2.png") no-repeat; background-size: 100%; padding: 75px 30px 76px 30px; display: block; } .full-width-devices .d-all { width: 870px; margin: 90px auto; float: none; } .perspective-iphone .device-wrap { float: left; width: 100%; height: 630px; position: relative; background: #fff; } .perspective-iphone .device-wrap .viewport { width: 380px; height: 244px; margin: 0 auto; } .perspective-iphone .device-wrap .viewport-wrap { width: 100%; -webkit-transform: translateY(-50%); transform: translateY(-50%); top: 50%; position: absolute; left: 0; } .perspective-iphone .device-wrap .device-overlay { background: url("/wp-content/themes/derepublica/library/images/devices/iphone-perspectiveX2.png") no-repeat; width: 100%; height: 630px; position: absolute; left: 0; top: 0; z-index: 5; background-position: center center; background-size: 840px 730px; } } /********************* LARGE VIEWING SIZE This is for the larger monitors and possibly full screen viewers. *********************/ @media only screen and (min-width: 1240px) { /****************************************************************** Site Name: Author: Stylesheet: Super Large Monitor Stylesheet You can add some advanced styles here if you like. This kicks in on larger screens. ******************************************************************/ .clients span { width: 200px; padding: 0px; text-align: center; } .clients .client-grid img { width: 200px; height: 200px; } .video-bg-section { height: 698px; } } /********************* RETINA (2x RESOLUTION DEVICES) This applies to the retina iPhone (4s) and iPad (2,3) along with other displays with a 2x resolution. You can also create a media query for retina AND a certain size if you want. Go Nuts. *********************/ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { /****************************************************************** Site Name: Author: Stylesheet: Retina Screens & Devices Stylesheet When handling retina screens you need to make adjustments, especially if you're not using font icons. Here you can add them in one neat place. ******************************************************************/ /* EXAMPLE Let's say you have an image and you need to make sure it looks ok on retina screens. Let's say we have an icon which dimension are 24px x 24px. In your regular stylesheets, it would look something like this: .icon { width: 24px; height: 24px; background: url(img/test.png) no-repeat; } For retina screens, we have to make some adjustments, so that image doesn't look blurry. So, taking into account the image above and the dimensions, this is what we would put in our retina stylesheet: .icon { background: url(img/test@2x.png) no-repeat; background-size: 24px 24px; } So, you would create the same icon, but at double the resolution, meaning it would be 48px x 48px. You'd name it the same, but with a @2x at the end (this is pretty standard practice). Set the background image so it matches the original dimensions and you are good to go. */ } /********************* PRINT STYLESHEET Feel free to customize this. Remember to add things that won't make sense to print at the bottom. Things like nav, ads, and forms should be set to display none. *********************/ @media print { /****************************************************************** Site Name: Author: Stylesheet: Print Stylesheet This is the print stylesheet. There's probably not a lot of reasons to edit this stylesheet. If you want to though, go for it. ******************************************************************/ * { background: transparent !important; color: black !important; text-shadow: none !important; -webkit-filter: none !important; filter: none !important; -ms-filter: none !important; } a, a:visited { color: #444 !important; text-decoration: underline; } a:after, a:visited:after { content: " (" attr(href) ")"; } a abbr[title]:after, a:visited abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } .sidebar, .page-navigation, .wp-prev-next, .respond-form, nav { display: none; } } /*# sourceMappingURL=style.css.map */