/************/
/* Generell */
/************/
body {
font-family: 'Marcellus', serif !important;
background: #fff;
}
body p {
font-size: 14px;
letter-spacing: 1px;
}
body h1, h2, h3, h4, h5, h6 {
color: #0AB2EA;
font-weight: bold;
line-height: 28px;
display: block;
}
a:hover {
text-decoration: underline;
}
hr { 
width: 90%; 
height: 2px; 
margin: 0 auto;
background: #0AB2EA;
}
select {
margin-bottom: 10px;
}

/************/
/*  Frame   */
/************/
.logo_title {
margin-top: 28px;
color: #0AB2EA;
font-size: 28px;
font-weight: bold;
}
#quote {
display: block;
text-align: center;
padding-top: 28px;
font-size: 18px;
font-weight: bold;
}
.title_sec {
margin: 0 auto;
}
.title_sec h1 h2 h3 {
text-transform: none;
letter-spacing: 1px;
color: #0AB2EA; 
font-weight: bold;
}
.title_sec h1 {
font-size: 40px;
text-align: center;
}
.title_sec h2 {
font-size: 20px;
text-align: center;
}
.title_sec h3 {
font-size: 18px;
text-align: center;
}
.title_sec h4 {
font-size: 16px;
text-align: center;
color: #5E5E5E;
}
.title h1 {
background-color: #F0F0F0;
font-size: 24px;
text-align: center;
margin-top: 0px;
}
.title h2 {
font-size: 20px;
text-align: center;
}
.title h3 {
font-size: 16px;
text-align: center;
}
.title h4 {
font-size: 14px;
text-align: left;
}
.title h5 {
font-size: 14px;
text-align: center;
}
.title h7 {
font-size: 16px;
text-align: left;
}
.title h6 {
color: #5E5E5E;
font-size: 18px;
text-align: center;
}
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
background: #fff;
}
#loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50%;
border: transparent solid 3px;
border-top-color: #3498db;
animation: spin 2s linear infinite;
}
#loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: transparent solid 3px;
border-top-color: #444;
animation: spin 3s linear infinite;
}
#loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: transparent solid 3px;
border-top-color: #1487b2;
animation: spin 1.5s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.main_menu_sec {
background: none 0 0 repeat scroll #FFF;
border: none 0;
margin: 0;
}
.navbar {
padding: 10px 0;
transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
}
#nav_menu ul {
float: right;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
}
#nav_menu ul a {
color: #0AB2EA;
display: block;
font-weight: bold;
line-height: 32px;
padding: 25px 14px;
text-decoration: none;
transition: all 0.4s 0s ease;
font-size: 14px;
}
#nav_menu ul li {
float: left;
padding: 0;
position: relative;
}
#nav_menu ul li a:hover {
transition: all 0.4s 0s ease;
background: #0078BF;
}
#nav_menu ul ul {
background: none 0 0 repeat scroll #0078bf;
display: none;
left: 0;
padding: 0;
position: absolute;
top: 100%;
z-index: 9999;
padding: 10px;
}
#nav_menu ul ul li {
float: none;
width: 200px;
}
#nav_menu ul ul a {
line-height: 120%;
padding: 10px 29px;
}
#nav_menu ul ul li a:hover {
transition: all 0.4s 0s ease;
background: #333333;
}
#nav_menu ul ul ul {
top: 0;
left: 100%;
}
#nav_menu ul li:hover > ul {
display: block;
}
#nav_menu ul li a i {
margin-left: 6px;
}
#help_sec {
height: 180px;
background-color: #F0F0F0;
}
#circles {
position: inherit;
text-align: center;
}
.circle {
background-color: #0AB2EA;
display: inline-block;
width: 130px;
height: 130px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
cursor: pointer;
}
/* Definieren des Hover Zustandes */
.circle:hover {
-moz-transform: translate(0, -3px);
-webkit-transform: translate(0, -3px);
-o-transform: translate(0, -3px);
transform: translate(0, -3px);
}
#circles p {
font-weight: bold;
font-size: 18px;
color: #FFF;
}
#circles div {
padding-top: 25px;
}
#circles a {
text-decoration: none;
}
#circles i {
color: #80FFFF;
}
#ft_sec {
margin-top: 10px;
background-color: #F0F0F0;
display: block;
height: 40px;
/*position: static;*/
}
#ft_sec p {
color: #0AB2EA;
font-weight: bold;
margin-top: 10px;
}
#ft_sec a {
font-weight: bold;
color: #0AB2EA;
font-size: 14px;
}
#ft_sec a:link {
text-decoration: none;
}
#ft_sec a:visited {
text-decoration: none;
}
#ft_sec a:hover {
text-decoration: underline;
}
#ft_sec a:active {
text-decoration: none;
}

/************/
/* Sections */
/************/
.about {
margin: 0 auto;
text-align: center;
}
#about_sec {
margin: 0 auto;
display: block;
padding: 50px 0;
}
.lookup {
display: block;
text-align: center;
vertical-align: middle;
width: 100%;
}
#lookup_sec {
display: block;
background-image: url("../img/highway.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
#leadgen {
display: inline-block;
margin-top: 50px;
margin-bottom: 50px;
background-color: #f0f0f0;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#leadgen h3 {
margin-top: 15px;
}
#cloud_sec {
margin: auto;
width: 100%;
background: #f0f0f0;
padding: 30px 0;
display: block;
}
#aweicon {
color: #0AB2EA;
text-shadow: 5px 5px 5px #ccc;
}
#isdn_sec {
padding: 50px 0;
margin: 0 auto;
display: block;
}
#isdn_sec h2 {
color: #666666;
font-size: 16px;
}
#hardware_sec {
background: none 0 0 repeat scroll #f0f0f0;
padding: 20px 0;
margin: 0 auto;
display: block;
}
#hardware_sec ul.filter {
color: #2e2e2e;
}
#hardware_sec ul.filter li {
color: #666666;
cursor: pointer;
display: inline-block;
font-size: 18px;
margin-right: 5px;
padding: 5px 25px;
position: relative;
}
#hardware_sec ul.filter li:hover {
color: #0AB2EA;
}
#hardware_sec ul.filter li.active {
border-bottom: 3px solid #0AB2EA;
}
#hardware_sec .single-portfolio {
float: left;
padding-bottom: 20px;
width: 275px;
text-align: center;
}
.single-portfolio h3 {
font-size: 18px;
}
#hardware_sec .single-portfolio:hover .img_hoverlay {
display: block;
}
/* from https://davidwalsh.name/css-flip for integration_sec */
.flip {
display: block;
}
.flip h1 {
font-size: 18px;
}
.flip-container {
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
transform-style: preserve-3d;
margin: 0 auto;
}
.flip-container:hover .back {
transform: rotateY(0deg);
}
.flip-container:hover .front {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 250px;
height: 400px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
.flipper {
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
text-align: center;
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
-ms-transition: 0.6s;
-ms-transform-style: preserve-3d;
backface-visibility: hidden;
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
}
.front {
z-index: -2;
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.back {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
background-color: #f0f0f0;
}
#integration_sec {
margin: 0 auto;
display: block;
}
#integration_sec h2 {
text-align: center;
font-size: 16px;
}
#clients_sec {
padding: 25px 0;
margin: 0 auto;
display: block;
}
.clients {
transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-webkit-transition: all 1s ease 0s;
border: 1px solid #eeeeee;
cursor: pointer;
text-align: center;
padding: 10px 0;
text-transform: none;
}
.clients:hover .clients_hoverly {
display: block;
height: 160px;
position: absolute;
margin-right: 15px;
}
.clients > h1 {
color: #515050;
font-size: 18px;
font-weight: 400;
text-transform: none;
}
.clients > h2 {
color: #515050;
font-weight: 400;
}
.clients_hoverly {
-moz-transition: all 1s ease 0s;
-webkit-transition: all 1s ease 0s;
transition: all 1s ease 0s;
border: 2px solid #0AB2EA;
padding: 15px 5px;
position: absolute;
display: none;
top: 0;
background: #fff;
}
.clients_hoverly a {
text-decoration: none;
}
#partners_sec {
background: #F0F0F0;
padding: 30px 0;
}
#partners_sec h1 {
text-align: center;
}

/***********/
/*  Pages  */
/***********/
/* dienste.html */
#gap {
padding-left: 50px;
padding-top: 20%;
text-align: center;
}
#noflip {
padding: 20px;
text-align: justify;
font-weight: bold;
}

/* kontakt.html */
.form-group {
color: #5E5E5E;
text-align: left;
margin: 0;
padding: 0;
}
.control-label {
margin-top: 5px;
}
.g-recaptcha {
margin-left: 20px;
margin-top: 15px;
}
.asteriskField { 
color: red;
font-size: 1.0em;
}
.checkbox {
text-align: center;
margin-bottom: 10px;
}
.address p {
text-align: center;
color: #5E5E5E;
}
.address a {
color: #5E5E5E;
}
.address a:hover  {
color: #0AB2EA !important;
}
.address h1 {
color: #0AB2EA !important;
text-align: center;
}
.help-block .label {
color: #5E5E5E;
}
#recaptcha_error {
text-align: center;
color: #F00;
}

/* glossar.html */
#alphabetic {
display: block;
margin-left: 12%;
text-align: center;
}
#alphabetic li {
float: left;
margin: 1px 1px 0 0;
list-style: none;
text-align: center;
}
#alphabetic a {
position: relative;
width: 30px;
height: 32px;
border: 1px solid #0AB2EA;
text-decoration: none;
font: 2.0em/1.0em "Times New Roman";
display: block;
color: #0AB2EA;
}
#alphabetic a span {
width: 30px;
height: 32px;
display: block;
position: absolute;
top: 0;
left: 0;
}
#alphabetic a:hover span.first {
font-weight: bold;
color: #E0E0E0;
cursor: pointer;
background: #0AB2EA;
}
.big-letter {
background: #0AB2EA;
margin: 40px 0 0;
padding: 8px 13px;
display: block;
text-align: center;
width: 45px;
font-size: 1.6em;
font-weight: bold;
color: #fff;
}
.letters-bg {
background-color: #f0f0f0;
margin: 15px 0 0 0;
padding: 8px 20px;
font-size: 1.3em;
word-spacing: .4em;
line-height: 1.4em;
}

/* glossar.html und faq.html */
#glossar-nobg {
margin-bottom: -10px;
}
.glossar-bg {
background-color: #f0f0f0;
margin: 15px 0 0 0;
padding: 2px 20px 15px 20px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;	
}
.glossar-bg h3 {
margin: 20px 0 0;
padding: 0;
font-size: 1.4em;
font-weight: bold;
text-transform: none;
}
.glossar-bg p ul li {
font-size: 1.0em;
line-height: 1.4;
margin-bottom: 10px;
}
.letters-bg-bottom {
background-color: #f0f0f0;
margin: 40px 0 30px 0;
padding: 10px 20px;
font-size: 1.4em;
word-spacing: .4em;
line-height: 1.4em;
}

/* faq.html */
.faq-bg {
background-color: #f0f0f0;
margin: 15px 0 0 0;
padding: 2px 10px 0 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;	
}
/* FAQ-Umschalter */
input.hackbox {
display: none;
font-size: 12px;
}
span.volltext {
display: none;
font-size: 14px;
} 
label.mehr_lesen {
color: #0AB2EA;
cursor: pointer;
font-size: 14px;
} 
label.mehr_lesen::before {
content:" mehr";
color: #0AB2EA;
}
input.mehr_lesen:checked ~ span.volltext {
display: inline;
}  
input.mehr_lesen:checked ~ label.mehr_lesen::before {
content:" weniger";
color: #0091D2;
}

/* impressum.html */
.impressum {
padding-left: 40px;
}