/*
Theme Name:     CS Minimal Theme
Theme URI: 		http://csint.de
Description:    CS Minimal Theme 
Author: 		Christian Schmidt
Author URI: 	https://csint.de/
Version:        1.0.0
*/

a,a:hover{
color:#2a7cb2
}
.post::after,hr{
display:block;
clear:both
}
#page,.main-header,.videoWrapper{
position:relative
}
.code,code,pre{
letter-spacing:0
}
.caption,.intro-blog,.main-header,.pagination,.pagination a,footer{
text-align:center
}
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
border:none;
font:inherit;
margin:0;
padding:0;
vertical-align:baseline
}
button,input{
background:0 0
}
body{
background:#fff;
color:#555;
font-family:Georgia,Times;
font-weight:300;
font-style:normal;
font-size:19px;
line-height:1.725;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-webkit-text-size-adjust:100%
}
blockquote,em{
font-style:italic
}
@media(max-width:800px){
body{
font-size:17px
}
}
@media(max-width:600px){
body{
font-size:15px
}
}
h1,h2,h3,h4,h5{
color:#212121;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight:600;
font-size:1em;
line-height:1.3;
margin-bottom:1em
}
h2,h3,h4,h5{
margin-top:2em
}
#menu a,.button{
font-weight:400
}
.post ol,.post ul,amp-video,amp-vimeo,amp-youtube,iframe,p,video{
margin:0 0 1em
}
.quote,blockquote,ol,ul{
margin:0 0 15px
}
twitterwidget{
margin-bottom:1em!important
}
a{
font-weight:inherit;
text-decoration:none;
transition:color .15s ease-out,border-bottom-color .15s ease-out
}
p a{
border-bottom:1px solid #eee
}
p a:hover{
border-bottom-color:#212121
}
strong{
font-weight:700
}
h2,h3{
font-weight:400
}
h1{
font-size:1.7em
}
h2{
color:#444;
font-size:1.6em
}
h3{
color:#666;
font-size:1.4em
}
#menu a[aria-current],.intro-blog{
font-weight:700
}
h4{
font-size:1.18em
}
h5{
font-size:1em
}
a h1,a h2,a h3,a h4,a h5{
transition:color .15s ease-out
}
a:hover h1,a:hover h2,a:hover h3,a:hover h4,a:hover h5{
color:#3498db
}
blockquote{
border-left:2px solid #ccc;
padding-left:20px
}
ol,ul{
padding-left:25px
}
ul{
list-style:square
}
ol{
list-style:decimal
}
hr{
background:#eee;
color:#eee;
height:2px;
margin:30px auto;
width:50%
}
.main-header,.post,.post .svg-container object{
width:100%
}
code,pre{
color:#333;
font-family:Courier,Menlo,Monaco;
font-size:.8em;
overflow-x:auto
}
.author,.intro-blog,.main-header{
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif
}
pre{
padding:.8em 1em
}
code{
margin:0
}
.post::after{
content:''
}
.main-header{
background-color:#005689;
overflow:hidden;
/*padding:1em*/
}
#menu{
display:inline-block;
margin:1px 0
}
#menu a{
color:#fff;
font-size:14px;
margin-left:15px;
padding:20px 10px;
text-transform:uppercase
}
@media(max-width:500px){
#menu a{
margin-left:10px;
padding:10px 5px
}
}
#menu a:first-child{
margin-left:0
}
#page{
margin:0 auto;
max-width:40em;
padding:3em 2em
}
.videoWrapper{
height:0;
margin-bottom:1em;
padding-bottom:56.25%;
padding-top:25px
}
.videoWrapper amp-youtube,.videoWrapper iframe{
height:100%;
left:0;
position:absolute;
top:0;
width:100%
}
.wrapper{
border-top:2px solid #eee;
padding:3em 0
}
.wrapper:first-child{
border-top:none;
padding-top:5%
}
.posts-list h2{
margin-top:0
}
.post{
display:block
}
.post div[itemprop=articleBody]>p:first-child{
color:#333
}
.post li{
margin-bottom:.5em
}
.post p img{
border:1px solid #eee;
display:block;
max-width:100%
}
.post img+.caption{
padding-top:5px
}
.post .svg-container{
margin-bottom:5%;
max-width:100%;
text-align:center
}
video{
height:auto;
max-width:100%
}
footer{
background:rgba(0,0,0,.05);
padding:2em
}
.button{
background-color:#fff;
border:1px solid #555;
border-radius:20px;
color:#555;
display:inline-block;
font-size:13px;
line-height:10px;
padding:10px 20px;
transition:background-color .15s ease-out
}
.button:hover{
background-color:#3498db;
border-color:transparent;
color:#fff
}
.button.inactive{
background-color:#ccc;
color:#fff
}
.search-goog input{
border:2px solid #ddd;
padding:10px
}
.search-goog input[type=submit]{
background-color:#ddd;
cursor:pointer
}
@media only screen and (max-width:768px){
#page,.wrapper{
margin:0;
max-width:100%;
padding:1.5em;
width:100%
}
.wrapper{
padding:10% 0
}
.wraper::after{
clear:both;
content:'';
display:block
}
.post{
margin:0 auto;
max-width:640px
}
}
.outscreen{
height:1px;
left:-1000px;
overflow:hidden;
position:absolute;
top:auto;
width:1px
}
.callout{
border:1px solid #eee;
border-left-color:#777;
border-left-width:5px;
border-radius:3px;
font-size:90%;
padding:20px;
margin:20px 0
}
.author{
font-size:.8em;
margin-bottom:2em
}
.author .name{
line-height:1.5;
padding-top:.35em
}
.bd,.media{
overflow:hidden;
zoom:1
}
.media .img{
float:left
}
.avatar-img{
border-radius:100%;
height:3.5em;
margin-right:.5em;
width:3.5em
}
.highlight{
border:1px solid #eee;
margin-bottom:1em;
overflow-x:auto
}
.code{
background:#fff;
color:#333;
display:block;
overflow-x:auto
}
.code .comment,.code .meta{
color:#969896
}
.code .emphasis,.code .quote,.code .string,.code .strong,.code .template-variable,.code .variable{
color:#df5000
}
.code .keyword,.code .selector-tag,.code .type{
color:#a71d5d
}
.code .attribute,.code .bullet,.code .literal,.code .symbol{
color:#0086b3
}
.code .name,.code .section{
color:#63a35c
}
.code .tag{
color:#333
}
.code .attr,.code .selector-attr,.code .selector-class,.code .selector-id,.code .selector-pseudo,.code .title{
color:#795da3
}
.code .addition{
background-color:#eaffea;
color:#55a532
}
.code .deletion{
background-color:#ffecec;
color:#bd2c00
}
.code .link{
text-decoration:underline
}
.code-wrap pre{
white-space:pre-wrap
}
.caption{
display:block;
font-size:.8em
}
.codepen-aspect-ratio>iframe{
height:100%;
position:absolute;
width:100%
}
.twitter-tweet{
margin-left:auto;
margin-right:auto
}
.twitter-tweet::after{
content:"";
display:block;
padding-bottom:20px;
width:100%
}
.intro-blog{
font-size:1.5em;
line-height:1.3;
margin:2em auto;
max-width:640px
}






#menu{
padding:1em;
}





#hero-header {
position: relative;
padding: 5vh 1.75em;
}
#hero-header:before {
position: absolute;
z-index: 1;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
content: "\020";
background: -webkit-linear-gradient(rgba(0, 0, 0, .15) 50%, rgba(0, 0, 0, .45));
background:	linear-gradient(rgba(0, 0, 0, .15) 50%, rgba(0, 0, 0, .45));
box-shadow: 0 -1px 8px rgba(0, 0, 0, .2) inset;
}
.site-branding {
position: relative;
z-index: 2;	
margin-bottom: 1.75em;
}
.site-title {
color: white;
}
.site-title {
margin: .4375em 0 0;
font-size: 38px;
font-weight: bold;
line-height: 1.2;
color: #333332;
}
.site-title a {
text-decoration: none;
color: #fff;
}
.site-description {
margin: .4375em 0 0;
font-size: 17px;
font-weight: inherit;
line-height: 1.4;
word-wrap: break-word;
color: #fff;
}
.site-logo-link img {
display: block;
max-width: 80px;
height: 80px;
margin: auto;
border-radius: 80px;

transition: box-shadow 200ms ease;    
}	
.site-logo-link {
display: block;
}	


.alignright{
float: right;
padding:2px;
margin-left: 10px;
margin-bottom: 10px;
}
.alignleft{
float: left;
padding:2px;
margin-right: 10px;
margin-bottom: 10px;
}





.pagination {
clear:both;
padding:20px 0;
position:relative;
font-size: 13px;
line-height:13px;
}
 
.pagination span, .pagination a {
float:left;
margin: 2px 2px 2px 0;
text-decoration:none;
width:auto;

background-color:#fff;
border:1px solid #555;
border-radius:20px;
color:#555;
display:inline-block;
font-size:13px;
line-height:10px;
padding:10px 20px;
transition:background-color .15s ease-out
}
 
.pagination a:hover{
color:#fff;
background: #3279BB;
}
 
.pagination .current{
padding:10px 20px;
background: #3279BB;
color:#fff;
}