/* === Style Expertex Design by Homepagelab.de ===*/
body{margin:0 auto; padding:0;line-height: 1.8rem; font-size: 16px;}
.row{margin: 0; padding:0;}

/* ===Lato Schriftart ===*/
    @font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: normal;
    src: local('Lato Regulart'), url('../assets/fonts/Lato/Lato-Regular.woff') format('woff'),
		 url('../fonts/Lato/Lato-Regular.eot');
    }
 @font-face {
    font-family: 'OpenSans';
    font-style: normal;
    font-weight: normal;
    src: local('OpenSans'), url('../assets/fonts/OpenSans-Regular.woff') format('woff');
    }





/* === Schriften Formatieren ===*/
/* Überschriften */

h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5,.h6,blockquote{
	font-family: 'lato', sans-serif; 
	color: rgba(0, 0, 0, 0.6); 
}
h1,.h1{font-size: 3.3rem;}
h2,.h2{font-size: 3rem;}
h3,.h3{font-size: 2.5rem;}
h4,.h4{font-size: 2rem;}
h5,.h5{font-size: 1.5rem;}
h6,.h6{font-size: 1.2rem;}

/* Normaler Text */
a, p, p, a, li a, nav ul li a, li a{font-family: 'Open Sans', sans-serif;
color: #2d2d2d; font-size: 1.rem;
}
/* navigation */
nav ul li a{color:#fff;  text-transform: uppercase;}
.navbar{box-shadow: 0px 15px 20px -10px rgba(0,66,69,1);}

/* Buttons */
.btn-danger:hover,
    .btn-danger:focus,
    .btn-danger:active,
    .btn-danger.active {
      background: #00656a;
      color: #FFFFFF;
      border-color: transparent;
    }

    .btn-danger {
      background: #ff6400;
      color: #FFFFFF;
      border-color: transparent;
      transition: 0.3s ease;
    }

    .btn-success:hover,
    .btn-success:focus,
    .btn-success:active,
    .btn-success.active {
      background: #ff6400;
      color: #FFFFFF;
      border-color: transparent;
    }

    .btn-success {
      background: #00656a;
      color: #FFFFFF;
      border-color: transparent;
      transition: 0.3s ease;
    }

/* === Logo ===*/
.logo-header{max-width: 340px; padding-top:160px;}
.logo-top{max-width: 50px;}
/* Links - Verlinkungen */
a {transition: 0.3s ease;}
a:hover, li a:hover{text-decoration: underline;color:rgb(255, 100, 0); }

/* Farben & Hintergründe */
.orange{color:#ff6400;}
.bg-orange{background-color:#ff6400;}
.petrol{color:#00656a;}
.bg-petrol{background-color: #00656a;}
.hellbeige{color:#fdf7f1;}
.bg-hellbeige{background-color:#fdf7f1;}
.grau{color:#2d2d2d;}
.bg-grau{background-color:#2d2d2d;}

.border-orange{border-color: #ff6400;}
.bg-orange-muster{background-image: url(../img/back-orange.png);}
.bg-petrol-muster{background-image: url(../img/back-gruen.png);}
  
/* === ICONS Grafiken ===*/
.phone-header{max-width: 20px; margin-top: -5px;}
.phone-kontakt{max-width:30px;}
.World-kontakt{max-width:30px;}
.brief-kontakt{max-width:30px;}
.facebook-kontakt{max-width:30px;}
/* === Dreiecke ===*/

/*.dreieck-petrol, .dreieck-orange {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 0px solid transparent;
  border-bottom: 50px solid #00656a;
  position: absolute;
  bottom: 0;
  right: 0; 
}
.dreieck-orange{
  border-bottom: 50px solid #ff6400;
}*/
.dreieck-petrol, .dreieck-orange{
  width: 50px;
  height: 50px;
  position: absolute;
  bottom:0;
  right:0;
}
/* === Header ===*/

.header{
  height: 515px;
 
}
.bg-header{
  background-image: url(../img/schreibbuero-header.jpg);
  background-repeat: no-repeat;
  background-size:cover;
  background-position:left bottom;
  position: absolute;
  width:100%;
  height:460px;
  right: 0;
  top: 55px;
  
}
header ul{
  padding: 0px;
  max-width: 350px;
  
}
header ul li{
  list-style-type: none;
  text-align: left;
}
header ul li .h4{
  letter-spacing: 1pt;
}

.bg-ansprache{
  min-height: 400px;
}
.ansprache{
  border-radius: 10px;
  margin-top: -40px;
  box-shadow: 0px 10px 20px 0px #2d2d2d;
  padding: 30px;
  width: 85%;
  max-width: 800px;
}


/* === Startseite ===*/
/* section Leistungen- Übersicht */
 #leistungen-uebersicht{
  padding:100px 0 0 0;
}
#leistungen-uebersicht ul{
  padding-left: 50px;
 
}
#leistungen-uebersicht ul li{
  list-style-type: none;
  border-bottom: 3px solid rgba(45, 45, 45, 0);
  border-top: 1px solid rgba(45, 45, 45, 0);
  transition: 0.5s ease;
  cursor: pointer;
  
}
#leistungen-uebersicht ul li:hover{
border-bottom: 3px solid #ff6400;
border-top: 1px solid #00656a;
}


#leistungen-uebersicht ul li p{
  line-height: 30px;
  margin: 10px 0;
}
img.mann-akten{
  max-width: 957px;
  max-height: 566px;
  margin-right: -15px;
 }

/* Section Spruch */
blockquote{font-size: 2rem; line-height: 50px; margin:0;}
blockquote span{font-size: 1rem;}


/* Section-Vorteile */
.vorteile-box p{
  width: 95%;
  min-height: 150px;
  text-align: center;
  border: 1px solid #00656a;
  background-color: #ffffff;
  margin: 30px 0;
  padding: 30px;
  transition: 0.5s ease;
}
.vorteile-box p:hover{
  background-color: #00656a;
  cursor: pointer;
  color: #ffffff;
}

/* Ende Startseite */

/* === Leistungen ===*/
#leistungen .post ul{
  color: rgb(255, 255, 255);
  margin: 0; padding: 0;
  max-width: 300px;
  box-shadow:7px 19px 34px -17px rgba(0,0,0,0.75);
  
} 
#leistungen .post ul li{
  list-style-type: none;
  padding: 0px 0 0 0px;
  border-bottom: 1px solid rgba(255,255,255, 0.2)
  
} 
#leistungen ul li:last-child{
  padding-bottom: 20px;
  display: block;
} 
#leistungen ul li a{
  padding:0 8px;
  font-size: 1rem;
  display: block;
  color: #ffffff;
  text-decoration: none;
}
#leistungen ul li a:hover{
  font-size: 1rem;
  display: block;
  background-color: rgba(0,0,0,0.1);
  cursor: pointer;
}
#leistungen ul li h6{ padding:0 8px;}


.post{
  padding: 5px;
}
.post-1{
  transform: rotate(-6deg);
}

.post-2{
  transform: rotate(6deg);
}

.post-3{
  transform: rotate(-2deg);
}

.post-4{
  transform: rotate(-10deg);
}

/* Ende Leistungen */

/* === Expertex & ich ===*/
/* Ende Expertex & ich */

/* === Kontakt ===*/
#kontakt ul{padding-left:20px;}
#kontakt ul li {list-style-type: none; padding: 5px 0;}
.kontakt-phone, .kontakt-mail, .kontakt-world{ padding-right:15px;}
.kontakt-ort{padding-right:10px;}
#kontakt ul li span img{width: 25px;}
.kontakt-abstand{margin-left: 40px;}
adress{margin:0; padding:0;}

/* Formular */
.senden-btn{margin-top: 36px;}
/* Ende Kontakt */

/* === Footer ===*/
footer{padding:0;margin:0;height: 3rem;}
.footer-border{
  border-top: 12px solid #ff6400;
}
footer ul{text-align: center; padding:0;}
footer ul li{list-style-type: none; display: inline; padding:0;margin:0;}
footer a{display: inline-block; font-size:0.8rem; margin:0 5px;line-height: 3rem;
color:#fff;padding:0;}

/* === Modal ===*/
.modal ul li{list-style-type: square;}

/* === Beginn Anpassung Mobile ===*/
/* Desktop */

@media (min-width: 1740px) {
.header{height: 850px!important;}
.bg-header{height: 800px!important;}
.logo-header{width: 380px;padding-top: 250px;}
.logotext{font-size:1.2rem;}
}
@media (min-width: 1540px) {
.header{height: 800px;}
.bg-header{height: 750px;}  
}

@media (min-width: 1340px) {
.header{height: 700px;}
.bg-header{height: 650px;}  
}

@media (max-width: 1140px) {
  .header{height: 550px;}
  .bg-header{height: 500px;}
 
  /* Topleiste ausblenden */
}
@media (max-width: 980px) {
  .logo-header{width: 280px;padding-top: 100px;}
  .logotext{font-size:1.2rem;}
  .header{height: 450px;}
  .bg-header{height: 400px;}
  /* Topleiste ausblenden */
}
/* Tablett */
@media (max-width: 768px) {
  
}
@media (max-width: 740px) {
	/* Topleiste Footer link  */
  
}

/* Phone */
@media (max-width: 550px) {
  h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5 {font-size:200%;}
  .bg-header{display: block;width: 100%; height: 300px;}
  .header-left,.logo-header {display:none !important;}
  .header{height: 350px !important}
  #leistungen .post ul{max-width: 80%; margin:30px auto;}
  footer.container {display:block;}
  footer a {text-align: center;}
  
     
  /* Navigation Mobile */
}
/* Mini Phone */
@media (max-width: 350px) {
   img.bild-faktu{margin-top: 30px;}
  .post ul {max-width: 80%; margin:30px auto;}    
}

/* === Ende anpassung Mobile ===*/
/* === Ende Stylesheed ===*/