@font-face {
    font-family: 'ButlerFree';
    src: url('../fonts/subset-Butler-Free-Bd.woff2') format('woff2'),
        url('../fonts/subset-Butler-Free-Bd.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ButlerFree';
    src: url('../fonts/subset-Butler-Free-XBd.woff2') format('woff2'),
        url('../fonts/subset-Butler-Free-XBd.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ButlerFree';
    src: url('../fonts/subset-Butler-Free-Med.woff2') format('woff2'),
        url('../fonts/subset-Butler-Free-Med.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
* {
  box-sizing: border-box;
}
body {
background-color:white;
}
div#ldcontain {
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
width:100%;
height:100%;
background-color:#FFB512;
display:block;
z-index:3;
}
header {
width:99%;
height:auto;
margin-left:auto;
margin-right:auto;
margin-top:4px;
margin-bottom:5px;
}
section#main{
width:95%;
margin:auto;
height:auto;
background-color:white;
/*border:3px solid black;*/
}


table {
width:97%;
height:auto;
background-color:#60183C;
margin:auto;
border:2px solid white;
border-radius:5px;
}
table tr td.title {
margin:0px;
padding-left:2px;
color:#FFB512;
font-size:1.7em;
padding-bottom:0px;
}
table tr td.small {
margin:0px;
padding-left:2.1px;
color:white;
font-size:.73em;
padding-top:0px;
}
table tr td.side {
font-family: 'ButlerFree', sans-serif;
margin:0px;
padding-left:2px;
color:#FFB512;
font-size:.8em;
padding-top:0px;
padding-right:10px;
text-align:right;
}
div.top {
width:100%;
margin:auto;
}
div.top h3 {
font-family: 'ButlerFree', sans-serif;
font-size:1.2em;
font-weight:bold;
margin-bottom:0px;
padding-bottom:0px;
}
h1 {
font-family: 'ButlerFree', sans-serif;
margin:0px;
padding:4px;
color:#FFB512;
font-size:2.5em;
text-align:left;
border-bottom: 4px solid #60183C;
border-left:4px solid #60183C;
border-radius:4px;
background-color:#60183C;
}
h2 {
font-family: 'ButlerFree', sans-serif;
font-size:1em;
color:#60183C90;
margin:0px;
padding:0px;
}
h3 {
font-family: 'ButlerFree' sans-serif;
margin:0px;
padding:2px;
color:#60183C90;
font-size:1.2em;
font-weight:bold;
}
h4 {
font-family: 'ButlerFree', sans-serif;
margin:0px;
padding:2px;
color:#FFB512;
font-size:1.3rem;
}
p {
font-family: Verdana, Verdana, sans-serif;
font-size:1em;
}
/*frm*/

/*flex container */
div.flexi {
width:100%;
height:auto;
display:flex;
flex-direction:column;
}
/* Container holding the image and the text */
div.flexi div.tile {
width:100%;
flex-shrink:0;
margin-right:5px;
padding:0px;
border: 1px solid #60183C;
border-radius:10px;
background-color:#60183C10;
margin-bottom:10px;
}
/* Container holding the image and the text */
div.tile div.container {
width:100%;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
margin-top:0px;
width:100%;
height:auto;
padding:0px;

}
div.tile div.container img {
width:100%;
object-fit:cover;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
padding:0px;
margin:0px;
aspect-ratio:16/9;
}
div.container img:hover {
opacity:0.7;
}
div.container a:link {
text-decoration:none;
margin:0px;
padding:0px;
}
div.container a:visited {
text-decoration:none;
margin:0px;
padding:0px;
}
div.container a:hover {
text-decoration:none;
}

div.tile div.subh h3 {
font-family: 'ButlerFree', sans-serif;
left: 20px;
color:#60183C;
font-size:1.1em;
font-weight: bold;
padding-left:4px;
margin-bottom:1px;
}
div.tile p.nb {
padding-left:4px;
padding-right:4px;
padding-top:0px;
padding-bottom:2px;
margin-top:1px;
font-size:.8em;
}

div.loader {
position:absolute;
left:35%;
top:45%;
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #60183C; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  z-index:4;
    -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
div.holder div.event1 {
margin:auto;
}
img.event {
width:80%;
height:auto;
margin:auto;
}


footer {
width:95%;
position: relative;

top:10%;
left:2.5%;
right:2.5%;
height:10%;
}
footer table.foot {
width:80%;
height:15%;
background-color:white;

} 
footer table tr td {
margin:0px;
padding:10px;
}
footer table tr td a {
width:60%;
}
footer table tr td a img {
width:80%;
height:auto;
}
footer table tr td a img:hover {
opacity:.5;
}