API tools faq
paste
Advertisement
DonMcCoy

style.css

DonMcCoy
Aug 16th, 2016
133
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 54.16 KB | None | 0 0
raw download clone embed print report
  1.  
  2. /*
  3. Template Name: Rex
  4. Author: MarkUps
  5. Author URI: http://www.markups.io/
  6. Description: Rex - One Page Multipurpose Business HTML5 Template.
  7. Version: 1.0
  8. Tags: light, white,blog,business,multipurpose,one page, single page, custom-colors,Bootstrap,responsive, html5, css3
  9. */
  10.  
  11.  
  12. /* Table of Content
  13. ==================================================
  14. #BASIC TYPOGRAPHY
  15. #HEADER
  16. #MENU
  17. #ABOUT
  18. #CALL TO ACTION
  19. #TEAM  
  20. #SERVICE
  21. #PORTFOLIO
  22. #COUNTER
  23. #PRICING TABLE
  24. #TESTIMONIAL
  25. #FORM BLOG
  26. #CLIENT
  27. #CONTACT
  28. #FOOTER
  29. #BLOG PAGE
  30. #ERROR PAGE
  31. */
  32.  
  33.  
  34. /*--------------------*/
  35. /* BASIC TYPOGRAPHY */
  36. /*--------------------*/
  37.  
  38. body,html{
  39.     overflow-x:hidden;
  40. }
  41. body {
  42.     font-family: 'Open Sans', sans-serif;
  43.     font-size: 16px;
  44.     overflow-x: hidden !important;
  45.     color: #838282;
  46. }
  47. ul{
  48.     padding: 0;
  49.     margin: 0;
  50.     list-style: none;
  51. }
  52. a{
  53.     text-decoration: none;
  54.     color: #2f2f2f;  
  55. }
  56. a:focus{
  57.     outline: none;
  58.     text-decoration: none;
  59. }
  60. h1,h2,h3,h4,h5,h6{
  61.     font-family: 'Raleway', sans-serif;
  62. }
  63. h2 {
  64.     color: #fff;  
  65.     font-size: 30px;
  66.     font-weight: 700;
  67.     line-height: 40px;
  68.     margin: 0;
  69.     padding-bottom: 10px;  
  70. }
  71. img{
  72.  border:none;
  73. }
  74.  
  75. /* Preloader */
  76.  
  77. #preloader {
  78.     position: fixed;
  79.     top:0;
  80.     left:0;
  81.     right:0;
  82.     bottom:0;
  83.     background-color:#fff; /* change if the mask should have another color then white */
  84.     z-index:99999; /* makes sure it stays on top */
  85. }
  86.  
  87. .loader {
  88.     font-size: 10px;
  89.     top: 300px;
  90.     left: 45%;
  91.     text-indent: -9999em;
  92.     width: 11em;
  93.     height: 11em;
  94.     border-radius: 50%;
  95.     position: relative;
  96.     -webkit-animation: load3 1.4s infinite linear;
  97.     animation: load3 1.4s infinite linear;
  98.     -webkit-transform: translateZ(0);
  99.     -ms-transform: translateZ(0);
  100.     transform: translateZ(0);
  101. }
  102. .loader:before {
  103.     width: 50%;
  104.     height: 50%;   
  105.     border-radius: 100% 0 0 0;
  106.     position: absolute;
  107.     top: 0;
  108.     left: 0;
  109.     content: '';
  110. }
  111. .loader:after {
  112.     background: #fff;
  113.     width: 75%;
  114.     height: 75%;
  115.     border-radius: 50%;
  116.     content: '';
  117.     margin: auto;
  118.     position: absolute;
  119.     top: 0;
  120.     left: 0;
  121.     bottom: 0;
  122.     right: 0;
  123. }
  124. @-webkit-keyframes load3 {
  125.   0% {
  126.     -webkit-transform: rotate(0deg);
  127.     transform: rotate(0deg);
  128.   }
  129.   100% {
  130.     -webkit-transform: rotate(360deg);
  131.     transform: rotate(360deg);
  132.   }
  133. }
  134. @keyframes load3 {
  135.   0% {
  136.     -webkit-transform: rotate(0deg);
  137.     transform: rotate(0deg);
  138.   }
  139.   100% {
  140.     -webkit-transform: rotate(360deg);
  141.     transform: rotate(360deg);
  142.   }
  143. }
  144.  
  145. /*scrol to top*/
  146.  
  147. .scrollToTop {
  148.     background: #f9f9f9 none repeat scroll 0 0;
  149.     border-radius: 50%;
  150.     bottom: 60px;  
  151.     display: none;
  152.     font-size: 25px;
  153.     height: 55px;
  154.     line-height: 50px;
  155.     position: fixed;
  156.     right: 50px;
  157.     text-align: center;
  158.     text-decoration: none;
  159.     width: 55px;
  160.     -webkit-transition: all 0.5s;
  161.     -o-transition: all 0.5s;
  162.     transition: all 0.5s;
  163.     z-index: 999;
  164. }
  165. .scrollToTop:hover,
  166. .scrollToTop:focus{  
  167.   color: #fff;
  168.   text-decoration: none;
  169.   outline: none;
  170. }
  171.  
  172. /*--------------------*/
  173. /* HOME HEADER */
  174. /*--------------------*/
  175.  
  176. #header{
  177.     float: left;
  178.     display: inline;
  179.     width: 100%;
  180. }
  181. .header-inner{ 
  182.     display: inline;
  183.     position: relative;
  184.     float: left;   
  185.     width: 100%;
  186. }
  187. .header-inner>img{
  188.     width: 100%;
  189. }
  190. .header-overlay{
  191.     background-color: rgba(0, 0, 0, 0.6);
  192.     height: 100%;
  193.     left: 0;
  194.     position: absolute;
  195.     top: 0;
  196.     width: 100%;
  197.     z-index: 10;
  198. }
  199. .header-content {
  200.     float: left;
  201.     width: 100%;
  202.     height: 100%;
  203.     padding: 140px;
  204.     text-align: center;
  205. }
  206. .header-content h2 {
  207.     font-size: 80px;
  208.     font-weight: bold;
  209.     text-transform: uppercase;
  210.     line-height: 80px;
  211. }
  212. .header-content h2 span {
  213.     font-weight: normal;
  214.     line-height: 93px;
  215. }
  216. .header-btn-area{
  217.     margin-top: 90px;
  218.     float: left;
  219.     display: inline;
  220.     width: 100%;
  221.     text-align: center;
  222. }
  223. .header-btn-area a{
  224.     margin: 0px 15px;
  225. }
  226. .knowmore-btn{
  227.     border: 2px solid #fff;
  228.     border-radius: 2px;
  229.     color: #fff;   
  230.     font-size: 20px;   
  231.     font-weight: bold;
  232.     font-family: 'Raleway', sans-serif;
  233.     text-transform: uppercase;
  234.     padding: 25px 28px;
  235.     -webkit-transition: all 0.5s;
  236.     -moz-transition: all 0.5s;
  237.     -ms-transition: all 0.5s;
  238.     -o-transition: all 0.5s;
  239.     transition: all 0.5s;
  240. }
  241. .download-btn{
  242.     border: 2px solid #fff;
  243.     border-radius: 4px;
  244.     color: #fff;
  245.     font-size: 20px;
  246.     font-weight: bold;
  247.     font-family: 'Raleway', sans-serif;
  248.     text-transform: uppercase;
  249.     padding: 25px 28px;
  250.     -webkit-transition: all 0.5s;
  251.     -moz-transition: all 0.5s;
  252.     -ms-transition: all 0.5s;
  253.     -o-transition: all 0.5s;
  254.     transition: all 0.5s;
  255. }
  256. .knowmore-btn:hover,
  257. .knowmore-btn:focus,
  258. .download-btn:hover,
  259. .download-btn:focus{
  260.     color: #fff;
  261.     text-decoration: none;
  262.     outline: none;
  263.  
  264. }
  265.  
  266. /*--------------------*/
  267. /* MENU */
  268. /*--------------------*/
  269.  
  270. #menu-area{
  271.     float: none;
  272.     display: inline;
  273.     width: 100%;
  274. }
  275. .main-navbar {
  276.     background: #fff none repeat scroll 0 0;
  277.     border-radius: 0;
  278.     border-bottom: 1px solid #e7e7e7;  
  279.     border-right: medium none;
  280.     height: 100px;
  281.     margin-bottom: 0;
  282.     -webkit-box-shadow: 0px 2px 4px 0px #f3f3f3;
  283.     -moz-box-shadow: 0px 2px 4px 0px #f3f3f3;
  284.     box-shadow: 0px 2px 4px 0px #f3f3f3;
  285. }
  286. .navbar-fixed-top{
  287.     height: 80px;
  288.     -webkit-transition: all 0.5s;
  289.     -moz-transition: all 0.5s;
  290.     -ms-transition: all 0.5s;
  291.     -o-transition: all 0.5s;
  292.     transition: all 0.5s;
  293. }
  294. .logo {
  295.     height: 69px;  
  296.     width: 306px;
  297.     margin-right: 45px;
  298.     margin-top: -1px;
  299.     padding: 0;
  300. }
  301. .logo-compressed {
  302.     height: 69px;  
  303.     width: 306px;
  304. }
  305. .logo img {
  306.     height: 100%;
  307.     width: 100%;
  308. }
  309. #navbar {
  310.     float: left;
  311.     width: 83%;
  312. }
  313. .main-nav {
  314.     display: inline-block;
  315.     text-align: right;
  316.     width: 100%;
  317. }
  318. .main-nav li {
  319.     display: inline-block;
  320.     float: none;
  321. }
  322. .main-nav li a {
  323.     color: #636363;
  324.     font-size: 15px;
  325.     padding: 39px 20px;
  326.     text-transform: uppercase;
  327. }
  328. .less-padding{
  329.     padding: 30px 20px !important;
  330. }
  331.  
  332. .navbar-default .navbar-nav > li > a {
  333.   color: #636363;
  334.   -webkit-transition: all 0.5s;
  335.     -moz-transition: all 0.5s;
  336.     -ms-transition: all 0.5s;
  337.     -o-transition: all 0.5s;
  338.     transition: all 0.5s;
  339. }
  340. .navbar-default .navbar-nav > .active > a,
  341. .navbar-default .navbar-nav > .active > a:hover,
  342. .navbar-default .navbar-nav > .active > a:focus {
  343.   background-color: transparent;
  344. }
  345. .navbar-default .navbar-nav > li > a:hover,
  346. .navbar-default .navbar-nav > li > a:focus {
  347.     background-color: transparent;
  348. }
  349. .search-area {
  350.     display: inline-block;
  351.     float: right;
  352.     height: 60px;
  353.     padding: 0;
  354.     position: relative;
  355.     width: 5%;
  356. }
  357. .search-area input[type="text"] {
  358.     height: 100%;
  359.     font-size: 20px;
  360.     display: inline-block;  
  361.     font-weight: 100;
  362.     border: none;
  363.     outline: none;
  364.     line-height: 20px;
  365.     color: #555;
  366.     padding: 3px 60px 0px 3px;  
  367.     width: 0px;
  368.     position: absolute;
  369.     top: 11%;
  370.     right: 0;
  371.     background: none;
  372.     z-index: 3;
  373.     -webkit-transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
  374.             transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
  375.     cursor: pointer;
  376. }
  377. .search-area input[type="text"]:focus {
  378.     width: 880px;
  379.     z-index: 1;
  380.     background-color: #fff;
  381.     cursor: text;
  382. }
  383. .search-area input[type="submit"] {
  384.     background-image: url("assets/images/search-icon.png");
  385.     background-position: center center;
  386.     background-repeat: no-repeat;
  387.     border: medium none;
  388.     cursor: pointer;
  389.     display: inline-block;
  390.     float: right;
  391.     height: 35px;
  392.     outline: medium none;
  393.     position: absolute;
  394.     right: 0;
  395.     text-indent: -10000px;
  396.     top: 53%;
  397.     -webkit-transition: opacity 0.4s ease 0s;
  398.           transition: opacity 0.4s ease 0s;
  399.     width: 45px;
  400.     z-index: 2;
  401. }
  402. .search-area input[type="submit"]:hover {
  403.   opacity: 0.8;
  404. }
  405.  
  406. /*--------------------*/
  407. /* ABOUT */
  408. /*--------------------*/
  409.  
  410. #about{
  411.     background-color: #fff;
  412.     padding: 70px 0;
  413.     float: left;
  414.     display: inline;
  415.     width: 100%;   
  416. }
  417. .welcome-area{
  418.     float: left;
  419.     display: inline;
  420.     width: 100%;   
  421. }
  422. .title-area {
  423.     display: inline;
  424.     float: left;
  425.     padding: 0 172px;
  426.     position: relative;
  427.     text-align: center;
  428.     width: 100%;
  429. }
  430. .tittle {
  431.     color: #3a3a3a;
  432.     font-size: 40px;
  433.     margin-bottom: 0;
  434.     padding-bottom: 18px;
  435. }
  436. .tittle-line {
  437.     background-color: #898989;
  438.     display: inline-block;
  439.     height: 3px;
  440.     margin-bottom: 16px;
  441.     width: 60px;
  442. }
  443. .welcome-content{
  444.     float: left;
  445.     display: inline;
  446.     width: 100%;
  447.     margin-top: 50px;
  448. }
  449. .wc-table{
  450.     display: inline-block;
  451.     text-align: center;
  452. }
  453. .wc-table li {  
  454.     float: left;
  455.     width: 25%;
  456. }
  457. .single-wc-content{
  458.     float: left;
  459.     display: inline;
  460.     width: 100%;
  461. }
  462. .single-wc-content span {
  463.     border-radius: 100%;
  464.     display: inline-block;
  465.     font-size: 35px;
  466.     height: 117px;
  467.     line-height: 117px;
  468.     text-align: center;
  469.     width: 117px;
  470.     -webkit-transition: all 0.5s;
  471.     -moz-transition: all 0.5s;
  472.     -ms-transition: all 0.5s;
  473.     -o-transition: all 0.5s;
  474.     transition: all 0.5s;
  475. }
  476. .single-wc-content .wc-tittle{
  477.     color: #525252;
  478.     text-transform: uppercase;
  479.     font-size: 18px;
  480.     border-bottom: 1px solid #bbbbbb;
  481.     margin-top: 32px;
  482.     padding-bottom: 17px;  
  483. }
  484. .single-wc-content p {
  485.     color: #7d7d7d;
  486.     font-size: 15px;
  487.     padding: 12px;
  488. }
  489. .single-wc-content:hover .wc-icon{
  490.     color: #fff;
  491. }
  492. .single-wc-content:hover .wc-tittle{
  493.     padding-bottom: 16px;  
  494. }
  495. .about-area {
  496.     display: inline;
  497.     float: left;
  498.     margin-top: 45px;
  499.     margin-bottom: 25px;
  500.     width: 100%;
  501. }
  502. .about-left {
  503.     display: inline;
  504.     float: left;
  505.     height: 420px;
  506.     position: relative;
  507.     width: 445px;
  508. }
  509. .about-left img {
  510.     left: 23px;
  511.     position: absolute;
  512.     top: 23px;
  513. }
  514. .introduction-btn {
  515.     color: #f9fffd;
  516.     display: inline-block;
  517.     font-size: 25px;
  518.     left: 36%;
  519.     padding: 18px 16px;
  520.     position: absolute;
  521.     text-decoration: none;
  522.     top: 50%;
  523. }
  524. .introduction-btn:hover,
  525. .introduction-btn:focus{
  526.     color: #f9fffd;
  527.     text-decoration: none;
  528.     outline: none;
  529. }
  530. .about-right {
  531.     display: inline;
  532.     float: left;
  533.     padding-left: 85px;
  534.     padding-top: 20px;
  535.     width: 100%;
  536. }
  537. .about-right .title-area{
  538.     text-align: left;
  539.     padding: 0px;
  540. }
  541. .about-right .tittle{
  542.     padding-bottom: 47px;
  543. }
  544. .about-right .tittle-line {
  545.     height: 2px;
  546.     margin-bottom: 35px;
  547.     width: 100px;
  548. }
  549. .about-right p {
  550.     color: #535353;
  551.     font-family: "Raleway",sans-serif;
  552.     margin-bottom: 32px;
  553. }
  554. .about-btn-area{
  555.     float: left;
  556.     display: inline;
  557.     margin-top: 14px;
  558.     width: 100%;
  559. }
  560. .button {
  561.     float: left;   
  562.     display: block;
  563.     margin: 1em;   
  564.     border: none;
  565.     background: none;
  566.     color: inherit;
  567.     vertical-align: middle;
  568.     position: relative;
  569.     z-index: 1;
  570.     -webkit-backface-visibility: hidden;
  571.     -moz-osx-font-smoothing: grayscale;
  572. }
  573. .button:focus {
  574.     outline: none;
  575. }
  576. .button > span {
  577.     vertical-align: middle;
  578. }
  579. .button-default {
  580.     text-decoration: none;
  581.     border-radius: 2px;
  582.     overflow: hidden;
  583.     font-weight: 600;
  584.     font-size: 15px;
  585.     padding: 0;
  586.     -webkit-transition: border-color 0.3s, background-color 0.3s;
  587.     transition: border-color 0.3s, background-color 0.3s;
  588.     -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  589.     transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  590. }
  591. .button-default::after {
  592.     content: attr(data-text);
  593.     position: absolute;
  594.     width: 100%;
  595.     height: 100%;
  596.     top: 0;
  597.     left: 0;
  598.     opacity: 0;
  599.     color: #3f51b5;
  600.     -webkit-transform: translate3d(0, 25%, 0);
  601.     transform: translate3d(0, 25%, 0);
  602. }
  603. .button-default > span {
  604.     display: block;
  605. }
  606. .button-default:after {
  607.     color: #fff;
  608. }
  609. .button-default::after,
  610. .button-default > span {
  611.     padding: 12px 21px;
  612.     -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  613.     transition: transform 0.3s, opacity 0.3s;
  614.     -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  615.     transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  616. }
  617. .button-default:hover {
  618.     background-color: rgba(63, 81, 181, 0.1);
  619.     text-decoration: none;
  620. }
  621. .button-default:hover,
  622. .button-default:focus {
  623.     color: #fff !important;
  624. }
  625. .button-default:hover::after {
  626.     opacity: 1;
  627.     -webkit-transform: translate3d(0, 0, 0);
  628.     transform: translate3d(0, 0, 0);
  629. }
  630. .button-default:hover > span {
  631.     opacity: 0;
  632.     -webkit-transform: translate3d(0, -25%, 0);
  633.     transform: translate3d(0, -25%, 0);
  634. }
  635.  
  636. /*--------------------*/
  637. /* CALL TO ACTION */
  638. /*--------------------*/
  639.  
  640. #call-to-action{
  641.     display: inline;   
  642.     float: left;
  643.     position: relative;
  644.     width: 100%;
  645. }
  646. .call-to-overlay{
  647.     background-color: rgba(0,0,0,0.8);
  648.     position: absolute;
  649.     left: 0;
  650.     top: 0;
  651.     height: 100%;
  652.     width: 100%;
  653. }
  654. .call-to-content {
  655.     display: inline;
  656.     float: left;
  657.     padding: 60px 0;
  658.     text-align: center;
  659.     width: 100%;
  660. }
  661. .call-to-content h2{
  662.     color: #fff7f7;
  663.     font-size: 45px;
  664. }
  665. .call-to-content a {
  666.     display: inline-block;
  667.     float: none;
  668.     margin-top: 29px;
  669. }
  670.  
  671. /*--------------------*/
  672. /* TEAM */
  673. /*--------------------*/
  674.  
  675. #team{
  676.     display: inline;
  677.     padding: 70px 0px;
  678.     float: left;
  679.     width: 100%;
  680. }
  681. .team-area {
  682.     display: inline;
  683.     float: left;
  684.     padding-bottom: 56px;
  685.     width: 100%;
  686. }
  687. .team-content {
  688.     display: inline;
  689.     float: left;
  690.     margin-top: 18px;
  691.     width: 100%;
  692. }
  693. .team-grid {
  694.     margin: 20px 0 0 0;
  695.     padding: 0;
  696.     list-style: none;
  697.     display: block;
  698.     text-align: center;
  699.     width: 100%;
  700. }
  701. .team-grid li {
  702.     display: inline-block;
  703.     height: 230px;
  704.     margin: 20px 25px;
  705.     width: 20%;
  706. }
  707. .team-item {
  708.     width: 100%;
  709.     height: 100%;
  710.     border-radius: 50%;
  711.     position: relative;
  712.     cursor: default;
  713.     box-shadow:
  714.         inset 0 0 0 16px rgba(255,255,255,0.6),
  715.         0 1px 2px rgba(0,0,0,0.1);
  716.        
  717.     -webkit-transition: all 0.4s ease-in-out;
  718.     -moz-transition: all 0.4s ease-in-out;
  719.     -o-transition: all 0.4s ease-in-out;
  720.     -ms-transition: all 0.4s ease-in-out;
  721.     transition: all 0.4s ease-in-out;
  722. }
  723.  
  724. .team-img-1 {
  725.     background-image: url(assets/images/team-member1.png);
  726. }
  727.  
  728. .team-img-2 {
  729.     background-image: url(assets/images/team-member2.png);
  730. }
  731.  
  732. .team-img-3 {
  733.     background-image: url(assets/images/team-member3.png);
  734. }
  735. .team-img-4 {
  736.     background-image: url(assets/images/team-member4.png);
  737. }
  738. .team-info {
  739.     position: absolute;
  740.     width: inherit;
  741.     height: inherit;
  742.     padding: 50px 0;
  743.     border-radius: 50%;
  744.     opacity: 0;
  745.    
  746.     -webkit-transition: all 0.4s ease-in-out;
  747.     -moz-transition: all 0.4s ease-in-out;
  748.     -o-transition: all 0.4s ease-in-out;
  749.     -ms-transition: all 0.4s ease-in-out;
  750.     transition: all 0.4s ease-in-out;
  751.    
  752.     -webkit-transform: scale(0);
  753.     -moz-transform: scale(0);
  754.     -o-transform: scale(0);
  755.     -ms-transform: scale(0);
  756.     transform: scale(0);
  757.    
  758.     -webkit-backface-visibility: hidden;
  759. }
  760. .team-info p {
  761.     color: #fff;
  762.     padding: 10px 5px;
  763.     font-style: italic;
  764.     margin: 0 30px;
  765.     font-size: 14px;   
  766.     opacity: 0;
  767.     -webkit-transition: all 1s ease-in-out 0.4s;
  768.     -moz-transition: all 1s ease-in-out 0.4s;
  769.     -o-transition: all 1s ease-in-out 0.4s;
  770.     -ms-transition: all 1s ease-in-out 0.4s;
  771.     transition: all 1s ease-in-out 0.4s;
  772. }
  773. .team-info a {
  774.     border: 1px solid #fffefe;
  775.     border-radius: 50%;
  776.     color: #fffefe;
  777.     display: inline-block;
  778.     font-size: 16px;
  779.     opacity: 0.8;
  780.     height: 27px;
  781.     margin: 0 5px;
  782.     text-align: center;
  783.     width: 27px;
  784. }
  785. .team-info a:hover {
  786.     opacity: 1;
  787. }
  788. .team-grid li:hover .team-info {
  789.     -webkit-transform: scale(1);
  790.     -moz-transform: scale(1);
  791.     -o-transform: scale(1);
  792.     -ms-transform: scale(1);
  793.     transform: scale(1);
  794.     opacity: 1;
  795. }
  796.  
  797. .team-grid li:hover .team-info p {
  798.     opacity: 1;
  799. }
  800. .team-address {
  801.     display: inline;
  802.     float: left;
  803.     margin-top: 26px;
  804.     text-align: center;
  805.     width: 100%;
  806. }
  807. .team-address p {
  808.     color: #525252;
  809.     margin-bottom: 0px;
  810.     font-size: 22px;
  811.     font-weight: 600;
  812.     text-transform: uppercase;
  813.     font-family: "Raleway",sans-serif;
  814.     -webkit-transition: all 0.5s;
  815.     -moz-transition: all 0.5s;
  816.     -ms-transition: all 0.5s;
  817.     -o-transition: all 0.5s;
  818.     transition: all 0.5s;
  819. }
  820.  
  821. .team-address span {
  822.     color: #777777;
  823.     font-size: 17px;
  824.     font-style: italic;
  825.     font-family: "Raleway",sans-serif;
  826. }
  827.  
  828. /*--------------------*/
  829. /* SERVICE */
  830. /*--------------------*/
  831.  
  832. #service{
  833.     background-color: #F6F6F6;
  834.     float: left;
  835.     display: inline;
  836.     padding: 70px 0;
  837.     width: 100%;
  838. }
  839. .service_area{
  840.     display: inline;
  841.     float: left;
  842.     width: 100%;
  843. }
  844. .service-content{
  845.     display: inline;
  846.     margin-top: 45px;
  847.     float: left;
  848.     width: 100%;
  849. }
  850. .service-table{
  851.     display: inline-block;
  852.     width: 100%;
  853.     text-align: center;
  854. }
  855. .single-service {
  856.     display: inline;
  857.     float: left;
  858.     margin-bottom: 15px;
  859.     padding: 45px 20px;
  860.     position: relative;
  861.     text-align: left;
  862.     width: 100%;
  863.     -w-webkit-transition: all 0.5s;
  864.     -moz-transition: all 0.5s;
  865.     -ms-transition: all 0.5s;
  866.     -o-transition: all 0.5s;
  867.     transition: all 0.5s;
  868. }
  869. .single-service:after{
  870.     content: '';
  871.     position: absolute;
  872.     left: 0;
  873.     opacity: 0;
  874.     bottom: 0;
  875.     height: 24px;
  876.     width: 100%;
  877.     -webkit-transition: all 0.5s;
  878.     -moz-transition: all 0.5s;
  879.     -ms-transition: all 0.5s;
  880.     -o-transition: all 0.5s;
  881.     transition: all 0.5s;
  882. }
  883. .single-service:hover:after{
  884.     opacity: 1;
  885. }
  886. .single-service:hover{
  887.     background-color: #fff;
  888. }
  889. .single-service .service-icon{
  890.     color: #bdbdbd;
  891.     font-size: 55px;
  892.     margin-bottom: 10px;
  893. }
  894. .single-service .service-title {
  895.     color: #343333;
  896.     font-size: 25px;
  897.     font-weight: 600;
  898.     margin-bottom: 30px;
  899. }
  900. .single-service p{
  901.     color: #878787;
  902. }
  903.  
  904. /*--------------------*/
  905. /* PORTFOLIO */
  906. /*--------------------*/
  907.  
  908. #portfolio{
  909.     display: inline;
  910.     float: left;
  911.     padding: 70px 0;
  912.     width: 100%;
  913. }
  914. .portfolio-area{
  915.     display: inline;
  916.     float: left;
  917.     width: 100%;
  918. }
  919. .portfolio-content {
  920.     display: inline;
  921.     float: left;
  922.     margin-top: 50px;
  923.     width: 100%;
  924. }
  925. .portfolio-menu{
  926.     display: inline;
  927.     float: left;
  928.     width: 100%;
  929. }
  930. .portfolio-menu ul{
  931.     display: inline-block;
  932.     width: 100%;
  933.     text-align: center;
  934. }
  935. .portfolio-menu ul li {
  936.     border-bottom: 1px solid #fff;
  937.     border-top: 1px solid #fff;
  938.     cursor: pointer;
  939.     display: inline-block;
  940.     font-family: "Raleway",sans-serif;
  941.     font-size: 14px;
  942.     font-weight: bold;
  943.     margin: 0 13px;
  944.     padding: 6px;
  945.     text-transform: uppercase;
  946.     -webkit-transition: all 0.5s ease 0s;
  947.     -o-transition: all 0.5s ease 0s;
  948.     transition: all 0.5s ease 0s;  
  949. }
  950. .portfolio-container {
  951.     display: inline;
  952.     float: left;
  953.     margin-left: -9px;
  954.     margin-top: 60px;
  955.     width: 100%;
  956. }
  957. .single-portfolio {
  958.     display: inline;
  959.     float: left;
  960.     margin-bottom: 18px;
  961.     margin-left: 18px;
  962.     width: 23.4%;
  963. }
  964. .single-item{
  965.     width: 100%;
  966.     position: relative;
  967.     overflow: hidden;
  968. }
  969. .single-item>img{
  970.     width: 100%;
  971.     display: block;
  972.     height: 290px;
  973.     -webkit-transition: all 0.5s ease 0s;
  974.     -o-transition: all 0.5s ease 0s;
  975.     transition: all 0.5s ease 0s;
  976. }
  977. .single-item>img:hover{
  978.     -webkit-transform: scale(1);   
  979.         -ms-transform: scale(1);   
  980.             transform: scale(1);           
  981. }
  982. #mixit-container .mix{
  983.     display: none;
  984. }
  985. .single-item-content {
  986.     background-color: #000;
  987.     display: inline;
  988.     opacity: 0;
  989.     height: 100%;
  990.     left: 0;
  991.     position: absolute;
  992.     text-align: center;
  993.     top: 0;
  994.     width: 100%;
  995.     -webkit-transition: background-color 0.5s linear;
  996.     -moz-transition: background-color 0.5s linear;
  997.     -o-transition: background-color 0.5s linear;
  998.     -ms-transition: background-color 0.5s linear;
  999.     transition: background-color 0.5s linear;
  1000. }
  1001. .portfolio-social-icon {  
  1002.     float: left;
  1003.     display: inline;
  1004.     padding: 110px 50px;
  1005.     width: 100%;
  1006.     -webkit-transition: all 0.5s;
  1007.     -moz-transition: all 0.5s;
  1008.     -ms-transition: all 0.5s;
  1009.     -o-transition: all 0.5s;
  1010.     transition: all 0.5s;
  1011. }
  1012. .single-item:hover .single-item-content{
  1013.     opacity: 1;
  1014. }
  1015. .single-item-content:hover{
  1016.     background-color: rgba(0, 0, 0, 0.8);  
  1017. }
  1018. .portfolio-social-icon a {
  1019.     color: #fff;
  1020.     display: inline-block;
  1021.     font-size: 14px;
  1022.     height: 40px;
  1023.     line-height: 15px;
  1024.     margin: 0 8px;
  1025.     padding: 12px;  
  1026.     text-align: center;
  1027.     width: 40px;
  1028.     transform: scale(0.5);
  1029.     -webkit-transition: all 0.7s ease 0s;
  1030.     -o-transition: all 0.7s ease 0s;
  1031.     transition: all 0.7s ease 0s;
  1032. }
  1033. .single-item-content:hover .fancybox,
  1034. .single-item-content:hover .link-btn{
  1035.      transform: scale(0.9);
  1036. }
  1037. .portfolio-title {
  1038.     bottom: 0;
  1039.     display:inline;
  1040.     opacity: 0;
  1041.     left: 0;
  1042.     padding-bottom: 12px;
  1043.     position: absolute;
  1044.     text-align: center;
  1045.     width: 100%;
  1046.     -webkit-transition: all 0.7s ease 0s;
  1047.     -o-transition: all 0.7s ease 0s;
  1048.     transition: all 0.7s ease 0s;
  1049. }
  1050. .single-item:hover .portfolio-title{
  1051.     opacity: 1;
  1052. }
  1053. .portfolio-title h4 {
  1054.     color: #fff7f7;
  1055.     font-size: 16px;
  1056.     font-weight: bold;
  1057.     margin-bottom: 0;
  1058.     text-transform: uppercase;
  1059. }
  1060. .portfolio-title span{
  1061.     color: #fff7f7;
  1062.     font-size: 12px;
  1063.     font-family: "Raleway",sans-serif;
  1064. }
  1065.  
  1066. /*--------------------*/
  1067. /* COUNTER */
  1068. /*--------------------*/
  1069.  
  1070. #counter{
  1071.     display: inline;
  1072.     float: left;   
  1073.     position: relative;
  1074.     width: 100%;   
  1075. }
  1076. .counter-overlay{
  1077.     background-color: rgba(0, 0, 0, 0.8);
  1078.     height: 100%;
  1079.     left: 0;
  1080.     position: absolute;
  1081.     top: 0;
  1082.     width: 100%;
  1083. }
  1084. .counter-area {
  1085.     display: inline;
  1086.     float: left;
  1087.     padding: 112px 0;
  1088.     width: 100%;
  1089. }
  1090. .single-counter {
  1091.     display: inline;
  1092.     float: left;
  1093.     padding: 0 10px;
  1094.     width: 100%;
  1095. }
  1096. .single-counter > span {
  1097.     display: block;
  1098.     float: left;
  1099.     font-size: 60px;
  1100.     text-align: center;
  1101.     width: 60px;
  1102. }
  1103. .single-counter .counter-count{
  1104.     float: left;
  1105.     margin-left: 20px;
  1106. }
  1107. .single-counter .counter-count > span {
  1108.     color: #fff;
  1109.     display: block;
  1110.     font-size: 50px;
  1111.     font-weight: bold;
  1112.     margin-bottom: -7px;
  1113.     margin-top: -16px;
  1114. }
  1115. .single-counter .counter-count > p {
  1116.     color: #fff;
  1117.     font-size: 18px;
  1118.     font-weight: 600;
  1119.     margin-left: 5px;
  1120. }
  1121.  
  1122. /*--------------------*/
  1123. /* PRICING TABLE */
  1124. /*--------------------*/
  1125.  
  1126. #pricing-table{
  1127.     display: inline;
  1128.     float: left;
  1129.     padding: 70px 0;
  1130.     width: 100%;
  1131. }
  1132. .pricing-table-area{
  1133.     display: inline;
  1134.     float: left;
  1135.     width: 100%;
  1136. }
  1137. .pricing-table-content {
  1138.     display: inline;
  1139.     float: left;
  1140.     margin-top: 60px;
  1141.     width: 100%;
  1142. }
  1143. .price-table{
  1144.     display: inline-block;
  1145.     text-align: center;
  1146.     width: 100%;
  1147. }
  1148. .price-table li {
  1149.   border-bottom: 1px solid #e4e4e4;
  1150.   border-left: 1px solid #e4e4e4;
  1151.   border-top: 1px solid #e4e4e4;
  1152.   display: inline-block;
  1153.   float: left;
  1154.   padding-bottom: 12px;
  1155.   width: 25%;
  1156. }
  1157. .price-table li:last-child{
  1158.     border-right: 1px solid #e4e4e4;
  1159. }
  1160. .single-price{
  1161.     display: inline;
  1162.     float: left;
  1163.     width: 100%;
  1164. }
  1165. .single-price .price-header {
  1166.     color: #fff;
  1167.     font-size: 28px;
  1168.     margin: 0;
  1169.     padding: 20px 0;
  1170.     position: relative;
  1171.     text-align: center;
  1172. }
  1173. .single-price .price-header::after {
  1174.     bottom: -30%;
  1175.     content: "";
  1176.     font-family: fontAwesome;
  1177.     font-size: 32px;
  1178.     left: 46.5%;
  1179.     position: absolute;
  1180. }
  1181. .standard-price .price-header::after{
  1182.     bottom: -22%;
  1183. }
  1184. .single-price .price-amount {
  1185.     display: block;
  1186.     font-size: 32px;
  1187.     font-weight: 600;
  1188.     padding: 10px 0;
  1189.     text-align: center;
  1190. }
  1191. .standard-price{
  1192.     margin-top: -20px;
  1193. }
  1194. .standard-price .price-header{
  1195.     padding: 30px 0px;
  1196. }
  1197. .single-price p{
  1198.     color: #5d5d5d;
  1199.     font-size: 18px;
  1200.     border-bottom:1px solid #e4e4e4;
  1201.     padding: 20px 0;
  1202.     margin-bottom: 0px;
  1203. }
  1204. .single-price p:last-of-type{
  1205.     border: none;
  1206. }
  1207. .single-price a {
  1208.     -moz-border-bottom-colors: none !important;
  1209.     -moz-border-left-colors: none !important;
  1210.     -moz-border-right-colors: none !important;
  1211.     -moz-border-top-colors: none !important;
  1212.     border-image: none !important;
  1213.     border-left: medium none !important;
  1214.     border-right: medium none !important;
  1215.     border-top: medium none !important;
  1216.     display: inline-block;
  1217.     float: none;
  1218.     margin-top: 23px;
  1219. }
  1220. .single-price a span {
  1221.     border: medium none;
  1222.     display: inline-block;
  1223.     padding: 12px 65px;
  1224. }
  1225. .standard-price a{
  1226.     color: #fff !important;
  1227. }
  1228.  
  1229. /*--------------------*/
  1230. /* TESTIMONIAL */
  1231. /*--------------------*/
  1232.  
  1233.  
  1234. #testimonial{
  1235.     display: inline;
  1236.     float: left;
  1237.     position: relative;
  1238.     width: 100%;
  1239. }
  1240. .testimonial-area{
  1241.     display: inline;
  1242.     float: left;
  1243.     padding: 70px 0;
  1244.     width: 100%;   
  1245. }
  1246. .testimonial-area .tittle{
  1247.     color: #fff;
  1248. }
  1249. .testimonial-area .tittle-line{
  1250.     background-color: #fff;
  1251. }
  1252. .testimonial-conten{
  1253.     display: inline;
  1254.     float: left;
  1255.     margin-top: 11px;
  1256.     width: 100%;
  1257. }
  1258. .testimonial-slider {
  1259.     display: inline;
  1260.     float: left;
  1261.     position: absolute;
  1262.     width: 100%;
  1263. }
  1264. .single-slide {
  1265.     display: inline;
  1266.     float: left;
  1267.     padding: 0 124px;
  1268.     text-align: center;
  1269.     width: 100%;
  1270. }
  1271. .single-slide > p {
  1272.     color: #fff;
  1273.     font-family: "Raleway",sans-serif;
  1274.     font-size: 18px;
  1275.     line-height: 35px;
  1276.     margin-top: 55px;
  1277.     position: relative;
  1278. }
  1279. .single-slide > p::after {
  1280.     color: #fff;
  1281.     content: "";
  1282.     font-family: fontAwesome;
  1283.     font-size: 50px;
  1284.     left: -44px;
  1285.     position: absolute;
  1286.     top: -29px;
  1287. }
  1288. .single-testimonial{
  1289.     display: inline;
  1290.     float: left;
  1291.     width: 100%;
  1292. }
  1293. .testimonial-thumb {
  1294.     border-radius: 50%;
  1295.     height: 107px;
  1296.     margin: 35px auto 0;
  1297.     width: 107px;
  1298. }
  1299. .single-testimonial p{
  1300.     color: #fff;
  1301.     font-size: 20px;
  1302.     font-weight: bold;
  1303.     margin-bottom: 0px;
  1304. }
  1305. .single-testimonial span {
  1306.     color: #fff;
  1307.     display: inline-block;
  1308.     font-size: 16px;
  1309. }
  1310. .testimonial-slider .slick-prev::before {
  1311.     border: 1px solid #fff;
  1312.     border-radius: 50%;
  1313.     color: #fff;
  1314.     content: "" !important;
  1315.     display: inline-block;
  1316.     font-family: fontAwesome;
  1317.     font-size: 35px;
  1318.     height: 35px;
  1319.     line-height: 31px;
  1320.     padding: 0 10px;
  1321.     text-align: center;
  1322.     width: 35px;
  1323. }
  1324.  
  1325. .testimonial-slider .slick-next:before{
  1326.     color: #fff;
  1327.     content: '\f105' !important;
  1328.     border: 1px solid #fff;
  1329.     border-radius: 50%;
  1330.     display: inline-block;
  1331.     font-family: fontAwesome;
  1332.     font-size: 35px;   
  1333.     height: 35px;
  1334.     line-height: 31px;
  1335.     padding: 0 10px;
  1336.     text-align: center;
  1337.     width: 35px;
  1338. }
  1339. .testimonial-slider .slick-prev{
  1340.     left: 0;
  1341.     z-index: 9999;
  1342.     top: 35%;
  1343. }
  1344. .testimonial-slider .slick-next{
  1345.     right: 40px;
  1346.     z-index: 9999;
  1347.     top: 35%;
  1348. }
  1349.  
  1350. /*--------------------*/
  1351. /* FORM BLOG */
  1352. /*--------------------*/
  1353.  
  1354. #from-blog{
  1355.     background-color: #F6F6F6;
  1356.     display: inline;
  1357.     padding: 70px 0;
  1358.     float: left;
  1359.     width: 100%;
  1360. }
  1361. .from-blog-area{
  1362.     display: inline;
  1363.     float: left;
  1364.     width: 100%;
  1365. }
  1366. .from-blog-content {
  1367.     display: inline;
  1368.     float: left;
  1369.     margin-top: 60px;
  1370.     width: 100%;
  1371. }
  1372. .single-from-blog {
  1373.     background-color: #fff;
  1374.     display: inline;
  1375.     float: left;
  1376.     width: 100%;
  1377. }
  1378. .single-from-blog figure{
  1379.     display: inline;
  1380.     float: left;
  1381.     width: 100%;
  1382. }
  1383. .single-from-blog figure img{
  1384.     width: 100%;
  1385. }
  1386. .single-from-blog .blog-title {
  1387.     display: inline;
  1388.     float: left;
  1389.     padding: 20px;
  1390.     width: 100%;
  1391. }
  1392. .single-from-blog .blog-title h2 {
  1393.     color: #3e3e3e;
  1394.     font-size: 28px;
  1395.     padding-bottom: 0;
  1396.     -webkit-transition: all 0.5s;
  1397.     -moz-transition: all 0.5s;
  1398.     -ms-transition: all 0.5s;
  1399.     -o-transition: all 0.5s;
  1400.     transition: all 0.5s;
  1401. }
  1402. .single-from-blog .blog-title h2 a {  
  1403.     -webkit-transition: all 0.5s;
  1404.     -moz-transition: all 0.5s;
  1405.     -ms-transition: all 0.5s;
  1406.     -o-transition: all 0.5s;
  1407.     transition: all 0.5s;
  1408. }
  1409. .single-from-blog .blog-title h2 a:hover,
  1410. .single-from-blog .blog-title h2 a:focus{  
  1411.     text-decoration: none;
  1412.     outline: none;
  1413. }
  1414. .single-from-blog .blog-title p{
  1415.     color: #7c7c7c;
  1416.     font-size: 13px;
  1417.     font-style: italic;
  1418. }
  1419. .single-from-blog > p {
  1420.     color: #757575;
  1421.     padding: 20px 20px 10px;
  1422. }
  1423. .single-from-blog .blog-footer {
  1424.     display: inline;
  1425.     float: left;
  1426.     padding: 0 20px 20px;
  1427.     width: 100%;
  1428. }
  1429. .single-from-blog .blog-footer a {
  1430.     color: #818181;
  1431.     font-size: 14px;
  1432.     margin-right: 35px;
  1433.     -webkit-transition: all 0.5s;
  1434.     -moz-transition: all 0.5s;
  1435.     -ms-transition: all 0.5s;
  1436.     -o-transition: all 0.5s;
  1437.     transition: all 0.5s;
  1438. }
  1439. .single-from-blog .blog-footer a:hover,
  1440. .single-from-blog .blog-footer a:focus {
  1441.     text-decoration: none;
  1442.     outline: none; 
  1443. }
  1444. .single-from-blog .blog-footer a span {
  1445.     border: 1px solid;
  1446.     border-radius: 50%;
  1447.     display: inline-block;
  1448.     line-height: 14px;
  1449.     margin-right: 3px;
  1450.     padding: 4px 5px;
  1451. }
  1452.  
  1453. /*--------------------*/
  1454. /* CLIENT */
  1455. /*--------------------*/
  1456.  
  1457. #client {
  1458.     background-color: #fff;
  1459.     display: inline;
  1460.     float: left;
  1461.     padding: 70px 0 55px;
  1462.     width: 100%;
  1463. }
  1464. .client-area{
  1465.     display: inline;
  1466.     float: left;
  1467.     width: 100%;
  1468.     text-align: center;
  1469. }
  1470. .client-table {
  1471.     display: inline-block;
  1472.     margin-bottom: 0;
  1473.     text-align: left;
  1474.     width: 100%;
  1475. }
  1476. .client-table li {
  1477.     display: inline-block;
  1478.     margin-right: 80px;
  1479. }
  1480. .client-table li:last-child{
  1481.     margin-right: 0px;
  1482. }
  1483.  
  1484. /*--------------------*/
  1485. /* CONTACT */
  1486. /*--------------------*/
  1487.  
  1488. #contact {
  1489.     background-image: url("assets/images/contact-bg.jpg");
  1490.     background-position: center center;
  1491.     background-repeat: no-repeat;
  1492.     background-size: 100% 100%;
  1493.     display: inline;
  1494.     float: left;
  1495.     padding: 70px 0;
  1496.     width: 100%;
  1497. }
  1498. .contact-left {
  1499.     background-color: rgba(104, 102, 96, 0.5);
  1500.     display: inline;
  1501.     float: left;
  1502.     padding: 30px 40px 10px;
  1503.     width: 100%;
  1504. }
  1505. .contact-left h2 {
  1506.     color: #fafafa;
  1507.     font-size: 35px;
  1508.     margin-bottom: 35px;
  1509. }
  1510. .single-address {
  1511.     display: inline;
  1512.     float: left;
  1513.     margin-bottom: 15px;
  1514.     padding-right: 50px;
  1515.     width: 100%;
  1516. }
  1517. .single-address h4 {
  1518.     color: #fafafa;
  1519.     font-size: 22px;
  1520.     font-weight: bold;
  1521.     margin-bottom: 17px;
  1522. }
  1523. .single-address p {
  1524.     color: #fafafa;
  1525.     font-size: 14px;
  1526.     margin-bottom: 5px;
  1527. }
  1528. .contact-right{
  1529.     background-color: rgba(104, 102, 96, 0.5);
  1530.     display: inline;
  1531.     float: left;
  1532.     padding: 30px 40px;
  1533.     width: 100%;
  1534. }
  1535. .contact-right h2 {
  1536.     color: #fafafa;
  1537.     font-size: 35px;
  1538.     margin-bottom: 48px;
  1539. }
  1540. .contact-form .form-group input {
  1541.     background: transparent;
  1542.     color: #e1e1e1;
  1543.     font-size: 20px;
  1544.     border: 1px solid #fff;
  1545.     border-radius: 0;
  1546.     height: 45px;
  1547.     margin-bottom: 24px;
  1548. }
  1549. .contact-form .form-group textarea{
  1550.     color: #e1e1e1;
  1551.     background: transparent;
  1552.     border: 1px solid #fff;
  1553.     border-radius: 0;
  1554.     height: 190px;
  1555. }
  1556. .contact-form .form-control:focus {
  1557.     outline: 0;
  1558.     box-shadow: none;    
  1559. }
  1560. .contact-form .form-control::-webkit-input-placeholder {
  1561.     color: #e2e2e2;
  1562.     font-size: 20px;
  1563. }
  1564.  
  1565. .contact-form .form-control:-moz-placeholder { /* Firefox 18- */
  1566.     color: #e2e2e2;
  1567.     font-size: 20px;
  1568. }
  1569.  
  1570. .contact-form .form-control::-moz-placeholder {  /* Firefox 19+ */
  1571.     color: #e2e2e2;
  1572.     font-size: 20px;
  1573. }
  1574.  
  1575. .contact-form .form-control:-ms-input-placeholder {  
  1576.     color: #e2e2e2;
  1577.     font-size: 20px;
  1578. }
  1579. .contact-form button {
  1580.     float: right;
  1581.     margin-right: 0;
  1582.     border-radius: 0px;
  1583. }
  1584. .contact-form.button-default::after,
  1585. .contact-form .button-default > span {
  1586.     padding: 12px 40px;  
  1587. }
  1588. #google-map{
  1589.     display: inline;
  1590.     float: left;   
  1591.     width: 100%;
  1592. }
  1593.  
  1594. /*--------------------*/
  1595. /* FOOTER */
  1596. /*--------------------*/
  1597.  
  1598. #footer{
  1599.     background-color: #242424;
  1600.     display: inline;
  1601.     float: left;
  1602.     margin-top: -6px;
  1603.     width: 100%;
  1604. }
  1605. .footer-top {
  1606.     display: inline;
  1607.     float: left;  
  1608.     width: 100%;
  1609. }
  1610. .footer-top-area{
  1611.     display: inline;
  1612.     float: left;
  1613.     text-align: center;
  1614.     width: 100%;
  1615. }
  1616. .footer-logo{
  1617.     display: inline-block;
  1618. }
  1619. .footer-social{
  1620.     display: inline;
  1621.     float: left;
  1622.     margin: 40px 0px;
  1623.     width: 100%;
  1624. }
  1625. .footer-social a {
  1626.     border: 1px solid #505050;
  1627.     border-radius: 50%;
  1628.     color: #b8b8b8;
  1629.     display: inline-block;
  1630.     font-size: 18px;
  1631.     height: 48px;
  1632.     line-height: 48px;
  1633.     margin: 0 9px;
  1634.     text-align: center;
  1635.     width: 48px;
  1636.     -webkit-transition: all 0.5s;
  1637.     -moz-transition: all 0.5s;
  1638.     -ms-transition: all 0.5s;
  1639.     -o-transition: all 0.5s;
  1640.     transition: all 0.5s;
  1641. }
  1642. .footer-social a.facebook:hover{
  1643.     background-color: #3b5998;
  1644.     border-color: #3b5998;
  1645.     color: #fff;
  1646. }
  1647. .footer-social a.twitter:hover{
  1648.     color: #fff;
  1649.     background-color: #00aced;
  1650.     border-color: #00aced;
  1651. }
  1652. .footer-social a.google-plus:hover{
  1653.     color: #fff;
  1654.     background-color: #dd4b39;
  1655.     border-color: #dd4b39;
  1656. }
  1657. .footer-social a.youtube:hover{
  1658.     color: #fff;
  1659.     background-color: #bb0000;
  1660.     border-color: #bb0000;
  1661. }
  1662. .footer-social a.linkedin:hover{
  1663.     color: #fff;
  1664.     background-color: #007bb5;
  1665.     border-color: #007bb5;
  1666. }
  1667. .footer-social a.dribbble:hover{
  1668.     color: #fff;
  1669.     background-color: #ea4c89;
  1670.     border-color: #ea4c89;
  1671. }
  1672. .footer-bottom{
  1673.     display: inline;
  1674.     border-top: 1px solid #434343;
  1675.     float: left;
  1676.     padding: 40px 0;
  1677.     width: 100%;
  1678.     text-align: center;
  1679. }
  1680. .footer-bottom p{
  1681.     color: #fff;
  1682.     font-size: 18px;
  1683.     margin-bottom: 0px;
  1684. }
  1685.  
  1686.  
  1687. /*--------------------*/
  1688. /* BLOG PAGE */
  1689. /*--------------------*/
  1690.  
  1691.  
  1692. #blog-banner{
  1693.     display: inline;
  1694.     float: left;
  1695.     position: relative;
  1696.     width: 100%;       
  1697. }
  1698. .blog-overlay{
  1699.     background-color: rgba(0, 0, 0, 0.8);
  1700.     height: 100%;
  1701.     left: 0;
  1702.     position: absolute;
  1703.     top: 0;
  1704.     width: 100%;
  1705. }
  1706. .blog-banner-area {
  1707.     display: inline;
  1708.     float: left;
  1709.     padding: 85px 0;
  1710.     width: 100%;
  1711. }
  1712. .blog-banner-area h2{
  1713.     color: #fff;
  1714.     font-size: 40px;
  1715.     padding-bottom: 5px;
  1716. }
  1717. .blog-banner-area .breadcrumb {
  1718.     background-color: transparent;
  1719.     border-radius: 0;
  1720.     padding-left: 0;
  1721. }
  1722. .blog-banner-area .breadcrumb li{
  1723.     font-family: "Raleway",sans-serif;
  1724. }
  1725. .blog-banner-area .breadcrumb li a {
  1726.     color: #fff;
  1727.     font-size: 18px;
  1728.     font-family: "Raleway",sans-serif;
  1729.     text-decoration: none;
  1730. }
  1731. .blog-banner-area .breadcrumb > li + li::before {
  1732.     color: #ccc;
  1733.     content: "/ ";
  1734.     padding: 0 0px;
  1735. }
  1736. #blog{
  1737.     background-color: #f8f8f8;
  1738.     display: inline;
  1739.     float: left;
  1740.     padding: 70px 0;
  1741.     width: 100%;
  1742. }
  1743. .blog-area{
  1744.     display: inline;
  1745.     float: left;
  1746.     width: 100%;
  1747. }
  1748. .blog-archive .single-from-blog{
  1749.     margin-bottom: 35px;
  1750. }
  1751. .blog-archive .single-from-blog figure img {
  1752.     height: 400px;  
  1753. }
  1754. .blog-left{
  1755.     display: inline;
  1756.     float: left;
  1757.     width: 100%;
  1758. }
  1759. .blog-pagination{
  1760.  
  1761. }
  1762. .blog-pagination > li > a,
  1763. .blog-pagination > li > span { 
  1764.     padding: 8px 18px;
  1765.     -webkit-transition: all 0.5s;
  1766.     -o-transition: all 0.5s;
  1767.     transition: all 0.5s;
  1768. }
  1769. .blog-pagination > li > a:hover,
  1770. .blog-pagination > li > span:hover,
  1771. .blog-pagination > li > a:focus,
  1772. .blog-pagination > li > span:focus{
  1773.     color: #fff;
  1774. }
  1775. .blog-pagination > li:first-child > a,
  1776. .blog-pagination > li:first-child > span {
  1777.     border-bottom-left-radius: 0px;
  1778.     border-top-left-radius: 0px;
  1779.     margin-left: 0;
  1780. }
  1781. .blog-pagination > li:last-child > a,
  1782. .blog-pagination > li:last-child > span {
  1783.     border-bottom-right-radius: 0px;
  1784.     border-top-right-radius: 0px;
  1785. }
  1786. .blog-right{
  1787.     display: inline;
  1788.     float: left;
  1789.     width: 100%;
  1790. }
  1791. .single-widget {
  1792.     background-color: #fff;
  1793.     border: 1px solid #f0f0f0;
  1794.     display: inline;
  1795.     margin-bottom: 30px;
  1796.     float: left;
  1797.     padding: 20px 30px;
  1798.     width: 100%;
  1799. }
  1800. .single-widget h2 {
  1801.     color: #444444;
  1802.     font-size: 25px;
  1803.     line-height: 25px;
  1804.     margin-bottom: 15px;
  1805.     margin-left: -31px;
  1806.     padding-bottom: 0;
  1807.     padding-left: 29px;
  1808.     padding-top: 0;
  1809. }
  1810. .blog-search{
  1811.     display: inline;
  1812.     float: left;
  1813.     width: 100%;
  1814. }
  1815. .blog-search input[type="text"] {
  1816.     background-color: #f5f5f5;
  1817.     border: 1px solid #9d9d9d;
  1818.     color: #444;
  1819.     height: 43px;
  1820.     padding: 5px;
  1821.     width: 100%;
  1822. }
  1823. .blog-search .button-default {
  1824.     margin-bottom: 10px;
  1825.     margin-left: 0;
  1826.     margin-top: 23px;
  1827. }
  1828. .blog-search .button-default::after,
  1829. .blog-search .button-default > span {
  1830.     padding: 10px 30px;
  1831. }
  1832. .follow-us {
  1833.     border-top: 1px solid #d4d4d4;
  1834.     display: inline;
  1835.     float: left;
  1836.     padding-bottom: 10px;
  1837.     padding-top: 24px;
  1838.     text-align: center;
  1839.     width: 100%;
  1840. }
  1841. .follow-us a {
  1842.     border: 1px none transparent;
  1843.     border-radius: 50%;
  1844.     color: #fff;
  1845.     display: inline-block;
  1846.     font-size: 16px;
  1847.     height: 35px;
  1848.     line-height: 35px;
  1849.     margin: 0 5px;
  1850.     text-align: center;  
  1851.     width: 35px;
  1852. }
  1853. .follow-us a.facebook{
  1854.     background-color: #3b5998;
  1855.     border-color: #3b5998; 
  1856. }
  1857. .follow-us a.twitter{  
  1858.     background-color: #00aced;
  1859.     border-color: #00aced;
  1860. }
  1861. .follow-us a.google-plus{  
  1862.     background-color: #dd4b39;
  1863.     border-color: #dd4b39;
  1864. }
  1865. .follow-us a.youtube{  
  1866.     background-color: #bb0000;
  1867.     border-color: #bb0000;
  1868. }
  1869. .follow-us a.linkedin{ 
  1870.     background-color: #007bb5;
  1871.     border-color: #007bb5;
  1872. }
  1873. .follow-us a.dribbble{ 
  1874.     background-color: #ea4c89;
  1875.     border-color: #ea4c89;
  1876. }
  1877. .popular-post-widget{
  1878.     border-top: 1px solid #d4d4d4;
  1879.     display: inline;
  1880.     float: left;
  1881.     padding-bottom: 15px;
  1882.     padding-top: 24px;
  1883.     text-align: left;
  1884.     width: 100%;
  1885. }
  1886. .popular-post-widget .media-left {
  1887.     float: left;
  1888.     height: 100px;
  1889.     margin-right: 20px;
  1890.     width: 100px;
  1891. }
  1892. .popular-post-widget .media-heading{
  1893.     color: #505050;
  1894.     font-size: 18px;
  1895. }
  1896. .popular-post-widget .media-heading a{
  1897.     -webkit-transition: all 0.5s;
  1898.     -moz-transition: all 0.5s;
  1899.     -ms-transition: all 0.5s;
  1900.     -o-transition: all 0.5s;
  1901.     transition: all 0.5s;
  1902. }
  1903. .popular-post-widget .media-heading a:hover,
  1904. .popular-post-widget .media-heading a:focus{   
  1905.     text-decoration: none;
  1906.     outline: none;
  1907. }
  1908. .popular-post-widget .media-body p{
  1909.     color: #7c7c7c;
  1910.     font-size: 13px;
  1911. }
  1912. .instagram-feed{
  1913.     border-top: 1px solid #d4d4d4;
  1914.     display: inline;
  1915.     float: left;
  1916.     padding-bottom: 25px;
  1917.     padding-top: 24px;
  1918.     text-align: left;
  1919.     width: 100%;   
  1920. }
  1921. .single-instagram-feed{
  1922.     display: inline;
  1923.     float: left;
  1924.     width: 100%;
  1925. }
  1926. .single-instagram-feed img {
  1927.     width: 100%;
  1928. }
  1929. .instagram-feed .slick-prev,
  1930. .instagram-feed .slick-next {  
  1931.     font-size: 0;
  1932.     height: 20px;
  1933.     line-height: 0;
  1934.     margin-top: -10px;  
  1935.     padding: 0;
  1936.     position: absolute;
  1937.     top: 100%;
  1938.     width: 20px;
  1939.     z-index: 999;
  1940. }
  1941. .instagram-feed .slick-prev {
  1942.     left: 28%;
  1943. }
  1944. .instagram-feed .slick-next {
  1945.     right: 29%;
  1946. }
  1947. .instagram-feed .slick-prev::before,
  1948. .instagram-feed .slick-next::before {
  1949.     font-family: "fontAwesome";
  1950.     font-size: 28px;
  1951.     line-height: 1;
  1952.     opacity: 0.75;
  1953. }
  1954. .instagram-feed .slick-prev::before{
  1955.     content: '\f104';
  1956. }
  1957. .instagram-feed .slick-next::before{
  1958.     content: '\f105';
  1959. }
  1960. .instagram-feed .slick-dots {
  1961.   bottom: -22px;
  1962. }
  1963. .instagram-feed .slick-dots li button {
  1964.     background: #eeeeee none repeat scroll 0 0;
  1965.     border: 0 none;
  1966.     border-radius: 50%;
  1967.     color: #eeeeee;
  1968.     cursor: pointer;
  1969.     display: block;
  1970.     font-size: 0;
  1971.     height: 15px;
  1972.     line-height: 0;
  1973.     outline: medium none;
  1974.     padding: 5px;
  1975.     width: 15px;
  1976. }
  1977. .instagram-feed li button::before{
  1978.     color: #eeeeee;  
  1979. }
  1980. .blog-details {
  1981.     background-color: #fff;
  1982. }
  1983. .blog-details-content{
  1984.     display: inline;
  1985.     float: left;
  1986.     padding: 40px; 
  1987.     width: 100%;
  1988. }
  1989. .blog-details-content blockquote {
  1990.     color: #1f1f1f;
  1991.     font-size: 22px;
  1992.     margin-bottom: 40px;
  1993.     margin-top: 40px;
  1994. }
  1995. .blog-details-content>span{
  1996.     color: #464646;
  1997.     font-size: 20px;
  1998.     font-weight: bold;
  1999. }
  2000. .blog-details-content > a {
  2001.     color: #464646;
  2002.     font-size: 18px;
  2003.     margin-right: 4px;
  2004.     -webkit-transition: all 0.5s;
  2005.     -moz-transition: all 0.5s;
  2006.     -ms-transition: all 0.5s;
  2007.     -o-transition: all 0.5s;
  2008.     transition: all 0.5s;
  2009. }
  2010. .blog-details-content h1,
  2011. .blog-details-content h2,
  2012. .blog-details-content h3,
  2013. .blog-details-content h4,
  2014. .blog-details-content h5,
  2015. .blog-details-content h6{
  2016.     color: #464646;
  2017. }
  2018. .blog-details-content h3{
  2019.     margin-top: 10px;
  2020. }
  2021. .blog-comment {
  2022.     display: inline;
  2023.     float: left;
  2024.     padding: 0 40px 50px;
  2025.     width: 100%;
  2026. }
  2027. .blog-comment h2 {
  2028.     color: #464646;
  2029.     font-family: "Open Sans",sans-serif;
  2030.     font-size: 25px;
  2031.     margin-bottom: 15px;
  2032. }
  2033. .comment-form .form-group input {
  2034.     background-color: #f8f8f8;
  2035.     border: 1px solid #aeaeae;
  2036.     border-radius: 0;
  2037.     color: #858585;
  2038.     font-size: 18px;
  2039.     height: 40px;
  2040.     margin-bottom: 20px;
  2041. }
  2042. .comment-form .form-group textarea{
  2043.     color: #858585;
  2044.     background-color: #f8f8f8;
  2045.     border: 1px solid #aeaeae;
  2046.     border-radius: 0;
  2047.     font-size: 18px;
  2048.     height: 190px;
  2049.     width: 80%;
  2050. }
  2051. .comment-form .form-control:focus {
  2052.     outline: 0;
  2053.     box-shadow: none;    
  2054. }
  2055. .comment-form .form-control::-webkit-input-placeholder {
  2056.     color: #858585;
  2057.     font-size: 18px;
  2058. }
  2059.  
  2060. .comment-form .form-control:-moz-placeholder { /* Firefox 18- */
  2061.     color: #858585;
  2062.     font-size: 18px;
  2063. }
  2064.  
  2065. .comment-form .form-control::-moz-placeholder {  /* Firefox 19+ */
  2066.     color: #858585;
  2067.     font-size: 18px;
  2068. }
  2069.  
  2070. .comment-form .form-control:-ms-input-placeholder {  
  2071.     color: #858585;
  2072.    font-size: 18px;
  2073. }
  2074. .comment-form button {
  2075.     border-radius: 0;
  2076.     float: left;
  2077.     margin-left: 0;
  2078.     margin-right: 0;
  2079. }
  2080. .comment-form.button-default::after,
  2081. .comment-form .button-default > span {
  2082.     padding: 12px 40px;  
  2083. }
  2084.  
  2085. /*--------------------*/
  2086. /* ERROR PAGE */
  2087. /*--------------------*/
  2088.  
  2089. #error-page {
  2090.     background-color: #CEFFFE;
  2091.     display: inline;
  2092.     float: left;
  2093.     padding: 150px 0;
  2094.     width: 100%;
  2095. }
  2096. .error-page-area {
  2097.     display: block;
  2098.     margin: 0 auto;
  2099.     width: 670px;
  2100. }
  2101. .error-no-area {
  2102.     background-color: #fff;
  2103.     display: inline;
  2104.     float: left;
  2105.     padding: 20px;
  2106.     width: 100%;
  2107. }
  2108. .error-no {
  2109.     display: inline;
  2110.     float: left;
  2111.     padding: 50px;
  2112.     text-align: center;
  2113.     width: 100%;
  2114. }
  2115. .error-no h2 {
  2116.     color: #727272;
  2117.     font-family: "Open Sans",sans-serif;
  2118.     font-size: 60px;
  2119.     font-weight: bold;
  2120.     text-transform: uppercase;
  2121. }
  2122. .error-no p {
  2123.     font-family: "Pacifico",cursive;
  2124.     font-size: 80px;
  2125.     margin-bottom: 0;
  2126.     -webkit-transform: rotate(-20deg);
  2127.         -ms-transform: rotate(-20deg);
  2128.             transform: rotate(-20deg);
  2129. }
  2130. .error-message {
  2131.     display: inline;
  2132.     float: left;
  2133.     margin-top: 70px;
  2134.     text-align: center;
  2135.     width: 100%;
  2136. }
  2137. .error-message h4 {
  2138.     color: #4b8181;
  2139.     font-family: "Pacifico",cursive;
  2140.     font-size: 65px;
  2141.     line-height: 65px;
  2142.     margin-bottom: 50px;
  2143. }
  2144. .error-message p {
  2145.     color: #4b8181;
  2146.     font-size: 30px;
  2147.     padding: 0 138px;
  2148. }
  2149. .error-message p a{
  2150.     color: #4b8181;
  2151. }
  2152.  
  2153.  
  2154. /*======================///////////////
  2155.             start responsive style
  2156. =====================///////////////////////*/
  2157.  
  2158.  
  2159. @media(max-width:1199px ){
  2160.     .header-content {  
  2161.       padding: 70px;  
  2162.     }
  2163.     .header-content h2 {
  2164.       font-size: 60px;
  2165.       line-height: 58px;  
  2166.     }
  2167.     .knowmore-btn {  
  2168.       font-size: 18px;  
  2169.       padding: 20px 25px;    
  2170.     }
  2171.     .download-btn {  
  2172.       font-size: 18px;  
  2173.       padding: 20px 25px;    
  2174.     }
  2175.     .header-btn-area {
  2176.       margin-top: 65px;  
  2177.     }
  2178.     .logo {
  2179.       margin-right: 0;   
  2180.     }
  2181.     #navbar {
  2182.       width: 87%;
  2183.     }
  2184.     .main-nav li a {  
  2185.       padding: 39px 16px;  
  2186.     }
  2187.     .search-area input[type="text"]:focus {
  2188.       width: 820px;  
  2189.     }
  2190.     .team-grid li {
  2191.       height: 198px;
  2192.       margin: 20px;
  2193.       width: 20%;
  2194.     }
  2195.     .team-img-1,
  2196.     .team-img-2,
  2197.     .team-img-3,
  2198.     .team-img-4 {
  2199.       background-position: center center;
  2200.     }
  2201.     .team-info {
  2202.         padding: 12px 0px;  
  2203.     }
  2204.     .team-info p {
  2205.         margin: 0 32px;
  2206.         padding: 10px 0px;
  2207.     }
  2208.     .team-info a {
  2209.       margin: 0 2px;     
  2210.     }
  2211.     .single-service {
  2212.       padding: 45px 15px;  
  2213.     }
  2214.     .single-service .service-title {     
  2215.       font-size: 20px;   
  2216.     }
  2217.     .single-portfolio {
  2218.       width: 23%;
  2219.     }
  2220.     .single-counter > span {
  2221.       font-size: 50px;   
  2222.       width: 50px;
  2223.     }
  2224.     .single-counter .counter-count > span {
  2225.       font-size: 40px;
  2226.     }
  2227.     .single-counter .counter-count > p {     
  2228.       font-size: 14px;   
  2229.     }
  2230.     .single-from-blog .blog-title h2 {
  2231.       font-size: 25px;  
  2232.     }
  2233.     .single-from-blog .blog-footer a {
  2234.       margin-right: 18px;
  2235.     }
  2236.     .contact-left h2,
  2237.     .contact-right h2 {
  2238.       font-size: 26px;  
  2239.     }
  2240.     .single-address h4 {
  2241.       font-size: 20px;
  2242.     }
  2243.     .counter-area {
  2244.       padding: 125px 0;  
  2245.     }
  2246.     .blog-archive .single-from-blog figure img {
  2247.       height: 320px;
  2248.     }
  2249. }
  2250.  
  2251.  
  2252. @media(max-width:991px ){
  2253.     .header-content {  
  2254.       padding: 50px;  
  2255.     }
  2256.     .header-content h2 {
  2257.       font-size: 50px;
  2258.       line-height: 50px;  
  2259.     }
  2260.     .knowmore-btn {  
  2261.       font-size: 16px;  
  2262.       padding: 18px 20px;    
  2263.     }
  2264.     .download-btn {  
  2265.       font-size: 16px;  
  2266.       padding: 18px 20px;    
  2267.     }
  2268.     .header-btn-area {
  2269.       margin-top: 20px;
  2270.     }
  2271.     #navbar {
  2272.       width: 86%;
  2273.     }
  2274.     .search-area {
  2275.       width: 3%;
  2276.     }
  2277.     .main-nav li a {
  2278.       font-size: 14px;
  2279.       padding: 39px 7px;
  2280.     }
  2281.     .less-padding {
  2282.       padding: 30px 7px !important;
  2283.     }
  2284.     .search-area input[type="text"]:focus {
  2285.       width: 630px;  
  2286.     }
  2287.     .single-wc-content .wc-tittle {
  2288.       font-size: 15px;   
  2289.     }
  2290.     .about-left {  
  2291.       height: 328px;  
  2292.       width: 100%;
  2293.     }
  2294.     .about-left img {
  2295.       width: 100%;
  2296.     }
  2297.     .about-right .tittle {
  2298.       padding-bottom: 10px;
  2299.       font-size: 28px;
  2300.     }
  2301.     .about-right .tittle-line {
  2302.       margin-bottom: 15px;   
  2303.     }
  2304.     .about-right p {
  2305.       font-size: 14px;
  2306.       margin-bottom: 6px;
  2307.     }
  2308.     .about-btn-area {
  2309.       margin-top: 0;     
  2310.     }
  2311.     .call-to-content h2 {  
  2312.       font-size: 30px;
  2313.     }
  2314.     .team-grid li {
  2315.       height: 170px;
  2316.       margin: 20px 10px;  
  2317.       width: 21%;
  2318.     }
  2319.     .team-info p {
  2320.         font-size: 10px;
  2321.     }
  2322.     .team-info a {
  2323.       font-size: 15px;
  2324.       height: 25px;
  2325.       width: 25px;
  2326.     }
  2327.     .team-address p {
  2328.       font-size: 16px;
  2329.     }
  2330.     .team-address span {
  2331.       font-size: 14px;
  2332.     }
  2333.     .title-area {
  2334.       padding: 0 100px;  
  2335.     }
  2336.     .single-portfolio {
  2337.       width: 22.5%;
  2338.     }
  2339.     .portfolio-social-icon {
  2340.         padding: 85px 50px;
  2341.     }
  2342.     .portfolio-title h4 {  
  2343.       font-size: 13px;
  2344.     }
  2345.     .counter-area {  
  2346.      padding: 90px 0;  
  2347.     }
  2348.     .single-counter {  
  2349.       margin-bottom: 35px;  
  2350.     }
  2351.     .single-price .price-amount {  
  2352.         font-size: 25px;  
  2353.     }
  2354.     .single-price p {
  2355.         font-size: 15px;  
  2356.     }
  2357.     .single-price a span {  
  2358.       padding: 12px 35px;
  2359.     }
  2360.     .single-from-blog {  
  2361.       margin-bottom: 30px;
  2362.     }
  2363.     .blog-right {
  2364.       margin-top: 25px;  
  2365.     }
  2366.     .instagram-feed .slick-prev {
  2367.       left: 40%;
  2368.     }
  2369.     .instagram-feed .slick-next {
  2370.       right: 41%;
  2371.     }
  2372.     .error-message h4 {  
  2373.       font-size: 50px;
  2374.       line-height: 50px;     
  2375.     }
  2376.     .error-message p {   
  2377.       font-size: 25px;
  2378.       padding: 0 50px;
  2379.     }
  2380. }
  2381.  
  2382.  
  2383. @media(max-width:767px ){
  2384.     .header-content h2 {
  2385.       font-size: 35px;
  2386.       line-height: 35px;
  2387.     }
  2388.     .header-content h2 span {
  2389.       font-weight: normal;
  2390.       line-height: 55px;
  2391.     }
  2392.     .knowmore-btn {
  2393.       font-size: 15px;
  2394.       padding: 15px 18px;
  2395.     }
  2396.     .download-btn {
  2397.       font-size: 15px;
  2398.       padding: 15px 18px;
  2399.     }
  2400.     .main-nav li {
  2401.       display: block;
  2402.       float: left;
  2403.       width: 100%;
  2404.     }
  2405.     .main-nav li a {
  2406.       display: block;
  2407.       padding: 8px 7px;
  2408.     }
  2409.     .less-padding {
  2410.       padding: 8px 7px !important;
  2411.     }
  2412.     #navbar {
  2413.       margin-right: 0;
  2414.       width: 104.5%;
  2415.     }
  2416.     .main-nav {
  2417.       background: #ccc none repeat scroll 0 0;
  2418.       display: block;
  2419.       margin: 0;
  2420.       text-align: center;
  2421.       width: 100%;
  2422.     }
  2423.     .navbar-default .navbar-toggle {
  2424.       border-color: #ddd;
  2425.       margin-right: 78px;
  2426.       margin-top: 32px;
  2427.       border-radius: 0;
  2428.     }
  2429.     .navbar-default .navbar-toggle:hover,
  2430.     .navbar-default .navbar-toggle:focus{
  2431.         background-color: #00d999;
  2432.         border-color: #00d999;
  2433.         color: #fff;
  2434.     }
  2435.     .navbar-default .navbar-toggle:hover .icon-bar,
  2436.     .navbar-default .navbar-toggle:focus .icon-bar{
  2437.         background-color: #fff;
  2438.        
  2439.     }
  2440.     .search-area {
  2441.       left: -3px;
  2442.       top: -100px;
  2443.       width: 3%;
  2444.     }
  2445.     .search-area input[type="text"]:focus {
  2446.       height: 36px;
  2447.       top: 31px !important;
  2448.       width: 550px;
  2449.     }
  2450.     .navbar-fixed-top .search-area{
  2451.         top: -77px;
  2452.     }
  2453.     .navbar-fixed-top .navbar-toggle {
  2454.       margin-top: 25px;
  2455.     }
  2456.     .navbar-fixed-top .search-area input[type="text"]:focus {
  2457.       top: 23px !important;  
  2458.     }
  2459.     .wc-table li {
  2460.       margin-bottom: 20px;
  2461.       width: 50%;
  2462.     }
  2463.     #about {
  2464.       padding: 0 0 50px;       
  2465.     }
  2466.     .about-left {
  2467.       width: 96%;
  2468.     }
  2469.     .about-left img {
  2470.       height: 100%;
  2471.       width: 100%;
  2472.     }
  2473.     .about-right {
  2474.       margin-top: 35px;
  2475.       padding-left: 0;  
  2476.     }
  2477.     .title-area {
  2478.       padding: 0 50px;
  2479.     }
  2480.     .call-to-content h2 {
  2481.       font-size: 28px;
  2482.     }
  2483.     .team-grid li {
  2484.       height: 230px;
  2485.       margin: 20px 25px 70px;
  2486.       width: 38%;
  2487.     }
  2488.     .team-img-1, .team-img-2, .team-img-3, .team-img-4 {
  2489.       background-position: center center;
  2490.       background-size: 100% auto;
  2491.     }
  2492.     .team-info {
  2493.       padding: 30px 18px;
  2494.     }
  2495.     .team-info p {
  2496.       font-size: 15px;
  2497.     }
  2498.     .single-portfolio {
  2499.       width: 30.3%;
  2500.     }
  2501.     .button-default::after, .button-default > span {
  2502.       padding: 12px 8px;
  2503.       font-size: 12px;
  2504.     }
  2505.     .single-slide > p {
  2506.       font-size: 15px;
  2507.       line-height: 28px;
  2508.       margin-top: 37px;  
  2509.     }
  2510.     .contact-left {
  2511.       margin-bottom: 30px;
  2512.     }
  2513.     #blog-banner {
  2514.       margin-top: -60px;     
  2515.     }
  2516.     .instagram-feed .slick-prev {
  2517.       left: 39%;
  2518.     }
  2519.     .instagram-feed .slick-next {
  2520.       right: 40%;
  2521.     }
  2522.     #error-page {    
  2523.       padding: 100px 0;  
  2524.     }
  2525.     .error-page-area {   
  2526.       width: 500px;
  2527.     }
  2528.     .error-message h4 {
  2529.       font-size: 35px;
  2530.       line-height: 35px;
  2531.     }
  2532.     .error-message p {
  2533.       font-size: 20px;
  2534.       padding: 0 45px;
  2535.     }
  2536.  
  2537.  
  2538. }
  2539.  
  2540. @media(max-width:480px ){
  2541.     .header-content {
  2542.       padding: 20px;
  2543.     }
  2544.     .header-content h2 {
  2545.       font-size: 25px;
  2546.       line-height: 25px;
  2547.     }
  2548.     .header-content h2 span {
  2549.       font-weight: normal;
  2550.       line-height: 43px;
  2551.     }
  2552.     .knowmore-btn {
  2553.       font-size: 14px;
  2554.       padding: 10px 15px;
  2555.     }
  2556.     .download-btn {
  2557.       font-size: 14px;
  2558.       padding: 10px 15px;
  2559.     }
  2560.     #navbar {
  2561.       width: 106%;
  2562.     }
  2563.     .title-area {
  2564.       padding: 0 15px;
  2565.     }
  2566.     .search-area input[type="text"] {  
  2567.       font-size: 15px;  
  2568.     }
  2569.     .search-area input[type="text"]:focus {  
  2570.         height: 35px;
  2571.         top: 32px !important;
  2572.         width: 350px;
  2573.     }
  2574.     .call-to-content h2 {
  2575.       font-size: 20px;
  2576.     }
  2577.     .team-grid {
  2578.       padding: 0 75px;   
  2579.     }
  2580.     .team-grid li {
  2581.       height: 300px;
  2582.       margin: 20px 0 70px;
  2583.       width: 100%;
  2584.     }
  2585.     .team-info {
  2586.       padding: 70px 18px;
  2587.     }
  2588.     .team-info p {
  2589.       font-size: 18px;
  2590.     }
  2591.     .single-portfolio {
  2592.       margin-left: 8px;
  2593.       width: 100%;
  2594.     }
  2595.     #counter img {
  2596.       height: 354px;
  2597.       width: 100%;
  2598.     }
  2599.     .counter-area {
  2600.       padding: 40px 0;
  2601.     }
  2602.     .single-counter > span {
  2603.       font-size: 50px;
  2604.       text-align: center;
  2605.       width: 100%;
  2606.     }
  2607.     .single-counter .counter-count {     
  2608.       margin-left: 0;
  2609.       margin-top: 20px;
  2610.       text-align: center;
  2611.       width: 100%;
  2612.     }
  2613.     .single-price .price-header {
  2614.       font-size: 20px; 
  2615.       padding: 10px 0;   
  2616.     }
  2617.     .single-price .price-header::after {
  2618.       bottom: -43%;
  2619.     }
  2620.     .standard-price .price-header {
  2621.       padding: 20px 0;
  2622.     }
  2623.     .standard-price .price-header::after {
  2624.       bottom: -32%;
  2625.     }
  2626.     .single-price .price-amount {
  2627.       font-size: 16px;
  2628.     }
  2629.     .single-price p {
  2630.       font-size: 14px;
  2631.     }
  2632.     .single-price a span {
  2633.       padding: 12px 20px;
  2634.     }
  2635.     .button-default::after, .button-default > span {
  2636.       font-size: 10px; 
  2637.     }
  2638.     .single-slide {
  2639.       padding: 0 100px;  
  2640.     }
  2641.     .single-slide > p {
  2642.       font-size: 14px;
  2643.       line-height: 26px;
  2644.       margin-top: 20px;
  2645.     }
  2646.     .single-slide > p::after {
  2647.       font-size: 40px;   
  2648.       top: -10px;
  2649.     }
  2650.     .testimonial-thumb {
  2651.       margin: 20px auto 0;   
  2652.     }
  2653.     .client-table {  
  2654.       padding-left: 30px;
  2655.     }
  2656.     .instagram-feed .slick-prev {
  2657.       left: 34%;
  2658.     }
  2659.     .instagram-feed .slick-next {
  2660.       right: 35%;
  2661.     }
  2662.     #error-page {    
  2663.       padding: 80px 0;   
  2664.     }
  2665.     .error-page-area {   
  2666.       width: 350px;
  2667.     }
  2668.     .error-no {
  2669.       padding: 20px;     
  2670.     }
  2671.     .error-no h2 {   
  2672.       font-size: 45px; 
  2673.     }
  2674.     .error-no p {    
  2675.       font-size: 50px;   
  2676.     }
  2677.     .error-message h4 {
  2678.       font-size: 35px;
  2679.       line-height: 35px;
  2680.     }
  2681.     .error-message p {
  2682.       font-size: 20px;
  2683.       padding: 0 45px;
  2684.     }
  2685.  
  2686. }
  2687.  
  2688.  
  2689. @media(max-width:360px ){
  2690.     .header-inner > img {
  2691.       height: 250px;
  2692.       width: 100%;
  2693.     }
  2694.     .header-content {
  2695.       padding: 30px;
  2696.     }
  2697.     .header-content h2 {
  2698.       font-size: 20px;
  2699.       line-height: 18px;
  2700.     }
  2701.     .header-content h2 span {
  2702.       font-weight: normal;
  2703.       line-height: 35px;
  2704.     }
  2705.     .header-btn-area {
  2706.       margin-top: 00px;
  2707.     }
  2708.  
  2709.     .header-btn-area a {
  2710.       display: block;
  2711.       margin: 10px 15px;
  2712.     }
  2713.     .knowmore-btn {
  2714.       font-size: 14px;
  2715.       padding: 7px 8px;  
  2716.     }
  2717.     .download-btn {
  2718.       font-size: 14px;
  2719.       padding: 7px 8px;  
  2720.     }
  2721.     #navbar {
  2722.       width: 108.3%;
  2723.     }
  2724.     .title-area {
  2725.       padding: 0 10px;
  2726.     }
  2727.     .tittle {  
  2728.       font-size: 20px;  
  2729.       padding-bottom: 5px;
  2730.     }
  2731.     .title-area p{
  2732.         font-size: 14px;
  2733.     }
  2734.     .search-area input[type="text"] {  
  2735.       font-size: 14px;  
  2736.     }
  2737.     .search-area input[type="text"]:focus {  
  2738.         height: 35px;
  2739.         top: 32px !important;
  2740.         width: 250px;
  2741.     }
  2742.     .wc-table li {
  2743.       margin-bottom: 20px;
  2744.       width: 100%;
  2745.     }
  2746.     .about-right {
  2747.       margin-top: 45px;  
  2748.     }
  2749.     .about-right .tittle {
  2750.       font-size: 20px;
  2751.       padding-bottom: 5px;
  2752.     }
  2753.     .about-right .tittle-line {
  2754.       width: 60px;
  2755.     }
  2756.     .call-to-content h2 {
  2757.       font-size: 20px;
  2758.     }
  2759.     .team-grid {
  2760.       padding: 0 55px;   
  2761.     }
  2762.     .team-grid li {
  2763.       height: 220px;     
  2764.     }
  2765.     .team-info {
  2766.       padding: 20px 10px;
  2767.     }
  2768.     .team-info p {
  2769.       font-size: 14px;
  2770.     }
  2771.     .portfolio-container {
  2772.       margin-left: 0;
  2773.     }
  2774.     .portfolio-menu ul li {  
  2775.       font-size: 12px;  
  2776.       margin: 0 7px 5px;
  2777.       padding: 8px;  
  2778.     }
  2779.     .single-portfolio {
  2780.       width: 100%;
  2781.       margin-left: 0px;
  2782.     }
  2783.     .portfolio-social-icon {
  2784.       padding: 105px 50px;
  2785.     }
  2786.     #counter img {
  2787.       height: 354px;
  2788.       width: 100%;
  2789.     }
  2790.     .counter-area {
  2791.       padding: 40px 0;
  2792.     }
  2793.     .single-counter > span {
  2794.       font-size: 40px;
  2795.     }
  2796.     .single-counter .counter-count > span {
  2797.       font-size: 30px;
  2798.     }
  2799.     .single-counter .counter-count > p {
  2800.       font-size: 12px;
  2801.     }
  2802.     .price-table li {
  2803.       margin-bottom: 20px;
  2804.       width: 100%;
  2805.       border: 1px solid #e4e4e4;
  2806.     }
  2807.     .single-price a span {   
  2808.       font-size: 14px;
  2809.     }      
  2810.     .single-price .price-amount {
  2811.       font-size: 16px;
  2812.     }
  2813.     .single-price p {
  2814.       font-size: 14px;
  2815.     }      
  2816.     .button-default::after, .button-default > span {
  2817.       font-size: 14px; 
  2818.     }
  2819.     .standard-price {
  2820.       margin-top: 0;
  2821.     }
  2822.     .single-slide {
  2823.       padding: 0 50px;  
  2824.     }
  2825.     .introduction-btn {  
  2826.       font-size: 20px;   
  2827.     }
  2828.     .header-content h2 {  
  2829.       margin-bottom: 10px;
  2830.     }
  2831.     .contact-left h2, .contact-right h2 {
  2832.       font-size: 20px;
  2833.       margin-bottom: 10px;
  2834.     }
  2835.     .single-address h4 {
  2836.       font-size: 18px;
  2837.     }
  2838.     .single-address p {  
  2839.       font-size: 13px;   
  2840.     }
  2841.     .contact-right {     
  2842.       padding: 30px 20px;    
  2843.     }
  2844.     .contact-form .form-group input {    
  2845.       font-size: 16px;
  2846.       height: 40px;  
  2847.     }
  2848.     .footer-social a {
  2849.       font-size: 15px;
  2850.       height: 40px;
  2851.       line-height: 40px;
  2852.       margin: 0 5px;  
  2853.       width: 40px;
  2854.     }
  2855.     .blog-archive .single-from-blog figure img {
  2856.       height: 250px;
  2857.     }
  2858.     .instagram-feed .slick-prev {
  2859.       left: 26%;
  2860.     }
  2861.     .instagram-feed .slick-next {
  2862.       right: 27%;
  2863.     }
  2864.     .single-widget h2 {
  2865.       font-size: 20px;
  2866.       line-height: 20px;  
  2867.     }
  2868.     .blog-pagination > li > a,
  2869.     .blog-pagination > li > span {   
  2870.       padding: 6px 15px;     
  2871.     }
  2872.     .follow-us a {   
  2873.       font-size: 15px;
  2874.       height: 32px;
  2875.       line-height: 32px;
  2876.       margin: 0 2px;   
  2877.       width: 32px;
  2878.     }
  2879.     .blog-details-content {
  2880.       padding: 25px;     
  2881.     }
  2882.     .blog-comment {
  2883.       padding: 0 25px 40px;
  2884.     }
  2885.     .blog-details-content blockquote {
  2886.       font-size: 18px;
  2887.       margin-bottom: 30px;
  2888.       margin-top: 30px;
  2889.     }  
  2890.     #error-page {    
  2891.       padding: 60px 0;   
  2892.     }
  2893.     .error-page-area {   
  2894.       width: 250px;
  2895.     }
  2896.     .error-no {
  2897.       padding: 20px;     
  2898.     }
  2899.     .error-no h2 {   
  2900.       font-size: 35px; 
  2901.     }
  2902.     .error-no p {    
  2903.       font-size: 40px;   
  2904.     }
  2905.     .error-message h4 {
  2906.       font-size: 25px;
  2907.       line-height: 20px;
  2908.     }
  2909.     .error-message p {
  2910.       font-size: 16px;
  2911.       padding: 0 15px;
  2912.     }
  2913.    
  2914.  
  2915.  
  2916. }
  2917.  
  2918.  
  2919. @media(max-width:320px ){
  2920.     .search-area input[type="text"]:focus {        
  2921.         width: 210px;
  2922.     }
  2923.     .search-area input[type="text"] {  
  2924.       font-size: 12px;  
  2925.     }
  2926.     #navbar {
  2927.       width: 109%;
  2928.     }
  2929.     .team-grid {
  2930.       padding: 0 35px;
  2931.     }
  2932.     .team-info {
  2933.       padding: 25px 10px;
  2934.     }
  2935.     .footer-social a {
  2936.       font-size: 14px;
  2937.       height: 35px;
  2938.       line-height: 35px;
  2939.       margin: 0 2px;
  2940.       width: 35px;
  2941.     }
  2942.     .footer-bottom p {
  2943.       font-size: 15px; 
  2944.     }
  2945.     .blog-archive .single-from-blog figure img {
  2946.       height: 200px;
  2947.     }
  2948.     .instagram-feed .slick-prev {
  2949.       left: 23%;
  2950.     }
  2951.     .instagram-feed .slick-next {
  2952.       right: 24%;
  2953.     }  
  2954.     .blog-pagination > li > a,
  2955.     .blog-pagination > li > span {   
  2956.       padding: 4px 13px;     
  2957.     }
  2958.     .follow-us a {   
  2959.       font-size: 14px;
  2960.       height: 30px;
  2961.       line-height: 30px;
  2962.       margin: 0 2px;   
  2963.       width: 30px;
  2964.     }
  2965.     .popular-post-widget .media-left {
  2966.       margin-right: 0;
  2967.       text-align: center;
  2968.       width: 100%;
  2969.       margin-bottom: 15px;
  2970.     }
  2971.     .popular-post-widget .media-left a{
  2972.         display: inline-block;
  2973.     }
  2974.     .popular-post-widget .media-body {
  2975.       text-align: center;    
  2976.     }
  2977.  
  2978.    
  2979. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!