.background {background-color: #fbfbfb;}

.navbar {
font-family: "Sofia Pro", Helvetica, sans-serif;
font-size: 2.3em;
color:#342B50;
background-color: #342B50;
margin-right:0em;
padding: 0rem 1rem;
}

.navbar-light .navbar-brand {
font-family: "Sofia Pro", Helvetica, sans-serif;
font-size: 1.5em;
font-weight: bold;
color:#342B50;
}

.navbar-brand{
	margin-right: 1em;
	margin-left: 1em;
	padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 30px !important;
}

.navbar-light .navbar-nav .nav-link {
    color: #342B50;
    padding-left: 0.5em;
}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    color: #342B50;
    font-weight: bold;
}

.navbar-toggler {
    border: 0px solid transparent;
    padding: .25rem .5rem;
    color: #342B50;
}

.navbar-toggler-icon{
	width: 2em;
	height: 2em;
}

#active{
	color: #F0FF6E;
}

h1{
font-family: "Sofia Pro", Helvetica, sans-serif;
font-size: 3em;
font-weight: bold;
text-align: center;
margin: 0.5em;
margin-bottom: 1.5rem;
margin-top: 1.5rem;
color:#A9B7DB;
}

.projectHeading{
	margin:0em;
}

h2{
font-family: "Sofia Pro", Helvetica, sans-serif;
font-size: 3em;
font-weight: bold;
text-align: center;
margin: 0em;
margin-bottom: 1rem;
color:#A9B7DB;
}

.emailHeading{
font-size: 2.2em;
}

h3{
font-family: "Sofia Pro", Helvetica, sans-serif;
font-size: 2.2em;
font-weight: bold;
text-align: center;
margin: 0.5em;
margin-bottom: 0.5rem;
margin-top: 1rem;
color:#A9B7DB;
}

p{
font-family: "Sofia Pro", Helvetica, sans-serif;
font-size: 1.3em;
font-weight: regular;
text-align: center;
color: #342B50;
margin-bottom: 1rem;
}

.text{
font-family: "Sofia Pro", Helvetica, sans-serif;
font-size: 1.5em;
font-weight: bold;
text-align: center;
color:#342B50;
}

.container{
margin-top: 0em;
}

.border{
	border-style-top:solid;
	border-color: #a4243b;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.reelBorder{
	margin-top: 0.5rem;
}

.VMlogo{
	margin-top: 0.2em;
	margin-bottom: 0.2em;
	margin-left: 0.75em;
	align-items: bottom;
}

.SMfooter{
	padding: 0.8em;
	padding-top: 0em;
	margin: auto;

	
}

.btn:not(:disabled):not(.disabled):hover {
    cursor: pointer;
    color: #A9B7DB;
}

.btn{
	color: #342B50;
	font-size: 2rem;
}

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0rem;
}

.thumbnail{

}

.modal-body {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0rem;
}

.illustrationGallery{
	padding: 0.3rem;
}

.illustrationGallery:hover{
    transition: .5s ease;
    filter: grayscale(80%);

}

.projectContainer{
	    max-width: 1500px;
}

.illustrationContainer{
	    max-width: 1500px;
}



.projectBorder{
	margin-top: 1rem;
	margin-bottom: 1.5rem;
}

.project1-img{
	margin-top: 1.75rem;
	margin-bottom: 0.95rem;
}

.project1-img-middle{
	margin: 0.5rem 0rem;
}

.project1-img-end{
	margin-top: 1rem;
	margin-bottom: 1.75rem;
}

.aboutportrait{
	max-width: 85%;
	padding-top:1.75rem;
	padding-bottom: 1.25rem;
	padding-left: 3rem;
}

.emailbutton{
	color:#fbfbfb;
	background-color:#30162d;
	border-color: #30162d;
	padding: 1.25rem;
}

#emailbutton:hover{
	background-color:#b9a6c9;
	border-color:#b9a6c9;
	color: #fbfbfb;
}

.buttonmargin{
	margin-top: 1.5rem;
}

.player{
	margin-bottom: 1.5rem;
}

/* Container needed to position the overlay. Adjust the width as needed */
.projectImageContainer{
	display: block;
  	width: 100%;
  	height: auto;
}

/* Make the image responsive */
.projectImage{
	display: block;
  	width: 100%;
  	height: auto;
}

/* The overlay effect - lays on top of the container and over the image */
.projectOverlay{
	position: absolute;
  	background: rgb(0, 0, 0);
  	background: rgba(0, 0, 0, 0.8); /* Black see-through */
  	color: #30162d;
  	width: 98.8%;
  	transition: .5s ease;
  	opacity:0;
  	color: #fbfbfb;
  	/*font-weight: bold;*/
  	font-family:"Sofia Pro", Helvetica, sans-serif ;
  	font-size:  1.5em;
  	padding: 1rem 0rem;
  	text-align: center;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
}

/* When you mouse over the container, fade in the overlay title */
.projectImageContainer:hover .projectOverlay{
	opacity: 1;
}

.PnS_center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.PnS{
	margin-bottom: 0rem;
}