/* GENERAL PAGE CSS */
/* FONT SET HERE - for jumbotron H1 */ @import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@500;600;700&display=swap');
/* TEXT STYLING */
h1, h2, h3, p {
}
li {color:#444444;}
/*header font size for tablet*/ @media(max-width: 768px){
.resp h1{ font-size:55px!important; }}
/*header font size for mobile*/ @media (max-width:525px){
.resp h1{ font-size:50px!important; }}
.intro-body {
vertical-align: center; background: ; padding: 7vw 10vw;
}
.intro-body p {
color: #444444; text-align: left;
}
.intro-body h2 {
color: black; font-weight: 200;
}
.intro-body h3 {
color: #882916;
}
.intro-body h4 {
color: #882916; font-weight: 100; font-size: 21px;
}
.intro-body img {
}
/* HEADER/BANNER */ body, html {
height: 100%;
}
/* The banner image */ .banner-image {
/* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */ background-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 100%), url("#");
/* Set a specific height */ height: 65vh;
/* Position and center the image to scale nicely on all screens */ background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; background-attachment: fixed;
}
/* Place text in the middle of the image */ .banner-text {
font-size: ; font-weight: ; color: ; text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.banner-text h1 {
color: #F1C23F; font-size: 5em; font-weight: 600; font-family: 'Public Sans', sans-serif; margin-top:25%;
}
/*Modal styling area*/ .main-pics {
padding: 2px;
}
.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: 35%; opacity: 0; z-index: 1; transition: .3s; text-align: center; color: #FFF;
}
.single-content:hover .text-content{
opacity: 1; transition-delay: .3s;
}
/*Modal styling sheet*/ .modal-body {
background-color: #FFA600;
}
.info {
position: relative; background-color: #FFFFFF; margin-left: 2px; margin-right: 2px; margin-bottom: 5px;
}
.new-row {
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: static; padding-top: 10px; padding-left: 30px; padding-right: 10px; padding-bottom: 50px; 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;
}