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