adding selector

_sass/isotope.scss

@@ -0,0 +1,164 @@
+
+
+/* ---- button ---- */
+
+.button {
+  display: inline-block;
+  padding: 10px 18px;
+  margin-bottom: 10px;
+  background: #EEE;
+  border: none;
+  border-radius: 3px;
+  color: #222;
+  font-size: 16px;
+  text-shadow: 0 1px white;
+  transition: all .2s ease;
+}
+
+.button:hover {
+
+  text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
+  color: #222;
+}
+
+.button:active,
+.button.is-checked {
+  background-color: #28F;
+}
+
+.button.is-checked {
+  color: white;
+  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
+}
+
+.button:active {
+  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
+}
+
+/* ---- button-group ---- */
+
+
+
+.button-group .button:first-child {
+  border-radius: 0.5em 0 0 0.5em;
+}
+
+.button-group .button:last-child {
+  border-radius: 0 0.5em 0.5em 0;
+}
+
+/* ---- isotope ---- */
+
+.grid {
+
+  // border: 1px solid #333;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  max-width: 1180px;
+  margin: auto;
+}
+
+/* clear fix */
+.grid:after {
+  content: '';
+
+  clear: both;
+}
+
+/* ---- .element-item ---- */
+
+.element-item {
+  flex: 1 0 250px;
+  height: 600px;
+  width: 300px;
+  background-repeat: no-repeat;
+  background-color: #ff00ff;
+  background-position-x: center;
+  background-position-y: -20px;
+  background-size: 100%;
+  transition: .2s ease-in-out;
+  border-radius: 3px;
+  margin: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  align-self: flex-end;
+  justify-items: flex-start;
+  flex-direction: row-reverse;
+
+  .cartouche {
+    background-color: #f4f4f4;
+    width: 100%;
+    height: 50%;
+    border-radius: 3px;
+    padding: 0 0 0 0;
+  }
+  
+  h4, h5, p {
+    flex: 0 0 auto;
+    margin: 10px;
+    padding: 5px;
+    border-radius: 3px;
+
+
+  }
+  h4 {
+    font-size: 1.5em;
+    background-color: #fff;
+
+  }
+  h5 {
+    font-size: 1em;
+    background-color: #fff;
+  }
+  p, a {
+    font-size: 1em;
+  }
+  a.cta {
+    border-radius: 100px;
+    padding: 10px 20px;
+    background: linear-gradient(270deg, #ff00ff, #426a00);
+    background-size: 400% 400%;
+    color: #fff;
+    -webkit-animation: AnimationName 15s ease infinite;
+    -moz-animation: AnimationName 15s ease infinite;
+    animation: AnimationName 15s ease infinite;
+    font-weight: 700;
+    text-decoration: none;
+    transition: 1s ease;
+
+    
+    @-webkit-keyframes AnimationName {
+        0%{background-position:0% 50%}
+        50%{background-position:100% 50%}
+        100%{background-position:0% 50%}
+    }
+    @-moz-keyframes AnimationName {
+        0%{background-position:0% 50%}
+        50%{background-position:100% 50%}
+        100%{background-position:0% 50%}
+    }
+    @keyframes AnimationName {
+        0%{background-position:0% 50%}
+        50%{background-position:100% 50%}
+        100%{background-position:0% 50%}
+    }
+  }
+  a:hover.cta {
+    background: #fff;
+    color: #ff00ff;
+    text-shadow: none;
+  }
+}
+
+
+.element-item>* {
+  margin: 0;
+  padding: 0;
+}
+
+
+