yuriats
/
kaelblog
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2 Commits
1 Branch
20KB
Branch: master
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'master'
${ noResults }
kaelblog/style.css

1042 lines
20KB
Raw Permalink Blame History 

  1. body,

  2. html {

  3.   overflow: hidden;

  4.   background-color: #050704;

  5.   margin: 0;

  6.   font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;

  7. }

  8. 

  9. /* DEMO-SPECIFIC STYLES */

  10. .typewriter h1 {

  11.   color: #f0f0f0;

  12.   font-family: monospace;

  13.   overflow: hidden; /* Ensures the content is not revealed until the animation */

  14.   border-right: 0.15em solid #ffa500; /* The typwriter cursor */

  15.   white-space: nowrap; /* Keeps the content on a single line */

  16.   margin: 0 auto; /* Gives that scrolling effect as the typing happens */

  17.   letter-spacing: 0.15em; /* Adjust as needed */

  18.   -webkit-animation: typing 3.5s steps(30, end), blink-caret 0.5s step-end infinite;

  19.           animation: typing 3.5s steps(30, end), blink-caret 0.5s step-end infinite;

  20. }

  21. 

  22. a {

  23.   text-decoration:none;

  24.   color: #f0f0f0;

  25. }

  26. 

  27. h2 {

  28.   color: #f0f0f0;

  29.   font-family: monospace;

  30.   width: auto;

  31.   margin-left: 10%;

  32.   margin-right: 10%;

  33. }

  34. /* The typing effect */

  35. /* The typewriter cursor effect */

  36. body {

  37.   padding-top: 1em;

  38.   display: -webkit-box;

  39.   display: flex;

  40.   -webkit-box-pack: center;

  41.           justify-content: center;

  42. }

  43. @-webkit-keyframes typing {

  44.   from {

  45.     width: 0;

  46.   }

  47.   to {

  48.     width: 100%;

  49.   }

  50. }

  51. @keyframes typing {

  52.   from {

  53.     width: 0;

  54.   }

  55.   to {

  56.     width: 100%;

  57.   }

  58. }

  59. @-webkit-keyframes blink-caret {

  60.   from, to {

  61.     border-color: transparent;

  62.   }

  63.   50% {

  64.     border-color: #61a26a;

  65.   }

  66. }

  67. @keyframes blink-caret {

  68.   from, to {

  69.     border-color: transparent;

  70.   }

  71.   50% {

  72.     border-color: #61a26a;

  73.   }

  74. }

  75. 

  76. /* end typewriter */

  77. .f {

  78.   position: fixed;

  79.   top: 5px;

  80.   right: 10px;

  81.   font-family: 'Arial';

  82.   font-size: 0.8em;

  83.   color: #61a26a;

  84. }

  85. .f a {

  86.   color: none;

  87. }

  88. 

  89. 

  90. /* home-project */

  91. 

  92. .home-p {

  93.   position: absolute;

  94.   top: 9%;

  95.   left: 12%;

  96.   -webkit-transform: translate(-50%, -50%);

  97.           transform: translate(-50%, -50%);

  98.   width: 20px;

  99.   height: 20px;

  100.   cursor: pointer;

  101. }

  102. 

  103. .home-p:hover .imgMasked {

  104.   -webkit-clip-path: circle(400px at center);

  105.           clip-path: circle(400px at center);

  106. }

  107. .home-p:hover .home-p-hail {

  108.   width: 200px;

  109.   height: 200px;

  110.   border-radius: 200px;

  111. }

  112. .home-p:hover .home-p-hail2 {

  113.   width: 200px;

  114.   height: 200px;

  115.   border-radius: 200px;

  116.   border: 80px solid #fff4e6;

  117.   opacity: 0;

  118. }

  119. .home-p:hover .home-p-name {

  120.   left: 200%;

  121.   opacity: 1;

  122. }

  123. .home-p:hover .home-p-name:before {

  124.   width: 100%;

  125. }

  126. .home-p-hail {

  127.   position: absolute;

  128.   top: 50%;

  129.   left: 50%;

  130.   -webkit-transform: translate(-50%, -50%);

  131.           transform: translate(-50%, -50%);

  132.   background-color: none;

  133.   width: 40px;

  134.   height: 40px;

  135.   border-radius: 40px;

  136.   -webkit-transition: 0.5s;

  137.   transition: 0.5s;

  138.   opacity: 0.2;

  139. }

  140. .home-p-hail2 {

  141.   position: absolute;

  142.   top: 50%;

  143.   left: 50%;

  144.   -webkit-transform: translate(-50%, -50%);

  145.           transform: translate(-50%, -50%);

  146.   width: 0;

  147.   height: 0;

  148.   border-radius: 0;

  149.   -webkit-transition: 0.7s;

  150.   transition: 0.7s;

  151.   border: 22px solid #61a26a;

  152.   border-radius: 20px;

  153.   pointer-events: none;

  154. }

  155. .imgMasked {

  156.   position: absolute;

  157.   top: 50%;

  158.   left: 50%;

  159.   -webkit-transform: translate(-50%, -50%);

  160.           transform: translate(-50%, -50%);

  161.   top: 50%;

  162.   height: 200px;

  163.   -webkit-clip-path: circle(20px at center);

  164.           clip-path: circle(20px at center);

  165.   -webkit-transition: 0.5s;

  166.   transition: 0.5s;

  167.   pointer-events: none;

  168. }

  169. .home-p-name {

  170.   position: absolute;

  171.   max-width: 600px;

  172.   min-width: 150px;

  173.   left: 0;

  174.   top: 150%;

  175.   pointer-events: none;

  176.   -webkit-transition: 0.5s;

  177.   transition: 0.5s;

  178.   color: none;

  179.   padding: 3px 6px;

  180.   z-index: 2;

  181.   opacity: 0;

  182. }

  183. .home-p-name:before {

  184.   content: '';

  185.   width: 0;

  186.   height: 100%;

  187.   background-color: #61a26a;

  188.   position: absolute;

  189.   top: 0;

  190.   left: 0;

  191.   -webkit-transition: 0.3s;

  192.   transition: 0.3s;

  193.   z-index: -1;

  194. }

  195. 

  196. /* end-home */

  197. 

  198. 

  199. .Project {

  200.   position: absolute;

  201.   top: 50%;

  202.   left: 50%;

  203.   -webkit-transform: translate(-50%, -50%);

  204.           transform: translate(-50%, -50%);

  205.   width: 20px;

  206.   height: 20px;

  207.   cursor: pointer;

  208. }

  209. 

  210. .Project:hover .imgMasked {

  211.   -webkit-clip-path: circle(400px at center);

  212.           clip-path: circle(400px at center);

  213. }

  214. .Project:hover .Project-hail {

  215.   width: 200px;

  216.   height: 200px;

  217.   border-radius: 200px;

  218. }

  219. .Project:hover .Project-hail2 {

  220.   width: 200px;

  221.   height: 200px;

  222.   border-radius: 200px;

  223.   border: 80px solid #fff4e6;

  224.   opacity: 0;

  225. }

  226. .Project:hover .Project-name {

  227.   left: 200%;

  228.   opacity: 1;

  229. }

  230. .Project:hover .Project-name:before {

  231.   width: 100%;

  232. }

  233. .Project-hail {

  234.   position: absolute;

  235.   top: 50%;

  236.   left: 50%;

  237.   -webkit-transform: translate(-50%, -50%);

  238.           transform: translate(-50%, -50%);

  239.   background-color: none;

  240.   width: 40px;

  241.   height: 40px;

  242.   border-radius: 40px;

  243.   -webkit-transition: 0.5s;

  244.   transition: 0.5s;

  245.   opacity: 0.2;

  246. }

  247. .Project-hail2 {

  248.   position: absolute;

  249.   top: 50%;

  250.   left: 50%;

  251.   -webkit-transform: translate(-50%, -50%);

  252.           transform: translate(-50%, -50%);

  253.   width: 0;

  254.   height: 0;

  255.   border-radius: 0;

  256.   -webkit-transition: 0.7s;

  257.   transition: 0.7s;

  258.   border: 22px solid #61a26a;

  259.   border-radius: 20px;

  260.   pointer-events: none;

  261. }

  262. .imgMasked {

  263.   position: absolute;

  264.   top: 50%;

  265.   left: 50%;

  266.   -webkit-transform: translate(-50%, -50%);

  267.           transform: translate(-50%, -50%);

  268.   top: 50%;

  269.   height: 200px;

  270.   -webkit-clip-path: circle(20px at center);

  271.           clip-path: circle(20px at center);

  272.   -webkit-transition: 0.5s;

  273.   transition: 0.5s;

  274.   pointer-events: none;

  275. }

  276. .Project-name {

  277.   position: absolute;

  278.   max-width: 600px;

  279.   min-width: 150px;

  280.   left: 0;

  281.   top: 150%;

  282.   pointer-events: none;

  283.   -webkit-transition: 0.5s;

  284.   transition: 0.5s;

  285.   color: none;

  286.   padding: 3px 6px;

  287.   z-index: 2;

  288.   opacity: 0;

  289. }

  290. .Project-name:before {

  291.   content: '';

  292.   width: 0;

  293.   height: 100%;

  294.   background-color: #61a26a;

  295.   position: absolute;

  296.   top: 0;

  297.   left: 0;

  298.   -webkit-transition: 0.3s;

  299.   transition: 0.3s;

  300.   z-index: -1;

  301. }

  302. 

  303. 

  304. .roject {

  305.   position: absolute;

  306.   top: 20%;

  307.   left: 20%;

  308.   -webkit-transform: translate(-50%, -50%);

  309.           transform: translate(-50%, -50%);

  310.   width: 20px;

  311.   height: 20px;

  312.   cursor: pointer;

  313. }

  314. 

  315. .roject:hover .imgMasked {

  316.   -webkit-clip-path: circle(400px at center);

  317.           clip-path: circle(400px at center);

  318. }

  319. .roject:hover .roject-hail {

  320.   width: 200px;

  321.   height: 200px;

  322.   border-radius: 200px;

  323. }

  324. .roject:hover .roject-hail2 {

  325.   width: 200px;

  326.   height: 200px;

  327.   border-radius: 200px;

  328.   border: 80px solid #fff4e6;

  329.   opacity: 0;

  330. }

  331. .roject:hover .roject-name {

  332.   left: 200%;

  333.   opacity: 1;

  334. }

  335. .roject:hover .roject-name:before {

  336.   width: 100%;

  337. }

  338. .roject-hail {

  339.   position: absolute;

  340.   top: 50%;

  341.   left: 50%;

  342.   -webkit-transform: translate(-50%, -50%);

  343.           transform: translate(-50%, -50%);

  344.   background-color: none;

  345.   width: 40px;

  346.   height: 40px;

  347.   border-radius: 40px;

  348.   -webkit-transition: 0.5s;

  349.   transition: 0.5s;

  350.   opacity: 0.2;

  351. }

  352. .roject-hail2 {

  353.   position: absolute;

  354.   top: 50%;

  355.   left: 50%;

  356.   -webkit-transform: translate(-50%, -50%);

  357.           transform: translate(-50%, -50%);

  358.   width: 0;

  359.   height: 0;

  360.   border-radius: 0;

  361.   -webkit-transition: 0.7s;

  362.   transition: 0.7s;

  363.   border: 22px solid #61a26a;

  364.   border-radius: 20px;

  365.   pointer-events: none;

  366. }

  367. .imgMasked {

  368.   position: absolute;

  369.   top: 50%;

  370.   left: 50%;

  371.   -webkit-transform: translate(-50%, -50%);

  372.           transform: translate(-50%, -50%);

  373.   top: 50%;

  374.   height: 200px;

  375.   -webkit-clip-path: circle(20px at center);

  376.           clip-path: circle(20px at center);

  377.   -webkit-transition: 0.5s;

  378.   transition: 0.5s;

  379.   pointer-events: none;

  380. }

  381. .roject-name {

  382.   position: absolute;

  383.   max-width: 600px;

  384.   min-width: 150px;

  385.   left: 0;

  386.   top: 150%;

  387.   pointer-events: none;

  388.   -webkit-transition: 0.5s;

  389.   transition: 0.5s;

  390.   color: none;

  391.   padding: 3px 6px;

  392.   z-index: 2;

  393.   opacity: 0;

  394. }

  395. .roject-name:before {

  396.   content: '';

  397.   width: 0;

  398.   height: 100%;

  399.   background-color: #61a26a;

  400.   position: absolute;

  401.   top: 0;

  402.   left: 0;

  403.   -webkit-transition: 0.3s;

  404.   transition: 0.3s;

  405.   z-index: -1;

  406. }

  407. 

  408. /* oject */

  409. .oject {

  410.   position: absolute;

  411.   top: 87%;

  412.   left: 36%;

  413.   -webkit-transform: translate(-50%, -50%);

  414.           transform: translate(-50%, -50%);

  415.   width: 20px;

  416.   height: 20px;

  417.   cursor: pointer;

  418. }

  419. 

  420. .oject:hover .imgMasked {

  421.   -webkit-clip-path: circle(400px at center);

  422.           clip-path: circle(400px at center);

  423. }

  424. .oject:hover .oject-hail {

  425.   width: 200px;

  426.   height: 200px;

  427.   border-radius: 200px;

  428. }

  429. .oject:hover .oject-hail2 {

  430.   width: 200px;

  431.   height: 200px;

  432.   border-radius: 200px;

  433.   border: 80px solid #fff4e6;

  434.   opacity: 0;

  435. }

  436. .oject:hover .oject-name {

  437.   left: 200%;

  438.   opacity: 1;

  439. }

  440. .oject:hover .oject-name:before {

  441.   width: 100%;

  442. }

  443. .oject-hail {

  444.   position: absolute;

  445.   top: 50%;

  446.   left: 50%;

  447.   -webkit-transform: translate(-50%, -50%);

  448.           transform: translate(-50%, -50%);

  449.   background-color: none;

  450.   width: 40px;

  451.   height: 40px;

  452.   border-radius: 40px;

  453.   -webkit-transition: 0.5s;

  454.   transition: 0.5s;

  455.   opacity: 0.2;

  456. }

  457. .oject-hail2 {

  458.   position: absolute;

  459.   top: 50%;

  460.   left: 50%;

  461.   -webkit-transform: translate(-50%, -50%);

  462.           transform: translate(-50%, -50%);

  463.   width: 0;

  464.   height: 0;

  465.   border-radius: 0;

  466.   -webkit-transition: 0.7s;

  467.   transition: 0.7s;

  468.   border: 22px solid #61a26a;

  469.   border-radius: 20px;

  470.   pointer-events: none;

  471. }

  472. .imgMasked {

  473.   position: absolute;

  474.   top: 50%;

  475.   left: 50%;

  476.   -webkit-transform: translate(-50%, -50%);

  477.           transform: translate(-50%, -50%);

  478.   top: 50%;

  479.   height: 200px;

  480.   -webkit-clip-path: circle(20px at center);

  481.           clip-path: circle(20px at center);

  482.   -webkit-transition: 0.5s;

  483.   transition: 0.5s;

  484.   pointer-events: none;

  485. }

  486. .oject-name {

  487.   position: absolute;

  488.   max-width: 600px;

  489.   min-width: 150px;

  490.   left: 0;

  491.   top: 150%;

  492.   pointer-events: none;

  493.   -webkit-transition: 0.5s;

  494.   transition: 0.5s;

  495.   color: none;

  496.   padding: 3px 6px;

  497.   z-index: 2;

  498.   opacity: 0;

  499. }

  500. .oject-name:before {

  501.   content: '';

  502.   width: 0;

  503.   height: 100%;

  504.   background-color: #61a26a;

  505.   position: absolute;

  506.   top: 0;

  507.   left: 0;

  508.   -webkit-transition: 0.3s;

  509.   transition: 0.3s;

  510.   z-index: -1;

  511. }

  512. 

  513. /* ject */

  514. 

  515. .ject {

  516.   position: absolute;

  517.   top: 20%;

  518.   left: 82%;

  519.   -webkit-transform: translate(-50%, -50%);

  520.           transform: translate(-50%, -50%);

  521.   width: 20px;

  522.   height: 20px;

  523.   cursor: pointer;

  524. }

  525. 

  526. .ject:hover .imgMasked {

  527.   -webkit-clip-path: circle(400px at center);

  528.           clip-path: circle(400px at center);

  529. }

  530. .ject:hover .ject-hail {

  531.   width: 200px;

  532.   height: 200px;

  533.   border-radius: 200px;

  534. }

  535. .ject:hover .ject-hail2 {

  536.   width: 200px;

  537.   height: 200px;

  538.   border-radius: 200px;

  539.   border: 80px solid #fff4e6;

  540.   opacity: 0;

  541. }

  542. .ject:hover .ject-name {

  543.   left: 200%;

  544.   opacity: 1;

  545. }

  546. .ject:hover .ject-name:before {

  547.   width: 100%;

  548. }

  549. .ject-hail {

  550.   position: absolute;

  551.   top: 50%;

  552.   left: 50%;

  553.   -webkit-transform: translate(-50%, -50%);

  554.           transform: translate(-50%, -50%);

  555.   background-color: none;

  556.   width: 40px;

  557.   height: 40px;

  558.   border-radius: 40px;

  559.   -webkit-transition: 0.5s;

  560.   transition: 0.5s;

  561.   opacity: 0.2;

  562. }

  563. .ject-hail2 {

  564.   position: absolute;

  565.   top: 50%;

  566.   left: 50%;

  567.   -webkit-transform: translate(-50%, -50%);

  568.           transform: translate(-50%, -50%);

  569.   width: 0;

  570.   height: 0;

  571.   border-radius: 0;

  572.   -webkit-transition: 0.7s;

  573.   transition: 0.7s;

  574.   border: 22px solid #61a26a;

  575.   border-radius: 20px;

  576.   pointer-events: none;

  577. }

  578. .imgMasked {

  579.   position: absolute;

  580.   top: 50%;

  581.   left: 50%;

  582.   -webkit-transform: translate(-50%, -50%);

  583.           transform: translate(-50%, -50%);

  584.   top: 50%;

  585.   height: 200px;

  586.   -webkit-clip-path: circle(20px at center);

  587.           clip-path: circle(20px at center);

  588.   -webkit-transition: 0.5s;

  589.   transition: 0.5s;

  590.   pointer-events: none;

  591. }

  592. .ject-name {

  593.   position: absolute;

  594.   max-width: 600px;

  595.   min-width: 150px;

  596.   left: 0;

  597.   top: 150%;

  598.   pointer-events: none;

  599.   -webkit-transition: 0.5s;

  600.   transition: 0.5s;

  601.   color: none;

  602.   padding: 3px 6px;

  603.   z-index: 2;

  604.   opacity: 0;

  605. }

  606. .ject-name:before {

  607.   content: '';

  608.   width: 0;

  609.   height: 100%;

  610.   background-color: #61a26a;

  611.   position: absolute;

  612.   top: 0;

  613.   left: 0;

  614.   -webkit-transition: 0.3s;

  615.   transition: 0.3s;

  616.   z-index: -1;

  617. }

  618. 

  619. /* ect */

  620. 

  621. .ect {

  622.   position: absolute;

  623.   top: 70%;

  624.   left: 20%;

  625.   right: 10%;

  626.   -webkit-transform: translate(-50%, -50%);

  627.           transform: translate(-50%, -50%);

  628.   width: 20px;

  629.   height: 20px;

  630.   cursor: pointer;

  631. }

  632. 

  633. .ect:hover .imgMasked {

  634.   -webkit-clip-path: circle(400px at center);

  635.           clip-path: circle(400px at center);

  636. }

  637. .ect:hover .ect-hail {

  638.   width: 200px;

  639.   height: 200px;

  640.   border-radius: 200px;

  641. }

  642. .ect:hover .ect-hail2 {

  643.   width: 200px;

  644.   height: 200px;

  645.   border-radius: 200px;

  646.   border: 80px solid #fff4e6;

  647.   opacity: 0;

  648. }

  649. .ect:hover .ect-name {

  650.   left: 200%;

  651.   opacity: 1;

  652. }

  653. .ect:hover .ect-name:before {

  654.   width: 100%;

  655. }

  656. .ect-hail {

  657.   position: absolute;

  658.   top: 50%;

  659.   left: 50%;

  660.   -webkit-transform: translate(-50%, -50%);

  661.           transform: translate(-50%, -50%);

  662.   background-color: none;

  663.   width: 40px;

  664.   height: 40px;

  665.   border-radius: 40px;

  666.   -webkit-transition: 0.5s;

  667.   transition: 0.5s;

  668.   opacity: 0.2;

  669. }

  670. .ect-hail2 {

  671.   position: absolute;

  672.   top: 50%;

  673.   left: 50%;

  674.   -webkit-transform: translate(-50%, -50%);

  675.           transform: translate(-50%, -50%);

  676.   width: 0;

  677.   height: 0;

  678.   border-radius: 0;

  679.   -webkit-transition: 0.7s;

  680.   transition: 0.7s;

  681.   border: 22px solid #61a26a;

  682.   border-radius: 20px;

  683.   pointer-events: none;

  684. }

  685. .imgMasked {

  686.   position: absolute;

  687.   top: 50%;

  688.   left: 50%;

  689.   -webkit-transform: translate(-50%, -50%);

  690.           transform: translate(-50%, -50%);

  691.   top: 50%;

  692.   height: 200px;

  693.   -webkit-clip-path: circle(20px at center);

  694.           clip-path: circle(20px at center);

  695.   -webkit-transition: 0.5s;

  696.   transition: 0.5s;

  697.   pointer-events: none;

  698. }

  699. .ect-name {

  700.   position: absolute;

  701.   max-width: 600px;

  702.   min-width: 150px;

  703.   left: 0;

  704.   top: 150%;

  705.   pointer-events: none;

  706.   -webkit-transition: 0.5s;

  707.   transition: 0.5s;

  708.   color: none;

  709.   padding: 3px 6px;

  710.   z-index: 2;

  711.   opacity: 0;

  712. }

  713. .ect-name:before {

  714.   content: '';

  715.   width: 0;

  716.   height: 100%;

  717.   background-color: #61a26a;

  718.   position: absolute;

  719.   top: 0;

  720.   left: 0;

  721.   -webkit-transition: 0.3s;

  722.   transition: 0.3s;

  723.   z-index: -1;

  724. }

  725. 

  726. /* ct */

  727. 

  728. .ct {

  729.   position: absolute;

  730.   top: 70%;

  731.   left: 60%;

  732.   -webkit-transform: translate(-50%, -50%);

  733.           transform: translate(-50%, -50%);

  734.   width: 20px;

  735.   height: 20px;

  736.   cursor: pointer;

  737. }

  738. 

  739. .ct:hover .imgMasked {

  740.   -webkit-clip-path: circle(400px at center);

  741.           clip-path: circle(400px at center);

  742. }

  743. .ct:hover .ct-hail {

  744.   width: 200px;

  745.   height: 200px;

  746.   border-radius: 200px;

  747. }

  748. .ct:hover .ct-hail2 {

  749.   width: 200px;

  750.   height: 200px;

  751.   border-radius: 200px;

  752.   border: 80px solid #fff4e6;

  753.   opacity: 0;

  754. }

  755. .ct:hover .ct-name {

  756.   left: 200%;

  757.   opacity: 1;

  758. }

  759. .ct:hover .ct-name:before {

  760.   width: 100%;

  761. }

  762. .ct-hail {

  763.   position: absolute;

  764.   top: 50%;

  765.   left: 50%;

  766.   -webkit-transform: translate(-50%, -50%);

  767.           transform: translate(-50%, -50%);

  768.   background-color: none;

  769.   width: 40px;

  770.   height: 40px;

  771.   border-radius: 40px;

  772.   -webkit-transition: 0.5s;

  773.   transition: 0.5s;

  774.   opacity: 0.2;

  775. }

  776. .ct-hail2 {

  777.   position: absolute;

  778.   top: 50%;

  779.   left: 50%;

  780.   -webkit-transform: translate(-50%, -50%);

  781.           transform: translate(-50%, -50%);

  782.   width: 0;

  783.   height: 0;

  784.   border-radius: 0;

  785.   -webkit-transition: 0.7s;

  786.   transition: 0.7s;

  787.   border: 22px solid #61a26a;

  788.   border-radius: 20px;

  789.   pointer-events: none;

  790. }

  791. .imgMasked {

  792.   position: absolute;

  793.   top: 50%;

  794.   left: 50%;

  795.   -webkit-transform: translate(-50%, -50%);

  796.           transform: translate(-50%, -50%);

  797.   top: 50%;

  798.   height: 200px;

  799.   -webkit-clip-path: circle(20px at center);

  800.           clip-path: circle(20px at center);

  801.   -webkit-transition: 0.5s;

  802.   transition: 0.5s;

  803.   pointer-events: none;

  804. }

  805. .ct-name {

  806.   position: absolute;

  807.   max-width: 600px;

  808.   min-width: 150px;

  809.   left: 0;

  810.   top: 150%;

  811.   pointer-events: none;

  812.   -webkit-transition: 0.5s;

  813.   transition: 0.5s;

  814.   color: none;

  815.   padding: 3px 6px;

  816.   z-index: 2;

  817.   opacity: 0;

  818. }

  819. .ct-name:before {

  820.   content: '';

  821.   width: 0;

  822.   height: 100%;

  823.   background-color: #61a26a;

  824.   position: absolute;

  825.   top: 0;

  826.   left: 0;

  827.   -webkit-transition: 0.3s;

  828.   transition: 0.3s;

  829.   z-index: -1;

  830. }

  831. 

  832. /* t */

  833. 

  834. .t {

  835.   position: absolute;

  836.   top: 30%;

  837.   left: 70%;

  838.   -webkit-transform: translate(-50%, -50%);

  839.           transform: translate(-50%, -50%);

  840.   width: 20px;

  841.   height: 20px;

  842.   cursor: pointer;

  843. }

  844. 

  845. .t:hover .imgMasked {

  846.   -webkit-clip-path: circle(400px at center);

  847.           clip-path: circle(400px at center);

  848. }

  849. .t:hover .t-hail {

  850.   width: 200px;

  851.   height: 200px;

  852.   border-radius: 200px;

  853. }

  854. .t:hover .t-hail2 {

  855.   width: 200px;

  856.   height: 200px;

  857.   border-radius: 200px;

  858.   border: 80px solid #fff4e6;

  859.   opacity: 0;

  860. }

  861. .t:hover .t-name {

  862.   left: 200%;

  863.   opacity: 1;

  864. }

  865. .t:hover .t-name:before {

  866.   width: 100%;

  867. }

  868. .t-hail {

  869.   position: absolute;

  870.   top: 50%;

  871.   left: 50%;

  872.   -webkit-transform: translate(-50%, -50%);

  873.           transform: translate(-50%, -50%);

  874.   background-color: none;

  875.   width: 40px;

  876.   height: 40px;

  877.   border-radius: 40px;

  878.   -webkit-transition: 0.5s;

  879.   transition: 0.5s;

  880.   opacity: 0.2;

  881. }

  882. .t-hail2 {

  883.   position: absolute;

  884.   top: 50%;

  885.   left: 50%;

  886.   -webkit-transform: translate(-50%, -50%);

  887.           transform: translate(-50%, -50%);

  888.   width: 0;

  889.   height: 0;

  890.   border-radius: 0;

  891.   -webkit-transition: 0.7s;

  892.   transition: 0.7s;

  893.   border: 22px solid #61a26a;

  894.   border-radius: 20px;

  895.   pointer-events: none;

  896. }

  897. .imgMasked {

  898.   position: absolute;

  899.   top: 50%;

  900.   left: 50%;

  901.   -webkit-transform: translate(-50%, -50%);

  902.           transform: translate(-50%, -50%);

  903.   top: 50%;

  904.   height: 200px;

  905.   -webkit-clip-path: circle(20px at center);

  906.           clip-path: circle(20px at center);

  907.   -webkit-transition: 0.5s;

  908.   transition: 0.5s;

  909.   pointer-events: none;

  910. }

  911. .t-name {

  912.   position: absolute;

  913.   max-width: 600px;

  914.   min-width: 150px;

  915.   left: 0;

  916.   top: 150%;

  917.   pointer-events: none;

  918.   -webkit-transition: 0.5s;

  919.   transition: 0.5s;

  920.   color: none;

  921.   padding: 3px 6px;

  922.   z-index: 2;

  923.   opacity: 0;

  924. }

  925. .t-name:before {

  926.   content: '';

  927.   width: 0;

  928.   height: 100%;

  929.   background-color: #61a26a;

  930.   position: absolute;

  931.   top: 0;

  932.   left: 0;

  933.   -webkit-transition: 0.3s;

  934.   transition: 0.3s;

  935.   z-index: -1;

  936. }

  937. 

  938. /* t2 */

  939. 

  940. .t2 {

  941.   position: absolute;

  942.   top: 20%;

  943.   left: 50%;

  944.   -webkit-transform: translate(-50%, -50%);

  945.           transform: translate(-50%, -50%);

  946.   width: 20px;

  947.   height: 20px;

  948.   cursor: pointer;

  949. }

  950. 

  951. .t2:hover .imgMasked {

  952.   -webkit-clip-path: circle(400px at center);

  953.           clip-path: circle(400px at center);

  954. }

  955. .t2:hover .t2-hail {

  956.   width: 200px;

  957.   height: 200px;

  958.   border-radius: 200px;

  959. }

  960. .t2:hover .t2-hail2 {

  961.   width: 200px;

  962.   height: 200px;

  963.   border-radius: 200px;

  964.   border: 80px solid #fff4e6;

  965.   opacity: 0;

  966. }

  967. .t2:hover .t2-name {

  968.   left: 200%;

  969.   opacity: 1;

  970. }

  971. .t2:hover .t2-name:before {

  972.   width: 100%;

  973. }

  974. .t2-hail {

  975.   position: absolute;

  976.   top: 50%;

  977.   left: 50%;

  978.   -webkit-transform: translate(-50%, -50%);

  979.           transform: translate(-50%, -50%);

  980.   background-color: none;

  981.   width: 40px;

  982.   height: 40px;

  983.   border-radius: 40px;

  984.   -webkit-transition: 0.5s;

  985.   transition: 0.5s;

  986.   opacity: 0.2;

  987. }

  988. .t2-hail2 {

  989.   position: absolute;

  990.   top: 50%;

  991.   left: 50%;

  992.   -webkit-transform: translate(-50%, -50%);

  993.           transform: translate(-50%, -50%);

  994.   width: 0;

  995.   height: 0;

  996.   border-radius: 0;

  997.   -webkit-transition: 0.7s;

  998.   transition: 0.7s;

  999.   border: 22px solid #61a26a;

  1000.   border-radius: 20px;

  1001.   pointer-events: none;

  1002. }

  1003. .imgMasked {

  1004.   position: absolute;

  1005.   top: 50%;

  1006.   left: 50%;

  1007.   -webkit-transform: translate(-50%, -50%);

  1008.           transform: translate(-50%, -50%);

  1009.   top: 50%;

  1010.   height: 200px;

  1011.   -webkit-clip-path: circle(20px at center);

  1012.           clip-path: circle(20px at center);

  1013.   -webkit-transition: 0.5s;

  1014.   transition: 0.5s;

  1015.   pointer-events: none;

  1016. }

  1017. .t2-name {

  1018.   position: absolute;

  1019.   max-width: 600px;

  1020.   min-width: 150px;

  1021.   left: 0;

  1022.   top: 150%;

  1023.   pointer-events: none;

  1024.   -webkit-transition: 0.5s;

  1025.   transition: 0.5s;

  1026.   color: none;

  1027.   padding: 3px 6px;

  1028.   z-index: 2;

  1029.   opacity: 0;

  1030. }

  1031. .t2-name:before {

  1032.   content: '';

  1033.   width: 0;

  1034.   height: 100%;

  1035.   background-color: #61a26a;

  1036.   position: absolute;

  1037.   top: 0;

  1038.   left: 0;

  1039.   -webkit-transition: 0.3s;

  1040.   transition: 0.3s;

  1041.   z-index: -1;

  1042. }