Konark

Untitled

May 5th, 2017
120
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 16.05 KB | None | 0 0
  1. @import "begin_reset.css";
  2. @import url('https://fonts.googleapis.com/css?family=Hind|Roboto+Condensed:700|Titillium+Web:300,400,600,700');
  3. @font-face {
  4.     font-family: IconFont;
  5.     src: url("../font/fontello.ttf");
  6. }
  7.  
  8. .header_top {
  9.     border-bottom: 1px solid #dcdcdc;
  10. }
  11.  
  12. .header_top_inner .top_information {
  13.     float: left;
  14.     font-family: "Titillium Web",sans-serif;
  15.     font-size: 13px;
  16.     color: #3d3d47;
  17.     font-weight: 600;
  18.     padding-top: 12px;
  19. }
  20.  
  21. .top_information .location {
  22.     display: inline-block;
  23.     margin-right: 25px;
  24.     padding: 0;
  25. }
  26.  
  27.     .top_information .location:before {
  28.         font-family: IconFont;
  29.         content: "\e800";
  30.         margin-right: 10px;
  31.         color: #ffb81e;
  32.         font-size: 15px;
  33.     }
  34.  
  35. .top_information .email {
  36.     display: inline-block;
  37.     padding: 0;
  38. }
  39.  
  40.     .top_information .email:before {
  41.         font-family: IconFont;
  42.         content: "\e801";
  43.         margin-right: 10px;
  44.         color: #ffb81e;
  45.         font-size: 15px;
  46.     }
  47.  
  48. .header_top_inner .call_us {
  49.     float: right;
  50.     font-size: 20px;
  51.     padding: 12px 20px 12px 40px;
  52.     background: #ffbf11;
  53.     font-family: "Titillium Web",sans-serif;
  54.     color: #262626;
  55.     font-weight: 700;
  56.     position: relative;
  57. }
  58.  
  59.     .header_top_inner .call_us:before {
  60.         font-family: IconFont;
  61.         content: "\e802";
  62.         color: #ffffff;
  63.         font-size: 18px;
  64.         position: absolute;
  65.         left: 15px;
  66.     }
  67.  
  68. .header_bottom {
  69.     padding-top: 25px;
  70.     padding-bottom: 28px;
  71. }
  72.  
  73. .header_bottom .logo {
  74.     float: left;
  75. }
  76.  
  77. .header_bottom .request {
  78.     float: right;
  79.     margin-top: 6px;
  80.     margin-left: 25px;
  81. }
  82.  
  83. .header_bottom .request a {
  84.     color: #ffba13;
  85.     text-decoration: none;
  86.     font-family: "Titillium Web",sans-serif;
  87.     font-weight: 700;
  88.     text-transform: uppercase;
  89.     display: block;
  90.     padding: 14px 18px;
  91.     font-size: 14px;
  92.     line-height: 14px;
  93.     background: #005c8c;
  94.     border-radius: 5px;
  95.     transition: opacity 0.3s ease;
  96. }
  97.  
  98.     .header_bottom .request a:hover {
  99.         opacity: 0.8;
  100.     }
  101.  
  102. .header_bottom .search {
  103.     float: right;
  104.     margin-left: 27px;
  105.     position: relative;
  106. }
  107.  
  108. .header_bottom .search_block.no-active {
  109.     opacity: 0;
  110.     visibility: hidden;
  111.     position: absolute;
  112.     top: 0;
  113.     left:0;
  114.     transition: opacity 0.5s, visibility 0.5s ease;
  115. }
  116.  
  117.     .header_bottom .search_block.no-active input {
  118.         width: 0;
  119.         transition: width 0.3s ease;
  120.         border: 1px solid #dcdcdc;
  121.         height: 30px;
  122.         margin-top: 14px;
  123.         padding: 0 10px;
  124.         font-family: Hind, sans-serif;
  125.         color: #000000;
  126.         font-size: 14px;
  127.     }
  128.  
  129.     .header_bottom .search_block.no-active input::placeholder {
  130.         font-family: Hind, sans-serif;
  131.         color: #000000;
  132.         font-size: 14px;
  133.     }
  134.  
  135. .search-cancel {
  136.     position: absolute;
  137.     top: 65%;
  138.     right: 5px;
  139.     transform: translate(-50%, -50%);
  140.     background: none;
  141.     border: 0;
  142.     cursor: pointer;
  143. }
  144.  
  145. .search-cancel:before {
  146.     content: "";
  147.     width: 8px;
  148.     height: 1px;
  149.     background: #898a8d;
  150.     transform: rotate(45deg);
  151.     position: absolute;
  152. }
  153.  
  154. .search-cancel:after {
  155.     content: "";
  156.     width: 8px;
  157.     height: 1px;
  158.     background: #898a8d;
  159.     transform: rotate(-45deg);
  160.     position: absolute;
  161. }
  162.  
  163. .header_bottom .search_block.active {
  164.     opacity: 1;
  165.     visibility: visible;
  166.     position: relative;
  167. }
  168.  
  169.     .header_bottom .search_block.active input {
  170.         width: 150px;
  171.     }
  172.  
  173. .header_bottom .search a.active {
  174.     display: block;
  175.     text-decoration: none;
  176.     color: #ffc23f;
  177.     transition: opacity 0.3s ease;
  178.     margin-top: 20px;
  179. }
  180.  
  181.     .header_bottom .search a.active:hover {
  182.         opacity: 0.8;
  183.     }
  184.  
  185. .header_bottom .search a.no-active {
  186.     opacity: 0;
  187.     visibility: hidden;
  188.     transition: opacity 0.3s, visibility 0.3s ease;
  189. }
  190.  
  191. .header_bottom .search a.active .icon-search:before {
  192.     font-style: normal;
  193.     font-family: IconFont;
  194.     content: "\e803";
  195. }
  196.  
  197. .header_bottom .main_menu {
  198.     float: right;
  199.     margin-top: 21px;
  200. }
  201.  
  202. .header_bottom .main_menu ul {
  203.     padding: 0;
  204.     margin: 0;
  205. }
  206.  
  207. .header_bottom .main_menu li {
  208.     float: left;
  209.     margin-right: 20px;
  210.     padding-top: 0;
  211.     padding-bottom: 5px;
  212.     border-bottom: 3px solid transparent;
  213.     transition: border 0.3s ease;
  214.     position: relative;
  215. }
  216.  
  217.     .header_bottom .main_menu li:last-child {
  218.         margin-right: 0;
  219.     }
  220.  
  221. .header_bottom .main_menu li a {
  222.     font-size: 16px;
  223.     font-family: "Titillium Web",sans-serif;
  224.     font-weight: 700;
  225.     color: #3d3d47;
  226.     text-decoration: none;
  227.     text-transform: uppercase;
  228.     display: block;
  229.     transition: color 0.3s ease;
  230. }
  231.  
  232.     .header_bottom .main_menu li:hover {
  233.         border-bottom: 3px solid #ffba13;
  234.     }
  235.  
  236.     .header_bottom .main_menu li:hover a {
  237.         color: #005581;
  238.     }
  239.  
  240.     .header_bottom .main_menu li>ul {
  241.         position: absolute;
  242.         top: 100%;
  243.         left: 0;
  244.         background: #ffffff;
  245.         z-index: 2;
  246.         width: 200px;
  247.         opacity: 0;
  248.         visibility: hidden;
  249.         transition: opacity 0.3s, visibility 0.3s ease;
  250.     }
  251.  
  252.     .header_bottom .main_menu li>ul li {
  253.         margin-right: 0;
  254.         padding: 5px 15px;
  255.         width: 100%;
  256.     }
  257.  
  258.     .header_bottom .main_menu li:hover>ul {
  259.         visibility: visible;
  260.         opacity: 1;
  261.     }
  262.  
  263. #row_headline {
  264.     background: url("../img/headline_row_bg.jpg") center center no-repeat;
  265.     background-size: cover;
  266.     padding-top: 155px;
  267.     padding-bottom: 110px;
  268. }
  269.  
  270. .shortcode_headline h1 {
  271.     color: #ffffff;
  272.     margin: 0;
  273. }
  274.  
  275. .shortcode_headline h1 p {
  276.     padding: 0;
  277. }
  278.  
  279. .shortcode_headline .headline {
  280.     margin-bottom: 32px;
  281. }
  282.  
  283.     .shortcode_headline .headline:after {
  284.         display: block;
  285.         background: #ffc11a;
  286.         width: 50px;
  287.         height: 6px;
  288.         content: "";
  289.         margin-top: 10px;
  290.     }
  291.  
  292. .shortcode_headline .request_btn {
  293.     display: inline-block;
  294.     padding: 19px 20px;
  295.     font-size: 16px;
  296.     line-height: 16px;
  297.     border-radius: 5px;
  298.     background: #ffffff;
  299.     text-decoration: none;
  300.     text-transform: uppercase;
  301.     color: #005c8c;
  302.     font-family: "Titillium Web",sans-serif;
  303.     font-weight: 700;
  304.     transition: opacity 0.3s ease;
  305.     margin-right: 14px;
  306. }
  307.  
  308. .shortcode_headline .contact_us_btn {
  309.     display: inline-block;
  310.     padding: 19px 20px;
  311.     font-size: 16px;
  312.     line-height: 16px;
  313.     border-radius: 5px;
  314.     background: #ffc11a;
  315.     text-decoration: none;
  316.     text-transform: uppercase;
  317.     color: #1c1c1c;
  318.     font-family: "Titillium Web",sans-serif;
  319.     font-weight: 700;
  320.     transition: opacity 0.3s ease;
  321. }
  322.  
  323. .shortcode_headline .request_btn:hover,
  324. .shortcode_headline .contact_us_btn:hover {
  325.     opacity: 0.8;
  326. }
  327.  
  328. #row_services {
  329.     padding-top: 70px;
  330.     padding-bottom: 30px;
  331.     background: url("../img/row_services_bg.jpg") no-repeat;
  332.     background-size: cover;
  333. }
  334.  
  335. .shortcode_plumbing,
  336. .shortcode_electrical,
  337. .shortcode_renovation,
  338. .shortcode_carpentry,
  339. .shortcode_roofing,
  340. .shortcode_flooring,
  341. .shortcode_painting,
  342. .shortcode_windows{
  343.     width: 100%;
  344.     padding: 85px 0;
  345.     text-align: center;
  346.     background-size: cover;
  347. }
  348.  
  349. .shortcode_plumbing {
  350.     background: url("../img/plumbing.jpg") no-repeat;
  351. }
  352.  
  353. .shortcode_electrical {
  354.     background: url("../img/electrical.jpg") no-repeat;
  355. }
  356.  
  357. .shortcode_renovation {
  358.     background: url("../img/renovation.jpg") no-repeat;
  359. }
  360.  
  361. .shortcode_carpentry {
  362.     background: url("../img/carpentry.jpg") no-repeat;
  363. }
  364.  
  365. .shortcode_roofing {
  366.     background: url("../img/roofing.jpg") no-repeat;
  367. }
  368. .shortcode_flooring {
  369.     background: url("../img/flooring.jpg") no-repeat;
  370. }
  371.  
  372. .shortcode_painting {
  373.     background: url("../img/painting.jpg") no-repeat;
  374. }
  375.  
  376. .shortcode_windows {
  377.     background: url("../img/windows.jpg") no-repeat;
  378. }
  379.  
  380. .shortcode_plumbing a,
  381. .shortcode_electrical a,
  382. .shortcode_renovation a,
  383. .shortcode_carpentry a,
  384. .shortcode_roofing a,
  385. .shortcode_flooring a,
  386. .shortcode_painting a,
  387. .shortcode_windows a{
  388.     display: inline-block;
  389.     text-decoration: none;
  390.     text-transform: uppercase;
  391.     color: #ffffff;
  392.     font-family: "Titillium Web", sans-serif;
  393.     font-weight: 700;
  394.     font-size: 24px;
  395.     line-height: 24px;
  396.     transition: color 0.3s ease;
  397. }
  398.  
  399.     .shortcode_plumbing a::after,
  400.     .shortcode_electrical a::after,
  401.     .shortcode_renovation a::after,
  402.     .shortcode_carpentry a::after,
  403.     .shortcode_roofing a::after,
  404.     .shortcode_flooring a::after,
  405.     .shortcode_painting a::after,
  406.     .shortcode_windows a::after{
  407.         content: "";
  408.         width: 100%;
  409.         height: 2px;
  410.         margin-top: 4px;
  411.         background: transparent;
  412.         opacity: 0.5;
  413.         display: block;
  414.         transition: background 0.2s ease;
  415.     }
  416.  
  417.     .shortcode_plumbing a:hover,
  418.     .shortcode_electrical a:hover,
  419.     .shortcode_renovation a:hover,
  420.     .shortcode_carpentry a:hover,
  421.     .shortcode_roofing a:hover,
  422.     .shortcode_flooring a:hover,
  423.     .shortcode_painting a:hover,
  424.     .shortcode_windows a:hover
  425.     {
  426.         color: #ffb617;
  427.     }
  428.  
  429.     .shortcode_plumbing a:hover::after,
  430.     .shortcode_electrical a:hover::after,
  431.     .shortcode_renovation a:hover::after,
  432.     .shortcode_carpentry a:hover::after,
  433.     .shortcode_roofing a:hover::after,
  434.     .shortcode_flooring a:hover::after,
  435.     .shortcode_painting a:hover::after,
  436.     .shortcode_windows a:hover::after {
  437.         background: #ffb617;
  438.     }
  439.  
  440. .shortcode_title_services {
  441.     margin-bottom: 20px;
  442. }
  443.  
  444. #row_static {
  445.     padding-top: 65px;
  446.     padding-bottom: 25px;
  447. }
  448.  
  449. .shortcode_static {
  450.     font-size: 0;
  451. }
  452.  
  453. .shortcode_static .static_block {
  454.     width: 16%;
  455.     text-align: center;
  456.     display: inline-block;
  457.     margin: 0 2%;
  458. }
  459.  
  460.     .shortcode_static .static_block p {
  461.         color: #3a3a3a;
  462.         font-family: "Titillium Web", sans-serif;
  463.         font-size: 14px;
  464.         font-weight: 700;
  465.         text-transform: uppercase;
  466.         margin-top: 10px;
  467.         padding: 0;
  468.     }
  469.  
  470.     .shortcode_static .static_block .number {
  471.         color: #ffba13;
  472.         font-size: 46px;
  473.         line-height: 46px;
  474.         margin-top: 0;
  475.     }
  476.  
  477. #row_section_about {
  478.     padding-top: 75px;
  479.     padding-bottom: 25px;
  480.     border-top: 2px solid #e8e8e8;
  481.     background: url("../img/about_row_bg.jpg") center center no-repeat;
  482.     background-size: cover;
  483. }
  484.  
  485.     .shortcode_title_about p {
  486.         padding: 0;
  487.         margin-bottom: 4px;
  488.         font-family: "Titillium Web", sans-serif;
  489.         font-weight: 300;
  490.         color: #1c1c1c;
  491.         font-size: 20px;
  492.     }
  493.  
  494.     .shortcode_title_about h2 {
  495.         margin: 0;
  496.     }
  497.  
  498.     .shortcode_title_about h2:after {
  499.         display: block;
  500.         background: #f2a61f;
  501.         width: 50px;
  502.         height: 4px;
  503.         content: "";
  504.         margin-top: 15px;
  505.     }
  506.  
  507. .shortcode_about_static .big_number {
  508.     font-family: "Titillium Web", sans-serif;
  509.     font-size: 100px;
  510.     line-height: 81px;
  511.     color: #ffbf11;
  512.     font-weight: 700;
  513.     float: left;
  514.     margin-right: 22px;
  515. }
  516.  
  517. .shortcode_about_static .big_number_right {
  518.     overflow: hidden;
  519.     font-family: "Titillium Web", sans-serif;
  520.     font-size: 22px;
  521.     color: #000001;
  522.     font-weight: 300;
  523. }
  524.  
  525.     .shortcode_about_static p {
  526.         padding: 0;
  527.     }
  528.  
  529.     .shortcode_about_static .big_number_right span {
  530.         display: block;
  531.         font-size: 30px;
  532.         line-height: 36px;
  533.         font-weight: 700;
  534.         color: #005c8c;
  535.         margin-bottom: 3px;
  536.     }
  537.  
  538. .shortcode_title_about {
  539.     margin-bottom: 55px;
  540. }
  541.  
  542. .shortcode_about_block {
  543.     padding-left: 55px;
  544.     position: relative;
  545. }
  546.  
  547.     .shortcode_about_block h4 {
  548.         margin-bottom: 15px;
  549.     }
  550.  
  551.     .shortcode_about_block p {
  552.         color: #454545;
  553.     }
  554.  
  555.         .shortcode_about_block p:last-of-type {
  556.             padding: 0;
  557.         }
  558.  
  559. .time_revers:before {
  560.     position: absolute;
  561.     width: 32px;
  562.     height: 27px;
  563.     background: url("../img/time-reverse.svg") no-repeat;
  564.     content: "";
  565.     left:0;
  566. }
  567.  
  568. .stop_watch:before {
  569.     position: absolute;
  570.     width: 30px;
  571.     height: 32px;
  572.     background: url("../img/stopwatch.svg") no-repeat;
  573.     content: "";
  574.     left:0;
  575. }
  576.  
  577. .trophy:before {
  578.     position: absolute;
  579.     width: 36px;
  580.     height: 32px;
  581.     background: url("../img/trophy.svg") no-repeat;
  582.     content: "";
  583.     left:0;
  584. }
  585.  
  586. .wallet:before {
  587.     position: absolute;
  588.     width: 32px;
  589.     height: 29px;
  590.     background: url("../img/wallet.svg") no-repeat;
  591.     content: "";
  592.     left:0;
  593. }
  594.  
  595. .eye:before {
  596.     position: absolute;
  597.     width: 32px;
  598.     height: 19px;
  599.     background: url("../img/eye.svg") no-repeat;
  600.     content: "";
  601.     left:0;
  602. }
  603.  
  604. .shortcode_about_contact {
  605.     width: 100%;
  606.     background: #005c8c;
  607.     padding: 25px 20px;
  608. }
  609.  
  610. #row_about {
  611.     padding-top: 15px;
  612. }
  613.  
  614. .shortcode_about_contact h4 {
  615.     color: #ffba13;
  616.     margin-bottom: 20px;
  617. }
  618.  
  619.     .shortcode_about_contact input[type="text"] {
  620.         width: 100%;
  621.         height: 42px;
  622.         margin-bottom: 15px;
  623.         background: #1a6c97;
  624.         border: 1px solid #4085a9;
  625.         padding: 0 14px;
  626.         font-family: Hind, sans-serif;
  627.         color: #ffffff;
  628.         font-size: 14px;
  629.         transition: border 0.3s ease;
  630.     }
  631.  
  632.         .shortcode_about_contact input[type="text"]::placeholder {
  633.             font-family: Hind, sans-serif;
  634.             color: #ffffff;
  635.             font-size: 14px;
  636.         }
  637.  
  638.         .shortcode_about_contact input[type="text"]:focus {
  639.             border: 1px solid #4DC8ED;
  640.         }
  641.  
  642.     .shortcode_about_contact input[type="submit"] {
  643.         font-family: "Roboto Condensed", sans-serif;
  644.         font-size: 14px;
  645.         text-transform: uppercase;
  646.         border: 0;
  647.         border-radius: 5px;
  648.         padding: 10px 25px;
  649.         color: #1c1c1c;
  650.         background: #ffb413;
  651.         transition: opacity 0.3s ease;
  652.     }
  653.  
  654.         .shortcode_about_contact input[type="submit"]:hover {
  655.             opacity: 0.8;
  656.         }
  657.  
  658.  
  659.     .shortcode_about_contact textarea {
  660.         width: 100%;
  661.         height: 94px;
  662.         margin-bottom: 15px;
  663.         background: #1a6c97;
  664.         border: 1px solid #4085a9;
  665.         font-family: Hind, sans-serif;
  666.         color: #ffffff;
  667.         font-size: 14px;
  668.         padding: 15px 14px;
  669.         transition: border 0.3s ease;
  670.     }
  671.  
  672.         .shortcode_about_contact textarea::placeholder {
  673.             font-family: Hind, sans-serif;
  674.             color: #ffffff;
  675.             font-size: 14px;
  676.         }
  677.  
  678.         .shortcode_about_contact textarea:focus {
  679.             border: 1px solid #4DC8ED;
  680.         }
  681.  
  682.     .shortcode_about_contact input.name {
  683.         width: 46%;
  684.         margin-right: 6.5%;
  685.     }
  686.  
  687.     .shortcode_about_contact input.email {
  688.         width: 46%;
  689.     }
  690.  
  691. #row_discount {
  692.     padding-top: 40px;
  693.     background: url("../img/discount-bg.jpg") center center no-repeat;
  694.     background-size: cover;
  695. }
  696.  
  697. .shortcode_discount {
  698.     display: flex;
  699.     align-items: center;
  700.     justify-content: space-between;
  701. }
  702.  
  703.     .shortcode_discount .text_block {
  704.         font-family: "Titillium Web",sans-serif;
  705.         font-size: 26px;
  706.         color: #0e5377;
  707.         font-weight: 700;
  708.     }
  709.  
  710.         .shortcode_discount .text_block p {
  711.             padding: 0;
  712.         }
  713.  
  714.     .shortcode_discount .request {
  715.         color: #ffba13;
  716.         text-decoration: none;
  717.         font-family: "Titillium Web",sans-serif;
  718.         font-weight: 700;
  719.         text-transform: uppercase;
  720.         display: block;
  721.         padding: 14px 35px;
  722.         font-size: 15px;
  723.         line-height: 15px;
  724.         background: #005c8c;
  725.         border-radius: 5px;
  726.         transition: opacity 0.3s ease;
  727.         margin-left: 10px;
  728.         white-space: nowrap;
  729.     }
  730.  
  731.         .shortcode_discount .request:hover {
  732.             opacity: 0.8;
  733.         }
  734.  
  735. .clearfix:after {
  736.     content: "";
  737.     display: table;
  738.     clear: both;
  739. }
Add Comment
Please, Sign In to add comment