@import url(https://fonts.googleapis.com/css?family=Lato&family=Open+Sans);

html, body, 
.container {
	position: relative;
	width: 100%;
	height: 100%;
}

body {
	overflow-y: scroll;
	background: #333;
}

header {
 background-color:rgba(0,0,0,0.5);
 padding: 8px 0px;
 border-bottom: 5px solid #08C; 
 }
 
.splitlayout {
	position: relative;
	overflow-x: hidden;
	min-height: 100%;
	width: 100%;
}

.app-container {
	position: absolute;
	top: 15%;
          width: 100%;
	z-index: 600;
	color: #000;
	/*opacity: 0.8;*/
	text-align:center;
	font-size: 140%;
	padding-top: 30px;
	font-family: 'Oswald', sans-serif;
}
.heart-container {
	position: absolute;
	top: 15%;
          width: 100%;
	z-index: 600;
	color: #fff;
	/*opacity: 0.8;*/
	text-align:center;
	font-size: 140%;
	padding-top: 30px;
	font-family: 'Oswald', sans-serif;
}
.heart-text {
          background-image: url('/img/GIVE-TO-MAUI-HEART-ONLY.png');
          display: flex;
          justify-content: center;
          align-items: center;
          width:200px;
          height:184px;
          margin: 0 auto;
          color:#c23434;
}
a.heart-text {
          color:#c23434;
}
.give-to-maui {
    width: 300px;
    height: 276px;
    margin: 280px -150px;
    z-index: 10000;
    position: absolute;
    display: inline-block;
    margin-bottom: 25px;
}
.vote_2024 {
    width: 350px;
    height: 150px;
    margin: 145px -175px;
    z-index: 10000;
    position: absolute;
    display: inline-block;
    margin-bottom: 25px;
}

.apple-icon {
	color: #00BFFF;	
}

.apple-icon:hover {
	color: #000;
}

.android-icon {
	color: #000;	
}

.android-icon:hover {
	color: #00BFFF;
}

/* Intro sides */
.side {
	position: fixed;
	top: -30;
	z-index: 100;
	width: 50%;
	height: 100%;
	text-align: center;
	-webkit-backface-visibility: hidden;
}

.player-side {
	position: fixed;
	top: 0;
	z-index: 100;
	width: 50%;
	height: 100%;
	-webkit-backface-visibility: hidden;
}
div.side a {
    position: absolute;
    width: 100%;
    height: 100%;
    margin-top: 30;
    left: 0;
    text-decoration: none; 
    z-index: 10;
    /*background-color: #FFF; 
    opacity: 0; */
}
.open-left .side,
.open-right .side {
	cursor: default;
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 499;
	visibility: hidden;
	width: 100%;
	height: 100%;
	opacity: 0;
}

.side-left .overlay {
	background: rgba(0,0,0,0.7);
}

.side-right .overlay {
	background: rgba(0,0,0,0.3);
}
.player-left {
 	left: 0;
 	}
.side-left {
 	left: 0;
  background-image: url(../img/KLHT-AM_SKYLINE.jpg);  /* Location of the image */
  background-position: right bottom;  /* Image placement at all times */	
  background-size: 100%;
  background-repeat: no-repeat;   /* Image doesn't repeat */ 
  background-attachment: inherit;    /* Makes the image inherit in the viewport so that it doesn't move when the content height is greater than the image height */
   /* background-size: contain;This is what makes the background image rescale based on its container's size */
	background-color: #fff;
	color: #47a3da;
	/* outline: 1px solid #fff; avoid gap */	
}
.player-right {
	right: 0;
	}
.side-right {
	right: 0;
	background-image: url(../img/KLHT-FM_SKYLINE.jpg);  /* Location of the image */
           background-position: left bottom;  /* Image placement at all times */		
           background-size: 100%;	
           background-repeat: no-repeat;   /* Image doesn't repeat */ 
           background-attachment: inherit;    /* Makes the image inherit in the viewport so that it doesn't move when the content height is greater than the image height */
            /*background-size: contain;  This is what makes the background image rescale based on its container's size */
	background-color: #c4ebfb;
	color: #fff;
}

/* Intro content, profile image and name, back button */
.intro-content {
	position: absolute;
	top: 50%;
	left: 50%;
	padding: 0 1em;
	width: 50%;
	cursor: pointer;
	-webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
}

.profile {
	margin: auto;
	display: block;
	width: 250px;
	height: 250px;
}

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

.intro-content h1 > span {
	display: block;
	white-space: nowrap;	
}

.intro-content h1 > span:first-child {
	font-weight: 350;
	font-size: 130%;
}

.intro-content h1 > span:nth-child(2) {
	position: relative;
	margin-top: 0.5em;
	padding: 0.8em;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 0.8em;
}

.intro-content h1 > span:nth-child(2):before {
	position: absolute;
	top: 0;
	left: 25%;
	width: 50%;
	height: 2px;
	background: #47a3da; /*left title underline color*/
	content: '';
}

.side-right .intro-content h1 > span:nth-child(2):before {
	background: #fff; /*right title underline color*/
}

.back {
	position: fixed;
	top: 50%;
	z-index: 500;
	display: block;
	visibility: hidden;
	width: 150px;
	height: 150px;
	text-align: center;
	font-size: 350%;
	line-height: 44px;
	color: #000;
	pointer-events: none;
}

.mobile-layout .back { /* fixed positioning will make this not clickable after scrolling on some mobile devices */
	position: absolute;
}

.back-left {
	left: 2%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.back-right {
	right: 2%;
	-webkit-transform: translateX(50%);
	transform: translateX(50%);
}

.open-right .back-left,
.open-left .back-right {
	visibility: visible;
	opacity: 0.7;
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
	pointer-events: auto;	
}

.back:hover {
	color: #47a3da;
}

/* Pages */
.page {
	position: relative;
	top: 0;
	overflow: auto;
	min-height: 100%;
	width: 75%;
	height: auto;
	/*font-size: 1.4em;*/
	-webkit-backface-visibility: hidden;
}

.page-right {
  left: 25%;
	color: #000;
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
}

.splitlayout.open-right {
	background: #ecf0f1;
}

.page-left {
	right: 0%;
	color: #000;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}

.splitlayout.open-left {
}

/* Inner page content */
.page-inner {
}

.page-inner section {
	padding-bottom: 1em;
}

.page-inner h2 {
}

.page-inner p {
}

/* All transitions */
.side,
.page {
	-webkit-transition: -webkit-transform 0.6s;
	transition: transform 0.6s;
}

.overlay {
	-webkit-transition: opacity 0.6s, visibility 0.1s 0.6s;
	transition: opacity 0.6s, visibility 0.1s 0.6s;
}

.intro-content {
	-webkit-transition: -webkit-transform 0.6s, top 0.6s;
	transition: transform 0.6s, top 0.6s;
}

.intro-content h1,
.back {
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}


/* Media Queries */
@media screen and (max-width: 83em) {
	.intro-content { font-size: 60%; left:33%;}
}

@media screen and (max-width: 58em) {
	body { font-size: 90%; }
  .intro-content { left:29%;}		
}



@media screen and (max-width: 42.5em) {
	body { font-size: 80%; }
	.intro-content { font-size: 50%; left:25%;}
}

@media screen and (max-height: 41.125em) {
	.intro-content {
		-webkit-transform: translateY(-25%) translateX(-50%);
		transform: translateY(-25%) translateX(-50%);
		left:19%;
	}
}

@media screen and (max-width: 39.375em) {
	.intro-content .profile { -webkit-transform: scale(0.5); transform: scale(0.5);left:25%; }
  .intro-content { left:15%;}			
}

@media screen and (max-width: 320px) {
	body { font-size: 70%; }
  .intro-content { left:10%;}		
}

/* GIVING PAGE STYLES*/
/* CSS Document */
body {
/* Location of the image */
/*background-image: url(../images/honolulu_skyline.jpg);*/

/* Image is centered vertically and horizontally at all times */
background-position: center bottom;

/* Image doesn't repeat */
background-repeat: no-repeat;

/* Makes the image fixed in the viewport so that it doesn't move when
the content height is greater than the image height */
background-attachment: fixed;

/* This is what makes the background image rescale based on its container's size */
background-size: contain;

/* Pick a solid background color that will be displayed while the background image is loading */
background-color:#FFF;

font-family: 'Lato', sans-serif;
color: #333333;
}
.container {
background-color: rgba(255, 255, 255, 0.4);
width: 100%;
text-align: center;
}

.fm-mini-logo {
padding:20px;
height:100px;
background-image: url(../images/KLHT-FM_LOGO-2016.png);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
/*opacity: 0.7;*/
margin: 0 auto 0;
}
.am-mini-logo {
padding:20px;
height:100px;
background-image: url(../images/KLHT-FM_LOGO-2016.png);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
/*opacity: 0.7;*/
margin: 0 auto 0;
}

/* BEGIN BUTTON STYLE*/
.button {
  padding: 10px 45px;
  font-size: 100%;
  cursor: pointer;
  text-align: center;	
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #3498db;
  border-radius: 15px;
  font-family: 'Lato', sans-serif;  
}
#button_container {
text-align:center;
margin:auto;
}
.button:hover {background-color: #C4C4C4;}

.button:active {
  background-color: #3498db;
  transform: translateY(4px);
}
/* END BUTTON STYLE*/

/* BEGIN FORM STYLE*/

.paypal_form {
text-align:center;
margin:auto;
width: 100%;
}

input.paypal_form[type="text"], textarea , select {
  background-color : #fff; 
  opacity: 0.6; 
  border: #4D4D4D solid 1px;
  color: #4D4D4D;
  font-family: 'Lato', sans-serif;
  border-radius:5px;
  line-height:30px;
  margin:10px;
  padding:15px;
  font-size:140%;  
}
input.paypal_form {
  background-color : #fff;
  opacity: 0.6; 
  border: #4D4D4D solid 1px;        
  color: #4D4D4D;
  font-family: 'Lato', sans-serif;
  border-radius:5px;
  line-height:30px;
  margin:10px;
  padding:10px;
  font-size:140%;
}
placeholder.paypal_form {
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size:100%;
}
/*This section hides a form entry via css for a HONEYPOT*/
input.paypal_form [name="name_here_goes"]{
    display: none;
}

.info {
  font-family: 'Lato', sans-serif; 
  line-height:25px;
  font-size:100%;
  font-weight:700;
}
.give_note {
  font-family: 'Lato', sans-serif;
  font-size:90%;
  color: #333333;
  line-height:30px;
  margin:10px;
  padding:10px;
  }
  .give_div {
    background-color:#DEDEDE;
  border-radius:5px;
  }
.paypal_note {
  font-family: 'Lato', sans-serif;
  color: #333333;
  font-size:70%;
  }
  /* END FORM STYLE*/
.give-circle {
    width: 140px;
    height: 140px;
    background: #000;
    -moz-border-radius: 70px;
    -webkit-border-radius: 70px;
    padding: 40px 0;
    border-radius: 70px;
    vertical-align: middle;
    margin: 0 auto;
    color: #fff;
    font-size: 175%;
    }
    
.now_playing {
    font-family: 'Oswald', sans-serif;
    font-weight: 150;
    font-size: 110%;
    color: #fff;
}    
    
#playing_am, #playing_am a:link, #playing_am a:visited, #playing_fm, #playing_fm a:link, #playing_fm a:visited {
 margin-top:8px;   
 font-family: 'Outfit', sans-serif;
 color:#fff;
  position:relative;
 font-size: 100%;
 text-align:center;
 text-decoration: none;
}
#playing_am a:hover, #playing_fm a:hover {
  color: #000;
  font-weight:900;
}