﻿﻿    
/*======================EFFECTS=============================*/
img.Grayscale:hover{
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

img.Blur:hover {
  -webkit-filter: blur(4px); /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}
img.Rounded:hover {
  border-radius: 20%;
}








.zoom{ transition: transform .2s; /* Animation */}
span.zoom:hover , img.zoom:hover {
  -ms-transform: scale(1.05); /* IE 9 */
  -webkit-transform: scale(1.05); /* Safari 3-8 */
  transform: scale(1.05); 
}
img.rotate:hover {
 
  -ms-transform: rotate(15deg); /* IE 9 */
  transform: rotate(15deg);
}
span.shake:hover , img.shake:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.validator{ font-size:12px;
    color:Red;}
/*Animate*/

    .section {
      display: flex;
      align-items: center;
      justify-content: center;
    /*  padding: 80px 40px;
      min-height: 100vh;*/
      transition: all 1s ease;
      opacity: 0;
    }

    .section.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .section:nth-child(even) {
      flex-direction: row-reverse;
      background-color: #f4f4f4;
    }

    .text, .image {
      flex: 1;
      padding: 30px;
    }

    .text h2 {
      font-size: 32px;
      margin-bottom: 20px;
    }

    .text p {
      font-size: 18px;
      line-height: 1.6;
    }

    .image img {
      width: 100%;
    /*  max-width: 500px;*/
      border-radius: 10px;
    }

    /* Fade In Animation */
    .section {
      transform: translateY(40px);
    }

/*Animate*/