/*:root {
  --animation-time: 5s;
}*/
/*body {
	background-color: #111821;
	background: no-repeat center center fixed;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: auto;
	height: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
	background-image: url('Hex_7.jpg');
	font-family: verdana;
}*/

h1 {
	color: #8b8e91;
	width: auto;
	text-align: center;
	font-family: garamond;
	font-size:12px;
	margin-left: auto;
	margin-right: auto;
}

.h4 {
	text-align:center;
	margin: 0;
	margin-top: 20px;
	margin-bottom: 20px;
}

p {
	color: #8b8e91;
	padding: 10px;
	margin: 20px;
	text-align: center;
	font-size: 28px;
}

.mainContainer {
	text-align:center;
	/*margin-top: 60px;*/
	/*margin-bottom: 60px;*/
}

.btn-group button {
	background-color: #00000000;
	color: #00000000; /* White text */
	/*padding: 10px 24px;*/ /* Some padding */
	cursor: pointer; /* Pointer/hand icon */
	/*cursor: url("src/img/CustomCursor_6_2p.png"), auto;*/
	border: none;
}
/* Clear floats (clearfix hack) */
.btn-group:after {
  content: "";
  clear: both;
  display: table;
}

.btn-group button:not(:last-child) {
  border-right: none; /* Prevent double borders */
}

.btn-group button:hover {
  background-color: #00000000;
}

img {
	max-width: 100%;
	height: auto;
}

.textCaption {
	/*color: #d3dce6;*/
	font-size: 24px;
	/*font-family: garamond;*/
	/*font-family: 'Orbitron', sans-serif;*/
	font-family: 'Audiowide', cursive;
	font-weight: 200;
	text-align: center;
	opacity: 1;
	position: absolute;
	padding: 5px;
	margin-top: 25px;
	top: 50%;
	left: 50%;
	/*width: 25%;*/
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	transition: transform 0.4s cubic-bezier(.31,.01,.51,.99);
}

.textCaption span {
	/*width: 100%;*/
	border-bottom: 1px solid #8b8e91;
	border-top: 1px solid #8b8e91;
	/*border-right: 1px solid #8b8e91;*/
	/*border-left: 1px solid #8b8e91;*/
	padding: 8px 12px 8px 12px;
	border-radius: 8px;
	/*border-bottom-left-radius: 24px;*/
	/*border-bottom-right-radius: 24px;*/
	transition: transform 0.4s cubic-bezier(.31,.01,.51,.99);
}

.imgPSContainer {
	/*width: 90%;*/
	text-align: center;
	margin-left: 10%;
	margin-right: 10%;
}
.imgPSContainerSlides {
	text-align:center;
	margin-top: 40px;
	margin-bottom: 60px;
}
.imgPSInnerContainerSlides {
	/*align-items: center;*/
	position: relative;
	display: inline-block;
	vertical-align: top;
	margin-left: auto;
	margin-right: auto;
	/*width: 27%;*/
	margin: 5px;
	text-align: center;
}
.slides {
	display: none;
	animation: fading 6s cubic-bezier(.88,-0.49,.22,1.54) infinite;
	/*cubic-bezier(.68,-0.55,.27,1.55) -- for 4 seconds */
}
@keyframes fading {
	0% {
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	85% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
.img3 {
	max-width: 100%;
	border-radius: 20% / 12%;
	display: inline;
	margin-left: auto;
	margin-right: auto;
	height: 600px;
	position: relative;
	object-fit: contain;
}
.imgPhotoshoot {
	width: auto;
	height: 30%;
	padding: 10px;
	position: relative;
	object-fit: cover;
	overflow: hidden;
}

a.link2 {
	color: #262a30;
	background-color: transparent;
	text-decoration: none;
	/*display: inline-block;*/
	display: flex;
	text-align: center;
}
a.link2:link {
	display: inline-block;
	padding: 15px 25px;
}
a.link2:visited {
	color: #5e646b;
}
a.link2:hover {
	color: #7b8aa0;
}
a.link2:active {
	color: #00409e;
}

a.link3 {
	color: inherit;
	text-decoration: underline;
}

a.link3:hover {
	color: #436ff3;
}

/*a.link4 {
	color: #262a30;*/
	/*width: 100%;
	height: auto;*/
	/*background-color: transparent;
	text-decoration: none;
	display: inline;
	text-align: center;
}*/

/*.socialHover:hover {
	filter: drop-shadow(0 0 2px #ffffff) brightness(1.25);
	animation: fadeinout 2s Ease-in-out infinite;
}

.twitterX:hover {
	content: url("src/icons/Twitter_X.png");
}*/

.topDesc {
	text-align: center;
	width: 75%;
	margin-left: 12.5%;
	margin-right: 12.5%;
	font-size: 20px;
	/*font-family: 'Orbitron', sans-serif;*/
	font-family: 'Roboto Mono', monospace;
	font-style: normal;
	font-weight: 300;
	color: #a2a6a9;
	letter-spacing: 0.1em;
}

.modalP {
	font-size: 20px;
	/*font-weight: 100px;*/
	color: #abafb3;
	/*font-family: 'Merienda', cursive;*/
	font-family: 'verdana';
	text-align: left;
	position: relative;
}

.modalH2 {
	color: #d3dce6;
	font-family: 'Merienda', cursive;
	text-align: left;
	font-size: 28px;
}
.modalH2-2 {
	color: #d3dce6;
	font-family: 'Orbitron', sans-serif;
	text-align: center;
	font-size: 32px;
	font-weight: lighter;
}

#modalA {
	text-decoration: underline;
	color: inherit;
}

#modalA:hover {
	color: #3C56E9;
	cursor: pointer;
	/*cursor: url("src/img/CustomCursor_6_2p.png"), auto;*/
}

.modal-content {
	display: block;
	position: relative;

}

.modal-content > div {
	width: 60%;
	position: relative;
	margin: auto;
	padding: 20px;
	color: #d3dce6;
}

.close {
	font-size: 24px;
	text-align: center;
	width: 20%;
	text-decoration: none;
	transition: .15s all ease-in;
	color: rgba(67,111,243);
	font-weight: bold;
	border: solid 2px rgba(67,111,243,30%);
	background-color: rgba(67,111,243,30%);
	border-radius: 15px;
	box-shadow: 0px 0px 6px 2px #436ff3;
	-webkit-background-clip: padding-box; /* for Safari */
	background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
	margin: 0 auto;
	position: absolute;
	top: 90%;
	left: 65%;
	line-height: normal;
	display: block;
	/*z-index: 99999;*/
}

.close:hover,
.close:focus {
	color: #142149;
	cursor: pointer;
	/*cursor: url("src/img/CustomCursor_6_2p.png"), auto;*/
	background-color: rgba(67,111,243);
	transition: .15s all ease-in;
}

/*.button {
	display: inline-block;
	background-color: Transparent;
	background-repeat:no-repeat;
	outline: none;
	color: #8b8e91;
	font-size: 24px;
	font-family: 'Orbitron', sans-serif;
	padding: 8px;

	cursor: pointer;
	height: 100%;
	border: solid 2px #436ff3;
  border-radius: 8px;
  background: rgba(255, 255, 255,0);
	box-shadow: 0px 0px 6px 2px #436ff3;
  transition: .3s all ease-in;
}

.button:hover, .button:focus {
	outline: none;
	color: #d3dce6;
	transition: color;
	background-color: Transparent;
  background-repeat:no-repeat;
	border:solid 2px #bc9c36;
  border-radius: 15px;
  box-shadow: 0px 0px 6px 2px #bc9c36;
	transition: .15s all ease-in;
}*/

.pageButton {
	text-align: center;
	font-family: 'Orbitron', sans-serif;
	cursor: pointer;
	/*cursor: url("src/img/CustomCursor_6_2p.png"), auto;*/
	transition: .3s all ease-in;
	color: rgba(99, 138, 255, 0.9); /*#638aff;*/
	/*color: #99B3FF;*/
 	font-size: 22px;
 	/*font-weight: bold;*/
	padding: 10px;
	padding-left: 14px;
	padding-right: 14px;

 	text-decoration: none;
 	border: solid 2px rgba(67,111,243,30%); /* #436ff3 */
 	background-color: rgba(67,111,243,15%);
	/*border-radius: 12% / 12%;*/
	border-radius: 4%;

	/*transform: skew(-30deg);*/
	/*transform-origin: top; *//* may fix or worsen centering issues, check later */

	box-shadow: 0px 0px 6px 2px #436ff3;
	-webkit-box-shadow: 0px 0px 6px 2px #436ff3;
	-webkit-appearance: none;
	-webkit-background-clip: padding-box; /* for Safari */
  background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
	/*margin: 8px;*/
}
.pageButtonSkew {
	text-align: center;
	font-family: 'Orbitron', sans-serif;
	cursor: pointer;
	/*cursor: url("src/img/CustomCursor_6_2p.png"), auto;*/
  transition: .3s all ease-in;
	color: rgba(99, 138, 255, 0.9); /*#638aff;*/
	/*color: #99B3FF;*/
 	font-size: 22px;
 	/*font-weight: bold;*/
	padding: 10px;
	padding-left: 14px;
	padding-right: 14px;

 	text-decoration: none;
 	border: solid 2px rgba(67,111,243,30%); /* #436ff3 */
 	background-color: rgba(67,111,243,15%);
	/*border-radius: 12% / 12%;*/
	border-radius: 4%;

	transform: skew(-30deg);
	/*transform-origin: top; *//* may fix or worsen centering issues, check later */

	box-shadow: 0px 0px 6px 2px #436ff3;
	-webkit-box-shadow: 0px 0px 6px 2px #436ff3;
	-webkit-appearance: none;
	-webkit-background-clip: padding-box; /* for Safari */
  background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
	/*margin: 8px;*/
}

/* for blank buttons */
.pageButtonFalse {
	display: inline;
	text-align: center;
	font-family: 'Orbitron', sans-serif;
  transition: .3s all ease-in;
	color: rgba(99, 138, 255, 0.01); /*#949a9e;*/
 	font-size: 22px;
 	/*font-weight: bold;*/
	padding: 10px;
	padding-left: 14px;
	padding-right: 14px;

 	text-decoration: none;
 	border: solid 2px rgba(67,111,243,30%);
 	background-color: rgba(67,111,243,15%);
	/*border-radius: 12% / 12%;*/
	border-radius: 4%;

	transform: skew(-30deg);
	/*transform-origin: top; *//* may fix or worsen centering issues, check later */

	box-shadow: 0px 0px 6px 2px #436ff3;
	-webkit-box-shadow: 0px 0px 6px 2px #436ff3;
	-webkit-appearance: none;
	-webkit-background-clip: padding-box; /* for Safari */
  background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
	/*margin: 8px;*/
}

.pageButtonTxt {
	/*transform: skew(30deg);*/
}

.aButton {
	text-decoration: none;
	color: inherit;
}

.pageButtonUN {
	transform: skew(0deg);
}

.pageButton:hover, .pageButtonSkew:hover {
	/*color: #142149; *//*#202020;*/
	color: rgba(20, 33, 73);
	cursor: pointer;
	/*cursor: url("src/img/CustomCursor_6_2p.png"), auto;*/
	background-color: rgba(99, 138, 255, 0.9);
	/*background-color: #99B3FF;*/
	transition: .15s all ease-in;

	border-radius: 50% / 15%;
}

.buttonAbout {
	color: #8b8e91;
	width: 100%;
	font-size:12px;
	display: block;
	text-align: center;
	/*padding-top: 10px;*/
	/*padding-bottom: 10px;*/
	-webkit-appearance: none;
}

.lg-view {
	display:inline;
}
.sm-view{
   display:none;
}

#p01 {
	text-align: center;
	color: #8b8e91;
	font-size: 14px;
	width:auto;
	font-family: 'Orbitron', sans-serif;
}

hr {
	width: 90%;
}

hr.rounded {
	border-top: 1px solid #000000;
	border-radius: 5px;
	box-shadow: 0 0 1px #ffffff,
							0 0 10px #969696,
							0 0 15px #ffffff;
}

hr.roundedTwo {
	width: 50%;
	border-top: 1px solid #bbbbbb;
	border-radius: 5px;
	filter: drop-shadow(0 0 1px #ffffff)
					drop-shadow(0 0 4px #99bbff);
	/*animation: fadeinoutSmall 5s Ease-in-out infinite;*/
	/*animation: flicker var(--animation-time) Ease-in-out alternate infinite;*/
}

.glowFade {
	/*border-top: 1px solid #bbbbbb;*/
	border-radius: 5px;
	/*-webkit-filter: drop-shadow(0 0 2px #ffffff)
					drop-shadow(0 0 4px #99bbff);
	-ms-filter: drop-shadow(0 0 2px #ffffff)
					drop-shadow(0 0 4px #99bbff);*/
	filter: drop-shadow(0 0 2px #000000)
					drop-shadow(0 0 4px #111111);
					/*drop-shadow(0 0 4px #436ff3);*/
	animation: fadeinoutSmall 15s Ease-in-out infinite;
	/*animation: flicker var(--animation-time) Ease-in-out alternate infinite;*/
}

/*@keyframes flicker {
  0% {
    opacity: 0.3;
  } 100% {
    opacity: 1;
  }
}*/

@keyframes fadeinout {
	0% {
		opacity: 100%;
	}
	10% {
		opacity: 90%;
	}
	20% {
		opacity: 90%;
	}
	30% {
		opacity: 80%;
	}
	40% {
		opacity: 100%;
	}
	50% {
		opacity: 100%;
	}
	60% {
		opacity: 90%;
	}
	70% {
		opacity: 90%;
	}
	80% {
		opacity: 100%;
	}
	90% {
		opacity: 90%;
	}
	100% {
		opacity: 100%;
	}
}

@keyframes fadeinoutSmall {
	0% {
		opacity: 100%;
	}
	25% {
		opacity: 80%;
	}
	50% {
		opacity: 90%;
	}
	75% {
		opacity: 90%;
	}
	90% {
		opacity: 80%;
	}
	100% {
		opacity: 100%;
	}
}

@keyframes colorChange {
  0% {
		box-shadow: 0 0 1px 4px #000000,
								0 0 25px 15px #436ff3;
  } 30% {
		box-shadow: 0 0 1px 4px #000000,
								0 0 24px 14px #3062f2;
  } 70% {
		box-shadow: 0 0 1px 4px #000000,
								0 0 25px 15px #436ff3;
  } 80% {
		box-shadow: 0 0 1px 4px #000000,
								0 0 24px 14px #4a74f0;
  } 100% {
		box-shadow: 0 0 1px 4px #000000,
								0 0 25px 15px #436ff3;
  }
}

.left, .right, .main {
	float: left;
	width: 28%;
	/* The width is 20%, by default */
}

/* --------------------------------------------------------------------- */

@media screen and (min-width: 2000px) {
/*	.mainContainer {
		margin-top: 80px;
		margin-bottom: 80px;
	}*/
	.socialProps img {
		width: 24%;
	}
	hr.roundedTwo {
		width: 50%;
	}
}
@media screen and (max-width: 1350px) {
	.mainContainer {
		margin-top: 40px;
		margin-bottom: 40px;
	}
	.textCaption span {
		font-size: 22px;
	}
	.imgPSContainer {
		text-align: center;
		margin-left: 5%;
		margin-right: 5%;
	}
	.imgPSContainerSlides {
		margin-top: 40px;
		margin-bottom: 40px;
	}
	.imgPhotoshoot {
		height: 20%;
		padding: 10px;
	}
}

@media screen and (max-width: 1200px) {
	.mainContainer {
		margin-top: 20px;
		/*margin-bottom: 20px;*/
	}
	.imgPSContainerSlides {
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.imgPSInnerContainerSlides {
		width: 94%;
		margin: 0 auto;
		padding: 5px;
	}
	.img3 {
		/*width: 100%;*/
		height: 400px;
	}
	.socialBar {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.socialProps img {
		width: 24%;
	}
	.overlay {
		opacity: 1;
	}
	.img2 {
		display: block;
		width: 100%;
		height: auto;
		/*margin: 0 auto;*/
		margin-left: auto;
		margin-right: auto;
	}
	.textCaption {
		padding: 5px;
		margin-bottom: 20px;
		width: 25%;
	}	
	.textCaption span {
		font-size: 18px;
	}
	.modal-content > div {
		width: 75%;
		overflow: inherit;
	}
	.pageButton, .pageButtonSkew {
		width: auto;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.pageButtonFalse {
		display: none;
	}
	hr.roundedTwo {
		width: 90%;
	}
}
/*@media screen and (max-width: 1000px) {
	.container {
		width: 75%;
		margin: 0 auto;
		padding: 5px;
	}
}*/
/*@media screen and (max-width: 900px) {
	.textCaption {
		width: 25%;
	}
}*/
@media screen and (max-width: 850px) {
	.imgPSContainer {
		text-align: center;
		margin-left: 2.5%;
		margin-right: 2.5%;
	}
	.imgPhotoshoot {
		/*height: 30%;*/
		width: auto;
		padding: 5px;
	}
	.img3 {
		/*width: 100%;
		height: auto;*/
		height: 300px;
	}
}
@media screen and (max-width: 800px) {
	.textCaption {
		width: 50%;
	}
	.textCaption span {
		font-size: 22px;
	}
	.pageButton, .pageButtonSkew {
		transform: skew(0);
	}
	.pageButtonTxt {
		transform: skew(0);
	}
	.lg-view {
		display:none;
	}
	.sm-view{
		 display:inline;
	}
}
@media screen and (max-width: 775px) {
	.imgPhotoshoot {
		height: 15%;
		width: auto;
	}
}
@media screen and (max-width: 700px) {
	/*.mainContainer {
		margin-top: 0px;
		margin-bottom: 0px;
	}*/
	.socialProps img {
		width: 38%;
	}
	.h4 {
		margin-top: 0px;
		margin-bottom: 0px;
	}
	.h4 img {
		width: 40%;
	}
	.modal-content > div {
		width: 75%;
		height: auto;
		overflow-x: hidden;
		overflow-y: hidden;
	}
	.modalP {
		margin: 5% auto;
		text-align: left;
	}
	.imgPSContainerSlides {
		margin-top: 0px;
		margin-bottom: 0px;
	}
	.topDesc {
		text-align: center;
		width: 90%;
		margin-left: 5%;
		margin-right: 5%;
		font-size: 18px;
		padding: 0;
	}
	.buttonAbout {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
	.pageButton, .pageButtonSkew {
		width: auto;
		left: 50vw;/*calc(50% - width);*/
	}
	hr.rounded {
		border-top: 2px solid #bbb;
	}
	hr.roundedTwo {
		width: 90%;
		border-top: 2px solid #bbb;
		border-radius: 5px;
	}
}
@media screen and (max-width: 600px) {
	.buttonAbout {
		padding-top: 0px;
		padding-bottom: 0px;
	}
	.imgPhotoshoot {
		height: 20%;
		width: auto;
	}
	.socialBar {
		padding-top: 5px;
		padding-bottom: 5px;
	}
	.img3 {
		/*width: 100%;
		height: auto;*/
		height: 200px;
	}
	p {
		margin: 0px;
	}
}
@media screen and (max-width: 400px) {
	#p01 {
		width: 98%;
		margin-left: auto;
		margin-right: auto;
	}
	.modal-content > div {
		width: 90%;
		height: auto;
		overflow-y: hidden;
		text-align: left;
	}
	.modalP {
		margin: 5% auto;
		text-align: left;
	}
	/*.imgPSContainer {
		text-align: center;
		margin-left: 5%;
		margin-right: 5%;
	}*/
	.imgPhotoshoot {
		height: auto;
		width: 100%;
		/*padding: 10px;*/
	}
}
