/* bw blue: 33,140,210 - #218cd2 bw red: 237,28,36 - #ed1c24 bw black: 52,52,52 - #343434 bw bgcolor 240,240,240 - #f0f0f0 */ /* --- WEBFONTS, ICONS, DEFAULTS ---------------------------------------------- */ @font-face {font-family: 'betafont'; src: url('../fonts/betafont-regular-webfont.eot'); src: url('../fonts/betafont-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/betafont-regular-webfont.woff2') format('woff2'), url('../fonts/betafont-regular-webfont.woff') format('woff'), url('../fonts/betafont-regular-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal;} @font-face {font-family: 'betafont'; src: url('../fonts/betafont-light-webfont.eot'); src: url('../fonts/betafont-light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/betafont-light-webfont.woff2') format('woff2'), url('../fonts/betafont-light-webfont.woff') format('woff'), url('../fonts/betafont-light-webfont.ttf') format('truetype'); font-weight: 300; font-style: normal;} @font-face {font-family: 'betafont'; src: url('../fonts/betafont-thin-webfont.eot'); src: url('../fonts/betafont-thin-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/betafont-thin-webfont.woff2') format('woff2'), url('../fonts/betafont-thin-webfont.woff') format('woff'), url('../fonts/betafont-thin-webfont.ttf') format('truetype'); font-weight: 100; font-style: normal;} @-webkit-keyframes opacLoading { 0% {opacity: 1;} 50% {opacity: .25;} 100% {opacity: 1;} } @-moz-keyframes opacLoading { 0% {opacity: 1;} 50% {opacity: .25;} 100% {opacity: 1;} } @keyframes opacLoading { 0% {opacity: 1;} 50% {opacity: .25;} 100% {opacity: 1;} } /* ICONS */ .icon,.arrow-right-icon:after {display: inline-block; background-image: url('../images/icons@2x.png'); background-size: 320px 200px; background-repeat: no-repeat; background-position: top left; background-color: transparent; font-size: 0rem; text-indent: -9999px; overflow: hidden;} .arrow-right-icon:after {content: '';} .icon.icon-bw-logomark {width: 58px; height: 64px; background-position: 0 -125px;} .icon.icon-miny {width: 46px; height: 46px; background-position: -60px -125px; opacity: .58;} .icon.icon-chevron-left, .light .icon.icon-chevron-left {width: 13px; height: 29px; background-position: -175px -125px;} .icon.icon-chevron-right, .light .icon.icon-chevron-right {width: 13px; height: 29px; background-position: -197px -125px;} .icon.icon-chevron-left.black, .dark .icon.icon-chevron-left {background-position: -215px -125px;} .icon.icon-chevron-right.black, .dark .icon.icon-chevron-right {background-position: -237px -125px;} .icon.icon-chevron-left.red {background-position: -255px -125px;} .icon.icon-chevron-right.red {background-position: -277px -125px;} .icon.icon-arrow-right, .arrow-right-icon:after, .light .icon.icon-arrow-right, .light .arrow-right-icon:after {margin-left: 6px; width: 37px; height: 10px; background-position: -125px -125px; vertical-align: middle;} .icon.icon-arrow-right.black, .dark .icon.icon-arrow-right, .arrow-right-icon.black:after, .dark .arrow-right-icon:after {background-position: -125px -140px;} .icon.icon-arrow-right.red, .arrow-right-icon.red:after {background-position: -125px -155px;} .icon.icon-facebook {width: 10px; height: 16px; background-position: -80px -175px;} .icon.icon-twitter {width: 16px; height: 16px; background-position: -100px -175px;} /* BETAWORKS LOGOS */ /* This math is complex (for a designer). Ask Greg for help. */ .icon.icon-bw-logo {width: 100%; height: 0; padding: 18% 0 0 0; background-image: url('../images/betaworks-logos@2x.png'); background-size: 100% auto;} .icon.icon-bw-logo, .light .icon.icon-bw-logo {background-position: 0% 0%;} .icon.icon-bw-logo.black, .dark .icon.icon-bw-logo {background-position: 0% 20%;} .icon.icon-bw-logo.red {background-position: 0% 40%;} .icon.icon-bw-logo.stronger, .light .icon.icon-bw-logo.stronger {background-position: 0% 60%;} .icon.icon-bw-logo.stronger.black, .dark .icon.icon-bw-logo.stronger {background-position: 0% 80%;} .icon.icon-bw-logo.stronger.red {background-position: 0% 100%;} /* COMPANY LOGOS */ /* file is 700x3600 and each logo is 700x300, so we work on a 42.85% diff. Y pos % is +9.09% [or: ((12-1)/100)%) ] */ .company-logo {display: inline-block; height: 0; padding: 42.85% 0 0 0; background-image: url('../images/company-logos@2x.png'); background-size: 100% auto; background-repeat: no-repeat; background-position: top left; background-color: transparent; font-size: 0rem; text-indent: -9999px; overflow: hidden;} .company-logo.logo-alphaworks {width: auto; background-position: 0% 0%;} .company-logo.logo-blend {width: auto; background-position: 0% 9.09%;} .company-logo.logo-bitly {width: auto; background-position: 0% 18.18%;} .company-logo.logo-bloglovin {width: auto; background-position: 0% 27.27%;} .company-logo.logo-chartbeat {width: auto; background-position: 0% 36.36%;} .company-logo.logo-digg {width: auto; background-position: 0% 45.45%;} .company-logo.logo-dots {width: auto; background-position: 0% 54.54%;} .company-logo.logo-giphy {width: auto; background-position: 0% 63.63%;} .company-logo.logo-instapaper {width: auto; background-position: 0% 72.72%;} .company-logo.logo-poncho {width: auto; background-position: 0% 81.81%;} .company-logo.logo-socialflow {width: auto; background-position: 0% 90.90%;} .company-logo.logo-tapestry {width: auto; background-position: 0% 100%;} /* DEFAULTS --- */ h1 {font-family: 'betafont', Tahoma, Verdana, sans-serif; font-weight: 300;} a, a span {-webkit-transition: color .1s ease-out, border-color .1s ease-out, opacity .1s ease-out; -moz-transition: color .1s ease-out, border-color .1s ease-out, opacity .1s ease-out; -ms-transition: color .1s ease-out, border-color .1s ease-out, opacity .1s ease-out; -o-transition: color .1s ease-out, border-color .1s ease-out, opacity .1s ease-out; transition: color .1s ease-out, border-color .1s ease-out, opacity .1s ease-out;} p {font-weight: 300;} /* --- TEMPLATE --------------------------------------------------------------- */ html, body {height: 100%; font-family: 'Lato',Tahoma,Verdana,sans-serif;} html * {text-rendering: optimizeLegibility;} body {background-color: #f0f0f0; background-image: url('../images/bg.png'); background-repeat: repeat; background-position: top center;} #wrapper {position: relative; min-height: 100%;} /* NAVBAR --- */ #bw-nav {background: none; background-color: rgba(33,140,210,.9); border: none; padding: 50px 15px;} #bw-nav .navbar-brand {width: 238px; height: auto; padding: 0; margin: 0 15px; color: #fff; font-family: 'betafont', Tahoma, Verdana, sans-serif; font-size: 4.2rem; line-height: 1.0em; font-weight: 300; -webkit-transition: opacity .1s ease-out; -moz-transition: opacity .1s ease-out; -ms-transition: opacity .1s ease-out; -o-transition: opacity .1s ease-out; transition: opacity .1s ease-out;} #bw-nav .navbar-brand:hover, #bw-nav .navbar-brand:focus {opacity: .7;} #bw-nav-collapse {border: none;} #bw-nav-collapse ul.nav {margin-right: 0;} #bw-nav-collapse li a {color: #fff; font-size: 2.0rem; line-height: 1.0em; font-weight: 400; -webkit-transition: color .1s ease-out, border-color .1s ease-out; -moz-transition: color .1s ease-out, border-color .1s ease-out; -ms-transition: color .1s ease-out, border-color .1s ease-out; -o-transition: color .1s ease-out, border-color .1s ease-out; transition: color .1s ease-out, border-color .1s ease-out;} #bw-nav-collapse li a:hover, #bw-nav-collapse li a:focus {color: rgba(255,255,255,.7);} #bw-nav-collapse li.bordered-link a {display: inline-block; padding: 8px 8px; border: 3px solid #fff; margin: 4px 15px 4px 10px;} #bw-nav-collapse li.bordered-link a:hover, #bw-nav-collapse li.bordered-link a:focus {border-color: rgba(255,255,255,.7);} /* FOR NOW, LINK IS DISABLED */ #bw-nav-collapse li.bordered-link {display: none;} @media (max-width: 767px) { #bw-nav {padding: 15px;} #bw-nav .navbar-toggle {margin: 0; border: 2px solid transparent; -webkit-transition: border-color .1s ease-out; -moz-transition: border-color .1s ease-out; -ms-transition: border-color .1s ease-out; -o-transition: border-color .1s ease-out; transition: border-color .1s ease-out;} #bw-nav .navbar-toggle:hover, #bw-nav .navbar-toggle:focus {border: 2px solid rgba(255,255,255,.5); background-color: transparent;} #bw-nav .navbar-toggle .icon-bar {height: 3px; background-color: #fff; -webkit-transition: background-color .1s ease-out; -moz-transition: background-color .1s ease-out; -ms-transition: background-color .1s ease-out; -o-transition: background-color .1s ease-out; transition: background-color .1s ease-out;} #bw-nav .navbar-toggle:hover .icon-bar {background-color: rgba(255,255,255,.8);} #bw-nav .navbar-brand {font-size: 2.4rem; width: 134px; margin: 9px 0 0 0;} #bw-nav .navbar-brand span {margin-top: 2px;} #bw-nav .navbar-collapse {margin-top: 15px;} #bw-nav .navbar-collapse {padding-left: 0; padding-right: 0;} } /* CONTENT (generic) --- */ #content {min-height: 100%; background-size: cover; background-position: top center; background-repeat: no-repeat;} .bw-adjust-for-header {padding-top: 150px;} .bw-adjust-for-collapsed-header {padding-top: 100px;} .bw-adjust-for-footer {padding-bottom: 146px;} @media (max-width: 767px) { .bw-adjust-for-header, .bw-adjust-for-collapsed-header {padding-top: 84px;} .bw-adjust-for-collapsed-header.adjusted-xs {padding-top: 25px;} .bw-adjust-for-footer {padding-bottom: 163px;} } /* CAROUSEL --- */ .bw-carousel {position: relative; min-height: 100%; z-index: 1; overflow: hidden;} .bw-carousel .bw-carousel-content-area {position: relative; z-index: 15;} .bw-carousel .bw-carousel-items {overflow: hidden;} .bw-carousel .bw-carousel-item {clear: none; float: left; min-height: 350px;} .bw-carousel .bw-carousel-item .bw-carousel-image {position: absolute; top: 0; left: 0; bottom: 0; z-index: 1; width: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover;} .bw-carousel .bw-carousel-item .bw-carousel-image video {min-width: 100%; min-height: 100%; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; vertical-align: middle;} .bw-carousel .bw-carousel-item .bw-carousel-image:before {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(52,52,52,.2); z-index: 1;} .bw-carousel .bw-carousel-item.darker-overlay .bw-carousel-image:before {background-color: rgba(52,52,52,.3);} .bw-carousel .bw-carousel-item.no-overlay .bw-carousel-image:before {display: none;} .bw-carousel .bw-carousel-item .bw-carousel-content-area {position: relative; padding: 75px 15%; z-index: 10; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;} .bw-carousel .bw-carousel-item .bw-carousel-content {width: 100%;} .bw-carousel .bw-carousel-item .bw-carousel-content h2 {display: block; font-family: 'betafont', Tahoma, Verdana, sans-serif; padding: 45px 0; margin: 0; text-align: left; font-size: 7.6rem; line-height: 1.246em; color: #343434; font-weight: 100;} .bw-carousel .bw-carousel-item .bw-carousel-content h2.text-center {text-align: center;} .bw-carousel .bw-carousel-item .bw-carousel-content h2 a {display: inline-block; color: #343434; text-decoration: none; border-bottom: 4px solid #343434; font-weight: 400;} .bw-carousel .bw-carousel-item .bw-carousel-content h2 a:hover, .bw-carousel .bw-carousel-item .bw-carousel-content h2 a:focus {opacity: .7;} .bw-carousel .bw-carousel-item .bw-carousel-content .bw-carousel-link {padding: 35px 0 15px 0; text-align: right; font-size: 3.0rem; line-height: 1.0em;} .bw-carousel .bw-carousel-item .bw-carousel-content .bw-carousel-link a {color: #343434; text-decoration: none; text-transform: lowercase; -webkit-transition: color .1s ease-out, border-color .1s ease-out, opacity .1s ease-out; -moz-transition: color .1s ease-out, border-color .1s ease-out, opacity .1s ease-out; -ms-transition: color .1s ease-out, border-color .1s ease-out, opacity .1s ease-out; -o-transition: color .1s ease-out, border-color .1s ease-out, opacity .1s ease-out; transition: color .1s ease-out, border-color .1s ease-out, opacity .1s ease-out;} .bw-carousel .bw-carousel-item .bw-carousel-content .bw-carousel-link a b {border-bottom: 2px solid #343434;} .bw-carousel .bw-carousel-item .bw-carousel-content .bw-carousel-link a:hover, .bw-carousel .bw-carousel-item .bw-carousel-content .bw-carousel-link a:focus {opacity: .7;} .bw-carousel .bw-carousel-indicators {display: none; /* TMP */} .bw-carousel .bw-carousel-arrows {} .bw-carousel .bw-carousel-arrows .bw-carousel-arrow {position: absolute; top: 0; padding: 0 15px; z-index: 12; font-size: 3.6rem; line-height: 1.0em; color: #fff; opacity: .6; text-decoration: none; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-transition: opacity .1s ease-out; -moz-transition: opacity .1s ease-out; -ms-transition: opacity .1s ease-out; -o-transition: opacity .1s ease-out; transition: opacity .1s ease-out;} .bw-carousel .bw-carousel-arrows .bw-carousel-arrow.next {right: 0;} .bw-carousel .bw-carousel-arrows .bw-carousel-arrow.prev {left: 0;} .bw-carousel .bw-carousel-arrows .bw-carousel-arrow:hover, .bw-carousel .bw-carousel-arrows .bw-carousel-arrow:focus {opacity: 1;} /* Default carousel speed: .4s */ .bw-carousel.bw-carousel-transition .bw-carousel-items {-webkit-transition: margin-left .4s ease-out; -moz-transition: margin-left .4s ease-out; -ms-transition: margin-left .4s ease-out; -o-transition: margin-left .4s ease-out; transition: margin-left .4s ease-out;} .bw-carousel.bw-carousel-transition .bw-carousel-items .bw-carousel-image {-webkit-transition: left .4s ease-out; -moz-transition: left .4s ease-out; -ms-transition: left .4s ease-out; -o-transition: left .4s ease-out; transition: left .4s ease-out;} .bw-carousel .bw-carousel-item.light .bw-carousel-content h2, .bw-carousel .bw-carousel-item.light .bw-carousel-content h2 a {color: #fff; border-color: #fff;} .bw-carousel .bw-carousel-item.light .bw-carousel-content .bw-carousel-link a {color: #fff;} .bw-carousel .bw-carousel-item.light .bw-carousel-content .bw-carousel-link a b {border-color: #fff;} @media (max-width: 767px) { .bw-carousel .bw-carousel-item {min-height: 0;} .bw-carousel .bw-carousel-item .bw-carousel-content-area {padding: 15px 45px;} .bw-carousel .bw-carousel-item .bw-carousel-content h2 {padding: 15px 0; font-size: 3.6rem;} .bw-carousel .bw-carousel-item .bw-carousel-content h2 a {border-width: 2px;} .bw-carousel .bw-carousel-item .bw-carousel-content .bw-carousel-link {padding-top: 20px; font-size: 1.6rem;} .bw-carousel .bw-carousel-item .bw-carousel-content .bw-carousel-link a b {border-width: 1px;} .bw-carousel .bw-carousel-item .bw-carousel-content .bw-carousel-link a:after {content: "\203a";} .bw-carousel .bw-carousel-item .bw-carousel-content .bw-carousel-link a .icon {display: none;} .bw-carousel .bw-carousel-arrows .bw-carousel-arrow {padding: 0 10px;} } @media (max-width: 320px) { .bw-carousel .bw-carousel-item .bw-carousel-content h2 {font-size: 3.2rem;} } /* BLURB --- (grey banner area) */ .bw-blurb {background-color: rgba(52,52,52,.6); padding: 35px 160px 45px 160px;} .bw-blurb h1, .bw-blurb h2 {font-family: 'Lato',Tahoma,Verdana,sans-serif; color: #fff; text-shadow: none; font-size: 3.6rem; line-height: 1.23em; font-weight: 500; margin: 0;} .bw-blurb h2 {font-size: 2.8rem; line-height: 1.34em;} .bw-blurb p {color: #fff; margin: 0; padding: 10px 0; font-size: 1.8rem; line-height: 1.34em;} .bw-blurb a {color: #fff; font-weight: 700; border-bottom: 2px solid #fff; text-decoration: none;} .bw-blurb a:hover, .bw-blurb a:focus {opacity: .7;} .bw-blurb p a {border-width: 1px; font-weight: 300;} @media (max-width: 767px) { .bw-blurb {padding: 25px 0;} .bw-blurb .container-fluid {padding-left: 0; padding-right: 0;} .bw-blurb h2 {font-size: 2.4rem;} } /* GENERIC CONTENT --- */ #content, .bw-content-section {background-size: cover; background-position: top center;} /* TODO: BACKGROUND IMAGE */ .bw-content-section {position: relative; padding: 80px 145px;} .bw-content-section:before {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(52,52,52,.2); z-index: 1;} .bw-content-section.darker-overlay:before {background-color: rgba(52,52,52,.3);} .bw-content-section.no-overlay:before {display: none;} .bw-content-section-content {position: relative; z-index: 2;} .bw-footer-padding > .bw-content-section-content {padding-bottom: 80px;} .bw-content-section .container-fluid {margin-left: -15px; margin-right: -15px; padding-left: 0; padding-right: 0;} .bw-content-section h1 {padding: 0 0 50px 0; margin: 0; text-align: center; font-size: 4.8rem; line-height: 1.0em; color: #fff;} .bw-content-section h2 {padding: 0; margin: 0; font-size: 3.2rem; line-height: 1.34em; color: #fff; font-weight: 800;} .bw-content-section p {padding: 10px 0; margin: 0; font-size: 2.4rem; line-height: 1.34em; color: #fff;} .bw-content-section a {color: #fff; border-bottom: 2px solid #fff; text-decoration: none;} .bw-content-section a:hover, .bw-content-section a:focus {opacity: .7;} @media (max-width: 767px) { .bw-content-section {padding: 5px 15px 35px 15px;} .bw-footer-padding > .bw-content-section-content {padding-bottom: 35px;} .bw-content-section h1 {font-size: 3.2rem; padding-bottom: 30px;} .bw-content-section h2 {font-size: 2.0rem;} .bw-content-section p {font-size: 1.8rem;} } /* OPENBETA FORM (MAILCHIMP) --- */ .bw-blurb + .bw-openbeta-signup {margin-top: 15px;} .bw-openbeta-signup {background-color: rgba(52,52,52,.6); padding: 35px 30px 45px 30px;} .bw-openbeta-signup h4 {margin: 0; padding-bottom: 15px; color: #fff; font-weight: 400;} .mc-field-group label {display: block; color: rgba(255,255,255,.9);} .mc-field-group .asterisk {color: #ed1c24;} .mc-field-group input[type='text'], .mc-field-group input[type='email'] {padding: 5px 8px; border: 2px solid transparent; width: 100%; color: #343434; font-size: 1.5rem; font-weight: 300; -webkit-transition: border-color .1s ease-out; -moz-transition: border-color .1s ease-out; -ms-transition: border-color .1s ease-out; -o-transition: border-color .1s ease-out; transition: border-color .1s ease-out; outline: none;} .mc-field-group input[type='text']:focus, .mc-field-group input[type='email']:focus {border-color: rgba(52,52,52,.5);} .mc-field-group input[type='submit'], .mc-field-group button {padding: 5px 16px; background-color: #ed1c24; color: #fff; font-size: 1.5rem; font-weight: 600; border: 2px solid transparent; box-shadow: none; -webkit-transition: background-color .1s ease-out; -moz-transition: background-color .1s ease-out; -ms-transition: background-color .1s ease-out; -o-transition: background-color .1s ease-out; transition: background-color .1s ease-out; outline: none;} .mc-field-group input[type='submit']:hover, .mc-field-group button:hover, .mc-field-group input[type='submit']:focus, .mc-field-group button:focus {background-color: rgba(237,28,36,.7);} .bw-openbeta-signup #mc_embed_signup div.mce_inline_error {position: absolute; left: 0; right: 0; margin: 0 15px; background-color: #ed1c24; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; font-weight: 300; font-size: 1.2rem;} .bw-openbeta-signup #mc_embed_signup input.mce_inline_error {border-color: #ed1c24 !important;} .bw-openbeta-signup #mce-success-response, .bw-openbeta-signup #mce-error-response {font-size: 1.6rem; color: #fff; padding: 0 0 10px 0; font-weight: 300; margin: -8px 0 0 0;} .bw-openbeta-signup #mce-error-response {padding: 5px 12px 6px 12px; margin: -8px 0 10px 0; background-color: #ed1c24;} @media (max-width: 767px) { .bw-blurb + .bw-openbeta-signup {margin-top: 3px;} .bw-openbeta-signup {padding: 25px 0;} .bw-openbeta-signup .container-fluid {padding-left: 0; padding-right: 0;} .mc-field-group input[type='submit'] {margin-top: 15px;} .bw-blurb .col-xs-12 + .col-xs-12 {padding-top: 15px;} } /* COMPANIES GRID --- */ .bw-companies-grid {padding: 45px 45px; background-color: #f0f0f0;} .bw-companies-grid h3 {font-size: 3.2rem; line-height: 1.0em; margin: 0; padding: 0 0 15px 0;} .bw-companies-grid .container-fluid {padding-left: 0; padding-right: 0; margin-left: -15px; margin-right: -15px;} .bw-companies-grid .company {padding-top: 15px; padding-bottom: 15px;} .bw-companies-grid .company a {position: relative; display: block; width: 100%; padding-top: 100%; overflow: hidden; background-color: rgba(33,140,210,1); color: #ffffff; text-align: center; -webkit-transition: background-color .2s ease-out; -moz-transition: background-color .2s ease-out; -ms-transition: background-color .2s ease-out; -o-transition: background-color .2s ease-out; transition: background-color .2s ease-out;} .bw-companies-grid .company a span {-webkit-transition: margin .1s ease-out, -webkit-transform .1s ease-out; -moz-transition: margin .1s ease-out, -moz-transform .1s ease-out; -ms-transition: margin .1s ease-out, -ms-transform .1s ease-out; -o-transition: margin .1s ease-out, -o-transform .1s ease-out; transition: margin .1s ease-out, transform .1s ease-out; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden;} .bw-companies-grid .company a:hover, .bw-companies-grid .company a:focus {background-color: rgba(33,140,210,.5);} .bw-companies-grid .company a:hover span, .bw-companies-grid .company a:focus span {-webkit-transform: scale(1.033); -moz-transform: scale(1.033); -ms-transform: scale(1.033); -o-transform: scale(1.033); transform: scale(1.033);} .bw-companies-grid .company a.active {background-color: rgba(237,28,36,1);} .bw-companies-grid .company a.active:hover, .bw-companies-grid .company a.active:focus {background-color: rgba(237,28,36,.5);} .bw-companies-grid .company a .company-logo {position: absolute; top: 50%; left: 0; right: 0; margin-top: -21.425%;} @media (max-width: 767px) { .bw-companies-grid {padding: 30px 15px;} .bw-companies-grid h3 {font-size: 2.0rem; text-align: center;} .bw-companies-grid .container-fluid {padding-left: 8px; padding-right: 7px;} .bw-companies-grid .col-xs-4 {padding: 7px 8px 8px 7px;} } /* FOOTER --- */ #bw-footer {position: absolute; bottom: 0; left: 0; right: 0; z-index: 50; padding: 25px 30px; background-color: rgba(255,255,255,.7);} #bw-footer .bw-logomark {display: block; margin: 0 15px 0 0; text-indent: -999px; overflow: hidden; font-size: 0; -webkit-transition: opacity .1s ease-out; -moz-transition: opacity .1s ease-out; -ms-transition: opacity .1s ease-out; -o-transition: opacity .1s ease-out; transition: opacity .1s ease-out;} #bw-footer .bw-logomark span {display: block;} #bw-footer .bw-logomark:hover, #bw-footer .bw-logomark:focus {opacity: .7;} #bw-footer ul {display: block; margin: 10px 0 5px 0;} #bw-footer p {margin-left: 5px;} #bw-footer ul li {display: inline-block; margin: 0 5px; padding: 0; vertical-align: middle;} #bw-footer ul li a {color: #343434; font-size: 1.6rem; text-decoration: none;} #bw-footer ul li a:hover, #bw-footer ul li a:focus {opacity: .7;} #bw-footer ul li a:hover span, #bw-footer ul li a:focus span {opacity: .7;} #bw-footer ul li.social-link {opacity: .7;} #bw-footer ul li.social-link a {padding: 0 1px;} #bw-footer ul li.social-link:nth-child(3) {margin-right: 15px;} #bw-footer p {color: #343434; font-size: 1.2rem;} @media (min-width: 768px) { #bw-footer .col-sm-3.text-right {padding-left: 0;} #bw-footer ul li:first-child {margin-left: 0;} } @media (max-width: 767px) { #bw-footer {padding: 20px 10px;} #bw-footer .container-fluid {padding-left: 64px; padding-right: 0;} #bw-footer .container-fluid .col-xs-12 {padding-right: 0;} #bw-footer .bw-logomark {display: block; position: absolute; top: 0; left: -58px;} #bw-footer ul {padding: 0; margin: 0;} #bw-footer ul li a {font-size: 1.3rem;} #bw-footer p {margin-top: 10px; margin-left: 5px;} #bw-footer .container-fluid > .col-xs-12:nth-child(2) {text-align: left;} #bw-footer .container-fluid > .col-xs-12:nth-child(2) li:last-child {display: none;} } /* --- PAGE-SPECIFIC ---------------------------------------------------------- */ .bw-page-home {} .bw-page-home .bw-blurb {padding-left: 250px; padding-right: 250px; text-align: center;} @media (max-width: 767px) { .bw-page-home .bw-blurb {padding-left: 15px; padding-right: 15px;} .bw-page-home .bw-blurb h1 {font-size: 2.4rem;} } /* PRODUCTS PAGE --- */ .bw-page-products .bw-carousel-content-area.upper {position: absolute; top: 195px; left: 0; right: 0;} .bw-page-products .bw-carousel-content-area.upper h3 {font-family: 'betafont', Tahoma, Verdana, sans-serif; text-align: center; font-size: 4.8rem; line-height: 1.0em; margin: 0; font-weight: 200; -webkit-transition: color .4s ease-out; -moz-transition: color .4s ease-out; -ms-transition: color .4s ease-out; -o-transition: color .4s ease-out; transition: color .4s ease-out;} .bw-page-products .bw-carousel.light .bw-carousel-content-area.upper h3 {color: #fff;} .bw-page-products .bw-carousel-item .bw-carousel-content-area {padding-top: 14%; paddding-top: calc(12% + 15px); padding-bottom: 12%; background-color: transparent;} @media (max-width: 767px) { .bw-page-products .bw-carousel-content-area.upper {top: 95px;} .bw-page-products .bw-carousel-content-area.upper h3 {font-size: 2.8rem;} .bw-page-products .bw-carousel-item .bw-carousel-content-area {padding-top: 22%; padding-bottom: 29%;} } /* COMPANY/PRODUCT PAGE --- */ .bw-page-company {} .bw-product {padding: 75px 145px 100px 145px;} .bw-product .bw-product-page-image {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; overflow: hidden;} .bw-product .bw-product-page-image:after {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(52,52,52,.2); z-index: 1;} .bw-product .bw-product-page-image video {min-height: 100%; min-width: 100%; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; overflow: hidden;} .bw-product h1 {margin: 0; padding: 0 20px 0; font-size: 9.6rem; line-height: 1.0em; text-align: center; color: #343434;} .bw-product h2 {font-family: 'betafont', Tahoma, Verdana, sans-serif; margin: 0; padding: 20px 0 5px 0; font-size: 4.9rem; line-height: 1.34em; text-align: center; min-height: 340px; color: #343434; font-weight: 300;} .bw-product .bw-product-media-quote {} .bw-product .bw-product-media-quote q {display: block; padding: 0 0 10px 0; margin: 0; font-size: 4.2rem; line-height: 1.24em; text-align: center;} .bw-product .bw-product-media-quote cite {display: block; padding: 5px 0 0 0; margin: 0; text-align: center; color: #343434;} .bw-product .bw-product-media-quote cite a {border: none; color: #343434;} .bw-product .bw-product-media-quote cite img {width: auto; max-height: 45px;} .bw-product .bw-product-link {padding: 55px 0 0 0; text-align: right; font-size: 3.0rem; line-height: 1.0em;} .bw-product .bw-product-link a {color: #343434; text-decoration: none; -webkit-transition: color .1s ease-out, border-color .1s ease-out, opacity .1s ease-out; -moz-transition: color .1s ease-out, border-color .1s ease-out, opacity .1s ease-out; -ms-transition: color .1s ease-out, border-color .1s ease-out, opacity .1s ease-out; -o-transition: color .1s ease-out, border-color .1s ease-out, opacity .1s ease-out; transition: color .1s ease-out, border-color .1s ease-out, opacity .1s ease-out; border: none;} .bw-product .bw-product-link a b {border-bottom: 2px solid #343434;} .bw-product .bw-product-link a:hover, .bw-product .bw-product-link a:focus {opacity: .7;} .bw-product.light h1, .bw-product.light h2, .bw-product.light .bw-product-media-quote q, .bw-product.light .bw-product-media-quote cite, .bw-product.light .bw-product-media-quote cite a {color: #fff;} .bw-product.light .bw-product-link a {color: #fff;} .bw-product.light .bw-product-link a b {border-bottom: 2px solid #fff;} .bw-product.light .bw-product-link a:hover, .bw-product.light .bw-product-link a:focus {color: #fff;} #product-page-alphaworks {background-image: url('../images/slides/products/alphaworks.jpg');} #product-page-blend {background-image: url('../images/slides/products/blend.jpg');} #product-page-bloglovin {background-image: url('../images/slides/products/bloglovin.jpg');} #product-page-chartbeat {background-image: url('../images/slides/products/chartbeat.jpg');} #product-page-digg {background-image: url('../images/slides/products/digg.jpg');} #product-page-dots {background-image: url('../images/slides/products/dots.jpg');} /*#product-page-giphy {background-image: url('../images/slides/products/giphy2.jpg');}*/ /* GIPHY IS AN MP4 VIDEO */ #product-page-instapaper {background-image: url('../images/slides/products/instapaper.jpg');} #product-page-poncho {background-image: url('../images/slides/products/poncho.jpg');} @media (max-width: 767px) { .bw-product {padding: 5px 15px 35px 15px;} .bw-product h1 {font-size: 3.6rem;} .bw-product h2 {font-size: 1.8rem; min-height: 0;} .bw-product .bw-product-media-quote {padding-top: 15px;} .bw-product .bw-product-media-quote q {font-size: 1.4rem;} .bw-product .bw-product-link {padding-top: 30px; font-size: 1.4rem;} .bw-product .bw-product-link a b {border-width: 1px;} #product-page-alphaworks {background-image: url('../images/slides/products/alphaworks-xs.jpg');} #product-page-blend {background-image: url('../images/slides/products/blend-xs.jpg');} #product-page-bloglovin {background-image: url('../images/slides/products/bloglovin-xs.jpg');} #product-page-chartbeat {background-image: url('../images/slides/products/chartbeat-xs.jpg');} #product-page-digg {background-image: url('../images/slides/products/digg-xs.jpg');} #product-page-dots {background-image: url('../images/slides/products/dots-xs.jpg');} #product-page-giphy {background-image: url('../images/slides/products/giphy3-xs.jpg');} #product-page-instapaper {background-image: url('../images/slides/products/instapaper-xs.jpg');} #product-page-poncho {background-image: url('../images/slides/products/poncho-xs.jpg');} } /* INVESTMENTS PAGE --- */ .bw-page-investments #content {background-color: transparent;} .bw-page-investments .bw-content-section:nth-child(1) {background-image: url('../images/bg/investments-1.jpg');} .bw-page-investments .bw-content-section:nth-child(2) {background-image: url('../images/bg/investments-2.jpg');} .bw-page-investments .bw-investments-view {padding: 50px 0 0 0;} .bw-page-investments .bw-investments-view a {font-size: 2.4rem; line-height: 1.0em;} .bw-page-investments .bw-investments-list ul {position: relative; display: block; width: 100%; padding-left: 15px; padding-right: 15px; -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px;} .bw-page-investments .bw-investments-list ul li {position: relative;display: block; font-size: 1.8rem; line-height: 1.0em; padding: 10px 0; margin: 0; color: #fff;} .bw-page-investments .bw-investments-list ul li a {position: relative; border-bottom: 1px solid rgba(255,255,255,.2);font-weight: 300; opacity: 1;} .bw-page-investments .bw-investments-list ul li a:hover {color: rgba(255,255,255,.7);} @media (max-width: 767px) { .bw-page-investments .bw-content-section:nth-child(1) {background-image: url('../images/bg/investments-1-xs.jpg');} .bw-page-investments .bw-content-section:nth-child(2) {background-image: url('../images/bg/investments-2-xs.jpg');} .bw-page-investments .bw-investments-list ul {display: block; padding-left: 0; padding-right: 0;} .bw-page-investments .bw-investments-list ul {-webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 15px; -moz-column-gap: 15px; column-gap: 15px;} .bw-page-investments .bw-investments-list ul li {padding: 5px 0; font-size: 1.4rem; text-align: center;} } /* NEWS PAGE --- */ .bw-news {margin-top: 45px; margin-bottom: 45px;} .bw-news h1 {margin: 0; padding: 0; font-size: 4.8rem; line-height: 1.0em;} .bw-news .container-fluid {padding-top: 30px;} .bw-news .news-link {padding-top: 15px; padding-bottom: 15px;} .bw-news .news-link a {position: relative; display: block; width: 100%; height: 100%; padding-top: 82%} .bw-news .news-link .image {position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(52,52,52,.2); background-position: center center; background-size: cover; background-repeat: no-repeat;} .bw-news .news-link .news-content {position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; background-color: rgba(52,52,52,0); -webkit-transition: background-color .1s ease-out; -moz-transition: background-color .1s ease-out; -ms-transition: background-color .1s ease-out; -o-transition: background-color .1s ease-out; transition: background-color .1s ease-out;} .bw-news .news-link .news-content h3 {margin: 0 0 -10px 0; padding: 20px 15px; font-family: 'betafont', Tahoma, Verdana, sans-serif; font-weight: 300; font-size: 3.6rem; color: #fff; background-color: rgba(52,52,52,.7); -webkit-transition: background-color .1s ease-out; -moz-transition: background-color .1s ease-out; -ms-transition: background-color .1s ease-out; -o-transition: background-color .1s ease-out; transition: background-color .1s ease-out;} .bw-news .news-link .news-content h3:after {margin-left: 6px;} .bw-news .news-link .news-content p {margin: 0; padding: 5px 15px; font-size: 1.8rem; line-height: 1.38em; color: #fff; opacity: 0; height: 0; -webkit-transition: opacity .1s ease-out; -moz-transition: opacity .1s ease-out; -ms-transition: opacity .1s ease-out; -o-transition: opacity .1s ease-out; transition: opacity .1s ease-out;} .bw-news .news-link a:hover .news-content {background-color: rgba(52,52,52,.7);} .bw-news .news-link a:hover .news-content h3 {background-color: rgba(52,52,52,0);} .bw-news .news-link a:hover .news-content p {opacity: 1;} @media (min-width: 768px) { .bw-news .news-link:nth-child(5n+1) {width: 75%;} .bw-news .news-link:nth-child(5n+2) {width: 25%; float: right;} .bw-news .news-link:nth-child(5n+3) {width: 50%;} .bw-news .news-link:nth-child(5n+4) {width: 25%;} .bw-news .news-link:nth-child(5n+5) {width: 100%;} .bw-news .news-link:nth-child(5n+1) a {padding-top: 66.553%;} .bw-news .news-link:nth-child(5n+2) a {padding-top: 286.186%; padding-top: calc(286.186% - 30px);} .bw-news .news-link:nth-child(5n+3) a {padding-top: 31.351%;} .bw-news .news-link:nth-child(5n+4) a {padding-top: 65.887%;} .bw-news .news-link:nth-child(5n+5) a {padding-top: 31.561%;} .bw-news .news-link:nth-child(5n+2) h3, .bw-news .news-link:nth-child(5n+4) h3 {font-size: 2.8rem;} } @media (max-width: 767px) { .bw-news {margin-top: 5px;} .bw-news h1 {font-size: 3.2rem;} .bw-news .container-fluid {padding-top: 15px;} .bw-news .news-link {padding: 8px 0 7px 0;} .bw-news .news-link a, .bw-news .news-link .image {padding-top: 65.887%;} .bw-news .news-link .image {bottom: auto; height: auto;} .bw-news .news-link .news-content {padding-bottom: 10px; top: auto; background-color: rgba(52,52,52,.7);} .bw-news .news-link .news-content h3 {font-size: 1.8rem; background-color: transparent;} .bw-news .news-link .news-content h3:after {display: none;} .bw-news .news-link .news-content p {opacity: 1 !important; height: auto; font-size: 1.4rem;} } /* WORK WITH US PAGE --- */ .bw-page-work-with-us #content {background-image: url('../images/bg/work-with-us.jpg');} @media (max-width: 767px) { .bw-page-work-with-us #content {background-image: url('../images/bg/work-with-us-xs.jpg');} .bw-page-work-with-us .bw-content-section:before {background-color: rgba(52,52,52,.3);} } /* JOBS --- */ .bw-jobs h1, .bw-jobs h5 {text-align: center;} .bw-jobs h5 {font-size: 1.8rem; line-height: 1.34em; font-weight: 300;} .bw-jobs h5 a {color: #343434; border-bottom: 1px solid #343434; text-decoration: none;} .bw-jobs h5 a:hover, .bw-jobs h5 a:focus {opacity: .7;} .bw-page-jobs .bw-jobs-studio {min-height: 350px;} .bw-jobs .bw-jobs-none p, .bw-jobs .bw-jobs-searching p, .bw-jobs .bw-jobs-network-none {padding: 55px 0; text-align: center; font-size: 2.4rem;} .bw-jobs .bw-jobs-searching p {-webkit-animation: opacLoading 1.67s linear infinite; -moz-animation: opacLoading 1.67s linear infinite; animation: opacLoading 1.67s linear infinite;} .bw-page-jobs .bw-jobs-network {background-color: rgba(52,52,52,.12);} .bw-page-jobs .bw-jobs-network ul {padding-top: 10px;} .bw-jobs-network p.bw-jobs-network-none, .bw-jobs.none .container-fluid {display: none;} .bw-jobs.none p.bw-jobs-network-none {display: block;} .bw-job-product {padding-bottom: 20px;} .bw-jobs .bw-job-product h2 {padding: 0 0 10px 0; margin: 0;} .bw-jobs .bw-job-product h2 img {max-height: 50px;} .bw-jobs ul {padding-left: 0; padding-right: 0; margin-left: -15px; margin-right: -15px;} .bw-jobs li {padding-top: 15px; padding-bottom: 15px;} .bw-jobs li:nth-child(2n+1) {clear: left;} .bw-jobs li h3 {margin: 0; padding: 0 0 10px 0; color: #343434;} .bw-jobs li h3 a {color: #343434; text-decoration: none;} .bw-jobs li h3 a:hover, .bw-jobs li h3 a:focus {opacity: .7;} .bw-jobs li p {padding: 0; margin: 0;} .bw-jobs li a.bw-job-more {display: inline-block; float: right; padding: 4px 8px; margin: 1px 0 5px 10px; background-color: #ed1c24; color: #fff; text-decoration: none; border: none; -webkit-transition: background-color .1s ease-out; -moz-transition: background-color .1s ease-out; -ms-transition: background-color .1s ease-out; -o-transition: background-color .1s ease-out; transition: background-color .1s ease-out;} .bw-jobs li a.bw-job-more:hover, .bw-jobs li a.bw-job-more:focus {background-color: #343434;} /* OPENBETA --- */ .bw-page-openbeta #content h1 {text-align: center;} .bw-page-openbeta #content h3 {text-align: center; font-weight: 300;} .bw-page-openbeta #content .bw-openbeta-signup {background: transparent; padding: 45px 0;} .bw-page-openbeta #content .bw-openbeta-signup label {color: #343434;} .bw-page-openbeta #content .bw-openbeta-signup input[type=text], .bw-page-openbeta #content .bw-openbeta-signup input[type=email] {border: 2px solid rgba(52,52,52,.2);} .bw-page-openbeta #content #mce-error-response {color: #ed1c24;} .bw-page-openbeta #content #mce-success-response {color: #343434;} /* GENERIC PAGES --- */ .bw-content-page-area {padding: 50px 45px;} /* TODO -- on wide screens, adjust padding-left/right */ .bw-content-page-area.container-fluid {margin-left: -15px; margin-right: -15px;} .bw-content-page-area h1, .bw-content-page-area h2, .bw-content-page-area h3, .bw-content-page-area h4 {font-family: 'betafont', Tahoma, Verdana, sans-serif; margin: 0; padding: 0 0 20px 0;} .bw-content-page-area p {font-size: 1.6rem; line-height: 1.54em; color: #343434;} .bw-content-page-area p a {color: #343434; border-bottom: 2px solid #343434; text-decoration: none; -webkit-transition: color .1s ease-out, border-color .1s ease-out; -moz-transition: color .1s ease-out, border-color .1s ease-out; -ms-transition: color .1s ease-out, border-color .1s ease-out; -o-transition: color .1s ease-out, border-color .1s ease-out; transition: color .1s ease-out, border-color .1s ease-out;} .bw-content-page-area p a:hover, .bw-content-page-area p a:focus {color: #ed1c24; border-color: #ed1c24;} @media (max-width: 767px) { .bw-content-page-area {padding: 5px 15px 35px 15px;} } /* EEgg */ #giphyTime img {opacity: 0; box-shadow: 0 5px 5px rgba(255,255,255,.5); border: 3px solid #fff; border-radius: 2px;-webkit-transition: opacity .25s ease-out; -moz-transition: opacity .25s ease-out; -ms-transition: opacity .25s ease-out; -o-transition: opacity .25s ease-out; transition: opacity .25s ease-out;} #giphyTime img.loaded {opacity: 1;} /* 404 PAGE --- */ .bw-page-404 {background-color: #218cd2;} .bw-page-404 #container {padding: 90px 35px;} .bw-page-404 h1 {margin: 0; padding: 0 0 0 0; color: #fff; text-align: center; font-size: 4.2rem; line-height: .75em;} .bw-page-404 h2 {marign: 0; padding: 0 0 25px 0; color: #fff; font-weight: 300; text-align: center; font-size: 2.4rem; line-height: 1.0em;} .bw-page-404 p {text-align: center;} .bw-page-404 p a {color: #fff;} .bw-page-404 p a:hover span {opacity: .7;} .bw-page-404 p img {display: inline-block; border: 0px solid transparent; border-radius: 100%; box-shadow: 0 0 120px rgba(255,255,255,.18);} .bw-page-404 p.action {margin-top: 75px; text-align: center;} .bw-page-404 p.action a {display: block; max-width: 160px; margin: 0 auto;} /* TODO MEDIA SCALE FONT SIZE */