/*   
Theme Name: Steuerbüro Herrmann
Theme URI: http://www.faner.de
Description: one pager www.herrmann-halle.de
Author: Fabian Nerstheimer
Author URI: http://www.faner.de
*/

/***********************************************
Reset & Basics
***********************************************/
html, body, div, span, applet,
object, iframe, h1, h2, h3, h4,
h5, h6, p, blockquote, pre, a,
abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd,
q, s, samp, small, strike, strong,
sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details,
embed, figure, figcaption, footer,
header, hgroup, menu, nav, output, 
ruby, section, summary, time, mark,
audio, video                                    { margin: 0; padding: 0; border: 0; font-size:100%; font:inherit; vertical-align:baseline; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }

article, aside, details, figcaption,
figure, footer, header, hgroup, menu,
nav, section                                    { display:block; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }

blockquote, q                                   { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after                               { content:''; content:none; }

/* webfont */
@font-face {
  font-family: 'Atlas Grotesk Web';
  src: url(//www.herrmann-halle.de/steuer/wp-content/themes/sh/AtlasGrotesk-Regular-Web.eot);
  src: url(//www.herrmann-halle.de/steuer/wp-content/themes/sh/AtlasGrotesk-Regular-Web.eot?#iefix) format('embedded-opentype'),
  url(//www.herrmann-halle.de/steuer/wp-content/themes/sh/AtlasGrotesk-Regular-Web.woff2) format('woff2'),
  url(//www.herrmann-halle.de/steuer/wp-content/themes/sh/AtlasGrotesk-Regular-Web.woff) format('woff');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
}

html {
  overflow-y:scroll;
  overflow:-moz-scrollbars-vertical;
  height: 100%;
  background: #ffffff;
  -ms-hyphens: manual;
  -moz-hyphens: manual;
  -webkit-hyphens: manual;
  hyphens: manual;
}

body {
  height: 100%;
  margin:0; padding:0;
  color: #ffffff;
  font: 1em/1.75em 'Atlas Grotesk Web';
}

h1 {
  font: 1em/1.75em 'Atlas Grotesk Web';
  letter-spacing: 0.025em;
  margin-top: 42px;
  padding-bottom: 28px;
}

h2 {
  font: 1.8em/1.4em 'Atlas Grotesk Web';
  letter-spacing: 0.025em;
  text-align: center;
  width: 80%;
  margin: 0px auto;
}

h3 {
  font: 1.2em/1.4em 'Atlas Grotesk Web';
  letter-spacing: 0.025em;
  text-align: center;
  margin-top: 28px;
}

h4 {
  font: 1.2em/1.4em 'Atlas Grotesk Web';
  letter-spacing: 0.025em;
  margin: 0px auto;
  margin-bottom: 5px;
}

h1.blue {
  color: #ffffff;
}

h1.white {
  color: #004b87;
}

h2.blue {
  color: #80a5c3;
}

h2.white {
  color: #004b87;
}

h3.blue {
  color: #ffffff;
}

h3.white {
  color: #004b87;
}

h4.blue {
  color: #ffffff;
}

h4.white {
  color: #004b87;
}

a:link { color: #ffffff; text-decoration: none; border-bottom: 1px solid; padding-bottom: 3px; transition: all 0.5s; }
a:visited { color: #ffffff; text-decoration: none; }
a:hover { color: #80a5c3; text-decoration: none; border-bottom: 0px;}
a:active { color: #ffffff; text-decoration: none; }

b {
    font: 1em/1.75em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.kopf {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0px;
  position: fixed;
  overflow: hidden;
  z-index: 1;
  background-color: #004b87;
  -webkit-box-shadow: 0px 2px 20px #003865;
  -moz-box-shadow: 0px 2px 20px #003865;
  -o-box-shadow: 0px 2px 20px #003865;
  -ms-box-shadow: 0px 2px 20px #003865;
  box-shadow: 0px 2px 20px #003865;
}

.box-blue {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  background-color: #004b87;
  color: #ffffff;
  padding-bottom: 50px
}

.box-white {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  background-color: #ffffff;
  color: #004b87;
  padding-bottom: 50px
}

.line {
  position: relative;
  width: 100%;
  height: 5px;
  margin: 0 auto;
  overflow: hidden;
  background-color: #004b87;
}

.content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0px;
  overflow: hidden;
}

.zwei {
  width: 50%;
  margin: 0 auto;
  padding-top: 28px;
  float: left;
}

.drei {
  width: 33.33%;
  margin: 0 auto;
  padding-bottom: 28px;
  float: left;
  overflow: hidden;
}

.vier {
  width: 25%;
  height: 280px;
  margin: 0 auto;
  padding-top: 28px;
  float: left;
  overflow: hidden;
}

.vier a:link { color: #004b87; text-decoration: none; border-bottom: 0px;}
.vier a:visited { color: #004b87; text-decoration: none; }
.vier a:hover { color: #80a5c3; text-decoration: none; }
.vier a:active { color: #004b87; text-decoration: none; }

.eins {
  width: 100%;
  height: 0px;
  margin: 0px auto;
  overflow: hidden;
  transition: opacity 0.5s ease-in;
  opacity: 0;
}

.eins:target {
  height: auto;
  opacity: 1;
}
.eins p {
  padding: 0px 0px 41px 0px;
  font: 1.2em/1.5em 'Atlas Grotesk Web';
  letter-spacing: 0.025em;
}

.eins h1 {
  margin-top: 50px;
}

.title {
  height: 42px;
  padding-top: 8px;
  float: left;
  color: #ffffff;
  font: 1em/1.750em 'Atlas Grotesk Web';
  letter-spacing: 0.025em;
}

.imprint {
  width: 100%;
  height: 70px;
  margin: 0 auto;
  margin-bottom: 0px;
  overflow: hidden;
}

.imprint:target {
 height: auto;
}

.imprint p {
  font: 0.7em/1.750em 'Atlas Grotesk Web';
  color: #80a5c3;
  padding-right: 5%;
}

ul.a {
  list-style-position: outside;
  padding-left: 20px;
}

nav {
  height: 42px;
  padding-top: 8px;
  float: right;
  color: #80a5c3;
}

nav li {
  float: left;
  padding-left: 0px;
  list-style: none;
  font: 1em/1.750em 'Atlas Grotesk Web';
}

nav a:link { color: #80a5c3; text-decoration: none; border-bottom:0px solid;  }
nav a:visited { color: #80a5c3; text-decoration: none; }
nav a:hover { color: #ffffff; text-decoration: none; }
nav a:active { color: #80a5c3; text-decoration: none; }

.logo {
  display: block;
  margin: 84px auto;
  height: 250px;
}

.arrow {
  display: block;
  margin: 0px auto;
  width: 30px;
  }

.icon {
  display: block;
  margin: 0px auto;
  width: 168px;
  transition: all 0.5s;
}

.icon:hover {
  opacity: 0.5;
}

.pic {
  display: block;
  margin: 0px auto;
  height: 240px;
}

.bsp {
  display: block;
  width: 80%;
  margin: 0px auto;
}

.blog { position: relative; width: 100%; text-align: center; }
.blog a:link { color: #004b87; text-decoration: none; border-bottom: 1px solid; padding-bottom: 3px; transition: all 0.5s; }
.blog a:visited { color: #004b87; text-decoration: none; }
.blog a:hover { color: #80a5c3; text-decoration: none; border-bottom: 0px;}
.blog a:active { color: #004b87; text-decoration: none; }
.blog h3 { color: #004b87; font: 1.8em/1.4em 'Atlas Grotesk Web'; letter-spacing: 0.025em; text-align: left; margin: 0px 0px 15px 0px; }
.entry { color: #004b87; width: 100%;  font: 1em/1.4em 'Atlas Grotesk Web'; letter-spacing: 0.025em; padding-bottom: 28px; text-align: justify;
  /* Spalte */
  -webkit-column-count: 3;  
  -webkit-column-gap: 25px;
  -moz-column-count: 3;  
  -moz-column-gap: 25px;
  column-count: 3;  
  column-gap: 25px;
  /* Spalte OFF */
  /* Trennung */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  /* Trennung OFF */
}
.entry p {
margin-bottom: 1.4em;
}
/***********************************************
Tablet
***********************************************/
@media only screen and (min-width: 960px) and (max-width: 1280px) {

  .kopf{
    padding: 0px;
  }

  .content {
    padding: 0px 5% 0px 5%;
  }

  .vier {
    width: 50%;
  }
}

/***********************************************
Mobile 1
***********************************************/
@media only screen and (min-width: 650px) and (max-width: 959px) {
  
  .kopf{
    padding: 0px;
  }

  .content {
    padding: 0px 5% 0px 5%;
  }

  .zwei {
    width: 100%;
  }

  .drei {
    width: 100%;
  }

  .vier {
    width: 50%;
  }
  .entry {
  /* Spalte */
  -webkit-column-count: 2;  
  -webkit-column-gap: 25px;
  -moz-column-count: 2;  
  -moz-column-gap: 25px;
  column-count: 2;  
  column-gap: 25px;
  /* Spalte OFF */
  }
}

/***********************************************
Mobile 2
***********************************************/
@media only screen and (max-width: 649px) {

  h2 {
    font: 1.2em/1.4em 'Atlas Grotesk Web';
    letter-spacing: 0.025em;
    text-align: center;
    width: 100%;
    margin: 0px auto;
  }

  .blog h3 { color: #80a5c3; font: 1.2em/1.4em 'Atlas Grotesk Web'; letter-spacing: 0.025em; text-align: left; margin: 0px 0px 15px 0px; }

  .kopf{
    padding: 0px;
  }

  .content {
    padding: 0px 5% 0px 5%;
  }

  nav li {
    display: none;
  }

  .title {
  width: 100%;
  text-align: center;
  }

  .zwei {
    width: 100%;
  }

  .drei {
    width: 100%;
  }

  .vier {
    width: 100%;
  }

  .icon { width: 200px; }

  .eins p { font: 1em/1.4em 'Atlas Grotesk Web'; }

  .entry {
  /* Spalte */
  -webkit-column-count: 1;  
  -moz-column-count: 1;  
  column-count: 1; 
  /* Spalte OFF */
  }
}