@charset "UTF-8";

/*_____________________________________ */
/*------------------------- N77 Widgets */
#n77widgets{
	position: absolute;
	top: 100px;
	right: 0%;
	width: auto;
	display: flex;
	/*align-items: stretch;*/
	flex-direction: row-reverse;
	flex-direction: row;
	flex-direction: column;

	transition: 0.3s;
	z-index: 900;
	& div {

		width: 50px;
		height: 50px;
		margin: 10px;		

		text-align: center;
		line-height: 75px;
		font-size: 30px;
		
		cursor: pointer;
		border-radius: 5px;
		border:1px solid grey;
		background: #fdfdfd;

	};
	& div span{
		float:left;
		width: 100%;
		line-height: 50px;
		height: 100%;
		font-size: 42px;
		font-weight: bold;
		text-align: center;
		transition: 0.3s;
		user-select: none;
		opacity: 0.7;
		filter: drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.1));
	};
	& div span:hover{
		opacity: 1.0;
		transform: scale(1.2);
		color: #ff6600;
	};
	& div.n77_theme_switch span{
		rotate: 90deg;
		filter: drop-shadow(5px -5px 1px rgba(0, 0, 0, 0.1));
	};
	& div.n77_theme_switch span:hover{
		rotate: 270deg;
		transform: scale(1.0);
		filter: drop-shadow(-5px 5px 1px rgba(0, 0, 0, 0.1));
	};
	
}


body.theme_dark #n77widgets div span:hover{
	filter: drop-shadow(0px 0px 7px rgba(255, 102, 0, 1.0));
}

body.theme_dark #n77widgets div{
	background: #111;
}


#n77widgets div.active {
	& span{
		transform: scale(1.2);
		color: #ff6600;
	};
}


/*Add for n77_font_size_plus & minus*/
#nav ul li,
#content h1,
#content h2,
#content p,
#content a{

	transition: 0.3s;
}


@media (max-width: 1020px) { /*falls kleiner als */

	#n77widgets{
		top: 77px;
		flex-direction: row;
	}

}