/**************************************** Main CSS for BlueGuyEntertainment.com website ****************************************/
/**************************************** Designed for mobile first, media queries for larger devices. ****************************************/
@import url("globals.css");


/**************************************** Loading bars ****************************************/
#loader {
	background:var(--background);
	display:none; /*Hide by default, show with js, since we can only hide afterwards with js.*/
    bottom:0;
    height:100%;
    left:0;
    position:fixed;
    right:0;
    top:0;
    width:100%;
	z-index:95;
}
.loaderBars {
    height:50px;
	width:50%;
	left:50%;
	right:50%;
	top:50%;
    margin-left:-25px;
    margin-top:-25px;
    position:absolute;
    text-align:center;
}
.bar{
	background-color:var(--highlight);
	border:1px solid var(--text);
	float:left;
	height:62px;
	width:16px;
	opacity:0.1;
	-moz-animation-name:bounceG;
	-moz-animation-duration:1s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-direction:linear;
	-moz-transform:scale(0.7);
	-webkit-animation-name:bounceG;
	-webkit-animation-duration:1s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:linear;
	-webkit-transform:scale(0.7);
	-ms-animation-name:bounceG;
	-ms-animation-duration:1s;
	-ms-animation-iteration-count:infinite;
	-ms-animation-direction:linear;
	-ms-transform:scale(0.7);
	-o-animation-name:bounceG;
	-o-animation-duration:1s;
	-o-animation-iteration-count:infinite;
	-o-animation-direction:linear;
	-o-transform:scale(0.7);
	animation-name:bounceG;
	animation-duration:1s;
	animation-iteration-count:infinite;
	animation-direction:linear;
	transform:scale(0.7);
}
.bar1{
	-moz-animation-delay:0.1s;
	-webkit-animation-delay:0.1s;
	-ms-animation-delay:0.1s;
	-o-animation-delay:0.1s;
	animation-delay:0.1s;
}
.bar2{
	-moz-animation-delay:0.2;
	-webkit-animation-delay:0.2s;
	-ms-animation-delay:0.2s;
	-o-animation-delay:0.2s;
	animation-delay:0.2s;
}
.bar3{
	-moz-animation-delay:0.3s;
	-webkit-animation-delay:0.3s;
	-ms-animation-delay:0.3s;
	-o-animation-delay:0.3s;
	animation-delay:0.3s;
}
.bar4{
	-moz-animation-delay:0.4s;
	-webkit-animation-delay:0.4s;
	-ms-animation-delay:0.4s;
	-o-animation-delay:0.4s;
	animation-delay:0.4s;
}
.bar5{
	-moz-animation-delay:0.5s;
	-webkit-animation-delay:0.5s;
	-ms-animation-delay:0.5s;
	-o-animation-delay:0.5s;
	animation-delay:0.5s;
}
.bar6{
	-moz-animation-delay:0.6s;
	-webkit-animation-delay:0.6s;
	-ms-animation-delay:0.6s;
	-o-animation-delay:0.6s;
	animation-delay:0.6s;
}

@-moz-keyframes bounceG{
	0%{
	-moz-transform:scale(1.2);
	opacity:1}
	100%{
	-moz-transform:scale(0.7);
	opacity:0.1}
}
@-webkit-keyframes bounceG{
	0%{
	-webkit-transform:scale(1.2);
	opacity:1}
	100%{
	-webkit-transform:scale(0.7);
	opacity:0.1}
}
@-ms-keyframes bounceG{
	0%{
	-ms-transform:scale(1.2);
	opacity:1}
	100%{
	-ms-transform:scale(0.7);
	opacity:0.1}
}
@-o-keyframes bounceG{
	0%{
	-o-transform:scale(1.2);
	opacity:1}
	100%{
	-o-transform:scale(0.7);
	opacity:0.1}
}
@keyframes bounceG{
	0%{
	transform:scale(1.2);
	opacity:1}
	100%{
	transform:scale(0.7);
	opacity:0.1}
}

/**************************************** Navbar/Header ****************************************/
#nav {
	padding-top:12px;
	padding-bottom:12px;
	/* old height: 76px */
	font-weight:bolder;
	font-size:16px !important;
	z-index:100 !important;
	background:var(--backgroundHover) !important;
	text-align: center;
}
.collapse.show .nav-item:first-child, .collapsing .nav-item:first-child {
	margin-top: 12px;
}
.navLogo {
	position:relative;
	/* width:48px;
	height:48px; */
}
.lightbulb {
	cursor:pointer;
	color:var(--text);
	text-shadow:-1px 0 var(--highlightHover), 0 1px var(--highlightHover), 1px 0 var(--highlightHover), 0 -1px var(--highlightHover);
}
.navbar-toggler, .navbar-toggler-icon {
	cursor: pointer;
	background-color: var(--background);
}

/**************************************** Slider/Carousel/Index Logo ****************************************/
.basicCarousel {
	position: relative;
	height:448px;
	display:flex;
	justify-content:center;
	align-items:center;
	text-align:center;
	z-index:5;
	width:100%;
	overflow:hidden;
}
.carouselImg {
	position:absolute;
	top:0;
	left:0;
	background-image:url("/content/images/studio/2.jpg"); /*default pic in case js is disabled*/
	background-attachment:fixed;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	opacity:1;
}
.colorOverlay {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:var(--highlightHover);
	z-index:2;
}
.carouselBadge {
	position:absolute;
	width:260px;
	height:260px;
	left:0;
	right:0;
	margin:auto;
	top:4px;
	object-fit:cover !important;
	z-index:3;
}
.carouselLogo {
	position:absolute;
	width:300px;
	height:69px;
	left:0;
	right:0;
	margin:auto;
	top:100px;
	object-fit:cover !important;
	z-index:4;
}
.carouselTitle1, .carouselTitle1:hover:not([disabled]){
	font-family:'RobotoBoldCondensed' , Arial, sans-serif;
	position:absolute;
	left:0;
	right:0;
	margin:auto;
	top:48px;
	color:var(--highlight) !important;
	font-size:28px;
	z-index:4;
}
.carouselTitle2, .carouselTitle2:hover:not([disabled]){
	font-family:'RobotoBoldCondensed' , Arial, sans-serif;
	position:absolute;
	left:0;
	right:0;
	margin:auto;
	top:188px;
	color:var(--highlight) !important;
	font-size:28px;
	z-index:4;
}
.carouselButtons {
	position:absolute;
	width:100%;
	left:0;
	right:0;
	margin:auto;
	top:288px;
	z-index:6;
}
/************************************************************************************************************************/


/**************************************** Input: Buttons/Text ****************************************/
.normalBtn {
	text-decoration: none;
	font-family:'RobotoBoldCondensed', Arial, sans-serif;
	display:inline-block;
	margin:2px;
	margin-top:10px;
	width:112px;
	height:42px;
    cursor:pointer;
	position:relative;
	text-transform:capitalize;
	text-align:center;
	border:2px solid var(--textHighlight);
	color:var(--textHighlight) !important;
	background:var(--lightOverlay);
	font-size:15px;
	text-shadow:none;
	z-index:5;
	border-radius:0;
}
.normalBtn:hover:not([disabled]) {
	text-decoration: none;
	background:var(--overlay);
	color:var(--highlight) !important;
	border:2px solid var(--highlight);
	text-shadow:none;
}

.highlightBtn {
	text-decoration: none;
	font-family:'RobotoBoldCondensed', Arial, sans-serif;
	display:inline-block;
	width:100%;
	margin:2px;
	margin-top:10px;
	height:42px;
    cursor:pointer;
    position:relative;
	text-transform:uppercase;
	text-align:center;
	border:2px solid var(--textHighlight);
	color:var(--textHighlight) !important;
	background:var(--highlight);
	font-size:15px;
	text-shadow:none;
	z-index:5;
	border-radius:0;
}
.highlightBtn:hover:not([disabled]) {
	text-decoration: none;
	color:var(--highlight) !important;
	background:var(--backgroundTransparent);
	border:2px solid var(--highlight);
	text-shadow:none;
}
a.highlightBtn, a.normalBtn {
	padding-top:8px;
}

.txtBox {
    border:1px solid var(--highlight) !important;
	font-size:13px !important;
    width:100%;
	display:inline-block;
	background:var(--background) !important;
    color:var(--text) !important;
	height:42px;
	padding:8px;
	padding-top:12px;
	padding-bottom:12px;
	margin:2px;
	margin-top:10px;
    position:relative;
}
.txtArea {
	border:1px solid var(--highlight) !important;
	font-size:14px !important;
    width:100%;
	display:inline-block;
	background:var(--background) !important;
    color:var(--text) !important;
	padding:8px;
	padding-top:12px;
	padding-bottom:12px;
	margin:2px;
	margin-top:10px;
    position:relative;
}
.txtBox:hover, .txtArea:hover:not([disabled]){
	background:var(--backgroundTransparent) !important;
	color:var(--textHover) !important;
}
.errorForm, .errorForm:focus {
	border: 1px solid red !important;
	outline: 0;
}
/************************************************************************************************************************/

/**************************************** Footer & Newest track sticky footer ****************************************/
#newestTrackContainer {
	position:relative;
	width:100%;
	max-height:110px;
	min-height: 72px;
	height:auto;
	margin:0px;
	padding:0px;
	text-transform:uppercase;
}
.newestTrack {
	background:var(--overlay);
	align-content:center;
	text-align:center;
	width:100%;
	height:auto;
	position:absolute;
	padding-top:8px;
	padding-bottom:8px;
	bottom:0px;
	z-index:10;
}
.sticky {
	position:fixed;
	width:100%;
	bottom:0px;
	z-index:99;
}

.iconFooter {
	color:var(--textHighlight);
	padding:0px;
	margin:0px;
	opacity:0.8;
	padding-left:8px;
	padding-right:8px;
	align-self:center;
	float:center;
	text-shadow:none;
	font-size:24px;
}
.iconFooter:hover:not([disabled]){
	color:var(--textHighlight);
	text-shadow:-1px 0 var(--highlightHover), 0 1px var(--highlightHover), 1px 0 var(--highlightHover), 0 -1px var(--highlightHover);
	opacity:1;
}

.brand {
	pointer-events:none !important;
}


/**************************************** General ****************************************/
.iconContainer {
	padding:0px;
	margin:0px;
	padding-right:4px;
	margin-top:8px;
	margin-bottom:8px;
	text-shadow:none;
}
.iconFormat {
	color:var(--highlight);
	padding:0px;
	margin:0px;
	opacity:0.8;
	padding-left:12px;
	padding-right:12px;
	align-self:center;
	float:center;
	text-shadow:none;
	font-size:24px;
}
.iconFormat:hover:not([disabled]){
	text-shadow:-1px 0 var(--textHighlight), 0 1px var(--textHighlight), 1px 0 var(--textHighlight), 0 -1px var(--textHighlight);
	opacity:1;
}

.titleBar {
	text-align:center;
	width:fit-content;
	padding-bottom:4px;
	padding-left:8px;
	padding-right:8px;
	border-bottom: 2px solid var(--text);
	margin-left:auto;
	margin-right:auto;
}
.titleBar:hover {
	border-bottom: 2px solid var(--textHover);
}

.bottomBar {
	border-bottom: 2px solid var(--text);
}
.bottomBar:hover {
	border-bottom: 2px solid var(--textHover);
}
.topBar {
	border-top: 2px solid var(--text);
}
.topBar:hover {
	border-top: 2px solid var(--textHover);
}
.sideBars {
	border-left: 2px solid var(--text);
	border-right: 2px solid var(--text);
}
.sideBars:hover {
	border-left: 2px solid var(--textHover);
	border-right: 2px solid var(--textHover);
}

/********************** Projects **********************/
.proj {
	display:inline-block;
	max-width:100%;
	width:100%;
	height:auto;
	position:relative;
	margin-bottom:8px;
	overflow:hidden;
	z-index:5;
	align-content:center;
	align-items:center;
	text-align:center;
}
.proj img {
	width:100%;
	height:100%;
	z-index:3;
}
.projOverlay {
	top:0;
	left:0;
	position:absolute;
	z-index:3;
	width:100%;
	height:100%;
	background:transparent;
	opacity:0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.projOverlay:hover {
	background:var(--overlay);
	opacity:1 !important;
}
.projOverlay a {
	visibility: hidden;
}
.projOverlay:hover a {
	visibility: visible;
}
.projDesc {
	max-width:80%;
	height:fit-content;
	z-index:4;
}
.projDesc h4 {
	font-size:16px !important;
}
.projDesc h5 {
	font-size:14px !important;
}
.projImgZoom {
	-moz-transform:scale(1.2);
	-webkit-transform:scale(1.2);
	-ms-transform:scale(1.2);
	-o-transform:scale(1.2);
	transform:scale(1.2);
}

/********************** Spotify/Music  ************************/
.spotifyElement {
	display:inline-block;
	vertical-align:center;
	justify-content:center;
	align-content:center;
	position:relative;
	left:0px;
	top:0px;
	margin:0 auto;
	border:2px solid var(--highlight);
}
.spotifyFollow {
	width:fit-content;
	max-height:64px;
	height:fit-content;
	margin-bottom:8px;
}
.spotifyPlaylist {
	width:100%;
	margin-bottom:64px;
}

.song-title {
	font-family:'RobotoBoldCondensed', Arial, sans-serif;
	font-size:24px;
	font-weight:bolder;
	width:100%;
	text-align:left;
}

.song-chill {
	color: var(--highlight);
}
.song-heavy {
	color: rgb(224, 0, 0);
}

/*********************** Animations **************************/

.animation-logo {
	-moz-animation-delay:0.2s;
	-moz-animation-name:animate-logo;
	-moz-animation-duration:2s;
	-moz-animation-iteration-count:1;
	-moz-animation-direction:linear;
	-webkit-animation-delay:0.2s;
	-webkit-animation-name:animate-logo;
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-direction:linear;
	-ms-animation-delay:0.2s;
	-ms-animation-name:animate-logo;
	-ms-animation-duration:2s;
	-ms-animation-iteration-count:1;
	-ms-animation-direction:linear;
	-o-animation-delay:0.2s;
	-o-animation-name:animate-logo;
	-o-animation-duration:2s;
	-o-animation-iteration-count:1;
	-o-animation-direction:linear;
	animation-delay:0.2s;
	animation-name:animate-logo;
	animation-duration:2s;
	animation-iteration-count:1;
	animation-direction:linear;
}
.animation-titles {
	-moz-animation-delay:2.2s;
	-moz-animation-name:animate-titles;
	-moz-animation-duration:2s;
	-moz-animation-iteration-count:1;
	-moz-animation-direction:linear;
	-webkit-animation-delay:2.2s;
	-webkit-animation-name:animate-titles;
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-direction:linear;
	-ms-animation-delay:2.2s;
	-ms-animation-name:animate-titles;
	-ms-animation-duration:2s;
	-ms-animation-iteration-count:1;
	-ms-animation-direction:linear;
	-o-animation-delay:2.2s;
	-o-animation-name:animate-titles;
	-o-animation-duration:2s;
	-o-animation-iteration-count:1;
	-o-animation-direction:linear;
	animation-delay:2.2s;
	animation-name:animate-titles;
	animation-duration:2s;
	animation-iteration-count:1;
	animation-direction:linear;
}

/* ------- LOGO BOUNCE ---------*/
@-moz-keyframes animate-logo {
	0%{
	-moz-transform:scale(0.7);
	opacity:0.2}
	50%{
	-moz-transform:scale(1.5);
	opacity:0.8}	
	100%{
	-moz-transform:scale(1);
	opacity:1}
}
@-webkit-keyframes animate-logo{
	0%{
	-webkit-transform:scale(0.7);
	opacity:0.2}
	50%{
	-webkit-transform:scale(1.5);
	opacity:0.8}
	100%{
	-webkit-transform:scale(1);
	opacity:1}
}
@-ms-keyframes animate-logo{
	0%{
	-ms-transform:scale(0.7);
	opacity:0.2}
	50%{
	-ms-transform:scale(1.5);
	opacity:0.8}
	100%{
	-ms-transform:scale(1);
	opacity:1}
}
@-o-keyframes animate-logo{
	0%{
	-o-transform:scale(0.7);
	opacity:0.2}
	50%{
	-o-transform:scale(1.5);
	opacity:0.8}
	100%{
	-o-transform:scale(1);
	opacity:1}
}
@keyframes animate-logo{
	0%{
	transform:scale(0.7);
	opacity:0.2}
	50%{
	transform:scale(1.5);
	opacity:0.8}
	100%{
	transform:scale(1);
	opacity:1}
}

/* ------- TEXT FADE IN ---------*/
@-moz-keyframes animate-titles {
	0%{
	-moz-transform:scale(2);
	opacity:0}
	100%{
	-moz-transform:scale(1);
	opacity:1}
}
@-webkit-keyframes animate-titles{
	0%{
	-webkit-transform:scale(2);
	opacity:0}
	100%{
	-webkit-transform:scale(1);
	opacity:1}
}
@-ms-keyframes animate-titles{
	0%{
	-ms-transform:scale(2);
	opacity:0}
	100%{
	-ms-transform:scale(1);
	opacity:1}
}
@-o-keyframes animate-titles{
	0%{
	-o-transform:scale(2);
	opacity:0}
	100%{
	-o-transform:scale(1);
	opacity:1}
}
@keyframes animate-titles{
	0%{
	transform:scale(2);
	opacity:0}
	100%{
	transform:scale(1);
	opacity:1}
}

/*********************** Media Queries **************************/

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	.basicCarousel {
		height:768px;
	}
	.carouselBadge {
		width:585px;
		height:585px;
		top:8px;
	}
	.carouselLogo {
		width:600px;
		height:138px;
		top:228px;
	}
	.carouselTitle1, .carouselTitle1:hover:not([disabled]){
		top:124px;
		font-size:48px;
	}
	.carouselTitle2, .carouselTitle2:hover:not([disabled]){
		top:420px;
		font-size:48px;
	}
	.carouselButtons {
		top:600px;
	}
	.projDesc h4 {
		font-size:22px !important;
	}
	.projDesc h5 {
		font-size:20px !important;
	}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	.fa-bars {
		display:none;
	}
	.carouselBadge {
		width:715px;
		height:715px;
		top:8px;
	}
	.carouselLogo {
		width:800px;
		height:184px;
		top:276px;
	}
	.carouselTitle1, .carouselTitle1:hover:not([disabled]){
		top:152px;
		font-size:60px;
	}
	.carouselTitle2, .carouselTitle2:hover:not([disabled]){
		top:512px;
		font-size:60px;
	}
	.carouselButtons {
		top:592px;
	}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
/* @media only screen and (min-width: 1200px) {} */

/* XXL devices (retina/4k monitors 2400px and up) */
@media only screen and (min-width: 2400px) {
	.basicCarousel {
		/* height:1792px; */
		height:1920px;
	}
	.carouselBadge {
		width:1170px;
		height:1170px;
		top:16px;
	}
	.carouselLogo {
		width:1300px;
		height:299px;
		top:464px;
	}
	.carouselTitle1, .carouselTitle1:hover:not([disabled]){
		top:272px;
		font-size:80px;
	}
	.carouselTitle2, .carouselTitle2:hover:not([disabled]){
		top:840px;
		font-size:80px;
	}
	.carouselButtons {
		top:968px;
	}
}