kuchuz

Tugas 1 PWEB-D style.css

Oct 26th, 2021
1,019
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /**
  2. * Template Name: Personal - v4.3.0
  3. * Template URL: https://bootstrapmade.com/personal-free-resume-bootstrap-template/
  4. * Author: BootstrapMade.com
  5. * License: https://bootstrapmade.com/license/
  6. */
  7.  
  8. /*--------------------------------------------------------------
  9. # General
  10. --------------------------------------------------------------*/
  11. body {
  12.   font-family: "Open Sans", sans-serif;
  13.   background-color: #040404;
  14.   color: #fff;
  15.   position: relative;
  16.   background: transparent;
  17. }
  18.  
  19. body::before {
  20.   content: "";
  21.   position: fixed;
  22.   background: #040404 url("../img/bg.jpg") top right no-repeat;
  23.   background-size: cover;
  24.   left: 0;
  25.   right: 0;
  26.   top: 0;
  27.   height: 100vh;
  28.   z-index: -1;
  29. }
  30.  
  31. @media (min-width: 1024px) {
  32.   body::before {
  33.     background-attachment: fixed;
  34.   }
  35. }
  36.  
  37. a {
  38.   color: #18d26e;
  39.   text-decoration: none;
  40. }
  41.  
  42. a:hover {
  43.   color: #35e888;
  44.   text-decoration: none;
  45. }
  46.  
  47. h1, h2, h3, h4, h5, h6 {
  48.   font-family: "Raleway", sans-serif;
  49. }
  50.  
  51. /*--------------------------------------------------------------
  52. # Header
  53. --------------------------------------------------------------*/
  54. #header {
  55.   transition: ease-in-out 0.3s;
  56.   position: relative;
  57.   height: 100vh;
  58.   display: flex;
  59.   align-items: center;
  60.   z-index: 997;
  61.   overflow-y: auto;
  62. }
  63.  
  64. #header * {
  65.   transition: ease-in-out 0.3s;
  66. }
  67.  
  68. #header h1 {
  69.   font-size: 48px;
  70.   margin: 0;
  71.   padding: 0;
  72.   line-height: 1;
  73.   font-weight: 700;
  74.   font-family: "Poppins", sans-serif;
  75. }
  76.  
  77. #header h1 a, #header h1 a:hover {
  78.   color: #fff;
  79.   line-height: 1;
  80.   display: inline-block;
  81. }
  82.  
  83. #header h2 {
  84.   font-size: 24px;
  85.   margin-top: 20px;
  86.   color: rgba(255, 255, 255, 0.8);
  87. }
  88.  
  89. #header h2 span {
  90.   color: #fff;
  91.   border-bottom: 2px solid #18d26e;
  92.   padding-bottom: 6px;
  93. }
  94.  
  95. #header img {
  96.   padding: 0;
  97.   margin: 0;
  98. }
  99.  
  100. #header .social-links {
  101.   margin-top: 40px;
  102.   display: flex;
  103. }
  104.  
  105. #header .social-links a {
  106.   font-size: 16px;
  107.   display: flex;
  108.   justify-content: center;
  109.   align-items: center;
  110.   background: rgba(255, 255, 255, 0.1);
  111.   color: #fff;
  112.   line-height: 1;
  113.   margin-right: 8px;
  114.   border-radius: 50%;
  115.   width: 40px;
  116.   height: 40px;
  117. }
  118.  
  119. #header .social-links a:hover {
  120.   background: #18d26e;
  121. }
  122.  
  123. @media (max-width: 992px) {
  124.   #header h1 {
  125.     font-size: 36px;
  126.   }
  127.   #header h2 {
  128.     font-size: 20px;
  129.     line-height: 30px;
  130.   }
  131.   #header .social-links {
  132.     margin-top: 15px;
  133.   }
  134.   #header .container {
  135.     display: flex;
  136.     flex-direction: column;
  137.     align-items: center;
  138.   }
  139. }
  140.  
  141. /* Header Top */
  142. #header.header-top {
  143.   height: 80px;
  144.   position: fixed;
  145.   left: 0;
  146.   top: 0;
  147.   right: 0;
  148.   background: rgba(0, 0, 0, 0.9);
  149. }
  150.  
  151. #header.header-top .social-links, #header.header-top h2 {
  152.   display: none;
  153. }
  154.  
  155. #header.header-top h1 {
  156.   margin-right: auto;
  157.   font-size: 36px;
  158. }
  159.  
  160. #header.header-top .container {
  161.   display: flex;
  162.   align-items: center;
  163. }
  164.  
  165. #header.header-top .navbar {
  166.   margin: 0;
  167. }
  168.  
  169. @media (max-width: 768px) {
  170.   #header.header-top {
  171.     height: 60px;
  172.   }
  173.   #header.header-top h1 {
  174.     font-size: 26px;
  175.   }
  176. }
  177.  
  178. /*--------------------------------------------------------------
  179. # Navigation Menu
  180. --------------------------------------------------------------*/
  181. /**
  182. * Desktop Navigation
  183. */
  184. .navbar {
  185.   padding: 0;
  186.   margin-top: 35px;
  187. }
  188.  
  189. .navbar ul {
  190.   margin: 0;
  191.   padding: 0;
  192.   display: flex;
  193.   list-style: none;
  194.   align-items: center;
  195. }
  196.  
  197. .navbar li {
  198.   position: relative;
  199. }
  200.  
  201. .navbar li + li {
  202.   margin-left: 30px;
  203. }
  204.  
  205. .navbar a, .navbar a:focus {
  206.   display: flex;
  207.   align-items: center;
  208.   justify-content: space-between;
  209.   padding: 0;
  210.   font-family: "Poppins", sans-serif;
  211.   font-size: 16px;
  212.   font-weight: 400;
  213.   color: rgba(255, 255, 255, 0.7);
  214.   white-space: nowrap;
  215.   transition: 0.3s;
  216. }
  217.  
  218. .navbar a i, .navbar a:focus i {
  219.   font-size: 12px;
  220.   line-height: 0;
  221.   margin-left: 5px;
  222. }
  223.  
  224. .navbar a:before {
  225.   content: "";
  226.   position: absolute;
  227.   width: 0;
  228.   height: 2px;
  229.   bottom: -4px;
  230.   left: 0;
  231.   background-color: #18d26e;
  232.   visibility: hidden;
  233.   width: 0px;
  234.   transition: all 0.3s ease-in-out 0s;
  235. }
  236.  
  237. .navbar a:hover:before, .navbar li:hover > a:before, .navbar .active:before {
  238.   visibility: visible;
  239.   width: 25px;
  240. }
  241.  
  242. .navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
  243.   color: #fff;
  244. }
  245.  
  246. /**
  247. * Mobile Navigation
  248. */
  249. .mobile-nav-toggle {
  250.   color: #fff;
  251.   font-size: 28px;
  252.   cursor: pointer;
  253.   display: none;
  254.   line-height: 0;
  255.   transition: 0.5s;
  256.   position: fixed;
  257.   right: 15px;
  258.   top: 15px;
  259. }
  260.  
  261. @media (max-width: 991px) {
  262.   .mobile-nav-toggle {
  263.     display: block;
  264.   }
  265.   .navbar ul {
  266.     display: none;
  267.   }
  268. }
  269.  
  270. .navbar-mobile {
  271.   position: fixed;
  272.   overflow: hidden;
  273.   top: 0;
  274.   right: 0;
  275.   left: 0;
  276.   bottom: 0;
  277.   background: rgba(0, 0, 0, 0.9);
  278.   transition: 0.3s;
  279.   z-index: 999;
  280.   margin-top: 0;
  281. }
  282.  
  283. .navbar-mobile .mobile-nav-toggle {
  284.   position: absolute;
  285.   top: 15px;
  286.   right: 15px;
  287. }
  288.  
  289. .navbar-mobile ul {
  290.   display: block;
  291.   position: absolute;
  292.   top: 55px;
  293.   right: 15px;
  294.   bottom: 45px;
  295.   left: 15px;
  296.   padding: 10px 0;
  297.   overflow-y: auto;
  298.   transition: 0.3s;
  299.   border: 2px solid rgba(255, 255, 255, 0.2);
  300. }
  301.  
  302. .navbar-mobile li {
  303.   padding: 12px 20px;
  304. }
  305.  
  306. .navbar-mobile li + li {
  307.   margin: 0;
  308. }
  309.  
  310. .navbar-mobile a {
  311.   font-size: 16px;
  312.   position: relative;
  313. }
  314.  
  315. /*--------------------------------------------------------------
  316. # Sections General
  317. --------------------------------------------------------------*/
  318. section {
  319.   overflow: hidden;
  320.   position: absolute;
  321.   width: 100%;
  322.   top: 140px;
  323.   bottom: 100%;
  324.   opacity: 0;
  325.   transition: ease-in-out 0.4s;
  326.   z-index: 2;
  327. }
  328.  
  329. section.section-show {
  330.   top: 100px;
  331.   bottom: auto;
  332.   opacity: 1;
  333.   padding-bottom: 45px;
  334. }
  335.  
  336. section .container {
  337.   background: rgba(0, 0, 0, 0.9);
  338.   padding: 30px;
  339. }
  340.  
  341. @media (max-width: 768px) {
  342.   section {
  343.     top: 120px;
  344.   }
  345.   section.section-show {
  346.     top: 80px;
  347.   }
  348. }
  349.  
  350. .section-title h2 {
  351.   font-size: 14px;
  352.   font-weight: 500;
  353.   padding: 0;
  354.   line-height: 1px;
  355.   margin: 0 0 20px 0;
  356.   letter-spacing: 2px;
  357.   text-transform: uppercase;
  358.   color: #aaaaaa;
  359.   font-family: "Poppins", sans-serif;
  360. }
  361.  
  362. .section-title h2::after {
  363.   content: "";
  364.   width: 120px;
  365.   height: 1px;
  366.   display: inline-block;
  367.   background: #4ceb95;
  368.   margin: 4px 10px;
  369. }
  370.  
  371. .section-title p {
  372.   margin: 0;
  373.   margin: -15px 0 15px 0;
  374.   font-size: 36px;
  375.   font-weight: 700;
  376.   text-transform: uppercase;
  377.   font-family: "Poppins", sans-serif;
  378.   color: #fff;
  379. }
  380.  
  381. /*--------------------------------------------------------------
  382. # About
  383. --------------------------------------------------------------*/
  384. .about-me .content h3 {
  385.   font-weight: 700;
  386.   font-size: 26px;
  387.   color: #18d26e;
  388. }
  389.  
  390. .about-me .content ul {
  391.   list-style: none;
  392.   padding: 0;
  393. }
  394.  
  395. .about-me .content ul li {
  396.   margin-bottom: 20px;
  397.   display: flex;
  398.   align-items: center;
  399. }
  400.  
  401. .about-me .content ul strong {
  402.   margin-right: 10px;
  403. }
  404.  
  405. .about-me .content ul i {
  406.   font-size: 16px;
  407.   margin-right: 5px;
  408.   color: #18d26e;
  409.   line-height: 0;
  410. }
  411.  
  412. .about-me .content p:last-child {
  413.   margin-bottom: 0;
  414. }
  415.  
  416. /*--------------------------------------------------------------
  417. # Counts
  418. --------------------------------------------------------------*/
  419. .counts {
  420.   padding: 70px 0 60px;
  421. }
  422.  
  423. .counts .count-box {
  424.   padding: 30px 30px 25px 30px;
  425.   width: 100%;
  426.   position: relative;
  427.   text-align: center;
  428.   background: rgba(255, 255, 255, 0.08);
  429. }
  430.  
  431. .counts .count-box i {
  432.   position: absolute;
  433.   top: -25px;
  434.   left: 50%;
  435.   transform: translateX(-50%);
  436.   font-size: 24px;
  437.   background: rgba(255, 255, 255, 0.1);
  438.   padding: 12px;
  439.   color: #18d26e;
  440.   border-radius: 50px;
  441.   line-height: 0;
  442. }
  443.  
  444. .counts .count-box span {
  445.   font-size: 36px;
  446.   display: block;
  447.   font-weight: 600;
  448.   color: #fff;
  449. }
  450.  
  451. .counts .count-box p {
  452.   padding: 0;
  453.   margin: 0;
  454.   font-family: "Raleway", sans-serif;
  455.   font-size: 14px;
  456. }
  457.  
  458. /*--------------------------------------------------------------
  459. # Skills
  460. --------------------------------------------------------------*/
  461. .skills .progress {
  462.   height: 60px;
  463.   display: block;
  464.   background: none;
  465.   border-radius: 0;
  466. }
  467.  
  468. .skills .progress .skill {
  469.   padding: 10px 0;
  470.   margin: 0;
  471.   text-transform: uppercase;
  472.   display: block;
  473.   font-weight: 600;
  474.   font-family: "Poppins", sans-serif;
  475.   color: #fff;
  476. }
  477.  
  478. .skills .progress .skill .val {
  479.   float: right;
  480.   font-style: normal;
  481. }
  482.  
  483. .skills .progress-bar-wrap {
  484.   background: rgba(255, 255, 255, 0.2);
  485. }
  486.  
  487. .skills .progress-bar {
  488.   width: 1px;
  489.   height: 10px;
  490.   transition: .9s;
  491.   background-color: #18d26e;
  492. }
  493.  
  494. /*--------------------------------------------------------------
  495. # Interests
  496. --------------------------------------------------------------*/
  497. .interests .icon-box {
  498.   display: flex;
  499.   align-items: center;
  500.   padding: 20px;
  501.   background: rgba(255, 255, 255, 0.08);
  502.   transition: ease-in-out 0.3s;
  503. }
  504.  
  505. .interests .icon-box i {
  506.   font-size: 32px;
  507.   padding-right: 10px;
  508.   line-height: 1;
  509. }
  510.  
  511. .interests .icon-box h3 {
  512.   font-weight: 700;
  513.   margin: 0;
  514.   padding: 0;
  515.   line-height: 1;
  516.   font-size: 16px;
  517.   color: #fff;
  518. }
  519.  
  520. .interests .icon-box:hover {
  521.   background: rgba(255, 255, 255, 0.12);
  522. }
  523.  
  524. /*--------------------------------------------------------------
  525. # Testimonials
  526. --------------------------------------------------------------*/
  527. .testimonials .testimonial-item {
  528.   box-sizing: content-box;
  529.   min-height: 320px;
  530. }
  531.  
  532. .testimonials .testimonial-item .testimonial-img {
  533.   width: 90px;
  534.   border-radius: 50%;
  535.   margin: -40px 0 0 40px;
  536.   position: relative;
  537.   z-index: 2;
  538.   border: 6px solid rgba(255, 255, 255, 0.12);
  539. }
  540.  
  541. .testimonials .testimonial-item h3 {
  542.   font-size: 18px;
  543.   font-weight: bold;
  544.   margin: 10px 0 5px 45px;
  545.   color: #fff;
  546. }
  547.  
  548. .testimonials .testimonial-item h4 {
  549.   font-size: 14px;
  550.   color: #999;
  551.   margin: 0 0 0 45px;
  552. }
  553.  
  554. .testimonials .testimonial-item .quote-icon-left, .testimonials .testimonial-item .quote-icon-right {
  555.   color: rgba(255, 255, 255, 0.25);
  556.   font-size: 26px;
  557. }
  558.  
  559. .testimonials .testimonial-item .quote-icon-left {
  560.   display: inline-block;
  561.   left: -5px;
  562.   position: relative;
  563. }
  564.  
  565. .testimonials .testimonial-item .quote-icon-right {
  566.   display: inline-block;
  567.   right: -5px;
  568.   position: relative;
  569.   top: 10px;
  570. }
  571.  
  572. .testimonials .testimonial-item p {
  573.   font-style: italic;
  574.   margin: 0 15px 0 15px;
  575.   padding: 20px 20px 60px 20px;
  576.   background: rgba(255, 255, 255, 0.1);
  577.   position: relative;
  578.   border-radius: 6px;
  579.   position: relative;
  580.   z-index: 1;
  581. }
  582.  
  583. .testimonials .swiper-pagination {
  584.   margin-top: 20px;
  585.   position: relative;
  586. }
  587.  
  588. .testimonials .swiper-pagination .swiper-pagination-bullet {
  589.   width: 12px;
  590.   height: 12px;
  591.   opacity: 1;
  592.   background-color: rgba(255, 255, 255, 0.3);
  593. }
  594.  
  595. .testimonials .swiper-pagination .swiper-pagination-bullet-active {
  596.   background-color: #18d26e;
  597. }
  598.  
  599. /*--------------------------------------------------------------
  600. # Resume
  601. --------------------------------------------------------------*/
  602. .resume .resume-title {
  603.   font-size: 26px;
  604.   font-weight: 700;
  605.   margin-top: 20px;
  606.   margin-bottom: 20px;
  607.   color: #fff;
  608. }
  609.  
  610. .resume .resume-item {
  611.   padding: 0 0 20px 20px;
  612.   margin-top: -2px;
  613.   border-left: 2px solid rgba(255, 255, 255, 0.2);
  614.   position: relative;
  615. }
  616.  
  617. .resume .resume-item h4 {
  618.   line-height: 18px;
  619.   font-size: 18px;
  620.   font-weight: 600;
  621.   text-transform: uppercase;
  622.   font-family: "Poppins", sans-serif;
  623.   color: #18d26e;
  624.   margin-bottom: 10px;
  625. }
  626.  
  627. .resume .resume-item h5 {
  628.   font-size: 16px;
  629.   background: rgba(255, 255, 255, 0.15);
  630.   padding: 5px 15px;
  631.   display: inline-block;
  632.   font-weight: 600;
  633.   margin-bottom: 10px;
  634. }
  635.  
  636. .resume .resume-item ul {
  637.   padding-left: 20px;
  638. }
  639.  
  640. .resume .resume-item ul li {
  641.   padding-bottom: 10px;
  642. }
  643.  
  644. .resume .resume-item:last-child {
  645.   padding-bottom: 0;
  646. }
  647.  
  648. .resume .resume-item::before {
  649.   content: "";
  650.   position: absolute;
  651.   width: 16px;
  652.   height: 16px;
  653.   border-radius: 50px;
  654.   left: -9px;
  655.   top: 0;
  656.   background: #18d26e;
  657.   border: 2px solid #18d26e;
  658. }
  659.  
  660. /*--------------------------------------------------------------
  661. # Services
  662. --------------------------------------------------------------*/
  663. .services .icon-box {
  664.   text-align: center;
  665.   background: rgba(204, 204, 204, 0.1);
  666.   padding: 80px 20px;
  667.   transition: all ease-in-out 0.3s;
  668. }
  669.  
  670. .services .icon-box .icon {
  671.   margin: 0 auto;
  672.   width: 64px;
  673.   height: 64px;
  674.   background: #18d26e;
  675.   border-radius: 5px;
  676.   transition: all .3s ease-out 0s;
  677.   display: flex;
  678.   align-items: center;
  679.   justify-content: center;
  680.   margin-bottom: 20px;
  681.   transform-style: preserve-3d;
  682. }
  683.  
  684. .services .icon-box .icon i {
  685.   color: #fff;
  686.   font-size: 28px;
  687. }
  688.  
  689. .services .icon-box .icon::before {
  690.   position: absolute;
  691.   content: '';
  692.   left: -8px;
  693.   top: -8px;
  694.   height: 100%;
  695.   width: 100%;
  696.   background: rgba(255, 255, 255, 0.15);
  697.   border-radius: 5px;
  698.   transition: all .3s ease-out 0s;
  699.   transform: translateZ(-1px);
  700. }
  701.  
  702. .services .icon-box h4 {
  703.   font-weight: 700;
  704.   margin-bottom: 15px;
  705.   font-size: 24px;
  706. }
  707.  
  708. .services .icon-box h4 a {
  709.   color: #fff;
  710. }
  711.  
  712. .services .icon-box p {
  713.   line-height: 24px;
  714.   font-size: 14px;
  715.   margin-bottom: 0;
  716. }
  717.  
  718. .services .icon-box:hover {
  719.   background: #18d26e;
  720.   border-color: #18d26e;
  721. }
  722.  
  723. .services .icon-box:hover .icon {
  724.   background: #fff;
  725. }
  726.  
  727. .services .icon-box:hover .icon i {
  728.   color: #18d26e;
  729. }
  730.  
  731. .services .icon-box:hover .icon::before {
  732.   background: #35e888;
  733. }
  734.  
  735. .services .icon-box:hover h4 a, .services .icon-box:hover p {
  736.   color: #fff;
  737. }
  738.  
  739. /*--------------------------------------------------------------
  740. # Portfolio
  741. --------------------------------------------------------------*/
  742. .portfolio .portfolio-item {
  743.   margin-bottom: 30px;
  744. }
  745.  
  746. .portfolio #portfolio-flters {
  747.   padding: 0;
  748.   margin: 0 auto 15px auto;
  749.   list-style: none;
  750.   text-align: center;
  751.   border-radius: 50px;
  752.   padding: 2px 15px;
  753. }
  754.  
  755. .portfolio #portfolio-flters li {
  756.   cursor: pointer;
  757.   display: inline-block;
  758.   padding: 8px 16px 10px 16px;
  759.   font-size: 14px;
  760.   font-weight: 600;
  761.   line-height: 1;
  762.   text-transform: uppercase;
  763.   color: #fff;
  764.   background: rgba(255, 255, 255, 0.1);
  765.   margin: 0 3px 10px 3px;
  766.   transition: all 0.3s ease-in-out;
  767.   border-radius: 4px;
  768. }
  769.  
  770. .portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active {
  771.   background: #18d26e;
  772. }
  773.  
  774. .portfolio #portfolio-flters li:last-child {
  775.   margin-right: 0;
  776. }
  777.  
  778. .portfolio .portfolio-wrap {
  779.   transition: 0.3s;
  780.   position: relative;
  781.   overflow: hidden;
  782.   z-index: 1;
  783.   background: rgba(0, 0, 0, 0.6);
  784. }
  785.  
  786. .portfolio .portfolio-wrap::before {
  787.   content: "";
  788.   background: rgba(0, 0, 0, 0.6);
  789.   position: absolute;
  790.   left: 30px;
  791.   right: 30px;
  792.   top: 30px;
  793.   bottom: 30px;
  794.   transition: all ease-in-out 0.3s;
  795.   z-index: 2;
  796.   opacity: 0;
  797. }
  798.  
  799. .portfolio .portfolio-wrap .portfolio-info {
  800.   opacity: 0;
  801.   position: absolute;
  802.   top: 0;
  803.   left: 0;
  804.   right: 0;
  805.   bottom: 0;
  806.   text-align: center;
  807.   z-index: 3;
  808.   transition: all ease-in-out 0.3s;
  809.   display: flex;
  810.   flex-direction: column;
  811.   justify-content: center;
  812.   align-items: center;
  813. }
  814.  
  815. .portfolio .portfolio-wrap .portfolio-info::before {
  816.   display: block;
  817.   content: "";
  818.   width: 48px;
  819.   height: 48px;
  820.   position: absolute;
  821.   top: 35px;
  822.   left: 35px;
  823.   border-top: 3px solid #fff;
  824.   border-left: 3px solid #fff;
  825.   transition: all 0.5s ease 0s;
  826.   z-index: 9994;
  827. }
  828.  
  829. .portfolio .portfolio-wrap .portfolio-info::after {
  830.   display: block;
  831.   content: "";
  832.   width: 48px;
  833.   height: 48px;
  834.   position: absolute;
  835.   bottom: 35px;
  836.   right: 35px;
  837.   border-bottom: 3px solid #fff;
  838.   border-right: 3px solid #fff;
  839.   transition: all 0.5s ease 0s;
  840.   z-index: 9994;
  841. }
  842.  
  843. .portfolio .portfolio-wrap .portfolio-info h4 {
  844.   font-size: 20px;
  845.   color: #fff;
  846.   font-weight: 600;
  847. }
  848.  
  849. .portfolio .portfolio-wrap .portfolio-info p {
  850.   color: #ffffff;
  851.   font-size: 14px;
  852.   text-transform: uppercase;
  853.   padding: 0;
  854.   margin: 0;
  855. }
  856.  
  857. .portfolio .portfolio-wrap .portfolio-links {
  858.   text-align: center;
  859.   z-index: 4;
  860. }
  861.  
  862. .portfolio .portfolio-wrap .portfolio-links a {
  863.   color: #fff;
  864.   margin: 0 2px;
  865.   font-size: 28px;
  866.   display: inline-block;
  867.   transition: 0.3s;
  868. }
  869.  
  870. .portfolio .portfolio-wrap .portfolio-links a:hover {
  871.   color: #63eda3;
  872. }
  873.  
  874. .portfolio .portfolio-wrap:hover::before {
  875.   top: 0;
  876.   left: 0;
  877.   right: 0;
  878.   bottom: 0;
  879.   opacity: 1;
  880. }
  881.  
  882. .portfolio .portfolio-wrap:hover .portfolio-info {
  883.   opacity: 1;
  884. }
  885.  
  886. .portfolio .portfolio-wrap:hover .portfolio-info::before {
  887.   top: 15px;
  888.   left: 15px;
  889. }
  890.  
  891. .portfolio .portfolio-wrap:hover .portfolio-info::after {
  892.   bottom: 15px;
  893.   right: 15px;
  894. }
  895.  
  896. /*--------------------------------------------------------------
  897. # Portfolio Details
  898. --------------------------------------------------------------*/
  899. .portfolio-details {
  900.   padding-top: 40px;
  901.   background: rgba(0, 0, 0, 0.8);
  902.   position: fixed;
  903.   left: 0;
  904.   right: 0;
  905.   top: 0;
  906.   bottom: 0;
  907.   overflow-y: auto;
  908. }
  909.  
  910. .portfolio-details .container {
  911.   padding-top: 20px;
  912.   padding-bottom: 40px;
  913. }
  914.  
  915. .portfolio-details .portfolio-title {
  916.   font-size: 26px;
  917.   font-weight: 700;
  918.   margin-bottom: 20px;
  919. }
  920.  
  921. .portfolio-details .portfolio-info {
  922.   padding-top: 45px;
  923. }
  924.  
  925. .portfolio-details .portfolio-info h3 {
  926.   font-size: 22px;
  927.   font-weight: 400;
  928.   margin-bottom: 20px;
  929. }
  930.  
  931. .portfolio-details .portfolio-info ul {
  932.   list-style: none;
  933.   padding: 0;
  934.   font-size: 15px;
  935. }
  936.  
  937. .portfolio-details .portfolio-info ul li + li {
  938.   margin-top: 10px;
  939. }
  940.  
  941. .portfolio-details .portfolio-info p {
  942.   font-size: 15px;
  943.   padding: 15px 0 0 0;
  944. }
  945.  
  946. @media (max-width: 992px) {
  947.   .portfolio-details .portfolio-info {
  948.     padding-top: 20px;
  949.   }
  950. }
  951.  
  952. .portfolio-details .swiper-pagination {
  953.   margin-top: 20px;
  954.   position: relative;
  955. }
  956.  
  957. .portfolio-details .swiper-pagination .swiper-pagination-bullet {
  958.   width: 12px;
  959.   height: 12px;
  960.   opacity: 1;
  961.   background-color: rgba(255, 255, 255, 0.3);
  962. }
  963.  
  964. .portfolio-details .swiper-pagination .swiper-pagination-bullet-active {
  965.   background-color: #18d26e;
  966. }
  967.  
  968. /*--------------------------------------------------------------
  969. # Contact
  970. --------------------------------------------------------------*/
  971. .contact .info-box {
  972.   color: #444444;
  973.   padding: 20px;
  974.   width: 100%;
  975.   background: rgba(255, 255, 255, 0.08);
  976. }
  977.  
  978. .contact .info-box i.bx {
  979.   font-size: 24px;
  980.   color: #18d26e;
  981.   border-radius: 50%;
  982.   padding: 14px;
  983.   float: left;
  984.   background: rgba(255, 255, 255, 0.1);
  985. }
  986.  
  987. .contact .info-box h3 {
  988.   font-size: 20px;
  989.   color: rgba(255, 255, 255, 0.5);
  990.   font-weight: 700;
  991.   margin: 10px 0 8px 68px;
  992. }
  993.  
  994. .contact .info-box p {
  995.   padding: 0;
  996.   color: #fff;
  997.   line-height: 24px;
  998.   font-size: 14px;
  999.   margin: 0 0 0 68px;
  1000. }
  1001.  
  1002. .contact .info-box .social-links {
  1003.   margin: 5px 0 0 68px;
  1004.   display: flex;
  1005. }
  1006.  
  1007. .contact .info-box .social-links a {
  1008.   font-size: 18px;
  1009.   display: inline-block;
  1010.   color: #fff;
  1011.   line-height: 1;
  1012.   margin-right: 12px;
  1013.   transition: 0.3s;
  1014. }
  1015.  
  1016. .contact .info-box .social-links a:hover {
  1017.   color: #18d26e;
  1018. }
  1019.  
  1020. .contact .php-email-form {
  1021.   padding: 30px;
  1022.   background: rgba(255, 255, 255, 0.08);
  1023. }
  1024.  
  1025. .contact .php-email-form .error-message {
  1026.   display: none;
  1027.   background: rgba(255, 255, 255, 0.08);
  1028.   background: #ed3c0d;
  1029.   text-align: left;
  1030.   padding: 15px;
  1031.   font-weight: 600;
  1032. }
  1033.  
  1034. .contact .php-email-form .error-message br + br {
  1035.   margin-top: 25px;
  1036. }
  1037.  
  1038. .contact .php-email-form .sent-message {
  1039.   display: none;
  1040.   background: rgba(255, 255, 255, 0.08);
  1041.   background: #18d26e;
  1042.   text-align: center;
  1043.   padding: 15px;
  1044.   font-weight: 600;
  1045. }
  1046.  
  1047. .contact .php-email-form .loading {
  1048.   display: none;
  1049.   background: rgba(255, 255, 255, 0.08);
  1050.   text-align: center;
  1051.   padding: 15px;
  1052. }
  1053.  
  1054. .contact .php-email-form .loading:before {
  1055.   content: "";
  1056.   display: inline-block;
  1057.   border-radius: 50%;
  1058.   width: 24px;
  1059.   height: 24px;
  1060.   margin: 0 10px -6px 0;
  1061.   border: 3px solid #18d26e;
  1062.   border-top-color: #eee;
  1063.   -webkit-animation: animate-loading 1s linear infinite;
  1064.   animation: animate-loading 1s linear infinite;
  1065. }
  1066.  
  1067. .contact .php-email-form input, .contact .php-email-form textarea {
  1068.   border-radius: 0;
  1069.   box-shadow: none;
  1070.   font-size: 14px;
  1071.   background: rgba(255, 255, 255, 0.08);
  1072.   border: 0;
  1073.   transition: 0.3s;
  1074.   color: #fff;
  1075. }
  1076.  
  1077. .contact .php-email-form input:focus, .contact .php-email-form textarea:focus {
  1078.   background-color: rgba(255, 255, 255, 0.11);
  1079. }
  1080.  
  1081. .contact .php-email-form input::-webkit-input-placeholder, .contact .php-email-form textarea::-webkit-input-placeholder {
  1082.   color: rgba(255, 255, 255, 0.3);
  1083.   opacity: 1;
  1084. }
  1085.  
  1086. .contact .php-email-form input::-moz-placeholder, .contact .php-email-form textarea::-moz-placeholder {
  1087.   color: rgba(255, 255, 255, 0.3);
  1088.   opacity: 1;
  1089. }
  1090.  
  1091. .contact .php-email-form input::placeholder, .contact .php-email-form textarea::placeholder {
  1092.   color: rgba(255, 255, 255, 0.3);
  1093.   opacity: 1;
  1094. }
  1095.  
  1096. .contact .php-email-form input {
  1097.   padding: 10px 15px;
  1098. }
  1099.  
  1100. .contact .php-email-form textarea {
  1101.   padding: 12px 15px;
  1102. }
  1103.  
  1104. .contact .php-email-form button[type="submit"] {
  1105.   background: #18d26e;
  1106.   border: 0;
  1107.   padding: 10px 30px;
  1108.   color: #fff;
  1109.   transition: 0.4s;
  1110.   border-radius: 4px;
  1111. }
  1112.  
  1113. .contact .php-email-form button[type="submit"]:hover {
  1114.   background: #15bb62;
  1115. }
  1116.  
  1117. @-webkit-keyframes animate-loading {
  1118.   0% {
  1119.     transform: rotate(0deg);
  1120.   }
  1121.   100% {
  1122.     transform: rotate(360deg);
  1123.   }
  1124. }
  1125.  
  1126. @keyframes animate-loading {
  1127.   0% {
  1128.     transform: rotate(0deg);
  1129.   }
  1130.   100% {
  1131.     transform: rotate(360deg);
  1132.   }
  1133. }
  1134.  
  1135. /*--------------------------------------------------------------
  1136. # Credits
  1137. --------------------------------------------------------------*/
  1138. .credits {
  1139.   position: fixed;
  1140.   right: 0;
  1141.   left: 0;
  1142.   bottom: 0;
  1143.   padding: 15px;
  1144.   text-align: right;
  1145.   font-size: 13px;
  1146.   color: #fff;
  1147.   z-index: 999999;
  1148. }
  1149.  
  1150. @media (max-width: 992px) {
  1151.   .credits {
  1152.     text-align: center;
  1153.     padding: 10px;
  1154.     background: rgba(0, 0, 0, 0.8);
  1155.   }
  1156. }
  1157.  
  1158. .credits a {
  1159.   color: #18d26e;
  1160.   transition: 0.3s;
  1161. }
  1162.  
  1163. .credits a:hover {
  1164.   color: #fff;
  1165. }
  1166.  
RAW Paste Data