Advertisement
Guest User

Untitled

a guest
Dec 11th, 2018
81
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.75 KB | None | 0 0
  1. /* Fast Home Solutions Landing Page */
  2. body {
  3. background-color: #fff;
  4. padding-bottom:40px;
  5. font-size: 2em;
  6. }
  7. @media (max-width: 768px) {
  8. body {
  9. font-size: 1.5em;
  10. }
  11.  
  12. }
  13.  
  14. img{
  15. vertical-align: unset;
  16. }
  17. /*
  18. @media (max-width: 768px) {
  19. img{
  20. width: 10%;
  21. height: 10%;
  22. }
  23. }*/
  24.  
  25. hr{
  26. border-top: 1px solid grey;
  27. }
  28.  
  29. @media (max-width: 768px) {
  30. p {
  31. font-size: 1em;
  32. }
  33. }
  34.  
  35. .form-control {
  36. color:#888;
  37. }
  38. /*@media (min-width: 992px) {
  39. p {
  40. font-size: 1.1em;
  41. line-height: 1.44;
  42. }
  43. }*/
  44.  
  45. .socalicons{
  46. width: 100%;
  47. }
  48.  
  49. .header-link {
  50. width: 240px;
  51. background: #7CB342;
  52. padding: 5px 0px;
  53. color: #fff;
  54. font-size: 30px;
  55. border-radius: 6px;
  56. float: right;
  57. overflow: hidden;
  58. text-align: center;
  59. margin-top: 30px;
  60. }
  61.  
  62. .header-link a{
  63. color: #fff;
  64. text-decoration: underline;
  65. }
  66.  
  67. .header-link a:link, a:visited, a:hover, a:active {
  68. color: #fff;
  69. text-decoration: none;
  70. }
  71.  
  72.  
  73.  
  74. @media (max-width: 768px) {
  75. .socialMediaDiv{
  76. padding: 0 5%
  77. }
  78. .socialMediaDiv img {
  79. width: 95%;
  80. }
  81. }
  82.  
  83. li{
  84. list-style-type:none;
  85. }
  86.  
  87. .greyCntHmeDiv{
  88. background: #e8e8e8;
  89. padding: 10px;
  90. margin-top: 10px;
  91. font-size: 3rem;
  92. }
  93.  
  94. @media (max-width: 768px) {
  95. .greyCntHmeDiv {
  96. font-size: 1em;
  97. }
  98. }
  99.  
  100. .greyCntHmeDivInn img{
  101. vertical-align: baseline;
  102. }
  103.  
  104. .check{
  105. color:blue;
  106. }
  107.  
  108. .listDivGrey{
  109. color: #888;
  110. }
  111.  
  112. input.form-control{
  113. background-color: #7CB342;
  114. color: white;
  115. font-size:34px;
  116. display:block;
  117. padding:30px 15px;
  118. }
  119.  
  120.  
  121.  
  122. .bottom-box-section {
  123. display:block;
  124. }
  125.  
  126. .sellCntDiv{
  127. margin-top: 10px;
  128. color: black;
  129. }
  130. .sellCntDiv p{
  131. margin-top: 10px;
  132. color: black;
  133. }
  134.  
  135. .title{
  136. font-size: 1.4em;
  137. }
  138.  
  139. @media (max-width: 768px) {
  140. .sellCntDiv {
  141. font-size: 1em;
  142. }
  143.  
  144. }
  145.  
  146. @media (max-width: 768px) {
  147. .sellCntTxt p {
  148. font-size: .6em;
  149. }
  150. }
  151.  
  152. @media (max-width: 768px) {
  153. .listDivGreyMobile{
  154. display:none;
  155. }
  156. }
  157.  
  158. #main-logo-wrap {
  159. margin-bottom: 3px;
  160. }
  161. #main-logo-wrap a {
  162. display:inline-block;
  163. }
  164. #main-logo-wrap {
  165. text-align: center;
  166. }
  167. .bottom-box-section {
  168. width: 100%;
  169. margin: auto;
  170. clear: both;
  171. overflow: hidden;
  172. display: block;
  173. }
  174.  
  175. #box-1, #box-2, #box-3, #box-4, #box-5, #box-6 {
  176. padding: 0px;
  177. width: 100%;
  178. font-size: 1.1em;
  179. line-height: 1.5;
  180. border: 1px solid transparent;
  181. background-color: #fff;
  182.  
  183. }
  184.  
  185. @media (min-width: 768px) {#box-1, #box-2, #box-3, #box-4, #box-5, #box-6 {
  186. width: 33%;
  187. }}
  188.  
  189. #box-1 div, #box-2 div, #box-3 div, #box-4 div, #box-5 div, #box-6 div {
  190. color:#a6a6a6;
  191. }
  192.  
  193. #box-1, #box-2, #box-3, #box-4, #box-5, #box-6 {
  194. border-bottom:4px;
  195. }
  196.  
  197. @media (min-width: 768px) {
  198. .bottom-box-section {
  199. display: table;
  200. table-layout: fixed;
  201. width: 100%;
  202. border-collapse:collapse;
  203. }
  204.  
  205. #main-logo-wrap,
  206. #box-1, #box-2, #box-3, #box-4, #box-5, #box-6 {
  207. display: inline-block;
  208. }
  209.  
  210. #main-logo-wrap {
  211. vertical-align: middle;
  212. }
  213. #box-1, #box-2, #box-3, #box-4, #box-5, #box-6 {
  214. width: 49%;
  215. vertical-align: top;
  216. border-collapse: collapse;
  217. }
  218. #main-logo-wrap {
  219. text-align: left;
  220. margin-bottom: 0;
  221. }
  222.  
  223. }
  224.  
  225. @media (min-width: 768px) {
  226. #main-logo-wrap {width:60%; margin-bottom:0;}
  227.  
  228. }
  229. @media (min-width: 992px) {
  230. #main-logo-wrap {width:70%;}
  231.  
  232. }
  233. #main-logo {
  234. display: inline-block;
  235. /*max-width: 100%;*/
  236. height: auto;
  237. width: 238px;
  238. }
  239.  
  240. @media (max-width: 768px) {
  241. #main-logo {
  242. max-width: 154%;
  243. padding: 10px 0;
  244. }
  245. }
  246.  
  247. div.main-content {
  248. background-image: url(../img/banner.jpg);
  249. background-position: center 25%;
  250. background-repeat: no-repeat;
  251. background-size: cover;
  252. position: relative;
  253. min-height: 514px;
  254. /*border-top: 10px solid #cfe0ef;*/
  255. background-color: #cfe0ef;
  256. }
  257.  
  258. div.main-content-inner {
  259. padding:35px 0;
  260. }
  261.  
  262. @media (min-width: 768px) {
  263. div.main-content-inner {
  264. padding: 45px 0;
  265. }
  266. }
  267. div.img-filter {
  268. position: absolute;
  269. width: 100%;
  270. height: 100%;
  271. background-color: none;
  272. }
  273. #main-form {
  274. margin: 0 auto;
  275. width: 90%;
  276. background-color: rgba(0,0,0,.5);
  277. position: relative;
  278. padding: 24px 21px;
  279. text-align: center;
  280. box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
  281. }
  282.  
  283. #thank #main-form h1 {font-size:1.7em; margin-bottom:14px;}
  284. #thank #main-form p {font-size:1.1em; line-height: 1.5;}
  285. @media (min-width: 768px) {
  286. #thank #main-form h1, #thank #main-form p {text-align:left;}
  287. }
  288. @media (min-width: 992px) {
  289. #thank #main-form h1 {font-size:2em; margin-bottom:18px;}
  290. #thank #main-form p {font-size:1.2em;}
  291. }
  292.  
  293. #main-form h1 + p {
  294. margin:0;
  295. color: #777;
  296. font-size:.97em;
  297. line-height: 1.3;
  298. }
  299. #thank #main-form h1 {
  300. font-weight: bold;
  301. }
  302. #main-form h1 {
  303. font-size:3rem;
  304. line-height: 1.3;
  305. margin-bottom:4px;
  306. color: white;
  307. font-weight: bold;
  308. margin: 1rem 0 2rem;
  309. }
  310. /*@media (min-width: 768px) {
  311. #main-form h1 {
  312. font-size:1.4em;
  313. }
  314. }
  315. @media (min-width: 992px) {
  316. #main-form h1 {
  317. font-size:1.6em;
  318. }
  319. }
  320. @media (min-width: 1200px) {
  321. #main-form h1 {
  322. font-size:1.7em;
  323. }
  324. } */
  325. @media (max-width: 741px) {
  326. #main-form h1 {
  327. font-size: 1.5rem;
  328. }
  329. }
  330. #main-form label {
  331. position: absolute;
  332. top:0;
  333. left:25px;
  334. opacity: 0;
  335. background-color: rgba(255,255,255,.60);
  336. }
  337. @media (min-width: 768px) {
  338. #main-form {
  339. /*margin: 0 auto 0 0;*/
  340. width: 80%;
  341. }
  342. }
  343. .bottom-box-section img {
  344. margin-top:0;
  345. line-height: 1.25;
  346. margin-bottom:5px;
  347.  
  348. }
  349. @media (min-width: 768px) {
  350. .bottom-box-section img {
  351. line-height: 1.25;
  352. }
  353. }
  354. @media (min-width: 992px) {
  355. .bottom-box-section img {
  356. line-height: 1.25;
  357. }
  358. }
  359. @media (min-width: 1200px) {
  360. .bottom-box-section img {
  361. line-height: 1.25;
  362. }
  363. }
  364. hr.FHShr {
  365. color: #a6a6a6;;
  366. background-color: #a6a6a6;;
  367. border-top: 2px solid #a6a6a6;;
  368. margin: 19px 0;
  369. }
  370. .bottom-box {
  371. padding: 25px 6% 0;
  372. text-align: center;
  373. max-width: 270px;
  374. margin: 0 auto;
  375. }
  376. @media (min-width: 550px) {
  377. .bottom-box {
  378. text-align: left;
  379. margin: 0;
  380. max-width: initial;
  381. position: relative;
  382. background-repeat: no-repeat;
  383. background-position: left top;
  384. padding: 0;
  385. padding-left: 75px;
  386. min-height: 74px;
  387. padding-top: 10px;
  388. padding-right: 25px;
  389. margin-top: 20px;
  390. }
  391. #box-1 .bottom-box {background-image: url(../img/1-img.png);}
  392. #box-2 .bottom-box {background-image: url(../img/2-img.png);}
  393. #box-3 .bottom-box {background-image: url(../img/3-img.png);}
  394. #box-4 .bottom-box {background-image: url(../img/4-img.png);}
  395. #box-5 .bottom-box {background-image: url(../img/5-img.png);}
  396. #box-6 .bottom-box {background-image: url(../img/6-img.png);}
  397. }
  398. @media (min-width: 768px) {
  399. .bottom-box {
  400. margin-top: 24px;
  401. }
  402. }
  403.  
  404.  
  405. .number-icon {
  406. margin: 0 auto;
  407. }
  408. @media (min-width: 769px) {
  409. .number-icon {
  410. display:none;
  411. }}
  412.  
  413. @media (max-width: 768px) {
  414. #addr{
  415. width: 100%;
  416. }
  417. }
  418.  
  419. .btn-default {
  420. color:#FFF;
  421. background-color: #f77a00;
  422. border-color: white;
  423. font-size: 1.15em;
  424. font-weight: bold;
  425. width: 92%;
  426. max-width:315px;
  427. white-space: normal;
  428. overflow: hidden;
  429. padding: 9px 12px;
  430. border-radius: 7px;
  431. margin-top:20px;
  432. }
  433.  
  434. @media (max-width: 768px) {
  435. .btn-default {
  436. color:#FFF;
  437. background-color: #f77a00;
  438. border-color: white;
  439. font-size: 1.8rem;
  440. font-weight: bold;
  441. width: 100%;
  442. overflow: hidden;
  443. padding: 9px 12px;
  444. border-radius: 7px;
  445. margin-top:20px;
  446. }
  447. }
  448.  
  449. @media (min-width: 768px) {
  450. .btn-default {
  451. width: 80%;
  452. }
  453. }
  454. @media (min-width: 992px) {
  455. .btn-default {
  456. font-size: 1.2em;
  457. }
  458. }
  459. .btn-default:focus,
  460. .btn-default.focus {
  461. color: #FFF;
  462. background-color: #f57700;
  463. border-color: #ecc133;
  464. outline:none;
  465. }
  466. .btn-default:hover {
  467. color: #FFF;
  468. background-color: #f57700;
  469. border-color: #ecc133;
  470. outline:none;
  471. }
  472. .btn-default:active,
  473. .btn-default.active,
  474. .open > .dropdown-toggle.btn-default {
  475. color: #FFF;
  476. background-color: #f57700;
  477. border-color: #ecc133;
  478. outline:none;
  479. }
  480. .btn-default:active:hover,
  481. .btn-default.active:hover,
  482. .open > .dropdown-toggle.btn-default:hover,
  483. .btn-default:active:focus,
  484. .btn-default.active:focus,
  485. .open > .dropdown-toggle.btn-default:focus,
  486. .btn-default:active.focus,
  487. .btn-default.active.focus,
  488. .open > .dropdown-toggle.btn-default.focus {
  489. color: #FFF;
  490. background-color: #f57700;
  491. border-color: #ecc133;
  492. }
  493. .btn-default:active,
  494. .btn-default.active,
  495. .open > .dropdown-toggle.btn-default {
  496. background-image: none;
  497. }
  498. .btn-default.disabled:hover,
  499. .btn-default[disabled]:hover,
  500. fieldset[disabled] .btn-default:hover,
  501. .btn-default.disabled:focus,
  502. .btn-default[disabled]:focus,
  503. fieldset[disabled] .btn-default:focus,
  504. .btn-default.disabled.focus,
  505. .btn-default[disabled].focus,
  506. fieldset[disabled] .btn-default.focus {
  507. background-color: #f57700;
  508. border-color: #ecc133;
  509. }
  510. .btn-default .badge {
  511. color: #fff;
  512. background-color: #f1c62a;
  513. }
  514. a.mobile-link {
  515. text-decoration: #a6a6a6;
  516. }
  517. #thank .main-content {
  518. min-height: 514px;
  519. height:auto;
  520. }
  521. #thank-msg {line-height: 1.3;}
  522. #thank-msg > :first-child {
  523. margin-bottom:5px;
  524. color: #FFF;
  525. }
  526. .form-control {
  527. border: 1px solid white;
  528. border-radius: 8px;
  529. }
  530. .form-control:focus {
  531. border-color: #f6c822;
  532. outline: 0;
  533. -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(245, 217, 121,.6);
  534. box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(245, 217, 121,.6);
  535. }
  536. /*
  537. @media (min-width: 992px) {#form-col {
  538. padding-right:0;
  539. }}
  540. */
  541. input.form-control::-webkit-input-placeholder {
  542. color: white;
  543. }
  544. input.form-control::-moz-placeholder {
  545. color: white;
  546. }
  547. input.form-control:-ms-input-placeholder {
  548. color: white;
  549. }
  550. input.form-control:-moz-placeholder {
  551. color: white;
  552. }
  553.  
  554. @media (max-width: 768px) {
  555. input.form-control{
  556. font-weight:bold;
  557. input.form-control{
  558. background-color: #7CB342;
  559. color: white;
  560. font-size:1.6rem;
  561. display:block;
  562. padding:20px 15px;
  563. }
  564. }
  565.  
  566. }
  567.  
  568. .bannerDivCont {
  569. width: 457px;
  570. max-width: 100%;
  571. margin: 38px auto 0;
  572. }
  573. @media (min-width: 768px) {.bannerDivCont {
  574. margin: 56px auto 0;
  575. } }
  576. .form-group {
  577. margin-bottom: 8px;
  578. }
  579. @media (min-width: 550px) {.form-group {
  580. float: left;
  581. width: 48%;
  582. margin-right: 2%;
  583. }}
  584. #getstarted {
  585. margin-top: 17px;
  586. margin-bottom: 15px;
  587. }
  588. #getstarted span {
  589. /*font-size: 1.6em;*/
  590. vertical-align: middle;
  591. }
  592.  
  593.  
  594. /*@media (min-width: 992px) {#getstarted span {
  595. font-size: 1.7em;
  596. }}*/
  597.  
  598. .footer{
  599. text-align: center;
  600. }
  601.  
  602. .footer a{
  603. color:#7CB342;
  604. }
  605.  
  606. /*@media (max-width: 768px) {
  607. .greyCntHmeDivInn img{
  608. width:50%;
  609. }
  610. }*/
  611.  
  612. .listDivGrey ul {
  613. list-style: none;
  614. padding: 0;
  615. margin: 0;
  616. font-size: 2rem;
  617. }
  618.  
  619. @media (max-width:576px)
  620. {
  621. .listDivGrey ul {font-size:1.5rem;}
  622. }
  623.  
  624. @media (min-width:768px) {
  625. .listDivGrey ul li {display:inline-block;width:48%;margin:0.5rem 0;}
  626. .listDivGrey ul li:nth-child(2n) {float:right;}
  627. }
  628.  
  629.  
  630. .listDivGrey .chatPic{
  631. width: 90%;
  632. }
  633.  
  634. @media (max-width: 768px){
  635. .homeHR{display:none;}
  636. .listDivGrey .chatPic{
  637. width: 295%;
  638. margin: 55% 0 0 -200%;;
  639. }
  640. }
  641.  
  642. @media (max-width: 768px){
  643. .footer{display:none;}
  644. }
  645.  
  646.  
  647. .header-link-mobile {display: none;}
  648. .boxes-mobile {display: none;}
  649.  
  650. @media (max-width: 768px){
  651. .boxes-desktop {display:none;}
  652. .boxes-mobile {display: block;}
  653.  
  654. .header-link-desktop {display: none;}
  655. .header-link-mobile {display: block;}
  656. }
  657.  
  658. #main-form label.error {
  659.  
  660. position: relative;
  661. color: red;
  662. opacity: 1;
  663. left: 0;
  664. font-size: 1.5rem;
  665. background-color: inherit;
  666. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement