@charset "UTF-8";
/* CSS Document */

body {
	background-color: #000000;
	color: white;
	font-family: 'Montserrat', 'Oswald', 'Poppins', sans-serif;


}

#name {
	font-size:80px;
	color:red;
	}


#job {
	font-family: 'Oswald', sans-serif;
	font-size:40px;
	}


.portfolio {
	padding-left:200px;
	padding-right:200px;
}

ul.navlist {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #000000;
    font-style: italic;
}

li.navlistItem {
    float: left;
	 /* border-right: 1px solid #bbb; */
}

li.navlistItem a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li.navlistItem a:hover {
   /*  background-color: #111; */
    color: red;
    transition:0.75s;
}

/* li.navlistItem:last-child{
	border-right: none;
	border-left: 1px solid #bbb;
} */

h1 {
   text-align: center;
	text-decoration: underline;
}

.video {
	border: 0px solid #bbb;
	padding-bottom: 10px;
}

.box {
  float: left;
  border: 1px solid #bbb;
  padding: 5px;
}

/*.project
{
    display: inline-block !important;
}
*/
.about {
text-align: center;
padding: 150px 0;
}

.awards {
text-align: center;
padding: 150px 150px;
font-family: 'Oswald', sans-serif;
color: #FFC300;
}

.accolade {
display: inline-block;
text-align: center;
margin: 20px;
padding: 5px;
cursor: pointer;
}

.accolade:hover {
color: white;
transition:0.25s;
}


/* 
.awardName{
cursor: pointer;
}

.awardName:hover {
color: white;
transition:0.25s;

}

*/

.dot {
  height: 10px;
  width: 10px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  margin-left: 30px;
  margin-right: 30px;
}

/*.awards{
column-count:3;
column-width: 150px;
}*/


/*___________ Javascript Identifiers ______________*/

.projectTrailer {
	display: inline-block !important;
}

.projectTrailerHidden {
	display:none;
}


.projectDig {
	display: inline-block !important;
}

.projectDigHidden {
	display:none;
}

.projectTV {
	display: inline-block !important;
}

.projectTVHidden {
	display:none;
}



/*___________ Animations ______________*/

.animA {
	transform: translateY(300px);
	animation: moveUp 0.65s ease forwards;
}

@keyframes moveUp {
	0% { opacity:0;}
	100% { transform: translateY(0); opacity: 1; }
}

.animB {
	transform: translateY(200px);
	animation: moveUp 0.55s ease forwards;
	}

@keyframes moveUp {
	0% { opacity:0;}
	100% { transform: translateY(0); opacity: 1; }
}

.animC {
	transform: translateY(100px);
	animation: moveUp 0.75s ease forwards;
}

@keyframes moveUp {
	0% { opacity:0;}
	100% { transform: translateY(0); opacity: 1; }
}

.headerMain {
animation-name: fadeIn;
animation-duration: 1.5s;
animation-timing-function: ease;
}

@keyframes fadeIn {
	0% {opacity:0;}
	100% {opacity:1;}
}





/*___________ First Attempt at Popups - too complicated ______________*/

/*.popup {
position:fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transition: 200ms ease-in-out;
border: 1px solid black
border-radius: 10px;
z-index: 10;
background-color: white;
width: 640px;
height: 360px;
max-width: 80%;
}

.popup.active {
transform: translate(-50%, -50%) scale(1);}

#overlay {
position:fixed;
opacity: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: (5,5,5, .5);
pointer-events: none;
transition: 200ms ease-in-out;

}

#overlay.active {
opacity: 1;
pointer-events: all;
}
*/



/*___________ Project Hover Opacity and Text ______________*/


.project {
   position:relative;
	text-align: center;
	cursor: pointer;
	padding-bottom: 5px;
	

}

.hvrtext {
	opacity:0;
	font-family: 'Montserrat', sans-serif;
	font-size:25px;
	position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
	cursor: pointer;
}

.hvrimg {
	opacity:0;
	position: absolute;
   top: 75%;
   left: 35px;
   transform: translate(-50%, -50%);
	cursor: pointer;
}

.hvrimgb {
	opacity:0;
	position: absolute;
   top: 75%;
   left: 365px;
   transform: translate(-50%, -50%);
	cursor: pointer;
}

.hvrNote {
	opacity:0;
	position: absolute;
   top: 92%;
   left: 115px;
   transform: translate(-50%, -50%);
	cursor: pointer;
	text-align: left;

}

.project:hover .hvrtext {	
	opacity:1;
  	transition: 0.75s;
	cursor: pointer;
	
}

.project:hover .hvrimg {	
	opacity:1;
  	transition: 0.75s;
	cursor: pointer;
	
}

.project:hover .hvrimgb {	
	opacity:1;
  	transition: 0.75s;
	cursor: pointer;
	
}

.project:hover .hvrNote {	
	opacity:1;
  	transition: 0.75s;
	cursor: pointer;
	
}

.project:hover .hoverable {
	opacity: .15;
   transition: 0.5s;
	cursor: pointer;
}


/* losing the underline and blue color for links */ 
a:link {
    color: white;
}

/* visited link */
a:visited {
    color: white;
}

/* mouse over link */
a:hover {
    color: white;

}

/* selected link */
a:active {
    color: white;

}

a:link {
    text-decoration: none;

}

a:visited {
    text-decoration: none;

}

a:hover {
    text-decoration: none;

}

a:active {
    text-decoration: none;

}



/*________ Bootstrap Modals (popup video)_________ */



	
.modal-content {
display:block;
margin-left:auto;
margin-right:auto;

}

.modal-fade{
display:block;
margin-left:auto;
margin-right:auto;
}


.modal-body {
background: #D3D3D3 !important;
border: 5px !important;
border-radius: 15px !important;
position: absolute;
left: 50%;
top: 50%;
margin-right: -50%;
max-height: 95vh;
max-width: 95vw;
overflow:auto;
-ms-overflow-style: none;  /* IE and Edge */
scrollbar-width: none;  /* Firefox */
transform: translate(-50%, -50%)


}

/* Hide scrollbar for Chrome, Safari and Opera */
.modal-body::-webkit-scrollbar {
    display: none;
}

.modal-backdrop
{
    opacity:0.85 !important;

}


.cats {
margin-top: 50px;
margin-bottom: 50px;
text-align: center;
font-size: 20px;
animation-name: fadeIn;
animation-duration: 1.5s;
animation-timing-function: ease;
}

.pillOption {
cursor: pointer;
color: #FFFFFF !important;
}

.pillOptionActive {
cursor: pointer;
color: #FF0000 !important;
}



.pillOption:hover {
color: #FF0000 !important;
transition:0.75s;
cursor: pointer;
}


/*
#pillOptionTV:hover {
color: #FF0000;
transition:0.75s;
cursor: pointer;
}

#pillOptionTheatrical:hover {
color: #FF0000;
transition:0.75s;
cursor: pointer;
}

#pillOptionDig:hover {
color: #FF0000;
transition:0.75s;
cursor: pointer;
}
*/

/*________ Shitty Old Hover CSS_________



/*.hoverable:hover {
	opacity: .15;
	
}

.text {
    display: none;
    position:absolute;
	bottom:250px;
    left:200px;


    color: white;
    font-weight: bold;
}
a:hover .text {
    display: block;
}​

.col-lg-2 {
	max-width:1000px;
}

.image {
  transition: .5s ease;
  backface-visibility: hidden;
  
}


.hvrbox .hvrbox-text {
	text-align: center;
	font-size: 18px;
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);

*/