.shep_nav_wrapper .shep_inner_nav .shep_menu .shepBtn a{ background-color: #f04a52!important; border: 2px solid #f04a52!important;}
.shep_nav_wrapper .shep_inner_nav .shep_menu .shepBtn a:hover { background: #f04a52!important; border-color:#f04a52!important}
.active_btn { color: #f04a52; border-bottom: 3px solid #f04a52!important }
nav ul li ul li ul:before {border-right: 6px solid #f04a52!important;}
.drop:hover .slicknav_item a{color: #f04a52!important;}
.shepBtnM .login_wrapper a:hover{background-color: #f04a52!important; color: #fff !important;}
.slicknav_btn {padding: 2.5em 1em !important; height: 20px;} 
.site-header { width: 100%;}
@font-face{font-family: montserrat_light; src: url(https://appwarp.shephertz.com/font/Montserrat-Light.eot); src: url(font/Montserrat-Light.eot?#iefix) format('embedded-opentype'), url(https://appwarp.shephertz.com/font/Montserrat-Light.woff) format('woff'), url(https://appwarp.shephertz.com/font/Montserrat-Light.ttf) format('truetype'), url(https://appwarp.shephertz.com/font/Montserrat-Light.svg#montserrat_light) format('svg'); font-weight: 400; font-style: normal}
@font-face{ font-family: montserrat; src: url(https://appwarp.shephertz.com/font/Montserrat-Regular.eot); src: url(https://appwarp.shephertz.com/font/Montserrat-Regular.eot?#iefix) format('embedded-opentype'), url(https://appwarp.shephertz.com/font/Montserrat-Regular.woff) format('woff'), url(https://appwarp.shephertz.com/font/Montserrat-Regular.ttf) format('truetype'), url(https://appwarp.shephertz.com/font/Montserrat-Regular.svg#montserrat) format('svg'); font-weight: 400; font-style: normal;}
@font-face{font-family: montserrat_bold; src: url(https://appwarp.shephertz.com/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(https://appwarp.shephertz.com/font/montserrat-bold-webfont.eot); src: url(https://appwarp.shephertz.com/font/montserrat-bold-webfont.eot?#iefix) format('embedded-opentype'), url(https://appwarp.shephertz.com/font/montserrat-bold-webfont.woff) format('woff'), url(https://appwarp.shephertz.com/font/montserrat-bold-webfont.ttf) format('truetype'), url(https://appwarp.shephertz.com/font/montserrat-bold-webfont.svg#montserrat_bold) format('svg'); font-weight: normal; font-style: normal;}
@import url(https://fonts.googleapis.com/css?family=Montserrat); @import url(https://fonts.googleapis.com/css?family=Roboto); @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: Roboto; src: url(font/Roboto-Regular.eot); src: url(font/Roboto-Regular?#iefix) format('embedded-opentype'), url(font/Roboto-Regular.woff) format('woff'), url(font/Roboto-Regular.ttf) format('truetype'), url(font/Roboto-Regular.svg#Roboto) format('svg'); font-weight: 400; font-style: normal } @font-face { font-family: Roboto-Medium; src: url(font/Roboto-Medium.eot); src: url(font/Roboto-Medium?#iefix) format('embedded-opentype'), url(font/Roboto-Medium.woff) format('woff'), url(font/Roboto-Medium.ttf) format('truetype'), url(font/Roboto-Medium.svg#Roboto-Medium) format('svg'); font-weight: 400; font-style: normal } @font-face { font-family: Roboto-Bold; src: url(font/Roboto-Bold.eot); src: url(font/Roboto-Bold?#iefix) format('embedded-opentype'), url(font/Roboto-Bold.woff) format('woff'), url(font/Roboto-Bold.ttf) format('truetype'), url(font/Roboto-Bold.svg#Roboto-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; } #widgetWrapper, .Wshow2, .breadcrumb_wrapper { display: none!important }
a, body, div, h1, h2, h3, h4, h5, img, input, li, p, ul { margin: 0; padding: 0; -webkit-text-size-adjust: auto!important; font-style: normal!important; font-weight: 400!important; font-size-adjust: inherit; font-family: 'Roboto'; } a { text-decoration: none!important; } .noBG { background-image: none!important; background-color: #f5f5f5!important; height: auto!important } .warpWrapper, .tabWrapper, .blogsWrapper, .pricingWrapper, .productsWrapper, .scheduleDemoWrapper { float: left; width: 100%; max-width: 100%; height: 700px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; position: relative; background-repeat: repeat-x; display: table; } .warpWrapper { background-image: url(https://appwarp.shephertz.com/wp-content/themes/twentytwelve/images/home/multiplayer.jpg?aw10022017); height: 660px; } .tabWrapper { background-image: url("https://s3-us-west-2.amazonaws.com/shepwebimg/appwarp/home/features.jpg?aw22072016"); background-position: 0 -270px; } .blogsWrapper { background-color: #f9f9f9; } .pricingWrapper { background-color: #fff; } .scheduleDemoWrapper { background: rgba(0, 0, 0, 0) url(https://appwarp.shephertz.com/wp-content/themes/twentytwelve/images/home/talk-to-gaming-expert.jpg?aw10022017) no-repeat scroll right -80px; border-top: 1px solid #dddddd; background-size: cover!important; height: 595px!important; } .warpWrapper .warpBanner { display: table-cell; margin: 0 auto; vertical-align: middle; width: 100%; } .warpWrapper .warpBanner .bannerInner { width: 80%; margin: 0 auto; } .warpWrapper .warpBanner .bannerInner h1{color: #fff;font-size: 40px;font-family: montserrat_bold_web;margin: 0 0 50px 0;padding: 0;text-align: center;float: left;width: 100%;line-height: initial;} .warpWrapper .warpBanner .bannerInner h1 span { color: #fff; font-family: 'Roboto' !important; font-size: 55px; line-height: 35px!important; width: 100%; clear: both; float: left; margin-top: 30px } .warpWrapper .warpBanner .bannerInner p { float: left; color: #e3e3e3; font-size: 17px; font-family: 'Roboto' !important; line-height: 22px; margin: 0 0 20px 0; padding: 0; } .warpWrapper .warpBanner .bannerInner .buttons { float: left;} .warpWrapper .warpBanner .bannerInner .buttons a { float: left;font-size: 16px;font-family: roboto;padding: 10px 25px;color: #ffffff;border: 2px solid #fff;background-color: transparent;width: auto;transition: all 0.3s ease 0s;border-radius: 10px;} .warpWrapper .warpBanner .bannerInner .buttons a:hover{border: 2px solid #ffffff; color: #000000; background-color: #ffffff;} .warpWrapper .warpBanner .bannerInner .btnwrapper{margin: 0 auto;text-align: center;display: table;} .warpWrapper .warpBanner .bannerInner .buttons:last-child {/***float: right***/} .warpWrapper .warpBanner .bannerInner .redBtn a { background-color: #eb473b!important; border: 2px solid #eb473b; width: 210px; } .warpWrapper .warpBanner .bannerInner .redBtn a:hover { background-color: #f31b1b!important; border: 2px solid #f31b1b; width: 210px; }
.warpWrapper .warpBanner .bannerInner .blueBtn a{background-color: #2aa9e0;border: 2px solid #2aa9e0;}.warpWrapper .warpBanner .bannerInner .blueBtn a:hover{background-color: #2a7be0;border: 2px solid #2a7be0;color: #fff;}
 /****************** Ccustomers ********************************/ .customers_wrapper { loat: left; width: 100%; max-width: 100%; height: 165px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; position: relative; background-repeat: repeat-x; display: table; background-image: url("https://s3-us-west-2.amazonaws.com/shepwebimg/appwarp/home/customers_bg.png?aw22072016"); margin: 0; border-bottom: 1px solid #ededed } .customers_inner { float: left; width: 90%; margin: 25px 5% } .customers_zone { float: left; width: 100%; }/****************** Ccustomers End ********************************/ .supported_SDKWrapper { float: left; width: 100%; max-width: 100%; height: 700px; display: table; background-color: #ffffff; } .supported_SDKWrapper .supported_SDKBanner { display: table-cell; margin: 0 auto; vertical-align: middle; width: 100%; } .supported_SDKWrapper .supported_SDKBanner .supported_SDKInner{width: 80%; margin: 0 auto; max-width: 1140px;}.supported_SDKWrapper .supported_SDKBanner .supported_SDKInner h3 { font-size: 42px; font-family: 'montserrat_bold_web' !important; color: #21384f; margin: 10px 0 60px 0; padding: 0 0 30px 0; text-align: center; } .supported_SDKWrapper .supported_SDKBanner .supported_SDKInner .ourService { float: left; width: 23%; height: 230px; margin: 0 1% 0 1%; }/*.ourService:nth-child(8), .ourService:nth-child(15), .ourService:nth-child(22){margin:0 0% 0 1% !important;}*/ .supported_SDKWrapper .supported_SDKBanner .supported_SDKInner .ourService:last-child { margin: 0 } .supported_SDKWrapper .supported_SDKBanner .supported_SDKInner .mz { margin: 0!important } .supported_SDKWrapper .supported_SDKBanner .supported_SDKInner .ourService figure { margin: 0 0 5px; padding: 0; text-align: center } .supported_SDKWrapper .supported_SDKBanner .supported_SDKInner .ourService figure img { display: inline } .supported_SDKWrapper .supported_SDKBanner .supported_SDKInner .ourService h4 { padding: 0 0 23px; color: #00988c; font-size: 15px; font-family: 'montserrat' !important; text-align: center; } .supported_SDKWrapper .supported_SDKBanner .supported_SDKInner .ourService p { color: #838383; font-size: 13px; font-family: 'Roboto' !important; text-align: center } .supported_SDKWrapper .supported_SDKBanner .supported_SDKInner .ourService h4:hover { color: #21384f; } .supported_SDKWrapper .supported_SDKBanner .supported_SDKInner .apiBtnWrapper { float: left; width: 100%; text-align: center; margin: 20px 0 50px 0 } .supported_SDKWrapper .supported_SDKBanner .supported_SDKInner .apiBtnWrapper a { float: left; width: 50%; text-align: center; font-size: 16px; font-family: 'Roboto' !important; padding: 10px 0; color: #00988c; margin-left: 10%; text-transform: uppercase; background-color: transparent; margin: 20px 25% 0 25%; border: 1px solid #00988c; border-radius: 3px } .supported_SDKWrapper .supported_SDKBanner .supported_SDKInner .apiBtnWrapper a:hover { background-color: #049d9d; color: #fff; } .tabWrapper .tabBanner { display: table-cell; margin: 0 auto; vertical-align: top; width: 100%; } .tabWrapper .tabBanner .tabInner { width: 100%; margin: 0 auto; } .tabs h2 { float: left; width: 100%; color: #fff; font-size: 36px; font-family: 'montserrat' !important; margin: 0; padding: 0 0 30px 0; text-align: center; background-image: url(https://s3-us-west-2.amazonaws.com/shepwebimg/appwarp/home/titleSep.png?aw22072016); background-repeat: no-repeat; background-position: bottom center; } .tabs .icon { float: left; width: 100%; text-align: center; margin: 100px 0 0 0 } .tabs h4 { float: left; width: 100%; color: #fff; font-size: 30px; font-family: 'Roboto' !important; margin: 30px 0 0 0; padding: 0; text-align: center; } .tabs p { float: left; width: 100%; color: #fff; font-size: 17px; font-family: 'Roboto' !important; line-height: 32px; font-weight: normal; margin: 45px 0 0 0; padding: 0; text-align: center; } .tabs .btnWrapper { float: left; width: 100%; text-align: center; } .tabs .btnWrapper a { float: left; width: 16%; text-align: center; font-size: 16px; font-family: 'Roboto' !important; padding: 10px 0; color: #fff; text-transform: uppercase; background-color: #01b4b4; margin: 20px 42% } .tabs .btnWrapper a:hover { background-color: #049d9d } .TabSlider { float: left; width: 100%; border-top: 1px solid #e8e8e8; } .tabs UL.horizontal { list-style: none outside none; margin: 0; float: left; width: 100%; background-color: #fff; } .tabs LI { background: #f9f9f9; width: 33.2%; margin: 0; padding: 0; float: left; border-right: 1px solid #e8e8e8; } .tabs LI:last-child { border: medium none; float: right!important; width: 33.4%; } .tabs A { color: #253e48; display: block; font-size: 18px; font-family: 'Roboto' !important; font-weight: 300; text-decoration: none; width: 100%; text-align: center; padding: 25px 0; } .tabs LI:hover { background: #00988c; } .tabs LI:hover A { color: white; } .tabs_rotate .active { background: #00988c!important; } .tabs_rotate .active A { color: white !important; } .blogsWrapper .blogsBanner { display: table-cell; margin: 0 auto; vertical-align: middle; width: 100%; } .blogsWrapper .blogsBanner .blogsInner { width: auto; margin: 0 auto; } .blogsWrapper .blogsBanner .blogsInner h3 { float: left; width: 100%; font-size: 42px; font-family: 'montserrat_bold_web' !important; color: #21384f; margin: 0 0 30px 0; padding: 0 0 30px 0; text-align: center; } .blogsWrapper .blogsBanner .blogsInner .blogs { float: left; width: 33.3%; height: 440px; line-height: 20px; margin: 0 0 0 0; /** background-color: #f3f3f3; border: 1px solid #d4d4d4; **/ position: relative; }.blogsBox{margin: 10px; border: 1px solid #d4d4d4; float: left;}.blogsWrapper .blogsBanner .blogsInner .blogs:last-child { margin: 0 } .blogsWrapper .blogsBanner .blogsInner .blogs figure { float: left; width: 100%; margin: 0 0 15px 0; padding: 0; } .blogsWrapper .blogsBanner .blogsInner .blogs figure img { width: 100% } .blogsWrapper .blogsBanner .blogsInner .blogs h4 { float: left; width: 88%; margin: 0 6% 10px 6%; padding: 0; color: #00988c; font-size: 15px; font-family: 'montserrat' !important; } .blogsWrapper .blogsBanner .blogsInner .blogs .bInfo { float: left; width: 88%; margin: 0 6% 10px 6%; padding: 0; color: #909090; font-size: 13px; font-family: 'Roboto' !important; } .blogsWrapper .blogsBanner .blogsInner .blogs .bInfo .user { float: left; padding: 0 10px 0 20px; margin: 0 10px 0 0; } .blogsWrapper .blogsBanner .blogsInner .blogs .bInfo .tag { float: left; padding: 0 0 0 20px; margin: 0; } .blogsWrapper .blogsBanner .blogsInner .blogs p { float: left; width: 88%; margin: 0 6% 20px 6%; padding: 0; color: #21384f; font-size: 13px; font-family: 'Roboto' !important; } .blogsWrapper .blogsBanner .blogsInner .blogs .buttons { margin: 7% auto 7% auto; display: table;} .blogsWrapper .blogsBanner .blogsInner .blogs .buttons a{float: left; font-family: 'montserrat' !important; padding: 10px 32px; color: #00988c; border: 1px solid #00988c; background-color: transparent; font-size: 13px; letter-spacing: 0.03em;} .blogsWrapper .blogsBanner .blogsInner .blogs .buttons a:hover { border: 1px solid #00988c; color: #fff; background-color: #00988c; } .blogsWrapper .blogsBanner .blogsInner .blogs .comment { float: right; width: 34px; height: 17px; margin: 15px 7% 0 0 } .pricingWrapper .pricingBanner { display: table-cell; margin: 0 auto; vertical-align: middle; width: 100%; padding: 0 0 0 0 } .pricingWrapper .pricingBanner .pricingInner { width: 75%; margin: 0 auto; } .pricingWrapper .pricingBanner .pricingInner h3 { float: left; width: 100%; font-size: 42px; font-family: 'montserrat_bold_web' !important; color: #21384f; margin: 0 0 30px 0; padding: 0 0 30px 0; text-align: center; } .pricingWrapper .pricingBanner .pricingInner .pricing { float: left; width: 48%; height: 450px; margin: 0 4% 0 0; background-color: #f8f8f8; border-radius: 5px; background-color: #f8f8f8; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } .pricingWrapper .pricingBanner .pricingInner .enterprise { float: left; width: 48%; height: 430px; margin: 0 3% 0 0; background-color: #f7f7f7; border-radius: 5px; background-color: #f8f8f8; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } .pricingWrapper .pricingBanner .pricingInner .pricing:last-child { margin: 0 } .pricingWrapper .pricingBanner .pricingInner .pricing .col { width: 100%; float: left; border-radius: 5px 5px 0 0; padding: 40px 0 0 0; display: table; } .pricingWrapper .pricingBanner .pricingInner .pricing .colA { background-color: #16a085; } .pricingWrapper .pricingBanner .pricingInner .pricing .colB { background-color: #d36b6b; } .pricingWrapper .pricingBanner .pricingInner .pricing .colC { background-color: #f7f7f7; padding: 19px 0 0 0; } .pricingWrapper .pricingBanner .pricingInner .pricing .col .title { display: block; } .pricing .col .txtA { float: left; width: 100%; text-align: center; color: #f9fdfc; font-size: 20px; font-family: 'montserrat' !important; } .pricing .col .txtB { float: left; width: 100%; text-align: center; color: #fff; font-size: 44px; font-family: 'montserrat_bold_web' !important; margin: 25px 0 0 0; } .pricing .col .txtC { float: left; width: 100%; text-align: center; color: #f9fdfc; font-size: 20px; font-family: 'montserrat' !important; } .pricingWrapper .pricingBanner .pricingInner .pricing .row { float: left; width: 80%; padding: 25px 10%; } .pricingWrapper .pricingBanner .pricingInner .pricing .row .tr { float: left; width: 100%; padding: 15px 0; margin: 0 0 20px 0; } .pricingWrapper .pricingBanner .pricingInner .pricing .row .tr:last-child { border: none; } .pricingWrapper .pricingBanner .pricingInner .pricing .row .tr { float: left; color: #253e48; font-size: 32px; font-family: Roboto !important; text-align: center; margin: 0 0 20px; width: 100%; } .pricingWrapper .pricingBanner .pricingInner .pricing .row .tr font span { color: #757575; font-size: 16px; } .pricingWrapper .pricingBanner .pricingInner .pricing .row .tr figure { float: right } .pricingWrapper .pricingBanner .pricingInner .pricing .row .buttons { float: left; width: 80%; text-align: center; font-size: 15px; padding: 15px 0; color: #fff; margin-left: 10%; font-family: 'montserrat'; letter-spacing: 0.03em; } .pricingWrapper .pricingBanner .pricingInner .pricing .row .bp { background-color: #16a085; } .pricingWrapper .pricingBanner .pricingInner .pricing .row .bp:hover { background-color: #25b89b; } .pricingWrapper .pricingBanner .pricingInner .pricing .row .sp { background-color: #d36b6b; } .pricingWrapper .pricingBanner .pricingInner .pricing .row .sp:hover { background-color: #d35656; } .pricingWrapper .pricingBanner .pricingInner .pricing .row .pp { background-color: #f0644b; } .pricingWrapper .pricingBanner .pricingInner .pricing .row .pp:hover { background-color: #f9826c; } .algnCent { text-align: center!important; } .colC .title .txtB { padding: 14px 0 30px 0!important; color: #eb473b; } .colC .row { width: 100%!important; padding: 0px 10%!important; } .ep { width: 80%; padding: 0 10%; } .ep .title { color: #253e48!important; font-size: 22px; font-family: montserrat!important; text-align: center; padding: 50px 20px 20px!important; } .ep .subtitle { color: #253e48!important; font-family: Roboto!important; text-align: center; line-height: 22px; padding: 10px 20px 64px; font-size: 16px; margin: 0 auto; width: 62%; } .ep .tr font span { color: #253e48!important; font-size: 22px!important; } .pricingBanner .pricingInner .pricing .row .ep { float: left; width: 80%; padding: 25px 10%; } .pricingWrapper .pricingBanner .pricingInner .pricing .msg { float: left; width: 100%; padding: 0 0 25px 0; } .pricingWrapper .pricingBanner .pricingInner .pricing .msg .buttons { float: left; width: 80%; text-align: center; font-size: 15px; padding: 15px 0; color: #fff; margin-left: 10%; font-family: 'montserrat'; letter-spacing: 0.03em; } .pricingWrapper .pricingBanner .pricingInner .pricing .msg .pp { background-color: #eb473b; } .pricingWrapper .pricingBanner .pricingInner .pricing .msg .pp:hover { background-color: #e43b2e; } .pull-right { float: right!important; } .quotes, .slidetxt { display: none } .slider.slider-horizontal { height: 50px!important; background-image: url(https://s3-us-west-2.amazonaws.com/shepwebimg/appwarp/home/pricing-slider-ponter.png?aw22072016), url(https://s3-us-west-2.amazonaws.com/shepwebimg/appwarp/home/pricing-slider-ponter.png?aw22072016), url(https://s3-us-west-2.amazonaws.com/shepwebimg/appwarp/home/pricing-slider-ponter.png?aw22072016); background-position: 1% 28px, 50% 28px, 99% 28px; background-repeat: no-repeat, no-repeat, no-repeat; }/**************************** Schedule Demo *************************************/ .scheduleDemoWrapper .scheduleDemo { display: table-cell; margin: 0 auto; width: 100%; } .scheduleDemo_inner { max-width: 100%; padding: 0 5%; } .scheduleDemoWrapper .scheduleDemo .inner { float: left; width: 100%; margin: 0; } .scheduleDemoWrapper h2 { width: 100%; text-align: left; color: #ffffff; font-size: 42px; font-family: montserrat_bold!important; margin: 50px 0 25px 0; text-transform: none; text-align: center; } .sub_abt_contact { color: #ffffff !important; font-size: 16px; width: 100%; text-align: left; padding: 0 0 35px 0; line-height: 26px; letter-spacing: 0.05em; font-family: 'montserrat_light'!important; text-align: center; } .write_us_wrapper { width: 100%; float: left; } .form_wrapper_inner { width: 100%; float: left } .ContactForm_n .success_msg { color: #46ae00; font-size: 13px; font-weight: 400; height: 16px; margin: 0 0 12px 3px; padding-bottom: 0; font-family: 'Roboto'!important; } .form_wrapper_inner .f_part1 { width: 490px; float: left } .form_wrapper_inner .f_part1>div { width: 100%; float: left } .form_wrapper_inner .f_part2 { width: 570px; float: right } .ContactForm_n input { background-color: #fafafa; border: 1px solid #c3c3c3; border-radius: 5px; color: #797979; font-size: 14px; padding: 8px 0px 8px 5px; width: 450px; margin-bottom: 12px; box-shadow: 1px 1px 1px #ddd inset; float: left } .ContactForm_n select { background-color: #fafafa; border: 1px solid #c3c3c3; border-radius: 5px; -moz-border-radius: 2px; -webkit-border-radius: 5px; color: #797979; font-family: 'Roboto'!important; font-size: 14px; padding: 8px 5px; width: 350px; margin-bottom: 12px; box-shadow: 1px 1px 1px #ddd inset; float: left } .datebox { width: 150px !important; margin-right: 10px; padding-bottom: 8px; } .timebox { width: 150px !important; margin-right: 10px; margin-right: 11px; margin-left: 6px; } .timezonebox { width: 130px !important; } .ContactForm_n textarea { background: none repeat scroll 0 0 #fafafa; border: 1px solid #c3c3c3; border-radius: 5px; color: #797979; display: block; font-family: 'Roboto'!important; font-size: 14px; margin: 1px 0 -1px; padding: 5px; box-shadow: 1px 1px 1px #ddd inset; width: 555px; height: 140px; float: left; margin-bottom: 12px } .ContactForm_n input.sub_buttons_n { height: 30px } .ContactForm_n .btnWraper { float: left; width: 100%; margin: 10px 0 0 0; } .ContactForm_n .btnWraper .submitBtn { color: #fff; padding: 13px 35px; border-radius: 5px; border: none; background-color: #00988c; box-shadow: none; cursor: pointer; font-family: 'montserrat'; letter-spacing: 0.03em; font-size: 15px; font-weight: normal; } .ContactForm_n .btnWraper .submitBtn:hover { color: #fff; background-color: #047f75!important; border: none; } .error { color: #aa0404; font-size: 12px; float: left; margin: 0 0 10px 0; width: 90%; } @media screen and (-webkit-min-device-pixel-ratio:0) { .ContactForm_n select { line-height: 30px; height: 36px; } } .btn_migrate { position: fixed!important; bottom: 0px!important; right: 10px!important; z-index: 10000 !important; } .btn_migrate a { display: inline-block !important; background: #00988c !important; box-shadow: 0 4px 9px rgba(0,0,0,.15)!important; box-sizing: border-box !important; color: #FFF !important; cursor: pointer !important; font-size: 13px !important; letter-spacing: .07em !important; text-shadow: none !important; text-transform: uppercase !important; text-align: center !important; padding: 10px 15px !important; -webkit-transition: background 200ms !important, box-shadow 200ms !important; transition: background 200ms, box-shadow 200ms !important; border-top-left-radius: 5px !important; border-top-right-radius: 5px !important; font-family: 'montserrat'; font-weight: normal; } .btn_migrate a:hover { background-color: #02847a !important; } /***************************************** bootstrap-slider **********************/ .slider { display: inline-block; vertical-align: middle; position: relative; } .slider.slider-horizontal { width: 80%; height: 20px; margin: 5% 10%; } .slider.slider-horizontal .slider-track { height: 10px; width: 100%; margin-top: -5px; top: 50%; left: 0; } .slider.slider-horizontal .slider-selection, .slider.slider-horizontal .slider-track-low, .slider.slider-horizontal .slider-track-high { height: 100%; top: 0; bottom: 0; } .slider.slider-horizontal .slider-tick, .slider.slider-horizontal .slider-handle { margin-left: -10px; margin-top: -5px; } .slider.slider-horizontal .slider-tick.triangle, .slider.slider-horizontal .slider-handle.triangle { border-width: 0 10px 10px 10px; width: 0; height: 0; border-bottom-color: #0480be; margin-top: 0; } .slider.slider-horizontal .slider-tick-label-container { white-space: nowrap; margin-top: 20px; } .slider.slider-horizontal .slider-tick-label-container .slider-tick-label { padding-top: 4px; display: inline-block; text-align: center; } .slider.slider-vertical { height: 210px; width: 20px; } .slider.slider-vertical .slider-track { width: 10px; height: 100%; margin-left: -5px; left: 50%; top: 0; } .slider.slider-vertical .slider-selection { width: 100%; left: 0; top: 0; bottom: 0; } .slider.slider-vertical .slider-track-low, .slider.slider-vertical .slider-track-high { width: 100%; left: 0; right: 0; } .slider.slider-vertical .slider-tick, .slider.slider-vertical .slider-handle { margin-left: -5px; margin-top: -10px; } .slider.slider-vertical .slider-tick.triangle, .slider.slider-vertical .slider-handle.triangle { border-width: 10px 0 10px 10px; width: 1px; height: 1px; border-left-color: #0480be; margin-left: 0; } .slider.slider-vertical .slider-tick-label-container { white-space: nowrap; } .slider.slider-vertical .slider-tick-label-container .slider-tick-label { padding-left: 4px; } .slider.slider-disabled .slider-handle { background-image: -webkit-linear-gradient(top, #dfdfdf 0%, #bebebe 100%); background-image: -o-linear-gradient(top, #dfdfdf 0%, #bebebe 100%); background-image: linear-gradient(to bottom, #dfdfdf 0%, #bebebe 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdfdfdf', endColorstr='#ffbebebe', GradientType=0); } .slider.slider-disabled .slider-track { background-image: -webkit-linear-gradient(top, #e5e5e5 0%, #e9e9e9 100%); background-image: -o-linear-gradient(top, #e5e5e5 0%, #e9e9e9 100%); background-image: linear-gradient(to bottom, #e5e5e5 0%, #e9e9e9 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe5e5e5', endColorstr='#ffe9e9e9', GradientType=0); cursor: not-allowed; } .slider input { display: none; } .slider .tooltip.top { color: #fff; float: left; font-family: montserrat!important; font-size: 44px; left: 190px !important; position: absolute; text-align: center; top: -100px !important; width: 100%; z-index: 99999; } .slider .tooltip-inner { white-space: nowrap; } .slider .hide { display: none; } .slider-track { position: absolute; cursor: pointer; background-image: -webkit-linear-gradient(top, #363636 0%, #676767 100%); background-image: -o-linear-gradient(top, #363636 0%, #676767 100%); background-image: linear-gradient(to bottom, #363636 0%, #676767 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); border-radius: 4px; } .slider-selection { position: absolute; background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%); background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%); background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 4px; } .slider-selection.tick-slider-selection { background-image: -webkit-linear-gradient(top, #89cdef 0%, #81bfde 100%); background-image: -o-linear-gradient(top, #89cdef 0%, #81bfde 100%); background-image: linear-gradient(to bottom, #89cdef 0%, #81bfde 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff89cdef', endColorstr='#ff81bfde', GradientType=0); } .slider-track-low, .slider-track-high { position: absolute; background: transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 4px; } .slider-handle { position: absolute; width: 20px; height: 20px; background-color: #eae6e7; background-image: -webkit-linear-gradient(top, #eae6e7 0%, #CECCCC 100%); background-image: -o-linear-gradient(top, #eae6e7 0%, #CECCCC 100%); background-image: linear-gradient(to bottom, #eae6e7 0%, #CECCCC 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0); filter: none; -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); border: 0px solid transparent; } .slider-handle.round { border-radius: 50%; } .slider-handle.triangle { background: transparent none; } .slider-handle.custom { background: transparent none; } .slider-handle.custom::before { line-height: 20px; font-size: 20px; content: '\2605'; color: #726204; } .slider-tick { position: absolute; width: 20px; height: 20px; background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%); background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%); background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; filter: none; opacity: 0.8; border: 0px solid transparent; } .slider-tick.round { border-radius: 50%; } .slider-tick.triangle { background: transparent none; } .slider-tick.custom { background: transparent none; } .slider-tick.custom::before { line-height: 20px; font-size: 20px; content: '\2605'; color: #726204; } .slider-tick.in-selection { background-image: -webkit-linear-gradient(top, #89cdef 0%, #81bfde 100%); background-image: -o-linear-gradient(top, #89cdef 0%, #81bfde 100%); background-image: linear-gradient(to bottom, #89cdef 0%, #81bfde 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff89cdef', endColorstr='#ff81bfde', GradientType=0); opacity: 1; } /***************************************** animate **********************/ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated1 { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -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; } @-webkit-keyframes bounce { 0%, 20%, 53%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.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%, 20%, 53%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.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%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; }/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { 0% { -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); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { 0% { -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); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.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); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.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); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 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% { -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); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { 0% { -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); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; }/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { 0% { -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); } 100% { -webkit-transform: none; transform: none; } } @keyframes wobble { 0% { -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); } 100% { -webkit-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 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%, 20%, 40%, 60%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 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; -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 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%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 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%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 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%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 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%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 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%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 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%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 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%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 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-animation-duration: .75s; animation-duration: .75s; } @-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 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; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-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-backface-visibility: visible !important; backface-visibility: visible !important; -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-animation-duration: .75s; animation-duration: .75s; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-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; }/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-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; }/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-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(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 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(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 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(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 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(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 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(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 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(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 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(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 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(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 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(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 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(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 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(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 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(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 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(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 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(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 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(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 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(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 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(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 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(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 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(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 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(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 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(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 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(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 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(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 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(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .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 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; } @-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 fadeInUp1 { 0% { opacity: 0; -webkit-transform: translate3d(0, 40px, 0); transform: translate3d(0, 40px, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInUp1 { 0% { opacity: 0; -webkit-transform: translate3d(0, 40px, 0); transform: translate3d(0, 40px, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInUp1 { -webkit-animation-name: fadeInUp1; animation-name: fadeInUp1; } /***************************************** daterangepicker **********************/ .daterangepicker { position: absolute; background: #fff; top: 100px; left: 20px; padding: 4px; margin-top: 1px; border-radius: 4px; width: 278px; } .daterangepicker.opensleft:before { position: absolute; top: -7px; right: 9px; display: inline-block; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; border-left: 7px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.2); content: ''; } .daterangepicker.opensleft:after { position: absolute; top: -6px; right: 10px; display: inline-block; border-right: 6px solid transparent; border-bottom: 6px solid #fff; border-left: 6px solid transparent; content: ''; } .daterangepicker.openscenter:before { position: absolute; top: -7px; left: 0; right: 0; width: 0; margin-left: auto; margin-right: auto; display: inline-block; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; border-left: 7px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.2); content: ''; } .daterangepicker.openscenter:after { position: absolute; top: -6px; left: 0; right: 0; width: 0; margin-left: auto; margin-right: auto; display: inline-block; border-right: 6px solid transparent; border-bottom: 6px solid #fff; border-left: 6px solid transparent; content: ''; } .daterangepicker.opensright:before { position: absolute; top: -7px; left: 9px; display: inline-block; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; border-left: 7px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.2); content: ''; } .daterangepicker.opensright:after { position: absolute; top: -6px; left: 10px; display: inline-block; border-right: 6px solid transparent; border-bottom: 6px solid #fff; border-left: 6px solid transparent; content: ''; } .daterangepicker.dropup { margin-top: -5px; } .daterangepicker.dropup:before { top: initial; bottom: -7px; border-bottom: initial; border-top: 7px solid #ccc; } .daterangepicker.dropup:after { top: initial; bottom: -6px; border-bottom: initial; border-top: 6px solid #fff; } .daterangepicker.dropdown-menu { max-width: none; z-index: 3000; } .daterangepicker.single .ranges, .daterangepicker.single .calendar { float: none; } .daterangepicker .calendar { display: none; max-width: 310px; margin: 4px; } .daterangepicker.show-calendar .calendar { display: block; } .daterangepicker .calendar.single .calendar-table { border: none; }/* Calendars */ .daterangepicker .calendar th { white-space: nowrap; text-align: center; min-width: 32px; font-family: 'Roboto'; font-weight: bold; } .daterangepicker .calendar td { white-space: nowrap; text-align: center; min-width: 32px; font-family: 'Roboto'; } .daterangepicker .calendar-table { border: 1px solid #ddd; padding: 4px; border-radius: 4px; background: #fff; } .daterangepicker table { width: 100%; margin: 0; } .daterangepicker td, .daterangepicker th { text-align: center; width: 20px; height: 20px; border-radius: 4px; white-space: nowrap; cursor: pointer; } .daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date { color: #999; background: #fff; } .daterangepicker td.disabled, .daterangepicker option.disabled { color: #999; cursor: not-allowed; text-decoration: line-through; } .daterangepicker td.available:hover, .daterangepicker th.available:hover { background: #eee; } .daterangepicker td.in-range { background: #ebf4f8; border-radius: 0; } .daterangepicker td.start-date { border-radius: 4px 0 0 4px; } .daterangepicker td.end-date { border-radius: 0 4px 4px 0; } .daterangepicker td.start-date.end-date { border-radius: 4px; } .daterangepicker td.active, .daterangepicker td.active:hover { background-color: #357ebd; border-color: #3071a9; color: #fff; } .daterangepicker td.week, .daterangepicker th.week { font-size: 80%; color: #ccc; } .daterangepicker select.monthselect, .daterangepicker select.yearselect { font-size: 12px; padding: 1px; height: auto; margin: 0; cursor: default; } .daterangepicker select.monthselect { margin-right: 2%; width: 56%; } .daterangepicker select.yearselect { width: 40%; } .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect { width: 50px; margin-bottom: 0; } .daterangepicker th.month { width: auto; }/* Text Input Above Each Calendar */ .daterangepicker .input-mini { border: 1px solid #ccc; border-radius: 4px; color: #555; display: block; height: 30px; line-height: 30px; vertical-align: middle; margin: 0 0 5px 0; padding: 0 6px 0 28px; width: 100%; } .daterangepicker .input-mini.active { border: 1px solid #357ebd; } .daterangepicker .daterangepicker_input i { position: absolute; left: 8px; top: 8px; } .daterangepicker .daterangepicker_input { position: relative; }/* Time Picker */ .daterangepicker .calendar-time { text-align: center; margin: 5px auto; line-height: 30px; position: relative; padding-left: 28px; } .daterangepicker .calendar-time select.disabled { color: #ccc; cursor: not-allowed; }/* Predefined Ranges */ .daterangepicker .ranges { font-size: 11px; float: none; margin: 4px; text-align: left; } .daterangepicker .ranges ul { list-style: none; margin: 0 auto; padding: 0; width: 100%; } .daterangepicker .ranges li { font-size: 13px; background: #f5f5f5; border: 1px solid #f5f5f5; color: #08c; padding: 3px 12px; margin-bottom: 8px; border-radius: 5px; cursor: pointer; } .daterangepicker .ranges li.active, .daterangepicker .ranges li:hover { background: #08c; border: 1px solid #08c; color: #fff; }/*  Larger Screen Styling */ @media (min-width: 564px) { .daterangepicker { width: auto; } .daterangepicker .ranges ul { width: 160px; } .daterangepicker.single .ranges ul { width: 100%; } .daterangepicker .calendar.left .calendar-table { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; } .daterangepicker .calendar.right .calendar-table { border-left: none; border-top-left-radius: 0; border-bottom-left-radius: 0; } .daterangepicker .calendar.left { clear: left; margin-right: 0; } .daterangepicker.single .calendar.left { clear: none; } .daterangepicker.single .ranges, .daterangepicker.single .calendar { float: left; } .daterangepicker .calendar.right { margin-left: 0; } .daterangepicker .left .daterangepicker_input { padding-right: 12px; } .daterangepicker .calendar.left .calendar-table { padding-right: 12px; } .daterangepicker .ranges, .daterangepicker .calendar { float: left; } } @media (min-width: 730px) { .daterangepicker .ranges { width: auto; float: left; } .daterangepicker .calendar.left { clear: none; } }/******** BootstrapMin **********/ .pull-left { float: left!important; } .input-group { position: relative; display: table; border-collapse: separate; } .input-group .form-control, .input-group-addon, .input-group-btn { display: table-cell; } .input-group .form-control { position: relative; z-index: 2; float: left; width: 100%; margin-bottom: 0; } .input-group-addon:last-child { border-left: 0; } .input-group-addon { padding: 6px 12px!important; font-size: 14px; font-weight: 400; line-height: 1; color: #555; text-align: center; background-color: #eee; border: 1px solid #ccc; border-radius: 4px; } .input-group-addon, .input-group-btn { width: 1%!important; white-space: nowrap; vertical-align: middle; } .input-group .form-control, .input-group-addon, .input-group-btn { display: table-cell; } .glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .glyphicon-calendar:before { content: url('https://s3-us-west-2.amazonaws.com/shepwebimg/api/bs_calendar.png?aw22072016'); height: 14px; width: 14px; margin-left: 5px; } .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; font-size: 14px; text-align: left; list-style: none; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0,0,0,.15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px rgba(0,0,0,.175); } table { border-spacing: 0; border-collapse: collapse; } .table-condensed>tbody>tr>td, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>td, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>thead>tr>th { padding: 5px; } .glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .glyphicon-chevron-left:before { content: url('https://s3-us-west-2.amazonaws.com/shepwebimg/api/arrow_left.png?aw22072016'); height: 9px; width: 13px; } .glyphicon-chevron-right:before { content: url('https://s3-us-west-2.amazonaws.com/shepwebimg/api/arrow_right.png?aw22072016'); height: 9px; width: 13px; } .datebox i { position: absolute; bottom: 15px; right: 0px; top: auto; cursor: default; z-index: 1000; } .productsWrapper { background-image: url(https://appwarp.shephertz.com/wp-content/themes/twentytwelve/images/home/products-bg.jpg?aw10022017) } .productsInner { width: 100%; margin: 0 auto; vertical-align: middle; display: table-cell; } .card {/*** float: left; width: 23%; background-color: rgba(1,129,248,.2); border: 1px solid rgba(255,255,255,.2); padding: 2% 1% 4%; text-align: center; color: #fff; margin-left: 6% ***/} .card:hover{/*** background-color: rgba(1,129,248,.4); border: 1px solid rgba(255,255,255,.5); box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.2)  ***/} .card .card-title { font-size: 22px; font-family: 'montserrat'; padding: 10px 0; } .card .card-sub-title { font-size: 13px; font-family: 'montserrat_light'; letter-spacing: 0.05em; font-weight: normal; min-height: 40px; line-height: 20px; } .card figure { margin: 20px 0 } .card-content { width: 85%; margin: 0 5% 0 10%; } .card-content ul { margin: 0; padding: 0; list-style-type: disc;} .card-content ul li { font-size: 14px; text-align: left; line-height: 20px; margin-bottom: 10px; font-family: Roboto; color: #fff; } .card-content .btn { background-color: transparent; color: #fff; border: 1px solid #fff; padding: 3% 10%; font-family: 'montserrat'; font-size: 13px; letter-spacing: 0.03em; margin-left: -5%; } .card-content .btn:hover { border: 1px solid #00988c; color: #fff; background-color: #00988c }
.dwnlbannerInner a{color: #1B93E2;}

/*****Header-Css*****/
#solutions{left: -420%!important;}
#solutions:after{left:47%!important}
#products{left: -250%!important;}
.shep_nav_wrapper{display: none;}
.sgnw .sgni{float: none!important; margin: 0 auto!important; max-width: 1140px!important; padding: 0!important; width: 1140px!important;}
.sgnw .sgni .sgn .shep_menu .shepBtn{display: block !important;}
.sgnw .sgni .sgn .shep_menu .shepBtn a.grey{background-color: transparent; color: #28a4d9;}
.sgnw .sgni .sgn .shep_menu .shepBtn a{background-color: #fff; border: 2px solid #fff; color: #2aa9e0;}
.sgnwbg{background-color: transparent !important;}
.sticky_header .sgnwbg{background: rgba(9,29,37,0.7) !important;}
header{/***position: fixed;***/ width: 100%; z-index: 2147483647; top: 0;}
.sgnw .sgni .sgn .shep_menu .logSignBtn{ float: right; margin: 27px 0 0 15px; text-align: left; display:none}
.sgnw .sgni .sgn .shep_menu .logSignBtn a { float:left; width:80px;    background-color: #2aa9e0;
    border: 2px solid #2aa9e0;border-radius:10px; color: #fff; float: left; font-family: Roboto, Source Sans Pro; font-size: 13px; font-weight: 400; margin:0 0 0 10px; padding: 8px 0; text-decoration:none; text-align: center; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease;  letter-spacing: 0.04em;}
.sgnw .sgni .sgn .shep_menu .logSignBtn a:hover {background: #297adf; border-color:#297adf; color:#fff;}
.sgnw .sgni .sgn .shep_menu .logSignBtn a:nth-child(1) { margin: 0 }
.sgnw .sgni .sgn .shep_menu .logSignBtn a.grey { background-color:transparent; color:#fff; border:2px solid #fff;}
.sgnw .sgni .sgn .shep_menu .logSignBtn a.grey:hover { background-color:#ffffff; border-color:#ffffff; color:#000000;}
.sgnw .sgni .sgn .shep_menu .logSignBtn{display: block !important;}
#highlights{width: 250px; left: -150%;}
#gaming_backend{min-width: 700px; left: -220%;;}
#gaming_backend ul{width: 50%; float: left;}
#resources{width: 260px; left: -150%;}
#resources:after{left:45%}
#resources.menuWrapper .menuRow .navImg{margin-top:0}
#resources #ddsubmenuWrapper:hover .navsm_optA{height: 95px !important;}
.sgnw .sgni .sgn .shep_menu .shep_nav ul li .navsm_optA{margin: 10px 0 0 0 !important;}
#resources #ddsubmenuWrapper{margin: -10px 0 15px 0;}
.menuWrapper .menuRow .navContent .navSub{padding: 0;}
.mobMenuWrapper .menuRow .navContent .navSub{padding: 0;}
.mobMenuWrapper ul li a{color: #21759b;}
.mrbt0{margin-bottom: 0 !important;}
.sgnwbg{background-color: transparent !important; position: fixed;}
.sticky_header .sgnwbg{background: rgba(9,29,37,0.7) !important;}
header{/***position: fixed;***/ width: 100%; z-index: 2147483647; top: 0;}
/*****Header-Css-Ends*****/

.bannerinnerWrapper{background-image: url(https://appwarp.shephertz.com/wp-content/themes/twentytwelve/images/appwarp-inner-bg.jpg);height: 360px;display: table;width: 100%;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}
.bannerinnerWrapper .bannerinner{display: table-cell;vertical-align: middle;}
.bannerinnerWrapper .bannerinner .banner{ max-width: 1140px; width: 1140px; margin: 0 auto;}
.bannerinnerWrapper .bannerinner h1{float: left;width: 100%;color: #ffffff;font-size: 36px;font-family: 'montserrat_bold_web';margin: 20px 0 0 0;padding: 0;text-align: center;}
.bannerinnerWrapper .bannerinner h2{float: left;width: 100%;color: #e5e5e5;font-size: 19px;font-family: 'Roboto' !important;margin: 20px 0 0 0;padding: 0;text-align: center;line-height: 25px;}
.mrlt30{margin-left: 30px;}

.mwWrapper{max-width: 1140px;width:  100%;float: none;margin: 0 auto;background: #cfcfcf;}	
.cardWrapper{float: left;width: 33.33%;padding: 0;text-align: center;color: #fff;}	
.cardWrapper:hover .card{background-color: rgba(1,129,248,.4);}	
.card{margin: 10px;background-color: rgba(1,129,248,.2);border: 1px solid rgba(255,255,255,.2);}
.btnKm {
	background-color: transparent;
	color: #fff;
	font-family: 'montserrat';
	font-size: 13px;
	letter-spacing: 0.03em;
	margin: 45px 0;
}
.btnKm a {
	border: 1px solid #fff;
	padding: 3% 10%;
	color: #fff;
	text-decoration: none;
}
.btnKm a:hover {
    border: 1px solid #00988c;
    color: #fff;
    background-color: #00988c;
}	
.card .card-title {
	font-size: 22px;
	font-family: 'montserrat';
	padding: 30px 0 10px 0;
}
.card .card-sub-title {
	font-size: 13px;
	font-family: 'montserrat_light';
	letter-spacing: 0.05em;
	font-weight: normal;
	min-height: 40px;
	line-height: 20px;
        padding: 0 5%;
}
.card figure {
	margin: 20px 0
}
.card-content {
	width: 85%;
	margin: 0 5% 0 10%;
	min-height: 220px;
}
.card-content ul {
	margin: 0;
	padding: 0;
	list-style-type: disc;
	/** min-height: 280px; **/
	height: auto;
}
.card-content ul li {
	font-size: 14px;
	text-align: left;
	line-height: 20px;
	margin-bottom: 10px;
	font-family: Roboto;
	color: #fff;
}
.card-content .btn {
	background-color: transparent;
	color: #fff;
	border: 1px solid #fff;
	padding: 3% 10%;
	font-family: 'montserrat';
	font-size: 13px;
	letter-spacing: 0.03em;
	margin-left: -5%;
}
.mrlr10{margin: 0 10px;}


/* SKS CSS */

.warpWrapper{
	background: url(./img/appwrap-bg1.jpg)no-repeat center center;
	background-size: cover;
}
.productsWrapper{
background: url(./img/appwrap-bg2.jpg)no-repeat center center;	
background-size: cover;
}
.scheduleDemoWrapper{
	background: url(./img/appwrap-bg3.jpg)no-repeat center center;	
	background-size: cover;
}


.scheduleDemo .mauticform-button-wrapper .mauticform-button.btn-default{
background-color: #2aa9e0;
    border: 1px solid #2aa9e0;
}

.scheduleDemo .mauticform-button-wrapper .mauticform-button.btn-default:hover{
background-color: #2a7be0;
    border: 1px solid #2a7be0;
}

.colC .title .txtB {
    color: #2aa9e0;
    padding: 25px 0 10px!important;
}

.pricingWrapper .pricingBanner .pricingInner .pricing .col .title figure.algnCent{
	display: none;
}

.pricingWrapper .pricingBanner .pricingInner .pricing .msg .pp{
    background-color: #2aa9e0;
}
.pricingWrapper .pricingBanner .pricingInner .pricing .msg .pp:hover {
    background-color: #2a7be0;
}

.pricingWrapper .pricingBanner .pricingInner .pricing .colB {
    background-color: #01b4b4;
}
.pricingWrapper .pricingBanner .pricingInner .pricing .row .sp {
    background-color: #00988c;
}
.pricingWrapper .pricingBanner .pricingInner .pricing .row .sp:hover {
    background-color: #047f75;
}

.blogsWrapper .blogsBanner .blogsInner .blogs h4{
color: #21384f;
}

.blogsWrapper .blogsBanner .blogsInner .blogs .buttons a {
    color: #2bade7;
    border: 1px solid #2bade7;}

    .blogsWrapper .blogsBanner .blogsInner .blogs .buttons a:hover {
    border: 1px solid #2bade7;
    color: #fff;
    background-color: #2bade7;
}
.btnKm a:hover {
    border: 1px solid #2bade7;
    color: #fff;
    background-color: #2bade7;
}

.supported_SDKWrapper .supported_SDKBanner .supported_SDKInner .ourService h4 {
    color: #21384f;}