Template:Calgary/Imposter-Test-Style

/* LANDING PAGE CSS Imposter-Test-Style*/

/* TEXT STYLING */ h1, h2, p {

 font-family: barlow;

}

.sub-heading {

 background: #1e6273;
 padding: 7vw 15vw;

}

.sub-heading h1 {

 color: #ff7700;
 font-weight: 200;

}

.sub-heading h2 {

 color: #fbf6f3;

font-weight: 200; }

.intro-body {

 background: #fbf6f3;
 padding: 4vw 15vw;

}

.intro-body p {

 color: #1e6273;
 font-size: 22;
 font-weight: 100;
 text-align: left;

}

.intro-body h1 {

 color: #ff7700;
 font-weight: 200;

}

/* 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;
 }

}

/* 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(
     rgba(0, 0, 0, 0.5),
     rgba(0, 0, 0, 0.5)
   ),
   url("");

 /* Set a specific height */
 height: 50vh;

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

}

/* Place text in the middle of the image */ .banner-text {

 text-align: center;
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 color: #882916;
 /* Simulates outlining the text */
 text-shadow: -0.5px -0.5px 0 #fbf6f3, 0.5px -0.5px 0 #fbf6f3,
   -0.5px 0.5px 0 #fbf6f3, 0.5px 0.5px 0 #fbf6f3;

}

.banner-text h1 {

 font-size: 11vh;

}

.banner-text h2 {

 font-size: 5vh;

}