@import url(https://fonts.googleapis.com/css?family=Khula:700);

.hidden {
  opacity:0;
}
.console-container {

  font-family:Khula;
  font-size:1.7em;
  text-align:center;
  width:100%;

  display:block;
  position:absolute;
  color:gray;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
}
.console-underscore {
   display:inline-block;
  position:relative;
  top:-0.14em;
  left:10px;
}


html,body {
  height: 100%;
}



.load-more {
    margin:0 auto;
}

.post-thumb {
    margin-top:10px;
    max-height: 510px;
    position:relative;
    overflow: hidden;
}

.post-img {
    display:block;
    overflow:hidden;
}

.post-img > img {
    transition:  0.5s;
    width:100%;
    vertical-align:middle
}

.post-img > img:hover {
    transition:  1s;
    transform:scale(1.05);
}

.post-body {
    position:absolute;
    bottom:0;
    width:100%;
    background-image: linear-gradient(red, black);
    opacity:0.9;
    transition:0.2s opacity;
    color:white;
}

.post-title  {
    color:#fff;
    text-decoration:none;
    display:block;
    width:100%;
    padding:10px;

}

.post-title:hover {
    color:#fff;
    text-decoration:none;
}

.post-meta {
    color:white;
    position:absolute;
    top:5px;
    left:0;
}

.post-category {
    background:orange;
    padding:5px 0px;
}

/* Post Box */

/* Add Block */
.ad-block > a {
    display:block;
    width:300px;
    height:250px;
    overflow:hidden;
}

.ad-block > a > img {
    border:2px solid gray;
    display:block;
    border-radius:0px;
    -webkit-transition:  1s; /* Safari prior 6.1 */
    transition:  1s;
}

.ad-block > a > img:hover {
    border:2px solid darkred;
    border-radius:15px;
    -webkit-transition:  0.5s; /* Safari prior 6.1 */
    transition:  0.5s;
    transform: scale(1.05);
}

.blog-title-box {
    position:absolute;
    bottom:0px;
    left:0px;
    color:white;
    padding:10px 20px;
}

.blog-picture {
    width:100%;
}

.blog-picture-wrapper {
    //max-height:720px;
    overflow:hidden;
}



/* End Ad Block */

footer {
  background: #222;
  color: #aaa;
  padding-top: 10px;
  margin-top:10px;
}

footer a {
  color: #aaa;
}

footer a:hover {
  color: #fff;
}

footer h3 {
 color: #0894d1;
  letter-spacing: 1px;
  margin: 30px 0 20px;
}

footer .three-column {
 overflow: hidden;
}

footer .three-column li{
 width: 33.3333%;
  float: left;
  padding: 5px 0;
}

footer .socila-list {
  overflow: hidden;
  margin: 20px 0 10px;
}

footer .socila-list li {
  float: left;
  margin-right: 3px;
  opacity: 0.7;
  overflow: hidden;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}

footer .socila-list li:hover {
  opacity: 1;
}

footer .img-thumbnail {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid #444;
  margin-bottom: 5px;
}

footer .copyright {
  padding: 15px 0;
  background: #333;
  margin-top: 20px;
  font-size: 15px;
}

footer .copyright span {
  color: #0894d1;
}

/* Search form */
.sForm{
  position: relative;
  margin-right: 5px;
  top: 25px;
  transform: translate(-5%,-50%);
  transition: all 1s;
  width: 50px;
  height: 50px;
  background: white;
  box-sizing: border-box;
  border-radius: 25px;
  border: 4px solid white;
  padding: 5px;
}

.sForm > input{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;;
  height: 42.5px;
  line-height: 30px;
  outline: 0;
  border: 0;
  display: none;
  font-size: 1em;
  border-radius: 20px;
  padding: 0 20px;
}

.sForm > .fa{
  box-sizing: border-box;
  padding: 10px;
  width: 42.5px;
  height: 42.5px;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 50%;
  color: #07051a;
  text-align: center;
  font-size: 1.2em;
  transition: all 1s;
}

.sForm:hover{
  width: 200px;
  cursor: pointer;
}

.sForm:hover input{
  display: block;
}

.sForm:hover .fa{
  background: #07051a;
  color: white;
}

/* Language Select Box */


.box select {
  background-color: #0563af;
  color: white;
  padding: 12px;
  width: 250px;
  border: none;
  font-size: 20px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
  -webkit-appearance: button;
  appearance: button;
  outline: none;
}



.box:hover::before {
  color: rgba(255, 255, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.2);
}

.box select option {
  padding: 30px;
}

.channel-image {
    width: 200px ;
    border-radius:50%;
    margin-bottom:5px

}