File: /var/www/vhosts/creativefellows.nl/nec.creativefellows.nl/public/scss/_page.scss
.page-section__rows-devider-bottom{
padding-bottom:1.5rem;
.section-row{
.grid-container{
position:relative;
margin-bottom:3rem;
padding-bottom:1.5rem;
&::after{content:"";position:absolute;bottom:0;left:$global-margin;right:$global-margin;border-bottom:solid 1px $light-gray;}
h3{color:$primary-color;}
.nec-blue{color:$secondary-color;}
ul li{position:relative;list-style:none;}
ul li::before{
@include list-chevron();
}
}
&:last-child .grid-container{
margin-bottom:0;
padding-bottom:0;
&::after{display:none;}
}
}
}
.section-row__row-no-border{
.page-row .grid-container{
margin-bottom:0;
padding-bottom:0;
&::after{display:none;}
}
}
.page-section__masthead-image{
position:relative;
height:35rem;
overflow:hidden;
.foreground{
width:100%;
position:absolute;
bottom:0;
left:0;
right:0;
z-index:10;
.grid-container{z-index:10;}
.text-wrapper{padding-bottom:1.5rem;}
h1{color:$primary-color;line-height:3rem;}
h1 + p{font-size:$lead-font-size;color:$white;font-weight:500;text-transform:uppercase;}
}
.text-wrapper{position:relative;}
.text-wrapper::after{
content:"";
width:1600px;
position:absolute;
top:-100%;
left:-650px;
bottom:0;
min-height:144px;
z-index: -1;
background: url(../images/mask-images.png) no-repeat 0% 0% !important;
}
.background{
z-index:0;
position: absolute;
top: 0;
width: 100%;
height: 100%;
left:0;
div{
position:absolute;
transition: transform 1.5s;
background-size: cover;
width: 100%;
height: 100%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mN8+R8AAtcB6oaHtZcAAAAASUVORK5CYII=);
background-position:50% 50%;
}
}
@include breakpoint(small only) {
height:auto;
padding:0;
.foreground{
padding-top:4.5rem;
position:relative;
.text-wrapper{
text-align:center;padding-bottom:0;
p{color:$secondary-color;font-size:1rem;}
br{display:none;visibility:hidden;}
}
.text-wrapper::after{display:none;}
}
.background{
position:relative;
height:12rem;
}
}
}
.page-section__masthead-video{
position:relative;
height:43rem;
overflow:hidden;
.foreground{
width:100%;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:10;
.grid-container,
.grid-x{z-index:10;height:100%;}
.text-wrapper{
text-align:center;
h1{font-size: 2rem;line-height: 3.5rem;color:$white;font-weight:bold;margin:1.5rem 0 0 0;}
h2{font-size: 5rem;line-height: 5.5rem;font-weight:300;color:$white;}
p{font-size: 1.5rem;color:$white;font-weight:500;}
p:last-child{margin:0;}
.button{margin-top:0.75rem;}
}
}
.background{
position:absolute;
top:0;right:0;bottom:0;left:0;
video{
width: 100%;
height: 100%;
object-fit: cover;
}
}
.background::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(43,45,51,0.5);
}
}
.page-section__no-margin{
margin:0;
padding:0;
}