Advertisement
Guest User

Fb-page - CSS

a guest
Dec 9th, 2015
88
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 41.22 KB | None | 0 0
  1. /*
  2. 1. Preloader ------------------ #line 28
  3. 2. Background ------------------#line 47
  4. 3. General style---------------#line 228
  5. 4. Typography ---------------- #line 257
  6.   4.1. Title ----------------- #line 275
  7.   4.2. Text ------------------ #line 355
  8.   4.3. List ------------------ #line 366
  9.   4.4. Img ------------------- #line 383
  10.   4.5. Table ----------------- #line 399
  11.   4.6. Blockquotes ------------#line 409
  12.   4.7. Checkbox ---------------#line 424
  13.   4.8. Input ------------------#line 521
  14.   4.9. Button ---------------- #line 702
  15. 5. General page ---------------#line 803
  16.    5.1 Logo -------------------#line 852
  17.    5.2 Block-nav --------------#line 943
  18. 6. Home  -------------------- #line 1097
  19.    6.1. Notify-me ----------- #line 1127
  20. 7. About -------------------- #line 1311
  21.    7.1. Carousel service----- #line 1325
  22.    7.2. Carousel team ------- #line 1361
  23. 8. Contact ------------------ #line 1605
  24. 9. Helper block ------------- #line 1714
  25. 10.Under -------------------- #line 1754
  26. 11.Intro -------------------- #line 1838
  27. */
  28. /*Preloader*/
  29. .loader {
  30.   background: #3c455d;
  31.   display: table;
  32.   height: 100%;
  33.   max-width: 100%;
  34.   position: absolute;
  35.   width: 100%;
  36.   z-index: 99999;
  37. }
  38.  
  39. .ball-beat {
  40.   backface-visibility: hidden;
  41.   display: table-cell;
  42.   overflow: hidden;
  43.   text-align: center;
  44.   vertical-align: middle;
  45. }
  46.  
  47. /*Background*/
  48. .default-theme {
  49.   background: url(../img/default-theme-bg.jpg) 50% 50%;
  50.   width: 100%;
  51.   height: 100%;
  52.   background-size: cover;
  53. }
  54. .default-theme .impala-wrap-home .impala-scroll-overlay,
  55. .default-theme .impala-under .impala-scroll-overlay {
  56.   background: rgba(60, 69, 93, 0.5);
  57. }
  58. .default-theme .impala-wrap-about .impala-scroll-overlay {
  59.   background: rgba(60, 69, 93, 0.8);
  60. }
  61. .default-theme .impala-wrap-contact .impala-scroll-overlay {
  62.   background: rgba(60, 69, 93, 0.8);
  63. }
  64.  
  65. .slider-theme {
  66.   z-index: 9999;
  67.   position: absolute;
  68. }
  69. .slider-theme .bg-box {
  70.   background-position: top center;
  71.   background-repeat: no-repeat;
  72.   background-size: cover;
  73.   height: 100%;
  74.   left: 0;
  75.   overflow: hidden;
  76.   position: absolute;
  77.   top: 0;
  78.   width: 100%;
  79.   z-index: -1;
  80. }
  81. .slider-theme .bg-box .rslides {
  82.   height: 100%;
  83.   list-style: none;
  84.   margin: 0;
  85.   overflow: hidden;
  86.   padding: 0;
  87.   position: relative;
  88.   width: 100%;
  89.   z-index: 1;
  90. }
  91. .slider-theme .bg-box .rslides li {
  92.   -webkit-backface-visibility: hidden;
  93.   background-size: cover !important;
  94.   display: none;
  95.   height: 100%;
  96.   left: 0;
  97.   padding-left: 0;
  98.   position: absolute;
  99.   top: 0;
  100.   width: 100%;
  101. }
  102. .slider-theme .bg-box .rslides li:first-child {
  103.   display: block;
  104.   float: left;
  105.   position: relative;
  106. }
  107. .slider-theme .bg-box .rslides img {
  108.   border: 0;
  109.   display: block;
  110.   float: left;
  111.   height: auto;
  112.   width: 100%;
  113. }
  114. .slider-theme .impala-wrap-about .impala-scroll-overlay {
  115.   background: rgba(60, 69, 93, 0.8);
  116. }
  117. .slider-theme .impala-wrap-home .impala-scroll-overlay {
  118.   background: rgba(60, 69, 93, 0.5);
  119. }
  120. .slider-theme .impala-wrap-contact .impala-scroll-overlay {
  121.   background: rgba(60, 69, 93, 0.8);
  122. }
  123.  
  124. .image-gradient-theme {
  125.   -webkit-background-size: cover;
  126.   background: url(../img/app-theme-bg.jpg) 50% 50%;
  127.   background-size: cover;
  128. }
  129. .image-gradient-theme .impala-wrap-home .impala-scroll-overlay {
  130.   background: -moz-linear-gradient(top, rgba(16, 150, 222, 0.7) 0%, #00c5d5 100%);
  131.   /* FF3.6+ */
  132.   background: -ms-linear-gradient(top, rgba(16, 150, 222, 0.7) 0%, #00c5d5 100%);
  133.   /* IE10+ */
  134.   background: -o-linear-gradient(top, rgba(16, 150, 222, 0.7) 0%, #00c5d5 100%);
  135.   /* Opera 11.10+ */
  136.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(16, 150, 222, 0.7)), color-stop(100%, #00c5d5));
  137.   /* Chrome,Safari4+ */
  138.   background: -webkit-linear-gradient(top, rgba(16, 150, 222, 0.7) 0%, #00c5d5 100%);
  139.   /* Chrome10+,Safari5.1+ */
  140.   background: linear-gradient(to bottom, rgba(16, 150, 222, 0.7) 0%, #00c5d5 100%);
  141.   /* W3C */
  142.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b31096de', endColorstr='#00c5d5',GradientType=0 );
  143.   /* IE6-9 */
  144. }
  145. .image-gradient-theme .impala-wrap-about .impala-scroll-overlay {
  146.   background: -moz-linear-gradient(top, rgba(16, 150, 222, 0.8) 0%, #00c5d5 100%);
  147.   /* FF3.6+ */
  148.   background: -ms-linear-gradient(top, rgba(16, 150, 222, 0.8) 0%, #00c5d5 100%);
  149.   /* IE10+ */
  150.   background: -o-linear-gradient(top, rgba(16, 150, 222, 0.8) 0%, #00c5d5 100%);
  151.   /* Opera 11.10+ */
  152.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(16, 150, 222, 0.8)), color-stop(100%, #00c5d5));
  153.   /* Chrome,Safari4+ */
  154.   background: -webkit-linear-gradient(top, rgba(16, 150, 222, 0.8) 0%, #00c5d5 100%);
  155.   /* Chrome10+,Safari5.1+ */
  156.   background: linear-gradient(to bottom, rgba(16, 150, 222, 0.8) 0%, #00c5d5 100%);
  157.   /* W3C */
  158.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cc1096de', endColorstr='#00c5d5',GradientType=0 );
  159.   /* IE6-9 */
  160. }
  161. .image-gradient-theme .impala-wrap-contact .impala-scroll-overlay {
  162.   background: -moz-linear-gradient(top, rgba(16, 150, 222, 0.8) 0%, #00c5d5 100%);
  163.   /* FF3.6+ */
  164.   background: -ms-linear-gradient(top, rgba(16, 150, 222, 0.8) 0%, #00c5d5 100%);
  165.   /* IE10+ */
  166.   background: -o-linear-gradient(top, rgba(16, 150, 222, 0.8) 0%, #00c5d5 100%);
  167.   /* Opera 11.10+ */
  168.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(16, 150, 222, 0.8)), color-stop(100%, #00c5d5));
  169.   /* Chrome,Safari4+ */
  170.   background: -webkit-linear-gradient(top, rgba(16, 150, 222, 0.8) 0%, #00c5d5 100%);
  171.   /* Chrome10+,Safari5.1+ */
  172.   background: linear-gradient(to bottom, rgba(16, 150, 222, 0.8) 0%, #00c5d5 100%);
  173.   /* W3C */
  174.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cc1096de', endColorstr='#00c5d5',GradientType=0 );
  175.   /* IE6-9 */
  176. }
  177.  
  178. .color-theme {
  179.   background: #5a6789;
  180. }
  181.  
  182. .parallax-theme .impala-wrap-home .impala-scroll-overlay {
  183.   background: rgba(60, 69, 93, 0.5);
  184. }
  185. .parallax-theme .impala-wrap-about .impala-scroll-overlay {
  186.   background: rgba(60, 69, 93, 0.8);
  187. }
  188. .parallax-theme .impala-wrap-contact .impala-scroll-overlay {
  189.   background: rgba(60, 69, 93, 0.8);
  190. }
  191. .parallax-theme .parallax-wallpaper {
  192.   background: url(../img/parallax-bg.jpg);
  193.   left: -25%;
  194.   -webkit-background-size: cover;
  195.   background-size: cover;
  196.   height: 150%;
  197.   margin: 0;
  198.   overflow: hidden;
  199.   padding: 0;
  200.   position: absolute;
  201.   top: -25%;
  202.   width: 150%;
  203.   z-index: -1;
  204. }
  205.  
  206. .bg-video {
  207.   background: url(../img/imgo.jpg) 50% 50% no-repeat;
  208.   background-size: cover;
  209. }
  210. .bg-video video {
  211.   min-width: 100%;
  212.   min-height: 100%;
  213. }
  214. .bg-video .impala-wrap-home .impala-scroll-overlay {
  215.   background: rgba(60, 69, 93, 0.5);
  216. }
  217. .bg-video .impala-wrap-about .impala-scroll-overlay {
  218.   background: rgba(60, 69, 93, 0.8);
  219. }
  220. .bg-video .impala-wrap-contact .impala-scroll-overlay {
  221.   background: rgba(60, 69, 93, 0.8);
  222. }
  223.  
  224. .page-current {
  225.   z-index: 9;
  226. }
  227.  
  228. /*General style*/
  229. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  230.   border: 0;
  231.   margin: 0;
  232.   outline: 0;
  233.   padding: 0;
  234.   vertical-align: baseline;
  235. }
  236.  
  237. html {
  238.   height: 100%;
  239.   overflow: hidden;
  240.   width: 100%;
  241. }
  242.  
  243. body {
  244.   height: 100%;
  245.   overflow: hidden;
  246.   position: relative;
  247.   width: 100%;
  248.   -webkit-font-smoothing: antialiased;
  249.   font-family: 'Open Sans', sans-serif;
  250. }
  251.  
  252. .animated {
  253.   -webkit-animation-duration: .5s;
  254.   animation-duration: .5s;
  255. }
  256.  
  257. /*Typography*/
  258. .typography-bg {
  259.   overflow-y: scroll;
  260. }
  261. .typography-bg .container {
  262.   padding-bottom: 60px;
  263. }
  264. .typography-bg .container > .row {
  265.   margin-bottom: 30px;
  266. }
  267. .typography-bg .container .block-list ol, .typography-bg .container .block-list ul {
  268.   margin-bottom: 15px;
  269. }
  270.  
  271. .input-block {
  272.   margin-bottom: 90px !important;
  273. }
  274.  
  275. /*Title*/
  276. h1 {
  277.   text-transform: uppercase;
  278.   font-weight: 700;
  279.   letter-spacing: .03em;
  280.   margin-bottom: 10px;
  281.   margin-top: 10px;
  282. }
  283.  
  284. h2 {
  285.   text-transform: uppercase;
  286.   font-weight: 700;
  287.   letter-spacing: .03em;
  288.   margin-bottom: 10px;
  289.   margin-top: 10px;
  290. }
  291.  
  292. h3 {
  293.   text-transform: uppercase;
  294.   font-weight: 700;
  295.   letter-spacing: .03em;
  296.   margin-bottom: 10px;
  297.   margin-top: 10px;
  298. }
  299.  
  300. h4 {
  301.   text-transform: uppercase;
  302.   font-weight: 700;
  303.   letter-spacing: .03em;
  304.   margin-bottom: 10px;
  305.   margin-top: 10px;
  306. }
  307.  
  308. h5 {
  309.   text-transform: uppercase;
  310.   font-weight: 700;
  311.   letter-spacing: .03em;
  312.   margin-bottom: 10px;
  313.   margin-top: 10px;
  314. }
  315.  
  316. h6 {
  317.   text-transform: uppercase;
  318.   font-weight: 700;
  319.   letter-spacing: .03em;
  320.   margin-bottom: 10px;
  321.   margin-top: 10px;
  322. }
  323.  
  324. h1 {
  325.   font-size: 4.000em;
  326. }
  327.  
  328. h2 {
  329.   font-size: 2.000em;
  330. }
  331.  
  332. h5 {
  333.   font-size: 1.222em;
  334. }
  335.  
  336. h6 {
  337.   font-size: 1.000em;
  338. }
  339.  
  340. @media only all and (min-width: 768px) {
  341.   h2 {
  342.     font-size: 2.333em;
  343.   }
  344. }
  345. @media only all and (min-width: 992px) {
  346.   h2 {
  347.     font-size: 2.667em;
  348.   }
  349. }
  350. @media only all and (min-width: 1200px) {
  351.   .typography-bg .container {
  352.     width: 1170px;
  353.   }
  354. }
  355. /*Text*/
  356. p {
  357.   margin-bottom: 25px;
  358. }
  359.  
  360. a:focus {
  361.   box-shadow: none;
  362.   outline-offset: 0 !important;
  363.   outline: 0 !important;
  364. }
  365.  
  366. /*List*/
  367. ol, ul {
  368.   list-style-position: inside;
  369. }
  370.  
  371. ul li {
  372.   list-style-type: none;
  373.   padding-left: 10px;
  374.   background-image: url(../img/list-style.png);
  375.   background-repeat: no-repeat;
  376.   background-position: 0 50%;
  377. }
  378.  
  379. .bold-list li {
  380.   font-weight: 700;
  381. }
  382.  
  383. /*Img*/
  384. .img-responsive {
  385.   margin: auto;
  386. }
  387.  
  388. figure {
  389.   text-align: center;
  390. }
  391. figure .img-responsive {
  392.   margin-bottom: 25px;
  393. }
  394. figure figcaption {
  395.   font-size: 0.778em;
  396.   font-style: italic;
  397. }
  398.  
  399. /*Table*/
  400. table tr {
  401.   text-align: center;
  402. }
  403. table tr th {
  404.   background: rgba(140, 146, 161, 0.3);
  405.   text-align: center;
  406.   font-weight: normal;
  407. }
  408.  
  409. /*Blockquotes*/
  410. .quotes img {
  411.   float: left;
  412. }
  413. .quotes svg {
  414.   float: left;
  415. }
  416. .quotes blockquote {
  417.   margin-left: 75px;
  418. }
  419. .quotes blockquote span {
  420.   display: block;
  421.   font-size: 0.583em;
  422. }
  423.  
  424. /*Checkbox*/
  425. .checkbox-block,
  426. .radio-block {
  427.   margin-top: 20px;
  428.   margin-bottom: 20px;
  429. }
  430.  
  431. .checkbox-button,
  432. .radio-button {
  433.   margin-bottom: 15px;
  434. }
  435.  
  436. .checkbox-button svg > * {
  437.   fill: #3c455d;
  438. }
  439.  
  440. .checkbox-button-w svg > * {
  441.   fill: #fff;
  442. }
  443.  
  444. .disabled > * {
  445.   opacity: .3;
  446. }
  447.  
  448. input[type="checkbox"],
  449. input[type="radio"] {
  450.   display: none;
  451. }
  452.  
  453. input[type="checkbox"] + label,
  454. input[type="radio"] + label {
  455.   font-size: 1.000em;
  456.   font-weight: normal;
  457.   line-height: 1.667em;
  458.   position: relative;
  459.   white-space: nowrap;
  460. }
  461.  
  462. input[type="checkbox"] + label:before,
  463. input[type="radio"] + label:before {
  464.   content: '';
  465.   display: inline-block;
  466.   margin-right: 7px;
  467.   position: relative;
  468. }
  469.  
  470. input[type="checkbox"] + label:after,
  471. input[type="radio"] + label:after {
  472.   content: '';
  473.   display: block;
  474.   position: absolute;
  475. }
  476.  
  477. input[type="checkbox"] + label:before {
  478.   background: #8a8f9e;
  479.   border-radius: 5px;
  480.   height: 22px;
  481.   top: 5px;
  482.   width: 22px;
  483. }
  484.  
  485. input[type="checkbox"]:checked + label + svg {
  486.   display: block;
  487.   left: 18px;
  488.   position: absolute;
  489.   top: 12px;
  490. }
  491.  
  492. input[type="checkbox"] + label:after,
  493. input[type="radio"] + label:after {
  494.   content: '';
  495.   display: block;
  496.   position: absolute;
  497. }
  498.  
  499. input[type="radio"] + label:before {
  500.   border-radius: 50%;
  501.   border: 4px solid #8a8f9e;
  502.   height: 22px;
  503.   top: 5px;
  504.   width: 22px;
  505. }
  506.  
  507. input[type="radio"] + label:after {
  508.   height: 22px;
  509.   left: 7px;
  510.   top: 12px;
  511.   width: 22px;
  512. }
  513.  
  514. input[type="radio"]:checked + label:after {
  515.   background-color: #8a8f9e;
  516.   border-radius: 50%;
  517.   height: 8px;
  518.   width: 8px;
  519. }
  520.  
  521. /*Input*/
  522. .form-control {
  523.   border: none;
  524.   border-bottom: 1px solid #d3d4d6;
  525.   border-radius: 0;
  526.   box-shadow: none;
  527.   font-size: 0.889em;
  528.   height: 40px !important;
  529.   line-height: 1.125em;
  530.   margin-bottom: 30px;
  531.   padding: 9px 0;
  532. }
  533.  
  534. .form-control::-webkit-input-placeholder {
  535.   color: rgba(255, 255, 255, 0.6);
  536.   font-style: italic;
  537. }
  538. .form-control:-moz-placeholder {
  539.   color: rgba(255, 255, 255, 0.6);
  540.   font-style: italic;
  541. }
  542. .form-control::-moz-placeholder {
  543.   color: rgba(255, 255, 255, 0.6);
  544.   font-style: italic;
  545. }
  546. .form-control:-ms-input-placeholder {
  547.   color: rgba(255, 255, 255, 0.6) !important;
  548.   font-style: italic;
  549. }
  550. .form-control:focus::-webkit-input-placeholder {
  551.   color: transparent;
  552. }
  553. .form-control:focus:-moz-placeholder {
  554.   color: transparent;
  555. }
  556. .form-control:focus::-moz-placeholder {
  557.   color: transparent;
  558. }
  559. .form-control:focus:-ms-input-placeholder {
  560.   color: transparent;
  561. }
  562.  
  563. .contact-form .form-control::-webkit-input-placeholder {
  564.   color: #fff;
  565. }
  566. .contact-form .form-control:-moz-placeholder {
  567.   color: #fff;
  568. }
  569. .contact-form .form-control::-moz-placeholder {
  570.   color: #fff;
  571. }
  572. .contact-form .form-control:-ms-input-placeholder {
  573.   color: #fff;
  574. }
  575. .contact-form .form-control:focus::-webkit-input-placeholder {
  576.   color: transparent;
  577. }
  578. .contact-form .form-control:focus:-moz-placeholder {
  579.   color: transparent;
  580. }
  581. .contact-form .form-control:focus::-moz-placeholder {
  582.   color: transparent;
  583. }
  584. .contact-form .form-control:focus:-ms-input-placeholder {
  585.   color: transparent;
  586. }
  587.  
  588. input[type=text]::-ms-clear {
  589.   display: none;
  590. }
  591.  
  592. input[type=password]::-ms-reveal {
  593.   display: none;
  594. }
  595.  
  596. .form-control:focus {
  597.   border-color: inherit;
  598.   box-shadow: none;
  599. }
  600.  
  601. .form-group textarea:focus::-webkit-input-placeholder {
  602.   color: transparent;
  603. }
  604.  
  605. .bootstrap-select {
  606.   width: 100% !important;
  607.   margin-bottom: 30px;
  608. }
  609. .bootstrap-select .btn {
  610.   background: transparent;
  611.   border: none;
  612.   border-bottom: 1px solid #d3d4d6;
  613.   border-radius: 0;
  614.   font-size: 0.889em;
  615.   height: 40px;
  616.   margin-bottom: 0;
  617.   padding: 9px 0;
  618.   position: relative;
  619. }
  620. .bootstrap-select .btn span {
  621.   font-size: 0.889em;
  622.   color: #8a8f9e;
  623.   display: block;
  624.   line-height: 1em;
  625. }
  626. .bootstrap-select .btn:hover, .bootstrap-select .btn:focus {
  627.   background: transparent;
  628.   border: none;
  629.   border-bottom: 1px solid #d3d4d6;
  630.   -webkit-transition: border-bottom .5s;
  631.   transition: border-bottom .5s;
  632. }
  633. .bootstrap-select .dropdown-menu {
  634.   margin: 0;
  635.   padding: 0;
  636.   border: none;
  637. }
  638. .bootstrap-select .caret {
  639.   border: 0;
  640.   width: 0;
  641.   height: 0;
  642.   top: 35% !important;
  643. }
  644. .bootstrap-select .caret:before {
  645.   -webkit-transition: -webkit-transform .5s;
  646.   content: url(../img/svg/attr.svg);
  647.   display: inline-block;
  648.   transition: transform .5s;
  649.   width: 8px;
  650.   height: 13px;
  651. }
  652. .bootstrap-select.open .btn span {
  653.   color: #fff;
  654. }
  655. .bootstrap-select.open .dropdown-menu {
  656.   background: #3c455d;
  657. }
  658. .bootstrap-select.open .dropdown-menu li {
  659.   padding-left: 0;
  660.   background-image: none;
  661.   border: 1px solid #b1b5be;
  662.   border-bottom: 0;
  663. }
  664. .bootstrap-select.open .dropdown-menu li a {
  665.   -webkit-transition: background .2s ease-in;
  666.   color: #fff;
  667.   font-size: 0.889em;
  668.   padding: 9px 8px;
  669.   transition: background .2s ease-in;
  670. }
  671. .bootstrap-select.open .dropdown-menu li a:hover, .bootstrap-select.open .dropdown-menu li a:focus {
  672.   -webkit-transition: background .2s ease-out;
  673.   background-color: #777d8e;
  674.   transition: background .2s ease-out;
  675. }
  676. .bootstrap-select.open .dropdown-menu li:last-child {
  677.   border-bottom: 1px solid #b1b5be;
  678. }
  679. .bootstrap-select.open > .btn-default.dropdown-toggle {
  680.   background-color: transparent;
  681.   border-color: transparent;
  682.   box-shadow: none;
  683. }
  684. .bootstrap-select.open > .btn-default.dropdown-toggle .caret:before {
  685.   -webkit-transition: -webkit-transform .5s;
  686.   -moz-transform: rotate(450deg);
  687.   -webkit-transform: rotate(450deg);
  688.   transform: rotate(450deg);
  689.   transition: transform .5s;
  690. }
  691.  
  692. .bootstrap-select .btn:focus {
  693.   outline: 0 !important;
  694.   outline-offset: 0 !important;
  695. }
  696. .bootstrap-select .btn:active {
  697.   outline: 0 !important;
  698.   outline-offset: 0 !important;
  699.   box-shadow: none;
  700. }
  701.  
  702. /*Button*/
  703. .btn {
  704.   background: transparent;
  705.   border-radius: 20px;
  706.   border-width: 2px;
  707.   font-size: 0.778em;
  708.   margin-bottom: 25px;
  709.   opacity: 1;
  710.   -webkit-transition: background .2s ease-in, border-color .2s;
  711.   transition: background .2s ease-in, border-color .2s;
  712. }
  713. .btn:hover {
  714.   -webkit-transition: background .2s ease-out, border-color .2s;
  715.   transition: background .2s ease-out,  border-color .2s;
  716.   background: rgba(119, 125, 142, 0.4);
  717.   border: 2px solid transparent;
  718. }
  719. .btn:active, .btn:focus {
  720.   background: #777d8e;
  721.   border: 2px solid #777d8e;
  722.   outline-offset: 0;
  723.   outline: 0;
  724. }
  725. .btn:active:focus {
  726.   outline-offset: 0;
  727.   outline: 0;
  728. }
  729.  
  730. .btn-info {
  731.   border-color: #fff;
  732. }
  733.  
  734. .btn-info[disabled], .btn-info[disabled]:hover, .btn-info[disabled]:focus {
  735.   background: #777d8e;
  736.   border: 2px solid #777d8e;
  737.   color: #fff;
  738. }
  739.  
  740. .btn-primary .btn:active, .btn-primary .btn:focus {
  741.   box-shadow: none;
  742. }
  743.  
  744. .white-bg-typography {
  745.   background: #fff;
  746. }
  747. .white-bg-typography > * {
  748.   color: #8a8f9e;
  749. }
  750. .white-bg-typography .select-primary .bootstrap-select.open .dropdown-menu {
  751.   background: #fff;
  752. }
  753. .white-bg-typography .form-control {
  754.   color: rgba(60, 69, 93, 0.6);
  755. }
  756. .white-bg-typography .form-control::-webkit-input-placeholder {
  757.   color: rgba(60, 69, 93, 0.6);
  758. }
  759. .white-bg-typography .form-control:-moz-placeholder {
  760.   color: rgba(60, 69, 93, 0.6);
  761.   font-style: italic;
  762. }
  763. .white-bg-typography .form-control::-moz-placeholder {
  764.   color: rgba(60, 69, 93, 0.6);
  765.   font-style: italic;
  766. }
  767. .white-bg-typography .form-control:-ms-input-placeholder {
  768.   color: rgba(60, 69, 93, 0.6);
  769.   font-style: italic;
  770. }
  771. .white-bg-typography .form-control:focus::-webkit-input-placeholder {
  772.   color: transparent;
  773. }
  774. .white-bg-typography .form-control:focus:-moz-placeholder {
  775.   color: transparent;
  776. }
  777. .white-bg-typography .form-control:focus::-moz-placeholder {
  778.   color: transparent;
  779. }
  780. .white-bg-typography .form-control:focus:-ms-input-placeholder {
  781.   color: transparent;
  782. }
  783.  
  784. .select-primary .bootstrap-select .btn-group {
  785.   color: #777d8e;
  786. }
  787. .select-primary .bootstrap-select .caret:before {
  788.   content: url(../img/svg/attrw.svg);
  789. }
  790. .select-primary .bootstrap-select.open .btn span {
  791.   color: #3c455d;
  792. }
  793. .select-primary .bootstrap-select.open .dropdown-menu {
  794.   background: transparent;
  795. }
  796. .select-primary .bootstrap-select.open .dropdown-menu li a {
  797.   color: #3c455d;
  798. }
  799. .select-primary .bootstrap-select.open .dropdown-menu li a:hover, .select-primary .bootstrap-select.open .dropdown-menu li a:focus {
  800.   background-color: #c4c7ce;
  801. }
  802.  
  803. /*General page*/
  804. .impala-page {
  805.   height: 100%;
  806.   max-width: 100%;
  807.   overflow: hidden;
  808.   position: absolute;
  809.   top: 0;
  810.   backface-visibility: hidden;
  811.   -webkit-backface-visibility: hidden;
  812.   width: 100%;
  813. }
  814. .impala-page .impala-scroll-overlay {
  815.   height: 100%;
  816.   overflow: hidden;
  817.   position: relative;
  818. }
  819.  
  820. .impala-prev {
  821.   left: -100%;
  822. }
  823.  
  824. .impala-next {
  825.   right: -100%;
  826. }
  827.  
  828. .page-current {
  829.   left: 0;
  830.   right: 0;
  831. }
  832. .page-current.impala-wrap-home {
  833.   left: 0;
  834.   right: 0;
  835. }
  836. .page-current .impala-prev {
  837.   left: 0;
  838. }
  839. .page-current .impala-next {
  840.   right: 0;
  841. }
  842.  
  843. .copyright-block {
  844.   padding-bottom: 40px;
  845.   text-align: center;
  846. }
  847. .copyright-block .copyright {
  848.   font-size: 0.778em;
  849.   text-transform: uppercase;
  850. }
  851.  
  852. /*Logo*/
  853. .logo-wrap {
  854.   margin-bottom: 30px;
  855.   z-index: 99;
  856. }
  857. .logo-wrap .logo {
  858.   display: block;
  859.   margin: auto;
  860. }
  861.  
  862. .social {
  863.   background: #19a;
  864.   display: block;
  865.   height: 24px;
  866.   margin: 0 auto 30px;
  867.   width: 24px;
  868. }
  869.  
  870. .social-links a {
  871.   -webkit-transition: background 0.3s;
  872.   background: rgba(255, 251, 251, 0.8);
  873.   border-radius: 50%;
  874.   display: inline-block;
  875.   height: 25px;
  876.   width: 25px;
  877.   transition: background 0.3s;
  878. }
  879. .social-links a:hover {
  880.   -webkit-transition: background 0.3s;
  881.   background: #fffbfb;
  882.   transition: background 0.3s;
  883. }
  884.  
  885. .social-links {
  886.   display: block;
  887.   font-size: 0.9em;
  888.   height: 40px;
  889.   text-align: center;
  890.   z-index: 1;
  891. }
  892. .social-links .social-btn {
  893.   border-radius: 50%;
  894.   color: inherit;
  895.   height: 25px;
  896.   line-height: 29px;
  897.   margin-right: 5px;
  898.   opacity: 1;
  899.   position: relative;
  900.   text-align: center;
  901.   width: 25px;
  902. }
  903. .social-links .social-btn:last-child {
  904.   margin-right: 0;
  905. }
  906. .social-links.fadeOutLeftBig {
  907.   -webkit-transition: height .5s;
  908.   height: 0;
  909.   transition: height .5s;
  910. }
  911. .social-links.fadeInRightBig {
  912.   -webkit-transition: height .5s;
  913.   transition: height .5s;
  914. }
  915.  
  916. .social-block {
  917.   overflow: hidden;
  918. }
  919.  
  920. .soc-link {
  921.   -webkit-transition: background 0.3s ease-in;
  922.   background: rgba(255, 251, 251, 0.8);
  923.   border-radius: 50%;
  924.   cursor: pointer;
  925.   display: block;
  926.   height: 25px;
  927.   margin: 15px auto;
  928.   padding: 0;
  929.   position: relative;
  930.   transition: background 0.3s ease-in;
  931.   width: 25px;
  932.   z-index: 20;
  933. }
  934. .soc-link img {
  935.   padding: 6px;
  936. }
  937. .soc-link:hover {
  938.   -webkit-transition: background 0.3s ease-out;
  939.   background: #fffbfb;
  940.   transition: background 0.3s ease-out;
  941. }
  942.  
  943. /*Block-nav*/
  944. .block-nav a {
  945.   -moz-transition: border-color .2s ease-in;
  946.   -o-transition: border-color .2s ease-in;
  947.   -webkit-transition: border-color .2s ease-in;
  948.   border-radius: 50%;
  949.   border: 10px solid rgba(255, 255, 255, 0.6);
  950.   display: block;
  951.   height: 66px;
  952.   line-height: 58px;
  953.   margin-bottom: 30px;
  954.   margin-top: 30px;
  955.   position: relative;
  956.   text-align: center;
  957.   width: 66px;
  958.   transition: border-color .2s ease-in;
  959. }
  960. .block-nav a img, .block-nav a svg {
  961.   bottom: 0;
  962.   left: 0;
  963.   margin: auto;
  964.   position: absolute;
  965.   right: 0;
  966.   top: 0;
  967. }
  968. .block-nav a.btn-prev {
  969.   float: left;
  970. }
  971. .block-nav a.btn-next {
  972.   float: right;
  973. }
  974. .block-nav a:hover, .block-nav a:active {
  975.   -moz-transition: border-color .2s ease-out;
  976.   border-color: rgba(255, 255, 255, 0.9);
  977.   transition: border-color .2s ease-out;
  978.   -o-transition: border-color .2s ease-out;
  979.   -webkit-transition: border-color .2s ease-out;
  980. }
  981.  
  982. .container-home .block-nav {
  983.   overflow: hidden;
  984. }
  985.  
  986. @media only all and (min-width: 768px) {
  987.   .copyright-block {
  988.     padding-bottom: 60px;
  989.   }
  990.  
  991.   .container-about .block-nav,
  992.   .container-contact .block-nav {
  993.     position: relative;
  994.     width: 714px;
  995.     margin: auto;
  996.   }
  997.  
  998.   .block-nav a {
  999.     position: absolute;
  1000.     z-index: 9;
  1001.   }
  1002.   .block-nav a.btn-prev {
  1003.     left: 12px;
  1004.   }
  1005.   .block-nav a.btn-next {
  1006.     right: 12px;
  1007.   }
  1008.   .block-nav.col-sm-12 {
  1009.     float: none;
  1010.     position: inherit;
  1011.   }
  1012.  
  1013.  
  1014.  
  1015.   .impala-wrap-about .container-about .block-nav a {
  1016.     left: 12px;
  1017.   }
  1018.  
  1019.   .impala-wrap-contact .container-contact .block-nav a {
  1020.     right: 12px;
  1021.   }
  1022. }
  1023. @media (min-width: 992px) {
  1024.   .container-about .block-nav,
  1025.   .container-contact .block-nav {
  1026.     width: 856px;
  1027.   }
  1028. }
  1029. @media only all and (min-width: 1080px) {
  1030.   .container-about .block-nav,
  1031.   .container-contact .block-nav {
  1032.     width: 100%;
  1033.   }
  1034.  
  1035.   .social-links-wrap {
  1036.     height: 25px;
  1037.     overflow: hidden;
  1038.     position: relative;
  1039.     right: -12px;
  1040.     width: auto;
  1041.   }
  1042.  
  1043.   .social-block {
  1044.     height: 50px;
  1045.     width: 100%;
  1046.   }
  1047.  
  1048.   .social-links {
  1049.     float: right;
  1050.     position: absolute;
  1051.     right: 38px;
  1052.     top: 0;
  1053.   }
  1054.  
  1055.   .soc-link {
  1056.     float: right;
  1057.     margin: 0 auto 20px;
  1058.   }
  1059.  
  1060.   .block-nav a {
  1061.     margin-top: -33px !important;
  1062.     position: fixed;
  1063.     top: 50%;
  1064.   }
  1065.   .block-nav a.btn-prev {
  1066.     left: 60px;
  1067.   }
  1068.   .block-nav a.btn-next {
  1069.     right: 60px;
  1070.   }
  1071.  
  1072.   .impala-wrap-about .container-about .block-nav a {
  1073.     left: -100%;
  1074.   }
  1075.  
  1076.   .impala-wrap-contact .container-contact .block-nav a {
  1077.     right: -100%;
  1078.   }
  1079.  
  1080.   .page-current.impala-wrap-contact .container-contact .block-nav a {
  1081.     right: 60px;
  1082.   }
  1083.  
  1084.   .page-current.impala-wrap-about .container-about .block-nav a {
  1085.     left: 60px;
  1086.   }
  1087. }
  1088. @media only all and (max-width: 1080px) {
  1089.   .impala-scroll-overlay {
  1090.     transform: translate3d(0, 0, 0);
  1091.   }
  1092.   .impala-scroll-overlay .container-contact,
  1093.   .impala-scroll-overlay .container-about {
  1094.     backface-visibility: hidden;
  1095.     transform: translate3d(0, 0, 0);
  1096.     -webkit-transform: translate3d(0, 0, 0);
  1097.   }
  1098. }
  1099. /*Home*/
  1100. .impala {
  1101.   text-align: center;
  1102. }
  1103. .impala .timer {
  1104.   display: block;
  1105.   height: 105px;
  1106.   margin: 0 auto;
  1107.   width: 260px;
  1108. }
  1109. .impala h1 {
  1110.   display: block;
  1111.   font-family: 'Montserrat', sans-serif;
  1112.   font-size: 2.667em;
  1113.   margin: 0 auto 20px;
  1114. }
  1115. .impala p {
  1116.   display: block;
  1117.   font-size: 0.778em;
  1118.   letter-spacing: 0.025em;
  1119.   line-height: 2.143em;
  1120.   margin: 0 auto 20px;
  1121. }
  1122. .impala input {
  1123.   display: inline-block;
  1124.   margin-bottom: 0;
  1125.   max-width: 350px;
  1126.   width: 100%;
  1127. }
  1128.  
  1129. /*Notify-me*/
  1130. input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  1131.   background-color: transparent;
  1132.   background-image: none;
  1133. }
  1134.  
  1135. .notify-me .form-group {
  1136.   margin: auto;
  1137.   max-width: 350px;
  1138.   position: relative;
  1139. }
  1140. .notify-me .form-group input {
  1141.   width: 98%;
  1142. }
  1143. .notify-me .form-group .btn {
  1144.   background: transparent;
  1145.   border: 0;
  1146.   margin: 0;
  1147.   padding: 5px;
  1148.   position: absolute;
  1149.   right: 0;
  1150.   top: 0;
  1151. }
  1152. .notify-me .form-group .btn img > *, .notify-me .form-group .btn svg > * {
  1153.   fill: rgba(255, 255, 255, 0.6);
  1154. }
  1155. .notify-me .form-group .btn:hover, .notify-me .form-group .btn:active {
  1156.   background: transparent;
  1157.   box-shadow: none;
  1158. }
  1159.  
  1160. .form-message {
  1161.   display: block;
  1162.   position: absolute;
  1163.   top: 100%;
  1164. }
  1165.  
  1166. .text-danger {
  1167.   border-radius: 30px;
  1168.   display: inline-block;
  1169.   height: auto;
  1170.   opacity: 1;
  1171.   position: absolute;
  1172. }
  1173. .text-danger ~ .btn:before {
  1174.   content: url(../img/svg/error.svg);
  1175.   height: 30px;
  1176.   overflow: hidden;
  1177.   position: absolute;
  1178.   right: 5px;
  1179.   width: 12px;
  1180. }
  1181. .text-danger ~ .btn svg {
  1182.   display: none;
  1183. }
  1184. .text-danger ~ .btn svg > * {
  1185.   fill: #fd6967;
  1186.   -moz-transition: fill .2s;
  1187.   -o-transition: fill .2s;
  1188.   -webkit-transition: fill .2s;
  1189.   transition: fill .2s;
  1190. }
  1191. .text-danger .form-control::-webkit-input-placeholder {
  1192.   color: red;
  1193. }
  1194. .text-danger .form-control:-moz-placeholder {
  1195.   color: red;
  1196. }
  1197. .text-danger .form-control::-moz-placeholder {
  1198.   color: red;
  1199. }
  1200. .text-danger .form-control:-ms-input-placeholder {
  1201.   color: red;
  1202. }
  1203.  
  1204. .text-success {
  1205.   border-radius: 30px;
  1206.   color: #62ff83;
  1207.   display: inline-block;
  1208.   height: auto;
  1209.   opacity: 1;
  1210.   position: absolute;
  1211. }
  1212. .text-success ~ .btn svg > * {
  1213.   -moz-transition: fill .2s;
  1214.   fill: #62ff83 !important;
  1215.   transition: fill .2s;
  1216.   -o-transition: fill .2s;
  1217.   -webkit-transition: fill .2s;
  1218. }
  1219.  
  1220. @media only all and (min-width: 768px) {
  1221.   .impala h1 {
  1222.     font-size: 3.444em;
  1223.   }
  1224.   .impala p {
  1225.     font-size: 1em;
  1226.   }
  1227.  
  1228.   .impala-wrap-home .container-home {
  1229.     height: 100%;
  1230.   }
  1231.   .impala-wrap-home .container-home .container {
  1232.     height: 100%;
  1233.   }
  1234.  
  1235.   .impala-home {
  1236.     display: table;
  1237.     height: 100%;
  1238.     padding-top: 0;
  1239.     position: relative;
  1240.     width: 100%;
  1241.   }
  1242.  
  1243.   .impala {
  1244.     display: table-cell;
  1245.     padding-bottom: 175px;
  1246.     padding-top: 175px;
  1247.     vertical-align: middle;
  1248.     width: 100%;
  1249.   }
  1250.   .impala input {
  1251.     margin-bottom: 0;
  1252.   }
  1253.  
  1254.   .logo-wrap {
  1255.     margin-top: 60px;
  1256.     margin-bottom: 0;
  1257.   }
  1258.  
  1259.   .impala-wrap-home .logo-wrap,
  1260.   .impala-wrap-home .social-block,
  1261.   .impala-wrap-home .copyright-block {
  1262.     left: 100px;
  1263.     position: absolute;
  1264.     right: 100px;
  1265.   }
  1266.   .impala-wrap-home .copyright-block {
  1267.     bottom: 0;
  1268.   }
  1269.  
  1270.   .social-block {
  1271.     bottom: 90px;
  1272.   }
  1273. }
  1274. @media only all and (max-width: 767px) {
  1275.   .impala-home {
  1276.     height: auto !important;
  1277.   }
  1278.  
  1279.   .impala {
  1280.     display: block !important;
  1281.     padding-bottom: 50px !important;
  1282.   }
  1283.  
  1284.   .copyright-block {
  1285.     position: static !important;
  1286.   }
  1287.  
  1288.   .social-block {
  1289.     position: static !important;
  1290.   }
  1291. }
  1292. @media only all and (min-width: 1080px) {
  1293.   .impala h1 {
  1294.     font-size: 4em;
  1295.   }
  1296.  
  1297.   .impala-wrap-home .container {
  1298.     position: static;
  1299.   }
  1300.   .impala-wrap-home .logo-wrap {
  1301.     left: 60px;
  1302.     margin-top: 0;
  1303.     position: absolute;
  1304.     right: auto;
  1305.     top: 60px;
  1306.   }
  1307.   .impala-wrap-home .social-block {
  1308.     left: auto;
  1309.     right: 60px;
  1310.     top: 60px;
  1311.   }
  1312. }
  1313. /*About*/
  1314. .impala-wrap-about .block-nav a {
  1315.   margin: 30px auto;
  1316. }
  1317.  
  1318. .block-about h2 {
  1319.   margin-bottom: 25px;
  1320.   text-align: center;
  1321. }
  1322. .block-about p {
  1323.   margin-bottom: 30px;
  1324.   text-align: center;
  1325. }
  1326.  
  1327. /*Carousel service*/
  1328. .carousel-service {
  1329.   margin: 20px 0;
  1330. }
  1331. .carousel-service .service-block {
  1332.   text-align: center;
  1333. }
  1334. .carousel-service .service-block .service-img-container {
  1335.   margin-bottom: 15px;
  1336.   min-height: 110px;
  1337.   overflow: hidden;
  1338.   position: relative;
  1339. }
  1340. .carousel-service .service-block .service-img-container h5 {
  1341.   font-weight: 400;
  1342. }
  1343. .carousel-service .service-block .service-img-container:after {
  1344.   background: #fff;
  1345.   bottom: 0;
  1346.   content: '';
  1347.   display: block;
  1348.   height: 3px;
  1349.   left: 0;
  1350.   margin: auto;
  1351.   position: absolute;
  1352.   right: 0;
  1353.   width: 165px;
  1354. }
  1355. .carousel-service .service-block p {
  1356.   margin-bottom: 10px;
  1357.   font-size: 0.778em;
  1358. }
  1359. .carousel-service img {
  1360.   margin-bottom: 15px !important;
  1361. }
  1362.  
  1363. /*Carousel team*/
  1364. .wrap-carousel-box {
  1365.   overflow: hidden;
  1366. }
  1367.  
  1368. .owl-carousel .owl-item {
  1369.   -webkit-backface-visibility: inherit;
  1370. }
  1371.  
  1372. .carousel-box {
  1373.   position: relative;
  1374. }
  1375. .carousel-box .caroufredsel_wrapper {
  1376.   overflow: visible !important;
  1377. }
  1378.  
  1379. .owl-carousel .owl-item img {
  1380.   width: auto;
  1381.   margin: auto;
  1382. }
  1383.  
  1384. .carousel-team {
  1385.   margin-bottom: 40px;
  1386. }
  1387. .carousel-team .item {
  1388.   float: left;
  1389.   max-width: 284px;
  1390.   opacity: 0;
  1391. }
  1392. .carousel-team .item .team-block {
  1393.   text-align: center;
  1394. }
  1395. .carousel-team .item .team-block .team-container {
  1396.   display: block;
  1397.   margin: auto;
  1398.   position: relative;
  1399. }
  1400. .carousel-team .item .team-block .team-container span {
  1401.   -webkit-transition: opacity .4s ease-in;
  1402.   background: rgba(60, 69, 93, 0.6);
  1403.   border-radius: 50%;
  1404.   display: block;
  1405.   height: 100%;
  1406.   left: 0;
  1407.   margin: auto;
  1408.   opacity: 0;
  1409.   position: absolute;
  1410.   right: 0;
  1411.   top: 0;
  1412.   transition: opacity .4s ease-in;
  1413.   width: 200px;
  1414. }
  1415. .carousel-team .item .team-block .team-container span i {
  1416.   line-height: 200px;
  1417.   color: #fff;
  1418. }
  1419. .carousel-team .item .team-block .team-container span i:before {
  1420.   background: rgba(60, 69, 93, 0.75);
  1421.   border-radius: 50%;
  1422.   padding: 12px;
  1423. }
  1424. .carousel-team .item .team-block .team-container span.bg-img-team a {
  1425.   background: rgba(255, 255, 255, 0.6);
  1426.   border-radius: 50%;
  1427.   display: inline-block;
  1428.   height: 44px;
  1429.   margin-top: 78px;
  1430.   transition: background .4s ease-in;
  1431.   width: 44px;
  1432.   -webkit-transition: background .4s ease-in;
  1433. }
  1434. .carousel-team .item .team-block .team-container span.bg-img-team a:hover {
  1435.   background: white;
  1436.   transition: background .4s ease-out;
  1437.   -webkit-transition: background .4s ease-out;
  1438. }
  1439. .carousel-team .item .team-block .team-container .img {
  1440.   -webkit-transition: height .5s, width .5s;
  1441.   transition: height .5s, width .5s;
  1442.   border-radius: 50%;
  1443.   height: 140px;
  1444.   margin-bottom: 40px;
  1445.   margin: auto;
  1446.   max-width: 100%;
  1447.   width: 140px;
  1448. }
  1449. .carousel-team .item .team-block .team-container:hover span {
  1450.   opacity: 1;
  1451.   transition: opacity .4s ease-out;
  1452.   -webkit-transition: opacity .4s ease-out;
  1453. }
  1454. .carousel-team .item .team-block .img {
  1455.   opacity: 0.3;
  1456. }
  1457. .carousel-team .item .team-block h6 {
  1458.   opacity: 0;
  1459.   margin-bottom: 5px;
  1460. }
  1461. .carousel-team .item .team-block p {
  1462.   opacity: 0;
  1463.   font-size: 0.778em;
  1464. }
  1465. .carousel-team .item.active {
  1466.   opacity: 1;
  1467. }
  1468. .carousel-team .item.active .team-block .team-container .img {
  1469.   width: 200px;
  1470.   -webkit-transition: height .5s, width .5s;
  1471.   display: block;
  1472.   height: 200px;
  1473.   opacity: 1;
  1474.   transition: height .5s, width .5s;
  1475. }
  1476. .carousel-team .item.active .team-block h6 {
  1477.   opacity: 1;
  1478.   white-space: nowrap;
  1479. }
  1480. .carousel-team .item.active .team-block p {
  1481.   opacity: 1;
  1482. }
  1483. .carousel-team .item.active.first .team-block .team-container .img, .carousel-team .item.active.last .team-block .team-container .img {
  1484.   transition: height .5s, width .5s;
  1485.   -webkit-transition: height .5s, width .5s;
  1486.   height: 140px;
  1487.   width: 140px;
  1488. }
  1489.  
  1490. .prev,
  1491. .next {
  1492.   backface-visibility: hidden;
  1493.   display: block;
  1494.   height: 42%;
  1495.   margin-top: 70px;
  1496.   position: absolute;
  1497.   top: 0;
  1498.   width: calc(100% + 12px);
  1499. }
  1500.  
  1501. .prev {
  1502.   left: -100%;
  1503.   right: auto;
  1504. }
  1505.  
  1506. .next {
  1507.   right: -100%;
  1508.   left: auto;
  1509. }
  1510.  
  1511. @media (max-width: 991px) {
  1512.   .carousel-team .item {
  1513.     max-width: 238px;
  1514.   }
  1515. }
  1516. @media (max-width: 767px) {
  1517.   .carousel-team .item {
  1518.     max-width: 750px;
  1519.   }
  1520. }
  1521. .carousel-team .item {
  1522.   width: 100%;
  1523. }
  1524.  
  1525. .carousel-team .item.active .team-block {
  1526.   -webkit-transition: margin-top  .4s;
  1527.   margin-top: 0;
  1528.   transition: margin-top .4s;
  1529. }
  1530.  
  1531. .carousel-team .item.first,
  1532. .carousel-team .item.last {
  1533.   position: relative;
  1534. }
  1535. .carousel-team .item.first .team-block,
  1536. .carousel-team .item.last .team-block {
  1537.   transition: margin-top  .4s;
  1538.   -webkit-transition: margin-top .4s;
  1539.   margin-top: 30px;
  1540.   opacity: .5;
  1541. }
  1542. .carousel-team .item.first .team-block h6,
  1543. .carousel-team .item.last .team-block h6 {
  1544.   display: none;
  1545. }
  1546. .carousel-team .item.first .team-block p,
  1547. .carousel-team .item.last .team-block p {
  1548.   display: none;
  1549. }
  1550. .carousel-team .item.first .team-block:hover span,
  1551. .carousel-team .item.last .team-block:hover span {
  1552.   opacity: 0;
  1553. }
  1554.  
  1555. @media only all and (min-width: 768px) {
  1556.   .carousel-service {
  1557.     margin: 40px 0;
  1558.   }
  1559.  
  1560.   .carousel-team {
  1561.     margin-top: 40px;
  1562.   }
  1563.  
  1564.   .container {
  1565.     position: relative;
  1566.   }
  1567.  
  1568.   .block-about {
  1569.     margin-top: 0;
  1570.     text-align: center;
  1571.    
  1572.   }
  1573.   .block-about h2 {
  1574.     display: inline-block;
  1575.     line-height: 65px;
  1576.     margin-bottom: 75px;
  1577.     margin-top: 30px;
  1578.     width: 50%;
  1579.   }
  1580.   .block-about p {
  1581.     margin-bottom: 40px;
  1582.   }
  1583.  
  1584.   .container-about .copyright-block {
  1585.     position: static !important;
  1586.   }
  1587.  
  1588.   .carousel-team {
  1589.     margin-bottom: 80px;
  1590.   }
  1591. }
  1592. @media (min-width: 1080px) {
  1593.   .impala-wrap-about .container-about {
  1594.     position: relative;
  1595.     min-height: 100%;
  1596.   }
  1597. }
  1598. @media only all and (max-width: 1080px) {
  1599.   .impala-scroll-overlay {
  1600.     transform: translate3d(0, 0, 0);
  1601.   }
  1602.   .impala-scroll-overlay .container-contact,
  1603.   .impala-scroll-overlay .container-about {
  1604.     transform: translate3d(0, 0, 0);
  1605.     -webkit-transform: translate3d(0, 0, 0);
  1606.   }
  1607. }
  1608. /*Contact*/
  1609. .container-contact .block-nav a {
  1610.   margin: 30px auto;
  1611. }
  1612.  
  1613. .block-contant {
  1614.   text-align: center;
  1615.   margin-bottom: 30px;
  1616. }
  1617. .block-contant h2 {
  1618.   line-height: 65px;
  1619.   margin-bottom: 25px;
  1620.   margin-top: 25px;
  1621. }
  1622.  
  1623. .text-contact {
  1624.   font-size: .889em;
  1625.   margin-bottom: 20px;
  1626.   text-align: center;
  1627. }
  1628. .text-contact .img-block {
  1629.   height: 25px;
  1630.   margin-bottom: 25px;
  1631.   position: relative;
  1632. }
  1633. .text-contact .img-block img {
  1634.   bottom: 0;
  1635.   left: 0;
  1636.   margin: auto;
  1637.   position: absolute;
  1638.   right: 0;
  1639.   top: 0;
  1640. }
  1641.  
  1642. .contact-form {
  1643.   margin-bottom: 55px;
  1644.   position: relative;
  1645.   text-align: center;
  1646. }
  1647. .contact-form > div {
  1648.   text-align: center;
  1649. }
  1650. .contact-form > div input {
  1651.   margin-bottom: 30px;
  1652.   width: 100%;
  1653. }
  1654. .contact-form > div textarea {
  1655.   margin-bottom: 25px;
  1656.   resize: none;
  1657.   width: 100%;
  1658. }
  1659. .contact-form > div .btn {
  1660.   background: #dca;
  1661.   height: 40px;
  1662.   margin-bottom: 60px;
  1663.   max-width: 230px;
  1664.   width: 100%;
  1665. }
  1666. .contact-form .form-message {
  1667.   position: static;
  1668. }
  1669. .contact-form .form-message .text-danger,
  1670. .contact-form .form-message .text-success {
  1671.   margin: auto;
  1672.   position: static;
  1673. }
  1674.  
  1675. .map {
  1676.   height: 335px;
  1677.   margin-bottom: 40px;
  1678. }
  1679.  
  1680. a[href^=tel] {
  1681.   color: #fff;
  1682.   text-decoration: none;
  1683.   display: block;
  1684. }
  1685.  
  1686. a[href^=tel]:hover,
  1687. a[href^=tel]:active {
  1688.   border-bottom: none;
  1689.   color: #fff;
  1690.   text-decoration: none;
  1691. }
  1692.  
  1693. @media only all and (min-width: 768px) {
  1694.   .container-contact {
  1695.     position: relative;
  1696.   }
  1697.   .container-contact .copyright-block {
  1698.     position: static !important;
  1699.   }
  1700.  
  1701.   .map {
  1702.     margin-bottom: 80px;
  1703.     margin-left: 12px;
  1704.     margin-right: 12px;
  1705.   }
  1706.  
  1707.   .block-contant h2 {
  1708.     margin-top: 30px;
  1709.     margin-bottom: 60px;
  1710.   }
  1711. }
  1712. @media only all and (min-width: 1080px) {
  1713.   .container-contact .block-nav a {
  1714.     right: 60px;
  1715.   }
  1716. }
  1717. /*Helper block*/
  1718. .page-current .scroll-block {
  1719.   height: 100%;
  1720.   overflow-x: hidden;
  1721.   overflow-y: auto;
  1722.   -webkit-overflow-scrolling: touch;
  1723. }
  1724.  
  1725. .impala-wrap-home .scroll-block {
  1726.   height: 100%;
  1727.   overflow-y: auto;
  1728.   -webkit-overflow-scrolling: touch;
  1729. }
  1730.  
  1731. .mfp-wrap {
  1732.   z-index: 9999;
  1733. }
  1734.  
  1735. .mfp-bg {
  1736.   height: 100% !important;
  1737. }
  1738.  
  1739. .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  1740.   background: #fff;
  1741.   border-radius: 50%;
  1742.   color: #434b63;
  1743.   font-size: 29px;
  1744.   opacity: 1;
  1745.   padding-right: 0;
  1746.   right: -23px;
  1747.   text-align: center;
  1748.   top: 18px;
  1749.   width: 44px;
  1750. }
  1751.  
  1752. @media only all and (max-width: 510px) {
  1753.   .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  1754.     right: 0;
  1755.   }
  1756. }
  1757. /*Under*/
  1758. .impala-under .contact-form {
  1759.   margin-bottom: 0;
  1760. }
  1761. .impala-under .contact-form .text-danger,
  1762. .impala-under .contact-form .text-success {
  1763.   margin-top: 15px;
  1764. }
  1765. .impala-under .img-block {
  1766.   border-radius: 50%;
  1767.   border: 12px solid rgba(255, 255, 255, 0.6);
  1768.   height: 69px;
  1769.   margin: 0 auto 30px;
  1770.   width: 69px;
  1771. }
  1772. .impala-under .impala h1 {
  1773.   margin-bottom: 60px;
  1774. }
  1775. .impala-under .impala input {
  1776.   max-width: 100%;
  1777. }
  1778. .impala-under .impala .btn {
  1779.   margin-bottom: 30px;
  1780. }
  1781. .impala-under .logo-wrap {
  1782.   margin-top: 30px;
  1783. }
  1784.  
  1785. @media only all and (min-width: 768px) {
  1786.   .logo-wrap,
  1787.   .copyright-block,
  1788.   .social-block {
  1789.     left: 0;
  1790.     position: absolute;
  1791.     right: 0;
  1792.   }
  1793.  
  1794.   .copyright-block {
  1795.     bottom: 0;
  1796.   }
  1797.  
  1798.   .impala-under .impala .btn {
  1799.     margin-bottom: 10px;
  1800.   }
  1801.   .impala-under .contact-form {
  1802.     margin-bottom: 0;
  1803.   }
  1804.   .impala-under .container-under {
  1805.     height: 100%;
  1806.     min-height: 100%;
  1807.   }
  1808.   .impala-under .container-under .container {
  1809.     height: 100%;
  1810.   }
  1811. }
  1812. @media only all and (min-width: 1080px) {
  1813.   .impala-under .container {
  1814.     height: 100%;
  1815.     position: static;
  1816.   }
  1817.   .impala-under .impala .btn {
  1818.     margin-bottom: 0;
  1819.   }
  1820.   .impala-under .logo-wrap {
  1821.     margin-top: 0;
  1822.   }
  1823.   .impala-under .contact-form {
  1824.     margin-bottom: 0;
  1825.   }
  1826.  
  1827.   .logo-wrap {
  1828.     left: 60px;
  1829.     margin-top: 0;
  1830.     position: absolute;
  1831.     right: auto;
  1832.     top: 60px;
  1833.   }
  1834.  
  1835.   .social-block {
  1836.     left: auto;
  1837.     right: 45px;
  1838.     top: 60px;
  1839.   }
  1840. }
  1841. /*Intro*/
  1842. .intro-background {
  1843.   background: url(../img/intro-bg.jpg) no-repeat #545d74;
  1844. }
  1845.  
  1846. .impala-intro > * {
  1847.   text-align: center;
  1848. }
  1849. .impala-intro .logo {
  1850.   margin: 40px 0;
  1851. }
  1852. .impala-intro .scroll-block {
  1853.   overflow-y: auto;
  1854.   height: 100%;
  1855.   overflow-y: auto;
  1856.   -webkit-overflow-scrolling: touch;
  1857. }
  1858.  
  1859. .theme-block {
  1860.   margin-bottom: 40px;
  1861. }
  1862. .theme-block .theme-container {
  1863.   display: block;
  1864.   margin-bottom: 15px;
  1865.   position: relative;
  1866. }
  1867. .theme-block .theme-container img {
  1868.   max-width: 360px;
  1869.   width: 100%;
  1870. }
  1871. .theme-block .theme-container .bg-images {
  1872.   -webkit-transition: opacity .4s ease-in;
  1873.   background: rgba(60, 69, 93, 0.6);
  1874.   display: block;
  1875.   height: 100%;
  1876.   left: 0;
  1877.   margin: auto;
  1878.   max-width: 360px;
  1879.   opacity: 0;
  1880.   position: absolute;
  1881.   right: 0;
  1882.   top: 0;
  1883.   transition: opacity .4s ease-in;
  1884.   width: 100%;
  1885. }
  1886. .theme-block .theme-container .bg-images i {
  1887.   bottom: 0;
  1888.   color: #fff;
  1889.   height: 40px;
  1890.   left: 0;
  1891.   margin: auto;
  1892.   position: absolute;
  1893.   right: 0;
  1894.   top: 0;
  1895.   width: 40px;
  1896. }
  1897. .theme-block .theme-container .bg-images i:before {
  1898.   background: rgba(60, 69, 93, 0.75);
  1899.   border-radius: 50%;
  1900.   padding: 12px;
  1901. }
  1902. .theme-block .theme-container .bg-images:hover {
  1903.   -webkit-transition: opacity .4s ease-out;
  1904.   opacity: 1;
  1905.   transition: opacity .4s ease-out;
  1906. }
  1907.  
  1908. .intro-about {
  1909.   margin-bottom: 40px;
  1910. }
  1911. .intro-about p {
  1912.   font-size: 0.889em;
  1913.   letter-spacing: .01em;
  1914. }
  1915.  
  1916. .intro-service .intro-service-block {
  1917.   height: 110px;
  1918.   margin-bottom: 20px;
  1919.   position: relative;
  1920. }
  1921. .intro-service .intro-service-block img {
  1922.   display: block;
  1923.   height: 45px;
  1924.   margin: auto;
  1925.   width: 45px;
  1926. }
  1927. .intro-service .intro-service-block:after {
  1928.   background: #fff;
  1929.   bottom: 0;
  1930.   content: '';
  1931.   height: 2px;
  1932.   left: 0;
  1933.   margin: auto;
  1934.   position: absolute;
  1935.   right: 0;
  1936.   width: 126px;
  1937. }
  1938. .intro-service .intro-service-block h6 {
  1939.   line-height: 1.4;
  1940. }
  1941. .intro-service p {
  1942.   color: rgba(255, 255, 255, 0.8);
  1943.   font-size: 14px;
  1944.   line-height: 24px;
  1945. }
  1946.  
  1947. .social-intro {
  1948.   margin-bottom: 20px;
  1949. }
  1950. .social-intro a {
  1951.   -webkit-transition: background 0.3s;
  1952.   background: rgba(255, 255, 255, 0.8);
  1953.   border-radius: 50%;
  1954.   display: inline-block;
  1955.   height: 25px;
  1956.   margin-right: 5px;
  1957.   width: 25px;
  1958.   transition: background 0.3s;
  1959. }
  1960. .social-intro a:last-child {
  1961.   margin-right: 0;
  1962. }
  1963. .social-intro a:hover {
  1964.   -webkit-transition: background 0.3s;
  1965.   background: white;
  1966.   transition: background 0.3s;
  1967. }
  1968.  
  1969. .logo-itembridge {
  1970.   margin: 30px 0;
  1971.   display: block;
  1972. }
  1973.  
  1974. .copyright-block-intro {
  1975.   font-size: 0.778em;
  1976.   margin-bottom: 40px;
  1977. }
  1978.  
  1979. @media only all and (min-width: 767px) {
  1980.   .impala-intro .logo {
  1981.     float: left;
  1982.     margin: 90px 0;
  1983.   }
  1984.  
  1985.   .theme-block {
  1986.     margin-bottom: 80px;
  1987.   }
  1988.  
  1989.   .intro-about {
  1990.     margin-bottom: 90px;
  1991.   }
  1992.   .intro-about p {
  1993.     font-size: 0.889em;
  1994.   }
  1995.  
  1996.   .social-intro {
  1997.     margin-bottom: 50px;
  1998.   }
  1999.   .social-intro a {
  2000.     height: 40px;
  2001.     margin-right: 10px;
  2002.     width: 40px;
  2003.   }
  2004. }
  2005. @media only all and (min-width: 1200px) {
  2006.   .impala-intro .container {
  2007.     width: 1140px;
  2008.   }
  2009. }
  2010.  
  2011. .fb-page {
  2012.     width: auto;
  2013.     margin: 0 auto;
  2014.     left: auto;
  2015.     top: auto;
  2016. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement