CITRUS STUDIOS| 2D | 3D Animation Production Studio India

Logline : Set in a medieval time, in the mystical dunes of Rajasthan, comes an epic journey of Uma, a brave, independent, strong-willed 12-year-old gypsy girl who redefines tradition to become a warrior as she gets separated from her family and finds her way back home learning the dark arts, befriending genies, battling bandits and saving kingdoms in distress along with her cowardly camel Unta..
Genre : Adventure-Comedy TG : 9-11 and family Medium : 3D Duration : 30 min x 11
Storyboarding
Concept Art
Character
Environment
Layout
Animation

@charset "utf-8"; /* CSS Document */ /******************************************************************** * Table of Contents * ********************************************************************/ /* 1. Common styles 1.1. Font-face 1.2. Block background style 1.3. Content colors styles 1.4. Revolution slider and slick slider 2. Preloader styles 3. Navbar style 4. Section style 6. Mini block style 7. Contact style 8. Ajax style 9. Background style 10. Footer styles */ /******************************************************************** * Common styles * ********************************************************************/ /* ========================================================================== Font-face ========================================================================== */ @font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Regular.eot'); src: url('fonts/Poppins-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/Poppins-Regular.woff') format('woff'), url('fonts/Poppins-Regular.ttf') format('truetype'), url('fonts/Poppins-Regular.svg#Poppins-Regular') format('svg'); font-weight: normal; font-style: normal; } .poppins { font-family: 'Poppins', sans-serif; } /* ========================================================================== Block background style ========================================================================== */ .color-scheme-1 { background-color: #161616; } .color-scheme-2 { background-color: #963048; } .color-scheme-3 { background-color: #ffffff; } .color-scheme-4 { background-color: #111; } .color-scheme-5 { background-color: #000; } .color-scheme-6 { background-color: #f1f1f1; } /* ========================================================================== Content color style ========================================================================== */ .color-dark { color: #000 !important; } .color-success { color: #5cb85c !important; } .color-info { color: #5bc0de !important; } .color-warning { color: #f0ad4e !important; } .color-danger { color: #d9534f !important; } .color-white { color: #fff !important; } .color-sky { color: #eeebf8 !important; } .z-in-1 { z-index: -1 !important; } body { background-color: #fff; font-family: 'Poppins', sans-serif; font-size: 15px; overflow-x: hidden; } h1, h2, h3, h4, h5, h6, h7 { font-family: 'Poppins', sans-serif; color: #000; } h1.light, h2.light, h3.light, h4.light, h5.light, h6.light, h7.light { color: #F27070; } h1 span, h2 span, h3 span, h4 span, h5 span, h6 span, h7 span { color: #f27070; } h1 { font-size: 3rem; } h2 { font-size: 2.5rem; } a { color: #222; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; outline: none; } a:hover, a:focus { color: #f27070; text-decoration: none; outline: none; } a.light { color: #bbb; } a.light:hover, a.light:focus { color: #f27070; } a.white { color: #fff; } a.white:hover, a.white:focus { color: #f27070; } p { color: #000; font-family: 'Poppins', sans-serif; font-size: 15px; line-height: 26px; margin-bottom: 30px; } p.big { font-size: 20px; } p.light { color: #ccc; } p.white { color: #fff; } p.line-th { text-decoration: line-through; color: #666; } .icon-1half { font-size: 1.5em; } .text-uppercase { text-transform: uppercase; } .text-bold { font-weight: 900 !important; letter-spacing: 1px; } .h100 { min-height: -webkit-calc(100%); min-height: 100vh; } .h50 { min-height: -webkit-calc(50%); min-height: 50vh; } .w100 { width: -webkit-calc(100%); width: 100vw; } .wh100 { min-height: -webkit-calc(100%); min-height: 100vh; width: -webkit-calc(100%); width: 100vw; } .w_100 { width: 100%; } .block { padding: 120px 0 60px; position: relative; } .block2 { padding: 120px 0 120px; position: relative; } .block3 { padding: 120px 0 90px 0; position: relative; } .block4 { padding: 0 0 120px; position: relative; } .block5 { padding: 120px 0 0 0; position: relative; } .block6 { padding: 0 0 60px 0; position: relative; } .block7 { padding: 120px 0 30px; position: relative; } .block8 { padding: 0 0 90px 0; position: relative; } .relative { position: relative; } .over-h { overflow: hidden; } .fixed-all { position: fixed !important; left: 0; top: 0; width: 100%; height: 100%; } .dis-b { display: block; } .dis-n { display: none; } .no-pad { padding: 0 !important; } .no-mar { margin: 0 !important; } .mar-t-120 { margin-top: -120px; } .mar-t-150 { margin-top: -150px; } .mar-t-180 { margin-top: -180px; } .mb-10 { margin-bottom: 10px !important; } .mb-20 { margin-bottom: 20px !important; } .mb-30 { margin-bottom: 30px !important; } .mb-40 { margin-bottom: 40px !important; } .mb-50 { margin-bottom: 50px !important; } .mb-60 { margin-bottom: 60px !important; } .mb-90 { margin-bottom: 90px !important; } .mb-30-i { margin-bottom: 30px !important; } .m-center { margin: 0 auto; } .pad-top-330 { padding-top: 330px; } .pad-5 { padding: 0 5px ; } .pad-30 { padding: 0 30px; } .pad-50 { padding-left: 50px; padding-right: 50px; } .pad-120 { padding: 90px 50px 90px 50px; } .pad-120-tb { padding: 120px 50px; } .pad-120-60 { padding: 120px 50px 60px 50px; } .pad-120-30 { padding: 120px 50px 30px 50px; } .pad-60 { padding: 60px 30px 30px 30px; } .pad-90 { padding: 90px 50px 60px 50px; } .pad-90-30 { padding: 90px 50px 30px 50px; } .pad-90-all { padding: 90px 50px; } .pad-90-0 { padding: 90px 50px 0 50px; } .pad-b-30 { padding-bottom: 30px; } .pad-b-60 { padding-bottom: 60px; } .hr30 { display: block; height: 30px; } .hr60 { display: block; height: 60px; } .max-w-700 { max-width: 700px; } .max-w-500 { max-width: 500px; } .max-w-300 { max-width: 300px; } .max-w-200 { max-width: 200px; } .no-boder-radius { border-radius: 0 !important; } .border-r-10 { border-radius: 10px; } .border-r-20 { border-radius: 20px; } .border-r-30 { border-radius: 30px; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } blockquote p, .block-form blockquote p { color: #161616; font-size: 15px; } .white p { color: #ccc; } .text-error { font-size: 15px; color: red; } .color-active { color: #f27070 !important; } .highlight { color: #f27070; font-weight: bold; } .tool_tip { color: #ffffff; } .img-effect { position: relative; margin-bottom: 30px; } .read-more:hover, .read-more:focus { color: #ccc; } .read-more:hover:after, .read-more:focus:after { width: 70%; } .read-more:hover:before, .read-more:focus:before { width: 20%; } .tp-caption.btn-default:hover { cursor: pointer; } .btn-default + .btn-default { margin-left: 20px; } .btn-default { font-size: 12px; display: inline-block; position: relative; color: #bbb; font-family: 'Poppins', sans-serif; padding: 12px 22px; letter-spacing: 2px; margin: 0 0 30px; background: none; text-transform: uppercase; font-weight: bold; text-decoration: none; line-height: 17px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .btn-default:after, .btn-default:before { content: ""; position: absolute; height: 100%; width: 30px; border: 1px solid #bbb; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } .btn-default:after { right: 0; top: 0; border-left: none; } .btn-default:before { left: 0; bottom: 0; border-right: none; } .btn-default.active { color: #f27070; } .btn-default.active:after, .btn-default.active:before { border-color: #f27070; } .btn-default.active:hover:after, .btn-default.active:hover:before { border-color: #f27070; } .btn-default.dark { color: #161616; } .btn-default.dark:after, .btn-default.dark:before { border-color: #161616; } .btn-default.dark:hover:after, .btn-default.dark:hover:before { border-color: #f27070; } .btn-default.white { color: #ffffff; } .btn-default.white:after, .btn-default.white:before { border-color: #ffffff; } .btn-default.white:hover:after, .btn-default.white:hover:before { border-color: #f27070; } .btn-default:hover { color: #f27070; } .btn-default:hover:after, .btn-default:hover:before { width: 100%; border-color: #f27070; } .btn-default:focus { text-decoration: none; color: #f27070; } .btn-default:focus:after, .btn-default:focus:before { width: 100%; border-color: #f27070; } /* ========================================================================== Preloader styles ========================================================================== */ #preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; /* change if the mask should have another color then white */ z-index: 999999; /* makes sure it stays on top */ } #preloader.light { background-color: #fff; } #preloader.light .lds-facebook div { background: #1b1b1b; } .socket { width: 64px; height: 64px; position: absolute; left: 50%; margin-left: -32px; top: 50%; margin-top: -32px; } .lds-facebook { display: inline-block; position: relative; width: 64px; height: 64px; } .lds-facebook div { display: inline-block; position: absolute; left: 6px; width: 13px; background: #fff; animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite; } .lds-facebook div:nth-child(1) { left: 6px; animation-delay: -0.24s; } .lds-facebook div:nth-child(2) { left: 26px; animation-delay: -0.12s; } .lds-facebook div:nth-child(3) { left: 45px; animation-delay: 0; } @keyframes lds-facebook { 0% { top: 6px; height: 51px; } 50%, 100% { top: 19px; height: 26px; } } @-webkit-keyframes lds-facebook { 0% { top: 6px; height: 51px; } 50%, 100% { top: 19px; height: 26px; } } #totop { position: fixed; right: 2.4rem; bottom: 2.4rem; text-align: center; z-index: 150; font-size: 40px; width: 40px; height: 30px; cursor: pointer; display: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } #totop:after { content: ""; position: absolute; left: 22px; top: 0; border-left: 5px solid transparent; border-right: 6px solid transparent; border-top: none; border-bottom: 6px solid #999; z-index: 2; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } #totop:before { content: ""; position: absolute; left: 27px; top: 3px; height: 30px; width: 1px; background-color: #999; z-index: 2; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } #totop:hover:after { border-bottom-color: #f27070; } #totop:hover:before { background-color: #f27070; } /* ========================================================================== attract-hover styles ========================================================================== */ .attract-hover { display: inline-block; } .attract-hover-easing { transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); -moz-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* ========================================================================== Navbar styles ========================================================================== */ .navbar .navbar-nav .nav-link { font-family: 'Poppins', sans-serif; font-size: 14px; color: #161616; padding: 0; padding-top: 0.4rem; padding-bottom: 0.4rem; margin-left: 1rem; margin-right: 1rem; letter-spacing: 1px; font-weight: 600; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; position: relative; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .navbar .navbar-nav .nav-link:before { position: absolute; left: 0; bottom: 7px; content: ""; height: 1px; width: 0; background-color: #f27070; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link:focus { color: #f27070; } .navbar .navbar-nav .nav-link:hover:before, .navbar .navbar-nav .nav-link:focus:before { width: 100%; } .navbar .navbar-nav .nav-link.active { color: #f27070; } .navbar .navbar-nav .nav-link.active:before { width: 100%; } .navbar { padding: 50px 50px 0; } .navbar .navbar-brand { padding: 0; font-size: inherit; } .navbar ul.navbar-nav li:last-child .nav-link { margin-right: 0 !important; } .navbar .dropdown-toggle::after { display: none; } .navbar-nav:hover .nav-link { opacity: 0.7; } .navbar-nav:hover .nav-link:hover, .navbar-nav:hover .nav-link:focus { opacity: 1; } .navbar-nav:hover .nav-link:hover:before, .navbar-nav:hover .nav-link:focus:before { opacity: 1; } .navbar-nav:hover .nav-link.active { opacity: 1; } .navbar-nav:hover .nav-link.active:before { opacity: 1; } .navbar .navbar-toggler:focus { outline: none; } .navbar .navbar-toggler:hover { outline: none; } .navbar .navbar-toggler:hover .icon-bar-line.x1:before, .navbar .navbar-toggler:hover .icon-bar-line.x3:before { width: 70%; } .navbar .navbar-toggler:hover .icon-bar-line.x1:after, .navbar .navbar-toggler:hover .icon-bar-line.x3:after { width: 20%; } .navbar .navbar-toggler { margin: 0; border: none; border-radius: 0; top: 40px; position: absolute; right: 0; padding: 8px; margin-right: 50px; background-color: #000; } .navbar .navbar-toggler .icon-bar-line { background: none; position: relative; margin: 5px 0 5px; height: 2px; width: 36px; display: block; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .navbar .navbar-toggler .icon-bar-line:after, .navbar .navbar-toggler .icon-bar-line:before { position: absolute; background-color: #000; content: ''; height: 100%; top: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .navbar .navbar-toggler .icon-bar-line.x1:before, .navbar .navbar-toggler .icon-bar-line.x3:before { width: 20%; right: 0; } .navbar .navbar-toggler .icon-bar-line.x1:after, .navbar .navbar-toggler .icon-bar-line.x3:after { width: 70%; left: 0; } .navbar .navbar-toggler .icon-bar-line.x2:before { width: 70%; right: 0; } .navbar .navbar-toggler .icon-bar-line.x2:after { width: 20%; left: 0; } .navbar .navbar-toggler[aria-expanded^="true"] .icon-bar-line.x1:before, .navbar .navbar-toggler[aria-expanded^="true"] .icon-bar-line.x3:before { width: 100%; } .navbar .navbar-toggler[aria-expanded^="true"] .icon-bar-line.x1:after, .navbar .navbar-toggler[aria-expanded^="true"] .icon-bar-line.x3:after { width: 100%; } .navbar .navbar-toggler[aria-expanded^="true"] .icon-bar-line.x1 { -webkit-transform: translateY(7px); -moz-transform: translateY(7px); -o-transform: translateY(7px); -ms-transform: translateY(7px); transform: translateY(7px); } .navbar .navbar-toggler[aria-expanded^="true"] .icon-bar-line.x3 { -webkit-transform: translateY(-7px); -moz-transform: translateY(-7px); -o-transform: translateY(-7px); -ms-transform: translateY(-7px); transform: translateY(-7px); } .dropdown-menu { margin: 0; left: inherit; right: 0; background-color: #000; border-color: #000; color: #ccc; } .dropdown-menu .dropdown-item { background: none; color: #ccc; font-family: 'Poppins', sans-serif; font-size: 14px; line-height: 30px; } .dropdown-menu .dropdown-item:hover { color: #f27070; } .dropdown-menu .dropdown-divider { border-color: #222; } .navbar-dark .navbar-nav .nav-link { color: #ffffff; } .navbar-dark .navbar-nav .nav-link:hover { color: #f27070; } .navbar-dark .navbar-toggler .icon-bar-line:after, .navbar-dark .navbar-toggler .icon-bar-line:before { background-color: #fff; } /* ========================================================================== Cursor style ========================================================================== */ .cursor, .cursor2, .cursor3 { position: fixed; transform: translateX(-50%) translateY(-50%); pointer-events: none; left: -100px; top: 50%; } .cursor { background-color: #fff; height: 0; width: 0; z-index: 99999; } .cursor2, .cursor3 { height: 20px; width: 20px; z-index: 99998; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .cursor2.hidden, .cursor3.hidden { display: none; } .cursor2.hover, .cursor3.hover { -webkit-transform: scale(2.5) translateX(-25%) translateY(-25%); transform: scale(2.5) translateX(-25%) translateY(-25%); border: none; } .cursor2 { background-color: rgba(200, 200, 200, 0.3); border: none; border-radius: 50%; } .cursor2.hover { border: 1px solid #f27070; background: none; } .cursor2.hover2 { -webkit-transform: scale(4) translateX(-25%) translateY(-25%); transform: scale(4) translateX(-25%) translateY(-25%); background-color: rgba(233, 32, 79, 0.1); } /* ========================================================================== Section style ========================================================================== */ section:hover .top-header .block-page-header .page-header-title:after { width: 120px; margin-left: -60px; } section.opacity { opacity: 0.3; } .right-bottom { position: absolute; right: 50px; bottom: 50px; z-index: 100; } .left-bottom { position: absolute; left: 50px; bottom: 50px; z-index: 100; } .top-header { position: relative; } .top-header .page-header-area { padding: 230px 0; } .top-header .block-page-header.project-title { position: absolute; z-index: 20; padding: 90px 0; top: inherit; left: inherit; bottom: inherit; right: inherit; -moz-transform: translateZ(80px); -webkit-transform: translateZ(80px); transform: translateZ(80px); } .top-header .block-page-header { position: fixed; top: 0; left: 0; z-index: -1; right: 0; bottom: 0; padding: 160px 0 80px; text-align: center; } .top-header .block-page-header .page-header-title { font-size: 90px; display: block; letter-spacing: 3px; line-height: 1; text-transform: uppercase; margin-bottom: 30px; padding-bottom: 30px; position: relative; } .top-header .block-page-header .page-header-title:after { position: absolute; left: 50%; z-index: 2; margin-left: -30px; bottom: 0; content: ""; height: 1px; width: 60px; background-color: #f27070; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; -ms-transition: all 0.8s ease; transition: all 0.8s ease; } .block-section-header { position: relative; padding: 120px 0 90px; text-align: center; } .block-section-header .section-header-title { font-size: 90px; display: block; letter-spacing: 3px; line-height: 1; text-transform: uppercase; margin-bottom: 30px; padding-bottom: 30px; position: relative; } .block-section-header .section-header-title:before { position: absolute; left: 50%; margin-left: -30px; bottom: 0; content: ""; height: 1px; width: 60px; background-color: #f27070; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; -ms-transition: all 0.8s ease; transition: all 0.8s ease; } .head-sub-title { font-family: 'Poppins', sans-serif; margin: 0; padding: 0 0 30px 0; letter-spacing: 1px; color: #161616; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } h1.head-sub-title { position: relative; margin-bottom: 60px; } h1.head-sub-title:before { position: absolute; left: 50%; margin-left: -80px; bottom: 0; content: ""; height: 1px; z-index: 2; width: 160px; background-color: rgba(255, 255, 255, 0.3); -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; -ms-transition: all 0.8s ease; transition: all 0.8s ease; } h1.head-sub-title:after { position: absolute; left: 50%; margin-left: -25px; bottom: 0; content: ""; height: 2px; z-index: 3; width: 50px; background-color: #f27070; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; -ms-transition: all 0.8s ease; transition: all 0.8s ease; } .head-sub-title.light { color: #ffffff; } .head-sub-title.uppercase { text-transform: uppercase; } .top-project { position: relative; } .top-project .block-project-header { text-align: center; position: absolute; z-index: 20; padding: 120px 0; top: inherit; left: inherit; bottom: inherit; right: inherit; -moz-transform: translateZ(90px); -webkit-transform: translateZ(90px); transform: translateZ(90px); } .top-project .block-project-header .project-title { font-size: 90px; display: block; letter-spacing: 3px; line-height: 1; text-transform: uppercase; margin-bottom: 30px; /* padding-bottom: 60px;*/ position: relative; background-color: rgba(255, 107, 100, 0.5); padding: 10px; } .top-project .block-project-header .project-title:after { position: absolute; left: 50%; margin-left: -1px; bottom: 0; content: ""; height: 30px; z-index: 2; width: 2px; background-color: #f27070; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; -ms-transition: all 0.8s ease; transition: all 0.8s ease; display:none; } .top-project .block-project-header .project-text { padding: 0 30px; } /*----------------------------------------- Slider hack ------------------------------------------*/ .wrap-effect-tilt { width: 100%; height: 100vh; position: absolute; perspective: 1000px; overflow: hidden; } .wrap-effect-tilt .effect-tilt { width: 100%; height: 100%; position: fixed; overflow: visible; transform-style: preserve-3d; -webkit-transform: scale(1.05); transform: scale(1.05); } #fullscreen-slider { height: 100%; width: 100%; position: relative; } #fullscreen-slider .swiper-slide { overflow: hidden; } #fullscreen-portfolio { height: 100%; width: 100%; position: relative; overflow: visible; } .fullscreen-slider-small-wrap { position: absolute; left: 50px; right: 50px; top: 140px; bottom: 140px; } .fullscreen-slider-small-wrap .relative { height: 100%; width: 100%; } .fullscreen-slider-small-wrap .relative .wrap-effect-tilt { height: 100%; } .fullscreen-slider-small-wrap.add-right { right: 70px; } .fullscreen-slider-small-wrap.box, .fullscreen-slider-small-wrap.add-right.box { left: 50px; right: 50px; } .fullscreen-slider-swiper-scrollbar { position: absolute; z-index: 100; width: 30%; height: 15px; left: 35%; bottom: 50px; } .fullscreen-slider-swiper-scrollbar .swiper-scrollbar { height: 4px; } #fullscreen-slider-small { width: 100%; height: 100%; } #fullscreen-slider-small .swiper-wrapper { height: 100%; } #fullscreen-slider-small .swiper-slide { overflow: hidden; } #fullscreen-slider-loop { height: 100%; width: 100%; position: relative; } #fullscreen-slider-loop .swiper-slide { overflow: hidden; } .fullscreen-slider-pagination.dark .fullscreen-slider-pagination-wrap span { color: #161616; } .fullscreen-slider-pagination.dark .fullscreen-slider-pagination-wrap span.divider-pagination:before { background-color: rgba(22, 22, 22, 0.3); } .fullscreen-slider-pagination { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; z-index: 20; } .fullscreen-slider-pagination .fullscreen-slider-pagination-wrap { position: relative; display: block; color: #ccc; } .fullscreen-slider-pagination .fullscreen-slider-pagination-wrap .swiper-pagination-fraction, .fullscreen-slider-pagination .fullscreen-slider-pagination-wrap .swiper-pagination-custom, .fullscreen-slider-pagination .fullscreen-slider-pagination-wrap .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 53px; height: 60px; } .fullscreen-slider-pagination .fullscreen-slider-pagination-wrap span { font-family: 'Poppins', sans-serif; font-size: 30px; display: inline-block; line-height: 90px; height: 90px; color: #ffffff; position: relative; margin: auto 0; } .fullscreen-slider-pagination .fullscreen-slider-pagination-wrap span.divider-pagination { display: inline-block; position: relative; height: 100%; width: 21px; } .fullscreen-slider-pagination .fullscreen-slider-pagination-wrap span.divider-pagination:after, .fullscreen-slider-pagination .fullscreen-slider-pagination-wrap span.divider-pagination:before { position: absolute; content: ""; background-color: rgba(255, 255, 255, 0.3); top: 0; left: 11px; height: 90px; width: 1px; z-index: 1; } .fullscreen-slider-pagination .fullscreen-slider-pagination-wrap span.divider-pagination:after { z-index: 2; height: 5px; left: 9px; width: 5px; background-color: #f27070; animation: anim-page 5s ease infinite; } @keyframes anim-page { 0% { top: 0; } 50% { top: 85px; } 100% { top: 0; } } @-webkit-keyframes anim-page { 0% { top: 0; } 50% { top: 85px; } 100% { top: 0; } } .video-wrapper { position: fixed; box-sizing: border-box; min-width: 100%; min-height: 100%; width: 100%; height: auto; background-size: cover; padding: 0; z-index: 5; overflow: hidden!important; opacity: 1; } .video-wrapper .video-bg { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -20; transform: translateX(-50%) translateY(-50%); background-size: cover; } .video-wrapper.with-tool { position: relative; } .video-wrapper.with-tool .video-bg { position: relative; top: 0; left: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -20; transform: translateX(0) translateY(0); background-size: cover; } .slider-title-block { position: absolute; z-index: 30; top: 0; left: 0; width: 100%; height: 100%; } .slider-title-block .slider-title-block-wrap { padding: 90px 50px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; transform: scale(0.5, 0.5); backface-visibility: hidden; } .slider-title-block .slider-title-block-wrap .slider-sub-title { text-transform: uppercase; color: #161616; opacity: 0; letter-spacing: 2px; font-weight: bold; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .slider-title-block .slider-title-block-wrap .slider-sub-title.light { color: #ffffff; } .slider-title-block .slider-title-block-wrap .slider-title { white-space: nowrap; opacity: 0; padding: 0 0 30px 0; margin: 0; font-size: 90px; display: block; letter-spacing: 50px; line-height: 1; text-transform: uppercase; -webkit-transition: all 1.3s ease; -moz-transition: all 1.3s ease; -o-transition: all 1.3s ease; -ms-transition: all 1.3s ease; transition: all 1.3s ease; } .slider-title-block .slider-title-block-wrap .btn-default { opacity: 0; } .swiper-slide-active .slider-title-block .slider-title-block-wrap { transform: scale(1, 1); } .swiper-slide-active .slider-title-block .slider-title-block-wrap .slider-title { opacity: 1; letter-spacing: 3px; } .swiper-slide-active .slider-title-block .slider-title-block-wrap .slider-sub-title { opacity: 1; } .swiper-slide-active .slider-title-block .slider-title-block-wrap .btn-default { opacity: 1; } .home-hero-personal { position: relative; } .home-hero-personal .hr-home { height: 50px; position: absolute; left: 0; right: 0; width: 100%; top: 50%; margin-top: -20px; background-color: rgba(233, 32, 79, 0.5); } .home-hero-personal .hr-home:after { position: absolute; left: 0; right: 0; bottom: -20px; content: ""; background-color: rgba(22, 22, 22, 0.77); height: 10px; z-index: -1; } .home-hero-personal .hr-home:before { position: absolute; left: 0; right: 0; top: -20px; content: ""; background-color: rgba(22, 22, 22, 0.77); height: 10px; } .home-hero-personal .hr-home span { position: absolute; background-color: #000; height: 10px; width: 10px; z-index: 0; } .home-hero-personal .hr-home span.point1 { top: -20px; left: -50px; animation: anim_point1 10s linear infinite; } .home-hero-personal .hr-home span.point2 { bottom: -20px; right: -80px; animation: anim_point2 8s linear infinite; } .home-hero-personal .top-block { position: relative; } .home-hero-personal .top-block .top-block-title { position: absolute; left: 0; right: 0; padding: 0 50px 15px 50px; text-align: center; bottom: 40px; font-size: 90px; text-transform: uppercase; color: #fff; letter-spacing: 3px; margin: 0; } .home-hero-personal .bottom-block { position: absolute; left: 0; right: 0; width: 100%; z-index: 20; padding-top: 45px; } .home-hero-personal .bottom-block h1 { padding: 30px 50px; text-align: center; } .home-hero-personal .face-image { position: absolute; bottom: 0; left: 0; width: 100%; } @keyframes anim_point1 { 0% { left: -50px; } 50% { left: 1450px; } 100% { left: 2250px; } } @keyframes anim_point2 { 0% { right: -80px; } 50% { right: 1450px; } 100% { right: 2050px; } } .portfolio-carousel-slider .slick-list { overflow: visible; margin: 0 -30px; } .portfolio-carousel-slider .slick-list .slick-slide { margin: 0 30px; } /*----------------------------------------- Mini blocks ------------------------------------------*/ .hover-effect { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: left; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .hover-effect:before { position: absolute; content: ""; left: 0; right: 0; top: 0; bottom: 0; z-index: 3; background-color: rgba(0, 0, 0, 0.7); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; opacity: 0; } .hover-effect:hover:before { opacity: 1; } .hover-effectweb { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: left; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .hover-effectweb:before { position: absolute; content: ""; left: 0; right: 0; top: 0; bottom: 0; z-index: 3; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; opacity: 0; } .webpageh div > div > ul > li:nth-child(1) > div > div > div:before{ background-color: #e7ce9a; } .webpageh div > div > ul > li:nth-child(2) > div > div > div:before{ background-color: #5b7d3a; } .webpageh div > div > ul > li:nth-child(3) > div > div > div:before{ background-color: #1f1f51; } .webpageh div > div > ul > li:nth-child(4) > div > div > div:before{ background-color: #2a3390; } .webpageh div > div > ul > li:nth-child(5) > div > div > div:before{ background-color: #fff; } .webpageh div > div > ul > li:nth-child(6) > div > div > div:before{ background-color: #451585; } .webpageh div > div > ul > li:nth-child(7) > div > div > div:before{ background-color: #fff; } .webpageh div > div > ul > li:nth-child(8) > div > div > div:before{ background-color: #fff7d6; } .hover-effectweb:hover:before { opacity: 1; } .hover-effectweb .block-item-content{ opacity: 0; } .hover-effectweb .block-item-content p{ font-size: 13px; text-align: left !important; text-transform: none !important; font-weight: 400 !important; letter-spacing: 0px !important; line-height: 25px; padding: 20px !important; } .hover-effectweb .block-item-content p b{ text-transform: uppercase; font-weight: 900; } .webpageh div > div > ul > li:nth-child(1) .block-item .block-item-wrap .hover-effectweb .block-item-content p{ color: #000 !important; font-family: 'Kanit', sans-serif; } .webpageh div > div > ul > li:nth-child(2) .block-item .block-item-wrap .hover-effectweb .block-item-content p{ color: #fff !important; font-family: 'Kanit', sans-serif; } .webpageh div > div > ul > li:nth-child(3) .block-item .block-item-wrap .hover-effectweb .block-item-content p{ color: #fff5ae !important; font-family: 'Kanit', sans-serif; } .webpageh div > div > ul > li:nth-child(4) .block-item .block-item-wrap .hover-effectweb .block-item-content p{ color: #ffe92b !important; font-family: 'Kanit', sans-serif; } .webpageh div > div > ul > li:nth-child(5) .block-item .block-item-wrap .hover-effectweb .block-item-content p{ color: #000 !important; font-family: 'Kanit', sans-serif; } .webpageh div > div > ul > li:nth-child(6) .block-item .block-item-wrap .hover-effectweb .block-item-content p{ color: #ffd965 !important; font-family: 'Kanit', sans-serif; } .webpageh div > div > ul > li:nth-child(7) .block-item .block-item-wrap .hover-effectweb .block-item-content p{ color: #000 !important; font-family: 'Kanit', sans-serif; } .webpageh div > div > ul > li:nth-child(8) .block-item .block-item-wrap .hover-effectweb .block-item-content p{ color: #000 !important; font-family: 'Kanit', sans-serif; } .hover-effectweb:hover .block-item-content{ opacity: 1; } .hover-effectweb{ border: 5px solid #fff; } .webfooter{ color: #fff; text-align: center; background-color: rgb(0 0 0 / 20%); padding: 20px 0; margin-bottom: 50px; width:100%; } .webpageh{ padding-top: 10px; background-color: rgb(0 0 0 / 20%); margin-bottom: 50px; margin-top: 30px; } .hover-effect img { width: 100%; } .block-item.wrap .block-item-wrap { padding-bottom: 0; padding-right: 0; } .block-item.center.full, .block-item.full { height: 100%; width: 100%; } .block-item.center.full .block-item-wrap, .block-item.full .block-item-wrap { height: 100%; width: 100%; padding: 0; } .block-item.center.full .block-item-wrap .hover-effect, .block-item.full .block-item-wrap .hover-effect { height: 100%; } .block-item.light .block-item-wrap .hover-effect:before { background-color: rgba(255, 255, 255, 0.3); } .block-item.light .block-item-wrap .block-item-content .item-text { color: #161616; } .block-item.light .block-item-wrap .block-item-content .item-text i { color: #161616; } .block-item.light .block-item-wrap .block-item-content .item-title { color: #000; text-shadow: 1px 1px 30px #ffffff; } .block-item.light .block-item-wrap .block-item-content .item-title:hover { color: #f27070; } .block-item.light:hover .block-item-wrap .hover-effect { box-shadow: rgba(233, 32, 79, 0.2) 0px 30px 100px; } .block-item { position: relative; } .block-item .block-item-wrap { padding-bottom: 90px; padding-right: 0; position: relative; } .block-item .block-item-wrap .block-item-content { position: absolute; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; top: 30%; bottom: inherit; z-index: 2; left: 40px; } .block-item .block-item-wrap .block-item-content .item-text { color: #ffffff; text-align: left; margin: 0 0 30px 0; padding: 0; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; font-family: 'Poppins', sans-serif; } .block-item .block-item-wrap .block-item-content .item-text i { font-size: 50px; margin: 0; color: #ffffff; } .block-item .block-item-wrap .block-item-content .item-title { font-size: 16px; line-height: 1.2em; position: relative; color: #ffffff; letter-spacing: 1px; display: inline-block; font-family: 'Poppins', sans-serif; padding-bottom: 5px; text-shadow: 1px 1px 30px #161616; } .block-item .block-item-wrap .block-item-content .item-title:after { content: ""; height: 2px; width: 60px; position: absolute; left: 1px; bottom: 0; background-color: #f27070; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .block-item .block-item-wrap .block-item-content .item-title:hover { color: #f27070; } .block-item .block-item-wrap .block-item-content .item-title:hover:after { width: 98%; } .block-item .block-item-wrap .block-item-content .img-add { padding-top: 30px; width: 22%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; opacity: 0; } .block-item:hover .block-item-wrap .block-item-content { -moz-transform: translateZ(80px) translateX(20px); -webkit-transform: translateZ(80px) translateX(20px); transform: translateZ(80px) translateX(20px); } .block-item:hover .block-item-wrap .block-item-content .img-add { opacity: 1; } .block-item.center .block-item-wrap { padding-right: 0; padding-left: 0; padding-bottom: 30px; } .block-item.center .block-item-wrap .hover-effect { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .block-item.center .block-item-wrap .block-item-content { text-align: center; top: inherit; left: inherit; } .block-item.center .block-item-wrap .block-item-content .item-text { text-align: center; } .block-item.center .block-item-wrap .block-item-content .item-title { text-align: center; } .block-item.center .block-item-wrap .block-item-content .item-title:after { margin-left: -30px; left: 50%; } .block-item.center .block-item-wrap .block-item-content .item-title:hover:after { left: 1px; margin-left: 0; } .block-item.center .block-item-wrap .block-item-content .img-add { margin: 0 auto; } .block-item.center:hover .block-item-wrap .block-item-content { -moz-transform: translateZ(80px); -webkit-transform: translateZ(80px); transform: translateZ(80px); } /*This will work for firefox*/ @-moz-document url-prefix() { .block-item.center .block-item-wrap .block-item-content { width: 100%; top: 33%; left: 0; z-index: 10; } .top-project .block-project-header { width: 100%; top: 23%; left: 0; } } .background-parallax { background-position: 50% 0; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .portfolio-filter-block .portfolio-list { margin-left: -25px; margin-right: -25px; } .portfolio-filter-block .portfolio-list .item { padding-left: 25px; padding-right: 25px; } .portfolio-filter-block .portfolio-list .item .block-item.center .block-item-wrap { padding-bottom: 60px; } .portfolio-filter-title { text-align: center; } .portfolio-filter-title ul { padding: 0; margin-bottom: 40px; } .portfolio-filter-title li { display: inline-block; margin: 0 5px 10px; } .portfolio-filter-title li a { font-size: 20px; color: #ffffff; display: inline-block; text-decoration: none; border: none; border-bottom: 2px solid transparent; padding: 11px 20px; line-height: 19px; font-family: 'Poppins', sans-serif; } .portfolio-filter-title li a:hover, .portfolio-filter-title li a:focus { color: #f27070; } .portfolio-filter-title li.current a { color: #f27070; } ul { margin-bottom: 30px; } ul li { line-height: 28px; } ul li i { color: #ccc; margin-right: 5px; } .block-client-say .top-icon { line-height: 50px; width: 40px; display: inline-block; text-align: center; font-size: 50px; color: #f27070; margin-bottom: 30px; } .slider-buttons span { width: 40px; display: inline-block; } .slider-buttons a { display: inline-block; width: 30px; height: 30px; text-align: center; line-height: 30px; font-size: 18px; } .slider-buttons.s1 { padding: 10px 50px; position: relative; z-index: 100; } .slider-buttons.s1 .block-right { right: 50px; position: absolute; top: 10px; } .slider-buttons.s2 { position: absolute; z-index: 10; right: 0; top: 8px; } .block-service-mini { padding: 60px 50px 0; box-shadow: 0 0 1px #333; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .block-service-mini:hover { box-shadow: 0 0 2px #f27070; } .block-service-mini:hover .block-feature.top-icon.center .icon-feature { color: #f27070; } .block-service-mini.dark { box-shadow: 0 2px 55px -15px #cccccc; } .block-service-mini.dark:hover { box-shadow: 0 10px 50px -15px #f27070; } .block-client { padding: 5px; box-shadow: 0 0 1px #333; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .block-client a { opacity: 0.4; } .block-client:hover { box-shadow: 0 0 2px #f27070; } .block-client:hover a { opacity: 1; } .block-client.dark { box-shadow: 0 0 1px #ccc; } .block-client.dark a { opacity: 1; } .block-client.dark:hover { box-shadow: 0 0 2px #f27070; } .block-client.dark:hover a { opacity: 0.7; } .block-feature { position: relative; padding: 0 0 30px 60px; } .block-feature h4 { color: #ffffff; font-family: 'Poppins', sans-serif; margin: 3px 0 0; letter-spacing: 1px; } .block-feature li a { color: #ffffff; font-family: 'Poppins', sans-serif; } .block-feature li a:hover { color: #ccc; } .block-feature > p { color: #ccc; font-family: 'Poppins', sans-serif; } .block-feature > .icon-feature { position: absolute; left: 0; top: 0; line-height: 26px; font-size: 40px; color: #f27070; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } .block-feature.right { padding: 5px 60px 30px 0; text-align: right; } .block-feature.right .icon-feature { left: inherit; right: 0; } .block-feature.right a { text-align: right; } .block-feature.right p { text-align: right; } .block-feature.right h4 { text-align: right; } .block-feature.right h2 { text-align: right; } .block-feature.top-icon { padding: 0 0 30px 0; } .block-feature.top-icon h4 { margin: 0; } .block-feature.top-icon .icon-feature { position: relative; line-height: 50px; width: 60px; display: inline-block; text-align: center; font-size: 50px; top: 0; color: #f27070; margin-bottom: 20px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } .block-feature.top-icon .a-attract-hover { font-size: 30px; width: 40px; height: 40px; display: inline-block; margin-top: -10px; margin-bottom: 30px; } .block-feature.top-icon.center .icon-feature { margin: 0 auto 30px; display: block; } .block-feature.top-icon.center a { text-align: center; } .block-feature.top-icon.center p { text-align: center; } .block-feature.top-icon.center h2 { text-align: center; } .block-feature.top-icon.center h4 { text-align: center; } .block-feature.top-icon.right h2 { text-align: right; } .block-feature.top-icon.right .icon-feature { margin: 0 0 10px auto; } .block-feature.top-icon.right a { text-align: right; } .block-feature.top-icon.right p { text-align: right; } .block-feature.top-icon.right h4 { text-align: right; } .block-feature.dark h4 { color: #161616; } .block-feature.dark h2 { color: #161616; } .block-feature.dark > a { color: #161616; } .block-feature.dark > a:hover { color: #f27070; } .block-feature.dark li a { color: #161616; } .block-feature.dark li a:hover { color: #f27070; } .block-feature.dark p { color: rgba(22, 22, 22, 0.9); } .block-feature.dark .icon-feature { color: #f27070; } .block-team { position: relative; text-align: center; } .block-team:after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(22, 22, 22, 0.77); opacity: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; z-index: 1; } .block-team .block-team-link { z-index: 3; position: absolute; bottom: 0; width: 100%; left: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; opacity: 0; } .block-team .block-team-header { position: absolute; z-index: 2; left: 0; bottom: 0; width: 100%; text-align: center; padding: 90px 50px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .block-team .block-team-header .head-sub-title { padding-bottom: 0; } .block-team .block-team-header p { padding: 0 0 5px 0; margin: 0; } .block-team:hover .block-team-header { padding: 60px 60px 130px 60px; } .block-team:hover .block-team-link { bottom: 70px; opacity: 1; } .block-team:hover:after { opacity: 1; } .progress { height: 1px; border-radius: 0; margin: 30px 0 60px; box-shadow: none; background-color: rgba(22, 22, 22, 0.3); position: relative; overflow: visible; border-radius: 30px; } .progress .progress-bar { background-color: #f27070; height: 1px; position: absolute; bottom: 0; } .progress .skill-value { float: left; position: absolute; width: 100%; top: -41px; color: #000; font-size: 1.25rem; line-height: 40px; height: 40px; font-family: 'Poppins', sans-serif; font-weight: 100; } .progress .skill-value span { color: #f27070; float: right; } .progress.light { background-color: rgba(255, 255, 255, 0.1); } .progress.light .skill-value { color: #ccc; font-family: 'Poppins', sans-serif; font-size: 15px; } .progress.light .skill-value span { color: #ffffff; } .progress.light .progress-bar { background-color: #f27070; } .card { background: none; border: none; text-align: center; } .card .card-header { border: none; } .card .card-header .btn-link { font-family: 'Poppins', sans-serif; color: #ffffff; text-decoration: none; } .card .card-header .btn-link:hover, .card .card-header .btn-link:focus { text-decoration: none; } .card .card-body { background-color: rgba(22, 22, 22, 0.5); color: #ccc; text-align: left; } .fact-block .fact { text-align: center; position: relative; padding: 20px 35px; margin: 0 0 30px; border-radius: 10px; border: 2px solid #ccc; } .fact-block .fact .factor { font-family: 'Poppins', sans-serif; font-size: 40px; color: rgba(233, 32, 79, 0.8); line-height: 40px; text-align: right; margin: 0 0 20px; } .fact-block .fact h4 { letter-spacing: 1px; text-align: right; font-weight: 100; color: #ffffff; margin: 0; font-family: 'Poppins', sans-serif; } .fact-block .fact i { font-size: 50px; line-height: 50px; padding-bottom: 30px; color: #ffffff; float: left; width: 50px; } .fact-block .fact:hover { cursor: pointer; border-color: #f27070; } .fact-block.out-of-border .fact { border: none; background: none; padding: 0px; } .fact-block.out-of-border .fact .factor { font-size: 25px; line-height: 25px; text-align: center; } .fact-block.out-of-border .fact h4 { text-align: center; } .fact-block.out-of-border .fact i { font-size: 50px; line-height: 50px; display: block; width: 100%; text-align: center; } .fact-block.left .fact { padding: 0 !important; } .fact-block.left .fact .factor { text-align: left !important; } .fact-block.left .fact h4 { text-align: left !important; } .fact-block.left .fact i { text-align: left !important; } .fact-block.white .fact { border: none; } .fact-block.white .fact .factor { color: rgba(255, 255, 255, 0.7); } .fact-block.white .fact h4 { color: #ffffff; } .fact-block.white .fact i { color: #f27070; } .fact-block.white .fact:hover { border-color: #ffffff; } .block-pricing-table { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; box-shadow: 0 0 1px #333; padding: 60px 50px 30px 50px; } .block-pricing-table p { margin-bottom: 10px; } .block-pricing-table .table-price { padding-bottom: 0; font-family: 'Poppins', sans-serif; color: #f27070; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .block-pricing-table .table-date { margin-bottom: 30px; color: #888; } .block-pricing-table:hover, .block-pricing-table.active { box-shadow: 0 0 2px #f27070; } .block-pricing-table.dark { box-shadow: 0 2px 55px -15px #cccccc; } .block-pricing-table.dark:hover, .block-pricing-table.dark.active { box-shadow: 0 10px 50px -15px #f27070; } .block-blog { position: relative; padding: 0; margin-bottom: 30px; } .block-blog .block-text-container { padding: 60px 30px 30px 30px; background-color: #080808; } .block-blog .head-sub-title { padding-bottom: 0; } .block-blog p.font-italic { color: #777; } .block-blog .blog-image { position: relative; } .block-blog .blog-info a { margin: 0 5px; } .block-blog .blog-info a i { margin: 0 5px; display: inline-block; } .block-blog:hover .block-text-container { background-color: #0a0a0a; } .block-blog:hover .simpleParallax:after, .block-blog:hover .simpleParallax:before { opacity: 1; } .social-icon { margin: 0; } .social-icon li { display: inline-block; margin: 0 15px; } .social-icon li a { text-decoration: none; } .social-icon li a i { color: #999; text-align: right; line-height: 20px; font-size: 18px; text-align: center; margin: auto; display: block; width: 20px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .social-icon li a:hover i { color: #f27070; } .social-icon li:last-child { margin: 0 0 0 15px; } .social-icon.big li { margin: 0 5px; } .social-icon.big li a i { font-size: 28px; width: 30px; } .social-icon.vertical { width: 35px; padding-bottom: 40px; } .social-icon.vertical li { margin: 0; } .social-icon.vertical li a i { line-height: 30px; } .social-icon.white li a i { color: #fff; } .social-icon.white li a:hover i { color: #f27070; } .social-icon.dark li a i { color: #222; } .social-icon.dark li a:hover i { color: #f27070; } .widget-block { padding-bottom: 30px; } /* ========================================================================== Contact style ========================================================================== */ form input, form select, form textarea { -moz-box-sizing: border-box; box-sizing: border-box; border: none; text-align: center; border: 1px solid rgba(22, 22, 22, 0.3); border-radius: 0; color: #161616; line-height: 32px; padding: 6px 20px; width: 100%; font-size: 15px; background: none; margin-bottom: 0; } form input:focus, form select:focus, form textarea:focus { outline: none; } form textarea { height: 122px; } form .textarea { margin-bottom: 25px; } form input.white, form textarea.white, form select.white { border: 1px solid rgba(255, 255, 255, 0.1); background: none; color: #ffffff; } form input.white:focus, form select.white:focus, form textarea.white:focus { outline: none; } #MyContactForm p span { display: block; letter-spacing: 2px; text-transform: uppercase; } input:focus, textarea:focus { border-color: #f27070; } form input.white:focus, form select.white:focus, form textarea.white:focus { border-color: #f27070; } ::-webkit-input-placeholder { color: #ccc; font-family: 'Poppins', sans-serif; } #MyContactForm p label, #MyNewsletter p label { cursor: text; display: block; margin: 0 0; position: relative; top: 0; width: 100%; } :-moz-placeholder { /* Firefox 18- */ color: #ccc; font-family: 'Poppins', sans-serif; } ::-moz-placeholder { /* Firefox 19+ */ color: #ccc; font-family: 'Poppins', sans-serif; } :-ms-input-placeholder { color: #ccc; font-family: 'Poppins', sans-serif; } #form-wrapper #MyContactForm .error { bottom: 25px; color: #FF2255; font-family: inherit; font-size: 12px; font-weight: normal; left: auto; letter-spacing: 0; position: absolute; right: 20px; text-transform: capitalize; width: auto; } #newsletter-form-wrapper #MyNewsletter .newslettererror { bottom: 25px; color: #FF2255; font-family: inherit; font-size: 12px; font-weight: normal; left: auto; letter-spacing: 0; position: absolute; right: 20px; text-transform: capitalize; width: auto; } .contact-btn:focus { text-decoration: none; } .newsletter-btn.btn-default { display: inline-block; margin-bottom: 30px; } #MyContactForm p { position: relative; } #ErrResults { text-align: center; color: #f27070; } /* ========================================================================== Ajax style ========================================================================== */ .ajax-block { background-color: rgba(22, 22, 22, 0.9); margin: 0 auto; position: relative; } /*----------------------------------------- Background ------------------------------------------*/ .min-100 { min-height: 100vh; } .home1 { background-image: url("../img/bg/bg2.jpg"); background-size: cover; background-position: center center; } .background-1 { background-image: url("../img/hero01.jpg"); } .background-2 { background-image: url("../img/hero02.jpg"); background-size: cover; background-position: center center; } .background-3 { background-image: url("../img/hero03.jpg"); background-size: cover; background-position: center center; } .background-4 { background-image: url("../img/hero00.jpg"); background-size: cover; background-position: center center; } .background-5 { background-image: url("../img/hero-contact.jpg"); background-size: cover; background-position: center center; background-attachment: fixed; } .google-map { height: 600px; } .google-map iframe { overflow: hidden; height: 100% !important; width: 100% !important; border: none; pointer-events: none; -webkit-filter: grayscale(100%) contrast(50%) opacity(0.8); -moz-filter: grayscale(100%) contrast(50%) opacity(0.8); -ms-filter: grayscale(100%) contrast(50%) opacity(0.8); -o-filter: grayscale(100%) contrast(50%) opacity(0.8); filter: grayscale(100%) contrast(50%) opacity(0.8); } .bg-img-wrapper { width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0; margin: 0 auto; display: table; position: relative; box-sizing: border-box; -webkit-transition: 1.3s ease-in-out; transition: 1.3s ease-in-out; } .bg-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-size: cover; background-attachment: scroll; background-position: center; background-repeat: repeat; background-origin: content-box; } .effect-parallax { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-transform: rotate(0) scale(1.06) skew(0) translate(0); -moz-transform: rotate(0) scale(1.06) skew(0) translate(0); -o-transform: rotate(0) scale(1.06) skew(0) translate(0); -ms-transform: rotate(0) scale(1.06) skew(0) translate(0); transform: rotate(0) scale(1.06) skew(0) translate(0); } /* ========================================================================== Footer section style ========================================================================== */ .block-footer-link.dark .big-title { background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, #f1f1f1 100%); background: -webkit-linear-gradient(-90deg, rgba(0, 0, 0, 0.2) 0%, #f1f1f1 100%); background-clip: text; -webkit-background-clip: text; color: transparent; } .block-footer-link.dark .footer-link { color: #222; } .block-footer-link.dark .footer-link:hover { color: #f27070; } .block-footer-link { position: relative; text-align: center; } .block-footer-link .big-title { font-size: 100px; display: block; letter-spacing: 3px; text-transform: uppercase; position: relative; font-family: 'Poppins', sans-serif; line-height: 90px; font-weight: bold; margin: 0; height: 80px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, #161616 100%); background: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.2) 0%, #161616 100%); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; -ms-transition: all 0.8s ease; transition: all 0.8s ease; } .block-footer-link .footer-link { letter-spacing: 1px; text-transform: uppercase; font-weight: 600; display: inline-block; text-align: center; margin-bottom: 30px; color: #ffffff; } .block-footer-link .footer-link:hover { color: #f27070; } /*This will work for firefox*/ @-moz-document url-prefix() { .block-footer-link .big-title { color: rgba(255, 255, 255, 0.1); background: none; } } #footer.light { background-color: #f1f1f1; } #footer { position: relative; padding: 60px 50px 30px 50px; background-color: #161616; } #footer .head-sub-title { padding: 0; } #footer a.chat { display: inline-block; font-size: 18px; margin-right: 20px; } .servicepage .navbar-dark .navbar-nav .nav-link { color: #000000; }