/* Resets
-----------------------------------------------------------*/

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, figcaption, figure,  footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video 
{ margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section 
{ display: block; }

body            { line-height: 1; }
ol, ul          { list-style: none; }
blockquote, q   { quotes: none;}
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table           { border-collapse: collapse; border-spacing: 0; }
:focus          { outline: none; } 

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/* Clear fix
-----------------------------------------------------------*/

.clearfix           { *zoom: 1; }
.clearfix:before, .clearfix:after   { display: table; content: ""; line-height: 0; }
.clearfix:after     { clear: both; }

/* Icon font
-----------------------------------------------------------*/

@font-face {
    font-family: 'fontello';
    src: url('../font/fontello.eot?42846002');
    src: url('../font/fontello.eot?42846002#iefix') format('embedded-opentype'),
         url('../font/fontello.woff2?42846002') format('woff2'),
         url('../font/fontello.woff?42846002') format('woff'),
         url('../font/fontello.ttf?42846002') format('truetype'),
         url('../font/fontello.svg?42846002#fontello') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
  /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
  /*
  @media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
      font-family: 'fontello';
      src: url('../font/fontello.svg?42846002#fontello') format('svg');
    }
  }
  */
  [class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: never;
  
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    /* opacity: .8; */
  
    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;
  
    /* fix buttons height, for twitter bootstrap */
    line-height: 1em;
  
    /* Animation center compensation - margins should be symmetric */
    /* remove if not needed */
    margin-left: .2em;
  
    /* you can be more comfortable with increased icons size */
    /* font-size: 120%; */
  
    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  
    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
  }
  
  .icon-twitter:before { content: '\f099'; } /* '' */
  .icon-facebook:before { content: '\f09a'; } /* '' */
  .icon-rss:before { content: '\f09e'; } /* '' */
  .icon-linkedin:before { content: '\f0e1'; } /* '' */
  .icon-rss-squared:before { content: '\f143'; } /* '' */
  .icon-youtube-squared:before { content: '\f166'; } /* '' */
  .icon-xing:before { content: '\f168'; } /* '' */
  .icon-xing-squared:before { content: '\f169'; } /* '' */
  .icon-instagram:before { content: '\f16d'; } /* '' */
  .icon-twitter-squared:before { content: '\f304'; } /* '' */
  .icon-facebook-squared:before { content: '\f308'; } /* '' */
  .icon-linkedin-squared:before { content: '\f30c'; } /* '' */

/* Base styles
-----------------------------------------------------------*/

body    {  margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; font-weight:400; font-size: 1.1em; line-height: 1.6em; color: #212121; background-color: #f4f4f4; }
div     {  margin: 0; padding: 0; display: block; }
header, footer, nav, section { display: block; }

table       {  margin: 0px 0px 0.5em 0px; padding: 0; border-collapse: collapse; }
table td    {  font-family: 'Open Sans', sans-serif; border: solid 1px #cccccc; background-color: #fafafa; margin: 0px; padding: 5px; vertical-align: top; font-size: 1em; color: #212121; }
table th    {  border: solid 1px #cccccc; background-color: #efefef; margin: 0px; padding: 5px; font-weight: 700; }

h1      { font-family: "Lato", sans-serif; font-size: 2.2em; line-height: 1.2em; color: #f0f0f0; font-weight: 700; text-transform: uppercase; } 
h2      { font-family: "Lato", sans-serif; font-size: 1.2em; line-height: 1.4em; font-weight: 700; font-style: normal; color: #212121; padding: 1em 0 0.5em 0; margin: 0;}
h3      { font-family: "Lato", sans-serif; font-size: 1em; line-height: 1.4em; font-weight: 700; font-style: normal; color: #212121; padding: 1em 0 0.5em 0; margin: 0; }

p           { padding: 0; margin: 0.5em 0 0.5em 0; }
p:last-child    { margin-bottom: 0; }
p:first-child   { margin-top: 0; }
em, i       { font-style: italic; }
strong, b   { font-weight: 700; }
a 			{ color: #212121; text-decoration: underline; text-decoration-color: #bbbbbb;}
a:visited 	{ color: #212121; text-decoration: underline; text-decoration-color: #bbbbbb;}
a:hover 	{ color: #000000; text-decoration: underline; text-decoration-color: #030303; }
a img       { border: 0 }
a:hover img { border: 0 }
ul		    { list-style: square; margin-bottom: 0; margin-left: 2em; }
ul li	    { padding-bottom: 0.5em; }
img         { display: block; }


/* Layout elements
-----------------------------------------------------------*/

#header_container       { width: 100%; background-color: #ffffff; text-align: center; }
#header 		        { max-width: 1024px;  margin: 0 auto; display: flex; padding: 0 20px 0 20px; }
#header_logo            { flex: 30%;  }
#header_logo_formatter  { min-height: 100px; display: flex; align-items:center ; text-align: left;}
#header_text            { flex: 70%; }
#header_text_formatter  { min-height: 100px; display: flex; align-items:center ; justify-content: flex-end; font-family: "Lato", sans-serif; font-weight: 300; font-size: 24px; text-transform: uppercase; letter-spacing: 0.4px; line-height: 1.1em; }
#header_text_formatter strong { font-weight: 400;  }

#article           { width: 100%; text-align: center; position: relative; }
#article_image     { width: 100%; height: 340px; overflow: hidden; position: absolute; overflow: hidden;  background-color: red;  }
#article_image img { width: 100%; height: auto; position: absolute; top: 50%; transform: translateY(-50%); filter: brightness(50%) }
#article_box       { max-width: 1024px; margin: 0 auto; text-align: left; position: relative; top: 0px; padding: 0 20px 0 20px; }
#article_title     { padding: 60px 0 60px 0;  color: #ffffff }
#article_content   { background-color: #ffffff; padding: 20px; }
#article_content img   { max-width: 100%;  }

#article_header           { font-size: 0.75em; display: flex; line-height: 1.4em; padding-bottom: 40px; margin-bottom: 20px; border-bottom: solid 1px #e1e1e1 }
#article_header_author    { flex:60%; padding-right: 10px;  }
#article_header_author  a { font-weight: 700; font-size: 1.1em; }
#article_header_meta      { flex:40%; background-color: #f4f4f4; padding: 10px; }

.teaser           { width: 100%;  text-align: center; background-color: #f4f4f4;  }
.teaser_box       { max-width: 1024px; margin: 0 auto; padding: 30px 20px 10px 20px }
.teaser h2        { font-family: "Lato", sans-serif; font-size: 1.6em; color: #212121; font-weight: 400; margin: 0; padding: 0 0 30px 0 }

.teaser_row         { text-align: left; margin: 0 auto; display: flex; flex-direction: row; margin-bottom: 40px; }
.teaser_item        { width: 32%; background-color: #ffffff; border: solid 1px #bcbcbc; }
.teaser_item h3     { font-family: "Lato", sans-serif; font-size: 1.2em; line-height: 1.1em; text-transform: uppercase;  color: #ffffff; font-weight: 600; margin: 0; padding: 10px }
.teaser_item a          { text-decoration: none;}
.teaser_item a:visited  { text-decoration: none;}
.teaser_item a:hover    { text-decoration: none;}
.teaser_item:visited h3     { color: #ffffff; }
.teaser_item h3:hover       { color: #ffffff; }
.teaser_item:hover h3       { color: #ffffff; }
.teaser_spacer      { width: 3% }
.teaser_empty       { width: 32% }
.teaser_image       { min-height: 120px; background-color: rgba(0,0,0,.4); background-blend-mode: multiply; background-size: cover }
.teaser_summary     { min-height: 130px; font-size: 0.8em; padding: 10px; line-height: 1.5em; }
.teaser_link        { min-height: 30px; font-size: 0.8em; padding: 10px; text-transform: uppercase; color: #1da8e1; border-top: solid 1px #bcbcbc; }
.teaser_link a          { color: #1da8e1; text-decoration: none; padding:3px; }
.teaser_link a:visited  { color: #1da8e1; text-decoration: none; padding:3px; }
.teaser_link a:hover    { color: #1da8e1; text-decoration: none; background-color: #f4f4f4; padding:3px; transition: 0.25s }

#page_header        { width: 100%;  text-align: center; border-top: solid 1px #bcbcbc; background-color: #ffffff; }
#page_header_box    { max-width: 1024px; margin: 0 auto; padding: 40px 20px 40px 20px; text-align: left; color: #212121 }
#page_header_box h1 { font-size: 2.2em; font-weight: 700; color: #212121; padding: 0 0 30px 0; }

#home_header         { width: 100%;  text-align: center; background-color: #ffffff; border-top: solid 1px #bcbcbc; }
#home_header_box     { max-width: 1024px; margin: 0 auto; padding: 40px 20px 30px 20px; }
#home_header_content { text-align: left; font-size: 1em; color: #121212; }
#home_header_box h1  { font-size: 2.2em; line-height: 1.2em; color: #121212; font-weight: 700; text-transform: uppercase; padding: 0 0 30px 0; }
.heading_light       { font-weight: 300 }

/*
#home_header         { width: 100%;  text-align: center; background-image: url(/images/home-hero.jpg); background-size: fill; background-color: rgba(0,0,0,.5); background-blend-mode: multiply; }
#home_header_box     { max-width: 1024px; margin: 0 auto; padding: 120px 20px 20px 20px; }
#home_header_content { padding: 20px; text-align: left; font-size: 0.9em; color: #f0f0f0; background-color: rgba(0,0,0,.5); background-blend-mode: multiply; }
#home_header_box h1  { font-size: 2.2em; line-height: 1.2em; color: #f0f0f0; font-weight: 700; text-transform: uppercase; padding: 0 0 30px 0; }
.heading_light       { font-weight: 300 }
*/

#navigation         { width: 100%;  text-align: center; background-color: #f4f4f4; }
#navigation_box     { max-width: 1024px; margin: 0 auto; padding: 0 20px 20px 20px; text-align: left; color: #212121; display: flex; flex-direction: row; justify-content: space-between; }
.nav_button            { min-height: 30px; font-size: 0.8em; padding: 10px; text-transform: uppercase; color: #1da8e1; border: solid 1px #bcbcbc; background-color: #ffffff; }
.nav_button a          { color: #1da8e1; text-decoration: none; padding:3px; }
.nav_button a:visited  { color: #1da8e1; text-decoration: none; padding:3px; }
.nav_button a:hover    { color: #1da8e1; text-decoration: none; background-color: #f4f4f4; padding:3px; transition: 0.25s }

#footer_container       { width: 100%;  text-align: center; background-color: #d9d9d9; }
#footer		            { max-width: 1024px; margin: 0 auto; padding: 0 20px 0 20px; }
#footer_formatter       { max-width: 1024px; text-align: left; margin: 0 auto; padding: 0; color: #212121; }
#footer h2		        { text-align: center; font-family: "Lato", sans-serif; font-size: 1.6em; color: #212121; font-weight: 400; margin: 0; padding: 30px 0 10px 0 }
#footer h3		        { font-size: 1em; font-family: "Lato", sans-serif; font-weight: 400; color: #212121; }
#footer ul.footer_list 		 {  width: 100%; list-style: none; margin: 0; padding: 0 0 0 0; font-size: .8em }
#footer ul.footer_list li	 {   margin: 0; padding: 0 0 0.1em 0; }
#footer ul.icon_list li a    {  padding-left: 5px; }
.footer_copyright            { padding: 20px 0 20px 0; font-size: 0.8em }

#footer_nav       { width: 100%; }
#footer_columns   { text-align: left; display: flex; flex-direction: row; width: 100%; }
.footer_column    { flex: 33%; }

/* Miscellaneous
-----------------------------------------------------------*/
                              
p.quote    {  font-family: 'Open Sans', sans-serif; font-style: italic; font-size: 1.2em; line-height: 1.5em; font-weight: 400; color: #121212; padding: 0 0 0 2em ; margin: 1em 0 1em 0; border-left: 5px solid #e14e32;  }
blockquote {  font-family: 'Open Sans', sans-serif; font-style: italic; font-size: 1.2em; line-height: 1.5em; font-weight: 400; color: #121212; padding: 0 0 0 2em ; margin: 1em 0 1em 0; border-left: 5px solid #e14e32;  }

#notfound-title { padding: 40px 0 40px 0 ; margin: 0px;}

.grey           { color: #828181 }
.small          { font-size: 0.7em; line-height: 1em; }
.uppercase      { text-transform: uppercase; letter-spacing: 0.3em; }
.center         { text-align: center; }
.normal-weight  { font-weight: normal; }
.italic         { font-style: italic; }
.spacer         { display: block; height: 2em; }

.alignleft 	{ float: left; }
.alignright { float: right; }

img.alignleft { padding: 0 1em 0 0; }
img.alignright { padding: 0 0 0 1em; }
img.img-resize { max-width: 100%; height: auto; }

.navigation { width: 100%; font-size: 0.9em; margin: 0 0 2em 0  }
.navigation .alignleft 	{ width: 50%;  }
.navigation .alignright { width: 50%; text-align: right}
.navigation a           { text-decoration: none; background-color: #454545; padding: 20px; color: #f0f0f0; font-family: 'Roboto', sans-serif; font-size: 1em; font-weight: 700; }
.navigation a:visited   { text-decoration: none; background-color: #454545; padding: 20px; color: #f0f0f0; font-family: 'Roboto', sans-serif; font-size: 1em; font-weight: 700; }
.navigation a:hover     { text-decoration: none; background-color: #e14e32; padding: 20px; color: #f0f0f0; font-family: 'Roboto', sans-serif; font-size: 1em; font-weight: 700; }

.width25 { width: 25%; }
.width33 { width: 33%; }
.width50 { width: 50%; }
.width75 { width: 75%; }


/* Code examples
-----------------------------------------------------------*/

div.code_container 	{ width: 100%; overflow: auto; background-color : #efefef; margin-bottom: 1em; padding: 1em; border-left: 5px solid #989898; }
div.code_area 		{ background-color : #efefef;  font-family: 'Oxygen Mono', monospace; font-size: 0.8em;  line-height: normal;}
div.code_area .rem	{ color: #008000 }
div.code_area .kwrd	{ color: #0000FF }
span.code { font-family: 'Oxygen Mono', monospace; font-size: 0.9em;  line-height: normal;}

/* Media queries 
-----------------------------------------------------------*/

@media only screen and (max-width: 1150px) 
{
    #article_image img { width: 120%; left: -10%; height: auto; top: 0; transform: translateY(0%);  }
}

@media only screen and (max-width: 950px) 
{
    #article_image img { width: 150%; left: -20%; height: auto; top: 0; transform: translateY(0%);  }
}

@media only screen and (max-width: 800px) 
{
    #article_image img { width: 170%; left: -30%; height: auto; top: 0; transform: translateY(0%);  }
}

@media only screen and (max-width: 700px) 
{
    #article_image img { width: auto; left: -40%; height: 100%; top: 0; transform: translateY(0%);  }
}

/* Reduce font sizes */
@media only screen and (max-width: 800px) 
{
    h1      { font-size: 2em; line-height: 1.1em;  }
    h2      { font-size: 1.2em; line-height: 1.5em;  }
    h3      { font-size: 1em;  }
    p.intro { font-size: 1.2em;  }
    .home_main_text h2  { font-size: 2.4em; line-height: 1.1em;}
    .home_item_text h2  { font-size: 2em; line-height: 1em;}
    .teaser h2          { font-size: 2em; line-height: 1em; }
    .teaser_item h3     { font-size: 1.6em; line-height: 1em;}
    #footer h2		    { font-size: 2em; line-height: 1em;}
    #header_text_formatter    { font-size: 20px; }
    #home_header_box h1       { font-size: 2em; }
    #page_header_box h1       { font-size: 2em; }
    #footer h2	{ font-size: 1.4em; }

}

/* Flatten teaser columns  */
@media only screen and (max-width: 800px) 
{
    .teaser_spacer  { display: none }
    .teaser_row     { display: block; }
    .teaser_item    { width: 100%; margin-top: 20px; display: block; }
    .teaser_item h3 { font-size: 1.2em;  }
    .teaser_summary { min-height: 60px }
    .teaser_image   { min-height: 60px; }

    #article_header { display: block; padding-bottom: 20px }
    #article_header_meta      {  background-color: #ffffff; padding: 10px 0 0 0; }
}

/* Flatten the footer columns */
@media only screen and (max-width: 650px) 
{
    #footer_columns {display: block;}
    .footer_column { flex: none;}
    
}

@media only print
{
    body    {   background-image: none; color: #ffffff; background-color: #ffffff;}

    h1      { color: #000000; font-size: 2em; }
    h2      { color: #000000; }
    h3      { color: #000000; }
    p       { color: #000000; }

    #article           { width: 100%;  text-align: left; }
    #article_box       { width: 100%;  }
    #article_formatter { max-width: 100%;  }

    p.intro    {  font-size: 1.2em; }

    #footer_container       { width: 100%;  text-align: left; background-color: #ffffff; padding: 0 0 0 0; }
    #footer		            { width: 100%;  }
    #footer_formatter       { max-width: 100%; text-align: left;  color: #000000; }
    #footer a               { color: #000000; }
    #footer a:visited       { color: #000000; }
    #footer h2		        { color: #000000; }
    #footer_nav             { display: none; }

}