body { background-color: rgb(0, 0, 0); color: #999; font-size: 14px; } * { box-sizing: border-box; } .txt-gold { color: rgba(223, 190, 20, 0.6); } .pswp-item { cursor: pointer; } a, a:link, a:active, a:visited { color: #FFF; text-decoration: none; transition-duration: .5s; } a:hover { color: rgba(194, 170, 110, 1); text-decoration: none; transition-duration: .5s; } .bline-texture:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url(/images/bline-texture.png); z-index: 1; } .top-banner { height: 560px; background: linear-gradient(to bottom, rgba(29, 49, 48, 1) 0%, rgba(0, 0, 0, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1d3130', endColorstr='#000000', GradientType=0); } .top-banner::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 300px; box-shadow: 0 -20px 10px 10px #000; background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#00000000', GradientType=0); } .news-article .main-content-block::before, .env-article .main-content-block::before, .rooms-article .main-content-block::before, .rooms-detail-article .main-content-block::before, .loc-article .main-content-block::before, .contact-article .main-content-block::before { content: ''; top: -240px; display: block; position: absolute; width: 100%; height: 100%; background-image: url(/images/top-img.png); background-size: 597px auto; background-position: center 80px; background-repeat: no-repeat; } #carousel-section { height: 100%; position: static; } .home-carousel { height: 100%; box-shadow: 0 4px 40px 80px rgba(25, 35, 35, 1); } .home-carousel .slick-list, .home-carousel .slick-track, .home-carousel .slick-slider, .home-carousel .item-wrap, .home-carousel .items-block { height: 100%; } .home-carousel .slick-prev { left: 25px; right: auto; display: none !important; } .home-carousel .slick-next { right: 25px; display: none !important; } .slick-dots { bottom: 25px; } .home-carousel .slick-slider { overflow: hidden; } .home-carousel .items-block { background-repeat: no-repeat; background-position: center center; background-size: cover; } .home-carousel .item-wrap { overflow: hidden; } .home-carousel .slick-slide .items-block { transform: scale(1.1); transform-origin: center center; transition-duration: 8s; } .home-carousel .slick-slide.slick-current .items-block { transform: scale(1); transform-origin: center center; transition-duration: 8s; } .env-row, .env-sub-row { z-index: 1; } .env-content { background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.8) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#cc000000', GradientType=0); } /* .env-content::after{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url(/files/www/bline-texture.png); z-index: 0; } */ .env-content>.container { z-index: 1; } .env-row .column { padding: 0; } .env-row>.column { overflow: hidden; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(21, 35, 35, 0.8) 20%, rgba(21, 35, 35, 1) 50%, rgba(21, 35, 35, 0.8) 80%, rgba(21, 35, 35, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0d000000', endColorstr='#00152323', GradientType=0); } .env-row>.column::after { content: ''; position: absolute; left: 0; right: 0; top: 24px; bottom: -12px; box-shadow: -8px -8px 8px rgba(0, 0, 0, 0.5) inset; transform: rotate(1.2deg); transform-origin: bottom right; } .env-row .row { margin: 0; } .env-row .env-topic { font-size: 16px; padding: 0 26px; color: rgba(240, 201, 0, 0.6); text-align: right; transition-duration: 1s; opacity: 0.6 } .env-row .env-topic::first-letter { font-size: 20px; } .env-row .env-txt { padding: 0 20px; color: #999; font-size: 14px; transition-duration: 1s; } .env-row .column:hover .env-txt { color: #EBEBEB; transition-duration: 1s; } .env-row .column:hover .env-topic { opacity: 1; transition-duration: 1s; } .about-sec { background-size: cover; } .about-sec::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 0; box-shadow: 0 2px 30px 26px #000; z-index: 1; } .about-villa-text, .about-title { color: #EBEBEB; text-shadow: 0 0 6px #000; z-index: 2; font-size: 14px; } .about-title { display: block; margin: 0 auto; max-width: 480px; } .about-title:after { content: ''; position: absolute; top: auto; left: 0; right: auto; bottom: -10px; transition-duration: 2s; width: 0; height: 3px; } .about-title.enter:after { content: ''; position: absolute; width: 90%; max-width: 300px; transition-duration: 2s; background: linear-gradient(to right, rgba(192, 178, 115, 1) 0%, rgba(192, 178, 115, 1) 70%, rgba(0, 0, 0, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c0b273', endColorstr='#00000000', GradientType=1); } .tlt-img { visibility: hidden; max-width: 164px; margin: 20px 0; } .tlt-item { visibility: hidden; } .banner-html { height: 560px; } .banner-fadeup::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 300px; box-shadow: 0 -20px 10px 10px #000; background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#00000000', GradientType=0); } .rooms-article::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url(/files/background/gradient-bg4.jpg?v=183131); background-repeat: no-repeat; background-size: cover; background-position: center bottom; z-index: -1; } .rooms-detail-article::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url(/files/background/gradient-bg4.jpg?v=183131); background-repeat: no-repeat; background-size: cover; background-position: center bottom; z-index: -1; } .env-article::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url(/files/background/gradient-bg4.jpg?v=183131); background-repeat: no-repeat; background-size: cover; background-position: center bottom; z-index: -1; } .loc-article::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url(/files/background/gradient-bg4.jpg?v=183131); background-repeat: no-repeat; background-size: cover; background-position: center bottom; z-index: -1; } .news-article::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url(/files/background/gradient-bg4.jpg?v=183131); background-repeat: no-repeat; background-size: cover; background-position: center bottom; z-index: -1; } .contact-article::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url(/files/background/gradient-bg4.jpg?v=183131); background-repeat: no-repeat; background-size: cover; background-position: center bottom; z-index: -1; } .offset-sec { height: 80px; } .rooms-content { margin-top: -260px; } .rooms-title { display: block; max-width: 480px; color: #EBEBEB; text-shadow: 0 0 6px #000; font-size: 14px; } .rooms-title:after { content: ''; position: absolute; top: auto; left: 0; right: auto; bottom: -10px; transition-duration: 2s; width: 90%; max-width: 300px; height: 3px; background: linear-gradient(to right, rgba(192, 178, 115, 1) 0%, rgba(192, 178, 115, 1) 70%, rgba(0, 0, 0, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c0b273', endColorstr='#00000000', GradientType=1); } .rooms-img-row>.column { padding: 0; } .rooms-img-row>.column:hover {} .rooms-img-row>.column::before, .rooms-img-row>.column::after { content: ''; position: absolute; left: 20px; right: 20px; top: 20px; bottom: 20px; border: 1px solid rgba(255, 255, 255, 0.5); transition-duration: 0.5s; z-index: 5; } .rooms-img-row>.column::before { border-top: none; border-bottom: none; transform: scale(1, 0); } .rooms-img-row>.column:hover::before { transform: scale(1, 1); transition-duration: 0.5s; } .rooms-img-row>.column::after { border-bottom: none; border-left: none; border-right: none; transform: scale(0, 1); } .rooms-img-row>.column:hover::after { transform: scale(1, 1); transition-duration: 0.5s; } .rooms-sign { position: absolute; bottom: 0; height: 40px; left: 20px; right: 20px; background-position: center center; background-repeat: no-repeat; transition-duration: 0.5s; background-size: 32px 32px; background-image: url(/files/rooms/s-logo.png); transform: translateY(0); opacity: 0; z-index: 2; } .rooms-sign::before { content: ''; position: absolute; left: calc(50% - 20px); right: calc(50% + 20px); top: 20px; height: 0; border-top: 1px solid rgba(255, 255, 255, 0.7); } .rooms-sign::after { content: ''; position: absolute; left: calc(50% + 20px); right: calc(50% - 20px); top: 20px; height: 0; border-top: 1px solid rgba(255, 255, 255, 0.7); } .rooms-img-row>.column:hover .rooms-sign { background-size: 32px 32px; opacity: 0.9; } .rooms-img-row>.column:hover .rooms-sign::before { left: 0; transition-duration: 0.5s; } .rooms-img-row>.column:hover .rooms-sign::after { right: 0; transition-duration: 0.5s; } .rooms-img-row .rooms-img { background-size: cover; background-position: center center; padding-top: 45%; transform: scale(1, 1); border: 0px solid #999; transition-duration: 1s; opacity: 1; box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.6); color: #ebebeb; overflow: hidden; z-index: 0; padding-bottom: 0; margin: 5px; background-color: #000; } /* .rooms-img-row .rooms-img::before{content:''; position:absolute; left:0; right:0; top:0; bottom:0; box-shadow:-8px -8px 8px rgba(0,0,0,0.4) inset; transform:skew(-1.6deg,-1deg); transform-origin:bottom right;} */ .rooms-img-row>.column:hover .rooms-img { transform: scale(1.0526); transition-duration: 1s; opacity: 1; box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.6); color: #FFF; z-index: 1; } .rooms-img-row>.column .room-name { font-family: 仿宋體; font-size: 18px; color: #FFF; position: absolute; bottom: 16px; right: 16px; text-shadow: -2px -2px 6px #000, -2px 2px 6px #000, 2px 2px 6px #000, 2px -2px 6px #000; transition-duration: 1s; transform-origin: center center; z-index: 2; } .rooms-img-row>.column:hover .room-name { bottom: 28px; right: 32px; transition-duration: 1s; } .rooms-intro .img-col { text-align: center; } .rooms-intro .text-col { height: 200px; } .rooms-intro .text-inner { display: table; min-height: 100px; margin-left: 24px; padding-left: 10px; padding-top: 24px; vertical-align: text-bottom; top: 50%; transform: translateY(-50%); } .rooms-intro .text-inner::before { content: ''; border-right: 8px solid rgb(103, 83, 45); position: absolute; width: 32px; right: 100%; top: 0; bottom: 0; background-image: url(/files/rooms/prefix-15.png); background-repeat: no-repeat; background-position: left top; } .rooms-intro-topic { text-align: center; margin: auto; font-size: 14px; } .rooms-intro .text-inner span { display: table-cell; vertical-align: bottom; } .rooms-intro-topic .topic-inner:before { content: ''; position: absolute; width: calc(50% - 50px); right: auto; left: 0; height: 6px; top: 50%; transform: translateY(-50%); transition-duration: 2s; opacity: 0.6; background: linear-gradient(to left, rgba(192, 178, 115, 1) 0%, rgba(192, 178, 115, 1) 70%, rgba(0, 0, 0, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#c0b273', GradientType=1); } .rooms-intro-topic .topic-inner:after { content: ''; position: absolute; width: calc(50% - 50px); right: 0; left: auto; height: 6px; top: 50%; transform: translateY(-50%); transition-duration: 2s; opacity: 0.6; background: linear-gradient(to right, rgba(192, 178, 115, 1) 0%, rgba(192, 178, 115, 1) 70%, rgba(0, 0, 0, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c0b273', endColorstr='#00000000', GradientType=1); } .room-name.topic-inner:before, .room-name.topic-inner:after { width: calc(50% - 70px); } .service-section row { z-index: 1; } .rooms-detail-carousel .items-nav { width: calc(100% - 40px); display: block; margin: 10px auto; } .rooms-detail-carousel .items-view .items-block { background-size: contain; background-position: center center; background-repeat: no-repeat; padding-bottom: 66.25%; background-color: rgba(0, 0, 0, 0.9); } .rooms-detail-carousel .items-nav .slick-slide { padding: 4px; } .items-nav .slick-next, .items-nav .slick-prev { background-color: transparent; height: 100%; } .items-nav .slick-next::before, .items-nav .slick-prev::before { display: inline-block; font-family: FontAwesome; font-size: 40px; text-rendering: auto; -webkit-font-smoothing: antialiased; } .items-nav .slick-next::before { content: '\f105'; } .items-nav .slick-prev::before { content: '\f104'; } .env-img-row>.column { padding: 0px; } .env-img-row>.column>div { overflow: hidden; } .env-img-row .img-layer { position: absolute; right: 2px; top: 2px; bottom: 2px; left: 2px; z-index: 10; background-size: cover; background-position: center center; transform: scale(1, 1); transition-duration: 2s; } .env-img-row .img-layer:hover { transform: scale(1.1, 1.1); transition-duration: 2s; } .env-carousel-wrap { height: 24%; } .env-carousel { overflow: hidden; padding: 40px 0; } .env-carousel .slick-next, .env-carousel .slick-prev { height: 25px; width: 30px; opacity: 0.6; background-size: auto 25px; text-align: center; background-repeat: no-repeat; background-position: center center; z-index: 10; transition-duration: .3s; } .env-carousel .slick-prev { background-image: url(/files/btn-arrow-l.png); left: 25px; } .env-carousel .slick-next { background-image: url(/files/btn-arrow-r.png); right: 25px; } .env-carousel .slick-prev:hover, .env-carousel .slick-next:hover { opacity: 1; transition-duration: .3s; } .env-carousel .slick-prev:before { content: ''; } .env-carousel .slick-next:before { content: ''; } .env-carousel .slick-list { overflow: hidden; } .env-carousel .slick-track { margin: 30px 0; } .env-carousel .slick-slide, .env-carousel div { z-index: 0; box-sizing: border-box; position: relative; } .env-carousel .slick-slide.slick-current { z-index: 10; } .env-carousel .item-wrapper { border: 0; transform: scale(1); transform-origin: center center; transition-duration: .5s; box-sizing: border-box; z-index: 0; } .env-carousel .slick-current .item-wrapper { border: 0px solid #FFF; transform: scale(1.38); transition-duration: .3s; transition-delay: .3s; z-index: 10; } .env-carousel .items-block { display: block; position: relative; margin: 0; padding-bottom: 75%; background-size: cover; background-position: center center; background-clip: padding-box; transform: scale(1); transform-origin: center center; transition-duration: .3s; opacity: .3; } .env-carousel .slick-slide.slick-current .items-block { transform: scale(0.9); opacity: 1; transition-duration: .3s; } .env-carousel .items-block:before { position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; content: ''; transition-duration: .3s; z-index: 10; background-color: rgba(0, 0, 0, 0.5); background-image: url(/images/search-45.png); background-size: 25px 25px; background-repeat: no-repeat; background-position: center center; } .env-carousel .slick-current .items-block:hover:before { opacity: 1; transition-duration: .3s; z-index: 10; } .rooms-detail-carousel .items-nav .items-block { background-size: cover; background-position: center center; background-repeat: no-repeat; padding-bottom: 63.47%; transition-duration: 0.5s; opacity: 0.6; } .rooms-detail-carousel .items-nav .slick-current .items-block { opacity: 1; transition-duration: 0.5s; transform-origin: center center; transform: scale(1.1, 1.1); } .news-content { margin-top: -260px; } .news-cat-block .cat-link { color: #999; } .news-cat-block .cat-link:hover { color: rgba(194, 170, 110, 1); } .news-cat-block .cat-item.active .cat-link { color: rgba(194, 170, 110, 1); } .news-cat-block .cat-item.active .cat-link::before { left: -24px; top: 2px; content: ''; position: absolute; width: 20px; height: 20px; background-position: center center; background-repeat: no-repeat; transition-duration: 0.5s; background-size: 20px 20px; background-image: url(/files/rooms/s-logo.png); } .cat-button { color: #FFF; outline: 0; border-color: rgba(213, 183, 22, 1.00); width: 100%; text-align: left; overflow: hidden; text-overflow: ellipsis; padding-right: 35px; } .cat-button:hover, .cat-button:focus, .cat-button:active { outline: 0; border-color: rgba(243, 207, 20, 1.00); background-color: transparent; } .cat-button::after { font-family: FontAwesome; content: '\f107'; position: absolute; right: 12px; top: 50%; margin-top: -12px; font-size: 24px; line-height: 1; color: #FFF; transition-duration: .3s; transform: rotate(0deg); } .cat-button.trigger::after { transition-duration: .3s; transform: rotate(-180deg); } .cat-wrap { background-color: transparent; list-style: none; padding: 0; margin: 0; z-index: 2; } .item-cat-wrap { list-style: none; padding: 0; margin: 0; z-index: 2; } .cat-item:before { content: ''; } .loc-content { margin-top: -260px; } .map-info-link, .map-info-link:link, .map-info-link:hover, .map-info-link:active, .map-info-link:visited { color: rgba(213, 147, 21, 1.00); } .map-info-title { font-size: 18px; text-align: center; font-family: 思源黑體; font-weight: 700; } .contactmap { position: relative; overflow: hidden; height: 500px; } .form-input { display: inline-block; width: 100%; border-radius: 6px; border: 1px solid rgba(217, 188, 38, 1.00); padding: 4px; background-color: transparent; color: #FFF; } .radio-wrap { display: inline-block; border-radius: 6px; width: 100%; line-height: 40px; } .form-input:focus { box-shadow: 0 0 8px 1px #FFF; outline: 0; } .form-wrap { display: block; position: relative; padding: 30px; background-color: rgba(0, 0, 0, 0.6); } .form-wrap h3 { margin-bottom: 30px; } .contactform { position: relative; } .contactform textarea { height: 120px; } .contactform input {} .contactform .column { margin-bottom: 16px; line-height: 30px; } .contactform .send-btn {} .contactform .form_label { display: inline-block; } .contactform .row { margin-left: -0.975rem; margin-right: -0.975rem; } .send-btn { color: rgb(240, 240, 240); font-size: 14px; cursor: pointer; width: 100%; max-width: 150px; transition-duration: 0.5s; padding: 6px; border-width: 1px; border-style: solid; border-color: rgb(209, 164, 5); border-image: initial; } .send-btn:hover, .send-btn:focus { background-color: transparent; color: rgb(209, 164, 5); border-color: rgba(209, 180, 55, 1); } .contactform .help-block { font-size: 14px; color: #FF3F00; position: absolute; right: 24px; bottom: 0; pointer-events: none; } .contactform .help-block .list-unstyled { margin: 0; } .contactform .has-error .form-input { border-color: #FF3F00; } /* footer::before{ content:''; position:absolute; top:0; left:0; right:0; height:100px; background: linear-gradient(to bottom, rgba(25,35,35,1) 0%,rgba(25,35,35,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#192323', endColorstr='#00192323',GradientType=0 ); } */ .footer-section { font-size: 14px; background-image: url(/files/footer-bg.png?v=165133); background-repeat: repeat-x; background-size: auto 100%; } #footer-content { text-align: center; } .footer-bottom { font-size: 12px; border-top: 1px solid #454545; padding-top: 20px; margin-top: 20px; } .footer-icon { font-size: 14px; width: 14px; height: 14px; vertical-align: baseline; transform: translateX(3px) translateY(2px); } .vertical-dv { color: #666; padding: 0 6px; } .ch_link:link, .ch_link:visited { color: #999; } .ch_link:hover { color: #CCC; } .main-content-block { margin-top: -260px; } .main-content-block>.container { background-color: rgba(0, 0, 0, 0.9); box-shadow: 0 0 30px rgba(0, 0, 0, 0.7); } .rooms-intro-topic>span { color: rgba(223, 190, 20, 0.6); } .topic-inner { color: #FFF; } .topic-inner span:nth-child(1) { font-size: 18px; } .topic-inner span:nth-child(2) { font-size: 24px; } .modal-link-wrap { max-width: 400px; margin: 20px auto; } .notice-link, .remit-link { color: #F0F0F0; font-size: 14px; padding: 6px; cursor: pointer; border: 1px solid rgba(209, 164, 5, 1.00); width: 44%; transition-duration: .5s; } .notice-link { float: left; } .remit-link { float: right; } .booking-btn { font-size: 14px; background-color: transparent; padding: 6px; border: 1px solid rgba(209, 164, 5, 1.00); width: 100%; margin-top: 6%; } .notice-link:hover, .remit-link:hover { color: rgba(194, 170, 110, 1); transition-duration: .5s; } .modal-header { border: 0; } .modal-link-wrap { margin-top: 30px; } #notice-modal button.close { opacity: 0.6; color: #FFF; transition-duration: .5s; } #notice-modal button.close:hover { opacity: 1; transition-duration: .5s; } #notice-modal { height: 100%; } #notice-modal .modal-dialog { } #notice-modal .modal-content, #notice-modal .modal-header { height: 100%; background-color: rgba(0, 0, 0, 0.80); border: 1px solid rgba(196, 168, 24, 0.7); } #notice-modal .notice-wrap { height: calc(100% - 65px); overflow-y: auto; padding-right: 12px; } #notice_list {} #noticeModalLabel { margin-right: 50px; } #remit-modal button.close { opacity: 0.6; color: #FFF; transition-duration: .5s; } #remit-modal button.close:hover { opacity: 1; transition-duration: .5s; } #remit-modal { height: 100%; } #remit-modal .modal-dialog { } #remit-modal .modal-content, #remit-modal .modal-header { height: 100%; background-color: rgba(0, 0, 0, 0.80); border: 1px solid rgba(196, 168, 24, 0.7); } #remit-modal .remit-wrap { height: calc(100% - 65px); overflow-y: auto; padding-right: 12px; } #remit_list {} #remitModalLabel { margin-right: 50px; } #price-modal button.close { opacity: 0.6; color: #FFF; transition-duration: .5s; } #price-modal button.close:hover { opacity: 1; transition-duration: .5s; } #price-modal { height: 100%; } #price-modal .modal-dialog { } #price-modal .modal-content, #price-modal .modal-header { height: 100%; background-color: rgba(0, 0, 0, 0.80); border: 1px solid rgba(196, 168, 24, 0.7); } #price-modal .price-wrap { height: calc(100% - 65px); overflow-y: auto; padding-right: 12px; } #price_list {} #priceModalLabel { margin-right: 50px; } #price-modal .booking-btn { margin: 0 auto 50px auto; display: block; max-width: 300px; font-size: 18px; } .price-table { border-left: 1px solid #EEE; border-top: 1px solid #EEE; } .price-table td { padding: 4px; border-right: 1px solid #EEE; border-bottom: 1px solid #EEE; } .price-table .even-tr { background-color: #222; color: #DDD; } @media (max-width: 1200px) { .nav-container { width: 100%; max-width: initial; } .top-banner { height: 480px; } } @media (max-width: 992px) { .about-sec { background-size: auto 140% !important; } .rooms-intro .text-col { height: 120px; margin-bottom: 80px; } .rooms-intro .text-inner { left: 50%; transform: translateX(-50%); } } @media (max-width: 768px) { .top-banner { height: 440px; } .env-sub-row .img-r-col, .env-sub-row .img-col { text-align: right; } .env-sub-row .column.img-r-col img, .env-sub-row .column.img-col img { max-width: 200px; } .env-row, .env-sub-row { /* display: flex; flex-wrap: wrap; */ } .env-row>.column { padding-bottom: 20px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(21, 35, 35, 0.8) 20%, rgba(21, 35, 35, 1) 50%, rgba(21, 35, 35, 0.8) 80%, rgba(21, 35, 35, 0.6) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0d000000', endColorstr='#00152323', GradientType=0); } .env-sub-row .img-r-col, .env-sub-row .img-col { text-align: right; } .env-sub-row .img-r-col img, .env-sub-row .img-col img { max-width: 260px; } .env-sub-row .img-r-col { order: 0; } .env-sub-row .txt-l-col { order: 1; } .news-cat-block .cat-wrap { width: 100%; box-shadow: 0 4px 10px rgba(255, 255, 255, 0.6); background-color: rgba(0, 0, 0, 0.8); } .news-cat-block .cat-link { display: block; } .news-cat-block .cat-link:hover {} .news-cat-block .cat-item.active .cat-link::before { left: -32px; content: ''; position: absolute; width: 26px; height: 26px; background-position: center center; background-repeat: no-repeat; transition-duration: 0.5s; background-size: 26px 26px; background-image: none; } .rooms-intro .text-col { max-width: 460px; margin-left: auto; margin-right: auto; display: block; float: none; } .rooms-intro .text-inner span { font-size: 14px; line-height: normal; } .rooms-intro .text-inner span br { display: none; } .rooms-intro .img-col>img { width: 100% !important; max-height: 200px; } } @media (max-width: 576px) { .top-banner { height: 400px; } .about-villa-text { font-size: 14px; } .rooms-intro .text-inner { word-break: break-all; } .rooms-intro .text-inner span br { display: none; } } @media (max-width: 576px) { .d-lt-table-cell { display: table-cell !important; } } @media (min-width: 421px) { .inline-420 { display: none; } } @media (max-width: 420px) { .nav-bar, .navflow, .navbar-nav { width: 100%; } .rooms-intro .text-col { height: 200px; margin-bottom: 60px; } .env-row>.column { width: calc(100% - 20px); display: block; float: none; margin: auto; } .inline-420 { display: inline; } .hidden-down-420 { display: none; } } @media (max-width: 320px) { .top-banner { height: 380px; } .env-row { width: calc(100% - 15px); margin: 0 auto; } } .equalizer { position: absolute; bottom: 6px; left: 6px; display: block; width: 5px; background-color: #FFF; height: 5px; } .equalizer, .equalizer::before, .equalizer::after { animation: equalize 2s steps(25, end) 0s infinite; } .equalizer::before, .equalizer::after { content: ''; position: absolute; bottom: 0; left: 8px; height: 17px; width: 5px; background-color: #FFF; } .equalizer::before { animation-name: equalize2; } .equalizer::after { left: 16px; animation-name: equalize3; } @keyframes equalize { 0% { height: 5px; } 4% { height: 2.5px; } 8% { height: 5px; } 12% { height: 8.75px; } 16% { height: 12.5px; } 20% { height: 16.25px; } 24% { height: 15px; } 28% { height: 13.75px; } 32% { height: 13.75px; } 36% { height: 10px; } 40% { height: 12.5px; } 44% { height: 12.5px; } 48% { height: 13.75px; } 52% { height: 15px; } 56% { height: 16.25px; } 60% { height: 15px; } 64% { height: 15px; } 68% { height: 13.75px; } 72% { height: 12.5px; } 76% { height: 13.75px; } 80% { height: 15px; } 84% { height: 15px; } 88% { height: 16.25px; } 92% { height: 12.5px; } 96% { height: 8.75px; } 100% { height: 5px; } } @keyframes equalize2 { 0% { height: 15px; } 4% { height: 16.25px; } 8% { height: 15px; } 12% { height: 15px; } 16% { height: 13.75px; } 20% { height: 13.75px; } 24% { height: 13.75px; } 28% { height: 15px; } 32% { height: 15px; } 36% { height: 16.25px; } 40% { height: 16.25px; } 44% { height: 16.25px; } 48% { height: 13.75px; } 52% { height: 10px; } 56% { height: 7.5px; } 60% { height: 10px; } 64% { height: 12.5px; } 68% { height: 13.75px; } 72% { height: 16.25px; } 76% { height: 15px; } 80% { height: 15px; } 84% { height: 13.75px; } 88% { height: 13.75px; } 92% { height: 11.25px; } 96% { height: 13.75px; } 100% { height: 15px; } } @keyframes equalize3 { 0% { height: 11.25px; } 4% { height: 8.75px; } 8% { height: 11.25px; } 12% { height: 13.75px; } 16% { height: 16.25px; } 20% { height: 18.75px; } 24% { height: 17.5px; } 28% { height: 13.75px; } 32% { height: 11.25px; } 36% { height: 10px; } 40% { height: 8.75px; } 44% { height: 6.25px; } 48% { height: 10px; } 52% { height: 12.5px; } 56% { height: 13.75px; } 60% { height: 16.25px; } 64% { height: 15px; } 68% { height: 13.75px; } 72% { height: 13.75px; } 76% { height: 12.5px; } 80% { height: 15px; } 84% { height: 16.25px; } 88% { height: 17.5px; } 92% { height: 15px; } 96% { height: 12.5px; } 100% { height: 11.25px; } } @keyframes equalizepaused { 0% { height: 12.5px; } 100% { height: 0px; } } .audio-ctrl.paused .equalizer, .audio-ctrl.paused .equalizer::before, .audio-ctrl.paused .equalizer::after { height: 0; animation-name: equalizepaused; animation-duration: .5s; animation-iteration-count: 1; transition-duration: .5s; } .audio-ctrl { position: fixed; top: auto; left: auto; right: 20px; bottom: 20px; background: rgba(0, 0, 0, 0.5); width: 32px; height: 32px; z-index: 50; cursor: pointer } /* .audio-ctrl::before{ content: '\f001'; font-family: FontAwesome; display: block; position: absolute; color: #FFF; font-size: 24px; top:3px; left:3px; visibility: hidden; } */ .audio-ctrl::after { content: '\f28c'; font-family: FontAwesome; display: block; position: absolute; color: rgba(255, 255, 255, 0.9); font-size: 24px; top: 3px; left: 6px; visibility: hidden; } .audio-ctrl.paused::before, .audio-ctrl.paused::after { visibility: visible; animation-name: bounceIn; animation-duration: .5s; } .audio-ctrl.paused:hover::after { content: '\f01d'; }