@media screen and (min-width: 200px){


	*{
		padding: 0;
		margin: 0;
		list-style-type: none;

	}

	html{
		font-family: arial, helvetica, sans-serif;
	}




	body{
		color: rgb(220, 220, 220);;
        background-color: rgb(30, 30, 55);
	}



	.body_overlay{
		bottom: 0; top: 0; left: 0; right: 0;	
		z-index: 3;
		width: 100%;
		opacity: 0;
		display: none;
		background-color: black;
		position: absolute;
	}




	main{
		padding-bottom: 20px;
	}



	main > img{
		left: 50%;
		transform: translateX(-50%);
		display: block;
		margin-top: 60px;
		animation: fade 4s forwards;
		width: 90%;
		position: absolute;
	}
	


	 .logo {
		padding-left: calc(5% + 10px);
		margin-top: 3px;
	}

	.logo img {
		height: 70px;
		width: 70px;
	}




            

	


	.site_logo_in_login{
		font-size: 1.6rem;
		font-family: 'Montserrat', sans-serif;
		color: rgb(20, 170, 30);
		margin: 17px 0 20px calc(5% - 2px);
		padding-left: -webkit-calc(5% - 2px);
	    padding-left: -moz-calc(5% - 2px);
	    padding-left: -ms-calc(5% - 2px);
		text-align: left;
		width: 90%;
	}

	.site_logo_in_login i{
		font-size: 2.3rem;
	}

	.site_logo_in_login span{
		color: rgb(190, 30, 30);
	}

	form{
		position: relative;
		background-color: rgba(0, 0, 20, 0.35);
		padding: 20px 0 70px 0;
		width: 90%;
		height: 350px;
		margin: auto;
		margin-top: 40px;
		border-radius: 8px;
	}

	.password_section, .email_section{
		width: 100%;
		position: absolute;
		top: 80px;
	}




	 form input, form select{
		box-sizing: border-box;
		height: 60px;
		font-size: 1.3rem;
		border-radius: 7px;
		margin: 20px auto 0 auto;
		background-color: rgba(0, 0, 0, 0.5);
		border: 1px solid white;
		color: white;
		width: 80%;
		padding: 0 10px 0 20px;
	}


	form *{
		display: block;
	}


	.input.input.email{
		margin-top: 40px;
	}





	form select{
		margin: 40px 0 auto calc(10% - 2.5px);
		margin-left: -webkit-calc(10% - 2.5px);
	    margin-left: -moz-calc(10% - 2.5px);
	    margin-left: -ms-calc(10% - 2.5px);
		width: 180px;
	}

	

	.error{
		font-size: 1.2rem;
		color: red;
		width: 80%;
		margin: 3px auto 0 auto;
	}

	.fName, .lName, .password, .rePassword{
		margin-top: 15px;
	}


	button{
		display: block;
		border-radius: 7px;
		width: 80%;
		margin: auto;
		margin-top: 30px;
		padding: 15px 0;
		border: none;
		font-size: 1.4rem;
		color: white;
		background-color: rgb(1, 87, 121);
	}


	.next_button{
		width: 80px;
		box-sizing: content-box;
		margin-top: 35px;
		margin-right: 10%;
		padding: 12px 10px;
		background-color: rgb(0, 80, 170);
	}


	.no_account{
		font-size: 1.5rem;
		text-align: center;
		margin-top: 60px;
	}




	.loginButton{
		width: 80%;
		color: white;
        background-color: rgb(145, 90, 1);
		margin-top: 10px;
		margin-bottom: 30px;
	}


}








@media screen and (min-width: 250px){

	html{
		font-size: 9px;
	}





	input, select{
		height: 35px;
	}

}





@media screen and (min-width: 300px){

	html{
		font-size: 10px;
	}





	input, select{
		height: 38px;
	}
}







@media screen and (min-width: 350px){

	html{
		font-size: 11px;
	}

	



	input, select{
		height: 50px;
	}


	button{
		padding: 20px 0;
	}


}









@media screen and (min-width: 500px){
	main{
		max-width: 500px;
		margin: auto;
		margin-top: 30px;
	}



	form{
		box-shadow: 0 0 7px  0 rgb(170, 170, 170);
		margin-top: 10px;
	}

}












@media screen and (min-width: 750px){

	

	body{
		background-image: url('/desktophome.jpg');
		background-size: cover;
		background-repeat: no-repeat;
	}



	body::before {
	  background: rgba(0, 0, 0, 0.5);
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  z-index: -1;
	}





	.no_account{
		color: white;
	}



}