body {
	font-family: 'open_sansregular';
	font-size: 19px;
	color:#777;
	margin:0;
	padding:0;
	background-color: #fff;
	overflow:hidden;
}

#fixed-menu {
	width:100%;
    position:fixed;
    top: -170px;
    z-index: 100;
    opacity: 1;
    transition: opacity 800ms ease;

}

 @media only screen and (min-width: 800px) {
#fixed-menu {
	width:100%;
    position:fixed;
    top: -170px;
    z-index: 100;
    opacity: 0;
    transition: opacity 800ms ease;
}
 }


#fixed-menu.fixed {
    top: 0;
    opacity: 1;
    transition: opacity 800ms ease;
    -webkit-transform: translatez(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    transform: translatez(0);
}

#fixed-menu ul {
	margin: 0;
	padding: 10px 0;
	background: #000;
	text-align:center;
	list-style-type: none;
}

#fixed-menu ul li {
   display: inline;
   line-height:1.6em;
}

.menuHover:link, .menuHover:visited {
   font-family:'amaticbold';
   color:#fff;
   font-size:1.6em;
   text-decoration:none;
   padding:10px 10px;
}

.menuHover:hover {
   color:#F00;
   text-decoration:none;
}

 @media only screen and (min-width: 650px) {
.menuHover:link, .menuHover:visited {
   padding:10px 20px;
}
 }

 @media only screen and (min-width: 900px) {
.menuHover:link, .menuHover:visited {
   padding:10px 40px 10px 10px;
}
 }

 @media only screen and (min-width: 1200px) {
.menuHover:link, .menuHover:visited {
   padding:10px 80px;
}
 }
 


/* Preloader */

#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff; /* change if the mask should have another color then white */
    z-index:99; /* makes sure it stays on top */
}

#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-image: url(../images/preloader/status.gif); /* path to your loading animation */
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
}

.Psychoyogi {
	font-family:'chunkfiveroman';
	color:#000;
	font-size:1.4em;
    margin-top:16px;
	text-align:center;	
}

.head_sky {
  position:relative;
  height:350px;
  background:url(../images/update/head_mobile.jpg) no-repeat;
  background-position:top center;
  background-attachment:fixed;
  overflow:hidden;
  margin:0 auto;
  z-index:0;
}

.startButt {
  width:100%;
  text-align:center;
  position:absolute;
  margin:46% auto 0 auto;
}

.fa-chevron-circle-down:before {
  content: "\f13a";
  font-size:3.2em;
  color:#fff;
  text-align:center;
  opacity:0.8;
  cursor:pointer;
}

 @media only screen and (min-width: 800px) {
.Psychoyogi {	
	position:absolute;
	font-size:4em;
	margin:0 0 0 55%;
	float:right;
    top:13%;
}

.head_sky {
  position:relative;
  height:1000px;
  background:url(../images/update/head_sky.jpg) no-repeat;
  background-size:cover;
  background-attachment:fixed;
}

.head_mid {
  position:absolute;
  width:100%;
  height:1000px;
  background:url(../images/update/head_mid.png) no-repeat;
  background-size:cover;
  background-position:top center;
  top:0;
}

.head_fore {
  position:absolute;
  width:100%;
  height:1000px;
  background:url(../images/update/head_fore.png) no-repeat;
  background-size:cover;
  background-position:top center;
  top:0;
}

.fa-chevron-circle-down:before {
  font-size:5em;
}
 }

#start:hover {
	  opacity:0.8;
}


.fa-soundcloud:before {
  content:"\f1be"; 
  font-size:1.7em;
}

.soundcloudHover:link, .soundcloudHover:visited {
	color:#ff7c36;
}

.soundcloudHover:hover {
	color:#ffa767;
}

.fa-square:before {
  content: "\f0c8";
  font-size:1.1em;
  font-style:italic;
  padding-right:2px;
}

.bandcampHover:link, .bandcampHover:visited {
	color:#4bbfde;
	margin-right:4px;

}

.bandcampHover:hover {
	color:#7fe5ff;
}

.bandcampBC {
	font-family: Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:20px;
	color:#fff;
	font-style:normal;
	letter-spacing:-2px;
}

.fa-facebook-official:before {
  content:"\f230";
  font-size:1.4em;
}

.facebookHover:link, .facebookHover:visited {
	color:#59afff;
}

.facebookHover:hover {
	color:#6bcdff;
}

/* Social Button Padding */

.soundcloudHover, .facebookHover {
	padding:0 5px;
}

.bandcampHover {
	padding-right:2px;
}

#wrapper {
	width:100%;
	height:auto;
	margin:0 auto;
	padding-top:60px;
}
 @media only screen and (min-width: 1200px) {
#wrapper {
	max-width:1200px;
}
 }
 
#albumNoticeCover {
	background:url(../images/update/covers/world_of_danger_cover.png) no-repeat;
	width: 414px;
	height: 370px;
	margin: 60px auto 0 auto;
}


#albumNoticeDiv {
	width:80%;
	margin:20px auto 60px auto;
	text-align: center;
}


.albumNotice {
	width:80%;
	font-family: 'open_sansregular';
	font-size: 22px;
	color:#777;
	
}

@media only screen and (min-width: 600px) {
	.albumNotice {
		width:40%;		
		text-align: left;
	}
	}

.albumNoticeTopLink:link, .albumNoticeTopLink:visited {
	font-family: 'open_sansregular' !important;
	font-size: 22px !important;
	text-decoration:underline;
}

.albumNoticeTopLink:hover {
	text-decoration: none;
}


#musicBox {
	width:100%;
	height:auto;
	clear:both;
	margin-top:40px;
}
 @media only screen and (min-width: 515px) {
#musicBox {
    margin-top:110px;
}
 }

#musicLeftBox {
   width:100%;
   text-align:center;
   margin-top:4px;
}

#musicRightBox {
	width:70%;
	margin:40px auto;
	text-align: center;
}


@media only screen and (min-width: 1150px) {
	#musicRightBox {
		width:100%;
		margin:40px auto;
		text-align: left;
	}
	}


.introPara {
	line-height:28px;
	font-size: 17px;
	text-align: center;	
}


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

 @media only screen and (min-width: 1200px) {
#homePhoto {
	width:519px;
   /* height:318px; */
	margin:30px 0 0 0;
}
 }

#gigBox {
	/* float:left; */
	color:#000;
	font-size:16px;
}

@media only screen and (min-width: 1200px) {
	#gigBox {
    text-align: left;
	}
}

.mapLink:link, .mapLink:visited {
	font-size: 16px;
	color: #c66;
	text-decoration:none;
}

.mapLink:hover {
	text-decoration: underline;
}

#flyingMan {
	width:300px;
	height:112px;
	background:url(../images/update/man_flying.jpg) no-repeat;
	margin-top:80px;
	margin-left:auto;
	margin-right:auto;
	clear:both;
}

#lyricButton {
	width:100%;
	margin:60px auto 0 auto;
	text-align: center;
}

@media only screen and (min-width: 900px) {
#lyricButton {
	width:100%;
	margin:40px auto 0 auto;
	float: left;
	text-align: left;
}
}

.lyricButton:link, .reviewButton:link, .lyricButton:visited, .reviewButton:visited {
	width:80px;
	height:30px;
	padding:11px 17px;
	background:#2288cc;
	color:#fff;
	font-size:16px;
	line-height: 55px;
	margin:0 5px;
	text-decoration:none;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}

.lyricButton:hover, .reviewButton:hover {
	background:#66A5CC;	
}

#stores {
	margin:130px 0 0 0;
	text-align:center;
	width:100%;
	height: 10px;
}

.stores:link, .stores:visited {
	font-size: 20px;
	color: #c66;
	text-decoration:none;
}

.stores:hover {
	text-decoration: underline;
}


 @media only screen and (min-width: 1150px) {
#musicLeftBox {
   width:600px;
   float:left;
   text-align:left;
}
#musicRightBox {
	width:530px;
	margin:0;
	float:right;
}
#flyingMan {
	margin-top:180px;
	margin-right:18px;
	float:right;
	clear:none;
}
#lyricButton {
	padding-top:0;
	width:230px;

}
	 .lyricButton {
		 margin-right:20px;

	 }
 }

.pageTitles {
   font-family:'quicksandlight';
   color: #000;
   font-size:4.8em;
   padding-bottom:20px;
   clear:both;
   text-align: center;
}

@media only screen and (min-width: 600px) {
	.pageTitles {
		font-size: 6em;
	}
}

.pageTitleContact {
   font-family:'quicksandlight';
   color:#000;
   font-size:4em;
   clear:both;
}

@media only screen and (min-width: 600px) {
	.pageTitleContact {
		font-size: 6em;
	}
}

#fish {
	width:500px;
	height:310px;
	background:url(../images/Dangerous-Devices.jpg) no-repeat;
	margin: 80px auto 0 auto;
}

.lyricDivMusicTop, .lyricDivMusic, .lyricDivAlbums  {
	width:90%;
	margin:0 auto -56px auto;
	display:block;
	clear:both;
	text-align: center;
}

@media only screen and (min-width: 1150px) {
	.lyricDivMusicTop, .lyricDivMusic, .lyricDivAlbums  {
		width:70%;
		display:block;
		clear:both;
	}
}

.lyricDivMusicTop  {
	padding-top:20px;
}

 @media only screen and (min-width: 1150px) {
.lyricDivMusicTop  {
	padding-top:80px;
} 
 }
 
 .lyricDivMusicTopReview  {
	 padding-top:20px;
	 padding-bottom:0;
	 margin-bottom: 0;
 }
 
 .lyricReview  {
	 width:80%;
	 margin:20px auto 0 auto;
	 padding-bottom: 0;
	 font-size:1em;
	 text-align: center;
  }

.lyricDivMusicTopQuote  {
	padding-top:20px;
}

@media only screen and (min-width: 1150px) {
	.lyricDivMusicTopQuote  {
		padding-top:40px;
	}
}

.lyricDivMusic  {
	padding-top:80px;
}

.lyricDivAlbums {
	padding-top:50px;
	padding-bottom:1px;
	line-height: 40px;
}
 
.lyricTop, .lyric {
	width:90%;
	text-align:center;
	font-size:22px;
	color:#929292;
}

.lyricTop {
	margin:100px auto 0 auto;
}

.lyric {
	margin:20px auto;	
}

#albums {
	width:100%;
	height:auto;
	padding-top:20px;
	clear:both;
	margin: 0 auto;
}

.albumTitles {
	font-family:Verdana, Geneva, sans-serif;
	font-size:21px;
}

.albumTitlesMore {
	font-family:Verdana, Geneva, sans-serif;
	font-size:18px;
}

#albumTopBox {
  width:auto;
  margin:0 auto;
  text-align:center;
  display:block;

}

.albumBox {
	width:100%;
	height:auto;
	margin:0 auto;
	padding:0;
	text-align:center;
	display: inline-block;
	float:none;
}

.albumBoxMore {
	width:100%;
	height:auto;
	margin-bottom:10px;
	padding:0;
	text-align:center;
	float:none;
}

 @media only screen and (min-width: 400px) {
.albumBox {
	width:370px;
	height:auto;
	margin:0 0 21px 21px;
	text-align:center;
	float:left;
}
.albumBoxMore {
	width:210px;
	height:210px;
	margin:0 0 60px 21px;
    text-align:center;
	float:left;
}
 }
 
 #expandAlbums {	 
	 text-align: center;
	 margin: 0 auto;
	 padding-top:30px;
	 cursor: pointer;
 }

#showMoreAlbums {
width:100%;
padding-top:50px;
clear:both;
}

#shrineCover, #chaseCover, #consumptionCover, #accidentProneCover, #dangerousDevicesCover, #digitalVagrancyCover, #brandNewFaceCover, #astroTherapyCover, #worldOfDangerCover {
	width:360px;
	height:360px;
	margin:0 auto;
}

@media only screen and (min-width: 800px) {
	#shrineCover, #chaseCover, #consumptionCover, #accidentProneCover, #dangerousDevicesCover, #digitalVagrancyCover, #brandNewFaceCover, #astroTherapyCover, #worldOfDangerCover {
		width:370px;
		height:370px;
	}
	 }
 
#promoteNewAlbumCover {
		 width:360px; /* 414px */
		 height:360px;
		 margin:0 auto;
	 } 
 
 @media only screen and (min-width: 800px) {
 #promoteNewAlbumCover {
	 width:370px; /* 414px */
	 height:370px;
 }
 }
 
 
 /* More Albums */
 #odeCover, #artsFarcesCover, #delusionsCover, #iconTactCover, #avantgardenCover, #psychoyogiCover, #poisonCover, #therapyCover {
	 width:210px;
	 height:210px;
	 margin:0 auto;
 }
 
 /* Image Links */
 #promoteNewAlbumCover {
	  background:url(../images/update/covers/world_of_danger_cover.png) no-repeat;
   }
   
 #worldOfDangerCover {
	 background:url(../images/update/covers/world_of_danger_cover.png) no-repeat;
	} 
   
 #astroTherapyCover {
	  background:url(../images/update/covers/astro_therapy_cover_in_albums.png) no-repeat;
	 }   
 
 #brandNewFaceCover {
	  background:url(../images/update/covers/brand_new_face_cover_album.png) no-repeat;
  }
 
#digitalVagrancyCover {
	 background:url(../images/update/covers/digital-vagrancy-cover.png) no-repeat;
 }

#dangerousDevicesCover {
	background:url(../images/update/covers/dangerous-devices-cover.png) no-repeat;
}
 
#accidentProneCover {
	background:url(../images/update/covers/accident_prone_cover.jpg) no-repeat;
}

#shrineCover {
	background:url(../images/update/covers/shrine_cover.jpg) no-repeat;
}

#chaseCover {
	background:url(../images/update/covers/chase_cover.jpg) no-repeat;
}

#consumptionCover {
	background:url(../images/update/covers/consumption_cover.jpg) no-repeat;
}

#odeCover {
	background:url(../images/update/covers/ode_cover.jpg) no-repeat;
}

#therapyCover {
	background:url(../images/update/covers/therapy_cover.jpg) no-repeat;
}

#poisonCover {
	background:url(../images/update/covers/poison-cover.jpg) no-repeat;
}

#artsFarcesCover {
	background:url(../images/update/covers/arts_and_farces_cover.jpg) no-repeat;
}

#delusionsCover {
	background:url(../images/update/covers/delusions_of_grandeur_cover.jpg) no-repeat;
}

#iconTactCover {
	background:url(../images/update/covers/icon_tact_cover.jpg) no-repeat;
}

#avantgardenCover {
	background:url(../images/update/covers/avantgarden_cover.jpg) no-repeat;
}

#psychoyogiCover {
	background:url(../images/update/covers/psychoyogi_cover.jpg) no-repeat;
}


#shrineTracks, #chaseTheBoneTracks, #consumptionWheelTracks, #therapySessionTracks, #accidentProneTracks, #dangerousDevicesTracks, #digitalVagrancyTracks, #brandNewFaceTracks, #astroTherapyTracks, #worldOfDangerTracks {
	width:360px;
	height:360px;
	background-color:#1F7BB8;
}



@media only screen and (min-width: 800px) {
	#shrineTracks, #chaseTheBoneTracks, #consumptionWheelTracks, #therapySessionTracks, #accidentProneTracks, #dangerousDevicesTracks, #digitalVagrancyTracks, #brandNewFaceTracks, #astroTherapyTracks, #worldOfDangerTracks {
		width:370px;
		height:370px;
	}
	 }


#promoteNewAlbumTracks {
		 width:360px; /* 414px */
		 height:360px;
		 background-color:#1F7BB8;
	 }
	 
	 @media only screen and (min-width: 800px) {
	 #promoteNewAlbumTracks {
		 width:370px; /* 414px */
		 height:370px;
	 }
 }

.sm2-playlist-bd {
	font-size:15px;
	text-align: left;
}

.sm2-playlist-drawer {
	height:100% !important;
}

.expand {
   width:250px;
   height:41px;
   margin:0 auto;
   clear:both;
   cursor: pointer;
}

.expandTracks {
   width: 300px;  /* 135px */
   height: 40px;  /* 22px */
   margin:8px auto 25px auto;

   text-align: center;
}

.myExpandTracks {
	cursor: pointer;
}

.topOfPageYouTube {
	margin: 90px auto 60px auto;
	text-align: center;
}


#videoBox {
   width:100%;
   height:auto;
   padding-top:100px;
   clear:both;
}

@media only screen and (min-width: 300px) {
	#videoBox {
		padding-top: 40px;
	}
}

.pageTitleVideo {
	padding-top:50px;
}

.videoList, .videoListMore {
   width:100%;
   margin:0 auto;
   clear:both;
}

.videoList {
   padding-top:0;
}

.videoListMore {
  padding-top:66px;
}

#showMoreVideos {
	width:100%;
	clear:both;
	cursor: pointer;
}

#showMoreVideoToggle {
	padding-top: 30px;
	
}

 @media only screen and (min-width: 600px) {
.videoList, .videoListMore {
   width:100%;
   margin:0 auto;
   clear:both;
}
.videoList {
	padding-top:0;
}
.videoListMore {
   padding-top:56px	
}
 }
 
.youtube-container { display: block; margin: 20px auto; width: 100%; max-width: 520px; }
.youtube-player { display: block; width: 100%; /* assuming that the video has a 16:9 ratio */ padding-bottom: 56.25%; overflow: hidden; position: relative; width: 100%; height: 100%; cursor: hand; cursor: pointer; display: block; }
img.youtube-thumb { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; height: auto }
div.play-button { height: 50px; width: 50px; left: 50%; top: 50%; margin-left: -25px; margin-top: -25px; position: absolute; background: url("https://psychoyogi.com/images/youtube-play-button.png") no-repeat; }
#youtube-iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

 @media only screen and (min-width: 1200px) {
.youtube-container { display: block; margin: 0 25px 25px 0; width: 100%; max-width: 370px; float:left; }
.youtube-player { display: block; width: 100%; /* assuming that the video has a 16:9 ratio */ padding-bottom: 56.25%; overflow: hidden; position: relative; width: 100%; height: 100%; cursor: hand; cursor: pointer; display: block; }
img.youtube-thumb { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; height: auto }
div.play-button { height: 50px; width: 50px; left: 50%; top: 50%; margin-left: -25px; margin-top: -25px; position: absolute; background: url("https://psychoyogi.com/images/youtube-play-button.png") no-repeat; }
#youtube-iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
 }


.gigTitle {
	font-family:'amaticbold';
	font-size: 68px;
	color: #C66;
	line-height:80px;
}

.gigInfo {
	font-size: 16px;
	line-height:19px;
	color:#000;
	margin-top:115px;
}

.gigInfoDetails {
	margin-top:50px;
}

.venueLink:link, .venueLink:visited {
	font-size: 16px;
	color: #c66;
	text-decoration:none;
}

.venueLink:hover {
	text-decoration: underline;
}


/* the following is for the CONTACT FORM */


#contact {
	width:100%;
	height: auto;
	clear:both;
	padding:80px 0 180px 0;
	color:#000;
}

 @media only screen and (min-width: 950px) {
#contact {
	width:600px;
	margin:0 auto;
}
 }
 
#formDiv {
	width:100%;
	margin:0 auto;
}

 @media only screen and (min-width: 950px) {
	#formDiv {
    margint:0 auto;
} 
 }

form.Cool_Default {
	width:90%;
}

form.Cool_Default li {
	margin-bottom:25px;
}

   @media only screen and (min-width: 950px) {
form.Cool_Default {
	width:600px;
	margin:0;
}
   }
   
.precedingText {
	padding:16px 0 0 60px;
	float:left;
}

.question {
	margin:0;
}
 
input.formButton {
	font-family:'amaticbold';
	margin: 25px 0 0 0;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px;
	float:right;
	clear:both;
	cursor:pointer;
}
  
.confirm {
	font-size:20px;
	color:#000;
	margin-left:5px;
}

#crow1 {
	width:46px;
	height:54px;
	background:url(../images/update/crow_1.jpg) no-repeat;	
}

#crow2 {
	width:78px;
	height:77px;
	float:right;
	margin-right:30px;
	margin-top:-60px;
	background:url(../images/update/crow_2.jpg) no-repeat;	
}
  

/* styling for CONTACT FORM FIELDS start */

 #Name, #Email, #Comments, #Security_Answer {
	font-size:16px;
	color:#939393;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px;
	border: solid 2px #FFDC3F;
	background-color:#FFF1BF;
}

#Name, #Email {
	width:99%;
	height: 32px;
}
 
#Comments {
	white-space: pre-wrap;
    word-wrap: break-word;
 }
 
  #Security_Answer {
	width:150px;
	height: 32px;
	float:right;
 }
 
  @media only screen and (min-width: 950px) {
   #Name, #Email {
	 width:600px;
} 
   #Comments {
	 width:606px;
 }
  }
  
 /* end FORM FIELDS */
 
 /* end of the CONTACT FORM */


 a:link, a:visited {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #c66;
	text-decoration:none;
}

a:hover {
	text-decoration: underline;
}