@charset "UTF-8"; @import url(http://fonts.googleapis.com/css?family=Roboto); @import url(http://fonts.googleapis.com/css?family=Montserrat); @font-face { font-family: 'Roboto'; src: url('fonts/Roboto-Regular-webfont.eot'); src: url('fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Regular-webfont.woff') format('woff'), url('fonts/Roboto-Regular-webfont.ttf') format('truetype'), url('fonts/Roboto-Regular-webfont.svg#Roboto') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Roboto-Medium'; src: url('fonts/Roboto-Medium-webfont.eot'); src: url('fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Medium-webfont.woff') format('woff'), url('fonts/Roboto-Medium-webfont.ttf') format('truetype'), url('fonts/Roboto-Medium-webfont.svg#Roboto-Medium') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Roboto-Bold'; src: url('fonts/Roboto-Bold-webfont.eot'); src: url('fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Bold-webfont.woff') format('woff'), url('fonts/Roboto-Bold-webfont.ttf') format('truetype'), url('fonts/Roboto-Bold-webfont.svg#Roboto-Bold') format('svg'); font-weight: normal; font-style: normal; } font-face { font-family: montserrat_light; src: url(font/Montserrat-Light.eot); src: url(font/Montserrat-Light.eot?#iefix) format('embedded-opentype'), url(font/Montserrat-Light.woff) format('woff'), url(font/Montserrat-Light.ttf) format('truetype'), url(font/Montserrat-Light.svg#montserrat_light) format('svg'); font-weight: 400; font-style: normal } @font-face { font-family: montserrat; src: url(font/Montserrat-Regular.eot); src: url(font/Montserrat-Regular.eot?#iefix) format('embedded-opentype'), url(font/Montserrat-Regular.woff) format('woff'), url(font/Montserrat-Regular.ttf) format('truetype'), url(font/Montserrat-Regular.svg#montserrat) format('svg'); font-weight: 400; font-style: normal; } @font-face { font-family: montserrat_bold; src: url(font/Montserrat-Bold.eot); src: url(font/Montserrat-Bold.eot?#iefix) format('embedded-opentype'), url(font/Montserrat-Bold.woff) format('woff'), url(font/Montserrat-Bold.ttf) format('truetype'), url(font/Montserrat-Bold.svg#montserrat_bold) format('svg'); font-weight: 400; font-style: normal; } @font-face { font-family: 'montserrat_bold_web'; src: url('font/montserrat-bold-webfont.eot'); src: url('font/montserrat-bold-webfont.eot?#iefix') format('embedded-opentype'), url('font/montserrat-bold-webfont.woff') format('woff'), url('font/montserrat-bold-webfont.ttf') format('truetype'), url('font/montserrat-bold-webfont.svg#montserrat_bold') format('svg'); font-weight: normal; font-style: normal; } .benefitsPoints, .quotes, .whyussecMob .wut li, ul, ul li { list-style-type: none } .btn_red a, a { text-decoration: none } a, a:hover, img, selected, visited { border: 0 } .red_btn:hover, .red_btn_small { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f04a52', endColorstr='#d92c35', GradientType=0) } .btn_green a, .customerssec, .iotsec, .profile_wrap, .resourcessec, .testimonials_sec { vertical-align: middle } .blue_btn a, .btn_migrate a { box-sizing: border-box; letter-spacing: .07em } a, body, div, h1, h2, h3, h4, h5, img, input, li, p, ul { margin: 0; padding: 0; } .testimonials h2, body { font-family: Roboto!important } * { margin: 0; padding: 0; outline: 0 } a, input:focus, textarea, textarea:focus { outline: 0 } textarea { resize: none; overflow: hidden } .slicknav_btn { padding: 2.4em 1em!important; } .fleft, .left { float: left } .right { float: right } .NoBG { background-image: none!important } .nomarginT { margin-top: 0!important } .marginZ { margin: 0!important } .paddingZ { padding: 0!important } .minheight { min-height: 450px } .fullWidth { width: 100%!important } .video-container { position: fixed; box-shadow: 0 0 1000px 1000px rgba(0,0,0,.8); display: none; width: 100%; height: 100%; z-index: 999999; background-color: rgba(0,0,0,.8) } .video-container .frame_wrapper { background: #fff; padding: 10px; border-radius: 5px; width: 60%; height: 70%; margin: 5% auto; position: relative } .close-video img { position: absolute } body { max-width: 100%; font-size: 13px; margin: 0; padding: 0; -webkit-transition: all .2s ease; -moz-transition: all all .2s ease ease-out; -o-transition: all all .2s ease ease-out; transition: all all .2s ease ease-out } strong { font-weight: 700!important; color: #545454!important } header { position: fixed; width: 100%; z-index: 2147483647; top: 0 } .customers, .demo_Banner_wrapper, .iot, .persona, .profile, .resources, .showcase, .testimonials, .whyus { display: table; margin: 0 auto; position: relative; width: 100%; max-width: 100%; -webkit-background-size: cover!important; -moz-background-size: cover!important; -o-background-size: cover!important; background-size: cover!important; background-attachment: fixed!important; height: 650px; overflow: hidden } .demo_Banner_wrapper { text-align: center!important; display: block!important; margin: 10px 0 0;} .demo_Banner_wrapper video { margin: 0 0 0 -1px; position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transform: translateX(-50%) translateY(-50%); background: url(https://s3-us-west-2.amazonaws.com/shepwebimg/shephertz/video-bg.jpg?shep25072016) no-repeat; backg.blue_btn around-size: cover; transition: 1s opacity } .overlay { display: table-cell; vertical-align: middle; background: rgba(0,0,0,.4); height: 100% } .persona { background: url(https://s3-us-west-2.amazonaws.com/shepwebimg/shephertz/parallax_bg1.jpg?shep25072016) 50% 0 no-repeat #f8f8f8 } .profile { background-color: #f8f8f8 } .customers, .showcase { background: url(https://s3-us-west-2.amazonaws.com/shepwebimg/shephertz/parallax_bg3_1.jpg?shep25072016) 50% 0 no-repeat; box-shadow: 0 0 5px rgba(0,0,0,.8) } .testimonials { background-color: #f3f6fb; box-shadow: 0 0 5px rgba(0,0,0,.8); position: relative; border-bottom: 2px solid #d6d6d6 } .testimonials h2 { color: #3e7996; font-size: 35px; margin: 0; text-align: center; width: 100%; position: absolute; top: 5% } .resources { background: radial-gradient(rgba(0,0,0,.45), rgba(0,0,0,.85)), url(https://s3-us-west-2.amazonaws.com/shepwebimg/shephertz/parallax_bg5.jpg?shep25072016) 50% 0 no-repeat #7ab0b6; background: -moz-radial-gradient(rgba(0,0,0,.45), rgba(0,0,0,.85)), url(https://s3-us-west-2.amazonaws.com/shepwebimg/shephertz/parallax_bg5.jpg?shep25072016) 50% 0 no-repeat #7ab0b6; background: -o-radial-gradient(rgba(0,0,0,.45), rgba(0,0,0,.85)), url(https://s3-us-west-2.amazonaws.com/shepwebimg/shephertz/parallax_bg5.jpg?shep25072016) 50% 0 no-repeat #7ab0b6; background: -webkit-radial-gradient(rgba(0,0,0,.45), rgba(0,0,0,.85)), url(https://s3-us-west-2.amazonaws.com/shepwebimg/shephertz/parallax_bg5.jpg?shep25072016) 50% 0 no-repeat #7ab0b6 } .whyus { background: url(https://s3-us-west-2.amazonaws.com/shepwebimg/shephertz/parallax_bg1.jpg?shep25072016) 50% 0 no-repeat #f8f8f8; display: block!important; float: left } .iot { background: url(https://s3-us-west-2.amazonaws.com/shepwebimg/shephertz/iot.png?25072016) 50% 0 no-repeat #f8f8f8; display: table } .btn_green, .imgwrap, .proboxmr, .profile_box h1, .profile_box p { clear: both } .bx-wrapper { background-color: transparent!important } .breadcrumb_wrapper { display: none } .background-video { position: absolute; width: 100%; height: 110%; display: table;} .demo_Banner_wrapper h1 { float: left; color: #fff; font-size: 42px; font-family: montserrat_bold_web; text-align: center; width: 100%; font-weight: normal; } .demo_Banner_wrapper span { color: #fff; font-weight: normal; font-family: montserrat_light; font-size: 20px; letter-spacing: 0.03em; width: 100%; clear: both; float: left; margin-top: 30px } .cta_pos { float: left; width: 100%; margin: 50px 0 0 0; } .banner_bg { background: url(https://s3-us-west-2.amazonaws.com/shepwebimg/shephertz/banner.jpg?shep25072016) 50% 0 no-repeat fixed; -webkit-background-size: cover!important; -moz-background-size: cover!important; -o-background-size: cover!important; background-size: cover!important; text-align: center!important; min-height: 525px; height: 643px; width: 100%!important } section.get_started_wrapper { width: 100%; float: left; background: rgba(0,0,0,.55); padding: 0; height: 70px; position: absolute; bottom: 0 } .red_btn, .red_btn:hover { color: #fff; background-color: #f04a52 } section.get_started_wrapper .get_started_inner { max-width: 1024px; margin: 0 auto } section.get_started_wrapper article.get_started_containt { width: 98%; float: left; padding: 15px 1% } article.get_started_containt h3 span { position: absolute; font-size: 13px; right: 0; top: 32px } article.get_started_containt figure { float: right; margin-right: 5%; outline: 0; padding: 3px 0 0 } article.get_started_containt figure img { width: 98% } article.get_started_containt h3 { font-weight: 400; color: #fff; font-size: 19px; font-family: Roboto!important; float: left; display: block; padding: 7px 0 0; position: relative } .blue_btn a, .red_btn { cursor: pointer; font-size: 16px; } .red_btn { width: 270px; font-family: Roboto; height: 50px; padding: 0 25px; line-height: 50px!important } .red_btn:hover { background-image: -webkit-gradient(linear, left 0, left 100%, from(#f04a52), to(#d92c35)); background-image: -webkit-linear-gradient(top, #f04a52, 0, #d92c35, 100%); background-image: -moz-linear-gradient(top, #f04a52 0, #d92c35 100%); background-image: linear-gradient(to bottom, #f04a52 0, #d92c35 100%); background-repeat: repeat-x } .blue_btn a { display: inline-block; background: #eb473b; border: solid #eb473b; color: #FFF; font-family: montserrat_light; text-align: center; padding: 13px 40px; min-width: 3.2em; -webkit-transition: background .2s, box-shadow .2s; transition: background .2s, box-shadow .2s; appearance: none; -o-appearance: none; -ms-appearance: none; -moz-appearance: none; -webkit-appearance: none; letter-spacing: 0.03em; } .red_btn_small, .trans_btn { width: auto; font-size: 14px; text-transform: capitalize; font-family: Roboto; color: #fff; height: 37px; padding: 0 15px; line-height: 37px!important; cursor: pointer; letter-spacing: 0.03em; } .blue_btn a:hover { background: #f43527 } .red_btn_small { background-color: #f04a52; background-image: -webkit-gradient(linear, left 0, left 100%, from(#f04a52), to(#d92c35)); background-image: -webkit-linear-gradient(top, #f04a52, 0, #d92c35, 100%); background-image: -moz-linear-gradient(top, #f04a52 0, #d92c35 100%); background-image: linear-gradient(to bottom, #f04a52 0, #d92c35 100%); background-repeat: repeat-x } .red_btn_small:hover { color: #fff; background-color: #d92c35; background-image: -webkit-gradient(linear, left 0, left 100%, from(#d92c35), to(#f04a52)); background-image: -webkit-linear-gradient(top, #d92c35, 0, #f04a52, 100%); background-image: -moz-linear-gradient(top, #d92c35 0, #f04a52 100%); background-image: linear-gradient(to bottom, #d92c35 0, #f04a52 100%); background-repeat: repeat-x; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d92c35', endColorstr='#d92c35', GradientType=0) } .trans_btn { background-color: transparent; border: 1px solid #fff; border-radius: 37px } .game_dev:hover .trans_btn { background-color: #f04a52; background-image: -webkit-gradient(linear, left 0, left 100%, from(#f04a52), to(#d92c35)); background-image: -webkit-linear-gradient(top, #f04a52, 0, #d92c35, 100%); background-image: -moz-linear-gradient(top, #f04a52 0, #d92c35 100%); background-image: linear-gradient(to bottom, #f04a52 0, #d92c35 100%); background-repeat: repeat-x; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f04a52', endColorstr='#d92c35', GradientType=0); } .profile_wrap { width: 90%; margin: auto; display: table-cell } .profile_wrap h2 { color: #3e7996; font-size: 35px; font-family: Roboto!important; margin: -65px 0 40px; width: auto; text-align: center } .profile_box { width: 25%; float: left; height: 100px; background-image: url(https://s3-us-west-2.amazonaws.com/shepwebimg/shephertz/seprator_pro.png?25072016); background-repeat: no-repeat; min-height: 350px; background-position: right; text-align: center } .profile_box:last-child { background: 0 0!important } .profile_box img { max-width: 100%; height: auto; transition: all .25s ease-in-out 0s } .customersMain, .customerssec { margin-left: auto; margin-right: auto; height: 100%; text-align: center } .profile_box img:hover { padding-top: 10px } .profile_box h1 { color: #1c6894; font-family: Roboto; font-size: 19px; line-height: 36px; padding: 20px 0 } .profile_box h1 span { font-family: Roboto } .profile_box p { color: #606060; font-family: Roboto; font-size: 14px; line-height: 20px; padding: 0 15px; min-height: 65px } .customerssec { width: 100%; display: table-cell } .customersMain { width: 980px } section.customer_slides { width: 100%; float: left } .apiCalls, .cust_map, .slide1, .slide2, .slide3, .target_seg, .vendor, .we_serve { height: 525px; position: relative!important; text-align: center!important; width: 100%!important } .fadeInDown { position: absolute; top: 0 } .bx-wrapper { position: relative; margin: 0 auto 50px; padding: 0 } .bx-wrapper img { width: 26px; display: block } .bx-wrapper .bx-viewport { background-color: transparent } .bx-wrapper .bx-controls-auto, .bx-wrapper .bx-pager { position: absolute; bottom: -20px; width: 100%; z-index: 999 } .bx-wrapper .bx-loading { min-height: 50px; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 2000 } .bx-wrapper .bx-pager { text-align: center; font-size: .85em; font-family: Roboto; font-weight: 700; color: #666; height: 50px } .apiCalls .s_heading, .apiCalls span, .slide1 .s_heading, .slide1 span { font-weight: 700!important } .bx-wrapper .bx-controls-auto .bx-controls-auto-item, .bx-wrapper .bx-pager .bx-pager-item { display: inline-block } .bx-wrapper .bx-pager.bx-default-pager a { background: #81c7eb; text-indent: -9999px; display: block; width: 13px; height: 13px; margin: 0 5px; outline: 0; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px } .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:hover { background: #114253 } .bx-wrapper .bx-prev { left: .5%; background: url(https://s3-us-west-2.amazonaws.com/cdn.shephertz-images.com/ShepHertz/images/banner/arrow-prev.png?25072016) no-repeat } .bx-wrapper .bx-next { right: .5%; background: url(https://s3-us-west-2.amazonaws.com/cdn.shephertz-images.com/ShepHertz/images/banner/arrow-next.png?25072016) no-repeat } .bx-wrapper .bx-prev:hover { background-position: 0 0 } .bx-wrapper .bx-controls-direction a { position: absolute; top: 50%; margin-top: -16px; outline: 0; width: 46px; height: 46px; text-indent: -9999px; z-index: 900 } .bx-wrapper .bx-controls-auto { text-align: center } .bx-wrapper .bx-controls-auto .bx-start { display: block; text-indent: -9999px; width: 10px; height: 11px; outline: 0; -86px -11px no-repeat; margin: 0 3px } .bx-wrapper .bx-controls-auto .bx-start.active, .bx-wrapper .bx-controls-auto .bx-start:hover { background-position: -86px 0 } .bx-wrapper .bx-controls-auto .bx-stop { display: block; text-indent: -9999px; width: 9px; height: 11px; outline: 0; background: url(images/controls.png?25072016) -86px -44px no-repeat; margin: 0 3px } .bx-wrapper .bx-controls-auto .bx-stop.active, .bx-wrapper .bx-controls-auto .bx-stop:hover { background-position: -86px -33px } .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { text-align: left; width: 80%; position: absolute; z-index: 999 } .apiCalls p, .cust_map p, .slide1 .s_heading, .slide1Txt, .testimonials_sec h1, .vendor p, .vendor span, .video_title, .video_title_text h3, .video_title_text span, .we_serve p, .we_serve span { text-align: center } .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { right: 0; width: 35px } .bx-wrapper .bx-caption { position: absolute; bottom: 0; left: 0; background: rgba(80,80,80,.75); width: 100% } .bx-wrapper .bx-caption span { color: #fff; font-family: Roboto; display: block; font-size: .85em; padding: 10px } .bx-pager { display: none } .apiCalls p { color: #e1e1e1; font-size: 48px; margin-top: 150px; margin-bottom: 20px } .apiCalls .s_heading, .apiCalls span, .jumbo { color: #fff!important } .apiCalls .s_heading { font-size: 18px!important; margin-top: 20px; font-family: Roboto } .jumbo, .map { margin-top: 40px } .jumbo { font-size: 80px } .map { position: absolute; left: 28% } .cust_map p { color: #fff; font-size: 32px; margin-top: 50px; margin-bottom: 20px } .api_map { position: absolute; margin-top: 25%; margin-left: 20%; height: 100% } .map img { width: 100%!important } .we_serve { background-image: url('https://s3-us-west-2.amazonaws.com/shepwebimg/shephertz/we_support.png?25072016; background-repeat: no-repeat; background-position: 50% 0;') } .weserveTitle { margin-top: 80px; margin-bottom: 50px; width: 100% } .we_serve p { color: #0aa2a9; font-size: 42px; line-height: 54px; border-bottom: 2px solid #efefef; padding: 0 0 10px; margin: 0 0 10px; display: inline } .we_serve span { color: #9575cd; font-size: 24px } .slide1Txt { font-family: Roboto; color: #2aa9e0; font-size: 35px; margin-top: 120px; float: left; padding: 0 5%; width: 90% } .slide1 span { color: #2aa9e0!important } .slide1 .s_heading { color: #fff!important; line-height: 30px; font-size: 22px!important; margin-top: 20px; font-family: Roboto; float: left; width: 100% } .slide2 h1, .slide2 span, .slide3 h1, .slide3 h1 .gPresence { font-family: Roboto; text-align: center } .slide2 h1 { color: #2aa9e0; font-size: 35px; margin-bottom: 20px; margin-top: 20px } .slide2 span { font-size: 20px; margin-top: 150px; margin-bottom: 20px; color: #fff } .slide2 .catg1 { position: absolute; left: 15%; top: 0 } .slide2 .catg2 { position: absolute; left: 30%; top: 15% } .slide2 .catg3 { position: absolute; right: 30%; top: 15% } .slide2 .catg4 { position: absolute; right: 15%; top: 0 } .slide2 .catg6 { position: absolute; right: 43%; top: 40% } .testi1, .testi2, .testi3 { top: -24px; z-index: 99999 } .slide3 h1 { color: #2aa9e0; font-size: 35px; margin-top: 0; margin-bottom: 40px } .slide3 h1 .gPresence { color: #e1e1e1; font-size: 22px; float: left; width: 100%; margin: 10px 0 } .vendor p { color: #fff; font-size: 32px; margin-top: 250px } .vendor span { color: #26c6da; font-size: 42px; font-weight: 700 } .testimonials_sec { width: 80%; margin-left: auto; margin-right: auto; height: auto; display: table-cell } .testimonials_sec h1 { padding: 0 0 90px } .test_container { width: 100%; display: block } .test_box { width: 80%; display: block; float: left; background-color: #efefef; margin-right: 65px; cursor: default; transition: all .2s ease 0s; height: 280px; position: relative; margin-left: 10% } .img-over, .img-over img, .testi1, .testi2, .testi3, .video, .video_title_text { position: absolute } .test_box:hover { border-bottom: 3px solid #e7512f } .test_box:hover .video { border: 3px solid #cacaca } .video { display: block;  width: 120px; height: 120px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; margin-left: 33%; margin-top: -10%; border: 3px solid #d8d7d7 } .testi1 { background: url(https://s3-us-west-2.amazonaws.com/shepwebimg/shephertz/testi_img2.jpg?shep25072016) no-repeat!important; background-size: 100% 100%!important } .testi2 { background: url(https://s3-us-west-2.amazonaws.com/shepwebimg/shephertz/testi_img2_1.jpg?shep25072016) no-repeat!important; background-size: 100% 100%!important } .testi3 { background: url(https://s3-us-west-2.amazonaws.com/shepwebimg/shephertz/testi_img3.jpg?shep25072016) no-repeat!important; background-size: 100% 100%!important } .img-over { background: rgba(240,74,82,.6); top: 0; left: 0; width: 100%; height: 200px; float: left; opacity: 0; transition: all .6s ease 0s; -webkit-transition: all .6s ease 0s; -moz-transition: all .6s ease 0s } .img-over img { top: 45%; left: 46%; opacity: 1!important } .test_box:hover .img-over { opacity: 1 } .video_title { background-color: #eee; font-size: 20px; color: #f04a52; font-family: Roboto; padding: 15px 0 } .video_title span { padding: 20px 0 } .video_title_text { width: 100%; height: 280px; left: 0; top: 0; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; background-color: #efefef; padding: 15px 0; border-bottom: 1px solid #e7512f } .video_title_text:hover { border-bottom: 2px solid #e7512f } .vttI { float: left; position: absolute!important; top: 90px!important; width: 100% } .testi_box1, .testi_box2, .testi_box3, .testi_box4 { position: absolute } .video_title_text h3 { float: left; width: 100%; color: #f04a52; font-size: 18px } .video_title_text span { float: left; width: 100%; color: #636363!important; font-size: 14px!important; line-height: 20px; padding: 5px 0 10px } .video_title_text p { color: #636363!important; font-size: 12px!important; text-align: justify; line-height: 16px; padding: 0 20px!important } .theysaid h3, .theysaid p, .theysaid span { font-family: Roboto; line-height: 18px } .test_box:hover .video_title_text { top: 0; background: rgba(238,238,238,1) } .video_title_text span { top: 10px } .video_title span { font-size: 18px; color: #f04a52; text-align: center; top: 0!important } .lrgscr { display: block!important } .smlscr { display: none!important } .testi_box1 { left: 5% } .testi_box2 { right: 5% } .testi_box3 { left: 7%; bottom: -30px } .testi_box4 { left: 56%; bottom: -50px } .theysaid { text-align: left; width: 370px; border-radius: 4px; padding: 29px 15px; box-sizing: border-box; box-shadow: inset 0 1px #fff, 0 1px 2px #B3BAD0; position: relative; background: #f8faff } .sprite_arrow { background: url(https://s3-us-west-2.amazonaws.com/shepwebimg/shephertz/quote_arrow.png?25072016) no-repeat } .sprite_arrow.arrow-btmlef, .sprite_arrow.arrow-lfttop { background-position: 0 0; left: -22px; position: absolute; width: 22px; height: 23px } .sprite_arrow.arrow-lfttop { top: 20px } .sprite_arrow.arrow-btmlef { top: 155px } .sprite_arrow.arrow-botrght { background-position: -24px 0; position: absolute; width: 22px; height: 23px; right: 40px; top: 177px } .sprite_arrow.arrow-botrght1, .sprite_arrow.arrow-botrght2 { background-position: -92px 0; width: 22px; height: 23px; right: -21px; position: absolute } .sprite_arrow.arrow-botrght1 { top: 100px } .sprite_arrow.arrow-botrght2 { top: 60px } .theysaid.bubble1 { position: absolute; left: 170px; top: 110px } .theysaid.bubble2 { position: absolute; right: 150px; top: 110px } .theysaid.bubble3 { position: absolute; left: 170px; bottom: 110px } .theysaid.bubble4 { bottom: 110px; left: -58px; position: absolute } .testi_box4 img { float: right!important } .theysaid h3 { font-size: 16px; margin-bottom: 5px!important; font-weight: 700!important } .theysaid span { font-size: 14px; font-weight: 700!important } .theysaid p { font-size: 13px; color: #858585; padding-top: 5px!important } .resr_title_text p { font-size: 13px; color: #e4e4e4; padding-top: 15px; text-align: justify } .resourcessec { width: 80%; margin-left: auto; margin-right: auto; height: 100%; display: table-cell } .resourcessec h1 { font-size: 38px; padding: 0 0 65px; color: #fff; text-align: center; font-family: Roboto } .resourcessec h1 span { font-size: 35px; font-family: Roboto } .resr_container { width: 100%; display: block } .resr_box { display: block; float: left; height: auto; margin-right: 65px; cursor: pointer; transition: all .2s ease 0s; margin-bottom: 20px } .resourcesRow { width: 100%; max-width: 745px; margin: 0 auto } .resource { display: block; position: relative; width: 280px; height: 290px } .btn_redD, .link-over, .link-over img { position: absolute } .resourceCol { width: 201px; float: left; margin: 0 145px 0 0 } .resourceCol:last-child { margin-right: 0 } .resr_title { float: left; width: 300px } .res1 { background: url(https://s3-us-west-2.amazonaws.com/shepwebimg/shephertz/pokkt.png?25072016) no-repeat!important; background-size: 100% 100%!important } .res2 { background: url(https://s3-us-west-2.amazonaws.com/shepwebimg/shephertz/zapak.png?25072016) no-repeat!important; background-size: 100% 100%!important } .res3 { background: url(https://s3-us-west-2.amazonaws.com/shepwebimg/shephertz/case_study3.jpg?shep25072016) no-repeat!important; background-size: 100% 100%!important } .link-over { background: rgba(240,74,82,.6); top: 0; left: 0; width: 100%; height: 263px; float: left; opacity: 0; transition: all .6s ease 0s; -webkit-transition: all .6s ease 0s; -moz-transition: all .6s ease 0s } .resr_title .download, .resr_title h3 { text-align: center; width: 240px; float: right } .link-over img { top: 45%; left: 46%; opacity: 1!important } .resr_box:hover .link-over { opacity: 1 } .resr_title h3 { font-size: 16px; color: #fff; margin-top: 15px } .resr_title a { color: #fff; text-align: center; transition: all .2s ease } .resr_title a:hover { color: #d0e9ea } .resr_title .download { margin-top: 20px; cursor: pointer } .resr_title p { font-size: 13px; color: #e4e4e4; padding-top: 15px; text-align: justify } .btn_green a, .btn_red { border-radius: .2rem; cursor: pointer; font-family: Roboto; font-size: 16px } .btn_red { width: auto; height: auto; background-color: #4caf50; color: #fff; text-transform: uppercase; border-bottom: 3px solid #3f9943; box-shadow: 0 4px 9px rgba(0,0,0,.15); padding: 10px 30px } .btn_red a { color: #fff } .btn_redD { left: 30%; bottom: 10% } .btn_red:hover { background-color: #3f9943 } .btn_green { display: table; height: 65px; margin: 20px 6%; float: left; width: 88% } .btn_green a { background-color: #60cc69; border-bottom: 3px solid #2b8532; box-shadow: 0 1px #fff inset, 4px 4px 2px rgba(198,201,205,.3); color: #fff; height: auto; padding: 4%; width: 92%; display: table-cell; transition: all .25s ease-in-out 0s } .sliderBtn, .sliderBtn2 { position: absolute; width: 100%; text-align: center } .btn_green a:hover { background-color: #4aba53; padding-right: 20px } .btn_greenA a { background-color: #2aa9e0!important; border-bottom: 3px solid #0988bf!important } .btn_greenA a:hover { background-color: #0a8cc4!important; border-bottom: 3px solid #0873a1!important } .sliderBtn { bottom: 6% } .sliderBtn2 { top: 42% } .iotsec, .whyussec { width: 80%; margin-left: auto; margin-right: auto } .sliderBtn3 { top: 82% } .quotes, .slidetxt { display: none } .whyussec { height: 100%; display: block!important } .iotsec { display: table-cell } .iotsec .zone { float: left; width: 42%; margin: 0 0 0 5% } .iotsec .zone h3 { color: #fff; font-size: 34px; font-family: Roboto; text-shadow: -3px 3px 3px rgba(0,0,0,.5); margin: 0 0 5px; float: left; width: 100% } .iotsec .zone h4 { color: #fff; font-size: 21px; font-family: Roboto; margin: 0 0 30px; float: left; width: 100% } .iotsec .zone .iotBtn a, .iotsec .zone p { color: #fff; font-family: Roboto; font-size: 18px; float: left } .iotsec .zone p { margin: 0 0 60px; width: 100% } .iotsec .zone .iotBtn { float: left } .iotsec .zone .iotBtn a { background-color: #2aa9e0; border-bottom: 3px solid #0988bf; border-radius: 5px; padding: 15px 50px; text-transform: uppercase } .iotsec .zone .iotBtn a:hover { background-color: #0a8cc4!important; border-bottom: 3px solid #0873a1!important } .whyus_txt { font-size: 16px; color: #525558; line-height: 20px; font-weight: 400!important } .whyussecMob { width: 94%; margin: 0 3%; height: 100%; display: none!important } .whyussecMob .whyusTitle { font-family: Roboto; font-size: 28px!important; float: left; width: 100%; text-align: center; left: 0!important; top: 0!important; padding: 20px 0!important; position: static!important } .btn_cont, .desc { left: 20%; text-align: center } .bg-overlay, .btn_cont, .desc, .overlay_box { position: absolute } .whyussecMob .wut { float: left; width: 100% } .whyussecMob .wut ul { margin: 0; padding: 0; float: left } .whyussecMob .wut li { font-family: Roboto; color: #525558; font-size: 16px!important; float: left; margin: 0 0 20px; padding: 0 0 0 40px; background: url(https://s3-us-west-2.amazonaws.com/shepwebimg/shephertz/point_arrow.png?25072016) no-repeat!important } .overlay_box { width: 88%!important; height: 100%; top: 0 } .desc { color: #fff; font-size: 14px; bottom: 20% } .btn_cont { margin: 0 auto; width: 60%; bottom: 5% } .bg-overlay { display: block; height: 100%; top: 0; width: 100%; z-index: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; -khtml-opacity: .6; opacity: .6 } .bg-overlay.bg-overlay-gdark { background: -moz-radial-gradient(center, ellipse cover, rgba(37,36,44,.5) 0, rgba(37,36,44,.75) 50%, rgba(0,0,0,1) 100%); background: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0, rgba(37,36,44,.5)), color-stop(50%, rgba(37,36,44,.75)), color-stop(100%, rgba(0,0,0,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(37,36,44,.5) 0, rgba(37,36,44,.75) 50%, rgba(0,0,0,1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(37,36,44,.5) 0, rgba(37,36,44,.75) 50%, rgba(0,0,0,1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(37,36,44,.5) 0, rgba(37,36,44,.75) 50%, rgba(0,0,0,1) 100%); background: radial-gradient(ellipse at center, rgba(37,36,44,.5) 0, rgba(37,36,44,.75) 50%, rgba(0,0,0,1) 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8025242c', endColorstr='#000000', GradientType=1); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -khtml-opacity: 1; opacity: 1 } .bg-overlay.bg-overlay-ldark { background: -moz-radial-gradient(center, ellipse cover, rgba(37,36,44,.25) 0, rgba(37,36,44,.55) 50%, rgba(0,0,0,.95) 100%); background: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0, rgba(37,36,44,.25)), color-stop(50%, rgba(37,36,44,.55)), color-stop(100%, rgba(0,0,0,.95))); background: -webkit-radial-gradient(center, ellipse cover, rgba(37,36,44,.25) 0, rgba(37,36,44,.55) 50%, rgba(0,0,0,.95) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(37,36,44,.25) 0, rgba(37,36,44,.55) 50%, rgba(0,0,0,.95) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(37,36,44,.25) 0, rgba(37,36,44,.55) 50%, rgba(0,0,0,.95) 100%); background: radial-gradient(ellipse at center, rgba(37,36,44,.25) 0, rgba(37,36,44,.55) 50%, rgba(0,0,0,.95) 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8025242c', endColorstr='#000000', GradientType=1); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -khtml-opacity: 1; opacity: 1 } .explore_cont { width: 100px; height: 100px; background: rgba(0,0,0,.65); border-radius: 50%; border: 1px solid rgba(240,74,82,.9); position: relative; left: 25%; margin-top: 60% } #plus-sign-rounded, #plus-sign-rounded:before { background: #f04a52; position: absolute; border-radius: 20px } #plus-sign-rounded { width: 4px; height: 30px; left: 47%; top: 33% } #plus-sign-rounded:before { content: ""; width: 30px; height: 4px; top: 14px; left: -13px } .mob_app:hover .explore_cont { background: rgba(240,74,82,.6); border: 1px solid rgba(255,255,255,.9); transition: border-color .5s ease 0s, background-color .5s ease 0s } .mob_app:hover #plus-sign-rounded, .mob_app:hover #plus-sign-rounded:before { background: #fff; transition: background-color .5s ease 0s } .game_dev:hover .explore_cont { background: rgba(240,74,82,.6); border: 1px solid rgba(255,255,255,.9); transition: border-color .5s ease 0s, background-color .5s ease 0s } .game_dev:hover #plus-sign-rounded, .game_dev:hover #plus-sign-rounded:before { background: #fff; transition: background-color .5s ease 0s } .mrtp30 { margin-top: 30px!important } .cd-title { position: relative; height: 160px; line-height: 230px; text-align: center } #video-main, .lt-arrow { height: 239px; float: left } .cd-title h1 { font-size: 52px!important; font-weight: 700 } .cd-words-wrapper { display: inline-block; position: relative; text-align: justify } .cd-words-wrapper b { display: inline-block; position: absolute; white-space: nowrap; left: 0; top: 0 } .cd-words-wrapper b.is-visible, .shepintroWrapper { position: relative } #video-main, .btn_teal, .close-video, .video-button, .video-part, .video-part h3:after, .videoTitle, .videoTitle:after, .whyusTitle, .wui1, .wui3, .wui4, .wui5, .wui6, .wui7, .wut1, .wut2, .wut3, .wut4, .wut5, .wut6, .wut7 { position: absolute } .no-js .cd-words-wrapper b { opacity: 0 } .cd-headline.slide span { display: inline-block; padding: .2em 0 } .cd-headline.slide .cd-words-wrapper { overflow: hidden; vertical-align: top } .cd-headline.slide b { opacity: 0; top: .2em } .cd-headline.slide b.is-visible { top: 0; opacity: 1; -webkit-animation: slide-in .6s; -moz-animation: slide-in .6s; animation: slide-in .6s } .cd-headline.slide b.is-hidden { -webkit-animation: slide-out .6s; -moz-animation: slide-out .6s; animation: slide-out .6s } #video-main { width: 315px; right: 0; bottom: 0 } .lt-arrow { width: 40px } .lt-arrow img { margin: 35px 0 0 } .video-part { width: auto; float: left; height: auto; right: 0; bottom: 0 } .video-part h3:after, .videoTitle:after { float: left; height: 23px; width: 15px; top: 30px } .video-button { right: 30px; bottom: 15px } .video-button h3 { font: 700 26px Roboto; color: #2aa9e0; margin: 0 30px 20px 0 } .btn_migrate a, .testimonialsWrapper .testimonialsInner .testimonials .testimonial .testimonialSlide section .max-width .name { font-weight: 700 } .video-part h3:after { right: 18px } .cta_pos1 { display: none } .videoTitle { color: #2aa9e0; right: 30px!important; bottom: 35%; font-size: 26px; font-family: Roboto; } .btn_migrate a, .btn_teal a { box-shadow: 0 4px 9px rgba(0,0,0,.15); cursor: pointer; text-transform: uppercase; letter-spacing: 0.03em; font-family: montserrat_light !important; } .videoTitle:after { content: url(https://s3-us-west-2.amazonaws.com/shepwebimg/shephertz/arrow-video.png?25072016); right: -14px } .video_wrapper { background-color: #fff; border-color: #ddd; color: #333; text-shadow: 0 1px 0 #f3f3f3; width: 60%; height: 78%; margin: 5% auto; border-radius: 5px; padding: 10px } .close-video { top: -19px; right: -19px } @-webkit-keyframes slide-in { 0% { opacity:0; -webkit-transform:translateY(-10%) } 60% { opacity:1; -webkit-transform:translateY(20%) } 100% { opacity:1; -webkit-transform:translateY(0) } } @-moz-keyframes slide-in { 0% { opacity:0; -moz-transform:translateY(-10%) } 60% { opacity:1; -moz-transform:translateY(20%) } 100% { opacity:1; -moz-transform:translateY(0) } } @keyframes slide-in { 0% { opacity:0; -webkit-transform:translateY(-10%); -moz-transform:translateY(-10%); -ms-transform:translateY(-10%); -o-transform:translateY(-10%); transform:translateY(-10%) } 60% { opacity:1; -webkit-transform:translateY(20%); -moz-transform:translateY(20%); -ms-transform:translateY(20%); -o-transform:translateY(20%); transform:translateY(20%) } 100% { opacity:1; -webkit-transform:translateY(0); -moz-transform:translateY(0); -ms-transform:translateY(0); -o-transform:translateY(0); transform:translateY(0) } } @-webkit-keyframes slide-out { 0% { opacity:1; -webkit-transform:translateY(0) } 100%, 60% { opacity:0; -webkit-transform:translateY(0) } } @-moz-keyframes slide-out { 0% { opacity:1; -moz-transform:translateY(0) } 100%, 60% { opacity:0; -moz-transform:translateY(0) } } @keyframes slide-out { 0% { opacity:1; -webkit-transform:translateY(0); -moz-transform:translateY(0); -ms-transform:translateY(0); -o-transform:translateY(0); transform:translateY(0) } 100%, 60% { opacity:0; -webkit-transform:translateY(0); -moz-transform:translateY(0); -ms-transform:translateY(0); -o-transform:translateY(0); transform:translateY(0) } } .whyusTitle { left: 42%; top: 40%; color: #333538; font-size: 45px } .wut1 { left: 10%; top: 20% } .wui1 { left: 40%; top: 30% } .wut2 { left: 61%; top: 20% } .wui2 { position: absolute; left: 56%; top: 31% } .wut3 { left: 70%; top: 38% } .wui3 { left: 64%; top: 41% } .wut4 { left: 63%; top: 62% } .wui4 { left: 57%; top: 57% } .wut5 { left: 11%; top: 62% } .wui5 { left: 36%; top: 54% } .wui6, .wut6 { top: 40% } .wut6 { left: 4% } .wui6 { left: 33% } .wut7 { left: 34%; top: 70%; width: 300px; text-align: center } .wui7 { left: 46%; top: 61%; transform: rotate(-90deg); -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg) } .no-js .cd-words-wrapper b.is-visible { opacity: 1 } .btn_teal { left: 30%; bottom: 10% } .btn_teal a { width: auto; height: auto; background-color: #00988c; color: #fff; font-size: 16px; border-radius: .2rem; padding: 10px 30px } .btn_teal a:hover { background-color: #02847a } .btn_migrate { position: fixed; bottom: 0; right: 10px; z-index: 10000 } .btn_migrate a { display: inline-block; background: #00988c; color: #FFF; font-size: 13px; text-shadow: none; text-align: center; padding: 10px 15px; -webkit-transition: background .2s, box-shadow .2s; transition: background .2s, box-shadow .2s; border-top-left-radius: 5px; border-top-right-radius: 5px; font-weight: normal; } .btn_migrate a:hover { background-color: #02847a } @media screen and (-webkit-min-device-pixel-ratio:0) { .customers, .demo_Banner_wrapper, .persona, .profile, .resources, .showcase, .testimonials, .whyus { background-attachment: scroll!important } } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s } .bounceIn, .bounceOut, .flipOutX { -webkit-animation-duration: .75s } @-webkit-keyframes bounce { 0%, 100%, 20%, 53%, 80% { -webkit-transition-timing-function:cubic-bezier(.215, .61, .355, 1); transition-timing-function:cubic-bezier(.215, .61, .355, 1); -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0) } 40%, 43% { -webkit-transition-timing-function:cubic-bezier(.755, .050, .855, .060); transition-timing-function:cubic-bezier(.755, .050, .855, .060); -webkit-transform:translate3d(0, -30px, 0); transform:translate3d(0, -30px, 0) } 70% { -webkit-transition-timing-function:cubic-bezier(.755, .050, .855, .060); transition-timing-function:cubic-bezier(.755, .050, .855, .060); -webkit-transform:translate3d(0, -15px, 0); transform:translate3d(0, -15px, 0) } 90% { -webkit-transform:translate3d(0, -4px, 0); transform:translate3d(0, -4px, 0) } } @keyframes bounce { 0%, 100%, 20%, 53%, 80% { -webkit-transition-timing-function:cubic-bezier(.215, .61, .355, 1); transition-timing-function:cubic-bezier(.215, .61, .355, 1); -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0) } 40%, 43% { -webkit-transition-timing-function:cubic-bezier(.755, .050, .855, .060); transition-timing-function:cubic-bezier(.755, .050, .855, .060); -webkit-transform:translate3d(0, -30px, 0); transform:translate3d(0, -30px, 0) } 70% { -webkit-transition-timing-function:cubic-bezier(.755, .050, .855, .060); transition-timing-function:cubic-bezier(.755, .050, .855, .060); -webkit-transform:translate3d(0, -15px, 0); transform:translate3d(0, -15px, 0) } 90% { -webkit-transform:translate3d(0, -4px, 0); transform:translate3d(0, -4px, 0) } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom } @-webkit-keyframes flash { 0%, 100%, 50% { opacity:1 } 25%, 75% { opacity:0 } } @keyframes flash { 0%, 100%, 50% { opacity:1 } 25%, 75% { opacity:0 } } .flash { -webkit-animation-name: flash; animation-name: flash } @-webkit-keyframes pulse { 0%, 100% { -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } 50% { -webkit-transform:scale3d(1.05, 1.05, 1.05); transform:scale3d(1.05, 1.05, 1.05) } } @keyframes pulse { 0%, 100% { -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } 50% { -webkit-transform:scale3d(1.05, 1.05, 1.05); transform:scale3d(1.05, 1.05, 1.05) } } .pulse { -webkit-animation-name: pulse; animation-name: pulse } @-webkit-keyframes rubberBand { 0%, 100% { -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } 30% { -webkit-transform:scale3d(1.25, .75, 1); transform:scale3d(1.25, .75, 1) } 40% { -webkit-transform:scale3d(.75, 1.25, 1); transform:scale3d(.75, 1.25, 1) } 50% { -webkit-transform:scale3d(1.15, .85, 1); transform:scale3d(1.15, .85, 1) } 65% { -webkit-transform:scale3d(.95, 1.05, 1); transform:scale3d(.95, 1.05, 1) } 75% { -webkit-transform:scale3d(1.05, .95, 1); transform:scale3d(1.05, .95, 1) } } @keyframes rubberBand { 0%, 100% { -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } 30% { -webkit-transform:scale3d(1.25, .75, 1); transform:scale3d(1.25, .75, 1) } 40% { -webkit-transform:scale3d(.75, 1.25, 1); transform:scale3d(.75, 1.25, 1) } 50% { -webkit-transform:scale3d(1.15, .85, 1); transform:scale3d(1.15, .85, 1) } 65% { -webkit-transform:scale3d(.95, 1.05, 1); transform:scale3d(.95, 1.05, 1) } 75% { -webkit-transform:scale3d(1.05, .95, 1); transform:scale3d(1.05, .95, 1) } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand } @-webkit-keyframes shake { 0%, 100% { -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0) } 10%, 30%, 50%, 70%, 90% { -webkit-transform:translate3d(-10px, 0, 0); transform:translate3d(-10px, 0, 0) } 20%, 40%, 60%, 80% { -webkit-transform:translate3d(10px, 0, 0); transform:translate3d(10px, 0, 0) } } @keyframes shake { 0%, 100% { -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0) } 10%, 30%, 50%, 70%, 90% { -webkit-transform:translate3d(-10px, 0, 0); transform:translate3d(-10px, 0, 0) } 20%, 40%, 60%, 80% { -webkit-transform:translate3d(10px, 0, 0); transform:translate3d(10px, 0, 0) } } .shake { -webkit-animation-name: shake; animation-name: shake } @-webkit-keyframes swing { 20% { -webkit-transform:rotate3d(0, 0, 1, 15deg); transform:rotate3d(0, 0, 1, 15deg) } 40% { -webkit-transform:rotate3d(0, 0, 1, -10deg); transform:rotate3d(0, 0, 1, -10deg) } 60% { -webkit-transform:rotate3d(0, 0, 1, 5deg); transform:rotate3d(0, 0, 1, 5deg) } 80% { -webkit-transform:rotate3d(0, 0, 1, -5deg); transform:rotate3d(0, 0, 1, -5deg) } 100% { -webkit-transform:rotate3d(0, 0, 1, 0deg); transform:rotate3d(0, 0, 1, 0deg) } } @keyframes swing { 20% { -webkit-transform:rotate3d(0, 0, 1, 15deg); transform:rotate3d(0, 0, 1, 15deg) } 40% { -webkit-transform:rotate3d(0, 0, 1, -10deg); transform:rotate3d(0, 0, 1, -10deg) } 60% { -webkit-transform:rotate3d(0, 0, 1, 5deg); transform:rotate3d(0, 0, 1, 5deg) } 80% { -webkit-transform:rotate3d(0, 0, 1, -5deg); transform:rotate3d(0, 0, 1, -5deg) } 100% { -webkit-transform:rotate3d(0, 0, 1, 0deg); transform:rotate3d(0, 0, 1, 0deg) } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing } @-webkit-keyframes tada { 0%, 100% { -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } 10%, 20% { -webkit-transform:scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform:scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg) } 30%, 50%, 70%, 90% { -webkit-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg) } 40%, 60%, 80% { -webkit-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg) } } @keyframes tada { 0%, 100% { -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } 10%, 20% { -webkit-transform:scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform:scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg) } 30%, 50%, 70%, 90% { -webkit-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg) } 40%, 60%, 80% { -webkit-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg) } } .tada { -webkit-animation-name: tada; animation-name: tada } @-webkit-keyframes wobble { 0%, 100% { -webkit-transform:none; transform:none } 15% { -webkit-transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg) } 30% { -webkit-transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg) } 45% { -webkit-transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg) } 60% { -webkit-transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg) } 75% { -webkit-transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg) } } @keyframes wobble { 0%, 100% { -webkit-transform:none; transform:none } 15% { -webkit-transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg) } 30% { -webkit-transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg) } 45% { -webkit-transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg) } 60% { -webkit-transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg) } 75% { -webkit-transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg) } } .wobble { -webkit-animation-name: wobble; animation-name: wobble } @-webkit-keyframes bounceIn { 0%, 100%, 20%, 40%, 60%, 80% { -webkit-transition-timing-function:cubic-bezier(.215, .61, .355, 1); transition-timing-function:cubic-bezier(.215, .61, .355, 1) } 0% { opacity:0; -webkit-transform:scale3d(.3, .3, .3); transform:scale3d(.3, .3, .3) } 20% { -webkit-transform:scale3d(1.1, 1.1, 1.1); transform:scale3d(1.1, 1.1, 1.1) } 40% { -webkit-transform:scale3d(.9, .9, .9); transform:scale3d(.9, .9, .9) } 60% { opacity:1; -webkit-transform:scale3d(1.03, 1.03, 1.03); transform:scale3d(1.03, 1.03, 1.03) } 80% { -webkit-transform:scale3d(.97, .97, .97); transform:scale3d(.97, .97, .97) } 100% { opacity:1; -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } } @keyframes bounceIn { 0%, 100%, 20%, 40%, 60%, 80% { -webkit-transition-timing-function:cubic-bezier(.215, .61, .355, 1); transition-timing-function:cubic-bezier(.215, .61, .355, 1) } 0% { opacity:0; -webkit-transform:scale3d(.3, .3, .3); transform:scale3d(.3, .3, .3) } 20% { -webkit-transform:scale3d(1.1, 1.1, 1.1); transform:scale3d(1.1, 1.1, 1.1) } 40% { -webkit-transform:scale3d(.9, .9, .9); transform:scale3d(.9, .9, .9) } 60% { opacity:1; -webkit-transform:scale3d(1.03, 1.03, 1.03); transform:scale3d(1.03, 1.03, 1.03) } 80% { -webkit-transform:scale3d(.97, .97, .97); transform:scale3d(.97, .97, .97) } 100% { opacity:1; -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; animation-duration: .75s } .bounceOut, .flipOutX { animation-duration: .75s } @-webkit-keyframes bounceInDown { 0%, 100%, 60%, 75%, 90% { -webkit-transition-timing-function:cubic-bezier(.215, .61, .355, 1); transition-timing-function:cubic-bezier(.215, .61, .355, 1) } 0% { opacity:0; -webkit-transform:translate3d(0, -3000px, 0); transform:translate3d(0, -3000px, 0) } 60% { opacity:1; -webkit-transform:translate3d(0, 25px, 0); transform:translate3d(0, 25px, 0) } 75% { -webkit-transform:translate3d(0, -10px, 0); transform:translate3d(0, -10px, 0) } 90% { -webkit-transform:translate3d(0, 5px, 0); transform:translate3d(0, 5px, 0) } 100% { -webkit-transform:none; transform:none } } @keyframes bounceInDown { 0%, 100%, 60%, 75%, 90% { -webkit-transition-timing-function:cubic-bezier(.215, .61, .355, 1); transition-timing-function:cubic-bezier(.215, .61, .355, 1) } 0% { opacity:0; -webkit-transform:translate3d(0, -3000px, 0); transform:translate3d(0, -3000px, 0) } 60% { opacity:1; -webkit-transform:translate3d(0, 25px, 0); transform:translate3d(0, 25px, 0) } 75% { -webkit-transform:translate3d(0, -10px, 0); transform:translate3d(0, -10px, 0) } 90% { -webkit-transform:translate3d(0, 5px, 0); transform:translate3d(0, 5px, 0) } 100% { -webkit-transform:none; transform:none } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown } @-webkit-keyframes bounceInLeft { 0%, 100%, 60%, 75%, 90% { -webkit-transition-timing-function:cubic-bezier(.215, .61, .355, 1); transition-timing-function:cubic-bezier(.215, .61, .355, 1) } 0% { opacity:0; -webkit-transform:translate3d(-3000px, 0, 0); transform:translate3d(-3000px, 0, 0) } 60% { opacity:1; -webkit-transform:translate3d(25px, 0, 0); transform:translate3d(25px, 0, 0) } 75% { -webkit-transform:translate3d(-10px, 0, 0); transform:translate3d(-10px, 0, 0) } 90% { -webkit-transform:translate3d(5px, 0, 0); transform:translate3d(5px, 0, 0) } 100% { -webkit-transform:none; transform:none } } @keyframes bounceInLeft { 0%, 100%, 60%, 75%, 90% { -webkit-transition-timing-function:cubic-bezier(.215, .61, .355, 1); transition-timing-function:cubic-bezier(.215, .61, .355, 1) } 0% { opacity:0; -webkit-transform:translate3d(-3000px, 0, 0); transform:translate3d(-3000px, 0, 0) } 60% { opacity:1; -webkit-transform:translate3d(25px, 0, 0); transform:translate3d(25px, 0, 0) } 75% { -webkit-transform:translate3d(-10px, 0, 0); transform:translate3d(-10px, 0, 0) } 90% { -webkit-transform:translate3d(5px, 0, 0); transform:translate3d(5px, 0, 0) } 100% { -webkit-transform:none; transform:none } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft } @-webkit-keyframes bounceInRight { 0%, 100%, 60%, 75%, 90% { -webkit-transition-timing-function:cubic-bezier(.215, .61, .355, 1); transition-timing-function:cubic-bezier(.215, .61, .355, 1) } 0% { opacity:0; -webkit-transform:translate3d(3000px, 0, 0); transform:translate3d(3000px, 0, 0) } 60% { opacity:1; -webkit-transform:translate3d(-25px, 0, 0); transform:translate3d(-25px, 0, 0) } 75% { -webkit-transform:translate3d(10px, 0, 0); transform:translate3d(10px, 0, 0) } 90% { -webkit-transform:translate3d(-5px, 0, 0); transform:translate3d(-5px, 0, 0) } 100% { -webkit-transform:none; transform:none } } @keyframes bounceInRight { 0%, 100%, 60%, 75%, 90% { -webkit-transition-timing-function:cubic-bezier(.215, .61, .355, 1); transition-timing-function:cubic-bezier(.215, .61, .355, 1) } 0% { opacity:0; -webkit-transform:translate3d(3000px, 0, 0); transform:translate3d(3000px, 0, 0) } 60% { opacity:1; -webkit-transform:translate3d(-25px, 0, 0); transform:translate3d(-25px, 0, 0) } 75% { -webkit-transform:translate3d(10px, 0, 0); transform:translate3d(10px, 0, 0) } 90% { -webkit-transform:translate3d(-5px, 0, 0); transform:translate3d(-5px, 0, 0) } 100% { -webkit-transform:none; transform:none } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight } @-webkit-keyframes bounceInUp { 0%, 100%, 60%, 75%, 90% { -webkit-transition-timing-function:cubic-bezier(.215, .61, .355, 1); transition-timing-function:cubic-bezier(.215, .61, .355, 1) } 0% { opacity:0; -webkit-transform:translate3d(0, 3000px, 0); transform:translate3d(0, 3000px, 0) } 60% { opacity:1; -webkit-transform:translate3d(0, -20px, 0); transform:translate3d(0, -20px, 0) } 75% { -webkit-transform:translate3d(0, 10px, 0); transform:translate3d(0, 10px, 0) } 90% { -webkit-transform:translate3d(0, -5px, 0); transform:translate3d(0, -5px, 0) } 100% { -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0) } } @keyframes bounceInUp { 0%, 100%, 60%, 75%, 90% { -webkit-transition-timing-function:cubic-bezier(.215, .61, .355, 1); transition-timing-function:cubic-bezier(.215, .61, .355, 1) } 0% { opacity:0; -webkit-transform:translate3d(0, 3000px, 0); transform:translate3d(0, 3000px, 0) } 60% { opacity:1; -webkit-transform:translate3d(0, -20px, 0); transform:translate3d(0, -20px, 0) } 75% { -webkit-transform:translate3d(0, 10px, 0); transform:translate3d(0, 10px, 0) } 90% { -webkit-transform:translate3d(0, -5px, 0); transform:translate3d(0, -5px, 0) } 100% { -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0) } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp } @-webkit-keyframes bounceOut { 20% { -webkit-transform:scale3d(.9, .9, .9); transform:scale3d(.9, .9, .9) } 50%, 55% { opacity:1; -webkit-transform:scale3d(1.1, 1.1, 1.1); transform:scale3d(1.1, 1.1, 1.1) } 100% { opacity:0; -webkit-transform:scale3d(.3, .3, .3); transform:scale3d(.3, .3, .3) } } @keyframes bounceOut { 20% { -webkit-transform:scale3d(.9, .9, .9); transform:scale3d(.9, .9, .9) } 50%, 55% { opacity:1; -webkit-transform:scale3d(1.1, 1.1, 1.1); transform:scale3d(1.1, 1.1, 1.1) } 100% { opacity:0; -webkit-transform:scale3d(.3, .3, .3); transform:scale3d(.3, .3, .3) } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform:translate3d(0, 10px, 0); transform:translate3d(0, 10px, 0) } 40%, 45% { opacity:1; -webkit-transform:translate3d(0, -20px, 0); transform:translate3d(0, -20px, 0) } 100% { opacity:0; -webkit-transform:translate3d(0, 2000px, 0); transform:translate3d(0, 2000px, 0) } } @keyframes bounceOutDown { 20% { -webkit-transform:translate3d(0, 10px, 0); transform:translate3d(0, 10px, 0) } 40%, 45% { opacity:1; -webkit-transform:translate3d(0, -20px, 0); transform:translate3d(0, -20px, 0) } 100% { opacity:0; -webkit-transform:translate3d(0, 2000px, 0); transform:translate3d(0, 2000px, 0) } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown } @-webkit-keyframes bounceOutLeft { 20% { opacity:1; -webkit-transform:translate3d(20px, 0, 0); transform:translate3d(20px, 0, 0) } 100% { opacity:0; -webkit-transform:translate3d(-2000px, 0, 0); transform:translate3d(-2000px, 0, 0) } } @keyframes bounceOutLeft { 20% { opacity:1; -webkit-transform:translate3d(20px, 0, 0); transform:translate3d(20px, 0, 0) } 100% { opacity:0; -webkit-transform:translate3d(-2000px, 0, 0); transform:translate3d(-2000px, 0, 0) } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft } @-webkit-keyframes bounceOutRight { 20% { opacity:1; -webkit-transform:translate3d(-20px, 0, 0); transform:translate3d(-20px, 0, 0) } 100% { opacity:0; -webkit-transform:translate3d(2000px, 0, 0); transform:translate3d(2000px, 0, 0) } } @keyframes bounceOutRight { 20% { opacity:1; -webkit-transform:translate3d(-20px, 0, 0); transform:translate3d(-20px, 0, 0) } 100% { opacity:0; -webkit-transform:translate3d(2000px, 0, 0); transform:translate3d(2000px, 0, 0) } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform:translate3d(0, -10px, 0); transform:translate3d(0, -10px, 0) } 40%, 45% { opacity:1; -webkit-transform:translate3d(0, 20px, 0); transform:translate3d(0, 20px, 0) } 100% { opacity:0; -webkit-transform:translate3d(0, -2000px, 0); transform:translate3d(0, -2000px, 0) } } @keyframes bounceOutUp { 20% { -webkit-transform:translate3d(0, -10px, 0); transform:translate3d(0, -10px, 0) } 40%, 45% { opacity:1; -webkit-transform:translate3d(0, 20px, 0); transform:translate3d(0, 20px, 0) } 100% { opacity:0; -webkit-transform:translate3d(0, -2000px, 0); transform:translate3d(0, -2000px, 0) } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp } @-webkit-keyframes fadeIn { 0% { opacity:0 } 100% { opacity:1 } } @keyframes fadeIn { 0% { opacity:0 } 100% { opacity:1 } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn } @-webkit-keyframes fadeInDown { 0% { opacity:0; -webkit-transform:translate3d(0, -100%, 0); transform:translate3d(0, -100%, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } } @keyframes fadeInDown { 0% { opacity:0; -webkit-transform:translate3d(0, -100%, 0); transform:translate3d(0, -100%, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown } @-webkit-keyframes fadeInDownBig { 0% { opacity:0; -webkit-transform:translate3d(0, -2000px, 0); transform:translate3d(0, -2000px, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } } @keyframes fadeInDownBig { 0% { opacity:0; -webkit-transform:translate3d(0, -2000px, 0); transform:translate3d(0, -2000px, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig } @-webkit-keyframes fadeInLeft { 0% { opacity:0; -webkit-transform:translate3d(-100%, 0, 0); transform:translate3d(-100%, 0, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } } @keyframes fadeInLeft { 0% { opacity:0; -webkit-transform:translate3d(-100%, 0, 0); transform:translate3d(-100%, 0, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } } .animated.fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft } @-webkit-keyframes fadeInLeftBig { 0% { opacity:0; -webkit-transform:translate3d(-2000px, 0, 0); transform:translate3d(-2000px, 0, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } } @keyframes fadeInLeftBig { 0% { opacity:0; -webkit-transform:translate3d(-2000px, 0, 0); transform:translate3d(-2000px, 0, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig } @-webkit-keyframes fadeInRight { 0% { opacity:0; -webkit-transform:translate3d(100%, 0, 0); transform:translate3d(100%, 0, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } } @keyframes fadeInRight { 0% { opacity:0; -webkit-transform:translate3d(100%, 0, 0); transform:translate3d(100%, 0, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight } @-webkit-keyframes fadeInRightBig { 0% { opacity:0; -webkit-transform:translate3d(2000px, 0, 0); transform:translate3d(2000px, 0, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } } @keyframes fadeInRightBig { 0% { opacity:0; -webkit-transform:translate3d(2000px, 0, 0); transform:translate3d(2000px, 0, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig } @-webkit-keyframes fadeInUp { 0% { opacity:0; -webkit-transform:translate3d(0, 60%, 0); transform:translate3d(0, 60%, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } } @keyframes fadeInUp { 0% { opacity:0; -webkit-transform:translate3d(0, 60%, 0); transform:translate3d(0, 60%, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp } @-webkit-keyframes fadeInUpDelay { 0% { opacity:0; -webkit-transform:translate3d(0, 10px, 0); transform:translate3d(0, 10px, 0) } 50% { -webkit-transform:translate3d(0, -5px, 0); transform:translate3d(0, -5px, 0) } 100% { opacity:1; -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0) } } @keyframes fadeInUpDelay { 0% { opacity:0; -webkit-transform:translate3d(0, 100px, 0); transform:translate3d(0, 10px, 0) } 50% { -webkit-transform:translate3d(0, -5px, 0); transform:translate3d(0, -5px, 0) } 100% { opacity:1; -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0) } } .fadeInUpDelay { -webkit-animation-name: fadeInUpDelay; animation-name: fadeInUpDelay; animation-delay: .8s!important; -webkit-animation-delay: .8s!important } @-webkit-keyframes fadeInUpBig { 0% { opacity:0; -webkit-transform:translate3d(0, 2000px, 0); transform:translate3d(0, 2000px, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } } @keyframes fadeInUpBig { 0% { opacity:0; -webkit-transform:translate3d(0, 2000px, 0); transform:translate3d(0, 2000px, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig } @-webkit-keyframes fadeOut { 0% { opacity:1 } 100% { opacity:0 } } @keyframes fadeOut { 0% { opacity:1 } 100% { opacity:0 } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut } @-webkit-keyframes fadeOutDown { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(0, 100%, 0); transform:translate3d(0, 100%, 0) } } @keyframes fadeOutDown { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(0, 100%, 0); transform:translate3d(0, 100%, 0) } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown } @-webkit-keyframes fadeOutDownBig { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(0, 2000px, 0); transform:translate3d(0, 2000px, 0) } } @keyframes fadeOutDownBig { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(0, 2000px, 0); transform:translate3d(0, 2000px, 0) } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig } @-webkit-keyframes fadeOutLeft { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(-100%, 0, 0); transform:translate3d(-100%, 0, 0) } } @keyframes fadeOutLeft { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(-100%, 0, 0); transform:translate3d(-100%, 0, 0) } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft } @-webkit-keyframes fadeOutLeftBig { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(-2000px, 0, 0); transform:translate3d(-2000px, 0, 0) } } @keyframes fadeOutLeftBig { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(-2000px, 0, 0); transform:translate3d(-2000px, 0, 0) } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig } @-webkit-keyframes fadeOutRight { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(100%, 0, 0); transform:translate3d(100%, 0, 0) } } @keyframes fadeOutRight { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(100%, 0, 0); transform:translate3d(100%, 0, 0) } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight } @-webkit-keyframes fadeOutRightBig { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(2000px, 0, 0); transform:translate3d(2000px, 0, 0) } } @keyframes fadeOutRightBig { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(2000px, 0, 0); transform:translate3d(2000px, 0, 0) } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig } @-webkit-keyframes fadeOutUp { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(0, -100%, 0); transform:translate3d(0, -100%, 0) } } @keyframes fadeOutUp { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(0, -100%, 0); transform:translate3d(0, -100%, 0) } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp } @-webkit-keyframes fadeOutUpBig { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(0, -2000px, 0); transform:translate3d(0, -2000px, 0) } } @keyframes fadeOutUpBig { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(0, -2000px, 0); transform:translate3d(0, -2000px, 0) } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig } @-webkit-keyframes flip { 0% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -360deg); transform:perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function:ease-out; animation-timing-function:ease-out } 40% { -webkit-transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function:ease-out; animation-timing-function:ease-out } 50% { -webkit-transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function:ease-in; animation-timing-function:ease-in } 80% { -webkit-transform:perspective(400px) scale3d(.95, .95, .95); transform:perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function:ease-in; animation-timing-function:ease-in } 100% { -webkit-transform:perspective(400px); transform:perspective(400px); -webkit-animation-timing-function:ease-in; animation-timing-function:ease-in } } @keyframes flip { 0% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -360deg); transform:perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function:ease-out; animation-timing-function:ease-out } 40% { -webkit-transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function:ease-out; animation-timing-function:ease-out } 50% { -webkit-transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function:ease-in; animation-timing-function:ease-in } 80% { -webkit-transform:perspective(400px) scale3d(.95, .95, .95); transform:perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function:ease-in; animation-timing-function:ease-in } 100% { -webkit-transform:perspective(400px); transform:perspective(400px); -webkit-animation-timing-function:ease-in; animation-timing-function:ease-in } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip } .flipInX, .flipInY, .flipOutX { -webkit-backface-visibility: visible!important } @-webkit-keyframes flipInX { 0% { -webkit-transform:perspective(400px) rotateX(90deg); transform:perspective(400px) rotateX(90deg); opacity:0 } 40% { -webkit-transform:perspective(400px) rotateX(-10deg); transform:perspective(400px) rotateX(-10deg) } 70% { -webkit-transform:perspective(400px) rotateX(10deg); transform:perspective(400px) rotateX(10deg) } 100% { -webkit-transform:perspective(400px) rotateX(0); transform:perspective(400px) rotateX(0); opacity:1 } } @keyframes flipInX { 0% { -webkit-transform:perspective(400px) rotateX(90deg); -ms-transform:perspective(400px) rotateX(90deg); transform:perspective(400px) rotateX(90deg); opacity:0 } 40% { -webkit-transform:perspective(400px) rotateX(-10deg); -ms-transform:perspective(400px) rotateX(-10deg); transform:perspective(400px) rotateX(-10deg) } 70% { -webkit-transform:perspective(400px) rotateX(10deg); -ms-transform:perspective(400px) rotateX(10deg); transform:perspective(400px) rotateX(10deg) } 100% { -webkit-transform:perspective(400px) rotateX(0); -ms-transform:perspective(400px) rotateX(0); transform:perspective(400px) rotateX(0); opacity:1 } } .flipInX { backface-visibility: visible!important; -webkit-animation-name: flipInX; animation-name: flipInX } .flipInY, .flipOutX { backface-visibility: visible!important } @-webkit-keyframes flipInY { 0% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 90deg); transform:perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function:ease-in; transition-timing-function:ease-in; opacity:0 } 40% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -20deg); transform:perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-transition-timing-function:ease-in; transition-timing-function:ease-in } 60% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 10deg); transform:perspective(400px) rotate3d(0, 1, 0, 10deg); opacity:1 } 80% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -5deg); transform:perspective(400px) rotate3d(0, 1, 0, -5deg) } 100% { -webkit-transform:perspective(400px); transform:perspective(400px) } } @keyframes flipInY { 0% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 90deg); transform:perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function:ease-in; transition-timing-function:ease-in; opacity:0 } 40% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -20deg); transform:perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-transition-timing-function:ease-in; transition-timing-function:ease-in } 60% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 10deg); transform:perspective(400px) rotate3d(0, 1, 0, 10deg); opacity:1 } 80% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -5deg); transform:perspective(400px) rotate3d(0, 1, 0, -5deg) } 100% { -webkit-transform:perspective(400px); transform:perspective(400px) } } .flipInY { -webkit-animation-name: flipInY; animation-name: flipInY } @-webkit-keyframes flipOutX { 0% { -webkit-transform:perspective(400px); transform:perspective(400px) } 30% { -webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg); transform:perspective(400px) rotate3d(1, 0, 0, -20deg); opacity:1 } 100% { -webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg); transform:perspective(400px) rotate3d(1, 0, 0, 90deg); opacity:0 } } @keyframes flipOutX { 0% { -webkit-transform:perspective(400px); transform:perspective(400px) } 30% { -webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg); transform:perspective(400px) rotate3d(1, 0, 0, -20deg); opacity:1 } 100% { -webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg); transform:perspective(400px) rotate3d(1, 0, 0, 90deg); opacity:0 } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX } @-webkit-keyframes flipOutY { 0% { -webkit-transform:perspective(400px); transform:perspective(400px) } 30% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -15deg); transform:perspective(400px) rotate3d(0, 1, 0, -15deg); opacity:1 } 100% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 90deg); transform:perspective(400px) rotate3d(0, 1, 0, 90deg); opacity:0 } } @keyframes flipOutY { 0% { -webkit-transform:perspective(400px); transform:perspective(400px) } 30% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -15deg); transform:perspective(400px) rotate3d(0, 1, 0, -15deg); opacity:1 } 100% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 90deg); transform:perspective(400px) rotate3d(0, 1, 0, 90deg); opacity:0 } } .flipOutY { -webkit-backface-visibility: visible!important; backface-visibility: visible!important; -webkit-animation-name: flipOutY; animation-name: flipOutY; -webkit-animation-duration: .75s; animation-duration: .75s } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform:translate3d(100%, 0, 0) skewX(-30deg); transform:translate3d(100%, 0, 0) skewX(-30deg); opacity:0 } 60% { -webkit-transform:skewX(20deg); transform:skewX(20deg); opacity:1 } 80% { -webkit-transform:skewX(-5deg); transform:skewX(-5deg); opacity:1 } 100% { -webkit-transform:none; transform:none; opacity:1 } } @keyframes lightSpeedIn { 0% { -webkit-transform:translate3d(100%, 0, 0) skewX(-30deg); transform:translate3d(100%, 0, 0) skewX(-30deg); opacity:0 } 60% { -webkit-transform:skewX(20deg); transform:skewX(20deg); opacity:1 } 80% { -webkit-transform:skewX(-5deg); transform:skewX(-5deg); opacity:1 } 100% { -webkit-transform:none; transform:none; opacity:1 } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } @-webkit-keyframes lightSpeedOut { 0% { opacity:1 } 100% { -webkit-transform:translate3d(100%, 0, 0) skewX(30deg); transform:translate3d(100%, 0, 0) skewX(30deg); opacity:0 } } @keyframes lightSpeedOut { 0% { opacity:1 } 100% { -webkit-transform:translate3d(100%, 0, 0) skewX(30deg); transform:translate3d(100%, 0, 0) skewX(30deg); opacity:0 } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin:center; transform-origin:center; -webkit-transform:rotate3d(0, 0, 1, -200deg); transform:rotate3d(0, 0, 1, -200deg); opacity:0 } 100% { -webkit-transform-origin:center; transform-origin:center; -webkit-transform:none; transform:none; opacity:1 } } @keyframes rotateIn { 0% { -webkit-transform-origin:center; transform-origin:center; -webkit-transform:rotate3d(0, 0, 1, -200deg); transform:rotate3d(0, 0, 1, -200deg); opacity:0 } 100% { -webkit-transform-origin:center; transform-origin:center; -webkit-transform:none; transform:none; opacity:1 } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:rotate3d(0, 0, 1, -45deg); transform:rotate3d(0, 0, 1, -45deg); opacity:0 } 100% { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:none; transform:none; opacity:1 } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:rotate3d(0, 0, 1, -45deg); transform:rotate3d(0, 0, 1, -45deg); opacity:0 } 100% { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:none; transform:none; opacity:1 } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate3d(0, 0, 1, 45deg); transform:rotate3d(0, 0, 1, 45deg); opacity:0 } 100% { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:none; transform:none; opacity:1 } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate3d(0, 0, 1, 45deg); transform:rotate3d(0, 0, 1, 45deg); opacity:0 } 100% { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:none; transform:none; opacity:1 } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:rotate3d(0, 0, 1, 45deg); transform:rotate3d(0, 0, 1, 45deg); opacity:0 } 100% { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:none; transform:none; opacity:1 } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:rotate3d(0, 0, 1, 45deg); transform:rotate3d(0, 0, 1, 45deg); opacity:0 } 100% { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:none; transform:none; opacity:1 } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate3d(0, 0, 1, -90deg); transform:rotate3d(0, 0, 1, -90deg); opacity:0 } 100% { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:none; transform:none; opacity:1 } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate3d(0, 0, 1, -90deg); transform:rotate3d(0, 0, 1, -90deg); opacity:0 } 100% { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:none; transform:none; opacity:1 } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin:center; transform-origin:center; opacity:1 } 100% { -webkit-transform-origin:center; transform-origin:center; -webkit-transform:rotate3d(0, 0, 1, 200deg); transform:rotate3d(0, 0, 1, 200deg); opacity:0 } } @keyframes rotateOut { 0% { -webkit-transform-origin:center; transform-origin:center; opacity:1 } 100% { -webkit-transform-origin:center; transform-origin:center; -webkit-transform:rotate3d(0, 0, 1, 200deg); transform:rotate3d(0, 0, 1, 200deg); opacity:0 } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin:left bottom; transform-origin:left bottom; opacity:1 } 100% { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:rotate3d(0, 0, 1, 45deg); transform:rotate3d(0, 0, 1, 45deg); opacity:0 } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin:left bottom; transform-origin:left bottom; opacity:1 } 100% { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:rotate3d(0, 0, 1, 45deg); transform:rotate3d(0, 0, 1, 45deg); opacity:0 } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin:right bottom; transform-origin:right bottom; opacity:1 } 100% { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate3d(0, 0, 1, -45deg); transform:rotate3d(0, 0, 1, -45deg); opacity:0 } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin:right bottom; transform-origin:right bottom; opacity:1 } 100% { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate3d(0, 0, 1, -45deg); transform:rotate3d(0, 0, 1, -45deg); opacity:0 } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin:left bottom; transform-origin:left bottom; opacity:1 } 100% { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:rotate3d(0, 0, 1, -45deg); transform:rotate3d(0, 0, 1, -45deg); opacity:0 } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin:left bottom; transform-origin:left bottom; opacity:1 } 100% { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:rotate3d(0, 0, 1, -45deg); transform:rotate3d(0, 0, 1, -45deg); opacity:0 } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin:right bottom; transform-origin:right bottom; opacity:1 } 100% { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate3d(0, 0, 1, 90deg); transform:rotate3d(0, 0, 1, 90deg); opacity:0 } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin:right bottom; transform-origin:right bottom; opacity:1 } 100% { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate3d(0, 0, 1, 90deg); transform:rotate3d(0, 0, 1, 90deg); opacity:0 } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight } @-webkit-keyframes hinge { 0% { -webkit-transform-origin:top left; transform-origin:top left; -webkit-animation-timing-function:ease-in-out; animation-timing-function:ease-in-out } 20%, 60% { -webkit-transform:rotate3d(0, 0, 1, 80deg); transform:rotate3d(0, 0, 1, 80deg); -webkit-transform-origin:top left; transform-origin:top left; -webkit-animation-timing-function:ease-in-out; animation-timing-function:ease-in-out } 40%, 80% { -webkit-transform:rotate3d(0, 0, 1, 60deg); transform:rotate3d(0, 0, 1, 60deg); -webkit-transform-origin:top left; transform-origin:top left; -webkit-animation-timing-function:ease-in-out; animation-timing-function:ease-in-out; opacity:1 } 100% { -webkit-transform:translate3d(0, 700px, 0); transform:translate3d(0, 700px, 0); opacity:0 } } @keyframes hinge { 0% { -webkit-transform-origin:top left; transform-origin:top left; -webkit-animation-timing-function:ease-in-out; animation-timing-function:ease-in-out } 20%, 60% { -webkit-transform:rotate3d(0, 0, 1, 80deg); transform:rotate3d(0, 0, 1, 80deg); -webkit-transform-origin:top left; transform-origin:top left; -webkit-animation-timing-function:ease-in-out; animation-timing-function:ease-in-out } 40%, 80% { -webkit-transform:rotate3d(0, 0, 1, 60deg); transform:rotate3d(0, 0, 1, 60deg); -webkit-transform-origin:top left; transform-origin:top left; -webkit-animation-timing-function:ease-in-out; animation-timing-function:ease-in-out; opacity:1 } 100% { -webkit-transform:translate3d(0, 700px, 0); transform:translate3d(0, 700px, 0); opacity:0 } } .hinge { -webkit-animation-name: hinge; animation-name: hinge } @-webkit-keyframes rollIn { 0% { opacity:0; -webkit-transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg) } 100% { opacity:1; -webkit-transform:none; transform:none } } @keyframes rollIn { 0% { opacity:0; -webkit-transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg) } 100% { opacity:1; -webkit-transform:none; transform:none } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn } @-webkit-keyframes rollOut { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg) } } @keyframes rollOut { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg) } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut } @-webkit-keyframes zoomIn { 0% { opacity:0; -webkit-transform:scale3d(.3, .3, .3); transform:scale3d(.3, .3, .3) } 50% { opacity:1 } } @keyframes zoomIn { 0% { opacity:0; -webkit-transform:scale3d(.3, .3, .3); transform:scale3d(.3, .3, .3) } 50% { opacity:1 } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn } @-webkit-keyframes zoomInDown { 0% { opacity:0; -webkit-transform:scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform:scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function:cubic-bezier(.55, .055, .675, .19); animation-timing-function:cubic-bezier(.55, .055, .675, .19) } 60% { opacity:1; -webkit-transform:scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform:scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function:cubic-bezier(.175, .885, .32, 1); animation-timing-function:cubic-bezier(.175, .885, .32, 1) } } @keyframes zoomInDown { 0% { opacity:0; -webkit-transform:scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform:scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function:cubic-bezier(.55, .055, .675, .19); animation-timing-function:cubic-bezier(.55, .055, .675, .19) } 60% { opacity:1; -webkit-transform:scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform:scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function:cubic-bezier(.175, .885, .32, 1); animation-timing-function:cubic-bezier(.175, .885, .32, 1) } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown } @-webkit-keyframes zoomInLeft { 0% { opacity:0; -webkit-transform:scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform:scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function:cubic-bezier(.55, .055, .675, .19); animation-timing-function:cubic-bezier(.55, .055, .675, .19) } 60% { opacity:1; -webkit-transform:scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform:scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function:cubic-bezier(.175, .885, .32, 1); animation-timing-function:cubic-bezier(.175, .885, .32, 1) } } @keyframes zoomInLeft { 0% { opacity:0; -webkit-transform:scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform:scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function:cubic-bezier(.55, .055, .675, .19); animation-timing-function:cubic-bezier(.55, .055, .675, .19) } 60% { opacity:1; -webkit-transform:scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform:scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function:cubic-bezier(.175, .885, .32, 1); animation-timing-function:cubic-bezier(.175, .885, .32, 1) } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft } @-webkit-keyframes zoomInRight { 0% { opacity:0; -webkit-transform:scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform:scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function:cubic-bezier(.55, .055, .675, .19); animation-timing-function:cubic-bezier(.55, .055, .675, .19) } 60% { opacity:1; -webkit-transform:scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform:scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function:cubic-bezier(.175, .885, .32, 1); animation-timing-function:cubic-bezier(.175, .885, .32, 1) } } @keyframes zoomInRight { 0% { opacity:0; -webkit-transform:scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform:scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function:cubic-bezier(.55, .055, .675, .19); animation-timing-function:cubic-bezier(.55, .055, .675, .19) } 60% { opacity:1; -webkit-transform:scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform:scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function:cubic-bezier(.175, .885, .32, 1); animation-timing-function:cubic-bezier(.175, .885, .32, 1) } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight } @-webkit-keyframes zoomInUp { 0% { opacity:0; -webkit-transform:scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform:scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function:cubic-bezier(.55, .055, .675, .19); animation-timing-function:cubic-bezier(.55, .055, .675, .19) } 60% { opacity:1; -webkit-transform:scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform:scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function:cubic-bezier(.175, .885, .32, 1); animation-timing-function:cubic-bezier(.175, .885, .32, 1) } } @keyframes zoomInUp { 0% { opacity:0; -webkit-transform:scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform:scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function:cubic-bezier(.55, .055, .675, .19); animation-timing-function:cubic-bezier(.55, .055, .675, .19) } 60% { opacity:1; -webkit-transform:scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform:scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function:cubic-bezier(.175, .885, .32, 1); animation-timing-function:cubic-bezier(.175, .885, .32, 1) } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp } @-webkit-keyframes zoomOut { 0% { opacity:1 } 50% { opacity:0; -webkit-transform:scale3d(.3, .3, .3); transform:scale3d(.3, .3, .3) } 100% { opacity:0 } } @keyframes zoomOut { 0% { opacity:1 } 50% { opacity:0; -webkit-transform:scale3d(.3, .3, .3); transform:scale3d(.3, .3, .3) } 100% { opacity:0 } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut } @-webkit-keyframes zoomOutDown { 40% { opacity:1; -webkit-transform:scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform:scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function:cubic-bezier(.55, .055, .675, .19); animation-timing-function:cubic-bezier(.55, .055, .675, .19) } 100% { opacity:0; -webkit-transform:scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform:scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin:center bottom; transform-origin:center bottom; -webkit-animation-timing-function:cubic-bezier(.175, .885, .32, 1); animation-timing-function:cubic-bezier(.175, .885, .32, 1) } } @keyframes zoomOutDown { 40% { opacity:1; -webkit-transform:scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform:scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function:cubic-bezier(.55, .055, .675, .19); animation-timing-function:cubic-bezier(.55, .055, .675, .19) } 100% { opacity:0; -webkit-transform:scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform:scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin:center bottom; transform-origin:center bottom; -webkit-animation-timing-function:cubic-bezier(.175, .885, .32, 1); animation-timing-function:cubic-bezier(.175, .885, .32, 1) } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown } @-webkit-keyframes zoomOutLeft { 40% { opacity:1; -webkit-transform:scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform:scale3d(.475, .475, .475) translate3d(42px, 0, 0) } 100% { opacity:0; -webkit-transform:scale(.1) translate3d(-2000px, 0, 0); transform:scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin:left center; transform-origin:left center } } @keyframes zoomOutLeft { 40% { opacity:1; -webkit-transform:scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform:scale3d(.475, .475, .475) translate3d(42px, 0, 0) } 100% { opacity:0; -webkit-transform:scale(.1) translate3d(-2000px, 0, 0); transform:scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin:left center; transform-origin:left center } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft } @-webkit-keyframes zoomOutRight { 40% { opacity:1; -webkit-transform:scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform:scale3d(.475, .475, .475) translate3d(-42px, 0, 0) } 100% { opacity:0; -webkit-transform:scale(.1) translate3d(2000px, 0, 0); transform:scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin:right center; transform-origin:right center } } @keyframes zoomOutRight { 40% { opacity:1; -webkit-transform:scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform:scale3d(.475, .475, .475) translate3d(-42px, 0, 0) } 100% { opacity:0; -webkit-transform:scale(.1) translate3d(2000px, 0, 0); transform:scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin:right center; transform-origin:right center } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight } @-webkit-keyframes zoomOutUp { 40% { opacity:1; -webkit-transform:scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform:scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function:cubic-bezier(.55, .055, .675, .19); animation-timing-function:cubic-bezier(.55, .055, .675, .19) } 100% { opacity:0; -webkit-transform:scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform:scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -webkit-transform-origin:center bottom; transform-origin:center bottom; -webkit-animation-timing-function:cubic-bezier(.175, .885, .32, 1); animation-timing-function:cubic-bezier(.175, .885, .32, 1) } } @keyframes zoomOutUp { 40% { opacity:1; -webkit-transform:scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform:scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function:cubic-bezier(.55, .055, .675, .19); animation-timing-function:cubic-bezier(.55, .055, .675, .19) } 100% { opacity:0; -webkit-transform:scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform:scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -webkit-transform-origin:center bottom; transform-origin:center bottom; -webkit-animation-timing-function:cubic-bezier(.175, .885, .32, 1); animation-timing-function:cubic-bezier(.175, .885, .32, 1) } } .animateblock.scaledown.animated, .pullDown, .pullUp { animation-timing-function: ease-out; visibility: visible!important } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp } @-webkit-keyframes slideInDown { 0% { -webkit-transform:translateY(-100%); transform:translateY(-100%); visibility:visible } 100% { -webkit-transform:translateY(0); transform:translateY(0) } } @keyframes slideInDown { 0% { -webkit-transform:translateY(-100%); transform:translateY(-100%); visibility:visible } 100% { -webkit-transform:translateY(0); transform:translateY(0) } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown } @-webkit-keyframes slideInLeft { 0% { -webkit-transform:translateX(-100%); transform:translateX(-100%); visibility:visible } 100% { -webkit-transform:translateX(0); transform:translateX(0) } } @keyframes slideInLeft { 0% { -webkit-transform:translateX(-100%); transform:translateX(-100%); visibility:visible } 100% { -webkit-transform:translateX(0); transform:translateX(0) } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft } @-webkit-keyframes slideInRight { 0% { -webkit-transform:translateX(100%); transform:translateX(100%); visibility:visible } 100% { -webkit-transform:translateX(0); transform:translateX(0) } } @keyframes slideInRight { 0% { -webkit-transform:translateX(100%); transform:translateX(100%); visibility:visible } 100% { -webkit-transform:translateX(0); transform:translateX(0) } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight } @-webkit-keyframes slideInUp { 0% { -webkit-transform:translateY(100%); transform:translateY(100%); visibility:visible } 100% { -webkit-transform:translateY(0); transform:translateY(0) } } @keyframes slideInUp { 0% { -webkit-transform:translateY(100%); transform:translateY(100%); visibility:visible } 100% { -webkit-transform:translateY(0); transform:translateY(0) } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp } @-webkit-keyframes slideOutDown { 0% { -webkit-transform:translateY(0); transform:translateY(0) } 100% { visibility:hidden; -webkit-transform:translateY(100%); transform:translateY(100%) } } @keyframes slideOutDown { 0% { -webkit-transform:translateY(0); transform:translateY(0) } 100% { visibility:hidden; -webkit-transform:translateY(100%); transform:translateY(100%) } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform:translateX(0); transform:translateX(0) } 100% { visibility:hidden; -webkit-transform:translateX(-100%); transform:translateX(-100%) } } @keyframes slideOutLeft { 0% { -webkit-transform:translateX(0); transform:translateX(0) } 100% { visibility:hidden; -webkit-transform:translateX(-100%); transform:translateX(-100%) } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft } @-webkit-keyframes slideOutUp { 0% { -webkit-transform:translateY(0); transform:translateY(0) } 100% { visibility:hidden; -webkit-transform:translateY(-100%); transform:translateY(-100%) } } @keyframes slideOutUp { 0% { -webkit-transform:translateY(0); transform:translateY(0) } 100% { visibility:hidden; -webkit-transform:translateY(-100%); transform:translateY(-100%) } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp } @-webkit-keyframes fadeInScale { 0% { opacity:.1; -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } 100% { opacity:1; -webkit-transform:scale3d(1.05, 1.05, 1.05); transform:scale3d(1.05, 1.05, 1.05) } } @keyframes fadeInScale { 0% { opacity:0; -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } 100% { opacity:1; -webkit-transform:scale3d(1.05, 1.05, 1.05); transform:scale3d(1.05, 1.05, 1.05) } } .fadeInScale { -webkit-animation-name: fadeInScale; animation-name: fadeInScale; -webkit-animation-duration: 2s!important; animation-duration: 2s!important } @-webkit-keyframes fadeInScale1 { 0% { opacity:0; -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } 100% { opacity:1; -webkit-transform:scale3d(1.05, 1.05, 1.05); transform:scale3d(1.05, 1.05, 1.05) } } @keyframes fadeInScale1 { 0% { opacity:0; -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } 100% { opacity:1; -webkit-transform:scale3d(1.05, 1.05, 1.05); transform:scale3d(1.05, 1.05, 1.05) } } .fadeInScale1 { -webkit-animation-name: fadeInScale1; animation-name: fadeInScale1; -webkit-animation-duration: 2s!important; animation-duration: 2s!important; animation-delay: .6s!important; -webkit-animation-delay: .6s!important } .pullDown { animation-name: pullDown; -webkit-animation-name: pullDown; animation-duration: 2s; -webkit-animation-duration: 2s; -webkit-animation-timing-function: ease-out; transform-origin: 50% 0; -ms-transform-origin: 50% 0; -webkit-transform-origin: 50% 0 } .animateblock.scaledown.animated, .pullUp { -webkit-animation-timing-function: ease-out } @keyframes pullDown { 0% { transform:scaleY(.1) } 40% { transform:scaleY(1.02) } 100%, 60% { transform:scaleY(.98) } 80% { transform:scaleY(1.01) } 100% { transform:scaleY(1) } } @-webkit-keyframes pullDown { 0% { -webkit-transform:scaleY(.1) } 40% { -webkit-transform:scaleY(1.02) } 100%, 60% { -webkit-transform:scaleY(.98) } 80% { -webkit-transform:scaleY(1.01) } 100% { -webkit-transform:scaleY(1) } } .animateblock { padding: 0; color: #fff; opacity: 0; -webkit-transition: all .1s linear; -moz-transition: all .1s linear; transition: all .1s linear } .animateblock.animated { opacity: 1 } .animateblock.scaledown { display: block; height: 0 } .animateblock.scaledown.animated { animation-name: pullDown; -webkit-animation-name: pullDown; animation-duration: 2s; -webkit-animation-duration: 2s; transform-origin: 50% 0; -ms-transform-origin: 50% 0; -webkit-transform-origin: 50% 0 } .pullUp { animation-name: pullUp; -webkit-animation-name: pullUp; animation-duration: 1.1s; -webkit-animation-duration: 1.1s; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100% } @keyframes pullUp { 0% { transform:scaleY(.1) } 40% { transform:scaleY(1.02) } 100%, 60% { transform:scaleY(.98) } 80% { transform:scaleY(1.01) } 100% { transform:scaleY(1) } } @-webkit-keyframes pullUp { 0% { -webkit-transform:scaleY(.1) } 40% { -webkit-transform:scaleY(1.02) } 100%, 60% { -webkit-transform:scaleY(.98) } 80% { -webkit-transform:scaleY(1.01) } 100% { -webkit-transform:scaleY(1) } } .animateblock.scaleup.animated { animation-name: pullUp; -webkit-animation-name: pullUp; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 50% 0; -ms-transform-origin: 50% 0; -webkit-transform-origin: 50% 0; visibility: visible!important } @-webkit-keyframes boxslideRight { 20% { opacity:1; -webkit-transform:translate3d(-20px, 0, 0); transform:translate3d(-20px, 0, 0) } 100% { opacity:0; -webkit-transform:translate3d(2000px, 0, 0); transform:translate3d(2000px, 0, 0) } } @keyframes boxslideRight { 20% { opacity:1; -webkit-transform:translate3d(-20px, 0, 0); transform:translate3d(-20px, 0, 0) } 100% { opacity:0; -webkit-transform:translate3d(2000px, 0, 0); transform:translate3d(2000px, 0, 0) } } .boxslideRight { -webkit-animation-name: boxslideRight; animation-name: boxslideRight } @-webkit-keyframes slideOutRight { 0% { -webkit-transform:translateX(0); transform:translateX(0) } 100% { visibility:hidden; -webkit-transform:translateX(100%); transform:translateX(100%) } } @keyframes slideOutRight { 0% { -webkit-transform:translateX(0); transform:translateX(0) } 100% { visibility:hidden; -webkit-transform:translateX(100%); transform:translateX(100%) } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; animation-duration: 3s; -webkit-animation-duration: 3s } .mhcWrapper, .mhcWrapper1, .ourProductsWrapper, .shepintroWrapper, .testimonialsWrapper { background-repeat: repeat-x; position: relative; width: 100%; max-width: 100% } .mhcWrapper h3, .shepintroWrapper .introBanner .bannerInner h1 { font-size: 44px; font-family: montserrat_bold; padding: 0; float: left; text-align: center } .mrbt0 { margin-bottom: 0!important } .mrbt20 { margin-bottom: 20px!important } .mrlt30 { margin-left: 30px!important } .mrbt50 { margin-bottom: 50px!important } .mhcWrapper, .shepintroWrapper { float: left; height: 600px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; display: table } .mhcWrapper h3 { color: #21384f; margin: 35px 0 5px; width: 100% } .shepintroWrapper { background-image: url(https://s3-us-west-2.amazonaws.com/shepwebimg/shephertz/zone-f.png?shep25072015) } .mhcWrapper, .ourProductsWrapper, .testimonialsWrapper { background-color: #ececec } .mhcWrapper { background-color: #fefefe; background-attachment: initial!important; background-size: inherit } .ourProductsWrapper { float: left; height: 710px } .testimonialsWrapper { float: left; height: 590px } .shepintroWrapper .introBanner { display: table-cell; margin: 0 auto; width: 100% } .shepintroWrapper .introBanner .bannerInner { width: 80%; margin: 0 auto } .shepintroWrapper .introBanner .bannerInner h1 { color: #fff; margin: 0 0 20px; text-shadow: 2px 2px 3px rgba(0,0,0,.6); width: 100% } .shepintroWrapper .introBanner .bannerInner h1 span { color: #fff; font-family: Roboto; font-size: 30px; line-height: 35px!important; width: 100%; clear: both; float: left; margin-top: 30px } .shepintroWrapper .introBanner .bannerInner p { float: left; color: #e3e3e3; font-size: 17px; font-family: Roboto; line-height: 22px; margin: 0 0 20px; padding: 0 } .shepintroWrapper .introBanner .bannerInner .btnwrapper { float: left; margin: 55px 20%; text-align: center; position: absolute; bottom: 20%; left: 6% } .shepintroWrapper .introBanner .bannerInner .introButton { float: left; margin: 10px 0 0 } .shepintroWrapper .introBanner .bannerInner .introButton a { float: left; font-size: 20px; font-family: montserrat_bold; padding: 13px 35px; color: #fff; border: 2px solid #fff; background-color: transparent; width: 240px; text-transform: uppercase } .shepintroWrapper .introBanner .bannerInner .introButton a:hover { border: 2px solid #0b8cc5; color: #fff; background-color: #0b8cc5 } .quotes { text-align: center; margin: 200px auto 0; padding: 0; width: 100%; position: relative } .quotes li { text-shadow: -3px 3px 3px rgba(0,0,0,.8); color: #fff; font-family: Roboto; font-size: 44px; text-align: center; text-transform: uppercase; margin: 0 0 20px; padding: 0; float: left; position: absolute; left: 0; right: 0; opacity: 0 } .quotes li:nth-child(1) { -webkit-animation: quote 25s 0s infinite; animation: quote 25s 0s infinite } .quotes li:nth-child(2) { -webkit-animation: quote 25s 5s infinite; animation: quote 25s 5s infinite } @-webkit-keyframes quote { 0%, 20% { opacity:0 } 15%, 5% { opacity:1 } } @keyframes quote { 0%, 20% { opacity:0 } 15%, 5% { opacity:1 } } .mhcWrapper .mhcBanner { display: table-cell; margin: 0 auto; width: 100%; overflow: hidden } .mhcWrapper .mhcBanner .mhcInner { width: 80%; margin: 0 auto } .mhcWrapper .mhcBanner .mhcInner h2 { color: #21384f; font-size: 36px; font-family: montserrat_bold; margin: 75px 0 35px; padding: 0; text-align: center; float: left; width: 100% } .mhcWrapper .mhcBanner .mhcInner p { color: #252525; font-size: 18px; font-family: Roboto; margin: 0; padding: 0; text-align: center; float: left; width: 100%; line-height: 26px } .ourProductsWrapper .ourProductsInner, .ourProductsWrapper .ourProductsInner .ourProducts { margin: 0 auto; width: 100% } .ourProductsWrapper .ourProductsInner .ourProducts h3 { color: #031326; font-size: 42px; font-family: montserrat_bold_web; margin: 35px 0; padding: 0; text-align: center; float: left; width: 100% } .ourProductsWrapper .ourProductsInner .ourProducts .Products { float: left; width: 84%; margin: 0 8% } .ourProductsWrapper .ourProductsInner .ourProducts .Products .row { float: left; width: 100%; border-bottom: 3px solid #fff } .ourProductsWrapper .ourProductsInner .ourProducts .Products .row:last-child { border: none } .ourProductsWrapper .ourProductsInner .ourProducts .Products .row .Product { float: left; border-right: 3px solid #fff; width: 33%; height: 258px; overflow: hidden; position: relative; cursor: default } .ourProductsWrapper .ourProductsInner .ourProducts .Products .row .Product:last-child { border: none } .ourProductsWrapper .ourProductsInner .ourProducts .Products .row .large, .ourProductsWrapper .ourProductsInner .ourProducts .Products .row .largeT { width: 33% } .ourProductsWrapper .ourProductsInner .ourProducts .Products .row .Product img { width: 100%; height: auto; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease } .ourProductsWrapper .ourProductsInner .ourProducts .Products .row .Product .overlay { opacity: 0; position: absolute; top: 0; left: 0; z-index: 999; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } .ourProductsWrapper .ourProductsInner .ourProducts .Products .row .Product p { width: 100%; float: left; text-align: center; color: #fff; font-size: 23px; font-family: Roboto; text-decoration: none; margin: 129px 0 0; padding: 0; position: absolute; z-index: 9999; text-shadow: 2px 2px 3px rgba(0,0,0,.6); text-transform: uppercase } .testimonialsWrapper .testimonialsInner { margin: 0 auto; width: 100%; background-image: url(http://www.shephertz.com/wp-content/themes/twentytwelve/home/images/clients.png); height: 100%; background-position: 0; background-repeat: no-repeat; -webkit-background-size: cover!important; -moz-background-size: cover!important; -o-background-size: cover!important; background-size: cover!important } .testimonialsWrapper .testimonialsInner .testimonials { width: 100%; margin: 0 auto } .testimonialsWrapper .testimonialsInner .testimonialss h3 { color: #fff; font-size: 42px; font-family: montserrat_bold_web; margin: 35px 0; padding: 0; text-align: center; float: left; width: 100% } .testimonialsWrapper .testimonialsInner .testimonials .testimonial { float: left; width: 100% } .testimonialsWrapper .testimonialsInner .testimonials .testimonial .testimonialSlide { background-color: #295dad; float: left!important; width: 100%!important; height: 499px!important } .testimonialsWrapper .testimonialsInner .testimonials .testimonial .testimonialSlide section { float: left; width: 50% } .testimonialsWrapper .testimonialsInner .testimonials .testimonial .testimonialSlide section .max-width { float: left; width: 80%; padding: 15% 10% 10% } .testimonialsWrapper .testimonialsInner .testimonials .testimonial .testimonialSlide section .max-width p { color: #fefefe; font-size: 25px; font-family: Roboto; width: 100%; float: left; text-align: center } .testimonialsWrapper .testimonialsInner .testimonials .testimonial .testimonialSlide section .max-width hr { border: none; border-bottom: 2px solid #6e94cd!important; float: left; margin: 40px 45%; width: 10% } .testimonialsWrapper .testimonialsInner .testimonials .testimonial .testimonialSlide section .max-width span { color: #fefefe; font-family: Roboto; width: 100%; float: left; text-align: center; text-transform: uppercase } .testimonialsWrapper .testimonialsInner .testimonials .testimonial .testimonialSlide section .max-width .position { font-weight: 400; padding: 5px 0 0 } .testimonialsWrapper .testimonialsInner .testimonials .testimonial .testimonialSlide .testimonialImg { float: right; width: 50%; text-align: right } .scheduleDemoWrapper { float: left; padding: 0; width: 100%; max-width: 100%; background: url(https://s3-us-west-2.amazonaws.com/shepwebimg/shephertz/mad_bg.png?shep25072015) right bottom no-repeat; min-height: 600px!important; height: auto } .coverBox, .ctp, .journey ul, .path { min-height: 400px } .scheduleDemo_inner { max-width: 100%; padding: 0 5%; float: left } .scheduleDemoWrapper .scheduleDemo { width: 925px; margin: 0 auto } .scheduleDemoWrapper .scheduleDemo .inner { float: left; width: 100%; margin: 0 } .scheduleDemoWrapper h2 { width: 100%; text-align: left; color: #171717; font-size: 36px; font-family: montserrat_bold; margin: 50px 0 25px; padding-left: 1% } .scheduleDemoWrapper .scheduleDemo .inner p { width: 100%; text-align: center; color: #252525; font-size: 14px; font-family: Roboto; line-height: 24px; margin: 0 0 15px; padding: 0 } .scheduleDemoWrapper .scheduleDemo .inner .formWrapper { float: left; width: 100%; margin: 30px 0 0 } .scheduleDemoWrapper .scheduleDemo .inner .formWrapper #query_success_msg { color: #46ae00 } #query_success_msg, .scheduleDemoWrapper .scheduleDemo .inner .formWrapper #query_error_msg { float: left; font-family: Roboto; font-size: 14px; margin: 0 0 10px; width: 100% } .scheduleDemoWrapper .scheduleDemo .inner .formWrapper .row { float: left; width: 100%; margin: 0 0 15px } .scheduleDemoWrapper .scheduleDemo .inner .formWrapper .row .col { float: left; width: 48%; margin: 0 3% 0 0 } .scheduleDemoWrapper .scheduleDemo .inner .formWrapper .row input { width: 96%; padding: 2%; border: 1px solid #ccc; color: #1c1c1c; font-size: 14px; font-family: Roboto } .scheduleDemoWrapper .scheduleDemo .inner .formWrapper .row .err_msg { color: #d55252; float: left; font-family: Roboto; font-size: 12px; margin: 10px 0 0 } .scheduleDemoWrapper .scheduleDemo .inner .formWrapper .row .col:last-child { margin: 0; float: right } .scheduleDemoWrapper .scheduleDemo .inner .formWrapper .btnWraper { float: left; width: 100%; margin: 10px 0 0 } .scheduleDemoWrapper .scheduleDemo .inner .formWrapper .btnWraper .submitBtn { float: right; color: #00a0dc; font-size: 14px; font-family: Roboto; padding: 13px 35px; border-radius: 20px; border: 1px solid #00a0dc; text-transform: uppercase; background-color: #f5f5f5 } .scheduleDemoWrapper .scheduleDemo .inner .formWrapper .btnWraper .submitBtn:hover { color: #fff; border: 1px solid #0591c5; background-color: #00a0dc!important } .ContactForm_n .btnWraper { float: left; width: 100%; margin: 10px 0 0 } .ContactForm_n .btnWraper .submitBtn { color: #fff; font-size: 14px; font-family: Roboto; padding: 13px 35px; border-radius: 4px; border: none; background-color: #00988c; text-transform: capitalize; box-shadow: none; cursor: pointer } .ContactForm_n .btnWraper .submitBtn:hover { color: #fff; background-color: #00887c!important } .path { background: url(https://s3-us-west-2.amazonaws.com/shepwebimg/shephertz/path-points.png?shep25072015) 50% 50% no-repeat; position: relative; height: auto; width: 96%; margin: 65px auto 0; background-size: 99% } .coverBox, .enterprise, .gateway { position: absolute } .coverBox { background-color: #fefefe; height: 110px; width: 100%; padding-top: 50% } .advantage, .app42, .appwarp, .core, .devops, .ma, .paas { position: absolute; width: 20% } .pathBox { padding-top: 100px } .core { top: 57%; left: 2% } .app42 { top: 25px; left: 80px; float: left } .paas { top: 59%; left: 20%; float: left } .devops { top: 16%; left: 28%; float: left } .ma { top: 43%; left: 40%; float: left } .appwarp { top: 19%; left: 58% } .gateway { left: 67%; top: 60% } .enterprise { left: 80%; top: 2% } .advantage { left: 88%; top: 52% } .app42 img, .appwarp img, .devops img, .gateway img, .ma img, .paas img { width: auto } .testimonialsWrapper .testimonialsInner .clientel .row { float: left; width: 100%; margin: 30px 0 } .row .client { float: left; width: 19%; height: 225px; position: relative; text-align: center } .mrtp150 { margin-top: 150px } .mrtp100 { margin-top: 100px } .mrtp50 { margin-top: 50px } .wd50, .wd65 { margin-top: 10% } .wd50 { width: 50% } .wd65 { width: 65% } .wd20 { width: 20% } .wd60 { width: 60%; margin-top: 5% } .wd35 { width: 35%; margin-top: 10% } .journey ul, .journey ul li { width: 100%; float: left; padding: 0 } .journey { display: none } .journey ul { margin: 20px 0 100px 30px; border-left: 2px dashed #3c454f; position: relative } .journey ul li { list-style: none; margin: 0 0 60px -4px } .journey ul li.first { margin: -25px 0 35px -20px } .journey ul li.last { margin: -5px 0 0 -20px; position: absolute; bottom: -65px } .road { width: 96%; margin: 200px auto 0 } .road img { width: 100% } .benefitsWrapper { float: left; width: 100%; max-width: 100%; height: 790px; position: relative } .benefitsWrapper .benefitsInner { margin: 0 auto; width: 100%; height: 100% } .benefitsWrapper .benefitsInner .benefits { height: 750px } .benefitsWrapper .benefitsInner .benefits h3 { color: #031326; font-size: 42px; font-family: montserrat_bold_web; margin: 5px 0 50px; padding: 0; text-align: center; float: left; width: 100% } .benefitsPoints li, .btn_benefits a { font-family: montserrat; } .benefits .column { width: 50%; display: block; height: 500px; float: left } .benefits .column.right { background: url(https://s3-us-west-2.amazonaws.com/shepwebimg/shephertz/benefits_img.jpg?shep25072016) top left no-repeat; background-size: cover } .benefits .column.left { left: 1px; overflow: hidden; background-color: #fefefe } .pull-right { float: right } .pull-left { float: left } .benefitsPoints { margin: 30px 0 0; padding: 0; text-align: left; width: 100% } .benefitsPoints li { margin: 0 0 10px 75px; float: left; color: #6b6b6b; font-size: 14px; width: 70%; line-height: 24px } .benefitsPoints li img { float: left; margin-right: 15px; margin-top: 5px } .mrtp10 { margin-top: 10px } .btn_benefits { margin-top: 30px; display: block; text-align: center } .btn_benefits a { width: auto; height: auto; background-color: #00988c; color: #fff; font-size: 16px; cursor: pointer; padding: 10px 30px; letter-spacing: 0.03em; } .btn_benefits a:hover { background-color: #02847a } .mrtp10pc { margin-top: 10% } .ctp { background: url(http://www.shephertz.com/wp-content/themes/twentytwelve/home/images/PathLine.png) 50% 50% no-repeat; position: relative; height: auto; width: 96%; margin: 125px auto 0; background-size: 99% } .apitxt, .ctp-core, .ctpadvantage { position: absolute } .ctpBox { padding-top: 100px } .ctp-core { top: 57%; left: 2% } .ctpapp42 { top: -14.5%; left: 8% } .ctppaas { top: 66%; left: 23% } .ctpdevops { top: -14.5%; left: 32% } .ctpma { top: 65%; left: 43% } .ctpappwarp { top: -14.5%; left: 53% } .ctpgateway { left: 65%; top: 64% } .ctpenterprise { left: 75%; top: -14.5% } .ctpadvantage { left: 87%; top: 57% } .ctpapp42, .ctpappwarp, .ctpdevops, .ctpenterprise, .ctpgateway, .ctpma, .ctppaas { position: absolute; width: 20% } .ctpapp42 img, .ctpappwarp img, .ctpdevops img, .ctpenterprise img, .ctpgateway img, .ctpma img, .ctppaas img { width: auto } .apitxt { top: 40%; left: -2% } .appwarptxt, .devopstxt { top: 39.5%; position: absolute } .devopstxt { left: -20% } .appwarptxt { left: -12% } .enterprisetxt { position: absolute; top: 40%; left: -20% } .paastxt { position: absolute; top: 34%; left: -9% } .gatewaytxt, .matxt { position: absolute; left: -2% } .matxt { top: 35.3% } .gatewaytxt { top: 36.4% } .mhcWrapper1 { float: left; height: 730px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; display: table; background-color: #fefefe; background-attachment: initial!important; background-size: inherit } .mhcWrapper1 .mhcBanner { display: table-cell; margin: 0 auto; width: 100%; overflow: hidden } .mhcWrapper1 .mhcBanner .mhcInner { width: 80%; margin: 0 auto } .mhcWrapper1 .mhcBanner .mhcInner h2, .mhcWrapper1 .mhcBanner .mhcInner p, .mhcWrapper1 h3 { width: 100%; float: left; padding: 0; text-align: center } .mhcWrapper1 .mhcBanner .mhcInner h2 { color: #21384f; font-size: 36px; font-family: montserrat_bold; margin: 75px 0 35px } .mhcWrapper1 .mhcBanner .mhcInner p { color: #252525; font-size: 18px; font-family: Roboto; margin: 0; line-height: 26px } .mhcWrapper1 h3 { font-size: 42px; font-family: montserrat_bold_web; color: #031326; margin: 45px 0 5px } .benefitsPoints li p, .mhcWrapper1 h4 { font-family: montserrat_light; letter-spacing: 0.05em; } .pro { width: 200px; height: 300px } .pro .icon { transition: all .3s ease 0s; width: 215px; height: 175px } .pro:hover .icon { transition: all .3s ease 0s; -webkit-animation: zooInOut .5s 1; animation: zooInOut .5s 1 } @-webkit-keyframes zooInOut { 0%, 100% { -webkit-transform:scale(1) } 50% { -webkit-transform:scale(1.05) } } @keyframes zooInOut { 0%, 100% { transform:scale(1) } 50% { transform:scale(1.05) } } .zooInOut { -webkit-animation-name: zooInOut; animation-name: zooInOut } .mhcWrapper1 h4 { text-align: center; font-size: 16px; color: #464646; margin-top: -13px } .ctpMob { display: none } .benefitsWrapper .benefitsInner .benefits { width: 85%; margin: 0 auto } .benefitsWrapper .benefitsInner .benefits .benefit { width: 20%; height: 280px; margin: 0 6% 0 7%; float: left } .benefitsWrapper .benefitsInner .benefits .benefit figure { margin: 0 0 15px; padding: 0; text-align: center; width: 100% } .benefitsWrapper .benefitsInner .benefits benefit figure img { display: inline } .benefitsWrapper .benefitsInner .benefits .benefit h2 { padding: 0; color: #000; font-size: 15px; font-family: Roboto; text-align: center; font-weight: normal; } .dl { margin-top: -5%; width: 30% }
% }

.mhcWrapper1Mob{height: auto !important;}
.mhcWrapper1Mob figure{padding: 25px 0; display: inline-block; width: 100%; text-align: center;}
.mhcWrapper1Mob figure img{max-width: 100%; height: auto;}