@import url(//fonts.googleapis.com/css?family=Roboto);

body {
	font-family: Roboto;
}

.wm-waves-img{
	position: absolute;
	margin-top: -120px;
	width: 100%;
	height: 120px;
	z-index: -1;
}

.wm-form-container{
	background: #fff;
	width: 100%;
	margin-top: 350px;
	height: 500px;
}

.wm-form{
	margin-top: -230px;
	background: #fff;
}

.video-play-button{
    position: absolute;
    top: 220px;
    cursor: pointer;
    margin-left:0px;
}

.video-play-button > img{
	height: 280px;

}

.fix-nav .mobile-toggler > i{
	color:#000;
}

.fix-nav button{
	color:#000;
}

.fix-nav .mad-button-login{
    color: #fff;
    text-shadow: 0px 1px 5px rgba(0,0,0,0.5);
    /*border: 1px solid #0091f0; */
}

.fix-nav .mad-button-login:hover{
    color: #fff;
    background: #ff9800!important;
}

.menu-alt {
	color: inherit!important;
}

.top-first{
	margin: 20px 0px 0px 0px;
}

.bottom-third{
	margin: 20px 0px 0px 0px;
}

.process-cards{	
	border-radius: 15px;
	box-shadow: 0 20px 60px 0 rgba(0, 0, 0, 0.1);
	background-color: #ffffff;
	padding: 50px 0px;
	height: 270px;
	position: relative;
	z-index: 1;
	margin-top: -70px;
}

.process-numbers{
	font-family: Roboto;
	font-size: 150px;
	font-weight: 500;
	line-height: 1.17;
	color: rgba(0, 145, 240, 0.1);
	position: relative;
	z-index: 0;
}

.mt-10{
	margin-top: 100px!important;
}
.mb-1{
	margin-bottom: 10px!important;
}
.process-cards{
	transition: 0.5s all ease-in-out;
	position: relative;
}
.process-cards:hover{
	transition: 0.5s all ease-in-out;
	position: relative;
	margin-top:-90px;
	background-color: #0091f0;
	color:#fff!important;
}

.paymentIcons{
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    opacity: 0.3;
    transition: 1s all ease-in-out;
}

.paymentIcons:hover{
	-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
    opacity: 1;
    transition: 0.1s all ease-in-out;
}


/*EXTRA SMALL SCREEN*/
@media (max-width: 360px) {
	
	.logo{
		height: 34px;
	}
}

@media (max-width: 767px) {

	.testimony-client {
	    position: initial!important;
    	margin-top: 30px;
	}

	.navbar{
		position: relative!important;
	}

	.wm-content-top{
	    background-position: 50% 100%!important;
	}

	.text-container > p{
		display: none;
	}

	.project-card-img:hover .text-container > i{
		opacity: 1!important;
	}

	.project-card-img:hover .text-container > p{
		margin-bottom: -140px!important;
		opacity: 0!important;
	}

	.testimony-card{
		width: 100%!important;
		height: fit-content!important;
		margin: 0px 0px 10px 0px!important;
	}

	.testimony-container > .container:nth-child(2){
		width: 100%;
	}

	.mobile-adjust{
		margin-top: -100px;
	}

	.video-content{
		visibility: hidden;
		width: 0px!important;
	}

	.video-content > #video{
		display: none;
	}

	.video-content > *{
		display: none;
	}

	.features-adjust{
		margin-top: 20px;
	}

	.supported-payments-container > .container:nth-child(1){
		display: none;
	}

	.projects-container > .container:nth-child(2){
		width: 100%;
	}
	.project-cards-container{
		margin: 50px -30px!important;
	}

	.project-cards-container > div:nth-child(1){
		padding-right: 0.5px;
	}

	.project-cards-container > div:nth-child(3){
		padding-right: 0.5px;
	}

	.project-cards-container > div:nth-child(5){
		padding-right: 0.5px;
	}

	.project-cards-container > div:nth-child(2){
		padding-left: 0.5px;
	}

	.project-cards-container > div:nth-child(4){
		padding-left: 0.5px;
	}

	.project-cards-container > div:nth-child(6){
		padding-left: 0.5px;
	}

	.project-card-img{
		width: 100%!important;
    	height: 200!important;
		border-radius: inherit!important;
	    margin-bottom: 1px!important;
	}

	.top-first{
		margin: inherit;
	}

	.top-second{
		margin: inherit;
	}

	.top-third{
		margin: inherit;
	}

	.bottom-first{
		margin: inherit;
	}

	.bottom-second{
		margin: inherit;
	}

	.bottom-third{
		margin: inherit;
	}
}

/*SMALL SCREEN*/
@media (min-width: 768px) {

	.wm-content{
		top:50px;
		position: relative;
	}

	.top-second{
	    margin: 95px 0px 0px -10px!important;
	}

	.top-third{
		margin: -55px 0px 0px 0px!important;
	}

	.bottom-first{
	    margin: 20px 0px 0px -10px!important;
	}

	.bottom-second{
        margin: -55px 0px 0px 0px!important;
	}

	.bottom-third{
	    margin: 20px 0px 0px -10px!important;
	}	

	.projects-container > .container:nth-child(2){
		width: 690px;
	}

	.testimony-container > .container:nth-child(2){
		width: 690px;
	}


}

/*MEDIUM SCREEN*/
@media (min-width: 992px) {

	.process-container > .container{
		width: 900px;
	}

	.features-container > .container{
		width: 800px;
	}

	.projects-container > .container:nth-child(2){
		width: 990px;
	}

	.testimony-container > .container:nth-child(2){
		width: 1020px;
	}

	.top-second{
		margin: 95px 0px 0px 0px!important;
	}

	.top-third{
		margin: 150px 0px 0px 0px!important;
	}

	.bottom-first{
		margin: -110px 0px 0px 0px!important;
	}

	.bottom-second{
	    margin: -35px 0px 0px 0px!important;
	}	

	.bottom-third{
	    margin: 20px 0px 0px 0px!important;
	}
}

@media (max-width: 991px) {

	.third-testimony{
		display: none;
	}
}

/*LARGE SCREEN*/
@media (min-width: 1200px) {

	.process-container > .container{
		width: 1000px;
	}

	.features-container > .container{
		width: 900px;
	}

	.footer-container > .container:nth-child(1){
		width: 970px;
	}	
}

.wm-content-top{
	margin: -10px 0px 0px 0px;
    background-image: url('assets/img/v3/Group 428_white.svg');
    background-size: 100%;
    background-repeat-y: no-repeat;
    background-repeat-x: repeat;
    background-position: 50% 100%;
}

.wm-footer-link{
	color: #fff;
}

.wm-footer-link:hover{
	color: #0091f0;
}

.top-side-bar{
    width: 100%;
    height: 85px;
    background-color: #2b2c35;
}

.hover{
    color: #0091f0!important;
    background: #fff!important;
}

.navbar-side-adjust{
	top: 84px!important;
	z-index: 9;
}

.fix-nav{
    position: fixed!important;
    z-index: 10;
    -webkit-box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.20);
    -moz-box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.20);
    box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.20);
    top: 0px!important;
    background-color: #ffffff;
    width: -webkit-fill-available;
    border-bottom: none!important;
}

@keyframes waves {
   0% {left: -100%;}
   100% {left: 0%;}
}

.payments-icons{
	width: fit-content;
}

.footer-container{
    background-color: #3d455a;
    color: #fff;
    padding: 35px 0px 20px 0px;
}

.testimony-cards-container{
	margin: 50px 0px;
}

.testimony-client{
    position: absolute;
    bottom: 30px;
    width: 100%;
    text-align: center;
    left: 0px;
}

.testimony-card{
    width: 280px;
    height: 300px;
    border-radius: 3px;
    margin: 0px 25px;
    padding: 30px;
    background-color: #ffffff;
    box-shadow: 0 20px 70px 0 rgba(0, 0, 0, 0.15);
    transition: 0.5s ease-in-out;
}

.testimony-card:hover{
	background: #0091f0;
    color: #fff;
    box-shadow: 0 9px 6px 0 rgba(0, 0, 0, 0.16);
}

.testimony-card .testimony-client > h4{
    transition: 0.5s ease-in-out;
}

.testimony-card:hover .testimony-client > h4{
    color: #fff;
}

.testimony{
	text-align: center;
	font-size: 16px;
	font-weight: 100;
}

.project-cards-container{
	margin: 50px 0px;
}

.project-cards-container > div > div:nth-child(2){
	margin-top: 23px;
}

.project-cards-container > div > div:nth-child(2) > img{
	top: 374px;
}

.project-card-img{
    width: 300px;
    height: 350px;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
}

.text-container{
	display: flex;
    flex-direction: column-reverse;
    padding: 20px;
    height: -webkit-fill-available;
}

/*.text-container > h4, i{
	text-align: start;
	z-index: 1;
	color: #fff;
}*/

.text-container > i{
	opacity: 1;
    transition: 0.5s ease-in-out;
}

.text-container > p{
	color: #fff;
	text-align: start;
    position: relative;
    margin-bottom: -140px;
 	opacity: 0;
    transition: 0.5s ease-in-out;
}

.project-card-img:hover .text-container > i{
	opacity: 0;
}

.project-card-img:hover .text-container > p{
	margin-bottom: 0px;
	opacity: 1;
}
	
.m-navbar{
    padding: 24px 0px;

    position: relative;
    min-height: 50px;
    margin-bottom: 30px;
}

.m-navbar-menu{
	color: #fff;
	line-height: 2.5;
}

.m-navbar-menu > li{
    margin: 0px 20px;
}

.video-content{
    background: #efefef;
    margin: 0px auto;
    width: 500px;
    border: 10px solid #fff;
    height: 300px;
    border-radius: 10px;

/*    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);*/
}

.video-frame-top{
	height: 15px;
    background: #fff;
    position: relative;
    top: -290px;
}

.video-frame-bottom{
	height: 15px;
    background: #fff;
    position: relative;
    top: -20px;
}

.video-frame-left{
	height: -webkit-fill-available;
    width: 15px;
    background: #fff;
    position: relative;
    left: -10px;
    top: -310px;
}

.video-frame-right{
	height: -webkit-fill-available;
    width: 15px;
    background: #fff;
    position: relative;
    left: 475px;
    top: -590px;
}

.supported-payments-container{
	padding: 20px 0px 0px 0px;
}

.supported-payments-container > .container:nth-child(1){
	width: 781px;
}

.banks-row>div{
	width: fit-content;
}

.banks-row>div>img{
	width: fit-content!important;
}


.features-container{
	padding: 50px 0px 0px 0px;
}

.projects-container{
	padding: 0px 0px 100px 0px;
}

.testimony-container{
	padding: 150px 0px 200px 0px;
}

.wm-feat-icons{
    width: 65px;
    height: 65px;
    margin-top: 10px;
    padding-top: 10px;
}


.wm-hr{
    width: 40px;
    border-width: 3px;
    border-color: #0091f0;
    margin-top: 8px;
}

.wm-preloader5 {
   display:inline-block;
   font-size:0px;
   padding:0px;
}
.wm-preloader5 span {
   vertical-align:middle;
   border-radius:100%;
   background:#000000;
   display:inline-block;
   width:15px;
   height:15px;
   margin:3px 2px;
   -webkit-animation:wm-preloader5 0.8s linear infinite alternate;
   animation:wm-preloader5 0.8s linear infinite alternate;
}
.wm-preloader5 span:nth-child(1) {
   -webkit-animation-delay:-0.8;
   animation-delay:-0.8s;
}
.wm-preloader5 span:nth-child(2) {
   -webkit-animation-delay:-0.53333s;
   animation-delay:-0.53333s;
}
.wm-preloader5 span:nth-child(3) {
   -webkit-animation-delay:-0.26666s;
   animation-delay:-0.26666s;
}
@keyframes wm-preloader5 {
   0% {
   	transform: scale(0, 0);
   	background-color: rgba(0, 145, 240, 0.11);
   }
   50% {
   	background-color: rgba(0, 145, 240, 0.48);
   }
   100% {
   	transform: scale(1, 1);
   	background-color: #0091f0;
   }
}
@-webkit-keyframes wm-preloader5 {
   0% {
   	-webkit-transform: scale(0, 0);
   	background-color: rgba(0, 145, 240, 0.11);
   }
   50% {
   	background-color: rgba(0, 145, 240, 0.48);
   }
   100% {
   	-webkit-transform: scale(1, 1);
   	background-color: #0091f0;
   }
}

/* MAD-RIPPLE EFFECT */
.ripple{
  position: absolute;
  top:0; left:0; bottom:0; right:0;
  overflow: hidden;
  -webkit-transform: translateZ(0); /* to contain zoomed ripple */
  transform: translateZ(0);
  border-radius: inherit; /* inherit from parent (rounded buttons etc) */
  pointer-events: none; /* allow user interaction */
          animation: ripple-shadow 0.4s forwards;
  -webkit-animation: ripple-shadow 0.4s forwards;
}
.rippleWave{
  backface-visibility: hidden;
  position: absolute;
  border-radius: 50%;
  transform: scale(0.7); -webkit-transform: scale(0.7);
  background: rgba(255,255,255, 1);
  opacity: 0.45;
          animation: ripple 2s forwards;
  -webkit-animation: ripple 2s forwards;
}
@keyframes ripple-shadow {
  0%   {box-shadow: 0 0 0 rgba(0,0,0,0.0);}
  20%  {box-shadow: 0 4px 16px rgba(0,0,0,0);}
  100% {box-shadow: 0 0 0 rgba(0,0,0,0.0);}
}
@-webkit-keyframes ripple-shadow {
  0%   {box-shadow: 0 0 0 rgba(0,0,0,0.0);}
  20%  {box-shadow: 0 4px 16px rgba(0,0,0,0);}
  100% {box-shadow: 0 0 0 rgba(0,0,0,0.0);}
}
@keyframes ripple {
  to {transform: scale(24); opacity:0;}
}
@-webkit-keyframes ripple {
  to {-webkit-transform: scale(24); opacity:0;}
}


/* MAD-BUTTONS (demo) */
[class*=mad-button-]{
  display:inline-block;
  text-align:center;
  position: relative;
  margin: 0;
  white-space: nowrap;
  vertical-align: middle;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  border: 0; outline: 0;
  background: none;
  transition: 0.3s;
  cursor: pointer;
}
[class*=mad-button-] i.material-icons{
  vertical-align:middle;
  padding:0;
}

.mad-button-raised{
    margin: 35px 0px;
	padding: 14px 60px;
	border-radius: 10px;
}

.mad-button-navbar{
	color: #fff;
    padding: 0px 15px;
    border-radius: 5px;
    text-transform: unset;
}

.mad-button-login{
    color: #fff;
    padding: 0px 30px;
    border-radius: 7px;
    text-transform: unset;
    background-color: #ffa750;
    text-shadow: 0px 1px 5px rgba(0,0,0,0.5);
}

.mad-button-login:hover{
    color: #fff;
    background: #ff9800;
}

.mad-button-navbar:hover{
    color: #0091f0;
    background: #fff;
}

.mad-button-action{
  width: 56px; height:56px;
  padding: 16px 0;
  border-radius: 32px;
  box-shadow: /*amb*/ 0 0   2px rgba(0,0,0,0.13),
    /*key*/ 0 5px 7px rgba(0,0,0,0.2);
}.mad-button-action:hover{
  box-shadow: /*amb*/ 0 0 2px rgba(0,0,0,0.15),
   /*key*/ 0 5px 3px rgba(0,0,0,0.25);
}
[class*=mad-button-].mad-ico-left  i.material-icons{ margin: 0 8px 0 -4px; }
[class*=mad-button-].mad-ico-right i.material-icons{ margin: 0 -4px 0 8px; }

/* MAD-COLORS */
.bg-primary-darker{background:#1976D2; color:#fff;}
.bg-primary{ background:#2196F3; color:#fff; }
.bg-primary.lighter{ background: #BBDEFB; color: rgba(0,0,0,0.82);}
.bg-accented{ background:#FF4081; color:#fff; }

.bg-custom{ background:#ffa750; color:#fff; }

/* MAD-CELL */

.cell{padding: 8px 16px; overflow:auto;}

.login-center-content {
	text-align: center;
    margin-top: 60px;
    width: 600px;
}

.login-center-content > h4 {
	color: #0091f0;
}

.login-center-content > p {
    font-size: 12px;
}
.floatBtnText{
	text-shadow: 0px 1px 5px rgba(0,0,0,0.5);
}


.CoreMachineContainer{
    width: 50%;
    background-color: #fff;
    position: absolute;
    top: 130px;
    left: 25%;
    border-radius: 10px;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
	padding:30px;
}

.perksContainer{
	border:1px solid #9b9ea7;
	padding:20px 10px 10px 10px;
	background-color: #fff;
}