html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #f2f2f2 none repeat scroll 0 0;
  font-family: Lato; }

*, *::before, *::after {
  box-sizing: border-box; }

img {
  border: none; }

.clear {
  clear: both; }

.items {
  padding-top: 20px;
  min-height: 700px; }

.item {
  width: 300px;
  height: 220px;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 35px;
  overflow: hidden; }
  .item .effect {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
    height: 200px; }
    .item .effect img {
      max-width: 100%; }
  .item .name {
    font-family: Lato;
    font-size: 14px;
    color: #545454; }

.title {
  color: #545454;
  font-size: 22px;
  margin-bottom: 31px;
  text-indent: 15px;
  position: relative; }

header {
  background: #fff;
  padding-top: 20px;
  padding-bottom: 20px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
  header .logo {
    width: 290px;
    margin: 0 auto;
    font-family: Lato;
    font-weight: 700;
    font-size: 30px;
    background: linear-gradient(to right, #1e5799 0%, #7db9e8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    text-indent: 50px; }
    header .logo img {
      position: absolute;
      width: 40px;
      left: 0;
      top: 0; }

.container {
  width: 1170px;
  margin: 0 auto;
  padding-bottom: 40px; }

footer {
  height: 150px;
  text-align: center;
  background: #fff;
  padding-top: 50px;
  background: #3d4045 none repeat scroll 0 0;
  color: #fff;
  font-size: 25px; }
  footer a {
    text-decoration: none;
    color: #81b441; }

.change-photo {
  position: fixed;
  right: 0;
  top: 100px;
  background: #fff;
  box-shadow: 0px 0px 9px 0px #b3b3b3;
  z-index: 10;
  width: 200px;
  height: 200px;
  padding: 10px; }
  .change-photo .change-photo-title {
    color: #545454;
    text-align: center;
    position: relative;
    margin-bottom: 20px; }
    .change-photo .change-photo-title:after {
      content: "";
      background: #545454 none repeat scroll 0 0;
      bottom: -7px;
      height: 1px;
      left: 52px;
      position: absolute;
      width: 82px; }
  .change-photo select {
    border: 1px solid rgba(144, 144, 144, 0.25);
    width: 100%;
    font-family: Lato;
    height: 30px;
    font-size: 14px;
    color: #545454; }
  .change-photo button {
    background-color: transparent;
    border: 1px solid rgba(144, 144, 144, 0.25);
    border-radius: 2px;
    color: #545454 !important;
    cursor: pointer;
    font-size: 15px;
    height: 30px;
    line-height: 25px;
    overflow: hidden;
    padding: 0 2em;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    transition: background-color 0.2s ease-in-out 0s, color 0.2s ease-in-out 0s;
    white-space: nowrap;
    width: 100%;
    margin-top: 20px;
    font-family: Lato;
    margin-bottom: 20px; }
  .change-photo label {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    top: -2px;
    color: #545454;
    text-align: center; }

.menu {
  position: relative; }

.menu-item {
  float: left;
  margin-right: 20px;
  cursor: pointer; }

.menu-item-content {
  display: none; }

.menu-border {
  background: #545454 none repeat scroll 0 0;
  bottom: 20px;
  content: "";
  height: 1px;
  left: 20px;
  position: absolute;
  width: 76px;
  transition: all 0.5s ease; }

.menu-item-right {
  float: right;
  margin-right: 221px;
  cursor: pointer; }

.how-content {
  padding: 20px; }

.title2 {
  color: #545454;
  font-size: 20px;
  margin-bottom: 31px;
  text-indent: 15px;
  position: relative; }

.code {
  font-family: monospace;
  border: none;
  resize: none;
  padding: 10px;
  max-width: 930px;
  width: 100%;
  margin-top: 10px;
  display: block;
  margin-bottom: 10px; }
  .code:focus, .code:active {
    border: none;
    outline: none; }

/* EFFECTS LIST */
/* GREYSON */
.effect1:hover img, .effect1 img {
  filter: saturate(0) brightness(140%) contrast(125%); }

.effect2:hover img, .effect2 img {
  filter: saturate(0) brightness(120%) contrast(125%); }

.effect3:hover img, .effect3 img {
  filter: saturate(0) brightness(110%) contrast(125%); }

.effect4:hover img, .effect4 img {
  filter: saturate(0) contrast(125%); }

.effect5:hover img, .effect5 img {
  filter: saturate(0) brightness(90%) contrast(125%); }

.effect6:hover img, .effect6 img {
  filter: saturate(0) brightness(80%) contrast(125%); }

.effect7:hover img, .effect7 img {
  filter: saturate(0) brightness(70%) contrast(125%); }

.effect8:hover img, .effect8 img {
  filter: saturate(0) brightness(60%) contrast(125%); }

.effect9:hover img, .effect9 img {
  filter: saturate(0) brightness(50%) contrast(125%); }

.effect10:hover img, .effect10 img {
  filter: saturate(0) brightness(140%) contrast(125%) blur(1px); }

.effect11:hover img, .effect11 img {
  filter: saturate(0) brightness(120%) contrast(125%) blur(1px); }

.effect12:hover img, .effect12 img {
  filter: saturate(0) brightness(100%) contrast(125%) blur(1px); }

.effect13:hover img, .effect13 img {
  filter: saturate(0) brightness(80%) contrast(125%) blur(1px); }

.effect14:hover img, .effect14 img {
  filter: saturate(0) brightness(60%) contrast(125%) blur(1px); }

.effect15:hover img, .effect15 img {
  filter: saturate(0) brightness(40%) contrast(125%) blur(1px); }

/* END GREYSON */
/* SAEPPIA */
.effect100:hover img, .effect100 img {
  filter: brightness(140%) saturate(0) contrast(120%) sepia(0.5); }

.effect101:hover img, .effect101 img {
  filter: brightness(120%) saturate(0) contrast(120%) sepia(0.5); }

.effect102:hover img, .effect102 img {
  filter: brightness(100%) saturate(0) contrast(120%) sepia(0.5); }

.effect103:hover img, .effect103 img {
  filter: brightness(80%) saturate(0) contrast(120%) sepia(0.5); }

.effect104:hover img, .effect104 img {
  filter: brightness(60%) saturate(0) contrast(120%) sepia(0.5); }

.effect105:hover img, .effect105 img {
  filter: brightness(40%) saturate(0) contrast(120%) sepia(0.5); }

.effect106:hover img, .effect106 img {
  filter: brightness(140%) saturate(0.4) contrast(120%) sepia(0.5); }

.effect107:hover img, .effect107 img {
  filter: brightness(120%) saturate(0.4) contrast(120%) sepia(0.5); }

.effect108:hover img, .effect108 img {
  filter: brightness(100%) saturate(0.4) contrast(120%) sepia(0.5); }

.effect109:hover img, .effect109 img {
  filter: brightness(80%) saturate(0.4) contrast(120%) sepia(0.5); }

.effect110:hover img, .effect110 img {
  filter: brightness(60%) saturate(0.4) contrast(120%) sepia(0.5); }

.effect111:hover img, .effect111 img {
  filter: brightness(40%) saturate(0.4) contrast(120%) sepia(0.5); }

.effect112:hover img, .effect112 img {
  filter: brightness(140%) saturate(1.9) contrast(120%) sepia(0.7); }

.effect113:hover img, .effect113 img {
  filter: brightness(120%) saturate(1.9) contrast(120%) sepia(0.7); }

.effect114:hover img, .effect114 img {
  filter: brightness(100%) saturate(1.9) contrast(120%) sepia(0.7); }

.effect115:hover img, .effect115 img {
  filter: brightness(80%) saturate(1.9) contrast(120%) sepia(0.7); }

.effect116:hover img, .effect116 img {
  filter: brightness(60%) saturate(1.9) contrast(120%) sepia(0.7); }

.effect117:hover img, .effect117 img {
  filter: brightness(40%) saturate(1.9) contrast(120%) sepia(0.7); }

.effect118:hover img, .effect118 img {
  filter: brightness(140%) saturate(0) contrast(120%) sepia(0.5) blur(1px); }

.effect119:hover img, .effect119 img {
  filter: brightness(120%) saturate(0) contrast(120%) sepia(0.5) blur(1px); }

.effect120:hover img, .effect120 img {
  filter: brightness(100%) saturate(0) contrast(120%) sepia(0.5) blur(1px); }

.effect121:hover img, .effect121 img {
  filter: brightness(80%) saturate(0) contrast(120%) sepia(0.5) blur(1px); }

.effect122:hover img, .effect122 img {
  filter: brightness(60%) saturate(0) contrast(120%) sepia(0.5) blur(1px); }

.effect123:hover img, .effect123 img {
  filter: brightness(40%) saturate(0) contrast(120%) sepia(0.5) blur(1px); }

.effect124:hover img, .effect124 img {
  filter: brightness(140%) saturate(0.4) contrast(120%) sepia(0.5) blur(1px); }

.effect125:hover img, .effect125 img {
  filter: brightness(120%) saturate(0.4) contrast(120%) sepia(0.5) blur(1px); }

.effect126:hover img, .effect126 img {
  filter: brightness(100%) saturate(0.4) contrast(120%) sepia(0.5) blur(1px); }

.effect127:hover img, .effect127 img {
  filter: brightness(80%) saturate(0.4) contrast(120%) sepia(0.5) blur(1px); }

.effect128:hover img, .effect128 img {
  filter: brightness(60%) saturate(0.4) contrast(120%) sepia(0.5) blur(1px); }

.effect129:hover img, .effect129 img {
  filter: brightness(40%) saturate(0.4) contrast(120%) sepia(0.5) blur(1px); }

.effect130:hover img, .effect130 img {
  filter: brightness(140%) saturate(1.9) contrast(120%) sepia(0.7) blur(1px); }

.effect131:hover img, .effect131 img {
  filter: brightness(120%) saturate(1.9) contrast(120%) sepia(0.7) blur(1px); }

.effect132:hover img, .effect132 img {
  filter: brightness(100%) saturate(1.9) contrast(120%) sepia(0.7) blur(1px); }

.effect133:hover img, .effect133 img {
  filter: brightness(80%) saturate(1.9) contrast(120%) sepia(0.7) blur(1px); }

.effect134:hover img, .effect134 img {
  filter: brightness(60%) saturate(1.9) contrast(120%) sepia(0.7) blur(1px); }

.effect135:hover img, .effect135 img {
  filter: brightness(40%) saturate(1.9) contrast(120%) sepia(0.7) blur(1px); }

/* END SAEPPIA */
/* BRIGHTON */
.effect200:hover img, .effect200 img {
  filter: brightness(180%) contrast(100%); }

.effect201:hover img, .effect201 img {
  filter: brightness(160%) contrast(100%); }

.effect202:hover img, .effect202 img {
  filter: brightness(140%) contrast(100%); }

.effect203:hover img, .effect203 img {
  filter: brightness(120%) contrast(100%); }

.effect204:hover img, .effect204 img {
  filter: brightness(90%) contrast(100%); }

.effect205:hover img, .effect205 img {
  filter: brightness(80%) contrast(100%); }

.effect206:hover img, .effect206 img {
  filter: brightness(60%) contrast(100%); }

.effect207:hover img, .effect207 img {
  filter: brightness(45%) contrast(100%); }

.effect208:hover img, .effect208 img {
  filter: brightness(30%) contrast(100%); }

.effect209:hover img, .effect209 img {
  filter: brightness(180%) contrast(90%); }

.effect210:hover img, .effect210 img {
  filter: brightness(160%) contrast(90%); }

.effect211:hover img, .effect211 img {
  filter: brightness(140%) contrast(90%); }

.effect212:hover img, .effect212 img {
  filter: brightness(120%) contrast(90%); }

.effect213:hover img, .effect213 img {
  filter: brightness(100%) contrast(90%); }

.effect214:hover img, .effect214 img {
  filter: brightness(80%) contrast(90%); }

.effect215:hover img, .effect215 img {
  filter: brightness(60%) contrast(90%); }

.effect216:hover img, .effect216 img {
  filter: brightness(45%) contrast(90%); }

.effect217:hover img, .effect217 img {
  filter: brightness(30%) contrast(90%); }

.effect218:hover img, .effect218 img {
  filter: brightness(180%) contrast(90%) saturate(1.5); }

.effect219:hover img, .effect219 img {
  filter: brightness(160%) contrast(90%) saturate(1.5); }

.effect220:hover img, .effect220 img {
  filter: brightness(140%) contrast(90%) saturate(1.5); }

.effect221:hover img, .effect221 img {
  filter: brightness(120%) contrast(100%) saturate(1.5); }

.effect222:hover img, .effect222 img {
  filter: brightness(100%) contrast(100%) saturate(1.5); }

.effect223:hover img, .effect223 img {
  filter: brightness(80%) contrast(100%) saturate(1.5); }

.effect224:hover img, .effect224 img {
  filter: brightness(60%) contrast(100%) saturate(1.5); }

.effect225:hover img, .effect225 img {
  filter: brightness(45%) contrast(100%) saturate(2); }

.effect226:hover img, .effect226 img {
  filter: brightness(30%) contrast(100%) saturate(2); }

.effect227:hover img, .effect227 img {
  filter: brightness(180%) contrast(100%) blur(1px); }

.effect228:hover img, .effect228 img {
  filter: brightness(160%) contrast(100%) blur(1px); }

.effect229:hover img, .effect229 img {
  filter: brightness(140%) contrast(100%) blur(1px); }

.effect230:hover img, .effect230 img {
  filter: brightness(120%) contrast(100%) blur(1px); }

.effect231:hover img, .effect231 img {
  filter: brightness(100%) contrast(100%) blur(1px); }

.effect232:hover img, .effect232 img {
  filter: brightness(80%) contrast(100%) blur(1px); }

.effect233:hover img, .effect233 img {
  filter: brightness(60%) contrast(100%) blur(1px); }

.effect234:hover img, .effect234 img {
  filter: brightness(45%) contrast(100%) blur(1px); }

.effect235:hover img, .effect235 img {
  filter: brightness(30%) contrast(100%) blur(1px); }

.effect236:hover img, .effect236 img {
  filter: brightness(180%) contrast(90%) blur(1px); }

.effect237:hover img, .effect237 img {
  filter: brightness(160%) contrast(90%) blur(1px); }

.effect238:hover img, .effect238 img {
  filter: brightness(140%) contrast(90%) blur(1px); }

.effect239:hover img, .effect239 img {
  filter: brightness(120%) contrast(90%) blur(1px); }

.effect240:hover img, .effect240 img {
  filter: brightness(100%) contrast(90%) blur(1px); }

.effect241:hover img, .effect241 img {
  filter: brightness(80%) contrast(90%) blur(1px); }

.effect242:hover img, .effect242 img {
  filter: brightness(60%) contrast(90%) blur(1px); }

.effect243:hover img, .effect243 img {
  filter: brightness(45%) contrast(90%) blur(1px); }

.effect244:hover img, .effect244 img {
  filter: brightness(30%) contrast(90%) blur(1px); }

.effect245:hover img, .effect245 img {
  filter: brightness(180%) contrast(90%) saturate(1.5) blur(1px); }

.effect246:hover img, .effect246 img {
  filter: brightness(160%) contrast(90%) saturate(1.5) blur(1px); }

.effect247:hover img, .effect247 img {
  filter: brightness(140%) contrast(90%) saturate(1.5) blur(1px); }

.effect248:hover img, .effect248 img {
  filter: brightness(120%) contrast(100%) saturate(1.5) blur(1px); }

.effect249:hover img, .effect249 img {
  filter: brightness(100%) contrast(100%) saturate(1.5) blur(1px); }

.effect250:hover img, .effect250 img {
  filter: brightness(80%) contrast(100%) saturate(1.5) blur(1px); }

.effect251:hover img, .effect251 img {
  filter: brightness(60%) contrast(100%) saturate(1.5) blur(1px); }

.effect252:hover img, .effect252 img {
  filter: brightness(45%) contrast(100%) saturate(2) blur(1px); }

.effect253:hover img, .effect253 img {
  filter: brightness(30%) contrast(100%) saturate(2) blur(1px); }

/* END BRIGHTON */
/* OVERLEY */
.effect300:hover img, .effect300 img {
  filter: sepia(50%) contrast(80%) brightness(140%) saturate(2); }

.effect300 overlay {
  background-image: linear-gradient(to right, red, yellow 60%);
  opacity: 0.2; }

.effect300:hover overlay {
  opacity: 0.2 !important; }

.effect301:hover img, .effect301 img {
  filter: sepia(50%) contrast(80%) brightness(100%) saturate(2); }

.effect301 overlay {
  background-image: linear-gradient(to right, red, yellow 60%);
  opacity: 0.2; }

.effect301:hover overlay {
  opacity: 0.2 !important; }

.effect302:hover img, .effect302 img {
  filter: sepia(50%) contrast(80%) brightness(60%) saturate(2); }

.effect302 overlay {
  background-image: linear-gradient(to right, red, yellow 60%);
  opacity: 0.2; }

.effect302:hover overlay {
  opacity: 0.2 !important; }

.effect303:hover img, .effect303 img {
  filter: contrast(110%) brightness(140%); }

.effect303 overlay {
  background-image: linear-gradient(to right, red, yellow 60%);
  opacity: 0.2; }

.effect303:hover overlay {
  opacity: 0.2 !important; }

.effect304:hover img, .effect304 img {
  filter: contrast(110%) brightness(100%); }

.effect304 overlay {
  background-image: linear-gradient(to right, red, yellow 60%);
  opacity: 0.2; }

.effect304:hover overlay {
  opacity: 0.2 !important; }

.effect305:hover img, .effect305 img {
  filter: contrast(110%) brightness(60%); }

.effect305 overlay {
  background-image: linear-gradient(to right, red, yellow 60%);
  opacity: 0.2; }

.effect305:hover overlay {
  opacity: 0.2 !important; }

.effect306:hover img, .effect306 img {
  filter: sepia(10%) contrast(190%) brightness(140%); }

.effect306 overlay {
  background-image: linear-gradient(to right, red, yellow 60%);
  opacity: 0.2; }

.effect306:hover overlay {
  opacity: 0.2 !important; }

.effect307:hover img, .effect307 img {
  filter: sepia(10%) contrast(190%) brightness(100%); }

.effect307 overlay {
  background-image: linear-gradient(to right, red, yellow 60%);
  opacity: 0.2; }

.effect307:hover overlay {
  opacity: 0.2 !important; }

.effect308:hover img, .effect308 img {
  filter: sepia(10%) contrast(190%) brightness(60%); }

.effect308 overlay {
  background-image: linear-gradient(to right, red, yellow 60%);
  opacity: 0.2; }

.effect308:hover overlay {
  opacity: 0.2 !important; }

.effect309:hover img, .effect309 img {
  filter: sepia(50%) contrast(80%) brightness(140%) saturate(2); }

.effect309 overlay {
  background-image: linear-gradient(to right, green, yellow 60%);
  opacity: 0.2; }

.effect309:hover overlay {
  opacity: 0.2 !important; }

.effect310:hover img, .effect310 img {
  filter: sepia(50%) contrast(80%) brightness(100%) saturate(2); }

.effect310 overlay {
  background-image: linear-gradient(to right, green, yellow 60%);
  opacity: 0.2; }

.effect310:hover overlay {
  opacity: 0.2 !important; }

.effect311:hover img, .effect311 img {
  filter: sepia(50%) contrast(80%) brightness(60%) saturate(2); }

.effect311 overlay {
  background-image: linear-gradient(to right, green, yellow 60%);
  opacity: 0.2; }

.effect311:hover overlay {
  opacity: 0.2 !important; }

.effect312:hover img, .effect312 img {
  filter: contrast(110%) brightness(140%); }

.effect312 overlay {
  background-image: linear-gradient(to right, green, yellow 60%);
  opacity: 0.2; }

.effect312:hover overlay {
  opacity: 0.2 !important; }

.effect313:hover img, .effect313 img {
  filter: contrast(110%) brightness(100%); }

.effect313 overlay {
  background-image: linear-gradient(to right, green, yellow 60%);
  opacity: 0.2; }

.effect313:hover overlay {
  opacity: 0.2 !important; }

.effect314:hover img, .effect314 img {
  filter: contrast(110%) brightness(60%); }

.effect314 overlay {
  background-image: linear-gradient(to right, green, yellow 60%);
  opacity: 0.2; }

.effect314:hover overlay {
  opacity: 0.2 !important; }

.effect315:hover img, .effect315 img {
  filter: sepia(10%) contrast(190%) brightness(140%); }

.effect315 overlay {
  background-image: linear-gradient(to right, green, yellow 60%);
  opacity: 0.2; }

.effect315:hover overlay {
  opacity: 0.2 !important; }

.effect316:hover img, .effect316 img {
  filter: sepia(10%) contrast(190%) brightness(100%); }

.effect316 overlay {
  background-image: linear-gradient(to right, green, yellow 60%);
  opacity: 0.2; }

.effect316:hover overlay {
  opacity: 0.2 !important; }

.effect317:hover img, .effect317 img {
  filter: sepia(10%) contrast(190%) brightness(60%); }

.effect317 overlay {
  background-image: linear-gradient(to right, green, yellow 60%);
  opacity: 0.2; }

.effect317:hover overlay {
  opacity: 0.2 !important; }

.effect318:hover img, .effect318 img {
  filter: sepia(50%) contrast(80%) brightness(140%) saturate(2); }

.effect318 overlay {
  background-image: linear-gradient(to right, blue, yellow 60%);
  opacity: 0.2; }

.effect318:hover overlay {
  opacity: 0.2 !important; }

.effect319:hover img, .effect319 img {
  filter: sepia(50%) contrast(80%) brightness(100%) saturate(2); }

.effect319 overlay {
  background-image: linear-gradient(to right, blue, yellow 60%);
  opacity: 0.2; }

.effect319:hover overlay {
  opacity: 0.2 !important; }

.effect320:hover img, .effect320 img {
  filter: sepia(50%) contrast(80%) brightness(60%) saturate(2); }

.effect320 overlay {
  background-image: linear-gradient(to right, blue, yellow 60%);
  opacity: 0.2; }

.effect320:hover overlay {
  opacity: 0.2 !important; }

.effect321:hover img, .effect321 img {
  filter: sepia(30%) contrast(130%) brightness(140%); }

.effect321 overlay {
  background-image: linear-gradient(to right, blue, yellow 60%);
  opacity: 0.2; }

.effect321:hover overlay {
  opacity: 0.2 !important; }

.effect322:hover img, .effect322 img {
  filter: sepia(30%) contrast(130%) brightness(100%); }

.effect322 overlay {
  background-image: linear-gradient(to right, blue, yellow 60%);
  opacity: 0.2; }

.effect322:hover overlay {
  opacity: 0.2 !important; }

.effect323:hover img, .effect323 img {
  filter: sepia(30%) contrast(130%) brightness(60%); }

.effect323 overlay {
  background-image: linear-gradient(to right, blue, yellow 60%);
  opacity: 0.2; }

.effect323:hover overlay {
  opacity: 0.2 !important; }

.effect324:hover img, .effect324 img {
  filter: sepia(10%) contrast(190%) brightness(140%); }

.effect324 overlay {
  background-image: linear-gradient(to right, blue, yellow 60%);
  opacity: 0.2; }

.effect324:hover overlay {
  opacity: 0.2 !important; }

.effect325:hover img, .effect325 img {
  filter: sepia(10%) contrast(190%) brightness(100%); }

.effect325 overlay {
  background-image: linear-gradient(to right, blue, yellow 60%);
  opacity: 0.2; }

.effect325:hover overlay {
  opacity: 0.2 !important; }

.effect326:hover img, .effect326 img {
  filter: sepia(10%) contrast(190%) brightness(60%); }

.effect326 overlay {
  background-image: linear-gradient(to right, blue, yellow 60%);
  opacity: 0.2; }

.effect326:hover overlay {
  opacity: 0.2 !important; }

.effect327 overlay {
  background: radial-gradient(ellipse at center, rgba(30, 87, 153, 0) 0%, rgba(17, 49, 86, 0) 44%, #06111f 80%, black 100%);
  opacity: 0.2; }

.effect327:hover overlay {
  opacity: 0.2 !important; }

.effect328:hover img, .effect328 img {
  filter: contrast(150%) brightness(100%); }

.effect328 overlay {
  background: radial-gradient(ellipse at center, rgba(30, 87, 153, 0) 0%, rgba(17, 49, 86, 0) 44%, #06111f 80%, black 100%);
  opacity: 0.2; }

.effect328:hover overlay {
  opacity: 0.2 !important; }

.effect329:hover img, .effect329 img {
  filter: contrast(190%) brightness(70%); }

.effect329 overlay {
  background: radial-gradient(ellipse at center, rgba(30, 87, 153, 0) 0%, rgba(17, 49, 86, 0) 44%, #06111f 80%, black 100%);
  opacity: 0.2; }

.effect329:hover overlay {
  opacity: 0.2 !important; }

.effect330:hover img, .effect330 img {
  filter: saturate(2); }

.effect330 overlay {
  background: radial-gradient(ellipse at center, rgba(30, 87, 153, 0) 0%, rgba(17, 49, 86, 0) 44%, #06111f 80%, black 100%);
  opacity: 0.2; }

.effect330:hover overlay {
  opacity: 0.2 !important; }

.effect331:hover img, .effect331 img {
  filter: contrast(150%) brightness(100%) saturate(2); }

.effect331 overlay {
  background: radial-gradient(ellipse at center, rgba(30, 87, 153, 0) 0%, rgba(17, 49, 86, 0) 44%, #06111f 80%, black 100%);
  opacity: 0.2; }

.effect331:hover overlay {
  opacity: 0.2 !important; }

.effect332:hover img, .effect332 img {
  filter: contrast(190%) brightness(70%) saturate(2); }

.effect332 overlay {
  background: radial-gradient(ellipse at center, rgba(30, 87, 153, 0) 0%, rgba(17, 49, 86, 0) 44%, #06111f 80%, black 100%);
  opacity: 0.2; }

.effect332:hover overlay {
  opacity: 0.2 !important; }

.effect333:hover img, .effect333 img {
  filter: saturate(0.5); }

.effect333 overlay {
  background: radial-gradient(ellipse at center, rgba(30, 87, 153, 0) 0%, rgba(17, 49, 86, 0) 44%, #06111f 80%, black 100%);
  opacity: 0.2; }

.effect333:hover overlay {
  opacity: 0.2 !important; }

.effect334:hover img, .effect334 img {
  filter: contrast(150%) brightness(100%) saturate(0.5); }

.effect334 overlay {
  background: radial-gradient(ellipse at center, rgba(30, 87, 153, 0) 0%, rgba(17, 49, 86, 0) 44%, #06111f 80%, black 100%);
  opacity: 0.2; }

.effect334:hover overlay {
  opacity: 0.2 !important; }

.effect335:hover img, .effect335 img {
  filter: contrast(190%) brightness(70%) saturate(0.5); }

.effect335 overlay {
  background: radial-gradient(ellipse at center, rgba(30, 87, 153, 0) 0%, rgba(17, 49, 86, 0) 44%, #06111f 80%, black 100%);
  opacity: 0.2; }

.effect335:hover overlay {
  opacity: 0.2 !important; }

.effect336:hover img, .effect336 img {
  filter: saturate(0.5) brightness(120%) contrast(190%); }

.effect336 overlay {
  background: radial-gradient(ellipse at center, rgba(30, 87, 153, 0) 0%, rgba(17, 49, 86, 0) 44%, #06111f 80%, black 100%);
  opacity: 0.2; }

.effect336:hover overlay {
  opacity: 0.2 !important; }

.effect337:hover img, .effect337 img {
  filter: contrast(190%) brightness(100%) saturate(0.5); }

.effect337 overlay {
  background: radial-gradient(ellipse at center, rgba(30, 87, 153, 0) 0%, rgba(17, 49, 86, 0) 44%, #06111f 80%, black 100%);
  opacity: 0.2; }

.effect337:hover overlay {
  opacity: 0.2 !important; }

.effect338:hover img, .effect338 img {
  filter: contrast(190%) brightness(70%) saturate(0.5); }

.effect338 overlay {
  background: radial-gradient(ellipse at center, rgba(30, 87, 153, 0) 0%, rgba(17, 49, 86, 0) 44%, #06111f 80%, black 100%);
  opacity: 0.2; }

.effect338:hover overlay {
  opacity: 0.2 !important; }

.effect339:hover img, .effect339 img {
  filter: saturate(0.5) brightness(120%) contrast(190%); }

.effect339 overlay {
  background: linear-gradient(to right, rgba(255, 5, 5, 0.74) 0%, rgba(255, 130, 5, 0.75) 12%, rgba(252, 240, 5, 0.76) 25%, rgba(34, 255, 5, 0.77) 36%, rgba(5, 255, 250, 0.78) 47%, rgba(5, 96, 255, 0.79) 61%, rgba(84, 5, 255, 0.8) 76%, rgba(252, 5, 248, 0.81) 89%, rgba(109, 0, 25, 0.81) 100%);
  opacity: 0.2; }

.effect339:hover overlay {
  opacity: 0.2 !important; }

.effect340:hover img, .effect340 img {
  filter: contrast(190%) brightness(100%) saturate(0.5); }

.effect340 overlay {
  background: linear-gradient(to right, rgba(255, 5, 5, 0.74) 0%, rgba(255, 130, 5, 0.75) 12%, rgba(252, 240, 5, 0.76) 25%, rgba(34, 255, 5, 0.77) 36%, rgba(5, 255, 250, 0.78) 47%, rgba(5, 96, 255, 0.79) 61%, rgba(84, 5, 255, 0.8) 76%, rgba(252, 5, 248, 0.81) 89%, rgba(109, 0, 25, 0.81) 100%);
  opacity: 0.2; }

.effect340:hover overlay {
  opacity: 0.2 !important; }

.effect341:hover img, .effect341 img {
  filter: contrast(190%) brightness(70%) saturate(0.5); }

.effect341 overlay {
  background: linear-gradient(to right, rgba(255, 5, 5, 0.74) 0%, rgba(255, 130, 5, 0.75) 12%, rgba(252, 240, 5, 0.76) 25%, rgba(34, 255, 5, 0.77) 36%, rgba(5, 255, 250, 0.78) 47%, rgba(5, 96, 255, 0.79) 61%, rgba(84, 5, 255, 0.8) 76%, rgba(252, 5, 248, 0.81) 89%, rgba(109, 0, 25, 0.81) 100%);
  opacity: 0.2; }

.effect341:hover overlay {
  opacity: 0.2 !important; }

.effect342:hover img, .effect342 img {
  filter: saturate(0.5) brightness(130%) contrast(110%); }

.effect342 overlay {
  background: #CC0000;
  opacity: 0.2; }

.effect342:hover overlay {
  opacity: 0.2 !important; }

.effect343:hover img, .effect343 img {
  filter: contrast(110%) brightness(130%); }

.effect343 overlay {
  background: #00FF00;
  opacity: 0.2; }

.effect343:hover overlay {
  opacity: 0.2 !important; }

.effect344:hover img, .effect344 img {
  filter: contrast(110%) brightness(130%); }

.effect344 overlay {
  background: #0000CC;
  opacity: 0.2; }

.effect344:hover overlay {
  opacity: 0.2 !important; }

.effect345:hover img, .effect345 img {
  filter: saturate(0.5) brightness(150%) contrast(120%) saturate(0.4); }

.effect345 overlay {
  background: #CC0000;
  opacity: 0.2; }

.effect345:hover overlay {
  opacity: 0.2 !important; }

.effect346:hover img, .effect346 img {
  filter: contrast(120%) brightness(150%) saturate(0.4); }

.effect346 overlay {
  background: #00FF00;
  opacity: 0.2; }

.effect346:hover overlay {
  opacity: 0.2 !important; }

.effect347:hover img, .effect347 img {
  filter: contrast(120%) brightness(150%) saturate(0.4); }

.effect347 overlay {
  background: #0000CC;
  opacity: 0.2; }

.effect347:hover overlay {
  opacity: 0.2 !important; }

.effect348:hover img, .effect348 img {
  filter: saturate(0.5) brightness(150%) contrast(130%) saturate(0); }

.effect348 overlay {
  background: #CC0000;
  opacity: 0.2; }

.effect348:hover overlay {
  opacity: 0.2 !important; }

.effect349:hover img, .effect349 img {
  filter: contrast(130%) brightness(150%) saturate(0); }

.effect349 overlay {
  background: #00FF00;
  opacity: 0.2; }

.effect349:hover overlay {
  opacity: 0.2 !important; }

.effect350:hover img, .effect350 img {
  filter: contrast(130%) brightness(150%) saturate(0); }

.effect350 overlay {
  background: #0000CC;
  opacity: 0.2; }

.effect350:hover overlay {
  opacity: 0.2 !important; }

/* END OVERLEY */
/* END EFFECTS LIST */
.effect {
  position: relative; }
  .effect img {
    transition: filter 0.5s ease; }
  .effect overlay {
    transition: opacity 0.5s ease;
    position: absolute;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0; }

.effect-hover img {
  filter: none; }

.effect-hover overlay {
  opacity: 0; }

.effect-hover-reverse:hover img {
  filter: none; }

.effect-hover-reverse:hover overlay {
  opacity: 0; }