css-app.css 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874
  1. /**
  2. * Backyard
  3. * Landing Page Template
  4. * Author: MoxDesign - http://www.moxdesign.com
  5. **/
  6. html, body {
  7. width: 100%;
  8. overflow-x: hidden;
  9. }
  10. body {
  11. height:100%;
  12. font-family: "Lato", "Serif";
  13. font-weight: 300;
  14. padding:0;
  15. margin:0;
  16. font-size:16px;
  17. line-height: 28px;
  18. color: #777;
  19. background: #fff;
  20. overflow-x:hidden;
  21. position: relative;
  22. }
  23. h1 { font-size: 3em; line-height:1.2em; margin:0 0 .8em; }
  24. h2 { font-size: 1.8em; line-height:1.4em; margin:0 0 .8em; }
  25. h3 { font-size: 1.4em; line-height:1.4em; }
  26. h4 { font-size: 1.25em; line-height:1.4em;}
  27. h5 { font-size: 1.1em; line-height:1.4em; }
  28. h6 { font-size: 1em; line-height:1.2em; }
  29. h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  30. text-decoration: none
  31. }
  32. p {
  33. padding:0 0 1em;
  34. margin:0;
  35. }
  36. a {
  37. color: #3eb0f7;
  38. outline: 0;
  39. font-weight: bold;
  40. -webkit-transition: all .8s ease;
  41. transition: all .8s ease;
  42. }
  43. a:hover {
  44. text-decoration: none;
  45. color: #1f2222;
  46. -webkit-transition: all .8s ease;
  47. transition: all .8s ease;
  48. }
  49. .highlight {
  50. color: #3eb0f7;
  51. }
  52. #preloader {
  53. position: fixed;
  54. left: 0;
  55. top: 0;
  56. z-index: 999;
  57. width: 100%;
  58. height: 100%;
  59. overflow: visible;
  60. background: #fff url(../images/loading.gif) no-repeat center center;
  61. }
  62. .fullscreen {
  63. width:100%;
  64. min-height:100%;
  65. background-repeat:no-repeat;
  66. background-position:50% 50%;
  67. background-position:50% 50%\9 !important;
  68. }
  69. .overlay {
  70. background-color: rgba(0, 0, 0, 0.5);
  71. position: relative;
  72. width: 100%;
  73. height: 100%;
  74. display: block;
  75. }
  76. #menu {
  77. z-index: 999;
  78. }
  79. .navbar-default {
  80. background: rgba(255, 255, 255, 0.95);
  81. box-shadow: 0px 0.5px 2px #cecece;
  82. }
  83. .navbar-default .navbar-brand {
  84. padding: 7px;
  85. }
  86. .navbar-default .navbar-nav > li > a {
  87. color: #777;
  88. font-weight: 500;
  89. }
  90. .navbar-default .navbar-nav > li > a:hover,
  91. .navbar-default .navbar-nav > li > a:focus {
  92. color: #3eb0f7;
  93. }
  94. .navbar-default .navbar-nav > .active > a,
  95. .navbar-default .navbar-nav > .active > a:hover,
  96. .navbar-default .navbar-nav > .active > a:focus {
  97. background: transparent;
  98. color: #3eb0f7;
  99. }
  100. .btn-default {
  101. font-size: 17px;
  102. margin: 30px 0 10px;
  103. margin-right: 10px;
  104. line-height: 20px;
  105. padding: 15px 35px;
  106. height: 50px;
  107. border: 2px solid #3eb0f7;
  108. background: transparent;
  109. transition: all 0.4s;
  110. color: #3eb0f7;
  111. border-radius: 100px;
  112. }
  113. .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
  114. border: 2px solid #3eb0f7;
  115. background: #3eb0f7;
  116. color: white;
  117. }
  118. .btn-primary {
  119. font-size: 17px;
  120. margin: 30px 0 10px;
  121. margin-right: 10px;
  122. line-height: 20px;
  123. padding: 15px 35px;
  124. height: 50px;
  125. border: 2px solid #3eb0f7;
  126. background: #3eb0f7;
  127. transition: all 0.4s;
  128. color: white;
  129. border-radius: 100px;
  130. }
  131. .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
  132. border: 2px solid #3eb0f7;
  133. background: transparent;
  134. color: #3eb0f7;
  135. }
  136. .btn-secondary {
  137. font-size: 20px;
  138. font-weight: 300;
  139. line-height: 20px;
  140. padding: 20px 50px;
  141. height: 65px;
  142. border: none;
  143. background: #3eb0f7;
  144. transition: all 0.4s;
  145. color: white;
  146. border-radius: 4px;
  147. }
  148. .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.active, .open > .dropdown-toggle.btn-secondary {
  149. background: #1f96e0;
  150. color: white
  151. }
  152. .site-name img{
  153. width: 150px;
  154. height: 37px
  155. }
  156. .logo {
  157. margin: 100px 0 40px 0;
  158. }
  159. .logo img{
  160. width: 150px;
  161. height: 37px
  162. }
  163. .landing h1{
  164. font-size: 56px;
  165. font-weight: 300;
  166. color: #fff;
  167. margin: 30px 0 30px 0;
  168. text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  169. }
  170. .landing p {
  171. color: #fff;
  172. }
  173. .landing-text {
  174. margin-bottom: 20px;
  175. }
  176. .landing-text p {
  177. font-size: 17px !important;
  178. }
  179. .more {
  180. margin-bottom: 100px;
  181. }
  182. .more p {
  183. font-size: 17px;
  184. }
  185. .head-btn {
  186. margin-bottom: 40px;
  187. }
  188. .option {
  189. text-transform: uppercase;
  190. padding: 5px;
  191. min-width: 80px;
  192. margin-right: 5px;
  193. transition: all 0.4s;
  194. font-size: 14px;
  195. color: #fff;
  196. }
  197. .option .fa {
  198. font-size: 16px;
  199. margin-right: 10px;
  200. }
  201. .option:hover {
  202. color: #3eb0f7;
  203. }
  204. .header-phone {
  205. margin: 50px 0 100px;
  206. }
  207. #intro {
  208. padding: 100px 0 70px;
  209. }
  210. #intro h2 {
  211. font-size: 40px;
  212. font-weight: 300;
  213. margin: 15px 0 15px 0;
  214. }
  215. .intro-pic {
  216. margin-top: 20px;
  217. }
  218. .btn-section {
  219. padding-top: 20px;
  220. }
  221. #feature {
  222. padding-top: 100px;
  223. background: #f6f6f6;
  224. }
  225. #feature h2 {
  226. margin: 15px 0 15px 0;
  227. font-size: 40px;
  228. font-weight: 300;
  229. }
  230. #feature .feature-title p {
  231. font-size: 18px;
  232. }
  233. .row-feat {
  234. padding-top: 50px;
  235. }
  236. .feat-list {
  237. margin-top: 40px;
  238. }
  239. .feat-list i {
  240. font-size: 48px;
  241. float: left;
  242. width: 20%;
  243. color: #555;
  244. height: 100%;
  245. position: relative;
  246. opacity: 0.6;
  247. -webkit-transition: all .8s ease;
  248. transition: all .8s ease;
  249. }
  250. .feat-list:hover i {
  251. color: #3eb0f7;
  252. -webkit-transition: all .8s ease;
  253. transition: all .8s ease;
  254. }
  255. #feature .inner {
  256. float: left;
  257. display: inline-block;
  258. width: 80%;
  259. }
  260. #feature-2 {
  261. padding: 100px 0 100px;
  262. }
  263. #feature-2 h2 {
  264. font-size: 40px;
  265. font-weight: 300;
  266. margin: 15px 0 15px 0;
  267. }
  268. .feature-2-pic {
  269. margin-top: 20px;
  270. }
  271. .subscribe {
  272. color: #fff;
  273. }
  274. .letter {
  275. margin-top: 100px;
  276. width: 100px;
  277. height: 100px;
  278. line-height: 100px;
  279. font-size: 50px;
  280. color: #3eb0f7;
  281. border-radius: 50%;
  282. border: solid 1px #3eb0f7;
  283. }
  284. .subscribe p {
  285. margin: 30px auto 30px;
  286. }
  287. .subscribe-form {
  288. max-width: 400px;
  289. margin: 50px auto 150px;
  290. text-align: center;
  291. overflow: hidden;
  292. }
  293. .subscribe-form form {
  294. position: relative;
  295. }
  296. .subscribe-form input {
  297. max-width: 85%;
  298. position: relative;
  299. padding: 5px 25px;
  300. }
  301. .subscribe-form .form-control {
  302. border-radius: 4px 0 0 4px;
  303. border: none;
  304. background-color: rgba(255, 255, 255, 0.6);
  305. color: #333;
  306. font-size: 1.2em;
  307. height: 55px;
  308. }
  309. .subscribe-form button {
  310. border-radius: 0 4px 4px 0;
  311. background-color: #3eb0f7;
  312. color: #ffffff;
  313. font-size: 1em;
  314. line-height: 52px;
  315. position: absolute;
  316. top: 0px;
  317. right: 0px;
  318. padding: 0 30px;
  319. margin: 0;
  320. -webkit-transition: all .8s ease;
  321. transition: all .8s ease;
  322. }
  323. .subscribe-form .btn {
  324. height: 55px;
  325. }
  326. .subscribe-form .btn:hover {
  327. background-color: #1f96e0;
  328. color: #fff;
  329. -webkit-transition: all .8s ease;
  330. transition: all .8s ease;
  331. }
  332. .subscribe-form .form-control::-webkit-input-placeholder {
  333. color: #333;
  334. }
  335. .subscribe-form .form-control:-moz-placeholder {
  336. color: #333;
  337. }
  338. .subscribe-form .form-control::-moz-placeholder {
  339. color: #333;
  340. }
  341. .subscribe-form .form-control:-ms-input-placeholder {
  342. color: #333;
  343. }
  344. #screenshot {
  345. padding-top: 100px;
  346. }
  347. .title-line {
  348. width: 100px;
  349. height: 3px;
  350. margin: 0 auto;
  351. background: #3eb0f7;
  352. }
  353. .screenshots {
  354. padding-top: 50px;
  355. padding-bottom: 100px;
  356. }
  357. .screenshots .screen {
  358. background: #FFFFFF;
  359. padding: 10px;
  360. margin: 13px;
  361. display: block;
  362. }
  363. .screenshots .screen img {
  364. width: 100%;
  365. border-radius: 4px;
  366. border: solid 3px #dadada;
  367. -webkit-transition: all .8s ease;
  368. transition: all .8s ease;
  369. }
  370. .screenshots .screen img:hover {
  371. border: solid 3px #3eb0f7;
  372. -webkit-transition: all .8s ease;
  373. transition: all .8s ease;
  374. }
  375. .modal-backdrop.in {
  376. background-color: #000;
  377. }
  378. .ekko-lightbox .modal-content {
  379. -webkit-box-shadow: none;
  380. -moz-box-shadow: none;
  381. box-shadow: none;
  382. -webkit-border-radius: 0;
  383. -moz-border-radius: 0;
  384. border-radius: 0;
  385. border: none;
  386. background-color: transparent;
  387. }
  388. .ekko-lightbox .modal-header {
  389. border: 0;
  390. padding-left: 0;
  391. padding-right: 0;
  392. }
  393. .ekko-lightbox .modal-header .close {
  394. -webkit-opacity: 0.7;
  395. -moz-opacity: 0.7;
  396. opacity: 0.7;
  397. color: #fff;
  398. text-shadow: 0;
  399. font-weight: 100;
  400. margin-top: 5px;
  401. }
  402. .ekko-lightbox .modal-header .close:hover {
  403. -webkit-opacity: 1;
  404. -moz-opacity: 1;
  405. opacity: 1;
  406. }
  407. .ekko-lightbox .modal-header h4.modal-title {
  408. font-weight: 100;
  409. color: #fff;
  410. padding: 0;
  411. }
  412. .ekko-lightbox .modal-body {
  413. padding: 0;
  414. }
  415. .ekko-lightbox .modal-footer {
  416. -webkit-opacity: 0.9;
  417. -moz-opacity: 0.9;
  418. opacity: 0.9;
  419. border: 0;
  420. color: #fff;
  421. font-weight: 100;
  422. padding: 0;
  423. }
  424. .ekko-lightbox-nav-overlay a {
  425. -webkit-opacity: 0.9;
  426. -moz-opacity: 0.9;
  427. opacity: 0.9;
  428. text-shadow: none;
  429. }
  430. #client {
  431. background: #f6f6f6;
  432. padding: 70px 0 70px;
  433. }
  434. #client img {
  435. max-height: 50px;
  436. margin: 0 20px;
  437. opacity: 1;
  438. transition: all 0.3s ease;
  439. -webkit-transition: all 0.3s ease;
  440. -moz-transition: all 0.3s ease;
  441. }
  442. #client img:hover {
  443. opacity: 0.7;
  444. transition: all 0.3s ease;
  445. -webkit-transition: all 0.3s ease;
  446. -moz-transition: all 0.3s ease;
  447. }
  448. #testi {
  449. padding: 100px 0 100px;
  450. }
  451. .testi-item {
  452. display: block;
  453. width: 100%;
  454. height: auto;
  455. position: relative;
  456. margin-top: 30px;
  457. }
  458. .testi-item .box {
  459. margin-right: 15px;
  460. margin-left: 15px;
  461. }
  462. .testi-item .box .message {
  463. padding: 20px;
  464. font-style: italic;
  465. line-height: 30px;
  466. font-weight: 300;
  467. font-size: 20px;
  468. }
  469. .testi-item .client-pic img {
  470. width: 70px;
  471. height: 70px;
  472. border-radius: 50%;
  473. max-width: 100%;
  474. }
  475. .testi-item .client-info .client-name {
  476. margin-top: 10px;
  477. font-size: 16px;
  478. }
  479. .testi-item .client-info .company {
  480. font-style: italic;
  481. color: #3eb0f7;
  482. }
  483. .owl-theme .owl-controls .owl-page span{
  484. background: #3eb0f7;
  485. }
  486. .action {
  487. color: #fff;
  488. }
  489. .action h2 {
  490. margin-top: 100px;
  491. font-size: 40px;
  492. font-weight: 300;
  493. }
  494. .download-store {
  495. padding: 50px 0 130px;
  496. }
  497. .download-store li {
  498. display: inline-block;
  499. list-style: none;
  500. margin-left: 10px;
  501. }
  502. .appstorebutton {
  503. height: 65px;
  504. width: 195px;
  505. position: relative;
  506. border-radius: 4px;
  507. }
  508. .iphone {
  509. background: #3eb0f7;
  510. transition: all 0.3s ease;
  511. -webkit-transition: all 0.3s ease;
  512. -moz-transition: all 0.3s ease;
  513. }
  514. .iphone:hover {
  515. background-color: #1f96e0;
  516. transition: all 0.3s ease;
  517. -webkit-transition: all 0.3s ease;
  518. -moz-transition: all 0.3s ease;
  519. }
  520. .android {
  521. background: #555;
  522. transition: all 0.3s ease;
  523. -webkit-transition: all 0.3s ease;
  524. -moz-transition: all 0.3s ease;
  525. }
  526. .android:hover {
  527. background-color: #444;
  528. transition: all 0.3s ease;
  529. -webkit-transition: all 0.3s ease;
  530. -moz-transition: all 0.3s ease;
  531. }
  532. .appstorebutton a {
  533. color: white;
  534. text-decoration: none;
  535. }
  536. .appstorebutton p {
  537. font-size: 20px;
  538. font-weight: 300;
  539. text-align: left;
  540. color: white;
  541. padding: 10px 0 0 65px;
  542. line-height: 1;
  543. }
  544. .appstorebutton p small {
  545. font-size: 16px;
  546. }
  547. .appstorebutton i {
  548. position: absolute;
  549. top: 0;
  550. left: 0;
  551. margin: 10px 0 0 17px;
  552. font-size: 40px;
  553. }
  554. #footer {
  555. background: #fff;
  556. padding: 50px 0 50px;
  557. }
  558. .social ul {
  559. padding: 0;
  560. list-style: none;
  561. }
  562. .social li {
  563. display: inline-block;
  564. padding-right: .3em;
  565. }
  566. .social li a {
  567. display: block;
  568. width: 40px;
  569. height: 40px;
  570. line-height: 40px;
  571. color: #3eb0f7;
  572. border-radius: 50%;
  573. background: #fff;
  574. border: solid 1px #3eb0f7;
  575. -webkit-transition: all .8s ease;
  576. transition: all .8s ease;
  577. }
  578. .social li a:hover {
  579. color: #fff;
  580. background: #3eb0f7;
  581. }
  582. .scrollToTop{
  583. width: 40px;
  584. height: 40px;
  585. padding: 5px;
  586. font-size: 30px;
  587. text-align: center;
  588. background: rgba(0, 0, 0, 0.2);
  589. color: white;
  590. position: fixed;
  591. bottom: 20px;
  592. right: 20px;
  593. border-radius: 50%;
  594. display: none;
  595. }
  596. .scrollToTop:hover{
  597. color: #3eb0f7;
  598. }
  599. .control-group .controls {
  600. overflow-x: hidden;
  601. }
  602. /* iPads (portrait) ----------- */
  603. @media only screen
  604. and (min-width : 768px)
  605. and (max-width : 1024px)
  606. and (orientation : portrait) {
  607. .more {
  608. margin-bottom: 50px;
  609. }
  610. #intro {
  611. padding: 30px 0 50px;
  612. }
  613. #intro h2, #feature-2 h2 {
  614. font-weight: 150;
  615. text-align: center;
  616. }
  617. #intro p, #feature-2 p {
  618. text-align: center;
  619. }
  620. .btn-section {
  621. text-align: center;
  622. }
  623. #feature {
  624. padding-top: 75px;
  625. }
  626. .row-feat {
  627. padding-top: 40px;
  628. padding-bottom: 40px;
  629. }
  630. #feature-2 {
  631. padding: 80px 0 100px;
  632. }
  633. .feature-2-pic {
  634. margin-top: 40px;
  635. }
  636. #client img {
  637. margin: 10px 0 10px;
  638. max-height: 40px;
  639. }
  640. }
  641. /* iPads (landscape) ----------- */
  642. @media only screen
  643. and (min-width : 768px)
  644. and (max-width : 1024px)
  645. and (orientation : landscape) {
  646. .logo {
  647. margin: 100px 0 30px 0;
  648. }
  649. .landing h1{
  650. margin: 60px 0 60px 0;
  651. }
  652. .landing-text {
  653. margin: 60px 0 40px 0;
  654. }
  655. .more {
  656. margin-bottom: 180px;
  657. }
  658. .header-phone {
  659. margin-top: 125px;
  660. }
  661. .intro-pic {
  662. margin-top: 100px;
  663. }
  664. .feature-img {
  665. margin-top: 30px;
  666. }
  667. .feat-list {
  668. margin-top: 10px;
  669. }
  670. .feat-list p {
  671. font-size: 15px;
  672. }
  673. .feature-2-pic {
  674. margin-top: 50px;
  675. }
  676. #client img {
  677. max-height: 45px;
  678. }
  679. }
  680. /* smart-phone ----------- */
  681. @media (max-width: 767px) {
  682. .logo {
  683. margin: 40px 0 30px 0;
  684. }
  685. .more {
  686. margin-bottom: 40px;
  687. }
  688. #intro {
  689. padding: 70px 0 70px;
  690. }
  691. #intro h2, #feature-2 h2 {
  692. font-weight: 150;
  693. text-align: center;
  694. }
  695. #intro p, #feature-2 p {
  696. text-align: center;
  697. }
  698. .btn-section {
  699. text-align: center;
  700. }
  701. .feat-list i {
  702. padding-left: 40px;
  703. }
  704. .feature-2-pic {
  705. margin-top: 50px;
  706. }
  707. #client img {
  708. margin: 10px 0 10px;
  709. }
  710. }
  711. /* iPhone 6Plus (landscape) ----------- */
  712. @media (max-width: 736px) {
  713. }
  714. /* iPhone 6 (landscape) ----------- */
  715. @media (max-width: 667px) {
  716. .logo {
  717. margin: 30px 0 30px 0;
  718. }
  719. .landing h1{
  720. font-size: 50px;
  721. margin: 10px 0 25px 0;
  722. }
  723. .landing-text {
  724. margin-top: 20px;
  725. }
  726. .letter {
  727. margin-top: 75px
  728. }
  729. .subscribe p {
  730. margin: 25px auto 15px;
  731. }
  732. .subscribe-form {
  733. margin: 20px auto 100px;
  734. }
  735. .action h2 {
  736. margin-top: 70px;
  737. }
  738. .download-store {
  739. padding: 20px 0 100px;
  740. }
  741. }
  742. /* iPhone 5 (landscape) ----------- */
  743. @media (max-width: 568px){
  744. .logo {
  745. margin: 15px 0 15px 0;
  746. }
  747. .landing h1{
  748. font-size: 40px;
  749. margin: 20px 0 10px 0;
  750. }
  751. .landing-text p {
  752. font-size: 16px !important;
  753. }
  754. #intro {
  755. padding-top: 50px;
  756. }
  757. #feature {
  758. padding-top: 50px;
  759. }
  760. .feat-list i {
  761. padding-left: 20px;
  762. }
  763. #feature-2 {
  764. padding: 50px 0 70px;
  765. }
  766. #screenshot {
  767. padding-top: 70px;
  768. }
  769. .screenshots {
  770. padding-top: 30px;
  771. padding-bottom: 70px;
  772. }
  773. #testi {
  774. padding: 70px 0 70px;
  775. }
  776. .testi-item .box .message {
  777. line-height: 25px;
  778. font-size: 18px;
  779. }
  780. .action h2 {
  781. margin: 50px 0 20px;
  782. }
  783. .download-text p {
  784. line-height: 1.5;
  785. }
  786. .download-store {
  787. padding: 10px 0 70px;
  788. }
  789. }
  790. /* iPhone 4 (landscape) ----------- */
  791. @media (max-width: 480px) {
  792. .feat-list i {
  793. padding-left: 5px;
  794. }
  795. .action h2 {
  796. font-size: 30px;
  797. }
  798. }
  799. /* smart phone width: 360px ----------- */
  800. @media (max-width: 360px) {
  801. #intro h2, #feature h2, #feature-2 h2 {
  802. font-size: 30px;
  803. }
  804. .feat-list i {
  805. padding-left: 0;
  806. }
  807. #feature .inner {
  808. padding-left: 15px;
  809. }
  810. .appstorebutton {
  811. margin-bottom: 15px;
  812. }
  813. .download-store li {
  814. margin-left: 0;
  815. }
  816. }
  817. /* iPhone 4/5 (portrait) ----------- */
  818. @media (max-width: 320px) {
  819. .logo {
  820. margin: 30px 0 20px 0;
  821. }
  822. .landing h1{
  823. margin: 20px 0 35px 0;
  824. }
  825. .more {
  826. text-align: center;
  827. }
  828. .more p {
  829. font-size: 14px;
  830. }
  831. .option {
  832. padding: 3px;
  833. min-width: 75px;
  834. margin-right: 2px;
  835. }
  836. .btn-default {
  837. font-size: 16px;
  838. margin: 30px 0 10px;
  839. padding: 15px 30px;
  840. height: 35px;
  841. border-radius: 80px;
  842. }
  843. .btn-primary {
  844. font-size: 16px;
  845. margin: 30px 0 10px;
  846. margin-right: 15px;
  847. padding: 15px 30px;
  848. height: 35px;
  849. border-radius: 80px;
  850. }
  851. .subscribe-form {
  852. margin: 50px auto 110px;
  853. }
  854. .subscribe-form input {
  855. padding: 5px 15px;
  856. }
  857. .subscribe-form button {
  858. padding: 0 15px;
  859. }
  860. .action h2 {
  861. margin: 70px 0 20px;
  862. }
  863. }