/*   Farben   */
:root {
	--fn-color-gray: rgb(244,244,244);
	--fn-color-darkGray: #4a4a4a;
	--fn-color-gray-md: rgb(149, 149, 149);
	--fn-color-black: rgba(0, 0, 0, 0.795);
	--fn-color-white: rgb(255,255,255);
	--fn-color-red: rgb(200,15,10);
	--fn-color-blue: rgb(140,179,255);
	--murtenbieter-color-blue: rgb(0,93,158);
	--anzKerzers-color-yellow: rgb(197,161,31);
}

/*   Schriften   */
@font-face {
	font-family: "GuardianEgyp";
	src: url("https://fn-shop.faros.ch/css/fonts/GuardianEgyp.otf"),
	url("https://yoursite.com/css/fonts/GuardianEgyp.otf") format("opentype")
}

@font-face {
	font-family: "CircularPro";
	src: url("https://fn-shop.faros.ch/css/fonts/CircularPro.otf"),
	url("https://fn-shop.faros.ch/css/fonts/CircularPro.otf") format("opentype")
}

/*    Algemein   */
body {
	padding: 0;
	background-color: var(--fn-color-white);
	font-family: 'CircularPro', sans-serif !important;
	font-weight: 700 !important;
	overflow-x: hidden;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
	font-family: "GuardianEgyp" !important;
}
.h1, h1 {
    font-size: 34px !important;
}
.footerTitle {
	font-size: 22px !important;
}
/* a:hover {
	color: var(--fn-color-white) !important;
} */
/* .colhover a:hover{
	color: var(--fn-color-darkGray) !important;
} */
.fs-btn {
	margin: 0;
}
.warenkorb-btn {
	width: 100%;
}
.Offerte_Bestellabschluss{
	display: flex;
	flex-direction: column;
}
.bestellungLeft {
	justify-content: self;
}
.containerWidth {
	max-width: 1210px;
	margin: 0 auto;
	margin-top: 100px;
	padding: 10px;
}
.Content {
	display: flex;
	/* 	justify-content: space-evenly; */
	flex-wrap: wrap;
}

.textCenter{
	text-align: center;
}

.textRight{
	text-align: right;
}

.txtWhite{
	color: var(--fn-color-white) !important;
}

.txtWhite:hover{
	color: var(--fn-color-white) !important;
}

.dark{
	color: var(--fn-color-darkGray) !important;
}
.btnFN{
	background: var(--fn-color-red);
	color: var(--fn-color-white);
	border-radius: 4%;
	padding: 8px;
	font-size: 16px;
}
.btnMB{
	background: var(--murtenbieter-color-blue);
	color: var(--fn-color-white);
	border-radius: 4%;
	padding: 8px;
	font-size: 16px;
}
.btnAK{
	background: var(--anzKerzers-color-yellow);
	color: var(--fn-color-white);
	border-radius: 4%;
	padding: 8px;
	font-size: 16px;
}

.btnFooter{
	color: var(--fn-color-white);
	border-radius: 4%;
	padding: 8px;
	font-weight: 600;
	font-size: 16px;
	width: 100%;
	padding: 18px;
}

.btnAllgFooter{
	background: var(--fn-color-black);
}
.mobileFooterFN{
	background: var(--fn-color-red);
}
.mobileFooterMB{
	background: var(--murtenbieter-color-blue);
}
.mobileFooterAK{
	background: var(--anzKerzers-color-yellow);
}

.btnHeigt{
	min-height: 240px;
}
.floatRight{
	float: right;
}
.spacer{
	margin-top: 35px;
}
.spacerSmall{
	margin-top: 20px;
}

/*Home*/

.homeBox{
	width: 100%;
	margin: 0 auto;
	padding:15px;
	max-width: 320px;
	background-color: var(--fn-color-gray);
	/* 	text-align: center; */
}
.homeList{
	margin-top: 20px;
	text-align: center;
}

.artList{
	margin-top: 20px;
}

ul {
	text-align: initial;
	display: inline-block;
}

.containerList {
	text-align: initial;
	display: inline-block;
	padding-left: 5px;
}

/* basic nav styling below */

.navbar ul {
	width: 100%;
	height: 100%;
	list-style: none;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-evenly;
	/* 	align-items: center; */
}

.navbar ul li a div {
	color: white;
	padding-bottom: 10px;
	border-bottom: 2px solid black;
	text-decoration: none;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.2rem;
}

.navbar{
	justify-content: flex-start !important;
}

.navbar div{
	text-align: start !important;
	
}


.glyphicon-ok{
	color: green;
}
.glyphicon-remove{
	color: red;
}

.homeLogoOther{
	width: 220px;
	margin-top: 50px;
}
.homeLogoFn{ 
	width: 220px;
	margin-top: 10px;
}
.logoHomeFN{
	width: 100%;
}
.homeLogo{
	width: 200px;
	margin-top: 20px;
}
.homeLogoBox{
	margin-left: 550px;
}
.logoHeight{
	min-height: 100px;
	text-align: center;
}

/*masterpage*/

.colNav{
	padding-right: 20px;
	font-size: 16px;
	color:var(--fn-color-black) !important;
	font-weight: 700;
	text-transform: uppercase;
}

.dropdown {
	position: relative;
	display: inline-block;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	padding: 12px 16px;
	z-index: 1;
}

.dropdown:hover .dropdown-content {
	display: block;
}

.glyphiconMobile{
	color: var(--fn-color-darkGray);
}

.col{
	margin-top: 10px;
}
.headClr {
	border-radius: unset;
	padding: 10px;
	color: var(--fn-color-black) !important;
}

.headColorAllg {
	background-color: var(--fn-color-white);
	
}
#headColor{
	border-bottom: 4px solid var(--fn-color-darkGray);
}

.headColorFN {
	background-color: var(--fn-color-red);
	border-bottom: 4px solid var(--fn-color-red);
	
}

.colorTextBlack{
	color: var(--fn-color-black) !important;
}

.colorTextWhite{
	color: var(--fn-color-white) !important;
}

.headColorMB {
	background-color: var(--murtenbieter-color-blue);
	border-bottom: 4px solid var(--murtenbieter-color-blue);
}

.headColorAK {
	background-color: var(--anzKerzers-color-yellow);
	border-bottom: 4px solid var(--anzKerzers-color-yellow);
}


.footerContainer{
	padding: 12px;
	border-top: 1px solid var(--fn-color-darkGray);
	color: var(--fn-color-gray-md);
	background-color: var(--fn-color-black);
	width: 101%;
}

.footerColorLeft{
	border-left: 50px solid var(--fn-color-darkGray);
}
.footerColorLeftFN{
	border-left: 50px solid var(--fn-color-red);
}
.footerColorLeftMB{
	border-left: 50px solid var(--murtenbieter-color-blue);
}
.footerColorLeftAK{
	border-left: 50px solid var(--anzKerzers-color-yellow);
}


footer a {
	font-size: 18px !important;
	color: var(--fn-color-gray-md) !important;
}

footer .txtWhite{
	color: var(--fn-color-white) !important;
}

.warenkorbTitle{
	font-weight: 600;
	margin-bottom: 5px;
}

.smallTxt{
	font-size: 10px;
}

/*
.smallTxtRegistration {
	font-size: 12px;
}*/

.footerTxt{
	font-size: 15px !important;
	/* 	font-family: 'Merriweather', serif; */
	color: var(--fn-color-gray-md);
}

.lightGray{
	background-color: var(--fn-color-gray);
}

.footerContainer > h4{
	color: var(--fn-color-white);
	font-weight: 900;
}
.textWithe{
	color: var(--fn-color-white) !important;
}
.masterLogoMobil {
	height: 50px;
	margin: 5px 0px 5px -15px;
	text-align: center;
}
.masterLogoNav{
	height: 40px;
	text-align: center;
	margin-right: 12px;
}
.masterLogoNavImg{
	text-align: center;
	margin-right: 7px;
	background-color: var(--fn-color-white);
	box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.masterLogoNavImgFN{
	height: 40px;
	padding: 2px;
}
.masterLogoNavImgAVK{
	height: 42px;
	padding: 1px;
}

.masterLogoNavImgMB{
	height: 37px;
	padding: 2px;
}

.containerNavMiddle{
	padding-top: 15px;
}

.mobilenav{
	margin-left: 5px;
}
.glyphMobile{
	margin-top: 20px;
}
hr{
	border: 5px solid var(--fn-color-darkGray);
}
.nav-mobile {
	background-color: var(--fn-color-darkGray) 1px;
}
.titel{
	display: none;
}
.displNone{
	display: none;
}
.ausblenden{
	display: none !important;
}
.loginBottom{
	margin-bottom: 100px;
}
.navEnd{
	text-align: end;
	min-width: 81px;
}
.btnPWEye{
	padding: 4px 11px !important;
	font-size: 17px !important;
}
.spacerSmallHome{
	margin-top: 5px;
}
.fnRed{
	color: var(--fn-color-red) !important;
}
.mbBlue{
	color: var(--murtenbieter-color-blue) !important;
}
.akYellow{
	color: var(--anzKerzers-color-yellow) !important;
}
.borderTop{
	border-bottom: 2px dashed var(--fn-color-gray-md);
	margin: 15px 0px;
}
.iconsFooter{
	font-size: 23px;
	background-color: var(--fn-color-darkGray);
	padding: 7px 11px;
	border-radius: 50%;
	color: var(--fn-color-white) !important;
}
/*NavMobile*/
.height-nav{
	box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.animated-icon1 {
	width: 30px;
	height: 20px;
	position: relative;
	/* margin: 0px; */
	margin: 4px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer;
}

.animated-icon1 span {
	display: block;
	position: absolute;
	height: 3px;
	width: 100%;
	border-radius: 9px;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}

.animated-icon1 span {
	background: var(--fn-color-darkGray);
}



.animated-icon1 span:nth-child(1) {
	top: 0px;
}

.animated-icon1 span:nth-child(2) {
	top: 10px;
}

.animated-icon1 span:nth-child(3) {
	top: 20px;
}

.animated-icon1.open span:nth-child(1) {
	top: 11px;
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	transform: rotate(135deg);
}

.animated-icon1.open span:nth-child(2) {
	opacity: 0;
	/* left: -60px; */
}

.animated-icon1.open span:nth-child(3) {
	top: 11px;
	-webkit-transform: rotate(-135deg);
	-moz-transform: rotate(-135deg);
	-o-transform: rotate(-135deg);
	transform: rotate(-135deg);
}

.pText{
	font-size: 13px;
}

.zText{
	font-weight: bold;

}

.mobileFlex{
	flex-direction: column;
}

@media (min-width: 430px) {
	.masterLogoMobil {
		height: 50px;
		margin: 0px;
		text-align: center;
	}
	.mobileFlex{
		flex-direction: row;
	}
	
	.homeBox{
		width: 100%;
		margin: 15px;
		padding:10px;	
	}

	.fnGrayBox{
		margin-right: 0;
	}
	
	/* 	.homeBox{
		margin: 0px;
	} */
	.spacerSmallHome{
		margin-top: 5px;
	}
}




@media (min-width: 992px) {
	.aboSize {
		width: 600px;
	}
	.aboSizeHome {
		min-width: 300px;
	}
	.homeHeight {
		height: 320px !important;
	}
}

@media (min-width: 1130px) {
	.homeHeight {
		height: 300px !important;
	}
}


@media (min-width: 768px) {
	/* 	.homeBox{
		margin: 0px;
	} */



	.borderArt{
		border-right: dashed var(--fn-color-darkGray);
	}
	.homeLogoFn{ 
		width: 300px;
		margin-top: 10px;
	}
	.homeLogoOther{
		width: 300px;
		margin-top: 50px;
	}
	.logoHeight{
		min-height: 130px;
		margin-top: 10px;
	}
	.spacerSmall{
		margin-top: 30px;
	}
}

@media (max-width: 840px) {
	.visible-next-prev {
		display: block;
	}
	
	.form-horizontal{
		padding-left: 10px;
		margin-right: 10px !important;
	}
}

@media (min-width: 1230px) {
	.home-box {
		width: 400px;
	}
	.centerText{
		margin-left: 120px
	}
}

@media (min-width: 300px){
	.zTEXT{
		margin-bottom: 30px;
	}
}

@media (max-width: 300px){
	.zTEXT{
		margin-bottom: 70px;
	}
}

/*Klassnen vorgabe*/

/*        Collabsible       */

.collapsible_footer {
	cursor: pointer;
	padding: 18px;
	width: 100%;
	border-left: 0px;
	border-right: 0px;
}
.coll-content {
	padding: 0 18px;
	display: none;
	overflow: hidden;
	background-color: var(--fn-color-white);
}

.collaps_help {
	margin: 10px 0px;
}
.collaps_help:hover {
	color: var(--fn-color-red);
}
#headPicFN > a:hover {
	text-decoration: none !important;
}

/*abo-login-shopping-box*/

.abo-login-shopping-box {
	height: 100vh;
	width: 307px;
	background-color: white;
	overflow: auto;
	margin-right: -3px;
	margin-top: -61px;
}
.abo-login-shopping-box-top {
	height: 61px;
	width: 100%;
}
.content-box {
	background-color: var(--fn-color-gray);
}
.spacer {
	padding-top: 30px;
}
.coll-content {
	padding: 0 18px;
	display: none;
	overflow: hidden;
	background-color: white;
}
.collaps_help {
	margin: 10px 0px;
}
.collaps_help:hover {
	color: var(--edp-color-red);
}

/* START: Style aus der Benutzerkonto_Abo_kuenden datei */

.funkyradio {
	color: var(--edp-color-red);
	background-color: var(--edp-color-white);
}
.funkyradio div {
	clear: both;
	overflow: hidden;
}
.funkyradio label {
	width: 100%;
	border-radius: 3px;
	border: 1px solid var(--edp-color-darkgray);
	font-weight: normal;
}
.funkyradio input[type="radio"]:empty,
.funkyradio input[type="checkbox"]:empty {
	display: none;
}
.funkyradio input[type="radio"]:empty ~ label,
.funkyradio input[type="checkbox"]:empty ~ label {
	position: relative;
	line-height: 2.5em;
	text-indent: 3.25em;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.funkyradio input[type="radio"]:empty ~ label:before,
.funkyradio input[type="checkbox"]:empty ~ label:before {
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	left: 0;
	content: '';
	width: 2.5em;
	background: var(--edp-color-darkgray);
	border-radius: 3px 0 0 3px;
}
.funkyradio input[type="radio"]:hover:not(:checked) ~ label,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label {
	color: var(--edp-color-darkgray);
}
.funkyradio input[type="radio"]:hover:not(:checked) ~ label:before,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before {
	content: '\2714';
	text-indent: .9em;
	color: var(--edp-color-mgray);
}
.funkyradio input[type="radio"]:checked ~ label,
.funkyradio input[type="checkbox"]:checked ~ label {
	color: var(--edp-color-darkgray);
}
.funkyradio input[type="radio"]:checked ~ label:before,
.funkyradio input[type="checkbox"]:checked ~ label:before {
	content: '\2714';
	text-indent: .9em;
	color: var(--edp-color-black);
	background-color: var(--edp-color-light-gray);
}


/*abo-login-shopping-box          */

.abo-login-shopping-box {
	height: 100vh;
	width: 307px;
	background-color: white;
	overflow: auto;
	margin-right: -3px;
}
.aboLoginShoppingBoxTop {
	height: 65px;
	width: 100%;
}

.btn-primary{
	color:#fff;
	
	background-color:var(--fn-color-darkGray) !important ;
	border-color:var(--fn-color-darkGray) !important;
}
.smallSize{
	font-size: 13px;
}

a{
	color: var(--fn-color-black) !important;
}

.colorWhite{
	color: white;
}

a:hover{
	color: var(--fn-color-darkGray) !important;
}

.fnGrayBox{
	background-color: var(--fn-color-gray);
	margin-right: 1rem;
}

.zTEXT{
	height: 180px;
}

.zAMTEXT{
	height: 65px;
}

.REMred{
	color: var(--fn-color-red)
}

.OKgreen{
	color: green;
}

.from-control{
	color: black !important;
	border: 1px solid black !important;
}

.form-control-FN{
	color: black !important;
	border: 1px solid black !important;
}

label{
	font-weight: 300 !important;
}

hr{
	border-top: 1px solid black !important;
}

button{
	font-size: 18px !important;
}

#OfferBtn{
	background-color: var(--fn-color-red);
}

.btnHome{
	bottom: 10px;
	margin-bottom: 20px;
	
}

.text-black {
	color: black;
}

.border-black {
	border-color: black !important;
}

#changePic > a {
	text-decoration: none;
}