table, th, td {
    border: 1px solid black;
    padding: 5px;
}

.site-footer{
  position: fixed;
  background-color: #000000;
  bottom:0px;
  right:0px;
  left:0px;
  padding: 12px;  
  overflow:hidden;
  clear: both;
}


.text_ack{
   /* Acknowlegement text in the footer */
   color: #FDFEFE;
   font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
   font-size: 14px;
   text-align: center;
}


.container img{
        width:100%;
        height:250px;
        border-radius:15px;
        transition: .3s;
        overflow: hidden;
}

.container :not(img){
        position: absolute;
        top: 2%;
        z-index: 1;
        color: #fff;
        text-aligh:center;
        width:100%;
        opacity:0;
        }


.container:hover img{
   filter:blur(2px) brightness(60%);
}

.container:hover :not(img){
   opacity:1;
}


#link{
        position:relative;
        font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
        text-align: center;
        margin-left: 12px;
        margin-top: 17.5%;
        background-color: blue; 
        }


.smallcontainer10 {
        margin-top: 1%;
        width: 35%;
        height: 24px;
        display: inline-block;
        border: 0px solid white;
        margin-left: 9.5%;
        position: relative;
        border-radius:0px;
        }


.smallcontainer20 {
        margin-top: 1%;
        width: 35%;
        height: 24px;
        display: inline-block;
        border: 0px solid white;
        margin-left: 10%;
        position: relative;
        border-radius: 0px;
        }


.smallcontainer10,.smallcontainer20, .smallcontainer30, .smallcontainer40, #textfont {
        font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
        text-align: justify;
	/*font-size: 17px;*/
        }


#navbar {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 10px;
  transition: 0.4s;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right: 0; 
  z-index: 99;
}

#navbar a {
  float: left;
  color: black;
  text-align: center;
  padding: 8px;
  text-decoration: none;
  font-size: 18px; 
  line-height: 25px;
  border-radius: 8px;
}

#logo{
  margin-left:1%;
  margin-right:2%;
}

#navbar {
  font-size: 35px;
  /*font-weight: bold;*/
  font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
  transition: 0.4s;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #3B5998;
  color: white;
}

#navbar-right {
  margin-left: 1px;
  float: left; 
  /* float: center; We can have one or the other one */
}


@media screen and (max-width: 580px) {
  #navbar {
    padding: 10px !important;
  }
  #navbar a {
    float: none;
    display: block;
    text-align: left;
  }
  #navbar-right {
    float: none;
  }
}


.container {
        margin-top: 1%;
        width:35%;
        height: 250px;
        display: inline-block;
        border: 3px solid grey;
        margin-left:9.5%;
        position: relative;
        border-radius:20px;
        }


html, body {
        height: 80%;
	margin-left:2%;
        margin-right:2%;
        margin-bottom:10%;
        margin-top:2%;
        /*width:96%;*/
}

/* body:after{
  content: "beta";
  position: fixed;
  width: 80px;
  height: 25px;
  background: #228B22;
  top: 8px;
  right: -20px;
  text-align: center;
  font-size: 13px;
  font-family: Lato,Helvetica Neue,Helvetica,Arial,sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  color: #fff;
  line-height: 27px;
  -ms-transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
  transform:rotate(45deg);
  z-index: 1099;
}*/

.smallcontainer30 {
        width: 35%;
        border: 0px solid white;
	margin-top: 1%;
        margin-right: 10%;
        float: right;
        position: relative;
        }


.smallcontainer40 {
        width: 35%;
        border: 0px solid white;
        margin-top: 1%;
        margin-left: 10%;
        float: left;
        position: relative;
        }

area:link, area:hover, area:active, area:focus {
   border: 5px #f00 solid;
  }


.corner-ribbon{
  width: 80px;
  height: 25px;
  background: #e43;
  position: fixed;
  top: 8px;
  left: -20px;
  text-align: center;
  font-size: 13px;
  font-family: Lato,Helvetica Neue,Helvetica,Arial,sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  color: #fff;
  font-size: 13px;
  line-height: 27px;
  letter-spacing: 1px;
  color: #f0f0f0;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  z-index: 1099;
}

/* Custom styles */

.corner-ribbon.sticky{
  position: fixed;
}

.corner-ribbon.shadow{
  box-shadow: 0 0 3px rgba(0,0,0,.3);
}

.corner-ribbon.top-right{
  top: 8px;
  right: -20px;
  left: auto;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform:rotate(-45deg);
}

.corner-ribbon.white{background: #f0f0f0; color: #555;}
.corner-ribbon.black{background: #333;}
.corner-ribbon.grey{background: #999;}
.corner-ribbon.blue{background: #39d;}
.corner-ribbon.green{background: #228B22;}
.corner-ribbon.turquoise{background: #1b9;}
.corner-ribbon.purple{background: #95b;}
.corner-ribbon.red{background: #e43;}
.corner-ribbon.orange{background: #e82;}
.corner-ribbon.yellow{background: #ec0;}