/* ,o888888o. 8 8888 ,o888888o. 8 888888888o .8. 8 8888 8888 `88. 8 8888 . 8888 `88. 8 8888 `88. .888. 8 8888 ,8 8888 `8. 8 8888 ,8 8888 `8b 8 8888 `88 :88888. 8 8888 88 8888 8 8888 88 8888 `8b 8 8888 ,88 . `88888. 8 8888 88 8888 8 8888 88 8888 88 8 8888. ,88' .8. `88888. 8 8888 88 8888 8 8888 88 8888 88 8 8888888888 .8`8. `88888. 8 8888 88 8888 8888888 8 8888 88 8888 ,8P 8 8888 `88. .8' `8. `88888. 8 8888 `8 8888 .8' 8 8888 `8 8888 ,8P 8 8888 88 .8' `8. `88888. 8 8888 8888 ,88' 8 8888 ` 8888 ,88' 8 8888 ,88'.888888888. `88888. 8 8888 `8888888P' 8 888888888888 `8888888P' 8 888888888P .8' `8. `88888. 8 888888888888 */ body { margin: 0; padding: 0; font-family: 'PT Sans', sans-serif; } a { text-decoration: none; } #header { position: fixed; width: 100%; text-align: center; box-shadow: 0 0 7px #888888; background-color: white; height: 75px; } #header h1 { display: inline-block; padding: 0; } #header #social { display: inline-block; position: absolute; right:90px; top: 20px; margin-right: 20px; } #header #social a img { width: 32px; height: 32px; margin-left: 20px; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s; } #header #social a img:hover { opacity: 0.3; } .title { max-width: 80%; } .clear { clear: both; } /* 8 888888888o .8. b. 8 8 8888888888 8 8888 8 8888 8 8888 `88. .888. 888o. 8 8 8888 8 8888 8 8888 8 8888 `88 :88888. Y88888o. 8 8 8888 8 8888 8 8888 8 8888 ,88 . `88888. .`Y888888o. 8 8 8888 8 8888 8 8888 8 8888. ,88'.8. `88888. 8o. `Y888888o. 8 8 888888888888 8 8888 8 8888 8 888888888P'.8`8. `88888. 8`Y8o. `Y88888o8 8 8888 8 8888 8 8888 8 8888 .8' `8. `88888. 8 `Y8o. `Y8888 8 8888 8 8888 8 8888 8 8888 .8' `8. `88888. 8 `Y8o. `Y8 8 8888 8 8888 8 8888 8 8888 .888888888. `88888. 8 `Y8o.` 8 8888 8 8888 8 8888 8 8888 .8' `8. `88888. 8 `Yo 8 888888888888 8 888888888888 8 8888 */ #panel-1 { background-image: url('img/p1-bg.png'); background-size: cover; background-position: center; text-align: center; padding-top: 150px; padding-bottom: 75px; } #panel-1 #we-ready { margin: 50px; } #panel-1 #download-now { max-width: 500px; margin: 50px auto; color: #fff0b6; font-size: 24px; font-weight: 400; } #panel-1 #buttons button { background-color: rgba(0,0,0,0); background-image: url('img/p1-button-bg.png'); outline: none; font-family: 'PT Sans', sans-serif; font-weight: 700; color: #fff0b6; font-size: 18px; width:190px; height:59px; border:0; margin: 20px; } #panel-1 #buttons button:hover { cursor: pointer; cursor: hand; color: #AAAAAA; } /* 8 888888888o .8. b. 8 8 8888888888 8 8888 8 8888 8 8888 8 8888 `88. .888. 888o. 8 8 8888 8 8888 8 8888 8 8888 8 8888 `88 :88888. Y88888o. 8 8 8888 8 8888 8 8888 8 8888 8 8888 ,88 . `88888. .`Y888888o. 8 8 8888 8 8888 8 8888 8 8888 8 8888. ,88'.8. `88888. 8o. `Y888888o. 8 8 888888888888 8 8888 8 8888 8 8888 8 888888888P'.8`8. `88888. 8`Y8o. `Y88888o8 8 8888 8 8888 8 8888 8 8888 8 8888 .8' `8. `88888. 8 `Y8o. `Y8888 8 8888 8 8888 8 8888 8 8888 8 8888 .8' `8. `88888. 8 `Y8o. `Y8 8 8888 8 8888 8 8888 8 8888 8 8888 .888888888. `88888. 8 `Y8o.` 8 8888 8 8888 8 8888 8 8888 8 8888 .8' `8. `88888. 8 `Yo 8 888888888888 8 888888888888 8 8888 8 8888 */ #panel-2 { background-color: white; padding-top: 150px; padding-bottom: 75px; text-align: center; } #panel-2::before { content: url('img/p2-nexus5.png'); vertical-align: -145px; } #panel-2::after { content: url('img/p2-iphone5s.png'); vertical-align: -145px; } #panel-2 #p2-contents { display: inline-block; } #panel-2 #store-buttons { margin-top: 50px } #panel-2 #store-buttons button { background-color: rgba(0,0,0,0); outline: none; border:0; margin: 10px; } #panel-2 #store-buttons button:hover { cursor: pointer; cursor: hand; } /* 8 888888888o .8. b. 8 8 8888888888 8 8888 8 8888 8 8888 8 8888 8 8888 `88. .888. 888o. 8 8 8888 8 8888 8 8888 8 8888 8 8888 8 8888 `88 :88888. Y88888o. 8 8 8888 8 8888 8 8888 8 8888 8 8888 8 8888 ,88 . `88888. .`Y888888o. 8 8 8888 8 8888 8 8888 8 8888 8 8888 8 8888. ,88'.8. `88888. 8o. `Y888888o. 8 8 888888888888 8 8888 8 8888 8 8888 8 8888 8 888888888P'.8`8. `88888. 8`Y8o. `Y88888o8 8 8888 8 8888 8 8888 8 8888 8 8888 8 8888 .8' `8. `88888. 8 `Y8o. `Y8888 8 8888 8 8888 8 8888 8 8888 8 8888 8 8888 .8' `8. `88888. 8 `Y8o. `Y8 8 8888 8 8888 8 8888 8 8888 8 8888 8 8888 .888888888. `88888. 8 `Y8o.` 8 8888 8 8888 8 8888 8 8888 8 8888 8 8888 .8' `8. `88888. 8 `Yo 8 888888888888 8 888888888888 8 8888 8 8888 8 8888 */ #panel-3 { background-image: url('img/p3-bg.png'); background-size: cover; background-position: center; text-align: center; padding-top: 150px; padding-bottom: 75px; } #panel-3::before { content: url('img/p3-graphic.png'); vertical-align: -50px; } #panel-3 #p3-contents { display: inline-block; margin-left: 100px; } #panel-3 #what-it-does { max-width: 666px; margin: 50px auto; color: #fff0b6; font-size: 18px; font-weight: 400; text-align: left; line-height: 1.5; } /* 8 888888888o .8. b. 8 8 8888888888 8 8888 8 8888 `8.`888b ,8' 8 8888 `88. .888. 888o. 8 8 8888 8 8888 8 8888 `8.`888b ,8' 8 8888 `88 :88888. Y88888o. 8 8 8888 8 8888 8 8888 `8.`888b ,8' 8 8888 ,88 . `88888. .`Y888888o. 8 8 8888 8 8888 8 8888 `8.`888b ,8' 8 8888. ,88'.8. `88888. 8o. `Y888888o. 8 8 888888888888 8 8888 8 8888 `8.`888b ,8' 8 888888888P'.8`8. `88888. 8`Y8o. `Y88888o8 8 8888 8 8888 8 8888 `8.`888b ,8' 8 8888 .8' `8. `88888. 8 `Y8o. `Y8888 8 8888 8 8888 8 8888 `8.`888b8' 8 8888 .8' `8. `88888. 8 `Y8o. `Y8 8 8888 8 8888 8 8888 `8.`888' 8 8888 .888888888. `88888. 8 `Y8o.` 8 8888 8 8888 8 8888 `8.`8' 8 8888 .8' `8. `88888. 8 `Yo 8 888888888888 8 888888888888 8 8888 `8.` */ #panel-4 { background-color: white; padding-top: 150px; padding-bottom: 75px; text-align: center; } #panel-4 #how-it-work { color: #ff3a51; font-size: 22px; margin-top: 50px; } #panel-4 .info { display: inline-block; max-width: 300px; } #panel-4 .info img { margin-bottom: 20px; } #panel-4 .arrow { display: inline-block; margin:50px; vertical-align: 125px; } /* 8 888888888o .8. b. 8 8 8888888888 8 8888 `8.`888b ,8' 8 8888 `88. .888. 888o. 8 8 8888 8 8888 `8.`888b ,8' 8 8888 `88 :88888. Y88888o. 8 8 8888 8 8888 `8.`888b ,8' 8 8888 ,88 . `88888. .`Y888888o. 8 8 8888 8 8888 `8.`888b ,8' 8 8888. ,88'.8. `88888. 8o. `Y888888o. 8 8 888888888888 8 8888 `8.`888b ,8' 8 888888888P'.8`8. `88888. 8`Y8o. `Y88888o8 8 8888 8 8888 `8.`888b ,8' 8 8888 .8' `8. `88888. 8 `Y8o. `Y8888 8 8888 8 8888 `8.`888b8' 8 8888 .8' `8. `88888. 8 `Y8o. `Y8 8 8888 8 8888 `8.`888' 8 8888 .888888888. `88888. 8 `Y8o.` 8 8888 8 8888 `8.`8' 8 8888 .8' `8. `88888. 8 `Yo 8 888888888888 8 888888888888 `8.` */ #panel-5 { background-image: url('img/p5-bg.png'); background-size: cover; background-position: center; text-align: center; padding-top: 150px; padding-bottom: 75px; } #panel-5 #more-you-order { margin-top: 50px; max-width: 600px; margin-left: auto; margin-right: auto; color: #fff0b6; font-size: 25px; font-weight: 400; } /* 8 888888888o .8. b. 8 8 8888888888 8 8888 `8.`888b ,8' 8 8888 8 8888 `88. .888. 888o. 8 8 8888 8 8888 `8.`888b ,8' 8 8888 8 8888 `88 :88888. Y88888o. 8 8 8888 8 8888 `8.`888b ,8' 8 8888 8 8888 ,88 . `88888. .`Y888888o. 8 8 8888 8 8888 `8.`888b ,8' 8 8888 8 8888. ,88'.8. `88888. 8o. `Y888888o. 8 8 888888888888 8 8888 `8.`888b ,8' 8 8888 8 888888888P'.8`8. `88888. 8`Y8o. `Y88888o8 8 8888 8 8888 `8.`888b ,8' 8 8888 8 8888 .8' `8. `88888. 8 `Y8o. `Y8888 8 8888 8 8888 `8.`888b8' 8 8888 8 8888 .8' `8. `88888. 8 `Y8o. `Y8 8 8888 8 8888 `8.`888' 8 8888 8 8888 .888888888. `88888. 8 `Y8o.` 8 8888 8 8888 `8.`8' 8 8888 8 8888 .8' `8. `88888. 8 `Yo 8 888888888888 8 888888888888 `8.` 8 8888 */ #panel-6 { background-color: white; padding-top: 150px; padding-bottom: 75px; text-align: center; } #panel-6 #newsletter { text-align: center; display: inline-block; vertical-align: top; } #panel-6 #newsletter #up-to-date { color: #ff3a51; font-size: 22px; margin: 50px auto; } #panel-6 #newsletter input { display: block; width: 375px; margin: 30px auto; background-color: #ebebeb; border: 0; border-radius: 25px; height: 30px; padding: 10px; font-size: 20px; box-shadow: inset -1px 3px 4px #bfbfbf; max-width: 80%; } #panel-6 #newsletter button { background-color: rgba(0,0,0,0); background-image: url('img/p6-btn-bg.png'); outline: none; border: 0; font-family: 'PT Sans', sans-serif; font-weight: 700; color: #ff3a51; font-size: 18px; width: 190px; height: 59px; margin-top: 20px; } #panel-6 #newsletter button:hover { cursor: pointer; cursor: hand; color: #AAAAAA; } #panel-6 #newsletter #msg { font-family: 'PT Sans', sans-serif; font-weight: 700; color: #ff3a51; font-size: 18px; margin-top: 20px; } #panel-6 #or { vertical-align: middle; display: inline-block; margin: 75px 50px; } #panel-6 #stalk { display: inline-block; text-align: center; vertical-align: top; } #panel-6 #stalk #icons { margin: 20px; } #panel-6 #stalk #icons img { margin: 0 10px; } #panel-6 #stalk .twitter-timeline { width: 90% !important; height: 310px !important; } /* 8 8888888888 ,o888888o. ,o888888o. 8888888 8888888888 8 8888888888 8 888888888o. 8 8888 . 8888 `88. . 8888 `88. 8 8888 8 8888 8 8888 `88. 8 8888 ,8 8888 `8b ,8 8888 `8b 8 8888 8 8888 8 8888 `88 8 8888 88 8888 `8b 88 8888 `8b 8 8888 8 8888 8 8888 ,88 8 888888888888 88 8888 88 88 8888 88 8 8888 8 888888888888 8 8888. ,88' 8 8888 88 8888 88 88 8888 88 8 8888 8 8888 8 888888888P' 8 8888 88 8888 ,8P 88 8888 ,8P 8 8888 8 8888 8 8888`8b 8 8888 `8 8888 ,8P `8 8888 ,8P 8 8888 8 8888 8 8888 `8b. 8 8888 ` 8888 ,88' ` 8888 ,88' 8 8888 8 8888 8 8888 `8b. 8 8888 `8888888P' `8888888P' 8 8888 8 888888888888 8 8888 `88. */ #footer { background-image: url('img/footer-bg.png'); background-size: cover; background-position: center; text-align: center; padding-top: 50px; padding-bottom: 75px; } #footer button { background-color: rgba(0,0,0,0); outline: none; border: 0; margin-bottom: 150px; } #footer button:hover { cursor: pointer; cursor: hand; } #footer #copyright { color: #fff0b6; font-size: 19px; } /* 8 888888888o. 8 8888888888 d888888o. 8 888888888o ,o888888o. b. 8 d888888o. 8 8888 `8.`888b ,8' 8 8888888888 8 8888 `88. 8 8888 .`8888:' `88. 8 8888 `88. . 8888 `88. 888o. 8 .`8888:' `88. 8 8888 `8.`888b ,8' 8 8888 8 8888 `88 8 8888 8.`8888. Y8 8 8888 `88 ,8 8888 `8b Y88888o. 8 8.`8888. Y8 8 8888 `8.`888b ,8' 8 8888 8 8888 ,88 8 8888 `8.`8888. 8 8888 ,88 88 8888 `8b .`Y888888o. 8 `8.`8888. 8 8888 `8.`888b ,8' 8 8888 8 8888. ,88' 8 888888888888 `8.`8888. 8 8888. ,88' 88 8888 88 8o. `Y888888o. 8 `8.`8888. 8 8888 `8.`888b ,8' 8 888888888888 8 888888888P' 8 8888 `8.`8888. 8 888888888P' 88 8888 88 8`Y8o. `Y88888o8 `8.`8888. 8 8888 `8.`888b ,8' 8 8888 8 8888`8b 8 8888 `8.`8888. 8 8888 88 8888 ,8P 8 `Y8o. `Y8888 `8.`8888. 8 8888 `8.`888b8' 8 8888 8 8888 `8b. 8 8888 8b `8.`8888. 8 8888 `8 8888 ,8P 8 `Y8o. `Y8 8b `8.`8888. 8 8888 `8.`888' 8 8888 8 8888 `8b. 8 8888 `8b. ;8.`8888 8 8888 ` 8888 ,88' 8 `Y8o.` `8b. ;8.`8888 8 8888 `8.`8' 8 8888 8 8888 `88. 8 888888888888 `Y8888P ,88P' 8 8888 `8888888P' 8 `Yo `Y8888P ,88P' 8 8888 `8.` 8 888888888888 */ @media all and (max-width: 1260px) { #panel-1 { padding-top: 75px; } #panel-2::before { content: none; vertical-align: 0; } #panel-2::after { content: none; vertical-align: 0; } #panel-3::before { content: none; vertical-align: 0; } #panel-6 #newsletter { margin: 0 25px; } #panel-6 #or { display: none; } #panel-6 #stalk { margin: 0 25px; } #header #social { right:30px; } } @media all and (max-width: 1220px) { #panel-4 .arrow { display: none; margin: 0; vertical-align: 0; } } @media all and (max-width: 1120px) { #panel-6 #newsletter { display: block; margin: 0; margin-bottom: 100px; } #panel-6 #stalk { display: block; margin: 0; } } @media all and (max-width: 930px) { #header { text-align: left; } #header h1 { margin-left: 30px; } #panel-2 { padding-top: 75px; } #panel-3 { padding-top: 75px; } #panel-3 #p3-contents { margin-left: 0; } #panel-3 #what-it-does { padding: 0 10px; text-align: center; margin-bottom: 0; } #panel-4 { padding-top: 75px; } #panel-4 .info { margin: 25px auto; } #panel-5 { padding-top: 75px; } #panel-6 { padding-top: 75px; } } @media all and (max-width: 500px) { #header { text-align: center; position: static; height: 140px; } #header h1 { margin: 15px 0; } #header #social { margin: 0; display: block; position: static; } #header #social a img { margin: 0 10px; } #panel-1 #download-now { padding: 0 10px; margin: 20px; } #panel-1 #we-ready { margin: 20px 0; } #panel-5 #more-you-order { padding: 0 15px; font-size: 22px; } }