.single-content { position: relative; transition: .3s; cursor: pointer; }
.single-content .text-content, .single-content:after{ position: absolute; left: 20px; right: 20px; }
.single-content:after{ content: ; display: block; background: #2E2E2E; top: 0px; bottom: 0px; left: 0px; right: 0px; opacity: 0; transition: .4s; transition-timing-function: ease-out; }
.single-content:hover:after{ opacity: .4; }
.text-content{ top: 40%; opacity: 0; z-index: 1; transition: .3s; text-align: center; color: #FFF; }
.single-content:hover .text-content{ opacity: 1; transition-delay: .3s; }
/*Modal styling section*/
.modal-body { background-color: #FFA600; }
.info { position: relative; background-color: #FFFFFF; margin-left: 2px; margin-right: 2px; margin-bottom: 5px; }
.subproj { position: relative; background-color: #FFFFFF; margin-left: 2px; margin-right: 2px; margin-top: 0px; margin-bottom: 5px; justify-content: center; }
.modal-pic { padding: 10px; padding-bottom: 20px; left: 50px; }
.md-row1 { padding-top: 10px; padding-left: 30px; height: 11%; }
.md-row2 { padding-left: 30px; margin-top: 5px; }
.md-row3 { padding-left: 30px; }
.md-row4 { padding-top: 15px; padding-left: 30px; color: #969696; }
.md-row5 { padding-left: 30px; color: #000000; font-size: 20px; }
.md-row6 { position: absolute; padding-top: 10px; padding-left: 30px; padding-right: 10px; width: 70%; top: 60%; }
.desc { background-color: #606060; margin-left: 2px; margin-right: 2px; color: #FFFFFF; border-radius: 5px; padding-left: 2px; padding-right: 2px; }
.title-row { margin: 0 auto; padding-top: 20px; height: 18%; }
.proj-row { padding-top: 20px; padding-bottom: 20px; }
.subproj-box { margin: 0px; margin-bottom: -40px; padding:0px; height: auto; }
/*Gallery styling section*/ .slideshow-container { max-width: 600px; position: relative; margin: auto; }
.mySlides { display: none; width: 600px; }
.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: #fbf6f3; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; }
.next { right: 0; border-radius: 3px 0 0 3px; }
.prev:hover, .next:hover { background-color: #423636; }
.dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; }
.active, .dot:hover { background-color: #423636; }
.fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; }
@-webkit-keyframes fade { from { opacity: 0.4; } to { opacity: 1; } }
@keyframes fade { from { opacity: 0.4; } to { opacity: 1; } }
/*change modal properties when screen is less than 1000px*/ @media screen and (max-width: 992px){ .md-row6 { padding-top: 10px; padding-left: 30px; padding-right: 10px; width: 70%; top: 60%; position: static; } }
.dots-div { justify-content: center; }