/* CSS Resets */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure{position:relative}figure img{width:100%}

/*
Author  : Boon
URL     : http://builtbyboon.com
Twitter	: http://twitter.com/mattberridge
---------------------------------------*/
html {
  font-size: 100%; }

body {
  margin: 0;
  font-family: Roboto, sans-serif;
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 24px;
  line-height: 1.5rem; }

#wrapper {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto; 
  margin: 0 auto; }
  
.logo_bg .logo_sm {
  padding-bottom: 16px;
  padding-bottom: 1.0rem; }
  
.grid_wrap_background_image_contact {
  width: 100%;
  max-width: 1200px;
  background-image: url(../img/backgrounds/background_contact.png) ; 
  background-repeat: no-repeat;
  background-position: center top;
  padding-bottom: 24px;
  padding-bottom: 1.5rem;
  margin-left: 0px; 
  margin-left: 0.0rem;
  }
  
.grid_wrap_background_image_leistungen {
  width: 100%;
  max-width: 1200px;
  height: 1025px;
  height: 95rem;
  background-image: url(../img/backgrounds/background_leistungen.png) ; 
  background-repeat: no-repeat;
  background-position: center top;
  padding-bottom: 24px;
  padding-bottom: 1.5rem;
  margin-left: 0px; 
  margin-left: 0.0rem;
  }
  
.grid_wrap_background_image_impressum {
  width: 100%;
  max-width: 1200px;
  height: 1920px;
  height: 120rem;
  background-image: url(../img/backgrounds/background_impressum.png) ; 
  background-repeat: no-repeat;
  background-position: center top;
  padding-bottom: 24px;
  padding-bottom: 1.5rem;
  margin-left: 0px; 
  margin-left: 0.0rem;
  }
  
.grid-col_mail {
  border-left: 1px dotted #333;
  float: left;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  
.grid-col_map {
  margin-left: 0px; 
  margin-left: 0.0rem; }
    
.download {
  font-size: 13px; 
  font-size: 0.8rem;
  line-height: 13px;
  line-height: 0.8rem; }
  
.logo_lg {
  padding-top: 1.0rem; }
  
.logo_sm {
  padding-top: 1.0rem; }
 
 h1 {
  margin-top: 0;
  margin-bottom: 16px;
  margin-bottom: 1.0rem;
  letter-spacing: 0.65px;
  letter-spacing: 0.05rem;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 32px;
  line-height: 2.0rem; }
  
.h1_sub {
  margin-top: 0;
  margin-bottom: 16px;
  margin-bottom: 1.0rem;
  letter-spacing: 0.65px;
  letter-spacing: 0.05rem;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 32px;
  line-height: 2.0rem; 
  font-weight: 300; 
  color: #999; }

h2 {
  margin: 0px 0px 16px 0px;
  margin: 0 0 1.0rem 0;
  letter-spacing: 0.65px;
  letter-spacing: 0.1rem;
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 28px;
  line-height: 1.75rem; }
  
.h2_col_full {
  margin-bottom: 8px;
  margin-bottom: -0.5rem; }
  
h3 {
  margin-top: 0;
  letter-spacing: 0.65px;
  letter-spacing: 0.1rem;
  font-size: 16px;
  font-size: 1.0rem;
  line-height: 20px;
  line-height: 1.25rem;
  font-weight: 700; }
  
h4 {
  margin-top: 0;
  letter-spacing: 0.65px;
  letter-spacing: 0.1rem;
  font-size: 16px;
  font-size: 1.0rem;
  line-height: 20px;
  line-height: 1.25rem;
  font-weight: 700; }
  
p {
  font-size: 16px;
  font-size: 1.0rem;
  text-align: justify;
   /* text-align: left;*/
  margin: 0px 0px 24px 0px;
  margin: 0 0 1.5rem 0; 
  color: #333; 
  -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto; }

a {
  color: #445C6E;
  font-size: 16px; 
  font-size: 1.0rem;
  line-height: 20px;
  line-height: 1.25rem; 
  font-weight: 700;
  letter-spacing: 1.25px;
  letter-spacing: 0.1rem; 
  text-decoration: none;  }
  
a:visited { 
  color: #166A8F; }
  
a:hover, a:focus, a:active {
  color: #5482AB; }

a:active {
  position:relative;
  top:1px;
  left:1px; }

.leistungs_intro {
  font-size: 1.0rem; }
  
ul.leistungs_list , ul.projekt_ablauf_list {
  margin-top: 0px;
  margin-top: 0.0rem; 
  margin-left: 12px;
  margin-left: 0.75rem;
  padding-left: 12px;
  padding-left: 0.75rem;
  list-style-type: square;
  color: #333;
  font-size: 16px;
  font-size: 1.0rem;
  line-height: 20px; 
  line-height: 1.25rem; } 
  
.project_description {
  width:100%;
  margin-top: 16px;
  margin-top: 1.0rem;
  font-size: 16px;
  font-size: 1.0rem;
  letter-spacing: 0.65px; 
  letter-spacing: 0.1rem; }
  
.project_description td {
 vertical-align:text-top; }
 
.project_description td.second { 
 padding: 0 32px 0 8px;
 padding: 0 2.0rem 0 0.5rem;
 vertical-align:text-top; }
 
.phone {
 margin-top: 0;
 margin-left: -24px;
 margin-left: -1.5rem;
 margin-bottom: 24px;
 margin-bottom: 1.5em;
 font-size: 16px; 
 font-size: 1.0rem;
 text-align: left;
 vertical-align: top;
 padding-right: 16px;
 width: 100%; }

.phone_first {
 vertical-align: top;
 padding-right: 8px;
 padding-right: 0.5rem; 
 width: 35%;
 text-align: right; }

.phone-second {
 vertical-align: top; 
 pdding-left: 32px;
 pdding-left: 2.0rem; }

img.phone_icon {
 padding-bottom: 40px;
 padding-bottom: 2.5rem; 
 display: block;
 margin-left: auto;
 margin-right: auto;
 width: 30%;
 margin-top: -60px; -3.75rem;  }
 
 .blockquote {
  font-family: cormorant-garamond, serif; 
  color: #777; 
  font-size: 20px;
  font-size: 1.25rem;
  margin: 0 20px 24px 24px;
  margin: 0 0 1.25rem 1.25rem ; }
  
.author {
  font-family: cormorant-garamond, serif; 
  color: #777; 
  font-size: 16px;
  font-size: 1.0rem;
  margin: 0 0 24px 0;
  margin: 0 0 2.0rem 0 ;
  text-align: right; }
 
img {
  display: block;
  max-width: 100%; }
}
}

/* -- Begin grids
------------------------------------------------------------- */
/* -- Use this wrapper if you want to divide your columns -- */
.divide-bottom {
  border-bottom: 1px solid #ccc;
  padding-bottom: 24px;
  padding-bottom: 1.5rem;
  margin-bottom: 24px;
  margin-bottom: 1.5rem; }

/* -- Use this wrapper if you want to block-out a column with padding 
Taken from http://csswizardry.com/2011/10/the-island-object/) -- */
.island {
  padding: 24px;
  padding: 1.5rem;
  background-color: #ececec; }
  .island :last-child {
    margin-bottom: 0; }

/* -- Setup grids with base class -- */
.grid-wrap {
  margin-left: -48px;
  margin-left: -3.0rem;
  overflow: hidden;
  padding-bottom: 24px;
  padding-bottom: 1.5rem;
  clear: both; }

.grid-col {
  float: left;
  padding-left: 48px;
  padding-left: 3.0rem;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.large-gutter {
  margin-left: -96px;
  margin-left: -6rem; }
  .large-gutter .grid-col {
    padding-left: 96px;
    padding-left: 6rem; }

.half-gutter {
  margin-left: -24px;
  margin-left: -1.5rem; }
  .half-gutter .grid-col {
    padding-left: 24px;
    padding-left: 1.5rem;
    padding-bottom: 24px;
    padding-bottom: 1.5rem; }

.no-gutter {
  margin-left: 0; }
  .no-gutter .grid-col {
    padding-left: 0; }

.reset-gutter {
  margin-left: -48px;
  margin-left: -3rem; }
  .reset-gutter .grid-col {
    padding-left: 48px;
    padding-left: 3rem; }

ul.grid-wrap,
ol.grid-wrap {
  padding-left: 0;
  list-style: none; }

li.grid-col {
  margin-left: 0;
  margin-bottom: 0; }

.col-full,
.col-full-quotation,
.col-set-full .grid-col {
  width: 100%; }

.col-one-half,
.col-one-half-quotation,
.col-set-one-half .grid-col {
  width: 50%; }

.col-one-third,
.col-one-third-quotation,
.col-set-one-third .grid-col {
  width: 33.333%; }

.col-one-quarter,
.col-set-one-quarter .grid-col
 {
  width: 25%; }

.col-two-thirds {
  width: 66.666%; }

.col-three-quarters {
  width: 75%; }
 

/* -- Breakpoint (.bp1)
------------------------------------------------------------- */
@media only screen and (min-width: 320px) {

  html {
   font-size: 0.85rem; }
	
  .bp1-col-full,
  .bp1-col-set-full .grid-col {
    width: 100%; }

  .bp1-col-one-half,
  .bp1-col-set-one-half .grid-col {
    width: 50%; }

  .bp1-col-one-third,
  .bp1-col-set-one-third .grid-col {
    width: 33.333%; }

  .bp1-col-one-quarter,
  .bp1-col-set-one-quarter .grid-col {
    width: 25%; }

  .bp1-col-two-thirds {
    width: 66.666%; }

  .bp1-col-three-quarters {
    width: 75%; } 
    
  .bp1-col-full-quotation {
  	display: none; }
    
  .logo_lg {
   	display: none; }
   	
/*  .quotation {
  	display: none; }*/
   	
  .grid-col_mail {
    border-left: 0px; }
	 
   .phone a {
   	 font-size: 16px;
   	 font-size: 1.0em; 
   	 border-bottom: none; }
   	 
   .before::before,
	.after::after {
	content: "\A";
	white-space: pre; }
   	    	
}
   	
/* -- Breakpoint 2 (.bp2)
------------------------------------------------------------- */
@media only screen and (min-width: 768px) {
  
  html {
   font-size: 1.0rem; }
  
  .bp3-col-full,
  .bp3-col-set-full .grid-col {
    width: 100%; }

  .bp2-col-one-half,
  .bp2-col-set-one-half .grid-col {
    width: 50%; }

  .bp2-col-one-third,
  .bp2-col-set-one-third .grid-col {
    width: 33.333%; }

  .bp2-col-one-quarter,
  .bp2-col-set-one-quarter .grid-col {
    width: 25%; }

  .bp2-col-two-thirds {
    width: 66.666%; }

  .bp2-col-three-quarters {
    width: 75%; } 
    
  .logo_sm {
  	display: none; }
  	
  .logo_lg {
  	display: block; }
  	
  .col-full-quotation, {
  	display: none; }
  	
  #cssmenu > ul > li > a {
	padding: 17px 0px 17px 20px;
	font-size: 12.8px;
	font-size: 0.8em; }
}
    
/* -- Breakpoint 3 (.bp3)
------------------------------------------------------------- */
@media only screen and (min-width: 1024px) {
  
  html {
   font-size: 1.0rem; }
  
  .bp3-col-full,
  .bp3-col-set-full .grid-col {
    width: 100%; }

  .bp3-col-one-half,
  .bp3-col-set-one-half .grid-col {
    width: 50%; }

  .bp3-col-one-third,
  .bp3-col-set-one-third .grid-col {
    width: 33.333%; }

  .bp3-col-one-quarter,
  .bp3-col-set-one-quarter .grid-col {
    width: 25%; }

  .bp3-col-two-thirds {
    width: 66.666%; }

  .bp3-col-three-quarters {
    width: 75%; }
    
  .bp3-col-one-third-quotation {
  	width: 33.333%;
  	display: block; } 
    
   .logo_sm {
  	display: none; }
  	
  .logo_lg {
  	display: block; }
  	
  .quotation {
  	display: block; }
  	
  .phone {
   font-size: 16px;
   font-size: 1.0rem; }
   
  .phone_icon {
   display: block;
   padding-bottom: 16px;
   padding-bottom: 1.0rem; 
   width: 50%;
   margin: auto; } 
}