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


/**************************************** Navbar/Header ****************************************/
#nav {
	font-weight:bolder;
	font-size:16px !important;
	z-index:100 !important;
	background:var(--backgroundAccent1) !important;
}
#navDropdown {
	background:var(--backgroundAccent1) !important;
	color:var(--text) !important;
}
#burgerMenuBtn {
	background:var(--background) !important;
	color:var(--text);
	border:2px solid var(--background);
}
#burgerMenuBtn:hover {
	background:var(--overlay);
	color:var(--highlight) !important;
	border:2px solid var(--highlight);
}
.navLogo {
	position:relative;
	/* width:48px;
	height:48px; */
}
.lightbulb {
	cursor:pointer;
	color:var(--text);
	text-shadow:-3px 0 var(--highlightHover), 0 3px var(--highlightHover), 3px 0 var(--highlightHover), 0 -3px var(--highlightHover);
}
.redBlueHighlightSwitch {
	cursor:pointer;
	color:var(--highlightOpposite);
	text-shadow:-3px 0 var(--highlightHover), 0 3px var(--highlightHover), 3px 0 var(--highlightHover), 0 -3px var(--highlightHover);
}

.navbar-toggler, .navbar-toggler-icon {
	cursor: pointer;
	background-color: var(--background);
}

.activeLink {
	color:var(--textHover) !important;
	text-shadow:-1px 0 var(--highlightHover), 0 1px var(--highlightHover), 1px 0 var(--highlightHover), 0 -1px var(--highlightHover);
    border-bottom: 1px solid var(--highlightHover);
}

/**************************************** Slider/HeroHeader/Index Logo ****************************************/
/*************************** Previously carousel code, repurposed for a heroHeader ****************************/
.basicHeroHeader {
	position: relative;
	height:448px;
	display:flex;
	justify-content:center;
	align-items:center;
	text-align:center;
	z-index:5;
	width:100%;
	overflow:hidden;
}
.heroHeaderImg {
	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;
}
.heroHeaderBadge {
	position:absolute;
	width:260px;
	height:260px;
	left:0;
	right:0;
	margin:auto;
	top:4px;
	object-fit:cover !important;
	z-index:3;
}
.heroHeaderLogo {
	position:absolute;
	width:300px;
	height:69px;
	left:0;
	right:0;
	margin:auto;
	top:100px;
	object-fit:cover !important;
	z-index:4;
}
.heroHeaderTitle1, .heroHeaderTitle1: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;
}
.heroHeaderTitle2, .heroHeaderTitle2: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;
}
.heroHeaderButtons {
	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;
    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 ****************************************/
.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);
}
.borderTop { /* old section topborder replacement */
	border-top:1px solid var(--backgroundHover);
}
.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);
}
.highlightBorderColor {
	border-color: var(--highlight);
}

/********************** 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:0.5s;
	-moz-animation-name:animate-titles;
	-moz-animation-duration:2s;
	-moz-animation-iteration-count:1;
	-moz-animation-direction:linear;
	-webkit-animation-delay:0.5s;
	-webkit-animation-name:animate-titles;
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-direction:linear;
	-ms-animation-delay:0.5s;
	-ms-animation-name:animate-titles;
	-ms-animation-duration:2s;
	-ms-animation-iteration-count:1;
	-ms-animation-direction:linear;
	-o-animation-delay:0.5s;
	-o-animation-name:animate-titles;
	-o-animation-duration:2s;
	-o-animation-iteration-count:1;
	-o-animation-direction:linear;
	animation-delay:0.5s;
	animation-name:animate-titles;
	animation-duration:2s;
	animation-iteration-count:1;
	animation-direction:linear;
}

/* ------- 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) {
	.basicHeroHeader {
		height:768px;
	}
	.heroHeaderBadge {
		width:585px;
		height:585px;
		top:8px;
	}
	.heroHeaderLogo {
		width:600px;
		height:138px;
		top:228px;
	}
	.heroHeaderTitle1, .heroHeaderTitle1:hover:not([disabled]){
		top:124px;
		font-size:48px;
	}
	.heroHeaderTitle2, .heroHeaderTitle2:hover:not([disabled]){
		top:420px;
		font-size:48px;
	}
	.heroHeaderButtons {
		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;
	}
	.heroHeaderBadge {
		width:715px;
		height:715px;
		top:8px;
	}
	.heroHeaderLogo {
		width:800px;
		height:184px;
		top:276px;
	}
	.heroHeaderTitle1, .heroHeaderTitle1:hover:not([disabled]){
		top:152px;
		font-size:60px;
	}
	.heroHeaderTitle2, .heroHeaderTitle2:hover:not([disabled]){
		top:512px;
		font-size:60px;
	}
	.heroHeaderButtons {
		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) {
	.basicHeroHeader {
		/* height:1792px; */
		height:1920px;
	}
	.heroHeaderBadge {
		width:1170px;
		height:1170px;
		top:16px;
	}
	.heroHeaderLogo {
		width:1300px;
		height:299px;
		top:464px;
	}
	.heroHeaderTitle1, .heroHeaderTitle1:hover:not([disabled]){
		top:272px;
		font-size:80px;
	}
	.heroHeaderTitle2, .heroHeaderTitle2:hover:not([disabled]){
		top:840px;
		font-size:80px;
	}
	.heroHeaderButtons {
		top:968px;
	}
}