.bplayer {	      
              display: block;
	      top:200;
	      left:0;
	      width:100%;
	      z-index:123;
	      padding-bottom:120px;	    
	    }





:root {
	--primary: rgba(54, 56, 223, 0.47);
	--secondary: rgba(252, 41, 74, 1.0);
	--shades: rgba(238, 238, 238, 1.0);
}

.clock {
	// font-size: 20px;
/* display: flex; */
}

.centered {
	display:grid;
	grid-gap: 30px;
	grid-auto-flow: column;
	justify-content: center;
	align-items:center;
	height: 100%;
}


.h2blue {
color: #056BBF;
	text-shadow: 
		-0   -1px 1px #0FFFFF,
		 0   -1px 1px #0FFFFF,
		-0    1px 1px #0FFFFF,
		 0    1px 1px #0FFFFF,
		-1px -0   1px #0FFFFF,
		 1px -0   1px #0FFFFF,
		-1px  0   1px #0FFFFF,
		 1px  0   1px #0FFFFF,
		-1px -1px 1px #0FFFFF,
		 1px -1px 1px #0FFFFF,
		-1px  1px 1px #0FFFFF,
		 1px  1px 1px #0FFFFF,
		-1px -1px 1px #0FFFFF,
		 1px -1px 1px #0FFFFF,
		-1px  1px 1px #0FFFFF,
		 1px  1px 1px #0FFFFF;

}


* {
	scroll-behavior: smooth;
}

body {
	font-family: 'Source Code Pro', monospace;
	line-height: 1.6;
	margin: 0;
}

.header,
.home,
.about,
.linkstream,
.contact 
{
height: 100vh;
}

.header,
.home,
.about,
.linkstream,
.contact,
.footer {
	position: relative;
}

.header h1,
.home h1,
.about h1,
.linkstream h1,
.contact h1,
.footer h1 {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.header h1::before,
.home h1::before,
.about h1::before,
.linkstream h1::before,
.contact h1::before,
.footer h1::before {
	content: '#';
}

.header h1,
.footer h1 {
	color: var(--shades);
}

.footer {
	height: 10vh;
	/* background-color: var(--primary); */
}

.header {
	background-color: var(--primary);
}

.navbar-header {
		float: left;
		padding: 0px;
		text-align: center;
		width: 100%;
	}

	.navbar-brand {
		float: none;
	}

.navbar {
	padding-top: .5em;
	padding-bottom: .5em;
	background-color: #007bff61;
	-webkit-box-shadow: 0 14px 14px -14px rgba(0, 0, 0, .75);
	-moz-box-shadow: 0 14px 14px -14px rgba(0, 0, 0, .75);
	box-shadow: 0 14px 14px -14px rgba(0, 0, 0, .75);
}

/*
.sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 1;
}
*/

.navbar-fixed {
    top: 0;
    z-index: 100;
  position: fixed;
    width: 100%;
}


.hidden {
	display: none;
}

.display__logo {
	font-size: 2.5rem;
	margin-bottom: .5rem;
	font-family: inherit;
	font-weight: 500;
	line-height: 1.2;
	color: inherit;
}

.nav__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav__link {
	color: var(--shades);
	text-decoration: none;
}

.brand {
	margin: 0;
	font-size: 1.45em;
}

.brand a {
	padding: 10px 15px;
	text-align: center;
	display: block;
}

.logo {
        font-family: 'Audiowide', cursive;
	display: inline-block;
	padding-top: .3125rem;
	padding-bottom: .3125rem;
	margin-right: 1rem;
	line-height: inherit;        
}

.logo::before {
	display: inline-block;
	vertical-align: top;
        background: url('img/rz24h_30x30.png') no-repeat;
        background-size: cover; 	
}

.nav__items {
	margin-top: 5px;

}

.brand .nav__link,
.nav__items .nav__link {
	padding: 10px 15px;
	text-align: center;
	display: block;
}

.nav__items .nav__link {
	color: var(--shades);
	font-size: 0.99rem;
}

.nav__items .nav__link:hover {
	color: var(--secondary);
color: #056BBF;
	text-shadow: 
		-0   -1px 1px #0FFFFF,
		 0   -1px 1px #0FFFFF,
		-0    1px 1px #0FFFFF,
		 0    1px 1px #0FFFFF,
		-1px -0   1px #0FFFFF,
		 1px -0   1px #0FFFFF,
		-1px  0   1px #0FFFFF,
		 1px  0   1px #0FFFFF,
		-1px -1px 1px #0FFFFF,
		 1px -1px 1px #0FFFFF,
		-1px  1px 1px #0FFFFF,
		 1px  1px 1px #0FFFFF,
		-1px -1px 1px #0FFFFF,
		 1px -1px 1px #0FFFFF,
		-1px  1px 1px #0FFFFF,
		 1px  1px 1px #0FFFFF;
}

.nav__item:nth-child(1) .nav__link::before {
	/* content: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'1. \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'; */
}

.nav__item:nth-child(2) .nav__link::before {
	/* content: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'2. \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'; */
}

.nav__item:nth-child(3) .nav__link::before {
	 /* content: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'3.  \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'; */
}

.nav__item:nth-child(4) .nav__link::before {
	/* content: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'4. \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'; */
}

@media (min-width: 800px) {

	.navbar,
	.nav__items {
		display: flex;
	}

	.navbar {
		flex-direction: column;
		align-items: center;
	}

	.navbar {
		flex-direction: row;
		justify-content: space-between;
	}
}

@media screen and (max-width: 799px) {
	.nav {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: -1;
		background-color: var(--primary);
		opacity: 0;
		transition: all 0.2s ease;
	}

	.nav .nav__items {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 100%;
		padding-inline-start: 0;
	}

	.nav .nav__items .nav__item {
		display: block;
		float: none;
		width: 100%;
		text-align: right;
		margin-bottom: 10px;
	}

	.nav .nav__items .nav__item:nth-child(1) a {
		transition-delay: 0.2s;
	}

	.nav .nav__items .nav__item:nth-child(2) a {
		transition-delay: 0.3s;
	}

	.nav .nav__items .nav__item:nth-child(3) a {
		transition-delay: 0.4s;
	}

	.nav .nav__items .nav__item:nth-child(4) a {
		transition-delay: 0.5s;
	}

	.nav .nav__items .nav__item:not(:first-child) {
		margin-left: 0;
	}

	.nav .nav__items .nav__item .nav__link {
		padding: 10px 25px;
		opacity: 0;
		color: var(--shades);
		font-size: 24px;
		font-weight: 600;
		transform: translateY(-20px);
		transition: all 0.2s ease;
	}

	.nav .nav__items .nav__item .nav__link:hover {
		color: var(--secondary);
	}

	.nav__open {
		position: absolute;
		right: 10px;
		top: 16px;
		display: block;
		width: 48px;
		height: 48px;
		cursor: pointer;
		z-index: 9999;
		border-radius: 50%;
	}

	.nav__open i {
		display: block;
		width: 20px;
		height: 2px;
		background-color: var(--secondary);
		border-radius: 2px;
		margin-left: 14px;
	}

	.nav__open i:nth-child(1) {
		margin-top: 16px;
	}

	.nav__open i:nth-child(2) {
		margin-top: 4px;
		opacity: 1;
	}

	.nav__open i:nth-child(3) {
		margin-top: 4px;
	}

}


#nav:checked+.nav__open {
	transform: rotate(45deg);
}

#nav:checked+.nav__open i {
	background-color: var(--shades);
	transition: transform 0.2s ease;
}

#nav:checked+.nav__open i:nth-child(1) {
	transform: translateY(6px) rotate(180deg);
}

#nav:checked+.nav__open i:nth-child(2) {
	opacity: 0;
}

#nav:checked~.nav__item a {
	display: block !important;
}

#nav:checked+.nav__open i:nth-child(3) {
	transform: translateY(-6px) rotate(90deg);
}

#nav:checked~.nav {
	z-index: 9990;
	opacity: 1;
}

#nav:checked~.nav ul li a {
	opacity: 1;
	transform: translateY(0);
}



/* Social Link */

.heading{

 height: 100vh;
  
}


.social-icons{

  display: flex;
  list-style: none;
}


.social-icons li a{

  padding: 20px;
  font-size: 25px;
  cursor: pointer;
  color: #f700ffc4;
  margin-right: 16px;
  position: relative;
  text-align: center;
  line-height: 70px;
  width: 100px;
  height: 100px;
}




.social-icons li a::before,.social-icons li a::after{

  content: " ";
  
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  left:0;
  top: 0;
   transition: .5s linear;

}

.social-icons li a:hover i{

  transform: scale(1.1);

}


.social-icons li a:hover::before{

  transform: skewX(20deg);
  border-left: 3px solid;
  border-right: 3px solid;


}

.social-icons li a:hover::after{

  transform: skewY(-25deg);
   border-top: 3px solid;
  border-bottom: 3px solid;

}

@media (max-width:700px) {
    ul.social-icons {
    display: block;
}
}