@charset "utf-8";
/* CSS Document */

/* Block-Darstellung für HTML5-Elemente im IE8 */
article, aside, button, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
/*---------------------------------------------*/

/* RESET */
*{margin:0px; padding:0px;}
html, body{height:100%;}

/*---------------------------------------------*/

/* BODY */
body {background-color:#fafafa; color:#595959; font-family: 'Lato', sans-serif; font-size:100%; font-weight:200; letter-spacing: 0.03em;

}
article {max-width:930px; margin:0 auto; background-color:#fff; padding-bottom:50px;}

/*---------------------------------------------*/

/* HEADTAGS */
h1,h2,h3,h4 {font-weight:200; margin:0;}
h1,h2,h3,h4 {color:#1b6ca0; text-transform:uppercase;}

/*---------------------------------------------*/

/* HEADER */
header {height:100%;}

/*---------------------------------------------*/

/* Link */
a {text-decoration:none; font-weight:400; text-transform:uppercase;}
a:hover {
	text-decoration:none;
	-webkit-transition: background-color 1s;
  	-moz-transition: background-color 1s;
  	-o-transition: background-color 1s;
  	transition: background-color 1s;
	}
	
/*---------------------------------------------*/

/* NAV */
nav {position:absolute; top:30px; width:100%; z-index:200;}

.gm_big_logo {position:absolute; z-index:300; top:-10px; left:70px;}
.gm_big_logo img {width:120px; height:auto; opacity:1;}

.fixed {position: fixed; top:0; right:0; width:100%; background-color:#fff;	
	-webkit-transition: background-color 2s;
  	-moz-transition: background-color 2s;
  	-o-transition: background-color 2s;
  	transition: background-color 2s;}
	
.fixed .gm_icons ul li,.fixed .gm_logo_text,.fixed .gm_icons a {color:#1b6ca0;}
.fixed #nav {background:url(../images/bg-diagonal.png);}
.fixed .gm_logo { opacity:1;}
.fixed .gm_big_logo {display:none;}
.gm_logo_text {display:none;}	
.gm_logo {position:absolute; top:5px; left:30px; z-index:100; opacity:0;}
.gm_logo img {height:; width:auto;}

@media screen and (max-width:930px) {
nav {position:absolute; top:0px; width:100%; z-index:200;}
.gm_big_logo {display:none;}
.gm_logo_text {display:block; position:absolute; top:0px; left:15px; color:#fff;}	
.gm_logo img {display:none;}
.fixed .gm_icons a {color:#1b6ca0;}
}

.gm_icons {text-align:right;}
.gm_icons ul{list-style:none;}
.gm_icons ul li {display:inline-block; padding-right:10px; color:#fff;}
.gm_icons a {color:#fff;}
.gm_icons a:hover {color:#1b8ca0;}

/*---------------------------------------------*/

/* ----------------CONTENT---------------- */
.gm_930px {background:url(../images/bg-diagonal.png);}
.gm_headline {
	position:relative; 
	left:50%; 
	bottom:0; 
	-webkit-transform:translateX(-50%); 
	transform:translateX(-50%);
	max-width:930px;
	width:100%;
	text-align:center; 

	}
.gm_headline h2,.gm_headline p {padding:30px 5px; color:#fff;}
.gm_balken_weiss {width:100px; height:3px; margin:0 auto; background-color:#fff;}	
.gm_balken_blau {width:100px; height:3px; margin:0 auto; background-color:#1b6ca0;}	

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

.gm_headline h2 {font-size:1.5em;}
}
@media screen and (max-width:320px) {

.gm_headline h2 {font-size:1.5em;}
}

/* SERVICES */

#services {max-width:920px; margin-top:0px; margin-left:15px; margin-right:15px; padding:60px 0;}
#services h2 {width:200px; padding:5px 5px; background:url(../images/bg-diagonal.gif);}
#services p {padding:5px 5px;}

.gm_frame {position:relative; top:0px; width:435px; float:left; margin:20px 15px;}
.gm_frame h3 {padding:5px; background:url(../images/bg-diagonal.gif); border-bottom:5px solid #fff;}
.gm_frame img {float:left; height:50px; width:auto;}
.gm_frame p {height:170px; padding:0 2px 2px 2px; background-color:#fafafa;}
.gm_frame ul {list-style:none; padding:20px 2px 2px 2px; margin-bottom:10px; background-color:#fafafa;}
.gm_frame ul li {padding-bottom:5px;}

.gm_btm {width:150px; padding:5px 5px 8px 5px; margin:5px 0 50px 0; background-color:#1b6ca0; text-align:center; border-radius:3px;}
.gm_btm a {font-size:0.7em; color:#fff;}
.gm_btm:hover {background-color:#1b8ca0;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all 0.7s ease;}

@media screen and (max-width:930px) {
#services {width:90%; margin:90px auto 10px auto;}
.gm_frame{width:90%; float:none; margin:0 auto;}
}
@media screen and (max-width:480px) {
#services {width:90%; margin:0px auto 10px auto;}
.gm_frame p {height:auto; padding:0 2px 2px 20px; background-color:#fafafa;}
}
@media screen and (max-width:320px) {
#services {width:90%; margin:150px auto 10px auto;}
}

.gm_headline2 {
	max-width:930px;
	width:100%;
	text-align:center; 
	margin:0 auto;
	}
.gm_headline2 h2,.gm_headline2 p {padding:30px 5px; color:#fff;}

/* ABOUT */

#about {max-width:920px; margin-left:15px; margin-right:15px; padding:60px 0;}
#about h2 {width:200px; padding:5px 5px; background:url(../images/bg-diagonal.gif);}
#about h4 {padding:5px 5px;}
#about p {padding:15px 5px;}


button.accordion {
    background:url(../images/bg-diagonal.png);
    color: #fff;
	font-size: 20px;
	text-transform:uppercase;
    cursor: pointer;
    padding: 10px;
	margin:0 15px 3px 15px;
    width: 900px;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color:#1b8ca0;
}

button.accordion:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 20px;
    color: #fff;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}
div.panel {
    padding: 0 18px;
    background-color: #fff;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

div.panel img {float:left; height:50px; width:auto; margin:20px 0 20px 0;}
div.panel p {margin:20px 0 20px 0;}
div.panel ul {list-style:none; padding:0 2px 2px 2px; margin:50px 0 10px 0;}
div.panel ul li {padding-bottom:5px;}{}
div.panel.show {
    opacity: 1;
    max-height: 500px; /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */
}

.gm_frame_abo {width:424px; height:240px; float:left; margin:80px 13px 20px 13px; background:url(../images/bg-diagonal.gif); border:7px solid #1b6ca0;} /*width:435px; border:2px solid #1b6ca0;*/
.gm_frame_abo h2 {padding:5px; margin:25px 0; text-align:center;}
.gm_frame_abo p {padding:0 3px 2px 3px;  margin:20px 0; text-align:center;}

@media screen and (max-width:930px) {
#about {width:90%; margin:10px auto;}
.gm_frame_abo {width:88%; float:none; margin:20px auto; height:auto;}
button.accordion {width:90%; margin:3px auto;}
div.panel {width:90%; margin:0 auto;}
}
@media screen and (max-width:480px) {
button.accordion { font-size:18px;}	
/*  div.panel {
    padding: 0 18px;
    background-color: #fafafa;
    max-height: 500px;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 1;
}
button.accordion:after {content: " ";}
button.accordion.active:after {content: " ";}*/

}
/* PORTFOLIO */

.gm_portfolio {background:url(../images/bg-diagonal.gif); padding:50px 0 0 0;}
.gm_portfolio h2 {text-align:center; margin-bottom:30px;}
.gm_portfolio_con {position:relative; float:left; width:25%; overflow:hidden; background-color:rgba(28,107,160,1);}
.gm_portfolio_text {position:absolute; z-index:100; margin-top:80%; margin-left:40px;}
.gm_portfolio_text h2{font-size:1.3em; font-weight:200; color:rgba(255,255,255,0); text-align:left;}
.gm_portfolio_img img {width:100%; height:auto; vertical-align:bottom;}

.gm_portfolio_con:hover .gm_portfolio_img{
	-webkit-transform:scale(1.3);
	-moz-transform:scale(1.3);
	-o-transform:scale(1.3);
	transform:scale(1.3);
	opacity:0.2;
}
.gm_portfolio_con:hover .gm_portfolio_text h2{
	-webkit-transform:scale(1.3);
	-moz-transform:scale(1.3);
	-o-transform:scale(1.3);
	transform:scale(1.3);
	color:rgba(255,255,255,1);
}

.gm_portfolio_img {
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-o-transition: all 2s ease;
	transition: all 2s ease;
}

.gm_portfolio_text h2{
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-o-transition: all 2s ease;
	transition: all 2s ease;
}

@media screen and (max-width:930px) {
	
.gm_portfolio_con{width:50%;}
.gm_portfolio_text {margin-top:70%; margin-left:30px;}
.gm_portfolio_text h2{font-size:1em;}
/*
.gm_portfolio_con:hover .gm_portfolio_img {-webkit-transform:none; s-moz-transform:none; -o-transform:none; transform:none;}*/
}

/* WHY CHOOSE US */

#why {max-width:920px; margin-left:15px; margin-right:15px; padding:60px 0 0px 0;}
.gm_why h2 {width:220px; padding:5px 5px; background:url(../images/bg-diagonal.gif);}
.gm_why h3 {width:200px; padding:5px 5px; background:url(../images/bg-diagonal.gif);}
.gm_why h4 {padding:30px 5px 0 5px;}
.gm_why p {padding:15px 5px 0 5px;}
.gm_why img {float:left; height:50px; width:auto; margin:20px 0 20px 0;}

.gm_why ul {text-align:center; margin:0 auto 30px auto; padding-top:10px;}
.gm_why ul li {display:inline-block; list-style:none; border:2px solid #1b6ca0; padding:0px; margin-bottom:5px; opacity:1;}
.gm_why ul li:hover {opacity:1;}
.gm_why ul li img {width:217px; height:auto;}

.gm_fin {position:relative; top:0px; width:276px; height:350px; float:left; margin:25px 15px 15px 15px; background:url(../images/bg-diagonal.gif); border:2px solid #1b6ca0;}
.gm_fin p {padding:20px 5px; height:150px; font-size:0.9em;}
.gm_fin ul {margin:0 auto 0px auto; padding:20px 5px; font-size:0.8em;}
.gm_fin ul li {list-style:none; padding:0px; margin-bottom:5px; opacity:1;}

.gm_why2 p {margin-left:15px; margin-right:15px; padding:15px 5px 25px 5px;}

@media screen and (max-width:930px) {
#why {width:90%; margin:10px auto;}
.gm_fin {width:90%; height:auto; float:none; margin:20px auto;}
.gm_fin p { height:auto;}
.gm_why2 p {width:90%; margin:0 auto;}
}

/* CONTACT */
#contact {max-width:930px; margin:0 auto;}
#contact h2 {padding:60px 5px 25px 15px; color:#fff;}
#contact h4 {padding:0 0 10px 0; color:#fff;}
#contact p {padding:0px 15px 25px 15px; color:#fff;}
#contact ul {padding:0px 0 25px 0; color:#fff; list-style:none;}
#contact ul li {padding:10px 0 15px 0;}

.contact {color:#fff; padding-bottom:50px;}
.contact img {width:60px; height:auto;}
.gm_contact {position:relative; float:left; width:280px; padding:15px;}
.gm_contact a {color:#fff; font-size:0.9em;}
.gm_contact a:hover {color:#ccc; font-size:0.9em;}


input, textarea {width: 278px; height:4em; border: 1px solid #fff; margin-bottom:5px}
textarea {height: 15.1em; font-family: 'Lato', sans-serif; font-size:0.8em;}
input:focus,
textarea:focus {background-color: #d9d9d9;}
.gm_hover {background-color:#1b6ca0; color:#fff; cursor:pointer;}
.gm_hover:hover {background-color:#1b8ca0; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease;}

@media screen and (max-width:930px) {
#contact {text-align:center;}
.gm_contact {width:90%; float:none; text-align:center; margin:0 auto;}
input, textarea {width:90%; margin:10px auto;}
}

/* SENDEN */
.wrapper {position:absolute; top:0; left:0; background-color:#ccc;}
.gm_senden_background {background-color:#1b6ca0; height:100%;}
#gm_senden {height:140px; padding:0; margin:20px 0 0 0; background-color:#1b6ca0;}
.gm_senden {width:100%; text-align:center; background-color:#1b6ca0; padding:30px 0;}

.gm_senden h1 { margin:20px 30px; color:#fff;}
.gm_senden p { margin:20px 30px; color:#fff;}
.gm_senden a {color:#fff;}
.gm_senden a:hover {color:#ccc;}

/*---------------------------------------------*/

/* FOOTER*/
footer {max-width:930px; margin:0 auto; background-color:#fff;}
.footer p {font-size:0.8em; text-align:center; padding:30px 0;}
.footer a{color:#1b6ca0;}
.footer a:hover {color:#1b8ca0;}
/*---------------------------------------------*/

/* DISCLAIMER */
.gm_top {position:absolute; right:0; padding:10px; font-size: 0.9em; margin-bottom:3px;}
.gm_top a {color:#1b6ca0; font-weight:300; letter-spacing:0;}
section {position:relative; max-width:930px; margin:0 auto; background-color:#fff; font-size: 0.9em;}
section h3 {margin:15px 0px;}
section h4 {margin:15px 0px;}
section p {margin:15px 0px;}

section button.accordion {
	font-size: 0.9em;
	width:930px;
    background:url(../images/bg-diagonal.gif);
    color: #1b6ca0;
	text-transform:uppercase;
    cursor: pointer;
    padding: 10px;
	margin:0 0 3px 0;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

section button.accordion.active, button.accordion:hover {
    background-color:#1b8ca0;
}

section button.accordion:after {
    content: '\ '; /* Unicode character for "plus" sign (+) */
    font-size: 20px;
    color: #fff;
    float: right;
    margin-left: 5px;
}

section button.accordion.active:after {
    content: "\ "; /* Unicode character for "minus" sign (-) */
}

section div.panel {
    padding: 0 18px;
    background-color: #fff;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

section div.panel img {float:left; height:50px; width:auto; margin:20px 0 20px 0;}
section div.panel p {margin:20px 0 20px 0;}
section div.panel ul {list-style:none; padding:0 2px 2px 2px; margin:50px 0 10px 0;}
section div.panel ul li {padding-bottom:5px;}
section div.panel.show {
    opacity: 1;
    max-height: 1700px; /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */
}
@media screen and (max-width:930px) {

section button.accordion {width:100%; margin:3px auto;}
section div.panel {width:90%; margin:0 auto;}
section button.accordion:after {content: " ";}
section button.accordion.active:after {content: " ";}
}

/*--------------*/

/* FLOAT CLEAR*/

.gm_clear {clear:both;}