ZSec File Manager
Upload
Current Directory: /home/lazerepilasyontu/public_html/public
[Up]
..
[Open]
Hapus
Rename
.DS_Store
[Edit]
Hapus
Rename
.htaccess
[Edit]
Hapus
Rename
admin
[Open]
Hapus
Rename
assets
[Open]
Hapus
Rename
css
[Open]
Hapus
Rename
e.zip
[Edit]
Hapus
Rename
favicon.ico
[Edit]
Hapus
Rename
index.php
[Edit]
Hapus
Rename
js
[Open]
Hapus
Rename
robots.txt
[Edit]
Hapus
Rename
storage
[Edit]
Hapus
Rename
uploads
[Open]
Hapus
Rename
vendor
[Open]
Hapus
Rename
web.config
[Edit]
Hapus
Rename
Edit File
/*========================================================== 1. IMPORT FILES ==========================================================*/ /*========================================================== 2. GENERAL ==========================================================*/ $color_1: #5d5d5d; $color_2: #2d2d2d; $color_3: #23d3d3; $color_4: inherit; $color_5: #757575; $color_6: #F5F5F5; $color_7: #8d8d8d; $color_8: #1a1a1a; $color_9: #ffffff; $color_10: #9d9d9d; $color_11: #111111; $color_12: #000000; $color_13: #f9f9f9; $color_14: #eeeeee; $color_15: rgba(0,0,0,0.8); $color_16: transparent; $color_17: #d8d8d8; $color_18: #4267b2; $color_19: #ea4335; $color_20: #dddddd; $color_21: #00d3d4; $color_22: #1d1d1d; $color_23: #20d706; $color_24: #ff2d55; $color_25: #f2d23d; $color_26: #ffcc01; $color_27: #9a9a9a; $color_28: #52e707; $color_29: #ffd13d; $color_30: #5f4fff; $color_31: #ffcc00; $color_32: #2dcb48; $color_33: #e74807; $font_family_1: 'Jost-Book'; $font_family_2: 'Jost'; $font_family_3: 'Jost-Semi'; html { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } body { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; font-size: 16px; color: $color_1; font-weight: 400; font-family: $font_family_1; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: normal; text-align: right; } div { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } span { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } applet { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } object { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } iframe { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } h1 { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; clear: both; color: $color_2; font-family: $font_family_2; font-weight: 700; font-size: 24px; } h2 { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; clear: both; color: $color_2; font-family: $font_family_2; font-weight: 700; font-size: 20px; } h3 { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; clear: both; color: $color_2; font-family: $font_family_2; font-weight: 700; font-size: 18px; } h4 { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; clear: both; color: $color_2; font-family: $font_family_2; font-weight: 700; font-size: 16px; } h5 { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; clear: both; color: $color_2; font-family: $font_family_2; font-weight: 700; font-size: 14px; } h6 { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; clear: both; color: $color_2; font-family: $font_family_2; font-weight: 700; font-size: 12px; } p { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; line-height: 1.44; vertical-align: baseline; } blockquote { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } pre { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } a { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; color: $color_2; transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; &:hover { color: $color_3; text-decoration: none; } &:focus { text-decoration: none; color: $color_4; outline: none; } } abbr { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } acronym { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } address { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } big { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } cite { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } code { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } del { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } dfn { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } em { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } font { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } ins { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } kbd { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } q { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } s { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } samp { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } small { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } strike { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } strong { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } sub { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } sup { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } tt { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } var { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } dl { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } dt { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } dd { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } ol { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } ul { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } li { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } fieldset { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } form { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } label { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } legend { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } table { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } caption { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } tbody { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } tfoot { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } thead { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } tr { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } th { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } td { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } img { border: none; max-width: 100%; height: auto; } button { transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; border-color: $color_3; outline: none; } input { transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; } svg { transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; } input[type=text] { border: 1px solid $color_1; padding: 8px 15px; font-size: 14px; color: $color_5; font-style: italic; border-radius: 0; &:focus { border-color: $color_3; outline: none; } } input[type=email] { border: 1px solid $color_1; padding: 8px 15px; font-size: 14px; color: $color_5; font-style: italic; border-radius: 0; &:focus { border-color: $color_3; outline: none; } } input[type=password] { border: 1px solid $color_1; padding: 8px 15px; font-size: 14px; color: $color_5; font-style: italic; border-radius: 0; &:focus { border-color: $color_3; outline: none; } } input[type=number] { border: 1px solid $color_1; padding: 8px 15px; font-size: 14px; color: $color_5; font-style: italic; border-radius: 0; &:focus { border-color: $color_3; outline: none; } } input[type=search] { border: 1px solid $color_1; padding: 8px 15px; font-size: 14px; color: $color_5; font-style: italic; border-radius: 0; &:focus { border-color: $color_3; outline: none; } } textarea { border: 1px solid $color_1; padding: 8px 15px; font-size: 14px; color: $color_5; font-style: italic; border-radius: 0; &:focus { border-color: $color_3; outline: none; } } .table { >tbody { >tr { >td { border-color: $color_1; } >th { border-color: $color_1; } } } >tfoot { >tr { >td { border-color: $color_1; } >th { border-color: $color_1; } } } >thead { >tr { >td { border-color: $color_1; } >th { border-color: $color_1; } } } } .align-center { text-align: center !important; } .align-left { text-align: right !important; } .align-right { text-align: left !important; } .title { font-size: 24px; font-weight: 500; opacity: 0.9; margin-bottom: 20px; } .title.title--while { color: $color_9; opacity: 1; } .title--result { span { font-family: $font_family_1; font-size: 16px; font-weight: 400; color: $color_1; vertical-align: 1px; } } .site-header { padding: 20px 0; .container-fluid { padding-right: 50px; padding-left: 50px; } } .popup-background { background-color: $color_15; position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 999; display: none; } .popup { position: fixed; top: 0; right: -280px; bottom: 0; width: 280px; background-color: $color_9; box-shadow: 2px 0 4px 0 rgba(0, 0, 0, 0.2); z-index: 1000; overflow: auto; opacity: 0; visibility: hidden; transition: all 0.3s; &::-webkit-scrollbar { width: 0px; background-color: $color_6; } &::-webkit-scrollbar-thumb { background-color: $color_3; border-radius: 10px; } &::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: $color_6; } .popup__close { position: absolute; top: 32px; left: 25px; cursor: pointer; line-height: 0; z-index: 9; i{ font-size: 20px; } } .popup__minicart { padding: 0 25px; } .popup__button { border-bottom: 0; } .popup__user { padding: 30px 25px; a { font-family: $font_family_2; font-size: 15px; font-weight: 500; margin-left: 25px; &:last-child { margin-left: 0; } } } .popup__cart { padding: 30px 25px; i{ font-size: 26px; vertical-align: -2px; } } } .popup__box { padding: 25px; border-bottom: 1px solid $color_14; line-height: normal; li { list-style: none; display: block; margin-bottom: 25px; &:last-child { margin-bottom: 0; } a { font-family: $font_family_2; font-size: 15px; font-weight: 500; margin-left: 25px; margin-left: 0; i { vertical-align: 1px; margin-right: 3px; transition: all 0.3s; font-size: 12px; } } a.open{ i{ transition: all 0.3s; transform: rotate(-180deg); } } .sub-menu { padding-right: 22px; margin-top: 25px; display: none; } } } .popup--right { left: -280px; right: auto; text-align: right; .popup__button { padding: 0 25px; .btn { width: 100%; } } .popup__box { &:last-child { border-bottom: 0; } } } .popup.popup--right.open { left: 0; right: auto; } .popup.open { opacity: 1; visibility: visible; right: 0; } .product-small { .product-small__thumb { img { max-width: 80px; } } .product-small__info { padding-right: 15px; align-self: center; } display: -webkit-box; display: -ms-flexbox; display: flex; padding: 15px 0; border-bottom: 1px solid $color_14; position: relative; } .product-small__info { h3 { font-size: 15px; font-weight: 500; margin-bottom: 10px; } } .product-small__price { span { font-family: $font_family_2; font-size: 15px; font-weight: 500; color: $color_2; } } .product-small__total { padding: 25px 0; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; b { font-size: 18px; font-weight: 500; font-family: $font_family_2; } span { font-size: 18px; } } .product-small__remove { position: absolute; bottom: 15px; left: 0; line-height: 0; i{ font-size: 20px !important; } } .site__menu { line-height: 40px; display: inline-block; vertical-align: middle; >a { line-height: 0; display: block; margin-left: 23px; i{ font-size: 20px; } } } .site__brand { line-height: 40px; display: inline-block; vertical-align: middle; margin-left: 23px; } .site__search { line-height: 40px; display: inline-block; vertical-align: middle; max-width: 270px; width: 100%; vertical-align: baseline; .search__close{ position: absolute; top: 50%; transform: translateY(-50%); left: 25px; line-height: 0; z-index: 10; display: none; } } .right-header { letter-spacing: -0.3em; > div { line-height: 40px; display: inline-block; vertical-align: middle; letter-spacing: normal; margin-left: 25px; i{ font-size: 12px; } &:last-child { margin-left: 0; } } > div.right-header__button.btn{ i{ font-size: 24px; vertical-align: -2px; } } .right-header__search{ margin-left: 25px; display: none; a{ line-height: 0; display: inline-block; vertical-align: -3px; } } } .site__brand__logo { img { max-width: 96px; } } .site{ text-align: right; } .site__search__form { line-height: normal; border-bottom: 1px solid $color_17; position: relative; padding-bottom: 3px; .site__search__input { border: 0; padding: 0; font-style: normal; color: $color_7; margin-right: 26px; width: calc(100% - 26px); font-family: $font_family_1; &::placeholder { color: $color_7; font-weight: 400; font-family: $font_family_1; } &:-ms-input-placeholder { color: $color_7; font-weight: 400; font-family: $font_family_1; } &::-ms-input-placeholder { color: $color_7; font-weight: 400; font-family: $font_family_1; } } } .site__search__icon { line-height: 0; display: inline-block; position: absolute; top: 2px; right: 0; i{ font-size: 20px; } } .right-header__destinations, .right-header__languages { position: relative; a { svg { vertical-align: 2px; } } ul { position: absolute; top: 100%; right: 0; margin-top: 20px; width: 140px; padding: 5px 0; list-style: none; text-align: right; -webkit-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1); opacity: 0; visibility: hidden; transition: all 0.3s; background-color: $color_9; z-index: 9; li { a { display: block; padding: 0 15px; } } } ul.open { margin-top: 0; transition: all 0.3s; opacity: 1; visibility: visible; } } .right-header__languages { a { img{ vertical-align: -1px; } } ul{ li{ img{ height: 12px; margin-left: 7px; } a{ display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center } span{ white-space: nowrap; display: inline-block; text-overflow: ellipsis; width: 85px; overflow: hidden; } } } } .right-header__minicart { svg { vertical-align: -3px; &:hover { >* { fill: $color_3; } } } .right-header__number { color: $color_3; } } .right-header__button { background-color: $color_3; border-radius: 20px; padding: 0 25px; color: $color_9; svg { vertical-align: -1px; margin-left: 2px; } a { color: $color_9; font-weight: 500; font-family: $font_family_1; display: block; } } .site-banner { height: 500px; background-color: $color_6; background-repeat: no-repeat; background-position: left 30px bottom; .container { position: relative; height: 100%; z-index: 7; } .site-banner__content { position: absolute; top: 50%; transform: translateY(-50%); right: 15px; left: 15px; } } .site-banner__title { font-size: 52px; font-family: $font_family_2; font-weight: 500; color: $color_2; margin-bottom: 32px; } .site-banner__search { position: relative; max-width: 600px; width: 100%; margin-bottom: 20px; .site-banner__search__input { border: 0; font-style: inherit; padding: 0; line-height: 60px; width: 100%; border-radius: 30px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); background-color: $color_9; padding: 0 54px 0 15px; } } .site-banner__search__icon { position: absolute; top: 50%; transform: translateY(-50%); right: 20px; line-height: 0; i{ font-size: 22px; } } .minicart__open{ i{ font-size: 27px !important; vertical-align: -3px; } } .site-banner__search__input { &::placeholder { color: $color_7; font-weight: 400; font-family: $font_family_1; font-size: 16px; } &:-ms-input-placeholder { color: $color_7; font-weight: 400; font-family: $font_family_1; font-size: 16px; } &::-ms-input-placeholder { color: $color_7; font-weight: 400; font-family: $font_family_1; font-size: 16px; } } .site-banner__meta { span { padding-right: 20px; opacity: 0.8; font-family: $font_family_1; color: $color_2; margin-left: 1px; } a { opacity: 1; font-family: $font_family_2; font-weight: 500; color: $color_2; position: relative; margin-right: 8px; transition: inherit; -moz-transition: inherit; -o-transition: inherit; -webkit-transition: inherit; -ms-transition: inherit; &:hover { opacity: 0.7; } &:last-child { margin-right: 0; } &:after { content: ''; position: absolute; right: 0; left: 0; bottom: 0; height: 1px; background-color: $color_2; } } } .cities { padding: 40px 0 30px; } .cities__item { position: relative; margin-bottom: 30px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); overflow: hidden; .cities__name { position: absolute; top: 25px; right: 25px; opacity: 0.9; text-transform: uppercase; color: $color_9; font-weight: 500; font-size: 15px; } .cities__thumb { a { &:after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 120px; background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(0,0,0,0.6)); } } } .cities__info { position: absolute; right: 25px; bottom: 25px; } } .hover__box__thumb { overflow: hidden; display: block; position: relative; } .hover__box { img { -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; transform: scale(1); } &:hover { img { transform: scale(1.1); } } } .cities__info { .cities__capital { font-size: 23.9px; font-weight: 500; opacity: 0.9; color: $color_9; } .cities__number { color: $color_9; font-family: $font_family_1; opacity: 0.9; } } .banner-apps { background-position: center; background-repeat: no-repeat; background-size: cover; padding: 123px 0 173px; } .banner-apps__content { padding-right: 100px; .banner-apps__title { font-size: 48px; font-weight: 500; color: $color_8; line-height: 66px; margin-bottom: 5px; } .banner-apps__desc { font-size: 24px; color: $color_8; line-height: 33px; font-family: $font_family_1; margin-bottom: 40px; } .banner-apps__download { >a { max-width: 200px; display: inline-block; margin-left: 20px; &:last-child { margin-left: 0; } } } } .news { padding: 40px 0 30px; } .post { margin-bottom: 40px; } .post__thumb { overflow: hidden; margin-bottom: 20px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); } .post__category { margin-bottom: 9px; li { list-style: none; display: inline-block; a { text-transform: uppercase; opacity: 0.9; font-family: $font_family_1; color: $color_1; margin-left: 8px; position: relative; font-size: 14px; line-height: 19px; display: inline-block; &:hover { color: $color_3; } &:after { content: ''; display: block; position: absolute; bottom: 1px; right: 0; left: 0; border-bottom: 1px solid $color_3; } } &:last-child { a { margin-left: 0; } } } } .post__info { .post__title { opacity: 0.9; font-size: 20px; color: $color_2; font-weight: 500; } } .title--more { a { opacity: 0.9; font-size: 15px; font-weight: 500; color: $color_3; float: left; position: relative; margin-top: 10px; &:after { content: ''; display: block; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background-color: $color_3; width: 0; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } &:hover { &:after { width: 100%; } } i{ vertical-align: 0px; } } } .page-title { position: relative; height: 400px; background-position: center; background-repeat: no-repeat; background-size: cover; } .page-title__content { text-align: center; position: absolute; top: 50%; transform: translateY(-50%); right: 15px; left: 15px; >* { color: $color_9; } h4 { font-size: 16px; font-weight: 500; text-transform: uppercase; margin-bottom: 5px; } h1 { font-size: 64px; font-weight: 500; } .page-title__slogan { font-size: 18px; font-style: italic; } } .intro { background-color: $color_13; padding: 40px 0; } .intro__content { .intro__text { line-height: 1.44; font-size: 16px; max-width: 530px; } } .intro__meta { .intro__meta__item { border-right: 1px solid #ddd; padding-right: 30px; } } .intro__meta__item { h3 { text-transform: uppercase; font-weight: 500; font-size: 15px; margin-bottom: 10px; } p { >* { display: inline-block; vertical-align: middle; } i { margin-left: 8px; font-size: 24px; } span { font-style: italic; } } } .city-content.affix{ padding-top: 120px; .city-content__tabtitle{ position: fixed; top: 0; right: 0; left: 0; z-index: 99999; } } .city-content__tabtitle { transition: all 0.3s; padding: 20px 0 19px; margin-bottom: 40px; background-color: $color_9; border-bottom: 1px solid $color_14; &:after { content: ''; display: block; clear: both; } } .city-content__tabtitle__tablist { float: right; li { list-style: none; display: inline-block; margin-left: 28px; line-height: 40px; a { font-family: $font_family_3; font-size: 16px; text-transform: uppercase; display: block; position: relative; &:after { content: ''; position: absolute; right: 0; left: 0; bottom: 5px; height: 2px; background-color: $color_16; } } } li.active { a { color: $color_3; &:after { content: ''; background-color: $color_3; } } } } .city-content__tabtitle__button.btn { float: left; padding: 0 30px; } .city-content__tabtitle__button { &:hover { color: $color_9; } svg { display: inline-block; vertical-align: -3px; margin-left: 8px; } } .city-slider { position: relative; .slick-nav { >div { transform: translate(50%,-50%); right: 0; } .slick-nav__next { left: 0; right: auto; transform: translate(-50%,-50%); } i{ vertical-align: -4px; font-size: 24px; } } .slick-slide { >div { padding: 0 15px; } } } .city-content__panels { margin-bottom: 60px; } .city-grid { .pagination { margin-top: 10px; } } .city-content__item { margin-bottom: 40px; .slick-slider{ img{ height: 250px; width: 270px; object-fit: cover; } } } .slick-slide { >div { line-height: 0; >* { line-height: normal; } } } .city-slider__grid { margin-right: -15px; margin-left: -15px; } .banner-dark { opacity: 0.9; background-color: $color_12; padding: 40px 0 30px; } .other-city { .cities__info { .cities__capital { font-size: 22px; } } } .slick-sliders { position: relative; img { height: 400px; object-fit: cover; width: 100%; } } .slick-slider { img { height: 500px; object-fit: cover; } .slick-slide { >div { line-height: 0; } } } .place-slider__grid { margin-bottom: 0; position: relative; .slick-slide { >div { line-height: 0; } } .place-slider__item { img { padding: 0 1px; } } } .place-item__photo { position: absolute; left: 50px; bottom: 30px; svg { display: inline-block; vertical-align: middle; } span { display: inline-block; vertical-align: middle; } a { span { color: $color_9; font-size: 16px; } } } .place-item__icon { position: absolute; top: 30px; left: 50px; > a { opacity: 0.7; transition: all 0.3s; margin-left: 25px; i{ font-size: 28px; color: $color_9; } &:last-child { margin-left: 0; } } a:hover { opacity: 1; } } .slick-nav { >div { position: absolute; left: 50px; top: 50%; transform: translateY(-50%); height: 50px; width: 50px; line-height: 50px; text-align: center; border-radius: 50%; background-color: $color_9; cursor: pointer; opacity: 0.7; transition: all 0.3s; &:hover { opacity: 1; } } .slick-nav__next { right: 50px; left: auto; } i{ font-size: 24px; vertical-align: -4px; } } .slick-dots { position: absolute; right: 0; left: 0; bottom: 20px; height: 10px; li { width: auto; height: auto; margin: 0 0 0 15px; &:last-child { margin-left: 0; } button { width: 10px; height: 10px; font-size: inherit; line-height: normal; &:before { content: ''; background-color: $color_9; width: 10px; height: 10px; border-radius: 50%; opacity: 0.5; } } } li.slick-active { button { &:before { opacity: 1; } } } } .place-banner { img { height: 500px; object-fit: cover; } } .breadcrumbs { margin-bottom: 5px; li { list-style: none; display: inline-block; margin-left: 8px; &:last-child { margin-left: 0; } a { color: $color_7; font-size: 14px; text-transform: uppercase; position: relative; line-height: 19px; &:after { content: ''; position: absolute; bottom: 0; right: 0; left: 0; height: 1px; background-color: $color_3; } &:hover { color: $color_3; } } } } .place__left { h1 { font-size: 36px; font-family: $font_family_1; margin-bottom: 6px; font-weight: 400; } } .place__left--top { margin-top: -130px; background-color: $color_9; padding: 30px; } .place__meta { margin-bottom: 20px; >div { display: inline-block; margin-left: 18px; &:last-child { margin-left: 0; } } } .reviews { .reviews__number { color: $color_3; svg { >* { fill: $color_3; } } } } .place__category { a { &:after { content: ','; } &:last-child { &:after { content: ''; } } } } .place__desc { line-height: 1.44; font-size: 16px; margin-bottom: 30px; } .btn { border-radius: 20px; background-color: $color_3; height: 40px; line-height: 40px; font-weight: 500; padding: 0 25px; color: $color_9; outline: 0; outline-offset: 0; &:hover { color: $color_9; } &:focus { box-shadow: none; color: $color_9; } } .place__box { border-bottom: 1px solid #eee; padding: 20px 0; h3 { font-size: 18px; font-weight: 500; margin-bottom: 20px; } p { line-height: 1.44; font-size: 16px; } &:last-child { padding-bottom: 0; border-bottom: 0; margin-bottom: 60px; } .place__amenities{ i{ font-size: 26px; vertical-align: -6px; } } } .place__box.place__box--npd { padding-top: 0 !important; } .place__box.place__box--30 { padding: 30px 0; } .place__amenities { svg { display: inline-block; vertical-align: middle; } span { display: inline-block; vertical-align: middle; line-height: normal; line-height: 1.44; font-size: 16px; vertical-align: -3px; margin-right: 15px; } } .place__title--additional { a { float: left; span { font-weight: 500; color: $color_3; font-size: 15px; } i{ font-size: 24px; vertical-align: -3px; } } } .maps { #map { height: 300px; } } .place__contact { li { list-style: none; position: relative; padding-right: 25px; margin-bottom: 15px; &:last-child { margin-bottom: 0; } i { position: absolute; top: 2px; right: 0; width: 14px; text-align: center; font-size: 20px; } a { display: inline-block; vertical-align: middle; color: $color_1; font-size: 16px; line-height: 1.44; &:hover { color: $color_3; } } span { display: inline-block; vertical-align: middle; color: $color_1; font-size: 16px; line-height: 1.44; } } } .place__title--reviews { .place__reviews__number { font-size: 18px; color: $color_3; margin-right: 13px; span { color: $color_7; line-height: 1.53; font-family: $font_family_1; } } svg { margin-left: 10px; >* { fill: $color_3; } } } .place__comments { margin-bottom: 20px; list-style: none; li { ul { li { list-style: none; &:first-child { padding-top: 20px; border-top: 1px solid #eee; } .place__comments__content { p { margin-bottom: 0; } img { margin-bottom: 0; } } } padding-right: 60px; padding-top: 20px; } &:first-child { padding-top: 0; border-top: 0; } padding: 20px 0; border-top: 1px solid #eee; &:last-child { padding-bottom: 0; } .place__author__avatar { margin-left: 10px; img { width: 50px; height: 50px; border-radius: 50%; } } .place__author { >div { display: inline-block; vertical-align: middle; } } } >li { &:last-child { padding-bottom: 20px; border-bottom: 1px solid #eee; } } .place__author { margin-bottom: 20px; } } .place__author__info { .place__author__star { display: inline-block; position: relative; i{ color: $color_1; } span{ position: absolute; right: 0; top: 0; white-space: nowrap; display: inline-block; overflow: hidden; i{ color: $color_3; } } } a { font-size: 15px; font-weight: 500; margin-left: 10px; } span.time { font-family: $font_family_1; font-size: 13px; color: $color_10; font-style: italic; display: block; } } .place__comments__content { p { font-size: 16px; line-height: 1.44; margin-bottom: 20px; } .row { margin-right: -5px; margin-left: -5px; >div { padding: 0 5px; } } } .comment-slider{ margin-left: -5px; margin-right: -5px; margin-bottom: 25px; .comment-slider-item{ padding: 0 5px; } .slick-slider{ img{ height: auto; } } } a.place__comments__reply { color: $color_2; i { display: inline-block; vertical-align: middle; margin-left: 8px; font-size: 20px; } } .place__box--reviews { .place__login { a { font-family: $font_family_2; font-weight: 500; color: $color_3; } } } .sidebar--border{ .widget { padding: 20px; border: 1px solid $color_14; margin-bottom: 30px; .product-small { &:last-child { border-bottom: 0; padding-bottom: 0; } } >h3 { font-size: 20px; font-weight: 500; } } .widget--ads { border: 0; padding: 0; } } .similar-places { padding: 40px 0 60px; background-color: $color_13; } .places-item { position: relative; overflow: hidden; margin-bottom: 30px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); .places-item__thumb { a { display: block; position: relative; &:after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 120px; background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(0,0,0,0.6)); } } img{ width: 270px; height: 250px; object-fit: cover; } } .places-item__info { position: absolute; right: 0; bottom: 0; left: 0; padding: 0 20px 20px; a { color: $color_9; } } h3 { font-family: $font_family_1; font-size: 24px; font-weight: normal; margin-bottom: 3px; } .place-item__addwishlist { &:hover { opacity: 0.7; } position: absolute; top: 20px; left: 20px; i{ border-radius: 50%; background: $color_9; padding: 4px; font-size: 24px; color: $color_2; } } .place-item__addwishlist.active { i { color: $color_3; } } } .places-item__category { a { font-family: $font_family_1; font-size: 12px; text-transform: uppercase; &:after { content: ','; } &:last-child { &:after { content: ''; } } &:hover { color: $color_3; } } } .places-item__info { h3 { a { &:hover { color: $color_3; } } } } .places-item__meta { &:after { content: ''; display: block; clear: both; } .places-item__reviews { float: right; } .places-item__currency { float: left; color: $color_9; } .places-item__count { color: $color_9; } } .places-item__reviews { .places-item__number { color: $color_3; svg { >* { fill: $color_3; stroke: $color_3; } } } } .page-title--small { height: 150px; background-color: $color_3; margin-bottom: 60px; background-repeat: no-repeat; background-position: center left; background-size: contain; .container { position: relative; height: 100%; } .page-title__content { text-align: right; h1 { color: $color_9; font-size: 40px; margin-bottom: 5px; } p { color: $color_9; font-size: 16px; font-style: normal; } } } .shop__meta { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; margin-bottom: 40px; >div { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; padding: 0 15px; } >.title { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; padding: 0 15px; margin-bottom: 0; } .shop__results { font-size: 18px; } } .site__order { text-align: left; >div { position: relative; display: inline-block; vertical-align: middle; margin-left: 23px; &:last-child { margin-left: 0; } >a { font-weight: 500; font-family: $font_family_2; i { font-size: 12px; } } } ul.open { opacity: 1; visibility: visible; margin-top: 0; } ul { position: absolute; top: 100%; left: 0; margin-top: 20px; width: 140px; padding: 5px 0; list-style: none; text-align: right; -webkit-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1); opacity: 0; visibility: hidden; transition: all 0.3s; background-color: $color_9; z-index: 9; li { list-style: none; a { display: block; padding: 5px 15px; } } } } .site__filter{ a.active{ i{ -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } } } .golo-menu-filter { padding: 30px 30px; background-color: $color_13; margin-bottom: 40px; display: none; ul.filter-control { max-height: 170px; overflow: auto; li { position: relative; padding-top: 5px; padding-bottom: 5px; } a { position: inherit; color: $color_1; } a:before { content: ''; position: absolute; height: 5px; background: #d22b22; opacity: 0.4; width: 100%; right: 0; bottom: 2px; -webkit-transition: transform 0.5s cubic-bezier(0.8, 0, 0.2, 1); -moz-transition: transform 0.5s cubic-bezier(0.8, 0, 0.2, 1); -o-transition: transform 0.5s cubic-bezier(0.8, 0, 0.2, 1); transition: transform 0.5s cubic-bezier(0.8, 0, 0.2, 1); -webkit-transform: scale3d(0, 1, 1); -moz-transform: scale3d(0, 1, 1); -o-transform: scale3d(0, 1, 1); -ms-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; transform-origin: 0% 50%; } li.active{ a:before { background: #d22b22; -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; } a:after{ content: ''; background-image: url('../images/assets/icon-close.svg'); background-size: 10px 10px; background-repeat: no-repeat; background-position: center; width: 10px; height: 10px; position: absolute; top: 4px; left: -15px; } } } h4 { font-weight: 500; margin-bottom: 15px; } ul.filter-control{ } } .golo-clear-filter { margin-left: 20px; display: none; } .golo-nav-filter.active .golo-clear-filter { display: inline-block; } .golo-filter-toggle, .golo-clear-filter { cursor: pointer; font-weight: 500; } /** * Custom scroll bar */ .custom-scrollbar::-webkit-scrollbar { width: 6px; background-color: $color_6; border-radius: 5px; } .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #a7a7a7; border-radius: 5px; } .custom-scrollbar::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: $color_6; border-radius: 5px; } .shop__products__item { text-align: center; margin-bottom: 40px; border-left: 1px solid $color_14; .shop__products__thumb { margin-bottom: 20px; } } .other-products__content, .shop__products { .col-lg-3 { &:nth-child(4n) { .shop__products__item { border-left: 0; } } } } .shop__products__info { h3 { font-size: 18px; font-weight: 500; margin-bottom: 10px; } } .shop__products__price { font-family: $font_family_1; font-size: 18px; } .pagination { text-align: center; margin-bottom: 60px; display: block; margin-right: -5px; margin-left: -5px; } .pagination__numbers { a { color: $color_1; width: 40px; height: 40px; display: inline-block; line-height: 40px; vertical-align: middle; margin: 0 5px; text-align: center; border-radius: 50%; &:hover { background-color: $color_14; } } span { color: $color_1; width: 40px; height: 40px; display: inline-block; line-height: 40px; vertical-align: middle; margin: 0 5px; text-align: center; border-radius: 50%; color: $color_9; background-color: $color_3; } } .shop-details__breadcrumbs { margin-bottom: 40px; } .shop-details__summary { h2 { font-family: $font_family_1; font-size: 36px; font-weight: 400; margin-bottom: 10px; } } .shop-details__review { margin-bottom: 20px; } .shop-details__price { font-size: 18px; font-weight: 500; font-family: $font_family_2; color: $color_2; margin-bottom: 20px; } .shop-details__desc { font-size: 16px; line-height: 1.44; margin-bottom: 20px; } .shop-details__quantity { display: inline-block; height: 50px; line-height: 48px; border-radius: 25px; border: solid 1px $color_17; width: 130px; position: relative; vertical-align: middle; margin-left: 18px; input { border: 0; padding: 0; text-align: center; font-style: normal; font-size: 16px; font-family: $font_family_2; line-height: normal; position: absolute; width: 100%; top: 0; right: 0; bottom: 0; border-radius: 25px; left: 0; z-index: 1; } input[type=number] { &::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } &::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } -moz-appearance: textfield; } span { line-height: 46px; width: auto; border-radius: 25px; display: inline-block; text-align: center; position: absolute; top: 0; right: 25px; bottom: 0; z-index: 2; background-color: $color_9; cursor: pointer; i { vertical-align: middle; font-size: 20px; } } span.minus { left: 25px; right: auto; } } .shop-details__addcart { button { border-radius: 25px; background-color: $color_3; border: 0; line-height: 50px; height: 50px; padding: 0 113px; font-family: $font_family_2; font-size: 15px; font-weight: 500; color: $color_9; display: inline-block; vertical-align: middle; cursor: pointer; } margin-bottom: 40px; } .shop-details__details { margin-bottom: 40px; b { font-weight: 500; font-family: $font_family_2; } span { font-family: $font_family_1; color: $color_1; } a { font-family: $font_family_1; color: $color_1; } >div { line-height: 20px; margin-bottom: 10px; &:last-child { margin-bottom: 0; } } } .shop-details__share { ul { li { list-style: none; display: inline-block; margin-left: 28px; &:last-child { margin-left: 0; } i{ font-size: 20px; } a:hover { i { color: $color_3; } } } } } .shop-details__wrap { margin-bottom: 92px; } .shop-details__tablist { border-bottom: 1px solid $color_14; padding-bottom: 20px; li { list-style: none; display: inline-block; margin-left: 40px; a { font-family: $font_family_2; color: $color_2; font-size: 18px; font-weight: 500; } &:last-child { margin-left: 0; } } li.active { a { color: $color_3; } } } .shop-details__panel { padding-top: 30px; font-size: 16px; p { margin-bottom: 20px; display: block; } b { margin-bottom: 20px; display: block; } ul { margin-bottom: 20px; display: block; } li { list-style: none; font-style: italic; } } .shop-details__tabs { padding-bottom: 20px; border-bottom: 1px solid $color_14; } .other-products { padding-top: 40px; padding-bottom: 20px; } .other-products__content { .col-md-3 { &:nth-child(4n) { .shop__products__item { border-left: 0; } } } } .page-title--blog { margin-bottom: 60px; } .isotope__nav { text-align: center; margin-bottom: 40px; li { list-style: none; display: inline-block; margin-left: 23px; &:last-child { margin-left: 0; } a { text-transform: uppercase; color: $color_1; font-weight: 400; &:hover { color: $color_3; } } a.active { color: $color_3; font-weight: 500; } } } .post-grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } .post-grid.columns-2 { .post { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } } .post-grid.columns-3 { .post { -webkit-box-flex: 0; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; max-width: 33.33%; } } .post-grid.columns-4 { .post { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } } .post-grid.columns-5 { .post { -webkit-box-flex: 0; -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } } .post-grid { .post { padding: 0 15px; } } .page-content-sidebar { margin-bottom: 60px; .col-md-8 { padding-left: 30px; border-left: 1px solid $color_14; } .col-md-4 { padding-right: 30px; } .pagination{ margin-bottom: 0; } } .result-post{ font-size: 18px; margin-bottom: 20px; } .widget { margin-bottom: 30px; .widget-title{ font-size: 20px; font-weight: 500; margin-bottom: 20px; } } .widget-category{ li{ list-style: none; margin-bottom: 20px; padding-right: 20px; position: relative; a{ text-transform: uppercase; color: $color_1; &:hover{ color: $color_3; } } &:before{ content: ''; width: 5px; height: 5px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; background-color: $color_3; position: absolute; top: 8px; right: 0; } &:last-child{ margin-bottom: 0; } } } .widget-post{ .post{ display: -ms-flexbox; display: flex; -ms-flex-align: start; align-items: flex-start; align-items: center; margin-bottom: 20px; img{ width: 140px; height: 140px; object-fit: cover; border-radius: 3px; } .post__info{ margin-right: 20px; h3{ font-size: 18px; line-height: 1.28; } } } } .widget-newsletter{ background-color: $color_11; padding: 40px 35px 0; text-align: center; .widget-title{ color: $color_9; margin-bottom: 30px; } > img{ max-width: 180px; margin: 0 auto; } } .newsletterForm{ margin-bottom: 20px; input{ width: 100%; border-radius: 20px; line-height: 40px; height: 40px; margin-bottom: 20px; font-family: $font_family_1; &::placeholder{ font-size: 14px; font-style: italic; color: $color_7; font-family: $font_family_1; opacity: 0.62; } &:-ms-input-placeholder{ font-size: 14px; font-style: italic; color: $color_7; font-family: $font_family_1; opacity: 0.62; } &::-ms-input-placeholder{ font-size: 14px; font-style: italic; color: $color_7; font-family: $font_family_1; opacity: 0.62; } } button{ width: 100%; border-radius: 20px; line-height: 40px; height: 40px; border: 0; background-color: $color_3; font-weight: 500; color: $color_9; cursor: pointer; } } .blog-banner{ position: relative; img{ height: 450px; object-fit: cover; width: 100%; } .icon-share{ position: absolute; top: 30px; left: 50px; } } .blog-left{ h1{ font-size: 36px; font-weight: 500; margin-bottom: 5px; } } .entry-meta{ margin-bottom: 30px; li{ font-style: italic; font-size: 15px; color: $color_7; display: inline-block; list-style: none; margin-left: 24px; position: relative; &:last-child{ margin-left: 0; } &:after{ content: ''; height: 4px; width: 4px; background-color: $color_17; position: absolute; top: 8px; right: -15px; border-radius: 50%; } &:first-child:after{ content: ''; display: none; } a{ font-weight: 500; color: $color_7; font-family: Jost; &:hover{ color: $color_3; } } } } .entry-desc{ font-size: 16px; line-height: 1.44; margin-bottom: 60px; p{ margin-bottom: 30px; } img{ margin-bottom: 30px; height: 480px; object-fit: cover; } blockquote{ padding: 11px 20px; border-right: 2px solid $color_3; margin-bottom: 30px; p{ margin-bottom: 0; font-size: 20px; font-style: italic; } } .entry-image{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; img{ padding: 0 15px; margin-bottom: 0; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; height: 480px; object-fit: cover; } } } .entry-author{ display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; padding-top: 30px; border-top: 1px solid $color_14; margin-bottom: 30px; > img{ width: 100px; height: 100px; border-radius: 50%; object-fit: cover; } .author-info{ margin-right: 20px; } .author-desc{ font-size: 16px; line-height: 1.44; } } .author-title{ > a{ font-family: Jost; font-size: 14px; font-weight: 500; &:hover{ color: $color_3; } } } .author-social{ display: inline-block; vertical-align: middle; margin-right: 18px; li{ list-style: none; display: inline-block; margin-left: 18px; font-size: 20px; &:last-child{ margin-left: 0; } svg:hover > *{ fill: $color_3; } } } .related-post{ padding-top: 30px; border-top: 1px solid $color_14; h2{ font-size: 28px; font-weight: 500; margin-bottom: 20px; } .related-grid{ display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: -15px; margin-right: -15px; .post{ padding: 0 15px; margin-bottom: 30px; } } } .entry-comment{ padding-top: 30px; border-top: 1px solid $color_14; } .blog-content{ padding-top: 40px; .blog-left{ margin-top: -88px; background-color: $color_9; padding: 30px 30px 0; .breadcrumbs{ margin-bottom: 10px; } } } .popup-form{ top: 0; right: 15px; left: 15px; bottom: auto; margin: 0 auto 80px !important; transition: all 0.3s; text-align: right; padding: 50px 30px 30px; max-width: 400px; width: 100%; // max-height: calc(100% - 160px); // overflow: auto; .popup__close{ top: 30px; left: 30px; } .popup-logo{ display: inline-block; margin-bottom: 50px; img{ max-width: 96px; } } .choose-form{ display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 30px; li{ list-style: none; display: inline-block; margin-left: 20px; a{ font-size: 20px; font-weight: 500; font-family: Jost; line-height: normal; text-align: center; border-bottom: 2px solid $color_16; line-height: 19px; display: block; padding-bottom: 10px; color: $color_7; } &:last-child{ margin-left: 0; } } li.active{ a{ color: $color_2; border-bottom-color: $color_2; } } } .choose-more{ line-height: normal; font-size: 16px; margin-bottom: 30px; .fb{ color: $color_18; } .gg{ color: $color_19; } } .choose-or{ position: relative; line-height: normal; margin-bottom: 20px; span{ position: relative; z-index: 1; background-color: $color_9; padding: 0 0 0 23px; vertical-align: -1px; } &:before{ content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: 0; left: 0; height: 1px; background-color: $color_14; } } .field-inline{ display: -webkit-box; display: -ms-flexbox; display: flex; margin-right: -15px; margin-left: -15px; .field-input{ -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; padding-right: 15px; padding-left: 15px; } } input{ width: 100%; height: 40px; line-height: 40px; border-radius: 0; border: 0; padding: 0; border-bottom: 2px solid $color_2; margin-bottom: 20px; font-style: normal; } input[type="submit"]{ border-radius: 20px; background-color: $color_3; color: $color_9; margin-bottom: 0; cursor: pointer; border: 0; } input[type="checkbox"]{ width: auto; line-height: normal; height: auto; position: absolute; opacity: 0; visibility: hidden; } .forgot_pass{ color: $color_3; display: block; margin-bottom: 20px; line-height: normal; } } .form-sign{ .field-check{ label{ -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } } .popup-form.open{ top: 80px; opacity: 1; visibility: visible; right: 15px; } .field-check{ line-height: normal; margin-bottom: 20px; label{ position: relative; display: inline-block; line-height: normal; padding-right: 26px; a{ color: $color_21; } &:before{ content: ''; height: 16px; width: 16px; border-radius: 3px; border: solid 1px $color_20; display: block; position: absolute; right: 0; top: 2px; } span{ position: absolute; border-radius: 3px; text-align: center; height: 16px; width: 16px; top: 3px; background-color: $color_2; right: 0; line-height: 14px; opacity: 0; visibility: hidden; transition: all 0.3s; } input:checked ~ span{ opacity: 1; visibility: visible; } } } .widget-slick{ .slick-dots{ li{ margin-left: 5px; } .slick-active{ button{ opacity: 1; } } button{ width: 30px; height: 2px; opacity: 0.5; border-radius: 2px; background-color: $color_9; padding: 0; &:before{ content: ''; display: none; } } } } .place-03{ padding-top: 30px; border-top: 1px solid $color_14; .breadcrumbs{ margin-bottom: 16px; } .place__desc, .place__meta{ margin-bottom: 0; } .place__amenities{ span{ color: $color_7; } } .place__box{ h3{ text-transform: uppercase; font-size: 15px; } } } .widget.place__box{ padding: 0; border: 0; margin-bottom: 20px; } .place-flex{ display: -webkit-box; display: -ms-flexbox; display: flex; .place__currency{ margin-left: 110px; } svg{ display: inline-block; vertical-align: middle; margin-left: 8px; } p{ display: inline-block; font-size: 15px; vertical-align: middle; span, a{ color: $color_7; } } } .place-03{ .place__left{ position: relative; } } .place-share{ position: absolute; top: 0; left: 0; a{ padding: 0 10px; display: inline-block; height: 36px; line-height: 36px; border-radius: 3px; border: solid 1px $color_14; margin-left: 8px; color: $color_1; transition: all 0s; svg{ vertical-align: -3px; display: inline-block; } &:last-child{ margin-left: 0; } &:hover{ background-color: $color_3; color: $color_9; svg{ > *{ fill: $color_9; stroke: $color_9; } } } } } .listing-main{ display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: flex-end; border-top: 1px solid $color_14; .listing-nav{ background-color: $color_9; position: fixed; right: 0; bottom: 0; top: 80px; width: 30%; z-index: 9; border-top: 1px solid #eee; transition: all 0.3s; &.on_scroll{ top: 0; } &.is_footer{ position: relative; } } .listing-content{ -webkit-box-flex: 0; -ms-flex: 0 0 70%; flex: 0 0 70%; max-width: 70%; } } .listing-menu{ position: absolute; top: 120px; left: 0; max-width: 180px; width: 100%; li{ list-style: none; margin-bottom: 20px; span.icon{ display: none; } a{ font-size: 16px; color: $color_7; display: block; line-height: 26px; height: 26px; border-left: 4px solid $color_16; transition: all 0.3s; font-family: Jost; } &.active{ a{ color: $color_2; font-weight: 500; border-left: 4px solid $color_3; } } &:hover{ a{ color: $color_2; border-left: 4px solid $color_3; } } } } .listing-content{ border-right: 1px solid $color_14; background-color: $color_13; padding: 60px; > h2{ font-size: 28px; font-weight: 500; margin-bottom: 30px; } } .listing-box{ border: 1px solid $color_14; background-color: $color_9; padding: 30px; margin-bottom: 15px; > h3{ font-size: 15px; font-weight: 500; color: $color_7; text-transform: uppercase; margin-bottom: 20px; } label, h4.label{ display: block; font-size: 15px; font-weight: 500; color: $color_2; margin-bottom: 6px; font-weight: 500; font-family: Jost; } input, select, .chosen-choices{ border-top: 0; border-right: 0; border-left: 0; border-bottom: 2px solid $color_2; font-style: normal; height: 32px; line-height: 32px; padding: 0; width: 100%; box-shadow: inherit; background-image: initial; } input:focus, select:focus{ outline-offset: 0; outline: 0; box-shadow: initial; } input::placeholder { font-family: $font_family_1; font-size: 15px; color: $color_7; } input:-ms-input-placeholder { font-family: $font_family_1; font-size: 15px; color: $color_7; } input::-ms-input-placeholder { font-family: $font_family_1; font-size: 15px; color: $color_7; } select{ font-family: $font_family_1; font-size: 15px; color: $color_7; } .field-inline{ display: -webkit-box; display: -ms-flexbox; display: flex; margin-right: -15px; margin-left: -15px; justify-content: space-between; .field-select{ margin-bottom: 20px; i{ left: 15px; } } .field-group:first-child{ -webkit-box-flex: 0; -ms-flex: 0 0 70%; flex: 0 0 70%; max-width: 70%; padding: 0 15px; } .field-group:last-child{ -webkit-box-flex: 0; -ms-flex: 0 0 30%; flex: 0 0 30%; max-width: 30%; padding: 0 15px; } } .field-group:not(:last-child){ margin-bottom: 20px; } .field-3col.field-inline{ .field-select, .field-input{ -webkit-box-flex: 0; -ms-flex: 0 0 48%; flex: 0 0 48%; max-width: 48%; padding-right: 15px; padding-left: 15px; } .remove-social{ -webkit-box-flex: 0; -ms-flex: 0 0 4%; flex: 0 0 4%; max-width: 4%; padding-left: 15px; text-align: left; } } } .chosen-container { width: 100% !important; } .field-select{ position: relative; select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: $color_16; z-index: 2; position: relative; } > i{ position: absolute; bottom: 13px; left: 0; z-index: 1; font-size: 12px; } } .field-check{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; label{ cursor: pointer; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; padding: 0 15px; &:before{ border-width: 2px; border-radius: 2px; position: static; display: inline-block; vertical-align: -3px; margin-left: 8px; border-color: $color_7; } span{ top: 6px; right: 19px; transition: inherit; } input:checked ~ span{ text-align: center; height: 16px; width: 16px; top: 3px; background-color: $color_2; right: 15px; line-height: 14px; border-radius: 3px; i{ font-size: 12px; color: $color_9; } } } input{ position: absolute; opacity: 0; visibility: hidden; } } .upload-form{ max-width: 660px; } #location-map{ height: 231px; } #hightlight{ .field-check{ margin-bottom: 0; } } .ql-toolbar.ql-snow{ background-color: $color_14; border: 0; } .ql-container.ql-snow{ border-top: 0; border-right: 0; border-left: 0; border-bottom: 1px solid $color_14; height: 120px; } .chosen-container-multi { .chosen-choices{ li.search-field{ input[type=text]{ font-family: $font_family_1; font-size: 15px !important; color: $color_7 !important; } } li.search-choice{ font-family: Jost; font-size: 15px; border: 0; padding: 0 0 0 15px; margin: 0 0 0 10px; background-color: $color_16; color: $color_7; background-image: initial; line-height: inherit; box-shadow: inherit; .search-choice-close{ left: 0; top: 10px; } } } } .field-maps{ .field-inline{ label, .field-button{ padding: 0 15px; } } .field-button{ a{ font-family: Jost; font-size: 15px; font-weight: 500; color: $color_2; } svg{ vertical-align: -1px; margin-left: 3px; } } .field-map{ position: relative; .address-input{ height: 40px; line-height: 38px; border-radius: 3px; border: solid 1px $color_14; background-color: $color_9; max-width: 307px; position: absolute; right: 20px !important; top: 20px !important; z-index: 3; padding: 0 18px; font-style: italic; } #location-map{ position: relative; z-index: 1; } } } .search-choice-close:before{ content: ''; height: 10px; width: 10px; background-image: url('../images/icon-close-12.svg'); background-position: center; background-size: contain; background-repeat: no-repeat; display: block; } #social{ .field-3col{ .remove-social{ line-height: normal; padding-top: 4px; i{ font-size: 20px; } } } } .add-social{ border: solid 2px $color_2; color: $color_2; background-color: $color_9; font-family: Jost; font-size: 15px; font-weight: 500; transition: inherit; svg{ vertical-align: -2px; } &:focus, &:hover{ background-color: $color_2; color: $color_9; svg{ > *{ fill: $color_9; } } } } .accordion-top{ justify-content: space-between; margin-bottom: 15px; label{ margin-bottom: 0; } > span{ padding: 0 15px; font-family: $font_family_1; font-size: 15px; font-style: italic; position: relative; &:after{ content: ''; height: 1px; background-color: $color_7; width: auto; position: absolute; top: 50%; transform: translateY(-50%); right: 10px; left: 10px; display: block; } } } .accordion-bot{ .field-select{ -webkit-box-flex: 0 !important; -ms-flex: 0 0 50% !important; flex: 0 0 50% !important; max-width: 50% !important; } } .accordion-item.active{ .accordion-top{ > span{ &:after{ content: ''; display: none; } } } } .accordion-item{ padding: 20px 0; border-top: 1px solid $color_14; .accordion-top{ margin-bottom: 0; } .accordion-bot{ .field-group{ margin-bottom: 0; margin-top: 15px; } } &:last-child{ padding-bottom: 0; } } .field-accordion{ margin-top: 20px; } .field-file{ .preview{ display: block; width: 151px; height: 151px; border: dashed 1px #979797; background-color: $color_13; margin-bottom: 0; position: relative; cursor: pointer; input{ opacity: 0; visibility: hidden; position: absolute; } img{ width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 2; } i{ position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%); font-size: 26px; } } .field-note{ font-family: $font_family_1; font-size: 12px; font-style: italic; color: $color_7; margin-top: 6px; } } .field-submit{ margin-top: 30px; &:hover{ color: $color_9; } } .maps-wrap{ position: fixed !important; top: 80px; right: 0; left: 0; bottom: 0; height: 100%; z-index: 99; #maps-view{ height: 100%; .gm-style-mtc{ display: none; } } .places-item{ margin-bottom: 0; width: 370px; display: -webkit-box; display: -ms-flexbox; display: flex; border-radius: 3px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); background-color: $color_9; overflow: hidden; img{ width: 120px; height: 150px; object-fit: cover; } .places-item__thumb{ a:after{ content: ''; display: none; } } .places-item__info{ position: static; padding: 15px; flex-grow: 1; position: relative; } h3{ font-family: $font_family_1; font-size: 20px; color: $color_2; } } .gm-style{ .gm-style-iw-c{ padding-top: 0; padding-right: 0; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); } .gm-style-iw-d{ overflow: inherit !important; } .gm-style-iw-t::after{ content: ''; display: none !important; } } .places-item__category{ font-family: $font_family_1; font-size: 12px; color: $color_7; text-transform: uppercase; margin-bottom: 4px; } .places-item__number{ font-family: Jost; font-size: 15px; font-weight: 500; svg{ margin-right: 2px; } } .places-item__meta{ position: absolute; right: 15px; left: 15px; bottom: 15px; .places-item__count{ color: $color_1; font-family: $font_family_1; font-size: 15px; margin-right: 5px; } .places-item__currency{ color: $color_2; font-family: $font_family_1; font-size: 16px; } } .gm-ui-hover-effect{ top: 5px !important; left: 5px !important; img{ width: 16px !important; height: 16px !important; margin: 0 !important; display: inline-block !important; } } .gm-bundled-control-on-bottom{ bottom: auto; top: 0px; .gm-svpc{ display: none !important; } } } #place-map-filter, #maps-view{ map { > *{ position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 99; } } } #place-map-filter{ .places-item{ margin-bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; border-radius: 3px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); background-color: $color_9; overflow: hidden; img{ width: 120px; height: 150px; object-fit: cover; } .places-item__thumb{ a:after{ content: ''; display: none; } } .places-item__info{ position: static; padding: 15px; flex-grow: 1; position: relative; min-width: 205px; } h3{ font-family: $font_family_1; font-size: 20px; color: $color_2; } } .places-item__category{ font-family: $font_family_1; font-size: 12px; color: $color_7; text-transform: uppercase; margin-bottom: 4px; } .places-item__number{ font-family: Jost; font-size: 15px; font-weight: 500; svg{ margin-right: 2px; } } .places-item__meta{ position: absolute; right: 15px; left: 15px; bottom: 15px; .places-item__count{ color: $color_1; font-family: $font_family_1; font-size: 15px; margin-right: 5px; } .places-item__currency{ color: $color_2; font-family: $font_family_1; font-size: 16px; } } .gm-ui-hover-effect{ top: 5px !important; left: 5px !important; img{ width: 16px !important; height: 16px !important; margin: 0 !important; display: inline-block !important; } } .gm-bundled-control-on-bottom{ bottom: auto; top: 0px; .gm-svpc{ display: none !important; } } } .maps-button{ position: absolute; right: 50px; top: 30px; z-index: 98; a{ padding: 0 20px; i{ display: inline-block; vertical-align: -2px; margin-left: 8px; font-size: 20px; } } a, .field-select{ display: inline-block; vertical-align: middle; height: 40px; line-height: 40px; background-color: $color_9; font-family: Jost; font-size: 15px; font-weight: 500; border-radius: 20px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); margin-bottom: 0; } .field-select{ i{ position: absolute; top: 50%; transform: translateY(-50%); bottom: auto; left: 15px; font-size: 12px; margin-top: -1px; } } select{ border: 0; padding: 0 20px 0 34px; &:focus{ outline-offset: 0; outline: 0; } } } .place-04 { .place-share{ top: 30px; left: 50px; a{ background-color: $color_9; border-radius: 50%; transition: all 0.3s; width: 48px; height: 48px; line-height: 54px; text-align: center; &:hover{ background-color: $color_3; border-color: $color_3; color: $color_9; } i{ font-size: 24px; } } svg{ margin-left: 3px; > *{ transition: all 0.3s; } } } .place-gallery{ position: absolute; left: 50px; bottom: 40px; a{ padding: 0 17px; display: inline-block; height: 36px; line-height: 36px; border-radius: 3px; border: solid 1px $color_12; margin-left: 8px; color: $color_9; transition: all 0s; background-color: $color_12; font-size: 15px; font-family: $font_family_1; font-weight: normal; transition: all 0.3s; &:hover{ background-color: $color_3; border-color: $color_3; color: $color_9; } } svg{ vertical-align: -3px; display: inline-block; margin-left: 3px; > *{ transition: all 0.3s; } } } .place__left{ margin-top: -125px; padding-left: 30px; } .breadcrumbs{ a{ color: $color_9; font-size: 14px; font-family: $font_family_1; font-weight: normal; } } .place__box--npd{ border-bottom: 0; h1{ color: $color_9; font-weight: 500; } } .reviews_count, .place__currency{ color: $color_9; } .place__category{ a{ color: $color_9; font-size: 15px; } } .hightlight-grid{ display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; .hightlight-count{ margin-left: 70px; font-family: $font_family_1; font-size: 16px; color: $color_3; white-space: nowrap; } .place__amenities{ text-align: center; display: block; margin-left: 66px; img{ width: auto; height: 36px; object-fit: cover; } &:nth-child(4){ margin-left: 35px; } span{ display: block; margin-right: 0; margin-top: 15px; } } .place__button{ flex-grow: 1; } } .place__box-overview{ .place__desc{ font-size: 18px; line-height: 1.56; margin-bottom: 20px; position: relative; height: 137px; overflow: hidden; transition: all 0.3s; &:after{ content: ''; position: absolute; object-fit: contain; background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), $color_9); background-image: -o-linear-gradient(rgba(255, 255, 255, 0), $color_9); background-image: linear-gradient(rgba(255, 255, 255, 0), $color_9); height: 53px; right: 0; bottom: 0; left: 0; opacity: 1; visibility: visible; transition: all 0.3s; } } .place__desc.open{ height: 100%; &:after{ content: ''; opacity: 0; visibility: hidden; } } .show-more{ font-size: 15px; color: $color_3; } } .place__box{ h3{ font-size: 20px; font-weight: 500; } } .place__box-map{ .address{ margin-top: 30px; a{ color: $color_3; } } } .open-table{ width: 100%; .day{ font-family: Jost; font-size: 16px; font-weight: 500; line-height: 1.88; width: 20%; } .time{ font-size: 16px; } } .sidebar{ margin-top: 30px; padding-bottom: 10px; } .place__meta{ > div{ position: relative; &:after{ content: ''; width: 4px; height: 4px; background-color: $color_9; opacity: 0.6; display: inline-block; border-radius: 50%; left: -14px; top: 50%; transform: translateY(-50%); position: absolute; } } > div:last-child{ &:after{ content: ''; display: none; } } } } .widget-products{ h3{ font-size: 24px; font-weight: 500; text-align: center; margin-bottom: 20px; } .slick-slider{ img{ height: auto; max-height: 360px; } } .slick-nav{ > div{ right: -15px; top: 42%; } .slick-nav__next{ left: -15px; right: auto; } } .slick-dots{ position: static; margin-top: 24px; li{ margin-left: 8px; &:last-child{ margin-left: 0; } } button{ width: 8px; height: 8px; background-color: $color_17; border-radius: 50%; opacity: 1; } .slick-active{ button{ background-color: $color_3; } } } .slick-dotted.slick-slider{ margin-bottom: 0; } .place-slider__nav{ opacity: 0; visibility: hidden; transition: all 0.3s; } .slick-sliders:hover{ .place-slider__nav{ opacity: 1; visibility: visible; } } } .review-form{ .stars{ display: inline-block; margin-right: 8px; a:hover ~ a{ svg{ > *{ fill: $color_20; } } } } .stars:hover{ svg{ > *{ fill: $color_3; } } } .stars.selected{ a.active{ svg{ > *{ fill: $color_3; } } } a.active ~ a{ svg{ > *{ fill: $color_20; } } } a:not(.active){ svg{ > *{ fill: $color_3; } } } } .rate{ margin-bottom: 15px; } .field-textarea{ border-radius: 3px; border: solid 1px $color_14; background-color: $color_9; display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; padding: 35px; .author-avatar{ width: 50px; height: 50px; border-radius: 50%; object-fit: cover; } textarea{ flex-grow: 1; border: 0; font-style: normal; padding: 0 20px 0 0; resize: none; height: 23px; transition: all 0.3s; display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; vertical-align: middle; &:focus{ height: 92px; } } } textarea::-webkit-input-placeholder { font-family: $font_family_1; font-size: 15px; line-height: 1.53; color: $color_7; } textarea:-ms-input-placeholder { font-family: $font_family_1; font-size: 15px; line-height: 1.53; color: $color_7; } textarea::placeholder { font-family: $font_family_1; font-size: 15px; line-height: 1.53; color: $color_7; } } .widget-products{ padding: 30px; border: solid 1px $color_14; .shop__products__item{ border-left: 0; margin-bottom: 0; } } .popup-wrap.more-height { overflow-y: auto; padding-bottom: 1px; padding-top: 1px; } .popup-wrap{ display: none; position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 999; .popup-bg{ content: ''; position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-color: rgba(0,0,0,0.7); } .popup-middle{ position: absolute; top: 50%; transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); right: 15px; left: 15px; background-color: $color_9; max-width: 570px; margin: 0 auto; padding: 30px; z-index: 100; border-radius: 3px; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); } .popup-close{ position: absolute; left: 30px; top: 30px; cursor: pointer; } .hightlight-flex{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -45px; margin-left: -45px; .place__amenities{ -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; margin-left: 0 !important; margin-top: 35px; padding: 0 30px; } } .popup-middle{ h3{ margin-bottom: 0; } } } .flex-inline, .grid{ display: -webkit-box; display: -ms-flexbox; display: flex; } .company-info{ display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; > img{ -webkit-box-flex: 0; -ms-flex: 0 0 570px; flex: 0 0 570px; max-width: 570px; } .ci-content{ padding: 0 60px; span{ font-family: $font_family_1; font-size: 16px; line-height: 23px; color: $color_1; margin-bottom: 10px; } h2{ font-family: Jost; font-size: 28px; color: $color_2; font-weight: 500; margin-bottom: 30px; line-height: 39px; } p{ font-size: 16px; line-height: 23px; margin-bottom: 15px; } p:last-child{ margin-bottom: 0; } } } .our-team{ padding: 60px 0; } .ot-item{ position: relative; .ot-info{ position: absolute; right: 35px; bottom: 20px; h3{ font-size: 20px; font-weight: 500; color: $color_9; margin-bottom: 5px; } span.job{ font-family: $font_family_1; font-style: italic; font-size: 16px; color: $color_9; } } } .join-team{ padding-bottom: 60px; .jt-content{ p{ margin-bottom: 40px; } a{ padding: 0 48px; height: 50px; line-height: 50px; border-radius: 25px; font-size: 16px; } } } .site-contact{ position: relative; &:before{ content: ''; position: absolute; background-color: $color_13; width: 50%; top: 0; bottom: 0; left: 0; } } .grid{ margin-right: -15px; margin-left: -15px; .grid-item{ padding-right: 15px; padding-left: 15px; } } .grid.grid-6{ .grid-item{ -webkit-box-flex: 0; -ms-flex: 0 0 16.667%; flex: 0 0 16.667%; max-width: 16.667%; } } .grid.grid-5{ .grid-item{ -webkit-box-flex: 0; -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } } .grid.grid-4{ .grid-item{ -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } } .grid.grid-3{ .grid-item{ -webkit-box-flex: 0; -ms-flex: 0 0 33.333%; flex: 0 0 33.333%; max-width: 33.333%; } } .grid.grid-2{ .grid-item{ -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } } .form-underline{ .field-inline{ display: -webkit-box; display: -ms-flexbox; display: flex; margin-right: -15px; margin-left: -15px; .field-input{ -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; padding-right: 15px; padding-left: 15px; } } textarea{ width: 100%; height: 90px; border-radius: 0; border: 0; padding: 0; border-bottom: 2px solid $color_2; margin-bottom: 20px; font-style: normal; resize: none; background-color: $color_4; } textarea::-webkit-input-placeholder { font-size: 15px; font-style: normal; color: $color_7; font-family: $font_family_1; } textarea:-ms-input-placeholder { font-size: 15px; font-style: normal; color: $color_7; font-family: $font_family_1; } textarea::placeholder { font-size: 15px; font-style: normal; color: $color_7; font-family: $font_family_1; } input{ width: 100%; height: 40px; line-height: 40px; border-radius: 0; border: 0; padding: 0; border-bottom: 2px solid $color_2; margin-bottom: 20px; font-style: normal; background-color: $color_4; &::placeholder{ font-size: 15px; font-style: normal; color: $color_7; font-family: $font_family_1; } &:-ms-input-placeholder{ font-size: 15px; font-style: normal; color: $color_7; font-family: $font_family_1; } &::-ms-input-placeholder{ font-size: 15px; font-style: normal; color: $color_7; font-family: $font_family_1; } } input[type="submit"]{ border-radius: 20px; background-color: $color_3; color: $color_9; margin-bottom: 0; cursor: pointer; border: 0; } input[type="checkbox"]{ width: auto; line-height: normal; height: auto; position: absolute; opacity: 0; visibility: hidden; } .field-select{ margin-bottom: 30px; .sl-icon{ position: absolute; top: 6px; right: 0; i{ font-size: 24px; vertical-align: 3px; } } select{ width: 100%; border: 0; padding: 0; border-bottom: 2px solid $color_2; height: 40px; line-height: 40px; color: $color_7; padding-right: 30px; &:focus{ border: 0; box-shadow: none; outline-offset: 0; outline: 0; border-bottom: 2px solid $color_2; } } } } .widget-reservation{ .field-select{ input{ margin-bottom: 0; padding-right: 30px; cursor: pointer; background-color: $color_16; position: relative; z-index: 2; } > i { bottom: auto; top: 13px; } } } .field-sub{ padding: 30px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1); display: none; position: absolute; top: 100%; right: 0; left: 0; background-color: $color_9; z-index: 9; li{ text-align: right; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; vertical-align: middle; margin-bottom: 20px; &:last-child{ margin-bottom: 0; } } .shop-details__quantity{ border: 0; margin-left: 0; height: auto; line-height: normal; width: 80px; span.minus{ left: 0; right: auto; z-index: 9; } span{ line-height: 23px; right: 0; } input{ border: 0; padding-right: 0; height: auto; line-height: 28px; } } } .field-date{ .input-group-append{ display: none; } } .gj-picker-bootstrap{ border: 0; background-color: $color_9; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1); border-radius: 0; margin-top: -3px; table{ width: 100%; } td{ div{ border-radius: 50%; width: 32px !important; height: 32px !important; line-height: 32px !important; } div:hover{ border-radius: 50% !important; background-color: $color_13 !important; } } td.today{ div{ background-color: $color_3 !important; color: $color_9 !important; } } } .field-time{ .field-sub{ max-height: 300px; overflow: auto; &::-webkit-scrollbar { width: 0; } } } .site-contact{ h2{ font-size: 24px; font-weight: 500; margin-bottom: 30px; } .contact-box{ margin-bottom: 30px; a{ font-family: Jost; font-size: 15px; font-weight: 500; color: $color_3; } } h3{ font-size: 16px; font-weight: 500; margin-bottom: 15px; } p{ font-size: 15px; color: $color_1; margin-bottom: 15px; } } .contact-main{ .page-title{ margin-bottom: 0px; } .contact-text{ padding: 60px 0; } .contact-form{ padding-top: 60px; padding-bottom: 60px; padding-right: 45px; max-width: 340px; .field-submit{ margin-top: 0; } } } .error-wrap{ margin: 100px auto; text-align: center; max-width: 450px; h2{ font-size: 48px; font-weight: 500; margin-bottom: 15px; } b{ font-family: Jost; font-size: 24px; font-weight: 500; display: block; color: $color_2; margin-bottom: 15px; } a{ color: $color_3; } } .accordion.first-open{ li:first-child{ .accordion-content{ display: block; } } } .accordion-content{ display: none; } .accordion{ max-width: 600px; margin: 0 auto 60px; li{ list-style: none; border-bottom: 1px solid $color_14; } a{ display: block; position: relative; padding-left: 30px; &:after{ content: "\f067"; display: block; width: 16px; height: 16px; position: absolute; top: 50%; left: 0; margin-top: -4px; font-family: 'Font Awesome 5 Pro'; } } li.open{ a:after{ content: "\f068"; } } h3{ font-size: 16px; font-weight: 500; padding: 20px 0; } .accordion-content{ padding-bottom: 20px; } } .account{ position: relative; img{ width: 40px; height: 40px; border-radius: 50%; vertical-align: middle; display: inline-block; } span{ font-family: Jost; vertical-align: middle; display: inline-block; font-size: 15px; font-weight: 500; margin-right: 5px; i{ font-size: 12px; } } svg{ vertical-align: 3px; display: inline-block; } } .account-sub{ position: absolute; display: none; top: 100%; right: -20px; margin-top: 10px; text-align: right; z-index: 9; background-color: $color_9; width: 130px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1); ul{ padding: 10px 0; } li{ list-style: none; line-height: normal; height: auto; a{ display: block; padding: 10px 20px; font-family: Jost; font-size: 15px; font-weight: 500; } &:last-child{ padding-top: 10px; margin-top: 10px; border-top: 1px solid $color_14; } &.active{ a{ color: $color_3; } } } } .member-menu{ background-color: $color_22; margin-bottom: 30px; li{ display: inline-block; list-style: none; padding: 0 15px; a{ font-size: 15px; font-weight: 500; color: $color_9; text-transform: uppercase; height: 60px; line-height: 60px; display: block; font-family: $font_family_2; } &:first-child{ padding-right: 0; } &.active{ a{ color: $color_3; } } } } .member-wrap{ margin-bottom: 60px; .member-avatar{ margin-bottom: 30px; img{ width: 60px; height: 60px; border-radius: 50%; object-fit: cover; } label{ display: inline-block; margin-right: 12px; vertical-align: middle; color: $color_3; input{ position: absolute; opacity: 0; visibility: hidden; width: auto; } } } h1{ font-size: 28px; font-weight: 500; margin-bottom: 30px; } h3{ font-size: 15px; font-weight: 500; color: $color_7; text-transform: uppercase; margin-bottom: 20px; } form{ max-width: 300px; margin-bottom: 30px; input[type="file"]{ border-bottom: 0; } .field-submit{ margin-top: 0; } input[type="submit"]{ width: auto; padding: 0 25px; } input[type="submit"]:focus{ box-shadow: none; outline: 0; outline-offset: 0; } } label{ font-family: $font_family_2; font-size: 15px; font-weight: 500; color: $color_2; } } .owner-content{ background-color: $color_13; padding-bottom: 60px; .member-wrap{ margin-bottom: 0; } } .member-wrap-top{ display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; h2{ font-size: 28px; font-weight: 500; } p{ font-size: 16px; font-weight: 500; font-family: $font_family_2; a{ color: #23d3d3; &:hover{ opacity: 0.6; } } } } .upgrade-box{ border-radius: 16px; background-color: #ffd54f; padding: 30px 50px; position: relative; margin-bottom: 30px; h1{ font-size: 36px; font-weight: 500; margin-bottom: 5px; line-height: 49px; } p{ font-size: 18px; font-weight: 500; margin-bottom: 20px; font-family: $font_family_2; color: $color_2; } img{ position: absolute; top: 0; left: 64px; bottom: 0; height: 100%; } .close{ position: absolute; top: 25px; left: 25px; i{ font-size: 24px; color: $color_1; &:hover{ color: $color_3; } } } } .member-place-top{ vertical-align: middle; justify-content: space-between; align-items: center; margin-bottom: 25px; h1{ font-size: 28px; font-weight: 500; } } .member-statistical{ margin-bottom: 30px; .item{ border-radius: 10px; border: solid 1px $color_14; background-color: $color_9; padding: 25px; text-align: center; h3{ font-size: 15px; font-weight: 500; line-height: 1.6; color: $color_1; margin-bottom: 6px; } .number{ font-size: 36px; font-weight: 500; line-height: 1.61; font-family: $font_family_2; color: $color_2; } .line{ border-radius: 5px; background-color: $color_3; display: block; width: 100px; height: 5px; margin: 0 auto; } } .item.blue{ .line{ background-color: $color_3; } } .item.green{ .line{ background-color: $color_28; } } .item.yellow{ .line{ background-color: $color_29; } } .item.purple{ .line{ background-color: $color_30; } } } .ob-item{ border-radius: 10px; border: solid 1px $color_14; background-color: $color_9; padding: 25px; .ob-head{ display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid $color_14; h3{ margin-bottom: 0; font-size: 15px; font-weight: 500; line-height: 1.6; color: $color_1; span{ color: $color_3; } } a{ font-size: 15px; font-weight: 500; color: $color_3; font-family: $font_family_2; } a.clear-all{ color: $color_33; } } .ob-content{ li{ list-style: none; padding: 20px 0; border-bottom: 1px solid $color_14; position: relative; } p{ font-size: 16px; line-height: 1.5; margin-bottom: 10px; b{ margin-left: 5px; display: inline-block; color: $color_1; font-weight: 500; font-family: $font_family_2; } } li.pending{ span{ color: $color_31; } } li.approve{ span{ color: $color_32; } } li.cancel{ span{ color: $color_33; } } p.place{ color: $color_2; font-weight: 500; font-family: $font_family_2; } p.status{ margin-bottom: 0; span{ font-size: 16px; font-weight: 500; font-family: $font_family_2; } } a.more{ position: absolute; top: 40px; left: 20px; i{ font-size: 24px; color: $color_3; } } } ul{ height: 378px; overflow-y: scroll; margin-bottom: 0 !important; } ul::-webkit-scrollbar { width: 6px; background-color: $color_16; } ul::-webkit-scrollbar-thumb { background-color: $color_14; border-radius: 5px; } } .noti-item{ padding-right: 20px !important; p{ font-size: 16px; line-height: 1.5; font-family: $font_family_2; margin-bottom: 10px; } span, a{ font-size: 12px; color: $color_7; font-style: italic; margin-left: 10px; } a{ color: $color_33; } &:before{ content: ''; width: 4px; height: 4px; border-radius: 50%; background-color: $color_17; position: absolute; top: 50%; margin-top: -2px; right: 0; display: block; } } .noti-item.unread:before{ background-color: $color_3; } .member-filter{ display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; margin-bottom: 30px; .mf-left{ -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .mf-right{ form{ width: 200px; padding-bottom: 0; border-bottom: 2px solid $color_2; .site__search__icon{ top: 6px; } } input{ padding-bottom: 0; height: 31px; line-height: 31px; border-bottom: 0; margin-bottom: 1px; background-color: transparent; } } .field-select{ max-width: 200px; width: 100%; display: inline-block; margin-left: 28px; } .field-select:last-child{ margin-left: 0; } select{ border-top: 0; border-right: 0; border-left: 0; border-bottom: 2px solid $color_2; font-style: normal; height: 32px; line-height: 32px; padding: 0; width: 100%; box-shadow: inherit; background-image: initial; } select:focus{ outline: 0; outline-offset: 0; border-bottom-color: $color_3; } } .member-place-list{ width: 100%; border: 1px solid $color_14; margin-bottom: 30px; overflow: inherit; background-color: $color_9; .field-check{ margin-bottom: 0; } th{ padding: 30px 20px 20px; font-size: 15px; font-weight: 500; font-family: Jost; color: $color_1; text-transform: uppercase; line-height: 1.6; &:nth-child(1){ padding-right: 30px; } } td{ border-top: 1px solid $color_14; padding: 20px 20px; font-size: 16px; font-weight: 500; font-family: $font_family_2; img{ width: 70px; height: 70px; object-fit: cover; } &:nth-child(1){ padding-right: 30px; } &:nth-child(1), &:nth-child(2){ width: 5%; } &:nth-child(3){ width: 12%; } &:nth-child(4){ width: 30%; } b{ font-size: 16px; font-weight: 500; font-family: Jost; color: $color_2; } i{ font-size: 24px; margin-left: 10px; color: $color_1; } i:hover{ color: $color_3; } a.delete{ i{ margin-left: 0; } } } td.pending{ color: $color_31; } td.approved{ color: $color_32; } td.cancel{ color: $color_33; } } .member-place-list.owner-booking{ td{ &:nth-child(2){ width: 30%; } &:nth-child(3){ width: 20%; } &:nth-child(4){ width: 15%; } } td.place-action{ text-align: left; a{ font-size: 15px; height: 40px; line-height: 38px; border-radius: 20px; display: inline-block; text-align: center; padding: 0 15px; border: 1px solid; margin-right: 8px; } .approve{ border-color: $color_32; color: $color_32; &:hover{ background-color: $color_32; color: $color_9; } } .pending{ border-color: $color_31; color: $color_31; &:hover{ background-color: $color_31; color: $color_9; } } .cancel{ border-color: $color_33; color: $color_33; &:hover{ background-color: $color_33; color: $color_9; } } .detail{ border-color: $color_2; color: $color_2; &:hover{ background-color: $color_2; color: $color_9; } } } } .place-action{ position: relative; } .box-option{ display: none; position: absolute; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1); width: 130px; z-index: 9; background-color: $color_9; padding: 20px; top: 80px; right: 0; li{ list-style: none; margin-bottom: 20px; &:last-child{ margin-bottom: 0; } i{ width: 25px; text-align: center; margin-left: 10px; font-size: 20px; } } } .member-wishlist-wrap{ h1{ font-family: Jost; font-size: 28px; font-weight: 500; margin-bottom: 30px; } .places-item{ .place-item__addwishlist{ opacity: 1; } } } .gm-style { .gm-style-iw-c { padding: 0; border-radius: 0; max-width: 325px!important; max-height: inherit!important; } } .gm-style { .gm-style-iw-d{ overflow: auto!important; max-height: inherit!important; max-width: inherit!important; } } .mw-box{ margin-bottom: 30px; h2{ font-size: 24px; font-weight: 500; margin-bottom: 20px; } } .alert{ max-width: 600px; margin: 0 auto 30px; padding: 0; h2{ font-size: 24px; font-weight: 500; text-align: center; margin-bottom: 20px; } p{ font-family: Jost; font-weight: 500; padding: 22px 66px 22px 22px; border: solid 1px $color_23; border-radius: 3px; position: relative; } i{ display: inline-block; vertical-align: middle; position: absolute; top: 23px; right: 22px; font-size: 20px; } a{ color: $color_3; } } .alert.alert-success{ color: $color_1; background-color: $color_4; border: 0; i{ color: $color_23; } } .alert.alert-error{ p{ border: solid 1px $color_24; } i{ color: $color_24; } } .alert.alert-warning{ color: $color_1; background-color: $color_4; border: 0; p{ border: solid 1px $color_25; } i{ color: $color_25; } } .site-notification{ padding: 60px 0; } .widget-shadow{ text-align: center; padding: 30px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1); h3{ font-size: 20px; font-weight: 500; margin-bottom: 30px; } .btn{ display: block; } .note{ font-size: 13px; color: $color_1; margin-top: 10px; } } .sidebar--shop{ padding-right: 30px; } // HOME PAGE .home-header{ .site__menu__icon{ color: $color_9; } .right-header__search{ display: none !important; } .right-header__destinations, .right-header__login, .right-header__signup{ > a{ color: $color_9; } } .right-header__destinations, .right-header__login, .right-header__signup{ > a:hover{ color: $color_3; } } .minicart__open{ > i, > span{ color: $color_9; } } .minicart__open:hover{ > i, > span{ color: $color_3; } } .right-header__button{ background-color: $color_9; > a{ color: $color_2; } i{ font-size: 24px; vertical-align: -2px; } } .right-header__button:hover{ background-color: $color_3; > a, > i{ color: $color_9; } } } .home-header{ position: absolute; top: 0; left: 0; right: 0; background-color: $color_16; z-index: 9; } .home-main{ .site-banner{ height: 100vh; background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; &:after{ content: ''; height: 134px; background-image: url('../images/assets/mask-1.svg'); background-size: cover; background-position: center; background-repeat: no-repeat; width: 100%; display: block; position: absolute; right: 0; left: 0; bottom: 0; } } .site-banner__content{ text-align: center; h1{ font-size: 72px; margin-bottom: 10px; font-family: Jost; font-weight: 500; color: $color_9; } p{ font-size: 24px; color: $color_9; margin-bottom: 30px; font-family: Jost; font-weight: 300; } .site-banner__search{ margin: 0 auto; } .site-banner__search__input{ padding-right: 55px; } } } .explore-slider{ .slick-item{ img{ max-height: 250px; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } } .slick-item:hover{ img{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } } } .explore-item{ position: relative; .explore-info{ position: absolute; top: 50%; transform: translateY(-50%); right: 15px; left: 15px; text-align: center; z-index: 2; } h3{ a{ font-family: Jost; font-size: 24px; font-weight: 500; color: $color_9; line-height: 1.58; } } span{ font-family: Jost; font-size: 16px; color: $color_9; line-height: 1.5; font-weight: 300; } .explore-thumb{ position: relative; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); overflow: hidden; &:before{ content: ''; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 1; } } } .explore-item.dark-sky-blue{ .explore-thumb:before{ background-color: rgba(62,200,235,0.8); } } .explore-item.rosy-pink{ .explore-thumb:before{ background-color: rgba(240,98,108,0.8); } } .explore-item.dodger-blue{ .explore-thumb:before{ background-color: rgba(84,147,249,0.8); } } .explore, .trending, .featured-cities{ padding-bottom: 60px; .slick-nav{ > div{ opacity: 1; left: -25px; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1); } > div.slick-nav__next{ right: -25px; left: auto; } } .slick-dots{ bottom: -40px; button:before{ width: 8px; height: 8px; background-color: $color_17; } .slick-active{ button:before{ background-color: $color_3; } } } } .title-border-bottom{ font-family: Jost; font-size: 28px; font-weight: 500; line-height: 1.61; position: relative; margin-bottom: 55px; } .title-while{ color: $color_9; opacity: 1; } .title-border-bottom:after{ content: ''; position: absolute; bottom: -15px; height: 1px; width: 80px; background-color: $color_3; margin: 0 auto; right: 0; left: 0; } .place-item.layout-02{ .place-inner{ box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05); position: relative; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); overflow: hidden; } .place-thumb{ position: relative; .entry-thumb{ overflow: hidden; display: block; } img{ -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; height: auto; } .btn-add-to-wishlist{ line-height: 0; position: absolute; top: 20px; left: 20px; width: 32px; height: 32px; border-radius: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; background: $color_9; align-items: center; justify-content: center; } .entry-category{ position: absolute; top: 20px; right: 20px; img{ width: 32px; } } } .feature{ position: absolute; right: 20px; bottom: 0; background-color: $color_26; border-radius: 5px; height: 32px; line-height: 32px; font-family: Jost; font-size: 15px; font-weight: 500; padding: 0 15px; color: $color_9; transform: translateY(50%); } .entry-detail{ background: $color_9; border: solid 1px $color_14; border-top: 0; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; padding: 20px; } .entry-head{ font-size: 16px; line-height: 1.5; display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 5px; .place-city{ position: relative; padding-right: 10px; margin-right: 8px; } .place-city:before{ content: ''; position: absolute; right: 0; bottom: 9px; width: 3px; height: 3px; background-color: $color_17; } } .place-type{ font-size: 16px; line-height: 1.5; text-transform: inherit; margin-bottom: 0; } .place-title{ font-size: 20px; font-weight: 500; line-height: 1.4; margin-bottom: 25px; } .entry-bottom{ font-weight: 500; font-family: Jost; display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; justify-content: space-between; .place-price{ font-size: 16px; } } .place-preview{ font-size: 15px; display: -webkit-box; display: -ms-flexbox; display: flex; .place-rating{ margin-left: 3px; color: $color_3; } } } .place-item:hover{ .entry-thumb > { img{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } } } .slider-pd30{ margin-right: -15px; margin-left: -15px; .slick-slide{ > div{ padding-right: 15px; padding-left: 15px; } } } .icon-heart{ > i{ font-size: 24px; } } .featured-cities{ background-color: $color_12; } .featured-slider.slick-slider{ img{ height: auto; } .cities__item{ border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); } } .trending{ background-color: $color_13; padding: 60px 0; } .featured-cities{ padding: 60px 0; } .testimonial-item{ position: relative; padding: 30px 0 20px; text-align: center; img{ max-width: 70px; width: 100%; height: auto; position: absolute; right: 50%; top: 0; -webkit-transform: translateX(50%); -moz-transform: translateX(50%); -o-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%); } p{ font-family: Jost; font-size: 18px; line-height: 1.44; margin-bottom: 20px; } h4{ font-weight: 500; margin-bottom: 5px; } span{ font-family: Jost; font-size: 16px; font-style: italic; color: $color_27; } } .testimonial{ padding: 60px 0; .slick-nav{ > div{ top: 70px; left: -105px; width: 46px; height: 46px; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1); opacity: 1; } .slick-nav__next{ left: auto; right: -105px; } } .slick-sliders{ max-width: 500px; margin: 0 auto; } } .testimonial-control{ height: 64px; .tc-item{ padding: 10px 0; text-align: center; img{ height: auto; width: 40px; border-radius: 50%; margin: 0 auto; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } } .slick-current{ img{ width: 49px; border: solid 1px $color_3; margin-top: -5px; } } } .blogs{ background-color: $color_3; padding: 60px 0; position: relative; &:before{ content: ''; background-image: url(../images/assets/mask-1.svg); background-size: cover; background-position: center; position: absolute; right: 0; top: 0; width: 100%; transform: rotate(-180deg); height: 245px; z-index: 0; } .post__category{ a{ color: $color_9; } a:after{ border-bottom-color: $color_9; } a:hover{ opacity: 0.7; color: $color_9; } } .post__title{ a{ color: $color_9; line-height: 1.56; font-size: 18px; font-weight: 500; } } .post__title:hover{ a{ opacity: 0.7; } } } .btn-border{ opacity: 0.9; border-radius: 20px; display: inline-block; border: solid 1px $color_9; margin: 0 auto; } .btn-border:hover{ opacity: 1; background-color: $color_9; color: $color_3; } .page-title.layout-2{ position: relative; &:before{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 40%; background-color: $color_3; } &:after { content: ""; position: absolute; right: 0; bottom: 0px; left: 0; background-repeat: no-repeat; height: 400px; background-size: 800px 800px; background-image: radial-gradient(circle at 0% 3%, $color_16 calc(400px + 1px), $color_3 calc(400px + 2px)); background-position: top center; } .page-title__content{ position: static; text-align: right; transform: inherit; margin-bottom: 100px; p{ font-size: 18px; font-weight: 400; font-style: inherit; } } .intro__meta{ display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; } .intro__meta__item{ border-right: 0; padding-right: 0; -webkit-box-flex: 0; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; max-width: 33.33%; color: $color_9; h3{ color: $color_9; } } .page-title-info{ max-width: 40%; width: 100%; padding-top: 75px; position: relative; z-index: 2; } h1{ font-family: Jost; font-size: 80px; font-weight: 500; } } .archive-city{ display: -webkit-box; display: -ms-flexbox; display: flex; border-top: 1px solid $color_14; .col-left{ flex: 1; padding: 40px 135px 60px 60px; display: -webkit-box; display: -ms-flexbox; display: flex; margin-right: -30px; margin-left: -30px; } .col-left.no-maps{ flex: inherit; padding: 40px 0; margin-right: 0px; margin-left: 0px; margin: 0 auto; .archive-filter{ padding-right: 15px; } .main-primary{ padding-left: 15px; } .place-item{ -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; max-width: 33.33%; } } .col-right{ flex: 0 0 375px; max-width: 375px; .filter-head{ display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; margin-bottom: 20px; display: none; h2{ font-size: 24px; font-weight: 500; line-height: 1.58; } a{ color: $color_3; } a:hover{ opacity: 0.7; } } } .archive-filter{ flex: 0 0 300px; max-width: 300px; padding-right: 30px; padding-left: 30px; h2{ font-size: 24px; font-weight: 500; line-height: 1.58; flex-grow: 1; } > form.sortForm{ display: none; } } } .archive-city.layout-02{ .result-count{ font-size: 18px !important; color: $color_1 !important; } .filter-control{ span{ font-family: $font_family_2 !important; } } .archive-filter{ display: none; } .col-left.no-maps{ .place-item{ -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } } } .filter-box{ padding-top: 25px; margin-top: 25px; border-top: 1px solid $color_14; .filter-group{ height: 102px; overflow: hidden; margin-bottom: 15px; transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; -ms-transition: all 0.3s; } h3{ font-size: 16px; font-weight: 500; line-height: 1.5; margin-bottom: 15px; position: relative; cursor: pointer; &:before{ content: '\f107'; position: absolute; left: 0; font-size: 12px; font-weight: 900; font-family: 'Line Awesome Free'; } } h3.active:before{ content: '\f106'; } .field-check{ margin-bottom: 10px; label{ -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } label:before{ vertical-align: -2px; } } .more{ font-family: Jost; font-size: 15px; font-weight: 500; color: $color_3; &:hover{ opacity: 0.7; } } } .filter-list.open{ .filter-group{ height: 100%; } } .main-primary{ flex: 1; padding-right: 30px; padding-left: 30px; .top-area{ display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; .result-count{ font-size: 16px; font-weight: 500; line-height: 1.5; color: $color_2; font-family: Jost; } } .top-area-filter{ justify-content: inherit; .clear{ margin-right: 10px; color: $color_3; &:hover{ opacity: 0.7; } } } .pagination{ margin-bottom: 0; text-align: right; } } .select-box{ flex-grow: 1; text-align: left; select{ display: none; } .filter-control{ font-size: 15px; line-height: inherit; font-weight: 500; color: $color_1; height: inherit; border: 0; padding-left: 15px; position: relative; span{ font-size: 15px; line-height: inherit; font-weight: 500; color: $color_1; cursor: pointer; font-family: $font-family_2; } .list{ background-color: $color_9; border-radius: 5px; box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11); box-sizing: border-box; margin-top: 4px; opacity: 0; visibility: hidden; overflow: hidden; padding: 0; position: absolute; top: 100%; left: 0; width: 140px; -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; z-index: 9; } li{ cursor: pointer; font-weight: 400; line-height: 40px; list-style: none; min-height: 40px; outline: none; padding-right: 18px; padding-left: 29px; text-align: right; -webkit-transition: all 0.2s; transition: all 0.2s; font-size: 15px; } li.selected, li:hover{ background-color: #f6f6f6; font-weight: 700; } &:after{ content: '\f107'; font-size: 12px; font-weight: 900; font-family: "Line Awesome Free"; font-style: normal; left: 0; width: auto; height: auto; margin-top: -2px; border: 0; top: 7px; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); position: absolute; } } .filter-control.active{ .list{ opacity: 1; visibility: visible; } } } .area-places{ display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; .place-item{ -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; padding: 0 15px; margin-bottom: 30px; } } .area-places.layout-3col{ .place-item{ -webkit-box-flex: 0; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; max-width: 33.33%; } } .area-places.layout-4col{ .place-item{ -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } } .entry-map{ height: 100vh; position: sticky; position: -webkit-sticky; top: 0; #place-map-filter{ height: 100%; } } .filter-mobile{ display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 60px; display: none; li{ list-style: none; display: inline-block; a{ height: 40px; line-height: 40px; border-radius: 20px; border: solid 1px $color_3; font-size: 15px; font-weight: 500; display: block; padding: 0 30px; margin-left: 12px; } } .mb-maps{ text-align: left; flex-grow: 1; a{ width: 40px; height: 40px; border-radius: 20px; border: solid 1px $color_3; background-color: $color_3; display: inline-block; color: $color_9; font-size: 24px; text-align: center; line-height: 40px; } } } .filterForm, .sortForm{ .form-button{ margin-top: 20px; display: none; } .filter-head{ display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; align-items: center; .close{ display: none; } .clear-filter{ font-size: 16px; color: $color_3; font-weight: 500; font-family: $font_family_2; line-height: 37px; display: none; i{ margin-left: 10px; font-size: 14px; } } .clear-filter.open{ display: block; } .clear-filter:hover{ opacity: 0.7; } } } .close-filter{ margin-right: 10px; display: none; i{ font-size: 24px; } } .widget-reservation-mini { display: none; } .sidebar.fixed { position: -webkit-sticky; position: sticky; top: 40px; } // Coming Soon .template-coming-soon{ .site-header{ padding: 60px 0 15px; position: absolute; top: 0; right: 0; left: 0; background-color: $color_16; .site__brand{ line-height: 30px; } } } .template-coming-soon{ .site-main{ height: 100vh; padding: 105px 0; div, img{ height: 100%; } .cs-info{ height: auto; } } .cs-info{ position: absolute; top: 50%; right: 15px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); max-width: 400px; h1{ font-size: 58px; font-family: $font_family_3; line-height: 1.28; color: $color_8; margin-bottom: 10px; } p{ font-size: 18px; line-height: 1.61; margin-bottom: 30px; } } } .site-banner__search.cs-newletter{ .site-banner__search__icon{ left: 25px; right: auto; i{ font-size: 32px; color: $color_3; } } .site-banner__search__input{ border: solid 1px $color_17; padding: 0 25px 0 55px; line-height: 58px; height: 60px; } } .template-coming-soon{ .footer{ position: absolute; bottom: 0; right: 0; left: 0; background-color: $color_16; border: 0; padding: 15px 0 60px; } } .footer-socials{ li{ list-style: none; display: inline-block; margin-left: 20px; i{ font-size: 32px; } } li:last-child{ margin-left: 0; } } .template-coming-soon.layout-2{ .cs-info{ h1{ font-family: $font_family_2; span{ color: $color_3; } } p{ margin-bottom: 20px; } b{ font-family: $font_family_2; font-size: 16px; font-weight: 500; color: $color_1; } a{ font-family: $font_family_2; color: $color_3; font-size: 16px; font-weight: 500; } } .site-main{ padding: 0; } .cs-thumb{ position: fixed; top: 0; left: 0; bottom: 0; max-width: 50%; width: 100%; img{ width: 100%; object-fit: cover; } } .cs-day{ position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 20px; left: 20px; text-align: center; height: auto; width: 180px; height: 180px; border-radius: 32px; margin: 0 auto; background-color: rgba(255,255,255,0.9); padding: 30px 0; span{ font-family: $font_family_2; font-size: 58px; color: $color_2; font-weight: 700; } p{ font-family: $font_family_2; font-size: 18px; font-weight: 500; } } } .purchase-button { background-color: $color_3; border-radius: 30px; bottom: 40px; box-shadow: -3px 3px 20px 0 rgba(0,0,0,.2); color: $color_9 !important; font-size: 14px; right: 40px; line-height: 30px; padding: 10px 25px; position: fixed; text-transform: uppercase; transition: all .5s ease; z-index: 9999; display: flex; align-items: center; i{ font-size: 28px; margin-left: 5px; position: relative; top: -2px; } &:hover{ background: #2d2d2d; } } // Pricing .pricing-area{ h2.title{ font-size: 36px; margin-bottom: 50px; } } .pricing-item{ border-radius: 16px; border: solid 1px $color_17; text-align: center; height: 100%; padding: 50px 25px; background-color: $color_9; overflow: hidden; position: relative; img{ height: 111px; object-fit: contain; margin-bottom: 28px; } h3{ font-size: 24px; text-transform: uppercase; font-family: $font_family_2; font-weight: 500; line-height: 1.58; margin-bottom: 10px; } .price{ font-size: 48px; font-family: $font_family_2; font-weight: 500; color: $color_2; line-height: 42px; margin-bottom: 20px; .currency{ font-size: 24px; vertical-align: 15px; } .time{ font-size: 14px; display: block; color: $color_1; } } .btn{ padding: 0 63px; font-size: 15px; margin-bottom: 30px; &:hover{ opacity: 0.7; } } li{ list-style: none; font-size: 16px; line-height: 1.5; margin-bottom: 20px; &:last-child{ margin-bottom: 0; } } .best-deal{ -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); -o-transform: rotate(315deg); -ms-transform: rotate(315deg); transform: rotate(315deg); font-family: $font_family_2; font-size: 18px; font-weight: 500; background-color: $color_3; color: $color_9; position: absolute; top: 18px; left: -95px; padding: 8px 100px; } .total{ padding-top: 20px; margin-top: 20px; margin-bottom: 20px; border-top: 1px solid $color_14; h4{ font-size: 16px; font-weight: 500; margin-bottom: 5px; } span{ font-size: 18px; font-weight: 500; line-height: 1.61; color: $color_2; font-family: $font_family_2; } } } .package-review{ .pricing-item{ padding: 50px 60px 40px; .btn-change{ margin-bottom: 0; background-color: $color_2; } } } .pricing-inner{ margin-bottom: 60px; } .payment-method{ text-align: center; margin-bottom: 80px; ul{ margin-bottom: 15px; } li{ list-style: none; display: inline-block; margin-left: 18px; &:last-child{ margin-left: 0; } } img{ width: auto; height: 60px; } p{ font-size: 16px; line-height: 1.5; } } .frequently-asked{ padding: 55px 0; background-color: $color_13; .title{ text-align: center; margin-bottom: 60px; h2{ font-size: 28px; font-weight: 500; margin-bottom: 10px; } p{ font-size: 16px; line-height: 1.5; } } .asked-item{ margin-bottom: 30px; max-width: 500px; padding-left: 20px; h3{ font-size: 18px; font-weight: 500; margin-bottom: 15px; } p{ font-size: 16px; line-height: 1.5; } } } // Checkout .checkout-area{ margin-bottom: 80px; h2{ font-size: 24px; font-weight: 500; line-height: 1.58; margin-bottom: 30px; } } .billing-form{ .billingForm{ max-width: 570px; } .field-check{ label{ -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; display: block; } a{ display: inline-block; } } } .field-group{ h3{ font-size: 18px; font-weight: 500; line-height: 1.44; margin-bottom: 20px; } label{ font-size: 15px; font-weight: 500; display: block; font-family: $font_family_2; color: $color_2; span.required{ color: $color_33; } } .field-input{ margin-bottom: 30px; input{ border-top: 0; border-right: 0; border-left: 0; border-bottom: 2px solid #2d2d2d; font-style: normal; height: 32px; line-height: 32px; padding: 0; width: 100%; } } } .field-select{ position: relative; margin-bottom: 30px; #select-button { position: relative; border: 1px solid $color_2; height: 70px; line-height: 68px; padding: 0 14px; background-color: $color_9; border-radius: 3px; cursor: pointer; } #options-view-button { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 3; } #selected-value { font-size: 16px; height: 100%; margin-left: 26px; } .option { img { height: 20px; } color: #2d3667; font-size: 16px; } .label { color: #2d3667; font-size: 16px; } #chevrons { position: absolute; top: 0; left: 0; bottom: 0; font-size: 24px; padding: 0 14px; img { display: block; height: 50%; color: #d1dede; font-size: 12px; text-align: left; } } #options-view-button:checked + #select-button #chevrons img { color: #2d3667; } .options { position: absolute; right: 0; width: 250px; } #options { position: absolute; top: 70px; left: 0; right: 0; width: 100%; margin: 0 auto; background-color: $color_9; border-radius: 4px; z-index: 99; } #options-view-button:checked ~ #options { border: 1px solid #e2eded; border-color: #eaf1f1 #e4eded #dbe7e7 #e4eded; } .option { position: relative; line-height: 1; transition: 0.3s ease all; z-index: 2; img { height: 20px; position: absolute; right: 14px; padding: 0; display: none; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } } #options-view-button:checked ~ #options { .option { img{ display: block; } } } .label { display: none; padding: 0; margin-right: 47px; } #options-view-button:checked ~ #options .label { display: block; padding: 12px 14px; } .s-c { position: absolute; right: 0; width: 100%; height: 100%; } input[type="radio"] { position: absolute; left: 0; right: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .label { transition: 0.3s ease all; } .opt-val { position: absolute; right: 0; opacity: 0; width: 200px; background-color: $color_9; transform: scale(0); font-size: 16px; color: $color_2; padding-right: 61px; } .option input[type="radio"]:checked ~ { .opt-val { opacity: 1; transform: scale(1); } img { opacity: 1; animation: unset; color: $color_9; } .label { color: $color_9; &:before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: -1; } } } #options-view-button:not(:checked) ~ #options { .option input[type="radio"]:checked ~ { .opt-val{ top: -45px; right: 1px; img{ display: block; } } } } .option { &.o-paypal input[type="radio"]:checked ~ { .label:before { background-color: #012169; border-radius: 4px 4px 0 0; } .opt-val { top: -46px; } } &.o-stripe input[type="radio"]:checked ~ { .label:before { background-color: #00afe1; } .opt-val { top: -86px; } } &.o-skrill input[type="radio"]:checked ~ { .label:before { background-color: #862165; } .opt-val { top: -126px; } } &.o-master input[type="radio"]:checked ~ { .label:before { background-color: #000066; } .opt-val { top: -166px; } } } #option-bg { position: absolute; top: 0; left: 0; right: 0; height: 40px; transition: 0.3s ease all; z-index: 1; display: none; } #options-view-button:checked ~ #options #option-bg { display: block; } .option { &:hover .label { color: $color_9; } &.o-paypal:hover ~ #option-bg { top: 0; background-color: #012169; border-radius: 4px 4px 0 0; } &.o-stripe:hover ~ #option-bg { top: 40px; background-color: #00afe1; } &.o-skrill:hover ~ #option-bg { top: 80px; background-color: #862165; } &.o-master:hover ~ #option-bg { top: 120px; background-color: #000066; } } } // Checkout thanks .checkout-thanks-area{ max-width: 460px; margin: 0 auto; margin-bottom: 80px; h2{ font-size: 36px; text-align: center; margin-bottom: 50px; } h3{ font-size: 24px; font-weight: 500; text-align: center; line-height: 1.58; margin-bottom: 20px; } .order-detail{ border: 1px solid $color_14; border-radius: 5px; margin-bottom: 30px; p{ display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; padding: 30px 40px; border-bottom: 1px solid $color_14; &:last-child{ margin-bottom: 0; } font-size: 16px; } p.total{ span{ font-size: 16px; color: $color_2; font-weight: 700; font-family: $font_family_2; } } .pakage-name{ text-transform: uppercase; } } a.btn-print{ i{ font-size: 24px; margin-left: 8px; vertical-align: -3px; } &:hover{ opacity: 0.7; } } } // App landing .landing-banner{ padding: 234px 0; background-size: cover; background-position: center; margin-bottom: 80px; h2{ font-size: 64px; font-weight: 500; margin-bottom: 10px; } p{ font-size: 24px; color: $color_2; margin-bottom: 30px; } .lb-button{ a{ display: inline-block; margin-left: 18px; } img{ height: 60px; } } } .ld-title{ text-align: center; margin-bottom: 40px; h2{ font-size: 48px; font-weight: 500; line-height: 1.6; margin-bottom: 10px; } p{ font-size: 18px; line-height: 1.6; } } .img-box-inner{ margin-bottom: 80px; } .img-box-item{ text-align: center; border-radius: 10px; border: solid 1px $color_14; padding: 50px; img{ height: 72px; margin-bottom: 30px; } h3{ font-size: 24px; font-weight: 500; line-height: 1.58; margin-bottom: 10px; } p{ font-size: 16px; line-height: 1.63; } } .features-item{ display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; margin-bottom: 30px; .features-thumb{ -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; padding-left: 100px; } .features-info{ -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } h3{ font-size: 64px; font-weight: 500; margin-bottom: 25px; span{ color: $color_3; } } p{ font-size: 18px; line-height: 1.44; margin-bottom: 30px; max-width: 470px; } a.more{ font-size: 15px; font-weight: 500; text-transform: uppercase; color: $color_3; font-family: $font_family_2; position: relative; &:after{ content: ''; width: 100%; height: 2px; display: block; background-color: $color_3; position: absolute; bottom: -2px; right: 0; } &:hover{ opacity: 0.7; } } } .features-item:nth-child(2n-1){ .features-thumb{ order: 2; padding-left: 0; padding-right: 100px; } .features-info{ order: 1; } } .features-inner{ margin-bottom: 50px; } //Home Business .home-header.home-header-while{ .site__menu__icon{ color: $color_2; } .right-header__destinations, .right-header__login, .right-header__signup{ > a{ color: $color_2; font-family: $font_family_2; } } .minicart__open{ > i{ color: $color_2; } > span{ color: $color_3; } } .right-header{ > div { i{ color: $color_1; } } } .right-header__button{ background-color: $color_3; } div.right-header__button{ i, > a{ color: $color_9; transition: inherit; -moz-transition: inherit; -o-transition: inherit; -webkit-transition: inherit; -ms-transition: inherit; } } div.right-header__button:hover{ background-color: $color_9; i, > a{ color: $color_2; } } } .business-main.home-main{ .site-banner__content{ h1, p{ color: $color_2; } p{ font-family: $font_family_1; font-weight: 400; i{ font-family: $font_family_2; } } } .site-banner:after{ background-image: url(../images/bg_hero_bottom.svg); background-size: 110%; height: 40px; } } .site-banner__search.layout-02{ display: flex; border-radius: 30px; background-color: #fff; box-shadow: 0 0 10px 0 rgba(0,0,0,0.1); vertical-align: middle; align-items: center; position: relative; .site-banner__search__input{ box-shadow: inherit; padding: 0; color: $color_2; font-family: $font_family_1; &::placeholder { color: $color_7; font-family: $font_family_1; } &:-ms-input-placeholder { color: $color_7; font-family: $font_family_1; } &::-ms-input-placeholder { color: $color_7; font-family: $font_family_1; } } .field-input{ display: flex; align-items: center; padding: 0 20px; position: relative; label{ color: $color_2; font-family: $font_family_2; margin-left: 8px; } input:focus{ background-color: inherit !important; border-radius: 0; } } .field-input:nth-child(1){ -webkit-box-flex: 0; -ms-flex: 0 0 55%; flex: 0 0 55%; max-width: 55%; position: relative; &:after{ content: ''; width: 1px; position: absolute; top: 10px; bottom: 10px; left: 0; display: block; background-color: $color_14; } } .field-input:nth-child(2){ -webkit-box-flex: 0; -ms-flex: 0 0 45%; flex: 0 0 45%; max-width: 45%; .site-banner__search__input{ padding: 0 0 0 45px; } } .field-submit{ margin-top: 0; height: 50px; position: absolute; top: 5px; left: 5px; button{ border: 0; background-color: $color_3; height: 50px; line-height: 50px; text-align: center; width: 50px; border-radius: 50%; cursor: pointer; i{ color: $color_9; font-size: 22px; vertical-align: -2px; } } button:focus{ outline: inherit; } } .search-suggestions{ position: absolute; top: calc( 100% + 2px ); right: 0; left: 0; border-radius: 5px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1); background-color: $color_9; text-align: right; z-index: 99; display: none; ul{ padding: 7px 0; } li{ list-style: none; i{ font-size: 24px; margin-left: 10px; vertical-align: -3px; } a{ font-size: 16px; font-weight: 500; font-family: $font_family_2; color: $color_2; padding: 8px 25px; display: block; } } li:hover{ a{ background-color: $color_3; color: $color_9; } } } } .bsn-cat-item{ a{ width: 150px; height: 150px; border-radius: 50%; display: block; text-align: center; padding-top: 35px; margin: 0 auto; } a:hover{ padding-top: 25px; span.place{ opacity: 1; visibility: visible; } } i{ font-size: 36px; color: $color_9; display: block; margin-bottom: 10px; } span.title{ font-family: $font_family_2; font-size: 16px; font-weight: 500; color: $color_9; display: block; margin-bottom: 5px; line-height: 22px; } span.place{ font-size: 15px; color: $color_9; opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; } } .place-item.layout-02{ .entry-category{ width: 32px; height: 32px; line-height: 32px; text-align: center; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05); border-radius: 16px; padding: 0; transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; span{ color: $color_9; display: none; } i{ color: $color_9; margin-left: 0px; } } .entry-category:hover{ width: auto; border-radius: 16px; padding: 0 10px; span{ display: inline-block; } i{ margin-left: 5px; } } .author{ width: 32px; height: 32px; border-radius: 50%; border: 2px solid $color_9; display: block; position: absolute; bottom: -18px; left: 20px; } .entry-category.rosy-pink{ background-color: #f0626c; } .entry-category.purple{ background-color: #d763d7; } .entry-category.blue{ background-color: #5b5ff9; } .entry-category.orange{ background-color: #ffb44f; } .entry-category.charcoal-purple{ background-color: #846fcd; } .entry-category.green{ background-color: #78cc58; } } .bsn-cat-item.rosy-pink{ a{ background-color: #f0626c; } } .bsn-cat-item.purple{ a{ background-color: #d763d7; } } .bsn-cat-item.blue{ a{ background-color: #5b5ff9; } } .bsn-cat-item.orange{ a{ background-color: #ffb44f; } } .bsn-cat-item.charcoal-purple{ a{ background-color: #846fcd; } } .bsn-cat-item.green{ a{ background-color: #78cc58; } } .business-category{ padding: 30px 0 60px; } .business-main{ position: relative; z-index: 1; background-color: $color_9; .site-banner{ .site-banner__content{ top: 40%; } } .slick-nav{ > div{ opacity: 1; width: auto; height: auto; background-color: transparent; left: -53px !important; box-shadow: none; } .slick-nav__next{ right: -53px !important; left: auto !important; } } .slick-dots{ bottom: -40px; li{ button:before{ background-color: $color_17; } } li.slick-active{ button:before{ background-color: $color_3; } } } .featured-cities{ background-color: $color_9; .cities__item{ margin-bottom: 0; } } .title-border-bottom{ margin-bottom: 70px; span{ display: block; font-size: 16px; opacity: 0.9; color: $color_1; } } .title-border-bottom:after{ bottom: -25px; } .testimonial{ .slick-nav{ > div{ top: 50%; } } .slick-sliders{ max-width: 100%; } } .blogs:before{ content: ''; display: none; } .blogs{ background-color: $color_13; .post__title{ a{ color: $color_2; } } .post__category{ a{ color: $color_2; opacity: 0.9; font-size: 15px; line-height: 1.53; } a:after{ border-bottom-color: $color_3; } } } } .testimonial-item.layout-02{ border-radius: 10px; border: solid 1px $color_14; padding: 30px; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; justify-content: space-between; text-align: right; img{ position: static; -webkit-transform: inherit; -moz-transform: inherit; -o-transform: inherit; -ms-transform: inherit; transform: inherit; max-width: 150px; } .avatar{ -webkit-box-flex: 0; -ms-flex: 0 0 150px; flex: 0 0 150px; max-width: 150px; position: relative; .quote{ top: 10px; left: 0; right: auto; -webkit-transform: inherit; -moz-transform: inherit; -o-transform: inherit; -ms-transform: inherit; transform: inherit; position: absolute; width: auto; max-width: 28px; } } .testimonial-info{ -webkit-box-flex: 0; -ms-flex: 0 0 calc(100% - 180px); flex: 0 0 calc(100% - 180px); max-width: calc(100% - 180px); p{ font-size: 16px; line-height: 1.5; color: $color_1; margin-bottom: 20px; } b{ font-size: 16px; color: $color_2; } span{ font-size: 16px; color: $color_27; font-family: $font_family_1; margin-right: 20px; } } } .business-cat-slider{ .bsn-cat-item{ text-align: center; } } .slick-dotted.slick-slider.business-cat-slider{ margin-bottom: 0; margin-bottom: 40px; } .business-about{ background-color: $color_3; background-size: 50% 100%; background-position: top left; background-repeat: no-repeat; padding: 109px 0; .business-about-info{ padding-left: 100px; h2{ font-size: 36px; font-weight: 500; line-height: 1.61; margin-bottom: 20px; } p{ font-size: 18px; line-height: 1.44; color: $color_2; margin-bottom: 30px; } a.btn{ background-color: $color_9; color: $color_2; font-family: $font_family_2; font-size: 14px; } a.btn:hover{ color: $color_3; } } } .business-landing-banner.landing-banner{ margin-bottom: 0; position: fixed; bottom: 0; left: 0; right: 0; z-index: 0; padding: 0; height: 600px; .container{ position: relative; height: 100%; .lb-info{ position: absolute; right: 15px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } } } .site-banner__search.layout-02{ display: flex; border-radius: 30px; background-color: #fff; box-shadow: 0 0 10px 0 rgba(0,0,0,0.1); vertical-align: middle; align-items: center; position: relative; .site-banner__search__input{ box-shadow: inherit; padding: 0; color: $color_2; font-family: $font_family_1; &::placeholder { color: $color_7; font-family: $font_family_1; } &:-ms-input-placeholder { color: $color_7; font-family: $font_family_1; } &::-ms-input-placeholder { color: $color_7; font-family: $font_family_1; } } .field-input{ display: flex; align-items: center; padding: 0 20px; position: relative; label{ color: $color_2; font-family: $font_family_2; margin-left: 8px; } input:focus{ background-color: inherit !important; border-radius: 0; } } .field-input:nth-child(1){ -webkit-box-flex: 0; -ms-flex: 0 0 55%; flex: 0 0 55%; max-width: 55%; position: relative; &:after{ content: ''; width: 1px; position: absolute; top: 10px; bottom: 10px; left: 0; display: block; background-color: $color_14; } } .field-input:nth-child(2){ -webkit-box-flex: 0; -ms-flex: 0 0 45%; flex: 0 0 45%; max-width: 45%; .site-banner__search__input{ padding: 0 0 0 45px; } } .field-submit{ margin-top: 0; height: 50px; position: absolute; top: 5px; left: 5px; button{ border: 0; background-color: $color_3; height: 50px; line-height: 50px; text-align: center; width: 50px; border-radius: 50%; cursor: pointer; i{ color: $color_9; font-size: 22px; vertical-align: -2px; } } button:focus{ outline: inherit; } } .search-suggestions{ position: absolute; top: calc( 100% + 2px ); right: 0; left: 0; border-radius: 5px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1); background-color: $color_9; text-align: right; z-index: 99; display: none; ul{ padding: 7px 0; } li{ list-style: none; i{ font-size: 24px; margin-left: 10px; vertical-align: -3px; } a{ font-size: 16px; font-weight: 500; font-family: $font_family_2; color: $color_2; padding: 8px 25px; display: block; } } li:hover{ a{ background-color: $color_3; color: $color_9; } } } } .site__search { line-height: 40px; display: inline-block; vertical-align: middle; max-width: 270px; width: 100%; vertical-align: baseline; .search__close{ position: absolute; top: 50%; transform: translateY(-50%); left: 25px; line-height: 0; z-index: 10; display: none; } } .site__search.layout-02{ max-width: 500px; .site-banner__search.layout-02{ box-shadow: inherit; border: solid 1px $color_14; margin-bottom: 0; .site-banner__search__input{ line-height: 50px; &::placeholder { opacity: 0; } &:-ms-input-placeholder { opacity: 0; } &::-ms-input-placeholder { opacity: 0; } } .field-submit{ button{ height: 40px; width: 40px; line-height: 40px; } } } } .place-item.layout-02{ .entry-category{ width: 32px; height: 32px; line-height: 32px; text-align: center; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05); border-radius: 16px; padding: 0; transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; span{ color: $color_9; display: none; } i{ color: $color_9; margin-left: 0px; } } .entry-category:hover{ width: auto; border-radius: 16px; padding: 0 10px; span{ display: inline-block; } i{ margin-left: 5px; } } .author{ width: 32px; height: 32px; border-radius: 50%; border: 2px solid $color_9; display: block; position: absolute; bottom: -18px; left: 20px; } .entry-category.rosy-pink{ background-color: #f0626c; } .entry-category.purple{ background-color: #d763d7; } .entry-category.blue{ background-color: #5b5ff9; } .entry-category.orange{ background-color: #ffb44f; } .entry-category.charcoal-purple{ background-color: #846fcd; } .entry-category.green{ background-color: #78cc58; } } .filter.layout-02{ display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; .select-box{ flex-grow: inherit; text-align: right; } } .filter-group.filter-business{ padding: 25px 0; border-top: 1px solid $color_14; .clear-filter{ font-size: 15px; color: $color_3; font-family: $font_family_2; display: none; } } .select-group{ .select-box{ display: inline-block; margin-left: 23px; } .filter-control{ padding: 0 0 0 15px; &:before{ content: ''; height: 2px; width: 100%; background-color: $color_2; display: block; position: absolute; bottom: -2px; right: 0; } &:after{ left: 0px; } span{ font-size: 15px; color: $color_2; font-family: $font_family_2; } } } .filter.layout-02{ .select-box{ .filter-control{ .list{ margin-top: 5px; right: 0; left: auto; } } } } .show-map{ margin-right: 20px; span{ font-size: 16px; color: $color_7; margin-left: 5px; } .icon-toggle{ width: 55px; height: 30px; border-radius: 15px; background-color: $color_2; display: inline-block; vertical-align: middle; position: relative; transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; &:before{ content: ''; width: 26px; height: 26px; border-radius: 50%; background-color: $color_9; position: absolute; top: 2px; right: 2px; transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; } } .icon-toggle.active{ background-color: $color_17; &:before{ content: ''; right: 27px; } } } .archive-city.layout-02{ .col-left{ margin: 0; } .main-primary{ padding: 0; } } .archive-city.layout-02.active{ padding: 40px 0 80px; .col-left{ padding: 0 !important; -webkit-box-flex: inherit !important; -ms-flex: inherit !important; flex: inherit !important; display: inherit !important; display: inherit !important; display: inherit !important; margin: 0 auto; } } // Footer .footer.layout-02{ position: relative; z-index: 1; background-color: $color_9; .footer__top__info{ .footer__top__info__logo{ img{ margin-bottom: 40px; } } .footer__top__info__desc{ margin-bottom: 10px; } } } .footer { border-top: 1px solid $color_14; } .footer-subscribe{ max-width: 300px; position: relative; } .footer-subscribe { input{ border: 0; border-bottom: 2px solid $color_2; height: 36px; line-height: 36px; width: 100%; padding: 0 0 0 50px; &::placeholder { color: $color_7; font-weight: 400; font-family: $font_family_1; font-size: 15px; } &:-ms-input-placeholder { color: $color_7; font-weight: 400; font-family: $font_family_1; font-size: 15px; } &::-ms-input-placeholder { color: $color_7; font-weight: 400; font-family: $font_family_1; font-size: 15px; } } button{ background-color: transparent; border: none; position: absolute; top: 50%; left: 0; -webkit-transform: translateY( -50% ); -moz-transform: translateY( -50% ); -o-transform: translateY( -50% ); -ms-transform: translateY( -50% ); transform: translateY( -50% ); i{ font-size: 24px; } } } .footer__bottom { border-top: 1px solid $color_14; padding: 32px 0; } .footer__top { padding: 60px 0; } .footer__top__info { .footer__top__info__logo { img { max-width: 96px; margin-bottom: 20px; } } .footer__top__info__desc { font-size: 16px; line-height: 1.44; color: $color_1; margin-bottom: 25px; } .footer__top__info__app { a { display: inline-block; margin-left: 8px; } img { max-width: 134px; } } } .footer__top__nav { h3 { font-size: 16px; font-weight: 500; margin-bottom: 20px; } li { list-style: none; margin-bottom: 10px; &:last-child { margin-bottom: 0; } a { color: $color_1; line-height: 1.53; &:hover { color: $color_3; } } i{ font-size: 24px; } } } .footer__top__nav--contact { p { font-weight: 500; line-height: 1.53; color: $color_1; margin-bottom: 10px; } ul { margin-top: 30px; } li { display: inline-block; margin-left: 18px; &:last-child { margin-left: 0; } svg { &:hover { >* { fill: $color_3; } } } } } .footer__bottom__copyright { text-align: center; font-size: 14px; color: $color_1; }
Simpan