/**
 *	UMG Core 2
 *	./assets/css/core-offcanvas.css
 *
 *	Off-canvas elements
 */
.off-canvas--open #footer-buttons{
	bottom:-46px;
}
.off-canvas,
.off-canvas .cover{
	position:fixed;
	top:0;
	left:0;
	margin:0;
	padding:0;
	height:100%;
	max-height:100%;
}
.off-canvas .cover{
	font-size:100%;
	line-height:1.4em;
	width:100%;
	max-width:100%;
}
.off-canvas.with-cover{
   	display:table;
	opacity:0;
	width:100%;
}
.off-canvas.with-cover [class^=icon-]:hover{
	cursor:pointer;
}
.off-canvas.with-cover.is--open{
	opacity:1;
}

.off-canvas.with-cover .inner{
	display:table-cell;
	vertical-align:middle;
}
.off-canvas .the-form{
	font-size:1.5rem;
	position:relative;
	width:24em;
	margin:0 auto;
	max-width:90%;
	padding:0;
 	border:1px solid transparent;
}
.off-canvas.with-cover .close{
	font-size:30px;
	position:absolute;
	top:-45px;
	height:45px;
	width:45px;
	right:0;
	line-height:45px;
	padding:0;
	cursor:pointer;
}


/* =Toggles
   ========================================================================== */
.toggle .open,
.toggle .close{-webkit-transition:left .5s,right .5s;transition:left .5s,right .5s;}

/* Menu 45 x 45 */
#main-menu .toggle{width:47px;height:47px;right: -47px;}
#main-menu .toggle span{font-size:31px;line-height:45px;color:black;}
#main-menu .toggle .open,
#main-menu.is--open .toggle .close {left:0;}
#main-menu .toggle .close,
#main-menu.is--open .toggle .open{left:-45px;}

/* Menu 75 x 75 */
.bigmenubutton #main-menu .toggle{width:75px;height:75px;right: -75px;}
.bigmenubutton #main-menu .toggle span{font-size:50px;line-height:75px;color:black;}
.bigmenubutton #main-menu .toggle .open,
.bigmenubutton #main-menu.is--open .toggle .close {left:0;}
.bigmenubutton #main-menu .toggle .close,
.bigmenubutton #main-menu.is--open .toggle .open{left:-75px;}

/* News 75 x 75 */
#news-container .toggle .button{font-size:50px;line-height:75px}
#news-container .toggle{height:75px;width:75px}
#news-container .toggle .button{font-size:50px;line-height:75px}
#news-container.is--open .toggle .open,
#news-container .toggle .close{right:-75px}
#news-container .toggle{left:-75px}
#news-container .toggle{line-height:75px}
#news-container .toggle .open:hover,
#news-container .toggle .open{background-color:black;color:white;opacity:1}


.off-canvas .toggle{                /* a button holding the toggle icon+ */
    margin:0;
	padding:0;
	top:0;
	position:absolute;
    display:block;
	text-align:center;
    overflow:hidden;
}
.off-canvas .toggle .open,
.off-canvas .toggle .close{
	text-align:center;
	display:block;
	position:absolute;
	top:0;
	width:100%;
	height:100%;
	cursor:pointer;
}
nav .toggle .open::before{
	content:"\f333";
}
.toggle .close::before{
	content:"\f335";
}

/* =Main menu
   ========================================================================== */
#main-menu{
	padding-top:2.3rem;
	font-size:1.65rem;
    line-height:1.2rem;
	margin-left:-12em;
	width:12em;
}
#main-menu.is--open{
	margin-left:0;
}
#main-menu li{
	line-height:1.25;
	text-transform:uppercase;
	overflow:hidden;
	display:block;
	padding:.3em 1.5rem;
	margin:0;
}
#main-menu li:before{ /* line under menu */
	content:' ';
	border-top:2px solid;
	display:block;
	margin:.5rem 0 .8rem;
	width:2.2rem;
}
#main-menu li:first-of-type:before {
	display:none;
}
#main-menu li li{
	font-size:80%;
	line-height:1.1rem;
}
#main-menu li li:before{
	display:none;
}
#main-menu li li ul{
	display:none;
}
#main-menu-footer{
	margin:1.5rem 1.1rem 0;
	border-top:1px solid #333;
	max-width:100%;
	line-height:1.2;
	padding:.5rem .3rem 0 .5rem;
	font-size:1.2rem;
}
#main-menu-footer p:first-of-type{
	margin-top:0;
}

/* -Main menu fit-attemption depending on height
   -------------------------------------------------------------------------- */
@media screen and (max-height: 2024px) {
	#main-menu{font-size:1.8rem;}
}
@media screen and (max-height: 1080px) {
	#main-menu{font-size:1.6rem;}
}
@media screen and (max-height: 980px) {
	#main-menu{font-size:1.5rem;}
}
@media screen and (max-height: 880px) {
	#main-menu{font-size:1.4rem;}
}
@media screen and (max-height: 780px) {
	#main-menu{font-size:1.3rem;}
	#main-menu-footer{font-size:1.1rem;}
}
@media screen and (max-height: 680px) {
	#main-menu{font-size:1.2rem;line-height:1.1em;}
	#main-menu-footer{font-size:1rem;line-height:1;margin:1.1rem 0;padding:.5rem .3rem;}
}
@media screen and (max-height: 580px) {
	#main-menu{font-size:1.1rem;line-height:1.15em;padding:1.2rem .5rem}
}
@media screen and (max-height: 480px) {
	#main-menu{font-size:1rem;line-height:1.1em;padding:1.2rem .4em;}
    #main-menu li::before{margin:.1em 0 .3em;}
}
@media screen and (max-height: 380px) {
	#main-menu{font-size:.8rem;line-height:1.25em;padding:1rem .2em;margin:}
	#main-menu-footer{font-size:.85rem;margin:1.2rem .25rem 0;padding:.3rem .15rem;}
    #main-menu li{padding:.3em 1.2rem;}
    #main-menu li::before{margin:.1em 0 .2em;}
}

/* =News drawer
   ========================================================================== */
.promo{
	background:pink;        /* HYFN's choice */
}
#news-container .item{
	background:#333;
}
#news-container .item:nth-child(odd){
	background:#2d2d2d;
}
#news-container{
	left:auto;
	right:-300px;
	width:300px;
	max-width: 100%;
}
#news-container.is--open{
	left:auto;
	right:0;
}
@media screen and (max-width:300px){
	#news-container{right:-100%;}
}
#news-container .toggle .open,
#news-container.is--open .toggle .button{
	right:0;
}
#news-container .toggle .open{
	font-weight:normal;
	text-transform:uppercase;
}
#news-container .toggle .open{
	font-size:1.15em;
}
#news-container h4{
	font-size: 0.9em;
	line-height: 1.3em;
}
#news-container .date{
	font-size:0.75em;
}

#news-container h3 {
	padding: 0 1.62em;
	margin:0;
	line-height:75px;
    height:75px;
}
#news-container h4{
	font-weight: normal;
	display: inline-block;
	margin-bottom: 0.5rem;
}
#news-container .news{
	position:relative;
	overflow-y:auto;
	height:calc(100vh - 75px -45px)
	z-index:0;
}
#news-container .news .inner{
	position:absolute;
	top:0;left:0;right:0;bottom:0;
	z-index:1;
}
#news-container .item{
	padding:1em 2em;
}
#news-container .date{
	text-transform:uppercase;
}
#news-container .actions {
	position:relative;
	width:100%;
	height:45px;
	bottom:0;
	line-height:45px;
}
.has-promo #news-container .actions{
	height:auto;
}
#news-container a {
	display:block;
}
#news-container .promo {
	background:pink;
	border-left:1px solid black;
}
#news-container .promo img{
	max-width:100%;
	width:100%;
	height:auto;
}


/* =Search modal
   ===========================================================================
   vertical-align:middle; ;display:table-cell;display:table-row;*/
#search-modal{
	height:100%;
}
#search-modal .the-form {
	padding:2.4em 1%;
	width:80%;
	max-width:800px;
}
.search-box {
	line-height:1;
	white-space:nowrap;
}
.search-for,
.search-button{
	font-size:inherit;
	line-height:1.4;
	display:inline-block;
	-webkit-transition:all .5s;transition:all .5s;
}
.search-button{
	font-size:150%;
	line-height:1;
	width:1.5em;
	cursor:pointer;
	opacity:.7;
}
.search-button:hover{
	opacity:1;
}
.search-for{
	font-style:italic;
	width:80%;
	padding:.1em 1%;
	border:1px solid dimgray;
}
.search-for:focus{
	font-style:italic;
	border-color:gray;
	background-color:black;
	color:white;
}


/* =Off-canvas Media Queries
   ========================================================================== */
@media screen and (max-width:768px){
	.search-box{font-size:90%;}
}
@media screen and (max-width:480px){
    #news-container .toggle{font-size:80%;}
}
@media screen and (max-width:375px){
	.off-canvas--open #news-container .toggle{left:auto;right:0;}
	.search-box .search-button{position:absolute;text-align:center;margin:35px 0 0 40%;}
	.search-box .search-for{font-size:65%;display:block;margin:0 auto 16px;width:90%;}
	#search-modal .the-form{width:95%}
}