Template:Calgary/Imposter-Description-Style

/* GENERAL PAGE CSS */ /* TEXT STYLING */ h1, h2, p {

 overflow-wrap: break-word;

}

 .main {
      margin-left: 160px; /* Same as the width of the sidebar */
      padding: 0px 0px;
      position: relative;
      top: -100px; /* To override the odd 
 tag bug */
    }

.description-body {

 vertical-align: center;
 background: ;
 padding: 7vw 6.5vw;

}

.description-body-map {

 background-image: url("");
 background-position: center top;
 /* Set a specific height */
 height: 50vh;
 width: 50vw;
 

 /* Position and center the image to scale nicely on all screens */
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 position: relative;

}

.description-body h2 {

 color: black;
 
 font-weight: 400;

}

.description-body h3 {

 color: #0197AE;
 font-size: 1.1em;
 font-weight: 425;

}

.description-body p{

 color: #444444; 
 

}

.Vitamin-A-Deficiency{

 padding-top: 80px;

}

.Our-Approach{

 padding-top: 80px;

}

.second-banner{

 background-color: #882916;
 
 

}

.second-banner p{

 color: white;
 font-size: 2.5vw
 width: 60%;
 
 
 

}

.emphasis {

 color: #ffa600;
 display: inline;

}

/* FOR THE FADE EFFECT ON THE HEADER TEXT */

1. fade {

 -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
 -moz-animation: fadein 2s; /* Firefox < 16 */
 -ms-animation: fadein 2s; /* Internet Explorer */
 -o-animation: fadein 2s; /* Opera < 12.1 */
 animation: fadein 2s;
 opacity: 0;
 animation-fill-mode: forwards;
 animation-delay: 0.5s;

}

1. fade-with-delay {

 -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
 -moz-animation: fadein 2s; /* Firefox < 16 */
 -ms-animation: fadein 2s; /* Internet Explorer */
 -o-animation: fadein 2s; /* Opera < 12.1 */
 animation: fadein 2s;
 opacity: 0;
 animation-fill-mode: forwards;
 animation-delay: 1.5s;

}

@keyframes fadein {

 from {
   opacity: 0;
 }
 to {
   opacity: 1;
 }

}

/* Firefox < 16 */ @-moz-keyframes fadein {

 from {
   opacity: 0;
 }
 to {
   opacity: 1;
 }

}

/* Safari, Chrome and Opera > 12.1 */ @-webkit-keyframes fadein {

 from {
   opacity: 0;
 }
 to {
   opacity: 1;
 }

}

/* Internet Explorer */ @-ms-keyframes fadein {

 from {
   opacity: 0;
 }
 to {
   opacity: 1;
 }

}

/* Opera < 12.1 */ @-o-keyframes fadein {

 from {
   opacity: 0;
 }
 to {
   opacity: 1;
 }

}

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

}