templates/AppTemplates/valide/galerieContent/element.css line 1

Open in your IDE?
  2. .full {
  3.   position: fixed;
  4.   left: 0;
  5.   top: 0;
  6.   width: 100%;
  7.   height: 100%;
  8.   z-index: 1;
  9. }
  10. .full .content {
  11.   background-color: rgba(0,0,0,0.75) !important;
  12.   height: 100%;
  13.   width: 100%;
  14.   display: grid;
  15. }
  16. .full .content img {
  17.   left: 50%;
  18.   transform: translate3d(0, 0, 0);
  19.   animation: zoomin 1s ease;
  20.   max-width: 100%;
  21.   max-height: 100%;
  22.   margin: auto;
  23. }
  24. .byebye {
  25.   opacity: 0;
  26. }
  27. .byebye:hover {
  28.   transform: scale(0.2) !important;
  29.   filter:none!important;
  30. }
  31. .gallery {
  32.   display: grid;
  33.   grid-column-gap: 8px;
  34.   grid-row-gap: 8px;
  35.   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  36.   grid-auto-rows: 8px;
  37. }
  38. .gallery img {
  39.   max-width: 90%;
  40.   border-radius: 8px;
  41.   box-shadow: 0 0 16px #333;
  42.   filter:contrast(0.5);
  43.   transition: all 1.5s ease;
  44. }
  45. .gallery img:hover {
  46.   box-shadow: 0 0 32px #333;
  47.   transform:scale(1.1);
  48.   filter:none!important;
  49.   transition:0.15s!important;
  50. }
  52. .gallery img 
  53. .gallery .content {
  54.   padding: 4px;
  55. }
  56. .gallery .gallery-item {
  57.   transition: grid-row-start 300ms linear;
  58.   transition: transform 300ms ease;
  59.   transition: all 0.5s ease;
  60.   cursor: pointer;
  61. }
  62. .gallery .gallery-item:hover {
  63.   transform: scale(1.025);
  64.   filter:none!important;
  65. }
  67. .full .content .lozad {
  68.   filter:unset!important;
  69.   max-width: 70%!important;
  70.   height:auto!important;
  71. }
  72. @media (max-width: 600px) {
  73.   .gallery {
  74.     grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
  75.   }
  76. }
  77. @media (max-width: 400px) {
  78.   .gallery {
  79.     grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
  80.   }
  81. }
  82. @-moz-keyframes zoomin {
  83.   0% {
  84.     max-width: 50%;
  85.     transform: rotate(-30deg);
  86.     filter: blur(4px);
  87.   }
  88.   30% {
  89.     filter: blur(4px);
  90.     transform: rotate(-80deg);
  91.   }
  92.   70% {
  93.     max-width: 50%;
  94.     transform: rotate(45deg);
  95.   }
  96.   100% {
  97.     max-width: 100%;
  98.     transform: rotate(0deg);
  99.   }
  100. }
  101. @-webkit-keyframes zoomin {
  102.   0% {
  103.     max-width: 50%;
  104.     transform: rotate(-30deg);
  105.     filter: blur(4px);
  106.   }
  107.   30% {
  108.     filter: blur(4px);
  109.     transform: rotate(-80deg);
  110.   }
  111.   70% {
  112.     max-width: 50%;
  113.     transform: rotate(45deg);
  114.   }
  115.   100% {
  116.     max-width: 100%;
  117.     transform: rotate(0deg);
  118.   }
  119. }
  120. @-o-keyframes zoomin {
  121.   0% {
  122.     max-width: 50%;
  123.     transform: rotate(-30deg);
  124.     filter: blur(4px);
  125.   }
  126.   30% {
  127.     filter: blur(4px);
  128.     transform: rotate(-80deg);
  129.   }
  130.   70% {
  131.     max-width: 50%;
  132.     transform: rotate(45deg);
  133.   }
  134.   100% {
  135.     max-width: 100%;
  136.     transform: rotate(0deg);
  137.   }
  138. }
  139. @keyframes zoomin {
  140.   0% {
  141.     max-width: 50%;
  142.     transform: rotate(-30deg);
  143.     filter: blur(4px);
  144.   }
  145.   30% {
  146.     filter: blur(4px);
  147.     transform: rotate(-80deg);
  148.   }
  149.   70% {
  150.     max-width: 50%;
  151.     transform: rotate(45deg);
  152.   }
  153.   100% {
  154.     max-width: 80%;
  155.     transform: rotate(0deg);
  156.   }
  157. }
  159. .svs_item {
  160.   height:10vh!important;
  161.   width:50%!important;
  162. }
  163. .svs_security {
  164. width:100%;
  165. height:100%;
  166. background-color:red;
  167. color:white;
  168. }