@import url('https://fonts.googleapis.com/css2?family=Chokokutai&family=Comic+Neue:wght@300&family=Dancing+Script:wght@700&family=Delius&family=Kablammo&family=Lugrasimo&family=Nabla&family=Pixelify+Sans&family=Quicksand&family=Rubik+Doodle+Shadow&family=Rubik+Marker+Hatch&family=Rubik+Puddles&family=Silkscreen&family=Tilt+Prism&display=swap');

.dancing { font-family: 'Dancing Script', cursive;}
.nabla { font-family: 'Nabla', serif; }
.silkscreen { font-family: 'Silkscreen', serif; }
.pixelify { font-family: 'Pixelify Sans', serif; }
.rubik { font-family: 'Rubik doodle Shadow', serif; }
.rubikP { font-family: 'Rubik Puddles', serif; color: cyan; }
.rubikM { font-family: 'Rubik Marker Hatch', serif; color: white; }
.kablam { font-family: 'Kablammo', serif; }
.chokokutai { font-family: 'Chokokutai', serif; }
.tiltprism { font-family: 'Tilt Prism', serif; }
.quicksand {font-family: 'Quicksand', serif;}
.lugrasimo { font-family: 'Lugrasimo', serif; }
.comic {font-family: 'Comic Neue', serif; }
.delius {font-family: 'Delius', serif;}


*, *::before, *::after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	/* background: rgb(0,30,70); */
}


body {
	background: #272727; /*rgba(39, 39, 39, 1)*/
	min-height: 1500px;
	font-family: 'Comic Neue','Quicksand', serif; /* Default text*/
}

section {
	width: 100%;
	height: 100vh;
	position: fixed;
}

#bg, #bg4, #bg5 {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	/* width: 100%; */
	height: 100vh;
	z-index: -1;
	background-image: url(/images/main/bg.jpg);
	background-repeat: no-repeat;
	background-position: 70% 50%;
	background-size: cover;
	
	filter: brightness(.5) grayscale(.55);
}
/* #bg {background-image: url(/images/bg3.jpg);} */
#bg4 {
	/* background-image: url(/images/bg3.jpg); */
	/* filter: hue-rotate(55deg); */
	/* background: rgba(40,40, 40,1); */
	background-image: linear-gradient(180deg, #7c05f2, #F20587,#F2C85D);
}
#bg5 {
	filter: brightness(.5) grayscale(1);
}

.teamImage {
	width: 100%;
	height: 400px;
	margin: auto;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url(/images/main/team.png);
}

header {
	position: fixed; 
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	
	/* top: 0; */
	/* left: 0; */
	width: 100%;
	/* border-bottom: 1px solid rgba(255,255,255,.1); */
}

header nav {
	background: #272727;
	/* background-image: linear-gradient(180deg, rgba(39, 39, 39, 1), rgba(39, 39, 39, .66) 33%, rgba(39, 39, 39, .33) 66%, rgba(0,0,0,0)); */
	/* background-image: linear-gradient(180deg, #272727 30%, rgba(0,0,0,0));*/
	/* max-width: 1400px;  */
	width: 100%;
	height: 100px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: 'Quicksand', serif; /* Default text*/
	font-size: 66px; 
}


header ul{
	display: flex;
	list-style: none;
	align-items: center;
	z-index: 12; /*in front of title, IF pc and user over-shrinks screen*/
}

header ul a {
	text-decoration: none;
	color: #fff;
	padding: 0 1.5rem;
	text-transform: uppercase;
	font-weight: 300;
	/* font-size: 2rem; */
}

/*Hide the check box, so we can pretend its label is a button*/
#menuBtn, .hideCheckBox { display: none; }
label#menulabel {
	display: inline-block;
	padding: 10px 20px;
	color: white;
	cursor: pointer;
}

#hiddenMenu {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	text-align: center;
	position: absolute;
	top: 100px;
	left: 0;
	right: 0;
	width: 100%;
	height: 0px; 
	background-image: linear-gradient(-45deg, #7DF9FF, #C16CD9); /*elec blue to french mauve?*/
	/* background-image: linear-gradient(90deg, #7DF9FF, #C16CD9, #272727, #272727, #272727, #C16CD9, #7DF9FF); */
	border: 6px outset cyan;
	border-top: none;
	overflow: hidden;
	opacity: 0;
	z-index: -1;
	transition: all 0.25s ease-in-out;
}

#hiddenMenu a {
}

#hiddenMenu a:hover {
	color: black;
	background-image: linear-gradient(45deg, #272727, #C16CD9, #7DF9FF, #C16CD9, #272727);
}

/*When toggle button is check-marked, set hideenMenu height to 500px*/
#menuBtn:checked ~ #hiddenMenu {
	height: 500px; 
	opacity: 1;
	z-index: 12; 
}

.labeltoggle {
	cursor: pointer;
}

div.viewToggle {
	max-height: 0px;
	max-width: 1000px;
	border-radius: 25px;
	opacity: 0;
	transition: all .3s linear;
}

.hideCheckBox:checked + label.labeltoggle + div.viewToggle  {
	max-height: 10000px;
	height: 100%;
	opacity: 1;
	transition: all .45s linear;
}

.glow {
	/* text-shadow: 4px 2px 3px rgba(183,183,183,.5), -4px -2px 3px rgba(183,183,183,.5), -4px 2px 3px rgba(183,183,183,.5), 4px -2px 3px rgba(183,183,183,.5);  */
	/* -webkit-text-stroke: 1px rgba(0,0,0,.5); */ 
	
	/* background: linear-gradient(-45deg, hsl(300, 53%, 75%), hsl(216, 96%, 60%));  */
}

h1#title {
	width: 100%;
	/* color: #272727; */
	color: white; 
	/* background: white; */
	text-align: center;
	/* font-family: 'Dancing Script', cursive; */
	/* margin-top: 30px; */
	position: fixed;
	top: 150px;
	font-size: 150px;
	/* text-shadow: 4px 2px 3px rgba(183,183,183,1), -4px -2px 3px rgba(183,183,183,1), -4px 2px 3px rgba(183,183,183,1), 4px -2px 3px rgba(183,183,183,1);*/
	line-height: normal;
	transition: all .5s ease-out;
}

h1#title > .T, h1#title > .N {
	color: #C16CD9; /*french mauve*/
	-webkit-text-stroke: 1px hsl(50, 100%, 70%); /*pale gold*/
    text-shadow: 4px 2px 3px rgba(183,183,183,.5), -4px -2px 3px rgba(183,183,183,.5), -4px 2px 3px rgba(183,183,183,.5), 4px -2px 3px rgba(183,183,183,.5); /*grey?*/
}

h1#title > .T {
	color: #4BEAFB; /*Moonstone*/
	-webkit-text-stroke: 1px hsl(50, 100%, 70%); /*pale gold*/
    text-shadow: 4px 2px 3px rgba(183,183,183,.5), -4px -2px 3px rgba(183,183,183,.5), -4px 2px 3px rgba(183,183,183,.5), 4px -2px 3px rgba(183,183,183,.5); /*grey?*/
}

/*Added when scrolling further down page -- to affic label to screen top*/
h1#title.fixedTop {
	text-shadow: none; 

	top: 0 !important;
	left: 0;
	width: 600px;
	font-size: 100px !important;	
	background: linear-gradient(-45deg, hsl(300, 53%, 75%), hsl(216, 96%, 60%));  /* Gradient background */
    z-index: 11;
	
	background-clip: text; /* Clip the background to the text */
	-webkit-background-clip: text; /* For WebKit/Blink browsers */
	color: transparent; /* Set text color to transparent */
	
	background-size: 200% 200%;
	line-height: 100px;
	transition: all .25s ease-out, color .75s linear;
	animation: rotateGradient 5s linear infinite;
}

h1#title.fixedTopMobile {
	width: 350px;
}


@keyframes rotateGradient {
	0% {
		background-position: 0% 0%;
	}
	100% {
		background-position: -200% -200%;
	}
}
/* #logoHolder { */
	/* width: 100px; */
	/* height: 100px; */
	/* border-right: 1px solid rgba(1,100,100,1); */
	/* background-size: cover; */
	
	/* position: relative; */
	/* overflow: hidden;	 */
/* } */

/* .logoBG { */
	/* position: absolute; */
	/* width: 125%; */
	/* height: 125%; */
	/* top: -12.5%; */
	/* left: -12.5%; */
	/* opacity: .5; */
	
	/* background: url(logoBG.png); */
	/* background-size: cover; */
	
	/* filter: saturate(1) hue-rotate(120deg) brightness(100%); */
/* } */

/* .logoChild{ */
	/* width: 100%; */
	/* height: 100%; */
	/* background: url(logoFG.png); */
	/* background-size: cover; */
	/* animation: color-change 15s linear infinite; */
/* } */

@keyframes rotateBG {
	0% {   transform: rotate(0deg); }
	100% { transform: rotate(-360deg);  }
}

#main {
	margin: 250px 10% 10% 10%;
	display: flex;
	flex-direction: column;
	/* flex-wrap: wrap; */
	/* justify-content: center; */
	/* align-items: center; */
}

.outer {
	background: #272727;
	background-image: linear-gradient(-45deg, #7DF9FF, #C16CD9); /*elec blue to french mauve?*/
	border: 6px outset cyan;
	margin: 100px 0;
	border-radius: 10px;
}

.decreaseMargin {
	margin-top: -100px;
}

.purpleCyanBG {
	/* background-image: linear-gradient(90deg, #9856ce, #42c0bb); */
	background-image: linear-gradient(180deg, #7c05f2, #F20587,#F2C85D);
}

.inner { 
	min-height: 100px;
	background: #272727;
	border: 5px outset pink;
	margin: 10px 30px;
	border-radius: 5px;
	padding: 3px 3px;
	color: white;
}

.redBorder {
	border-color: #F20587;
}

.cyanBorder {
	border-color: cyan;
}

.orangeBorder {
	border: 5px double hsl(30 , 97% , 52%);
}

.clearBorder {
	border-color: rgba(0,0,0,0);
}

.noBorder {
	border: none;
}

/* .maxRound { */
	/* border-radius: 999px; */
	/* overflow: hidden; */
/* } */

/*target only the parent .maxRound*/
 /* .maxRound:not(.maxRound .maxRound) { */
	/* box-shadow: 10px 10px 5px rgba(0, 0, 0, .8); */
/* } */

.services_info1 {
	border-top: 0px solid white;
	opacity: 0;
	overflow: hidden;
	height: 0;
	max-height: 0px;
	padding: 0px;
	transition: all .35s;
}

.services_info2 {
	border-top: 1px solid white;
	opacity: 1;
	height: 100%;
	max-height: 10000px;
	padding: 15px;
	transition: all .35s;
	border-radius: 15px;
	/* transition-delay: calc(0.1s * var(--index)); */
}


.testimony {
	 font-style: italic;
	 margin-bottom: 60px;
}

.testimony > h3, h4 {
	margin-bottom: 7px;
	/* text-align: right; */
}

/* .testimony:nth-child(odd) { text-align: right;} */
/* .testimony:nth-child(even) { text-align: left;} */

.hideExtra { 
	height: 0; 
	opacity: 0; 
	padding-top: 0px;
	transition: all 0.3s;
}
.revealExtra { 
	height: 100%; 
	padding-top: 40px;
	opacity: 1; 
	transition: all 0.3s; 
}

.moreTestimony {
	margin: auto;
    width: 50%;
    border-radius: 15px;
    height: 60px;
	display: block;
}

.moreTestimony_mobile {
	font-size: 2.2em;
	height: 120px;
}

.workDirect {
	border: 1px solid white;
    padding: 20px;
    /* font-size: 30px; */
	font-size: 60px;
    color: white;
    text-align: center;
}

.workDirect a {
	color: red;
}







.static:hover {
  /* width: 500px; */
  /* height: 300px; */
  /* margin: auto; */
  background-image: repeating-radial-gradient(circle at 17% 32%, white, black 0.00085px);
  animation: tv-static 5s linear infinite;
}

@keyframes tv-static {
  from {
    background-size: 100% 100%;
  }

  to {
    background-size: 200% 200%;
  }
}

.block {
	display: block;
	font-size: 30px;
}

div.inner > h1 {
	/* color: white; */
	position: absolute;
	/* width: 50%; */
	left: 0;
	right: 0;
	/* display: block; */
	z-index: 1;
	text-align: center;
	font-size: 50px;
	font-family: 'Delius', serif;
}

/* ==== SCROLL BAR ===== */
::-webkit-scrollbar {  width: 22px;  }
::-webkit-scrollbar-track { 
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px; 
	background-image: linear-gradient(to top, #1BA3C7, #C16CD9);
}	
::-webkit-scrollbar-thumb  {
	border-radius: 30px;
    -webkit-box-shadow: inset 0 0 16px silver; 
}
/* ==== SCROLL BAR ===== */

.modelHolder {
	position: relative;
	/* width: 100%; */
	height: 300px;
	opacity: 1;
	z-index: 0;
	/* left: calc(50% - 250px); */
	/* overflow: hidden; */
	transition: all 3s ease-out;
	/* background-color: rgba(0,255,0,1); */ 
}

.owlGifBG {
	background-image: url('/images/main/owl.gif');
	background-repeat: no-repeat;
	background-size: cover;
	 /* background-attachment: fixed; */
    background-position: center;
	margin: -3px;
}

.flex-about { /*about*/
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	background: #272727;
}

.flex-projects {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	/* border: 1px dotted rgba(0,0,0,.5); */
}

.flex-about img {
	max-width: 100%;
	max-height: 100%;
	object-fit: cover; /* Maintain aspect ratio and cover the entire container */
	margin: auto;
	border-radius: 12px;
	filter: brightness(1.2);
}

.reverseJustify {
	flex-direction: row-reverse;
	justify-content: center;
}

.flexText {
	flex: 1; /* Takes up remaining space */
	display: flex;
	text-align: center; 
}


.flexText > h2 {
	font-size: 70px;
	display: inline-block; 
	margin: auto;
}

.flexTextLinks {
	flex: 1; /* Takes up remaining space */
	text-align: center; 
}

.flexTextLinks > a, .flexTextLinks > p > a {
	color: cyan;
}

.aboutText {
	line-height: 40px; /*40px;*/
	padding: 20px;
}

.aboutSpacing {
	margin: auto;
	/* line-height: 80px; */
	padding: 20px;
}

.minWidth400 {
	min-width: 400px;
}

.project_preinfo_parent {
	display: block;
    /* background: linear-gradient(45deg, rgba(255,255,255,0.75), rgba(40,40,40,0.25),rgba(255,255,255,1)); */
    background: linear-gradient(45deg, rgba(40,40,40,.4) , rgba(40,40,40,1) , rgba(40,40,40,.8) , rgba(40,40,40,1) , rgba(40,40,40,1) );
	margin: auto;
	margin-bottom: 150px;
	/* margin-top: 250px; */
	border: 2px solid gray;
	border-radius: 10px;
}

.project_preinfo {
	text-align: center;
    font-size: 60px;
    margin: 25px;
    color: white;
    /* margin-bottom: 150px; */
    background: linear-gradient(-45deg, #4BEAFB,#C16CD9);
    border-radius: 15px;
	
	background: linear-gradient(-45deg, hsl(300, 53%, 75%), hsl(216, 96%, 60%));  /* Gradient background */
    /* z-index: 11; */
	
	background-clip: text; /* Clip the background to the text */
	-webkit-background-clip: text; /* For WebKit/Blink browsers */
	color: transparent; /* Set text color to transparent */
}	

.flex-projects h1 {
	flex: 1;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	text-decoration: underline;
	font-size: 75px;
	text-decoration-thickness: 10%;
	
	color: white;
	/* text-shadow: 4px 2px 3px rgba(183,183,183,.5), -4px -2px 3px rgba(183,183,183,.5), -4px 2px 3px rgba(183,183,183,.5), 4px -2px 3px rgba(183,183,183,.5);  */
	text-shadow: 4px 2px 3px rgba(40,40,40,.5), -4px -2px 3px rgba(40,40,40,.5), -4px 2px 3px rgba(40,40,40,.5), 4px -2px 3px rgba(40,40,40,.5); 
}

.projectHolder {
	width: 100%;
}

.projectName {
	height: 150px;
	display: block;
	text-align: center;
	padding: 10px 0px;
	color: black;
	font-size: 250%; /*50px;*/
	max-width: 1000px;
	margin: auto;
	margin-bottom: -10px;
	transition: all 0.2s ease-in-out;
}

/*https://ishadeed.com/article/clip-path/*/
.nameBG {
	width: 100%;
	height: 130px;
	border: 2px solid rgba(255,255,255,1);
	border-left: none;
	border-right: none;
	display: block;
	margin-left: 5%;
	z-index: -1;
	
	clip-path: polygon(0px 0px, 90% 0px, 90% 100%, 0px 100%);
	background-repeat: no-repeat;
    background-size: cover;
	filter: brightness(1.5);
    transition: all 0.2s ease-in-out;
}
.nameBG { background-image: url('/images/projects/mortar.jpg'); }
.ch2BG { background-image: url('/images/projects/ch2.jpg'); background-position: left 100%; }
.srvBG { background-image: url('/images/projects/sacredrealm.jpg'); background-position: center;}
.vbBG { background-image: url('/images/projects/viro.jpg'); background-position: center;}
.bii { background-image: url('/images/projects/botix2.jpg'); background-position: center; filter: brightness(1);}
.pb { background-image: url('/images/projects/pb.png'); background-position: center;}
.wpp { background-image: url('/images/projects/wpp.png'); background-position: left 90%;}
.ms { background-image: url('/images/projects/ms.jpg'); background-position: left bottom;}
.yp { background-image: url('/images/projects/yourproduct.jpg'); background-position: left 100%; filter: brightness(1);}
.ds { background-image: url('/images/projects/divine.jpg'); background-position: center;}
.sbb { background-image: url('/images/projects/smashmodz.jpg'); background-position: center; filter: brightness(1);}
.abtBG { background-image: url('/images/portfolio/Wisdom_palette.png'); background-position: center; }
.uBG { background-image: url('/images/portfolio/unity.png'); background-position: 60% center; }
.bookBG { background-image: url('/images/portfolio/pixabook.jpg'); background-position: 60% center; }
.qpBG {	background-image: url('/images/projects/q1_pestle.jpg'); background-position: 0px 20%; filter: brightness(.8);}
.cinemBG {	background-image: url('/images/portfolio/popcornPixa.jpg');  background-position: center; filter: brightness(1);}
.contBG {	background-image: url('/images/portfolio/content.jpg');  background-position: center 75%; filter: brightness(1);}
.procBG { background-image: url('/images/portfolio/proc.jpg');  background-position: center 75%; filter: brightness(1); }
.eaiBG { background-image: url('/images/portfolio/eai.jpg');  background-position: center 35%; filter: brightness(1) hue-rotate(100deg); }
.combatBG { background-image: url('/images/portfolio/wolfFace.jpg');  background-position: center 80%; filter: hue-rotate(100deg) brightness(2) contrast(150%) saturate(50%); }
/* .c1BG { background-image: url('/images/portfolio/ch1.webp') !important; background-position: center 50%; } */
/* .projectName:hover > .nameBG,  */

.nameText {
	color: white;
	position: relative;
	top: -95px;
	display: block;
	font-weight: 600;
	
	width: 75%;
	background: rgba(40,40,40,.75);
    margin-left: 12.5%;
    margin-right: auto;
    border-radius: 15px;
	
	transition: all 0.2s ease-in-out;
}

.hideCheckBox:checked + label.labeltoggle > .nameBG {
	clip-path: polygon(10% 0px, 100% 0px, 90% 100%, 0px 100%);
	transition: all 0.2s ease-in-out;
}

.hideCheckBox:checked + label.labeltoggle > .nameText {
	margin-left: 17.5%;
	transition: all 0.2s ease-in-out;
}

.projectInfo {
	display: flex;
	flex-direction: column;
	border: 1px dotted rgba(0,0,0,.5);
	background: rgba(39, 39, 39, 1); 
	color: white;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	height: 400px;
	overflow: hidden;
	max-width: 90%;
	margin: auto;
	font-size: 40px;
}

.projectInfo > span {
	padding: 20px;
	height: 100%;
}

.projectInfo > span > p {
	margin: 60px;
}

.projectInfo > span > p > img, iframe {
	width: 100%; /*600px;*/
	display: block;
	margin: auto;
}

.projectInfo > span > p:last-child {
	margin-bottom: 0;
}

.centerText {text-align:center;}

.projectInfo > .viewBtn {
	flex: 1;
	border: 1px double rgba(0,0,0,.5);
	width: 80%;
	/* height: 100px; */
	min-height: 100px;
	line-height: 100px;
	display: block;
	margin: 15px auto;
	border-radius: 7px;
	text-align: center;
	
	font-size: 35px;
	border: none;
	outline: none;
	color: #000;
	background: linear-gradient(
	45deg,
	#999 5%,
	#fff 10%,
	#ccc 30%,
	#ddd 50%,
	#ccc 70%,
	#fff 80%,
	#999 95%
	);
	text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
	border-radius: 10px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

.projVid {
	margin: auto;
	display: block;
}


.viewBtn:active {
  background: linear-gradient(
	-45deg,
	#999 5%,
	#fff 10%,
	#ccc 30%,
	#ddd 50%,
	#ccc 70%,
	#fff 80%,
	#999 95%
	); 
} 

.flowButton {
	width: 50%;
	height: 140px;
	border-radius: 55px;
	padding: 10px;
	margin: auto;
	color: white;
	text-transform: uppercase;
    font-weight: 600;
	font-size: 2rem;
	font-family: 'Quicksand', serif;
	
	/* background: linear-gradient( */
	/* 45deg, */
	/* #999 5%, */
	/* #fff 10%, */
	/* #ccc 30%, */
	/* #ddd 50%, */
	/* #ccc 70%, */
	/* #fff 80%, */
	/* #999 95% */
	/* ); */
	background: #5bc0de;
	text-align: center;
    line-height: 130px;
    text-decoration: none;
	box-shadow: 5px 5px rgb(40,40,40);
	cursor: pointer;
}

.projectHeaderSpacer { margin-top: 100px; }

/* @media (max-width: 830px) { */
	/* header nav { */
		/* height: 200px; */
	/* } */
	
	/* #hiddenMenu { */
		/* top: 200px; */
	/* } */
	
	/* h1#title { */
		/* font-size: 17vw; */
		/* top: 200px; */
	/* } */
/* } */

/* @media only screen and (max-width: 690px)  { */
	/* div.inner > h1.smallerText { font-size: 6vw; } */
/* } */

#rain {
	/* position: fixed; */
	/* width: 100%; */
	/* height: 100vh; */
	/* z-index: 4; */
	/* background: rgb(0,30,70); */
	/* background-image: url(foregrassB.png); */
	/* background: url( https://images.unsplash.com/photo-1701713137683-7ef6f152a308?q=80&w=1587&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D); */
	/* background-size: cover; */
	/* animation: color-change 2s linear infinite */
}

#rain:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(rain.png);
	animation: rain 0.2s linear infinite;
}

@keyframes color-change {
	0%, 100% {  filter: hue-rotate(0deg); }
	50% { filter: hue-rotate(360deg); }
}

@keyframes rain {
	0% {  background-position: 0 0; }
	100% { background-position: 20% 100%; }
}

#contactForm {
	min-width: 500px;
	border: 1px solid white;
	color: white;
	display: block;
	padding: 20px;
	margin: 20px auto;
}

h1.glowText {
	text-align: center; 
	color: white;
	display: inline-block;
	width: 100%;
	font-size: 40px;
	margin-bottom: 20px;
	transition: font-size 0.3s ease-out;
}

#contactForm:hover > h1.glowText > x {
	background: linear-gradient(-45deg, hsl(300, 53%, 75%), hsl(216, 96%, 60%));  /* Gradient background */
	background-clip: text; /* Clip the background to the text */
	-webkit-background-clip: text; /* For WebKit/Blink browsers */
	color: transparent; /* Set text color to transparent */
	background-size: 100% 100%;
	filter: brightness(1.25);
	
	transition: color .3s;
	transition-delay: calc(0.1s * var(--index));
}

#contactForm > span {
	display: block;
	margin: 20px auto;
}

.centerSpan {
	width: 50px;
	min-width: 500px;
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.centerSpan > label {
	font-size: 35px;
}

.centerSpan > input {
	width: 300px;
	min-height: 40px;
	font-size: 20px;
	padding-left: 20px;
}

.centerSpan > .submit {
	width: 100%;
	height: 60px;
	font-size: 30px;
}

#textarea {
	width: 100%;
	margin: auto;
	font-size: 25px;
	padding: 20px;
}

.messageSent {
	text-align: center;
	height: 300px;
	line-height: 300px;
}

.mobileOnly { display: none;}

.noBottomMargin {margin-bottom:0;}

/* Portfolio */

p.portfolio_tagline {
	color: rgb(255,255,255);
	text-align: center !important;
	font-size: 25px;
	margin: 15px;
}

img.portfolio_selfie {
	display: block;
    margin: 10px auto;
	border: 2px solid rgb(80,80,80);
	border-radius: 15px;
}

.portfolioIMG {
	width: 100%; /*600px;*/
	display: block;
	margin: auto;
}

#portfolioMain p > img, 
#portfolioMain iframe {
  border: 3px solid grey;
  box-sizing: border-box;
}

iframe {
  /* background: lightgrey url('/images/portfolio/loading.gif'); center center no-repeat; */
	background: black url('https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExeG16NjczeG1jdnhuMnl4dTk0bm5zcmpzM2tpbjJnYTZyZHp2NTlqayZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/3ohzdOrcdpiD26TPt6/giphy.gif') center center no-repeat;
	background-size: contain;
}