Template:Calgary/Human-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: 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: #FFFFFF;

}

.text-content h4{

 color: #FFF;

}

.single-content:hover .text-content{

 opacity: 1;
 transition-delay: .3s;

}

/*Modal styling sheet*/ .modal-body {

 background-color: #F0EADF;

}

.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: 20px;

}

.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: 20px;
 width: 100%;
 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;

}