@font-face {
   font-family: 'mb';
   src: url('https://pod-saving.s3-ap-southeast-1.amazonaws.com/gogetter-assets/montserrat_bold.otf');
}

@font-face {
   font-family: 'mr';
   src: url('https://pod-saving.s3-ap-southeast-1.amazonaws.com/gogetter-assets/montserrat_regular.otf');
}

@font-face {
   font-family: 'ml';
   src: url('https://pod-saving.s3-ap-southeast-1.amazonaws.com/gogetter-assets/montserrat_light.otf');  
}

body{

	alignment-baseline: central;
	height: auto;
	width: auto;
}

h1 {
	color: #59c2b6;
	font-family: 'mb';
}

h2 {

	color: #59c2b6;
	font-family: 'mr';
}

h3 {
	font-size: 16px;
	font-family: 'mr';
	color: #59c2b6;
}

h4 {
	font-family: 'mr';
	color: black;
}

h5 {

	font-family: 'mr';
	color: black;
}

input {

	outline: none;
	color: black;
	border:none

}

input, select, textarea{
    color: #000;
}

textarea:focus, input:focus {
    color: #000;
}

.pod-input {

	color: grey;
	height: 40px;
	width: 100%;
	font-family: 'mr';
	font-size: 18px;
  /*position: fixed;*/
  padding-bottom: 10px;

}

.main-content{
	
	padding: 5%;
}

/*

.pod-button:before {
  border: none;
  padding: 12px 18px;
  font-size: 16px;
  width: 90%;
  cursor: pointer;
  color: white;
  box-shadow: 0 0 10px #999;
  outline: none;
  border-radius: 10px;
  font-family: 'mr';
  background-image: linear-gradient(90deg, #3776BB, #22a7cd , #59c2b6);

  background-position: center;
  transition: background 0.8s;

}
*/

.pod-button {
  border: none;
  padding: 12px 18px;
  font-size: 16px;
  width: 90%;
  cursor: pointer;
  color: white;
  box-shadow: 0 0 10px #999;
  outline: none;
  border-radius: 10px;
  font-family: 'mr';
  background-image: linear-gradient(90deg, #3776BB, #22a7cd , #59c2b6);

  background-position: center;
  transition: background 0.8s;


  &:hover {
    background: darken($color--primary, 5%) radial-gradient(circle, transparent 1%, darken($color--primary, 5%) 1%) center/15000%;
  }
  
  &:active {
    background-color: darken($color--primary, 10%);
    background-size: 100%;
    transition: background 0s;
  }
}


/*.ripple {
}*/
/*

.pod-button:hover, .pod-button:focus {
  background: #56c2b5 radial-gradient(circle, transparent 1%, #56c2b5 1%) center/15000%;
}
.pod-button:active {
  background-color: #3ca3c2;
  background-size: 100%;
  transition: background 0s;
}
*/





.btn-2 {
  
  border-radius: 10px;
  position: relative;

  display: block;
  padding: 0;

  overflow: hidden;
  width: 100%;
  border-width: 0;
  outline: none;
  background-color: rgba(86,194,181, 0.3);
  color: #000000;
  transition: background-color .3s;
  font-family: 'mb';
  font-size: 8px;

}

.btn-2:hover, .btn-2:focus {
	border-radius: 10px;
  	background-color: rgba(86,194,181, 1.0);
  	color: #fff;
}

.btn-2 {
	border-radius: 10px;
  	position: relative;
  	font-family: 'mb';
  	font-size: 8px;
}

.btn-2 span {
	border-radius: 10px;
	  display: block;
	  padding: 10px;
	  font-family: 'mb';
	  font-size: 10px;
}

.btn-2:before {

	font-family: 'mb';
  font-size: 8px;

  content: "";
  
  position: absolute;
  top: 50%;
  left: 50%;
  
  display: block;
  width: 0;
  padding-top: 0;

  border-radius: 10px;
  
  background-color: rgba(236, 240, 241, .3);
  
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.btn-2:active:before {
	border-radius: 10px;
  width: 120%;
  padding-top: 120%;
  
  transition: width .2s ease-out, padding-top .2s ease-out;
}

.grid-container {
  width: 25%;
  height: 25%;
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 5px;
}
.grid-item {
  padding: 5px;
  text-align: center;
}