@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

body {
	/*background: #223 url("../img/sob_bg.png") repeat repeat center;*/
	/*background: #76b0ff url("../img/sob_bg_clear_bg.png");*/
	background: #000000 url("../img/pattern_grid_green.png");
	background: #000000 url("../img/pattern_sob_bg_icon_green.png");
	background-position: center;
	background-position-y: top;
	background-attachment: scroll;
	color: #FFF;

	font-family: 'Inter', serif;
}

#bg-float-container {
	/*background: rgba(255, 0, 0, 1.0);*/
	width: 100%;
	height: 100%;

	position: fixed;
	left: 0; top: 0;
	margin: 0; padding: 0;

	z-index: -100;

	transform-style: preserve-3d;

	perspective: 0px;

	perspective-origin: 50% 50%;
}

#bg-float {
	background: transparent url("../img/pattern_grid_green.png");

	width: 100%;
	height: 1000%;

	position: absolute;
	left: 0; top: 0;
	margin: 0; padding: 0;
}

header.welcome {

    /*padding: 100px 0;*/

}

a:link {
	color: #52E1CA;
	text-decoration: none;
	
	-webkit-transition: all 0.2s ease-out; 
	-moz-transition: all 0.2s ease-out; 
	-o-transition: all 0.2s ease-out; 
	-ms-transition: all 0.2s ease-out;
}
a:visited {
	text-decoration: none;
	color: #52E1CA;
}
a:hover {
	text-decoration: none;
	color: #FF3401;
}
a:active {
	text-decoration: none;
	color: #FF9900;
}

.navbar {
	background: #000;
	border-bottom: 6px solid #FF7C00;

	/*box-shadow: 0px 8px 0px 0px rgba(0,0,0,0.3);*/

	padding: 0.25rem 1rem;

	min-height: 120px;
}

.navbar-brand {
	min-width: 250px;
	margin: 0;

	font-size: 36px;
	font-weight: bold;

	color: #FF7C00 !important;
}

.navbar-brand:hover {
	color: #F7BD19 !important;
}

.navbar-brand a {
	color: #FF7C00 !important;
}

.navbar-brand a:hover {
	color: #F7BD19 !important;
}

.navbar-brand-left
{
	float:left;
	width: 88px;
	height: 88px;
	text-indent: center;
}

.navbar-brand-left img {
	width: 88px;
	height: 88px;
}

.navbar-brand-right
{
	float:left;
	line-height: 18px;
	margin-left: 12px;
	margin-top: 24px;
}

.navbar .nav-slogan {
	font-weight: lighter;
	font-size: 14px;
	color: #FF7C00;
	display: inline !important;
}

.nav-item {
	border: 3px solid #FF7C00;
	/*height:50px;*/

	font-weight: bold;
	font-size: 24px;

	border-radius: 14px;
	margin-right: 20px;

	transition: all 2.0 ease-out;
}

.nav-item:hover {
	border: 3px solid #00FF7A;
}

.navbar-dark .navbar-nav .nav-link {
	color: #FF7C00;
	padding-top:0;
	padding-bottom: 0;
}

.navbar-dark .navbar-nav .nav-link:hover {
	color: #00FF7A;
}

.page {
	/*padding: 100px 0;*/
}

.page-top{
	height: 80px;.title
}

.page-bottom{
	height: 40px;
}

.backdrop {
	background: transparent;
	position: absolute;
	left: 0; top: 0;
	right:0; bottom:0;
	width: 100%;
	height: 100%;
	margin: 0; padding: 0;

	z-index: -100;

	transition: all 0.2s ease-out; 
}

/* SECTIONS */

.title {
	background: #000;

	font-size:32px;
	font-weight: bold;
	color:#FF3401;
	text-transform: uppercase;
	
	padding:8px;
	border: 3px solid #FF3401;
	border-radius: 14px;

	width: max-content;
	margin:20px auto;

	box-shadow: 6px 6px 0 0 #FF3401;
}

.work-list-thumb-title123 {
	background: #000000;

	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

	width: max-content;
	margin:auto;
	display:block;
	text-align: center;
	font-size: 36px;
	line-height: 36px;
	color:#F7BD19;
	padding:8px;

	text-shadow: 3px 2px 2px rgba(0,0,0,1);
	text-transform: uppercase;

	
	/*height:50px;*/

	
	/*font-size: 24px;*/

	
}

/* HOME */

.home-container {
	display:flex;
	align-items: center;

	overflow: hidden;
	position: relative;

	font-size: 24px;
	font-weight: bold;
	text-shadow: 3px 2px 0px rgba(0,0,0,1);

	box-shadow: 0px 10px 0 0 rgba(75,105,157,0.6);
	border: 9px solid rgba(0,0,0, 1.0);

	border-radius: 50px;

	margin-bottom: 20px;
}

.home-container a {
	width: 100%;
	height: 100%;
	margin: auto;

	color: #FFF;
}


.home-container p {
	background: rgba(0,0,0,0.8);
	padding: 6px 20px;
	border-radius: 50px;
}

.home-container .home-bg {
	width: 100%;
	height: 100%;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	position: absolute;
	z-index: 0;
	pointer-events: none;

	background: rgba(255,255,255,0.0);

	transition: all 0.2s ease-out; 
}

.home-container:hover  .home-bg {
	background: rgba(255,255,255,0.2);
}

.home-content {
	display:flex;
	align-items: center;
	width: 100%;
	height: 100%;
}


.home-select {
	margin:auto;
}

.home-top {
	height: 400px;
	background:  #222 url("../img/sob_bg_clear.png");

	border-radius: 150px;

	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.home-left {
	height: 200px;
	background:  #444 url("../img/sob_bg_clear.png");

	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.home-right {
	height: 200px;
	background:  #333 url("../img/sob_bg_clear.png");

	background:  #333 url("../img/sonofbryce_vrla_2018.png");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* REEL */

.vidHeaderContainer {
	background: rgba(0,0,0, 0.3);
}

.vidHeadingText {
	padding: 0 20px;
	padding-top: 20px;
}

.reels .btn {
	margin: 0.2rem;
}

.reels .container {
	background: #333 url("../img/sob_bg_clear.png");
	padding: 20px 0;
}

.work-list-reel {
	background: #000;
	/*border: 5px solid #000;*/
	border: 9px solid #FF7C00;

	height: 300px;
	overflow: hidden;

	border-radius: 200px;

	/*box-shadow: 0px 10px 0 0 rgba(75,105,157,0.6);*/

}

.work-list-reel:hover .work-list-thumb-bg {
	transform: scale(1.1);

	opacity: 1.0;
}

.work-list-reel-content {
	width: 100%;
	height: 100%;
	text-align: center;
	display:flex;
	align-items: center;

	border-radius: 200px;

	position: absolute;
	left: 0;
	top: 0;
}

.work-list-reel-content span {
	margin: auto;

	text-align: center;
	font-size: 24px;
	line-height: 36px;

	text-shadow: 2px 2px 0px rgba(0,0,0,1);
}

/* WORK */

.work-list {
	/*opacity: 0.1;*/
}

.work-list-col h2 {
	font-weight: bold;
}

.work-list-col h4 {
	font-weight: bold;
}

.work-list-col .work-list-header {
	background: #000;
	/*font-size: 32px;*/
	font-weight: bold;
	color: #00FF7A;
	text-transform: uppercase;
	padding: 8px;
	border: 3px solid #00FF7A;
	border-radius: 14px;
	width: max-content;
	margin: 20px auto;

	box-shadow: 3px 3px 0 0 #00FF7A;
}

.work-list-col {
	padding: 0;
}

.work-list-thumb {
	/*max-width: 500px;*/
	margin:0 0 80px 0;

	overflow: hidden;
	/*padding: 150px 0;*/
	position: relative;
	background: #000;
	/*border: 5px solid #000;*/
	border: 9px solid #FF7C00;

	/*box-shadow: 10px 10px 0 0 rgba(0,0,0, 0.8) inset;*/

	height: 400px;
}

.work-list-thumb a:link {
	color: #FFF;
	text-decoration: none;
	
	transition: all 0.2s ease-out; 
	-webkit-transition: all 0.2s ease-out; 
	-moz-transition: all 0.2s ease-out; 
	-o-transition: all 0.2s ease-out; 
	-ms-transition: all 0.2s ease-out;
}
.work-list-thumb a:visited {
	text-decoration: none;
	color: #FFF;
}
.work-list-thumb a:hover {
	text-decoration: none;
	color: #FFF;
}
.work-list-thumb a:active {
	text-decoration: none;
	color: #FFF;
}

.work-list-thumb-inner {
	
}

.work-list-thumb:nth-child(odd) {
	border-top-right-radius: 200px;
	border-bottom-right-radius: 200px;
	margin-right: 3%;
	/*margin-left: -3%;*/

	border-left: none;

	/*box-shadow: 0px 10px 0 0 rgba(255,255,255,0.8);*/
}

.work-list-thumb:nth-child(even) {
	border-top-left-radius: 200px;
	border-bottom-left-radius: 200px;
	margin-left: 3%;
	/*margin-right: -3%;*/

	border-right: none;

	/*box-shadow: 0px 10px 0 0 rgba(75,105,157,0.8);*/
}

.work-list-thumb-title {
	background: #000000;

	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

	width: max-content;
	margin:auto;
	display:block;
	text-align: center;
	font-size: 36px;
	line-height: 36px;
	color:#F7BD19;
	padding:8px;

	text-shadow: 3px 2px 2px rgba(0,0,0,1);
	text-transform: uppercase;

	border: 3px solid #FF7C00;
	/*height:50px;*/

	font-weight: bold;
	/*font-size: 24px;*/

	border-radius: 14px;

	box-shadow: 6px 6px 0 0 #FF7C00;
}

.work-list-thumb-info {
	font-size: 20px;
	font-style: italic;
	font-weight: lighter;
}

.work-list-thumb img {
	/*
	max-width:100%;
	height: auto;
	*/
}

.work-list-thumb-bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.7;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	/*
	position: absolute;
	
	position: static;
	z-index:-1;
	*/

	transition: all 0.4s ease-out; 
}

.work-list-thumb:hover .work-list-thumb-bg {
	transform: scale(1.1);

	opacity: 1.0;
}

/*
.work-list-thumb:hover ~ .backdrop{
	background: rgba(255,255,255,0.5);
	opacity: 0.5;
}
*/

.more-work-btn {
	color: #FFF;

	width: 250px;
	height: 100px;
	margin: auto;
	background: #ffcc05;
	background: #2e59d9  url("../img/sob_bg_clear.png");
	text-align: center;
	position: relative;
	border-radius: 50px;

	display:flex;
	align-items: center;

	font-size: 26px;
	font-weight: bold;
	text-transform: uppercase;

	cursor:pointer;

	border-radius: 100px;
	border: 3px solid #000;

	background: #000000 url("../img/pattern_grid_dots_orange.png");
	border: 2px solid #FF7C00;
	padding: 20px;
	
	/*padding:8px;*/
	border: 3px solid #FF3401;

	width: max-content;
	margin:20px auto;

	transition: all 0.2s ease-out; 
	-webkit-transition: all 0.2s ease-out; 
	-moz-transition: all 0.2s ease-out; 
	-o-transition: all 0.2s ease-out; 
	-ms-transition: all 0.2s ease-out;
}

.more-work-btn:hover {
	background: #FF3401;
	color: #000;
}

.more-work-btn div {
	margin: auto;
}

.more-work-btn:visited {
	/*color: #FFF;*/
}


/* MORE WORK */

.work-list-thumb-title-more {
	/*background:  #333 url("../img/sob_bg_clear.png");*/
	background: #000000 url("../img/pattern_grid_dots_orange.png");
	border: 3px solid #FF7C00;
	margin: 10px;
	margin-bottom: 40px;
	padding: 15px;
	border-radius: 16px;
	text-align: center;
	box-shadow: 6px 6px 0 0 #FF7C00;
}

.work-list-thumb-more {
	/*margin:0 40px 80px 40px;*/
	/*margin: 10px;*/

	overflow: hidden;
	/*float: left;*/
	/*background: #000;*/
	/*border: 5px solid #000;*/

	/*box-shadow: 10px 10px 0 0 rgba(0,0,0, 0.8) inset;*/

	/*
	min-height: 300px;
	min-width: 300px;
	*/
}

.work-list-thumb-more .more-thumb {
	padding-bottom:100%; overflow:hidden; position:relative;
}

.work-list .col-lg-4:nth-child(odd) .work-list-thumb-more .more-thumb img {
	/*box-shadow: 0px 10px 0 0 rgba(255,255,255,0.8);*/
}

.work-list .col-lg-4:nth-child(even) .work-list-thumb-more .more-thumb img {
	/*box-shadow: 0px 10px 0 0 rgba(75,105,157,0.8);*/
}

.work-list-thumb-more .more-thumb img {
	position: absolute;
	left:0; right: 0; top: 0; bottom: 0;
	margin:auto;
	object-fit: cover;
	border: 6px solid #FF7C00;
	background: #333;
}

.work-list-thumb-more h6 {
	font-weight: bold;
	margin-bottom: .25rem;
}

.work-list-thumb-more p {
	margin: 0;
}

/* WORK CONTENT */

.work-content .page-content {
	/*background: #333 url("../img/sob_bg_clear.png");*/
	background: #000000 url("../img/pattern_grid_dots_orange.png");
	border: 2px solid #FF7C00;
	padding: 20px;

	line-height: 26px;
}

.work-content h3 {
	font-weight: bold;
	text-shadow: 2px 2px 0px rgba(0,0,0,1);
}

.work-content .page-description {
	font-style: italic;
}

.work-content img {
	max-width: 100%;
	height: auto;
}

.work-content video {
	max-width: 100%;
	height: auto;
}

/* ABOUT */

.about-cover-image {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.about-description {
	/*background:  #333 url("../img/sob_bg_clear.png");*/
	background: #000000 url("../img/pattern_grid_dots_orange.png");
	border: 2px solid #FF7C00;
	padding: 20px;
	font-size: 24px;
	font-style: italic;
	text-align: center;

	/* CENTER TEXT */
	display:flex;
	align-items: center;
}

.about-description-text {
	/* CENTER TEXT */
	margin: auto;
}

.about-content {
	/*background:  #333 url("../img/sob_bg_clear.png");*/
	background: #000000 url("../img/pattern_grid_dots_orange.png");
	border: 2px solid #FF7C00;
	padding: 20px;
	margin: 10px 0;
}

.about-content p {
	/*text-indent: 12px;*/
}

.about-content img {
	max-width: 100%;
	height: auto;
}

/* FOOTER */

footer {
	background: #000;
	min-height: 120px;
	border-top: 6px solid #FF7C00;
}

.footer-content {
	margin-top: 24px;
	padding: 12px;
	text-align: center;

	font-size: 24px;
	font-weight: lighter;
	color: #00FF7A;
}

.footer-content em {
	color: #CCC;
	font-size: 12px;
}


/* ---------------------------- */


.navbar .title {
	padding-left: 1.5em;
	float:left;
}

.vidHidden {
	display: none;
}

.projects img {
	border:#454545 thin solid;

	-webkit-transition: all 0.2s ease-out 0s;
	transition: all 0.2s ease-out 0s;
}

.projects img:hover {
	border:#FFF thin solid;
}

#aboutme p
{
	text-indent: 1.0rem;
}

#contentModal .images
{
	text-align: center;
}

#contentModal .images a {
	padding:0.2em;
}

#contentModal .images a img {
	border:#454545 thin solid;

	-webkit-transition: all 0.2s ease-out 0s;
	transition: all 0.2s ease-out 0s;
}

#contentModal .images a img:hover {
	border:#FFF thin solid;
}

/* AVATAR */

@-webkit-keyframes spin {
	from { -webkit-transform: rotateX(15deg) rotateY(0); }
	to { -webkit-transform: rotateX(15deg) rotateY(-360deg); }
}

@keyframes spin {
	from { transform: rotateX(15deg)  rotateY(0); }
	to { transform: rotateX(15deg)  rotateY(-360deg); }
}

.avatarContainer {
	-webkit-perspective: 800px;
	-webkit-perspective-origin: 50% 50px;
	
	perspective: 800px;
	perspective-origin: 50% 50px;
	
	margin: 0 auto;
	
	/*width: 88px;*/
	height: 88px;
	transform: scale(0.75, 0.75);

	float:left;
}

	.avatar {
		position: relative;
		width: 88px;
	
		-webkit-transform-style: preserve-3d;
		-webkit-animation: spin 5s infinite linear;

		transform-style: preserve-3d;
		animation: spin 5s infinite linear;
	}

	.avatar div {
		position: absolute;
		width: 88px;
		height: 88px;
	}
		.avatarContainer .react {
			-webkit-transition: opacity 0.5s ease-out 0s;
			transition: opacity 0.5s ease-out 0s;
			opacity:1;
	
			z-index: 101;
		}

		.avatarContainer .react:hover {
			/*opacity:0;*/
		}

		/*
		.avatarContainer .hidden {
			z-index: 100;
		}

		.avatarContainer:hover .hidden {
			
		}
		*/

		.back {
			-webkit-transform: translateZ(-44px) rotateY(180deg);
	
			transform: translateZ(-44px) rotateY(180deg);
			background: #FFF;
		}
		.right {
			-webkit-transform: rotateY(-270deg) translateX(44px);
			-webkit-transform-origin: top right;
	
			transform: rotateY(-270deg) translateX(44px);
			transform-origin: top right;
			background: #CCC;
		}
		.left {
			-webkit-transform: rotateY(270deg) translateX(-44px);
			-webkit-transform-origin: center left;
	
			transform: rotateY(270deg) translateX(-44px);
			transform-origin: center left;
			background: #CCC;
		}
		.top {
			-webkit-transform: rotateX(-90deg) translateY(-44px);
			-webkit-transform-origin: top center;
	
			transform: rotateX(-90deg) translateY(-44px);
			transform-origin: top center;
			background: #000;
		}
		.bottom {
			-webkit-transform: rotateX(90deg) translateY(44px);
			-webkit-transform-origin: bottom center;
	
			transform: rotateX(90deg) translateY(44px);
			transform-origin: bottom center;
			background: #000;
		}
		.front {
			-webkit-transform: translateZ(44px);
	
			transform: translateZ(44px);
			background: #FFF;
		}


.avAnon {
	background: #000 url("../images/avatar_anon.png") no-repeat center center;
}

.avAnonSide {
	background: #000 url("../images/avatar_anon_side.png") no-repeat center center;
}

.avBryson {
	background: #000 url("../images/avatar_bryson.png") no-repeat center center;
}

.avBrysonSide {
	background: #000 url("../images/avatar_bryson_side.png") no-repeat center center;
}

.avBryson2 {
	background: #000 url("../images/avatar_bryson2.png") no-repeat center center;
}

.avBryson2Side {
	background: #000 url("../images/avatar_bryson2_side.png") no-repeat center center;
}

/* MAGNIFIC POPUP */

.mfp-bg
{
	z-index: 1600;
}
.mfp-wrap
{
	z-index: 1601;
}


/* BOOTSTRAP */

.jumbotron {
    padding-top: 6rem;
    padding-bottom: 6rem;
    margin-bottom: 0;
    background-color: #fff;
}

.projects .col-lg-4
{
	margin-bottom: 1.5rem;
	text-align: left;
}

.projects .col-lg-3
{
	margin-bottom: 1.5rem;
	text-align: left;
}

.projects .col-lg-4 img
{
	cursor:pointer;
}

.projects .col-lg-3 img
{
	cursor:pointer;
}

.modal-content
{
	background-color:#334;
}

.modal-content .modal-body img {
	max-width: 375px;
	height: auto;
}

.modal-lg {
	max-width: 870px;
}