@charset "UTF-8"; /* theme-bundle.css -- concatenazione di bootstrap.min.css + animate.css + linear.css + fontawesome.css + tm-bs-mp.css + tm-utility-classes.css + style.css */ /* Generato per ridurre le render-blocking requests (8 file CSS -> 2 in head). Se uno di questi 7 file cambia, rigenerare con: */ /* cat assets/css/bootstrap.min.css assets/css/animate.css assets/css/linear.css assets/css/fontawesome.css assets/css/tm-bs-mp.css assets/css/tm-utility-classes.css assets/css/style.css > assets/css/theme-bundle.css (poi togliere manualmente i singoli @charset ridondanti, va bene lasciarli: sono no-op innocui a meta file) */ /* custom.css resta separato e va editato direttamente per nuove personalizzazioni (non serve rigenerare nulla). */ /* ---- assets/css/bootstrap.min.css ---- */ /*! * Bootstrap v5.0.2 (https://getbootstrap.com/) * Copyright 2011-2021 The Bootstrap Authors * Copyright 2011-2021 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0))}*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-font-sans-serif);font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}hr{margin:1rem 0;color:inherit;background-color:currentColor;border:0;opacity:.25}hr:not([size]){height:1px}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2}.h1,h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){.h1,h1{font-size:2.5rem}}.h2,h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){.h2,h2{font-size:2rem}}.h3,h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){.h3,h3{font-size:1.75rem}}.h4,h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){.h4,h4{font-size:1.5rem}}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}abbr[data-bs-original-title],abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}b,strong{font-weight:bolder}.small,small{font-size:.875em}.mark,mark{padding:.2em;background-color:#fcf8e3}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#0d6efd;text-decoration:underline}a:hover{color:#0a58ca}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,pre{font-family:var(--bs-font-monospace);font-size:1em;direction:ltr;unicode-bidi:bidi-override}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:#d63384;word-wrap:break-word}a>code{color:inherit}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:#6c757d;text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]::-webkit-calendar-picker-indicator{display:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:textfield}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::file-selector-button{font:inherit}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important}.lead{font-size:1.25rem;font-weight:300}.figure{display:inline-block}.container{width:100%;padding-right:var(--bs-gutter-x,.75rem);padding-left:var(--bs-gutter-x,.75rem);margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}@media (min-width:1400px){.container{max-width:1320px}}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(var(--bs-gutter-y) * -1);margin-right:calc(var(--bs-gutter-x) * -.5);margin-left:calc(var(--bs-gutter-x) * -.5)}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}.col{flex:1 0 0%}.g-1{--bs-gutter-x:0.25rem}.g-1{--bs-gutter-y:0.25rem}.g-2{--bs-gutter-x:0.5rem}.g-2{--bs-gutter-y:0.5rem}.g-3{--bs-gutter-x:1rem}.g-3{--bs-gutter-y:1rem}.g-4{--bs-gutter-x:1.5rem}.g-4{--bs-gutter-y:1.5rem}.g-5{--bs-gutter-x:3rem}.g-5{--bs-gutter-y:3rem}@media (min-width:576px){.col-sm-6{flex:0 0 auto;width:50%}}@media (min-width:768px){.col-md-6{flex:0 0 auto;width:50%}}@media (min-width:992px){.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.33333333%}.col-lg-5{flex:0 0 auto;width:41.66666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.33333333%}}@media (min-width:1200px){.col-xl-2{flex:0 0 auto;width:16.66666667%}.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.33333333%}.col-xl-5{flex:0 0 auto;width:41.66666667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-8{flex:0 0 auto;width:66.66666667%}.col-xl-9{flex:0 0 auto;width:75%}}@media (min-width:1400px){.col-xxl-5{flex:0 0 auto;width:41.66666667%}.col-xxl-7{flex:0 0 auto;width:58.33333333%}}.table{--bs-table-bg:transparent;--bs-table-accent-bg:transparent;--bs-table-striped-color:#212529;--bs-table-striped-bg:rgba(0, 0, 0, 0.05);--bs-table-active-color:#212529;--bs-table-active-bg:rgba(0, 0, 0, 0.1);--bs-table-hover-color:#212529;--bs-table-hover-bg:rgba(0, 0, 0, 0.075);width:100%;margin-bottom:1rem;color:#212529;vertical-align:top;border-color:#dee2e6}.table>:not(caption)>*>*{padding:.5rem .5rem;background-color:var(--bs-table-bg);border-bottom-width:1px;box-shadow:inset 0 0 0 9999px var(--bs-table-accent-bg)}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.table>:not(:last-child)>:last-child>*{border-bottom-color:currentColor}.form-label{margin-bottom:.5rem}.form-control{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control[type=file]{overflow:hidden}.form-control[type=file]:not(:disabled):not([readonly]){cursor:pointer}.form-control:focus{color:#212529;background-color:#fff;border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-control::-webkit-date-and-time-value{height:1.5em}.form-control::-moz-placeholder{color:#6c757d;opacity:1}.form-control::placeholder{color:#6c757d;opacity:1}.form-control:disabled,.form-control[readonly]{background-color:#e9ecef;opacity:1}.form-control::file-selector-button{padding:.375rem .75rem;margin:-.375rem -.75rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem;color:#212529;background-color:#e9ecef;pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:1px;border-radius:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control::file-selector-button{transition:none}}.form-control:hover:not(:disabled):not([readonly])::file-selector-button{background-color:#dde0e3}.form-control::-webkit-file-upload-button{padding:.375rem .75rem;margin:-.375rem -.75rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem;color:#212529;background-color:#e9ecef;pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:1px;border-radius:0;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control::-webkit-file-upload-button{-webkit-transition:none;transition:none}}.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button{background-color:#dde0e3}textarea.form-control{min-height:calc(1.5em + (.75rem + 2px))}.btn{display:inline-block;font-weight:400;line-height:1.5;color:#212529;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:transparent;border:1px solid transparent;padding:.375rem .75rem;font-size:1rem;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn:hover{color:#212529}.btn:focus{outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.btn.disabled,.btn:disabled,fieldset:disabled .btn{pointer-events:none;opacity:.65}.fade{transition:opacity .15s linear}@media (prefers-reduced-motion:reduce){.fade{transition:none}}.fade:not(.show){opacity:0}.collapse:not(.show){display:none}.collapsing{height:0;overflow:hidden;transition:height .35s ease}@media (prefers-reduced-motion:reduce){.collapsing{transition:none}}.dropdown,.dropend,.dropstart,.dropup{position:relative}.dropdown-menu{position:absolute;z-index:1000;display:none;min-width:10rem;padding:.5rem 0;margin:0;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.dropdown-item{display:block;width:100%;padding:.25rem 1rem;clear:both;font-weight:400;color:#212529;text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0}.dropdown-item:focus,.dropdown-item:hover{color:#1e2125;background-color:#e9ecef}.dropdown-item.active,.dropdown-item:active{color:#fff;text-decoration:none;background-color:#0d6efd}.dropdown-item.disabled,.dropdown-item:disabled{color:#adb5bd;pointer-events:none;background-color:transparent}.dropdown-menu.show{display:block}.nav{display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.navbar-collapse{flex-basis:100%;flex-grow:1;align-items:center}.pagination{display:flex;padding-left:0;list-style:none}.alert{position:relative;padding:1rem 1rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}.alert-success{color:#0f5132;background-color:#d1e7dd;border-color:#badbcc}.alert-danger{color:#842029;background-color:#f8d7da;border-color:#f5c2c7}@-webkit-keyframes progress-bar-stripes{0%{background-position-x:1rem}}@keyframes progress-bar-stripes{0%{background-position-x:1rem}}.progress{display:flex;height:1rem;overflow:hidden;font-size:.75rem;background-color:#e9ecef;border-radius:.25rem}.toast{width:350px;max-width:100%;font-size:.875rem;pointer-events:auto;background-color:rgba(255,255,255,.85);background-clip:padding-box;border:1px solid rgba(0,0,0,.1);box-shadow:0 .5rem 1rem rgba(0,0,0,.15);border-radius:.25rem}.toast:not(.showing):not(.show){opacity:0}.toast.hide{display:none}.modal{position:fixed;top:0;left:0;z-index:1060;display:none;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;outline:0}.modal-backdrop{position:fixed;top:0;left:0;z-index:1040;width:100vw;height:100vh;background-color:#000}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:.5}.tooltip{position:absolute;z-index:1080;display:block;margin:0;font-family:var(--bs-font-sans-serif);font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.875rem;word-wrap:break-word;opacity:0}.tooltip.show{opacity:.9}.tooltip .tooltip-arrow{position:absolute;display:block;width:.8rem;height:.4rem}.tooltip .tooltip-arrow::before{position:absolute;content:"";border-color:transparent;border-style:solid}.tooltip-inner{max-width:200px;padding:.25rem .5rem;color:#fff;text-align:center;background-color:#000;border-radius:.25rem}.popover{position:absolute;top:0;left:0;z-index:1070;display:block;max-width:276px;font-family:var(--bs-font-sans-serif);font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.875rem;word-wrap:break-word;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem}.popover .popover-arrow{position:absolute;display:block;width:1rem;height:.5rem}.popover .popover-arrow::after,.popover .popover-arrow::before{position:absolute;display:block;content:"";border-color:transparent;border-style:solid}.popover-header{padding:.5rem 1rem;margin-bottom:0;font-size:1rem;background-color:#f0f0f0;border-bottom:1px solid rgba(0,0,0,.2);border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px)}.popover-header:empty{display:none}.popover-body{padding:1rem 1rem;color:#212529}.carousel{position:relative}.carousel.pointer-event{touch-action:pan-y}.carousel-item-next,.carousel-item-prev{display:block}.active.carousel-item-end,.carousel-item-next:not(.carousel-item-start){transform:translateX(100%)}.active.carousel-item-start,.carousel-item-prev:not(.carousel-item-end){transform:translateX(-100%)}@-webkit-keyframes spinner-border{to{transform:rotate(360deg)}}@keyframes spinner-border{to{transform:rotate(360deg)}}@-webkit-keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}.offcanvas{position:fixed;bottom:0;z-index:1050;display:flex;flex-direction:column;max-width:100%;visibility:hidden;background-color:#fff;background-clip:padding-box;outline:0;transition:transform .3s ease-in-out}@media (prefers-reduced-motion:reduce){.offcanvas{transition:none}}.offcanvas.show{transform:none}.clearfix::after{display:block;clear:both;content:""}.ratio{position:relative;width:100%}.ratio::before{display:block;padding-top:var(--bs-aspect-ratio);content:""}.ratio>*{position:absolute;top:0;left:0;width:100%;height:100%}.d-flex{display:flex!important}.d-none{display:none!important}.shadow{box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important}.border{border:1px solid #dee2e6!important}.flex-wrap{flex-wrap:wrap!important}.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.align-items-center{align-items:center!important}.m-1{margin:.25rem!important}.mt-3{margin-top:1rem!important}.mb-0{margin-bottom:0!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.p-1{padding:.25rem!important}.pb-0{padding-bottom:0!important}.text-center{text-align:center!important}.visible{visibility:visible!important}@media (min-width:1200px){.d-xl-block{display:block!important}} /* ---- assets/css/animate.css ---- */ /*! * animate.css -https://daneden.github.io/animate.css/ * Version - 3.7.2 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2019 Daniel Eden */ @-webkit-keyframes bounce { 0%,20%,53%,80%,to { -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1); animation-timing-function: cubic-bezier(.215,.61,.355,1); -webkit-transform: translateZ(0); transform: translateZ(0) } 40%,43% { -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06); animation-timing-function: cubic-bezier(.755,.05,.855,.06); -webkit-transform: translate3d(0,-30px,0); transform: translate3d(0,-30px,0) } 70% { -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06); animation-timing-function: cubic-bezier(.755,.05,.855,.06); -webkit-transform: translate3d(0,-15px,0); transform: translate3d(0,-15px,0) } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0) } } @keyframes bounce { 0%,20%,53%,80%,to { -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1); animation-timing-function: cubic-bezier(.215,.61,.355,1); -webkit-transform: translateZ(0); transform: translateZ(0) } 40%,43% { -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06); animation-timing-function: cubic-bezier(.755,.05,.855,.06); -webkit-transform: translate3d(0,-30px,0); transform: translate3d(0,-30px,0) } 70% { -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06); animation-timing-function: cubic-bezier(.755,.05,.855,.06); -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%,50%,to { opacity: 1 } 25%,75% { opacity: 0 } } @keyframes flash { 0%,50%,to { opacity: 1 } 25%,75% { opacity: 0 } } @-webkit-keyframes pulse { 0% { -webkit-transform: scaleX(1); transform: scaleX(1) } 50% { -webkit-transform: scale3d(1.05,1.05,1.05); transform: scale3d(1.05,1.05,1.05) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } @keyframes pulse { 0% { -webkit-transform: scaleX(1); transform: scaleX(1) } 50% { -webkit-transform: scale3d(1.05,1.05,1.05); transform: scale3d(1.05,1.05,1.05) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scaleX(1); transform: scaleX(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) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } @keyframes rubberBand { 0% { -webkit-transform: scaleX(1); transform: scaleX(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) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } @-webkit-keyframes shake { 0%,to { -webkit-transform: translateZ(0); transform: translateZ(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%,to { -webkit-transform: translateZ(0); transform: translateZ(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 headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0) } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg) } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg) } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg) } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg) } 50% { -webkit-transform: translateX(0); transform: translateX(0) } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0) } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg) } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg) } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg) } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg) } 50% { -webkit-transform: translateX(0); transform: translateX(0) } } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg) } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg) } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg) } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg) } to { -webkit-transform: rotate(0deg); transform: rotate(0deg) } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg) } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg) } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg) } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg) } to { -webkit-transform: rotate(0deg); transform: rotate(0deg) } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing } @-webkit-keyframes tada { 0% { -webkit-transform: scaleX(1); transform: scaleX(1) } 10%,20% { -webkit-transform: scale3d(.9,.9,.9) rotate(-3deg); transform: scale3d(.9,.9,.9) rotate(-3deg) } 30%,50%,70%,90% { -webkit-transform: scale3d(1.1,1.1,1.1) rotate(3deg); transform: scale3d(1.1,1.1,1.1) rotate(3deg) } 40%,60%,80% { -webkit-transform: scale3d(1.1,1.1,1.1) rotate(-3deg); transform: scale3d(1.1,1.1,1.1) rotate(-3deg) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } @keyframes tada { 0% { -webkit-transform: scaleX(1); transform: scaleX(1) } 10%,20% { -webkit-transform: scale3d(.9,.9,.9) rotate(-3deg); transform: scale3d(.9,.9,.9) rotate(-3deg) } 30%,50%,70%,90% { -webkit-transform: scale3d(1.1,1.1,1.1) rotate(3deg); transform: scale3d(1.1,1.1,1.1) rotate(3deg) } 40%,60%,80% { -webkit-transform: scale3d(1.1,1.1,1.1) rotate(-3deg); transform: scale3d(1.1,1.1,1.1) rotate(-3deg) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } @-webkit-keyframes wobble { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } 15% { -webkit-transform: translate3d(-25%,0,0) rotate(-5deg); transform: translate3d(-25%,0,0) rotate(-5deg) } 30% { -webkit-transform: translate3d(20%,0,0) rotate(3deg); transform: translate3d(20%,0,0) rotate(3deg) } 45% { -webkit-transform: translate3d(-15%,0,0) rotate(-3deg); transform: translate3d(-15%,0,0) rotate(-3deg) } 60% { -webkit-transform: translate3d(10%,0,0) rotate(2deg); transform: translate3d(10%,0,0) rotate(2deg) } 75% { -webkit-transform: translate3d(-5%,0,0) rotate(-1deg); transform: translate3d(-5%,0,0) rotate(-1deg) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes wobble { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } 15% { -webkit-transform: translate3d(-25%,0,0) rotate(-5deg); transform: translate3d(-25%,0,0) rotate(-5deg) } 30% { -webkit-transform: translate3d(20%,0,0) rotate(3deg); transform: translate3d(20%,0,0) rotate(3deg) } 45% { -webkit-transform: translate3d(-15%,0,0) rotate(-3deg); transform: translate3d(-15%,0,0) rotate(-3deg) } 60% { -webkit-transform: translate3d(10%,0,0) rotate(2deg); transform: translate3d(10%,0,0) rotate(2deg) } 75% { -webkit-transform: translate3d(-5%,0,0) rotate(-1deg); transform: translate3d(-5%,0,0) rotate(-1deg) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes jello { 0%,11.1%,to { -webkit-transform: translateZ(0); transform: translateZ(0) } 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%,11.1%,to { -webkit-transform: translateZ(0); transform: translateZ(0) } 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) } } @-webkit-keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1) } 14% { -webkit-transform: scale(1.3); transform: scale(1.3) } 28% { -webkit-transform: scale(1); transform: scale(1) } 42% { -webkit-transform: scale(1.3); transform: scale(1.3) } 70% { -webkit-transform: scale(1); transform: scale(1) } } @keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1) } 14% { -webkit-transform: scale(1.3); transform: scale(1.3) } 28% { -webkit-transform: scale(1); transform: scale(1) } 42% { -webkit-transform: scale(1.3); transform: scale(1.3) } 70% { -webkit-transform: scale(1); transform: scale(1) } } @-webkit-keyframes bounceIn { 0%,20%,40%,60%,80%,to { -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) } to { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1) } } @keyframes bounceIn { 0%,20%,40%,60%,80%,to { -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) } to { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1) } } @-webkit-keyframes bounceInDown { 0%,60%,75%,90%,to { -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) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes bounceInDown { 0%,60%,75%,90%,to { -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) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes bounceInLeft { 0%,60%,75%,90%,to { -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) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes bounceInLeft { 0%,60%,75%,90%,to { -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) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes bounceInRight { 0%,60%,75%,90%,to { -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) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes bounceInRight { 0%,60%,75%,90%,to { -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) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes bounceInUp { 0%,60%,75%,90%,to { -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) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes bounceInUp { 0%,60%,75%,90%,to { -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) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @-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) } to { 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) } to { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } } @-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) } to { 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) } to { opacity: 0; -webkit-transform: translate3d(0,2000px,0); transform: translate3d(0,2000px,0) } } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px,0,0); transform: translate3d(20px,0,0) } to { 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) } to { opacity: 0; -webkit-transform: translate3d(-2000px,0,0); transform: translate3d(-2000px,0,0) } } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px,0,0); transform: translate3d(-20px,0,0) } to { 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) } to { opacity: 0; -webkit-transform: translate3d(2000px,0,0); transform: translate3d(2000px,0,0) } } @-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) } to { 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) } to { opacity: 0; -webkit-transform: translate3d(0,-2000px,0); transform: translate3d(0,-2000px,0) } } @-webkit-keyframes fadeIn { 0% { opacity: 0 } to { opacity: 1 } } @keyframes fadeIn { 0% { opacity: 0 } to { opacity: 1 } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0,-2000px,0); transform: translate3d(0,-2000px,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0,-2000px,0); transform: translate3d(0,-2000px,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px,0,0); transform: translate3d(-2000px,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px,0,0); transform: translate3d(-2000px,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px,0,0); transform: translate3d(2000px,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px,0,0); transform: translate3d(2000px,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } .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) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0,2000px,0); transform: translate3d(0,2000px,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes fadeOut { 0% { opacity: 1 } to { opacity: 0 } } @keyframes fadeOut { 0% { opacity: 1 } to { opacity: 0 } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut } @-webkit-keyframes fadeOutDown { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } } @keyframes fadeOutDown { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,2000px,0); transform: translate3d(0,2000px,0) } } @keyframes fadeOutDownBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,2000px,0); transform: translate3d(0,2000px,0) } } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } } @keyframes fadeOutLeft { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-2000px,0,0); transform: translate3d(-2000px,0,0) } } @keyframes fadeOutLeftBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-2000px,0,0); transform: translate3d(-2000px,0,0) } } @-webkit-keyframes fadeOutRight { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } } @keyframes fadeOutRight { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(2000px,0,0); transform: translate3d(2000px,0,0) } } @keyframes fadeOutRightBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(2000px,0,0); transform: translate3d(2000px,0,0) } } @-webkit-keyframes fadeOutUp { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } } @keyframes fadeOutUp { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,-2000px,0); transform: translate3d(0,-2000px,0) } } @keyframes fadeOutUpBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,-2000px,0); transform: translate3d(0,-2000px,0) } } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn); transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 40% { -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg); transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 50% { -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg); transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 80% { -webkit-transform: perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg); transform: perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } to { -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg); transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } } @keyframes flip { 0% { -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn); transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 40% { -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg); transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 50% { -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg); transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 80% { -webkit-transform: perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg); transform: perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } to { -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg); transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotateX(-5deg); transform: perspective(400px) rotateX(-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotateX(-5deg); transform: perspective(400px) rotateX(-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0 } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0 } } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotateY(-15deg); transform: perspective(400px) rotateY(-15deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0 } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotateY(-15deg); transform: perspective(400px) rotateY(-15deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0 } } @-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) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @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) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes lightSpeedOut { 0% { opacity: 1 } to { -webkit-transform: translate3d(100%,0,0) skewX(30deg); transform: translate3d(100%,0,0) skewX(30deg); opacity: 0 } } @keyframes lightSpeedOut { 0% { opacity: 1 } to { -webkit-transform: translate3d(100%,0,0) skewX(30deg); transform: translate3d(100%,0,0) skewX(30deg); opacity: 0 } } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0 } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0 } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1 } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0 } } @keyframes rotateOut { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1 } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0 } } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0 } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0 } } @-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: rotate(80deg); transform: rotate(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: rotate(60deg); transform: rotate(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 } to { -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: rotate(80deg); transform: rotate(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: rotate(60deg); transform: rotate(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 } to { -webkit-transform: translate3d(0,700px,0); transform: translate3d(0,700px,0); opacity: 0 } } @-webkit-keyframes jackInTheBox { 0% { opacity: 0; -webkit-transform: scale(.1) rotate(30deg); transform: scale(.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg) } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg) } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } } @keyframes jackInTheBox { 0% { opacity: 0; -webkit-transform: scale(.1) rotate(30deg); transform: scale(.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg) } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg) } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } } @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%,0,0) rotate(-120deg); transform: translate3d(-100%,0,0) rotate(-120deg) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%,0,0) rotate(-120deg); transform: translate3d(-100%,0,0) rotate(-120deg) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes rollOut { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%,0,0) rotate(120deg); transform: translate3d(100%,0,0) rotate(120deg) } } @keyframes rollOut { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%,0,0) rotate(120deg); transform: translate3d(100%,0,0) rotate(120deg) } } @-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 } } @-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) } } @-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) } } @-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) } } @-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) } } @-webkit-keyframes zoomOut { 0% { opacity: 1 } 50% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } to { opacity: 0 } } @keyframes zoomOut { 0% { opacity: 1 } 50% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } to { opacity: 0 } } @-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) } to { 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) } to { 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) } } @-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) } to { 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) } to { 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 } } @-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) } to { 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) } to { 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 } } @-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) } to { 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) } to { 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) } } @-webkit-keyframes slideInDown { 0% { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes slideInDown { 0% { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(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 } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes slideInRight { 0% { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes slideInRight { 0% { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes slideInUp { 0% { -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes slideInUp { 0% { -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } } @keyframes slideOutDown { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } } @keyframes slideOutLeft { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } } @keyframes slideOutRight { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } } @keyframes slideOutUp { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } } .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.delay-1s { -webkit-animation-delay: 1s; animation-delay: 1s } .animated.delay-2s { -webkit-animation-delay: 2s; animation-delay: 2s } .animated.delay-3s { -webkit-animation-delay: 3s; animation-delay: 3s } .animated.delay-4s { -webkit-animation-delay: 4s; animation-delay: 4s } .animated.delay-5s { -webkit-animation-delay: 5s; animation-delay: 5s } .animated.fast { -webkit-animation-duration: .8s; animation-duration: .8s } .animated.faster { -webkit-animation-duration: .5s; animation-duration: .5s } .animated.slow { -webkit-animation-duration: 2s; animation-duration: 2s } .animated.slower { -webkit-animation-duration: 3s; animation-duration: 3s } @media (prefers-reduced-motion:reduce),(print) { .animated { -webkit-animation-duration: 1ms!important; animation-duration: 1ms!important; -webkit-transition-duration: 1ms!important; transition-duration: 1ms!important; -webkit-animation-iteration-count: 1!important; animation-iteration-count: 1!important } } /* ---- assets/css/linear.css ---- */ @font-face { font-family: 'linearicons-free'; src: url('../fonts/linearicons-free.eot?4l2k0u'); src: url('../fonts/linearicons-free.eot?4l2k0u#iefix') format('embedded-opentype'), url('../fonts/linearicons-free.ttf?4l2k0u') format('truetype'), url('../fonts/linearicons-free.woff?4l2k0u') format('woff'), url('../fonts/linearicons-free.svg?4l2k0u#linearicons-free') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } [class^="lnr-"], [class*=" lnr-"] { font-family: 'linearicons-free'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .lnr-icon-clock:before { content: "\e864"; } .lnr-icon-envelope1:before { content: "\e037"; } /* ---- assets/css/fontawesome.css ---- */ /*! * Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license (Commercial License) */ .fa { font-family: "Font Awesome 6 Pro"; font-family: var(--fa-style-family, "Font Awesome 6 Pro"); font-weight: 900; font-weight: var(--fa-style, 900); } .fa, .fa-solid, .far, .fa-brands { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; display: var(--fa-display, inline-block); font-style: normal; font-variant: normal; text-rendering: auto; } @-webkit-keyframes fa-beat { 0%, 90% { -webkit-transform: scale(1); transform: scale(1); } 45% { -webkit-transform: scale(1.25); transform: scale(1.25); -webkit-transform: scale(var(--fa-beat-scale, 1.25)); transform: scale(var(--fa-beat-scale, 1.25)); } } @keyframes fa-beat { 0%, 90% { -webkit-transform: scale(1); transform: scale(1); } 45% { -webkit-transform: scale(1.25); transform: scale(1.25); -webkit-transform: scale(var(--fa-beat-scale, 1.25)); transform: scale(var(--fa-beat-scale, 1.25)); } } @-webkit-keyframes fa-fade { 50% { opacity: 0.4; opacity: var(--fa-fade-opacity, 0.4); } } @keyframes fa-fade { 50% { opacity: 0.4; opacity: var(--fa-fade-opacity, 0.4); } } @-webkit-keyframes fa-flash { 0%, 100% { opacity: 0.4; opacity: var(--fa-flash-opacity, 0.4); -webkit-transform: scale(1); transform: scale(1); } 50% { opacity: 1; -webkit-transform: scale(1.125); transform: scale(1.125); -webkit-transform: scale(var(--fa-flash-scale, 1.125)); transform: scale(var(--fa-flash-scale, 1.125)); } } @keyframes fa-flash { 0%, 100% { opacity: 0.4; opacity: var(--fa-flash-opacity, 0.4); -webkit-transform: scale(1); transform: scale(1); } 50% { opacity: 1; -webkit-transform: scale(1.125); transform: scale(1.125); -webkit-transform: scale(var(--fa-flash-scale, 1.125)); transform: scale(var(--fa-flash-scale, 1.125)); } } @-webkit-keyframes fa-flip { 50% { -webkit-transform: rotate3d(0, 1, 0, -180deg); transform: rotate3d(0, 1, 0, -180deg); -webkit-transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); } } @keyframes fa-flip { 50% { -webkit-transform: rotate3d(0, 1, 0, -180deg); transform: rotate3d(0, 1, 0, -180deg); -webkit-transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); } } @-webkit-keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons */ .fa-angle-down::before { content: "\f107"; } .fa-angle-left::before { content: "\f104"; } .fa-angle-right::before { content: "\f105"; } .fa-bullseye::before { content: "\f140"; } .fa-chart-line::before { content: "\f201"; } .fa-circle-check::before { content: "\f058"; } .fa-circle-xmark::before { content: "\f057"; } .fa-clipboard-check::before { content: "\f46c"; } .fa-clock::before { content: "\f017"; } .fa-envelope::before { content: "\f0e0"; } .fa-globe::before { content: "\f0ac"; } .fa-magnifying-glass::before { content: "\f002"; } .fa-minus::before { content: "\f068"; } .fa-plus::before { content: "\f067"; } .fa-star::before { content: "\f005"; } .fa-tags::before { content: "\f02c"; } .fa-times::before { content: "\f00d"; } @font-face { font-family: 'Font Awesome 6 Brands'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/fa-brands-400.woff2") format("woff2"), url("../fonts/fa-brands-400.woff") format("woff"), url("../fonts/fa-brands-400.ttf") format("truetype"); } .fa-brands { font-family: 'Font Awesome 6 Brands'; font-weight: 400; } .fa-google:before { content: "\f1a0"; } .fa-linkedin-in:before { content: "\f0e1"; } @font-face { font-family: 'Font Awesome 6 Duotone'; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/fa-duotone-900.woff2") format("woff2"), url("../fonts/fa-duotone-900.woff") format("woff"), url("../fonts/fa-duotone-900.ttf") format("truetype"); } @font-face { font-family: 'Font Awesome 6 Pro'; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/fa-light-300.woff2") format("woff2"), url("../fonts/fa-light-300.woff") format("woff"), url("../fonts/fa-light-300.ttf") format("truetype"); } @font-face { font-family: 'Font Awesome 6 Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/fa-regular-400.woff2") format("woff2"), url("../fonts/fa-regular-400.woff") format("woff"), url("../fonts/fa-regular-400.ttf") format("truetype"); } .far { font-family: 'Font Awesome 6 Pro'; font-weight: 400; } @font-face { font-family: 'Font Awesome 6 Pro'; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/fa-solid-900.woff2") format("woff2"), url("../fonts/fa-solid-900.woff") format("woff"), url("../fonts/fa-solid-900.ttf") format("truetype"); } .fa-solid { font-family: 'Font Awesome 6 Pro'; font-weight: 900; } @font-face { font-family: 'Font Awesome 6 Pro'; font-style: normal; font-weight: 100; font-display: swap; src: url("../fonts/fa-thin-100.woff2") format("woff2"), url("../fonts/fa-thin-100.woff") format("woff"), url("../fonts/fa-thin-100.ttf") format("truetype"); } /* ---- assets/css/tm-bs-mp.css ---- */ /* * ThemeMascot custom-bootstrap-margin-padding * ----------------------------------------------- */ /* Margin */ .mt-30 { margin-top: 30px !important; } .mt-40 { margin-top: 40px !important; } .mt-60 { margin-top: 60px !important; } .mb-20 { margin-bottom: 20px !important; } .mb-30 { margin-bottom: 30px !important; } .mb-40 { margin-bottom: 40px !important; } .mb-60 { margin-bottom: 60px !important; } /* Padding */ /* ---- assets/css/tm-utility-classes.css ---- */ /* * ThemeMascot Utility Classes * ----------------------------------------------- */ /* -------- Font Size ---------- */ /* -------- Text Colors ---------- */ /* Text Black & Gray Color*/ /* Text White Color*/ /* -------- Solid Color Background ---------- */ /* Bg White Color*/ /* -------- Transparent Background Color ---------- */ /* -------- box-shadow ---------- */ /* -------- Letter Spacing ---------- */ /* -------- z-index ---------- */ /* -------- Font Weight ---------- */ /* -------- Line Height ---------- */ /* -------- Border ---------- */ /* -------- Border Outline---------- */ /* -------- Background Image ---------- */ /* -------- Absolute Image Positioning ---------- */ /* ---- assets/css/style.css ---- */ /* Gencyo – Digital Agency, SEO & IT Solutions HTML Template Template Name: Gencyo Version: 1.0.0 License: copyright commercial /************ TABLE OF CONTENTS *************** 1. Fonts 2. Reset 3. Global Settings 4. Main Header / TWO / Three / Four / Five 5. Sticky Header 6. Mobile Menu 7. Section Title 8. Page Title 9. Main Slider 10. Banner Section / Two / Three / Four 11. Features Section / Two / Three / Four / Five / Six 12. About Section / Two / Three / Four / Five / Six 13. Services Section / Two / Three / Four / Five 14. Map Section 15. Call To Action / Two / Three / Four / Five 16. Locations Section / Two 17. Offer Section / Two / Three / Four 18. FAQ's Sectiom / Two 19. Work Section 20. Fun Fact Section / Two 21. Project Section / Two / Three 22. Testimonial Section / Two / Three / Four 23. Why Choose Us / Two / Three 24. Industries Section 25. Pricing Section 26. team Section / Two 27. Contact Sectiom / Two / Three / Four 28. News Section / Two 29. Clients Section 30. Main Footer **********************************************/ /* Questi @import sono stati spostati in diretti nell' di ogni pagina HTML (stesso ordine, per preservare la cascata) perché @import in CSS forza il browser a scaricarli in serie invece che in parallelo, bloccando il rendering. */ :root { --theme-color1: #FF6B1E; --theme-color2: #151515; --theme-color3: #0D0D0D; --theme-color1-rgb: 255, 107, 30; --theme-color2-rgb: 21, 21, 21; --theme-color3-rgb: 13, 13, 13; --theme-color1-text-color: #fff; --theme-color2-text-color: #fff; --theme-color3-text-color: #fff; --body-bg: #0D0D0D; --theme-color-white: #ffffff; --bg-color: #151515; --theme-color-white-rgb: 255, 255, 255; --theme-color-silver: #eee; --theme-color-black: #000000; --theme-color-black-rgb: 0, 0, 0; --bg-theme-color1: var(--theme-color1); --bg-theme-color2: var(--theme-color2); --bg-theme-color3: var(--theme-color3); --border-color1-rgba: rgba(255, 255, 255, 0.2); --border-color2-rgba: rgba(255, 255, 255, 0.13); --text-color: #7A7A7A; --headings-color: #FFFFFF; --link-color: var(--theme-color1); --link-hover-color: var(--theme-color2); --body-font-family: "Beatrice Trial", sans-serif; --heading-font-family: "Beatrice Trial", sans-serif; --body-font-size: 16px; --body-line-height: 1.9; --body-font-weight: 400; --line-height-heading-h1: 100%; --line-height-heading: 120%; --line-height-heading-small: 1.4em; --h1-font-size: 100px; --h2-font-size: 50px; --h3-font-size: 30px; --h4-font-size: 24px; --h5-font-size: 20px; --h6-font-size: 16px; --h1-font-weight: 700; --h2-font-weight: 500; --h3-font-weight: 400; --h4-font-weight: 500; --h5-font-weight: 600; --h6-font-weight: 700; --sec-title-subtitle-color: #7e8596; --sec-title-subtitle-font-size: 16px; --sec-title-subtitle-font-weight: 500; --sec-title-subtitle-line-height: 1; --sec-title-color: var(--headings-color); --sec-title-font-size: 50px; --sec-title-font-weight: var(--h2-font-weight); --container-width: 1320px; --small-container-width: 1000px; --large-container-width: 1550px; --container-pt: 120px; --container-pb: 120px; --gradient-1: linear-gradient(90deg, #88ff2a 0%, #fff 100%); } /* * typography.scss * ----------------------------------------------- */ /* -------------------------------------------- Template Default Fonts & Fonts Styles ---------------------------------------------- */ ::-moz-selection { background: var(--theme-color1); color: #fff; text-shadow: none; } ::selection { background: var(--theme-color1); color: #fff; text-shadow: none; } ::-moz-selection { background: var(--theme-color1); /* Firefox */ color: #fff; text-shadow: none; } ::-webkit-selection { background: var(--theme-color1); /* Safari */ color: #fff; text-shadow: none; } ::-webkit-input-placeholder { color: #7c858c; } ::-moz-input-placeholder { color: #7c858c; } ::-ms-input-placeholder { color: #7c858c; } body { background-color: var(--body-bg); background-attachment: fixed; -ms-word-wrap: break-word; word-wrap: break-word; counter-reset: my-sec-counter; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; color: var(--text-color); font-size: var(--body-font-size); font-family: var(--body-font-family); line-height: var(--body-line-height); } p, .text { color: var(--text-color); font-size: var(--body-font-size); font-weight: var(--body-font-weight); line-height: var(--body-line-height); letter-spacing: -0.32px; } /* -------- Headings ---------- */ h1, h2, h3, h4, h5, h6 { color: var(--headings-color); position: relative; font-family: var(--heading-font-family); margin: 0; } h1 small, h1 .small, h2 small, h2 .small, h3 small, h3 .small, h4 small, h4 .small, h5 small, h5 .small, h6 small, h6 .small { font-weight: normal; line-height: 1; color: var(--headings-color); } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; font-weight: inherit; } h1 { font-size: var(--h1-font-size); font-weight: var(--h1-font-weight); line-height: var(--line-height-heading-h1); } h2 { font-size: var(--h2-font-size); font-weight: var(--h2-font-weight); line-height: var(--line-height-heading); } h3 { font-size: var(--h3-font-size); font-weight: var(--h3-font-weight); line-height: var(--line-height-heading); } @media (max-width: 1199.98px) { h3 { font-size: 26px; } } @media (max-width: 767.98px) { h3 { font-size: 25px; } } @media (max-width: 575.98px) { h3 { font-size: 22px; } } @media (max-width: 469.98px) { h3 { font-size: 20px; } } h4 { font-size: var(--h4-font-size); font-weight: var(--h4-font-weight); line-height: var(--line-height-heading-small); } @media (max-width: 1399.98px) { h4 { font-size: 22px; } } @media (max-width: 575.98px) { h4 { font-size: 20px; } } @media (max-width: 469.98px) { h4 { font-size: 19px; } } h5 { font-size: var(--h5-font-size); font-weight: var(--h5-font-weight); line-height: var(--line-height-heading-small); } h6 { font-size: var(--h6-font-size); font-weight: var(--h6-font-weight); line-height: var(--line-height-heading-small); } /* -------- Body Text ---------- */ table p { margin-bottom: 0; } p { padding: 0; margin: 0; } p a:not(.button):not(.btn):hover, p a:not(.button):not(.btn):focus { text-decoration: underline; } /* -------- other ---------- */ a { color: var(--link-color); text-decoration: none; font-weight: var(--body-font-weight); cursor: pointer; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } a:hover, a:focus { color: inherit; text-decoration: none; outline: none; } a b, a strong { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } a img { border: none; } pre, ul, ol, dl, dd, address, table, fieldset { margin-bottom: 10px; } ol, ul { list-style-position: inside; margin: 0; padding: 0; list-style: none; } b, strong { color: #333; font-weight: var(--body-font-weight-bold); } iframe { border: none !important; } /* * container.scss * ----------------------------------------------- */ .container .container { width: 100%; } .container .container { padding-left: 0; padding-right: 0; } @media (min-width: 1400px) { .container { max-width: var(--container-width); } } .auto-container { position: static; max-width: var(--container-width); padding: 0px 15px; margin: 0 auto; width: 100%; } /*=== Default Form ===*/ .form-control { height: calc(2.25rem + 27px); padding: 14px 30px; outline: 0; background-color: #222222; border: 1px solid #35373a; color: #686a6f; font-size: 0.9rem; width: 100%; } .form-control::-webkit-input-placeholder { color: #686a6f; opacity: 1; } .form-control::-moz-placeholder { color: #686a6f; opacity: 1; } .form-control:-ms-input-placeholder { color: #686a6f; opacity: 1; } .form-control::-ms-input-placeholder { color: #686a6f; opacity: 1; } .form-control::placeholder { color: #686a6f; opacity: 1; } .form-control:-ms-input-placeholder { color: #686a6f; } .form-control::-ms-input-placeholder { color: #686a6f; } .form-control:focus { background-color: #222222; -webkit-box-shadow: none; box-shadow: none; border: transparent; } textarea.form-control { height: auto; padding-top: 15px; padding-bottom: 15px; } /* cursorDot view ============= */ /* cursorDot drag ============= */ /* cursorDot close ============== */ /*======================= Preloader =======================*/ .preloader { position: fixed; top: 0; inset-inline-start: 0; width: 100%; height: 100%; background-color: #000; z-index: 100000000; color: #fdfdf9; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .preloader.is-loaded { pointer-events: none; } @-webkit-keyframes fade-out { 0% { opacity: 1; } 50% { opacity: 1; } to { opacity: 0; } } @keyframes fade-out { 0% { opacity: 1; } 50% { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes shadow-blur { 0% { -webkit-filter: blur(12px); filter: blur(12px); -webkit-transform: translate(-50%) scale(0.6); transform: translate(-50%) scale(0.6); opacity: 0.4; } 30% { -webkit-filter: blur(2px); filter: blur(2px); -webkit-transform: translate(-50%, -0.5rem) scale(1); transform: translate(-50%, -0.5rem) scale(1); opacity: 1; } to { -webkit-filter: blur(12px); filter: blur(12px); -webkit-transform: translate(-50%) scale(0.6); transform: translate(-50%) scale(0.6); opacity: 0.4; } } @keyframes shadow-blur { 0% { -webkit-filter: blur(12px); filter: blur(12px); -webkit-transform: translate(-50%) scale(0.6); transform: translate(-50%) scale(0.6); opacity: 0.4; } 30% { -webkit-filter: blur(2px); filter: blur(2px); -webkit-transform: translate(-50%, -0.5rem) scale(1); transform: translate(-50%, -0.5rem) scale(1); opacity: 1; } to { -webkit-filter: blur(12px); filter: blur(12px); -webkit-transform: translate(-50%) scale(0.6); transform: translate(-50%) scale(0.6); opacity: 0.4; } } @-webkit-keyframes fadeLeftToRight { 0% { -webkit-filter: blur(0); filter: blur(0); -webkit-transform: translate(0) scale(1); transform: translate(0) scale(1); opacity: 1; } 30% { -webkit-filter: blur(0); filter: blur(0); -webkit-transform: translate(-3000%, 0) scale(1); transform: translate(-3000%, 0) scale(1); opacity: 1; } 40% { -webkit-filter: blur(0); filter: blur(0); -webkit-transform: translate(-2000%, 0) scale(1); transform: translate(-2000%, 0) scale(1); opacity: 1; } 60% { -webkit-filter: blur(0); filter: blur(0); -webkit-transform: translate(0%, 0) scale(1); transform: translate(0%, 0) scale(1); opacity: 1; } to { -webkit-filter: blur(12px); filter: blur(12px); -webkit-transform: translate(1000%, 0) scale(7); transform: translate(1000%, 0) scale(7); opacity: 0.4; } } @keyframes fadeLeftToRight { 0% { -webkit-filter: blur(0); filter: blur(0); -webkit-transform: translate(0) scale(1); transform: translate(0) scale(1); opacity: 1; } 30% { -webkit-filter: blur(0); filter: blur(0); -webkit-transform: translate(-3000%, 0) scale(1); transform: translate(-3000%, 0) scale(1); opacity: 1; } 40% { -webkit-filter: blur(0); filter: blur(0); -webkit-transform: translate(-2000%, 0) scale(1); transform: translate(-2000%, 0) scale(1); opacity: 1; } 60% { -webkit-filter: blur(0); filter: blur(0); -webkit-transform: translate(0%, 0) scale(1); transform: translate(0%, 0) scale(1); opacity: 1; } to { -webkit-filter: blur(12px); filter: blur(12px); -webkit-transform: translate(1000%, 0) scale(7); transform: translate(1000%, 0) scale(7); opacity: 0.4; } } @-webkit-keyframes bounce-anim { 0% { -webkit-transform: translateY(calc(-50% - 1rem)) scaleX(1.4); transform: translateY(calc(-50% - 1rem)) scaleX(1.4); } 3% { -webkit-transform: translateY(calc(-50% - 0.95rem)) scale(1.1, 1.05); transform: translateY(calc(-50% - 0.95rem)) scale(1.1, 1.05); } 5% { -webkit-transform: translateY(calc(-50% - 0.9rem)) scale(1.2, 1.1); transform: translateY(calc(-50% - 0.9rem)) scale(1.2, 1.1); } 8% { -webkit-transform: translateY(calc(-50% - 0.8rem)) scale(0.98, 1.15); transform: translateY(calc(-50% - 0.8rem)) scale(0.98, 1.15); } 12% { -webkit-transform: translateY(calc(-50% - 0.7rem)) scale(0.95, 1.2); transform: translateY(calc(-50% - 0.7rem)) scale(0.95, 1.2); } 16% { -webkit-transform: translateY(calc(-50% - 0.5rem)) scale(0.92, 1.25); transform: translateY(calc(-50% - 0.5rem)) scale(0.92, 1.25); } 20% { -webkit-transform: translateY(calc(-50% - 0.2rem)) scale(0.9, 1.4); transform: translateY(calc(-50% - 0.2rem)) scale(0.9, 1.4); } 24% { -webkit-transform: translateY(calc(-50% + 0.4rem)) scale(0.9, 1.7); transform: translateY(calc(-50% + 0.4rem)) scale(0.9, 1.7); } 26% { -webkit-transform: translateY(calc(-50% + 0.8rem)) scale(0.9, 1.4); transform: translateY(calc(-50% + 0.8rem)) scale(0.9, 1.4); } 28% { -webkit-transform: translateY(calc(-50% + 0.95rem)) scale(1.2, 0.7); transform: translateY(calc(-50% + 0.95rem)) scale(1.2, 0.7); } 30% { -webkit-transform: translateY(calc(-50% + 1rem)) scale(1.5, 0.3); transform: translateY(calc(-50% + 1rem)) scale(1.5, 0.3); } 32% { -webkit-transform: translateY(calc(-50% + 0.8rem)) scale(1.4, 0.4); transform: translateY(calc(-50% + 0.8rem)) scale(1.4, 0.4); } 36% { -webkit-transform: translateY(calc(-50% + 0.5rem)) scale(1.2, 0.8); transform: translateY(calc(-50% + 0.5rem)) scale(1.2, 0.8); } 42% { -webkit-transform: translateY(calc(-50% + 0.2rem)) scaleY(1.2); transform: translateY(calc(-50% + 0.2rem)) scaleY(1.2); } 48% { -webkit-transform: translateY(calc(-50% - 0.2rem)) scale(0.9, 1.4); transform: translateY(calc(-50% - 0.2rem)) scale(0.9, 1.4); } 54% { -webkit-transform: translateY(calc(-50% - 0.3rem)) scale(0.92, 1.3); transform: translateY(calc(-50% - 0.3rem)) scale(0.92, 1.3); } 62% { -webkit-transform: translateY(calc(-50% - 0.5rem)) scale(0.95, 1.2); transform: translateY(calc(-50% - 0.5rem)) scale(0.95, 1.2); } 68% { -webkit-transform: translateY(calc(-50% - 0.6rem)) scale(0.97, 1.15); transform: translateY(calc(-50% - 0.6rem)) scale(0.97, 1.15); } 75% { -webkit-transform: translateY(calc(-50% - 0.7rem)) scale(0.98, 1.1); transform: translateY(calc(-50% - 0.7rem)) scale(0.98, 1.1); } 80% { -webkit-transform: translateY(calc(-50% - 0.8rem)) scale(0.99, 1.08); transform: translateY(calc(-50% - 0.8rem)) scale(0.99, 1.08); } 85% { -webkit-transform: translateY(calc(-50% - 0.9rem)) scaleY(1.05); transform: translateY(calc(-50% - 0.9rem)) scaleY(1.05); } 90% { -webkit-transform: translateY(calc(-50% - 0.95rem)) scale(1.2, 1.03); transform: translateY(calc(-50% - 0.95rem)) scale(1.2, 1.03); } 95% { -webkit-transform: translateY(calc(-50% - 0.98rem)) scale(1.1, 1.01); transform: translateY(calc(-50% - 0.98rem)) scale(1.1, 1.01); } to { -webkit-transform: translateY(calc(-50% - 1rem)) scaleX(1.4); transform: translateY(calc(-50% - 1rem)) scaleX(1.4); } } @keyframes bounce-anim { 0% { -webkit-transform: translateY(calc(-50% - 1rem)) scaleX(1.4); transform: translateY(calc(-50% - 1rem)) scaleX(1.4); } 3% { -webkit-transform: translateY(calc(-50% - 0.95rem)) scale(1.1, 1.05); transform: translateY(calc(-50% - 0.95rem)) scale(1.1, 1.05); } 5% { -webkit-transform: translateY(calc(-50% - 0.9rem)) scale(1.2, 1.1); transform: translateY(calc(-50% - 0.9rem)) scale(1.2, 1.1); } 8% { -webkit-transform: translateY(calc(-50% - 0.8rem)) scale(0.98, 1.15); transform: translateY(calc(-50% - 0.8rem)) scale(0.98, 1.15); } 12% { -webkit-transform: translateY(calc(-50% - 0.7rem)) scale(0.95, 1.2); transform: translateY(calc(-50% - 0.7rem)) scale(0.95, 1.2); } 16% { -webkit-transform: translateY(calc(-50% - 0.5rem)) scale(0.92, 1.25); transform: translateY(calc(-50% - 0.5rem)) scale(0.92, 1.25); } 20% { -webkit-transform: translateY(calc(-50% - 0.2rem)) scale(0.9, 1.4); transform: translateY(calc(-50% - 0.2rem)) scale(0.9, 1.4); } 24% { -webkit-transform: translateY(calc(-50% + 0.4rem)) scale(0.9, 1.7); transform: translateY(calc(-50% + 0.4rem)) scale(0.9, 1.7); } 26% { -webkit-transform: translateY(calc(-50% + 0.8rem)) scale(0.9, 1.4); transform: translateY(calc(-50% + 0.8rem)) scale(0.9, 1.4); } 28% { -webkit-transform: translateY(calc(-50% + 0.95rem)) scale(1.2, 0.7); transform: translateY(calc(-50% + 0.95rem)) scale(1.2, 0.7); } 30% { -webkit-transform: translateY(calc(-50% + 1rem)) scale(1.5, 0.3); transform: translateY(calc(-50% + 1rem)) scale(1.5, 0.3); } 32% { -webkit-transform: translateY(calc(-50% + 0.8rem)) scale(1.4, 0.4); transform: translateY(calc(-50% + 0.8rem)) scale(1.4, 0.4); } 36% { -webkit-transform: translateY(calc(-50% + 0.5rem)) scale(1.2, 0.8); transform: translateY(calc(-50% + 0.5rem)) scale(1.2, 0.8); } 42% { -webkit-transform: translateY(calc(-50% + 0.2rem)) scaleY(1.2); transform: translateY(calc(-50% + 0.2rem)) scaleY(1.2); } 48% { -webkit-transform: translateY(calc(-50% - 0.2rem)) scale(0.9, 1.4); transform: translateY(calc(-50% - 0.2rem)) scale(0.9, 1.4); } 54% { -webkit-transform: translateY(calc(-50% - 0.3rem)) scale(0.92, 1.3); transform: translateY(calc(-50% - 0.3rem)) scale(0.92, 1.3); } 62% { -webkit-transform: translateY(calc(-50% - 0.5rem)) scale(0.95, 1.2); transform: translateY(calc(-50% - 0.5rem)) scale(0.95, 1.2); } 68% { -webkit-transform: translateY(calc(-50% - 0.6rem)) scale(0.97, 1.15); transform: translateY(calc(-50% - 0.6rem)) scale(0.97, 1.15); } 75% { -webkit-transform: translateY(calc(-50% - 0.7rem)) scale(0.98, 1.1); transform: translateY(calc(-50% - 0.7rem)) scale(0.98, 1.1); } 80% { -webkit-transform: translateY(calc(-50% - 0.8rem)) scale(0.99, 1.08); transform: translateY(calc(-50% - 0.8rem)) scale(0.99, 1.08); } 85% { -webkit-transform: translateY(calc(-50% - 0.9rem)) scaleY(1.05); transform: translateY(calc(-50% - 0.9rem)) scaleY(1.05); } 90% { -webkit-transform: translateY(calc(-50% - 0.95rem)) scale(1.2, 1.03); transform: translateY(calc(-50% - 0.95rem)) scale(1.2, 1.03); } 95% { -webkit-transform: translateY(calc(-50% - 0.98rem)) scale(1.1, 1.01); transform: translateY(calc(-50% - 0.98rem)) scale(1.1, 1.01); } to { -webkit-transform: translateY(calc(-50% - 1rem)) scaleX(1.4); transform: translateY(calc(-50% - 1rem)) scaleX(1.4); } } @-webkit-keyframes weave-anim { 0% { -webkit-transform: translate3D(0, 0, 0) scale(1) rotateY(0); transform: translate3D(0, 0, 0) scale(1) rotateY(0); } 12% { -webkit-transform: translate3D(2px, -2px, 2px) scale(1.16) rotateY(6deg); transform: translate3D(2px, -2px, 2px) scale(1.16) rotateY(6deg); } 24% { -webkit-transform: translate3D(0, 0, 0) scale(1) rotateY(0); transform: translate3D(0, 0, 0) scale(1) rotateY(0); } 36% { -webkit-transform: translate3D(0, 0, 0) scale(1); transform: translate3D(0, 0, 0) scale(1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes weave-anim { 0% { -webkit-transform: translate3D(0, 0, 0) scale(1) rotateY(0); transform: translate3D(0, 0, 0) scale(1) rotateY(0); } 12% { -webkit-transform: translate3D(2px, -2px, 2px) scale(1.16) rotateY(6deg); transform: translate3D(2px, -2px, 2px) scale(1.16) rotateY(6deg); } 24% { -webkit-transform: translate3D(0, 0, 0) scale(1) rotateY(0); transform: translate3D(0, 0, 0) scale(1) rotateY(0); } 36% { -webkit-transform: translate3D(0, 0, 0) scale(1); transform: translate3D(0, 0, 0) scale(1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } /* * boxed-layout.scss * ----------------------------------------------- */ /*** ==================================================================== Reset ==================================================================== ***/ * { margin: 0px; padding: 0px; border: none; outline: none; font-size: 100%; } /*** ==================================================================== Global Settings ==================================================================== ***/ textarea { overflow: hidden; resize: none; } button { outline: none !important; cursor: pointer; } ul, li { list-style: none; padding: 0px; margin: 0px; } .title a { color: inherit; } .color1 { color: var(--theme-color1); } .color2 { color: var(--theme-color2); } .auto-container { position: static; max-width: var(--container-width); padding: 0px 15px; margin: 0 auto; width: 100%; } /*======================= Scroll To Top style =======================*/ /*======================= Preloader =======================*/ @-webkit-keyframes text-split { 0%, 75%, 100% { opacity: 0; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); } 25%, 50% { opacity: 1; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } } @keyframes text-split { 0%, 75%, 100% { opacity: 0; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); } 25%, 50% { opacity: 1; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } } /* background */ .fix { overflow: hidden; } @-webkit-keyframes dscroll { 100% { -webkit-transform: translateY(100vh); transform: translateY(100vh); } } @keyframes dscroll { 100% { -webkit-transform: translateY(100vh); transform: translateY(100vh); } } .transform { -webkit-transform: none !important; transform: none !important; } .btn-style-one { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: var(--theme-color1); border-radius: 50px; color: var(--theme-color1-text-color); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; overflow: hidden; padding: 14.5px 60px 14.5px 30px; position: relative; text-transform: capitalize; -webkit-transition: all 400ms ease; transition: all 400ms ease; z-index: 0; } .btn-style-one:hover .btn-arrow-left { scale: 1; } .btn-style-one:hover .btn-arrow-right { scale: 0; } .btn-style-one:hover .btn-title { -webkit-transform: translateX(30px); transform: translateX(30px); } .btn-style-one .btn-arrow-right { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: var(--theme-color-white); border-radius: 50%; color: var(--theme-color2); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-size: 15px; height: 40px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; left: auto; line-height: 1; position: absolute; right: 10px; width: 40px; -webkit-transition: all 400ms ease; transition: all 400ms ease; } .btn-style-one .btn-arrow-right i { rotate: -30deg; } .btn-style-one .btn-arrow-left { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: var(--theme-color-white); border-radius: 50%; color: var(--theme-color2); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-size: 15px; height: 40px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; line-height: 1; left: 10px; position: absolute; right: auto; scale: 0; width: 40px; -webkit-transition: all 400ms ease; transition: all 400ms ease; } .btn-style-one .btn-title { -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 100px; font-weight: 500; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; gap: 10px; text-transform: capitalize; -webkit-transition: all 400ms ease; transition: all 400ms ease; font-size: 16px; color: var(--theme-color-white); } /*** ==================================================================== Anim Icons ==================================================================== ***/ @-webkit-keyframes moveLeftRight { 0% { left: 0; } 100% { left: calc(100% - 210px); } } @keyframes moveLeftRight { 0% { left: 0; } 100% { left: calc(100% - 210px); } } @-webkit-keyframes moveRightToLeft { 0% { right: 0; } 100% { right: calc(100% - 100px); } } @keyframes moveRightToLeft { 0% { right: 0; } 100% { right: calc(100% - 100px); } } @-webkit-keyframes wind-blow { 0% { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: skewX(-2deg); transform: skewX(-2deg); } 50% { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: skewX(2deg); transform: skewX(2deg); } 100% { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: skewX(-2deg); transform: skewX(-2deg); } } @keyframes wind-blow { 0% { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: skewX(-2deg); transform: skewX(-2deg); } 50% { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: skewX(2deg); transform: skewX(2deg); } 100% { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: skewX(-2deg); transform: skewX(-2deg); } } @-webkit-keyframes float { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes float { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes bounce-y { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounce-y { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes bounce-x { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(30px); transform: translateX(30px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounce-x { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(30px); transform: translateX(30px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes zoom-one { 0% { -webkit-transform: scale(0.95); transform: scale(0.95); } 50% { -webkit-transform: scale(1.05); transform: scale(1.05); } 100% { -webkit-transform: scale(0.95); transform: scale(0.95); } } @keyframes zoom-one { 0% { -webkit-transform: scale(0.95); transform: scale(0.95); } 50% { -webkit-transform: scale(1.05); transform: scale(1.05); } 100% { -webkit-transform: scale(0.95); transform: scale(0.95); } } @-webkit-keyframes popupVideo { 70% { -webkit-box-shadow: 0 0 0 40px rgba(10, 165, 205, 0); box-shadow: 0 0 0 40px rgba(10, 165, 205, 0); } 100% { -webkit-box-shadow: 0 0 0 0 rgba(10, 165, 205, 0); box-shadow: 0 0 0 0 rgba(10, 165, 205, 0); } } @keyframes popupVideo { 70% { -webkit-box-shadow: 0 0 0 40px rgba(10, 165, 205, 0); box-shadow: 0 0 0 40px rgba(10, 165, 205, 0); } 100% { -webkit-box-shadow: 0 0 0 0 rgba(10, 165, 205, 0); box-shadow: 0 0 0 0 rgba(10, 165, 205, 0); } } @-webkit-keyframes float-bob-y { 0% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } } @keyframes float-bob-y { 0% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } } @-webkit-keyframes float-bob-x { 0% { -webkit-transform: translateX(0px); transform: translateX(30px); } 50% { -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(30px); transform: translateX(30px); } } @keyframes float-bob-x { 0% { -webkit-transform: translateX(30px); transform: translateX(30px); } 50% { -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(30px); transform: translateX(30px); } } @keyframes bounce-x { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(30px); transform: translateX(30px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } /*img-animation**********************/ @-webkit-keyframes img-anim-right { 0% { -webkit-transform: translateX(5%); transform: translateX(5%); clip-path: inset(0 0 0 100%); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); clip-path: inset(0 0 0 0); opacity: 1; } } @keyframes img-anim-right { 0% { -webkit-transform: translateX(5%); transform: translateX(5%); clip-path: inset(0 0 0 100%); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); clip-path: inset(0 0 0 0); opacity: 1; } } @-webkit-keyframes img-anim-left { 0% { -webkit-transform: translateX(-5%); transform: translateX(-5%); clip-path: inset(0 100% 0 0); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); clip-path: inset(0 0 0 0); opacity: 1; } } @keyframes img-anim-left { 0% { -webkit-transform: translateX(-5%); transform: translateX(-5%); clip-path: inset(0 100% 0 0); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); clip-path: inset(0 0 0 0); opacity: 1; } } @-webkit-keyframes img-anim-top { 0% { -webkit-transform: translateY(-5%); transform: translateY(-5%); clip-path: inset(0 0 100% 0); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); clip-path: inset(0 0 0 0); opacity: 1; } } @keyframes img-anim-top { 0% { -webkit-transform: translateY(-5%); transform: translateY(-5%); clip-path: inset(0 0 100% 0); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); clip-path: inset(0 0 0 0); opacity: 1; } } @-webkit-keyframes float-bob-y { 0% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } } @keyframes float-bob-y { 0% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } } @-webkit-keyframes float-bob-x { 0% { -webkit-transform: translateX(0px); transform: translateX(30px); } 50% { -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(30px); transform: translateX(30px); } } @keyframes float-bob-x { 0% { -webkit-transform: translateX(30px); transform: translateX(30px); } 50% { -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(30px); transform: translateX(30px); } } @-webkit-keyframes rounded { 50% { -webkit-transform: rotate(20deg); transform: rotate(20deg); } } @keyframes rounded { 50% { -webkit-transform: rotate(20deg); transform: rotate(20deg); } } @-webkit-keyframes cir36 { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes cir36 { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes spinner { to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @keyframes spinner { to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @-webkit-keyframes letters-loading { 0%, 75%, 100% { opacity: 0; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); } 25%, 50% { opacity: 1; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } } @keyframes letters-loading { 0%, 75%, 100% { opacity: 0; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); } 25%, 50% { opacity: 1; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } } @keyframes loaderspin { 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } 100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); } } @-webkit-keyframes tpswing { 0% { -webkit-transform: rotate(20deg); transform: rotate(20deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes tpswing { 0% { -webkit-transform: rotate(20deg); transform: rotate(20deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes width { 0% { width: 0%; } 100% { width: 100%; } } @-webkit-keyframes width { 0% { width: 0%; } 100% { width: 100%; } } @-webkit-keyframes loaderspin { 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } 100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); } } @-webkit-keyframes loaderpulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.2); transform: scale(1.2); } } @keyframes loaderpulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.2); transform: scale(1.2); } } @-webkit-keyframes sway_Y { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 100% { -webkit-transform: translateY(20px); transform: translateY(20px); } } @keyframes sway_Y { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 100% { -webkit-transform: translateY(20px); transform: translateY(20px); } } @-webkit-keyframes sway_YY { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 100% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes sway_YY { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 100% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes rotateOne { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(-20deg); transform: rotate(-20deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes rotateOne { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(-20deg); transform: rotate(-20deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @-webkit-keyframes animate-positive { 0% { width: 0; } } @keyframes animate-positive { 0% { width: 0; } } @-webkit-keyframes rotateAndScale { 0% { -webkit-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); } 50% { -webkit-transform: rotate(180deg) scale(0.8); transform: rotate(180deg) scale(0.8); } 100% { -webkit-transform: rotate(360deg) scale(1); transform: rotate(360deg) scale(1); } } @keyframes rotateAndScale { 0% { -webkit-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); } 50% { -webkit-transform: rotate(180deg) scale(0.8); transform: rotate(180deg) scale(0.8); } 100% { -webkit-transform: rotate(360deg) scale(1); transform: rotate(360deg) scale(1); } } @keyframes animate-positive { 0% { width: 0; } } @-webkit-keyframes float-bob-y { 0% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } } @keyframes float-bob-y { 0% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } } @-webkit-keyframes float-bob-x { 0% { -webkit-transform: translateX(0px); transform: translateX(30px); } 50% { -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(30px); transform: translateX(30px); } } @keyframes float-bob-x { 0% { -webkit-transform: translateX(30px); transform: translateX(30px); } 50% { -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(30px); transform: translateX(30px); } } @keyframes bounce-x { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(30px); transform: translateX(30px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes icon-bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 60% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } } @keyframes icon-bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 60% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } } @-webkit-keyframes bounce { 0%, 20%, 53%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translateZ(0); transform: translateZ(0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1); transform: translate3d(0, -30px, 0) scaleY(1.1); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05); transform: translate3d(0, -15px, 0) scaleY(1.05); } 80% { -webkit-transform: translateZ(0) scaleY(0.95); transform: translateZ(0) scaleY(0.95); -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 90% { -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02); transform: translate3d(0, -4px, 0) scaleY(1.02); } } @keyframes bounce { 0%, 20%, 53%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translateZ(0); transform: translateZ(0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1); transform: translate3d(0, -30px, 0) scaleY(1.1); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05); transform: translate3d(0, -15px, 0) scaleY(1.05); } 80% { -webkit-transform: translateZ(0) scaleY(0.95); transform: translateZ(0) scaleY(0.95); -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 90% { -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02); transform: translate3d(0, -4px, 0) scaleY(1.02); } } @-webkit-keyframes wobble { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg); transform: translate3d(-25%, 0, 0) rotate(-5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate(3deg); transform: translate3d(20%, 0, 0) rotate(3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg); transform: translate3d(-15%, 0, 0) rotate(-3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate(2deg); transform: translate3d(10%, 0, 0) rotate(2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg); transform: translate3d(-5%, 0, 0) rotate(-1deg); } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes wobble { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg); transform: translate3d(-25%, 0, 0) rotate(-5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate(3deg); transform: translate3d(20%, 0, 0) rotate(3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg); transform: translate3d(-15%, 0, 0) rotate(-3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate(2deg); transform: translate3d(10%, 0, 0) rotate(2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg); transform: translate3d(-5%, 0, 0) rotate(-1deg); } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); } } @-webkit-keyframes borderanimate2 { 0% { -webkit-transform: translate(-50%, -50%) scale(0.8); transform: translate(-50%, -50%) scale(0.8); } 60% { opacity: 1; } 100% { -webkit-transform: translate(-50%, -50%) scale(2.5); transform: translate(-50%, -50%) scale(2.5); opacity: 0; } } @keyframes borderanimate2 { 0% { -webkit-transform: translate(-50%, -50%) scale(0.8); transform: translate(-50%, -50%) scale(0.8); } 60% { opacity: 1; } 100% { -webkit-transform: translate(-50%, -50%) scale(2.5); transform: translate(-50%, -50%) scale(2.5); opacity: 0; } } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes animate-positive { 0% { width: 0; } } /*** ==================================================================== Main Header ==================================================================== ***/ .header-style-one .main-box .nav-outer { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; } .header-style-one .main-box .outer-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 30px; } @media (max-width: 1699.98px) { .header-style-one .main-box .outer-box { gap: 25px; } } .header-style-one .main-box .btn-style-one { padding: 20px 38px; } @media (max-width: 991.98px) { .header-style-one .main-box .btn-style-one { display: none; } } .header-1 { position: absolute; top: 0; left: 0; width: 100%; z-index: 9999; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .header-1 .container { max-width: 1680px; } .header-1 .main-menu .navigation > li > a { color: var(--theme-color-white); } .header-1 .main-menu .navigation > li > a:hover { color: var(--theme-color1); } .header-1 .main-menu .navigation > li { margin-right: 35px; } @media (max-width: 1699.98px) { .header-1 .main-menu .navigation > li { margin-right: 20px; } } .header-1 .main-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 70px; } @media only screen and (max-width: 1023px) { .header-1 .main-box { padding: 14px 0; gap: 0; } } .header-1 .ui-btn-outer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } .header-1 .mobile-nav-toggler { margin-left: 0; display: block; position: relative; width: 26px; height: 11px; } .header-1 .mobile-nav-toggler span { position: absolute; width: 100%; height: 2px; display: inline-block; -webkit-transition: all 0.3s; transition: all 0.3s; left: 0; background: #fff; overflow: hidden; } .header-1 .mobile-nav-toggler span:first-child { top: 0; background: #fff; left: 0; width: 26px; } .header-1 .mobile-nav-toggler span:nth-child(2) { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 19px; left: initial; right: 0; background: #fff; margin-top: 5px; } .header-1 .mobile-nav-toggler span:last-child { bottom: -9px; background: #fff; width: 13px; left: initial; right: 0; } .header-1 .mobile-nav-toggler.active span:first-child { -webkit-transform: rotate(45deg) translate(3px, 9px); transform: rotate(45deg) translate(3px, 9px); } .header-1 .mobile-nav-toggler.active span:nth-child(2) { opacity: 0; } .header-1 .mobile-nav-toggler.active span:last-child { -webkit-transform: rotate(-45deg) translate(3px, -9px); transform: rotate(-45deg) translate(3px, -9px); } .header-1 .mobile-nav-toggler:hover { cursor: pointer; } .header-1 .contact-btn { color: #fff; display: inline-block; background-color: var(--theme-color1); border-radius: 40px; height: 40px; line-height: 40px; padding: 0 20px; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } @media (max-width: 1699.98px) { .header-1 .contact-btn { padding: 0 16px; font-size: 14px; } } .header-1 .contact-btn:hover { background-color: #fff; color: var(--theme-color2); } @media only screen and (max-width: 1023px) { .header-1 .contact-btn { display: none; } } .main-menu { position: relative; } .main-menu .navbar-collapse { padding: 0px; } .main-menu .navigation { margin: 0px; position: relative; } .main-menu .navigation > li { float: left; margin-right: 30px; padding: 25px 0px; position: relative; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .main-menu .navigation > li:last-child { margin-right: 0; } .main-menu .navigation > li:hover:before, .main-menu .navigation > li.current:before { left: 0; width: 100%; } .main-menu .navigation > li > a { color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 16px; line-height: 30px; font-weight: 400; text-transform: capitalize; opacity: 1; padding: 0; position: relative; text-align: center; -webkit-transition: all 300ms ease; transition: all 300ms ease; font-family: var(--body-font-family); } @media (max-width: 1899.98px) { .main-menu .navigation > li > a { font-size: 15px; } } .main-menu .navigation > li > a .icon { position: relative; font-size: 22px; line-height: 24px; margin-left: 10px; } .main-menu .navigation > li > a:hover { color: var(--theme-color1); } .main-menu .navigation > li.current > a { font-weight: 400; } .main-menu .navigation > li.dropdown:hover > ul { margin-top: 0; opacity: 1; top: 100%; -webkit-transition: all 300ms ease; transition: all 300ms ease; visibility: visible; } .main-menu .navigation > li > ul { background-color: var(--body-bg); -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); display: none; left: 0px; margin-top: 30px; opacity: 0; padding: 10px 0 0; position: absolute; top: 100%; width: 220px; border-radius: 16px; z-index: 100; } .main-menu .navigation > li > ul > li { position: relative; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .main-menu .navigation > li > ul > li:last-child { border-bottom: none; } .main-menu .navigation > li > ul > li > a { position: relative; display: block; padding: 10px 0px; line-height: 29px; font-weight: 400; font-size: 16px; color: #fff; text-align: left; font-family: var(--body-font-family); margin: 0 30px; text-transform: capitalize; -webkit-transition: all 200ms ease; transition: all 200ms ease; } .main-menu .navigation > li > ul > li:hover > a { color: var(--theme-color1); } .main-menu .navigation > li > ul > li.dropdown > a:after { font-family: "Font Awesome 5 Free"; content: "\f105"; position: absolute; right: 0; top: 11px; display: block; line-height: 24px; font-size: 11px; font-weight: 600; z-index: 5; } .main-menu .navigation > li > ul > li.dropdown:hover > ul { visibility: visible; opacity: 1; top: 0px; margin-top: 20px; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .main-menu .navigation > li > ul > li > ul { background-color: var(--body-bg); -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); display: none; left: 100%; margin-top: 10px; opacity: 0; padding: 10px 0 0; position: absolute; top: 0px; -webkit-transform: translateY(-30px); transform: translateY(-30px); width: 220px; z-index: 100; border-radius: 16px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; } .main-menu .navigation > li > ul > li > ul > li { position: relative; border-bottom: 1px solid rgba(12, 47, 37, 0.1); width: 100%; } .main-menu .navigation > li > ul > li > ul > li:last-child { border-bottom: none; } .main-menu .navigation > li > ul > li > ul > li > a { position: relative; display: block; padding: 10px 0; line-height: 24px; font-weight: 400; font-size: 16px; color: #fff; font-family: var(--body-font-family); text-align: left; margin: 0 30px; text-transform: capitalize; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .main-menu .navigation > li > ul > li > ul > li > a:hover { color: var(--theme-color1); } .main-menu .navigation li.dropdown .dropdown-btn { border: 1px solid #ffffff; color: #ffffff; cursor: pointer; display: none; font-size: 16px; height: 30px; line-height: 26px; position: absolute; right: 10px; text-align: center; top: 8px; width: 34px; z-index: 5; } .sticky-header { background-color: rgba(10, 8, 8, 0.9843137255); -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); left: 0px; opacity: 0; padding: 0px; position: fixed; top: 0px; visibility: hidden; width: 100%; z-index: 99999; } @media only screen and (min-width: 1023px) { .sticky-header .mobile-nav-toggler { display: none; } } .sticky-header.fixed-header { opacity: 1; visibility: visible; z-index: 9999; } .sticky-header .logo { padding: 10px 0; } .sticky-header .logo img { max-height: 40px; } .sticky-header .nav-outer { background: none; position: relative; } .sticky-header .inner-container { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; } .sticky-header .main-menu .navigation > li { margin: 0; margin-left: 46px; padding: 20px 0; } .sticky-header .main-menu .navigation > li > a { color: #fff; } .sticky-header .main-menu .navigation > li.current > a, .sticky-header .main-menu .navigation > li:hover > a { color: var(--theme-color1); } .sticky-header .main-menu .navigation > li:before { display: none; } .sticky-header .outer-box { display: none; } .sticky-header .mobile-nav-toggler { color: var(--theme-color-white) !important; font-size: 22px; line-height: 1; } .header-1 .sticky-header .main-menu .navigation > li > a { color: #fff; } .header-1 .sticky-header .main-menu .navigation > li.current > a, .header-1 .sticky-header .main-menu .navigation > li:hover > a { color: var(--theme-color1); } .header-1 .sticky-header .main-menu .navigation > li:before { display: none; } @media only screen and (max-width: 1700px) { .main-header .header-lower .outer-box .ui-btn-outer { border-right: 0; margin-right: 0; padding-right: 0; } .main-menu .navigation > li { margin-right: 50px; } } @media only screen and (max-width: 1439px) { .main-menu .navigation > li { margin-right: 30px; } } @media only screen and (max-width: 1199px) { .main-header .main-box { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media only screen and (min-width: 768px) { .main-menu .navigation > li > ul, .main-menu .navigation > li > ul > li > ul { display: block !important; visibility: hidden; opacity: 0; } } @media only screen and (max-width: 1023px) { .main-header .main-menu { display: none; } .main-header .logo { min-width: auto; } .main-header .logo img, .sticky-header .main-header .logo img { width: auto; max-width: none; max-height: 35px; } .main-header .main-box .nav-outer { width: auto; } .main-header .main-box { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } /*** ==================================================================== Helping Section ==================================================================== ***/ .section-padding { padding: 120px 0; } @media (max-width: 1199.98px) { .section-padding { padding: 100px 0; } } @media (max-width: 991.98px) { .section-padding { padding: 80px 0; } } /* background */ @-webkit-keyframes draw { to { stroke-dashoffset: 0; } } @keyframes draw { to { stroke-dashoffset: 0; } } @-webkit-keyframes draw2 { to { stroke-dashoffset: 0; } } @keyframes draw2 { to { stroke-dashoffset: 0; } } @media (max-width: 767.98px) { br { display: none; } } .fix { overflow: hidden; } @media (max-width: 1199.98px) { br { display: none; } } /*** ==================================================================== Mobile Menu ==================================================================== ***/ .mobile-nav-toggler { position: relative; cursor: pointer; display: none; top: 0px; margin-left: 25px; -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } @media only screen and (max-width: 1023px) { .mobile-nav-toggler { display: block !important; } } .mobile-menu { position: fixed; right: 0; top: 0; width: 300px; max-width: 100%; height: 100%; opacity: 0; visibility: hidden; z-index: 999999; } .mobile-menu .menu-backdrop { position: fixed; right: 0; top: 0; width: 100%; height: 100%; z-index: 1; background: rgba(0, 0, 0, 0.7); opacity: 0; visibility: hidden; } .mobile-menu .upper-box { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; padding: 20px 20px; } .mobile-menu .close-btn { position: relative; top: 5px; text-align: center; font-size: 30px; color: #fff; cursor: pointer; z-index: 10; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; -webkit-transform: translateY(-50px); transform: translateY(-50px); } .mobile-menu .close-btn:hover { opacity: 0.5; } .mobile-menu .nav-logo { position: relative; text-align: left; width: 100%; } .mobile-menu .nav-logo img { max-height: 40px; } .mobile-menu .menu-box { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; left: 0px; top: 0px; width: 100%; height: 100%; max-height: 100%; overflow-y: auto; background-color: rgba(10, 8, 8, 0.9843137255); -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); padding: 0px 0px; z-index: 5; opacity: 0; visibility: hidden; border-radius: 0px; -webkit-transform: translateX(101%); transform: translateX(101%); } .mobile-menu-visible { overflow: hidden; } .mobile-menu-visible .mobile-menu { opacity: 1; visibility: visible; } .mobile-menu-visible .mobile-menu .menu-backdrop { opacity: 1; visibility: visible; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .mobile-menu-visible .mobile-menu .menu-box { opacity: 1; visibility: visible; -webkit-transition: all 0.4s ease 200ms; transition: all 0.4s ease 200ms; -webkit-transform: translateX(0%); transform: translateX(0%); } .mobile-menu-visible .mobile-menu .close-btn { -webkit-transform: translateY(0px); transform: translateY(0px); } .mobile-menu .navigation { position: relative; display: block; width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.1); } .mobile-menu .navigation li { position: relative; display: block; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .mobile-menu .navigation li > ul > li:last-child { border-bottom: none; } .mobile-menu .navigation li > ul > li:first-child { border-top: 1px solid rgba(255, 255, 255, 0.1); } .mobile-menu .navigation li > a { position: relative; display: block; line-height: 24px; padding: 10px 20px; font-size: 16px; color: #ffffff; font-weight: 400; text-transform: capitalize; } .mobile-menu .navigation li:hover > a, .mobile-menu .navigation li.current > a { color: var(--theme-color1); } .mobile-menu .navigation li.dropdown .dropdown-btn { position: absolute; right: 0px; top: 0px; width: 44px; height: 44px; text-align: center; font-size: 17px; line-height: 44px; font-weight: 500; font-family: var(--title-font); color: #ffffff; cursor: pointer; z-index: 5; } .mobile-menu .navigation li.dropdown .dropdown-btn:after { content: ""; position: absolute; left: 0px; top: 10px; width: 1px; height: 24px; border-left: 1px solid rgba(255, 255, 255, 0.1); } .mobile-menu .navigation li.dropdown .dropdown-btn.active i:before { content: "\f106"; } .mobile-menu .navigation li > ul, .mobile-menu .navigation li > ul > li > ul { display: none; } .mobile-menu .navigation li > ul > li { padding-left: 20px; } .contact-list-one { position: relative; padding: 30px 20px 20px; } .contact-list-one li { position: relative; margin-bottom: 20px; } .contact-list-one li:last-child { margin-right: 0; } .contact-list-one li .contact-info-box { position: relative; padding-left: 54px; font-size: 14px; line-height: 24px; color: #ffffff; } .contact-list-one li .contact-info-box a { color: #ffffff; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .contact-list-one li .contact-info-box .icon { position: absolute; left: 0; top: 0; font-size: 34px; line-height: 50px; color: #fff; } .contact-list-one li .contact-info-box .title { display: block; font-size: 12px; color: #b2c1c0; font-weight: 400; text-transform: uppercase; } .mobile-menu .social-links { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; background: var(--bg-theme-color1); width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: auto; } .mobile-menu .social-links li { position: relative; text-align: center; width: 100%; border-right: 1px solid rgba(0, 0, 0, 0.1); } .mobile-menu .social-links li a { position: relative; display: block; line-height: 50px; height: 50px; font-size: 14px; text-align: center; color: #fff; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .mobile-menu .social-links li a:hover { color: var(--theme-color-black); } /*** ==================================================================== Search Popup ==================================================================== ***/ /*** ==================================================================== Section Title ==================================================================== ***/ .sec-title { margin-bottom: 30px; } @media (max-width: 767.98px) { .sec-title { margin-bottom: 10px; } } .sec-title .sub-title { font-size: 16px; font-weight: 400; line-height: 1; position: relative; color: #7A7A7A; font-family: var(--body-font-family); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-bottom: 18px; } .sec-title .sub-title img { margin-right: 8px; } .sec-title .title span { color: var(--theme-color1); } @media (max-width: 1199.98px) { .sec-title .title { font-size: 44px; } } @media (max-width: 767.98px) { .sec-title .title { font-size: 40px; } } @media (max-width: 575.98px) { .sec-title .title { font-size: 36px; } } @media (max-width: 469.98px) { .sec-title .title { font-size: 28px; } } .hero-1 { padding: 200px 0 200px; position: relative; } @media (max-width: 1199.98px) { .hero-1 { padding: 180px 0 130px; } } @media (max-width: 767.98px) { .hero-1 { padding: 160px 0 110px; } } @media (max-width: 575.98px) { .hero-1 { padding: 150px 0 100px; } } @keyframes draw { 0% { stroke-dashoffset: 1000; } 100% { stroke-dashoffset: 0; } } .hero-1 .hero-oboject-1 { position: absolute; bottom: 0; left: 0; } @media (max-width: 1899.98px) { .hero-1 .hero-oboject-1 { max-width: 430px; bottom: 15%; } .hero-1 .hero-oboject-1 img { width: 100%; height: 100%; } } @media (max-width: 1399.98px) { .hero-1 .hero-oboject-1 { bottom: 130px; max-width: 400px; } } @media (max-width: 1199.98px) { .hero-1 .hero-oboject-1 { display: none; } } .hero-1 .hero-oboject-2 { position: absolute; bottom: -5%; right: -5%; } @media (max-width: 1399.98px) { .hero-1 .hero-oboject-2 { bottom: 0; max-width: 400px; } .hero-1 .hero-oboject-2 img { width: 100%; height: 100%; } } @media (max-width: 1199.98px) { .hero-1 .hero-oboject-2 { display: none; } } .hero-1 .hero-content { position: relative; z-index: 9; } .hero-1 .hero-content .hero-title { color: #fff; max-width: 1200px; } @media (max-width: 1199.98px) { .hero-1 .hero-content .hero-title { font-size: 75px; } } @media (max-width: 991.98px) { .hero-1 .hero-content .hero-title { font-size: 60px; line-height: 120%; } } @media (max-width: 767.98px) { .hero-1 .hero-content .hero-title { font-size: 48px; text-align: center; } } @media (max-width: 575.98px) { .hero-1 .hero-content .hero-title { font-size: 38px; } } .hero-1 .hero-content .hero-title span { font-weight: 250; } .hero-1 .hero-content .content-items { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 60px; margin-top: 45px; margin-left: 300px; } @media (max-width: 991.98px) { .hero-1 .hero-content .content-items { margin-left: 60px; } } @media (max-width: 767.98px) { .hero-1 .hero-content .content-items { margin-left: 0; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 30px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .hero-1 .hero-content .content-items .content { max-width: 440px; } @media (max-width: 767.98px) { .hero-1 .hero-content .content-items .content { margin: 0 auto; text-align: center; } } .hero-1 .hero-content .content-items .content .hero-text { font-size: 18px; color: rgba(255, 255, 255, 0.8); margin-bottom: 30px; } @media (max-width: 767.98px) { .hero-1 .hero-content .content-items .content .hero-text { font-size: 16px; text-align: center; } } @keyframes dscroll { 100% { -webkit-transform: translateY(100vh); transform: translateY(100vh); } } .feature-box-style1 { padding: 60px; background-color: var(--theme-color-black); border-radius: 40px; border: 1px solid rgba(255, 255, 255, 0.14); padding-top: 55px; overflow: hidden; position: relative; z-index: 99; } @media (max-width: 1199.98px) { .feature-box-style1 { padding: 40px; } } @media (max-width: 469.98px) { .feature-box-style1 { padding: 35px 28px; } } .feature-box-style1 .sub-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 16px; font-weight: 400; gap: 10px; margin-bottom: 13px; } @media (max-width: 1199.98px) { .feature-box-style1 .title { font-size: 35px; } } @media (max-width: 575.98px) { .feature-box-style1 .title { font-size: 30px; } } @media (max-width: 469.98px) { .feature-box-style1 .title { font-size: 26px; } } .feature-box-style1 .title span { color: var(--theme-color1); } .feature-box-style1 .btn-style-one { margin-top: 100px; } @media (max-width: 767.98px) { .feature-box-style1 .btn-style-one { margin-top: 60px; } } @media (max-width: 575.98px) { .feature-box-style1 .btn-style-one { margin-top: 50px; } } .feature-section { position: relative; } .feature-section .shape-1 { position: absolute; top: -12%; right: 20px; } @media (max-width: 1199.98px) { .feature-section .shape-1 { display: none; } } .about-image-1 { width: 560px; position: relative; -webkit-mask: url('data:image/svg+xml;utf8,'); mask: url('data:image/svg+xml;utf8,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: cover; mask-size: cover; height: 750px; border-radius: 70px; } @media (max-width: 1399.98px) { .about-image-1 { width: initial; } } @media (max-width: 1199.98px) { .about-image-1 { max-width: initial; -webkit-mask: none; mask: none; height: 500px; } } @media (max-width: 575.98px) { .about-image-1 { height: 400px; } } .about-image-1 img { width: 100%; height: 100%; border-radius: 70px; -o-object-fit: cover; object-fit: cover; } .about-section { position: relative; } .service-section { border-radius: 40px; margin: 0 60px; position: relative; z-index: 9; } @media (max-width: 1699.98px) { .service-section { margin: 0 35px; } } @media (max-width: 1399.98px) { .service-section { margin: 0 28px; } } @media (max-width: 1199.98px) { .service-section { margin: 0 20px; } } @media (max-width: 469.98px) { .service-section { margin: 0 16px; } } .service-block-one .inner-block { background-color: var(--theme-color-black); border-radius: 30px; border: 1px solid rgba(255, 255, 255, 0.13); padding: 40px; padding-top: 125px; position: relative; overflow: hidden; z-index: 99; } .service-block-one .inner-block .dot { display: inline-block; width: 8px; height: 8px; border-radius: 8px; background-color: var(--theme-color1); position: absolute; top: 40px; left: 40px; } .service-block-one .inner-block .number { position: absolute; top: 40px; right: 40px; font-size: 50px; line-height: 1; font-weight: 500; color: rgba(255, 255, 255, 0.15); } .service-block-one .inner-block .content-box { -webkit-transform: translateY(58px); transform: translateY(58px); -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .service-block-one .inner-block .content-box .icon { margin-bottom: 10px; -webkit-transition: all 900ms ease; transition: all 900ms ease; display: inline-block; font-size: 60px; } .service-block-one .inner-block .content-box .icon img { width: 60px; } .service-block-one .inner-block .content-box .title { margin-bottom: 10px; } .service-block-one .inner-block .content-box .title a { background-position: 0 95%; background-repeat: no-repeat; background-size: 0% 2px; display: inline; } .service-block-one .inner-block .content-box .title a:hover { color: var(--theme-color1); background-size: 100% 2px; background-image: -webkit-gradient(linear, left top, left bottom, from(var(--theme-color1)), to(var(--theme-color1))); background-image: linear-gradient(180deg, var(--theme-color1) 0%, var(--theme-color1) 100%); } .service-block-one .inner-block .content-box .text { font-size: 16px; } .service-block-one .inner-block .content-box .arrow-link { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; color: #fff; font-size: 16px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: 400; gap: 10px; text-decoration: underline; margin-top: 22px; opacity: 0; visibility: hidden; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .service-block-one .inner-block .content-box .arrow-link:hover { color: var(--theme-color1); } .service-block-one .inner-block:hover .content-box { -webkit-transform: translateY(0px); transform: translateY(0px); } .service-block-one .inner-block:hover .content-box .icon { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } .service-block-one .inner-block:hover .content-box .arrow-link { opacity: 1; visibility: visible; } @-webkit-keyframes qodef-animate-image-out { 0% { -webkit-transform: scale(1) translateZ(0); transform: scale(1) translateZ(0); clip-path: inset(0 0 0 0); } 100% { -webkit-transform: scale(1); transform: scale(1); clip-path: inset(0 0 0 0); } } @keyframes qodef-animate-image-out { 0% { -webkit-transform: scale(1) translateZ(0); transform: scale(1) translateZ(0); clip-path: inset(0 0 0 0); } 100% { -webkit-transform: scale(1); transform: scale(1); clip-path: inset(0 0 0 0); } } @-webkit-keyframes qodef-animate-image-in { 0% { -webkit-transform: scale(1.05) translateZ(0); transform: scale(1.05) translateZ(0); clip-path: inset(0 100% 0 0); } 100% { -webkit-transform: scale(1); transform: scale(1); clip-path: inset(0 0 0 0); } } @keyframes qodef-animate-image-in { 0% { -webkit-transform: scale(1.05) translateZ(0); transform: scale(1.05) translateZ(0); clip-path: inset(0 100% 0 0); } 100% { -webkit-transform: scale(1); transform: scale(1); clip-path: inset(0 0 0 0); } } .working-block-one .inner-block { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 40px; position: relative; z-index: 9; gap: 40px; } .working-block-one .inner-block.top-margin-none { margin-top: 0; } @media (max-width: 991.98px) { .working-block-one .inner-block.top-margin-none { margin-top: 40px; } } @media (max-width: 575.98px) { .working-block-one .inner-block { gap: 20px; } } .working-block-one .inner-block .step { display: -webkit-box; display: -ms-flexbox; display: flex; background-color: var(--theme-color2); font-size: 16px; font-weight: 400; color: #fff; width: 52px; border-radius: 10px; -webkit-writing-mode: sideways-lr; -ms-writing-mode: sideways-lr; writing-mode: sideways-lr; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; height: 127px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .working-block-one .inner-block .content-box { position: relative; padding-bottom: 20px; width: 100%; } .working-block-one .inner-block .content-box .text { color: rgba(255, 255, 255, 0.6); margin-top: 10px; max-width: 450px; font-size: 16px; font-weight: 400; letter-spacing: -0.02em; } @media (max-width: 575.98px) { .working-block-one .inner-block .content-box .text { font-size: 14px; } } .working-block-one .inner-block .content-box .line { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.14); } .working-block-one .inner-block .content-box .line::before { position: absolute; top: 50%; right: 0; width: 9px; height: 9px; -webkit-transform: translateY(-50%); transform: translateY(-50%); content: ""; background-color: #D9D9D9; border-radius: 50%; } .working-block-one .inner-block.active .step { background-color: var(--theme-color1); } .working-block-one .inner-block.active .content-box .line::before { background-color: var(--theme-color1); } /*** ==================================================================== Marquee Section ==================================================================== ***/ /* Global keyframes — declared only once */ @-webkit-keyframes scroll { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(calc(-100% - var(--gap))); transform: translateX(calc(-100% - var(--gap))); } } @keyframes scroll { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(calc(-100% - var(--gap))); transform: translateX(calc(-100% - var(--gap))); } } @-webkit-keyframes scroll2 { 0% { -webkit-transform: translateX(calc(-100% - var(--gap))); transform: translateX(calc(-100% - var(--gap))); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes scroll2 { 0% { -webkit-transform: translateX(calc(-100% - var(--gap))); transform: translateX(calc(-100% - var(--gap))); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .testimonial-block-one .inner-box { background-color: var(--theme-color-black); padding: 60px 60px; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 30px; margin-top: 30px; padding-top: 53px; } @media (max-width: 1399.98px) { .testimonial-block-one .inner-box { padding: 40px 80px; } } @media (max-width: 1199.98px) { .testimonial-block-one .inner-box { padding: 50px 35px; padding-top: 35px; } } .testimonial-block-one .inner-box .text { font-size: 20px; line-height: 160%; max-width: 710px; color: #fff; font-style: italic; } @media (max-width: 1199.98px) { .testimonial-block-one .inner-box .text { font-size: 17px; } } .testimonial-block-one .inner-box .infu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; padding-top: 60px; } @media (max-width: 1199.98px) { .testimonial-block-one .inner-box .infu { padding-top: 30px; } } @media (max-width: 469.98px) { .testimonial-block-one .inner-box .infu { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .testimonial-block-one .inner-box .infu .image { height: 50px; width: 50px; } .testimonial-block-one .inner-box .infu .image img { border-radius: 50%; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media (max-width: 469.98px) { .testimonial-block-one .inner-box .infu span { font-size: 13px; } } .testimonial-block-one .inner-box .infu .name { font-weight: 400; font-size: 20px; } @media (max-width: 469.98px) { .testimonial-block-one .inner-box .infu .name { font-size: 16px; } } /*** ==================================================================== Products details ==================================================================== ***/ /*** ==================================================================== Categories Section ==================================================================== ***/ /*** ==================================================================== Categories Section Two ==================================================================== ***/ /*** ==================================================================== Products Section ==================================================================== ***/ /*** ==================================================================== Featured Products ==================================================================== ***/ /*=== Mixitup Gallery ===*/ /* * shop-catalog-layouts.scss * ----------------------------------------------- */ .foorer-area { border-radius: 40px; margin: 0 60px; background-color: var(--theme-color-black); position: relative; overflow: hidden; z-index: 9; } .foorer-area .footer-line { position: absolute; top: 0; right: 0; left: 0; bottom: 0; opacity: 0.3; z-index: -1; } .foorer-area .footer-line img { height: 100%; } @media (max-width: 1699.98px) { .foorer-area { margin: 0 35px; } } @media (max-width: 1399.98px) { .foorer-area { margin: 0 28px; } } @media (max-width: 1199.98px) { .foorer-area { margin: 0 20px; } } @media (max-width: 1199.98px) and (max-width: 767.98px) { .foorer-area { padding-left: 20px !important; padding-right: 20px !important; } } @media (max-width: 469.98px) { .foorer-area { margin: 0 16px; } } .foorer-area .footer-top-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, 0.14); padding-bottom: 50px; } @media (max-width: 767.98px) { .foorer-area .footer-top-wrapper { -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 30px; padding-bottom: 30px; } } .foorer-area .footer-top-wrapper .footer-info { text-align: right; } .foorer-area .footer-top-wrapper .footer-info .mail { font-size: 20px; font-weight: 500; color: var(--text-color); display: block; margin-bottom: 4px; } @media (max-width: 767.98px) { .foorer-area .footer-top-wrapper .footer-info .mail { font-size: 17px; } } .foorer-area .footer-widget-wrapper { padding: 40px 0 80px; position: relative; z-index: 9; } .foorer-area .footer-widget-wrapper .footer-content { margin-top: 30px; } .foorer-area .footer-widget-wrapper .footer-content .title { font-size: 60px; margin-bottom: 65px; } @media (max-width: 1199.98px) { .foorer-area .footer-widget-wrapper .footer-content .title { font-size: 50px; } } @media (max-width: 767.98px) { .foorer-area .footer-widget-wrapper .footer-content .title { font-size: 46px; } } @media (max-width: 575.98px) { .foorer-area .footer-widget-wrapper .footer-content .title { font-size: 38px; margin-bottom: 40px; } } .foorer-area .footer-widget-wrapper .footer-content .title span { color: var(--theme-color1); } .foorer-area .footer-widget-wrapper .footer-content .title-2 { font-size: 20px; color: #fff; margin-bottom: 20px; } .foorer-area .footer-widget-wrapper .footer-widget-items .user-links li { font-size: 16px; font-weight: 400; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; font-family: var(--heading-font-family); } @media (max-width: 1399.98px) { .foorer-area .footer-widget-wrapper .footer-widget-items .user-links li { font-size: 15px; } } .foorer-area .footer-widget-wrapper .footer-widget-items .user-links li:not(:last-child) { margin-bottom: 12px; } .foorer-area .footer-widget-wrapper .footer-widget-items .user-links li a { color: rgba(255, 255, 255, 0.6); } .foorer-area .footer-widget-wrapper .footer-widget-items .user-links li a i { margin-right: 5px; } .foorer-area .footer-widget-wrapper .footer-widget-items .user-links li:hover { margin-left: 5px; } .foorer-area .footer-widget-wrapper .footer-widget-items .user-links li:hover a { color: var(--theme-color1); } .foorer-area .footer-bottom { padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, 0.2); position: relative; z-index: 8; } .foorer-area .footer-bottom .footer-bottom-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (max-width: 767.98px) { .foorer-area .footer-bottom .footer-bottom-wrapper { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 10px; } } .foorer-area .footer-bottom .footer-bottom-wrapper p { color: #fff; } .foorer-area .footer-bottom .footer-bottom-wrapper .social-icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0; } @media (max-width: 469.98px) { .foorer-area .footer-bottom .footer-bottom-wrapper .social-icon { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 10px; } } .foorer-area .footer-bottom .footer-bottom-wrapper .social-icon a { display: inline-block; border-radius: 32px; background: var(--theme-color2); padding: 0 14px; height: 35px; line-height: 35px; font-size: 14px; font-weight: 400; color: #fff; margin-right: -10px; } .foorer-area .footer-bottom .footer-bottom-wrapper .social-icon a:hover { background-color: var(--theme-color1); color: #fff; } .footer-section { padding-bottom: 40px; position: relative; } @media (max-width: 1199.98px) { .footer-section { padding-bottom: 20px; } } @media (max-width: 469.98px) { .footer-section { padding-bottom: 16px; } } .footer-section .shape-1 { position: absolute; top: 50px; left: 43%; z-index: 11; } @media (max-width: 1199.98px) { .footer-section .shape-1 { display: none; } } .tp-letter-span { display: inline-block; -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; } /*** ==================================================================== Page Title ==================================================================== ***/ @-webkit-keyframes "ripple" { 70% { -webkit-box-shadow: 0 0 0 70px rgba(255, 255, 255, 0); box-shadow: 0 0 0 70px rgba(255, 255, 255, 0); } 100% { -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } @keyframes "ripple" { 70% { -webkit-box-shadow: 0 0 0 70px rgba(255, 255, 255, 0); box-shadow: 0 0 0 70px rgba(255, 255, 255, 0); } 100% { -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } .page-title { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-repeat: no-repeat; background-position: center; background-size: cover; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 220px 0 120px; position: relative; } .page-title:before { background: linear-gradient(179deg, rgba(41, 41, 41, 0.6) 19.26%, rgba(255, 107, 30, 0.4509803922) 97.47%); bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; } .page-title .title { color: #ffffff; font-size: 64px; margin-bottom: 17px; } @media only screen and (max-width: 768px) { .page-title .title { font-size: 34px; } } .page-title .text { color: #ffffff; font-size: 16px; letter-spacing: 0.05em; line-height: 26px; max-width: 520px; position: relative; } .page-breadcrumb { position: relative; margin-top: 5px; } .page-breadcrumb li { position: relative; display: inline-block; margin-right: 12px; padding-right: 13px; color: #ffffff; font-size: 14px; font-weight: 400; text-transform: capitalize; } .page-breadcrumb li:after { position: absolute; content: "\f105"; right: -6px; top: 1px; color: #ffffff; font-size: 14px; font-weight: 900; font-family: "Font Awesome 6 Pro"; color: #ffffff; } .page-breadcrumb li:last-child::after { display: none; } .page-breadcrumb li:last-child { padding-right: 0px; margin-right: 0px; } .page-breadcrumb li a { color: #ffffff; font-weight: 500; text-transform: capitalize; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .page-breadcrumb li a:hover { color: #ffffff; } .background-image { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-repeat: repeat; background-position: center; background-size: cover; } input::-webkit-input-placeholder { color: #cccccc; opacity: 1; } input::-moz-placeholder { color: #cccccc; opacity: 1; } input:-ms-input-placeholder { color: #cccccc; opacity: 1; } input::-ms-input-placeholder { color: #cccccc; opacity: 1; } input::placeholder { color: #cccccc; opacity: 1; } input:-ms-input-placeholder { color: #cccccc; } input::-ms-input-placeholder { color: #cccccc; } /*** ============================================= Services Details ============================================= ***/ /*-------------------------------------------------------------- # Project Details --------------------------------------------------------------*/ /*** ==================================================================== Blog Details ==================================================================== ***/ /* Nav Links */ /*** ==================================================================== Sidebar ==================================================================== ***/ /*** ==================================================================== Comments ==================================================================== ***/ /*-------------------------------------------------------------- # Team Details --------------------------------------------------------------*/ /*** ==================================================================== Contact ==================================================================== ***/ .map { height: 550px; }