* {
	font-family: 'Roboto', sans-serif;
}
html, body {
	
}

section#demo {
	background: white;
    position: relative;
    padding: 0;
    min-height: 10vh;
    transition: height 9999s;
}
.vertical-align {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	left: 75%;
	width: 10%;
	display:none;

}
.card {
	background: rgb(250, 250, 250);
    box-shadow: 13px 13px 28px 2px rgba(0, 0, 0, 0.035);
    padding: 0px 0px;
	width: 300px;
	border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
	background-color:white;
	
}



@media (max-width: 1167px) {
  .vertical-align {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	left: 70%;
	width: 10%;

}
    }


@media (max-width: 1067px) {
  .vertical-align {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	left: 65%;
	width: 10%;

}
    }

@media (max-width: 967px) {
  .vertical-align {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	left: 63%;
	width: 10%;

}
    }

	@media (max-width: 867px) {
		.vertical-align {
		  position: fixed;
		  top: 50%;
		  transform: translateY(-50%);
		  left: 58%;
		  width: 10%;
	  
	  }
		  }



		  @media (max-width: 767px) {
			.vertical-align {
			  position: fixed;
			  top: 50%;
			  transform: translateY(-50%);
			  left: 50%;
			  width: 10%;
		  
		  }
			  }


			  @media (max-width: 667px) {
				.vertical-align {
				  position: fixed;
				  top: 50%;
				  transform: translateY(-50%);
				  left: 44%;
				  width: 10%;
			  
			  }
				  }

				  @media (max-width: 567px) {
					.vertical-align {
					  position: fixed;
					  top: 50%;
					  transform: translateY(-50%);
					  left: 38%;
					  width: 10%;
				  
				  }
					  }

					  @media (max-width: 507px) {
						.vertical-align {
						  position: fixed;
						  top: 50%;
						  transform: translateY(-50%);
						  left: 34%;
						  width: 10%;
					  
					  }
						  }

						  @media (max-width: 487px) {
							.vertical-align {
							  position: fixed;
							  top: 50%;
							  transform: translateY(-50%);
							  left: 30%;
							  width: 10%;
						  
						  }
							  }

							  @media (max-width: 467px) {
								.vertical-align {
								  position: fixed;
								  top: 50%;
								  transform: translateY(-50%);
								  left: 22%;
								  width: 10%;
							  
							  }
								  }
				

								  @media (max-width: 407px) {
									.vertical-align {
									  position: fixed;
									  top: 50%;
									  transform: translateY(-50%);
									  left: 15%;
									  width: 10%;
								  
								  }
									  }
			
		
									  @media (max-width: 375px) {
										.vertical-align {
										  position: fixed;
										  top: 50%;
										  transform: translateY(-50%);
										  left: 7%;
										  width: 10%;
									  
									  }
										  }
				
	
			 


									  .alert {
										padding: 20px;	
                                        background: linear-gradient(rgb(1, 141, 255) , rgb(1, 204, 255));
										color: white;
								    	position:relative;
									    position: fixed;
									    top: 92%;
										border-radius: 10px;
			                            transform: translateY(-50%);
									    left: 10px;
										 width: 30%;
										 display: none;
																		  
									}
									
								
									
									.closebtn {
										margin-left: 15px;
										color: white;
										font-weight: bold;
										float: right;
										font-size: 22px;
										line-height: 20px;
										cursor: pointer;
									}
									
									
									.closebtn:hover {
										color: black;
									}



									@media (max-width: 957px) {
										.alert{
											top: 87%;
										}
									  
									  }
										  
									  @media (max-width: 497px) {
										.alert{
											top: 84%;
											width: 40%;
										}
									  
									  }