/* ---------------------------------------------------------------- Canvas: Car -----------------------------------------------------------------*/ /* Custom Header Size -----------------------------------------------------------------*/ .header-size-custom #logo img { height: 50px; } @media (min-width: 992px) { .header-size-custom .header-wrap-clone { height: calc( 50px + 1px ); } #header.header-size-custom + .include-header { margin-top: calc( -50px - 2px ); } .header-size-custom .menu-container > .menu-item > .menu-link { padding-top: 14px; padding-bottom: 14px; } } /* Runing Car -----------------------------------------------------------------*/ .running-car { position: relative; top: 0; left: 0; width: 659px; } img.car, img.wheel { -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; transition: all 1s ease-out; margin-left: -660px; } img.wheel { position: absolute; left: 401px; bottom:33px; z-index: 1; } .running-car.in-view img.car { -webkit-transform: translate(600px,0px) rotate(0deg); -moz-transform: translate(600px,0px) rotate(0deg); transform: translate(600px,0px) rotate(0deg); } .running-car.in-view img.wheel { -webkit-transform: translate(600px,0px) rotate(600deg); -moz-transform: translate(600px,0px) rotate(600deg); transform: translate(600px,0px) rotate(600deg); } .device-sm .running-car.in-view img.car { -webkit-transform: translate(500px,0px) rotate(0deg); -moz-transform: translate(500px,0px) rotate(0deg); transform: translate(500px,0px) rotate(0deg); } .device-sm .running-car.in-view img.wheel { -webkit-transform: translate(500px,0px) rotate(600deg); -moz-transform: translate(500px,0px) rotate(600deg); transform: translate(500px,0px) rotate(600deg); } .device-xs .running-car.in-view img.car { -webkit-transform: translate(350px,0px) rotate(0deg); -moz-transform: translate(350px,0px) rotate(0deg); transform: translate(350px,0px) rotate(0deg); } .device-xs .running-car.in-view img.wheel { -webkit-transform: translate(350px,0px) rotate(600deg); -moz-transform: translate(350px,0px) rotate(600deg); transform: translate(350px,0px) rotate(600deg); } /* Threesixty degree Styles -----------------------------------------------------------------*/ .threesixty { position: relative; overflow: hidden; margin: 0 auto; cursor: ew-resize; } .threesixty .threesixty_images { display: none; list-style: none; margin: 0; padding: 0; } .threesixty .threesixty_images img { position: absolute; top: 10px; } .threesixty .threesixty_images img.previous-image {visibility: hidden; } .threesixty .threesixty_images img.current-image { visibility: visible; } .threesixty .spinner { width: 60px; display: block; margin: 0 auto; height: 30px; background: #333; background: rgba(0, 0, 0, 0.7); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .threesixty .spinner span { font-size: 12px; font-weight: bolder; color: #FFF; text-align: center; line-height: 30px; display: block; } .threesixty .nav_bar { position: absolute; top: 0; bottom: auto; left: 50%; margin-left: -48px; z-index: 11; } .threesixty .nav_bar a { display: block; width: 32px; height: 32px; float: left; background: url('../images/navs.png') no-repeat; text-indent: -99999px; } .threesixty .nav_bar a.nav_bar_play { background-position: 0 0 !important; } .threesixty .nav_bar a.nav_bar_previous { background-position: -3px -73px !important; } .threesixty .nav_bar a.nav_bar_stop { background-position: 0 -37px !important; } .threesixty .nav_bar a.nav_bar_next { background-position: 3px -104px !important; } /* html */ .threesixty:-webkit-full-screen { background: #ffffff; width: 100%; height: 100%; margin-top: 0; padding-top: 200px; } .threesixty:-moz-full-screen { background: #ffffff; width: 100%; height: 100%; margin-top: 0; padding-top: 200px; } /* heading-block */ .heading-block.hlarge h3 { font-size: 44px; line-height: 50px; letter-spacing: -2px; } /* Slider Area -----------------------------------------------------------------*/ .slider-caption h2 { text-transform: none; letter-spacing: 0; line-height: 1; font-size: 48px; line-height: 1.3; margin-bottom: 10px; } .slider-caption p { font-size: 18px; margin-bottom: 20px; } .slider-caption h2, .slider-caption p, .slider-caption .button { opacity: 0; -webkit-transform: translate3d(-20%,0,0); -ms-transform: translate3d(-20%,0,0); -o-transform: translate3d(-20%,0,0); -webkit-transition: -webkit-transform .05s ease-out; transition: -webkit-transform .05s ease-out; transition: transform .05s ease-out; transition: transform .05s ease-out, -webkit-transform .05s ease-out; backface-visibility: hidden; } .swiper-slide.swiper-slide-active .slider-caption h2, .swiper-slide.swiper-slide-active .slider-caption p, .swiper-slide.swiper-slide-active .slider-caption .button { opacity: 1; -webkit-transition: transform 1s, opacity 2s; -o-transition: transform 1s, opacity 2s; transition: transform 1s, opacity 2s; -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); backface-visibility: hidden; } .swiper-slide.swiper-slide-active .slider-caption p { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .swiper-slide.swiper-slide-active .slider-caption .button { -webkit-transition: transform 1s, opacity 3s; -o-transition: transform 1s, opacity 3s; transition: transform 1s, opacity 3s; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .swiper-pagination { bottom: 20px !important; } .swiper-pagination span { width: 40px; height: 4px; background: #FFF; display: inline-block; margin: 0px 1px; border: 0; border-radius: 0; -webkit-transform: skew(-38deg); -moz-transform: skew(-38deg); -ms-transform: skew(-38deg); -o-transform: skew(-38deg); } .swiper-pagination span.swiper-pagination-bullet-active { background-color: #c85e51 !important; } .feature-box.fbox-plain .fbox-icon img { height: 48px; } .section .iconlist li { margin-bottom: 6px; font-size: 16px; letter-spacing: 1px; font-weight: 300; } /* Portfolio Filter -----------------------------------------------------------------*/ .grid-filter.style-2 { margin: 0 0 15px -14px; } .grid-filter li.activeFilter a { font-weight: normal; } .grid-filter.style-2 li a:not(.button) { font-size: 20px; color: #555 !important; } .grid-filter.style-2 li a.button-reset { padding: 0 17px !important; font-size: 12px; line-height: 34px; color: #FFF !important; border-radius: 23px; text-transform: none; letter-spacing: 1px; } .grid-filter.style-2 li a span { display: block; margin-top: 7px; font-family: 'Mukta Vaani'; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; color: #AAA; font-weight: bold; text-align: center; } .grid-filter.style-2 li a:not(.button), .grid-filter.style-2 li a span { -webkit-transition: color .3s ease; -o-transition: color .3s ease; transition: color .3s ease; } .grid-filter.style-2 li a:not(.button):hover, .grid-filter.style-2 li a:not(.button):hover span, .grid-filter.style-2 li.activeFilter a:not(.button), .grid-filter.style-2 li.activeFilter a:not(.button) span { color: #c85e51 !important; background-color: transparent !important; } .grid-filter.style-2 li.activeFilter a.button-reset { opacity: 0; -webkit-transition: opacity .4s ease; -o-transition: opacity .4s ease; transition: opacity .4s ease; } .grid-filter.style-2 li a.button-reset { opacity: 1; } .portfolio-desc span { font-size: 0.875rem; } .filter-p-pricing { position: absolute; bottom: 20px; right: 0; background: #c85e51; color: #FFF; padding: 8px 15px; z-index: 1; font-family: 'Mukta Vaani'; } .filter-p-pricing::before { position: absolute; content: ''; display: block; top: 0; left: -8px; height: 100%; width: 32px; background-color: #c85e51; -moz-transform: skew(-23deg,0deg); -o-transform: skew(-23deg,0deg); -ms-transform: skew(-23deg,0deg); -webkit-transform: skew(-23deg,0deg); transform: skew(-23deg,0deg); z-index: -1; } .p-price-msrp { font-weight: 300; padding-left: 12px; margin-left: 10px; border-left: 1px solid rgba(255, 255, 255, 0.2); } .car-p-features { border-top: 1px solid #DDD; padding: 5px 8px; margin-top: 5px; } .car-p-features [class^=col-] { margin-top: 5px; } .car-p-features i { position: relative; top: 1px; margin-right: 4px; } .car-p-features span { color: #555; font-size: 13px; color: #666; } .half-screen { position: relative; height: 25%; } .section .video-wrap { z-index: 0; } /* Video On Hover -----------------------------------------------------------------*/ .videoplay-on-hover .vertical-middle, .videoplay-on-hover .video-overlay { opacity: 1; -webkit-transition: opacity .2s ease; -o-transition: opacity .2s ease; transition: opacity .2s ease; } .videoplay-on-hover:hover .vertical-middle, .videoplay-on-hover:hover .video-overlay { opacity: 0; } .counter + h5 { margin-top: 0; } .counter-section [class^=col-] { border-left: none; margin-bottom: 30px; } /* Page Loader -----------------------------------------------------------------*/ .css3-spinner { background-color: #e6e6e6; } .css3-spinner > div { margin-top: -65px; margin-left: -80px; width: 160px; height: 120px; background-color: transparent; -webkit-animation: none; animation: none; } /* Border Form Design ---------------------------------------------------------------------------- */ .border-form-control { padding: 7px 4px; font-size: 17px; background-color: transparent !important; border-top: transparent; border-right: transparent; border-left: transparent; border-bottom-width: 1px; border-color: #444; font-family: 'Mukta Vaani', sans-serif; } .customjs.btn-default:active, .customjs.btn-default.active, .customjs.open > .dropdown-toggle.btn-default, .customjs.border-form-control .btn-default { background-color: transparent !important; font-weight: 300; border: none; box-shadow: none; padding: 0; text-transform: uppercase; letter-spacing: 1px; line-height: inherit; font-size: 14px; color: #FFF !important; } .customjs.bootstrap-select .dropdown-toggle:focus, .customjs.bootstrap-select .dropdown-menu { margin: 0; outline: 0px !important; outline-offset: 0px !important; } .border-form-control::-moz-placeholder { font-weight: 300; color: #CCC; } .border-form-control:-ms-input-placeholder {font-weight: 300; color: #CCC; } .border-form-control::-webkit-input-placeholder { font-weight: 300; color: #CCC; } textarea.border-form-control { resize: none; overflow: hidden; word-wrap: break-word; } .widget .oc-item a { font-size: 11px; color: #666; font-weight: 500; } .bootstrap-select.btn-group .dropdown-menu a.dropdown-item span.dropdown-item-inner.opt { padding-left: 0.8rem; } .dropdown-toggle::after { margin-left: -10px; } .dark .btn-light.dropdown-toggle:focus { box-shadow: none !important; } /* Footer -----------------------------------------------------------------*/ .widget_links li, .widget_links li a { background-image: none !important; padding-left: 0; color: #555 !important; font-size: 13px; font-weight: 400; padding-top: 1px; } .dark .form-control:not(.not-dark), .dark .sm-form-control:not(.not-dark), .dark .form-control:not(.not-dark):active, .dark .form-control:not(.not-dark):focus, .dark .sm-form-control:not(.not-dark):active, .dark .sm-form-control:not(.not-dark):focus { border-color: rgba(255, 255, 255, 0.5) !important; } /* Larger Device View -----------------------------------------------------------------*/ @media (min-width: 992px) { /* Primary Menu Header size */ #header { border-bottom: 1px solid #e7e7e7 } #header.full-header #logo, #header.full-header .menu-container { border-right: 0; padding-right: 0; margin-right: 0; } /* Slider caption */ .swiper-pagination { bottom: 40px !important; } .swiper-pagination span { width: 70px; height: 6px; } .slider-caption.top-left { margin-top: -150px; } /* 360 degree */ .threesixty .threesixty_images img { top: 30px; } .threesixty .nav_bar { top: 10px; } .counter-section [class^=col-]:not(:first-child) { border-left: 1px solid rgba(255,255,255,0.05); margin-bottom: 0; } .half-screen { position: relative; height: 50%; } .heading-block.hlarge h3 { font-size: 64px; line-height: 56px; } /* running car */ .running-car { position: absolute; top: 0; left: 0; width: 659px; } .slider-text h2 { font-size: 2.5rem; } } #contact-me { position: fixed; z-index: 299; width: 40px; height: 40px; font-size: 20px; line-height: 36px; text-align: center; color: #FFF; top: auto; left: auto; right: 30px; bottom: 30px; cursor: pointer; border-radius: 2px; -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: transform .3s ease; -o-transition: transform .3s ease; transition: transform .3s ease; } .gototop-active #contact-me { -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); -o-transform: translateY(-50px); transform: translateY(-50px); } #header.sticky-header #header-wrap { -webkit-transition: left .4s ease; -o-transition: left .4s ease; transition: left .4s ease; } body.side-panel-open #header.sticky-header #header-wrap { left: -300px; } body #side-panel .widget { opacity: 0; -webkit-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); -webkit-transition: transform .3s ease, opacity .3s ease; -o-transition: transform .3s ease, opacity .3s ease; transition: transform .3s ease, opacity .3s ease; } body.side-panel-open #side-panel .widget { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .play-icon { position: relative; display: block; font-size: 22px; width: 50px; height: 50px; line-height: 52px; left: 50%; margin-left: -25px; border-radius: 50%; color: #222 !important; background-color: #FFF; -webkit-transition: transform .3s ease; -o-transition: transform .3s ease; transition: transform .3s ease; } .play-icon i { position: relative; left: 3px; } .play-icon:hover { -webkit-transform: scale(1.15); -ms-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); } .arrow-box::after { right: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-right-color: #ffffff; border-width: 12px; margin-top: -12px; z-index: 1; } .arrow-box.right::after { left: 100%; border-right: 0; border-left-color: #ffffff; }