/* Theme Name: swap Author: Dicky Author URI: http://swwwap.hk Description: This is a bootstrap theme for wordpress. Version: 1.0 License: swwwap */ html{margin: 0 !important} h1.midsize{font-size: 11em;line-height: 1em;letter-spacing: -0.05em;} h1.super{font-size: 16em;line-height: .8em;letter-spacing: -0.05em;} h1.superex{font-size: 38em;padding-top: -.5em} h1.super1{font-size:45em;} h1.extrapre{font-size: 127px !important;line-height: .725em;letter-spacing: -5px} #preloader{position: fixed;width: 100%;height: 100%;top:0;left: 0;z-index: 99999;pointer-events: none;overflow: hidden} #preloader.done{top:-100%} #preloader>li{position: absolute;top:0;left: 0;width: 100%;height: 100%;pointer-events: none;z-index: 1;} #preloader>li.active{display: block;pointer-events: auto;z-index: 999;} .waiting{background: #e0e0db;position: fixed;width: 100%;height: 100%;top:0;left: 0;z-index: 99999999999999;padding: 18px} .frame{position: absolute;width: 100%;height: 100%;top:0;left: 0;z-index: 9} .bg-brown{background:#e0e0db;position: absolute;width: 100%;height: 100%;top:0;left: 0;z-index: 9} .bg-black{background:#000;position: absolute;width: 100%;height: 100%;top:0;left: 0;z-index: 9} .bg-white{background:#FFF;position: absolute;width: 100%;height: 100%;top:0;left: 0;z-index: 9} .color-white{color: #FFF} .color-gray{color: #CCC9C7} .color-black{color: #000} .prelogo{position: absolute;;top:-18px;left: 8px} .img-bg{position: absolute;width: 120%;height: 120%;top:-10%;left: -10%} .img-bg-1{position: absolute;width: 120%;height: 120%;top:0;right: 0} .img-bg-2{position: absolute;width: 100%;height: 50%;bottom:0;left: 0;} .listitem,.griditem{overflow: hidden;height: 100%;position: absolute;;width: 100%;height: 100%} .listitem>li{float: left;width: 25% ;height: 16%;position: relative !important;display: block !important;text-align: center;padding-top: 4%} .griditem>li{float: left;width: 12.5% ;height: 14.5%;position: relative !important;display: block !important;text-align: center;padding-top: 2.3%} .img-bg-1.zoomout1{transform: scale(1.3);-ms-transform:scale(1.3);-webkit-transform:scale(1.3)} .img-bg-1.zoomout1.active{transform: scale(1.15);-ms-transform:scale(1.15);-webkit-transform:scale(1.15)} .img-bg-1.zoomout2{transform: scale(1.15);-ms-transform:scale(1.15);-webkit-transform:scale(1.15)} .img-bg-1.zoomout2.active{transform: scale(1);-ms-transform:scale(1);-webkit-transform:scale(1)} .scale12{transform: scale(1.2); -ms-transform:scale(1.2);-webkit-transform:scale(1.2)} .scale14{transform: scale(1.4);-ms-transform:scale(1.4);-webkit-transform:scale(1.4)} .scale16{transform: scale(1.7);-ms-transform:scale(1.7);-webkit-transform:scale(1.7)} .ease1,.ev h1{-webkit-transition: all 200ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 200ms cubic-bezier(0.19, 1, 0.22, 1);} .ease2{-webkit-transition: all 10000ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 10000ms cubic-bezier(0.19, 1, 0.22, 1);} .ease3{-webkit-transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1); } .ease4{ -webkit-transition: all 1800ms linear; transition: all 1800ms linear } .ease5{ -webkit-transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1); } .ease6{ -webkit-transition: all 2400ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 2400ms cubic-bezier(0.645, 0.045, 0.355, 1); } .ease7{ -webkit-transition: all 1800ms linear; transition: all 1800ms linear } .ease8{ -webkit-transition: all 1800ms linear; transition: all 1800ms linear } .ease9{-webkit-transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1); } .ease10{-webkit-transition: all 900ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 900ms cubic-bezier(0.165, 0.84, 0.44, 1); } .ease11,#preloader{-webkit-transition: all 250ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 250ms cubic-bezier(0.165, 0.84, 0.44, 1); } .b1{width: 0%;height: 10px;background: #e0e0db;margin-left: 8px} .b2{width: 0;height: 10px;margin-top: -6px;margin-left: 8px} .centerwrap{width: 670px;margin: 0 auto;position: relative} #preloader li:nth-child(2) .step1,#preloader li:nth-child(2) .step2,#preloader li:nth-child(2) .step3{opacity: 0} #preloader li:nth-child(2) .step1.active,#preloader li:nth-child(2) .step2.active,#preloader li:nth-child(2) .step3.active{opacity: 1} #preloader li:nth-child(2) .step4{} #preloader li:nth-child(2) .step4.active{width: 100% !important;} #preloader li:nth-child(2) .step5.active{margin-top: 100px !important;} #preloader li:nth-child(2) .bline {background: #000;width: 100%;height: 100%; } #preloader li:nth-child(2) .step4.active .bline {background: #FFF; transition-delay:1200ms;} #preloader li:nth-child(2) .step6{position: absolute;transform: translateY(0px);-ms-transform:translateY(0px);-webkit-transform:translateY(0px)} #preloader li:nth-child(2) .ev{position: absolute;transform: translateY(-100px);-ms-transform: translateY(-100px);-webkit-transform: translateY(-100px);height: 90px;overflow: hidden} #preloader li:nth-child(2) .ev h1{transform: translateY(120px);-ms-transform:translateY(120px);-webkit-transform:translateY(120px);transition-delay:1200ms;} #preloader li:nth-child(2) .ev.active h1{transform: translateY(0);-ms-transform:translateY(0);-webkit-transform:translateY(0)} #preloader li:nth-child(2) .step6.active {width: 100% !important;} #preloader li:nth-child(2) .step5{position: relative} #preloader li:nth-child(3) .text-wrap{height: 94px;overflow: hidden;margin-top: 190px} #preloader li:nth-child(3) .text-wrap.active{transform:translateY(-94px); ;-ms-transform:translateY(-94px);-webkit-transform:translateY(-94px)} #preloader li:nth-child(3) h1.step2.active{transform:translateY(-94px);;-ms-transform:translateY(-94px);-webkit-transform:translateY(-94px)} #preloader li:nth-child(3) .step2.active.bg-brown{background: #FFF} #preloader li .leftright{ transform:translateX(-7%); -ms-transform:translateX(-7%);-webkit-transform:translateX(-7%)} #preloader li.active .leftright{transform:translateX(0); -ms-transform:translateX(0);-webkit-transform:translateX(0)} #preloader li .rightleft{transform:translateX(0); -ms-transform:translateX(0);-webkit-transform:translateX(0) } #preloader li.active .rightleft{transform:translateX(-7%); -ms-transform:translateX(-7%);-webkit-transform:translateX(-7%)} #preloader li .updown{transform:translateY(-7%); -ms-transform:translateX(-7%);-webkit-transform:translateX(-7%)} #preloader li.active .updown{transform:translateY(0%); -ms-transform:translateX(0);-webkit-transform:translateX(0)} #preloader li .downup{transform:translateY(0%); -ms-transform:translateX(0);-webkit-transform:translateX(0)} #preloader li.active .downup{transform:translateY(-7%);-ms-transform:translateX(-7%);-webkit-transform:translateX(-7%)} #preloader li .zoomin.img-bg{transform: scale(1.2);-ms-transform: scale(1.2);-webkit-transform:scale(1.2)} #preloader li.active .zoomin{transform: scale(1);-ms-transform: scale(1);-webkit-transform:scale(1)} #preloader li .zoomout.img-bg{transform: scale(1) ;-ms-transform: scale(1);-webkit-transform:scale(1)} #preloader li.active .zoomout{transform: scale(1.2);-ms-transform: scale(1.2);-webkit-transform:scale(1.2)} #preloader li:nth-child(6) .step2.active{letter-spacing: 100px;transform:translateX(60px);;-ms-transform:translateX(60px);-webkit-transform:translateX(60px)} #preloader li:nth-child(11) .text-wrap{height: 92px;overflow: hidden;} #preloader li:nth-child(11) h1.step2.active{transform:translateX(-154px);;-ms-transform: translateX(-154px);-webkit-transform:translateX(-154px)} #preloader li:nth-child(11) h1.step3.active{transform:translateY(-92px);-ms-transform: translateY(-92px);-webkit-transform:translateY(-92px)} #preloader li:nth-child(11) .step5.active{transform:translateX(-180%);-ms-transform: translateX(-180%);-webkit-transform:translateX(-180%)} #preloader li:nth-child(12) .text-wrap{height: 92px;overflow: hidden;} #preloader li:nth-child(12) .colwrap {transform:translateX(100%);-ms-transform: translateX(100%);-webkit-transform:translateX(100%)} #preloader li:nth-child(12) .colwrap.active {transform:translateX(0);;-ms-transform: translateX(0);-webkit-transform:translateX(0)} #preloader li:nth-child(12) .img-bg-2.step2{transform:translateX(-100%);;-ms-transform: translateX(-100%);-webkit-transform:translateX(-100%)} #preloader li:nth-child(12) .img-bg-2.step2.active{transform:translateX(0%);;-ms-transform: translateX(0%);-webkit-transform:translateX(0%)} #preloader li:nth-child(12) .step5{ transform:translateY(100%);;-ms-transform: translateY(100%);-webkit-transform:translateY(100%)} #preloader li:nth-child(12) .step5.active{transform:translateY(0%);;-ms-transform: translateY(0%);-webkit-transform:translateY(0%)} #preloader li:nth-child(12) .step4.active.coll-block{;transform:translateX(-30%);;-ms-transform: translateX(-30%);-webkit-transform:translateX(-30%)} #preloader li:nth-child(16) .text-wrap,#preloader li:nth-child(17) .text-wrap{overflow: hidden;position: absolute;left:3%;} #preloader li:nth-child(16) h1{transform:translateY(174px);} #preloader li:nth-child(16) .text-wrap.active h1,#preloader li:nth-child(17) .text-wrap h1{transform:translateY(0px);-ms-transform:translateY(0px);-webkit-transform:translateY(0px)} .bottom55{bottom: -55px} #preloader li:nth-child(17) .text-wrap.active h1,#preloader li:nth-child(17) .text-wrap.active h1{transform:translateY(-174px);;-ms-transform:translateY(-174px);-webkit-transform:translateY(-174px)} #preloader li:nth-child(21) .plusp{transform: scale(3);-ms-transform:scale(3);-webkit-transform:scale(3);transition-delay:600ms;} #preloader li.active:nth-child(21) .plusp {transform: scale(1.2);-ms-transform:scale(1.2);-webkit-transform:scale(1.2)} /*#preloader li:nth-child(22) .step2.active {transform:translateX(-260%);transition-delay:500ms } #preloader li:nth-child(22) .rightpartners{position: fixed;top:18%;transform:translateX(100%) ;font-size: 28em;line-height: .8em;letter-spacing: -0.05em;padding-top: .3em} #preloader li:nth-child(22) .step1.active {transform:translateX(-100%) ; }*/ #preloader li:nth-child(22) .plusp{transform: scale(1.2);;-ms-transform:scale(1.2);-webkit-transform:scale(1.2)} #preloader li.active:nth-child(21) .plusp {transform: scale(1);-ms-transform:scale(1);-webkit-transform:scale(1)} #preloader li:nth-child(22) span{position: absolute;left: 60%} #preloader li:nth-child(22) .step1.active span{left: 56%} #preloader li:nth-child(22) .step4.active h1{transform:translateX(-60%);-ms-transform:translateX(-60%);-webkit-transform:translateX(-60%)} #preloader li:nth-child(23) .step2.active {transform:scale(2) ;;-ms-transform:scale(2);-webkit-transform:scale(2) } .skippre{position: fixed;right: 30px;bottom:20px;z-index: 9999999;cursor: pointer} .txt36 {background: #FFF;position: absolute;width: 100%;height: 100%;width: 100%;} #preloader li:nth-child(40) .step1 {transform: scale(2);-ms-transform:scale(2);-webkit-transform:scale(2);color: #000 } #preloader li:nth-child(40) .step1.active {transform: scale(1);-ms-transform:scale(1);-webkit-transform:scale(1) ;color: #CCC9C7} .step2{transition-delay:300ms } .step3{transition-delay:600ms } .step4{transition-delay:900ms } .step5{transition-delay:1200ms } .step6{transition-delay:1500ms } .step7{transition-delay:1800ms } .step2.text-wrap h1{transition-delay:100ms } .step3.text-wrap h1{transition-delay:200ms } .step4.text-wrap h1{transition-delay:300ms } .step5.text-wrap h1{transition-delay:400ms } .step6.text-wrap h1{transition-delay:500ms } .step7.text-wrap h1{transition-delay:600ms } @-webkit-keyframes moveforward { 0% { transform:translateX(90%); } 10% { transform:translateX(6%); } 90% { transform:translateX(5%); } 100% { transform:translateX(-50%); } } @-moz-keyframes moveforward { 0% { transform:translateX(90%); } 10% { transform:translateX(6%); } 90% { transform:translateX(5%); } 100% { transform:translateX(-50%); } } @-o-keyframes moveforward { 0% { transform:translateX(90%); } 10% { transform:translateX(6%); } 90% { transform:translateX(5%); } 100% { transform:translateX(-50%); } } @keyframes moveforward { 0% { transform:translateX(90%); } 10% { transform:translateX(6%); } 90% { transform:translateX(5%); } 100% { transform:translateX(-50%); } } /*#preloader li:nth-child(6).active .step1{ -webkit-animation: moveforward 900ms ; -moz-animation: moveforward 900ms ; -o-animation: moveforward 900ms ; animation: moveforward 900ms ; }*/