@font-face {
font-family:'Anaheim';
font-style:normal;
font-weight:400;
src: url('https://www.connexo.org/schrift/anaheim-v7-latin-regular.eot'); 
src: local('Anaheim'), local('Anaheim-Regular'),
url('https://www.connexo.org/schrift/anaheim-v7-latin-regular.eot?#iefix') format('embedded-opentype'), 
url('https://www.connexo.org/schrift/anaheim-v7-latin-regular.woff2') format('woff2'), 
url('https://www.connexo.org/schrift/anaheim-v7-latin-regular.woff') format('woff'), 
url('https://www.connexo.org/schrift/anaheim-v7-latin-regular.ttf') format('truetype'), 
url('https://www.connexo.org/schrift/anaheim-v7-latin-regular.svg#Anaheim') format('svg'); 
}

@font-face {
font-family: 'Assistant';
font-style: normal;
font-weight: 800;
src: url('../fonts/assistant-v18-latin-800.eot'); 
src: local(''),
url('../fonts/assistant-v18-latin-800.eot?#iefix') format('embedded-opentype'), 
url('../fonts/assistant-v18-latin-800.woff2') format('woff2'),
url('../fonts/assistant-v18-latin-800.woff') format('woff'), 
url('../fonts/assistant-v18-latin-800.ttf') format('truetype'), 
url('../fonts/assistant-v18-latin-800.svg#Assistant') format('svg'); 
}

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; }
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;} 

html{
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}

.bg, .portrait { 
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

body { font-family:'Anaheim'; font-size:17px; color:#555; }

a, a > * {-webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; text-decoration:none}
p { padding:8px } /* in der box */

b {color:#000}

.header {padding:0px; width:100%; position:relative; margin:0px auto;}
.logo {font-family: "Assistant"; font-size:16px; float:right; padding: 80px; font-weight:800; letter-spacing:6px; text-align:right}


h1, h2, h3, h4 {
font-family: "Assistant"; font-size:16px; font-weight:800; color:#000; letter-spacing:3px; padding:8px; text-transform: uppercase;	
}

h2, h3, h4 {
color:#444;		
}

.container { padding:0px; width:1440px; position:relative; margin:75px auto 50px auto;}
.col1-3 { width:300px; height:300px; margin:30px; float:left;  /* background:#fcfcfc */ }
.col2-3 { width:660px; height:300px; margin:30px; float:left;  /* background:#fcfcfc */ }
.col1-3.auto, .col2-3.auto  {height:auto; }

.ausrichtung {text-align:right}
.overflow, .box {overflow:hidden; }




.section {
min-height: 100vh;
}
.section:nth-child(1){
background: #fff;
}
.section:nth-child(2){
background: #fafafa;
} 
.section:nth-child(3){
background: #fff;
}


/*
([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
*/

.section_black {
background: #222;
font-size: calc(17px + (40 - 17) * ((100vw - 300px) / (1600 - 300)));
color:#feffef;
width:50%;
float: left;
padding:7vw;
}

.section_darkgray {
background: #333;
font-size: calc(17px + (40 - 17) * ((100vw - 300px) / (1600 - 300)));
color:#feffef;
width:50%;
float: right;
padding:7vw;
}

.footer {
float: left;
background: #fff;
font-size: 17px;
padding:50px;
color:#222;
width:100%;
text-align:center;
}

.pfeilposition { 
position:relative;
margin:0px auto;
bottom: 0px;
left:0px;
text-align:center;
}


/* hüpfender pfeil senkrecht */
@keyframes senkrecht { 
0% {transform: translatey(0px);}50% {transform: translatey(-20px);}100% {transform: translatey(0px);}
}

@-webkit-keyframes senkrecht { 
0% {transform: translatey(0px);}50% {transform: translatey(-20px);}100% {transform: translatey(0px);}
}

@-moz-keyframes senkrecht { 
0% {transform: translatey(0px);}50% {transform: translatey(-20px);}100% {transform: translatey(0px);}
}

@-o-keyframes senkrecht { 
0% {transform: translatey(0px);}50% {transform: translatey(-20px);}100% {transform: translatey(0px);}
}
/* Ende pfeil senkrecht */




/* hüpfender pfeil waagrecht */
@keyframes waagrecht { 
0% {transform: translatex(0px);}50% {transform: translatex(20px);}100% {transform: translatex(0px);}
}

@-webkit-keyframes waagrecht { 
0% {transform: translatex(0px);}50% {transform: translatex(20px);}100% {transform: translatex(0px);}
}

@-moz-keyframes waagrecht { 
0% {transform: translatex(0px);}50% {transform: translatex(20px);}100% {transform: translatex(0px);}
}

@-o-keyframes waagrecht { 
0% {transform: translatex(0px);}50% {transform: translatex(20px);}100% {transform: translatex(0px);}
}
/* Ende pfeil waagrecht */



#highlight {    
background-size: 200% auto; 
background-image: linear-gradient(to right,#fff 50%, rgba(47, 96, 189, 0.2) 50%);
background-position: 0% 0;
animation-name: highlight;
animation-duration: 6s;
animation-delay: 6s;
animation-iteration-count: 3; /* infinite */
animation-fill-mode: forwards;
}
@keyframes highlight {from {background-position: 0% 0;} to {background-position: -100% 0;} }


.umbruch {   
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}



.animated_up {
position: relative;
transform: translateY(150px);
opacity: 0;
transition: 2s all ease;
transition-delay: 1s;
}

.animated_up.active {
transform: translateY(0);
opacity: 1;
}

.animated_left {
position: relative;
transform: translateX(-150px);
opacity: 0;
transition: 2s all ease;
transition-delay: 1s;
}

.animated_left.active {
transform: translateX(0);
opacity: 1;
}




.flip-card {
background-color: transparent;
width: 100%;
height: 100%;
}

.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
-webkit-transition: 1s width linear; 
transition: transform 1s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
-ms-transform: rotateY(180deg);	
-o-transform: rotateY(180deg);	
-webkit-transform: rotateY(180deg);	
transform: rotateY(180deg);

}

.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; 
backface-visibility: hidden;
}

.flip-card-front {
background-color: #fcfcfc;
color: #111;
padding:30px;
}

.flip-card-back {
background-color: #333;
color: #eee;
padding:30px;
-ms-transform: rotateY(180deg);	
-o-transform: rotateY(180deg);	
-webkit-transform: rotateY(180deg);	
transform: rotateY(180deg);
}



.btn-flip {
opacity: 1;
outline: 0;
color: #fff;
line-height: 40px;
position: relative;
text-align: center;
letter-spacing: 1px;
display: inline-block;
text-decoration: none;
font-family: 'Anaheim', sans-serif;
text-transform: uppercase;
}
.btn-flip:hover:after {
opacity: 1;
-ms-transform: translateY(0) rotateX(0);
-o-transform: translateY(0) rotateX(0);
-webkit-transform: translateY(0) rotateX(0);
transform: translateY(0) rotateX(0);
}
.btn-flip:hover:before {
opacity: 0;
transform: translateY(50%) rotateX(90deg);
}
.btn-flip:after {
top: 0;
left: 0;
opacity: 0;
width: 100%;
color: #fff;
display: block;
transition: 0.8s;
position: absolute;
background: #555;
content: attr(data-back);
-ms-transform: translateY(-50%) rotateX(90deg);
-o-transform: translateY(-50%) rotateX(90deg);
-webkit-transform: translateY(-50%) rotateX(90deg);
transform: translateY(-50%) rotateX(90deg);
}
.btn-flip:before {
top: 0;
left: 0;
opacity: 1;
color: #fff;
display: block;
padding: 0 30px;
line-height: 40px;
transition: 0.5s;
position: relative;
background: #323;
content: attr(data-front);
-ms-transform: translateY(0) rotateX(0);
-o-transform: translateY(0) rotateX(0);
-webkit-transform: translateY(0) rotateX(0);
transform: translateY(0) rotateX(0);
}

.centered {
text-align:center;
}

#zeit { /* kleine Uhr am Ende */
padding:30px;
}



/* Kalender */
table  {
border:0px solid #aaa;
border-collapse:collapse;
}

th { 
color:#ccc;
height:42px;
font-weight:normal;
margin-top: -10px;
}

td {
font-family: 'Anaheim', sans-serif;
font-size:17px;
color:#666;
border:0px solid #ccc;
height:48px;
width:39px;
text-align:center;
}
/* Ende Kalender  */



.transitions-enabled.masonry,
.transitions-enabled.masonry .masonry-brick {
-webkit-transition-duration: 0.7s;
-moz-transition-duration: 0.7s;
-ms-transition-duration: 0.7s;
-o-transition-duration: 0.7s;
transition-duration: 0.7s;
}

.transitions-enabled.masonry {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}

.transitions-enabled.masonry  .masonry-brick {
-webkit-transition-property: left, right, top;
-moz-transition-property: left, right, top;
-ms-transition-property: left, right, top;
-o-transition-property: left, right, top;
transition-property: left, right, top;
}


/* disable transitions on container */
.transitions-enabled.infinite-scroll.masonry {
-webkit-transition-property: none;
-moz-transition-property: none;
-ms-transition-property: none;
-o-transition-property: none;
transition-property: none;
}

* html .clearfix { height:1%; }
.clearfix { display:block; }
.clearfix:after { content: "."; display:block; height:0; clear:both; visibility:hidden; }

footer { background:#fff; position:relative; color:#aaa; padding:55px; }
#toTop, #backtotop{ color:#aaa; margin-bottom:30px; display:none;}


.tooltip {
cursor: pointer;
}

.tooltiptext {
visibility: hidden;
background-color:#222;
color: #fff;
text-align: center;
padding: 5px;
position: absolute;
top:10px;
left:10px;
z-index: 10;
}

.tooltip.active .tooltiptext {
visibility: visible;
}

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {

}

@media only screen and (max-width: 1470px) {

.container { padding:0px; width:1080px; position:relative; margin:150px auto 50px auto; }

#wrapper {width:1080px; }

}

@media only screen and (max-width: 1020px) {
.container { padding:0px; width:720px; position:relative; margin:150px auto 50px auto;}

#wrapper {width:720px; }
.ausrichtung {text-align:left}	
}

@media only screen and (max-width: 1019px) {
.container { padding:0px; width:720px; position:relative; margin:150px auto 50px auto;}

#wrapper {width:720px; }
.ausrichtung {text-align:left}
.bg { display:none;}
}

@media only screen and (max-width: 767px) {
.leer {display:none;}
.container { padding:0px; width:360px; position:relative; margin:50px auto 50px auto;}
.col1-3 { width:300px; padding-bottom:30px;}
.logo {float:left; padding: 30px 50px;}
#wrapper {width:360px; }
.section_darkgray, .section_black {float:left; width:100%; text-align:center;}
}