@charset "UTF-8";
html {
  --i: -1;
  --j: -1;
  --r: 0px;
}

.scrolling-wrapper-flexbox { 
	display: flex;
	flex-wrap: nowrap;
	vertical-align: middle;
	overflow: auto;
	width: 100%;
	border: 0px;
	padding: 0px !important;  
	margin:  0px !important;
	overflow-x: scroll; 
	overflow-y: hidden;
	overflow: -moz-scrollbars-none;
  	-webkit-overflow-scrolling: touch;
    scrollbar-color: #464646 #FFFFFF;
    scrollbar-width: auto;	  		
}

.scrolling-wrapper-flexbox .card {
    flex: 0 0 auto;
    min-height: 350px;
    width: 80vh;   
    padding: 1em;
    margin:  0px;
    border: 0px;
}
.scrolling-wrapper-flexbox .card div div h2 {
	color: #004185;
	border-bottom: 2px solid #004185;
}



.ap-bg {
	height: 100%;
	background-blend-mode: luminosity;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("../img/network1920.jpg");
   	height: 70vh;
	min-height: 600px; 
}
.ap-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  padding-top: 4em;
  max-width: 1000px;
  font: 1em/1.5 trebuchet ms, verdana, sans-serif;
}

.ap-header {
  margin: 1rem;
  padding: 1em 0; 
  border-radius: .5em;
  width: 100%;
  background: #fff;
  text-align: center;
}

.ap-article {
  overflow: hidden;
  margin: 1.5rem;
  width: auto;
  min-width: 15rem;
  border-radius: 1em;
  z-index: 1;
  cursor: pointer;
}
.ap-article:nth-of-type(1) {
  --c0: #007AFF;
  --c1: #007AFF;
}
.ap-article:nth-of-type(2) {
  --c0: #DD00FF;
  --c1: #DD00FF;
}
.ap-article:nth-of-type(3) {
  --c0: #E50000;
  --c1: #E50000;
}
.ap-article:nth-of-type(4) {
  --c0: #FF4C00;
  --c1: #FF4C00;
}

.ap-h3, .ap-section {
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  padding: 0.5rem;
}
.ap-h3:before, .ap-section:before {
  position: absolute;
  z-index: -1;
  top: calc(var(--j)*1rem + (1 + var(--j))*50% - var(--r));
  left: calc(var(--i)*1rem + (1 + var(--i))*50% - var(--r));
  padding: var(--r);
  border-radius: 50%;
  box-shadow: 0 0 0 50em;
  content: "";
}

.ap-section {
  color: #FFF;
}
.ap-h3:before {
  color: var(--c1);
}
.ap-h3 {
  justify-content: center;
  color: #fff;
  font-size: 1.75em;
  text-align: center;
  min-height: var(--r);
}
.ap-h3:before {
  opacity: 0.65;
}

.ap-section {
  justify-content: space-between;
  min-height: calc(var(--r) - 1rem);
}
.ap-section:before {
  color: var(--c0);
}

.ap-p {
  margin-right: 1em;
  font-size: .875em;
}

.ap-a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
.ap-a:after {
  content: " >>";
}

@media (min-width: 34rem) {
  .ap-bg {
    --r: 6rem;
  }

  .ap-header {
    position: relative;
  }
  .ap-header:before, .ap-header:after {
    position: absolute;
    left: 50%;
    content: "";
  }
  .ap-header:before {
    top: 100%;
    width: calc(.0625*var(--r));
    height: calc(2*var(--r) - 0.8rem);
    transform: translate(-50%);
    background: inherit;
  }
  .ap-header:after {
    top: calc(3*1rem + 3.125*var(--r));
    border: solid calc(.375*var(--r)) transparent;
    padding: calc(.375*var(--r));
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 5px #fff;
    background: #fff padding-box;
  }

  .ap-article {
    width: 45%;
  }
  .ap-article:nth-of-type(-n + 2) {
    --j: 1;
  }
  .ap-article:nth-of-type(odd) {
    --i: 1;
  }
  .ap-article:nth-of-type(-n + 2) h3:before, 
  .ap-article:nth-of-type(n + 3) section:before {
    --r: 0;
  }
  .ap-article:nth-of-type(-n + 2) section, 
  .ap-article:nth-of-type(n + 3) h3 {
    padding-right: calc(.5*(1 + var(--i))*(var(--r) - 1rem) + 0.5rem);
    padding-left: calc(.5*(1 - var(--i))*(var(--r) - 1rem) + 0.5rem);
  }
}
.order.callout {
    background-color: transparent;
    border-left: 0px;
    border-right: 0px;
    padding: 0.5em;
    color: #464646;
}
.order_product_uvp {
    font-size: 14pt; 
    color:#464646;    
}
.order_product_uvp.action {
    text-decoration: line-through;
}
.order_product_action {
    font-size: 14pt; 
    font-weight: bold; 
    background-color: #DB3030; 
    color:#FFFFFF; 
    border-radius: 6px; 
    padding:4px;
}
.order_product_price {
    font-size: 24pt; 
    font-weight: bold; 
    color:#007AFF;
}
.order.hollow.button {
    color: #007AFF;     
}
.order.hollow.button:hover {
    background-color: #007AFF;
    color: #FFFFFF; 
}
.ordersend.button {
    font-size: 14pt;
    font-weight: bold;
    background-color: #F6CF00; 
    color: #011B27;  
}
.ordersend.button:hover {
    background-color: #F6E900;
}