/* ============================================================
    Reset
============================================================ */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}


body {
	background-color: #000000;
    background-image: url(images/flame.jpg);
	background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    color: #ffffff;
    font:100%/1.5 fjalla, Arial, Georgia, serif; /* 16px */
}

@font-face {
    font-family: 'fjalla';
    src: url('fjalla/fjallaone-regular-webfont.woff2') format('woff2'),
         url('fjalla/fjallaone-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'karla';
    src: url('karla/karla-regular-webfont.woff2') format('woff2'),
         url('karla/karla-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

img {
	height: auto;
}

#titlebox h1 {
    font-size: 30px;
    margin: 30px 0 40px 0;
    text-transform: uppercase;
}

#herointernal h1 {
    font-size: 50px;
    text-shadow: 0px 4px 2px #000000;
    text-transform: uppercase;
}


#coni h2 {
    font-size: 32px;
    margin: 1.5em auto 1.5em;
    text-align: center;
    text-transform: uppercase;
}

h3 {
    font-size: 26px;
    margin: 1.5em 0 2em 0;
    text-transform: uppercase;
}

#secondbox h2 {
    font-size: 30px;
    margin: 1.5em 0 0.5em 0;
    text-transform: uppercase;
}

.hp-white-block-btm h2 {
    font-size: 30px;
    margin: 0.5em 0 1em 0;
    text-transform: uppercase;
}

p {
    font-family: karla;
    font-size: 1.2em;
    line-height: 1.8;
}

a {
    color: darksalmon;
    text-decoration: underline;
}

a:hover {
    color: 000000;
    text-decoration: none;
}

header {
    border-bottom: 1px solid white;
    float: left;
    padding: 20px 0 0px;
    text-align: center;
    background-image: url('images/headbg.png');
	background-repeat: repeat;
    width: 100%;
}

nav {
   height: 20px;
    padding: 10px 0 20px;
    text-align: center;
}

nav a {
    color: white;
    font-size: 1em;
    font-weight: normal;
    margin: 0px 5px;
    text-decoration: none;
    text-transform: uppercase;
}

nav a:hover {
    color: darksalmon;
    text-decoration: none;
}

nav .on a {
    color: darksalmon;
    text-decoration: none;
}

nav ul {
    margin: 0px auto;
}

nav ul li {
    display: inline;
}





.menu-burger > * {
  position: absolute;
 top: 22px;
    right: 20px;
}

.menu-burger input {
  height: 32px;
  margin: 0;
  opacity: 0;
  width: 32px;
  z-index: 5;
}

.menu-burger svg {
  height: 32px;
  width: 32px;
  z-index: 2;
}

ul.menu-burger__item-list {
  background: #000000;
  bottom: 0;
  color: #ffffff;
font-size: 20px;
    float: left;
  list-style: none;
  margin: 0;
  padding: 32px;
  top: 0;
  transform: translate(-300%, 0);
  transition: transform 0.5s cubic-bezier(0.9, 0, 0.1, 1);
  width: 100%;
  z-index: 1;
}

ul.menu-burger__item-list li {
    margin: 20px 0;
}

ul.menu-burger__item-list li a {
    color: white;
    text-decoration: none;
}

ul.menu-burger__item-list li a:hover {
    color: salmon;
    text-decoration: none;
}


input:checked ~ .menu-burger__item-list {
  transform: none;
}

.menu-burger input:checked ~ svg line {
  stroke: #ffffff;
}

.menu-burger svg line:nth-of-type(1) {
  transform-origin: center 6px;
}

.menu-burger svg line:nth-of-type(2) {
  transform-origin: center 12px;
}

.menu-burger svg line:nth-of-type(3) {
  transform-origin: center 18px;
}

.menu-burger svg line {
  transition-duration: 0.5s;
  transition-property: stroke, opacity, transform;
  transition-timing-function: cubic-bezier(0.9, 0, 0.1, 1);
}

.menu-burger input:checked ~ svg line:nth-of-type(2) {
  opacity: 0;
  transform: scale(0.2);
}

.menu-burger input:checked ~ svg line:nth-of-type(1) {
  transform: translate(0, 6px) rotate(45deg);
}

.menu-burger input:checked ~ svg line:nth-of-type(3) {
  transform: translate(0, -6px) rotate(-45deg);
}
















#container {
    margin: 0 auto;
    padding: 0 0 0 0;
} 


#hero {
    margin: 0 auto;
    padding: 20px 0% 0px 0%;
    text-align: center;
    width: 100%;
}

#hero img {
    margin-bottom: -10px;
}



#herointernal {
    /*border-bottom: 1px solid white;
    border-top: 1px solid white;*/
    float: left;
    margin: 0 auto;
    padding: 20px 0% 20px 0%;
    text-align: center;
    width: 100%;
}



#heromob {
    margin: 0px auto -10px;
    padding: 0px 0;
    width: 100%;
}

#hero img, #heromob img {
    max-width: 100%;
}

#secondbox {
margin: 0 auto;
    padding: 30px 0;
    width: 100%;
}

#secondbox p {
    margin-top: 0px;
    margin-bottom: 20px;
}

#secondbox #intrhalf a {
    background-color: white;
    border-radius: 50px;
    color: black;
    font-size: 18px;
    margin: 20px auto;
    padding: 12px 20px;
    text-decoration: none;
}

#secondbox #intrhalf a:hover {
    background-color: black;
    border: 2px solid white;
    border-radius: 50px;
    color: white;
    font-size: 18px;
    margin: 20px auto;
    padding: 12px 20px;
    text-decoration: none;
}

#sbintro {
    text-align: center;
    width: 100%;
}

#intlhalf {
    float: left;
    padding-top: 30px;
    width: 20%;
}

#intrhalf {
    float: right;
    padding-top: 30px;
    width: 75%;
}


#int-container-nm {
    background-image: url(http://www.thehighpriest.co.uk/wp-content/uploads/2018/11/whirlpool.png);
    color: #000000;
    float: left;
    margin-top: 2em;
    padding: 4em 2%;
    width: 96%;
} 

#int-container-nm img {
    max-width: 100%;
}

#int-container-nm p {
    margin: 0px auto;
    width: 100%;
}

#int-container {
    background-image: url(http://www.thehighpriest.co.uk/wp-content/uploads/2018/11/whirlpool.png);
    color: #000000;
    float: left;
    margin-top: 4em;
    padding: 4em 0;
    width: 100%;
} 

#int-container p {
    margin: 0px auto;
}

#hp-f-video {
    padding: 20px 1% 0 2%;
    text-align: center;
    width: 96%;
}


#hp-f-video a {
    background-color: white;
    border-radius: 50px;
    color: black;
    font-size: 18px;
    margin: 20px auto;
    padding: 12px 20px;
    text-decoration: none;
}

#hp-f-video a:hover {
    background-color: black;
    border: 2px solid white;
    border-radius: 50px;
    color: white;
    font-size: 18px;
    margin: 20px auto;
    padding: 12px 20px;
    text-decoration: none;
}


#wline {
    border-top: 1px solid white;
    height: 5px;
    width: 100%;
}

.logoblock {
    clear: both;
    padding: 1.5em 0;
    text-align: center;
    width: 100%;
} 

#fourblock {
    float: left;
    margin-bottom: 3em;
    padding: 20px 2% 0;
    width: 96%;
}

#fourblock img  {
    outline: 6px solid white;
}

.b1 {
    margin-right: 2%;
    float: left;
    width: 23.5%;
}

.b2 {
    margin-right: 2%;
    float: left;
    width: 23.5%;
}

.b3 {
    margin-right: 2%;
    float: left;
    width: 23.5%;
}

.b4 {
    float: left;
    width: 23.5%;
}

.b1, .b2, .b3, .b4 {
    padding: 0;
    text-align: center;
}

.b1 a, .b2 a, .b3 a, .b4 a {
    color: white;
    text-decoration: none;
}

.b1 a:hover, .b2 a:hover, .b3 a:hover, .b4 a:hover {
    color: white;
}

.b1 h3, .b2 h3, .b3 h3, .b4 h3 {
    font-size: 20px;
    font-weight: normal;
    text-transform: uppercase;
}

.b1 img, .b2 img, .b3 img, .b4 img {
    margin-bottom: 10px;
    max-width: 100%;
}



#hp-sec-video h2 {
    color: black;
    font-size: 2.5em;
    font-weight: normal;
    margin: 0.5em 0 2em 0;
}

.flogo {
   display: block;
    margin: 0px auto;
}

#sidemenu {
    outline: 1px solid black;
    padding: 20px 0 0 3%;
    float: left;
    width: 22%;
}

#sidemenu ul, #sidemenu h3  {
    list-style-type: none;
}

#sidemenu h3 {
    font-size: 1.8em;
}

#blog-right {
    outline: 1px solid black; 
    padding: 20px 3% 0 0;
    float: right;
    width: 67%;
}


footer p {
    display: block;
    font-family: fjalla;
    font-size: 16px;
}

footer {
    background-color: #000000;
    float: left;
    padding: 30px 1% 20px 1%;
    text-align: center;
    width: 98%;
}



.hp-white-block {
    background-image: url(http://www.thehighpriest.co.uk/wp-content/uploads/2018/11/whirlpool.png);
    color: #000;
    float: left;
    margin: 2em 0;
    padding: 2em 2% 2.5em;
    text-align: center;
    width: 96%;
}

.hp-white-block-btm {
    background-image: url(http://www.thehighpriest.co.uk/wp-content/uploads/2018/11/whirlpool.png);
    color: #000;
    float: left;
    margin: 2em 0;
    padding: 1em 2% 2em;
    width: 96%;
}

#hp-sec-video {
    background-image: url(http://www.thehighpriest.co.uk/wp-content/uploads/2018/11/whirlpool.png);
    float: left;
    margin-bottom: 4em;
    padding: 5em 2% 2.5em;
    text-align: center;
    width: 96%;
}



.hp-white-block-intro {
    background-image: url(http://www.thehighpriest.co.uk/wp-content/uploads/2018/11/whirlpool.png);
    float: left;
    margin: 2em 0 4em;
    padding: 4em 2% 4em;
    text-align: center;
    width: 96%;
}

.hp-white-block h2 {
    color: black;
    font-size: 2.5em;
    font-weight: normal;
    margin: 0.5em 0 0em 0;
}

.hp-white-block a {
    background-color: black;
    border-radius: 50px;
    color: white;
    clear: both;
    font-size: 18px;
    margin: 20px auto;
    padding: 12px 20px;
    text-decoration: none;
}

.hp-white-block a:hover {
    background-color: white;
    border: 2px solid black;
    border-radius: 50px;
    color: black;
    font-size: 18px;
    margin: 20px auto;
    padding: 12px 20px;
    text-decoration: none;
}

#hp-sec-video a {
    background-color: black;
    border-radius: 50px;
    color: white;
    clear: both;
    font-size: 18px;
    margin: 20px auto;
    padding: 12px 20px;
    text-decoration: none;
}

#hp-sc-video a:hover {
    background-color: white;
    border: 2px solid black;
    border-radius: 50px;
    color: black;
    font-size: 18px;
    margin: 20px auto;
    padding: 12px 20px;
    text-decoration: none;
}



.hp-white-block p {
    margin-top: 40px;
}

.hp-white-block p.tt {
    margin: 20px 0;
}




#aimg {
    float: left;
    width: 40%;
}

#atext {
    color: #000;
    float: right;
    text-align: left;
    width: 58%;
}

.hp-white-block-intro a:hover {
    color: black;
    text-decoration: none;
}

.hp-white-block-intro a.aboutbtn {
    background-color: black;
    border-radius: 50px;
    color: white;
    clear: both;
    font-size: 18px;
    margin: 20px auto;
    padding: 12px 20px;
    text-decoration: none;
}

.hp-white-block-intro a.aboutbtn:hover {
    background-color: white;
    border: 2px solid black;
    border-radius: 50px;
    color: black;
    font-size: 18px;
    margin: 20px auto;
    padding: 12px 20px;
    text-decoration: none;
}





#hpaboutnl {
    background-color: #000000;
    -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
    float: right;
    margin-top: 20px;
    padding: 20px 5% 10px;
    width: 90%;
}

.wpforms-field-label {
    color: white;
}

#sermonhalf {
    float: left;
    width: 62%;
}

#sermonhalf a {
    background-color: black;
    border-radius: 50px;
    color: white;
    clear: both;
    font-size: 18px;
    margin: 20px auto;
    padding: 12px 20px;
    text-decoration: none;
}

#sermonhalf a:hover {
    background-color: white;
    border: 2px solid black;
    border-radius: 50px;
    clear: both;
    color: black;
    font-size: 18px;
    margin: 20px auto;
    padding: 12px 20px;
    text-decoration: none;
}

#signuphalf {
    float: right;
    width: 35%;
}

#int-con {
    float: right;
    width: 75%;
}

#int-sb {
    background-color: #ffffff;
    -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
    float: left;
    padding: 2%;
    width: 18%;
}

#int-sb ul, #int-sb li {
    list-style-type: none;
}

#int-sb h3 {
    font-size: 30px;
    text-transform: uppercase;
}

#int-sb img {
    max-width: 100%;
}

.wp-block-latest-posts a {
    font-family: karla;
    font-size: 18px;
}

#int-sb .wp-block-separator 
{
    margin: 25px 0;
}

#int-sb p {
    font-size: 18px;
}

h2.entry-title {
    font-size: 30px;
    margin: 0em 0 1em 0;
    text-transform: uppercase; 
}

.entry-meta .meta-sep, .entry-meta .author {
    display: none;
}

.entry-meta {
    margin-bottom: 1em;
}

#int-container-nm .entry-content p {
    margin-bottom: 30px;
}

#comments {
    display: none;
}

.entry-utility {
    margin-bottom: 50px;
}

.wp-block-latest-posts li {
    margin-bottom: 10px;
}


/*.page-template-homepage-template*/



#contentintro {
    float: left;
    background-color: black;
    color: white;
    margin: 0px auto;
}

#cileft {
    float: left;
    padding: 0 3% 0 2%;
    width: 45%;
}
 
#ciright {
    float: left;
    padding: 0 3% 0 2%;
    width: 45%;
}

#cileft img, #ciright img {
    max-width: 100%;
}



#incidentblock {
    float: left;
    padding: 0 20%;
    width: 60%
}

#incidentblock p {
    margin-bottom: 20px;
}

#coni {
    /*border-bottom: 1px solid white;
    border-top: 1px solid white;*/
    margin: 0px auto;
    padding-top: 20px;
}

#titlebox {
    text-align: center;
    padding-top: 20px;
    width: 100%;
}

#ttbw {
    margin: 0px auto;
}

.conblock {

    border-bottom: 1px solid white;
    float: left;
    margin-top: 0px;
    padding: 0px 0 50px;
    text-align: center;
    width: 100%;
}

.conblock img {
    max-width: 100%;
}


.conblock a {
    border: 3px solid #ffffff;
    color: white;
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    font-weight: bold;
    padding: 10px 20px;
    text-decoration: none;
    text-transform: uppercase;
    }

.conblock a:hover {
    border: 3px solid darksalmon;
    color: darksalmon;
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    font-weight: bold;
    padding: 10px 20px;
    text-decoration: none;
    text-transform: uppercase;
    }

.fluid-width-video-wrapper {
    margin-bottom: 50px;
}

hr {
    margin-top: 50px;
}

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}



/* Vertical Music Player */
.music-player {
    background-color: #261E26;
    border-radius: 6px;
    width: 90%;
    margin-bottom: 20px;
    padding: 5%;
}

.player-main {
    background-color: #000;
    border-radius: 6px;
    display: flex;
    align-items: flex-start;
    padding: 5%;
    gap: 15px;
}

.cover {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
}

.controls-wrapper {
    flex: 1;
}

.controls {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

.controls button {
    background-color: transparent; /* remove any grey or black */
    border: none;
    padding: 0;                  /* remove extra space */
    margin: 0;
    display: inline-flex;         /* ensures the img is not stretched */
    align-items: center;
    justify-content: center;
}

.controls button img {
    display: block;               /* removes inline spacing under the image */
    background: transparent;      /* make sure image itself has no background */
}

.controls button img {
    display: block;
    width: 20px;   /* fix size */
    height: 20px;  /* fix size */
}

#volume {
    flex: 1;
}

/* Scrollable Vertical Playlist */
    .playlist-vertical {
    list-style: none;
    padding: 0;
    margin-top: 15px;
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #9F9F9E;
    border-radius: 6px;
}

.playlist-vertical li {
    display: block;
    padding: 8px 12px;
    margin-bottom: 5px;
    cursor: pointer;
    transition: background 0.2s;
}

.playlist-vertical li:hover {
    background-color: #FFF500;
    color: #000;
}

.playlist-vertical li.active {
    font-weight: bold;
    color: #000;
    background-color: #FFF500;
}

/* Custom Scrollbar */
.playlist-vertical::-webkit-scrollbar {
    width: 8px;
}

.playlist-vertical::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 6px;
}

.playlist-vertical::-webkit-scrollbar-thumb {
    background-color: #d32f2f;
    border-radius: 6px;
    border: 2px solid #f5f5f5;
}

.playlist-vertical::-webkit-scrollbar-thumb:hover {
    background-color: #b71c1c;
}

/* Firefox Scrollbar */
.playlist-vertical {
    scrollbar-width: thin;
    scrollbar-color: #d32f2f #f5f5f5;
}


.volume-container {
    margin-top: 10px; /* space above volume */
    text-align: center; /* center the slider */
}

#volume {
    width: 100%; /* make slider shorter than full width */
}

.albumbox {
   
    width: 100%;
}

.albumbox h3 {
     text-align: center;
}

.ableft {
    float: left;
    padding: 0 3% 0 0;
    width: 47%;
}

.ableft img {
    max-width: 100%;
}

.abright {
    float: right;
    padding: 0 0 0 3%;
    width: 47%;
}


/* Responsive Player 
@media screen and (max-width: 768px) {
    .player-main {
        flex-direction: column;
        align-items: center;
    }

    .cover {
        width: 100%;
        max-width: 250px;
        margin-bottom: 15px;
    }

    .controls-wrapper {
        width: 100%;
        text-align: center;
    }

    .controls {
        justify-content: center;
    }

    .playlist-vertical {
        max-height: 250px;
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .playlist-vertical {
        max-height: 200px;
    }

    .controls button {
        font-size: 18px;
        padding: 6px;
    }

    #volume {
        width: 80%;
    }

    .track-info {
        font-size: 14px;
    }
}