*{
	margin:0px;
	padding:0px;
	box-sizing:border-box;
}
body{
	background:black;
}
#sbox{
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	height:0px;
	overflow:hidden;
	z-index:2;
	width:80%;
	background:rgba(0,0,0,0.80);
	
}

#sbox .col form{
	display:flex;
	padding:4px;
	min-width:600px;
}

#sbox .col form input{
	width:80%;
	border:1px solid rgba(250,230,190,0.80);
	text-align:center;
	font-weight:bold;
	border-radius: 18px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	background:transparent;
	outline:none;
	color:#FAE6BE;
}

#sbox .col form button{
	padding:8px 18px;
	
	text-align:center;
	
	transition: background 0.3s linear 0.1s, color 0.3s linear 0.1s, font-weight 0.3s linear 0.1s;
	box-shadow:0px 0px 9px 1px rgba(255,0,0,0.60);
	border-top-right-radius:18px;
	border-bottom-right-radius:18px;
	cursor:pointer;
	font-weight:600;
	background:rgba(250,230,190,0.80);
	color:red;
	border:none;
}

#sbox .col form button:hover{
	background: red;
	color: #FAE6BE;
	font-weight:600;
}


/* NavBar Styling  */
.navbar{
	position:fixed;
	top:50%;
	transform:translateY(-50%);
	overflow:hidden;
	display:block;
	height:0px;
}
@media only screen and (max-width: 470px){
	.navbar{
		position:fixed;
		top:70%;
		left:20%;
		transform:translate(-50%,-50%);
		overflow:hidden;
		height:0px;
		z-index:2;
	}
	.navbar >nav >ul>li>span{
		/* margin-right:20px; */
		padding:3px 6px;
		
		margin:4px auto;
		
	}
	.navbar >nav >ul,li{
		display:inline-block;
	}
	#sbox{
		
		top:32%;
		left:50%;
		transform:translate(-50%, -68%);
	}
	#sbox .col form{
		min-width:300px;
	}
}

.navbar > .propic{
	width:60px;
	height:60px;
	border-radius:50%;
	box-shadow: 1px 0px 4px 1px black;
}

.navbar > .propic img{
	width:100%;
	border-radius:50%;
	cursor:pointer;
	transition:transform 0.3s linear 0.1s;
}

.navbar > .propic img:hover{
	transform:rotate(30deg);
}
.navbar >nav{
	flex:1;
	text-align:center;
}
.navbar >nav >ul{
	list-style-type:none;
	display:block;
}
.navbar >nav >ul>li{
	display:block;
	font-weight:bold;
}
.navbar >nav >ul>li>span{
	/* margin-right:20px; */
	padding:6px 12px;
	border-radius:18px;

	cursor:pointer;
	transition: background 0.2s  linear 0.1s, color 0.2s  linear 0.1s;
	
	margin:8px auto;
	text-align:center;
	
	transition: background 0.3s linear 0.1s, color 0.3s linear 0.1s, font-weight 0.3s linear 0.1s;
	box-shadow:0px 0px 9px 1px red;
	
	font-weight:600;
	background:#FAE6BE;
	color:red;
	border:none;
	
}

.navbar >nav >ul>li>span img{
	width:30px;
	height:30px;
}

.navbar >nav >ul>li>span > a > img{
	width:30px;
	height:30px;
}
.navbar >nav >ul>li>span:hover{
	background: red;
	color: black;
	font-weight:600;
}

#msg{
	display:none;
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	z-index:1000;
	background:rgba(250,230,190,0.80);
	border:2px solid red;
	border-radius:4px;
	padding:10px;
	color:black;
	font-weight:bolder;
	font-size:18px;
}

#msg > h1{
	font-size:19px;
}

.row{
	display:flex;
	align-items:center;
	justify-content:center;
}
.col{
	max-width:600px;
	flex-basis:100%;
}
/* .col > form{
	display:flex;
} */
/* .col > form > button{
	padding:8px 18px;
	
	margin:26px auto;
	text-align:center;
	
	transition: background 0.3s linear 0.1s, color 0.3s linear 0.1s, font-weight 0.3s linear 0.1s;
	box-shadow:0px 0px 9px 1px red;
	border-radius:19px;
	cursor:pointer;
	font-weight:600;
	background:black;
	color:red;
	border:none;
} */
.col > form > button:hover{
	background: red;
	color: black;
	font-weight:600;
	
}
/* .col > form >input{
	width:80%;
	padding:9px 18px;
	border:1px solid black;
	text-align:center;
	font-weight:bold;
	border-radius: 20px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	font-size: 19px;
	outline:none;
} */

.menu_contents{
	position:fixed;
	margin:0px auto;
	min-width:300px;
	bottom:0px;
	top:100%;
	left:50%;
	transform:translate(-50%,-100%);
	background:transparent;
	height:0px;
	overflow:hidden;
	z-index:2;
	border-radius:24px;
}
.menu_contents > p{
	padding:6px 12px;
	border-radius:18px;
	font-size:14px;
	cursor:pointer;
	transition: background 0.2s  linear 0.1s, color 0.2s  linear 0.1s;
	
	margin: 8px auto;
	text-align:center;
	
	transition: background 0.3s linear 0.1s, color 0.3s linear 0.1s, font-weight 0.3s linear 0.1s;
	box-shadow:0px 0px 9px 1px rgba(255,0,0,0.60);
	
	font-weight:600;
	background:rgba(250,230,190,0.80);
	color:red;
	border:none;
}


.menu_contents > p:hover{
	
	background: red;
	color: #FAE6BE;
	font-weight:600;
}

.menu_contents > .mcls{
	position:relative;
	width:25px;
	height:25px;
	cursor:pointer;
	border:1px solid black;
	border-radius:50%;
	background:black;
}
.menu_contents > .mcls >h1{
	font-size:20px;
	color:red;
}
.menubtn{
	/* border:2px solid black; */
	width:50px;
	height:50px;
	position:fixed;
	bottom:0px;
	padding:5px;
	cursor:pointer;
}
.menubtn > #one,#two,#three{
	position:relative;
	width:100%;
	border:3px solid #FAE6BE;
	margin:6px auto;
	transition:transform 0.1s ease-in-out 0.2s;
}
<!------ this is what am working on at the moment ------>
.suscrb{
	
}

.row2{
	display:flex;
	justify-content: space-around;
	align-items:center;
	align-content:center;
	position:relative;
	top:30vh;
	margin: 0px auto;
	max-width:80%;
}
.row2 >nav{
	flex:1;
	text-align:center;
	margin:10px auto;
}
.row2 >nav > ul,li{
	list-style-type:none;
	display:inline-block;
	font-weight:900;
}
.row2 >nav > ul>li>span{
	margin-right:9px;
	border:1px solid black;
	padding:5px 30px;
	border-radius:18px;
	font-size:19px;
	cursor:pointer;
	transition: background 0.2s  linear 0.1s, color 0.2s  linear 0.1s;
}
.col_2{
	flex-basis:50%; 
	width:450px;
	/*border:1px solid black;  */
	height:400px;
	padding:25px;
}
/* Media Query for suscribe or login forms */
@media only screen and (max-width:470px){
	.row2{
		justify-content:space-around;
	}
	.col_2{
		flex-basis:100%; 
		width:100%;
		padding:0px;
	}
	.main{
		flex:1;
	}
}

/* End of Media Query for suscribe or login forms */
.col_2_reset{
	width:100%;
	/*border:1px solid black;  */
	height:400px;
	margin-top:23px;	
	padding:0px 30px;
}
.col_2 >div{
	display:none;
}
.col_2 > #jst{
	transition:transform .6s ease-in-out .2s;
	transform:translateX(180px);
}
.col_2 > #er{
	transition:transform .3s ease-in-out .2s;
	transform:translateX(-90px);
}
.col_2 > #membr{
	transition:transform .3s ease-in-out .2s;
	transform:translateY(90px);
}



.col_2 >div >h1{
	font-size:90px;
	text-align:center;
	color: #FAE6BE;
	text-shadow: 0px 3px 16px red;
	
}
.col_2 >div >h2{
	font-size:45px;
	line-height:60px;
	text-align:center;
	color: #FAE6BE;
	text-shadow: 0px 3px 16px red;
	
	
}
.col_2 >div >h3{
	font-size:55px;
	text-align:center;
	line-height:60px;
	color: #FAE6BE;
	text-shadow: 0px 3px 16px red;
}
.col_2 >div >h4{
	font-size:123px;
	text-align:center;
	line-height:89px;
	color: #FAE6BE;
	text-shadow: 0px 3px 16px red;
}
.col_2 >div >button{
	margin:26px auto;
	text-align:center;
	
	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;
	background:#FAE6BE;
	color:red;
	border:none;
	cursor:pointer;
}

.col_2 >div >button:hover{
	background: red;
	color: #FAE6BE;
	font-weight:600;
	cursor:pointer;
}

#sform > div > h1,h2,h3,h4{
	color: #FAE6BE;
	text-shadow: 0px 3px 16px red;
	
}

#sform > div > h4{
	margin-bottom:18px;
	
}

/* #sform > div > input{
	width:100%;
	text-align:center;
	padding:10px 30px;
	font-weight:600;
	border-radius:9px;
	border:none;
	background:transparent;
	border-right:3px solid red;
	border-left:3px solid red;
	font-weight:600;
	outline:none;
	color:#FAE6BE;
	
}
#sform > div>button{
	background:green; 
	
	margin:22px auto;
	transition: background 0.3s linear 0.1s, color 0.3s linear 0.1s, font-weight 0.3s linear 0.1s;
	padding:8px 22px;
	box-shadow:0px 0px 9px 1px red;
	border-radius:19px;
	cursor:pointer;
	font-weight:600;
	background:#FAE6BE;
	color:red;
	border:none;
}

#sform > div>button:hover{
	background: red;
	color: #FAE6BE;
	font-weight:600;
	cursor:pointer;
}*/

/* MEDIA Query FOR SMALLER SCREENS 

@media only screen and (max-width: 470px){
	#sform{
		width:98%;
	}
	
	#sform > div >h1{
		font-size:40px;
	}
	
	#sform > #tgmu >h2{
		font-size:26px;
		line-height:20px;
	}
	
	#sform > div >h3{
		font-size:20px;
	}
	#sform > div >h4{
		font-size:60px;
		line-height:40px;
	}
	
	#sform > div >#pk2h1{
		
		font-size:60px;
		line-height:60px;
	}
	#sform > div >#pk2h2{
		font-size:20px;
		line-height:20px;
	}
	#sform > div >#pk2h3{
		font-size:26px;
		
	}
	#sform > #cmt >h3{
		font-size:18px;
		
	}
	
}*/


/* ---------------Update styling  --------------- */



/* ---------------New Account changes  --------------- */
#sform > div > input{
	width:100%;
	text-align:center;
	padding:8px 12px;
	font-weight:600;
	border-radius:9px;
	border:none;
	background:transparent;
	border-right:3px solid red;
	border-left:3px solid red;
	font-weight:600;
	outline:none;
	color:#FAE6BE;
}

#sform > div > button{
	
	text-align:center;
	margin:26px auto;
	transition: background 0.3s linear 0.1s, color 0.3s linear 0.1s, font-weight 0.3s linear 0.1s;
	padding:8px 24px;
	box-shadow:0px 0px 9px 1px red;
	border-radius:19px;
	cursor:pointer;
	font-weight:600;
	background:#FAE6BE;
	color:red;
}

#sform > div > button:hover{
	background: red;
	color: #FAE6BE;
	font-weight:600;
	cursor:pointer;
}
#sform > div{
	margin:9px auto;
}

#sform > div p a{
	text-decoration:none;
	font-style:italic;
	color:red;
}
#sform > div >#pk2h1{
	text-align:center;
	font-size:123px;
	line-height:90px;
}
#sform > div >#pk2h2{
	font-size:29px;
	text-align:left;
	line-height:23px;
}
#sform > #pk2{
	/* opacity:0; */
}
#sform > #cmt{
	transform:translateX(190px);
	transition:transform 0.6s ease-in-out 0.3s;
}
#sform > #mshp{
	transform:translateX(-190px);
	transition:transform 0.6s ease-in-out 0.3s;
}
#sform > div >#pk2h3{
	font-size:36px;
	text-align:right;
	line-height:23px;
}
#sform > #sus{
	transition:transform 0.6s ease-in-out 0.3s;
	transform:translateX(90px);
}
#sform > #pk{
	transition:transform 0.6s ease-in-out 0.3s;
	transform:translateX(-90px);
}
#sform > div{
	margin-top:9px;
	position:relative;
	/* top:-30px; */ /* must turn this on */
}
#sform > div >h1{
	font-size:60px;
}
#sform > div >h2{
	text-align:center;
	font-size:36px;
	line-height:10px;
}
#sform > div >h3{
	text-align:left;
	font-size:25px;
	
}
#sform > div >h4{
	text-align:center;
	font-size:123px;
	line-height:90px;
}

@media only screen and (max-width: 470px){
	.col_2 #sform{
		width:100%;
		padding:0px;
	}
	
	#sform > #pk >h4{
		font-size:50px;
		line-height:40px;
	}
	#sform > #tgmu >h2{
		font-size:20px;
	}
	#sform > #frm >h3{
		font-size:20px;
	}
	
	#sform > #sus >h1{
		font-size:50px;
		line-height:40px;
	}
	#sform > div >#pk2h1{
		font-size:50px;
		line-height:40px;
	}
	#sform > div >#pk2h2{
		font-size:20px;
		line-height:19px;
	}
	#sform > div >#pk2h3{
		font-size:20px;
		line-height:19px;
	}
}

/* ---------------Dynamic View all BusinessTypes --------------- */
#dynbox{
	position:relative;
	top:30vh;
	height:0px;
	overflow:hidden;
	
	background:rgba(0,0,0,0.60);
	z-index:1;
	/* 
	
	
	 */
}
#dymcview{
	display:block;
	/* border:1px dashed black; */
	box-shadow: 0px 2px 0px 2px rgba(0,0,0,0.60);
	margin: 9px auto;
	border-radius:9px;
	color:#FAE6BE;
	transition: transform 0.2s ease-in 0.1s, color 0.2s  linear 0.2s;
}

#dymcview #prdut h3{
	position:relative;
	color: #FAE6BE;
	text-shadow: none;
}


#dymcview:hover{
	transform:translateY(-6px);
	background:rgba(250,230,190,0.80);
	color:black;
}
#dymcview > #lgo{
	width:100px;
	height:50px;
	margin-right:4px;
}


#dymcview > #prdut{
	text-align:center;
	
}

#dymcview > #prdut:hover{
	
	
}

#dymcview > #prdut > p >span{
	font-weight:600;
}
#dymcview > div>a{
	position:relative;
	/*top:35%;
	text-decoration:none;
	 border:1px solid black; */
	padding:5px 30px;
	border-radius:18px;
	font-size:18px;
	cursor:pointer;
	font-weight:600;
	transition: background 0.1s  linear 0.1s, color 0.2s  linear 0.2s;
}
/*Dynamic img*/
#dymcview > div>a>img{
	width:40px;
	
}
#dymcview{
	
}

/* ---------------Delivery Details  styling  --------------- */
div>#sum{
		z-index:3000;
		position:absolute;
		width:690px;
		left:50%;
		top:50%;
		transform:translate(-50%,-50%);
}
div >#denav{
	display:flex;
	align-items:center;
	padding:6px;
	border-radius:6px;
	transition:transform 0.2s ease-in 0.1s;
	box-shadow: 0px 1px 2px 2px rgba(0,0,0,0.60);
	margin:9px auto;
}
div>#denav:hover{
	transform:translateY(-6px);
}
div>#denav > #img{
	
	width:60px;
	height:60px;
	border-radius:50%;
}
div>#img > img{
	width:100%;
	border-radius:50%;
}
div>#denav >nav{

}
div>#denav >nav>ul,li{
	display:inline-block;
	margin-right:9px;
}
div>#denav > nav > ul>li{
	font-weight:600;
	padding:6px;
}

div>#idcta,span,hr{
	display:inline-block;
}

div>#idcta > #idcr{
	/* background:rgba(255,0,0,0.85); */
}
div>#idcta > #idcy{
	/* background:rgba(255,236,49,0.85); */
}
div>#idcta > #idcg{
	/* background:rgba(105,195,59,0.85); */
}
div>#idcta > #idcr,#idcy,#idcg{
	width:30px;
	height:30px;
	border:1px solid black;
	border-radius:50%;
	box-shadow:0px 0px 0px 3px rgba(0,0,0,0.60);
}
div>#idcta > #hr1,#hr2{
	width:297px;
	position:relative;
	top:-9px;
	height:6px;
	border-radius:3px;
	background:rgba(0,0,0,0.60);
}

div>#idcta > #hr11{
	width:160px;
	opacity:0;
}
div>#idcta > #hr22{
	width:190px;
	opacity:0;
}

div>#idcta > #ids1,#ids2,#ids3{
	font-weight:600;
	
}
div>#dedtls > h4{
	margin:0;
	padding:3px;
}

/* ---------------Contact Us  styling  --------------- */
.ctrbox{
	
}
.ctrbox > span{
	border-right:1px solid black;
	border-left:1px solid black;
	padding:3px 19px;
	cursor:pointer;
	/* background: rgba(0,0,0,0.30); */
	font-size:18px;
	transition:transform 0.3s;
}

.ctrbox > span:hover{
	/* border-right:1px solid black;
	border-left:1px solid black;
	padding:3px 19px;
	cursor:pointer;
	background: rgba(0,0,0,0.30); 
	font-size:18px; */
	transform:translateX(-3px);
}
.admchatbox{
	display:none;
}
.previewbox{
	position:absolute;
	/* border:2px solid green; */
	top:50%;
	left:15%;
	transform:translate(-50%,-50%);
	width:300px;
	height:600px;
	display:block;
	padding:20px;
	border-radius:3px;
}

.previewbox p{
	margin: 9px 12px;
	border:1px solid black;
	padding:12px 16px;
	border-radius:3px;
	cursor:pointer;
	transition:transform 0.1s background 0.6s;
}

.previewbox p:hover{
	margin: 9px 12px;
	border:1px solid black;
	padding:12px 16px;
	border-radius:3px;
	cursor:pointer;
	transform:translateX(3px);
	background:rgba(0,128,0, 0.69);
}

.previewbox p a{
	text-decoration:none;
	font-weight:600;
	color:black;
	
	
}
.chatus{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	/* border:2px solid black; */
}

.chatus .chatrespbox{
	position:relative;
	width:600px;
	height:400px;
	overflow-x:hidden;
	overflow-y:scroll;
}

.chatus .chatrespbox .admbox{
	position:relative;
	width:90%;
	float:left;
	background:rgba(0,255,0,0.50);
	border-radius:0px 3px 3px 3px;
	margin-bottom:9px;
}
.chatus .chatrespbox .admbox p{
	font-weight:600;
}

.chatus .chatrespbox .clibox{
	position:relative;
	width:90%;
	background:rgba(0,0,255,0.50);
	border-radius:3px 0px 3px 3px;
	float:right;
	margin-bottom:6px;
}
.chatus .chatrespbox .clibox p{
	font-weight:600;
}
.chatus .formbox{
	padding:3px 0px;
}

.chatus .formbox form{
	width:600px;
	
}
.chatus .formbox form textarea{
	width:100%;
	font-weight:bold;
	margin-top:3px;
}
::placeholder{
	text-align:center;
}
.rply{

}
.admchatbox .botbox{
	position:absolute;
	right:5%;
	top:50%;
	transform:translate(-50%, -50%);
	width:300px;
	height:600px;
	display:block;
	padding:12px;
	border-radius:3px;
	border:1px solid black;
	
}

.admchatbox .botbox form{
	position:relative;
	top:22px;
}

.admchatbox .botbox form p input,select{
	width:100%;
	margin:9px auto;
	padding:9px 6px;
	border:1px solid black;
	font-size:16px;
}

.admchatbox .botbox form p a{
	position:relative;
	top:18px;
	text-decoration:none;
	color:green;
	font-weight:bold;
	padding:6px 39px;
	border:1px solid black;
}

.admchatbox .botbox .check_status{
	text-decoration:none;
	font-size:18px;
	font-weight:bold;
}


/* profilebox Styling */
.main .profilebox{
	display:none;
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	/* min-width:300px;  this setting is for smaller screen
	min-height:400px; */
	box-shadow:0px 0px 9px 1px red;
	background:rgba(255,0,0,0.60);
	border-radius:9px;
	z-index:2;
}

.main .profilebox .clsbtn{
	position:absolute;
	right:3%;
	top:3%;
	font-weight:600;
	font-size:20px;
	line-height:28px;
	border-radius:50%;
	width:30px;
	height:30px;
	border:1px solid black;
	color:snow;
	background:black;
	cursor:pointer;
	transition: color 0.3s linear 0.1s;
}

.main .profilebox .clsbtn:hover{
	color:red;
	
}

.main > .profilebox > .pic{
	width:100px;
	height:100px;
	border-radius:50%;
	margin: 5% auto;
	box-shadow:1px 2px 6px 2px white;
}

.main > .profilebox > .pic img{
	width:100%;
	border-radius:50%;
}

.main > .profilebox > .pic span{
	position:relative;
	font-size:18px;
	font-family:verdana;
	font-weight:900;
	margin-bottom:8px;
}

.main > .profilebox  > .prodetails{
	/* position:relative;
	top: 10%;
	left:20%;
	text-align: left; */
	font-family:verdana;
}

.main > .profilebox  > .prodetails div{
	position:relative;
	top:5px;
	font-size:19px;
	padding:5px;
}
.main > .profilebox  > .prodetails div span form input[type="file"]{
	font-family:verdana;
	cursor:pointer;
	font-size:14px;
	width:60%;
}

.main > .profilebox  > .prodetails div span form input[type="button"]{
	padding:4px 12px;
	font-size:12px;
	font-family:verdana;
	cursor:pointer;
	border:none;
	box-shadow:1px 1px 3px 1px black;
	border-radius:18px;
	font-weight:600;
	background:black;
	color:red;
	transition:background 0.3s linear 0.1s, color 0.3s linear 0.1s;
}
.main > .profilebox  > .prodetails div span form input[type="button"]:hover{
	background:red;
	color:black;
	
}

.main > .profilebox  > .prodetails div span form input[type="submit"]:hover{
	background:black;
	color:snow;
}
.main > .profilebox  > .prodetails div span{
	font-weight:600;
}

@media only screen and (max-width: 470px){
	.main .profilebox{
		min-width:300px;
		padding:12px;
		z-index:1000;
	}
	.main > .profilebox  > .prodetails div{
		position:relative;
		top:12px;
		font-size:16px;
		padding:0px;
	}
}