@font-face {
    font-family: 'Comic Relief Regular';
    src: url('../fonts/ComicRelief-webfont.eot');
    src: url('../fonts/ComicRelief-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ComicRelief-webfont.woff') format('woff'),
         url('../fonts/ComicRelief-webfont.ttf') format('truetype'),
         url('../fonts/ComicRelief-webfont.svg#comic_reliefregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
  font-family: 'Comic Neue Angular Light';
  src: url('../fonts/ComicNeue-Angular-Light.eot'); /* IE9 Compat Modes */
  src: url('../fonts/ComicNeue-Angular-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/ComicNeue-Angular-Light.woff') format('woff'), /* Modern Browsers */
       url('../fonts/ComicNeue-Angular-Light.woff2') format('woff2'), /* Even Moderner Browsers */
       url('../fonts/ComicNeue-Angular-Light.ttf')  format('truetype'); /* Safari, Android, iOS */
  font-weight: 100;
}
@font-face {
    font-family: 'droid_sansregular';
    src: url('../fonts/DroidSans-webfont.eot');
    src: url('../fonts/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
          url('../fonts/DroidSans-webfont.woff') format('woff'),
         url('../fonts/DroidSans-webfont.ttf') format('truetype'),
         url('../fonts/DroidSans-webfont.svg#droid_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ---------------- Reset ------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;}

ol, ul {list-style: none;}
blockquote, q { quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
/* ---------------- End of Reset ------------------------------------- */
html  {background-color:#0A0A0A;background-color:#000000;color: #E3E3E3;font-family: 'droid_sansregular';line-height: 24px;font-size: 16px;}
.page {background-color: #000000;max-width: 1020px;margin: 0 auto;position: relative; }
.content{padding:0 10px}
p{color: #E3E3E3;font-size: 1.0rem;line-height: 24px;}
h1, h2, h3, h4, h5, h6 { color: #D6FF33;}
h6 { font-size:1.0rem; }
h5 { font-size:1.2rem; }
h4 { font-size:1.4rem; }
h3 { font-size:1.6rem; }
h2 { font-size:1.8rem; }
h1 { font-size:2.0rem;text-align: center;padding:30px;line-height: 24px; }
a{color: #9BA0BD; text-decoration: none;font-size: 1,0rem;line-height: 24px;}
noscript {color:blue;text-align:center;}
.clear-fix { clear: both; line-height: 1px;}
.hide{display:none;}
.wplightbox{  color: #D6FF33;}
.more { cursor: pointer;position: absolute;top: 0;right: 0;width: 100%; /* only required for <img /> */ z-index: -1000;}
.more-container {display: inline-block;width:18px;position: relative;z-index: 1; vertical-align: top;}
/*  ------------------------  Header ---------------------- */
header { height: 112px; background: url(../images/banner_large.jpg) no-repeat right ;margin-right:50px; }
/* header { height: 112px; background: url(../images/Xmas-Banner.jpg) no-repeat right ;margin-right:50px; }  */
header p{position:absolute;right:60px;width:125px;top:4px;line-height:13.00px;font-family: 'Comic Relief Regular';font-style:italic ;text-align: right;color:#ffff00;font-size:12px;  }
.logo_text{position:absolute;right:350px;top:15px;height:80px; }
 .social{float: left; margin:2px 0 0 2px;padding:0;}
 .social img {height:50px;}
 .social a{padding:0px;line-height:0px;margin:0;}
/*  ------------------------  Nav Bar ---------------------- */
#mobile{display:none;}
#desktop{ margin: 5px auto; width: 650px;width: 730px; height:40px;}
nav{ display:block;visibility:visible;margin: 5px auto; width: 650px; height:40px;}
nav a {background:#202020;color:#ffffff;font-family: "Arial", serif;font-size:12px;
    display:inline-block;width:90px;text-align: center;padding:10px 0 ;margin: 0  ;float:left}
nav a:hover { color: #FFF985; }
nav a:hover:not(.down) { color:#B0DE00;background:#363636; }
nav .down { background:#616161; color: #FFFF00;cursor: default;}

/*  ------------------------  Footer ---------------------- */
footer p{text-align: right;color:#E3E3E3;font-size: 10px;line-height: 12px;padding: 5px;}
footer img{margin:3px 10px;height:50px;float: left;}
footer { font-size: .85em; color: #9ba0bd; background-color: #000000;margin-top:20px; padding: 10px 10px 10px 0px;height:80px;}

/*  ------------------------  Cookie ---------------------- */
#cookie-banner {

  margin: 0 auto;
  position: fixed;
  bottom: 20px;
  left: 10%;
  right: 10%;
  width: 60%;
  min-width:280px;
  max-width:480px;
  padding: 5px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #404040;
  border-radius: 5px;
  box-shadow: 0 0 2px 1px rgba(204, 204, 204, 0.8);
  animation:cookiemove 1.5s ;
}
@keyframes cookiemove {
  from {bottom: -100px;}
  to {bottom: 20px;}
}
.cookie-close {
  width:80px;
  margin:10px;
  padding:10px;
  font-size: 12px;
  line-height: 14px;
  background-color: #777;
  border: none;
  color: white;
  border-radius: 2px;
  cursor: pointer;

}
.cookie-close:hover{ background-color: #ADADAD;

}
#cookie-policy{
    display: none;
}


/*  ------------------------  Modal ---------------------- */
  #modalShow{color:blue;cursor:pointer;font-style: italic;font-size:0.8em;vertical-align: middle;margin:5px ;padding :2px; text-decoration: underline;}


.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #EBEBEB;
    color: #0033FF;
    margin: auto;
    margin-bottom:200px;
    padding: 10px;
    border: 1px solid #888;
    width: 80%;
    max-width:600px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animateModaltop;
    -webkit-animation-duration: 0.7s;
    animation-name: animateModaltop;
    animation-duration: 0.7s
}
.modal-content h2{color: #001052;font-size: 18px;text-align: center;text-decoration: underline;}
.modal-content h3{color: #001052;font-size: 16px;}
.modal-content p {color: #001361;font-size: 14px;line-height:22px; }
.modal-content hr{color: #001052;width:60%;}
/* Add Animation */
@-webkit-keyframes animateModaltop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animateModaltop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.modal-close {
    color: #303030;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.modal-close:hover,
.modal-close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/*  ------------------------  media queries   Medium screen  ---------------------- */
  @media only screen and (min-width:550px) and (max-width:760px){
    body { background-color: none;}
    header { margin-right:0px; }
    .social{ margin:0px;padding:0px;width:40px}
    .social img {height:37px;}
    .social a{float:left; }
    .logo_text{right:250px;}
    nav{width:100%;}
    nav a{width:calc(100%/6 - 20px );padding:8px 2px;}
}
/*  ------------------------  media queries   small screen  ---------------------- */
@media only screen and (min-width:50px) and (max-width:549px){
    header { height: 112px; background:none; }
    #desktop{ margin: 0; width: 100%; height:260px;display:none;}
    #mobile{visibility: visible; display:block;position: absolute ; top:0 ;right:0;background:black;padding:3px 0 5px 0 ;cursor: pointer; }
    #mobile hr {height:4px;padding:0px;width:40px;background-color:#FFFFFF;margin:6px;border-color:#000000;; }
    header p{right:10px;width:200px;top:90px;font-size:8px;}
    .logo_text{position:absolute;right:300px;top:25px;height:80px; }
     nav a {width:100vw;margin-bottom:2px; }
    .social{ margin:0px;padding:0px;width:40px}
    .social img {height:37px;}
    .social a{float:left; }
    .logo_text{left:40px;margin-top:-20px;}
    body { background-image: none; }
    footer{  padding: 0px;margin:0; }
    footer img{  padding: 2px;margin:0; }
}