File: D:/HostingSpaces/SBogers10/boldt.komma.pro/resources/sass/site/7-Templates/_templates.home.scss
#home {
.full-width-image {
position: absolute;
display: block;
z-index: -1;
height: calc(29vw + 192px);
max-height: 815px;
width: 100vw;
top: -192px;
left: 0;
overflow: hidden;
&:after {
content: '';
display: block;
height: 100%;
position: absolute;
z-index: 10;
top: 0;
background: -moz-linear-gradient(left, rgba(0,0,19,1) 0%, rgba(0,0,19,0) 10%, rgba(0,0,19,0) 90%, rgba(0,0,19,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(0,0,19,1) 0%,rgba(0,0,19,0) 10%,rgba(0,0,19,0) 90%,rgba(0,0,19,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(0,0,19,1) 0%,rgba(0,0,19,0) 10%,rgba(0,0,19,0) 90%,rgba(0,0,19,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000013', endColorstr='#000013',GradientType=1 ); /* IE6-9 */
width: 100%;
left: 0;
}
> iframe {
position: absolute;
display: block;
z-index: 0;
height: 56vw;
width: 100vw;
top: -9vw;
@include mq(1550){
top: -12vw;
}
}
}
.c-text-image.l-bisection--reversed.l-bisection--corners {
padding-top: 90px;
@include mq(900) {
width: column(13, 12);
}
.s-text {
@include mq(900) {
width: column(6, 12);
}
&:after {
content: '';
display: block;
height: calc(100% + 60px);
position: absolute;
top: -60px;
left: -50%;
width: 50%;
transform: translate(1px, 0); // needed to prevent line between SVG and div
background-image: url(/img/home-text-image-left-triangle.svg);
background-size: contain;
background-position: right 0;
background-repeat: no-repeat;
@include mq(null, 800) {
display: none;
}
}
}
.s-image {
width: calc(100% - 60px);
left: auto;
@include mq(800, 900) {
width: calc(100% - 56px);
left: -4px;
}
@include mq(900) {
width: column(7, 12);
left: auto;
}
}
}
}