*contain {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,body {
  margin: 0;
  padding: 0;
}

html, body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.5;
}

@media (min-width: 38em) {
  html {
    font-size: 18px;
  }
}

body {
  color: #717171;
  background-color: #fff;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

a {
  color: #268bd2;
  text-decoration: none;
}

a:hover,a:focus {
  text-decoration: underline;
}

a strong {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
  margin: 0 0 1rem;
  border-radius: 5px;
}

table {
  margin-bottom: 1rem;
  width: 100%;
  font-size: 85%;
  border: 1px solid #e5e5e5;
  border-collapse: collapse;
}

td,th {
  padding: .25rem .5rem;
  border: 1px solid #e5e5e5;
}

th {
  text-align: left;
}

tbody tr:nth-child(odd) td,tbody tr:nth-child(odd) th {
  background-color: #f9f9f9;
}

h1,h2,h3,h4,h5,h6 {
  font-weight: bold;
  line-height: 1.25;
  color: #313131;
  text-rendering: optimizeLegibility;
}

h1 {
  font-size: 2rem;
}

h2 {
  margin-top: 1rem;
  font-size: 1.5rem;
}

h3 {
  margin-top: 1.5rem;
  font-size: 1.25rem;
}

h4,h5,h6 {
  font-size: 1rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

strong {
  color: #303030;
}

ul,ol,dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

dt {
  font-weight: bold;
}

dd {
  margin-bottom: .5rem;
}

hr {
  position: relative;
  margin: 1.5rem 0;
  border: 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #fff;
}

abbr {
  font-size: 85%;
  font-weight: bold;
  color: #555;
  text-transform: uppercase;
}

abbr[title] {
  cursor: help;
  border-bottom: 1px dotted #e5e5e5;
}

blockquote {
  padding: .5rem 1rem;
  margin: .8rem 0;
  color: #7a7a7a;
  border-left: .25rem solid #e5e5e5;
}

blockquote p:last-child {
  margin-bottom: 0;
}

@media (min-width: 30em) {
  blockquote {
    padding-right: 5rem;
    padding-left: 1.25rem;
  }
}

a[href^="#fn:"],a[href^="#fnref:"] {
  display: inline-block;
  margin-left: .1rem;
  font-weight: bold;
}

.footnotes {
  margin-top: 2rem;
  font-size: 85%;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
}

.highlight .hll {
  background-color: #ffc;
}

.highlight .c {
  color: #999;
}

.highlight .err {
  color: #a00;
  background-color: #faa;
}

.highlight .k {
  color: #069;
}

.highlight .o {
  color: #555;
}

.highlight .cm {
  color: #09f;
  font-style: italic;
}

.highlight .cp {
  color: #099;
}

.highlight .c1 {
  color: #999;
}

.highlight .cs {
  color: #999;
}

.highlight .gd {
  background-color: #fcc;
  border: 1px solid #c00;
}

.highlight .ge {
  font-style: italic;
}

.highlight .gr {
  color: red;
}

.highlight .gh {
  color: #030;
}

.highlight .gi {
  background-color: #cfc;
  border: 1px solid #0c0;
}

.highlight .go {
  color: #aaa;
}

.highlight .gp {
  color: #009;
}

.highlight .gu {
  color: #030;
}

.highlight .gt {
  color: #9c6;
}

.highlight .kc {
  color: #069;
}

.highlight .kd {
  color: #069;
}

.highlight .kn {
  color: #069;
}

.highlight .kp {
  color: #069;
}

.highlight .kr {
  color: #069;
}

.highlight .kt {
  color: #078;
}

.highlight .m {
  color: #f60;
}

.highlight .s {
  color: #d44950;
}

.highlight .na {
  color: #4f9fcf;
}

.highlight .nb {
  color: #366;
}

.highlight .nc {
  color: #0a8;
}

.highlight .no {
  color: #360;
}

.highlight .nd {
  color: #99f;
}

.highlight .ni {
  color: #999;
}

.highlight .ne {
  color: #c00;
}

.highlight .nf {
  color: #c0f;
}

.highlight .nl {
  color: #99f;
}

.highlight .nn {
  color: #0cf;
}

.highlight .nt {
  color: #2f6f9f;
}

.highlight .nv {
  color: #033;
}

.highlight .ow {
  color: #000;
}

.highlight .w {
  color: #bbb;
}

.highlight .mf {
  color: #f60;
}

.highlight .mh {
  color: #f60;
}

.highlight .mi {
  color: #f60;
}

.highlight .mo {
  color: #f60;
}

.highlight .sb {
  color: #c30;
}

.highlight .sc {
  color: #c30;
}

.highlight .sd {
  color: #c30;
  font-style: italic;
}

.highlight .s2 {
  color: #c30;
}

.highlight .se {
  color: #c30;
}

.highlight .sh {
  color: #c30;
}

.highlight .si {
  color: #a00;
}

.highlight .sx {
  color: #c30;
}

.highlight .sr {
  color: #3aa;
}

.highlight .s1 {
  color: #c30;
}

.highlight .ss {
  color: #fc3;
}

.highlight .bp {
  color: #366;
}

.highlight .vc {
  color: #033;
}

.highlight .vg {
  color: #033;
}

.highlight .vi {
  color: #033;
}

.highlight .il {
  color: #f60;
}

.css .o,.css .o+.nt,.css .nt+.nt {
  color: #999;
}

code,pre {
  font-family: Menlo, Monaco, "Courier New", monospace;
}

code {
  padding: .25em .5em;
  font-size: 85%;
  color: #bf616a;
  background-color: #f9f9f9;
  border-radius: 3px;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
}

pre code {
  padding: 0;
  font-size: 100%;
  color: inherit;
  background-color: transparent;
}

.highlight {
  padding: 1rem;
  margin-bottom: 1rem;
  font-size: .8rem;
  line-height: 1.4;
  background-color: #f9f9f9;
  border-radius: .25rem;
}

.highlight pre {
  margin-bottom: 0;
  overflow-x: auto;
}

.highlight .lineno {
  display: inline-block;
  padding-right: .75rem;
  padding-left: .25rem;
  color: #999;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.container {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  margin-left: auto;
  margin-right: auto;
}

footer {
  margin-bottom: 2rem;
  margin-top: 4rem;
}

.masthead {
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 3rem;
}

.masthead-title {
  margin-top: 0;
  margin-bottom: 0;
  color: #505050;
}

.masthead-title a {
  color: #505050;
}

.masthead-title small {
  font-size: 75%;
  font-weight: 400;
  color: #c0c0c0;
  letter-spacing: 0;
}

.page,.post {
  margin-bottom: 4em;
}

.page-title,.post-title,.post-title a {
  color: #303030;
}

.page-title,.post-title {
  margin-top: 0;
}

.post-date {
  display: block;
  margin-top: -.5rem;
  margin-bottom: 1rem;
  color: #9a9a9a;
}

.related {
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-top: 1px solid #eee;
}

.related-posts {
  padding-left: 0;
  list-style: none;
}

.related-posts h3 {
  margin-top: 0;
}

.related-posts li small {
  font-size: 75%;
  color: #999;
}

.related-posts li a:hover {
  color: #268bd2;
  text-decoration: none;
}

.related-posts li a:hover small {
  color: inherit;
}

.pagination {
  overflow: hidden;
  margin: 0 -1.5rem 1rem;
  font-family: "PT Sans", Helvetica, Arial, sans-serif;
  color: #ccc;
  text-align: center;
}

.pagination-item {
  display: block;
  padding: 1rem;
  border: solid #eee;
  border-width: 1px 0;
}

.pagination-item:first-child {
  margin-bottom: -1px;
}

a.pagination-item:hover {
  background-color: #f5f5f5;
}

@media (min-width: 30em) {
  .pagination {
    margin: 3rem 0;
  }

  .pagination-item {
    float: left;
    width: 50%;
    border-width: 1px;
  }

  .pagination-item:first-child {
    margin-bottom: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }

  .pagination-item:last-child {
    margin-left: -1px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}

.message {
  margin-bottom: 1rem;
  padding: 1rem;
  color: #717171;
  background-color: #f9f9f9;
}

body {
  font-family: "avenir next", "helvetica neue", helvetica, arial, sans-serif;
}

.post-page__logo {
  height: auto;
  margin: 2em auto 1em;
  vertical-align: middle;
}

.post-page__logo-wrapper {
  text-align: center;
}

.masthead-title {
  font-size: 1rem;
}

.masthead-title a {
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #333;
  font-weight: 500;
}

.twitter-tweet {
  margin-bottom: 1.5rem !important;
}


@media (min-width: 56em) {
  .jsbin-wrapper {
    margin-left: -15%;
    margin-right: -15%;
  }
}

@media (min-width: 64em) {
  .jsbin-wrapper {
    margin-left: -25%;
    margin-right: -25%;
  }
}

.jsbin-not-loading-msg {
  display: block;
  font-size: 70%;
  text-align: center;
  color: #aaa;
}


nav {
  float: left;
  margin-right: 50px;
  margin-top: 20px;
  width: 100%;
}

nav a {
  padding: 0px;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  text-decoration: none;
}

nav a:hover {
  text-decoration: none;
  opacity: 0.5;
}

label { font-weight: normal; font-size: 16px; }

footer{ text-align: center; }





html{overflow-y:scroll;} /* Forces a scrollbar when the viewport is larger than the websites content - CSS3 */

body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#919191; background-color:#232323;}

.clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden; line-height:0;}
.clear{display:block; clear:both;}
html[xmlns] .clear{display:block;}
* html .clear{height:1%;}

a{outline:none; text-decoration:none;}

code{font-weight:normal; font-style:normal; font-family:Georgia, "Times New Roman", Times, serif;}

.fl_left{float:left;}
.fl_right{float:right;}

img{margin:0; padding:0; border:none; line-height:normal; vertical-align:middle;}
.imgholder, .imgl, .imgr{padding:4px; border:1px solid #D6D6D6; text-align:center;}
.imgl{float:left; margin:0 15px 15px 0; clear:left;}
.imgr{float:right; margin:0 0 15px 15px; clear:right;}

/*----------------------------------------------HTML 5 Overrides-------------------------------------*/

address, article, aside, figcaption, figure, footer, header, nav, section{display:block; margin:0; padding:0;}

q{display:block; padding:0 10px 8px 10px; color:#979797; background-color:#ECECEC; font-style:italic; line-height:normal;}
q:before{content:'“ '; font-size:26px;}
q:after{content:' „'; font-size:26px; line-height:0;}

/* ----------------------------------------------Wrapper-------------------------------------*/

div.wrapper{display:block; width:100%; margin:0; padding:0; text-align:left;}

.row1, .row1 a{color:#C0BAB6; background-color:#333333;}
.row2{color:#979797; background-color:#FFFFFF;}
.row2 a{color:#FF9900; background-color:#FFFFFF;}
.row3, .row3 a{color:#919191; background-color:#232323;}

/*----------------------------------------------Generalise-------------------------------------*/

#header, #container, #footer{display:block; width:100%; margin:0 auto;}

nav ul{margin:0; padding:0; padding-start: 0px; list-style:none;}

h1, h2, h3, h4, h5, h6{margin:0; padding:0; font-size:22px; font-weight:normal; font-style:italic; line-height:normal;}

address{font-style:normal;}

blockquote, q{display:block; padding:8px 10px; color:#979797; background-color:#ECECEC; font-style:italic; line-height:normal;}
blockquote:before, q:before{content:'“ '; font-size:26px;}
blockquote:after, q:after{content:' „'; font-size:26px; line-height:0;}

form, fieldset, legend{margin:0; padding:0; border:none;}
legend{display:none;}
input, textarea, select{font-size:12px; font-family:Georgia,"Times New Roman",Times,serif;}

.one_quarter, .two_quarter, .three_quarter, .four_quarter{display:block; float:left; margin:0 20px 0 0;}
.one_quarter{width:225px;}
.two_quarter{width:470px;}
.three_quarter{width:715px;}
.four_quarter{width:960px; float:none; margin-right:0; clear:both;}

.one_third, .two_third, .three_third{display:block; float:left; margin:0 30px 0 0;}
.one_third{width:300px;}
.two_third{width:630px;}
.three_third{width:960px; float:none; margin-right:0; clear:both;}

.lastbox{margin-right:0;}

/*----------------------------------------------Header-------------------------------------*/

#header{padding:20px 0 5px 0;}

#header #hgroup{float:left; margin:0 0 20px 20px;}
#header #hgroup h1, #header #hgroup h2{font-weight:normal; font-style:normal; text-transform:none;}
#header #hgroup h1{font-size:36px;}
#header #hgroup h2{font-size:13px;}

#header form{display:block; width:290px; float:right; margin:20px 0; padding:0;}
#header form input{display:block; float:left; width:200px; margin:0; padding:5px; color:#C0BAB6; background-color:#232323; border:1px solid #666666;}
#header form #sf_submit{display:block; float:right; width:70px; font-size:12px; font-weight:bold; text-transform:uppercase; color:#FFFFFF; background-color:#FF9900; border:none; cursor:pointer;}

#header nav{display:block; width:100%; margin:0; padding:20px 0; color:#C0BAB6; background-color:#232323; clear:both;}
#header nav ul{padding:0 20px;}
#header nav li{display:inline; margin-right:25px; text-transform:uppercase;}
#header nav li.last{margin-right:0;}
#header nav li a{color:#C0BAB6; background-color:#232323;}
#header nav li a:hover{color:#FF9900; background-color:#232323;}

/*----------------------------------------------Content Area-------------------------------------*/

#container{padding:30px 0;}
#container section{display:block; margin-bottom:30px; padding:0;}
#container .last{margin:0;}
#container .more{text-align:right;}

/* ------Slider-----*/
#container #slider{width:100%; border-bottom-color: rbg(214,214,214); border-bottom-style: solid; border-bottom-width: 1px; padding-bottom: 30px;}
#container #slider .row { }
#container #slider figure{ diplay: flex; align-items: center;}
#container #slider figure figcaption{border-radius: 10px; display:block; float:left; padding:10px; width: 100%; height: 100%; overflow:hidden; color:#989898; background-color:#464646; line-height:1.6em;}
#container #slider figure figcaption a{color:#FF9900; background-color:#464646;}
#container #slider figure h2{font-size:42px; font-weight:normal; font-style:italic; text-transform:none;}
#container #slider figure footer{}

/* ------Main Content-----*/

#container #intro{width:100%; margin-bottom:10px; padding-bottom:0px; border-bottom:1px solid #D6D6D6;}
#container #intro section{width:100%;}
#container #intro section article{ padding-left: 25px; padding-right: 25px;}
#container #intro section article h2{margin-bottom:15px;}
#container #intro section article p{}
#container #intro section article figure ul{display:block; width:100%; margin:0; padding:0; list-style:none;}
#container #intro section article figure ul li{display:inline-block; float:left; margin:0 0px 0 30px;}
#container #intro section article figure ul li.last{margin:0;}
#container #intro section article figure ul li img{width:130px; height:130px; margin:0; padding:4px; border:1px solid #D6D6D6;}
#container #intro section article figure figcaption{display:block; width:100%; margin-top:20px; clear:both; text-align:center; text-transform:uppercase; font-weight:bold;}

#container #homepage{display:block; width:100%; line-height:1.6em;}
#container #homepage section{margin-bottom:0;}
#container #homepage section h2.title{margin:20px 0 25px 0; padding:0 0 8px 0; font-size:16px; font-weight:bold; text-transform:uppercase;}
#container #homepage section footer{clear:both;}

/* ------Blogposts-----*/

#container #homepage section article header h2{font-size:13px; font-weight:bold;}
#container #homepage section article address, #container #homepage section article time{font-size:10px; font-style:normal;}
#container #homepage section article footer{text-align:left;}

/* ------Quick Links-----*/

#container #homepage section nav li{margin:0 0 8px 0; padding:0 0 5px 0; border-bottom:0px solid #D6D6D6;}
#container #homepage section nav li.last{margin:0;}
/* #container #homepage section nav a{padding:0 0 0 10px; background:url("../images/arrow.gif") left center no-repeat;} */

/*----------------------------------------------Footer-------------------------------------*/

#footer{padding:20px 0;}
#footer p{margin:0; padding:0;}

.xinvisible {
  display: none;
  top: 20%;
  left: 25%;
  position: fixed;
  z-index: 10;
  height: auto;
  width: 50%;
  padding-right: 8px;
}

.xinvisible button {
  z-index: 15;
  position: absolute;
  top: 0px;
  right: 0px;
  margin-left: 15px;
  margin-bottom: 10px;
}

.xinvisible .xmen {
  margin: 0 auto;
  margin-top: 6px;
  width: 100%;
  height: auto;
}
.xinvisible-timeline {
  display: none;
  top: 5%;
  left: 30%;
  position: fixed;
  z-index: 10;
  height: 700px;
  width: 50%;
  padding-right: 8px;
}
.xinvisible-timeline .xbutton2 {
  z-index: 15;
  position: absolute;
  top: 0px;
  right: 0px;
  margin-left: 10px;
  margin-bottom: 10px;
}

.xinvisible-timeline .xmen {
  margin: 0 auto;
  margin-top: 6px;
  width: 100%;
  height: 700px;
}
.xinvisible-timeline iframe {
  width: 100%;
  height: 100%;
}

.video-container {
  position:relative;
  padding-bottom:56.25%;
  padding-top:30px;
  height:0;
  overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

#lastNav {
  float: left;
}

.x1st {
  margin-left: 10px;
  margin-right: 10px;
}

.x2nd {
  margin-left: 5px;
}

.x3rd {
  margin-right: 10px;
}

.heading2 {
  color: white;
}

@keyframes fading{
  0%{
    opacity:0
  }
  50%{
    opacity:1
  }
  100%{
    opacity:0
  }
}

.slideShow {
  animation-name: fading;
  animation-duration: 2.5s;
}