/* nav_toggle */

.nav_toggle{
	width: 30px;
	padding: 10px 0;
	display:none;

	font-size: 0;
	border: 0;
	color: transparent;
	background: none;
	cursor: pointer;

	position: fixed;
	top: 43px;
	right: 20px;
	z-index: 333;
}
.nav_toggle.active{
	top: 20px;
	right: 15px;
}

.nav_toggle:focus{
  outline: 0;
}

.nav_toggle_item{
	display: block;
	width: 100%;
	height: 3px;

	background: #FFFFFF;

	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;

	transition: .1s linear;
}

.nav_toggle.active .nav_toggle_item{
	height: 0;
}

.nav_toggle_item:before,
.nav_toggle_item:after{
	content: "";
	width: 100%;
	height: 3px;
	background: inherit;

	position: absolute;
	left: 0;
	z-index: 1;

	transition: transform .2s linear;
}


.nav_toggle.active .nav_toggle_item:before{
	transform-origin: left top;
	opacity: 1;
	transform: rotate(45deg)
	translateX(-5px);
}

.nav_toggle.active .nav_toggle_item:after{
	transform-origin: left bottom;
	opacity: 1;
	transform: rotate(-45deg)
	translateX(-5px);
}

.nav_toggle_item:before{
	top: -8px;
}

.nav_toggle_item:after{
	bottom: -8px;
}
.nav_container.fixed{
	display: flex;
}
.nav_container.fixed{
	display: flex;
}
.nav_col.active .nav-link{
	display: none;
}
.nav_toggle.view{
	position: absolute;
}


/*-----------view_container------------------*/


.view_fonts{
/*
	line-height: 1;
	padding: 8px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-ms-align-items: flex-end;
	align-items: flex-end;
*/
}
.view_fonts:hover{
	text-decoration: none;
	color:inherit;
}
.view_fonts.active{
	border: 1px solid #FFFFFF;
	box-sizing: border-box;
	border-radius: 2px;
	padding: 7px;

}
.view_fonts.mod1{
	font-size: 18px;
	color: #fff;
}
.view_fonts.mod2{
	font-size: 24px;
	color: #fff;
}
.view_fonts.mod3{
	font-size: 28px;
	margin-bottom: -1px;
}
.view_fonts.mod4{
	font-size: 36px;
	margin-bottom: -2px;
}

.color_type{
/*
	padding: 5px 16px;
	font-style: normal;
	font-weight: 500;
	font-size: 18px;
	line-height: 22px;
	text-align: center;
	border-radius: 2px;
*/
	color: #e0e0e0;
	border: 2px solid;
}
.color_type:hover{
	color: white;
	text-decoration: none;
}

.c_l{border-right: none;}
.c_r{border-left: none;}
.color_type.white-on-black{
	color: #FFF;
	background: #000;
}
.color_type.yellow-on-black{
	color: #FFC400;
	background: #000000;
}
.color_type.yellow-on-blue{
	color: #fff150;
	background: #1f5080;
}
.color_type.blue-on-yellow{
	color: #1f5080;
	background: #fff150;
}
.color_type.black-on-yellow{
	color: #333;
	background: #FFC400;
}
.color_type.black-on-white{
	color: #333;
	background: #FFF;
}
.color_type.green-on-white{
	color: #0e670b;
	background: #FFF;
}
.color_type.white-on-green{
	color: #FFF;
	background: #0e670b;
}
.color_type.sepia{
	color: #80502b;
	background: #f4e0c1;
}
.color_type.invert{
	color: #0f2c57;
	background: #88c2f7;
}