body { font-family: avenir, 'avenir next', helvetica, arial, sans-serif; font-size: 16px; line-height: 24px; color:#5d5452; } a { color: #DB3F29; text-decoration: none; } a:hover { text-decoration: underline; } p { margin-bottom: 30px; } #header { width: 100%; height: 515px; background: #483E3B url("images/header.jpg") no-repeat center top; background-size: cover; text-align: center; } #logo { width: 199px; height: 21px; margin-top: 40px; margin-bottom: 70px; } h1 { color:#fff; font-size: 60px; font-weight: bold; margin-bottom: 30px; line-height: 1.15; text-shadow: 0 0 25px rgba(0,0,0,0.40); } h2 { color: #e6e1de; font-size: 25px; max-width: 580px; margin: 0 auto; line-height: 35px; margin-bottom: 60px; padding:0 20px; text-shadow: 0 0 15px rgba(0,0,0,0.40); } .button { background: #DD3E1F; font-weight: bold; color:#fff; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; padding:16px 35px; margin: 4px; border-radius: 40px; -webkit-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; -ms-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out; transition: all 0.1s ease-out; } .button:hover { background: #ff5f20; box-shadow: 0px 3px 10px rgba(0,0,0,0.3); padding: 20px 39px; margin: 0; text-decoration: none; } .secondary-button { background-color: #2B2522; } .secondary-button:hover { background-color: #151210; } #download .secondary-button { background: transparent; border: 3px solid #dd3e1f; color: #dd3e1f; padding: 14px 35px; } #download .secondary-button:hover { background: #FC602F; border-color: #FC602F; color: #fff; padding: 18px 39px; } #main-container { overflow: hidden; padding:0 40px; } #main { position: relative; max-width: 970px; min-height: 615px; margin: 100px auto; } #app { position: absolute; left: 50%; top:-10px; } #app img { display: none; width: 965px; height: 616px; } #app a { position: absolute; bottom:25px; left:32px; font-size: 12px; color: #c2bcba; text-decoration: none; } #app a:hover { text-decoration: underline; } #credits-content { display: none; } #credits-content ul { list-style: disc; padding: 20px 40px; } #credits-content ul a { color: #DB3F29; text-decoration: none; } #credits-content ul a:hover { text-decoration: underline; } #vertical-features.feature-container { overflow: auto; } #vertical-features { min-height: 630px; } #main .feature-container { width: 45%; } #main .feature { padding-left: 55px; background-size: 36px 36px; background-repeat: no-repeat; margin-bottom: 40px; } #main #horizontal-features .feature-container { float: left; width: 46.8%; margin-right: 6.4%; } #main #horizontal-features .feature-container:last-child { margin-right: 0; } #feature-horizontal .feature { float: left; } #perfected { background-image: url("images/perfected@2x.png"); } #layout { background-image: url("images/layout@2x.png"); } #speed { background-image: url("images/speed@2x.png"); } #capture { background-image: url("images/capture@2x.png"); } #dribbble { background-image: url("images/dribbble@2x.png"); } h3 { font-weight: bold; font-size: 16px; color: #dd3e1f; letter-spacing: 1px; text-transform: uppercase; } #use-cases { clear: both; } .use-case { width: 31.290322581%; margin-right: 3.0645161285%; float: left; height: 555px; overflow: hidden; margin-top: 40px; margin-bottom: 75px; } .use-case:last-child { margin-right: 0; } #designer { background-color: #093034; color: #B6C1C2; } #photographer { background-color: #C4AA62; color: #EDE6D0; } #developer { background-color: #4A4040; color:#C9C6C6; } .use-case-photo { position: relative; background-size: cover; background-position: 0% 25%; } .use-case p { padding: 10px 20px 0; } .use-case-photo img { width: 100%; } .use-case h3 { font-size: 30px; line-height: 35px; letter-spacing: 0; text-transform: none; font-weight: normal; color: #fff; margin-bottom: 30px; text-shadow: 0 0 15px rgba(0,0,0,0.3); padding: 0 20px; position: absolute; bottom: 0px; display: none; } .use-case .use-case-photo h3 { display: block; } strong { font-weight: bold; } .secondary-features { clear: both; padding: 0 11.340206186%; } .secondary-features h3 { font-size: 12px; color: #433f3e; } .secondary-features .feature-container { float: left; width: 36.597938144%; margin-right: 4.1237113402%; } .secondary-features .feature-container:last-child { margin-right: 0; } #tags { background-image: url("images/tags@2x.png"); } #migrate { background-image: url("images/migrate@2x.png"); } #files { background-image: url("images/files@2x.png"); } #yosemite { background-image: url("images/yosemite@2x.png"); } #feedback-container { background: #F6F6F6; clear: both; overflow: auto; margin: 30px 0; } #feedback { padding: 70px 140px; max-width: 970px; margin: 0 auto; } #reviews, #tweets { width: 47.93814433%; margin-right: 4.12371134%; float: left; } #tweets { margin-right: 0; } #feedback h3, #team-description h3 { font-size: 30px; line-height: 40px; font-weight: 500; color: #433f3e; letter-spacing: 0; text-transform: none; margin-bottom: 30px; } h4, label { font-weight: bold; font-size: 12px; color: #433f3e; letter-spacing: 1px; text-transform: uppercase; } h5 { font-weight: bold; font-size: 12px; color: #9a9593; margin-bottom: 10px; } #reviews p { margin-bottom: 50px; } .twitter-tweet { margin-bottom: 25px !important; } #download { text-align: center; } #icon { width: 250px; height: 182px; padding: 20px 0px 50px; } #download { padding-bottom: 70px; border-bottom: 1px solid #EBEAE9; } #download h2 { font-size: 45px; color: #433f3e; font-weight: 500; margin-bottom: 20px; line-height: 55px; padding: 0 50px; text-shadow: none; } #download p { width: 100%; max-width: 395px; margin: 0 auto 40px; } #download .button:hover { box-shadow: 0px 3px 10px rgba(0,0,0,0.1); } #press-container { border-bottom: 1px solid #EBEAE9; width: 100%; } #press-inner-container { padding: 50px 20px; } #press { width: 100%; max-width: 970px; margin: 0 auto; overflow: auto; } .press-item { margin-left: 18.81443299%; margin-right: 1.8041237113%; width: 30.412371134%; float: left; text-align: center; font-size: 15px; font-style: italic; color: #aeaaa9; } .press-item:last-child { margin-left: 0; margin-right: 0; } .press-item img { margin-bottom: 10px; } .press-item p { margin-bottom: 0; } #team-container { padding: 50px 20px; } #team { width: 100%; max-width: 970px; margin: 0 auto; overflow: auto; } #team-description, #other-apps { width: 47.93814433%; margin-right: 4.1237113402%; float: left; } #other-apps { margin-right: 0; } #team-description img { width: 307px; height: 114px; } #team ul { width: 307px; margin-top: 5px; font-size: 15px; overflow: auto; } #team ul li { width: 37.133550489%; float: left; text-align: center; } #team ul #gustavs { width: 25.732899022%; } #team-description h3 { clear: both; margin-top: 40px; margin-bottom: 20px; } #team ul a { color: #5d5452; text-decoration: none; } #team ul a:hover { text-decoration: underline; } .other-app { display: block; width: 100%; background: #594A7F url("images/characters.png") no-repeat; background-size: 220px 181px; background-position: right bottom; height: 180px; margin-bottom: 20px; border-radius: 3px; text-decoration: none; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .other-app:hover { text-decoration: none; } .other-app-title { padding-top:35px; font-size: 35px; font-weight: 500; color: #fff; margin-bottom: 20px; } .other-app-title, .other-app-description { padding-left: 45px; display: block; } .other-app-description { font-size: 24px; line-height: 30px; color: #baaddb; } #later { background-image: url("images/later.png"); background-color: #2569F4; } #later .other-app-description { color: #a2bef5; } #characters:hover { background-color: #433861; } #later:hover { background-color: #2058ca; } #team-description h3 { margin-top: 30px; } #footer-container, #copyright-container { background: #F6F6F6; padding: 50px 20px; } #footer, #copyright { max-width: 970px; width: 100%; margin: 0 auto; overflow: auto; } #newsletter, #social { width: 47.93814433%; margin-right: 4.1237113402%; float:left; } #social { margin-right: 0; margin-top:26px; overflow: hidden; } #twitter-widget-1 { margin-right: 5px; } label { width: 100%; display: block; } #newsletter input { box-sizing: border-box; } #email { padding: 10px 16px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-family: avenir, 'avenir next', helvetica, arial, sans-serif; width: 60%; margin-right: 10px; border: 0; border-radius: 3px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } #email:focus { outline: 0; background: #e8e8e7; } #subscribe { width: 110px; border:3px solid #DD3E1F; border-radius: 3px; background: transparent; color:#DD3E1F; font-weight: 500; font-size: 12px; letter-spacing: 1px; font-family: avenir, 'avenir next', helvetica, arial, sans-serif; text-transform: uppercase; height: 36px; position: relative; top:-1px; cursor: pointer; -webkit-transition: all 0.09s ease-out; -moz-transition: all 0.09s ease-out; -ms-transition: all 0.09s ease-out; -o-transition: all 0.09s ease-out; transition: all 0.09s ease-out; } #subscribe:hover { background-color: #DD3E1F; color:#fff; } #copyright-container { border-top: 1px solid #EBEAE9; font-size: 13px; color: #b6b3b2; } #copyright a { color: #b6b3b2; text-decoration: none; } #copyright a:hover { text-decoration: underline; } #copyright ul li { float: left; margin-right: 10px; } #copyright strong { font-weight: 500; } #beta-upgrade-notice { float: right; text-align: right; } #beta-upgrade-notice a { text-decoration: underline; } #copyright p { clear: left; } #faq #header, #extensions #header { height: 100px } #faq-content-container, #extensions-content-container { padding: 20px; } #extensions-content-container { margin-top: 40px; } .extension-preview { text-align: center; margin-top: 70px; } .extension-preview p { margin-bottom: 15px; } .extension-preview img { padding-left: 15px; } #faq-content { width: 100%; max-width: 500px; margin: 0 auto; } #extensions-content { width: 100%; max-width: 860px; margin: 0 auto; } #faq-content h1, #extensions-content h1 { font-size: 30px; color: #433f3e; text-shadow: none; margin-top: 40px; } #faq #faq-content h2, #extensions h2 { text-shadow: none; padding: 0; margin: 0; color:#433f3e; margin-top: 40px; } #extensions h1, #extensions h2 { margin-top: 0; margin-bottom: 0; text-align: center; max-width: 100%; } #extensions h2 { font-size: 20px; margin-bottom: 20px; } .extension { text-align: center; width: 280px; float: left; margin-top: 20px; } .extension img { width: 80px; height: 80px; margin-bottom: 20px; } #faq-content, #extensions-content { padding-bottom: 60px; } #faq strong { font-weight: 500; } #faq .button:hover { padding:16px 35px; box-shadow: none; } hr { border:0; border-top: 1px solid #EBEAE9; margin-bottom: 40px; } ol { list-style: decimal; padding-left: 25px; margin-top: 10px; } code { background: #EBEAE9; padding: 3px 6px; font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, sans-serif; font-size: 12px; border-radius: 3px; } #faq-content ul { list-style: disc; padding-left: 40px; margin-bottom: 30px; } .break-all { word-break: break-all; } .limited_offer { color: #fff; font-size:13px; background: #17A172; border-radius:3px; display: inline-block; margin-top:20px; padding: 1px 10px; } @media only screen and (max-width : 970px) { .use-case { height: 570px; } } @media only screen and (max-width : 850px) { #developer { margin-bottom: 70px; } .use-case { float: left; width: 100%; height: auto; margin-right: 0; margin-bottom: 0px; margin-top: 20px; } .use-case p { padding: 20px; } .use-case img { display: none; } .use-case-photo { height: 130px; } #designer .use-case-photo { background-image: url("images/hongyuan.jpg"); } #photographer .use-case-photo { background-image: url("images/billijs.jpg"); } #developer .use-case-photo { background-image: url("images/eoin.jpg"); } #reviews, #tweets { width: 100%; margin-right: 0; } #team-description { text-align: center; } #team ul { margin: 0 auto; } #team-description { width: 100%; margin-right: 0; } #other-apps { width: 100%; margin-top: 50px; } #other-apps .other-app { float: left; width: 49%; margin-right: 2%; height: 350px; text-align: center; background-position: center bottom; } #other-apps .other-app:last-child { margin-right: 0; } .other-app-title, .other-app-description { padding-left: 0; } } @media only screen and (max-width : 750px) { #main-container { padding: 20px; } #logo { margin-bottom: 30px; } #main { margin-top: 40px; } #app { position: relative; margin-bottom: 20px; left: auto; top: auto; } #app a { bottom:0px; left:15px; } #app img { display: block; width: 100%; height: auto; } #app-animation { display: none; } #vertical-features { min-height: intrinsic; } #main .feature-container { width: 100%; } #main #horizontal-features .feature-container { width: 100%; margin-right: 0; } #main .secondary-features { padding: 0; } #feedback { padding-left: 20px; padding-right: 20px; } #reviews p { margin-bottom: 30px; } #tweets h3 { margin-top: 30px; } #press .press-item { margin-left: 0; width: 45.618556701%; } #newsletter, #social { width: 100%; } } @media only screen and (max-width : 600px) { h1 { font-size: 45px; } h2 { font-size: 22px; margin-bottom: 30px; } #header { background-image: url("images/mobile-header.jpg"); } .button { display: inline-block; } } @media only screen and (max-width : 400px) { h1 { font-size: 45px; } h2 { font-size: 18px; line-height: 27px; } #press-inner-container { padding-left:50px; padding-right:50px; } #press .press-item { width: 100%; margin-bottom: 40px; } #press .press-item:last-child { margin-bottom: 0; } #download { padding-left:30px; padding-right:30px; } #download h2 { padding: 0; } .other-app-title { font-size: 28px; } .other-app-description { font-size: 18px; line-height: 27px; } } @media only screen and (max-width : 320px) { #download .button { font-size: 10px; } #download h2 { font-size: 40px; line-height: 50px; } #team-container { max-width: 320px; } #team-container #team-description img { width: 100%; height: auto; } #team ul { width: 100%; } #other-apps .other-app { width: 100%; background-position: center bottom; height: 180px; margin-right: 0; } #characters .fader, #later .fader { height: 100%; background: rgba(89, 74, 128, 0.85); } #later .fader { background: rgba(37, 107, 245, 0.85); } .other-app-title { font-size: 35px; padding-top: 42px; } .other-app-description { font-size: 22px; line-height: 29px; } #email { width: 95%; margin-bottom: 20px; } }