Christmas Gift Fund Styles

  • September 28, 2017
  • By: Evan MacAlpine

#article-head.article-header {
opacity: 0;
text-indent: -9999px;
height: 0;
padding: 0;
}
.banner {
max-width: 1920px;
height: 1400px;
background: #222;
}
.banner .banner-img {
background-position: bottom center;
background-repeat: no-repeat;
background-size: 1920px;
z-index: 1;
}
.banner img {
width: 380px;
height: auto;
}
.banner h2 {
font-size: 28px;
line-height: 1.5;
margin-bottom: 15px;
color: #000;
}
.banner p.subtitle {
color: #000;
margin-bottom: 30px;
}
.banner img {
margin-top: 60px;
margin-bottom: 30px;
}
.banner img, .banner h2, .banner .donate-now, .banner p {
position: relative;
max-width: 600px;
margin-left: auto;
margin-right: auto;
z-index: 2;
}
.banner p {
margin-top: 10px;
color: #000;
font-size: 14px;
}
.donate-now .input-append, .donate-now .input-prepend {
max-width: 100%;
width: auto;
}
.block.video {
margin-top: -200px;
z-index: 3;
}
.block.video + .block {
padding: 60px 0;
}
.block.cgf-cta,
.block.cgf-cta-2 {
background-size: cover;
text-align: center;
background-position: center;
padding: 160px 0;
color: #FFF;
}
.block.cgf-cta{
background-image: url(https://webcdn-compassion-ca.s3.amazonaws.com/_2/img/christmas/cgf-footer.jpg);

}
.block.cgf-cta-2{
background-image: url(https://webcdn-compassion-ca.s3.amazonaws.com/_2/img/christmas/cgf-cta-2019.jpg);
}
.block.cgf-cta:before,
.block.cgf-cta-2:before {
content: ”;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.7);
}
.block.cgf-cta p.large,
.block.cgf-cta-2 p.large {
font-size: 28px;
font-weight: 300;
line-height: 1.5;
}
.block {
background: transparent;
}

.disclaimer svg {
float: left;
width: 200px;
height: 200px;
margin-right: 40px;
}
.disclaimer p {
padding-top: 20px;
}

@media only screen and (max-width: 800px) {
.block.video + .block { padding-top: 0;}
}
@media only screen and (max-width: 600px) {
.banner img, .banner h2, .banner .donate-now, .banner p {
padding-left: 20px;
padding-right: 20px;
}
}
@media only screen and (max-width: 480px) {
.banner { height: 1000px; overflow: hidden; }
.banner br { display: none; }
.banner .banner-img { background-position: top center; }
.banner img {width: 280px; box-sizing: border-box;}
.banner h2 { margin-bottom: 30px;}
.banner h2, .block.cgf-cta p.large { font-size: 20px; }
.disclaimer svg {
display: inline-block;
float: none;
margin-right: 0;
}
.disclaimer {
text-align: center;
}
.block.cgf-cta {
padding-top: 80px;
padding-bottom: 80px;
}
.block.video {padding: 0 0 20px 0; margin-top: 0;}
.block.video .inner { padding-left: 0; padding-right: 0; }
.block.video + .block {padding-bottom: 20px;}
.disclaimer svg {width: 128px; height: 128px;}
}