/* variables to use with Media Queries */ /* variables of commonly used colors */ /* Sets both the regular background image and the retina one. Make sure to set the background-size in the selector that uses this mixin, in order for the retina image to display properly. */ /* Table of Content ================================================== #Reset & Basics #Basic Styles #Site Styles #Typography #Links #Lists #Images #Buttons #Forms #Misc */ /* #Reset & Basics (Inspired by E. Meyers) ================================================== */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* #Basic Styles ================================================== */ body { color: #000; font-family: "DINWeb", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16pt; line-height: 26px; position: relative; padding: 0; } /* #Typography ================================================== */ h1, h2, h3, h5 { color: #000; font-family: "DINWeb-Cond", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; } h4, h6 { color: #FFF; font-family: "DINWeb", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } h1 { font-size: 66px; line-height: 70px; margin-bottom: 20px; } h2 { font-size: 35px; line-height: 40px; letter-spacing: 2px; margin-top: 30px; margin-bottom: 8px; text-transform: uppercase; color: #F84E3D; } h3 { font-size: 35px; line-height: 40px; margin-bottom: 10px; } h4 { font-size: 32px; line-height: 46px; margin-bottom: 20px; } h5 { font-size: 20px; line-height: 30px; margin-bottom: 20px; } h6 { font-size: 14px; font-weight: 700; line-height: 20px; margin-bottom: 20px; } p { font-size: 18px; line-height: 28px; margin: 0 0 10px 0; } p img { margin: 0; } p.lead { font-size: 21px; line-height: 35px; color: #000; } em { font-style: italic; } strong { font-weight: bold; } small { font-size: 80%; } /* Blockquotes */ blockquote, blockquote p { font-family: 'Archer SSm A', 'Archer SSm B'; font-weight: 500; font-style: italic; font-size: 36px; line-height: 45px; } blockquote { margin: 0 0 0; } blockquote cite { display: block; font-size: 12px; color: #555; } blockquote cite:before { content: "\2014 \0020"; } blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; } hr { border: solid #ddd; border-width: 0 0 1px; clear: both; margin: 0px 0 30px; height: 0; } /* #Links ================================================== */ a, a:visited { color: #333; text-decoration: underline; outline: 0; } a:hover, a:focus { color: #000; } p a, p a:visited { line-height: inherit; } /* #Lists ================================================== */ ul, ol { margin-bottom: 20px; } ul { list-style: none outside; } ol { list-style: decimal; } ol, ul.square, ul.circle, ul.disc { margin-left: 30px; } ul.square { list-style: square outside; } ul.circle { list-style: circle outside; } ul.disc { list-style: disc outside; } ul ul, ul ol, ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%; } ul ul li, ul ol li, ol ol li, ol ul li { margin-bottom: 6px; } li { line-height: 18px; margin-bottom: 12px; } ul.large li { line-height: 21px; } li p { line-height: 21px; } /* #Images ================================================== */ img.scale-with-grid { max-width: 100%; height: auto; } /* #Buttons ================================================== */ .button, button, input[type="submit"], input[type="reset"], input[type="button"] { background: #b11f24; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; color: #fff; display: inline-block; font-size: 24px; line-height: 40px; text-decoration: none; text-align: center; padding-top: 1px; } .button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover { background: #911c14; } .button.full-width, button.full-width, input[type="submit"].full-width, input[type="reset"].full-width, input[type="button"].full-width { width: 100%; padding-left: 0 !important; padding-right: 0 !important; text-align: center; } /* Fix for odd Mozilla border & padding issues */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* #Forms ================================================== */ form { margin-bottom: 20px; } fieldset { margin-bottom: 20px; } input[type="text"], input[type="password"], input[type="email"], textarea, select { border: 1px solid #ccc; padding: 6px 4px; outline: none; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #777; margin: 0; width: 210px; max-width: 100%; display: block; margin-bottom: 20px; background: #fff; } select { padding: 0; } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus { border: 1px solid #aaa; color: #444; -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); } textarea { min-height: 60px; } label, legend { display: block; font-weight: bold; font-size: 13px; } select { width: 220px; } input[type="checkbox"] { display: inline; } label span, legend span { font-weight: normal; font-size: 13px; color: #444; } /* tablet portrait size to desktops */ @media (min-width: 768px) { body { padding: 0; font-size: 20pt; line-height: 52px; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } h1 { font-size: 100px; line-height: 100px; margin-top: 30px; margin-bottom: 20px; } h2 { font-size: 70px; line-height: 76px; margin-bottom: 20px; } h3 { font-size: 42px; line-height: 40px; margin-bottom: 10px; } } /* #Font-Face ================================================== */ /* This is the proper syntax for an @font-face file Just create a "fonts" folder at the root, copy your FontName into code below and remove comment brackets */ /* first for IE 4-8 */ @font-face { font-family: DINWeb; src: url("../font/DINWeb.eot"); /* font-stretch: normal; */ font-weight: 400; font-style: normal; } @font-face { font-family: DINWeb; src: url("../font/DINWeb-Bold.eot"); font-weight: 700; } @font-face { font-family: DINWeb; src: url("../font/DINWeb-Black.eot"); font-weight: 800; } @font-face { font-family: DINWeb; src: url("../font/DINWeb-Medium.eot"); font-weight: 500; } @font-face { font-family: DINWeb; src: url("../font/DINWeb-Light.eot"); font-weight: 300; } @font-face { font-family: DINWeb; src: url("../font/DINWeb-LightIta.eot"); font-weight: 300; font-style: italic; } /* until font-stretch is supported in browsers, need a new font-face */ @font-face { font-family: DINWeb-Cond; src: url("../font/DINWeb-Cond.eot"); /* font-stretch: condensed;*/ } @font-face { font-family: DINWeb-Cond; src: url("../font/DINWeb-CondIta.eot"); /* font-stretch: condensed; */ font-style: italic; } @font-face { font-family: Avenir-LightStd; src: url("../font/Avenirltstd.eot"); } /* then for WOFF-capable browsers */ @font-face { font-family: DINWeb; src: url("../font/DINWeb.woff") format("woff"); /* font-stretch: normal; */ font-weight: 400; font-style: normal; } @font-face { font-family: DINWeb; src: url("../font/DINWeb-Bold.woff") format("woff"); font-weight: 700; } @font-face { font-family: DINWeb; src: url("../font/DINWeb-Black.woff") format("woff"); font-weight: 800; } @font-face { font-family: DINWeb; src: url("../font/DINWeb-Medium.woff") format("woff"); font-weight: 500; } @font-face { font-family: DINWeb; src: url("../font/DINWeb-Light.woff") format("woff"); font-weight: 300; } @font-face { font-family: DINWeb; src: url("../font/DINWeb-LightIta.woff") format("woff"); font-weight: 300; font-style: italic; } /* until font-stretch is supported in browsers, need a new font-face for condensed */ @font-face { font-family: DINWeb-Cond; src: url("../font/DINWeb-Cond.woff") format("woff"); /* font-stretch: condensed; */ } @font-face { font-family: DINWeb-Cond; src: url("../font/DINWeb-CondIta.woff") format("woff"); /* font-stretch: condensed; */ font-style: italic; } @font-face { font-family: Avenir-LightStd; src: url("../font/Avenirltstd.woff") format("woff"); } /* Mobile first design (but most of these are mutually exclusive instead of building on on the smaller size's selectors) Table of Contents ================================================== #Mobile (Portrait) #Mobile (Landscape) #Tablet (Portrait) #Tablet (Landscape) or Desktop #Clearing */ /* #Mobile (Portrait) start off with a single column for small screens (~ 320px wide) * ================================================== */ .container { position: relative; width: 280px; margin: 0 auto; padding: 0; } .container .column, .container .columns { float: left; display: inline; margin: 0; } .row { margin-bottom: 20px; } @media (max-width: 479px) { .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .one-third.column, .container .two-thirds.column { width: 280px; } } /* #Mobile (Landscape) widen the single column for slightly larger screens (~ 480px wide) * ================================================== */ @media (min-width: 480px) and (max-width: 767px) { .container { width: 420px; } .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .one-third.column, .container .two-thirds.column { width: 420px; } } /* #Tablet (Portrait) switch to a 12 column grid for tablets or small desktop screens (~ 768px wide) ================================================== */ @media (min-width: 768px) and (max-width: 1079px) { /***************************** 12 Column margin width = 23 column width = 39 ****************************/ .container { width: 744px; } .container .column, .container .columns { margin-left: 12px; margin-right: 11px; } .column.alpha, .columns.alpha { margin-left: 0; margin-right: 11px; } .column.omega, .columns.omega { margin-right: 0; margin-left: 12px; } .alpha.omega { margin-left: 0; margin-right: 0; } /* total column width = (37*numCols) + (20*(numCols-1)) */ .container .one.column, .container .one.columns { width: 39px; } .container .two.columns { width: 101px; } .container .three.columns { width: 163px; } .container .four.columns { width: 225px; } .container .five.columns { width: 287px; } .container .six.columns { width: 349px; } .container .seven.columns { width: 411px; } .container .eight.columns { width: 473px; } .container .nine.columns { width: 535px; } .container .ten.columns { width: 597px; } .container .eleven.columns { width: 659px; } .container .twelve.columns { width: 721px; } .container .one-third.column { width: 2225px; } /* ((744/3) - 23) */ .container .two-thirds.column { width: 473px; } /* (((744/3) *2) - 23) */ /* Offsets */ /* total offset = (39*numCols) + (23*numCols) */ .container .offset-by-one { padding-left: 62px; } .container .offset-by-two { padding-left: 124px; } .container .offset-by-three { padding-left: 186px; } .container .offset-by-four { padding-left: 248px; } .container .offset-by-five { padding-left: 310px; } .container .offset-by-six { padding-left: 372px; } .container .offset-by-seven { padding-left: 434px; } .container .offset-by-eight { padding-left: 496px; } .container .offset-by-nine { padding-left: 558px; } .container .offset-by-ten { padding-left: 620px; } .container .offset-by-eleven { padding-left: 682px; } } /* #Tablet (Landscape) or Desktop ================================================== */ @media (min-width: 1080px) { .container { width: 1032px; } .container .column, .container .columns { margin-left: 16px; margin-right: 16px; } .column.alpha, .columns.alpha { margin-left: 0; } .column.omega, .columns.omega { margin-right: 0; } /***************************** 12 Column (1000/12)-32 = 54 margin = 16*2 = 32 column width = 54 ****************************/ /* Base Grid */ /* total column width = (54*numCols) + (32*(numCols-1)) */ .container .one.column, .container .one.columns { width: 54px; } .container .two.columns { width: 140px; } .container .three.columns { width: 226px; } .container .four.columns { width: 312px; } .container .five.columns { width: 398px; } .container .six.columns { width: 484px; } .container .seven.columns { width: 570px; } .container .eight.columns { width: 656px; } .container .nine.columns { width: 742px; } .container .ten.columns { width: 828px; } .container .eleven.columns { width: 914px; } .container .twelve.columns { width: 1000px; } .container .one-third.column { width: 312px; } /* ((1032/3) - 32) */ .container .two-thirds.column { width: 656px; } /* (((1032/3) *2) - 32) */ /* Offsets */ /* total offset = (54*numCols) + (32*numCols) */ .container .offset-by-one { margin-left: 86px; } .container .offset-by-two { margin-left: 172px; } .container .offset-by-three { margin-left: 258px; } .container .offset-by-four { margin-left: 344px; } .container .offset-by-five { margin-left: 430px; } .container .offset-by-six { margin-left: 516px; } .container .offset-by-seven { margin-left: 602px; } .container .offset-by-eight { margin-left: 688px; } .container .offset-by-nine { margin-left: 774px; } .container .offset-by-ten { margin-left: 860px; } .container .offset-by-eleven { margin-left: 946px; } } /* #Clearing ================================================== */ /* Self Clearing Goodness */ .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } /* Use clearfix class on parent to clear nested columns, or wrap each row of columns in a
*/ .clearfix:before, .clearfix:after, .row:before, .row:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .row:after, .clearfix:after { clear: both; } .row, .clearfix { zoom: 1; } /* You can also use a
to clear columns */ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .highlight .c { color: #94936D; font-style: italic; } /* Comment */ .highlight .err { color: #B11F24; background-color: #e3d2d2; } /* Error */ .highlight .k { font-weight: bold; } /* Keyword */ .highlight .o { font-weight: bold; } /* Operator */ .highlight .cm { color: #94936D; font-style: italic; } /* Comment.Multiline */ .highlight .cp { color: #989791; font-weight: bold; } /* Comment.Preproc */ .highlight .c1 { color: #94936D; font-style: italic; } /* Comment.Single */ .highlight .cs { color: #989791; font-weight: bold; font-style: italic; } /* Comment.Special */ .highlight .gd { color: #000000; background-color: #ffdddd; } /* Generic.Deleted */ .highlight .gd .x { color: #000000; background-color: #ffaaaa; } /* Generic.Deleted.Specific */ .highlight .ge { font-style: italic; } /* Generic.Emph */ .highlight .gr { color: #aa0000; } /* Generic.Error */ .highlight .gh { color: #989791; } /* Generic.Heading */ .highlight .gi { color: #000000; background-color: #ddffdd; } /* Generic.Inserted */ .highlight .gi .x { color: #000000; background-color: #aaffaa; } /* Generic.Inserted.Specific */ .highlight .go { color: #87877A; } /* Generic.Output */ .highlight .gp { color: #5A594C; } /* Generic.Prompt */ .highlight .gs { font-weight: bold; } /* Generic.Strong */ .highlight .gu { color: #A6A599; } /* Generic.Subheading */ .highlight .gt { color: #aa0000; } /* Generic.Traceback */ .highlight .kc { font-weight: bold; } /* Keyword.Constant */ .highlight .kd { font-weight: bold; } /* Keyword.Declaration */ .highlight .kp { font-weight: bold; } /* Keyword.Pseudo */ .highlight .kr { font-weight: bold; } /* Keyword.Reserved */ .highlight .kt { color: #599CC6; font-weight: bold; } /* Keyword.Type */ .highlight .m { color: #375789; } /* Literal.Number */ .highlight .s { color: #e45d50; } /* Literal.String */ .highlight .na { color: #67B5C1; } /* Name.Attribute */ .highlight .nb { color: #0086B3; } /* Name.Builtin */ .highlight .nc { color: #599CC6; font-weight: bold; } /* Name.Class */ .highlight .no { color: #67B5C1; } /* Name.Constant */ .highlight .ni { color: #4F1E61; } /* Name.Entity */ .highlight .ne { color: #C77023; font-weight: bold; } /* Name.Exception */ .highlight .nf { color: #C77023; font-weight: bold; } /* Name.Function */ .highlight .nn { color: #5A594C; } /* Name.Namespace */ .highlight .nt { color: #6756A0; } /* Name.Tag */ .highlight .nv { color: #67B5C1; } /* Name.Variable */ .highlight .ow { font-weight: bold; } /* Operator.Word */ .highlight .w { color: #B5B4A8; } /* Text.Whitespace */ .highlight .mf { color: #375789; } /* Literal.Number.Float */ .highlight .mh { color: #375789; } /* Literal.Number.Hex */ .highlight .mi { color: #375789; } /* Literal.Number.Integer */ .highlight .mo { color: #375789; } /* Literal.Number.Oct */ .highlight .sb { color: #e45d50; } /* Literal.String.Backtick */ .highlight .sc { color: #e45d50; } /* Literal.String.Char */ .highlight .sd { color: #e45d50; } /* Literal.String.Doc */ .highlight .s2 { color: #e45d50; } /* Literal.String.Double */ .highlight .se { color: #e45d50; } /* Literal.String.Escape */ .highlight .sh { color: #e45d50; } /* Literal.String.Heredoc */ .highlight .si { color: #e45d50; } /* Literal.String.Interpol */ .highlight .sx { color: #e45d50; } /* Literal.String.Other */ .highlight .sr { color: #459A6F; } /* Literal.String.Regex */ .highlight .s1 { color: #e45d50; } /* Literal.String.Single */ .highlight .ss { color: #BF2F61; } /* Literal.String.Symbol */ .highlight .bp { color: #989791; } /* Name.Builtin.Pseudo */ .highlight .vc { color: #67B5C1; } /* Name.Variable.Class */ .highlight .vg { color: #67B5C1; } /* Name.Variable.Global */ .highlight .vi { color: #67B5C1; } /* Name.Variable.Instance */ .highlight .il { color: #375789; } /* Literal.Number.Integer.Long */ .highlight .gc { color: #999; background-color: #EAF2F5; } /* Table of Content ================================================== #Site Styles #Page Styles #Media Queries #Font-Face */ /* #Site Styles ================================================== */ body { padding-bottom: 170px; /* for footer */ } i { font-style: italic; } a:hover, a:focus { color: #fff; border-bottom: 1px solid #fff; } a.button:hover { border: 0; cursor: pointer; } a, a:visited { color: #fff; text-decoration: none; font-weight: 500; } p.last { margin-bottom: 36px; } p.pull.last { margin-bottom: 30px; } span.amp { font-family: "Baskerville", "Times", "Times New Roman", serif; font-style: italic; font-size: 16pt; } span.apos { font-size: 200%; color: #97cadf; display: block; position: absolute; margin-left: -35px; } .footer-waves { background: url("../img/Footer-Wave-260.png") no-repeat; width: 261px; height: 32px; margin: 50px auto; } .footer { position: absolute; bottom: 0; height: 170px; width: 100%; } .footer .container { position: absolute; bottom: 0; padding-left: 50%; margin-left: -140px; text-align: center; } .footer a { color: #F84E3D; border: none; } .footer .email { display: block; font-size: 22px; padding-bottom: 18px; } .footer #phone-icon { position: relative; } .footer .social { margin-bottom: 0; text-align: center; } .footer .social li { display: inline; margin-right: 33px; } .footer .social li:last-child { margin-right: 0px; } .footer .social li a:hover { border: none; } .footer .social svg { vertical-align: middle; } .footer .social .icon { fill: #F84E3D; } .footer .copyright { color: #F84E3D; font-size: 14px; letter-spacing: .5px; padding: 10px 0 18px 0; margin: 0; clear: both; text-align: center; } span#dingusburger { display: block; width: 40px; height: 52px; background: url("../img/hamburger.png") no-repeat 50% 50%; z-index: 9000; position: absolute; top: 0px; right: 0px; } div.navigation { opacity: 1; background: rgba(0, 0, 0, 0.8); position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; -webkit-transform: translate(0, 0); -webkit-transition: -webkit-transform .2s; } div.navigation.hidden { opacity: 0; -webkit-transform: translate(0, -68px); -webkit-transition: -webkit-transform .2s, opacity 0 .3s; } div.navigation p { text-indent: -9999px; font-size: 14px; line-height: 32px; font-weight: 300; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 0 10px; padding: 10px 48px; background: url("../img/navigation-logo.png") no-repeat 0 6px; z-index: 2000; } div.navigation ul { position: absolute; margin: 0; top: 52px; right: 0px; background: rgba(0, 0, 0, 0.8); width: 100%; padding-bottom: 10px; padding-top: 8px; display: none; } div.navigation ul li { margin: 0 18px 0 0; display: block; padding: 10px 20px; } div.navigation ul li a, div.navigation ul li a:visited { color: #fff; font-size: 20px; line-height: 20px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; } div.navigation ul li.selected a, div.navigation ul li.selected a:hover, div.navigation ul li.selected a:visited { color: #97cadf; border-bottom: 2px solid #97cadf; } div.navigation ul li a:hover { border-bottom-width: 2px; } .quote { margin-left: -14px; background: url("../img/Quote.png") no-repeat left top; } .quote#white { margin-left: -14px; background: url("../img/QuoteWhite.png") no-repeat left top; } .quote blockquote, .non-quote blockquote { color: #000; margin-left: 14px; margin-bottom: 18px; padding-top: 20px; font-size: 16px; line-height: 24px; font-weight: 500; } .solid-btn { display: block; font-size: 24px; line-height: 58px; font-weight: 300; border-radius: 3px; width: 258px; height: 54px; background-color: #323132; margin: 20px auto; text-align: center; } .solid-btn:hover { border: none; cursor: pointer; } .transparent-btn { display: block; font-size: 24px; line-height: 46px; font-weight: 300; border: 2px solid #fff; border-radius: 3px; width: 258px; height: 42px; margin: 22px auto; text-align: center; } .transparent-btn:hover { border: 2px solid #fff; } /* a simple little modal dialog; use onclick="showModal(type)" to show an element with class="modal-dialog" that has a child class="modal-content". Then put the html for the content in popup.js' showModal(). */ .modal-dialog { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.8); z-index: 1000; visibility: hidden; opacity: 0; transition: opacity .5s ease-in; /* set display=none to make it easier to select items via the debugger, but it won't transition nicely if you keep it display:none; */ } .modal-dialog.active { visibility: visible; opacity: 1; } .modal-dialog .modal-content { position: relative; width: 280px; height: 166px; margin: 68px auto 0 auto; background: #000; } .modal-dialog .modal-content .close { position: absolute; right: -14px; top: -14px; background-color: #000; border-radius: 20px; border: 2px solid #fff; color: #fff; font-size: 14px; line-height: 28px; font-weight: 500; height: 25px; width: 25px; text-decoration: none; text-align: center; z-index: 500; cursor: pointer; } .modal-dialog .modal-content iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* #Page Styles ================================================== */ .show-on-lg-screen, .show-on-largest-screen { display: none !important; } /* Use White Footer for these pages */ #madebymc .footer a, #madebymc .footer .copyright, #about .footer a, #about .footer .copyright, #consulting .footer a, #consulting .footer .copyright { color: #fff; } #madebymc .footer .icon, #about .footer .icon, #consulting .footer .icon { fill: #fff; } #blog .footer a, #blog .footer .copyright, #syndicate .footer a, #syndicate .footer .copyright { color: #959595; } #blog .footer .icon, #syndicate .footer .icon { fill: #959595; } /****************************************/ /********** Original Home page **********/ /****************************************/ body#madebymc { background: #000 url("../img/madebymc/mobile-starfield.jpg") no-repeat center top; color: #ccc; } #madebymc #planet { padding-top: 90px; padding-bottom: 70px; width: 53%; height: auto; margin: 0 auto; display: block; } #madebymc #poem p { font-size: 20px; line-height: 35px; z-index: 100; position: relative; } #madebymc #poem strong { color: #fff; font-weight: 500; } #madebymc .footer { background: url("../img/madebymc/mobile-footer.jpg") no-repeat right bottom; background-size: auto 260px; height: 410px; } /**************************************/ /******** Republic Sniper page ********/ /**************************************/ body#repubsniper { background: #000 url("../img/repubsniper/background-640.jpeg") no-repeat 50% 50%; min-height: 100%; background-size: cover; color: #fff; padding-top: 60px; position: relative; } body#repubsniper .modal-dialog .modal-content { height: 116px; } body#repubsniper h2 { margin-top: 8px; } body#repubsniper .navigation ul { display: none; } body#repubsniper .navigation a p { text-indent: -9999px; } #repubsniper .footer { display: none; } #repubsniper h1 { color: #fff; } #repubsniper #trailer { display: none; } #repubsniper #trailer-mobile img { width: 100%; } #repubsniper #trailer-mobile { padding-top: 10px; padding-bottom: 30px; } div#mc_embed_signup { margin-top: 10px; padding-bottom: 220px; } #repubsniper div.submit-form { position: relative; height: 60px; background: rgba(255, 255, 255, 0.2); } #repubsniper input.email { background: 0; border: 0; font-family: "DINWeb"; font-size: 14pt; color: #a9a8a8; padding: 0; padding-left: 18px; height: 60px; width: 100%; } #repubsniper input.button { background: url("../img/repubsniper/submit-arrow.png") no-repeat right; border: 0; width: 26px; height: 23px; position: absolute; right: 18px; top: 18px; text-indent: -9999px; } #repubsniper p#press-inquires { margin-top: 19px; font: 12px/16px Verdana, sans-serif; color: #b2b2b2; } #repubsniper p#press-inquires a, #repubsniper p#press-inquires a:visited { color: #b2b2b2; } #repubsniper p#press-inquires a:hover { color: #f2f2f2; } #repubsniper a.video-play-button:hover { border: 0; } /*************************************/ /********** Consulting page **********/ /*************************************/ #consulting { background-color: #000; } #consulting section { padding: 35px 0 80px 0; } #consulting section h1 { line-height: 63px; margin-bottom: 30px; } #consulting section h2 { letter-spacing: -1px; text-transform: none; color: #000; margin-top: 6px; margin-bottom: 0px; } #consulting section h3 { font-size: 31px; line-height: 37px; margin-top: 6px; margin-bottom: 0px; } #consulting section p { font-size: 16px; line-height: 25px; margin-top: 30px; margin-bottom: 30px; color: #000; text-align: left; } #consulting section .button { display: block; color: #97C1DF; font-size: 26px; line-height: 48px; font-weight: 400; background: transparent; border: 3px solid #97C1DF; padding: 0; margin: 0 auto; height: 44px; vertical-align: middle; border-radius: 0; } #consulting #services { padding-top: 90px; background-image: url("../img/consulting/StarfieldTile-Top.png"); background-repeat: repeat; } #consulting #services h1 { color: #F84E3D; letter-spacing: .5px; text-align: center; margin-bottom: 40px; } #consulting #services p { font-size: 21px; color: #fff; text-align: center; } #consulting ul#service-list li { color: #ccc; font-size: 16px; line-height: 22px; padding-top: 75px; text-align: center; margin-bottom: 40px; margin-left: 10px; width: 125px; } #consulting #service-list li#design { background: url("../img/consulting/SIcon-Design.png") no-repeat 50% 0; background-size: 40% auto; } #consulting #service-list li#software-dev { background: url("../img/consulting/SIcon-Development.png") no-repeat 50% 0; background-size: 52% auto; } #consulting #service-list li#server-dev { background: url("../img/consulting/SIcon-ServerDev.png") no-repeat 50% 15%; background-size: 60% auto; } #consulting #service-list li#game-dev { background: url("../img/consulting/SIcon-Games.png") no-repeat 50% 0; background-size: 48% auto; } #consulting #service-list li#site-training { background: url("../img/consulting/SIcon-Training.png") no-repeat 50% 0; background-size: 42% auto; margin-left: 80px; } #consulting #software { background-color: #F84E3D; padding-bottom: 54px; } #consulting #counter img { max-width: 104%; width: 270px; height: auto; } #consulting #dividers { clear: both; height: 195px; border-top: 2px solid rgba(0, 0, 0, 0.3); border-bottom: 2px solid rgba(0, 0, 0, 0.3); } #consulting #dividers h3 { margin-top: 25px; } #consulting #dividers img { margin-top: 15px; height: auto; } #consulting #experience { background-color: #FFFAF3; padding-top: 54px; padding-bottom: 70px; overflow-x: hidden; } #consulting #experience .lg-img { display: none; } #consulting #experience .sm-img { display: block; } #consulting #experience h1 { font-size: 32px; line-height: 37px; letter-spacing: -1px; } #consulting #experience h1 strong { color: #F84E3D; } #consulting #experience h2 { color: #F84E3D; font-size: 30px; line-height: 37px; letter-spacing: 0; margin-bottom: 10px; } #consulting hr { border-color: #999; margin: 10px 0; } #consulting .ref-title { display: none; } #consulting .ref-desc { color: #999; font-size: 13px; line-height: 21px; margin: 0; } #consulting .reference-item .sm-img { width: 260px; height: auto; display: block; margin: 0 auto; } #consulting .reference-item#ibm > img.sm-img { width: 520px; height: auto; margin-left: -120px; } #consulting .reference-item#thislife img.sm-img { width: 340px; margin-left: -40px; } #consulting .reference-item#newscorp { padding-top: 16px; } #consulting .reference-item#rhapsody { padding-top: 64px; } #consulting .reference-item#obama { padding-top: 84px; } #consulting .reference-item#ibm { padding-top: 90px; } #consulting .reference-item#training { padding-top: 73px; } #consulting .reference-item#associatedpress { padding-top: 90px; } #consulting .reference-item#thislife { padding-top: 75px; } #consulting .reference-item#transactions { padding-top: 80px; } #consulting .sm-left.column { float: left; width: 156px; text-transform: uppercase; font-size: 11px; line-height: 16px; } #consulting .sm-right.column { float: right; max-width: 80px; max-height: 38px; width: auto; height: auto; } #consulting #clients { background: url("../img/consulting/mobile-starfield.png") repeat; padding: 64px 0 50px 0; } #consulting #clients h1 { color: #F84E3D; margin-bottom: 8px; font-size: 49px; line-height: 52px; } #consulting #clients blockquote { color: #fff; font-size: 15px; line-height: 24px; margin-bottom: 40px; } #consulting #client-logos { background: url("../img/consulting/ClientLogos-260.png") no-repeat 50% 0; position: relative; height: 700px; top: 0; left: 0; right: 100%; z-index: 5; } #consulting .footer { background: url("../img/consulting/mobile-MarsDunes.png") repeat-x; height: 204px; } /*************************************/ /********** Inventors page **********/ /*************************************/ #inventors { background-color: #FFFAF3; } #inventors > #ideas a { color: #F84E3D; } #inventors #book { background: #1077BD url("../img/inventors/GearBg.png") no-repeat 100px 70%; padding-top: 25px; padding-bottom: 0px; } #inventors #book .container { width: 300px; } #inventors #book img { margin-left: -58px; padding-top: 90px; padding-bottom: 35px; width: 160px; height: auto; float: left; } #inventors #book h1 { color: #FFF; font-size: 34px; line-height: 37px; padding-top: 60px; margin-bottom: 0; width: 185px; float: right; } #inventors #book p { color: #FFF; font-size: 11px; line-height: 15px; padding-top: 15px; padding-bottom: 30px; margin: 0; float: right; width: 185px; } #inventors #ideas .container { width: 260px; } #inventors #ideas img { display: block; margin: 0 auto; padding-top: 30px; width: 80px; height: auto; } #inventors #ideas h4 { color: #323132; font-size: 20px; line-height: 28px; padding-top: 10px; margin-bottom: 20px; } #inventors #ideas p { color: #4B4C4E; font-size: 13px; line-height: 21px; margin-bottom: 20px; } #inventors .footer-waves { display: none; } /*================================================== #Media Queries: @media (min-width: 480px) @media (min-width: 768px) @media (min-width: 1080px) ================================================== */ /*====================================================================*/ /*================= landscape phone size and up ====================*/ /*====================================================================*/ @media (min-width: 480px) { body#madebymc { padding-bottom: 260px; } .modal-dialog .modal-content { width: 420px; height: 237px; } .footer .container { margin-left: -210px; } /* turn on phone number hovering */ .footer #phone-icon:hover:before { content: ""; position: absolute; display: block; bottom: 36px; left: 0; border-width: 8px 8px 0 8px; border-style: solid; border-color: #ccc transparent; width: 0; height: 0; } .footer #phone-icon:hover:after { content: "719-602-1105"; display: block; padding: 4px 15px 0 15px; color: #000; position: absolute; left: -30px; bottom: 42px; background-color: #fff; font-size: 22px; line-height: 34px; font-weight: 400; white-space: nowrap; border: 1px solid #ccc; } /**********************************************/ /********** Original Home page > 480 **********/ /**********************************************/ #madebymc .footer { background-size: cover; height: 380px; } /*******************************************/ /********** Consulting page > 480 **********/ /*******************************************/ #consulting #service-list li#game-dev { margin-left: 65px; } #consulting #service-list li#site-training { margin-left: 30px; } #consulting #counter img { width: 436px; } #consulting #dividers { height: 216px; } #consulting .reference-item#ibm > img.sm-img { width: 620px; margin-left: -100px; } #consulting .reference-item#thislife img.sm-img { width: 420px; margin: 0 auto; } #consulting #dividers h3 { font-size: 2em; text-align: center; } #consulting #clients h1 { font-size: 42px; } #consulting #client-logos { background: url("../img/consulting/ClientLogos-420.png") no-repeat 50% 0; height: 1100px; } /******************************************/ /********** Inventors page > 480 **********/ /******************************************/ #inventors #book .container, #inventors #ideas .container { width: 420px; } #inventors #book h1 { font-size: 52px; line-height: 55px; width: 275px; } #inventors #book img { margin-left: -115px; width: 240px; } #inventors #book p { font-size: 15px; line-height: 22px; width: 275px; } #inventors #ideas img { margin-bottom: 10px; } #inventors #ideas h4 { font-size: 28px; line-height: 30px; width: 400px; } #inventors #ideas p { font-size: 15px; width: 400px; } body#repubsniper { background: #000 url("../img/repubsniper/background-1600.jpeg") no-repeat 50% 50%; } body#repubsniper .modal-dialog .modal-content { height: 175px; } #repubsniper #trailer { display: block; padding-top: 30px; } #repubsniper #trailer img { width: 100%; } #repubsniper #trailer-mobile { display: none; } div#mc_embed_signup { padding-bottom: 260px; } } /*====================================================================*/ /*=================== portrait tablet size and up ==================*/ /*====================================================================*/ @media (min-width: 768px) { body { letter-spacing: 0.12px; padding-bottom: 120px; /* for footer */ } p.last { margin-bottom: 52px; } .modal-dialog .modal-content { width: 720px; height: 400px; } .show-on-sm-screen { display: none !important; } .show-on-lg-screen { display: block !important; } span.amp { font-size: 130%; } .footer-waves { background: url("../img/Footer-Wave-768.png") no-repeat; width: 726px; height: 64px; margin: 70px auto; } .footer { height: 120px; } .footer .container { margin-left: -372px; } .footer .email { display: inline; font-size: 27px; padding-top: 8px; margin-right: 33px; } .footer .social { display: inline; } .footer .copyright { padding-top: 0; } /*** Navigation ***/ span#dingusburger { display: none; } div.navigation p { text-indent: 0; margin-left: 32px; padding: 18px 48px; background-position: 0 12px; } div.navigation ul { display: block; top: 8px; padding: 0; width: auto; background: transparent; } div.navigation ul li { display: inline-block; padding: 0; } div.navigation ul li a, div.navigation ul li a:visited { font-size: 18px; } .solid-btn { width: 282px; margin-top: 10px; } /**********************************************/ /********** Original Home page > 768 **********/ /**********************************************/ body#madebymc { background: #000 url("../img/madebymc/starfield.jpg") no-repeat top center; padding-bottom: 360px; } #madebymc #planet { width: 53%; } #madebymc #poem p { width: 530px; padding-left: 140px; } #madebymc .footer { background-image: url("../img/madebymc/footer.jpg"); background-size: 100%; height: 982px; } body#repubsniper { background: #000 url("../img/repubsniper/background-1600.jpeg") no-repeat 50% 50%; } body#repubsniper .modal-dialog .modal-content { height: 303px; } #repubsniper #trailer { padding-top: 70px; } /*******************************************/ /********** Consulting Page > 768 **********/ /*******************************************/ #consulting section { padding: 80px 0 100px 0; } #consulting section h1 { color: #000; text-align: left; font-size: 100px; line-height: 100px; margin-bottom: 26px; } #consulting section h2 { font-size: 70px; line-height: 76px; } #consulting section p { font-size: 32px; line-height: 40px; margin-top: 20px; margin-bottom: 20px; color: #000; text-align: left; } #consulting section .button { margin: 32px auto 0 auto; width: 311px; height: 48px; padding-top: 5px; vertical-align: middle; font-size: 22px; } #consulting #services { padding-top: 77px; padding-bottom: 73px; } #consulting #services h1 { margin-bottom: 45px; } #consulting #services p { font-size: 21px; color: #fff; text-align: center; } #consulting #service-list li#game-dev, #consulting #service-list li#site-training { margin-left: 10px; } #consulting #software { padding-top: 68px; padding-bottom: 50px; } #consulting #software p { font-size: 18px; line-height: 25px; margin-top: 0; margin-bottom: 50px; } #consulting #software h2, #consulting #software h3 { color: #000; font-size: 42px; line-height: 42px; } #consulting #counter { float: right; margin-top: -16px; } #consulting #counter img { width: 362px; } #consulting #counter h2 { float: left; margin-top: -18px; font-size: 32px; } #consulting #dividers { clear: both; height: 90px; border-top: 2px solid rgba(0, 0, 0, 0.3); border-bottom: 2px solid rgba(0, 0, 0, 0.3); } #consulting #dividers h3 { font-size: 24px; text-align: left; margin-right: 0; margin-top: 25px; } #consulting #dividers img { float: right; margin-top: 24px; } #consulting #experience { padding-top: 70px; padding-bottom: 100px; } #consulting #experience .sm-img { display: none; } #consulting #experience .lg-img { display: block; } #consulting #experience h1 { font-size: 60px; line-height: 72px; letter-spacing: -1px; } #consulting #experience h2 { font-size: 52px; line-height: 62px; letter-spacing: -1px; } #consulting #experience .lg-img { width: 100%; height: auto; } #consulting .quote blockquote, #consulting .non-quote blockquote { font-size: 25px; line-height: 33px; margin-bottom: 30px; } #consulting .quote .person { display: block; margin-left: 14px; color: #F84E3D; font-weight: bold; text-transform: uppercase; font-size: 16px; line-height: 20px; letter-spacing: 1px; } #consulting .quote .person-title { display: block; margin: 4px 0 20px 14px; color: #000; font-size: 16px; line-height: 20px; letter-spacing: .25px; } #consulting .logo-img { max-width: 100px; max-height: 60px; height: auto; } #consulting .ref-title { display: block; text-transform: uppercase; color: #999999; font-size: 12px; line-height: 21px; letter-spacing: 1.25px; } #consulting .ref-desc { font-size: 13px; line-height: 21px; margin: 0; } #consulting .reference-item#newscorp { padding-top: 36px; } #consulting .reference-item#rhapsody { padding-top: 84px; } #consulting .reference-item#obama { padding-top: 138px; } #consulting .reference-item#ibm { padding-top: 106px; } #consulting .reference-item#training { padding-top: 58px; } #consulting .reference-item#associatedpress { padding-top: 80px; } #consulting .reference-item#thislife { padding-top: 120px; } #consulting .reference-item#transactions { padding-top: 116px; } #consulting .reference-item#newscorp h2 { margin-bottom: 0; } #consulting .reference-item#rhapsody h2 { padding-top: 74px; margin-bottom: 15px; letter-spacing: -1.5px; } #consulting .reference-item#obama h2:first-of-type { padding: 46px 0 30px 0; font-size: 48px; line-height: 52px; } #consulting .reference-item#obama .lg-img { margin-bottom: 20px; } #consulting .reference-item#ibm h2 { padding-bottom: 6px; text-align: center; } #consulting .reference-item#ibm .lg-img { width: 1040px; margin-left: -168px; } #consulting .reference-item#training h2 { padding-top: 70px; font-size: 44px; line-height: 52px; } #consulting .reference-item#associatedpress h2 { top: -5px; width: 500px; font-size: 54px; letter-spacing: -1.5px; padding-top: 10px; position: relative; } #consulting .reference-item#associatedpress blockquote { width: 360px; } #consulting .reference-item#associatedpress .lg-img { margin: 105px auto 9px 10px; width: 360px; } #consulting .reference-item#thislife h2 { font-size: 56px; letter-spacing: -1.5px; padding-top: 18px; } #consulting .reference-item#thislife .sm-img.lg-img { width: 722px; margin: 0 auto 17px auto; } #consulting .reference-item#transactions .lg-img { padding-top: 55px; } #consulting .reference-item#newscorp .quote { margin-top: 70px; width: 350px; } #consulting #clients { background: url("../img/consulting/StarfieldTile-Top.png") repeat 0 0; } #consulting #client-logos { background: url("../img/consulting/ClientLogos-744.png") no-repeat 50% 0; height: 540px; } #consulting #clients h1 { margin-bottom: 12px; font-size: 74px; line-height: 80px; } #consulting #clients blockquote { font-size: 27px; line-height: 36px; margin-bottom: 60px; } #consulting .footer { background: url("../img/consulting/MarsDunes.png") repeat-x 0 100px; height: 560px; } /******************************************/ /********** Inventors page > 768 **********/ /******************************************/ #inventors #book { background-position: 250px 100%; padding-top: 25px; padding-bottom: 0px; } #inventors #book .container, #inventors #ideas .container { width: 744px; } #inventors #book img { padding-top: 134px; margin-left: -160px; width: 380px; } #inventors #book h1 { font-size: 94px; line-height: 100px; width: 500px; padding-top: 90px; } #inventors #book p { font-size: 21px; line-height: 30px; width: 500px; padding-bottom: 50px; padding-top: 30px; } #inventors #ideas h4 { padding-top: 30px; padding-bottom: 20px; font-size: 30px; line-height: 30px; width: 744px; } #inventors #ideas img { width: 144px; padding-top: 0; padding-left: 10px; float: left; } #inventors #ideas p { font-size: 18px; line-height: 24px; width: 550px; float: right; } #inventors .footer-waves { display: block; } } /*====================================================================*/ /*================= landscape tablet size and up ===================*/ /*====================================================================*/ @media (min-width: 1080px) { .modal-dialog .modal-content { width: 920px; height: 520px; } .show-on-largest-screen { display: block !important; } .container .lg-five.columns { width: 398px; } .container .lg-seven.columns { width: 570px; } .footer-waves { background: url("../img/Footer-Wave-1200.png") no-repeat; width: 1080px; height: 70px; margin: 94px auto; } .footer .container { margin-left: -516px; } .transparent-btn { width: 310px; height: 60px; line-height: 64px; margin-bottom: 12px; } /*******************************************************/ /********** Original Home Page - largest size **********/ /*******************************************************/ body#madebymc { padding-bottom: 600px; } #madebymc #poem p { padding-left: 210px; } body#repubsniper { background: #000 url("../img/repubsniper/background.jpeg") no-repeat 50% 50%; } body#repubsniper .modal-dialog .modal-content { height: 388px; } div#mc_embed_signup { padding-bottom: 120px; } /****************************************************/ /********** Consulting Page - largest size **********/ /****************************************************/ #consulting section h1 { margin-bottom: 0; } #consulting #dividers h3 { font-size: 34px; } #consulting #dividers img { margin-top: 15px; } #consulting section .button { margin-top: 110px; } #consulting .quote blockquote, #consulting .non-quote blockquote { font-size: 32px; line-height: 44px; letter-spacing: -1px; } #consulting #services { padding-top: 114px; padding-bottom: 100px; } #consulting #services h1 { margin-bottom: 74px; } #consulting ul#service-list { margin-left: 16px; } #consulting ul#service-list li { padding-top: 115px; width: 200px; margin: 0; } #consulting #service-list li#game-dev, #consulting #service-list li#site-training { margin-left: 0; } #consulting #software { padding: 100px 0; } #consulting #software p { font-size: 21px; line-height: 35px; margin-top: 30px; margin-bottom: 70px; } #consulting #counter { margin-top: 38px; } #consulting #counter img { width: 483px; } #consulting #counter h2 { margin-top: -10px; font-size: 42px; } #consulting #experience { padding-top: 108px; padding-bottom: 140px; } #consulting #experience h1 { font-size: 90px; line-height: 90px; } #consulting #experience h2 { font-size: 70px; line-height: 76px; } #consulting .quote .person, #consulting .quote .person-title { font-size: 18px; } #consulting .ref-title { font-size: 12px; line-height: 25px; } #consulting .ref-desc { font-size: 18px; line-height: 25px; } #consulting #clients h1 { font-size: 100px; line-height: 100px; margin-bottom: 38px; } #consulting .reference-item#ibm .sm-img.lg-img { width: 1220px; } #consulting .reference-item#newscorp { padding-top: 100px; } #consulting .reference-item#rhapsody { padding-top: 64px; } #consulting .reference-item#obama { padding-top: 138px; } #consulting .reference-item#ibm { padding-top: 210px; } #consulting .reference-item#training { padding-top: 65px; } /* #consulting .reference-item#associatedpress { padding-top: 150px; }*/ #consulting .reference-item#thislife { padding-top: 180px; } #consulting .reference-item#transactions { padding-top: 125px; } #consulting .reference-item#newscorp h2 { margin: 0 36px 0 0; letter-spacing: -2px; float: right; width: 526px; } #consulting .reference-item#rhapsody h2 { padding-top: 144px; } #consulting .reference-item#obama h2:first-of-type { padding: 16px 0 0 0; font-size: 66px; line-height: 76px; width: 475px; } #consulting .reference-item#obama h2 { font-size: 66px; padding-top: 16px; } #consulting .reference-item#obama .lg-img { width: 93%; margin-bottom: 26px; } #consulting .reference-item#ibm h2 { padding-bottom: 10px; text-align: center; } #consulting .reference-item#ibm .lg-img { width: 1300px; margin: 0 0 40px -168px; } #consulting .reference-item#training h2 { font-size: 68px; line-height: 66px; } #consulting .reference-item#associatedpress { padding-top: 200px; } #consulting .reference-item#associatedpress h2 { top: -20px; padding-top: 0px; font-size: 70px; width: 700px; /*top: 100px;*/ position: relative; } #consulting .reference-item#associatedpress blockquote { width: 500px; } #consulting .reference-item#associatedpress .lg-img { margin: 40px 0 0 50px; width: 480px; } #consulting .reference-item#thislife h2 { font-size: 70px; padding-top: 0; margin-top: 0; } #consulting .reference-item#thislife .sm-img.lg-img { width: 85%; margin: 0 auto 17px auto; } #consulting .reference-item#transactions .lg-img { padding-top: 32px; } #consulting .reference-item#newscorp .quote { margin: 16px 0 62px 0; width: 570px; } #consulting #clients { padding: 71px 0 240px 0; } #consulting #clients blockquote { font-size: 30px; line-height: 40px; margin-bottom: 113px; } #consulting #client-logos { background: url("../img/consulting/ClientLogos-996.png") no-repeat 50% 0; height: 580px; } /***************************************************/ /********** Inventors page - largest size **********/ /***************************************************/ #inventors #book { background-position: 596px 100%; } #inventors #book .container, #inventors #ideas .container { width: 1032px; } #inventors #book h1 { font-size: 96px; padding-top: 100px; margin-bottom: 0; width: 590px; } #inventors #book p { line-height: 35px; padding-top: 20px; padding-right: 20px; margin: 0; width: 570px; } #inventors #book img { margin-left: -215px; padding-top: 85px; padding-bottom: 10px; width: 585px; } #inventors #ideas h4 { font-size: 42px; line-height: 52px; padding-top: 76px; margin-bottom: 45px; width: 1032px; } #inventors #ideas p { font-size: 20px; line-height: 35px; width: 765px; } #inventors #ideas img { width: 190px; } } /********************************/ /********** About Page **********/ /********************************/ #about { background: #fff; padding-bottom: 170px; } #about .footer a, #about .footer .copyright { color: #000; } #about .footer .icon { fill: #000; } #about .bio-info { display: none; } #about section h1 { color: #fff; font-size: 60px; line-height: 60px; letter-spacing: -.25px; margin-bottom: 10px; } #about section h2 { color: #e45d50; text-align: center; font-size: 60px; font-weight: 300; line-height: 58px; letter-spacing: 1px; } #about section h3 { color: #e45d50; text-align: left; font-size: 40px; letter-spacing: 1px; margin-bottom: 10px; } #about section h6 { color: rgba(255, 255, 255, 0.5); font-size: 14px; font-weight: 400; letter-spacing: .2px; text-transform: uppercase; margin-bottom: 4px; } #about section p { color: #353535; font-size: 16px; line-height: 22px; letter-spacing: .25px; } #about section p a { color: #e45d50; } #about section p a:hover { text-decoration: none; } #about #header { padding-top: 190px; box-sizing: border-box; height: 1100px; background-color: #272e38; background-image: url("../img/about/background-map-320.png"); background-repeat: no-repeat; background-position: center top; background-size: 480px auto; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #about #header { background-image: url("../img/about/background-map-320@2x.png"); } } #about #header p { color: #fff; line-height: 24px; } #about #header p#first { font-size: 18px; } #about #header .column-wrapper { background-image: url("../img/about/SateliiteA-1200.png"); background-repeat: no-repeat; background-position: center 18px; background-size: 150px auto; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #about #header .column-wrapper { background-image: url("../img/about/SateliiteA-1200@2x.png"); } } #about #header .column-wrapper p#second { font-family: 'Archer SSm A', 'Archer SSm B'; padding-top: 190px; margin-bottom: 18px; } #about #about-us { background-image: url("../img/about/Telliscope-1200.png"); background-repeat: no-repeat; background-position: center 70px; background-size: 176px auto; padding: 276px 0 54px 0; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #about #about-us { background-image: url("../img/about/Telliscope-1200@2x.png"); } } #about #leadership { background-color: #f0f0f1; padding: 40px 0 60px 0; } #about #leadership .leader-wrapper { width: 280px; margin: 0 auto; } #about #leadership .leader { display: inline-block; position: relative; cursor: pointer; width: 124px; height: auto; padding-top: 132px; margin: 11px 6px 6px 6px; vertical-align: top; background-repeat: no-repeat; background-size: 248px 124px; background-position: 0 top; } #about #leadership .leader:hover, #about #leadership .leader:focus, #about #leadership .leader:active { border-bottom: none; } #about #leadership .leader:hover::after { opacity: 1; } #about #leadership .leader.active::after { opacity: 1; } #about #leadership .leader::after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; background-repeat: no-repeat; background-size: 248px 124px; background-position: -124px top; -webkit-transition: opacity .2s; transition: opacity .2s; } #about #leadership .leader#kyle { background-image: url("../img/about/portrait_kyle.jpg"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #about #leadership .leader#kyle { background-image: url("../img/about/portrait_kyle@2x.jpg"); } } #about #leadership .leader#kyle::after { background-image: url("../img/about/portrait_kyle.jpg"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #about #leadership .leader#kyle::after { background-image: url("../img/about/portrait_kyle@2x.jpg"); } } #about #leadership .leader#jaimee { background-image: url("../img/about/portrait_jaimee.jpg"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #about #leadership .leader#jaimee { background-image: url("../img/about/portrait_jaimee@2x.jpg"); } } #about #leadership .leader#jaimee::after { background-image: url("../img/about/portrait_jaimee.jpg"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #about #leadership .leader#jaimee::after { background-image: url("../img/about/portrait_jaimee@2x.jpg"); } } #about #leadership .leader#ben { background-image: url("../img/about/portrait_ben.jpg"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #about #leadership .leader#ben { background-image: url("../img/about/portrait_ben@2x.jpg"); } } #about #leadership .leader#ben::after { background-image: url("../img/about/portrait_ben.jpg"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #about #leadership .leader#ben::after { background-image: url("../img/about/portrait_ben@2x.jpg"); } } #about #leadership .leader#josh { background-image: url("../img/about/portrait_josh.jpg"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #about #leadership .leader#josh { background-image: url("../img/about/portrait_josh@2x.jpg"); } } #about #leadership .leader#josh::after { background-image: url("../img/about/portrait_josh.jpg"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #about #leadership .leader#josh::after { background-image: url("../img/about/portrait_josh@2x.jpg"); } } #about #leadership .leader#joe { background-image: url("../img/about/portrait_joe.jpg"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #about #leadership .leader#joe { background-image: url("../img/about/portrait_joe@2x.jpg"); } } #about #leadership .leader#joe::after { background-image: url("../img/about/portrait_joe.jpg"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #about #leadership .leader#joe::after { background-image: url("../img/about/portrait_joe@2x.jpg"); } } #about #leadership .leader#nick { background-image: url("../img/about/portrait_nick.jpg"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #about #leadership .leader#nick { background-image: url("../img/about/portrait_nick@2x.jpg"); } } #about #leadership .leader#nick::after { background-image: url("../img/about/portrait_nick.jpg"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #about #leadership .leader#nick::after { background-image: url("../img/about/portrait_nick@2x.jpg"); } } #about #leadership .leader#carlos { background-image: url("../img/about/portrait_carlos.jpg"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #about #leadership .leader#carlos { background-image: url("../img/about/portrait_carlos@2x.jpg"); } } #about #leadership .leader#carlos::after { background-image: url("../img/about/portrait_carlos.jpg"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #about #leadership .leader#carlos::after { background-image: url("../img/about/portrait_carlos@2x.jpg"); } } #about #leadership .leader#trevor { background-image: url("../img/about/portrait_trevor.jpg"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #about #leadership .leader#trevor { background-image: url("../img/about/portrait_trevor@2x.jpg"); } } #about #leadership .leader#trevor::after { background-image: url("../img/about/portrait_trevor.jpg"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #about #leadership .leader#trevor::after { background-image: url("../img/about/portrait_trevor@2x.jpg"); } } #about #leadership .leader#kevin { background-image: url("../img/about/portrait_kevin.jpg"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #about #leadership .leader#kevin { background-image: url("../img/about/portrait_kevin@2x.jpg"); } } #about #leadership .leader#kevin::after { background-image: url("../img/about/portrait_kevin.jpg"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #about #leadership .leader#kevin::after { background-image: url("../img/about/portrait_kevin@2x.jpg"); } } #about #leadership .leader span { display: block; text-align: center; font-weight: 400; } #about #leadership .leader .name { color: #272e38; text-transform: uppercase; font-size: 14px; line-height: 14px; margin-bottom: 2px; } #about #leadership .leader .title { color: #e45d50; font-size: 13px; line-height: 13px; } #about #leadership .bio-wrapper { position: relative; display: none; margin-top: -16px; } #about #leadership .bio-wrapper .bio-pointer::after { content: " "; top: -6px; width: 0; height: 0; position: relative; border-style: solid; border-width: 0 12px 10px 12px; border-color: transparent transparent #272e38 transparent; -webkit-transition: left .5s ease-out; transition: left .5s ease-out; } #about #leadership .bio-wrapper .bio-box { background-color: #272e38; padding: 30px 26px 22px 26px; margin: 0 0 20px 0; position: relative; } #about #leadership .bio-wrapper .bio-box a:hover, #about #leadership .bio-wrapper .bio-box a:focus { border-bottom: none; } #about #leadership .bio-wrapper#bio-kyle .bio-pointer::after, #about #leadership .bio-wrapper#bio-ben .bio-pointer::after, #about #leadership .bio-wrapper#bio-josh .bio-pointer::after, #about #leadership .bio-wrapper#bio-trevor .bio-pointer::after, #about #leadership .bio-wrapper#bio-carlos .bio-pointer::after { left: 56px; } #about #leadership .bio-wrapper#bio-jaimee .bio-pointer::after, #about #leadership .bio-wrapper#bio-nick .bio-pointer::after, #about #leadership .bio-wrapper#bio-joe .bio-pointer::after, #about #leadership .bio-wrapper#bio-kevin .bio-pointer::after { left: 198px; } #about #leadership .bio-wrapper .personal-info p { color: #fff; font-size: 15px; line-height: 18px; font-family: 'Archer SSm A', 'Archer SSm B', serif; letter-spacing: .5px; margin-bottom: 8px; } #about #leadership .bio-wrapper .personal-info .email { color: #e45d50; font-size: 15px; } #about #leadership .bio-wrapper .personal-info .social { margin: 16px 0 0 0; vertical-align: middle; } #about #leadership .bio-wrapper .personal-info .social li { display: inline-block; width: 24px; height: 17px; margin: 0 0 0 16px; text-align: center; } #about #leadership .bio-wrapper .personal-info .social li:first-child { margin-left: 0; } #about #leadership .bio-wrapper .personal-info .social li svg { fill: rgba(255, 255, 255, 0.5); width: 24px; height: 24px; } #about #leadership .bio-wrapper .fav-drink { display: none; } #about #leadership .bio-wrapper .more-trigger, #about #leadership .bio-wrapper .less-trigger { font-style: italic; opacity: 100; -webkit-transition: opacity .25s ease; transition: opacity .25s ease; } #about #leadership .bio-wrapper .more-trigger.hidden, #about #leadership .bio-wrapper .less-trigger.hidden { opacity: 0; cursor: default; } #about #leadership .bio-wrapper .more-info { display: none; } #about #news { padding: 50px 0 20px 0; border-bottom: 1px solid rgba(53, 53, 53, 0.07); } #about #news .timePosted { color: #959595; font-family: 'Archer SSm A', 'Archer SSm B', serif; font-style: italic; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: .5px; margin-bottom: 0; } #about #news .tweet { font-family: 'Archer SSm A', 'Archer SSm B', serif; font-style: italic; font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: .5px; margin-bottom: 28px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; } #about #news .tweet a, #about #news .tweet a:visited { font-weight: 700; } #about #news .tweet a[data-expanded-url], #about #news .tweet a[data-expanded-url]:visited { color: #959799; } #about #news img { max-width: 100%; } #about #news #tweets li:first-child .timePosted { margin-bottom: 4px; } #about #news #tweets li:first-child .tweet { font-size: 16px; margin-bottom: 0; } #about #news #tweets li:first-child .interact { margin: 16px 0 30px 0; } #about #news #tweets li:first-child .interact a { color: #959595; font-size: 14px; letter-spacing: .5px; margin-right: 28px; background-repeat: no-repeat; background-position: left center; background-size: auto 14px; padding-left: 26px; } #about #news #tweets li:first-child .interact .twitter_reply_icon { background-image: url("../img/about/twitter-reply.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #about #news #tweets li:first-child .interact .twitter_reply_icon { background-image: url("../img/about/twitter-reply@2x.png"); } } #about #news #tweets li:first-child .interact .twitter_retweet_icon { background-image: url("../img/about/twitter-retweet.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #about #news #tweets li:first-child .interact .twitter_retweet_icon { background-image: url("../img/about/twitter-retweet@2x.png"); } } #about #news #tweets li:first-child .interact .twitter_fav_icon { background-image: url("../img/about/twitter-favorite.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #about #news #tweets li:first-child .interact .twitter_fav_icon { background-image: url("../img/about/twitter-favorite@2x.png"); } } #about #news #tweets li:not(:first-child) .interact { display: none; } #about #mc-badge { text-align: center; padding-top: 40px; } #about #mc-badge img { width: 128px; height: auto; } /*================================================== #Media Queries: @media (min-width: 480px) @media (min-width: 768px) @media (min-width: 1080px) ================================================== */ /*====================================================================*/ /*================= landscape phone size and up ====================*/ /*====================================================================*/ @media (min-width: 480px) { #about section p { font-size: 18px; line-height: 24px; } #about #header { padding-top: 220px; height: 1100px; background-image: url("../img/about/background-map-480.png"); background-size: 768px auto; } } @media (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-device-pixel-ratio: 1.5), (min-width: 480px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-resolution: 2dppx) { #about #header { background-image: url("../img/about/background-map-480@2x.png"); } } @media (min-width: 480px) { #about #header p { line-height: 26px; } #about #header p#first { font-size: 20px; } #about #header .column-wrapper { background-position: center 18px; background-size: 175px auto; } #about #header .column-wrapper p#second { padding-top: 220px; margin-bottom: 20px; } } /*====================================================================*/ /*=================== portrait tablet size and up ==================*/ /*====================================================================*/ @media (min-width: 768px) { #about { padding-bottom: 154px; } #about section h1 { font-size: 80px; letter-spacing: 0; margin-bottom: 40px; text-align: center; } #about section p { font-size: 18px; line-height: 28px; } #about section h6 { margin-bottom: 12px; } #about #header { padding-top: 148px; height: 1340px; background-image: url("../img/about/background-map-768.png"); background-size: 1200px auto; } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #about #header { background-image: url("../img/about/background-map-768@2x.png"); } } @media (min-width: 768px) { #about #header p { line-height: 30px; } #about #header p#first { padding-top: 200px; font-size: 24px; line-height: 32px; margin: 0 auto; } #about #header .column-wrapper { background-position: 30px 100px; background-size: 200px auto; } #about #header .column-wrapper p { width: 420px; padding-left: 300px; } #about #header .column-wrapper p#second { padding-top: 108px; margin-bottom: 40px; font-size: 22px; line-height: 35px; } #about #header .column-wrapper p#third { background-image: url("../img/about/SateliiteB-1200.png"); background-repeat: no-repeat; background-position: 150px bottom; background-size: 100px auto; font-size: 20px; line-height: 32px; height: 310px; } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #about #header .column-wrapper p#third { background-image: url("../img/about/SateliiteB-1200@2x.png"); } } @media (min-width: 768px) { #about #leadership { padding: 40px 0 30px 0; } #about #leadership .leader-wrapper { width: 710px; } #about #leadership .leader { width: 156px; padding-top: 165px; margin: 24px 8px 4px 8px; background-size: 312px 156px; } #about #leadership .leader::after { background-size: 312px 156px; background-position: -156px top; } #about #leadership .leader .name { font-size: 17px; line-height: 20px; } #about #leadership .leader .title { font-size: 13px; line-height: 13px; } #about #leadership .bio-wrapper { margin-top: -34px; } #about #leadership .bio-wrapper .bio-pointer::after { top: 1px; border-width: 0 14px 12px 14px; } #about #leadership .bio-wrapper .bio-box { padding-bottom: 20px; margin: 0 8px 6px 8px; } #about #leadership .bio-wrapper .personal-info { display: inline-block; vertical-align: top; width: 374px; margin-right: 24px; } #about #leadership .bio-wrapper .personal-info .contact-info { margin-top: -10px; } #about #leadership .bio-wrapper .personal-info .contact-info .email { margin-right: 30px; display: inline-block; } #about #leadership .bio-wrapper .personal-info .contact-info .social { margin: 10px 0 0 0; display: inline-block; } #about #leadership .bio-wrapper .fav-drink { display: inline-block; vertical-align: top; width: 236px; } #about #leadership .bio-wrapper .fav-drink .name { color: #fff; font-size: 20px; line-height: 24px; font-family: "DINWeb-Cond", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .25px; padding-bottom: 4px; } #about #leadership .bio-wrapper .fav-drink p { color: #fff; font-size: 15px; line-height: 21px; margin: 0; letter-spacing: 0; } #about #leadership .bio-wrapper#bio-kyle .bio-pointer::after, #about #leadership .bio-wrapper#bio-josh .bio-pointer::after, #about #leadership .bio-wrapper#bio-carlos .bio-pointer::after { left: 76px; } #about #leadership .bio-wrapper#bio-jaimee .bio-pointer::after, #about #leadership .bio-wrapper#bio-joe .bio-pointer::after { left: 252px; } #about #leadership .bio-wrapper#bio-ben .bio-pointer::after, #about #leadership .bio-wrapper#bio-trevor .bio-pointer::after { left: 430px; } #about #leadership .bio-wrapper#bio-nick .bio-pointer::after, #about #leadership .bio-wrapper#bio-kevin .bio-pointer::after { left: 610px; } #about #news .container { width: 710px; } #about #news .timePosted { font-size: 14px; line-height: 20px; margin-bottom: 2px; } #about #news .tweet { font-size: 18px; line-height: 24px; margin-bottom: 30px; } #about #news #tweets li:first-child .timePosted { margin-bottom: 6px; } #about #news #tweets li:first-child .tweet { font-size: 20px; } #about #news #tweets li:first-child .interact { margin: 20px 0 34px 0; } #about #news #tweets li:first-child .interact a { font-size: 17px; margin-right: 28px; background-position: left center; } #about #mc-badge { padding-top: 50px; } #about #mc-badge img { width: 150px; } } /*====================================================================*/ /*================= landscape tablet size and up ===================*/ /*====================================================================*/ @media (min-width: 1080px) { #about { padding-bottom: 140px; } #about section h1 { font-size: 90px; } #about section p { font-size: 18px; line-height: 28px; } #about #header { padding-top: 150px; height: 1340px; background-image: url("../img/about/background-map-1200.png"); background-size: 1800px auto; } } @media (min-width: 1080px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-device-pixel-ratio: 1.5), (min-width: 1080px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-resolution: 2dppx) { #about #header { background-image: url("../img/about/background-map-1200@2x.png"); } } @media (min-width: 1080px) { #about #header p#first { padding-top: 200px; font-size: 34px; line-height: 50px; width: 800px; } #about #header .column-wrapper { background-position: 50px 100px; background-size: 278px auto; } #about #header .column-wrapper p { width: 580px; padding-left: 450px; } #about #header .column-wrapper p#third { background-position: 270px bottom; background-size: 124px auto; height: 284px; } #about #about-us { padding: 150px 0 142px 140px; background-position: 770px center; background-size: 296px auto; } #about #about-us p { width: 580px; } #about #leadership { padding: 90px 0 44px 0; } #about #leadership h2 { width: 820px; margin: 30px auto 20px auto; background-image: url("../img/about/leader_lines_left.png"), url("../img/about/leader_lines_right.png"); background-position: left 12px, right 12px; background-repeat: no-repeat; background-size: 231px auto; } #about #leadership p { width: 840px; margin: 32px auto; } #about #leadership .leader-wrapper { width: 1030px; } #about #leadership .leader { width: 226px; padding-top: 236px; margin: 26px 13px 6px 13px; background-size: 452px 226px; } #about #leadership .leader::after { background-size: 452px 226px; background-position: -226px top; } #about #leadership .leader .name { font-size: 23px; line-height: 28px; } #about #leadership .leader .title { font-size: 14px; line-height: 14px; } #about #leadership .bio-wrapper .bio-box { padding: 54px 90px 44px 90px; margin: 0 10px 26px 10px; } #about #leadership .bio-wrapper .personal-info { width: 470px; } #about #leadership .bio-wrapper .personal-info p { font-size: 21px; line-height: 26px; letter-spacing: .25px; width: 480px; margin: 0 0 28px 0; } #about #leadership .bio-wrapper .personal-info .contact-info { margin-top: -24px; } #about #leadership .bio-wrapper .personal-info .contact-info .email { font-size: 16px; } #about #leadership .bio-wrapper .fav-drink { width: 314px; } #about #leadership .bio-wrapper .fav-drink .name { font-size: 24px; line-height: 30px; letter-spacing: .25px; } #about #leadership .bio-wrapper .fav-drink p { font-size: 15px; line-height: 21px; letter-spacing: 0; width: 320px; margin: 0; } #about #leadership .bio-wrapper .more-trigger, #about #leadership .bio-wrapper .less-trigger { font-size: 21px; } #about #leadership .bio-wrapper#bio-kyle .bio-pointer::after, #about #leadership .bio-wrapper#bio-josh .bio-pointer::after, #about #leadership .bio-wrapper#bio-carlos .bio-pointer::after { left: 113px; } #about #leadership .bio-wrapper#bio-jaimee .bio-pointer::after, #about #leadership .bio-wrapper#bio-joe .bio-pointer::after { left: 372px; } #about #leadership .bio-wrapper#bio-ben .bio-pointer::after, #about #leadership .bio-wrapper#bio-trevor .bio-pointer::after { left: 632px; } #about #leadership .bio-wrapper#bio-nick .bio-pointer::after, #about #leadership .bio-wrapper#bio-kevin .bio-pointer::after { left: 888px; } #about #news { padding: 54px 0 0 0; } #about #news .container { width: 1010px; } #about #news ul { margin-bottom: 0; } #about #news li { display: inline-block; width: 220px; vertical-align: top; margin-right: 30px; } #about #news .timePosted { font-size: 14px; line-height: 20px; margin-bottom: 2px; } #about #news .tweet { font-size: 18px; line-height: 24px; margin-bottom: 30px; } #about #news #tweets li:first-child { width: 470px; margin-right: 40px; } #about #news #tweets li:first-child .timePosted { margin-bottom: 6px; } #about #news #tweets li:first-child .tweet { font-size: 22px; line-height: 28px; } #about #news #tweets li:first-child .interact { margin: 20px 0 34px 0; } #about #mc-badge { padding-top: 102px; } #about #mc-badge img { width: 160px; } } /*====================================================================*/ /*================= landscape tablet size and up ===================*/ /*====================================================================*/ @media (min-width: 1080px) { #about #header { background-image: url("../img/about/background-map-1800.png"); background-size: 2560px auto; } } @media (min-width: 1080px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-device-pixel-ratio: 1.5), (min-width: 1080px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-resolution: 2dppx) { #about #header { background-image: url("../img/about/background-map-1800@2x.png"); } } /***********************************/ /********** Products page **********/ /***********************************/ #products .footer a, #products .footer .copyright { color: #8b949a; } #products .footer .icon { fill: #8b949a; } #products { padding-top: 100px; background-color: #000; } #products .app { width: 280px; margin-bottom: 50px; float: left; } #products .app img { height: 140px; width: auto; display: block; margin: 0 auto; } #products #briefs-app img { height: 190px; margin: -25px auto; } #products #changes-app img { height: 160px; margin: -10px auto; } #products .app a { display: block; transition: all 100ms ease-out; transform-origin: 0 200px; -webkit-transform-origin: 0 200px; } #products .app a:hover { border: none; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } #products .app a:hover h4 { text-decoration: none; border: none; letter-spacing: .5px; } #products .app h4 { color: #e95a4d; font-size: 24px; font-weight: 500; line-height: 24px; margin-top: 35px; } #products .app h6 { color: #8b949a; font-size: 16px; font-weight: 700; letter-spacing: 0px; margin-bottom: 6px; } #products .app p { color: #8b949a; font-size: 16px; line-height: 25px; font-weight: 200; } #products #martiancraft-img { display: block; margin: 40px auto 50px auto; } @media (min-width: 480px) { /*****************************************/ /********** Products page > 480 **********/ /*****************************************/ #products .app { width: 420px; } } @media (min-width: 768px) { /*****************************************/ /********** Products Page > 768 **********/ /*****************************************/ #products { padding-top: 148px; } #products .app { width: 348px; height: 330px; margin: 0 12px 110px 12px; } #products .app img, #products #briefs-app img, #products #changes-app img { margin-left: 0; } } @media (min-width: 1080px) { /**************************************************/ /********** Products Page - largest size **********/ /**************************************************/ #products .app { width: 312px; height: 305px; margin-left: 16px; margin-right: 16px; } #products #typeset-app { clear: none; } } /***************************************************************/ /************** common among various product pages *************/ /***************************************************************/ .product { background-color: #fff; } section.product h1 { font-family: "DINWeb", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 62px; line-height: 62px; font-weight: 300; color: #fff; text-transform: uppercase; margin-bottom: 2px; } section.product h2 { font-family: "DINWeb", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 32px; line-height: 36px; color: #323132; text-transform: uppercase; margin-bottom: 20px; } section.product h3 { font-family: "DINWeb", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 24px; line-height: 28px; color: #323132; margin-top: 10px; margin-bottom: 16px; } section.product h4 { font-size: 24px; font-weight: 300; line-height: 24px; letter-spacing: .5px; color: #fff; text-align: center; margin-bottom: 40px; } section.product h5 { font-family: "DINWeb", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #fff; margin: 0; } section.product p { font-size: 16px; line-height: 24px; font-weight: 300; color: #fff; } .product strong { font-weight: 500; } .product .available { padding-bottom: 30px; width: 280px; margin: 0 auto; } .product .available span { color: rgba(255, 255, 255, 0.5); font-size: 15px; line-height: 27px; letter-spacing: .4px; } .product svg#apple { position: relative; top: 3px; } .product svg#apple .icon { fill: rgba(255, 255, 255, 0.5); } .product svg#google-play { position: relative; top: 3px; } .product svg#google-play .icon { fill: rgba(255, 255, 255, 0.5); } .product .available a { border-bottom: 1px solid rgba(255, 255, 255, 0.5); font-weight: normal; color: rgba(255, 255, 255, 0.5); } .product .available a:hover { color: #fff; border-color: #fff; } .product.header { color: #fff; background-color: #000; padding-top: 90px; text-align: center; background-repeat: no-repeat; background-position: 0 0; } .product.header h1 { padding-top: 134px; background-repeat: no-repeat; background-position: center top; background-size: 110px auto; } .product.header p { letter-spacing: .5px; line-height: 21px; } .product#details { background: #fff; padding-top: 60px; } .product#details p { color: #a8a8a8; line-height: 24px; margin-bottom: 50px; } .product#features { background: #3293e2; padding: 90px 0 44px 0; } .product .feature { background-repeat: no-repeat; background-position: 0 3px; } .product .feature p { font-size: 14px; line-height: 20px; margin-bottom: 40px; } .product#purchase { background-size: cover; text-align: center; padding-top: 50px; } .product#purchase h2 { padding-top: 116px; margin: 0; } .product#purchase p { color: #323132; padding-bottom: 70px; font-size: 15px; line-height: 21px; margin-bottom: 0; } .product#purchase .available { padding-bottom: 80px; } .product#purchase .available span { color: #323132; } .product#purchase #apple .icon { fill: #323132; } .product a.release-notes { color: rgba(0, 0, 0, 0.5); border-bottom: 1px solid rgba(0, 0, 0, 0.5); font-size: 14px; } .product#cross-promotion .promoted-app { padding: 28px 0; background-repeat: no-repeat; background-size: 768px 132px; background-position: right center; } .product#cross-promotion #briefs-app { background-image: url("../img/products/BG_Briefs.png"); padding: 22px 0; } .product#cross-promotion #changes-app { background-image: url("../img/products/BG_Changes.png"); padding: 22px 0; } .product#cross-promotion #touchpad-app { background-image: url("../img/products/BG_Touchpad.png"); } .product#cross-promotion #slender-app { background-image: url("../img/products/BG_Slender.png"); } .product#cross-promotion #typeset-app { background-image: url("../img/products/BG_Typeset.png"); } .product#cross-promotion h1 { font-size: 32px; line-height: 32px; letter-spacing: 1px; margin: 0; padding-top: 8px; padding-left: 94px; background-repeat: no-repeat; background-size: 75px 75px; height: 67px; } .product#cross-promotion #briefs-app h1 { color: #fff; background-image: url("../img/products/icon-briefs.png"); background-size: 98px 98px; margin-top: -5px; margin-left: -10px; padding-top: 21px; padding-left: 104px; height: 71px; } .product#cross-promotion #changes-app h1 { color: #fff; background-image: url("../img/products/icon-changes.png"); background-size: 90px 90px; padding-top: 12px; height: 76px; } .product#cross-promotion #slender-app h1 { background-image: url("../img/products/icon-slender.png"); color: #000; } .product#cross-promotion #touchpad-app h1 { background-image: url("../img/products/icon-touchPad.png"); color: #000; } .product#cross-promotion #typeset-app h1 { color: #fff; background-image: url("../img/products/icon-typeSet.png"); } .product#cross-promotion .promoted-app p { color: #323132; font-size: 14px; line-height: 16px; letter-spacing: 0px; position: absolute; top: 40px; left: 97px; } .product#cross-promotion #briefs-app p, .product#cross-promotion #changes-app p, .product#cross-promotion #typeset-app p { color: #fff; } .product#cross-promotion #briefs-app p { top: 54px; } .product#cross-promotion #changes-app p { top: 46px; } .product#cross-promotion #interested { color: #323132; font-size: 16px; line-height: 20px; font-weight: 500; margin: 20px auto; text-align: center; width: 260px; clear: both; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { .product#cross-promotion .promoted-app { background-size: 768px 132px; } .product#cross-promotion #briefs-app { background-image: url("../img/products/BG_Briefs@2x.png"); } .product#cross-promotion #changes-app { background-image: url("../img/products/BG_Changes@2x.png"); } .product#cross-promotion #touchpad-app { background-image: url("../img/products/BG_Touchpad@2x.png"); } .product#cross-promotion #slender-app { background-image: url("../img/products/BG_Slender@2x.png"); } .product#cross-promotion #typeset-app { background-image: url("../img/products/BG_Typeset@2x.png"); } .product#cross-promotion #briefs-app h1 { background-image: url("../img/products/icon-briefs@2x.png"); background-size: 98px 98px; } .product#cross-promotion #changes-app h1 { background-image: url("../img/products/icon-changes@2x.png"); background-size: 90px 90px; } .product#cross-promotion #touchpad-app h1 { background-image: url("../img/products/icon-touchPad@2x.png"); background-size: 75px 75px; } .product#cross-promotion #slender-app h1 { background-image: url("../img/products/icon-slender@2x.png"); background-size: 75px 75px; } .product#cross-promotion #typeset-app h1 { background-image: url("../img/products/icon-typeSet@2x.png"); background-size: 75px 75px; } } @media (min-width: 480px) { /*********************************************************************/ /************** common among various product pages > 480 *************/ /*********************************************************************/ .product.header { padding-top: 70px; } .product.header h1 { padding: 23px 0 21px 138px; margin-left: 25px; letter-spacing: 1px; text-align: left; background-position: left center; background-size: 128px auto; } .product.header p { padding-top: 2px; } .product.header .transparent-btn { margin-top: 20px; margin-bottom: 12px; } .product.header .available { padding-bottom: 50px; } .product#details { padding-top: 30px; } .product#features { padding-top: 74px; } .product .feature p { margin-bottom: 20px; } .product#cross-promotion h1 { font-size: 42px; letter-spacing: 2px; padding-left: 110px; padding-top: 10px; height: 65px; } .product#cross-promotion #briefs-app h1 { padding-left: 120px; height: 71px; } .product#cross-promotion #changes-app h1 { padding-top: 16px; height: 71px; } .product#cross-promotion .promoted-app p { font-size: 13px; top: 50px; left: 115px; } .product#cross-promotion #changes-app p { top: 56px; } .product#cross-promotion #briefs-app p { top: 60px; left: 115px; } .product#cross-promotion #interested { font-size: 15px; width: 440px; } } @media (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-device-pixel-ratio: 1.5), (min-width: 480px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-resolution: 2dppx) { .product.header h1 { background-position: left center; background-size: 128px auto; } } @media (min-width: 768px) { /**********************************************************************/ /************** common among various product pages > 768 *************/ /**********************************************************************/ section.product h3 { font-size: 28px; line-height: 40px; margin-top: 10px; } section.product h4 { font-size: 42px; line-height: 52px; padding-top: 90px; } section.product h5 { font-size: 21px; line-height: 24px; } section.product p { font-size: 18px; } .product.header { padding-top: 115px; } .product.header h1 { padding: 166px 0 0 0; margin-left: 0; text-align: center; background-position: center top; } .product.header p { padding-top: 4px; padding-bottom: 28px; } .product.header .available { margin-top: 12px; padding-bottom: 70px; } .product#features { padding-top: 70px; padding-bottom: 60px; } .product#features p { font-size: 18px; line-height: 24px; margin-bottom: 48px; } .product .feature { width: 480px; margin: 0 auto; padding-left: 115px; } .product#purchase { padding-top: 76px; } .product#purchase h2 { font-size: 46px; line-height: 52px; letter-spacing: 0; } .product#cross-promotion .promoted-app { float: left; width: 50%; } .product#cross-promotion .promoted-app .container { width: 374px; } .product#cross-promotion h1 { background-position: 20px 0; padding-left: 115px; } .product#cross-promotion #briefs-app h1 { padding-left: 130px; height: 71px; } .product#cross-promotion #changes-app h1 { padding-left: 120px; } .product#cross-promotion .promoted-app p { left: 120px; } .product#cross-promotion #briefs-app p { top: 60px; left: 125px; letter-spacing: 0; } .product#cross-promotion #changes-app p { left: 125px; } .product#cross-promotion #interested { font-size: 18px; padding-top: 20px; padding-bottom: 10px; width: 744px; } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { .product.header h1 { background-position: center top; } .product#cross-promotion h1 { background-position: 20px 0; } } @media (min-width: 1080px) { /***************************************************************/ /************** common among various product pages *************/ /***************************************************************/ section.product h1 { font-size: 100px; line-height: 100px; } section.product h3 { font-size: 42px; line-height: 52px; } section.product h4 { padding-top: 64px; } section.product p { font-size: 24px; line-height: 24px; } .product.header { z-index: 500; padding-top: 85px; } .product.header h1 { background-size: 184px 153px; padding-top: 180px; } .product.header .available { padding-bottom: 60px; } .product#details p { font-size: 18px; } .product#features { padding-top: 100px; } .product#features ul { float: left; padding-left: 74px; } .product .feature { width: 330px; } .product#purchase { padding-top: 96px; } .product#purchase .available { margin-bottom: 55px; } .product#cross-promotion .promoted-app { width: 33.3333%; } .product#cross-promotion .promoted-app .container { width: 356px; } .product#cross-promotion .promoted-app p { font-size: 15px; } /* Hotspots */ .product.screenshot .hotspot { position: absolute; width: 22px; height: 22px; cursor: pointer; opacity: 1; transition: opacity .5s ease; z-index: 100; } .product.screenshot .hotspot:before { /* Inner shape */ content: ''; position: absolute; top: 5px; left: 5px; width: 12px; height: 12px; background-color: #fdea20; border-radius: 50%; box-shadow: 0px 2px 4px #666; } .product.screenshot .hotspot:after { /* Outer glow */ content: ''; position: absolute; top: -9px; left: -9px; width: 30px; height: 30px; border-radius: 50%; border: 5px solid #fdea20; opacity: 0; animation: blip 2s ease-in-out infinite; -webkit-animation: blip 2s ease-in-out infinite; } .product.screenshot .hotspot.visited:before { background-color: #BCAF15; } .product.screenshot .hotspot.visited:after { border-color: transparent; } @-webkit-keyframes blip { 0% { opacity: 0; -webkit-transform: scale(0.1); } 1% { opacity: .6; -webkit-transform: scale(0.1); } 60% { opacity: 0; -webkit-transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(1); } } @keyframes blip { 0% { opacity: 0; transform: scale(0.1); } 1% { opacity: .6; transform: scale(0.1); } 60% { opacity: 0; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } } .product.screenshot .hotspot.delay1:after { -webkit-animation-delay: .1s; animation-delay: .1s; } .product.screenshot .hotspot.delay2:after { -webkit-animation-delay: .2s; animation-delay: .2s; } .product.screenshot .hotspot.delay3:after { -webkit-animation-delay: .3s; animation-delay: .3s; } .product.screenshot .hotspot.delay4:after { -webkit-animation-delay: .4s; animation-delay: .4s; } @-webkit-keyframes glow { 0% { opacity: 1; } 100% { opacity: .4; } } @keyframes glow { 0% { opacity: 1; } 100% { opacity: .4; } } .product.screenshot .hotbutton { position: absolute; width: 35px; height: 17px; cursor: pointer; border: 1px solid #fdea20; box-shadow: 0px 0px 10px #fdea20, 0px 0px 10px #fdea20; /* make it heavier */ -webkit-animation: glow 2s ease-in-out 0 infinite alternate; animation: glow 2s ease-in-out 0 infinite alternate; } .product.screenshot .features-popup { position: absolute; opacity: 0; visibility: hidden; color: white; background-color: #000; width: 250px; border-radius: 5px; border: 1px solid #3293e2; transition: opacity .5s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } .product.screenshot .features-popup .title { margin: 7px 10px 2px 10px; font-size: 14px; line-height: 28px; font-weight: 500; color: white; text-align: left; display: block; } .product.screenshot .features-popup .desc { width: 230px; text-align: left; margin-left: 10px; margin-bottom: 14px; font-size: 14px; line-height: 18px; display: block; } .product.screenshot .features-popup.popped { opacity: 1; } .product.screenshot .features-popup .arrow { position: absolute; top: -13px; left: 113px; width: 22px; height: 14px; z-index: 800; background: url("../img/products/features-popup-arrow-below.png") no-repeat center 0; background-size: 22px 14px; } .product.screenshot .features-popup.above .arrow { background: url("../img/products/features-popup-arrow-above.png") no-repeat center 0; background-size: 22px 14px; } .product.screenshot .features-popup.popped:after { /* blue border */ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 10px; border-radius: 6px; border-top: 1px solid rgba(255, 255, 255, 0.25); } } @media (min-width: 1080px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-device-pixel-ratio: 1.5), (min-width: 1080px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-resolution: 2dppx) { .product.screenshot .features-popup .arrow { background: url("../img/products/features-popup-arrow-below@2x.png") no-repeat center 0; background-size: 22px 14px; } .product.screenshot .features-popup.above .arrow { background: url("../img/products/features-popup-arrow-above@2x.png") no-repeat center 0; background-size: 22px 14px; } } /*****************************************/ /************* Release Notes *************/ /*****************************************/ #release-notes .header { box-sizing: border-box; color: #fff; text-align: center; background-color: #000; background-repeat: no-repeat; background-position: 0 0; height: 412px; padding-top: 112px; } #release-notes .header h1 { font-family: "DINWeb", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 62px; line-height: 62px; font-weight: 300; color: #fff; text-transform: uppercase; margin-bottom: 2px; padding-top: 126px; background-size: 90px 90px; background-repeat: no-repeat; background-position: center top; } #release-notes .header h5 { font-family: "DINWeb", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px; color: #fff; margin: 26px 0 0 0; } #release-notes #briefs-rel .header { background-color: #3b3c40; } #release-notes #briefs-rel .header h1 { background-image: url("../img/products/icon-briefs.png"); background-size: 116px 116px; } #release-notes #briefscase-rel .header { background-color: #3b3c40; } #release-notes #briefscase-rel .header h1 { background-image: url("../img/products/icon-briefsCase.png"); font-size: 48px; } #release-notes #changes-rel .header { background-color: #699bbc; } #release-notes #changes-rel .header h1 { background-image: url("../img/products/icon-changes.png"); } #release-notes #dmtuning-rel .header { background-color: #414142; } #release-notes #dmtuning-rel .header h1 { background-image: url("../img/products/icon-dmTuning.png"); font-size: 52px; } #release-notes #numpad-rel .header { background-color: #fffaf2; } #release-notes #numpad-rel .header h1 { background-image: url("../img/products/icon-numPad.png"); } #release-notes #numpad-rel .header h1, #release-notes #numpad-rel .header h5 { color: #000; } #release-notes #request-rel .header { background-color: #006f7e; } #release-notes #request-rel .header h1 { background-image: url("../img/products/icon-request.png"); } #release-notes #resolve-rel .header { background-color: #21426f; } #release-notes #resolve-rel .header h1 { background-image: url("../img/products/icon-resolve.png"); } #release-notes #slender-rel .header { background-color: #ebebeb; } #release-notes #slender-rel .header h1 { background-image: url("../img/products/icon-slender.png"); } #release-notes #slender-rel .header h1, #release-notes #slender-rel .header h5 { color: #000; } #release-notes #touchpad-rel .header { background-color: #fffaf2; } #release-notes #touchpad-rel .header h1 { background-image: url("../img/products/icon-touchPad.png"); font-size: 54px; } #release-notes #touchpad-rel .header h1, #release-notes #touchpad-rel .header h5 { color: #000; } #release-notes #trivium-rel .header { background-color: #000; } #release-notes #trivium-rel .header h1 { background-image: url("../img/products/icon-trivium.png"); } #release-notes #typeset-rel .header { background-color: #282828; } #release-notes #typeset-rel .header h1 { background-image: url("../img/products/icon-typeSet.png"); } #release-notes .contents { color: rgba(32, 31, 32, 0.65); } #release-notes .contents h4 { color: #323132; font-size: 24px; line-height: 28px; margin-top: 45px; margin-bottom: 13px; } #release-notes .contents p { font-size: 16px; line-height: 25px; margin: 0; } #release-notes .contents ul { list-style: disc; margin-left: 18px; } #release-notes .contents li { font-size: 16px; line-height: 25px; margin-bottom: 4px; } #release-notes .footer a, #release-notes .footer .copyright { color: #323132; } #release-notes .footer .icon { fill: #323132; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #release-notes .header h1 { background-size: 90px 90px; } #release-notes #briefs-rel .header h1 { background-image: url("../img/products/icon-briefs@2x.png"); } #release-notes #briefscase-rel .header h1 { background-image: url("../img/products/icon-briefsCase@2x.png"); } #release-notes #changes-rel .header h1 { background-image: url("../img/products/icon-changes@2x.png"); } #release-notes #dmtuning-rel .header h1 { background-image: url("../img/products/icon-dmTuning@2x.png"); } #release-notes #numpad-rel .header h1 { background-image: url("../img/products/icon-numPad@2x.png"); } #release-notes #resolve-rel .header h1 { background-image: url("../img/products/icon-resolve@2x.png"); } #release-notes #slender-rel .header h1 { background-image: url("../img/products/icon-slender@2x.png"); } #release-notes #touchpad-rel .header h1 { background-image: url("../img/products/icon-touchPad@2x.png"); } #release-notes #trivium-rel .header h1 { background-image: url("../img/products/icon-trivium@2x.png"); } #release-notes #typeset-rel .header h1 { background-image: url("../img/products/icon-typeSet@2x.png"); } } @media (min-width: 480px) { /*******************************************/ /********** Release Notes > 480 ***********/ /*******************************************/ #release-notes .header { padding-top: 86px; height: 278px; } #release-notes .header h1 { padding: 26px 0 12px 128px; letter-spacing: 1px; text-align: left; background-position: left center; } #release-notes .header h5 { margin-top: 20px; } #release-notes #briefs-rel .header h1 { margin-left: 34px; padding-left: 140px; } #release-notes #changes-rel .header h1 { margin-left: 10px; padding-left: 118px; } #release-notes #numpad-rel .header h1, #release-notes #resolve-rel .header h1 { margin-left: 16px; } #release-notes #slender-rel .header h1 { margin-left: 8px; } #release-notes #touchpad-rel .header h1 { font-size: 56px; } #release-notes #trivium-rel .header h1 { margin-left: 24px; } #release-notes #typeset-rel .header h1 { margin-left: 20px; } } @media (min-width: 768px) { /*******************************************/ /********** Release Notes > 768 ***********/ /*******************************************/ #release-notes { padding-bottom: 141px; } #release-notes .header { padding-top: 120px; height: 500px; } #release-notes .header h1 { padding-top: 172px; padding-left: 0 !important; margin-top: 0px; margin-left: 0 !important; text-align: center; font-size: 100px; line-height: 100px; background-size: 120px 120px; background-position: center top; } #release-notes .header h5 { font-size: 24px; line-height: 24px; margin-top: 0; } #release-notes #briefs-rel .header h1 { background-size: 150px 150px; } #release-notes #briefscase-rel .header h1, #release-notes #dmtuning-rel .header h1, #release-notes #touchpad-rel .header h1 { font-size: 100px; } #release-notes .contents { width: 484px; } #release-notes .contents h4 { font-size: 42px; line-height: 52px; margin-top: 104px; margin-bottom: 15px; } #release-notes .contents p, #release-notes .contents li { font-size: 18px; line-height: 28px; } } /****************************************/ /************** Briefs page *************/ /****************************************/ #briefs .footer a, #briefs .footer .copyright { color: #000; } #briefs .footer .icon { fill: #000; } #briefs section h2 { text-transform: none; } #briefs .image-btn { border-radius: 3px; width: 135px; height: 54px; margin: 20px 0 0 0; background-color: #323132; text-align: center; } #briefs .header { background-image: url("../img/products/briefs/Hero_480-backgroundTile.png"); background-repeat: repeat; } #briefs .header h1 { background-image: url("../img/products/icon-briefs.png"); background-size: 128px 128px; } #briefs #laptop { background: url("../img/products/briefs/Hero-480.png") no-repeat -120px top; background-size: auto 232px; height: 232px; } #briefs #cloud-service h3 { color: #3293e2; background-image: url("../img/products/briefs/Cloud-Mobile.png"); background-repeat: no-repeat; background-size: 175px 56px; background-position: 48px 0; padding-top: 82px; text-align: center; } #briefs #details #popover { padding-top: 202px; background: url("../img/products/briefs/Popover.png") no-repeat center top; background-size: 300px auto; width: 300px; margin-left: -16px; /* a hack to get bg image to extend beyond margin */ padding-left: 14px; } #briefs #details #native { padding-top: 30px; padding-bottom: 300px; max-width: 100%; background: url("../img/products/briefs/Devices-320.png") no-repeat center bottom; } #briefs #video { background: #000 url("../img/products/briefs/Video-480.png") no-repeat center 24px; background-size: 768px 224px; height: 250px; } #briefs #video .modal-dialog .modal-content { height: 158px; } #briefs #computer-area { position: relative; top: 65px; left: 50%; margin-left: -111px; padding-top: 34px; width: 222px; } #briefs .video-btn { color: #fff; font-size: 18px; font-weight: 400; width: 190px; margin: 0 auto; text-transform: uppercase; } #briefs .video-btn:hover { cursor: pointer; } #briefs .feature { padding-left: 95px; } #briefs .feature#cross-platform { background-image: url("../img/products/briefs/Features-CrossPlatform.png"); background-size: 56px auto; background-position: 5px 4px; } #briefs .feature#asset-mgmt { background-image: url("../img/products/briefs/Features-AssetMngmt.png"); background-size: 30px auto; background-position: 19px 4px; } #briefs .feature#briefs-live { background-image: url("../img/products/briefs/Features-BriefsLive.png"); background-size: 55px auto; background-position: 7px 4px; } #briefs .feature#cloud { background-image: url("../img/products/briefs/Features-Cloud.png"); background-size: 68px auto; } #briefs .feature#exporting { background-image: url("../img/products/briefs/Features-Export.png"); background-size: 39px auto; background-position: 15px 4px; } #briefs .feature#libraries { background-image: url("../img/products/briefs/Features-UILibrary.png"); background-size: 48px auto; background-position: 9px 4px; } #briefs .feature#layouts { background-image: url("../img/products/briefs/Features-Layouts.png"); background-size: 40px auto; background-position: 13px 4px; } #briefs .feature#file-format { background-image: url("../img/products/briefs/Features-FileFormat.png"); background-size: 25px auto; background-position: 22px 4px; } #briefs .feature#dev-details { background-image: url("../img/products/briefs/Features-Details.png"); background-size: 43px auto; background-position: 11px 4px; } #briefs .feature#slicing { background-image: url("../img/products/briefs/Features-Slices.png"); background-size: 46px auto; background-position: 10px 4px; } #briefs .feature#printing { background-image: url("../img/products/briefs/Features-Printing.png"); background-size: 39px auto; background-position: 14px 4px; } #briefs .feature#fpo { background-image: url("../img/products/briefs/Features-FPO.png"); background-size: 46px auto; background-position: 10px 4px; } #briefs #purchase { background-image: url("../img/products/briefs/DownloadBG-480.png"); background-repeat: no-repeat; } #briefs #briefs-for-mac { background: url("../img/products/icon-briefs.png") no-repeat 50% 0px; background-size: 110px auto; margin-bottom: 40px; } #briefs #briefs-case { background: url("../img/products/icon-briefsCase.png") no-repeat 50% 0; } #briefs .btn-container { width: 280px; margin: 0 auto 20px auto; } #briefs .btn-container:after { content: '\0020'; display: block; clear: both; } #briefs #purchase .solid-btn { margin-bottom: 10px; color: #fff; text-decoration: none; } #briefs #purchase .solid-btn:hover { color: #fff; text-decoration: none; } #briefs #purchase #beta-btn { background-color: #3293e2; margin-bottom: 80px; } #briefs #purchase .available { padding-bottom: 0; margin-bottom: 0; } #briefs #purchase p { font-weight: normal; } #briefs #purchase a { color: #323132; border: none; text-decoration: underline; } #briefs #purchase a:hover { color: #3293e2; border: none; text-decoration: underline; } #briefs #app-store { background: #323132 url("../img/products/briefs/Download-AppStore-White.png") no-repeat 12px 12px; float: left; } #briefs #google-play { background: #323132 url("../img/products/briefs/Download-GooglePlay-White.png") no-repeat 12px 12px; float: right; } #briefs #briefs-case { padding-bottom: 40px; } #briefs #briefs-case p { padding-bottom: 2px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #briefs .header { background-image: url("../img/products/briefs/Hero_480-backgroundTile@2x.png"); background-size: 50px 50px; } #briefs .header h1 { background-image: url("../img/products/icon-briefs@2x.png"); background-size: 128px 128px; } #briefs #laptop { background: url("../img/products/briefs/Hero-480@2x.png") no-repeat -120px top; background-size: auto 232px; } #briefs #cloud-service h3 { color: #3293e2; background-image: url("../img/products/briefs/Cloud-Mobile@2x.png"); background-size: 175px 56px; } #briefs #details #popover { background: url("../img/products/briefs/Popover@2x.png") no-repeat center top; background-size: 345px 190px; } #briefs #details #native { background: url("../img/products/briefs/Devices-320@2x.png") no-repeat center bottom; background-size: 280px auto; } #briefs #video { background: #000 url("../img/products/briefs/Video-480@2x.png") no-repeat center 24px; background-size: 768px 224px; } #briefs .feature#cross-platform { background-image: url("../img/products/briefs/Features-CrossPlatform@2x.png"); background-size: 56px auto; } #briefs .feature#asset-mgmt { background-image: url("../img/products/briefs/Features-AssetMngmt@2x.png"); background-size: 30px auto; } #briefs .feature#briefs-live { background-image: url("../img/products/briefs/Features-BriefsLive@2x.png"); background-size: 55px auto; } #briefs .feature#cloud { background-image: url("../img/products/briefs/Features-Cloud@2x.png"); background-size: 68px auto; } #briefs .feature#exporting { background-image: url("../img/products/briefs/Features-Export@2x.png"); background-size: 39px auto; } #briefs .feature#libraries { background-image: url("../img/products/briefs/Features-UILibrary@2x.png"); background-size: 48px auto; } #briefs .feature#layouts { background-image: url("../img/products/briefs/Features-Layouts@2x.png"); background-size: 40px auto; } #briefs .feature#file-format { background-image: url("../img/products/briefs/Features-FileFormat@2x.png"); background-size: 25px auto; } #briefs .feature#dev-details { background-image: url("../img/products/briefs/Features-Details@2x.png"); background-size: 43px auto; } #briefs .feature#slicing { background-image: url("../img/products/briefs/Features-Slices@2x.png"); background-size: 46px auto; } #briefs .feature#printing { background-image: url("../img/products/briefs/Features-Printing@2x.png"); background-size: 39px auto; } #briefs .feature#fpo { background-image: url("../img/products/briefs/Features-FPO@2x.png"); background-size: 46px auto; } #briefs #purchase { background-image: url("../img/products/briefs/DownloadBG-480@2x.png"); } #briefs #briefs-for-mac { background: url("../img/products/icon-briefs@2x.png") no-repeat 50% 0px; background-size: 110px auto; } #briefs #briefs-case { background: url("../img/products/icon-briefsCase@2x.png") no-repeat 50% 0; background-size: 90px 90px; } #briefs #app-store { background: #323132 url("../img/products/briefs/Download-AppStore-White@2x.png") no-repeat 12px 12px; background-size: 107px 30px; } #briefs #google-play { background: #323132 url("../img/products/briefs/Download-GooglePlay-White@2x.png") no-repeat 12px 12px; background-size: 111px 30px; } } @media (min-width: 480px) { /*****************************************/ /*********** Briefs page > 480 ***********/ /*****************************************/ #briefs #laptop { background-position: center top; background-size: auto 258px; height: 258px; } #briefs #cloud-service h3 { background-position: 125px 0, 222px 0; } #briefs #details #popover { padding-top: 205px; background-size: 345px auto; width: 420px; margin-left: 0; padding-left: 0; } #briefs #details #native { background-position: right 200px; background-size: 220px auto; padding-top: 30px; padding-bottom: 0; } #briefs #details #native p { width: 190px; float: left; margin-bottom: 38px; } #briefs #video { background-position: center 6px; height: 230px; } #briefs #video .modal-dialog .modal-content { height: 231px; } #briefs #computer-area { top: 45px; } #briefs #features { padding-top: 30px; } #briefs #features ul { padding-left: 15px; } } @media (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-device-pixel-ratio: 1.5), (min-width: 480px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-resolution: 2dppx) { #briefs #laptop { background-position: center top; background-size: auto 258px; } #briefs #cloud-service h3 { background-position: 125px 0, 222px 0; } #briefs #details #native { background-position: right 200px; background-size: 220px auto; } #briefs #video { background-position: center 6px; } } @media (min-width: 768px) { /*****************************************/ /*********** Briefs Page > 768 ***********/ /*****************************************/ #briefs .header { padding-top: 120px; } #briefs #how-you-work { width: 600px; margin: 0 auto; } #briefs #how-you-work h3 { font-family: "DINWeb", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; font-size: 42px; line-height: 52px; padding: 44px 0 0 0; text-align: left; margin-top: 0; } #briefs #how-you-work p { font-size: 21px; line-height: 40px; padding-top: 4px; padding-bottom: 16px; margin-bottom: 0; text-align: left; } #briefs #laptop { background-image: url("../img/products/briefs/Hero-1024.png"); background-size: auto 548px; height: 548px; } #briefs #details #popover { background-size: 285px auto; background-position: left 45px; padding-top: 0; padding-left: 300px; margin-top: 35px; } #briefs #details p { line-height: 28px; } #briefs #cloud-service h3 { background-image: url("../img/products/briefs/CloudIcons-Desktop.png"); background-position: right center; background-size: 122px 40px; font-size: 26px; text-align: left; padding-top: 0; } #briefs #details #native { padding-top: 40px; margin-top: 60px; background-image: url("../img/products/briefs/Devices-1025.png"); background-position: right 55px; background-size: 300px auto; } #briefs #details #native h3 { width: 415px; } #briefs #details #native p { width: 415px; margin-bottom: 65px; } #briefs #video { background-image: url("../img/products/briefs/Video-1025.png"); background-position: center top; background-size: auto 550px; height: 530px; } #briefs #video .modal-dialog .modal-content { height: 400px; } #briefs #computer-area { top: 100px; margin-left: -254px; width: 564px; } #briefs .video-btn { margin-top: 114px; font-size: 24px; width: 248px; } #briefs .screenshot { background-color: #3293e2; padding-top: 70px; } #briefs .screenshot #first { width: auto; height: 530px; background-image: url("../img/products/briefs/Briefs_Tab1.png"); background-repeat: no-repeat; background-position: left top; background-size: 744px auto; } #briefs #features { padding-top: 0; } #briefs #features ul { padding-left: 10px; } #briefs .feature { padding-left: 120px; } #briefs .feature#cross-platform { background-size: 80px auto; } #briefs .feature#asset-mgmt { background-size: 42px auto; background-position: 20px 0; } #briefs .feature#briefs-live { background-size: 78px auto; } #briefs .feature#cloud { background-size: 92px auto; } #briefs .feature#exporting { background-size: 53px auto; background-position: 18px 0; } #briefs .feature#libraries { background-size: 66px auto; background-position: 10px 0; } #briefs .feature#layouts { background-size: 55px auto; background-position: 12px 0; } #briefs .feature#file-format { background-size: 35px auto; background-position: 24px 0; } #briefs .feature#dev-details { background-size: 62px auto; background-position: 12px 0; } #briefs .feature#slicing { background-size: 68px auto; background-position: 8px 0; } #briefs .feature#printing { background-size: 56px auto; background-position: 9px 0; } #briefs .feature#fpo { background-size: 69px auto; background-position: 9px 0; } #briefs #purchase { background-image: url("../img/products/briefs/DownloadBG-1024.png"); padding-top: 90px; } #briefs .btn-container { width: 326px; } #briefs .image-btn { width: 154px; margin-top: 10px; } #briefs #app-store { background-position: 22px 12px; } #briefs #purchase .solid-btn { margin-bottom: 0; } #briefs #google-play { background-position: 22px 12px; } #briefs #briefs-for-mac { width: 349px; float: left; background-size: 128px; background-position: center -12px; } #briefs #briefs-case { width: 349px; float: right; padding-right: 20px; padding-bottom: 50px; } #briefs #cross-promotion #typeset-app { display: none; } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #briefs #laptop { background-image: url("../img/products/briefs/Hero-1024@2x.png"); background-size: auto 548px; } #briefs #details #popover { background-size: 285px auto; background-position: left 45px; } #briefs #cloud-service h3 { background-image: url("../img/products/briefs/CloudIcons-Desktop@2x.png"); background-position: right center; background-size: 122px 40px; } #briefs #details #native { background-image: url("../img/products/briefs/Devices-1025@2x.png"); background-position: right 55px; background-size: 300px auto; } #briefs #video { background-image: url("../img/products/briefs/Video-1025@2x.png"); background-position: center top; background-size: auto 550px; } #briefs .screenshot #first { background-image: url("../img/products/briefs/Briefs_Tab1@2x.png"); background-size: 744px auto; } #briefs .feature#cross-platform { background-size: 80px auto; } #briefs .feature#asset-mgmt { background-size: 42px auto; background-position: 20px 0; } #briefs .feature#briefs-live { background-size: 78px auto; } #briefs .feature#cloud { background-size: 92px auto; } #briefs .feature#exporting { background-size: 53px auto; background-position: 18px 0; } #briefs .feature#libraries { background-size: 66px auto; background-position: 10px 0; } #briefs .feature#layouts { background-size: 55px auto; background-position: 12px 0; } #briefs .feature#file-format { background-size: 35px auto; background-position: 24px 0; } #briefs .feature#dev-details { background-size: 62px auto; background-position: 12px 0; } #briefs .feature#slicing { background-size: 68px auto; background-position: 8px 0; } #briefs .feature#printing { background-size: 56px auto; background-position: 9px 0; } #briefs .feature#fpo { background-size: 69px auto; background-position: 9px 0; } #briefs #purchase { background-image: url("../img/products/briefs/DownloadBG-1024@2x.png"); background-size: cover; } #briefs #app-store { background-position: 22px 12px; } #briefs #google-play { background-position: 22px 12px; } #briefs #briefs-for-mac { background-size: 128px; background-position: center -12px; } } @media (min-width: 1080px) { /**************************************************/ /*********** Briefs Page - largest size ***********/ /**************************************************/ #briefs .header h1 { background-size: 194px 194px; } #briefs .header .available { padding-bottom: 553px; } #briefs .header #how-you-work { display: none !important; } #briefs #how-you-work h3 { padding-top: 70px; } #briefs #laptop { background-image: url("../img/products/briefs/Hero-Large.png"); background-position: center top; background-size: auto 516px; margin-top: -408px; } #briefs #laptop #how-you-work { width: 560px; position: relative; left: 50%; margin: 0 0 0 -55px; } #briefs #laptop #how-you-work p { color: #a8a8a8; font-size: 18px; line-height: 28px; font-weight: 400; } #briefs #details #popover { background-size: 345px; background-position: 90px 45px; width: 484px; padding-left: 530px; margin-top: 30px; } #briefs #cloud-service h3 { font-size: 38px; margin-top: 160px; margin-bottom: 120px; } #briefs #details #native { padding-top: 139px; background-size: 472px auto; margin-right: -40px; height: 470px; } #briefs #details #native h3 { width: 484px; } #briefs #details #native p { width: 484px; } #briefs #video { background-size: auto 630px; height: 630px; } #briefs #video .modal-dialog .modal-content { height: 512px; } #briefs #computer-area { top: 90px; width: 650px; margin-left: -291px; } #briefs .video-btn { margin-top: 150px; } #briefs .screenshot { padding-top: 100px; } #briefs .screenshot #first { background-size: 1036px 729px; height: 729px; visibility: hidden; } #briefs .screenshot #second { background-image: url("../img/products/briefs/Briefs_Tab2.png"); background-size: 1036px 729px; position: absolute; top: 0; left: 0; width: 1036px; height: 729px; display: none; } #briefs .screenshot #third { background-image: url("../img/products/briefs/Briefs_Tab3.png"); background-size: 1036px 729px; position: absolute; top: 0; left: 0; width: 1036px; height: 729px; display: none; } #briefs .screenshot #first.active { visibility: visible; } #briefs .screenshot #second.active, #briefs .screenshot #third.active { display: block; } #briefs #second-hotspots, #briefs #third-hotspots { display: none; } /* hotspots on first tab */ #briefs #first-hotspots .hotbutton.second { left: 366px; top: 34px; } #briefs #first-hotspots .hotbutton.third { left: 441px; top: 34px; } #briefs #hotspot-simulator { left: 32px; top: 31px; } #briefs #hotspot-iphone { left: 15px; top: 474px; } #briefs #hotspot-plus-btn { left: 16px; top: 683px; } #briefs #hotspot-scene { left: 535px; top: 129px; } #briefs #hotspot-background { left: 535px; top: 184px; } #briefs #hotspot-scene-actions { left: 535px; top: 401px; } #briefs #hotspot-orientation { left: 614px; top: 683px; } #briefs #hotspot-asset-browser { left: 846px; top: 12px; } #briefs #hotspot-library { left: 985px; top: 55px; } /* hotspots on second tab */ #briefs #second-hotspots .hotbutton.first { left: 498px; top: 34px; } #briefs #second-hotspots .hotbutton.third { left: 536px; top: 34px; } #briefs #hotspot-xx { left: 506px; top: 55px; } /* hotspots on third tab */ #briefs #third-hotspots .hotbutton.first { left: 498px; top: 34px; } #briefs #third-hotspots .hotbutton.second { left: 460px; top: 34px; } #briefs #hotspot-xxx { left: 506px; top: 55px; } #briefs #features { padding-top: 0px; } #briefs #features ul { padding-left: 60px; } #briefs #briefs-for-mac { margin-left: 78px; } #briefs #briefs-case { margin-right: 82px; } #briefs #cross-promotion #typeset-app { display: block; } } @media (min-width: 1080px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-device-pixel-ratio: 1.5), (min-width: 1080px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-resolution: 2dppx) { #briefs .header h1 { background-size: 194px 194px; } #briefs #laptop { background-image: url("../img/products/briefs/Hero-Large@2x.png"); background-position: center top; background-size: auto 516px; } #briefs #video { background-size: auto 630px; } #briefs #details #popover { background-size: 345px; background-position: 90px 45px; } #briefs #details #native { background-size: 472px auto; } #briefs .screenshot #first { background-size: 1036px 729px; } #briefs .screenshot #second { background-image: url("../img/products/briefs/Briefs_Tab2@2x.png"); background-size: 1036px 729px; } #briefs .screenshot #third { background-image: url("../img/products/briefs/Briefs_Tab3@2x.png"); background-size: 1036px 729px; } } /****************************************/ /************** Changes page ************/ /****************************************/ #changes .footer a, #changes .footer .copyright { color: #000; } #changes .footer .icon { fill: #000; } #changes { background-color: #fff; } #changes section h3 { color: #6a9dc1; } #changes .header { padding-bottom: 6px; background-color: #6a9dc1; background-image: url("../img/products/changes/BG_480.png"); background-size: cover; background-position: center 0; } #changes .header .transparent-btn { margin-bottom: 0; } #changes .header h1 { background-image: url("../img/products/changes/AppIcon.png"); background-size: 100px 100px; } #changes .header .available, #changes #purchase .available { background-image: url("../img/products/apple.svg"); } #changes .download a { color: rgba(255, 255, 255, 0.5); font-size: 15px; letter-spacing: .5px; width: 260px; margin: 0 auto; text-align: center; } #changes .download a:hover { color: #FFFFFF; } #changes #details { padding-top: 20px; } #changes #details p { margin-bottom: 50px; } #changes #details #compare { padding-top: 130px; margin-top: 40px; background: url("../img/products/changes/CompareDirectories-Small.png") no-repeat center top; background-size: 170px 115px; } #changes #details #search { padding-top: 146px; background: url("../img/products/changes/NarrowSearch-Small.png") no-repeat center top; background-size: 170px 128px; } #changes #details #inspect { padding-top: 190px; background: url("../img/products/changes/Inspect-Small.png") no-repeat center top; background-size: 170px 172px; } #changes #details #merge { padding-top: 159px; padding-bottom: 80px; background: url("../img/products/changes/Merge-Small.png") no-repeat center top; background-size: 170px 144px; } #changes #purchase { background-color: #6a9dc1; } #changes #purchase #changes-app { background: url("../img/products/changes/ChangesFooterLogo.png") no-repeat center top; background-size: 150px 150px; } #changes #changes-app h2 { color: #fff; padding-top: 175px; font-size: 46px; font-weight: 300; letter-spacing: 6px; text-transform: uppercase; } #changes #purchase .solid-btn { background-color: #fff; color: #6a9dc1; margin-bottom: 2px; } #changes #purchase .download { margin-bottom: 4px; } #changes #purchase form { margin-bottom: 0px; } #changes #purchase .available { color: rgba(255, 255, 255, 0.5); } #changes .release-notes { color: rgba(255, 255, 255, 0.5); border-bottom: 1px solid rgba(255, 255, 255, 0.5); } #changes .release-notes:hover { color: #fff; border-bottom: 1px solid #fff; } #changes #features { background-color: #6a9dc1; padding-top: 24px; } #changes #features ul { padding-left: 6px; } #changes .feature { background-position: 0 4px; padding-left: 85px; } #changes .feature#compare, #changes .feature#filter { background-image: url("../img/products/changes/FeatureIcon_Compare.png"); background-size: 37px 37px; background-position: 5px 4px; } #changes .feature#integrate { background-image: url("../img/products/changes/FeatureIcon_Integrates.png"); background-size: 44px 46px; } #changes .feature#scm { background-image: url("../img/products/changes/FeatureIcon_FavoriteSCM.png"); background-size: 46px 32px; } #changes .feature#automate { background-image: url("../img/products/changes/FeatureIcon_Automate.png"); background-size: 38px 47px; background-position: 2px 4px; } #changes .feature#scripting { background-image: url("../img/products/changes/FeatureIcon_Scripting.png"); background-size: 34px 47px; background-position: 5px 4px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #changes .header { background-image: url("../img/products/changes/BG_480@2x.png"); } #changes .header h1 { background-image: url("../img/products/changes/AppIcon@2x.png"); background-size: 100px 100px; } #changes .header .available, #changes #purchase .available { background-image: url("../img/products/changes/Icon_Apple@2x.png"); background-size: 16px 19px; } #changes #details #compare { background: url("../img/products/changes/CompareDirectories-Small@2x.png") no-repeat center top; background-size: 170px 115px; } #changes #details #search { background: url("../img/products/changes/NarrowSearch-Small@2x.png") no-repeat center top; background-size: 170px 128px; } #changes #details #inspect { background: url("../img/products/changes/Inspect-Small@2x.png") no-repeat center top; background-size: 170px 172px; } #changes #details #merge { background: url("../img/products/changes/Merge-Small@2x.png") no-repeat center top; background-size: 170px 144px; } #changes #purchase #changes-app { background: url("../img/products/changes/ChangesFooterLogo@2x.png") no-repeat center top; background-size: 150px 150px; } #changes .feature#compare, #changes .feature#filter { background-image: url("../img/products/changes/FeatureIcon_Compare@2x.png"); background-size: 37px 37px; } #changes .feature#integrate { background-image: url("../img/products/changes/FeatureIcon_Integrates@2x.png"); background-size: 44px 46px; } #changes .feature#scm { background-image: url("../img/products/changes/FeatureIcon_FavoriteSCM@2x.png"); background-size: 46px 32px; } #changes .feature#automate { background-image: url("../img/products/changes/FeatureIcon_Automate@2x.png"); background-size: 38px 47px; } #changes .feature#scripting { background-image: url("../img/products/changes/FeatureIcon_Scripting@2x.png"); background-size: 34px 47px; } } @media (min-width: 480px) { /*****************************************/ /********** Changes page > 480 ***********/ /*****************************************/ #changes .header h1 { margin-left: 12px; padding-left: 110px; } #changes .header { background-image: url("../img/products/changes/BG_1024.png"); } #changes #details #compare, #changes #details #search, #changes #details #inspect, #changes #details #merge { padding-top: 0; padding-left: 195px; background-position: left top; } #changes #first-screenshot, #changes #second-screenshot { height: 260px; margin: -10px -30px; background-repeat: no-repeat; background-position: 0 0; background-size: 480px auto; } #changes #first-screenshot { background-image: url("../img/products/changes/Screenshot-01-Small.png"); padding-bottom: 50px; } #changes #second-screenshot { background-image: url("../img/products/changes/Screenshot-02-Small.png"); padding-bottom: 50px; } #changes #features ul { padding-left: 30px; margin-bottom: 0; } #changes .feature p { margin-bottom: 30px; } #changes .feature#integrate { padding-top: 7px; padding-bottom: 1px; } #changes .feature#scm { padding-bottom: 3px; } #changes .feature#scripting { padding-top: 7px; padding-bottom: 1px; } } @media (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-device-pixel-ratio: 1.5), (min-width: 480px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-resolution: 2dppx) { #changes .header { background-image: url("../img/products/changes/BG_1024@2x.png"); } #changes #details #compare, #changes #details #search, #changes #details #inspect, #changes #details #merge { background-position: left top; } #changes #first-screenshot, #changes #second-screenshot { background-position: 0 0; background-size: 480px auto; } #changes #first-screenshot { background-image: url("../img/products/changes/Screenshot-01-Small@2x.png"); } #changes #second-screenshot { background-image: url("../img/products/changes/Screenshot-02-Small@2x.png"); } } @media (min-width: 768px) { /*****************************************/ /********** Changes page > 768 ***********/ /*****************************************/ #changes .header { background-image: url("../img/products/changes/BG_1800.png"); } #changes .header p { line-height: 28px; } #changes .header h1 { background-size: 145px 145px; padding-top: 172px; padding-left: 0; } #changes #details { padding-top: 70px; } #changes #details #investigate { font-size: 35px; line-height: 40px; } #changes #details #compare, #changes #details #inspect, #changes #details #merge { padding-top: 0; padding-left: 310px; background-size: 270px auto; background-position: 0 -10px; height: 260px; } #changes #details #compare { background-image: url("../img/products/changes/CompareDirectories-Large.png"); background-position: 0 10px; } #changes #details #search { background-image: url("../img/products/changes/NarrowSearch-Large.png"); padding-right: 310px; padding-left: 0; padding-top: 30px; background-size: 270px auto; background-position: right -10px; height: 260px; } #changes #details #inspect { background-image: url("../img/products/changes/Inspect-Large.png"); padding-top: 50px; padding-bottom: 20px; } #changes #details #merge { background-image: url("../img/products/changes/Merge-Large.png"); padding-top: 22px; } #changes .arrow { position: absolute; -webkit-transform: scale(0.8, 0.8); } #changes #arrow1 { top: 145px; left: 250px; } #changes #arrow2 { top: 427px; left: 420px; } #changes #arrow3 { top: 950px; left: 300px; } #changes #arrow4 { top: 1228px; left: 420px; } #changes #arrow5 { top: 1754px; left: 243px; } #changes #arrow6 { top: 1990px; left: 471px; } #changes #first-screenshot, #changes #second-screenshot { background-size: 763px auto; height: 410px; width: 763px; padding-bottom: 65px; margin: 0 auto; } #changes #first-screenshot { background-image: url("../img/products/changes/Screenshot-01-Large.png"); } #changes #second-screenshot { background-image: url("../img/products/changes/Screenshot-02-Large.png"); } #changes #purchase { background-color: transparent; position: absolute; top: 2751px; left: 50%; margin-left: -372px; } #changes #purchase .download { line-height: 20px; margin-top: 14px; margin-bottom: 0; } #changes #purchase .download a { line-height: 15px; } #changes #purchase #changes-app { background-size: 200px 200px; } #changes #changes-app h2 { padding-top: 225px; } #changes #features { padding-top: 420px; } #changes #features ul { margin-bottom: 4px; padding-left: 60px; } #changes .feature { padding-left: 75px; } #changes #features .feature p { margin-bottom: 20px; } #changes .feature#compare { padding-bottom: 8px; } #changes .feature#integrate { padding-top: 3px; padding-bottom: 16px; } #changes .feature#automate { padding-top: 4px; padding-bottom: 10px; } #changes .feature#scripting { padding-top: 4px; padding-bottom: 14px; } #changes #cross-promotion #slender-app { display: none; } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #changes .header { background-image: url("../img/products/changes/BG_1800@2x.png"); } #changes .header h1 { background-size: 145px 145px; } #changes #details #merge, #changes #details #inspect { background-size: 270px auto; background-position: 0 -10px; } #changes #details #compare { background-image: url("../img/products/changes/CompareDirectories-Large@2x.png"); background-size: 270px auto; background-position: 0 10px; } #changes #details #search { background-image: url("../img/products/changes/NarrowSearch-Large@2x.png"); background-size: 270px auto; background-position: right -10px; } #changes #details #inspect { background-image: url("../img/products/changes/Inspect-Large@2x.png"); } #changes #details #merge { background-image: url("../img/products/changes/Merge-Large@2x.png"); } #changes #first-screenshot { background-image: url("../img/products/changes/Screenshot-01-Large@2x.png"); background-size: 763px auto; } #changes #second-screenshot { background-image: url("../img/products/changes/Screenshot-02-Large@2x.png"); background-size: 763px auto; } #changes #purchase #changes-app { background-size: 200px 200px; } } @media (min-width: 1080px) { /**************************************************/ /********** Changes page - largest size ***********/ /**************************************************/ #changes #details { padding-bottom: 30px; } #changes #details h3, #changes #details #investigate { font-size: 52px; font-weight: 300; letter-spacing: -1px; } #changes #details #search { padding-top: 80px; padding-right: 440px; background-size: 340px auto; background-position: right 20px; height: 300px; } #changes #details #compare, #changes #details #inspect, #changes #details #merge { padding-left: 440px; background-size: 340px auto; background-position: -7px 3px; height: 300px; } #changes #details #inspect { padding-top: 90px; padding-bottom: 30px; } #changes #details #merge { padding-top: 50px; background-position: -7px -17px; } #changes .arrow { -webkit-transform: scale(1, 1); } #changes #arrow1 { top: 205px; left: 380px; } #changes #arrow2 { top: 543px; left: 612px; } #changes #arrow3 { top: 1251px; left: 400px; } #changes #arrow4 { top: 1590px; left: 580px; } #changes #arrow5 { top: 2307px; left: 440px; } #changes #arrow6 { top: 2580px; left: 600px; } #changes #first-screenshot, #changes #second-screenshot { background-size: 1032px auto; width: 1032px; height: 580px; } #changes #purchase { top: 3376px; margin-left: -516px; } #changes #purchase #changes-app { background-size: 249px 247px; } #changes #changes-app h2 { padding-top: 264px; } #changes #features .feature p { margin-bottom: 36px; } #changes .feature#automate { padding-top: 0; padding-bottom: 8px; } #changes .feature#integrate { padding-top: 0; padding-bottom: 12px; } #changes .feature#scripting { padding-top: 0; padding-bottom: 36px; } #changes #hotspot-single-and-changed { left: 90px; top: 40px; } #changes #hotspot-changed { left: 187px; top: 40px; } #changes #hotspot-single { left: 263px; top: 40px; } #changes #hotspot-unchanged { left: 346px; top: 40px; } #changes #hotspot-everything { left: 445px; top: 40px; } #changes #hotspot-no-merge { left: 663px; top: 40px; } #changes #hotspot-commit { left: 742px; top: 40px; } #changes #hotspot-refresh { left: 812px; top: 40px; } #changes #hotspot-merge1 { left: 526px; top: 208px; } #changes #hotspot-merge2 { left: 526px; top: 228px; } #changes #hotspot-merge3 { left: 526px; top: 283px; } #changes #hotspot-full { left: 54px; top: 40px; } #changes #hotspot-diffs { left: 121px; top: 40px; } #changes #hotspot-prev { left: 206px; top: 40px; } #changes #hotspot-copy-right { left: 342px; top: 40px; } #changes #hotspot-left-scroll { left: 495px; top: 160px; } #changes #hotspot-right-scroll { left: 992px; top: 160px; } #changes #cross-promotion #slender-app { display: block; } } @media (min-width: 1080px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-device-pixel-ratio: 1.5), (min-width: 1080px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-resolution: 2dppx) { #changes #details #search { background-size: 340px auto; background-position: right 20px; } #changes #details #compare, #changes #details #inspect, #changes #details #merge { background-size: 340px auto; background-position: -7px 3px; } #changes #details #merge { background-position: -7px -17px; } #changes #first-screenshot, #changes #second-screenshot { background-size: 1032px auto; } #changes #purchase #changes-app { background-size: 249px 247px; } } /****************************************/ /************** Resolve page ************/ /****************************************/ #resolve .footer a, #resolve .footer .copyright { color: #000; } #resolve .footer .icon { fill: #000; } #resolve section h3 { color: #356aa5; } #resolve .solid-btn { background-color: #356aa5; margin: 0 auto 14px auto; height: 50px; width: 250px; line-height: 54px; } #resolve .transparent-btn { margin-top: 40px; } #resolve .available { width: 276px; } #resolve .header { background-image: url("../img/products/resolve/Header-480.png"); background-size: cover; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #resolve .header { background-image: url("../img/products/resolve/Header-480@2x.png"); } } #resolve .header h1 { background-image: url("../img/products/resolve/Resolve_Icon-140.png"); background-size: 90px 90px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #resolve .header h1 { background-image: url("../img/products/resolve/Resolve_Icon-140@2x.png"); } } #resolve #features { background-color: #fff; padding: 50px 0 20px 0; } #resolve #features h3 { margin-bottom: 40px; } #resolve #features hr { margin-top: 54px; } #resolve .feature { padding-left: 105px; background-size: 64px 64px; background-position: 0 0; } #resolve .feature h5 { color: #000; } #resolve .feature p { color: #4b4c4e; } #resolve .feature#milestones { background-image: url("../img/products/resolve/Features_Milestones.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #resolve .feature#milestones { background-image: url("../img/products/resolve/Features_Milestones@2x.png"); } } #resolve .feature#notifications { background-image: url("../img/products/resolve/Features_Notifications.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #resolve .feature#notifications { background-image: url("../img/products/resolve/Features_Notifications@2x.png"); } } #resolve .feature#accounts { background-image: url("../img/products/resolve/Features_MultipleAccounts.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #resolve .feature#accounts { background-image: url("../img/products/resolve/Features_MultipleAccounts@2x.png"); } } #resolve .feature#attachments { background-image: url("../img/products/resolve/Features_Attachments.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #resolve .feature#attachments { background-image: url("../img/products/resolve/Features_Attachments@2x.png"); } } #resolve .feature#priorities { background-image: url("../img/products/resolve/Features_Priorities.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #resolve .feature#priorities { background-image: url("../img/products/resolve/Features_Priorities@2x.png"); } } #resolve .feature#tickets { background-image: url("../img/products/resolve/Features_CustomTickets.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #resolve .feature#tickets { background-image: url("../img/products/resolve/Features_CustomTickets@2x.png"); } } #resolve #description h3 { color: #000; } #resolve #description p { color: #323132; opacity: .65; line-height: 25px; font-weight: 400; } #resolve .product#purchase { margin-bottom: 20px; } @media (min-width: 480px) { /*****************************************/ /********** resolve page > 480 ***********/ /*****************************************/ #resolve .header { background-image: url("../img/products/resolve/Header-768.png"); } } @media (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-device-pixel-ratio: 1.5), (min-width: 480px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-resolution: 2dppx) { #resolve .header { background-image: url("../img/products/resolve/Header-768@2x.png"); } } @media (min-width: 480px) { #resolve .header h1 { padding-left: 120px; margin-left: 22px; } #resolve #features { padding: 25px 0 40px 0; } #resolve #features h3 { margin-bottom: 50px; } #resolve #features hr { margin-top: 70px; } #resolve .feature { height: 70px; margin-bottom: 30px; } #resolve .feature p { margin-bottom: 30px; } #resolve #description p { font-size: 18px; line-height: 28px; } #resolve .product#purchase { margin-bottom: 90px; } } @media (min-width: 768px) { /*****************************************/ /********** resolve page > 768 ***********/ /*****************************************/ #resolve .header { background-image: url("../img/products/resolve/Header-1800.png"); } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #resolve .header { background-image: url("../img/products/resolve/Header-1800@2x.png"); } } @media (min-width: 768px) { #resolve .header h1 { background-image: url("../img/products/resolve/Resolve_Icon-140.png"); background-size: 120px 120px; padding-top: 172px; padding-left: 0; } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #resolve .header h1 { background-image: url("../img/products/resolve/Resolve_Icon-140@2x.png"); } } @media (min-width: 768px) { #resolve #features { padding-top: 70px; padding-bottom: 45px; } #resolve #features h3 { font-size: 36px; text-align: center; margin-bottom: 70px; } #resolve #features ul { padding-left: 20px; } #resolve #features hr { margin-top: 85px; } #resolve .feature { background-size: 80px 80px; height: 85px; } #resolve .feature h5 { padding-top: 20px; } #resolve .feature p { margin-bottom: 40px; } #resolve #description { margin-bottom: 65px; } #resolve #description .inner-container { width: 490px; margin: 0 auto; } #resolve #description .inner-container #lighthouse { background-image: url("../img/products/resolve/LighthouseIcon-1200.png"); background-repeat: no-repeat; background-size: 114px 114px; background-position: 50% 0; margin-top: 74px; padding-top: 126px; } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #resolve #description .inner-container #lighthouse { background-image: url("../img/products/resolve/LighthouseIcon-1200@2x.png"); } } @media (min-width: 768px) { #resolve #description .inner-container #lighthouse p { font-size: 21px; line-height: 35px; text-align: center; } #resolve #description .inner-container #lighthouse a { color: #323132; text-decoration: underline; } #resolve #purchase { padding-top: 135px; height: 388px; background-image: url("../img/products/resolve/DownloadBG_1200.png"); background-repeat: no-repeat; background-size: cover; background-position: 40% 0; -webkit-box-sizing: border-box; box-sizing: border-box; } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #resolve #purchase { background-image: url("../img/products/resolve/DownloadBG_1200@2x.png"); } } @media (min-width: 768px) { #resolve .solid-btn { margin-bottom: 0; } #resolve .release-notes { color: #fff; border-color: #fff; } #resolve #cross-promotion #briefs-app { display: none; } } @media (min-width: 1080px) { /************************************************/ /********** resolve page - largest size *********/ /************************************************/ #resolve #features { padding-top: 80px; padding-bottom: 0; } #resolve #features h3 { font-size: 52px; margin-bottom: 80px; } #resolve #features ul { padding-left: 70px; margin-bottom: 40px; } #resolve .feature { height: 104px; } #resolve .feature h5 { padding-top: 8px; } #resolve #description { padding-top: 50px; margin-bottom: 40px; } #resolve #description .inner-container { width: 490px; margin-top: 50px; float: left; } #resolve #description .inner-container #lighthouse { height: 120px; background-size: 142px 142px; background-position: 0 0; margin-top: 60px; padding-top: 30px; padding-left: 154px; } #resolve #description .inner-container #lighthouse p { text-align: left; } #resolve #description .screenshot { width: auto; height: 608px; float: right; } #resolve #purchase { text-align: left; padding-top: 170px; height: 483px; background-image: url("../img/products/resolve/DownloadBG_1800.png"); } } @media (min-width: 1080px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-device-pixel-ratio: 1.5), (min-width: 1080px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-resolution: 2dppx) { #resolve #purchase { background-image: url("../img/products/resolve/DownloadBG_1800@2x.png"); } } @media (min-width: 1080px) { #resolve #purchase h1 { font-size: 72px; line-height: 72px; text-align: left; } #resolve #purchase .solid-btn { display: none; } #resolve #purchase span { font-size: 42px; text-align: left; color: #fff; } #resolve #purchase .image-btn { background: url("../img/products/resolve/Download_AppStore.png") no-repeat 0 0; background-size: 158px 50px; float: left; width: 158px; height: 50px; margin: 10px 0 0 0; } #resolve #purchase .image-btn-link:hover { border: none; } #resolve #purchase .release-notes { position: relative; top: 60px; left: -157px; } #resolve #cross-promotion #briefs-app { display: block; } } /****************************************/ /************** Slender page ************/ /****************************************/ #slender .footer a, #slender .footer .copyright { color: #000; } #slender .footer .icon { fill: #000; } #slender .header { color: #000; background-color: #fff; background-image: url("../img/products/slender/Header-480.png"); background-position: 50% 0; background-size: cover; } #slender section h1, #slender section h5 { color: #000; } #slender section h3 { color: #000; font-size: 28px; line-height: 40px; letter-spacing: -1.2px; } #slender section h4 { color: #000; text-align: center; font-size: 21px; line-height: 30px; font-weight: 400; letter-spacing: -.1px; margin-bottom: 10px; } #slender section p { color: #797979; } #slender #apple .icon { fill: #797979; } #slender .available span, #slender .available a { color: #797979; } #slender .available a:hover { color: #5d9dc7; } #slender .available a, #slender .available a:hover { text-decoration: underline; border: none; } #slender .available p { padding-bottom: 10px; padding-top: 12px; } #slender .transparent-btn { color: #5d9dc7; border-color: #5d9dc7; margin-bottom: 6px; } #slender .header p { color: #323232; } #slender .header h1 { background-image: url("../img/products/slender/AppIcon-sm.png"); background-size: 93px 100px; } #slender #analyze { text-align: center; padding-top: 45px; } #slender #analyze p { line-height: 20px; } #slender #analyze img { width: 100%; height: auto; max-width: 100%; margin: 0 auto; } #slender #features { background-color: #fff; padding-top: 60px; padding-bottom: 0; } #slender .feature { padding-top: 104px; background-position: 50% 0; float: left; width: 280px; } #slender .feature p { text-align: center; font-size: 16px; line-height: 30px; letter-spacing: 0; margin-bottom: 35px; } #slender .feature#compression { background-image: url("../img/products/slender/Icon-AutomaticCompression.png"); background-size: 84px 84px; } #slender .feature#duplicates { background-image: url("../img/products/slender/Icon-DuplicateDetection.png"); background-size: 84px 84px; } #slender .feature#retina { background-image: url("../img/products/slender/Icon-RetinaAssetChecking.png"); background-size: 84px 84px; } #slender .feature#file-support { background-image: url("../img/products/slender/Icon-FileSupport.png"); background-size: 84px 84px; } #slender .feature#fuzzy { background-image: url("../img/products/slender/Icon-FuzzyDetection.png"); background-size: 84px 84px; } #slender .feature#asset-reports { background-image: url("../img/products/slender/Icon-AssetReports.png"); background-size: 84px 84px; } #slender #purchase { padding-top: 10px; padding-bottom: 20px; } #slender #purchase .available { padding-bottom: 10px; } #slender #purchase .available span { color: #797979; } #slender #purchase #apple .icon { fill: #797979; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #slender .header { background-image: url("../img/products/slender/Header-480@2x.png"); } #slender .header h1 { background-image: url("../img/products/slender/AppIcon-sm@2x.png"); background-size: 93px 100px; } #slender .feature#compression { background-image: url("../img/products/slender/Icon-AutomaticCompression@2x.png"); background-size: 84px 84px; } #slender .feature#duplicates { background-image: url("../img/products/slender/Icon-DuplicateDetection@2x.png"); background-size: 84px 84px; } #slender .feature#retina { background-image: url("../img/products/slender/Icon-RetinaAssetChecking@2x.png"); background-size: 84px 84px; } #slender .feature#file-support { background-image: url("../img/products/slender/Icon-FileSupport@2x.png"); background-size: 84px 84px; } #slender .feature#fuzzy { background-image: url("../img/products/slender/Icon-FuzzyDetection@2x.png"); background-size: 84px 84px; } #slender .feature#asset-reports { background-image: url("../img/products/slender/Icon-AssetReports@2x.png"); background-size: 84px 84px; } } @media (min-width: 480px) { /*****************************************/ /********** Slender page > 480 ***********/ /*****************************************/ #slender section h3 { font-size: 24px; line-height: 28px; letter-spacing: 0px; } #slender .header { background-image: url("../img/products/slender/Header-768.png"); } #slender .header h1 { padding-left: 105px; } #slender .header p { line-height: 24px; } #slender #analyze { padding-top: 60px; } #slender #analyze .container { width: 350px; } #slender #analyze p { line-height: 24px; } #slender .features { padding-top: 86px; } #slender .feature { width: 420px; padding-top: 99px; } #slender .feature p { margin-bottom: 39px; } #slender .feature .desc { width: 280px; margin-left: auto; margin-right: auto; } #slender #purchase { padding-top: 70px; } #slender #purchase .available { padding-bottom: 76px; } } @media (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-device-pixel-ratio: 1.5), (min-width: 480px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-resolution: 2dppx) { #slender .header { background-image: url("../img/products/slender/Header-768@2x.png"); } } @media (min-width: 768px) { /*****************************************/ /********** Slender page > 768 ***********/ /*****************************************/ #slender section h3 { text-align: center; font-size: 42px; line-height: 52px; margin-bottom: 10px; margin-top: 80px; } #slender section h4 { padding-top: 0; } #slender section h6 { color: #000; text-align: center; font-size: 16px; line-height: 16px; font-weight: 500; letter-spacing: 0; margin-top: 26px; margin-bottom: 0; } #slender .show-on-sm-screen.transparent-btn { display: block !important; margin-bottom: 7px; } #slender .header { background-image: url("../img/products/slender/Header-1080.png"); } #slender .header h1 { padding-left: 0; background-image: url("../img/products/slender/AppIcon-lg.png"); background-size: 125px 137px; } #slender #analyze { padding-top: 75px; } #slender #analyze .container { width: 744px; } #slender #analyze p { margin-bottom: 15px; } #slender #features { padding-top: 126px; } #slender .feature { padding-top: 92px; padding-left: 0; width: 370px; height: 290px; } #slender #savings { text-align: center; } #slender #savings #ticker { padding-top: 20px; } #slender #savings img { width: 506px; height: 75px; } #slender #purchase { padding-top: 90px; } #slender #purchase .available { padding-bottom: 110px; } #slender #purchase .available p { padding-top: 16px; } #slender #cross-promotion #changes-app { display: none; } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #slender .header { background-image: url("../img/products/slender/Header-1080@2x.png"); } #slender .header h1 { background-image: url("../img/products/slender/AppIcon-lg@2x.png"); background-size: 125px 137px; } } @media (min-width: 1080px) { /***************************************************/ /********** Slender page > largest size ***********/ /***************************************************/ #slender section h3 { margin-bottom: 18px; } #slender section h6 { font-size: 18px; letter-spacing: .5px; } #slender .show-on-sm-screen.transparent-btn { display: none !important; } #slender .header { background-image: url("../img/products/slender/Header-1800.png"); } #slender .header h1 { background-size: 145px 157px; } #slender #analyze { padding-top: 62px; } #slender #analyze .container { width: 1032px; padding: 85px 0 40px 0; } #slender #analyze p { font-size: 16px; } #slender #analyze img { max-width: 1275px; } #slender #features { padding-top: 228px; } #slender #features ul { padding-left: 0; } #slender .feature { padding-top: 136px; width: 344px; height: 390px; } #slender .feature#file-support, #slender .feature#fuzzy, #slender .feature#asset-reports { height: 280px; } #slender #savings #ticker { padding-top: 18px; } #slender #savings img { width: 998px; height: 150px; } #slender #purchase p { font-size: 24px; line-height: 24px; letter-spacing: -.1px; color: #000; padding-top: 50px; padding-bottom: 0px; } #slender #purchase .transparent-btn { margin-top: 30px; margin-bottom: 5px; } #slender #purchase .available { padding-bottom: 100px; } #slender #purchase .available p { padding-top: 15px; } #slender #cross-promotion #changes-app { display: block; } } @media (min-width: 1080px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-device-pixel-ratio: 1.5), (min-width: 1080px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-resolution: 2dppx) { #slender .header { background-image: url("../img/products/slender/Header-1800@2x.png"); } } /*********************************************/ /************ TouchPad-NumPad page ***********/ /*********************************************/ #touchpad-numpad .footer a, #touchpad-numpad .footer .copyright { color: #797979; } #touchpad-numpad .footer .icon { fill: #797979; } #touchpad-numpad section h1, #touchpad-numpad section h2, #touchpad-numpad section h3 { font-family: "DINWeb", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 200; text-align: center; letter-spacing: -1px; text-transform: none; } #touchpad-numpad section h1 { color: #4b4c4e; font-size: 40px; line-height: 40px; } #touchpad-numpad section h2 { color: #4b4c4e; font-size: 30px; } #touchpad-numpad section h3 { color: #959799; font-size: 32px; margin-bottom: 30px; } #touchpad-numpad section p { color: #959799; font-size: 16px; font-weight: 500; line-height: 22px; text-align: center; } #touchpad-numpad img { width: 100%; height: auto; } #touchpad-numpad .available { color: #797979; font-size: 14px; line-height: 20px; letter-spacing: .25px; } #touchpad-numpad .available svg#apple { position: relative; top: 3px; } #touchpad-numpad .available svg#apple .icon { fill: #797979; } #touchpad-numpad .available a { color: #797979; border: none; text-decoration: underline; } #touchpad-numpad .available a:hover { color: #000; text-decoration: underline; } #touchpad-numpad .button-wrapper .available { text-align: center; letter-spacing: .5px; } #touchpad-numpad .solid-btn { width: 280px; height: 46px; line-height: 50px; margin: 14px auto; font-size: 20px; letter-spacing: .75px; } #touchpad-numpad #touchpad-btn { background-color: #e95a4d; } #touchpad-numpad #numpad-btn { background-color: #70bcc4; } #touchpad-numpad #header { background-color: #f5f5f5; padding: 100px 0 36px 0; } #touchpad-numpad #header h1 { color: #959799; margin-bottom: 15px; } #touchpad-numpad #header img { margin-top: 10px; max-width: 1015px; } #touchpad-numpad .store-app { margin: 24px auto; padding-left: 82px; background-size: 60px 60px; background-repeat: no-repeat; } #touchpad-numpad .store-app#touchpad-app { background-image: url("../img/products/icon-touchPad.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #touchpad-numpad .store-app#touchpad-app { background-image: url("../img/products/icon-touchPad@2x.png"); } } #touchpad-numpad .store-app#numpad-app { background-image: url("../img/products/icon-numPad.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #touchpad-numpad .store-app#numpad-app { background-image: url("../img/products/icon-numPad@2x.png"); } } #touchpad-numpad .store-app .app-name { color: #4b4c4e; font-family: "DINWeb", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 200; font-size: 30px; line-height: 36px; letter-spacing: -.75px; text-align: left; text-transform: none; margin: 0; } #touchpad-numpad .features { margin-top: 16px; margin-bottom: 20px; } #touchpad-numpad .features .row { margin-bottom: 0; padding-bottom: 30px; } #touchpad-numpad .features .feature { background-repeat: no-repeat; background-position: center top; } #touchpad-numpad .features .feature h6 { font-size: 18px; font-weight: 500; line-height: 22px; text-align: center; margin-bottom: 2px; } #touchpad-numpad .features .feature p { font-size: 14px; line-height: 18px; } #touchpad-numpad #touchpad { padding: 66px 0 354px 0; margin-bottom: 70px; background-image: url("../img/products/touchpad-numpad/iPad_iPhone.png"); background-size: 280px auto; background-position: center bottom; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #touchpad-numpad #touchpad { background-image: url("../img/products/touchpad-numpad/iPad_iPhone@2x.png"); } } #touchpad-numpad #touchpad #touchpad-title { background-image: url("../img/products/icon-touchPad.png"); background-size: 100px 100px; background-position: center top; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #touchpad-numpad #touchpad #touchpad-title { background-image: url("../img/products/icon-touchPad@2x.png"); } } #touchpad-numpad #touchpad h1 { padding-top: 122px; margin-bottom: 0; } #touchpad-numpad #touchpad h6 { color: #e95a4d; } #touchpad-numpad #touchpad .feature#keyboard { background-image: url("../img/products/touchpad-numpad/media_controller.png"); background-size: 52px 28px; padding-top: 40px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #touchpad-numpad #touchpad .feature#keyboard { background-image: url("../img/products/touchpad-numpad/media_controller@2x.png"); } } #touchpad-numpad #touchpad .feature#trackpad { background-image: url("../img/products/touchpad-numpad/trackpad.png"); background-size: 52px 37px; padding-top: 48px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #touchpad-numpad #touchpad .feature#trackpad { background-image: url("../img/products/touchpad-numpad/trackpad@2x.png"); } } #touchpad-numpad #touchpad .feature#split-view { background-image: url("../img/products/touchpad-numpad/splitview.png"); background-size: 52px 35px; padding-top: 48px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #touchpad-numpad #touchpad .feature#split-view { background-image: url("../img/products/touchpad-numpad/splitview@2x.png"); } } #touchpad-numpad #touchpad .feature#phone-pad { background-image: url("../img/products/touchpad-numpad/ipadiphone.png"); background-size: 52px 52px; padding-top: 66px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #touchpad-numpad #touchpad .feature#phone-pad { background-image: url("../img/products/touchpad-numpad/ipadiphone@2x.png"); } } #touchpad-numpad #touchpad .feature#themes { background-image: url("../img/products/touchpad-numpad/themes.png"); background-size: 64px 19px; padding-top: 34px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #touchpad-numpad #touchpad .feature#themes { background-image: url("../img/products/touchpad-numpad/themes@2x.png"); } } #touchpad-numpad #couch-img { width: 100%; height: 376px; background-image: url("../img/products/touchpad-numpad/hand.png"), url("../img/products/touchpad-numpad/couch320.png"); background-repeat: no-repeat, no-repeat; background-position: center 95%, center 0; background-size: 210px auto, 480px auto; } #touchpad-numpad #companion { padding: 20px 0 40px 0; text-align: center; } #touchpad-numpad .programs-img { margin: 20px auto; } #touchpad-numpad #numpad { padding: 108px 0 40px 0; background-image: url("../img/products/touchpad-numpad/musical_notes_pattern_480.png"); background-size: 746px auto; background-position: center 14px; background-repeat: no-repeat; background-color: #f5f5f5; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #touchpad-numpad #numpad { background-image: url("../img/products/touchpad-numpad/musical_notes_pattern_480@2x.png"); } } #touchpad-numpad #numpad #numpad-title { background-image: url("../img/products/icon-numPad.png"); background-size: 100px 100px; background-position: center top; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #touchpad-numpad #numpad #numpad-title { background-image: url("../img/products/icon-numPad@2x.png"); } } #touchpad-numpad #numpad h1 { padding-top: 122px; margin-bottom: 0; } #touchpad-numpad #numpad h6 { color: #70bcc4; } #touchpad-numpad #numpad .feature#notation { background-image: url("../img/products/touchpad-numpad/musicnotes.png"); background-size: 64px 43px; padding-top: 76px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #touchpad-numpad #numpad .feature#notation { background-image: url("../img/products/touchpad-numpad/musicnotes@2x.png"); } } #touchpad-numpad #numpad .feature#math { background-image: url("../img/products/touchpad-numpad/calculation.png"); background-size: 52px 50px; padding-top: 64px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #touchpad-numpad #numpad .feature#math { background-image: url("../img/products/touchpad-numpad/calculation@2x.png"); } } #touchpad-numpad #numpad .feature#split-view { background-image: url("../img/products/touchpad-numpad/splitview.png"); background-size: 52px 35px; padding-top: 48px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #touchpad-numpad #numpad .feature#split-view { background-image: url("../img/products/touchpad-numpad/splitview@2x.png"); } } #touchpad-numpad #numpad .feature#themes { background-image: url("../img/products/touchpad-numpad/themes.png"); background-size: 64px 19px; padding-top: 34px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #touchpad-numpad #numpad .feature#themes { background-image: url("../img/products/touchpad-numpad/themes@2x.png"); } } #touchpad-numpad #musician { background-color: #000; background-image: url("../img/products/touchpad-numpad/musician320.png"); background-size: 480px auto; background-position: center top; background-repeat: no-repeat; padding: 340px 0 60px 0; margin-bottom: 70px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #touchpad-numpad #musician { background-image: url("../img/products/touchpad-numpad/musician320@2x.png"); } } #touchpad-numpad #musician h1 { color: #b1b1b1; } #touchpad-numpad #musician .app-wrapper { width: 224px; } #touchpad-numpad #musician .iap { background-repeat: no-repeat; background-size: 68px 68px; background-position: 0 50%; padding-left: 90px; } #touchpad-numpad #musician .iap h1 { margin-bottom: 2px; text-align: left; } #touchpad-numpad #musician .iap h3 { color: #fff; font-size: 24px; line-height: 28px; margin-bottom: 0; text-align: left; } #touchpad-numpad #musician .iap p { color: #a6a6a6; font-size: 13px; line-height: 18px; text-align: left; } #touchpad-numpad #musician .iap#sibelius { margin: 36px auto; background-image: url("../img/products/touchpad-numpad/icon_sibelius.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #touchpad-numpad #musician .iap#sibelius { background-image: url("../img/products/touchpad-numpad/icon_sibelius@2x.png"); } } #touchpad-numpad #musician .iap#sibelius h1 { color: #b31ec1; } #touchpad-numpad #musician .iap#finale { margin: 26px auto 18px auto; background-image: url("../img/products/touchpad-numpad/icon_finale.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #touchpad-numpad #musician .iap#finale { background-image: url("../img/products/touchpad-numpad/icon_finale@2x.png"); } } #touchpad-numpad #musician .iap#finale h1 { color: #1e7ea1; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #touchpad-numpad #couch-img { background-image: url("../img/products/touchpad-numpad/hand@2x.png"), url("../img/products/touchpad-numpad/couch320@2x.png"); } } @media (min-width: 480px) { /**********************************************/ /********** TouchPad-NumPad page > 480 *********/ /**********************************************/ #touchpad-numpad .app-wrapper { width: 280px; } #touchpad-numpad #companion { padding-top: 12px; } #touchpad-numpad #couch-img { height: 530px; background-image: url("../img/products/touchpad-numpad/hand.png"), url("../img/products/touchpad-numpad/couch480.png"); background-size: 290px auto, 768px auto; } #touchpad-numpad #ipad-img { width: 280px; } #touchpad-numpad #musician { background-image: url("../img/products/touchpad-numpad/musician480.png"); background-size: 768px auto; padding-top: 450px; } } @media (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-device-pixel-ratio: 1.5), (min-width: 480px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-resolution: 2dppx) { #touchpad-numpad #musician { background-image: url("../img/products/touchpad-numpad/musician480@2x.png"); } } @media (min-width: 480px) { #touchpad-numpad .programs-img { width: 325px; } } @media (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-device-pixel-ratio: 1.5), (min-width: 480px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-resolution: 2dppx) { #touchpad-numpad #couch-img { background-image: url("../img/products/touchpad-numpad/hand@2x.png"), url("../img/products/touchpad-numpad/couch480@2x.png"); } } @media (min-width: 768px) { /**********************************************/ /********** TouchPad-NumPad page > 768 *********/ /**********************************************/ #touchpad-numpad { padding-bottom: 124px; } #touchpad-numpad section h1 { font-size: 54px; line-height: 60px; } #touchpad-numpad section p { line-height: 24px; } #touchpad-numpad #header { padding-top: 120px; } #touchpad-numpad #header h1 { font-size: 70px; } #touchpad-numpad .app-wrapper { width: 630px; } #touchpad-numpad .store-app { display: inline-block; padding-left: 90px; background-size: 72px 72px; margin: 40px auto 32px auto; } #touchpad-numpad .store-app .app-name { font-size: 44px; line-height: 44px; } #touchpad-numpad .store-app#numpad-app { margin-left: 48px; } #touchpad-numpad .store-app .available { line-height: 30px; } #touchpad-numpad .solid-btn { font-size: 24px; width: 345px; height: 65px; line-height: 68px; margin: 30px auto 8px auto; } #touchpad-numpad #companion { padding-bottom: 120px; } #touchpad-numpad #companion h1 { margin-top: 0; } #touchpad-numpad #companion p { margin-bottom: 2px; } #touchpad-numpad #couch-img { height: 712px; background-image: url("../img/products/touchpad-numpad/hand.png"), url("../img/products/touchpad-numpad/couch768.png"); background-size: 370px auto, 1200px auto; } #touchpad-numpad #ipad-img { width: 500px; } #touchpad-numpad #musician { background-image: url("../img/products/touchpad-numpad/musician768.png"); background-size: 1200px auto; padding-top: 670px; } #touchpad-numpad #musician h1 { margin: 44px auto 10px auto; } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #touchpad-numpad #musician { background-image: url("../img/products/touchpad-numpad/musician768@2x.png"); } } @media (min-width: 768px) { #touchpad-numpad #musician .app-wrapper { width: 620px; } #touchpad-numpad #musician .iap { display: inline-block; } #touchpad-numpad #musician .iap h1 { margin-top: 0; margin-bottom: 0; font-size: 50px; } #touchpad-numpad #musician .iap#finale { margin-left: 100px; } #touchpad-numpad #numpad { padding: 170px 0 100px 0; background-image: url("../img/products/touchpad-numpad/musical_notes_pattern_1200.png"); background-size: 1080px auto; background-position: center 40px; } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #touchpad-numpad #numpad { background-image: url("../img/products/touchpad-numpad/musical_notes_pattern_1200@2x.png"); } } @media (min-width: 768px) { #touchpad-numpad #numpad #numpad-wrapper { background-image: url("../img/products/touchpad-numpad/Slanted_iPad_iPhone.png"); background-size: 186px auto; background-position: 60px 364px; background-repeat: no-repeat; } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #touchpad-numpad #numpad #numpad-wrapper { background-image: url("../img/products/touchpad-numpad/Slanted_iPad_iPhone@2x.png"); } } @media (min-width: 768px) { #touchpad-numpad #numpad h1 { margin-top: 0; } #touchpad-numpad #numpad .features { width: 390px; padding-left: 300px; } #touchpad-numpad #numpad .feature { background-position: 6px center; } #touchpad-numpad #numpad .feature h6, #touchpad-numpad #numpad .feature p { text-align: left; } #touchpad-numpad #numpad .feature#notation { padding: 20px 0 0 86px; } #touchpad-numpad #numpad .feature#math { padding: 0 0 0 86px; } #touchpad-numpad #numpad .feature#split-view { padding: 0 0 0 86px; } #touchpad-numpad #numpad .feature#themes { background-position: left center; padding: 0 0 0 86px; } #touchpad-numpad #numpad-btn { margin-top: 6px; } #touchpad-numpad .programs-img { width: 609px; margin: 24px auto; } #touchpad-numpad #touchpad { padding-bottom: 0; background-size: 300px auto; background-position: left 350px; } #touchpad-numpad #touchpad .features { width: 406px; padding-left: 338px; } #touchpad-numpad #touchpad .feature { background-position: 6px center; } #touchpad-numpad #touchpad .feature h6, #touchpad-numpad #touchpad .feature p { text-align: left; } #touchpad-numpad #touchpad .feature#keyboard { padding: 0 0 0 86px; } #touchpad-numpad #touchpad .feature#trackpad { padding: 0 0 0 86px; } #touchpad-numpad #touchpad .feature#split-view { padding: 0 0 0 86px; } #touchpad-numpad #touchpad .feature#phone-pad { padding: 0 0 0 86px; } #touchpad-numpad #touchpad .feature#themes { background-position: 0 center; padding: 0 0 0 86px; } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #touchpad-numpad #couch-img { background-image: url("../img/products/touchpad-numpad/hand@2x.png"), url("../img/products/touchpad-numpad/couch768@2x.png"); } } @media (min-width: 1080px) { /*******************************************************/ /********** TouchPad-NumPad page - largest size *********/ /*******************************************************/ #touchpad-numpad section h1 { font-size: 44px; line-height: 50px; } #touchpad-numpad section h3 { font-size: 40px; text-align: left; } #touchpad-numpad section p { font-size: 18px; line-height: 28px; } #touchpad-numpad .app-wrapper { width: 848px; } #touchpad-numpad #header { padding-bottom: 70px; } #touchpad-numpad #header h1 { font-size: 90px; line-height: 90px; } #touchpad-numpad #header p { margin: 0 auto 10px auto; width: 910px; } #touchpad-numpad #companion { width: 920px; } #touchpad-numpad #companion h1 { font-size: 60px; line-height: 64px; } #touchpad-numpad #couch-img { height: 1048px; background-image: url("../img/products/touchpad-numpad/hand.png"), url("../img/products/touchpad-numpad/couch1200.png"); background-size: 560px auto, 1800px auto; } #touchpad-numpad #ipad-img { width: 100%; } #touchpad-numpad .store-app#numpad-app { margin-left: 224px; } #touchpad-numpad #musician { background-image: url("../img/products/touchpad-numpad/musician1200.png"); background-size: 1800px auto; padding: 970px 0 120px 0; } #touchpad-numpad #musician h1 { font-size: 60px; line-height: 64px; } } @media (min-width: 1080px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-device-pixel-ratio: 1.5), (min-width: 1080px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-resolution: 2dppx) { #touchpad-numpad #musician { background-image: url("../img/products/touchpad-numpad/musician1200@2x.png"); } } @media (min-width: 1080px) { #touchpad-numpad #numpad { background-image: url("../img/products/touchpad-numpad/musical_notes_pattern_1200.png"); background-size: 1748px auto; background-position: center 15px; padding-top: 146px; } } @media (min-width: 1080px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-device-pixel-ratio: 1.5), (min-width: 1080px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-resolution: 2dppx) { #touchpad-numpad #numpad { background-image: url("../img/products/touchpad-numpad/musical_notes_pattern_1200@2x.png"); } } @media (min-width: 1080px) { #touchpad-numpad #numpad #numpad-button { margin-top: 36px; } #touchpad-numpad #numpad #numpad-title { padding: 160px 0 100px 0; background-size: 86px 86px; background-position: 498px 170px; width: 484px; padding-left: 494px; padding-bottom: 0; } #touchpad-numpad #numpad #numpad-title p { text-align: left; } #touchpad-numpad #numpad #numpad-wrapper { background-size: 375px auto; background-position: 80px 110px; } #touchpad-numpad #numpad h1 { padding-top: 0; padding-left: 116px; margin-bottom: 8px; font-size: 60px; line-height: 60px; text-align: left; } #touchpad-numpad #numpad h3 { padding-left: 116px; margin-bottom: 38px; } #touchpad-numpad #numpad img { width: 336px; float: left; } #touchpad-numpad #numpad .features { padding-left: 500px; width: 434px; } #touchpad-numpad #numpad .features .row { margin-bottom: 14px; } #touchpad-numpad #touchpad { padding-top: 110px; background-size: 437px; background-position: 0 140px; } #touchpad-numpad #touchpad #touchpad-title { background-size: 86px 86px; background-position: 528px top; width: 484px; padding-left: 528px; } #touchpad-numpad #touchpad h1 { padding-top: 0; padding-left: 116px; margin-bottom: 8px; font-size: 60px; line-height: 60px; text-align: left; } #touchpad-numpad #touchpad h3 { padding-left: 116px; } #touchpad-numpad #touchpad .features { padding-left: 436px; } } @media (min-width: 1080px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-device-pixel-ratio: 1.5), (min-width: 1080px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-resolution: 2dppx) { #touchpad-numpad #couch-img { background-image: url("../img/products/touchpad-numpad/hand@2x.png"), url("../img/products/touchpad-numpad/couch1200@2x.png"); } } @media (min-width: 1800px) { #touchpad-numpad #couch-img { height: 1440px; background-image: url("../img/products/touchpad-numpad/hand.png"), url("../img/products/touchpad-numpad/couch1800.png"); background-size: 688px auto, 2560px auto; } #touchpad-numpad #musician { background-image: url("../img/products/touchpad-numpad/musician1800.png"); background-size: 2560px auto; padding-top: 1340px; } } @media (min-width: 1800px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1800px) and (min-device-pixel-ratio: 1.5), (min-width: 1800px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 1800px) and (min-resolution: 2dppx) { #touchpad-numpad #musician { background-image: url("../img/products/touchpad-numpad/musician1800@2x.png"); } } @media (min-width: 1800px) { #touchpad-numpad #numpad { background-image: url("../img/products/touchpad-numpad/musical_notes_pattern_1800.png"); background-size: 2487px auto; } } @media (min-width: 1800px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1800px) and (min-device-pixel-ratio: 1.5), (min-width: 1800px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 1800px) and (min-resolution: 2dppx) { #touchpad-numpad #numpad { background-image: url("../img/products/touchpad-numpad/musical_notes_pattern_1800@2x.png"); } } @media (min-width: 1800px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1800px) and (min-device-pixel-ratio: 1.5), (min-width: 1800px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 1800px) and (min-resolution: 2dppx) { #touchpad-numpad #couch-img { background-image: url("../img/products/touchpad-numpad/hand@2x.png"), url("../img/products/touchpad-numpad/couch1800@2x.png"); } } /****************************************/ /************** Typeset page ************/ /****************************************/ #typeset .footer a, #typeset .footer .copyright { color: #000; } #typeset .footer .icon { fill: #000; } #typeset section h3 { color: #b11f24; } #typeset .solid-btn { background-color: #b11f24; margin: 14px auto; } #typeset .available { width: 276px; } #typeset .header { background-image: url("../img/products/typeset/BG_480.png"); background-size: cover; } #typeset .header h1 { background-image: url("../img/products/typeset/AppIcon_100.png"); background-size: 100px 100px; } #typeset #devices { background: #fff; color: #a8a8a8; padding-top: 40px; } #typeset #devices img { width: 264px; height: 560px; } #typeset #devices p { color: #a8a8a8; line-height: 24px; margin-bottom: 96px; } #typeset #devices h3 { margin-top: 5px; } #typeset #features { background-color: #b11f24; } #typeset .feature { padding-left: 105px; } #typeset .feature#system-fonts { background-image: url("../img/products/typeset/FeatureIcon_SystemFonts.png"); background-size: 84px 34px; } #typeset .feature#metrics { background-image: url("../img/products/typeset/FeatureIcon_AdjustableMetrics.png"); background-size: 57px 48px; background-position: 12px 3px; } #typeset .feature#layouts { background-image: url("../img/products/typeset/FeatureIcon_MultipleLayouts.png"); background-size: 76px 56px; background-position: 4px 4px; } #typeset .feature#export { background-image: url("../img/products/typeset/FeatureIcon_ExportShare.png"); background-size: 79px 50px; background-position: 2px 3px; } #typeset #purchase { background-color: #edede7; } #typeset #typeset-app { background: url("../img/products/typeset/AppIcon_100.png") no-repeat 50% 0; margin-top: 24px; } #typeset #typeset-app h2 { padding-top: 140px; font-size: 46px; font-weight: 300; letter-spacing: 6px; text-transform: uppercase; } #typeset .release-notes:hover { color: #323132; border-color: #323132; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #typeset .header { background-image: url("../img/products/typeset/BG_480@2x.png"); background-size: cover; } #typeset .header h1 { background-image: url("../img/products/typeset/AppIcon_100@2x.png"); background-size: 100px 100px; } #typeset .feature#system-fonts { background-image: url("../img/products/typeset/FeatureIcon_SystemFonts@2x.png"); background-size: 84px 34px; } #typeset .feature#metrics { background-image: url("../img/products/typeset/FeatureIcon_AdjustableMetrics@2x.png"); background-size: 57px 48px; } #typeset .feature#layouts { background-image: url("../img/products/typeset/FeatureIcon_MultipleLayouts@2x.png"); background-size: 76px 56px; } #typeset .feature#export { background-image: url("../img/products/typeset/FeatureIcon_ExportShare@2x.png"); background-size: 79px 50px; } #typeset #typeset-app { background: url("../img/products/typeset/AppIcon_100@2x.png") no-repeat 50% 0; background-size: 100px 100px; } } @media (min-width: 480px) { /*****************************************/ /********** Typeset page > 480 ***********/ /*****************************************/ #typeset .header h1 { padding-left: 120px; margin-left: 22px; } #typeset #devices p { margin-bottom: 0; } #typeset #devices .device-container { height: 336px; margin-bottom: 70px; } #typeset #devices .screenshot { width: auto; height: 336px; } #typeset #devices .screenshot-desc { width: 240px; padding: 25px 0 0 20px; float: left; } #typeset #device1 .screenshot, #typeset #device3 .screenshot { float: left; } #typeset #device2 .screenshot { float: right; } #typeset #device2 .screenshot-desc { padding: 15px 20px 0 0; } #typeset #features ul { padding-left: 6px; } #typeset .feature p { margin-bottom: 30px; } } @media (min-width: 768px) { /*****************************************/ /********** Typeset page > 768 ***********/ /*****************************************/ #typeset .header { background-image: url("../img/products/typeset/BG_1800.png"); } #typeset .header h1 { background-image: url("../img/products/typeset/AppIcon_120.png"); background-size: 120px 120px; padding-top: 172px; padding-left: 0; } #typeset #devices { padding-top: 100px; padding-bottom: 40px; } #typeset #devices .device-container { height: 560px; margin-bottom: 40px; } #typeset #devices video { width: 220px; height: 390px; position: absolute; z-index: 100; } #typeset #device1 video { top: 78px; left: 21px; } #typeset #device2 video { top: 677px; left: 503px; } #typeset #device3 video { top: 1276px; left: 23px; } #typeset #devices .screenshot { width: auto; height: 556px; } #typeset #devices .screenshot-desc { width: 440px; padding: 170px 0 0 40px; } #typeset #device2 .screenshot-desc { padding-left: 0; padding-right: 40px; } #typeset #devices p { line-height: 28px; } #typeset #features { padding-top: 100px; padding-bottom: 45px; } #typeset #features ul { padding-left: 20px; } #typeset #features .feature p { margin-bottom: 40px; } #typeset #purchase { background-image: url("../img/products/typeset/DL-BG_1024.png"); background-position: center top; background-repeat: no-repeat; height: 424px; } #typeset #purchase #typeset-app { margin-top: 0; margin-left: 360px; } #typeset #purchase #typeset-app h2 { padding-top: 130px; } #typeset #cross-promotion #briefs-app { display: none; } #typeset .release-notes { position: relative; top: -10px; } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #typeset .header { background-image: url("../img/products/typeset/BG_1800@2x.png"); background-size: cover; } #typeset .header h1 { background-image: url("../img/products/typeset/AppIcon_120@2x.png"); background-size: 120px 120px; } #typeset #purchase { background-image: url("../img/products/typeset/DL-BG_1024@2x.png"); background-position: center top; } } @media (min-width: 1080px) { /************************************************/ /********** Typeset page - largest size *********/ /************************************************/ #typeset #devices { padding-top: 140px; } #typeset #devices .device-container { height: 850px; float: left; } #typeset #device1, #typeset #device2 { margin-right: 120px; } #typeset #devices .screenshot { position: relative; z-index: 20; float: none; } #typeset #devices video { top: 77px; } #typeset #device1 video { left: 21px; } #typeset #device2 video { left: 407px; } #typeset #device3 video { left: 791px; } #typeset #devices .screenshot-desc { position: relative; z-index: 10; width: 260px; padding: 0 0 0 4px; float: none; } #typeset #devices h3 { margin-top: 15px; font-size: 32px; line-height: 38px; font-weight: 300; } #typeset #devices p { font-size: 16px; line-height: 24px; } #typeset #features { padding-top: 80px; padding-bottom: 0; } #typeset #features ul { padding-left: 70px; } #typeset #features .feature p { margin-bottom: 60px; } #typeset #purchase { background-image: url("../img/products/typeset/DL-BG_1800.png"); height: 380px; } #typeset #purchase #typeset-app { margin-left: 600px; } #typeset #cross-promotion #briefs-app { display: block; } } @media (min-width: 1080px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-device-pixel-ratio: 1.5), (min-width: 1080px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-resolution: 2dppx) { #typeset #purchase { background-image: url("../img/products/typeset/DL-BG_1800@2x.png"); background-size: 1600px 480px; } } /****************************************/ /************ games page ***********/ /****************************************/ #games .footer a, #games .footer .copyright { color: #fff; } #games .footer .icon { fill: #fff; } #games { background-color: #000; } #games section h1 { color: #fff; font-family: "DINWeb", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 32px; line-height: 40px; font-weight: 300; letter-spacing: .5px; text-align: left; text-transform: none; margin-bottom: 5px; } #games section h2 { color: #5c5a67; font-family: "DINWeb", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 32px; line-height: 40px; letter-spacing: 0; font-weight: 300; text-align: left; text-transform: none; margin-top: 0; margin-bottom: 15px; } #games section h3 { color: #fff; font-family: "DINWeb", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 28px; line-height: 32px; font-weight: 300; letter-spacing: .5px; text-align: center; text-transform: none; padding-top: 20px; } #games h4 { color: #fff; font-size: 16px; line-height: 24px; letter-spacing: .5px; text-transform: uppercase; } #games section p { color: #5c5a67; font-size: 14px; line-height: 20px; font-weight: 500; margin-bottom: 28px; } #games .solid-btn { background-color: #5c5a67; font-size: 16px; letter-spacing: .5px; text-transform: uppercase; margin: 30px auto; width: 200px; } #games .transparent-btn { border: 1px solid #5c5a67; font-size: 18px; line-height: 64px; letter-spacing: .5px; text-transform: uppercase; margin: 20px auto 15px auto; height: 60px; } #games .video-play-button { margin-top: 80px; } .video-play-button:hover { border: 0; } #games #republicsniper { background-image: url("../img/products/games/Header-480.png"); background-repeat: no-repeat; background-position: 50% 0; background-size: 480px 291px; padding-top: 70px; margin-bottom: 70px; -webkit-box-sizing: border-box; box-sizing: border-box; } #games #republicsniper .container { text-align: center; } #games #republicsniper .modal-dialog .modal-content { height: 116px; } #games #republicsniper #signup { padding-top: 40px; } #games #republicsniper #signup .submit-form { position: relative; width: 100%; height: 60px; border-radius: 3px; background: rgba(255, 255, 255, 0.3); } #games #republicsniper #signup .submit-form input.email { background: 0; border: 0; font-family: "DINWeb"; font-size: 14pt; color: #d9d8d8; padding: 0; padding-left: 18px; height: 60px; width: 100%; } #games #republicsniper #signup .submit-form input.button { background: url("../img/repubsniper/submit-arrow.png") no-repeat right; border: 0; width: 26px; height: 23px; position: absolute; right: 18px; top: 18px; text-indent: -9999px; } #games #republicsniper #press-inquires { margin-top: 19px; font: 12px/16px Verdana, sans-serif; color: #b2b2b2; } #games #republicsniper #press-inquires a, #games #republicsniper #press-inquires a:visited { color: #b2b2b2; border-bottom: 1px solid #b2b2b2; } #games #republicsniper #press-inquires a:hover, #games #republicsniper #press-inquires a:visited:hover { color: #f2f2f2; } #games #available-games { padding-top: 80px; } #games #trivium { padding-top: 10px; padding-bottom: 20px; } #games #trivium #button-container { text-align: center; } #games #trivium #button-container .release-notes { color: #5c5a67; border-bottom: 1px solid #5c5a67; font-size: 14px; } #games #trivium h1 { padding-top: 138px; background-image: url("../img/products/games/Icon-Trivium-100.png"); background-repeat: no-repeat; background-size: 100px 100px; } #games #trivium .trivium-screenshot { max-width: 100%; height: 291px; background-image: url("../img/products/games/Trivium-ScreenShot-347.png"); background-repeat: no-repeat; background-position: 50% 0; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #games #republicsniper { background-image: url("../img/products/games/Header-480@2x.png"); background-size: 480px 235px; } } @media (min-width: 480px) { /*****************************************/ /********** games page > 480 *********/ /*****************************************/ #games section h3 { font-size: 32px; line-height: 42px; padding-top: 0; } #games h4 { font-size: 18px; margin-bottom: 46px; } #games section p { margin: 34px 0 70px 0; } #games .solid-btn { font-size: 18px; width: 230px; height: 60px; line-height: 64px; margin: 90px auto 80px auto; } #games .transparent-btn { margin-top: 50px; } #games #republicsniper { height: 575px; background-image: url("../img/products/games/Header-768.png"); background-size: 768px 575px; padding-top: 90px; margin-bottom: 56px; } #games #republicsniper .modal-dialog .modal-content { height: 175px; } #games #trivium h1 { padding-top: 0; padding-left: 138px; height: 100px; } #games #trivium h2 { padding-left: 138px; margin-top: -58px; } #games #trivium .trivium-screenshot { height: 338px; background-image: url("../img/products/games/Trivium-ScreenShot-440.png"); } } @media (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-device-pixel-ratio: 1.5), (min-width: 480px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-resolution: 2dppx) { #games #header { background: #fffaf2 url("../img/products/games/Header-768@2x.png") no-repeat 80% 100%; background-size: 768px 235px; } } @media (min-width: 768px) { /*****************************************/ /********** games page > 768 *********/ /*****************************************/ #games section h1 { font-size: 52px; line-height: 70px; margin-top: 0; } #games section h2 { font-size: 15px; line-height: 24px; } #games section h3 { font-size: 42px; line-height: 60px; } #games section p { font-size: 18px; line-height: 24px; letter-spacing: .7px; } #games .solid-btn { margin: 70px auto 70px auto; } #games .transparent-btn { margin: 88px auto 15px auto; font-size: 24px; line-height: 74px; letter-spacing: .7px; height: 70px; width: 280px; } #games #republicsniper { height: 555px; background-image: url("../img/products/games/Header-1080.png"); background-size: 1080px 555px; padding-top: 135px; margin-bottom: 120px; } #games #republicsniper #signup { margin: 0 auto; width: 336px; } #games #republicsniper .modal-dialog .modal-content { height: 303px; } #games #available-games { text-align: center; } #games #trivium { padding-top: 0; padding-bottom: 60px; } #games #trivium h1 { background-image: url("../img/products/games/Icon-Trivium-140.png"); background-size: 140px 140px; padding-left: 160px; height: 140px; } #games #trivium h2 { font-weight: 500; padding-left: 160px; margin-top: -80px; width: 170px; } #games #trivium p { position: absolute; left: 374px; top: -25px; font-weight: 400; width: 345px; } #games #trivium .trivium-screenshot { height: 530px; background-image: url("../img/products/games/Trivium-ScreenShot-688.png"); margin-top: 220px; } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #games #header { background: #fffaf2 url("../img/products/games/header_bg_1200@2x.png") no-repeat 60% 100%; background-size: 1800px 489px; } } @media (min-width: 1080px) { /**************************************************/ /********** games page - largest size *********/ /**************************************************/ #games section h1 { font-size: 60px; } #games section h2 { font-size: 18px; } #games section h3 { font-size: 56px; } #games section p { font-size: 18px; line-height: 24px; letter-spacing: .7px; } #games .solid-btn { margin: 100px auto 90px auto; } #games .transparent-btn { margin: 60px 0 130px 0; width: 390px; } #games #republicsniper { height: 952px; background-image: url("../img/products/games/Header-1800.png"); background-size: 1800px 952px; padding: 260px 100px 0 100px; margin-bottom: 22px; } #games #republicsniper .container { width: 800px; } #games #republicsniper .modal-dialog .modal-content { height: 388px; } #games #available-games { position: absolute; left: 120px; top: 1000px; text-align: left; padding-top: 0; } #games #trivium { padding-top: 6px; height: 820px; } #games #trivium #trivium-desc { position: absolute; left: 120px; top: 1060px; } #games #trivium h1 { padding-top: 193px; padding-left: 0; height: auto; } #games #trivium h2 { padding-left: 0; margin-top: 0; width: 400px; letter-spacing: .5px; } #games #trivium p { position: static; width: 420px; letter-spacing: .5px; margin: 32px 0 53px 0; } #games #trivium #button-container { position: absolute; top: 1554px; left: 120px; } #games #trivium #button-container .release-notes { position: relative; top: -113px; left: -336px; } #games #trivium .trivium-screenshot { background-image: url("../img/products/games/Trivium-ScreenShot-838.png"); background-position: 0 0; position: absolute; top: 1100px; left: 620px; right: 0; height: 634px; margin-top: 0; } } /*******************************/ /********** Blog page **********/ /*******************************/ #blog { background: #fff; padding-top: 70px; } #blog .header-img { width: 181px; height: 40px; margin: 0 auto; background: url("../img/blog/SyndicateLogo-Article-iPhone.png") no-repeat 0 0; background-size: 181px 40px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #blog .header-img { background: url("../img/blog/SyndicateLogo-Article-iPhone@2x.png") no-repeat 0 0; background-size: 181px 40px; } } #subscribe { margin-top: 32px; } #subscribe #btn-container { width: 75px; margin: -45px auto 0 auto; padding: 0 6px; background-color: white; } #subscribe #btn-container #subscribe-btn { text-transform: uppercase; color: #F84E3D; background-color: white; border: 1px solid #dededd; border-radius: 16px; padding: 4px 10px 2px; font-size: 9px; letter-spacing: .5px; } #blog #content { padding-bottom: 40px; } #blog #content h1 { font-family: "DINWeb-Cond", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; font-size: 32px; line-height: 36px; letter-spacing: -.4px; color: #323132; text-transform: none; margin: 0; } #blog #content h2 { font-family: "DINWeb", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 12px; line-height: 19px; letter-spacing: .5px; color: #b3b4b4; text-transform: none; margin: 0 0 20px 0; } #blog #content ul { margin-bottom: 60px; } #blog #content li { margin-bottom: 34px; } #blog #content .date { padding-top: 24px; text-transform: uppercase; } #blog #content .author { text-transform: uppercase; } /*====================================================================*/ /*=================== portrait tablet size and up ==================*/ /*====================================================================*/ @media (min-width: 768px) { #blog { padding-top: 134px; } #blog .header-img { width: 744px; height: 162px; background: url("../img/blog/SyndicateLogo-Landing-Desktop.png") no-repeat 0 0; background-size: 744px 162px; } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #blog .header-img { background: url("../img/blog/SyndicateLogo-Landing-Desktop@2x.png") no-repeat 0 0; background-size: 744px 162px; } } @media (min-width: 768px) { #subscribe { margin-top: 60px; } #subscribe #btn-container { width: 147px; margin-top: -56px; padding: 0 6px; } #subscribe #btn-container #subscribe-btn { border-radius: 20px; padding: 8px 20px 4px; font-size: 18px; letter-spacing: 1px; } #blog #content { padding-top: 25px; padding-bottom: 100px; } #blog #content h1 { font-size: 42px; line-height: 54px; } #blog #content h2 { font-size: 18px; line-height: 21px; margin: 0 0 30px 0; } #blog #content .date { padding-top: 60px; padding-bottom: 36px; margin-bottom: 0; } } /*====================================================================*/ /*================= landscape tablet size and up ===================*/ /*====================================================================*/ @media (min-width: 1080px) { #blog .header-img { width: 1000px; height: 225px; background-size: 1000px 225px; } } /*****************************************/ /********** The Syndicate Posts **********/ /*****************************************/ html { font-family: 'sm-screen'; } body:after { display: none; } @media (min-width: 768px) { html { font-family: 'lg-screen'; } body:after { content: 'lg-screen'; } } #syndicate { background: #fff; padding-top: 70px; padding-bottom: 180px; } #syndicate .container { width: 85%; } #syndicate hr, #syndicate section h1, #syndicate section h2, #syndicate section h3, #syndicate section p, #syndicate section ul, #syndicate section ol { width: 100%; margin: 0 auto; } #syndicate .content hr, #syndicate section.content h1, #syndicate section.content h2, #syndicate section.content h3, #syndicate section.content p { width: 85%; } #syndicate section.content ul, #syndicate section.content ol { width: -moz-calc(85% - 40px); width: -webkit-calc(85% - 40px); width: calc(85% - 40px); } #syndicate pre.highlight { background-color: #fbfbfb; line-height: 22px; padding: 0 20px; margin: 0 0 30px 0; overflow-x: auto; } #syndicate pre.highlight code { font-size: 14px; letter-spacing: .12px; } #syndicate code { font-family: 'Inconsolata', monospace; font-weight: 400; font-size: 17px; letter-spacing: -.5px; color: #959595; } #syndicate .footer { height: auto; } #syndicate .footer .container { width: 100%; margin: 0; padding: 0; } #syndicate sup { vertical-align: super; font-size: 75%; line-height: 0; } #syndicate hr.full-width { width: 100%; } #syndicate hr:not(.no-margin) { margin-bottom: 30px; } #syndicate section h1 { font-family: "DINWeb-Cond", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; font-size: 36px; line-height: 37px; letter-spacing: 0; color: #323132; text-transform: uppercase; } #syndicate section h2, #syndicate section h3 { font-family: "DINWeb", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; letter-spacing: 0; color: #959595; text-transform: none; padding-bottom: 30px; } #syndicate section h2 { font-size: 20px; line-height: 28px; padding-top: 80px; } #syndicate section h3 { font-size: 17px; line-height: 28px; padding-top: 50px; } #syndicate section p, #syndicate section li { font-family: "DINWeb", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; font-size: 16px; line-height: 28px; letter-spacing: 0; color: #4b4c4e; } #syndicate section p, #syndicate section ul, #syndicate section ol { padding-bottom: 30px; } #syndicate section li { padding-bottom: 0; } #syndicate section li.disc { list-style-type: disc; } #syndicate em { font-style: italic; letter-spacing: 0; } #syndicate section blockquote, #syndicate section blockquote p { font-family: 'Archer SSm A', 'Archer SSm B', serif; font-weight: 500; font-size: 18px; line-height: 28px; font-style: normal; letter-spacing: -.4px; color: #e45d50; } #syndicate section a { font-weight: 400; color: #5597CB; } #syndicate section p a:hover { text-decoration: underline; } #syndicate .content { overflow-x: hidden; } #syndicate #header { text-align: center; padding-bottom: 32px; } #syndicate .header-img { width: 181px; height: 40px; margin: 0 auto; background: url("../img/blog/SyndicateLogo-Article-iPhone.png") no-repeat 50% 0; background-size: 181px 40px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #syndicate .header-img { background-image: url("../img/blog/SyndicateLogo-Article-iPhone@2x.png"); background-size: 181px 40px; } } #syndicate .author-info *, #syndicate .article-nav * { -webkit-box-sizing: border-box; box-sizing: border-box; } #syndicate .article-img { max-width: 100%; height: auto; transform: scale(0.7, 0.7); -webkit-transform: scale(0.7, 0.7); } #syndicate .article-info { font-size: 13px; padding: 0; color: #323132; } #syndicate .author { font-weight: 500; color: #e45d50; text-transform: uppercase; } #syndicate .date { text-transform: uppercase; } #syndicate .quote-cite { color: #959595; font-size: 13px; letter-spacing: .5px; } #syndicate .quote-cite a { color: #959595; text-decoration: underline; } #syndicate .caption { font-family: "DINWeb", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; font-size: 12px; line-height: 18px; letter-spacing: 0.1px; color: #959595; margin-top: -23px; padding-bottom: 38px; } #syndicate .extra-small-img + .caption { text-align: center; } #syndicate .image-wrapper > img { max-width: 100%; height: auto; display: block; margin: 0 auto; } #syndicate .image-wrapper.bw-hover { background-image: url("../img/blog/articles/small/20140703_Yosemite_materials-02-hover.png"); background-size: contain; } #syndicate .image-wrapper.bw-hover > img:hover { opacity: 0; } #syndicate .image-wrapper.extra-small-img { max-width: 300px; text-align: center; } #syndicate .image-wrapper.large-img { width: 100%; } #syndicate section div.footnotes { /* width: 75%; margin-left: 12.5%; */ margin-top: 25px; } #syndicate section div.footnotes ol { padding-top: 25px; padding-left: 25px; border-top: 1px solid #ebebeb; } #syndicate section div.footnotes ol li { font-size: 12px; } #syndicate section div.footnotes li p { font-size: 12px; padding-bottom: 0; letter-spacing: 0; } #syndicate .author-wrapper { width: 310px; margin: 40px auto 60px auto; } #syndicate .author-box { margin-top: -8px; background: #f6f6f6; border: 1px solid #e3e3e3; border-top: 0; } #syndicate .author-wrapper img { width: 310px; height: 78px; } #syndicate .author-box .author-info { text-transform: uppercase; color: #323132; padding-top: 18px; text-align: center; } #syndicate .author-box .author-name { font-weight: 200; font-size: 25px; line-height: 28px; letter-spacing: .5px; padding-bottom: 0; } #syndicate .author-box .author-title { font-size: 13px; line-height: 18px; letter-spacing: .4px; padding-bottom: 14px; } #syndicate .author-box .social { padding: 6px 0; margin-bottom: 0; line-height: 30px; width: 310px; border-top: 1px solid #e3e3e3; text-align: center; } #syndicate .author-box .social li { display: inline; margin: 0 38px 0 30px; } #syndicate .author-box .social li:last-child { margin-right: 30px; } #syndicate .author-box .social li a:hover { border: none; } #syndicate .author-box .social svg { vertical-align: middle; } #syndicate .author-box .social .icon { fill: #959595; } #syndicate .article-nav .container { padding: 16px 0 13px 0; text-align: center; } #syndicate .article-nav h1 { font-size: 28px; line-height: 32px; color: #323132; } #syndicate .article-nav .arrow { font-weight: 200; font-size: 13px; line-height: 22px; letter-spacing: .5px; color: #e45d50; text-transform: uppercase; padding-bottom: 8px; } #syndicate .article-nav .article-info { font-weight: 400; font-size: 12px; line-height: 19px; padding: 0; color: #959595; } #syndicate .article-nav .author { font-weight: 500; color: #959595; } /*================================================== #Media Queries: @media (min-width: 480px) @media (min-width: 768px) @media (min-width: 1080px) ================================================== */ /*====================================================================*/ /*================= landscape phone size and up ====================*/ /*====================================================================*/ @media (min-width: 480px) { #syndicate .author-info .author-name, #syndicate .author-info .author-title { width: 280px; } } /*====================================================================*/ /*=================== portrait tablet size and up ==================*/ /*====================================================================*/ @media (min-width: 768px) { #syndicate { padding-top: 100px; padding-bottom: 160px; } #syndicate .container { width: 744px; } #syndicate .content hr, #syndicate section.content h2, #syndicate section.content h3, #syndicate section.content p { width: 620px; } #syndicate section.content ul, #syndicate section.content ol { width: 580px; } #syndicate .highlighter-rouge { margin: 0 auto 30px auto; width: 748px; } #syndicate section h1 { font-size: 90px; line-height: 100px; width: 744px; } #syndicate section h2 { font-size: 32px; line-height: 32px; padding-top: 68px; padding-bottom: 35px; } #syndicate section h3 { font-size: 22px; line-height: 32px; padding-top: 34px; padding-bottom: 35px; } #syndicate section h2 + .image-wrapper, #syndicate section h3 + .image-wrapper { padding-top: 10px; } #syndicate section p, #syndicate section li { font-weight: 400; font-size: 18px; line-height: 32px; letter-spacing: 0.2px; } #syndicate p code { font-size: 19px; } #syndicate section .caption { margin-top: -30px; } #syndicate section blockquote, #syndicate section blockquote p { font-size: 24px; line-height: 38px; } #syndicate #header { padding-bottom: 0; } #syndicate .header-img { width: 277px; height: 61px; padding-bottom: 40px; background: url("../img/blog/SyndicateLogo-Article-Desktop.png") no-repeat 50% 0; background-size: 277px 61px; } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #syndicate .header-img { background-image: url("../img/blog/SyndicateLogo-Article-Desktop@2x.png"); background-size: 277px 61px; } } @media (min-width: 768px) { #syndicate .article-img { transform: scale(1, 1); -webkit-transform: scale(1, 1); padding-top: 60px; padding-bottom: 30px; } #syndicate .article-info { font-size: 18px; line-height: 34px; width: 744px; } #syndicate #header-divider { margin: 60px 0 80px 0; } #syndicate section.content p.image-wrapper.medium-img { width: 744px; } #syndicate .image-wrapper > img { padding-bottom: 16px; } #syndicate .image-wrapper.bw-hover { width: 744px; background-image: url("../img/blog/articles/large/20140703_Yosemite_materials-02-hover.png"); } #syndicate .column-wrapper { width: 620px; margin: 0 auto; } #syndicate .column { display: inline-block; vertical-align: top; width: 292px; margin: 0; } #syndicate .column p.column-img, #syndicate .column p.caption { width: 100%; } #syndicate .column:nth-child(2) { margin-left: 20px; } #syndicate .author-wrapper { width: 654px; height: 121px; margin: 90px auto 100px auto; } #syndicate .author-box { width: 100%; height: 100%; border-top: 1px solid #e3e3e3; } #syndicate .author-wrapper img { float: left; width: 100px; height: 100px; padding: 10px 0 0 20px; } #syndicate .author-box .author-info { float: left; width: auto; padding: 40px 0 0 20px; text-align: left; } #syndicate .author-box .author-name { font-size: 25px; line-height: 28px; padding-bottom: 0; } #syndicate .author-box .author-title { font-size: 13px; line-height: 23px; padding-bottom: 0; } #syndicate .author-box .social { padding-top: 44px; padding-left: 0; float: right; border-top: 0; width: auto; } #syndicate .author-box .social li { margin: 0; } #syndicate .author-box .social svg { padding-left: 0; padding-right: 20px; } #syndicate .article-nav { width: 744px; margin: 0 auto; } #syndicate .article-nav h1 { font-size: 34px; line-height: 36px; } #syndicate .article-nav .arrow { font-size: 13px; line-height: 22px; padding-bottom: 20px; } #syndicate .article-nav .article-info { font-size: 13px; line-height: 23px; } #syndicate .article-nav .container { padding: 26px 0 44px 0; } #syndicate .article-nav .previous { float: left; width: 350px; } #syndicate .article-nav .previous * { text-align: left; width: 100%; } #syndicate .article-nav .next { float: right; width: 350px; } #syndicate .article-nav .next * { text-align: right; width: 100%; } #syndicate .article-nav .previous .arrow { padding-left: 20px; background: url("../img/blog/BackArrow-Footer.png") no-repeat 0 2px; background-position: 0 2px; } #syndicate .article-nav .next .arrow { padding-right: 20px; background: url("../img/blog/NextArrow-Footer.png") no-repeat 100% 2px; } } /*====================================================================*/ /*================= landscape tablet size and up ===================*/ /*====================================================================*/ @media (min-width: 1080px) { #syndicate .container { width: 1032px; } #syndicate section h1, #syndicate .article-info { width: 1032px; } #syndicate .content hr, #syndicate section.content h1, #syndicate section.content h2, #syndicate section.content h3, #syndicate section.content p { width: 656px; } #syndicate section.content ul, #syndicate section.content ol { width: 616px; } #syndicate .highlighter-rouge { width: 776px; } #syndicate .column-wrapper { width: 656px; } #syndicate .column { width: 312px; } #syndicate section div.footnotes { width: 75%; margin-left: 12.5%; } #syndicate .image-wrapper.bw-hover { width: 1000px; } #syndicate section.content p.image-wrapper.medium-img { width: 1000px; } #syndicate .article-nav { width: 1032px; } #syndicate .article-nav .previous { width: 400px; } #syndicate .article-nav .next { width: 400px; } } @media (min-width: 1080px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-resolution: 2dppx) { #syndicate .image-wrapper.bw-hover { background-image: url("../img/blog/articles/large/20140703_Yosemite_materials-02-hover@2x.png"); } } /*====================================================================*/ /*================ overrides for the "Office" article ===============*/ /*====================================================================*/ #syndicate #office .emp-quote { margin-top: -20px; padding-bottom: 70px; } /****************************************/ /************ referrals page ***********/ /****************************************/ #referrals { background-color: #fffaf3; padding-top: 100px; } #referrals .footer a, #referrals .footer .copyright { color: #7b7b7b; } #referrals .footer .icon { fill: #7b7b7b; } #referrals section#header h1 { color: #e45d50; font-size: 56px; line-height: 50px; margin-bottom: 2px; text-align: center; } #referrals section#header p { color: #545454; font-family: 'Archer SSm A', 'Archer SSm B', serif; font-size: 18px; line-height: 22px; letter-spacing: -.1px; font-style: italic; text-align: center; margin: 20px 0 30px 0; } #referrals .card-wrapper { background-color: #fff; padding: 16px 30px 30px 30px; -webkit-box-sizing: border-box; box-sizing: border-box; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.15); margin-bottom: 20px; text-align: center; } #referrals .card-wrapper h2 { color: #e45d50; font-size: 37px; line-height: 34px; letter-spacing: .5px; text-transform: none; text-align: center; margin-bottom: 20px; } #referrals .card-wrapper ul li { list-style: disc; font-size: 16px; line-height: 24px; text-align: left; letter-spacing: .25px; } #referrals .card-wrapper p { font-size: 14px; font-style: italic; line-height: 18px; text-align: left; } #referrals section#details { padding: 8px 0 20px 0; } @media (min-width: 768px) { /*****************************************/ /********** referrals page > 768 *********/ /*****************************************/ #referrals section#header h1 { font-size: 64px; line-height: 68px; } #referrals section#header p { font-size: 22px; line-height: 32px; margin: 20px auto 40px auto; } #referrals .card-wrapper h2 { font-size: 54px; margin-bottom: 30px; } #referrals .card-wrapper ul li { font-size: 18px; margin-left: 20px; } #referrals .card-wrapper p { font-size: 16px; } } @media (min-width: 1080px) { /**************************************************/ /********** referrals page - largest size *********/ /**************************************************/ #referrals section#header h1 { font-size: 88px; line-height: 76px; letter-spacing: -1.5px; margin-bottom: 20px; } #referrals section#header p { font-size: 26px; line-height: 36px; letter-spacing: -.5px; } #referrals .card-wrapper { margin: 0 auto 20px auto; letter-spacing: -1px; } #referrals .card-wrapper h2 { font-size: 70px; line-height: 74px; margin-top: 20px; margin-bottom: 20px; } #referrals .card-wrapper ul, #referrals .card-wrapper li { font-size: 22px; line-height: 24px; } #referrals .card-wrapper p { font-size: 18px; margin: 40px 0 20px 0; } } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { .footer-waves { background: url("../img/Footer-Wave-260@2x.png") no-repeat; background-size: 261px 32px; } span#dingusburger { background-image: url("../img/hamburger@2x.png"); background-size: 21px 17px; } div.navigation p { background-image: url("../img/navigation-logo@2x.png"); background-size: 40px 40px; } .quote { background: url("../img/Quote@2x.png") no-repeat top left; background-size: 69px 41px; } .quote#white { background: url("../img/QuoteWhite@2x.png") no-repeat top left; background-size: 69px 41px; } /****** Original Home Page (for small screen) ******/ body#madebymc { background-image: url("../img/madebymc/mobile-starfield@2x.jpg"); background-size: 768px 380px; } #madebymc .footer { background-image: url("../img/madebymc/mobile-footer@2x.jpg"); background-size: auto 260px; } /****** Consulting Page (for small screen) ******/ #consulting #services { background-image: url("../img/consulting/StarfieldTile-Top@2x.png"); background-size: 1200px 720px; } #consulting #service-list li#design { background: url("../img/consulting/SIcon-Design@2x.png") no-repeat 50% 0; background-size: 40% auto; } #consulting #service-list li#software-dev { background: url("../img/consulting/SIcon-Development@2x.png") no-repeat 50% 0; background-size: 52% auto; } #consulting #service-list li#server-dev { background: url("../img/consulting/SIcon-ServerDev@2x.png") no-repeat 50% 15%; background-size: 60% auto; } #consulting #service-list li#game-dev { background: url("../img/consulting/SIcon-Games@2x.png") no-repeat 50% 0; background-size: 48% auto; } #consulting #service-list li#site-training { background: url("../img/consulting/SIcon-Training@2x.png") no-repeat 50% 0; background-size: 42% auto; } #consulting #clients { background: url("../img/consulting/mobile-starfield@2x.png") repeat; } #consulting #client-logos { background: url("../img/consulting/ClientLogos-260@2x.png") no-repeat 50% 0; background-size: 260px 679px; } #consulting .footer { background: url("../img/consulting/mobile-MarsDunes@2x.png") repeat-x; } /****** Inventors page (for small screen) ******/ #inventors #book { background: #1077BD url("../img/inventors/GearBg@2x.png") no-repeat 100px 70%; background-size: 749px 625px; } /* phone landscape size and up */ /*================================================== */ } @media (-webkit-min-device-pixel-ratio: 1.5) and (min-width: 480px), (min-device-pixel-ratio: 1.5) and (min-width: 480px), (-o-min-device-pixel-ratio: 1.5) and (min-width: 480px), (min-resolution: 2dppx) and (min-width: 480px) { /****** Original Home Page > 480 ******/ #madebymc .footer { background-size: 100%; } /****** Consulting Page > 480 ******/ #consulting #client-logos { background: url("../img/consulting/ClientLogos-420@2x.png") no-repeat 50% 0; background-size: 420px 1074px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { /* tablet portrait size and up */ /*================================================== */ } @media (-webkit-min-device-pixel-ratio: 1.5) and (min-width: 768px), (min-device-pixel-ratio: 1.5) and (min-width: 768px), (-o-min-device-pixel-ratio: 1.5) and (min-width: 768px), (min-resolution: 2dppx) and (min-width: 768px) { span#dingusburger { display: none; } div.navigation p { background-position: 0 12px; } .footer-waves { background: url("../img/Footer-Wave-768@2x.png") no-repeat; background-size: 726px 64px; } /****** Original home page > 768 ******/ body#madebymc { background-image: url("../img/madebymc/starfield@2x.jpg"); background-size: 1920px 950px; } #madebymc .footer { background-image: url("../img/madebymc/footer@2x.jpg"); background-size: 100%; } /****** Consulting Page > 768 ******/ #consulting #clients { background-image: url("../img/consulting/StarfieldTile-Top@2x.png"); background-size: 1200px 720px; } #consulting #client-logos { background: url("../img/consulting/ClientLogos-744@2x.png") no-repeat 50% 0; background-size: 744px 429px; } #consulting .footer { background: url("../img/consulting/MarsDunes@2x.png") repeat-x 0 100px; } /****** Inventors Page > 768 ******/ #inventors #book { background-position: 250px 100%; } } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { /* landscape tablet size and up */ /*================================================== */ } @media (-webkit-min-device-pixel-ratio: 1.5) and (min-width: 1080px), (min-device-pixel-ratio: 1.5) and (min-width: 1080px), (-o-min-device-pixel-ratio: 1.5) and (min-width: 1080px), (min-resolution: 2dppx) and (min-width: 1080px) { .footer-waves { background: url("../img/Footer-Wave-1200@2x.png") no-repeat; background-size: 1173px 69px; } /****** Consulting Page - largest size ******/ #consulting #client-logos { background: url("../img/consulting/ClientLogos-996@2x.png") no-repeat 50% 0; background-size: 996px 575px; } /****** Inventors Page - largest size ******/ #inventors #book { background-position: 596px 100%; } } x { margin: 0; padding: 0; box-sizing: border-box; } ul { list-style: none; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } /* Main */ .ticker-container { position: relative; width: 485px; height: 80px; -webkit-user-select: none; margin: 0 auto; padding: 0; box-sizing: border-box; } /* Skeleton */ ul.flip { margin: 0; padding: 0; box-sizing: border-box; position: relative; float: left; margin: 1px; width: 42px; height: 76px; font-family: "DINWeb-Cond", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 58px; font-weight: bold; } ul.flip li { margin: 0; padding: 0; box-sizing: border-box; line-height: 88px; z-index: 1; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } ul.flip li:first-child { margin: 0; padding: 0; box-sizing: border-box; z-index: 2; } ul.flip li { margin: 0; padding: 0; box-sizing: border-box; display: block; height: 100%; -webkit-perspective: 200px; perspective: 200px; } ul.flip li div { margin: 0; padding: 0; box-sizing: border-box; z-index: 1; position: absolute; left: 0; width: 100%; height: 50%; overflow: hidden; } ul.flip li div .shadow { margin: 0; padding: 0; box-sizing: border-box; position: absolute; width: 100%; height: 100%; z-index: 2; } ul.flip li div.up { margin: 0; padding: 0; box-sizing: border-box; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; top: 0; } ul.flip li div.up:after { margin: 0; padding: 0; box-sizing: border-box; content: ""; position: absolute; top: 37px; left: 0; z-index: 5; width: 100%; height: 3px; background-color: white; } ul.flip li div.down { margin: 0; padding: 0; box-sizing: border-box; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; bottom: 0; } ul.flip li div div.inn { margin: 0; padding: 0; box-sizing: border-box; position: absolute; left: 0; z-index: 1; width: 100%; height: 200%; color: white; text-align: center; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #80B6D5), color-stop(100%, #4C8BB5)); background: -o-linear-gradient(top, #80B6D5 0%, #4C8BB5 100%); background: linear-gradient(to bottom, #80B6D5 0%, #4C8BB5 100%); border-radius: 3px; } ul.flip li div.up div.inn { margin: 0; padding: 0; box-sizing: border-box; top: 0; } ul.flip li div.down div.inn { margin: 0; padding: 0; box-sizing: border-box; bottom: 0; } /* PLAY */ body.play ul li.before { margin: 0; padding: 0; box-sizing: border-box; z-index: 3; } body.play ul li.active { margin: 0; padding: 0; box-sizing: border-box; -webkit-animation: asd .25s .25s linear both; animation: asd .25s .25s linear both; z-index: 2; } @-webkit-keyframes asd { 0% { z-index: 2; } 5% { z-index: 4; } 100% { z-index: 4; } } @keyframes asd { 0% { z-index: 2; } 5% { z-index: 4; } 100% { z-index: 4; } } body.play ul li.active .down { margin: 0; padding: 0; box-sizing: border-box; z-index: 2; -webkit-animation: turn .25s .25s linear both; animation: turn .25s .25s linear both; } @-webkit-keyframes turn { 0% { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); } 100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } } @keyframes turn { 0% { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); } 100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } } body.play ul li.before .up { margin: 0; padding: 0; box-sizing: border-box; z-index: 2; -webkit-animation: turn2 .25s linear both; animation: turn2 .25s linear both; } @-webkit-keyframes turn2 { 0% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } 100% { -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); } } @keyframes turn2 { 0% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } 100% { -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); } } /* SHADOW */ body.play ul li.before .up .shadow { margin: 0; padding: 0; box-sizing: border-box; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.3))); background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%); -webkit-animation: show .25s linear both; animation: show .25s linear both; } body.play ul li.active .up .shadow { margin: 0; padding: 0; box-sizing: border-box; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.3))); background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%); -webkit-animation: hide .25s .3s linear both; animation: hide .25s .3s linear both; } /*DOWN*/ body.play ul li.before .down .shadow { margin: 0; padding: 0; box-sizing: border-box; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.3)), color-stop(100%, rgba(0, 0, 0, 0.1))); background: -o-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%); -webkit-animation: show .25s linear both; animation: show .25s linear both; } body.play ul li.active .down .shadow { margin: 0; padding: 0; box-sizing: border-box; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.3)), color-stop(100%, rgba(0, 0, 0, 0.1))); background: -o-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%); -webkit-animation: hide .25s .3s linear both; animation: hide .25s .3s linear both; } @-webkit-keyframes show { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes show { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes hide { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes hide { 0% { opacity: 1; } 100% { opacity: 0; } } @media (min-width: 1080px) { /***************************************************/ /********** Slender page > largest size ***********/ /***************************************************/ .ticker-container { width: 838px; height: 150px; } ul.flip { width: 74px; height: 150px; font-size: 110px; } ul.flip li { line-height: 170px; } ul.flip li div.up:after { top: 72px; } ul.flip li div div.inn { border-radius: 5px; } } /**********************************/ /********** Careers page **********/ /**********************************/ #careers { background-color: #000; } #careers .footer a, #careers .footer .copyright { color: #959595; } #careers .footer .icon { fill: #959595; } #careers section { padding: 30px 0 44px 0; } #careers section h1 { color: #F84E3D; line-height: 66px; margin-bottom: 12px; text-align: center; } #careers section h2 { color: #F84E3D; font-size: 32px; line-height: 37px; letter-spacing: 0; text-transform: none; } #careers section h3 { color: #F84E3D; font-size: 28px; line-height: 31px; letter-spacing: 0; margin-top: 0; margin-bottom: 40px; } #careers section h4 { color: #000; font-size: 16px; line-height: 25px; text-align: center; } #careers section p { font-size: 16px; line-height: 25px; color: #000; text-align: left; margin: 14px 0 20px 0; letter-spacing: 0; } #careers section .button { display: block; color: #fff; font-size: 18px; line-height: 44px; font-weight: 400; letter-spacing: .75px; background: transparent; border: 2px solid #fff; padding: 0; margin: 0 auto; height: 42px; width: 260px; border-radius: 6px; } #careers #intro { margin-top: 54px; } #careers #intro h1 { padding-top: 150px; background-image: url("../img/careers/Patch_Crew-320.png"); background-position: center top; background-repeat: no-repeat; background-size: 134px 125px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #careers #intro h1 { background-image: url("../img/careers/Patch_Crew-320@2x.png"); } } #careers #intro p { color: #fff; margin-bottom: 30px; } #careers #details { background-color: #FFFAF3; padding-bottom: 18px; overflow-x: hidden; } #careers #details h2 { margin-bottom: 12px; } #careers #details .emoji { height: 14px; position: relative; top: 1px; } #careers #details p { font-size: 13px; line-height: 21px; } #careers #details .caption { position: absolute; font-size: 13px; line-height: 16px; color: #999; padding-top: 8px; } #careers #details #projects-image { background-image: url("../img/careers/Illustration_ChallengingProjects-480.png"); background-size: cover; width: 280px; height: 152px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #careers #details #projects-image { background-image: url("../img/careers/Illustration_ChallengingProjects-480@2x.png"); } } #careers #details #projects-image-on-edge { display: none; } #careers #details #employees { margin-top: 52px; height: 205px; } #careers #details #employees .image-slider { position: relative; top: 0; right: 0; bottom: 0; left: 0; z-index: auto; background: #000; background: rgba(0, 0, 0, 0.9); margin: 1em auto; height: 100%; -ms-touch-action: pan-y; touch-action: pan-y; -moz-backface-visibility: hidden; } #careers #details #employees .image-slider .slides { position: absolute; height: 100%; } #careers #details #employees .image-slider .slides .slide { position: relative; float: left; height: 100%; -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); -moz-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); -ms-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); -o-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); } #careers #details #employees .image-slider .slides .slide .slide-content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: auto; height: auto; max-width: 100%; max-height: 100%; opacity: 1; background-position: center; background-repeat: no-repeat; background-size: auto 205px; /* Prevent artifacts in Mozilla Firefox: */ -moz-backface-visibility: hidden; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #careers #details #employees .image-slider .slides .slide .slide-content .overlay { background-color: rgba(0, 0, 0, 0.6); position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #careers #details #employees .image-slider .slides .slide .slide-content .container { height: 100%; width: 290px; } #careers #details #employees .image-slider .slides .slide .slide-content .employee-wrapper { height: 100%; } #careers #details #employees .image-slider .slides .slide .slide-content .employee-wrapper .name { position: absolute; top: 30px; left: 15px; color: red; } #careers #details #employees .image-slider .slides .slide .slide-content .employee-wrapper .quote { position: absolute; height: 40px; width: 40px; opacity: .5; background-size: 30px auto; background-position: 0 7px; margin-left: -4px; } #careers #details #employees .image-slider .slides .slide .slide-content .employee-wrapper blockquote { font-size: 14px; line-height: 20px; padding-top: 14px; margin-bottom: 12px; margin-left: 0; color: #fff; } #careers #details #employees .image-slider .slides .slide .slide-content .employee-wrapper .person, #careers #details #employees .image-slider .slides .slide .slide-content .employee-wrapper .person-title { font-size: 12px; line-height: 14px; display: block; } #careers #details #employees .image-slider .slides .slide .slide-content .employee-wrapper .person { color: #F84E3D; text-transform: uppercase; } #careers #details #employees .image-slider .slides .slide .slide-content .employee-wrapper .person-title { color: #fff; padding-bottom: 5px; } #careers #details #employees .image-slider .slides .slide .slide-content .employee-wrapper .caption { bottom: 3px; width: 310px; left: -10px; text-align: center; } #careers #details #employees .image-slider .slides .slide[data-index="0"] > .slide-content { background-image: url("../img/careers/Offices_Karol-320.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="0"] > .slide-content { background-image: url("../img/careers/Offices_Karol-320@2x.png"); } } #careers #details #employees .image-slider .slides .slide[data-index="1"] > .slide-content { background-image: url("../img/careers/Offices_Steve-320.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="1"] > .slide-content { background-image: url("../img/careers/Offices_Steve-320@2x.png"); } } #careers #details #employees .image-slider .slides .slide[data-index="2"] > .slide-content { background-image: url("../img/careers/Offices_Den-320.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="2"] > .slide-content { background-image: url("../img/careers/Offices_Den-320@2x.png"); } } #careers #details #employees .image-slider .slides .slide[data-index="3"] > .slide-content { background-image: url("../img/careers/Offices_Alex-320.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="3"] > .slide-content { background-image: url("../img/careers/Offices_Alex-320@2x.png"); } } #careers #details #employees .image-slider .slides .slide[data-index="4"] > .slide-content { background-image: url("../img/careers/Offices_Trevor-320.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="4"] > .slide-content { background-image: url("../img/careers/Offices_Trevor-320@2x.png"); } } #careers #details #employees .image-slider .slides .slide[data-index="5"] > .slide-content { background-image: url("../img/careers/Offices_Joe-320.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="5"] > .slide-content { background-image: url("../img/careers/Offices_Joe-320@2x.png"); } } #careers #details #employees .image-slider .slides .slide[data-index="6"] > .slide-content { background-image: url("../img/careers/Offices_Josh-320.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="6"] > .slide-content { background-image: url("../img/careers/Offices_Josh-320@2x.png"); } } #careers #details #employees .image-slider .slides .slide[data-index="7"] > .slide-content { background-image: url("../img/careers/Offices_Brian-320.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="7"] > .slide-content { background-image: url("../img/careers/Offices_Brian-320@2x.png"); } } #careers #details #employees .image-slider .slides .slide[data-index="8"] > .slide-content { background-image: url("../img/careers/Offices_Jay-320.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="8"] > .slide-content { background-image: url("../img/careers/Offices_Jay-320@2x.png"); } } #careers #details #employees .image-slider.image-slider-controls .prev, #careers #details #employees .image-slider.image-slider-controls .next { position: absolute; top: 0; left: 0; width: 100px; height: 100%; opacity: 0; } #careers #details #employees .image-slider.image-slider-controls .next { left: auto; right: 0; height: 140px; } #careers #details #employees .image-slider.image-slider-controls .play-pause { position: absolute; right: 15px; bottom: 5px; width: 20px; height: 20px; background-size: 40px 20px; padding: 20px 0; opacity: 0.5; } #careers #details #employees .image-slider.image-slider-controls .play-pause:hover { border: none; opacity: 1; } #careers #details #employees .image-slider.image-slider-controls.image-slider-playing > .play-pause { background-position: -20px 20px; } #careers #details #employees .image-slider.image-slider-controls .prev, #careers #details #employees .image-slider.image-slider-controls .next, #careers #details #employees .image-slider.image-slider-controls .play-pause { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* Fix z-index issues (controls behind slide element) on Android: */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } #careers #details #employees .image-slider .indicator { position: absolute; top: auto; right: 15px; bottom: -18px; left: 15px; width: 300px; margin: 0 auto; padding: 0; list-style: none; text-align: center; line-height: 10px; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #careers #details #employees .image-slider .indicator li { display: inline-block; width: 8px; height: 8px; margin: 6px 6px 0 6px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; background-color: transparent; border: 1px solid #999; border-radius: 50%; cursor: pointer; /* Fix z-index issues (controls behind slide element) on Android: */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } #careers #details #employees .image-slider .indicator .active, #careers #details #employees .image-slider .indicator li:hover { background-color: #87BED7; border-color: #87BED7; } #careers #details #be-comfortable #be-comfortable-text { margin-top: 74px; } #careers #details #be-comfortable #be-comfortable-text p:first-of-type { margin-top: 46px; } #careers #details #be-comfortable #game-day-image { background-image: url("../img/careers/GameDay_Fire-320.png"); background-size: cover; background-position: center top; background-repeat: no-repeat; width: 100%; height: 196px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #careers #details #be-comfortable #game-day-image { background-image: url("../img/careers/GameDay_Fire-320@2x.png"); } } #careers #benefits { background-color: #97c1df; padding-bottom: 0; } #careers #benefits h2 { color: #000; text-align: center; margin-top: 14px; margin-bottom: 0; } #careers #benefits li { float: left; text-align: center; width: 115px; height: 80px; margin-left: 12px; margin-right: 12px; padding-top: 78px; font-size: 12px; line-height: 16px; background-size: auto 68px; background-repeat: no-repeat; background-position: center top; } #careers #benefits #health { background-image: url("../img/careers/Benefits_Health.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #careers #benefits #health { background-image: url("../img/careers/Benefits_Health@2x.png"); } } #careers #benefits #remote { background-image: url("../img/careers/Benefits_Remote.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #careers #benefits #remote { background-image: url("../img/careers/Benefits_Remote@2x.png"); } } #careers #benefits #medical { background-image: url("../img/careers/Benefits_Medical.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #careers #benefits #medical { background-image: url("../img/careers/Benefits_Medical@2x.png"); } } #careers #benefits #retirement { background-image: url("../img/careers/Benefits_401k.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #careers #benefits #retirement { background-image: url("../img/careers/Benefits_401k@2x.png"); } } #careers #benefits #vacation { background-image: url("../img/careers/Benefits_Vacation.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #careers #benefits #vacation { background-image: url("../img/careers/Benefits_Vacation@2x.png"); } } #careers #benefits #casual { background-image: url("../img/careers/Benefits_Bathrobe.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #careers #benefits #casual { background-image: url("../img/careers/Benefits_Bathrobe@2x.png"); } } #careers #hiring { color: #fff; padding-bottom: 0; } #careers #hiring h2 { color: #fff; text-align: center; margin-top: 20px; margin-bottom: 20px; } #careers #hiring p { color: #fff; text-align: center; margin: 14px 20px 0 20px; } #careers #hiring li { font-family: "DINWeb-Cond", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 30px; line-height: 35px; letter-spacing: .25px; border-top: 1px solid #808080; padding: 17px 0 10px 0; margin-bottom: 0; } #careers #hiring li:last-child { border-bottom: 1px solid #808080; } #careers #hiring li a { display: block; padding-left: 30px; padding-right: 30px; } #careers #hiring li a:hover { border: none; } #careers #hiring li a:after { border-color: #808080; border-style: solid; border-width: 1px 1px 0 0; content: ''; display: inline-block; height: 0.45em; position: relative; top: 0.25em; float: right; transform: rotate(45deg); -webkit-transform: rotate(45deg); vertical-align: middle; width: 0.45em; } footer { color: #fff; } /*================================================== #Media Queries: @media (min-width: 480px) @media (min-width: 768px) @media (min-width: 1080px) ================================================== */ /*====================================================================*/ /*================= landscape phone size and up ====================*/ /*====================================================================*/ @media (min-width: 480px) { #careers section { padding-bottom: 36px; } #careers section h1 { font-size: 62px; letter-spacing: -1.28px; } #careers section h3 { font-size: 32px; line-height: 37px; } #careers section p { font-size: 18px; } #careers section .button { width: 260px; } #careers #intro p { font-size: 16px; margin-bottom: 20px; } #careers #details { padding-bottom: 20px; } #careers #details p { font-size: 18px; line-height: 25px; } #careers #details #projects-image { width: 420px; height: 233px; } #careers #details #employees .image-slider.image-slider-controls .prev { left: 0; } #careers #details #employees .image-slider.image-slider-controls .next { right: 0; } #careers #details #employees .image-slider .slides .slide .slide-content { background-size: auto 205px; } #careers #details #employees .image-slider .slides .slide .slide-content .container { width: 420px; } #careers #details #employees .image-slider .slides .slide .slide-content .employee-wrapper blockquote { font-size: 16px; line-height: 25px; padding-top: 12px; margin-bottom: 8px; } #careers #details #employees .image-slider .slides .slide .slide-content .employee-wrapper .person, #careers #details #employees .image-slider .slides .slide .slide-content .employee-wrapper .person-title { font-size: 12px; } #careers #details #employees .image-slider .slides .slide .slide-content .employee-wrapper .caption { right: 0; text-align: right; width: 100%; left: auto; } #careers #details #employees .image-slider .slides .slide[data-index="0"] > .slide-content { background-image: url("../img/careers/Offices_Karol-480.png"); } } @media (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-device-pixel-ratio: 1.5), (min-width: 480px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="0"] > .slide-content { background-image: url("../img/careers/Offices_Karol-480@2x.png"); } } @media (min-width: 480px) { #careers #details #employees .image-slider .slides .slide[data-index="1"] > .slide-content { background-image: url("../img/careers/Offices_Steve-480.png"); } } @media (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-device-pixel-ratio: 1.5), (min-width: 480px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="1"] > .slide-content { background-image: url("../img/careers/Offices_Steve-480@2x.png"); } } @media (min-width: 480px) { #careers #details #employees .image-slider .slides .slide[data-index="2"] > .slide-content { background-image: url("../img/careers/Offices_Den-480.png"); } } @media (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-device-pixel-ratio: 1.5), (min-width: 480px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="2"] > .slide-content { background-image: url("../img/careers/Offices_Den-480@2x.png"); } } @media (min-width: 480px) { #careers #details #employees .image-slider .slides .slide[data-index="3"] > .slide-content { background-image: url("../img/careers/Offices_Alex-480.png"); } } @media (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-device-pixel-ratio: 1.5), (min-width: 480px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="3"] > .slide-content { background-image: url("../img/careers/Offices_Alex-480@2x.png"); } } @media (min-width: 480px) { #careers #details #employees .image-slider .slides .slide[data-index="4"] > .slide-content { background-image: url("../img/careers/Offices_Trevor-480.png"); } } @media (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-device-pixel-ratio: 1.5), (min-width: 480px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="4"] > .slide-content { background-image: url("../img/careers/Offices_Trevor-480@2x.png"); } } @media (min-width: 480px) { #careers #details #employees .image-slider .slides .slide[data-index="5"] > .slide-content { background-image: url("../img/careers/Offices_Joe-480.png"); } } @media (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-device-pixel-ratio: 1.5), (min-width: 480px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="5"] > .slide-content { background-image: url("../img/careers/Offices_Joe-480@2x.png"); } } @media (min-width: 480px) { #careers #details #employees .image-slider .slides .slide[data-index="6"] > .slide-content { background-image: url("../img/careers/Offices_Josh-480.png"); } } @media (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-device-pixel-ratio: 1.5), (min-width: 480px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="6"] > .slide-content { background-image: url("../img/careers/Offices_Josh-480@2x.png"); } } @media (min-width: 480px) { #careers #details #employees .image-slider .slides .slide[data-index="7"] > .slide-content { background-image: url("../img/careers/Offices_Brian-480.png"); } } @media (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-device-pixel-ratio: 1.5), (min-width: 480px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="7"] > .slide-content { background-image: url("../img/careers/Offices_Brian-480@2x.png"); } } @media (min-width: 480px) { #careers #details #employees .image-slider .slides .slide[data-index="8"] > .slide-content { background-image: url("../img/careers/Offices_Jay-480.png"); } } @media (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-device-pixel-ratio: 1.5), (min-width: 480px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="8"] > .slide-content { background-image: url("../img/careers/Offices_Jay-480@2x.png"); } } @media (min-width: 480px) { #careers #details #be-comfortable #game-day-image { background-image: url("../img/careers/GameDay_Fire-480.png"); } } @media (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-device-pixel-ratio: 1.5), (min-width: 480px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-resolution: 2dppx) { #careers #details #be-comfortable #game-day-image { background-image: url("../img/careers/GameDay_Fire-480@2x.png"); } } @media (min-width: 480px) { #careers #details #be-comfortable #be-comfortable-text { margin-top: 70px; } #careers #details #be-comfortable #be-comfortable-text p:first-of-type { margin-top: 62px; } #careers #details #be-comfortable .emoji { height: 17px; top: 2px; } #careers #benefits li { height: 64px; } } /*====================================================================*/ /*=================== portrait tablet size and up ==================*/ /*====================================================================*/ @media (min-width: 768px) { #careers { padding-bottom: 194px; } #careers section { padding: 54px 0 44px 0; } #careers section h1 { text-align: left; font-size: 56px; line-height: 62px; letter-spacing: 0px; } #careers section h2 { font-size: 42px; line-height: 50px; } #careers section h3 { font-size: 56px; line-height: 64px; } #careers section h4 { font-size: 24px; line-height: 33px; margin-bottom: 42px; } #careers section p { font-size: 18px; } #careers section .button { font-size: 24px; line-height: 54px; height: 50px; width: 312px; } #careers #intro { margin-top: 40px; padding-bottom: 60px; } #careers #intro h1 { padding-top: 0; padding-left: 330px; padding-bottom: 198px; background-image: url("../img/careers/Patch_Crew-768.png"); background-position: 50px top; background-size: 224px 208px; } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #careers #intro h1 { background-image: url("../img/careers/Patch_Crew-768@2x.png"); } } @media (min-width: 768px) { #careers #intro p { position: absolute; left: 330px; top: 62px; width: 380px; margin-bottom: 70px; font-size: 18px; } #careers #details { padding-bottom: 50px; } #careers #details #challenging-projects #projects-image { display: none; } #careers #details #challenging-projects #projects-image-on-edge { display: block; background-image: url("../img/careers/Illustration_ChallengingProjects-768.png"); background-position: left top; background-size: cover; background-repeat: no-repeat; position: absolute; top: 680px; right: 0; width: 384px; height: 301px; } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #careers #details #challenging-projects #projects-image-on-edge { background-image: url("../img/careers/Illustration_ChallengingProjects-768@2x.png"); } } @media (min-width: 768px) { #careers #details #challenging-projects p { width: 356px; margin-bottom: 24px; } #careers #details #employees { height: 418px; margin-top: 74px; } #careers #details #employees .image-slider.image-slider-controls .prev, #careers #details #employees .image-slider.image-slider-controls .next { top: 50%; left: 20px; width: 40px; height: 40px; margin-top: -20px; font-size: 56px; font-weight: 100; color: #fff; text-decoration: none; text-align: center; opacity: 0.5; } #careers #details #employees .image-slider.image-slider-controls .next { left: auto; right: 20px; } #careers #details #employees .image-slider.image-slider-controls .play-pause { position: absolute; right: 30px; bottom: 0; width: 20px; height: 20px; background: url(../img/play-pause.svg) 0 0 no-repeat; background-size: 40px 20px; opacity: 0.5; } #careers #details #employees .image-slider.image-slider-controls.image-slider-playing > .play-pause { background-position: -20px 0; } #careers #details #employees .image-slider.image-slider-controls .prev, #careers #details #employees .image-slider.image-slider-controls .next, #careers #details #employees .image-slider.image-slider-controls .play-pause { cursor: pointer; } #careers #details #employees .image-slider.image-slider-controls .prev:hover, #careers #details #employees .image-slider.image-slider-controls .next:hover, #careers #details #employees .image-slider.image-slider-controls .play-pause:hover { color: #fff; opacity: 1; border-bottom: none; } #careers #details #employees .image-slider .slides .slide .slide-content { background-size: auto 418px; } #careers #details #employees .image-slider .slides .slide .slide-content .container { width: 622px; } #careers #details #employees .image-slider .slides .slide .slide-content .employee-wrapper .person, #careers #details #employees .image-slider .slides .slide .slide-content .employee-wrapper .person-title { font-size: 18px; line-height: 24px; } #careers #details #employees .image-slider .slides .slide .slide-content .employee-wrapper .quote { position: absolute; height: 110px; width: 110px; opacity: .5; background-size: 72px auto; background-position: 0 26px; margin-left: -10px; } #careers #details #employees .image-slider .slides .slide .slide-content .employee-wrapper blockquote { font-size: 32px; line-height: 44px; padding-top: 38px; margin-bottom: 20px; } #careers #details #employees .image-slider .slides .slide .slide-content .employee-wrapper .caption { bottom: 13px; } #careers #details #employees .image-slider .slides .slide[data-index="0"] > .slide-content { background-image: url("../img/careers/Offices_Karol-768.png"); } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="0"] > .slide-content { background-image: url("../img/careers/Offices_Karol-768@2x.png"); } } @media (min-width: 768px) { #careers #details #employees .image-slider .slides .slide[data-index="1"] > .slide-content { background-image: url("../img/careers/Offices_Steve-768.png"); } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="1"] > .slide-content { background-image: url("../img/careers/Offices_Steve-768@2x.png"); } } @media (min-width: 768px) { #careers #details #employees .image-slider .slides .slide[data-index="2"] > .slide-content { background-image: url("../img/careers/Offices_Den-768.png"); } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="2"] > .slide-content { background-image: url("../img/careers/Offices_Den-768@2x.png"); } } @media (min-width: 768px) { #careers #details #employees .image-slider .slides .slide[data-index="3"] > .slide-content { background-image: url("../img/careers/Offices_Alex-768.png"); } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="3"] > .slide-content { background-image: url("../img/careers/Offices_Alex-768@2x.png"); } } @media (min-width: 768px) { #careers #details #employees .image-slider .slides .slide[data-index="4"] > .slide-content { background-image: url("../img/careers/Offices_Trevor-768.png"); } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="4"] > .slide-content { background-image: url("../img/careers/Offices_Trevor-768@2x.png"); } } @media (min-width: 768px) { #careers #details #employees .image-slider .slides .slide[data-index="5"] > .slide-content { background-image: url("../img/careers/Offices_Joe-768.png"); } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="5"] > .slide-content { background-image: url("../img/careers/Offices_Joe-768@2x.png"); } } @media (min-width: 768px) { #careers #details #employees .image-slider .slides .slide[data-index="6"] > .slide-content { background-image: url("../img/careers/Offices_Josh-768.png"); } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="6"] > .slide-content { background-image: url("../img/careers/Offices_Josh-768@2x.png"); } } @media (min-width: 768px) { #careers #details #employees .image-slider .slides .slide[data-index="7"] > .slide-content { background-image: url("../img/careers/Offices_Brian-768.png"); } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="7"] > .slide-content { background-image: url("../img/careers/Offices_Brian-768@2x.png"); } } @media (min-width: 768px) { #careers #details #employees .image-slider .slides .slide[data-index="8"] > .slide-content { background-image: url("../img/careers/Offices_Jay-768.png"); } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="8"] > .slide-content { background-image: url("../img/careers/Offices_Jay-768@2x.png"); } } @media (min-width: 768px) { #careers #details #employees .image-slider .indicator { bottom: -20px; } #careers #details #be-comfortable { margin-top: 100px; } #careers #details #be-comfortable #game-day-image { background-image: url("../img/careers/GameDay_Fire-768.png"); width: 360px; height: 269px; float: left; margin-top: 6px; } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #careers #details #be-comfortable #game-day-image { background-image: url("../img/careers/GameDay_Fire-768@2x.png"); } } @media (min-width: 768px) { #careers #details #be-comfortable #game-day-image .caption { position: relative; top: 256px; } #careers #details #be-comfortable #be-comfortable-text { float: right; margin-top: 0; width: 356px; } #careers #details #be-comfortable #be-comfortable-text h2 { margin-top: 0; } #careers #details #be-comfortable #be-comfortable-text p:first-of-type { margin-top: 14px; } #careers #benefits { padding-top: 44px; padding-bottom: 10px; } #careers #benefits li { width: 200px; height: 100px; margin-left: 24px; margin-right: 24px; padding-top: 100px; font-size: 18px; line-height: 25px; background-size: auto 88px; } #careers #hiring h2 { margin-top: 0px; margin-bottom: 44px; } #careers #hiring ul { width: 720px; margin: 0 auto; } #careers #hiring li { font-size: 42px; line-height: 46px; } #careers #hiring li a { padding-left: 0; padding-right: 0; } #careers #hiring li a:after { content: 'View Position'; font-family: "DINWeb", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; border: none; -webkit-transform: none; transform: none; height: 100%; width: auto; top: 0; } } /*====================================================================*/ /*================= landscape tablet size and up ===================*/ /*====================================================================*/ @media (min-width: 1080px) { #careers section { padding: 100px 0 60px 0; } #careers section h1 { font-size: 70px; line-height: 76px; letter-spacing: -1px; } #careers section h3 { font-size: 70px; line-height: 76px; margin-bottom: 74px; } #careers section h4 { margin-bottom: 62px; } #careers section .button { left: -245px; } #careers #intro { margin-top: 0; padding-bottom: 90px; } #careers #intro h1 { margin-top: 10px; padding: 52px 0 326px 538px; background-image: url("../img/careers/Patch_Crew-1200.png"); background-position: 50px top; background-size: 434px 402px; } } @media (min-width: 1080px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-device-pixel-ratio: 1.5), (min-width: 1080px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-resolution: 2dppx) { #careers #intro h1 { background-image: url("../img/careers/Patch_Crew-1200@2x.png"); } } @media (min-width: 1080px) { #careers #intro p { font-size: 25px; line-height: 39px; left: 540px; top: 136px; width: 480px; } #careers #details #challenging-projects #projects-image { display: block; background-image: url("../img/careers/Illustration_ChallengingProjects-1200.png"); background-position: left top; float: right; width: 536px; height: 307px; position: relative; top: -48px; } } @media (min-width: 1080px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-device-pixel-ratio: 1.5), (min-width: 1080px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-resolution: 2dppx) { #careers #details #challenging-projects #projects-image { background-image: url("../img/careers/Illustration_ChallengingProjects-1200@2x.png"); } } @media (min-width: 1080px) { #careers #details #challenging-projects #projects-image-on-edge { display: none; } #careers #details #challenging-projects p { width: 490px; } #careers #details #employees { margin-top: 60px; height: 500px; } #careers #details #employees .image-slider.image-slider-controls .prev, #careers #details #employees .image-slider.image-slider-controls .next { font-size: 80px; } #careers #details #employees .image-slider.image-slider-controls .prev { left: 30px; } #careers #details #employees .image-slider.image-slider-controls .next { right: 30px; } #careers #details #employees .image-slider .slides .slide .slide-content { background-size: auto 500px; } #careers #details #employees .image-slider .slides .slide .slide-content .container { width: 700px; } #careers #details #employees .image-slider .slides .slide .slide-content .employee-wrapper .quote { height: 140px; background-position: 0 90px; } #careers #details #employees .image-slider .slides .slide .slide-content .employee-wrapper blockquote { padding-top: 110px; } #careers #details #employees .image-slider .slides .slide[data-index="0"] > .slide-content { background-image: url("../img/careers/Offices_Karol-1200.png"); } } @media (min-width: 1080px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-device-pixel-ratio: 1.5), (min-width: 1080px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="0"] > .slide-content { background-image: url("../img/careers/Offices_Karol-1200@2x.png"); } } @media (min-width: 1080px) { #careers #details #employees .image-slider .slides .slide[data-index="1"] > .slide-content { background-image: url("../img/careers/Offices_Steve-1200.png"); } } @media (min-width: 1080px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-device-pixel-ratio: 1.5), (min-width: 1080px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="1"] > .slide-content { background-image: url("../img/careers/Offices_Steve-1200@2x.png"); } } @media (min-width: 1080px) { #careers #details #employees .image-slider .slides .slide[data-index="2"] > .slide-content { background-image: url("../img/careers/Offices_Den-1200.png"); } } @media (min-width: 1080px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-device-pixel-ratio: 1.5), (min-width: 1080px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="2"] > .slide-content { background-image: url("../img/careers/Offices_Den-1200@2x.png"); } } @media (min-width: 1080px) { #careers #details #employees .image-slider .slides .slide[data-index="3"] > .slide-content { background-image: url("../img/careers/Offices_Alex-1200.png"); } } @media (min-width: 1080px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-device-pixel-ratio: 1.5), (min-width: 1080px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="3"] > .slide-content { background-image: url("../img/careers/Offices_Alex-1200@2x.png"); } } @media (min-width: 1080px) { #careers #details #employees .image-slider .slides .slide[data-index="4"] > .slide-content { background-image: url("../img/careers/Offices_Trevor-1200.png"); } } @media (min-width: 1080px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-device-pixel-ratio: 1.5), (min-width: 1080px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="4"] > .slide-content { background-image: url("../img/careers/Offices_Trevor-1200@2x.png"); } } @media (min-width: 1080px) { #careers #details #employees .image-slider .slides .slide[data-index="5"] > .slide-content { background-image: url("../img/careers/Offices_Joe-1200.png"); } } @media (min-width: 1080px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-device-pixel-ratio: 1.5), (min-width: 1080px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="5"] > .slide-content { background-image: url("../img/careers/Offices_Joe-1200@2x.png"); } } @media (min-width: 1080px) { #careers #details #employees .image-slider .slides .slide[data-index="6"] > .slide-content { background-image: url("../img/careers/Offices_Josh-1200.png"); } } @media (min-width: 1080px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-device-pixel-ratio: 1.5), (min-width: 1080px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="6"] > .slide-content { background-image: url("../img/careers/Offices_Josh-1200@2x.png"); } } @media (min-width: 1080px) { #careers #details #employees .image-slider .slides .slide[data-index="7"] > .slide-content { background-image: url("../img/careers/Offices_Brian-1200.png"); } } @media (min-width: 1080px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-device-pixel-ratio: 1.5), (min-width: 1080px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="7"] > .slide-content { background-image: url("../img/careers/Offices_Brian-1200@2x.png"); } } @media (min-width: 1080px) { #careers #details #employees .image-slider .slides .slide[data-index="8"] > .slide-content { background-image: url("../img/careers/Offices_Jay-1200.png"); } } @media (min-width: 1080px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-device-pixel-ratio: 1.5), (min-width: 1080px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-resolution: 2dppx) { #careers #details #employees .image-slider .slides .slide[data-index="8"] > .slide-content { background-image: url("../img/careers/Offices_Jay-1200@2x.png"); } } @media (min-width: 1080px) { #careers #details #employees .image-slider.image-slider-controls .play-pause { right: 40px; } #careers #details #be-comfortable { margin-bottom: 50px; } #careers #details #be-comfortable #game-day-image { background-image: url("../img/careers/GameDay_Fire-1200.png"); width: 483px; height: 363px; } } @media (min-width: 1080px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-device-pixel-ratio: 1.5), (min-width: 1080px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-resolution: 2dppx) { #careers #details #be-comfortable #game-day-image { background-image: url("../img/careers/GameDay_Fire-1200@2x.png"); } } @media (min-width: 1080px) { #careers #details #be-comfortable #game-day-image .caption { top: 342px; } #careers #details #be-comfortable #be-comfortable-text { width: 510px; } #careers #benefits { padding-top: 36px; padding-bottom: 0; } #careers #benefits h2 { font-size: 70px; line-height: 88px; } #careers #benefits ul { width: 906px; margin: 0 auto; } #careers #benefits li { width: 230px; margin-left: 36px; margin-right: 36px; } #careers #hiring { padding-top: 44px; padding-bottom: 10px; } #careers #hiring h2 { font-size: 70px; line-height: 76px; } #careers #hiring ul { width: 1000px; } } /*****************************************/ /************ Career Listings ************/ /*****************************************/ #career-listing { background: #fff; padding-top: 80px; padding-bottom: 210px; } #career-listing .footer a, #career-listing .footer .copyright { color: #4b4c4e; } #career-listing .footer .icon { fill: #4b4c4e; } #career-listing section h1 { font-size: 36px; line-height: 37px; color: #4b4c4e; text-align: center; } #career-listing section h2 { font-family: "DINWeb", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 20px; line-height: 28px; color: #959595; text-transform: none; margin-bottom: 30px; } #career-listing section h3 { font-family: "DINWeb", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 14px; color: #e45d50; text-transform: uppercase; margin-top: 50px; margin-bottom: 20px; } #career-listing section p { font-size: 16px; line-height: 28px; color: #4b4c4e; } #career-listing section ul { list-style: disc; margin-left: 15px; } #career-listing section li { font-size: 14px; line-height: 20px; color: #4b4c4e; margin-bottom: 20px; } #career-listing section .button { display: block; margin: 50px auto 0 auto; font-size: 18px; line-height: 44px; font-weight: 400; letter-spacing: .25px; color: #fff; background-color: #e45d50; height: 46px; width: 260px; border-radius: 6px; } #career-listing section img { display: block; width: 320px; height: auto; margin: 0 auto 10px auto; } #career-listing section #benefits { margin-top: 50px; } /*================================================== #Media Queries: @media (min-width: 480px) @media (min-width: 768px) @media (min-width: 1080px) ================================================== */ /*====================================================================*/ /*================= landscape phone size and up ====================*/ /*====================================================================*/ @media (min-width: 480px) { #career-listing section img { width: 480px; } #career-listing section h3 { margin-top: 33px; } } /*====================================================================*/ /*=================== portrait tablet size and up ==================*/ /*====================================================================*/ @media (min-width: 768px) { #career-listing { padding-top: 120px; padding-bottom: 166px; } #career-listing section h1 { font-size: 90px; line-height: 100px; margin: 0; } #career-listing section h2 { font-size: 32px; line-height: 32px; margin-top: 50px; margin-bottom: 25px; } #career-listing section h3 { font-size: 18px; line-height: 32px; letter-spacing: .25px; margin-top: 60px; margin-bottom: 14px; } #career-listing section p { font-size: 18px; line-height: 32px; letter-spacing: .25px; } #career-listing section li { font-size: 16px; line-height: 22px; margin-bottom: 22px; } #career-listing section img { width: 768px; margin-bottom: 10px; } #career-listing section .button { font-size: 24px; line-height: 56px; width: 312px; height: 54px; margin-top: 166px; } #career-listing section .container { width: 597px; } #career-listing section #benefits { margin-top: 60px; margin-bottom: 34px; } } /*====================================================================*/ /*================= landscape tablet size and up ===================*/ /*====================================================================*/ @media (min-width: 1080px) { #career-listing { padding-bottom: 236px; } #career-listing section h2 { margin-top: 72px; margin-bottom: 35px; } #career-listing section h3 { margin-top: 50px; } #career-listing section img { width: 1000px; margin-bottom: 20px; } #career-listing section .button { margin-top: 96px; } #career-listing section .container { width: 656px; } } /****************************************/ /************ request page ***********/ /****************************************/ #request { background-color: #fff; } #request section#header { overflow: hidden; margin-bottom: 32px; } #request section#header #content { padding-top: 382px; } #request section#header h1 { color: #006f7e; font-family: "DINWeb", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 42px; line-height: 42px; font-weight: 400; letter-spacing: -.5px; text-align: center; text-transform: none; margin-bottom: 0; } #request section#header h3 { color: #9a9a9a; font-family: "DINWeb", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 18px; line-height: 20px; letter-spacing: -.35px; text-align: center; margin-bottom: 26px; } #request section#header .solid-btn { background-color: #006f7e; font-size: 20px; font-weight: 400; line-height: 52px; margin: 0 auto 62px auto; width: 260px; height: 46px; } #request section#header .video-btn { width: 310px; height: 176px; margin: 14px 0 14px -15px; box-shadow: 0px 2px 7px 2px rgba(0, 0, 0, 0.2); background-size: 310px 176px; background-repeat: no-repeat; } #request section#header .video-btn#video1 { background-image: url("../img/products/request/Video-Thumbnail1-mobile.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #request section#header .video-btn#video1 { background-image: url("../img/products/request/Video-Thumbnail1-mobile@2x.png"); } } #request section#header .video-btn#video2 { background-image: url("../img/products/request/Video-Thumbnail2-mobile.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #request section#header .video-btn#video2 { background-image: url("../img/products/request/Video-Thumbnail2-mobile@2x.png"); } } #request section#header .video-play-button { position: relative; top: 44px; width: 88px; height: 88px; opacity: .7; margin: 0 auto; background-image: url("../img/products/request/PlayIcon-mobile.png"); background-size: 88px 88px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #request section#header .video-play-button { background-image: url("../img/products/request/PlayIcon-mobile@2x.png"); } } #request section#header .video-play-button:hover { border: 0; opacity: 1; cursor: pointer; } #request section#header .modal-dialog .modal-content { height: 152px; } #request section#header .watch-img-container { position: absolute; top: 6px; width: 331px; height: 416px; left: 50%; margin-left: -90px; } #request section#header .watch-img { width: 100%; height: 100%; background-image: url("../img/products/request/Watch-320.png"); background-repeat: no-repeat; background-position: 0 0; background-size: 331px 416px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #request section#header .watch-img { background-image: url("../img/products/request/Watch-320@2x.png"); } } #request section#header #watch-gif { width: 120px; height: 173px; position: absolute; z-index: 100; top: 122px; left: 15px; background-image: url("../img/products/request/videos/WatchDemo.gif"); background-size: contain; } #request section#features { padding: 8px 0 20px 0; } #request section#features .feature { background-repeat: no-repeat; background-position: center top; background-size: 54px 54px; text-align: center; } #request section#features .feature h4 { color: #4b4c4e; font-size: 18px; font-weight: 500; line-height: 24px; padding-top: 60px; margin-bottom: 0; } #request section#features .feature p { color: #4b4c4e; font-weight: 400; font-size: 14px; line-height: 20px; margin-bottom: 50px; } #request section#features .feature#platforms { background-image: url("../img/products/request/Icon-platforms.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #request section#features .feature#platforms { background-image: url("../img/products/request/Icon-platforms@2x.png"); } } #request section#features .feature#notifications { background-image: url("../img/products/request/Icon-notifications.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #request section#features .feature#notifications { background-image: url("../img/products/request/Icon-notifications@2x.png"); } } #request section#features .feature#dictation { background-image: url("../img/products/request/Icon-dictation.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #request section#features .feature#dictation { background-image: url("../img/products/request/Icon-dictation@2x.png"); } } #request section#links { color: #666; font-size: 14px; text-align: center; margin-bottom: 60px; } #request section#links a { color: #006f7e; text-decoration: underline; margin: 0 6px; } #request section#keep-in-touch { margin-bottom: 20px; } #request section#keep-in-touch .container { width: 280px; text-align: center; } #request section#keep-in-touch h3 { color: #666; font-family: "DINWeb", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 18px; line-height: 20px; letter-spacing: -.35px; margin-bottom: 14px; } #request section#keep-in-touch .social-btn { display: inline-block; float: left; color: #fff; font-size: 16px; line-height: 42px; background-color: #666; border-radius: 4px; height: 40px; margin: 6px auto; } #request section#keep-in-touch .social-btn .img-icon, #request section#keep-in-touch .social-btn .text { position: relative; } #request section#keep-in-touch .social-btn .icon { fill: #fff; } #request section#keep-in-touch #facebook-btn { padding: 0 8px 0 0; margin-right: 4px; } #request section#keep-in-touch #facebook-btn .img-icon { top: 3px; } #request section#keep-in-touch #facebook-btn .text { top: -6px; left: -4px; } #request section#keep-in-touch #twitter-btn { padding: 0 14px 0 10px; } #request section#keep-in-touch #twitter-btn .img-icon { top: 4px; } #request section#keep-in-touch #twitter-btn .text { top: -6px; left: 4px; } #request .footer a, #request .footer .copyright { color: #666; } #request .footer .icon { fill: #666; } @media (min-width: 480px) { /*****************************************/ /********** request page > 480 *********/ /*****************************************/ #request section#header .video-btn { margin-left: 55px; } #request section#header .modal-dialog .modal-content { height: 231px; } } @media (min-width: 768px) { /*****************************************/ /********** request page > 768 *********/ /*****************************************/ #request { overflow-x: hidden; height: 916px; } #request section#header #content { padding-top: 140px; width: 340px; height: 500px; } #request section#header h1 { font-size: 60px; line-height: 62px; margin-top: 0; } #request section#header h3 { font-size: 22px; line-height: 38px; } #request section#header .video-btn { width: 155px; height: 88px; margin: 0 5px; float: left; box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.2); background-size: 155px 88px; } #request section#header .video-btn#video1 { background-image: url("../img/products/request/Video-Thumbnail1.png"); } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #request section#header .video-btn#video1 { background-image: url("../img/products/request/Video-Thumbnail1@2x.png"); } } @media (min-width: 768px) { #request section#header .video-btn#video2 { background-image: url("../img/products/request/Video-Thumbnail2.png"); } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #request section#header .video-btn#video2 { background-image: url("../img/products/request/Video-Thumbnail2@2x.png"); } } @media (min-width: 768px) { #request section#header .video-play-button { top: 23px; width: 42px; height: 42px; background-image: url("../img/products/request/PlayIcon.png"); background-size: 42px 42px; } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #request section#header .video-play-button { background-image: url("../img/products/request/PlayIcon@2x.png"); } } @media (min-width: 768px) { #request section#header .modal-dialog .modal-content { height: 400px; } #request section#header .watch-img-container { top: -130px; width: 702px; height: 883px; transform: scale(0.7, 0.7); -webkit-transform: scale(0.7, 0.7); } #request section#header .watch-img { background-image: url("../img/products/request/Watch-1200.png"); background-size: 702px 883px; } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #request section#header .watch-img { background-image: url("../img/products/request/Watch-1200@2x.png"); } } @media (min-width: 768px) { #request section#header video { width: 254px; height: 366px; position: absolute; z-index: 100; top: 264px; left: 30px; } #request section#features { position: absolute; top: 610px; width: 100%; } #request section#features .feature { background-size: 40px 40px; background-position: left top; width: 240px; display: inline-block; text-align: left; vertical-align: top; } #request section#features .feature h4, #request section#features .feature p { font-size: 13px; line-height: 20px; letter-spacing: -.4px; padding-top: 0; padding-left: 48px; } #request section#features .feature#notifications { margin-left: 20px; width: 230px; } #request section#links { position: absolute; top: 748px; width: 100%; } #request section#keep-in-touch { position: absolute; top: 818px; width: 100%; } #request section#keep-in-touch .container { width: 744px; } #request section#keep-in-touch h3 { font-size: 21px; display: inline; padding-right: 20px; position: relative; top: -2px; } #request section#keep-in-touch .social-btn { font-size: 21px; margin: 8px auto; float: none; } #request section#keep-in-touch #facebook-btn { padding: 0 12px 0 2px; } #request section#keep-in-touch #facebook-btn .text { left: 0; } #request section#keep-in-touch #twitter-btn { padding: 0 16px 0 11px; } } @media (min-width: 1080px) { /**************************************************/ /********** request page - largest size *********/ /**************************************************/ #request { height: 1212px; } #request section#header #content { padding-top: 195px; height: 650px; } #request section#header h1 { margin-left: -4px; } #request section#header .solid-btn { font-size: 24px; line-height: 65px; width: 325px; height: 62px; margin-bottom: 0px; } #request section#header .available { padding-bottom: 70px; text-align: center; width: 316px; } #request section#header .available span { color: #9a9a9a; font-size: 15px; line-height: 24px; letter-spacing: .4px; } #request section#header .available #apple { position: relative; top: 3px; } #request section#header .available #apple .icon { fill: #9a9a9a; } #request section#header .modal-dialog .modal-content { height: 512px; } #request section#header .watch-img-container { top: -46px; margin-left: 6px; transform: scale(1, 1); -webkit-transform: scale(1, 1); } #request section#header h3 { letter-spacing: 0; } #request section#features { top: 814px; } #request section#features .container { margin-left: 100px; } #request section#features .feature { width: 300px; background-size: 54px 54px; } #request section#features .feature h4, #request section#features .feature p { font-size: 14px; letter-spacing: 0; padding-left: 74px; } #request section#features .feature#notifications { margin-left: 40px; width: 294px; } #request section#features .feature#dictation { margin-left: 40px; } #request section#links { top: 988px; font-size: 16px; } #request section#keep-in-touch { top: 1060px; } } /***********************************/ /********** Training pages *********/ /***********************************/ #training { background-color: #fffaf3; } #training .footer a, #training .footer .copyright { color: #7b7b7b; } #training .footer .icon { fill: #7b7b7b; } #training .button-wrapper { text-align: center; } #training .button { background-color: #e45d50; font-size: 16px; line-height: 52px; height: 50px; width: 280px; } #training .img-wrapper { text-align: center; } #training .training-nav { padding-top: 80px; } #training .training-nav li { text-transform: uppercase; text-align: center; margin: 0; } #training .training-nav li a { color: #7b7b7b; font-size: 18px; line-height: 38px; font-weight: 700; letter-spacing: .5px; } #training .training-nav li a:hover { border: none; } #training .training-nav li.active a { color: #000; border-bottom: 2px solid #000; } #training .card-wrapper { background-color: #fff; padding: 30px 26px 38px 26px; -webkit-box-sizing: border-box; box-sizing: border-box; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.15); margin-bottom: 20px; text-align: center; } #training .card-wrapper img { margin-bottom: 16px; } #training .card-wrapper .course-desc { color: #353535; font-size: 14px; line-height: 18px; text-align: center; } #training .card-wrapper .button { width: 220px; } #training .more-trigger, #training .less-trigger { color: #e45d50; opacity: 100; -webkit-transition: opacity .25s ease; transition: opacity .25s ease; } #training .more-trigger.hidden, #training .less-trigger.hidden { opacity: 0; cursor: default; } #training .more-trigger:hover, #training .less-trigger:hover { text-decoration: none; } #training .more-info { display: none; } /* Main Training Page */ #training #main-training-page section h1 { color: #fff; font-size: 56px; line-height: 63px; letter-spacing: -.25px; margin-bottom: 12px; text-align: center; } #training #main-training-page section h2 { color: #e45d50; font-size: 37px; line-height: 34px; letter-spacing: 1px; text-transform: none; text-align: center; margin-bottom: 6px; } #training #main-training-page section p { font-size: 14px; line-height: 17px; color: #353535; text-align: center; } #training #main-training-page #header { box-sizing: border-box; background-color: #000; background-image: url("../img/training/background-main-320.jpg"); background-repeat: no-repeat; background-position: center top; background-size: 480px auto; height: 276px; padding: 100px 0 0 0; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #training #main-training-page #header { background-image: url("../img/training/background-main-320@2x.jpg"); } } #training #main-training-page #cards { margin-top: -34px; } #training #main-training-page .card-wrapper { margin-bottom: 10px; } #training #main-training-page .card-wrapper .main-training { padding-top: 164px; background-repeat: no-repeat; background-position: center 0; background-size: 90px auto; } #training #main-training-page .card-wrapper #training-card { background-image: url("../img/training/Main-Training-OnsiteTraining.png"); background-size: 230px auto; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #training #main-training-page .card-wrapper #training-card { background-image: url("../img/training/Main-Training-OnsiteTraining@2x.png"); } } #training #main-training-page .card-wrapper #code-review-card { background-image: url("../img/training/Main-Training-CodeReview.png"); background-size: 180px auto; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #training #main-training-page .card-wrapper #code-review-card { background-image: url("../img/training/Main-Training-CodeReview@2x.png"); } } #training #main-training-page .card-wrapper #design-review-card { background-image: url("../img/training/Main-Training-DesignReview.png"); background-size: 210px auto; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #training #main-training-page .card-wrapper #design-review-card { background-image: url("../img/training/Main-Training-DesignReview@2x.png"); } } /* Onsite Training Page */ #training #onsite-training-page { background-image: url("../img/training/Spotlight-BG-480.png"); background-position: center top; background-repeat: no-repeat; background-size: 768px auto; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #training #onsite-training-page { background-image: url("../img/training/Spotlight-BG-480@2x.png"); } } #training #onsite-training-page section h2 { color: #e45d50; font-size: 52px; letter-spacing: -1px; text-transform: none; text-align: center; margin: 24px 0 10px 0; } #training #onsite-training-page section h3 { color: #e45d50; font-size: 46px; line-height: 50px; letter-spacing: -1px; margin: 58px 0 14px 0; } #training #onsite-training-page section h4 { color: #e45d50; font-size: 22px; line-height: 26px; text-align: center; margin-bottom: 10px; } #training #onsite-training-page section p { color: #353535; text-align: left; font-size: 16px; line-height: 24px; letter-spacing: .1px; margin-bottom: 24px; } #training #onsite-training-page #sm-onsite-training-img { margin: 22px auto; width: 280px; height: auto; } #training #onsite-training-page #lg-onsite-training-img { display: none; } /* Card & Design Review Page */ #training #code-design-review-page h1 { color: #e45d50; font-size: 56px; line-height: 50px; margin-bottom: 2px; text-align: center; } #training #code-design-review-page p.description { color: #545454; font-family: 'Archer SSm A', 'Archer SSm B', serif; font-size: 18px; line-height: 22px; letter-spacing: -.1px; font-style: italic; text-align: center; margin-bottom: 20px; } #training #code-design-review-page .card-wrapper { background-repeat: no-repeat; background-size: 220px auto; background-position: center 34px; margin-bottom: 20px; } #training #code-design-review-page .card-wrapper#code-review { padding-top: 234px; background-image: url("../img/training/Review-CodeReview.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #training #code-design-review-page .card-wrapper#code-review { background-image: url("../img/training/Review-CodeReview@2x.png"); } } #training #code-design-review-page .card-wrapper#design-review { padding-top: 210px; background-image: url("../img/training/Review-DesignReview.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #training #code-design-review-page .card-wrapper#design-review { background-image: url("../img/training/Review-DesignReview@2x.png"); } } #training #code-design-review-page .card-wrapper#code-design-review { padding-top: 220px; background-image: url("../img/training/Review-CodeDesignReview.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #training #code-design-review-page .card-wrapper#code-design-review { background-image: url("../img/training/Review-CodeDesignReview@2x.png"); } } #training #code-design-review-page .card-wrapper#code-design-review h3 { font-size: 24px; line-height: 28px; font-weight: 500; text-transform: uppercase; color: #e45d50; margin: 10px 0 0 0; } #training #code-design-review-page .card-wrapper h2 { color: #e45d50; font-size: 37px; line-height: 34px; letter-spacing: .5px; text-transform: none; text-align: center; margin-bottom: 6px; } #training #code-design-review-page .card-wrapper p, #training #code-design-review-page .card-wrapper ul li { font-size: 16px; line-height: 24px; text-align: left; letter-spacing: .25px; } #training #code-design-review-page .card-wrapper p.available { font-size: 14px; font-style: italic; text-align: center; } #training #code-design-review-page .card-wrapper .review-list { list-style: disc; margin-left: 16px; } #training #code-design-review-page .card-wrapper .review-list li { margin-bottom: 0; } #training #code-design-review-page .card-wrapper #chart { background-image: url("../img/training/Reviews-Icon-Process-Stacked.png"); background-repeat: no-repeat; background-size: 82px auto; background-position: left top; margin: 20px 0 20px 0; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { #training #code-design-review-page .card-wrapper #chart { background-image: url("../img/training/Reviews-Icon-Process-Stacked@2x.png"); } } #training #code-design-review-page .card-wrapper #chart li { color: #353535; font-size: 14px; line-height: 16px; font-weight: 500; padding: 16px 0 50px 110px; margin: 0; } #training #code-design-review-page .card-wrapper .button { margin: 16px 0; } /* Course Page */ #training #course-page section h1 { color: #e45d50; font-size: 52px; line-height: 52px; letter-spacing: -.25px; margin: 30px 0 6px 0; } #training #course-page section h2 { color: #7b7b7b; font-size: 28px; line-height: 26px; letter-spacing: -.25px; text-transform: none; margin-top: 32px; } #training #course-page section h3 { color: #e45d50; font-size: 46px; line-height: 50px; letter-spacing: -1px; margin: 72px 0 14px 0; } #training #course-page section h4 { color: #e45d50; font-size: 22px; line-height: 26px; text-align: center; margin-bottom: 12px; } #training #course-page .course #course-img { width: 130px; height: auto; margin: 2px 0 26px 0; } #training #course-page .course .course-info p { color: #353535; font-size: 16px; line-height: 20px; letter-spacing: -.25px; margin: 0; } #training #course-page .course .course-info p strong { font-weight: 500; } #training #course-page .course .course-info .about-instructor h2 { margin-top: 50px; } #training #course-page .course .course-info .about-instructor #instructor-img { width: 110px; height: auto; margin: 4px 0; } #training #course-page .course .about-class p { color: #353535; font-size: 16px; line-height: 24px; letter-spacing: .25px; margin-bottom: 20px; } #training #course-page .course .about-class .social .icon { fill: #7b7b7b; } #training #course-page .course .about-class .social li { display: inline-block; } #training #course-page .course .about-class .social svg { height: 20px; } footer { color: #fff; background-color: #fffaf3; } /*================================================== #Media Queries: @media (min-width: 480px) @media (min-width: 768px) @media (min-width: 1080px) ================================================== */ /*====================================================================*/ /*================= landscape phone size and up ====================*/ /*====================================================================*/ @media (min-width: 480px) { #training #main-training-page #header { background-image: url("../img/training/background-main-480.jpg"); background-size: 768px auto; height: 325px; padding-top: 112px; } } @media (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-device-pixel-ratio: 1.5), (min-width: 480px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-resolution: 2dppx) { #training #main-training-page #header { background-image: url("../img/training/background-main-480@2x.jpg"); } } @media (min-width: 480px) { #training #main-training-page #cards { width: 320px; } #training #code-design-review-page .card-wrapper p.available { font-size: 16px; margin-top: 10px; } #training #code-design-review-page .card-wrapper #chart { width: 228px; margin: 0 auto; } } /*====================================================================*/ /*=================== portrait tablet size and up ==================*/ /*====================================================================*/ @media (min-width: 768px) { #training .training-nav { padding-top: 90px; } #training .training-nav ul { text-align: center; margin-bottom: 58px; } #training .training-nav li { display: inline; margin: 0 16px; } #training .training-nav li a { letter-spacing: -.25px; } #training .training-nav li.active a { color: #000; border-bottom: 2px solid #000; } #training #main-training-page section h1 { font-size: 70px; line-height: 76px; letter-spacing: -.25px; } #training #main-training-page section h2 { font-size: 36px; margin-bottom: 14px; } #training #main-training-page #header { background-image: url("../img/training/background-main-768.jpg"); background-size: 1200px auto; height: 570px; padding-top: 128px; } } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) { #training #main-training-page #header { background-image: url("../img/training/background-main-768@2x.jpg"); } } @media (min-width: 768px) { #training #main-training-page #cards { width: 460px; margin-top: -254px; } #training #onsite-training-page section h2 { font-size: 88px; line-height: 76px; font-weight: 400; letter-spacing: -1px; margin-top: 60px; } #training #onsite-training-page section h3 { font-size: 56px; margin-top: 80px; } #training #onsite-training-page .button { width: 420px; height: 65px; font-size: 24px; line-height: 70px; font-weight: 400; } #training #onsite-training-page #sm-onsite-training-img { margin: 10px auto; width: 300px; } #training #course-page section h1 { font-size: 67px; line-height: 68px; font-weight: 400; } #training #course-page section h2 { font-size: 34px; letter-spacing: .25px; } #training #course-page section h3 { font-size: 56px; } #training #course-page .course { box-sizing: border-box; padding-top: 0; padding-left: 180px; background-position: 26px top; } #training #course-page .course .course-info .container { width: 564px; } #training #course-page .course .course-info p { font-size: 18px; line-height: 26px; } #training #course-page .course .about-class p { line-height: 24px; } #training #course-page .course .button-wrapper { text-align: left; } #training #course-page .course .button-wrapper .button { width: 420px; height: 65px; font-size: 24px; line-height: 70px; font-weight: 400; } #training #course-page .course #course-img { position: absolute; left: 12px; } #training #course-page .course .about-instructor #instructor-img { position: absolute; left: 0; } #training #course-page .course .about-instructor p { width: 420px; padding-left: 142px; font-size: 16px; line-height: 24px; } #training #course-page .course .about-instructor .social { padding-left: 142px; } #training #course-page .card-wrapper { display: inline-block; margin-right: 10px; } #training #code-design-review-page h1 { font-size: 64px; line-height: 68px; } #training #code-design-review-page p.description { font-size: 24px; line-height: 32px; width: 500px; margin: 20px auto; } #training #code-design-review-page .card-wrapper p { line-height: 20px; } #training #code-design-review-page .card-wrapper h2 { font-size: 54px; margin-bottom: 10px; } #training #code-design-review-page .card-wrapper .button { width: 300px; height: 66px; font-size: 24px; line-height: 66px; } #training #code-design-review-page .card-wrapper#code-design-review h3 { font-size: 30px; line-height: 36px; margin: 22px 0 8px 0; } #training #code-design-review-page .card-wrapper p.available { margin-top: 20px; } } /*====================================================================*/ /*================= landscape tablet size and up ===================*/ /*====================================================================*/ @media (min-width: 1080px) { #training .card-wrapper { padding-top: 50px; padding-bottom: 50px; width: 328px; height: 480px; vertical-align: top; } #training .card-wrapper:last-child { margin-right: 0; } #training .more-trigger, #training .less-trigger { display: none; } #training .more-info { display: inline-block; } #training #main-training-page #header { background-image: url("../img/training/background-main-1200.jpg"); background-size: 1800px auto; height: 514px; padding-top: 130px; } } @media (min-width: 1080px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-device-pixel-ratio: 1.5), (min-width: 1080px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-resolution: 2dppx) { #training #main-training-page #header { background-image: url("../img/training/background-main-1200@2x.jpg"); } } @media (min-width: 1080px) { #training #main-training-page #cards { width: 1004px; margin-top: -232px; } #training #main-training-page .card-wrapper { display: inline-block; width: 328px; margin-right: 0px; } #training #onsite-training-page { background: none; } #training #onsite-training-page section #spotlight-bg { z-index: -1; position: absolute; top: 0; right: -50px; width: 768px; height: 800px; background-image: url("../img/training/Spotlight-BG-480.png"); background-repeat: no-repeat; background-size: 640px auto; background-position: right top; } } @media (min-width: 1080px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-device-pixel-ratio: 1.5), (min-width: 1080px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-resolution: 2dppx) { #training #onsite-training-page section #spotlight-bg { background-image: url("../img/training/Spotlight-BG-480@2x.png"); } } @media (min-width: 1080px) { #training #onsite-training-page section h2 { text-align: left; margin-top: 0; } #training #onsite-training-page section p { font-weight: 500; } #training #onsite-training-page section .button-wrapper { text-align: left; } #training #onsite-training-page #onsite-training { width: 430px; display: inline-block; } #training #onsite-training-page #onsite-training #sm-onsite-training-img { display: none; } #training #onsite-training-page #lg-onsite-training-img { display: inline-block; margin-left: 45px; width: 522px; height: auto; } #training #onsite-training-page #courses { width: 1032px; margin: 0 auto; } #training #onsite-training-page .card-wrapper { display: inline-block; margin-right: 10px; } #training #code-design-review-page h1 { font-size: 88px; line-height: 76px; letter-spacing: -1.5px; margin-bottom: 20px; } #training #code-design-review-page p.description { color: #7a7a7a; font-size: 26px; line-height: 36px; letter-spacing: -.5px; width: 470px; margin: 0 auto 44px auto; } #training #code-design-review-page .card-wrapper { width: 1004px; height: auto; margin: 0 auto 20px auto; background-size: 290px; background-position: center 60px; letter-spacing: -1px; text-align: left; } #training #code-design-review-page .card-wrapper#code-review { padding-top: 334px; } #training #code-design-review-page .card-wrapper#design-review { padding-top: 334px; } #training #code-design-review-page .card-wrapper#code-design-review { padding-top: 334px; } #training #code-design-review-page .card-wrapper h2 { font-size: 70px; line-height: 74px; margin-top: 10px; margin-bottom: 20px; } #training #code-design-review-page .card-wrapper .button { width: 355px; margin-top: 4px; } #training #code-design-review-page .card-wrapper #chart { background-image: url("../img/training/Reviews-Icon-Process.png"); background-size: 674px 82px; background-position: center top; width: 780px; margin: 0 auto 20px auto; } } @media (min-width: 1080px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-device-pixel-ratio: 1.5), (min-width: 1080px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-resolution: 2dppx) { #training #code-design-review-page .card-wrapper #chart { background-image: url("../img/training/Reviews-Icon-Process@2x.png"); } } @media (min-width: 1080px) { #training #code-design-review-page .card-wrapper #chart li { width: 190px; display: inline-block; text-align: center; padding: 100px 0 0 0; } #training #code-design-review-page .card-wrapper .review-list li { line-height: 20px; } #training #code-design-review-page #code-review .main-info, #training #code-design-review-page #code-review #in-addition, #training #code-design-review-page #code-review .review-list { width: 600px; margin: 26px auto 20px auto; } #training #code-design-review-page #code-review .review-list { padding-left: 40px; margin-top: 10px; } #training #code-design-review-page #code-review #in-addition { text-align: center; margin-top: 40px; } #training #code-design-review-page #code-review .more-info { width: 100%; } #training #code-design-review-page #design-review .main-info, #training #code-design-review-page #design-review .review-list { width: 600px; margin: 0 auto 20px auto; } #training #code-design-review-page #design-review .more-info { width: 100%; } #training #code-design-review-page #design-review .more-info p { width: 600px; margin: 0 auto 20px auto; } #training #code-design-review-page #design-review .more-info .review-list { padding-left: 40px; } #training #code-design-review-page #code-design-review .main-info { width: 820px; margin-left: auto; margin-right: auto; margin-bottom: 20px; } #training #code-design-review-page #code-design-review .more-info { margin-left: 66px; width: 820px; } #training #code-design-review-page #code-design-review .more-info div { display: inline-block; width: 374px; vertical-align: top; } #training #code-design-review-page #code-design-review .more-info #design-review-section { margin-left: 50px; margin-bottom: 2px; } #training #code-design-review-page #code-design-review .more-info #at-the-end { width: 620px; text-align: center; margin: 10px auto 50px auto; } #training #course-page section h1 { padding-top: 14px; font-size: 88px; line-height: 86px; font-weight: 400; letter-spacing: -2px; } #training #course-page section h2 { font-size: 34px; letter-spacing: .25px; margin-top: 44px; } #training #course-page section h3 { font-size: 56px; } #training #course-page .course { padding-left: 280px; } #training #course-page .course .course-info .container { width: 752px; } #training #course-page .course .course-info .about-class p { font-size: 18px; line-height: 24px; } #training #course-page .course .course-info #course-img { left: 20px; width: 224px; } #training #course-page .course .course-info .about-instructor p { font-size: 16px; line-height: 24px; width: 550px; padding-left: 150px; } #training #course-page .course .course-info .about-instructor #instructor-img { width: 133px; } #training #course-page .course .course-info .about-instructor .social { padding-left: 150px; } #training #course-page .course .about-class p { width: 690px; font-size: 18px; line-height: 24px; } #training #course-page .course .button-wrapper .button { width: 480px; } #training #course-page .card-wrapper { display: inline-block; margin-right: 10px; } }