*{
	margin:0px;
	padding:0px;
	box-sizing:border-box;
	
}
.mainbox{
	width:100%;
	height:100vh;
	background-image: linear-gradient(105deg, rgba(196,106,72,0.90), rgba(14,28,40,0.90));
	align-content:center;
	justify-content: space-around;
	display:block;
}
.mainbox .regbox{
	display:flex;
	
}
.mainbox .regbox > .col{
	min-width:35%;
	flex-basis:50%;
	border:2px dashed black;
	padding:50px;
}
.mainbox .regbox > .col form{
	width:450px;
	border:1px solid black;
	border-radius:6px;
	padding:9px;
	
}
.mainbox .regbox > .col form input, button{
	width:100%;
	padding:6px 16px;
	text-align:center;
	margin:9px auto;
}
.mainbox #msg{
	
	height:0px;
	overflow:hidden;
} 
body{
	/* background:linear-gradient(96deg, rgba(0,0,0,0.75), rgba(0,0,68,0.75)); */
}
.navbar{
	display:flex;

}

.navbar .menuicon{
	background:#C5FFFF;
	width:40px;
	height:40px;
	border-radius:4px;
	display:none;
}

.navbar .menuicon img{
	width:100%;
	border-radius:4px;
}

/* .navbar .clsbtn{
	display:block;
} */



.navbar nav{
	flex:1;
	text-align:right;
	padding:20px;
	
}

.navbar nav ul, li{
	display:inline-block;
	list-style-type:none;
}

.navbar nav ul li .clsbtn{
	display:none;
}

.navbar nav ul li a{
	text-decoration:none;
	 font-weight:bolder;
	 margin-right: 25px;
	 padding:4px 12px;
	
	 color:black;
	 transition: background 0.1s ease-in,
				border-radius 0.4s ease-in,
				color 0.4s ease-in,
				width 0.2s ease-in,
				border ease-in 0.6s;
}

/* .navbar nav ul li a{
	
} */

/* Curren changes */
.navbar nav ul li a:hover{
	position:relative;
	background: rgba(0,0,0,1);
	border-left:12px solid #FFD334;
	color:#FFD334;
	border-radius: 3px;
}

.navbar .logo{
	width:80px;
}
.navbar .logo img{
	width:100%;
}


.displaybox{
	display:none;
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:100%;
	height:100vh;
	background:rgba(0,0,0,0.80);
	text-align:center;
	z-index:1;
}
.displaybox nav{
	flex:1;
	text-align:center;
	padding:20px;
	
}
.displaybox nav ul, li{
	display:inline-block;
	list-style-type:none;
}
.displaybox nav ul li a{
	text-decoration:none;
	 font-weight:bolder;
	 margin-top: 25px;
	 padding:12px 4px;
	font-size:2.0rem;
	 color:#FFD334;
	 transition: background 0.1s ease-in,
				border-radius 0.4s ease-in,
				color 0.4s ease-in,
				width 0.2s ease-in,
				border ease-in 0.6s;
}
.displaybox nav ul li a:hover{
	position:relative;
	background: rgba(0,0,0,1);
	border-left:12px solid #FFD334;
	color:#FFD334;
	border-radius: 3px;
}

/* @media (width >= 600px){
	.navbar nav{
		display:block;
	}
} */
@media only screen and (max-device-width: 470px){
	
	.displaybox nav ul, li{
		display:block;
		margin:50px; auto;
	}
	.displaybox nav ul li .clsbtn{
		display:block;
	}
	
	.navbar nav ul li a{
		position:relative;
		
		font-weight:bolder;
		font-size:1.6rem;
		color:#FFD334;
	} 

}
.catmsg{
	height:0px;
	overflow:hidden;
	background:rgba(0,0,68,0.90);
}

.catmsg > .row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
}

.catmsg > .row .col{
	flex-basis:25%;
	text-align:center;
	padding: 9px 21px;
	font-weight:600;
	letter-spacing:6px;
	Color:snow;
	cursor:pointer;
	font-size:1.3rem;
	transition: background 0.1s ease-in, 
				border-radius 0.4s ease-in,
				border ease-in 0.6s;
}

.catmsg > .row .col:hover{
	background: rgba(0,128,0,0.75);
	border-left:9px solid snow;
	Color:snow;
	border-radius: 3px;
}

.banner{
	padding: 0px 3%;
	height:100vh;
	background:rgba(255,211,52,1);
	
}

.banner > .row{
	display:flex;
	align-content:space-between;
	flex-wrap:wrap;
	align-items:center;
}

.banner > .row >.col{
	flex-basis:48%;
	min-width:250px;
}

.banner > .row >.col > .imgbox{
	position:relative;
	width:500px;
	height:500px;
	border:none;
}

.banner > .row >.col > .imgbox img{
	width:100%;
}

.banner > .row .col p{
	position:relative;
	margin-top: 25px;
	color:black;
	font-weight:600;
	
}

.banner > .row .col button{
	color:black;
	margin:2% auto;
	width:60%;
	background:transparent;
	font-weight:800;
	letter-spacing:3px;
	font-size:18px;
	
	cursor:pointer;
	border:2px solid black;
	transition: background 0.1s ease-in,
				border-radius 0.4s ease-in,
				width 0.2s ease, 
				border ease-in 0.6s;
}

.banner > .row .col button:hover{
	position:relative;
	width:40vw;
	background: rgba(0,0,0,0.85);
	border-left:12px solid snow;
	Color:#FFD334;
	border-radius: 3px;
}

.banner > .row .col hr{
	position:relative;
	margin:9px auto;
	border:6px solid rgba(0,0,0,0.85);
	border-radius:8px;
}

.banner > .row .col img{
	width:100%;
}

.banner > .row .col h2{
	color:black;
	font-weight:bolder;
	font-size: 4.6rem;
	letter-spacing:4px;
	text-shadow: 1px 9x 6px rgba(0,0,0,0.85);
	
	/* transform:rotate(36deg); */
}


.field{
	/* background:linear-gradient(296deg, rgba(0,128,0,0.85), rgba(0,0,68,0.85)); 
	padding:1.9% 0px;*/
	background:white;
}



.field fieldset{
	width:75vw;
	padding:60px;
	margin:1.3% auto;
	border-radius:9px;
	box-shadow:1px 2px 2px 1px rgba(0,0,0,0.60);
	/* background:linear-gradient(290deg, rgba(255,255,255,0.18), rgba(255,255,255,0.18)); */
	
	background:rgba(255,255,255,1);
	color:black;
}

.field fieldset legend{
	
}

.field fieldset legend img{
	width:70px;
	height:70px;
	border-radius:50%;
}
.field fieldset .outdata .img img{
	width:100%;
	margin:9px auto;
	border-radius:9px;
}

.field fieldset .outdata p{
	font-family:arial;
	font-weight:530;
	font-size: 0.9rem;
}

.field fieldset .outdata i{
	font-weight:600;
	font-size:1.1rem;
}

.field fieldset .outdata .author{
	font-weight:700;
	font-size:1.3rem;
}

/* out Data Color */
.field fieldset .outdata .cdata, .rcdata, .rrcdata{
	padding:10px;
	border-left:4px solid #FFD334;
	margin:6px auto;
	/* background:rgba(255,255,255,0.10); */
	
}

.field fieldset .outdata .countui span img{
	width:15px;
	height:15px;
	cursor:pointer;
}

.field fieldset .outdata hr{
	margin: 9px auto;
	height:2px;
	background:rgba(0,0,0,0.75);
	/* border-radius:3px; */
}

.field fieldset .outdata .countui .cmtc{
	cursor:pointer;
}

.field fieldset .outdata .btns span img{
	width:29px;
}
.field fieldset .outdata .btns .convbox{
	overflow:inherit;
	/* border:2px solid black; */
	padding:3%;
}
.field fieldset .outdata .btns .convbox .pcmt .clike, .creply{
	margin-right: 4%;
	cursor:pointer;
}
.field fieldset .outdata .btns .convbox .rcmt{
	position:relative;
	left:10%;
	max-width:90%;
	
}
/* CURRENT NOW NOW */
.field fieldset .outdata .btns .convbox .rcmt .rdiv2{
	height:0px;
	overflow:hidden;
	
}
.field fieldset .outdata .btns .convbox .rcmt .rdiv2 form{
	margin:6px auto;
	display:flex;
	flex-wrap:wrap;
	padding:9px;
	
}

.field fieldset .outdata .btns .convbox .rcmt .rdiv2 form textarea{
	padding:6px 9px;
	border-radius:6px;
	margin-right:1%;
	width:60%;
	
}

.field fieldset .outdata .btns .convbox .rcmt .rdiv2 form span{
	position:relative;
	top:15px;
	justify-content:center;
	margin-left:4%;
	cursor:pointer;
	
}
.field fieldset .outdata .btns .convbox .rcmt .rclike, .rcreply{
	margin-right: 4%;
	cursor:pointer;
	
}
/* CURRENT WORKING NOW  */
.field fieldset .outdata .btns .convbox .rrcmt{
	position:relative;
	left:20%;
	max-width:80%;
	height:0px;
	overflow:hidden;
}

.field fieldset .outdata .btns .convbox .rrcmt .rrcmtlike, .rrcmtreply{
	margin-right: 4%;
	cursor:pointer;
	
}

.field fieldset .outdata .btns .lik, .cmt, .shr{
	
	margin-right:6%;
	cursor:pointer;
}

.field fieldset .outdata .btns .cmtbx{
	height:0px;
	overflow:hidden;
}

.field fieldset .outdata .btns .cmtbx form{
	margin:6px auto;
	display:flex;
	flex-wrap:wrap;
	padding:9px;
}
.field fieldset .outdata .btns .cmtbx form textarea{
	padding:6px 9px;
	border-radius:6px;
	margin-right:1%;
	width:60%;
	/* height:20%; */
}
/* BLOG LIKE */
.field fieldset .outdata .btns .lik .tup{
	transition:transform 0.3s ease-in-out 0.2s;
	
	
}
/* COMMENT BLOG LIKE */
.field fieldset .outdata .btns .convbox .pcmt .clike .ctup{
	transition:transform 0.3s ease-in-out 0.2s;
	
	
}

.field fieldset .outdata .btns .convbox .pcmt .rdiv, .rbox{
	
	height:0px;
	overflow:scroll;
}

.field fieldset .outdata .btns .convbox .pcmt .rdiv form{
	margin:6px auto;
	display:flex;
	flex-wrap:wrap;
	padding:9px auto;
}

.field fieldset .outdata .btns .convbox .pcmt .rdiv textarea{
	padding:6px 9px;
	border-radius:6px;
	margin-right:1%;
	width:60%;
}

.field fieldset .outdata .btns .convbox .pcmt .rdiv form span{
	position:relative;
	top:15px;
	justify-content:center;
	margin-left:4%;
	cursor:pointer;
}

.field fieldset .outdata .btns .cmtbx form span{
	position:relative;
	top:15px;
	justify-content:center;
	margin-left:4%;
	cursor:pointer;
}
.suscribe{
	display:none;
	position:fixed;
	top:0px;
	left:0px;
	right:0px;
	height:100%;
	background:rgba(0,0,0,0.95);
	/* background:rgba(0,0,68,0.93); */
	/* background:linear-gradient(296deg, rgba(0,128,0,0.96), rgba(0,0,68,0.96)); */
	
}

.suscribe .outmsg{
	height:0px;
	overflow:hidden;
}
.suscribe .stitle{
	position:fixed;
	border-radius:9px;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	background:#FFD334;
	box-shadow: 0px 0px 9px 1px rgba(0,0,0,0.90);
	padding:2%;
}

.suscribe .stitle .clsbtn span{
	font-size:20px;
	cursor:pointer;
}

.suscribe .stitle img{
	transform:rotate(0deg);
	transition:transform 0.3s ease-in-out 0.5s;
}

.suscribe .stitle h1{
	font-family:cursive;
	font-size:3rem;
	line-height:66px;
	text-shadow: 3px 6px 3px rgba(0,0,0,0.70);
	transition:transform 0.5s ease-in 0.9s;
	letter-spacing:9px;
	color:black;
}

.suscribe .stitle h2{
	font-family:cursive;
	font-size:3rem;
	line-height:50px;
	text-shadow: 0px 0px 3px rgba(0,0,0,0.80);
	transition:transform 0.5s ease-in 0.9s;
	letter-spacing:9px;
	color:black;
}

.suscribe .stitle .one{
	transform:translateX(-160px);
}

.suscribe .stitle .two{
	transform:translateX(160px);
}
.suscribe .stitle fieldset{
	margin:1.5vh auto;
	border-radius:9px;
	padding:10px;
	width:36vw;
	border:2px solid black;
}

.suscribe legend{
	position:relative;
	margin-left:12px;
	font-family:cursive;
	font-weight:800;
	color:black;
}

.suscribe .stitle fieldset input{
	width:100%;
	padding:9px;
	margin:9px auto;
	background:transparent;
	color:black;
	border:1px solid black;
	font-size:18px;
	border-radius:4px;
	outline:none;
}

.suscribe .stitle fieldset button{
	width:69%;
	margin:3% auto;
	border:none;
	font-weight:600;
	font-size:18px;
	padding:2.5%;
	border-radius:2px;
	cursor:pointer;
	color:black;
	background:transparent;
	
	transition: background 0.1s ease-in, 
				border-radius 0.4s ease-in,
				padding 0.2s ease,
				border 0.2s ease,
				width 0.25s ease-in,			
				border ease-in 0.6s;
}

.suscribe .stitle fieldset button:hover{
	padding:2.5%;
	background: rgba(0,0,0,1);
	border-left:9px solid white;
	color:#FFD334;
	border-radius: 4px;
	width:93%;
}


/*.suscribe .stitle fieldset .lgbtn{

	display:flex;
	padding:6px 12px;
}

.suscribe .stitle fieldset .lgbtn span{
	position:relative;
	top:6px;
	margin-left:15%;
	font-weight:600;
	color:black;
	font-size:1.6rem;
	letter-spacing:10px;
	text-shadow:0px 0px 4px black;
	cursor:pointer;
}

.suscribe .stitle fieldset .lgbtn img{
	width:35px;
	margin-left:10%;
	transform:rotate(180deg);
	background:transparent;
	border-radius:50%;
	color:red;
}

.suscribe .stitle fieldset .lgbtn img:hover{
	 transform:rotate(360deg); 
}
*/
@media only screen and (max-device-width: 470px){
	.suscribe .stitle{
		padding:10%;
		width:100%;
	}
	
	.suscribe .stitle fieldset{
		padding:12px;
		width:100%;
	}
}

.upnext{
	
	background:rgba(0,0,68,0.90);
	color:snow;
}

.upnext  > .row{
	display:flex;
	align-content:center;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	/* padding:9%; */
}

.upnext  > .row .col{
	flex-basis:33%;
	min-width:33%;
	/* border:1px solid green; */
}

.upnext  > .row .col > h2{
	font-size:9vw;
	text-align:center;
	line-height:120px;
}

.upnext  > .row .col > h3{
	font-size:3vw;
	text-align:center;
}

.upnext  > .row .col > h4{
	font-size:1.6vw;
	text-align:center;
	margin:1%;
}
.upnext  > .row .col > h5{
	font-size:0.9vw;
	text-align:center;
	margin:3% auto;
}
.upnext  > .row .col > p{
	text-align:center;
	margin:1.6%;
}

.upnext  > .row .col > hr{
	height:6px;
	background:green;
	border:none;
}
.upnext  > .row .col img{
	width:100%;
	
}

/* FOOTER OUTPUT  */
.fout{
	background:rgba(0,0,68,0.90);
	display:none;
	position:absolute;
	width:100%;
	height:100%;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	color:snow;
}

.fout h2{
	position:relative;
	text-align:center;
	letter-spacing:6px;
	font-family:cursive;
	font-size:6vw;
}

.fout nav{
	background:rgba(255,255,255,0.09);
	position:relative;
	width:60%;
	height:40%;
	top:19%;
	left:50%;
	transform:translate(-50%, -50%);
	border-radius:12px;
	box-shadow: 1px 1px 0px 1px rgba(255,255,255,0.29);
	padding:3%;
}
.fout nav .row{
	position:relative;
	align-content:center;
	display:flex;
	align-items:center;
}
.fout nav .row .col{
	flex-basis:100%;
}

.fout nav .row .col h3{
	text-align:center;
	font-size:26px;
}

.fout nav ul li{
	margin:3% auto;
	font-weight:600;
	font-size:19px;
}


/* FOOTER  */
.footer{
	width:100%;
	background:rgba(0,0,68,0.90);
	color:white;
	padding:50px;
	height:20vh;
}

.footer .row{
	display:flex;
	flex-wrap:wrap;
	align-contents:center;
	align-items:center;
}

.footer .row .col{
	flex-basis:20%;
	max-width:450px;
	font-weight:600;
	line-height:20px;
	letter-spacing:1px;
	cursor:pointer;
	text-align:center;
	transition: background 0.1s ease-in, 
				border-radius 0.4s ease-in,
				padding 0.2s ease, 
				border ease-in 0.6s; /* padding and background testing only  */
}
.footer .row .col:hover{
	padding:2.5%;
	background: rgba(0,128,0,0.75);
	border-left:9px solid snow;
	Color:black;
	border-radius: 3px;
	/*   */
}



.navdisbox{
	position:fixed;
	height:0px;
	overflow:hidden;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	border:10px solid black;
}

@media only screen and (max-device-width: 470px){
	.navbar nav{
		
		display:none;
	}
	
	.navbar .menuicon{
		display:block;
		position:absolute;
		margin:25px;
		right:0px;
	}
	
	.field fieldset{
		width:100%;
		padding:4%;
		margin:0px auto;
	}
	.banner > .row .col h2{
		/* line-height:20px; */
		font-size:3.6rem;
		text-align:center;
	}
	.banner > .row >.col > .imgbox{
		position:relative;
		width:100%;
		
	}
	.banner > .row .col{
		flex-basis:100%;
		padding:0px;
	}
	
	.banner > .row .col hr{
		border:6px solid rgba(0,128,0,0.85)
	}
	
	.banner > .row .col img{
		padding:0px;
		
	}
	
	.banner > .row .col button{
		padding:2%;
		font-weight:500;
		width:100%;
		
	}
	.footer{
		padding:0px;
		margin:0px;
	}
	.footer .row{
		/* flex:1; */
	}
	.footer .row .col h2{
	width:100vw;
	display:block;
	text-align:center;
	cursor:pointer;
	padding:6px auto;
	}
}