textarea,select,input,button{outline: none; margin:none;}
ul{list-style: none;margin:0;padding:0;}
li{margin:0;padding:0;}


@font-face{
	font-family: Roboto-Regular;
	src: url('/assets/fonts/Roboto-Regular.ttf');
	}
@font-face{
	font-family: Roboto-Black;
	src: url('/assets/fonts/Roboto-Black.ttf');
	}
@font-face{
	font-family: Roboto-BlackItalic;
	src: url('/assets/fonts/Roboto-BlackItalic.ttf');
	}


.fa-spin {
	-webkit-animation: fa-spin 0.75s infinite linear !important;
	animation: fa-spin 0.75s infinite linear !important;
	}
	



	
@media all{
	body{
		display: block;
		background-color:#254071;

		background-image:url("/assets/media/bg5.webp");
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size:cover;
		background-attachment:fixed;
		background-repeat:no-repeat;
		background-position: center; 
		
		margin:0;
		padding:0;
		text-align:center;
		font-family: Roboto-Regular;
		font-size:14pt;
		color:#313131;

		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		}

	
	#overlay{
	opacity: 0;
	transition: 0.50s;
	z-index: 2;
	position: fixed;
	top:0;
	left:0;
	width:100vw;
	//height:100vh;
	min-height:100vh;
	//background-color:#ffffff;
	background-color:#000000;
	}
	
	
	#msgbar{
		opacity: 0;
		transition: 0.50s;
		z-index: 3;
		cursor:pointer;
		position:fixed;
		max-width:30%;
		padding:20px;
		background-color:#FE560C;
		border-radius: 10px;
		border:4px solid #ffffff;
		background-color:#ffffff;
		}
	#msgbar i{
		display:block;
		font-size:30pt;
		margin-bottom:15px;
		}
	#msgbar button{
		cursor:pointer;
		display:inline-block;
		margin:25px auto 10px auto;
		padding:5px 20px;
		background-color:inherit;
		border:2px solid #ffffff;
		border-radius:100px;
		text-decoration:none;
		color:#ffffff;
		min-width:30%;
		}
	#msgbar button:hover{
		background-color:rgba(255,255,255,0.4);
		}
	
	
	
	
		
		
	#box{
		display:block;
		
		#max-width:400px;
		min-width:500px;
		max-height:90%;
		
		margin:0;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		
  		padding:25px;
		background-color:#ffffff;
		border:4px solid #ffffff;
		border-radius: 11px;
		color:#737D7D;
		#box-shadow: 0px 0px 25px 5px #c0c0c0;
		}

	#box #domeinhub{
		position:relative;		
		margin:auto;
		width:310px;
		height:80px;
		}
	#box #domeinhub h1{
		position:absolute;
		margin:0;
		padding:0;
		top:0;
		right:0;
		font-size:46pt;
		font-family: Roboto-BlackItalic;
		letter-spacing:-2px;
		color:#FF5C35;
		}
	#box #domeinhub h2{
		position:absolute;
		margin:0;
		padding:0;
		bottom:0;
		right:0;
		font-size:14pt;
		color:#858585;
		}

	#box #tekoop{
		max-width:85%;
		margin:auto;
		}
	#box #tekoop h1{
		font-family: Roboto-Black;
		text-transform: uppercase;
		margin:35px 0 0 0;
		padding:0;
		color:#ffffff;
		background-color:#FF5C35;
		}
	#box #tekoop p{
		font-family: Roboto-Black;
		margin:0;
		padding:3px;
		font-size:18pt;
		letter-spacing:5px;
		text-transform: uppercase;
		}

	#box .buynowtxt{
		margin:25px auto;
		}

	#box .h2base{
		margin:25px auto;
		max-width:350px;
		}
	#box hr{
		margin:25px auto 25px auto;
		padding:0;
		height:3px;
		border:none;
		width:85%;
		background-color:#FF5C35;
		}
	#box p{
		max-width:460px;
		margin:auto;
		padding:0;
		font-size:12pt;
		}
	#box a, #box a:hover{
		color:inherit;
		}
	#box ul{
		max-width:400px;
		margin:10px auto;
		}
	#box ul li{
		line-height:150%;
		text-align:left;
		letter-spacing:-0.5px;
		}
	#box ul li:before{
		content: "\00BB\00a0";
		}

	#box .dlist{
		overflow: auto;
		display: flex;
		flex-direction: row;	
		}
	#box .dlist ul{
		margin:0 25px;
		}
	#box .dlist ul li{
		}
	#box .dlist ul li:before{
		content: none;
		}
	#box .dlist ul li a{		
		text-decoration:none;
		}
		
	#box div.agreed{
		max-width:400px;
		margin:25px auto;
		text-align:left;
		letter-spacing:-0.5px;
		}
	#box div.agreed input[type=checkbox],#box div.agreed .checked{
		display:none; 
		}
	#box div.agreed input[type=checkbox]:checked ~ .checked{
		display: inline-block;
		} 
	#box div.agreed input[type=checkbox]:checked ~ .unchecked{
		display:none;
		}
	#box div.agreed label{
		margin-left:10px;
		}
	
	
	


	#box #footer{
		font-size:8pt;
		}


		
	button{
		cursor:pointer;
		display:inline-block;
		padding:7px 0px;
		background-color:inherit;
		border:2px solid #FF5C35;
		border-radius:100px;
		text-decoration:none;
		color:#FF5C35;
		width:60%;
		text-transform: uppercase;
		vertical-align:middle;
		line-height:22px;
		font-weight:bold;
		}
	button:hover,button:focus{
		background-color:#FF5C35;#rgba(255,255,255,0.25);
		color:#ffffff;
		#border-color:#ffffff;
		}
		
	.FormButton{
		width: 40%;
		margin:25px 5px auto 5px;
		}
	.FormButton i{
		//margin-right:10px;
		margin:0 10px 0 0;
		font-size:1.5em;
		}


		

	.formbox{ 
		position:relative;
		margin:25px auto;
		display: block;
		background-color: #ffffff;
		border: 1px solid #575757;
		border-radius: 4px;
		padding:15px 3px 3px 3px;
		}
	.formbox.invalid{ 
		border-color: #ff0000;
		}
	.formbox:focus-within{
		background-color: #FFFDCC;
		border-color:#D6A71A;
		}
	.formbox label{
		position:absolute;
		top:3px;
		left:10px;
		display: block;
		float: left;
		padding:0;
		//height: 15px;
		font-size: 14px;
		//overflow: hidden;
		color:#A4A4A4;
		border-radius: 4px;
		font-style: italic;
		}
	.formbox label.invalid{
		color:#ff0000;
		}
	.formbox textarea,input[type=text],input[type=password]{
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		display: block;
		width: calc(100% - 24px);
		margin:0 12px 0 12px;
		font-size: 16px;
		height: 25px;
		line-height: 25px;
		background-color: transparent;
		color: #575757;
		border:0;
		}
	.formbox textarea{
		height:100px;
		}
		
		
	.formbid{ 
		position:relative;
		margin:25px auto;
		display: block;
		background-color: #ffffff;
		border: 1px solid #575757;
		border-radius: 4px;
		max-width:300px;
		height:43px;
		}
	.formbid.invalid{ 
		border-color: #ff0000;
		}
	.formbid:focus-within{
		background-color: #FFFDCC;
		border-color:#D6A71A;
		}
	.formbid label{
		position:absolute;
		top:5px;
		left:10px;
		display: block;
		float: left;
		padding:0;
		font-size: 25px;
		font-weight: bold;
		color:#000000;
		}
	.formbid label.invalid{
		color:#ff0000;
		}
	.formbid input[type=number]{
		position:absolute;
		top:8px;
		display: block;

		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		display: block;
		width: calc(100% - 24px);
		font-size: 25px;
		font-weight: bold;
		height: 25px;
		line-height: 25px;
		background-color: transparent;
		color: #000000;
		border:0;
		text-align:right;
		vertical-align:middle;
		}

}
@media all and (max-width: 600px) {
	
	body{
		background-image:none;
		background-color:initial;
		}
		
		
	#msgbar{
		max-width:85%;
		padding:10px;
		border-radius: 5px;
		border-width:2px;
		}
	
	#box{
		position: relative;
		left: 0;
		top: 0;
		transform: none;
		width:96%;
		max-width:96%;
		min-width:0;
		padding:5% 2% 5% 2%;
		margin:0 auto 0 auto;
		border:none;
		border-radius: 0;
		}


	#box #domeinhub{
		width:240px;
		height:70px;
		}
	#box #domeinhub h1{
		font-size:36pt;
		}

	#box #tekoop h1{
		font-size:18pt;
		}
	#box #tekoop p{
		font-size:14pt;
		}

	#box ul li,#box div.agreed{
		font-size:12pt;
		}


	button{
		padding:4px 0px;
		}


	.FormButton{
		display:block;
		margin:40px auto;
		width:75%;
		max-width:250px;
		}

}