@import '_variable', '_default'; /*Navbar*/ .navbar-default { background: #f5f5f5; } .navbar { border-bottom: 0; padding: 0; } .sidebar .navbar-nav { background: transparent; margin: 0; } .navbar.navbar-default { transition: none; } header #navbar { width: $size100; background: #f49b00; } .navbar-default{ a.navbar-brand{ font-size: 24px; position: relative; color: #f49b00; letter-spacing: 2px; font-weight:$fontnormal; display:block; padding: 0; height: auto; transition: $transition; transition: color 0.5s ease; -webkit-transition: color 0.5s ease; -moz-transition: color 0.5s ease; margin-right:0; flex: 1; span{color: #fc883a;} &:hover{color: #D60D45;} } .navbar-nav{ li, li.active{ a, a:hover{background: #f33807; } background: #f33807; } } } /* Main Menu Dropdown */ .navbar-nav{ li{ position: relative; text-align: left; margin-bottom: 0; ul{ z-index: 9999; padding: 0; margin: 0; position: absolute; top: 50px; left: 0; width: 190px; display: none; border: $borderall; border-top: 2px solid #f33807; -webkit-box-shadow: 0px 0px 12px -3px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0px 0px 12px -3px rgba(0, 0, 0, 0.4); box-shadow: 0px 0px 12px -3px rgba(0, 0, 0, 0.4); li{ border-bottom: 1px solid #f1f1f1; &:last-child{border-bottom: none;} &:hover{ a{ padding-left: 20px; padding-right: 10px; text-decoration: none; } ul{ li{ a{ padding-left: 15px; padding-right: 15px; } } } } a{ display: block; padding: 7px 15px; font-size: 15px; font-weight: $fontmiddle; color: #636363; &:hover{color: #f33807;} } ul{ position: absolute; left: 188px; top: -2px; li{ ul{ li{ &:hover{ a{ padding-left: 20px; padding-right: 10px; } } } } } } } } } } .navbar-nav{ li>{ ul>{ li{ &:last-child>{ a{border-bottom: 0;} } ul>{ li{ &:last-child>{ a{border-bottom: 0;} } } } } } } } .main_header_area{ position: relative; width: $size100; .notify-bar{ background:linear-gradient(to right, #e9595e 1%, #dcb86c 100%); position: relative; padding: 3px 0; .notify-in{ position:relative;y a.shop-btn{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); } } } .header-content { position:relative; z-index:1; background: #ffffff30; li { display: inline-block; padding: 0px 15px; border-left: 1px solid #f1f1f136; margin: 0; &:first-child { border: none; padding-left: 0; } &:last-child { padding-right: 0; } } a, i{ font-size: 14px; } } .header_menu.fixed-top{ box-shadow:$box-shadow; background:$white; } .header_menu.hide{ top: -94px; animation-name:slideInUp; } .register-login { a{ font-size:15px; text-transform: uppercase; color: $bgrey; } .dropdown a{ color: $bgrey!important; text-transform:capitalize; } .btn-info{ border:none; background:transparent; font-size: 15px; font-weight: 400; text-transform: uppercase; padding:0; } } } .main_header_area{ .header_menu.fixed-top { .register-login { a{color: $bgrey!important;} a.nir-btn{ color: $white!important; &:hover{color: $white!important;} } } } } .main_header_area.headerstye-1{ position: absolute; width: $size100; .header_menu { .navbar.navbar-default { .navbar-header{ .navbar-brand{ padding: 0; margin: 0; img{ display: block; +img{ display:none; } } } } .nav.navbar-nav { li { margin-right: 0; a{color:$white; padding: 10px;} &:hover >{ a{color:$themecolor;} } } li.active >{ a{color:$themecolor;} } } } .search-main { a i{color: $white;} } } .header_menu.fixed-top { .navbar-default{ background:$white; .navbar-header{ .navbar-brand{ padding: 0; margin: 0; img{ display: none!important; +img{ display:block!important; } } } } } .search-main{ a i{color: $bgrey;} } } } @media(max-width:1400px) and (min-width:1300px){ .main_header_area, .main_header_area.headerstye-1 { .header_menu { .navbar.navbar-default { .nav.navbar-nav li a{ padding: 10px 6px; font-size:14px; } } } } } @media(max-width:991px){ .headerstye-1 { .header-content{ display:none; } .navbar-header{ display:block; } } .main_header_area .header-content, .search-main{ display:none!important; } } @media(max-width: 735px){ .main_header_area { .header-content{display:none!important;} } } .header_menu{ .navbar.navbar-default{ border-radius: 0px; margin-bottom: 0px; background: transparent; border: none; width: $size100; z-index:9; .navbar-header{ .navbar-brand{ padding: 0; margin: 0; img{ display: block; +img{ display:none; } } } } .navbar-collapse{ text-align: right; padding: 0; } .nav.navbar-nav { float: none; text-align: right; display: inline-block; background: transparent; li{ float: none; display: inline-block; margin-right: 0; background: transparent; &:last-child{ margin: 0; } a{ background: transparent; font-size: 15px; font-weight: $fontnormal; text-transform: $textupper; padding: 0px; line-height: inherit; transition: all 150ms linear; border: none; padding:0 8px; i{font-size: 12px;} i.fa-angle-right{ position: absolute; right: 15px; top: 20px; } &:after{display:none;} } } li:hover, li.active{ a{ color:$themecolor; background: transparent; } } li.submenu{ position: relative; .dropdown-menu{ border: none; padding: 0px; border-radius: 0px; -webkit-box-shadow: none; box-shadow: none; &:before{ content: ''; width: 0; height: 0; border-style: solid; border-width: 10px 10px 0 10px; border-color: #eeeeee transparent transparent transparent; position: absolute; right: 24px; top: 45px; z-index: 3; opacity: 0; -webkit-transition: all 400ms linear; -o-transition: all 400ms linear; transition: all 400ms linear; } li{ display: block; float: none; margin-right: 0px; border-bottom: 1px dashed $grey; a{ line-height: 3; color: $bgrey; font-size: 15px; padding: 3px 20px; font-weight: $fontnormal; letter-spacing: .30px; -webkit-transition: all 150ms linear; -o-transition: all 150ms linear; transition: all 150ms linear; display: block; text-transform: $textcap; &:hover{ background: $themecolor; color: $white; } } &:last-child{ border-bottom: none; } ul{ overflow: visible; } } } } } .nav.navbar-nav.navbar-right{ li{ &:last-child{ margin-right: 0px; } } } } .navbar.navbar-default.navbar-sticky-in{ .nav.navbar-nav{ li:hover>, li.active>{ a{ color: $themecolor; } } } } } .main_header_area{ .header_mlogo{ .navbar.navbar-default{ .navbar-header{display:none; transition: $transition;} } .navbar.navbar-default.navbar-sticky-in{ .navbar-header{display:block; transition: $transition;} .navbar-middle{display:none; transition: $transition;} } } .header_menu.header_mlogo1.fixed-top{ position:relative; animation:none; top:0; } } @media(max-width:991px){ .main_header_area .header_mlogo .navbar.navbar-default .navbar-header{ display:block; } .navbar-middle{display:none;} .header-start{padding-top:0!important;} } /*Fullpage search*/ #search1 { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #fff; z-index: 9999; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-transform: translate(0px, -100%) scale(0, 0); -moz-transform: translate(0px, -100%) scale(0, 0); -o-transform: translate(0px, -100%) scale(0, 0); -ms-transform: translate(0px, -100%) scale(0, 0); transform: translate(0px, -100%) scale(0, 0); opacity: 0; input[type="search"] { position: absolute; top: 40%; width: 50%; color: $bgrey; background: transparent; font-size: 48px; font-weight: $fontnormal; text-align: center; border-width: 0 0 1px; margin: 0px auto; padding: 20px 30px; outline: none; margin-bottom: 30px; height: 82px; left: 0; right: 0; border-radius: 0; border-bottom:1px solid #f1f1f1; } .btn { position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto; background: $themecolor; padding: 15px 30px; border: none; border-radius:10px; font-size: 18px; width:10%; } .close { position: fixed; top: 15px; right: 15px; color: $white; background-color: $themecolor; border-color: $themecolor; opacity: 1; padding:4px 16px; border-radius:10px; font-size: 27px; } } #search1.open { -webkit-transform: translate(0px, 0px) scale(1, 1); -moz-transform: translate(0px, 0px) scale(1, 1); -o-transform: translate(0px, 0px) scale(1, 1); -ms-transform: translate(0px, 0px) scale(1, 1); transform: translate(0px, 0px) scale(1, 1); opacity: 1; } .header_sidemenu{ .header_sidemenu_in { .overlay { width: 100%; height: 100%; position: fixed; right: 0; top: 0; z-index: 999; transition: opacity .25s ease,visibility 0s ease .25s; } .overlay.show{ opacity: 0.8; visibility: visible; background:$fullblack; transition: opacity .25s ease,visibility 0s ease; } .overlay.hide{ opacity: 0; visibility: hidden; background-color: rgba(0,0,0,.7); transition: opacity .25s ease,visibility 0s ease .25s; } .menu { width: 380px; height: $size100; position: fixed; right: -500px; top: 0; z-index: 9999; background-color: $white; box-shadow:$box-shadow; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; -ms-transition: all ease 0.5s; -o-transition: all ease 0.5s; transition: all ease 0.5s; box-shadow:$box-shadow; .close-menu { float: right; font-size: 21px; cursor: pointer; position:absolute; z-index: 1; top:10px; right:10px; } } } .menu-ham { cursor: pointer; } } .menu-ham { cursor: pointer; a i{ transition:$transition; &:hover{ background:$themecolor!important; color: $white!important; transition:$transition;} } } @media (min-width: 992px) { .header_menu { .navbar.navbar-default{ .nav.navbar-nav{ li.submenu{ .dropdown-menu { position: absolute; top: 40px; left: 0px; min-width: 250px; background: #fff; box-shadow: 0 0 15px #cccccc57; text-align:left; opacity: 0; transition: $transition; visibility: hidden; display: block; border: none; padding: 0px; border-radius: 0px; li.submenu{ .dropdown-menu{ -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; position: absolute; left: 100%; right: auto; width: auto; top: 0; li{ a{ line-height: 3; color:$bgrey; font-size: 15px; padding: 3px 20px; letter-spacing: .30px; transition: all 150ms linear; display: block; } &:hover{ a{ // background: $themecolor; color:$white; } } } } &:hover{ .dropdown-menu{ transform: scale(1, 1); } } } } &:hover{ ul{ left: 0px; visibility: visible; opacity: 1; } } } } } } } header{ position: absolute; left: 0px; top: 0px; width: $size100; z-index: 22; } .logo { a { font-size: 28px; color: $white; [class^="flaticon-"]:before { font-size: 28px; color: $white; } } } nav.navbar.navbar-default{ .logo-white { display: block; } .logo-black { display: none; } } nav.navbar.navbar-default.navbar-sticky-in{ .logo-white { display: none; } .logo-black { display: block; } } .nav-btn { display: inline-block; } .navbar-sticky-in .nir-btn:hover { color: $themecolor; } /*Fullpage search*/ .search-wrapper{ position: relative; min-width:250px; display:inline-block; .search_module{ position: relative; .icon-left{ position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 16px; transition: $transition; z-index: 10; color:$white; } .search_area{ form{ .input-group{ margin: 0; .form-control{ background: none; padding-left: 40px; border: 1px solid #ffffff23; transition: $transition; font-weight:$fontnormal; width: $size100; color: $white; &::placeholder{ transition: $transition; color:$lgrey; } &:focus{ outline: 0; box-shadow: none; } } } } } &.active{ & + .search-categories{ visibility: visible; opacity: 1; } .search_area{ form .input-group .form-control{ border: none; padding-left:2.66667rem; border: 1px solid #ffffff23; font-weight:$fontnormal; &:focus{border: none;} } } } } } // header sticky menu .main_header_area.headerstye-1{ .header_menu.fixed-top{ background: $white; box-shadow: 0 0 15px #cccccc57; .navbar.navbar-default{ .navbar-header{ .navbar-brand{ // img{display:none;} img + img{display:block;} } } .nav.navbar-nav{ li > { a{color:$bgrey;} } li.active > { a{color:$themecolor;} } } } .search-wrapper{ .search_module { .search_area{ form{ .input-group{ .form-control{ border-color:$grey; color: $bgrey; &::placeholder{ color:$bgrey; } } } } } .icon-left{color:$bgrey; } } } } } // Modal dialog .fade.in { opacity: 1; } .modal__overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; } .modal-backdrop{background:transparent;} .modal__container{ overflow-x:hidden; overflow-y:auto; .modal__content{ background-color: $white; width:450px; border-radius:0px; position:relative; overflow:hidden; .login-content { background: $white; text-align: center; position:relative; box-shadow:$box-shadow; .section-border { padding: 20px 30px; border-top: $borderdashed; } .form-checkbox { text-align: left; } a.btn-facebook, a.btn-twitter, a.btn-google{ padding: 8px 20px; color: $white; background: #ccc; border-radius:0px; display: inline-block; border:1px solid #395899; } a.btn-facebook{ background: #395899; } a.btn-twitter { background: #04a9e1; border-color:#04a9e1; } a.btn-google{ background: #db3236; } .sign-up{ padding: 20px 0; border-top: $borderdashed; } } button.close { background: $themecolor; color: $white; position: absolute; top: 0; right: 0; height: 40px; width: 40px; border-radius: 50%; opacity: 1; text-align: center; line-height: 0.5; font-size: 20px; padding:0; z-index:9; transition: $transition; &:focus{ border:none; outline:none; } } } } .modal-open{ padding: 0!important; .modal{ background:#000000ad; overflow: hidden; padding-right:0!important; .modal-dialog{ max-width:920px; top:5%; .modal-content{ border:none; position:relative; border-radius:0; .modal-body{padding:20px;} .login-content{box-shadow: $box-shadow;} } } } } @media(max-width:991px){ .modal-open { .modal { .modal-dialog{ max-width:80%; margin:0 auto; .blog-full .blog-image > a{height: 280px;} } } } } .log-reg{ .nav-pills { margin-bottom:20px; .nav-link{ padding:14px 18px; } .nav-link.active, .show>.nav-link{ background:$themecolor; border-radius:10px; } } .btn-fb, .btn-google{ padding:14px 18px; text-align:center; background:#506dab; color: $white; border-radius:10px; font-size:14px; } .btn-google{ background:#dd4b39; } hr.log-reg-hr{ opacity:1; background-color:#ccc; &::before{ background-color: #ffffff; bottom: 0; color: $themecolor; content: "Or"; font-size: 16px; position: absolute; left: 0; margin: 0 auto; right: 0; text-align: center; top: -12px; width: 10%; } } } @media(max-width: 1100px) { .search-wrapper{width:200px;} } @media(max-width:1100px){ .slicknav_btn.slicknav_open:before, .slicknav_btn.slicknav_collapsed:before, .headerstye-1 .navbar-sticky-in .slicknav_btn.slicknav_open:before, .headerstye-1 .navbar-sticky-in .slicknav_btn.slicknav_collapsed:before{ color:#444!important; } .headerstye-1 .slicknav_btn.slicknav_open:before, .headerstye-1 .slicknav_btn.slicknav_collapsed:before{ color:#fff!important; } .dropdown-toggle::after, .search-wrapper, .header_menu .navbar.navbar-default a.cart-icon, .register-login{display:none!important;} } /* ========================================= */ /* Banner CSS */ /* ======================================== */ .banner { padding: 0; background-size: cover; background-position: center; background-repeat:repeat-x; .slider{ height: 680px; position: relative; .swiper-container{ width: $size100; height: $size100; .swiper-slide { overflow: hidden; .slide-inner { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-size: cover; background-position: center; .slide-image { position: absolute; width: $size100; height: $size100; left: 0; top: 0; background-size: cover; background-position: center; } .swiper-content{ top: 45.6%; transform:translateY(-50%); left:0; right: 0; margin: 0 auto; text-align:center; width: 40%; position: absolute; z-index:9; .nir-btn-black{ &:hover{ background-color:$white; } } > h1{ letter-spacing: 1px; font-weight:$fontbold; } } } } } .swiper-container-horizontal>{ .swiper-pagination-bullets{ bottom: 40px; } } .swiper-pagination-custom{ .swiper-pagination-fraction{ bottom: 40px; } } .swiper-pagination-bullet { width: 10px; height: 10px; background: $white; opacity: 1; } .swiper-pagination-bullet-active{ background: $themecolor; } .swiper-container-vertical>{ .swiper-pagination-bullets{ right:50px; } } } .slider1{ .swiper-container{ .swiper-slide { .slide-inner { .swiper-content{ width:40%; position: absolute; z-index:999; right:auto; left: 7%; text-align:left; } } } } } .slider2{ padding:0; height:570px!important; .swiper-container{ .swiper-slide { .slide-inner { .slide-image { width: $size100; } .swiper-content{ top: auto; transform:none; bottom:0; left:0; width: 100%; position: absolute; z-index:999; right:0; margin:0 auto; padding:40px; background:transparent; box-shadow:none; > h1.s-title1{ font-size: 28px; } } .color-overlay{height: 100%;} } } } } .video-slider{ height:auto; .swiper-content{ top: 56%; transform:translateY(-50%); left: 0; width: 60%; right: 0; text-align: center; margin:0 auto; position: absolute; z-index: 3; > h1{ font-size: 58px; letter-spacing: 1px; margin-bottom: 0; } } .video-banner { video { width: 100%; display: block; } } } .banner-main{ height: 630px; position: relative; .banner-image{ width: $size100; height: $size100; background-size: cover; background-position: top; } .banner-content{ top: 45%; right: 0; left: 0; width: 55%; position: absolute; z-index:9; text-align: center; margin:0 auto; transform: translateY(-50%); > h1{ font-size: 58px; letter-spacing: 1px; font-weight:$fontbold; } p{font-size: 21px;} } } .banner-slide{height: 500px;} .banner-in{ .banner-image{ width: $size100; height: $size100; background-size: contain; background-position: center; animation:movebounce 5s infinite; } } .swiper-button-next{right:30px;} .swiper-button-prev{left:30px;} .swiper-button-next, .swiper-button-prev{ &:after{ background: $themecolor; font-size: 21px; padding: 10px 20px; color: #fff; transition: all ease-in-out 0.5s; height: 50px; width: 50px; border-radius:50%; } &:hover{ &:after{ background: $themecolor1; color: $white; transition: $transition; } } } .slider-before{ &:before{ background:$grey; content:''; position:absolute; bottom:0; left:0; width: 50%; height:100%; z-index:1; } } .slick-content-inner{ position: absolute; top: 45%; width: 60%; left: 0; right: 0; text-align: center; margin: 0 auto; z-index:1; } .slider-thumbs{ position:absolute!important; bottom: 0; width:100%; left: 0; right:0; background:$lgrey; margin:0 auto!important; overflow:hidden; .slick-prev, .slick-next{ background:$themecolor; } .slick-prev{left:10px;} .slick-next{right:10px;} .slick-slide{opacity:0.7;} .slick-slide.slick-current.slick-active.slick-center{ opacity:1; } } } @media(max-width: 1370px) and (min-width: 1368px){ .banner { .slider { .swiper-container { .swiper-slide { .slide-inner { .swiper-content{width: 60%;} } } } } .slider1 { .swiper-container { .swiper-slide { .slide-inner { .swiper-content{width: 40%;} } } } } } } @media(max-width:1100px){ .banner{ .slider{ .swiper-container{ .swiper-slide { .slide-inner { .swiper-content, .swiper-content1, .swiper-content2{ width:75%!important; h1{font-size: 48px;} } } } } } .video-slider{ .swiper-content{ width:85%!important; h1{font-size: 50px;} } } .banner-main { .banner-content{ width: 90%; } } .slider.slider3{ .swiper-container{ .swiper-slide { .slide-inner { .swiper-content1{ > h1{ font-size: 36px; } } } } } } } } @media(max-width: 991px){ .banner { .slider { .swiper-container { .swiper-slide { .slide-inner { .slide-image{ width: 100%; left: 0; } .swiper-content{ top: 60%; left: 0; right: 0; margin: 0 auto; h1{font-size: 40px;} } } } .slider-before{ .swiper-content{top: 50%!important;} &:before{ background:$themecolor1; width: 100%; opacity:0.7; } span a, h1 a, p{color: $white;} } } } .banner-main { height: auto; .banner-content{ top: 50%; transform: translateY(-50%); } } .banner-in{ .banner-content{width: 100%!important;} .banner-content{ width: 100%!important; .input-box{border:none!important;} .nir-btn{padding:14px 24px!important; margin:0 1.5rem 1.5rem; width: 50%!important;} } } } .slider-thumbs{ position:relative!important; bottom: 0; width:100%; left: 0; right:0; padding:0; background:transparent; } .slick-content-inner{ width:90%; top: 50%; transform:translateY(-50%); } .search-banner-in{ .col-lg-6{padding:0 15px!important;} } } @media(max-width: 767px){ .banner{ .slider{ .swiper-container{ .swiper-slide { .slide-inner { &::before{display:none;} .swiper-content{ width:90%!important; left:0; right:0; top: 60%; text-align:center; margin:0 auto; span{ padding-left:0; &:before{display:none;} } } .overlay{width:100%;} } } } .swiper-button-prev, .swiper-button-next{ display:none; } } .swiper-button-prev, .swiper-button-next { display: none; } .top50{ .swiper-container{ .swiper-slide { .slide-inner { .swiper-content{top: 50%;} } } } } .swiper-button-prev, .swiper-button-next{ display:none; } } } @media(max-width: 639px){ .banner{ .container {padding: 0;} .slider{ overflow:visible; padding:0!important;; .swiper-container{ .swiper-slide { .slide-inner { .slide-image { width: 100%; position: relative; top: inherit; left: inherit; right: inherit; transform: none; } .swiper-content{ > h1{font-size: 32px;;} } } } } .swiper-container-vertical > .swiper-pagination-bullets{ display:none; } } .video-slider{ .swiper-content{ display:none; } } .banner-main { .banner-content > h1{ font-size: 28px; } } } .search-banner-list{ .search-banner-item{ display:block!important; text-align:center; .search-banner-item-ctn{width: 100%!important; margin:15px 0 0!important;} } } } @media(max-width: 400px){ .banner{ .slider{ .swiper-container{ .swiper-slide { .slide-inner { .swiper-content{ .entry-meta, .entry-date, .entry-category{ display:block!important; margin-bottom:15px; } .entry-author{ margin-bottom:15px; .entry-date{margin-bottom:0;} } > h1{font-size: 24px;;} } } } } .swiper-container-vertical > .swiper-pagination-bullets{ display:none; } } .video-slider{ .swiper-content{ display:none; } } .banner-main { .banner-content > h1{ font-size: 24px; } } } .slider-thumbs, .slick-content-inner{display:none!important;} } #particles-js { width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } /* ========================================= */ /* Banner Form CSS */ /* ======================================== */ .form-main{ position:relative; display:block; z-index:2; .form-content { box-shadow: 0px 0px 30px #cccccc57; margin: -76px auto 0; background: $white; border-radius: 0px; z-index: 2; .input-box { position: relative; width: 100%; i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); z-index: 1; } [class^="fa-"]:before { color: #ef2853; font-weight: 600; } } .form-navtab{ position:absolute; top: -57px; left: 0; right: 0; margin: 0 auto; .nav-tabs { border: none; padding: 0px; display: inline-block; li { button { border-radius: 0; background: $white; border: none; padding: 15px 30px; transition: all 0.5s; border-radius:0; } i { color: #444; margin-right: 5px; transition: all 0.5s; } &:hover button { background: $themecolor2; color: #fff; border: none; transition: all 0.5s; i{ color: #fff; transition: all 0.5s; } } } li button.active{ background: $themecolor2; color: #fff; border: none; transition: all 0.5s; i{ color: #fff; transition: all 0.5s; } } } } .tab-content{ box-shadow: 0px 0px 30px #cccccc57; padding: 30px; background:$white; } } .form-content.form-content1{ top: -20px; } .form-content.form-content2{ padding:0; box-shadow:none; top: 0; .input-box { position: relative; display: inline-block; width: 100%; input, .nice-select{ border-width:0 0 1px; } i{ color: $themecolor2; font-weight: 600; left: 0; } } } .form-content.form-content3{ padding:0; box-shadow:none; top: 0; background:transparent; .input-box { position: relative; display: inline-block; width: 100%; input, .nice-select{ border-width:0 0 1px; background:transparent; color: $white; &::placeholder { color:$white!important; } } i{ color: $themecolor2; font-weight: 600; left: 0; } } } } .form-main1{ position:absolute; bottom: 30px; left:0; right: 0; } .book-form1{ .nice-select, input{border-width:0 0 1px 0; border-radius:0; padding:12px 0px} } @media(max-width: 1100px){ .form-main { .form-content{ width: 88%!important; } .form-content.form-content1{top: 0;} } } @media(max-width: 991px){ .form-main { .form-content{ margin:5rem auto 0.25rem!important; left: 0; position:relative; top:0; .form-group{ padding-right:0!important; margin-bottom:1rem!important; } } .form-title1{border-radius:10px 10px 0 0!important; margin-bottom:2rem!important;} } .form-main1{ position:relative; bottom: 0; left:0; right: 0; } } @media(max-width: 767px){ .form-main { .form-content{ .form-navtab .nav-tabs li a{padding: 20px 15px;} } } } @media(max-width: 735px){ .form-main { .form-content{ width: 98%!important; .tab-content{ border-top:2px dashed #f1f1f1; } } } } @media(max-width: 479px){ .form-main { .form-content{ .form-navtab { position:relative; top: 0; .nav-tabs{ display:block; li{ width: 100%; button{width:100%;} a{display:block;} &:nth-child(odd){ a{background: $grey;}} } } } } } } /* ========================================= */ /* trending-topic CSS */ /* ======================================== */ .category-item{ position:relative; i{ font-size:36px; } img{width: auto!important;} &::before{ content:''; position:absolute; left: 0; bottom: 0; width:0; height:3px; transition:$transition; background:$themecolor!important; cursor: pointer; } .trending-topic-content{position:relative; z-index: 1;} &:hover::before{ width:100%; transition:$transition; } } .trending-topic-counter{ &::before { content: ''; background: #f1f1f1; position: absolute; height: 50%; width: 100%; left: 0; top: 0; } .trending-topic-counter-inner{ width: 65%; margin: 0 auto; padding:40px 40px 100px; .section-title{ &::before{display: none;} h2{font-weight: $fontbold;} } .counter-item { padding: 20px!important; border: 1px solid #f1f1f1a6; } } } .why-us{ .why-us-item{ transition: $transition; overflow: hidden; position:relative; transform: translateY(0px); &::before{ content:''; position:absolute; left: 0; bottom: 0; width:100%; height:0; transition:$transition; background:$themecolor!important; cursor: pointer; } .why-us-content{z-index:1; position:relative;} &:hover::before{ height:100%; transition:$transition; } .why-us-icon{ [class^="flaticon-"]::before, i { font-size: 58px; } } &:hover{ i, a, p{color: $white!important; transition:$transition;} } } } @media(max-width: 1100px){ .trending-topic-counter { .trending-topic-counter-inner{ width: 86%; padding: 40px 40px 80px; } } } @media(max-width: 991px){ .trending-topic-counter { padding-bottom:0; .trending-topic-counter-inner{ padding: 40px; margin:0 auto 0!important; .car-image{ width: 100%; position:relative; bottom:inherit; } } } .category-main-inner{ h3{margin-bottom:0!important;} } } @media(max-width: 767px){ .trending-topic{ .trending-topic-item{ &:before{display:none;} text-align: center; } } } /* ========================================= */ /* Trending CSS */ /* ======================================== */ .trending{ background-position: top right; background-size: contain; background-repeat:no-repeat; position: relative; .trend-item, .trend-item1, .trend-item2{ position: relative; transition: $transition; overflow:hidden; &::before{ content:''; position:absolute; left: 0; width:0; bottom:0; background:$themecolor; height:4px; transition: $transition; z-index:2; } .trend-meta{ position: absolute; top: -28px; right: 20px; } .trend-image{ position:relative; img{transition: $transition; width: 100%;} .trend-content{z-index:1;} } .trend-image, .trend-image1{transition: $transition; overflow:hidden;} .trend-content1{ position:absolute; bottom:0; left: 0; right: 0; width:100%; z-index:1; } &:hover { transition: $transition; &::before{ transition: $transition; width: 100%; } .trend-image img{transform:scale(1.1); transition: $transition;} .color-overlay{height: 100%;; transition: $transition;} } &:hover .color-overlay{height: 100%;; transition: $transition;} } .trend-item1{ &::before{display:none;} } .trend-item2{ position: relative; transition: $transition; height: $size100; overflow:hidden; > a { background-size: cover; height: $size100; width: $size100; background-position: center; display: inline-block; transition:$transition; } &::before{display:none;} } .trend-image1 { position: relative; height: 100%; overflow: hidden; transition: all ease-in-out 0.5s; > a { background-size: cover; height: 100%; width: 100%; background-position: center; display: inline-block; transition: all ease-in-out 0.5s; } } } .section-shape { position: absolute; top: -96px; left: 0; width: 100%; height: 96px;; background-size: contain; background-repeat: repeat-x; z-index:1; } .section-shape.section-shape1 { transform: rotate(180deg); } @media(max-width:991px){ .section-shape{background-size: cover;} } @media(max-width:767px){ .trending { .trend-item { .trend-image1{height:340px; margin-bottom:1rem;} } .trend-item2{height:300px; border-radius: 10px; margin-bottom: 15px;} } .trend-packages{ .trend-full{ .col-lg-5{padding:0!important;} } } } @media(max-width:400px){ .trending { .trend-item { .trend-image{ .trend-meta{ position:relative; display:block!important; text-align:center; .entry-author{margin-bottom:15px;} } } } } } .entry-author img{ width: 36px!important; height:36px!important; display:inline-block!important; } // sidebar .sidebar-sticky{ position: sticky; top: 0; transition:$transition; .list-sidebar{ border-radius:0px; .sidebar-item { padding: 0 0px 30px; border-bottom: 2px dashed #f1f1f1; margin-bottom: 30px; &:last-child { border: none; margin: 0; padding: 0; } h3 { position: relative; padding-bottom: 10px; margin-bottom: 30px; border-bottom:$borderall; &::before { content: ''; position: absolute; left: 0; bottom: -1px; width: 20%; height: 2px; background: $themecolor; } } h4{border:none; padding:0;} .pretty { display: block; margin-bottom: 20px; margin-right: 0; .state { label { text-indent: 1em; width: 100%; padding-left: 10px; span.number { float: right; } } } &:last-child {margin: 0;} } .pretty.p-icon{ .state .icon {color: $white;} input:checked~.state .icon { background: $themecolor; } } .range-slider { margin-bottom: 0; .ui-slider { .ui-slider-range {background: $themecolor;} } } .star-rating { span { color: #ffbc00; display: inline; } } .map-box { background: url(../images/map.jpg); background-size: cover; background-repeat:no-repeat; } } } .form-content { box-shadow: 0px 0px 30px #cccccc57; background: $themecolor; padding: 30px; h4::before{display: none!important;} .nice-select{ padding:13px 20px 10px 35px; font-weight: $fontnormal; } .input-box { position: relative; display: inline-block; width: 100%; input{padding-left: 35px;} i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); z-index: 1; } [class^="fa-"]:before { color: #ef2853; font-weight: 600; } } } } .sidebar-sticky.sticky1{ top: 120px; } .sidebar-sticky.sticky1.tab-sticky{ top: 30px; box-shadow:none; } .tabs-navbar{ border:$borderall; ul{ li{ display: block; width: 100%; a{ padding: 15px; transition: $transition; display: block; background:#ffffff00; width: 100%; &:hover{ color: $white; background:$themecolor; transition: $transition; } } } li.active{ a{ color: $white; background:$themecolor; transition: $transition; } } } } .tabs-navbar1{ border:$borderall; ul{ display: inherit; text-align: center; li{ a{ padding:10px 15px; transition: $transition; border-radius:10px; &:hover{ color: $white; background:$themecolor; transition: $transition; } } } li.active{ a{ color: $white; background:$themecolor; transition: $transition; } } } } .navbar-sticky { z-index: 9; position: fixed!important; left: 0; top: 0; width: 100%; animation-name:slideInUp; transition: $transition; } .tabs-navbar1.navbar-sticky { top: 99px; transition: $transition; border-top:1px solid #f1f1f1!important; } .sticky1.tab-sticky{ top: 0px; transition: $transition; animation-name:slideInUp; box-shadow:0 0 15px #cccccc57; padding-top: 1.5rem; } @media(max-width: 991px){ .tabs-navbar1.navbar-sticky{top: 0; position:relative!important;} .more-top { .trend-image1{height:300px;} .trend-content-main{ .trend-content{ padding:20px 0 0; } } } } @media(max-width: 767px){ } @media(max-width: 567px){ .trending { .trend-item { display:block!important; .trend-content-main, .trend-image{width: 100%!important;} .trend-content{ padding:20px 0; } } } .entry-meta{ display:block!important; } } /* ========================================= */ /* featured-video CSS */ /* ======================================== */ .featured-video, .recent-post{ background-position: center; background-size: cover; background-attachment: fixed; position: relative; overflow: hidden; background-repeat:no-repeat; .featured-item, .recent-item{ position:relative; overflow:hidden; .featured-image, .recent-image img{transition: $transition;} .featured-content{ position:absolute; bottom:-60px; transition: $transition; } .recent-content{ position:absolute; bottom:0; transition: $transition; z-index:1; } &:hover { .featured-image{transition: $transition; transform:scale(1.1);} .featured-content{bottom:0; transition: $transition;} .recent-image > img{transition: $transition; filter:grayscale(10); transform:scale(1.1);} .color-overlay{height:100%; transition: $transition;} } } .video-banner { height: 500px; } } .recent-post-main{position:relative; z-index: 1;} @media(max-width:479px){ .featured-video, .recent-post { .recent-item, .featured-item{ .featured-content{ position:relative; bottom:0; background:#232323; } } } } /* ========================================= */ /* Discount CSS */ /* ======================================== */ .discount-action { background-repeat: no-repeat; background-size: cover; position: relative; overflow: hidden; z-index:2; .call-banner, .call-banner1 { background-size: cover; background-attachment: fixed; position: relative; overflow: hidden; background-repeat:no-repeat; .call-banner-inner { position:relative; z-index:1; } } .call-banner1 { background-size: contain; background-attachment: inherit; background-position:right; } } ul.social-with-text li{ text-align:center; a i { width: 50px; height: 50px; line-height: 50px; border-radius: 100%; background: $grey; display: inline-block; text-align: center; margin-right: 18px; } } @media(max-width:991px){ .discount-action { .call-banner{ background-size:cover; .trend-content{width:100%!important; padding: 0!important; margin-bottom: 2rem!important;} .call-banner-inner{ padding:0!important; width:100%!important; .trend-content{padding:0!important; text-align: center;} } .call-banner-inner1{ padding:30px!important; .trend-content-main{width:100%!important;} } } .call-banner1{ background-size:cover!important; .call-banner-inner{margin: 0!important; border-radius:0!important;} } } } @media(max-width:767px){ .discount-action { .call-banner { .col-lg-6{padding: 0!important;} .call-button{ top:55px; transform:none; z-index:1; } } .call-banner1{ .call-banner-inner{padding:30px!important; text-align: center;} .video-button {margin:60px 0!important;} } } } @media(max-width:567px){ .discount-action { .call-banner { .call-banner-inner{width: 100%!important; padding:0!important;} } } .section-btns{ display: block!important; a{margin:1rem 0 0!important; width: 100%;} } } /* ========================================= */ /* Call To Action CSS */ /* ======================================== */ .call-to-action, .call-to-action1 { background-repeat:no-repeat; background-position: top; background-size:cover; background-attachment: fixed; position:relative; h2.call-name { font-size: 54px; } .video-button{ position:relative; img{ border:8px solid #ffffff2e; } } } .call-button { position:relative; button.play-btn { position: relative; left: 0; right: 0; padding:5px; background: #ffffff2e; border: none; border-radius: 50%; i { font-size: 28px; height: 70px; width: 70px; line-height: 2.5; text-align: center; color: #fff; background: $themecolor; transition: all ease-in-out 0.5s; padding: 0 0 0 5px; border-radius: 50%; -webkit-border-radius: 50%; -ms-border-radius: 50%; -moz-border-radius: 50%; } &::after, &::before { content: ''; display: block; position: absolute; top: 0; right: 0; z-index: -1; bottom: 0; left: 0; border-radius: 50%; border: 2px solid #fdc70380; opacity:0.3; } &::before { -webkit-animation: ripple 2s linear infinite; animation: ripple 2s linear infinite; } &::after { -webkit-animation: ripple 2s linear 1s infinite; animation: ripple 2s linear 1s infinite; } } } .call-to-action1{ &::before, &::after{ display: none; } } /* ========================================= */ /* Counter CSS */ /* ======================================== */ .counter{ margin-top: -120px;; .counter-item{ h2{font-size: 50px;} i{font-size: 40px;} } .d-line { border-right: 1px dashed #f1f1f1; position: absolute; right: 0; top: 0; height: 100%; } } .counter_one{ &:before { position: absolute; top: 10px; left: 0; bottom: 0; background: $white; content: ""; z-index: -1; border-top: 10px solid $themecolor; width:91.3%; } .counter1{ position:relative; display: block; margin-top: -120px; z-index: 10; .counter-item{ text-align:center; width:100%; h3{ font-size: 54px; } i{font-size: 21px;} } .d-line { border-right: 1px solid #ccc; position: absolute; right: 0; top: 0; height: 100%; } } } @media(max-width:991px){ .counter-main{ width:100%!important; .counter{margin:0!important;} .counter-item{ border:none!important; padding:0!important; } } } /* ========================================= */ /* Packages CSS */ /* ======================================== */ .packages{ .pg-title{ i.icon{ border-radius:50%; height:80px; width: 80px; line-height:2; } h2 span{ font-weight:300; font-size:15px; display:block; } } .pg-main{ ul li{ display:inline-block; width:100%; line-height:3; border-bottom:1px dashed $grey; } } } /* ========================================= */ /* Top Restro CSS */ /* ======================================== */ .top-restro{ .slider-content { background: #fff; padding: 20px; width: 94%; margin: 0 auto; margin-top: -2rem; position: relative; z-index: 1; box-shadow: 0 0 15px #cccccc57; .restro-content{ li{ display: block; font-size: 15px; color: #999; } } } } /* ========================================= */ /* Latest Tour CSS */ /* ======================================== */ .latest-tour{ .tour-item{ position:relative; overflow: hidden; transition: $transition; &:before { position: absolute; top: 0px; left: 0; background: #2e3d629e; z-index: 1; content: ""; width:100%; height: 100%; opacity: 0; visibility: hidden; transition: $transition; } .tour-image img{ transition: $transition; } .tour-content { padding: 20px; position: absolute; bottom: -162px; left: 0; width: 100%; z-index: 1; transition: $transition; } .tour-tag { position: absolute; padding: 10px; top: 20px; right: 0; background: $themecolor; z-index: 1; .old-price{ text-decoration:line-through; } } &:hover { .tour-content{ bottom:50%; transform: translateY(50%); transition: $transition; } .tour-image img { transform: rotate(5deg) scale(1.2); transition: $transition; } &:before {opacity:1; visibility: visible; transition: $transition;} } } } /* ========================================= */ /* Services CSS */ /* ======================================== */ // about inner page section.about-detail{ background-size: contain; background-position:right; background-repeat:no-repeat; background-attachment: fixed; .about-image{ border-radius:0px; overflow:hidden; img{border-radius:15px;} } .p-about-us { .p-call-action { li { display: inline-block; padding: 5px; width: 49%; } } } .about-detail-content{ border-radius: 15px; } } @media(max-width:811px){ section.about-detail{ background-size:cover; } } @media(max-width: 767px){ section.about-us { padding-bottom: 3rem; .about-listing{ &:after{display:none;} } .counter { .d-line{position:relative; border:none; } } } .about-banner{ text-align: center; .about-banner-content{margin-bottom:2rem;} } section.about-detail{ &:before {display:none;} } } /* ========================================= */ /* Quick Services CSS */ /* ======================================== */ .quick-service { position: relative; .card-box { position: relative; width: 320px; height: 320px; transform-style: preserve-3d; perspective: 1000px; border-radius:15px; margin:0 auto; .box-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-style: preserve-3d; transition: 1s cubic-bezier(0.15, 0.15, 0.3, 1.3); .box-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .box-title { position: absolute; top: 40%; left: 0; right: 0; text-align: center; z-index: 2; background: $themecolor; padding: 15px 10px; i{ font-size: 32px; height: 80px; width: 80px; border-radius: 50%; background: $white; color:$themecolor; line-height: 2.4; } } } .top-service { position: absolute; top: 0; left: 0; width: 100%; height: 100%; justify-content: center; transform-style: preserve-3d; padding: 0; transform: rotateY(180deg); border-radius:15px; .service-inner { transform-style: preserve-3d; padding: 20px; background: $themecolor; transform: translateZ(100px); i{ font-size: 38px; height: 90px; width: 90px; border-radius: 50%; background: $white; color:$themecolor; line-height: 2.4; } } } } &:hover .box-inner { transform: rotateY(180deg); } } .top-service { display: flex; flex-direction: column; text-align: center; padding: 45px 25px; border-radius:15px; i { font-size: 3rem; margin-bottom: 15px; } p { color: $grey; font-size: 13px; } } } @media(max-width:359px){ .quick-service { .card-box{ height:280px; width: 280px; } } } /* ========================================= */ /* About Us CSS */ /* ======================================== */ .about-us{ background-repeat:no-repeat; background-position: bottom left; background-size:contain; position:relative; &:hover .trend-item{transform:none;} .about-trending-topic{ ul li{ display: inline-block; width: 49%; position:relative; line-height: 2.4; font-weight: 400; &:before{ content: '\f105'; font-family: 'FontAwesome'; margin-right: 10px; } } } .about-image-box{ .about-image{ background-repeat:no-repeat; background-position: center; background-size:contain; background: #fcdc6b; animation: border-transform 10s linear infinite alternate forwards; } } .about-image-box1{ .about-image{margin-top:-40px;} .about-content{ right: inherit; left:-40px; top: 0; } } .about-inner{ position:relative; z-index: 1; h2{font-size: 48px; margin-bottom:10px!important;} .about-image-box { border-radius: 15px; overflow: hidden; position:relative; img{width:100%;} &::before { position: absolute; content: ""; top: 0; left: 0; width: 150%; height: 100%; background: rgba(255,255,255,.5); -webkit-transition: -webkit-transform 1.8s; transition: -webkit-transform 1.8s; transition: transform 1.8s; transition: transform 1.8s,-webkit-transform 1.8s; -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-200%,0); transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-200%,0); z-index: 1; } &:hover:before{ -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,200%,0); transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,200%,0); } } } .box-title{ i{ font-size: 38px; color:$themecolor; } } .about-left { position: absolute; top: 50%; right: -50px; background: #fff; width: 100%; z-index: 1; transform: translateY(-50%); border-radius: 15px; padding: 30px 30px 30px 0; } } .about-us1{ background-repeat:no-repeat; background-position: center; background-size:cover; background-attachment: fixed; position:relative; &:before { background: #fff; content: ''; position: absolute; left: 0; bottom: 0; width: 50%; height: 100%; z-index: 1; } } @media(max-width: 991px){ .about-us { .trend-image1{height:300px; margin-bottom:20px;} .about-inner { .about-image-box{ margin-top:2rem; } } .about-image-box { .about-image-desti{margin-bottom:0;} .about-image-main { margin-top:30px; .col-lg-6{margin-top:0!important;} } .about-content{margin-bottom: 15px; width:100%!important;} } .form-content{top: 5rem; margin-bottom:2rem;} .about-left{position:relative; right: 0; top: 0; transform:none; padding:0;} } .about-us1{ &:before{ top: 8%; width: 100%; height: 84%; } &:after{ bottom:-48px; } } } @media(max-width: 639px){ .about-us1.about-us { &:before{ display:block;} &:after{ bottom:-72px; } } .about-us { &:before{display:none;} .about-trending-topic { ul { li{display:block; width:100%;} } } .about-listing{ ul{ display:block!important; li{line-height:2;} } } } } /* ========================================= */ /* call-to-action CSS */ /* ======================================== */ .call-to-action{ background-repeat:no-repeat; background-position: top; background-size:cover; background-attachment: fixed; position:relative; .call-content{ position:relative; z-index:1; h2{ font-weight: 700; font-size: 42px; text-transform: uppercase; display: inline-block; border: 1px solid #ffffff40; padding: 10px 20px; background: #ffffff14; margin-bottom: 14px!important; border-radius:15px; margin-bottom:17px!important; span{color:$themecolor;} } p{font-size: 18px; font-weight:$fontbold;} } } section.call-to-action1{ background-repeat:no-repeat; background-position: center; background-size:cover; background-attachment: fixed; .call-inner{ position:relative; z-index: 1; .call-content{ position:relative; z-index:1; h2{ font-weight: 700; font-size: 42px; text-transform: uppercase; display: inline-block; border: 1px solid #ffffff40; padding: 10px 20px; background: #ffffff14; span{color:$themecolor;} } p{font-size: 18px;} } } &:before, &:after{ content: ''; position:absolute; top:0; left:0; width:$size100; height:$size100; background:rgba(47, 38, 57, 0.43); } &:after{ background: $white; width: 33%; transform: skew(30deg); right: -196px; left: inherit; } .call-main1{ .video-button { .call-button { top: inherit; transform: none; } } } } section.call-to-action.maincounter{ background-image:url(../images/calltoaction3.jpg); background-repeat:no-repeat; background-position: center; background-size:cover; background-attachment: fixed; padding-top: 70px; padding-bottom: 75px; .counter{ border:none; } } @media(max-width: 991px){ section.call-to-action { padding-bottom: 3rem; .call-content{ width:$size100!important; text-align:center!important; } .section-title{width:100%!important;} } section.call-to-action1{ &:after{display:none;} .call-inner{ text-align:center; .call-content{ text-align:center!important; padding:0 0 2rem!important; } } } .newsletter-image{ text-align:center; img{width:70%; margin:0 auto;} } } @media(max-width: 811px){ section.call-to-action { .counter { .counter-item { h3{font-size:32px;} } } } } @media(max-width: 767px){ section.call-to-action { padding-bottom:3rem; .call-content-inner{margin-top: 2rem; text-align: center;} .counter { .d-line{position:relative; border:none; margin-bottom:2rem; } } } .call-to-main{ .call-to-action{ .call-content{ width:$size100!important; text-align:center!important; } } } .counter_one { .counter1 { .d-line{ position:relative; border: none;} } } .call-main1{ .action-content{ width:100%!important; } } } @media(max-width:639px){ .call-to-action { .call-content { h2{font-size: 24px;} } } .call-to-main{ .call-to-action{ padding:20px!important; } } } /* ========================================= */ /* Team CSS */ /* ======================================== */ .our-team{ background-repeat:no-repeat; background-position: center; background-size:cover; .team-image { overflow: hidden; transition:$transition; img{transition:$transition; width:$size100;} &:hover img{ transition:$transition; transform:scale(1.1); } } .team-list{ overflow:hidden; .team-content { transition: all 0.5s; position: relative; z-index: 1; } .team-content1 { background: #fff; top: -2rem; transition: all 0.5s; position: relative; z-index: 1; width: 96%; padding-top: 20px; } &:hover { .team-content { margin-top: -15px; transition: all 0.5s; } } } } /* ========================================= */ /* Reviews CSS */ /* ======================================== */ .testimonial{ background-position: center; background-repeat:repeat-x; background-size:cover; .testimonial-item, .testimonial-item1{ .testimonial-content{ background: $white; border: $borderall; position: relative; p{font-style: italic;} .testimonial-icon{ width: 50px; height: 45px; background: $themecolor; text-align: center; font-size: 22px; color: #fff; line-height: 45px; position: absolute; top: 37px; left: -19px; &:before{ content: ""; border-bottom: 16px solid #e41212; border-left: 18px solid transparent; position: absolute; top: -16px; left: 1px; } } } .details{ position:relative; i{font-size: 40px; color:$themecolor; margin-bottom: 13px!important;} p{ font-size: 18px; font-style:italic; } } a { display: inline-block; position: relative; overflow:hidden; img { height: 80px; width: 80px; border-radius: 50%; } } .author-info{ position:relative; img{width: 80px; height: 80px; border-radius: 50%;} i{ font-size: 20px; color: $themecolor; position: absolute; left: 38%; z-index: 1; background: #fff; border-radius: 50%; height: 40px; width: 40px; line-height: 1.8; } } } .review-slider{ .slick-prev, .slick-next{ bottom: -80px; top: inherit; background:$themecolor; border-radius:50%; width:50px; height: 50px; line-height:1; &::before{color: $white; font-size:28px; line-height:1.5;} &:hover, &:focus{ background:$title; &::before{ color: $white; } } } .slick-prev {left: 16px; } .slick-next {left: 76px; right: inherit;} } .abt-short .short-p { position: relative; letter-spacing: 2px; transition: all 0.5s; &::before { content: ""; position: absolute; left: 0; bottom: -30px; height: 2px; width: 30%; background: $themecolor; } } .tst-slide p { padding:30px; border:2px dashed #f1f1f129; border-radius:15px; margin-bottom: 25px; transition: all 0.5s; i{font-size: 40px; color:$themecolor; margin-bottom: 13px!important;} } .tst-slide:hover p { border-color: $themecolor; } .tst-info { position: relative; img {width: 10%; border-radius:50px;} } .testimonials_one_single { position: relative; display: block; padding-top: 50px; padding-bottom: 50px; padding-left: 165px; padding-right: 50px; z-index: 10; &:before { position: absolute; bottom: -40px; left: 130px; width: 91px; height: 40px; background-image: url(../images/testi-shape.png); background-repeat: no-repeat; content: ""; } .shadow-box { position: absolute; top: 0; left: 65px; bottom: 0; right: 0; box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.07); z-index: -1; } .testimonials_one_image { position: absolute; top: 80px; left: 20px; img { border-radius: 50%; height: 110px; width:110px; } &:before { position: absolute; top: -15px; left: -20px; right: -20px; bottom: 0px; content: ""; border: 10px solid $white; border-radius: 50%; -webkit-transition: all 500ms ease; transition: all 500ms ease; height: 140px; width:140px; } } &:hover .testimonials_one_image:before { border: 10px solid $themecolor; } .testimonials_one_text { position: relative; display: block; .testimonials_one_rating_box { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; a{color:$themecolor;} } .testimonials_quote_icon { position: absolute; bottom: -4px; right: 10px; -webkit-transition: all 500ms ease; transition: all 500ms ease; span{font-size: 36px; color:$themecolor;} } .customer_info { h3 { font-size: 20px; font-weight: 600; line-height: 30px; } span { font-size: 14px; color: $bgrey; margin-left: 5px; } } } &:after { position: absolute; top: 0; left: 65px; bottom: 0; right: 0; background-color: $white; content: ""; z-index: -1; border-radius: 4px; } } .counter-main { .counter-item{ padding:0 1rem 1rem!important; } } } @media(max-width:991px){ .testimonial{ .section-title{text-align:center!important; margin-bottom:2.5rem;} .about-slider{ width:$size100!important; margin:0!important; } } } @media(max-width: 735px){ .testimonial { .testimonial-item1{ margin:2.5rem 0rem 0rem; text-align:center; .author-info{display:inline-block!important;} i{ display: none; } .author-content{margin: 0 !important;} &::after{left: 0;} .author-content{margin: 0!important;} } .counter-main { .contact-pac span{display: block; margin-bottom: 1rem;} } } } @media(max-width:567px){ .testimonial1 { .testimonials_one_single{ padding: 20px; text-align: center; background:$white; .testimonials_one_image{ position: relative; top: inherit; left:inherit; margin-bottom:1rem; img{margin:0 auto;} &:before{display:none;} } .testimonials_one_text { .testimonials_one_rating_box{display:inline-block;} .testimonials_quote_icon{position:relative; bottom:0; right: 0;} } &:after{ display:none; } } } } /* ========================================= */ /* News section CSS */ /* ======================================== */ .news{ padding-bottom: 6rem; z-index:inherit; .news-item{ position:relative; .news-image{ position: relative; transition:$transition; overflow:hidden; &::before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,.5); -webkit-transition: -webkit-transform 1.8s; transition: -webkit-transform 1.8s; transition: transform 1.8s; transition: transform 1.8s,-webkit-transform 1.8s; -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-200%,0); transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-200%,0); z-index: 1; } &:hover:before{ -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,200%,0); transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,200%,0); } .news-date1{ position:absolute; top:10px; left:10px; background:#ffffffe3; padding: 10px 15px; z-index: 2; span{font-size:28px; font-weight: $fontbold; line-height:1.0;} } .news-content1{ padding:20px; position:absolute; bottom:0; z-index: 2; .news-list{ border-top:1px dashed $grey; padding-top:15px; li{ a{ font-size: 14px; color: #999; &:hover{ color: $themecolor; } } } } } .overlay{ background:linear-gradient(to bottom, transparent 0%, #826d43 100%); top:inherit; height:50%; bottom:0; } img{ transition:$transition; width:$size100; } &:hover img{ transition:$transition; transform:scale(1.2); } } .news-content-over{ position:absolute; left: 0; width: 90%; right: 0; margin: 0 auto; box-shadow:$box-shadow; bottom:-1.5rem; padding: 20px; z-index: 1; background:#fff; } .news-list{ li{ a{ font-size: 14px; color: #999; font-style: italic; &:hover{ color: $themecolor; } } } } .news-content{ .news-list{ li{ a{ font-size: 14px; color: #999; &:hover{ color: $themecolor; } } } } .author-img{ img { max-width: 40px; border-radius: 50%; margin-right: 10px; } } a.news-btn{font-size: 14px;} } .news-cont{ background: $white; border-radius:15px; padding:20px 15px; position: relative; z-index:1; width:96%; margin-top: -24px; .news-list{ li{ a{ font-size: 14px; color: #999; font-style: italic; &:hover{ color: $themecolor; } } } } } .blog-one__content { padding: 24px 24px 20px; background: #ffffff; margin-right: 30px; margin-top: -70px; position: relative; transition: all 700ms ease; z-index:1; .blog-one__meta { margin: 0; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; li a { font-size: 14px; color: $bgrey; transition: all 500ms ease; } } .blog_one_text { width: 83%; } .blog_one_date { height: 70px; width: 70px; background:$themecolor; padding-top: 15px; position: absolute; top: 0; right: 0; font-weight:700; line-height:1.2; } } } } @media(max-width:1100px) and (min-width:1024px){ .news { .news-item { .blog-one__content{ margin-right:0; .blog-one__meta li a{font-size:12px;} } } } } @media(max-width:991px){ .testi-news{ .section-title{ text-align:center!important; } } .news { .news-item { .blog-one__content{ .blog-one__meta li a{font-size:13px;} } } } } @media (max-width:500px) { .recent-articles{ .trend-item1{ display: block!important; .trend-image{width: 100%!important; margin-bottom: 1rem;} .trend-content-main{width: 100%!important; padding: 0!important;} } } } /* ========================================= */ /* Partner CSS */ /* ======================================== */ .partners_inner { width: 100%; overflow: hidden; border-radius: 10px; border: 1px solid #f1f1f1; ul { margin: -2px -10px -2px -2px; padding-top: 2px; padding-left: 2px; li { margin: 0px; float: left; width: 25%; border: 1px solid #f1f1f1; text-align: center; height: 140px; line-height: 140px; position: relative; margin-top: -2px; margin-left: -2px; overflow: hidden; img{opacity:0.5; transition:$transition; filter: grayscale(100%); width:60%;} } li:hover{img{opacity:1; transition:$transition; filter: grayscale(0%);} } } } @media(max-width:911px){ .partners_inner { margin-top:40px; ul { li{width: 50%;} } } } @media(max-width:540px){ .partners_inner { ul { li{width: 100%;} } } } /* ========================================= */ /* Contact Page CSS */ /* ======================================== */ .contact-main{ .contact-info{ .info-item { position: relative; padding: 20px; .box-table { li{ font-size: 16px; font-weight: 500; list-style-type: none; margin-bottom: 20px; position: relative; width:$size100; span { color: $themecolor; float: right; } &::before { content: ""; position: absolute; height: 1px; width: 50px; border: 1px dashed #737373; top: 12px; left: 0; right: 0; margin: auto; } &:last-child{ margin-bottom:0; } } } .info-icon i{ font-size: 60px; } } } .contact-map { .map-main { border-radius:15px; overflow: hidden; } .contact-form { background: $black; padding: 30px; border-radius:15px; } } } @media(max-width: 991px){ .contact-main { .contact-info{ .contact-form{ padding:0!important; } } } } @media(max-width: 767px){ .contact-main { .contact-map { .contact-form{margin-top:2rem;} } } } .contact-info-main{margin-top:-80px;} /* ========================================= */ /* Gallery CSS */ /* ======================================== */ .gallery { .gallery-item { position: relative; overflow: hidden; .gallery-image{ img{width: $size100;} } .gallery-content { position: absolute; width: $size100; height:$size100; top: $size100; left: 0; background: linear-gradient(to bottom, transparent, #000000); transition: $transition; z-index:2; ul { position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); li { border: 1px solid #ffffff26; color: $white; height: 50px; width: 50px; text-align: center; font-size: 20px; line-height: 2.5; display: inline-block; border-radius:10px; margin: 0; transition: $transition; a{ color: $white; } &:hover{background: $themecolor; transition:$transition} } } } &:hover { .gallery-content{ top: 0; transition: $transition; } } } .overlay{ background: rgba(0, 0, 0, 0.40); } } a.lb-close { position: absolute; top: -30px; right: 30px; } /* ========================================= */ /* Error Page CSS */ /* ======================================== */ .error{ background: $white; border-top:$borderall; .error-content { width: 60%; margin: 0 auto; position: relative; z-index: 1; i{ color:$themecolor; } h1 { font-size: 252px; margin: 0px; color: $white; line-height: 1; span { text-shadow: -8px 0px 0px $white; color: $themecolor; } } } .newsletter-form { position:relative; form{ border-radius:0px; overflow:hidden; position:relative; input{ padding-right:65px; height:50px; outline:none; } input.nir-btn{ position: absolute; right: 0; top: 0; border:none; text-align: center; border-radius: 0; padding: 14px 20px 12px; transition:$transition; &:hover{ background:$themecolor!important; transition:$transition; color: $white; } } } } } .error.error1{ &:before{ content: ''; background:url(../images/trending-bg.jpg) no-repeat; background-size:cover; background-attachment:fixed; position:absolute; top:0; left: 0; width:$size100; height:$size100; opacity: 0.2; } } @media(max-width: 991px){ .error { .error-content{ width:$size100; } } .reservation-main{width:$size100!important; padding: 0!important;} } @media(max-width: 811px){ .error { padding: 5rem 0 3rem!important; .error-content{ width:$size100; } } } @media(max-width: 567px){ .error { .error-content{ h1{font-size: 140px; letter-spacing:-20px;} .nir-btn{margin:0 0 1rem;} } .newsletter-form { width:$size100!important; form { border-radius:0px; input[type="email"]{ padding-right:20px; } } } } .login-register{ .log-main{ width:100%!important; button{width:100%!important; margin:0 0 10px!important;} } } } /* ========================================= */ /* Coming Soon CSS */ /* ======================================== */ section.comingsoon { background-size: cover; background-position: center; background-attachment: fixed; background-repeat:no-repeat; min-height: 100vh; &::before{ content:''; position:absolute; left: 0; top: 0; bottom:0; width:100%; background:url(../images/bg/bg6.jpg); background-size: cover; background-position: center; background-attachment: fixed; background-repeat:no-repeat; opacity:0.4; } .comingsoon-content { position: relative; z-index: 1; .coming-title span { color: $themecolor; font-size: 90px; } .counter-box { text-align: center; display: inline-block; color: $white; padding:0 30px; text-transform: $textcap; font-size: 21px; span { font-size: 90px; color: $white; display: block; font-weight: $fontbold; line-height: 1.5; } } } } @media(max-width: 991px) and (min-width: 812px){ section.comingsoon{ height: 200vh; } } @media(max-width:911px){ section.comingsoon{ .comingsoon-content{ .newsletter-form{width:$size100;} } } } @media(max-width: 767px){ section.comingsoon{ .comingsoon-content { .coming-title { span{font-size: 40px;} } .counter-box { span{font-size: 54px;} } } .coming-image{margin-top: 2rem;} } } @media(max-width: 639px){ section.comingsoon{ &::before{display:none;} .comingsoon-content { .coming-title { h1{font-size:44px; line-height:1; margin-bottom:15px!important;} span{font-size: 30px;} } .counter-box { width: 100%; span{font-size: 42px;} } } } } @media(max-width: 567px){ section.comingsoon, section.comingsoon.comingsoon1 { .comingsoon-content { .coming-title-main{width:100%!important; } .newsletter-form { form { border-radius:0px; input[type="email"]{ padding-right:20px; } input.nir-btn{ position:relative; border-radius:0px; margin: 1rem 0 0; } } } } } } /* ========================================= */ /* Instagram CSS */ /* ======================================== */ .insta-main{ .insta-inner { .follow-button { position: absolute; left: 50%; top: 50%; transform:translate(-50%, -50%); z-index: 1; h5 { position: relative; background-color: $white; font-size:16px; color: #1a1a1a; display: block; padding: 12px 15px 13px; text-align: center; font-weight:$fontnormal; width: 250px; -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); &:after { content: ''; position: absolute; left: -5px; top: -5px; right: -5px; bottom: -5px; border: 1px solid $white; border-radius:10px; } } } .insta-image, .insta-image a img{ transition: $transition; overflow: hidden; } .insta-image{ &:hover { img{ transform: scale(1.1); transition: $transition; } } } } } @media(max-width:479px){ .insta-main { .insta-inner { .follow-button{ h5 a{font-size: 13px;} } } } } /* ========================================= */ /* Newsletter CSS */ /* ======================================== */ .newsletter{ background-position: bottom; background-repeat:no-repeat; background-size:cover; .newsletter-form { position:relative; form{ border-radius:0px; overflow:hidden; position:relative; border:$borderall; input{ padding-right:65px; border:none; height:50px; outline:none; } button{ position: absolute; right: 0; top: 0; padding: 15px 24px; transition:$transition; &:hover{ background:$themecolor1!important; transition:$transition; color: $white; opacity:0.8; } } } } } @media(max-width: 811px){ .newsletter { .newsletter-main { .newsletter-form{ width:60%!important; } } } } @media(max-width: 767px){ .newsletter { .newsletter-main { .newsletter-form{ width:$size100!important; } } } } @media(max-width:567px){ .newsletter { .newsletter-main { .newsletter-form { form { border:none!important; border-radius: 0!important; input{border:$borderall!important; padding-right:20px!important;} input.nir-btn, button{ border:none!important; position:relative!important; margin-top: 16px; width:$size100; } } } } } } /* ========================================= */ /* Footer CSS */ /* ======================================== */ footer { width: 100%; overflow:hidden; position:relative; background-position: bottom right; background-repeat:no-repeat; background-color:#17233e; .overlay{opacity: 0.8;} a, p, li{ color: $white; font-weight:$fontnormal; } a:hover{color:$white!important;} h3 { position: relative; padding-bottom: 10px; margin-bottom: 30px; &:after { position: absolute; content: ''; height: 2px; width: 50px; background: $white; left: 0; bottom: 0; } } .footer-upper{ position: relative; z-index: 1; .footer-links{ ul.list{ li{ display:inline-block; padding: 0 10px; } } ul{ li{ margin-bottom:20px; color: $white; display: block; a{ transition: $transition; color: $white; &:hover{color: $themecolor!important; transition: $transition; } } a.active{color: $themecolor;} } p{ span { color: $themecolor; } } } .tagcloud{ a{ display:inline-block; &:hover{background:$themecolor!important;} } } h5{border:none; padding:0;} p.f-para{border-bottom:1px dashed #f1f1f1;} input.nir-btn{ border:none; &:hover{ opacity: 0.8; background:$themecolor!important; color:$white; } } .post-list{ border-bottom:1px dashed #ffffff30; padding-bottom:10px; margin-bottom: 10px; &:last-child{border:none; margin:0; padding:0;} .post-image{width:30%; border-radius:0px; overflow:hidden;} span{font-size:12px;} } } .footer-about{ p, li{ color: $bgrey; } li{line-height: 2;} } } .footer-middle{ border-top:$borderdashed; .footer-nav{ ul { li a{ display: inline-block; margin: 0 5px; font-weight:$fontbold; } } } } .footer-copyright { position: relative; z-index: 1; .copyright-inner{ background: #fbfbfb12; } } .newsletter-main{ .section-title h2{font-size: 24px;} } .newsletter-form { button{width: 38%;} } .footer-payment{ position: relative; z-index: 2; .col-lg-8.footer-payment-nav{ margin-bottom: 1rem !important; } .col-lg-4.footer-payment-nav{ margin-bottom: 1.5rem !important; } } .footer-listing-main{ .footer-listing{ border: 1px dashed #f1f1f157; padding: 20px; i{font-size: 36px; display: block;} } } } .social-links{ display:inline-block; ul{ li{ display:inline-block!important; a { background: #ffffff26; color: $white; width: 40px; height: 40px; display: inline-block; text-align: center; font-size: 17px; line-height: 2.4; border-radius:50%; &:hover{ color: $white; background: $themecolor; } } } } } footer.footer1{ background-color:transparent; h4 { &:after { position: absolute; content: ''; height: 2px; width: 50px; background: $themecolor; left: 0; bottom: 0; } } .footer-upper{ .footer-links{ ul{ li{ margin-bottom: 0; line-height: 2.5; display:block; color: $black; a{ color: $black; } } p{ span { color: $themecolor; } } } input.nir-btn{ border:none; &:hover{ opacity: 0.8; background:$themecolor!important; color:$white; } } .post-list{ border-bottom:1px dashed #ffffff30; padding-bottom:10px; margin-bottom: 10px; &:last-child{border:none; margin:0; padding:0;} .post-image{width:30%; border-radius:0px; overflow:hidden;} span{font-size:12px;} } } } .footer-copyright { .social-links{ ul{ li{ display:inline-block; a { background: $themecolor; color: $white; width: 40px; height: 40px; display: inline-block; text-align: center; font-size: 17px; line-height: 2.5; &:hover{ color: $white; background: $themecolor; } } } } } } } footer.footermain { width: 100%; overflow:hidden; position:relative; &::before{ content: ''; background:#181d20 url(../images/testimonial.png); background-size: cover; background-position: center; background-attachment: fixed; background-repeat:no-repeat; position:absolute; left: 0; top: 0; height: 100%; width: 100%; } .footer-upper{ position: relative; z-index: 1; } } @media(max-width: 1100px) and (min-width: 1024px){ footer { .footer-listing-main { .footer-listing{ margin:0 5px; } } } } @media(max-width: 991px){ footer{ .footer-upper{ padding-bottom: 3rem; .footer-links{width:100%!important;} } .newsletter { .newsletter-main{ text-align:center; .section-title{margin-bottom:1rem;} .newsletter-form{ margin:0 auto!important; } } } .f-payment{ margin-top:1rem; text-align:center; } .footer-listing-main { .footer-listing{ margin-top:15px; } } .newsletter-form { form{display:block!important;} button{width: 100%; margin:10px 0 0!important;} } } footer.footer1{ .section-title{width:$size100; text-align:center; margin-bottom: 2rem;} .newsletter { .newsletter-main { text-align: center; .newsletter-form{ width:80%; margin:0 auto; } } } } } @media(max-width: 767px){ footer{ .footer-copyright { .copyright-inner{ text-align: center; .copyright-text{margin-bottom:15px;} } } .footer-middle{ padding-top: 0!important; .footer-nav{width:$size100!important;} } } } @media(max-width: 639px){ footer { .footer-upper { .footer-links { .post-list{ justify-content: normal!important; .post-content{ padding-left: 1rem; } } } } } } @media(max-width: 359px){ footer .footer-payment .footer-pay .footer-payment-nav select{ margin-bottom:15px; } } /* ========================================= */ /* Listing CSS */ /* ======================================== */ .listing-main.mt-map{margin-top: -80px; position:relative;} .list-results { position: relative; margin-bottom: 2rem; width: 100%; label {margin: 0;} .nice-select { border: $borderall; background: $white; width: 150px; padding-left:20px; line-height: 1.5; height: 44px; } .change-grid, .change-list{ display: inline-block; i{ line-height: 2.5; text-align: center; display: inline-block; transition: $transition; height:40px; width:40px; background:$white; } } .change-list.f-active, .change-grid.f-active{ i{ background: $themecolor1; color: $white; transition: $transition; border-color:$themecolor1; } } } .form-find{ .nice-select{ line-height:2; } } .page-banner-img{ background-size: cover; background-position: center; background-repeat: no-repeat; height: 500px; width: 100%; } .blog-full { overflow:hidden; .blog-image{ position: relative; height: $size100; overflow: hidden; border-radius:0px; transition:$transition; .h-date { text-align: center; position: absolute; top: 20px; right: 20px; padding: 12px 20px; border-radius: 15px; z-index:1; } > a { background-size: cover; height: $size100; width: $size100; background-position: center; display: inline-block; transition:$transition; } } } .blog-content { display: inline-block; width: $size100; p:first-child:first-letter{ font-size: 80px; color: $themecolor; float: left; display: block; line-height: 1; padding-right: 10px; font-weight: 400; } > a:hover{color: $themecolor!important; transition: $transition;} } // listing detail .detail-title{ .detail-title-inner{ .listing-rating i{color:$white;} .list-single-contacts{ li{ font-size: 13px; padding-right:10px; } } .list-single-details{ .list-single-rating { position: relative; z-index: 1; display:inline-block; .rating-score{ span { background: $white; color: $themecolor; float: left; font-weight: $fontbold; border-radius:0px; padding: 16px 18px; font-size: 24px; } } } } } } .detail-listing-inner{ border: $borderall; box-shadow: $box-shadow; padding: 20px; border-radius:0px; > div{ border-bottom:1px dashed $grey; padding-bottom: 2rem; margin-bottom: 1.5rem; .detail-amenities { li { width: 32.90%; margin-bottom: 0.5%; border: $borderdashed; padding: 10px; color: $bgrey; border-radius:0px; i{margin-right: 5px;} } } &:last-child{ border:none; padding:0; margin:0; } } .detail-recentlist { .blog-full { box-shadow: none; } } } .detail-comments, .single-comments{ .comment-box { display: flex; margin-bottom: 30px; &:last-child { margin-bottom: 0; } .comment-image { text-align: center; img { border-radius: 10px; } } .comment-content { border-bottom: 1px dashed #f1f1f1; position: relative; background:$grey; padding: 20px; margin-left: 30px; &:before { content: ''; position: absolute; left: -20px; top: 25px; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 20px solid $grey; } &:last-child { border: 0; } p.comment-date { position: absolute; right: 20px; top: 20px; font-size: 14px; margin: 0; } .comment-rate{ span.comment-title { font-weight: $fontmiddle; font-style: italic; } } p.comment {margin: 0.5rem 0;} .comment-like { display: flex; align-items: center; justify-content: space-between; padding-top:1rem; a {padding: 6px 12px;} .like-title { display: inline-block; } .like-btn{ a {margin-left: 10px;} a.like {color: #292e8c;} a.dislike {color: #a6aebb;} a.love {color: #ff6f7e;} } } } } } @media(max-width: 991px){ .blog-full { .blog-height{height: 250px;} } .list-sidebar{margin-top: 2rem;} .listing-main1{ padding: 0!important; .form-find{ .form-group{ margin:0 0 0.5rem!important; } } } } @media(max-width: 767px){ .detail-listing-inner > { div { .detail-amenities { li{width:49%;} } } } .blog-full { .blog-image > a{height:320px;} } .blog-content{ padding-top:20px!important; } .blog-single-in{ .blog-date, .blog-single-in-cont{ width: 100%!important; } .blog-single-in-cont{padding:0 20px 20px;} } .blog{ .listing-inner{padding:0!important;} } } @media(max-width: 639px){ .detail-comments, .single-comments { .comment-box{ display: block!important; text-align: center; .comment-image{ display:inline-block; } .comment-content{ margin-top: 1rem; margin-left:0!important; &:before{display:none;} p.comment-date{position:relative!important; top:0; right: 0;} .rating-comment{display:inline-block!important; width:$size100;} } p.comment-date{display:inline-block!important; margin-top:2rem;} } } .blog-imagelist{ text-align:center; img{margin-bottom:1rem;} } .review-box{margin-bottom: 15px;} } @media(max-width: 567px){ .list-results{ display:inherit!important; text-align: center; .click-menu{ justify-content:center!important; margin-top: 1rem; .sortby{ display:inline-block!important; } } } ul.detail-inline{ display:block!important; li{display:block!important; margin:0 0 5px!important;} } .detail-listing-inner > { div { .detail-amenities{ li{width:100%;} } } } } @media(max-width: 400px){ .detail-comments, .single-comments { .comment-box{ .comment-content{ .comment-like{ display:block!important; .like-title{float:none!important;} .like-btn{ float:none!important; margin-top: 0.5rem; a{padding: 0;} } } } } } .detail-title { .detail-title-inner { .list-single-contacts { li{padding-right:0} } } } } /* ========================================= */ /* Blog CSS */ /* ======================================== */ .swiper-list{ li { display: inline-block; margin-bottom: 0; border: 1px solid$white; padding: 5px 10px; text-align: center; border-radius:0px; } } section.blog { .grid { position: relative; overflow: hidden; border-radius:0px; .gridblog-content { padding: 20px 0 0; .date{ border-bottom: $borderall; display: inline-block; a{ color:#999; font-size: 14px; &:hover{color:$themecolor;} } } } .grid-image { position: relative; transition:$transition; overflow: hidden; img { transition: $transition; width: $size100; } &:hover img { transform: scale(1.1); transition: $transition; } &:before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.5); -webkit-transition: -webkit-transform 1.8s; transition: -webkit-transform 1.8s; transition: transform 1.8s; transition: transform 1.8s,-webkit-transform 1.8s; -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -200%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -200%, 0); z-index: 1; } &:hover{ &:before { -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 200%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 200%, 0); } } .overlay{ background:linear-gradient(to top, #0000007d, transparent); } } .grid-item1 { .gridblog-content { position: absolute; bottom: 0; width: 100%; z-index: 2; padding: 20px; } .date{ border-bottom: 1px solid $white; display: inline-block; } } } } .author-news { position: relative; overflow: hidden; background-size: cover; background-position: center; background-attachment: fixed; display: inline-block; width: $size100; .author-news-content { position: relative; z-index: 1; .author-thumb { width: 100px; height: 100px; margin: 0px auto; position: relative; overflow:hidden; img { width: $size100; border-radius: 50%; height: $size100; } &:before { position: absolute; content: ''; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 80px; width: 80px; border-radius: 50%; border: 2px dashed $white; } } } } .header-social { ul { li { display: inline-block; margin: 0; a i { height: 40px; width: 40px; text-align: center; line-height: 40px; background: #5e5eb7; color: #fff; margin-right: 2px; &:hover {opacity: 0.8;} &:last-child {margin-right: 0;} } &:nth-child(2) a i {background: #c72026;} &:nth-child(3) a i {background: #29a4dd;} } } } ul.sidebar-category { li { display:block; a{ position: relative; margin: 0 0 12px; border-radius:10px; background:$white; padding:14px 20px; border:$borderall; display:block; &:hover{ background:$themecolor; color: $white; } } } li.active { a{ background:$themecolor; color: $white; } } } ul.sidebar-category1 { li { display:block; line-height:2.4; } } .sidebar-products{ .s-content{ border-bottom:$borderdashed; .products-price{color:$themecolor;} } } .sidebar-tabs{ .nav-tabs { border-bottom: none; background: $white; overflow: hidden; margin-bottom:30px; >li { button { border-radius: 10px; padding: 15px; margin: 0; line-height: inherit; border: 1px solid #f1f1f1; display:inline-block; width:100%; &:hover{ color: $white!important; border-color:$themecolor; background:$themecolor; } } button.active{ color: $white!important; border-color:$themecolor; background:$themecolor; &:hover{ color: $white!important; border-color:$themecolor; background:$themecolor; } } } } .sidebar-image { overflow: hidden; img{width: $size100; border-radius: 10px;} } .s-content { .blog-no { font-size: 32px; color: #ccc; font-weight: $fontbold; } .date{font-size: 14px; font-style:italic;} h5{text-transform:$textcap; border:none; padding: 0;} } } ul.sidebar-tags { li { display: inline-block; margin-bottom: 0; a { padding: 10px 15px; background: $white; display: inline-block; margin-bottom: 3px; border-radius:10px; color: #444; border:$borderall; box-shadow:$box-shadow; transition: $transition;; &:hover { background: $themecolor; color: $white; transition: $transition; } } } } .sidebar-videos { article.post { padding: 15px; background: #fff; border:$borderall; box-shadow:$box-shadow; } button.slick-prev.slick-arrow, button.slick-next.slick-arrow{ display:none!important; } } @media(max-width:991px){ .sidebar-pomplet{text-align:center;} } .blog-single{ .para-content { border-top: $borderdashed; padding-top: 15px; span a { font-size: 14px; font-style: italic; } } .blog-quote { position: relative; text-align: center; z-index: 10; padding: 60px 40px 30px; border-radius:0px; overflow: hidden; &:before { position: absolute; content: ''; left: 0; top: 0; height: 100%; width: 100%; background: $themecolor; z-index: -1; } p { font-size: 28px; line-height: 1.3; margin-top: 50px; } span { font-size: 18px; font-style: italic; } i { position: absolute; left: 0; right: 0; margin: 0 auto; top: 30px; height: 75px; width: 75px; text-align: center; line-height: 75px; background: $white; color: $themecolor; border-radius: 50%; margin-bottom: 20px; &:after { position: absolute; content: ''; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 55px; width: 55px; border-radius: 50%; border: 1px dashed $white; } } } .blog-share { padding: 20px; background: $white; .blog-share-tag ul { li { display: inline-block; margin-bottom: 0; } } } .blog-next { display: inline-block; width: $size100; background: $white; border-radius:0px; overflow: hidden; a { width: 50%; padding: 20px; } a.float-left {background: $themecolor;} .prev, .next { position: relative; i { position: absolute; left: 0; top: 6px; } } .next i{left: inherit; right: 0;} } .blog-author { padding: 20px; border-radius:0px; background:$white; .blog-author-item { .title { span { text-transform: $textcap; font-size: 16px; font-weight: $fontnormal; } } .blog-thumb{ img { border-radius: 50%; width: 150px; height: 150px; } &:before { position: absolute; content: ''; left: 50%; top: 50%; height: 125px; width: 125px; transform: translate(-50%, -50%); z-index: 1; border: 2px dashed $white; border-radius: 50%; } } } } } @media(max-width: 991px){ .blog-sidebar{margin-top: 2rem; position: relative;} section.login{ padding-bottom:0!important; .login-content{margin-bottom: 2rem;} } } @media(max-width: 767px){ .blog-single { .blog-next { a{width:100%;} } .blog-share{ display:block!important; text-align:center; .header-social{margin-top:1rem;} } .blog-author{ text-align:center; .blog-thumb{margin-bottom:1rem;} } .blog-quote{ padding: 60px 20px 30px; p{font-size:21px;} } .blog-single-in-cont{width: 100%!important; padding: 0!important;} } .detail-comments h4, .single-comments h4{ text-align: center; } } @media(max-width: 359px){ .sidebar-tabs { .nav-tabs > { li > { a{padding: 15px 13px;} } } } } .main-slider-1 { z-index:1; &::before { content: ''; background: #172445; height: 100%; width: 50%; position: fixed; left: 0; top: 0; z-index:-1; } .main-slider-inner{ position: fixed; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%); .logo-tab a { background: $white; display: inline-block; padding: 15px; } .form-content { width: 80%; .search-tabs { li{ a { color: $white; font-size: 18px; display: inline-block; vertical-align: middle; font-weight: 500; position:relative; span { display: block; font-size: 15px; } } i { border-radius: 50%; color: $themecolor; float: right; font-size: 16px; height: 38px; line-height: 38px; margin-right: 0px; margin-top: 2px; text-align: center; width: 38px; background:$white; } } li.active { a{ color: $themecolor; span{color: $themecolor;} } i{ background: $themecolor; color: $white; } } } .nice-select{ padding:13px 20px 10px 35px; } .range-slider { .ui-slider { .ui-slider-range{ background: $white; } .min-value, .max-value{color:$white;} } } label{color:$white;} .input-box { position: relative; display: inline-block; width: 100%; input{padding-left: 35px;} i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); z-index: 1; } [class^="fa-"]:before { color: $themecolor; font-weight: 600; } } } .social-icons { li{ display: inline-block; position: relative; a { color: $themecolor; width: 35px; height: 35px; border-radius: 50%; background: $white; text-align: center; line-height: 2.3; margin: 0 2px; } } } } #particles-js{position:fixed; z-index:-1;} } @media(max-width: 991px){ .home-search{ .overlay{display:none;} .main-slider-1 { &::before{ width:100%; opacity:0.8; } .main-slider-inner{ position:relative; top: inherit; left: inherit; transform:none; .main-tab-sec{margin-bottom: 2rem;} .col-lg-6{padding: 0 15px!important;} .form-content { .search-tabs { li { text-align: center; a{display:block;} i{float:none;} } } } } } } } @media(max-width:991px){ .booking-terms{ .form-group{width: 100%!important;} a{width: auto!important;} } } // flight homepage .flight-banner{ a.nir-btn{padding: 12px 24px; height: 50px; line-height: 2;} .flight-slider{ position: relative; width: 150%; right: 0; top: 0; } } .flight-navtab{ .nav-tabs{ border:none; background:$bgrey; border-radius: 10px 10px 0 0; text-align: center; display: inline-block; button{ padding:15px 20px; text-align: center; display: inline-block; text-transform: uppercase; color: #fff; border: none; border-radius: 0; span{ display: block; font-weight: 700; } } button.active, button.show{ background: $themecolor; color: #fff; } } } .flight-full{ .accordion-button{ &:focus{box-shadow: none;} } .accordion-button:not(.collapsed){color: $themecolor; background: none; box-shadow: none;} } @media(max-width:991px){ .flight-banner { .banner-in{ .book-form{position: relative!important;} } .flight-slider{position: relative; width: 100%;} } } @media(max-width:991px){ .flight-navtab .nav-tabs button{width: 100%;} } // car homepage .car-banner{ a.nir-btn{padding: 12px 24px; height: 50px; line-height: 2;} .book-form{width: 90%;} } .car-image { position: absolute; bottom: -90%; right: 0; width: 68%; left: 0; margin: 0 auto; } @media(max-width:991px){ .car-image{ width: 100%; bottom:-51%; } } @media(max-width:735px){ .car-banner { .container{padding: 0 15px;} .book-form{width: 100%;} .car-slider{ top: 20px!important; .slick-initialized .slick-slide{margin: 0px 0 20px;} } } .featured-counter{ padding-bottom: 0!important; .car-image{ position: relative; bottom:-18px; } } .car-testi{padding-top: 5rem!important;} .category-main-inner{padding-top: 3rem!important;} } // Cruise homepage .cruise-banner{ .slider { height: 600px!important; .swiper-container{ .swiper-slide { .slide-inner { .swiper-content{width: 60%; top: 50%;} } } } } }