@import url('https://fonts.nwwn.de/css?family=Yantramanav');
@import url('https://fonts.nwwn.de/css?family=Open+Sans');
@import url('https://fonts.nwwn.de/css?family=Raleway');

* {box-sizing :border-box; }
html {font-size:16px;}
body { margin:0; font:normal 1rem 'Yantramanav',sans-serif;}
a,a:hover {transition:all 0.3s ease-in-out; }
img{ max-width:100%; height:auto; }
 .flex { display:flex; flex-direction:row; flex-wrap:wrap; }
.w10 { width:10%; }
.w15 { width:15%; }
.w20 { width:20%; }
.w25 { width:25%; }
.w50 { width:50%; }

 
.row { display:flex; flex-direction:row; flex-wrap:wrap; }
.row input { padding:4px; width:50%; display:inline-block; margin:5px 0; border:1px solid #ccc; border-radius:4px; }
.row select { padding:4px; width:75%; display:inline-block; margin:5px 0; border:1px solid #ccc; border-radius:4px; }

label { width:33%; padding:8px 0;}
.row > div { width:67%; }
button { cursor:pointer; margin:1rem auto; text-transform:uppercase;display: inline-block;background: #A0263D;border: 2px solid #A0263D;color: #fff;text-align: center;border-radius: 0.25rem;white-space: nowrap;vertical-align: middle;padding: .5rem 2rem;transition: all 0.5s ease-in-out;}
button:hover {background: #fff;border: 2px solid #A0263D;color: #A0263D;cursor: pointer;transition: all 0.5s ease-in-out;}


 




.wrapper { width:99%; max-width:90rem; margin:0 auto; }

#topline span { vertical-align:middle; align-items: center; padding-right:0.25rem;}
#topline { display:block; background:#304852;padding:0.5rem 0; color:#d8ddd9;}
#topline > .wrapper { position:relative; display:flex; flex-direction:row; flex-wrap:wrap; align-items: center; justify-content:space-between;}
#topline a { color:#d8ddd9;text-decoration:none; padding:0.5rem; }
#topline a:hover { background:#B32426; }
header { position:relative; height:5rem; display:block; border-bottom:2px solid #304852; }
header > .wrapper { position:relative; display:flex; flex-direction:row; flex-wrap:wrap; align-items: center; justify-content:space-between; }

#top img { max-width:100%; width:100%; }

#confignow,.confignow { border:1px solid #304852; background:#F1BC16; border-radius:0.3rem; overflow:hidden; align-self: flex-end; }
.confignow {border-radius:0; border:0; }
#confignow a,.confignow a { line-height:100%; font:600 1.25rem 'Yantramanav'; color:#B32426 !important; text-decoration:none; display:block; padding:0.5rem 1rem; text-transform:uppercase; }
.confignow a {padding:0 0.5rem; font-size:1rem;}
#confignow a:hover,.confignow a:hover { background:yellow;  }

#logo a { display:block; z-index:8 !important; padding-left:10rem;background:url(https://www.mcfliege.de/assets/images/moskitoqs2_logo.png) 10rem center no-repeat; width:100%; height:100%; background-size:auto 82%; }
#logo { position:relative; height:5rem; padding:0.2rem 0; width:30rem; display:inline-block; }
#logo:before {position:absolute;z-index:4 !important; margin-top:-0.2rem; background:url(https://www.mcfliege.de/assets/images/moskitoqs.png) left top no-repeat; content:""; width:10rem; height:8.4rem; background-size:contain;  }

#login-icons ul { list-style:none; list-style-image:none; margin:0; padding:0; display:inline-flex; flex-direction:row; flex-wrap:wrap; }
#login-icons li { list-style:none; list-style-image:none; margin:0; padding:0; }
#login-icons li.divider { padding:1rem 0;}
#login-icons li.divider span { position:relative; }
#login-icons a { color:#304852; text-decoration:none; display:inline-flex; height:100%; padding:1rem; 
  align-items: center;
  justify-content: center; }
#login-icons a:hover {  color: #fff; background:#304852; border-radius:0.2rem; }
#login-icons a span { font-size:200%; align-self: center;}


.breadcrumb { margin:0; }

#footer1 { background:#283032; color:#F1F1EF; padding:3rem 0 2rem 0;}
#footer1 .ipWidget ul,footer .ipWidget li{ list-style:none; list-style-image:none; padding:0; margin:0; }
#footer1 .ipWidget a { color:#F1F1EF; line-height:150%; }
#footer1 p span { text-transform:uppercase; font-weight:bold; }
#footer2 { background:#1F2527; color:#F1F1EF; padding:1rem 0; text-align:center; }

.row { display:flex; flex-direction:row; flex-wrap:wrap; margin:0.5rem auto; min-width:300px;  }

#home2,#main { padding:4rem 0 3rem 0; }
#home3 { padding:4rem 0 3rem 0; color:#fff; text-align:center; font-size:125%;}
#home4 { padding:4rem 0; }
#home5 {}
#home6 {}




#home { color:#d8ddd9; padding-top:2rem; margin:0; height: 35rem; position:relative; display:block; background:url(https://www.mcfliege.de/assets/images/insects-6043904_1920.jpg) center bottom no-repeat; background-size:cover; }
#home h3 { font-size:3rem; }
#home p { font-size:1.5rem; }
#home p a { margin:0 1rem; border:1px solid #8C1C1C; background:#B32424; border-radius:0.3rem; overflow:hidden; align-self: flex-end;
line-height:100%; font:600 1.25rem 'Yantramanav'; color:#F1BCBC; transition:all 0.3s ease-in-out; text-decoration:none; display:inline-block; padding:0.5rem 1rem; text-transform:uppercase; 
 }
#home p a:hover { background:#ff0000; color:#FDF2F2; transform: scale(1.1); }
#home img { display:grid; border-radius:1rem; box-shadow:4px 4px 4px rgba(0,0,0,0.5);  }


/********************* KONFIGURATOR ************************/
.products_container { display:flex; flex-direction:row; flex-wrap:wrap; margin:0 auto; }
a.product_list { background:#929292; width:calc(20% - 2rem); display:inline-block; margin:1rem; text-decoration:none; border:2px solid #ccc; color:#fff; }
a.product_list img { width:100%; height:auto; display:block;}
a.product_list span { text-align:center; display:block; line-height:1.5rem; font-size:1.1rem; text-transform:uppercase; }

.radio_div label {width:100%;}
.grid5 { width:100px; }

/********************* TOP MENU ************************/
.topmenuToggle {
  background: #019bd4 url(img/icon_menu.png) no-repeat center center;
  border-radius: 3px;
  color: #019bd4;
  display: none;
  margin-top: 20px;
  padding: 0.75em 1.5em;
}
.topmenu { }
.topmenu ul {
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
}
.topmenu li {
  position: relative;
}
.topmenu .level1 > li {
  display: inline-block;
}
.topmenu a { text-decoration:none; color: #304852; text-transform:uppercase; display: block; transition:all 0.3s ease-in-out; padding: 0.5rem 1rem; white-space: nowrap; }
.topmenu a:hover { color: #fff; background:#304852; border-radius:0.2rem; }
.topmenu .active > a {
  font-weight: bold;
}
.topmenu .crumb > a {
  color: #000000;
  font-weight: bold;
}
.topmenu .parent > a {
  padding-right: 30px;
}
.topmenu .parent > a:after {
  content: '\25BC';
  position: absolute;
  right: 5px;
}
.topmenu .level1 ul {
  background-color: #ffffff;
  border: 1px solid #747474;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  display: none;
  position: absolute;
  z-index: 2000;
}
.topmenu li:hover > ul {
  display: block;
}
.topmenu .level2 ul {
  margin-left: 100%;
  top: 0;
}
.topmenuPopup {
  background-color: #ffffff;
  border: 1px solid #747474;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: none;
  left: 0;
  margin-top: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10;
}




.ipWidget-Gallery ._container { display:flex; flex-direction:row; flex-wrap:wrap; }
.ipWidget-Gallery > div > div { width:25%; }
.ipWidget-Gallery > div > div  img { max-width:100%; border:1px solid #ccc; border-radius:.5rem; box-shadow:4px 4px 4px rgba(0,0,0,0.3);}
.ipWidget-Gallery a { display:block; padding:1rem;} 


._nestedCol .ipWidget-Gallery ._container { display:flex; flex-direction:row; flex-wrap:wrap; }
._nestedCol .ipWidget-Gallery > div > div { width:33%; }




._nestedContainer { display:flex; flex-direction:row; flex-wrap:wrap; }
._nestedContainer > div { display:inline-block;}  
._nestedContainer img { max-width:100%; }





.error-text { color: red; }
.valid-error { border: 1px solid red; }
.valid-pass { border: 1px solid green; } 




#login h3 { text-transform:uppercase; font-size:1.33rem; }
.flex { flex-direction:row; flex-wrap:wrap; display:flex; }
.w50:first-child { width:50%; padding:0 2rem  0 0; box-sizing: border-box; }
.w50:last-child { width:50%; padding:0 0 0 2rem; box-sizing: border-box; }
#login label { padding:0.5rem 0; font-weight:bold; }
#login label, #login input { display:block; }
#login input[type="submit"],#buynow,#edit button { font:bold 1rem "Raleway",sans-serif; letter-spacing:0.1rem; padding:0.75rem 1.25rem; text-transform:uppercase; transition:all 0.25s ease-in-out; background:#C6A800; color:#fff; border:1px solid #C6A800;}
#login input[type="submit"]:hover,#buynow:hover,#edit button:hover { color:#C6A800; background:#fff; border:1px solid #C6A800; cursor:pointer; }
#login input[type="email"],#login input[type="text"],#login input[type="password"],#login select {
box-sizing: border-box; border: 1px solid #ddd; padding: 0 .75em;height: 2.507em;font-size: .97em;border-radius: 0;max-width: 100%;
width: 100%;vertical-align: middle;background-color: #fff;color: #333; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);transition: all .3s ease-in-out;
touch-action: manipulation; margin-bottom: 0.5rem;}
#edit label { display:inline-block; width:25%; min-width:200px; padding:0.33rem; }
#edit input,#edit select { display:inline-block; width:70%; min-width:200px; padding:0.33rem;}
#edit input[type="submit"],#edit button { width:70%; min-width:200px; padding:0.33rem; float:right; }



















#fixed {
  position: sticky; background:#fff;
  top: 0; z-index:5 !important;
}

@media all and (min-width:89.99rem) {
.confignow { display:none; }
}
@media all and (max-width:90rem) {
#confignow { display:none; } 
#topline {padding:0;}
}


@media all and (max-width:70rem) {
#logo { width:20rem; }
#logo a { background:url(https://www.mcfliege.de/assets/images/moskitoqs3_logo.png) 10rem center no-repeat; background-size:auto 82%; }
#fixed { padding-top: 10px;}

}




@media (prefers-color-scheme: dark) {
  #fixed { background:#d8ddd9; }
  #confignow a {color:#d8ddd9; }
}