/* 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: 40%; opacity: 0; z-index: 1; transition: .3s; text-align: center; color: #FFF;
}
.single-content:hover .text-content{
opacity: 1; transition-delay: .3s;
}