*{
	margin:0;
	padding:0;
	box-sizing: border-box;
}
#create{

	margin:10px;
	transition: background 0.3s linear 0.1s, color 0.3s linear 0.1s, font-weight 0.3s linear 0.1s;
	padding:9px 35px;
	box-shadow:0px 0px 9px 1px red;
	border-radius:19px;
	cursor:pointer;
	font-weight:600;
	border:1px solid red;
	background:black;
	color:red;
}

#create:hover{
	background: red;
	color: black;
	font-weight:600;

}
.maincontainer{
	width:100%;
	height:100vh;
	background:black;
}
.ctr{
	max-width: 50%;
	margin: 0px auto;
}
#ctrid{
	position:relative;
	bottom: -390px;
	height:0px;
	overflow:hidden;
	transition:bottom ease-in-out 0.9s 0.6s; 
}

#ctrid span{
	font-weight:600;
	color:red;
}

#ctrid h1{
	color:#FAE6BE;
	text-shadow:1px 0px 6px red;
}
#ctrid  > input, select{
	border-radius:9px;
	outline:none;
	margin:6px auto;
	width:50%;
	height:35px;
	font-size:18px;
	text-align:center;
	color:red;
	border:none;
	background:transparent;
	border-right:3px solid red;
	border-left:3px solid red;
	font-weight:600;
}
.registration{
	position:relative;
	bottom:-50%;
	border:1px solid black;
	
	overflow:hidden;
	transition: bottom ease-in-out 0.5s 0.2s;
	/* height:0px; 
	background:linear-gradient(rgba(255,255,255, 0.85), rgba(0,0,0,0.85));*/
}
.registration button{
	background:black;
	transition: background 0.6s linear 0.3s;
	padding:9px 35px;
	box-shadow:0px 0px 9px 1px red;
	border-radius:18px;
	cursor:pointer;
	font-weight:600;
	color:red;
	border:1px solid red;
}

.registration > .or{
	position:relative;
	color:red;
	font-weight:bolder;
	padding:10px;
	border-radius:50%;
	line-height:15px;
	background:#fff;
	box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.75);
}
@media only screen and (min-width:300px){
	.ctr{
		max-width: 96%;
	}
	#ctrid  > input, select{
		width:100%;
	}
}

@media only screen and (min-width:630px){
	.ctr{
		max-width: 93%;
	}
	#ctrid  > input, select{
		
		width:50%;
	}
}
		
/* @media only screen and (max-width:768px){
	
} */

@media only screen and (min-width:810px){
	.ctr{
		max-width: 83%;
	}
	#ctrid  > input, select{
		
		width:50%;
	}
	
}

@media only screen and (max-width:912px){
	
	
}