/* CSS RESET BEGIN */ 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, u, 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:inherit; vertical-align:baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; } html,body{ height:100%; } body { line-height:1; } ol, ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a{ color:#FFFFFF; text-decoration:none; } a:hover{ color:#FFFFFF; } table { border-collapse:collapse; border-spacing:0; } /* CSS RESET END */ /* MAIN STYLES BEGIN */ @font-face { font-family: 'Bariol'; src: url('//s3-eu-west-1.amazonaws.com/s.casual.pm/fonts/bariol/BariolRegular.eot'); src: local('Bariol Regular'), url('//s3-eu-west-1.amazonaws.com/s.casual.pm/fonts/bariol/BariolRegular.woff') format('woff'), url('//s3-eu-west-1.amazonaws.com/s.casual.pm/fonts/bariol/BariolRegular.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Bariol'; src: url('//s3-eu-west-1.amazonaws.com/s.casual.pm/fonts/bariol/BariolBold.eot'); src: local('Bariol Bold'), url('//s3-eu-west-1.amazonaws.com/s.casual.pm/fonts/bariol/BariolBold.woff') format('woff'), url('//s3-eu-west-1.amazonaws.com/s.casual.pm/fonts/bariol/BariolBold.ttf') format('truetype'), url('//s3-eu-west-1.amazonaws.com/s.casual.pm/fonts/bariol/BariolBold.svg') format('svg'); font-weight: bold; font-style: normal; } body, div, p, h1, h2, h3, h4, h5, h6, a{ font-family: 'Neue Helvetica W01', Helvetica, Arial, sans-serif; font-weight: normal; } #page{ min-height: 100%; margin-bottom: -85px; } #page:after{ content: ""; display: block; height:85px; } #status{ width:200px; height:200px; position:absolute; left:50%; top:50%; background-image:url(/casual/2014/1/images/status.gif); background-repeat:no-repeat; background-position:center; margin:-100px 0 0 -100px; } #header{ width:100%; background-color:#FFFFFF; clear:both; min-height: 70px; } .block{ width:98%; max-width:960px; margin:0px auto; text-align:center; padding:0 1%; } #header-container{ } .main-menu{ font-size:14px; text-decoration:none; line-height:70px; color:#262626; transition:color 0.2s; } .main-menu:hover{ color:#FF8C00; } #main-menu-or{ font-size:14px; text-decoration:none; line-height:70px; color:#A3A3A3; margin-right:5px; } #main-menu-register{ font-size:14px; text-decoration:none; line-height:70px; color:#FFAE2E; margin-right:5px; border:2px solid #FFAE2E; border-radius:20px; padding:5px 15px 5px 15px; transition:all 0.2s; margin-left:5px; } #main-menu-register:hover{ color:#FFFFFF; background-color:#FF8C00; border-color:#FF8C00; } .main-menu-divider{ width:2px; height:10px; background-image:url(/casual/2014/1/images/main-menu-divider.png); background-position:center center; background-repeat:no-repeat; margin-left:30px; margin-right:30px; } #logo-header{ margin-left:5px; margin-right:5px; display: block; width:148px; height:70px; background-image:url(/casual/2014/1/images/logo-header.png); } #logo-header:hover{ background-position:bottom center; } #promo-block{ width:100%; max-height:1100px; background-image:url(/casual/2014/1/images/promo-block-background.png); background-position: center bottom; background-repeat: repeat-x; overflow:hidden; } .heading-1{ font-family:'Bariol', sans-serif; font-weight: normal; font-size:38px; font-weight:700; color:#2F9959; margin: 50px auto auto; text-shadow:0px 1px 0px #FFFFFF; } .heading-2{ font-family:'Bariol', sans-serif; font-weight: normal; font-size:28px; color:#647B9D; margin: 10px auto auto; } .heading-1-smaller{ font-size:30px; } .heading-2-smaller{ font-size:24px; } .button-small{ font-size:15px; width:120px; height:50px; background-color:#FFAE2E; text-align:center; text-decoration:none!important; line-height:50px; margin: 40px auto auto; border-radius:25px; transition:all 0.2s; } .button-small:hover{ background-color:#FF8C00; } #demo-block{ width:100%; background-color:#FFFFFF; overflow:hidden; padding-bottom: 50px; } #play-button{ width:128px; height:128px; background-color:#FFFFFF; background-image:url(/casual/2014/1/images/play-button.png); position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; border-radius:64px; box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.2); transition:box-shadow 0.2s; } #play-button:hover{ background-position:bottom center; cursor:pointer; box-shadow: 0px 0px 0px 12px rgba(0,0,0,0.2); } #tour-block{ width:100%; height:250px; background-color:#C1E0B4; overflow:hidden; text-align: center; } .dotted-divider{ width:100%; height:1px; border-bottom:2px dotted #BDC5C6; margin:auto; } .button-big{ font-size:21px; display: inline-block; padding: 0 2em; height:70px; background-color:#FFAE2E; text-align:center; text-decoration:none!important; line-height:70px; margin:auto; border-radius:35px; transition:all 0.2s; margin-top:86px; margin-bottom:86px; } .button-big:hover{ background-color:#FF8C00; } .button-big-glow{ font-size:21px; display:inline-block; padding: 0 2em; height:70px; background-color:#FFFFFF; text-align:center; text-decoration:none!important; line-height:70px; margin:auto; border-radius:35px; transition:all 0.2s; color:#FFAE2E; margin-top:86px; margin-bottom:86px; } .button-big-glow:hover{ background-color:#FFAE2E; color:#FFFFFF; box-shadow:0px 0px 50px rgba(255,255,255,0.7); } #two-ways-block{ margin-top: 20px; width:100%; background-color:#FFFFFF; overflow:hidden; } #signup-block{ text-align: center; } #footer{ min-height:80px; width:100%; background-color:#FAFAFA; } #footer-container{ min-height:80px; } #copyright{ color:#B9C1C2; line-height:80px; font-family:sans-serif; font-size:12px; float:right; } #copyright2{ color:#B9C1C2; font-size:12px; clear: both; text-align: center; padding-bottom:12px; } #goodies{ color:#B9C1C2; font-size:15px; clear: both; text-align: center; padding-bottom:24px; } #goodies a{ color:#B9C1C2; } #goodies a:hover{ color:#FF8C00; } #facebook-button{ width:36px; height:36px; background-color:#FFFFFF; float:right; border:2px solid #EDEDED; border-radius:20px; margin-top:21px; margin-right:10px; background-image:url(/casual/2014/1/images/facebook-button.png); background-position:-2px top; } #facebook-button:hover{ background-position:-2px bottom; cursor:pointer; color:#4764A5; } #twitter-button{ width:36px; height:36px; background-color:#FFFFFF; float:right; border:2px solid #EDEDED; border-radius:20px; margin-top:21px; margin-right:10px; background-image:url(/casual/2014/1/images/twitter-button.png); } #twitter-button:hover{ background-position:bottom center; } .footer-link{ white-space: nowrap; color:#B9C1C2; font-size:15px; line-height:80px; margin-left:15px; margin-right:15px; transition:color 0.2s; } .footer-link:hover{ color:#FF8C00; } #footer-logo{ width:148px; height:80px; background-image:url(/casual/2014/1/images/logo-footer.png); margin-left:5px; display: inline-block; } #footer-logo:hover{ background-position:bottom center; } #promo-imac-screen { height: 33px; } #promo-imac-screen img{ display: none; } .prop-c { width:100%; max-width: 960px; position: relative; margin: auto; } .prop-w{} .prop-i { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .header-section{ display: inline-block; vertical-align: middle; } #logo-section{ display:block; float:left; min-width: 150px; max-width: 100%; text-align: center; } #menu-section{ max-width: 350px; text-align: right; float: right; margin-right: 30px; } #reg-section{ max-width: 100%; text-align:center; display:block; float: right; } #page{ min-width: 320px; } #promo-w{ max-width: 960px; margin: auto; top: 33px; } #promo-h{ padding-top: 87.5% } #promo-imac{ max-width:960px; width:100%; height:100%; background-image:url(/casual/2014/1/images/promo-imac.png); background-size: 100% auto; background-repeat: no-repeat; } #promo-iphone{ max-width:960px; width:100%; height:100%; background-image:url(/casual/2014/1/images/promo-iphone.png); background-size: 100% auto; background-repeat: no-repeat; } .demo-w{ max-width: 960px; margin: auto; } .demo-h{ padding-top: 56.25% } #video{ max-height:540px; position:relative; top:24px; display:none; padding:0; } #video-placeholder{ background-image:url(/casual/2014/1/images/casual-demo.png); background-size: 100% auto; background-repeat: no-repeat; width:100%; height:100%; } #two-ways-w{ max-width: 960px; margin: auto; margin-top:25px; } #two-ways-h{ padding-top: 32.81% } #old-way{ width:44%; margin-right:5%; display: inline-block; text-align: center; margin-top:40px; } #casual-way{ width:44%; margin-left:5%; display: inline-block; text-align: center; margin-top:40px; } #two-ways{ width:100%; height:100%; } #two-ways-text{ font-family:'Bariol', sans-serif; font-weight: normal; margin-top:40px; color:#647B9D; font-size:19px; line-height: 1.5em; } #two-ways-text-2{ display: block; margin-top:0.5em; line-height: 1.5em; font-size:22px; font-weight:700; } #thumb-up{ margin-bottom: 60px; } #thumb{ width:76px; height:77px; background-image:url(/casual/2014/1/images/thumb.png); margin:auto; display: inline-block; margin-top:45px; } #thumb-text{ font-family:'Neue Helvetica W01', Helvetica, Arial, sans-serif; font-weight: normal; color:#A0A7A8; font-size:14px; line-height:20px; width:260px; height:100px; margin:auto; display: inline-block; margin-top:45px; margin-left:30px; text-align: left; } #footer-1{ display: block; text-align: left; width: 160px; float: left; } #footer-2{ display: inline-block; } #footer-3{ float: right; width: 190px; display: block; } .f{ height:1px; overflow: hidden; display: block; clear:both; } /* SUBMIT EMAIL */ .submit-email{ display:block; width:400px; margin:auto; margin-top:40px; margin-bottom:10px; position: relative; } #submitEmail2{ margin:80px auto; } .submit-email input{ font-family:'Neue Helvetica W01', Helvetica, Arial, sans-serif; font-weight: normal; background-color:#ffffff; border:6px solid #cccccc; height:60px; border-radius: 30px; color:#b2b2b2; font-size:16px; padding-left:20px; padding-right: 140px; margin:0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; vertical-align: middle; width: 400px; transition: all 0.1s ease; } .submit-email input:focus{ border:2px solid #2f9959; padding-left:24px; outline: none; } .submit-email button{ position: absolute; right:0; font-family:'Neue Helvetica W01', Helvetica, Arial, sans-serif; font-weight: normal; width:135px; height:48px; background-color:#2f9959; line-height:48px; color:#FFFFFF; text-align:center; border: none; border-top-right-radius: 30px; border-bottom-right-radius: 30px; font-size:16px; vertical-align: middle; margin-top:6px; margin-right:6px; padding-top: 0px; padding-right: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .submit-email button:hover{ background-color:#489c27; cursor:pointer; } .submit-email button:active{ border:none; padding:0; } #submitEmail3{ } #submitEmail3-email{ border: 2px solid #ffffff; padding-left: 24px; } #submitEmail3-email:focus{ border: 2px solid #2f9959; } #submitEmail3-button{ background-color: #ffae2e; } #submitEmail3-button:hover{ background-color: #ff8c00; } /* SUBMIT EMAIL END */ #ideal-for{ margin-top: 60px; padding: 20px 0; background-color: #caeafa; } #ideal-for .block{ display: table; } #ideal-for h2{ font-family: Bariol; font-weight: bold; font-size: 38px; color: #647b9d; display:table-cell; width:35%; text-align: center; vertical-align: middle; } #ideal-for ul{ background-image: url(/casual/2014/1/images/ideal-icons.png); background-position: left center; background-repeat: no-repeat; display:table-cell; width:65%; margin: 0; padding:0; } #ideal-for ul li{ font-family: Bariol; font-weight: bold; font-size: 21px; color: #647b9d; display: table; width:100%; } #ideal-for ul li span{ display: table-cell; text-align: left; height:100px; vertical-align: middle; padding-left: 100px; width:100%; box-sizing: border-box; } #whats-next ul{ display: block; margin:0; padding:0; width:100%; margin-bottom: 50px; } #whats-next ul li { display: inline-block; width:28%; text-align: center; margin: auto; vertical-align: top; } #whats-next a{ display: block; color: #647b9d; max-width: 200px; margin: auto; font-family: Bariol; font-size: 20px; } #whats-next .next-icon { width:100%; max-width: 134px; position: relative; margin: auto; display: block; margin-top: 50px; margin-bottom: 20px; } #whats-next .next-icon i{ padding-top: 100%; background-image: url(/casual/2014/1/images/whats-next.png); background-repeat: no-repeat; background-position: 0 -100%; background-size: 300% auto; display: block; } #whats-next-blog .next-icon i{ background-position: 0 100%; } #whats-next-blog:hover .next-icon i{ background-position: 0 0; } #whats-next-twitter .next-icon i{ background-position: 50% 100%; } #whats-next-twitter:hover .next-icon i{ background-position: 50% 0; } #whats-next-facebook .next-icon i{ background-position: 100% 100%; } #whats-next-facebook:hover .next-icon i{ background-position: 100% 0; } @media only screen and (max-width: 920px){ #footer-1{ display: inline-block; float: none; } #footer-2{ width:100%; text-align: center; } #footer-3{ display: inline-block; float: none; } } @media only screen and (max-width: 780px){ .heading-1{ font-size: 32px; } .heading-2{ font-size: 24px; } } @media only screen and (max-width: 700px){ #menu-section{ clear:both; width: 100%; float: none; text-align: center; margin:0; } #menu-section .main-menu{ line-height: 70px; font-size: 18px; } .footer-link{ font-size: 20px; } #logo-section{ display: inline-block; float:none; } #reg-section{ display: inline-block; float:none; } } @media only screen and (max-width: 600px){ .submit-email { width:300px; } .submit-email input{ width:300px; border-radius: 0; } .submit-email button{ width:300px; border-radius: 0; margin-top:5px; position: static; margin-right: 0; } #whats-next a{ font-size: 14px; } } @media only screen and (max-width: 400px){ #menu-section .main-menu{ line-height: 70px; font-size: 18px; } .main-menu-divider{ margin-left: 10px; margin-right: 10px; } } .display-none{ display:none; } .display-block{ display:block; } .button-green{ background-color: #2f9959; } .button-inverse-green{ color: #2f9959; } .button-inverse-green:hover{ color: #ffffff; } #main-menu-register.register-green{ border-color: #2f9959; color: #2f9959; } #main-menu-register.register-green:hover{ border-color: #FFAE2E; background-color: #FFAE2E; color: #ffffff; }