.ac-wrapper { width: 100%; position: relative; -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; margin-bottom: -25px; -webkit-perspective-origin: 50% 25%; -moz-perspective-origin: 50% 25%; perspective-origin: 50% 25%; } .ac-wrapper h2.en{ top: 20%; } .ac-wrapper h2 { /*width: 50%;*/ left: 70%; padding: 0; text-align: left; margin-left: 33px; margin-top: 37px; position: absolute; color: #ffffff; font-weight: 100; font-size: 42px; /*text-align: right;*/ /*padding: 0 180px 0 50px;*/ pointer-events: none; -webkit-font-smoothing: antialiased } #app-title .cyxy-trs-source{ position: relative; } #app-title .cyxy-trs-source .cyxy-trs-target{ position: absolute; font-size: 20px; left: 2px; top: 45px; } #app-title-span .cyxy-trs-source{ position: relative; display: inline-block; width:300px; } #app-title-span .cyxy-trs-source .cyxy-trs-target{ position: absolute; font-size: 14px; left: 5px; top: 32px; } #app-title-span { left: 70%; padding: 0; text-align: left; margin-left: 33px; position: absolute; color: #ffffff; font-weight: 100; font-size: 28px; /*text-align: right;*/ /*padding: 0 180px 0 50px;*/ pointer-events: none; display: block; margin-top: 102px; -webkit-font-smoothing: antialiased /*color: #c0c0c0;*/ } #app-title-span.font-size{ font-size:26px; } .ac-wrapper h3 { position: absolute; font-size: 18px; left: 70%; /*width: 100%;*/ top: 57%; margin-left: 33px; font-weight: 100; color: #ffffff; -webkit-font-smoothing: antialiased } .ac-device { background: url(../imgs/iphone-bg.png) no-repeat; width: 467px; height: 573px; margin: 0 auto; position: relative; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } /*.ac-device {*/ /*background: url(../images/iPhone.png) no-repeat;*/ /*width: 288px;*/ /*height: 611px;*/ /*margin: 0 auto;*/ /*position: relative;*/ /*-webkit-transition: all 0.3s ease;*/ /*-moz-transition: all 0.3s ease;*/ /*transition: all 0.3s ease;*/ /*-webkit-transform-style: preserve-3d;*/ /*-moz-transform-style: preserve-3d;*/ /*transform-style: preserve-3d;*/ /*}*/ .ac-device a { height: 400px; width: 249px; display: inline-block; margin: 75px 0 0 122px; } .ac-device a img { display: block; } .ac-device h3 { position: absolute; font-size: 1.5em; left: 100%; width: 100%; top: 60%; margin-left: 30px; font-weight: 300; color: #ffffff; } .ac-grid { position: absolute; width: 100%; padding-top: 3.6em; z-index: 2000; top: 0; left: 0; text-align: center; pointer-events: none; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .ac-grid a { width: 220px; display: inline-block; position: relative; margin: 10px 5px; cursor: pointer; opacity: 0; pointer-events: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-transform: translateZ(-350px); -moz-transform: translateZ(-350px); transform: translateZ(-350px); -webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s; } .ac-grid a:first-child { -webkit-transform-origin: right center; -moz-transform-origin: right center; transform-origin: right center; } .ac-grid a:last-child { -webkit-transform-origin: left center; -moz-transform-origin: left center; transform-origin: left center; } .ac-grid a img { display: block; width: 100%; } .ac-grid a span { position: absolute; height: 100%; width: 100%; left: 0; top: 0; text-transform: uppercase; padding: 4em 1em 0; z-index: 100; color: #ddd; background: rgba(0,0,0,0.4); /*font-weight: 700;*/ opacity: 0; -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); transform: translateY(-5px); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; } .ac-grid a:hover span { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } .ac-wrapper.ac-gridview .ac-device { -webkit-transform: translateZ(-350px); -moz-transform: translateZ(-350px); transform: translateZ(-350px); opacity: .6; } .ac-wrapper.ac-gridview .ac-grid { pointer-events: auto; } .ac-wrapper.ac-gridview .ac-grid a { opacity: 1; pointer-events: auto; } .ac-wrapper.ac-gridview .ac-grid a:first-child { -webkit-transform: rotateY(-20deg) translateZ(0px); -moz-transform: rotateY(-20deg) translateZ(0px); transform: rotatey(-20deg) translateZ(0px); } .ac-wrapper.ac-gridview .ac-grid a:nth-child(2) { -webkit-transition-delay: 50ms; -moz-transition-delay: 50ms; transition-delay: 50ms; -webkit-transform: translateZ(0px); -moz-transform: translateZ(0px); transform: translateZ(0px); } .ac-wrapper.ac-gridview .ac-grid a:nth-child(3) { -webkit-transition-delay: 100ms; -moz-transition-delay: 100ms; transition-delay: 100ms; -webkit-transform: translateZ(0px); -moz-transform: translateZ(0px); transform: translateZ(0px); } .ac-wrapper.ac-gridview .ac-grid a:last-child { -webkit-transition-delay: 150ms; -moz-transition-delay: 150ms; transition-delay: 150ms; -webkit-transform: rotateY(20deg) translateZ(0px); -moz-transform: rotateY(20deg) translateZ(0px); transform: rotateY(20deg) translateZ(0px); } @media screen and (max-width: 63.875em) { .ac-wrapper { font-size: 60%; width: 100%; padding: 0 20px; } .ac-device { margin: 0; width: 100%; } .ac-device h3 { width: 50%; left: 290px; color: #ffffff; } .ac-wrapper h2 { left: 308px; padding: 0; text-align: left; margin-left: 30px; } } @media (max-width:1200px) { #app-title-span.font-size{ font-size: 20px; } } @media screen and (max-width: 58em) { .ac-grid { width: 90%; left: 5%; margin-left: 0; padding-top: 8em; } .ac-grid a { width: 22%; } } @media screen and (max-width: 35.6875em) { .ac-wrapper { padding: 0 20px 100px; } .ac-wrapper h2 { width: 100%; text-align: center; font-size: 28px; margin: 10px 0 1em; top: 0; left: auto; position: relative; -webkit-font-smoothing: antialiased } .ac-device { margin: 0 auto; /*width: 288px;*/ } .ac-device h3 { position: relative; margin: 0; left: auto; width: 100%; top: 100px; display: block; text-align: center; color: #ffffff; -webkit-font-smoothing: antialiased } .ac-grid a { width: 40%; } .ac-wrapper.ac-gridview .ac-grid a { -webkit-transform: translateZ(0px) !important; -moz-transform: translateZ(0px) !important; transform: translateZ(0px) !important; } } #owl-app { width: 60%; } #owl-app .item{ margin-left: 10px; } #owl-app .item img{ display: inline-block; width: 223px; height: auto; }