/* responsive upgrade */

@media screen and (max-width: 980px) {
	#main_wrapper, #billboard, #site_title, #fragment-1,  #fragment-1 img,#mainCol, #content, video, .sidebar_supp, .pg .mc_wrapper.imgcol, #footer_wrapper, .title_box {
		width: 100% !important;
	}
	#header {
		width: 96% !important;
		padding: 10px 2% 5px !important;
	}
	#header_navsupp {
		margin: 0 !important;
		position: absolute;
		top: 0px;
		right: 3%;
		float: none;
	}
	.title_1, .title_2, .title_3 {
		max-width: 100% !important;
	}
	#featured .ui-tabs-panel, #featured {
		height: auto !important;
	}
	#featured {
		width: 98% !important;
		padding: 1% !important;
	}
	#featured .ui-tabs-panel .info {
		height: auto !important;
		font-size: 4vw;
	}
	#fragment-1 .info {
		padding: 5px 0 !important;
		position: relative !important;
		top: 0px !important;
		width: 100% !important;
	}
	#l_sb {
		display: none;
	}
	.mc_wrapper {
		text-align: center;
	}
	#footer_wrapper {
		padding: 5px 1% !important;
		width: 98% !important;
		display: inline-flex;
	}
	#footer_wrapper .footer_cr {
		text-align: right;
	}
	.m_wrapper .mc_wrapper {
		margin: 0 5px !important
	}
	.sidebar_supp .m_wrapper.pg .mc_wrapper img {
		width: 270px !important;
		height: auto !important;
	}
	label {
		cursor: pointer;
	}
	#menu-toggle {
		display: none; /* hide the checkbox */
	}
	#menu-toggle:checked + #l_sb {
		display: block;
	}
		
	/* right menu */

	.box {
		display: block;
		position: fixed;
		top: 30%;
		z-index: 99999;
		background: #3faf82;
		box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.3);
		padding: 2%;
	}

	.btn {
		/* transform: translate(-50%, -50%); */
		width: 28px;
		cursor: pointer;
	}

	.box .btn span {
		display: block;
		width: 100%;
		box-shadow: 0 2px 10px 0 rgba(0,0,0,0.3);
		border-radius: 3px;
		height: 6px;
		margin-bottom: 2px;
		background: #000;
		transition: all .3s;
		position: relative;
	}

	.box span + .box span {
		margin-top: 24px;
	}

	.box .active span:nth-child(1) {
		animation: ease .7s top forwards;
	}

	.box .not-active span:nth-child(1) {
		animation: ease .7s top-2 forwards;
	}

	.box .active span:nth-child(2) {
		animation: ease .7s scaled forwards;
	}

	.box .not-active span:nth-child(2) {
		animation: ease .7s scaled-2 forwards;
	}

	.box .active span:nth-child(3) {
		animation: ease .7s bottom forwards;
	}

	.box .not-active span:nth-child(3) {
		animation: ease .7s bottom-2 forwards;
	}

	@keyframes top {
		0% {
			top: 0;
			transform: rotate(0);
		}
		50% {
			top: 22px;
			transform: rotate(0);
		}
		100% {
			top: 10px;
			transform: rotate(45deg);
		}
	}

	@keyframes top-2 {
		0% {
			top: 22px;
			transform: rotate(45deg);
		}
		50% {
			top: 22px;
			transform: rotate(0deg);
		}
		100% {
			top: 0;
			transform: rotate(0deg);
		}
	}

	@keyframes bottom {
		0% {
			bottom: 0;
			transform: rotate(0);
		}
		50% {
			bottom: 22px;
			transform: rotate(0);
		}
		100% {
			bottom: 6px;
			transform: rotate(135deg);
		}
	}

	@keyframes bottom-2 {
		0% {
			bottom: 22px;
			transform: rotate(135deg);
		}
		50% {
			bottom: 22px;
			transform: rotate(0);
		}
		100% {
			bottom: 0;
			transform: rotate(0);
		}
	}

	@keyframes scaled {
		50% {
			transform: scale(0);
		}
		100% {
			transform: scale(0);
		}
	}

	@keyframes scaled-2 {
		0% {
			transform: scale(0);
		}
		50% {
			transform: scale(0);
		}
		100% {
			transform: scale(1);
		}
	}

}
@media screen and (max-width: 700px) {
	#header #site_title .info_box {
		position: relative;
		margin-left: 0px;
		max-width: 100%;
		width: 100%;
		margin-top: 10px;
	}
	#header #site_title, #header #site_title .title_box {
		max-height: none !important;
	}
}

.box {
	display: block;
}