/*!
 * Centrio design...
 */

body {
	font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
}

.playbig{   
    cursor: pointer;
}

.servername a {
  color: #888;
}

.channame a {
  color: #888;
}

.sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 50; left: 0; background: #F6F6F6; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } .sidenav a:hover { color: #f1f1f1; } .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } 
.switch {
  position: relative;
  display: inline-block;
  width: 58px;
  height: 32px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 32px;
}

.slider.round:before {
  border-radius: 50%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
.well blockquote {
  border-color: #ddd;
  border-color: rgba(0, 0, 0, .15);
}
.well-lg {
  padding: 24px;
  border-radius: 6px;
}
.well-sm {
  padding: 9px;
  border-radius: 3px;
}



@media(max-width:768px) {
  p.ausblenden {
display: none;
}
}

/* Sidebar Styles */

.sidebar-nav {
  position: absolute;
  top: 10;
  width: 250px;
  margin: 0;
  padding: 0;
  list-style: none;
background: #F6F6F6 none repeat scroll 0% 0%;

}

.sidebar-nav li {
  text-indent: 20px;
  line-height: 40px;
}

.sidebar-nav li a {
  display: block;
  text-decoration: none;
  color: #999999;
}

.sidebar-nav li a:hover {
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}

.sidebar-nav li a:active, .sidebar-nav li a:focus {
  text-decoration: none;
}

.sidebar-nav>.sidebar-brand {
  height: 65px;
  font-size: 18px;
  line-height: 60px;
}

.sidebar-nav>.sidebar-brand a {
  color: #999999;
}

.sidebar-nav>.sidebar-brand a:hover {
  color: #fff;
  background: none;
}




@media(min-width:768px) {
  #wrapper {
    padding-left: 0;
  }
  #wrapper.toggled {
    padding-left: 250px;
  }
  #sidebar-wrapper {
    width: 0;
  }
  #wrapper.toggled #sidebar-wrapper {
    width: 250px;
  }
  #page-content-wrapper {
    padding: 20px;
    position: relative;
  }
  #wrapper.toggled #page-content-wrapper {
    position: relative;
    margin-right: 0;
  }
}



#hintergrund {
background-color: #222;
}


footer {
      background-color: #111;
      padding: 25px;
    }




hr.news {
 
    width: 100%;
 
    height: 3px;
 
    margin: 0 auto;

    color: black;

    background-color: #1CC7E3;


}

.staff-member {

  height: 150px;

  width: 150px;

  padding-top: 100px;

  display: inline-block;

  margin-right: 9px;

  margin-bottom: 20px;

}

.staff-name {

  background: rgba(0,0,0,.3);

  height: 50px;

  padding: 15px 10px;

  min-width: 100%;

}

.staff-name span {

  color: #fff;

  font-size: 15px;

}

.carousel-inner > .item > iframe{

  display: block;

  max-width: 100%;

  height: auto;

  line-height: 1;

}

.vote-item {

  min-width: 100%;

  min-height: 500px;

  border: 0px solid transparent;

}

.vote-name {

  color: #1CC7E3;

}

.server-name-card {

font-weight: 600;

text-align: center;
}


header.masthead{
margin-bottom:50px;
background:no-repeat center center;
background-color:#222;
background-attachment: fixed;
position:relative;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover
overflow: hidden;
}

#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    opacity: .7;
z-index: 1
}

#Button {
    position: absolute;
    width: 100%;
z-index: 8;
margin:10px 0 0;
}


header.masthead .overlay{
position: absolute;
top:0;
left:0;
height:100%;
width:100%;
background-color:#222;
opacity:.7}

header.masthead .page-heading,header.masthead .post-heading,header.masthead .site-heading{
padding:200px 0 150px;
color:#fff}

@media only screen and (min-width:768px){
header.masthead .page-heading,header.masthead .post-heading,header.masthead .site-heading{
padding:200px 0}
}

header.masthead .page-heading,header.masthead .site-heading{
text-align:center}

header.masthead .page-heading h1,header.masthead .site-heading h1{
font-size:50px;
margin-top:0}

header.masthead .page-heading .subheading,header.masthead .site-heading .subheading{
font-size:24px;
font-weight:300;
line-height:1.1;
display:block;
margin:10px 0 0;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
}

@media only screen and (min-width:768px){
header.masthead .page-heading h1,header.masthead .site-heading h1{
font-size:80px}
}
header.masthead .post-heading h1{
font-size:35px}
header.masthead .post-heading .meta,header.masthead .post-heading .subheading{
line-height:1.1;
display:block}
header.masthead .post-heading .subheading{
font-size:24px;
font-weight:600;
margin:10px 0 30px;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
}
header.masthead .post-heading .meta{
font-size:20px;
font-weight:300;
font-style:italic;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif}
header.masthead .post-heading .meta a{
color:#fff}
@media only screen and (min-width:768px){
header.masthead .post-heading h1{
font-size:55px}
header.masthead .post-heading .subheading{
font-size:30px}
}
.post-preview>a{
color:#212529}
.post-preview>a:focus,.post-preview>a:hover{
text-decoration:none;
color:#0085a1}
.post-preview>a>.post-title{
font-size:30px;
margin-top:30px;
margin-bottom:10px}
.post-preview>a>.post-subtitle{
font-weight:300;
margin:0 0 10px}
.post-preview>.post-meta{
font-size:18px;
font-style:italic;
margin-top:0;
color:#868e96}
.post-preview>.post-meta>a{
text-decoration:none;
color:#212529}
.post-preview>.post-meta>a:focus,.post-preview>.post-meta>a:hover{
text-decoration:underline;
color:#0085a1}
@media only screen and (min-width:768px){
.post-preview>a>.post-title{
font-size:36px}
}

body {
  padding-top: 54px;
}

@media (min-width: 992px) {
  body {
    padding-top: 54px;
  }
}

.carousel-item {
  height: 65vh;
  min-height: 300px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.portfolio-item {
  margin-bottom: 30px;
}