Template:Calgary/HP-Content-Style

/* 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: 5px;

}

.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;

}