* {
     margin: 0;
     padding: 0;
 }
 /* ----- fonts css ----- */
 
 @font-face {
     font-family: 'montserrat';
     font-weight: normal;
     font-style: normal;
     src: url(../fonts/montserrat.regular.ttf);
 }
 
 @font-face {
     font-family: 'Rubik-Bold';
     font-weight: normal;
     font-style: normal;
     src: url(../fonts/Rubik-Bold.ttf);
 }
 
 @font-face {
     font-family: 'Rubik-Medium';
     font-weight: normal;
     font-style: normal;
     src: url(../fonts/Rubik-Medium.ttf);
 }
 
 @font-face {
     font-family: 'Rubik-Light';
     font-weight: normal;
     font-style: normal;
     src: url(../fonts/Rubik-Light.ttf);
 }
 
 @font-face {
     font-family: 'Rubik-Regular';
     font-weight: normal;
     font-style: normal;
     src: url(../fonts/Rubik-Regular.ttf);
 }
 /* ----- /fonts css ----- */
 /* ----- animation css ----- */
 
 .slideanim {
     visibility: hidden;
 }
 
 .slide {
     animation-name: slide;
     -webkit-animation-name: slide;
     animation-duration: 1s;
     -webkit-animation-duration: 1s;
     visibility: visible;
 }
 
 @keyframes slide {
     0% {
         opacity: 0;
         transform: translateY(70%);
     }
     100% {
         opacity: 1;
         transform: translateY(0%);
     }
 }
 
 @-webkit-keyframes slide {
     0% {
         opacity: 0;
         -webkit-transform: translateY(70%);
     }
     100% {
         opacity: 1;
         -webkit-transform: translateY(0%);
     }
 }
 /* ----- /animation css ----- */
 
 body {
     background: #fff;
     padding: 0px !important;
     font-family: 'Rubik-Regular';
 }
 
 @media only screen and (max-width: 768px) {
     .slideanim {
         visibility: visible;
     }
     .slide {
         animation-name: none;
         -webkit-animation-name: none;
     }
 }