@import url(https://fonts.googleapis.com/css?family=Montserrat);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,400i,700);
@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; }
body{
    overflow-x: hidden !important;
}
a, body, div, h1, h2, h3, h4, h5, img, input, li, p, ul { margin: 0; padding: 0; font-weight: normal !important;/* text-rendering: optimizelegibility; -webkit-text-size-adjust: auto!important; font-style: normal!important; font-weight: 400!important; font-size-adjust: inherit; -moz-font-smoothing: none; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-family: Roboto */ }
a { text-decoration: none!important }
.shep_nav_wrapper .shep_inner_nav .shep_menu .shepBtn a { background-color: #1e9ed6; border: 2px solid #1e9ed6; }
.shep_nav_wrapper .shep_inner_nav .shep_menu .shepBtn a:hover { background: #1e9ed6 none repeat scroll 0 0 !important; border-color: #1e9ed6; }
.active_btn { border-bottom: 3px solid #23bbc6 ; color: #1e9ed6; }
nav ul li ul li ul::before { border-right: 6px solid #1e9ed6 ; }
.drop:hover .slicknav_item a { color: #23bbc6 !important; }
.shepBtnM .login_wrapper a:hover { background-color: #1e9ed6!important; color: #fff; }
#widgetWrapper, .Wshow2, .breadcrumb_wrapper { display: none!important }
.noBG { background-image: none!important; background-color: #f5f5f5!important; height: auto!important }
.atWrapper, .blogsWrapper, .maWrapper, .pricingWrapper, .productsWrapper, .scheduleDemoWrapper { float: left; width: 100%; max-width: 100%; height: 700px; -webkit-background-size: cover!important; -moz-background-size: cover!important; -o-background-size: cover!important; background-size: cover!important; background-attachment: fixed; position: relative; background-repeat: repeat-x; display: table }
.maWrapper {background-image: url(https://apis.shephertz.com/images/home/create-interactive-and-engaging-apps-bg.jpg?API04062018);height: 575px;background-attachment: inherit;background: #f5f5f5;background-image: none;}
.atWrapper { background-image: url(https://apis.shephertz.com/images/slider-bg.png?API13022017) }
.productsWrapper { background-image: url(https://dwo5aya3d1c6n.cloudfront.net/api/0.0.5/products-bg.jpg?API13022017?) }
.blogsWrapper {background-color: #f5f5f5;height: auto;padding: 60px 0 70px;}
.pricingWrapper { background-color: #fff }
.formWrapper { float: left; width: 100%; max-width: 100%; height: 255px }
.maWrapper .maBanner { display: table-cell; margin: 0 auto; vertical-align: middle; width: 100%; position: relative }
.maWrapper .maBanner .bannerInner { width: 90%; margin: 0 auto }
.maWrapper .maBanner .bannerInner h1 {color: #000;font-size: 32px;font-family: montserrat;margin: 0 0 35px;padding: 0;text-align: center;float: left;width: 100%;}
.maWrapper .maBanner .bannerInner h1 span, .maWrapper .maBanner .bannerInner h2 { color: #fff; font-family: montserrat_bold_web; width: 100%; clear: both; float: left }
.maWrapper .maBanner .bannerInner h1 span { font-size: 55px; line-height: 35px!important; margin-top: 20px; margin-bottom: 20px }
.maWrapper .maBanner .bannerInner h2 {font-size: 50px;margin: 20px 0 30px 0;text-align: center;color: #81e837;}
.maWrapper .maBanner .bannerInner p { float: left; color: #e3e3e3; font-size: 17px; font-family: Roboto; line-height: 22px; margin: 0 0 20px; padding: 0 }
.maWrapper .maBanner .bannerInner .button a, .maWrapper .maBanner .bannerInner .redBtn 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;}
.maWrapper .maBanner .bannerInner .button { float: left; margin: 0 0 40px }
.maWrapper .maBanner .bannerInner .button a {border: 2px solid #000;background-color: transparent;color: #000;}
.maWrapper .maBanner .bannerInner .button a:hover {border: 2px solid #000;color: #fff;background-color: #000;}
.maWrapper .maBanner .bannerInner .btnwrapper {margin: 0 auto;text-align: center;display: table;}
.maWrapper .maBanner .bannerInner .redBtn a { background-color: #e43b2e !important; border: 2px solid #e43b2e;}
.maWrapper .maBanner .bannerInner .redBtn a:hover { border: 2px solid #eb473b !important; color: #fff; background-color: #eb473b !important;}
.maWrapper .maBanner .bannerInner .blueBtn a{background-color: #2aa9e0;border: 2px solid #2aa9e0;color: #fff;}
.maWrapper .maBanner .bannerInner .blueBtn a:hover{background-color: #2a7be0;border: 2px solid #2a7be0;color: #fff;}
.bannerInnerright { float: right; width: 30%; margin: 100px 0 0; position: relative }
.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://dwo5aya3d1c6n.cloudfront.net/api/customers_bg.png?API13022017); margin: 0 0 30px; border-bottom: 1px solid #ededed }
.customers_inner { float: left; width: 90%; margin: 25px 5% }
.atWrapper .atBanner, .atWrapper .atBanner .atInner { margin: 0 auto; width: 100% }
.customers_zone { float: left; width: 100% }
.atWrapper .atBanner { display: table-cell; vertical-align: top }
.ats { float: left; width: 50%; padding: 0 25% }
.ats h2 { float: left; width: 100%; color: #fff; font-size: 36px; font-family: montserrat; margin: 0; padding: 0 0 30px; text-align: center }
.ats h4, .ats p { padding: 0; width: 100%; font-family: Roboto; color: #fff; float: left; text-align: center }
.ats .icon { float: left; width: 100%; text-align: center; margin: 100px 0 0 }
.ats h4 { font-size: 30px; margin: 30px 0 0 }
.ats p { font-size: 17px; line-height: 32px; font-weight: 400; margin: 45px 0 0 }
.ats .btnWrapper { float: left; width: 100%; text-align: center }
.ats .btnWrapper a { float: left; width: 30%; text-align: center; font-size: 16px; font-family: Roboto; padding: 10px 0; color: #fff; text-transform: uppercase; background-color: #00988c; margin: 20px 35% }
.ats .btnWrapper a:hover { background-color: #047f75 }
.blogsWrapper .blogsBanner { display: table-cell; margin: 0 auto; vertical-align: middle; width: 100% }
.blogsWrapper .blogsBanner .blogsInner { width: 86%; margin: 0 auto }
.blogsWrapper .blogsBanner .blogsInner h3 {float: left;width: 100%;font-size: 42px;font-family: montserrat_bold_web;color: #21384f;margin: 10px 0 40px;text-align: center;}
.blogsWrapper .blogsBanner .blogsInner .blogs { float: left; width: 29%; height: 460px; margin: 0 2% 0 2%; background-color: #fff; border-bottom: 1px solid #e2e2e2; cursor: pointer; border-radius: 10px;}
.blogsWrapper .blogsBanner .blogsInner .blogs:last-child {}
.blogsWrapper .blogsBanner .blogsInner .blogs figure { float: left; width: 100%; margin: 0 0 15px; padding: 0 }
.blogsWrapper .blogsBanner .blogsInner .blogs figure img { width: 100%; border-radius: 10px 10px 0 0;}
.blogsWrapper .blogsBanner .blogsInner .blogs h4 { float: left; width: 88%; margin: 0 6% 10px; padding: 0; color: #21384f; font-size: 15px; font-family: montserrat; }
.blogsWrapper .blogsBanner .blogsInner .blogs .bInfo { float: left; width: 88%; margin: 0 6% 10px; padding: 0; color: #909090; font-size: 13px; font-family: Roboto }
.blogsWrapper .blogsBanner .blogsInner .blogs .bInfo .user { float: left; background-repeat: no-repeat; background-position: 0 4px; 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; padding: 0; color: #999999; font-size: 13px; font-family: Roboto }
.blogsWrapper .blogsBanner .blogsInner .blogs .button {float: inherit;margin: 15px auto 0 auto;border-radius: 10px;text-align: center;display: table;width: 100%;}
.blogsWrapper .blogsBanner .blogsInner .blogs .button a {font-size: 13px;font-family: Roboto;padding: 10px 15px;color: #2bade7;border: 2px solid #2bade7;background-color: transparent;transition: all 0.3s ease 0s;border-radius: 10px;width: auto;}
.blogsWrapper .blogsBanner .blogsInner .blogs .button a:hover { border: 1px solid #2bade7; color: #fff; background-color: #2bade7;}
.blogsWrapper .blogsBanner .blogsInner .blogs .comment { float: right; width: 34px; height: 17px; margin: 15px 7% 0 0 }
.blogsWrapper .blogsBanner .blogsInner .blogs  .h36{height: 36px;}
.pricingWrapper .pricingBanner { display: table-cell; margin: 0 auto; vertical-align: middle; width: 100%; padding: 0 0 45px }
.pricingWrapper .pricingBanner .pricingInner { width: 75%; margin: 0 auto }
.pricingWrapper .pricingBanner .pricingInner h3 {float: left;width: 100%;font-size: 42px;font-family: montserrat_bold_web;color: #21384f;margin: 10px 0 40px;padding: 0 0 5px;text-align: center;}
/* .formWrapper .formInner h4, .pricing .col .txtA, .pricing .col .txtB, .pricing .col .txtC, .pricingWrapper .pricingBanner .pricingInner .pricing .row .tr { font-family: montserrat_light; } */
.pricingWrapper .pricingBanner .pricingInner .enterprise, .pricingWrapper .pricingBanner .pricingInner .pricing { width: 48%; margin: 0 3% 0 0; border-radius: 10px; box-shadow: 0 2px 5px 0 rgba(0,0,0,.08), 0 2px 10px 0 rgba(0,0,0,.12); float: left }
.pricingWrapper .pricingBanner .pricingInner .pricing { height: 450px; background-color: #f8f8f8 }
.pricingWrapper .pricingBanner .pricingInner .enterprise { height: 430px; background-color: #f7f7f7 }
.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; display: table }
.pricingWrapper .pricingBanner .pricingInner .pricing .colA { background-color: #16a085 }
.pricingWrapper .pricingBanner .pricingInner .pricing .colB { background-color: #01b4b4 }
.pricingWrapper .pricingBanner .pricingInner .pricing .colC { background-color: #f7f7f7 }
.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; }
.pricing .col .txtB { float: left; width: 100%; text-align: center; color: #fff; font-size: 44px; font-family: montserrat_bold_web; }
.pricing .col .txtC { float: left; width: 100%; text-align: center; color: #f9fdfc; font-size: 20px; font-family: montserrat; }
.pricingWrapper .pricingBanner .pricingInner .pricing .row { float: left; width: 80%; padding: 25px 10% }
.pricingWrapper .pricingBanner .pricingInner .pricing .row .tr { width: 100%; margin: 0 0 20px; float: left; color: #21384f; font-size: 32px; text-align: center; padding: 17px 0; font-family: montserrat; }
.pricingWrapper .pricingBanner .pricingInner .pricing .row .tr:last-child { border: none }
.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 .button {float: left;width: 80%;text-align: center;font-size: 16px; font-family: roboto; padding: 10px 0;color: #fff;margin-left: 10%;transition: all 0.3s ease 0s; border-radius: 10px;}
.formWrapper .formInner h3, .formWrapper .formInner h4 { float: left; color: #FFF; padding: 0; text-shadow: 2px 2px 3px rgba(0,0,0,.6); text-align: center }
.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: #00988c }
.pricingWrapper .pricingBanner .pricingInner .pricing .row .sp:hover { background-color: #047f75 }
.pricingWrapper .pricingBanner .pricingInner .pricing .row .pp { background-color: #eb473b }
.pricingWrapper .pricingBanner .pricingInner .pricing .row .pp:hover { background-color: #e43b2e }
/* .slider .tooltip.top { font-family: montserrat_bold_web!important } */
.formWrapper .formInner { width: 40%; margin: 50PX auto }
.formWrapper .formInner h3 { width: 100%; font-size: 33px; font-family: montserrat; margin: 0 0 5px; text-transform: uppercase }
.formWrapper .formInner h4 { width: 100%; font-size: 19px; margin: 0 }
.formWrapper .formInner .subscribeWrapper .email, .formWrapper .formInner .subscribeWrapper .subscribebtn { padding: 1.5% 2%; border: 1px solid #fff; color: #fff; font-size: 15px; font-family: Roboto; background-color: transparent; float: left }
.formWrapper .formInner .subscribeWrapper { float: left; width: 100%; margin: 30px 0 0 }
.formWrapper .formInner .subscribeWrapper .email { width: 50% }
.formWrapper .formInner .subscribeWrapper .subscribebtn { width: 30%; margin: 0 0 0 30px; cursor: pointer }
.formWrapper .formInner .subscribeWrapper .subscribebtn:hover { background-color: #f0644b }
.mrbt0 { margin-bottom: 0!important }
.mrbt20 { margin-bottom: 20px!important }
.mrbt50 { margin-bottom: 50px!important }
.mrlt30 { margin-left: 30px!important }
*, .atWrapper .atBanner .atInner article { margin: 0; padding: 0 }
* { outline: 0!important }
.atWrapper .atBanner .atInner .bx-viewport { height: 525px!important }
.atWrapper .atBanner .atInner .bx-controls-direction { display: none }
.atWrapper .atBanner .atInner .banner_wrapper { float: left; width: 100%; min-width: 865px }
.atWrapper .atBanner .atInner .bx-wrapper { position: relative; margin: 0 auto; padding: 0 }
.atWrapper .atBanner .atInner .bx-wrapper img { max-width: 100% }
.atWrapper .atBanner .atInner .bx-wrapper .bx-controls-auto, .bx-wrapper .bx-pager { position: absolute; bottom: 34px; width: 100%; z-index: 999 }
.atWrapper .atBanner .atInner .bx-wrapper .bx-loading { min-height: 50px; background: url(https://dwo5aya3d1c6n.cloudfront.net/api/spinner.gif) center center no-repeat #fff; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 2000 }
.atWrapper .atBanner .atInner .bx-wrapper .bx-pager { text-align: center; font-size: .85em; font-family: Roboto; font-weight: 700; color: #666 }
.link, .tabs A { font-weight: 300; text-decoration: none }
.atWrapper .atBanner .atInner .bx-wrapper .bx-controls-auto .bx-controls-auto-item, .bx-wrapper .bx-pager .bx-pager-item { display: inline-block }
.atWrapper .atBanner .atInner .bx-wrapper .bx-pager.bx-default-pager a { background: #666; text-indent: -9999px; display: block; width: 10px; height: 10px; margin: 0 5px; outline: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px }
.atWrapper .atBanner .atInner .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:hover { background: #fff }
.atWrapper .atBanner .atInner .bx-wrapper .bx-prev { left: 20px; background: url(https://dwo5aya3d1c6n.cloudfront.net/api/arrow-prev.png?API13022017) no-repeat }
.atWrapper .atBanner .atInner .bx-wrapper .bx-next { right: 20px; background: url(https://dwo5aya3d1c6n.cloudfront.net/api/arrow-next.png?API13022017) no-repeat }
.atWrapper .atBanner .atInner .bx-wrapper .bx-prev:hover { background-position: 0 0 }
.atWrapper .atBanner .atInner .bx-wrapper .bx-controls-direction a { position: absolute; top: 45%; outline: 0; width: 46px; height: 46px; text-indent: -9999px; z-index: 9999 }
.atWrapper .atBanner .atInner .bx-wrapper .bx-controls-direction a.disabled { display: none }
.atWrapper .atBanner .atInner .bx-wrapper .bx-controls-auto { text-align: center }
.atWrapper .atBanner .atInner .bx-wrapper .bx-controls-auto .bx-start { display: block; text-indent: -9999px; width: 10px; height: 11px; outline: 0; margin: 0 3px }
.atWrapper .atBanner .atInner .bx-wrapper .bx-controls-auto .bx-start.active, .atWrapper .atBanner .atInner .bx-wrapper .bx-controls-auto .bx-start:hover { background-position: -86px 0 }
.atWrapper .atBanner .atInner .bx-wrapper .bx-controls-auto .bx-stop { display: block; text-indent: -9999px; width: 9px; height: 11px; outline: 0; margin: 0 3px }
.atWrapper .atBanner .atInner .bx-wrapper .bx-controls-auto .bx-stop.active, .atWrapper .atBanner .atInner .bx-wrapper .bx-controls-auto .bx-stop:hover { background-position: -86px -33px }
.atWrapper .atBanner .atInner .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { text-align: left; width: 80%; position: absolute; z-index: 999 }
.atWrapper .atBanner .atInner .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { right: 0; width: 35px }
.atWrapper .atBanner .atInner .bx-wrapper .bx-caption { position: absolute; bottom: 0; left: 0; background: rgba(80,80,80,.75); width: 100% }
.atWrapper .atBanner .atInner .bx-wrapper .bx-caption span { color: #fff; font-family: Roboto; display: block; font-size: .85em; padding: 10px }
.scheduleDemoWrapper .scheduleDemo { display: table-cell; width: 100%; vertical-align: middle; margin: 0 auto }
.scheduleDemo_inner { max-width: 100%; padding: 0 5% }
.scheduleDemoWrapper .scheduleDemo .inner { width: 100%; margin: 0 }
.scheduleDemoWrapper h2 {width: 100%;text-align: center;color: #000;font-size: 35px;font-family: montserrat_bold!important;margin: 0 0 15px;}
.scheduleDemoWrapper .scheduleDemo .inner p { width: 100%; text-align: center; color: #7a7a7a; font-size: 16px; font-family: Roboto!important; line-height: 24px; margin: 0 0 15px; padding: 0 }
.scheduleDemoWrapper .scheduleDemo .inner .formWrapper { float: left; width: 100%; margin: 30px 0 0 }
.scheduleDemoWrapper .scheduleDemo .inner .formWrapper #query_success_msg { color: #46ae00 }
#query_success_msg, .scheduleDemoWrapper .scheduleDemo .inner .formWrapper #query_error_msg { float: left; font-family: Roboto!important; font-size: 14px; margin: 0 0 10px; width: 100% }
.scheduleDemoWrapper .scheduleDemo .inner .formWrapper .row { float: left; width: 100%; margin: 0 0 15px }
.scheduleDemoWrapper .scheduleDemo .inner .formWrapper .row .col { float: left; width: 48%; margin: 0 3% 0 0 }
.scheduleDemoWrapper .scheduleDemo .inner .formWrapper .row input { width: 96%; padding: 2%; border: 1px solid #ccc; color: #1c1c1c; font-size: 14px; font-family: Roboto!important }
.scheduleDemoWrapper .scheduleDemo .inner .formWrapper .row .err_msg { color: #d55252; float: left; font-family: Roboto!important; font-size: 12px; margin: 10px 0 0 }
.ContactForm_n .btnWraper .submitBtn, .scheduleDemoWrapper .scheduleDemo .inner .formWrapper .btnWraper .submitBtn { font-size: 14px; padding: 13px 35px; font-family: Roboto!important; text-transform: uppercase }
.scheduleDemoWrapper .scheduleDemo .inner .formWrapper .row .col:last-child { margin: 0; float: right }
.scheduleDemoWrapper .scheduleDemo .inner .formWrapper .btnWraper { float: left; width: 100%; margin: 10px 0 0 }
.scheduleDemoWrapper .scheduleDemo .inner .formWrapper .btnWraper .submitBtn { float: right; color: #00a0dc; border-radius: 20px; border: 1px solid #00a0dc; background-color: #f5f5f5 }
.scheduleDemoWrapper .scheduleDemo .inner .formWrapper .btnWraper .submitBtn:hover { color: #fff; border: 1px solid #0591c5; background-color: #00a0dc!important }
.ContactForm_n .btnWraper { float: left; width: 100%; margin: 10px 0 0 }
.ContactForm_n .btnWraper .submitBtn { color: #fff; border-radius: 5px; border: none; background-color: #00988c; box-shadow: none; cursor: pointer }
.ContactForm_n .btnWraper .submitBtn:hover { color: #fff; background-color: #047f75!important; border: none }
.ContactForm_n select { padding: 7px 5px!important }
.write_us_wrapper { padding-top: 0!important }
.algnCent { text-align: center!important }
.colC .title .txtB { padding: 25px 0 10px!important; color: #2aa9e0;}
.ep .subtitle, .ep .title, .ep .tr font span { color: #253e48!important }
.colC .row { width: 100%!important; padding: 0 10%!important }
.ep { width: 80%; padding: 0 10% }
.ep .title { font-size: 22px; font-family: montserrat!important; text-align: center; padding: 50px 20px 20px!important }
.ep .subtitle { font-family: Roboto!important; text-align: center; padding: 10px 20px 61px; font-size: 16px; margin: 0 auto; width: 62%; color: #666!important;}
.ep .tr font span { 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 }
.pricingWrapper .pricingBanner .pricingInner .pricing .msg .button {float: left; width: 80%; text-align: center; font-size: 16px; font-family: Roboto; padding: 10px 0; color: #fff; margin-left: 10%; transition: all 0.3s ease 0s; border-radius: 10px;}
.pricingWrapper .pricingBanner .pricingInner .pricing .msg .pp { background-color: #2aa9e0;}
.pricingWrapper .pricingBanner .pricingInner .pricing .msg .pp:hover { background-color: #2a7be0!important}
.pull-right { float: right!important }
.quotes, .slidetxt { display: none }
.slider.slider-horizontal { height: 50px!important; background-image: url(https://dwo5aya3d1c6n.cloudfront.net/api/pricing-slider-ponter.png?API13022017), url(https://dwo5aya3d1c6n.cloudfront.net/api/pricing-slider-ponter.png?API13022017), url(https://dwo5aya3d1c6n.cloudfront.net/api/pricing-slider-ponter.png?API13022017); background-position: 1% 28px, 50% 28px, 99% 28px; background-repeat: no-repeat, no-repeat, no-repeat }
.TabSlider { float: left; width: 100%; border-top: 1px solid #e8e8e8 }
.tabs UL.horizontal { list-style: none; margin: 0; float: left; width: 100%; background-color: #fff }
.tabs LI { background: #fff; width: 33.2%; margin: 0; padding: 0; float: left; border-right: 1px solid #e8e8e8; display: table }
.tabs LI:last-child { border: none; float: right!important; width: 33.4% }
.tabs A { color: #253e48; font-size: 18px; font-family: Roboto; width: 100%; text-align: center; padding: 25px 0; vertical-align: middle; display: table-cell }
.tabs LI:hover { background: #00988c }
.tabs LI:hover A { color: #fff }
.tabs_rotate .active { background: #00988c!important }
.tabs_rotate .active A { color: #fff!important }
.link { color: #fff; font-size: 14px; letter-spacing: 1px; line-height: 48px; margin-top: 20px; margin-left: 6px }
.link:hover { text-decoration: underline; color: inherit }
.anchorLink { border-bottom: 1px dashed #fff; color: #fff; text-decoration: none }
.anchorLink:hover { text-decoration: none; border-bottom: none; color: inherit }
.screenshot { position: absolute; clip: rect(0 0 0 0) }
.next, .prev { background: #fff!important; color: #a0cac0!important; float: left; margin-right: 10px; margin-bottom: 10px }
.next:hover, .prev:hover { background: #a0cac0!important; color: #fff!important }

@media screen and (-webkit-min-device-pixel-ratio:0) {
.ContactForm_n select { line-height: 30px; height: 36px } }
.ourServicesWrapper { float: left; width: 100%; max-width: 100%; min-height: 800px; display: table; height: auto }
.ourServicesWrapper .ourServicesBanner { display: table-cell; margin: 0 auto; vertical-align: middle; width: 100% }
.ourServicesWrapper .ourServicesBanner .ourServicesInner { width: 96%; margin: 0 auto }
.ourServicesWrapper .ourServicesBanner .ourServicesInner h3 { font-size: 42px; font-family: montserrat_bold_web; color: #21384f; margin: 10px 0 40px; padding: 0 0 30px; text-align: center }
.ourServicesWrapper .ourServicesBanner .ourServicesInner .ourService { float: left; width: 12%; height: 190px; margin: 0 1%; background-color: #fff }
.ourService:nth-child(15), .ourService:nth-child(22), .ourService:nth-child(8) { margin: 0 0 0 1%!important }
.ourServicesWrapper .ourServicesBanner .ourServicesInner .ourService:last-child { margin: 0 }
.ourServicesWrapper .ourServicesBanner .ourServicesInner .ourService figure { margin: 0 0 15px; padding: 0; text-align: center }
.ourServicesWrapper .ourServicesBanner .ourServicesInner .ourService figure img { display: inline }
.ourServicesWrapper .ourServicesBanner .ourServicesInner .ourService h2 { padding: 0 0 23px; color: #21384f; font-size: 13px; font-family: 'montserrat'; text-align: center; font-weight: normal !important; }
.ourServicesWrapper .ourServicesBanner .ourServicesInner .ourService p { color: #838383; font-size: 13px; font-family: Roboto; text-align: center }
.ourServicesWrapper .ourServicesBanner .ourServicesInner .ourService h2:hover { color: #21384f }
.ourServicesWrapper .ourServicesBanner .ourServicesInner .apiBtnWrapper { float: left; width: 100%; text-align: center; margin: 20px 0 50px }
.ourServicesWrapper .ourServicesBanner .ourServicesInner .apiBtnWrapper a { float: left; width: 50%; text-align: center; font-size: 16px; font-family: Roboto; padding: 10px 0; color: #00988c; text-transform: uppercase; background-color: transparent; margin: 20px 25% 0; border: 1px solid #00988c; border-radius: 3px }
.ContactForm_n input, .ContactForm_n select, .ContactForm_n textarea, .address_to_wrapper, .mail_to_wrapper, .sub_abt_contact, .write_us_wrapper h2 { font-family: Roboto!important }
.ourServicesWrapper .ourServicesBanner .ourServicesInner .apiBtnWrapper a:hover { background-color: #049d9d; color: #fff }
.scheduleDemoWrapper {width: 100%;float: left;background: #f5f5f5;border-top: 1px solid #ddd;height: 550px;}
.btn_migrate { position: fixed!important; bottom: 0!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-family: 'montserrat'; font-weight: normal; 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 .2s!important; transition: background .2s, box-shadow .2s!important; border-top-left-radius: 5px!important; border-top-right-radius: 5px!important }
.slider-selection, .slider-track-high, .slider-track-low { -webkit-box-sizing: border-box; -moz-box-sizing: border-box }
.btn_migrate a:hover { background-color: #02847a!important }
.apiConter { float: left; width: 100%; padding: 15px 0 100px; left: 0 }
.apiConter .infoL, .apiConter .infoR { font-family: montserrat; font-size: 45px }
.apiConter .infoL { margin: 0 10px 0 0 }
.apiConter .infoR { margin: 0 0 0 10px }
.apiConter .counterVal {float: left;width: 100%;text-align: center;color: #000;font-family: montserrat;font-size: 50px;}
.api-calls { font-family: montserrat_bold_web; }
.slider { display: inline-block; vertical-align: middle; position: relative }
.slider.slider-horizontal { width: 80%; 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-high, .slider.slider-horizontal .slider-track-low { height: 100%; top: 0; bottom: 0 }
.slider.slider-horizontal .slider-handle, .slider.slider-horizontal .slider-tick { margin-left: -10px; margin-top: -5px }
.slider.slider-horizontal .slider-handle.triangle, .slider.slider-horizontal .slider-tick.triangle { border-width: 0 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 .hide, .slider input { display: none }
.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-high, .slider.slider-vertical .slider-track-low { width: 100%; left: 0; right: 0 }
.slider.slider-vertical .slider-handle, .slider.slider-vertical .slider-tick { margin-left: -5px; margin-top: -10px }
.slider.slider-vertical .slider-handle.triangle, .slider.slider-vertical .slider-tick.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 .tooltip.top { color: #fff; float: left; font-size: 44px; left: 190px!important; position: absolute; text-align: center; top: -100px!important; width: 100%; z-index: 99999; font-family: montserrat!important }
.slider-handle.custom::before, .slider-tick.custom::before { line-height: 20px; font-size: 20px; content: '\2605'; color: #726204 }
.slider-handle, .slider-tick { position: absolute; width: 20px; height: 20px }
.slider .tooltip-inner { white-space: nowrap; }
.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,.1); box-shadow: inset 0 1px 2px rgba(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,.15); box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); 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-high, .slider-track-low { position: absolute; background: 0 0; box-sizing: border-box; border-radius: 4px }
.slider-handle { 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: 0 solid transparent }
.slider-handle.round { border-radius: 50% }
.slider-handle.custom, .slider-handle.triangle { background: 0 0 }
.slider-tick { 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; -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; filter: none; opacity: .8; border: 0 solid transparent }
.slider-tick.round { border-radius: 50% }
.slider-tick.custom, .slider-tick.triangle { background: 0 0 }
.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 }
.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%, 100%, 20%, 53%, 80% {
-webkit-transition-timing-function:cubic-bezier(.215, .61, .355, 1);
transition-timing-function:cubic-bezier(.215, .61, .355, 1);
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0) }
40%, 43% {
-webkit-transition-timing-function:cubic-bezier(.755, .050, .855, .060);
transition-timing-function:cubic-bezier(.755, .050, .855, .060);
-webkit-transform:translate3d(0, -30px, 0);
transform:translate3d(0, -30px, 0) }
70% {
-webkit-transition-timing-function:cubic-bezier(.755, .050, .855, .060);
transition-timing-function:cubic-bezier(.755, .050, .855, .060);
-webkit-transform:translate3d(0, -15px, 0);
transform:translate3d(0, -15px, 0) }
90% {
-webkit-transform:translate3d(0, -4px, 0);
transform:translate3d(0, -4px, 0) } }
@keyframes bounce {
0%, 100%, 20%, 53%, 80% {
-webkit-transition-timing-function:cubic-bezier(.215, .61, .355, 1);
transition-timing-function:cubic-bezier(.215, .61, .355, 1);
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0) }
40%, 43% {
-webkit-transition-timing-function:cubic-bezier(.755, .050, .855, .060);
transition-timing-function:cubic-bezier(.755, .050, .855, .060);
-webkit-transform:translate3d(0, -30px, 0);
transform:translate3d(0, -30px, 0) }
70% {
-webkit-transition-timing-function:cubic-bezier(.755, .050, .855, .060);
transition-timing-function:cubic-bezier(.755, .050, .855, .060);
-webkit-transform:translate3d(0, -15px, 0);
transform:translate3d(0, -15px, 0) }
90% {
-webkit-transform:translate3d(0, -4px, 0);
transform:translate3d(0, -4px, 0) } }
.bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom }
@-webkit-keyframes flash {
0%, 100%, 50% {
opacity:1 }
25%, 75% {
opacity:0 } }
@keyframes flash {
0%, 100%, 50% {
opacity:1 }
25%, 75% {
opacity:0 } }
.flash { -webkit-animation-name: flash; animation-name: flash }
@-webkit-keyframes pulse {
0%, 100% {
-webkit-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1) }
50% {
-webkit-transform:scale3d(1.05, 1.05, 1.05);
transform:scale3d(1.05, 1.05, 1.05) } }
@keyframes pulse {
0%, 100% {
-webkit-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1) }
50% {
-webkit-transform:scale3d(1.05, 1.05, 1.05);
transform:scale3d(1.05, 1.05, 1.05) } }
.pulse { -webkit-animation-name: pulse; animation-name: pulse }
@-webkit-keyframes rubberBand {
0%, 100% {
-webkit-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1) }
30% {
-webkit-transform:scale3d(1.25, .75, 1);
transform:scale3d(1.25, .75, 1) }
40% {
-webkit-transform:scale3d(.75, 1.25, 1);
transform:scale3d(.75, 1.25, 1) }
50% {
-webkit-transform:scale3d(1.15, .85, 1);
transform:scale3d(1.15, .85, 1) }
65% {
-webkit-transform:scale3d(.95, 1.05, 1);
transform:scale3d(.95, 1.05, 1) }
75% {
-webkit-transform:scale3d(1.05, .95, 1);
transform:scale3d(1.05, .95, 1) } }
@keyframes rubberBand {
0%, 100% {
-webkit-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1) }
30% {
-webkit-transform:scale3d(1.25, .75, 1);
transform:scale3d(1.25, .75, 1) }
40% {
-webkit-transform:scale3d(.75, 1.25, 1);
transform:scale3d(.75, 1.25, 1) }
50% {
-webkit-transform:scale3d(1.15, .85, 1);
transform:scale3d(1.15, .85, 1) }
65% {
-webkit-transform:scale3d(.95, 1.05, 1);
transform:scale3d(.95, 1.05, 1) }
75% {
-webkit-transform:scale3d(1.05, .95, 1);
transform:scale3d(1.05, .95, 1) } }
.rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand }
@-webkit-keyframes shake {
0%, 100% {
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0) }
10%, 30%, 50%, 70%, 90% {
-webkit-transform:translate3d(-10px, 0, 0);
transform:translate3d(-10px, 0, 0) }
20%, 40%, 60%, 80% {
-webkit-transform:translate3d(10px, 0, 0);
transform:translate3d(10px, 0, 0) } }
@keyframes shake {
0%, 100% {
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0) }
10%, 30%, 50%, 70%, 90% {
-webkit-transform:translate3d(-10px, 0, 0);
transform:translate3d(-10px, 0, 0) }
20%, 40%, 60%, 80% {
-webkit-transform:translate3d(10px, 0, 0);
transform:translate3d(10px, 0, 0) } }
.shake { -webkit-animation-name: shake; animation-name: shake }
@-webkit-keyframes swing {
20% {
-webkit-transform:rotate3d(0, 0, 1, 15deg);
transform:rotate3d(0, 0, 1, 15deg) }
40% {
-webkit-transform:rotate3d(0, 0, 1, -10deg);
transform:rotate3d(0, 0, 1, -10deg) }
60% {
-webkit-transform:rotate3d(0, 0, 1, 5deg);
transform:rotate3d(0, 0, 1, 5deg) }
80% {
-webkit-transform:rotate3d(0, 0, 1, -5deg);
transform:rotate3d(0, 0, 1, -5deg) }
100% {
-webkit-transform:rotate3d(0, 0, 1, 0deg);
transform:rotate3d(0, 0, 1, 0deg) } }
@keyframes swing {
20% {
-webkit-transform:rotate3d(0, 0, 1, 15deg);
transform:rotate3d(0, 0, 1, 15deg) }
40% {
-webkit-transform:rotate3d(0, 0, 1, -10deg);
transform:rotate3d(0, 0, 1, -10deg) }
60% {
-webkit-transform:rotate3d(0, 0, 1, 5deg);
transform:rotate3d(0, 0, 1, 5deg) }
80% {
-webkit-transform:rotate3d(0, 0, 1, -5deg);
transform:rotate3d(0, 0, 1, -5deg) }
100% {
-webkit-transform:rotate3d(0, 0, 1, 0deg);
transform:rotate3d(0, 0, 1, 0deg) } }
.swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing }
@-webkit-keyframes tada {
0%, 100% {
-webkit-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1) }
10%, 20% {
-webkit-transform:scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
transform:scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg) }
30%, 50%, 70%, 90% {
-webkit-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg) }
40%, 60%, 80% {
-webkit-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg) } }
@keyframes tada {
0%, 100% {
-webkit-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1) }
10%, 20% {
-webkit-transform:scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
transform:scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg) }
30%, 50%, 70%, 90% {
-webkit-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg) }
40%, 60%, 80% {
-webkit-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg) } }
.tada { -webkit-animation-name: tada; animation-name: tada }
@-webkit-keyframes wobble {
0%, 100% {
-webkit-transform:none;
transform:none }
15% {
-webkit-transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg) }
30% {
-webkit-transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg) }
45% {
-webkit-transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg) }
60% {
-webkit-transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg) }
75% {
-webkit-transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg) } }
@keyframes wobble {
0%, 100% {
-webkit-transform:none;
transform:none }
15% {
-webkit-transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg) }
30% {
-webkit-transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg) }
45% {
-webkit-transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg) }
60% {
-webkit-transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg) }
75% {
-webkit-transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg) } }
.wobble { -webkit-animation-name: wobble; animation-name: wobble }
@-webkit-keyframes bounceIn {
0%, 100%, 20%, 40%, 60%, 80% {
-webkit-transition-timing-function:cubic-bezier(.215, .61, .355, 1);
transition-timing-function:cubic-bezier(.215, .61, .355, 1) }
0% {
opacity:0;
-webkit-transform:scale3d(.3, .3, .3);
transform:scale3d(.3, .3, .3) }
20% {
-webkit-transform:scale3d(1.1, 1.1, 1.1);
transform:scale3d(1.1, 1.1, 1.1) }
40% {
-webkit-transform:scale3d(.9, .9, .9);
transform:scale3d(.9, .9, .9) }
60% {
opacity:1;
-webkit-transform:scale3d(1.03, 1.03, 1.03);
transform:scale3d(1.03, 1.03, 1.03) }
80% {
-webkit-transform:scale3d(.97, .97, .97);
transform:scale3d(.97, .97, .97) }
100% {
opacity:1;
-webkit-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1) } }
@keyframes bounceIn {
0%, 100%, 20%, 40%, 60%, 80% {
-webkit-transition-timing-function:cubic-bezier(.215, .61, .355, 1);
transition-timing-function:cubic-bezier(.215, .61, .355, 1) }
0% {
opacity:0;
-webkit-transform:scale3d(.3, .3, .3);
transform:scale3d(.3, .3, .3) }
20% {
-webkit-transform:scale3d(1.1, 1.1, 1.1);
transform:scale3d(1.1, 1.1, 1.1) }
40% {
-webkit-transform:scale3d(.9, .9, .9);
transform:scale3d(.9, .9, .9) }
60% {
opacity:1;
-webkit-transform:scale3d(1.03, 1.03, 1.03);
transform:scale3d(1.03, 1.03, 1.03) }
80% {
-webkit-transform:scale3d(.97, .97, .97);
transform:scale3d(.97, .97, .97) }
100% {
opacity:1;
-webkit-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1) } }
.bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: .75s; animation-duration: .75s }
.bounceOut, .flipOutX { -webkit-animation-duration: .75s }
@-webkit-keyframes bounceInDown {
0%, 100%, 60%, 75%, 90% {
-webkit-transition-timing-function:cubic-bezier(.215, .61, .355, 1);
transition-timing-function:cubic-bezier(.215, .61, .355, 1) }
0% {
opacity:0;
-webkit-transform:translate3d(0, -3000px, 0);
transform:translate3d(0, -3000px, 0) }
60% {
opacity:1;
-webkit-transform:translate3d(0, 25px, 0);
transform:translate3d(0, 25px, 0) }
75% {
-webkit-transform:translate3d(0, -10px, 0);
transform:translate3d(0, -10px, 0) }
90% {
-webkit-transform:translate3d(0, 5px, 0);
transform:translate3d(0, 5px, 0) }
100% {
-webkit-transform:none;
transform:none } }
@keyframes bounceInDown {
0%, 100%, 60%, 75%, 90% {
-webkit-transition-timing-function:cubic-bezier(.215, .61, .355, 1);
transition-timing-function:cubic-bezier(.215, .61, .355, 1) }
0% {
opacity:0;
-webkit-transform:translate3d(0, -3000px, 0);
transform:translate3d(0, -3000px, 0) }
60% {
opacity:1;
-webkit-transform:translate3d(0, 25px, 0);
transform:translate3d(0, 25px, 0) }
75% {
-webkit-transform:translate3d(0, -10px, 0);
transform:translate3d(0, -10px, 0) }
90% {
-webkit-transform:translate3d(0, 5px, 0);
transform:translate3d(0, 5px, 0) }
100% {
-webkit-transform:none;
transform:none } }
.bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown }
@-webkit-keyframes bounceInLeft {
0%, 100%, 60%, 75%, 90% {
-webkit-transition-timing-function:cubic-bezier(.215, .61, .355, 1);
transition-timing-function:cubic-bezier(.215, .61, .355, 1) }
0% {
opacity:0;
-webkit-transform:translate3d(-3000px, 0, 0);
transform:translate3d(-3000px, 0, 0) }
60% {
opacity:1;
-webkit-transform:translate3d(25px, 0, 0);
transform:translate3d(25px, 0, 0) }
75% {
-webkit-transform:translate3d(-10px, 0, 0);
transform:translate3d(-10px, 0, 0) }
90% {
-webkit-transform:translate3d(5px, 0, 0);
transform:translate3d(5px, 0, 0) }
100% {
-webkit-transform:none;
transform:none } }
@keyframes bounceInLeft {
0%, 100%, 60%, 75%, 90% {
-webkit-transition-timing-function:cubic-bezier(.215, .61, .355, 1);
transition-timing-function:cubic-bezier(.215, .61, .355, 1) }
0% {
opacity:0;
-webkit-transform:translate3d(-3000px, 0, 0);
transform:translate3d(-3000px, 0, 0) }
60% {
opacity:1;
-webkit-transform:translate3d(25px, 0, 0);
transform:translate3d(25px, 0, 0) }
75% {
-webkit-transform:translate3d(-10px, 0, 0);
transform:translate3d(-10px, 0, 0) }
90% {
-webkit-transform:translate3d(5px, 0, 0);
transform:translate3d(5px, 0, 0) }
100% {
-webkit-transform:none;
transform:none } }
.bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft }
@-webkit-keyframes bounceInRight {
0%, 100%, 60%, 75%, 90% {
-webkit-transition-timing-function:cubic-bezier(.215, .61, .355, 1);
transition-timing-function:cubic-bezier(.215, .61, .355, 1) }
0% {
opacity:0;
-webkit-transform:translate3d(3000px, 0, 0);
transform:translate3d(3000px, 0, 0) }
60% {
opacity:1;
-webkit-transform:translate3d(-25px, 0, 0);
transform:translate3d(-25px, 0, 0) }
75% {
-webkit-transform:translate3d(10px, 0, 0);
transform:translate3d(10px, 0, 0) }
90% {
-webkit-transform:translate3d(-5px, 0, 0);
transform:translate3d(-5px, 0, 0) }
100% {
-webkit-transform:none;
transform:none } }
@keyframes bounceInRight {
0%, 100%, 60%, 75%, 90% {
-webkit-transition-timing-function:cubic-bezier(.215, .61, .355, 1);
transition-timing-function:cubic-bezier(.215, .61, .355, 1) }
0% {
opacity:0;
-webkit-transform:translate3d(3000px, 0, 0);
transform:translate3d(3000px, 0, 0) }
60% {
opacity:1;
-webkit-transform:translate3d(-25px, 0, 0);
transform:translate3d(-25px, 0, 0) }
75% {
-webkit-transform:translate3d(10px, 0, 0);
transform:translate3d(10px, 0, 0) }
90% {
-webkit-transform:translate3d(-5px, 0, 0);
transform:translate3d(-5px, 0, 0) }
100% {
-webkit-transform:none;
transform:none } }
.bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight }
@-webkit-keyframes bounceInUp {
0%, 100%, 60%, 75%, 90% {
-webkit-transition-timing-function:cubic-bezier(.215, .61, .355, 1);
transition-timing-function:cubic-bezier(.215, .61, .355, 1) }
0% {
opacity:0;
-webkit-transform:translate3d(0, 3000px, 0);
transform:translate3d(0, 3000px, 0) }
60% {
opacity:1;
-webkit-transform:translate3d(0, -20px, 0);
transform:translate3d(0, -20px, 0) }
75% {
-webkit-transform:translate3d(0, 10px, 0);
transform:translate3d(0, 10px, 0) }
90% {
-webkit-transform:translate3d(0, -5px, 0);
transform:translate3d(0, -5px, 0) }
100% {
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0) } }
@keyframes bounceInUp {
0%, 100%, 60%, 75%, 90% {
-webkit-transition-timing-function:cubic-bezier(.215, .61, .355, 1);
transition-timing-function:cubic-bezier(.215, .61, .355, 1) }
0% {
opacity:0;
-webkit-transform:translate3d(0, 3000px, 0);
transform:translate3d(0, 3000px, 0) }
60% {
opacity:1;
-webkit-transform:translate3d(0, -20px, 0);
transform:translate3d(0, -20px, 0) }
75% {
-webkit-transform:translate3d(0, 10px, 0);
transform:translate3d(0, 10px, 0) }
90% {
-webkit-transform:translate3d(0, -5px, 0);
transform:translate3d(0, -5px, 0) }
100% {
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0) } }
.bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp }
@-webkit-keyframes bounceOut {
20% {
-webkit-transform:scale3d(.9, .9, .9);
transform:scale3d(.9, .9, .9) }
50%, 55% {
opacity:1;
-webkit-transform:scale3d(1.1, 1.1, 1.1);
transform:scale3d(1.1, 1.1, 1.1) }
100% {
opacity:0;
-webkit-transform:scale3d(.3, .3, .3);
transform:scale3d(.3, .3, .3) } }
@keyframes bounceOut {
20% {
-webkit-transform:scale3d(.9, .9, .9);
transform:scale3d(.9, .9, .9) }
50%, 55% {
opacity:1;
-webkit-transform:scale3d(1.1, 1.1, 1.1);
transform:scale3d(1.1, 1.1, 1.1) }
100% {
opacity:0;
-webkit-transform:scale3d(.3, .3, .3);
transform:scale3d(.3, .3, .3) } }
.bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; 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 }
.flipInY, .flipOutX { -webkit-backface-visibility: visible!important }
@-webkit-keyframes flipInY {
0% {
-webkit-transform:perspective(400px) rotate3d(0, 1, 0, 90deg);
transform:perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-transition-timing-function:ease-in;
transition-timing-function:ease-in;
opacity:0 }
40% {
-webkit-transform:perspective(400px) rotate3d(0, 1, 0, -20deg);
transform:perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-transition-timing-function:ease-in;
transition-timing-function:ease-in }
60% {
-webkit-transform:perspective(400px) rotate3d(0, 1, 0, 10deg);
transform:perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity:1 }
80% {
-webkit-transform:perspective(400px) rotate3d(0, 1, 0, -5deg);
transform:perspective(400px) rotate3d(0, 1, 0, -5deg) }
100% {
-webkit-transform:perspective(400px);
transform:perspective(400px) } }
@keyframes flipInY {
0% {
-webkit-transform:perspective(400px) rotate3d(0, 1, 0, 90deg);
transform:perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-transition-timing-function:ease-in;
transition-timing-function:ease-in;
opacity:0 }
40% {
-webkit-transform:perspective(400px) rotate3d(0, 1, 0, -20deg);
transform:perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-transition-timing-function:ease-in;
transition-timing-function:ease-in }
60% {
-webkit-transform:perspective(400px) rotate3d(0, 1, 0, 10deg);
transform:perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity:1 }
80% {
-webkit-transform:perspective(400px) rotate3d(0, 1, 0, -5deg);
transform:perspective(400px) rotate3d(0, 1, 0, -5deg) }
100% {
-webkit-transform:perspective(400px);
transform:perspective(400px) } }
.flipInY { 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; animation-duration: .75s; 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 }
@-webkit-keyframes rollIn {
0% {
opacity:0;
-webkit-transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg) }
100% {
opacity:1;
-webkit-transform:none;
transform:none } }
@keyframes rollIn {
0% {
opacity:0;
-webkit-transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg) }
100% {
opacity:1;
-webkit-transform:none;
transform:none } }
.rollIn { -webkit-animation-name: rollIn; animation-name: rollIn }
@-webkit-keyframes rollOut {
0% {
opacity:1 }
100% {
opacity:0;
-webkit-transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg) } }
@keyframes rollOut {
0% {
opacity:1 }
100% {
opacity:0;
-webkit-transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg) } }
.rollOut { -webkit-animation-name: rollOut; animation-name: rollOut }
@-webkit-keyframes zoomIn {
0% {
opacity:0;
-webkit-transform:scale3d(.3, .3, .3);
transform:scale3d(.3, .3, .3) }
50% {
opacity:1 } }
@keyframes zoomIn {
0% {
opacity:0;
-webkit-transform:scale3d(.3, .3, .3);
transform:scale3d(.3, .3, .3) }
50% {
opacity:1 } }
.zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn }
@-webkit-keyframes zoomInDown {
0% {
opacity:0;
-webkit-transform:scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
transform:scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function:cubic-bezier(.55, .055, .675, .19);
animation-timing-function:cubic-bezier(.55, .055, .675, .19) }
60% {
opacity:1;
-webkit-transform:scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform:scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function:cubic-bezier(.175, .885, .32, 1);
animation-timing-function:cubic-bezier(.175, .885, .32, 1) } }
@keyframes zoomInDown {
0% {
opacity:0;
-webkit-transform:scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
transform:scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function:cubic-bezier(.55, .055, .675, .19);
animation-timing-function:cubic-bezier(.55, .055, .675, .19) }
60% {
opacity:1;
-webkit-transform:scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform:scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function:cubic-bezier(.175, .885, .32, 1);
animation-timing-function:cubic-bezier(.175, .885, .32, 1) } }
.zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown }
@-webkit-keyframes zoomInLeft {
0% {
opacity:0;
-webkit-transform:scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
transform:scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function:cubic-bezier(.55, .055, .675, .19);
animation-timing-function:cubic-bezier(.55, .055, .675, .19) }
60% {
opacity:1;
-webkit-transform:scale3d(.475, .475, .475) translate3d(10px, 0, 0);
transform:scale3d(.475, .475, .475) translate3d(10px, 0, 0);
-webkit-animation-timing-function:cubic-bezier(.175, .885, .32, 1);
animation-timing-function:cubic-bezier(.175, .885, .32, 1) } }
@keyframes zoomInLeft {
0% {
opacity:0;
-webkit-transform:scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
transform:scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function:cubic-bezier(.55, .055, .675, .19);
animation-timing-function:cubic-bezier(.55, .055, .675, .19) }
60% {
opacity:1;
-webkit-transform:scale3d(.475, .475, .475) translate3d(10px, 0, 0);
transform:scale3d(.475, .475, .475) translate3d(10px, 0, 0);
-webkit-animation-timing-function:cubic-bezier(.175, .885, .32, 1);
animation-timing-function:cubic-bezier(.175, .885, .32, 1) } }
.zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft }
@-webkit-keyframes zoomInRight {
0% {
opacity:0;
-webkit-transform:scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
transform:scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function:cubic-bezier(.55, .055, .675, .19);
animation-timing-function:cubic-bezier(.55, .055, .675, .19) }
60% {
opacity:1;
-webkit-transform:scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
transform:scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function:cubic-bezier(.175, .885, .32, 1);
animation-timing-function:cubic-bezier(.175, .885, .32, 1) } }
@keyframes zoomInRight {
0% {
opacity:0;
-webkit-transform:scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
transform:scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function:cubic-bezier(.55, .055, .675, .19);
animation-timing-function:cubic-bezier(.55, .055, .675, .19) }
60% {
opacity:1;
-webkit-transform:scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
transform:scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function:cubic-bezier(.175, .885, .32, 1);
animation-timing-function:cubic-bezier(.175, .885, .32, 1) } }
.zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight }
@-webkit-keyframes zoomInUp {
0% {
opacity:0;
-webkit-transform:scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
transform:scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function:cubic-bezier(.55, .055, .675, .19);
animation-timing-function:cubic-bezier(.55, .055, .675, .19) }
60% {
opacity:1;
-webkit-transform:scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform:scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function:cubic-bezier(.175, .885, .32, 1);
animation-timing-function:cubic-bezier(.175, .885, .32, 1) } }
@keyframes zoomInUp {
0% {
opacity:0;
-webkit-transform:scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
transform:scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function:cubic-bezier(.55, .055, .675, .19);
animation-timing-function:cubic-bezier(.55, .055, .675, .19) }
60% {
opacity:1;
-webkit-transform:scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform:scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function:cubic-bezier(.175, .885, .32, 1);
animation-timing-function:cubic-bezier(.175, .885, .32, 1) } }
.zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp }
@-webkit-keyframes zoomOut {
0% {
opacity:1 }
50% {
opacity:0;
-webkit-transform:scale3d(.3, .3, .3);
transform:scale3d(.3, .3, .3) }
100% {
opacity:0 } }
@keyframes zoomOut {
0% {
opacity:1 }
50% {
opacity:0;
-webkit-transform:scale3d(.3, .3, .3);
transform:scale3d(.3, .3, .3) }
100% {
opacity:0 } }
.zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut }
@-webkit-keyframes zoomOutDown {
40% {
opacity:1;
-webkit-transform:scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform:scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function:cubic-bezier(.55, .055, .675, .19);
animation-timing-function:cubic-bezier(.55, .055, .675, .19) }
100% {
opacity:0;
-webkit-transform:scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
transform:scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
-webkit-transform-origin:center bottom;
transform-origin:center bottom;
-webkit-animation-timing-function:cubic-bezier(.175, .885, .32, 1);
animation-timing-function:cubic-bezier(.175, .885, .32, 1) } }
@keyframes zoomOutDown {
40% {
opacity:1;
-webkit-transform:scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform:scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function:cubic-bezier(.55, .055, .675, .19);
animation-timing-function:cubic-bezier(.55, .055, .675, .19) }
100% {
opacity:0;
-webkit-transform:scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
transform:scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
-webkit-transform-origin:center bottom;
transform-origin:center bottom;
-webkit-animation-timing-function:cubic-bezier(.175, .885, .32, 1);
animation-timing-function:cubic-bezier(.175, .885, .32, 1) } }
.zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown }
@-webkit-keyframes zoomOutLeft {
40% {
opacity:1;
-webkit-transform:scale3d(.475, .475, .475) translate3d(42px, 0, 0);
transform:scale3d(.475, .475, .475) translate3d(42px, 0, 0) }
100% {
opacity:0;
-webkit-transform:scale(.1) translate3d(-2000px, 0, 0);
transform:scale(.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin:left center;
transform-origin:left center } }
@keyframes zoomOutLeft {
40% {
opacity:1;
-webkit-transform:scale3d(.475, .475, .475) translate3d(42px, 0, 0);
transform:scale3d(.475, .475, .475) translate3d(42px, 0, 0) }
100% {
opacity:0;
-webkit-transform:scale(.1) translate3d(-2000px, 0, 0);
transform:scale(.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin:left center;
transform-origin:left center } }
.zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft }
@-webkit-keyframes zoomOutRight {
40% {
opacity:1;
-webkit-transform:scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
transform:scale3d(.475, .475, .475) translate3d(-42px, 0, 0) }
100% {
opacity:0;
-webkit-transform:scale(.1) translate3d(2000px, 0, 0);
transform:scale(.1) translate3d(2000px, 0, 0);
-webkit-transform-origin:right center;
transform-origin:right center } }
@keyframes zoomOutRight {
40% {
opacity:1;
-webkit-transform:scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
transform:scale3d(.475, .475, .475) translate3d(-42px, 0, 0) }
100% {
opacity:0;
-webkit-transform:scale(.1) translate3d(2000px, 0, 0);
transform:scale(.1) translate3d(2000px, 0, 0);
-webkit-transform-origin:right center;
transform-origin:right center } }
.zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight }
@-webkit-keyframes zoomOutUp {
40% {
opacity:1;
-webkit-transform:scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform:scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function:cubic-bezier(.55, .055, .675, .19);
animation-timing-function:cubic-bezier(.55, .055, .675, .19) }
100% {
opacity:0;
-webkit-transform:scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
transform:scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
-webkit-transform-origin:center bottom;
transform-origin:center bottom;
-webkit-animation-timing-function:cubic-bezier(.175, .885, .32, 1);
animation-timing-function:cubic-bezier(.175, .885, .32, 1) } }
@keyframes zoomOutUp {
40% {
opacity:1;
-webkit-transform:scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform:scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function:cubic-bezier(.55, .055, .675, .19);
animation-timing-function:cubic-bezier(.55, .055, .675, .19) }
100% {
opacity:0;
-webkit-transform:scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
transform:scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
-webkit-transform-origin:center bottom;
transform-origin:center bottom;
-webkit-animation-timing-function:cubic-bezier(.175, .885, .32, 1);
animation-timing-function:cubic-bezier(.175, .885, .32, 1) } }
.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 }
.scheduleDemoWrapper_container { width: 100%; float: left; background: url(../images/mad_bg.png?API13022017) right bottom no-repeat; height: 544px!important }
.ShepHertz_body_inner { max-width: 1024px; margin: 0 auto }
.ShepHertz_body { width: 98%; float: left; padding: 0 1%; margin: 50px 0 0 }
.address_to_wrapper h4, .contact_h_wrapper h1 { margin: 0; font-family: Roboto }
.contactBG { background: #E5E5E5!important }
.address_to_wrapper, .mail_to_wrapper, .write_us_wrapper { background: url(../images/support_b_bdr.jpg?API13022017) left bottom repeat-x }
.contact_page_inner_w { padding: 0 12px; width: 1000px; float: left }
.contact_page_inner_w_inner { float: left; width: 960px; padding: 0 15px 0 25px }
.contact_h_wrapper { padding-bottom: 20px; width: 100%; float: left }
.contact_h_wrapper h1 { padding: 0; width: 100%; color: #464646; font-weight: 700; font-size: 34px }
.sub_abt_contact {color: #000;padding-bottom: 35px;width: 100%;font-size: 16px;text-align: center;line-height: 26px;letter-spacing: 0;font-family: 'montserrat_light'!important;}
.mail_to_wrapper { width: 100%; float: left; padding-bottom: 35px; color: #4f4f4f; font-size: 15px; line-height: 24px }
.mail_to_wrapper a, .mail_to_wrapper a:active, .mail_to_wrapper a:hover, .mail_to_wrapper a:link, .mail_to_wrapper a:visited { color: #3eb3e5; text-decoration: none }
.mail_contact_support { width: 40%; float: left; text-align: left; line-height: 26px }
.mail_to_wrapper a:hover { color: red }
.mail_contact_sales { width: 55%; float: right; text-align: center }
.address_to_wrapper { width: 100%; padding: 30px 0; font-size: 15px!important; color: #666; line-height: 22px }
.address_to_wrapper .us_contact_w { float: left; width: 49%; padding-left: 1% }
.address_to_wrapper .india_contact_w { float: right; width: 44% }
.address_to_wrapper h4 { width: 100%; color: #007db3; font-size: 19px; font-weight: 400; padding: 0 0 20px }
.address_label { width: 25%; float: left; text-align: left; color: #555 }
.address_to_content { width: 60%; float: left; text-align: left }
.ofc_ph_wr { width: 100%; float: left; margin-top: 10px }
.write_us_wrapper { width: 100%; float: left; padding: 25px 1% }
.write_us_wrapper h2 { padding: 0; margin: 0 0 20px; color: #4f4f4f; font-size: 20px; width: 100% }
.ContactForm_n input, .ContactForm_n select { background-color: #fafafa; border: 1px solid #c3c3c3; margin-bottom: 12px }
.ContactForm_n input, .ContactForm_n select, .ContactForm_n textarea { color: #797979; font-size: 14px; box-shadow: 1px 1px 1px #ddd inset }
.form_wrapper_inner { width: 100%; float: left }
.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 { border-radius: 5px; padding: 8px 0 8px 5px; width: 450px; float: left }
.ContactForm_n select { border-radius: 5px; -moz-border-radius: 2px; -webkit-border-radius: 5px; width: 350px; float: left }
.datebox, .timebox { width: 150px!important }
.datebox { margin-right: 10px; padding-bottom: 8px }
.timebox { margin-right: 11px; margin-left: 6px }
.timezonebox { width: 130px!important }
.ContactForm_n textarea { background: #fafafa; border: 1px solid #c3c3c3; border-radius: 5px; display: block; margin: 1px 0 12px; padding: 5px; width: 555px; height: 140px; float: left }
.ContactForm_n input.sub_button_n { height: 30px }
.ContactForm_n .cpt_wrapper { width: 100%; float: left }
.ContactForm_n .cpt_error { width: 100% }
.ContactForm_n .cpt_wrapper .code_form_nvr { float: left; background: #fefefe; border-radius: 5px; padding: 1px 8px }
.ContactForm_n .cpt_wrapper .code_form_nvrmad { float: left; border-radius: 5px; padding: 1px 8px; width: 48%; position: relative }
.ContactForm_n .cpt_wrapper .code_form_nvr a { float: left; margin-left: 10px; margin-top: 10px; outline: 0; border: 0 }
.ContactForm_n .cpt_wrapper .code_form_nvr>img, .captcha_code_in { float: left }
.ContactForm_n .captcha_code_in input.captchaInput { width: 350px!important }
.ContactForm_n .captcha_code_in input.captchaInputmad { width: 150px!important }
.ContactForm_n .sub_con_new_btn { width: 100%; float: left }
.ContactForm_n .sub_con_new_btn input { background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, #5cb6fb), color-stop(100%, #236a9e)); background: -webkit-linear-gradient(#5cb6fb, #236a9e); background: -moz-linear-gradient(#5cb6fb, #236a9e); background: -o-linear-gradient(#5cb6fb, #236a9e); background: linear-gradient(#5cb6fb, #236a9e); color: #fff; font-size: 22px; font-family: Roboto; width: 179px; height: 56px; display: block; float: right; margin: 0; cursor: pointer; border-radius: 8px; border: none }
.ContactForm_n .sub_con_new_btn input:hover { color: #fff; background: #3091d8 }
.ContactForm_n .sub_con_new_btnma input { background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, #5cb6fb), color-stop(100%, #236a9e)); background: -webkit-linear-gradient(#5cb6fb, #236a9e); background: -moz-linear-gradient(#5cb6fb, #236a9e); background: -o-linear-gradient(#5cb6fb, #236a9e); background: linear-gradient(#5cb6fb, #236a9e); color: #fff; font-size: 18px; font-family: Roboto; width: 150px; height: 40px; display: block; margin: 15px 0 0; cursor: pointer; border-radius: 8px; border: none }
.ContactForm_n .sub_con_new_btnma input:hover { color: #fff; background: #3091d8 }
.contact_inq_f_wrapper { width: 100%; float: left; padding: 40px 0 80px; position: relative }
.contact_ofc_location { position: absolute; width: 126px; height: 109px; top: 116px; left: 49% }
.contact_inq_f_wrapper .inq_h { float: left; width: 160px; font-family: Roboto; font-size: 20px; color: #4f4f4f; margin-top: 6px }
.contact_inq_f_wrapper .inq_mail { float: left; width: 190px; color: #2a2a2a; font-family: Roboto; font-size: 16px; text-align: center; padding-left: 20px; line-height: 23px }
.inq_mailM { float: left; width: auto!important; padding: 6px 6px 0 0!important }
.contact_map_inner, .contact_map_wrapper { width: 100%; float: left }
.contact_inq_f_wrapper .inq_mail a, .contact_inq_f_wrapper .inq_mail a:active, .contact_inq_f_wrapper .inq_mail a:hover, .contact_inq_f_wrapper .inq_mail a:visited { color: #3eb3e5; text-decoration: none }
.contact_inq_f_wrapper .inq_social { float: right; margin-top: 12px }
.inq_social figure { float: left; margin-left: 8px }
.contact_map_wrapper { background: #cfcfcf }
.contact_map_container { max-width: 1024px; margin: 0 auto }
.contact_map_inner>iframe { width: 100%; height: 450px }
.ContactForm_n .error, .ContactForm_n .success_msg { font-size: 13px; font-weight: 400; height: 16px; margin: 0 0 12px 3px; padding-bottom: 0; font-family: Roboto }
.ContactForm_n .error { color: #d55252; float: left!important }
.ContactForm_n .success_msg { color: #46ae00 }
.daterangepicker .calendar td, .daterangepicker .calendar th { min-width: 32px; font-family: roboto; text-align: center; white-space: nowrap }
.captcha_msg { float: left; color: red }
.captchaInput { width: 147px!important; margin-left: 10px }

@media only screen and (min-width:700px) and (max-width:1000px) {
.form_wrapper_inner .f_part1 { width: 45% }
.ContactForm_n input, .ContactForm_n textarea { width: 94% }
.form_wrapper_inner .f_part2 { width: 53% }
.ContactForm_n .captcha_code_in input.captchaInput { width: 90%!important }
.ContactForm_n .cpt_wrapper .code_form_nvr { padding: 0 }
.captcha_code_in { width: 50% }
.mail_contact_support { width: 45% }
.address_to_content { width: 100% }
.contact_inq_f_wrapper .inq_social { display: none }
.contact_inq_f_wrapper .inq_mail { width: 25%; padding-left: 2% }
.contact_inq_f_wrapper .inq_h { width: 19%; font-size: 19px }
.sub_con_new_btn { width: 95% }
.ContactForm_n .cpt_wrapper .code_form_nvr { width: 170px } }

@media only screen and (min-width:480px) and (max-width:699px) {
.write_us_wrapper h2 { text-align: center }
.form_wrapper_inner .f_part1, .form_wrapper_inner .f_part2 { width: 98%; float: none; margin: 0 auto }
.ContactForm_n input, .ContactForm_n textarea { width: 96% }
.form-group { width: 100% }
.datebox { width: 96%!important }
.ContactForm_n select { width: 47%!important }
.address_to_content { width: 100% }
.ContactForm_n .captcha_code_in input.captchaInput { width: 90%!important }
.ContactForm_n .sub_con_new_btn input { float: left }
.captcha_code_in { width: 50% }
.contact_inq_f_wrapper .inq_social, .contact_ofc_location { display: none }
.contact_inq_f_wrapper .inq_mail { width: 100%; padding: 0 0 20px }
.contact_inq_f_wrapper .inq_h { width: 100%; padding: 0 0 20px; text-align: center }
.scheduleDemoWrapper { background-color: #F5F5F5!important; background-image: none!important } }

@media only screen and (min-width:320px) and (max-width:479px) {
.address_to_wrapper, .address_to_wrapper .india_contact_w, .address_to_wrapper .us_contact_w, .mail_contact_sales, .mail_contact_support { width: 100%; text-align: center; font-size: 14px; padding: 0 0 15px }
.sub_abt_contact { text-align: center; padding-bottom: 0; font-size: 14px; width: 100% }
.address_label, .address_to_content { padding-left: 4%; width: 93%!important }
.contact_inq_f_wrapper .inq_social, .contact_ofc_location { display: none }
.contact_inq_f_wrapper .inq_mail { width: 100%; padding: 0 0 20px }
.contact_inq_f_wrapper .inq_h { width: 100%; padding: 0 0 20px; text-align: center }
.ContactForm_n .cpt_wrapper .code_form_nvr { padding: 0 }
.form_wrapper_inner .f_part1, .form_wrapper_inner .f_part2 { width: 98%; float: none; margin: 0 auto }
.ContactForm_n input, .ContactForm_n textarea { width: 94% }
.ContactForm_n select { width: 45%!important }
.ContactForm_n .captcha_code_in input.captchaInput { width: 90%!important }
.ContactForm_n .sub_con_new_btn input { float: left; margin-left: 5% }
.contact_map_inner>iframe { height: 350px }
.scheduleDemoWrapper h2 { font-size: 30px; margin: 30px 0 25px!important }
.form-group { width: 100%; height: 50px!important }
.datebox { width: 94%!important } }
.daterangepicker { position: absolute; background: #fff; top: 100px; left: 20px; padding: 4px; margin-top: 1px; border-radius: 4px; width: 278px }
.daterangepicker.openscenter:after, .daterangepicker.openscenter:before { left: 0; width: 0; margin-left: auto; margin-right: auto; display: inline-block; content: ''; position: absolute }
.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,.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 { top: -7px; right: 0; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; border-left: 7px solid transparent; border-bottom-color: rgba(0,0,0,.2) }
.daterangepicker.openscenter:after { top: -6px; right: 0; border-right: 6px solid transparent; border-bottom: 6px solid #fff; border-left: 6px solid transparent }
.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,.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 .calendar, .daterangepicker.single .ranges { float: none }
.daterangepicker .calendar { display: none; max-width: 310px; margin: 4px }
.daterangepicker.show-calendar .calendar { display: block }
.daterangepicker .calendar.single .calendar-table { border: none }
.daterangepicker .calendar th { font-weight: 700 }
.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.end-date, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date { color: #999; background: #fff }
.daterangepicker option.disabled, .daterangepicker td.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.ampmselect, .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect { width: 50px; margin-bottom: 0 }
.daterangepicker th.month { width: auto }
.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; 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 }
.daterangepicker .calendar-time { text-align: center; margin: 5px auto; line-height: 30px; position: relative; padding-left: 28px }
.glyphicon, .input-group-addon { font-weight: 400; line-height: 1 }
.daterangepicker .calendar-time select.disabled { color: #ccc; cursor: not-allowed }
.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 }

@media (min-width:564px) {
.daterangepicker .calendar, .daterangepicker .ranges, .daterangepicker.single .calendar, .daterangepicker.single .ranges { float: left }
.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 .calendar.right { margin-left: 0 }
.daterangepicker .calendar.left .calendar-table, .daterangepicker .left .daterangepicker_input { padding-right: 12px } }

@media (min-width:730px) {
.daterangepicker .ranges { width: auto; float: left }
.daterangepicker .calendar.left { clear: none } }
.pull-left { float: left!important }
.input-group { position: relative; display: table; border-collapse: separate }
.input-group .form-control, .input-group-addon, .input-group-btn, .productsInner { 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; 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 }
.glyphicon-calendar:before { content: url(https://dwo5aya3d1c6n.cloudfront.net/api/bs_calendar.png?API13022017); 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; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
.glyphicon-chevron-left:before { content: url(https://dwo5aya3d1c6n.cloudfront.net/api/arrow_left.png?API13022017); height: 9px; width: 13px }
.glyphicon-chevron-right:before { content: url(https://dwo5aya3d1c6n.cloudfront.net/api/arrow_right.png?API13022017); height: 9px; width: 13px }
.datebox i { position: absolute; bottom: 15px; right: 0; top: auto; cursor: default; z-index: 1000 }
.tooltip .tooltiptext, .tooltip .tooltiptextlt, .tooltip .tooltiptextrgt { width: 240px; background-color: rgba(255,255,255,1); color: #393939; text-align: left; border-radius: 6px; padding: 15px; border-bottom: 1px solid #e2e2e2; box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); font-size: 13px; font-family: Roboto; top: 150px; z-index: 1; line-height: 22px }
.tooltip { position: relative }
.tooltip .tooltiptext { visibility: hidden; position: absolute; left: -50px }
.tooltip:hover .tooltiptext { visibility: visible }
.tooltip .tooltiptextlt { visibility: hidden; position: absolute; left: -20px }
.tooltip:hover .tooltiptextlt { visibility: visible }
.tooltip .tooltiptextrgt { visibility: hidden; position: absolute; left: -70px }
.tooltip:hover .tooltiptextrgt { visibility: visible }
.productsInner { width: 100%; margin: 0 auto; vertical-align: middle }
.card {float: left;width: 23%;padding: 20px 20px 45px;text-align: center;color: #000;margin-left: 6%;cursor: pointer;border-radius: 10px;background: #f5f5f5;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);transition: all .4s ease;}
.card:hover {box-shadow: 0 2px 10px 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:hover .card-content .btn{ border: 1px solid #2bade7; color: #fff; background-color: #2bade7;}
.card .card-sub-title { font-size: 13px; font-family: 'montserrat_light'; letter-spacing: 0.05em; font-weight: normal; }
.card figure { margin: 20px 0 }
.card-content { width: 80%; margin: 0 auto }
.card-content ul { margin: 0; padding: 0; list-style-type: disc; min-height: 250px; }
.card-content ul li { font-size: 14px; text-align: left; line-height: 20px; margin-bottom: 10px; font-family: Roboto; }
.card-content .btn {background-color: transparent;color: #000;border: 1px solid #000;padding: 10px 15px;font-family: Roboto;font-size: 13px;margin-left: 0;border-radius: 10px;}
.card-content .btn:hover {border: 1px solid #2bade7;color: #000;background-color: #2bade7;}
.mauticform_wrapper { max-width: 500px; margin: 10px auto }
.mauticform-name { font-weight: 700; font-size: 1.5em; margin-bottom: 3px }
.mauticform-description { margin-top: 2px; margin-bottom: 10px }
.mauticform-error { margin-bottom: 10px; color: red }
.mauticform-message { margin-bottom: 10px; color: #fff }
.mauticform-row {float:left; width:100%; display: block; margin-bottom: 10px; position:relative; }
.mauticform-label { font-size: 1.1em; display: block; font-weight: 700; margin-bottom: 5px }
.mauticform-row.mauticform-required .mauticform-label:after { color: #e32; content: " *"; display: inline }
.mauticform-helpmessage { display: block; font-size: .9em; margin-bottom: 3px }
.mauticform-errormsg {color: #e61919;display: block;font-family: "Roboto";font-size: 12px;position: absolute;right: 2%;top: 15px;}
.mauticform-input, .mauticform-selectbox, .mauticform-textarea {width: 100%;padding: 10px 70px 10px 10px;border-top: 0;border-right: 0;border-bottom: 2px solid #ddd;border-left: 0;background: #fff;box-sizing: border-box;height: 45px;font-family: 'Roboto';border-radius: 10px;}
.mauticform-checkboxgrp-label, .mauticform-radiogrp-label { font-weight: 400 }
.mauticform-button-wrapper .mauticform-button.btn-default, .mauticform-pagebreak-wrapper .mauticform-pagebreak.btn-default {color: #fff;padding: 10px 105px; background-color: #2aa9e0; font-family: Roboto;font-size: 15px;font-weight: normal; border-radius: 10px; margin-top: 15px;margin-left: 24%;}
.mauticform-button-wrapper .mauticform-button.btn-default:hover, .mauticform-pagebreak-wrapper .mauticform-pagebreak.btn-default:hover {background-color: #2a7be0;color: #fff;}
.mauticform-button-wrapper .mauticform-button, .mauticform-pagebreak-wrapper .mauticform-pagebreak { display: inline-block; margin-bottom: 0; font-weight: 600; text-align: center; vertical-align: middle; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; padding: 6px 12px; font-size: 13px; line-height: 1.3856; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none }
.countryBox, .mobBox { width: 49%;}
.mauticform-button-wrapper .mauticform-button.btn-default[disabled], .mauticform-pagebreak-wrapper .mauticform-pagebreak.btn-default[disabled] { background-color: #fff; border-color: #ddd; opacity: .75; cursor: not-allowed }
.mauticform-pagebreak-wrapper .mauticform-button-wrapper { display: inline }
.mobBox {float: left }
.mobBox .mauticform-errormsg { right: 5%;}
.countryBox { float: right;width: 100%; padding: 11px 10px 10px; height: 45px; font-family: 'Roboto'; }
.customerStrip {background-color: rgba(130, 131, 132, 0.5);position: absolute;bottom: 0;width: 100%;padding: 25px 0;margin: 0 auto;text-align: center;}
.disMob { display: none }
.blogs:hover  .button a{border: 1px solid #2bade7 !important; background-color: #2bade7 !important; color: #fff!important; cursor: pointer;}
.fName{width: 49%;float: left;}
.lName{width: 49%;float: right;}

.sgnwbg {
    background-color: transparent !important;
    position: fixed;
}

.maWrapper .maBanner .bannerInner h2.trusted-hding{
	margin: 0 0 50px;
	font-size: 30px;
	color: #2ba9e0;
}

@media screen and (min-width:320px) and (max-width:767px){
.maWrapper .maBanner .bannerInner h2.trusted-hding {
   margin: 0 0 30px;
   font-size: 30px;
   }
}


.productsWrapper{
    background: #fff;
    background-image: none;
    height: 755px;
}

.resources li{
    width: 100%;
}