164 أسطر
3.4 KiB
SCSS
164 أسطر
3.4 KiB
SCSS
/******************************************************************************
|
|
Background
|
|
*******************************************************************************/
|
|
@keyframes moveclouds {
|
|
0% {margin-left: 100%;}
|
|
100% {margin-left: -100%;}
|
|
}
|
|
@-webkit-keyframes moveclouds {
|
|
0% {margin-left: 100%;}
|
|
100% {margin-left: -100%;}
|
|
}
|
|
@keyframes moveclouds2 {
|
|
0% {margin-left: 100%;}
|
|
50% {margin-left: 100%;}
|
|
100% {margin-left: -100%;}
|
|
}
|
|
@-webkit-keyframes moveclouds2 {
|
|
0% {margin-left: 100%;}
|
|
50% {margin-left: 100%;}
|
|
100% {margin-left: -100%;}
|
|
}
|
|
.background {
|
|
height: 100%;
|
|
left: 0;
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
|
|
.layer {
|
|
height: 100%;
|
|
left: 0;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.clouds {
|
|
overflow: hidden;
|
|
|
|
.cloud {
|
|
bottom: 0;
|
|
left: 0;
|
|
position: absolute;
|
|
-webkit-transform:translate3d(0,0,0);
|
|
transform:translate3d(0,0,0);
|
|
width: 100%;
|
|
will-change: transform;
|
|
}
|
|
.cloud-1 {
|
|
-webkit-animation: moveclouds 25s linear infinite;
|
|
animation: moveclouds 25s linear infinite;
|
|
}
|
|
.cloud-2 {
|
|
-webkit-animation: moveclouds 50s linear infinite;
|
|
animation: moveclouds 50s linear infinite;
|
|
}
|
|
.cloud-3 {
|
|
-webkit-animation: moveclouds2 35s linear infinite;
|
|
animation: moveclouds2 35s linear infinite;
|
|
}
|
|
}
|
|
|
|
.background-image {
|
|
-webkit-background-size: cover;
|
|
background-size: cover;
|
|
background-position: 50% 50%;
|
|
background-repeat: no-repeat;
|
|
|
|
&.page-bg-1 {
|
|
background-image: url(../content/img/page-bg-1.jpg);
|
|
+ .layer {
|
|
background-color: rgba(255, 255, 255, .4);
|
|
}
|
|
}
|
|
&.page-bg-2 {
|
|
background-image: url(../content/img/page-bg-2.jpg);
|
|
}
|
|
&.page-bg-3 {
|
|
background-image: url(../content/img/page-bg-3.jpg);
|
|
}
|
|
&.page-bg-4 {
|
|
background-image: url(../content/img/page-bg-4.jpg);
|
|
}
|
|
&.page-bg-5 {
|
|
background-image: url(../content/img/page-bg-5.jpg);
|
|
}
|
|
&.intro-bg {
|
|
background-image: url(../content/img/intro-bg.jpg);
|
|
}
|
|
&.underconstruction {
|
|
background-image: url(../content/img/under-bg.jpg);
|
|
}
|
|
}
|
|
|
|
.background-slider {
|
|
z-index: inherit !important;
|
|
.owl-stage-outer {
|
|
height: 100%;
|
|
|
|
.owl-stage {
|
|
height: 100%;
|
|
|
|
.owl-item {
|
|
height: 100%;
|
|
|
|
.item {
|
|
-webkit-background-size: cover;
|
|
background-size: cover;
|
|
background-position: 50% 50%;
|
|
background-repeat: no-repeat;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.background-overlay {
|
|
&.page-overlay-2 {
|
|
background-color: rgba(#000,.9);
|
|
}
|
|
&.page-overlay-3 {
|
|
background-color: rgba(#fff,.8);
|
|
}
|
|
&.page-overlay-4 {
|
|
background-color: rgba(#caddfe,.9);
|
|
}
|
|
&.page-overlay-5 {
|
|
background-color: rgba(#ceeff8,.9);
|
|
}
|
|
&.page-overlay-6 {
|
|
background-color: rgba(#fedfdf,.9);
|
|
}
|
|
&.intro-overlay {
|
|
background-color: rgba(#070707,.8);
|
|
}
|
|
}
|
|
|
|
.background-video {
|
|
video {
|
|
max-width: inherit;
|
|
min-height: 100%;
|
|
min-width: 100%;
|
|
width: 100%;
|
|
|
|
.loaded & {
|
|
width: auto;
|
|
}
|
|
}
|
|
iframe {
|
|
max-width: inherit;
|
|
}
|
|
.tubular-container {
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
.tubular-player {
|
|
position: absolute;
|
|
}
|
|
}
|
|
}
|
|
} |