body {
	font-family: "Lato" ,"Gotham Narrow A", "Gotham Narrow B", sans-serif;
	font-size: 14px;
	font-size: normal;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
}

.section-main{
	padding:16px;
}



/*resets*/

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

img {
	max-width: 100%;
}

/*TODO: CONSIDER MOVING ALERTS LATER*/
/* 
alerts used here are parts of bootstrap
and they are used to show errors or sucess.

THIS IS DIFFRENT FROM alert-box which is used
to show that a subscription is not activated in 
add and update user.

used in:
add-user/index.html
admin/add-distributor
admin/application
admin/serial-number
disributer/email
update-user
profile.html
admin-info*/
.alert{
	padding: unset; 
    border: unset;
	padding: 16px;
	border-radius: 6px;
	margin-bottom:6px;
	display: block;
	/*
	display:block;
	visibility: hidden; */
	/* position: absolute;
    right: 36%;
    top: -100px;
	width:400px; */
}

.show{
	/* visibility: visible;
	-webkit-animation: fadein 1s forwards, fadeout 6s 1.5s ease-out;
	animation: fadein 1s forwards, fadeout 6s 1.5s ease-out; */
	display: block !important;
}
  
  @-webkit-keyframes fadein {
	from {top: -100px; opacity: 0;} 
	to {top: 30px; opacity: 1;}
  }
  
  @keyframes fadein {
	from {top: -100px; opacity: 0;}
	to {top: 30px; opacity: 1;}
  }
  
  @-webkit-keyframes fadeout {
	from {top: 30px; opacity: 1;} 
	to {top: -100px; opacity: 0;}
  }
  
  @keyframes fadeout {
	from {top: 30px; opacity: 1;}
	to {top: 0; opacity: 0;}
  }

@keyframes slidein {
	from {
	  top: -100px
	}
  
	to {
	  top: 25px;
	  animation-play-state: paused;
	}
  }

@media all and (max-width: 480px) {
	.section-main{
		padding:16px;
	}
	
}