body {
   height: 100%;
   padding: 0;
   margin: 0;
   background-color: rgba(242, 237, 246, 1) !important;
}

#about-text {
   position:relative;
   color:rgba(50, 50, 50); 
   font-family: Palatino; 
   font-size: 15px; 
   letter-spacing: 1px !important;
}

.about-img {
  padding: 0;
  display: block;
  margin: 0 auto;
  max-height: 100%;
  max-width: 100%;
}

#twod-art-wrapper{
 display:flex;
 justify-content:space-between;
}

.vert {
  position: relative;
  top: 50%;
  transform: translateY(-50%); /* or try 50% */
}

.twod-art {
  width:100%;
  max-width:296px;
  padding-bottom: 200px !important
}

.hero {
	position: absolute; 
	height: 100%;
	width: 100%;
}

.hero::before {    
	content: "";
	background-image: url('art/serenity1.jpg');
	background-size: cover;
	position: fixed;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	opacity: 0.0;
}

.navbar-brand {
	font-size: 45px !important;
	font-family: Palatino;
   font-weight: 800;
	padding-left: 5%;
	padding-top: 1% !important;
	padding-bottom: 0% !important
}

.navbar-nav > li{
	padding-left:20px;
	padding-right:20px;
}

#navbar-custom {
   background-color: rgba(123, 101, 148, 0) !important; 
   font-family: Palatino;
   font-size: 20px !important;
   letter-spacing: 1px !important;
}

.navbar-nav>.active>a {
   color: rgba(160, 127, 200) !important;
   font-weight: bold !important;
}

.nav-link{
   color: rgba(0,0,0) !important;
}

.nav-item > a:hover {
   transition: color .5s;
   color: rgba(220, 203, 255) !important;
}

.navbar-nav {
   color:rgba(0,0,0) !important;
}

.demo-reel-text {
	color:rgba(50,50,50); 
	font-family: Palatino;
	font-size: 15px; 
	letter-spacing: 1px;
}

.twodart_navbar_text {
   color:rgba(0, 0, 0); 
   font-family: Papyrus,fantasy;
   font-size: 20px; 
   letter-spacing: 1px;
}

.link:link {
   color: rgba(160, 127, 200) !important;
   font-weight: bold;
   text-decoration: none;
   display: inline-block;
   border-bottom: 1px solid;
   line-height: .8em;
}

.link:hover {
   transition: color .5s;
   color:rgba(210,210,210);
   text-decoration: none;
   display: inline-block;
/*   border-bottom: 1px solid;
line-height: .8em;*/
}

.link:visited {
   color: rgba(160, 127, 200) !important;
   text-decoration: none;
   display: inline-block;
/*   border-bottom: 1px solid;
line-height: .8em;*/
}

.selected {
   color:rgba(160,160,160);
   display: inline-block;
/*   border-bottom: 1px solid;
line-height: .8em;  */ 
}

.underline:hover{
   transition: color .5s;
   color:rgba(210,210,210);
   display: inline-block;
/*   border-bottom: 1px solid;
line-height: .8em;*/
}


/* modal style */

/* Style the Image Used to Trigger the Modal */
.twod_img {
   cursor: pointer;
   transition: 0.3s;
   background-color: #00000 !important;
   margin-right: 10px;
   margin-bottom: 10px
}

.twod_img:hover {
   opacity: 0.7;
}

/* The Modal (background) */
.modal {
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
   z-index: 1; /* Sit on top */
   padding-top: 100px; /* Location of the box */
   padding-bottom: 100px; /* Location of the box */
   left: 0;
   top: 0;
   width: 100%; /* Full width */
   height: 100%; /* Full height */
   overflow: auto; /* Enable scroll if needed */
   background-color: rgb(0,0,0); /* Fallback color */
   background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
   margin: auto;
   object-fit: contain;
   max-width: 100%;
   height:700px !important;
   background-color: rgba(0,0,0,0) !important;
   width: auto;
   height: auto;
}


#caption {
   margin: auto;
   display: block;
   width: 80%;
   max-width: 700px;
   text-align: center;
   color: #ccc;
   height: 50px;
   font-family: Palatino;
}


@keyframes zoom {
   from {transform:scale(0)}
   to {transform:scale(1)}
}

/* The Close Button */
.close {
   position: absolute;
   top: 15px;
   right: 35px;
   color: #f1f1f1;
   font-size: 40px;
   font-weight: bold;
   transition: 0.3s;
}

.close:hover,
.close:focus {
   color: #bbb;
   text-decoration: none;
   cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
   .modal-content {
      width: 100%;
   }
}



/* relevant styles */
.img__wrap {
   position: relative;
   display: inline-block;
   margin-bottom: 10px
}

.img__img {
   vertical-align: bottom;
}

.img__description_layer {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background: #000;
   color: #fff;
   visibility: hidden;
   opacity: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: opacity .2s, visibility .2s;
   font-family: Palatino;
}

.img__wrap:hover .img__description_layer {
   visibility: visible;
   opacity: .8;
}


.img__img:hover {
   visibility: visible;
}


.img__description {
   transition: .2s;
   transform: translateY(1em);
   text-align: center;
   font-size:min(20px, calc(1vw + 1vh));
   margin-right:10px;
   margin-left:10px;
   margin-top: 15px;
}

.img__wrap:hover .img__description {
   transform: translateY(0);
}

#caption span {
 font-style: italic;
}