@font-face {
    font-family: 'myFirstFont';
    src: url('../fonts/writer2.ttf');
}
@font-face {
    font-family: 'obux';
    src: url('../fonts/obux.ttf');
}
@font-face {
    font-family: 'font';
    src: url('../fonts/CT.ttf');
}
@font-face {
    font-family: 'font1'; /*a name to be used later*/
    src: url('../fonts/RT.ttf'); /*URL to font*/
}
@font-face {
    font-family: 'disfont'; /*a name to be used later*/
    src: url('../fonts/newfont.otf'); /*URL to font*/
}
*{
	margin:0px;
	padding:0px;
	}
 body{
	font-family:myFirstFont;
	box-sizing:border-box;
  font-size:16px;
  background:white;
  
 }
.nb{
  padding:0;
}

.nb img{
  float:left;
}

.nbd{
  background:rgba(255, 255, 255, 0.9);
	border-bottom:1px solid #e5e5e5;
  padding:10px;
}

.logotext{
  float:right;
  text-align:right;
  padding-left:20px;
  margin-top:10px;
  font-family:myFirstFont;
  font-size:1.5em;
  color:black;
  }
 
 .logotext b{
   color:#158c3c;
 }
 
 .navlinks li > a{
   color:black!important;
   font-family:arial;
   font-size:0.95em;
   
   
 }
 .navlinks li > a:hover{
   color:#00A859!important;
   border-bottom:3px solid green;
   
 }
 .navlinks li > active > a:hover,
 .navlinks li > active > a:focus
 {
   color:green!important;
   border-bottom:3px solid green;
   background:transparent;
   
 }

 .nav .open > a, .nav .open > a:focus, .nav .open > a:hover{
   background:transparent;
 }
.nbd .navlinks > .dd > a:focus,
.nbd .navlinks > .dd > a:hover {
  background:transparent;
  border-bottom:none;
}
 
.cs{
  margin-top:71px;
}
.dp{
  width:100%;
  background:#cccccc;
  margin-bottom:40px;
    
}
#dp-banner{
  width:100%;
  background:white;
  color:#461212;
  padding:20px;
  text-align:center;
}
.events{
  width:70%;
  border:1px solid red;
  margin:0 auto 20px auto;
  
}

.display-table{
  display:table;
  padding:0px;
  width:70%;
  margin:0 auto;
}
.display-table-row{
  display:table-row;
  border:1px solid green;
    
  }
 
.display-table-cell{
  display:table-cell;
  float:none;
  height:100%;
}
.dp-banner-details{
  width:100%;
  color:white;
  padding:20px;
  margin-bottom:10px;
}
.copyright{
  background:#000000;
  text-align:center;
  width:100%;
  height:40px;
  line-height:40px;
  color:white;
 }
.day{
  font-size:1.0em;
  font-weight:bold;
}
.date{
  background:black;
  color:white;
  padding:30px;
  font-family:font;
  }
 .month{
   font-family:arial;
   font-size:2em;
   font-weight:bold;
 }
.header{
  color:green;
  font-size:1.5em;
  font-weight:bold;
}

.programme{
  width:15%;
  float:left;
  height:100px;
  background:#333333;
  text-align:center;
  padding-top:20px;
  
}
.programme-details{
  width:85%;
  float:right;
  height:100px;
  background:white;
  color:black;
  padding-left:20px;
  }
 
 .mc{
   width:70%;
   margin:0 auto;
   padding:20px;
 }
 .event-date{
   background:black;
   color:white;
   height:100px;
   line-height:100px;
   font-weight:bold;
      
 }
 .event-row{
   background:white;
   margin-bottom:20px;
   box-shadow: 0 0 10px rgba(0,0,0,0.6);
  -moz-box-shadow: 0 0 10px rgba(0,0,0,0.6); 
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6); 
  -o-box-shadow: 0 0 10px rgba(0,0,0,0.6); 
 }
 
 .event-row:hover{
   border:1px solid black;
 }
 
.event-row > a{
   display:block;
  text-decoration:none;
 }
 
/* .event-row > a:hover{
   display:block;
   border:1px solid #555;
   box-shadow: 0 0 10px rgba(0,0,0,0.6);
  -moz-box-shadow: 0 0 10px rgba(0,0,0,0.6); 
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6); 
  -o-box-shadow: 0 0 10px rgba(0,0,0,0.6); 
  text-decoration:none;
 }*/
 
#mainContent{
   background:#E9EBEE;
 }
 
.event-name{
   padding-bottom:10px;
   color:black;
}
@media(max-width:980px){
  .event-date{
   text-align:center;
   font-family:arial;
      
 }
 
}

@media(max-width:809px){
  .navlinks > li > a{
  font-size:0.8em;
  font-weight:normal;
      
 }
  
}
@media(max-width:809px){
  .navlinks > li > a{
  font-size:0.8em;
  font-weight:normal;
      
 }
 
}
.pix{
  max-width:100%;
  height:auto;
}

.letters{
  font-family:arial;
}
.top{
  background:rgba(0, 0, 0, 0.6);
  padding:10px;
}




.hovereffect {
    width: 100%;
    height: 100%;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
}

.hovereffect .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.6);
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: translate(460px, -100px) rotate(180deg);
    -ms-transform: translate(460px, -100px) rotate(180deg);
    transform: translate(460px, -100px) rotate(180deg);
    -webkit-transition: all 0.2s 0.4s ease-in-out;
    transition: all 0.2s 0.4s ease-in-out;
}

.hovereffect img {
    display: block;
    position: relative;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

.hovereffect h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.6);
}

.hovereffect a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid #fff;
    margin: 50px 0 0 0;
    background-color: transparent;
    -webkit-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px);
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.hovereffect a.info:hover {
    box-shadow: 0 0 5px #fff;
}

.hovereffect:hover .overlay {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
}

.hovereffect:hover h2 {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

.hovereffect:hover a.info {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}