.img_scale { overflow: hidden } .img_scale img { transition: transform cubic-bezier(.215,.61,.355,1) 2s; -ms-transition: transform cubic-bezier(.215,.61,.355,1) 2s; -o-transition: transform cubic-bezier(.215,.61,.355,1) 2s; -webkit-transition: transform cubic-bezier(.215,.61,.355,1) 2s; -moz-transition: transform cubic-bezier(.215,.61,.355,1) 2s } .img_scale:hover img { transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1) } .img_scale:hover .full { transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1) } .scroll-watch-in-view.show_right { opacity: 1; visibility: visible; transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0) } .scroll-watch-in-view.show_bottom { opacity: 1; visibility: visible; transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0) } .scroll-watch-in-view.show_left { opacity: 1; visibility: visible; transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0) } .scroll-watch-in-view.show_mask:after { top: 50% } .scroll-watch-in-view.show_mask2:after { left: 20% } .delay_100 { transition-delay: .1s!important } .delay_200 { transition-delay: .2s!important } .delay_300 { transition-delay: .3s!important } .delay_400 { transition-delay: .4s!important } .delay_500 { transition-delay: .5s!important } .aniDlay_100 { animation-delay: .1s!important } .aniDlay_200 { animation-delay: .2s!important } .aniDlay_300 { animation-delay: .3s!important } .aniDlay_400 { animation-delay: .4s!important } .aniDlay_500 { animation-delay: .5s!important } .show_right { opacity: 0; transform: translateX(-10%); -ms-transform: translateX(-10%); -o-transform: translateX(-10%); -webkit-transform: translateX(-10%); -moz-transform: translateX(-10%); transition: opacity cubic-bezier(.4,0,.2,1) 1s,transform cubic-bezier(.4,0,.2,1) 1s; -ms-transition: opacity cubic-bezier(.4,0,.2,1) 1s,transform cubic-bezier(.4,0,.2,1) 1s; -o-transition: opacity cubic-bezier(.4,0,.2,1) 1s,transform cubic-bezier(.4,0,.2,1) 1s; -webkit-transition: opacity cubic-bezier(.4,0,.2,1) 1s,transform cubic-bezier(.4,0,.2,1) 1s; -moz-transition: opacity cubic-bezier(.4,0,.2,1) 1s,transform cubic-bezier(.4,0,.2,1) 1s; visibility: hidden } .show_left { opacity: 0; transform: translateX(10%); -ms-transform: translateX(10%); -o-transform: translateX(10%); -webkit-transform: translateX(10%); -moz-transform: translateX(10%); transition: opacity cubic-bezier(.4,0,.2,1) 1s,transform cubic-bezier(.4,0,.2,1) 1s,box-shadow .6s; -ms-transition: opacity cubic-bezier(.4,0,.2,1) 1s,transform cubic-bezier(.4,0,.2,1) 1s,box-shadow .6s; -o-transition: opacity cubic-bezier(.4,0,.2,1) 1s,transform cubic-bezier(.4,0,.2,1) 1s,box-shadow .6s; -webkit-transition: opacity cubic-bezier(.4,0,.2,1) 1s,transform cubic-bezier(.4,0,.2,1) 1s,box-shadow .6s; -moz-transition: opacity cubic-bezier(.4,0,.2,1) 1s,transform cubic-bezier(.4,0,.2,1) 1s,box-shadow .6s; visibility: hidden } .show_bottom { opacity: 0; transform: translateY(15%); -ms-transform: translateY(15%); -o-transform: translateY(15%); -webkit-transform: translateY(15%); -moz-transform: translateY(15%); transition: cubic-bezier(.4,0,.2,1) 1s; -ms-transition: cubic-bezier(.4,0,.2,1) 1s; -o-transition: cubic-bezier(.4,0,.2,1) 1s; -webkit-transition: cubic-bezier(.4,0,.2,1) 1s; -moz-transition: cubic-bezier(.4,0,.2,1) 1s; visibility: hidden } .show_mask:after { content: ""; position: absolute; width: 100%; height: 250%; top: -100%; background-image: -webkit-linear-gradient(rgba(255,255,255,0) 0,#fff 40%,#fff 98%,#FFF 100%); background-image: -o-linear-gradient(rgba(255,255,255,0) 0,#fff 40%,#fff 98%,#FFF 100%); background-image: linear-gradient(rgba(255,255,255,0) 0,#fff 40%,#fff 98%,#FFF 100%); transition: all 3s; -ms-transition: all 3s; -o-transition: all 3s; -webkit-transition: all 3s; -moz-transition: all 3s } .show_mask2:after { content: ""; position: absolute; width: 100%; height: 250%; left: -50%; top: -85%; background-image: -webkit-linear-gradient(left,rgba(255,255,255,0) 0,#fff 40%,#fff 98%,#FFF 100%); background-image: -o-linear-gradient(left,rgba(255,255,255,0) 0,#fff 40%,#fff 98%,#FFF 100%); background-image: linear-gradient(to right,rgba(255,255,255,0) 0,#fff 40%,#fff 98%,#FFF 100%); transition: all 3s; -ms-transition: all 3s; -o-transition: all 3s; -webkit-transition: all 3s; -moz-transition: all 3s } .double_show { overflow: hidden; position: relative } .double_show:after { content: ''; position: absolute; width: 101%; height: 102%; left: -1px; top: -1px; background: #fff; transition: transform cubic-bezier(.215,.61,.355,1) 1.8s; -ms-transition: transform cubic-bezier(.215,.61,.355,1) 1.8s; -o-transition: transform cubic-bezier(.215,.61,.355,1) 1.8s; -webkit-transition: transform cubic-bezier(.215,.61,.355,1) 1.8s; -moz-transition: transform cubic-bezier(.215,.61,.355,1) 1.8s } .double_show_child { transition: transform cubic-bezier(.215,.61,.355,1) 1.8s; -ms-transition: transform cubic-bezier(.215,.61,.355,1) 1.8s; -o-transition: transform cubic-bezier(.215,.61,.355,1) 1.8s; -webkit-transition: transform cubic-bezier(.215,.61,.355,1) 1.8s; -moz-transition: transform cubic-bezier(.215,.61,.355,1) 1.8s; transform: translateX(80%); -ms-transform: translateX(80%); -o-transform: translateX(80%); -webkit-transform: translateX(80%); -moz-transform: translateX(80%) } .double_show.scroll-watch-in-view:after { transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); -webkit-transform: translateX(100%); -moz-transform: translateX(100%) } .double_show.scroll-watch-in-view .double_show_child { transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0) } .double_show.scroll-watch-in-view .show_bottom { opacity: 1; visibility: visible; transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0) } .scroll-watch-in-view .flip { visibility: visible!important; animation: flip ease 1.5s 1 both; -webkit-animation: flip ease 1.5s 1 both; -moz-animation: flip ease 1.5s 1 both; -o-animation: flip ease 1.5s 1 both } .scroll-watch-in-view.flip { visibility: visible!important; animation: flip ease 1.5s 1 both; -webkit-animation: flip ease 1.5s 1 both; -moz-animation: flip ease 1.5s 1 both; -o-animation: flip ease 1.5s 1 both } @keyframes serv_one_border { 0% { opacity: 0 } 5% { opacity: 1 } 80% { opacity: 0 } 100% { opacity: 0; transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -moz-transform: scale(1.5) } } @keyframes show_bottom { 0% { opacity: 0; transform: translateY(20%); -ms-transform: translateY(20%); -o-transform: translateY(20%); -webkit-transform: translateY(20%); -moz-transform: translateY(20%) } 100% { opacity: 1; transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0) } } @keyframes flip { 0% { opacity: 0; transform: rotateY(-125deg) translateX(-60px); -ms-transform: rotateY(-125deg) translateX(-60px); -o-transform: rotateY(-125deg) translateX(-60px); -webkit-transform: rotateY(-125deg) translateX(-120px); -moz-transform: rotateY(-125deg) translateX(-60px) } 20% { opacity: 0 } 100% { opacity: 1; transform: rotateY(0) translateX(0); -ms-transform: rotateY(0) translateX(0); -o-transform: rotateY(0) translateX(0); -webkit-transform: rotateY(0) translateX(0); -moz-transform: rotateY(0) translateX(0) } } @media (max-width:640px) { .scroll-watch-in-view.show_mask2:after { left: 40% } }