
*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.fafloat {float: right; border: solid 0px red; margin-right: 40px;}

.farightpos{text-align: right;}

.menum{background-color: #336ca6; height: 42px; width: 46px; padding-top: 8px; border: solid 0px #0475c2;}

.homepm {padding:0; margin-top: 25px;}

.caradv{padding-left: 110px; padding-bottom: 10px;}

.lineh{margin-top: 50px;}

.whitefnt:active {color: #fff; font-size: 12px;}
.whitefnt:hover {color: #fff; text-decoration: none; font-size: 12px;}
.whitefnt:link {color: #fff; font-size: 12px;}
.whitefnt:visited {color: #fff; font-size: 12px;} 


.farightpos {padding-left:;}

.bar1, .bar2, .bar3 {
  width: 31px;
  height: 5px;
  background-color: #fff;
  margin: 6px 7px;
  transition: 0.4s;
margin-top: 0;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

.moblin{color: #fff; text-align: left; padding-left: 30px; padding:11px;}

.moblin:link {color: #fff; text-align: left; padding-left: 30px; padding:11px;}

.moblin:active {color: #fff;}

.moblin:hover {color: #fff; text-decoration: none;}

.moblin:visited {color: #fff;}

.txth:link {font-size: 1.3em; padding-left: 0;}

.txth:hover {font-size: 1.3em; color: #fff;}

.txth:active {font-size: 1.3em; color: #fff;}

.txth:visited {font-size: 1.3em; color: #fff;}

.hometop {font-size: 1.2em; top: 15%;}



/*
.containermenu {
	position: fixed;
	overflow: hidden;
	height: 100%;
	width:100%;
	float: left;
	color: #fff;
	margin: 0 0;
	top:0;	
}*/

.menu-trigger {
	/*position: relative;*/
	position: fixed;
	padding: 0px;
	font-size: 0.9em;
	top: 0;
	left: 0;
	
	text-align: left;
	/*width: 20%;*/
	border: solid 0px red;
	z-index: 1000000;
	}

.menu-trigger:before {
	position: absolute;
	top: 2px;
	left: 0;
	width: 35px;
	height: 6px;
	
	/*background: #1d8cd8;
	box-shadow: 0 6px #fff, 0 12px #1d8cd8, 0 18px #fff, 0 24px #1d8cd8, 0 30px #fff;
	content: '';*/
	
}

.mp-pusher {

	left: 0;
	height: 100%;
border: solid 0px red;
position: fixed;
float: left;
color: #fff;
	margin: 0 0;
	top:0%;
z-index: 10000;
}

.mp-menu {
	position: absolute; /* we can't use fixed here :( */
	top: 0%;
	left: 0;
	z-index: 100000;
	width: 420px;
	height: 100%;
	margin-top: 15%;
	border: solid 0px red;
	-webkit-transform: translate3d(-100%, 0, 0);
	-moz-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
	
	
}

.mp-level {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #336ca6;
	text-align: left;
	-webkit-transform: translate3d(-100%, 0, 0);
	-moz-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
	
}

/* overlays for pusher and for level that gets covered */
.mp-pusher::after,
.mp-level::after,
.mp-level::before {
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	content: '';
	opacity: 0;

}

.mp-pusher::after,
.mp-level::after {
	background: rgba(0,0,0,0.3);
	-webkit-transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s;
	-moz-transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s;
	transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s;
	
}

.mp-level::after {
	z-index: -1;
	
}

.mp-pusher.mp-pushed::after,
.mp-level.mp-level-overlay::after {
	width: 100%;
	height: 100%;
	opacity: 1;
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	transition: opacity 0.3s;
	
}

.mp-level.mp-level-overlay {
	cursor: pointer;
	text-align: left;
	
}

.mp-level.mp-level-overlay.mp-level::before {
	width: 100%;
	height: 100%;
	background: transparent;
	opacity: 1;
	
}

.mp-pusher,
.mp-level {
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
	
}

/* overlap */
.mp-overlap .mp-level.mp-level-open {
	box-shadow: 1px 0 2px rgba(0,0,0,0.2);
	-webkit-transform: translate3d(-40px, 0, 0);
	-moz-transform: translate3d(-40px, 0, 0);
	transform: translate3d(-40px, 0, 0);
	
}

/* First level */
.mp-menu > .mp-level,
.mp-menu > .mp-level.mp-level-open,
.mp-menu.mp-overlap > .mp-level,
.mp-menu.mp-overlap > .mp-level.mp-level-open {
	box-shadow: none;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	
}

/* cover */
.mp-cover .mp-level.mp-level-open {
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	
}

.mp-cover .mp-level.mp-level-open > ul > li > .mp-level:not(.mp-level-open) {
	-webkit-transform: translate3d(-100%, 0, 0);
	-moz-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
}


/* content style */
.mp-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	
}

.mp-menu h2 {
	margin: 0;
	padding: 1em;
	color: rgba(0,0,0,0.4);
	text-shadow: 0 0 1px rgba(0,0,0,0.1);
	font-weight: 300;
	font-size: 2em;
	
}

.mp-menu.mp-overlap h2::before {
	position: absolute;
	top: 0;
	right: 0;
	margin-right: 8px;
	font-size: 75%;
	line-height: 1.8;
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.1s 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.1s 0.3s;
	transition: opacity 0.3s, transform 0.1s 0.3s;
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	transform: translateX(-100%);
	
}

.mp-menu.mp-cover h2 {
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
	font-size: 1em;
	
}

.mp-overlap .mp-level.mp-level-overlay > h2::before {
	opacity: 1;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	transform: translateX(0);
	
}

.mp-menu ul li > a {
	display: block;
	/*padding: 0.7em 1em 0.7em 1.8em;*/
	/*padding: 40px; padding-left:40px; padding-right: 0px;*/
	outline: none;
	box-shadow: inset 0 -1px rgba(0,0,0,0.2);
	text-shadow: 0 0 1px rgba(255,255,255,0.1);
	font-size: 1.2em;
	-webkit-transition: background 0.3s, box-shadow 0.3s;
	-moz-transition: background 0.3s, box-shadow 0.3s;
	transition: background 0.3s, box-shadow 0.3s;
	
}

.mp-menu ul li::before {
	position: absolute;
	left: 10px;
	z-index: -1;
	color: rgba(0,0,0,0.2);
	line-height: 3.5;
	
}

.mp-level > ul > li:first-child > a {
	box-shadow: inset 0 -1px rgba(0,0,0,0.2), inset 0 1px rgba(0,0,0,0.2);
	
}

.mp-menu ul li a:hover,
.mp-level > ul > li:first-child > a:hover {
	background: rgba(0,0,0,0.2);
	box-shadow: inset 0 -1px rgba(0,0,0,0);
	
}

.mp-menu .mp-level.mp-level-overlay > ul > li > a,
.mp-level.mp-level-overlay > ul > li:first-child > a {
	box-shadow: inset 0 -1px rgba(0,0,0,0);
	
}

.mp-level > ul > li:first-child > a:hover,
.mp-level.mp-level-overlay > ul > li:first-child > a {
	box-shadow: inset 0 -1px rgba(0,0,0,0), inset 0 1px rgba(0,0,0,0);
} /* seems like Chrome 34.0.1847.131 needs the second shadow otherwise the transition breaks */





.arowfront::after {
    position: absolute;
	content: "\f105";
	 font-family: FontAwesome;
	right: 35px;
	font-size: 1.3em;
	color: #fff;
	
}


.iconb:after {
	 content: "\f105";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
	color: #fff;
    font-size: 20px;
    padding-left: 7em;
    position: absolute;
 }


.mp-back {
	background: rgba(0,0,0,0.1);
	outline: none;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
	display: block;
	font-size: 1.2em;
	padding: 1em;
	margin-top: 12%;
	position: relative;
	box-shadow: inset 0 1px rgba(0,0,0,0.1);
	-webkit-transition: background 0.3s;
	-moz-transition: background 0.3s;
	transition: background 0.3s;
	
}


.mp-back:hover {
	
	color: #fff;
	text-decoration: none;
	
}

.mp-back::after {
	 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	position: absolute;
	/*content: "\f104";*/
	right: 10px;
	font-size: 1.3em;
	color: #fff;
	
}

.mp-menu .mp-level.mp-level-overlay > .mp-back,
.mp-menu .mp-level.mp-level-overlay > .mp-back::after {
	background: transparent;
	box-shadow: none;
	color: transparent;
	
}

/* Fallback example for browsers that don't support 3D transforms (and no JS fallback) */
/* We'll show the first level only */
.no-csstransforms3d .mp-pusher,
.no-js .mp-pusher {
	padding-left: 300px;
	
}

.no-csstransforms3d .mp-menu .mp-level,
.no-js .mp-menu .mp-level {
	display: none;
	
}

.no-csstransforms3d .mp-menu > .mp-level,
.no-js .mp-menu > .mp-level {
	display: block;
	
}





	@media screen and (max-width: 1000px) 
	
	
	/*.containermenu {
	
	float: left;
	color: #fff;
	margin: 0 0;
	top:0;
border: solid 0px red;
}*/	
	
	{.bplogo {width: 240px; height: 30px; border: solid 0px red; text-align: center; margin-left: 0px; padding:0;z-index: -1; }
		
	
	
}


@media screen and (min-width: 420px) {
	
	
}
	 @media only screen and (device-width: 768px) {
.bplogo {
     width: 140%;
     height: auto;
     margin: 0;
     border: solid 0px red;
 }	}
	
 .borimgresprad {border: solid 1px #b4b5b5; padding: 10px; border-radius: 4px;}
 
 .txt10pad {padding: 8px;}
 
