/* Act page */ /* Years Of Living Dangerously */ /* =========================================================================== Fonts ========================================================================== */ /* ========================================================================== Variables ========================================================================== */ /* Dimensions */ /* Colors */ /* Typography */ /* Screens */ /* Icon */ /*'[class^="icon-"], [class*=" icon-"]';*/ /*[class^="btn-media-"], [class*=" btn-media-"]';*/ /* ========================================================================== Mixins ========================================================================== */ /* Module mixins */ #module .title { font: 100 50px / 0.9 "museo-slab", "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #ed4503; margin: 0 auto; word-wrap: break-word; } #module .title.title-large { font-size: 115%; } #module .title.title-centered { text-align: center; padding: 0 3%; } @media only screen and ( max-width: 767px ) { #module .title { font-size: 36px; } } @media only screen and ( max-width: 320px ) { #module .title { font-size: 30px; } } /* General mixins */ /* Big fat sharing buttons */ /* Default input styles */ /* Zebra stripes on row columns */ /* Text with a masked background image */ /* Background image covering entire element */ /* Styles for story and topic "card" */ @-webkit-keyframes fadeUpDown-in { 0% { opacity: 0; -moz-transform: translate(0, 30px); -webkit-transform: translate(0, 30px); -ms-transform: translate(0, 30px); -o-transform: translate(0, 30px); transform: translate(0, 30px); } 100% { opacity: 1; -moz-transform: translate(0, 0); -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } } @-moz-keyframes fadeUpDown-in { 0% { opacity: 0; -moz-transform: translate(0, 30px); -webkit-transform: translate(0, 30px); -ms-transform: translate(0, 30px); -o-transform: translate(0, 30px); transform: translate(0, 30px); } 100% { opacity: 1; -moz-transform: translate(0, 0); -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes fadeUpDown-in { 0% { opacity: 0; -moz-transform: translate(0, 30px); -webkit-transform: translate(0, 30px); -ms-transform: translate(0, 30px); -o-transform: translate(0, 30px); transform: translate(0, 30px); } 100% { opacity: 1; -moz-transform: translate(0, 0); -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes fadeUpDown-out { 0% { opacity: 1; -moz-transform: translate(0, 0); -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } 100% { opacity: 0; -moz-transform: translate(0, 30px); -webkit-transform: translate(0, 30px); -ms-transform: translate(0, 30px); -o-transform: translate(0, 30px); transform: translate(0, 30px); } } @-moz-keyframes fadeUpDown-out { 0% { opacity: 1; -moz-transform: translate(0, 0); -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } 100% { opacity: 0; -moz-transform: translate(0, 30px); -webkit-transform: translate(0, 30px); -ms-transform: translate(0, 30px); -o-transform: translate(0, 30px); transform: translate(0, 30px); } } @keyframes fadeUpDown-out { 0% { opacity: 1; -moz-transform: translate(0, 0); -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } 100% { opacity: 0; -moz-transform: translate(0, 30px); -webkit-transform: translate(0, 30px); -ms-transform: translate(0, 30px); -o-transform: translate(0, 30px); transform: translate(0, 30px); } } @-webkit-keyframes fadeInUpSmall { from { -moz-transform: translate3d(0, 40px, 0); -ms-transform: translate3d(0, 40px, 0); -o-transform: translate3d(0, 40px, 0); -webkit-transform: translate3d(0, 40px, 0); transform: translate3d(0, 40px, 0); opacity: 0; } to { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; opacity: 1; } } @keyframes fadeInUpSmall { from { -moz-transform: translate3d(0, 40px, 0); -ms-transform: translate3d(0, 40px, 0); -o-transform: translate3d(0, 40px, 0); -webkit-transform: translate3d(0, 40px, 0); transform: translate3d(0, 40px, 0); opacity: 0; } to { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; opacity: 1; } } .fadeInUpSmall { -moz-animation-name: fadeInUpSmall; -o-animation-name: fadeInUpSmall; -webkit-animation-name: fadeInUpSmall; animation-name: fadeInUpSmall; } @-webkit-keyframes subtleZoomIn { from { -moz-transform: scale(0.9); -webkit-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); opacity: 0; } to { -moz-transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes subtleZoomIn { from { -moz-transform: scale(0.9); -webkit-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); opacity: 0; } to { -moz-transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; } } .subtleZoomIn { -moz-animation-name: subtleZoomIn; -o-animation-name: subtleZoomIn; -webkit-animation-name: subtleZoomIn; animation-name: subtleZoomIn; } @-webkit-keyframes subtleZoomOut { from { -moz-transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; } to { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); opacity: 0; } } @keyframes subtleZoomOut { from { -moz-transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; } to { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); opacity: 0; } } .subtleZoomOut { -moz-animation-name: subtleZoomOut; -o-animation-name: subtleZoomOut; -webkit-animation-name: subtleZoomOut; animation-name: subtleZoomOut; } .screen-reader-text { position: absolute; top: -9999px; left: -9999px; } /* LESS variables are information about icon's compiled state, stored under its original file name .icon-home { width: @icon-home-width; } The large array-like variables contain all information about a single icon @icon-home: x y offset_x offset_y width height total_width total_height image_path name; At the bottom of this section, we provide information about the spritesheet itself @spritesheet: width height image @spritesheet-sprites; */ /* These "retina group" variables are mappings for the naming and pairing of normal and retina sprites. The list formatted variables are intended for mixins like `retina-sprite` and `retina-sprites`. */ /* The provided classes are intended to be used with the array-like variables .icon-home { .sprite-width(@icon-home); } .icon-email { .sprite(@icon-email); } Example usage in HTML: `display: block` sprite:
To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class: // CSS .icon { display: inline-block; } // HTML */ /* The `retina-sprite` class sets up rules and a media query for a sprite/retina sprite. It should be used with a "retina group" variable. The media query is from CSS Tricks: https://css-tricks.com/snippets/css/retina-display-media-query/ @icon-home-group: 'icon-home' @icon-home @icon-home-2x; .icon-home { .retina-sprite(@icon-home-group); } */ /* The `.sprites` mixin generates identical output to the CSS template but can be overridden inside of LESS This must be run when you have at least 2 sprites. If run with a single sprite, then there will be reference errors. .sprites(@spritesheet-sprites); */ /* The `.retina-sprites` mixin generates a CSS rule and media query for retina groups This yields the same output as CSS retina template but can be overridden in LESS .retina-sprites(@retina-groups); */ .put-a-price-on-it { background-image: url(../../img/sprite@1x.png); background-position: 0px 0px; width: 304px; height: 37px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .put-a-price-on-it { background-image: url(../../img/sprite@2x.png); background-size: 304px 87px; } } .years-logo { background-image: url(../../img/sprite@1x.png); background-position: 0px -37px; width: 184px; height: 50px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .years-logo { background-image: url(../../img/sprite@2x.png); background-size: 304px 87px; } } /* Use vars above to override masonry styles */ /* Masonry page */ .module-masonry { min-height: 80vh; width: 100%; background: #000; padding-bottom: 30px; } @media only screen and ( max-width: 767px ) { .module-masonry { margin-bottom: 0 !important; } } .module-masonry.masonry--complete .tile { visibility: visible; } .module-masonry .tile-sizer { width: 25%; } .module-masonry .tile { width: 25%; visibility: hidden; margin-bottom: -1px; margin-right: -1px; z-index: 1; } .module-masonry .tile.tile--hero, .module-masonry .tile.tile--up-next, .module-masonry .tile.tile--watch.featured, .module-masonry .tile.tile--elected-officials, .module-masonry .tile.tile--action.featured, .module-masonry .tile.tile--price-on-it { width: 50%; } .module-masonry .tile.tile--partners { width: 100%; } .module-masonry .tile.tile--hidden { display: none; } @media only screen and ( max-width: 1199px ) { .module-masonry .tile-sizer { width: 33.3333%; } .module-masonry .tile { width: 33.3333%; } .module-masonry .tile.tile--hero, .module-masonry .tile.tile--up-next, .module-masonry .tile.tile--watch.featured, .module-masonry .tile.tile--elected-officials, .module-masonry .tile.tile--action.featured, .module-masonry .tile.tile--price-on-it { width: 66.6666%; } } @media only screen and ( max-width: 991px ) { .module-masonry .tile-sizer { width: 50%; } .module-masonry .tile { width: 50%; } .module-masonry .tile.tile--hero, .module-masonry .tile.tile--up-next, .module-masonry .tile.tile--watch.featured, .module-masonry .tile.tile--elected-officials, .module-masonry .tile.tile--action.featured, .module-masonry .tile.tile--price-on-it { width: 100%; } } @media only screen and ( max-width: 767px ) { .module-masonry .tile-sizer { width: 50%; } .module-masonry .tile { width: 100%; } .module-masonry .tile.tile--hero, .module-masonry .tile.tile--up-next, .module-masonry .tile.tile--watch, .module-masonry .tile.tile--elected-officials, .module-masonry .tile.tile--action.featured, .module-masonry .tile.tile--price-on-it { width: 100%; } .module-masonry .tile.person--prod_team_member { width: 50%; } } .module-masonry .tile { background: #000; } .module-masonry .tile .tile-content { padding-top: 60%; display: block; } .module-masonry .tile .tile-content > .content-icon { position: absolute !important; z-index: 99; bottom: 20px; left: 20px; font-size: 24px; color: #fff; pointer-events: none; } .module-masonry .tile.tile--flippable { -webkit-perspective: 600px; -moz-perspective: 600px; perspective: 600px; overflow: hidden; } .module-masonry .tile.tile--flippable .tile-front, .module-masonry .tile.tile--flippable .tile-back { -moz-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -webkit-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -o-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -ms-backface-visibility: hidden; -o-backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .module-masonry .tile.tile--flippable .tile-front { -moz-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } .module-masonry .tile.tile--flippable .tile-back { -webkit-transform: rotateX(-135deg) translate(0, -50%); -moz-transform: rotateX(-135deg) translate(0, -50%); -ms-transform: rotateX(-135deg) translate(0, -50%); -o-transform: rotateX(-135deg) translate(0, -50%); transform: rotateX(-135deg) translate(0, -50%); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; position: absolute; top: 50%; left: 0; right: 0; opacity: 0; } .no-touch .module-masonry .tile.tile--flippable:hover .tile-front { -moz-transform: rotateX(135deg); -webkit-transform: rotateX(135deg); -ms-transform: rotateX(135deg); -o-transform: rotateX(135deg); transform: rotateX(135deg); opacity: 0; } .no-touch .module-masonry .tile.tile--flippable:hover .tile-back { -webkit-transform: rotateX(0deg) translate(0, -50%); -moz-transform: rotateX(0deg) translate(0, -50%); -ms-transform: rotateX(0deg) translate(0, -50%); -o-transform: rotateX(0deg) translate(0, -50%); transform: rotateX(0deg) translate(0, -50%); opacity: 1; } .module-masonry .tile.tile--partners { background: #70d1e3; position: relative; } .module-masonry .tile.tile--partners .tile-content { position: relative; overflow: hidden; padding: 40px 10%; color: #353535; text-align: center; z-index: 1; } .module-masonry .tile.tile--partners .tile-content .content-bg { background-color: #000; background-repeat: no-repeat; background-position: center center; background-size: cover; -moz-transition: all 3s linear; -webkit-transition: all 3s linear; -o-transition: all 3s linear; transition: all 3s linear; position: absolute; bottom: 0; left: 0; right: 0; top: 0; } .module-masonry .tile.tile--partners .tile-content .content-bg.bg-contain { background-size: 80%; } .module-masonry .tile.tile--partners .tile-content > * { position: relative; } .module-masonry .tile.tile--partners .tile-content:hover .content-bg { -moz-transform: scale(1.05); -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .module-masonry .tile.tile--partners .tile-content .content-bg { opacity: 0.25; } .module-masonry .tile.tile--partners .tile-content .title { font: 300 35px / 0.9 "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0.35em auto; color: #fff; } .module-masonry .tile.tile--partners .tile-content .title a { color: inherit; } .module-masonry .tile.tile--partners .tile-content .description { font: 400 17px / 1.2 "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0.5em auto; opacity: 0.75; } .module-masonry .tile.tile--partners .tile-content .partners { padding: 0; margin: 30px -20px 0 0; list-style: none; text-align: center; } .module-masonry .tile.tile--partners .tile-content .partners .partner { display: inline-block; margin-bottom: 20px; margin-right: 20px; vertical-align: middle; } .module-masonry .tile.tile--partners .tile-content .partners .partner a { -moz-transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; background-color: #000; background-repeat: no-repeat; background-position: center center; background-size: cover; background-color: transparent; display: block; padding-top: 100%; } .module-masonry .tile.tile--partners .tile-content .partners .partner a.bg-contain { background-size: 80%; } .module-masonry .tile.tile--partners .tile-content .partners .partner a:hover { opacity: 0.5; } .module-masonry .tile.tile--partners .tile-content .partners .partner.partner--wide a { padding-top: 50%; } .module-masonry .tile.tile--partners .tile-content .partners .partner [data-logo-background] { background-size: 90%; } .module-masonry .tile.tile--partners .tile-content .partners .partner a { background-size: contain; } .module-masonry .tile.tile--elected-officials { background: #181818; } .module-masonry .tile.tile--elected-officials .tile-content { position: relative; overflow: hidden; padding: 15% 20px 10%; text-align: center; color: #fff; } .module-masonry .tile.tile--elected-officials .tile-content .content-bg { background-color: #000; background-repeat: no-repeat; background-position: center center; background-size: cover; -moz-transition: all 9999s linear; -webkit-transition: all 9999s linear; -o-transition: all 9999s linear; transition: all 9999s linear; position: absolute; bottom: 0; left: 0; right: 0; top: 0; } .module-masonry .tile.tile--elected-officials .tile-content .content-bg.bg-contain { background-size: 80%; } .module-masonry .tile.tile--elected-officials .tile-content > * { position: relative; } .module-masonry .tile.tile--elected-officials .tile-content:hover .content-bg { -moz-transform: scale(1.05); -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .module-masonry .tile.tile--elected-officials .tile-content .content-bg { opacity: 0.2; } .module-masonry .tile.tile--elected-officials .tile-content .title { font: 300 90px / 0.9 "museo-slab", "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: none; letter-spacing: -0.02em; margin: 0 auto; } .module-masonry .tile.tile--elected-officials .tile-content .description { font: 400 18px / 1.2 "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; margin: 1em 10%; } .module-masonry .tile.tile--elected-officials .tile-content .location-methods { margin-top: 15px; } .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method { vertical-align: top; display: inline-block; margin: 6px 0; } .module-masonry .tile.tile--elected-officials .tile-content .location-methods .or { padding: 6px 10px; line-height: 50px; vertical-align: top; display: none; color: #fff; text-transform: uppercase; font-weight: bold; } @media only screen and ( max-width: 767px ) { .module-masonry .tile.tile--elected-officials .tile-content .location-methods .or { width: 100%; line-height: 1; } } .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--geolocate { display: none; } .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--geolocate .btn { padding: 0 20px; min-width: 0; line-height: 50px; border: none; } .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address { max-width: 550px; min-width: 340px; width: 100%; margin-left: auto; margin-right: auto; position: relative; } .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address input[type="text"], .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address input[type="email"], .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address input[type="password"], .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address textarea { -moz-transition: 0.35s; -webkit-transition: 0.35s; -o-transition: 0.35s; transition: 0.35s; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; border: solid 2px transparent; border-radius: 0; background: #2a2a2a; color: #fff; font-size: 18px; line-height: normal; height: 50px; padding: 10px 12px; } .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address input[type="text"]::-webkit-input-placeholder, .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address input[type="email"]::-webkit-input-placeholder, .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address input[type="password"]::-webkit-input-placeholder, .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address textarea::-webkit-input-placeholder { color: #777777; } .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address input[type="text"]:-moz-placeholder, .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address input[type="email"]:-moz-placeholder, .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address input[type="password"]:-moz-placeholder, .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address textarea:-moz-placeholder { color: #777777; } .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address input[type="text"]::-moz-placeholder, .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address input[type="email"]::-moz-placeholder, .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address input[type="password"]::-moz-placeholder, .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address textarea::-moz-placeholder { color: #777777; } .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address input[type="text"]:-ms-input-placeholder, .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address input[type="email"]:-ms-input-placeholder, .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address input[type="password"]:-ms-input-placeholder, .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address textarea:-ms-input-placeholder { color: #777777; } .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address input[type="text"]::-moz-placeholder, .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address input[type="email"]::-moz-placeholder, .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address input[type="password"]::-moz-placeholder, .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address textarea::-moz-placeholder { color: #777777; opacity: 1; } .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address input[type="text"]:-ms-input-placeholder, .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address input[type="email"]:-ms-input-placeholder, .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address input[type="password"]:-ms-input-placeholder, .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address textarea:-ms-input-placeholder { color: #777777; } .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address input[type="text"]::-webkit-input-placeholder, .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address input[type="email"]::-webkit-input-placeholder, .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address input[type="password"]::-webkit-input-placeholder, .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address textarea::-webkit-input-placeholder { color: #777777; } .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address input[type="text"]:focus, .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address input[type="email"]:focus, .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address input[type="password"]:focus, .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address textarea:focus { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; border-color: #555; outline: none; } .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address input[type="text"].error, .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address input[type="email"].error, .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address input[type="password"].error, .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address textarea.error { border-color: #d9534f; } .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address textarea { height: auto; } .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address input[type="text"] { width: 100%; outline: none; font-size: 20px; background: #fff; color: #000; } .module-masonry .tile.tile--elected-officials .tile-content .location-methods .method--address .btn { position: absolute; top: 0; bottom: 0; right: 0; padding: 0 20px; min-width: 0; line-height: 50px; border: none; } .module-masonry .tile.tile--elected-officials.geolocation-enabled .location-methods .method--geolocate, .module-masonry .tile.tile--elected-officials.geolocation-enabled .location-methods .or { display: inline-block; } .module-masonry .tile.tile--price-on-it .tile-content { position: relative; overflow: hidden; padding: 18% 20px 15%; text-align: center; color: #fff; } .module-masonry .tile.tile--price-on-it .tile-content .content-bg { background-color: #000; background-repeat: no-repeat; background-position: center center; background-size: cover; -moz-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -webkit-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -o-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); position: absolute; bottom: 0; left: 0; right: 0; top: 0; } .module-masonry .tile.tile--price-on-it .tile-content .content-bg.bg-contain { background-size: 80%; } .module-masonry .tile.tile--price-on-it .tile-content > * { position: relative; } .module-masonry .tile.tile--price-on-it .tile-content:hover .content-bg { -moz-transform: scale(1.05); -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .module-masonry .tile.tile--price-on-it .tile-content .title { text-indent: -9999px; margin: 0 auto; } .module-masonry .tile.tile--price-on-it .tile-content .description { font: 400 18px / 1.2 "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; margin: 1em 10%; opacity: 0.7; } .module-masonry .tile.tile--price-on-it .tile-content .btn { text-transform: none; } .module-masonry .tile.tile--educators { background: #353535; position: relative; } .module-masonry .tile.tile--educators .tile-content { position: relative; overflow: hidden; padding: 10% 20px; color: #fff; text-align: center; z-index: 1; text-decoration: none; } .module-masonry .tile.tile--educators .tile-content .content-bg { background-color: #000; background-repeat: no-repeat; background-position: center center; background-size: cover; -moz-transition: all 3s linear; -webkit-transition: all 3s linear; -o-transition: all 3s linear; transition: all 3s linear; position: absolute; bottom: 0; left: 0; right: 0; top: 0; } .module-masonry .tile.tile--educators .tile-content .content-bg.bg-contain { background-size: 80%; } .module-masonry .tile.tile--educators .tile-content > * { position: relative; } .module-masonry .tile.tile--educators .tile-content:hover .content-bg { -moz-transform: scale(1.05); -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .module-masonry .tile.tile--educators .tile-content .content-bg:after { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigwLCAwLCAwKSIgc3RvcC1vcGFjaXR5PSIwIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9InJnYigwLCAwLCAwKSIgc3RvcC1vcGFjaXR5PSIwLjYiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjbGVzc2hhdC1nZW5lcmF0ZWQpIiAvPjwvc3ZnPg==); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 50%); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 50%); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 50%); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 50%); display: block; content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .module-masonry .tile.tile--educators .tile-content .logo { display: block; max-width: 100%; height: auto; margin: 0 auto 20px; max-width: 130px; } .module-masonry .tile.tile--educators .tile-content .title { font: 300 34px / 0.9 "museo-slab", "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0.35em auto; } .module-masonry .tile.tile--educators .tile-content .title a { color: inherit; } .module-masonry .tile.tile--educators .tile-content .description { font: 400 16px / 1.2 "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0.5em auto; opacity: 0.75; } .module-masonry .tile.tile--educators .tile-content .description p { margin: 0.5em auto; } .module-masonry .tile.tile--educators .tile-content .btn { display: inline-block; margin-top: 20px; } .module-masonry .tile.tile--petition { background: #ed4503; position: relative; } .module-masonry .tile.tile--petition .tile-content { position: relative; overflow: hidden; padding: 30% 20px; color: #fff; text-align: center; z-index: 1; text-decoration: none; } .module-masonry .tile.tile--petition .tile-content .content-bg { background-color: #000; background-repeat: no-repeat; background-position: center center; background-size: cover; -moz-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -webkit-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -o-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); position: absolute; bottom: 0; left: 0; right: 0; top: 0; } .module-masonry .tile.tile--petition .tile-content .content-bg.bg-contain { background-size: 80%; } .module-masonry .tile.tile--petition .tile-content > * { position: relative; } .module-masonry .tile.tile--petition .tile-content:hover .content-bg { -moz-transform: scale(1.05); -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .module-masonry .tile.tile--petition .tile-content .content-bg { opacity: 0.25; } .module-masonry .tile.tile--petition .tile-content .title { font: 300 34px / 0.9 "museo-slab", "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0.35em auto; } .module-masonry .tile.tile--petition .tile-content .title a { color: inherit; } .module-masonry .tile.tile--features { background: #ececec; } .module-masonry .tile.tile--features .tile-content { -moz-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -webkit-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -o-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); padding: 40px; text-align: center; color: #555555; text-decoration: none; } .module-masonry .tile.tile--features .tile-content .logo { display: block; max-width: 100%; height: auto; max-width: 50%; margin-left: 0; } .module-masonry .tile.tile--features .tile-content .title { font-size: 45px; line-height: 1.1; margin: 0.75em auto 0.1em; } .module-masonry .tile.tile--features .tile-content .description { color: #888; font-size: 20px; line-height: 1.1; margin: 1em auto; } .module-masonry .tile.tile--features .tile-content .description p { margin: 0.3em auto; } .module-masonry .tile.tile--features .tile-content:hover { background: #fff; } .module-masonry .tile.tile--watch { background: #353535; position: relative; } .module-masonry .tile.tile--watch .tile-content { position: relative; overflow: hidden; padding: 15% 10%; color: #fff; text-align: center; z-index: 1; } .module-masonry .tile.tile--watch .tile-content .content-bg { background-color: #000; background-repeat: no-repeat; background-position: center center; background-size: cover; -moz-transition: all 3s linear; -webkit-transition: all 3s linear; -o-transition: all 3s linear; transition: all 3s linear; position: absolute; bottom: 0; left: 0; right: 0; top: 0; } .module-masonry .tile.tile--watch .tile-content .content-bg.bg-contain { background-size: 80%; } .module-masonry .tile.tile--watch .tile-content > * { position: relative; } .module-masonry .tile.tile--watch .tile-content:hover .content-bg { -moz-transform: scale(1.05); -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .module-masonry .tile.tile--watch .tile-content .content-bg { opacity: 0.25; } .module-masonry .tile.tile--watch .tile-content .icon { font-size: 40px; opacity: 0.65; } .module-masonry .tile.tile--watch .tile-content .title { font: 300 36px / 0.9 "museo-slab", "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0.35em auto; } .module-masonry .tile.tile--watch .tile-content .title a { color: inherit; } .module-masonry .tile.tile--watch .tile-content .description { font: 400 20px / 1.2 "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0.5em auto; opacity: 0.65; } .module-masonry .tile.tile--watch .tile-content .channels { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; padding: 0; margin: 0; list-style: none; } .module-masonry .tile.tile--watch .tile-content .channels .channel { -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; padding: 15px; display: inline-block; min-width: 100px; max-width: 200px; } .module-masonry .tile.tile--watch .tile-content .channels .channel a { -moz-transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; display: block; } .module-masonry .tile.tile--watch .tile-content .channels .channel a:hover { opacity: 0.5; } .module-masonry .tile.tile--watch .tile-content .channels .channel img { display: block; max-width: 100%; height: auto; } @media only screen and ( max-width: 767px ) { .module-masonry .tile.tile--watch .tile-content .channels { -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .module-masonry .tile.tile--watch .tile-content .footer a { color: inherit; font-weight: bold; } .module-masonry .tile.tile--watch.featured .tile-content .icon { font-size: 60px; opacity: 1; } .module-masonry .tile.tile--watch.featured .tile-content .title { font-size: 50px; } .module-masonry .tile.tile--watch.featured .tile-content .description { font-size: 28px; } .module-masonry .tile.tile--broadcaster .tile-content { padding-top: 0; background: #353535; } .module-masonry .tile.tile--broadcaster .tile-content .content-header { background-color: #000; background-repeat: no-repeat; background-position: center center; background-size: cover; padding: 15%; text-align: center; display: block; position: relative; } .module-masonry .tile.tile--broadcaster .tile-content .content-header.bg-contain { background-size: 80%; } .module-masonry .tile.tile--broadcaster .tile-content .content-header:before { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigwLCAwLCAwKSIgc3RvcC1vcGFjaXR5PSIwLjM1Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMCwgMCwgMCkiIHN0b3Atb3BhY2l0eT0iMC44Ii8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.8) 100%); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.8) 100%); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.8) 100%); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.8) 100%); display: block; content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .module-masonry .tile.tile--broadcaster .tile-content .content-header svg { -moz-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -webkit-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -o-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); position: relative; z-index: 1; width: 100%; max-width: 200px; } .module-masonry .tile.tile--broadcaster .tile-content .content-header:hover svg { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .module-masonry .tile.tile--broadcaster .tile-content .content-description { position: relative; padding: 30px 15% 30px 20px; color: #a3a3a3; font: 400 20px / 1 "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; } .module-masonry .tile.tile--broadcaster .tile-content .content-description:after { position: absolute; border: solid; content: ""; display: block; } .module-masonry .tile.tile--broadcaster .tile-content .content-description:after { bottom: 100%; left: 50%; border-color: #353535 transparent; margin-left: -20px; border-width: 0 20px 20px; } .module-masonry .tile.tile--broadcaster .tile-content .content-description:after { left: 50px; } .module-masonry .tile.tile--broadcaster .tile-content .content-description a { -moz-transition: 0.25s; -webkit-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; color: #fff; font-weight: 600; } .module-masonry .tile.tile--broadcaster .tile-content .content-description a:hover { color: #ed4503; } .module-masonry .tile.tile--broadcaster .tile-content .content-description p { margin: 15px 0; } .module-masonry .tile.tile--broadcaster .tile-content .content-description :first-child { margin-top: 0; } .module-masonry .tile.tile--broadcaster .tile-content .content-description :last-child { margin-bottom: 0; } .module-masonry .tile.tile--up-next { background: #000; position: relative; } .module-masonry .tile.tile--up-next .tile-content { position: relative; overflow: hidden; padding: 50% 20px 20px 20px; color: #fff; text-align: center; z-index: 1; } .module-masonry .tile.tile--up-next .tile-content .content-bg { background-color: #000; background-repeat: no-repeat; background-position: center center; background-size: cover; -moz-transition: all 3s linear; -webkit-transition: all 3s linear; -o-transition: all 3s linear; transition: all 3s linear; position: absolute; bottom: 0; left: 0; right: 0; top: 0; } .module-masonry .tile.tile--up-next .tile-content .content-bg.bg-contain { background-size: 80%; } .module-masonry .tile.tile--up-next .tile-content > * { position: relative; } .module-masonry .tile.tile--up-next .tile-content:hover .content-bg { -moz-transform: scale(1.05); -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .module-masonry .tile.tile--up-next .tile-content .content-bg:after { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSJyZ2IoMCwgMCwgMCkiIHN0b3Atb3BhY2l0eT0iMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDAsIDAsIDApIiBzdG9wLW9wYWNpdHk9IjAuOSIvPjwvbGluZWFyR3JhZGllbnQ+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNsZXNzaGF0LWdlbmVyYXRlZCkiIC8+PC9zdmc+); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.9) 100%); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.9) 100%); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.9) 100%); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.9) 100%); display: block; content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .module-masonry .tile.tile--up-next .tile-content .intro { font: 600 18px / 0.9 "museo-slab", "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; margin: 0.5em auto; } .module-masonry .tile.tile--up-next .tile-content .intro span { opacity: 0.5; } .module-masonry .tile.tile--up-next .tile-content .title { font: 300 50px / 0.9 "museo-slab", "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0.1em auto; } .module-masonry .tile.tile--up-next .tile-content .title a { color: inherit; } .module-masonry .tile.tile--up-next .tile-content .subtitle { font: 400 22px / 0.9 "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0.5em auto; } .module-masonry .tile.tile--up-next .tile-content .subtitle span { opacity: 0.5; } .module-masonry .tile.tile--up-next .tile-content .btn { margin: 20px auto; } .module-masonry .tile.has-violators { position: relative; } .module-masonry .tile.has-violators .violator { position: absolute; max-width: 25%; z-index: 2; } .module-masonry .tile.has-violators .violator a { display: inline-block; max-width: 100%; } .module-masonry .tile.has-violators .violator img { display: block; max-width: 100%; height: auto; } .module-masonry .tile.has-violators .violator svg { display: inline-block; width: 100%; height: 100%; } .module-masonry .tile.has-violators .violator.violator--top-right { top: 20px; right: 20px; } .module-masonry .tile.has-violators .violator.violator--top-left { top: 20px; left: 20px; } .module-masonry .tile.has-violators .violator.violator--sm { max-width: 20%; } .module-masonry .tile.has-violators .violator.violator--sm.violator--top-right { top: 30px; right: 30px; } .module-masonry .tile.has-violators .violator.violator--sm.violator--top-left { top: 30px; left: 30px; } .module-masonry .tile.tile--hero { background: #000; } .module-masonry .tile.tile--hero .tile-content { position: relative; overflow: hidden; padding: 50% 20px 20px 20px; color: #fff; text-align: center; z-index: 1; } .module-masonry .tile.tile--hero .tile-content .content-bg { background-color: #000; background-repeat: no-repeat; background-position: center center; background-size: cover; -moz-transition: all 3s linear; -webkit-transition: all 3s linear; -o-transition: all 3s linear; transition: all 3s linear; position: absolute; bottom: 0; left: 0; right: 0; top: 0; } .module-masonry .tile.tile--hero .tile-content .content-bg.bg-contain { background-size: 80%; } .module-masonry .tile.tile--hero .tile-content > * { position: relative; } .module-masonry .tile.tile--hero .tile-content:hover .content-bg { -moz-transform: scale(1.05); -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .module-masonry .tile.tile--hero .tile-content .content-bg:after { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSJyZ2IoMCwgMCwgMCkiIHN0b3Atb3BhY2l0eT0iMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDAsIDAsIDApIiBzdG9wLW9wYWNpdHk9IjAuOSIvPjwvbGluZWFyR3JhZGllbnQ+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNsZXNzaGF0LWdlbmVyYXRlZCkiIC8+PC9zdmc+); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.9) 100%); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.9) 100%); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.9) 100%); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.9) 100%); display: block; content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .module-masonry .tile.tile--hero .tile-content .title { font-size: 40px; line-height: 1; margin: 0 auto; } .module-masonry .tile.tile--hero .tile-content .description { color: #aaa; font-size: 16px; line-height: 1.35; } .module-masonry .tile.tile--hero .tile-content .description a { color: #fff; } .module-masonry .tile.tile--video .tile-content { padding-top: 0; } .module-masonry .tile.tile--video .media-description { display: none; } .module-masonry .tile.tile--photo { background: #666; } .module-masonry .tile.tile--person .tile-content { padding-top: 0; } .module-masonry .tile.tile--person .person-status { -moz-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -webkit-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -o-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); position: absolute; top: 20px; right: 20px; background: #fff; color: #000; padding: 12px; min-width: 140px; font: normal 18px / 1 "museo-slab", "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: center; text-transform: uppercase; z-index: 3; opacity: 0.9; pointer-events: none; } .module-masonry .tile.tile--person .person-status.status--active { background: #ed4503; color: #fff; } .module-masonry .tile.tile--person .person-status.status--season-1 { background: #888; } .module-masonry .tile.tile--person [data-logo-background] { background-size: 80%; } .module-masonry .tile.tile--correspondent-quote { background: #000; } .module-masonry .tile.tile--correspondent-quote .tile-content { position: relative; overflow: hidden; padding: 50% 40px 20px 20px; color: #fff; } .module-masonry .tile.tile--correspondent-quote .tile-content .content-bg { background-color: #000; background-repeat: no-repeat; background-position: center center; background-size: cover; -moz-transition: all 3s linear; -webkit-transition: all 3s linear; -o-transition: all 3s linear; transition: all 3s linear; position: absolute; bottom: 0; left: 0; right: 0; top: 0; } .module-masonry .tile.tile--correspondent-quote .tile-content .content-bg.bg-contain { background-size: 80%; } .module-masonry .tile.tile--correspondent-quote .tile-content > * { position: relative; } .module-masonry .tile.tile--correspondent-quote .tile-content:hover .content-bg { -moz-transform: scale(1.05); -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .module-masonry .tile.tile--correspondent-quote .tile-content .content-bg { opacity: 0.5; } .module-masonry .tile.tile--correspondent-quote .tile-content .content-bg:after { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSJyZ2IoMCwgMCwgMCkiIHN0b3Atb3BhY2l0eT0iMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDAsIDAsIDApIiBzdG9wLW9wYWNpdHk9IjAuNyIvPjwvbGluZWFyR3JhZGllbnQ+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNsZXNzaGF0LWdlbmVyYXRlZCkiIC8+PC9zdmc+); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%); display: block; content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .module-masonry .tile.tile--correspondent-quote .tile-content .content-quote { -moz-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -webkit-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -o-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); } .module-masonry .tile.tile--correspondent-quote .tile-content .content-quote .name, .module-masonry .tile.tile--correspondent-quote .tile-content .content-quote .role, .module-masonry .tile.tile--correspondent-quote .tile-content .content-quote .title { color: inherit; } .module-masonry .tile.tile--correspondent-quote .tile-content .content-quote .name { font: 600 15px / 1 "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; } .module-masonry .tile.tile--correspondent-quote .tile-content .content-quote .name [class*="icon-"] { display: block; font-size: 20px; margin-bottom: 15px; } .module-masonry .tile.tile--correspondent-quote .tile-content .content-quote .role { margin: -1em 0 0; text-transform: none; opacity: 0.75; font-weight: 400; } .module-masonry .tile.tile--correspondent-quote .tile-content .content-quote .title { font: 400 21px / 1 "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; opacity: 0.75; } .module-masonry .tile.tile--correspondent-quote .tile-content .content-quote blockquote { padding: 0; margin: 0; } .module-masonry .tile.tile--correspondent-quote .tile-content .content-quote blockquote p { font: 300 25px / 1.2 "museo-slab", "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; } .module-masonry .tile.tile--correspondent-quote .tile-content .content-quote blockquote footer { display: none; } .module-masonry .tile.tile--correspondent-quote:hover .content-quote { -moz-transform: translate(0, -30px); -webkit-transform: translate(0, -30px); -ms-transform: translate(0, -30px); -o-transform: translate(0, -30px); transform: translate(0, -30px); } .module-masonry .tile.tile--fact { background: #000; } .module-masonry .tile.tile--fact .tile-content { position: relative; overflow: hidden; padding: 70% 40px 20px 20px; color: #fff; } .module-masonry .tile.tile--fact .tile-content .content-bg { background-color: #000; background-repeat: no-repeat; background-position: center center; background-size: cover; -moz-transition: all 3s linear; -webkit-transition: all 3s linear; -o-transition: all 3s linear; transition: all 3s linear; position: absolute; bottom: 0; left: 0; right: 0; top: 0; } .module-masonry .tile.tile--fact .tile-content .content-bg.bg-contain { background-size: 80%; } .module-masonry .tile.tile--fact .tile-content > * { position: relative; } .module-masonry .tile.tile--fact .tile-content:hover .content-bg { -moz-transform: scale(1.05); -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .module-masonry .tile.tile--fact .tile-content .content-bg:after { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSJyZ2IoMCwgMCwgMCkiIHN0b3Atb3BhY2l0eT0iMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDAsIDAsIDApIiBzdG9wLW9wYWNpdHk9IjAuMyIvPjwvbGluZWFyR3JhZGllbnQ+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNsZXNzaGF0LWdlbmVyYXRlZCkiIC8+PC9zdmc+); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.3) 100%); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.3) 100%); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.3) 100%); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.3) 100%); display: block; content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .module-masonry .tile.tile--fact:hover .content-quote { -moz-transform: translate(0, -30px); -webkit-transform: translate(0, -30px); -ms-transform: translate(0, -30px); -o-transform: translate(0, -30px); transform: translate(0, -30px); } .module-masonry .tile.tile--announcement { background: #000; } .module-masonry .tile.tile--announcement .tile-content { position: relative; padding-top: 75%; overflow: hidden; } .module-masonry .tile.tile--announcement .tile-content .content-bg { background-color: #000; background-repeat: no-repeat; background-position: center center; background-size: cover; -moz-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -webkit-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -o-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); position: absolute; bottom: 0; left: 0; right: 0; top: 0; } .module-masonry .tile.tile--announcement .tile-content .content-bg.bg-contain { background-size: 80%; } .module-masonry .tile.tile--announcement .tile-content > * { position: relative; } .module-masonry .tile.tile--announcement .tile-content:hover .content-bg { -moz-transform: scale(1.05); -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .module-masonry .tile.tile--announcement .tile-content .content-bg:after { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSJyZ2IoMCwgMCwgMCkiIHN0b3Atb3BhY2l0eT0iMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDAsIDAsIDApIiBzdG9wLW9wYWNpdHk9IjAuOCIvPjwvbGluZWFyR3JhZGllbnQ+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNsZXNzaGF0LWdlbmVyYXRlZCkiIC8+PC9zdmc+); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.8) 100%); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.8) 100%); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.8) 100%); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.8) 100%); display: block; content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .module-masonry .tile.tile--announcement .tile-content .content-title, .module-masonry .tile.tile--announcement .tile-content .content-post { -moz-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -webkit-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -o-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); } .module-masonry .tile.tile--announcement .tile-content .content-title { -moz-transform: translate(0, 0); -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; position: absolute; bottom: 0; left: 0; right: 15%; padding: 20px; } .module-masonry .tile.tile--announcement .tile-content .content-title .title { font-size: 44px; line-height: 0.9; color: #fff; } .module-masonry .tile.tile--announcement .tile-content .content-post { -moz-transform: translate(0, 40px); -webkit-transform: translate(0, 40px); -ms-transform: translate(0, 40px); -o-transform: translate(0, 40px); transform: translate(0, 40px); opacity: 0; padding: 20px; background: rgba(53, 53, 53, 0.9); color: #ccc; } .module-masonry .tile.tile--announcement .tile-content .content-post .date { color: #6d6d6d; font-weight: 600; text-transform: uppercase; margin: 0; } .module-masonry .tile.tile--announcement .tile-content .content-post .title { font: 400 22px / 0.9 "museo-slab", "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; margin: 0.35em 0; } .module-masonry .tile.tile--announcement .tile-content .content-post .title a { color: inherit; } .module-masonry .tile.tile--announcement .tile-content .content-post .author { font-size: 16px; margin: 0; } .module-masonry .tile.tile--announcement .tile-content .content-post .excerpt { font-size: 16px; line-height: 1.35; } .module-masonry .tile.tile--announcement .tile-content .content-post footer { text-align: right; } .module-masonry .tile.tile--announcement:hover .content-title { -moz-transform: translate(0, 40px); -webkit-transform: translate(0, 40px); -ms-transform: translate(0, 40px); -o-transform: translate(0, 40px); transform: translate(0, 40px); opacity: 0; } .module-masonry .tile.tile--announcement:hover .content-post { -moz-transform: translate(0, 0); -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } .module-masonry .tile.tile--share { background: #ed4503; text-align: center; color: #fff; } .module-masonry .tile.tile--share .tile-content { padding: 20% 10%; } .module-masonry .tile.tile--share .tile-content .title { font-weight: 400; font-size: 20px; color: inherit; margin: 0; } .module-masonry .tile.tile--share .tile-content .btn { margin-top: 15px; } .module-masonry .tile.tile--share .tile-content .social-links { margin-top: 15px; } .module-masonry .tile.tile--share .tile-content .social-links .nav-label { display: none; } .module-masonry .tile.tile--share .tile-content .social-links a { -moz-transition: 0.25s; -webkit-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; color: inherit; font-size: 60px; display: inline-block; margin: 0 0.1em; text-decoration: none; } .module-masonry .tile.tile--share .tile-content .social-links a:nth-of-type(n + 4) { display: none; } .module-masonry .tile.tile--share .tile-content .social-links a:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .module-masonry .tile.tile--instagram { background: #000; } .module-masonry .tile.tile--instagram .tile-content { position: relative; overflow: hidden; padding-top: 100%; } .module-masonry .tile.tile--instagram .tile-content .content-bg { background-color: #000; background-repeat: no-repeat; background-position: center center; background-size: cover; -moz-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -webkit-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -o-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); position: absolute; bottom: 0; left: 0; right: 0; top: 0; } .module-masonry .tile.tile--instagram .tile-content .content-bg.bg-contain { background-size: 80%; } .module-masonry .tile.tile--instagram .tile-content > * { position: relative; } .module-masonry .tile.tile--instagram .tile-content:hover .content-bg { -moz-transform: scale(1.05); -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .module-masonry .tile.tile--instagram .tile-content .content-bg { opacity: 0.8; } .module-masonry .tile.tile--instagram .tile-content .content-bg:hover { opacity: 1; } .module-masonry .tile.tile--tweet .tile-content { position: relative; overflow: hidden; padding: 60px 20px; background: #555; } .module-masonry .tile.tile--tweet .tile-content .content-bg { background-color: #000; background-repeat: no-repeat; background-position: center center; background-size: cover; -moz-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -webkit-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -o-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); position: absolute; bottom: 0; left: 0; right: 0; top: 0; } .module-masonry .tile.tile--tweet .tile-content .content-bg.bg-contain { background-size: 80%; } .module-masonry .tile.tile--tweet .tile-content > * { position: relative; } .module-masonry .tile.tile--tweet .tile-content:hover .content-bg { -moz-transform: scale(1.05); -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .module-masonry .tile.tile--tweet .tile-content .content-bg { opacity: 0.25; } .module-masonry .tile.tile--tweet .tile-content .content-bg:after { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSJyZ2IoMCwgMCwgMCkiIHN0b3Atb3BhY2l0eT0iMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDAsIDAsIDApIiBzdG9wLW9wYWNpdHk9IjAuNyIvPjwvbGluZWFyR3JhZGllbnQ+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNsZXNzaGF0LWdlbmVyYXRlZCkiIC8+PC9zdmc+); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%); display: block; content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .module-masonry .tile.tile--tweet .tile-content .tweets-list { margin: 0; padding: 0; list-style: none; } .module-masonry .tile.tile--tweet .tile-content .tweets-list .tweet-avatar { display: none; } .module-masonry .tile.tile--tweet .tile-content .tweets-list .tweet-body .body-header { font: 600 15px / 1 "museo-slab", "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; margin-bottom: 25px; } .module-masonry .tile.tile--tweet .tile-content .tweets-list .tweet-body .body-header strong { display: none; } .module-masonry .tile.tile--tweet .tile-content .tweets-list .tweet-body .body-header a { color: inherit; } .module-masonry .tile.tile--tweet .tile-content .tweets-list .tweet-body .body-content { font: 300 22px / 1.2 "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; } .module-masonry .tile.tile--tweet .tile-content .tweets-list .tweet-body .body-content a { -moz-transition: 0.35s; -webkit-transition: 0.35s; -o-transition: 0.35s; transition: 0.35s; color: #bbb; text-decoration: none; } .module-masonry .tile.tile--tweet .tile-content .tweets-list .tweet-body .body-content a:hover { color: #fff; } .module-masonry .tile.tile--tweet .tile-content .tweets-list .tweet-body .body-footer { color: #fff; opacity: 0.5; margin-top: 15px; } .module-masonry .tile.tile--tweet .tile-content .tweets-list .tweet-body .body-footer :not(:last-child) { margin-right: 8px; } .module-masonry .tile.tile--tweet .tile-content .tweets-list .tweet-body .body-footer a { color: inherit; display: inline-block; } .module-masonry .tile.tile--tweet .tile-content .tweets-list .tweet-body .body-footer .action { -moz-transition: 0.35s; -webkit-transition: 0.35s; -o-transition: 0.35s; transition: 0.35s; opacity: 0; } .module-masonry .tile.tile--tweet .tile-content .tweets-list .tweet-body .body-footer svg { fill: #fff; width: 18px; height: 18px; vertical-align: middle; } .touch .module-masonry .tile.tile--tweet .tile-content .tweets-list .tweet-body .body-footer .action { opacity: 1; } .module-masonry .tile.tile--tweet .tile-content:hover .tweet-body .body-footer .action { opacity: 1; } .module-masonry .tile.tile--facebook-post .tile-content { padding: 0; overflow: hidden; } .module-masonry .tile.tile--facebook-post .tile-content .post-image { -moz-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -webkit-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -o-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 0.5; display: block; } .module-masonry .tile.tile--facebook-post .tile-content .post-image img { display: block; max-width: 100%; height: auto; width: 100%; } .module-masonry .tile.tile--facebook-post .tile-content .post--has-message .post-image { -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; } .module-masonry .tile.tile--facebook-post .tile-content .post-body { -moz-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -webkit-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -o-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); padding: 20px 20px 60px; background: #222; } .module-masonry .tile.tile--facebook-post .tile-content .post-body .body-content p { font-size: 16px; line-height: 1.25; max-height: 3.75em; color: #666; overflow: hidden; } .module-masonry .tile.tile--facebook-post .tile-content .post-body .body-footer { color: #fff; } .module-masonry .tile.tile--facebook-post .tile-content .post-body .body-footer .posted { color: inherit; opacity: 0.5; text-transform: none; } .module-masonry .tile.tile--facebook-post .tile-content .post-body .body-footer a { -moz-transition: 0.35s; -webkit-transition: 0.35s; -o-transition: 0.35s; transition: 0.35s; display: inline-block; text-transform: uppercase; opacity: 0; } .touch .module-masonry .tile.tile--facebook-post .tile-content .post-body .body-footer a { opacity: 1; } .module-masonry .tile.tile--facebook-post .tile-content .post-body .body-footer :not(:last-child) { margin-right: 8px; } .module-masonry .tile.tile--facebook-post .tile-content:hover .post-body .body-footer a { opacity: 1; } .module-masonry .tile.tile--facebook-post:hover .post-image { -moz-transform: scale(1.05); -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); opacity: 1; } .module-masonry .tile.tile--facebook-post:hover .post-body { background: #111; } .module-masonry .tile.tile--ask-joe { background: #000; } .module-masonry .tile.tile--ask-joe .tile-content { padding-top: 7%; padding-bottom: 10%; text-align: center; background: #555; } .module-masonry .tile.tile--ask-joe .tile-content .content-title { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-bottom: 3.5%; } .module-masonry .tile.tile--ask-joe .tile-content .content-title .title-icon { width: 90px; margin-left: auto; } .module-masonry .tile.tile--ask-joe .tile-content .content-title .title-icon svg { display: inline-block; width: 100%; height: 100%; } .module-masonry .tile.tile--ask-joe .tile-content .content-title .title-label { margin-right: auto; margin-left: 10px; font: 600 44px / 1 "museo-slab", "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; text-transform: uppercase; text-align: left; } .module-masonry .tile.tile--ask-joe .tile-content .content-title .title-label span { opacity: 0.5; font-size: 28px; display: block; text-indent: 0.35em; } .module-masonry .tile.tile--ask-joe .tile-content .content-link { font: 300 22px / 1.1 "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; padding: 0 10%; } .module-masonry .tile.tile--ask-joe .tile-content .content-link a { -moz-transition: 0.25s; -webkit-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; color: #a3a3a3; } .module-masonry .tile.tile--ask-joe .tile-content .content-link a:hover { color: #fff; } .module-masonry .tile.tile--ask-joe .tile-content.tile-back { padding: 20% 10%; } .module-masonry .tile.tile--ask-joe .tile-content .back-title { font: 400 20px / 1.1 "museo-slab", "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; color: #fff; margin-bottom: 15px; } .module-masonry .tile.tile--ask-joe .tile-content .content-answer { font: 300 20px / 1.1 "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #a3a3a3; } .module-masonry .tile.tile--ask-joe .tile-content .content-answer .answer { display: block; color: inherit; } .module-masonry .tile.tile--ask-joe .tile-content .content-answer .btn { margin-top: 20px; } .module-masonry .tile.tile--ask-joe:nth-of-type(odd) .tile-content { background: #4a4a4a; } .module-masonry .tile.tile--ask-question .tile-content { padding-top: 0; background: #d43e03; } .module-masonry .tile.tile--ask-question .tile-content .content-btn { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -moz-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -webkit-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -o-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); padding-top: 25%; padding-bottom: 25%; text-decoration: none; overflow: hidden; } .module-masonry .tile.tile--ask-question .tile-content .content-btn .btn-icon { -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; position: relative; } .module-masonry .tile.tile--ask-question .tile-content .content-btn .btn-icon svg { -moz-transform: translate(-60%, -50%); -webkit-transform: translate(-60%, -50%); -ms-transform: translate(-60%, -50%); -o-transform: translate(-60%, -50%); transform: translate(-60%, -50%); top: 50%; left: 0; position: absolute; width: 168px; height: 202px; } .module-masonry .tile.tile--ask-question .tile-content .content-btn .btn-label { -webkit-box-flex: 4; -moz-box-flex: 4; -webkit-flex: 4; -ms-flex: 4; flex: 4; padding: 0 20px; color: #fff; } .module-masonry .tile.tile--ask-question .tile-content .content-btn .btn-label .label-primary { font: 400 24px / 1 "museo-slab", "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; margin: 0.5em 0; } .module-masonry .tile.tile--ask-question .tile-content .content-btn .btn-label .label-secondary { font: 600 16px / 1 "museo-slab", "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; opacity: 0.5; margin: 0.5em 0; } .module-masonry .tile.tile--ask-question .tile-content .content-btn:hover { background: #f74803; } .module-masonry .tile.tile--blog-post .tile-content { position: relative; overflow: hidden; padding-top: 0; background: #222; } .module-masonry .tile.tile--blog-post .tile-content .content-bg { background-color: #000; background-repeat: no-repeat; background-position: center center; background-size: cover; -moz-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -webkit-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -o-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); position: absolute; bottom: 0; left: 0; right: 0; top: 0; } .module-masonry .tile.tile--blog-post .tile-content .content-bg.bg-contain { background-size: 80%; } .module-masonry .tile.tile--blog-post .tile-content > * { position: relative; } .module-masonry .tile.tile--blog-post .tile-content:hover .content-bg { -moz-transform: scale(1.05); -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .module-masonry .tile.tile--blog-post .tile-content .content-bg { opacity: 0.35; } .module-masonry .tile.tile--blog-post .tile-content .content-link { font: 300 44px / 0.95 "museo-slab", "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; } .module-masonry .tile.tile--blog-post .tile-content .content-link a { padding: 25% 20px; color: #fff; display: block; width: 100%; } .module-masonry .tile.tile--blog-post .tile-content .content-link a .byline { display: block; font-weight: 600; font-size: 22px; line-height: 1; margin-top: 6px; } .module-masonry .tile.tile--blog-post .tile-content .content-link a .by { opacity: 0.5; margin-top: 6px; font: 400 14px / 1 "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; display: block; text-transform: uppercase; } .module-masonry .tile.tile--blog-post .tile-content .content-link a .excerpt { display: none; } .module-masonry .tile.tile--blog-post .tile-content:hover .content-bg { opacity: 0.1; } .module-masonry .tile.tile--blog-post:nth-of-type(3n) .tile-content { background: #282828; } .module-masonry .tile.tile--blog-post:nth-of-type(3n + 1) .tile-content { background: #2f2f2f; } .module-masonry .tile.tile--blog-post.cat--act .tile-content .content-link a .by { display: none; } .module-masonry .tile.tile--blog-post.cat--act .tile-content .content-link a .excerpt { margin-top: 15px; font: 400 16px / 1.2 "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; display: block; opacity: 0.7; max-width: 80%; } .module-masonry .tile.tile--action .tile-content { position: relative; overflow: hidden; padding-top: 0; background: #0f70a2; } .module-masonry .tile.tile--action .tile-content .content-bg { background-color: #000; background-repeat: no-repeat; background-position: center center; background-size: cover; -moz-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -webkit-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -o-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); position: absolute; bottom: 0; left: 0; right: 0; top: 0; } .module-masonry .tile.tile--action .tile-content .content-bg.bg-contain { background-size: 80%; } .module-masonry .tile.tile--action .tile-content > * { position: relative; } .module-masonry .tile.tile--action .tile-content:hover .content-bg { -moz-transform: scale(1.05); -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .module-masonry .tile.tile--action .tile-content .content-bg { opacity: 0.15; } .module-masonry .tile.tile--action .tile-content .content-link a { color: #fff; display: block; width: 100%; text-align: center; text-decoration: none; position: relative; overflow: hidden; } .module-masonry .tile.tile--action .tile-content .content-link a header, .module-masonry .tile.tile--action .tile-content .content-link a footer { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .module-masonry .tile.tile--action .tile-content .content-link a header [class*="icon-"], .module-masonry .tile.tile--action .tile-content .content-link a footer [class*="icon-"] { font-size: 220%; display: inline-block; margin-right: 0.25em; margin-left: -0.5em; } .module-masonry .tile.tile--action .tile-content .content-link a header { padding: 30px 20px; font: 600 18px / 1 "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.05em; } .module-masonry .tile.tile--action .tile-content .content-link a header [class*="icon-"] { color: #ffe553; } .module-masonry .tile.tile--action .tile-content .content-link a footer { padding: 8px; background: rgba(0, 0, 0, 0.2); color: rgba(255, 255, 255, 0.5); font: 600 14px / 1 "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; } .module-masonry .tile.tile--action .tile-content .content-link a .title { -moz-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -webkit-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -o-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); padding: 0 20px; display: block; font: 300 50px / 0.9 "museo-slab", "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 20% auto 0; letter-spacing: -0.02em; } .module-masonry .tile.tile--action .tile-content .content-link a .description { padding: 0 20px; display: block; max-width: 500px; font: 400 15px / 1.2 "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; margin: 20px auto 15%; opacity: 0.7; } .module-masonry .tile.tile--action .tile-content .content-link a .btn-action { -moz-transform: translate(0, 100%); -webkit-transform: translate(0, 100%); -ms-transform: translate(0, 100%); -o-transform: translate(0, 100%); transform: translate(0, 100%); -moz-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -webkit-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -o-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); position: absolute; left: 0; right: 0; bottom: 0; background: #ffe553; color: #555555; } .module-masonry .tile.tile--action .tile-content .content-link a:hover .title { -moz-transform: scale(1.05); -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); color: #ffe553; } .module-masonry .tile.tile--action .tile-content .content-link a:hover .btn-action { -moz-transform: translate(0, 0); -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } .module-masonry .tile.tile--action.featured .tile-content .content-link .title { font-size: 65px; } .module-masonry .tile.tile--action.featured .tile-content .content-link .description { font-size: 18px; } .module-masonry .tile.tile--action:nth-of-type(4n) .tile-content { background: #0a3b54; } .module-masonry .tile.tile--action:nth-of-type(4n + 1) .tile-content { background: #20698e; } .module-masonry .tile.tile--action:nth-of-type(4n + 2) .tile-content { background: #17577f; } .module-masonry .tile.tile--ad .tile-content { padding-top: 0; text-align: center; padding: 10px 0; } .masonry-wrapper { position: relative; } .masonry-wrapper .module-masonry { position: relative; z-index: 1; } .masonry-wrapper .masonry-load-more { position: relative; z-index: 2; /* position: absolute; left: 0; right: 0; bottom: 0; padding-top: 50vh; // used for infinite scrolling z-index: 0; */ } .masonry-wrapper .masonry-load-more .load-more-link { background: #ececec; padding: 30px; text-align: center; text-transform: uppercase; color: #a3a3a3; font-size: 20px; display: block; text-decoration: none; position: relative; } .masonry-wrapper .masonry-load-more .load-more-link [class*="icon-"] { -moz-transition: 0.45s; -webkit-transition: 0.45s; -o-transition: 0.45s; transition: 0.45s; -webkit-transform: translate(10px, 0); -moz-transform: translate(10px, 0); -ms-transform: translate(10px, 0); -o-transform: translate(10px, 0); transform: translate(10px, 0); display: inline-block; opacity: 0; font-size: 85%; margin-right: 5px; } .masonry-wrapper .masonry-load-more .load-more-link:active, .masonry-wrapper .masonry-load-more .load-more-link:focus { color: inherit; } .masonry-wrapper .masonry-load-more .load-more-link:hover [class*="icon-"] { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } .masonry-wrapper .masonry-load-more .load-more-link.loading { text-align: left; text-indent: -9999px; pointer-events: none; } .filter-watched .filter-empty { -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; min-height: 60vh; padding: 0 5%; text-align: center; display: none; } .filter-watched .filter-empty .icon { color: #ddd; font-size: 80px; margin-bottom: 0.25em; } .filter-watched .filter-empty .title { font: 100 50px / 0.9 "museo-slab", "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #ed4503; margin: 0 auto; word-wrap: break-word; } .filter-watched .filter-empty .title.title-large { font-size: 115%; } .filter-watched .filter-empty .title.title-centered { text-align: center; padding: 0 3%; } @media only screen and ( max-width: 767px ) { .filter-watched .filter-empty .title { font-size: 36px; } } @media only screen and ( max-width: 320px ) { .filter-watched .filter-empty .title { font-size: 30px; } } .filter-watched .filter-empty p { margin-top: 1.5em; font-size: 18px; } .filter-watched .filter-empty p [class*="icon-"] { font-size: 80%; margin-left: 0.3em; } .filter-watched.is-empty .module-masonry { display: none; } .filter-watched.is-empty .filter-empty { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } /* Modules */ .module-page-title { background: #70d1e3; padding-top: 80px; } .module-page-title .title { color: #fff; font: 100 60px / 1.1 "museo-slab", "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: none; } .module-page-title .title [class*="icon-"] { display: block; color: #ffe553; font-size: 115%; margin-top: -0.5em; margin-bottom: 0.2em; } .module-page-title .nav { background: #70d1e3; } .module-page-title .nav a { color: #fff; } .module-page-title .nav a:hover { color: #555555; } .module-page-title .nav a.active { color: #ed4503; } .sticky-masonry-nav .module-page-title .nav { background: #70d1e3; } .module-page-title .content { color: #43818d; } .module-page-title .content h3 { text-transform: none; font: 400 24px / 1.2 "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; margin-top: 0; } .module-page-title .content nav .btn { margin: 8px; } .module-page-title .btn-primary { color: #333; background-color: #ffe553; border-color: #ffe553; } .module-page-title .btn-primary:focus, .module-page-title .btn-primary.focus { color: #333; background-color: #ffdd20; border-color: #d3b300; } .module-page-title .btn-primary:hover { color: #333; background-color: #ffdd20; border-color: #ffdc16; } .module-page-title .btn-primary:active, .module-page-title .btn-primary.active, .open > .dropdown-toggle.module-page-title .btn-primary { color: #333; background-color: #ffdd20; background-image: none; border-color: #ffdc16; } .module-page-title .btn-primary:active:hover, .module-page-title .btn-primary.active:hover, .open > .dropdown-toggle.module-page-title .btn-primary:hover, .module-page-title .btn-primary:active:focus, .module-page-title .btn-primary.active:focus, .open > .dropdown-toggle.module-page-title .btn-primary:focus, .module-page-title .btn-primary:active.focus, .module-page-title .btn-primary.active.focus, .open > .dropdown-toggle.module-page-title .btn-primary.focus { color: #333; background-color: #fbd500; border-color: #d3b300; } .module-page-title .btn-primary.disabled:hover, .module-page-title .btn-primary[disabled]:hover, fieldset[disabled] .module-page-title .btn-primary:hover, .module-page-title .btn-primary.disabled:focus, .module-page-title .btn-primary[disabled]:focus, fieldset[disabled] .module-page-title .btn-primary:focus, .module-page-title .btn-primary.disabled.focus, .module-page-title .btn-primary[disabled].focus, fieldset[disabled] .module-page-title .btn-primary.focus { background-color: #ffe553; border-color: #ffe553; } .module-page-title .btn-primary .badge { color: #ffe553; background-color: #333; } .module-masonry { padding-bottom: 0; } .module-action { position: relative; background: #70d1e3; overflow: hidden; } .module-action .module-bg { background-position: center top; background-size: 100%; background-repeat: no-repeat; background-attachment: fixed; opacity: 0.25; position: absolute; top: 0; left: 0; right: 0; padding-top: 45%; z-index: 1; } .module-action .module-bg:after { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSJyZ2IoMTEyLCAyMDksIDIyNykiIHN0b3Atb3BhY2l0eT0iMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzcwZDFlMyIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=); background-image: -webkit-linear-gradient(top, rgba(112, 209, 227, 0) 50%, #70d1e3 100%); background-image: -moz-linear-gradient(top, rgba(112, 209, 227, 0) 50%, #70d1e3 100%); background-image: -o-linear-gradient(top, rgba(112, 209, 227, 0) 50%, #70d1e3 100%); background-image: linear-gradient(to bottom, rgba(112, 209, 227, 0) 50%, #70d1e3 100%); display: block; content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; } .module-action .container { position: relative; z-index: 2; } .module-action .action-header { text-align: center; padding: 50px 5% 30px; } .module-action .action-header .title { color: #fff; font: 300 70px / 0.9 "museo-slab", "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: none; letter-spacing: -0.02em; margin: 0.1em auto; } .module-action .action-header .description { font-size: 24px; line-height: 1.2; color: #2f6e7a; } .module-action .action-content { background: #fff; } .module-action .action-content .content-header { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background: #49bacf; padding: 5px 20px; } .module-action .action-content .content-header [class*="icon-"] { color: #ffe553; font-size: 250%; margin-right: 0.5em; } .module-action .action-content .content-header .header-title { margin: 0; font-size: 18px; line-height: 1; font-weight: 600; color: #fff; } .module-action .action-content .content-header .header-title a { color: inherit; } .module-action .action-content .content-header .header-logo { margin-left: auto; display: inline-block; height: 32px; margin-top: 10px; margin-bottom: 10px; } .module-action .action-content .content-header .header-logo img { height: 32px; } .module-action .action-content .content-hero { background-color: #000; background-repeat: no-repeat; background-position: center center; background-size: cover; padding-top: 35%; } .module-action .action-content .content-hero.bg-contain { background-size: 80%; } .module-action .action-content .content-body { padding: 50px; color: #888; } .module-action .action-content .content-body .title { color: #ed4503; font-weight: 400; font-size: 26px; margin-top: 0; } .module-action .action-content .content-body p { font: 400 19px / 1.4 "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; } .module-action .action-content .content-body .actions { display: block; margin-top: 35px; } .module-action .action-content .content-body .actions .btn { color: #ed4503; background-color: transparent; border-color: #ed4503; } .module-action .action-content .content-body .actions .btn:focus, .module-action .action-content .content-body .actions .btn.focus { color: #ed4503; background-color: rgba(0, 0, 0, 0); border-color: #6f2001; } .module-action .action-content .content-body .actions .btn:hover { color: #ed4503; background-color: rgba(0, 0, 0, 0); border-color: #b13302; } .module-action .action-content .content-body .actions .btn:active, .module-action .action-content .content-body .actions .btn.active, .open > .dropdown-toggle.module-action .action-content .content-body .actions .btn { color: #ed4503; background-color: rgba(0, 0, 0, 0); background-image: none; border-color: #b13302; } .module-action .action-content .content-body .actions .btn:active:hover, .module-action .action-content .content-body .actions .btn.active:hover, .open > .dropdown-toggle.module-action .action-content .content-body .actions .btn:hover, .module-action .action-content .content-body .actions .btn:active:focus, .module-action .action-content .content-body .actions .btn.active:focus, .open > .dropdown-toggle.module-action .action-content .content-body .actions .btn:focus, .module-action .action-content .content-body .actions .btn:active.focus, .module-action .action-content .content-body .actions .btn.active.focus, .open > .dropdown-toggle.module-action .action-content .content-body .actions .btn.focus { color: #ed4503; background-color: rgba(0, 0, 0, 0); border-color: #6f2001; } .module-action .action-content .content-body .actions .btn.disabled:hover, .module-action .action-content .content-body .actions .btn[disabled]:hover, fieldset[disabled] .module-action .action-content .content-body .actions .btn:hover, .module-action .action-content .content-body .actions .btn.disabled:focus, .module-action .action-content .content-body .actions .btn[disabled]:focus, fieldset[disabled] .module-action .action-content .content-body .actions .btn:focus, .module-action .action-content .content-body .actions .btn.disabled.focus, .module-action .action-content .content-body .actions .btn[disabled].focus, fieldset[disabled] .module-action .action-content .content-body .actions .btn.focus { background-color: transparent; border-color: #ed4503; } .module-action .action-content .content-body .actions .btn .badge { color: transparent; background-color: #ed4503; } .module-action .action-content .content-footer .btn { width: 100%; display: block; padding-top: 1em; padding-bottom: 1em; font-size: 24px; } .module-action .action-footer { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; text-align: center; padding: 60px 0; } .module-action .action-footer a { color: #fff; } .module-action .action-footer a[rel="prev"], .module-action .action-footer a[rel="next"] { -moz-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86); -webkit-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86); -o-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86); } .module-action .action-footer a[rel="prev"]:hover { -moz-transform: translate(-20%, 0); -webkit-transform: translate(-20%, 0); -ms-transform: translate(-20%, 0); -o-transform: translate(-20%, 0); transform: translate(-20%, 0); } .module-action .action-footer a[rel="next"]:hover { -moz-transform: translate(20%, 0); -webkit-transform: translate(20%, 0); -ms-transform: translate(20%, 0); -o-transform: translate(20%, 0); transform: translate(20%, 0); } .module-action .action-footer [class*="icon-"] { font-size: 200%; padding: 0 0.5em; } .module-action .action-footer .disabled { color: #49bacf; opacity: 0.75; } .module-action .action-footer .footer-title { font: 300 34px / 0.9 "museo-slab", "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; display: inline-block; margin: 0 1em; }