asiaH4/assets/stylesheets/template/modules/space.scss

1267 lines
24 KiB
SCSS

@charset "utf-8";
@import "../initial";
$title-font: "Source Sans Pro", "微軟正黑體", sans-serif;
$theme-black: #000;
@mixin centerElement() {
position: fixed;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
// Space index
.i-space {
// position: fixed;
z-index: 100;
// top: 60%;
// left: 50%;
margin:auto;
// margin-top:300px;
// margin-left: 50%;
// -webkit-transform: translate(-50%, -50%);
// transform: translate(-50%, -50%);
@media (min-width: $screen-xs) {
top: 50%;
width: 45%;
}
.i-sapce__building-wrap {
width:100%;
text-align: center;
white-space: nowrap;
}
.i-space__building {
position: relative;
display: inline-block;
width: 220px;
margin: 0 2%;
@media (min-width: $screen-xs) {
width:100%;
}
}
.i-space__building-title {
font-family: $title-font;
font-size: 0.9375em;
display: inline-block;
margin: 5px 0;
text-transform: uppercase;
color: $theme-white;
}
.i-space__floor-item {
position: relative;
overflow: hidden;
height: 80px;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
.i-space__img-wrap {
position: relative;
display: block;
cursor: pointer;
border: 20px solid lighten($theme-black, 10%);
-webkit-filter: grayscale(0);
filter: grayscale(0);
&:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
transition: .3s all;
background-color: rgba($theme-black, 0);
}
&:hover,
&.active {
&:before {
background-color: rgba($theme-black, 0.5);
}
}
}
.i-space__building-img {
display: block;
background-color: rgba($theme-black, 0.8);
}
.i-space__floors {
position: absolute;
top: 10%;
left: 0;
visibility: hidden;
width: 220px;
padding: .5rem .6rem;
transition: .3s all;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
opacity: 0;
background-color: rgba($theme-black, 0.8);
@media (min-width: $screen-xs) {
width:30%;
height:auto;
left: 100%;
top: 50%;
}
&.active {
left: 0;
visibility: visible;
opacity: 1;
z-index: 1200;
@media (min-width: $screen-xs) {
left: 108%;
}
}
&:before {
@media (min-width: $screen-xs) {
position: absolute;
top: 45px;
left: -24px;
content: "";
border: 12px solid transparent;
border-right-color: $theme-black;
}
}
.i-space__floor-name {
font-size: 0.8125em;
padding: 5px 10px;
color: $theme-white;
background-color: $theme-color-main;
}
}
.i-space__floor-name {
position: absolute;
z-index: 100;
right: 0;
bottom: 0;
}
.i-space__floor-img {
position: relative;
z-index: 10;
top: 50%;
transition: .3s all;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
&:hover {
opacity: .5;
}
}
}
.background-image {
position: absolute;
z-index:-1;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .1;
background-size: cover;
-webkit-filter: blur(10px);
filter: blur(10px);
}
.s-space__back-btn-wrap {
position: absolute;
left: 0;
top: 0;
}
.s-space__back-btn {
border-radius: 50%;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
width: 35px;
height: 35px;
line-height: 20px;
text-align: center;
i {
position: relative;
left: -2px;
}
}
.has-lightbox {
// lightbox
.s-space__light-box {
position: fixed;
z-index: 2000;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
background-color: rgba($theme-black, 0.9);
}
.s-space__close-btn {
font-size: 1.5rem;
position: fixed;
z-index: 2200;
top: 20px;
right: 20px;
cursor: pointer;
color: $theme-white;
}
.s-space {
.s-space__floor-img-large {
img {
opacity: 1;
visibility: visible;
}
}
}
}
body[data-module="space"] {
.layout-content-inner {
@media (max-width: $screen-xs) {
padding: 0 0 0 0;
}
}
.layout-content-box {
@media (max-width: $screen-xs) {
background-color: transparent;
padding: 0;
}
.s-space__apartment-name {
@media (max-width: $screen-xs) {
display: none;
}
}
.s-space__back-btn-wrap {
@media (max-width: $screen-xs) {
display: none;
}
}
#layout-image {
@media (max-width: $screen-xs) {
width: 170%;
max-width: none;
height:auto !important;
}
@media (min-width: $screen-sm){
width: 100%;
max-width: none;
height:auto !important;
}
}
#layout-image-small {
@media (max-width: $screen-xs) {
width: 100%;
max-width: none;
height:auto !important;
}
@media (min-width: $screen-lg){
width: auto;
max-width: none;
height:765px;
}
}
}
}
// Space show
.s-space {
position: relative;
padding-top: 2em;
@media (max-width: $screen-xs){
overflow:scroll;}
@media (min-width: $screen-sm){
overflow:scroll;
}
&.none{
display: none;
}
#full-layout-canvas {
border: none;
background-color: transparent;
height:auto !important;
@media (max-width: $screen-xs){
// width: 100% !important;
height: 100% !important;
width:170%;
}
@media (min-width: $screen-sm){
height: 100% !important;
width:100%;
}
.image-cover {
z-index: 13;
left: 0;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
@media (max-width: $screen-xs){
// width: 100% !important;
height: 100% !important;
}
@media (min-width: $screen-sm) {
left: 50%;
// width:100% !important;
height: 100% !important;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
}
.small-image{
@media (max-width: $screen-xs){
max-width:none;
width:100% !important;
height:765px;
}
}
.s-space__apartment-name {
color: $theme-white;
text-align: center;
font-size: 1.375rem;
margin-bottom: 20px;
display: none;
}
.selection-box {
transition: .3s all;
background-color: rgba(0, 0, 0, 0);
.selection-box-label {
font-size: 0.75rem;
display: none;
padding: 5px 8px;
color: $theme-white;
background-color: lighten($theme-black, 20%);
white-space: nowrap;
min-width: 100%;
}
&:hover {
// background-color: rgba(0, 0, 0, 0.3);
.selection-box-label {
display: block;
}
}
}
.s-space__floor-img-small {
position: absolute;
top: 60px;
left: 0;
width: 200px;
height: auto;
cursor: pointer;
}
.s-space__floor-img-large {
img {
@include centerElement;
z-index: 2100;
transition: .3s all ease-in-out;
opacity: 0;
visibility: hidden;
width: 70%;
}
}
.pin {
position: absolute;
top: 50%;
left: 50%;
width: 25px;
height: 25px;
margin: -15px 0 0 -15px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-animation-duration: 1s;
animation-duration: 1s;
border-radius: 50% 50% 50% 0;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
background:#e3053a;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
// @media (min-width: $screen-sm) {
// width: 30px;
// height: 30px;
// margin: -20px 0 0 -20px;
// }
}
.pin:after {
position: absolute;
top: 0;
left: 0;
width: 9px;
height: 9px;
margin: 8px 0 0 8px;
content: "";
border-radius: 50%;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
background: $theme-white;
// @media (min-width: $screen-sm) {
// width: 14px;
// height: 14px;
// }
}
.pulse {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
width: 11px;
height: 11px;
margin: 11px 0 0 -8px;
-webkit-transform: rotateX(55deg);
transform: rotateX(55deg);
border-radius: 50%;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
background: rgba(0, 0, 0, 0.1);
// @media (min-width: $screen-sm) {
// width: 16px;
// height: 16px;
// margin: 11px 0 0 -12px;
// }
}
.pulse:after {
position: absolute;
top: 0;
left: 0;
width: 35px;
height: 35px;
margin: -13px 0 0 -12px;
content: "";
-webkit-animation: pulsate 1s ease-out;
animation: pulsate 1s ease-out;
-webkit-animation-delay: 1.1s;
animation-delay: 1.1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
opacity: 0;
border-radius: 50%;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
box-shadow: 0 0 1px 2px #e3053a;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity = 0);
// @media (min-width: $screen-sm) {
// width: 40px;
// height: 40px;
// margin: -13px 0 0 -13px;
// }
}
}
// unit
#space-for-ad-banner {
position: fixed;
top: 0;
left: 0;
background-color: $theme-black;
width: 100%;
height: 100%;
display: none;
z-index: 11500;
overflow: auto;
}
#space-for-ad-banner .w-ad-banner__pager-wrap {
bottom: 0;
transition: .3s all ease 0s;
&.active {
bottom: -130px;
}
}
// showcase page
.s-showcase {
.w-ad-banner__image {
margin-top: 0;
@media (max-width: $screen-xs) {
margin: 50%;
//left: 0 !important;
//top: 0 !important;
}
}
.w-ad-banner__widget-title {
text-transform: capitalize;
}
.w-ad-banner__collpase {
// @include transition($speed-fast);
transition:.3s;
cursor: pointer;
position: fixed;
left: 0;
bottom: 109px;
background-color: rgba($theme-black, 0.5);
padding: 10px 12px;
&.active {
bottom: 0;
}
}
}
// animation for map pin
@-webkit-keyframes pulsate {
0% {
-webkit-transform: scale(0.1, 0.1);
transform: scale(0.1, 0.1);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity = 0);
}
50% {
opacity: 1;
-ms-filter: none;
-webkit-filter: none;
filter: none;
}
100% {
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity = 0);
}
}
@-webkit-keyframes pulsate {
0% {
-webkit-transform: scale(0.1, 0.1);
transform: scale(0.1, 0.1);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity = 0);
}
50% {
opacity: 1;
-ms-filter: none;
-webkit-filter: none;
filter: none;
}
100% {
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity = 0);
}
}
@keyframes pulsate {
0% {
-webkit-transform: scale(0.1, 0.1);
transform: scale(0.1, 0.1);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity = 0);
}
50% {
opacity: 1;
-ms-filter: none;
-webkit-filter: none;
filter: none;
}
100% {
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity = 0);
}
}
@-webkit-keyframes bounce {
0% {
-webkit-transform: translateY(-2000px) rotate(-45deg);
transform: translateY(-2000px) rotate(-45deg);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity = 0);
}
60% {
-webkit-transform: translateY(30px) rotate(-45deg);
transform: translateY(30px) rotate(-45deg);
opacity: 1;
-ms-filter: none;
-webkit-filter: none;
filter: none;
}
80% {
-webkit-transform: translateY(-10px) rotate(-45deg);
transform: translateY(-10px) rotate(-45deg);
}
100% {
-webkit-transform: translateY(0) rotate(-45deg);
transform: translateY(0) rotate(-45deg);
}
}
@keyframes bounce {
0% {
-webkit-transform: translateY(-2000px) rotate(-45deg);
transform: translateY(-2000px) rotate(-45deg);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity = 0);
}
60% {
-webkit-transform: translateY(30px) rotate(-45deg);
transform: translateY(30px) rotate(-45deg);
opacity: 1;
-ms-filter: none;
-webkit-filter: none;
filter: none;
}
80% {
-webkit-transform: translateY(-10px) rotate(-45deg);
transform: translateY(-10px) rotate(-45deg);
}
100% {
-webkit-transform: translateY(0) rotate(-45deg);
transform: translateY(0) rotate(-45deg);
}
}
//btn-close
// helper classes
.absolute-center {
position: absolute;
left: 50%;
top: 100%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 100;
}
.absolute-bottom {
position: absolute;
left: 50%;
top: 100%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
z-index: 100;
}
.lightbox-cover {
position: fixed;
background-color: rgba(0, 0, 0, 0.9);
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1100;
}
// image as button
.img-btn {
transition:.3s;
opacity: 1;
&:hover {
opacity: .7;
}
}
// lightbox close button
.btn-close {
transition:.3s;
position: fixed;
right: 2rem;
top: 2rem;
font-size: 1.25em;
cursor: pointer;
z-index: 3000;
padding: 8px 15px;
background-color: rgba($theme-black, 0.5);
&:hover {
background-color: $theme-color-main;
}
&.active {
top: -3rem;
}
.fa-times {
transition:.3s;
color:#fff;
-webkit-transform-origin: center 11px;
transform-origin: center 11px;
&:hover {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
}
}
.loading-cover {
@include centerElement;
transition:.3s;
z-index: 3000;
height: 100%;
width: 100%;
opacity: 1;
visibility: visible;
background-color: rgba($theme-black, 0.7);
}
// animation loader
.loading {
@include centerElement;
transition:.3s;
width: 40px;
height: 40px;
background-color:#54d1ff;
margin-top: -40px;
opacity: 1;
visibility: visible;
-webkit-animation: loader-animation 1.2s infinite ease-in-out;
animation: loader-animation 1.2s infinite ease-in-out;
}
.loading-hide {
opacity: 0;
visibility: hidden;
}
.js-show {
transition:.7s;
opacity: 1 !important;
visibility: visible !important;
}
.js-hide {
transition:.7s;
opacity: 0 !important;
visibility: hidden !important;
}
@-webkit-keyframes loader-animation {
0% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
50% {
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
}
100% {
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
@keyframes loader-animation {
0% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
50% {
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
}
100% {
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
//for showcase
.ad-banner-widget-1,
.ad-banner-widget-3 {
.w-ad-banner__wrap {
height: 100%;
}
.w-ad-banner__slide {
height: 100%;
width: 100%;
}
.w-ad-banner__image {
margin-top: 0;
left: 50% !important;
top: 0% !important;
-webkit-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
position: absolute !important;
width: 100%;
@media (max-width: $screen-xs){
margin-top: 50%;
left:0 !important;
height:auto !important;
}
@media (min-width: $screen-xs) and (max-width: $screen-sm){
margin-top:25% !important;
}
@media (min-width: $screen-sm) {
width: auto;
margin-top: 0;
top: 110px !important;
-webkit-transform: translate(-50%, -113px);
transform: translate(-50%, -110px);
}
}
.w-ad-banner__caption {
position: absolute;
left: 0;
top: 300px;
z-index: 990;
color: $theme-white;
font-family: $main-font;
max-width: 100%;
width: 100%;
padding: 5px 2rem;
@media (min-width: $screen-sm) {
left: 10%;
max-width: 60%;
width: auto;
padding: 30px 2rem;
background-color: rgba($theme-black, 0.4);
}
h2 {
margin: 0 0 15px;
font-family: $title-font;
font-weight: 400;
font-size: 1.25rem;
text-transform: uppercase;
overflow: hidden;
line-height: 2;
margin-bottom: 0;
@media (min-width: $screen-sm) {
font-size: 2.25rem;
height: 60px;
margin-bottom: 10px;
}
&:empty {
display: none;
}
}
p {
font-size: 0.8125em;
// height: 120px;
overflow: hidden;
@media (min-width: $screen-sm) {
font-size: 0.875em;
}
&:empty {
display: none;
}
}
}
.w-ad-banner__desc {
line-height: 1.8;
}
.w-ad-banner__pager-wrap {
display: none;
@media (min-width: $screen-sm) {
display: block;
position: fixed;
bottom: 45px;
left: 0;
right: 0;
z-index: 990;
background-color: rgba($theme-black, 0.5);
padding: 20px 60px 20px 20px;
text-align: right;
opacity: 0;
transition: .5s all ease 1s;
}
&:hover {
opacity: 1;
transition: .3s all;
}
&.w-ad-banner__page--active {
transition: .5s all ease 1s;
opacity: 1;
}
.w-ad-banner__widget-title {
display: inline-block;
margin-right: 20px;
color: $theme-white;
font-weight: normal;
font-size: 1.625rem;
font-weight: 400;
font-family: $title-font;
position: relative;
top: 2px;
text-transform: capitalize;
}
.w-ad-banner__pager {
display: inline-block;
}
.w-ad-banner__btn {
// @include transition($speed-fast, all);
transition:.3s;
position: absolute;
left: 1rem;
top: 50%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
border: none;
width: 50px;
height: 50px;
background-color: rgba($theme-black, 0.5);
color: $theme-white;
outline: none;
font-size: 1.3rem;
border-radius: 50%;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
&:hover {
background-color: rgba($theme-black, 1);
}
}
.w-ad-banner__pager-item {
cursor: pointer;
display: inline-block;
margin-right: 10px;
position: relative;
&:after {
transition:background-color .3s;
position: absolute;
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba($theme-black, 0.5);
z-index: 100;
opacity: 0;
visibility: hidden;
}
&:hover,
&.cycle-pager-active {
&:after {
opacity: 1;
visibility: visible;
}
}
img {
width: 60px;
height: 60px;
}
}
}
}
.building .selection-box{
width: auto !important;
height: auto !important;
line-height: 0 !important;
&:hover {
.selection-box-label {
display: none;
}
}
}
.building .selection-box:first-child{
left: 60% !important;
top:82.5% !important;
}
.building .selection-box:nth-child(2){
left: 60% !important;
top:77.5% !important;
}
.building .selection-box:nth-child(3){
left: 60% !important;
top: 50% !important;
}
.building .selection-box:nth-child(4){
left: 60% !important;
top: 39% !important;
}
.building .selection-box:nth-child(5){
left: 60% !important;
top: 33% !important;
}
.building .selection-box > a {
width: 42px;
height: 33px;
position: relative;
}
.building .selection-box:nth-child(3) > a{
width: 126px;
}
.building .selection-box:nth-child(4) > a{
width: 62px;
}
.building .selection-box:nth-child(5) > a{
width: 126px;
}
.building .selection-box .pulse{
display: none;
margin:0;
left: 50%;
top: auto;
bottom:0;
transform:translateX(-50%);
width: 31px;
&:after{
width: 31px;
height: 11px;
margin: 0;
}
}
.building .selection-box .pin {
border-radius: 0;
position: absolute;
top: 0;
left:0;
width: 42px;
height: 33px;
margin:0;
-webkit-animation: bounce2 1s 1s;
animation: bounce2 1s 1s;
// -webkit-animation-duration:;
// animation-duration:;
background:url(/assets/1f.png);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
transition:.5s;
&:hover{
background:url(/assets/1f_hover.png);
}
}
.building .selection-box:nth-child(2) .pin {
position: absolute;
width: 42px;
height: 33px;
-webkit-animation: bounce2 1s 1s;
animation: bounce2 1s 1s;
// -webkit-animation-duration:;
// animation-duration:;
background:url(/assets/2f.png);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
transition:.5s;
&:hover{
background:url(/assets/2f_hover.png);
}
}
.building .selection-box:nth-child(3) .pin {
position: absolute;
width: 126px;
height: 33px;
-webkit-animation: bounce2 1s 1s;
animation: bounce2 1s 1s;
// -webkit-animation-duration:;
// animation-duration:;
background:url(/assets/3f.png);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
transition:.5s;
&:hover{
background:url(/assets/3f_hover.png);
}
}
.building .selection-box:nth-child(4) .pin {
position: absolute;
width: 62px;
height: 33px;
-webkit-animation: bounce2 1s 1s;
animation: bounce2 1s 1s;
// -webkit-animation-duration:;
// animation-duration:;
background:url(/assets/12f.png);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
transition:.5s;
&:hover{
background:url(/assets/12f_hover.png);
}
}
.building .selection-box:nth-child(5) .pin {
position: absolute;
width: 126px;
height: 33px;
-webkit-animation: bounce2 1s 1s;
animation: bounce2 1s 1s;
// -webkit-animation-duration:;
// animation-duration:;
background:url(/assets/13f.png);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
transition:.5s;
&:hover{
background:url(/assets/13f_hover.png);
}
}
.building .pin:after {
display: none;
}
@-webkit-keyframes bounce2 {
0% {
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity = 0);
}
60% {
-webkit-transform: translateY(30px);
transform: translateY(30px);
opacity: 1;
-ms-filter: none;
-webkit-filter: none;
filter: none;
}
80% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes bounce2 {
0% {
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px) ;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity = 0);
}
60% {
-webkit-transform: translateY(30px);
transform: translateY(30px);
opacity: 1;
-ms-filter: none;
-webkit-filter: none;
filter: none;
}
80% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
.s-space #full-layout-canvas .image-cover{
@media (min-width: 480px) and (max-width: 768px){
height: 100% !important;
width: 100% !important;
}
}