/* 1. Reset 2. General 3. Header 4. Content 5. Sidebar 6. Footer 7. Mobile Styles 8. Print Styles */ /* ================================================================================== */ /* == 1. Normalize.css v1.01 ======================================================== */ /* ================================================================================== */ article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.75em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0} /* ================================================================================== */ /* == 2. General Styles ============================================================= */ /* ================================================================================== */ html,body { background: #f2f2f2 url(../../img/bg-gray2.png); font-family: "proxima-nova", Arial, Helvetica, Verdana, sans-serif; font-size: 15px; line-height: 1.4em; text-shadow: 0px 1px 0px rgba(255,255,255,0.9); color: #585858; } .container { max-width: 920px; margin: 0 auto; } p, h1, h2, h3, h4, h5, h6, ul { margin: 0; padding: 0; } a { color: #363636; -webkit-transition: all 0.218s; -moz-transition: all 0.218s; -ms-transition: all 0.218s; -o-transition: all 0.218s; transition: all 0.218s; } a:hover { color: #a4cb2f; } /* ================================================================================== */ /* == 3. Header ===================================================================== */ /* ================================================================================== */ #header { background: #1f4674 url(../../img/header-bg@2x.jpg) center top; background-size: 80px 530px; border-bottom: 5px solid #a4cb2f; } #header hgroup { text-indent: -9999px; font-size: 1px; line-height: 0px; } #header img { display: block; width: 100%; } /* ================================================================================== */ /* == 4. Content ==================================================================== */ /* ================================================================================== */ #content { } span.red { color: #d4002c; } article { border-top: 1px solid #fff; border-bottom: 1px solid #d1d1d1; padding: 55px 35px 70px 35px; } article#install, article#transactions, article#pricing, article#pigeon, article#tips, article#not, article#increase, article#sure, article#embrace, article#survive, article#eedition { background: #f2f2f2 url(../../img/bg-gray.png); } article p { margin: 1em 0; } article h1 { font-size: 36px; font-weight: 100; color: #363636; height: 55px; line-height: 55px; margin: 0 0 15px 0; } article h2 { font-size: 20px; margin: 0 0 8px 0; color: #363636; } article h3 { font-size: 1.17em; margin: 1em 0; } article h4 { font-size: 1em; margin: 1.33em 0; } article h5 { font-size: .83em; margin: 1.67em 0; } article h6 { font-size: .75em; margin: 2.33em 0; } article strong { color: #363636; } .description { margin-bottom: 35px; } .description p { margin: 0; } /*The Easy-to-Use-Paywall Solution*/ #easy h1 { /*background: url(../../img/icon-lock.png) no-repeat left 6px; background-size: 30px 38px; padding-left: 49px;*/} .video-box { width: 100%; border: 20px solid #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.25); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.25); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.25); -o-box-shadow: 0 1px 4px rgba(0,0,0,.25); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .video-box iframe { width: 100%; outline: 1px solid #eee; } #old-papers { display: block; max-width: 93%; margin: 0 auto -70px auto; } /*Easy-to-Install & Works with Any Website*/ #install h1 { /*background: url(../../img/icon-plane.png) no-repeat left center; background-size: 37px 34px; padding-left: 54px;*/ } img.screenshot { width: 100%; border: 20px solid #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.25); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.25); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.25); -o-box-shadow: 0 1px 4px rgba(0,0,0,.25); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /*Who is Pigeon For?*/ #who h1 { /*background: url(../../img/icon-book.png) no-repeat left center; background-size: 43px 35px; padding-left: 62px;*/ } #who .description { margin: 0; } #who ul { overflow: hidden; list-style: none;} #who ul li { float: left; margin: 61px 4% 0 0; /*35/920*/ width: 16%;/*203.75/920*/ } #who ul li:last { margin-right: 0; } #who ul li p { margin: 0; } #who a:hover { color: #a4cb2f; } #who ul li span { display: block; width: 100%; height: 110px; margin-bottom: 18px; background: #fff; border: 1px solid #d7d7d7; border-radius: 4px; } #who ul li span#newspapers { background: #fff url(../../img/icon-newspaper.png) no-repeat center; background-size: 55px 48px; } #who ul li span#magazines { background: #fff url(../../img/icon-magazine.png) no-repeat center; background-size: 44px 52px; } #who ul li span#education { background: #fff url(../../img/icon-education.png) no-repeat center; background-size: 85px 50px; } #who ul li span#blogs { background: #fff url(../../img/icon-blog.png) no-repeat center; background-size: 62px 40px; } #who ul li span#communities { background: #fff url(../../img/icon-key.png) no-repeat center; background-size: 52px 49px; } #who ul li span#lawyers { background: #fff url(../../img/icon-process.png) no-repeat center; background-size: 44px 60px; } #who ul li span#counties { background: #fff url(../../img/icon-key.png) no-repeat center; background-size: 52px 49px; } #who ul li span#downloads { background: #fff url(../../img/icon-downloads.png) no-repeat center; background-size: 69px 45px; } #who ul li span#media { background: #fff url(../../img/icon-tv.png) no-repeat center; background-size: 56px 57px; } #who ul li span#pay { background: #fff url(../../img/icon-dollar.png) no-repeat center; background-size: 64px 36px; } @media only screen and (max-width: 720px) { #who ul li { width: 30%; margin-right: 5%; } #who ul li:nth-child(3n+3) { margin-right: 0; } } /*Manages Customers and Transactions*/ #transactions h1 { /*background: url(../../img/icon-safe.png) no-repeat left 11px; background-size: 32px 36px; padding-left: 49px;*/ } #transactions ul { list-style: none; overflow: hidden; } #transactions ul li { float: left; width: 30.797101445%;/*283.33/920*/ margin: 0 3.804347826% 0 0; /*35/920*/ } #transactions ul li:last-child { margin: 0; } #transactions ul li span { display: block; width: 100%; height: 130px; margin-bottom: 18px; background: #fff; border: 1px solid #cdcdcd; border-radius: 4px; } #transactions ul li span#wallet { background: #fff url(../../img/icon-wallet.png) no-repeat center; background-size: 79px 74px; } #transactions ul li span#money { background: #fff url(../../img/icon-money.png) no-repeat center; background-size: 103px 65px; } #transactions ul li span#cards { background: #fff url(../../img/icon-cards.png) no-repeat center; background-size: 77px 56px; } /*Lots of Features You'll Love*/ #features h1 { /*background: url(../../img/icon-heart.png) no-repeat left 11px; background-size: 40px 34px; padding-left: 57px;*/ } #features ul { list-style: none; font-size: 13px; font-weight: 600; overflow: hidden; } #features ul li { margin-bottom: 10px; background: url(../../img/list-bullet.png) no-repeat left 6px; background-size: 7px; padding-left: 17px; float: left; width: 48.097826087%;/*442.5/920*/ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #features ul li:nth-child(odd) { margin: 0 3.80434782% 0 0; } /*#features aside { float: right; background: #fff; padding: 20px; border: 1px solid #d7d7d7; }*/ /*Pricing Structure & Getting Started*/ #pricing { border-bottom: 1px solid #134b85; } #pricing h1 { /*background: url(../../img/icon-structure.png) no-repeat left center; background-size: 40px 42px; padding-left: 57px;*/ } #pricing .pricing-guide { list-style: none; overflow: hidden; } #pricing .pricing-guide li { float: left; width: 47%; margin: 0 6% 0 0; } #pricing .pricing-guide li:last-child { margin: 0; } #pricing .pricing-guide li ul { list-style: disc; padding-left: 20px; font-style: italic; } #pricing .pricing-guide li ul li { float: none; width: 100%; margin: 0 0 10px 0; } #pricing strong { color: #363636; display: block; } /*Who Will Survive the Death of Newspaper Industry?*/ #survive h1 { /*background: url(../../img/icon-bomb.png) no-repeat left; background-size: 45px 32px; padding-left: 60px; font-size: 35px;*/ } #survive ul { margin: 5%; padding: 30px; background: #fff; border-radius: 8px; box-shadow: inset 0px 1px 3px rgba(0,0,0,0.3), inset 0px -1px 2px rgba(0,0,0,0.1); list-style: none; } #survive ul li { border-bottom: 1px dotted #dcdcdc; padding-bottom: 25px; margin-bottom: 25px; } #survive ul li:last-child { margin: 0; padding: 0; border: none; } #survive h3 { font-size: 19px; } #survive .buffett { float: left; margin: 15px 35px 10px 0; } #survive .buffett img { display: block; } #survive .buffett p { font-size: 13px; text-align: center; background: #fff; box-shadow: 0px 1px 3px rgba(0,0,0,0.3); border-radius: 0 0 4px 4px; padding: 5px 0; font-style: italic; color: #363636; margin: 0;} #survive p { z-index: 66; position: relative; } #survive img#highlight { position: absolute; top: 790px; left: -42px; z-index: 9; } /*Adveristing Revenue is Unreliable*/ #secret h1 { /*background: url(../../img/icon-chart.png) no-repeat left; background-size: 32px 29px; padding-left: 51px;*/ } #secret img { float: right; width: 200px; margin: 0 0 0 30px; } /*A Sure-Fire Alternative Revenue Source*/ #sure h1 { /*background: url(../../img/icon-bag.png) no-repeat left; background-size: 21px 33px; padding-left: 40px;*/ } #sure p#note { background: url(../../img/underline.png) no-repeat center bottom; text-align: center; padding-bottom: 5px; font-s///ize: 18px; } /*Who the Paywall is Best For*/ #for h1 { /*background: url(../../img/icon-best.png) no-repeat left; background-size: 32px 32px; padding-left: 49px;*/ } /*The Accepted Future of Online Content*/ #accepted h1 { /*background: url(../../img/icon-key2.png) no-repeat left; background-size: 31px 30px; padding-left: 49px;*/ } #accepted img#lockedout { display: block; margin: 35px auto -70px auto; } /*When Doesn't the Paywall Work*/ #not h1 { /*background: url(../../img/icon-not.png) no-repeat left; background-size: 32px 32px; padding-left: 49px;*/ } /*Paywall Success After Success*/ #success h1 { /*background: url(../../img/icon-award.png) no-repeat left; background-size: 32px 39px; padding-left: 48px;*/ } /*Paywall May Increase Advertising Profits*/ #increase h1 { /*background: url(../../img/icon-chart2.png) no-repeat left; background-size: 32px 29px; padding-left: 48px;*/ } /*A Changing Medium*/ #changing h1 { /*background: url(../../img/icon-computer.png) no-repeat left; background-size: 33px 29px; padding-left: 52px;*/ } #changing img { display: block; margin: 50px auto 25px auto; } /*Embrace the Internet Revolution*/ #embrace h1 { /*background: url(../../img/icon-internet.png) no-repeat left; background-size: 33px 33px; padding-left: 50px;*/ } /*The Paywall's Future*/ #benefits h1 { /*background: url(../../img/icon-future.png) no-repeat left 0px; background-size: 41px 46px; padding-left: 58px;*/ } /*Paywall Success After Success*/ .quote { background: #B8CEE5 url(../../img/bg-quote.png); box-shadow: inset 0px 1px 1px rgba(0,0,0,0.35); padding: 20px; border-radius: 6px; margin-bottom: 20px; } .quote p { font-family: Georgia; font-style: italic; margin-bottom: 10px; background: #fff; padding: 15px 20px; border-radius: 5px; box-shadow: 0px 1px 1px rgba(0,0,0,0.35); } .quote p:before { content: '“'; color: #dc0028; font-size: 30px; display: inline-block; line-height: 10px; margin-right: 2px; } .quote p:after { content: '”'; color: #dc0028; font-size: 30px; display: inline-block; line-height: 10px;} .quote strong { color: #369; text-shadow: 0px 1px 0px rgba(250,250,250,0.8); display: block; te/xt-align: right; margin: 15px 0px 0 20px; } #success #blurbs { overflow: hidden; text-align: left; margin-top: 35px; } #success .blurb { float: left; width: 30%; overflow: hidden; font-size: 14px; } #success .blurb:nth-child(2) { margin: 0 5%; } #success .blurb:last-child { margin: 0; } #success .blurb .quote { } /*Tips for Ensuring Paywall Success*/ #tips h1 { /*background: url(../../img/icon-tips.png) no-repeat left; background-size: 30px 39px; padding-left: 45px;*/ } #tips ul { overflow: hidden; list-style: none; margin-top: 70px;} #tips ul li { display: inline-block; margin: 0 3.6% 35px 0; width: 21.83%; vertical-align: top; } #tips ul li:nth-child(4n+4) { margin-right: 0; } #tips ul li span { display: block; width: 100%; height: 110px; margin-bottom: 18px; background: #fff; border: 1px solid #d7d7d7; border-radius: 4px; } #tips ul li span#lock { background: #fff url(../../img/icon-padlock.png) no-repeat center; background-size: 38px 59px; } #tips ul li span#pass { background: #fff url(../../img/icon-ticket.png) no-repeat center; background-size: 80px 43px; } #tips ul li span#mobile { background: #fff url(../../img/icon-mobile.png) no-repeat center; background-size: 32px 48px; } #tips ul li span#time { background: #fff url(../../img/icon-clock.png) no-repeat center; background-size: 55px 59px; } #tips ul li span#value { background: #fff url(../../img/icon-diamond.png) no-repeat center; background-size: 56px 50px; } #tips ul li span#meter { background: #fff url(../../img/icon-meter.png) no-repeat center; background-size: 35px 55px; } #tips ul li span#social { background: #fff url(../../img/icon-social.png) no-repeat center; background-size: 56px 45px; } #tips ul li span#ads { background: #fff url(../../img/icon-sale.png) no-repeat center; background-size: 60px 59px; } #tips ul li span#perk { background: #fff url(../../img/icon-perk.png) no-repeat center; background-size: 56px 48px; } #tips ul li span#curate { background: #fff url(../../img/icon-newspaper.png) no-repeat center; background-size: 55px 48px; } #tips ul li span#email { background: #fff url(../../img/icon-email.png) no-repeat center; background-size: 56px 40px; } #tips ul li span#process { background: #fff url(../../img/icon-process.png) no-repeat center; background-size: 44px 63px; } #tips ul li span#special { background: #fff url(../../img/icon-target.png) no-repeat center; background-size: 49px 59px; } #tips ul li span#first { background: #fff url(../../img/icon-first.png) no-repeat center; background-size: 52px 53px; } /*Pigeon Makes Paywalls Easy*/ #pigeon h1 { /*background: url(../../img/icon-case.png) no-repeat left; background-size: 33px 31px; padding-left: 50px;*/ } #pigeon ul#highlights { list-style: none; overflow: hidden; } #pigeon ul#highlights li { float: left; width: 30.797101445%;/*283.33/920*/ margin: 0 3.804347826% 0 0; /*35/920*/} #pigeon ul#highlights li:last-child { margin: 0; } #pigeon ul.checks { list-style: none; font-size: 13px; font-weight: 600; overflow: hidden; background: url(../../img/news-stand.png) no-repeat right; background-size: auto 100%; mar/gin-top: 35px; margin-bottom: -20px; padding: 20px 0 10px 0; } #pigeon ul.checks li { margin-bottom: 10px; background: url(../../img/list-bullet.png) no-repeat left 6px; background-size: 7px; padding-left: 17px; width: 60%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /*How Pigeon Works*/ #works h1 { /*background: url(../../img/icon-gear.png) no-repeat left; background-size: 31px 31px; padding-left: 48px;*/ } #works .column { display: inline-block; width: 45%; margin: 35px 0; vertical-align: top; } #works .column:nth-child(odd) { margin-left: 9%; } #works .column p { margin-bottom: 0; } /*Contact Form*/ .contact { background: #fff; border: 1px solid #cdcdcd; border-radius: 4px; padding: 35px; margin-top: 70px; overflow: hidden; } .contact fieldset { padding: 0; border: none; } .contact legend { display: none; } .contact h2 { font-weight: 100; font-size: 26px; } .contact p { } .contact input, .contact textarea, .contact .submit { background: #f7f7f7; border: 1px solid #cdcdcd; font-family: "proxima-nova", Arial, Helvetica, Verdana, sans-serif; font-size: 15px; color: #585858; height: 35px; line-height: 35px; padding: 0 12px; width: 31%;/*260*/ border-radius: 3px; box-shadow: inset 0px 1px 1px rgba(0,0,0,0.1); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .contact input, .contact .submit { margin-bottom: 12px; width: 100%; } .contact textarea { height: 176px; width: 100% !important;/*575/833*/ line-height: 1.3em; padding: 7px 12px; margin-bottom: 10px; } .contact li { list-style: none; display: block; width: 100%; } .contact .button::-moz-focus-inner, .contact .submit::-moz-focus-inner {border:0;padding:0;margin:0;} .contact .button, .contact .submit { display: inline-block; color: #fff; text-shadow: 0px -1px 1px rgba(0,0,0,0.4); background: #2678bf; border-radius: 3px; cursor: pointer; text-shadow: 0px 1px 0px rgba(0,0,0,0.45); font-weight: 600; margin: 0; box-shadow: 0px 1px 3px rgba(0,0,0,0.3), inset 0px 1px 0px #7eb6e6; border: 1px solid #307cbf; border-top-color: #4392d7; border-bottom-color: #0f5c9f; text-rendering: optimizeLegibility; -webkit-font-smoothing: none; -webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: antialiased; -moz-font-smoothing: none; -moz-font-smoothing: subpixel-antialiased; -moz-font-smoothing: antialiased; font-smoothing: none; font-smoothing: subpixel-antialiased; font-smoothing: antialiased; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: background 0.218s; -moz-transition: background 0.218s; -ms-transition: background 0.218s; -o-transition: background 0.218s; transition: background 0.218s; background-image: linear-gradient(bottom, rgb(41,121,192) 0%, rgb(93,163,224) 100%); background-image: -o-linear-gradient(bottom, rgb(41,121,192) 0%, rgb(93,163,224) 100%); background-image: -moz-linear-gradient(bottom, rgb(41,121,192) 0%, rgb(93,163,224) 100%); background-image: -webkit-linear-gradient(bottom, rgb(41,121,192) 0%, rgb(93,163,224) 100%); background-image: -ms-linear-gradient(bottom, rgb(41,121,192) 0%, rgb(93,163,224) 100%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(41,121,192)), color-stop(1, rgb(93,163,224)) ); } .contact .button:hover, .contact .submit:hover { box-shadow: 0px 1px 3px rgba(0,0,0,0.3), inset 0px 1px 0px #a5cf6a !important; border: 1px solid #559501; border-top-color: #69ad0d; border-bottom-color: #437501; background-image: linear-gradient(bottom, rgb(90,157,1) 0%, rgb(138,195,59) 100%); background-image: -o-linear-gradient(bottom, rgb(90,157,1) 0%, rgb(138,195,59) 100%); background-image: -moz-linear-gradient(bottom, rgb(90,157,1) 0%, rgb(138,195,59) 100%); background-image: -webkit-linear-gradient(bottom, rgb(90,157,1) 0%, rgb(138,195,59) 100%); background-image: -ms-linear-gradient(bottom, rgb(90,157,1) 0%, rgb(138,195,59) 100%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(90,157,1)), color-stop(1, rgb(138,195,59)) ); } /*Need More Than Pigeon?*/ #more { background: #134b85; color: #7caedd; text-shadow: 0px 1px 0px rgba(0,0,0,0.5); border-top: 1px solid #2287e7; border-bottom: none; overflow: hidden; padding: 55px 35px;} #more h1 { background: url(../../img/pigeon-footer.png) no-repeat; background-size: 86px 42px; width: 86px; height: 42px; text-indent: -9999px; } #more h2 { color: #7caedd; font-size: 21px; font-weight: 600; } #more a { color: #7caedd; text-decoration: underline; font-weight: 600; } #more a:hover { color: #a4cb2f; } #more .description { float: left; width: 57.065217391%;/*525/920*/ margin: 0; } #more .contact { float: right; width: 38.04347826%;/*350/920*/ color: #585858; text-shadow: none; margin: -50px 0 0 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #more .contact h2 { color: #363636; font-weight: 100; font-size: 26px; margin: 0 0 2px 0; background: url(../../img/icon-mail.png) no-repeat left center; background-size: 26px 19px; padding-left: 33px; } #more .contact p { font-size: 14px; margin: 0 0 12px 0; } #more .contact input, .contact .submit { width: 100%; } #more .contact li { list-style: none; } /* ================================================================================== */ /* == 5. Slideshow ==================================================================== */ /* ================================================================================== */ /* Browser Resets */ .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus {outline: none;} .slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;} /* FlexSlider Necessary Styles *********************************/ .flexslider {margin: 0; padding: 0; } .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden; } /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img {width: 80.5%;height: auto; display: block;} .flex-pauseplay span {text-transform: capitalize;} /* Clearfix for the .slides element */ .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .slides {display: block;} * html .slides {height: 1%;} /* FlexSlider Default Theme *********************************/ .flexslider {margin: 0; background: #fff; border: 20px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.25); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.25); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.25); -o-box-shadow: 0 1px 4px rgba(0,0,0,.25); zoom: 1; overflow: hidden; } .flex-viewport { float: left; width: 80.5%; max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;} .loading .flex-viewport {max-height: 300px;} .flexslider .slides {zoom: 1;} /* Control Nav */ ol.flex-control-nav { float: right; width: 17.5%; margin: 0; text-align: center;} ol.flex-control-nav li { clear: both; width: 100%; margin-bottom: 20px; }.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);} ol.flex-control-nav li:last-child { margin: 0; } .flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;} .flex-control-thumbs li {width: 25%; float: left; margin: 0;} .flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;} .flex-control-thumbs img:hover {opacity: 1;} .flex-control-thumbs .flex-active {opacity: 1; cursor: default;} /* ================================================================================== */ /* == 6. Footer ===================================================================== */ /* ================================================================================== */ #footer { clear: both; padding: 25px 35px; background: #0b2d53; color: #7caedd; font-size: 14px; text-shadow: none; } #footer a { color: #7caedd; } #footer a:hover { color: #a4cb2f; } .corner-banner { background: #CF0E3B; color: #fff; text-decoration: none; text-shadow: 0px 1px 1px rgba(0,0,0,0.5); width: 400px; position: absolute; text-align: center; padding: 11px 0; color: #f0f0f0; top: 12px; right: -140px; left: auto; transform: rotate(30deg); -webkit-transform: rotate(30deg); box-shadow: 0px 3px 5px rgba(0,0,0,0.25); display: none; /*Only show on browsers that support transforms*/ } .csstransforms .corner-banner { display: block; } /* ================================================================================== */ /* == 7. Thankyou Page ============================================================== */ /* ================================================================================== */ html.thankyou { background: url(../../img/thankyou-bg.jpg); } html.thankyou, .thankyou body { height: 100%; background: url(../../img/thankyou-bg.jpg); } .thankyou header { background: url(../../img/thankyou-img.jpg) center center no-repeat; margin: auto auto; height: 100%; text-indent: -9999px; } /* ================================================================================== */ /* == 7. Media Queries ============================================================== */ /* ================================================================================== */ @media only screen and (min-width: 1024px) { article h1 { font-size: 36px; font-weight: 100; color: #363636; height: 55px; line-height: 55px; margin: 0 0 15px 0; } } @media only screen and (max-width: 768px) { article h1 { font-size: 36px; font-weight: 100; color: #363636; height: auto; line-height: 40px; margin: 0 0 30px 0; } #more .contact h2 { font-size: 22px; background: none; padding: 0; } #install h1 { font-size: 35px; } /*So the Title fits on iPad*/ #success .blurb .quote { background-size: auto 100%; } } @media only screen and (max-width: 620px) { #more .contact { padding: 20px; } .thankyou header { background: url(../../img/thankyou-mobile.jpg) center center no-repeat; margin: auto auto; height: 100%; text-indent: -9999px; background-size: 100%; } #changing img, #accepted img#lockedout { width: 100%; } #success .blurb { float: none; width: 100%; } #success .blurb:nth-child(2) { margin: 35px 0; } #tips ul li { width: 46%; margin: 0 0 35px 0; } #tips ul li:nth-child(odd) { margin: 0 6% 35px 0; } #pigeon ul#highlights { margin: 0 6%; } #pigeon ul#highlights li { float: none; width: 100%; margin: 0; } #pigeon ul#highlights li:nth-child(2) { margin: 35px 0; } #pigeon ul.checks { background: none; margin: 0 6% -10px 6%;} #pigeon ul.checks li { width: 100%; } } @media only screen and (max-width: 480px) { #header img { content: url("../../img/header-mobile.jpg"); width: 100%; } article { padding: 55px 30px 70px 30px; } #easy iframe, #install img.screenshot { border: 8px solid #fff; } #transactions ul li { float: none; width: 100%; overflow: hidden; margin-bottom: 35px; } #transactions ul li span { float: left; width: 70px; height: 70px; background-size: 60% !important; margin: 0 15px 0 0; } #transactions ul li p { margin-bottom: 0; } #pricing .pricing-guide li { float: none; width: 100%; margin-bottom: 35px; } #pricing input, #pricing textarea { float: none; width: 100%; margin-bottom: 15px; } #pricing input.button { margin: 0; } #pricing .contact { padding: 20px; } #more .description { float: none; width: 100%; } #more .contact { float: none; width: 100%; margin: 35px 0 0 0; } #more .contact h2 { color: #363636; font-weight: 100; font-size: 26px; margin: 0 0 2px 0; background: url(../../img/icon-mail.png) no-repeat left center; background-size: 26px 19px; padding-left: 33px; } #survive .buffett { float: none; width: 100%; } #survive .buffett img { width: 100%; } } @media only screen and (max-width: 320px) { article { padding: 55px 25px 70px 25px; } article h1 { padding: 50px 0 0 0 !important; background-position: top center !important; text-align: center; } article#more h1 { padding: 0 !important; } #who ul li { width: 45%; margin: 61px 0 0 0 !important; /*35/920*/ } #who ul li:nth-child(odd) { margin-right: 10% !important; } #features ul li { float: none; width: 100%; margin: 0 0 10px 0 !important; } #pricing .pricing-guide li { float: none; width: 100%; margin-bottom: 35px; text-align: center; } } /* ================================================================================== */ /* == 8. Print Styles =============================================================== */ /* ================================================================================== */ @media print { * { background: transparent !important; color: #000 !important; box-shadow:none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } }