@font-face {
    font-family: 'typewriter_condensedbold';
    src: url('../fonts/typewcond_bold-webfont.woff2') format('woff2'),
         url('../fonts/typewcond_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'typewriter_condensed_demiRg';
    src: url('../fonts/typewcond_demi-webfont.woff2') format('woff2'),
         url('../fonts/typewcond_demi-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'typewriter_condensedregular';
    src: url('../fonts/typewcond_regular-webfont.woff2') format('woff2'),
         url('../fonts/typewcond_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}






.navbar {
    margin: 20px;
    overflow: hidden;
    background-color: #f8f8f8;
    background-color: rgba(248, 248, 248, 0.6);
    position: fixed;
    top: 0;
    right: 0;
    width: 93px;
    height: 35px;
    border-radius: 7px;
}

.navbar a {
    float: left;
    display: block;
    color: #000;
    text-align: center;
    padding: 10px 16px;
    text-decoration: none;
    font-size: 20px;

    width: 93px;
    height: 70px;
    border-radius: 7px;
}

.navbar a:hover {
    background: #ddd;
    background-color: rgba(221, 221, 221, 0.6);
    color: black;
}



.div-textbox{
    padding: 50px;
    background-color: #f9f9f9;
    background-color: #ffffff;
    background-color: rgba(248, 248, 248, 0.6);
    text-align: center;
    width: 100%;

    /*-webkit-filter: drop-shadow(-3px 17px 26px #514b3e);
    filter: drop-shadow(-3px 17px 26px #514b3e);*/
}
.div-text01{
    text-align: left;
    display: inline-block;
    max-width: 900px;
    width: 100%;
    font-size: 17pt;
}
.div-text02{

    font-family: 'typewriter_condensedbold';
    display: inline-block;
    max-width: 900px;
    width: 100%;
    font-size: 23pt;
    padding-top: 50px;
}

.div-text03{

    font-family: 'typewriter_condensedbold';
    display: inline-block;
    max-width: 900px;
    width: 100%;
    font-size: 23pt;
    padding-top: 10px;
}

.div_img_main{

}
.img_main{
    width: 100%;
}

.txt-banner-block{
    display: inline-block;
}

body{
    font-family: 'typewriter_condensed_demiRg';
    font-weight: 300;
    font-style: normal;

    background-size: cover;
    background: url("../images/KEYERA_BG_tile_sm_2021a.png");
    background-position: center top 771px;
    background-attachment: fixed;
    background-color: #6c5466;
}

.epk{
    background-size: cover;
    background: url("../images/KEYERA_BG_tile_sm_2021b.png");
    background-position: center top 570px;
    background-attachment: fixed;
    background-color: #6c5466;
}

#gallery {
	 padding-top: 40px;
}
 @media screen and (min-width: 991px) {
	 #gallery {
		 padding: 50px 30px 50px 30px;
	}

}


 @media screen and (max-width: 991px) {

     .div-text01{
         max-width: 750px;
    }
    .div-text02{
         padding-left: 50px;
         padding-right: 50px;
         max-width: 750px;
    }
    #gallery {
		 padding-bottom: 40px;
	}
}


.img-header{
    /*
    opacity: 0.1;
    filter: alpha(opacity=10); /* For IE8 and earlier */


    padding: 50px;
    max-width: 555px;
    width: 100%;

    -webkit-filter: drop-shadow(-3px 17px 26px #514b3e);
    filter: drop-shadow(-3px 17px 26px #514b3e);
}
.img-header-epk{
    padding: 50px 50px 0px 50px;
}
.img-header-wrapper{
    text-align: center;
    width: 100%;
    padding-top: 50px;
    padding-bottom: 25px;
}
 .img-wrapper {
	 position: relative;
	 margin-top: 15px;
	 margin-bottom: 15px;
}
 .img-wrapper img {
	 width: 100%;
}
 .img-overlay {
	 background: rgba(0, 0, 0, 0.1);
	 width: 100%;
	 height: 100%;
	 position: absolute;
	 top: 0;
	 left: 0;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 opacity: 0;
}
 .img-overlay i {
	 color: #fff;
	 font-size: 3em;
}
 #overlay {
	 background: rgba(0, 0, 0, 0.7);
	 width: 100%;
	 height: 100%;
	 position: fixed;
	 top: 0;
	 left: 0;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 z-index: 999;
	 -webkit-user-select: none;
	 -moz-user-select: none;
	 -ms-user-select: none;
	 user-select: none;
}
 #overlay img {
	 margin: 0;
	 width: 80%;
	 height: auto;
	 object-fit: contain;
	 padding: 5%;
}

.lrglogo{
  width: 100%;
}

.center {
  margin: auto;
  width: 75%;
  /*border: 3px solid green;*/
  padding: 10px;
}

.pointer{
  cursor: pointer;
}


 @media screen and (min-width: 768px) {

     #overlay img {
		 width: 80%;
         max-height: 90%;
	}

}
 @media screen and (max-width: 1100px) {
     .img-header {
         padding-left: 50px;
         padding-right: 50px;
     }

}
 @media screen and (min-width: 1200px) {
	 #overlay img {
		 width: 80%;
         max-height: 90%;
	}
}

@media screen and (min-width: 1200px) {
	 .div-text01{
        max-width: 1108px;

    }
    .div-text02{
        max-width: 1108px;
    }
}






 #nextButton {
	 color: #fff;
	 font-size: 2em;
	 transition: opacity 0.8s;
}
 #nextButton:hover {
	 opacity: 0.7;
}
 @media screen and (min-width: 768px) {
	 #nextButton {
		 font-size: 3em;
	}
}
 #prevButton {
	 color: #fff;
	 font-size: 2em;
	 transition: opacity 0.8s;
}
 #prevButton:hover {
	 opacity: 0.7;
}
 @media screen and (min-width: 768px) {
	 #prevButton {
		 font-size: 3em;
	}
}
 #exitButton {
     visibility: hidden;
	 color: #fff;
	 font-size: 10pt;
	 transition: opacity 0.8s;
	 position: absolute;
	 top: 25px;
	 right: 50px;
}
 #exitButton:hover {
	 opacity: 0.7;
}
 @media screen and (min-width: 768px) {
	 #exitButton {
		 font-size: 3em;
	}
}

 @media screen and (max-width: 768px) {
    .img-wrapper {
        padding-left: 50px;
        padding-right: 50px;
    }
     .img-header{
         padding-top: 35px;
     }
}
@media(max-width:550px) {
    .div-text01{
        font-size: 17px;
    }

}
 @media screen and (max-width: 500px) {
    .img-wrapper {
        padding-left: 10px;
        padding-right: 10px;
    }
}



 @media screen and (max-width: 480px) {
    .div-text02{
        font-size: 17pt;
     }
}





.footer{
    padding-top: 25px;
    padding-bottom: 65px;
    background-color: #f9f9f9;
    background-color: #ffffff;
    background-color: rgba(248, 248, 248, 0.6);
    text-align: center;
    width: 100%;

    font-size: 20px;
}

.noplayer{
  padding-bottom: 35px;
}















/*AUDIO PLAYER*/


*,
*:before,
*:after {
  box-sizing: border-box;
}
.hide {
  display: none !important;
}
button {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
}
/*------------------------
    Audio Player - Seocips.com
------------------------*/
/* Player and control panel */
.ap {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  height: 50px;
  margin: auto;
  font-family: Arial, sans-serif;
  font-size: 14px;
  user-select: none;
  color: #333;
  background: #f1f1f1;

  background-color: rgba(248, 248, 248, 0.9);
  border-top: 1px solid #ccc;
  z-index: 9999;
}
.ap-inner {
  max-width: 1440px;
  margin: 0 auto;
}
.ap-panel {
  display: flex;
}
.ap-item {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}
.ap--track {
  flex: 1 40%;
  padding: 0 20px;
}

/* Info section */
.ap-info {
  width: 100%;
  position: relative;
  align-self: flex-start;
  padding: 5px 0 0;
}
.ap-title {
  position: relative;
  overflow: hidden;
  padding-right: 80px;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ap-time {
  position: absolute;
  top: 5px;
  right: 0;
}
.ap-progress-container {
  padding: 5px 0 10px;
  cursor: pointer;
}
.ap-progress {
  position: relative;
  height: 3px;
  border-radius: 5px;
  background: rgba(0,0,0,.2);
}
.ap-preload-bar,
.ap-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 5px 0 0 5px;
  background: rgba(0,0,0,.3);
  z-index: 999;
}
.ap-bar {
  background: #18cc64;
  z-index: 9999;
}
.ap-bar:after {
  position: absolute;
  top: 0;
  right: -5px;
  width: 12px;
  height: 12px;
  margin-top: -4px;
  content: '';
  border-radius: 6px;
  background: #18cc64;
  opacity: 0;
  transition: opacity .3s ease;
}
.ap-progress-container:hover .ap-bar:after {
  opacity: 1;
}

/* Buttons */
.ap-controls {
  position: relative;
  z-index: 1000;
  display: block;
  height: 50px;
  cursor: pointer;
  transition: background .2s ease;
  text-align: center;
  color: #fff;
  border: 0;
  outline: 0;
  background: none;
}
.ap-controls svg {
  fill: #333;
}
.ap-controls:hover svg {
  fill: #222;
}
.ap-controls:active {
  background: rgba(0,0,0,.1);
}
.ap--playback > .ap-controls,
.ap--settings > .ap-controls {
  flex: 0 25%;
}
.ap--pause,
.playing > .ap--play {
  display: none;
}
.playing > .ap--pause {
  display: inline;
}
.ap-volume-container {
  z-index: 9999;
}
.ap-volume {
  position: absolute;
  right: 0;
  bottom: 50px;
  overflow: hidden;
  width: 100%;
  height: 0;
  visibility: hidden;
  transition: height .2s cubic-bezier(0.17, 0.72, 0.26, 1.23);
  background: #ddd;
  border: 1px solid #ccc;
  border-bottom: 0;
  z-index: 9999;
}
.ap-volume-btn {
  display: block;
  text-align: center;
  width: 100%;
}
.ap-volume-btn > .ap--volume-off,
.muted > .ap--volume-on {
  display: none;
}
.muted > .ap--volume-off {
  display: inline;
}
.ap-volume-container:hover {
  background: #ddd;
}
.ap-volume-container:hover .ap-volume {
  height: 120px;
  visibility: visible;
}
.ap-volume-progress {
  display: block;
  width: 4px;
  height: 100px;
  margin: 10px auto;
  background: rgba(0,0,0,.2);
  position: relative;
  border-radius: 3px;
}
.ap-volume-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #18cc64;
  height: 50%;
  border-radius: 3px;
}

.ap-active {
  background: rgba(0,0,0,.15);
  opacity: 1;
}

@keyframes blink {
  from { opacity: 0; }
  50% { opacity: 1; }
  to { opacity: 0; }
}
.playing > .ap--pause {
  animation: blink 1.5s linear infinite;
}
/* --------------------------- */

@media(max-width:880px) {
  .ap-item > .ap-controls {
    flex: 1;
  }
}
@media(max-width:550px) {
    .ap {
        min-width: 250px;
    }
    .ap, .ap-panel {
        height: auto;
    }
    .ap-panel {
        flex-wrap: wrap;
    }
    .ap--track {
        margin-bottom: 10px;
        padding: 0 20px;
        order: 1;
        flex: 1 1 100%;
    }
    .ap--playback,
    .ap--settings {
        flex: 1 1 50%;
        order: 2;
    }
    .footer{
        padding-bottom: 120px;
    }
}
/*--------------------
  PlayList
--------------------*/
.pl-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 50px;
  left: 0;
  margin: auto;
  overflow: auto;
  font-family: Arial, sans-serif;
  font-size: 14px;
  background: #f1f1f1;

  background-color: rgba(248, 248, 248, 0.99);
  z-index: 999;
}
.pl-lead {
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  color: #333;
}
.pl-list {
  width: 100%;
  max-width: 550px;
  margin: 0 auto;
  padding: 30px 10px;
}
.pl-list > li {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
}
.pl-number,
.pl-title,
.pl-remove {
  margin: 0 5px;
  padding: 10px 0;
}
.pl-number {
  flex: 0 10%;
  text-align: center;
}
.pl-playing {
  display: none;
}
.pl-current .pl-count {
  display: none;
}
.pl-current .pl-playing {
  display: block;
}
.pl-current .pl-title {
  font-weight: 700;
}

.pl-title {
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
}
.pl-title:hover {
  text-decoration: underline;
}
.pl-remove {
  opacity: 0;
  margin-right: 0;
  cursor: pointer;
  text-align: center;
  flex: 0 50px;
}
.pl-remove:hover {
  background: #ddd;
}
.pl-list > li:hover .pl-remove {
  opacity: 1;
}

.pl-list svg {
  fill: rgba(0,0,0, .7);
}

.pl-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 2rem;
  transform: translate(-50%, -50%);
  letter-spacing: 2px;
  color: #ccc;
}

@keyframes eq {
  0% { height: 3px; }
  50% { height: 20px; }
  100% { height: 3px; }
}
.eq {
  display: flex;
  width: 20px;
  height: 20px;
  margin: 0 auto;
  justify-content: space-between;
  align-items: flex-end;
}
.eq-bar {
  width: 4px;
  background: rgba(0,0,0,.7);
}
.eq-bar:nth-child(1) {
  animation: eq .8s ease-in-out infinite 0s;
}
.eq-bar:nth-child(2) {
  animation: eq .8s ease-in-out infinite .2s;
}
.eq-bar:nth-child(3) {
  animation: eq .8s ease-in-out infinite .4s;
}