@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:700);
@import url(http://fonts.googleapis.com/css?family=Muli);
@import url(http://fonts.googleapis.com/css?family=Stalemate);
@import url(http://fonts.googleapis.com/css?family=Oswald);

body {
    margin:0;
    padding:0;
    height:100%;
    background: url(background.JPG);
    background-size: cover;
    background-position: center;
    /*background-size: 100% 100%;*/
    background-repeat: no-repeat;
    overflow: hidden; }

h1 {
/*    display: inline; 
    position:absolute;  */
    margin:0;
    padding:0;
    text-align:center;
    font-family:Roboto Slab;
    background: rgba(30, 30, 30, 0.90);
    color:white;
    font-size:50px;
    max-height:33%;
    width:100%;	 }

.searchbar {
    margin:0;
    padding:0;
    float:right; }

.title {	
    margin:0;
    padding:20;
    height:33%; }

center {
    margin:0;
    padding:0;  
    background: rgba(30, 30, 30, 0.90);
    height:100%; }  
    
.middle {
    padding:0px;
    padding-bottom:0px;   /* Height of the footer */
/*    background: rgba(30, 30, 30, 0.90); */
    height:0%;
    webkit-opacity: 0.25;
    moz-opacity: 0.25;
    opacity: 0.25;
    transition: opacity 2s linear; }

.middle:hover {
    webkit-opacity: 1;
    moz-opacity: 1;
    opacity: 1;
    transition: opacity 2s linear; }

.footer {
    font-family:Times;
    color:red;
    font-size:14px;
    text-align:center;
/*    background: rgba(30, 30, 30, 0.90); */
    position:absolute;
    bottom:0;
    width:100%;
    height:6%;   /* Height of the footer */ }