/*
Description: CSS3
Customer: Gaficon GmbH
Customer URI: http://gaficon.de
Author: Ralph Segert
Author URI: http://appverstand.com
*/


* {
margin: 0;
padding: 0;
}
body {
color: #fff;
background-color: #333;
font-size: 100%;
font-family: 'OpenSans-Light', Verdana, 'Neue Helevetica', sans-serif;  
}
a:focus {
outline: none;
}
img, fieldset {
border: 0;
}
img {
vertical-align: middle;
}
a {
border: 0;
text-decoration: none;
}
strong {
font-family: 'OpenSans-Light', Verdana, 'Neue Helevetica', sans-serif;  
}

@font-face { 
font-family: 'OpenSans-Cond';
src: url('font/opensanscond/OpenSans-Cond.eot');
src: url('font/opensanscond/OpenSans-Cond.eot?iefix') format('eot'),
url('font/opensanscond/OpenSans-Cond.woff') format('woff'),
url('font/opensanscond/OpenSans-Cond.ttf') format('truetype'),
url('font/opensanscond/OpenSans-Cond.svg#webfont') format('svg');
}
@font-face { 
font-family: 'OpenSans-Regular';
src: url('font/opensans_regular/OpenSans-Regular.eot');
src: url('font/opensans_regular/OpenSans-Regular.eot?iefix') format('eot'),
url('font/opensans_regular/OpenSans-Regular.woff') format('woff'),
url('font/opensans_regular/OpenSans-Regular.ttf') format('truetype'),
url('font/opensans_regular/OpenSans-Regular.svg#webfont') format('svg');
}
@font-face { 
font-family: 'OpenSans-Light';
src: url('font/opensans_light/OpenSans-Light.eot');
src: url('font/opensans_light/OpenSans-Light.eot?iefix') format('eot'),
url('font/opensans_light/OpenSans-Light.woff') format('woff'),
url('font/opensans_light/OpenSans-Light.ttf') format('truetype'),
url('font/opensans_light/OpenSans-Light.svg#webfont') format('svg');
}
@font-face { 
font-family: 'OpenSans-Semibold';
src: url('font/opensans_bold/OpenSans-Semibold.eot');
src: url('font/opensans_bold/OpenSans-Semibold.eot?iefix') format('eot'),
url('font/opensans_bold/OpenSans-Semibold.woff') format('woff'),
url('font/opensans_bold/OpenSans-Semibold.ttf') format('truetype'),
url('font/opensans_bold/OpenSans-Semiboldt.svg#webfont') format('svg');
}


.cc_container .cc_btn {
background-color: #e4e4e4 !important; 
color: #000 !important;
border-bottom: 0;
}
 
.cc_container {
background: #333 !important;
color: #ddd !important; 
font-size: 80% !important;
padding-left: 5% !important;
padding-right: 3% !important;
}
 
.cc_container a {
color: #fff !important;
border-bottom: 1px solid #c00;
line-height: 26px !important;
}

.cc_container a:hover {
color: #fff !important;
background-color: #000 !important;
}

/* Wrapper */

.wrapper {
margin: 0 auto;
width: 100%;
min-width: 320px;
max-width: 1440px;
border-left: 1px solid #999;
border-right: 1px solid #999;
background: #575759 url(images/bg-start3.jpg) top center no-repeat;
}
.wrap-loesungen {
background: #575759 url(images/bg-loesungen2.jpg) top center no-repeat;
}
.wrap-unternehmen {
background: #575759 url(images/bg-unternehmen2.jpg) top center no-repeat;
}
.wrap-kompetenzen {
background: #575759 url(images/bg-kompetenzen2.jpg) top center no-repeat;
}
.wrap-referenzen {
background: #575759 url(images/bg-referenzen2.jpg) top center no-repeat;
}
.wrap-kontakt {
background: #575759 url(images/bg-kontakt3.jpg) top center no-repeat;
}
.wraphead {
margin: 0 auto;
width: 100%;
max-width: 960px;
}
.wrapnav {
margin: 0 auto;
width: 100%;
max-width: 799px;
height: 51px;
opacity: 0.86;
background: #575759;
border: 1px solid #979797;
border-radius: 12px;
}
.wrapstart {
margin: 0 auto;
width: 100%;
max-width: 610px;
min-height: 770px;
}
.wrapcont {
margin: 0 auto;
width: 100%;
max-width: 800px;
margin-top: 30px;
min-height: 765px;
}
.wrapfooter {
margin: 0 auto;
width: 100%;
max-width: 1440px;
padding-bottom: 3%;
border-bottom: 1px solid #999;
}


/* Headerbereich */

.wraphead .header  { /* Logo Box */
float: left;
width: 100%;
background: url(images/gaficon-logo-hell.png) top  no-repeat;
background-size: 28%;
margin-top: 36px;
margin-bottom: 0;
}

.wraphead .logostart  { /* Logo Box */
background: url(images/gaficon-logo-neu2.png) top  no-repeat;
background-size: 28%;
margin-bottom: 5%;
margin-top: 54px;
}

.wraphead h1 a { 
display: block;
width: 40%;
margin: 0 30% 0 30%;
height: 104px;
text-align: center;
border-radius: 12px;
}
.wraphead b {
display: none;
}

/* Navigation */

.wrapnav .header {
margin: 0 auto;
width: 100%;
}
.wrapnav .nav {
width: 100%;
float: left;
}
.wrapnav .nav ul li {
float: left;
list-style: none;
}
.wrapnav .nav li {
text-align: center;
width: 16.666666666%; 
font-size: .9em;
}
.wrapnav .nav li a {
display: block;
color: #fff;
padding: 16px 0 16px 0;
}
.wrapnav .nav li a:hover {
color: #ccc;
background-color: #44508c;
transition: all .4s;
-moz-transition: all .4s;
}
.wrapnav .nav li:first-of-type a:hover {
border-bottom-left-radius: 12px;
border-top-left-radius: 12px;
}
.wrapnav .nav li:last-of-type a:hover {
border-bottom-right-radius: 12px;
border-top-right-radius: 12px;
}
.wrapnav .nav .aktiv {
color: #fff;
background-color: #777978;
}
.wrapnav .nav .aktiv:last-of-type {
border-bottom-right-radius: 12px;
border-top-right-radius: 12px;
}
.wrapnav .nav a#pull { /* responsive Hauptnavi */
display: none;
}


/* Contentbereich Startseite */

.wrapstart .section {
float: left;
width: 100%;
}
.wrapstart .box305left {
float: left;
width: 50%;
margin-bottom: 28px;
}
.wrapstart .box305right {
float: right;
width: 50%;
text-align: right;
margin-bottom: 28px;
}
.wrapstart .boxleft {
float: left;
width: 29.180327868%;
text-align: center;
}
.wrapstart .boxmid {
float: left;
width: 29.180327868%;
margin-left: 6.229508196%;
margin-right: 6.229508196%;
margin-bottom: 28px;
}
.wrapstart .boxright {
float: left;
width: 29.180327868%;
text-align: center;
}
.wrapstart .case {
border-radius: 12px;
border-bottom-left-radius: 14px;
border-bottom-right-radius: 14px;
background-color: #fff;
width: 58.360655737%;
text-align: center;
box-shadow: 3px 3px 7px 0px rgba(64,64,64,0.50);
}
.wrapstart .boxmid .case {
border-radius: 12px;
border-bottom-left-radius: 14px;
border-bottom-right-radius: 14px;
background-color: #fff;
width: 100%;
text-align: center;
box-shadow: 3px 3px 7px 0px rgba(64,64,64,0.50);
}
.box305right .case {
float: right;
}
.box305left .case, .boxmid .case {
float: left;
}
.wrapstart .case .figure {
position: relative;
width: 100%;
top: 14px;
overflow: hidden;
z-index: 20;
margin-top: 2%;
}
.wrapstart .figure img {
width: 58.181818181%;
height: auto;
}
.wrapstart h2 {
position: relative;
font-size: 1.1em;
letter-spacing: 1px;
font-weight: normal;
text-align: center;
z-index: 30;
}
.wrapstart h2 a {
float: left;
width: 100%;
color: #fff;
background-color: #676767;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
padding-top: 13.5%;
padding-bottom: 16%;
transition: .4s;
}
.wrapstart h2 a:hover {
opacity: 0.5;
background-color: #fff;
}
.wrapstart h2 a:hover {
color: #44508c;
opacity: 1;
background-color: transparent;
text-shadow: 1px 1px 3px #aaa;
}
.wrapstart h3 {
font-size: 1.5em;
letter-spacing: 2px;
line-height: 1.4em;
font-weight: normal;
text-align: center;
padding-top: 30%;
z-index: 30;
}


/* Contentbereich Kategorienseiten */

.wrapcont h1 {
float: left; 
width: 100%;
font-size: 1.4em;
font-weight: normal;
letter-spacing: 1px;
background-color: #777978;
border: 1px solid #979797;
border-bottom: 0;
opacity: .86;
border-top-right-radius: 12px;
border-top-left-radius: 12px;
padding: 2.5% 5% 2.5% 12.2%;
-moz-box-sizing: border-box; 
box-sizing: border-box;
}
.wrapcont .iconloesung {
background: #777978 url(images/icon-loesungen-hell.png) center right no-repeat;
background-size: 11%;
background-position: 90%;
}
.wrapcont .iconunternehmen {
background: #777978 url(images/icon-unternehmen-hell.png) center right no-repeat;
background-size: 11%;
background-position: 90%;
}
.wrapcont .iconkompetenzen {
background: #777978 url(images/icon-kompetenzen-hell.png) center right no-repeat;
background-size: 11%;
background-position: 90% 40%;
}
.wrapcont .iconreferenzen {
background: #777978 url(images/icon-referenzen-hell.png) center right no-repeat;
background-size: 11%;
background-position: 90%;
}
.wrapcont .iconkontakt {
background: #777978 url(images/icon-kontakt-hell.png) center right no-repeat;
background-size: 11%;
background-position: 90%;
}
#accordion a, #accordion-no p a {
color: #ddd;
border-bottom: 1px dotted #999;
}
#accordion a:hover, #accordion-no p a:hover {
color: #fff;
border-bottom: 1px dotted #eee;
}


/* Seite Loesungen mit Accordion-Effekt */

#accordion {
float: left;
width: 100%;
}
.accordion-header {
height: 54px;
border: 1px solid #979797;
border-top: 0;
opacity: .9;
background: #44508c;
text-align: left;
}
.accordion-header:hover {
background: #44508c;
transition: .8s;
}
.accordion-header:hover h2 {
color: #fff;
transition: .4s;
}
.focus, .focus h2 { /* Kopf des aktiven Pannels mit Formatierung der H2 */
color: #fff;
background: #44508c;	
}
.focus h2:before { /* Kopf des aktiven Pannels mit Minuszeichen */
content:"-";
font-size: 1.2em;
padding: 0 5.2% 0 5.2%;	
}
.focus h2 span {
display: none;
}
.accordion-content {
display: none;
z-index: 1;
background: #505052;
border-left: 1px solid #979797;
border-right: 1px solid #979797;
opacity: .88;
padding: 2% 10% 7% 12.4%;
-moz-box-sizing: border-box; 
box-sizing: border-box;
}
.accordion-content:last-of-type {
border-bottom: solid 1px #979797;
}
.accordion-content:first-of-type {
border-bottom: 0;
}

.h2 { /* Formatierung der Koepfe fuer die Accordion-Pannels */ 
font-size: 1em;
letter-spacing: 1px;
color: #fff;
font-weight: normal;
padding: 12px 5% 0 1.8%;
}

.accordion-content h3, .accordion-no-content h3 {
font-size: 1.3em;
color: #fff;
line-height: 1.6em;
font-weight: normal;
text-align: left;
padding: 5% 3% 2.5% 0;
}
.accordion-content h4, .accordion-no-content h4 {
font-size: 1.2em;
color: #C8D0F7;
line-height: 1.6em;
font-weight: normal;
text-align: left;
padding: 0 3% 3% 0;
}
.accordion-content p, .accordion-no-content p {
font-size: .9em;
color: #fff;
padding-bottom: 2%; 
line-height: 2em;
}
.accordion-content ul, .accordion-no-content ul {
font-size: .9em;
color: #fff;
padding-bottom: 2%;
padding-top: 1%;
margin-left: 20px;
line-height: 2em;
}
.accordion-content ul li, .accordion-no-content ul li {
list-style-type: square;
padding-bottom: 7px;
}
.openpfeil {
color: #fff;
padding: 0 4.6% 0 5%;
font-size: 1.2em;
}
.imgcont {
opacity: 1;
padding-top: 22px;
}
.imgcont img {
margin: 20px;
}


/* Seite Loesungen OHNE Accordion-Effekt */

#accordion-no {
float: left;
width: 100%;
}
.single-header {
height: 54px;
background: #44508c;
opacity: .9;
border-left: 1px solid #979797;
border-right: 1px solid #979797;
text-align: left;
}
.accordion-no-content {
z-index: 1;
background: #505052;
border-left: 1px solid #979797;
border-right: 1px solid #979797;
opacity: .88;
padding: 2% 10% 7% 12.4%;
-moz-box-sizing: border-box; 
box-sizing: border-box;
}
.h2header {
font-size: 1em;
letter-spacing: 1px;
color: #fff;
font-weight: normal;
padding: 14px 5% 0 12%;
}
.headerback {
height: 54px;
background: #777978;
text-align: center;
padding: 22px 0 0 0;
border: 1px solid #979797;
border-top: 0;
}
#accordion-no .buttonback {
font-size: 1em;
letter-spacing: 1px;
color: #fff;
font-weight: normal;
}
#accordion-no .buttonback a {
color: #fff;
border-bottom: 0;
}

button {
width: 30%;
margin: 2px 35% 25px 35%;
padding: 8px 5% 8px 5%; 
border: 1px solid #999;
color: #fff;
font-size: .9em;
background-color: #445089;
transition: 0.4s;
cursor: pointer;
}
button:hover {
color: #b30202;
background-color: #fff;
}



/* Footerbereich */

.wrapfooter .footer {
margin: 0 auto;
text-align: center;
width: 100%;
padding: 35px 0 0 0;
margin-bottom: 4%;
}
.footer p {
font-size: .8em;
letter-spacing: 1px;
}
.footer a {
color: #ccc;
transition: .2s;
border-bottom: 1px dotted #fff; 
}
.footer a:hover {
color: #fff;
border-bottom: 1px dotted #ccc; 
}


/* Formular */

form {
margin-top:2%;
}

legend {
display: none;
}

select {
	margin-top: 1.4%;
	font-size: 100%;
}

label {
	font-size: 1em;
	width: 26%;
	float: left;
	margin: 1% 0 1% 0;
}
.section form p {
	width: 100%;
	font-size: .9em;
	line-height: 1.8em;
	float: right;
}
.section form p label  {
	font-size: 1.2em;
}
.section .textfeld {
	font-size: 1em;
	padding: 1%;
	width: 55%;
	background-color: #fff;
	opacity: 1;
}
.section textarea {
	margin-top: 1%;
	font-size: 1em;
	padding: 1%;
	width: 55%;
	height: 100px;
}
.sendbutton {
	padding: 1.5% 4% 1.5% 4%; 
	border: 1px solid #fff;
	color: #fff;
	font-size: 1.2em;
	letter-spacing: 1px;
	background-color: #777978;
	letter-spacing: 1px;
	width: 57%;
	cursor: pointer;
	margin: 2% 0 5% 0;
} 
.sendbutton:hover {
  color: #fff;
  background-color: #445089;
  border: 1px double #777978;
  transition: 0.4s;
}


/* _____ Misc _____ */

.cf:after {
content: "";
display: table;
clear: both;
}

iframe {
width: 100%;
}

.hide {
  display: none;
}

.weiter {
display: inline;
}

.read-more-hide {
display: inline-block;
margin-bottom: 30px;
}

.read-more-show, .read-more-hide, .direktlink {
font-size: .9em;
}

.accordion-content p:nth-of-type(1) {
margin-top: 12px;
}

.accordion-content h3 + p, .accordion-content h4 + p {
display: inline;
}



/*Styles for screen 1024px and lower*/
@media only screen and (max-width : 1024px) {
	
.wrapstart {
min-height: 0;
padding-bottom: 6%;
}
.wrapstart .figure {
top: 16px;
}	
.wrapstart h2 {
letter-spacing: 1px;
}
.wrapstart h3 {
letter-spacing: 1px;
}
	
}


/*Styles for screen 800px and lower*/
@media only screen and (max-width : 800px) {

.wraphead .header  { /* Logo Box */
background-size: 42%;
margin-top: 7%;
margin-bottom: 8%;
}
.wraphead h1 a { 
width: 50%;
margin: 0 25% 0 25%;
}
.wrapnav {
background: #505052;
border: 0;
border-left: 0;
border-right: 0;
border-radius: 0;
height: 10px;
opacity: .7;
padding-bottom: 50px;
}

 .wrapnav .nav ul {
        display: none;
        height: auto;
    }    
    .wrapnav .nav a#pull {
        display: block;
        float: left;
        width: 100%;
        height: 58px;
        position: relative;
        text-align: left;
		font-size: 1.1em;
        padding-left: 12.4%;
        padding-top: 16px;
        color: #fff;
        background-color: #505052;
        opacity: .7;
		-moz-box-sizing: border-box; 
		box-sizing: border-box;
    }   
    .wrapnav .nav a#pull:after {
        content:"";
        background: url('images/nav-icon.png') no-repeat;
        width: 30px;
        height: 44px;
        display: inline-block;
        position: absolute;
        right: 6%;
        top: 19px;
    }

.wrapnav .nav li {
width: 100%; 
font-size: 1em;
border-bottom: 1px solid #979797;
background-color: #505052;
opacity: 1;
text-align: left;
padding-left: 12.4%;
-moz-box-sizing: border-box; 
box-sizing: border-box;
}
.wrapnav .nav li a {
display: block;
color: #fff;
padding: 19px 0 19px 0;
}
.wrapnav .nav li:first-of-type a:hover {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.wrapnav .nav li:last-of-type a:hover {
border-bottom-right-radius: 0px;
border-top-right-radius: 0px;
}
.wrapnav .nav .aktiv {
color: #fff;
background-color: #777978;
opacity: 1;
}
.wrapnav .nav li a:hover {
background-color: transparent;
}
.wrapcont {
margin-top: 0px;
}
.wrapcont h1 {
font-size: 1.2em;
border-top-right-radius: 0;
border-top-left-radius: 0;
padding: 3% 5% 3% 12.2%;
border-bottom: 1px solid #979797;
}
.imgcont {
text-align: center;
}

}


/*Styles for screen 640px and lower*/
@media only screen and (max-width : 640px) {


.wraphead .header  { /* Logo Box */
background-size: 52%;
margin-top: 8%;
margin-bottom: 6%;
}
.wraphead h1 a { 
width: 50%;
margin: 0 25% 0 25%;
height: 110px;
}
.wrapstart .section {
width: 90%;
margin-left: 5%;
margin-right: 5%;
}
.wrapstart h2 {
font-size: 1em;
letter-spacing: 0;
}
.wrapstart h3 {
font-size: 1.1em;
letter-spacing: 0;
line-height: 1.2em;
}
.wrapstart .figure {
top: 14px;
}
.footer p {
font-size: .8em;
letter-spacing: 1px;
padding-left: 2%;
padding-right: 2%;
}
.wrapcont .iconloesung, .wrapcont .iconunternehmen, .wrapcont .iconkompetenzen, .wrapcont .iconreferenzen, .wrapcont .iconkontakt {
background-size: 14%;
}

.wrapcont h1, .h2, .h3 {
letter-spacing: 0;
}

.accordion-content h3, .accordion-no-content h3 {
line-height: 1.4em;
}


.openpfeil {
padding: 0 4% 0 5%;
}

.accordion-content {
opacity: 1;
padding: 2% 5% 4% 6%;
}

.accordion-content p, .accordion-no-content p {
font-size: 1em;
padding-bottom: 4%; 
line-height: 1.8em;
}
.accordion-content ul, .accordion-no-content ul {
font-size: 1em;
color: #fff;
padding-bottom: 3%;
padding-top: 2%;
line-height: 1.8em;
}

}


/*Styles for screen 480px and lower*/
@media only screen and (max-width : 480px) {

.wraphead h1 a { 
width: 50%;
margin: 0 25% 0 25%;
height: 82px;
}
.wrapstart .figure {
top: 10px;
}
.wrapstart h2 {
font-size: .8em;
}
.wrapstart h3 {
font-size: .9em;
}

}