@font-face { font-display: block; font-display: swap; font-family: "bootstrap-icons"; src: url("../fonts/bootstrap-iconsbf04.woff2?24e3eb84d0bcaf83d77f904c78ac1f47") format("woff2"), url("../fonts/bootstrap-iconsbf04.woff?24e3eb84d0bcaf83d77f904c78ac1f47") format("woff"); } .bi::before, [class^="bi-"]::before, [class*=" bi-"]::before { display: inline-block; font-family: bootstrap-icons !important; font-style: normal; font-weight: normal !important; font-variant: normal; text-transform: none; line-height: 1; vertical-align: -.125em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .bi-lg { font-size: 1.2rem } .bi-md { font-size: 1.1rem } .bi-search::before { content: "\F52A" } .bi-exclamation-triangle::before { content: "\F33B" } .bi-arrow-clockwise::before { content: "\F116" } .bi-chevron-down::before { content: "\F282" } .bi-images::before { content: "\F42B" } .bi-link-45deg::before { content: "\F470" } .bi-play-btn::before { content: "\F4F1" } .bi-three-dots::before { content: "\F5D4" } .bl-icon-close::before { content: "\F659" } .bi-facebook::before { content: "\F344" } .bi-twitter-x::before { content: "\F8DB" } .bi-youtube::before { content: "\F62B" } .bi-instagram::before { content: "\F437" } .bi-pinterest::before { content: "\F663" } .bi-linkedin::before { content: "\F472" } .bi-plus-lg::before { content: "\F64D" } .bi-file-earmark-pdf::before { content: "\F63E" } .bi-geo-alt::before { content: "\F3E8" } .bi-three-dots::before { content: "\F5D4" } body::-webkit-scrollbar { width: 13px; cursor: pointer; background: #ddf1fc } body::-webkit-scrollbar-thumb { background-color: #0b6ca0; } body::-webkit-scrollbar-thumb:hover { background-color: #1c91d0; } html, body { height: 100%; padding: 0px; margin: 0px; } body { -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /*Common*/ .container-1920 { max-width: 1920px; width: 100%; margin: auto } .heading { font-family: "Bai Jamjuree", serif; font-weight: 500; font-style: normal; } p { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; margin-bottom: 1rem !important } .list li { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } /*.anchor-focus:before {display: block;content: " ";position:relative; height: 100px;margin-top: -100px;visibility: hidden;}*/ .anchor-focus:target { display: block; position: relative; top: -118px; visibility: hidden; } .bg-light-blue { background: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity, .15)) !important } @media (max-width:767.98px) { .btn { --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: 0.5rem; } } .fancybox__slide.has-iframe .fancybox__content { padding: .5rem; } .fancybox__slide.has-iframe .fancybox__content { padding: .5rem; } .roadblock-url { cursor: pointer } .book-now { border-radius: 0; top: 20%; color: #fff; display: inline-block; height: 45px; line-height: 28px; position: fixed !important; right: -45px; text-align: center; text-decoration: none; text-transform: uppercase; -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform-origin: bottom right; width: 160px; z-index: 92 !important; /*border-radius: 10px 10px 0px 0px;*/ transition: all ease 0.4s; opacity: 0; padding-right: 0px; padding-left: 0px; } .showbtn { right: 0; opacity: 1 } .link-underline a { color: inherit; text-decoration: none; position: relative; margin-left: 0px; color: rgba(0, 0, 0, .85) } .link-underline a:hover { color: inherit; text-decoration: none; color: rgba(0, 0, 0, 1) } .link-underline a:after { background: none repeat scroll 0 0 transparent; bottom: 0; content: ""; display: block; height: 1px; left: 0%; position: absolute; background: #fff; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 100%; } .link-underline a:hover:after { width: 0; left: 0; right: 0 } .link-nounderline a { color: inherit; text-decoration: none; position: relative; margin-left: 0px; color: rgba(0, 0, 0, .85) } .link-nounderline a:hover { color: inherit; text-decoration: none; color: rgba(0, 0, 0, 1) } .link-nounderline a:after { background: none repeat scroll 0 0 transparent; bottom: 0; content: ""; display: block; height: 1px; left: 0%; position: absolute; background: #fff; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0; } .link-nounderline a:hover:after { width: 100%; left: 0; right: 0 } /*Btn Effect*/ .btn { position: relative; z-index: 1; overflow: hidden; font-weight: 500 } .btn:before { content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background: var(--bs-btn-hover-bg); display: block; -webkit-transform-origin: right top; -ms-transform-origin: right top; transform-origin: right top; -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); -webkit-transition: transform 0.4s cubic-bezier(1, 0, 0, 1); transition: transform 0.4s cubic-bezier(1, 1, 1, 1) } .btn:hover:before { -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1) } /*Input Btn Effect*/ input[type=submit].btn:hover { color: var(--bs-btn-hover-color); background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); } @media (min-width:1199.98px) { .bg-navbar { background: rgb(255, 255, 255); background: linear-gradient(90deg, rgba(255, 255, 255, 1) 28%, rgba(28, 145, 208, 1) 28%); } } @media (min-width:1280.98px) { .bg-navbar { background: rgb(255, 255, 255); background: linear-gradient(90deg, rgba(255, 255, 255, 1) 29%, rgba(28, 145, 208, 1) 29%); } } @media (min-width:1600.98px) { .bg-navbar { background: rgb(255, 255, 255); background: linear-gradient(90deg, rgba(255, 255, 255, 1) 30%, rgba(28, 145, 208, 1) 30%); } } @media (max-width:980px) { .btn-md { min-width: 17.75rem; --bs-btn-padding-x: 1rem !important; --bs-btn-padding-y: 0.875rem; } } .logo img { position: relative; width: 100px; } .calltoaction { color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important } .calltoaction a { text-decoration: none; color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important } @media (max-width:1199.98px) { .logo { margin: inherit; padding: 10px; } .logo img { height: auto; width: 155px; } .headerpan { border-bottom: 1px solid rgba(28, 145, 208, 1) } .offcanvas { overflow-y: auto; } } /*Visual Inner pages*/ /*Industries*/ .industries { display: block; _padding: 0px; } .industries figcaption { position: absolute; background-image: url('../../errordocs/404.html'); background-repeat: no-repeat; right: 0px; left: 0px; top: 0px; bottom: 0px; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; transition: all ease-in-out 0.3s } .industries a:hover figcaption { padding-bottom: 2rem !important } /*Coatings Style*/ .coating-features .col { border-right: 1px solid rgba(147, 147, 147, 0.35) } .coating-features .col:last-child { border: none } .coating-features h5 { font-family: DM Sans; font-weight: 400; line-height: 1.625 } .coating-features-list div hr { padding-bottom: 3.5rem !important; margin-top: 3.5rem !important; margin-bottom: 0px } .coating-features-list div:last-child hr { display: none } .search-list div hr { padding-bottom: 1.5rem !important; margin-top: 1.5rem !important; margin-bottom: 0px } .search-list div:last-child hr { display: none } .bg-packing { background: rgb(243, 243, 243); background: linear-gradient(0deg, rgba(243, 243, 243, 1) 30%, rgba(251, 251, 251, 1) 30%); } .downloads:nth-child(even) { background: rgba(147, 147, 147, .15) } @media (max-width:1024px) { .coating-features .col:nth-child(2), .coating-features .col:last-child { border: none } } /*List Style*/ .list ul { display: block; padding: 0px; margin: 0px; } .list ul li { padding: 0px 0px; margin: 0px 0px .5rem 25px; display: block; position: relative } .list ul li:before { background: none repeat scroll 0 0 transparent; content: "\F285"; font-family: bootstrap-icons !important; display: block; position: absolute; margin-left: -20px; font-size: 10px; line-height: 27px; font-weight: 600; } /*Resources*/ .bg-resources { background-color: rgba(27, 54, 123, 1); padding: 1.5rem 1.5rem !important; } .resources>div:last-child { margin-bottom: 0 !important; } .resources .faq-container h2.acc_trigger, .faq-pannel .faq-container .acc_container { padding: 0 } .resources .faq-container h2.acc_trigger a { font-size: 1.2rem; font-weight: 800 !important; color: rgba(27, 54, 123, 1) } .resources .faq-container h2.acc_trigger>a:hover { color: rgba(27, 54, 123, 1) } .resources .faq-container h2.acc_trigger>a span { width: 18px; height: 18px; } .resources .faq-container .acc_container .block ul li:before { content: '' } .resources .filters-select li label { display: block; cursor: pointer; color: #1B367B } .resources .form-check-input { border-color: #1B367B; top: -3px; position: relative; } @media (min-width:1200px) { .bg-event { /*background-image:url('../images/bg-event.jpg');*/ background-position: right; background-repeat: no-repeat; background-size: contain } .bg-resources { background-color: rgba(27, 54, 123, 0); background-image: url('../../errordocs/404.html'); background-position: left; background-repeat: no-repeat; padding: 3.525rem 7rem 3.525rem !important; background-size: cover } } .faq-pannel a { text-decoration: underline } .social-media { padding: 0px; margin: 0px; display: inline-block } .social-media a:after { display: none } .social-media .sm-icon { display: inline-block; color: white } .social-media .sm-icon { width: 40px; height: 30px; border-radius: 0; display: flex; line-height: 40px; align-items: center; justify-content: center; transition: all ease-in-out 0.3s; background: var(--bs-secondary); border: 2px solid var(--bs-secondary); border-radius: 50px } .social-media .sm-icon .bi { font-size: 18px; line-height: normal } .social-media .sm-icon .bi:before { display: block; margin-bottom: 0px; } .social-media .sm-icon:hover { background: transparent; color: inherit } .clientlist { display: block; width: 100%; padding: 0px; margin: 0px; text-align: center } .clientlist li { display: inline-block; padding: 20px 15px; margin: 15px 15px; border: 0px solid #dadada; background: #fff; width: 17.6%; text-align: center } @media (max-width:1499.99px) { .clientlist li { width: 17%; } } @media (max-width:1199.99px) { .clientlist li { width: 16%; } } @media (max-width:980px) { .clientlist { display: block; width: 100%; padding: 0px; margin: 0px; text-align: center } .clientlist li { display: inline-block; padding: 10px 15px; margin: 6px 5px; border: 0px solid #dadada; background: #fff; width: 29%; } } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.bounceIn, .animated.bounceOut, .animated.flipOutX, .animated.flipOutY { -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounce { 0%, 100%, 20%, 53%, 80% { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(.755, .050, .855, .060); animation-timing-function: cubic-bezier(.755, .050, .855, .060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(.755, .050, .855, .060); animation-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-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(.755, .050, .855, .060); animation-timing-function: cubic-bezier(.755, .050, .855, .060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(.755, .050, .855, .060); animation-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; 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 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; 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 jello { 0%, 100%, 11.1% { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-.78125deg) skewY(-.78125deg); transform: skewX(-.78125deg) skewY(-.78125deg); } 77.7% { -webkit-transform: skewX(.390625deg) skewY(.390625deg); transform: skewX(.390625deg) skewY(.390625deg); } 88.8% { -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg); transform: skewX(-.1953125deg) skewY(-.1953125deg); } } @keyframes jello { 0%, 100%, 11.1% { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-.78125deg) skewY(-.78125deg); transform: skewX(-.78125deg) skewY(-.78125deg); } 77.7% { -webkit-transform: skewX(.390625deg) skewY(.390625deg); transform: skewX(.390625deg) skewY(.390625deg); } 88.8% { -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg); transform: skewX(-.1953125deg) skewY(-.1953125deg); } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes bounceIn { 0%, 100%, 20%, 40%, 60%, 80% { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-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-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-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-keyframes bounceInDown { 0%, 100%, 60%, 75%, 90% { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-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-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-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-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-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-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-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-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-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-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-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-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-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-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -30%, 0); transform: translate3d(0, -30%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -30%, 0); transform: translate3d(0, -30%, 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(-20%, 0, 0); transform: translate3d(-20%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .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(20%, 0, 0); transform: translate3d(20%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(20%, 0, 0); transform: translate3d(20%, 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, 40%, 0); transform: translate3d(0, 40%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 40%, 0); transform: translate3d(0, 40%, 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 flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-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-animation-timing-function: ease-in; animation-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-animation-timing-function: ease-in; animation-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-animation-timing-function: ease-in; animation-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-animation-timing-function: ease-in; animation-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-animation-timing-function: ease-in; animation-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-animation-timing-function: ease-in; animation-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-animation-timing-function: ease-in; animation-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; 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-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: translate3d(0, -20%, 0); transform: translate3d(0, -20%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -20%, 0); transform: translate3d(0, -20%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 20%, 0); transform: translate3d(0, 20%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 20%, 0); transform: translate3d(0, 20%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } @media not all and (min-resolution:.001dpcm) { .gap-3 *+* { margin-left: 1rem; } .gap-2>*+* { margin-left: .5rem; } .gap-lg-3 *+* { margin-left: 1rem; } .gap-lg-2>*+* { margin-left: .5rem; } } /*New Style Tag*/ @media (max-width:980px) and (min-width:768px) { .table-directory { min-width: 690px } .table-directory tr th:nth-child(1) { width: 180px !important } .table-directory tr th:nth-child(2) { width: 100px !important } .table-directory tr th:nth-child(3) { max-width: initial !important } .table-directory tr th:nth-child(4) { width: 150px !important } } @media (max-width:767px) { .table-directory { display: block; border: 0px !important; border-collapse: collapse !important } .table-directory tr th { display: none; } .table-directory tbody tr { display: block; margin-bottom: 20px; border: 1px solid rgba(0, 0, 0, .15) } .table-directory tr td { display: block; width: 100%; } .table-directory tr td:nth-child(1), .table-directory tr td:nth-child(2) { display: flex; } .table-directory tr td:nth-child(1) { background: #15539e; color: #fff } .table-directory tr td:nth-of-type(1):before { content: "Name"; font-weight: 600; min-width: 55px !important } .table-directory tr td:nth-of-type(2):before { content: "City"; font-weight: 600; min-width: 55px !important } .table-directory tr td:nth-of-type(3):before { content: "Products"; font-weight: 600; display: block; } .gallery ul li { float: left; width: 48%; list-style: none; padding: 10px; position: relative; } .section-title__title { line-height: 1em !important; } .about-one--about__big-title h2 { display: none; } } .table-directory tr td { transition: linear 0.2s } .table-directory tr:hover td { cursor: pointer; background: #e7edf5 !important } .table-directory tr:hover .btn-outline-primary { background: transparent !important; color: #fff !important } .table-directory tr:hover .btn-outline-primary:before { -webkit-transform: scaleX(1); transform: scaleX(1) } /*Negative Margin*/ .m-n1 { margin: -0.25rem !important; } .mt-n1, .my-n1 { margin-top: -0.25rem !important; } .mr-n1, .mx-n1 { margin-right: -0.25rem !important; } .mb-n1, .my-n1 { margin-bottom: -0.25rem !important; } .ml-n1, .mx-n1 { margin-left: -0.25rem !important; } .m-n2 { margin: -0.5rem !important; } .mt-n2, .my-n2 { margin-top: -0.5rem !important; } .mr-n2, .mx-n2 { margin-right: -0.5rem !important; } .mb-n2, .my-n2 { margin-bottom: -0.5rem !important; } .ml-n2, .mx-n2 { margin-left: -0.5rem !important; } .m-n3 { margin: -1rem !important; } .mt-n3, .my-n3 { margin-top: -1rem !important; } .mr-n3, .mx-n3 { margin-right: -1rem !important; } .mb-n3, .my-n3 { margin-bottom: -1rem !important; } .ml-n3, .mx-n3 { margin-left: -1rem !important; } .m-n4 { margin: -1.5rem !important; } .mt-n4, .my-n4 { margin-top: -1.5rem !important; } .mr-n4, .mx-n4 { margin-right: -1.5rem !important; } .mb-n4, .my-n4 { margin-bottom: -1.5rem !important; } .ml-n4, .mx-n4 { margin-left: -1.5rem !important; } .m-n5 { margin: -3rem !important; } .mt-n6, .my-n6 { margin-top: -4rem !important; } .mt-n5, .my-n5 { margin-top: -3rem !important; } .mr-n5, .mx-n5 { margin-right: -3rem !important; } .mb-n5, .my-n5 { margin-bottom: -3rem !important; } .ml-n5, .mx-n5 { margin-left: -3rem !important; } @media (min-width: 576px) { .mt-sm-n1, .my-sm-n1 { margin-top: -0.25rem !important; } .mr-sm-n1, .mx-sm-n1 { margin-right: -0.25rem !important; } .mb-sm-n1, .my-sm-n1 { margin-bottom: -0.25rem !important; } .ml-sm-n1, .mx-sm-n1 { margin-left: -0.25rem !important; } .m-sm-n2 { margin: -0.5rem !important; } .mt-sm-n2, .my-sm-n2 { margin-top: -0.5rem !important; } .mr-sm-n2, .mx-sm-n2 { margin-right: -0.5rem !important; } .mb-sm-n2, .my-sm-n2 { margin-bottom: -0.5rem !important; } .ml-sm-n2, .mx-sm-n2 { margin-left: -0.5rem !important; } .m-sm-n3 { margin: -1rem !important; } .mt-sm-n3, .my-sm-n3 { margin-top: -1rem !important; } .mr-sm-n3, .mx-sm-n3 { margin-right: -1rem !important; } .mb-sm-n3, .my-sm-n3 { margin-bottom: -1rem !important; } .ml-sm-n3, .mx-sm-n3 { margin-left: -1rem !important; } .m-sm-n4 { margin: -1.5rem !important; } .mt-sm-n4, .my-sm-n4 { margin-top: -1.5rem !important; } .mr-sm-n4, .mx-sm-n4 { margin-right: -1.5rem !important; } .mb-sm-n4, .my-sm-n4 { margin-bottom: -1.5rem !important; } .ml-sm-n4, .mx-sm-n4 { margin-left: -1.5rem !important; } .m-sm-n5 { margin: -3rem !important; } .mt-sm-n5, .my-sm-n5 { margin-top: -3rem !important; } .mr-sm-n5, .mx-sm-n5 { margin-right: -3rem !important; } .mb-sm-n5, .my-sm-n5 { margin-bottom: -3rem !important; } .ml-sm-n5, .mx-sm-n5 { margin-left: -3rem !important; } } @media (min-width: 768px) { .mt-md-n1, .my-md-n1 { margin-top: -0.25rem !important; } .mr-md-n1, .mx-md-n1 { margin-right: -0.25rem !important; } .mb-md-n1, .my-md-n1 { margin-bottom: -0.25rem !important; } .ml-md-n1, .mx-md-n1 { margin-left: -0.25rem !important; } .m-md-n2 { margin: -0.5rem !important; } .mt-md-n2, .my-md-n2 { margin-top: -0.5rem !important; } .mr-md-n2, .mx-md-n2 { margin-right: -0.5rem !important; } .mb-md-n2, .my-md-n2 { margin-bottom: -0.5rem !important; } .ml-md-n2, .mx-md-n2 { margin-left: -0.5rem !important; } .m-md-n3 { margin: -1rem !important; } .mt-md-n3, .my-md-n3 { margin-top: -1rem !important; } .mr-md-n3, .mx-md-n3 { margin-right: -1rem !important; } .mb-md-n3, .my-md-n3 { margin-bottom: -1rem !important; } .ml-md-n3, .mx-md-n3 { margin-left: -1rem !important; } .m-md-n4 { margin: -1.5rem !important; } .mt-md-n4, .my-md-n4 { margin-top: -1.5rem !important; } .mr-md-n4, .mx-md-n4 { margin-right: -1.5rem !important; } .mb-md-n4, .my-md-n4 { margin-bottom: -1.5rem !important; } .ml-md-n4, .mx-md-n4 { margin-left: -1.5rem !important; } .m-md-n5 { margin: -3rem !important; } .mt-md-n5, .my-md-n5 { margin-top: -3rem !important; } .mr-md-n5, .mx-md-n5 { margin-right: -3rem !important; } .mb-md-n5, .my-md-n5 { margin-bottom: -3rem !important; } .ml-md-n5, .mx-md-n5 { margin-left: -3rem !important; } } @media (min-width: 992px) { .mt-lg-n1, .my-lg-n1 { margin-top: -0.25rem !important; } .mr-lg-n1, .mx-lg-n1 { margin-right: -0.25rem !important; } .mb-lg-n1, .my-lg-n1 { margin-bottom: -0.25rem !important; } .ml-lg-n1, .mx-lg-n1 { margin-left: -0.25rem !important; } .m-lg-n2 { margin: -0.5rem !important; } .mt-lg-n2, .my-lg-n2 { margin-top: -0.5rem !important; } .mr-lg-n2, .mx-lg-n2 { margin-right: -0.5rem !important; } .mb-lg-n2, .my-lg-n2 { margin-bottom: -0.5rem !important; } .ml-lg-n2, .mx-lg-n2 { margin-left: -0.5rem !important; } .m-lg-n3 { margin: -1rem !important; } .mt-lg-n3, .my-lg-n3 { margin-top: -1rem !important; } .mr-lg-n3, .mx-lg-n3 { margin-right: -1rem !important; } .mb-lg-n3, .my-lg-n3 { margin-bottom: -1rem !important; } .ml-lg-n3, .mx-lg-n3 { margin-left: -1rem !important; } .m-lg-n4 { margin: -1.5rem !important; } .mt-lg-n4, .my-lg-n4 { margin-top: -1.5rem !important; } .mr-lg-n4, .mx-lg-n4 { margin-right: -1.5rem !important; } .mb-lg-n4, .my-lg-n4 { margin-bottom: -1.5rem !important; } .ml-lg-n4, .mx-lg-n4 { margin-left: -1.5rem !important; } .m-lg-n5 { margin: -3rem !important; } .mt-lg-n5, .my-lg-n5 { margin-top: -3rem !important; } .mr-lg-n5, .mx-lg-n5 { margin-right: -3rem !important; } .mb-lg-n5, .my-lg-n5 { margin-bottom: -3rem !important; } .ml-lg-n5, .mx-lg-n5 { margin-left: -3rem !important; } } @media (min-width: 1200px) { .mt-xl-n1, .my-xl-n1 { margin-top: -0.25rem !important; } .mr-xl-n1, .mx-xl-n1 { margin-right: -0.25rem !important; } .mb-xl-n1, .my-xl-n1 { margin-bottom: -0.25rem !important; } .ml-xl-n1, .mx-xl-n1 { margin-left: -0.25rem !important; } .m-xl-n2 { margin: -0.5rem !important; } .mt-xl-n2, .my-xl-n2 { margin-top: -0.5rem !important; } .mr-xl-n2, .mx-xl-n2 { margin-right: -0.5rem !important; } .mb-xl-n2, .my-xl-n2 { margin-bottom: -0.5rem !important; } .ml-xl-n2, .mx-xl-n2 { margin-left: -0.5rem !important; } .m-xl-n3 { margin: -1rem !important; } .mt-xl-n3, .my-xl-n3 { margin-top: -1rem !important; } .mr-xl-n3, .mx-xl-n3 { margin-right: -1rem !important; } .mb-xl-n3, .my-xl-n3 { margin-bottom: -1rem !important; } .ml-xl-n3, .mx-xl-n3 { margin-left: -1rem !important; } .m-xl-n4 { margin: -1.5rem !important; } .mt-xl-n4, .my-xl-n4 { margin-top: -1.5rem !important; } .mr-xl-n4, .mx-xl-n4 { margin-right: -1.5rem !important; } .mb-xl-n4, .my-xl-n4 { margin-bottom: -1.5rem !important; } .ml-xl-n4, .mx-xl-n4 { margin-left: -1.5rem !important; } .m-xl-n5 { margin: -3rem !important; } .mt-xl-n6, .my-xl-n6 { margin-top: -5rem !important; } .mt-xl-n5, .my-xl-n5 { margin-top: -3rem !important; } .mr-xl-n5, .mx-xl-n5 { margin-right: -3rem !important; } .mb-xl-n5, .my-xl-n5 { margin-bottom: -3rem !important; } .ml-xl-n5, .mx-xl-n5 { margin-left: -3rem !important; } } .border-content { position: relative; z-index: 1; } @media (min-width: 992px) { .data-border, .data-border-lft { top: 3rem; z-index: 0; } .data-border::before { content: ""; position: absolute; right: 0; z-index: 0; border: 1px solid rgba(var(--bs-primary-rgb)) !important; border-radius: 0.5rem; width: 115%; height: 100%; } .data-border-lft::before { content: ""; position: absolute; left: 0; z-index: 0; border: 1px solid rgba(var(--bs-primary-rgb)) !important; border-radius: 0.5rem; width: 115%; height: 100%; } } .bg-lotus-rht { background: url(../../errordocs/404.html) no-repeat bottom right } .bg-lotus-lft { background: url(../../errordocs/404.html) no-repeat bottom left } .bg-ft-text { background: #cee2d7 url(../../errordocs/404.html) center right; background-size: cover } .emr-vendors { transition: all .4s ease-in; -webkit-box-shadow: 0px 0px 0px 3px rgba(255, 255, 255, 1); -moz-box-shadow: 0px 0px 0px 3px rgba(255, 255, 255, 1); box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1); border: 1px solid #079649 } .emr-vendors:hover { background: #d5e6dd } .emr-vendors img { transition: all .3s ease-in; } .emr-vendors:hover img.border { border: 1px solid #079649 !important } /* btn scroll top */ .btn-scroll-top { background-color: #eee; border: 3px solid #1c91d0; border-radius: 10px; bottom: .5rem; _box-shadow: inset 0 0 0 .1rem rgba(227, 229, 233, 1); opacity: 0; position: fixed; right: .5rem; transform: translateY(.75rem); transition: all .2s linear, margin-right 0s; visibility: hidden; z-index: 9992; } .btn-scroll-top, .btn-scroll-top:after { cursor: pointer; display: block; height: 3rem; width: 3rem } .btn-scroll-top { background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: center; } .btn-scroll-top.active-progress { transform: translateY(0); visibility: visible } @media (min-width:320px) { .btn-scroll-top.active-progress { opacity: 1 } } .btn-scroll-top svg path { fill: none } .btn-scroll-top:hover { background-color: var(--bs-primary); background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: center; } @media (min-width:768px) { .btn-scroll-top { background-color: #eee; border: 0px solid #1c91d0; border-radius: 10px; bottom: 1rem; opacity: 0; position: fixed; right: 1rem; transform: translateY(.75rem); transition: all .2s linear, margin-right 0s; visibility: hidden; z-index: 9992; } .btn-scroll-top svg path { fill: none } .btn-scroll-top svg.progress-square path { stroke: #1c91d0; stroke-width: 2; box-sizing: border-box; transition: all .2s linear } .btn-scroll-top:hover { background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: center; } } /* ...................somnath................. */ .about-bg { position: relative; background-repeat: no-repeat; background-size: cover; } .about-bg::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: linear-gradient(90deg, rgba(38, 71, 150, 1) 25%, rgba(0, 141, 210, 1) 82%); background: #ffffffe0; } /* Container card with animated border */ .animated-card { position: relative; border-radius: 16px; overflow: hidden; transition: transform 0.4s ease, box-shadow 0.4s ease; z-index: 1; box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15); } /* Hover effect on card */ .animated-card:hover { transform: translateY(-6px); } /* Optional: Inner content background */ .animated-card .card-body { background: #1296db; border-radius: 0 0 16px 16px; color: #2d2b82; /* background: linear-gradient(90deg, rgba(0, 141, 210, 1) 25%, rgba(38, 71, 150, 1) 82%); */ } /* Link style */ .product-link { text-decoration: none; color: #ffffff; transition: color 0.3s ease, transform 0.3s ease; } .product-link:hover { color: #1a5f90; transform: scale(1.05); } .product-link .card-title { color: #ffffff !important; text-align: center; } .about-section-three { padding: 70px 0 70px 0; position: relative; background-position: left bottom; background-repeat: no-repeat; background-color: #fff; } .about-section-three::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* background-color: linear-gradient(90deg, rgba(38, 71, 150, 1) 25%, rgba(0, 141, 210, 1) 82%); */ background: #fdfdfdab; } .about-section-three > .container { position: relative; z-index: 1; /* content above background overlay */ } .about-three-left-box { position: relative; height: 100%; padding: 0 40px 80px 80px; } .about-shape-4 { position: absolute; bottom: 19px; left: 0; /* z-index: -1; */ width: 283px; opacity: 0.4; } .about-shape-4 img { width: 100%; } .float-bob-y { -webkit-animation-name: float-bob-y; animation-name: float-bob-y; -webkit-animation-duration: 3s; animation-duration: 3s; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear } @keyframes float-bob-y { 0%, 100% { -webkit-transform: translateY(-30px); transform: translateY(-30px) } 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px) } } .float-bob-x { -webkit-animation-name: float-bob-x; animation-name: float-bob-x; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear } @keyframes float-bob-x { 0%, 100% { -webkit-transform: translateX(30px); transform: translateX(30px) } 50% { -webkit-transform: translateX(10px); transform: translateX(10px) } } .about-three-left-box .fid-style-box { position: absolute; width: auto; left: 0px; z-index: 1; top: 105px; } .zoomIn { animation-name: zoomIn; } .animated { animation-duration: 1.25s; } @keyframes zoomIn { 0% { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } /** Style 4 **/ .pbminfotech-ele-fid-style-4 .pbmit-fid-inner { font-size: 48px; line-height: 58px; margin-bottom: 5px; font-weight: 700; color: #fff; } .pbminfotech-ele-fid-style-4 .pbmit-fld-contents { display: inline-block; text-align: center; background-color: #2785c4; padding: 30px 35px; border-radius: 15px; } .pbminfotech-ele-fid-style-4 .pbmit-fid-inner sub, .pbminfotech-ele-fid-style-4 .pbmit-fid-inner sup { font-size: 50px; line-height: 50px; } .pbminfotech-ele-fid-style-4 .pbmit-fid-title { color: #fff; font-weight: 500; line-height: 20px; display: block; } .pbminfotech-ele-fid-style-4 .pbmit-fid-before sup, .pbminfotech-ele-fid-style-4 .pbmit-fid sup { top: -30px; } .pbminfotech-ele-fid-style-4 .pbmit-fid sup { margin-left: -20px; } .pbminfotech-ele-fid-style-4 .pbmit-fid-before sup { margin-right: -20px; } .pbminfotech-ele-fid-style-4 .pbmit-fid-before sub, .pbminfotech-ele-fid-style-4 .pbmit-fid sub { bottom: -2px; } .pbminfotech-ele-fid-style-4 .pbmit-fid sub { margin-left: -14px; } .pbminfotech-ele-fid-style-4 .pbmit-fid-before sub { margin-right: -14px; } .pbminfotech-ele-fid-style-4 .pbmit-fid span { margin-left: -10px; } .pbminfotech-ele-fid-style-4 .pbmit-fid-before span { margin-right: -10px; } .about-three-left-box .about-first-img img { border-radius: 30px; } .about-three-left-box .about-second-img { position: absolute; width: auto; max-width: 100%; right: 40px; bottom: 0; } .about-three-left-box .about-second-img .img-wrap { position: relative; padding: 20px 0px 0px 20px; border-radius: 20px 0px 0px 0px; background-color: #fff; } .about-three-left-box .about-second-img .img-wrap:before, .about-three-left-box .about-second-img .img-wrap:after { content: ""; position: absolute; background-color: transparent; height: 40px; width: 20px; border-bottom-right-radius: 20px; box-shadow: 0 20px 0 0 #fff; } .about-three-left-box .about-second-img .img-wrap:after { top: -40px; left: calc(100% - 73px); } .about-three-left-box .about-second-img img { border-radius: 20px; } .about-three-left-box .about-second-img .img-wrap:before { bottom: 80px; top: auto; left: -20px; } .theme-btn2 { font-size: 14px; font-weight: 600; line-height: 24px; padding: 14px 32px; } .theme-btn2 { color: #ffffff; background-color: #ff7a30; padding: 14px 21px; overflow: hidden; position: relative; z-index: 10; } .call-us-btn .icon { font-size: 24px; width: 56px; height: 56px; transition: all 0.3s ease-out 0s; } .sec-subtitle { font-size: 17px; color: #2d2b82; margin-bottom: 0px; position: relative; display: block; animation: fadeInDown 1s ease forwards; text-transform: uppercase; font-weight: 700; } .sec-subtitle::before, .sec-subtitle::after { content: "➕"; font-size: 16px; color: #007BFF; position: absolute; top: 50%; transform: translateY(-50%); opacity: 0; animation: bounceIn 1s forwards; } .sec-subtitle::before { left: -25px; animation-delay: 0.3s; } .sec-subtitle::after { right: -25px; animation-delay: 0.6s; } .welcomeh2 { font-size: 46px; font-weight: bold; color: #2b2b2b; display: inline-block; opacity: 0; animation: fadeInUp 1s 0.5s forwards; position: relative; text-transform: uppercase; } .welcomeh2 span { display: inline-block; } .text-primary2 { color: #2785c4; /* Medical green */ opacity: 0; animation: slideInRight 1s 1s forwards; } /* Animations */ @keyframes fadeInDown { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes fadeInUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slideInRight { from { transform: translateX(50px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes bounceIn { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); } } .btn-wrapper { /* border-top: 1px solid #D8DDE1; */ padding-top: 20px; } .welcomeh2 { font-size: 39px; font-weight: 900; } .pbmit-heading-desc p { font-size: 17px; text-align: justify; } /* CSS */ .floating-contact { position: fixed; right: 20px; bottom: 100px; z-index: 1000; display: flex; flex-direction: column; gap: 15px; } .floating-contact a { display: flex; justify-content: center; align-items: center; width: 55px; height: 55px; color: #fff; border-radius: 50%; text-decoration: none; animation: pulse 2s infinite; transition: transform 0.3s ease; } .floating-contact a:hover { transform: scale(1.1); } .call-button { background-color: #2d2b82; } .whatsapp-button { background-color: #25d366; } /* Icon style */ .floating-contact i { font-size: 22px; } /* Pulse animation */ @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4); } 70% { box-shadow: 0 0 0 15px rgba(0, 0, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } } /* Responsive fix */ @media (max-width: 480px) { .floating-contact { right: 15px; bottom: 105px; } .floating-contact a { width: 48px; height: 48px; } .floating-contact i { font-size: 20px; } } .heading .h1 { font-weight: 700 !important; /* color: #2d2b82 !important; */ } .aboutPgSec_4 { background-color: #fff; position: relative; overflow: hidden; padding: 60px 0px; } .vmvIcon { width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(90deg, rgba(0, 141, 210, 1) 25%, rgba(38, 71, 150, 1) 82%); display: flex; justify-content: center; align-items: center; padding: 15px; margin: 0 auto; transition: 0.5s; z-index: 1000; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } .vmvIcon img { width: 64px; filter: brightness(0) invert(1); } .vmvContent { background: url(../images/value-bg.png) no-repeat center top; padding: 37px 36px; background-size: cover; min-height: 259px; box-shadow: 0px 15px 16px -10px #9b9b9b; position: relative; margin-top: -10px; background: #fff; transition: 0.5s; padding-top: 114px; } .vmvNo { position: absolute; bottom: 5px; right: 20px; font-size: 60px; font-weight: bold; color: rgba(0 0 0 / 9%); line-height: 100px; transition: 0.5s; } .vmvContent h4 { color: #184090; font-size: 24px; font-weight: bold; transition: 0.5s; text-align: center; margin-bottom: 9px; } .vmvContentText { overflow: auto; padding: 8px; text-align: center; } .vmvItem:hover .vmvContent { background: url(../images/vmvIcon.png) no-repeat center top; background-size: cover; } .vmvItem:hover .vmvIcon { background-color: #c7070e; } .border-color { border-color: #fff; } .industries-list { text-align: center; font-weight: 600; color: #000; } .industries-list { width: 100%; padding: 0px; margin: 0 auto; } .industries-list ul li.industries-list ul li .industries-list ul { padding: 0px; margin: 0px; list-style: none; } .industries-list>ul { margin: 0px; padding: 0px; list-style: none; text-align: center; margin: 0 auto !important; } .industries-list ul li { display: inline-block; text-align: center !important; white-space: normal; } .industries-list ul li figure { border-radius: 25px; border: #ddd 1px solid; overflow: hidden; } .molecular-bg-top-left { background: #d5d5d545; } .owl-carousel .item, .owl-carousel .px-3 { display: flex; justify-content: center; align-items: center; } /* .............OUR-CLIENT......... */ .logo_items { text-align: center; } .logo_items img { height: 100px; margin: 0 10px; padding: 4px 10px; object-fit: contain; width: 200px; background-color: #fff; border-radius: 8px; } .logos { overflow: hidden; padding: 30px 0px; white-space: nowrap; position: relative; } .slides1 { animation: 80s slides infinite linear; } .logo_items { display: inline-block; } @keyframes slides { from { transform: translateX(0); } to { transform: translateX(-100%); } } .slides2 { animation: 25s slides infinite linear reverse; } @keyframes slides { from { transform: translateX(0); } to { transform: translateX(-100%); } } .wpo-site-footer { position: relative; font-size: 15px; overflow: hidden; background-image: url(images/footer-bg.png); background-repeat: no-repeat; background-size: cover; background-position: center; z-index: 1; } .bg-overlay { position: absolute; inset: 0; background: rgba(52, 100, 163, 0.8); /* #154a91 with 80% opacity */ z-index: 0; pointer-events: none; /* Allow clicks to pass through */ } .wpo-site-footer > *:not(.bg-overlay) { position: relative; z-index: 1; } .wpo-site-footer .wpo-upper-footer { padding: 40px 0 20px 0 } .wpo-site-footer .widget-title { margin-bottom: 10px } .wpo-site-footer .widget-title h3 { font-size: 18px; color: #FFF; margin: 0; text-transform: uppercase; position: relative } .wpo-site-footer .about-widget p { margin-bottom: .8em; line-height: 29px; color: #fff; font-size: 16px } .wpo-site-footer .about-widget ul { overflow: hidden; padding-top: 10px } .wpo-site-footer .about-widget ul li { font-size: 22px; float: left; list-style: none } .wpo-site-footer .about-widget ul li a { color: #fff; width: 36px; height: 36px; line-height: 40px; background: rgba(255, 255, 255, .1); display: block; text-align: center; border-radius: 50%; font-size: 18px } .wpo-site-footer .about-widget ul li a:hover { color: #253041; background: #fff } .wpo-site-footer .about-widget ul li+li { margin-left: 25px } .wpo-site-footer .wpo-service-link-widget { padding-left: 50px } .wpo-site-footer .link-widget { overflow: hidden } .wpo-site-footer .link-widget ul { padding: 0; margin: 0 } .wpo-site-footer .link-widget ul li { position: relative; list-style: none; background-image: url(images/arrow-footer.webp); background-repeat: no-repeat; background-position: 0 10px; padding: 4px 0 4px 20px } .wpo-site-footer .link-widget ul li a { color: #fff; font-size: 17px; position: relative; } .wpo-site-footer .link-widget ul li a::after { content: '\f282'; font-family: 'FontAwesome'; margin-right: 13px; font-size: 20px; margin-top: -3px; margin-right: 13px; font-size: 12px; margin-top: -3px; position: absolute; top: 3px; left: -20px; color: #ffffff; background-position: center } .wpo-site-footer .link-widget ul li a:hover { text-decoration: underline } .wpo-site-footer .contact-ft { margin-top: 20px } .wpo-site-footer .contact-ft ul { padding: 0; margin: 0 } .wpo-site-footer .contact-ft ul li { padding-bottom: 15px; position: relative; padding-left: 40px; color: #e5e3e3; font-size: 17px; list-style: none } .wpo-site-footer .contact-ft ul li a { color: #e5e3e3 } .wpo-site-footer .contact-ft ul li a:hover { color: #e5e3e3; font-weight: 700 } .wpo-site-footer .contact-ft ul li i { position: absolute; left: 0; top: 0; font-size: 32px } .wpo-site-footer .contact-ft ul li .fi:before { font-size: 20px; margin-right: 15px } .wpo-site-footer .wpo-lower-footer { text-align: left; position: relative; color: #fff; background: #212c3c } .wpo-site-footer .wpo-lower-footer a { color: #fff } .wpo-site-footer .wpo-lower-footer .row { padding: 20px 0; position: relative } .wpo-site-footer .wpo-lower-footer .copyright { display: inline-block; font-size: 15px; font-size: .9375rem; margin: 0; color: #fff } .wpo-site-footer .wpo-lower-footer .copyright a { color: #fff; text-decoration: none } .wpo-site-footer .instagram ul { display: flex; flex-wrap: wrap; margin: 0 -3px } .wpo-site-footer .instagram ul li { flex: 0 0 33.33%; max-width: 33.33%; margin-bottom: 5px; display: block; padding: 0 3px } .wpo-site-footer .instagram ul li img { width: 100% } .productsbox li { float: left; width: 50% } .brochureimg { text-align: center } .brochureimg img { width: 100%; height: auto } .power-by { color: #fff; font-size: 17px; font-weight: 400; background-color: #033b74; padding: 20px 0 } .power-by a { color: #fff !important; font-weight: 400 } .power-by a:hover { font-size: 17px; font-weight: 400 } .power { text-align: center } .servece-get { line-height: 25px; color: #fff; font-size: 16px; background-color: #013f81; padding: 20px; border-radius: 20px; } .servece-get ul { padding: 0; margin: 0; padding-top: 10px } .servece-get ul li { list-style: none; padding-top: 6px; font-size: 16px; padding-bottom: 6px; font-weight: 300; line-height: 30px } .servece-get ul li a { text-decoration: none; color: #fff } .servece-get a:hover { color: #dbffff } .servece-get ul li i { padding-right: 8px } .servece-get h4 { font-size: 20px; color: #ffffff; font-weight: 600; margin-bottom: 0 } .servece-get p { font-size: 17px; color: #fff; font-weight: 600; margin-bottom: 5px; padding-top: 5px; margin-top: 10px; border-top: 1px dashed #1790cf } .social-media ul { overflow: auto; padding: 0; margin: 0; color: #282828; padding-top: 10px } .social-media ul li { list-style-type: none; float: left; padding: 0 5px 0 5px; padding-top: 7px } .social-media ul li a { color: #094180; font-size: 16px } .social-media ul li a:hover { color: #c2d4e8 } .social-media ul li a i { background: #0054ac; color: #ffffff; width: 36px; height: 36px; line-height: 36px; border-radius: 50px; font-size: 18px; text-align: center; padding-right: 0; } .social-media ul li a i:hover { background-color: #fe7801; color: #fff } .carousel-item img { height: auto !important; } /* .........inner-banner-start............ */ .product-banner-part { background: #e12529; padding: 80px 0 80px 0; position: relative; overflow: hidden; background-position: center; height: 315px; } .product-banner-part:before { content: ""; position: absolute; width: 100%; /* background: linear-gradient(90deg, rgb(0 141 210 / 49%) 25%, rgb(38 71 150 / 70%) 82%); */ height: 600px; top: 0 } .product-banner { text-align: center; position: relative; z-index: 9 } .product-banner h1 { font-size: 45px; line-height: 50px; text-transform: uppercase; font-weight: 800; color: #fff; text-shadow: 1px 3px 3px #020202, 1px 4px 0 #020202 } .product-banner-part .breadcrumb-row { background-color: rgba(0, 0, 0, 0); text-align: center; color: #fff } .product-banner-part .breadcrumb-row ul { padding: 0; margin: 0 } .product-banner-part .breadcrumb-row ul li { color: #ffF; list-style: none; display: inline-block; padding: 0 10px; /* margin-top: -50px; */ position: relative } .product-banner-part .breadcrumb-row ul li:after { content: ">"; position: absolute; z-index: 99; right: -5px; color: #FFF } .product-banner-part .breadcrumb-row ul li:last-child:after { display: none } .product-banner-part .breadcrumb-row ul li a { color: #FFF } .item_box { overflow: hidden; text-align: center; color: #fff !important; box-shadow: #fff 0 0 0 0; background: rgba(255, 255, 255, 1); border: #eaeaea 1px solid; border-radius: 20px; overflow: hidden; margin-bottom: 20px; } .item_box .image { position: relative; overflow: hidden; } .item_box .con { background-color: #eee; padding-left: 10px; display: flex; align-items: center; justify-content: space-between; } .item_box .con .tt { color: #000; font-size: 16px; font-weight: 600; width: calc(100% - 42px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 10px; } .item_box .con .read-more { height: 42px; width: 42px; min-width: 42px; display: block; text-align: center; align-content: center; color: white; background-color: #008dd2; } .item_box .con .read-more svg { width: 18px; height: 18px; } .item_box .overlay-bx { background-color: rgba(0, 0, 0, 0.8); position: absolute; left: 0; top: 100%; width: 100%; height: 100%; padding: 30px; padding-left: 50px; z-index: 1; transition: all 600ms ease; } .item_box:hover .overlay-bx { top: 0; } .item_box .overlay-bx::before { position: absolute; left: 25px; bottom: 0; height: 90%; width: 1px; background-color: #ffffff; content: ""; opacity: .70; } .item_box .overlay-bx::after { position: absolute; bottom: 25px; left: 0; height: 1px; width: 90%; background-color: #ffffff; opacity: .70; content: ""; } .item_box .overlay-bx p { color: white; font-size: 16px; } .item_box .overlay-bx a { color: #ca2212; } .item_box .overlay-bx a:hover { color: #fff; } .item_box .image img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; object-position: center; } .common-padding-both { padding: 50px 0px; } .inner-pages-section { padding: 50px 0px; background-color: #fff !important; } .product-innerdescription-h2 { font-weight: 700; color: #077fc6; } .product-innerdescription p { font-size: 17px; } .product-innerdescription strong { font-weight: 600; } .keyword-heading { text-align: center; padding: 20px 0px; font-weight: 600; color: #013f80; } .h4-product-heading { line-height: 30px; font-size: 22px; } .cs_list.cs_style_1 li::after { content: '\f138'; font-family: 'FontAwesome'; margin-right: 13px; font-size: 20px; margin-top: -3px; margin-right: 13px; font-size: 16px; margin-top: -3px; position: absolute; top: 3px; left: 0; color: #f16724; background-position: center } .cs_list.cs_style_1 li { padding-left: 25px; position: relative; font-size: 18px; margin-bottom: 15px; color: #000000; font-weight: 300; list-style: none; } .cs_list { padding-left: 0px !important; } .listing-heding { font-size: 23px; font-weight: 700; color: #00527b } .images-section-product { float: right; max-width: 450px; width: 100%; margin-left: 25px; margin-bottom: 25px; text-align: center; position: relative; z-index: 1; } .product-inner-image img { width: 100%; padding: 10px; border: 1px solid #bdbdbd47; margin-bottom: 20px; border-radius: 20px; } .product-inner-image {} .productetable { width: 100%; border-collapse: collapse; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .productetable th, .productetable td { padding: 12px 16px; text-align: center; border: 1px solid #ddd; } .productetable tr:nth-child(even) { background-color: #f9f9f9; } .productetable tr:hover { background-color: #e6f4fa; } .productetable td:first-child { font-weight: bold; background-color: #2d2b82; color: white; text-align: left; white-space: nowrap; } .productetable td { font-size: 15px; } .productetable tr:first-child td { background-color: #ff7025; color: #fff; font-weight: bold; font-size: 16px; } @media screen and (max-width: 768px) { .productetable td, .productetable th { font-size: 14px; padding: 10px; } } .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .cp-news-are { margin: 70px 0px; } .blogs .cp-news4-item { background-color: #fff } .blogs img { padding: 20px } .industries-card { border-radius: 5px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); overflow: hidden; transition: transform 0.4s ease, box-shadow 0.4s ease; position: relative; height: 590px; } .industries-card:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); } .industries-card img { width: 100%; height: auto; transition: transform 0.5s ease; border-radius: 20px 20px 0 0; } .industries-card:hover img { transform: scale(1.02); } .industries-card .pbmit-portfolio-title { font-size: 1.1rem; font-weight: 700; color: #2c3e50; text-transform: capitalize; text-decoration: none; display: inline-block; transition: color 0.3s ease; } .industries-card .pbminfotech-box-content { padding: 20px; text-align: center; background: #fff; } .image-anime { position: relative; overflow: hidden; } .image-anime:after { content: ""; position: absolute; width: 200%; height: 0%; left: 50%; top: 50%; background-color: rgba(255, 255, 255, .3); transform: translate(-50%, -50%) rotate(-45deg); z-index: 1; } .image-anime:hover:after { height: 250%; transition: all 600ms linear; background-color: transparent; } .image-anime { position: relative; overflow: hidden; } .image-anime:after { content: ""; position: absolute; width: 200%; height: 0%; left: 50%; top: 50%; background-color: rgba(255, 255, 255, .3); transform: translate(-50%, -50%) rotate(-45deg); z-index: 1; } .image-anime:hover:after { height: 250%; transition: all 600ms linear; background-color: transparent; } .cp-news-are .image-anime { position: relative; overflow: hidden; } .cp-news-are .image-anime:after { content: ""; position: absolute; width: 200%; height: 0%; left: 50%; top: 50%; background-color: rgba(255, 255, 255, .3); transform: translate(-50%, -50%) rotate(-45deg); z-index: 1; } .cp-news-are .image-anime:hover:after { height: 250%; transition: all 600ms linear; background-color: transparent; } .cp-news4-content { padding: 0 0 0 20px; } .cp-news4-content .btn-default { padding: 15px 60px 15px 22px !important; } .cp-news4-title { font-size: 20px; text-transform: capitalize } .cp-news4-title a { -webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s; color: #000 } .about-unique-section { position: relative; background: linear-gradient(135deg, #ffffff 65%, #f26522 65%); padding: 100px 0; overflow: hidden; } .about-unique-section .image-column { position: relative; text-align: center; } .about-unique-section .main-img { width: 90%; border-radius: 20px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); max-width: 100%; height: auto; } .about-unique-section .floating-img { position: absolute; bottom: -40px; right: 10%; width: 50%; border: 6px solid #fff; border-radius: 15px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); z-index: 2; } .about-unique-section .badge-box { position: absolute; bottom: 8px; right: 150px; background: #f26522; color: #fff; padding: 15px 25px; border-radius: 50px; font-weight: 600; font-size: 20px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); z-index: 3; white-space: nowrap; } .about-unique-section .content-column { background-color: #ffffff; border-radius: 12px; padding: 20px; animation: fadeInRight 1s ease forwards; overflow: scroll; overflow-x: hidden; height: 500px; } .about-unique-section .content-column h2 { font-size: 36px; font-weight: 700; color: #222; margin-bottom: 20px; } .about-unique-section .content-column h2 span { color: #f26522; } .about-unique-section .content-column p { font-size: 16px; line-height: 1.8; color: #444; margin-bottom: 20px; text-align: justify; } /* Animation */ @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(50px); } 100% { opacity: 1; transform: translateX(0); } } /* Tablet Breakpoint */ @media (max-width: 991.98px) { .about-unique-section { padding: 70px 20px; background: linear-gradient(135deg, #ffffff 70%, #f26522 70%); } .about-unique-section .badge-box { font-size: 18px; padding: 12px 20px; right: -20px; top: 10px; } .about-unique-section .main-img { width: 100%; } .about-unique-section .content-column h2 { font-size: 30px; } } /* Mobile Breakpoint */ @media (max-width: 767.98px) { .about-unique-section { padding: 50px 15px; background: #ffffff; } .about-unique-section .badge-box { top: -50px; right: auto; left: 50%; transform: translateX(-50%); font-size: 16px; padding: 10px 15px; } .about-unique-section .floating-img { display: none; } .about-unique-section .content-column h2 { font-size: 26px; } .about-unique-section .content-column { padding: 15px; } } /* Smooth Scroll for content */ .about-unique-section .content-column { scroll-behavior: smooth; scrollbar-width: thin; /* Firefox */ scrollbar-color: #033399 #f5f5f5; /* Firefox */ } /* Chrome, Edge, Safari scrollbar styling */ .about-unique-section .content-column::-webkit-scrollbar { width: 8px; } .about-unique-section .content-column::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 10px; } .about-unique-section .content-column::-webkit-scrollbar-thumb { background: #f26522; border-radius: 10px; } .about-unique-section .content-column::-webkit-scrollbar-thumb:hover { background: #e0581f; } @media (max-width: 767.98px) { .about-unique-section .content-column { height: auto; max-height: unset; overflow: visible; } } section { min-height: auto !important; } .vision-mission-section { padding: 50px 0; background: #f8f8f8; position: relative; overflow: hidden; } .vm-card { background: #fff; border-radius: 20px; padding: 30px; margin-bottom: 30px; /* 🔧 Adds gap between stacked cards */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); transition: transform 0.3s ease; } .vm-card:hover { transform: translateY(-10px); } .vm-icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; } .vm-icon img { width: 100px; height: 100px; } .vm-card h3 { font-size: 24px; color: #222; font-weight: 700; margin-bottom: 15px; position: relative; padding-bottom: 10px; } .vm-card h3::after { content: ""; width: 50px; height: 3px; background-color: #f26522; position: absolute; left: 0; bottom: 0; } .vm-card p { font-size: 16px; color: #555; line-height: 1.8; } .vision-card { border-left: 6px solid #f26522; } .mission-card { border-left: 6px solid #1a73e8; } /* Responsive */ @media (max-width: 767.98px) { .vm-card { padding: 30px 20px; } .vm-card h3 { font-size: 20px; } .vm-card p { font-size: 15px; } .vm-icon { width: 50px; height: 50px; } .vm-icon img { width: 24px; height: 24px; } } .gallery { padding: 50px 0; } .gallery-item { position: relative; overflow: hidden; border-radius: 6px; } .gallery-item::before { content: ""; position: absolute; top: 0; left: 0; height: 92%; width: 95%; background: rgba(0, 0, 0, 0.4); opacity: 0; transform: scale(0.8); transition: 0.5s; margin: auto; } .gallery-item:hover::before { opacity: 1; transform: scale(1); } .gallery-item a { display: block; width: 100%; position: relative; } .gallery-item a::before, .gallery-item a::after { content: ""; position: absolute; width: 40%; height: 40%; opacity: 0; transition: 0.5s; } .gallery-item a::before { top: 10%; left: 7%; border-left: 2px solid #f26522; border-top: 2px solid #f26522; } .gallery-item a::after { bottom: 10%; right: 7%; border-bottom: 2px solid #f26522; border-right: 2px solid #f26522; } .gallery-item:hover a::before, .gallery-item:hover a::after { width: 86%; height: 80%; opacity: 0.7; } .gallery-item img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 0.4s ease; } .gallery-item .overlay { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 0.4s ease; z-index: 1; } .gallery-item i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; color: #fff; background-color: #f6811a; width: 45px; height: 45px; line-height: 45px; text-align: center; border-radius: 50%; opacity: 0; transition: 0.4s ease; z-index: 2; } .gallery-item:hover img { transform: scale(1.05); } .gallery-item:hover i { opacity: 1; } .gallery-item:hover .overlay, .gallery-item:hover i { opacity: 1; } .about-one__left { position: relative; display: block; max-width: 570px; width: 100%; z-index: 1; } .about-one__left .shape1 { position: absolute; top: 80px; right: 30px; z-index: -1; } .about-one__left-img { position: relative; display: block; width: 100%; overflow: hidden; } .about-one__left-img::before { position: absolute; top: 0; left: -100%; display: block; content: ''; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .3) 100%); transform: skewX(25deg); z-index: 2; } .about-one__left-img:hover:before { -webkit-animation: shine 1.5s; animation: shine 1.5s; } .about-one__left-img img { width: 100%; } .about-one__left-bottom { position: relative; display: flex; align-items: center; justify-content: space-between; } .about-one__logo { position: relative; display: block; } .about-one__logo img { width: 100%; } .about-one__video-gallery { position: relative; display: block; } .about-one__video-gallery::before { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 198px; height: 216px; border-bottom-right-radius: 11px; content: ""; } .about-one__video-gallery img { width: 100%; } .about-one__video-gallery .video-box { position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: flex; align-items: center; justify-content: center; } .about-one__video-gallery .video-box a { position: relative; display: inline-block; width: 45px; height: 45px; background: #ffffff; text-align: center; line-height: 45px; border-radius: 50%; color: var(--thm-base); font-size: 15px; transition: all 500ms ease; } .about-one__video-gallery .video-box a:hover { background-color: #e42032; /* Replace with your actual base color */ color: #ffffff; } .about-one__video-gallery .video-box a::before, .about-one__video-gallery .video-box a::after { width: 45px; height: 45px; border-radius: 50%; background: transparent; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-animation-delay: .9s; animation-delay: .9s; content: ""; position: absolute; box-shadow: 0 0 0 0 rgb(255 255 255 / 60%); -webkit-animation: ripple 3s infinite; animation: ripple 3s infinite; transition: all .4s ease; } .about-one__video-gallery .video-box a::after { -webkit-animation-delay: .6s; animation-delay: .6s; } .about-establishment { margin-top: 20px; font-size: 125px; line-height: 1; font-weight: 800 } .about_hc { font-size: 32px; line-height: 1.3em; font-weight: 600 } .about-one--about .about-one__video-gallery img { width: 100%; border-radius: 12px; display: none } .stroke { -webkit-text-stroke-width: 4px; -webkit-text-stroke-color: #b22d30; color: transparent; text-shadow: 6px 2px 2px rgb(68 68 68 / 15%) } .about-one__author-box { position: relative; display: flex; align-items: center; margin-top: 18px; } .about-one__author-box .img-box { position: relative; display: block; } .about-one__author-box .title { position: relative; display: block; padding-left: 30px; } .about-one__author-box .title h3 { color: #2e2e36; font-size: 22px; line-height: 32px; } .about-one__author-box .title p { margin: 0; } .about-one__author-box .title h5 { position: relative; display: inline-block; color: #2e2e36; font-size: 18px; line-height: 32px; font-weight: 800; padding-left: 45px; } .about-one__author-box .title h5::before { position: absolute; top: 15px; left: 0; width: 30px; height: 3px; background-color: #e42032; content: ""; } .about-one__btn { position: relative; display: block; margin-top: 50px; } .about-one--about { position: relative; display: block; padding: 120px 0px 120px; } .about-one--about__big-title { position: absolute; top: 255px; right: -305px; transform: rotate(-90deg); } .about-one--about__big-title h2 { color: #1A1A1A; font-size: 165px; line-height: 0.8em; font-weight: 800; letter-spacing: -0.036em; opacity: 0.05; } .theme-color1 { color: #2d2b82!important } .theme-color2 { color: #2d2b82!important } .section-title__title { font-size: 47px; /* line-height: 3em; */ /* font-weight: 800; */ text-transform: uppercase; letter-spacing: 0.6px; text-align: center; color: #dd5f15; } /* Card container */ .industry-card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; text-align: center; height: 100%; position: relative; overflow: visible; /* ⬅️ Allow image to float above card */ z-index: 1; } /* Image wrapper */ .industry-card .icon-wrap { transition: transform 0.3s ease, filter 0.3s ease; background-color: #fff; z-index: 2; position: relative; border-radius: 12px; } /* Caption text (hidden by default) */ .industry-card .caption { margin-top: -40px; font-weight: 600; color: #333; opacity: 0; transform: translateY(10px); transition: all 0.3s ease; } /* Hover Effects */ .industry-card:hover { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); } .industry-card:hover .icon-wrap { transform: translateY(-50px) scale(1.05); filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.1)); } .industry-card:hover .caption { opacity: 1; transform: translateY(0); } .industries-section{ padding: 70px 0; } .client-section .client-logo .item { transition: transform 200ms cubic-bezier(.785, .135, .15, .86), box-shadow 200ms cubic-bezier(.785, .135, .15, .86); margin-bottom: 15px; background-color: #fff; border: 1px solid #efeeee94; /* background-color: #ddd; */ padding: 5px; } .client-section .client-logo .item:hover { -ms-transform: translateY(-5px); transform: translateY(-5px); } .client-section .client-logo img { width: 100%; margin: 0 auto; height: 100px; object-fit: contain; } .client-section .client-logo img:hover { opacity: 1; transition: all 0.3s ease-in-out 0s; } .client-section{ padding: 40px 0px; background-image: url(../images/contact-bg.jpg); } .contact-page { margin: 60px 0; } .contact-page .box { background: #ffffff; border: 1px solid #d4e0d3; border-bottom: 5px solid #303030; box-shadow: 1px 2px 15px 3px rgb(0 0 0 / 5%); height: 100%; border-radius: 20px; } .contact-page .box .icon { background: #ffffff; width: 90px; height: 90px; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 1px 2px 15px 3px rgb(0 0 0 / 10%); border-radius: 100%; margin: 0 auto; margin-top: -45px; display: inline-flex; justify-content: center; align-items: center; } .contact-page .box .icon svg { width: 40px; height: 40px; } .contact-page .box .content { padding: 35px 10px; line-height: 150%; } .contact-page .box .content .title { font-size: 18px; font-weight: 600; margin: 0 0 10px 0; color: #212121; text-transform: uppercase; } .contact-page .box .content a { color: #666666; } .contact-page .box .content a:hover { color: #000000; } .contact-page .iframe-loc { margin-top: 65px; padding: 10px; border: 1px solid rgba(0, 0, 0, 0.15); } .contact-page .iframe-loc iframe { height: 400px; } .inquiry-page{ padding: 70px 0; } .inquiry-page .form-content { border: 2px solid #013f81; padding: 30px; border-radius: 20px; } .inquiry-page .desc { color: #cecece; font-size: 18px; line-height: 180%; margin: 30px 0 55px 0; } .inquiry-page .form-title { font-size: 27px; font-weight: 700; color: #000000; padding: 0 0 20px 0; margin: 0; } .inquiry-page .form-group { margin-bottom: 25px; } .inquiry-page .form-control { color: #000; width: 100%; height: 60px; border: none; padding-left: 25px; border-radius: 10px; background-color: transparent; border: 1px solid #0000001a; } .inquiry-page .form-control:focus { color: #495057; outline: 0; -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); box-shadow: none; border-color: #041c40; } .inquiry-page textarea.form-control { height: 120px; padding-top: 15px; } .inquiry-page .form-control::input-placeholder { color: #000; } .inquiry-page .form-control::-webkit-input-placeholder { color: #000; } .inquiry-page .form-control::-moz-input-placeholder { color: #000; } .inquiry-page .form-group .cm-btn { background-color: transparent; color: #000; padding: 18px 30px !important; border: 2px solid #1e55a2; width: 40%; } .inquiry-page .form-group .cm-btn:hover { background-color: #1e55a2; color: #fff; } .iti { display: block !important; } .cm-btn { position: relative; background: #0490e0; color: #fff; padding: 18px 25px; text-align: center; margin: 0; border: 0 solid transparent; cursor: pointer; display: inline-block; white-space: nowrap; min-width: 150px; height: auto; font-size: 16px; font-weight: 500; line-height: 100%; text-transform: inherit; letter-spacing: 0; -webkit-border-radius: 0px; border-radius: 10px; -webkit-box-shadow: none; box-shadow: none; text-transform: uppercase; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; overflow: hidden; z-index: 1; } .cm-btn:before { background-color: transparent; display: block; position: absolute; left: 0; top: 0; height: 100%; width: 0; z-index: -1; content: ""; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .cm-btn:hover:before { background-color: #596c92 !important; color: #fff; bottom: 0; top: auto; width: 100%; opacity: 1; } .cm-btn:hover { color: #ffffff; } body{ background-color: transparent; } .tags ul li { position: relative; /* Needed for absolute positioning of ::after */ padding-left: 25px; /* To make space for the icon on the left */ margin-bottom: 8px; /* Some spacing */ color: #333; /* Text color */ font-size: 13px; /* Adjust font size */ list-style: none; } .tags ul li::after { content: '\f453'; /* Unicode for FontAwesome "angle-right" icon */ font-family: 'FontAwesome'; position: absolute; left: 0; /* Position icon on the left */ top: 50%; transform: translateY(-50%); color: #007bff; /* Icon color, e.g., blue */ font-size: 15px; /* Icon size */ } .tags{ padding: 50px 0; } .modal-open .modal { z-index: 99999; } .inquiry-popup .form-group { margin: 0 0 20px 0; } .inquiry-popup .form-group label { font-weight: bold; color: #212121; margin-bottom: 5px; font-size: 14px; } .inquiry-popup .form-group label.error { color: red; } .inquiry-popup .form-control { background: #ffffff; border-width: 1px; border-style: solid; border-color: rgba(0, 0, 0, 0.15); color: #666666; font-size: 16px; font-weight: 400; box-shadow: none; outline: none; transition: all 0.5s ease-in-out; padding: 10px 18px; border-radius: 0; height: auto; } .inquiry-popup textarea.form-control { resize: none; height: 100px; } .inquiry-popup .form-control::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.75); } .inquiry-popup .form-control:-ms-input-placeholder { color: rgba(0, 0, 0, 0.75); } .inquiry-popup .form-control::placeholder { color: rgba(0, 0, 0, 0.75); } .inquiry-popup .form-control:focus { border-color: #c52424; } .inquiry-popup .modal-header .close { position: absolute; top: 0px; right: 20px; font-size: 36px; border: none; background-color: transparent; } .inquiry-popup .modal-header .modal-title { color: #000000; font-weight: bold; } .inquiry-popup .cm-btn { background: #004c9d; color: #ffffff; border: 0; padding: 12px 25px; box-shadow: none; } .inquiry-popup .cm-btn:hover { opacity: 0.7; } .inquiry-btn { position: fixed; left: 30px; bottom: 30px; z-index: 99; } .inquiry-btn .ripple-btn { position: relative; width: 90px; height: 90px; border-radius: 100px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .inquiry-btn .ripple-btn svg { width: 40px; height: 40px; } .inquiry-btn .pinkBg { background-color: #1a95e8 !important; background-image: linear-gradient(357deg, #476887, #00aef1); } .inquiry-btn .ripple { position: absolute; width: 160px; height: 160px; z-index: -1; left: 50%; top: 50%; opacity: 0; margin: -80px 0 0 -80px; border-radius: 100px; -webkit-animation: ripple 1.8s infinite; animation: ripple 1.8s infinite; } @-webkit-keyframes ripple { 0% { opacity: 1; -webkit-transform: scale(0); transform: scale(0); } 100% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } } @keyframes ripple { 0% { opacity: 1; -webkit-transform: scale(0); transform: scale(0); } 100% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } } .inquiry-btn .ripple:nth-child(2) { animation-delay: 0.3s; -webkit-animation-delay: 0.3s; } .inquiry-btn .ripple:nth-child(3) { animation-delay: 0.6s; -webkit-animation-delay: 0.6s; } .thankyou-page .cm-icon { margin: 0 auto 15px; display: flex; justify-content: center;align-items: center; } .thankyou-page .cm-icon svg { width: 80px; height: 80px; } .thankyou-page .sm-title { margin: 10px 0 0 0; } .thankyou-page .back-btn { margin-top: 20px; } .error-page .cm-title { margin: 0 0 10px 0; } .error-page .back-btn { margin-top: 30px; }